/* Monitor de señales — TeleCotuí
 *
 * Instrumento de sala de control, no tablero decorado. El panel está prendido
 * las 24 horas: fondo silencioso, filetes de un pixel, cifras de ancho fijo,
 * y el color reservado por completo al estado del canal. Un canal sano no
 * tiene color; la ausencia de señal visual ES la señal de que todo va bien.
 */

@import url("/static/fuentes/plex.css");

:root {
    --neg:        #05070a;
    --sup-0:      #090c11;
    --sup-1:      #0e131a;
    --sup-2:      #141a23;
    --linea:      #1a222d;
    --linea-viva: #28333f;

    --tx-1: #e8edf4;
    --tx-2: #8b98a9;
    --tx-3: #55616f;

    --ok:    oklch(0.74 0.16 150);
    --aviso: oklch(0.80 0.15 78);
    --falla: oklch(0.66 0.20 27);
    --info:  oklch(0.74 0.12 245);
    --marca: #5d9e30;

    --falla-macizo: oklch(0.60 0.20 27);
    --falla-borde:  oklch(0.68 0.20 27);
    --sobre-falla:  #0b0406;

    --acento: #4fd1c5;
    --alto-tile: 78px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--neg);
    color: var(--tx-1);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 13px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mono {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* Rótulo: caja alta, muy tracked, gris. Nombra sin competir. */
.etq {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--tx-3); white-space: nowrap;
}

button, input, select { font: inherit; color: inherit; }

button {
    background: transparent;
    border: 1px solid var(--linea-viva);
    color: var(--tx-2);
    padding: 0 13px;
    height: 34px;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
button:hover { border-color: var(--tx-3); color: var(--tx-1); }
button.primario {
    background: var(--acento); border-color: var(--acento);
    color: var(--neg); font-weight: 600; font-size: 12px;
    display: inline-flex; align-items: center; gap: 8px;
}
button.primario:hover { filter: brightness(1.1); }
button.peligro { border-color: oklch(0.66 0.20 27 / .5); color: var(--falla); }
button.peligro:hover { background: oklch(0.66 0.20 27 / .1); }
button.icono { width: 34px; padding: 0; display: inline-flex;
               align-items: center; justify-content: center; }
button.activo { border-color: var(--acento); color: var(--acento); }

input, select {
    background: var(--neg);
    border: 1px solid var(--linea-viva);
    padding: 0 12px;
    height: 34px;
    width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--acento); }

svg { display: block; }

/* ==================== cabecera ==================== */

header {
    display: flex; align-items: stretch; height: 76px; flex-shrink: 0;
    border-bottom: 1px solid var(--linea); background: var(--sup-0);
}

.marca {
    display: flex; align-items: center; gap: 12px; padding: 0 22px;
    border-right: 1px solid var(--linea); text-decoration: none; color: inherit;
    white-space: nowrap;
}
.marca .texto { display: flex; flex-direction: column; gap: 3px; }
.marca .nombre { font-size: 13px; font-weight: 600; letter-spacing: .11em; }

.contadores { display: flex; align-items: stretch; }

.contador {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    padding: 0 20px; border-right: 1px solid var(--linea);
    min-width: 104px; cursor: pointer; user-select: none;
    border-top: 2px solid transparent; border-bottom: 2px solid transparent;
}
.contador:hover { background: rgba(255,255,255,.02); }
.contador.activo { border-bottom-color: var(--acento); }
.contador .punto { width: 6px; height: 6px; flex-shrink: 0; }
.contador .fila { display: flex; align-items: center; gap: 8px; }
.contador b {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -.02em;
}
.c-ok   .punto { background: var(--ok);    box-shadow: 0 0 10px var(--ok); }
.c-warn .punto { background: var(--aviso); box-shadow: 0 0 10px var(--aviso); }
.c-fail .punto { background: var(--falla); box-shadow: 0 0 10px var(--falla); }
.c-todos .punto { background: var(--tx-3); }
.c-ok b   { color: var(--tx-1); }
.c-warn b { color: var(--tx-3); }
.c-fail b { color: var(--tx-3); }
.c-warn.hay b { color: var(--aviso); }
.c-fail.hay b { color: var(--falla); }

