/* 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: Plus Jakarta Sans, autohospedada (Montserrat queda para lo que
 * mide con ella). Colores: ciruela de Quincenea; Migura y cada empresa cambian
 * solo los juegos de marca (ver el bloque de tokens).
 * 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.
 */

/* Plus Jakarta Sans (SIL Open Font License), variable de 200 a 800: un archivo
   por alfabeto en lugar de uno por peso. Montserrat se queda solo para lo que
   ya mide con ella (src/grafico.php calcula anchos de etiqueta). */
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:200 800; font-display:swap; src:url('/assets/jakarta-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:200 800; font-display:swap; src:url('/assets/jakarta-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@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 ────────────────────────────────────────────────────────────────
     Cuatro capas: juegos de marca (claro --m/--s/--n, oscuro --mo) → papeles
     (semánticos) → componentes. Las reglas de componente SOLO usan los
     papeles. La marca entra cambiando únicamente los juegos:
       · por omisión, Quincenea (ciruela, con un coral cálido para lo que es de
         personas: celebraciones, reconocimientos, la medida);
       · Migura, con :root[data-paleta="migura"] (su navy y su cian), abajo;
       · una empresa con marca propia, con /admin/marca.css (src/marca.php),
         que redefine los mismos juegos a partir de su color, ya ajustado
         para leerse a 4,5:1.
     Como los bloques del oscuro leen el juego --mo, ninguna marca necesita
     sus propios bloques de tema. Fuera de estos bloques no hay ni un color
     escrito a mano (lo comprueba tools/revisar-diseno.mjs). */

  /* Juego claro de marca. Contrastes sobre blanco: m-800 17:1 · m-700 12,9:1. */
  --m-900:#1c0826; --m-800:#2b0f3a; --m-700:#4a1d5e; --m-600:#6a2d80;
  --m-200:#e6d3e8; --m-100:#f4e9f1; --m-50:#faf4f8;
  /* Cálido: s-700 es el único que va como texto (5,7:1). */
  --s-500:#ff8a5b; --s-700:#b5401f; --s-200:#ffd0bb; --s-50:#fff1ea;
  --s-info:#4a90c8;   /* el filo de una nota informativa (en Migura, su cian) */
  /* Neutros con un sesgo ciruela, no un gris de plantilla. Sobre blanco:
     texto 17,6:1 · texto-2 10:1 · texto-3 7,9:1 · tenue 6,2:1 (5,8:1 en el lienzo). */
  --n-fondo:#faf6f3; --n-sup2:#f5eeea; --n-borde:#ece2dc; --n-borde-fuerte:#dacbc3;
  --n-texto:#24112f; --n-texto-2:#4f3b58; --n-texto-3:#5f4a68; --n-tenue:#6e5a76;

  /* Juego oscuro de marca (lo leen los dos bloques del tema oscuro). Sobre
     --mo-sup: texto 16,8:1 · texto-2 12,6:1 · tenue 7,1:1 · enlace 9,1:1 ·
     ciruela sobre el primario coral 7,3:1. */
  --mo-fondo:#170a20; --mo-sup:#221029; --mo-sup2:#2b1533; --mo-campo:#1d0d25; --mo-lateral:#1b0b23;
  --mo-borde:#3a2245; --mo-borde-fuerte:#4a2d57; --mo-borde-control:#6a4a78; --mo-borde-hover:#ffa27e;
  --mo-texto:#fff6f0; --mo-texto-2:#e5d3e9; --mo-texto-3:#cdb6d3; --mo-tenue:#b49bbd;
  --mo-enlace:#ffa27e; --mo-enlace-hover:#ffc0a6; --mo-acento:#ffd0bb;
  --mo-primario:#ff8a5b; --mo-primario-hover:#ffa27e; --mo-sobre-primario:#2b0f3a; --mo-foco:#ffa27e;
  --mo-anillo:rgba(255,138,91,.30); --mo-sel:rgba(255,138,91,.16); --mo-sel-solida:#3a1d33;
  --mo-medida:#d4f25c; --mo-medida-baja:#a8c24a; --mo-avance:#ff8a5b; --mo-avance-cerca:#ffa27e;
  --mo-nivel-6:#ffd0bb; --mo-nivel-5:#ffa27e; --mo-nivel-4:#ff8a5b; --mo-nivel-3:#d9663a; --mo-nivel-2:#d4f25c; --mo-nivel-1:#6a4a78;
  --mo-activo-fondo:#3a1d33; --mo-activo-texto:#ffd0bb;
  --mo-g1:#ffa27e; --mo-g2:#ff8a5b; --mo-g3:#d4f25c; --mo-g4:#7a3b2c; --mo-g-sobre:#170a20;
  --mo-calido:#ffb38f; --mo-calido-tinte:rgba(255,138,91,.14);
  --mo-capa:rgba(10,4,14,.66); --mo-placa:#f8eef3;

  /* Superficies */
  --fondo:var(--n-fondo);     /* lienzo de la página */
  --superficie:#ffffff;       /* tarjeta */
  --superficie-2:var(--n-sup2); /* 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:var(--n-borde); --borde-fuerte:var(--n-borde-fuerte);
  --borde-control:var(--n-borde-fuerte);    /* contorno de campos y botones suaves */
  --borde-hover:var(--m-600);

  --texto:var(--n-texto); --texto-2:var(--n-texto-2); --texto-3:var(--n-texto-3); --texto-tenue:var(--n-tenue);

  --enlace:var(--m-700); --enlace-hover:var(--m-800);
  --acento:var(--m-800);   /* cifras grandes, texto de marca, botón suave */
  --primario:var(--m-800); --primario-hover:var(--m-700); --sobre-primario:#ffffff;
  --foco:var(--m-600); --anillo-foco:var(--m-100);
  --seleccion:var(--m-100); --seleccion-solida:var(--m-100);
  --marca-tinte:var(--m-100);  /* fondo de lo activo: la sección del menú, la pestaña */

  /* La medida: dónde cae un valor en una escala (y el filo de citas y rutas). */
  --medida:var(--s-500); --medida-baja:#f0b9a6; --realce:var(--s-500);
  --avance:var(--m-600); --avance-cerca:var(--m-700);
  /* Lo cálido: personas, celebraciones, reconocimientos. */
  --calido:var(--s-700); --calido-tinte:var(--s-50);

  /* Estado. No cambian con la marca: rojo significa lo mismo en toda empresa.
     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:#e6f6fd;   --info-borde:#bfe6f7;
  --filo-info:var(--s-info);
  --urgente:#d44115;

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

  /* Barra lateral y barra de Mi espacio: claras, con la sección activa en el
     tinte de la marca. */
  --lateral-fondo:var(--superficie); --lateral-borde:var(--borde);
  --lateral-texto:var(--texto-2); --lateral-texto-fuerte:var(--texto);
  --lateral-tenue:var(--texto-tenue); --lateral-hover:var(--superficie-2);
  --lateral-linea:var(--borde); --lateral-acento:var(--primario);
  --lateral-activo-fondo:var(--m-100); --lateral-activo-texto:var(--m-800);

  /* Gráficos SVG (src/grafico.php): los colores van por clase, no fijos. */
  --g-navy:var(--m-800); --g-navy2:var(--m-600); --g-cian:var(--s-500); --g-cian2:var(--s-200);
  --g-naranja:#d44115; --g-ok:#0f7a3d; --g-aviso:#8a6100; --g-alerta:#b0350f;
  --g-linea:var(--n-borde); --g-tenue:var(--n-tenue); --g-tinta:var(--n-texto); --g-sobre:#ffffff;

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

  /* La franja de bienvenida del Inicio: el color de la marca, de su tono
     principal a uno más oscuro (el texto blanco se lee en los dos extremos). */
  --hero-desde:var(--m-800); --hero-hasta:var(--m-900); --hero-texto:#ffffff;
  --radio:10px; --radio-grande:14px;
  --lateral:248px;

  /* 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(--m-800); --cian:var(--s-500); --cian-agua:var(--m-100);

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

/* Migura: su navy y su cian (el cian marca la medida), sus neutros fríos.
   Solo cambia los juegos; los papeles y el tema oscuro los leen solos. */
:root[data-paleta="migura"]{
  --m-900:#07233c; --m-800:#0b3253; --m-700:#145493; --m-600:#1f6cb5;
  --m-200:#bfe6f7; --m-100:#e6f6fd; --m-50:#f0f8fd;
  --s-500:#42c8f4; --s-700:#0a4f6b; --s-200:#a5e3f9; --s-50:#e6f6fd; --s-info:#42c8f4;
  --n-fondo:#f7f9fb; --n-sup2:#f7f9fb; --n-borde:#e3e9f0; --n-borde-fuerte:#cfd9e5;
  --n-texto:#0e1a26; --n-texto-2:#46556a; --n-texto-3:#5d6b7a; --n-tenue:#647386;
  --mo-fondo:#0b1622; --mo-sup:#111f2e; --mo-sup2:#172a3d; --mo-campo:#0d1927; --mo-lateral:#0d1a28;
  --mo-borde:#22384d; --mo-borde-fuerte:#2e4a63; --mo-borde-control:#4a6682; --mo-borde-hover:#5d9bd6;
  --mo-texto:#e8eef5; --mo-texto-2:#b4c2d1; --mo-texto-3:#9fb0c2; --mo-tenue:#8b9db1;
  --mo-enlace:#7cc4f0; --mo-enlace-hover:#a8d8f6; --mo-acento:#bfe0f7;
  --mo-primario:#1f6cb5; --mo-primario-hover:#1a63a8; --mo-sobre-primario:#ffffff; --mo-foco:#7cc4f0;
  --mo-anillo:rgba(66,200,244,.28); --mo-sel:rgba(66,200,244,.14); --mo-sel-solida:#16334a;
  --mo-medida:#42c8f4; --mo-medida-baja:#d9785a; --mo-avance:#3f8fd8; --mo-avance-cerca:#62a8e6;
  --mo-nivel-6:#9cc9ee; --mo-nivel-5:#6fb0e6; --mo-nivel-4:#4a90d0; --mo-nivel-3:#2f73b3; --mo-nivel-2:#42c8f4; --mo-nivel-1:#4a6682;
  --mo-activo-fondo:rgba(66,200,244,.16); --mo-activo-texto:#b5e8fb;
  --mo-g1:#6fb0e6; --mo-g2:#3f8fd8; --mo-g3:#42c8f4; --mo-g4:#1f6f8f; --mo-g-sobre:#08121c;
  --mo-calido:#f08a5d; --mo-calido-tinte:rgba(240,138,93,.14);
  --mo-capa:rgba(2,8,14,.66); --mo-placa:#eef3f8;
}

/* ── 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.
   Leen el juego --mo: cambiar de marca no toca estos bloques. La elevación va
   con borde, sin sombra: una sombra sobre un fondo oscuro no se ve. */
@media screen and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:var(--mo-fondo); --superficie:var(--mo-sup); --superficie-2:var(--mo-sup2); --campo-fondo:var(--mo-campo);
    --borde:var(--mo-borde); --borde-fuerte:var(--mo-borde-fuerte); --borde-control:var(--mo-borde-control); --borde-hover:var(--mo-borde-hover);
    --texto:var(--mo-texto); --texto-2:var(--mo-texto-2); --texto-3:var(--mo-texto-3); --texto-tenue:var(--mo-tenue);
    --enlace:var(--mo-enlace); --enlace-hover:var(--mo-enlace-hover); --acento:var(--mo-acento);
    --primario:var(--mo-primario); --primario-hover:var(--mo-primario-hover); --sobre-primario:var(--mo-sobre-primario);
    --foco:var(--mo-foco); --anillo-foco:var(--mo-anillo);
    --seleccion:var(--mo-sel); --seleccion-solida:var(--mo-sel-solida); --marca-tinte:var(--mo-activo-fondo);
    --medida:var(--mo-medida); --medida-baja:var(--mo-medida-baja); --realce:var(--mo-medida);
    --avance:var(--mo-avance); --avance-cerca:var(--mo-avance-cerca);
    --calido:var(--mo-calido); --calido-tinte:var(--mo-calido-tinte);
    --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:var(--mo-nivel-6); --nivel-5:var(--mo-nivel-5); --nivel-4:var(--mo-nivel-4); --nivel-3:var(--mo-nivel-3); --nivel-2:var(--mo-nivel-2); --nivel-1:var(--mo-nivel-1);
    --lateral-fondo:var(--mo-lateral); --lateral-borde:var(--mo-borde);
    --lateral-texto:var(--mo-texto-2); --lateral-texto-fuerte:var(--mo-texto); --lateral-tenue:var(--mo-tenue);
    --lateral-hover:var(--mo-sup2); --lateral-linea:var(--mo-borde); --lateral-acento:var(--mo-enlace);
    --lateral-activo-fondo:var(--mo-activo-fondo); --lateral-activo-texto:var(--mo-activo-texto);
    --g-navy:var(--mo-g1); --g-navy2:var(--mo-g2); --g-cian:var(--mo-g3); --g-cian2:var(--mo-g4);
    --g-naranja:#f08a5d; --g-ok:#4ade80; --g-aviso:#fbbf24; --g-alerta:#f59a7f;
    --g-linea:var(--mo-borde-fuerte); --g-tenue:var(--mo-texto-3); --g-tinta:var(--mo-texto); --g-sobre:var(--mo-g-sobre);
    --placa-logo:var(--mo-placa);
    --sombra-accion:none; --sombra-flotante:0 8px 30px rgba(0,0,0,.5); --capa:var(--mo-capa);
    color-scheme:dark;
  }
}
@media screen{
  :root[data-theme="dark"]{
    --fondo:var(--mo-fondo); --superficie:var(--mo-sup); --superficie-2:var(--mo-sup2); --campo-fondo:var(--mo-campo);
    --borde:var(--mo-borde); --borde-fuerte:var(--mo-borde-fuerte); --borde-control:var(--mo-borde-control); --borde-hover:var(--mo-borde-hover);
    --texto:var(--mo-texto); --texto-2:var(--mo-texto-2); --texto-3:var(--mo-texto-3); --texto-tenue:var(--mo-tenue);
    --enlace:var(--mo-enlace); --enlace-hover:var(--mo-enlace-hover); --acento:var(--mo-acento);
    --primario:var(--mo-primario); --primario-hover:var(--mo-primario-hover); --sobre-primario:var(--mo-sobre-primario);
    --foco:var(--mo-foco); --anillo-foco:var(--mo-anillo);
    --seleccion:var(--mo-sel); --seleccion-solida:var(--mo-sel-solida); --marca-tinte:var(--mo-activo-fondo);
    --medida:var(--mo-medida); --medida-baja:var(--mo-medida-baja); --realce:var(--mo-medida);
    --avance:var(--mo-avance); --avance-cerca:var(--mo-avance-cerca);
    --calido:var(--mo-calido); --calido-tinte:var(--mo-calido-tinte);
    --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:var(--mo-nivel-6); --nivel-5:var(--mo-nivel-5); --nivel-4:var(--mo-nivel-4); --nivel-3:var(--mo-nivel-3); --nivel-2:var(--mo-nivel-2); --nivel-1:var(--mo-nivel-1);
    --lateral-fondo:var(--mo-lateral); --lateral-borde:var(--mo-borde);
    --lateral-texto:var(--mo-texto-2); --lateral-texto-fuerte:var(--mo-texto); --lateral-tenue:var(--mo-tenue);
    --lateral-hover:var(--mo-sup2); --lateral-linea:var(--mo-borde); --lateral-acento:var(--mo-enlace);
    --lateral-activo-fondo:var(--mo-activo-fondo); --lateral-activo-texto:var(--mo-activo-texto);
    --g-navy:var(--mo-g1); --g-navy2:var(--mo-g2); --g-cian:var(--mo-g3); --g-cian2:var(--mo-g4);
    --g-naranja:#f08a5d; --g-ok:#4ade80; --g-aviso:#fbbf24; --g-alerta:#f59a7f;
    --g-linea:var(--mo-borde-fuerte); --g-tenue:var(--mo-texto-3); --g-tinta:var(--mo-texto); --g-sobre:var(--mo-g-sobre);
    --placa-logo:var(--mo-placa);
    --sombra-accion:none; --sombra-flotante:0 8px 30px rgba(0,0,0,.5); --capa:var(--mo-capa);
    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;
  /* Ola 7: entradas y avisos sobre un halo del color de la marca, no sobre gris liso. */
  background:radial-gradient(ellipse at 10% -10%, var(--marca-tinte) 0, transparent 55%), radial-gradient(ellipse at 100% 110%, var(--marca-tinte) 0, transparent 50%), var(--fondo); }
body.centrado > main.tarjeta{ box-shadow:inset 0 4px 0 var(--acento), var(--sombra-accion); }

/* ── 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 y clara. 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
   la cuenta aunque en el HTML vaya fuera del cajón. La lista es lo único que
   se desplaza: marca, buscador, pie y cuenta se quedan quietos. */
.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 plegar" "ira ira" "nav nav" "pie pie" "cuenta salir";
}
.boton-menu, .cajon-cabeza, .capa-menu{ display:none; }
.lateral-cajon{ display:contents; }
.lateral-marca{
  grid-area:marca; display:flex; align-items:center; gap:10px; padding:16px 6px 12px 16px; min-width:0;
  text-decoration:none; color:inherit;
}
.lateral-marca img{ height:32px; width:auto; flex:none; border-radius:8px; }
.lateral-marca > span{ min-width:0; }
.lateral-marca b{ font-size:.95rem; font-weight:700; letter-spacing:-.01em; display:block; color:var(--lateral-texto-fuerte); line-height:1.25; }
.lateral-marca span span{ font-size:.75rem; color:var(--lateral-tenue); display:block; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Las iniciales de una empresa sin isotipo, en el color de la marca. */
.lateral-marca .marca-iniciales{ display:inline-flex; flex:none; margin-top:0; width:32px; height:32px; border-radius:9px; font-size:.8rem;
  background:var(--primario); color:var(--sobre-primario); }
.yo-marca .marca-iniciales{ display:inline-flex; flex:none; margin-top:0; font-size:.8rem; }

.ir-a{ grid-area:ira; position:relative; margin:4px 12px 6px; }
.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:38px; padding:6px 64px 6px 32px; font-size:.86rem; border-radius:10px;
  background:var(--fondo); 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); }
