/* ────────────────────────────────────────────────────────────────────
   SISTEMA DE TOKENS — capa de primitivos y capa semántica.

   Los nombres cortos (--n0.."n10, --tx, --tx2, --card, --ac, --gr...)
   son la API que ya usan +30 archivos de web/src (clases de este mismo
   archivo e inline styles puntuales) — no se renombran para no forzar
   una migración de todo el frontend. En su lugar, cada uno queda
   documentado acá como alias de un token semántico con el vocabulario
   pedido en la auditoría (background/surface/surface-raised/border/
   text-primary/text-secondary/accent/success/warning/danger/info), y
   ES ESE TOKEN SEMÁNTICO el que define el valor real. Si hay que tocar
   un color, se toca en la definición semántica de acá abajo, nunca en
   el alias.

   Jerarquía: primitivos de color (--n0.."n10) → semánticos (fondo,
   superficie, texto, estado) → alias cortos (compatibilidad) →
   componentes (usan los alias cortos, sin cambios).
   ──────────────────────────────────────────────────────────────────── */
:root{
 /* — PRIMITIVOS — neutrales con leve temperatura fría. n7 y n8 son las
    dos escalas de texto secundario: ambas tienen que leerse en uso
    prolongado, así que ambas cumplen WCAG AA (4.5:1) contra superficie
    y fondo — la jerarquía entre "secundario" y "terciario" la da el
    tamaño/peso tipográfico, no un gris cada vez más tenue (más tenue
    que esto ya no es texto legible, es decoración). */
 --n0:#FFFFFF; --n1:#FBFBFC; --n2:#F7F8FA; --n3:#F1F3F6; --n4:#E3E7ED;
 --n5:#D3D8E0; --n6:#AEB7C6; --n7:#5F6B7A; --n8:#5C6573; --n9:#353D4B; --n10:#1A1F2B;
 /* Texto deshabilitado / placeholder — la única escala exenta de AA a
    propósito (WCAG 1.4.3 no exige contraste en texto de placeholder ni
    en controles deshabilitados): el tono original de n7 antes de la
    corrección de contraste de arriba. */
 --n-disabled:#9AA3B0;
 /* Borde "de componente" — el de un campo o botón, donde el borde ES
    la única señal del límite del control (WCAG 1.4.11, no-texto, 3:1).
    Los bordes decorativos (tarjetas, filas de tabla) siguen en --n4/--n5,
    más suaves a propósito: ahí el borde no es la única pista, así que
    no está sujeto a la misma regla. */
 --n-borde-control:#818C9C;

 /* — NAV — el panel lateral es oscuro siempre, en los dos temas (una
    identidad fija, como la de una app con "chrome" propio) — antes con
    cuatro grises hardcodeados sin relación entre sí (#6D7A93, #5C6980,
    #9EABC2, #C5CEDD): quedan en dos tokens con contraste verificado
    contra el fondo del nav (7:1+ los dos). */
 --nav1:#131A2A; --nav2:#1B2437; --nav3:#26324A;
 --nav-tx:#FFFFFF; --nav-tx2:#9AA6BC;
 /* Acento sobre el nav (barra del ítem activo, .nv.on::before): el nav
    es oscuro siempre, pero --color-acento sigue al tema de la PÁGINA —
    en tema claro vale #2F478D, un azul pensado para leerse contra
    blanco, no contra un fondo ya oscuro (1.5:1 ahí, prácticamente
    invisible). Mismo motivo que --nav-tx de arriba: un tono fijo, sin
    redefinir en los bloques de tema oscuro — es lo que ya hacía el
    violeta que reemplaza, sólo que ahí pasaba desapercibido porque el
    violeta era más claro de por sí (2:1, igual de insuficiente, nomás
    que menos notorio). Éste da 3.4:1 contra el nav del tema claro y
    3.0:1 contra el del tema oscuro — el acento sólido (--ac) se
    reserva para el resto de la interfaz, éste es sólo para el nav. */
 --nav-ac:#6B82C7;

 /* — SEMÁNTICOS — fondo / superficie / borde / texto */
 --color-fondo:var(--n2);
 --color-superficie:var(--n0);
 --color-superficie-elevada:var(--n1);
 --color-borde:var(--n4);
 --color-borde-suave:var(--n3);
 --color-texto-primario:var(--n10);
 --color-texto-secundario:var(--n8);
 --color-texto-terciario:var(--n7);

 /* — SEMÁNTICOS — acento (única acción primaria + identidad de marca,
    nunca un estado). Azul institucional #2F478D — el mismo azul del
    logo (web/public/marca/), no un color aparte elegido para la
    interfaz. Reemplaza al violeta que era marcador de posición hasta
    que llegó la marca real. Más oscuro que el violeta que reemplaza
    (contraste contra blanco: 8.7:1 vs 6.3:1 — de hecho mejora), así que
    --color-acento-texto reusa el mismo tono en vez de un tercer valor
    más oscuro todavía (7.8:1 contra --color-acento-tinte, sobra AA). */
 --color-acento:#2F478D; --color-acento-hover:#263A73;
 --color-acento-tinte:#F0F2F7; --color-acento-texto:#2F478D; --color-acento-anillo:rgba(47,71,141,.16);

 /* — SEMÁNTICOS — estados, cada uno con su propio color: nunca el
    acento prestado para decir "esto es informativo" o "esto se
    completó" (antes .note.b — el aviso informativo — usaba el acento;
    ver más abajo). */
 --color-peligro:#E11D48; --color-peligro-tinte:#FFF1F3; --color-peligro-texto:#9F1239;
 /* Amarillo institucional #F1C530 (del logo) para advertencias — pero
    tal cual, contra blanco, da 1.6:1 (ilegible: el amarillo puro es
    fondo, nunca texto ni ícono en tema claro). --color-advertencia y
    -texto son ese mismo amarillo oscurecido lo justo para leerse
    (3.9:1 y 5.6:1) — el amarillo puro vive en la tinte, de fondo. En
    tema oscuro no hace falta este ajuste: ver más abajo. */
 --color-advertencia:#957A1E; --color-advertencia-tinte:#FEF9EA; --color-advertencia-texto:#786218;
 --color-exito:#0D9488; --color-exito-tinte:#ECFDFA; --color-exito-texto:#0F766E;
 --color-info:#0284C7; --color-info-tinte:#EAF4FC; --color-info-texto:#0369A1;
 /* Identidad categórica (no es un estado): violeta para expedientes/
    cargos/gestiones — ya lo usaban escritorio.js y las colas del
    Portal de Gestiones. Antes también aparecía como degradé con un
    hex inventado (#A855F7) en tres fichas; ahora es un solo tono
    plano, coherente con "el acento se reserva para identidad". */
 --color-identidad:#7C3AED; --color-identidad-tinte:#F5F2FF; --color-identidad-texto:#5B21B6;
 --color-neutro:#64748B; --color-neutro-tinte:var(--n3); --color-neutro-texto:var(--n8);

 /* — Alias cortos (compatibilidad — usados en todo el archivo y en
    inline styles puntuales del frontend) — */
 --bg:var(--color-fondo); --card:var(--color-superficie); --card2:var(--color-superficie-elevada);
 --tx:var(--color-texto-primario); --tx2:var(--color-texto-secundario); --tx3:var(--color-texto-terciario);
 --ln:var(--color-borde); --ln2:var(--color-borde-suave);
 --ac:var(--color-acento); --ac2:var(--color-acento-hover); --acS:var(--color-acento-tinte); --acT:var(--color-acento-texto); --acR:var(--color-acento-anillo);
 --rd:var(--color-peligro); --rdS:var(--color-peligro-tinte); --rdT:var(--color-peligro-texto);
 --am:var(--color-advertencia); --amS:var(--color-advertencia-tinte); --amT:var(--color-advertencia-texto);
 --gr:var(--color-exito); --grS:var(--color-exito-tinte); --grT:var(--color-exito-texto);
 --in:var(--color-info); --inS:var(--color-info-tinte); --inT:var(--color-info-texto);
 --vi:var(--color-identidad); --viS:var(--color-identidad-tinte); --viT:var(--color-identidad-texto);
 --sl:var(--color-neutro); --slS:var(--color-neutro-tinte); --slT:var(--color-neutro-texto);

 /* Sombras — sobrias: separan sin "flotar". Ninguna con color (antes
    el logo tenía un glow violeta, ver .bd .lg más abajo — se sacó). */
 --s1:0 1px 2px -1px rgba(16,24,40,.05),0 1px 2px rgba(16,24,40,.04);
 --s2:0 2px 4px -2px rgba(16,24,40,.05),0 3px 8px -2px rgba(16,24,40,.06);
 --s3:0 8px 20px -6px rgba(16,24,40,.14),0 3px 6px -3px rgba(16,24,40,.06);
 --r1:8px; --r2:10px; --r3:14px;

 /* Movimiento — 120 a 220ms; @media(prefers-reduced-motion) al final
    del archivo lo apaga entero, sin excepciones. */
 --transition-rapida:120ms cubic-bezier(.4,0,.2,1);
 --transition-base:200ms cubic-bezier(.4,0,.2,1);
 --tr:var(--transition-base);

 /* Tipografía — escala con contraste real entre nivel y nivel:
    título de página > título de ficha > título de sección > cuerpo >
    metadato > ayuda. Antes "título de página" (25px) y "título de
    ficha" (22.5px) casi no se distinguían — quedan en 26 y 20. */
 --fs-titulo-pagina:26px; --fw-titulo-pagina:700;
 --fs-titulo-ficha:20px; --fw-titulo-ficha:650;
 --fs-titulo-seccion:15px; --fw-titulo-seccion:600;
 --fs-cuerpo:13.5px; --fw-cuerpo:400;
 --fs-metadato:12.5px; --fw-metadato:500;
 --fs-ayuda:12px; --fw-ayuda:400;

 /* Espaciado — grilla de 4 y 8. Se aplicó a la disposición estructural
    (páginas, tarjetas, encabezados, filas, formularios, nav); se dejó
    sin forzar el detalle a escala de insignia (pills, puntos de
    estado, badges) porque encajarlo en la grilla los desproporciona
    sin ganar nada. */
 --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

 --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

/* Tema oscuro — dos formas de activarlo: "seguir sistema" (el media
   query, cuando no hay preferencia explícita guardada) o elección
   explícita (`data-theme="dark"` en <html>, ver componentes/tema.js).
   Los dos bloques repiten la misma lista de variables a propósito: son
   dos selectores distintos (uno con media query, otro sin) y CSS plano
   no tiene forma de compartirla sin duplicarla. Si se toca un valor acá,
   se toca en los dos. */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
 --n0:#12151C; --n1:#151921; --n2:#0C0F15; --n3:#1B202A; --n4:#252B38;
 --n5:#333A49; --n6:#4A5364; --n7:#98A1AF; --n8:#AEB7C6; --n9:#D7DCE5; --n10:#F2F4F8;
 --n-disabled:#5C6573; --n-borde-control:#63708A;
 /* Antes casi idéntico al fondo de página oscuro (#0A0D14 vs #0C0F15
    de --n2 — contraste 1.01:1, invisible en la práctica: "la barra
    lateral y el área de contenido son casi el mismo gris"). Ahora es
    un azul marino con presencia propia, más claro que el fondo. */
 --nav1:#161F33; --nav2:#1E2A44; --nav3:#2A3B5C;
 /* Acento: mismo azul institucional que el tema claro, pero más claro
    (contraste contra el fondo oscuro, no contra blanco) — igual que ya
    hacía el violeta que reemplaza. Advertencia: acá el amarillo
    institucional #F1C530 SÍ entra tal cual, sin oscurecer — contra este
    fondo da 11.6:1, lo opuesto de lo que pasaba contra blanco. */
 --color-acento-tinte:rgba(47,71,141,.22); --color-acento-texto:#9FADDA; --color-acento:#5972C0; --color-acento-hover:#667DC5; --color-acento-anillo:rgba(89,114,192,.24);
 --color-peligro-tinte:rgba(225,29,72,.16); --color-peligro-texto:#FDA4AF; --color-peligro:#F43F5E;
 --color-advertencia-tinte:rgba(241,197,48,.16); --color-advertencia-texto:#F1C530; --color-advertencia:#F1C530;
 --color-exito-tinte:rgba(13,148,136,.16); --color-exito-texto:#5EEAD4; --color-exito:#14B8A6;
 --color-info-tinte:rgba(3,105,161,.18); --color-info-texto:#7DD3FC; --color-info:#38BDF8;
 --color-identidad-tinte:rgba(124,58,237,.16); --color-identidad-texto:#C4B5FD; --color-identidad:#8B5CF6;
 --s1:0 1px 2px rgba(0,0,0,.5); --s2:0 4px 12px rgba(0,0,0,.4); --s3:0 12px 28px rgba(0,0,0,.55);
}}
:root[data-theme=dark]{
 --n0:#12151C; --n1:#151921; --n2:#0C0F15; --n3:#1B202A; --n4:#252B38;
 --n5:#333A49; --n6:#4A5364; --n7:#98A1AF; --n8:#AEB7C6; --n9:#D7DCE5; --n10:#F2F4F8;
 --n-disabled:#5C6573; --n-borde-control:#63708A;
 /* Antes casi idéntico al fondo de página oscuro (#0A0D14 vs #0C0F15
    de --n2 — contraste 1.01:1, invisible en la práctica: "la barra
    lateral y el área de contenido son casi el mismo gris"). Ahora es
    un azul marino con presencia propia, más claro que el fondo. */
 --nav1:#161F33; --nav2:#1E2A44; --nav3:#2A3B5C;
 --color-acento-tinte:rgba(47,71,141,.22); --color-acento-texto:#9FADDA; --color-acento:#5972C0; --color-acento-hover:#667DC5; --color-acento-anillo:rgba(89,114,192,.24);
 --color-peligro-tinte:rgba(225,29,72,.16); --color-peligro-texto:#FDA4AF; --color-peligro:#F43F5E;
 --color-advertencia-tinte:rgba(241,197,48,.16); --color-advertencia-texto:#F1C530; --color-advertencia:#F1C530;
 --color-exito-tinte:rgba(13,148,136,.16); --color-exito-texto:#5EEAD4; --color-exito:#14B8A6;
 --color-info-tinte:rgba(3,105,161,.18); --color-info-texto:#7DD3FC; --color-info:#38BDF8;
 --color-identidad-tinte:rgba(124,58,237,.16); --color-identidad-texto:#C4B5FD; --color-identidad:#8B5CF6;
 --s1:0 1px 2px rgba(0,0,0,.5); --s2:0 4px 12px rgba(0,0,0,.4); --s3:0 12px 28px rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font-family:var(--f);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"cv05" 1}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--m);font-size:.94em}
