/* ============================================================================
   WT Indicators — hoja de estilo de los tres displays.
   El SVG usa un lienzo fijo de 1920x1080 y se escala solo, asi que todos los
   tamanos de aqui son "unidades de lienzo", no pixeles de pantalla.
   ========================================================================= */

:root {
    --glass-cyan: #24e1ff;
    --glass-green: #4df08d;
    --glass-amber: #ffb020;
    --glass-red: #ff4438;
    --glass-ink: #dceeff;
    --glass-dim: #4d6076;
    --hud-green: #35ff9b;
    --hud-dim: #0e6b3d;
    --analog-radium: #cfe6c2;
    --analog-needle: #f2f2ee;
    --analog-orange: #ff9a2e;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;              /* el display nunca debe hacer scroll */
    background: #000;
    color: var(--glass-ink);
    font-family: "B612", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* La pagina es una columna: barra arriba, display debajo.
 *
 * Antes la placa y el dock eran los dos `position: fixed` y flotaban encima
 * del display. En una pantalla estrecha el dock no cabia en una linea, se
 * partia en dos por el flex-wrap, y la segunda linea caia justo sobre la placa
 * del avion y sobre las cajas de G y AOA del PFD. Sacandolos del flotado y
 * poniendolos en una barra de verdad, el display ocupa lo que sobra y no hay
 * forma de que se muerdan: si la barra crece, el display encoge. */
body { display: flex; flex-direction: column; }

#barra {
    flex: none;
    display: flex; align-items: center;
    flex-wrap: wrap; gap: 8px;
    padding: 10px 12px;
    z-index: 20;
}
#barra.hidden { display: none; }

#app { position: relative; flex: 1 1 auto; min-height: 0; }

.layer { position: absolute; inset: 0; display: none; }
.layer.active { display: block; }

svg.screen { width: 100%; height: 100%; display: block; }

/* La ficha es el unico display que puede ser mas alto que la pantalla: no se
   pilota con el, se lee. El resto siguen encajados enteros a proposito, porque
   un instrumento al que hay que hacerle scroll no es un instrumento. */
svg.tarjeta { width: 100%; height: auto; }
.layer[data-theme="ficha"] { overflow-y: auto; overflow-x: hidden; }
svg.screen text { user-select: none; }

/* ============================ 1. GLASS COCKPIT ========================== */