.ir-a-atajo{ position:absolute; right:8px; top:50%; transform:translateY(-50%); pointer-events:none;
  font:500 .7rem/1 inherit; color:var(--lateral-tenue); border:1px solid var(--lateral-linea); border-radius:5px; padding:3px 5px; background:var(--lateral-fondo); white-space:nowrap; }
@media (pointer:coarse){ .lateral .ir-a input{ min-height:44px; } .ir-a-atajo{ display:none; } }

/* La lista: se desplaza sola, sin arrastrar la página (overscroll), con una
   sombra arriba o abajo cuando queda algo fuera de la vista. Las dos capas
   «local» tapan la sombra cuando ya se está en el borde. */
.lateral-nav{
  grid-area:nav; overflow-y:auto; overscroll-behavior:contain; padding:4px 10px 12px;
  scrollbar-width:thin; scrollbar-color:var(--borde-fuerte) transparent;
  background:
    linear-gradient(var(--lateral-fondo) 30%, transparent) center top,
    linear-gradient(transparent, var(--lateral-fondo) 70%) center bottom,
    linear-gradient(var(--lateral-linea), transparent) center top,
    linear-gradient(transparent, var(--lateral-linea)) center bottom;
  background-repeat:no-repeat;
  background-size:100% 28px, 100% 28px, 100% 10px, 100% 10px;
  background-attachment:local, local, scroll, scroll;
}
.lateral-nav-pie{ overflow:visible; padding:0; background:none; }
.grupo-nav{ margin:0 0 1px; }
/* Inicio, una sección y sus entradas comparten forma: ícono a la izquierda,
   texto, y el tinte de la marca para lo activo. */
.grupo-nav > summary, .lateral-nav a.nav-suelto, .lateral-pie a.lateral-ayuda, .lateral .tema-conmutador > summary{
  list-style:none; cursor:pointer; display:flex; flex-direction:row; align-items:center; gap:11px;
  min-height:38px; padding:7px 10px; border-radius:10px;
  font-size:.9rem; font-weight:600; color:var(--lateral-texto); text-decoration:none;
  transition:background-color .12s ease, color .12s ease;
}
.grupo-nav > summary::-webkit-details-marker{ display:none; }
.grupo-nav > summary .ico, .lateral-nav a.nav-suelto .ico, .lateral-pie a.lateral-ayuda .ico, .lateral .tema-conmutador > summary .ico{ width:19px; height:19px; color:var(--lateral-tenue); }
.grupo-nav > summary:hover, .lateral-nav a.nav-suelto:hover, .lateral-pie a.lateral-ayuda:hover, .lateral .tema-conmutador > summary:hover{ background:var(--lateral-hover); color:var(--lateral-texto-fuerte); }
.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); }
/* La sección de la página actual se marca aun cerrada: se ve dónde se está. */
.grupo-nav[data-grupo-activo] > summary, .grupo-nav[data-grupo-activo] > summary .ico{ color:var(--lateral-activo-texto); }
.lateral-nav a.nav-suelto.activo, .lateral-pie a.lateral-ayuda.activo{ background:var(--lateral-activo-fondo); color:var(--lateral-activo-texto); }
.lateral-nav a.nav-suelto.activo .ico, .lateral-pie a.lateral-ayuda.activo .ico{ color:var(--lateral-activo-texto); }

