/* =========================================================
   SISTEMA DE TOKENS Y VARIABLES DE COLOR (MODO OSCURO)
   ========================================================= */
:root {
  --bg: #0b0f14;
  --panel: #141b24;
  --panel-card: #1a2431;
  --panel-border: #222f3e;
  --card-inner-bg: #080b0e;
  
  --amber: #e8b64c;
  --green: #40c057;
  --green-bg: rgba(64, 192, 87, 0.15);
  --red: #e03131;
  --red-bg: rgba(224, 49, 49, 0.18);
  --blue: #339af0;
  
  --text: #f1f3f5;
  --text-dim: #BFC9D1;
  --text-subtle: #9fb0c3;
  --bottom-nav-bg: #080b0e;
  
  /* Estilos dinámicos de tarjetas */
  --main-flow-card-bg: linear-gradient(180deg, #141f2c, #0d1520);
  --step-row-bg: #080b0e;
  --callout-bg: rgba(51, 154, 240, 0.08);
  --briefing-bg: rgba(255, 159, 67, 0.15);
  --green-flow-bg: #081a0e;
  
  --readout-bg: #0e141b;
  --readout-border: #33455a;
  --readout-val-color: #74c69d;
  
  --input-bg: #0e141b;
  --input-border: #33455a;
  
  --tab-inactive-bg: #2a3847;
  --tab-inactive-color: #9fb0c3;
  
  --stage-nav-bg: #080b0e;
  --stage-nav-color: #E63946;
  --stage-nav-border: #E63946;

  --bottom-nav-height: 68px;
}

/* =========================================================
   TOKENS PARA MODO DÍA (ALTO CONTRASTE VFR)
   ========================================================= */
body.light-theme {
  --bg: #e2e8f0;
  --panel: #ffffff;
  --panel-card: #ffffff;
  --panel-border: #cbd5e1;
  --card-inner-bg: #f8fafc;
  
  --amber: #c2410c;
  --green: #15803d;
  --green-bg: rgba(21, 128, 61, 0.12);
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.12);
  --blue: #0284c7;
  
  --text: #0f172a;
  --text-dim: #475569;
  --text-subtle: #64748b;
  --bottom-nav-bg: #ffffff;
  
  --main-flow-card-bg: #ffffff;
  --step-row-bg: #f1f5f9;
  --callout-bg: #e0f2fe;
  --briefing-bg: #ffedd5;
  --green-flow-bg: #f0fdf4;
  
  --readout-bg: #f0fdf4;
  --readout-border: #cbd5e1;
  --readout-val-color: #15803d;
  
  --input-bg: #f8fafc;
  --input-border: #cbd5e1;
  
  --tab-inactive-bg: #ffffff;
  --tab-inactive-color: #475569;
  
  --stage-nav-bg: #FFE3E3;
  --stage-nav-color: #dc2626;
  --stage-nav-border: #dc2626;
}

/* Reset global táctil */
* { 
  box-sizing: border-box; 
  -webkit-tap-highlight-color: transparent; 
  user-select: none; 
  touch-action: manipulation; 
}

html, body {
  margin: 0; padding: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
  height: 100dvh; width: 100vw;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: fixed;
}

/* =========================================================
   HEADER Y BARRA SUPERIOR
   ========================================================= */
header.top-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px 12px;
  display: flex; 
  flex-direction: column; 
  gap: 6px;
  flex-shrink: 0;
}
.header-row { display: flex; justify-content: space-between; align-items: center; }

.zulu-clock {
  font-family: 'Roboto Mono', monospace; font-size: 16px; font-weight: 700;
  background: var(--panel); padding: 4px 10px; border-radius: 4px; border: 1px solid var(--panel-border);
  color: var(--text);
}
.zulu-clock .unit { color: var(--amber); font-size: 10px; }

.freq-strip, .v-speeds-strip { display: flex; gap: 4px; overflow-x: auto; }
.freq-pill {
  background: var(--card-inner-bg); border: 1px solid var(--panel-border);
  padding: 4px 8px; border-radius: 4px; font-family: 'Roboto Mono', monospace;
  font-size: 13px; display: flex; gap: 4px; align-items: center; white-space: nowrap;
  color: var(--text);
}
.freq-pill .label { color: var(--text-dim); font-size: 12px; }
.freq-pill .value { color: var(--blue); font-weight: 700; }
.freq-pill.vor .value { color: var(--green); }

