/* ===== Variables ===== */
:root {
  /* Lienzo 4K de diseño */
  --design-w: 3840px;
  --design-h: 2160px;

  /* Header / Footer */
  --top-height: calc(
    var(--row-top-h) + var(--row-bottom-h) + var(--header-gap)
  );
  --header-offset-top: 30px;
  --footer-height: 170px;
  --footer-offset-bottom: 30px;

  --fake-bold-stroke: 0.06em;

  --bug-url: url("img/wnglts.png");
  --bug-size: 210px;
  --bug-top: 30px;
  --bug-right: 30px;
  /* ajuste fino por si en YoloBox lo ves un pelín desplazado */
  --bug-shift-x: 0px; /* + desplaza contenido hacia la derecha */
  --bug-shift-y: 0px; /* + desplaza contenido hacia abajo  */
  --bug-opacity: 0.8; /* 50% */

  /* Badge LIVE */
  --live-badge: 1; /* 1 = visible, 0 = oculto */
  --live-text: "LIVE"; /* texto del badge */
  --live-gap: 10px; /* distancia vertical desde la mosca */
  --live-h: 50px; /* altura del rectángulo */
  --live-pad-x: 20px; /* padding horizontal */
  --live-radius: 10px; /* bordes redondeados */
  --live-bg: rgba(225, 57, 47, 0.8); /* rojo del badge */
  --live-color: #fff; /* texto en blanco */
  --live-weight: 800; /* grosor */
  --live-size: 38px; /* tamaño de fuente */
  --live-letterspace: 4px; /* espaciado letras */
  --live-shift-x: 4px; /* + mueve el badge a la derecha, – a la izquierda */
  --live-stroke: 0.06em; /* prueba 0.04–0.10em */

  /* (opcional) mini sombra del badge para recorte sobre fondos claros */
  --live-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

  --live-dot-d: 16px; /* diámetro del centro rojo */
  --live-ring-d: 24px; /* diámetro del aro blanco */
  --live-dot-offset: 22px; /* posición horizontal del centro */
  --live-dot-gap: 10px;
  --live-dot-color: #f00; /* rojo centro */
  --live-ring-color: #fff; /* blanco aro */

  /* Tipografía header (1x1 + 2x2) */
  --header-font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system,
    Segoe UI, Roboto, Arial;
  --header-text-color: #fff;
  --header-font-weight: 900;
  --header-font-size: 36px;
  --header-top-letter-spacing: 0.15em; /* ajustar el espaciado de las letras del header (airport) */

  /* Header contenido */
  --header-inner-w: 2180px; /* ancho del bloque a la izquierda */
  --header-left-offset: 0px; /* separador del borde izq */
  --header-gap: 0px; /* separación entre celdas */

  /* 1x1 (fila superior) */
  --header-top-left-pad: 40px;
  --header-top-right-pad: 40px;
  --header-top-font-size: 70px;
  --header-top-bg: rgba(19, 40, 61, 1);

  /* Colores celdas 2x2 */
  --header-ab-bg: rgba(225, 57, 47, 1); /* A y B */
  --header-cd-bg: rgba(225, 57, 47, 1); /* C y D */

  /* NUEVO: ancho y aspecto de la columna extra */
  --header-extra-w: 280px; /* ancho de la 5ª columna */
  --header-side-bg: rgba(0, 0, 0, 0); /* color opcional del lateral */

  --cell-b-font-size: 30px;

  --chip-pad-x: 10px; /* padding lateral */
  --chip-outer: 7ch; /* ⬅️ ancho total del chip (incluye padding) */

  --row-top-h: 120px; /* 1x1 */
  --row-bottom-h: 90px; /* 1x4 */

  /* Barra y texto por defecto de .bar (luego se overridea donde toque) */
  --bar-bg: transparent;
  --bar-text: #000;

  /* Prefooter (marquee) */
  --prefooter-height: 80px;
  --prefooter-bg: rgba(19, 40, 61, 0.7);

  --marquee-speed: 180s;
  --marquee-gap: 60px;
  --marquee-font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system,
    Segoe UI, Roboto, Arial;
  --marquee-weight: 900;
  --marquee-color: #fff;
  --marquee-font-size: 40px;

  /* Footer con solape */
  --footer-left: 550px; /* ancho del bloque izquierdo */
  --footer-overlap: 766px; /* cuánto se mete el derecho bajo el izquierdo */
  --footer-bg: rgba(225, 57, 47, 1);
  --footer-left-bg: rgba(225, 57, 47, 1);
  --footer-right-bg: rgba(225, 57, 47, 1);
  --footer-content-h: var(--footer-height); /* contenido = altura del footer */

  /* Logo footer-left (si usas background-image) */
  --logo-size: 60%; /* ancho relativo del logo dentro de footer-left */

  /* Métricas B/C/D */
  --metric-gap: 12px;
  --icon-scale: 1.3;
  --unit-scale: 0.6;
  --muted: 0.75;

  /* Iframe zoom */
  --iframe-zoom: 2.2;
}

