/* Intranet GestiónAuto · estilos base (diseño aprobado, estilo intermedio) */

:root {
    --fuente: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;

    --texto: #101828;
    --texto-fuerte: #0B2A4D;
    --texto-2: #475467;
    --texto-3: #667085;
    --texto-4: #98A2B3;

    --borde: #EAECF0;
    --borde-2: #D0D5DD;
    /* Borde de los campos de formulario: el #D0D5DD del prototipo queda en 1,5:1 sobre blanco y WCAG 1.4.11 pide 3:1;
       este gris de la misma familia llega a 3:1. */
    --borde-campo: #8B95A5;
    --fondo: #F8FAFC;
    --superficie: #FFFFFF;
    --relleno: #EEF2F6;

    --azul: #176CC1;
    --azul-oscuro: #0F4F93;
    --azul-suave: #EEF5FD;
    --azul-anillo: rgba(23, 108, 193, .12);
    --naranjo: #F39A22;

    --verde: #178045;
    --verde-suave: #E6F5EC;
    --rojo: #A3260C;
    --rojo-suave: #FDECEA;
    --ambar: #8A4A00;
    --ambar-suave: #FFF4E5;
    --morado: #6941C6;
    --morado-suave: #F1EDFB;
    --gris-suave: #F2F4F7;

    /* ---- Tokens nuevos del portal del trabajador (fase 3) ----
       Valor claro = el color que hoy está escrito fijo en una regla. La paleta oscura los redefine junto con los de
       arriba; los pares texto/fondo están medidos con WCAG 2.2 AA (fase3/diseno/notas.md, sección 7). */
    color-scheme: light;

    /* Relleno del botón primario y del avatar (hoy var(--azul) con texto #FFFFFF fijo en .avatar y .boton--primario,
       y en .perfil-portada__avatar de cuenta.css). Se separa de --azul porque en oscuro el azul de texto se aclara y el
       blanco encima ya no se lee. */
    --relleno-primario: #176CC1;
    --relleno-primario-hover: #0F4F93;
    --sobre-primario: #FFFFFF;

    /* Textos de etiquetas que hoy están fijos. */
    --etiqueta-texto: #344054;        /* .etiqueta y .etiqueta--pendiente */
    --aviso-texto: #8A5300;           /* .etiqueta--aviso */
    --verde-texto: #146C34;           /* .etiqueta--aprobada; requisito cumplido de cuenta.css */

    /* Ícono del mosaico naranjo. Hoy #D87D0A (.mosaico--naranjo; .presentacion__icono--naranjo de publico.css) da
       2,82:1 sobre --ambar-suave y WCAG 1.4.11 pide 3:1 para íconos que informan; #C47004 es el mismo tono y da 3,41:1. */
    --naranjo-icono: #C47004;
    --sobre-naranjo: #101828;         /* número de la insignia de la campana */

    /* Bordes de los mensajes (.aviso y .cuenta-aviso; publico.css usaba #F4C7BE y cuenta.css #F5C6BE: se unifica). */
    --borde-urgente: #FAD7A5;
    --borde-error: #F5C6BE;
    --borde-info: #C9DDF4;
    --borde-exito: #B7E1C6;

    /* Fondos de los íconos del panel de presentación del ingreso (.presentacion__icono de publico.css). */
    --icono-azul-fondo: #E3EFFC;
    --icono-naranjo-fondo: #FFF1DC;

    /* Anillos, sombras y velos (campos inválidos, panel de presentación, diálogos y menú móvil). */
    --anillo-error: rgba(163, 38, 12, .12);
    --sombra-elevada: 0 24px 48px -12px rgba(16, 24, 40, .24);
    --sombra-panel: 0 12px 32px rgba(16, 24, 40, .18);
    --sombra-suave: 0 1px 2px rgba(16, 24, 40, .05);
    --velo: rgba(16, 24, 40, .42);

    /* Placa detrás del logo: transparente en claro; en oscuro, placa clara para que el logo (PNG azul y naranjo sobre
       transparente) no pierda la palabra «Gestión». */
    --logo-placa: transparent;

    /* Zonas de color fijo, iguales en los dos temas: el marco del video es oscuro (con su texto) y la hoja del
       certificado es clara, igual que el fondo de la imagen de apoyo de una pregunta (test.css, con su texto: el
       alternativo, que el navegador escribe sobre el papel si la imagen no carga). */
    --video-fondo: #0B1220;
    --sobre-video: #FFFFFF;
    --sobre-video-2: #C9D3E0;
    --papel: #FFFFFF;
    --sobre-papel: #101828;

    --radio: 16px;
    --radio-sm: 10px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .04);
    --ancho-lateral: 284px;
    /* Ancho máximo del contenido de las páginas con sesión: va centrado en el espacio a la derecha del menú, y la barra
       y el pie alinean su texto con él. En monitores de 1800 px o más crece (bloque al final de la hoja). */
    --ancho-contenido: 1200px;
}

