/* =============================================================================
 * MedSuite — public/assets/css/clinica.css
 * -----------------------------------------------------------------------------
 * La capa médica sobre la base de Bizsuite: dirección «A. Bizsuite clínico»
 * (docs/PLAN_DESARROLLO.md §4 y H.2). El azul de Samaria se queda para la
 * interfaz; encima van la hoja clínica tipo papel, un acento clínico y los
 * colores de estado reservados para el semáforo, los estudios y el guardado.
 *
 * Orden de carga: theme → base → components → nav → CLINICA → hoja del módulo.
 *
 * Reglas que encierra esta hoja:
 *   - El color nunca va solo: cada estado lleva texto y una forma (círculo,
 *     triángulo, cuadrado, anillo, palomita), para quien no distingue colores
 *     (docs/ALCANCE_MONITOREO_WEB.md §4.2).
 *   - Contraste AA (WCAG 2.1): 4.5:1 en todo texto. Por eso la sección 1 corrige
 *     cinco tokens de Bizsuite que no lo alcanzaban; las copias de Bizsuite se
 *     quedan intactas para poder compararlas con su origen.
 *   - Sin url() ni @import: la CSP de MedSuite (style-src 'self', img-src
 *     'self' data:) no deja cargar nada de fuera, y las páginas tampoco pueden
 *     usar atributos style="". Todo lo visual sale de clases de esta hoja.
 *   - Sólo modo claro: Bizsuite no maneja prefers-color-scheme y la dirección A
 *     es la más cercana a Bizsuite. «color-scheme: light» evita que un sistema en
 *     modo oscuro pinte controles oscuros sobre la hoja blanca. Para quien pide
 *     más contraste (prefers-contrast: more) se aplica la paleta del proyector.
 *   - Las fuentes son las del sistema: Bizsuite no trae archivos de Inter y la
 *     CSP no deja pedirlas fuera. Si en E.3 se sirven locales, sólo cambian los
 *     tokens --clinica-fuente-*.
 *   - Con el dedo, todo blanco táctil mide 44 × 44 px como mínimo y ningún
 *     campo de texto baja de 16 px (sección 13, decisión 78). Con ratón, nada
 *     cambia.
 *
 * El nombre de las clases sigue a Bizsuite: prefijo del componente y guiones
 * (.hoja-seccion-titulo, .cola-item-demorado), en español y con el vocabulario
 * fijo del repositorio (estudio, liberación, sección, campo, equipo, alumno).
 * Cada componente trae arriba el marcado que espera. La página de muestra es
 * modules/demo/componentes.php.
 * ============================================================================= */


/* =============================================================================
 * 1. Correcciones AA a los tokens de Bizsuite
 * -----------------------------------------------------------------------------
 * Medido sobre blanco, #f8fafc (--paper) y #e8f3fc (--sky-100):
 *   --muted  #94a3b8 → #5b6b7f   2.56:1 → 5.45:1 (4.84:1 sobre --sky-100)
 *   --idle   #94a3b8 → #5b6b7f   (el texto de .status-nodata)
 *   --ok     #16a34a → #157a3c   2.96:1 → 4.85:1 sobre el fondo de .badge-ok
 *   --warn   #f59e0b → #b45309   1.99:1 → 4.65:1 sobre el fondo de .status-stale
 *   --error  #dc2626 → #b91c1c   4.41:1 → 5.90:1 sobre el fondo de .alert-error
 * ============================================================================= */
:root {
    color-scheme: light;

    --muted: #5b6b7f;
    --idle:  #5b6b7f;
    --ok:    #157a3c;
    --warn:  #b45309;
    --error: #b91c1c;
}

/* Bizsuite quita el contorno de los campos al enfocar y deja una sombra de 12 %
 * que casi no se ve. Con teclado, el foco tiene que verse: contorno de 2 px. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--sky-600);
    outline-offset: 1px;
}


/* =============================================================================
 * 2. Tokens de la capa médica
 * ============================================================================= */
:root {
    /* ---- Hoja clínica: papel sobre mesa ---- */
    --clinica-mesa:        #eef2f7;   /* fondo de las pantallas clínicas */
    --clinica-papel:       #fffefa;   /* la hoja: blanco apenas cálido */
    --clinica-papel-borde: #d6dee8;
    --clinica-renglon:     #e6ecf3;   /* renglones de los campos de texto largo */

    /* ---- Acento clínico: lo propio del expediente (numerales, sección activa) ---- */
    --clinica-acento:        #0f6e8c;   /* 5.79:1 sobre blanco */
    --clinica-acento-fuerte: #0a4f66;
    --clinica-acento-suave:  #e3f2f7;

    /* ---- Estados: fondo, texto (≥ 7:1) y forma (≥ 3:1) ----
     * Reservados al semáforo, los estudios, el guardado y la pertinencia. */
    --clinica-verde-fondo:    #e7f6ec;
    --clinica-verde-texto:    #14532d;
    --clinica-verde-forma:    #157a3c;

    --clinica-amarillo-fondo: #fef3c7;
    --clinica-amarillo-texto: #713f12;
    --clinica-amarillo-forma: #b45309;

    --clinica-rojo-fondo:     #fee2e2;
    --clinica-rojo-texto:     #7f1d1d;
    --clinica-rojo-forma:     #b91c1c;

    --clinica-gris-fondo:     #eef1f5;
    --clinica-gris-texto:     #334155;
    --clinica-gris-forma:     #5b6b7f;

    --clinica-azul-fondo:     #e0ecf8;
    --clinica-azul-texto:     #1e3a8a;
    --clinica-azul-forma:     #155e9f;

    /* ---- Marca de la demostración ---- */
    --clinica-marca-fondo:  #fde68a;
    --clinica-marca-raya:   #fcd34d;
    --clinica-marca-texto:  #422006;   /* 11.7:1 */

    /* ---- Tipografía ----
     * Interfaz: la de Bizsuite. Lectura (expediente y conversación): letra del
     * sistema más grande, con más interlineado y renglón acotado; es lo que más
     * ayuda en texto largo sin descargar fuentes. Cifras: tabulares, para que
     * 118/76 y 104 se alineen en columnas y no «bailen» al actualizarse. */
    --clinica-fuente-interfaz: var(--font-body);
    --clinica-fuente-lectura:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                               "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --clinica-fuente-cifras:   var(--font-body);
    --clinica-texto-lectura:   1.0625rem;
    --clinica-interlineado:    1.7;
    --clinica-medida:          72ch;

    --clinica-sombra-hoja: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.06);
}


