/* SPECTRA · hoja de estilos única. Sistema visual del documento 35; acuerdos previos en el documento 26 §5.
   Sin compilación, sin framework y sin CDN: la CSP con nonce bloquea todo lo externo y la demo debe abrir con mala señal.

   Capas, en este orden:
     1. Tokens          6. Datos: tablas
     2. Reinicio        7. Datos: métricas, chips y semáforos
     3. Tipografía      8. Formularios
     4. Estructura      9. Botones y acciones
     5. Superficies    10. Retroalimentación: banners, diálogo, estado vacío
                       11. Iconos · 12. Densidad · 13. Guía de estilos · 14. Adaptación, sol e impresión

   Regla de oro: ningún color se escribe fuera de :root. scripts/verificar_contraste.py lee los pares
   --chip-*-bg / --chip-*-ink y --banner-*-bg / --banner-*-ink de este archivo en CI y exige 7:1 en chips y 4,5:1 en texto. */

/* ============================================================ 1. TOKENS ============================================================ */
:root{
  /* -- Superficies y neutros. Cuatro planos: fondo de aplicación, tarjeta, cabecera de tabla y realce. ------------------- */
  --bg:#F3F5F9;            /* fondo de la aplicación (plano 0) */
  --card:#FFFFFF;          /* tarjetas, tablas y cabeceras de registro (plano 1) */
  --th:#F0F3F8;            /* encabezado de tabla y bloques de datos (plano 2) */
  --sup-realce:#E8EDF6;    /* fila señalada, pestaña activa, franja de sección */
  --sup-hover:#F6F8FC;     /* fila bajo el cursor */
  --line:#DFE4EC;          /* filete: separadores dentro de una superficie */
  --linea-fuerte:#C2C9D6;  /* borde: límite entre superficies */
  --borde-campo:#6B7280;   /* borde de campo, 4,8:1 sobre la tarjeta (WCAG 1.4.11) */

  /* -- Texto. Tres niveles; nunca gris claro sobre gris. ---------------------------------------------------------------- */
  --ink:#111827;           /* texto principal */
  --ink-2:#39415A;         /* texto secundario legible: valores de campos destacados, celdas de apoyo */
  --muted:#5A6478;         /* texto de apoyo (notas, denominadores), 5,9:1 sobre la tarjeta */
  --ink-inv:#FFFFFF;

  /* -- Marca. Solo identidad: barra superior, foco de sección, botón primario. ------------------------------------------ */
  --accent:#5B3DC4;        /* morado Espectra (del logo, tono funcional contrastado); blanco encima ≥4,5:1 */
  --accent-oscuro:#452E97; /* presionado y capas sobre la marca; blanco encima ≥7:1 */
  --accent-suave:#EEE9FB;  /* fondo de la sección activa (lavanda claro) */

  /* -- Semánticos. Separados de la marca: dicen estado, no identidad. --------------------------------------------------- */
  --ok:#2A7048;--warn:#845B08;--bad:#B5472D;--bad-suave:#FFFBFB;--info:#2F4B7C;
  --accion:#1B4F9C;        /* enlaces y acciones en fila, 7,9:1 sobre la tarjeta */
  --foco:#0B3D91;          /* anillo de foco, 10:1 sobre la tarjeta */
  --foco-halo:#BFD4F5;     /* segundo anillo: hace visible el foco sobre fondos oscuros */

  /* -- Familias de estado (chips). Fondo claro, texto oscuro del mismo tono, borde medio; contraste ≥ 7:1. -------------- */
  --chip-vigente-bg:#E3F3E8;--chip-vigente-ink:#0F5132;--chip-vigente-borde:#8CCFA6;
  --chip-nota-bg:#FFF3CD;--chip-nota-ink:#664D03;--chip-nota-borde:#F1D27A;
  --chip-bloquea-bg:#F8D7DA;--chip-bloquea-ink:#842029;--chip-bloquea-borde:#EFA2A9;
  --chip-falta-bg:#E9ECEF;--chip-falta-ink:#343A40;--chip-falta-borde:#C4CAD1;
  --chip-espera-bg:#DDEBFF;--chip-espera-ink:#0B3D91;--chip-espera-borde:#9DBDF0;
  --chip-viejo-bg:#EFE1F5;--chip-viejo-ink:#4A1B6B;--chip-viejo-borde:#C9A6DE;
  --chip-neutro-bg:#FFFFFF;--chip-neutro-ink:#3F4756;--chip-neutro-borde:#9AA3B2;

  /* -- Banners -------------------------------------------------------------------------------------------------------- */
  --banner-exito-bg:#E3F3E8;--banner-exito-ink:#0F5132;--banner-exito-borde:#2E8B57;
  --banner-aviso-bg:#FFF3CD;--banner-aviso-ink:#664D03;--banner-aviso-borde:#B98A2A;
  --banner-error-bg:#F8D7DA;--banner-error-ink:#842029;--banner-error-borde:#B5472D;
  --banner-info-bg:#DDEBFF;--banner-info-ink:#0B3D91;--banner-info-borde:#2F4B7C;

  /* -- Escala de espaciado, base 4. Todo margen y relleno sale de aquí. ------------------------------------------------- */
  --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:24px;--e-6:32px;--e-7:48px;--e-8:64px;

  /* -- Escala tipográfica. Cuerpo 16 px; nada bajo 12 px salvo el ojo de sección. --------------------------------------- */
  --fs-1:12px;   /* ojo de sección y etiquetas de columna, siempre con interletrado */
  --fs-2:13px;   /* etiquetas de campo, notas, chips */
  --fs-3:14px;   /* texto de apoyo */
  --fs-4:15px;   /* celdas de tabla */
  --fs-5:16px;   /* cuerpo y campos (16 px evita el zoom automático de iOS) */
  --fs-6:18px;   /* título de tarjeta */
  --fs-7:22px;   /* título de página */
  --fs-cifra:28px;
  --ls-ojo:.08em;--ls-titulo:-.01em;
  --lh-apretada:1.3;--lh-normal:1.5;
  --tipo:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tipo-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* -- Forma y profundidad. Cuatro elevaciones, nada flota sin razón. ---------------------------------------------------- */
  --r-1:3px;--r-2:6px;--r-3:10px;--r-pastilla:999px;
  --sombra-1:0 1px 2px rgba(17,24,39,.06),0 1px 1px rgba(17,24,39,.04);   /* tarjeta apoyada */
  --sombra-2:0 2px 6px rgba(17,24,39,.08),0 1px 2px rgba(17,24,39,.05);   /* cabecera fija, barra */
  --sombra-3:0 8px 24px rgba(17,24,39,.14),0 2px 6px rgba(17,24,39,.08);  /* menú desplegable */
  --sombra-4:0 24px 60px rgba(17,24,39,.28);                              /* diálogo modal */

  /* -- Densidad. La cómoda es la de terreno; .densidad-compacta las reescribe (capa 12). -------------------------------- */
  --toque:44px;            /* alto mínimo de todo lo que se toca (WCAG 2.5.8) */
  --fila-y:10px;           /* relleno vertical de celda */
  --tarjeta-p:20px;        /* relleno de tarjeta */
  --campo-alto:44px;
  --fs-tabla:var(--fs-4);
}

/* ============================================================ 2. REINICIO ========================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--fs-5)/var(--lh-normal) var(--tipo);color:var(--ink);background:var(--bg);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{vertical-align:middle}
:target{scroll-margin-top:var(--e-8)}

/* Foco de dos anillos: se ve sobre blanco y sobre la barra azul, y no depende del color del navegador. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--foco);outline-offset:2px;box-shadow:0 0 0 4px var(--foco-halo);border-radius:var(--r-1)}
.app-marca :is(a,button,select):focus-visible{outline-color:var(--ink-inv);box-shadow:0 0 0 4px var(--accent-oscuro)}

/* ============================================================ 3. TIPOGRAFÍA ======================================================== */
h1{font-size:var(--fs-7);line-height:var(--lh-apretada);letter-spacing:var(--ls-titulo);font-weight:650;margin:0 0 var(--e-1)}
h2{font-size:var(--fs-6);line-height:var(--lh-apretada);letter-spacing:var(--ls-titulo);font-weight:650;margin:var(--e-6) 0 var(--e-3)}
h3{font-size:var(--fs-5);line-height:var(--lh-apretada);font-weight:650;margin:var(--e-5) 0 var(--e-2)}
h2 .note,h3 .note{font-weight:400;letter-spacing:0}
p{margin:0 0 var(--e-3)}
.sub{color:var(--muted);font-size:var(--fs-4);margin:0 0 var(--e-5);max-width:96ch}
/* Cabecera con campos rotulados: en vez de una línea corrida «dato · dato · dato», cada valor lleva su etiqueta */
.meta-grid{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-5);margin:0;max-width:100%}
.meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}
.meta-k{font-size:var(--fs-1);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.meta-v{font-size:var(--fs-3);font-weight:600;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.meta-v .note{font-weight:400}
.meta-v.pendiente{color:var(--muted);font-weight:500}
.note{font-size:var(--fs-2);color:var(--muted);line-height:1.45}
.pequeno{font-size:var(--fs-3);font-weight:400}
.sin-margen-sup{margin-top:0}
.texto-mal{color:var(--bad);font-weight:600}
b,strong{font-weight:650}
/* Ojo de sección: la etiqueta pequeña en versalitas que ordena una tarjeta o una métrica. */
.ojo{display:block;font-size:var(--fs-1);font-weight:700;letter-spacing:var(--ls-ojo);text-transform:uppercase;color:var(--muted)}
/* Números: siempre de ancho fijo, para que las columnas de días y porcentajes se alineen. */
.cifra,.num,td.num,th.num{font-variant-numeric:tabular-nums}
td.num,th.num{text-align:right}
.nowrap{white-space:nowrap}
.pre{white-space:pre-wrap;margin:var(--e-2) 0 0;font:var(--fs-3)/1.6 var(--tipo-mono);color:var(--ink-2)}
.pre-mini{white-space:pre-wrap;font:var(--fs-2)/1.5 var(--tipo-mono)}
.lista-componentes{margin:var(--e-1) 0 0 var(--e-4);padding:0}
a{color:var(--accion);text-underline-offset:2px}
a:hover{color:var(--accent-oscuro)}
code{font:.92em/1.4 var(--tipo-mono);background:var(--th);border:1px solid var(--line);border-radius:var(--r-1);padding:1px 5px;color:var(--ink-2)}
.prop{display:inline-block;font-size:var(--fs-1);font-weight:700;letter-spacing:.04em;color:var(--warn);
      border:1px solid var(--chip-nota-borde);background:var(--chip-nota-bg);border-radius:var(--r-1);padding:0 5px}

/* ============================================================ 4. ESTRUCTURA ======================================================== */
/* Saltar al contenido: 16 tabulaciones menos para quien navega con teclado (documento 26 §7). */
.saltar{position:absolute;left:var(--e-3);top:-60px;z-index:60;background:var(--card);color:var(--accent);font-weight:700;
  padding:var(--e-2) var(--e-4);border:2px solid var(--accent);border-radius:var(--r-2);text-decoration:none}
.saltar:focus{top:var(--e-2)}
/* Barra lateral (visión de Javiera, Espectra): marca y secciones a la izquierda sobre superficie clara; la sección
   activa se lee de un vistazo por su fondo suave y su filete de marca. En pantallas angostas la lateral pasa a una
   barra superior que se desplaza. La identidad del contrato y las utilidades quedan en la barra superior del contenido. */
.app-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.lateral{background:var(--card);border-right:1px solid var(--linea-fuerte);display:flex;flex-direction:column;
  padding:var(--e-4) var(--e-3);position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;z-index:30}
.app-marca{display:flex;align-items:center;gap:var(--e-2);padding:var(--e-1) var(--e-2) var(--e-5)}
.app-logo{width:34px;height:34px;flex:none}
.app-nombre b{display:block;font-size:18px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);line-height:1.1}
.app-nombre small{display:block;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;margin-top:3px}
.app-by{display:block;font-size:9px;letter-spacing:.04em;color:var(--muted);margin-top:2px}
.app-by b{display:inline;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:none;color:var(--ink-2)}
.lateral nav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;overflow-y:auto}
.nav-burger{display:none}  /* el hamburguesa solo aparece en móvil (regla en el @media); en escritorio el riel está siempre visible */
.lateral nav>a,.lateral .menu-grupo>summary{min-height:40px;display:flex;align-items:center;gap:10px;padding:0 var(--e-3);border-radius:var(--r-2);
  color:var(--ink);font-size:var(--fs-3);font-weight:600;text-decoration:none;position:relative;white-space:nowrap}