.grupo-sub{ margin:1px 0 6px 19px; padding-left:11px; border-left:1px solid var(--lateral-linea); display:flex; flex-direction:column; gap:1px; }
.grupo-sub-titulo{ display:none; }
.grupo-sub a{
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; min-height:32px;
  color:var(--lateral-texto); text-decoration:none; font-size:.86rem; font-weight:500; line-height:1.3;
  transition:background-color .12s ease, color .12s ease;
}
.grupo-sub a:hover{ background:var(--lateral-hover); color:var(--lateral-texto-fuerte); }
.grupo-sub a.activo{ background:var(--lateral-activo-fondo); color:var(--lateral-activo-texto); font-weight:600; }
/* Las páginas que viven como pestañas: solo aparecen al buscar, con su entrada al lado. */
.grupo-sub a.nav-alias small{ margin-left:auto; color:var(--lateral-tenue); font-size:.72rem; white-space:nowrap; }
.ir-a-nada{ padding:6px 10px; margin:0; color:var(--lateral-tenue); }

.lateral-pie{ grid-area:pie; position:relative; display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-top:1px solid var(--lateral-linea); min-width:0; }
/* Ajustes abre hacia arriba, flotando: abierto en el pie se comía la lista en
   pantallas bajas (en 500 px de alto la dejaba en 86). En el cajón del
   teléfono no: ahí todo el cajón se desplaza y va en línea. */
@media (min-width:901px){
  .lateral-nav-pie .grupo-nav[open] > .grupo-sub{
    position:absolute; left:10px; right:10px; bottom:calc(100% - 4px); z-index:60; margin:0; padding:8px;
    background:var(--superficie); border:1px solid var(--borde-fuerte); border-radius:12px; box-shadow:var(--sombra-flotante);
  }
  .lateral-nav-pie .grupo-sub-titulo{ display:block; margin:2px 10px 6px; font-size:.74rem; font-weight:700; color:var(--texto-tenue); }
}
/* El tema, una fila más del pie. */
.lateral .tema-conmutador{ padding:0; }
.lateral .tema-conmutador > summary [data-tema-nombre]{ color:var(--lateral-texto-fuerte); }
.lateral .tema-opciones{ left:0; right:0; }
/* La cuenta y «Salir», al fondo. */
.lateral-cuenta{
  grid-area:cuenta; display:flex; align-items:center; gap:10px; min-width:0; padding:10px 4px 12px 16px;
  border-top:1px solid var(--lateral-linea); color:var(--lateral-texto-fuerte); text-decoration:none;
}
.lateral-cuenta:hover .lateral-cuenta-texto{ color:var(--lateral-acento); }
.avatar-iniciales{ width:32px; height:32px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--calido-tinte); color:var(--calido); font-size:.76rem; font-weight:700; }
.lateral-cuenta-texto{ min-width:0; font-size:.84rem; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lateral-cuenta-texto .min{ display:block; color:var(--lateral-tenue); font-size:.72rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
/* El anillo de foco, en el color de la barra. */
: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:10px 12px 12px 4px;
  border-top:1px solid var(--lateral-linea);
}
/* En el escritorio «Salir» es solo el ícono (con su nombre para lectores y al pasar). */
.lateral-salir .btn{ min-width:38px; min-height:38px; padding:0 9px; }
.lateral-salir .btn .ico{ width:17px; height:17px; }
@media (min-width:901px){
  .lateral-salir .btn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}

/* ── 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; }
.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; }
/* Pestañas de la entrada (Evaluaciones · 360 · Objetivos…): un selector
   segmentado arriba del todo. No es una fila subrayada a propósito: muchas
   pantallas ya tienen sus propias pestañas (Resumen · Plantilla…) y dos filas
   iguales no dicen cuál manda. Se desplaza sola si no cabe. */
.cuerpo-panel.cuerpo-pestanas{ padding-bottom:0; }   /* más fuerte que el padding del teléfono (≤862 px), que la dejaba con 60 px de hueco */
.cuerpo-pestanas + .cuerpo-panel{ padding-top:18px; }
.pestanas-seccion{ display:flex; width:fit-content; max-width:100%; gap:2px; padding:4px; overflow-x:auto; scrollbar-width:none;
  background:var(--superficie-2); border:1px solid var(--borde); border-radius:12px; }
.pestanas-seccion::-webkit-scrollbar{ display:none; }
.pestanas-seccion a{
  flex:none; padding:7px 14px; border-radius:9px; min-height:34px; display:inline-flex; align-items:center;
  color:var(--texto-2); text-decoration:none; font-size:.86rem; font-weight:600; white-space:nowrap;
}
.pestanas-seccion a:hover{ color:var(--texto); background:var(--superficie); }
.pestanas-seccion a.activo{ color:var(--acento); background:var(--superficie); box-shadow:var(--sombra-accion); }
.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); }
/* Dos tamaños: normal y compacto. «mini» era casi igual a «chico» y bajaba a
   30 px; ahora es el mismo compacto (en pantalla táctil, 44, más abajo). */
.btn-chico, .btn-mini{ padding:7px 13px; min-height:36px; font-size:.82rem; }
: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:44px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
:is(input, select, textarea):hover:not(:disabled):not(:focus){ border-color:var(--borde-hover); }
/* Casillas y opciones en el color de la marca, a un tamaño que se acierta. */
input[type=checkbox], input[type=radio]{ accent-color:var(--primario); width:18px; height:18px; flex:none; }
/* 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-marca{ background:var(--marca-tinte); color:var(--acento); }
.chip-calido{ background:var(--calido-tinte); color:var(--calido); }
.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 ─────────────────────────────────────────────────────────────── */
/* Avisos: un ícono por tipo a la izquierda (i, !, ✓) en lugar del filo grueso.
   Varios seguidos se funden en un solo bloque con separadores: antes eran
   franjas sueltas apiladas que se comían el principio de la pantalla. */
.nota{
  position:relative; border-radius:12px; padding:12px 16px 12px 44px; font-size:.88rem;
  margin-bottom:18px; border:1px solid transparent; line-height:1.55;
}
.nota::before{
  content:"i"; position:absolute; left:14px; top:12px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; line-height:1;
  background:var(--filo-info); color:var(--superficie);
}
.nota p:last-child{ margin-bottom:0; }
.nota-info{ background:var(--info-tinte); border-color:var(--info-borde); color:var(--info); }
.nota-ok{ background:var(--ok-tinte); border-color:var(--ok-tinte); color:var(--ok); }
.nota-ok::before{ content:"✓"; background:var(--ok); }
.nota-aviso{ background:var(--aviso-tinte); border-color:var(--aviso-borde); color:var(--aviso); }
.nota-aviso::before{ content:"!"; background:var(--aviso); }
.nota-alerta{ background:var(--alerta-tinte); border-color:var(--alerta-borde); color:var(--alerta); }
.nota-alerta::before{ content:"!"; background:var(--alerta); }
.nota:has(+ .nota){ margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.nota + .nota{ border-top-left-radius:0; border-top-right-radius:0; border-top-color:transparent; }
.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(--filo-info); 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). */
/* «Cómo funciona»: un botón chico junto al título que abre un panel flotante
   (antes empujaba toda la pantalla hacia abajo). El detalle completo vive en
   el centro de ayuda: panel.js añade el enlace al final del panel. */
.como-funciona{ position:relative; display:inline-block; margin-top:8px; font-size:.86rem; color:var(--texto-2); }
.como-funciona > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 6px; border-radius:999px;
  font-size:.8rem; font-weight:600; color:var(--texto-2); background:var(--superficie-2); border:1px solid var(--borde);
}
.como-funciona > summary::-webkit-details-marker{ display:none; }
.como-funciona > summary::before{ content:"?"; width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; background:var(--marca-tinte); color:var(--acento); }
.como-funciona > summary:hover, .como-funciona[open] > summary{ color:var(--acento); border-color:var(--borde-hover); }
.como-funciona[open]{ z-index:45; }
.como-funciona-panel{
  position:absolute; left:0; top:calc(100% + 8px); z-index:45; width:min(620px, 86vw); max-height:min(60vh, 520px); overflow-y:auto;
  padding:16px 18px; border:1px solid var(--borde-fuerte); border-radius:14px; background:var(--superficie); box-shadow:var(--sombra-flotante); line-height:1.55;
}
.como-funciona-panel > :first-child{ margin-top:0; }
.como-funciona-panel p{ margin:0 0 10px; }
.como-funciona-ayuda{ display:flex; align-items:center; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid var(--borde); font-weight:600; }
@media (pointer:coarse){ .como-funciona > summary{ min-height:40px; padding:6px 12px 6px 8px; } .como-funciona-ayuda{ min-height:44px; } }

/* ── 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;
}
/* Cada bloque lleva arriba un filo corto de color (marca, cálido, verde, azul,
   en ese orden): se distinguen de un vistazo sin pintar la tarjeta entera. */
.cifra-bloque{ position:relative; padding:28px 20px 16px; border-left:1px solid var(--borde); }
.cifra-bloque:first-child{ border-left:0; }
.cifra-bloque::before{ content:""; position:absolute; left:20px; top:16px; width:28px; height:4px; border-radius:4px; background:var(--primario); }
.cifra-bloque:nth-child(4n+2)::before{ background:var(--medida); }
.cifra-bloque:nth-child(4n+3)::before{ background:var(--ok); }
.cifra-bloque:nth-child(4n+4)::before{ background:var(--filo-info); }
.cifra-n{ margin:0; font-size:34px; font-weight:800; line-height:1.05; letter-spacing:-.03em; 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); }
.grafico .gf-calido{ fill:var(--medida); }   .grafico .gs-calido{ stroke:var(--medida); }

/* ── 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:16px 16px; align-items:start; 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) auto 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{ display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; white-space:nowrap; }
.fp-marcas{ display:flex; gap:5px; justify-content:flex-end; }
/* Perfil, DPT y rutas: tres puntos con su nombre (title y lector de pantalla). */
.punto-estado{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.punto-estado.listo{ background:var(--ok); }
.punto-estado.falta{ background:transparent; box-shadow:inset 0 0 0 2px var(--aviso-borde); }
.punto-estado.curso{ background:var(--filo-info); }

/* El árbol plegable: la flecha con el número de puestos de la rama a la
   izquierda de la fila; las hojas guardan ese hueco para alinearse. */
.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; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:start; }
.arbol li.con-rama{ display:block; }
.arbol-sum{ list-style:none; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:start; cursor:pointer; }
.arbol-sum::-webkit-details-marker{ display:none; }
.arbol ul > li::before{
  content:""; position:absolute; left:-16px; top:22px; width:12px; height:1px; background:var(--borde);
}
.arbol-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:2px; margin-top:8px;
  width:30px; height:28px; border-radius:8px; font-size:.7rem; font-weight:700; color:var(--texto-2); background:var(--superficie-2); }
