/**
 * th.soproteco.com — Consola de contratación de Talento Humano.
 *
 * Aplica la skill «Glassmorphism / Glossy SOPROTECO» v1.2 con el alcance fijado para `th` (§0.0):
 *   SÍ  tipografía Poppins, paleta institucional (§3.1), fondo base, foco visible (§4.9),
 *       matrices de contraste (§5), prohibiciones (§6) y robustez (§8).
 *   NO  efecto vidrio: sin tokens --glass-*, sin desenfoque de fondo, sin brillo especular, sin orbes
 *       ni halos KPI (§3.2–3.4, §4.1–4.2, §4.6). Las superficies son sólidas.
 *
 * Contrastes verificados con el método de §7 (WCAG 2.1, umbral 0.04045) sobre las superficies
 * sólidas de abajo. Peores casos: texto secundario claro #475569 sobre #f1f5f9 = 6.92:1; oscuro
 * #94a3b8 sobre #1b1e28 = 6.5:1; botón primario oscuro hueso sobre #c81d25 = 5.09:1; badge azul
 * claro #1d4ed8 sobre tinte = 5.36:1. Si cambia un color, recalcule antes de publicar.
 *
 * Tema: claro por defecto, oscuro con la clase `dark` en <html> (static/interfaz.js, clave
 * localStorage `soproteco_theme`, la misma de la App Móvil).
 */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("fuentes/poppins-900.woff2") format("woff2"); }

/* =============================================================================
   0. Tokens (claro por defecto, oscuro con html.dark)
   ============================================================================= */