/* =============================================================================
 * 3. Utilidades
 * ============================================================================= */

/* Para lectores de pantalla: presente en el árbol de accesibilidad, fuera de la vista.
 * Dentro de un contenedor con overflow (tablas que se deslizan), ese contenedor
 * necesita position: relative, o el texto oculto ensancha la página. */
.visualmente-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* «Saltar al contenido»: el primer Tab de la página lo muestra. */
.saltar-contenido {
    position: absolute;
    top: -100px;
    left: var(--sp-4);
    z-index: 1000;
    padding: var(--sp-2) var(--sp-4);
    background: var(--sky-900);
    color: var(--white);
    font-weight: var(--fw-bold);
    border-radius: var(--r-sm);
}
.saltar-contenido:focus {
    top: var(--sp-2);
    color: var(--white);
}

/* Texto largo: expediente, conversación con el paciente, guías. */
.lectura {
    font-family: var(--clinica-fuente-lectura);
    font-size: var(--clinica-texto-lectura);
    line-height: var(--clinica-interlineado);
    max-width: var(--clinica-medida);
    color: var(--ink);
}
.lectura p { color: var(--ink); }
.lectura p + p { margin-top: var(--sp-3); }
.lectura a { text-decoration: underline; }

/* Cifras tabulares sin cambiar a monoespaciada. */
.cifras {
    font-family: var(--clinica-fuente-cifras);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Lo que no debe verse proyectado. OJO: es sólo cosmético. La vista del
 * proyector del producto es una ruta aparte que NUNCA pinta nombres ni alertas
 * (decisión 25, PLAN_GENERAL §4.1); esta clase sirve en la demo, con datos
 * ficticios, y no protege nada. */
.modo-proyector .oculto-en-proyector { display: none !important; }


/* =============================================================================
 * 4. Marco de la demostración (H.3)
 * -----------------------------------------------------------------------------
 * Lo pintan modules/demo/_cabecera.php y _pie.php. Cuando exista la aplicación,
 * esta sección se queda sólo con .marca-demo, que también marca las pruebas con
 * datos ficticios (decisión 29).
 * ============================================================================= */

/* La marca. Va en el encabezado fijo: aparece en cada captura y en el proyector.
 *   <p class="marca-demo">DEMOSTRACIÓN · DATOS FICTICIOS</p>                    */
.marca-demo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.3rem 0.7rem;
    background: repeating-linear-gradient(-45deg,
        var(--clinica-marca-fondo) 0 10px,
        var(--clinica-marca-raya) 10px 20px);
    border: 1px solid var(--clinica-amarillo-forma);
    border-radius: var(--r-sm);
    color: var(--clinica-marca-texto);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* El encabezado de Bizsuite (.app-header), con la marca a la derecha. */
.barra-demo .app-brand {
    color: var(--sky-900);
    text-decoration: none;
}
.barra-demo .app-brand:hover { color: var(--sky-900); }
.barra-demo-sub {
    color: var(--ink-soft);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
}

/* Navegación entre pantallas: horizontal y sin JavaScript (el menú lateral de
 * Bizsuite necesita script para abrirse). Dos filas, una por grupo («Entrada»,
 * la maqueta de H.7, y «La clase», las pantallas de H.3), cada una con su
 * nombre a la izquierda. En el celular cada fila se desliza; desde 561 px, lo
 * que no cabe baja a otro renglón (ver abajo).
 *   <nav class="nav-demo">
 *     <div class="nav-demo-fila">
 *       <p class="nav-demo-grupo" id="g1">Entrada</p>
 *       <ul aria-labelledby="g1"><li><a href="…">…</a></li></ul>
 *     </div>
 *   </nav>                                                                      */
.nav-demo {
    background: var(--white);
    border-bottom: 1px solid var(--line);
}
.nav-demo-fila {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--sp-4);
}
.nav-demo-fila + .nav-demo-fila { border-top: 1px dashed var(--line); }
.nav-demo-grupo {
    flex: none;
    min-width: 4.5rem;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.nav-demo ul {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: var(--sp-1);
    padding: var(--sp-1) 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
}
.nav-demo a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;           /* blanco táctil cómodo en laptop con pantalla táctil */
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
.nav-demo a:hover {
    background: var(--sky-100);
    color: var(--sky-900);
}
.nav-demo a[aria-current="page"] {
    background: var(--sky-100);
    color: var(--sky-800);
    font-weight: var(--fw-bold);
    box-shadow: inset 0 -3px 0 var(--sky-600);   /* la pantalla actual, no sólo por color */
}
.nav-demo .nav-demo-proyector {
    margin-left: auto;
}
.nav-demo .nav-demo-proyector a {
    border: 1px solid var(--line);
}
/* En una tableta vertical (768–834 px) la lista mide unos 930 px, y 1120 en
 * modo proyector: deslizándose, «Componentes» quedaba cortado y «Ver en modo
 * proyector» fuera de la vista, y en iPad y Android la barra de desplazamiento
 * no se ve, así que nada decía que había más. Desde 561 px se parte en dos
 * renglones; en una laptop cabe en uno y no cambia nada. */
@media (min-width: 561px) {
    .nav-demo ul {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

/* El contenido. Las pantallas que necesitan todo el ancho (monitor con 12
 * equipos) ponen «pantalla-completa» en $CLASE_BODY. */
.demo-principal {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-4) var(--sp-8);
}
.pantalla-completa .demo-principal { max-width: none; }
.demo-principal:focus { outline: none; }   /* destino del «saltar al contenido» */

/* Fondo de mesa para las pantallas clínicas: la hoja resalta como papel. */
body.fondo-mesa { background: var(--clinica-mesa); }

.pie-demo {
    border-top: 1px solid var(--line);
    background: var(--white);
}
.pie-demo p {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}

/* Portada: tarjetas que llevan a cada pantalla. La tarjeta entera es el enlace.
 *   <ul class="tarjetas-pantalla">
 *     <li><a class="card tarjeta-pantalla" href="alumno.php">
 *       <span class="tarjeta-pantalla-num">1</span>
 *       <h2 class="tarjeta-pantalla-titulo">Alumno en sesión</h2>
 *       <p class="tarjeta-pantalla-texto">…</p>
 *       <span class="tarjeta-pantalla-ir">Abrir la pantalla</span>
 *     </a></li>
 *   </ul>                                                                        */
.tarjetas-pantalla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4);
    list-style: none;
}
/* «0 · La entrada» (H.7): el comienzo del recorrido, a todo lo ancho, arriba
 * de las cuatro pantallas de la clase. */