.arbol-toggle::before{ content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); margin-right:2px; transition:transform .15s ease; }
details[open] > .arbol-sum .arbol-toggle::before{ transform:rotate(45deg); }
.arbol-sum:hover .arbol-toggle{ color:var(--acento); background:var(--marca-tinte); }
.arbol .atenuado .fila-puesto{ opacity:.45; }
@media (pointer:coarse){ .arbol-toggle{ width:40px; height:40px; } .arbol li, .arbol-sum{ grid-template-columns:44px minmax(0,1fr); } }

/* ── Organigrama en cajas (vista «Gráfico») ─────────────────────────────────
   De arriba abajo, con las líneas de unión dibujadas con bordes. Tres niveles;
   lo de más abajo se abre por rama. */
.org-marco{ padding:6px 0 14px; }
/* Centrado si cabe; si no, empieza en el borde izquierdo (centrado con
   desborde, lo de la izquierda quedaba fuera del alcance del desplazamiento). */
.org{ list-style:none; display:flex; justify-content:center; width:max-content; margin:0 auto; padding:0 12px; }
.org ul{ list-style:none; margin:0; display:flex; justify-content:center; padding:22px 0 0; position:relative; }
.org ul::before{ content:""; position:absolute; top:0; left:50%; height:22px; border-left:2px solid var(--borde-fuerte); }
.org li{ position:relative; display:flex; flex-direction:column; align-items:center; padding:22px 8px 0; }
.org > li{ padding-top:0; }
.org ul > li::before{ content:""; position:absolute; top:0; width:50%; height:22px; border-top:2px solid var(--borde-fuerte); right:50%; }
.org ul > li::after{ content:""; position:absolute; top:0; width:50%; height:22px; border-top:2px solid var(--borde-fuerte); left:50%; border-left:2px solid var(--borde-fuerte); }
.org ul > li:only-child::before, .org ul > li:only-child::after{ display:none; }
.org ul > li:only-child{ padding-top:0; }
.org ul > li:first-child::before, .org ul > li:last-child::after{ border:0; }
.org ul > li:last-child::before{ border-right:2px solid var(--borde-fuerte); border-radius:0 8px 0 0; }
.org ul > li:first-child::after{ border-radius:8px 0 0 0; }
.org-caja{
  display:flex; flex-direction:column; align-items:center; gap:4px; width:170px; padding:12px 10px 10px; text-align:center;
  background:var(--superficie); border:1px solid var(--borde); border-top:4px solid var(--nivel-3); border-radius:12px; box-shadow:var(--sombra-accion);
}
.org-caja.nivel-6{ border-top-color:var(--nivel-6); } .org-caja.nivel-5{ border-top-color:var(--nivel-5); }
.org-caja.nivel-4{ border-top-color:var(--nivel-4); } .org-caja.nivel-2{ border-top-color:var(--nivel-2); } .org-caja.nivel-1{ border-top-color:var(--nivel-1); }
.org-nombre{ font-weight:700; font-size:.86rem; line-height:1.25; color:var(--texto); text-decoration:none; }
.org-nombre:hover{ color:var(--enlace); text-decoration:underline; }
.org-caja .fp-gente{ justify-content:center; flex-wrap:wrap; white-space:normal; }
.org-mas{ margin-top:4px; font-size:.74rem; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--marca-tinte); color:var(--acento); text-decoration:none; }
.org-mas:hover{ background:var(--acento); color:var(--superficie); }
.org-migas{ margin:0 0 12px; }
/* El tercer nivel en columna, colgado de una línea a la izquierda. */
.org ul.org-pila{ display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:14px 0 0 18px; margin-left:22px; border-left:2px solid var(--borde-fuerte); }
.org ul.org-pila::before{ display:none; }
.org ul.org-pila > li{ padding:0; }
.org ul.org-pila > li::before{ content:""; position:absolute; display:block; left:-18px; top:26px; width:16px; height:0; border-top:2px solid var(--borde-fuerte); border-right:0; border-radius:0; }
.org ul.org-pila > li::after{ display:none; }
.org ul.org-pila .org-caja{ width:160px; align-items:flex-start; text-align:left; padding:8px 10px; border-top-width:1px; border-left:4px solid var(--nivel-3); box-shadow:none; }
.org ul.org-pila .org-caja .fp-gente{ justify-content:flex-start; }
.org ul.org-pila .org-caja.nivel-6{ border-left-color:var(--nivel-6); } .org ul.org-pila .org-caja.nivel-5{ border-left-color:var(--nivel-5); }
.org ul.org-pila .org-caja.nivel-4{ border-left-color:var(--nivel-4); } .org ul.org-pila .org-caja.nivel-2{ border-left-color:var(--nivel-2); }
.org ul.org-pila .org-caja.nivel-1{ border-left-color:var(--nivel-1); }

.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; display:flex; flex-direction:column; gap:12px; }
.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, .grupo-nav > summary, .lateral .tema-conmutador > summary{ min-height:44px; display:flex; align-items:center; }
  .pestanas-seccion a, .lateral-salir .btn{ min-height:44px; }
  .lateral-marca, .yo-marca{ min-height:44px; min-width:44px; }
  .lateral-pie a, .lateral-cuenta{ 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:9px 14px 9px 42px; font-size:.84rem; line-height:1.45; margin:0; }
.nota-compacta::before{ top:9px; left:13px; width:18px; height:18px; font-size:.66rem; }
.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:0; }
.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:16px 16px; align-items:start; 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); }
/* La ayuda de un campo, debajo y discreta: dentro de la etiqueta heredaba su
   negrita y competía con el nombre del campo. */
:is(.form, .formulario-kr, .caja-accion, .bloque-validacion, .seccion-dpt) label > .min,
:is(.form, .formulario-kr, .caja-accion, .bloque-validacion, .seccion-dpt) label > .campo-ayuda{
  font-size:.78rem; font-weight:400; line-height:1.45; color:var(--texto-tenue);
}
/* La fila del botón principal, al final y separada: se sabe dónde termina el formulario. */
:is(.form, .formulario-kr) > :is(div, p):last-child:has(> .btn-primario){
  grid-column:1 / -1; display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
  margin-top:4px; padding-top:16px; border-top:1px solid var(--borde);
}
:is(.form, .formulario-kr) > :is(div, p):last-child:has(> .btn-primario) > .min{ flex:1 1 260px; color:var(--texto-tenue); }
.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; min-height:44px; }
  .lateral-marca img{ height:30px; }
  .lateral-marca .marca-iniciales{ width:30px; height:30px; }
  .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; }
  /* En el cajón se desplaza el cajón entero, no la lista: una sola barra. */
  .lateral-nav{ overflow:visible; flex:1 0 auto; padding:8px 12px 12px; background:none; }
  .lateral-nav-pie{ padding:0; }
  .ir-a-atajo{ display:none; }
  .lateral .ir-a input{ padding-right:10px; }
  .lateral-pie{ padding:8px 12px; }
  .lateral-cuenta{ 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. */
.bandeja-lista{ list-style:none; margin:0; padding:0; }
.bandeja-fila{
  display:grid; grid-template-columns:auto 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-que{ min-width:0; overflow-wrap:anywhere; }
.bandeja-que .chip{ margin-right:4px; }
.bandeja-todo{ margin:10px 0 0; }
@media (max-width:640px){
  .bandeja-fila{ grid-template-columns:auto minmax(0,1fr) auto; gap:4px 10px; }
  .bandeja-fila .avatar{ grid-row:1 / span 2; align-self:start; }
  .bandeja-que{ grid-column:2; }
  .bandeja-fecha{ grid-column:2; grid-row:2; }
  .bandeja-fila .btn{ grid-column:3; grid-row:1 / span 2; }
}

/* ── Tablero (Inicio) ───────────────────────────────────────────────────────
   Indicadores arriba, accesos rápidos, y dos columnas: lo que pide una
   decisión a la izquierda y «hoy en la empresa» a la derecha. */
.kpis{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.kpi{
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ico et" "n n" "pie pie" "graf graf"; align-items:center; gap:4px 10px;
  padding:16px 18px; background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio-grande);
  color:var(--texto); text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kpi:hover{ border-color:var(--borde-hover); box-shadow:var(--sombra-accion); }
@media (prefers-reduced-motion:no-preference){ .kpi:hover{ transform:translateY(-1px); } }
.kpi-ico{ grid-area:ico; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; }
.kpi-ico .ico{ width:18px; height:18px; }
.kpi-marca{ background:var(--marca-tinte); color:var(--acento); }
.kpi-calido{ background:var(--calido-tinte); color:var(--calido); }
.kpi-info{ background:var(--info-tinte); color:var(--info); }
.kpi-alerta{ background:var(--alerta-tinte); color:var(--alerta); }
.kpi-ok{ background:var(--ok-tinte); color:var(--ok); }
.kpi-et{ grid-area:et; font-size:.84rem; font-weight:600; color:var(--texto-2); }
.kpi-n{ grid-area:n; font-size:2rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; margin-top:6px; }
.kpi-pie{ grid-area:pie; font-size:.8rem; color:var(--texto-tenue); display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:24px; }
.kpi .grafico-chispa{ grid-area:graf; margin-top:4px; }
.kpi .grafico-chispa svg{ height:36px; }
.kpi-delta{ display:inline-flex; align-items:center; gap:3px; font-weight:700; padding:1px 7px 1px 5px; border-radius:999px; }
.kpi-delta .ico{ width:14px; height:14px; }
.kpi-delta.sube{ background:var(--ok-tinte); color:var(--ok); }
.kpi-delta.baja{ background:var(--alerta-tinte); color:var(--alerta); }

.accesos-rapidos{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.acceso{
  display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:56px;
  background:var(--superficie); border:1px dashed var(--borde-fuerte); border-radius:var(--radio-grande);
  color:var(--texto); text-decoration:none; font-weight:600; font-size:.9rem; transition:border-color .15s ease, background-color .15s ease;
}
.acceso:hover{ border-style:solid; border-color:var(--borde-hover); background:var(--superficie-2); }
.acceso-ico{ width:32px; height:32px; flex:none; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--marca-tinte); color:var(--acento); }
.acceso-ico .ico{ width:17px; height:17px; }
.acceso-flecha{ margin-left:auto; width:16px; height:16px; color:var(--texto-tenue); }
.acceso:hover .acceso-flecha{ color:var(--acento); }

.tablero{ display:grid; gap:0 18px; grid-template-columns:minmax(0, 1.6fr) minmax(280px, 1fr); align-items:start; }
@media (max-width:1100px){ .tablero{ grid-template-columns:minmax(0,1fr); } }
.tablero .tarjeta-cabeza h2{ display:flex; align-items:center; gap:8px; margin:0; }
.tablero .tarjeta-cabeza h2 .ico{ width:19px; height:19px; color:var(--acento); }
.cuenta-chip{ font-size:.76rem; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--superficie-2); color:var(--texto-2); }
.cuenta-chip.cuenta-alerta{ background:var(--alerta-tinte); color:var(--alerta); }
.tarjeta-calida{ background:linear-gradient(180deg, var(--calido-tinte), var(--superficie) 70%); }
.tarjeta-calida .tarjeta-cabeza h2 .ico{ color:var(--calido); }

.lista-personas{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; }
.lista-personas li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--borde); min-width:0; }
.lista-personas li:first-child{ border-top:0; padding-top:0; }
.lista-personas li > span:not(.avatar){ min-width:0; flex:1; }
.lista-personas a{ font-weight:600; text-decoration:none; color:var(--texto); }
.lista-personas a:hover{ color:var(--enlace); text-decoration:underline; }
.cel-ico{ width:18px; height:18px; color:var(--calido); flex:none; }

