/* =============================================================================
   STADO — sistema visual
   Implementado por Claude (Opus 5), 2026-08-24.
   =============================================================================
   Reemplaza los estilos embebidos del _Layout. Un solo archivo, sin
   dependencias, sin cadena JS: se sirve tal cual (docs/ARQUITECTURA_Y_PLAN.md,
   decision de stack).

   Criterio de diseno, que sale del escenario real de uso:
   el instructor mira la pantalla DE PIE, al costado del alumno, unos segundos
   cada vez. Por eso: tipografia grande, contraste alto, y jerarquia marcada
   por tamano y peso antes que por color. Nada de adornos que compitan con el
   dato.
   ========================================================================== */

:root {
    /* Neutros: la base de casi toda la interfaz */
    --fondo:            #f4f5f7;
    --superficie:       #ffffff;
    --superficie-alt:   #fafbfc;
    --borde:            #d8dce3;
    --borde-suave:      #e8ebef;

    --texto:            #1a1f27;
    --texto-medio:      #5a6472;
    /* Medido contra los TRES fondos del sistema, no solo contra blanco:
       4,60:1 sobre --fondo, 5,02 sobre --superficie, 4,84 sobre --superficie-alt.
       El #8b95a3 original daba 3,03:1 y dejaba ilegible a distancia la hora de
       cada marca de la bitacora, que es la evidencia del registro. */
    --texto-tenue:      #66707e;

    /* Acento sobrio, industrial. Se usa poco a proposito: si todo destaca,
       nada destaca. Azul profundo tomado de la maqueta de acceso, para que la
       pantalla de entrada y las quince interiores sean el mismo producto. */
    --acento:           #14395c;
    --acento-fuerte:    #0d2942;
    --acento-suave:     #e9eef4;
    --acento-claro:     #3d7ab5;   /* solo enlaces sobre blanco y trazos finos */

    /* Fondo de marca: el panel de la pantalla de acceso. */
    --marca-fondo:      #14395c;
    --marca-fondo-hondo:#0f2c47;
    --marca-texto:      #ffffff;
    --marca-texto-tenue:#9db3c9;
    --marca-linea:      rgba(255, 255, 255, .14);

    /* Estados. El rojo se reserva para lo que de verdad interrumpe. */
    --ok:               #1d7a4c;
    --ok-suave:         #e6f4ec;
    /* 5,06:1 sobre --fondo. El #9a6700 anterior daba 4,46 y el aviso de
       irreversibilidad de la ficha —el texto que hay que leer antes de guardar
       algo que no se puede deshacer— no llegaba a AA. */
    --aviso:            #8f5f00;
    --aviso-suave:      #fdf4e3;
    --alarma:           #b02a24;
    --alarma-suave:     #fbeceb;

    /* Cohorte B del diseno escalonado. Ni verde ni ambar ni rojo: no es un
       estado, es un grupo. 5,79:1 sobre su propio fondo, medido. */
    --cohorte-b:        #6a4494;
    --cohorte-b-suave:  #f1ecf8;

    --radio:            6px;
    --sombra:           0 1px 2px rgba(16, 24, 40, .05);
    --sombra-alta:      0 4px 12px rgba(16, 24, 40, .10);
}

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

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
}

/* --- Cabecera ----------------------------------------------------------- */

.barra {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.barra .marca {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.02em;
    color: var(--texto);
    text-decoration: none;
}

.barra nav { display: flex; gap: 4px; flex-wrap: wrap; }

.barra nav a {
    color: var(--texto-medio);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--radio);
    font-size: 14px;
}
.barra nav a:hover { background: var(--superficie-alt); color: var(--texto); }
.barra nav a.activo { background: var(--acento-suave); color: var(--acento-fuerte); font-weight: 600; }

.barra .sesion { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--texto-medio); }

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

main { max-width: 1320px; margin: 0 auto; padding: 24px; }

h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 650; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
     color: var(--texto-tenue); margin: 0 0 10px; }

.subtitulo { color: var(--texto-medio); margin: 0 0 20px; }

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

.rejilla { display: grid; gap: 16px; }
.rejilla.dos   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla.tres  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --- El dato como protagonista ------------------------------------------ */

.dato { display: flex; flex-direction: column; gap: 2px; }
.dato .etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); font-weight: 600; }
.dato .valor { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.dato .valor.grande { font-size: 34px; line-height: 1.1; }
.dato .valor.enorme { font-size: 52px; line-height: 1; letter-spacing: -.03em; }

/* Un valor que no se pudo medir NUNCA se muestra como cero (principio 7 del
   proyecto: nulo antes que inventado). */
.no-medido { color: var(--texto-tenue); font-style: italic; font-weight: 400; font-size: 15px; }

/* --- Tablas ------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-tenue);
    font-weight: 650;
    padding: 10px 12px;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

td { padding: 12px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
tbody tr:hover { background: var(--superficie-alt); }
tbody tr:last-child td { border-bottom: none; }

.tabla-contenedor { overflow-x: auto; }
code, .mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 13px; color: var(--texto-medio); }

/* --- Distintivos de estado ---------------------------------------------- */

.marca {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 650; letter-spacing: .01em;
    background: var(--superficie-alt); color: var(--texto-medio);
    border: 1px solid var(--borde-suave);
    white-space: nowrap;
}
.marca.ok     { background: var(--ok-suave);     color: var(--ok);     border-color: transparent; }
.marca.aviso  { background: var(--aviso-suave);  color: var(--aviso);  border-color: transparent; }
.marca.alarma { background: var(--alarma-suave); color: var(--alarma); border-color: transparent; }
.marca.activo { background: var(--acento-suave); color: var(--acento-fuerte); border-color: transparent; }

.marca::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.marca.sin-punto::before { display: none; }

/* --- Botones ------------------------------------------------------------ */

button, .boton {
    font: inherit; font-weight: 600; font-size: 14px;
    padding: 9px 16px;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    transition: background .12s, border-color .12s;
}
button:hover, .boton:hover { background: var(--superficie-alt); border-color: var(--texto-tenue); }

.boton-primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton-primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

/* Botones de marca rapida: se pulsan de pie y con prisa, asi que son grandes
   y con area amplia. */
.boton-marca {
    padding: 16px 14px;
    font-size: 15px;
    text-align: center;
    min-height: 62px;
    width: 100%;
}
.boton-marca.positivo { background: var(--ok-suave); border-color: transparent; color: var(--ok); }
.boton-marca.positivo:hover { background: #d6ecdf; }

.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* --- Formularios -------------------------------------------------------- */

label { display: block; font-size: 13px; font-weight: 600; color: var(--texto-medio); margin-bottom: 5px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], select, textarea {
    font: inherit; font-size: 14px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-suave);
}
textarea { resize: vertical; min-height: 76px; }
.campo { margin-bottom: 14px; }

/* Escala de 1 a 5 del formulario de cierre: botones grandes, no un desplegable. */
.escala { display: flex; gap: 8px; }
.escala input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.escala label {
    flex: 1; margin: 0;
    padding: 14px 0;
    text-align: center;
    font-size: 17px; font-weight: 650;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto-medio);
    cursor: pointer;
}
.escala input[type=radio]:checked + label {
    background: var(--acento); border-color: var(--acento); color: #fff;
}

/* --- Avisos ------------------------------------------------------------- */

