/* ============================================================================
   OPAMSS · SISTEMA DE DISEÑO — Núcleo
   ============================================================================
   Identidad tomada del Portal Administrativo OPAMSS (SIRA): azul institucional
   #00167B, acento verde #35D32F, tipografía Exo 2 e iconos Material Symbols.

   QUÉ SE HIZO DISTINTO respecto al portal de referencia, y por qué:

     · UN SOLO ORIGEN. Allá el aspecto se reparte en doce hojas que se pisan por
       orden de carga (sira-app-pro.css se carga después "para ganar"), con
       !important repartido para vencer a Bootstrap. Aquí el orden es explícito
       con @layer: una regla de componente jamás depende de dónde se cargó.

     · EL MODO NOCHE ES DE PRIMERA CLASE. En el portal el tema oscuro es una
       lista de parches por componente; aquí las superficies, el texto y los
       bordes salen todos de fichas que cambian de valor. Añadir un componente
       no obliga a escribir su parche nocturno.

     · TRES MODOS, no dos: día, noche y automático (sigue al sistema operativo).

     · CONTRASTE VERIFICADO. Se conservan los grises ya corregidos del portal
       (--color-muted #606E8A y --color-subtle #656F7D, ambos sobre 4.5:1) en
       vez de los del documento original, que no llegaban al mínimo AA.

   ORDEN DE CAPAS — lo de abajo gana:
     base        reset y elementos HTML
     shell       barra lateral, barra superior, lienzo
     componentes tarjetas, tablas, botones, campos, insignias
     paginas     lo propio de una pantalla concreta
     utilidades  ayudantes de una sola declaración
   ============================================================================ */

@layer base, shell, componentes, paginas, utilidades;


/* ════════════════════════════════════════════════════════════════════════════
   FICHAS DE DISEÑO — MODO DÍA
   ════════════════════════════════════════════════════════════════════════════ */
