/* ============================================================
   SISTEMA DE DISEÑO  —  SKG Corp® 2026

   Capa de diseño compartida por DOS aplicaciones distintas:

     Incidencias      /consola · /reportar · /admin
     Agenda médica    /agenda

   Comparten identidad, no funcionalidad: el mismo brandbook, las mismas
   fichas de color, la misma tipografía y los mismos componentes, para que un
   usuario reconozca la casa al abrir cualquiera de las dos. Lo que NO
   comparten es navegación: ninguna enlaza a la otra, y este archivo no debe
   usarse para acercarlas. Si un día hay que saltar de una a otra, es una
   decisión de producto, no de diseño.

   ── DE DÓNDE SALE CADA COSA ────────────────────────────────────────────────
   Brandbook SKG Corp 2026 y "SKG CORP_PALETA DE COLOR", ambos del equipo
   interno de Diseño (Eilyn Ricardez, Erick Ibarra, Alejandro Hernández).

     Paleta principal    Blank Canvas  #F2F2F2   PANTONE Cool Gray 1C
                         Order Black   #0A0A0A   PANTONE Black 3C
                         Corporate Blue #00002A  PANTONE 534C
     Paleta secundaria   Horizon Blue  #CAD3E4   PANTONE 537C
                         Focus Orange  #FFAF00   PANTONE 2010 C
     Tipografía          Archivo, de Omnibus-Type
     Grilla              módulos pares con medianil constante de 10 px

   ── LAS DOS REGLAS QUE NO SE NEGOCIAN ──────────────────────────────────────
   1. Ningún color literal fuera de este bloque :root. Si un tono no está
      aquí, no existe. La marca cambió una vez y va a volver a cambiar; la
      única razón por la que esa migración es barata es que el valor vive en
      un solo lugar. Los mismos valores están replicados en tema.js porque
      Tailwind necesita configurarse desde JavaScript: verificar-tokens.js
      comprueba que las dos copias coincidan y falla si alguien mueve una sola.
   2. Focus Orange es relleno, filete y anillo de foco. Nunca texto SOBRE
      SUPERFICIE CLARA: ahí da 1.65:1 y es ilegible. Para escribir en clave
      ámbar sobre claro existe --atencion, el mismo matiz llevado a 6.09:1.
      Sobre el cromo azul marino sí es texto, y sólo ahí: da 11.13:1 y es lo
      que hace que "Exportar historial" siga siendo la acción principal de la
      barra sin necesidad de un recuadro relleno. verificar-tokens.js comprueba
      las dos mitades de la regla: que cumpla sobre azul y que NO llegue a 4.5:1
      sobre ninguna de las tres superficies claras.

   ── CONTRASTE ──────────────────────────────────────────────────────────────
   Cada pareja de este archivo se midió antes de escribirla, no se aprobó a
   ojo. Peor caso de texto secundario: 4.55:1 sobre Horizon Blue. Peor caso de
   filete de control: 3.12:1 sobre el fondo de página. Ambos por encima del
   mínimo AA (4.5:1 texto, 3:1 no-texto).
   ============================================================ */

:root {
    /* ── Color de marca ─────────────────────────────────────────────── */
    --lienzo:    #F2F2F2;   /* Blank Canvas   · superficie de panel y texto sobre cromo */
    --tinta:     #0A0A0A;   /* Order Black    · tinta de lectura */
    --azul:      #00002A;   /* Corporate Blue · cromo oscuro, titulares */
    --horizonte: #CAD3E4;   /* Horizon Blue   · superficie de énfasis */
    --foco:      #FFAF00;   /* Focus Orange   · acento único, solo relleno */

    /* ── Color derivado ─────────────────────────────────────────────────────
       Los cinco tonos de marca no alcanzan para una pantalla densa: falta el
       suelo de la página, el texto secundario, el filete de un campo. Todos
       los derivados salen de mezclar Corporate Blue o Horizon Blue con blanco,
       así que la escala completa es un solo color visto a distintas fuerzas y
       no una paleta paralela.

       Nota sobre el suelo: la primera versión apilaba tres blancos casi
       iguales (1.05 y 1.08 de contraste entre escalones) y el borde del panel
       desaparecía. Ahora el suelo se separa por MATIZ además de por
       luminosidad: es Horizon Blue diluido al 63%, y contra el panel neutro
       da 1.15 con un cambio de temperatura que sí se percibe. */
    --fondo:    #DDE3EE;    /* suelo de la página */
    --apunte:   #585874;    /* texto secundario · 4.55:1 en la peor superficie */
    --tenue:    #63637D;    /* texto terciario · 4.51:1 sobre el fondo de página.
                               No se usa sobre Horizon Blue: ahí cae a 3.86:1. */
    --borde:    #7D7D93;    /* filete de control · 3.12:1 en la peor superficie */
    --filete:   #CCCCD4;    /* divisor decorativo, no delimita controles */
    --contorno: #5B5F7E;    /* filete de botón sobre cromo oscuro · 3.27:1 */
    --velo:     #2C2E53;    /* superficie hundida dentro del cromo oscuro */
    /* Las tarjetas del cascarón OSCURO —Finanzas y Métricas de la intranet—, y
       sólo de él. Son Blank Canvas al 4% y al 12% sobre Order Black, escritos
       en claro para que vivan aquí: 1.07:1 y 1.31:1 contra el negro, que es lo
       que una superficie y su filete tienen que ser —se notan, no gritan—. Se
       pidieron #09090B y #1F1F23 y el primero es MÁS oscuro que Order Black
       (1.00:1): no se habría visto. Aprobado por Orlando el 1 de octubre de 2026. */
    --alzado:         #131313;
    --alzado-filete:  #262626;

    /* ── Color semántico ────────────────────────────────────────────────────
       Cuatro estados, no cuatro adornos: en una consola de SLA el color es el
       dato que se lee de reojo. Se llevaron a clave fría para convivir con el
       azul marino, y el ámbar de "atención" es Focus Orange oscurecido, así
       que el estado que pide acción es literalmente el color de marca.
       Cada par texto/relleno pasa 4.5:1, y cada texto pasa 4.5:1 sobre las
       tres superficies claras del sistema. */
    --critico:        #A31621;   --critico-fondo:  #F4E3E4;
    --atencion:       #7D5201;   --atencion-fondo: #FFEDC7;
    --curso:          #2F4B7C;   --curso-fondo:    #E4E8EE;
    --listo:          #1E674C;   --listo-fondo:    #DDE8E4;

    /* Variante de crítico para escribir SOBRE el cromo azul marino, donde el
       rojo oscuro se hunde. Se calibró a 6:1 y no a 4.5:1 porque el texto que
       la usa mide 11 px: el mínimo justo no basta a ese tamaño. Los otros tres
       estados no necesitan variante clara sobre cromo: Focus Orange ya da
       11:1 para atención y Horizon Blue 13.5:1 para lo neutro. */
    --critico-claro:  #C8747A;

    /* ── Gráficas ───────────────────────────────────────────────────────────
       Las gráficas usaban los tonos de TEXTO de cada estado: cuatro matices
       saturados y oscuros —rojo, ámbar, azul, verde— a pleno valor sobre un
       suelo gris azulado. En una ficha de 11 px eso es una señal; en un bloque
       de 200 px de barra es un cartel, y cuatro carteles de matiz distinto en
       la misma pantalla no conviven con nada.

       Dos escalas, y la elección entre ellas es de contenido, no de gusto:

       · Lo que sólo es CANTIDAD —tickets por categoría, carga por especialista—
         no necesita matiz. Va en Corporate Blue diluido en Blank Canvas: la
         misma escala de grises azulados del resto del sistema, así que no puede
         pelearse con nada porque no aporta matiz nuevo. Tres escalones, que son
         los que se distinguen entre sí (2.2:1 y 1.3:1 el uno del otro; con más
         escalones dejarían de leerse como distintos).

       · Lo que es ESTADO —la dona de estados, el cumplimiento por especialista—
         sí conserva su matiz, porque ahí el color ES el dato y ya significa lo
         mismo en las fichas de la tabla. Lo que baja es la saturación: cada
         relleno es su tono de estado a medio camino de su relleno claro.

       El punto de corte no es estético: cada relleno se calibró por bisección
       al tono MÁS CLARO que aún da 3:1 contra el suelo de página, que es donde
       las gráficas viven ahora que no llevan caja. 3:1 es lo que pide WCAG
       1.4.11 para un objeto gráfico que hay que interpretar, y una barra o un
       sector lo son. Peor caso: 3.04:1 contra el suelo, 3.50:1 contra el panel.

       Y como cada relleno ya cumple por sí solo, el filete que separa sectores
       en la dona es del color del suelo: separa sin dibujar. El filete oscuro
       de 2 px que llevaba antes era lo único que se veía. */
    --grafo-fuerte:   #353556;
    /* El cuarto escalón lo pidió la barra apilada del ticket por rubro, en
       Socios: son CUATRO categorías —consulta, procedimiento, farmacia,
       cabina— y la escala tenía tres. Va entre fuerte y medio, así que cumple
       el 3:1 de sobra; el que estaba calibrado al límite es el claro. */
    --grafo-hondo:    #4F4F66;
    --grafo-medio:    #6A6A82;
    --grafo-claro:    #7F7F93;

    --grafo-critico:  #C2646C;
    --grafo-atencion: #9F7B35;
    --grafo-curso:    #6E81A3;
    --grafo-listo:    #548B77;

    /* ── Marca ajena ────────────────────────────────────────────────────────
       El verde de WhatsApp. No es nuestro y no se puede sustituir por un tono
       de la casa: en un botón que abre WhatsApp, el verde ES la señal de a
       dónde lleva. Vive aquí como ficha, y no suelto en la pantalla, para que
       quede claro que es una excepción declarada y no una fuga de color. */
    --whatsapp:       #25D366;
    --whatsapp-tinta: #0B141A;   /* tinta oficial de WhatsApp · 9.38:1 sobre su verde */

    /* ── Espacio ────────────────────────────────────────────────────────────
       El brandbook fija un medianil de 10 px y módulos en números pares. La
       escala es esa: múltiplos de 10, con medio paso de 5 px para el relleno
       interior de controles. No es la escala de 4 px que trae Tailwind de
       fábrica, y esa es justamente la idea: el ritmo de la pantalla es el
       ritmo de la grilla de marca. */
    --e1:  5px;
    --e2: 10px;    /* medianil */
    --e3: 15px;
    --e4: 20px;
    --e6: 30px;
    --e8: 40px;
    --e12: 60px;

    /* ── Tipografía ─────────────────────────────────────────────────────────
       Archivo para todo lo que se opera: datos, tablas, controles, rótulos.
       Una pantalla de trabajo no se lee en serif.

       La micro-etiqueta subió de 10 a 11 px. Diez píxeles con 700 de peso y
       versalitas era legible en el monitor de gerencia y no en la tableta de
       recepción a contraluz. */
    --fuente: 'Archivo', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    /* ── Display ────────────────────────────────────────────────────────────
       El brandbook nombra UNA tipografía: Archivo. Probé traer una didona para
       los títulos, imitando el "Corp" del logotipo, y no era del manual: esa
       serif es parte del dibujo del logotipo, no una tipografía declarada.

       El display se queda en Archivo y se distingue por el EJE DE ANCHO, que la
       versión variable trae de fábrica (62 a 125). El "SKG" del logotipo es una
       grotesca ancha y pesada, así que expandir Archivo acerca el título a las
       letras del logotipo en vez de alejarlo. Una familia, dos anchos. */
    --fuente-display: var(--fuente);
    --ancho-display: 118;   /* eje wdth: 100 es normal, 125 el máximo */

    /* ── Mono ───────────────────────────────────────────────────────────────
       El brandbook no declara una, y por eso NO se descarga ninguna: son las
       monoespaciadas que ya trae cada sistema. La pidió Orlando el 1 de octubre
       de 2026 para la frase de apoyo del acceso, y es la misma que llevarán los
       códigos, precios y existencias del catálogo. Es para cifras y rótulos
       cortos, nunca para leer un párrafo. */
    --fuente-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

    /* ── Escala ─────────────────────────────────────────────────────────────
       La escala anterior tenía ocho pasos entre 11 y 34 px, todos cercanos: sin
       saltos no hay jerarquía, y la pantalla se leía plana aunque cada tamaño
       estuviera bien elegido. Esta tiene menos pasos y más distancia entre
       ellos, que es de donde sale la jerarquía de verdad.

       El display es fluido para no partir el título en dos renglones en un
       portátil de 13 pulgadas ni quedarse chico en el monitor de dirección. */
    --t-micro:   11px;   /* cejillas y etiquetas */
    --t-fino:    12px;   /* notas al pie, ayudas */
    --t-dato:    13px;   /* celdas de tabla */
    --t-base:    15px;   /* cuerpo */
    --t-guia:    19px;   /* subtítulos */
    --t-titulo:  24px;   /* título de sección */
    --t-cifra:   34px;   /* métrica */
    --t-mayor:   clamp(40px, 5vw, 58px);   /* métrica principal */
    --t-display: clamp(34px, 4.2vw, 50px); /* título de pantalla, en didona */

    --traza-marca:   0.16em;   /* versalitas anchas, del logotipo */
    --traza-cejilla: 0.22em;   /* cejilla: más abierta todavía, es un rótulo */
    --traza-dato:    0.02em;
    --traza-cifra:  -0.02em;   /* las cifras grandes se cierran, no se abren */

    /* Las mismas versalitas, apretadas, sólo para las dos filas de rótulos del
       cromo en teléfono. Con 0.16em los tres rótulos de acción medían 320 px en
       330 disponibles y uno se iba al renglón de abajo: 33 px más de barra por
       un espaciado. A 0.08em miden 288 y caben los tres. La alternativa era
       abreviar los rótulos, y un rótulo abreviado se entiende peor que un
       rótulo un poco más apretado. */
    --traza-corta:   0.08em;

    /* ── Trazo ──────────────────────────────────────────────────────────────
       Radio cero en todo el sistema, sin excepción para botones ni campos.
       La identidad es de grilla y ángulo recto ("orden, consistencia y
       precisión", brandbook pág. 15); una esquina redondeada la contradice.
       El único círculo del sistema es el punto de estado, que es una forma
       con significado, no un radio. */
    --filo: 0;
    --pelo: 1px;

    /* ── Movimiento ─────────────────────────────────────────────────────────
       Una sola duración y una sola curva. La curva sale rápido y frena, que
       es lo que hace que un cambio de estado se sienta mecánico y no elástico:
       esto es una herramienta de trabajo, no una animación de portada. */
    --paso: 150ms;
    --curva: cubic-bezier(.2, .6, .3, 1);
}