.tn{font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;color:inherit}
/* Foco visible en todo control interactivo real — antes sólo
   button/input/select; faltaban los enlaces (.li, .bkl, .lk, .onode,
   .tab cuando es <a>) y los textarea. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:3px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--n5);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--n6);background-clip:padding-box;border:3px solid transparent}

/* Estados completos de controles — antes sólo existían hover y (para
   inputs) focus. disabled no tenía ninguna regla propia: dependía del
   estilo por-navegador, inconsistente entre Chrome/Firefox/Safari. */
.btn:disabled,.btn[disabled],.chip:disabled,.seg button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;pointer-events:none}
.btn:active:not(:disabled){transform:translateY(0.5px);box-shadow:none}
.inp:disabled,select.inp:disabled{background:var(--n3);color:var(--n-disabled);cursor:not-allowed;border-color:var(--ln)}
.inp::placeholder{color:var(--n-disabled)}

.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
/* NAV — antes un degradé (nav1→nav2) sin razón funcional: sobrio es
   un color plano. El borde derecho es un segundo refuerzo de la
   separación (más allá del color propio de --nav1): una línea clara
   fija, no depende de que el tono oscuro del nav y el fondo de la
   página se sigan viendo distintos en cualquier variación futura de
   cualquiera de los dos. */