.lateral .menu-txt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lateral nav>a .ico,.lateral .menu-grupo>summary .ico{flex:none;color:var(--muted)}
.lateral .marca-activa .ico{color:var(--accent)}
.menu-caret{margin-left:auto;flex:none;color:var(--muted);font-size:10px}
.menu-seccion{margin-top:var(--e-3);padding-top:var(--e-2);border-top:1px solid var(--line);display:block}
.lateral nav>a:hover,.lateral .menu-grupo>summary:hover{background:var(--sup-hover);color:var(--accent)}
.lateral .marca-activa{background:var(--accent-suave);color:var(--accent);text-decoration:none}
.lateral nav>a.marca-activa::before,.lateral .menu-grupo>summary.marca-activa::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
/* grupos plegables dentro de la lateral: fluyen hacia abajo, no son menú flotante */
.lateral .menu-grupo{display:block;position:static;margin-top:var(--e-1)}
.lateral .menu-grupo>summary{list-style:none;cursor:pointer}
.lateral .menu-grupo>summary::-webkit-details-marker{display:none}
.lateral .menu-grupo .menu-lista{position:static;display:flex;flex-direction:column;gap:2px;min-width:0;box-shadow:none;border:0;padding:2px 0 var(--e-1) var(--e-3)}
.lateral .menu-grupo .menu-lista a{min-height:36px;padding:0 var(--e-3);border-radius:var(--r-1);color:var(--ink);font-weight:500}
.lateral .menu-grupo .menu-lista a:hover{background:var(--sup-realce);color:var(--accent)}
.lateral .menu-grupo .menu-lista a.marca-activa{background:var(--accent-suave);color:var(--accent);font-weight:700}
.lateral .menu-grupo .menu-lista a.marca-activa::after,.lateral .menu-grupo .menu-lista a.marca-activa::before{display:none}
.menu-proximos{margin-top:var(--e-4);padding-top:var(--e-3);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.menu-grupo-tit{font-size:var(--fs-1);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:0 var(--e-3) var(--e-1)}
.prox{min-height:34px;display:flex;align-items:center;padding:0 var(--e-3);color:var(--muted);font-size:var(--fs-3)}
.prox::after{content:"pronto";margin-left:auto;font-size:var(--fs-1);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
/* Pie de la lateral: quién está dentro y cómo salir. Se queda pegado abajo (margin-top:auto) y solo aparece con sesión. */
.side-foot{flex:none;margin-top:auto;padding-top:var(--e-3);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--e-2)}
.usuario{display:flex;align-items:center;gap:var(--e-2);padding:0 var(--e-2);min-width:0}
.avatar{width:32px;height:32px;flex:none;border-radius:50%;background:var(--accent);color:var(--ink-inv);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.02em}
.usuario-datos{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.usuario-datos b{font-size:var(--fs-2);font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usuario-datos small{font-size:var(--fs-1);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.salir-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 var(--e-3);width:100%;
  border-radius:var(--r-2);border:1px solid var(--linea-fuerte);background:var(--card);color:var(--ink);
  font:inherit;font-size:var(--fs-2);font-weight:600;cursor:pointer;transition:background .16s ease,color .16s ease,transform .12s ease}
.salir-btn:hover{background:var(--sup-realce);color:var(--accent);border-color:var(--accent)}
.salir-btn:active{transform:scale(.98)}
.app-col{display:flex;flex-direction:column;min-width:0}
/* Barra superior translúcida: material flotante, el contenido pasa por debajo (se apaga en modo faena y con menos transparencia). */
.barra-sup{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;padding:var(--e-2) var(--e-5);
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--line);min-height:48px;position:sticky;top:0;z-index:20}
@media (prefers-reduced-transparency:reduce){.barra-sup{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}}
.faena-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--e-3);border-radius:999px;border:1px solid var(--linea-fuerte);
  background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-2);font-weight:600;cursor:pointer;transition:transform .12s ease,background .16s ease,color .16s ease}
.faena-btn:hover{background:var(--sup-realce);color:var(--accent)}
.faena-btn:active{transform:scale(.96)}
.faena-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ink-inv)}
.faena-btn[aria-pressed="true"]:hover{background:var(--accent-oscuro);color:var(--ink-inv)}
/* Feedback de presión (principio de respuesta): botones de acción y secciones responden al toque al instante. */
.btn:active,button.primario:active,.faena-btn:active,.lateral nav>a:active{transform:scale(.98)}
.app-util{margin-left:auto;display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap}
.meta{font-size:var(--fs-2);color:var(--muted)}
.barra-division{display:flex;gap:var(--e-2);align-items:center;font-size:var(--fs-2);margin:0}
.barra-division label{color:var(--muted);font-size:var(--fs-2);font-weight:600;margin:0}
.barra-division select{padding:0 var(--e-2);min-height:32px;height:32px;font-size:var(--fs-2);border-radius:var(--r-1)}
.form-salir{margin:0}
.btn-mini{padding:0 var(--e-3);font-size:var(--fs-2);min-height:32px;background:var(--card);border:1px solid var(--linea-fuerte);color:var(--ink)}
.btn-mini:hover{background:var(--sup-realce);color:var(--accent)}
.barra-abierta{background:var(--banner-aviso-bg);color:var(--banner-aviso-ink);padding:var(--e-2) var(--e-5);font-size:var(--fs-2);
  border-bottom:1px solid var(--banner-aviso-borde);font-weight:600}
main{max-width:1240px;margin:0;padding:var(--e-5) var(--e-5) var(--e-8);width:100%}
.grid2>*{min-width:0}  /* una tabla ancha dentro de la rejilla desplazaba la página entera */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-5);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--e-4);align-items:start}
.fila{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap}
.crece{flex:1;min-width:min(320px,100%)}
.campo-lleno{width:100%}

/* ============================================================ 5. SUPERFICIES ====================================================== */
/* Tarjeta: el contenedor por omisión. Borde de 1 px + elevación 1; nunca dos tarjetas anidadas. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--tarjeta-p);
      margin:var(--e-4) 0;box-shadow:var(--sombra-1)}
.card>:last-child{margin-bottom:0}
.card>h2:first-child,.card>h3:first-child,.card>.seccion-cab:first-child{margin-top:0}
.card-aviso{border-left:4px solid var(--warn)}
.card-destacada{border-left:4px solid var(--accent)}
.card-titulo{display:flex;align-items:center;gap:var(--e-2);margin:0 0 var(--e-3);padding-bottom:var(--e-3);
  border-bottom:1px solid var(--line);font-size:var(--fs-6);font-weight:650;letter-spacing:var(--ls-titulo)}
.card-titulo .ico{color:var(--accent)}
.card-acciones{margin-left:auto;display:flex;gap:var(--e-2);align-items:center}
.login-card{max-width:440px;margin:var(--e-8) auto;padding:var(--e-6);box-shadow:var(--sombra-2)}
/* Páginas previas al acceso (login y avisos): sin barra lateral ni barra superior; la marca va centrada arriba y la
   tarjeta al medio de la ventana, no corrida por un riel vacío. */