/* ============================================================
   BASE
   ============================================================ */

.num,
.tabla td,
.tabla th {
    font-variant-numeric: tabular-nums;
}

/* Suaviza el trazo de Archivo, que es geométrica y sin esto se ve dura */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Con algo fijo arriba, cualquier salto a un ancla —el "Ir al contenido" del
   teclado, entre otros— aterrizaba con el destino escondido detrás. Esto
   reserva su altura.

   Bajó de 160 px a 60: lo que se queda arriba al desplazar ya no es la barra
   entera, sólo la fila de destinos, y 160 px dejaban el ancla a media pantalla
   por un hueco que nada ocupa. Los 60 cubren la fila más alta de las dos
   aplicaciones con un margen de holgura. */
html {
    scroll-padding-top: 60px;
}

/* ============================================================
   ANILLO DE FOCO  —  la firma del sistema

   Focus Orange marcando el foco del teclado: el color se llama así y es
   exactamente para lo que sirve. Antes de esto las cuatro pantallas tenían
   cero reglas de :focus-visible, así que navegar con Tab era navegar a ciegas.

   Va en dos tonos por obligación, no por gusto: Focus Orange sobre superficie
   clara da 1.65:1 y no cumple el mínimo de 3:1 que pide WCAG 1.4.11 para un
   indicador de foco. El aro exterior en azul marino aporta el contraste
   (13.5:1 en la peor superficie) y la banda naranja interior aporta la marca
   (11:1 contra ese azul). Los dos juntos cumplen y se reconocen de lejos.

   El aro va en "outline" y la banda en "box-shadow" a propósito: outline no
   lo recorta un ancestro con overflow hidden, así que si la banda se pierde
   dentro de una tabla con scroll, el indicador que cumple sigue ahí.
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--foco);
}

/* Dentro del cromo oscuro se invierte: el azul del aro sería invisible sobre
   azul, así que el naranja pasa a ser el aro exterior. */
.cromo a:focus-visible,
.cromo button:focus-visible,
.cromo input:focus-visible,
.cromo select:focus-visible,
.cromo [tabindex]:focus-visible {
    outline-color: var(--foco);
    box-shadow: 0 0 0 2px var(--azul);
}

/* ── LA LISTA DE UN SELECT DENTRO DEL CROMO OSCURO ──────────────────────────
   Un control del cromo hereda texto claro —.boton-desnudo va en Horizon Blue,
   que es lo correcto sobre azul marino—. Pero la lista desplegable de un
   <select> no la dibuja esta hoja: la dibuja el sistema operativo, sobre su
   propia superficie, que en Windows y en macOS es blanca. El resultado es
   Horizon Blue sobre blanco: 1.28:1, invisible, y las opciones sólo aparecen
   al pasar el cursor porque el resaltado sí trae fondo.

   Se arregla diciendo el color de las opciones a mano, que es lo único que el
   navegador respeta ahí dentro. Va en el sistema y no en la pantalla que lo
   descubrió —el reporte operativo, con su selector de mes— porque la trampa no
   es de esa pantalla: es de cualquier control del cromo que abra una lista
   nativa, y el siguiente que la ponga no va a saber que existe. */
.cromo select option {
    color: var(--tinta);
    background-color: var(--lienzo);
}

/* Y DONDE EL NAVEGADOR LO PERMITE, LA LISTA LA DIBUJA ESTA HOJA ENTERA.

   Lo de arriba arregla el contraste y deja el resto en manos del sistema
   operativo, que pinta la opción puesta con SU azul de selección: el único color
   saturado de toda la pantalla, en una lista de cuatro renglones, dentro de un
   reporte que se proyecta en una junta. Lo reportó Orlando el 30 de septiembre de
   2026 con una foto del selector de cuatrimestre.

   `appearance: base-select` saca el menú del sistema operativo y lo mete en la
   página: la lista pasa a ser un elemento más y se estila como todo lo demás. Pide
   las DOS declaraciones —el control y su `::picker()`—; con una sola no cambia
   nada.

   Va dentro de un @supports y no suelto, y eso es lo que hace que sea seguro: un
   navegador que no lo conozca descarta el bloque ENTERO y se queda exactamente con
   la regla de arriba, que es lo que hay hoy. Sin el @supports, el relleno y los
   márgenes de `option` sí se aplicarían dentro del menú nativo de algunos
   navegadores, y ahí no hay forma de ver qué quedó.

   Tres superficies y ninguna saturada, que es la escala de siempre: Blank Canvas
   en reposo, el suelo de la página bajo el cursor y Horizon Blue —«superficie de
   énfasis»— en la que está puesta. Con el mismo tono para el cursor y para la
   puesta se pierde cuál es la actual, que es lo único que esa lista tiene que
   decir.

   El peso hay que escribirlo: `option` hereda de `.boton`, que va en 700, así que
   sin esto las cuatro saldrían en negrita y la puesta no destacaría de ninguna
   manera. Por lo mismo el texto se alinea a la izquierda: `.boton` lo centra, y un
   menú con los renglones centrados no tiene margen por el que leerse. */
