/* Evaluaciones · Soluciones Migura
 *
 * Criterios de este rediseño, para que quien lo toque después sepa por qué:
 *
 *  1. EL CIAN TIENE UN SOLO TRABAJO: marcar dónde cae un valor en una escala.
 *     Nada más en la interfaz es cian. Un acento que significa una cosa se
 *     aprende; uno que se usa para todo no comunica nada.
 *
 *  2. LA LÍNEA DE MEDIDA es el elemento propio de este producto. Todo aquí es
 *     un valor frente a un umbral: el puntaje contra el mínimo del puesto, la
 *     autoevaluación contra la mirada de los demás, el indicador contra su
 *     meta. Leerlo como tres números sueltos obliga a interpretar; verlo como
 *     una línea con su marca de corte se entiende de un vistazo.
 *
 *  3. LA ELEVACIÓN SIGNIFICA ALGO. Los paneles se separan con una línea fina
 *     y aire, no con sombra. Solo lo que se puede accionar se levanta del
 *     plano. Ponerle la misma sombra a todo es no jerarquizar nada.
 *
 *  4. SIN VERSALITAS ESPACIADAS ni etiquetas decorativas. Si un texto hace
 *     falta, se escribe en frase normal; si no hace falta, se quita.
 *
 * Tipografía: Montserrat, la del sitio. Una sola familia, autohospedada.
 * Números siempre en cifras tabulares: una tabla cuyos dígitos bailan al
 * actualizarse es una tabla que cuesta leer.
 *
 * Cómo está ordenada: tokens y tema oscuro → base (tipografía, íconos) →
 * barra lateral → componentes (paneles, medida, botones, formularios, tablas
 * y listados, chips, avisos, vacío) → pantallas públicas → utilidades →
 * piezas de módulo → táctil → formulario y diálogo → armazón en el teléfono →
 * módulos de las olas 4-8 → impresión del finiquito.
 * No está en capas puras a propósito: entre reglas de la misma especificidad
 * gana la de más abajo, y hay pares que dependen de su sitio (las utilidades
 * .mt-/.mb- van entre componentes que les ganan y otros a los que ganan; el
 * bloque táctil, entre lo que agranda y lo que lo ajusta después). Moverlo
 * todo cambia el render: antes de mover un bloque, compararlo renderizando.
 *
 * Un selector, una regla por contexto: tools/revisar-diseno.mjs falla si un
 * selector se repite en el mismo @media, salvo que la regla lleve delante un
 * comentario «repite a propósito» que diga por qué. Si hace falta cambiar
 * algo de un componente, se cambia donde está, no se añade otro bloque al
 * final.
 */

@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/montserrat-400.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/montserrat-500.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/montserrat-600.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/montserrat-700.woff2') format('woff2'); }

:root{
  /* ── Tokens ────────────────────────────────────────────────────────────────
     Tres capas, como en Growly: primitivos de marca → papeles (semánticos) →
     componentes. Las reglas de componente SOLO usan los papeles: así el tema
     oscuro cambia los papeles y ningún componente se entera. Fuera de estos
     bloques no hay ni un color escrito a mano (lo comprueba
     tools/revisar-diseno.mjs). */

  /* Primitivos de marca. No se usan directamente en componentes. */
  --navy-900:#07233c; --navy-800:#0b3253; --navy-700:#145493; --navy-600:#1f6cb5;
  --cian-500:#42c8f4; --cian-50:#e6f6fd; --naranja-700:#d44115;

  /* Superficies: un blanco frío, de instrumento de medida, no de papel. */
  --fondo:#f7f9fb;            /* lienzo de la página */
  --superficie:#ffffff;       /* tarjeta */
  --superficie-2:#f7f9fb;     /* hundido: filas al pasar, cajas dentro de una tarjeta */
  --campo-fondo:#ffffff;
  --papel:#ffffff;            /* la hoja de un PDF y el recuadro de la firma: blanca en los dos temas (la tinta va a papel) */
  --borde:#e3e9f0; --borde-fuerte:#cfd9e5;
  --borde-control:#cfd9e5;    /* contorno de campos y botones suaves */
  --borde-hover:var(--navy-600);

  /* Tinta derivada del navy de marca, no un gris neutro.
     Contrastes sobre --superficie: texto 17:1 · texto-2 7,6:1 · texto-3 5,6:1 ·
     texto-tenue 4,8:1 (4,6:1 sobre el lienzo). Tenue es el mínimo para texto:
     #8695a5 daba 2,9:1 y se usaba en «falta» y en leyendas. */
  --texto:#0e1a26; --texto-2:#46556a; --texto-3:#5d6b7a; --texto-tenue:#647386;

  --enlace:var(--navy-700); --enlace-hover:var(--navy-800);
  --acento:var(--navy-800);   /* cifras grandes, texto de marca, botón suave */
  --primario:var(--navy-800); --primario-hover:var(--navy-700); --sobre-primario:#ffffff;
  --foco:var(--navy-600); --anillo-foco:var(--cian-50);
  --seleccion:var(--cian-50); --seleccion-solida:var(--cian-50);

  /* El cian: la medida (y el filo de citas y rutas, que marcan dónde mirar). */
  --medida:var(--cian-500); --medida-baja:#f0b9a6; --realce:var(--cian-500);
  --avance:var(--navy-600); --avance-cerca:var(--navy-700);

  /* Estado. Los cuatro pasan AA sobre su tinte y sobre blanco, comprobado. */
  --ok:#0f7a3d;     --ok-tinte:#eaf7ef;
  --aviso:#8a6100;  --aviso-tinte:#fdf7e6;  --aviso-borde:#e0b64a;
  --alerta:#b0350f; --alerta-tinte:#fdf0ec; --alerta-borde:#efd3c9;
  --info:#0a4f6b;   --info-tinte:var(--cian-50); --info-borde:#bfe6f7;
  --urgente:var(--naranja-700);

  /* Niveles del organigrama, de más a menos alto. */
  --nivel-6:var(--navy-900); --nivel-5:var(--navy-800); --nivel-4:var(--navy-700);
  --nivel-3:var(--navy-600); --nivel-2:var(--cian-500); --nivel-1:var(--borde-fuerte);

  /* Barra lateral del panel y barra de Mi espacio (navy en los dos temas).
     Tenue a .62 da 5,9:1 sobre el navy; a .45 daba 3,9:1. */
  --lateral-fondo:var(--navy-800); --lateral-borde:transparent;
  --lateral-texto:rgba(255,255,255,.82); --lateral-texto-fuerte:#ffffff;
  --lateral-tenue:rgba(255,255,255,.62); --lateral-hover:rgba(255,255,255,.08);
  --lateral-linea:rgba(255,255,255,.1); --lateral-acento:var(--cian-500);
  --lateral-activo-fondo:rgba(255,255,255,.13); --lateral-activo-texto:#ffffff;

  /* Gráficos SVG (src/grafico.php): los colores van por clase, no fijos. */
  --g-navy:var(--navy-800); --g-navy2:var(--navy-600); --g-cian:var(--cian-500); --g-cian2:#a5e3f9;
  --g-naranja:var(--naranja-700); --g-ok:#0f7a3d; --g-aviso:#8a6100; --g-alerta:#b0350f;
  --g-linea:#e3e9f0; --g-tenue:#647386; --g-tinta:#0e1a26; --g-sobre:#ffffff;

  --placa-logo:transparent;   /* el logotipo completo trae la palabra en navy */
  --sombra-accion:0 1px 2px rgba(14,26,38,.08), 0 4px 12px rgba(14,26,38,.06);
  --sombra-flotante:0 8px 30px rgba(14,26,38,.14);
  --capa:rgba(7,35,60,.48);   /* fondo detrás de un cajón, una hoja o un diálogo */

  --radio:10px; --radio-grande:14px;
  --lateral:232px;

  /* Nombres de antes, como alias: los leen los arneses (e2e.mjs mide el
     contraste de --tinta-tenue sobre --lienzo) y quien los recuerde. Ningún
     componente los usa. */
  --lienzo:var(--fondo); --panel:var(--superficie); --linea:var(--borde); --linea-fuerte:var(--borde-fuerte);
  --tinta:var(--texto); --tinta-media:var(--texto-2); --tinta-suave:var(--texto-3); --tinta-tenue:var(--texto-tenue);
  --navy:var(--navy-800); --cian:var(--cian-500); --cian-agua:var(--cian-50);

  color-scheme:light;
  font-family:'Montserrat','Helvetica Neue',system-ui,-apple-system,sans-serif;
  font-variant-numeric:tabular-nums;
}

/* ── Tema oscuro ───────────────────────────────────────────────────────────────
   Por preferencia del sistema, salvo que la persona haya elegido claro, y
   además por elección explícita (cookie `tema`, que PHP escribe como
   <html data-theme>). Los dos bloques son IGUALES; el arnés lo comprueba.
   Solo en pantalla: lo impreso (DC-3, constancias) sale siempre en claro.

   Oscuro teñido de navy, nunca negro. La elevación va con borde, sin sombra:
   una sombra sobre un fondo oscuro no se ve y solo ensucia.
   Contrastes sobre --superficie (#111f2e): texto 14:1 · texto-2 9,2:1 ·
   texto-3 7,5:1 · texto-tenue 6:1 · enlace 8,7:1 · blanco sobre primario 5,4:1.
   El borde de control da 2,8:1 contra la tarjeta. */
@media screen and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#0b1622; --superficie:#111f2e; --superficie-2:#172a3d; --campo-fondo:#0d1927;
    --borde:#22384d; --borde-fuerte:#2e4a63; --borde-control:#4a6682; --borde-hover:#5d9bd6;
    --texto:#e8eef5; --texto-2:#b4c2d1; --texto-3:#9fb0c2; --texto-tenue:#8b9db1;
    --enlace:#7cc4f0; --enlace-hover:#a8d8f6; --acento:#bfe0f7;
    --primario:#1f6cb5; --primario-hover:#1a63a8; --sobre-primario:#ffffff;
    --foco:#7cc4f0; --anillo-foco:rgba(66,200,244,.28);
    --seleccion:rgba(66,200,244,.14); --seleccion-solida:#16334a;
    --medida:#42c8f4; --medida-baja:#d9785a; --realce:#42c8f4;
    --avance:#3f8fd8; --avance-cerca:#62a8e6;
    --ok:#4ade80;     --ok-tinte:rgba(34,197,94,.14);
    --aviso:#fbbf24;  --aviso-tinte:rgba(245,165,36,.14);  --aviso-borde:#8a6a1f;
    --alerta:#f59a7f; --alerta-tinte:rgba(229,72,77,.14);  --alerta-borde:#7a3b2c;
    --info:#8fdcf8;   --info-tinte:rgba(66,200,244,.12);   --info-borde:#1f5670;
    --urgente:#f08a5d;
    --nivel-6:#9cc9ee; --nivel-5:#6fb0e6; --nivel-4:#4a90d0; --nivel-3:#2f73b3; --nivel-2:#42c8f4; --nivel-1:#4a6682;
    --lateral-fondo:#081a2b; --lateral-borde:#22384d;
    --lateral-activo-fondo:rgba(66,200,244,.16); --lateral-activo-texto:#b5e8fb;
    --g-navy:#6fb0e6; --g-navy2:#3f8fd8; --g-cian:#42c8f4; --g-cian2:#1f6f8f;
    --g-naranja:#f08a5d; --g-ok:#4ade80; --g-aviso:#fbbf24; --g-alerta:#f59a7f;
    --g-linea:#2e4a63; --g-tenue:#9fb0c2; --g-tinta:#e8eef5; --g-sobre:#08121c;
    --placa-logo:#eef3f8;
    --sombra-accion:none; --sombra-flotante:0 8px 30px rgba(0,0,0,.5); --capa:rgba(2,8,14,.66);
    color-scheme:dark;
  }
}
@media screen{
  :root[data-theme="dark"]{
    --fondo:#0b1622; --superficie:#111f2e; --superficie-2:#172a3d; --campo-fondo:#0d1927;
    --borde:#22384d; --borde-fuerte:#2e4a63; --borde-control:#4a6682; --borde-hover:#5d9bd6;
    --texto:#e8eef5; --texto-2:#b4c2d1; --texto-3:#9fb0c2; --texto-tenue:#8b9db1;
    --enlace:#7cc4f0; --enlace-hover:#a8d8f6; --acento:#bfe0f7;
    --primario:#1f6cb5; --primario-hover:#1a63a8; --sobre-primario:#ffffff;
    --foco:#7cc4f0; --anillo-foco:rgba(66,200,244,.28);
    --seleccion:rgba(66,200,244,.14); --seleccion-solida:#16334a;
    --medida:#42c8f4; --medida-baja:#d9785a; --realce:#42c8f4;
    --avance:#3f8fd8; --avance-cerca:#62a8e6;
    --ok:#4ade80;     --ok-tinte:rgba(34,197,94,.14);
    --aviso:#fbbf24;  --aviso-tinte:rgba(245,165,36,.14);  --aviso-borde:#8a6a1f;
    --alerta:#f59a7f; --alerta-tinte:rgba(229,72,77,.14);  --alerta-borde:#7a3b2c;
    --info:#8fdcf8;   --info-tinte:rgba(66,200,244,.12);   --info-borde:#1f5670;
    --urgente:#f08a5d;
    --nivel-6:#9cc9ee; --nivel-5:#6fb0e6; --nivel-4:#4a90d0; --nivel-3:#2f73b3; --nivel-2:#42c8f4; --nivel-1:#4a6682;
    --lateral-fondo:#081a2b; --lateral-borde:#22384d;
    --lateral-activo-fondo:rgba(66,200,244,.16); --lateral-activo-texto:#b5e8fb;
    --g-navy:#6fb0e6; --g-navy2:#3f8fd8; --g-cian:#42c8f4; --g-cian2:#1f6f8f;
    --g-naranja:#f08a5d; --g-ok:#4ade80; --g-aviso:#fbbf24; --g-alerta:#f59a7f;
    --g-linea:#2e4a63; --g-tenue:#9fb0c2; --g-tinta:#e8eef5; --g-sobre:#08121c;
    --placa-logo:#eef3f8;
    --sombra-accion:none; --sombra-flotante:0 8px 30px rgba(0,0,0,.5); --capa:rgba(2,8,14,.66);
    color-scheme:dark;
  }
}
/* FIN DE LOS TOKENS */
*{ box-sizing:border-box; }
/* El atributo hidden solo vale display:none en la hoja del navegador, y
   cualquier clase con display (la barra de selección, el reloj) le ganaba:
   lo «oculto» se veía. Aquí manda siempre. */