/* ===== Base ===== */
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

#stage {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: transparent;
}

#overlay {
  position: relative;
  width: var(--design-w);
  height: var(--design-h);
  transform-origin: top left;
  background: transparent;
  will-change: transform;
}

/* Rectángulo LIVE debajo de la mosca */
#overlay::before {
  content: var(--live-text);
  position: absolute;

  /* debajo del logo, como ya tenías */
  top: calc(var(--bug-top) + var(--bug-size) + var(--live-gap));

  /* ⬇️ CENTRADO horizontal bajo el logo */
  left: calc(
    100% - var(--bug-right) - (var(--bug-size) / 2) + var(--live-shift-x)
  );
  transform: translateX(-50%);

  /* resto de estilos del badge que ya usabas */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--live-h);
  padding: 0 var(--live-pad-x);
  background: var(--live-bg);
  color: var(--live-color);
  border-radius: var(--live-radius);
  box-shadow: var(--live-shadow);
  font: var(--live-weight) var(--live-size) "Montserrat", ui-sans-serif,
    system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: var(--live-letterspace);
  text-transform: uppercase;
  z-index: 999;
  pointer-events: none;
  opacity: calc(var(--live-badge));

  background-color: var(--live-bg);

  /* Dos capas: arriba el centro rojo, debajo el aro blanco */
  background-image: radial-gradient(
      circle,
      var(--live-dot-color) 0 50%,
      transparent 51%
    ),
    radial-gradient(circle, var(--live-ring-color) 0 50%, transparent 51%);
  background-repeat: no-repeat, no-repeat;

  /* Tamaños */
  background-size: var(--live-dot-d) var(--live-dot-d),
    var(--live-ring-d) var(--live-ring-d);

  /* Posiciones (ajústalas iguales para alinear centros) */
  background-position: left calc(var(--live-dot-offset) + 4px) center,
    /* fino: puedes variar estos +px */ left var(--live-dot-offset) center;

  /* Hueco para el conjunto (usa el mayor diámetro) */
  padding-left: calc(
    var(--live-pad-x) + var(--live-ring-d) + var(--live-dot-gap)
  );
  -webkit-text-stroke: var(--live-stroke) currentColor;
  -webkit-text-fill-color: currentColor; /* mantiene el relleno */
}

/* Mosca PNG arriba a la derecha */
#overlay::after {
  content: "";
  position: absolute;
  top: var(--bug-top);
  right: var(--bug-right);
  width: var(--bug-size);
  height: var(--bug-size);

  /* PNG como background (sin máscara) */
  background-image: var(--bug-url);
  background-repeat: no-repeat;
  background-size: contain;

  /* Sintaxis estable en WebView: palabra-clave + offset */
  background-position: right var(--bug-shift-x) top var(--bug-shift-y);

  opacity: var(--bug-opacity);
  pointer-events: none; /* decorativa, no capta clics */
  z-index: 1000;

  /* Debug: quítalo al terminar ajustes finos */
  /* outline: 1px dashed rgba(0, 255, 0, 0.35); /* quítalo al acabar */
}

.faux-bold {
  /* pinta un trazo del mismo color alrededor de las letras */
  -webkit-text-stroke: var(--fake-bold-stroke) currentColor;
  -webkit-text-fill-color: currentColor; /* mantiene el relleno */
}

/* ===== Barras ===== */
.bar {
  position: absolute;
  left: 0;
  width: 100%;
  background: var(--bar-bg);
  color: var(--bar-text);
}

/* Header */
.bar.top {
  top: var(--header-offset-top);
  height: var(--top-height);
}

/* ===== Header (1x1 + 2x2) ===== */
.header {
  pointer-events: auto;
  font-family: var(--header-font-family);
  color: var(--header-text-color);
  font-weight: var(--header-font-weight);
  font-size: var(--header-font-size);
  line-height: 1.1;
}