@supports (appearance: base-select) {
    .cromo select,
    .cromo ::picker(select) { appearance: base-select; }

    .cromo select { gap: var(--e1); }
    /* La flecha es la del control, no un glifo del sistema, y gira al abrir: es
       la única señal de que la lista está desplegada cuando el menú tapa el
       rótulo. */
    .cromo select::picker-icon { color: currentColor; transition: none; }
    .cromo select:open::picker-icon { transform: rotate(180deg); }

    .cromo ::picker(select) {
        background: var(--lienzo);
        border: var(--pelo) solid var(--borde);
        border-radius: 0;
        padding: 0;
        margin-top: var(--e1);
        box-shadow: none;
    }

    .cromo option {
        color: var(--tinta);
        background: var(--lienzo);
        font-weight: 400;
        text-align: left;
        padding: var(--e2) var(--e3);
        border-radius: 0;
        min-block-size: 0;
    }
    /* La palomita sobra: la superficie ya dice cuál está puesta, y un glifo más
       en cuatro renglones de versalitas es adorno. */
    .cromo option::checkmark { display: none; }
    .cromo option:hover:not(:checked),
    .cromo option:focus:not(:checked) { background: var(--fondo); }
    .cromo option:checked { background: var(--horizonte); font-weight: 700; }
}

/* El ratón no necesita anillo; el teclado sí. :focus-visible ya hace esa
   distinción, esto solo limpia el resto que dejan algunos navegadores. */
:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================
   MOVIMIENTO REDUCIDO

   Las cuatro pantallas declaraban 55 transiciones y ninguna respetaba la
   preferencia del sistema. En una clínica hay personal con sensibilidad al
   movimiento; y con "reducir movimiento" activado, una transición que no se
   corta es un incumplimiento, no un detalle.
   ============================================================ */

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

/* ============================================================
   CROMO  —  la barra superior compartida

   Las cuatro pantallas tenían su propio encabezado con las mismas partes y
   medidas distintas (mb-6 contra mb-6 sm:mb-8, emblema h-10 contra h-8,
   gap-4 contra gap-5). Eran cuatro copias derivando por separado. Ahora la
   apariencia vive aquí y el contenido en cada página.

   Va en Corporate Blue y no en negro: el azul marino es lo que distingue a
   esta marca de cualquier tablero oscuro, y contra el negro de la tinta da
   1.03, o sea que nunca se ve como un desajuste porque no llegan a tocarse.
   ============================================================ */

.cromo {
    background: var(--azul);
    color: var(--lienzo);
    padding: var(--e2) var(--e4);
    display: flex;
    flex-direction: column;
    gap: var(--e2);

    /* ── A todo el ancho y fija ──────────────────────────────────────────────
       La barra es hija directa del <body>, no del contenedor de ancho máximo:
       ahí dentro quedaba enmarcada por los cuatro lados, como una tarjeta, en
       vez de leerse como el cromo de la aplicación. El acolchado de la página
       vive ahora en el contenedor del contenido.

       ── QUÉ SE QUEDA ARRIBA AL DESPLAZAR ────────────────────────────────────
       Depende del tamaño de pantalla, y es el único sitio del sistema donde las
       dos versiones se comportan distinto a propósito:

         En navegador   la barra entera. El alto de la barra no le quita nada a
                        una pantalla ancha, y tener siempre a la vista el título,
                        la cuenta y las acciones vale más que 50 px.
         En teléfono    sólo la última fila, la de los destinos. Ahí esos mismos
                        50 px son un porcentaje de pantalla que se nota, y lo que
                        de verdad hace falta arriba son los tres destinos: el
                        logotipo y el título se leen una vez al abrir.

       El mecanismo del teléfono es sticky con desplazamiento NEGATIVO. Con
       top: -85px la barra sube con la página hasta que su borde superior queda
       85 px por encima del borde de la ventana, y ahí se clava: quedan a la
       vista los 41 px de abajo, que son exactamente la fila de destinos. No hace
       falta duplicar la tira ni sacarla del encabezado.

       El número no puede escribirse aquí porque cambia: el título ocupa uno o
       dos renglones según el ancho, y el botón de avisos aparece sólo si el
       navegador los admite. Lo mide marca.js y lo deja en --cromo-alza, sólo por
       debajo de 640 px. De ahí para arriba no escribe nada y manda el valor de
       reserva, 0, que es la barra completa. Si ese script no corriera, el
       teléfono se queda con la barra entera fija: se pierde compacidad, nunca la
       navegación.

       El z-index es 30: por debajo de los diálogos (50) y de la pantalla de
       carga (60), por encima de todo el contenido. */
    position: sticky;
    top: var(--cromo-alza, 0px);
    z-index: 30;
}

@media (min-width: 640px) {
    .cromo {
        padding: var(--e2) var(--e6);
    }
}

/* Fila de identidad: logotipo, filete, título y contexto */
.cromo-identidad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    flex-wrap: wrap;
}

.cromo-marca {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-width: 0;
}

/* ── El bloque de texto de la marca, y el arreglo de un desbordamiento ───────
   Aquí estaba el error que rompía el teléfono. El título lleva nowrap con
   puntos suspensivos para no empujar los botones a otro renglón, pero un hijo
   de un contenedor flex no baja de su ancho mínimo de contenido, y con nowrap
   ese mínimo es el rótulo COMPLETO: 319 px. Faltaba min-width en ESTE nivel
   —no basta ponerlo en .cromo-marca, hace falta en cada eslabón de la cadena—
   así que el bloque se plantaba en 319 px arrancando en x=135 y el documento
   medía 454 px de ancho en una pantalla de 360.

   De ahí salían los tres síntomas a la vez, que parecían tres fallas distintas
   y eran una: el desplazamiento horizontal que no debía existir; el recuadro de
   acceso descentrado y cortado, porque un elemento con position:fixed e inset:0
   se dimensiona contra el bloque contenedor inicial y en móvil ese bloque crece
   con el contenido —los 454 px, no los 360 de la pantalla—; y lo mismo en la
   pantalla de carga, con el logotipo fuera de eje.

   Con esto el título se recorta como estaba previsto y el documento vuelve a
   medir exactamente el ancho de la pantalla. */
.cromo-datos {
    min-width: 0;
}

/* El logotipo se sirve como imagen y no como trazo recoloreable: el brandbook
   prohíbe aplicarle otros colores, y una imagen que no se puede teñir es la
   forma más simple de que esa regla no se rompa por descuido. Positivo y
   negativo son dos archivos justamente para eso. */
.cromo-logo {
    height: 26px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* Área de protección del logotipo (brandbook pág. 7). El filete no puede
   pegarse al logotipo: ese aire es norma de marca, no margen suelto. */
.cromo-filete {
    width: var(--pelo);
    align-self: stretch;
    min-height: 34px;
    background: var(--contorno);
    flex-shrink: 0;
    margin-inline-start: var(--e1);
}

.cromo-titulo {
    font-size: var(--t-guia);
    font-weight: 600;
    letter-spacing: var(--traza-marca);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

@media (min-width: 640px) {
    .cromo-titulo { font-size: var(--t-titulo); }
    .cromo-logo   { height: 30px; }
}

.cromo-contexto {
    font-size: var(--t-fino);
    color: var(--horizonte);
    margin-top: var(--e1);
    line-height: 1.3;
}

/* ── Navegación ─────────────────────────────────────────────────────────────
   La tira de destinos de la aplicación de incidencias: consola, captura y
   administración. Las tres ya se enlazaban entre sí, pero cada pantalla
   ofrecía un juego distinto y con nombres distintos; aquí quedan iguales en
   las tres.

   La agenda de médicos NO usa esta tira: es una aplicación aparte, comparte la
   identidad visual pero no la navegación. Su encabezado lleva el mismo .cromo
   sin la fila de destinos.

   La pestaña actual se marca con Focus Orange y con aria-current, no solo con
   color: el estado tiene que llegar también a quien usa lector de pantalla. */
/* Columna derecha del cromo: acciones arriba, destinos abajo. Las dos filas
   comparten el mismo ancho, el de los botones, y por eso los destinos se
   reparten con space-between: el borde izquierdo del primer destino cae sobre
   el borde izquierdo de "Salir" y el derecho del ultimo sobre el de "Exportar".
   Esa coincidencia de bordes es lo que hace que se lea alineado y no suelto. */
.cromo-derecha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e2);
    flex-shrink: 0;
}

.cromo-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--e3);
    border-top: var(--pelo) solid var(--contorno);
    padding-top: var(--e1);
}