/* ---------- Modo oscuro ----------
   El tema vive en <html data-tema="claro|oscuro">: lo pone el script del <head> de los layouts con la elección guardada
   (localStorage['gestionauto-theme'] = 'dark' | 'light', la misma clave de Web Forms) y lo cambia el botón de tema
   (tema.js). Sin atributo manda la preferencia del sistema. Los dos bloques redefinen los mismos tokens con los mismos
   valores: el primero sigue al sistema si no se eligió nada y el segundo aplica la elección del botón (CSS no permite
   compartir el bloque). Una prueba (BarraPortalWebTests) comprueba que sigan iguales; los pares texto/fondo están medidos
   con WCAG 2.2 AA (fase3/diseno/notas.md, sección 7). Los tokens que no aparecen aquí (--sobre-video, --sobre-video-2,
   --sobre-papel y las medidas) son iguales en los dos temas. */

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;

        --texto: #E6EDF6;
        --texto-fuerte: #F5F8FC;
        --texto-2: #B9C5D6;
        --texto-3: #93A1B6;
        --texto-4: #6E7D94;

        --borde: #243349;
        --borde-2: #37496A;
        --borde-campo: #71819B;
        --fondo: #0D1522;
        --superficie: #141E2E;
        --relleno: #1C2940;

        --azul: #63A8F0;
        --azul-oscuro: #A7CEF7;
        --azul-suave: #14294A;
        --azul-anillo: rgba(99, 168, 240, .32);
        --naranjo: #F39A22;

        --verde: #4FC688;
        --verde-suave: #0F2E21;
        --rojo: #FF9B85;
        --rojo-suave: #3A1913;
        --ambar: #F4B860;
        --ambar-suave: #33230C;
        --morado: #B9A3F7;
        --morado-suave: #251C45;
        --gris-suave: #1E2A3D;

        --sombra: 0 1px 2px rgba(0, 0, 0, .32);

        --relleno-primario: #1F74C8;
        --relleno-primario-hover: #1966B3;
        --sobre-primario: #FFFFFF;
        --etiqueta-texto: #CDD6E3;
        --aviso-texto: #F4B860;
        --verde-texto: #7ED9A8;
        --naranjo-icono: #F6A944;
        --sobre-naranjo: #101828;
        --borde-urgente: #6E4A16;
        --borde-error: #6E2C22;
        --borde-info: #28507F;
        --borde-exito: #1F5A3B;
        --icono-azul-fondo: #17304F;
        --icono-naranjo-fondo: #33230C;
        --anillo-error: rgba(255, 155, 133, .30);
        --sombra-elevada: 0 24px 48px -12px rgba(0, 0, 0, .60);
        --sombra-panel: 0 12px 32px rgba(0, 0, 0, .50);
        --sombra-suave: 0 1px 2px rgba(0, 0, 0, .30);
        --velo: rgba(3, 7, 14, .66);
        --logo-placa: #F5F8FC;
        --video-fondo: #05080E;
        --papel: #FFFFFF;
    }
}

:root[data-tema="oscuro"] {
    color-scheme: dark;

    --texto: #E6EDF6;
    --texto-fuerte: #F5F8FC;
    --texto-2: #B9C5D6;
    --texto-3: #93A1B6;
    --texto-4: #6E7D94;

    --borde: #243349;
    --borde-2: #37496A;
    --borde-campo: #71819B;
    --fondo: #0D1522;
    --superficie: #141E2E;
    --relleno: #1C2940;

    --azul: #63A8F0;
    --azul-oscuro: #A7CEF7;
    --azul-suave: #14294A;
    --azul-anillo: rgba(99, 168, 240, .32);
    --naranjo: #F39A22;

    --verde: #4FC688;
    --verde-suave: #0F2E21;
    --rojo: #FF9B85;
    --rojo-suave: #3A1913;
    --ambar: #F4B860;
    --ambar-suave: #33230C;
    --morado: #B9A3F7;
    --morado-suave: #251C45;
    --gris-suave: #1E2A3D;

    --sombra: 0 1px 2px rgba(0, 0, 0, .32);

    --relleno-primario: #1F74C8;
    --relleno-primario-hover: #1966B3;
    --sobre-primario: #FFFFFF;
    --etiqueta-texto: #CDD6E3;
    --aviso-texto: #F4B860;
    --verde-texto: #7ED9A8;
    --naranjo-icono: #F6A944;
    --sobre-naranjo: #101828;
    --borde-urgente: #6E4A16;
    --borde-error: #6E2C22;
    --borde-info: #28507F;
    --borde-exito: #1F5A3B;
    --icono-azul-fondo: #17304F;
    --icono-naranjo-fondo: #33230C;
    --anillo-error: rgba(255, 155, 133, .30);
    --sombra-elevada: 0 24px 48px -12px rgba(0, 0, 0, .60);
    --sombra-panel: 0 12px 32px rgba(0, 0, 0, .50);
    --sombra-suave: 0 1px 2px rgba(0, 0, 0, .30);
    --velo: rgba(3, 7, 14, .66);
    --logo-placa: #F5F8FC;
    --video-fondo: #05080E;
    --papel: #FFFFFF;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
    font-variant-numeric: tabular-nums;
}

