/* Early rotation for pre-paint orientation */
html.pre-rotate-90 body{ position:fixed; top:0; left:0; width:100vh; height:100vw; transform:rotate(90deg) translateY(-100vh); transform-origin:top left; overflow:hidden; }
html.pre-rotate-270 body{ position:fixed; top:0; left:0; width:100vh; height:100vw; transform:rotate(-90deg) translateX(-100vh); transform-origin:top left; overflow:hidden; }

:root{
  --scale:1;
  --tx-orange:#f59e0b; --tx-amber:#fbbf24;
  --bg:var(--tx-orange); --text:#fff;
  --on:#10b981; --late:#eb2f93; --early:#1fa6ff;
  --canceled:#dc2626; --unknown:#6b7280;
  --col1:calc(120px * var(--scale));
  --colP:calc(110px * var(--scale));
  --col3:calc(110px * var(--scale));
  --row-h:calc(62.6px * var(--scale));
  /* Escala de texto y paddings derivada de la altura de fila */
  --row-pad: clamp(6px, calc(var(--row-h) * 0.14), 12px);
  --cell-gap: clamp(6px, calc(var(--row-h) * 0.12), 12px);
  --cell-gap-flight: calc(var(--cell-gap) + 2px);
  --time-prev: clamp(9px,  calc(var(--row-h) * 0.14), 13px);
  --time-main: clamp(16px, calc(var(--row-h) * 0.36), 30px);
  --flight-code: clamp(8px,  calc(var(--row-h) * 0.28), 17px);
  --origin-size: clamp(14px, calc(var(--row-h) * 0.30), 22px);
  --state-size: clamp(12px, calc(var(--row-h) * 0.25), 16px);
  --logo-h: clamp(30px, calc(var(--row-h) * 0.55), 46px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--text); font-family:"Frutiger","Frutiger LT Std","FrutigerNeueLTPro-Regular","Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;; overflow:hidden; }

/* Header */
.header-bar{ width:100%; background:linear-gradient(180deg,var(--tx-amber),var(--tx-orange)); padding-bottom:10px; }
.header-inner{ width:100%; padding:6px 16px; display:grid; grid-template-columns: var(--col1) 1fr var(--colP) var(--col3); align-items:center; column-gap:12px; }
.logo-wrap-header{ display:flex; align-items:center; height:36px; margin-top:4px; }
.logo-wrap-header .logo-img{ height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.header-center{ position:relative; grid-column:2 / 4; min-height:70px; }
.plane-holder{ position:absolute; left:55%; top:70%; transform:translate(-50%,-50%); width:120px; height:120px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.plane-gif{ height:120px; width:auto; object-fit:contain; }
.plane-lottie{ width:96px; height:96px; display:block; filter:invert(1) brightness(1.8) contrast(1.1); }
.plane-lottie.plane-ground{ width:78px; height:78px; }
.plane-lottie svg{ width:100%; height:100%; display:block; }
.plane-landing{ animation:none; transform-origin:center center; }
.plane-takeoff{ animation:none; transform-origin:center center; }
.plane-ground{ height:120px;animation:none; transform-origin:center center; }
/* Keyframes retained for reference (no longer used with GIFs) */
.clock-wrap{ grid-column:4; justify-self:end; display:flex; flex-direction:column; align-items:flex-end; line-height:1; gap:4px; }
.clock{ font-weight:900; font-size:36px; letter-spacing:1px; }
.clock-date{ font-size:15px; font-weight:900; opacity:.92}

.footer-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  background:linear-gradient(180deg,var(--tx-amber),var(--tx-orange));
  color:var(--text);
  font-weight:1000;
  letter-spacing:.6px;
  text-transform:uppercase;
  height: 90px;
  z-index:1000;
  box-shadow:0 -4px 12px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.footer-top{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  font-size:18px;
  gap:12px;
  padding:6px 16px 0;
}
.footer-label{
  position: absolute;
  left: 50%;
    transform: translateX(-50%);
    font-size:37px;
    padding-top: 0px;
    font-weight: 1000;
    letter-spacing: 1px;
    text-align: center;
    color:white;
}
.footer-date{
  font-size:15px;
  font-weight:900;
  opacity:.92;
  margin-left:auto;
}
.footer-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  height:15px;
  line-height:15px;
 
  padding:0 12px;
  margin:0;
  flex:0 0 15px;
  background:#000;
}
.footer-bar .origin-viewport{ height: 22px;
    padding-top:8px;
    line-height: 20px;
    flex: 0 0 30px;
    top: 50px;}
.footer-bar .origin-marquee{ line-height:15px; height:25px; display:block; }
.footer-marquee .origin-marquee{
  font-size:15px;
  font-weight:900;
  letter-spacing:.4px;
}
.footer-marquee .warn-pill{
  display:inline-block;
  background:#b91c1c;
  color:#fff;

  padding:2px 10px;
  border-radius:6px;
  margin-right:10px;
  font-weight:1000;
}
/* Grid list (sin tablas) */
.board{ width:100%; padding:0 0 96px; margin-top:-1px; } /* deja hueco para footer fijo */
.rows-zone{ position:relative; width:100%; background:var(--bg); }
.rows-wrap{ width:100%; background:var(--bg); }
.no-flights-overlay{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.2);
  z-index:2;
}
.no-flights-overlay.active{ display:flex; }
.no-flights-card{
  background:rgba(0,0,0,0.55);
  color:#fff;
  padding:18px 28px;
  border-radius:12px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}
.grid-head,
.tx-row{
  display:grid;
  grid-template-columns: var(--col1) 1fr var(--col3);
  align-items:center;
  column-gap:26px;
}
.grid-head{
  background:var(--tx-orange);
  padding:10px 12px;
  font-weight:1000;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:-2px;
  
}
.grid-head .head-split{ display:flex; align-items:center; gap:27px; }
.grid-head .head-left{ white-space:nowrap; }
.grid-head .head-right{ font-size:20px; letter-spacing:.6px; white-space:nowrap; }
.grid-head > div:nth-child(3){ text-align:right; padding-right:60px; white-space:nowrap; }

.tx-row{ min-height:var(--row-h); height:var(--row-h); padding:var(--row-pad) 12px; position:relative; background-clip:padding-box; }
.tx-row + .tx-row{ margin-top:-1px; }
.tx-row.state-on{ background:var(--on); }
.tx-row.state-late{ background:var(--late); }
.tx-row.state-early{ background:var(--early); }
.tx-row.state-canceled{ background:var(--canceled); }
.tx-row.state-unknown{ background:var(--unknown); }
.tx-row:not(:last-child)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:rgba(255,255,255,0.6);
  pointer-events:none;
}