.cromo-nav a {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-marca);
    text-transform: uppercase;
    color: var(--horizonte);
    /* Relleno de un paso y no de uno y medio: la tira añade un renglón al cromo
       que antes no existía, y en la agenda ese renglón se le quita a la tabla.
       Con este relleno el destino mide 34 px de alto, por encima de los 24 px
       que pide WCAG 2.5.8 (AA). No llega a los 44 px del criterio AAA, que es
       una concesión consciente en una pantalla de escritorio con el espacio
       vertical contado. */
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: var(--e1) 0 calc(var(--e1) + 2px);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color var(--paso) var(--curva), border-color var(--paso) var(--curva);
    white-space: nowrap;
}

.cromo-nav a:hover {
    color: var(--lienzo);
}

.cromo-nav a[aria-current="page"] {
    color: var(--lienzo);
    border-bottom-color: var(--foco);
}

/* ── Acciones del cromo ─────────────────────────────────────────────────── */
/* Al perder el recuadro, los rótulos quedan a un hueco de distancia y nada
   más, así que el hueco es lo único que impide que se lean como una frase
   seguida: un paso de más en horizontal. Y se reparten con space-between por lo
   mismo que la fila de destinos de abajo: las dos filas comparten ancho, y así
   el primer rótulo de arriba cae sobre el primer destino y el último sobre el
   último. La simetría de la barra la sostiene esa coincidencia de bordes. */
.cromo-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1) var(--e4);
    align-items: center;
    justify-content: space-between;
}

/* Punto de estado de la conexión. Es el único círculo del sistema: aquí la
   forma redonda significa "señal", no es un radio decorativo. */
.punto-estado {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* ── El estado del enlace sólo aparece cuando hay algo que decir ─────────────
   Las cuatro pantallas mostraban "Enlazado · correo@…" de forma permanente. No
   es información: la sesión se abre una vez, no cambia sola, y quien está
   trabajando ya sabe con qué cuenta entró. Ocupaba un renglón en las cuatro y
   en el teléfono era además lo que desbordaba la caja.

   Lo que NO se va son los otros dos estados de esa misma línea: "Solo este
   equipo" en la consola y "Sin enlace con la consola" en captura significan que
   los reportes no están viajando, y eso hay que decirlo aunque cueste el
   renglón. De ahí que se oculte por clase y no borrando el elemento: el pintado
   pone .enlace-sin-novedad cuando todo está bien y la quita cuando no.

   La regla vive fuera de cualquier consulta de medios a propósito: el correo
   sobra igual en el teléfono y en el navegador.

   Y lleva !important, que es la única declaración con !important de todo el
   archivo. No es pereza: las dos líneas que oculta traen la utilidad "flex" de
   Tailwind en su atributo class, y sistema.css se carga ANTES del CDN a
   propósito —para que una utilidad pueda ganarle a un componente cuando hace
   falta—, así que ese display:flex gana por orden de cascada y la línea seguía
   pintándose. Comprobado midiendo: display calculado "flex" con la clase puesta.
   La alternativa era quitar "flex" del HTML y rehacer la fila con otro
   mecanismo, que es más código para el mismo resultado. */
.enlace-sin-novedad {
    display: none !important;
}

/* ============================================================
   BOTONES

   Tres variantes y ni una más: una acción principal, una secundaria y una
   destructiva. Cuando hay cuatro estilos de botón en una pantalla, dejan de
   comunicar jerarquía.
   ============================================================ */

.boton {
    font-family: var(--fuente);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-marca);
    text-transform: uppercase;
    padding: var(--e3) var(--e4);
    border: var(--pelo) solid transparent;
    border-radius: var(--filo);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    /* 44 px de alto mínimo: es el objetivo táctil que pide WCAG 2.5.5 y esta
       pantalla se usa con el dedo en recepción. */
    min-height: 44px;
    transition: background-color var(--paso) var(--curva),
                color var(--paso) var(--curva),
                border-color var(--paso) var(--curva),
                transform var(--paso) var(--curva);
}

/* Hundido al presionar. Un píxel, lo justo para que el dedo sienta respuesta
   en una tableta sin cursor que delate el estado. */
.boton:active {
    transform: translateY(1px);
}

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

/* Principal: Focus Orange con tinta encima, 10.73:1. El acento se gasta aquí
   y en el anillo de foco, en ningún otro lugar. */
.boton-principal {
    background: var(--foco);
    color: var(--tinta);
}

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

/* Secundario sobre superficie clara */
.boton-liso {
    background: transparent;
    color: var(--azul);
    border-color: var(--borde);
}

.boton-liso:hover:not(:disabled) {
    background: var(--azul);
    color: var(--lienzo);
    border-color: var(--azul);
}

/* Secundario sobre cromo oscuro */
.boton-cromo {
    background: transparent;
    color: var(--horizonte);
    border-color: var(--contorno);
}

.boton-cromo:hover:not(:disabled) {
    background: var(--lienzo);
    color: var(--azul);
    border-color: var(--lienzo);
}

/* ── Sin caja ────────────────────────────────────────────────────────────────
   Para las acciones del cromo: salir, activar avisos, exportar. Tres recuadros
   con filete y 44 px de alto, encima de una fila de destinos, hacían de la
   barra un panel de botones; y en la barra el espacio vertical es lo único que
   de verdad escasea. Sin caja, la acción es el rótulo y nada más.

   El acolchado horizontal se va a cero: no hay recuadro que separar del texto,
   así que cualquier acolchado ahí sólo separaría los rótulos entre sí, y de eso
   se encarga el hueco de .cromo-acciones. El vertical se queda en un paso para
   llegar a 24 px de alto de objetivo táctil, que es lo que pide WCAG 2.5.8 en
   nivel AA. Son los mismos 24 px de la fila de destinos, así que las dos filas
   se tocan igual de bien; el criterio AAA de 44 px se pierde a cambio de la
   compactación, y es una concesión consciente y no un descuido.

   Sin filete, la única señal de que el rótulo es pulsable es el propio rótulo
   —versalitas espaciadas, como los destinos de abajo— más el subrayado al
   pasar el cursor o al recibir el foco. Es el mismo lenguaje que ya usa la tira
   de navegación, así que la barra pasa a tener un solo tipo de control en vez
   de dos peleando. */
