/* ============================================================
   KAEK AVIATION OPERATIONS — MAIN STYLESHEET
   Dark HUD Aeronautical Design
   ============================================================ */

:root {
  /* PALETA (2026-10-16). Azul noche y no negro puro, texto blanco grisaceo y
     no blanco puro (el contraste extremo produce halo). Los colores de estado
     siguen la convencion de cabina (FAA AC 25-11B): rojo alerta, ambar
     precaucion, verde normal, cian aviso; se reservan para estados, nunca de
     adorno. Contrastes medidos contra --bg-base y --bg-card: texto 15.9/14.4,
     secundario 8.8, tenue 5.6, azul 5.8, verde 9.7, ambar 11.2, rojo 6.8,
     cian 10.4 (minimo WCAG para texto: 4.5). */
  --blue:        #4c8dff;
  --blue-dim:    #2563eb;   /* relleno de botones: el blanco encima da 5.2 */
  --blue-glow:   rgba(76,141,255,0.25);
  --blue-ghost:  rgba(76,141,255,0.08);
  --bg-base:     #0b1220;
  --bg-panel:    #0e1626;
  --bg-card:     #131c2e;
  --bg-card2:    #18233a;
  --bg-input:    #0e1626;
  --border:      rgba(76,141,255,0.20);
  --border-dim:  rgba(163,179,201,0.12);
  --border-glow: rgba(76,141,255,0.45);
  --text-prime:  #e6edf6;
  --text-second: #a3b3c9;
  --text-dim:    #7d8ea6;
  --text-label:  #a3b3c9;
  --text-mono:   #9ec5ff;
  --green:       #34d399;
  --green-dim:   rgba(52,211,153,0.13);
  --amber:       #fbbf24;
  --amber-dim:   rgba(251,191,36,0.13);
  --red:         #f87171;
  --red-dim:     rgba(248,113,113,0.14);
  --cyan:        #22d3ee;
  --cyan-dim:    rgba(34,211,238,0.12);
  --purple:      #a855f7;
  --sidebar-w:   220px;
  --statusbar-h: 36px;
  --font-hud:    'Orbitron', sans-serif;
  --font-body:   'Rajdhani', sans-serif;
  --font-mono:   'Share Tech Mono', monospace;

  /* ── ESCALA TIPOGRAFICA ────────────────────────────────────────
     Hasta ahora no habia ninguna: 631 declaraciones de font-size en
     px absolutos —cero rem, cero em— y ni una variable de tamano.
     Un censo de lo que el navegador REALMENTE pinta (medido con
     tools/_typescale-check.js, no con grep, porque 381 de esas
     declaraciones viven en atributos style="" inline) dio esto:

         31% del texto visible por debajo de 11px
         43% por debajo de 12px

     Y el hallazgo que define la escala: EL DATO NO ERA EL PROBLEMA.
     .hud-table (celdas) y .form-input ya estaban en 14px. Lo chico
     era el CROMO —labels, encabezados, badges, tags, subtitulos—,
     que es justo lo que se necesita para orientarse en la pantalla.

     Estas nueve paginas cargan todas este archivo, asi que :root
     alcanza a todas. Las reglas que viven en el <style> de un modulo
     ganan por orden de documento y no se pueden pisar desde aca —
     pero SI pueden leer estos tokens, y por eso apuntan aca en vez
     de llevar su propio numero.

     PISO DURO: 12px desde el 2026-09-10. Nada de la app baja de ahi.
     Fue 11px hasta esa fecha; subio junto con el piso de 12pt de los
     documentos impresos del EFB, por el mismo motivo — el operador y
     varios pilotos no leian la letra chica. El argumento de altura-x que
     sigue se escribio para justificar 11 contra 9.5 y vale igual para 12:
     lo que mide es cuanto MENOS se lee cada familia de lo que su
     font-size sugiere, no cual es el numero correcto.

     Por que 11 y no los 9.5px que fijamos en NOTAMs/METAR: la altura-x
     medida de las tres familias a 100px es Rajdhani 51, Share Tech Mono
     50, Orbitron 58 (Arial 52). O sea que 9.5px de Share Tech Mono se
     leen como ~9.1px de Arial, mas chico de lo que suena. Orbitron es
     la excepcion al alza en altura, pero es una tipografia DISPLAY
     usada en VERSALES con tracking alto: las versales borran la
     silueta de la palabra y el tracking la desarma en letras sueltas,
     asi que a 9px obliga a deletrear en vez de leer. Se lleva el 13%
     del texto visible de la app.

     Las celdas de tabla NO necesitan excepcion a la baja: ya estan en
     --fs-data. Ver tools/_typescale-check.js para volver a medir. */
  /* --fs-badge queda con el MISMO valor que --fs-label, y los dos nombres
     se conservan a proposito: --fs-badge significa "el piso" y --fs-label
     "la etiqueta". Si el piso vuelve a moverse se cambia una linea y los
     badges van solos. Fusionarlos obligaria a reescribir cada
     var(--fs-badge) de los nueve documentos para no mover un pixel. */
  --fs-badge:  12px;   /* piso: badges, chips, tags, micro-labels HUD */
  --fs-label:  12px;   /* labels de formulario, encabezados de tabla */
  --fs-note:   13px;   /* texto secundario, descripciones, sublineas */
  --fs-data:   14px;   /* EL DATO: celdas, inputs, valores */
  --fs-lead:   15px;   /* entradillas y valores destacados */
  --fs-title:  16px;   /* titulos de panel */

  /* ── TRACKING DE LAS VERSALES CHICAS DEL HUD ───────────────────
     La otra mitad del problema de legibilidad, y la que no se
     arreglaba subiendo el tamano.

     Orbitron es una tipografia DISPLAY y en esta app se usa en
     VERSALES. Las versales ya borran la silueta de la palabra —sin
     ascendentes ni descendentes, todas las letras son un rectangulo
     del mismo alto— asi que lo unico que queda para reconocerla es la
     secuencia de letras. El tracking alto separa esas letras hasta
     que dejan de leerse como una palabra y hay que deletrearlas.
     Estaba entre .08em y .2em; a 11px, .2em son 2.2px de aire entre
     caracteres.

     .06em conserva el aire que las versales SI necesitan —pegadas se
     empastan— sin desarmar la palabra. Se aplica solo a las reglas
     que ya leen --fs-badge / --fs-label: son las etiquetas que se
     leen. Los titulos grandes y el logo NO pasan por aca: a 15px o
     mas el tracking ancho es la identidad visual y no estorba. */
  --ls-hud: 0.06em;
}

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

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-prime);
  font-size: 15px;
  overflow: hidden;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-panel); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-dim); }