a { color: var(--azul); }
a:hover { color: var(--azul-oscuro); }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.25; }
h1 { font-size: 26px; font-weight: 800; color: var(--texto-fuerte); }
h2 { font-size: 20px; font-weight: 800; }
h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* El atributo hidden siempre oculta, aunque la clase del elemento le dé display (flex, grid, inline-flex): sin esta
   regla, un <div class="tarjeta" hidden> se ve, porque la hoja del autor le gana a la del navegador. */
[hidden] { display: none !important; }

/* Fechas y horas sin corte de línea en el guion («27-10-» / «2026»). */
time,
.sin-corte { white-space: nowrap; }

/* Enlace para saltar al contenido: aparece solo al recibir el foco con el teclado. */
.saltar { position: absolute; left: 16px; top: -100px; z-index: 40; }
.saltar:focus { top: 16px; }

/* ---------- Estructura general ---------- */

.app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
}

/* El menú lateral usa el panel de marca del ingreso y de la portada de Inicio (publico.css, inicio.css): degradado de
   azul GA a azul noche, con una retícula fina arriba y texto blanco en los dos temas. Sus tokens viven aquí, en
   .lateral, y no en :root: no cambian con la paleta de la página salvo por un azul más oscuro en modo oscuro (los dos
   bloques oscuros son iguales, como los de :root). Contraste sobre el tramo más claro del degradado (#145FAE): el
   texto blanco da 6,1:1, el secundario #D6E7FA 4,9:1 y el tenue #A9C6E8 4,5:1 donde va (abajo, sobre azul noche, más). */
.lateral {
    --lateral-1: #145FAE;
    --lateral-2: #0F4F93;
    --lateral-3: #0B2A4D;
    --lateral-brillo: rgba(120, 186, 255, .35);
    --lateral-reticula: rgba(255, 255, 255, .05);
    --sobre-lateral: #FFFFFF;
    --sobre-lateral-2: #D6E7FA;
    --sobre-lateral-3: #A9C6E8;
    --lateral-vidrio: rgba(255, 255, 255, .08);
    --lateral-vidrio-2: rgba(255, 255, 255, .14);
    --lateral-borde: rgba(255, 255, 255, .16);
    /* Página actual: píldora blanca con texto azul; módulo actual: ícono naranjo del logo. */
    --lateral-activo: #FFFFFF;
    --sobre-lateral-activo: #0F4F93;
    --lateral-modulo: #F39A22;
    --sobre-lateral-modulo: #0B2A4D;
    --lateral-placa: #FFFFFF;
    --lateral-sombra: 0 6px 16px -8px rgba(3, 7, 14, .55);

    position: sticky;
    top: 0;
    isolation: isolate;
    height: 100vh;
    overflow-y: auto;
    /* Con el menú de administración la columna se desplaza: el foco deja ver entero el contorno del último enlace. */
    scroll-padding-block: 12px;
    color: var(--sobre-lateral);
    background:
        radial-gradient(120% 40% at 0% 0%, var(--lateral-brillo), transparent 70%),
        linear-gradient(180deg, var(--lateral-1) 0%, var(--lateral-2) 38%, var(--lateral-3) 100%);
    padding: 24px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .lateral {
        --lateral-1: #12467F;
        --lateral-2: #0E3663;
        --lateral-3: #091A31;
        --lateral-brillo: rgba(99, 168, 240, .22);
        --sobre-lateral-activo: #0E3663;
        --lateral-sombra: 0 6px 16px -8px rgba(0, 0, 0, .70);
    }
}

:root[data-tema="oscuro"] .lateral {
    --lateral-1: #12467F;
    --lateral-2: #0E3663;
    --lateral-3: #091A31;
    --lateral-brillo: rgba(99, 168, 240, .22);
    --sobre-lateral-activo: #0E3663;
    --lateral-sombra: 0 6px 16px -8px rgba(0, 0, 0, .70);
}

/* Retícula fina que se desvanece hacia abajo, como la del panel de marca. */
.lateral::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--lateral-reticula) 1px, transparent 1px),
        linear-gradient(90deg, var(--lateral-reticula) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 30%);
    mask-image: linear-gradient(180deg, #000, transparent 30%);
}

.lateral :focus-visible { outline-color: var(--sobre-lateral); }

/* El logo (PNG azul y naranjo sobre transparente) va sobre una placa blanca en los dos temas. */
.lateral__logo {
    align-self: flex-start;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--lateral-placa);
    box-shadow: var(--lateral-sombra);
}
.lateral__logo img { display: block; width: 138px; height: auto; }

/* Tarjeta del usuario: los datos llevan al perfil y el botón cierra la sesión (formulario POST a /Salir). */
.lateral__usuario {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 6px;
    border: 1px solid var(--lateral-borde);
    border-radius: 12px;
    background: var(--lateral-vidrio);
}

.lateral__perfil {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px;
    border-radius: var(--radio-sm);
    color: var(--sobre-lateral);
    text-decoration: none;
}