.cell{ display:flex; align-items:center; min-width:0; }
.c-time{ gap:var(--cell-gap); white-space:nowrap; }
.c-flight{ gap:var(--cell-gap-flight); overflow:hidden; padding-right:1px; width:290px; }
.c-state{ justify-content:flex-end; font-weight:1000; text-transform:uppercase; letter-spacing:.3px; font-size:var(--state-size); white-space:nowrap; width:65px; }
body.scope-landed{ --col3:170px; }
body.scope-landed .c-state{
  white-space:normal;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  width:130px;
  text-align:left;
  padding-left:14px;
  transform:translateX(-35px);
  box-sizing:border-box;
   text-transform:none;
}
body.scope-landed .plane-holder{ position:absolute; left:120% }
body.scope-landed .state-line-top{ display:block; font-size:10px; letter-spacing:.4px; line-height:1.1; white-space:nowrap; }
body.scope-landed .state-line-bottom{ display:block; font-size:16px; font-weight:1000; line-height:1.1; white-space:nowrap; }

.time-wrap{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.time-stack{ display:flex; flex-direction:column; line-height:1; }
.time-prev{ font-size:12px; text-decoration:line-through; font-weight:800; opacity:.95; }
.time-main{ font-size:var(--time-main); font-weight:1000; letter-spacing:.5px; }
.logo-wrap{ width:calc(var(--logo-h) * 1.9); border-radius:10px; background:white; border:1px solid #fff; display:flex; align-items:center; justify-content:center; padding:0px 4px; flex-shrink:0; margin-right:8px; height:30px}
.logo-bg{ width:100%; height:100%; background-color:transparent; background-position:center; background-repeat:no-repeat; background-size:contain; border-radius:8px; }

.flight{ display:flex; align-items:center; gap:var(--cell-gap); overflow:hidden; }
.flight-code{ font-size:var(--flight-code); font-weight:1000; white-space:nowrap; min-width:80px; }
.origin-viewport{ position:relative; flex:1; overflow:hidden; }
.origin-marquee{ display:inline-block; white-space:nowrap; font-size:var(--origin-size); font-weight:900; text-transform:uppercase; }
.origin-viewport.overflow .origin-marquee{
  display:inline-block;
  animation:marq var(--dur,12s) linear infinite;
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0);
}
@keyframes marq{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(0); } /* pausa inicial */
  80%{ transform: translateX(calc(-1 * (var(--w, 0px) + var(--gap, 48px)))); }
  100%{ transform: translateX(calc(-1 * (var(--w, 0px) + var(--gap, 48px)))); } /* pausa final */
}

.band{ height:var(--row-h); }
.band:nth-child(odd){ background:var(--tx-amber); }
.band:nth-child(even){ background:var(--tx-orange); }



@media (orientation: landscape){
  :root{
  --col1:calc(130px * var(--scale));
  --colP:calc(120px * var(--scale));
  --col3:calc(125px * var(--scale)); }
  body.scope-landed{ --col3:260px; }
  .clock{ font-size:38px; }
  .time-main{ font-size:20px; }
  .flight-code{ font-size:20px; min-width:85px}
  .origin-marquee{ font-size:13px; }
  .time-stack {margin-top:-7px;}
}

body.rotate-90, body.rotate-270{ position:fixed; top:0; left:0; width:100vh; height:100vw; overflow:hidden; }
body.rotate-90{ transform:rotate(90deg) translateY(-100vh); transform-origin:top left; }
body.rotate-270{ transform:rotate(-90deg) translateX(-100vh); transform-origin:top left; }