.tarjetas-pantalla > .tarjeta-pantalla-entrada { grid-column: 1 / -1; }
.tarjeta-pantalla {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    height: 100%;
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.tarjeta-pantalla:hover {
    border-color: var(--sky-600);
    box-shadow: var(--shadow-md);
    color: var(--ink);
}
.tarjeta-pantalla:focus-visible {
    outline: 3px solid var(--sky-600);
    outline-offset: 2px;
}
.tarjeta-pantalla-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sky-100);
    color: var(--sky-800);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
}
.tarjeta-pantalla-titulo { font-size: var(--fs-md); }
.tarjeta-pantalla-texto { color: var(--ink-soft); font-size: var(--fs-sm); flex: 1; }
.tarjeta-pantalla-ir {
    color: var(--sky-700);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}
.tarjeta-pantalla-ir::after { content: " →"; }
.tarjeta-pantalla:hover .tarjeta-pantalla-ir { text-decoration: underline; }

/* Notas de la portada: el reinicio de base.css quita la sangría de las listas. */
.portada-notas {
    margin-top: var(--sp-3);
    padding-left: 1.25rem;
}
.portada-notas li + li { margin-top: var(--sp-2); }
.portada-componentes {
    margin-top: var(--sp-4);
    color: var(--ink);
}
.portada-componentes a { text-decoration: underline; }

@media (max-width: 560px) {
    .barra-demo-sub { display: none; }
    .app-header { padding: 0 var(--sp-3); }
    .marca-demo { padding: 0.25rem 0.5rem; letter-spacing: 0.03em; }
    /* En modo proyector la letra crece y «Demostración · Datos ficticios» ya no
     * cabe en un renglón junto a la marca: empujaba toda la página de lado
     * (~50 px a 375). Se parte en dos renglones, que caben en los 52 px fijos del
     * encabezado; la marca sigue a la vista y con su tamaño. */
    .barra-demo { gap: var(--sp-2); }
    .barra-demo .app-header-right { min-width: 0; }
    .modo-proyector .marca-demo { white-space: normal; line-height: 1.15; text-align: center; }
    .demo-principal { padding: var(--sp-5) var(--sp-3) var(--sp-6); }
    .hoja-clinica { padding: var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-4); }
}
/* 320 px: un iPad con MedSuite en un tercio de la pantalla o en Slide Over.
 * En un renglón, la marca llegaba a 349 px y la página se deslizaba de lado.
 * En dos renglones cabe en los 52 px del encabezado, como en el proyector. */
@media (max-width: 359px) {
    .marca-demo { white-space: normal; line-height: 1.15; text-align: center; }
}


/* =============================================================================
 * 5. Hoja clínica (expediente NOM-004 por secciones)
 * -----------------------------------------------------------------------------
 *   <section class="hoja-clinica" aria-labelledby="hc-titulo">
 *     <header class="hoja-clinica-encabezado">
 *       <div>
 *         <p class="hoja-clinica-tipo">Historia clínica · NOM-004-SSA3-2012</p>
 *         <h2 class="hoja-clinica-titulo" id="hc-titulo">Paciente ficticio…</h2>
 *       </div>
 *       <p class="hoja-clinica-marca">Simulación · Paciente ficticio</p>
 *     </header>
 *
 *     <article class="hoja-seccion hoja-seccion-activa" aria-labelledby="s611">
 *       <header class="hoja-seccion-cabeza">
 *         <span class="hoja-seccion-numeral">6.1.1</span>
 *         <h3 class="hoja-seccion-titulo" id="s611">Padecimiento actual</h3>
 *         <p class="hoja-seccion-estado">
 *           <span class="escribiendo">Ana L. está escribiendo</span>
 *           <span class="guardado guardado-guardando" role="status">Guardando…</span>
 *         </p>
 *       </header>
 *       <div class="hoja-campo">
 *         <label for="c1">Padecimiento actual</label>
 *         <textarea id="c1" class="hoja-texto" rows="6">…</textarea>
 *         <p class="hoja-campo-autoria">Última edición: Ana L. · 10:42</p>
 *       </div>
 *     </article>
 *   </section>
 *
 * Sección: .hoja-seccion-activa (la edito yo), .hoja-seccion-bloqueada (otro
 * escribe: bloqueo suave, el campo va con readonly), .hoja-seccion-entregada
 * (sólo lectura después de «Cerrar entregas»).
 * Guardado: .guardado-ok «Guardado», .guardado-guardando «Guardando…»,
 * .guardado-pendiente «Sin guardar», .guardado-error «No se guardó».
 * ============================================================================= */
.hoja-clinica {
    position: relative;
    background: var(--clinica-papel);
    border: 1px solid var(--clinica-papel-borde);
    border-radius: var(--r-md);
    box-shadow: var(--clinica-sombra-hoja);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
}