.lateral__perfil:hover { background: var(--lateral-vidrio); color: var(--sobre-lateral); }
.lateral__perfil:hover strong { text-decoration: underline; }
.lateral__perfil[aria-current="page"] { background: var(--lateral-vidrio-2); }
.lateral__salir { flex: none; margin: 0; }

.lateral__usuario-datos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* Nombre y dos apellidos: hasta dos líneas antes de cortar. */
.lateral__usuario-datos strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
    font-size: 14px;
    line-height: 1.3;
}
.lateral__usuario-datos span { font-size: 12px; color: var(--sobre-lateral-3); }

/* Avatar blanco con iniciales azules, y botones de ícono (salir, cerrar el panel) claros sobre el azul. Con .lateral
   delante para ganarle a .avatar y .boton-icono, que se declaran más abajo. */
.lateral .avatar { background: var(--lateral-activo); color: var(--sobre-lateral-activo); }
.lateral .boton-icono { color: var(--sobre-lateral-2); }
.lateral .boton-icono:hover { background: var(--lateral-vidrio-2); color: var(--sobre-lateral); }

.lateral__fondo { display: none; }

/* Con .lateral delante para ganarle a .boton-icono, que se declara más abajo. */
.lateral .lateral__cerrar { display: none; }

.principal { min-width: 0; display: flex; flex-direction: column; }

.barra {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    min-height: 74px;
    padding: 16px 40px;
    /* Alineada con el borde del contenido centrado (.contenido): la mitad del espacio sobrante más su relleno. */
    padding-inline: max(40px, calc((100% - var(--ancho-contenido)) / 2 + 40px));
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}

/* Con .barra delante para ganarle a .boton-icono, que se declara más abajo. */
.barra .barra__menu { display: none; }
.barra__titulo { flex: 1; min-width: 0; overflow-wrap: break-word; font-size: 15px; font-weight: 700; color: var(--texto-2); }
/* A la derecha: la etiqueta del entorno, la campana de pendientes (solo con sesión) y el botón de tema. */
.barra__acciones { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* Ruta (migas) en lugar del título de la barra, en las páginas que la definen (@section Ruta, parcial _Ruta).
   Escritorio: la lista completa. Bajo 960 px: un solo enlace «volver» al nivel anterior, para que la barra no crezca. */
.ruta { flex: 1; min-width: 0; }
.ruta__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; font-size: 14px; }
.ruta__lista li { display: inline-flex; gap: 8px; align-items: center; min-width: 0; }
.ruta__lista svg { flex: none; color: var(--texto-4); }
.ruta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-2); font-weight: 600; text-decoration: none; }
.ruta a:hover { color: var(--azul-oscuro); text-decoration: underline; }
.ruta [aria-current="page"] { color: var(--texto); font-weight: 700; overflow-wrap: anywhere; }
.ruta .ruta__volver { display: none; }

.contenido {
    flex: 1;
    width: 100%;
    max-width: var(--ancho-contenido);
    margin-inline: auto;
    padding: 32px 40px 56px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.contenido:focus { outline: none; }

.pie {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    padding: 20px 40px;
    padding-inline: max(40px, calc((100% - var(--ancho-contenido)) / 2 + 40px));
    border-top: 1px solid var(--borde);
    font-size: 12px;
    color: var(--texto-3);
}

/* ---------- Menú lateral ----------
   Un grupo por módulo (MenuNavegacionService): la cabecera es un botón con el ícono del módulo, su nombre, cuántas
   opciones tiene (solo con el grupo cerrado) y una flecha; abajo, las opciones colgando de una línea guía. */

.menu { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.menu__grupo { display: flex; flex-direction: column; }

.menu__cabecera {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 6px 8px 6px 6px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--sobre-lateral);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.menu__cabecera:hover { background: var(--lateral-vidrio); }

.menu__icono-grupo {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--lateral-vidrio-2);
    box-shadow: inset 0 0 0 1px var(--lateral-borde);
}

.menu__cabecera--actual .menu__icono-grupo { background: var(--lateral-modulo); color: var(--sobre-lateral-modulo); box-shadow: none; }

.menu__titulo { flex: 1; min-width: 0; overflow-wrap: break-word; }

.menu__cuenta {
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--lateral-vidrio-2);
    color: var(--sobre-lateral-2);
    font-size: 11px;
    text-align: center;
}

.menu__cabecera[aria-expanded="true"] .menu__cuenta { visibility: hidden; }

.menu__flecha { flex: none; color: var(--sobre-lateral-3); transition: transform .18s ease; }
.menu__cabecera[aria-expanded="false"] .menu__flecha { transform: rotate(-90deg); }

.menu__lista {
    list-style: none;
    margin: 2px 0 8px 21px;
    padding: 2px 0 2px 10px;
    border-left: 1px solid var(--lateral-borde);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu__item {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--radio-sm);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sobre-lateral-2);
    text-decoration: none;
}

.menu__item svg { flex: none; width: 17px; height: 17px; }
.menu__item:hover { background: var(--lateral-vidrio); color: var(--sobre-lateral); }

