@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════════════════
   SIEMBRA · TOMADURÍA — Sistema de diseño
   ---------------------------------------------------------------------------------------
   HTML5 y CSS3 nativos, sin frameworks de utilidades.
   Maquetación con flexbox y CSS grid. Medidas en rem sobre una base de 10 px.
   Radio de bordes de 8 px. Iconografía con Material Symbols auto-hospedada.

   Índice
     01. Tipografía y fuente de iconos
     02. Variables de diseño
     02 bis. Temas de color (claro · oscuro · siembra)
     03. Reinicio y base
     04. Utilidades
     05. Estructura de la aplicación (app-shell)
     06. Menú lateral
     07. Encabezado, ruta de navegación y selector de estilo
     08. Contenido y tarjetas
     08 bis. Recuadros de módulo
     09. Botones
     10. Formularios
     11. Tablas
     12. Distintivos y etiquetas
     13. Modales
     14. Notificaciones (toasts)
     15. Línea de tiempo de auditoría
     16. Paginación
     17. Indicadores de carga y estados vacíos
     18. Pantalla de ingreso
     19. Adaptación a pantallas pequeñas
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ═══ 01. TIPOGRAFÍA Y FUENTE DE ICONOS ═══════════════════════════════════════════════ */

/* La fuente se sirve desde el propio portal: no depende de que el equipo del usuario
   tenga salida a internet, y evita una petición a un tercero en cada carga. */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

.icono {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    user-select: none;
    flex-shrink: 0;
}

.icono--pequenio { font-size: 1.6rem; }
.icono--grande   { font-size: 2.8rem; }
.icono--xl       { font-size: 4.8rem; }

/* Iconos SVG propios (Views/Shared/_IconosSvg.cshtml). La fuente de iconos es un
   subconjunto de 90 glifos y varios de los que pide el diseño no están en él; estos se
   dibujan a trazo y toman el color del texto que los rodea, así los tres temas los tiñen
   sin reglas adicionales. Los tamaños son los mismos que los de la fuente, para que un
   icono de fuente y uno propio puedan alternarse en la misma línea. */
.ico-svg {
    width: 2rem;
    height: 2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.ico-svg--pequenio { width: 1.6rem; height: 1.6rem; stroke-width: 1.9; }
.ico-svg--grande   { width: 2.8rem; height: 2.8rem; stroke-width: 1.5; }
.ico-svg--xl       { width: 4.8rem; height: 4.8rem; stroke-width: 1.3; }

/* El isotipo de Siembra es una sola forma sólida sobre fondo transparente, así que se
   recolorea usándolo como máscara en vez de como imagen: así toma el color del tema y no
   se ve verde institucional sobre un menú verde. */
.ico-siembra {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url('../img/LogoIco.png') no-repeat center / contain;
            mask: url('../img/LogoIco.png') no-repeat center / contain;
}

.ico-siembra--pequenio { width: 1.6rem; height: 1.6rem; }

/* ═══ 02. VARIABLES DE DISEÑO ═════════════════════════════════════════════════════════ */

:root {
    /* ── Paleta institucional ──────────────────────────────────────────────────────── */
    --color-fondo:            #f6faf4;  /* primario: predomina como fondo del portal */
    --color-superficie:       #ffffff;  /* primario: tarjetas, tablas, modales        */
    --color-secundario:       #385e4a;  /* botones y títulos principales              */
    --color-detalle:          #007853;  /* detalles y acentos                          */
    --color-neutral:          #737874;  /* textos pequeños y marcadores de posición   */

    --color-exito:            #007853;
    --color-error:            #c13939;
    --color-advertencia:      #F59E0B;

    /* ── Derivados: tintes y sombras de la propia paleta ───────────────────────────── */
    --color-secundario-claro: #4a755e;
    --color-secundario-oscuro:#2a4837;
    --color-detalle-claro:    #009467;
    --color-detalle-tenue:    rgba(0, 120, 83, 0.10);
    --color-secundario-tenue: rgba(56, 94, 74, 0.08);
    --color-error-tenue:      rgba(193, 57, 57, 0.10);
    --color-advertencia-tenue:rgba(245, 158, 11, 0.12);

    --color-texto:            #1f2a24;
    --color-texto-suave:      var(--color-neutral);
    --color-borde:            #dfe7dc;
    --color-borde-fuerte:     #c3d2bd;

    /* ── Papeles de color con nombre propio ─────────────────────────────────────────────
       Todo lo que un tema necesita cambiar se nombra aquí, en lugar de deducirlo de la
       paleta. Antes, por ejemplo, el fondo del botón principal ERA --color-secundario y el
       texto de los títulos también: en un tema oscuro, donde los títulos tienen que
       aclararse, el botón se habría vuelto blanco con letra blanca. Separarlos permite que
       los temas del punto 4 se definan enteros en el bloque 02 bis, sin tocar una sola
       regla de las secciones siguientes. */

    /* Superficie "hundida": tintes dentro de una tarjeta (encabezado de tabla, pie de
       modal, campo deshabilitado). En el tema claro coincide con el fondo del portal. */
    --color-superficie-hundida: var(--color-fondo);

    --btn-principal-fondo:  var(--color-secundario);
    --btn-principal-hover:  var(--color-secundario-oscuro);
    --btn-principal-texto:  #ffffff;
    --btn-detalle-fondo:    var(--color-detalle);
    --btn-detalle-hover:    var(--color-detalle-claro);
    --btn-detalle-texto:    #ffffff;
    --btn-peligro-texto:    #ffffff;

    --avatar-fondo: var(--color-secundario);
    --avatar-texto: #ffffff;

    /* Texto legible sobre los fondos tenues de avisos y distintivos. */
    --aviso-info-texto:      #14523c;
    --aviso-adv-texto:       #92400e;
    --aviso-error-texto:     #8f2626;
    --distintivo-adv-texto:  #b45309;
    --distintivo-neutral-fondo: rgba(115, 120, 116, 0.12);

    /* Velo detrás de los modales y del menú desplegado en móvil. */
    --velo: rgba(31, 42, 36, 0.5);

    /* Degradado del panel de presentación de la pantalla de ingreso. */
    --marca-degradado-1: var(--color-secundario);
    --marca-degradado-2: var(--color-secundario-oscuro);

    /* ── Menú lateral (punto 1 del requerimiento de diseño) ─────────────────────────────
       El menú y el logotipo van sobre el color secundario de la paleta, con textos e
       iconos en el color de fondo institucional. */
    --menu-fondo:       #385e4a;
    --menu-texto:       #f6faf4;
    --menu-texto-suave: rgba(246, 250, 244, 0.66);
    --menu-borde:       rgba(246, 250, 244, 0.18);
    --menu-hover:       rgba(246, 250, 244, 0.10);
    --menu-activo:      rgba(246, 250, 244, 0.18);
    --menu-acento:      #9fd9bf;
    --menu-apagado:     rgba(246, 250, 244, 0.40);

    /* ── Tipografía ────────────────────────────────────────────────────────────────── */
    --fuente: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    --texto-xs:  1.1rem;
    --texto-sm:  1.2rem;
    --texto-base:1.4rem;
    --texto-md:  1.6rem;
    --texto-lg:  1.8rem;
    --texto-xl:  2.2rem;
    --texto-2xl: 2.8rem;

    /* ── Espaciado ─────────────────────────────────────────────────────────────────── */
    --esp-1: 0.4rem;
    --esp-2: 0.8rem;
    --esp-3: 1.2rem;
    --esp-4: 1.6rem;
    --esp-5: 2.4rem;
    --esp-6: 3.2rem;
    --esp-7: 4.8rem;

    /* ── Bordes redondeados: 8 px como norma ───────────────────────────────────────── */
    --radio:        0.8rem;
    --radio-chico:  0.6rem;
    --radio-grande: 1.2rem;
    --radio-pill:   9999px;

    /* ── Sombras ───────────────────────────────────────────────────────────────────── */
    --sombra-sm: 0 1px 2px rgba(31, 42, 36, 0.06);
    --sombra:    0 2px 8px rgba(31, 42, 36, 0.08);
    --sombra-md: 0 4px 16px rgba(31, 42, 36, 0.10);
    --sombra-lg: 0 12px 32px rgba(31, 42, 36, 0.16);

    /* ── Medidas de la estructura ──────────────────────────────────────────────────── */
    --ancho-menu: 26rem;
    --alto-encabezado: 6.4rem;

    --transicion: 180ms ease;
}

/* ═══ 02 bis. TEMAS DE COLOR ═══════════════════════════════════════════════════════════
   Punto 4 del requerimiento: el usuario elige el estilo de color del portal desde el
   encabezado. El tema se guarda en el navegador (localStorage) y se aplica como atributo
   data-tema en <html>, de modo que un solo atributo repinta el portal completo.

     data-tema ausente o "claro"  → paleta institucional (vista actual + menú del punto 1)
     data-tema="oscuro"           → #000000 con textos y líneas en #FFFFFF
     data-tema="siembra"          → #385e4a (primario) y #737874 (secundario)

   Cada tema solo redefine variables. Ninguna regla de las secciones siguientes conoce los
   temas, así que una pantalla nueva queda tematizada sin escribir CSS adicional.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Oscuro ────────────────────────────────────────────────────────────────────────────
   El requerimiento pide negro con textos y líneas en blanco. Las tarjetas se separan del
   fondo con un negro apenas más claro (#0b0b0b) además del borde blanco: a la vista sigue
   siendo negro, pero los recuadros se distinguen cuando hay varios apilados. */
html[data-tema="oscuro"] {
    --color-fondo:            #000000;
    --color-superficie:       #0b0b0b;
    --color-superficie-hundida:#000000;

    --color-texto:            #ffffff;
    --color-texto-suave:      #d8d8d8;
    --color-neutral:          #d8d8d8;
    --color-borde:            #ffffff;
    --color-borde-fuerte:     #ffffff;

    --color-secundario:       #ffffff;
    --color-secundario-claro: #ffffff;
    --color-secundario-oscuro: #ffffff;
    --color-secundario-tenue: rgba(255, 255, 255, 0.10);
    --color-detalle:          #ffffff;
    --color-detalle-claro:    #ffffff;
    --color-detalle-tenue:    rgba(255, 255, 255, 0.14);

    /* Los estados sí conservan matiz: en una bitácora de auditoría distinguir un error de
       un éxito es información, no decoración. */
    --color-exito:            #6ee7a8;
    --color-error:            #ff7b7b;
    --color-error-tenue:      rgba(255, 123, 123, 0.16);
    --color-advertencia:      #ffc75a;
    --color-advertencia-tenue:rgba(255, 199, 90, 0.16);

    --btn-principal-fondo:    #ffffff;
    --btn-principal-hover:    #d8d8d8;
    --btn-principal-texto:    #000000;
    --btn-detalle-fondo:      #ffffff;
    --btn-detalle-hover:      #d8d8d8;
    --btn-detalle-texto:      #000000;
    --btn-peligro-texto:      #000000;

    --avatar-fondo:           #ffffff;
    --avatar-texto:           #000000;

    --aviso-info-texto:       #ffffff;
    --aviso-adv-texto:        #ffc75a;
    --aviso-error-texto:      #ff7b7b;
    --distintivo-adv-texto:   #ffc75a;
    --distintivo-neutral-fondo: rgba(255, 255, 255, 0.12);

    --velo: rgba(0, 0, 0, 0.74);

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.60);
    --sombra:    0 2px 8px rgba(0, 0, 0, 0.65);
    --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.70);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.80);

    --marca-degradado-1: #000000;
    --marca-degradado-2: #141414;

    --menu-fondo:       #000000;
    --menu-texto:       #ffffff;
    --menu-texto-suave: rgba(255, 255, 255, 0.70);
    --menu-borde:       #ffffff;
    --menu-hover:       rgba(255, 255, 255, 0.14);
    --menu-activo:      rgba(255, 255, 255, 0.22);
    --menu-acento:      #ffffff;
    --menu-apagado:     rgba(255, 255, 255, 0.45);
}