/* A–D ocupan lo que necesiten (muy importante para que quepa todo) */
.header-inner {
  width: fit-content; /* o max-content si tu webview lo prefiere */
  max-width: 100%;
  margin-left: var(--header-left-offset);
  margin-right: auto;
  display: flex;
  align-items: center;
}

/* Grid: 1x1 + 1x4 + columna extra fija a la derecha */
/* antes: grid-template-columns: repeat(4, 1fr) var(--header-extra-w); */
.header-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content) var(--header-extra-w);
  grid-template-rows: var(--row-top-h) var(--row-bottom-h);
  grid-template-areas:
    "top top top top ."
    "a   b   c   d   .";
  gap: var(--header-gap);
  width: auto; /* deja que la grid crezca con su contenido */
  height: 100%;
  justify-content: start; /* alinea a la izquierda */
}

.header-grid {
  grid-template-columns: repeat(4, max-content) var(--header-extra-w);
  width: auto;
  justify-content: start;
}

/* por si acaso, evita “estirones raros” */
.header-cell {
  min-width: 0;
}

/* Mapeo de áreas */
.cell-top {
  grid-area: top;
}
.cell-a {
  grid-area: a;
}
.cell-b {
  grid-area: b;
  white-space: nowrap;
}
.cell-c {
  grid-area: c;
}
.cell-d {
  grid-area: d;
}

/* NUEVO: la celda lateral ocupa la columna 5 en ambas filas */
.header-cell.cell-side {
  grid-column: 5;
  grid-row: 1 / 3; /* abarca las dos filas */
  background: var(--header-side-bg);
  display: flex;
  align-items: center;
  justify-content: center; /* céntralo como prefieras */
  padding: 0 16px; /* opcional */
}

.cell-b .rwy-lines {
  white-space: nowrap;
}

/* Celdas: base */
.header-cell {
  background: transparent; /* heredará cada una su fondo */
  border: none;
  display: flex;
  align-items: center;
  /* color: no fijamos para no romper herencia del header */
}

/* 1x1 (fila superior) */
.cell-top {
  padding-left: var(--header-top-left-pad);
  padding-right: var(--header-top-right-pad);
  font-size: var(--header-top-font-size); /* tamaño propio del 1x1 */
  background: var(--header-top-bg);
  letter-spacing: var(--header-top-letter-spacing);
}