[hidden]{ display:none !important; }
/* Solo body: html no trae margen ni relleno del navegador. */
body{
  margin:0; padding:0;
  background:var(--fondo); color:var(--texto);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
body.centrado{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px 16px; }

/* ── Escala tipográfica ─────────────────────────────────────────────────── */
h1{ font-size:1.75rem; font-weight:700; letter-spacing:-.025em; line-height:1.2; margin:0 0 8px; color:var(--texto); }
h2{ font-size:1.125rem; font-weight:600; letter-spacing:-.012em; margin:0 0 10px; color:var(--texto); }
h3{ font-size:.94rem; font-weight:600; margin:0 0 6px; color:var(--texto); }
h4{ font-size:.86rem; font-weight:600; margin:18px 0 6px; color:var(--texto-2); }
p{ margin:0 0 14px; max-width:78ch; }
a{ color:var(--enlace); text-underline-offset:2px; }
a:hover{ color:var(--enlace-hover); }
.mut{ color:var(--texto-3); font-size:.92rem; }
.min{ color:var(--texto-3); font-size:.82rem; }
strong{ font-weight:600; }

/* ── Íconos ─────────────────────────────────────────────────────────────── */
/* Sprite /assets/iconos.svg (trazos de Lucide). Línea, no relleno, y del color
   del texto: así sirven en los dos temas sin una sola variante. */
.ico{
  width:18px; height:18px; flex:none; vertical-align:middle;
  fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
}
/* Solo para lectores de pantalla: la etiqueta de un campo cuyo propósito ya
   dice su placeholder y su ícono. */
.solo-lector{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── Barra lateral ──────────────────────────────────────────────────────── */
/* En el escritorio es una columna fija. El cajón (lo que en el teléfono se
   desliza) aquí no existe como caja: display:contents deja a sus hijos
   colocarse en la rejilla de la lateral, y así «Salir» comparte fila con el
   nombre de la persona aunque en el HTML vaya fuera del cajón. */
.lateral{
  position:fixed; inset:0 auto 0 0; width:var(--lateral); z-index:20;
  background:var(--lateral-fondo); color:var(--lateral-texto-fuerte);
  border-right:1px solid var(--lateral-borde);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  grid-template-areas:"marca marca" "ira ira" "nav nav" "tema tema" "pie salir";
}
.boton-menu, .cajon-cabeza, .capa-menu{ display:none; }
.lateral-cajon{ display:contents; }
.lateral-marca{
  grid-area:marca; display:flex; align-items:center; gap:9px; padding:18px 20px 16px;
  border-bottom:1px solid var(--lateral-linea);
  text-decoration:none; color:inherit; transition:background-color .12s ease;
}
.lateral-marca:hover{ background:var(--lateral-hover); }
/* El isotipo: el logotipo completo trae «MIGURA» en navy y sobre la barra
   navy desaparece entero (ver «Marca», más abajo). */
.lateral-marca img{ height:34px; width:auto; flex:none; }
.lateral-marca b{ font-size:.95rem; font-weight:700; letter-spacing:-.01em; display:block; color:var(--lateral-texto-fuerte); }
.lateral-marca span{ font-size:.75rem; color:var(--lateral-acento); display:block; margin-top:1px; }
/* Las iniciales de una empresa sin isotipo: la regla de arriba (span en bloque) las descentraba. */
.lateral-marca .marca-iniciales{ display:inline-flex; flex:none; margin-top:0; font-size:.8rem; background:var(--lateral-acento); color:var(--lateral-fondo); }
.yo-marca .marca-iniciales{ display:inline-flex; flex:none; margin-top:0; font-size:.8rem; }

.ir-a{ grid-area:ira; position:relative; margin:12px 12px 2px; }
.ir-a .ico{ position:absolute; z-index:1; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--lateral-tenue); pointer-events:none; }
/* .lateral delante: la regla general de campos (más abajo) le ganaba. */
.lateral .ir-a input{
  min-height:36px; padding:6px 10px 6px 32px; font-size:.84rem;
  background:var(--lateral-hover); border-color:var(--lateral-linea); color:var(--lateral-texto-fuerte);
}
.lateral .ir-a input::placeholder{ color:var(--lateral-tenue); opacity:1; }
.lateral .ir-a input:focus{ border-color:var(--lateral-acento); }
@media (pointer:coarse){ .lateral .ir-a input{ min-height:44px; } }

.lateral-nav{ grid-area:nav; overflow-y:auto; padding:10px 10px 12px; overscroll-behavior:contain; }
.grupo-nav{ margin:0 0 2px; }
.grupo-nav[open]{ margin-bottom:10px; }
.grupo-nav > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:8px; font-size:.76rem; font-weight:600; color:var(--lateral-tenue);
}
.grupo-nav > summary::-webkit-details-marker{ display:none; }
.grupo-nav > summary:hover{ background:var(--lateral-hover); color:var(--lateral-texto-fuerte); }
/* El ícono del grupo sobra al lado de los de sus enlaces: el grupo es texto. */
.grupo-nav > summary > .ico:first-child{ display:none; }
.grupo-nav > summary .ico-flecha{ margin-left:auto; width:15px; height:15px; transition:transform .15s ease; }
.grupo-nav[open] > summary .ico-flecha{ transform:rotate(180deg); }
/* El grupo de la sección actual se marca aun plegado: se ve dónde se está. */
.grupo-nav[data-grupo-activo] > summary{ color:var(--lateral-texto-fuerte); }
.lateral-nav a{
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; margin-bottom:1px;
  color:var(--lateral-texto); text-decoration:none; font-size:.87rem; font-weight:500; line-height:1.3;
  transition:background .12s ease, color .12s ease;
}
.lateral-nav a .ico{ width:17px; height:17px; color:var(--lateral-tenue); }
.lateral-nav a:hover{ background:var(--lateral-hover); color:var(--lateral-texto-fuerte); }
.lateral-nav a:hover .ico{ color:inherit; }
/* Activo: tinte y un filo, no una placa blanca que pesa más que el título. */
.lateral-nav a.activo{
  background:var(--lateral-activo-fondo); color:var(--lateral-activo-texto); font-weight:600;
  box-shadow:inset 2px 0 0 var(--lateral-acento);
}
.lateral-nav a.activo .ico{ color:var(--lateral-acento); }
.ir-a-nada{ padding:6px 10px; margin:0; color:var(--lateral-tenue); }

.lateral .tema-conmutador{ grid-area:tema; }
.lateral-pie{
  grid-area:pie; padding:12px 8px 14px 16px; border-top:1px solid var(--lateral-linea); min-width:0;
}
.lateral-pie a{ color:var(--lateral-texto-fuerte); text-decoration:none; font-size:.82rem; font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lateral-pie a:hover{ color:var(--lateral-acento); }
.lateral-pie .min{ color:var(--lateral-tenue); display:block; font-size:.72rem; }
/* «Ayuda», encima de la cuenta. Más específica que «.lateral-pie a» (también
   la del bloque táctil, que la pondría en columna). */
.lateral-pie a.lateral-ayuda{ display:flex; flex-direction:row; align-items:center; gap:8px; margin-bottom:10px; color:var(--lateral-texto); }
.lateral-pie a.lateral-ayuda .ico{ width:17px; height:17px; color:var(--lateral-tenue); }
.lateral-pie a.lateral-ayuda:hover, .lateral-pie a.lateral-ayuda.activo, .lateral-pie a.lateral-ayuda.activo .ico{ color:var(--lateral-acento); }
/* El anillo de foco general es navy: sobre la barra navy no se ve. Aquí, cian. */
:is(.lateral, .yo-barra, .yo-nav) :focus-visible{ outline-color:var(--lateral-acento); }
.yo-nav .yo-mas-hoja :focus-visible{ outline-color:var(--foco); }
.lateral-salir{
  grid-area:salir; display:flex; align-items:center; padding:12px 16px 14px 0;
  border-top:1px solid var(--lateral-linea);
}

/* ── Conmutador de tema ─────────────────────────────────────────────────── */
.tema-conmutador{ position:relative; padding:0 16px 10px; }
.tema-conmutador > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  font-size:.78rem; font-weight:500; color:var(--lateral-tenue); padding:4px 0;
}
.tema-conmutador > summary::-webkit-details-marker{ display:none; }
.tema-conmutador > summary:hover{ color:var(--lateral-texto-fuerte); }
.tema-conmutador > summary [data-tema-nombre]{ color:var(--lateral-texto); font-weight:600; }
.tema-opciones{
  position:absolute; left:12px; bottom:calc(100% + 4px); z-index:30;
  display:flex; gap:6px; padding:8px; border-radius:var(--radio);
  background:var(--superficie); border:1px solid var(--borde-fuerte); box-shadow:var(--sombra-flotante);
}
.tema-opciones .btn{ flex:1 1 0; padding-inline:6px; }
.lateral .tema-opciones{ right:12px; }
.tema-opciones .btn[aria-pressed="true"]{ background:var(--primario); color:var(--sobre-primario); border-color:var(--primario); }
/* En Mi espacio la barra va arriba: el menú abre hacia abajo. */
.yo-barra .tema-conmutador{ padding:0; }
.yo-barra .tema-opciones{ left:auto; right:0; bottom:auto; top:calc(100% + 6px); }

/* ── Contenido ──────────────────────────────────────────────────────────── */
.cuerpo-panel{ margin-left:var(--lateral); padding:30px 32px 80px; }
.ancha{ max-width:1160px; margin:0 auto; }
.max-900{ max-width:900px; }
.max-760{ max-width:74ch; }
.envoltura{ max-width:680px; margin:0 auto; padding:30px 18px 72px; }

/* ── Paneles ────────────────────────────────────────────────────────────── */
/* Hairline y aire, no sombra. La sombra se reserva para lo accionable. */
.tarjeta{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio-grande); padding:24px 26px; width:100%;
}
/* Cabecera de una tarjeta: su título a la izquierda y un enlace o botón a la
   derecha, que baja debajo si no cabe. */
.tarjeta-cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.tarjeta-cabeza h2{ margin:0; }
.angosta{ max-width:460px; }

/* ── La línea de medida ─────────────────────────────────────────────────── */
/* El elemento propio de este producto: un valor frente a un umbral.
   El cian marca dónde está; la muesca marca dónde tenía que llegar. */
.medida{ display:flex; align-items:center; gap:12px; min-width:180px; }
.medida-pista{
  position:relative; flex:1; height:8px; min-width:90px;
  background:var(--superficie-2); border:1px solid var(--borde); border-radius:99px;
}
.medida-valor{
  position:absolute; min-width:6px; inset:0 auto 0 0; border-radius:99px;
  background:var(--medida);
}
.medida-corte{
  position:absolute; top:-4px; bottom:-4px; width:2px;
  background:var(--texto); border-radius:2px;
}
.medida-cifra{ font-weight:600; font-size:.88rem; min-width:3.2em; text-align:right; }
.medida.bajo .medida-valor{ background:var(--medida-baja); }
.medida.cumple .medida-valor{ background:var(--medida); }
.medida-leyenda{ font-size:.76rem; color:var(--texto-tenue); }

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:600; font-size:.89rem; letter-spacing:-.005em;
  padding:11px 20px; border-radius:var(--radio); border:1px solid transparent;
  cursor:pointer; text-decoration:none; min-height:42px;
  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn-primario{ background:var(--primario); color:var(--sobre-primario); box-shadow:var(--sombra-accion); }
.btn-primario:hover:not(:disabled){ background:var(--primario-hover); color:var(--sobre-primario); }
.btn-primario:disabled{ background:var(--borde-fuerte); color:var(--texto-tenue); box-shadow:none; cursor:not-allowed; }
.btn-suave{ background:var(--superficie); color:var(--acento); border-color:var(--borde-control); }
.btn-suave:hover{ border-color:var(--borde-hover); background:var(--superficie-2); }
.btn-peligro{ background:var(--superficie); color:var(--alerta); border-color:var(--alerta-borde); }
.btn-peligro:hover{ background:var(--alerta-tinte); }
.btn-chico{ padding:6px 13px; min-height:34px; font-size:.81rem; }
.btn-mini{ padding:5px 11px; min-height:30px; font-size:.76rem; }
:is(.btn,a,input,select,button,textarea,summary,details):focus-visible{
  outline:2px solid var(--foco); outline-offset:2px; border-radius:6px;
}

/* ── Botón fantasma ─────────────────────────────────────────────────────────
   Para las acciones de fila y «Cancelar»: se lee como botón al pasar, pero no
   compite con el primario de la pantalla. */
.btn-fantasma{ background:transparent; color:var(--enlace); border-color:transparent; }
.btn-fantasma:hover{ background:var(--superficie-2); color:var(--enlace-hover); }
.btn-fantasma:disabled{ color:var(--texto-tenue); cursor:not-allowed; }

/* ── Formularios ────────────────────────────────────────────────────────── */
.campo{ margin-bottom:16px; }
.campo label{ display:block; font-size:.84rem; font-weight:600; color:var(--texto-2); margin-bottom:6px; }
.campo .etiqueta-campo{ display:block; font-size:.84rem; font-weight:600; color:var(--texto-2); line-height:1.4; margin-bottom:6px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=number], input[type=date], input[type=datetime-local], input[type=url], input[type=time], input[type=month], select, textarea{
  width:100%; font:inherit; font-size:.92rem; padding:10px 13px;
  border:1px solid var(--borde-control); border-radius:var(--radio);
  background:var(--campo-fondo); color:var(--texto); min-height:42px;
}
/* repite a propósito: el área de texto comparte todo con los campos y solo
   cambia su alto, su interlineado y que se estira. */
textarea{ min-height:auto; line-height:1.55; resize:vertical; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--foco); box-shadow:0 0 0 3px var(--anillo-foco);
}
input:disabled, select:disabled, textarea:disabled{ background:var(--superficie-2); color:var(--texto-3); }
.select-chico{ min-height:36px; padding:6px 10px; font-size:.85rem; }
/* Objetivos del desempeño: en el teléfono la tabla se desplaza de lado; sin un
   ancho mínimo los campos se encogían a 38 px y no se podían tocar. */