/* ============================================================
   STATUS BAR
   ============================================================ */
#status-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--statusbar-h);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 1000;
  font-family: var(--font-mono);
  font-size: 12px;
}

.status-left, .status-right, .status-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-logo {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.1em;
}

.status-label {
  color: #8ab4cc;
  font-size: var(--fs-badge);
  letter-spacing: 0.12em;
}

.status-sep { color: var(--text-dim); }

.status-item { color: var(--text-second); }

.utc-clock {
  color: var(--text-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.status-badge {
  font-size: var(--fs-badge);
  font-family: var(--font-hud);
  font-weight: 600;
  letter-spacing:var(--ls-hud);
  padding: 2px 8px;
  border-radius: 2px;
}
.status-badge.online {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid rgba(34,197,94,0.3);
}

/* ============================================================
   LAYOUT
   ============================================================ */
#app-layout {
  display: flex;
  height: 100vh;
  padding-top: var(--statusbar-h);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-header {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border-dim);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-hex {
  font-size: 26px;
  color: var(--blue);
  line-height: 1;
  filter: drop-shadow(0 0 8px var(--blue));
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo-main {
  font-family: var(--font-hud);
  font-size: 15px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 0.15em;
}

.logo-sub {
  font-family: var(--font-body);
  font-size: var(--fs-badge);
  font-weight: 600;
  color: var(--text-second);
  letter-spacing: 0.2em;
}

.nav-list {
  list-style: none;
  padding: 0.5rem 0;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: #7a9ab8;
  letter-spacing: 0.03em;
  position: relative;
  user-select: none;
}

.nav-item:hover:not(.disabled) {
  background: var(--blue-ghost);
  color: var(--text-prime);
  border-left-color: var(--blue-dim);
}

.nav-item.active {
  background: var(--blue-ghost);
  color: var(--blue);
  border-left-color: var(--blue);
}

.nav-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nav-icon {
  font-size: 13px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.nav-label { flex: 1; }

.nav-tag {
  font-family: var(--font-hud);
  font-size: var(--fs-badge);
  font-weight: 700;
  letter-spacing:var(--ls-hud);
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid var(--border-dim);
}

.sidebar-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-dim);
}

.sidebar-version {
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
#main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 2rem;
  background: var(--bg-base);
  position: relative;
}

.page { display: none; }
.page.active { display: block; }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display: flex;
  flex-wrap: wrap;            /* en telefono los botones bajan, no se cortan */
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.page-title {
  font-family: var(--font-hud);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-prime);
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

.page-subtitle {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.hud-label {
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  color: var(--text-dim);
}

/* ============================================================
   BUTTONS
   ============================================================ */
/* Escaner de manifiestos (Nuevo vuelo) */
.esc-barra { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.esc-fuentes { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.esc-btn { cursor:pointer; }
.esc-previa { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.esc-previa img { max-height:90px; border-radius:6px; border:1px solid var(--border); }
.esc-doc { font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:6px; color:var(--text-second); }
.esc-estado { min-height:1.2em; margin:8px 0; font-size:13px; color:var(--text-second); }
.esc-estado.err { color:var(--red); }
.esc-resultado { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.esc-campo { display:grid; grid-template-columns:auto 120px 1fr; gap:8px; align-items:center; font-size:13px; }
.esc-campo b { color:var(--text-prime); font-family:var(--font-mono, monospace); }
.esc-pax { margin:2px 0 6px 28px; font-size:12px; }
.esc-aviso { font-size:12px; color:var(--amber); }
.esc-acciones { display:flex; gap:8px; flex-wrap:wrap; }
.btn-hud {
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.5rem 1.1rem;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.btn-hud:hover {
  background: #2e86ff;
  box-shadow: 0 0 12px var(--blue-glow);
}

.btn-hud.btn-ghost {
  background: transparent;
  color: var(--text-second);
  border: 1px solid var(--border);
}
.btn-hud.btn-ghost:hover {
  background: var(--bg-card2);
  color: var(--text-prime);
  box-shadow: none;
}

.btn-hud.btn-danger {
  background: var(--red);
}
.btn-hud.btn-danger:hover {
  background: #f56565;
  box-shadow: 0 0 12px rgba(239,68,68,0.3);
}

.btn-hud.btn-sm {
  font-size: var(--fs-badge);
  padding: 0.35rem 0.8rem;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-second);
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-icon:hover { background: var(--bg-card2); color: var(--text-prime); }
.btn-icon.edit:hover { color: var(--blue); border-color: var(--blue); }
.btn-icon.del:hover { color: var(--red); border-color: var(--red); }

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
}

.stat-card[data-color="blue"]::before { background: var(--blue); }
.stat-card[data-color="green"]::before { background: var(--green); }
.stat-card[data-color="amber"]::before { background: var(--amber); }
.stat-card[data-color="red"]::before { background: var(--red); }

.stat-card:hover {
  border-color: var(--border);
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.stat-icon {
  font-size: 22px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.stat-card[data-color="blue"] .stat-icon { color: var(--blue); }
.stat-card[data-color="green"] .stat-icon { color: var(--green); }
.stat-card[data-color="amber"] .stat-icon { color: var(--amber); }
.stat-card[data-color="red"] .stat-icon { color: var(--red); }

.stat-value {
  font-family: var(--font-hud);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-prime);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-second);
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}

/* ============================================================
   MODULE CARDS GRID (3×3)
   ============================================================ */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.module-card {
  position: relative;
  container-type: inline-size;   /* el icono y el titulo se miden contra la tarjeta */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.module-card:hover, .module-card:focus-visible { border-color: var(--blue); background: var(--bg-card2); }
.module-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .module-card:hover { transform: translateY(-2px); } }
.module-art {
  /* sin recuadro: el icono (PNG/WebP transparente) va directo sobre la tarjeta */
  position: relative;
  width: min(38cqw, 104px); aspect-ratio: 1 / 1;
}
.module-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Logo de la empresa sobre el medallon de las presillas (Tripulaciones).
   Posicion medida sobre icons/modulos/tripulaciones.webp. */
.module-logo { position: absolute; width: 13%; height: 13%; left: 54.5%; top: 34.5%; }
.module-text { min-width: 0; }
.module-numero { font-family: var(--font-hud); font-size: var(--fs-note); color: var(--blue); font-weight: 500; }
.module-name {
  font-family: var(--font-body);
  font-size: clamp(12px, 5.6cqw, 15px);
  overflow-wrap: anywhere;
  font-weight: 700;
  color: var(--text-prime);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 2px 24px 3px 0;
}
.module-desc { font-family: var(--font-body); font-size: var(--fs-note); color: var(--text-second); margin-bottom: 8px; }
.module-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.module-chips:empty { display: none; }
.module-link { display: inline-block; margin-top: 6px; font-size: var(--fs-badge); font-weight: 700; color: var(--blue); text-decoration: none; }
.module-link:hover { text-decoration: underline; }
.module-chev { position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; color: var(--text-dim); }

/* ── PANEL DE INICIO ─────────────────────────────────────── */
.eyebrow { font-family: var(--font-body); font-size: var(--fs-badge); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.panel-titulo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.panel-hoy { margin-bottom: 18px; }
.panel-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.panel-tile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 14px 16px; border-radius: 12px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-dim);
  transition: border-color 0.15s;
}
.panel-tile:hover, .panel-tile:focus-visible { border-color: var(--blue); }
.panel-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.panel-tile[data-sev="caution"] { border-color: rgba(251,191,36,0.35); }
.panel-big { font-family: var(--font-hud); font-size: 28px; font-weight: 700; line-height: 1.05; color: var(--text-prime); font-variant-numeric: tabular-nums; }
.panel-big-de { font-size: 18px; color: var(--text-dim); }
.panel-sub { font-size: var(--fs-note); color: var(--text-second); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: var(--fs-badge); font-weight: 700; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; }
.pill svg { width: 12px; height: 12px; }
.p-ok { background: var(--green-dim); color: var(--green); }
.p-caution { background: var(--amber-dim); color: var(--amber); }
.p-warning { background: var(--red-dim); color: var(--red); }
.p-advisory { background: var(--cyan-dim); color: var(--cyan); }
.p-neutral { background: var(--bg-card2); color: var(--text-second); }
.panel-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-bottom: 2rem; }
.panel-main .modules-grid { margin-bottom: 0; }
.panel-atencion { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); }
.atencion-lista { display: flex; flex-direction: column; gap: 8px; }
.atencion-item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; text-align: left;
  padding: 10px; border: none; border-left: 3px solid var(--sev); border-radius: 0 10px 10px 0;
  background: var(--bg-card2); color: var(--text-prime); font: inherit; cursor: pointer;
}
.atencion-item:hover, .atencion-item:focus-visible { background: var(--blue-ghost); }
.atencion-item svg { width: 20px; height: 20px; color: var(--sev); }
.atencion-item b { display: block; font-size: var(--fs-data); font-weight: 700; }
.atencion-item span span { display: block; font-size: var(--fs-note); color: var(--text-second); }
.atencion-item .atencion-donde { color: var(--blue); font-size: var(--fs-badge); font-weight: 700; margin-top: 2px; }
.s-warning { --sev: var(--red); } .s-caution { --sev: var(--amber); } .s-advisory { --sev: var(--cyan); }
.atencion-vacia { display: flex; align-items: center; gap: 8px; padding: 10px; color: var(--green); font-weight: 700; }
.atencion-vacia svg { width: 16px; height: 16px; }
.atencion-mas { align-self: flex-start; background: none; border: none; color: var(--blue); font: inherit; font-weight: 700; cursor: pointer; padding: 2px 0; }

/* ============================================================
   TABLES
   ============================================================ */
.table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 70vh;
  position: relative;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  background: var(--bg-card);
}

/* Generic scroll wrapper for any table not already in .table-container */
.table-scroll-container {
  max-height: 65vh;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}

/* ---- STICKY COLUMNS ----
   A table tagged `.sticky-cols` keeps its first 3 columns pinned while the body
   scrolls horizontally, so the identity columns stay readable on wide tables.
   Position/background/z-index live here; the per-column `left` offsets are
   measured from real column widths and set inline by applyStickyColumns()
   (js/ui.js), which also toggles `.sticky-active` only when the table actually
   overflows — that's what reveals the scroll divider. */
.hud-table.sticky-cols th:nth-child(-n+3),
.hud-table.sticky-cols td:nth-child(-n+3) {
  position: sticky;
  z-index: 5;
  background: var(--bg-card);
}
.hud-table.sticky-cols thead th:nth-child(-n+3) {
  /* corner cells: pinned top (from the sticky-header rule above) AND left,
     so they must sit above both the header row and the sticky body column */
  z-index: 12;
  background: var(--bg-card2);
}
.hud-table.sticky-cols.sticky-active th:nth-child(3),
.hud-table.sticky-cols.sticky-active td:nth-child(3) {
  border-right: 2px solid var(--border-glow);
  box-shadow: 4px 0 8px rgba(0,0,0,0.35);
}

/* Sticky headers — keep column titles visible while the body scrolls.
   th needs an OPAQUE background so rows don't bleed through underneath. */
.data-table thead th,
.hud-table thead th,
.table-scroll-container table thead th,
table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-card2, #161c28);
  box-shadow: inset 0 -1px 0 var(--border), 0 1px 0 var(--border-dim);
}

.hud-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
}