.nav{background:var(--nav1);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:16px 12px 12px;overflow-y:auto}
.bd{display:flex;align-items:center;gap:12px;padding:4px 8px 20px}
/* Logo institucional (web/public/marca/) — imagen tal cual, sin
   insignia de color detrás: el archivo ya trae su propio color. */
.bd .lg{width:36px;height:36px;object-fit:contain;flex:none}
.bd b{display:block;color:var(--nav-tx);font-size:16.5px;font-weight:650;letter-spacing:-.01em;line-height:1.15}
.bd span{font-size:11.5px;color:var(--nav-tx2)}
/* Colapsar (escritorio) / cerrar (cajón móvil) — dos botones fijos en
   el marcado, uno u otro visible según el punto de quiebre (media
   queries más abajo), nunca los dos a la vez. */
.nav-toggle,.nav-cerrar{margin-left:auto;width:28px;height:28px;border-radius:6px;border:0;background:none;color:var(--nav-tx2);display:grid;place-items:center;flex:none;transition:var(--tr)}
.nav-toggle:hover,.nav-cerrar:hover{background:rgba(255,255,255,.08);color:var(--nav-tx)}
.nav-toggle svg.i,.nav-cerrar svg.i{width:16px;height:16px}
.nav-cerrar{display:none}
/* 28px antes de cada grupo (TRABAJO/INSTITUCIONAL/SISTEMA, main.js
   armarNav) contra los ~16px que ya separan un ítem del siguiente sólo
   por su propio padding vertical — a propósito más separación entre
   grupos que dentro de uno, para que la jerarquía "trabajo diario" vs.
   "consulta ocasional" se note de un vistazo, no sólo por la etiqueta. */
.gp{font-size:10.5px;font-weight:600;letter-spacing:.11em;color:var(--nav-tx2);padding:28px 12px 8px}
.gp:first-child{padding-top:4px}
.nv{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--r1);color:var(--nav-tx2);font-size:14px;font-weight:500;border:0;background:none;width:100%;text-align:left;transition:var(--tr);position:relative}
/* `.nv{display:flex}` de arriba le gana al `[hidden]{display:none}` del
   user-agent (una regla de autor siempre le gana a una de UA, sin
   importar especificidad) — sin esto, ocultar un ítem de navegación por
   permisos (web/src/sesion-ui.js) no se ve, aunque el atributo esté puesto. */