.menu__item--activo,
.menu__item--activo:hover {
    background: var(--lateral-activo);
    color: var(--sobre-lateral-activo);
    font-weight: 700;
    box-shadow: var(--lateral-sombra);
}

/* ---------- Componentes ---------- */

.avatar {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--relleno-primario);
    color: var(--sobre-primario);
    font-size: 13px;
    font-weight: 700;
}

.boton-icono {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radio-sm);
    background: transparent;
    color: var(--texto-3);
    cursor: pointer;
}

.boton-icono:hover { background: var(--fondo); color: var(--texto); }

.boton {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--borde-2);
    border-radius: var(--radio-sm);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.boton:hover { background: var(--fondo); color: var(--texto); }

.boton--primario { border-color: var(--relleno-primario); background: var(--relleno-primario); color: var(--sobre-primario); font-weight: 700; }
.boton--primario:hover { border-color: var(--relleno-primario-hover); background: var(--relleno-primario-hover); color: var(--sobre-primario); }

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--gris-suave);
    color: var(--etiqueta-texto);
}

.etiqueta--aviso { background: var(--ambar-suave); color: var(--aviso-texto); font-weight: 600; }
.etiqueta--pendiente { background: var(--gris-suave); color: var(--etiqueta-texto); }
.etiqueta--en-curso { background: var(--azul-suave); color: var(--azul-oscuro); }
.etiqueta--aprobada,
.etiqueta--ok { background: var(--verde-suave); color: var(--verde-texto); }
.etiqueta--reprobada { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta--vencida,
.etiqueta--error { background: var(--rojo-suave); color: var(--rojo); }

.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 20px;
    box-shadow: var(--sombra);
}

/* Título de tarjeta con un dato, una etiqueta o un enlace a la derecha (Videos, Próximos vencimientos, Avisos recientes,
   Avance del video, Tu certificado). Lo usan Inicio, el detalle, el reproductor, el resultado y el bloque de avisos. */
.tarjeta__titulo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tarjeta__titulo h2 { font-size: 16px; letter-spacing: -0.01em; }
.tarjeta__titulo .etiqueta { flex: none; }

.mosaico {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--azul-suave);
    color: var(--azul);
}

.mosaico--verde { background: var(--verde-suave); color: var(--verde); }
.mosaico--naranjo { background: var(--ambar-suave); color: var(--naranjo-icono); }
.mosaico--morado { background: var(--morado-suave); color: var(--morado); }
.mosaico--gris { background: var(--gris-suave); color: var(--texto-2); }
.mosaico--rojo { background: var(--rojo-suave); color: var(--rojo); }