.hud-table thead {
  background: rgba(30,120,255,0.06);
  border-bottom: 1px solid var(--border);
}

.hud-table th {
  padding: 0.65rem 1rem;
  text-align: left;
  font-family: var(--font-hud);
  font-size: var(--fs-label);
  font-weight: 600;
  color: #8fc4e0;
  letter-spacing:var(--ls-hud);
  white-space: nowrap;
}

.hud-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-dim);
  color: var(--text-prime);
  vertical-align: middle;
}

.hud-table tbody tr:last-child td { border-bottom: none; }

.hud-table tbody tr:hover td {
  background: rgba(30,120,255,0.04);
}

.hud-table .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mono);
}

.hud-table .route-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 13px;
}
.route-arrow { color: var(--text-second); }

.empty-row td {
  text-align: center;
  color: var(--text-second);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 2rem;
}

.actions-cell { display: flex; gap: 0.35rem; align-items: center; }

/* ---- STATUS BADGES ---- */
.badge {
  display: inline-block;
  font-family: var(--font-hud);
  font-size: var(--fs-badge);
  font-weight: 700;
  letter-spacing:var(--ls-hud);
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.badge-scheduled  { background: rgba(30,120,255,0.15); color: var(--blue); border: 1px solid rgba(30,120,255,0.3); }
.badge-boarding   { background: rgba(168,85,247,0.15); color: var(--purple); border: 1px solid rgba(168,85,247,0.3); }
.badge-departed   { background: rgba(6,182,212,0.15);  color: var(--cyan); border: 1px solid rgba(6,182,212,0.3); }
.badge-airborne   { background: rgba(34,197,94,0.15);  color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.badge-landed     { background: rgba(255,255,255,0.06); color: var(--text-second); border: 1px solid var(--border-dim); }
.badge-cancelled  { background: rgba(239,68,68,0.15);  color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.badge-delayed    { background: rgba(245,158,11,0.15); color: var(--amber); border: 1px solid rgba(245,158,11,0.3); }

/* ============================================================
   CALENDAR STRIP
   ============================================================ */
.calendar-strip-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.calendar-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  flex: 1;
  scrollbar-width: none;
}
.calendar-strip::-webkit-scrollbar { display: none; }

.cal-day {
  flex-shrink: 0;
  width: 62px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 0.6rem 0.4rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  user-select: none;
}

.cal-day:hover {
  border-color: var(--border);
  background: var(--bg-card2);
}

.cal-day.selected {
  border-color: var(--blue);
  background: var(--blue-ghost);
  box-shadow: 0 0 10px var(--blue-glow);
}

.cal-day.today .cal-num {
  color: var(--blue);
}

.cal-day.has-flights::after {
  content: '';
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  margin: 4px auto 0;
}

.cal-dow {
  font-family: var(--font-hud);
  font-size: var(--fs-badge);
  font-weight: 600;
  letter-spacing:var(--ls-hud);
  color: var(--text-dim);
  margin-bottom: 4px;
}

.cal-num {
  font-family: var(--font-hud);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-prime);
  line-height: 1;
}

.cal-month {
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  color: var(--text-dim);
  margin-top: 2px;
}

.cal-nav {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  color: var(--text-second);
  font-size: 20px;
  width: 32px; height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.cal-nav:hover { background: var(--bg-card2); color: var(--text-prime); }

.cal-selected-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}
.modal-overlay.hidden { display: none; }

.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 680px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--border);
}