.boton-desnudo {
    background: transparent;
    border-color: transparent;
    color: var(--horizonte);
    padding: var(--e1) 0;
    min-height: 24px;
    text-decoration: none;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.boton-desnudo:hover:not(:disabled) {
    background: transparent;
    color: var(--lienzo);
    text-decoration: underline;
}

/* La acción principal conserva Focus Orange, ya no como relleno sino como
   tinta: es el único rótulo ámbar de la barra y sigue siendo lo que más
   contrasta contra el azul marino, 11.13:1. El acento pesa menos que cuando
   era un bloque relleno, que es justo lo que se pedía. */
.boton-desnudo-acento {
    color: var(--foco);
}

.boton-desnudo-acento:hover:not(:disabled) {
    color: var(--foco);
    text-decoration: underline;
}

/* El mismo botón sin caja, para superficie clara. Horizon Blue sobre panel da
   1.6:1 y desaparece, así que aquí la tinta es el azul de marca. */
.boton-desnudo-oscuro {
    color: var(--azul);
}

.boton-desnudo-oscuro:hover:not(:disabled) {
    background: transparent;
    color: var(--azul);
    text-decoration: underline;
}

.boton-peligro {
    background: transparent;
    color: var(--critico);
    border-color: var(--critico);
}

.boton-peligro:hover:not(:disabled) {
    background: var(--critico);
    color: var(--lienzo);
}

/* ============================================================
   PANELES

   Sin sombra y sin esquina redonda: el panel se define por su filete, igual
   que la grilla del brandbook define sus módulos por línea. Una sombra aquí
   sería elevación falsa, porque nada de esta pantalla flota.
   ============================================================ */

.panel {
    background: var(--lienzo);
    border: var(--pelo) solid var(--filete);
    border-radius: var(--filo);
}

.panel-cabeza {
    padding: var(--e2) var(--e3);
    border-bottom: var(--pelo) solid var(--filete);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    flex-wrap: wrap;
}

.panel-cuerpo {
    padding: var(--e3);
}

/* Bloque de énfasis: el dato que la pantalla quiere que se lea primero. */
.realce {
    background: var(--horizonte);
    border: var(--pelo) solid var(--borde);
    padding: var(--e2) var(--e3);
}

/* ============================================================
   ETIQUETAS Y DATOS
   ============================================================ */

.etiqueta {
    font-size: var(--t-micro);
    letter-spacing: var(--traza-marca);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
}

/* Etiqueta de un dato, en secundario, sobre superficie clara */
.etiqueta-apunte {
    color: var(--apunte);
}

.dato {
    font-size: var(--t-dato);
    color: var(--apunte);
    letter-spacing: var(--traza-dato);
}

.dato b,
.dato strong {
    color: var(--tinta);
    font-weight: 600;
}

.cifra {
    font-size: var(--t-cifra);
    font-weight: 600;
    line-height: 1;
    color: var(--azul);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   FICHAS DE ESTADO

   El color va acompañado de texto siempre. Un cuadro de color sin palabra
   deja fuera a quien no distingue el matiz, y en un tablero de SLA el estado
   no es información opcional.
   ============================================================ */

.ficha {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-marca);
    text-transform: uppercase;
    padding: 3px var(--e2);
    border: var(--pelo) solid currentColor;
    white-space: nowrap;
}

.ficha-critico  { color: var(--critico);  background: var(--critico-fondo); }
.ficha-atencion { color: var(--atencion); background: var(--atencion-fondo); }
.ficha-curso    { color: var(--curso);    background: var(--curso-fondo); }
.ficha-listo    { color: var(--listo);    background: var(--listo-fondo); }

/* Ficha neutra, para un estado que informa sin pedir nada */
.ficha-neutra   { color: var(--apunte);   background: var(--lienzo); border-color: var(--filete); }

/* ── Ficha sólida ───────────────────────────────────────────────────────────
   Relleno del tono de estado con texto claro encima, para cuando el estado
   tiene que gritar y no solo informar: un SLA ya vencido no puede verse igual
   que uno en plazo.

   Estas clases existen por una razón técnica además de la de diseño. Estas
   fichas se construyen en cadenas de JavaScript y se inyectan al repintar la
   tabla; con las utilidades de Tailwind desde CDN, el generador va detrás del
   DOM y durante uno o dos fotogramas la ficha aparece SIN fondo. Como el texto
   es claro, en ese instante la ficha se lee en blanco sobre blanco: invisible.
   Siendo clases de esta hoja, ya están resueltas antes de que el nodo exista. */
.ficha-solida {
    border-color: transparent;
    color: var(--lienzo);
}

.ficha-solida-critico  { background: var(--critico); }
.ficha-solida-atencion { background: var(--atencion); }
.ficha-solida-curso    { background: var(--curso); }
.ficha-solida-listo    { background: var(--listo); }
.ficha-solida-tinta    { background: var(--azul); }

/* Cifras dentro de una ficha: alinea las columnas de tiempo */
.ficha-num {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   CAMPOS

   Etiqueta encima, ayuda debajo, error debajo del todo. El marcador de
   posición nunca hace de etiqueta: desaparece justo cuando el usuario
   necesita confirmar qué estaba escribiendo.
   ============================================================ */

.bloque-campo {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}

.campo {
    width: 100%;
    font-family: var(--fuente);
    font-size: var(--t-base);
    color: var(--tinta);
    background: var(--lienzo);
    /* El filete de un campo es lo único que dice dónde se puede escribir, así
       que cumple el 3:1 de WCAG 1.4.11. El divisor decorativo (--filete) no
       llega a ese número y por eso no se usa aquí. */
    border: var(--pelo) solid var(--borde);
    border-radius: var(--filo);
    padding: var(--e2) var(--e2);
    min-height: 44px;
    transition: border-color var(--paso) var(--curva);
}

/* Variante compacta: listas de catálogo, donde hay decenas de campos a la vez
   y el tamaño de formulario grita. No cambia ni el color ni el filete. */
.campo-denso {
    font-size: var(--t-dato);
    padding: var(--e1) var(--e2);
    min-height: 38px;
}

.campo::placeholder {
    color: var(--apunte);
    opacity: 1;          /* Firefox lo aclara solo y rompe el contraste */
}

.campo:hover:not(:disabled) {
    border-color: var(--azul);
}

.campo:disabled {
    background: var(--fondo);
    color: var(--apunte);
    cursor: not-allowed;
}

.campo[aria-invalid="true"] {
    border-color: var(--critico);
    border-width: 2px;
}

.ayuda-campo {
    font-size: var(--t-fino);
    color: var(--apunte);
}

.error-campo {
    font-size: var(--t-fino);
    font-weight: 600;
    color: var(--critico);
}

/* En móvil el navegador hace zoom si el campo mide menos de 16 px, y ese zoom
   corre la pantalla de lado: es la misma molestia que se quiere evitar, entrando
   por otra puerta. Así que 16 px, que es el número exacto del que huye Safari.

   Estaba en --t-guia, 19 px, que son los subtítulos. Tres píxeles más de los que
   hacían falta, pero en el sitio donde más se notan: el campo de búsqueda de
   Cuentas y todo el formulario de Dar de alta quedaban en tamaño de subtítulo,
   con sus rótulos de 11 px al lado. De ahí que se leyera desproporcionado en
   teléfono y no en el escritorio.

   El caso denso también sube a 16. Suena al revés —es la variante compacta— pero
   por debajo de 16 paga el zoom, y un campo compacto que mueve la pantalla al
   tocarlo sale perdiendo. En teléfono los dos miden igual; la diferencia de alto
   y de relleno se conserva, que es de donde viene casi toda la sensación de
   compacto. */
@media (max-width: 639px) {
    .campo,
    .campo-denso {
        font-size: 16px;
    }

    /* Y el mismo suelo para cualquier cosa donde se escriba, lleve o no la clase
       del sistema. La consola tiene sus filtros con clases propias y su buscador
       estaba en 12 px: al tocarlo, el teléfono hacía zoom y la pantalla quedaba
       corrida de lado, que es exactamente lo que no debe pasar.

       Los desplegables quedan fuera a propósito. No abren teclado —no hay nada
       que escribir en ellos— y son los que van más apretados de ancho en la fila
       de filtros; subirlos no evitaría ningún zoom y sí estrecharía lo que se lee.

       16 fijo y no un máximo: hoy no hay en las cuatro pantallas un campo de
       escritura pensado más grande que esto, así que un cálculo sólo añadiría una
       regla que hay que descifrar para saber qué hace. */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    textarea {
        font-size: 16px;
    }
}

/* ============================================================
   TABLAS
   ============================================================ */

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

.tabla th {
    background: var(--azul);
    color: var(--lienzo);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-marca);
    text-transform: uppercase;
    text-align: left;
    padding: var(--e2);
    white-space: nowrap;
}

.tabla td {
    padding: var(--e2);
    border-bottom: var(--pelo) solid var(--filete);
    vertical-align: top;
}

.tabla tbody tr:hover {
    background: var(--fondo);
}

.tabla tbody tr[aria-selected="true"] {
    background: var(--horizonte);
}

/* Envoltura obligatoria para tabla ancha: el desbordamiento se resuelve aquí
   dentro y nunca en el cuerpo de la página. */
.tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   PESTAÑAS

   Un solo lenguaje de pestaña en todo el sistema: filete inferior en Focus
   Orange para la activa, texto apagado para las demás. Es exactamente el mismo
   recurso que marca la sección actual en .cromo-nav, así que "dónde estoy" se
   señala igual en la navegación entre pantallas y en la navegación dentro de
   una pantalla. Antes había tres lenguajes distintos: control segmentado con
   relleno blanco en administración, píldora rellena de color en la agenda, y
   nada compartido entre ellos.

   Se descartó la pestaña rellena: un bloque de color por pestaña es el gesto
   más común de tablero genérico y, con cuatro pestañas, mete cuatro rectángulos
   de peso visual compitiendo con el dato que se quiere leer.
   ============================================================ */

.pestanas {
    display: flex;
    flex-wrap: wrap;
    border-bottom: var(--pelo) solid var(--filete);
    gap: var(--e4);
}

.pestana {
    font-family: var(--fuente);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-marca);
    text-transform: uppercase;
    padding: var(--e2) 0;
    min-height: 44px;
    background: transparent;
    color: var(--apunte);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--filo);
    cursor: pointer;
    transition: color var(--paso) var(--curva), border-color var(--paso) var(--curva);
}

.pestana:hover {
    color: var(--azul);
}

/* Dos rótulos para la misma pestaña, largo y corto. En pantalla ancha se ve el
   largo; el teléfono cambia cuál, más abajo. Sirve para el caso en que el rótulo
   que se lee bien no cabe en la fila, y evita tener que acortarlo en los dos
   sitios: en el escritorio no hace falta. */
.rotulo-angosto { display: none; }

.pestana[aria-selected="true"] {
    color: var(--azul);
    border-bottom-color: var(--foco);
}

/* Sobre el cromo oscuro cambia solo el par de tonos del texto; el filete
   naranja y la mecánica son los mismos. */
.cromo .pestanas {
    border-bottom-color: var(--contorno);
}

/* Variante para cuando las pestañas van EN LÍNEA con los botones del cromo, no
   en su propia fila: pierden el filete inferior del grupo, que ahí no separa
   nada, y se aprietan al alto del botón vecino. */
.pestanas-cromo {
    border-bottom: 0;
    gap: var(--e3);
    align-items: center;
}

.pestanas-cromo .pestana {
    min-height: 44px;
    padding: 0;
}

.cromo .pestana {
    color: var(--horizonte);
}

.cromo .pestana:hover,
.cromo .pestana[aria-selected="true"] {
    color: var(--lienzo);
}

/* ============================================================
   ESTADOS DE CARGA Y DE VACÍO

   Faltaban los dos. Una tabla que aparece de golpe y una tabla vacía sin
   explicación son el mismo problema: la pantalla no dice en qué punto está.
   ============================================================ */

.esqueleto {
    background: var(--filete);
    animation: esqueleto-late 1.4s var(--curva) infinite;
}