:root {
  /* Marca (§3.1) */
  --rojo: #c81d25;
  --rojo-hover: #b01920;
  --rojo-oscuro: #8f1217;
  --rojo-texto: #a3161d;                     /* rojo de marca oscurecido: 6.30:1 sobre #f1f5f9 */
  --rojo-claro: #ff6b72;
  --dorado: #9a6b3e;
  --dorado-claro: #e5c185;
  --bronce: #4a2e14;
  --hueso: #f5f1e8;

  /* Superficies sólidas */
  --pagina: #f1f5f9;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;                   /* cabeceras de tabla, barras de filtros */
  --hover-suave: #f1f5f9;
  --fila-hover: #f8fafc;
  --borde: #e2e8f0;
  --borde-fuerte: #cbd5e1;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px -6px rgba(15, 23, 42, 0.08);

  /* Texto (§5.3: nunca #64748b como texto) */
  --texto: #0f172a;                          /* 17.85:1 sobre blanco */
  --texto-medio: #334155;
  --texto-suave: #475569;                    /* 6.92:1 sobre #f1f5f9 */
  --texto-tenue: #475569;
  --acento: var(--rojo-texto);

  /* Campos (§4.8) */
  --campo-bg: #ffffff;
  --campo-borde: #64748b;                    /* borde, no texto: 4.76:1 (1.4.11) */
  --campo-texto: #0f172a;
  --campo-placeholder: #64748b;              /* §4.8: solo en claro y solo dentro del campo */

  /* Barra y pie */
  --nav-bg: #ffffff;
  --nav-borde: #e2e8f0;
  --nav-activa-bg: #a3161d;                  /* §4.3.1: pastilla activa, 7.81:1 con blanco */
  --nav-activa-texto: #ffffff;

  /* Botones: cada variante redefine estas variables (así el modo oscuro no las pisa) */
  --boton-texto: #ffffff;
  --boton-primario: linear-gradient(135deg, #d0222b 0%, #c81d25 55%, #9b1319 100%);
  --boton-primario-hover: linear-gradient(135deg, #d82028 0%, #d0222b 55%, #a3161d 100%);
  --boton-sec-bg: #e2e8f0;
  --boton-sec-hover: #cbd5e1;
  --boton-sec-texto: #0f172a;
  --boton-sec-borde: #cbd5e1;
  --boton-peligro: #b91c1c;
  --boton-peligro-hover: #991b1b;
  --boton-exito: #047857;
  --boton-exito-hover: #065f46;

  color-scheme: light;
}

html.dark {
  --acento: var(--rojo-claro);               /* §6.1: #ff6b72, 6.6:1; nunca #c81d25 como texto */

  --pagina: #07080b;
  --superficie: #121318;
  --superficie-2: #171922;
  --hover-suave: #1b1e28;
  --fila-hover: #171922;
  --borde: rgba(255, 255, 255, 0.09);
  --borde-fuerte: #334155;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.6);

  --texto: #f5f1e8;                          /* §6.13: blanco hueso */
  --texto-medio: #cbd5e1;
  --texto-suave: #94a3b8;                    /* 6.5:1 sobre #1b1e28 */
  --texto-tenue: #94a3b8;

  --campo-bg: #0e1017;
  --campo-borde: #94a3b8;
  --campo-texto: #f5f1e8;
  --campo-placeholder: #94a3b8;              /* §4.8: en oscuro #64748b no sirve como texto */

  --nav-bg: #0b0b0b;
  --nav-borde: rgba(255, 255, 255, 0.09);
  --nav-activa-bg: #c81d25;
  --nav-activa-texto: #f5f1e8;

  --boton-texto: #f5f1e8;
  --boton-primario: linear-gradient(135deg, #c81d25 0%, #b01920 55%, #8f1217 100%);
  --boton-primario-hover: linear-gradient(135deg, #c41c24 0%, #ad161d 55%, #8f1217 100%);
  --boton-sec-bg: #1e293b;
  --boton-sec-hover: #334155;
  --boton-sec-texto: #f5f1e8;
  --boton-sec-borde: #334155;

  color-scheme: dark;
}

/* =============================================================================
   1. Base
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--pagina);
  color: var(--texto);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--rojo); color: #fff; }

h1, h2, h3 { margin: 0; line-height: 1.3; color: var(--texto); }
h1 { font-size: 1.375rem; font-weight: 900; letter-spacing: -0.01em; }
h2 { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; }
h3 { font-size: 0.875rem; font-weight: 700; }
p { margin: 0.375rem 0; }
strong { font-weight: 700; }
code, kbd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.85em; }
kbd { padding: 0.05rem 0.35rem; border: 1px solid var(--borde-fuerte); border-radius: 0.25rem; background: var(--superficie-2); }
ul { margin: 0.375rem 0; padding-left: 1.25rem; }

a { color: var(--acento); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

.suave { color: var(--texto-suave); }
.texto-medio { color: var(--texto-medio); }
.acento { color: var(--acento); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Foco visible (§4.9, WCAG 2.4.7 / 1.4.11): outline sólido, nunca un halo translúcido */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}
html.dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--rojo-claro);
}

/* =============================================================================
   2. Fondo institucional (sin orbes: en `th` no hay efecto vidrio)
   ============================================================================= */
.app-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background-color: var(--pagina);
}
.app-background:before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  background-image: url("images/fondo_app_claro.webp");
  opacity: 0.5;
}
html.dark .app-background:before {
  background-image: url("images/fondo_app_oscuro.webp");
  opacity: 0.2;
}

/* =============================================================================
   3. Estructura: salto, barra (§4.3.1), contenido y pie
   ============================================================================= */
.salto-contenido {
  position: absolute;
  top: -9999px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rojo);
  color: #fff !important;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  border-radius: 0 0 0.5rem 0.5rem;
  z-index: 9999;
}
.salto-contenido:focus, .salto-contenido:focus-visible { top: 0; }