.seccion { display: flex; flex-direction: column; gap: 16px; }
.seccion__cabecera { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.seccion__nota { font-size: 13px; color: var(--texto-3); }

.vacio {
    padding: 28px;
    text-align: center;
    color: var(--texto-3);
    background: var(--superficie);
    border: 1px dashed var(--borde-2);
    border-radius: var(--radio);
}

/* Portada de cada página */
.portada {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    padding: 28px 32px;
    border-radius: 20px;
    background: var(--azul-suave);
}

.portada__texto { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.portada__antetitulo { font-size: 14px; font-weight: 600; color: var(--azul-oscuro); }
.portada__bajada { font-size: 14px; color: var(--texto-2); display: flex; gap: 8px; align-items: center; }
.portada__accion { flex: none; }

/* Indicadores */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
/* Para textos largos, como los del estado del sistema. */
.indicadores--anchos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.indicador { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; }
.indicador__datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.indicador__titulo { font-size: 13px; color: var(--texto-3); }
.indicador__valor { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: break-word; }
.indicador__detalle { font-size: 13px; color: var(--texto-3); overflow-wrap: break-word; }
.indicador__estado { align-self: flex-start; margin: 2px 0 4px; }

/* Tarjetas de módulos */
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.modulo { display: flex; flex-direction: column; gap: 14px; }
.modulo__cabecera { display: flex; gap: 12px; align-items: center; }
.modulo__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.modulo__lista li + li { border-top: 1px solid var(--borde); }

.modulo__enlace {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 10px 2px;
    color: var(--texto-2);
    font-weight: 500;
    text-decoration: none;
}

.modulo__enlace span { flex: 1; }
.modulo__enlace svg { flex: none; }
.modulo__enlace:hover { color: var(--azul-oscuro); }
.modulo__flecha { color: var(--texto-4); }
.modulo__enlace:hover .modulo__flecha { color: var(--azul); }

/* Páginas de estado (404, error, acceso denegado) */
.estado {
    max-width: 560px;
    margin: 24px auto 0;
    padding: 40px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.estado .mosaico { width: 56px; height: 56px; border-radius: 16px; }
.estado__codigo { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.estado__texto { color: var(--texto-2); }
.estado__acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.estado__referencia { font-size: 12px; color: var(--texto-3); }
.estado__referencia code { display: block; font: 12px/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }

/* ---------- Aviso de sesión por expirar (layout + site.js) ---------- */

/* <dialog> modal: el navegador lo centra, deja inerte el resto de la página y le da su fondo (::backdrop). */
.aviso-sesion {
    width: min(440px, calc(100vw - 32px));
    max-width: none;
    padding: 28px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-elevada);
}

.aviso-sesion[open] { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* ::backdrop no hereda variables en todos los navegadores (Chrome lo hace desde la versión 122): valor fijo por tema. */
.aviso-sesion::backdrop { background: rgba(16, 24, 40, .45); }
:root[data-tema="oscuro"] .aviso-sesion::backdrop { background: rgba(3, 7, 14, .66); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .aviso-sesion::backdrop { background: rgba(3, 7, 14, .66); } }
.aviso-sesion__titulo { font-size: 20px; color: var(--texto-fuerte); }
.aviso-sesion__texto { color: var(--texto-2); }
.aviso-sesion__cuenta { color: var(--texto); font-weight: 700; white-space: nowrap; }

/* Vacío sigue en la página (role="alert"), para que el lector de pantalla anuncie el error cuando aparezca. */
.aviso-sesion__error:not(:empty) {
    align-self: stretch;
    padding: 10px 12px;
    border-radius: var(--radio-sm);
    background: var(--rojo-suave);
    color: var(--rojo);
    font-weight: 600;
}

/* «Seguir conectado» va primero (recibe el foco): a la derecha en escritorio y arriba cuando se apilan. */
.aviso-sesion__acciones {
    align-self: stretch;
    display: flex;
    flex-flow: row-reverse wrap;
    gap: 10px;
    margin-top: 8px;
}

.aviso-sesion__acciones > * { flex: 1 1 150px; margin: 0; }
.aviso-sesion__acciones .boton { width: 100%; }

/* ---------- Encabezado de página (antetítulo, título, datos y bajada) ---------- */

.encabezado { display: flex; flex-direction: column; gap: 10px; }
/* El título, el antetítulo y la bajada pueden traer nombres de la base (capacitación, evaluación): una palabra muy larga
   se parte en vez de desbordar la página a 390 px. */
.encabezado h1,
.encabezado__antetitulo,
.encabezado__bajada { overflow-wrap: anywhere; }
.encabezado__antetitulo { font-size: 14px; font-weight: 600; color: var(--azul-oscuro); }
.encabezado__antetitulo a { color: inherit; text-decoration: none; }
.encabezado__antetitulo a:hover { text-decoration: underline; }
.encabezado__datos { display: flex; flex-wrap: wrap; gap: 8px; }
/* Para párrafos con enlaces o marcas en línea: .portada__bajada es flex y los corta. */
.encabezado__bajada { max-width: 70ch; color: var(--texto-2); }

/* Etiqueta neutra con borde (Obligatoria, Opcional, nota mínima). */
.etiqueta--borde { border: 1px solid var(--borde); background: var(--superficie); color: var(--etiqueta-texto); font-weight: 600; }

/* ---------- Mensajes en línea (error, información, éxito y urgente) ---------- */

.aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: var(--radio-sm);
    font-size: 14px;
    line-height: 1.5;
}

.aviso svg { flex: none; margin-top: 2px; }
.aviso__texto { display: flex; flex-direction: column; gap: 4px; }
.aviso__texto a { color: inherit; font-weight: 700; }
.aviso--error { border-color: var(--borde-error); background: var(--rojo-suave); color: var(--rojo); }
.aviso--info { border-color: var(--borde-info); background: var(--azul-suave); color: var(--azul-oscuro); }
.aviso--exito { border-color: var(--borde-exito); background: var(--verde-suave); color: var(--verde-texto); }
.aviso--urgente { border-color: var(--borde-urgente); background: var(--ambar-suave); color: var(--aviso-texto); }

/* El mensaje puede recibir el foco por código tras un envío (ViewData["Foco"]); el contorno sigue su color. */
.aviso:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- Diálogo modal genérico (como .aviso-sesion; por ejemplo, confirmar el envío del test) ---------- */

/* <dialog> nativo con showModal(): el navegador lo centra, deja inerte el resto y Escape lo cierra. */
.dialogo {
    width: min(460px, calc(100vw - 32px));
    max-width: none;
    padding: 28px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-elevada);
}

.dialogo[open] { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* ::backdrop no hereda variables en todos los navegadores (Chrome lo hace desde la versión 122): valor fijo por tema. */
.dialogo::backdrop { background: rgba(16, 24, 40, .45); }
:root[data-tema="oscuro"] .dialogo::backdrop { background: rgba(3, 7, 14, .66); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .dialogo::backdrop { background: rgba(3, 7, 14, .66); } }
.dialogo__titulo { font-size: 20px; color: var(--texto-fuerte); }
.dialogo__texto { color: var(--texto-2); }

/* El primer botón del marcado queda a la derecha en escritorio y arriba cuando se apilan. */
.dialogo__acciones { align-self: stretch; display: flex; flex-flow: row-reverse wrap; gap: 10px; margin-top: 8px; }
.dialogo__acciones > * { flex: 1 1 150px; margin: 0; }

/* ---------- Piezas pequeñas reutilizables ---------- */

/* Color del .punto: naranjo para lo que vence en 7 días o menos y azul para el resto. */
.punto--naranjo { color: var(--naranjo); }
.punto--azul { color: var(--azul); }

/* Dos tarjetas lado a lado que se apilan solas. */
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }

/* Filas enlazadas dentro de una tarjeta (vencimientos, últimos resultados, avisos recientes). */
.filas { list-style: none; margin: 0; padding: 0; }
.filas > li + li { border-top: 1px solid var(--borde); }
.fila { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 10px 2px; color: var(--texto); text-decoration: none; }
a.fila:hover { color: var(--texto); }
a.fila:hover .fila__titulo { color: var(--azul-oscuro); text-decoration: underline; }
.fila .mosaico { width: 40px; height: 40px; border-radius: 10px; }
.fila__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Un asunto con una dirección o una palabra muy larga se parte en vez de desbordar la fila a 390 px. */
.fila__titulo { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.fila__detalle { font-size: 13px; color: var(--texto-3); }
.fila__flecha { flex: none; color: var(--texto-4); }

/* Datos en dos columnas, etiqueta y valor: validación pública del certificado y «Tu certificado» del resultado. En el
   teléfono cada dato va bajo su etiqueta (bloque de 600 px). */
.validacion {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 20px;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
}

.validacion dt { font-size: 13px; color: var(--texto-3); }
.validacion dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Folio y códigos en letra monoespaciada. */
.codigo { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }

/* Pasos numerados («¿Cómo se aprueba?», «¿Qué sigue?»). */
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: paso; }
.pasos li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texto-2); counter-increment: paso; }