@layer base {

:root {
    color-scheme: light;

    /* ── Marca ───────────────────────────────────────────────────────────── */
    --primary:        #00167B;
    --primary-dark:   #000F54;
    --primary-light:  #1A3BA0;
    --primary-subtle: #E8ECFA;
    --primary-soft:   rgba(0, 22, 123, .07);

    --accent:         #35D32F;
    --accent-dark:    #28A623;
    --accent-light:   #5EE05A;
    --accent-subtle:  #E8FBE7;

    /* El anillo de foco va aparte del azul de marca: #00167B como contorno se
       lee como un recuadro negro, no como una ayuda visual. */
    --focus-ring:     #2F5BD8;
    --focus-shadow:   0 0 0 3px rgba(47, 91, 216, .28);

    /* ── Superficies y texto ─────────────────────────────────────────────── */
    --color-bg:            #F0F2F5;
    --color-bg-deep:       #E7EBF2;
    --color-surface:       #FFFFFF;
    --color-surface-alt:   #F8F9FC;
    --color-surface-sunken:#F2F5F9;

    --color-text:     #1E2A3A;
    --color-muted:    #606E8A;   /* 4.57:1 sobre lienzo · 5.13:1 sobre tarjeta */
    --color-subtle:   #656F7D;   /* 4.54:1 · 5.09:1 */
    --color-inverse:  #FFFFFF;

    --color-border:        #E2E8F0;
    --color-border-strong: #CBD5E1;

    /* ── Semántica ───────────────────────────────────────────────────────── */
    --color-success:    #28A623;
    --color-success-bg: #E8FBE7;
    --color-success-tx: #1C7A19;

    --color-warning:    #D97706;
    --color-warning-bg: #FFFBEB;
    --color-warning-tx: #B45309;

    --color-error:      #DC2626;
    --color-error-bg:   #FEF2F2;
    --color-error-tx:   #B91C1C;

    --color-info:       #0077B6;
    --color-info-bg:    #E8F4FD;
    --color-info-tx:    #045C8C;

    --color-neutral:    #94A3B8;
    --color-neutral-bg: #EEF1F6;

    /* Serie para gráficos: productivo / neutral / no productivo / reunión */
    --serie-productivo: #28A623;
    --serie-neutral:    #94A3B8;
    --serie-improductivo:#DC2626;
    --serie-reunion:    #0077B6;
    --serie-inactivo:   #D97706;

    /* ── Tipografía ──────────────────────────────────────────────────────── */
    --font-main: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;

    /* ── Sombras ─────────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0, 22, 123, .04);
    --shadow-sm: 0 1px 3px rgba(0, 22, 123, .06), 0 1px 6px rgba(0, 22, 123, .04);
    --shadow-md: 0 4px 12px rgba(0, 22, 123, .08), 0 2px 4px rgba(0, 22, 123, .04);
    --shadow-lg: 0 8px 24px rgba(0, 22, 123, .10), 0 4px 8px rgba(0, 22, 123, .06);
    --shadow-xl: 0 16px 48px rgba(0, 22, 123, .12), 0 8px 16px rgba(0, 22, 123, .08);
    --shadow-brand: 0 8px 18px rgba(0, 22, 123, .30);

    /* ── Forma ───────────────────────────────────────────────────────────── */
    --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;
    --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px;
    --r-pill: 999px;

    /* ── Medidas del armazón ─────────────────────────────────────────────── */
    --sidebar-w: 264px;
    --sidebar-rail: 68px;
    --topbar-h: 60px;
    --gutter: 24px;

    /* ── Movimiento ──────────────────────────────────────────────────────── */
    --t-fast: .12s;
    --t-base: .18s;
    --t-slow: .28s;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-spring: cubic-bezier(.22, .68, .24, 1);
}

/* ════════════════════════════════════════════════════════════════════════════
   FICHAS DE DISEÑO — MODO NOCHE
   ════════════════════════════════════════════════════════════════════════════
   El azul institucional casi negro no sirve como color de TEXTO sobre fondo
   oscuro, así que de noche --primary se aclara a #6AA0FF. Los rellenos sólidos
   que llevan texto blanco siguen usando --primary-solid, que se queda oscuro.
   Este desdoble es lo que evita tener que parchear componente por componente. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --primary:        #6AA0FF;
    --primary-solid:  #1A3BA0;
    --primary-dark:   #4C86F0;
    --primary-light:  #8FB9FF;
    --primary-subtle: rgba(106, 160, 255, .14);
    --primary-soft:   rgba(106, 160, 255, .09);

    --accent:         #4ADE80;
    --accent-dark:    #35D32F;
    --accent-subtle:  rgba(74, 222, 128, .14);

    --focus-ring:     #7AA2FF;
    --focus-shadow:   0 0 0 3px rgba(122, 162, 255, .32);

    --color-bg:            #161B2E;
    --color-bg-deep:       #10142378;
    --color-surface:       #1E2A4A;
    --color-surface-alt:   #243055;
    --color-surface-sunken:#1A2440;

    --color-text:     #E8EEF6;
    --color-muted:    #8A9BBC;
    --color-subtle:   #7D93B9;

    --color-border:        #2D3E63;
    --color-border-strong: #3A4F7A;

    --color-success:    #4ADE80;
    --color-success-bg: rgba(74, 222, 128, .14);
    --color-success-tx: #86EFAC;

    --color-warning:    #FBBF24;
    --color-warning-bg: rgba(251, 191, 36, .14);
    --color-warning-tx: #FCD34D;

    --color-error:      #F87171;
    --color-error-bg:   rgba(248, 113, 113, .14);
    --color-error-tx:   #FCA5A5;

    --color-info:       #38BDF8;
    --color-info-bg:    rgba(56, 189, 248, .14);
    --color-info-tx:    #7DD3FC;

    --color-neutral:    #64748B;
    --color-neutral-bg: rgba(148, 163, 184, .12);

    --serie-productivo: #4ADE80;
    --serie-neutral:    #64748B;
    --serie-improductivo:#F87171;
    --serie-reunion:    #38BDF8;
    --serie-inactivo:   #FBBF24;

    /* De noche el negro no separa superficies: se sube el peso de la sombra. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .40), 0 1px 6px rgba(0, 0, 0, .28);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45), 0 2px 5px rgba(0, 0, 0, .30);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .50), 0 4px 10px rgba(0, 0, 0, .35);
    --shadow-xl: 0 20px 56px rgba(0, 0, 0, .58), 0 8px 18px rgba(0, 0, 0, .40);
    --shadow-brand: 0 8px 20px rgba(0, 0, 0, .45);
}

/* Modo día explícito: define el relleno sólido para que los componentes puedan
   usar --primary-solid sin preguntar por el tema. */
:root:not([data-theme="dark"]) { --primary-solid: #00167B; }

/* MODO AUTOMÁTICO — sigue al sistema operativo.
   Se repiten los valores del bloque oscuro bajo la consulta de medios; es la
   única duplicación del archivo y existe porque el navegador no permite
   aplicar un bloque de fichas de forma condicional. */
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        color-scheme: dark;

        --primary: #6AA0FF;  --primary-solid: #1A3BA0;
        --primary-dark: #4C86F0; --primary-light: #8FB9FF;
        --primary-subtle: rgba(106, 160, 255, .14);
        --primary-soft: rgba(106, 160, 255, .09);
        --accent: #4ADE80; --accent-dark: #35D32F;
        --accent-subtle: rgba(74, 222, 128, .14);
        --focus-ring: #7AA2FF; --focus-shadow: 0 0 0 3px rgba(122, 162, 255, .32);

        --color-bg: #161B2E; --color-bg-deep: #101423;
        --color-surface: #1E2A4A; --color-surface-alt: #243055;
        --color-surface-sunken: #1A2440;
        --color-text: #E8EEF6; --color-muted: #8A9BBC; --color-subtle: #7D93B9;
        --color-border: #2D3E63; --color-border-strong: #3A4F7A;

        --color-success: #4ADE80; --color-success-bg: rgba(74,222,128,.14); --color-success-tx: #86EFAC;
        --color-warning: #FBBF24; --color-warning-bg: rgba(251,191,36,.14); --color-warning-tx: #FCD34D;
        --color-error: #F87171;   --color-error-bg: rgba(248,113,113,.14);  --color-error-tx: #FCA5A5;
        --color-info: #38BDF8;    --color-info-bg: rgba(56,189,248,.14);    --color-info-tx: #7DD3FC;
        --color-neutral: #64748B; --color-neutral-bg: rgba(148,163,184,.12);

        --serie-productivo: #4ADE80; --serie-neutral: #64748B;
        --serie-improductivo: #F87171; --serie-reunion: #38BDF8; --serie-inactivo: #FBBF24;

        --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
        --shadow-sm: 0 1px 3px rgba(0,0,0,.40), 0 1px 6px rgba(0,0,0,.28);
        --shadow-md: 0 4px 14px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.30);
        --shadow-lg: 0 10px 30px rgba(0,0,0,.50), 0 4px 10px rgba(0,0,0,.35);
        --shadow-xl: 0 20px 56px rgba(0,0,0,.58), 0 8px 18px rgba(0,0,0,.40);
        --shadow-brand: 0 8px 20px rgba(0,0,0,.45);
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CROMO — COLOR DEL MENÚ Y DE LA BARRA SUPERIOR
   ════════════════════════════════════════════════════════════════════════════
   El "cromo" es el marco de la aplicación: menú lateral y barra superior. Se
   personaliza aparte del modo día/noche, porque son dos decisiones distintas
   (alguien puede querer el menú grafito de día y el mismo grafito de noche).

   Cada variante define el juego COMPLETO de fichas. Nada consume --primary
   directamente en el armazón, así que añadir un color es añadir un bloque de
   siete líneas, sin tocar ni una regla de componente.

   Se elige con data-menu en <html>; data-barra decide si la barra superior va
   en color o en claro. */

:root,
:root[data-menu="institucional"] {
    --chrome-bg:      var(--color-surface);
    --chrome-cab:     #00167B;
    --chrome-acc:     #00167B;
    --chrome-acc-2:   #1F3AA8;
    --chrome-acc-ink: #FFFFFF;
    --chrome-tx:      var(--color-muted);
    --chrome-cap:     var(--color-subtle);
    --chrome-hov-bg:  var(--primary-subtle);
    --chrome-hov-tx:  var(--primary);
    --chrome-borde:   var(--color-border);
    --chrome-pie-bg:  var(--color-surface-alt);
    --chrome-pie-tx:  var(--color-text);
}

/* Variantes de menú oscuro: el cuerpo del menú se tiñe y el acento cambia. */
:root[data-menu="indigo"] {
    --chrome-bg: #0B1533;  --chrome-cab: #00167B;
    --chrome-acc: #2F5BD8; --chrome-acc-2: #4C86F0; --chrome-acc-ink: #FFFFFF;
    --chrome-tx: rgba(255,255,255,.78); --chrome-cap: rgba(255,255,255,.48);
    --chrome-hov-bg: rgba(255,255,255,.10); --chrome-hov-tx: #FFFFFF;
    --chrome-borde: rgba(255,255,255,.10);
    --chrome-pie-bg: rgba(255,255,255,.06); --chrome-pie-tx: rgba(255,255,255,.88);
}
:root[data-menu="verde"] {
    --chrome-bg: #0B1533;  --chrome-cab: #00167B;
    --chrome-acc: #35D32F; --chrome-acc-2: #5BED24; --chrome-acc-ink: #06230A;
    --chrome-tx: rgba(255,255,255,.78); --chrome-cap: rgba(255,255,255,.48);
    --chrome-hov-bg: rgba(91,237,36,.14); --chrome-hov-tx: #86EF57;
    --chrome-borde: rgba(255,255,255,.10);
    --chrome-pie-bg: rgba(255,255,255,.06); --chrome-pie-tx: rgba(255,255,255,.88);
}
:root[data-menu="ambar"] {
    --chrome-bg: #0B1533;  --chrome-cab: #00167B;
    --chrome-acc: #D97706; --chrome-acc-2: #F59E0B; --chrome-acc-ink: #2A1503;
    --chrome-tx: rgba(255,255,255,.80); --chrome-cap: rgba(255,255,255,.48);
    --chrome-hov-bg: rgba(245,158,11,.16); --chrome-hov-tx: #FBBF24;
    --chrome-borde: rgba(255,255,255,.10);
    --chrome-pie-bg: rgba(255,255,255,.06); --chrome-pie-tx: rgba(255,255,255,.88);
}
:root[data-menu="turquesa"] {
    --chrome-bg: #0B1533;  --chrome-cab: #00167B;
    --chrome-acc: #0E7490; --chrome-acc-2: #22D3EE; --chrome-acc-ink: #FFFFFF;
    --chrome-tx: rgba(255,255,255,.80); --chrome-cap: rgba(255,255,255,.48);
    --chrome-hov-bg: rgba(34,211,238,.16); --chrome-hov-tx: #67E8F9;
    --chrome-borde: rgba(255,255,255,.10);
    --chrome-pie-bg: rgba(255,255,255,.06); --chrome-pie-tx: rgba(255,255,255,.88);
}
:root[data-menu="violeta"] {
    --chrome-bg: #0B1533;  --chrome-cab: #00167B;
    --chrome-acc: #6D28D9; --chrome-acc-2: #A78BFA; --chrome-acc-ink: #FFFFFF;
    --chrome-tx: rgba(255,255,255,.80); --chrome-cap: rgba(255,255,255,.48);
    --chrome-hov-bg: rgba(167,139,250,.16); --chrome-hov-tx: #C4B5FD;
    --chrome-borde: rgba(255,255,255,.10);
    --chrome-pie-bg: rgba(255,255,255,.06); --chrome-pie-tx: rgba(255,255,255,.88);
}
:root[data-menu="grafito"] {
    --chrome-bg: #0F172A;  --chrome-cab: #0B1220;
    --chrome-acc: #334155; --chrome-acc-2: #475569; --chrome-acc-ink: #F1F5F9;
    --chrome-tx: rgba(226,232,240,.76); --chrome-cap: rgba(226,232,240,.46);
    --chrome-hov-bg: rgba(226,232,240,.10); --chrome-hov-tx: #F1F5F9;
    --chrome-borde: rgba(255,255,255,.08);
    --chrome-pie-bg: rgba(255,255,255,.05); --chrome-pie-tx: rgba(241,245,249,.9);
}

/* De noche los menús de color bajan el fondo: contra un lienzo #161B2E un azul
   #0B1533 se lee como profundidad, no como una mancha más clara. */
:root[data-theme="dark"][data-menu="indigo"],
:root[data-theme="dark"][data-menu="verde"],
:root[data-theme="dark"][data-menu="ambar"],
:root[data-theme="dark"][data-menu="turquesa"],
:root[data-theme="dark"][data-menu="violeta"] { --chrome-bg: #0A1229; --chrome-cab: #080E20; }
:root[data-theme="dark"][data-menu="grafito"]  { --chrome-bg: #0B1220; --chrome-cab: #080D18; }

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"][data-menu="indigo"],
    :root[data-theme="auto"][data-menu="verde"],
    :root[data-theme="auto"][data-menu="ambar"],
    :root[data-theme="auto"][data-menu="turquesa"],
    :root[data-theme="auto"][data-menu="violeta"] { --chrome-bg: #0A1229; --chrome-cab: #080E20; }
    :root[data-theme="auto"][data-menu="grafito"]  { --chrome-bg: #0B1220; --chrome-cab: #080D18; }
}

/* La barra superior sigue a la cabecera del menú salvo que se pida clara. */
:root { --barra-bg: var(--chrome-cab); --barra-ink: #FFFFFF; --barra-borde: rgba(255,255,255,.10); }
:root[data-barra="clara"] {
    --barra-bg: var(--color-surface);
    --barra-ink: var(--color-text);
    --barra-borde: var(--color-border);
}


/* ════════════════════════════════════════════════════════════════════════════
   RESET Y BASE
   ════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 14px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* En monitores grandes casi toda la interfaz está en rem, así que subir la base
   hace crecer todo en proporción en vez de dejar una isla diminuta al centro. */
@media (min-width: 1600px) { html { font-size: 15px; } }
@media (min-width: 1920px) { html { font-size: 16px; } }
@media (min-width: 2560px) { html { font-size: 18px; } }

body {
    font-family: var(--font-main);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
ul, ol { list-style: none; }

/* Números tabulares en todo lo que se compara de un vistazo. */
.num, .kpi-valor, td, th, .mono { font-variant-numeric: tabular-nums; }

.mono { font-family: var(--font-mono); font-size: .86em; }

/* Foco visible solo con teclado: el ratón no dibuja anillos. */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* Barras de desplazamiento discretas y con el color del tema. */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
@media (hover: hover) {
    ::-webkit-scrollbar-thumb:hover { background: var(--color-muted); background-clip: content-box; }
}

/* Iconos Material Symbols: se fija la familia por si el CSS de Google tarda,
   y se anula cualquier transformación de texto que deformaría la ligadura. */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal; font-style: normal;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    font-size: 20px; line-height: 1;
    vertical-align: middle; user-select: none; flex-shrink: 0;
    text-transform: none !important; letter-spacing: normal;
    white-space: nowrap; word-wrap: normal; direction: ltr;
    -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
}
.ico-sm { font-size: 16px; }
.ico-lg { font-size: 24px; }
.ico-xl { font-size: 32px; }
.ico-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

/* Salto al contenido: primer tabulador de la página. */
.salto-contenido {
    position: absolute; left: -9999px; top: 0; z-index: 9999;
    background: var(--primary-solid); color: #fff;
    padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
    font-weight: 700;
}
.salto-contenido:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

} /* @layer base */


/* ════════════════════════════════════════════════════════════════════════════
   ARMAZÓN DE LA APLICACIÓN
   ════════════════════════════════════════════════════════════════════════════ */
@layer shell {

.app { min-height: 100vh; }

/* ── Barra lateral ───────────────────────────────────────────────────────── */
/* El borde derecho NO va en .sidebar: a la altura de la cabecera cortaría la
   banda azul con una línea clara. Lo llevan las partes claras (cuerpo y pie), y
   la cabecera lo continúa con un blanco translúcido que no se ve. */
.sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: var(--sidebar-w);
    display: flex; flex-direction: column;
    background: var(--chrome-bg);
    box-shadow: var(--shadow-sm);
    z-index: 300;
    transition: width var(--t-slow) var(--ease), transform var(--t-slow) var(--ease),
                background var(--t-slow) var(--ease);
}

.sidebar-head {
    height: var(--topbar-h); min-height: var(--topbar-h); flex-shrink: 0;
    display: flex; align-items: center;
    padding: 0 18px;
    background: var(--chrome-cab);
    border-right: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    transition: background var(--t-slow) var(--ease);
}
.sidebar-logo { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.sidebar-logo img {
    height: 32px; width: auto; max-width: 100%;
    object-fit: contain; object-position: left center;
    filter: brightness(0) invert(1);   /* el logo institucional es oscuro */
    transition: width var(--t-slow) var(--ease);
}

.sidebar-body {
    flex: 1; min-height: 0;
    padding: 12px 0 16px;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    border-right: 1px solid var(--chrome-borde);
}

.nav-cap {
    padding: 15px 22px 6px;
    font-size: .64rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--chrome-cap);
}

.nav-items { padding: 0 12px; display: flex; flex-direction: column; gap: 3px; }

.nav-link {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: 11px;
    color: var(--chrome-tx);
    font-size: .875rem; font-weight: 600; line-height: 1.2;
    white-space: nowrap;
    transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
}
.nav-link .material-symbols-outlined {
    font-size: 20px; width: 22px; text-align: center;
    transition: transform var(--t-base) var(--ease);
}
@media (hover: hover) {
    .nav-link:hover { background: var(--chrome-hov-bg); color: var(--chrome-hov-tx); }
    .nav-link:hover .material-symbols-outlined { transform: scale(1.08); }
}
.nav-link.activo {
    background: linear-gradient(95deg, var(--chrome-acc) 0%, var(--chrome-acc-2) 100%);
    color: var(--chrome-acc-ink); font-weight: 700;
    box-shadow: var(--shadow-brand);
}
.nav-link.activo .material-symbols-outlined { color: var(--chrome-acc-ink); font-variation-settings: 'FILL' 1; }
.nav-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Insignia de estado en un ítem del menú (p. ej. alertas altas). */
.nav-cuenta {
    flex: 0 0 auto; margin-left: auto;
    min-width: 18px; text-align: center;
    font-size: .62rem; font-weight: 800; color: #fff;
    background: var(--color-error);
    border-radius: var(--r-pill); padding: 2px 6px; line-height: 1.45;
}
.nav-link.activo .nav-cuenta { background: rgba(255, 255, 255, .28); }

/* ── Pie de la barra lateral: estado del canal en vivo ───────────────────── */
.sidebar-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--chrome-borde);
    border-right: 1px solid var(--chrome-borde);
    padding: 12px 14px;
}
.estado-canal {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    background: var(--chrome-pie-bg);
    border: 1px solid var(--chrome-borde);
    border-radius: var(--r-lg);
    font-size: .75rem; font-weight: 700; color: var(--chrome-pie-tx);
}
.estado-canal .punto {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--color-neutral);
    transition: background var(--t-base);
}
.estado-canal[data-estado="conectado"] .punto {
    background: var(--color-success);
    box-shadow: 0 0 0 3px var(--color-success-bg);
    animation: latido 2.2s ease-in-out infinite;
}
.estado-canal[data-estado="conectando"] .punto,
.estado-canal[data-estado="reconectando"] .punto {
    background: var(--color-warning);
    box-shadow: 0 0 0 3px var(--color-warning-bg);
    animation: latido 1s ease-in-out infinite;
}
.estado-canal[data-estado="caido"] .punto {
    background: var(--color-error);
    box-shadow: 0 0 0 3px var(--color-error-bg);
}
.estado-canal .meta { margin-left: auto; font-size: .68rem; font-weight: 600; color: var(--chrome-tx); }

@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ── Barra superior ──────────────────────────────────────────────────────── */
/* Todo el contenido de la barra se tiñe con --barra-ink y sus fondos se sacan de
   ese mismo color con color-mix. Así la barra clara no necesita reglas propias:
   basta cambiar dos fichas. */
.topbar {
    position: sticky; top: 0; z-index: 200;
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 var(--gutter);
    background: var(--barra-bg);
    border-bottom: 1px solid var(--barra-borde);
    box-shadow: var(--shadow-sm);
    transition: background var(--t-slow) var(--ease);
}
.topbar-izq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.topbar-titulo {
    font-size: 1rem; font-weight: 700; color: var(--barra-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-btn {
    width: 36px; height: 36px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--barra-ink) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--barra-ink) 20%, transparent);
    color: var(--barra-ink);
    transition: background var(--t-base) var(--ease);
}
@media (hover: hover) {
    .topbar-btn:hover { background: color-mix(in srgb, var(--barra-ink) 22%, transparent); }
}
.topbar-btn:focus-visible { outline-color: var(--barra-ink); }