.aviso {
    padding: 12px 14px;
    border-radius: var(--radio);
    border-left: 3px solid var(--texto-tenue);
    background: var(--superficie-alt);
    margin-bottom: 16px;
    font-size: 14px;
}
.aviso.error   { border-left-color: var(--alarma); background: var(--alarma-suave); color: #7d1f1a; }
.aviso.correcto{ border-left-color: var(--ok);     background: var(--ok-suave);     color: #145c39; }
.aviso.atencion{ border-left-color: var(--aviso);  background: var(--aviso-suave);  color: #6f4a00; }

/* La alarma de captura caida tiene que verse desde lejos: es el fallo mas caro
   del sistema (§16.1 del plan, mando desconectado grabando ceros). */
.alarma-grande {
    background: var(--alarma-suave);
    border: 2px solid var(--alarma);
    border-radius: var(--radio);
    padding: 20px;
    text-align: center;
    color: #7d1f1a;
    font-size: 20px;
    font-weight: 700;
}

/* --- Estado vacio: se disena, no se deja en blanco ---------------------- */

.vacio {
    text-align: center;
    padding: 44px 20px;
    color: var(--texto-tenue);
    background: var(--superficie-alt);
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
}
.vacio p { margin: 0 0 4px; font-size: 15px; }
.vacio .pista { font-size: 13px; }

/* --- Barra de progreso y cobertura -------------------------------------- */

.progreso { height: 8px; background: var(--borde-suave); border-radius: 999px; overflow: hidden; }
.progreso > span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.progreso.cobertura > span { background: var(--ok); }
.progreso.cobertura.baja > span { background: var(--aviso); }

/* =============================================================================
   Pantalla de acceso — lienzo de marca + formulario
   Implementado por Claude (Opus 5), 2026-08-24, portando la maqueta de V0.
   =============================================================================
   Es la unica pantalla del sistema que no lleva la barra de navegacion: se
   sirve con Layout = null (o con _LayoutAcceso) porque ocupa el alto completo.
   Todo lo de aqui es CSS: el trazo y el separador son gradientes, no imagenes,
   para no anadir un asset mas al despliegue.
   ========================================================================== */

.acceso {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    min-height: 100vh;
    background: var(--superficie);
}

/* --- Panel izquierdo: la marca ------------------------------------------ */

.acceso .lienzo {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 44px 52px;
    background: var(--marca-fondo);
    color: var(--marca-texto);
}

/* Profundidad y el trazo diagonal del fondo, sin imagenes. */
.acceso .lienzo::before {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 42%),
        radial-gradient(120% 90% at 88% 78%, rgba(255,255,255,.07) 0%, transparent 58%),
        linear-gradient(160deg, var(--marca-fondo) 0%, var(--marca-fondo-hondo) 100%);
    z-index: 0;
}
.acceso .lienzo > * { position: relative; z-index: 1; }

.acceso .logotipo { display: flex; align-items: center; gap: 10px; }
.acceso .logotipo svg { display: block; }
.acceso .logotipo .nombre {
    font-size: 19px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--marca-texto);
}

/* Antetitulo: la etiqueta pequena en versalitas que ordena cada bloque. */
.antetitulo {
    display: block;
    font-size: 11px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--texto-tenue);
    margin: 0 0 10px;
}
.lienzo .antetitulo { color: var(--marca-texto-tenue); }

/* El lema. La segunda frase pesa mas que la primera: la promesa esta ahi. */
.lema {
    font-size: clamp(30px, 3.1vw, 43px);
    line-height: 1.14;
    font-weight: 400;
    letter-spacing: -.025em;
    margin: 0 0 20px;
    /* Ancho medido, no elegido: con menos, el lema cae a cinco lineas y pierde
       el golpe; con mas, la primera frase se pega al borde del panel. */
    max-width: 23ch;
}
.lema strong { font-weight: 700; }

.descripcion-marca {
    font-size: 14px;
    line-height: 1.6;
    color: var(--marca-texto-tenue);
    max-width: 46ch;
    margin: 0;
}

/* --- Bloque de instrumentacion: trazo + cifras --------------------------- */

/* 32px y no 8: con 8 la descripcion y el bloque de instrumentacion se leen
   como un solo parrafo. Medido en el VPS contra el navegador real. */
.instrumentacion { margin-top: 32px; }

.trazo { display: block; width: 100%; max-width: 230px; height: auto; margin-bottom: 22px; }
.trazo path, .trazo line, .trazo polyline { fill: none; stroke: var(--marca-linea); stroke-width: 1; }
.trazo .serie { stroke: rgba(255,255,255,.55); stroke-width: 1.5; }

.metricas-marca {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 400px;
}
.metricas-marca .cifra {
    display: block;
    font-size: 25px; font-weight: 650;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--marca-texto);
    line-height: 1.1;
}
.metricas-marca .pie {
    display: block;
    margin-top: 5px;
    font-size: 11px; font-weight: 500;
    color: var(--marca-texto-tenue);
    line-height: 1.35;
}
/* Una cifra que no se pudo medir se escribe asi, nunca como un cero ni como un
   numero de folleto (regla 2 de PANTALLAS_INVENTARIO_DATOS.md). */
.metricas-marca .cifra.no-medido { font-size: 17px; color: var(--marca-texto-tenue); }

/* --- Sectores: el pie del lienzo ---------------------------------------- */

.sectores {
    display: flex; flex-wrap: wrap; gap: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--marca-linea);
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--marca-texto-tenue);
}

/* --- Panel derecho: el formulario --------------------------------------- */

.acceso .ingreso {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 52px;
}
.acceso .ingreso > .caja {
    width: 100%;
    max-width: 372px;
    /* auto en los cuatro lados: centra la caja y empuja el pie de version al
       fondo del panel sin posicionamiento absoluto. */
    margin: auto;
}

.acceso .ingreso h1 { font-size: 28px; font-weight: 650; margin: 0 0 6px; }
.acceso .ingreso .subtitulo { font-size: 14px; margin: 0 0 26px; }

/* Etiqueta a la izquierda y enlace de ayuda a la derecha, en la misma linea. */
.campo-cabecera {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 5px;
}
.campo-cabecera label { margin: 0; }

a.enlace { color: var(--acento-claro); text-decoration: none; font-size: 13px; font-weight: 500; }
a.enlace:hover { text-decoration: underline; }

.acceso input[type=email], .acceso input[type=password], .acceso input[type=text] {
    padding: 12px 13px;
    font-size: 15px;
}
.acceso input::placeholder { color: var(--texto-tenue); }

/* Boton de ancho completo: rotulo centrado y la flecha anclada al borde. */
.boton-primario.ancho {
    width: 100%;
    padding: 13px 16px;
    font-size: 15px;
    margin-top: 6px;
}
.boton-primario.ancho .rotulo { flex: 1; text-align: center; }
.boton-primario.ancho .flecha { flex: 0 0 auto; font-size: 16px; line-height: 1; }

.nota-restringida {
    display: flex; align-items: center; gap: 7px;
    margin: 18px 0 0;
    font-size: 12px;
    color: var(--texto-tenue);
}
.nota-restringida svg { flex: 0 0 auto; }

.pie-version {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding-top: 16px;
    font-size: 12px;
    color: var(--texto-tenue);
}

/* --- Acceso en pantallas pequenas --------------------------------------- */

@media (max-width: 900px) {
    .acceso { grid-template-columns: 1fr; min-height: 100dvh; }
    .acceso .lienzo { padding: 28px 24px 32px; gap: 24px; }
    /* Con poco alto manda el formulario: sin esto el boton de ingreso cae bajo
       el pliegue en un telefono de 780 px (medido). Se retira lo prescindible
       —instrumentacion y sectores— y se conserva la identidad: marca y lema. */
    .acceso .lienzo .instrumentacion,
    .acceso .lienzo .sectores { display: none; }
    .lema { font-size: 27px; max-width: none; margin-bottom: 14px; }
    .descripcion-marca { font-size: 13px; }
    .acceso .ingreso { padding: 32px 24px 40px; }
    .acceso .ingreso > .caja { margin: 0 auto; }
    .pie-version { margin-top: 28px; }
}

/* =============================================================================
   Consola del instructor — /Instructor/Session
   Implementado por Claude (Opus 5), 2026-08-24, portando la maqueta de V0.
   =============================================================================
   Es una pantalla de vigilancia, no de lectura: el instructor esta DE PIE al
   costado del alumno y la mira de reojo. De ahi las tres decisiones que la
   gobiernan y que conviene no deshacer sin motivo:

   1. Lleva barra propia, no la navegacion general. Durante una practica no hay
      a donde ir: la unica salida es cerrar la practica.
   2. "Hace cuanto llego el ultimo dato" es la senal mas importante de la
      pantalla —es la prueba de que la captura esta viva— y por eso tiene fila
      propia y no es un texto mas (PANTALLAS_INVENTARIO_DATOS.md, pantalla 1).
   3. Los botones de marca se pulsan con prisa y sin mirar: area grande, un
      color por familia y ningun dialogo de confirmacion.
   ========================================================================== */

/* --- Barra de la consola ------------------------------------------------- */