.app-shell-publico{display:block;min-height:100vh;min-height:100dvh;background:var(--bg)}
.app-shell-publico .app-col{min-height:100vh;min-height:100dvh}
.app-shell-publico main{max-width:460px;margin:0 auto;padding:var(--e-8) var(--e-4)}
.marca-publica{display:flex;justify-content:center;margin-bottom:var(--e-5)}
.marca-publica .app-marca{padding:0}
.app-shell-publico .login-card{margin:0;width:100%;max-width:none}
/* Ficha integral del contrato: identificación como fuente única, qué falta para defenderlo y trazabilidad (visión de Javiera). */
.eyebrow{font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--e-1)}
.ficha-titulo h1{margin:0 0 var(--e-4)}
.ficha-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e-4);flex-wrap:wrap}
.ficha-cab-id{display:flex;gap:var(--e-3);align-items:flex-start;min-width:0}
.ficha-punto{width:12px;height:12px;flex:none;margin-top:6px;border-radius:50%;background:var(--ok)}
.ficha-punto.parcial{background:var(--warn)}
.ficha-cab-id h2{margin:0 0 2px;font-size:var(--fs-6);overflow-wrap:anywhere}
.ficha-acciones{display:flex;gap:var(--e-3);flex-wrap:wrap;align-items:center}
.ficha-acciones a{font-size:var(--fs-2);font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
.ficha-acciones a:hover{text-decoration:underline}
.ficha-falta,.ficha-info,.ficha-traza,.ficha-gob,.ficha-seg,.ficha-fin{margin-top:var(--e-6)}
/* Mapa de los 10 bloques del Anexo 1: la Ficha se lee como un todo; cada bloque muestra su estado y salta a su detalle. */
.ficha-mapa{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--e-2);margin-top:var(--e-4)}
.ficha-bloque{display:flex;flex-direction:column;gap:2px;padding:var(--e-2) var(--e-3);border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-2);background:var(--card);text-decoration:none;box-shadow:var(--sombra-1);transition:background .12s ease}
.ficha-bloque:hover{background:var(--sup-hover)}
.ficha-bloque.fb-ok{border-left-color:var(--ok)}
.ficha-bloque.fb-parcial{border-left-color:var(--warn)}
.ficha-bloque.fb-validar{border-left-color:var(--borde-campo)}
.ficha-bloque.fb-alerta{border-left-color:var(--bad)}
.fb-nombre{font-size:var(--fs-2);font-weight:700;color:var(--ink)}
.fb-resumen{font-size:var(--fs-1);color:var(--muted);overflow-wrap:anywhere}
.ficha-gob .rotulo-seccion,.ficha-seg .rotulo-seccion,.ficha-fin .rotulo-seccion{display:block;margin-bottom:var(--e-2)}
.ficha-fin p{margin:var(--e-2) 0 0}
.falta-lista{list-style:none;margin:var(--e-3) 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.falta-lista li{display:flex;align-items:flex-start;gap:var(--e-3);padding:var(--e-3) var(--e-4);border-top:1px solid var(--line)}
.falta-lista li:first-child{border-top:0}
.falta-n{font-size:22px;font-weight:800;color:var(--accent);min-width:1.4em;text-align:center;font-variant-numeric:tabular-nums;line-height:1.2}
.falta-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.falta-dueno{text-align:right;display:flex;flex-direction:column;gap:2px;min-width:130px}
.falta-dueno b{font-size:var(--fs-1);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.ficha-info-cab{display:flex;align-items:baseline;gap:var(--e-3);flex-wrap:wrap;margin-bottom:var(--e-3)}
.rotulo-seccion{font-size:var(--fs-1);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.chip-campos{font-size:var(--fs-1);font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent-suave);color:var(--accent)}
.chip-campos.parcial{background:var(--chip-nota-bg);color:var(--chip-nota-ink)}
.ficha-ident-cab{display:flex;align-items:baseline;gap:var(--e-2);margin-bottom:var(--e-2)}
.ident-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--e-2)}
.ident-celda{display:flex;flex-direction:column;gap:4px;padding:var(--e-3);border:1px solid var(--line);border-radius:var(--r-2);background:var(--card)}
.ident-k{font-size:var(--fs-1);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ident-v{font-size:var(--fs-3);font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.ident-celda .tag{align-self:flex-start;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.por-validar{color:var(--warn);font-weight:600;overflow-wrap:anywhere}
.ident-objeto{margin-top:var(--e-2);padding:var(--e-3) var(--e-4);border-left:3px solid var(--accent);background:var(--accent-suave);border-radius:0 var(--r-2) var(--r-2) 0}
.ident-objeto .ident-k{display:block;margin-bottom:4px}
.ident-objeto p{margin:0;overflow-wrap:anywhere}
/* Guardas de quiebre: ningún dato de texto libre (correo, RUT, URL, nombre) debe desbordar su celda ni empujar scroll del body. */
.destacado-valor,.vacio p,.pre,.traza-lista dd{overflow-wrap:anywhere}
.traza-lista{margin:var(--e-3) 0 0;padding:0}
.traza-lista>div{display:flex;justify-content:space-between;gap:var(--e-3);padding:var(--e-3) 0;border-top:1px solid var(--line)}
.traza-lista>div:first-child{border-top:0}
.traza-lista dt{margin:0;font-weight:600;color:var(--ink)}
.traza-lista dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.nota-s3{display:flex;gap:var(--e-2);align-items:flex-start;margin-top:var(--e-3);padding:var(--e-3);border-radius:var(--r-2);background:var(--banner-aviso-bg);border:1px solid var(--banner-aviso-borde);color:var(--banner-aviso-ink);font-size:var(--fs-2)}
.nota-s3 svg{flex:none;margin-top:1px}
/* Vigencia calculada: se deriva de inicio/término, dice estado (no identidad); reutiliza las familias de chip. */
.chip-vig{font-size:var(--fs-1);font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.chip-vig.vigente{background:var(--chip-vigente-bg);color:var(--chip-vigente-ink);border-color:var(--chip-vigente-borde)}
.chip-vig.por-vencer{background:var(--chip-nota-bg);color:var(--chip-nota-ink);border-color:var(--chip-nota-borde)}
.chip-vig.vencida{background:var(--chip-bloquea-bg);color:var(--chip-bloquea-ink);border-color:var(--chip-bloquea-borde)}
.chip-vig.sin-termino{background:var(--chip-falta-bg);color:var(--chip-falta-ink);border-color:var(--chip-falta-borde)}
/* Escalón de aviso (M-04): recordatorio 90/60/30/15/7; pastilla discreta junto a los días. */
.escalon{display:inline-block;font-size:var(--fs-1);font-weight:700;padding:1px 6px;border-radius:999px;background:var(--th);color:var(--muted);white-space:nowrap}
/* M-07: dotación real por encima de la autorizada — se marca en rojo en la cartera. */
.sobre-cupo{display:inline-flex;align-items:center;gap:3px;color:var(--bad);font-weight:700;white-space:nowrap}
.td-vacio{padding:0;border:0;background:transparent}
/* M-05: preparación para auditoría — tarjeta por contrato con puntaje documental estimado y checklist. */
.aud-seccion{margin-top:var(--e-7)}
.aud-seccion-cab{display:flex;align-items:baseline;gap:var(--e-3);flex-wrap:wrap;padding-bottom:var(--e-2);border-bottom:1px solid var(--linea-fuerte);margin-bottom:var(--e-4)}
.aud-seccion-cab h2{margin:0;font-size:var(--fs-6)}
.aud-contrato{margin-top:var(--e-4);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--e-4);background:var(--card);box-shadow:var(--sombra-1)}
.aud-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e-4);flex-wrap:wrap}
.aud-cab>div{min-width:0}
.aud-cab h3{margin:0 0 2px;font-size:var(--fs-5);font-weight:700;overflow-wrap:anywhere}
.aud-puntaje{display:flex;flex-direction:column;align-items:flex-end;gap:var(--e-2);text-align:right}
.aud-num{font-size:var(--fs-cifra);font-weight:800;line-height:1;padding:6px 12px;border-radius:var(--r-2);font-variant-numeric:tabular-nums}
.aud-num-max{font-size:var(--fs-3);font-weight:600;opacity:.65}
.aud-num.verde{background:var(--chip-vigente-bg);color:var(--chip-vigente-ink)}
.aud-num.ambar{background:var(--chip-nota-bg);color:var(--chip-nota-ink)}
.aud-num.rojo{background:var(--chip-bloquea-bg);color:var(--chip-bloquea-ink)}
.aud-banda{font-size:var(--fs-2);color:var(--muted);text-transform:capitalize}
.aud-camino{display:flex;gap:var(--e-2);align-items:flex-start;margin:var(--e-3) 0 0;font-size:var(--fs-2);color:var(--ink)}
.aud-camino.ok{color:var(--ok)}
.est{font-size:var(--fs-1);font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.est-ok{background:var(--chip-vigente-bg);color:var(--chip-vigente-ink);border-color:var(--chip-vigente-borde)}
.est-observacion{background:var(--chip-nota-bg);color:var(--chip-nota-ink);border-color:var(--chip-nota-borde)}
.est-falta{background:var(--chip-bloquea-bg);color:var(--chip-bloquea-ink);border-color:var(--chip-bloquea-borde)}
.est-sin_dato{background:var(--chip-falta-bg);color:var(--chip-falta-ink);border-color:var(--chip-falta-borde)}
.aud-relevar{gap:var(--e-2)}
.aud-relevar select{min-height:30px;font-size:var(--fs-2)}
/* M-08: estado laboral del trabajador (Activo / Standby / Desvinculado). */
.el{font-size:var(--fs-1);font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.el-activo{background:var(--chip-vigente-bg);color:var(--chip-vigente-ink);border-color:var(--chip-vigente-borde)}
.el-standby{background:var(--chip-nota-bg);color:var(--chip-nota-ink);border-color:var(--chip-nota-borde)}
.el-desvinculado{background:var(--chip-bloquea-bg);color:var(--chip-bloquea-ink);border-color:var(--chip-bloquea-borde)}
.el-postulante{background:var(--chip-espera-bg);color:var(--chip-espera-ink);border-color:var(--chip-espera-borde)}
.el-otro{background:var(--chip-neutro-bg);color:var(--chip-neutro-ink);border-color:var(--chip-neutro-borde)}
/* Editar ficha (B1): formulario replegado; solo administración lo ve. */
.ficha-acciones .accion-fuerte{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--accent);border-radius:var(--r-2);background:var(--accent-suave)}
.ficha-acciones .accion-fuerte svg{width:15px;height:15px}
.ficha-editar{margin-top:var(--e-6)}
.ficha-editar>details{border:1px solid var(--line);border-radius:var(--r-2);background:var(--card)}
.ficha-editar summary{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-3);flex-wrap:wrap;padding:var(--e-3) var(--e-4);cursor:pointer;list-style:none}
.ficha-editar summary::-webkit-details-marker{display:none}
.ficha-editar summary .rotulo-seccion{display:inline-flex;align-items:center;gap:6px}
.ficha-editar summary svg{width:15px;height:15px}
.ficha-editar details[open]>summary{border-bottom:1px solid var(--line)}
.form-ficha{padding:var(--e-4);display:flex;flex-direction:column;gap:var(--e-3)}
.ficha-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e-3)}
.form-ficha label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-2);font-weight:600;color:var(--ink)}
.form-ficha label .note{font-weight:400}
.form-ficha input,.form-ficha textarea{width:100%}
.form-ficha .campo-ancho{width:100%}
.form-ficha .form-acciones{display:flex;justify-content:flex-end}
.ficha-op-sep{margin-top:var(--e-7);padding-top:var(--e-4);border-top:1px solid var(--linea-fuerte)}

/* Cabecera de registro: identifica el objeto que se está mirando (persona, contrato) igual en todas las pantallas.
   Ojo con el tipo de registro + título + chip de estado + una línea de contexto + campos destacados + acciones. */
.cabecera{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--sombra-1);
  padding:var(--e-4) var(--tarjeta-p) 0;margin:0 0 var(--e-5)}
.cabecera-alto{display:flex;gap:var(--e-4);align-items:flex-start;flex-wrap:wrap}
.cabecera-icono{width:44px;height:44px;flex:none;border-radius:var(--r-2);background:var(--accent-suave);color:var(--accent);
  display:flex;align-items:center;justify-content:center}
.cabecera-icono .ico{width:24px;height:24px}
.cabecera-texto{flex:1 1 420px;min-width:280px}
.cabecera-texto h1{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap}
.cabecera-texto .sub{margin:var(--e-1) 0 0;font-size:var(--fs-3)}
.cabecera-acciones{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap}
/* Campos destacados: la franja de datos que no cambia al desplazarse por la ficha. */
.destacados{display:flex;flex-wrap:wrap;gap:0;margin:var(--e-4) calc(var(--tarjeta-p) * -1) 0;
  border-top:1px solid var(--line);background:var(--th);border-radius:0 0 var(--r-2) var(--r-2)}