/* Avatares con iniciales: seis tintes que ya existen en los dos temas. */
.avatar{ width:34px; height:34px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.76rem; font-weight:700; letter-spacing:.02em; }
.avatar.av-1{ background:var(--marca-tinte); color:var(--acento); }
.avatar.av-2{ background:var(--calido-tinte); color:var(--calido); }
.avatar.av-3{ background:var(--ok-tinte); color:var(--ok); }
.avatar.av-4{ background:var(--info-tinte); color:var(--info); }
.avatar.av-5{ background:var(--aviso-tinte); color:var(--aviso); }
.avatar.av-6{ background:var(--superficie-2); color:var(--texto-2); }
.avatar-chico{ width:26px; height:26px; font-size:.64rem; border:2px solid var(--superficie); }
.avatares{ display:inline-flex; }
.avatares .avatar + .avatar{ margin-left:-8px; }

.sem-anillos{ display:flex; flex-wrap:wrap; gap:14px 22px; margin-bottom:12px; }
.sem-anillo{ display:flex; align-items:center; gap:10px; }
.anillo-caja{ position:relative; width:64px; height:64px; flex:none; }
.avatar-ico{ background:var(--superficie-2); color:var(--texto-2); }
.avatar-ico .ico{ width:17px; height:17px; }
/* Barras de una lista corta (plantilla por área): <progress>, que se dibuja
   sin style= y se lee con su valor al lado. */
.barras-lista{ list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:10px; }
.barras-lista li{ display:grid; grid-template-columns:minmax(0, 8rem) minmax(0,1fr) 2.5rem; gap:10px; align-items:center; font-size:.86rem; }
.barras-et{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--texto-2); }
.barras-n{ text-align:right; font-weight:700; }
.anillo-n{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.05rem; }

/* ── 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:var(--papel); 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, Quincenea 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); }

/* ── 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; }
/* Hechos: fondo hundido y no opacity (bajaba el texto a 3,2:1). */
.primer-uso-pasos li.hecho{ background:var(--superficie-2); border-color:transparent; }
.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:var(--g-sobre); }
.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 ──────────────────────────── */
/* Cada sección abre su panel flotante al lado (panel.js lo coloca a la altura
   del ícono y lo cierra al tocar fuera o con Escape). Los nombres siguen ahí
   para el lector de pantalla y en el title de cada ícono. */
.lateral-plegar{ grid-area:plegar; align-self:start; margin:18px 10px 0 0; width:30px; height:30px; 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:17px; height:17px; }
@media (min-width:901px){
  html.lateral-plegada{ --lateral:72px; }
  html.lateral-plegada .lateral{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;
    grid-template-areas:"marca" "plegar" "ira" "nav" "pie" "cuenta" "salir"; }
  html.lateral-plegada :is(.lateral-marca > span:not(.marca-iniciales), .grupo-nav > summary > span, .grupo-nav > summary .ico-flecha, .nav-suelto > span,
    .lateral-ayuda > span, .tema-etiqueta, .ir-a, .etq-nuevo, .ir-a-nada, .lateral-cuenta-texto){ display:none !important; }
  html.lateral-plegada .lateral-marca{ padding:16px 0 8px; justify-content:center; }
  html.lateral-plegada .lateral-plegar{ justify-self:center; margin:0 0 6px; }
  html.lateral-plegada .lateral-nav{ padding:4px 12px 12px; }
  html.lateral-plegada .lateral-nav-pie{ padding:0; }
  html.lateral-plegada :is(.grupo-nav > summary, .lateral-nav a.nav-suelto, .lateral-pie a.lateral-ayuda, .lateral .tema-conmutador > summary){ justify-content:center; padding:9px 0; }
  html.lateral-plegada .grupo-nav[open] > summary{ background:var(--lateral-hover); }
  html.lateral-plegada .grupo-nav[data-grupo-activo] > summary{ background:var(--lateral-activo-fondo); }
  html.lateral-plegada .lateral-pie{ padding:8px 12px; }
  html.lateral-plegada .lateral-cuenta{ justify-content:center; padding:10px 0 6px; }
  html.lateral-plegada .lateral-salir{ justify-content:center; padding:0 0 12px; border-top:0; }
  /* El panel flotante de una sección. --flotante-top lo pone panel.js. */
  html.lateral-plegada .grupo-nav[open] > .grupo-sub{
    position:fixed; left:calc(var(--lateral) + 6px); top:var(--flotante-top, 80px); z-index:60;
    width:236px; max-height:calc(100vh - 24px); overflow-y:auto; margin:0; padding:8px;
    background:var(--superficie); border:1px solid var(--borde-fuerte); border-radius:12px; box-shadow:var(--sombra-flotante);
  }
  html.lateral-plegada .grupo-sub-titulo{ display:block; margin:2px 10px 6px; font-size:.74rem; font-weight:700; color:var(--texto-tenue); }
  html.lateral-plegada .lateral .tema-opciones{ left:calc(100% + 6px); right:auto; bottom: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:var(--papel); 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; }

/* ── Marca de la empresa (/admin/marca) ─────────────────────────────────── */
.marca-color-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; margin-bottom:12px; }
.marca-color-fila input[type=color]{ width:72px; height:44px; padding:4px; display:block; margin-top:4px; }
.marca-muestra{ display:flex; align-items:center; min-height:64px; margin:10px 0; padding:10px 14px; border:1px dashed var(--borde-fuerte); border-radius:var(--radio); background:var(--superficie-2); }
.marca-muestra img{ max-height:48px; width:auto; }
.marca-muestra .marca-iniciales{ width:48px; height:48px; border-radius:12px; background:var(--primario); color:var(--sobre-primario); font-size:1rem; }

/* Tope de ausentes por área: los campos a su medida (a 100 % de ancho la tabla
   no cabía en el teléfono y el selector quedaba fuera de la vista). */
.tabla-topes input[type=number]{ width:6rem; }
.tabla-topes select{ width:auto; }
/* En el teléfono cada área es una fila apilada: el nombre arriba y, debajo,
   el máximo y qué pasa si se pasa. Los encabezados se leen en el aria-label. */
@media (max-width:640px){
  .tabla-topes thead{ display:none; }
  .tabla-topes, .tabla-topes tbody{ display:block; }
  .tabla-topes tr{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; padding:10px 0; border-bottom:1px solid var(--borde); }
  .tabla-topes td{ padding:0; border:0; }
  .tabla-topes td:first-child{ grid-column:1 / -1; font-weight:600; }
}

/* ── Bienvenida del Inicio ──────────────────────────────────────────────────
   Una franja con el color de la marca: saludo, el día en una frase, los
   atajos y tres o cuatro datos. Sustituye a la fila de tarjetas de cifras. */