/* Veredicto: la respuesta a "¿tengo que hacer algo?" en una frase. */
.veredicto {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    padding: 0 22px; border-right: 1px solid var(--linea); flex: 1; min-width: 210px;
}
.veredicto .frase { font-size: 14px; font-weight: 500; white-space: nowrap; }
.veredicto .detalle {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px; color: var(--tx-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.zona-buscar {
    display: flex; align-items: center; padding: 0 16px;
    border-right: 1px solid var(--linea);
}
.buscador { position: relative; width: 236px; }
.buscador input { padding-left: 32px; padding-right: 34px;
                  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; }
.buscador .lupa { position: absolute; left: 11px; top: 11px; pointer-events: none; }
.buscador .limpiar {
    position: absolute; right: 4px; top: 4px; width: 26px; height: 26px;
    border: none; padding: 0; display: flex; align-items: center; justify-content: center;
}
.buscador kbd {
    position: absolute; right: 9px; top: 9px;
    font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px;
    color: var(--tx-3); border: 1px solid var(--linea-viva); padding: 1px 5px;
}

.acciones { display: flex; align-items: center; gap: 8px; padding: 0 18px; }
.acciones label { white-space: nowrap; }
.acciones input[type=range] { width: 78px; accent-color: var(--acento); }

#conexion { width: 6px; height: 6px; background: var(--ok);
            box-shadow: 0 0 9px var(--ok); flex-shrink: 0; }
#conexion.caido { background: var(--falla); box-shadow: 0 0 9px var(--falla);
                  animation: latido 1s infinite; }
@keyframes latido { 50% { opacity: .2; } }

/* ==================== muro de estado ====================
   Sin video: cada canal es un bloque que dice si está bien o mal. El orden
   es el número del canal y no cambia nunca, para que el operador aprenda
   dónde vive cada uno y lo busque con la mano, no con los ojos. */

main { flex: 1; overflow-y: auto; padding: 16px 20px; }

#grilla {
    display: grid; gap: 7px;
    grid-template-columns: repeat(auto-fill, minmax(var(--ancho-tile, 132px), 1fr));
}

.tile {
    position: relative; height: var(--alto-tile);
    padding: 8px 9px; cursor: pointer; overflow: hidden;
    background: var(--sup-1); border: 1px solid var(--linea);
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color .12s;
}
.tile:hover { border-color: var(--linea-viva); }
.tile.oculto { display: none; }

.tile .cabecera { display: flex; align-items: center; gap: 6px; }
.tile .numero {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 600; line-height: 1; color: rgba(139,152,169,.55);
}
.tile .glifo { margin-left: auto; flex-shrink: 0; }
.tile .nombre {
    font-size: 11px; font-weight: 500; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile .pie {
    margin-top: auto; display: flex; align-items: baseline; gap: 6px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums; font-size: 8.5px;
}
.tile .codigo { font-weight: 600; letter-spacing: .09em; color: rgba(139,152,169,.5); }
.tile .desde { margin-left: auto; color: var(--tx-3); }

/* Aviso: la señal sigue al aire, así que se marca sin ocupar la pantalla. */
.tile.e-warn { background: oklch(0.80 0.15 78 / .13); border-color: oklch(0.80 0.15 78 / .6); }
.tile.e-warn .numero, .tile.e-warn .codigo { color: var(--aviso); }

/* Falla: bloque macizo. Entre cien tiles apagados es lo único que grita,
   y lo único del panel que se mueve. */
.tile.e-fail {
    background: var(--falla-macizo); border-color: var(--falla-borde);
    animation: pulso 1.9s ease-in-out infinite;
}
.tile.e-fail .numero, .tile.e-fail .nombre, .tile.e-fail .codigo { color: var(--sobre-falla); }
.tile.e-fail .desde { color: rgba(11,4,6,.72); }
@keyframes pulso { 50% { opacity: .82; } }

.tile.e-iniciando { border-color: oklch(0.74 0.12 245 / .5); }
.tile.e-iniciando .numero, .tile.e-iniciando .codigo { color: var(--info); }

.tile.e-apagado { opacity: .35; }

/* Se acaba de recuperar: destello verde corto. Es la señal de "ya podés
   dejar de mirarlo", que es tan importante como la de que se rompió. */
.tile.recuperado { animation: recupero 4s ease-out; }
@keyframes recupero {
    0%   { box-shadow: inset 0 0 0 2px var(--ok); }
    70%  { box-shadow: inset 0 0 0 2px oklch(0.74 0.16 150 / .45); }
    100% { box-shadow: none; }
}

/* ==================== vista de lista ====================
   La misma información ordenada por gravedad: lo que hay que atender
   está siempre en la primera fila. */

#lista { display: none; flex-direction: column; }
body.modo-lista #grilla { display: none; }
body.modo-lista #lista { display: flex; }
body.modo-lista main { padding: 0; }

.fila-lista {
    display: grid; align-items: center; gap: 14px; padding: 0 18px;
    grid-template-columns: 20px 46px minmax(0, 1fr) 150px 104px 70px 92px 84px 66px;
    height: 34px; cursor: pointer;
    border-bottom: 1px solid rgba(26,34,45,.75);
    border-left: 2px solid transparent;
}
.fila-lista.oculto { display: none; }
.fila-lista:hover { background: rgba(255,255,255,.025); }

.fila-lista.cabecera {
    height: 32px; cursor: default; background: var(--sup-0);
    border-bottom: 1px solid var(--linea-viva); position: sticky; top: 0; z-index: 1;
}
.fila-lista.cabecera:hover { background: var(--sup-0); }

.fila-lista .num, .fila-lista .dato {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--tx-2);
}
.fila-lista .num { font-size: 11.5px; color: var(--tx-3); }
.fila-lista .canal { font-size: 12.5px; white-space: nowrap;
                     overflow: hidden; text-overflow: ellipsis; }