.destacado{flex:1 1 150px;min-width:150px;padding:var(--e-3) var(--tarjeta-p);border-right:1px solid var(--line)}
.destacado:last-child{border-right:0}
.destacado .ojo{margin-bottom:2px}
.destacado-valor{font-size:var(--fs-cifra);font-weight:650;color:var(--ink);line-height:1.1;letter-spacing:var(--ls-titulo);
  display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;font-variant-numeric:tabular-nums;margin-top:2px}
.destacado .note{display:block;margin-top:2px}
/* Glifo de estado del destacado (UT visual, «imitar» de DLE): acompaña a la cifra; el color sale de un token auditado.
   El estado se lee por el glifo (forma) más el rótulo, no solo por el color. */
.destacado-glifo{font-size:var(--fs-6);line-height:1;font-weight:700}
.destacado.sem-rojo .destacado-glifo{color:var(--bad)}
.destacado.sem-ambar .destacado-glifo{color:var(--warn)}
.destacado.sem-verde .destacado-glifo{color:var(--ok)}
.destacado.sem-gris .destacado-glifo{color:var(--muted)}

/* Sección: separa bloques de la página sin encerrarlos en una tarjeta. */
.seccion-cab{display:flex;align-items:baseline;gap:var(--e-3);flex-wrap:wrap;margin:var(--e-6) 0 var(--e-3)}
.seccion-cab h2{margin:0}
.seccion-cab .note{margin-left:auto}

/* Barra de herramientas de una lista: filtros a la izquierda, conteo y acciones a la derecha. */
.barra-herramientas{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2) var(--r-2) 0 0;
  border-bottom:0;padding:var(--e-3) var(--e-4);display:flex;gap:var(--e-4);align-items:flex-end;flex-wrap:wrap}
.barra-herramientas+.tabla{border-radius:0 0 var(--r-2) var(--r-2)}
.barra-herramientas .campo{margin-bottom:0}
.barra-herramientas .campo,.barra-herramientas>div{min-width:170px}
.resultado-conteo{margin-left:auto;font-size:var(--fs-2);color:var(--muted);align-self:center;font-variant-numeric:tabular-nums}

/* ============================================================ 6. TABLAS =========================================================== */
/* La tabla es una superficie: borde propio, esquinas redondeadas y desplazamiento contenido.
   Nunca desplaza la página: el contenedor .tabla desplaza y el encabezado queda pegado. */
.tabla{overflow-x:auto;margin:var(--e-2) 0 var(--e-4);max-width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--sombra-1)}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:var(--fs-tabla);border-radius:inherit}
th,td{padding:var(--fila-y) var(--e-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--th);position:sticky;top:0;z-index:1;font-size:var(--fs-1);font-weight:700;letter-spacing:var(--ls-ojo);
   text-transform:uppercase;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--linea-fuerte);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--sup-hover)}
td a{font-weight:600}
td .note{display:inline-block}
/* Primera columna identificadora: no se parte y se queda a la vista al desplazar en horizontal. */
td:first-child,th:first-child{white-space:nowrap}
caption,.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================================================= 7. MÉTRICAS, CHIPS Y SEMÁFOROS ================================================= */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--e-3);margin:var(--e-4) 0 var(--e-5)}
/* Orden visual fijo aunque el marcado varíe: etiqueta, cifra, denominador y semáforo. */
.kpi{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--linea-fuerte);border-radius:var(--r-2);
  padding:var(--e-3) var(--e-4);box-shadow:var(--sombra-1);display:flex;flex-direction:column;gap:2px;min-height:104px}
.kpi b{order:2;display:block;font-size:var(--fs-cifra);font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:var(--ls-titulo)}
.kpi b a{color:inherit;text-decoration:none}
.kpi b a:hover{color:var(--accion);text-decoration:underline}
.kpi>span{order:3;display:block}
.kpi>span:not(.note):not(.semaforo){order:1;font-size:var(--fs-1);font-weight:700;letter-spacing:var(--ls-ojo);
  text-transform:uppercase;color:var(--muted);line-height:1.35;min-height:2.7em}
.kpi .note{order:4;margin-top:auto;padding-top:var(--e-1)}
.kpi .semaforo{order:5;align-self:flex-start;margin-top:var(--e-2)}
/* Semáforo: el color va en el filo izquierdo y la palabra en la pastilla; nunca solo color. */
.kpi.sem-rojo{border-left-color:var(--bad)}
.kpi.sem-ambar{border-left-color:var(--warn)}
.kpi.sem-verde{border-left-color:var(--ok)}
.kpi.sem-gris{border-left-color:var(--borde-campo)}
.semaforo{display:inline-flex;align-items:center;width:auto;font-size:var(--fs-1);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:2px 8px;border-radius:var(--r-pastilla);border:1px solid;white-space:nowrap}
.semaforo.rojo{background:var(--chip-bloquea-bg);color:var(--chip-bloquea-ink);border-color:var(--chip-bloquea-borde)}
.semaforo.ambar{background:var(--chip-nota-bg);color:var(--chip-nota-ink);border-color:var(--chip-nota-borde)}
.semaforo.verde{background:var(--chip-vigente-bg);color:var(--chip-vigente-ink);border-color:var(--chip-vigente-borde)}
.semaforo.gris{background:var(--chip-falta-bg);color:var(--chip-falta-ink);border-color:var(--chip-falta-borde)}
/* Glifo de estado en el chip, mismo vocabulario que el destacado (✕/◐/✓/○): unifica el lenguaje de estado en toda la app.
   Decorativo —la palabra del chip ya lleva el estado, así que el lector de pantalla no pierde nada— y con la tinta del chip,
   ya auditada por verificar_contraste. Nunca color solo: color de fondo + glifo (forma) + palabra. */
.semaforo.rojo::before,.semaforo.ambar::before,.semaforo.verde::before,.semaforo.gris::before{margin-right:.35em;font-weight:700}
.semaforo.rojo::before{content:"✕"}
.semaforo.ambar::before{content:"◐"}
.semaforo.verde::before{content:"✓"}
.semaforo.gris::before{content:"○"}
.semaforo.grande{font-size:var(--fs-2);vertical-align:middle;padding:3px 10px}

/* Chips: forma + texto + color, nunca solo color. El glifo va antes del rótulo y sobrevive a la impresión. */
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-pastilla);font-size:var(--fs-2);font-weight:600;
  line-height:1.45;border:1px solid var(--chip-neutro-borde);background:var(--chip-neutro-bg);color:var(--chip-neutro-ink);white-space:nowrap}
.tag::before{content:"— ";font-weight:700;margin-right:4px}
.tag.vigente{background:var(--chip-vigente-bg);color:var(--chip-vigente-ink);border-color:var(--chip-vigente-borde)}.tag.vigente::before{content:"✓"}
.tag.nota{background:var(--chip-nota-bg);color:var(--chip-nota-ink);border-color:var(--chip-nota-borde)}.tag.nota::before{content:"◐"}
.tag.bloquea{background:var(--chip-bloquea-bg);color:var(--chip-bloquea-ink);border-color:var(--chip-bloquea-borde)}.tag.bloquea::before{content:"✕"}
.tag.falta{background:var(--chip-falta-bg);color:var(--chip-falta-ink);border-color:var(--chip-falta-borde)}.tag.falta::before{content:"○"}
.tag.espera{background:var(--chip-espera-bg);color:var(--chip-espera-ink);border-color:var(--chip-espera-borde)}.tag.espera::before{content:"⧗"}
.tag.viejo{background:var(--chip-viejo-bg);color:var(--chip-viejo-ink);border-color:var(--chip-viejo-borde)}.tag.viejo::before{content:"⧗!"}
.tag.neutro{border-style:dashed}
.tag.grande{font-size:var(--fs-3);padding:3px 10px}
/* Severidad de chequeos: escala propia (rombo lleno, medio, vacío), no los colores de estado. */
.tag.sev-alta{background:var(--chip-bloquea-bg);color:var(--chip-bloquea-ink);border-color:var(--chip-bloquea-borde)}.tag.sev-alta::before{content:"◆"}
.tag.sev-media{background:var(--chip-nota-bg);color:var(--chip-nota-ink);border-color:var(--chip-nota-borde)}.tag.sev-media::before{content:"◈"}
.tag.sev-baja{background:var(--chip-falta-bg);color:var(--chip-falta-ink);border-color:var(--chip-falta-borde)}.tag.sev-baja::before{content:"◇"}

/* ============================================================ 8. FORMULARIOS ====================================================== */
label{font-size:var(--fs-2);font-weight:600;color:var(--ink-2);display:block;margin-bottom:var(--e-1)}
input,select,textarea{padding:0 var(--e-3);border:1px solid var(--borde-campo);border-radius:var(--r-2);font:inherit;
  min-height:var(--campo-alto);font-size:var(--fs-5);max-width:100%;background:var(--card);color:var(--ink)}
textarea{padding:var(--e-2) var(--e-3);min-height:88px;line-height:var(--lh-normal)}
select{padding-right:var(--e-2)}
input:hover,select:hover{border-color:var(--ink-2)}
input::placeholder{color:var(--muted);opacity:1}
input[type=file]{padding:var(--e-1) 0;border:0;min-height:36px;font-size:var(--fs-3)}
input[type=date]{font-variant-numeric:tabular-nums}
input[type=number]{max-width:110px}
input[disabled],select[disabled]{background:var(--th);color:var(--muted);border-color:var(--line)}
/* Campo del sistema: etiqueta, control, ayuda y error, encadenados con for/id y aria-describedby. */
.campo{display:flex;flex-direction:column;margin:0 0 var(--e-3);min-width:0}
.campo>input,.campo>select,.campo>textarea{width:100%}
.campo-ayuda{font-size:var(--fs-2);color:var(--muted);margin-top:var(--e-1)}
.campo-error{font-size:var(--fs-2);color:var(--bad);font-weight:600;margin-top:var(--e-1);display:flex;align-items:center;gap:var(--e-1)}
.campo.con-error>input,.campo.con-error>select,.campo.con-error>textarea{border-color:var(--bad);border-width:2px;background:var(--bad-suave)}
.form-ficha input[type=number]{max-width:100%}
.campo-requerido{color:var(--bad);margin-left:2px}
.bloque-campo{margin:var(--e-2) 0}
form.inline{display:flex;gap:var(--e-3);flex-wrap:wrap;align-items:end}
form.inline>div{min-width:0}
.form-ancho{align-items:end}
/* Rejilla de formulario: una columna en móvil, dos o tres en escritorio; el botón bajo los campos. */
.form-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--e-4);align-items:start}
.form-rejilla .form-pie{grid-column:1/-1}
.form-pie{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap;margin-top:var(--e-3);
  padding-top:var(--e-3);border-top:1px solid var(--line)}