@keyframes esqueleto-late {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

/* Reproduce la forma de una fila de tabla, no un círculo girando: el hueco
   tiene que tener el tamaño de lo que va a llegar. */
.esqueleto-linea {
    height: var(--t-dato);
    margin: var(--e1) 0;
}

.vacio {
    padding: var(--e6) var(--e4);
    text-align: center;
    color: var(--apunte);
    font-size: var(--t-base);
}

.vacio-titulo {
    color: var(--azul);
    font-size: var(--t-guia);
    font-weight: 600;
    margin-bottom: var(--e1);
}

/* ============================================================
   AVISOS EN LÍNEA

   Sin apología y sin vaguedad: qué pasó y qué hacer. El borde izquierdo
   grueso es lo que los distingue de un panel normal de un vistazo.
   ============================================================ */

.aviso {
    border-inline-start: 3px solid;
    padding: var(--e2) var(--e3);
    font-size: var(--t-dato);
    line-height: 1.45;
}

.aviso-critico  { border-color: var(--critico);  background: var(--critico-fondo);  color: var(--critico); }
.aviso-atencion { border-color: var(--foco);     background: var(--atencion-fondo); color: var(--atencion); }
.aviso-curso    { border-color: var(--curso);    background: var(--curso-fondo);    color: var(--curso); }
.aviso-listo    { border-color: var(--listo);    background: var(--listo-fondo);    color: var(--listo); }

/* ============================================================
   UTILIDADES DE GRILLA

   El medianil de 10 px del brandbook, disponible como clase para no volver a
   escribir un valor arbitrario cada vez.
   ============================================================ */

.rejilla {
    display: grid;
    gap: var(--e2);
}

.tira {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
}

.pila {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
}

/* Solo para lectores de pantalla: texto que da contexto sin ocupar 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;
}

/* Salto al contenido: primer elemento enfocable de cada pantalla. Con tablas
   de este tamaño, quien navega con teclado necesita una salida del cromo. */
.salto-contenido {
    position: absolute;
    left: var(--e2);
    top: var(--e2);
    z-index: 80;
    transform: translateY(-200%);
    background: var(--foco);
    color: var(--tinta);
    padding: var(--e2) var(--e3);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-marca);
    text-transform: uppercase;
    text-decoration: none;
    transition: transform var(--paso) var(--curva);
}

.salto-contenido:focus {
    transform: translateY(0);
}

/* ============================================================
   PORTADA DE PANTALLA

   El bloque con el que abre cada pantalla. Sustituye a la fila de cuatro
   tarjetas iguales que había antes, que es el gesto de tablero más repetido
   que existe y el que hacía que todo se leyera predeterminado.

   La estructura es de papelería, no de tarjeta: cejilla en versalitas
   espaciadas, título en la didona del logotipo, y a la derecha la cifra que
   la pantalla existe para responder, las dos apoyadas en el mismo filete.
   Es la composición de un membrete, que es exactamente el lenguaje que el
   brandbook desarrolla en su sección de papelería.

   Sin caja, sin sombra, sin esquina redondeada: el filete hace el trabajo.
   ============================================================ */

.portada {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e4) var(--e6);
    padding-bottom: var(--e4);
    border-bottom: var(--pelo) solid var(--borde);
    margin-bottom: var(--e6);
}

.portada-texto {
    min-width: 0;
}

.portada-cejilla {
    display: block;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-cejilla);
    text-transform: uppercase;
    color: var(--apunte);
    margin-bottom: var(--e2);
}

/* El título: la otra mitad del logotipo, a escala de página. En caja baja,
   no en versalitas: las versalitas son para los rótulos, y un título en
   mayúsculas encima de una pantalla llena de mayúsculas no jerarquiza nada. */
.portada-titulo {
    font-family: var(--fuente-display);
    /* El eje de ancho de Archivo variable. font-stretch va primero como respaldo
       para navegadores que lo entienden pero no leen variation-settings. */
    font-stretch: 118%;
    font-variation-settings: "wdth" var(--ancho-display);
    font-size: var(--t-display);
    font-weight: 600;
    line-height: 1.0;
    /* Expandida y grande, las letras ya tienen aire propio: el tracking se
       cierra para que la palabra se lea como un bloque y no como letras
       sueltas. */
    letter-spacing: -0.02em;
    color: var(--azul);
    margin: 0;
}

.portada-nota {
    font-size: var(--t-base);
    color: var(--apunte);
    margin-top: var(--e2);
    line-height: 1.4;
}

/* La cifra de la portada, alineada a la línea base del título */
.portada-cifra {
    text-align: right;
    flex-shrink: 0;
}

.portada-cifra .valor {
    display: block;
    font-size: var(--t-mayor);
    font-weight: 300;
    line-height: 1;
    letter-spacing: var(--traza-cifra);
    font-variant-numeric: tabular-nums;
    color: var(--azul);
}

.portada-cifra .rotulo {
    display: block;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-cejilla);
    text-transform: uppercase;
    color: var(--apunte);
    margin-bottom: var(--e2);
}

.portada-cifra .apoyo {
    display: block;
    font-size: var(--t-micro);
    color: var(--apunte);
    margin-top: var(--e1);
}

/* ── La portada en teléfono ──────────────────────────────────────────────────
   En pantalla ancha la portada funciona: título a la izquierda, cifra a la
   derecha, las dos apoyadas en el mismo filete. En teléfono no hay dos
   columnas, así que la composición se desarmaba en cinco bloques apilados
   —cejilla, título, selector de mes, rótulo de SLA, cifra, barra, apoyo— y
   ocupaba 200 px antes de que empezara el contenido.

   Se recompone en dos columnas, con el periodo y la cifra a la derecha de lo
   que nombran:

     MANTENIMIENTO · IT · ENFERMERÍA
     Incidencias              agosto de 2026 ▾
     CUMPLIMIENTO DE SLA
     ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔              68%
     23 de 34 a tiempo

   Cada dato queda al lado del rótulo que lo explica: el periodo junto al título
   —antes había que subir tres renglones para saber de qué mes era el 68 %— y la
   cifra junto a su rótulo, su barra y su detalle, que forman un solo bloque de
   la misma altura que el número.

   Que ese bloque de tres piezas mida lo mismo que la cifra es lo que hace que
   se lean como una unidad y no como cuatro renglones seguidos. Se consigue con
   row-gap 0 y márgenes puestos pieza por pieza: 14 px de rótulo + 6 de barra +
   17 de apoyo = 37, contra los 34 de la cifra, que se centra sobre las tres.

   Las dos columnas se arman con una rejilla sobre .portada y display:contents en
   los dos envoltorios, así que sus hijos se colocan como celdas del abuelo sin
   mover una línea de HTML. Cada celda se coloca explícitamente y no por orden
   automático: el orden del documento es cejilla, título, mes, rótulo, cifra,
   barra, apoyo, que no es el orden visual de la rejilla.

   El título va a 24 px, medido y no a ojo: la columna derecha necesita 150 px
   —lo que mide el selector de mes con su icono— y de los 330 disponibles quedan
   165 para la izquierda. A 28 px "Incidencias" mide 170 y se sale; a 24 mide
   146 y entra. Deja de ser la tipografía más grande de la pantalla y pasa a
   serlo la cifra, que es lo correcto: esta consola existe para ese número. */
@media (max-width: 639px) {
    .portada {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        /* Cero en vertical: el hueco entre renglones se pone pieza por pieza,
           que es la única forma de que las tres del bloque de SLA queden
           pegadas mientras el título sí respira. En horizontal hacen falta
           tres pasos, porque ahí lo único que separa las columnas es el hueco. */
        row-gap: 0;
        column-gap: var(--e3);
        padding-bottom: var(--e3);
        margin-bottom: var(--e4);
    }

    .portada-texto,
    .portada-cifra {
        display: contents;
    }

    .portada-cejilla {
        grid-area: 1 / 1 / 2 / 3;
        margin-bottom: var(--e2);
    }

    .portada-titulo {
        grid-area: 2 / 1 / 3 / 2;
        font-size: 24px;
        align-self: center;
    }

    /* El periodo, al lado del título y pegado al borde derecho, en la misma
       columna que la cifra: los dos datos que la pantalla calcula quedan
       alineados en un mismo canto. */
    .portada-nota {
        grid-area: 2 / 2 / 3 / 3;
        margin-top: 0;
        min-width: 0;
        justify-self: end;
        align-self: center;
    }

    /* Un input[type=month] pide 177 px de ancho intrínseco, y con eso la
       columna derecha dejaba 138 a la izquierda cuando el título necesita 146:
       se salía por la derecha y se montaba encima. Acotado a 150 entra —el
       texto y su icono ocupan unos 130— y la izquierda queda en 165. */
    .portada-nota .campo-desnudo {
        width: 100%;
        max-width: 150px;
    }

    /* El bloque de cumplimiento: rótulo, barra y detalle en la columna
       izquierda y la cifra a su derecha, centrada sobre los tres.

       Los interlineados van a 1 y los márgenes al mínimo para que las tres
       piezas midan 37 px juntas, contra los 34 de la cifra. Con los
       interlineados de serie medían 50 y la cifra quedaba flotando en medio de
       un bloque más alto que ella: se leían como dos cosas, no como un dato y
       su número. La barra se pega al rótulo a propósito —una barra debajo de su
       rótulo se lee como suya— y el aire se reserva para separar el detalle. */
    /* Las tres piezas de la izquierda al canto izquierdo. .portada-cifra alinea
       a la derecha para la composición de escritorio, y como aquí se deshace con
       display:contents esa alineación seguía heredándose: el detalle salía
       alineado a la derecha debajo de una barra alineada a la izquierda. */
    .portada-cifra .rotulo {
        grid-area: 3 / 1 / 4 / 2;
        margin: var(--e3) 0 0;
        line-height: 1;
        letter-spacing: var(--traza-marca);
        text-align: left;
    }

    .portada-cifra .avance-cifra {
        grid-area: 4 / 1 / 5 / 2;
        margin-top: var(--e1);
    }

    .portada-cifra .apoyo {
        grid-area: 5 / 1 / 6 / 2;
        margin-top: 0;
        line-height: 1.1;
        text-align: left;
    }

    .portada-cifra .valor {
        grid-area: 3 / 2 / 6 / 3;
        font-size: var(--t-cifra);
        text-align: right;
        align-self: center;
    }
}