.contenedor { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .contenedor { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .contenedor { padding: 0 2rem; } }

.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-borde);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.barra-interior {
  position: relative;
  height: 4rem;                              /* §4.3.1: una sola línea de 64 px */
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marca { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; color: var(--texto); }
.marca:hover { text-decoration: none; }
/* §6.11: el escudo va solo, sin recuadro, borde ni resplandor */
.marca-escudo {
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
}
.marca-escudo img { width: 100%; height: 100%; object-fit: contain; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-texto strong { font-weight: 900; letter-spacing: 0.06em; font-size: 0.9375rem; color: var(--texto); }
.marca-texto small {
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--acento); margin-top: 0.125rem;
}

.navegacion { display: flex; align-items: center; justify-content: center; gap: 0.25rem; flex: 1; }
.navegacion a {
  display: inline-flex; align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--texto-medio);
  white-space: nowrap;
}
.navegacion a:hover { text-decoration: none; color: var(--texto); background: var(--hover-suave); }
.navegacion a[aria-current="page"] { background: var(--nav-activa-bg); color: var(--nav-activa-texto); font-weight: 600; }

.barra-acciones { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-shrink: 0; }

.boton-tema { min-width: 2.75rem; min-height: 2.75rem; }
.boton-menu { min-width: 2.75rem; min-height: 2.75rem; }
.boton-tema, .boton-menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-width: 2.75rem; min-height: 2.75rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 0;
  background: transparent;
  color: var(--texto-medio);
  font: inherit; font-size: 0.8125rem; font-weight: 600;
  cursor: pointer;
}
.boton-tema:hover, .boton-menu:hover { background: var(--hover-suave); color: var(--texto); }
.boton-tema svg, .boton-menu svg { width: 1.25rem; height: 1.25rem; }
.boton-tema .icono-sol { display: none; color: #fbbf24; }
html.dark .boton-tema .icono-sol { display: block; }
html.dark .boton-tema .icono-luna { display: none; }
.boton-menu[aria-expanded="true"] { background: var(--hover-suave); color: var(--texto); }

.sesion {
  display: flex; align-items: center; gap: 0.25rem;
  padding-left: 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
}
.sesion > svg { width: 1rem; height: 1rem; color: var(--acento); flex-shrink: 0; }
/* §4.3.1: el nombre se limita a 8rem; el completo va en title */
.sesion-correo {
  font-size: 0.75rem; font-weight: 500; color: var(--texto-medio);
  max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sesion button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0.25rem; border: 0; border-radius: 0.5rem;
  background: transparent; color: var(--texto-suave); cursor: pointer;
}
.sesion button:hover { color: #b91c1c; }
html.dark .sesion button:hover { color: #f87171; }
.sesion button svg { width: 1rem; height: 1rem; }

/* Por debajo de xl (1280 px) los enlaces pasan a un menú desplegable (§4.3.1) */
.boton-menu { display: inline-flex; }
@media (max-width: 1279.98px) {
  .navegacion {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding: 0.5rem;
    background: var(--nav-bg);
    border: 1px solid var(--nav-borde);
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: var(--sombra);
  }
  .navegacion.abierta { display: flex; }
  .navegacion a { min-height: 2.75rem; padding: 0.5rem 0.875rem; font-size: 0.875rem; }
}
@media (min-width: 1280px) {
  .boton-menu { display: none; }
  .navegacion { display: flex !important; }
}
@media (max-width: 639px) {
  .sesion-correo { display: none; }
  .marca-texto small { display: none; }
  /* El texto «Menú» se oculta solo a la vista: sigue siendo el nombre accesible del botón */
  .boton-menu .boton-menu-texto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

.contenido {
  position: relative;
  z-index: 10;
  flex: 1;
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

.pie {
  position: relative;
  z-index: 10;
  padding: 0.875rem 0;
  border-top: 1px solid var(--nav-borde);
  background: var(--nav-bg);
  font-size: 0.75rem;
  color: var(--texto-suave);
}
.pie-interior { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.5rem; text-align: center; }
@media (min-width: 900px) { .pie-interior { flex-direction: row; text-align: left; } }
.pie-marca { display: flex; align-items: center; gap: 0.5rem; }
.pie-marca img { width: 1.125rem; height: 1.125rem; object-fit: contain; }
.pie p { margin: 0; }
.pie-legal { font-size: 0.6875rem; color: var(--texto-suave); display: flex; flex-direction: column; gap: 0.125rem; }
@media (min-width: 900px) { .pie-legal { text-align: right; } }

/* =============================================================================
   4. Tarjetas y encabezados (superficies sólidas)
   ============================================================================= */
.tarjeta, .glass-panel {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 0 0 1rem;
}
@media (min-width: 1024px) { .tarjeta { padding: 1.5rem; } }
.tarjeta > h2:first-child, .tarjeta > .encabezado:first-child h2 { margin-top: 0; }
.tarjeta > h2:not(:first-child) { margin-top: 1.25rem; }
.tarjeta > .rejilla { align-items: start; }
.tarjeta > h2 + .hv-seccion, .tarjeta > .hv-seccion + .hv-seccion { margin-top: 0.75rem; }

/* Tarjeta interna (antes «glass-card»): sólida, sin desenfoque */
.glass-card, .hv-seccion, .fila-postulacion {
  position: relative;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 0.625rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.glass-card.interactiva:hover, .fila-postulacion:hover { border-color: var(--borde-fuerte); }
.glass-card.vacia { text-align: center; padding: 2rem 1rem; }
details.glass-card summary { cursor: pointer; font-size: 0.8125rem; }
details.glass-card p { margin-bottom: 0; font-size: 0.8125rem; }

.tarjeta-acceso { max-width: 26rem; margin: 2.5rem auto; padding: 2rem; }
.cabecera-acceso { text-align: center; margin-bottom: 1.25rem; }
.cabecera-acceso h1 { font-size: 1.375rem; font-weight: 900; margin: 0.75rem 0 0.25rem; }
.cabecera-acceso p { font-size: 0.8125rem; color: var(--texto-suave); margin: 0; }
.escudo-grande { width: 3.5rem; height: 3.5rem; margin: 0 auto; }
.escudo-grande img { width: 100%; height: 100%; object-fit: contain; }

/* Encabezado de página: título a la izquierda, acciones a la derecha */
.encabezado {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.encabezado > div:first-child { min-width: 0; flex: 1 1 24rem; }
.encabezado h1 { margin: 0.125rem 0 0.25rem; }
.encabezado p { margin: 0; max-width: 60rem; }
.encabezado.con-linea { border-bottom: 1px solid var(--borde); padding-bottom: 1rem; }
.encabezado .acciones { flex-shrink: 0; }

.volver { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; color: var(--texto-suave); }
.volver:hover { color: var(--texto); }

.sobretitulo {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acento);
}

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; font-size: 0.8125rem; color: var(--texto-suave); }
.meta strong { color: var(--texto-medio); font-weight: 600; }

/* =============================================================================
   5. Formularios (§4.8)
   ============================================================================= */
label, .etiqueta-campo {
  display: block;
  margin: 0.875rem 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-medio);
}
.sin-margen, .sin-margen-sup label { margin-top: 0; }
label.casilla-texto, label.en-linea-flex {
  text-transform: none; letter-spacing: normal; font-size: 0.8125rem; font-weight: 500;
  margin: 0; cursor: pointer; color: var(--texto);
}

/* Todo control de formulario lleva el borde de 3:1, sea cual sea su type (§11, hallazgo 4) */
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=search], input[type=url], input[type=date], input[type=time], input[type=datetime-local],
input[type=month], input[type=week], input[type=file], select, textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  background: var(--campo-bg);
  color: var(--campo-texto);
  border: 1px solid var(--campo-borde);
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.8125rem;
}
select { padding-right: 2rem; }
input[type=file] { padding: 0.375rem 0.5rem; }
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--campo-placeholder); opacity: 1; }
input[type=password] { letter-spacing: 0.12em; }
input[type=checkbox] { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--rojo); cursor: pointer; flex-shrink: 0; }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rojo) !important;
  outline-offset: 2px !important;
  border-color: var(--rojo) !important;
}
html.dark input:focus-visible, html.dark select:focus-visible, html.dark textarea:focus-visible {
  outline-color: var(--rojo-claro) !important;
  border-color: var(--rojo-claro) !important;
}