.pasos li::before {
    content: counter(paso);
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--azul-suave);
    color: var(--azul-oscuro);
    font-size: 12px;
    font-weight: 800;
}

/* Paginación de listados (anterior · página N de M · siguiente): «Mis avisos» y los listados de la administración. En
   el teléfono el estado va arriba y los dos botones debajo (bloque de 600 px). */
.paginacion { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 16px; align-items: center; }
.paginacion__anterior { grid-column: 1; justify-self: start; }
.paginacion__estado { grid-column: 2; font-size: 14px; color: var(--texto-2); text-align: center; }
.paginacion__siguiente { grid-column: 3; justify-self: end; }

/* ---------- Campana de capacitaciones pendientes (barra; CampanaPendientesViewComponent + site.js) ----------
   Botón que muestra u oculta un panel (patrón de divulgación, no un menú ARIA). El punto es naranjo si la capacitación
   vence en 7 días o menos y azul en el resto; la insignia lleva el número en --sobre-naranjo (7,99:1). */

.campana-contenedor { position: relative; }
.campana { position: relative; border: 1px solid var(--borde); color: var(--texto-2); }
.campana[aria-expanded="true"] { border-color: var(--borde-info); background: var(--azul-suave); color: var(--azul-oscuro); }

.campana__insignia {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--naranjo);
    color: var(--sobre-naranjo);
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.campana__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 25;
    width: min(380px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--sombra-panel);
}

.campana__cabecera { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 10px 12px 6px; }
.campana__cabecera h2 { font-size: 15px; letter-spacing: -0.01em; }
.campana__cabecera span { flex: none; font-size: 12px; color: var(--texto-3); }
.campana__lista { list-style: none; margin: 0; padding: 0; }

.campana__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radio-sm);
    color: var(--texto);
    text-decoration: none;
}