/* El filete del acento clínico a la izquierda: el «margen» de la hoja. */
.hoja-clinica::before {
    content: "";
    position: absolute;
    top: var(--sp-4);
    bottom: var(--sp-4);
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--clinica-acento);
}

.hoja-clinica-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-2);
    border-bottom: 2px solid var(--clinica-papel-borde);
}
.hoja-clinica-tipo {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clinica-acento);
}
.hoja-clinica-titulo {
    font-size: var(--fs-lg);
    color: var(--sky-900);
    margin-top: var(--sp-1);
}
.hoja-clinica-datos {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

/* «SIMULACIÓN · PACIENTE FICTICIO»: sello en la hoja misma, no sólo en la barra. */
.hoja-clinica-marca {
    padding: 0.25rem 0.6rem;
    border: 1.5px dashed var(--clinica-acento);
    border-radius: var(--r-sm);
    color: var(--clinica-acento-fuerte);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hoja-seccion {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--clinica-renglon);
}
.hoja-seccion:last-child { border-bottom: 0; }

.hoja-seccion-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
}

/* El numeral de la NOM-004: se ve aunque el OWNER renombre la sección
 * (docs/NORMATIVA.md §3). */
.hoja-seccion-numeral {
    flex-shrink: 0;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: var(--clinica-acento-suave);
    color: var(--clinica-acento-fuerte);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.hoja-seccion-titulo {
    font-size: var(--fs-md);
    color: var(--sky-900);
}
.hoja-seccion-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
    font-size: var(--fs-xs);
}

/* Quién escribe: el bloqueo suave de ARQUITECTURA §4.5, con un lápiz dibujado. */
.escribiendo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--clinica-acento-fuerte);
    font-weight: var(--fw-medium);
}
.escribiendo::before {
    content: "";
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(-45deg);
    box-shadow: 3px 0 0 0 var(--clinica-acento);
    animation: clinica-pulso 1.4s ease-in-out infinite;
}

.hoja-campo + .hoja-campo { margin-top: var(--sp-4); }
.hoja-campo label {
    color: var(--ink);
    font-weight: var(--fw-bold);
}
.hoja-campo-ayuda {
    margin: calc(-1 * var(--sp-1)) 0 var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}

/* El campo de texto largo, con renglones: parece hoja y guía la lectura. Los
 * renglones miden lo mismo que el interlineado, para que el texto caiga sobre
 * ellos. No van atados al contenido (background-attachment: local): con eso
 * Safari repintaba todo el fondo en cada tecla y en el iPad teclear se sentía
 * lento (bloque R.1). No hace falta: el campo crece con su texto y nunca se
 * desplaza por dentro, así que los renglones caen igual. */
.hoja-texto {
    display: block;
    min-height: 7.5em;
    resize: vertical;
    padding: 0.4em 0.9rem;
    background-color: var(--white);
    background-image: repeating-linear-gradient(to bottom,
        transparent 0,
        transparent calc(1.7em - 1px),
        var(--clinica-renglon) calc(1.7em - 1px),
        var(--clinica-renglon) 1.7em);
    background-origin: content-box;
    border-color: var(--clinica-papel-borde);
    font-family: var(--clinica-fuente-lectura);
    font-size: var(--clinica-texto-lectura);
    line-height: 1.7em;
    color: var(--ink);
}
.hoja-texto:focus { border-color: var(--clinica-acento); }

.hoja-campo-autoria {
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}

.hoja-seccion-activa {
    margin: 0 calc(-1 * var(--sp-3));
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--clinica-acento-suave), transparent 55%);
}

/* Otro alumno escribe: la sección se lee, no se edita. Rayado suave + aviso. */
.hoja-seccion-bloqueada .hoja-texto,
.hoja-seccion-entregada .hoja-texto {
    background-color: var(--clinica-gris-fondo);
    color: var(--ink-soft);
    cursor: default;
}
.hoja-seccion-bloqueada .hoja-texto { border-style: dashed; }
.hoja-aviso {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--clinica-gris-fondo);
    color: var(--clinica-gris-texto);
    font-size: var(--fs-sm);
}

/* ---- Estado del guardado: chip con forma propia por estado ---- */
.guardado {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}
.guardado::before {
    content: "";
    flex-shrink: 0;
    box-sizing: border-box;
}
/* Guardado: palomita */
.guardado-ok { background: var(--clinica-verde-fondo); color: var(--clinica-verde-texto); }
.guardado-ok::before {
    width: 5px;
    height: 9px;
    margin: -2px 1px 0;
    border: solid var(--clinica-verde-forma);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Guardando: anillo que gira */
.guardado-guardando { background: var(--clinica-gris-fondo); color: var(--clinica-gris-texto); }
.guardado-guardando::before {
    width: 10px;
    height: 10px;
    border: 2px solid var(--clinica-gris-forma);
    border-right-color: transparent;
    border-radius: 50%;
    animation: clinica-giro 0.9s linear infinite;
}
/* Sin guardar: punto lleno */
.guardado-pendiente { background: var(--clinica-amarillo-fondo); color: var(--clinica-amarillo-texto); }
.guardado-pendiente::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clinica-amarillo-forma);
}
/* No se guardó: triángulo */
.guardado-error { background: var(--clinica-rojo-fondo); color: var(--clinica-rojo-texto); }
.guardado-error::before {
    width: 10px;
    height: 9px;
    background: var(--clinica-rojo-forma);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}


/* =============================================================================
 * 6. Signos vitales
 * -----------------------------------------------------------------------------
 * Una lista de definición: nombre, valor con unidad y rango de referencia.
 *   <dl class="signos-vitales">
 *     <div class="signo">
 *       <dt class="signo-nombre">Frecuencia cardiaca</dt>
 *       <dd class="signo-valor">104 <abbr class="signo-unidad" title="latidos por minuto">lpm</abbr></dd>
 *       <dd class="signo-rango">Ref. 60–100</dd>
 *     </div>
 *   </dl>
 * Variantes: .signo-alto y .signo-bajo, con el texto en .signo-marca («Alto»,
 * «Bajo»); .signo-pendiente, con «Sin liberar» en lugar del valor. La pantalla
 * decide si marca alto o bajo: el rango siempre se ve.
 * ============================================================================= */