.form-pie .peligro{margin-left:auto}

/* ============================================================ 9. BOTONES Y ACCIONES =============================================== */
button,.boton{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);background:var(--accent);color:var(--ink-inv);
  border:1px solid var(--accent);padding:0 var(--e-4);border-radius:var(--r-2);cursor:pointer;font:inherit;font-size:var(--fs-3);
  font-weight:600;min-height:var(--campo-alto);text-decoration:none;white-space:nowrap}
button:hover,.boton:hover{background:var(--accent-oscuro);border-color:var(--accent-oscuro);color:var(--ink-inv)}
button:active,.boton:active{transform:translateY(1px)}
button.secundario,.boton.secundario{background:var(--card);color:var(--accent);border-color:var(--linea-fuerte)}
button.secundario:hover,.boton.secundario:hover{background:var(--sup-realce);border-color:var(--accent);color:var(--accent)}
/* Destructivo: relleno blanco y borde rojo (documento 26 §5.4); se llena solo al apuntarlo, y siempre pide confirmación. */
button.peligro,.boton.peligro{background:var(--card);color:var(--bad);border-color:var(--bad)}
button.peligro:hover,.boton.peligro:hover{background:var(--bad);color:var(--ink-inv);border-color:var(--bad)}
button.plano{background:transparent;border-color:transparent;color:var(--accion)}
button.plano:hover{background:var(--sup-realce);color:var(--accent);border-color:transparent}
button[disabled]{background:var(--th);color:var(--muted);border-color:var(--line);cursor:not-allowed}
a.accion{font-weight:600;display:inline-flex;align-items:center;gap:var(--e-1);text-decoration:none;color:var(--accion)}
a.accion:hover{text-decoration:underline}
summary{cursor:pointer;min-height:32px;display:flex;align-items:center;gap:var(--e-1);color:var(--accion);font-weight:600;font-size:var(--fs-3)}
summary:hover{text-decoration:underline}
details[open]>summary{margin-bottom:var(--e-2)}

/* Menú por rol: el grupo se abre como un panel flotante sobre superficie clara. */
.menu-grupo{position:relative;display:inline-block}
.menu-grupo summary{list-style:none;justify-content:center}
.menu-grupo summary::-webkit-details-marker{display:none}
.menu-grupo[open] summary{background:var(--sup-realce)}
.menu-grupo .menu-lista{position:absolute;left:0;top:100%;background:var(--card);min-width:230px;display:flex;flex-direction:column;
  padding:var(--e-1);z-index:40;box-shadow:var(--sombra-3);border:1px solid var(--linea-fuerte);border-radius:var(--r-2)}
.menu-grupo .menu-lista a{padding:0 var(--e-3);min-height:40px;border-radius:var(--r-1);color:var(--ink);font-weight:500}
.menu-grupo .menu-lista a:hover{background:var(--sup-realce);color:var(--accent);text-decoration:none}
.menu-grupo .menu-lista a.marca-activa{background:var(--accent-suave);color:var(--accent);font-weight:700}
.menu-grupo .menu-lista a::after{display:none}

/* Pestañas dentro de una página (no navegación de sitio). */
.pestanas{display:flex;gap:var(--e-1);border-bottom:1px solid var(--linea-fuerte);margin:0 0 var(--e-4);flex-wrap:wrap}
.pestanas a{padding:var(--e-2) var(--e-3);min-height:40px;display:inline-flex;align-items:center;gap:var(--e-2);
  font-size:var(--fs-3);font-weight:600;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.pestanas a:hover{color:var(--accent);background:var(--sup-hover)}
.pestanas a[aria-current=page]{color:var(--accent);border-bottom-color:var(--accent)}
/* Ficha de persona (P2-04): la barra de pestañas queda fija bajo la barra superior; con el JS de tablist muestra un panel a
   la vez, y sin JS todos los paneles siguen visibles y toda ancla resuelve. */
.pestanas-ficha{position:sticky;top:var(--e-7);z-index:10;background:var(--bg);box-shadow:var(--sombra-2);
  margin-inline:calc(var(--e-5)*-1);padding-inline:var(--e-5);margin-bottom:var(--e-5)}
.pestanas a[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent);background:var(--sup-realce)}
.tab-panel :target{scroll-margin-top:calc(var(--e-7) + var(--e-7))}
/* Al imprimir se muestran las tres secciones (como antes de las pestañas) y se oculta la barra de navegación. */
@media print{.tab-panel[hidden]{display:block!important}.pestanas-ficha{display:none}}

/* ====================================== 10. BANNERS, DIÁLOGO Y ESTADO VACÍO ======================================================= */
.banner{display:flex;gap:var(--e-3);align-items:flex-start;padding:var(--e-3) var(--e-4);border:1px solid;border-left-width:4px;
  border-radius:var(--r-2);margin:0 0 var(--e-4);font-size:var(--fs-4);font-weight:500}
.banner .ico{flex:none;margin-top:2px}
.banner.exito,.msg{background:var(--banner-exito-bg);color:var(--banner-exito-ink);border:1px solid var(--banner-exito-borde);
  border-left:4px solid var(--banner-exito-borde);padding:var(--e-3) var(--e-4);margin:0 0 var(--e-4);border-radius:var(--r-2)}
.banner.aviso{background:var(--banner-aviso-bg);color:var(--banner-aviso-ink);border-color:var(--banner-aviso-borde)}
.banner.error,.err{background:var(--banner-error-bg);color:var(--banner-error-ink);border:1px solid var(--banner-error-borde);
  border-left:4px solid var(--banner-error-borde);padding:var(--e-3) var(--e-4);margin:0 0 var(--e-4);border-radius:var(--r-2)}
.banner.info{background:var(--banner-info-bg);color:var(--banner-info-ink);border-color:var(--banner-info-borde)}

/* Estado vacío: causa y salida, nunca "Ninguno.". */
.vacio{background:var(--card);border:1px dashed var(--linea-fuerte);border-radius:var(--r-2);padding:var(--e-6) var(--e-5);
  text-align:center;color:var(--muted);margin:var(--e-2) 0 var(--e-4)}
.vacio .ico{width:28px;height:28px;color:var(--linea-fuerte);margin-bottom:var(--e-2)}
.vacio-titulo{display:block;font-size:var(--fs-5);font-weight:650;color:var(--ink);margin-bottom:var(--e-1)}
.vacio p{margin:0 auto var(--e-3);max-width:60ch;font-size:var(--fs-3)}
.vacio>:last-child{margin-bottom:0}
/* Un estado vacío DENTRO de una card no lleva su propia caja: la card ya es el marco. Sin esto queda marco dentro de marco
   con el mismo fondo (el héroe de Panorama cae en vacío en el caso sano, así que se vería justo cuando el panel está bien). */
.card>.vacio{background:none;border:0;padding:0;margin:0}

dialog.confirmar{border:1px solid var(--linea-fuerte);border-radius:var(--r-3);padding:var(--e-5);max-width:540px;
  width:calc(100% - var(--e-6));box-shadow:var(--sombra-4);color:var(--ink);background:var(--card)}
dialog.confirmar::backdrop{background:rgba(17,24,39,.6)}
dialog.confirmar h2{margin:0 0 var(--e-2);font-size:var(--fs-6)}
dialog.confirmar .previa{background:var(--th);border:1px solid var(--line);padding:var(--e-3);border-radius:var(--r-2);
  margin:var(--e-3) 0 var(--e-5);white-space:pre-wrap;font-size:var(--fs-3);color:var(--ink-2)}
dialog.confirmar menu{display:flex;gap:var(--e-2);justify-content:flex-end;padding:0;margin:0}

/* ============================================================ 11. ICONOS ========================================================== */
/* Sprite propio incrustado en base.html: SVG en línea de 20x20 y trazo de 1,5 px que hereda el color del texto. */
.sprite-iconos{display:none}
.ico{width:20px;height:20px;flex:none;color:inherit;pointer-events:none}
.ico-14{width:14px;height:14px}
.ico-16{width:16px;height:16px}
.ico-24{width:24px;height:24px}
.ico-ok{color:var(--ok)}.ico-mal{color:var(--bad)}.ico-aviso{color:var(--warn)}.ico-marca{color:var(--accent)}

/* ============================================================ 12. DENSIDAD ======================================================== */
/* Cómoda (por omisión): terreno, guantes, teléfono. Compacta: analista en escritorio comparando muchas filas.
   La densidad solo reescribe espaciado y alto de control; jamás baja el tamaño del texto de las celdas bajo 14 px. */
.densidad-compacta{--fila-y:6px;--tarjeta-p:14px;--campo-alto:36px;--fs-tabla:var(--fs-3);--e-5:16px;--e-6:24px}
.densidad-compacta .kpi{min-height:88px}
.densidad-compacta h2{margin-top:var(--e-5)}

/* ====================================================== 13. GUÍA DE ESTILOS (/guia) =============================================== */
/* Piezas que solo existen para mostrar el sistema. Viven aquí y no en una hoja aparte para que la guía use
   exactamente el mismo CSS que las pantallas: si se rompe algo, se rompe también en la guía. */