/* ── Siembra ───────────────────────────────────────────────────────────────────────────
   Primario #385e4a como color predominante del portal y secundario #737874 en las líneas
   y en las zonas hundidas (encabezados de tabla, pies de modal). Los títulos van en blanco
   puro y no en #f6faf4: sobre el gris secundario el blanco es lo que alcanza el contraste
   mínimo para texto pequeño. */
html[data-tema="siembra"] {
    --color-fondo:            #385e4a;
    --color-superficie:       #42705a;
    --color-superficie-hundida:#737874;

    --color-texto:            #f6faf4;
    --color-texto-suave:      #d3dad2;
    --color-neutral:          #d3dad2;
    --color-borde:            #737874;
    --color-borde-fuerte:     #8f958f;

    --color-secundario:       #ffffff;
    --color-secundario-claro: #ffffff;
    --color-secundario-oscuro: #e6ede4;
    --color-secundario-tenue: rgba(246, 250, 244, 0.10);
    --color-detalle:          #9fd9bf;
    --color-detalle-claro:    #bfe8d3;
    --color-detalle-tenue:    rgba(159, 217, 191, 0.18);

    --color-exito:            #9fd9bf;
    --color-error:            #ff9b9b;
    --color-error-tenue:      rgba(255, 155, 155, 0.18);
    --color-advertencia:      #ffcf72;
    --color-advertencia-tenue:rgba(255, 207, 114, 0.18);

    --btn-principal-fondo:    #f6faf4;
    --btn-principal-hover:    #e0e9dd;
    --btn-principal-texto:    #2a4837;
    --btn-detalle-fondo:      #9fd9bf;
    --btn-detalle-hover:      #bfe8d3;
    --btn-detalle-texto:      #1f3a2c;
    --btn-peligro-texto:      #3a1212;

    --avatar-fondo:           #f6faf4;
    --avatar-texto:           #2a4837;

    --aviso-info-texto:       #ffffff;
    --aviso-adv-texto:        #ffcf72;
    --aviso-error-texto:      #ff9b9b;
    --distintivo-adv-texto:   #ffcf72;
    --distintivo-neutral-fondo: rgba(246, 250, 244, 0.14);

    --velo: rgba(18, 30, 23, 0.66);

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
    --sombra:    0 2px 8px rgba(0, 0, 0, 0.26);
    --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.30);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.40);

    --marca-degradado-1: #2a4837;
    --marca-degradado-2: #385e4a;

    --menu-fondo:       #2a4837;
    --menu-texto:       #f6faf4;
    --menu-texto-suave: rgba(246, 250, 244, 0.66);
    --menu-borde:       #737874;
    --menu-hover:       rgba(246, 250, 244, 0.10);
    --menu-activo:      rgba(246, 250, 244, 0.18);
    --menu-acento:      #9fd9bf;
    --menu-apagado:     rgba(246, 250, 244, 0.40);
}

/* En los temas oscuros el logotipo verde institucional queda casi invisible sobre el
   fondo, así que en la pantalla de ingreso se aclara. En el menú lateral no hace falta:
   ahí el logotipo se pinta por máscara con --menu-texto. */
html[data-tema="oscuro"]  .ingreso-logo img,
html[data-tema="siembra"] .ingreso-logo img { filter: brightness(0) invert(1); }

/* ═══ 03. REINICIO Y BASE ═════════════════════════════════════════════════════════════ */

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

/* Base de 10 px: a partir de aquí 1rem = 10 px y las medidas se leen directo. */
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: var(--texto-base);
    line-height: 1.55;
    color: var(--color-texto);
    background-color: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-secundario);
}

h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); }
h4 { font-size: var(--texto-md); }

p { margin: 0 0 var(--esp-3); }

a {
    color: var(--color-detalle);
    text-decoration: none;
    transition: color var(--transicion);
}

a:hover { color: var(--color-secundario); text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* Foco visible y consistente: es lo que permite recorrer el portal con el teclado. */
:focus-visible {
    outline: 2px solid var(--color-detalle);
    outline-offset: 2px;
    border-radius: var(--radio-chico);
}

::placeholder { color: var(--color-neutral); opacity: 1; }

/* ═══ 04. UTILIDADES ══════════════════════════════════════════════════════════════════ */

.texto-suave     { color: var(--color-texto-suave); font-size: var(--texto-sm); }
.texto-exito     { color: var(--color-exito); }
.texto-error     { color: var(--color-error); }
.texto-advertencia { color: var(--color-advertencia); }
.texto-centrado  { text-align: center; }
.texto-derecha   { text-align: right; }
.texto-mono      { font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace; }

.oculto          { display: none !important; }

/* Visible solo para lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fila        { display: flex; align-items: center; gap: var(--esp-2); }
.fila--entre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.fila--fin   { display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-2); }
.columna     { display: flex; flex-direction: column; gap: var(--esp-3); }

/* ═══ 05. ESTRUCTURA DE LA APLICACIÓN ═════════════════════════════════════════════════ */

.aplicacion {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-fondo);
}