.fila-lista .grupo { font-size: 11.5px; color: var(--tx-2); white-space: nowrap;
                     overflow: hidden; text-overflow: ellipsis; }
.fila-lista .codigo {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px; font-weight: 600; letter-spacing: .09em; color: rgba(139,152,169,.42);
}
.fila-lista .der { text-align: right; }

.fila-lista.e-fail { background: oklch(0.66 0.20 27 / .1); border-left-color: var(--falla); }
.fila-lista.e-fail .num, .fila-lista.e-fail .codigo { color: var(--falla); }
.fila-lista.e-fail .canal { font-weight: 500; }
.fila-lista.e-warn { background: oklch(0.80 0.15 78 / .06); border-left-color: var(--aviso); }
.fila-lista.e-warn .num, .fila-lista.e-warn .codigo { color: var(--aviso); }
.fila-lista.e-iniciando { border-left-color: var(--info); }
.fila-lista.e-iniciando .num, .fila-lista.e-iniciando .codigo { color: var(--info); }

/* ==================== barra de estado ==================== */

footer {
    display: flex; align-items: center; height: 30px; flex-shrink: 0;
    border-top: 1px solid var(--linea); background: var(--sup-0); padding: 0 20px;
}
footer .bloque {
    display: flex; align-items: center; gap: 8px; padding: 0 16px;
    border-left: 1px solid var(--linea); white-space: nowrap;
}
footer .valor {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--tx-1);
}
footer .chispa { display: block; }
footer .derecha { display: flex; align-items: center; gap: 16px; margin-left: auto; }
footer .placas {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums; font-size: 9.5px; color: var(--tx-3);
    display: flex; gap: 10px;
}
footer .placas b { color: var(--tx-2); font-weight: 500; }

/* ==================== cinta de últimos cambios ==================== */

.cinta {
    display: flex; gap: 7px; align-items: center; overflow: hidden;
    padding: 0 20px; height: 0; background: var(--sup-0);
    border-bottom: 1px solid transparent; flex-shrink: 0; white-space: nowrap;
    transition: height .18s, border-color .18s;
}
.cinta.visible { height: 30px; border-bottom-color: var(--linea); }
.cinta .item {
    display: flex; gap: 8px; align-items: center; font-size: 11px;
    padding: 3px 9px; border: 1px solid var(--linea-viva);
    animation: entrar .3s ease-out;
}
@keyframes entrar { from { opacity: 0; transform: translateX(-8px); } }
.cinta time {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums; font-size: 10px; color: var(--tx-3);
}
.cinta .can { font-weight: 600; }
.cinta .rompe { border-color: oklch(0.66 0.20 27 / .55); color: var(--falla); }
.cinta .avisa { border-color: oklch(0.80 0.15 78 / .55); color: var(--aviso); }
.cinta .sana  { border-color: oklch(0.74 0.16 150 / .55); color: var(--ok); }

/* ==================== vacío ==================== */

.vacio { grid-column: 1 / -1; text-align: center; padding: 90px 20px; color: var(--tx-3); }
.vacio h2 { font-size: 15px; font-weight: 500; color: var(--tx-2); margin-bottom: 8px; }
.vacio p { font-size: 12px; }

/* ==================== diálogos ==================== */