.ayuda { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--texto-suave); }

.campo-codigo { text-align: center; font-size: 1.5rem !important; letter-spacing: 0.35em; font-weight: 800; }
.campo-compacto { width: 14rem !important; display: inline-block !important; }
.campo-numero { width: 4.5rem !important; display: inline-block !important; text-align: center; }

.campo-password-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.campo-password-wrapper input { padding-right: 3rem; }
.toggle-clave-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0.45rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
}
.toggle-clave-btn:hover { color: var(--acento); }

.formulario { display: flex; flex-direction: column; gap: 0.125rem; }

fieldset.grupo {
  border: 1px solid var(--borde);
  border-radius: 0.625rem;
  padding: 0.5rem 1rem 1rem;
  margin: 0 0 1rem;
  background: var(--superficie-2);
}
fieldset.grupo legend { padding: 0 0.375rem; font-size: 0.8125rem; font-weight: 700; color: var(--texto); }

.casilla {
  display: flex; align-items: center; gap: 0.625rem;
  margin-top: 1rem; padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
}

/* =============================================================================
   6. Botones (§4.3–4.4): variantes por variables, cada parada ≥ 4.5:1
   ============================================================================= */
.boton {
  --b-bg: var(--boton-primario);
  --b-bg-hover: var(--boton-primario-hover);
  --b-texto: var(--boton-texto);
  --b-borde: rgba(255, 255, 255, 0.2);
  --b-sombra: 0 2px 8px -2px rgba(200, 29, 37, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  margin: 0;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  text-decoration: none !important;
  white-space: nowrap;
  background: var(--b-bg);
  color: var(--b-texto) !important;
  border: 1px solid var(--b-borde);
  box-shadow: var(--b-sombra);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.boton:hover:not(:disabled) { background: var(--b-bg-hover); }
.boton:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.boton.dorado {
  --b-bg: linear-gradient(135deg, #8a5a2e 0%, #7a4e26 55%, #4a2e14 100%);
  --b-bg-hover: linear-gradient(135deg, #7a4e26 0%, #6b4320 55%, #4a2e14 100%);
  --b-borde: rgba(229, 193, 133, 0.4);
  --b-sombra: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.boton.secundario {
  --b-bg: var(--boton-sec-bg);
  --b-bg-hover: var(--boton-sec-hover);
  --b-texto: var(--boton-sec-texto);
  --b-borde: var(--boton-sec-borde);
  --b-sombra: none;
}
.boton.fantasma {
  --b-bg: transparent;
  --b-bg-hover: var(--hover-suave);
  --b-texto: var(--texto-medio);
  --b-borde: transparent;
  --b-sombra: none;
}
.boton.peligro {
  --b-bg: var(--boton-peligro);
  --b-bg-hover: var(--boton-peligro-hover);
  --b-borde: #991b1b;
  --b-sombra: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.boton.exito {
  --b-bg: var(--boton-exito);
  --b-bg-hover: var(--boton-exito-hover);
  --b-borde: #065f46;
  --b-sombra: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Acción destructiva discreta: texto rojo sobre fondo neutro (para tablas) */
.boton.peligro-suave {
  --b-bg: transparent;
  --b-bg-hover: rgba(200, 29, 37, 0.08);
  --b-texto: var(--acento);
  --b-borde: var(--borde-fuerte);
  --b-sombra: none;
}

.boton.pequeno { min-height: 44px; padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.boton.grande { min-height: 48px; padding: 0.75rem 1.5rem; font-size: 0.9375rem; }
.boton.bloque { width: 100%; }
.boton svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* =============================================================================
   7. Avisos
   ============================================================================= */
.error, .ok, .aviso, .info {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  border-left-width: 3px !important;
}
.error { background: rgba(239, 68, 68, 0.10); border: 1px solid rgba(239, 68, 68, 0.35); color: #991b1b; }
html.dark .error { color: #fca5a5; }
.ok { background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.35); color: #065f46; font-weight: 500; }
html.dark .ok { color: #6ee7b7; }
.aviso { background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.40); color: #92400e; }
html.dark .aviso { color: #fcd34d; }
.aviso a, .error a, .ok a { color: inherit; text-decoration: underline; font-weight: 700; }
.info { background: var(--superficie-2); border: 1px solid var(--borde-fuerte); color: var(--texto-medio); }

/* =============================================================================
   8. Insignias (§4.7 / §5.4): texto + color, nunca solo color (1.4.1)
   ============================================================================= */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(100, 116, 139, 0.35);
  background: rgba(100, 116, 139, 0.12);
  color: #334155;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.375rem;
  white-space: nowrap;
}
html.dark .etiqueta { background: rgba(100, 116, 139, 0.20); color: #cbd5e1; }

.etiqueta.dorada { background: rgba(154, 107, 62, 0.14); border-color: rgba(154, 107, 62, 0.40); color: #6b4320; }
html.dark .etiqueta.dorada { background: rgba(154, 107, 62, 0.20); border-color: rgba(229, 193, 133, 0.40); color: #e5c185; }
.etiqueta.alerta { background: rgba(200, 29, 37, 0.10); border-color: rgba(200, 29, 37, 0.35); color: #a3161d; }
html.dark .etiqueta.alerta { background: rgba(200, 29, 37, 0.18); border-color: rgba(200, 29, 37, 0.45); color: #ff8a8f; }
.etiqueta.exito { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.40); color: #065f46; }
html.dark .etiqueta.exito { background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.45); color: #34d399; }
.etiqueta.espera { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.40); color: #1d4ed8; }
html.dark .etiqueta.espera { background: rgba(59, 130, 246, 0.18); border-color: rgba(59, 130, 246, 0.45); color: #93c5fd; }
.etiqueta.ambar { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.45); color: #92400e; }
html.dark .etiqueta.ambar { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.45); color: #fbbf24; }
.etiqueta.urgente { background: rgba(200, 29, 37, 0.10); border-color: rgba(200, 29, 37, 0.35); color: #a3161d; }
html.dark .etiqueta.urgente { background: rgba(200, 29, 37, 0.18); border-color: rgba(200, 29, 37, 0.45); color: #ff8a8f; }
.etiqueta.urgente::before {
  content: ""; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: currentColor;
  animation: pulsoUrgente 2s infinite;
}
@keyframes pulsoUrgente { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }

/* =============================================================================
   9. Progreso
   ============================================================================= */
.progreso { height: 0.375rem; background: #e2e8f0; border-radius: 9999px; overflow: hidden; margin-top: 0.25rem; }
html.dark .progreso { background: rgba(255, 255, 255, 0.10); }
.progreso span { display: block; height: 100%; background: var(--rojo); border-radius: 9999px; }
html.dark .progreso span { background: var(--rojo-claro); }
.progreso.delgada { height: 0.25rem; }

/* =============================================================================
   10. KPI (sin halos: §4.6 no aplica en `th`)
   ============================================================================= */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.kpi {
  position: relative;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-left-width: 3px;
}
.kpi-titulo { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); }
.kpi-valor { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin-top: 0.125rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.kpi.neutro { border-left-color: #64748b; }
.kpi.exito { border-left-color: #10b981; }
.kpi.dorado { border-left-color: #9a6b3e; }
.kpi.alerta { border-left-color: #c81d25; }

/* =============================================================================
   11. Filtros, tablas y paginación
   ============================================================================= */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 0.75rem;
  align-items: flex-end;
  margin: 0 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 0.625rem;
  background: var(--superficie-2);
}
.filtros > div { flex: 1 1 9rem; min-width: 0; max-width: 16rem; }
.filtros > .filtro-ancho { flex: 2 1 14rem; max-width: 22rem; }
.filtros > .filtros-boton { flex: 0 0 auto; }
.filtros label { margin-top: 0; }
.filtros-boton { display: flex; align-items: flex-end; }
.filtros-boton .boton { min-width: 6.5rem; }
@media (max-width: 520px) { .filtros > div, .filtros > .filtro-ancho { flex-basis: 100%; max-width: none; } .filtros-boton .boton { width: 100%; } }

.tabla-contenedor {
  overflow-x: auto;
  border-radius: 0.625rem;
  border: 1px solid var(--borde);
  background: var(--superficie);
  margin-top: 0.75rem;
}
.filtros + .tabla-contenedor { margin-top: 0; }
.tabla-documentos { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.tabla-documentos thead th { background: var(--superficie-2); position: sticky; top: 0; }
.tabla-documentos th, .tabla-documentos td {
  padding: 0.625rem 0.75rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle;
}
.tabla-documentos th {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-suave); white-space: nowrap;
}
.tabla-documentos tbody tr:last-child td { border-bottom: 0; }
.tabla-documentos tbody tr:hover { background: var(--fila-hover); }
.tabla-documentos td.vacia { text-align: center; padding: 1.75rem 1rem; color: var(--texto-suave); }
.tabla-documentos th.derecha, .tabla-documentos td.derecha { text-align: right; }
.tabla-documentos th.centro, .tabla-documentos td.centro { text-align: center; }

/* Tablas compactas de la consola: muchas filas sin ocupar toda la pantalla */
.tabla-compacta th, .tabla-compacta td { padding: 0.375rem 0.625rem; line-height: 1.35; }
.tabla-compacta td form.en-linea-flex { flex-wrap: nowrap; }
/* En tablas las etiquetas largas parten línea en lugar de ensanchar la columna */
.tabla-compacta td .etiqueta { white-space: normal; line-height: 1.25; padding-top: 0.1875rem; padding-bottom: 0.1875rem; max-width: 11.5rem; border-radius: 0.375rem; }
.tabla-compacta th { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.tabla-compacta td .acciones { flex-wrap: nowrap; justify-content: flex-end; gap: 0.375rem; }
.tabla-compacta td.col-acciones { width: 1%; white-space: nowrap; }

/* Celda de persona: nombre + cédula enmascarada, con «Revelar» al lado */
.celda-persona { display: flex; align-items: center; gap: 0.25rem; min-width: 11rem; }
.celda-persona > div { min-width: 0; }
.nombre { font-weight: 600; color: var(--texto); line-height: 1.3; }
.celda-persona .nombre { display: block; }
a.nombre:hover { color: var(--acento); }
.celda-persona .cedula-texto { display: block; font-size: 0.75rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.celda-persona .boton { margin-left: auto; }

/* Texto secundario dentro de una celda */
.sub { display: block; font-size: 0.75rem; color: var(--texto-suave); }
.recorte {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 13rem; min-width: 8rem;
}

.acciones-header, .acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.acciones-header { margin: 0.75rem 0 0; }
.acciones-fin {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde);
}
.acciones-fin.derecha { justify-content: flex-end; }

.paginacion { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.8125rem; }
.paginacion .suave { margin-right: auto; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; align-items: end; }
.rejilla.ancha { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.separado-sup { margin-top: 0.75rem; }

/* Lista de convocatorias en tarjetas */
.fila-postulacion { display: flex; flex-direction: column; gap: 0.625rem; }
.fila-postulacion-header { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 720px) { .fila-postulacion-header { flex-direction: row; justify-content: space-between; align-items: center; } }
.fila-postulacion-nombre { font-size: 0.9375rem; font-weight: 700; }
.fila-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.625rem; font-size: 0.8125rem; }
.fila-datos .dato-titulo, .dato-titulo {
  display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--texto-suave); margin-bottom: 0.125rem;
}
.fila-pie {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  padding-top: 0.625rem; border-top: 1px solid var(--borde);
}
.convocatoria-titulo { font-size: 1rem; margin: 0.375rem 0 0.125rem; }
.convocatoria-descripcion { margin: 0.625rem 0 0; padding-top: 0.625rem; border-top: 1px solid var(--borde); font-size: 0.8125rem; color: var(--texto-suave); }

/* =============================================================================
   12. Hoja de vida (detalle de la postulación)
   ============================================================================= */
.detalle-rejilla { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .detalle-rejilla { grid-template-columns: minmax(0, 1fr) 22rem; } }
.detalle-rejilla > * { min-width: 0; }
.detalle-rejilla .tarjeta { margin-bottom: 0; }
.detalle-columna { display: flex; flex-direction: column; gap: 1rem; }

.grid-hv { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; margin: 0; }
.hv-seccion { margin-bottom: 0; padding: 0.875rem 1rem; }
.hv-seccion h3 {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.625rem; padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--borde);
}
.hv-seccion h3 svg { color: var(--acento); flex-shrink: 0; width: 1rem; height: 1rem; }
.campo-hv { display: flex; flex-direction: column; margin-bottom: 0.5rem; }
.campo-hv:last-child { margin-bottom: 0; }
.campo-hv strong { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); }
.campo-hv > span, .campo-hv > form { font-size: 0.8125rem; color: var(--texto); overflow-wrap: anywhere; }

.panel-lateral h2 { font-size: 0.9375rem; margin-bottom: 0.5rem; }
.panel-lateral p { font-size: 0.8125rem; }
.panel-lateral form { margin-top: 0.5rem; }
.panel-lateral .boton { width: 100%; }
.panel-lateral label { margin-top: 0.5rem; }
.panel-lateral .campo-compacto { width: 100% !important; display: block !important; }
.panel-lateral form.en-linea-flex { display: flex; flex-direction: column; align-items: stretch; }
.panel-lateral label.en-linea-flex { flex-direction: row; align-items: center; }

.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.pasos li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; }

.ventana-72h { border-left-width: 3px; border-left-color: var(--dorado); }
.ventana-72h.activa { border-left-color: #10b981; }
.ventana-72h.urgente { border-left-color: #ef4444; }
.texto-urgente { color: #b91c1c; }
html.dark .texto-urgente { color: #f87171; }
.texto-exito { color: #047857; }
html.dark .texto-exito { color: #34d399; }

/* QR del segundo factor */
.qr-caja { text-align: center; padding: 1rem 0.75rem; }
.qr-caja img {
  display: block;
  width: 220px; max-width: 85%;
  aspect-ratio: 1;
  margin: 1rem auto;
  padding: 12px;
  object-fit: contain;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid var(--borde-fuerte);
  image-rendering: pixelated;
}
.secreto {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px dashed var(--dorado);
  background: var(--superficie-2);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.15em;
  color: var(--texto);
  user-select: all;
  word-break: break-all;
}

.nota-seguridad {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--borde);
  text-align: center; font-size: 0.75rem; color: var(--texto-suave);
}

.lista-legible { line-height: 1.8; padding-left: 1.25rem; color: var(--texto-medio); }

form.en-linea { display: inline; }
form.en-linea-flex { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; }

/* =============================================================================
   13. Preferencias del usuario (§8.2)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .tarjeta, .glass-panel, .glass-card, .hv-seccion, .fila-postulacion, .boton, .etiqueta,
  .error, .ok, .aviso, .info, .kpi, .filtros, .tabla-contenedor, .sesion {
    border: 1px solid CanvasText;
  }
  .app-background:before { display: none; }
  :focus-visible { outline: 2px solid; }
  .progreso span { forced-color-adjust: none; }
}

@media print {
  .barra, .pie, .app-background, .filtros, .paginacion, .acciones, .boton { display: none !important; }
  .tarjeta { box-shadow: none; border: 0; padding: 0; }
}