.area-principal {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;              /* permite que las tablas anchas no desborden la página */
    margin-left: var(--ancho-menu);
    transition: margin-left var(--transicion);
}

.capa-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--velo);
    z-index: 900;
}

.capa-menu.visible { display: block; }

/* ═══ 06. MENÚ LATERAL ════════════════════════════════════════════════════════════════
   Punto 1 del requerimiento: la sección de menús y el logotipo van sobre el color
   secundario de la paleta (#385e4a en el tema claro) con textos e iconos en #f6faf4. Todo
   el bloque se pinta con las variables --menu-*, de modo que cada tema le da su propio par
   de colores sin duplicar reglas. */

.menu-lateral {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--ancho-menu);
    display: flex;
    flex-direction: column;
    background: var(--menu-fondo);
    color: var(--menu-texto);
    border-right: 1px solid var(--menu-borde);
    z-index: 1000;
    transition: transform var(--transicion);
}

/* El logotipo institucional es apaisado (838 × 157). Si se dimensiona por altura, ocupa
   casi 200 px de ancho y no cabe junto al texto en un menú de 26 rem. Por eso la marca se
   acomoda en columna y el logotipo se limita por ANCHO, conservando su proporción. */
.menu-marca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-2);
    padding: var(--esp-4);
    border-bottom: 1px solid var(--menu-borde);
    min-height: var(--alto-encabezado);
    overflow: hidden;
}

/* El logotipo es una forma sólida de un solo color sobre fondo transparente, y en su verde
   original (#007954) no se distinguiría sobre el verde del menú. Se usa como MÁSCARA en
   lugar de como imagen: el color lo pone --menu-texto y queda exactamente en #f6faf4, como
   pide el requerimiento. La altura es la del archivo a 14 rem de ancho (838 × 157). */
.menu-logo {
    display: block;
    width: 14rem;
    max-width: 100%;
    height: 2.62rem;
    background-color: var(--menu-texto);
    -webkit-mask: url('../img/Logo.png') no-repeat left center / contain;
            mask: url('../img/Logo.png') no-repeat left center / contain;
}

.menu-marca-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.menu-marca-texto strong {
    font-size: var(--texto-base);
    font-weight: 700;
    color: var(--menu-texto);
}