.consola-barra {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 0 22px;
    min-height: 46px;
    background: var(--marca-fondo);
    color: var(--marca-texto);
    position: sticky; top: 0; z-index: 10;
}
.consola-barra .logotipo .nombre { font-size: 15px; }
.consola-barra .modo {
    font-size: 11px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--marca-texto-tenue);
    padding-left: 18px;
    border-left: 1px solid var(--marca-linea);
}
/* La barra es oscura: TODO lo que caiga dentro tiene que ser claro. Sin estas
   reglas, la navegacion heredaba los colores del tema claro y quedaba en
   1,98:1 —cinco enlaces ilegibles— y la marca en 1,26:1. Medido en navegador
   sobre el _Layout real, no sobre la maqueta. */
.consola-barra a { color: var(--marca-texto); text-decoration: none; }
.consola-barra .logotipo, .consola-barra .logotipo .nombre { color: var(--marca-texto); }

.consola-barra nav, .consola-barra .navigation { display: flex; gap: 2px; flex-wrap: wrap; }
.consola-barra nav a, .consola-barra .navigation a {
    color: #c3d2e1;
    padding: 6px 10px;
    border-radius: var(--radio);
    font-size: 14px; font-weight: 500;
}
.consola-barra nav a:hover, .consola-barra .navigation a:hover {
    background: rgba(255,255,255,.10); color: var(--marca-texto);
}
.consola-barra nav a.activa, .consola-barra .navigation a.activa {
    background: rgba(255,255,255,.14); color: var(--marca-texto); font-weight: 650;
}

.consola-barra .derecha { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.consola-barra .fecha {
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--marca-texto-tenue);
}
.consola-barra button, .consola-barra .boton {
    background: transparent;
    border-color: var(--marca-linea);
    color: var(--marca-texto);
    padding: 6px 12px; font-size: 13px;
}
.consola-barra button:hover, .consola-barra .boton:hover {
    background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35);
}
.consola-barra .redondo { border-radius: 999px; width: 24px; height: 24px; padding: 0; font-size: 12px; }