/* ============================================================
   FRANJA DE MÉTRICAS

   Las cifras sin caja, separadas por filete vertical y con aire de sobra.
   Antes eran cuatro rectángulos con fondo propio: cuatro pesos visuales
   compitiendo con el dato que se quiere leer.

   El aire es el que hace que se vea moderno; no hace falta más recurso.
   ============================================================ */

.franja {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--pelo) solid var(--filete);
    border-bottom: var(--pelo) solid var(--filete);
    margin-bottom: var(--e8);
}

@media (min-width: 900px) {
    .franja {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.franja-celda {
    padding: var(--e4) var(--e4) var(--e4) 0;
    min-width: 0;
}

/* El filete separa, no encierra: solo entre columnas, nunca en los extremos */
.franja-celda + .franja-celda {
    border-left: var(--pelo) solid var(--filete);
    padding-left: var(--e4);
}

@media (min-width: 900px) {
    .franja-celda:nth-child(3) {
        border-left: var(--pelo) solid var(--filete);
    }
}

@media (max-width: 899px) {
    /* En dos columnas, la tercera abre renglón: pierde el filete izquierdo y
       gana uno arriba, o el corte se lee mal. */
    .franja-celda:nth-child(3) {
        border-left: 0;
        padding-left: 0;
        border-top: var(--pelo) solid var(--filete);
    }
    .franja-celda:nth-child(4) {
        border-top: var(--pelo) solid var(--filete);
    }
}

.franja-rotulo {
    display: block;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-cejilla);
    text-transform: uppercase;
    color: var(--apunte);
    margin-bottom: var(--e3);
}

.franja-valor {
    display: block;
    font-size: var(--t-cifra);
    font-weight: 300;
    line-height: 1;
    letter-spacing: var(--traza-cifra);
    font-variant-numeric: tabular-nums;
    color: var(--azul);
}

/* En teléfono la franja son dos columnas de 164 px y la cifra del gasto es la
   más larga de las cuatro: "$17,000.00" a 34 px mide 162 px en una caja de 124
   y se montaba sobre la celda de al lado. Se detectó midiendo scrollWidth
   contra clientWidth, porque a la vista no parecía roto: el documento no se
   desplaza, simplemente los dos números quedaban pisados.

   Baja a 24 px y parte por el separador de miles si aún no cupiera. Sigue siendo
   la tipografía más grande de la franja y no compite con el 75 % de la portada,
   que es el número que manda en la pantalla. */
@media (max-width: 639px) {
    .franja-valor {
        font-size: var(--t-titulo);
        overflow-wrap: anywhere;
    }
}

.franja-apoyo {
    display: block;
    font-size: var(--t-fino);
    color: var(--apunte);
    margin-top: var(--e2);
    line-height: 1.35;
}

/* ============================================================
   RÓTULO DE SECCIÓN

   Etiqueta a la izquierda y filete que corre hasta el borde. Es el recurso
   de una hoja membretada para abrir un apartado, y reemplaza al título
   dentro de una caja gris.
   ============================================================ */

.rotulo-seccion {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin-bottom: var(--e4);
}

.rotulo-seccion > span:first-child {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-cejilla);
    text-transform: uppercase;
    color: var(--apunte);
    white-space: nowrap;
}

/* El filete que corre. Va con flex y no con border para que se detenga
   exactamente donde termina el contenedor. */
.rotulo-seccion::after {
    content: "";
    flex: 1;
    height: var(--pelo);
    background: var(--filete);
}

/* ============================================================
   BLOQUE DE ÉNFASIS EN HORIZON BLUE

   Horizon Blue estaba solo como acento suelto. Aquí pasa a ser superficie,
   que es lo que da a la pantalla el aire claro y aireado de una interfaz
   clínica moderna sin salirse de los cinco colores del manual. Y es el tono
   que, según el brandbook, retoma el branding original de Skingroup: la
   pantalla donde se trabaja todos los días es un buen lugar para eso.
   ============================================================ */

.bloque-claro {
    background: var(--horizonte);
    padding: var(--e4);
}

@media (min-width: 640px) {
    .bloque-claro {
        padding: var(--e6);
    }
}

/* Barra de avance, sin esquina y sin degradado */
.avance {
    height: 6px;
    background: var(--lienzo);
    overflow: hidden;
}

.avance > span {
    display: block;
    height: 100%;
    background: var(--azul);
    transition: width 500ms var(--curva);
}

/* ============================================================
   CAMPO DESNUDO

   Un control que se lee como parte del texto y no como una caja: sin relleno
   lateral, con filete solo abajo. Se usa donde el campo ES el dato —el mes que
   se está consultando, el método de cálculo— y no un formulario que hay que
   llenar.

   El filete inferior mide 2 px y no 1: al perder tres de sus cuatro lados,
   necesita ese peso para seguir leyéndose como control y cumplir el 3:1 de
   WCAG 1.4.11 sobre lo que identifica un componente de interfaz.
   ============================================================ */

.campo-desnudo {
    width: auto;
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--borde);
    padding: var(--e1) 0;
    min-height: 0;
    font-size: var(--t-base);
    color: var(--azul);
    font-weight: 500;
}

.campo-desnudo:hover:not(:disabled) {
    border-bottom-color: var(--azul);
}

/* La barra de avance cuando acompaña a una cifra: se alinea a su ancho y no al
   del contenedor. Suelta y a todo el ancho se leía como un filete decorativo
   más, sin decir de qué era el avance. */
.avance-cifra {
    display: block;
    width: 100%;
    min-width: 140px;
    margin-top: var(--e2);
}

/* ============================================================
   CABECERA DE PANEL, VERSIÓN LIGERA

   Las cabeceras de panel eran bandas en azul marino con versalitas claras. Con
   la portada nueva quedaban como bloques pesados peleando con el aire de
   arriba: dos lenguajes en la misma pantalla. Ahora usan el mismo recurso que
   el resto del sistema —rótulo y filete— y el color oscuro se reserva para el
   cromo, que es lo único que debería ser oscuro.
   ============================================================ */

.panel-cabeza-clara {
    padding: var(--e3) 0;
    margin: 0 var(--e4);
    border-bottom: var(--pelo) solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    flex-wrap: wrap;
}

.panel-cabeza-clara > *:first-child {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--traza-cejilla);
    text-transform: uppercase;
    color: var(--apunte);
    margin: 0;
}

/* ============================================================
   TIRA DE ESTADO  (captura móvil)

   El estado del enlace y el botón de avisos estaban dentro del encabezado. Con
   el encabezado fijo, en un teléfono de 812 px de alto eso significaba perder
   casi la mitad de la pantalla en cuanto se hacía scroll: la barra ocupaba 231
   px y no se iba nunca.

   Ahora se desplazan con la página. Lo único que se queda pegado arriba es la
   identidad y los destinos, que es lo que de verdad hay que tener a mano
   mientras se llena el formulario.
   ============================================================ */

.tira-estado {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    padding: var(--e3) var(--e4) 0;
    max-width: 100%;
}

/* ============================================================
   LISTADOS LARGOS: DÍA Y TANDA

   El encabezado de día no es una barra ni una tarjeta: es un rótulo con su
   filete, el mismo recurso con el que el resto del sistema abre una sección.
   Un bloque con fondo propio dentro de una lista que ya tiene divisores
   añadiría un tercer nivel de caja donde no hay tres niveles de información.

   La fecha va en versalitas y el conteo en cifra al otro extremo, apoyados los
   dos en el mismo filete: es la misma composición de .portada y de
   .panel-cabeza-clara, así que la lista no introduce un lenguaje nuevo.
   ============================================================ */

.dia-cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e3) 0;
    border: 0;
    border-bottom: var(--pelo) solid var(--borde);
    border-radius: var(--filo);
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--fuente);
    cursor: pointer;
    /* 44 px: es el control que más se toca de la pantalla, porque abrir un día
       es el gesto con el que se navega la lista entera. Aquí sí se paga el
       objetivo táctil completo de WCAG 2.5.5. */
    min-height: 44px;
    transition: border-color var(--paso) var(--curva);
}

.dia-cabeza:hover {
    border-bottom-color: var(--azul);
}

.dia-cabeza-nombre {
    font-size: var(--t-fino);
    font-weight: 700;
    letter-spacing: var(--traza-marca);
    text-transform: uppercase;
    color: var(--azul);
    /* Sitio para el galón, que va delante del nombre */
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
}

/* El galón: dos lados de un cuadrado girados 45°, no un carácter haciendo de
   icono. Apunta a la derecha con el día cerrado y baja al abrirlo, que es la
   convención que ya entiende cualquiera sin leer nada. */
.dia-cabeza-nombre::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--borde);
    border-bottom: 2px solid var(--borde);
    transform: rotate(-45deg);
    transition: transform var(--paso) var(--curva);
    flex-shrink: 0;
}

.dia-cabeza[aria-expanded="true"] .dia-cabeza-nombre::before {
    transform: rotate(45deg);
}

.dia-cabeza-conteo {
    font-size: var(--t-micro);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--traza-dato);
    color: var(--tenue);
    white-space: nowrap;
}

/* Cuando la lista tiene fondo propio y filas ya acolchadas —la bitácora de
   administración es el único caso— el rótulo necesita el mismo acolchado que
   las filas. En las listas sin fondo cuelga a la izquierda de las tarjetas a
   propósito: así el día se lee como una marca del listado y no como una fila
   más dentro de él. */