.signos-vitales {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-3);
}
.signo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--sp-3) var(--sp-4);
    background: var(--white);
    border: 1px solid var(--clinica-papel-borde);
    border-radius: var(--r-md);
}
.signo-nombre {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.signo-valor {
    font-family: var(--clinica-fuente-cifras);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    color: var(--sky-900);
}
.signo-unidad {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink-soft);
    text-decoration: none;   /* <abbr> trae subrayado punteado; el title basta */
}
.signo-rango {
    font-size: var(--fs-xs);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
/* En el flujo y no encimada: un nombre largo («Frecuencia respiratoria») no la tapa. */
.signo-marca {
    align-self: flex-start;
    margin-top: 0.15rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}
.signo-alto,
.signo-bajo { border-color: var(--clinica-amarillo-forma); }
.signo-alto .signo-marca,
.signo-bajo .signo-marca {
    background: var(--clinica-amarillo-fondo);
    color: var(--clinica-amarillo-texto);
}
/* Flecha dibujada: hacia arriba si es alto, hacia abajo si es bajo. */
.signo-alto .signo-marca::before,
.signo-bajo .signo-marca::before {
    content: "";
    width: 8px;
    height: 7px;
    background: var(--clinica-amarillo-forma);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.signo-bajo .signo-marca::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }

.signo-pendiente { background: var(--clinica-gris-fondo); border-style: dashed; }
.signo-pendiente .signo-valor {
    font-size: var(--fs-base);
    color: var(--clinica-gris-texto);
}


/* =============================================================================
 * 7. Estudios: pedido → en espera → liberado
 * -----------------------------------------------------------------------------
 *   <article class="estudio estudio-liberado" aria-labelledby="e1">
 *     <header class="estudio-cabeza">
 *       <h4 class="estudio-nombre" id="e1">Biometría hemática</h4>
 *       <span class="estudio-tipo">Laboratorio</span>
 *       <span class="estudio-estado">Liberado · 10:51</span>
 *     </header>
 *     <ol class="estudio-pasos" aria-label="Avance de la solicitud">
 *       <li class="paso-hecho">Pedido</li>
 *       <li class="paso-hecho">En espera</li>
 *       <li class="paso-hecho" aria-current="step">Liberado</li>
 *     </ol>
 *     <p class="estudio-justificacion"><strong>Justificación:</strong> …</p>
 *     <div class="estudio-resultado"><table class="resultado-tabla">…</table></div>
 *   </article>
 * Estado: .estudio-pedido, .estudio-espera o .estudio-liberado en el <article>.
 * La pertinencia (.pertinencia-*) sólo se muestra en «resultados» (§4 del plan).
 * ============================================================================= */
.estudio {
    padding: var(--sp-4);
    background: var(--white);
    border: 1px solid var(--clinica-papel-borde);
    border-left-width: 4px;
    border-radius: var(--r-md);
}
.estudio + .estudio { margin-top: var(--sp-3); }
.estudio-pedido   { border-left-color: var(--clinica-azul-forma); }
.estudio-espera   { border-left-color: var(--clinica-amarillo-forma); }
.estudio-liberado { border-left-color: var(--clinica-verde-forma); }

.estudio-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
}
.estudio-nombre {
    font-size: var(--fs-md);
    color: var(--sky-900);
    margin-right: auto;
}
.estudio-tipo {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}

/* El estado en palabras, con su forma: anillo (pedido), reloj de arena
 * dibujado como dos triángulos (en espera) y palomita (liberado). */
.estudio-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.estudio-estado::before { content: ""; flex-shrink: 0; box-sizing: border-box; }
.estudio-pedido .estudio-estado { background: var(--clinica-azul-fondo); color: var(--clinica-azul-texto); }
.estudio-pedido .estudio-estado::before {
    width: 10px; height: 10px;
    border: 2px solid var(--clinica-azul-forma);
    border-radius: 50%;
}
.estudio-espera .estudio-estado { background: var(--clinica-amarillo-fondo); color: var(--clinica-amarillo-texto); }
.estudio-espera .estudio-estado::before {
    width: 9px; height: 11px;
    background: var(--clinica-amarillo-forma);
    clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%);
}
.estudio-liberado .estudio-estado { background: var(--clinica-verde-fondo); color: var(--clinica-verde-texto); }
.estudio-liberado .estudio-estado::before {
    width: 5px; height: 9px;
    margin: -2px 1px 0;
    border: solid var(--clinica-verde-forma);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Los tres pasos, en línea. Hecho: círculo lleno; actual: círculo con anillo
 * y texto en negrita; por venir: círculo hueco. */
.estudio-pasos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-5);
    margin: var(--sp-3) 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}
.estudio-pasos li {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.estudio-pasos li::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 2px solid var(--clinica-gris-forma);
    border-radius: 50%;
    box-sizing: border-box;
}
.estudio-pasos li + li::after {      /* el conector entre pasos */
    content: "";
    position: absolute;
    left: calc(-1 * var(--sp-5) + 4px);
    top: 50%;
    width: calc(var(--sp-5) - 8px);
    border-top: 2px solid var(--line);
}
.estudio-pasos .paso-hecho { color: var(--ink); }
.estudio-pasos .paso-hecho::before {
    background: var(--clinica-acento);
    border-color: var(--clinica-acento);
}
.estudio-pasos [aria-current="step"] {
    color: var(--sky-900);
    font-weight: var(--fw-bold);
}
.estudio-pasos [aria-current="step"]::before {
    box-shadow: 0 0 0 3px var(--clinica-acento-suave);
    background: var(--clinica-acento);
    border-color: var(--clinica-acento);
}