.modal.modal-sm { width: 420px; }

.modal-header {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-hud);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-prime);
  letter-spacing: 0.06em;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: var(--text-prime); background: var(--bg-card2); }

.modal-body {
  padding: 1.4rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border-dim);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ============================================================
   FORM
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group.full-width { grid-column: 1 / -1; }

.form-label {
  font-family: var(--font-hud);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing:var(--ls-hud);
  color: #9cc4de;
}

.form-input {
  background: var(--bg-input);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  color: var(--text-prime);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 0.5rem 0.75rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-ghost);
}
.form-input::placeholder { color: #5a7a9a; }

/* ---- DATE INPUT — dark HUD calendar picker ---- */
input[type="date"] {
  color-scheme: dark;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
  cursor: pointer;
  opacity: 0.8;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}
.form-select option { background: var(--bg-panel); }

.form-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-body);
}

/* ---- CONFIRM TEXT ---- */
.confirm-text {
  font-family: var(--font-body);
  font-size: 15px;
  color: #8ab0cc;
  line-height: 1.6;
}
.confirm-text strong { color: var(--text-prime); font-family: var(--font-mono); }

/* ============================================================
   GRID SCAN LINE OVERLAY (cosmetic)
   ============================================================ */
#main-content::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-main { grid-template-columns: minmax(0, 1fr); }
  .stat-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  #sidebar { display: none; }
  .modules-grid { grid-template-columns: 1fr; }
  .stat-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main-content { padding: 1rem; }
}

/* ============================================================
   TABS
   ============================================================ */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.tab-btn {
  font-family: var(--font-hud);
  font-size: var(--fs-badge);
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.7rem 1.4rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text-second); }
.tab-btn.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   ADDITIONAL BADGES (aircraft estado, pilot status)
   ============================================================ */
.badge-serviceable { background: rgba(34,197,94,0.15);  color: var(--green);  border: 1px solid rgba(34,197,94,0.3); }
.badge-maintenance { background: rgba(245,158,11,0.15); color: var(--amber);  border: 1px solid rgba(245,158,11,0.3); }
.badge-aog         { background: rgba(239,68,68,0.15);  color: var(--red);    border: 1px solid rgba(239,68,68,0.3); }
.badge-available   { background: rgba(34,197,94,0.15);  color: var(--green);  border: 1px solid rgba(34,197,94,0.3); }
.badge-duty-rest   { background: rgba(245,158,11,0.15); color: var(--amber);  border: 1px solid rgba(245,158,11,0.3); }
.badge-leave       { background: rgba(30,120,255,0.15); color: var(--blue);   border: 1px solid rgba(30,120,255,0.3); }

/* ---- historial estado badges ---- */
.badge-completado  { background: rgba(34,197,94,0.15);  color: var(--green);  border: 1px solid rgba(34,197,94,0.3); }
.badge-cancelado   { background: rgba(239,68,68,0.15);  color: var(--red);    border: 1px solid rgba(239,68,68,0.3); }
.badge-desviado    { background: rgba(245,158,11,0.15); color: var(--amber);  border: 1px solid rgba(245,158,11,0.3); }

/* ---- view button ---- */
.btn-icon.view:hover { color: var(--cyan); border-color: var(--cyan); }

/* ============================================================
   HISTORIAL — filter bar / summary bar
   ============================================================ */
.hist-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.hist-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  grid-column: span 1;
}

.hist-summary-bar {
  display: flex;
  gap: 1.75rem;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-second);
  margin-bottom: 0.85rem;
  padding: 0 0.1rem;
}

.hist-summary-bar strong { color: var(--text-mono); font-weight: 700; }