.menu-marca-texto span {
    font-size: var(--texto-xs);
    color: var(--menu-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.menu-navegacion {
    flex: 1;
    overflow-y: auto;
    padding: var(--esp-3) var(--esp-2);
}

/* Barra de desplazamiento discreta */
.menu-navegacion::-webkit-scrollbar { width: 6px; }
.menu-navegacion::-webkit-scrollbar-thumb {
    background: var(--menu-activo);
    border-radius: var(--radio-pill);
}

.menu-grupo { margin-bottom: var(--esp-1); }

/* Encabezado del módulo: es el botón que colapsa el grupo */
.menu-modulo {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    width: 100%;
    padding: var(--esp-3);
    border: none;
    background: transparent;
    border-radius: var(--radio);
    font-family: inherit;
    font-size: var(--texto-base);
    font-weight: 600;
    color: var(--menu-texto);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transicion);
}

.menu-modulo:hover { background: var(--menu-hover); }

/* El módulo cuyos recuadros se están viendo en el área de pantallas (punto 3). */
.menu-modulo.abierta { background: var(--menu-hover); }

.menu-modulo .icono { color: var(--menu-texto); }

.menu-modulo .chevron {
    margin-left: auto;
    font-size: 2rem;
    color: var(--menu-texto-suave);
    transition: transform var(--transicion);
}

.menu-modulo[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.menu-submenu {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: var(--esp-1) 0 var(--esp-2) var(--esp-5);
}

.menu-submenu.abierto { display: flex; }

.menu-pantalla {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    width: 100%;
    padding: var(--esp-2) var(--esp-3);
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    border-radius: 0 var(--radio) var(--radio) 0;
    font-family: inherit;
    font-size: var(--texto-base);
    color: var(--menu-texto);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.menu-pantalla:hover {
    background: var(--menu-hover);
    color: var(--menu-texto);
}

.menu-pantalla.activa {
    background: var(--menu-activo);
    border-left-color: var(--menu-acento);
    color: var(--menu-texto);
    font-weight: 600;
}

/* Pantalla presente en el menú pero aún no implementada en esta versión */
.menu-pantalla.no-disponible {
    color: var(--menu-apagado);
    cursor: not-allowed;
}

.menu-pantalla.no-disponible:hover {
    background: transparent;
    color: var(--menu-apagado);
}

.menu-pantalla.no-disponible .icono-pendiente {
    margin-left: auto;
    font-size: 1.4rem;
    color: var(--menu-apagado);
}

.menu-pie {
    padding: var(--esp-3);
    border-top: 1px solid var(--menu-borde);
}

/* Sobre el menú de color, el botón de salir se dibuja en hueco: un botón blanco a todo lo
   ancho competiría con el contenido y rompería el bloque de color del punto 1. */
.menu-pie .boton--secundario {
    background: transparent;
    border-color: var(--menu-borde);
    color: var(--menu-texto);
}

.menu-pie .boton--secundario:hover:not(:disabled) {
    background: var(--menu-hover);
    border-color: var(--menu-texto-suave);
    color: var(--menu-texto);
}

/* ═══ 06 bis. CINTA DE SIMULACIÓN (función temporal de pruebas) ═══════════════════════
   Aviso permanente mientras se está viendo el portal como otro usuario. Usa el color de
   advertencia y se queda fijo arriba a propósito: nadie debe confundir una sesión simulada
   con la suya. Al retirar la función de simulación, se puede borrar este bloque. */

.cinta-simulacion {
    position: sticky;
    top: 0;
    z-index: 850;
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-2) var(--esp-5);
    background: var(--color-advertencia);
    color: #4a2d02;
    font-size: var(--texto-sm);
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.cinta-simulacion .icono { flex-shrink: 0; }

.cinta-simulacion span:not(.icono) { flex: 1; min-width: 0; }

.cinta-simulacion strong { font-weight: 700; }

.cinta-simulacion .boton {
    background: rgba(0, 0, 0, 0.14);
    color: #3d2500;
    border-color: transparent;
    flex-shrink: 0;
}

.cinta-simulacion .boton:hover { background: rgba(0, 0, 0, 0.24); }

/* Cuando hay cinta, el encabezado se recorre debajo de ella. */
.cinta-simulacion + .encabezado { top: 3.6rem; }

/* ═══ 07. ENCABEZADO, RUTA DE NAVEGACIÓN Y SELECTOR DE ESTILO ══════════════════════════ */

.encabezado {
    position: sticky;
    top: 0;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    min-height: var(--alto-encabezado);
    padding: 0 var(--esp-5);
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
}

/* ── Ruta de navegación (punto 2 del requerimiento) ────────────────────────────────────
   Sustituye al título simple del encabezado: muestra la ruta completa —casa > módulo >
   pantalla— y cada tramo anterior al último es un enlace que lleva a ese nivel. El último
   tramo es la pantalla en curso, así que va como texto y se marca con aria-current. */

.ruta {
    min-width: 0;
    flex: 1;
}

/* La ruta se parte en varios renglones antes que recortarse: en un módulo con nombre largo
   vale más que el encabezado crezca unos milímetros que perder el tramo intermedio, que es
   justamente el enlace que el requerimiento pide. */
.ruta-lista {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--esp-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ruta-lista li {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    min-width: 0;
}

/* Separador ">" entre tramos. Se dibuja con CSS para que no lo lea un lector de pantalla
   como si fuera contenido. */
.ruta-lista li + li::before {
    content: '';
    width: 0.7rem;
    height: 0.7rem;
    margin-right: var(--esp-1);
    border-top: 2px solid var(--color-borde-fuerte);
    border-right: 2px solid var(--color-borde-fuerte);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.ruta-enlace {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-1) var(--esp-2);
    border: none;
    border-radius: var(--radio-chico);
    background: transparent;
    font-family: inherit;
    font-size: var(--texto-md);
    font-weight: 600;
    color: var(--color-detalle);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transicion), color var(--transicion);
}

.ruta-enlace:hover {
    background: var(--color-detalle-tenue);
    color: var(--color-detalle);
    text-decoration: underline;
}

/* Tramo actual: no navega a ninguna parte, así que no se pinta como enlace. */
.ruta-actual {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-1) var(--esp-2);
    font-size: var(--texto-md);
    font-weight: 600;
    color: var(--color-secundario);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.encabezado-derecha {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}

/* ── Selector de estilo de color (punto 4 del requerimiento) ───────────────────────────
   Botón a la izquierda del usuario firmado. Abre una lista con los tres estilos; el activo
   queda marcado con aria-checked y con una palomita, no solo con color: quien no distinga
   los tonos también tiene que poder saber cuál está puesto. */

.selector-tema { position: relative; }

.boton-tema {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-3);
    /*border: 1px solid var(--color-borde-fuerte);*/
    border: 1px solid transparent;
    border-radius: var(--radio);
    /*background: var(--color-superficie);*/
    background: var(--color-superficie-hundida);
    color: var(--color-secundario);
    font-family: inherit;
    font-size: var(--texto-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transicion), border-color var(--transicion);
}

    .boton-tema:hover {
        border-color: var(--color-borde-fuerte);
        /*  background: var(--color-secundario-tenue);
    border-color: var(--color-secundario);*/
    }

.boton-tema .chevron {
    font-size: 1.6rem;
    color: var(--color-neutral);
    transition: transform var(--transicion);
}

.boton-tema[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.menu-tema {
    display: none;
    position: absolute;
    top: calc(100% + var(--esp-2));
    right: 0;
    min-width: 22rem;
    padding: var(--esp-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-md);
    z-index: 1100;
}

.menu-tema.visible { display: block; }

.menu-tema-titulo {
    padding: var(--esp-2) var(--esp-3);
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral);
}

.opcion-tema {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    width: 100%;
    padding: var(--esp-3);
    border: none;
    border-radius: var(--radio-chico);
    background: transparent;
    font-family: inherit;
    font-size: var(--texto-base);
    color: var(--color-texto);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transicion);
}

.opcion-tema:hover { background: var(--color-secundario-tenue); }

.opcion-tema .nombre-tema { flex: 1; font-weight: 600; }

.opcion-tema .palomita {
    color: var(--color-detalle);
    visibility: hidden;
}

.opcion-tema[aria-checked="true"] { background: var(--color-detalle-tenue); }
.opcion-tema[aria-checked="true"] .palomita { visibility: visible; }

/* Muestra de color de cada estilo: da a entender de un vistazo qué se va a aplicar. */
.muestra-tema {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: var(--radio-chico);
    border: 1px solid var(--color-borde-fuerte);
    flex-shrink: 0;
}

.muestra-tema--claro   { background: #f6faf4; color: #385e4a; }
.muestra-tema--oscuro  { background: #000000; color: #ffffff; }
.muestra-tema--siembra { background: #385e4a; color: #f6faf4; }

/* ── Usuario firmado y salida del sistema (requerimientos 4.1.1 y 4.1.2) ───────────────
   El usuario firmado es además el botón que abre su ficha con la opción de cerrar sesión.
   El botón de salir estaba suelto en el encabezado y, con la ruta de navegación y el
   selector de estilo, ya no cabía. */

.selector-usuario { position: relative; }

.usuario-firmado {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-2) var(--esp-3);
    border: 1px solid transparent;
    border-radius: var(--radio);
    background: var(--color-superficie-hundida);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transicion), border-color var(--transicion);
}

.usuario-firmado:hover { border-color: var(--color-borde-fuerte); }

.usuario-firmado .chevron {
    font-size: 1.6rem;
    color: var(--color-neutral);
    transition: transform var(--transicion);
}

.usuario-firmado[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.menu-usuario {
    display: none;
    position: absolute;
    top: calc(100% + var(--esp-2));
    right: 0;
    min-width: 26rem;
    padding: var(--esp-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-md);
    z-index: 1100;
}

.menu-usuario.visible { display: block; }

.menu-usuario-ficha {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-3);
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: var(--esp-2);
}

.menu-usuario-datos {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.menu-usuario-datos strong {
    font-size: var(--texto-base);
    color: var(--color-secundario);
    word-break: break-word;
}

.menu-usuario-datos .texto-suave { word-break: break-word; }

.opcion-usuario {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    width: 100%;
    padding: var(--esp-3);
    border: none;
    border-radius: var(--radio-chico);
    background: transparent;
    font-family: inherit;
    font-size: var(--texto-base);
    font-weight: 600;
    color: var(--color-texto);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transicion), color var(--transicion);
}

.opcion-usuario:hover { background: var(--color-secundario-tenue); }

.opcion-usuario--salir { color: var(--color-error); }

.opcion-usuario--salir:hover {
    background: var(--color-error-tenue);
    color: var(--color-error);
}

.usuario-avatar {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: var(--avatar-fondo);
    color: var(--avatar-texto);
    font-weight: 700;
    font-size: var(--texto-base);
    flex-shrink: 0;
}

.usuario-avatar--grande { width: 4.4rem; height: 4.4rem; font-size: var(--texto-md); }

.usuario-datos { display: flex; flex-direction: column; line-height: 1.25; }

.usuario-nombre {
    font-weight: 600;
    font-size: var(--texto-base);
    color: var(--color-texto);
}

.usuario-rol {
    font-size: var(--texto-xs);
    color: var(--color-neutral);
}

.boton-hamburguesa {
    display: none;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-superficie);
    color: var(--color-secundario);
    cursor: pointer;
    transition: background-color var(--transicion);
}

.boton-hamburguesa:hover { background: var(--color-secundario-tenue); }

/* ═══ 08. CONTENIDO Y TARJETAS ════════════════════════════════════════════════════════ */

.contenido {
    flex: 1;
    padding: var(--esp-5);
    max-width: 160rem;
    width: 100%;
    margin: 0 auto;
}

.encabezado-pantalla {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--esp-4);
    flex-wrap: wrap;
    margin-bottom: var(--esp-5);
}

.encabezado-pantalla h2 {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}

.encabezado-pantalla .subtitulo {
    margin: var(--esp-1) 0 0;
    font-size: var(--texto-base);
    color: var(--color-neutral);
}

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

.tarjeta-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    flex-wrap: wrap;
    padding: var(--esp-4) var(--esp-5);
    border-bottom: 1px solid var(--color-borde);
}

.tarjeta-encabezado h3 {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: var(--texto-md);
}

.tarjeta-cuerpo { padding: var(--esp-5); }
.tarjeta-cuerpo--compacto { padding: var(--esp-4); }
.tarjeta-cuerpo--sin-relleno { padding: 0; }

/* Rejilla de tarjetas: se adapta sola al ancho disponible */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    gap: var(--esp-4);
}

.rejilla--amplia { grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr)); }

/* Tarjeta de indicador */
.indicador {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    padding: var(--esp-4) var(--esp-5);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
}

.indicador-icono {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: var(--radio);
    background: var(--color-detalle-tenue);
    color: var(--color-detalle);
    flex-shrink: 0;
}

.indicador-valor {
    font-size: var(--texto-2xl);
    font-weight: 700;
    color: var(--color-secundario);
    line-height: 1.1;
}

.indicador-etiqueta {
    font-size: var(--texto-sm);
    color: var(--color-neutral);
}