.nv[hidden]{display:none}
.nv:hover{background:var(--nav3);color:var(--nav-tx)}
.nv.on{background:var(--nav3);color:var(--nav-tx)}
.nv.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--nav-ac)}
.nv:focus-visible{outline-offset:-2px}
.nv .b{margin-left:auto;font-size:11px;font-weight:600;padding:1.5px 7px;border-radius:99px;background:rgba(255,255,255,.1);color:var(--nav-tx2)}
.nv.on .b{background:var(--ac);color:#fff}
.mt{margin-top:auto;padding:12px 12px 0;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:var(--nav-tx2);font-style:italic;line-height:1.55}

/* Barra lateral colapsable (escritorio) — sólo íconos, la etiqueta de
   cada ítem sigue en el DOM para lectores de pantalla (".sr-solo",
   definida más abajo junto al resto de las utilidades de accesibilidad)
   en vez de desaparecer con display:none. */
/* Sólo desde el punto de quiebre de escritorio: en móvil el nav ya está
   oculto/en cajón (ver @media(max-width:900px) más abajo) y esta regla
   no debe competir con esa — `.app.nav-mini` tiene más especificidad
   que el `.app` de esa media query y le ganaría igual sin esta guarda. */
@media(min-width:900px){.app.nav-mini{grid-template-columns:68px 1fr}}
.nav-mini .bd>div,.nav-mini .gp,.nav-mini .mt,.nav-mini .nv .b{display:none}
.nav-mini .bd{justify-content:center;padding-left:4px;padding-right:4px}
.nav-mini .nav-toggle{margin-left:0}
.nav-mini .nv{justify-content:center}
.nav-mini .nv .et{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-mini .nav-toggle svg.i{transform:rotate(180deg)}

/* TOP */
.main{min-width:0;display:flex;flex-direction:column}
/* flex-wrap es la red de seguridad real contra el desplazamiento
   horizontal de página en 360px: con el buscador, el selector de tema
   y el bloque de usuario a la vez, agregar el botón de abrir el cajón
   (sólo en móvil) ya no entra en una sola línea sin `min-width:0` en
   `.sb` — el `flex:1` de una fila no encoge por debajo del ancho de su
   contenido si no se lo dice explícitamente. */
.tb{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 24px;background:var(--card);border-bottom:1px solid var(--ln);position:sticky;top:0;z-index:20}
.nav-abrir{display:none;width:36px;height:36px;border-radius:var(--r1);border:1px solid var(--ln);background:var(--card);color:var(--tx2);align-items:center;justify-content:center;flex:none;transition:var(--tr)}
.nav-abrir:hover{background:var(--bg);color:var(--tx)}
.sb{flex:1 1 200px;min-width:0;max-width:540px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--ln);border-radius:var(--r2);padding:8px 12px;color:var(--tx3);font-size:13.5px;transition:var(--tr)}
.sb:hover{border-color:var(--n6);background:var(--card)}
.sb input{min-width:0}
.sb .k{margin-left:auto;font-family:var(--m);font-size:11px;border:1px solid var(--ln);border-radius:5px;padding:1px 6px;background:var(--card);color:var(--tx3)}
.ub{margin-left:auto;display:flex;align-items:center;gap:12px}
.icb{position:relative;width:36px;height:36px;border-radius:var(--r1);border:1px solid var(--ln);background:var(--card);display:grid;place-items:center;color:var(--tx2);transition:var(--tr)}
.icb:hover{background:var(--bg);color:var(--tx)}
.icb:active{background:var(--n3)}
.icb i{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:99px;background:var(--rd);color:#fff;font-size:9.5px;font-weight:700;font-style:normal;display:grid;place-items:center;padding:0 4px;border:2px solid var(--card)}
/* Avatar de usuario — identidad, no decoración: color plano de acento
   (antes degradé ac→#8B5CF6 con un hex suelto, sin token). */
.av{width:32px;height:32px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:600}
.ub b{font-size:13.5px;display:block;line-height:1.2;font-weight:550}.ub span{font-size:11.5px;color:var(--tx3)}

.pg{padding:24px 24px 48px}
.ph{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ph h1{font-size:var(--fs-titulo-pagina);font-weight:var(--fw-titulo-pagina);letter-spacing:-.025em;line-height:1.2}
.ph p{color:var(--tx2);margin-top:4px;font-size:13.5px;max-width:74ch}
.ph .r{margin-left:auto;display:flex;gap:8px;align-items:center}
/* #ph-sel-barra (vistas/personas.js) vive DENTRO de `.ph .r` (junto al
   botón "Agregar persona", que no se oculta con la selección) — no lleva
   la clase `.r` para no heredar un segundo `margin-left:auto` anidado.
   Mismo motivo que .nv[hidden] más arriba: `display:flex` le gana al
   `[hidden]{display:none}` del navegador por especificidad. */
#ph-sel-barra{display:flex;gap:8px;align-items:center}
#ph-sel-barra[hidden]{display:none}

.btn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;padding:8px 12px;border-radius:var(--r1);border:1px solid var(--n-borde-control);background:var(--card);color:var(--tx);transition:var(--tr);box-shadow:var(--s1)}
.btn:hover{background:var(--bg);border-color:var(--n6)}
.btn.p{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 1px 2px rgba(47,71,141,.3)}
.btn.p:hover{background:var(--ac2);border-color:var(--ac2)}
.btn.s{padding:4px 12px;font-size:12.5px}
.btn.g{border:0;background:none;box-shadow:none;color:var(--tx3);padding:4px 8px}.btn.g:hover{color:var(--tx);background:var(--n3)}
.btn svg.i{width:15px;height:15px}

/* STATS */
.st{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:12px;margin-bottom:20px}
.sc{background:var(--card);border:1px solid var(--ln);border-radius:var(--r3);padding:12px;display:flex;gap:12px;text-align:left;box-shadow:var(--s1);transition:var(--tr)}
.sc:hover{box-shadow:var(--s2);transform:translateY(-1px);border-color:var(--n6)}
.sc:active{transform:translateY(0)}
.sc.on{border-color:var(--ac);box-shadow:0 0 0 3px var(--acR)}
.sc .ic{width:36px;height:36px;border-radius:var(--r2);display:grid;place-items:center;flex:none}
.sc .ic svg.i{width:17px;height:17px}
.sc>span:last-child{display:block;min-width:0}
.sc .l{display:block;font-size:12.5px;font-weight:550;color:var(--tx2);line-height:1.35}
.sc .v{display:block;font-size:24px;font-weight:680;letter-spacing:-.03em;line-height:1.15;margin:4px 0 4px}
.sc .d{display:block;font-size:11.5px;color:var(--tx3);line-height:1.4}
.t-ac{background:var(--acS);color:var(--ac)}.t-rd{background:var(--rdS);color:var(--rd)}
.t-am{background:var(--amS);color:var(--am)}.t-gr{background:var(--grS);color:var(--gr)}
.t-vi{background:var(--viS);color:var(--vi)}.t-sl{background:var(--slS);color:var(--slT)}
.t-in{background:var(--inS);color:var(--in)}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.cols.n{grid-template-columns:250px minmax(0,1fr)}
.card{background:var(--card);border:1px solid var(--ln);border-radius:var(--r3);box-shadow:var(--s1);overflow:hidden}
.ch{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ln)}
.ch .ico{width:32px;height:32px;border-radius:var(--r2);display:grid;place-items:center;flex:none}
.ch h2{font-size:var(--fs-titulo-seccion);font-weight:var(--fw-titulo-seccion);letter-spacing:-.01em}.ch p{font-size:12.5px;color:var(--tx3);margin-top:1px}
.ch .r{margin-left:auto;display:flex;gap:8px;align-items:center}
/* Segundo encabezado dentro de la misma tarjeta (ej. "Fuentes" debajo
   del resultado de una consulta, "Matriz" debajo de los reportes por
   período) — antes repetido como border-top inline en cada pantalla que
   lo necesitaba. */
.ch.sub{border-top:1px solid var(--ln)}
.lk{font-size:13px;font-weight:500;color:var(--ac);background:none;border:0;padding:0;transition:var(--tr)}
.lk:hover{color:var(--ac2);text-decoration:underline}
.cb{padding:16px}

/* ROWS */
.pr{display:grid;grid-template-columns:148px 1fr auto;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ln2);transition:var(--tr)}
.pr:last-child{border-bottom:0}.pr:hover{background:var(--card2)}
/* Escritorio — jerarquía de contenido (no de tokens): "requiere acción
   ahora" pesa más en la fila que "en seguimiento" (la .pr sin
   modificador, línea de base sin cambios); "informativo" pesa menos.
   Antes un mandato vencido y un acta apenas en borrador ocupaban
   exactamente el mismo espacio. */