@media print {
  /* EL OVERLAY DE SCANLINES TAPABA LA HOJA ENTERA. `#main-content::before` es
     `position:fixed; inset:0; z-index:9999` con un repeating-linear-gradient,
     y en el PDF se pinta DESPUES de todo el texto. Con "graficos de fondo"
     ACTIVADO sale como patron translucido y no molesta; con la casilla
     APAGADA —el default de Chrome— el navegador descarta el degradado y
     rellena el rectangulo OPACO a pagina completa: las dos hojas salian en
     blanco con el texto debajo, dibujado y tapado.

     Va aca y no en cada modulo: el overlay lo define este archivo y lo cargan
     los 10 documentos. Y no lo alcanzaba ninguna regla de tinta —ni
     `#main-content{background:transparent}` ni `#main-content *`— porque un
     pseudo-elemento no es el elemento ni es descendiente suyo. Por eso
     tampoco lo veia el barrido del DOM: querySelectorAll no devuelve
     pseudo-elementos. */
  #main-content::before, #main-content::after { content: none !important; display: none !important; }

  #status-bar, #sidebar, .tab-bar, .page-actions, .section-header .btn-hud,
  #btn-new-flight, .hist-filters, .hist-filter-actions, #hist-export-pdf,
  .actions-cell { display: none !important; }
  body, html { overflow: visible !important; }
  #app-layout { padding-top: 0 !important; }
  #main-content { padding: 0.4in !important; overflow: visible !important; }
  .tab-panel { display: none !important; }
  .tab-panel.active { display: block !important; }
  .table-container,
  .table-scroll-container { border: none; max-height: none !important; overflow: visible !important; }
  /* don't pin headers when printing — let full tables flow across pages */
  .data-table thead th, .hud-table thead th, table thead th { position: static; box-shadow: none; }
  /* release sticky columns too (JS sets inline left/position — override it) */
  .hud-table.sticky-cols th, .hud-table.sticky-cols td {
    position: static !important; left: auto !important;
    box-shadow: none !important; border-right: none !important;
  }
}

/* ============================================================
   FORM HINTS
   ============================================================ */
.form-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  color: var(--text-dim);
  margin-top: 3px;
  min-height: 16px;
  display: block;
}

/* ============================================================
   MODAL SIZE VARIANTS
   ============================================================ */
.modal-lg { width: 720px; }

/* ============================================================
   PAX SECTION (in flight modal)
   ============================================================ */
.pax-section {
  border-top: 1px solid var(--border-dim);
  margin-top: 1rem;
  padding-top: 1rem;
}

.pax-count-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pax-count-input {
  width: 80px !important;
  flex-shrink: 0;
}

/* Tope de pasajeros de la lista; en rojo si un vuelo cargado lo supera. */
.pax-max { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.pax-max.pax-max-excede { color: var(--red); font-weight: 700; }

.pax-weight-total {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  margin-left: auto;
}

/* compact table inside modal for passenger rows */
.pax-table { margin-top: 0; }
.pax-table td { padding: 0.3rem 0.5rem; }
.pax-table thead th { padding: 0.4rem 0.5rem; }
.pax-table .form-input {
  padding: 0.3rem 0.5rem;
  font-size: 13px;
  height: 30px;
}

/* ============================================================
   FLIGHT DETAIL MODAL
   ============================================================ */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.detail-label {
  font-family: var(--font-hud);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing:var(--ls-hud);
  color: var(--text-dim);
}

.detail-value {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-prime);
}

.detail-value.mono {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-mono);
}

.detail-remarks {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-second);
  margin-top: 0.3rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-card2);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  line-height: 1.5;
}

/* ============================================================
   EXPIRY BADGES & PILOT TABLE
   ============================================================ */
.badge-expired  { background: rgba(239,68,68,0.18);  color: var(--red);   border: 1px solid rgba(239,68,68,0.4); }
.badge-expiring { background: rgba(245,158,11,0.18); color: var(--amber); border: 1px solid rgba(245,158,11,0.4); }

.expiry-ok {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

/* subtle row tints for pilots with document alerts */
.pilot-row-alert-red   td { background: rgba(239,68,68,0.04); }
.pilot-row-alert-amber td { background: rgba(245,158,11,0.04); }

/* habilitaciones badges cell in table */
.habs-badges-cell { max-width: 260px; }

/* ============================================================
   HABILITACIONES — modal dynamic list
   ============================================================ */
.habs-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.habs-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 8px;
}

.hab-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hab-row .hab-tipo  { flex: 1; min-width: 0; }
.hab-row .hab-fecha { width: 148px; flex-shrink: 0; }
.hab-row .hab-remove { flex-shrink: 0; }

/* ============================================================
   HABILITACIÓN BADGES (table + detail modal)
   ============================================================ */
.hab-badge {
  display: inline-block;
  font-family: var(--font-hud);
  font-size: var(--fs-badge);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
  margin: 2px 3px 2px 0;
  cursor: default;
}

.hab-badge-valid    { background: rgba(34,197,94,0.15);  color: var(--green);  border: 1px solid rgba(34,197,94,0.35); }
.hab-badge-expiring { background: rgba(245,158,11,0.15); color: var(--amber);  border: 1px solid rgba(245,158,11,0.35); }
.hab-badge-expired  { background: rgba(239,68,68,0.15);  color: var(--red);    border: 1px solid rgba(239,68,68,0.35); }

/* pilot habs in flight detail modal */
.pilot-habs-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ============================================================
   I18N — LANGUAGE TOGGLE
   ============================================================ */
/* .icon-btn had no definition; these are the button's real styles
   (the inline style attribute only sets the font metrics). */
#lang-toggle {
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  font-weight: 700;
  letter-spacing: 1px;
  width: 40px;
  padding: 2px 0;
  background: rgba(30,120,255,0.12);
  border: 1px solid rgba(30,120,255,0.35);
  border-radius: 3px;
  color: var(--blue);
  cursor: pointer;
  transition: all 0.15s;
}
#lang-toggle:hover {
  background: rgba(30,120,255,0.25);
  border-color: var(--blue);
}

/* Tab labels are written uppercase in the markup; translated strings are
   Title Case. Uppercasing in CSS keeps tabs looking identical in both
   languages (a no-op for the existing Spanish text, which is already caps). */
.tab-btn { text-transform: uppercase; }

/* Badges estáticos etiquetados con data-i18n: la clave canónica está en caja
   de título ("Pendiente") pero el badge se muestra en mayúsculas. Acotado a
   [data-i18n] a propósito — los badges generados por JS reciben su texto de
   los stores y no deben forzarse a mayúsculas. */
.badge[data-i18n] { text-transform: uppercase; }

/* ── Fotos de reportes (js/photo-ui.js) ─────────────────────────────
   Viven acá y no en cada módulo porque los monta PhotoUI, que corre en
   sms.html y en index.html. Mismas medidas que .photo-thumb de
   maintenance.html, para que las dos tablas se vean igual. */