/* Senal de estado con punto. Sobre la barra oscura usa los claros. */
.senal {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--marca-texto-tenue);
}
.senal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.senal.viva  { color: #4ec27f; }
.senal.caida { color: #f08a83; }

/* --- Cabecera de la sesion: quien, que, con que, cuanto ------------------ */

.cabecera-sesion {
    display: grid;
    grid-template-columns: 1.1fr 1.5fr 1.2fr 1.2fr .62fr .72fr;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}
.cabecera-sesion .celda { padding: 16px 20px; border-left: 1px solid var(--borde-suave); min-width: 0; }
.cabecera-sesion .celda:first-child { border-left: none; }
.cabecera-sesion .etiqueta {
    display: block;
    font-size: 10px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--texto-tenue);
    margin-bottom: 7px;
}
.cabecera-sesion .valor {
    display: block;
    font-size: 17px; font-weight: 650; letter-spacing: -.01em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.cabecera-sesion .valor.alumno { font-size: 21px; color: var(--acento); }
/* Cifras: numero grande y su denominador pequeno, para que "4 de 8" se lea
   como una sola magnitud y no como dos datos. */
.cabecera-sesion .valor.cifra { font-size: 29px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cabecera-sesion .valor.cifra .de { font-size: 14px; font-weight: 500; color: var(--texto-tenue); margin-left: 5px; }
.cabecera-sesion .valor.reloj { font-size: 29px; line-height: 1.05; color: var(--acento); font-variant-numeric: tabular-nums; }
.cabecera-sesion .apoyo { display: block; font-size: 12px; color: var(--texto-medio); margin-top: 5px; line-height: 1.4; }

/* --- Avance de la tarea -------------------------------------------------- */

.avance {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 14px 22px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde-suave);
}
.avance .antetitulo { margin: 0; flex: 0 0 auto; }
.avance .conteo { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.avance .conteo .de { font-size: 13px; font-weight: 500; color: var(--texto-tenue); margin-left: 5px; }
.avance .progreso { flex: 1 1 220px; min-width: 140px; }
.avance .fase { flex: 0 0 auto; font-size: 12px; color: var(--texto-medio); }

/* --- Estado de la captura: la fila que hay que leer de reojo ------------- */

.estado-captura {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 11px 22px;
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--borde-suave);
    font-size: 13px;
    color: var(--texto-medio);
}
.estado-captura .senal.viva  { color: var(--ok); }
.estado-captura .senal.caida { color: var(--alarma); }
.estado-captura .ultimo-dato { font-variant-numeric: tabular-nums; }
.estado-captura .pendientes { margin-left: auto; }
.estado-captura .pendientes b { font-weight: 650; color: var(--texto); font-variant-numeric: tabular-nums; }
/* Cuando el dato deja de llegar, esta fila se convierte en la alarma. */
.estado-captura.sin-dato {
    background: var(--alarma-suave);
    color: #7d1f1a;
    border-bottom-color: var(--alarma);
}

/* --- Botones de marca ---------------------------------------------------- */

.marcadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
}
.marcador {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    padding: 14px;
    min-height: 58px;
    font-size: 14px; font-weight: 600;
    text-align: left;
    line-height: 1.25;
}
.marcador .icono {
    flex: 0 0 auto;
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: var(--superficie-alt); color: var(--texto-medio);
}
/* Un color por familia de marca. El rojo se reserva al golpe: es el unico
   suceso que puede invalidar la practica. */
.marcador.atencion .icono { background: var(--aviso-suave);  color: var(--aviso); }
.marcador.grave    .icono { background: var(--alarma-suave); color: var(--alarma); }
.marcador.duda     .icono { background: var(--acento-suave); color: var(--acento); }
.marcador.bien       { border-color: #9ed3b6; background: var(--ok-suave); color: #145c39; }
.marcador.bien .icono { background: #c7e7d5; color: var(--ok); }
.marcador.bien:hover { background: #d6ecdf; border-color: var(--ok); }

/* --- Bitacora de lo marcado --------------------------------------------- */

.cabecera-bloque {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 12px;
}
.cabecera-bloque .antetitulo, .cabecera-bloque h2 { margin: 0; }
.cabecera-bloque .contador { font-size: 12px; color: var(--texto-tenue); }

.bitacora { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.bitacora .registro {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--borde-suave);
}
.bitacora .registro:last-child { border-bottom: none; }
.bitacora .registro::before {
    content: ""; flex: 0 0 auto;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--texto-tenue);
}
.bitacora .atencion::before { background: var(--aviso); }
.bitacora .grave::before    { background: var(--alarma); }
.bitacora .duda::before     { background: var(--acento); }
.bitacora .bien::before     { background: var(--ok); }
.bitacora .que { flex: 1 1 auto; min-width: 0; }
/* La hora exacta es la evidencia: se muestra siempre y con cifras de ancho
   fijo para que la columna no baile al refrescar. */
.bitacora .hora { flex: 0 0 auto; font-size: 13px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }

/* --- Anotaciones del instructor ----------------------------------------- */

.anotaciones { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.anotaciones textarea { min-height: 92px; font-size: 14px; }

/* La consola ocupa el ancho util: no se centra en 1320 como el resto. */
.consola { padding: 20px 22px 32px; }
.consola .rejilla.bitacoras { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }

/* --- Consola en pantallas pequenas -------------------------------------- */

@media (max-width: 1080px) {
    .cabecera-sesion { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .cabecera-sesion .celda { border-top: 1px solid var(--borde-suave); }
    .consola .rejilla.bitacoras { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .consola { padding: 14px; }
    .avance, .estado-captura, .cabecera-sesion .celda { padding-left: 14px; padding-right: 14px; }
    .estado-captura .pendientes { margin-left: 0; flex-basis: 100%; }
}

/* =============================================================================
   Ficha ciega del instructor — cierre de practica
   Implementado por Claude (Opus 5), 2026-08-24, portando la maqueta de V0.
   =============================================================================
   Esta pantalla NO es un formulario cualquiera: es el instrumento de medida del
   estudio, y su forma determina el dato. Tres cosas la gobiernan.

   1. ORDEN: primero el nivel global, despues el detalle por dimension. Al reves
      —seis escalas de 1 a 5 y luego el juicio— el juicio queda anclado en la
      suma de los items, que es justo lo que la ficha declara no hacer. El paso
      2 no existe en pantalla hasta que hay nivel elegido, y eso lo resuelve el
      CSS con :has(), sin una linea de JS.

   2. IRREVERSIBILIDAD VISIBLE: la valoracion es append-only y habilita el
      reporte del sistema. El aviso va PEGADO al boton de guardar, no arriba,
      porque se lee donde se decide.

   3. EL CSS NO ES LA GUARDA. Atenuar el boton evita el clic distraido; quien
      manda es el servidor. Ver nota sobre `required` en _maqueta/ficha.html.
   ========================================================================== */

/* Contexto de la practica dentro de la barra de consola. */
.consola-barra .contexto { padding-left: 18px; border-left: 1px solid var(--marca-linea); }
.consola-barra .contexto .rotulo {
    display: block;
    font-size: 10px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--marca-texto-tenue);
}
.consola-barra .contexto .detalle {
    display: block; margin-top: 2px;
    font-size: 12px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--marca-texto);
}

.ficha { max-width: 1180px; margin: 0 auto; padding: 28px 22px 40px; }

/* --- Cabecera de cada paso ---------------------------------------------- */

.cabecera-paso {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.cabecera-paso h2 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.cabecera-paso .antetitulo { margin: 0 0 4px; }
.indice-paso {
    font-size: 10px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--texto-tenue);
    white-space: nowrap;
}

.pregunta { font-size: 16px; font-weight: 650; margin: 0 0 4px; }
.pregunta + .pista { font-size: 13px; color: var(--texto-medio); margin: 0 0 16px; max-width: 62ch; }

/* --- Paso 1: los cuatro niveles ----------------------------------------- */

.niveles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.niveles input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.niveles label {
    margin: 0;
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 12px 10px;
    text-align: center;
    font-size: 15px; font-weight: 600;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    cursor: pointer;
}
.niveles label:hover { border-color: var(--acento); background: var(--acento-suave); }
.niveles input[type=radio]:checked + label {
    background: var(--acento); border-color: var(--acento); color: #fff;
}
/* El foco de teclado tiene que verse: el radio real es invisible. */
.niveles input[type=radio]:focus-visible + label {
    outline: 2px solid var(--acento); outline-offset: 2px;
}

/* --- Paso 2: aparece solo cuando ya hay juicio global -------------------- */

.paso-2 { display: none; margin-top: 34px; }
form:has(input[name="InstructorGlobalLevel"]:checked) .paso-2 { display: block; }

.dimensiones {
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    overflow: hidden;
}
.dimension {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--borde-suave);
    background: var(--superficie);
}
.dimension:last-child { border-bottom: none; }
.dimension .que { font-size: 14px; flex: 1 1 260px; min-width: 0; }

/* Escala 1-5 compacta y segmentada. La grande (.escala) sigue existiendo para
   otros usos; esta es para seis filas seguidas, donde la grande no cabe. */
.escala-compacta {
    display: flex; flex: 0 0 auto;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}
.escala-compacta input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.escala-compacta label {
    margin: 0;
    display: flex; align-items: center; justify-content: center;
    width: 38px; min-height: 34px;
    font-size: 14px; font-weight: 650;
    color: var(--texto-medio);
    background: var(--superficie);
    border-left: 1px solid var(--borde);
    cursor: pointer;
}
.escala-compacta label:first-of-type { border-left: none; }
.escala-compacta label:hover { background: var(--acento-suave); color: var(--acento-fuerte); }
.escala-compacta input[type=radio]:checked + label {
    background: var(--acento); color: #fff; border-left-color: var(--acento);
}
.escala-compacta input[type=radio]:focus-visible + label {
    outline: 2px solid var(--acento); outline-offset: -2px;
}

/* --- Pie: comentario, aviso e irreversibilidad --------------------------- */

.pie-ficha {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
    gap: 22px;
    align-items: start;
    margin-top: 26px;
}
.pie-ficha .campo { margin: 0; }

/* Va junto al boton a proposito: se lee donde se decide, no al entrar. */
.aviso-irreversible {
    font-size: 12px; line-height: 1.5;
    color: var(--aviso);
    padding-top: 26px;
}
.aviso-irreversible b { font-weight: 700; }

.pie-ficha .guardar { padding-top: 26px; }

/* Atenuado mientras falta el juicio global. NO es la guarda: el servidor lo
   es. Esto solo evita el clic distraido.

   Se escribe en NEGATIVO —:not(:has(...))—: el boton nace primario y solo se
   atenua mientras falta el juicio global. Una sola regla en vez de un gris por
   defecto mas su sobreescritura, que es la forma en que estas cosas se
   descuadran al tocarlas meses despues. */
.boton-guardar { min-width: 190px; padding: 13px 18px; }

form:not(:has(input[name="InstructorGlobalLevel"]:checked)) .boton-guardar {
    background-color: var(--borde-suave);
    border-color: var(--borde-suave);
    color: var(--texto-tenue);
    pointer-events: none;
}

/* --- Confirmacion: la valoracion quedo cerrada --------------------------- */

.pagina-centrada {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: var(--fondo);
}
.confirmacion {
    width: 100%; max-width: 420px;
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 30px 32px 32px;
}
.confirmacion .logotipo { margin-bottom: 26px; }
.confirmacion .logotipo .nombre { color: var(--texto); font-size: 15px; }
.confirmacion h1 { font-size: 23px; margin: 0 0 10px; }
.confirmacion p { font-size: 14px; color: var(--texto-medio); margin: 0 0 22px; line-height: 1.6; }

/* --- Ficha en pantallas pequenas ---------------------------------------- */

@media (max-width: 900px) {
    .niveles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pie-ficha { grid-template-columns: 1fr; gap: 14px; }
    .aviso-irreversible, .pie-ficha .guardar { padding-top: 0; }
    .boton-guardar { width: 100%; }
}
@media (max-width: 560px) {
    .ficha { padding: 20px 14px 32px; }
    .dimension { flex-direction: column; align-items: stretch; gap: 10px; }
    .escala-compacta label { flex: 1; width: auto; }
}

/* =============================================================================
   Reporte comparativo N vs N+1 — /Instructor/Report
   Implementado por Claude (Opus 5), 2026-08-24, portando la maqueta de V0.
   =============================================================================
   Es la unica pantalla que ve el alumno, y la que mas facil miente. Dos modos
   de fallo la gobiernan, los dos del plan §16.1:

   1. UNA SESION SIN MOVIMIENTO NO PUEDE PARECER PERFECTA. Hoy todos los ejes
      capturados estan en 0 porque nadie ha movido los mandos. Una metrica no
      calculable se pinta como ADVERTENCIA con su motivo al lado —fila ambar,
      texto ambar, razon explicita— y jamas como una celda vacia ni como un 0.
   2. NADA SE RESTA FUERA DE (fuente, tarea, version, dispositivo). Si las dos
      sesiones no comparten esa tupla, la fila de validez lo dice en vez de
      mostrar una diferencia sin sentido.

   La cobertura viaja SIEMPRE pegada al valor, nunca en una nota al pie: "0
   alertas con 94 % de cobertura" es defendible, "0 alertas" a secas no.
   ========================================================================== */

.reporte { max-width: 1180px; margin: 0 auto; padding: 24px 22px 40px; }

.consola-barra .usuario {
    font-size: 11px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--marca-texto-tenue);
}

/* --- Cabecera del reporte ----------------------------------------------- */

.cabecera-reporte {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.cabecera-reporte h1 { font-size: 25px; margin: 0 0 5px; }
.cabecera-reporte .subtitulo { margin: 0; font-size: 13px; }

.selector-sesion { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.selector-sesion .campo { margin: 0; min-width: 210px; }
.selector-sesion label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
    color: var(--texto-tenue); font-weight: 650; }

/* --- Validez de la comparacion: la primera cosa que hay que poder creer -- */

.validez {
    display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap;
    padding: 13px 15px;
    border: 1px solid var(--borde-suave);
    border-left: 3px solid var(--ok);
    border-radius: var(--radio);
    background: var(--superficie);
    margin-bottom: 22px;
}
.validez .signo { flex: 0 0 auto; color: var(--ok); font-size: 15px; font-weight: 700; line-height: 1.4; }
.validez .cuerpo { flex: 1 1 320px; min-width: 0; }
.validez .titulo { display: block; font-size: 14px; font-weight: 650; }
/* La tupla congelada, en mono: es una huella, no una frase. */
.validez .alcance { display: block; margin-top: 4px; font-size: 12px; color: var(--texto-medio); }
.validez .contra { flex: 0 0 auto; font-size: 12px; color: var(--texto-medio); margin-left: auto; }

/* Cuando NO se puede comparar, la misma fila cambia de signo y explica por que. */
.validez.invalida { border-left-color: var(--aviso); background: var(--aviso-suave); }
.validez.invalida .signo { color: var(--aviso); }
.validez.invalida .titulo { color: #6f4a00; }

/* --- Bloques con encabezado a dos lados --------------------------------- */

.bloque {
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 16px;
}
.bloque > header {
    /* color: inherit — el <header> global fija var(--texto), que sobre el tema
       oscuro del monitor queda casi negro sobre casi negro. Medido: 1,01:1. */
    color: inherit;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    background: none; border: none; padding: 0; height: auto; position: static;
    margin-bottom: 14px;
}
.bloque > header h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.bloque > header p { margin: 5px 0 0; font-size: 13px; color: var(--texto-medio); max-width: 74ch; }

.leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-medio); }
.leyenda::before { content: ""; width: 22px; height: 6px; border-radius: 999px; background: var(--ok); }

/* --- Tabla de metricas --------------------------------------------------- */

.tabla-metricas td { vertical-align: top; }
.tabla-metricas .metrica { font-weight: 600; }
.tabla-metricas .cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Diferencia: NEUTRA por defecto, a proposito. Pintar de verde todo lo que
   sube es falso en cuanto una metrica es de las que mejoran bajando
   —correcciones por minuto, pausas—. Las clases .mejora y .retroceso solo se
   aplican cuando el motor declara la polaridad de esa metrica. */
.tabla-metricas .diferencia { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.tabla-metricas .diferencia.mejora    { color: var(--ok); }
.tabla-metricas .diferencia.retroceso { color: var(--alarma); }

/* Cobertura: numero y barra juntos, en la misma celda. */
.celda-cobertura { min-width: 96px; }
.celda-cobertura .progreso { margin-top: 6px; }

/* Metrica no publicable. Es lo mas importante de la pantalla: tiene que leerse
   como advertencia, no como dato ausente. */
.tabla-metricas tr.no-calculable > td { background: var(--aviso-suave); }
.tabla-metricas tr.no-calculable:hover > td { background: #fbeed6; }
.tabla-metricas .sin-valor { color: var(--aviso); font-weight: 650; }
.tabla-metricas .motivo {
    display: block; margin-top: 6px;
    font-size: 12px; line-height: 1.45;
    color: #6f4a00;
}
.tabla-metricas .motivo::before { content: "\26A0"; margin-right: 5px; }
/* Un hueco real —no hay sesion anterior— se marca como tal, no como cero. */
.tabla-metricas .vacio-celda { color: var(--texto-tenue); }

/* --- Lectura del instructor ---------------------------------------------- */

.lectura { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lectura p { margin: 0; font-size: 14px; line-height: 1.6; flex: 1 1 420px; max-width: 82ch; }
.lectura .cierre { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lectura .generado { font-size: 11px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .08em; }

/* --- Impresion del reporte ----------------------------------------------- */

/* Membrete que solo existe en papel: en pantalla la barra ya dice donde estas,
   en papel la hoja tiene que identificarse sola. */
.solo-impresion { display: none; }

@media print {
    @page { margin: 14mm 12mm; }

    .consola-barra, .selector-sesion, .lectura .cierre, .leyenda { display: none !important; }

    .solo-impresion { display: block; }
    .membrete {
        display: flex; align-items: baseline; justify-content: space-between;
        font-size: 9pt; color: #444;
        border-bottom: 1px solid #999;
        padding-bottom: 6pt; margin-bottom: 14pt;
    }
    .membrete .nombre { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #000; }

    .reporte { max-width: none; padding: 0; }
    .bloque { box-shadow: none; border: none; padding: 0; margin-bottom: 16pt; break-inside: avoid; }
    .bloque + .bloque { border-top: 1px solid #ccc; padding-top: 12pt; }
    .validez { border: 1px solid #999; border-left-width: 3px; }

    /* En papel no hay color de fondo fiable: la fila no calculable se distingue
       por borde y por su motivo escrito, no por el ambar. */
    .tabla-metricas tr.no-calculable > td { background: none; box-shadow: inset 2px 0 0 #000; }
    .tabla-metricas .sin-valor, .tabla-metricas .motivo { color: #000; }
    .progreso { border: 1px solid #999; height: 6pt; }
    .progreso > span { background: #555 !important; }

    .cabecera-reporte h1 { font-size: 16pt; }
    table { font-size: 9pt; }
}

/* --- Reporte en pantallas pequenas --------------------------------------- */

@media (max-width: 780px) {
    .reporte { padding: 16px 14px 32px; }
    .cabecera-reporte { flex-direction: column; gap: 14px; }
    .selector-sesion { width: 100%; }
    .selector-sesion .campo { flex: 1 1 auto; }
    .validez .contra { margin-left: 0; flex-basis: 100%; }
    .lectura { flex-direction: column; align-items: stretch; }
}

/* =============================================================================
   Auditoria de sesion — /Sessions/Detail/{id}
   Implementado por Claude (Opus 5), 2026-08-24, portando la maqueta de V0.
   =============================================================================
   Responde "¿esta medicion es confiable?", no "¿que tal lo hizo el alumno?".
   Es el documento que defiende el dato ante una revision, y por eso se imprime.

   Casi todo reusa el vocabulario ya definido —.consola-barra, .cabecera-reporte,
   .cabecera-sesion, .bloque, .validez, .facts, .progreso— a proposito: un
   sistema visual que crece una clase por pantalla deja de ser un sistema. Lo
   unico propio de aqui es la tabla de versiones congeladas y las barras de
   integridad por canal.

   La pieza que casi nadie pone y aqui vale oro es el bloque 03, el preflight de
   esa manana: si una sesion sale rara, ver que el mando no tenia recorrido o
   que la resolucion estaba cambiada LA EXPLICA.
   ========================================================================== */

.auditoria { max-width: 1180px; margin: 0 auto; padding: 24px 22px 40px; }

/* Aviso de dos lineas dentro del encabezado de un bloque. La .marca es una
   pastilla de una linea y aqui hace falta decir ademas por que. */
.nota-cabecera {
    flex: 0 0 auto; max-width: 260px;
    padding: 9px 12px;
    border-radius: var(--radio);
    background: var(--superficie-alt);
    border-left: 3px solid var(--texto-tenue);
    font-size: 12px; line-height: 1.4;
}
.nota-cabecera .titulo { display: block; font-weight: 650; }
.nota-cabecera .detalle { display: block; margin-top: 2px; color: var(--texto-medio); }
.nota-cabecera.atencion { background: var(--aviso-suave); border-left-color: var(--aviso); }
.nota-cabecera.atencion .titulo { color: #6f4a00; }
.nota-cabecera.atencion .detalle { color: #6f4a00; }

/* --- 01 · Versiones congeladas ------------------------------------------- */

/* Sin estos campos el error es INDETECTABLE: el excavador paso de 800 kg a
   30.700 kg y toda sesion anterior describe una maquina que no existe. La
   tabla tiene que hacer obvio cuando una sesion se midio con otro instrumento,
   asi que lo que difiere se marca en la fila entera, no solo en la celda. */
.tabla-versiones td { font-size: 13px; }
.tabla-versiones .campo-version { color: var(--texto-medio); white-space: nowrap; }
.tabla-versiones .valor-version {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 12.5px; color: var(--texto);
    overflow-wrap: anywhere;
}
.tabla-versiones .estado-version { text-align: right; white-space: nowrap; font-weight: 600; }
.tabla-versiones .estado-version.igual      { color: var(--texto-tenue); font-weight: 400; }
.tabla-versiones .estado-version.verificado { color: var(--ok); }
.tabla-versiones .estado-version.vigente    { color: var(--ok); }
.tabla-versiones .estado-version.difiere    { color: var(--aviso); }
.tabla-versiones tr.difiere > td { background: var(--aviso-suave); }
.tabla-versiones tr.difiere:hover > td { background: #fbeed6; }

/* --- 02 · Integridad por canal ------------------------------------------- */

.canales { display: grid; gap: 13px; }
.canal { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.canal .nombre { font-size: 13px; }
.canal .pct { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--texto-medio); }
.canal .progreso { grid-column: 1 / -1; }
/* Un canal por debajo del umbral se ve distinto: 39 % de cobertura en los
   mandos es la diferencia entre una medicion y un adorno. */
.canal.baja .pct { color: var(--aviso); font-weight: 650; }
.canal.baja .progreso > span { background: var(--aviso); }

.canales + .facts { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde-suave); }
.facts .etiqueta { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--texto-tenue); font-weight: 650; }
.facts .valor { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* --- 03 · Verificacion previa -------------------------------------------- */

.conteo-preflight { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0; font-size: 13px; }
.conteo-preflight b { font-variant-numeric: tabular-nums; }

/* --- 04 · Registro de evidencia ------------------------------------------ */

.tabla-eventos td { font-size: 13px; }
.tabla-eventos .hora { font-variant-numeric: tabular-nums; color: var(--texto-medio); white-space: nowrap; }
.tabla-eventos .suceso { font-weight: 600; }
.tabla-eventos .origen { color: var(--texto-medio); white-space: nowrap; }

/* --- Pie del documento de evidencia -------------------------------------- */

.pie-evidencia {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--borde-suave);
    font-size: 12px; color: var(--texto-tenue);
}
.pie-evidencia .identificador { font-family: "Cascadia Mono", Consolas, monospace; }

/* --- Impresion de la evidencia ------------------------------------------- */

@media print {
    .auditoria { max-width: none; padding: 0; }
    /* En papel la tira de cuatro columnas no cabe legible: cada dato pasa a su
       propio bloque apilado. */
    .cabecera-sesion { grid-template-columns: 1fr; border: none; }
    .cabecera-sesion .celda { border-left: none; border: 1px solid #bbb; margin-bottom: 6pt; break-inside: avoid; }
    .rejilla.dos, .rejilla.tres { grid-template-columns: 1fr !important; }
    .nota-cabecera { border: 1px solid #999; background: none; }
    .tabla-versiones tr.difiere > td { background: none; box-shadow: inset 2px 0 0 #000; }
    .tabla-versiones .estado-version.difiere { color: #000; text-decoration: underline; }
    .canal.baja .pct { color: #000; }
    .pie-evidencia { border-top: 1px solid #999; color: #000; }
    .bloque { break-inside: avoid; }
}

/* --- Auditoria en pantallas pequenas ------------------------------------- */

@media (max-width: 780px) {
    .auditoria { padding: 16px 14px 32px; }
    .nota-cabecera { max-width: none; }
}

/* =============================================================================
   Patron administrativo — Operadores, Estaciones, Programacion y las demas
   Implementado por Claude (Opus 5), 2026-08-24, portando la maqueta de V0.
   =============================================================================
   Esto NO es una pantalla: es el molde de las diez de gestion (Operators,
   Stations, Assignments, Tasks, Programs, Enrollments, Consents, Sources,
   Users, Tenants). Todas tienen la misma forma —pestanas, formulario de alta en
   una linea, tabla con estado— y por eso se define una vez.

   Las pestanas son ENLACES a paginas distintas, no un componente con estado:
   /Operators, /Stations, /Assignments ya existen. Sin JS y sin inventar nada.
   ========================================================================== */

.admin { max-width: 1180px; margin: 0 auto; padding: 24px 22px 40px; }

/* --- Cabecera de la seccion --------------------------------------------- */

.cabecera-admin {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    margin-bottom: 20px;
}
.cabecera-admin h1 { font-size: 25px; font-weight: 400; margin: 0 0 5px; }
.cabecera-admin h1 strong { font-weight: 700; }
.cabecera-admin .subtitulo { margin: 0; font-size: 13px; max-width: 68ch; }

/* Bloque de contexto a la derecha: en que entorno estas mirando esto. */
.contexto-entorno { text-align: right; flex: 0 0 auto; }
.contexto-entorno .etiqueta {
    display: block; font-size: 10px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .16em; color: var(--texto-tenue);
}
.contexto-entorno .valor { display: block; margin-top: 3px; font-size: 12px; color: var(--texto-medio); }

/* --- Pestanas ------------------------------------------------------------ */

.pestanas {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--borde);
    margin-bottom: -1px;
}
.pestanas a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    font-size: 14px; font-weight: 600;
    color: var(--texto-medio);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radio) var(--radio) 0 0;
}
.pestanas a:hover { color: var(--texto); background: var(--superficie-alt); }
/* La activa se cose a la tarjeta de abajo tapando su borde inferior. */
.pestanas a.activa {
    background: var(--superficie);
    border-color: var(--borde);
    border-bottom-color: var(--superficie);
    color: var(--acento-fuerte);
}
.pestanas .conteo {
    font-size: 11px; font-weight: 650;
    padding: 1px 7px; border-radius: 999px;
    background: var(--superficie-alt); color: var(--texto-tenue);
    font-variant-numeric: tabular-nums;
}
.pestanas a.activa .conteo { background: var(--acento-suave); color: var(--acento-fuerte); }

/* --- Tarjeta de la seccion ---------------------------------------------- */

.tarjeta-admin {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 0 var(--radio) var(--radio) var(--radio);
    box-shadow: var(--sombra);
    padding: 22px;
}
.tarjeta-admin > header {
    /* color: inherit — el <header> global fija var(--texto), que sobre el tema
       oscuro del monitor queda casi negro sobre casi negro. Medido: 1,01:1. */
    color: inherit;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    background: none; border: none; padding: 0; height: auto; position: static;
    margin-bottom: 18px;
}
.tarjeta-admin > header h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.015em; }
.tarjeta-admin > header p { margin: 5px 0 0; font-size: 13px; color: var(--texto-medio); max-width: 74ch; }

/* --- Formulario de alta en una linea ------------------------------------ */

/* Cada campo lleva su ayuda DEBAJO, no en un tooltip: quien da de alta un
   operador lo hace una vez cada varias semanas y no recuerda el criterio. */
.formulario-registro {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;
    padding: 16px;
    background: var(--superficie-alt);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    margin-bottom: 20px;
}
.formulario-registro .campo { flex: 1 1 190px; min-width: 0; margin: 0; }
.formulario-registro .campo.ancho { flex: 2 1 280px; }
.formulario-registro .campo.corto { flex: 0 1 130px; }
.formulario-registro label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--texto-tenue); font-weight: 650; }
.formulario-registro .hint { margin-top: 5px; font-size: 11.5px; line-height: 1.4; }
/* El boton se alinea con los campos, no con las ayudas de debajo. */
.formulario-registro > button, .formulario-registro > .boton { flex: 0 0 auto; margin-top: 19px; }

/* --- Leyenda de cohortes ------------------------------------------------- */

.leyenda-cohortes { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12px; color: var(--texto-medio); }
.leyenda-cohortes span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda-cohortes span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.leyenda-cohortes .a::before { background: var(--acento); }
.leyenda-cohortes .b::before { background: var(--cohorte-b); }

/* Cohorte A y B TIENEN que distinguirse de un vistazo: el arranque escalonado
   es lo que hace defendible el resultado del estudio.
   Deliberadamente NO se usa el ambar de aviso para la B: en este sistema el
   ambar significa "algo va mal", y una cohorte no es una advertencia. */
.marca.cohorte-a { background: var(--acento-suave); color: var(--acento-fuerte); border-color: transparent; }
.marca.cohorte-b { background: var(--cohorte-b-suave); color: var(--cohorte-b); border-color: transparent; }

/* --- Accesos directos de la portada -------------------------------------- */

/* La portada por rol completa (avance del muestreo) esta bloqueada por una
   decision de producto. Mientras tanto, el indice de areas se presenta como
   tarjetas y no como una lista suelta. */
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.acceso-directo {
    display: block;
    padding: 15px 16px;
    border: 1px solid var(--borde-suave);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio);
    background: var(--superficie);
    text-decoration: none;
    color: var(--texto);
}
.acceso-directo:hover { background: var(--acento-suave); border-color: var(--acento); }
.acceso-directo .titulo { display: block; font-size: 15px; font-weight: 650; }
.acceso-directo .detalle { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--texto-medio); }

/* --- Pie de la tarjeta administrativa ------------------------------------ */

.pie-admin {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--borde-suave);
    font-size: 12px; color: var(--texto-tenue);
}

/* Columna de acciones de una tabla: botones pequenos, alineados a la derecha. */
td.acciones-fila { text-align: right; white-space: nowrap; }
td.acciones-fila button, td.acciones-fila .boton { padding: 5px 11px; font-size: 12.5px; }

/* --- Patron administrativo en pantallas pequenas ------------------------- */

@media (max-width: 780px) {
    .admin { padding: 16px 14px 32px; }
    .cabecera-admin { flex-direction: column; gap: 12px; }
    .contexto-entorno { text-align: left; }
    .formulario-registro .campo, .formulario-registro .campo.corto { flex: 1 1 100%; }
    .formulario-registro > button { width: 100%; margin-top: 4px; }
    .pestanas a { flex: 1 1 auto; justify-content: center; }
}

/* =============================================================================
   Monitoreo de telemetria — consola oscura
   Implementado por Claude (Opus 5), 2026-08-24, portando la maqueta de V0.
   =============================================================================
   Unica pantalla oscura del sistema, y con motivo: se mira de lejos, colgada o
   en un segundo monitor, durante horas. Las demas se leen de cerca y en papel.

   El tema oscuro vive ENTERO dentro de `.monitor`, redefiniendo los tokens en
   ese ambito. No es `prefers-color-scheme`: no depende del sistema operativo,
   depende de la pantalla. Asi el resto del producto no se entera de que existe.

   ⚠️ LIMITE DEL STACK, leelo antes de portar esto. La maqueta muestra graficas
   vivas a ~20 Hz por WebSocket. Este proyecto es Razor Pages SIN cadena JS, por
   decision cerrada. Lo que SI se puede hacer sin una linea de JS: dibujar cada
   canal como <polyline> de SVG generado EN EL SERVIDOR a partir de las ultimas
   N muestras, y refrescar la pagina con <meta http-equiv="refresh">, como ya
   hace la consola del instructor cada 5 s. Es una foto cada N segundos, no un
   flujo continuo. Cualquier otra cosa exige romper la regla del stack.
   ========================================================================== */

.monitor {
    /* Neutros oscuros */
    --m-fondo:        #0e1620;
    --m-superficie:   #16202d;
    --m-superficie-2: #1b2634;
    --m-borde:        #26323f;
    --m-texto:        #e8eef5;
    --m-texto-medio:  #a7b4c2;
    --m-texto-tenue:  #8593a3;

    /* Estados sobre fondo oscuro: los claros del tema claro no contrastan aqui */
    --m-ok:      #4ec27f;
    --m-aviso:   #e0a63f;
    --m-alarma:  #ef6b62;

    /* Un color por canal. Deben distinguirse entre si Y sobre el fondo. */
    --canal-1: #3fb9ab;
    --canal-2: #e0b04a;
    --canal-3: #e08356;
    --canal-4: #8e8ee0;

    min-height: 100vh;
    background: var(--m-fondo);
    color: var(--m-texto);
}

/* Clases del tema claro que se usan dentro del monitor. Sin esto caen a
   --texto-tenue (#66707e) y quedan por debajo de AA sobre fondo oscuro. */
.monitor .antetitulo,
.monitor .contador,
.monitor .hint,
.monitor .cabecera-bloque .contador { color: var(--m-texto-tenue); }
.monitor .cabecera-bloque h2 { color: var(--m-texto); }

/* --- Barra del monitor --------------------------------------------------- */

.monitor .monitor-barra {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 14px 22px;
    border-bottom: 1px solid var(--m-borde);
}
.monitor .sello {
    width: 30px; height: 30px; border-radius: var(--radio);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--acento); color: #fff;
    font-weight: 700; font-size: 15px; flex: 0 0 auto;
}
.monitor .monitor-barra .titulos .antetitulo { margin: 0 0 2px; color: var(--m-texto-tenue); }
.monitor .monitor-barra h1 { font-size: 19px; font-weight: 650; margin: 0; letter-spacing: -.015em; }
.monitor .monitor-barra .derecha { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.monitor .reloj { font-size: 12px; color: var(--m-texto-tenue); font-variant-numeric: tabular-nums; letter-spacing: .06em; }

.monitor button, .monitor .boton {
    background: var(--m-superficie-2);
    border-color: var(--m-borde);
    color: var(--m-texto);
}
.monitor button:hover, .monitor .boton:hover { background: #22303f; border-color: #3a4a5c; }
.monitor button.activo { background: var(--acento); border-color: var(--acento); color: #fff; }

.monitor .senal { color: var(--m-texto-tenue); }
.monitor .senal.viva   { color: var(--m-ok); }
.monitor .senal.retraso{ color: var(--m-aviso); }
.monitor .senal.caida  { color: var(--m-alarma); }

/* --- Cabecera de flota y pestanas ---------------------------------------- */

.monitor .cuerpo { padding: 20px 22px 28px; }

.monitor .flota { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; margin-bottom: 20px; }
.monitor .flota h2 { font-size: 21px; font-weight: 650; margin: 0; letter-spacing: -.02em; }
.monitor .flota .antetitulo { color: var(--m-texto-tenue); margin: 0 0 3px; }
.monitor .flota .leyenda-flota { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--m-texto-medio); }

.monitor .pestanas { border-bottom-color: var(--m-borde); margin: 0; }
.monitor .pestanas a { color: var(--m-texto-medio); }
.monitor .pestanas a:hover { background: var(--m-superficie-2); color: var(--m-texto); }
.monitor .pestanas a.activa {
    background: transparent; color: var(--m-texto);
    border-color: transparent; border-bottom: 2px solid var(--acento-claro);
    border-radius: 0;
}
.monitor .pestanas .conteo { background: var(--m-superficie-2); color: var(--m-texto-tenue); }
.monitor .pestanas a.activa .conteo { background: rgba(61,122,181,.25); color: #9fc4e6; }

/* --- Columna de estaciones ----------------------------------------------- */

.monitor .rejilla.monitor-dos { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 18px; }

.monitor .tarjeta-estacion {
    background: var(--m-superficie);
    border: 1px solid var(--m-borde);
    border-radius: var(--radio);
    padding: 13px 14px;
    margin-bottom: 10px;
    cursor: pointer;
}
.monitor .tarjeta-estacion.seleccionada { border-color: var(--acento-claro); background: var(--m-superficie-2); }
.monitor .tarjeta-estacion .fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.monitor .tarjeta-estacion .id { font-size: 15px; font-weight: 650; }
.monitor .tarjeta-estacion .rol { display: block; font-size: 12px; color: var(--m-texto-tenue); margin-top: 2px; }
.monitor .tarjeta-estacion .operador { font-size: 12px; color: var(--m-texto-medio); }
.monitor .tarjeta-estacion .bateria { font-size: 12px; color: var(--m-texto-medio); font-variant-numeric: tabular-nums; }

/* --- Panel de la sesion seleccionada ------------------------------------- */

.monitor .panel {
    background: var(--m-superficie);
    border: 1px solid var(--m-borde);
    border-radius: var(--radio);
    padding: 18px;
}
.monitor .panel > header {
    /* color: inherit — el <header> global fija var(--texto), que sobre el tema
       oscuro del monitor queda casi negro sobre casi negro. Medido: 1,01:1. */
    color: inherit;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    background: none; border: none; padding: 0; height: auto; position: static;
    margin-bottom: 14px;
}
.monitor .panel h2 { font-size: 24px; font-weight: 650; margin: 0; letter-spacing: -.02em; }
.monitor .panel .identificador { font-size: 12px; color: var(--m-texto-tenue); font-family: "Cascadia Mono", Consolas, monospace; }

.monitor .meta-sesion {
    display: flex; gap: 26px; flex-wrap: wrap;
    padding: 11px 0; margin-bottom: 16px;
    border-top: 1px solid var(--m-borde); border-bottom: 1px solid var(--m-borde);
    font-size: 12px; color: var(--m-texto-medio);
}
.monitor .meta-sesion .etiqueta { text-transform: uppercase; letter-spacing: .12em; font-size: 10px;
    color: var(--m-texto-tenue); font-weight: 650; margin-right: 7px; }
.monitor .meta-sesion .fuente { margin-left: auto; }

/* --- Graficas por canal --------------------------------------------------- */

.monitor .canales-grafico { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

.monitor .grafico-canal {
    background: var(--m-superficie-2);
    border: 1px solid var(--m-borde);
    border-radius: var(--radio);
    padding: 13px 14px;
}
.monitor .grafico-canal > .cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.monitor .grafico-canal .nombre { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.monitor .grafico-canal .nombre::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--trazo, var(--canal-1)); }
.monitor .grafico-canal .unidad { font-size: 11px; color: var(--m-texto-tenue); font-weight: 400; }
.monitor .grafico-canal .lectura { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.monitor .grafico-canal .lectura .unidad { font-size: 12px; margin-left: 3px; }

.monitor .grafico-canal svg { display: block; width: 100%; height: 78px; margin: 8px 0 4px; }
.monitor .grafico-canal svg polyline { fill: none; stroke: var(--trazo, var(--canal-1)); stroke-width: 1.6;
    stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.monitor .grafico-canal > .pie { display: flex; justify-content: space-between; gap: 12px;
    font-size: 11px; color: var(--m-texto-tenue); font-variant-numeric: tabular-nums; }

/* Canal que esta fuente no entrega. NO es un canal en cero: es un canal que no
   existe, y tiene que verse distinto o el reporte miente. */
.monitor .grafico-canal.no-disponible { opacity: .55; }
.monitor .grafico-canal.no-disponible svg polyline { stroke: var(--m-texto-tenue); stroke-dasharray: 3 4; }
.monitor .grafico-canal.no-disponible .lectura { font-size: 12px; color: var(--m-alarma); font-weight: 650;
    text-transform: uppercase; letter-spacing: .1em; }
.monitor .grafico-canal .sin-canal { font-size: 11px; color: var(--m-texto-tenue); text-align: center; margin: 0; }

/* --- Alarma critica: el fallo mas caro del sistema ----------------------- */

/* §16.1 del plan: mando desconectado grabando ceros. Hoy es el estado REAL de
   todas las capturas. Tiene que interrumpir la lectura, no matizarla. */
.monitor .alarma-critica {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 12px 15px;
    margin-bottom: 14px;
    border: 1px solid var(--m-alarma);
    border-left-width: 4px;
    border-radius: var(--radio);
    background: #3a1a19;
    color: #ffc9c4;
    font-size: 13px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .08em;
}
.monitor .alarma-critica .detalle { font-weight: 400; text-transform: none; letter-spacing: 0; color: #e8b0ab; }

/* --- Tira de indicadores de calidad -------------------------------------- */

.monitor .tira-estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.monitor .indicador {
    background: var(--m-superficie-2);
    border: 1px solid var(--m-borde);
    border-radius: var(--radio);
    padding: 13px 15px;
}
.monitor .indicador .etiqueta { display: block; font-size: 10px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .14em; color: var(--m-texto-tenue); margin-bottom: 6px; }
.monitor .indicador .valor { display: block; font-size: 23px; font-weight: 650;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
.monitor .indicador .criterio { display: block; margin-top: 6px; font-size: 11px; color: var(--m-texto-medio); }
/* Fuera de criterio: el numero cambia de color, no solo la nota de abajo. */
.monitor .indicador.fuera .valor    { color: var(--m-aviso); }
.monitor .indicador.fuera .criterio { color: var(--m-aviso); }
.monitor .indicador.critico .valor, .monitor .indicador.critico .criterio { color: var(--m-alarma); }

/* --- Pie del monitor ------------------------------------------------------ */

.monitor .pie-monitor {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 14px;
    border-top: 1px solid var(--m-borde);
    font-size: 11px; color: var(--m-texto-tenue);
    text-transform: uppercase; letter-spacing: .08em;
}

/* --- Monitor en pantallas pequenas --------------------------------------- */

@media (max-width: 900px) {
    .monitor .rejilla.monitor-dos { grid-template-columns: 1fr; }
    .monitor .cuerpo { padding: 14px; }
    .monitor .monitor-barra { padding: 12px 14px; }
    .monitor .flota .leyenda-flota { margin-left: 0; flex-basis: 100%; }
    .monitor .meta-sesion .fuente { margin-left: 0; }
}

/* El monitor no se imprime: es una pantalla de vigilancia, no un documento. */
@media print { .monitor { display: none; } }

/* --- Impresion: el detalle de sesion se archiva como evidencia ---------- */

@media print {
    .barra, .acciones, button { display: none !important; }
    body { background: #fff; font-size: 12px; }
    .tarjeta { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
    main { max-width: none; padding: 0; }
}

/* --- Pantallas pequenas -------------------------------------------------- */

@media (max-width: 720px) {
    main { padding: 14px; }
    .barra { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
    .dato .valor.enorme { font-size: 40px; }
}

/* =============================================================================
   Compatibilidad con las clases que ya usan las pantallas existentes.
   Asi las quince pantallas heredan el sistema visual sin reescribirlas una a
   una; a medida que se toquen, pueden ir migrando a las clases de arriba.
   ========================================================================== */

header {
    background: var(--superficie); color: var(--texto);
    border-bottom: 1px solid var(--borde);
    padding: 0 24px; height: 56px;
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    position: sticky; top: 0; z-index: 10;
}
header .brand { font-weight: 700; font-size: 17px; color: var(--texto); text-decoration: none; letter-spacing: -.02em; }
header .navigation { display: flex; gap: 4px; flex-wrap: wrap; }
header .navigation a { color: var(--texto-medio); text-decoration: none; padding: 6px 10px; border-radius: var(--radio); font-size: 14px; }
header .navigation a:hover { background: var(--superficie-alt); color: var(--texto); }
header .logout { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-medio); }
header .logout button { padding: 6px 12px; font-size: 13px; }

main, body > section, body > div.contenido { max-width: 1320px; margin: 0 auto; padding: 24px; }

/* Texto de ayuda bajo un campo o una tabla. */
.hint { font-size: 13px; color: var(--texto-tenue); margin-top: 6px; }

/* Formularios de una linea para crear registros. */
form.inline { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
form.inline label { display: flex; flex-direction: column; gap: 5px; margin: 0; flex: 1 1 200px; }
form.inline input, form.inline select { min-width: 0; }
form.inline button { flex: 0 0 auto; }

.error {
    padding: 12px 14px; border-radius: var(--radio);
    border-left: 3px solid var(--alarma);
    background: var(--alarma-suave); color: #7d1f1a;
    margin-bottom: 16px; font-size: 14px;
}

.primary { background: var(--acento); border-color: var(--acento); color: #fff; }
.primary:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

/* Bloques del detalle de sesion (auditoria). */
.audit-block {
    background: var(--superficie); border: 1px solid var(--borde-suave);
    border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra);
    margin-bottom: 16px;
}
.audit-block > h2 { padding-bottom: 10px; border-bottom: 1px solid var(--borde-suave); }

.facts, .version-grid, .note-grid, .identity {
    display: grid; gap: 14px 20px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.facts > div .label, .version-grid .version .label { font-size: 12px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--texto-tenue); font-weight: 650; display: block; }

.session-card {
    background: var(--superficie); border: 1px solid var(--borde-suave);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); margin-bottom: 14px;
}

.timer { font-size: 34px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.marks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.marks button { padding: 16px 12px; font-size: 15px; min-height: 62px; }

.scales { display: grid; gap: 18px; }
.scale { display: flex; gap: 8px; }
.scale label { flex: 1; margin: 0; padding: 14px 0; text-align: center; font-size: 17px;
    font-weight: 650; border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); color: var(--texto-medio); cursor: pointer; }
.scale input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.scale input[type=radio]:checked + label { background: var(--acento); border-color: var(--acento); color: #fff; }

.progress { height: 8px; background: var(--borde-suave); border-radius: 999px; overflow: hidden; }
.progress > span, .progress > div { display: block; height: 100%; background: var(--acento); border-radius: 999px; }

.history { font-size: 14px; }
.history li { padding: 8px 0; border-bottom: 1px solid var(--borde-suave); }
.history li:last-child { border-bottom: none; }

.versions { display: grid; gap: 12px; }