.dia-cabeza-inset {
    padding-inline: var(--e3);
}

/* ── Niveles de plegado ──────────────────────────────────────────────────────
   El panel de administración pliega en tres: aplicación, empresa y día. La
   sangría es lo único que dice qué cuelga de qué, y va en múltiplos del
   medianil de 10 px del brandbook para no inventar una escala nueva.

   Sólo sangra por la izquierda. Sangrar también el conteo lo separaría del
   filete que lo sostiene, y el filete es lo que alinea los tres niveles en una
   sola columna a la derecha: es lo que hace que la lista se lea como un árbol y
   no como tres listas apiladas. */
.dia-cabeza-n1 { padding-inline-start: calc(var(--e3) + var(--e2)); }
.dia-cabeza-n2 { padding-inline-start: calc(var(--e3) + var(--e4)); }

/* Y el mismo escalón para lo que cuelga de cada nivel, que no es un encabezado
   sino contenido: las cuentas de una empresa, los registros de un día. */
.grupo-hijos-n1 { padding-inline-start: var(--e2); }
.grupo-hijos-n2 { padding-inline-start: var(--e4); }
.grupo-hijos-n3 { padding-inline-start: var(--e6); }

/* Dentro de la tabla el encabezado va en una celda que cruza todas las
   columnas. La celda no lleva acolchado propio: el que manda es el del rótulo,
   para que el filete del día caiga a la misma altura que en la lista de móvil. */
.dia-fila > td {
    padding: 0;
    border: 0;
}

.dia-fila > td > .dia-cabeza {
    padding-inline: var(--e3);
}

/* Pie de tanda: la cuenta a la izquierda y las dos salidas a la derecha. En
   teléfono se apila, porque tres cosas en un renglón de 330 px obligan a
   abreviar la cuenta, que es la parte que importa. */
.tanda-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e2) var(--e4);
    padding: var(--e4) var(--e3);
    border-top: var(--pelo) solid var(--filete);
}

.tanda-cuenta {
    font-size: var(--t-fino);
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
    margin: 0;
    margin-inline-end: auto;
}

/* ============================================================
   EL CROMO EN TELÉFONO

   Aquí la barra ya no queda fija —eso es sólo de 640 px para arriba—, así que
   los píxeles que ocupa se recuperan en cuanto se desplaza. Aun así se aprieta
   todo lo que da: son los primeros píxeles que se ven al abrir, y en 231 px la
   pantalla arrancaba mostrando barra y casi nada más.

   Tres decisiones:

   1. El correo sale del cromo. Es contexto, no identidad, y encima era lo que
      desbordaba su caja: 214 px de texto en 170 px de hueco. Baja a la tira de
      estado, junto al punto del enlace, donde tiene el ancho completo y puede
      partir en dos renglones sin estorbarle a nadie.

   2. La columna derecha se deshace con display:contents, así que sus dos hijos
      pasan a ser filas del propio cromo. Sin mover una línea de HTML, la barra
      pasa de dos bloques apilados a filas apretadas.

   3. Los rótulos se aprietan de espaciado para que las acciones quepan en un
      solo renglón. Sin eso eran dos, y dos renglones de acción más uno de
      destinos devolvían la barra a 180 px.
   ============================================================ */

@media (max-width: 639px) {
    /* Acolchado lateral de un paso menos: 15 px por lado dejan 330 útiles, que
       es lo que necesitan los tres rótulos de acción para caber en un renglón.
       Y el vertical al mínimo de la escala, porque en tres filas de rótulos el
       acolchado y los huecos sumaban 40 px de los 163 de la barra: un cuarto
       del alto era aire. */
    .cromo {
        padding: var(--e1) var(--e3);
        gap: var(--e1);
    }

    .cromo-contexto {
        display: none;
    }

    .cromo-derecha {
        display: contents;
    }

    .cromo-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 0 var(--e4);
    }

    /* En teléfono las dos filas ya no comparten ancho con nada: la columna
       derecha se deshizo y cada una ocupa el renglón completo. Repartir con
       space-between dejaría "Salir" flotando en medio de un hueco enorme, así
       que las dos arrancan a la izquierda, alineadas con el logotipo. */
    .cromo-acciones {
        justify-content: flex-start;
        gap: var(--e1) var(--e3);
    }

    /* Y las dos filas se aprietan igual. Podría apretarse sólo la de acciones,
       que es la que no cabía, pero entonces las dos filas de rótulos idénticos
       tendrían espaciados distintos y se notaría antes que el problema que
       resuelve. */
    .cromo-acciones .boton,
    .cromo-nav a {
        letter-spacing: var(--traza-corta);
    }

    .cromo-identidad {
        gap: var(--e1);
    }

    /* El logotipo baja un punto. Sigue muy por encima del mínimo de 20 px de
       ancho que fija el brandbook (a 20 px de alto mide 99 de ancho). */
    .cromo-logo {
        height: 20px;
    }

    .cromo-filete {
        min-height: 24px;
        margin-inline-start: 0;
    }

    /* La marca se comprime para que "Salir" quepa a su lado. Sin esto medía
       274 px de ancho fijo, el botón no entraba en los 335 disponibles y se iba
       al renglón siguiente: tres filas en vez de dos, 155 px de barra fija. */
    .cromo-marca {
        flex: 0 1 auto;
        min-width: 0;
        gap: var(--e2);
    }

    /* El título se parte en dos renglones y se lee completo. Antes se recortaba
       con puntos suspensivos —"CONSOLA DE INCIDEN…"— y un título truncado no es
       un título: es la única línea de la pantalla que dice dónde estás.

       Reducirlo de tamaño no era salida: en los 210 px que quedan junto al
       logotipo, "CONSOLA DE INCIDENCIAS" con el espaciado de marca necesitaría
       bajar a 12 px, más pequeño que el texto del cuerpo. Partirlo en dos
       cuesta 21 px de alto y esos 21 px se pagan sacando de aquí el correo, que
       ocupaba 34. */
    .cromo-titulo {
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* (el correo de la sesión ya no se pinta en ninguna medida: ver
       .enlace-sin-novedad, fuera de esta consulta) */

    /* ── Las pestañas de sección, en un solo renglón ──────────────────────────
       Cuentas · Dar de alta · Catálogos · Bitácora se partían en dos renglones y
       el segundo quedaba huérfano bajo el primero, sin filete que los una: dos
       niveles de pestaña donde hay uno.

       Medido con la tipografía real a 11 px: con el espaciado de marca (0.16em)
       los cuatro rótulos suman 315 px y con huecos de 5 llegan a 330, que es
       exactamente el ancho disponible en una pantalla de 360. Cero holgura. Con
       el espaciado corto suman 284 y quedan en 299: caben con 31 px de sobra, y
       es el mismo espaciado que ya usan las dos filas de la barra en teléfono,
       así que no introduce un ajuste nuevo.

       nowrap es la instrucción de verdad: sin él, un rótulo más largo volvería a
       partir la fila en dos en cuanto alguien añada una sección. Si eso pasa,
       preferimos que se note aquí y se decida, no que se acomode solo.

       PASÓ. Entró Permisos y con cinco rótulos la fila mide 370 px donde caben
       345: el último se salía de la caja y arrastraba la pantalla de lado. Se
       decidió así, medido con la tipografía real en un teléfono de 360:

         cinco rótulos, 11 px, espaciado corto  →  370 px en 330.  se sale 40
         bajando sólo el espaciado a 0.02em      →  341 px en 330.  se sale 11
         bajando también a 10 px                →  312 px en 330.  sobran 18
         y con «Alta» en vez de «Dar de alta»   →  271 px en 330.  sobran 59

       Hacen falta las tres cosas. El tamaño y el espaciado solos no alcanzan
       —dejan 9 o 11 px, que es no tener holgura— y el rótulo corto solo tampoco
       arregla que cinco versalitas anchas se vean encimadas. Los 59 px de sobra
       son los que dejan que quepa en una pantalla de 320, donde el hueco baja a
       290: por eso ya no hace falta la excepción que había para ese ancho.

       10 px es menor que --t-micro y no está en la escala a propósito: no es un
       tamaño de texto, es una fila de rótulos de navegación, el único sitio de la
       pantalla donde el ancho manda sobre la escala. */
    .pestanas {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: var(--e1);
    }

    .pestana {
        font-size: 10px;
        letter-spacing: var(--traza-dato);
        white-space: nowrap;
        padding: var(--e1) 0;
        min-height: 40px;
    }

    /* El rótulo largo se guarda para el escritorio, donde «Dar de alta» dice lo
       que hace; en el teléfono se enseña el corto. Se cambia cuál se ve y no el
       texto de la pestaña para que la pantalla ancha no pierda nada. */
    .rotulo-ancho   { display: none; }
    .rotulo-angosto { display: inline; }
}

/* La sucursal, primer dato debajo de la barra en la pantalla de captura. Ocupa
   el sitio donde antes estaba el correo de la cuenta, y el cambio no es sólo de
   contenido: el correo era el mismo en cada reporte y la sucursal es lo que
   identifica de dónde sale, así que es el dato que merece esa posición.

   Va en versalitas y en tinta plena, no como nota al pie en gris: si alguien
   captura desde la clínica equivocada, este renglón es lo único que lo delata
   antes de enviar. */
.rotulo-sucursal {
    font-size: var(--t-dato);
    font-weight: 700;
    letter-spacing: var(--traza-marca);
    text-transform: uppercase;
    color: var(--azul);
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}