.topbar-usuario {
    display: flex; align-items: center; gap: 10px;
    padding-left: 6px;
}
.topbar-avatar {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--barra-ink) 18%, transparent);
    border: 2px solid color-mix(in srgb, var(--barra-ink) 28%, transparent);
    color: var(--barra-ink); font-size: .82rem; font-weight: 800;
}
.topbar-usuario-meta { line-height: 1.2; min-width: 0; }
.topbar-usuario-nombre {
    display: block; font-size: .82rem; font-weight: 700; color: var(--barra-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.topbar-usuario-rol {
    display: block; font-size: .68rem; font-weight: 600;
    color: color-mix(in srgb, var(--barra-ink) 70%, transparent);
}

/* ── Lienzo ──────────────────────────────────────────────────────────────── */
.main-wrap {
    margin-left: var(--sidebar-w);
    display: flex; flex-direction: column; min-height: 100vh;
    transition: margin-left var(--t-slow) var(--ease);
}
.page-body { flex: 1; padding: var(--gutter); }

/* OJO con el fill-mode: con `both` el último fotograma se queda aplicado, y un
   transform —aunque sea la identidad— crea un bloque contenedor. Eso convertía
   cada sección en su propio contexto de apilamiento y los desplegables (el
   calendario) quedaban DETRÁS de las tarjetas siguientes por orden de documento.
   Con `backwards` la animación no deja nada puesto al terminar. */
.page-body > * { animation: entrar .32s var(--ease) backwards; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Modo riel: solo iconos ──────────────────────────────────────────────── */
.sidebar-riel .sidebar { width: var(--sidebar-rail); }
.sidebar-riel .main-wrap { margin-left: var(--sidebar-rail); }
.sidebar-riel .nav-link { justify-content: center; gap: 0; padding: 11px 0; }
.sidebar-riel .nav-txt,
.sidebar-riel .nav-cuenta,
.sidebar-riel .nav-cap,
.sidebar-riel .estado-canal .txt,
.sidebar-riel .estado-canal .meta { display: none; }
.sidebar-riel .nav-items { padding: 0 8px; }
.sidebar-riel .nav-cap { display: block; font-size: 0; padding: 8px 0 2px; }
.sidebar-riel .nav-cap::after {
    content: ""; display: block; height: 1px; margin: 0 14px;
    background: var(--color-border);
}
.sidebar-riel .sidebar-head { justify-content: center; padding: 0; }
/* Plegado se deja solo el isotipo: el logo es un lema horizontal, así que se
   recorta al cuadrado de la izquierda en vez de encogerlo hasta hacerlo ilegible. */
.sidebar-riel .sidebar-logo img { width: 34px; height: 34px; object-fit: cover; }
.sidebar-riel .estado-canal { justify-content: center; padding: 9px 0; }

/* Al pasar el puntero el riel se despliega flotando sobre el contenido. */
@media (hover: hover) and (min-width: 1025px) {
    .sidebar-riel .sidebar:hover {
        width: var(--sidebar-w);
        box-shadow: var(--shadow-xl);
        z-index: 500;
    }
    .sidebar-riel .sidebar:hover .nav-link { justify-content: flex-start; gap: 12px; padding: 10px 14px; }
    .sidebar-riel .sidebar:hover .nav-txt,
    .sidebar-riel .sidebar:hover .nav-cuenta,
    .sidebar-riel .sidebar:hover .sidebar-logo-txt,
    .sidebar-riel .sidebar:hover .estado-canal .txt,
    .sidebar-riel .sidebar:hover .estado-canal .meta { display: block; }
    .sidebar-riel .sidebar:hover .nav-cap { font-size: .64rem; padding: 15px 22px 6px; }
    .sidebar-riel .sidebar:hover .nav-cap::after { display: none; }
    .sidebar-riel .sidebar:hover .sidebar-head { justify-content: flex-start; padding: 0 18px; }
    .sidebar-riel .sidebar:hover .estado-canal { justify-content: flex-start; padding: 9px 12px; }
}

/* ── Fondo del cajón en móvil ────────────────────────────────────────────── */
.sidebar-fondo {
    position: fixed; inset: 0; z-index: 290;
    background: rgba(0, 22, 123, .45);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-slow) var(--ease);
}
.sidebar-fondo.visible { opacity: 1; pointer-events: auto; }

} /* @layer shell */