.ph-strip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ph-thumb-wrap { position: relative; display: inline-block; }
.ph-thumb { width: 48px; height: 48px; border-radius: 3px; object-fit: cover;
            border: 1px solid var(--border-dim); cursor: pointer; display: block;
            transition: border-color .15s; }
.ph-thumb:hover { border-color: var(--blue); }
.ph-thumb-sm { width: 30px; height: 30px; }
/* El blob ya no está (gc, base borrada a mano): se muestra el hueco. */
.ph-thumb-missing { display: flex; align-items: center; justify-content: center;
                    color: var(--text-dim); font-family: var(--font-mono);
                    background: var(--bg-card2); cursor: default; }
/* Ficha de PDF: mismo tamaño y mismo borde que una miniatura de imagen, para
   que la tira se lea como una sola fila de adjuntos y no como dos cosas. */
.ph-thumb-pdf { display: flex; align-items: center; justify-content: center;
                background: var(--bg-card2); }
.ph-pdf-ic { font-family: var(--font-mono); font-size: var(--fs-badge); font-weight: 700;
             letter-spacing: .06em; color: var(--red); }
/* Cada formato con su color: la ficha se lee de un vistazo sin abrirla. */
.ph-thumb-docx .ph-pdf-ic, .ph-thumb-doc .ph-pdf-ic { color: var(--blue); }
/* En la ficha chica (30px) "DOCX" a 12px con el espaciado de arriba mide
   ~31.7px y derrama; el piso de 12px no deja achicar la letra, asi que se
   ajusta el espaciado. En 0 mide 28.8px: entra en los 30 de la caja pero no
   en los 28 que dejan los bordes. -.03em lo deja en ~27.4px, dentro. */
.ph-thumb-sm .ph-pdf-ic, .ph-thumb-pdf.ph-thumb-sm .ph-pdf-ic { font-size: var(--fs-badge); letter-spacing: -.03em; }

/* Lista de documentos (vista de un manual): ficha + nombre + tamaño. */
.ph-lista { display: flex; flex-direction: column; gap: 4px; }
.ph-fila { display: flex; align-items: center; gap: .7rem; padding: 4px 6px; cursor: pointer;
           border: 1px solid var(--border-dim); border-radius: 4px; min-width: 0; }
.ph-fila:hover { border-color: var(--blue); }
.ph-fila .ph-thumb { width: 36px; height: 36px; flex: none; }
.ph-fila-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                  font-family: var(--font-mono); color: var(--text-prime); }
.ph-fila-tam { flex: none; font-family: var(--font-mono); font-size: var(--fs-badge); color: var(--text-dim); }
/* Nombre bajo la ficha en el selector con documentos. */
.ph-cap { display: block; max-width: 108px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-badge); color: var(--text-dim); }

.ph-del { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px;
          border-radius: 50%; background: var(--red); border: none; color: #fff;
          cursor: pointer; font-size: var(--fs-badge); line-height: 1; padding: 0;
          display: flex; align-items: center; justify-content: center; }