.telon {
    position: fixed; inset: 0; background: rgba(5,7,10,.78);
    display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.telon[hidden] { display: none; }

.modal {
    background: var(--sup-0); border: 1px solid var(--linea-viva);
    width: 100%; max-width: 720px; max-height: 94vh; overflow-y: auto;
    box-shadow: 0 40px 90px -20px rgba(0,0,0,.85);
}
.modal.ancho { max-width: 1400px; }
.modal > h2 {
    font-size: 15px; font-weight: 600; padding: 18px 24px;
    border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 12px;
}
.modal .cerrar { border: none; width: 28px; height: 28px; padding: 0; margin-left: auto;
                 display: flex; align-items: center; justify-content: center; color: var(--tx-3); }
.cuerpo { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.pie-modal {
    padding: 16px 24px; border-top: 1px solid var(--linea);
    display: flex; gap: 9px; align-items: center;
}

.campo { display: flex; flex-direction: column; gap: 7px; }
.campo .ayuda { font-size: 11px; color: var(--tx-3); line-height: 1.5; }
.fila { display: flex; gap: 16px; }
.fila > * { flex: 1; }

.aviso-caja { padding: 14px 16px; font-size: 12px; line-height: 1.55;
              border: 1px solid var(--linea-viva); background: var(--sup-1); }
.aviso-caja.malo { border-color: oklch(0.66 0.20 27 / .45);
                   background: oklch(0.66 0.20 27 / .07); color: #ffb0aa; }
.aviso-caja.bien { border-color: oklch(0.74 0.16 150 / .4);
                   background: oklch(0.74 0.16 150 / .06); }

/* ==================== detalle del canal ==================== */

.detalle { display: flex; min-height: 0; }
.detalle .izq { flex: 1; min-width: 0; display: flex; flex-direction: column;
                padding: 18px 20px; gap: 16px; }
.detalle .der { width: 438px; flex-shrink: 0; border-left: 1px solid var(--linea);
                display: flex; flex-direction: column; overflow-y: auto; }

.reproductor { background: #000; border: 1px solid var(--linea-viva); }
.reproductor .marco { position: relative; height: 452px; display: flex;
                      align-items: center; justify-content: center; overflow: hidden; }
.reproductor video { height: 100%; max-width: 100%; }
.reproductor .cartel {
    position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
    align-items: center; justify-content: center; color: var(--tx-3);
    font-size: 12.5px; text-align: center; padding: 20px; background: rgba(5,7,10,.55);
}
.reproductor .envivo {
    position: absolute; top: 10px; left: 12px; display: flex; align-items: center; gap: 7px;
    background: rgba(3,5,8,.72); padding: 4px 9px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9.5px; letter-spacing: .12em;
}
.reproductor .envivo i { width: 5px; height: 5px; background: var(--falla); }

/* La promesa explícita: esto es la señal, no una versión de la señal. */
.ficha-origen {
    display: flex; align-items: center; gap: 14px; padding: 9px 13px;
    border-top: 1px solid var(--linea);
    font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
}
.ficha-origen .sello { display: flex; align-items: center; gap: 8px;
                       font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.ficha-origen .sello.copia { color: var(--ok); }
.ficha-origen .sello.recodificado { color: var(--aviso); }
.ficha-origen .datos { color: var(--tx-2); }
.ficha-origen .nota { margin-left: auto; font-size: 10px; color: var(--tx-3); }

.traza { flex: 1; min-height: 90px; display: flex; flex-direction: column; gap: 8px; }
.traza .lienzo { flex: 1; min-height: 0; background: var(--sup-1);
                 border: 1px solid var(--linea); padding: 8px 8px 0;
                 display: flex; align-items: flex-end; gap: 1px; }
.traza .lienzo span { flex: 1; min-width: 1px; background: var(--info); }
.traza .estados { display: flex; gap: 1px; height: 6px; }
.traza .estados span { flex: 1; min-width: 1px; background: rgba(255,255,255,.09); }
.traza .marcas { display: flex; justify-content: space-between;
                 font-family: "IBM Plex Mono", ui-monospace, monospace;
                 font-size: 9px; color: var(--tx-3); }

.medidor-audio { display: flex; flex-direction: column; gap: 6px; }
.medidor-audio .canal { display: flex; align-items: center; gap: 10px; }
.medidor-audio .canal > .n {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    width: 12px; font-size: 10px; color: var(--tx-3);
}
.medidor-audio .barra { position: relative; flex: 1; height: 13px;
                        background: var(--neg); border: 1px solid var(--linea); }
/* Zona objetivo de emisión: −23 LUFS ±2. Un número suelto no dice si está bien. */
.medidor-audio .objetivo {
    position: absolute; top: 0; bottom: 0; left: 61.7%; width: 3.4%;
    background: oklch(0.74 0.16 150 / .16);
    border-left: 1px solid oklch(0.74 0.16 150 / .5);
    border-right: 1px solid oklch(0.74 0.16 150 / .5);
}
.medidor-audio .nivel { position: absolute; top: 0; bottom: 0; left: 0; width: 0;
                        background: var(--ok); transition: width .15s; }
.medidor-audio .nivel.bajo { background: var(--aviso); }
.medidor-audio .pico { position: absolute; top: -2px; bottom: -2px; width: 2px;
                       background: var(--tx-1); }
.medidor-audio .dbfs {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    width: 46px; text-align: right; font-size: 10px; color: var(--tx-2);
}
.escala { position: relative; height: 11px; }
.escala span {
    position: absolute; transform: translateX(-50%);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 8.5px; color: var(--tx-3);
}

.seccion { border-bottom: 1px solid var(--linea); padding: 14px 20px; }
.seccion > .etq { display: block; margin-bottom: 8px; }
.dato-fila {
    display: flex; align-items: baseline; gap: 14px; padding: 6px 0;
    border-top: 1px solid rgba(26,34,45,.6);
}
.dato-fila .k { flex: 1; font-size: 12px; color: var(--tx-2); }
.dato-fila .v {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px; text-align: right; word-break: break-all;
}

.lista-eventos { padding: 0 20px 14px; }
.lista-eventos .ev {
    display: flex; gap: 10px; padding: 7px 0; align-items: baseline;
    border-top: 1px solid rgba(26,34,45,.6);
}
.lista-eventos time {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px; color: var(--tx-3); width: 50px; flex-shrink: 0;
}
.lista-eventos .t {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px; font-weight: 600; letter-spacing: .09em; width: 76px; flex-shrink: 0;
}
.lista-eventos .t.g { color: var(--falla); }
.lista-eventos .t.a { color: var(--aviso); }
.lista-eventos .t.o { color: var(--ok); }
.lista-eventos .d { flex: 1; font-size: 11px; color: var(--tx-2); }

/* El nombre del canal se edita donde se lee: parece texto hasta que lo tocás. */
.titulo-editable {
    width: auto; min-width: 120px; max-width: 340px; height: 30px;
    padding: 0 8px; margin-left: -8px;
    background: transparent; border: 1px solid transparent;
    font-size: 15px; font-weight: 600; color: var(--tx-1);
}
.titulo-editable:hover { border-color: var(--linea-viva); }
.titulo-editable:focus { border-color: var(--acento); background: var(--neg); }

/* ==================== historial ==================== */

.tarjetas { display: flex; gap: 1px; background: var(--linea); }
.tarjeta { flex: 1; background: var(--sup-1); padding: 16px 18px;
           display: flex; flex-direction: column; gap: 8px; }
.tarjeta b {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -.02em;
}
.tarjeta .nota { font-size: 10.5px; color: var(--tx-3); }

.tabla-scroll { border: 1px solid var(--linea); }
.tabla-scroll.alto { max-height: 300px; overflow-y: auto; }
.tabla { width: 100%; }
.tabla .fila-t {
    display: grid; align-items: center; gap: 12px; padding: 8px 12px;
    border-top: 1px solid rgba(26,34,45,.7); font-size: 12px;
}
.tabla .fila-t.cab {
    border-top: none; border-bottom: 1px solid var(--linea-viva);
    background: var(--sup-0); position: sticky; top: 0; z-index: 1;
}
.tabla .fila-t.cab > span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px; font-weight: 500; letter-spacing: .13em;
    text-transform: uppercase; color: var(--tx-3);
}
.tabla .der { text-align: right;
              font-family: "IBM Plex Mono", ui-monospace, monospace;
              font-variant-numeric: tabular-nums; }
.barra-prop { height: 4px; background: var(--falla); min-width: 2px; }
.pista { height: 4px; background: var(--sup-2); }

/* ==================== login ==================== */

.caja-login {
    margin: auto; background: var(--sup-0); border: 1px solid var(--linea-viva);
    padding: 34px; width: 360px; display: flex; flex-direction: column; gap: 18px;
}
.caja-login h1 { font-size: 15px; font-weight: 500; text-align: center; color: var(--tx-2); }
.caja-login .error { color: #ffb0aa; font-size: 12px; text-align: center; min-height: 16px; }

/* ==================== utilidades ==================== */
.oculto { display: none !important; }
.tenue { color: var(--tx-3); }