/* ═══ 08 bis. RECUADROS DE MÓDULO ══════════════════════════════════════════════════════
   Punto 3 del requerimiento: al elegir un menú padre, además de desplegarse sus hijos en el
   menú lateral, sus pantallas se muestran como recuadros justificados en el área de
   pantallas. La rejilla usa auto-fill con un mínimo de 26 rem: los recuadros ocupan todo el
   ancho disponible repartido en partes iguales, sin dejar un hueco al final ni importar
   cuántas pantallas autorice el perfil.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.rejilla-modulo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
    gap: var(--esp-4);
    align-items: stretch;
}

.tarjeta-modulo {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    padding: var(--esp-5);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-sm);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: box-shadow var(--transicion), border-color var(--transicion),
                transform var(--transicion);
}

.tarjeta-modulo:hover:not(.no-disponible) {
    border-color: var(--color-detalle);
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
}

.tarjeta-modulo-icono {
    display: grid;
    place-items: center;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: var(--radio);
    background: var(--color-detalle-tenue);
    color: var(--color-detalle);
    flex-shrink: 0;
}

.tarjeta-modulo-titulo {
    font-size: var(--texto-lg);
    font-weight: 700;
    color: var(--color-secundario);
    line-height: 1.25;
}

.tarjeta-modulo-texto {
    margin: 0;
    font-size: var(--texto-base);
    color: var(--color-texto-suave);
    /* Empuja el pie hacia abajo para que la línea y la acción queden alineadas entre
       recuadros aunque las descripciones tengan distinto largo. */
    flex: 1;
}

.tarjeta-modulo-pie {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    padding-top: var(--esp-3);
    border-top: 1px solid var(--color-borde);
    font-size: var(--texto-base);
    font-weight: 600;
    color: var(--color-detalle);
}

.tarjeta-modulo-pie .ico-svg { transition: transform var(--transicion); }
.tarjeta-modulo:hover:not(.no-disponible) .tarjeta-modulo-pie .ico-svg { transform: translateX(4px); }

/* Pantalla autorizada por el perfil pero todavía no migrada: se muestra igual, atenuada y
   sin acción, con el mismo criterio que en el menú lateral. El usuario ve que su perfil sí
   la incluye y que está por migrarse. */
.tarjeta-modulo.no-disponible {
    cursor: not-allowed;
    background: var(--color-superficie-hundida);
    border-style: dashed;
    box-shadow: none;
}

.tarjeta-modulo.no-disponible .tarjeta-modulo-icono {
    background: var(--distintivo-neutral-fondo);
    color: var(--color-neutral);
}

.tarjeta-modulo.no-disponible .tarjeta-modulo-titulo { color: var(--color-neutral); }
.tarjeta-modulo.no-disponible .tarjeta-modulo-pie    { color: var(--color-neutral); }

/* ═══ 09. BOTONES ═════════════════════════════════════════════════════════════════════ */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid transparent;
    border-radius: var(--radio);
    font-family: inherit;
    font-size: var(--texto-base);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transicion), border-color var(--transicion),
                color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

.boton:active { transform: translateY(1px); }

.boton:disabled,
.boton[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Principal: en el tema claro es el secundario de la paleta; los temas oscuros lo invierten
   (fondo claro y letra oscura) a través de las variables --btn-principal-*. */
.boton--principal {
    background: var(--btn-principal-fondo);
    color: var(--btn-principal-texto);
    box-shadow: var(--sombra-sm);
}

.boton--principal:hover:not(:disabled) { background: var(--btn-principal-hover); }

.boton--secundario {
    background: var(--color-superficie);
    border-color: var(--color-borde-fuerte);
    color: var(--color-secundario);
}

.boton--secundario:hover:not(:disabled) {
    background: var(--color-secundario-tenue);
    border-color: var(--color-secundario);
}

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

.boton--detalle:hover:not(:disabled) { background: var(--btn-detalle-hover); }

.boton--peligro {
    background: var(--color-error);
    color: var(--btn-peligro-texto);
}

.boton--peligro:hover:not(:disabled) { background: #a52f2f; }

.boton--plano {
    background: transparent;
    color: var(--color-secundario);
}

.boton--plano:hover:not(:disabled) { background: var(--color-secundario-tenue); }

.boton--bloque { width: 100%; }
.boton--chico  { padding: var(--esp-2) var(--esp-3); font-size: var(--texto-sm); }
.boton--grande { padding: var(--esp-4) var(--esp-6); font-size: var(--texto-md); }

/* Botón circular de acción dentro de tablas */
.boton-icono {
    display: inline-grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    background: transparent;
    color: var(--color-neutral);
    cursor: pointer;
    transition: background-color var(--transicion), color var(--transicion);
}

.boton-icono:hover {
    background: var(--color-secundario-tenue);
    color: var(--color-secundario);
}

.boton-icono--editar:hover  { background: var(--color-advertencia-tenue); color: var(--color-advertencia); }
.boton-icono--borrar:hover  { background: var(--color-error-tenue); color: var(--color-error); }
.boton-icono--ver:hover     { background: var(--color-detalle-tenue); color: var(--color-detalle); }

.boton-icono:disabled { opacity: 0.35; cursor: not-allowed; }
.boton-icono:disabled:hover { background: transparent; color: var(--color-neutral); }

/* ═══ 10. FORMULARIOS ═════════════════════════════════════════════════════════════════ */

.formulario { display: flex; flex-direction: column; gap: var(--esp-4); }

.formulario-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
    gap: var(--esp-4);
}

.campo { display: flex; flex-direction: column; gap: var(--esp-2); }

.campo--completo { grid-column: 1 / -1; }

.campo label {
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--color-secundario);
}

.campo label .obligatorio { color: var(--color-error); margin-left: 2px; }

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="email"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="search"],
.campo select,
.campo textarea {
    width: 100%;
    padding: var(--esp-3);
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio);
    font-family: inherit;
    font-size: var(--texto-base);
    color: var(--color-texto);
    background: var(--color-superficie);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo textarea { resize: vertical; min-height: 9rem; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--color-detalle);
    box-shadow: 0 0 0 3px var(--color-detalle-tenue);
}

.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled {
    background: var(--color-superficie-hundida);
    color: var(--color-neutral);
    cursor: not-allowed;
}

.campo.con-error input,
.campo.con-error select,
.campo.con-error textarea {
    border-color: var(--color-error);
}

.campo .mensaje-error {
    font-size: var(--texto-xs);
    color: var(--color-error);
    display: flex;
    align-items: center;
    gap: var(--esp-1);
}

.campo .ayuda {
    font-size: var(--texto-xs);
    color: var(--color-neutral);
}

/* Casilla de verificación */
.casilla {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    cursor: pointer;
    font-size: var(--texto-base);
    user-select: none;
}

.casilla input[type="checkbox"] {
    width: 1.8rem;
    height: 1.8rem;
    accent-color: var(--color-detalle);
    cursor: pointer;
    flex-shrink: 0;
}

.casilla input[type="checkbox"]:disabled { cursor: not-allowed; }

/* Barra de filtros sobre los listados */
.barra-filtros {
    display: flex;
    align-items: flex-end;
    gap: var(--esp-3);
    flex-wrap: wrap;
    padding: var(--esp-4);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    margin-bottom: var(--esp-4);
}

.barra-filtros .campo { min-width: 18rem; flex: 1 1 18rem; }
.barra-filtros .campo--auto { flex: 0 0 auto; min-width: 0; }

/* Campo de búsqueda con icono */
.buscador { position: relative; display: flex; align-items: center; }

.buscador .icono {
    position: absolute;
    left: var(--esp-3);
    color: var(--color-neutral);
    pointer-events: none;
    font-size: 1.8rem;
}

.buscador input { padding-left: 4rem !important; }

/* ═══ 11. TABLAS ══════════════════════════════════════════════════════════════════════ */

/* El contenedor es el que se desplaza: la página nunca se mueve en horizontal. */
.tabla-contenedor {
    width: 100%;
    overflow-x: auto;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-base);
}