.pr.n-accion{border-left:3px solid var(--rd);background:var(--rdS)}
.pr.n-accion:hover{background:var(--rdS)}
.pr.n-accion .ti{font-weight:650;font-size:14.5px}
.pr.n-informativo{padding-top:8px;padding-bottom:8px}
.pr.n-informativo .ti{font-weight:500;font-size:13px}
.pr.n-informativo .su{color:var(--tx3)}
.kind{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;font-weight:500;color:var(--tx2)}
.kind .ic{width:26px;height:26px;border-radius:var(--r1);display:grid;place-items:center;flex:none}
.kind .ic svg.i{width:13px;height:13px}
.pr .ti{font-size:14px;font-weight:550;line-height:1.45}
.pr .su{font-size:12.5px;color:var(--tx2);margin-top:4px;line-height:1.55}
.pr .ac{display:flex;gap:4px;align-items:flex-start}
.qt{margin-top:8px;padding:8px 12px;background:var(--acS);border-left:3px solid var(--ac);border-radius:0 var(--r1) var(--r1) 0;font-size:13px;color:var(--acT);line-height:1.6;font-style:italic}
.ref{font-family:var(--m);font-size:11.5px;font-weight:550;color:var(--acT);background:var(--acS);padding:1.5px 6px;border-radius:5px;white-space:nowrap}
/* Pills de estado — nunca sólo color: siempre acompañan una palabra
   distinta (Activo/Suspendido/Vencido…), el punto de color es un
   refuerzo, no el único portador del significado. */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:550;padding:2.5px 9px;border-radius:99px;white-space:nowrap}
.pill::before{content:"";width:5.5px;height:5.5px;border-radius:50%;background:currentColor}
.pill.n::before{display:none}
.p-ac{background:var(--acS);color:var(--acT)}.p-rd{background:var(--rdS);color:var(--rdT)}
.p-am{background:var(--amS);color:var(--amT)}.p-gr{background:var(--grS);color:var(--grT)}
.p-vi{background:var(--viS);color:var(--viT)}.p-sl{background:var(--slS);color:var(--slT)}
.p-in{background:var(--inS);color:var(--inT)}

/* `.li` se pensó para <button> (de ahí el reset de borde/fondo) pero
   varias pantallas la usan también en <a href> (reportes.js, consulta.js,
   organismo.js) — sin `color`/`text-decoration` acá, un <a> cae al azul
   subrayado nativo del navegador encima de esto: exactamente lo que
   reportaba la auditoría en Reportes. El reset es genérico a propósito,
   no un caso especial de esa pantalla: cualquier <a class="li"> futuro
   queda corregido solo. */
.li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ln2);width:100%;border-left:0;border-right:0;border-top:0;background:none;text-align:left;transition:var(--tr);color:inherit;text-decoration:none}
.li:last-child{border-bottom:0}.li:hover{background:var(--card2)}
/* Opción resaltada por teclado en un combobox de autocompletar
   (componentes/combobox.js) — mismo tinte que .palo.sel en la paleta de
   comandos, misma idea (resaltado ≠ foco real: el foco se queda en el
   input, ver aria-activedescendant). */
.li.sel{background:var(--acS)}
.li>span:not(.n):not(.pill):not(.av):not(.bar):not(.ico){min-width:0}
.li .t{display:block;font-size:13.5px;font-weight:500;line-height:1.4}
.li .s{display:block;font-size:12px;color:var(--tx3);margin-top:2px;line-height:1.4}
.li .n{margin-left:auto;font-family:var(--m);font-size:12px;color:var(--tx2);font-weight:550}
/* Variante vertical — para cuando la fila tiene varias líneas de
   contenido (ej. un candidato a duplicado) en vez de un título + un
   valor a la derecha. Antes se lograba con flex-direction inline,
   peleando contra el `display:flex` horizontal de la clase base
   (auditoría de consistencia visual). */
.li.v{flex-direction:column;align-items:stretch;gap:8px;cursor:default}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);padding:8px 16px;border-bottom:1px solid var(--ln);background:var(--card2)}
td{padding:12px 16px;border-bottom:1px solid var(--ln2);font-size:13.5px;vertical-align:middle}
tbody tr{cursor:pointer;transition:var(--tr)}
tbody tr:hover{background:var(--card2)}
tbody tr:last-child td{border-bottom:0}
.nm{font-weight:600}.sm{font-size:12.5px;color:var(--tx3)}

.fb{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--ln);background:var(--card2);align-items:center}
.inp,select.inp{font:inherit;font-size:13px;padding:8px 12px;border:1px solid var(--n-borde-control);border-radius:var(--r1);background:var(--card);color:var(--tx);min-width:0;transition:var(--tr)}
.inp:hover{border-color:var(--n6)}
.inp:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px var(--acR)}
.seg{display:inline-flex;background:var(--n3);border-radius:var(--r1);padding:2.5px;gap:2px}
.seg button{font-size:12.5px;font-weight:500;padding:4px 12px;border-radius:5px;border:0;background:none;color:var(--tx2);transition:var(--tr)}
.seg button:hover{color:var(--tx)}
.seg button.on{background:var(--card);color:var(--tx);box-shadow:var(--s1);font-weight:550}
.chip{font-size:12.5px;font-weight:500;padding:4px 12px;border-radius:99px;border:1px solid var(--n-borde-control);background:var(--card);color:var(--tx2);transition:var(--tr)}
.chip:hover{border-color:var(--n6);color:var(--tx)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}
.chip:active:not(:disabled){transform:translateY(0.5px)}

/* flex-wrap: con 18 pestañas en Administración (auditoría 2026-09-22,
   al sumar "Seminarios") una sola fila con scroll horizontal dejaba todo
   lo posterior a "Finanzas" invisible sin deslizar — envolver a varias
   filas lo hace visible siempre, sin agregar una navegación agrupada
   nueva. overflow-x:auto queda como respaldo si una sola pestaña
   angosta no entrara ni así. */