.glass { background: #04070c; }

.g-sky { fill: #1f6ba8; }
.g-ground { fill: #6d4a20; }
.g-horizon-line { stroke: #ffffff; stroke-width: 3; }

.g-ladder { stroke: #ffffff; stroke-width: 2.5; }
.g-ladder-neg { stroke-dasharray: 16 12; }
.g-ladder-text { fill: #ffffff; font-size: 22px; font-weight: 600; }

.g-frame { fill: none; stroke: #1d3346; stroke-width: 3; }

.g-bank-tick { stroke: var(--glass-ink); stroke-width: 3; }
.g-bank-index { fill: var(--glass-ink); }
.g-bank-pointer { fill: var(--glass-green); }
.g-slip { fill: var(--glass-green); stroke: #04070c; stroke-width: 1.5; }

.g-symbol-wing { fill: none; stroke: #111; stroke-width: 9; stroke-linejoin: round; }
.g-symbol-dot { fill: none; stroke: var(--glass-amber); stroke-width: 4; }

/* El simbolo del avion lleva un contorno negro y encima el trazo ambar: es
   lo unico que garantiza que se lea igual sobre cielo y sobre tierra. */
.g-symbol-wing { paint-order: stroke; }
.glass .g-symbol-wing { stroke: #ffcd38; stroke-width: 5; filter: drop-shadow(0 0 3px #000); }

.g-fpv { fill: none; stroke: var(--glass-green); stroke-width: 3.5; }

.g-tape-bg { fill: rgba(6, 14, 22, 0.72); stroke: #16293a; stroke-width: 2; }
.g-tape-tick { stroke: var(--glass-ink); stroke-width: 2.5; }
.g-tape-text { fill: var(--glass-ink); font-size: 26px; }
.g-tape-label { fill: var(--glass-dim); font-size: 20px; letter-spacing: 3px; }
.g-cardinal { fill: var(--glass-cyan); font-weight: 700; }

.g-window { fill: #04070c; stroke: var(--glass-cyan); stroke-width: 3; }
.g-window-alt { stroke: var(--glass-green); }
.g-window-hdg { stroke: var(--glass-ink); }
.g-window-text { fill: #ffffff; font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums; }
.g-window-text.cerca { fill: var(--glass-amber); }
.g-window-text.rompe { fill: var(--glass-red); animation: vne-parpadeo 0.5s steps(1) infinite; }

.g-vne-banda { fill: url(#vne-rayado); }
.g-vne-texto { fill: var(--glass-dim); font-size: 22px; letter-spacing: 2px; }
.g-vne-texto.cerca { fill: var(--glass-amber); }
.g-vne-texto.rompe { fill: var(--glass-red); animation: vne-parpadeo 0.5s steps(1) infinite; }

.g-vsi-needle {
    fill: none; stroke: var(--glass-green); stroke-width: 5;
    stroke-linecap: round; paint-order: stroke;
}
.g-vsi-punta { fill: var(--glass-green); }
.g-vsi-cero { stroke: var(--glass-dim); stroke-width: 2; stroke-dasharray: 6 5; }
.g-vsi-value { fill: var(--glass-green); font-size: 26px; }

.g-hdg-index { fill: var(--glass-ink); }

.g-title { fill: var(--glass-cyan); font-size: 34px; font-weight: 700; letter-spacing: 6px; }
.g-vehicle { fill: var(--glass-dim); font-size: 30px; letter-spacing: 4px; }

.g-box { fill: rgba(6, 14, 22, 0.72); stroke: #16293a; stroke-width: 2; }
.g-label { fill: var(--glass-dim); font-size: 18px; letter-spacing: 2px; text-anchor: middle; }
.g-value {
    fill: var(--glass-ink); font-size: 36px; font-weight: 700;
    text-anchor: middle; font-variant-numeric: tabular-nums;
}
.g-value.caution { fill: var(--glass-amber); }
.g-value.warn { fill: var(--glass-red); }
.g-unit { fill: var(--glass-dim); font-size: 15px; text-anchor: middle; }

.g-pill { fill: rgba(6, 14, 22, 0.72); stroke: #16293a; stroke-width: 2; }
.g-pill.on { fill: rgba(255, 176, 32, 0.2); stroke: var(--glass-amber); }
.g-pill-text { fill: var(--glass-dim); font-size: 19px; text-anchor: middle; letter-spacing: 2px; }
.g-pill.on + .g-pill-text, .g-pill.on ~ text { fill: var(--glass-amber); }

.g-ctl-axis { stroke: #16293a; stroke-width: 2; }
.g-ctl-stick { fill: var(--glass-cyan); }
.g-ctl-pedals { fill: var(--glass-green); }

/* ============================== 2. HUD ================================== */

.hud { background: #000; }
.hud text { font-family: "B612 Mono", ui-monospace, monospace; fill: var(--hud-green); }

.h-horizon { fill: none; stroke: var(--hud-green); stroke-width: 5.5; }
.h-ladder { fill: none; stroke: var(--hud-green); stroke-width: 2.2; opacity: 0.9; }
.h-ladder-dash { stroke-dasharray: 22 14; }
.h-ladder-text { font-size: 22px; }

.h-tick { stroke: var(--hud-green); stroke-width: 2.5; }
.h-tick-text { font-size: 20px; fill: var(--hud-green); opacity: 0.85; }

.h-box { fill: none; stroke: var(--hud-green); stroke-width: 2.5; }
.h-box-text { font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* El HUD es verde por definicion, pero un limite estructural es lo unico que
   justifica romper esa regla: si todo es del mismo color, un aviso no avisa. */
.hud .h-box-text.cerca { fill: #ffd23d; }
.hud .h-box-text.rompe { fill: #ff6a5a; animation: vne-parpadeo 0.5s steps(1) infinite; }

.h-fpv { fill: none; stroke: var(--hud-green); stroke-width: 3; }
.h-guncross { fill: none; stroke: var(--hud-green); stroke-width: 3; }
.h-bank-pointer { fill: var(--hud-green); }

.h-small { font-size: 20px; opacity: 0.7; letter-spacing: 2px; }
.h-data { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.h-thr { fill: var(--hud-green); opacity: 0.75; }

/* Barrido de CRT: bandas finas y una vineta. Sutil, o marea. */
.hud-scanlines {
    position: absolute; inset: 0; pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0 2px,
            rgba(0, 0, 0, 0.28) 2px 4px),
        radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.65) 100%);
    mix-blend-mode: multiply;
}

/* ============================ 3. PANEL WWII ============================= */

.analog text { font-family: "Barlow Condensed", "B612", sans-serif; text-anchor: middle; }

.a-bezel-outer { fill: url(#a-bezel-grad); stroke: #0a0c0a; stroke-width: 2; }
.a-bezel-inner { fill: #191c19; }
.a-face { fill: url(#a-face-grad); }
.a-screw { fill: #8d918c; stroke: #22251f; stroke-width: 1; }
.a-screw-slot { stroke: #2a2d28; stroke-width: 1.8; }

/* Reflejo del cristal: una sola mancha suave arriba a la izquierda. */
.a-glass { fill: rgba(255, 255, 255, 0.055); pointer-events: none; }

.a-tick-major { stroke: #f0f0ea; stroke-width: 3.5; }
.a-tick-minor { stroke: #9a9a92; stroke-width: 2; }
.a-num { fill: #ecece4; font-size: 30px; font-weight: 500; }
.a-radium { fill: var(--analog-radium); }
.a-cardinal { fill: var(--analog-orange); font-weight: 700; }
.a-redline { fill: none; stroke: #c8261c; stroke-width: 7; }

.a-label { fill: #8e948a; font-size: 19px; letter-spacing: 3px; }
.a-unit { fill: #8e948a; font-size: 19px; letter-spacing: 2px; }
.a-legend { fill: #9a9f93; font-size: 15px; letter-spacing: 1px; }
.a-legend-alt { fill: var(--analog-orange); }
.a-digital { fill: var(--analog-radium); font-size: 23px; font-variant-numeric: tabular-nums; }

.a-needle { fill: var(--analog-needle); stroke: #000; stroke-width: 0.6; }
.a-needle-short { fill: #c9ccc2; }
.a-needle-alt { fill: var(--analog-orange); }
.a-hub { fill: #2a2d28; stroke: #55594f; stroke-width: 2; }
.a-hub-dot { fill: #d8d8d0; }

.a-sky { fill: #2e6f9e; }
.a-ground { fill: #7a4a1d; }
.a-horizon-line { stroke: #f4f4ec; stroke-width: 2.5; }
.a-ladder { stroke: #f4f4ec; stroke-width: 2; }
.a-bank-pointer { fill: var(--analog-orange); }
.a-plane-symbol { fill: none; stroke: var(--analog-orange); stroke-width: 4; }
.a-lubber { fill: var(--analog-orange); }

.a-rivet { fill: #3a3e38; stroke: #14170f; stroke-width: 1; }
.a-plate-bg { fill: #14170f; stroke: #4a4f45; stroke-width: 2; }
.a-plate { fill: var(--analog-radium); font-size: 32px; letter-spacing: 8px; }

.a-strip { fill: #14170f; stroke: #3a3e38; stroke-width: 2; }
/* Ojo con la especificidad: ".analog text" ya fija text-anchor:middle, y una
   clase suelta no le gana. Sin el ".analog" de delante estas dos salen
   centradas: "COMBUSTIBLE" se sale de la regleta por la izquierda y la lectura
   de litros se monta encima de la barra. */
.analog .a-strip-label { fill: #8e948a; font-size: 21px; letter-spacing: 3px; text-anchor: start; }
.analog .a-strip-value { fill: var(--analog-radium); font-size: 24px; text-anchor: start; }
.a-bar-bg { fill: #0a0c08; stroke: #3a3e38; stroke-width: 1.5; }
.a-bar { fill: var(--analog-radium); }
.a-bar.low { fill: #d4362a; }
.a-bar-thr { fill: var(--analog-orange); }
.a-bar-thr.ab { fill: #ff4a35; }   /* postcombustion */

.a-lamp { fill: #23261f; stroke: #0c0e0a; stroke-width: 1.5; }
.a-lamp.on { fill: #ffb43a; filter: drop-shadow(0 0 10px rgba(255, 180, 58, 0.85)); }
.a-lamp.warn { fill: #ff4a35; filter: drop-shadow(0 0 10px rgba(255, 74, 53, 0.85)); }
.a-lamp-ring { fill: #0e100c; stroke: #4a4f45; stroke-width: 2; }
.analog .a-lamp-text { fill: #8e948a; font-size: 17px; letter-spacing: 1px; text-anchor: start; }

/* ========================= Controles y avisos =========================== */

/* Con cinco displays mas Datos y Red el dock se comia la fila superior del
   PFD. Se aprieta el espaciado en vez de mover la barra: arriba a la derecha
   es donde no estorba a ningun instrumento de los cinco. */
#dock {
    /* `margin-left: auto` y no `justify-content: space-between` en la barra:
       en la ficha y en el panel WWII la placa se oculta, y con space-between
       el dock se iria solo a la izquierda. Asi se queda pegado a la derecha
       haya placa o no. */
    margin-left: auto;
    /* Con seis displays, dos banderas, el nick y el cafe ya no cabe todo en una
       linea en pantallas estrechas: se parte en dos dentro de la barra, que
       crece, en vez de derramarse sobre el display. */
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; justify-content: flex-end;
    padding: 6px 8px; border-radius: 9px;
    background: rgba(8, 12, 18, 0.82);
    border: 1px solid rgba(120, 160, 200, 0.22);
    backdrop-filter: blur(6px);
    transition: opacity 0.4s ease;
    font-size: 12px;
}
/* Ya no se atenua solo. Ese desvanecido existia porque el dock tapaba el
   display; ahora vive en su propia barra y no tapa nada, asi que apagarlo solo
   servia para no poder leerlo. Ademas volvia con `mousemove`, que en una
   tablet no ocurre nunca: se quedaba al 12% para siempre. La tecla H sigue
   escondiendo la barra entera cuando estorbe. */

.dock-themes { display: flex; gap: 4px; }
#dock button {
    font: inherit; font-family: "B612", sans-serif;
    color: #9fb6cc; background: transparent;
    border: 1px solid rgba(120, 160, 200, 0.28);
    border-radius: 5px; padding: 5px 8px; cursor: pointer; white-space: nowrap;
    transition: all 0.15s ease;
}
#dock button:hover { border-color: var(--glass-cyan); color: #e6f5ff; }
#dock button.active { color: #051018; background: var(--glass-cyan); border-color: var(--glass-cyan); }
#dock button b { opacity: 0.6; margin-right: 5px; font-weight: 700; }
#dock button.active b { opacity: 0.55; }

.dock-status {
    width: 11px; height: 11px; border-radius: 50%;
    background: #ff4438; box-shadow: 0 0 9px #ff4438;
}
.dock-status[data-state="ok"] { background: var(--glass-green); box-shadow: 0 0 9px var(--glass-green); }
.dock-status[data-state="idle"] { background: var(--glass-amber); box-shadow: 0 0 9px var(--glass-amber); }

.dock-idiomas { display: flex; gap: 3px; }
.dock-bandera {
    font: inherit; background: transparent; cursor: pointer;
    border: 1px solid rgba(120, 160, 200, 0.28); border-radius: 5px;
    padding: 3px 5px; font-size: 14px; line-height: 1; filter: grayscale(1); opacity: 0.55;
    transition: all 0.15s ease;
}
.dock-bandera:hover { opacity: 1; filter: none; }
.dock-bandera.active { opacity: 1; filter: none; border-color: var(--glass-cyan); }

/* Campo del nick. Angosto a proposito: es un ajuste que se toca una vez. */
.dock-yo {
    font: inherit; font-family: "B612", sans-serif; width: 84px;
    color: #9fb6cc; background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(120, 160, 200, 0.28); border-radius: 5px;
    padding: 4px 7px;
}
.dock-yo:focus { outline: none; border-color: var(--glass-cyan); color: #e6f5ff; }
.dock-yo::placeholder { color: #4d6076; }

.dock-cafe {
    text-decoration: none; font-size: 16px; line-height: 1;
    padding: 3px 5px; border-radius: 5px;
    border: 1px solid rgba(120, 160, 200, 0.28);
    filter: grayscale(1); opacity: 0.6; transition: all 0.15s ease;
}
.dock-cafe:hover { filter: none; opacity: 1; border-color: var(--glass-amber); }

.dock-hint { color: #56718a; letter-spacing: 0.4px; }
.dock-version { color: #3d5468; letter-spacing: 0.4px; font-size: 11px; }

/* Placa de identidad: que avion llevas y en que cuadrante vas. Comparte el
   renglon del dock, en la esquina contraria, porque es el unico sitio libre en
   los cinco displays y ademas evita repetir el nombre del avion dentro de
   cada uno. A diferencia del dock no se desvanece sola: esto es informacion de
   vuelo, no un control que estorbe. */
#placa {
    display: flex; align-items: center; gap: 12px;
    padding: 7px 12px; border-radius: 9px;
    background: rgba(8, 12, 18, 0.82);
    border: 1px solid rgba(120, 160, 200, 0.22);
    backdrop-filter: blur(6px);
    font-family: "B612", sans-serif; font-size: 12px;
}
#placa.hidden { display: none; }

.placa-avion {
    color: #cfe3f5; font-size: 15px; font-weight: 700; letter-spacing: 3px;
    white-space: nowrap; max-width: 30ch; overflow: hidden; text-overflow: ellipsis;
}
.placa-cuad {
    display: flex; align-items: baseline; gap: 6px;
    padding-left: 12px; border-left: 1px solid rgba(120, 160, 200, 0.22);
}
.placa-cuad[hidden] { display: none; }
.placa-cuad b { color: #56718a; font-weight: 400; letter-spacing: 2px; }

/* Aviso de Vne. Apagado es un dato mas ("las alas aguantan hasta 875"); al
   acercarte se pone ambar, y pasado el limite parpadea en rojo. El parpadeo se
   reserva para el rojo a proposito: algo que titila en la periferia roba la
   vista, y eso solo se justifica cuando de verdad se estan por romper. */
.placa-vne {
    display: flex; align-items: baseline; gap: 6px;
    padding-left: 12px; border-left: 1px solid rgba(120, 160, 200, 0.22);
    color: #56718a; letter-spacing: 2px;
}
.placa-vne[hidden] { display: none; }
.placa-vne span {
    color: #8fa6bb; font-family: "B612 Mono", ui-monospace, monospace;
    font-size: 17px; font-weight: 700;
}
.placa-vne[data-estado="cerca"] { color: var(--glass-amber); }
.placa-vne[data-estado="cerca"] span { color: var(--glass-amber); }
.placa-vne[data-estado="rompe"] { color: var(--glass-red); }
.placa-vne[data-estado="rompe"] span { color: var(--glass-red); }
.placa-vne[data-estado="rompe"] { animation: vne-parpadeo 0.5s steps(1) infinite; }

@keyframes vne-parpadeo {
    50% { opacity: 0.15; }
}

/* Quien pide menos animacion no quiere que un instrumento le titile encima;
   el color rojo ya dice lo mismo. */
@media (prefers-reduced-motion: reduce) {
    .placa-vne[data-estado="rompe"] { animation: none; }
}
.placa-cuad span {
    color: var(--glass-green); font-family: "B612 Mono", ui-monospace, monospace;
    font-size: 17px; font-weight: 700; letter-spacing: 1px;
}

/* La placa se pinta con los colores de cada cabina, igual que los avisos. */
body[data-theme="hud"] #placa {
    background: rgba(0, 0, 0, 0.85); border-color: var(--hud-dim);
}
body[data-theme="hud"] .placa-avion,
body[data-theme="hud"] .placa-cuad span { color: var(--hud-green); }
body[data-theme="hud"] .placa-cuad { border-left-color: var(--hud-dim); }

body[data-theme="analog"] #placa {
    background: #14170f; border-color: #4a4f45;
    font-family: "Barlow Condensed", sans-serif;
}
body[data-theme="analog"] .placa-avion,
body[data-theme="analog"] .placa-cuad span { color: var(--analog-radium); }
body[data-theme="analog"] .placa-cuad { border-left-color: #4a4f45; }
body[data-theme="analog"] .placa-cuad b { color: #8e948a; }

/* El panel WWII ya trae su propia placa remachada con el nombre del avion en
   medio de la fila superior: repetirlo aqui al lado seria decirlo dos veces en
   el mismo renglon. En ese display la placa solo canta el cuadrante. */
/* En la ficha la placa sobra y ademas estorba: ese display se desplaza, asi que
   una placa fija encima se come el encabezado y todo lo que pase por debajo. El
   avion, el cuadrante y el Vne ya salen dentro de la propia ficha. */
body[data-theme="ficha"] #placa { display: none; }

body[data-theme="analog"] .placa-avion { display: none; }
body[data-theme="analog"] .placa-cuad { padding-left: 0; border-left: none; }
body[data-theme="analog"] #placa:not(:has(.placa-cuad:not([hidden]))) { display: none; }

#overlay {
    position: fixed; inset: 0; z-index: 15;
    display: none; place-content: center; text-align: center;
    background: rgba(2, 5, 9, 0.82);
    backdrop-filter: blur(3px);
}
#overlay.show { display: grid; }
#overlay h2 {
    margin: 0 0 12px; font-size: 34px; letter-spacing: 6px;
    color: var(--glass-amber); font-weight: 600;
}
#overlay p { margin: 0 auto; max-width: 620px; color: #8fa6bb; font-size: 17px; line-height: 1.6; }

/* El aviso de derribos es informacion de fondo, no de pilotaje: se lee de
   reojo y no debe competir con los instrumentos ni taparlos. Por eso va
   discreto, en una sola linea y recortado si el nombre del jugador es largo. */
#messages {
    position: fixed; left: 50%; transform: translateX(-50%);
    z-index: 18; padding: 5px 12px; border-radius: 5px;
    background: rgba(8, 14, 20, 0.86); border: 1px solid rgba(120, 160, 200, 0.22);
    color: var(--glass-ink); font-size: 11px; letter-spacing: 0.5px;
    max-width: min(46ch, 40vw); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}

/* Cada display tiene su hueco libre distinto, asi que el aviso se acomoda
   al tema en vez de pelearse con los instrumentos. */
body[data-theme="glass"] #messages { bottom: 132px; }
body[data-theme="mapa"] #messages,
body[data-theme="radar"] #messages { bottom: 40px; }
/* Sin una regla propia, en la ficha el aviso se quedaba sin `bottom` y acababa
   arriba del todo, detras del dock y cortado. */
body[data-theme="ficha"] #messages { bottom: 24px; }
body[data-theme="analog"] #messages { top: 88px; left: 44px; transform: none; }
body[data-theme="hud"] #messages {
    top: 104px; left: 44px; transform: none;
    background: rgba(0, 0, 0, 0.85); border-color: var(--hud-dim);
    color: var(--hud-green); font-family: "B612 Mono", ui-monospace, monospace;
    text-shadow: 0 0 8px rgba(53, 255, 155, 0.55);
}

body[data-theme="analog"] #messages {
    background: #14170f; border-color: #4a4f45; color: var(--analog-radium);
    font-family: "Barlow Condensed", sans-serif; letter-spacing: 2px;
}

#messages.show { opacity: 1; }

#raw {
    position: fixed; inset: auto 0 0 0; z-index: 19; max-height: 55vh;
    overflow: auto; padding: 16px 24px 28px;
    background: rgba(4, 8, 13, 0.96); border-top: 1px solid rgba(120, 160, 200, 0.25);
    font-family: "B612 Mono", ui-monospace, monospace; font-size: 13px;
    transform: translateY(100%); transition: transform 0.3s ease;
}
#raw.open { transform: translateY(0); }
#raw h4 { margin: 14px 0 8px; color: var(--glass-cyan); letter-spacing: 2px; font-size: 13px; }
.raw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr) auto); gap: 3px 12px; }
.raw-grid .k { color: #6d8399; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raw-grid .v { color: var(--glass-green); text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================================
   Displays tacticos: mapa y radar.
   ========================================================================= */

.tac { width: 100%; height: 100%; display: block; }

.tac-fondo { fill: #071018; stroke: none; }
.tac-marco { fill: none; stroke: rgba(80, 130, 170, 0.55); stroke-width: 2; }

.tac-rejilla line { stroke: rgba(80, 130, 170, 0.16); stroke-width: 1; }
.tac-anillos circle { fill: none; stroke: rgba(80, 130, 170, 0.3); stroke-width: 1.5; }
.tac-marcas line { stroke: rgba(80, 130, 170, 0.5); stroke-width: 2; }

/* El contacto propio y los ajenos usan la misma forma a proposito: lo que
   distingue bando es el color, que es como lo hace el juego. */
.tac-tri { stroke: rgba(0, 0, 0, 0.55); stroke-width: 1; }
.tac-pista { stroke-width: 5; stroke-linecap: round; opacity: 0.75; }

.tac-titulo {
    fill: var(--glass-cyan); font-family: "B612", sans-serif;
    font-size: 26px; letter-spacing: 5px;
}
.tac-norte {
    fill: var(--glass-ink); font-family: "B612", sans-serif;
    font-size: 22px; letter-spacing: 2px; text-anchor: middle; opacity: 0.8;
}
.tac-leyenda {
    fill: var(--glass-dim); font-family: "B612", sans-serif;
    font-size: 19px; letter-spacing: 2px;
}
.tac-cuenta {
    fill: var(--glass-ink); font-family: "B612 Mono", ui-monospace, monospace;
    font-size: 22px; text-anchor: end;
}
.tac-anillo-txt {
    fill: var(--glass-dim); font-family: "B612 Mono", ui-monospace, monospace;
    font-size: 16px;
}
/* Letras y numeros de la rejilla, en el borde del mapa: son los que hacen que
   el cuadrante que canta la placa se pueda comprobar de un vistazo. */
.tac-rejilla-txt {
    fill: rgba(120, 165, 200, 0.5); font-family: "B612 Mono", ui-monospace, monospace;
    font-size: 17px; text-anchor: middle;
}
.tac-cuadrante {
    fill: var(--glass-green); font-family: "B612 Mono", ui-monospace, monospace;
    font-size: 40px; font-weight: 700; letter-spacing: 2px;
}
.tac-cuadrante-celda { fill: rgba(77, 240, 141, 0.09); stroke: var(--glass-green); stroke-width: 1.5; }

.tac-aviso {
    fill: var(--glass-dim); font-family: "B612", sans-serif;
    font-size: 24px; letter-spacing: 2px; text-anchor: middle;
}

/* ============================================================================
   Display 6: ficha del avion.
   A diferencia de los otros cinco, este se lee parado: se permite texto
   corrido, tablas y una tipografia menos apretada.
   ========================================================================= */

.tarjeta { background: #04070c; }
.tarjeta text { font-family: "B612", sans-serif; }

.t-cabecera { fill: var(--glass-cyan); font-size: 34px; font-weight: 700; letter-spacing: 6px; }
.t-aviso { fill: var(--glass-amber); font-size: 20px; letter-spacing: 2px; }

.t-titulo {
    fill: var(--glass-dim); font-size: 20px; letter-spacing: 5px;
}
.t-etiqueta { fill: var(--glass-dim); font-size: 21px; letter-spacing: 1px; }
.t-valor {
    fill: var(--glass-ink); font-size: 26px; font-weight: 700;
    font-family: "B612 Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums; text-anchor: end;
}
.t-valor-fila {
    fill: var(--glass-ink); font-size: 23px;
    font-family: "B612 Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.t-unidad { fill: var(--glass-dim); font-size: 17px; }
.t-nota { fill: #3d5468; font-size: 17px; }
.t-vacio-linea { fill: #3d5468; font-size: 21px; }

/* Consejos. El color del cuadrito dice de que tipo es antes de leer la frase:
   rojo lo que te derriba, ambar lo que te limita, verde lo que puedes
   explotar, azul lo que conviene saber. El texto se queda casi blanco en todos
   para que la lista se lea de corrido; solo el peligro se tine. */
.t-consejo { fill: #cfe3f5; font-size: 23px; }
.t-txt-peligro { fill: #ffb9b2; }

.t-marca { }
.t-peligro { fill: var(--glass-red); }
.t-cuidado { fill: var(--glass-amber); }
.t-ventaja { fill: var(--glass-green); }
.t-dato { fill: var(--glass-cyan); }

.t-br { fill: var(--glass-dim); font-size: 21px; letter-spacing: 2px; }
.t-br-cuad { fill: var(--glass-green); font-weight: 700; }

/* Pestañas de la ficha. Se pintan como los botones del dock para que se lean
   como algo que se toca, no como un titulo mas. */
.t-pestana { cursor: pointer; }
.t-pestana-caja {
    fill: rgba(6, 14, 22, 0.72); stroke: rgba(120, 160, 200, 0.28); stroke-width: 2;
}
.t-pestana-caja.on { fill: var(--glass-cyan); stroke: var(--glass-cyan); }
.t-pestana-txt {
    fill: #9fb6cc; font-size: 20px; letter-spacing: 4px; text-anchor: middle;
}
.t-pestana-txt.on { fill: #051018; font-weight: 700; }

/* Una linea separadora bajo cada titulo de seccion, dibujada con el borde del
   texto en vez de con un <line> aparte. */
.t-titulo { paint-order: stroke; }

.t-grafica-fondo { fill: rgba(6, 14, 22, 0.72); stroke: #16293a; stroke-width: 1.5; }
.t-eje { stroke: #16293a; stroke-width: 2; }
.t-eje-txt { fill: var(--glass-dim); font-size: 16px; letter-spacing: 2px; }
.t-curva {
    fill: none; stroke: var(--glass-cyan); stroke-width: 2.5;
    stroke-linejoin: round; stroke-linecap: round;
}
.t-pico { fill: var(--glass-green); }
.t-pico-linea { stroke: var(--glass-green); stroke-width: 1.5; stroke-dasharray: 4 4; }
.t-pico-txt {
    fill: var(--glass-green); font-size: 18px; text-anchor: middle;
    font-family: "B612 Mono", ui-monospace, monospace; font-weight: 700;
}
.t-vacio { fill: #3d5468; font-size: 18px; text-anchor: middle; }

/* ============================================================================
   Aviso de rotura inminente.
   Rojo de neon, grande y parpadeando: es lo unico de todo el panel que se
   permite tapar los instrumentos, porque cuando sale ya no hay nada que leer,
   solo algo que soltar. Va arriba y no en el centro para no comerse el
   horizonte artificial justo cuando lo necesitas para recuperar.
   ========================================================================= */

#alerta {
    position: fixed; top: 11%; left: 50%; transform: translateX(-50%);
    z-index: 30; pointer-events: none;
    animation: alerta-parpadeo 0.55s steps(1) infinite;
}
#alerta[hidden] { display: none; }

.alerta-marco {
    display: flex; align-items: center; gap: 26px;
    padding: 18px 40px;
    border: 3px solid #ff2d2d;
    border-radius: 4px;
    background: rgba(24, 0, 0, 0.78);
    /* El halo por dentro y por fuera es lo que le da el aire de neon. */
    box-shadow: 0 0 26px rgba(255, 45, 45, 0.85),
                inset 0 0 26px rgba(255, 45, 45, 0.45);
    backdrop-filter: blur(2px);
}

.alerta-icono { width: 62px; height: 55px; flex: none; }
.alerta-icono path, .alerta-icono circle {
    fill: none; stroke: #ff5b5b; stroke-width: 7;
    stroke-linejoin: round; stroke-linecap: round;
}
.alerta-icono .alerta-punto { fill: #ff5b5b; stroke: none; }

.alerta-texto { display: flex; flex-direction: column; gap: 4px; }
.alerta-titulo {
    font-family: "B612", sans-serif; font-size: 40px; font-weight: 700;
    letter-spacing: 9px; color: #fff;
    text-shadow: 0 0 14px rgba(255, 45, 45, 0.95);
}
.alerta-detalle {
    font-family: "B612 Mono", ui-monospace, monospace; font-size: 19px;
    letter-spacing: 1px; color: #ffb0b0;
}

@keyframes alerta-parpadeo {
    50% { opacity: 0.28; }
}

/* Quien pide menos animacion no quiere un parpadeo encima del horizonte; el
   rojo y el tamano ya dicen lo mismo. */
@media (prefers-reduced-motion: reduce) {
    #alerta { animation: none; }
}