/* Estado de alerta al cumplir los 30 minutos */
.freq-pill.tank-alert {
  background: var(--red-bg) !important;
  border-color: var(--red) !important;
  animation: pulse-red 1s infinite alternate;
}
.freq-pill.tank-alert .label,
.freq-pill.tank-alert .value {
  color: var(--red) !important;
  font-weight: 900;
}

@keyframes pulse-red {
  from { opacity: 1; }
  to { opacity: 0.6; }
}

.v-tag {
  background: var(--bg); border: 1px solid var(--panel-border);
  padding: 3px 8px; border-radius: 4px; font-family: 'Roboto Mono', monospace;
  font-size: 13px; display: flex; gap: 3px; color: var(--text);
}
.v-tag .lbl { color: var(--text-dim); }
.v-tag .val { color: var(--amber); font-weight: 700; }

/* =========================================================
   CONTENEDORES Y NAVEGACIÓN
   ========================================================= */
.view-container { flex: 1; display: none; padding: 8px; flex-direction: column; gap: 8px; overflow-y: auto; }
.view-container.active { display: flex; }

nav.bottom-nav {
  height: 76px;
  background-color: var(--bottom-nav-bg);
  border-top: 2px solid var(--panel-border);
  display: flex; 
  justify-content: space-around; 
  align-items: center;
  padding: 0 6px calc(env(safe-area-inset-bottom) + 4px) 6px;
  flex-shrink: 0;
}

.nav-item { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  gap: 3px; 
  color: var(--text-dim); 
  width: 62px; 
  height: 58px; 
  border-radius: 10px; 
  border: 1px solid transparent; 
  cursor: pointer; 
}

.nav-item.active { 
  background: var(--panel); 
  border-color: var(--amber); 
  color: var(--amber); 
}

.nav-item svg { width: 24px; height: 24px; fill: currentColor; }

.nav-item span { 
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; 
  text-align: center; letter-spacing: 0.3px;
}

.nav-item.emerg { 
  color: var(--red); 
  background: var(--red-bg); 
  border-color: var(--red); 
}

/* =========================================================
   COMPONENTES REUSABLES DE INTERFAZ (TARJETAS Y BOTONES)
   ========================================================= */
.card {
  background: var(--panel-card);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  gap: 6px;
  flex-shrink: 0;
}
.card-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--panel-border); padding-bottom: 6px; margin-bottom: 2px;
}
.card-header h3 {
  margin: 0; font-family: 'Rajdhani', sans-serif; font-size: 14px;
  color: var(--amber); text-transform: uppercase; letter-spacing: 0.5px;
}
.card-header .badge {
  font-size: 11px; background: var(--panel-border); padding: 2px 6px;
  border-radius: 3px; color: var(--text-dim); font-weight: 700;
}

.card-dark-box {
  background: var(--card-inner-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 8px;
}

/* CONTENEDOR FLEXIBLE DE READOUTS E6B EN EL DASHBOARD */
.readout-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.readout-box {
  background: var(--card-inner-bg);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
}

.readout-box .lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.readout-box .val {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--readout-val-color);
  line-height: 1.2;
}

