/* notamhub.css — Capa de identidad NotamHub (se carga DESPUÉS de styles.css).
 *
 * Dos objetivos:
 *  1) Cambiar la DISTRIBUCIÓN: la navegación pasa del header superior a un
 *     RAIL VERTICAL a la izquierda (el mapa y el panel se desplazan a su
 *     derecha). El stepper queda como columna de iconos.
 *  2) Renovar el LENGUAJE VISUAL: tarjetas más planas y redondeadas con barra
 *     de acento, botones y chips nuevos, tipografía condensada en títulos y
 *     estados activos en teal (en vez del relleno ámbar original).
 */

:root {
  --nh-rail-w:       86px;
  --nh-accent-soft:  rgba(31, 195, 214, 0.16);
  --nh-accent-bd:    rgba(31, 195, 214, 0.45);
  --nh-card-bg:      #0c2c33;
  --nh-card-radius:  14px;
  --nh-elev:         0 6px 18px rgba(0, 12, 16, 0.45);
}

/* ════════════════════════════════════════════════════════════════
   1. DISTRIBUCIÓN — rail lateral en lugar de header superior
   ════════════════════════════════════════════════════════════════ */
.b1-shell {
  /* De [rows: header / main] a [cols: rail | main] */
  grid-template-rows: 1fr !important;
  grid-template-columns: var(--nh-rail-w) 1fr !important;
  /* Ya no hay header arriba: el offset superior de toolbar/leaflet-top baja. */
  --b1-header-h: 12px;
}

/* El antiguo .b1-header se convierte en el rail vertical (columna 1). */
.b1-header {
  flex-direction: column;
  align-items: center;
  min-height: 0;
  height: 100%;
  padding: var(--sp-3) 8px;
  gap: var(--sp-3);
  border-bottom: none;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-panel) 55%);
}

.b1-brand { flex-direction: column; gap: 5px; text-align: center; }
.b1-brand img { height: 36px !important; width: auto; }
.b1-brand-name {
  font-family: 'Archivo Narrow', 'Archivo', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
}

.b1-stepper {
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: flex-start;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  margin-top: var(--sp-2);
}
.b1-step {
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 11px 4px;
  border-radius: 12px;
  font-family: 'Archivo Narrow', 'Archivo', Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  position: relative;
  color: var(--text-mute);
}
.b1-step .b1-step-icon { width: 23px; height: 23px; flex: 0 0 23px; }
.b1-step:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.b1-step.is-active {
  background: var(--nh-accent-soft);
  color: #ffffff;
}
.b1-step.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 16%; bottom: 16%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.b1-actions {
  flex-direction: column;
  width: 100%;
  margin-top: auto;
  gap: 6px;
  align-items: center;
}
.b1-net-status {
  font-size: 9px;
  letter-spacing: 0.3px;
  text-align: center;
  color: var(--text-mute);
}
.b1-net-status.is-offline { color: var(--warn); }
.b1-icon-btn { width: 34px; height: 34px; }

/* El "rail de panel colapsado" original es redundante con el rail de nav:
   lo ocultamos para no duplicar iconos cuando se colapsa el panel. */
.b1-shell[data-panel-state="collapsed"] .b1-panel-rail { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   2. LENGUAJE VISUAL
   ════════════════════════════════════════════════════════════════ */

/* Panel y cuerpo */
.b1-panel { background: var(--bg-panel); }
.b1-panel-body { padding: var(--sp-4); }
.b1-panel-resize:hover,
.b1-panel-resize.b1-dragging { background: var(--accent); }

/* Títulos: condensados, en versalitas, con filete de acento a la izquierda. */
.b1-panel-body h2,
.notam-section-title,
.settings-card > h3,
.notamhub-title,
.table-header h2 {
  font-family: 'Archivo Narrow', 'Archivo', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.settings-card > h3,
.notamhub-title {
  padding-left: 10px;
  border-left: 3px solid var(--accent);
}

/* Tarjetas: planas, redondeadas, con sombra suave. */
.notamhub-card,
.notam-toolbar-card,
.notam-section,
.settings-card,
.feature,
.table-wrap,
.home-disclaimer,
.notam-card {
  background: var(--nh-card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--nh-card-radius) !important;
  box-shadow: var(--nh-elev);
}
.feature { transition: transform 0.12s ease, border-color 0.12s ease; }
.feature:hover { transform: translateY(-2px); border-color: var(--nh-accent-bd) !important; }

/* Etiqueta "RECOMENDADO" y badges → teal en vez de ámbar. */
.notamhub-tag {
  background: var(--nh-accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--nh-accent-bd) !important;
  letter-spacing: 1px;
}
.badge-foreign {
  background: var(--nh-accent-soft);
  color: var(--accent);
  border: 1px solid var(--nh-accent-bd);
  border-radius: var(--r-pill);
  padding: 0 7px;
  font-size: 9px;
  font-weight: 700;
}

/* Botones */
.btn {
  border-radius: 9px;
  font-family: 'Archivo', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: filter 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent) !important;
  color: #04222a !important;
  border: 1px solid var(--accent) !important;
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-mute) !important;
}
.btn-ghost:hover { border-color: var(--nh-accent-bd) !important; color: var(--text) !important; }
.btn-ghost.is-active {
  background: var(--nh-accent-soft) !important;
  border-color: var(--nh-accent-bd) !important;
  color: #fff !important;
}