.tabla thead th {
    position: sticky;
    top: 0;
    padding: var(--esp-3) var(--esp-4);
    background: var(--color-superficie-hundida);
    border-bottom: 2px solid var(--color-borde);
    font-size: var(--texto-sm);
    font-weight: 700;
    color: var(--color-secundario);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.tabla tbody td {
    padding: var(--esp-3) var(--esp-4);
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
}

.tabla tbody tr:last-child td { border-bottom: none; }

.tabla tbody tr { transition: background-color var(--transicion); }
.tabla tbody tr:hover { background: var(--color-secundario-tenue); }

.tabla .columna-acciones { width: 1%; white-space: nowrap; text-align: right; }
.tabla .columna-numero   { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .columna-centrada { text-align: center; }

/* Fila de un registro dado de baja */
.tabla tbody tr.inactiva td { color: var(--color-neutral); }
.tabla tbody tr.inactiva .celda-principal { text-decoration: line-through; }

/* ── Filas marcadas ────────────────────────────────────────────────────────────────────
   Las pide el requerimiento de Incidencias de Pago: cuando un pago se está duplicando, el
   renglón "cambia de color" para que se vea sin tener que leerlo.

   El color no es el único indicio: el renglón lleva además su distintivo con texto y su
   explicación en el título. Quien no distinga los colores tiene que poder enterarse igual.

   Se usa un borde izquierdo grueso y no solo el fondo porque en el tema oscuro los fondos
   tenues se perciben muy poco. */
.tabla tbody tr.duplicada > td:first-child {
    box-shadow: inset 3px 0 0 var(--color-advertencia);
}

.tabla tbody tr.duplicada        { background: var(--color-advertencia-tenue); }
.tabla tbody tr.duplicada:hover  { background: var(--color-advertencia-tenue); }

/* Renglón cuyo importe saldría en cero: no generaría pago. */
.tabla tbody tr.sin-pago > td:first-child {
    box-shadow: inset 3px 0 0 var(--color-error);
}

.tabla tbody tr.sin-pago        { background: var(--color-error-tenue); }
.tabla tbody tr.sin-pago:hover  { background: var(--color-error-tenue); }

/* ═══ 12. DISTINTIVOS Y ETIQUETAS ═════════════════════════════════════════════════════ */

.distintivo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    padding: 0.3rem var(--esp-2);
    border-radius: var(--radio-pill);
    font-size: var(--texto-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.distintivo--exito       { background: var(--color-detalle-tenue);   color: var(--color-exito); }
.distintivo--error       { background: var(--color-error-tenue);     color: var(--color-error); }
.distintivo--advertencia { background: var(--color-advertencia-tenue); color: var(--distintivo-adv-texto); }
.distintivo--neutral     { background: var(--distintivo-neutral-fondo); color: var(--color-neutral); }
.distintivo--secundario  { background: var(--color-secundario-tenue); color: var(--color-secundario); }

.distintivo .icono { font-size: 1.4rem; }

/* Aviso destacado dentro del contenido */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-3);
    padding: var(--esp-4);
    border-radius: var(--radio);
    border-left: 4px solid;
    font-size: var(--texto-base);
}

.aviso--info        { background: var(--color-detalle-tenue);     border-color: var(--color-detalle);     color: var(--aviso-info-texto); }
.aviso--exito       { background: var(--color-detalle-tenue);     border-color: var(--color-exito);       color: var(--aviso-info-texto); }
.aviso--advertencia { background: var(--color-advertencia-tenue); border-color: var(--color-advertencia); color: var(--aviso-adv-texto); }
.aviso--error       { background: var(--color-error-tenue);       border-color: var(--color-error);       color: var(--aviso-error-texto); }

.aviso .icono { flex-shrink: 0; }
.aviso p:last-child { margin-bottom: 0; }

/* ═══ 13. MODALES ═════════════════════════════════════════════════════════════════════ */

.modal-fondo {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--esp-4);
    background: var(--velo);
    z-index: 2000;
}

.modal-fondo.visible { display: flex; }

.modal {
    width: 100%;
    max-width: 64rem;
    max-height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
    background: var(--color-superficie);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-lg);
    animation: aparecer 180ms ease;
}

.modal--ancho   { max-width: 96rem; }
.modal--angosto { max-width: 44rem; }

@keyframes aparecer {
    from { opacity: 0; transform: translateY(-1.2rem) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    padding: var(--esp-4) var(--esp-5);
    border-bottom: 1px solid var(--color-borde);
}

.modal-encabezado h3 {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: var(--texto-lg);
}

.modal-cuerpo {
    padding: var(--esp-5);
    overflow-y: auto;
    flex: 1;
}

.modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: var(--esp-3);
    padding: var(--esp-4) var(--esp-5);
    border-top: 1px solid var(--color-borde);
    background: var(--color-superficie-hundida);
    border-radius: 0 0 var(--radio-grande) var(--radio-grande);
}

.boton-cerrar {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border: none;
    border-radius: var(--radio-chico);
    background: transparent;
    color: var(--color-neutral);
    cursor: pointer;
    transition: background-color var(--transicion), color var(--transicion);
}

.boton-cerrar:hover { background: var(--color-error-tenue); color: var(--color-error); }

/* ═══ 14. NOTIFICACIONES ══════════════════════════════════════════════════════════════ */

.contenedor-avisos {
    position: fixed;
    top: var(--esp-4);
    right: var(--esp-4);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    max-width: 42rem;
    pointer-events: none;
}

.notificacion {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-3);
    padding: var(--esp-4);
    background: var(--color-superficie);
    border-radius: var(--radio);
    border-left: 4px solid var(--color-detalle);
    box-shadow: var(--sombra-md);
    pointer-events: auto;
    animation: entrar-derecha 200ms ease;
}

@keyframes entrar-derecha {
    from { opacity: 0; transform: translateX(2rem); }
    to   { opacity: 1; transform: translateX(0); }
}

.notificacion.saliendo {
    animation: salir-derecha 180ms ease forwards;
}

@keyframes salir-derecha {
    to { opacity: 0; transform: translateX(2rem); }
}

.notificacion--exito       { border-left-color: var(--color-exito); }
.notificacion--exito .icono{ color: var(--color-exito); }
.notificacion--error       { border-left-color: var(--color-error); }
.notificacion--error .icono{ color: var(--color-error); }
.notificacion--advertencia { border-left-color: var(--color-advertencia); }
.notificacion--advertencia .icono { color: var(--color-advertencia); }
.notificacion--info        { border-left-color: var(--color-detalle); }
.notificacion--info .icono { color: var(--color-detalle); }

.notificacion-contenido { flex: 1; min-width: 0; }
.notificacion-titulo    { font-weight: 600; margin-bottom: 2px; }
.notificacion-texto     { font-size: var(--texto-sm); color: var(--color-texto-suave); word-wrap: break-word; }

/* ═══ 15. LÍNEA DE TIEMPO DE AUDITORÍA ════════════════════════════════════════════════ */

.linea-tiempo {
    position: relative;
    padding-left: 3.6rem;
}

/* El hilo vertical que une los eventos */
.linea-tiempo::before {
    content: '';
    position: absolute;
    left: 1.55rem;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--color-detalle) 0%,
        var(--color-borde-fuerte) 12%,
        var(--color-borde-fuerte) 88%,
        var(--color-secundario) 100%);
}

.evento {
    position: relative;
    margin-bottom: var(--esp-4);
}

.evento:last-child { margin-bottom: 0; }

/* Punto del evento sobre el hilo */
.evento-punto {
    position: absolute;
    left: -3.6rem;
    top: 0.2rem;
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--color-superficie);
    border: 2px solid var(--color-borde-fuerte);
    color: var(--color-neutral);
    z-index: 1;
}

.evento-punto .icono { font-size: 1.7rem; }

.evento-cuerpo {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: var(--esp-3) var(--esp-4);
    transition: box-shadow var(--transicion), border-color var(--transicion);
}

.evento-cuerpo:hover { box-shadow: var(--sombra); }

.evento-titulo {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--color-secundario);
    margin-bottom: var(--esp-1);
}

.evento-hora {
    font-size: var(--texto-xs);
    color: var(--color-neutral);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.evento-detalle {
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-1) var(--esp-3);
}

.evento-detalle span { display: inline-flex; align-items: center; gap: var(--esp-1); }

/* Un evento fallido se distingue de inmediato */
.evento.con-error .evento-punto {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-tenue);
}

.evento.con-error .evento-cuerpo { border-color: rgba(193, 57, 57, 0.35); }

/* Eventos de apertura y cierre de sesión, más marcados que el resto */
.evento.hito .evento-punto {
    background: var(--avatar-fondo);
    border-color: var(--avatar-fondo);
    color: var(--avatar-texto);
}

.evento.hito .evento-cuerpo {
    background: var(--color-secundario-tenue);
    border-color: var(--color-secundario);
}

/* Comparación entre el estado anterior y el posterior */
.comparacion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-3);
    margin-top: var(--esp-3);
}

.comparacion-bloque {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-chico);
    overflow: hidden;
}