.tabs{display:flex;flex-wrap:wrap;gap:1px;padding:0 16px;border-bottom:1px solid var(--ln);overflow-x:auto}
.tab{padding:12px;font-size:13.5px;font-weight:500;color:var(--tx2);border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:var(--tr)}
.tab:hover{color:var(--tx)}.tab.on{color:var(--ac);border-bottom-color:var(--ac);font-weight:550}

.fh{background:var(--card);border:1px solid var(--ln);border-radius:var(--r3);box-shadow:var(--s1);margin-bottom:16px;overflow:hidden}
.fhb{display:flex;gap:16px;padding:20px;align-items:flex-start;flex-wrap:wrap}
/* Avatar de ficha — insignia de la entidad, no marca: plano y neutro
   por defecto (antes degradé nav2→nav3). Las fichas que necesitan
   distinguir un tipo de entidad (cargo, expediente, gestión) usan el
   color de identidad categórica (--vi) plano, sin degradé ni hex
   inventado — ver cargo.js/expediente.js/gestion.js. */
.fav{width:56px;height:56px;border-radius:var(--r3);background:var(--nav3);color:#fff;display:grid;place-items:center;font-size:19px;font-weight:600;flex:none;box-shadow:var(--s1)}
.fav svg.i{width:24px;height:24px}
.fh h1{font-size:var(--fs-titulo-ficha);font-weight:var(--fw-titulo-ficha);letter-spacing:-.02em}
.fmeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:1px;background:var(--ln2);border-top:1px solid var(--ln)}
.kv div{background:var(--card);padding:12px 20px}
.kv .k{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3)}
.kv .v{font-size:14px;font-weight:500;margin-top:4px}
.kv .v button{border:0;background:none;color:var(--ac);font-weight:500;padding:0;font-size:14px}
.kv .v button:hover{text-decoration:underline}

/* TIMELINE */
.tlw{overflow-x:auto}
.tlk{display:flex;gap:16px;flex-wrap:wrap;padding:12px 16px;font-size:12px;color:var(--tx2);border-bottom:1px solid var(--ln2)}
.tlk span{display:inline-flex;align-items:center;gap:8px}
.tlk i{width:10px;height:10px;border-radius:3px;display:inline-block}
.ev{display:grid;grid-template-columns:76px 26px 1fr;align-items:start}
.ev .yr{font-family:var(--m);font-size:12.5px;font-weight:550;color:var(--tx2);padding:12px 12px 0 0;text-align:right}
.ev .ax{position:relative;display:flex;justify-content:center}
.ev .ax::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--ln)}
.ev:first-child .ax::before{top:16px}.ev:last-child .ax::before{bottom:calc(100% - 16px)}
.ev .dt{position:relative;width:11px;height:11px;border-radius:50%;margin-top:16px;border:2.5px solid var(--card);box-shadow:0 0 0 1px var(--ln)}
.ev .bd2{padding:12px 0 12px 8px}
.ev .t{font-size:14px;font-weight:600}
.ev .s{font-size:12.5px;color:var(--tx2);margin-top:4px;line-height:1.55}
.gap{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:4px 0 4px 102px;font-size:11.5px;color:var(--tx3)}
.gap .ln{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--n5) 0 4px,transparent 4px 9px)}

/* MATRIZ */
.mx{overflow:auto;max-height:66vh}
.mx table{min-width:960px}
.mx th{font-size:10px;padding:8px;position:sticky;top:0;z-index:3}
.mx td{padding:0;border-right:1px solid var(--ln2)}
.mx .dn{padding:8px 12px;font-weight:600;font-size:12.5px;white-space:nowrap;background:var(--card2);position:sticky;left:0;z-index:2;border-right:1px solid var(--ln)}
.cel{width:100%;border:0;background:none;padding:8px;text-align:left;font-size:12px;line-height:1.35;min-height:48px;transition:var(--tr)}
.cel:hover{background:var(--acS)}
.cel:disabled{opacity:.5;cursor:not-allowed}
.cel .n2{font-weight:500;display:block}
.cel .st2{font-size:10.5px;font-weight:600;margin-top:2px;display:inline-block}
.s-ok{color:var(--gr)}.s-ven{color:var(--rd)}.s-pro{color:var(--am)}.s-vac{color:var(--tx3);font-style:italic}

/* ORG */
.org{padding:24px 16px;overflow-x:auto}
.olv{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.onode{background:var(--card);border:1px solid var(--ln);border-radius:var(--r2);padding:12px 16px;min-width:180px;text-align:center;box-shadow:var(--s1);transition:var(--tr)}
.onode:hover{border-color:var(--ac);box-shadow:var(--s2);transform:translateY(-1px)}
.onode .c{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);line-height:1.3}
.onode .p{display:block;font-size:14.5px;font-weight:600;margin-top:4px;line-height:1.3}
.onode .y{display:block;font-family:var(--m);font-size:11px;color:var(--tx3);margin-top:4px}
.onode.vac{border-style:dashed}.onode.vac .p{color:var(--tx3);font-style:italic;font-weight:500}
.ocon{height:20px;width:2px;background:var(--ln);margin:0 auto}
.slider{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ln);background:var(--card2);flex-wrap:wrap}
.slider input[type=range]{flex:1;min-width:190px;accent-color:var(--ac)}
.yrbig{font-family:var(--m);font-size:20px;font-weight:600;min-width:58px;letter-spacing:-.02em}

/* TREE */
.tn2{display:flex;align-items:center;gap:8px;padding:8px 16px;border:0;background:none;width:100%;text-align:left;font-size:13.5px;transition:var(--tr)}
.tn2:hover{background:var(--card2)}
.tn2 .tt{font-weight:500}.tn2 .ts{font-size:12px;color:var(--tx3);margin-left:auto;padding-left:12px;white-space:nowrap}
.tn2 .bad{font-size:10.5px;font-weight:550;padding:1px 7px;border-radius:99px;background:var(--slS);color:var(--slT)}

/* ACTA ROW */
.ar{padding:12px 16px;border-bottom:1px solid var(--ln2);display:flex;gap:12px;align-items:stretch;width:100%;border-left:0;border-right:0;border-top:0;background:none;text-align:left;transition:var(--tr)}
.ar:last-child{border-bottom:0}.ar:hover{background:var(--card2)}
.ar .cl{width:3px;border-radius:99px;flex:none}
.cl-arch{background:var(--n6)}.cl-nue{background:var(--ac)}
.ar .h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ar .ti{font-size:14px;font-weight:600}
.ar .mt2{display:block;font-size:12.5px;color:var(--tx2);margin-top:4px;line-height:1.55}