/* Fuerza herencia dentro del 1x1 por si algún elemento trae su font-size */
.cell-top * {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* A y B */
.header-cell.cell-a {
  width: auto;
  background: var(--header-ab-bg);
}

.header-cell.cell-b {
  width: auto;
  background: var(--header-ab-bg);
  font-size: var(--cell-b-font-size);
  line-height: 1.1;
}

/* C y D */
.header-cell.cell-c,
.header-cell.cell-d {
  width: auto;
  background: var(--header-cd-bg);
}

/* A: a la derecha, con la misma separación que el 1x1 tiene a la izquierda */
.header-cell.cell-a {
  justify-content: flex-left;
  padding-left: var(--header-top-left-pad);
}

/* B, C, D: a la izquierda, mismo padding que el 1x1 */
.header-cell.cell-b,
.header-cell.cell-c,
.header-cell.cell-d {
  width: auto;
  padding-left: calc(var(--header-top-left-pad) + var(--header-left-offset));
}

/* ===== RWY ARR/DEP ===== */
.rwy-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rwy-line {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.rwy-line .value {
  white-space: nowrap;
} /* evita salto en listas cortas */

/* chip con contorno blanco y ancho fijo */
.rwy-chip {
  box-sizing: border-box;
  inline-size: var(--chip-outer); /* ancho total igual en todas */
  padding: 0 var(--chip-pad-x);
  display: inline-flex;
  justify-content: center;
  align-items: center;

  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-weight: 400;
  font-size: 0.9em;
  letter-spacing: 0.9px;
  line-height: 1;
  white-space: nowrap; /* evita salto */
}

/* (opcional) si quieres diferenciar visualmente, tiñe el borde: */
/* .rwy-arr .rwy-chip{ border-color: rgba(0, 255, 170, .95); }
   .rwy-dep .rwy-chip{ border-color: rgba(255, 210, 0, .95); } */

.rwy-chip .chip-ico {
  width: 1em;
  height: 1em;
  display: block;
}

/* Oculta línea si no hay datos */
.rwy-line.is-hidden {
  display: none;
}

.rwy-chip .chip-label {
  font-family: "Roboto Mono", "Montserrat", ui-sans-serif, system-ui,
    -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: 0.04em; /* muy leve; opcional */
}

/* Si algún contenido puede ser muy largo, permite truncado opcional:
.header-cell .value{
  max-width: 38ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
*/

/* ===== Métricas (B/C/D) ===== */
.metric {
  display: inline-flex;
  align-items: center;
  gap: var(--metric-gap);
}

.metric .icon svg {
  width: calc(1em * var(--icon-scale));
  height: calc(1em * var(--icon-scale));
  display: block;
}

.metric .value {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.metric .value .unit {
  font-size: calc(1em * var(--unit-scale));
  opacity: var(--muted);
  transform: translateY(-5%);
}
.metric .subvalue {
  display: block;
  font-size: calc(1em * var(--unit-scale));
  opacity: var(--muted);
  margin-top: 2px;
}

/* Reloj (A): solo ajustes tipográficos, que herede tamaño/peso */
.metric.time .clock {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Oculta si quedan vacíos (¡sin espacios dentro!) */
.subvalue:empty,
.unit:empty,
.sep:has(+ .num:empty) {
  display: none;
}

/* Si tu navegador no soporta :has, simplemente deja .s

/* ===== Prefooter (marquee) ===== */
.bar.prefooter {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--prefooter-height);
  bottom: calc(var(--footer-height) + var(--footer-offset-bottom));
  background: var(--prefooter-bg);
}

.marquee {
  position: relative;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.marquee-track {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--marquee-gap);
  white-space: nowrap;
  will-change: transform;
  animation: marquee-rtl var(--marquee-speed) linear infinite;

  font-size: var(--marquee-font-size);
  font-weight: var(--marquee-weight);
  font-family: var(--marquee-font-family);
  color: var(--marquee-color);
  letter-spacing: 0.2px;
}

/* La segunda pista arranca justo detrás de la primera */
.marquee-track:nth-child(2) {
  left: 100%;
  margin-left: var(--marquee-gap); /* empalme sin hueco inicial */
}

.marquee-item {
  display: inline-block;
}

/* De derecha -> izquierda sin hueco al inicio */
@keyframes marquee-rtl {
  0% {
    transform: translateX(129%) translateY(-50%);
  }
  100% {
    transform: translateX(-220%) translateY(-50%);
  }
}

/* ===== Footer ===== */
.bar.bottom {
  bottom: var(--footer-offset-bottom);
  height: var(--footer-height);
}
.bar.bottom.footer {
  background: var(--footer-bg);
}

.footer {
  pointer-events: auto;
}
.footer-inner {
  position: relative;
  height: 100%;
  display: block;
  overflow: hidden;
}

/* Izquierda: encima, centrada vertical y horizontal, con posible logo de fondo */
.footer-left {
  position: absolute;
  left: 0;
  top: 50%;
  height: var(--footer-content-h);
  transform: translateY(-50%);
  width: var(--footer-left);
  z-index: 2;
  background-color: var(--footer-left-bg);

  /* Logo como decorativo (opcional) */
  background-image: url("img/airnavradar.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--logo-size) auto;
  border: none;
}

/* Derecha: pegada al borde derecho, extendida hacia la izquierda, debajo de la izquierda */
.footer-right {
  position: absolute;
  top: 50%;
  height: var(--footer-content-h);
  transform: translateY(-50%);
  right: 0;
  left: calc(var(--footer-left) - var(--footer-overlap));
  z-index: 1;
  overflow: hidden;
  background: var(--footer-right-bg);
}

/* Iframe ampliado pero encajado */
.footer-right iframe {
  display: block;
  border: 0;
  width: calc(100% / var(--iframe-zoom));
  height: calc(100% / var(--iframe-zoom));
  transform: scale(var(--iframe-zoom));
  transform-origin: top left;
}

@supports not (-webkit-mask: url("") center/contain no-repeat) {
  #overlay::before {
    content: none;
    text-shadow: 0 1px 0 currentColor, 1px 0 0 currentColor,
      0 -1px 0 currentColor, -1px 0 0 currentColor;
  } /* sin capa borrosa */
  #overlay::after {
    background: var(--bug-url) no-repeat center / contain; /* imagen normal */
    -webkit-mask: none;
    mask: none;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
  }
}