.comparacion-bloque h5 {
    margin: 0;
    padding: var(--esp-2) var(--esp-3);
    background: var(--color-superficie-hundida);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral);
    border-bottom: 1px solid var(--color-borde);
}

.comparacion-bloque pre {
    margin: 0;
    padding: var(--esp-3);
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: var(--texto-xs);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 24rem;
    overflow-y: auto;
    color: var(--color-texto);
}

.comparacion-bloque--anterior { border-color: rgba(193, 57, 57, 0.3); }
.comparacion-bloque--anterior h5 { background: var(--color-error-tenue); color: var(--aviso-error-texto); }

.comparacion-bloque--nuevo { border-color: rgba(0, 120, 83, 0.3); }
.comparacion-bloque--nuevo h5 { background: var(--color-detalle-tenue); color: var(--aviso-info-texto); }

/* Resumen de la sesión auditada */
.resumen-sesion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--esp-3);
    margin-bottom: var(--esp-5);
}

.resumen-dato {
    padding: var(--esp-3);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    text-align: center;
}

.resumen-dato .valor {
    display: block;
    font-size: var(--texto-xl);
    font-weight: 700;
    color: var(--color-secundario);
    line-height: 1.2;
}

.resumen-dato .etiqueta {
    font-size: var(--texto-xs);
    color: var(--color-neutral);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ═══ 16. PAGINACIÓN ══════════════════════════════════════════════════════════════════ */

.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    flex-wrap: wrap;
    padding: var(--esp-3) var(--esp-4);
    border-top: 1px solid var(--color-borde);
    font-size: var(--texto-sm);
    color: var(--color-neutral);
}

.paginacion-controles { display: flex; align-items: center; gap: var(--esp-1); }

/* ═══ 17. CARGA Y ESTADOS VACÍOS ══════════════════════════════════════════════════════ */

.cargando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--esp-3);
    padding: var(--esp-7) var(--esp-4);
    color: var(--color-neutral);
}

.girador {
    width: 4rem;
    height: 4rem;
    border: 3px solid var(--color-borde);
    border-top-color: var(--color-detalle);
    border-radius: 50%;
    animation: girar 800ms linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.sin-datos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-7) var(--esp-4);
    text-align: center;
    color: var(--color-neutral);
}

.sin-datos .icono { font-size: 5.6rem; color: var(--color-borde-fuerte); }
.sin-datos h4 { color: var(--color-texto-suave); font-weight: 600; }
.sin-datos p { max-width: 42rem; margin: 0; font-size: var(--texto-sm); }

/* ═══ 18. PANTALLA DE INGRESO ═════════════════════════════════════════════════════════ */

.ingreso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-fondo);
}

/* Panel izquierdo con la identidad institucional */
.ingreso-presentacion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--esp-5);
    padding: var(--esp-7);
    background: linear-gradient(145deg, var(--marca-degradado-1) 0%, var(--marca-degradado-2) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Detalle decorativo sutil, en el verde de acento */
.ingreso-presentacion::after {
    content: '';
    position: absolute;
    width: 46rem;
    height: 46rem;
    right: -16rem;
    bottom: -18rem;
    border-radius: 50%;
    background: var(--color-detalle);
    opacity: 0.16;
}

.ingreso-presentacion > * { position: relative; z-index: 1; }

.ingreso-presentacion h1 {
    color: #fff;
    font-size: 3.6rem;
    line-height: 1.15;
    max-width: 20ch;
}

.ingreso-presentacion p {
    font-size: var(--texto-md);
    color: rgba(255, 255, 255, 0.85);
    max-width: 44ch;
    margin: 0;
}

.ingreso-caracteristicas {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    margin-top: var(--esp-4);
}

.ingreso-caracteristicas li {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    font-size: var(--texto-base);
    color: rgba(255, 255, 255, 0.92);
}

.ingreso-caracteristicas .icono { color: #9fd9bf; }

/* Panel derecho con el formulario */
.ingreso-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--esp-6);
}

.ingreso-caja {
    width: 100%;
    max-width: 42rem;
    display: flex;
    flex-direction: column;
    gap: var(--esp-5);
}

.ingreso-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-3);
    text-align: center;
}

.ingreso-logo img { height: 5.6rem; width: auto; }

.ingreso-logo h2 { font-size: var(--texto-xl); }

.ingreso-logo p {
    margin: 0;
    font-size: var(--texto-base);
    color: var(--color-neutral);
}

/* Separador "o" entre el ingreso por dominio y el alterno */
.separador {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    color: var(--color-neutral);
    font-size: var(--texto-sm);
}

.separador::before,
.separador::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-borde-fuerte);
}

/* Bloque plegable del ingreso alterno */
.alterno-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    width: 100%;
    padding: var(--esp-3);
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--texto-base);
    color: var(--color-secundario);
    cursor: pointer;
    border-radius: var(--radio);
    transition: background-color var(--transicion);
}

.alterno-titulo:hover { background: var(--color-secundario-tenue); }

.alterno-titulo .chevron { transition: transform var(--transicion); font-size: 1.8rem; }
.alterno-titulo[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.alterno-cuerpo { display: none; }
.alterno-cuerpo.abierto { display: block; }

.ingreso-pie {
    text-align: center;
    font-size: var(--texto-xs);
    color: var(--color-neutral);
}

/* ═══ 19. PESTAÑAS ════════════════════════════════════════════════════════════════════
   Las usa la ficha del catálogo de Personal: "Generales" y "Competencias". */

.pestanias {
    display: flex;
    gap: var(--esp-1);
    flex-wrap: wrap;
    border-bottom: 2px solid var(--color-borde);
    margin-bottom: var(--esp-4);
}

.pestania {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-4);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: var(--fuente);
    font-size: var(--texto-base);
    font-weight: 600;
    color: var(--color-neutral);
    cursor: pointer;
    border-radius: var(--radio-chico) var(--radio-chico) 0 0;
    transition: color var(--transicion), background-color var(--transicion),
                border-color var(--transicion);
}

.pestania:hover:not(:disabled) {
    color: var(--color-secundario);
    background: var(--color-secundario-tenue);
}

.pestania.activa {
    color: var(--color-secundario);
    border-bottom-color: var(--color-detalle);
}

/* Pestaña que existe en el sistema actual pero no se migra en esta versión: se deja a la
   vista y atenuada, para que el usuario sepa que no se perdió, igual que en el menú. */
.pestania.no-disponible {
    color: var(--color-borde-fuerte);
    cursor: not-allowed;
}

.pestania.no-disponible .icono-pendiente {
    font-size: 1.4rem;
    color: var(--color-borde-fuerte);
}

/* ═══ 20. FICHA DE UN REGISTRO ════════════════════════════════════════════════════════ */

/* Lista de pares etiqueta/valor. Se usa en las consultas y en la ficha de Personal. */
.ficha-datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--esp-2) var(--esp-4);
    margin: 0;
}

.ficha-datos dt {
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--color-neutral);
}

.ficha-datos dd { margin: 0; word-break: break-word; }

/* Encabezado de la ficha: fotografía, estatus y datos del trabajador */
.ficha-encabezado {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: var(--esp-4);
    margin-bottom: var(--esp-4);
    align-items: start;
}

.ficha-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-4);
    min-width: 18rem;
}

.ficha-estatus,
.ficha-fechas { min-width: 0; }

/* Dos columnas para los paneles de la pestaña "Generales" */
.rejilla--dos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
    gap: var(--esp-4);
    align-items: start;
}

/* Un elemento de rejilla mide por omisión al menos lo que su contenido, así que una tabla
   ancha ensancha la columna y con ella la página entera, aunque el .tabla-contenedor ya
   sepa desplazarse. Con min-width en cero la columna manda y el desplazamiento ocurre
   dentro de la tabla, que es donde debe. */
.rejilla--dos > * { min-width: 0; }

.subtitulo-bloque {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: var(--texto-base);
    font-weight: 600;
    color: var(--color-secundario);
    margin: 0 0 var(--esp-2);
}

/* ═══ 21. FOTOGRAFÍA DEL TRABAJADOR ═══════════════════════════════════════════════════ */

.foto-marco {
    width: 14rem;
    height: 17rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--color-superficie-hundida);
    /* El borde distingue de un golpe de vista a un trabajador activo de uno dado de baja,
       igual que las clases fotopersonal-activo/inactivo del sistema anterior. */
    border: 3px solid var(--color-borde);
}