/* CONTENEDOR DE TRANSCRIPCIÓN METAR ABAJO DE READOUTS */
.metar-display-box {
  background: var(--card-inner-bg);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  padding: 5px 10px;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.metar-text {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atis-display-box {
  background: var(--card-inner-bg);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  padding: 5px 10px;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.atis-text {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.btn-metar-reset {
  background: var(--red-bg);
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-metar-reset:active {
  transform: scale(0.95);
}

/* Ajuste responsive para pantallas pequeñas o móviles en vertical */
@media (max-width: 480px) {
  .readout-row {
    grid-template-columns: 1fr;
  }
}

.btn-action { 
  background: rgba(51, 154, 240, 0.15); 
  border: 1px solid var(--blue); 
  color: var(--blue); 
  font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-weight: 700; 
}
.btn-reset { 
  background: var(--red-bg); 
  border: 1px solid var(--red); 
  color: var(--red); 
  font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-weight: 700; 
}
.toggle-btn { 
  background: var(--card-inner-bg); 
  border: 1px solid var(--panel-border); 
  color: var(--blue); 
  font-size: 12px; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-weight: 700; 
}

.touch-pill {
  background: var(--card-inner-bg); border: 1px solid var(--panel-border); color: var(--text);
  padding: 4px 8px; border-radius: 5px; font-family: 'Roboto Mono', monospace;
  font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex;
  align-items: center; gap: 3px;
}
.touch-pill:active { background: var(--amber); color: #000; }

/* =========================================================
   DASHBOARD & VISTA DE ETAPAS
   ========================================================= */
.stage-selector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.stage-btn {
  background: var(--panel); 
  border: 1px solid var(--panel-border);
  color: var(--text-dim); 
  font-size: 11px; font-weight: 700; 
  padding: 10px 4px; border-radius: 6px; 
  cursor: pointer; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.stage-btn.active {
  background: var(--blue); 
  color: #ffffff; 
  font-weight: 800; 
  border-color: var(--blue);
}

.main-flow-card {
  background: var(--main-flow-card-bg);
  border: 2px solid var(--blue);
  border-radius: 10px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}

.green-flow-box {
  background: var(--green-flow-bg);
  border: 1.5px solid var(--green);
  border-radius: 6px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.green-flow-title {
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--green); text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px dashed var(--green); padding-bottom: 2px;
}
.green-flow-item {
  font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 6px;
}
.green-flow-item .num {
  background: var(--green); color: #fff; font-family: 'Roboto Mono', monospace;
  font-size: 9.5px; font-weight: 700; width: 16px; height: 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

.action-steps-list { display: flex; flex-direction: column; gap: 4px; }

.step-item-row {
  background: var(--step-row-bg); 
  border: 1px solid var(--panel-border); 
  border-left: 3px solid var(--amber);
  padding: 5px 8px; border-radius: 5px; font-size: 13px; color: var(--text);
  display: flex; justify-content: space-between; align-items: center;
}
.step-item-row.callout-row {
  border-left-color: var(--blue); background: var(--callout-bg);
  color: var(--text);
}
.step-item-row.briefing-row {
  border-left-color: var(--amber); background: var(--briefing-bg);
  font-size: 12px; font-weight: 700; color: var(--text);
}

.callout-tag {
  font-family: 'Roboto Mono', monospace; color: var(--blue); font-weight: 700; font-size: 11px;
}
.briefing-tag {
  font-family: 'Roboto Mono', monospace; color: #000; font-weight: 800; font-size: 11.5px;
  background: #ff9f43; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px;
}

.btn-open-checklist {
  background: #16C47F; color: #000000; border: none;
  font-size: 11.5px; font-weight: 700; padding: 8px 12px; border-radius: 6px;
  cursor: pointer; letter-spacing: 0.5px; white-space: nowrap;
}
.btn-open-checklist:active { transform: scale(0.97); background: #00994d; }

.checklist-title-green {
  font-size: 12px; font-weight: 800; color: var(--green); letter-spacing: 0.3px;
}

.btn-stage-nav {
  background: var(--stage-nav-bg);
  border: 1.5px solid var(--stage-nav-border);
  color: var(--stage-nav-color);
  font-size: 11px; font-weight: 800; padding: 6px 12px; border-radius: 6px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-width: 140px; text-align: center;
}
.btn-stage-nav:active { opacity: 0.8; transform: scale(0.97); }

/* =========================================================
   VISTAS DEDICADAS (E6B, W&B, SOP, CHECKLISTS)
   ========================================================= */
/* E6B */
#view-e6b .e6b-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px;
}
#view-e6b .card-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--amber); display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
#view-e6b .card-title .num {
  font-family: 'Roboto Mono', monospace; font-size: 11px; color: #fff;
  background: var(--blue); width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#view-e6b .field-group { display: flex; gap: 8px; }
#view-e6b .field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#view-e6b .field label { font-size: 11px; color: var(--text-dim); }
#view-e6b .field input {
  width: 100%; background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--text); font-family: 'Roboto Mono', monospace; font-size: 14px;
  padding: 8px 10px; border-radius: 7px; outline: none;
}
#view-e6b .readout {
  background: var(--readout-bg); border: 1px solid var(--readout-border);
  border-left: 3px solid var(--green); border-radius: 8px; padding: 8px 12px;
  display: flex; justify-content: space-between; align-items: center;
}
#view-e6b .readout .label { font-size: 11px; color: var(--text-dim); }
#view-e6b .readout .value {
  font-family: 'Roboto Mono', monospace; font-weight: 700; font-size: 16px; color: var(--readout-val-color);
}
#view-e6b .note {
  font-size: 10px; color: var(--text-subtle); border-top: 1px dashed var(--panel-border);
  padding-top: 6px; line-height: 1.3;
}

.tab-btn {
  background: var(--tab-inactive-bg); color: var(--tab-inactive-color);
  font-weight: 700; border-radius: 20px; padding: 6px 18px; border: 1px solid var(--panel-border);
  font-size: 12px; cursor: pointer;
}
.tab-btn.active {
  background: var(--blue); color: #ffffff; border-color: var(--blue);
}

/* W&B SVG & Tablas */
.svg-wrapper {
  position: relative; width: 100%; height: 120px; margin-bottom: 12px;
  background: var(--card-inner-bg); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 6px; display: block; flex-shrink: 0;
}
.svg-wrapper line { stroke: var(--panel-border); }
.cg-envelope-svg { width: 100%; height: 100%; display: block; }
#svg-cg-label-detail { fill: var(--text); font-weight: 800; }

.custom-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 8px; }
.custom-table th {
  background: var(--card-inner-bg); color: var(--amber); padding: 6px 8px;
  text-align: left; font-size: 11px; border-bottom: 1px solid var(--panel-border);
}
.custom-table td { padding: 5px 8px; border-bottom: 1px solid var(--panel-border); color: var(--text); }

/* REGION DE RESULTADOS W&B: FORCE 3 COLUMNAS SIMÉTRICAS */
.readout-row-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}

/* Ajusta el padding de la caja para que los títulos entren cómodamente */
.readout-row-3col .readout-box {
  padding: 6px 8px;
  min-height: 48px;
  background: var(--card-inner-bg);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* Previene saltos de línea indeseados en títulos dentro de pantallas ajustadas */
.readout-row-3col .readout-box .lbl {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

.readout-row-3col .readout-box .val {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--readout-val-color);
  line-height: 1.2;
}

/* Visor Checklist Fullscreen */
.fullscreen-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;
  background: var(--bg); z-index: 9999; display: none;
  flex-direction: column; overflow: hidden; padding-bottom: env(safe-area-inset-bottom);
}
.fullscreen-overlay.active { display: flex; }
.fs-header {
  background: var(--panel); border-bottom: 2px solid var(--panel-border);
  padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.fs-header.qrc-theme { border-bottom-color: var(--green); }
.fs-header.emerg-theme { border-bottom-color: var(--red); background: var(--red-bg); }
.fs-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase; }
.fs-title.qrc-theme { color: var(--green); }
.fs-title.emerg-theme { color: var(--red); }

.btn-close-fs {
  background: var(--red-bg); border: 1px solid var(--red); color: var(--red);
  padding: 6px 14px; border-radius: 6px; font-weight: 800; font-size: 11px; cursor: pointer;
}

.fs-content-body {
  flex: 1; padding: 12px; overflow-y: auto; display: flex;
  flex-direction: column; align-items: center; gap: 8px;
}
.checklist-table {
  width: 100%; max-width: 620px; border-collapse: collapse;
  font-family: 'Roboto Mono', monospace; font-size: 14px; margin: 0 auto;
}
.checklist-table th {
  background: var(--panel-border); color: var(--text); text-transform: uppercase;
  padding: 10px 12px; border: 1px solid var(--panel-border); text-align: left; font-size: 11px;
}
.checklist-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--panel-border); color: var(--text); width: 60%;
}
.checklist-table td.val-col { text-align: right; font-weight: 800; color: var(--amber); width: 40%; white-space: nowrap; }
.checklist-table tr.boldface-row { background: var(--red-bg); font-weight: 700; }
.checklist-table tr.boldface-row td { color: var(--red); border-bottom-color: var(--red); }