.muestrario{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--e-3);margin:var(--e-3) 0 var(--e-5)}
.muestra{border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;background:var(--card);box-shadow:var(--sombra-1)}
.muestra i{display:block;height:56px;border-bottom:1px solid var(--line)}
.muestra span{display:block;padding:var(--e-2) var(--e-3);font-size:var(--fs-2)}
.muestra code{display:block;font:var(--fs-1)/1.5 var(--tipo-mono);color:var(--muted)}
.m-bg i{background:var(--bg)}.m-card i{background:var(--card)}.m-th i{background:var(--th)}.m-realce i{background:var(--sup-realce)}
.m-ink i{background:var(--ink)}.m-ink2 i{background:var(--ink-2)}.m-muted i{background:var(--muted)}
.m-marca i{background:var(--accent)}.m-marca-osc i{background:var(--accent-oscuro)}.m-marca-suave i{background:var(--accent-suave)}
.m-ok i{background:var(--ok)}.m-warn i{background:var(--warn)}.m-bad i{background:var(--bad)}.m-info i{background:var(--info)}
.m-accion i{background:var(--accion)}.m-foco i{background:var(--foco)}
.m-line i{background:var(--line)}.m-linea-fuerte i{background:var(--linea-fuerte)}.m-borde-campo i{background:var(--borde-campo)}
.m-r1 i{border-radius:var(--r-1);background:var(--accent-suave);height:48px;margin:4px}
.m-r2 i{border-radius:var(--r-2);background:var(--accent-suave);height:48px;margin:4px}
.m-r3 i{border-radius:var(--r-3);background:var(--accent-suave);height:48px;margin:4px}
.m-rp i{border-radius:var(--r-pastilla);background:var(--accent-suave);height:48px;margin:4px}
.m-s1 i{box-shadow:var(--sombra-1)}.m-s2 i{box-shadow:var(--sombra-2)}.m-s3 i{box-shadow:var(--sombra-3)}.m-s4 i{box-shadow:var(--sombra-4)}
.m-s1 i,.m-s2 i,.m-s3 i,.m-s4 i{background:var(--card);height:44px;margin:var(--e-3);border:1px solid var(--line);border-radius:var(--r-2)}
.escala{display:flex;flex-direction:column;gap:var(--e-2);margin:var(--e-3) 0 var(--e-5)}
.escala>div{display:flex;align-items:center;gap:var(--e-3);font-size:var(--fs-2);color:var(--muted)}
.escala i{display:block;height:14px;background:var(--accent);border-radius:2px;flex:none}
.b-e1{width:4px}.b-e2{width:8px}.b-e3{width:12px}.b-e4{width:16px}.b-e5{width:24px}.b-e6{width:32px}.b-e7{width:48px}.b-e8{width:64px}
.escala code{font:var(--fs-1)/1.5 var(--tipo-mono);min-width:72px;color:var(--ink-2)}
.tipos>div{border-bottom:1px solid var(--line);padding:var(--e-3) 0;display:flex;align-items:baseline;gap:var(--e-4);flex-wrap:wrap}
.tipos code{font:var(--fs-1)/1.5 var(--tipo-mono);color:var(--muted);min-width:220px}
.t1{font-size:var(--fs-1);font-weight:700;letter-spacing:var(--ls-ojo);text-transform:uppercase}
.t2{font-size:var(--fs-2);font-weight:600}.t3{font-size:var(--fs-3)}.t4{font-size:var(--fs-4)}.t5{font-size:var(--fs-5)}
.t6{font-size:var(--fs-6);font-weight:650}.t7{font-size:var(--fs-7);font-weight:650;letter-spacing:var(--ls-titulo)}
.tc{font-size:var(--fs-cifra);font-weight:650;font-variant-numeric:tabular-nums}
.iconario{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--e-2);margin:var(--e-3) 0 var(--e-5)}
.iconario div{display:flex;flex-direction:column;align-items:center;gap:var(--e-1);padding:var(--e-3);border:1px solid var(--line);
  border-radius:var(--r-2);background:var(--card);font-size:var(--fs-1);color:var(--muted)}
.iconario .ico{color:var(--accent)}
.tira{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center;margin:var(--e-2) 0 var(--e-4)}

/* ==================================================== 14. ADAPTACIÓN, SOL E IMPRESIÓN ============================================= */
@media(max-width:1000px){.grid2{grid-template-columns:1fr}}
@media(max-width:760px){
  main{padding:var(--e-4) var(--e-3) var(--e-7)}
  h1{font-size:20px}
  /* En teléfono la lateral es una barra compacta: marca a la izquierda; hamburguesa y Salir a la derecha. El menú va
     plegado (drawer) y se abre con el botón, para que el contenido se vea de inmediato sin scrollear todo el menú. */
  .app-shell{grid-template-columns:1fr}
  .lateral{position:static;height:auto;overflow:visible;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--e-2);
    border-right:0;border-bottom:1px solid var(--linea-fuerte);padding:var(--e-2) var(--e-3)}
  .app-marca{flex:none;order:1;padding:0 var(--e-2) 0 0}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;order:2;margin-left:auto;width:40px;height:40px;
    border:1px solid var(--linea-fuerte);border-radius:var(--r-2);background:var(--card);color:var(--ink);cursor:pointer}
  .nav-burger:hover{background:var(--sup-hover);color:var(--accent)}
  .side-foot{order:3;margin:0;padding-top:0;border-top:0;flex-direction:row;align-items:center;gap:var(--e-2);width:auto}
  .usuario-datos{display:none}
  .salir-btn{width:auto;min-height:34px}
  /* el menú, plegado por defecto; el hamburguesa lo despliega como columna a ancho completo */
  .lateral nav{order:4;flex-basis:100%;min-height:0;overflow:visible;display:none}
  .nav-toggle:checked~nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;margin-top:var(--e-2)}
  .menu-seccion{display:none}
  .nav-toggle:checked~nav .menu-seccion{display:block}
  .lateral nav>a.marca-activa::before{display:none}
  .menu-proximos{display:none}
  /* Qué falta para defender: el dueño baja debajo del texto, a la izquierda, en pantallas chicas */
  .falta-lista li{flex-direction:column;gap:var(--e-1)}
  .falta-dueno{text-align:left;min-width:0}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .destacado{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line)}
  .destacado:last-child{border-bottom:0}
  .cabecera{padding:var(--e-3) var(--e-4) 0}
  .barra-herramientas{border-radius:var(--r-2);border-bottom:1px solid var(--line)}
  .barra-herramientas+.tabla{border-radius:var(--r-2);margin-top:var(--e-2)}
  .resultado-conteo{margin-left:0}
}
/* Alto contraste diurno: bajo el sol de faena manda el borde, no el matiz. */
@media(prefers-contrast:more){
  :root{--bg:#FFFFFF;--line:#8A93A3;--linea-fuerte:#4B5563;--muted:#3F4756;--sup-hover:#EDF1F7}
  .tag,.semaforo{border-width:2px}
  .card,.tabla,.kpi,.cabecera{box-shadow:none;border-color:var(--linea-fuerte)}
}
/* ===== Modo faena: alta visibilidad para pantallas al exterior (sol, guantes, glare). El <head> lo aplica antes de
   pintar (data-faena) y se recuerda por dispositivo. Fuerza superficies sólidas —el vidrio no se lee al sol—, sube el
   contraste y agranda toques y cifras. No cae en el gate de contraste (que solo lee el :root base), y es más contrastado. */
:root[data-faena]{
  --bg:#FFFFFF;--card:#FFFFFF;--th:#EDEFF6;--sup-realce:#E6DCFB;--sup-hover:#F2EEFB;
  --line:#B9C0D0;--linea-fuerte:#7C8598;--borde-campo:#3D4557;
  --ink:#0A0E19;--ink-2:#1B2233;--muted:#333B4E;
  --accent:#4A28B0;--accent-oscuro:#37207F;--accent-suave:#E6DCFB;--accion:#37207F;--foco:#37207F;
}
:root[data-faena] .barra-sup{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-width:2px}
:root[data-faena] .lateral{border-right-width:2px}
:root[data-faena] .lateral nav>a,:root[data-faena] .lateral .menu-grupo>summary{min-height:48px;font-size:var(--fs-4)}
:root[data-faena] .btn-mini,:root[data-faena] .faena-btn,:root[data-faena] .salir-btn{min-height:44px;font-size:var(--fs-3)}
:root[data-faena] .side-foot{border-top-width:2px}
:root[data-faena] .salir-btn{border-width:2px}
:root[data-faena] .card,:root[data-faena] .tabla,:root[data-faena] .kpi,:root[data-faena] .cabecera{border-width:2px}
:root[data-faena] .cifra,:root[data-faena] .num{font-weight:700}
:root[data-faena] .tag,:root[data-faena] .semaforo,:root[data-faena] .chip-vig,:root[data-faena] .est,:root[data-faena] .el,:root[data-faena] .chip-campos,:root[data-faena] .escalon{border-width:1.5px;font-weight:700}
:root[data-faena] a{text-decoration:underline}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  header,form,details,dialog,.no-print,.barra-abierta,.barra-herramientas,.lateral{display:none!important}
  /* El «Trabajo del administrador» se pliega en pantalla, pero su tabla de vigencias es material de reunión: antes era
     <section> e imprimía. Se re-muestra en impresión —y también sus grupos de requisito, que son <details> anidados—: el
     display gana al <details> oculto de arriba, y content-visibility revela el contenido del plegable cerrado en los
     navegadores que lo esconden con esa propiedad (Chrome 2024+). Su summary sobra en papel; el del grupo se mantiene
     porque lleva el nombre del requisito. */
  #trabajo-admin,#trabajo-admin .requisito{display:block!important}
  #trabajo-admin::details-content,#trabajo-admin .requisito::details-content{content-visibility:visible!important}
  #trabajo-admin>summary{display:none}
  body{background:#fff}
  .app-shell{display:block}
  main{max-width:none;padding:0}
  .card,.tabla,.kpi,.cabecera{box-shadow:none;border-color:#999;break-inside:avoid}
  .tag,.semaforo{background:#fff!important;border:1px solid #333!important;color:#000!important}
  th{background:#fff!important;color:#000!important;border-bottom:2px solid #333}
}

/* --- paginador (P2-34): rango, total y dos enlaces; nunca oculta cuántas filas hay detrás -------------------------- */
.paginador{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-4);
  margin:var(--e-4) 0;padding:var(--e-3) var(--e-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);font-size:var(--fs-3)}
.paginador-rango{color:var(--ink-2);font-variant-numeric:tabular-nums}
.paginador-botones{display:flex;align-items:center;gap:var(--e-4)}
.paginador-botones a{font-weight:600;min-height:var(--toque);display:inline-flex;align-items:center}
.paginador-botones .inactivo{color:var(--muted)}
.paginador-actual{color:var(--ink-2);font-variant-numeric:tabular-nums}

/* --- Panorama (documento 37): veredicto, decisiones ordenadas por daño y línea de controles en cero ----------------- */
.veredicto{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--linea-fuerte);
  border-radius:var(--r-2);padding:var(--e-4) var(--e-5);margin:var(--e-5) 0;box-shadow:var(--sombra-1)}
.veredicto-rojo{border-left-color:var(--bad)}.veredicto-ambar{border-left-color:var(--warn)}
.veredicto-verde{border-left-color:var(--ok)}.veredicto-gris{border-left-color:var(--linea-fuerte)}
.veredicto-frase{font-size:var(--fs-7);font-weight:650;line-height:1.3;letter-spacing:-.01em;margin:var(--e-2) 0;text-wrap:balance}
.veredicto-acciones{display:flex;gap:var(--e-3);flex-wrap:wrap;margin:var(--e-4) 0 0}
.decisiones{list-style:none;margin:var(--e-3) 0;padding:0;display:flex;flex-direction:column;gap:var(--e-3)}
.decision{display:grid;grid-template-columns:minmax(120px,10%) 1fr minmax(200px,20%);gap:var(--e-4);align-items:start;
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--linea-fuerte);border-radius:var(--r-2);padding:var(--e-4)}
.decision.nivel-rojo{border-left-color:var(--bad)}.decision.nivel-ambar{border-left-color:var(--warn)}
.decision-cifra b{display:block;font-size:var(--fs-cifra);font-weight:650;line-height:1;font-variant-numeric:tabular-nums}
.decision-cifra span{display:block;margin-top:var(--e-1)}
.decision-titulo{font-size:var(--fs-6);font-weight:600;margin:var(--e-1) 0;text-wrap:balance}
.decision-dueno p{margin:0 0 var(--e-2)}
.decision-dueno .boton{width:100%}
.en-cero{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--e-3) var(--e-4);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);font-size:var(--fs-3)}
.en-cero svg{color:var(--ok)}
.fila-no-comparable{background:var(--th)}
@media(max-width:760px){.decision{grid-template-columns:1fr;gap:var(--e-2)}
  .decision-cifra{display:flex;align-items:baseline;gap:var(--e-2)}.decision-cifra b{font-size:var(--fs-7)}}