/* TEMAS TREE */
.tt2{padding:4px 0}
.tt2 .g{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);padding:12px 16px 4px}
.tt2 button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:0;background:none;text-align:left;font-size:13px;color:var(--tx2);transition:var(--tr);border-radius:0}
.tt2 button:hover{background:var(--card2);color:var(--tx)}
.tt2 button.on{background:var(--acS);color:var(--acT);font-weight:550}
.tt2 button .c2{margin-left:auto;font-family:var(--m);font-size:11.5px;color:var(--tx3)}
.tt2 button.sub{padding-left:32px;font-size:12.5px}

/* CONSULTA */
.qa{padding:16px;display:flex;flex-direction:column;gap:16px}
.qbub{align-self:flex-end;background:var(--ac);color:#fff;padding:8px 12px;border-radius:var(--r3) var(--r3) 4px var(--r3);max-width:76%;font-size:13.5px;line-height:1.55}
.abub{align-self:flex-start;max-width:92%;background:var(--card2);border:1px solid var(--ln);border-radius:var(--r3) var(--r3) var(--r3) 4px;padding:12px 16px;font-size:13.5px;line-height:1.65}
.abub p{margin-bottom:8px}.abub p:last-child{margin-bottom:0}
.src{margin-top:12px;padding-top:8px;border-top:1px solid var(--ln);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.src .l2{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-right:4px}
.srcb{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;padding:4px 8px;border-radius:99px;border:1px solid var(--ln);background:var(--card);color:var(--tx2);transition:var(--tr)}
.srcb:hover{border-color:var(--ac);color:var(--ac)}
.sug{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.sugb{font-size:12.5px;padding:8px 12px;border-radius:99px;border:1px solid var(--ln);background:var(--card);color:var(--tx2);transition:var(--tr)}
.sugb:hover{border-color:var(--ac);color:var(--ac);background:var(--acS)}

/* MODAL — sobre <dialog> nativo (ver componentes/modal.js): showModal()
   ya pone el elemento en el "top layer" con su propio ::backdrop, así
   que `.ov` (el div que hacía de fondo oscuro a mano) ya no hace falta
   — queda `.ov{}` vacío de estilo propio más abajo sólo como selector
   muerto por compatibilidad de marcado (cada pantalla lo sigue
   escribiendo en su plantilla; componentes/modal.js lo reemplaza por el
   <dialog> antes de que el usuario llegue a verlo). */
@keyframes fi{from{opacity:0}}
dialog.md{border:0;padding:0;margin:auto;background:var(--card);border-radius:var(--r3);box-shadow:var(--s3);width:min(580px,calc(100% - 40px));max-height:88vh;overflow:auto;color:inherit;animation:su .18s cubic-bezier(.3,0,.2,1)}
dialog.md::backdrop{background:rgba(10,14,22,.5);backdrop-filter:blur(3px);animation:fi .14s ease}
@keyframes su{from{opacity:0;transform:translateY(8px) scale(.99)}}
dialog.md.wide{width:min(720px,calc(100% - 40px))}
/* Modal largo en pantalla angosta: pasa a pantalla completa en vez de
   una caja flotante con poco margen — antes cualquier modal con
   contenido largo (ej. el de designar un cargo, con el buscador de
   persona) quedaba con scroll interno apretado contra los bordes. */
@media(max-width:640px){
  dialog.md{width:100%;height:100%;max-width:100%;max-height:100%;margin:0;border-radius:0}
}
.mh{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ln)}
.mh h3{font-size:var(--fs-titulo-seccion);font-weight:var(--fw-titulo-seccion);letter-spacing:-.01em}
.mb{padding:16px 20px;display:flex;flex-direction:column;gap:16px}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--tx2);margin-bottom:4px}
.fld .inp{width:100%}
.hint{font-size:var(--fs-ayuda);color:var(--tx3);margin-top:4px;line-height:1.5}
.mf{display:flex;gap:8px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--ln);background:var(--card2)}
/* Aviso — el estado ya viene con ícono en el marcado de cada pantalla
   (ver util.js, ${sv(...)} antes del texto en los llamadores de nota);
   acá sólo el color de fondo/borde por variante, nunca el único
   portador del significado. */
.note{padding:8px 12px;background:var(--amS);border-left:3px solid var(--am);border-radius:0 var(--r1) var(--r1) 0;font-size:12.5px;color:var(--amT);line-height:1.6}
/* Variante informativa — antes tomaba el acento prestado (era
   `.note.b{background:var(--acS)...}`): un aviso pasivo no es una
   acción primaria, así que pasa a tener su propio color de estado
   (--in, "info"), separado del acento. */
.note.b{background:var(--inS);border-color:var(--in);color:var(--inT)}
/* Variante de alerta — vencidas/sin movimiento en Gestiones (y
   cualquier otro conteo que sea un problema activo, no un estado más):
   mismo criterio que .note.b, color de peligro en vez de info. */
.note.d{background:var(--rdS);border-color:var(--rd);color:var(--rdT)}

/* PALETTE — mismo <dialog> nativo que el modal de arriba (ver
   paleta.js): antes un <div> a mano en document.body sin foco atrapado
   (Shift+Tab desde el buscador se escapaba a la navegación de atrás,
   con la paleta todavía abierta encima) ni devolución de foco al
   cerrar. `.palb` es ahora el propio <dialog>, alineado arriba en vez
   de centrado — de ahí el `margin` con el top fijo en vez de `auto` en
   los cuatro lados. */
dialog.palb{border:0;padding:0;margin:88px auto auto;background:var(--card);border-radius:var(--r3);box-shadow:var(--s3);width:min(600px,calc(100% - 40px));max-height:min(68vh,calc(100vh - 108px));display:flex;flex-direction:column;overflow:hidden;color:inherit;animation:su .16s ease}
dialog.palb::backdrop{background:rgba(10,14,22,.45);backdrop-filter:blur(3px);animation:fi .12s ease}
@media(max-width:640px){
  dialog.palb{margin:0;width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0}
}
.pali{display:flex;align-items:center;gap:12px;padding:16px}
.pali input{flex:1;border:0;background:none;font:inherit;font-size:15.5px;color:var(--tx);outline:0}
.palr{overflow-y:auto;padding:4px}
.palo{display:flex;align-items:center;gap:12px;padding:8px 12px;width:100%;border:0;background:none;text-align:left;font-size:14px;border-radius:var(--r1);transition:var(--tr)}
.palo:hover,.palo.sel{background:var(--acS)}
.palo:focus-visible{outline-offset:-2px}
.palo .k2{font-size:11px;color:var(--tx3);margin-left:auto;font-family:var(--m)}
.palo .g2{font-size:10.5px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;min-width:56px}