.estudio-justificacion {
    font-size: var(--fs-sm);
    color: var(--ink);
}
.estudio-justificacion strong { color: var(--sky-900); }
.estudio-nota {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}
/* position: relative la vuelve el bloque contenedor de los .visualmente-oculto
 * de la tabla; sin ella, esos textos absolutos escapan del desplazamiento
 * horizontal y ensanchan la página en el celular. */
.estudio-resultado { position: relative; margin-top: var(--sp-3); overflow-x: auto; }

/* Resultados de laboratorio: cifras tabulares alineadas a la derecha. */
.resultado-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.resultado-tabla caption {
    text-align: left;
    padding-bottom: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}
.resultado-tabla th,
.resultado-tabla td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--clinica-renglon);
    text-align: left;
}
.resultado-tabla thead th {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--clinica-acento-suave);
}
.resultado-tabla tbody th { font-weight: var(--fw-medium); color: var(--ink); }
.resultado-tabla .num {
    text-align: right;
    font-family: var(--clinica-fuente-cifras);
    font-variant-numeric: tabular-nums lining-nums;
}
.resultado-tabla .fuera-de-rango td,
.resultado-tabla .fuera-de-rango th { background: #fffbeb; }
.resultado-tabla .fuera-de-rango .num { font-weight: var(--fw-bold); color: var(--clinica-amarillo-texto); }
.marca-rango {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: 4px;
    background: var(--clinica-amarillo-fondo);
    color: var(--clinica-amarillo-texto);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

/* ---- Pertinencia: sólo en la pantalla de resultados (decisión 25) ----
 *   <span class="pertinencia pertinencia-indispensable">Indispensable</span>
 * Formas: círculo lleno (indispensable), círculo hueco (útil), raya (no
 * indicado) y equis (dañino). */
.pertinencia {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}
.pertinencia::before { content: ""; flex-shrink: 0; box-sizing: border-box; }
.pertinencia-indispensable { background: var(--clinica-verde-fondo); color: var(--clinica-verde-texto); }
.pertinencia-indispensable::before { width: 9px; height: 9px; border-radius: 50%; background: var(--clinica-verde-forma); }
.pertinencia-util { background: var(--clinica-azul-fondo); color: var(--clinica-azul-texto); }
.pertinencia-util::before { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--clinica-azul-forma); }
.pertinencia-no-indicado { background: var(--clinica-gris-fondo); color: var(--clinica-gris-texto); }
.pertinencia-no-indicado::before { width: 10px; height: 3px; border-radius: 2px; background: var(--clinica-gris-forma); }
.pertinencia-danino { background: var(--clinica-rojo-fondo); color: var(--clinica-rojo-texto); }
.pertinencia-danino::before {
    width: 10px; height: 10px;
    background: var(--clinica-rojo-forma);
    clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
}
/* Un indispensable que el equipo no pidió. */
.pertinencia-faltante {
    background: var(--white);
    border: 1.5px dashed var(--clinica-verde-forma);
    color: var(--clinica-verde-texto);
}


/* =============================================================================
 * 8. Avatar del paciente
 * -----------------------------------------------------------------------------
 * Las cinco expresiones van precargadas, una encima de otra, y se ve la que
 * diga data-expresion del <figure>. Así el script sólo cambia un atributo y la
 * expresión cambia al instante, antes que el texto (H.4), sin esperar una
 * descarga. Las ocultas usan visibility: hidden, que también las saca del árbol
 * de accesibilidad: el lector de pantalla sólo oye el alt de la visible.
 *
 *   <figure class="avatar-paciente" data-expresion="tranquilo">
 *     <div class="avatar-paciente-marco">
 *       <img class="avatar-paciente-img" data-expresion="tranquilo"
 *            src="…/img/avatar/tranquilo.svg" alt="Paciente ficticia, con expresión tranquila">
 *       … una <img> por expresión: tranquilo, dolor, ansiedad, disnea, nausea …
 *     </div>
 *     <figcaption class="avatar-paciente-pie">
 *       <span class="avatar-paciente-nombre">Paciente ficticia</span>
 *       <span class="avatar-paciente-estado">Tranquila</span>
 *     </figcaption>
 *   </figure>
 *
 * Tamaños: por omisión 200 px; .avatar-paciente-chico (72 px, para tarjetas y
 * el encabezado del chat; 52 px en las tarjetas del monitor) y
 * .avatar-paciente-grande (280 px). En el chico la imagen se amplía 1.4 veces
 * dentro del marco: a ese tamaño la cara medía unos 22 px y las cinco
 * expresiones no se distinguían. Mientras el paciente «piensa»,
 * aria-busy="true" en el <figure> muestra un anillo.
 * ============================================================================= */
.avatar-paciente {
    --avatar-tamano: 200px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
}
.avatar-paciente-chico  { --avatar-tamano: 72px; }
.avatar-paciente-grande { --avatar-tamano: 280px; }

.avatar-paciente-marco {
    position: relative;
    width: var(--avatar-tamano);
    height: var(--avatar-tamano);
    border-radius: 24%;
    overflow: hidden;
    background: var(--clinica-acento-suave);
    border: 2px solid var(--clinica-papel-borde);
    transition: box-shadow var(--t-base);
}
.avatar-paciente-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}
.avatar-paciente[data-expresion="tranquilo"] .avatar-paciente-img[data-expresion="tranquilo"],
.avatar-paciente[data-expresion="dolor"]     .avatar-paciente-img[data-expresion="dolor"],
.avatar-paciente[data-expresion="ansiedad"]  .avatar-paciente-img[data-expresion="ansiedad"],
.avatar-paciente[data-expresion="disnea"]    .avatar-paciente-img[data-expresion="disnea"],
.avatar-paciente[data-expresion="nausea"]    .avatar-paciente-img[data-expresion="nausea"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease, visibility 0s;
}

.avatar-paciente-pie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
}
.avatar-paciente-nombre {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--sky-900);
}
.avatar-paciente-estado {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--clinica-gris-fondo);
    color: var(--clinica-gris-texto);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}