.campana__item:hover { background: var(--fondo); color: var(--texto); }
.campana__item:hover strong { color: var(--azul-oscuro); text-decoration: underline; }
.campana__item .punto { margin-top: 7px; color: var(--azul); }
.campana__item--pronto .punto { color: var(--naranjo); }
.campana__texto { display: flex; flex-direction: column; min-width: 0; }
.campana__texto strong { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.campana__texto span { font-size: 12px; color: var(--texto-3); }

.campana__pie {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 4px;
    border-top: 1px solid var(--borde);
    font-weight: 600;
    text-decoration: none;
}

.campana__pie:hover { text-decoration: underline; }
.campana__vacio { padding: 16px 12px; color: var(--texto-3); text-align: center; }

/* ---------- Botón de tema (barra y cabecera del layout público; tema.js) ----------
   Nombre fijo («Modo oscuro») y el estado en aria-pressed. Nace con hidden y lo muestra tema.js: sin JavaScript no
   podría hacer nada. El ícono sigue al tema efectivo solo con CSS, sin esperar al script: luna en claro, sol en oscuro. */

.tema { border: 1px solid var(--borde); }
.tema__sol { display: none; }
:root[data-tema="oscuro"] .tema__luna { display: none; }
:root[data-tema="oscuro"] .tema__sol { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .tema__luna { display: none; }
    :root:not([data-tema="claro"]) .tema__sol { display: block; }
}
.tema[aria-pressed="true"] { color: var(--naranjo-icono); }

/* ---------- Pantallas angostas: el menú pasa a panel deslizable ---------- */

@media (max-width: 960px) {
    .app { grid-template-columns: minmax(0, 1fr); }

    /* Cerrado queda oculto (no solo corrido) para que el teclado y los lectores de pantalla no entren al panel.
       La visibilidad cambia al terminar el deslizamiento al cerrar y de inmediato al abrir. */
    .lateral {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        width: min(300px, 86vw);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s;
    }

    .lateral--abierto {
        transform: none;
        visibility: visible;
        transition: transform .2s ease;
        box-shadow: var(--sombra-panel);
    }

    .lateral .lateral__cerrar { display: grid; position: absolute; top: 18px; right: 12px; }

    .lateral__fondo:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 20;
        background: var(--velo);
    }

    .barra { padding: 12px 16px; min-height: 64px; }
    .barra .barra__menu { display: grid; border: 1px solid var(--borde); }
    /* La ruta se reduce a «← nivel anterior», cortado con puntos suspensivos si no cabe. */
    .ruta__lista { display: none; }
    .ruta .ruta__volver { display: inline-flex; gap: 6px; max-width: 100%; }
    .ruta__volver svg { flex: none; }
    .ruta__volver span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* El panel de la campana ocupa el ancho de la pantalla bajo la barra. */
    .campana-contenedor { position: static; }
    .campana__panel { position: fixed; top: 72px; right: 16px; left: 16px; width: auto; max-height: calc(100vh - 88px); overflow-y: auto; }
    .contenido { padding: 24px 16px 40px; gap: 24px; }
    .pie { padding: 16px; }
    .portada { padding: 24px 20px; }
}

@media (max-width: 600px) {
    /* La etiqueta del entorno (solo Development) no cabe junto a la campana y el botón de tema. */
    .barra__acciones > .etiqueta { display: none; }

    .validacion { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .validacion dd + dt { margin-top: 10px; }

    .paginacion { grid-template-columns: 1fr 1fr; }
    .paginacion__estado { grid-column: 1 / -1; grid-row: 1; }
    .paginacion__anterior { grid-row: 2; }
    .paginacion__siguiente { grid-column: 2; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .lateral,
    .menu__flecha { transition: none; }
}

/* Monitores anchos: el contenido crece un poco, sin llegar a llenar la pantalla. */
@media (min-width: 1800px) {
    :root { --ancho-contenido: 1360px; }
}

/* ---------- Impresión: siempre en claro ----------
   Aunque el modo oscuro esté activo (en Web Forms los títulos salían casi blancos sobre el papel). Repite los valores
   claros de :root para los mismos tokens que redefinen los bloques oscuros, con la misma especificidad y declarado
   después, salvo el fondo (blanco) y la sombra de las tarjetas (ninguna). Sin botón de tema ni campana. */

@media print {
    :root[data-tema],
    :root:not([data-tema]) {
        color-scheme: light;

        --texto: #101828;
        --texto-fuerte: #0B2A4D;
        --texto-2: #475467;
        --texto-3: #667085;
        --texto-4: #98A2B3;

        --borde: #EAECF0;
        --borde-2: #D0D5DD;
        --borde-campo: #8B95A5;
        --fondo: #FFFFFF;
        --superficie: #FFFFFF;
        --relleno: #EEF2F6;

        --azul: #176CC1;
        --azul-oscuro: #0F4F93;
        --azul-suave: #EEF5FD;
        --azul-anillo: rgba(23, 108, 193, .12);
        --naranjo: #F39A22;

        --verde: #178045;
        --verde-suave: #E6F5EC;
        --rojo: #A3260C;
        --rojo-suave: #FDECEA;
        --ambar: #8A4A00;
        --ambar-suave: #FFF4E5;
        --morado: #6941C6;
        --morado-suave: #F1EDFB;
        --gris-suave: #F2F4F7;

        --sombra: none;

        --relleno-primario: #176CC1;
        --relleno-primario-hover: #0F4F93;
        --sobre-primario: #FFFFFF;
        --etiqueta-texto: #344054;
        --aviso-texto: #8A5300;
        --verde-texto: #146C34;
        --naranjo-icono: #C47004;
        --sobre-naranjo: #101828;
        --borde-urgente: #FAD7A5;
        --borde-error: #F5C6BE;
        --borde-info: #C9DDF4;
        --borde-exito: #B7E1C6;
        --icono-azul-fondo: #E3EFFC;
        --icono-naranjo-fondo: #FFF1DC;
        --anillo-error: rgba(163, 38, 12, .12);
        --sombra-elevada: 0 24px 48px -12px rgba(16, 24, 40, .24);
        --sombra-panel: 0 12px 32px rgba(16, 24, 40, .18);
        --sombra-suave: 0 1px 2px rgba(16, 24, 40, .05);
        --velo: rgba(16, 24, 40, .42);
        --logo-placa: transparent;
        --video-fondo: #0B1220;
        --papel: #FFFFFF;
    }

    .tema,
    .campana-contenedor { display: none !important; }
}