.ph-actions { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.ph-count, .ph-more { font-family: var(--font-mono); font-size: var(--fs-badge); color: var(--text-dim); }

/* ── Documentos archivados del vuelo (js/document-ui.js) ────────────
   Mismo criterio que el bloque de arriba: viven acá porque los monta
   DocumentUI, que corre en el modal de detalle y en el cierre de vuelo.

   Es una TIRA, no una tabla. El cierre ya es la ruta más entangled de la
   app y una tabla interactiva ahí adentro la enreda más; acá cada
   documento es un botón que solo abre. Nada de esto se escribe ni entra
   en _submit(). */
.fc-docs-t { font-family: var(--font-hud); font-size: var(--fs-badge); letter-spacing: .1em;
             color: var(--text-dim); margin: .35rem 0 .4rem; }
.fc-docs-l { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-doc { display: inline-flex; align-items: center; gap: .45rem;
          background: var(--bg-card2); border: 1px solid var(--border-dim);
          border-radius: 4px; padding: 3px 8px; cursor: pointer;
          font-family: inherit; transition: border-color .15s; }
.fc-doc:hover { border-color: var(--blue); }
.fc-doc-n { font-size: 12px; color: var(--text-prime); }
.fc-doc-s { font-family: var(--font-mono); font-size: var(--fs-badge); color: var(--text-dim); }
.fc-doc-r { font-family: var(--font-mono); font-size: var(--fs-badge); color: var(--amber); }
.fc-doc-v { font-size: var(--fs-badge); color: var(--text-dim); }
/* En modo de solo lectura el cierre deshabilita TODO con el.disabled, y
   estos botones caerían con el resto. No pueden: son la única forma de
   ver la evidencia de un cierre ya guardado, que es justo cuando más se
   la mira. _applyReadOnly() los saltea; esta regla es la contraparte
   visual para que tampoco se vean apagados. */
.fc-doc[disabled] { opacity: 1; cursor: pointer; }

/* ============================================================
   AVISOS DE LIMITE FTL  (fase 5)
   ============================================================
   Misma forma que los avisos en linea del cierre (fc-h-warn,
   fc-fdp-warn, fc-cyc-warn), que estan inline en index.html: mono
   12px, fondo al 6%, barra de 2px a la izquierda. Aca es una clase
   porque la usan DOS documentos —index.html y modules/crew.html—
   y los dos ya cargan esta hoja.

   Ambar = cerca del limite (avisa). Rojo = lo excede (bloquea). */
.ftl-warn {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  padding: .4rem .65rem;
  border-radius: 0 3px 3px 0;
  margin-top: .35rem;
  color: var(--amber);
  background: rgba(245, 158, 11, .06);
  border-left: 2px solid var(--amber);
}
.ftl-warn.excede {
  color: var(--red);
  background: rgba(239, 68, 68, .06);
  border-left-color: var(--red);
}

/* Tercer estado: el control NO se pudo evaluar.
   No comparte color con .excede a proposito — "no se pudo verificar" y
   "excede el limite" son cosas distintas, y colapsarlas es el mismo error
   que juntar "no se pudo consultar" con "sin NOTAMs vigentes". Va en el
   azul de la app, el mismo que usan las notas informativas, pero con el
   texto en peso fuerte porque exige accion de quien despliega. */
.ftl-warn.indisponible {
  color: var(--blue);
  background: rgba(30, 120, 255, .07);
  border-left-color: var(--blue);
  font-weight: 600;
}

/* ── Aviso de respaldo (Dashboard, js/backup.js) ─────────────────────────
   No bloquea: informa y ofrece exportar ahi mismo. Ambar y no rojo — nada
   se perdio todavia; es un riesgo, no un error. */
.respaldo-aviso { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  margin:0 0 1.25rem; padding:.75rem 1rem; border-radius:6px;
  background:var(--amber-dim); border:1px solid var(--amber);
  font-family:var(--font-body); font-size:var(--fs-data); color:var(--text-prime); }
.respaldo-aviso[hidden] { display:none; }
.respaldo-aviso-tx { flex:1 1 20rem; }

/* ── Franja de rama de prueba (arranque de js/store-global.js) ───────────
   #app-layout mide 100vh justo: sin esto la franja, fija abajo, tapa el pie
   del menu lateral, que es donde se muestra la version. */
body.con-franja { padding-bottom:28px; }
body.con-franja #app-layout { height:calc(100vh - 28px); }
/* La franja y el aviso de error son para la pantalla: en papel la franja
   salia como texto blanco al pie de cada hoja (_print-dom-check). Van con
   !important porque sus estilos son en linea. */
@media print {
  #kaek-franja, .kaek-error, #kaek-nueva { display:none !important; }
  body.con-franja { padding-bottom:0 !important; }
}

/* ── Rastreador en el cierre de vuelo (flight-closure.js) ───────────────
   El recuadro de Spidertracks y la marca de campo SUGERIDO: borde punteado
   hasta que el piloto lo toca, mismo lenguaje que la lectura por IA de
   Documentos. */
.fc-rastreo { border:1px solid var(--border-dim); border-left:3px solid var(--blue); border-radius:4px;
  padding:.6rem .8rem; display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; }
.fc-rastreo[hidden] { display:none; }
.fc-rastreo-t { font-family:var(--font-hud); font-size:var(--fs-badge); font-weight:700; letter-spacing:.06em; color:var(--blue); }
.fc-rastreo-d { font-family:var(--font-mono); font-size:var(--fs-data); color:var(--text-prime); }
.fc-rastreo-n { font-family:var(--font-body); font-size:var(--fs-note); color:var(--text-dim); }
.fc-sug { border-style:dashed !important; border-color:#a855f7 !important; }

/* ── Menu en pantalla angosta (arranque de js/store-global.js) ──────────
   Por debajo de 768 px el menu lateral se oculta; el boton ☰ de la barra
   superior lo abre superpuesto. Sin JS no aparece el boton: el menu sigue
   oculto como antes. */
.menu-movil { display:none; background:none; border:1px solid var(--border); color:var(--text-prime);
  border-radius:3px; font-size:var(--fs-title); line-height:1; padding:2px 8px; margin-right:.6rem; cursor:pointer; }
#menu-fondo { display:none; }
@media (max-width: 768px) {
  .menu-movil { display:inline-block; }
  body.menu-abierto #sidebar { display:flex; position:fixed; top:var(--statusbar-h); left:0; bottom:0;
    width:260px; min-width:260px; z-index:3000; box-shadow:4px 0 24px rgba(0,0,0,.55); }
  body.menu-abierto #menu-fondo { display:block; position:fixed; left:0; right:0; bottom:0; top:var(--statusbar-h);
    background:rgba(0,0,0,.5); z-index:2999; }
}
@media print { .menu-movil, #menu-fondo { display:none !important; } }

/* Barra superior en teléfono: queda lo que se usa (☰, logo, hora UTC, idioma);
   el rótulo, la fecha y los indicadores no entran en 375 px y se encimaban. */
@media (max-width: 600px) {
  #status-bar { padding: 0 .6rem; }
  .status-left .status-sep, .status-label,
  #sb-date, .status-center .status-sep,
  .status-right .status-badge, .status-right .status-item, .status-right .status-sep { display: none; }
  .status-left, .status-right, .status-center { gap: .4rem; min-width: 0; white-space: nowrap; }
}
/* Con el nombre debajo, la ficha queda más angosta que su contenedor: la ✕
   se ancla a la esquina de la ficha (48px), no a la del nombre. */
.ph-thumb-wrap:has(.ph-cap) .ph-del { right: auto; left: 36px; }

/* Rol de prueba (KAEK.roles): selector en el pie del menu */
.sidebar-rol { display:flex; flex-direction:column; gap:3px; font-size:var(--fs-badge); color:var(--text-dim); margin-bottom:8px; }
.sidebar-rol select { font-size:var(--fs-badge); padding:3px 4px; width:100%; }

/* Sesion (KAEK.sesion) en el pie del menu y el aviso de "Entrar" */
.sidebar-sesion { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; font-size:var(--fs-badge); }
.sidebar-sesion .ses-quien { color:var(--text-prime); font-weight:600; }
.sidebar-sesion .ses-org { color:var(--text-dim); }
/* La puerta: sin sesion es lo unico que se ve (KAEK.sesion.puerta). */
#pantalla-entrar { display:none; }
html.sin-sesion body { overflow:hidden; }
html.sin-sesion body > *:not(#pantalla-entrar):not(.kaek-error):not(#kaek-franja):not(#kaek-nueva) { visibility:hidden; }
/* Centrado con margin:auto en la caja y no con align-items:center: si la
   ventana es baja (app instalada en horizontal con el teclado abierto), el
   centrado de flex cortaba la parte de arriba —correo y "Enviar enlace"—
   sin poder desplazarse hasta ella. */
html.sin-sesion #pantalla-entrar { display:flex; position:fixed; inset:0; z-index:10000; align-items:flex-start; justify-content:flex-start;
  padding:16px; background:var(--bg-base, #070b14); overflow:auto; visibility:visible; }
.ent-caja { position:relative; width:min(380px,100%); background:var(--bg-panel); border:1px solid var(--border); border-radius:10px;
  padding:28px 24px 18px; box-shadow:0 24px 64px rgba(0,0,0,.5); }
.ent-logo { display:block; height:44px; margin:0 auto 12px; }
.ent-titulo { text-align:center; font-size:20px; margin:0 0 .5rem; color:var(--text-prime); }
.ent-lang { position:absolute; top:10px; right:10px; }
.ent-boton { width:100%; justify-content:center; }
html.sin-sesion #pantalla-entrar .ent-caja { margin:auto; }
.ent-otro { display:block; margin:.6rem auto 0; background:none; border:none; color:var(--blue); font-size:13px; text-decoration:underline; cursor:pointer; }
.ent-pie { color:var(--text-dim); font-size:12px; margin:1rem 0 .25rem; }
.ent-version { color:var(--text-dim); font-size:11px; text-align:center; font-family:monospace; }
.ent-nota { color:var(--text-second); font-size:13px; margin:0 0 .75rem; }
.ent-estado { margin-top:.75rem; font-size:13px; color:var(--text-second); min-height:1.2em; }
.ent-estado.err { color:var(--red); }

/* ── PANEL DE INICIO A PANTALLA COMPLETA (2026-10-16) ─────────────────
   En computador y iPad apaisado el panel entra ENTERO en la ventana, sin
   scroll: la pagina mide lo que mide #main-content y los modulos reparten
   el alto que queda en tres filas iguales; el icono toma el alto de su
   tarjeta. "Requiere atencion" se desplaza por dentro si hay muchas.
   Desde 1101px de ancho (MacBook, iPad apaisado 1180+). En pantallas bajas
   o angostas (telefono, iPad vertical) vuelve el scroll
   normal: apretar todo ahi lo haria ilegible. */
@media (min-width: 1101px) and (min-height: 600px) {
  #main-content:has(#page-dashboard.active) { overflow: hidden; padding-top: 1rem; padding-bottom: 1rem; }
  #page-dashboard.active { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  #page-dashboard .page-header { margin-bottom: .75rem; padding-bottom: .6rem; flex: none; }
  #page-dashboard .respaldo-aviso { margin-bottom: .75rem; padding: .45rem .9rem; flex: none; }
  #page-dashboard .panel-hoy { margin-bottom: .75rem; flex: none; }
  #page-dashboard .panel-titulo { margin-bottom: 6px; }
  #page-dashboard .panel-tile { padding: 10px 14px; gap: 4px; }
  #page-dashboard .panel-big { font-size: 24px; }
  #page-dashboard .panel-main { flex: 1; min-height: 0; margin-bottom: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  #page-dashboard .panel-main > section { display: flex; flex-direction: column; min-height: 0; }
  #page-dashboard .modules-grid { flex: 1; min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; }
  #page-dashboard .module-card { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 10px; gap: 12px; min-height: 0; overflow: hidden; }
  #page-dashboard .module-art { width: auto; height: 100%; max-height: 112px; min-height: 48px; aspect-ratio: 1 / 1; }
  #page-dashboard .module-desc { margin-bottom: 6px; }
  #page-dashboard .panel-atencion { height: 100%; min-height: 0; overflow: hidden; }
  #page-dashboard .atencion-lista { flex: 1; min-height: 0; overflow-y: auto; }
}
/* Cada tarjeta se acomoda a SU alto (container queries), no a la ventana:
   si no entra, primero se va la descripcion (el titulo y el icono ya la
   dicen) y despues los chips quedan en una sola linea. Solo en el modo de
   pantalla completa, que es donde la tarjeta tiene alto fijo. */
@media (min-width: 1101px) and (min-height: 600px) {
  #page-dashboard .module-card { container-type: size; gap: 10px; }
  /* el icono mide lo que deje la tarjeta: a lo sumo 30% del ancho, el alto
     util (100cqh menos el padding) y 112px */
  #page-dashboard .module-art { height: auto; width: min(38cqw, calc(100cqh - 20px), 120px); min-height: 0; }
  #page-dashboard .module-name { letter-spacing: 0.03em; margin-right: 18px; }
}
/* iPad apaisado y portatiles chicos: la columna de atencion cede ancho. */
@media (min-width: 1101px) and (max-width: 1400px) {
  #page-dashboard .panel-main { grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; }
}
@container (max-height: 168px) {
  .module-desc { display: none; }
  .module-name { margin-bottom: 6px; }
}
@container (max-height: 122px) {
  .module-chips { flex-wrap: nowrap; overflow: hidden; }
  .module-name { font-size: var(--fs-data); }
}

/* ── METAR de la base en "Hoy" ───────────────────────────────────────── */
.metar-crudo { font-family: var(--font-mono); font-size: var(--fs-note); color: var(--text-prime); line-height: 1.35; overflow-wrap: anywhere; }
.metar-base { font: inherit; color: var(--blue); background: none; border: none; padding: 0; cursor: pointer; letter-spacing: inherit; text-decoration: underline dotted; }
.metar-base-input { width: 5.5ch; font: inherit; text-transform: uppercase; letter-spacing: inherit; padding: 0 4px; background: var(--bg-input); color: var(--text-prime); border: 1px solid var(--blue); border-radius: 4px; }
.atencion-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }

/* ── El panel de inicio va sin menu lateral (2026-10-16) ─────────────────
   Los modulos ya estan en las tarjetas; el menu vuelve en cualquier otra
   pagina. La sesion, "Ver como" y la version quedan en el boton de usuario
   de la cabecera del panel (index.html los mueve ahi). */
body:has(#page-dashboard.active) #sidebar,
body:has(#page-dashboard.active) #menu-movil,
body:has(#page-dashboard.active) #menu-fondo { display: none !important; }
.panel-usuario { position: relative; }
.panel-usuario-btn {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: var(--bg-card2); color: var(--text-prime); border: 1px solid var(--border);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-data); letter-spacing: .04em;
}
.panel-usuario-btn:hover, .panel-usuario-btn[aria-expanded="true"] { border-color: var(--blue); }
.panel-usuario-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 260px;
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.panel-usuario-pop[hidden] { display: none; }
.panel-usuario-pop .sidebar-sesion, .panel-usuario-pop .sidebar-rol { margin-bottom: 0; }
.panel-usuario-pop .sidebar-version { font-family: var(--font-mono); font-size: var(--fs-badge); color: var(--text-dim); }
.metar-gps { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; vertical-align: middle; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; }
.metar-gps svg { width: 14px; height: 14px; }
.metar-gps[aria-pressed="true"] { color: var(--blue); border-color: var(--blue); background: var(--blue-ghost); }

/* ── Cabecera de cada modulo con su icono (mismo estilo que el panel) ─── */
.modulo-titulo { display: flex; align-items: center; gap: 16px; min-width: 0; }
.modulo-icono { width: 72px; height: 72px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
#page-flights .module-num { font-family: var(--font-hud); font-size: var(--fs-badge); font-weight: 700; color: var(--blue); letter-spacing: var(--ls-hud); margin-bottom: .2rem; }
@media (max-width: 768px) { .modulo-icono { width: 52px; height: 52px; } .modulo-titulo { gap: 12px; } }