.checklist-grid-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column; /* Llena de arriba a abajo en la Columna 1 antes de pasar a la Columna 2 */
  grid-template-rows: repeat(9, auto); /* Permite hasta 9 filas para acomodar los 16-17 elementos */
  gap: 8px;
}
.checklist-trigger-btn {
  background: var(--card-inner-bg); border: 1px solid var(--panel-border);
  border-left: 5px solid var(--green); color: var(--text); padding: 14px 12px;
  border-radius: 8px; font-size: 14px; font-weight: 700; text-align: left;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.checklist-trigger-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checklist-trigger-btn b { font-size: 16px; color: var(--amber); margin-left: 8px; }
.checklist-trigger-btn.emerg-btn { border-left-color: var(--red); background: var(--red-bg); }

/* Pop-ups / Modales */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;
  background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  z-index: 10000; display: none; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.active { display: flex; }
.modal-card {
  background: var(--panel-card); 
  border: 1px solid var(--amber); 
  border-radius: 14px;
  width: 100%; 
  max-width: 480px; /* 👈 Aumentado de 360px a 480px para mayor espacio horizontal */
  padding: 16px; 
  box-shadow: 0 12px 35px rgba(0,0,0,0.5);
  display: flex; 
  flex-direction: column; 
  gap: 12px;
}
.kp-display {
  background: var(--card-inner-bg); border: 1px solid var(--panel-border);
  color: var(--green); font-family: 'Roboto Mono', monospace; font-size: 26px;
  font-weight: 700; text-align: right; padding: 10px 14px; border-radius: 8px;
}
.keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kp-btn {
  background: var(--panel); border: 1px solid var(--panel-border); color: var(--text);
  font-size: 18px; font-weight: 700; padding: 14px 0; border-radius: 8px; cursor: pointer; text-align: center;
}
.kp-btn:active { background: var(--amber); color: #000; }
.kp-btn.fn { color: var(--amber); background: var(--card-inner-bg); }
.kp-btn.enter { background: var(--green); color: #fff; font-size: 15px; }

/* =========================================================
   NUEVO BOTÓN PRINCIPAL DE CAMBIO DE AVIÓN (HEADER TOP-LEFT)
   ========================================================= */
.btn-aircraft-toggle {
  background: var(--card-inner-bg);
  border: 1.5px solid var(--amber);
  color: var(--amber);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 20px; /* Agrandado para mayor presencia en cabina */
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease-in-out;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.btn-aircraft-toggle:active {
  transform: scale(0.96);
  background: var(--amber);
  color: #000000;
}

/* ETIQUETA INFORMATIVA ESTÁTICA EN W&B (YA NO ES BOTÓN) */
.badge-aircraft-info {
  background: var(--card-inner-bg);
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.5px;
}
.badge-aircraft-info span {
  color: var(--amber);
  margin-left: 4px;
}

/* =========================================================
   ESTILOS DEL MÓDULO METEOROLÓGICO DE 3 ESTACIONES
   ========================================================= */
.weather-stations-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.weather-station-card {
  background: var(--card-inner-bg);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed var(--panel-border);
  padding-bottom: 3px;
}

.ws-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
}

.ws-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ws-type {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
  width: 48px;
  flex-shrink: 0;
}

.ws-text {
  font-family: 'Roboto Mono', monospace;
  font-size: 10.5px;
  color: var(--text);
  word-break: break-word;
}

/* =========================================================
   ESTILOS PARA PESTAÑA METEO (OPEN-METEO ENGINE)
   ========================================================= */
.controls-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-inner-bg);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.control-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pill-btn {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pill-btn.active {
  background: var(--blue);
  color: #ffffff;
  border-color: var(--blue);
}

.pill-btn.station-btn {
  border-color: var(--amber);
  color: var(--amber);
}

.pill-btn.station-btn.active {
  background: var(--amber);
  color: #000;
  border-color: var(--amber);
  font-weight: 800;
}

/* TABLA METEOROLÓGICA DE ALTITUDES */
.meteo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px;
}

.meteo-table th {
  background: var(--card-inner-bg);
  color: var(--amber);
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--panel-border);
  font-size: 11px;
  text-transform: uppercase;
}

.meteo-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--panel-border);
  font-family: 'Roboto Mono', monospace;
}