.avatar-paciente-chico .avatar-paciente-marco { border-width: 1.5px; }
.avatar-paciente-chico .avatar-paciente-pie { display: none; }
/* Acercamiento a la cara en el tamaño chico: el marco ya recorta (overflow:
 * hidden). Se pierde la coronilla y parte de los hombros, pero la expresión,
 * que es lo que el docente vigila en el monitor, se lee. */
.avatar-paciente-chico .avatar-paciente-img {
    transform: scale(1.4);
    transform-origin: 50% 40%;
}

/* El paciente está pensando: anillo que respira alrededor del marco. */
.avatar-paciente[aria-busy="true"] .avatar-paciente-marco {
    box-shadow: 0 0 0 3px var(--clinica-acento);
    animation: clinica-pulso 1.6s ease-in-out infinite;
}


/* =============================================================================
 * 9. Semáforo del monitor
 * -----------------------------------------------------------------------------
 * Verde, amarillo, rojo y gris, SIEMPRE con texto y con forma: círculo (verde),
 * triángulo (amarillo), cuadrado (rojo) y anillo (gris: desconectado o
 * inactivo, es un estado y no un indicio). docs/ALCANCE_MONITOREO_WEB.md §4.2.
 *   <span class="semaforo semaforo-amarillo">
 *     <span class="visualmente-oculto">Amarillo:</span> Fuera ahora 0:18
 *   </span>
 * ============================================================================= */
.semaforo {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.65rem 0.2rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    white-space: nowrap;
}
.semaforo::before {
    content: "";
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    box-sizing: border-box;
}
.semaforo-verde {
    background: var(--clinica-verde-fondo);
    border-color: var(--clinica-verde-forma);
    color: var(--clinica-verde-texto);
}
.semaforo-verde::before { border-radius: 50%; background: var(--clinica-verde-forma); }