/* --- Dotación (documento 39): cadena de cobertura. Cuatro etapas y la fuga escrita entre ellas; no es un embudo con anchos
   proporcionales porque las etapas no son subconjuntos unas de otras y el ancho mentiría. ---------------------------- */
.destacados-sueltos{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);margin:var(--e-4) 0}
.cadena{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:var(--e-2);align-items:stretch;margin:var(--e-3) 0}
.cadena .etapa{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--e-3) var(--e-4)}
.cadena .etapa b{display:block;font-size:var(--fs-cifra);font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums;margin:var(--e-1) 0}
.cadena .fuga{display:flex;align-items:center;text-align:center;max-width:150px;font-size:var(--fs-2);color:var(--muted);padding:0 var(--e-2)}
.cadena .fuga::before{content:"→ ";margin-right:var(--e-1);color:var(--linea-fuerte)}
@media(max-width:900px){.cadena{grid-template-columns:1fr}.cadena .fuga{max-width:none;justify-content:flex-start;padding:0 var(--e-3)}}

/* --- gráficos dibujados en el servidor (spectra/web/grafico.py). Geometría en el SVG, color aquí. ------------------- */
.minigrafico{display:block;overflow:visible}
.minigrafico polyline{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.minigrafico circle{r:2.5}
.linea-mal polyline,.linea-mal circle{stroke:var(--bad);fill:var(--bad)}
.linea-bien polyline,.linea-bien circle{stroke:var(--ok);fill:var(--ok)}
.linea-neutra polyline,.linea-neutra circle{stroke:var(--accion);fill:var(--accion)}
.barras-svg rect{fill:var(--accion)}
.barra-mal rect{fill:var(--bad)}
/* Barra apilada (composición): el color de cada tramo sale de un token de :root (ya auditado por
   verificar_contraste), nunca un hex suelto; el filo entre tramos es del color de la página para que se separen. */
.apiladas-svg{display:block;max-width:100%}
.apiladas-svg rect{stroke:var(--card);stroke-width:1}
.apiladas-svg .seg-ok{fill:var(--ok)}
.apiladas-svg .seg-mal{fill:var(--bad)}
.apiladas-svg .seg-neutro{fill:var(--muted)}
.apiladas-svg .seg-ojo{fill:var(--warn)}  /* cuarto tramo (custodia: sin evidencia); --warn ya está auditado en :root */
/* Barra de composición suelta (custodia): llena su fila a la altura de bloque. El SVG lleva preserveAspectRatio="none",
   así que la caja del CSS manda; excluye los cuadros de leyenda 10×10, que no llevan esta clase. */
.apiladas-bloque{width:100%;height:22px}
/* Lista de barras (héroe de Panorama): el rótulo va a ancho fijo a la izquierda para que las barras arranquen
   alineadas y se puedan comparar de un vistazo; la cifra va a la derecha con dígitos de ancho fijo. Solo geometría. */
.grafico-lista{display:flex;flex-direction:column;gap:var(--e-2);margin:var(--e-3) 0 var(--e-4)}
.grafico-lista .serie{gap:var(--e-2);flex-wrap:nowrap}
.grafico-lista .serie-etq{flex:0 0 8.5rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Altura de bloque uniforme: la barra llena el ancho (flex) y una altura fija; preserveAspectRatio="none" en el SVG deja
   que esta caja mande, sin caja centrada ni altura que dependa del ancho. Franja y apiladas quedan a la misma altura. */
.grafico-lista .serie .franja,.grafico-lista .serie .apiladas-svg{flex:1 1 auto;margin-left:0;min-width:0;height:22px}
.grafico-lista .serie-num{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap;text-align:right}
.leyenda{display:flex;gap:var(--e-3);flex-wrap:wrap;align-items:center;margin:var(--e-2) 0}
.leyenda-sw{display:inline-block;vertical-align:middle;width:10px;height:10px;max-width:10px;margin-right:2px}
/* Embudo de defendibilidad (héroe del Tablero): cada eslabón es un subconjunto del anterior, así que las barras
   comparten escala (las filas obligatorias) y se estrechan; el último —lo defendible— se pinta con --ok (auditado).
   Los rótulos del embudo envuelven porque son frases, no cabrían en el ancho fijo del ranking. */
.franja.g-bien rect{fill:var(--ok)}
.franja.g-bien .g-pista{fill:var(--th)}  /* como g-mal: la pista de fondo NO se pinta, o una proporción del 0 % se vería como barra llena */
.grafico-lista.embudo .serie-etq{flex-basis:11rem;white-space:normal;overflow:visible}
.fuga-nota{margin:0 0 var(--e-2);color:var(--muted);display:flex;gap:var(--e-1);align-items:baseline}
@media(max-width:560px){.grafico-lista .serie{flex-wrap:wrap}.grafico-lista .serie-etq{flex-basis:100%}}
.serie{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap}
.serie-nota{font-size:var(--fs-2);color:var(--muted)}


/* ============================================================================================================
   CAPA 15 · SELECCIÓN (documento 41). Cola de trabajo con acción en la fila, cadena de cinco eslabones y
   franja de proporción dibujada en el servidor. Ningún color nuevo y ningún token nuevo: todo sale de :root,
   así que scripts/verificar_contraste.py no necesita pares nuevos.
   ============================================================================================================ */
/* ---- Capa 5 (superficies) · FRANJA SUELTA Y CABECERA SIN FRANJA -----------------------------------------
   Ya pedidas por el documento 37 §8.2 y el documento 39 §9.2; todavía no están en spectra.css. Se repiten
   aquí para que la maqueta abra sola, no porque esta pantalla necesite una versión propia.
   La regla: cuando la franja IDENTIFICA al registro va dentro de la cabecera; cuando DA DENOMINADOR a lo que
   viene, va suelta después del veredicto. Aquí da denominador, así que va suelta. */
.destacados.sueltos{margin:0 0 var(--e-5);border:1px solid var(--line);border-radius:var(--r-2);
  box-shadow:var(--sombra-1);background:var(--card)}
.cabecera.sin-franja{padding-bottom:var(--e-4)}
.solo-ancho{display:inline}

/* ---- Capa 7 (métricas) · CADENA DE ETAPAS ----------------------------------------------------------------
   Igual que la cadena de cobertura de Dotación, con cinco eslabones en vez de cuatro. La fuga es la
   información y la flecha es decoración, por eso va en ::before: no se lee dos veces con lector de pantalla
   y no se copia al pegar el bloque en un correo.
   Los 122 px de la columna de fuga salen de medir a 1440 px: con los 136 px de Dotación los cinco eslabones
   bajan de 150 px y el rótulo se parte en tres líneas, que desalinea las cinco cifras entre sí; con menos
   de 118 px la frase de la fuga necesita cinco líneas. Con cinco eslabones el rótulo tiene que caber en dos
   líneas, así que aquí los rótulos son de dos o tres palabras y el detalle baja a la nota. */
.cadena.cinco{grid-template-columns:repeat(4,minmax(0,1fr) 122px) minmax(0,1fr);
  gap:var(--e-2);align-items:stretch;margin:var(--e-3) 0 var(--e-4)}
/* La cadena de cinco etapas + flechas necesita pantalla ancha real (con la lateral de 248px, ~1200px+); por debajo se
   comprime a columnas ilegibles (texto quebrado letra a letra). Apila a una sola columna hasta ese ancho —cubre
   teléfonos en layout de escritorio, tablet y laptops chicos—. Va tras la regla base para ganar por orden. */
@media(max-width:1200px){.cadena.cinco{grid-template-columns:1fr}.cadena.cinco .fuga{max-width:none;justify-content:flex-start}}
.eslabon{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r-2);box-shadow:var(--sombra-1);padding:var(--e-3) var(--e-4);
  display:flex;flex-direction:column;gap:2px;min-width:0}
/* Solo la cifra de la etapa, no cualquier <b>: dentro de las notas hay negritas que van en 13 px. */
.eslabon>b{font-size:var(--fs-cifra);font-weight:650;line-height:1.1;letter-spacing:var(--ls-titulo);
  font-variant-numeric:tabular-nums}
/* El rótulo reserva dos líneas para que las cinco cifras queden a la misma altura aunque uno se parta. */
.eslabon>.ojo{min-height:2.7em}
.eslabon .note{display:block}
.eslabon a.accion{margin-top:auto;padding-top:var(--e-2);font-size:var(--fs-3)}
/* La última etapa es un resultado, no una cola de trabajo: filo verde para que se lea como llegada. */
.eslabon.hecho{border-left-color:var(--ok)}
.fuga{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:var(--e-1);font-size:var(--fs-2);color:var(--ink-2);line-height:1.35;padding:0 var(--e-1)}
.fuga::before{content:"\2192";font-size:24px;line-height:1;font-weight:700;color:var(--linea-fuerte)}
.fuga b{color:var(--bad);font-variant-numeric:tabular-nums}

/* ---- Capa 6 (tablas) · COLA DE TRABAJO -------------------------------------------------------------------
   Una cola es un <section> con cabecera propia (título, cuenta, criterio de orden), la tabla y un pie con
   "ver todas". Es un envoltorio, no una tarjeta: dos superficies anidadas (card dentro de tabla) es
   exactamente lo que el sistema visual prohíbe. */
.cola{margin:0 0 var(--e-5)}
.cola-cab{display:flex;align-items:baseline;gap:var(--e-3);flex-wrap:wrap;margin:var(--e-5) 0 var(--e-2)}
.cola-cab h3{margin:0;display:flex;align-items:center;gap:var(--e-2)}
.cola-cab h3 .ico{color:var(--accent)}
.cola-cab .cuenta{font-size:var(--fs-3);font-weight:650;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cola-cab .note{margin-left:auto;text-align:right}
.cola .tabla{margin-top:0}
.cola-pie{display:flex;gap:var(--e-3);align-items:baseline;flex-wrap:wrap;margin:0}

/* ---- Capa 9 (acciones) · BOTÓN DE FILA -------------------------------------------------------------------
   Pedido por el documento 34 §8.2 y todavía sin implementar. Es la diferencia entre una nota de texto de
   13 px ("Resolver Entrevista Técnica", que es lo que hay hoy en la columna "Qué hacer") y un objetivo
   táctil de 44 px que además dice el verbo. */
.btn-fila{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-1);min-height:var(--toque);
  padding:0 var(--e-3);border:1px solid var(--linea-fuerte);border-radius:var(--r-2);background:var(--card);
  color:var(--accent);font-size:var(--fs-3);font-weight:600;text-decoration:none;white-space:nowrap}
.btn-fila:hover,.btn-fila:focus-visible{background:var(--sup-realce);border-color:var(--accent);
  color:var(--accent);text-decoration:none}

/* ---- Capa 6 · FILA DE FORMULARIO -------------------------------------------------------------------------
   El patrón central de esta pantalla, tomado tal cual del documento 34 §4.1: el formulario es una fila
   propia de la tabla a ancho completo, no un <details> encajonado en una celda de 380 px. Se abre con
   :target (sin JavaScript), con ?abrir= desde el servidor, o con la clase .abierta cuando la respuesta trae
   un error de validación, que es el caso en que no se puede depender de :target.
   El fondo de realce y el filo superior de marca dicen "esto pertenece a la fila de arriba"; sin ellos, con
   dieciocho filas iguales, el formulario parece flotar sobre la fila equivocada. */
tr.fila-form{display:none}
tr.fila-form:target,tr.fila-form.abierta{display:table-row}
tr.fila-form>td{background:var(--sup-realce);border-top:2px solid var(--accent);padding:var(--e-4);
  white-space:normal}
tbody tr.fila-form:hover>td{background:var(--sup-realce)}
tr.fila-form>td>.ojo{margin-bottom:var(--e-3)}
.form-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 var(--e-4);
  align-items:start;margin:0;max-width:980px}