.wind-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wind-arrow-svg {
  width: 14px;
  height: 14px;
  fill: var(--amber);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.tag-coverage {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  display: inline-block;
  margin-right: 4px;
}

.tag-clr { background: rgba(64, 192, 87, 0.2); color: var(--green); }
.tag-few { background: rgba(51, 154, 240, 0.2); color: var(--blue); }
.tag-sct { background: rgba(232, 182, 76, 0.2); color: var(--amber); }
.tag-bkn { background: rgba(224, 49, 49, 0.2); color: var(--red); }

.cloud-details {
  font-size: 11px;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}

.meteo-footer-legend {
  padding-top: 8px;
  border-top: 1px dashed var(--panel-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: var(--text-dim);
}

/* =========================================================
   ESTILOS DE INTELLIGENCE, PIREPS Y MODALES TAF/NOTAM (V4)
   ========================================================= */

/* AUMENTO DE +1px EN LECTURA DE PIREPs PARA CABINA */
.pirep-text {
  font-size: 11.5px; /* Agrandado 1px desde 10.5px */
  font-family: 'Roboto Mono', monospace;
  color: var(--text);
  line-height: 1.35;
  margin-top: 2px;
}

/* CAJA DE SCROLL INTERNO PARA INTELLIGENCE */
.intel-scroll-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}

.station-intel-group {
  border-bottom: 1px dashed var(--panel-border);
  padding-bottom: 6px;
}

.station-intel-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* BOTÓN DE POP-UP TAF */
.btn-taf-popup {
  background: rgba(232, 182, 76, 0.15);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-taf-popup:hover, .btn-taf-popup:active {
  background: var(--amber);
  color: #000;
}

/* BOTÓN LEER MÁS EN NOTAMs (CAMBIADO A ÁMBAR HARMÓNICO) */
.btn-notam-more {
  background: rgba(232, 182, 76, 0.15);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 4px;
}

.btn-notam-more:hover, .btn-notam-more:active {
  background: var(--amber);
  color: #000;
}

/* TARJETAS Y SEGMENTOS DENTRO DEL POP-UP TAF DECODIFICADO */
.taf-segment {
  background: var(--card-inner-bg);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--blue);
  padding: 8px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
}

.taf-segment.alert {
  border-left-color: var(--amber);
  background: rgba(232, 182, 76, 0.08);
}

.taf-segment.danger {
  border-left-color: var(--red);
  background: var(--red-bg);
}

/* VARIABLES ADICIONALES PARA HEADER DE TIEMPO EN POP-UP TAF */
:root {
  --time-header: #ffd43b;
}

body.light-theme {
  --time-header: #b45309;
}

.taf-hybrid-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--amber);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
}