.semaforo-amarillo {
    background: var(--clinica-amarillo-fondo);
    border-color: var(--clinica-amarillo-forma);
    color: var(--clinica-amarillo-texto);
}
.semaforo-amarillo::before {
    width: 12px;
    background: var(--clinica-amarillo-forma);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.semaforo-rojo {
    background: var(--clinica-rojo-fondo);
    border-color: var(--clinica-rojo-forma);
    color: var(--clinica-rojo-texto);
}
.semaforo-rojo::before { width: 10px; height: 10px; background: var(--clinica-rojo-forma); }

.semaforo-gris {
    background: var(--clinica-gris-fondo);
    border-color: var(--clinica-gris-forma);
    color: var(--clinica-gris-texto);
}
.semaforo-gris::before { border-radius: 50%; border: 2px solid var(--clinica-gris-forma); }


/* =============================================================================
 * 10. Cola de pendientes del docente
 * -----------------------------------------------------------------------------
 * Todo lo que espera al docente, en una sola lista ordenada por tiempo de
 * espera (PLAN_GENERAL §5). Más de 2 minutos es la medida que no debe pasarse:
 * .cola-item-demorado lo dice con texto, no sólo con el filete.
 *   <section class="cola-pendientes" aria-labelledby="cola-t">
 *     <header class="cola-cabeza">
 *       <h3 id="cola-t">Pendientes</h3><span class="cola-cuenta">4</span>
 *     </header>
 *     <ol class="cola-lista">
 *       <li class="cola-item cola-item-demorado">
 *         <p class="cola-espera"><span class="cifras">2:40</span>
 *            <span class="cola-demora">Más de 2 min</span></p>
 *         <div class="cola-detalle">
 *           <p><strong class="cola-equipo">Equipo 3</strong>
 *              <span class="cola-tipo">Estudio</span></p>
 *           <p class="cola-que">Ultrasonido abdominal</p>
 *           <p class="cola-motivo">Justificación: …</p>
 *         </div>
 *         <div class="cola-acciones">
 *           <button type="button" class="btn btn-primary btn-sm">Liberar</button>
 *         </div>
 *       </li>
 *     </ol>
 *     <p class="cola-vacia">Nada pendiente.</p>   (sólo cuando la lista está vacía)
 *   </section>
 * ============================================================================= */
.cola-pendientes {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.cola-cabeza {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    background: var(--sky-50);
}
.cola-cabeza h2,
.cola-cabeza h3 { font-size: var(--fs-md); }
.cola-cuenta {
    min-width: 1.6rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--sky-700);
    color: var(--white);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.6rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.cola-lista { list-style: none; }
.cola-item {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    border-left: 4px solid transparent;
}
.cola-item:last-child { border-bottom: 0; }
.cola-espera {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.cola-demora {
    white-space: nowrap;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--clinica-amarillo-texto);
}
.cola-detalle p { color: var(--ink); font-size: var(--fs-sm); }
.cola-equipo { color: var(--sky-900); }
.cola-tipo {
    margin-left: var(--sp-1);
    padding: 0 0.4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}
.cola-que { font-weight: var(--fw-medium); }
.cola-detalle .cola-motivo { color: var(--ink-soft); font-size: var(--fs-xs); }
.cola-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.cola-item-demorado {
    border-left-color: var(--clinica-amarillo-forma);
    background: #fffbeb;
}
.cola-vacia {
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

@media (max-width: 640px) {
    .cola-item { grid-template-columns: 1fr; gap: var(--sp-2); }
    .cola-espera { flex-direction: row; gap: var(--sp-2); align-items: baseline; }
    .cola-acciones { justify-content: flex-start; }
}


/* =============================================================================
 * 11. Modo proyector
 * -----------------------------------------------------------------------------
 * <body class="modo-proyector">: letra grande y alto contraste, para leerse
 * desde el fondo del salón. Se redefinen los tokens y todo lo demás los hereda.
 * Lo que no se proyecta (nombres, alertas) no se pinta en el servidor; aquí sólo
 * cambia el aspecto (ver .oculto-en-proyector en §3).
 * ============================================================================= */
.modo-proyector {
    --fs-xs:   0.95rem;
    --fs-sm:   1.1rem;
    --fs-base: 1.3rem;
    --fs-md:   1.55rem;
    --fs-lg:   2rem;
    --fs-xl:   2.6rem;
    --fs-2xl:  3.6rem;
    --clinica-texto-lectura: 1.35rem;
}

/* La paleta de alto contraste: la del proyector y la de quien pide más
 * contraste en su sistema. */
.modo-proyector {
    --ink:      #0f172a;
    --ink-soft: #1e293b;
    --muted:    #334155;
    --line:     #64748b;
    --paper:    #ffffff;
    --sky-900:  #082f49;
    --clinica-papel:       #ffffff;
    --clinica-papel-borde: #475569;
    --clinica-renglon:     #cbd5e1;
    --shadow-sm: none;
    --shadow-md: none;
    --clinica-sombra-hoja: none;
    background: var(--white);
}
@media (prefers-contrast: more) {
    :root {
        --ink:      #0f172a;
        --ink-soft: #1e293b;
        --muted:    #334155;
        --line:     #64748b;
        --clinica-papel-borde: #475569;
    }
}

.modo-proyector .card,
.modo-proyector .signo,
.modo-proyector .estudio,
.modo-proyector .hoja-clinica,
.modo-proyector .cola-pendientes { border-width: 2px; }
.modo-proyector .estudio { border-left-width: 6px; }
.modo-proyector .semaforo,
.modo-proyector .guardado,
.modo-proyector .pertinencia,
.modo-proyector .estudio-estado { border-width: 2px; }
.modo-proyector .semaforo::before,
.modo-proyector .pertinencia::before { transform: scale(1.3); }
.modo-proyector :focus-visible { outline-width: 3px; }
.modo-proyector .signos-vitales { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.modo-proyector .cola-item { grid-template-columns: 9rem 1fr auto; }
.modo-proyector .demo-principal { max-width: 1600px; }


/* =============================================================================
 * 12. Movimiento y colores forzados
 * ============================================================================= */
@keyframes clinica-giro  { to { transform: rotate(360deg); } }
@keyframes clinica-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* base.css ya acorta animaciones y transiciones con prefers-reduced-motion;
 * aquí, además, se quitan las que se repiten sin fin. */
@media (prefers-reduced-motion: reduce) {
    .escribiendo::before,
    .guardado-guardando::before,
    .avatar-paciente[aria-busy="true"] .avatar-paciente-marco { animation: none; }
}

/* Windows con contraste alto: los fondos desaparecen y las formas de estado
 * se pintarían en blanco. Se dibujan con el color del texto del sistema. */
@media (forced-colors: active) {
    .semaforo::before,
    .guardado-pendiente::before,
    .guardado-error::before,
    .estudio-espera .estudio-estado::before,
    .pertinencia::before,
    .signo-marca::before,
    .estudio-pasos .paso-hecho::before {
        forced-color-adjust: none;
        background: CanvasText;
        border-color: CanvasText;
    }
    /* Las formas huecas (anillos) siguen huecas. */
    .semaforo-gris::before,
    .pertinencia-util::before {
        background: transparent;
    }
    .semaforo, .guardado, .pertinencia, .estudio-estado, .marca-demo {
        border: 1px solid CanvasText;
    }
}


/* =============================================================================
 * 13. Tacto: tabletas y pantallas táctiles (decisión 78)
 * -----------------------------------------------------------------------------
 * Cerca de la mitad de los alumnos entraría desde una tableta. Cuando el
 * puntero principal es un dedo (pointer: coarse: iPad y tabletas Android, con
 * o sin teclado externo), todo lo que se toca mide al menos 44 × 44 px, la
 * medida mínima de Apple y la de WCAG 2.5.5. Con ratón o trackpad no cambia
 * nada: la laptop y el proyector se quedan como están (decisión 73).
 *
 *   - Sólo pointer, no any-pointer: una laptop con pantalla táctil sigue con
 *     su aspecto de laptop. Lo que mide 40 px ya era cómodo ahí.
 *   - Los enlaces dentro de un párrafo se quedan a la medida del texto (la
 *     excepción «en línea» de WCAG 2.5.8); los que van solos en su renglón,
 *     no: cada hoja de módulo los agranda.
 *   - Los campos de texto van a 16 px como mínimo. Con menos, Safari de
 *     iPhone acerca la página al tocar el campo y no la regresa al salir; en
 *     iPad no está comprobado (ALCANCE_MONITOREO_WEB.md §16), y 16 px no
 *     cuestan nada. max() con 1em respeta la letra grande del proyector, y la
 *     hoja clínica ya va a 17 px.
 *   - Lo de cada pantalla (pestañas, índice, desplegables) está en su hoja de
 *     módulo, en su propio bloque «Tacto».
 *   - Nada de esta capa depende de :hover: en una tableta el «hover» se queda
 *     pegado después de tocar, y aquí sólo cambia colores.
 * ============================================================================= */
@media (pointer: coarse) {
    body.demo .btn { min-height: 44px; }
    body.demo .btn-sm {
        height: auto;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
        line-height: 1.2;
    }

    /* Encabezado y navegación de la demo. */
    /* inline-block y no flex: con flex, el espacio de « · Demostración» se perdía. */
    body.demo .barra-demo .app-brand {
        display: inline-block;
        line-height: 44px;
    }
    body.demo .nav-demo a { min-height: 44px; }

    /* Los desplegables nativos: el renglón del resumen entero se toca. El
     * relleno que centra el texto lo pone cada hoja de módulo, porque cada
     * resumen trae el suyo y aquí sólo se achicaría. */
    body.demo summary { min-height: 44px; }

    body.demo :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea):not(.hoja-texto) {
        font-size: max(16px, 1em);
    }
    body.demo :is(input:not([type="radio"]):not([type="checkbox"]), select) { min-height: 44px; }
}