.emp{padding:48px 20px;text-align:center;color:var(--tx3);font-size:13.5px}
.emp b{display:block;color:var(--tx2);font-size:14.5px;font-weight:550;margin-bottom:4px}
.cf{padding:8px 16px;border-top:1px solid var(--ln);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12.5px;color:var(--tx3);background:var(--card2)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--nav1);color:#fff;padding:12px 16px;border-radius:var(--r2);font-size:13.5px;box-shadow:var(--s3);z-index:300;display:flex;align-items:center;gap:8px;animation:tu .22s cubic-bezier(.3,0,.2,1);max-width:90vw}
@keyframes tu{from{opacity:0;transform:translate(-50%,8px)}}
.toast svg.i{color:var(--color-exito)}
.bkl{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--tx2);border:0;background:none;padding:4px 0;margin-bottom:8px;transition:var(--tr)}
.bkl:hover{color:var(--ac)}
.bar{height:8px;background:var(--n3);border-radius:99px;overflow:hidden}
.bar>span{display:block;height:100%;background:var(--ac);border-radius:99px}

/* EDITOR */
.edt{font-size:14.5px;line-height:1.85;color:var(--tx)}
.edt p{margin-bottom:16px}
.ech{display:inline-flex;align-items:baseline;gap:4px;font:inherit;padding:1px 7px;border-radius:5px;border:1px solid var(--acS);background:var(--acS);color:var(--acT);font-weight:550;transition:var(--tr)}
.ech:hover{border-color:var(--ac)}
.ech .idp{font-family:var(--m);font-size:10px;opacity:.6}

/* CREDENCIAL — impreso institucional, no un componente de pantalla:
   conserva su propio encabezado oscuro (antes con degradé; ahora
   plano, mismo color que el nav). */
.cred{max-width:420px;margin:0 auto;background:var(--card);border-radius:var(--r3);box-shadow:var(--s3);overflow:hidden;border:1px solid var(--ln)}
.cr-hd{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--nav1);color:#fff}
.cr-lg{width:32px;height:32px;border-radius:8px;border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;flex:none}
.cr-lg svg{width:18px;height:18px;stroke:#fff}
.cr-hd b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.03em;line-height:1.3}
.cr-hd span{display:block;font-size:10px;color:rgba(255,255,255,.65);margin-top:2px}
.cr-bd{display:flex;gap:16px;padding:16px}
.cr-av{width:62px;height:62px;border-radius:var(--r2);background:var(--n3);color:var(--tx3);display:grid;place-items:center;font-size:20px;font-weight:600;flex:none}
.cr-nm{font-size:19px;font-weight:680;letter-spacing:-.02em;line-height:1.2}
.cr-ct{display:inline-block;font-size:11.5px;font-weight:600;color:var(--acT);background:var(--acS);padding:2px 9px;border-radius:99px;margin-top:4px}
.cr-mt{font-size:11.5px;color:var(--tx2);margin-top:8px;display:flex;gap:12px;flex-wrap:wrap}
.cr-ft{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-top:1px solid var(--ln);background:var(--card2);font-size:11px;color:var(--tx3)}

/* UTILIDADES DE DISPOSICIÓN — antes cada pantalla repetía a mano su
   propio style="display:flex;gap:8px;align-items:center" (auditoría de
   consistencia visual, 12 pantallas escritas por sesiones distintas).
   8px es el gap más repetido de lejos; un gap puntual distinto sigue
   siendo un style="gap:...px" sobre la clase, no una modificadora nueva
   por cada número — la clase ya pone el resto (display/align/wrap). */
.row{display:flex;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:8px}

/* Casilla de un formulario — antes repetida entera como inline style en
   más de un archivo (administracion-catalogo.js, formulario-dinamico.js). */
.chk{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--tx)}
.chk:has(input:disabled){color:var(--n-disabled);cursor:not-allowed}

/* Selector de tema (componentes/tema.js) — un .icb más en la barra
   superior, sin componente nuevo: cicla sistema → claro → oscuro. */
.tema-etq{font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em}

/* ACCESIBILIDAD — visible sólo para lectores de pantalla (técnica
   estándar: en el DOM y en el árbol de accesibilidad, pero recortado a
   1px y sin poder desbordar el layout) y salto de bloque, para saltear
   la barra lateral con teclado en cada pantalla en vez de tabular por
   los 8-10 ítems de nav cada vez. */
.sr-solo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-40px;left:8px;z-index:1000;background:var(--ac);color:#fff;padding:8px 16px;border-radius:0 0 8px 8px;font-size:13px;font-weight:600;transition:top var(--transition-rapida)}
.skip-link:focus{top:0}

/* Barra lateral en cajón (pantallas angostas) — <dialog> nativo (ver
   main.js, abrirCajonNav/cerrarCajonNav): entra desde la izquierda,
   alto completo, con su propio ::backdrop. `.nav` conserva su ancho
   fijo de escritorio (252px) salvo acá adentro, donde ocupa el cajón
   entero. */
dialog.nav-cajon{border:0;padding:0;margin:0;inset:0 auto 0 0;height:100vh;max-height:100vh;width:82vw;max-width:300px;background:transparent;animation:cajon-in .18s ease}
dialog.nav-cajon::backdrop{background:rgba(10,14,22,.5);backdrop-filter:blur(2px);animation:fi .14s ease}
dialog.nav-cajon .nav{display:flex;width:100%;height:100%;position:static}
@keyframes cajon-in{from{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){dialog.nav-cajon{animation:none}}

@media(max-width:1240px){.cols{grid-template-columns:1fr}.cols.n{grid-template-columns:1fr}}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .nav{display:none} /* excepto dentro de dialog.nav-cajon, ver arriba (mayor especificidad) */
  .nav-abrir{display:flex}
  .nav-toggle{display:none}
  .nav-cerrar{display:grid}
  .pg,.tb{padding-left:16px;padding-right:16px}
  .pr{grid-template-columns:1fr}
  .pr .ac{justify-content:flex-start}
}
@media(max-width:480px){.ub-texto{display:none}}

/* Anclas reales en vez de botones con click delegado (mejor accesibilidad,
   soportan cmd/ctrl-click): mismo aspecto que el prototipo, sólo se les
   saca el subrayado y el color de link nativo del navegador. */
a.bkl, a.onode, a.btn, a.tn2, .kv .v a, table a, .li a { text-decoration: none; color: inherit; }
.onode { display: block; }
a.btn.p { color: #fff; }

/* Movimiento — respeta la preferencia del sistema/usuario sin
   excepciones: ninguna transición ni animación decorativa sobrevive acá,
   incluida la de apertura de modal y la del toast. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}