.form-fila .form-pie,.form-fila .ancho{grid-column:1/-1}
/* Un campo de texto de 1.300 px de ancho para escribir "sin trabajo en altura hasta 30-10-2026" es un error
   de medida, no de retícula: el ojo pierde el principio de la línea. La nota ocupa el ancho de la fila para
   que la etiqueta y la ayuda respiren, y el control se corta a 70 caracteres. */
.form-fila .ancho input,.form-fila .ancho textarea{max-width:70ch}
.form-fila .form-pie .note{flex:1 1 220px}
/* El máximo de 980 px es el que deja cuatro columnas de campo a 1440 px. Sin él, la retícula de auto-fit
   reparte los tres campos del formulario de verificación en seis columnas de 190 px y deja media fila en
   blanco a la derecha, que se lee como si faltara algo. */

/* ---- Capa 10 (retroalimentación) · RESULTADO JUNTO A LA FILA ---------------------------------------------
   Clase nueva de esta pantalla. El banner de éxito al tope de la página funciona en una ficha, donde hay un
   solo registro; en una cola de dieciocho filas la analista está mirando la fila 2 y el aviso queda a
   900 px. El resultado se rinde como una fila más, pegada a la que se acaba de trabajar, y dice qué cambió
   y cuál es el siguiente paso, no solo "guardado". */
tr.fila-resultado>td{background:var(--banner-exito-bg);color:var(--banner-exito-ink);
  border-left:4px solid var(--banner-exito-borde);border-top:0;white-space:normal;font-size:var(--fs-3)}
tbody tr.fila-resultado:hover>td{background:var(--banner-exito-bg)}
tr.fila-resultado a{color:var(--banner-exito-ink);font-weight:700}
tr.fila-resultado .ico{color:var(--banner-exito-borde);margin-right:var(--e-1)}

/* ---- Capa 7 · FRANJA DE PROPORCIÓN DIBUJADA EN EL SERVIDOR -----------------------------------------------
   Documento 37 §8.2, aún sin implementar. SVG emitido por spectra/web/grafico.py con la geometría en
   atributos y el color en clases: cero style=, cero librería, cero JavaScript, y los colores siguen
   viviendo en :root para que verificar_contraste.py los pueda auditar. */
.franja{display:inline-block;width:72px;height:8px;margin-left:var(--e-2);vertical-align:middle}
.g-pista{fill:var(--th);stroke:var(--linea-fuerte);stroke-width:.5}
.g-parte{fill:var(--info)}
.g-parte-mal{fill:var(--bad)}
.g-parte-ojo{fill:var(--warn)}

/* ---- Reglas sin clase nueva ------------------------------------------------------------------------------ */
/* La tarjeta de decisión de esta pantalla lleva, bajo el botón, la consecuencia o el matiz: por qué el
   botón lleva a una cola y no ejecuta en bloque. Misma divergencia que Dotación, distinto motivo. */
.decision-dueno .boton{width:100%}
.decision-dueno .note{display:block;margin-top:var(--e-2)}
/* Los dos plegables de esta pantalla son objetivos táctiles reales; el sistema le da 32 px a <summary>. */
details.card>summary{min-height:var(--toque)}
/* La celda de acción de una cola nunca parte el verbo en dos líneas: se lee de reojo o no se lee. */
.cola td:last-child{white-space:nowrap}
.cola tr.fila-form td,.cola tr.fila-resultado td{white-space:normal}
/* Recogido de las columnas escondidas bajo 760 px. Mismo dato de la misma fuente, no una segunda verdad. */
.solo-compacto{display:none}
.paginador .inactivo{color:var(--muted)}

/* ---- Capa 14 (adaptación) · 390 px ----------------------------------------------------------------------- */
@media(max-width:760px){
  /* La franja de abastecimiento en dos columnas, no en cinco filas: si ocupa media pantalla, la frase del
     veredicto queda bajo la línea de flotación y la analista de pie no lee lo único que importa. */
  .destacados.pares .destacado{flex:1 1 44%;min-width:130px;border-right:1px solid var(--line);
    border-bottom:1px solid var(--line)}
  .destacados.pares .destacado:nth-child(2n),.destacados.pares .destacado:last-child{border-right:0}
  .solo-ancho{display:none}
  .cabecera-acciones{width:100%}
  .cabecera-acciones .boton{flex:1 1 0;min-width:0;white-space:normal;font-size:var(--fs-2);
    padding:var(--e-2);line-height:1.25;text-align:center}
  /* La cadena se apila y la flecha gira: mismo componente, misma lectura, de arriba abajo. */
  .cadena.cinco{grid-template-columns:1fr;gap:var(--e-1)}
  .eslabon>.ojo{min-height:0}
  .fuga{flex-direction:row;gap:var(--e-2);justify-content:flex-start;text-align:left;padding:var(--e-1) var(--e-3)}
  .fuga::before{content:"\2193";font-size:20px}
  .cola-cab .note{margin-left:0;text-align:left;flex-basis:100%}

  /* LAS COLAS Y LA LISTA EN EL TELÉFONO. Un solo movimiento: la fila deja de ser una fila de tabla y pasa a
     ser un bloque de dos o tres líneas. Se esconden las columnas secundarias y lo que de ellas importa baja
     a una línea dentro de la primera celda (.solo-compacto). No es el recurso de td::before con el rótulo
     de cada dato: en una cola de trabajo se recorre buscando cuál mover, no se comparan las filas entre sí,
     y repetir seis rótulos por fila alargaría la cola sin agregar nada.
     La acción se va a su propia línea, a ancho completo y con los 44 px de alto de toque: es lo único que
     se toca, y en el teléfono se toca con guante. */
  .apilada thead{display:none}
  .apilada table,.apilada tbody{display:block;width:100%}
  .apilada tbody tr{display:block;padding:var(--e-3);border-bottom:1px solid var(--line)}
  .apilada tbody tr:last-child{border-bottom:0}
  .apilada tbody td{display:block;border-bottom:0;padding:0;white-space:normal}
  .apilada tbody td.col-secundaria{display:none}
  .apilada tbody td:last-child{margin-top:var(--e-2)}
  .apilada tbody td:last-child .btn-fila,.apilada tbody td:last-child .boton{width:100%}
  .solo-compacto{display:block;font-size:var(--fs-2);color:var(--muted);line-height:1.45;margin-top:2px}
  /* La fila de formulario sigue cerrada hasta que se la apunte: la regla de arriba puso display:block a
     TODA fila, incluidas las que no deben verse. */
  .apilada tbody tr.fila-form{display:none;padding:0}
  .apilada tbody tr.fila-form:target,.apilada tbody tr.fila-form.abierta{display:block}
  .apilada tbody tr.fila-form>td{padding:var(--e-3)}
  .apilada tbody tr.fila-resultado{padding:var(--e-3)}
  .form-fila{grid-template-columns:1fr}
  .form-fila .form-pie>*{width:100%}
  .form-fila .form-pie .note{width:auto}
  .cola td:last-child{white-space:normal}
  /* La barra de filtros de la lista: los cinco selectores a ancho completo, uno por línea. Filtrar en el
     teléfono es raro, pero cuando pasa es porque se está buscando a una persona concreta. */
  .barra-herramientas{flex-direction:column;align-items:stretch}
  .barra-herramientas .campo,.barra-herramientas>div{min-width:0;width:100%}
  .barra-herramientas button{width:100%}
  .resultado-conteo{margin-left:0;text-align:left}
}

/* ---- Capa 9 · Dos correcciones que el documento 43 §5.3 puso a la vista. Ninguna crea una clase nueva. -------------- */
/* La variante de la tarjeta de decisión que EJECUTA usa un <button> dentro de un <form>, así que no alcanzaba la regla
   `.decision-dueno .boton{width:100%}` escrita para el enlace. Sin estas dos líneas, en la misma lista los botones que
   bajan a una cola miden 255 px y los que ejecutan 148 y 172, porque el ancho lo fija el texto. */
.decision-dueno form{margin:0}
.decision-dueno button{width:100%}
@media(max-width:760px){
  /* El enlace `.accion` dentro de una cola mide entre 17 y 29 px de alto: en el teléfono se toca con guante. */
  .cola a.accion,.apilada a.accion,.eslabon a.accion,tr.fila-resultado a{
    min-height:var(--toque);display:inline-flex;align-items:center}
}

/* La barra de proporción con escala compartida (documento 44 §5.5): la pista es el máximo de la tabla y el relleno el valor.
   `.g-mal` marca la categoría que hay que cerrar, no la mayor. */
.franja rect{fill:var(--accion)}
.franja .g-pista{fill:var(--th);stroke:var(--linea-fuerte);stroke-width:.5}
/* Una barra dentro de una celda de tabla trae su propio ancho y alto: `.franja` a secas los anularía con sus 72×8 px. */
.franja.g-columna{width:auto;height:auto;margin-left:0}
.franja.g-mal rect{fill:var(--bad)}
.franja.g-mal .g-pista{fill:var(--th)}