/* Chips de filtro TSA: activo en teal (en vez de ámbar). */
.tsa-chip.is-active {
  background: var(--nh-accent-soft);
  border-color: var(--nh-accent-bd);
  color: #fff;
}

/* Toolbar del mapa: botón activo en teal coherente. */
.b1-map-toolbar .btn.is-active {
  background: var(--accent) !important;
  color: #04222a !important;
  border-color: var(--accent) !important;
}

/* Pestañas del cajón inferior. */
.b1-drawer-tab.is-active {
  background: var(--nh-accent-soft);
  color: #fff;
  border-bottom: 2px solid var(--accent);
}

/* Modal de bienvenida acorde a la nueva identidad. */
.welcome-card {
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 10, 14, 0.6);
}
.welcome-logo { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }

/* Hero de Inicio. */
.home-hero h2 {
  font-family: 'Archivo Narrow', 'Archivo', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Responsive: en pantallas estrechas el rail se hace barra inferior. ── */
@media (max-width: 720px) {
  .b1-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr var(--nh-rail-w) !important;
    --b1-header-h: 12px;
  }
  .b1-header {
    flex-direction: row;
    height: auto;
    border-right: none;
    border-top: 1px solid var(--border);
    order: 2;
  }
  .b1-main { order: 1; }
  .b1-stepper { flex-direction: row; margin-top: 0; justify-content: space-around; }
  .b1-step { padding: 6px 4px; }
  .b1-brand { display: none; }
  .b1-actions { flex-direction: row; width: auto; margin-top: 0; }
}

/* ════════════════════════════════════════════════════════════════
   3. Clasificación de NOTAMs extranjeros (badges, leyenda, popup)
   ════════════════════════════════════════════════════════════════ */

/* Badge de categoría (tabla "Datos") */
.cat-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  vertical-align: middle;
  white-space: nowrap;
}

/* Leyenda del mapa: secciones + swatches */
.map-legend .legend-sec {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-mute);
}
.map-legend .legend-sec:first-child { margin-top: 0; }
.map-legend .swatch {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.25);
}

/* Cuerpo del NOTAM dentro del popup del mapa */
.tsa-popup-body {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  line-height: 1.35;
  max-height: 150px;
  overflow-y: auto;
  white-space: pre-wrap;
  color: var(--text-mute);
}

/* ════════════════════════════════════════════════════════════════
   4. Tabla "Datos": filas expandibles con la info completa del NOTAM
   ════════════════════════════════════════════════════════════════ */
.tsa-row { cursor: pointer; }
.tsa-row .row-caret {
  display: inline-block;
  margin-right: 6px;
  color: var(--text-mute);
  font-size: 10px;
  transition: transform 0.12s ease;
}
.tsa-row.expanded .row-caret { transform: rotate(90deg); }
.tsa-row.is-largecircle > td { opacity: 0.5; }     /* círculo > 75 NM (oculto del mapa) */
.tsa-row.is-largecircle.expanded > td { opacity: 1; }