/* Flexbox responsivo con separación de seguridad */
.taf-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Permite acomodar en pantallas muy angostas sin sobreponer */
  gap: 8px; /* 👈 Garantiza espacio mínimo entre la fecha y la etiqueta TEMPO/BECMG */
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--panel-border);
  padding-bottom: 4px;
}

.taf-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  white-space: nowrap; /* Evita que la etiqueta se rompa en dos líneas */
}

.taf-hybrid-card.pred-card { border-left-color: var(--amber); }
.taf-hybrid-card.becmg-card { border-left-color: var(--blue); }
.taf-hybrid-card.tempo-card { border-left-color: var(--red); }

.taf-badge-type {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 11px;
  color: var(--amber);
  text-transform: uppercase;
}

.taf-data-line {
  margin-top: 3px;
  color: var(--text);
  line-height: 1.35;
}


/* BOTONES COMPACTOS DE NOTAMs (PÍLDORAS AZULES EN MODO NOCHE) */
.btn-notam-pill {
  background: var(--panel);
  border: 1px solid var(--blue);
  color: var(--blue);
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.btn-notam-pill:hover,
.btn-notam-pill:active {
  background: var(--blue);
  color: #ffffff;
  font-weight: 800;
}

/* Adaptación para la versión Día */
body.light-theme .btn-notam-pill {
  background: #f8fafc;
  border-color: #0284c7;
  color: #0284c7;
}

body.light-theme .btn-notam-pill:hover,
body.light-theme .btn-notam-pill:active {
  background: #0284c7;
  color: #ffffff;
}

/* BOTÓN DE CERRAR MODAL CUADRADO ROJO */
.modal-close-btn {
  background: rgba(224, 49, 49, 0.15); /* Basado en var(--red-bg) */
  border: 1px solid var(--red);
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.modal-close-btn:hover, .modal-close-btn:active {
  background: var(--red);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(224, 49, 49, 0.5);
}