.tabla-objetivos input[type=text]{ min-width:14rem; }
.tabla-objetivos select{ min-width:4.5rem; }
@media (max-width:640px){
  .tabla-objetivos thead{ display:none; }
  .tabla-objetivos, .tabla-objetivos tbody{ display:block; width:100%; }
  .tabla-objetivos tr{ display:block; width:100%; border-bottom:1px solid var(--borde); padding:8px 0; }
  .tabla-objetivos td{ display:block; width:100%; border:0; padding:4px 0; }
  .tabla-objetivos input[type=text], .tabla-objetivos select{ min-width:0; width:100%; }
}
.rejilla{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

/* ── Tablas ─────────────────────────────────────────────────────────────── */
table.datos{ width:100%; border-collapse:collapse; font-size:.88rem; }
table.datos th{
  text-align:left; font-size:.79rem; font-weight:600; color:var(--texto-3);
  padding:0 12px 9px; white-space:nowrap; border-bottom:1px solid var(--borde);
}
table.datos td{ padding:12px; border-bottom:1px solid var(--borde); vertical-align:middle; }
table.datos tbody tr:last-child td{ border-bottom:0; }
table.datos tbody tr:hover td{ background:var(--superficie-2); }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
/* `table.datos th` gana en especificidad a `.num`: sin esto, el encabezado de una columna numérica quedaba a la izquierda y sus cifras a la derecha. */
table.datos th.num{ text-align:right; }
/* Fila que agrupa las de abajo (una certificación y quién la tiene). */
table.datos tr.fila-grupo th{ padding:14px 12px 8px; font-size:.86rem; color:var(--texto); background:var(--superficie-2); white-space:normal; }
table.datos tr.fila-grupo th .min{ font-weight:500; margin-left:6px; }
.nowrap{ white-space:nowrap; }
/* Texto sin espacios (un enlace con token, una nota escrita de corrido): se
   parte donde haga falta en lugar de ensanchar la tarjeta. */
.partir{ overflow-wrap:anywhere; }
.scroll-x{ overflow-x:auto; margin:0 -26px; padding:0 26px; }

/* Listados en el teléfono (≤640 px): las columnas .col-sec se ocultan y su
   dato más útil baja a la línea 2 de .celda-principal (lo marcado
   .solo-telefono), así que la columna con el enlace de la fila nunca queda
   fuera, a la derecha. La tabla sigue siendo tabla (ver «Tablas anchas en un
   teléfono»). .col-accion es la celda de los botones de la fila: en el
   teléfono los apila para que ninguno quede fuera. */
.celda-principal .linea-2{ display:block; margin-top:2px; font-size:.8rem; line-height:1.4; color:var(--texto-3); white-space:normal; }
/* Con la misma especificidad que la regla de arriba: si no, la línea 2 que
   es solo para el teléfono salía también en escritorio. */
.solo-telefono, .celda-principal .linea-2.solo-telefono{ display:none; }
table.datos .col-accion{ white-space:nowrap; text-align:right; width:1%; }
@media (max-width:640px){
  table.datos .col-sec{ display:none; }
  /* La celda principal se queda con el ancho: si no, las cifras cortas de la
     derecha la aplastaban y «Operaciones» se partía a media palabra. */
  table.datos .celda-principal{ width:55%; min-width:10.5rem; }
  .solo-telefono{ display:inline; }
  .linea-2.solo-telefono, .celda-principal .linea-2.solo-telefono{ display:block; }
  table.datos .col-accion{ white-space:normal; }
  table.datos .col-accion > :is(form, .btn, a.btn){ display:flex; width:100%; justify-content:center; margin:0 0 6px; }
  table.datos .col-accion > form > .btn{ width:100%; }
  table.datos .col-accion > :last-child{ margin-bottom:0; }
  /* Una casilla junto al botón (Ausencias: «Adelanto acordado» junto a
     «Aprobar»): en el teléfono va encima. */
  table.datos .col-accion > form:has(> label){ flex-wrap:wrap; gap:6px; }
  table.datos .col-accion > form > label{ flex:1 1 100%; }
}
/* Un renglón cortado con «…»; el texto entero va en el title. La primera
   línea de la fila compacta de Evaluaciones es el mismo recorte. */
.una-linea, .tabla-compacta .celda-principal .linea-1{ display:block; max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Chips de estado ────────────────────────────────────────────────────────
   Un solo componente: píldora con tinte, texto del color de su estado y un
   borde del mismo color al 30 %. Nunca solo color: el chip siempre lleva la
   palabra. Las etiquetas de antes (.etq-*, .banda-*, .marca-estado) son
   alias y se ven igual, para no tener que tocar cada vista. */
.chip, .etq, .banda, .marca-estado{
  display:inline-flex; align-items:center; gap:4px; vertical-align:middle;
  font-size:.74rem; font-weight:600; line-height:1.35; padding:2px 9px;
  border-radius:999px; white-space:nowrap;
  background:var(--superficie-2); color:var(--texto-2);
  border:1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.chip .ico{ width:13px; height:13px; }
.chip-neutro, .etq-invitada{ background:var(--superficie-2); color:var(--texto-3); }
.chip-info, .etq-en_progreso, .marca-estado.curso{ background:var(--info-tinte); color:var(--info); }
.chip-ok, .etq-completada, .banda-alto, .marca-estado.listo{ background:var(--ok-tinte); color:var(--ok); }
.chip-aviso, .banda-medio, .marca-estado.falta{ background:var(--aviso-tinte); color:var(--aviso); }
.chip-alerta, .etq-expirada, .banda-bajo{ background:var(--alerta-tinte); color:var(--alerta); }
.etq-cancelada{ background:var(--superficie-2); color:var(--texto-tenue); }
/* Urgente (vencido, plazo legal): el naranja va en el borde, que es donde
   se puede usar sin perder contraste; el texto sigue siendo el de alerta. */
.chip-urgente{ background:var(--alerta-tinte); color:var(--alerta); border-color:var(--urgente); font-weight:700; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.nota{
  border-radius:var(--radio); padding:13px 16px; font-size:.88rem;
  margin-bottom:18px; border-left:3px solid; line-height:1.55;
}
.nota p:last-child{ margin-bottom:0; }
.nota-info{ background:var(--info-tinte); border-color:var(--realce); color:var(--info); }
.nota-ok{ background:var(--ok-tinte); border-color:var(--ok); color:var(--ok); }
.nota-aviso{ background:var(--aviso-tinte); border-color:var(--aviso-borde); color:var(--aviso); }
.nota-alerta{ background:var(--alerta-tinte); border-color:var(--alerta); color:var(--alerta); }
.texto-alerta{ color:var(--alerta); font-weight:600; }
.texto-ok{ color:var(--ok); font-weight:600; }

/* ── Estado vacío (src/vistas/_vacio.php) ─────────────────────────────────
   Qué falta, qué va a pasar y, si la hay, UNA acción. Un «No hay nada» suelto
   no dice si es que todo va bien o que algo no se cargó. */
.vacio{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:18px 20px; border:1px dashed var(--borde-fuerte); border-radius:var(--radio);
  background:var(--superficie-2);
}
.vacio > .ico{ width:22px; height:22px; color:var(--texto-3); margin-bottom:4px; }
.vacio-titulo{ margin:0; font-weight:600; font-size:.95rem; color:var(--texto); }
.vacio-texto{ margin:0; max-width:480px; font-size:.88rem; color:var(--texto-3); }
.vacio .btn{ margin-top:10px; }
/* Dentro de una tarjeta la tarjeta ya es la caja: sin segundo borde. */
.tarjeta > .vacio{ border:0; background:transparent; padding:2px 0; }

/* ── Aviso de éxito (flash) ──────────────────────────────────────────────── */
/* role="status" desde el servidor; panel.js le pone la X para cerrarlo. */
.nota-flash{ position:relative; padding-right:52px; }
.nota-cerrar{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:inherit;
}
.nota-cerrar:hover{ background:color-mix(in srgb, currentColor 12%, transparent); }
@media (pointer:coarse){ .nota-cerrar{ width:44px; height:44px; right:2px; } }

/* ── Indicadores ────────────────────────────────────────────────────────── */
.cifra{
  font-size:2rem; font-weight:700; letter-spacing:-.035em; line-height:1.1;
  color:var(--texto); margin:0 0 5px;
}
.cifra .min{ font-size:.85rem; font-weight:500; }

/* ── Marca ──────────────────────────────────────────────────────────────────
   Dos piezas distintas a propósito. El logotipo completo lleva la palabra
   «MIGURA» en navy, así que sobre la barra lateral navy desaparece entera y
   solo queda el símbolo flotando: comprobado renderizando, que es la única
   forma de verlo. En el panel va el isotipo (.lateral-marca img); en las
   pantallas claras que ve el candidato, el logotipo completo. */
.marca-logo{ height:34px; width:auto; flex:none; background:var(--placa-logo); border-radius:8px; }
/* Sin logo declarado (un cliente que todavía no sube el suyo): su nombre
   escrito ocupa el lugar del logo, y sus iniciales el del isotipo. */
.marca-logo-texto{ display:inline-flex; align-items:center; height:34px; padding:0 10px; font-weight:700; font-size:1rem; color:var(--texto); background:var(--superficie-2); }
.marca-iniciales{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; font-weight:700; font-size:.8rem; background:var(--primario); color:var(--sobre-primario); }
/* Logotipo sobre placa: en oscuro «MIGURA» en navy se pierde. Mientras no
   haya una versión clara, va sobre una placa clara discreta; en claro la
   placa es transparente y no cambia nada. */
:root[data-theme="dark"] .marca-logo{ padding:4px 8px; box-sizing:content-box; }
@media screen and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marca-logo{ padding:4px 8px; box-sizing:content-box; }
}
.marca{ display:flex; align-items:center; gap:9px; margin-bottom:22px; }
.marca-punto{ width:9px; height:9px; border-radius:50%; background:var(--realce); flex:none; }
.marca-texto{ display:flex; align-items:baseline; gap:5px; font-weight:700; color:var(--acento); font-size:.92rem; letter-spacing:-.01em; }
.marca-texto span{ color:var(--texto-3); font-weight:500; }

/* ── Evaluación del candidato ───────────────────────────────────────────── */
.lista-pruebas{ list-style:none; margin:0 0 20px; padding:0; border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden; }
.lista-pruebas li{ display:flex; justify-content:space-between; gap:12px; padding:12px 15px; border-bottom:1px solid var(--borde); font-size:.9rem; }
.lista-pruebas li:last-child{ border-bottom:0; }
.lista-pruebas .dur{ color:var(--texto-3); white-space:nowrap; }

.reglas{ background:var(--superficie-2); border:1px solid var(--borde); border-radius:var(--radio); padding:16px 19px; margin-bottom:18px; }
.reglas ul{ margin:0; padding-left:19px; }
.reglas li{ margin-bottom:7px; font-size:.9rem; }
.reglas li:last-child{ margin-bottom:0; }

.consentir{ display:flex; gap:11px; align-items:flex-start; margin:20px 0; font-size:.9rem; color:var(--texto-2); }
.consentir input{ width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--primario); }

.barra{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.progreso{ font-size:.84rem; color:var(--texto-3); font-weight:500; }
.reloj{
  font-weight:600; font-size:.88rem; background:var(--superficie-2); color:var(--texto-2);
  border:1px solid var(--borde); padding:5px 13px; border-radius:99px;
}
.reloj.poco{ background:var(--alerta-tinte); color:var(--alerta); border-color:var(--alerta-borde); }

.riel{ height:4px; background:var(--borde); border-radius:99px; overflow:hidden; margin-bottom:24px; }
.riel i{ display:block; width:0; height:100%; background:var(--medida); border-radius:99px; transition:width .25s ease; }

.pregunta{ font-size:1.08rem; font-weight:500; line-height:1.5; margin:0 0 20px; }
.consigna{ margin:0 0 12px; padding:8px 12px; border-left:3px solid var(--realce); background:var(--info-tinte); font-size:.9rem; color:var(--texto-2); border-radius:0 6px 6px 0; }
.opciones{ display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
.opcion{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  font:inherit; font-size:.95rem; padding:14px 17px; min-height:54px;
  background:var(--superficie); color:var(--texto); border:1.5px solid var(--borde-control); border-radius:var(--radio);
  cursor:pointer; transition:border-color .12s ease, background .12s ease;
}
.opcion:hover{ border-color:var(--borde-hover); }
.opcion[aria-pressed=true]{ border-color:var(--primario); background:var(--seleccion); }
.opcion .marca-op{ width:20px; height:20px; border-radius:50%; border:2px solid var(--borde-control); flex:none; display:grid; place-items:center; }
.opcion[aria-pressed=true] .marca-op{ border-color:var(--primario); background:var(--primario); }
.opcion[aria-pressed=true] .marca-op::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--sobre-primario); }

.tabla-forzada{ width:100%; border-collapse:collapse; margin-bottom:22px; }
.tabla-forzada th{ font-size:.79rem; color:var(--texto-3); padding:0 6px 9px; font-weight:600; }
.tabla-forzada td{ padding:10px 6px; border-top:1px solid var(--borde); font-size:.92rem; }
.tabla-forzada td.sel{ text-align:center; width:72px; }
.tabla-forzada input{ width:20px; height:20px; accent-color:var(--primario); cursor:pointer; }

.pie-nav{ display:flex; justify-content:space-between; gap:12px; align-items:center; }
.sin-copia{ user-select:none; -webkit-user-select:none; }

/* ── Evaluación 360 ─────────────────────────────────────────────────────── */
.avance-360{
  display:block; width:100%; height:4px; margin-bottom:22px;
  border:0; border-radius:99px; background:var(--borde); appearance:none;
}
.avance-360::-webkit-progress-bar{ background:var(--borde); border-radius:99px; }
.avance-360::-webkit-progress-value{ background:var(--medida); border-radius:99px; }
.avance-360::-moz-progress-bar{ background:var(--medida); border-radius:99px; }

.conducta{ border:0; padding:0; margin:0 0 24px; }
.conducta legend{ font-size:1rem; font-weight:500; line-height:1.45; margin-bottom:11px; padding:0; }
.escala-360{ display:flex; flex-wrap:wrap; gap:7px; }
.op-360{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1.5px solid var(--borde-control); border-radius:var(--radio); padding:9px 13px;
  font-size:.85rem; background:var(--superficie); color:var(--texto); min-height:42px;
  transition:border-color .12s ease, background .12s ease;
}
.op-360:hover{ border-color:var(--borde-hover); }
.op-360 input{ width:16px; height:16px; accent-color:var(--primario); }
.op-360:has(input:checked){ border-color:var(--primario); background:var(--seleccion); }
.op-nd{ background:var(--superficie-2); color:var(--texto-3); }
.op-nd:has(input:checked){ border-color:var(--texto-3); background:var(--borde); }

.cita{
  margin:0 0 11px; padding:11px 15px; background:var(--superficie-2);
  border-left:3px solid var(--realce); border-radius:0 var(--radio) var(--radio) 0;
  font-size:.9rem; line-height:1.55;
}

/* ── Organigrama y carrera: piezas sueltas ──────────────────────────────────
   (la vista del organigrama está en «Organigrama», más abajo). */
.titulo-area{ font-size:.82rem; color:var(--texto-2); margin:0 0 11px; font-weight:600; }
.titulo-area .min{ color:var(--texto-tenue); font-weight:500; }
.pt{ width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; }
.pt-1{ background:var(--nivel-1); } .pt-2{ background:var(--nivel-2); }
.pt-3{ background:var(--nivel-3); }  .pt-4{ background:var(--nivel-4); }
.pt-5{ background:var(--nivel-5); }  .pt-6{ background:var(--nivel-6); }
.sin-perfil{ color:var(--aviso); font-weight:600; }

.escalera{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:6px; }
.peldano{
  display:inline-flex; align-items:center; gap:7px; background:var(--superficie-2);
  border:1px solid var(--borde); border-radius:99px; padding:6px 13px;
  font-size:.84rem; font-weight:500;
}
.peldano-nivel{ background:var(--primario); color:var(--sobre-primario); border-radius:99px; padding:1px 7px; font-size:.71rem; font-weight:700; }
.flecha{ color:var(--texto-tenue); font-weight:700; }

.plan{ border-left:3px solid var(--realce); padding:2px 0 2px 15px; margin-bottom:18px; }
.plan:last-of-type{ margin-bottom:0; }

.detalle-opcional{
  border:1px solid var(--borde); border-radius:var(--radio); padding:13px 16px;
  margin-bottom:18px; background:var(--superficie-2);
}
.detalle-opcional summary{ cursor:pointer; font-weight:600; font-size:.88rem; color:var(--texto); }
.detalle-opcional[open] summary{ margin-bottom:10px; }

.enlace-copiar{
  display:flex; gap:8px; align-items:center; background:var(--superficie-2);
  border:1px solid var(--borde); border-radius:var(--radio); padding:9px 11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; word-break:break-all;
}

.franja-alcance{
  background:var(--info-tinte); border:1px solid var(--info-borde); color:var(--info);
  font-size:.85rem; padding:11px 16px; border-radius:var(--radio); margin-bottom:22px;
}

/* ── Utilidades ─────────────────────────────────────────────────────────── */
/* Existen porque la política de contenido prohíbe los style= en el HTML: un
   atributo bloqueado no avisa, solo deja la página mal maquetada. */
.m-0{ margin:0; } .mt-10{ margin:10px 0 0; } .mt-14{ margin-top:14px; }
.mt-16{ margin:16px 0 0; } .mt-18{ margin-top:18px; } .mt-20{ margin-top:20px; } .mt-22{ margin-top:22px; }
.mb-12{ margin-bottom:12px; } .mb-14{ margin-bottom:14px; } .mb-18{ margin-bottom:18px; }
.mb-20{ margin-bottom:20px; } .mb-22{ margin-bottom:22px; } .mb-26{ margin-bottom:26px; }
.ancho-total{ width:100%; } .centrar-texto{ text-align:center; } .en-linea{ display:inline; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ── Teléfono ───────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .cuerpo-panel{ margin-left:0; padding:20px 16px 60px; }
  .scroll-x{ margin:0 -18px; padding:0 18px; }
  .tarjeta{ padding:18px; }
  h1{ font-size:1.4rem; }
  .escala-360{ flex-direction:column; }
  .op-360{ width:100%; }
}

/* Rejilla de columnas anchas: para selectores cuyo texto es largo (nombres de
   batería y de puesto). Una rejilla de mínimo 230px los corta a la mitad. */
.rejilla-ancha{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
@media (max-width:860px){ .rejilla-ancha{ grid-template-columns:1fr; } }

/* Anchos y posiciones para la línea de medida. Generadas porque la política
   de contenido prohíbe calcular el ancho con un style= en el HTML. */
.a0{width:0%}.a1{width:1%}.a2{width:2%}.a3{width:3%}.a4{width:4%}.a5{width:5%}.a6{width:6%}.a7{width:7%}.a8{width:8%}.a9{width:9%}.a10{width:10%}.a11{width:11%}.a12{width:12%}.a13{width:13%}.a14{width:14%}.a15{width:15%}.a16{width:16%}.a17{width:17%}.a18{width:18%}.a19{width:19%}.a20{width:20%}.a21{width:21%}.a22{width:22%}.a23{width:23%}.a24{width:24%}.a25{width:25%}.a26{width:26%}.a27{width:27%}.a28{width:28%}.a29{width:29%}.a30{width:30%}.a31{width:31%}.a32{width:32%}.a33{width:33%}.a34{width:34%}.a35{width:35%}.a36{width:36%}.a37{width:37%}.a38{width:38%}.a39{width:39%}.a40{width:40%}.a41{width:41%}.a42{width:42%}.a43{width:43%}.a44{width:44%}.a45{width:45%}.a46{width:46%}.a47{width:47%}.a48{width:48%}.a49{width:49%}.a50{width:50%}.a51{width:51%}.a52{width:52%}.a53{width:53%}.a54{width:54%}.a55{width:55%}.a56{width:56%}.a57{width:57%}.a58{width:58%}.a59{width:59%}.a60{width:60%}.a61{width:61%}.a62{width:62%}.a63{width:63%}.a64{width:64%}.a65{width:65%}.a66{width:66%}.a67{width:67%}.a68{width:68%}.a69{width:69%}.a70{width:70%}.a71{width:71%}.a72{width:72%}.a73{width:73%}.a74{width:74%}.a75{width:75%}.a76{width:76%}.a77{width:77%}.a78{width:78%}.a79{width:79%}.a80{width:80%}.a81{width:81%}.a82{width:82%}.a83{width:83%}.a84{width:84%}.a85{width:85%}.a86{width:86%}.a87{width:87%}.a88{width:88%}.a89{width:89%}.a90{width:90%}.a91{width:91%}.a92{width:92%}.a93{width:93%}.a94{width:94%}.a95{width:95%}.a96{width:96%}.a97{width:97%}.a98{width:98%}.a99{width:99%}.a100{width:100%}

.x0{left:0%}.x1{left:1%}.x2{left:2%}.x3{left:3%}.x4{left:4%}.x5{left:5%}.x6{left:6%}.x7{left:7%}.x8{left:8%}.x9{left:9%}.x10{left:10%}.x11{left:11%}.x12{left:12%}.x13{left:13%}.x14{left:14%}.x15{left:15%}.x16{left:16%}.x17{left:17%}.x18{left:18%}.x19{left:19%}.x20{left:20%}.x21{left:21%}.x22{left:22%}.x23{left:23%}.x24{left:24%}.x25{left:25%}.x26{left:26%}.x27{left:27%}.x28{left:28%}.x29{left:29%}.x30{left:30%}.x31{left:31%}.x32{left:32%}.x33{left:33%}.x34{left:34%}.x35{left:35%}.x36{left:36%}.x37{left:37%}.x38{left:38%}.x39{left:39%}.x40{left:40%}.x41{left:41%}.x42{left:42%}.x43{left:43%}.x44{left:44%}.x45{left:45%}.x46{left:46%}.x47{left:47%}.x48{left:48%}.x49{left:49%}.x50{left:50%}.x51{left:51%}.x52{left:52%}.x53{left:53%}.x54{left:54%}.x55{left:55%}.x56{left:56%}.x57{left:57%}.x58{left:58%}.x59{left:59%}.x60{left:60%}.x61{left:61%}.x62{left:62%}.x63{left:63%}.x64{left:64%}.x65{left:65%}.x66{left:66%}.x67{left:67%}.x68{left:68%}.x69{left:69%}.x70{left:70%}.x71{left:71%}.x72{left:72%}.x73{left:73%}.x74{left:74%}.x75{left:75%}.x76{left:76%}.x77{left:77%}.x78{left:78%}.x79{left:79%}.x80{left:80%}.x81{left:81%}.x82{left:82%}.x83{left:83%}.x84{left:84%}.x85{left:85%}.x86{left:86%}.x87{left:87%}.x88{left:88%}.x89{left:89%}.x90{left:90%}.x91{left:91%}.x92{left:92%}.x93{left:93%}.x94{left:94%}.x95{left:95%}.x96{left:96%}.x97{left:97%}.x98{left:98%}.x99{left:99%}.x100{left:100%}

/* Resultado de una prueba: la barra, su banda y el detalle en una sola línea. */
.resultado-linea{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.resultado-linea .medida{ min-width:200px; flex:0 1 240px; }

/* ── Encabezado de pantalla ─────────────────────────────────────────────────
   Título a la izquierda, acciones a la derecha, y en móvil una debajo de otra.
   Antes cada vista resolvía esto a su manera y ninguna coincidía con otra. */
.encabezado-pantalla{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.encabezado-pantalla h1{ margin:0 0 4px; }
.acciones-pantalla{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.migaja{ margin:0 0 6px; font-size:13px; color:var(--texto-3); }
.migaja a{ color:var(--texto-3); }
/* El número de filas junto al título («Personas 128»). */
.titulo-cuenta{ margin-left:4px; font-size:.95rem; font-weight:600; color:var(--texto-3); vertical-align:middle; }
/* «Cómo funciona» plegado bajo el subtítulo de una línea (D14). */
.como-funciona{ margin-top:6px; font-size:.84rem; color:var(--texto-3); max-width:72ch; }
.como-funciona > summary{ cursor:pointer; width:max-content; font-weight:600; color:var(--enlace); }
.como-funciona > summary:hover{ color:var(--enlace-hover); }
.como-funciona > p{ margin:6px 0 0; line-height:1.5; }
@media (pointer:coarse){ .como-funciona > summary{ padding:10px 0; } }

/* ── Plegable con lista acotada (Sistema › historial de migraciones) ──────
   Una lista larga que casi nunca se consulta va plegada, con buscador y un
   alto máximo: la pantalla no se vuelve un desplazamiento interminable. */
.plegable > summary{ cursor:pointer; width:max-content; font-weight:600; color:var(--enlace); }
.plegable > summary:hover{ color:var(--enlace-hover); }
@media (pointer:coarse){ .plegable > summary{ padding:10px 0; } }
.lista-acotada{ max-height:min(22rem, 60vh); overflow:auto; margin-top:10px;
  border:1px solid var(--borde); border-radius:var(--radio); }
.lista-acotada table.datos{ margin:0; }
.lista-acotada thead th{ position:sticky; top:0; background:var(--superficie); z-index:1; }

/* ── Cifras de cabecera ─────────────────────────────────────────────────────
   No son tarjetas: son una regleta de números separados por una línea fina.
   Cuatro cajas con sombra compiten entre sí; cuatro números en fila se leen. */
.cifras{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio-grande);
  overflow:hidden;
}
.cifra-bloque{ padding:18px 20px; border-left:1px solid var(--borde); }
.cifra-bloque:first-child{ border-left:0; }
.cifra-n{ margin:0; font-size:34px; font-weight:700; line-height:1.05; letter-spacing:-.02em; color:var(--acento); }
.cifra-et{ margin:2px 0 6px; font-size:13px; font-weight:600; color:var(--texto-2); }

/* ── Indicador: una fila de instrumento, no una tarjeta ─────────────────── */
.indicadores{ display:flex; flex-direction:column; }
.indicador{
  display:grid; gap:4px 20px; padding:16px 0;
  grid-template-columns:minmax(200px, 1.4fr) minmax(240px, 1.6fr) minmax(150px, .9fr);
  border-top:1px solid var(--borde);
}
.indicador:first-child{ border-top:0; padding-top:4px; }
.indicador h3{ margin:0 0 2px; font-size:15px; }
.indicador-medida{ align-self:center; }
.indicador-contexto{ align-self:center; }
.indicador-lectura{ grid-column:1 / -1; margin:2px 0 0; color:var(--texto-3); }

/* ── Gráficos ───────────────────────────────────────────────────────────── */
.grafico svg{ display:block; width:100%; height:auto; }
.grafico-bala svg{ max-width:320px; }
.grafico-linea, .grafico-barras, .grafico-cinta, .grafico-dispersion{ margin:6px 0 10px; }
.rejilla-graficos{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); }

/* Los números detrás del gráfico. Cerrados por defecto para no doblar la
   página, pero siempre presentes: un gráfico no se copia a un correo. */
.detalle-datos{ margin-top:10px; border-top:1px dashed var(--borde); padding-top:8px; }
.detalle-datos summary{ cursor:pointer; color:var(--enlace); }
.detalle-datos summary:hover{ color:var(--enlace-hover); }
.datos.compacta th, .datos.compacta td{ padding:5px 8px; font-size:13px; }

/* ── Gráficos: el color por token ───────────────────────────────────────────
   src/grafico.php deja el color como atributo (lo que ve la impresión) y añade
   una clase por color; aquí la clase lo cambia por su token, que el tema
   oscuro redefine. Una regla CSS gana a un atributo de presentación. */
.grafico .gf-navy{ fill:var(--g-navy); }     .grafico .gs-navy{ stroke:var(--g-navy); }
.grafico .gf-navy2{ fill:var(--g-navy2); }   .grafico .gs-navy2{ stroke:var(--g-navy2); }
.grafico .gf-cian{ fill:var(--g-cian); }     .grafico .gs-cian{ stroke:var(--g-cian); }
.grafico .gf-cian2{ fill:var(--g-cian2); }   .grafico .gs-cian2{ stroke:var(--g-cian2); }
.grafico .gf-naranja{ fill:var(--g-naranja); } .grafico .gs-naranja{ stroke:var(--g-naranja); }
.grafico .gf-ok{ fill:var(--g-ok); }         .grafico .gs-ok{ stroke:var(--g-ok); }
.grafico .gf-aviso{ fill:var(--g-aviso); }   .grafico .gs-aviso{ stroke:var(--g-aviso); }
.grafico .gf-alerta{ fill:var(--g-alerta); } .grafico .gs-alerta{ stroke:var(--g-alerta); }
.grafico .gf-linea{ fill:var(--g-linea); }   .grafico .gs-linea{ stroke:var(--g-linea); }
.grafico .gf-tenue{ fill:var(--g-tenue); }   .grafico .gs-tenue{ stroke:var(--g-tenue); }
.grafico .gf-tinta{ fill:var(--g-tinta); }   .grafico .gs-tinta{ stroke:var(--g-tinta); }
.grafico .gf-sobre{ fill:var(--g-sobre); }   .grafico .gs-sobre{ stroke:var(--g-sobre); }

/* ── Objetivos ──────────────────────────────────────────────────────────── */
.objetivo-cabeza{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.objetivo-avance{ text-align:right; min-width:110px; }
.objetivo-avance .cifra-n{ font-size:28px; }
.tabla-kr td{ vertical-align:top; }
.tabla-kr .medida{ min-width:130px; }
.formulario-kr{
  display:grid; gap:12px 16px; align-items:end; margin:12px 0;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.formulario-kr .ancho-total{ grid-column:1 / -1; }
.fila-controles{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.barra-acciones{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }

/* ── Tabla de metas ─────────────────────────────────────────────────────── */
.tabla-metas td{ vertical-align:top; }
.col-angosta{ width:104px; }
.entrada-num{ width:100%; max-width:96px; }
.bloque{ display:block; }
.interruptor{ display:flex; align-items:center; gap:6px; }
.mt-6{ margin-top:6px; }

.formulario-kr .doble{ grid-column:span 2; }
.barra-separada{ border-top:1px solid var(--borde); padding-top:12px; }
.empuja-derecha{ margin-left:auto; }
@media (max-width:760px){
  .indicador{ grid-template-columns:1fr; }
  .cifra-bloque{ border-left:0; border-top:1px solid var(--borde); }
  .cifra-bloque:first-child{ border-top:0; }
  .formulario-kr .doble{ grid-column:span 1; }
}
.tabla-resumen td{ vertical-align:top; }
.tabla-resumen .fila-elegida{ background:var(--seleccion); }
.tabla-resumen .fila-elegida td:first-child{ box-shadow:inset 3px 0 0 var(--enlace); }

/* ── Tablas anchas en un teléfono ───────────────────────────────────────────
   Una tabla de seis columnas no cabe en 390px. Antes desbordaba la PÁGINA
   entera, así que la barra horizontal del navegador escondía justo la columna
   de la derecha, que es donde están las cifras.

   El desplazamiento se pone en la tarjeta, no en la tabla: convertir la tabla
   en `display:block` la desarma como tabla para algunos lectores de pantalla,
   que dejan de anunciar «columna 3 de 5». Así sigue siendo una tabla y solo
   se desplaza el contenedor. panel.js le añade el foco de teclado a las que de
   verdad se desbordan, porque una región que se desplaza y no se alcanza con
   el tabulador no es alcanzable sin ratón. */
@media (max-width:760px){
  .tarjeta{ overflow-x:auto; }
  .tarjeta > table, .tarjeta > .detalle-datos > table{ min-width:100%; }
}
.tarjeta[tabindex]:focus-visible{ outline:2px solid var(--foco); outline-offset:2px; }

/* ── Avance de un resultado clave ───────────────────────────────────────────
   Deliberadamente distinto de `.medida`: aquí no hay aprobado ni suspenso,
   hay camino recorrido. El color solo cambia al acercarse al final. */
.avance{ display:flex; align-items:center; gap:9px; min-width:120px; }
.avance-pista{ position:relative; flex:1 1 auto; height:8px; border-radius:4px;
               background:var(--borde); overflow:hidden; }
.avance-valor{ position:absolute; inset:0 auto 0 0; border-radius:4px; background:var(--avance); }
.avance.cerca .avance-valor{ background:var(--avance-cerca); }
.avance.logrado .avance-valor{ background:var(--ok); }
.avance-cifra{ font-size:13px; font-weight:600; color:var(--texto); min-width:38px; text-align:right; }
.avance.logrado .avance-cifra{ color:var(--ok); }

/* ── Escalera de niveles ────────────────────────────────────────────────────
   Se pintan los TRES peldaños, también los no alcanzados: ver que quedan dos
   por subir es la mitad de la información. Enseñar solo el nivel logrado
   convierte un diagnóstico en una etiqueta.

   Ojo con el nombre: `.peldano-nivel` YA EXISTE como píldora en el organigrama
   y en la escalera de carrera. Llamar igual a dos cosas distintas no da error,
   solo deja tres pantallas rotas que nadie mira. */
.escalera-niveles{ display:flex; flex-direction:column; gap:5px; margin:10px 0 4px; max-width:430px; }
.nivel-fila{ display:grid; grid-template-columns:104px 1fr 42px 16px; align-items:center; gap:9px; }
.nivel-et{ font-size:12px; font-weight:600; color:var(--texto-2); }
.nivel-pista{ position:relative; height:8px; border-radius:4px; background:var(--borde); overflow:hidden; }
.nivel-valor{ position:absolute; inset:0 auto 0 0; border-radius:4px; background:var(--texto-tenue); }
.nivel-corte{ position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--texto); }
.nivel-fila.supera .nivel-valor{ background:var(--ok); }
.nivel-fila.salto  .nivel-valor{ background:var(--aviso); }
.nivel-cifra{ font-size:12px; color:var(--texto-3); text-align:right; }
.nivel-marca{ font-size:13px; color:var(--texto-tenue); text-align:center; }
.nivel-fila.supera .nivel-marca{ color:var(--ok); font-weight:700; }
.nivel-fila.salto  .nivel-marca{ color:var(--aviso); font-weight:700; }
.nivel-par{ display:flex; flex-direction:column; gap:1px; }
.baremo-linea{ margin:6px 0 0; color:var(--texto-3); }

/* ── Buscar, filtrar y paginar ─────────────────────────────────────────────── */
.filtros{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:6px 0 16px;
          padding-bottom:14px; border-bottom:1px solid var(--borde); }
.filtros .crece{ flex:1 1 220px; }
.filtros input, .filtros select{ margin:0; }
/* Los filtros de uso raro, en «Más filtros», que al abrirse baja a su fila. */
.mas-filtros > summary{ list-style:none; cursor:pointer; }
.mas-filtros > summary::-webkit-details-marker{ display:none; }
.mas-filtros[open]{ flex-basis:100%; }
.mas-filtros-cuerpo{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:12px; }
.mas-filtros-cuerpo select{ max-width:16rem; }
.paginacion{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px;
             padding-top:12px; border-top:1px solid var(--borde); }
.paginacion span.min{ margin-right:auto; }
.paginacion a, .paginacion .pagina-actual{
  min-width:32px; padding:5px 9px; text-align:center; border-radius:7px;
  border:1px solid var(--borde); text-decoration:none; font-size:.86rem;
}
.paginacion a:hover{ border-color:var(--borde-hover); }
/* repite a propósito: la base es la de los enlaces; aquí, solo la página actual. */
.paginacion .pagina-actual{ background:var(--primario); color:var(--sobre-primario); border-color:var(--primario); font-weight:600; }
.campo-ancho{ grid-column:1 / -1; }
/* Casillas. Van aquí y no con los formularios de arriba porque tienen que
   ganarle a las utilidades de margen (.casillas.mt-10) y quedar antes del
   bloque táctil, que las agranda a 22 px. */
.casillas{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:4px 0 8px; }
.casilla{ display:flex; align-items:center; gap:6px; font-size:.88rem; font-weight:500; cursor:pointer; }
.casilla input{ width:17px; height:17px; accent-color:var(--primario); }

/* ── Descriptivo de puesto ──────────────────────────────────────────────────
   Cada sección lleva su pregunta y su ayuda a la vista: pedir
   «Responsabilidades» a secas produce tres líneas genéricas que no sirven ni
   para contratar ni para evaluar. */
.formulario-dpt{ display:flex; flex-direction:column; gap:16px; margin-top:14px; }
.seccion-dpt{ border:1px solid var(--borde); border-left:3px solid var(--borde-fuerte);
              border-radius:var(--radio); padding:12px 16px 14px; margin:0; }
.seccion-dpt.hecha{ border-left-color:var(--ok); }
.seccion-dpt.pendiente{ border-left-color:var(--aviso); background:var(--superficie-2); }
.seccion-dpt legend{ font-weight:700; font-size:.95rem; padding:0 6px; display:flex; align-items:center; gap:7px; }
.seccion-dpt label{ display:block; margin-bottom:2px; }   /* letra: sistema .form, abajo */
.seccion-dpt textarea{ width:100%; }
.marca-seccion{ display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center;
                border-radius:50%; font-size:.72rem; font-weight:700; }
.seccion-dpt.hecha .marca-seccion{ background:var(--ok-tinte); color:var(--ok); }
.seccion-dpt.pendiente .marca-seccion{ background:var(--aviso-tinte); color:var(--aviso); }
.ayuda-dpt{ margin:0 0 8px; color:var(--texto-3); }
.respeta-saltos{ white-space:pre-wrap; }
.lista-avisos{ margin:6px 0 0; padding-left:20px; }
.lista-avisos li{ margin-bottom:4px; }
.propuesta{ border-top:1px solid var(--borde); padding:16px 0; }
.propuesta:first-of-type{ border-top:0; }
.crece{ flex:1 1 auto; }

/* ── Organigrama ────────────────────────────────────────────────────────────
   Una fila por posición en vez de una tarjeta con su tabla desplegada. La
   pantalla pasó de 11.627 píxeles a caber en dos pantallas: el detalle de cada
   puesto vive en su ficha, y repetirlo aquí obligaba a recorrer la página
   entera para encontrar uno. */
.fila-puesto{
  display:grid; grid-template-columns:10px minmax(0,1fr) 92px auto; align-items:center;
  gap:12px; padding:9px 12px; border:1px solid var(--borde); border-radius:var(--radio);
  margin-bottom:6px; text-decoration:none; color:inherit; background:var(--superficie);
  transition:border-color .12s, box-shadow .12s;
}
.fila-puesto:hover{ border-color:var(--borde-hover); box-shadow:var(--sombra-accion); }
.fp-nombre{ font-weight:600; font-size:.92rem; line-height:1.3; }
.fp-nombre .min{ display:block; font-weight:500; }
.fp-gente{ text-align:right; white-space:nowrap; }
.fp-marcas{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }

.arbol{ list-style:none; margin:0; padding:0; }
.arbol ul{ list-style:none; margin:0 0 0 18px; padding:0 0 0 16px; border-left:1px solid var(--borde); }
.arbol li{ position:relative; }
.arbol ul > li::before{
  content:""; position:absolute; left:-16px; top:22px; width:12px; height:1px; background:var(--borde);
}
.arbol .atenuado > .fila-puesto{ opacity:.45; }

.rejilla-areas{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); }
.grupo-area .titulo-area{ margin:0 0 8px; }

.conmutador{ display:inline-flex; border:1px solid var(--borde); border-radius:99px; overflow:hidden; }
.conmutador a{ padding:5px 14px; font-size:.84rem; font-weight:600; text-decoration:none;
               color:var(--texto-2); }
.conmutador a:hover{ background:var(--superficie-2); }
.conmutador a.activo{ background:var(--primario); color:var(--sobre-primario); }

/* Bloques secundarios plegados: ocupan una línea hasta que hacen falta. */
.detalle-bloque > summary{ cursor:pointer; font-size:1.02rem; }
.detalle-bloque > summary:hover{ color:var(--enlace); }
.lista-cruces{ list-style:none; margin:10px 0 0; padding:0; }
.lista-cruces li{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
                  padding:7px 0; border-top:1px solid var(--borde); font-size:.9rem; }
.lista-cruces .flecha{ color:var(--texto-tenue); }

@media (max-width:760px){
  .fila-puesto{ grid-template-columns:10px minmax(0,1fr); }
  .fp-gente, .fp-marcas{ grid-column:2; justify-content:flex-start; text-align:left; }
}
/* El título de área es un h2 por jerarquía, no por tamaño: colgarlo como h3 de
   un h1 deja un hueco que el lector de pantalla anuncia como tal. */
h2.titulo-area{ font-size:.82rem; font-weight:700; text-transform:none; letter-spacing:0; }
/* La validación comparte el aspecto de una sección pero no es una: es quién
   firma el documento, no parte de la descripción del puesto. */
.bloque-validacion{
  border:1px solid var(--borde); border-left:3px solid var(--enlace);
  border-radius:var(--radio); padding:12px 16px 14px; margin:0; background:var(--superficie-2);
}
.bloque-validacion legend{ font-weight:700; font-size:.95rem; padding:0 6px; }

/* ── Selección en bloque del listado de personas ────────────────────────── */
/* La barra aparece pegada arriba al marcar a alguien: si se fuera con el
   desplazamiento, al llegar al final de una lista larga habría que subir otra
   vez para actuar sobre lo que se acaba de marcar. */
.barra-seleccion{ position:sticky; top:0; z-index:5; display:flex; flex-direction:column; gap:10px;
                  margin-bottom:12px; padding:12px 14px; border-radius:10px;
                  background:var(--seleccion-solida); border:1px solid var(--borde-fuerte); }
.acciones-bloque{ display:flex; flex-wrap:wrap; gap:8px; }
.acciones-bloque > details{ position:relative; }
.acciones-bloque > details > summary{ list-style:none; cursor:pointer; display:inline-block; }
.acciones-bloque > details > summary::-webkit-details-marker{ display:none; }
.caja-accion{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px;
              margin-top:8px; padding:12px; border-radius:10px;
              background:var(--superficie); border:1px solid var(--borde); }
.caja-accion > p{ flex:1 1 100%; }
.caja-accion label.doble{ flex:1 1 240px; }
.desplegable-accion{ display:inline-block; vertical-align:top; }
.desplegable-accion > summary{ list-style:none; cursor:pointer; display:inline-block; }
.desplegable-accion > summary::-webkit-details-marker{ display:none; }
.desplegable-accion[open] > .caja-accion{ min-width:260px; }
.col-marca{ width:34px; }
.col-marca input{ width:20px; height:20px; }
/* Un botón que se comporta como enlace: hace falta que sea <button> porque
   ejecuta una acción, no navega. */
.btn-enlace{ background:none; border:0; padding:0; font:inherit; color:var(--enlace);
             text-decoration:underline; cursor:pointer; }

@media (max-width: 640px) {
  .barra-seleccion{ position:static; }
  .acciones-bloque > details{ flex:1 1 100%; }
  .acciones-bloque > details > summary{ width:100%; text-align:center; }
}

/* ── Autoservicio (/yo) ─────────────────────────────────────────────────── */
/* Barra arriba y no lateral: se entra desde el teléfono y a una sola cosa. */
.yo-barra{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--lateral-fondo); color:var(--lateral-texto-fuerte); padding:10px 24px;
  border-bottom:1px solid var(--lateral-borde);
}
.yo-marca{ display:flex; align-items:center; gap:9px; color:var(--lateral-texto-fuerte); text-decoration:none; }
.yo-marca b{ display:block; font-size:.95rem; font-weight:700; }
.yo-marca span span{ display:block; font-size:.72rem; color:var(--lateral-acento); }
/* Cuatro destinos y «Más», en una sola lista para los dos tamaños (ver
   yo/_cabecera.php): arriba en el escritorio, abajo en el teléfono. */
.yo-nav{ display:flex; gap:2px; flex:1; align-items:center; min-width:0; }
.yo-nav a, .yo-mas > summary{
  display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:8px;
  color:var(--lateral-texto); text-decoration:none; font-size:.88rem; font-weight:500; white-space:nowrap;
}
.yo-nav .ico{ width:17px; height:17px; }
.yo-nav a:hover, .yo-mas > summary:hover{ background:var(--lateral-hover); color:var(--lateral-texto-fuerte); }
.yo-nav a.activo, .yo-mas > summary.activo{
  background:var(--lateral-activo-fondo); color:var(--lateral-activo-texto); font-weight:600;
}
.yo-mas{ position:relative; }
/* repite a propósito: «Más» se pinta como los enlaces de la barra (arriba);
   aquí, lo que lo hace un <summary> sin triángulo. */
.yo-mas > summary{ list-style:none; cursor:pointer; }
.yo-mas > summary::-webkit-details-marker{ display:none; }
.yo-mas-hoja{
  position:absolute; top:calc(100% + 8px); left:0; z-index:30; min-width:250px;
  display:flex; flex-direction:column; gap:1px; padding:6px;
  background:var(--superficie); border:1px solid var(--borde-fuerte);
  border-radius:var(--radio); box-shadow:var(--sombra-flotante);
}
.yo-nav .yo-mas-hoja a{ color:var(--texto); }
.yo-nav .yo-mas-hoja a .ico{ color:var(--texto-3); }
.yo-nav .yo-mas-hoja a:hover{ background:var(--superficie-2); color:var(--texto); }
.yo-nav .yo-mas-hoja a.activo{ background:var(--seleccion); color:var(--texto); box-shadow:inset 2px 0 0 var(--primario); }
.yo-cuerpo{ max-width:980px; margin:0 auto; padding:28px 24px 40px; }
.yo-pie{ max-width:980px; margin:0 auto; padding:0 24px 40px; }
.yo-rejilla{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; }
.yo-dos{ display:grid; gap:0 14px; grid-template-columns:1fr 1fr; }
.yo-cifra{ margin:0 0 6px; font-size:1rem; color:var(--texto-2); }
.yo-cifra b{ font-size:2rem; font-weight:700; color:var(--acento); letter-spacing:-.02em; margin-right:4px; }
.yo-lista{ list-style:none; margin:0 0 14px; padding:0; }
.yo-lista > li{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0; border-top:1px solid var(--borde);
}
.yo-lista > li:first-child{ border-top:0; }
/* overflow-wrap: una nota escrita sin espacios ensanchaba el bloque y cortaba
   el nombre y las fechas en el teléfono. */
.yo-lista > li > div{ display:flex; flex-direction:column; gap:2px; min-width:0; overflow-wrap:anywhere; }
.yo-lista-compacta > li{ padding:8px 0; font-size:.9rem; }
.yo-doc{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.yo-ficha{ display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:8px 16px; margin:0; }
.yo-ficha dt{ color:var(--texto-3); font-size:.86rem; }
.yo-ficha dd{ margin:0; font-weight:500; overflow-wrap:anywhere; }
.yo-lista > li > .yo-acciones{ flex-direction:row; align-items:center; gap:10px; flex:none; }
.d-block{ display:block; }
/* Marcaje desde el celular: botones grandes, al alcance del pulgar. */
.marcaje-form{ margin:14px 0 6px; }
.marcaje-botones{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.marcaje-boton{ min-height:56px; min-width:180px; font-size:1.05rem; font-weight:700; justify-content:center; }
@media (max-width:640px){ .marcaje-botones{ flex-direction:column; } .marcaje-boton{ width:100%; } }
@media (max-width:640px){
  .yo-barra{ padding:10px 16px; gap:10px; }
  .yo-marca span{ display:none; }
  .yo-salir{ margin-left:auto; }
  .yo-cuerpo{ padding:20px 16px 32px; }
  .yo-pie{ padding:0 16px 32px; }
  .yo-dos{ grid-template-columns:1fr; }
  .yo-lista > li{ flex-direction:column; align-items:flex-start; }
  .yo-ficha{ grid-template-columns:1fr; gap:2px; }
  .yo-ficha dd{ margin-bottom:8px; }
}

/* ── Ingreso y salida ───────────────────────────────────────────────────── */
.lista-simple{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.lista-simple li{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.acciones-fila{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
/* Pendientes que no son tabla (constancias por emitir): el texto a la
   izquierda y sus botones a la derecha; en el teléfono, los botones debajo. */
.lista-pendientes{ list-style:none; margin:0; padding:0; }
.lista-pendientes > li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; align-items:center;
  padding:12px 0; border-top:1px solid var(--borde);
}
.lista-pendientes > li:first-child{ border-top:0; padding-top:2px; }
.lista-pendientes-que{ min-width:0; overflow-wrap:anywhere; }
.lista-pendientes-acciones{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.lista-tareas{ list-style:none; margin:0 0 14px; padding:0; }
.tarea{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:14px 0; border-top:1px solid var(--borde); }
.tarea:first-child{ border-top:0; }
.tarea-cuerpo{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.tarea-acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:none; }
.tarea-hecha .tarea-cuerpo b, .tarea-no_aplica .tarea-cuerpo b{ color:var(--texto-3); font-weight:500; }
.tarea-vencida{ box-shadow:inset 3px 0 0 var(--alerta); padding-left:12px; }
.norma{ font-style:italic; }
@media (max-width:640px){
  .tarea{ flex-direction:column; }
  .tarea-acciones{ justify-content:flex-start; }
  .lista-pendientes > li{ grid-template-columns:minmax(0,1fr); }
  .lista-pendientes-acciones{ justify-content:flex-start; }
}

/* ── Canal de denuncias ─────────────────────────────────────────────────── */
.lista-puntos{ margin:0 0 12px; padding-left:20px; display:grid; gap:8px; }
.den-clave code{ font-size:1.15rem; font-weight:700; letter-spacing:.06em; color:var(--acento); user-select:all; }
.mensaje-interno{ background:var(--aviso-tinte); padding-left:12px !important; padding-right:12px !important; border-radius:8px; }

/* ── Constancia DC-3 (impresión) ────────────────────────────────────────── */
body.dc3{ background:var(--superficie); }
.dc3-hoja{ max-width:760px; margin:0 auto; padding:28px 20px; }
.dc3-hoja h1{ font-size:1.25rem; }
.dc3-hoja h2{ font-size:.95rem; margin-top:18px; background:var(--primario); color:var(--sobre-primario); padding:5px 8px; }
.dc3-tabla{ width:100%; border-collapse:collapse; font-size:.88rem; }
.dc3-tabla :is(th, td){ border:1px solid var(--borde-fuerte); padding:7px 8px; text-align:left; vertical-align:top; }
.dc3-tabla th{ width:44%; font-weight:600; color:var(--texto-2); background:var(--superficie-2); }
.dc3-firmas{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:54px; font-size:.82rem; color:var(--texto-2); }
.dc3-firmas div{ border-top:1px solid var(--texto); padding-top:6px; }
.dc3-firmas span{ display:block; color:var(--texto); font-weight:600; }
.texto-suave td{ color:var(--texto-tenue); }
@media print{ .no-imprimir{ display:none !important; } .dc3-hoja{ padding:0; } }
.oculto{ display:none; }
table.datos tr:has(+ tr.fila-detalle) > td{ border-bottom:0; }
table.datos tr.fila-detalle > td{ padding-top:0; }
table.datos tr.fila-detalle details p{ max-width:80ch; }
/* Empleos y reclutamiento */
.texto-largo{ line-height:1.6; }
.texto-largo h2{ margin-top:18px; }
.texto-largo h2:first-child{ margin-top:0; }
.lista-vacantes{ list-style:none; margin:0; padding:0; }
.embudo{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px; margin:0 0 14px; padding:0; list-style:none; }
.embudo li{ border:1px solid var(--borde); border-radius:8px; padding:10px 12px; background:var(--superficie); }
.embudo strong{ display:block; font-size:1.35rem; }
.criterio-fila{ display:grid; grid-template-columns:minmax(0, 2fr) 110px minmax(0, 3fr); gap:8px 12px; align-items:start; padding:8px 0; border-bottom:1px solid var(--borde); }
@media (max-width: 640px){ .criterio-fila{ grid-template-columns:1fr; } }
/* eNPS: 11 opciones en fila también en teléfono (en columna serían 11 renglones). */
.escala-360.escala-11{ flex-direction:row; }
.escala-360.escala-11 .op-360{ width:auto; min-width:52px; justify-content:center; flex:0 0 auto; }
/* Constancia laboral */
.constancia-fecha{ text-align:right; }
.constancia-firma{ margin-top:48px; }

/* ── Pantallas táctiles ─────────────────────────────────────────────────────
   Con el dedo, 44 px de alto para cada control (Apple y WCAG 2.5.5); con el
   ratón la densidad no cambia. Los enlaces sueltos (en una celda, en la miga)
   ganan área con relleno sin mover el diseño: en un elemento en línea el
   relleno vertical no empuja la línea. */
@media (pointer:coarse){
  .btn, .btn-chico, .btn-mini{ min-height:44px; min-width:44px; }
  input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search],
  input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=url],
  select, .select-chico{ min-height:44px; }
  .casilla input, .consentir input, .tabla-forzada input, .op-360 input{ width:22px; height:22px; }
  .casilla, .interruptor{ min-height:44px; }
  label:has(input[type=checkbox]), label:has(input[type=radio]){ min-height:44px; align-content:center; }
  input[type=file]{ min-height:44px; }
  label.en-linea:has(input){ display:inline-flex; align-items:center; gap:6px; min-height:44px; }
  .lateral nav a, .yo-nav a{ min-height:44px; display:flex; align-items:center; }
  .lateral-marca, .yo-marca{ min-height:44px; min-width:44px; }
  .lateral-pie a{ display:inline-flex; flex-direction:column; justify-content:center; min-height:44px; }
  .paginacion a, .paginacion .pagina-actual, .conmutador a{ min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* El enlace suelto junto al título de una tarjeta («Ver el detalle»): no
     está dentro de una frase, así que no tiene la excepción «en línea». */
  .tarjeta-cabeza > a, .barra > a{ min-height:44px; display:inline-flex; align-items:center; }
  details > summary:not(.btn){ padding-block:11px; }
  .tema-conmutador > summary{ min-height:44px; }
  /* Los enlaces de texto sin clase: el relleno agranda el área sin mover nada
     (en línea, el relleno vertical no empuja la línea). Con :where() no pesa
     nada y cualquier componente con su propio relleno manda. */
  :where(a:not([class])), .migaja a, .btn-enlace{ padding-block:12px; }
  /* En una celda, además, 44 px de ancho: «PMO» o «Ver» quedaban en 30.
     El margen negativo devuelve el relleno y la fila no crece. */
  td > a:not([class]){ display:inline-block; min-width:44px; padding-block:12px; margin-block:-12px; }
  /* La casilla de una fila de tabla va sola en su celda: 24 px con aire
     alrededor (la excepción de espaciado de WCAG 2.5.8). */
  .col-marca input{ width:24px; height:24px; }
}

/* Campos a 16 px en el teléfono: con menos, Safari de iOS amplía la página al
   enfocar un campo y la persona tiene que alejarla a mano cada vez. */
@media (pointer:coarse), (max-width:640px){
  input, select, textarea{ font-size:16px; }
}

/* ── Avisos compactos y su pila ─────────────────────────────────────────────
   Los avisos del sistema en la cabecera: una línea cada uno, el más grave a
   la vista y el resto en «N avisos más». Antes cada uno venía en su bloque
   de página y dos dejaban ~100 px de hueco antes del título. */
.nota-compacta{ padding:8px 12px; font-size:.84rem; line-height:1.45; margin:0; }
.nota-compacta form.en-linea{ margin-left:4px; }
.cuerpo-avisos{ padding-bottom:0; }
.cuerpo-avisos + .cuerpo-panel{ padding-top:18px; }
.pila-avisos{ display:flex; flex-direction:column; gap:6px; }
.pila-avisos .franja-alcance{ margin:0; }
.pila-mas > summary{
  cursor:pointer; width:max-content; font-size:.8rem; font-weight:600; color:var(--texto-3);
  padding:2px 0;
}
.pila-mas > summary:hover{ color:var(--enlace); }
.pila-mas[open] > summary{ margin-bottom:6px; }
.pila-mas > .nota + .nota{ margin-top:6px; }

/* ── Diálogo de confirmación ──────────────────────────────────────────────
   Sustituye a window.confirm (panel.js lo crea para cada data-confirmar). */
.dialogo{
  width:min(460px, calc(100vw - 32px)); max-width:none; padding:22px 22px 18px;
  border:1px solid var(--borde-fuerte); border-radius:var(--radio-grande);
  background:var(--superficie); color:var(--texto); box-shadow:var(--sombra-flotante);
}
.dialogo::backdrop{ background:var(--capa, rgba(7,35,60,.48)); }
.dialogo h2{ font-size:1.05rem; margin:0 0 8px; }
.dialogo p{ margin:0 0 20px; color:var(--texto-2); font-size:.92rem; }
.dialogo-acciones{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
@media (max-width:480px){ .dialogo-acciones .btn{ flex:1 1 100%; } .dialogo-acciones{ flex-direction:column-reverse; } }
/* Las altas cortas (5 campos o menos) van en <dialog class="dialogo
   dialogo-form">, abierto desde la cabecera con commandfor/command: es HTML,
   no hace falta JavaScript (panel.js lo emula donde el navegador aún no lo
   tiene). Un diálogo puede vivir dentro de una celda (el «Rechazar» de cada
   fila), así que no hereda la alineación ni el tamaño de letra de la tabla. */
.dialogo-form{
  width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto;
  text-align:start; white-space:normal; font-size:1rem; font-weight:400; line-height:1.5;
}
.dialogo-form > p{ margin:0 0 4px; }
.dialogo-form .form{ margin-bottom:0; }
.dialogo-lista{ border:0; margin:0 0 16px; padding:0; min-width:0; max-height:min(52vh, 420px); overflow:auto; }
.dialogo-lista .lista-simple{ gap:0; }

/* ── Formulario: un solo sistema ────────────────────────────────────────────
   Había cinco maneras de pintar una etiqueta (.campo, .formulario-kr,
   .caja-accion, .bloque-validacion y .filtros, más la del descriptivo de
   puesto). Todas se ven ahora igual: etiqueta arriba en .84rem, control
   debajo a 6 px, ayuda en tenue. .form es la rejilla nueva (12 columnas);
   las clases viejas quedan como alias y no hace falta tocar las vistas. */
.form{
  display:grid; gap:14px 16px; align-items:end; margin:12px 0;
  grid-template-columns:repeat(12, minmax(0, 1fr));
}
.form > *{ grid-column:1 / -1; }
.form > .c-8{ grid-column:span 8; } .form > .c-6{ grid-column:span 6; }
.form > .c-4{ grid-column:span 4; } .form > .c-3{ grid-column:span 3; }
@media (max-width:760px){ .form > [class*="c-"]{ grid-column:1 / -1; } }
.campo > label,
:is(.form, .formulario-kr, .caja-accion, .bloque-validacion, .filtros, .seccion-dpt) label{
  font-size:.84rem; font-weight:600; color:var(--texto-2); line-height:1.4;
}
:is(.form, .formulario-kr, .caja-accion, .bloque-validacion, .filtros) label{
  display:flex; flex-direction:column; gap:6px;
}
.campo-ayuda{ margin:4px 0 0; font-size:.8rem; font-weight:400; color:var(--texto-3); }
.campo-error{ margin:4px 0 0; font-size:.8rem; font-weight:600; color:var(--alerta); }
:is(input, select, textarea)[aria-invalid="true"]{ border-color:var(--alerta); }
.form-acciones{ grid-column:1 / -1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* Casillas (.casillas y .casilla están con los filtros). Dentro de un contenedor
   que apila sus etiquetas (campo arriba, texto abajo) la regla del
   contenedor la ponía encima de su texto (D2): aquí sigue en línea, tenga la
   clase .casilla o vaya directa en su etiqueta sin ella (Clima, «Mandar la
   invitación por correo»). */
:is(.form, .formulario-kr, .caja-accion, .bloque-validacion, .filtros) label.casilla,
:is(.form, .formulario-kr, .caja-accion, .bloque-validacion, .filtros) label:has(> input[type=checkbox], > input[type=radio]){
  flex-direction:row; align-items:center; gap:7px; font-size:.87rem; font-weight:500; color:inherit;
}
.campo label.casilla{ font-size:.87rem; font-weight:500; color:inherit; }
/* Mientras se envía (panel.js): el formulario entero dice que está ocupado. */
form[aria-busy="true"]{ cursor:progress; }
/* Formularios largos en su propia vista, por secciones (ola 6): su título y
   su rejilla (.form). La leyenda flota para que sea una fila más de la
   rejilla y no se monte en el borde, como hace una leyenda normal. */
.form-seccion{ border:0; border-top:1px solid var(--borde); padding:16px 0 0; margin:0 0 18px; min-width:0; }
.form-seccion:first-of-type{ border-top:0; padding-top:0; }
.form-seccion > legend{ float:left; width:100%; padding:0; font-weight:700; font-size:.95rem; color:var(--texto); }
/* Los formularios cortos de una sección, plegados en fila; el que se abre
   toma todo el ancho. */
.acciones-seccion{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.acciones-seccion > details[open]{ flex-basis:100%; }
/* Formulario plegado (invitar, cargar la plantilla): cerrado no ocupa nada;
   lo abren el botón de la cabecera, ?invitar=1 / ?cargar=1 y el ancla (panel.js). */
.plegado-accion:not([open]){ display:none; }
.plegado-accion > summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px; cursor:pointer; list-style:none;
}
.plegado-accion > summary::-webkit-details-marker{ display:none; }
.plegado-accion > summary h2{ margin:0; }
.plegado-accion > summary:focus-visible{ outline:2px solid var(--foco); outline-offset:4px; border-radius:6px; }
.plegado-cerrar{ font-size:.84rem; font-weight:600; color:var(--enlace); }
.plegado-accion > summary:hover .plegado-cerrar{ color:var(--enlace-hover); }

/* ── Panel en el teléfono (≤900 px) ─────────────────────────────────────────
   UNA barra de 56 px, fija arriba: menú, marca y «Salir» (a un toque). Las
   secciones van en un cajón que entra desde la izquierda sobre una capa.
   Sin JavaScript abre con :target (el botón es un enlace a #menu-lateral) y
   cierra con cualquier enlace #cerrar-menu; con JavaScript manda la clase
   .abierto y :target deja de contar (no se puede quitar un :target sin tocar
   el historial). No se copia la doble barra de Growly. */
@media (max-width:900px){
  html{ scroll-padding-top:68px; }
  .lateral{
    position:sticky; top:0; inset:auto; width:auto; height:56px; z-index:30;
    display:flex; align-items:center; gap:4px; padding:0 10px 0 6px;
    border-right:0; border-bottom:1px solid var(--lateral-borde);
  }
  .boton-menu{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; border-radius:10px; color:var(--lateral-texto-fuerte);
  }
  .boton-menu:hover{ background:var(--lateral-hover); color:var(--lateral-texto-fuerte); }
  .boton-menu .ico{ width:22px; height:22px; }
  .lateral-marca{ padding:6px 8px; border-bottom:0; min-height:44px; }
  .lateral-marca img{ height:28px; }
  .lateral-marca span span{ display:none; }
  .lateral-salir{ margin-left:auto; padding:0; border:0; }
  .lateral-cajon{
    display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:50;
    width:min(86vw, 320px); background:var(--lateral-fondo);
    border-right:1px solid var(--lateral-borde); box-shadow:var(--sombra-flotante);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(-102%); visibility:hidden;
    transition:transform .2s ease, visibility 0s linear .2s;
  }
  .lateral:not(.con-js) .lateral-cajon:target, .lateral.abierto .lateral-cajon{
    transform:none; visibility:visible; transition:transform .2s ease;
  }
  .cajon-cabeza{
    display:flex; align-items:center; justify-content:space-between; flex:none;
    min-height:56px; padding:6px 8px 6px 20px; border-bottom:1px solid var(--lateral-linea);
    font-size:.92rem;
  }
  .cerrar-menu{
    display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
    border-radius:10px; color:var(--lateral-texto-fuerte);
  }
  .cerrar-menu:hover{ background:var(--lateral-hover); color:var(--lateral-texto-fuerte); }
  .ir-a{ margin:12px 14px 4px; }
  .lateral-nav{ overflow:visible; flex:1 0 auto; padding:8px 12px 12px; }
  .lateral .tema-conmutador{ padding:0 20px 10px; }
  .lateral-pie{ padding:12px 20px 18px; }
  .capa-menu{ position:fixed; inset:0; z-index:40; background:var(--capa); }
  .lateral:not(.con-js) .lateral-cajon:target ~ .capa-menu, .lateral.abierto .capa-menu{ display:block; }
  body:has(.lateral:not(.con-js) .lateral-cajon:target), body.menu-abierto{ overflow:hidden; }
  .cuerpo-panel{ margin-left:0; }
  /* La barra de selección de Personas se pega debajo de la barra, no detrás. */
  .barra-seleccion{ top:64px; }
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .lateral-cajon{ transition:none; }
}

/* ── Mi espacio en el teléfono (≤900 px) ────────────────────────────────────
   Barra fija abajo, al alcance del pulgar: cuatro destinos y «Más», que abre
   una hoja desde abajo con el resto. Todo a dos toques o menos. La capa de
   detrás es el ::before del <summary>: tocarla es tocar «Más», que cierra la
   hoja sin JavaScript. */
@media (max-width:900px){
  body.yo{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* La lista se fue abajo: tema y «Salir» se quedan juntos a la derecha. */
  .yo-barra .tema-conmutador{ margin-left:auto; }
  .yo-barra .yo-salir{ margin-left:0; }
  .yo-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:2px;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background:var(--lateral-fondo); border-top:1px solid var(--lateral-borde);
  }
  .yo-nav > a, .yo-mas > summary{
    flex-direction:column; justify-content:center; gap:3px; min-height:54px; padding:6px 2px;
    font-size:.7rem; line-height:1.15; text-align:center; white-space:normal;
  }
  .yo-nav > a .ico, .yo-mas > summary .ico{ width:22px; height:22px; }
  .yo-mas{ position:static; display:flex; }
  /* repite a propósito: comparte el aspecto con los enlaces; solo él llena su celda. */
  .yo-mas > summary{ width:100%; }
  .yo-mas[open] > summary::before{
    content:""; position:fixed; left:0; right:0; top:0;
    bottom:calc(62px + env(safe-area-inset-bottom, 0px)); background:var(--capa);
  }
  .yo-mas-hoja{
    position:fixed; left:0; right:0; top:auto; bottom:calc(62px + env(safe-area-inset-bottom, 0px));
    min-width:0; max-height:72vh; overflow-y:auto; z-index:1;
    display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:12px 10px 14px;
    border-radius:16px 16px 0 0; border-width:1px 0 0;
  }
  .yo-nav .yo-mas-hoja a{ min-height:48px; padding:10px 12px; font-size:.9rem; white-space:normal; line-height:1.25; }
}

/* ── Pestañas de vista ──────────────────────────────────────────────────────
   Las «vistas» de un módulo grande (src/vistas/_pestanas.php): enlaces de
   servidor, la activa con aria-current y subrayado de 2 px. En un teléfono se
   desplazan de lado; el degradado del borde solo aparece si hay más pestañas
   de ese lado (fondo «local» que tapa la sombra «scroll» cuando se llega al
   final). Solo tokens: ningún color escrito a mano. */
.pestanas{
  display:flex; gap:2px; margin:-8px 0 6px; padding:0;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  box-shadow:inset 0 -1px 0 var(--borde);
  background:
    linear-gradient(to right, var(--fondo) 40%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--fondo) 40%, transparent) right center / 36px 100% no-repeat local,
    linear-gradient(to right, var(--borde-fuerte), transparent) left center / 18px 100% no-repeat scroll,
    linear-gradient(to left, var(--borde-fuerte), transparent) right center / 18px 100% no-repeat scroll;
}
.pestanas::-webkit-scrollbar{ display:none; }
.pestanas a{
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:42px; padding:8px 14px;
  font-size:.9rem; font-weight:600; line-height:1.2; white-space:nowrap; text-decoration:none;
  color:var(--texto-2); border-bottom:2px solid transparent; border-radius:var(--radio) var(--radio) 0 0;
}
.pestanas a:hover{ color:var(--texto); background:var(--superficie-2); }
.pestanas a:focus-visible{ outline:2px solid var(--foco); outline-offset:-2px; }
.pestanas a[aria-current="page"]{ color:var(--acento); border-bottom-color:var(--primario); }
.pestanas a[aria-current="page"]:hover{ background:transparent; }
.pestanas-pregunta{ margin:0 0 18px; font-size:.84rem; color:var(--texto-3); max-width:72ch; }
@media (pointer:coarse){ .pestanas a{ min-height:44px; } }


/* ── Inicio (bandeja) ───────────────────────────────────────────────────────
   Una fila por cosa pendiente: tipo en chip, quién y qué, fecha y la acción.
   En el teléfono la fecha baja debajo del texto y el botón queda a la vista. */
.accesos-rapidos{ display:flex; flex-wrap:wrap; gap:8px; }
.accesos-rapidos .btn{ display:inline-flex; align-items:center; gap:6px; }
.accesos-rapidos .ico{ width:16px; height:16px; }
.bandeja-lista{ list-style:none; margin:0; padding:0; }
.bandeja-fila{
  display:grid; grid-template-columns:7.5rem minmax(0,1fr) auto auto; gap:12px; align-items:center;
  padding:10px 0; border-top:1px solid var(--borde);
}
.bandeja-fila:first-child{ border-top:0; padding-top:2px; }
.bandeja-fila .chip{ justify-self:start; }
.bandeja-que{ min-width:0; overflow-wrap:anywhere; }
.bandeja-todo{ margin:10px 0 0; }
@media (max-width:640px){
  .bandeja-fila{ grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; }
  .bandeja-fila .chip{ grid-column:1 / -1; }
  .bandeja-que{ grid-column:1; }
  .bandeja-fecha{ grid-column:1; grid-row:3; }
  .bandeja-fila .btn{ grid-column:2; grid-row:2 / span 2; }
}

/* ── Ficha de persona ─────────────────────────────────────────────────────────
   Cabecera con quién es (nombre, chips de situación y país, una línea con
   puesto, jefe e ingreso), los avisos juntos, las pestañas y el cuerpo de la
   pestaña activa. Todo con prefijo .ficha- o dentro de .ficha-cuerpo para no
   pisar otras pantallas. Solo tokens. */
.ficha-cabecera{ margin-bottom:14px; }
.ficha-quien{ min-width:0; }
.ficha-titulo{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:4px; }
.ficha-titulo h1{ margin:0; }
.ficha-linea{ line-height:1.6; }
.ficha-sep{ color:var(--texto-3); margin:0 2px; }
.ficha-avisos{ margin-bottom:14px; }
.ficha-avisos .nota-compacta a{ margin-left:4px; font-weight:600; white-space:nowrap; }
.ficha-cuerpo{ margin-top:18px; }
.ficha-cuerpo .tarjeta-cabeza{ align-items:baseline; gap:8px 14px; margin-bottom:10px; }
/* Las cifras del Resumen llevan a su detalle: la regleta entera es enlazable. */
a.cifra-bloque{ display:block; color:inherit; text-decoration:none; }
a.cifra-bloque:hover{ background:var(--superficie-2); }
a.cifra-bloque:focus-visible{ outline:2px solid var(--foco); outline-offset:-2px; }
.ficha-rejilla{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); align-items:start; }
.ficha-rejilla .tarjeta{ padding:20px 22px; }
.ficha-pendientes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ficha-pendientes li{ display:flex; gap:10px; align-items:baseline; font-size:.9rem; line-height:1.45; }
.ficha-pendientes a{ white-space:nowrap; font-weight:600; }
.ficha-punto{ flex:0 0 auto; width:9px; height:9px; min-width:9px; padding:0; border-radius:50%; transform:translateY(-1px); }
.ficha-punto.chip-alerta{ background:var(--alerta); }
.ficha-punto.chip-aviso{ background:var(--aviso); }
.ficha-punto.chip-info{ background:var(--info); }
.ficha-distancias{ margin:0; display:flex; flex-direction:column; gap:14px; }
.ficha-distancias dt{ font-size:.9rem; color:var(--texto-2); margin-bottom:6px; }
.ficha-distancias dd{ margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ficha-mini-cifras{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ficha-mini-cifras .cifra-n{ font-size:28px; }
.ficha-mini-cifras .cifra-et{ margin-bottom:0; }
.ficha-movs{ list-style:none; margin:0; padding:0; }
.ficha-movs li{ display:grid; grid-template-columns:6.5rem minmax(0, 1fr) auto; gap:4px 12px; align-items:baseline;
  padding:8px 0; border-top:1px solid var(--borde); font-size:.9rem; }
.ficha-movs li:first-child{ border-top:0; padding-top:0; }
.ficha-movs-que{ min-width:0; overflow-wrap:anywhere; }
/* Datos en lectura: pares etiqueta/valor en dos columnas; una en el teléfono. */
.ficha-datos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 28px; margin:0; }
.ficha-datos > div{ min-width:0; padding-bottom:10px; border-bottom:1px solid var(--borde); }
.ficha-datos > .doble{ grid-column:1 / -1; }
.ficha-datos dt{ font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--texto-3); margin-bottom:2px; }
.ficha-datos dd{ margin:0; color:var(--texto); overflow-wrap:anywhere; }
.ficha-subtitulo{ margin:22px 0 12px; font-size:.95rem; }
.ficha-form-acciones{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
@media (max-width:640px){
  .ficha-datos{ grid-template-columns:1fr; }
  .ficha-rejilla{ grid-template-columns:1fr; }
  .ficha-movs li{ grid-template-columns:minmax(0, 1fr) auto; }
  .ficha-movs li > .min{ grid-column:1 / -1; }
}

/* ── Capacitación ─────────────────────────────────────────────────────────── */
.fila-aviso-sirce{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }

/* ── Evaluaciones, personas y calendario ────────────────────────────────────
   Evaluaciones: dos renglones como mucho por fila (≤72 px, D12; la primera
   línea se recorta con .una-linea, en «Tablas»). Personas en escritorio: la
   línea de abajo en un renglón (el texto entero sigue ahí; en el teléfono
   vuelve a partirse). Calendario: la fecha con su ancho y, en el teléfono,
   la acción bajo el texto. */
.tabla-compacta td{ padding:10px 12px; }
.tabla-compacta .celda-principal .linea-1 .etq{ margin-left:4px; }
/* La etiqueta .solo-lector de la cabecera de acciones es absoluta: sin esto
   se sale del contenedor que desplaza y ensancha la página. */
.tabla-compacta, .tabla-calendario, .tabla-personas{ position:relative; }
.cal-fecha{ white-space:nowrap; min-width:6.5rem; }
.tabla-calendario .celda-principal .linea-1{ display:block; }
table.tabla-calendario td{ vertical-align:top; }
table.tabla-calendario .cal-fecha{ width:1%; }
.cal-accion-movil{ margin-top:8px; }
@media (min-width:641px){
  .tabla-compacta .celda-principal .linea-2{ max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tabla-compacta .una-linea{ max-width:10.5rem; }
  .tabla-personas .celda-principal .linea-2{ max-width:15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:640px){
  .tabla-compacta td, .tabla-personas td, table.tabla-calendario td{ padding:10px 8px; }
  .tabla-compacta td.nowrap{ white-space:normal; }
  .tabla-compacta .celda-principal .linea-1{ max-width:none; white-space:normal; }
  .tabla-compacta .celda-principal .linea-2, .tabla-personas .celda-principal .linea-2{ overflow-wrap:anywhere; }
  table.tabla-calendario .celda-principal{ width:auto; }
  .cal-fecha{ min-width:5.6rem; }
  .cal-accion-movil.solo-telefono{ display:block; }
}

/* ── Asistencia ───────────────────────────────────────────────────────────────
   El número del facial no necesita todo el ancho de la celda; y los conceptos
   de pago. */
.campo-codigo{ max-width:12rem; }
.asis-conceptos-lista{ margin:6px 0 10px; padding-left:1.2em; }
.asis-conceptos-lista li{ margin:4px 0; }
.asis-avisos-chip{ display:inline-block; margin-top:4px; text-decoration:none; white-space:normal; }
.asis-avisos-lista{ margin:6px 0 0; padding-left:1.2em; }
.asis-avisos-lista li{ margin:2px 0; }
.asis-avisos-horario{ color:var(--aviso); font-size:.85em; }
.asis-conceptos-dl{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; margin:10px 0 0; }
.asis-conceptos-dl > div{ border-left:3px solid var(--borde); padding:2px 0 2px 12px; }
.asis-conceptos-dl dt{ font-size:.85em; color:var(--texto-3); }
.asis-conceptos-dl dd{ margin:2px 0 0; font-weight:600; font-size:1.15em; }
.asis-conceptos-dl dd.min{ font-weight:400; font-size:.8em; }
@media (min-width:641px){
  .asis-conceptos td.num .d-block{ white-space:nowrap; }
  .asis-conceptos td.celda-principal{ min-width:11rem; }
}

/* ── Finiquito y liquidación ──
   /admin/procesos/{id}/finiquito y el resumen en el detalle de la salida.
   Reutiliza .form, .tarjeta, table.datos, .col-sec y .celda-principal. Aquí
   va lo propio: la fórmula legible, las filas de referencia (Venezuela: la
   garantía y el retroactivo, que se comparan y no se suman), el total, y la
   hoja impresa (sin menú ni formulario, con las líneas de firma). */
.fin-resumen .tarjeta-cabeza{ gap:12px; }
.fin-lista{ margin:6px 0 0; padding-left:1.1rem; }
.fin-lista li{ margin:3px 0; }
.fin-supuesto{ display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--borde); border-radius:var(--radio); background:var(--superficie-2); }
.fin-supuesto .campo-ayuda{ margin:0; }
.form-acciones .fin-nota-guardar{ flex:1 1 16rem; }
.fin-tabla .fin-formula{ font-size:.82rem; color:var(--texto-2); min-width:12rem; }
.fin-tabla .fin-art{ font-size:.82rem; min-width:6.5rem; }
.fin-datos .form{ align-items:start; }
.fin-tabla tr.fin-ref td{ color:var(--texto-3); font-style:italic; }
.fin-tabla tr.fin-sep td:first-child{ box-shadow:inset 3px 0 0 var(--acento); }
.fin-tabla tfoot :is(td, th){ border-top:1px solid var(--borde); }
.fin-tabla tfoot th{ text-align:left; font-weight:600; white-space:normal; }
.fin-tabla tr.fin-total th, .fin-tabla tr.fin-total td{ border-top:2px solid var(--borde-fuerte); font-size:1.02rem; color:var(--texto); }
.fin-sub{ margin:18px 0 6px; font-size:.95rem; }
.fin-ref-lista dd{ color:var(--texto-2); }
.fin-avisos strong{ display:block; }
.fin-firmas{ display:none; }
@media (max-width:640px){
  .fin-tabla .fin-formula{ min-width:0; }
  /* Que el monto quepa sin desplazar: el concepto cede su ancho mínimo. */
  table.datos.fin-tabla .celda-principal{ min-width:0; width:auto; }
  .fin-tabla td.num, .fin-tabla th{ padding-left:6px; padding-right:6px; }
  .fin-supuesto{ padding:10px; }
}
@media print{
  body:has(.finiquito) .lateral, body:has(.finiquito) .boton-menu, body:has(.finiquito) .capa-menu,
  body:has(.finiquito) .pila-avisos, body:has(.finiquito) .franja-alcance, body:has(.finiquito) .ir-a{ display:none !important; }
  body:has(.finiquito){ background:var(--superficie); }
  body:has(.finiquito) .cuerpo-panel{ margin:0; padding:0; }
  .finiquito .tarjeta, .finiquito .nota{ box-shadow:none; break-inside:avoid; }
  .finiquito .scroll-x{ overflow:visible; }
  .finiquito table.datos .col-sec{ display:table-cell; }
  .finiquito .solo-telefono{ display:none !important; }
  .fin-tabla .fin-formula{ min-width:0; }
  .fin-firmas{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:56px; }
  .fin-firmas div{ border-top:1px solid var(--texto); padding-top:6px; font-size:.85rem; text-align:center; }
}

/* ── Ayuda (/admin/ayuda): el manual de uso ─────────────────────────────────
   Contenido generado por manual/armar.py en src/vistas/admin/_manual.html,
   con clases propias (man-…) para no chocar con las del panel. Solo tokens:
   el manual sigue el tema claro u oscuro del hub. El comportamiento
   (buscador, abrir todo, solo archivos, anclas) está en assets/ayuda.js. */
.man-barra{
  position:sticky; top:0; z-index:3; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center;
  padding:10px 0; background:var(--fondo); border-bottom:1px solid var(--borde); margin-bottom:10px;
}
.man-buscar{ flex:1 1 260px; }
.man-buscar input{ width:100%; }
.man-filtro[aria-pressed="true"]{ background:var(--alerta-tinte); border-color:var(--alerta-borde); color:var(--alerta); }
.man-leyenda{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.man-pagina{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:26px; align-items:start; }
.man-indice{ position:sticky; top:64px; max-height:calc(100vh - 90px); overflow:auto; font-size:.84rem; }
.man-indice > summary{ display:none; }
.man-indice ul{ list-style:none; margin:0; padding:0; }
.man-ind-grupo{ margin-bottom:14px; }
.man-ind-grupo > span{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); margin-bottom:4px; }
.man-ind-grupo a{ display:block; padding:4px 8px; border-radius:6px; color:var(--texto-2); text-decoration:none; }
.man-ind-grupo a:hover{ background:var(--superficie-2); color:var(--texto); }
.man-ind-grupo a.activo{ background:var(--info-tinte); color:var(--info); font-weight:600; }
.man-grupo{ margin-bottom:30px; }
.man-grupo-titulo{ margin:0 0 12px; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); display:flex; align-items:center; gap:10px; }
.man-grupo-titulo::after{ content:""; flex:1; height:1px; background:var(--borde); }
.man-modulo{ background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio); margin-bottom:10px; scroll-margin-top:80px; }
.man-modulo > summary::-webkit-details-marker, .man-seccion > summary::-webkit-details-marker{ display:none; }
.man-modulo > summary::before, .man-seccion > summary::before{
  content:""; width:8px; height:8px; flex:none; border-right:2px solid var(--texto-3); border-bottom:2px solid var(--texto-3);
  transform:rotate(-45deg); transition:transform .15s ease; margin-right:4px;
}
.man-modulo[open] > summary::before, .man-seccion[open] > summary::before{ transform:rotate(45deg); }
.man-modulo > summary{ list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:15px 18px; }
.man-mod-titulo{ flex:1 1 auto; font-size:1.08rem; font-weight:700; color:var(--acento); }
.man-meta{ font-size:.75rem; color:var(--texto-3); }
.man-mod-cuerpo{ padding:0 18px 16px; }
.man-mod-intro{ color:var(--texto-2); padding-bottom:6px; }
.man-seccion{ border-top:1px solid var(--borde); scroll-margin-top:80px; }
.man-seccion > summary{ list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:11px 2px; font-weight:600; }
.man-sec-titulo{ flex:1 1 auto; }
.man-sec-cuerpo{ padding:0 2px 14px 20px; font-size:.92rem; line-height:1.6; }
.man-sec-cuerpo p, .man-mod-intro p{ max-width:78ch; margin:0 0 10px; }
.man-sec-cuerpo :is(ul, ol){ max-width:80ch; margin:0 0 10px; padding-left:22px; }
.man-sec-cuerpo li{ margin:3px 0; }
.man-sec-cuerpo h5{ margin:14px 0 6px; font-size:.9rem; color:var(--acento); }
.man-es-archivo > summary .man-sec-titulo{ color:var(--alerta); }
.man-sello{ font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:999px; white-space:nowrap; background:var(--alerta-tinte); color:var(--alerta); }
.man-sello-tarea{ background:var(--ok-tinte); color:var(--ok); }
.man-sello-aviso{ background:var(--aviso-tinte); color:var(--aviso); }
.man-sello-ensenar{ background:var(--info-tinte); color:var(--info); }
.man-tabla{ overflow-x:auto; margin:6px 0 14px; border:1px solid var(--borde); border-radius:8px; }
.man-tabla table{ border-collapse:collapse; width:100%; font-size:.84rem; }
.man-tabla :is(th, td){ text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--borde); }
.man-tabla th{ background:var(--superficie-2); font-weight:600; color:var(--texto-2); white-space:nowrap; }
.man-tabla tr:last-child td{ border-bottom:0; }
.man-ejemplo pre{ margin:6px 0 14px; padding:12px 14px; overflow-x:auto; border-radius:8px; background:var(--superficie-2); border:1px solid var(--borde); font-size:.8rem; line-height:1.55; }
.man-nota{ border-left:3px solid var(--info-borde); background:var(--info-tinte); padding:8px 12px; border-radius:0 8px 8px 0; margin:6px 0 12px; }
.man-sin-resultados{ padding:28px 18px; text-align:center; color:var(--texto-3); border:1px dashed var(--borde-fuerte); border-radius:var(--radio); }
@media (max-width:900px){
  .man-pagina{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .man-indice{ position:static; max-height:none; background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio); padding:0 14px; }
  .man-indice > summary{ display:block; cursor:pointer; padding:12px 0; font-weight:600; }
  .man-barra{ top:56px; }
  .man-modulo, .man-seccion{ scroll-margin-top:170px; }
  .man-modulo > summary{ padding:14px; }
  .man-mod-cuerpo{ padding:0 14px 14px; }
  .man-sec-cuerpo{ padding-left:4px; }
}
@media print{
  .man-barra, .man-indice, .man-leyenda{ display:none; }
  .man-pagina{ display:block; }
}
.input-chico { max-width: 10rem; }

/* Agenda de entrevistas (función 8): una cita por bloque y las casillas de
   entrevistadores y horarios en columnas que se acomodan al ancho. */
.cita-agenda{ border:1px solid var(--borde); border-radius:10px; padding:12px 14px; display:grid; gap:4px; }
.casillas-columnas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px 18px; }
fieldset.ancho-total{ border:0; padding:0; margin:0; min-width:0; }
fieldset.ancho-total > legend{ font-weight:600; font-size:.9rem; padding:0; margin-bottom:6px; }
.casillas-columnas label.casilla{ min-height:40px; }
.casillas-columnas label.casilla input{ width:20px; height:20px; flex:none; }

/* Firma electrónica (función 9): el PDF se pinta con pdf.js en un <canvas>
   por página y los campos van encima, en porcentaje de la página. Los colores
   por rol salen de los papeles de estado: nada escrito a mano. */
.firma-editor{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.firma-herramientas{ position:sticky; top:12px; display:grid; gap:12px; }
.firma-herramientas .botonera{ display:flex; flex-wrap:wrap; gap:6px; }
.firma-paginas{ display:grid; gap:18px; min-width:0; }
.firma-pagina{ position:relative; width:100%; background:var(--papel); border:1px solid var(--borde-fuerte); border-radius:4px; overflow:hidden; }
.firma-pagina canvas{ display:block; width:100%; height:100%; }
.firma-pagina .firma-num{ position:absolute; right:6px; bottom:4px; font-size:.72rem; color:var(--texto-tenue); background:var(--superficie); padding:0 4px; border-radius:4px; }
.fc{ position:absolute; box-sizing:border-box; border:2px solid var(--info); background:var(--info-tinte); color:var(--info); border-radius:3px;
     font-size:.7rem; line-height:1.1; padding:1px 3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:move; touch-action:none; opacity:.92; }
.fc.rol-jefe{ border-color:var(--aviso); background:var(--aviso-tinte); color:var(--aviso); }
.fc.rol-rh{ border-color:var(--ok); background:var(--ok-tinte); color:var(--ok); }
.fc.rol-representante{ border-color:var(--alerta); background:var(--alerta-tinte); color:var(--alerta); }
.fc.sel{ outline:3px solid var(--foco); outline-offset:1px; z-index:2; }
.fc:focus-visible{ outline:3px solid var(--foco); }
.fc .fc-asa{ position:absolute; right:0; bottom:0; width:12px; height:12px; background:var(--foco); cursor:nwse-resize; }
.fc.ajeno{ opacity:.35; cursor:default; border-style:dashed; }
.fc.mio{ cursor:pointer; }
.firma-leyenda{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.8rem; }
.firma-leyenda .fc-muestra{ display:inline-block; width:12px; height:12px; border:2px solid var(--info); background:var(--info-tinte); vertical-align:-2px; margin-right:4px; border-radius:2px; }
.firma-leyenda .rol-jefe .fc-muestra{ border-color:var(--aviso); background:var(--aviso-tinte); }
.firma-leyenda .rol-rh .fc-muestra{ border-color:var(--ok); background:var(--ok-tinte); }
.firma-leyenda .rol-representante .fc-muestra{ border-color:var(--alerta); background:var(--alerta-tinte); }
.firma-cargando{ padding:22px; text-align:center; color:var(--texto-3); }
.firma-visor{ display:block; max-height:70vh; overflow:auto; padding:4px; border:1px solid var(--borde); border-radius:var(--radio); background:var(--superficie-2); }
.firma-pad{ display:grid; gap:10px; }
.firma-pad .modos{ display:flex; gap:6px; flex-wrap:wrap; }
.firma-pad .modos button[aria-pressed="true"]{ background:var(--primario); color:var(--sobre-primario); border-color:var(--primario); }
.firma-lienzo{ width:100%; max-width:560px; aspect-ratio:3 / 1; border:2px dashed var(--borde-fuerte); border-radius:8px; background:var(--campo-fondo); color:var(--texto); touch-action:none; display:block; }
.firma-lienzo.con-tinta{ border-style:solid; border-color:var(--foco); }
.firma-verificacion{ display:grid; gap:10px; max-width:420px; }
.firma-verificacion input[inputmode="numeric"]{ font-size:1.4rem; letter-spacing:.4em; max-width:12rem; }
.firma-huella{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.78rem; word-break:break-all; }
@media (max-width:1100px){
  .firma-editor{ grid-template-columns:minmax(0,1fr); }
  .firma-herramientas{ position:static; }
}
.firma-visor .firma-pagina + .firma-pagina{ margin-top:12px; }
.firma-visor .fc{ font-size:.66rem; line-height:1.05; font-weight:600; }

/* IA (función 10): datos del CV y Sistema › IA */
.lista-cv{ margin:0; padding-left:1.1rem; display:grid; gap:10px; }
.grupo-cv{ border:1px solid var(--borde); border-radius:10px; padding:10px 14px 12px; margin:0 0 12px; min-width:0; }
.grupo-cv legend{ font-weight:600; padding:0 6px; }
.dato-cv{ padding:8px 0; border-bottom:1px solid var(--borde); overflow-wrap:anywhere; }
.dato-cv:last-child{ border-bottom:0; }
.cita-cv{ font-style:italic; overflow-wrap:anywhere; }
.bloque-ia{ border-bottom:1px solid var(--borde); padding-bottom:14px; }
.bloque-ia:last-of-type{ border-bottom:0; }
.bloque-ia h3{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.fila-precio{ border-bottom:1px solid var(--borde); padding:10px 0; }
.fila-precio > .c-12{ grid-column:1 / -1; }
.fila-precio > .form-acciones{ align-self:end; }

/* ── Tablero del reclutamiento (función 11) ──────────────────────────────── */
.modo-vista{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tablero-rec{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(232px, 1fr); gap:12px; overflow-x:auto; padding-bottom:8px; align-items:start; contain:inline-size; max-width:100%; }
.tr-col{ background:var(--fondo); border:1px solid var(--borde); border-radius:var(--radio); padding:10px; min-height:140px; transition:background-color .15s, border-color .15s; }
.tr-col.tr-sobre{ background:var(--seleccion); border-color:var(--foco); border-style:dashed; }
.tr-col-titulo{ font-size:.86rem; margin:0 0 8px; display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--texto-2); }
.tr-n{ background:var(--superficie); border:1px solid var(--borde); border-radius:999px; padding:0 8px; font-size:.78rem; color:var(--texto); font-variant-numeric:tabular-nums; }
.tr-col-nota{ margin:0 0 8px; }
.tr-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; min-height:48px; }
.tr-tarjeta{ position:relative; background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio); padding:10px 12px; display:flex; flex-direction:column; gap:3px; box-shadow:var(--sombra-accion); overflow-wrap:anywhere; }
.tr-tarjeta[draggable="true"]{ cursor:grab; }
.tr-tarjeta.tr-arrastrando{ opacity:.45; }
.tr-tarjeta.tr-guardando{ opacity:.7; }
.tr-tarjeta.tr-estancada{ border-left:3px solid var(--alerta); }
.tr-nombre{ font-weight:600; }
.tr-linea{ display:block; }
.tr-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.tr-chips .chip{ white-space:normal; }
.tr-mover{ align-self:flex-start; margin-top:6px; }
.tr-menu{ display:flex; flex-direction:column; border:1px solid var(--borde-fuerte); border-radius:var(--radio); background:var(--superficie); margin-top:4px; overflow:hidden; box-shadow:var(--sombra-flotante); }
.tr-menu button{ text-align:left; background:none; border:0; border-top:1px solid var(--borde); padding:8px 10px; font:inherit; font-size:.85rem; color:var(--texto); cursor:pointer; min-height:38px; }
.tr-menu button:first-child{ border-top:0; }
.tr-menu button:hover, .tr-menu button:focus{ background:var(--seleccion); }
.tr-menu button:focus-visible{ outline:2px solid var(--foco); outline-offset:-2px; }
@media (max-width:720px){
  .tablero-rec{ grid-auto-flow:row; grid-auto-columns:auto; overflow-x:visible; }
  .tr-col{ min-height:0; }
  .tr-col-nota{ display:none; }
  .tr-menu button{ min-height:44px; }
}
@media (pointer:coarse){ .tr-nombre{ display:flex; align-items:center; min-height:44px; } }

/* Función 13b · kit para compartir una vacante y tabla de evidencia. */
.kit-compartir{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.kit-canal{ border:1px solid var(--borde); border-radius:10px; padding:12px 14px; min-width:0; }
.kit-enlace{ display:block; overflow-wrap:anywhere; font-size:.85rem; margin-top:6px; }
.kit-qr summary{ list-style:none; }
.kit-qr summary::-webkit-details-marker{ display:none; }
.kit-qr-caja{ margin-top:10px; display:grid; gap:6px; justify-items:start; }
.kit-qr-caja svg.qr{ width:180px; height:auto; max-width:100%; border-radius:6px; }
.tabla-evidencia td{ vertical-align:top; }
.tabla-evidencia .cita-cv{ display:block; margin-top:4px; }
.evid-si{ font-weight:600; }
.evid-no{ color:var(--texto-3); }
.comparar-tabla th, .comparar-tabla td{ min-width:140px; vertical-align:top; }
.comparar-tabla th:first-child, .comparar-tabla td:first-child{ min-width:160px; }

/* ── Segundo factor (mi-seguridad, entrar/codigo) ─────────────────────────── */
/* El QR va siempre sobre blanco, también en tema oscuro: las apps lo leen mejor. */
.qr-2fa{ width:min(220px, 100%); aspect-ratio:1; margin:12px 0; padding:0; background:#fff; border-radius:8px;
  display:flex; align-items:center; justify-content:center; }
.qr-2fa svg{ width:100%; height:auto; display:block; border-radius:8px; }
.clave-2fa{ display:inline-block; margin-top:4px; font-size:.95rem; letter-spacing:.06em; overflow-wrap:anywhere; }
.codigo-2fa{ font-variant-numeric:tabular-nums; letter-spacing:.2em; font-size:1.15rem; }
.pasos-2fa{ padding-left:1.2rem; }
.pasos-2fa li + li{ margin-top:10px; }
.codigos-respaldo{ list-style:none; padding:0; margin:12px 0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 16px; }
.codigos-respaldo code{ font-size:1rem; letter-spacing:.04em; }

/* ── Diagnóstico de cumplimiento (/admin/diagnostico, Growly RH fase 3) ──────
   Los hallazgos van arriba, uno por línea, con una marca de color a la
   izquierda: rojo lo que se debe o falta, azul lo que viene. */
.diag-hallazgos{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; }
.diag-hallazgos li{ padding:10px 14px; border-left:4px solid var(--realce); background:var(--superficie-2); border-radius:0 8px 8px 0; }
.diag-hallazgos .diag-alerta{ border-left-color:var(--alerta); }
.diag-hallazgos .diag-info{ border-left-color:var(--info); }
.diagnostico td.diag-fecha{ white-space:nowrap; }
.diagnostico td.diag-persona{ min-width:11rem; }
@media print{
  body:has(.diagnostico) .lateral, body:has(.diagnostico) .boton-menu, body:has(.diagnostico) .capa-menu,
  body:has(.diagnostico) .pila-avisos, body:has(.diagnostico) .franja-alcance, body:has(.diagnostico) .ir-a{ display:none !important; }
  body:has(.diagnostico){ background:var(--superficie); }
  body:has(.diagnostico) .cuerpo-panel{ margin:0; padding:0; }
  .diagnostico .tarjeta, .diagnostico .nota{ box-shadow:none; break-inside:avoid; }
  .diagnostico .scroll-x{ overflow:visible; }
}

/* ── Semáforo «listo para inspección» (/admin/semaforo) ───────────────────── */
.sem-cabeza{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.sem-luz{ width:28px; height:28px; border-radius:50%; flex:none; }
.sem-lista{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.sem-fila{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding-top:12px; border-top:1px solid var(--borde); }
.sem-punto{ width:12px; height:12px; border-radius:50%; margin-top:6px; }
.sem-verde{ background:var(--ok); } .sem-amarillo{ background:var(--aviso); } .sem-rojo{ background:var(--alerta); }
.inicio-semaforo{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.inicio-semaforo .sem-luz{ width:18px; height:18px; }

/* ── Primer uso guiado (Inicio) ─────────────────────────────────────────── */
.primer-uso-cabeza{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:14px; }
.primer-uso-pasos{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:10px; }
.primer-uso-pasos li{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--borde); border-radius:10px; }
.primer-uso-pasos li.hecho{ opacity:.75; }
.pu-marca{ width:24px; height:24px; border-radius:50%; border:2px solid var(--borde-fuerte); display:inline-flex; align-items:center; justify-content:center; }
.primer-uso-pasos li.hecho .pu-marca{ background:var(--ok); border-color:var(--ok); color:#fff; }
.pu-marca .ico{ width:14px; height:14px; }
.primer-uso-extra summary{ cursor:pointer; font-weight:600; }
.primer-uso-tienes{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.primer-uso-tienes a{ display:flex; gap:10px; padding:12px; border:1px solid var(--borde); border-radius:10px; text-decoration:none; color:var(--texto); }
.primer-uso-tienes a:hover{ border-color:var(--borde-fuerte); }
.primer-uso-tienes a > span{ display:grid; gap:2px; }
.primer-uso-tienes .ico{ width:20px; height:20px; flex:none; color:var(--realce); }
@media (max-width:640px){ .primer-uso-pasos li{ grid-template-columns:auto 1fr; } .primer-uso-pasos li .btn{ grid-column:2; justify-self:start; } }

/* ── Etiqueta «Nuevo» en el menú ─────────────────────────────────────────── */
.etq-nuevo{ margin-left:auto; font-size:.66rem; font-weight:700; letter-spacing:.02em; padding:1px 6px; border-radius:999px;
  background:var(--lateral-acento); color:var(--lateral-fondo); }

/* ── Lateral plegada (escritorio): solo íconos ──────────────────────────── */
.lateral-plegar{ position:absolute; top:20px; right:10px; z-index:2; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:8px; background:transparent; color:var(--lateral-tenue); cursor:pointer; }
.lateral-plegar:hover{ background:var(--lateral-hover); color:var(--lateral-texto-fuerte); }
.lateral-plegar .ico{ width:16px; height:16px; }
@media (min-width:901px){
  html.lateral-plegada{ --lateral:64px; }
  html.lateral-plegada .lateral-marca span, html.lateral-plegada .lateral-marca b,
  html.lateral-plegada .lateral-nav a > span, html.lateral-plegada .grupo-nav > summary,
  html.lateral-plegada .ir-a, html.lateral-plegada .tema-conmutador, html.lateral-plegada .lateral-pie,
  html.lateral-plegada .lateral-salir, html.lateral-plegada .etq-nuevo, html.lateral-plegada .ir-a-nada{ display:none !important; }
  html.lateral-plegada .lateral-marca{ padding:18px 10px 16px; justify-content:center; }
  html.lateral-plegada .lateral-plegar{ position:static; margin:6px auto 0; grid-area:ira; }
  html.lateral-plegada .lateral-nav{ padding:8px 8px 12px; }
  html.lateral-plegada .lateral-nav a{ justify-content:center; padding:9px 0; }
}
@media (max-width:900px){ .lateral-plegar{ display:none; } }

/* ── Documentos legales ─────────────────────────────────────────────────── */
.documento-vista{ max-width:780px; font-size:.95rem; line-height:1.6; }
.documento-vista h1{ font-size:1.35rem; }
.documento-vista h2{ font-size:1.05rem; margin-top:1.2em; }
.documento-vista table{ width:100%; margin-top:40px; border-collapse:collapse; }
.documento-vista td{ vertical-align:top; padding:40px 12px 0; border-top:1px solid var(--borde-fuerte); width:50%; }

/* Dos tarjetas lado a lado que bajan una debajo de otra en pantallas angostas. */
.dos-columnas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:0 18px; }
.recon-muro li{ padding:10px 0; border-bottom:1px solid var(--borde); }

/* Pulso de clima en Mi espacio: la escala como botones grandes, buenos en el celular. */
.pulso-escala{ border:0; padding:0; margin:0 0 16px; }
.pulso-escala legend{ font-weight:600; margin-bottom:8px; }
.pulso-opciones{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.pulso-opciones label{ position:relative; }
.pulso-opciones input{ position:absolute; opacity:0; inset:0; }
.pulso-opciones span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; border:1px solid var(--borde-fuerte); border-radius:8px; cursor:pointer; font-weight:600; }
.pulso-opciones input:checked + span{ background:var(--primario); color:var(--sobre-primario); border-color:var(--primario); }
.pulso-opciones input:focus-visible + span{ outline:2px solid var(--realce); outline-offset:2px; }

/* ── Kiosco de fichaje por QR (pantalla de la sede) ─────────────────────── */
.kiosco-tarjeta{ max-width:520px; text-align:center; }
.kiosco-marca{ font-weight:700; color:var(--texto-3); margin:0 0 6px; }
.kiosco-qr svg{ width:min(78vw, 360px); height:auto; background:#fff; padding:12px; border-radius:12px; }

/* ── Agente de soporte (arriba de la Ayuda) ──────────────────────────────── */
.soporte-buscar{ display:flex; gap:8px; flex-wrap:wrap; }
.soporte-buscar input{ flex:1 1 260px; }
.soporte-resultados{ margin:0; padding-left:1.2em; display:grid; gap:10px; }