.badge-lc {
  display: inline-block;
  background: rgba(245, 158, 11, 0.18);
  color: var(--warn);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: var(--r-pill);
  padding: 0 6px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.tsa-detail-row > td { background: rgba(0, 0, 0, 0.18); padding: 10px 14px; }
.tsa-detail {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 14px;
  font-size: 12px;
  align-items: start;
}
.tsa-detail .d-k { color: var(--text-mute); font-weight: 600; white-space: nowrap; }
.tsa-detail .d-v { color: var(--text); min-width: 0; }
.tsa-detail .lc-warn { color: var(--warn); }
.tsa-detail .d-body {
  margin: 2px 0 0;
  white-space: pre-wrap;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  max-height: 240px;
  overflow: auto;
}

/* ════════════════════════════════════════════════════════════════
   5. Filtro por FIR + filas sin geometría
   ════════════════════════════════════════════════════════════════ */
.fir-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.fir-chips.hidden { display: none; }
.fir-chips-label {
  font-size: 11px; font-weight: 700; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.5px; margin-right: 2px;
}
.fir-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text-mute); transition: background-color .12s, border-color .12s, color .12s, opacity .12s;
}
.fir-chip:hover { border-color: var(--nh-accent-bd); color: var(--text); }
.fir-chip.is-active { background: var(--nh-accent-soft); border-color: var(--nh-accent-bd); color: #fff; }
.fir-chip:not(.is-active) { opacity: 0.55; }
.fir-chip-count {
  font-size: 9px; font-weight: 700; background: rgba(0,0,0,.25);
  border-radius: var(--r-pill); padding: 0 5px; min-width: 16px; text-align: center;
}

.tsa-row.is-nogeo > td { opacity: 0.5; }
.tsa-row.is-nogeo.expanded > td { opacity: 1; }
.badge-nogeo {
  display: inline-block;
  background: rgba(100,116,139,.2); color: var(--text-mute);
  border: 1px solid rgba(100,116,139,.45); border-radius: var(--r-pill);
  padding: 0 6px; font-size: 9px; font-weight: 700; white-space: nowrap;
}
.tsa-row.is-firwide > td { opacity: 0.85; }
.badge-firwide {
  display: inline-block;
  background: var(--nh-accent-soft); color: var(--accent);
  border: 1px solid var(--nh-accent-bd); border-radius: var(--r-pill);
  padding: 0 6px; font-size: 9px; font-weight: 700; white-space: nowrap;
}
.badge-upcoming {
  display: inline-block;
  background: rgba(245,158,11,.2); color: var(--warn);
  border: 1px solid rgba(245,158,11,.5); border-radius: var(--r-pill);
  padding: 0 6px; font-size: 9px; font-weight: 700; white-space: nowrap;
}
.badge-expired {
  display: inline-block;
  background: rgba(100,116,139,.2); color: var(--text-mute);
  border: 1px solid rgba(100,116,139,.45); border-radius: var(--r-pill);
  padding: 0 6px; font-size: 9px; font-weight: 700; white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   6. Ordenación por columnas + buscador + chips de categoría
   ════════════════════════════════════════════════════════════════ */
#tsa-table thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
#tsa-table thead th.sortable:hover { color: var(--accent); }
#tsa-table thead th.sortable::after { content: ' ⇅'; opacity: .35; font-size: 9px; }
#tsa-table thead th.sort-asc::after { content: ' ↑'; opacity: 1; color: var(--accent); }
#tsa-table thead th.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--accent); }

.filter-search { display: flex; flex: 1 1 220px; }
.filter-search input {
  width: 100%; min-width: 200px;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--text); font-size: 12px; font-family: 'Archivo', Arial, sans-serif;
}
.filter-search input:focus { outline: none; border-color: var(--nh-accent-bd); }

.cat-chip .cat-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 2px; vertical-align: middle; border: 1px solid rgba(0,0,0,.3);
}

/* Etiquetas ICAO de aeródromos sobre el satélite: texto claro con casing
   oscuro para contraste (combina con el marcador cian). */
.leaflet-tooltip.aero-label {
  background: transparent; border: none; box-shadow: none; padding: 0 2px;
  color: #e6fbff; font-size: 9.5px; font-weight: 600; letter-spacing: .2px;
  text-shadow:
    -1px -1px 0 #0b1020, 1px -1px 0 #0b1020,
    -1px  1px 0 #0b1020, 1px  1px 0 #0b1020,
     0   -1px 0 #0b1020, 0    1px 0 #0b1020,
    -1px  0   0 #0b1020, 1px  0   0 #0b1020;
}
.leaflet-tooltip.aero-label.aero-label-large { font-size: 11px; font-weight: 700; }
.leaflet-tooltip.aero-label.aero-label-mil { font-size: 11px; font-weight: 700; color: #ffd99a; }
.leaflet-tooltip.aero-label::before { display: none; }
.aero-popup .aero-iata { color: var(--nh-accent, #0ea5a4); font-weight: 700; }