.foto-marco--activo   { border-color: var(--color-detalle); }
.foto-marco--inactivo { border-color: var(--color-error); }

.foto-marco img { width: 100%; height: 100%; object-fit: cover; }

.foto-marco--inactivo img { filter: grayscale(1); }

.foto-sin { font-size: 7rem; color: var(--color-borde-fuerte); }

/* El campo de archivo va oculto dentro de la etiqueta, que es la que se ve como botón. */
.foto-cargar { cursor: pointer; }

/* ═══ 22. CAMPOS DENTRO DE UNA TABLA ══════════════════════════════════════════════════
   Para rejillas editables, como la configuración por ciclo del catálogo de Funciones. */

.entrada-tabla {
    width: 12rem;
    padding: var(--esp-2) var(--esp-3);
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-chico);
    font-family: var(--fuente);
    font-size: var(--texto-base);
    color: var(--color-texto);
    background: var(--color-superficie);
    text-align: right;
}

.entrada-tabla:focus {
    outline: none;
    border-color: var(--color-detalle);
    box-shadow: 0 0 0 3px var(--color-detalle-tenue);
}

/* ═══ 23. TABLAS MAESTRO-DETALLE ══════════════════════════════════════════════════════
   El catálogo de Factores elige una función de una lista larga y captura su configuración
   al lado, así que la lista tiene que ser seleccionable y desplazarse por su cuenta sin
   estirar la página. */

.tabla--seleccionable tbody tr { cursor: pointer; }

.tabla tbody tr.seleccionada,
.tabla tbody tr.seleccionada:hover {
    background: var(--color-detalle-tenue);
    box-shadow: inset 3px 0 0 var(--color-detalle);
}

/* Contenedor con altura acotada: el encabezado de la tabla se queda fijo al desplazar. */
.tabla-contenedor--alta {
    max-height: 42rem;
    overflow-y: auto;
}

.tabla-contenedor--alta thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Rejilla de captura densa: hasta diez columnas de casillas en el ancho de media pantalla. */
.tabla--compacta thead th,
.tabla--compacta tbody td {
    padding: var(--esp-2) var(--esp-2);
    font-size: var(--texto-sm);
}

.tabla--compacta .entrada-tabla { width: 9rem; }

/* ═══ 24. ADAPTACIÓN A PANTALLAS PEQUEÑAS ═════════════════════════════════════════════ */

/* Tabletas */
@media (max-width: 1024px) {
    .ingreso { grid-template-columns: 1fr; }
    .ingreso-presentacion { display: none; }
    .comparacion { grid-template-columns: 1fr; }

    /* El selector de estilo deja solo la muestra de color: el ancho que libera lo aprovecha
       la ruta de navegación, que es lo que cambia al moverse por el portal. */
    .texto-tema { display: none; }

    /* La ficha pasa de tres columnas a la fotografía arriba y el resto debajo. */
    .ficha-encabezado { grid-template-columns: auto 1fr; }
    .ficha-fechas { grid-column: 1 / -1; }
}

/* Móviles: el menú se convierte en un panel deslizable que abre y cierra el
   botón de hamburguesa, conforme al requerimiento. */
@media (max-width: 768px) {
    .menu-lateral {
        transform: translateX(-100%);
        box-shadow: var(--sombra-lg);
    }

    .menu-lateral.abierto { transform: translateX(0); }

    .area-principal { margin-left: 0; }

    .boton-hamburguesa { display: inline-flex; }

    .encabezado { padding: 0 var(--esp-3); gap: var(--esp-2); }

    /* La ruta no se parte en varios renglones ni se recorta con puntos suspensivos: se
       desplaza en horizontal y app.js la deja mostrando el tramo final, que es la pantalla
       en la que está el usuario. En un encabezado de teléfono no cabe "casa > Catálogos >
       Personal", y partirlo en tres renglones se come la pantalla. */
    .ruta-lista {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ruta-lista::-webkit-scrollbar { display: none; }

    .ruta-lista li { flex-shrink: 0; }

    .ruta-enlace,
    .ruta-actual { font-size: var(--texto-base); padding: var(--esp-1); }

    .ruta-actual { overflow: visible; text-overflow: clip; }

    .encabezado-derecha { gap: var(--esp-2); }

    /* El selector de estilo deja solo el icono del tema en curso. */
    .texto-tema      { display: none; }
    .boton-tema .chevron { display: none; }

    /* La lista de estilos se ancla a los bordes de la pantalla en lugar de al botón: con
       22 rem de ancho mínimo se saldría del encabezado en un teléfono. */
    .menu-tema {
        position: fixed;
        top: calc(var(--alto-encabezado) + var(--esp-2));
        left: var(--esp-3);
        right: var(--esp-3);
        min-width: 0;
    }

    .rejilla-modulo { grid-template-columns: 1fr; }
    .tarjeta-modulo { padding: var(--esp-4); }

    /* En móvil el botón del usuario deja solo su inicial; el nombre, el perfil y el correo
       se consultan al desplegar su ficha, que es también donde está cerrar sesión. */
    .usuario-datos { display: none; }
    .usuario-firmado { padding: var(--esp-1); background: transparent; gap: var(--esp-1); }
    .usuario-firmado .chevron { display: none; }

    /* La ficha del usuario se ancla a los bordes de la pantalla, igual que la de estilos. */
    .menu-usuario {
        position: fixed;
        top: calc(var(--alto-encabezado) + var(--esp-2));
        left: var(--esp-3);
        right: var(--esp-3);
        min-width: 0;
    }

    /* La cinta de simulación se apila y deja de ser fija: en una pantalla pequeña
       ocuparía demasiado alto útil. */
    .cinta-simulacion {
        position: static;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--esp-2);
        padding: var(--esp-3);
        font-size: var(--texto-xs);
    }

    .cinta-simulacion .boton { width: 100%; justify-content: center; }
    .cinta-simulacion + .encabezado { top: 0; }

    .contenido { padding: var(--esp-3); }

    .encabezado-pantalla { flex-direction: column; align-items: stretch; gap: var(--esp-3); }
    .encabezado-pantalla .acciones { display: flex; gap: var(--esp-2); }
    .encabezado-pantalla .acciones .boton { flex: 1; }

    .barra-filtros { padding: var(--esp-3); }
    .barra-filtros .campo { flex: 1 1 100%; min-width: 0; }

    .modal { max-height: calc(100vh - 3rem); }
    .modal-cuerpo { padding: var(--esp-4); }
    .modal-pie { flex-direction: column-reverse; }
    .modal-pie .boton { width: 100%; }

    .contenedor-avisos {
        left: var(--esp-3);
        right: var(--esp-3);
        max-width: none;
    }

    .formulario-rejilla { grid-template-columns: 1fr; }

    /* La ficha del trabajador se apila por completo y la fotografía se centra. */
    .ficha-encabezado { grid-template-columns: 1fr; }
    .ficha-foto { min-width: 0; }
    .rejilla--dos { grid-template-columns: 1fr; }

    /* Las pestañas se desplazan en horizontal en vez de partirse en varios renglones. */
    .pestanias {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .pestania { flex: 0 0 auto; padding: var(--esp-3); font-size: var(--texto-sm); }

    .resumen-sesion { grid-template-columns: repeat(2, 1fr); }

    .linea-tiempo { padding-left: 2.8rem; }
    .linea-tiempo::before { left: 1.15rem; }
    .evento-punto { left: -2.8rem; width: 2.4rem; height: 2.4rem; }
    .evento-punto .icono { font-size: 1.4rem; }

    .paginacion { justify-content: center; }
}

@media (max-width: 420px) {
    .resumen-sesion { grid-template-columns: 1fr; }
}

/* ═══ IMPRESIÓN ═══════════════════════════════════════════════════════════════════════
   La pantalla de Auditoría se imprime como evidencia, así que conviene que salga limpia. */
@media print {
    .menu-lateral,
    .encabezado,
    .barra-filtros,
    .contenedor-avisos,
    .boton,
    .boton-icono,
    .paginacion { display: none !important; }

    .area-principal { margin-left: 0; }
    .contenido { padding: 0; }
    body { background: #fff; }
    .tarjeta, .evento-cuerpo { box-shadow: none; border-color: #ccc; }
    .evento { break-inside: avoid; }
}