.hero-inicio{
  position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:20px 28px; align-items:end;
  padding:26px 28px; margin-bottom:18px; border-radius:18px; color:var(--hero-texto);
  background:
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.16) 0 70px, transparent 71px),
    radial-gradient(circle at 78% 120%, rgba(255,255,255,.10) 0 120px, transparent 121px),
    linear-gradient(135deg, var(--hero-desde), var(--hero-hasta));
}
.hero-inicio h1{ color:var(--hero-texto); font-size:1.9rem; font-weight:800; letter-spacing:-.025em; margin:0 0 6px; }
.hero-fecha{ margin:0 0 4px; font-size:.82rem; font-weight:600; opacity:.85; }
.hero-resumen{ margin:0 0 16px; font-size:1.02rem; max-width:52ch; opacity:.95; }
.hero-acciones{ display:flex; flex-wrap:wrap; gap:8px; }
.hero-accion{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; min-height:38px; border-radius:10px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:var(--hero-texto);
  text-decoration:none; font-size:.86rem; font-weight:600; transition:background-color .15s ease;
}
.hero-accion:hover{ background:rgba(255,255,255,.24); color:var(--hero-texto); }
.hero-accion .ico{ width:16px; height:16px; }
.hero-datos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.hero-dato{
  display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; min-width:0;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:var(--hero-texto); text-decoration:none; font-size:.8rem;
}
.hero-dato:hover{ background:rgba(255,255,255,.2); color:var(--hero-texto); }
.hero-n{ font-size:1.6rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.hero-dato .avatares{ margin-top:4px; }
.hero-dato .avatar-chico{ border-color:var(--hero-desde); }
:is(.hero-accion, .hero-dato):focus-visible{ outline-color:var(--hero-texto); }
@media (max-width:900px){ .hero-inicio{ grid-template-columns:minmax(0,1fr); padding:20px 18px; } .hero-inicio h1{ font-size:1.6rem; } }

/* «Para hoy»: lo vencido con un filo rojo a la izquierda. */
.ph-cuentas{ display:flex; gap:6px; flex-wrap:wrap; }
.bandeja-fila.fila-vencida{ box-shadow:inset 3px 0 0 var(--alerta); padding-left:10px; }
.bandeja-datos{ display:flex; gap:8px; align-items:flex-start; margin:12px 0 0; padding:10px 12px; border-radius:10px; background:var(--info-tinte); color:var(--info); }
.bandeja-datos .ico{ width:16px; height:16px; flex:none; margin-top:2px; }
.bandeja-datos a{ color:var(--info); }

/* «Tu semana»: lunes a viernes, una columna por día con quien falta, celebra o ingresa. */
.semana-dias{ list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
.semana-dia{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 4px 10px; border-radius:12px; background:var(--superficie-2); min-height:104px; }
.semana-dia.es-hoy{ background:var(--marca-tinte); box-shadow:inset 0 0 0 1px var(--borde-hover); }
.semana-et{ display:flex; flex-direction:column; align-items:center; font-size:.72rem; font-weight:600; color:var(--texto-tenue); line-height:1.2; }
.semana-et b{ font-size:1rem; color:var(--texto); }
.semana-dia.es-hoy .semana-et, .semana-dia.es-hoy .semana-et b{ color:var(--acento); }
.semana-gente{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.semana-item{ position:relative; display:inline-flex; }
.semana-item::after{ content:""; position:absolute; right:-2px; bottom:-1px; width:9px; height:9px; border-radius:50%; border:2px solid var(--superficie-2); }
.semana-item.sem-fuera::after{ background:var(--texto-tenue); }
.semana-item:is(.sem-cumple, .sem-aniversario)::after{ background:var(--calido); }
.semana-item.sem-ingreso::after{ background:var(--ok); }
.semana-mas{ font-size:.7rem; font-weight:700; color:var(--texto-2); }
.semana-leyenda{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 0; color:var(--texto-tenue); }
.leyenda-punto{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-left:6px; }
.leyenda-punto:first-child{ margin-left:0; }
.leyenda-punto.sem-fuera{ background:var(--texto-tenue); } .leyenda-punto.sem-cumple{ background:var(--calido); } .leyenda-punto.sem-ingreso{ background:var(--ok); }
.sem-ico-fuera{ color:var(--texto-tenue); } .sem-ico-ingreso{ color:var(--ok); }

/* ── Personas: reparto, conmutador lista/tarjetas y tarjetas ──────────────── */
.personas-barra{ display:flex; justify-content:space-between; align-items:center; gap:10px 16px; flex-wrap:wrap; margin:4px 0 14px; }
.reparto{ display:flex; flex-wrap:wrap; gap:6px; }
.conmutador-vista{ display:inline-flex; padding:3px; gap:2px; border:1px solid var(--borde); border-radius:10px; background:var(--superficie-2); }
.conmutador-vista a{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; min-height:34px; border-radius:8px; color:var(--texto-2); text-decoration:none; font-size:.84rem; font-weight:600; }
.conmutador-vista a .ico{ width:15px; height:15px; }
.conmutador-vista a[aria-current="page"]{ background:var(--superficie); color:var(--acento); box-shadow:var(--sombra-accion); }
@media (pointer:coarse){ .conmutador-vista a{ min-height:44px; } }
.persona-celda{ display:flex; align-items:center; gap:12px; min-width:0; }
.persona-celda > div{ min-width:0; }
.persona-nombre{ font-weight:700; color:var(--texto); text-decoration:none; }
.persona-nombre:hover{ color:var(--enlace); text-decoration:underline; }
table.datos td.es-cero{ color:var(--texto-tenue); }
.tarjetas-personas{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.tarjeta-persona{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; height:100%;
  padding:20px 14px 16px; border:1px solid var(--borde); border-radius:var(--radio-grande); background:var(--superficie);
  color:var(--texto); text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.tarjeta-persona:hover{ border-color:var(--borde-hover); box-shadow:var(--sombra-accion); }
.tarjeta-persona strong{ margin-top:6px; line-height:1.3; }
.tarjeta-persona-pie{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:auto; padding-top:10px; }
.avatar.avatar-grande{ width:64px; height:64px; font-size:1.2rem; }

/* ── Ficha: cabecera de perfil ─────────────────────────────────────────────
   Una franja con el tinte de la marca y el avatar grande encima: se reconoce
   de quién es la ficha antes de leer. */
.ficha-portada{ position:relative; margin-bottom:16px; border:1px solid var(--borde); border-radius:var(--radio-grande); background:var(--superficie); overflow:hidden; }
.ficha-banda{ height:72px; background:
    radial-gradient(circle at 85% -20%, var(--calido-tinte) 0 90px, transparent 91px),
    linear-gradient(120deg, var(--marca-tinte), var(--superficie-2)); }
.ficha-portada .ficha-cabecera{ display:flex; align-items:flex-end; gap:16px 20px; flex-wrap:wrap; padding:0 22px 18px; margin:-36px 0 0; }
.ficha-portada .avatar.avatar-xl{ width:84px; height:84px; font-size:1.55rem; border:4px solid var(--superficie); box-shadow:var(--sombra-accion); }
.ficha-portada .ficha-quien{ flex:1 1 320px; padding-top:40px; }
.ficha-portada .acciones-pantalla{ padding-top:40px; }
.ficha-portada .migaja{ margin:0 0 2px; }
@media (max-width:640px){ .ficha-portada .ficha-cabecera{ padding:0 16px 16px; } .ficha-portada .ficha-quien, .ficha-portada .acciones-pantalla{ padding-top:0; } }

/* Un bloque de cifras que lleva a su lista. */
a.cifra-bloque.cifra-enlace{ display:block; color:inherit; text-decoration:none; transition:background-color .15s ease; }
a.cifra-bloque.cifra-enlace:hover{ background:var(--superficie-2); }

/* ── Calendario de ausencias (tres semanas) ─────────────────────────────────
   Una fila por persona y una celda por día; el color dice qué es. */
.gantt{ display:grid; min-width:760px; gap:3px 0; }
.gantt-fila{ display:grid; grid-template-columns:minmax(170px, 230px) repeat(21, minmax(24px, 1fr)); align-items:center; gap:0 3px; }
.gantt-quien{ display:flex; align-items:center; gap:8px; min-width:0; padding-right:8px; font-size:.86rem; font-weight:600; }
.gantt-quien a{ color:var(--texto); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gantt-quien a:hover{ color:var(--enlace); text-decoration:underline; }
.gantt-cab .gantt-quien{ font-size:.74rem; color:var(--texto-tenue); }
.gantt-dia{ display:flex; flex-direction:column; align-items:center; font-size:.66rem; font-weight:600; color:var(--texto-tenue); line-height:1.15; padding:4px 0; border-radius:6px; }
.gantt-dia b{ font-size:.8rem; color:var(--texto-2); }
.gantt-dia.hoy{ background:var(--marca-tinte); color:var(--acento); }
.gantt-dia.hoy b{ color:var(--acento); }
.gantt-dia.feriado b{ color:var(--calido); }
.gantt-celda{ height:26px; border-radius:6px; background:var(--superficie-2); }
.gantt-celda.finde{ background:transparent; box-shadow:inset 0 0 0 1px var(--borde); }
.gantt-celda.feriado{ background:var(--calido-tinte); }
.gantt-celda.hoy{ box-shadow:inset 0 0 0 2px var(--borde-hover); }
.gantt-celda.g-vac{ background:var(--primario); }
.gantt-celda.g-otra{ background:var(--texto-tenue); }
.leyenda-punto.g-vac{ background:var(--primario); } .leyenda-punto.g-otra{ background:var(--texto-tenue); } .leyenda-punto.g-fer{ background:var(--calido); }
.gantt-celda.finde:is(.g-vac, .g-otra){ opacity:.4; }   /* el fin de semana no se descuenta */

/* Asistencia: la persona en una línea, con los avisos como chips cortos. */
.asis-conceptos td.celda-principal{ min-width:250px; }
.asis-puesto{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.chip.chip-mini{ font-size:.68rem; padding:1px 7px; }
.cifra-de{ font-size:.5em; font-weight:600; color:var(--texto-tenue); letter-spacing:0; }

/* ── Línea de tiempo (Movimientos recientes) ────────────────────────────────
   Un día por bloque, con la fecha a la izquierda y una tarjeta por persona. */
.linea-tiempo{ list-style:none; margin:0; padding:0; }
.lt-dia{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:0 16px; position:relative; }
.lt-dia + .lt-dia{ margin-top:14px; }
.lt-fecha{ margin:8px 0 0; font-size:.8rem; font-weight:700; color:var(--texto-2); text-align:right; }
.lt-items{ list-style:none; margin:0; padding:0 0 0 18px; border-left:2px solid var(--borde); display:flex; flex-direction:column; gap:8px; }
.lt-item{ position:relative; display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border:1px solid var(--borde); border-radius:12px; background:var(--superficie); }
.lt-item::before{ content:""; position:absolute; left:-25px; top:20px; width:10px; height:10px; border-radius:50%; background:var(--superficie); box-shadow:0 0 0 2px var(--borde-hover); }
.lt-cuerpo{ min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.lt-cuerpo .chip{ margin-left:6px; }
.lt-cambios{ list-style:none; margin:0; padding:0; font-size:.88rem; }
.lt-cambios li{ padding:1px 0; }
@media (max-width:640px){ .lt-dia{ grid-template-columns:minmax(0,1fr); } .lt-fecha{ text-align:left; margin:0 0 6px; } }

/* ── Ingresos y salidas en curso: una tarjeta por proceso, con su avance ─── */
.tarjetas-proceso{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.tarjeta-proceso{ display:flex; flex-direction:column; gap:8px; height:100%; padding:14px 16px; border:1px solid var(--borde); border-radius:var(--radio-grande);
  background:var(--superficie); color:var(--texto); text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease; }
.tarjeta-proceso:hover{ border-color:var(--borde-hover); box-shadow:var(--sombra-accion); }
.tarjeta-proceso.con-vencidas{ box-shadow:inset 3px 0 0 var(--alerta); }
.tarjeta-proceso .chip{ align-self:flex-start; }
.tp-cabeza{ display:flex; align-items:center; gap:10px; }
.tp-quien{ flex:1; min-width:0; }
.tp-avance{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; font-size:.82rem; font-weight:600; color:var(--texto-2); }
/* Barras de avance con <progress>: sin style= y con su valor al lado. */
.tp-avance progress, .barras-lista progress{ -webkit-appearance:none; appearance:none; width:100%; height:10px; border:0; border-radius:999px; background:var(--superficie-2); overflow:hidden; }
.tp-avance progress::-webkit-progress-bar, .barras-lista progress::-webkit-progress-bar{ background:var(--superficie-2); border-radius:999px; }
.tp-avance progress::-webkit-progress-value, .barras-lista progress::-webkit-progress-value{ background:var(--primario); border-radius:999px; }
.tp-avance progress::-moz-progress-bar, .barras-lista progress::-moz-progress-bar{ background:var(--primario); border-radius:999px; }

.personas-barra-der{ display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }
.marcar-pagina{ font-size:.84rem; font-weight:600; color:var(--texto-2); }
.tarjetas-personas > li{ position:relative; }
/* La casilla de la selección en bloque, arriba a la izquierda de la tarjeta
   (fuera del enlace: marcar no abre la ficha). */
.tarjeta-marca{ position:absolute; top:8px; left:8px; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; cursor:pointer; }
.tarjeta-marca:hover{ background:var(--superficie-2); }
.tarjeta-marca input{ width:18px; height:18px; margin:0; }
.tarjetas-personas > li:has(.tarjeta-marca input:checked) .tarjeta-persona{ border-color:var(--primario); box-shadow:0 0 0 2px var(--marca-tinte); }
@media (pointer:coarse){ .tarjeta-marca{ width:44px; height:44px; top:4px; left:4px; } }

/* ── Ola 3 · pastillas de estado: la cifra y el filtro en una sola pieza ── */
.estados-filtro{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); }
.estado-filtro{ display:flex; flex-direction:column; gap:2px; padding:10px 14px; border:1px solid var(--borde); border-radius:var(--radio-grande);
  background:var(--superficie); color:var(--texto-2); text-decoration:none; box-shadow:inset 0 3px 0 var(--tono-filo, var(--borde));
  transition:border-color .15s ease, box-shadow .15s ease; }
.estado-filtro:hover{ border-color:var(--borde-hover); }
.estado-filtro-n{ font-size:1.45rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--texto); }
.estado-filtro-et{ font-size:.8rem; font-weight:600; }
.estado-filtro.en-cero .estado-filtro-n{ color:var(--texto-tenue); }
.estado-filtro[aria-current="page"]{ border-color:var(--tono-filo, var(--primario)); background:var(--tono-tinte, var(--marca-tinte)); color:var(--texto); }
.estado-filtro.tono-marca{ --tono-filo:var(--primario); --tono-tinte:var(--marca-tinte); }
.estado-filtro.tono-neutro{ --tono-filo:var(--texto-tenue); --tono-tinte:var(--superficie-2); }
.estado-filtro.tono-info{ --tono-filo:var(--info); --tono-tinte:var(--info-tinte); }
.estado-filtro.tono-ok{ --tono-filo:var(--ok); --tono-tinte:var(--ok-tinte); }
.estado-filtro.tono-aviso{ --tono-filo:var(--aviso); --tono-tinte:var(--aviso-tinte); }
.estado-filtro.tono-alerta{ --tono-filo:var(--alerta); --tono-tinte:var(--alerta-tinte); }
@media (max-width:640px){ .estados-filtro{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .estado-filtro{ padding:8px 10px; } .estado-filtro-n{ font-size:1.15rem; } }

/* ── Ola 3 · Reclutamiento: vacantes en tarjetas y tablero con avatar ───── */
.tarjetas-vacante .tp-cabeza{ align-items:flex-start; }
.tarjetas-vacante .tp-cabeza .chip{ flex:none; }
.vac-embudo{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.82rem; color:var(--texto-2); }
.vac-embudo b{ font-size:1rem; font-weight:800; color:var(--texto); margin-right:2px; }
.vac-embudo .vac-nuevas b{ color:var(--acento); }
.vac-pie{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-top:auto; padding-top:8px; border-top:1px solid var(--borde); }
.vac-pie .chip{ margin-left:auto; }
.tr-cabeza{ display:flex; align-items:center; gap:8px; min-width:0; margin-bottom:2px; }
.tr-cabeza .tr-nombre{ color:var(--texto); text-decoration:none; font-weight:700; line-height:1.25; }
.tr-cabeza .tr-nombre:hover{ color:var(--enlace); text-decoration:underline; }
.tr-puesto{ font-size:.84rem; font-weight:600; color:var(--texto-2); }
.tr-dias{ font-weight:600; }
.tr-tarjeta.tr-estancada .tr-dias{ color:var(--alerta); }
.bandeja-fila.fila-informa .bandeja-que strong{ font-weight:600; color:var(--texto-2); }
.barras-personas li{ grid-template-columns:minmax(0, 14rem) minmax(0,1fr) 3.5rem; }
@media (max-width:640px){ .barras-personas li{ grid-template-columns:minmax(0, 8rem) minmax(0,1fr) 3rem; } }
.flujo-gastos{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
@media (max-width:900px){ .flujo-gastos{ grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); } }
/* Período como pastillas pequeñas a la derecha del título del listado. */
.periodos{ display:flex; flex-wrap:wrap; gap:4px; }
.periodos a{ display:inline-flex; align-items:center; min-height:30px; padding:2px 10px; border:1px solid var(--borde); border-radius:999px; font-size:.8rem; font-weight:600; color:var(--texto-2); text-decoration:none; }
.periodos a:hover{ border-color:var(--borde-hover); color:var(--texto); }
.periodos a[aria-current="page"]{ background:var(--marca-tinte); border-color:var(--primario); color:var(--acento); }
@media (pointer:coarse){ .periodos a{ min-height:44px; padding:2px 14px; } }
.respuestas-360{ min-width:150px; }
/* Objetivos en el teléfono: Partida, Meta y Origen se ocultan (.col-sec) y el
   valor de hoy se edita con el campo encima del botón, para que quepa. */
@media (max-width:640px){
  .tabla-kr thead{ display:none; }
  .tabla-kr tr{ display:grid; grid-template-columns:minmax(0,1fr) 7.5rem; gap:4px 12px; padding:10px 0; border-top:1px solid var(--borde); }
  .tabla-kr td{ display:block; padding:0; border:0; }
  .tabla-kr td.col-sec{ display:none; }
  .tabla-kr td:first-child{ grid-column:1 / -1; font-weight:600; }
  .tabla-kr .medida{ min-width:0; }
  .tabla-kr .fila-controles{ flex-direction:column; align-items:stretch; gap:6px; }
  .tabla-kr .entrada-num{ max-width:none; }
}

/* ── Ola 4 · tablas recortadas (panel.js, data-recortar) ───────────────── */
.recortada > .fila-recortada, table.recortada tr.fila-recortada{ display:none; }
.ver-restantes{ margin-top:10px; }
@media print{ table.recortada tr.fila-recortada{ display:table-row; } .recortada > li.fila-recortada{ display:list-item; } .ver-restantes{ display:none; } }

/* ── Ola 4 · Accesos: una línea por cuenta y la edición plegada ─────────── */
.cuentas{ list-style:none; margin:0; padding:0; }
.cuenta{ border-top:1px solid var(--borde); padding:12px 0; }
.cuenta:first-child{ border-top:0; padding-top:4px; }
.cuenta-fila{ display:grid; grid-template-columns:auto minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.3fr) 6.5rem auto; gap:6px 14px; align-items:center; }
.cuenta-quien, .cuenta-rol{ min-width:0; }
.cuenta-estado{ display:flex; flex-wrap:wrap; gap:4px; }
.cuenta-acceso{ text-align:right; }
.cuenta-inactiva .cuenta-quien strong{ color:var(--texto-3); }
.cuenta-editar{ margin:8px 0 0 48px; }
.cuenta-editar > summary{ cursor:pointer; width:max-content; font-size:.84rem; font-weight:600; color:var(--enlace); }
.cuenta-editar > summary:hover{ color:var(--enlace-hover); }
.cuenta-editar[open] > form{ margin-top:10px; padding:14px 16px; border:1px solid var(--borde); border-radius:var(--radio); background:var(--superficie-2); }
.cuenta-editar fieldset{ border:0; padding:0; }
@media (pointer:coarse){ .cuenta-editar > summary{ padding:10px 0; } }
@media (max-width:900px){
  .cuenta-fila{ grid-template-columns:auto minmax(0,1fr) auto; }
  .cuenta-rol, .cuenta-estado{ grid-column:2 / -1; }
  .cuenta-acceso{ grid-column:2; text-align:left; }
  .cuenta-acciones{ grid-column:3; grid-row:1; }
  .cuenta-editar{ margin-left:0; }
}
.avance-expediente{ min-width:120px; }
.chips-falta{ display:flex; flex-wrap:wrap; gap:4px; }
.chips-falta .chip{ white-space:normal; }

/* ── Ola 4 · Calendario: la fecha como hoja de calendario ──────────────── */
.hoja-fecha{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:3.4rem; padding:4px 6px 5px;
  border:1px solid var(--borde); border-radius:10px; background:var(--superficie); box-shadow:inset 0 4px 0 var(--primario); line-height:1.05; }
.hoja-fecha b{ font-size:1.3rem; font-weight:800; letter-spacing:-.02em; color:var(--texto); margin-top:3px; }
.hoja-fecha span{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-2); }
.hoja-fecha.hoja-vencida{ border-color:var(--alerta); background:var(--alerta-tinte); box-shadow:inset 0 4px 0 var(--alerta); }
.hoja-fecha.hoja-vencida b, .hoja-fecha.hoja-vencida span{ color:var(--alerta); }
.hoja-fecha.hoja-hoy{ border-color:var(--primario); background:var(--marca-tinte); }
.cal-rel{ margin-top:4px; text-align:center; min-width:3.4rem; }

/* ── Ola 5 · Mi espacio ───────────────────────────────────────────────────── */
.yo-hero{ margin-bottom:18px; }
.yo-hero .hero-datos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
/* Renglones de Mi espacio: ícono, qué es y una flecha; el renglón entero es
   el enlace (un toque, área grande) en lugar de un botón «Abrir» por renglón. */
.yo-filas{ list-style:none; margin:0; padding:0; }
.yo-filas > li + li{ border-top:1px solid var(--borde); }
.yo-fila{ display:flex; align-items:center; gap:12px; padding:12px 0; min-width:0; color:var(--texto); text-decoration:none; }
.yo-fila-que{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; }
.yo-fila-que .chip{ align-self:flex-start; margin-top:3px; }
.yo-fila-flecha{ width:18px; height:18px; flex:none; color:var(--texto-tenue); }
.yo-fila-enlace{ margin:0 -10px; padding-left:10px; padding-right:10px; border-radius:10px; transition:background-color .15s ease; }
.yo-fila-enlace:hover{ background:var(--superficie-2); color:var(--texto); }
.yo-fila-enlace:hover .yo-fila-flecha{ color:var(--acento); }
.yo-fila-enlace:focus-visible{ outline:2px solid var(--foco); outline-offset:-2px; }
.yo-denuncia{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border:1px dashed var(--borde-hover); border-radius:var(--radio-grande); }
.yo-denuncia h2{ font-size:1rem; margin:0 0 4px; }
@media (max-width:640px){
  .yo-marca > span{ display:block; min-width:0; }
  .yo-marca > span b{ font-size:.9rem; }
  .yo-marca > span span{ max-width:9.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .yo-barra .tema-etiqueta{ display:none; }
  .yo-barra .tema-conmutador > summary{ min-width:44px; min-height:44px; justify-content:center; }
}
/* Título de pantalla con su acción principal al lado (Mi espacio). */
.yo-titulo{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px 16px; flex-wrap:wrap; margin-bottom:14px; }
.yo-titulo h1{ margin-bottom:4px; }
/* Montos por categoría: cortos, caben de dos en dos también en el teléfono. */
@media (max-width:640px){ .yo-dos.yo-dos-siempre{ grid-template-columns:1fr 1fr; } }
.yo-plegable > summary{ display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none; }
.yo-plegable > summary::-webkit-details-marker{ display:none; }
.yo-plegable > summary::after{ content:""; margin-left:auto; width:9px; height:9px; flex:none; border-right:2px solid var(--texto-tenue); border-bottom:2px solid var(--texto-tenue); transform:rotate(45deg); transition:transform .15s ease; }
.yo-plegable[open] > summary::after{ transform:rotate(-135deg); }
.yo-plegable > summary:focus-visible{ outline:2px solid var(--foco); outline-offset:4px; border-radius:8px; }
.yo-quien{ display:flex; align-items:center; gap:8px; }
.yo-periodos{ list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:12px; }
.yo-periodos li{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid var(--borde); border-radius:var(--radio); }
.yo-periodos .chip{ align-self:flex-start; }
.yo-periodo-cabeza{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ico-en-linea{ width:14px; height:14px; vertical-align:-2px; margin-right:2px; color:var(--calido); }

/* ── Ola 6 · fichas de detalle ─────────────────────────────────────────── */
/* Descriptivo del puesto: dos columnas en escritorio (las 13 secciones eran
   una columna de 4.000 px); la validación y el botón ocupan el ancho entero. */
@media (min-width:1100px){
  .formulario-dpt{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; }
  .formulario-dpt > :not(.seccion-dpt){ grid-column:1 / -1; }
}
.ayuda-dpt-plegada{ margin:0 0 8px; }
.ayuda-dpt-plegada > summary{ cursor:pointer; width:max-content; color:var(--enlace); font-weight:600; }
.ayuda-dpt-plegada[open] .ayuda-dpt{ margin-top:6px; }
/* Postulación: las etapas como pasos (hechos en color, el actual resaltado). */
.pasos-etapa{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:4px; counter-reset:paso; }
.pasos-etapa li{ position:relative; padding:10px 8px 8px; border-top:4px solid var(--borde); font-size:.8rem; font-weight:600; color:var(--texto-tenue); counter-increment:paso; }
.pasos-etapa li span::before{ content:counter(paso) " · "; }
.pasos-etapa li.hecho{ border-top-color:var(--primario); color:var(--texto-2); }
.pasos-etapa li.actual{ border-top-color:var(--primario); color:var(--acento); background:var(--marca-tinte); border-radius:0 0 8px 8px; }
@media (max-width:640px){ .pasos-etapa li{ font-size:0; padding:6px 0 0; } .pasos-etapa li span::before{ font-size:.72rem; content:counter(paso); }
  .pasos-etapa li.actual span{ font-size:.72rem; } .pasos-etapa li.actual span::before{ content:counter(paso) " · "; } .pasos-etapa li.actual{ grid-column:span 2; } }
.agendar-plegado > summary{ list-style:none; width:max-content; }
.agendar-plegado > summary::-webkit-details-marker{ display:none; }
.grupos-360 .grupo-oculto{ grid-column:1 / -1; margin-top:-4px; }
/* Pares etiqueta/valor en las fichas del panel (gasto). */
.ficha-pares{ display:grid; grid-template-columns:minmax(120px, max-content) 1fr; gap:10px 20px; margin:0; }
.ficha-pares dt{ color:var(--texto-3); font-size:.88rem; }
.ficha-pares dd{ margin:0; overflow-wrap:anywhere; }
.ficha-pares .monto{ font-size:1.15rem; font-weight:800; }
@media (max-width:640px){ .ficha-pares{ grid-template-columns:1fr; gap:2px; } .ficha-pares dd{ margin-bottom:10px; } }

/* ── Ola 7 · páginas públicas: empleos ─────────────────────────────────── */
.pagina-empleos .envoltura{ max-width:1040px; }
.emp-hero{ margin-bottom:20px; }
.emp-hero .hero-resumen{ margin-bottom:0; }
.emp-hero-datos{ grid-template-columns:minmax(0, 200px); justify-content:end; }
.emp-vacante{ display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px solid var(--borde); border-radius:var(--radio-grande);
  background:var(--superficie); color:var(--texto); text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease; }
.emp-vacante:hover{ border-color:var(--borde-hover); box-shadow:var(--sombra-accion); color:var(--texto); }
.emp-vacante:focus-visible{ outline:2px solid var(--foco); outline-offset:2px; }
.emp-vacante h2{ font-size:1.12rem; }
.emp-vacante-que{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.emp-etiquetas{ display:flex; flex-wrap:wrap; gap:6px; }
.emp-ver{ display:inline-flex; align-items:center; gap:6px; flex:none; font-size:.86rem; font-weight:700; color:var(--enlace); }
.emp-ver .ico{ width:16px; height:16px; }
.emp-vacante:hover .emp-ver{ color:var(--enlace-hover); }
.emp-nota{ display:flex; gap:8px; align-items:flex-start; margin-top:18px; }
.emp-nota .ico{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--ok); }
.emp-cabeza{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px 20px; flex-wrap:wrap; margin:6px 0 20px; }
.emp-cabeza h1{ margin:0 0 10px; }
.emp-cuerpo{ display:grid; gap:18px; align-items:start; }
.emp-cuerpo .emp-descripcion h2{ font-size:1.05rem; }
@media (min-width:960px){
  .emp-cuerpo{ grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); }
  .emp-ir{ display:none; }   /* el formulario ya está al lado */
}
@media (max-width:640px){ .emp-ver{ font-size:0; } .emp-ver .ico{ width:18px; height:18px; } .emp-vacante{ padding:14px 16px; } }
@media (max-width:900px){ .emp-hero-datos{ grid-template-columns:minmax(0,1fr); justify-content:stretch; } }
/* El botón nativo de «elegir archivo» con la forma de los botones del sistema. */
input[type="file"]{ font:inherit; font-size:.88rem; color:var(--texto-2); max-width:100%; }
input[type="file"]::file-selector-button{ font:inherit; font-weight:600; margin-right:10px; padding:8px 14px; min-height:38px; border:1px solid var(--borde-fuerte);
  border-radius:var(--radio); background:var(--superficie); color:var(--texto); cursor:pointer; transition:border-color .15s ease, background-color .15s ease; }
input[type="file"]::file-selector-button:hover{ border-color:var(--borde-hover); background:var(--superficie-2); }
@media (pointer:coarse){ input[type="file"]::file-selector-button{ min-height:44px; } }

/* Baterías por giro (/admin/baterias): una fila por batería, la casilla con su
   nombre arriba y lo que trae debajo, alineado con el texto. */
.bat-lista{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.bat-fila{ display:grid; gap:4px; padding:12px 0; border-top:1px solid var(--borde); }
.bat-fila:first-child{ border-top:0; padding-top:4px; }
.bat-nombre{ font-weight:600; font-size:.95rem; }
.bat-detalle{ padding-left:23px; display:grid; gap:6px; min-width:0; }
.bat-detalle .chip{ margin-right:4px; }
.bat-otras{ border-top:1px solid var(--borde); margin-top:4px; padding-top:10px; }
.bat-otras > summary{ cursor:pointer; font-size:.88rem; font-weight:600; color:var(--acento); min-height:40px; display:flex; align-items:center; }

/* ── Riesgo de salida (/admin/riesgo y tarjeta de la ficha) ─────────────── */
.riesgo-aviso{ font-size:.92rem; }
.riesgo-lista{ list-style:none; margin:0; padding:0; display:grid; }
.riesgo-fila{ display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,2fr) minmax(160px,auto); gap:14px 20px;
  padding:14px 0; border-top:1px solid var(--borde); align-items:start; }
.riesgo-fila:first-child{ border-top:0; }
.riesgo-quien{ display:grid; gap:4px; justify-items:start; min-width:0; }
.riesgo-nombre{ font-weight:600; overflow-wrap:anywhere; }
.riesgo-senales{ list-style:none; margin:0; padding:0; display:grid; gap:8px; min-width:0; overflow-wrap:anywhere; }
.riesgo-senales li{ padding-left:12px; border-left:3px solid var(--borde-fuerte); }
.riesgo-peso{ font-size:.78rem; font-weight:600; color:var(--texto-3); white-space:nowrap; }
.riesgo-acciones{ display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.riesgo-acciones .btn{ justify-content:center; text-align:center; }
.riesgo-senales-ficha{ margin:10px 0; }
.riesgo-umbrales{ display:grid; gap:0 18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:end; }
.riesgo-umbrales .acciones-pantalla{ grid-column:1 / -1; }
@media (max-width:760px){
  .riesgo-fila{ grid-template-columns:minmax(0,1fr); }
  .riesgo-acciones{ flex-direction:row; flex-wrap:wrap; align-items:center; }
}
/* WhatsApp (/admin/sistema/whatsapp): resumen del mes, datos del webhook y
   una fila por plantilla con su texto sugerido debajo. */
.wa-resumen{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px 20px; }
.wa-resumen > div{ display:grid; gap:4px; align-content:start; min-width:0; }
.wa-resumen b{ font-size:1.05rem; }
.wa-datos{ display:grid; grid-template-columns:minmax(150px, auto) minmax(0, 1fr); gap:8px 16px; margin:0; }
.wa-datos dt{ color:var(--texto-3); font-size:.86rem; }
.wa-datos dd{ margin:0; min-width:0; overflow-wrap:anywhere; }
.wa-datos code{ word-break:break-all; }
.wa-plantilla{ display:grid; gap:6px; padding:12px 0; border-top:1px solid var(--borde); min-width:0; }
.wa-plantilla label{ display:grid; gap:6px; }
.wa-plantilla label > span{ font-weight:600; font-size:.92rem; }
@media (max-width:640px){ .wa-datos{ grid-template-columns:minmax(0, 1fr); gap:2px 0; } .wa-datos dd{ margin-bottom:8px; } }
.wa-resumen .chip{ justify-self:start; }
/* Exportar a la nómina y movimientos del IMSS (/admin/nomina, /admin/imss). */
.nom-paises{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 16px; font-size:.9rem; color:var(--texto-2); }
.nom-paises .chip{ text-decoration:none; }
.nom-lista{ margin:6px 0 0; padding-left:20px; display:grid; gap:4px; }
.imss-tabla td{ vertical-align:top; }
.imss-problemas{ font-size:.84rem; color:var(--alerta); margin:0; max-width:28rem; }
.form-linea-chica{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; margin:0; }
.form-linea-chica label{ display:grid; gap:4px; font-size:.82rem; color:var(--texto-2); }
.nom-ayuda{ border-top:1px solid var(--borde); padding-top:12px; font-size:.9rem; color:var(--texto-2); }
.nom-ayuda h3{ font-size:.95rem; margin:0 0 6px; color:var(--texto); }
.nom-ayuda p{ margin:0 0 8px; }
/* Marcaje sin conexión y contingencias (migración 144) */
.sinred-pendientes{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px; padding:10px 12px;
  border:1px dashed var(--borde); border-radius:10px; background:var(--superficie-2); }
.sinred-pendientes p{ flex:1 1 220px; }
.h-nota{ font-size:1rem; margin:0 0 6px; }
.sin-conexion{ background:var(--fondo); color:var(--texto); }
.sin-conexion-cuerpo{ max-width:560px; margin:0 auto; padding:24px 16px; }
.fila-apagada td{ opacity:.65; }
/* Venezuela: pagos y pasivo (src/vistas/admin/ve_pagos.php) */
.campo-monto{ width:9em; max-width:100%; text-align:right; font-variant-numeric:tabular-nums; }
.negrita{ font-weight:700; }
.ve-plazo{ border:1px solid var(--borde); border-radius:10px; padding:10px 12px; margin:8px 0; }
.ve-plazo.alerta{ border-color:var(--alerta); }
/* Cifras largas (bolívares): que no se monten en el teléfono */
.ve-cifras .cifra-n{ font-size:clamp(1.3rem, 5.2vw, 2.1rem); overflow-wrap:anywhere; }