/* ================================================================
   AI CrewMate — design system
   ForeFlight iOS Pro inspired · navy deep + warm orange accent
   ================================================================ */

:root {
    /* Tipografía — refresco visual del handoff de diseño
       UI / display:  Schibsted Grotesk (display sans geométrico)
       Mono / datos:  IBM Plex Mono (técnico, tabular)
       Las fallbacks (system fonts) entran al instante mientras Google Fonts
       carga; al cargar, swap sin layout shift gracias a font-display:swap. */
    --font-ui:   "Space Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-num:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;  /* tabular nums */

    /* Geometría — esquinas estilo iOS Pro (alineado con prototipo) */
    --r-xs:   6px;
    --r-sm:   10px;
    --r:      12px;
    --r-md:   12px;
    --r-lg:   18px;
    --r-xl:   22px;
    --r-full: 999px;
    --gap:    14px;

    /* Severidad aviation — paleta calibrada para dark (Tailwind 400/500) */
    --sev-vfr:    #34d399;    /* emerald 400 — limpio y moderno */
    --sev-mvfr:   #60a5fa;    /* blue 400 */
    --sev-ifr:    #fb923c;    /* orange 400 */
    --sev-lifr:   #f43f5e;    /* rose 500 */
    --sev-info:   #a78bfa;    /* violet 400 */
    /* Alias caution para el tema NOCHE. Antes solo existía en el tema día:
       todo lo pintado con var(--sev-caution) (flecha de viento del compás,
       bordes warning…) quedaba SIN color en modo nocturno. */
    --sev-caution: #fb923c;

    /* Soft variants (fondo de pill) */
    --sev-vfr-soft:  rgba(52,211,153,0.14);
    --sev-mvfr-soft: rgba(96,165,250,0.16);
    --sev-ifr-soft:  rgba(251,146,60,0.16);
    --sev-lifr-soft: rgba(244,63,94,0.16);
    --sev-info-soft: rgba(167,139,250,0.16);

    /* Paleta NOTAM — desaturada a propósito. Los NOTAMs se leen en lista;
       los colores Tailwind 400 (arriba) resultan fluorescentes en bloque.
       Estos tonos marcan severidad sin gritar. */
    --ntm-crit: #d96d61;    /* teja apagado */
    --ntm-high: #cfa75e;    /* ámbar arena */
    --ntm-med:  #7d9cc0;    /* azul acero suave */
    --ntm-low:  #8d97a8;    /* gris azulado */
    --ntm-crit-soft: rgba(217,109,97,0.09);
    --ntm-high-soft: rgba(207,167,94,0.09);
    --ntm-med-soft:  rgba(125,156,192,0.08);
    --ntm-low-soft:  rgba(141,151,168,0.07);
}

/* ===== TEMA NOCHE (default · Avionics / glass-cockpit dark) ===== */
.theme-night {
    --bg:        #0B0F14;    /* page background (near-black cockpit) */
    --bg-2:      #0E141B;    /* sticky chrome / topbar */
    --bg-3:      #16202B;    /* elevated surface / hover */
    --bg-card:   #111820;    /* card surface */
    --bg-recess: #0C1319;    /* recessed (inputs) */

    --line:      rgba(255,255,255,0.09);
    --line-soft: rgba(255,255,255,0.05);
    --line-strong: rgba(255,255,255,0.18);

    --text:      #DCE6EC;
    --text-2:    #8FA3B0;
    --text-3:    #6C8493;  /* WCAG 4.5:1 sobre card (antes #5B6F7C, 3.4:1) */

    --accent:    #22D3C5;    /* fósforo cian glass-cockpit — primary CTA */
    --accent-soft: rgba(34,211,197,0.14);
    --accent-2:  #4EA8FF;    /* secondary accent (avionics blue) */

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
    --shadow:    0 2px 8px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);

    --map-tile:  invert(.92) hue-rotate(180deg) brightness(.85) contrast(.95);
}

/* ===== TEMA DÍA (light · sala de operaciones) =====
   Refresco visual del handoff de diseño — tokens del prototipo aplicados.
   La identidad de día se vuelve más fría y editorial; el accent naranja
   pasa de #0C8577 a #0C8577 (un punto más cálido y luminoso). */
.theme-day {
    --bg:        #EDF1F4;    /* fondo EFB claro y frío (no blanco: menos deslumbre) */
    --bg-2:      #FFFFFF;    /* chrome / topbar */
    --bg-3:      #EBF0F4;    /* superficie elevada / hover */
    --bg-card:   #FFFFFF;    /* superficie de tarjeta */
    --bg-recess: #F4F7F9;    /* inputs (hundido) */

    --line:      rgba(12,26,36,0.12);
    --line-soft: rgba(12,26,36,0.07);
    --line-strong: rgba(12,26,36,0.16);

    --text:      #0C1A24;
    --text-2:    #5A6B78;
    --text-3:    #60707C;  /* WCAG 4.5:1 sobre pagina (antes #8494A0, 2.8:1) */

    --accent:    #0B796D;    /* teal profundo (WCAG 4.5:1 sobre pagina y con texto blanco) */
    --accent-soft: rgba(11,121,109,0.10);
    --accent-2:  #1E6FD9;    /* azul avionics secundario */

    --shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
    --shadow:    0 2px 8px rgba(16,24,40,0.08), 0 1px 3px rgba(16,24,40,0.04);
    --shadow-lg: 0 6px 22px rgba(16,24,40,0.10), 0 2px 8px rgba(16,24,40,0.06);

    /* Severidad y categorías meteo del prototipo (modo día).
       Separamos "caution" (ámbar) de la categoría IFR (rojo). El alias
       --sev-caution permite usar el ámbar como severidad media sin tocar
       los usos de --sev-ifr existentes (que se usan como categoría meteo). */
    --sev-vfr:    #118659;   /* oscurecidos para WCAG 4.5:1 como texto sobre blanco */
    --sev-mvfr:   #1E77D4;
    --sev-ifr:    #A36915;    /* ámbar caution — uso aviation actual */
    --sev-caution:#A36915;    /* alias explícito */
    --sev-lifr:   #DB3A2E;    /* rojo crítico / IFR categoría */
    --sev-info:   #6B7885;

    --sev-vfr-soft:  rgba(20,154,102,0.12);
    --sev-mvfr-soft: rgba(30,120,214,0.12);
    --sev-ifr-soft:  rgba(201,130,26,0.14);
    --sev-lifr-soft: rgba(220,64,53,0.14);
    --sev-info-soft: rgba(122,135,148,0.12);

    /* Paleta NOTAM modo día — misma intención: severidad sin estridencia */
    --ntm-crit: #b04a3e;
    --ntm-high: #90722B;
    --ntm-med:  #4a6e96;
    --ntm-low:  #6D7786;
    --ntm-crit-soft: rgba(176,74,62,0.08);
    --ntm-high-soft: rgba(154,122,46,0.08);
    --ntm-med-soft:  rgba(74,110,150,0.07);
    --ntm-low-soft:  rgba(118,128,143,0.06);

    --map-tile:  none;
}

/* ====================== RESET / BASE ====================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    color: var(--text);
    background: var(--bg);
    transition: background-color .25s ease, color .25s ease;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--text);
}
h2 { font-size: 1.15rem; font-weight: 600; }
h3 {
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .10em;
    font-weight: 600;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.muted { color: var(--text-2); }
.small { font-size: .82rem; }
.hidden { display: none !important; }

::selection { background: var(--accent-soft); color: var(--text); }

/* Scrollbar refinada (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 999px;
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ====================== TOPBAR ====================== */
.topbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 22px;
    background: color-mix(in srgb, var(--bg-2) 88%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px;
    max-height: 32px;
    flex-shrink: 0;
    color: var(--accent);
    display: inline-block;
    vertical-align: middle;
}
.brand-title {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.brand-sub {
    font-size: .72rem;
    color: var(--text-3);
    font-weight: 400;
}
/* "AI" siempre en naranja característico de la marca (#0C8577).
   Aplicable en cualquier wordmark donde aparezca "AI CrewMate" como
   <span class="brand-ai">AI</span> CrewMate. Hereda el resto del color
   del contenedor para que respete dark/light modes. */
.brand-ai {
    color: #0C8577;
    font-weight: inherit;
}
/* Marca registrada elevada (Opción 2): "TM" en letras sin Unicode,
   posición fina y opacidad reducida — discreto pero visible.
   Solo se usa en wordmarks "primarios" (topbar, splash, onboarding),
   no en UI funcional compacta (header Meteo, FAB, breadcrumbs). */
.brand-tm {
    font-size: 0.38em;
    font-weight: 600;
    vertical-align: 0.75em;
    margin-left: 2px;
    letter-spacing: 0.04em;
    opacity: 0.7;
    /* Que NO se rompa por accidente entre la palabra y el TM */
    white-space: nowrap;
}
/* SVG del nuevo brand mark (doble chevron). Hereda currentColor en el
   trazo gris para que se adapte a temas; el naranja se queda fijo
   porque es el color característico. */
.brand-mark {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.brand-mark .bm-gray   { stroke: #6B7C8F; }
.brand-mark .bm-orange { stroke: #0C8577; }
/* En tema oscuro, el gris pierde contraste — usamos versión clara */
.theme-night .brand-mark .bm-gray,
body.theme-night .brand-mark .bm-gray {
    stroke: #9DB0C5;
}

.topbar-right { display: flex; align-items: center; gap: 10px; }
.utc-clock {
    font-family: var(--font-num);
    font-size: .88rem;
    font-weight: 500;
    color: var(--text);
    background: var(--bg-3);
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: 0;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
}

.theme-toggle, .icon-btn {
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 1.05rem;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.theme-toggle:hover, .icon-btn:hover {
    background: var(--bg-3);
    color: var(--text);
    border-color: var(--line-strong);
}
.theme-toggle:active, .icon-btn:active { transform: scale(0.96); }
.theme-night .theme-icon-sun  { display: none; }
.theme-day   .theme-icon-moon { display: none; }

/* ====================== LAYOUT ====================== */
.main {
    max-width: 1600px;
    margin: 0 auto;
    padding: 22px;
    display: flex; flex-direction: column; gap: 18px;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.card-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.card-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--line-soft);
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap;
    background: transparent;
}

/* ====================== TABS (segmented iOS) ====================== */
.tabs {
    display: inline-flex;
    gap: 2px;
    background: var(--bg-recess);
    padding: 3px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-soft);
}
.tab {
    border: 0; background: transparent; color: var(--text-2);
    padding: 7px 16px; border-radius: 8px; cursor: pointer;
    font-size: .85rem; font-weight: 500;
    transition: background .15s, color .15s;
    letter-spacing: -.005em;
}
.tab:hover { color: var(--text); }
.tab.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

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

/* ============ COMPRESIÓN DEL CARD-INPUT ============ */
.card-input .card-head {
    justify-content: space-between;
    cursor: pointer;
    transition: background-color .18s;
}
.card-input .card-head:hover { background: var(--bg-3); }
.card-head-left {
    display: flex; align-items: center; gap: 14px;
    flex: 1; min-width: 0;
}
.card-input-summary {
    font-family: var(--font-mono);
    font-size: .85rem;
    color: var(--accent);
    background: var(--bg-3);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--line);
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 360px;
    display: none;
}
.card-input.collapsed .card-input-summary {
    display: inline-block;
}
.card-input.collapsed .tabs,
.card-input.collapsed .tab-panel,
.card-input.collapsed .card-foot {
    display: none;
}
.card-input.collapsed .card-head {
    border-bottom: 0;
}

/* Atajos de logbook en la barra superior — accesibles siempre, incluso
   con el card colapsado. Se posicionan a la derecha, justo antes del
   botón de toggle. */
.card-head-logbook {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;   /* empuja todo hacia la derecha */
    flex-shrink: 0;
}
.hdr-logbook-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
    font-family: var(--font-ui, inherit);
}
.hdr-logbook-btn:hover { transform: translateY(-1px); }
.hdr-logbook-btn:active { transform: translateY(0); }
.hdr-logbook-btn.primary {
    background: #0C8577;
    color: #ffffff;
    border-color: #0C8577;
}
.hdr-logbook-btn.primary:hover {
    background: #db5f0c;
    border-color: #db5f0c;
}
.hdr-logbook-btn.secondary {
    background: transparent;
    color: var(--text-2);
    border-color: var(--line);
}
.hdr-logbook-btn.secondary:hover {
    background: var(--bg-3);
    color: var(--text);
    border-color: var(--text-3);
}
.hdr-logbook-btn svg { flex-shrink: 0; }

/* En pantallas pequeñas escondemos solo el texto, dejando los iconos */
@media (max-width: 720px) {
    .hdr-logbook-btn span { display: none; }
    .hdr-logbook-btn {
        padding: 7px 10px;
        width: 32px;
        height: 32px;
        justify-content: center;
    }
}
.card-toggle {
    background: transparent;
    border: 0;
    color: var(--text-3);
    cursor: pointer;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .9rem;
    transition: all .18s;
    flex-shrink: 0;
}
.card-toggle:hover { background: var(--bg-3); color: var(--text); }
.card-input.collapsed .card-toggle { transform: rotate(180deg); }

/* ====================== FORM ====================== */
.grid-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field-wide { grid-column: 1 / -1; }
.field-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    font-weight: 600;
}
.field input, .field select, textarea {
    background: var(--bg-recess);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: .93rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input::placeholder, textarea::placeholder { color: var(--text-3); }
.field input:hover, .field select:hover, textarea:hover { border-color: var(--line-strong); }
.field input.icao,
.field input.icao-alnum {
    font-family: var(--font-num);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 500;
}
.field input:focus, .field select:focus, textarea:focus {
    outline: 0;
    border-color: var(--accent);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea {
    width: 100%;
    font-family: var(--font-mono);
    font-size: .85rem;
    resize: vertical;
    min-height: 140px;
}

.row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.feedback { font-size: .85rem; }
.feedback.ok  { color: var(--sev-vfr); }
.feedback.err { color: var(--sev-lifr); }

/* ====================== UPLOAD ====================== */
.upload-zone {
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r-md);
    padding: 32px;
    text-align: center;
    transition: border-color .15s, background .15s;
    background: var(--bg-recess);
}
.upload-zone:hover { border-color: var(--accent); }
.upload-zone.drag-over {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.upload-label {
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--text-2);
}
.upload-icon { font-size: 1.8rem; color: var(--accent); }
.upload-label small { color: var(--text-3); font-size: .78rem; }

.progress { margin-top: 14px; }
.progress-bar {
    height: 6px; background: var(--bg-recess); border-radius: 999px; overflow: hidden;
    border: 0;
}
.progress-fill {
    height: 100%; width: 0;
    background: var(--accent);
    transition: width .25s ease;
    border-radius: 999px;
}
#ocr-status { display: block; margin-top: 6px; font-size: .82rem; }

#ocr-result { margin-top: 14px; }
#ocr-result summary { cursor: pointer; color: var(--text-2); font-size: .85rem; }
#ocr-text {
    background: var(--bg-3);
    border: 1px solid var(--line);
    padding: 12px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: .82rem;
    max-height: 220px; overflow: auto;
    white-space: pre-wrap;
}

/* ====================== BOTONES ====================== */
.btn {
    border: 0;
    padding: 10px 18px;
    border-radius: var(--r-sm);
    font-family: var(--font-ui);
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
    display: inline-flex; align-items: center; gap: 8px;
    line-height: 1;
    letter-spacing: -.005em;
}
.btn:active { transform: scale(0.98); }

/* ====================== AICM COMBO — desplegable propio ======================
   Sustituye a los <datalist> nativos: estilo de la app, anclado bajo la
   casilla, filas tactiles de 44px. Lo posiciona AicmCombo (app.js). */
.aicm-combo {
    position: fixed;
    z-index: 99999;
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.aicm-combo.hidden { display: none; }
.aicm-combo-opt {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 44px;
    padding: 11px 14px;
    box-sizing: border-box;
    cursor: pointer;
}
.aicm-combo-opt + .aicm-combo-opt { border-top: 1px solid var(--line); }
.aicm-combo-val {
    font-family: var(--font-num, monospace);
    font-weight: 600;
    font-size: .95rem;
    color: var(--text);
    letter-spacing: .04em;
    flex-shrink: 0;
}
.aicm-combo-lbl {
    color: var(--text-2);
    font-size: .85rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aicm-combo-opt:hover, .aicm-combo-opt.active { background: var(--accent-soft); }
.aicm-combo-opt.active .aicm-combo-val { color: var(--accent); }
/* Vuelo con firma de examinador registrada */
.lbv2-tag-signed { color: var(--accent); border-color: var(--accent) !important; }

/* El boton Logbook de la TOPBAR colapsa a icono en pantallas estrechas,
   igual que hace el del card del plan (sus estilos base van inline). */
@media (max-width: 720px) {
    #topbar-logbook span { display: none; }
    #topbar-logbook {
        width: 44px !important;
        min-width: 44px;
        padding: 0 !important;
        justify-content: center !important;
    }
}

/* ================================================================
   LOGBOOK v3 — antes inyectado desde app.js (_lbv3EnsureStyles).
   Cambios al migrar: colores por token (coherentes con tema dia/noche)
   y tamaños de letra minimos subidos a 11-12px (legibilidad iPad).
   ================================================================ */
.lbv3 { animation: lbv3up .45s cubic-bezier(.2,.7,.3,1); }
@keyframes lbv3up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lbv3, .lbv3 * { animation: none !important; transition: none !important; } }
.lbv3-hero { margin: 4px 0 18px; }
.lbv3-hero-lbl { font: 600 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.lbv3-hero-num { font: 800 clamp(46px,7vw,72px)/1.05 var(--font-ui); letter-spacing: -.02em; background: linear-gradient(100deg, var(--accent) 15%, var(--accent-2) 105%); -webkit-background-clip: text; background-clip: text; color: var(--accent); -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.lbv3-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.lbv3-chip { background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: 500 12px var(--font-ui); color: var(--text-2); }
.lbv3-chip b { color: var(--text); font-family: var(--font-num); font-weight: 600; }
.lbv3-chip.hot { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.lbv3-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; }
.lbv3-h3 { font: 700 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lbv3-h3sub { margin-left: auto; font: 500 11px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.lbv3-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 760px) { .lbv3-grid2 { grid-template-columns: 1fr; } }
.lbv3-grid2 .lbv3-card { margin-bottom: 0; }
.lbv3-donut { border: 0 !important; background: none !important; padding: 0 !important; }
.lbv3-heatwrap { overflow-x: auto; padding-bottom: 4px; }
.lbv3-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; width: max-content; }
.lbv3-heat i, .lbv3-heatleg i { width: 11px; height: 11px; border-radius: 3px; background: var(--bg-recess); display: inline-block; }
.lbv3-heat i.pad { background: transparent; }
.lbv3-heat i { transition: transform .1s; }
.lbv3-heat i:hover { transform: scale(1.35); outline: 1px solid var(--accent); }
.lbv3-heat .l1, .lbv3-heatleg .l1 { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.lbv3-heat .l2, .lbv3-heatleg .l2 { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.lbv3-heat .l3, .lbv3-heatleg .l3 { background: color-mix(in srgb, var(--accent) 75%, transparent); }
.lbv3-heat .l4, .lbv3-heatleg .l4 { background: var(--accent); }
.lbv3-heatfoot { font: 500 11px var(--font-ui); color: var(--text-3); margin-top: 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lbv3-heatfoot b { color: var(--text); font-family: var(--font-num); }
.lbv3-heatleg { display: inline-flex; align-items: center; gap: 4px; }
.lbv3-heatleg i { width: 9px; height: 9px; border-radius: 2px; }
.lbv3-toplist { display: flex; flex-direction: column; gap: 9px; }
.lbv3-toprow { display: flex; align-items: center; gap: 10px; font: 500 13px var(--font-ui); }
.lbv3-toprow .code { font: 600 13px var(--font-num); width: 46px; color: var(--accent-2); }
.lbv3-toprow .meter { flex: 1; height: 6px; background: var(--bg-recess); border-radius: 3px; overflow: hidden; }
.lbv3-toprow .meter i { display: block; height: 100%; background: var(--accent-2); border-radius: 3px; transform: scaleX(0); transform-origin: left; animation: lbv3growx .8s .15s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes lbv3growx { to { transform: scaleX(1); } }
.lbv3-toprow .n { font: 500 12px var(--font-num); color: var(--text-2); width: 48px; text-align: right; }
.lbv3 .lbv-cur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; }
.lbv3-ccard { display: flex !important; gap: 14px; align-items: center; background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.lbv3-ccard.ok { border-left: 3px solid var(--sev-vfr); }
.lbv3-ccard.warn { border-left: 3px solid var(--sev-lifr); }
.lbv3-ringbox { position: relative; width: 78px; height: 78px; flex: none; }
.lbv3-ringc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lbv3-ringv { font: 600 14px var(--font-num); color: var(--text); }
.lbv3-ringt { font: 500 11px var(--font-num); color: var(--text-3); margin-top: 1px; }
.lbv3-ccbody { min-width: 0; }
.lbv3-cctitle { font: 700 13.5px var(--font-ui); color: var(--text); }
.lbv3-ccsub { font: 400 12px var(--font-ui); color: var(--text-3); margin-top: 3px; line-height: 1.45; }
.lbv3-ccfoot { font: 500 11px var(--font-num); margin-top: 6px; }
.lbv3 .t-ok { color: var(--sev-vfr); }
.lbv3 .t-warn { color: var(--sev-ifr); }
.lbv3-qchips { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 12px; }
.lbv3-qchip { background: var(--bg-card); border: 1px solid var(--line); color: var(--text-2); border-radius: 999px; padding: 6px 14px; font: 600 12.5px var(--font-ui); cursor: pointer; transition: all .15s; }
.lbv3-qchip:hover { color: var(--text); }
.lbv3-qchip.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.lbv3 .lbv2-entry.lbv3-flight { border-radius: 14px; transition: border-color .15s, transform .15s; }
.lbv3 .lbv2-entry.lbv3-flight:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateX(4px); }
.lbv3 .lbv3-flight.has-notes { cursor: pointer; }
.lbv3-day { text-align: center; font-family: var(--font-num); min-width: 40px; }
.lbv3-day b { display: block; font-size: 19px; font-weight: 600; color: var(--text); line-height: 1.1; }
.lbv3-day span { font-size: 11px; color: var(--text-3); letter-spacing: .1em; }
.lbv3-route { display: flex; align-items: center; gap: 11px; font: 600 16px var(--font-num); color: var(--text); }
.lbv3-line { flex: 0 1 150px; min-width: 40px; height: 2px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 1px; position: relative; }
.lbv3-line::after { content: '\2708'; position: absolute; top: -9px; left: 0; font-size: 11px; color: var(--accent); transition: left .5s cubic-bezier(.2,.7,.3,1); }
.lbv3-flight:hover .lbv3-line::after { left: calc(100% - 13px); }
.lbv3 .lbv3-notes { display: none; }
.lbv3 .lbv3-flight.open .lbv3-notes { display: block; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.lbv3 .lbv3-flight.has-notes .lbv3-route::before { content: '\25B8'; font-size: 10px; color: var(--text-3); margin-right: -4px; transition: transform .15s; display: inline-block; }
.lbv3 .lbv3-flight.open .lbv3-route::before { transform: rotate(90deg); }
.lbv3-maprecs { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font: 500 12px var(--font-ui); color: var(--text-2); }
.lbv3-maprecs b { color: var(--text); font-family: var(--font-num); font-weight: 600; }
.lbv3-arc { stroke-dasharray: 7 6; animation: lbv3dash 1.6s linear infinite; }
@keyframes lbv3dash { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) { .lbv3-arc { animation: none; stroke-dasharray: none; } }

/* Tendencias de Actividad reciente (antes <style> inline en el render) */
.lbv-rtrend { display: block; margin-top: 5px; font: 600 .72rem var(--font-ui); letter-spacing: .01em; }
.lbv-rtrend.up { color: var(--sev-vfr); }
.lbv-rtrend.down { color: var(--sev-ifr); }
.lbv-rtrend.flat { color: var(--text-3); }

/* Selector de normativa EASA/FAA (antes <style> inline en el render) */
.lbv-juris { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.lbv-juris-lbl { font: 700 11px var(--font-num); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.lbd-seg { display: inline-flex; gap: 3px; background: var(--bg-recess); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.lbd-seg button { font: 700 .72rem var(--font-ui); letter-spacing: .04em; color: var(--text-3); background: none; border: 0; padding: 5px 14px; border-radius: 6px; cursor: pointer; }
.lbd-seg button.on { background: var(--accent); color: var(--bg); }

/* Boton "Mostrar mas" de la lista paginada de vuelos */
.lbv2-more-wrap { display: flex; justify-content: center; margin: 16px 0 6px; }
.lbv2-more-wrap .muted { opacity: .7; font-weight: 400; }

/* ==== Menu "···" del pie del visor de logbook ==== */
.lbv-more-wrap { position: relative; }
.lbv-overflow-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 230px;
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 50;
}
.lbv-overflow-menu.hidden { display: none; }
.lbv-om-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}
.lbv-om-item:hover { background: var(--bg-3); }
.lbv-om-danger { color: var(--sev-lifr); }
.lbv-om-danger:hover { background: color-mix(in srgb, var(--sev-lifr) 12%, transparent); }

/* ==== Fichas de GRUPO de recencia (mismo tipo o clase, FCL.060/61.57) ==== */
.lbv-recg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.lbv-recg-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--bg-3);
    color: var(--text-2);
    font-family: var(--font-num, monospace);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.lbv-recg-chip:hover { border-color: var(--accent); }
.lbv-recg-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.lbv-recg-chip small { color: var(--text-3); font-size: .82em; font-weight: 500; }
.lbv-recg-mark { font-style: normal; font-size: .95em; }
.lbv-recg-mark.ok { color: var(--sev-vfr); }
.lbv-recg-mark.warn { color: var(--sev-lifr); }
@media (hover: none) {
    .lbv-recg-chip { min-height: 44px; }
}

/* ====== AICM DATE — calendario propio (sustituye <input type=date>) ====== */
.aicm-cal { padding: 10px; width: 280px; }
.aicm-cal-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.aicm-cal-t { flex: 1; text-align: center; font-weight: 700; font-size: .9rem; color: var(--text); }
.aicm-cal-nav, .aicm-cal-today {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text-2);
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
    font-size: 1rem;
    font-family: inherit;
}
.aicm-cal-today { font-size: .74rem; padding: 0 10px; font-weight: 600; }
.aicm-cal-nav:hover, .aicm-cal-today:hover { color: var(--accent); border-color: var(--accent); }
.aicm-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.aicm-cal-g s { text-decoration: none; font: 700 10px var(--font-num, monospace); color: var(--text-3); padding: 4px 0; }
.aicm-cal-g a {
    display: flex; align-items: center; justify-content: center;
    height: 34px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
}
.aicm-cal-g a:hover { background: var(--bg-3); color: var(--text); }
.aicm-cal-g a.mut { opacity: .35; pointer-events: none; }
.aicm-cal-g a.today { outline: 1px dashed var(--accent); outline-offset: -1px; }
.aicm-cal-g a.on { background: var(--accent); color: var(--bg); font-weight: 700; }
@media (hover: none) {
    .aicm-cal { width: 300px; }
    .aicm-cal-g a { height: 42px; }
    .aicm-cal-nav, .aicm-cal-today { min-width: 44px; min-height: 44px; }
}
.btn-primary {
    background: var(--accent);
    color: var(--bg);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: color-mix(in srgb, var(--accent) 90%, #fff);
    box-shadow: var(--shadow);
}
.theme-day .btn-primary { color: #fff; }
.theme-day .brief-tabs-row-main .brief-tab.active,
.theme-day .brief-tabs-row-main .brief-tab.active svg,
.theme-day .rfcv-detail-cta,
.theme-day .ai-fab,
.theme-day .lfb-type-btn.active { color: #fff; }
.btn-secondary {
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--line);
}
.btn-secondary:hover {
    background: color-mix(in srgb, var(--bg-3) 80%, var(--line-strong));
    border-color: var(--line-strong);
}
.btn-ghost {
    background: transparent;
    color: var(--text-2);
    border: 1px solid transparent;
}
.btn-ghost:hover { color: var(--text); background: var(--bg-3); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
.btn-icon { font-size: .9em; line-height: 0; }

/* Botón "soft" para CTAs secundarias con color */
.btn-soft {
    background: var(--accent-soft);
    color: var(--accent);
    border: 0;
}
.btn-soft:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent)); }

/* ====================== EXEC SUMMARY ====================== */
.exec-summary {
    padding: 18px;
    border-bottom: 1px solid var(--line-soft);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.exec-pill {
    background: var(--bg-3);
    border-left: 4px solid var(--text-3);
    padding: 12px 14px;
    border-radius: var(--r-sm);
    display: flex; flex-direction: column; gap: 4px;
}
.exec-pill.sev-vfr  { border-color: var(--sev-vfr); }
.exec-pill.sev-mvfr { border-color: var(--sev-mvfr); }
.exec-pill.sev-ifr  { border-color: var(--sev-ifr); }
.exec-pill.sev-lifr { border-color: var(--sev-lifr); }
.exec-pill.sev-info { border-color: var(--sev-info); }
.exec-pill .lbl    { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.exec-pill .val    { font-size: 1.05rem; font-weight: 700; }
.exec-pill .sub    { font-size: .8rem; color: var(--text-2); }
.exec-pill.clickable {
    cursor: pointer;
    text-align: left;
    font-family: var(--font-ui);
    transition: transform .18s cubic-bezier(0.32, 0.72, 0, 1), box-shadow .18s;
    color: inherit;
}
.exec-pill.clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.exec-pill.clickable:active { transform: translateY(0); }
.exec-pill.clickable::after {
    content: "→";
    color: var(--text-3);
    font-size: .9rem;
    align-self: flex-end;
    opacity: 0;
    transition: opacity .18s, transform .18s;
}
.exec-pill.clickable:hover::after { opacity: .8; transform: translateX(2px); }

/* ====================== BLOQUES BRIEFING ====================== */
.briefing-meta { font-family: var(--font-mono); color: var(--text-2); font-size: .85rem; }
.briefing-block {
    padding: 18px;
    border-bottom: 1px solid var(--line-soft);
}
.briefing-block:last-of-type { border-bottom: 0; }

/* ============ PESTAÑAS DEL BRIEFING (iOS-style) ============ */
/* Layout en 2 filas: Risk Mgmt con énfasis arriba, 7 operativas centradas debajo */
.brief-tabs {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    justify-content: center;     /* centradas en la página */
    gap: 0;
    background: var(--bg-2);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: blur(12px);
    background-color: color-mix(in srgb, var(--bg-2) 88%, transparent);
}
.brief-tabs::-webkit-scrollbar { display: none; }

/* ----- Modo 2 filas ----- */
.brief-tabs.brief-tabs-2rows {
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden; /* el scroll lo gestiona cada fila si hace falta */
}
.brief-tabs-row {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.brief-tabs-row::-webkit-scrollbar { display: none; }
/* Fila superior: Risk Mgmt destacado por seguridad — fondo neutro,
   sin tinte. La distinción del botón viene del color del propio botón,
   no de pintar la fila entera. */
.brief-tabs-row-hero {
    padding: 5px 0 3px;
    border-bottom: 1px solid var(--line-soft);
}
/* Fila inferior: 7 botones centrados y equidistantes */
/* ----- Control SEGMENTADO (opción A) -----
   Los apartados van dentro de una "cápsula" con borde; el activo es una
   pastilla rellena (no solo color de texto). Mucha más afordancia de botón
   que las pestañas planas: el usuario ve que SON botones y que hay varios. */
.brief-seg-guide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 0;
    color: var(--text-3);
    font-size: .72rem;
    font-family: var(--font-ui);
    letter-spacing: .01em;
    user-select: none;
}
.brief-seg-guide svg { width: 14px; height: 14px; opacity: .8; flex: none; }
.brief-seg-wrap {
    position: relative;
    width: fit-content;
    max-width: calc(100% - 20px);
    margin: 6px auto 10px;
}
.brief-tabs-row-main {
    display: flex;
    gap: 3px;
    max-width: 100%;
    margin: 0;
    padding: 4px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.brief-tabs-row-main::-webkit-scrollbar { display: none; }
.brief-tabs-row-main .brief-tab {
    flex: 0 0 auto;
    justify-content: center;
    padding: 8px 14px;
    gap: 6px;
    font-size: .86rem;
    border-radius: 9px;
    color: var(--text-3);
    transition: background .18s ease, color .18s ease;
}
.brief-tabs-row-main .brief-tab:hover {
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--text-2);
}
.brief-tabs-row-main .brief-tab.active {
    background: var(--accent);
    color: var(--bg);
}
.brief-tabs-row-main .brief-tab.active svg { color: var(--bg); opacity: .95; transform: none; }
/* En el segmentado el activo se marca con relleno: anula el subrayado ::after */
.brief-tabs-row-main .brief-tab.active::after { display: none; }
.brief-tabs-row-main .brief-tab .tab-badge { margin-left: 2px; }
/* Degradado + chevron a la derecha: indica que hay más apartados deslizando */
.brief-seg-edge {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 48px;
    border-radius: 0 13px 13px 0;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 4px;
    background: linear-gradient(90deg, transparent, var(--bg-3) 72%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.brief-seg-wrap.is-scrollable .brief-seg-edge { opacity: 1; }
.brief-seg-wrap.at-end .brief-seg-edge { opacity: 0; }
.brief-seg-chev {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    pointer-events: auto;
    cursor: pointer;
    transition: transform .15s ease, color .15s ease;
}
.brief-seg-chev:hover { color: var(--accent); transform: scale(1.08); }
.brief-seg-chev svg { width: 15px; height: 15px; }
@media (max-width: 920px) {
    .brief-tabs-row-main .brief-tab { padding-left: 13px; padding-right: 13px; }
}

.brief-tab {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 14px 18px;
    color: var(--text-3);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: .9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    transition: color .25s cubic-bezier(0.32, 0.72, 0, 1);
    -webkit-tap-highlight-color: transparent;
}
.brief-tab svg {
    width: 16px; height: 16px;
    opacity: .85;
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.brief-tab:hover { color: var(--text-2); }
.brief-tab.active {
    color: var(--accent);
}
.brief-tab.active svg {
    transform: scale(1.1);
}

/* ----- Risk Mgmt: pill destacada de seguridad pero integrada en el UI -----
   Tono naranja suavizado (no saturado), bordes finos, sombra mínima.
   Más cerca de un "tag" iOS que de un sticker — la jerarquía la da la
   posición (fila propia arriba) y los triángulos a los lados, no la
   intensidad cromática. */
.brief-tab-hero {
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 7px 22px;
    gap: 11px;
    color: color-mix(in srgb, var(--accent) 88%, var(--text-1));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    margin: 2px 0;
    transition:
        background .2s ease,
        color      .2s ease,
        border-color .2s ease,
        transform  .15s ease;
}
.brief-tab-hero:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--accent);
    transform: translateY(-0.5px);
}
.brief-tab-hero:active {
    transform: translateY(0);
}
.brief-tab-hero.active {
    background: color-mix(in srgb, var(--accent) 92%, transparent);
    color: #fff;
    border-color: color-mix(in srgb, var(--accent) 92%, transparent);
}
.brief-tab-hero.active svg { color: #fff; opacity: .9; }
.brief-tab-hero svg.hero-gauge-ico {
    width: 17px;
    height: 17px;
    opacity: .85;
    flex-shrink: 0;
    color: inherit;
    transition: opacity .2s ease, transform .25s ease;
}
.brief-tab-hero:hover svg.hero-gauge-ico { opacity: 1; transform: rotate(-8deg); }
/* Anula el underline ::after del sistema general: la pill ES el indicador */
.brief-tab-hero.active::after { display: none; }

/* ----- Underline activo (sustituye al .brief-indicator deslizante,
   compatible con layout multi-row) ----- */
.brief-tab.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 8px rgba(247, 183, 51, .4);
    pointer-events: none;
}
.brief-tab-hero.active::after {
    height: 3px;
    left: 16px;
    right: 16px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Punto de severidad iOS-style al lado del icono */
.tab-sev-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-3);
    box-shadow: 0 0 0 0 transparent;
    margin-right: 2px;
    transition: box-shadow .3s;
}
.tab-sev-dot.sev-vfr   { background: var(--sev-vfr); }
.tab-sev-dot.sev-mvfr  { background: var(--sev-mvfr); }
.tab-sev-dot.sev-ifr   { background: var(--sev-ifr);
    box-shadow: 0 0 8px rgba(245,176,65,.6);
}
.tab-sev-dot.sev-lifr  {
    background: var(--sev-lifr);
    box-shadow: 0 0 8px rgba(231,76,60,.7);
    animation: tab-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes tab-dot-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(231,76,60,.5); transform: scale(1); }
    50%      { box-shadow: 0 0 14px rgba(231,76,60,.9); transform: scale(1.15); }
}

/* Badge numérico al final del tab */
.tab-badge {
    margin-left: 4px;
    min-width: 20px; height: 18px;
    padding: 0 6px;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.tab-badge.sev-mvfr { background: rgba(93,173,226,.20); color: var(--sev-mvfr); }
.tab-badge.sev-ifr  { background: rgba(245,176,65,.22); color: var(--sev-ifr); }
.tab-badge.sev-lifr { background: var(--sev-lifr); color: white; }

/* Tooltip del tab en hover - mejora visual */
.brief-tab[title] {
    position: relative;
}
.brief-tab:focus-visible {
    outline: none;
    background: var(--bg-3);
    border-radius: 4px;
}

/* Indicador deslizante legacy — sustituido por .brief-tab.active::after
   para compatibilidad con layout multi-row. Lo dejamos en el DOM pero oculto
   para no romper el querySelector del JS antiguo. */
.brief-indicator {
    display: none;
}

/* ---- PANELES ---- */
.brief-panes {
    position: relative;
    overflow: hidden;
    min-height: 380px;
}
.brief-pane {
    display: none;
    padding: 18px;
}
.brief-pane.active {
    display: block;
    /* Sin animacion por defecto: solo se anima al entrar via clases entering-* */
}
.brief-pane.active.entering-right {
    animation: brief-pane-in-from-right .32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.brief-pane.active.entering-left {
    animation: brief-pane-in-from-left .32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes brief-pane-in-from-right {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes brief-pane-in-from-left {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============ NOTAMs ============ */
.notams-content { display: flex; flex-direction: column; gap: 12px; }

/* ================================================================
   NOTAMS DE ÁREA (FIR-wide) — solo vuelo local
   ================================================================ */
.notam-area-section {
    background: linear-gradient(135deg,
        rgba(155, 89, 182, 0.06) 0%,
        rgba(12, 133, 119, 0.04) 100%);
    border: 1px solid rgba(155, 89, 182, 0.25);
    border-left: 3px solid #9b59b6;
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.notam-area-head {
    margin-bottom: 12px;
}
.naa-title-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 4px;
}
.naa-title-row i.ti {
    font-size: 20px; color: #9b59b6;
}
.naa-title {
    margin: 0; font-size: 0.95rem; font-weight: 700;
    color: var(--text); letter-spacing: -0.005em;
}
.naa-count {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.78rem;
    background: rgba(155, 89, 182, 0.2);
    color: #c084fc;
    padding: 1px 8px;
    border-radius: 999px;
    margin-left: auto;
}
.naa-sub { line-height: 1.45; margin-bottom: 6px; }
.naa-firs {
    line-height: 1.4;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}
.naa-firs strong { color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.notam-area-body {
    display: flex; flex-direction: column; gap: 8px;
}
.naa-empty {
    text-align: center;
    padding: 16px 12px;
    background: rgba(46, 204, 113, 0.06);
    border-radius: var(--r-sm);
    color: #2ecc71;
}

/* Popup de airspace (Leaflet) */
.airspace-popup .asp-pop-title { font-size: 0.92rem; margin-bottom: 4px; }
.airspace-popup .asp-pop-row { font-size: 0.8rem; margin-top: 2px; line-height: 1.4; }
.airspace-popup .asp-pop-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: var(--font-mono);
    margin-right: 6px;
}

/* Popup de NOTAM georreferenciado en el mapa (Fase 3) */
.notam-geo-popup .ngp-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3); }
.notam-geo-popup .ngp-title { font-size: 0.92rem; margin-bottom: 4px; font-weight: 700; }
.notam-geo-popup .ngp-meta { font-size: 0.78rem; margin-top: 4px; line-height: 1.5; color: var(--text-2); }
.notam-geo-popup .ngp-etext {
    font-size: 0.78rem; line-height: 1.45;
    background: rgba(255,255,255,0.04);
    padding: 6px 8px; border-radius: 4px;
    margin-top: 6px;
    max-width: 320px;
    white-space: pre-wrap;
    font-family: var(--font-mono);
    color: var(--text-2);
}
.notam-geo-popup .ngp-sev {
    display: inline-block; padding: 1px 8px; border-radius: 3px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
    margin-right: 6px;
}
.notam-geo-popup .ngp-sev.sev-red    { background: rgba(231,76,60,0.2); color: #ff6b6b; }
.notam-geo-popup .ngp-sev.sev-amber  { background: rgba(245,166,35,0.2); color: #ffb74d; }
.notam-geo-popup .ngp-sev.sev-gray   { background: rgba(149,165,166,0.2); color: #aab5b6; }
.notam-geo-popup .ngp-head { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.notam-geo-popup .ngp-cat {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.notam-geo-popup .ngp-cat-restriction {
    background: rgba(155, 89, 182, 0.22);
    color: #c084fc;
}
.notam-geo-popup .ngp-cat-warning {
    background: rgba(245, 166, 35, 0.18);
    color: #ffb74d;
}
/* Badge "EN TU FL / CERCA DE TU FL" en popups de drawRouteNotams */
.notam-geo-popup .ngp-fl-row {
    margin: 6px 0 4px;
}
.notam-geo-popup .ngp-fl {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: var(--font-mono);
}
.notam-geo-popup .ngp-fl-in {
    background: rgba(231, 76, 60, 0.22);
    color: #ff7b6f;
    box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.4);
}
.notam-geo-popup .ngp-fl-near {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

/* ================================================================
   Cluster badge — "+N" cuando varios NOTAMs caen en el mismo punto
   ================================================================ */
.notam-cluster-badge { background: transparent !important; border: none !important; }
.notam-cluster-badge .ncb-inner {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
.notam-cluster-popup .ncp-head {
    font-size: 0.88rem;
    margin-bottom: 8px;
    color: var(--text);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.notam-cluster-popup .ncp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}
.notam-cluster-popup .ncp-list li {
    padding: 3px 0;
    font-size: 0.82rem;
    color: var(--text-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.notam-cluster-popup .ncp-list li:last-child { border-bottom: none; }
.notam-cluster-popup .ncp-num {
    font-family: var(--font-mono);
    color: #ffb74d;
    font-weight: 700;
}

/* ================================================================
   Toggle "Mostrar NOTAMs de área" en esquina sup-der del mapa
   Colores FIJOS (no usa var(--text)) para que se vea bien en MODO DÍA
   y MODO NOCHE — el fondo es siempre oscuro semitransparente.
   ================================================================ */
.notam-toggle-ctrl {
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid rgba(245, 166, 35, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    font-family: var(--font-sans);
}
.notam-toggle-ctrl .ntc-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    user-select: none;
    color: #f8fafc;
}
.notam-toggle-ctrl .ntc-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.notam-toggle-ctrl .ntc-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: rgba(127, 140, 141, 0.5);
    border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.notam-toggle-ctrl .ntc-switch::before {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s, background 0.2s;
}
.notam-toggle-ctrl .ntc-input:checked + .ntc-switch {
    background: rgba(245, 166, 35, 0.85);
}
.notam-toggle-ctrl .ntc-input:checked + .ntc-switch::before {
    transform: translateX(14px);
}
.notam-toggle-ctrl .ntc-text {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #f8fafc;
}

/* ---- 3-way segmented control (Off / Tu FL / Todos) ---- */
.notam-toggle-3way {
    padding: 8px 10px;
}
.notam-toggle-3way .ntc-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cbd5e1;
    margin-bottom: 6px;
    text-align: center;
}
.notam-toggle-3way .ntc-seg {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}
.notam-toggle-3way .ntc-seg-btn {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: var(--font-sans);
}
.notam-toggle-3way .ntc-seg-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}
.notam-toggle-3way .ntc-seg-btn.active {
    background: rgba(245, 166, 35, 0.85);
    color: #0f172a;
}

/* ================================================================
   Leyenda flotante de NOTAMs en el mapa
   Colores FIJOS (no var(--text)) → legible en modo día y noche.
   ================================================================ */
.notam-map-legend {
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    padding: 9px 11px;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 190px;
}
.notam-map-legend .nml-title {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 6px;
    color: #ffffff;
}
.notam-map-legend .nml-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    color: #e2e8f0;
}
.notam-map-legend .nml-row.small { font-size: 0.72rem; color: #cbd5e1; }
.notam-map-legend .nml-sw {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid;
}
.notam-map-legend .nml-red   { background: rgba(231, 76, 60, 0.4);  border-color: #e74c3c; }
.notam-map-legend .nml-amber { background: rgba(245, 166, 35, 0.4); border-color: #f5a623; }
.notam-map-legend .nml-gray  { background: rgba(127, 140, 141, 0.4);border-color: #7f8c8d; border-style: dashed; }
.notam-map-legend .nml-violet { background: rgba(155, 109, 255, 0.4); border-color: #9b6dff; border-style: dashed; }
.notam-map-legend .nml-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 6px 0;
}

/* ================================================================
   Sección "NOTAMs de Área" colapsable
   ================================================================ */
.notam-area-details {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-top: 12px;
    overflow: hidden;
}
.notam-area-details > summary {
    cursor: pointer;
    padding: 12px 14px;
    list-style: none;
    user-select: none;
}
.notam-area-details > summary::-webkit-details-marker { display: none; }
.notam-area-details .notam-area-head {
    padding: 0;
}
.notam-area-details .naa-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.notam-area-details .naa-title-row i {
    color: #c084fc;
    font-size: 1.1rem;
}
.notam-area-details .naa-title {
    margin: 0;
    font-size: 0.92rem;
    flex: 1;
}
.notam-area-details .naa-count {
    background: rgba(155, 89, 182, 0.22);
    color: #c084fc;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-mono);
}
.notam-area-details .naa-chevron {
    transition: transform 0.2s;
    color: var(--text-3);
    font-size: 0.95rem;
}
.notam-area-details[open] .naa-chevron {
    transform: rotate(180deg);
}
.notam-area-details .notam-area-body {
    padding: 8px 14px 12px;
    border-top: 1px solid var(--line);
    margin-top: 8px;
}

/* Cards de FIR NOTAM destacados — borde púrpura indica origen "Área" */
.notam-area-body .notam-card {
    border-left-width: 3px;
}
.notam-area-body .notam-card::after {
    content: "ÁREA";
    position: absolute;
    top: 6px; right: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #c084fc;
    background: rgba(155, 89, 182, 0.18);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    pointer-events: none;
}
.notams-banner {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-sm);
    padding: 14px;
}
.notams-banner.crit  { border-left-color: var(--sev-lifr); background: rgba(231,76,60,.08); }
.notams-banner.warn  { border-left-color: var(--sev-ifr);  background: rgba(245,176,65,.07); }
.notams-banner.ok    { border-left-color: var(--sev-vfr);  background: rgba(46,194,126,.06); }
.notams-banner-icon { font-size: 1.6rem; line-height: 1; }

.notams-counts { display: flex; gap: 4px; }
.notam-count-pill {
    font-family: var(--font-mono);
    font-size: .78rem; font-weight: 700;
    min-width: 28px; padding: 4px 8px;
    text-align: center;
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-3);
    border: 1px solid var(--line);
}
.notam-count-pill.sev-critical { background: rgba(231,76,60,.18);  color: var(--sev-lifr); border-color: rgba(231,76,60,.4); }
.notam-count-pill.sev-high     { background: rgba(245,176,65,.18); color: var(--sev-ifr);  border-color: rgba(245,176,65,.4); }
.notam-count-pill.sev-medium   { background: rgba(93,173,226,.15); color: var(--sev-mvfr); border-color: rgba(93,173,226,.35); }
.notam-count-pill.sev-low      { background: rgba(155,89,182,.12); color: var(--sev-info); border-color: rgba(155,89,182,.3); }

/* ============ NOTAMs POR COLUMNAS (AEROPUERTO) ============ */
/* DEP/DEST grandes (primary), ALTs estrechos (secondary).
   El grid se adapta automáticamente: primary toma 1.6fr, secondary 1fr.
   Esto hace que el ojo del piloto vaya directamente a salida/destino. */
.notam-cols {
    display: grid;
    grid-template-columns: 1.6fr 1.6fr;
    gap: 14px;
    margin-top: 8px;
    align-items: start;
}
/* Si hay 3 columnas (1 alt): dep dest grandes, alt estrecho */
.notam-cols:has(.notam-col-secondary:nth-of-type(3)) {
    grid-template-columns: 1.6fr 1.6fr 1fr;
}
/* Si hay 4 (2 alts): dep dest grandes, alts estrechos */
.notam-cols:has(.notam-col-secondary:nth-of-type(4)) {
    grid-template-columns: 1.6fr 1.6fr 1fr 1fr;
}
.notam-col-secondary {
    font-size: 0.9rem;
    opacity: 0.92;
}
.notam-col-secondary .notam-col-head {
    padding: 8px 10px;
}
.notam-col-secondary .notam-col-icao {
    font-size: 1.05rem;
}
.notam-col-secondary .notam-col-role {
    font-size: 0.6rem;
    letter-spacing: 0.05em;
}
.notam-col-secondary .notam-card {
    padding: 8px 10px;
    font-size: 0.84rem;
}
@media (max-width: 1100px) {
    .notam-cols,
    .notam-cols:has(.notam-col-secondary:nth-of-type(3)),
    .notam-cols:has(.notam-col-secondary:nth-of-type(4)) {
        grid-template-columns: 1fr 1fr !important;
    }
    .notam-col-secondary {
        grid-column: span 1;
    }
}
@media (max-width: 720px) {
    .notam-cols,
    .notam-cols:has(.notam-col-secondary:nth-of-type(3)),
    .notam-cols:has(.notam-col-secondary:nth-of-type(4)) {
        grid-template-columns: 1fr !important;
    }
}

.notam-col {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    display: flex; flex-direction: column;
    min-width: 0;
}

.notam-col-head {
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; gap: 10px;
}
.notam-col-icao {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
    letter-spacing: .04em;
}
.notam-col-role {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    background: var(--bg-card);
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    margin-left: auto;
    font-weight: 600;
}
.notam-col-empty {
    padding: 32px 14px;
    text-align: center;
    color: var(--text-3);
    font-size: .85rem;
    flex: 1;
    line-height: 1.5;
}
.notam-col-empty.ok { color: var(--sev-vfr); font-weight: 500; }

/* Sección de severidad dentro de columna */
.notam-sec {
    border-bottom: 1px solid var(--line-soft);
}
.notam-sec:last-child { border-bottom: 0; }

.notam-sec-head, .notam-sec > summary {
    padding: 8px 12px;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    user-select: none;
    background: var(--bg-2);
    list-style: none;
    transition: background .15s;
}
.notam-sec > summary::-webkit-details-marker { display: none; }
.notam-sec > summary::before {
    content: "▶";
    font-size: .55rem;
    color: var(--text-3);
    transition: transform .18s;
    margin-right: 2px;
    display: inline-block;
}
.notam-sec[open] > summary::before { transform: rotate(90deg); }
.notam-sec > summary:hover { background: var(--bg-3); }
.notam-sec-head { cursor: default; }

.notam-sec-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.notam-sec.sev-lifr .notam-sec-dot {
    background: var(--sev-lifr);
    box-shadow: 0 0 6px rgba(231,76,60,.45);
}
.notam-sec.sev-ifr .notam-sec-dot {
    background: var(--sev-ifr);
    box-shadow: 0 0 5px rgba(245,176,65,.4);
}
.notam-sec.sev-mvfr .notam-sec-dot { background: var(--sev-mvfr); }
.notam-sec.sev-info .notam-sec-dot { background: var(--text-3); }

.notam-sec-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--text-2);
    flex: 1;
}
.notam-sec.sev-lifr .notam-sec-label { color: var(--sev-lifr); }
.notam-sec.sev-ifr  .notam-sec-label { color: var(--sev-ifr); }

.notam-sec-count {
    font-family: var(--font-mono);
    font-size: .72rem; font-weight: 700;
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--text-2);
    border: 1px solid var(--line-soft);
    min-width: 22px;
    text-align: center;
}

/* Lista de tags dentro de cada sección */
.notam-tag-list {
    padding: 8px;
    display: flex; flex-direction: column;
    gap: 6px;
}

.notam-tag {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--text-3);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .15s, transform .15s cubic-bezier(0.32, 0.72, 0, 1), box-shadow .15s;
}
.notam-tag:hover { transform: translateX(1px); }
.notam-tag.sev-critical { border-left-color: var(--sev-lifr); background: linear-gradient(90deg, rgba(231,76,60,.06), var(--bg-card) 60%); }
.notam-tag.sev-critical:hover { box-shadow: 0 1px 6px rgba(231,76,60,.18); }
.notam-tag.sev-high     { border-left-color: var(--sev-ifr);  background: linear-gradient(90deg, rgba(245,176,65,.05), var(--bg-card) 60%); }
.notam-tag.sev-high:hover     { box-shadow: 0 1px 6px rgba(245,176,65,.16); }
.notam-tag.sev-medium   { border-left-color: var(--sev-mvfr); }
.notam-tag.sev-low      { border-left-color: var(--text-3); }
.notam-tag.sev-info     { border-left-color: var(--text-3); opacity: .9; }

.notam-tag-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 11px;
    cursor: pointer;
}
.notam-tag-title {
    flex: 1;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    word-break: break-word;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.notam-tag.sev-critical .notam-tag-title { color: var(--sev-lifr); }
.notam-tag.sev-high     .notam-tag-title { color: var(--sev-ifr); }
.notam-tag-count {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    background: var(--bg-3);
    padding: 1px 6px;
    border-radius: 8px;
    color: var(--text-3);
    flex-shrink: 0;
}
.notam-tag-arrow {
    color: var(--text-3);
    font-size: .8rem;
    transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1);
    flex-shrink: 0;
    width: 16px; height: 16px;
    display: grid; place-items: center;
}
.notam-tag.expanded .notam-tag-arrow {
    transform: rotate(180deg);
    color: var(--accent);
}

.notam-tag-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(0.32, 0.72, 0, 1);
}
.notam-tag.expanded .notam-tag-body {
    max-height: 600px;
    overflow-y: auto;
    border-top: 1px solid var(--line-soft);
}

.notam-tag-raw-card {
    padding: 8px 11px;
    border-bottom: 1px dashed var(--line-soft);
    background: var(--bg-3);
}
.notam-tag-raw-card:last-child { border-bottom: 0; }

.notam-tag-meta {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 5px;
    flex-wrap: wrap;
    font-size: .68rem;
}
.notam-tag-meta strong {
    font-family: var(--font-mono);
    color: var(--accent);
    background: var(--bg-card);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .72rem;
}
.notam-tag-qcode {
    font-family: var(--font-mono);
    color: var(--text-3);
    background: var(--bg-card);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--line-soft);
}
.notam-tag-validity {
    font-family: var(--font-mono);
    color: var(--text-3);
    margin-left: auto;
}

.notam-tag-pre {
    margin: 0;
    padding: 7px 9px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.5;
    color: var(--text-2);
    white-space: pre-wrap;
    max-height: 220px;
    overflow-y: auto;
}

/* ============ ESTILOS LEGACY (no usados, pero se mantienen por compatibilidad) ============ */
.notam-visual-section {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.notam-visual {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-left: 4px solid var(--text-3);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s cubic-bezier(0.32, 0.72, 0, 1);
}
.notam-visual.sev-critical { border-left-color: var(--sev-lifr); background: rgba(231,76,60,.06); }
.notam-visual.sev-high     { border-left-color: var(--sev-ifr);  background: rgba(245,176,65,.05); }
.notam-visual.sev-medium   { border-left-color: var(--sev-mvfr); }
.notam-visual.sev-low      { border-left-color: var(--sev-info); }
.notam-visual.sev-info     { border-left-color: var(--text-3); opacity: .85; }

.notam-visual-head {
    display: flex; align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s;
}
.notam-visual-head:hover {
    background: var(--bg-card);
}
.notam-visual-icao {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: .9rem;
    color: var(--text);
    background: var(--bg-card);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--line);
    flex-shrink: 0;
    letter-spacing: .04em;
}
.notam-visual-title {
    flex: 1;
    font-weight: 600;
    font-size: .98rem;
    color: var(--text);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.notam-visual.sev-critical .notam-visual-title { color: var(--sev-lifr); }
.notam-visual.sev-high     .notam-visual-title { color: var(--sev-ifr); }
.notam-visual-sub {
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--text-3);
    flex-shrink: 0;
    white-space: nowrap;
}
.notam-visual-toggle {
    color: var(--text-3);
    font-size: .9rem;
    transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1);
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: grid; place-items: center;
}
.notam-visual.expanded .notam-visual-toggle {
    transform: rotate(180deg);
    color: var(--accent);
}

.notam-visual-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(0.32, 0.72, 0, 1);
    border-top: 1px solid transparent;
}
.notam-visual.expanded .notam-visual-body {
    max-height: 800px;
    border-top-color: var(--line-soft);
    overflow-y: auto;
}

.notam-visual-raw-card {
    padding: 10px 14px;
    border-bottom: 1px dashed var(--line-soft);
    background: var(--bg-card);
}
.notam-visual-raw-card:last-child { border-bottom: 0; }
.notam-visual-raw-head {
    display: flex; align-items: center;
    gap: 10px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.notam-visual-raw-head strong {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--accent);
    background: var(--bg-3);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--line-soft);
}
.notam-validity-small {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-3);
}
pre.notam-visual-raw {
    margin: 0;
    padding: 8px 10px;
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: .76rem;
    line-height: 1.45;
    white-space: pre-wrap;
    color: var(--text-2);
    max-height: 220px;
    overflow-y: auto;
}

/* ============ VISTA DETALLADA POR SEVERIDAD (colapsable) ============ */
.notam-detailed-wrap {
    margin-top: 14px;
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.notam-detailed-wrap > summary {
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    color: var(--text-2);
    background: var(--bg-2);
    border-bottom: 1px solid transparent;
    display: flex; align-items: center; gap: 10px;
    transition: background .15s;
}
.notam-detailed-wrap > summary::-webkit-details-marker { display: none; }
.notam-detailed-wrap > summary::before {
    content: "▶";
    font-size: .65rem;
    color: var(--text-3);
    transition: transform .18s;
    display: inline-block;
}
.notam-detailed-wrap[open] > summary::before { transform: rotate(90deg); }
.notam-detailed-wrap[open] > summary { border-bottom-color: var(--line-soft); }
.notam-detailed-wrap > summary:hover { background: var(--bg-3); color: var(--text); }
.notam-detailed-summary-text { font-weight: 600; flex: 1; }
.notam-detailed-content {
    padding: 12px;
    display: flex; flex-direction: column;
    gap: 10px;
}

/* Bloques por severidad */
.notam-sev-block { display: flex; flex-direction: column; gap: 8px; }
.notam-sev-title {
    margin: 8px 0 0;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: var(--r-sm);
}
.notam-sev-block.sev-critical .notam-sev-title { background: rgba(231,76,60,.15);  color: var(--sev-lifr); }
.notam-sev-block.sev-high     .notam-sev-title { background: rgba(245,176,65,.15); color: var(--sev-ifr); }

.notam-collapsible {
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.notam-collapsible > summary {
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    color: var(--text-2);
    background: var(--bg-2);
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; gap: 10px;
}
.notam-collapsible > summary::-webkit-details-marker { display: none; }
.notam-collapsible > summary::before {
    content: "▶";
    font-size: .65rem;
    color: var(--text-3);
    transition: transform .18s;
}
.notam-collapsible[open] > summary::before { transform: rotate(90deg); }
.notam-collapsible .lvl {
    font-size: .72rem; font-weight: 700;
    padding: 3px 8px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: .06em;
}
.notam-collapsible .lvl.sev-medium { background: rgba(93,173,226,.18); color: var(--sev-mvfr); }
.notam-collapsible .lvl.sev-low    { background: rgba(155,89,182,.15); color: var(--sev-info); }
.notam-collapsible .lvl.sev-info   { background: var(--bg-card); color: var(--text-2); }
.notam-collapsible > .notam-card { margin: 6px 10px; }

/* Tarjeta de NOTAM individual */
.notam-card {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-left: 4px solid var(--text-3);
    border-radius: var(--r-sm);
    padding: 12px 14px;
}
.notam-card.sev-critical { border-left-color: var(--sev-lifr); background: rgba(231,76,60,.05); }
.notam-card.sev-high     { border-left-color: var(--sev-ifr);  background: rgba(245,176,65,.04); }
.notam-card.sev-medium   { border-left-color: var(--sev-mvfr); }
.notam-card.sev-low      { border-left-color: var(--sev-info); }

.notam-card-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.notam-card-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notam-card .notam-icao {
    font-family: var(--font-mono);
    font-size: .92rem;
    font-weight: 700;
    color: var(--text);
}
.notam-card .notam-num {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--text-2);
    background: var(--bg-card);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--line-soft);
}
.notam-qcode {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--accent);
    background: rgba(247,183,51,.1);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid rgba(247,183,51,.3);
}
.notam-validity {
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--text-3);
    white-space: nowrap;
}
.notam-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 6px 0;
}
.notam-tag {
    font-size: .76rem;
    padding: 3px 9px;
    border-radius: 11px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    color: var(--text);
    font-weight: 500;
}
.notam-card.sev-critical .notam-tag { background: rgba(231,76,60,.15); color: var(--sev-lifr); border-color: rgba(231,76,60,.35); }
.notam-card.sev-high .notam-tag { background: rgba(245,176,65,.13); color: var(--sev-ifr); border-color: rgba(245,176,65,.32); }

.notam-raw {
    margin: 8px 0 0;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: .78rem;
    overflow-x: auto;
    white-space: pre-wrap;
    color: var(--text-2);
    max-height: 240px;
    overflow-y: auto;
}
.notam-raw-collapsed summary { font-size: .8rem; color: var(--text-3); cursor: pointer; padding: 4px 0; margin-top: 4px; }
.notam-raw-collapsed pre {
    margin: 6px 0 0; padding: 10px;
    background: var(--bg-card); border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font-family: var(--font-mono); font-size: .78rem;
    white-space: pre-wrap;
}

/* Errores y portales fallback */
.notam-errors {
    background: var(--bg-3);
    border: 1px solid var(--sev-ifr);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    color: var(--sev-ifr);
    font-size: .85rem;
}

.notam-portals-collapsible {
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.notam-portals-collapsible > summary {
    padding: 10px 14px;
    cursor: pointer; user-select: none;
    color: var(--text-2);
    background: var(--bg-2);
    list-style: none;
    border-bottom: 1px solid var(--line-soft);
}
.notam-portals-collapsible > summary::-webkit-details-marker { display: none; }
.notam-portals-collapsible > summary::before { content: "▶"; font-size: .65rem; color: var(--text-3); margin-right: 8px; transition: transform .18s; display: inline-block; }
.notam-portals-collapsible[open] > summary::before { transform: rotate(90deg); }

.notam-portals-grid {
    padding: 10px 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.notam-portal {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    color: var(--text);
    text-decoration: none;
    transition: all .18s;
}
.notam-portal:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.notam-portal .cc {
    font-family: var(--font-mono);
    font-weight: 700;
    background: var(--bg-3);
    color: var(--accent);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: .82rem;
}
.notam-portal .name { flex: 1; font-size: .88rem; }
.notam-portal .arrow { color: var(--text-3); font-size: 1.1rem; }

/* ====================== MAPA ====================== */
.map-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 12px;
    align-items: stretch;
}
@media (max-width: 1100px) {
    .map-layout { grid-template-columns: 1fr 260px; }
}
@media (max-width: 880px) {
    .map-layout { grid-template-columns: 1fr; }
}
.map-main {
    display: flex; flex-direction: column;
    min-width: 0;
}
.route-map {
    height: 540px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--bg-3);
    z-index: 1;
}
@media (max-width: 880px) {
    .route-map { height: 420px; }
}
.route-map .leaflet-tile-pane { filter: var(--map-tile); }

.map-sidebar {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0;
    display: flex; flex-direction: column;
    max-height: 540px;
    overflow: hidden;
}
#map-sidebar-content {
    padding: 14px;
    display: flex; flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    flex: 1;
}

/* ====================== SUB-TABS DEL MAPA (Ruta/Salida/Destino) ====================== */
.map-subtabs {
    position: relative;
    display: flex;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line);
    padding: 4px;
    gap: 2px;
    flex-shrink: 0;
}
.map-subtab {
    position: relative;
    z-index: 1;
    flex: 1;
    background: transparent;
    border: 0;
    padding: 8px 6px;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    border-radius: 6px;
    display: flex; flex-direction: column; align-items: center;
    gap: 3px;
    transition: color .25s ease;
    letter-spacing: .02em;
}
.map-subtab svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    transition: stroke .25s ease;
}
.map-subtab:hover { color: var(--text-2); }
.map-subtab.active { color: var(--accent); }
.map-subtab-indicator {
    position: absolute;
    top: 4px;
    left: 0;
    height: calc(100% - 8px);
    width: 0;
    background: var(--bg-3);
    border-radius: 6px;
    transition: transform .35s cubic-bezier(.25,.9,.3,1.1), width .35s cubic-bezier(.25,.9,.3,1.1);
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    z-index: 0;
}

/* Barra de info del aeródromo (sobre el mapa, visible solo en Salida/Destino) */
.airport-info-bar {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: .82rem;
}
.airport-info-bar.hidden { display: none; }
.airport-info-line {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.airport-info-line strong {
    font-family: var(--font-mono);
    color: var(--accent);
    letter-spacing: .04em;
}
.airport-loading {
    color: var(--text-3);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.airport-warn { color: var(--sev-mvfr); }

/* Spinner aeronáutico (línea de pista que gira) */
.airport-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: airportSpin .9s linear infinite;
    flex-shrink: 0;
}
.airport-spinner.big {
    width: 26px; height: 26px;
    border-width: 3px;
    margin: 8px auto 6px;
}
@keyframes airportSpin {
    to { transform: rotate(360deg); }
}

/* Chip de fuente de datos en la barra superior */
.airport-source-chip {
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(46,194,126,.12);
    color: var(--sev-vfr);
    border: 1px solid rgba(46,194,126,.3);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.airport-source-chip.warn {
    background: rgba(212,167,60,.15);
    color: #d4a73c;
    border-color: rgba(212,167,60,.4);
    text-transform: none;
}

/* Botón de recarga ↻ */
.airport-reload {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
    width: 24px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .25s ease, background .2s ease;
    margin-left: 4px;
    flex-shrink: 0;
}
.airport-reload:hover {
    background: var(--bg-card);
    color: var(--accent);
    transform: rotate(180deg);
}

/* Banner de aviso fallback OurAirports */
.map-fallback-banner {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px;
    background: rgba(212,167,60,.12);
    border: 1px solid rgba(212,167,60,.4);
    border-radius: 4px;
    font-size: .76rem;
    color: var(--text-2);
    line-height: 1.4;
}
.mfb-icon {
    color: #d4a73c;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Estado de carga en la sidebar */
.map-side-loading {
    text-align: center;
    padding: 16px 8px;
}
.map-side-loading .muted { display: block; }
.airport-counts {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--text-2);
}

/* Fondo del mapa cuando muestra una carta de aeródromo (sin tiles OSM) */
.route-map.airport-chart-bg-night { background: #1a2028; }
.route-map.airport-chart-bg-day { background: #f0e8d8; }
.route-map.airport-chart-bg-mfd { background: #000000; }
.route-map.airport-chart-bg-satellite { background: #1a1a1a; }

/* En modo MFD los tiles OSM no se aplican; pero por si quedan: invertir filtro */
.route-map.airport-chart-bg-mfd .leaflet-tile-pane { display: none; }

/* Switcher de estilo de carta en la barra superior */
.chart-style-switcher {
    display: inline-flex;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    overflow: hidden;
    margin-left: auto;
}
.css-btn {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line-soft);
    padding: 3px 9px;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-3);
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .15s ease, color .15s ease;
}
.css-btn:last-child { border-right: 0; }
.css-btn:hover { background: var(--bg-3); color: var(--text-2); }
.css-btn.active {
    background: var(--accent);
    color: var(--bg);
}
/* Cuando el modo activo es MFD, el botón activo se pinta como una MFD */
.css-btn.active[data-style="mfd"] {
    background: #00d4d4;
    color: #000;
}
.css-btn.active[data-style="satellite"] {
    background: #5a7c40;
    color: #fff;
}

/* Etiquetas de pistas y calles de rodaje (carta tipo Jeppesen) */
.rwy-label-wrap, .twy-label-wrap {
    background: transparent !important;
    border: 0 !important;
}
.rwy-label {
    background: #0c1014;
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-align: center;
    letter-spacing: .04em;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.15);
}
.theme-day .rwy-label {
    background: #2a2a2a;
    color: #ffffff;
    border-color: rgba(0,0,0,.2);
}
.twy-label {
    background: rgba(15,20,25,.85);
    color: #d4a73c;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid rgba(212,167,60,.35);
}
.theme-day .twy-label {
    background: rgba(255,255,255,.92);
    color: #5a4810;
    border-color: rgba(184,133,29,.4);
}
/* Labels en modo MFD Cabina */
.route-map.airport-chart-bg-mfd .rwy-label {
    background: #003640;
    color: #00ff88;
    border-color: rgba(0,255,136,.5);
    text-shadow: 0 0 4px rgba(0,255,136,.4);
}
.route-map.airport-chart-bg-mfd .twy-label {
    background: rgba(0,30,40,.9);
    color: #ffaa00;
    border-color: rgba(255,170,0,.5);
    text-shadow: 0 0 3px rgba(255,170,0,.35);
}
/* Labels en modo Satélite — más contraste contra foto aérea */
.route-map.airport-chart-bg-satellite .rwy-label {
    background: #0c1014;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.route-map.airport-chart-bg-satellite .twy-label {
    background: rgba(0,0,0,.85);
    color: #ffd000;
    border: 1px solid rgba(255,208,0,.6);
    box-shadow: 0 1px 3px rgba(0,0,0,.7);
}
/* ====================== ANÁLISIS DE PISTAS / VIENTO / FREQS ====================== */
.map-wind-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: rgba(125,184,255,.10);
    border: 1px solid rgba(125,184,255,.35);
    border-radius: 4px;
}
.map-wind-banner .lbl {
    font-size: .68rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.map-wind-banner .val {
    font-family: var(--font-mono);
    font-size: .9rem;
    font-weight: 700;
    color: var(--accent);
}
.map-rwy-list {
    display: flex; flex-direction: column; gap: 8px;
}
.map-rwy-card {
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    background: var(--bg-card);
    overflow: hidden;
}
.map-rwy-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 8px;
    background: var(--bg-3);
    border-bottom: 1px solid var(--line-soft);
}
.map-rwy-ident {
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .04em;
}
.map-rwy-meta {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--text-3);
}
.map-rwy-end {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    flex-wrap: wrap;
}
.map-rwy-end:last-child { border-bottom: 0; }
.map-rwy-num {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    color: var(--text);
    background: var(--bg-3);
    padding: 1px 6px;
    border-radius: 3px;
    min-width: 36px;
    text-align: center;
}
.map-rwy-comp {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid;
}
.map-rwy-comp.ok {
    background: rgba(46,194,126,.12);
    color: var(--sev-vfr);
    border-color: rgba(46,194,126,.3);
}
.map-rwy-comp.neutral {
    background: rgba(125,184,255,.10);
    color: var(--text-2);
    border-color: var(--line-soft);
}
.map-rwy-comp.caution {
    background: rgba(212,167,60,.14);
    color: #d4a73c;
    border-color: rgba(212,167,60,.4);
}
.map-rwy-comp.warn {
    background: rgba(192,57,43,.18);
    color: #e8786a;
    border-color: rgba(192,57,43,.45);
}
.map-rwy-ils {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(125,184,255,.12);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid rgba(125,184,255,.35);
    letter-spacing: .03em;
}

/* Frecuencias */
.map-freq-source {
    margin-top: 10px;
    padding: 7px 10px;
    background: rgba(34, 211, 197, 0.06);
    border: 1px solid rgba(34, 211, 197, 0.15);
    border-radius: 6px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-3);
    display: flex; align-items: flex-start; gap: 6px;
}
.map-freq-source i.ti { color: #22D3C5; font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.map-freq-list {
    display: flex; flex-direction: column; gap: 6px;
}
.map-freq-group {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--line-soft);
}
.map-freq-group:last-child { border-bottom: 0; }
.map-freq-type {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-2);
    background: var(--bg-card);
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid var(--line-soft);
    min-width: 70px;
    text-align: center;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.map-freq-type.sev-tower, .map-freq-type.sev-twr {
    background: rgba(46,194,126,.12);
    color: var(--sev-vfr);
    border-color: rgba(46,194,126,.3);
}
.map-freq-type.sev-app, .map-freq-type.sev-dep {
    background: rgba(125,184,255,.12);
    color: var(--accent);
    border-color: rgba(125,184,255,.3);
}
.map-freq-type.sev-atis {
    background: rgba(212,167,60,.12);
    color: #d4a73c;
    border-color: rgba(212,167,60,.3);
}
.map-freq-items {
    flex: 1;
    display: flex; flex-direction: column; gap: 2px;
}
.map-freq-row {
    display: flex; align-items: baseline; gap: 8px;
    font-size: .8rem;
}
.map-freq-freq {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text);
    min-width: 56px;
}
.map-freq-desc {
    font-size: .72rem;
    color: var(--text-3);
    flex: 1;
}

/* Path SVG con NOTAM activo: cursor + sutil pulse */
.leaflet-pane path.airport-affected {
    cursor: pointer;
    transition: filter .2s ease;
}
.leaflet-pane path.airport-affected:hover {
    filter: brightness(1.3) drop-shadow(0 0 4px rgba(255,255,255,.4));
}
.leaflet-pane path.airport-affected.sev-red {
    animation: airportAffectedPulse 2.4s ease-in-out infinite;
}
@keyframes airportAffectedPulse {
    0%, 100% { stroke-opacity: .92; }
    50% { stroke-opacity: 1; filter: drop-shadow(0 0 5px rgba(192,57,43,.6)); }
}

/* Etiquetas con NOTAM activo */
.twy-label--affected.sev-red {
    background: #c0392b;
    color: #ffffff;
    border-color: rgba(255,255,255,.4);
    box-shadow: 0 0 6px rgba(192,57,43,.7);
}
.twy-label--affected.sev-amber {
    background: #d4a73c;
    color: #1a1208;
    border-color: rgba(0,0,0,.25);
    box-shadow: 0 0 6px rgba(212,167,60,.6);
}
.twy-label--affected.sev-partial {
    background: #e8771a;
    color: #1a1208;
    border-color: rgba(0,0,0,.25);
    box-shadow: 0 0 6px rgba(232,119,26,.6);
}
.rwy-label--affected.sev-red {
    background: #c0392b;
    color: #ffffff;
    border-color: rgba(255,255,255,.5);
    box-shadow: 0 0 8px rgba(192,57,43,.8);
}
.rwy-label--affected.sev-amber {
    background: #b8851d;
    color: #1a1208;
    border-color: rgba(255,255,255,.4);
    box-shadow: 0 0 8px rgba(184,133,29,.7);
}

/* Pill resumen NOTAM en barra superior */
.airport-notam-pill {
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(192,57,43,.18);
    color: #e8786a;
    border: 1px solid rgba(192,57,43,.4);
    letter-spacing: .02em;
}
.airport-notam-pill.clean {
    background: rgba(46,194,126,.15);
    color: var(--sev-vfr);
    border-color: rgba(46,194,126,.3);
}

/* Stand/gate cerrados sin geometría OSM — chip discreto en infoBar */
.airport-stands-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255,170,0,.15);
    color: #d4a73c;
    border: 1px solid rgba(255,170,0,.4);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: help;
}
.airport-stands-chip strong {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}
.airport-stands-chip strong.sev-red {
    background: rgba(192,57,43,.25);
    color: #e8786a;
}
.airport-stands-chip strong.sev-amber {
    background: rgba(212,167,60,.25);
    color: #e5c46a;
}

/* Marker de stand/gate afectado sobre el mapa */
.leaflet-pane path.stand-marker {
    cursor: pointer;
    transition: r 0.15s ease;
}
.leaflet-pane path.stand-marker:hover {
    r: 9;
}
.leaflet-pane path.stand-marker.sev-red {
    filter: drop-shadow(0 0 4px rgba(192,57,43,0.55));
}
.leaflet-pane path.stand-marker.sev-amber {
    filter: drop-shadow(0 0 4px rgba(212,167,60,0.55));
}

/* ====================== WIND IMPACT CARD ====================== */
.wind-impact { padding: 0 0 16px; }
/* Banner explicativo cuando no hay datos GFS: misma fila que las cards,
   estilo info discreto para que el piloto sepa por qué hay "—" en los huecos */
.wi-nowind-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    color: color-mix(in srgb, var(--accent) 80%, var(--text-1));
    border-radius: var(--r-sm);
    font-size: 0.82rem;
}
.wi-nowind-banner svg { flex-shrink: 0; margin-top: 2px; }
.wi-nowind-text { display: flex; flex-direction: column; gap: 2px; }
.wi-nowind-main { font-weight: 500; }
.wi-nowind-diag {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 0.74rem;
    opacity: 0.85;
    word-break: break-word;
}
/* Badge informativo cuando GFS cayó y se usó ECMWF/ICON como backup.
   No es un error, es información — color neutro azul/info, no naranja alerta. */
.wi-model-banner {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    margin-bottom: 10px;
    border: 1px solid var(--line-soft);
    background: var(--bg-3);
    color: var(--text-2);
    border-radius: var(--r-sm);
    font-size: 0.78rem;
    font-weight: 500;
}
.wi-model-banner svg { flex-shrink: 0; opacity: 0.7; }
.wi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 700px) {
    .wi-grid { grid-template-columns: 1fr; }
}
.wi-card {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-left: 4px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px 14px;
}
.wi-card.ok      { border-left-color: var(--sev-vfr); }
.wi-card.warn    { border-left-color: #c0392b; }
.wi-card.neutral { border-left-color: var(--text-3); }
.wi-card-label {
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.wi-card-num {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin: 4px 0 2px;
    letter-spacing: -0.01em;
}
.wi-card.ok .wi-card-num { color: var(--sev-vfr); }
.wi-card.warn .wi-card-num { color: #e8786a; }
.wi-card-sub {
    font-size: .72rem;
    color: var(--text-3);
    line-height: 1.4;
}

/* ====================== WIND CROSS-SECTION ====================== */
.wind-cross {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
}
.wc-title {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
}
.wc-svg {
    width: 100%; height: auto;
    display: block;
    background: var(--bg-3);
    border-radius: 4px;
}
.wind-cross code {
    font-family: var(--font-mono);
    background: var(--bg-3);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: .85em;
}

/* ====== Wind tab v2: vertical wind profile grid (handoff design) ====== */
.wind-cross .wpv-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.wind-cross .wpv-title {
    font-family: var(--font-ui, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.wind-cross .wpv-sub {
    font-size: .82rem;
    color: var(--text-2, #7a8593);
    margin-top: 2px;
}
.wind-cross .wpv-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.wind-cross .wpv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--bg-3, #f1f3f6);
    color: var(--text-2, #586572);
    border: 1px solid var(--line-soft, #e2e6eb);
    white-space: nowrap;
}
.wind-cross .wpv-badge strong {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 700;
    color: var(--text, #1a1a1a);
    letter-spacing: 0.02em;
}
.wind-cross .wpv-badge .wpv-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #0C8577;
    box-shadow: 0 0 0 2px rgba(12,133,119,0.18);
}

/* Grid: una fila por FL, cada fila contiene FL-label + N celdas */
.wind-cross .wpv-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wind-cross .wpv-row {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wind-cross .wpv-row:hover:not(.sel) {
    background: rgba(12,133,119,0.04);
    border-color: rgba(12,133,119,0.18);
}
.wind-cross .wpv-row.sel {
    border-color: #0C8577;
    background: rgba(12,133,119,0.05);
    box-shadow: 0 1px 8px rgba(12,133,119,0.12);
}
.wind-cross .wpv-row:focus-visible {
    outline: none;
    border-color: #0C8577;
}

/* FL label en eje Y — stack vertical (FL arriba, PLAN abajo) */
.wind-cross .wpv-fl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 4px 2px 6px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-2, #6b7585);
    line-height: 1.05;
}
.wind-cross .wpv-fl-top {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.wind-cross .wpv-row.sel .wpv-fl { color: #0C8577; }
.wind-cross .wpv-plane {
    color: #0C8577;
    transform: rotate(-45deg);
    transform-origin: center;
    flex-shrink: 0;
}
.wind-cross .wpv-fl-num { letter-spacing: 0.02em; }
.wind-cross .wpv-fl-tag {
    font-family: var(--font-ui, inherit);
    font-size: .55rem;
    font-weight: 800;
    color: #0C8577;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin: 0;
    line-height: 1;
}

/* Celdas: una "tarjeta" pintada por viento */
.wind-cross .wpv-row > *:not(.wpv-fl) {
    /* contenedor flex de las celdas a la derecha */
}
.wind-cross .wpv-row {
    /* Re-defino: 78px para FL + el resto en grid auto para celdas */
}
.wind-cross .wpv-cell {
    position: relative;
    border-radius: 9px;
    padding: 7px 9px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* Ajuste: el grid de cada fila tiene 78px + un sub-grid de N columnas */
.wind-cross .wpv-row {
    grid-template-columns: 78px repeat(var(--n, 7), 1fr);
}
/* Si CSS var no se setea, fallback con auto-fit */
@supports not (grid-template-columns: repeat(var(--n), 1fr)) {
    .wind-cross .wpv-row {
        grid-template-columns: 78px repeat(7, 1fr);
    }
}
.wind-cross .wpv-row.sel .wpv-cell {
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.wind-cross .wpv-cell.wpv-empty {
    background: var(--bg-3, #f1f3f6);
    opacity: 0.35;
    cursor: default;
}
.wind-cross .wpv-cell-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.wind-cross .wpv-cell-ds {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}
.wind-cross .wpv-cell-arrow {
    flex-shrink: 0;
    opacity: 0.7;
}
.wind-cross .wpv-cell-head {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
}
.wind-cross .wpv-cell.max {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
}
.wind-cross .wpv-cell-max {
    position: absolute;
    bottom: 3px;
    right: 6px;
    font-family: var(--font-ui, inherit);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

/* Eje X con labels DEP/DEST */
.wind-cross .wpv-xaxis {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 6px;
    margin-top: 10px;
    padding: 0 4px;
}
.wind-cross .wpv-xaxis-pad { /* placeholder col FL */ }
.wind-cross .wpv-xaxis-cells {
    display: grid;
    grid-template-columns: repeat(var(--n, 7), 1fr);
    gap: 6px;
}
.wind-cross .wpv-x-tick {
    text-align: center;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .72rem;
    color: var(--text-3, #9aa3b0);
    padding-top: 4px;
    border-top: 1px solid var(--line-soft, #e2e6eb);
}
.wind-cross .wpv-x-tick strong {
    color: var(--text, #1a1a1a);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Footer: leyenda + alerta de jet stream */
.wind-cross .wpv-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft, #e2e6eb);
}
.wind-cross .wpv-legend {
    display: flex;
    gap: 20px;
    align-items: center;
}
.wind-cross .wpv-legend-block {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wind-cross .wpv-legend-bar {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--line-soft, #e2e6eb);
}
.wind-cross .wpv-legend-bar > span {
    width: 18px;
    height: 14px;
    display: inline-block;
}
.wind-cross .wpv-legend-labels {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.15;
}
.wind-cross .wpv-legend-labels strong {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text, #1a1a1a);
}
.wind-cross .wpv-legend-labels .muted {
    font-size: .68rem;
    color: var(--text-3, #9aa3b0);
}
.wind-cross .wpv-legend-vals {
    display: flex;
    gap: 4px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .66rem;
    color: var(--text-3, #9aa3b0);
}
.wind-cross .wpv-legend-vals span {
    width: 18px;
    text-align: center;
}
.wind-cross .wpv-jet-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: var(--text-2, #586572);
    max-width: 52%;
    text-align: right;
    line-height: 1.35;
}
.wind-cross .wpv-jet-alert svg {
    color: #0C8577;
    flex-shrink: 0;
}
.wind-cross .wpv-jet-alert strong {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--text, #1a1a1a);
    font-weight: 700;
}

/* Tema oscuro: invertir colores de las celdas-cards que no usan el bg dinámico */
.theme-night .wind-cross .wpv-fl { color: #c5cdd9; }
.theme-night .wind-cross .wpv-row.sel .wpv-fl { color: #22D3C5; }
.theme-night .wind-cross .wpv-x-tick { color: #7a8593; border-top-color: #2a3441; }
.theme-night .wind-cross .wpv-x-tick strong { color: #e5ebf3; }
.theme-night .wind-cross .wpv-footer { border-top-color: #2a3441; }
.theme-night .wind-cross .wpv-legend-labels strong,
.theme-night .wind-cross .wpv-jet-alert strong { color: #e5ebf3; }

/* Responsive: en pantallas pequeñas las celdas mantienen tamaño legible */
@media (max-width: 1100px) {
    .wind-cross .wpv-cell { padding: 6px 7px; min-height: 40px; }
    .wind-cross .wpv-cell-ds { font-size: .82rem; }
    .wind-cross .wpv-cell-head { font-size: .68rem; }
    .wind-cross .wpv-fl { padding: 0 2px 0 6px; font-size: .78rem; }
    .wind-cross .wpv-fl-tag { display: none; }
    .wind-cross .wpv-row { grid-template-columns: 62px repeat(var(--n, 7), 1fr); }
    .wind-cross .wpv-xaxis { grid-template-columns: 62px 1fr; }
}

/* ====================== WIND MAP CON BARBS ====================== */
.wind-map {
    height: 420px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--bg-3);
    margin: 0 0 14px;
    z-index: 1;
}
@media (max-width: 880px) {
    .wind-map { height: 340px; }
}
.wind-map .leaflet-tile-pane { filter: var(--map-tile); }

.wind-barb-wrap { background: transparent !important; border: 0 !important; }
.wind-barb {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 44px; height: 56px;
    pointer-events: auto;
}
.wind-barb svg {
    width: 38px; height: 38px;
    overflow: visible;
}
.wind-barb-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    margin-top: -2px;
    padding: 1px 4px;
    background: rgba(15,20,25,.85);
    color: #fff;
    border-radius: 3px;
    letter-spacing: .04em;
}
.theme-day .wind-barb-label {
    background: rgba(255,255,255,.92);
    color: #1c252e;
    border: 1px solid rgba(0,0,0,.15);
}

/* ====================== BRIEFING DIFF ====================== */
.diff-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 18px 0;
    padding: 12px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-left-style: solid;
    font-size: .88rem;
    transition: background-color 0.2s ease;
}
.diff-banner.hidden { display: none; }
.diff-banner.ok {
    background: var(--sev-vfr-soft);
    border-left-color: var(--sev-vfr);
}
.diff-banner.warn {
    background: var(--accent-soft);
    border-left-color: var(--accent);
}
.diff-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}
.diff-banner.ok .diff-icon { color: var(--sev-vfr); }
.diff-banner.warn .diff-icon { color: var(--accent); }
.diff-text {
    display: flex; flex-direction: column;
    gap: 2px;
    flex: 1;
}
.diff-text strong { color: var(--text); }
.diff-text > strong { font-weight: 600; }
.diff-cta {
    background: var(--accent);
    color: var(--bg);
    border: 0;
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: .82rem;
    flex-shrink: 0;
}
.diff-cta:hover { opacity: .9; }

/* Diff modal */
.diff-dialog { max-width: 640px; }
.diff-section { margin-bottom: 16px; }
.diff-section-title {
    margin: 0 0 8px;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
    font-weight: 700;
}
.diff-item {
    display: flex; align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 5px;
    background: var(--bg-3);
    border-left: 3px solid var(--line);
    border-radius: 3px;
    font-size: .85rem;
    line-height: 1.5;
}
.diff-item.added   { border-left-color: var(--sev-vfr); }
.diff-item.removed { border-left-color: var(--text-3); opacity: .9; }
.diff-item.changed { border-left-color: #d4a73c; }
.di-tag {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 7px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: 3px;
    color: var(--text-2);
    flex-shrink: 0;
    letter-spacing: .04em;
}
.diff-item.added .di-tag {
    color: var(--sev-vfr);
    background: rgba(46,194,126,.12);
    border-color: rgba(46,194,126,.35);
}
.diff-item.removed .di-tag {
    color: var(--text-3);
}
.diff-item.changed .di-tag {
    color: #d4a73c;
    background: rgba(212,167,60,.12);
    border-color: rgba(212,167,60,.35);
}
.di-text { color: var(--text); flex: 1; word-break: break-word; }
.di-text strong { color: var(--accent); font-weight: 600; }

/* ====================== REPORTS PANE (SIGMET + PIREP fusionados) ====================== */
.reports-pane {
    display: flex; flex-direction: column;
    gap: 24px;
    padding: 16px;
}
.reports-section {
    display: flex; flex-direction: column;
    gap: 8px;
}
.reports-title {
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
}

/* ====================== RISK MANAGEMENT ====================== */
.risk-panel {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ====== Risk v2: Hero con dual-arc gauge ====== */
.risk-hero-v2 {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(280px, 1fr) minmax(140px, 180px);
    gap: 18px;
    align-items: center;
    padding: 0 16px 6px;   /* arriba sin padding: el gauge sube todo lo posible */
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
}
@media (max-width: 980px) {
    .risk-hero-v2 {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 6px 14px;
    }
}
.risk-hero-v2.sev-red    { border-left: 4px solid #ef4444; }
.risk-hero-v2.sev-amber  { border-left: 4px solid #f59e0b; }
.risk-hero-v2.sev-green  { border-left: 4px solid #22c55e; }

.risk-hero-gauge-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;  /* anclado arriba para subirlo todo lo posible */
    margin: 0;
}

.risk-arc-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 220px;
    gap: 0;
    /* El gauge se desplaza hacia arriba para que los arcos casi toquen
       el borde superior del card y el score quede tucked dentro de la
       semicircunferencia (como un sombrero sobre el número). */
    margin-top: -6px;
}
.risk-arc-svg {
    width: 100%;
    height: auto;
    display: block;
}
.risk-arc-svg .rag-track {
    stroke: color-mix(in srgb, var(--text-3) 16%, transparent);
}
.theme-night .risk-arc-svg .rag-track {
    stroke: rgba(255,255,255,0.07);
}
/* El stroke-dashoffset NO debe llevar transition CSS: la animación se
   maneja desde JS frame a frame con requestAnimationFrame. Si añadimos
   transition, cada frame entra en transición y compite con la siguiente
   actualización → animación entrecortada o "estática" en algunos casos. */
.risk-arc-svg .rag-arc {
    transition: none;
}
/* Bloque debajo del SVG con número + level + sub. Margenes mínimos para
   que el card resulte fino sin tocar el score (3 rem).
   margin-top muy negativo: el número se sube hasta tucarse DENTRO de la
   semicircunferencia del gauge — los arcos parecen un "sombrero" sobre
   el número. Esto recorta drásticamente la altura visible del card. */
.rag-bottom {
    text-align: center;
    width: 100%;
    margin-top: -38px;
    line-height: 1;
}
.rag-score-num {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
}
.risk-arc-gauge.sev-red   .rag-score-num { color: #ef4444; }
.risk-arc-gauge.sev-amber .rag-score-num { color: #f97316; }
.risk-arc-gauge.sev-green .rag-score-num { color: #22c55e; }
.rag-level {
    font-family: var(--font-ui, inherit);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin-top: 4px;
}
.rag-level.sev-red   { color: #ef4444; }
.rag-level.sev-amber { color: #f97316; }
.rag-level.sev-green { color: #22c55e; }
.rag-sub {
    font-size: .66rem;
    margin-top: 2px;
    line-height: 1.25;
    color: var(--text-2);
}

/* Bloque info central del hero */
.risk-hero-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.risk-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.risk-hero-pill.sev-red    { background: rgba(239,68,68,.14);  color: #ef4444; border: 1px solid rgba(239,68,68,.35); }
.risk-hero-pill.sev-amber  { background: rgba(245,158,11,.14); color: #f97316; border: 1px solid rgba(245,158,11,.35); }
.risk-hero-pill.sev-green  { background: rgba(34,197,94,.14);  color: #22c55e; border: 1px solid rgba(34,197,94,.35); }
.rhp-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}
.risk-hero-desc {
    font-size: .9rem;
    line-height: 1.45;
    color: var(--text);
}
.risk-hero-actions {
    display: flex; gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* Bloque ruta a la derecha del hero */
.risk-hero-route {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rhr-route {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
}
.rhr-meta {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .78rem;
    color: var(--text-2);
}

/* ====== Cards: Human Factor + Flight Complexity ====== */
.risk-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 760px) {
    .risk-grid-v2 { grid-template-columns: 1fr; }
}
.risk-card-v2 {
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.risk-card-head-v2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.risk-card-title-v2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.risk-card-sub-v2 {
    margin-top: 2px;
    font-size: .78rem;
}
.risk-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.risk-card-pill.sev-red    { background: rgba(239,68,68,.14);  color: #ef4444; border: 1px solid rgba(239,68,68,.35); }
.risk-card-pill.sev-amber  { background: rgba(245,158,11,.14); color: #f97316; border: 1px solid rgba(245,158,11,.35); }
.risk-card-pill.sev-green  { background: rgba(34,197,94,.14);  color: #22c55e; border: 1px solid rgba(34,197,94,.35); }
.rcp-dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.risk-card-score-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.rcs-num {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.02em;
}
.rcs-out {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .9rem;
}
.risk-card-bar {
    height: 8px;
    background: color-mix(in srgb, var(--text-3) 14%, transparent);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 2px;
    position: relative;
}
.theme-night .risk-card-bar { background: rgba(255,255,255,0.06); }
/* IMPORTANTE: el gradiente se ANCLA al ancho total del track (100%) para
   que cada color esté en su posición absoluta de la escala 0-100. El fill
   no escala el gradiente con su width — siempre tiene width=100% y revela
   solo la parte izquierda usando clip-path. Así, un score de 10 muestra
   sólo verde puro, un score de 90 muestra verde→amarillo→naranja→rojo. */
.risk-card-bar-fill {
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        #22c55e 0%,
        #84cc16 20%,
        #facc15 40%,
        #fb923c 65%,
        #ef4444 90%,
        #b91c1c 100%);
    border-radius: 999px;
    transition: none;
    will-change: clip-path;
    /* Inicialmente totalmente clipped — la animación JS lo va revelando. */
    clip-path: inset(0 100% 0 0);
}
.risk-card-foot-v2 {
    font-size: .76rem;
    margin-top: 2px;
}

/* ====== Lista de factores: 2 cols debajo de las cards ====== */
.risk-factors-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 760px) {
    .risk-factors-grid-v2 { grid-template-columns: 1fr; }
}
.risk-factors-col-v2 {
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 12px 0;
}
.rfcv-title {
    padding: 6px 18px 12px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-3);
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 4px;
}
.rfcv-row {
    display: grid;
    /* 5 columnas: icono · texto · marca severidad · badge +N · flecha.
       (Con 4, la flecha saltaba a una segunda línea y doblaba la fila.) */
    grid-template-columns: 30px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 50%, transparent);
    transition: background 0.15s ease;
    cursor: pointer;
    user-select: none;
}
.rfcv-row:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.rfcv-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.rfcv-row[aria-expanded="true"] {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.rfcv-row[aria-expanded="true"] .rfcv-arrow {
    transform: rotate(90deg);
    color: var(--accent);
}
.rfcv-arrow {
    transition: transform 0.18s ease, color 0.15s ease;
}

/* Panel inline con info contextual del factor */
.rfcv-detail-panel[hidden] { display: none; }
.rfcv-detail-panel {
    padding: 0 18px 12px 60px;   /* alineado con la columna del label (30px icon + 18px row pad + ~12px gap) */
    border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 50%, transparent);
}
.rfcv-detail-inner {
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-3));
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rfcv-detail-inner.sev-red    { border-left: 3px solid #ef4444; }
.rfcv-detail-inner.sev-amber  { border-left: 3px solid #f59e0b; }
.rfcv-detail-inner.sev-green  { border-left: 3px solid #22c55e; }
.rfcv-detail-item {
    padding: 6px 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--line-soft) 60%, transparent);
}
.rfcv-detail-item:last-of-type { border-bottom: none; }
.rfcv-detail-head {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .76rem;
    color: var(--text);
    margin-bottom: 3px;
}
.rfcv-detail-head .sev-red    { color: #ef4444; }
.rfcv-detail-head .sev-amber  { color: #f59e0b; }
.rfcv-detail-head .sev-green  { color: #22c55e; }
.rfcv-detail-text {
    font-size: .82rem;
    color: var(--text-2);
    line-height: 1.4;
}
.rfcv-detail-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--bg);
    font-size: .78rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    margin-top: 4px;
}
.rfcv-detail-cta:hover { background: #db5f0c; transform: translateY(-1px); }
.rfcv-detail-cta:active { transform: translateY(0); }
.rfcv-detail-cta span { font-size: .9em; }
.rfcv-icon-wrap {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text-3) 12%, transparent);
    color: var(--text-2);
}
.rfcv-icon-wrap.sev-red    { background: rgba(239,68,68,.12);  color: #ef4444; }
.rfcv-icon-wrap.sev-amber  { background: rgba(245,158,11,.12); color: #f97316; }
.rfcv-icon-wrap.sev-green  { background: rgba(34,197,94,.12);  color: #22c55e; }
.rfcv-icon-wrap i.ti { font-size: 16px; }
.rfcv-label {
    font-size: .9rem;
    color: var(--text);
    line-height: 1.3;
}
.rfcv-weight {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text-3) 14%, transparent);
    color: var(--text-2);
}
.rfcv-row.sev-red   .rfcv-weight { background: rgba(239,68,68,.16);  color: #ef4444; }
.rfcv-row.sev-amber .rfcv-weight { background: rgba(245,158,11,.16); color: #f97316; }
.rfcv-row.sev-green .rfcv-weight { background: rgba(34,197,94,.16);  color: #22c55e; }
.rfcv-arrow {
    font-size: 1.1rem;
    color: var(--text-3);
    line-height: 1;
}
.rfcv-foot {
    padding: 10px 18px 4px;
    border-top: 1px solid var(--line-soft);
    margin-top: 6px;
    font-size: .74rem;
}

/* ---- Gauge / termómetro aeronáutico de riesgo (LEGACY v1, no se usa) ---- */
.risk-gauge-block {
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 18px 22px 14px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.risk-gauge-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}
.rg-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: 0.01em;
}
.rg-sub { font-size: 0.78rem; }

.risk-gauge-body {
    display: grid;
    grid-template-columns: minmax(320px, 1.5fr) minmax(220px, 1fr);
    gap: 20px;
    align-items: center;
}
@media (max-width: 720px) {
    .risk-gauge-body { grid-template-columns: 1fr; }
}

.risk-gauge-svg {
    width: 100%;
    max-width: 460px;
    height: auto;
    margin: 0 auto;
    display: block;
}
.risk-gauge-svg .rg-tick {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 11px;
    fill: var(--text-3);
}
.risk-gauge-svg .rg-score {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: 44px;
    font-weight: 300;
    fill: var(--text-1);
    letter-spacing: -0.04em;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.risk-gauge-svg .rg-score-sub {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    fill: var(--text-3);
    letter-spacing: 0.04em;
}
.risk-gauge-svg .rg-level {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
}
.risk-gauge-svg .rg-edge {
    font-family: -apple-system, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    fill: var(--text-3);
}

/* Leyenda lateral con 5 niveles */
.risk-gauge-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rgl-row {
    display: grid;
    grid-template-columns: 14px 56px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-3);
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    transition: border-color .2s, transform .15s;
}
.rgl-row.active {
    border-color: var(--line);
    background: var(--bg-1);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transform: translateX(2px);
}
.rgl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,.6);
}
.rgl-range {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-3);
    font-weight: 600;
}
.rgl-lbl {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.risk-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    border-radius: var(--r-sm);
    border: 1px solid;
    margin-bottom: 18px;
}
.risk-banner.sev-green {
    background: rgba(46,194,126,.10);
    border-color: rgba(46,194,126,.4);
}
.risk-banner.sev-amber {
    background: rgba(212,167,60,.12);
    border-color: rgba(212,167,60,.4);
}
.risk-banner.sev-red {
    background: rgba(192,57,43,.12);
    border-color: rgba(192,57,43,.45);
}
.risk-banner-icon {
    font-size: 1.6rem;
    width: 40px; text-align: center;
}
.risk-banner.sev-green .risk-banner-icon { color: var(--sev-vfr); }
.risk-banner.sev-amber .risk-banner-icon { color: #d4a73c; }
.risk-banner.sev-red   .risk-banner-icon { color: #e8786a; }
.risk-banner-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.risk-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.risk-cta {
    background: var(--accent);
    color: var(--bg);
    border: 0;
    padding: 8px 14px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
}
.risk-cta:hover { opacity: .9; }
.risk-cta-secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 7px 14px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    transition: background .15s ease;
}
.risk-cta-secondary:hover {
    background: rgba(125,184,255,.10);
}

/* ====================== LOGBOOK VIEWER ====================== */
.logbook-viewer-dialog { width: 96vw; max-width: 1280px; height: 92vh; max-height: 92vh; }

/* ================================================================
   LOGBOOK VIEWER v2 — tabs Resumen / Recencia / Vuelos
   ================================================================ */
.lbv-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
    padding: 0 4px;
}
.lbv-tab {
    background: transparent; border: 0;
    padding: 10px 16px;
    font: inherit;
    color: var(--text-3);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
    font-size: .92rem;
}
.lbv-tab i { font-size: 16px; }
.lbv-tab:hover { color: var(--text); }
.lbv-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.lbv-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    margin: 18px 0 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.lbv-section-title:first-child { margin-top: 4px; }
.lbv-section-sub {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-3);
    margin-left: auto;
}
.lbv-section-action {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: background .15s;
    text-transform: none;
    letter-spacing: 0;
}
.lbv-section-action:hover { background: rgba(12, 133, 119, 0.08); }
.lbv-section-action i { font-size: 14px; }

/* --- CAREER STATS GRID (hero) --- */
.lbv-career-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}
.lbv-cstat {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
}
.lbv-cstat-hero {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(12,133,119,0.08), rgba(12,133,119,0.02));
    border-color: rgba(12,133,119,0.2);
    padding: 14px 16px;
}
.lbv-cstat-num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.lbv-cstat-hero .lbv-cstat-num {
    font-size: 2.2rem;
    color: var(--accent);
}
.lbv-cstat-u { font-size: 0.7em; font-weight: 500; opacity: 0.7; margin-left: 2px; }
.lbv-cstat-lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-top: 4px;
    font-weight: 500;
}
.lbv-cstat-hero .lbv-cstat-lbl { font-size: 0.82rem; }
.lbv-cstat-sub { margin-top: 6px; }

@media (max-width: 640px) {
    .lbv-career-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- RECENT MINI STATS (5 cards) --- */
.lbv-recent-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.lbv-rstat {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px;
    text-align: center;
}
.lbv-rstat-num {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
}
.lbv-rstat-u { font-size: 0.7em; opacity: 0.7; margin-left: 1px; }
.lbv-rstat-lbl {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-top: 4px;
}
@media (max-width: 640px) {
    .lbv-recent-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- HOURS BY TYPE (bar list) --- */
.lbv-type-list { display: flex; flex-direction: column; gap: 6px; }
.lbv-type-row {
    display: grid;
    grid-template-columns: 68px 1fr 68px 84px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.lbv-type-name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
}
.lbv-type-bar-wrap {
    height: 16px;
    background: var(--bg-3);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.lbv-type-bar {
    height: 100%;
    background: linear-gradient(180deg, #5EEAD4, #22D3C5);
    border-radius: 8px;
    transition: width .35s ease;
    position: relative;
}
/* Banda más oscura = porción de previousExperience dentro del total */
.lbv-type-bar-prev {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: rgba(0,0,0,0.25);
    border-radius: 8px 0 0 8px;
}
.lbv-type-val {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
    color: var(--text);
}
.lbv-type-meta { text-align: right; }

/* --- CURRENCY CARDS --- */
.lbv-currency-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}
.lbv-ccard {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-left: 3px solid;
    border-radius: var(--r-sm);
    padding: 12px 14px;
}
.lbv-ccard.ok   { border-left-color: #2ecc71; }
.lbv-ccard.warn { border-left-color: #f5a623; background: rgba(245, 166, 35, 0.04); }
.lbv-ccard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lbv-ccard-icon { font-size: 18px; }
.lbv-ccard.ok .lbv-ccard-icon   { color: #2ecc71; }
.lbv-ccard.warn .lbv-ccard-icon { color: #f5a623; }
.lbv-ccard-title { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.lbv-ccard-big {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.lbv-ccard-target { font-size: 0.78rem; font-weight: 500; opacity: 0.5; }
.lbv-ccard-sub { margin-top: 6px; line-height: 1.4; }
.lbv-ccard-foot { margin-top: 4px; }
.lbv-disclaimer {
    margin: 10px 0 6px;
    padding: 8px 12px;
    background: var(--bg-3);
    border-radius: var(--r-sm);
    line-height: 1.5;
    display: flex; align-items: flex-start; gap: 6px;
}
.lbv-disclaimer i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

@media (max-width: 640px) {
    .lbv-currency-grid { grid-template-columns: 1fr; }
}

/* --- MONTHLY CHART --- */
.lbv-chart-wrap {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 16px 14px 12px;
    color: var(--text);
    overflow-x: auto;
    min-height: 220px;
}
/* Antes el chart estaba capado a 140px de alto → bars y valores se aplastaban.
   Sin cap, la SVG se escala al ancho 100% manteniendo su aspect ratio del
   viewBox (cubría 12 barras de 40px + gaps = 624px en viewBox, alto 262 →
   en un diálogo de 720px se ve a ~720×302). */
.lbv-chart { display: block; width: 100%; height: auto; }
.lbv-mbar { cursor: default; }

/* --- PREVIOUS EXPERIENCE TABLE --- */
.lbv-pe-form { background: var(--bg-3); padding: 12px; border-radius: var(--r-sm); margin-bottom: 8px; }
.lbv-pe-form.hidden { display: none; }
.lbv-pe-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 10px;
    margin-bottom: 10px;
}
.lbv-pe-form-grid label {
    display: flex; flex-direction: column;
    font-size: 0.72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    gap: 3px;
}
.lbv-pe-form-grid input {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 5px 8px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: none;
}
.lbv-pe-form-foot { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 640px) { .lbv-pe-form-grid { grid-template-columns: repeat(2, 1fr); } }

.lbv-pe-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.lbv-pe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.lbv-pe-table thead th {
    background: var(--bg-3);
    color: var(--text-3);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line);
}
.lbv-pe-table th.num, .lbv-pe-table td.num {
    text-align: right;
    font-family: var(--font-mono);
}
.lbv-pe-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.lbv-pe-table tbody tr:last-child td { border-bottom: none; }
.lbv-pe-table tbody tr:hover { background: var(--bg-3); }
.lbv-pe-empty { padding: 18px 12px !important; text-align: center; line-height: 1.55; }
.lbv-pe-del {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-3); font-size: 18px; padding: 0 4px;
    line-height: 1;
}
.lbv-pe-del:hover { color: var(--sev-lifr); }
.lbv-pe-actions { white-space: nowrap; text-align: right; }
.lbv-pe-edit {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-3); font-size: 15px; padding: 0 4px;
    line-height: 1; vertical-align: middle;
}
.lbv-pe-edit:hover { color: var(--accent); }

/* ===================================================================
   FORMULARIO DE VUELO (logbook_form.js)
   Los pm-section antiguos quedan ocultos: siguen ahí porque logbookSave()
   lee sus inputs, pero el piloto ve esta capa.
   =================================================================== */
.pm-body.lbf-legacy-hidden > .pm-section { display: none; }
/* La firma del examinador y las notas SÍ se siguen mostrando. */
.pm-body.lbf-legacy-hidden > .pm-section:nth-last-child(-n+2) { display: block; }

.lbf { display: block; }
.lbf-sec {
    font: 700 10px var(--font-num, monospace); letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-3); margin: 20px 0 10px;
}
.lbf-sec:first-of-type { margin-top: 4px; }
/* align-items:start es clave: sin él, al abrir la rueda de On blocks la celda
   de Off blocks se estiraba a la misma altura y dejaba un hueco gris enorme. */
.lbf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.lbf-f {
    background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px;
    padding: 9px 13px; transition: border-color .15s ease;
}
.lbf-f.open { border-color: var(--accent); }
.lbf-lbl {
    display: block; font: 600 9.5px var(--font-num, monospace); letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-3); margin-bottom: 3px;
}
.lbf-in {
    width: 100%; background: none; border: 0; outline: none; color: var(--text);
    font: 600 16px var(--font-ui); padding: 0;
}
.lbf-icao { font: 700 19px var(--font-num, monospace); letter-spacing: .08em; text-transform: uppercase; }
.lbf-sub {
    font: 400 11px var(--font-ui); color: var(--text-2); margin-top: 2px; min-height: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lbf-sub.warn { color: #c99a4e; }
.lbf-tap { font: 700 19px var(--font-num, monospace); letter-spacing: .06em; color: var(--text); cursor: pointer; user-select: none; }
.lbf-pan { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* aeronave */
.lbf-ac { display: flex; align-items: center; gap: 12px; }
.lbf-ac-i { flex: 1; min-width: 0; }
.lbf-ac-r { display: flex; align-items: baseline; gap: 9px; }
.lbf-ac-r > span:first-child { font: 700 19px var(--font-num, monospace); letter-spacing: .06em; color: var(--text); }
.lbf-ac-name { font: 400 12px var(--font-ui); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbf-ac-name.warn { color: #c99a4e; }
.lbf-swap {
    width: 34px; height: 34px; border-radius: 50%; background: var(--bg-2);
    border: 1px solid var(--line); color: var(--text-3); cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 17px;
}
.lbf-swap:hover { color: var(--accent); border-color: var(--accent); }

/* Los 3 badges: mono/multi · motor · categoría de estela */
.lbf-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.lbf-bdg {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px;
    padding: 3px 8px; font: 600 10.5px var(--font-ui); color: var(--text-2);
}
.lbf-bdg i { font-style: normal; font-size: 9.5px; color: var(--text-3); }
.lbf-bdg.wtc-L { border-color: color-mix(in srgb, #34d399 40%, transparent); color: #34d399; }
.lbf-bdg.wtc-M { border-color: color-mix(in srgb, #f5b042 45%, transparent); color: #f5b042; }
.lbf-bdg.wtc-H, .lbf-bdg.wtc-J { border-color: color-mix(in srgb, #f43f5e 45%, transparent); color: #f43f5e; }
.lbf-bdg.wtc-L i, .lbf-bdg.wtc-M i, .lbf-bdg.wtc-H i, .lbf-bdg.wtc-J i { color: inherit; opacity: .7; }

/* Selector de aeronave con buscador */
.lbf-pick {
    position: fixed; inset: 0; z-index: 10000; background: rgba(4, 9, 16, .62);
    display: flex; align-items: flex-start; justify-content: center; padding: 8vh 14px;
}
.lbf-pick-c {
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
    width: 100%; max-width: 520px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5); display: flex; flex-direction: column; max-height: 76vh;
}
.lbf-pick-h {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px; font: 600 15px var(--font-ui); color: var(--text);
}
.lbf-pick-x { color: var(--text-3); font-size: 22px; line-height: 1; cursor: pointer; }
.lbf-pick-x:hover { color: var(--text); }
.lbf-pick-q {
    margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--bg-3); color: var(--text);
    font: 500 14px var(--font-ui); outline: none;
}
.lbf-pick-q:focus { border-color: var(--accent); }
.lbf-pick-l { overflow-y: auto; padding: 0 8px 10px; }
.lbf-pick-r {
    display: grid; grid-template-columns: 62px 1fr; grid-template-rows: auto auto;
    gap: 1px 10px; align-items: baseline;
    padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.lbf-pick-r:hover { background: var(--bg-3); }
.lbf-pick-code {
    grid-row: 1 / span 2; align-self: center;
    font: 700 14px var(--font-num, monospace); color: var(--accent); letter-spacing: .04em;
}
.lbf-pick-n { font: 600 13px var(--font-ui); color: var(--text); }
.lbf-pick-m { font: 400 11px var(--font-ui); color: var(--text-3); }
.lbf-pick-none { padding: 20px 14px; text-align: center; font: 400 12.5px var(--font-ui); color: var(--text-3); line-height: 1.5; }

/* tiempo de vuelo */
.lbf-dur {
    text-align: center; margin-top: 10px; padding: 10px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.lbf-dur span { font: 700 10px var(--font-num, monospace); letter-spacing: .12em; color: var(--text-3); }
.lbf-dur div { font: 700 22px var(--font-num, monospace); color: var(--accent); margin-top: 2px; }

/* calendario */
.lbf-calh { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.lbf-nav {
    width: 30px; height: 30px; border-radius: 9px; background: var(--bg-2);
    border: 1px solid var(--line); color: var(--text); cursor: pointer;
    font: 600 15px var(--font-ui); line-height: 28px; text-align: center; flex: 0 0 auto; user-select: none;
}
.lbf-nav:hover { background: var(--bg-recess, var(--bg-3)); }
.lbf-calt { flex: 1; text-align: center; font: 700 13px var(--font-ui); color: var(--text); cursor: pointer; padding: 6px; border-radius: 9px; user-select: none; }
.lbf-calt:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.lbf-calt small { color: var(--text-3); font-size: 10px; margin-left: 4px; }
.lbf-hoy {
    font: 700 10px var(--font-num, monospace); letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 8px; padding: 7px 10px; cursor: pointer; flex: 0 0 auto; user-select: none;
}
.lbf-calg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.lbf-calg s { font: 700 9px var(--font-num, monospace); color: var(--text-3); text-align: center; text-decoration: none; padding: 3px 0; }
.lbf-calg a { display: flex; align-items: center; justify-content: center; height: 31px; border-radius: 9px; font: 600 13px var(--font-num, monospace); color: var(--text-2); cursor: pointer; }
.lbf-calg a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.lbf-calg a.mut { color: var(--text-3); opacity: .45; }
.lbf-calg a.today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.lbf-calg a.on { background: var(--accent); color: #fff; font-weight: 700; }
.lbf-mg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.lbf-mg a { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 9px; font: 600 12px var(--font-ui); color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; }
.lbf-mg a:hover { color: var(--text); }
.lbf-mg a.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }

/* (la rueda de hora se eliminó: la hora se teclea HHMM directamente) */

/* PF / PM */
.lbf-tgw { display: flex; align-items: center; justify-content: space-between; }
.lbf-tgl { font: 600 14px var(--font-ui); color: var(--text); }
.lbf-tgs { font: 400 11px var(--font-ui); color: var(--text-2); }
.lbf-tog {
    position: relative; width: 52px; height: 28px; border-radius: 999px; flex: 0 0 auto;
    background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; transition: background .2s ease;
}
.lbf-tog i {
    position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); transition: transform .22s cubic-bezier(.32,.72,0,1), background .2s;
}
.lbf-tog.pm { background: color-mix(in srgb, #388add 22%, transparent); border-color: color-mix(in srgb, #388add 45%, transparent); }
.lbf-tog.pm i { transform: translateX(24px); background: #5aa9f0; }

/* chips */
.lbf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.lbf-chip {
    display: inline-flex; align-items: center; background: var(--bg-3); border: 1px solid var(--line);
    border-radius: 999px; padding: 6px 13px; font: 600 12px var(--font-ui); color: var(--text-2); cursor: pointer; user-select: none;
}
.lbf-chip.on { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent); }

/* contadores +/- */
.lbf-cnt { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.lbf-cnt-l { flex: 1; min-width: 76px; font: 600 13px var(--font-ui); color: var(--text); }
.lbf-cnt-p { font: 600 10px var(--font-num, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.lbf-st {
    display: inline-flex; align-items: center; background: var(--bg-2);
    border: 1px solid var(--line-strong, var(--line)); border-radius: 10px; overflow: hidden; flex: 0 0 auto;
}
.lbf-b {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    color: var(--text); font: 700 19px var(--font-ui); line-height: 1; cursor: pointer; user-select: none;
}
.lbf-b:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.lbf-b:active { background: color-mix(in srgb, var(--accent) 32%, transparent); }
/* Centrado con flex, no con line-height: las cifras monoespaciadas tienen la
   caja alta y con line-height quedaban desplazadas hacia arriba. */
.lbf-v {
    min-width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font: 700 15px var(--font-num, monospace); color: var(--text); line-height: 1;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.lbf-b { line-height: 1; }

@media (max-width: 480px) { .lbf-2 { grid-template-columns: 1fr; } }

/* --- Bandera circular del país del aeródromo ---
   flagcdn.com: banderas de dominio público (vectores de Wikimedia), libres
   para uso comercial. object-fit:cover recorta el rectángulo al círculo sin
   deformarlo — un border-radius a secas aplastaría la bandera. */
.acm-flag {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 50%;
    /* cover recorta el rectángulo de la bandera al círculo SIN deformarla.
       (Con <img> + width/height forzados salía achatada.) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-3);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
    vertical-align: -2px;
    margin-right: 5px;
}
.lbf-sub { display: flex; align-items: center; }
.rh-name { display: flex; align-items: center; justify-content: inherit; gap: 0; }
/* Ruta del logbook:  LESA (bandera) ———→ (bandera) LEBL
   Las banderas van hacia DENTRO, pegadas a la línea: así el ojo salta
   código → país → país → código, siguiendo el sentido del vuelo. */
.lbv3-route > span { display: inline-flex; align-items: center; }
/* Chip de país: bandera circular + nombre, alineados */
.lbv-cchip { display: inline-flex; align-items: center; }
.lbv-cchip .acm-flag { margin-right: 7px; }
.lbv3-route .rt-dep  .acm-flag { margin: 0 0 0 7px; }   /* después del ICAO */
.lbv3-route .rt-dest .acm-flag { margin: 0 7px 0 0; }   /* antes del ICAO   */
.lbv3-route .acm-flag { vertical-align: -1px; }

/* ===================================================================
   FOTOS DE AERONAVE (Wikimedia Commons)
   Entran con fade: llegan en diferido y un salto brusco distrae.
   Si no hay foto, el hueco se colapsa — nunca dejamos un marco vacío.
   =================================================================== */
[data-acphoto], .pp-acphoto-img { position: relative; overflow: hidden; }
[data-acphoto] img, .pp-acphoto-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: 0; transition: opacity .35s ease;
}
.acph-in img { opacity: 1; }

/* Miniatura en la lista de vuelos. NO se oculta si no hay foto: mantiene su
   hueco en la rejilla (si desapareciera, la fila entera se descuadraría) y
   muestra una silueta tenue. */
/* CIRCULAR, como las banderas. 48px: cabe de sobra en la altura de la fila
   (que la marcan la ruta + las etiquetas), así que no la estira.
   La imagen va con object-fit:cover, o sea, se RECORTA al círculo — nunca se
   deforma, por muy apaisada que sea la foto original. */
.lbv-acthumb {
    width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
    background: var(--bg-3); border: 1px solid var(--line); align-self: center;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.lbv-acthumb.acph-none::after,
.lbv-acthumb:empty::after {
    content: "\ea45";                      /* ti-plane */
    font-family: "tabler-icons";
    font-size: 17px;
    color: var(--text-3);
    opacity: .3;
}
/* En el perfil sí se colapsa: ahí un marco vacío no aporta nada. */
.pp-acphoto-img.acph-none { display: none; }

/* Foto grande en el perfil del piloto.
   Ocupa las DOS columnas de la rejilla: dentro de una celda estiraba la fila y
   dejaba un hueco muerto al lado. Foto e info van en horizontal, que aprovecha
   mucho mejor el ancho que una foto apaisada con el texto debajo. */
.pp-acphoto {
    grid-column: 1 / -1;
    margin: 10px 0 4px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.pp-acphoto:empty { display: none; }
.pp-acphoto-img {
    width: 190px; height: 118px; flex: 0 0 auto;
    border-radius: 10px; overflow: hidden;
    background: var(--bg-2); border: 1px solid var(--line);
}
.pp-acphoto-name {
    font: 600 14px var(--font-ui); color: var(--text); line-height: 1.4;
}
.pp-acphoto-name.warn { color: #c99a4e; font-weight: 500; }
@media (max-width: 560px) {
    .pp-acphoto { flex-direction: column; align-items: stretch; }
    .pp-acphoto-img { width: 100%; height: 150px; }
}
.acph-credit {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 5px 9px; font: 400 10px var(--font-ui); color: rgba(255,255,255,.9);
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Comandos del logbook: TODOS en la línea inferior, como botones circulares
       con etiqueta. Borrar a la izquierda (única acción destructiva, separada
       a propósito); el resto agrupado a la derecha. --- */
.logbook-viewer-dialog { position: relative; }
/* El pie del logbook es solo un soporte para los botones: no debe pesar.
   Fondo transparente y una línea muy fina en vez de la banda gris maciza. */
.pm-foot.lbv-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 18px 12px;
    background: transparent;
    border-top: 1px solid var(--line-soft);
}
.lbv-fabs {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-left: auto;
}
.lbv-fab-danger .lbv-fab-btn { color: var(--text-3); }
.lbv-fab-danger:hover .lbv-fab-btn { color: var(--sev-lifr); border-color: var(--sev-lifr); }
.lbv-fab-danger:hover .lbv-fab-lbl { color: var(--sev-lifr); }
.lbv-fab {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0; cursor: pointer;
}
.lbv-fab-btn {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-2); border: 1px solid var(--line);
    color: var(--text-2); font-size: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.lbv-fab:hover .lbv-fab-btn { transform: translateY(-2px); color: var(--text); border-color: var(--line-strong, var(--line)); }
.lbv-fab:active .lbv-fab-btn { transform: translateY(0); }
.lbv-fab-lbl {
    font: 600 .7rem var(--font-ui); letter-spacing: .02em;
    color: var(--text-3); white-space: nowrap;
}
.lbv-fab:hover .lbv-fab-lbl { color: var(--text-2); }
/* La acción principal (+ Vuelo) va rellena, pero del MISMO tamaño que el resto:
   el color ya la destaca de sobra, y agrandarla rompía la alineación de la fila. */
.lbv-fab-primary .lbv-fab-btn {
    background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.lbv-fab-primary .lbv-fab-lbl { color: var(--text); font-weight: 700; }
@media (max-width: 560px) {
    .lbv-fabs { gap: 10px; }
    .lbv-fab-btn { width: 42px; height: 42px; font-size: 18px; }
    .pm-foot.lbv-foot { padding: 8px 12px 10px; }
}

/* --- Validez de licencias / habilitaciones / médico --- */
.lbv-valgrid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px; margin-top: 4px;
}
.lbv-valcard {
    background: var(--bg-2); border: 1px solid var(--line);
    border-left: 4px solid var(--line); border-radius: 10px;
    padding: 10px 12px;
}
.lbv-valcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lbv-valcard-name { font: 600 .92rem var(--font-ui); color: var(--text); }
.lbv-valcard-act { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.lbv-val-edit, .lbv-val-del {
    background: transparent; border: 0; cursor: pointer; color: var(--text-3);
    line-height: 1; padding: 0 3px;
}
.lbv-val-edit { font-size: 14px; }
.lbv-val-del { font-size: 17px; }
.lbv-val-edit:hover { color: var(--accent); }
.lbv-val-del:hover { color: var(--sev-lifr); }
.lbv-valcard-tag {
    font: 600 .6rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-3); background: var(--bg-recess, var(--bg-3)); border: 1px solid var(--line);
    border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: middle;
}
.lbv-val-form-grid input:disabled { opacity: .6; cursor: not-allowed; }
.lbv-valcard-date { font: 600 1.05rem var(--font-num, var(--font-ui)); color: var(--text); margin-top: 4px; letter-spacing: .01em; }
.lbv-valcard-sub { font: 600 .74rem var(--font-ui); margin-top: 2px; }
.lbv-val-empty { padding: 14px 12px; text-align: center; line-height: 1.5; }
.lbv-val-form-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 10px;
}
.lbv-val-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--text-2); }
.lbv-val-form-grid input {
    padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--bg-3); color: var(--text); font-size: .9rem;
}
@media (max-width: 560px) { .lbv-val-form-grid { grid-template-columns: 1fr; } }

/* --- FLIGHTS TAB (filters + grouped entries) --- */
.lbv-filters {
    display: flex;
    align-items: end;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-3);
    border-radius: var(--r-sm);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.lbv-filter-group { flex: 0 0 auto; }
.lbv-filter-group label {
    display: flex; flex-direction: column;
    font-size: 0.7rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    gap: 3px;
}
.lbv-filter-group select, .lbv-filter-group input {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 5px 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    text-transform: none;
    min-width: 110px;
}
.lbv-filter-search { flex: 1; min-width: 180px; }
.lbv-filter-search input { width: 100%; }
.lbv-filter-reset {
    background: transparent; border: 1px solid var(--line);
    color: var(--text-3); padding: 6px 8px; border-radius: 4px;
    cursor: pointer; font-size: 14px;
}
.lbv-filter-reset:hover { color: var(--sev-lifr); border-color: var(--sev-lifr); }
.lbv2-count { margin: 0 4px 8px; }

.lbv2-month { margin-bottom: 14px; }
.lbv2-month-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(12,133,119,0.06), transparent);
    border-left: 2px solid var(--accent);
    border-radius: 0 4px 4px 0;
    margin-bottom: 4px;
}
.lbv2-month-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    text-transform: capitalize;
}
.lbv2-entries { display: flex; flex-direction: column; }
.lbv2-entry {
    /* Estructura original + una columna de foto A LA DERECHA, justo antes de
       las acciones. Ni el día ni la ruta ni los tiempos cambian de sitio. */
    display: grid;
    grid-template-columns: 32px 1fr auto 48px 28px;   /* día · ruta · tiempos · foto · acciones */
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    transition: background .12s;
}
.lbv2-entry:hover { background: var(--bg-3); }
.lbv2-entry:last-child { border-bottom: none; }
.lbv2-day {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-3);
    text-align: center;
    line-height: 1;
}
.lbv2-main { min-width: 0; }
.lbv2-route {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    display: flex; align-items: center; gap: 6px;
}
.lbv2-route i { color: var(--text-3); font-size: 14px; }
.lbv2-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; align-items: center; }
.lbv2-cs { font-family: var(--font-mono); font-weight: 600; color: var(--text-2); }
.lbv2-type { font-family: var(--font-mono); color: var(--text-3); }
.lbv2-tag {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: var(--font-mono);
    background: rgba(255,255,255,0.06);
    color: var(--text-2);
}
.lbv2-tag-pic   { background: rgba(46, 204, 113, 0.18); color: #2ecc71; }
.lbv2-tag-sic   { background: rgba(52, 152, 219, 0.18); color: #3498db; }
.lbv2-tag-dual  { background: rgba(155, 89, 182, 0.18); color: #9b59b6; }
.lbv2-tag-solo  { background: rgba(241, 196, 15, 0.18); color: #f1c40f; }
.lbv2-tag-ifr   { background: rgba(12, 133, 119, 0.18); color: #0C8577; }
.lbv2-tag-mixed { background: rgba(149, 165, 166, 0.18); color: #95a5a6; }
.lbv2-tag-night { background: rgba(52, 73, 94, 0.4); color: #ecf0f1; display: inline-flex; align-items: center; gap: 3px; }
.lbv2-tag-night i { font-size: 11px; }
.lbv2-notes {
    margin-top: 4px;
    font-style: italic;
    line-height: 1.45;
}
.lbv2-right { text-align: right; }
.lbv2-time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); margin-bottom: 2px; }
.lbv2-block { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--accent); line-height: 1; }
.lbv2-u { font-size: 0.65em; font-weight: 500; opacity: 0.7; }
.lbv2-ldg { margin-top: 2px; }
.lbv2-del {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-3); font-size: 20px; line-height: 1; padding: 0;
    align-self: start;
}
.lbv2-del:hover { color: var(--sev-lifr); }
@media (max-width: 640px) {
    /* En móvil no hay ancho para la foto: la ocultamos y la fila vuelve a su
       forma compacta de siempre. La foto es un lujo, no información. */
    .lbv2-entry { grid-template-columns: 28px 1fr 24px !important; }
    .lbv2-right { grid-column: 1 / -2; text-align: left; display: flex; gap: 10px; align-items: baseline; }
    .lbv-acthumb { display: none !important; }
}


/* ================================================================
   TOASTS — notificaciones no bloqueantes (toast.js)
   ----------------------------------------------------------------
   Faltaba TODO el CSS de los toasts: se creaban en DOM pero sin
   estilo (texto plano al fondo del body). Estilos alineados con el
   design system (vars de tema día/noche, safe-area iOS, touch
   targets ≥40px para uso con guantes en cabina).
   z-index 10600 > toast-confirm (10500) para avisos sobre modales.
   ================================================================ */
.toast-container {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10600;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(440px, calc(100vw - 24px));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-lg);
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity .22s ease, transform .26s cubic-bezier(.34, 1.4, .64, 1);
}
.toast.toast-enter { opacity: 1; transform: translateY(0) scale(1); }
.toast.toast-exit  { opacity: 0; transform: translateY(-10px) scale(0.98); }
.toast-icon { font-size: 1.15rem; line-height: 1.35; flex: 0 0 auto; }
.toast-info    .toast-icon { color: var(--accent-2); }
.toast-success .toast-icon { color: var(--sev-vfr); }
.toast-warning .toast-icon { color: var(--sev-caution); }
.toast-error   .toast-icon { color: var(--sev-lifr); }
.toast-warning { border-color: var(--sev-caution); }
.toast-error   { border-color: var(--sev-lifr); }
.toast-body  { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.toast-title { font-weight: 700; font-size: .92rem; margin-bottom: 2px; }
.toast-msg {
    font-size: .9rem;
    line-height: 1.4;
    white-space: pre-line;       /* respeta \n en listas de validación */
    overflow-wrap: break-word;
}
.toast-action {
    flex: 0 0 auto;
    align-self: center;
    min-height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
}
.toast-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: -6px -8px -6px 0;    /* touch target 40px sin inflar la card */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r-sm);
    background: none;
    color: var(--text-2);
    cursor: pointer;
}
.toast-close:hover { color: var(--text); background: var(--line-soft); }

/* ================================================================
   FRESCURA DE DATOS + FUENTES CAÍDAS (UX de cabina)
   ================================================================ */
/* Banner "briefing incompleto" — persistente, no desaparece solo */
.src-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin: 10px 0;
    border: 1px solid var(--sev-caution);
    border-left: 4px solid var(--sev-caution);
    border-radius: var(--r-md);
    background: var(--sev-ifr-soft);
}
.src-error-banner.hidden { display: none; }
.src-error-banner .seb-icon { color: var(--sev-caution); font-size: 1.2rem; line-height: 1.3; }
.src-error-banner .seb-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.src-error-banner .seb-retry { flex: 0 0 auto; align-self: center; min-height: 40px; }

/* Edad del briefing en cabecera: ámbar >1 h, rojo >3 h */
#briefing-time.brief-age-warn { color: var(--sev-caution); font-weight: 600; }
#briefing-time.brief-age-bad  { color: var(--sev-lifr);    font-weight: 700; }

/* Chip de edad de la observación METAR en cada tarjeta */
.metar-head-right { display: flex; align-items: center; gap: 8px; }
.metar-age {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--r-full);
    border: 1px solid var(--line);
    background: var(--bg-recess);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-2);
    white-space: nowrap;
}
.metar-age.age-warn { color: var(--sev-caution); border-color: var(--sev-caution); background: var(--sev-ifr-soft); }
.metar-age.age-bad  { color: var(--sev-lifr);    border-color: var(--sev-lifr);    background: var(--sev-lifr-soft); }

/* ================================================================
   TOAST.CONFIRM — diálogo modal de confirmación
   ----------------------------------------------------------------
   Faltaba el CSS: el dialog se creaba en DOM pero invisible. Por
   eso "Clear all" parecía no hacer nada (la confirmación no salía
   o salía detrás de otros modales).
   z-index 10500 > .pm-modal (9999) para que SIEMPRE quede encima.
   ================================================================ */
.toast-confirm-backdrop {
    position: fixed; top:0;right:0;bottom:0;left:0;
    z-index: 10500;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background .2s ease, backdrop-filter .2s ease;
}
.toast-confirm-backdrop.toast-confirm-enter {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.toast-confirm-backdrop.toast-confirm-exit {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}
.toast-confirm-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    max-width: 440px;
    width: 100%;
    padding: 18px 20px;
    transform: scale(0.94);
    opacity: 0;
    transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .18s ease;
}
.toast-confirm-backdrop.toast-confirm-enter .toast-confirm-card {
    transform: scale(1);
    opacity: 1;
}
.tcc-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.tcc-icon {
    font-size: 24px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}
.toast-confirm-card .tcc-head:has(.ti-alert-triangle) .tcc-icon { color: #ff9f43; }
.tcc-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.tcc-msg {
    font-size: 0.88rem;
    color: var(--text-2);
    line-height: 1.5;
}
.tcc-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.tcc-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.tcc-btn:hover { background: var(--bg-3); }
.tcc-btn:active { transform: scale(0.97); }
.tcc-btn-cancel { color: var(--text-2); }
.tcc-btn-primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.tcc-btn-primary:hover { background: color-mix(in srgb, var(--accent) 90%, white); }
.theme-day .tcc-btn-primary { color: #fff; }
.tcc-btn-destructive {
    background: var(--sev-lifr);
    color: #fff;
    border-color: var(--sev-lifr);
}
.tcc-btn-destructive:hover { filter: brightness(0.9); }

/* ================================================================
   LOGBOOK IMPORT — modal de importación de CSV/JSON
   ================================================================ */
.logbook-import-dialog { max-width: 640px; }
.lbi-step.hidden { display: none; }
/* --- Paso 1: dropzone --- */
.lbi-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
    border: 2px dashed var(--line);
    border-radius: var(--r-md);
    background: var(--bg-3);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-align: center;
}
.lbi-dropzone:hover,
.lbi-dropzone.dragover {
    border-color: var(--accent);
    background: rgba(12, 133, 119, 0.05);
}
.lbi-dz-icon { font-size: 36px; color: var(--accent); margin-bottom: 10px; }
.lbi-dz-title { font-size: 0.98rem; font-weight: 600; margin-bottom: 4px; }
.lbi-dz-sub { font-size: 0.78rem; }
.lbi-formats-help {
    margin-top: 14px;
    background: var(--bg-3);
    border-radius: var(--r-sm);
    padding: 8px 12px;
}
.lbi-formats-help summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-2);
}
.lbi-formats-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    line-height: 1.5;
    padding-left: 4px;
}
/* --- Paso 2: preview --- */
.lbi-detected {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(12, 133, 119, 0.08);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin-bottom: 12px;
}
.lbi-detected-lbl { font-size: 0.82rem; color: var(--text-3); }
.lbi-detected strong { font-size: 0.95rem; }
.lbi-warnings {
    background: rgba(245, 166, 35, 0.1);
    border-left: 3px solid #f5a623;
    padding: 8px 12px;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin-bottom: 12px;
    font-size: 0.82rem;
    line-height: 1.5;
}
.lbi-warnings ul { margin: 4px 0 0 18px; padding: 0; }
.lbi-warnings.hidden { display: none; }
.lbi-dedup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.lbi-dedup-stat {
    padding: 12px;
    border-radius: var(--r-sm);
    text-align: center;
    background: var(--bg-3);
    border: 1px solid var(--line);
}
.lbi-dedup-stat.lbi-stat-new   { border-color: rgba(46, 204, 113, 0.4); background: rgba(46, 204, 113, 0.07); }
.lbi-dedup-stat.lbi-stat-dup   { border-color: rgba(149, 165, 166, 0.35); }
.lbi-dedup-stat .lbi-stat-num { font-size: 1.6rem; font-weight: 700; font-family: var(--font-mono); }
.lbi-dedup-stat.lbi-stat-new .lbi-stat-num { color: #2ecc71; }
.lbi-dedup-stat .lbi-stat-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-top: 2px; }
.lbi-preview-title { margin-bottom: 6px; }
.lbi-preview { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.lbi-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.lbi-preview-table thead th {
    position: sticky; top: 0;
    background: var(--bg-3);
    color: var(--text-3);
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lbi-preview-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line-soft);
}
.lbi-preview-table tbody tr:last-child td { border-bottom: none; }
.lbi-preview-table tbody tr:hover { background: var(--bg-3); }
.lbv-stats { margin-bottom: 16px; }
.lbv-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
@media (max-width: 700px) {
    .lbv-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
.lbv-stat {
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}
.lbv-stat-num {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent);
}
.lbv-stat-lbl {
    font-size: .7rem;
    color: var(--text-3);
    margin-top: 2px;
    letter-spacing: .03em;
}

.lbv-list {
    display: flex; flex-direction: column;
    gap: 6px;
}
.lbv-entry {
    display: grid;
    grid-template-columns: 110px 1fr auto 28px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    transition: background .12s ease;
}
.lbv-entry:hover { background: var(--bg-card); }
.lbv-entry-dom {
    font-weight: 600;
    color: var(--text);
    font-size: .85rem;
}
.lbv-entry-time { font-family: var(--font-mono); font-size: .72rem; }
.lbv-entry-airports {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent);
    font-size: .95rem;
    letter-spacing: .04em;
}
.lbv-entry-meta { line-height: 1.4; margin-top: 2px; }
.lbv-entry-time-block { text-align: right; }
.lbv-entry-block {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.lbv-entry-block-sub { font-family: var(--font-mono); margin-top: 2px; }
.lbv-delete {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-3);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.lbv-delete:hover {
    background: rgba(192,57,43,.15);
    color: #e8786a;
    border-color: rgba(192,57,43,.4);
}
.lbv-entry-notes {
    padding: 6px 12px 8px 130px;
    margin-top: -4px;
    font-style: italic;
}
.lbv-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-2);
}

/* Ocultar tabs marcadas como hidden */
.brief-tab.hidden { display: none !important; }


.risk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 880px) {
    .risk-grid { grid-template-columns: 1fr; }
}
.risk-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 4px solid;
    border-radius: var(--r-sm);
    padding: 14px 16px;
}
.risk-card.sev-green  { border-left-color: var(--sev-vfr); }
.risk-card.sev-amber  { border-left-color: #d4a73c; }
.risk-card.sev-red    { border-left-color: #c0392b; }

.risk-card-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.risk-card-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}
.risk-card-score {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.risk-card-score .muted { font-weight: 400; font-size: .65em; }
.risk-card-sub {
    margin-bottom: 12px;
    line-height: 1.5;
}
.risk-pill {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: .06em;
    border: 1px solid;
}
.risk-pill.sev-green {
    background: rgba(46,194,126,.18);
    color: var(--sev-vfr);
    border-color: rgba(46,194,126,.45);
}
.risk-pill.sev-amber {
    background: rgba(212,167,60,.18);
    color: #d4a73c;
    border-color: rgba(212,167,60,.5);
}
.risk-pill.sev-red {
    background: rgba(192,57,43,.18);
    color: #e8786a;
    border-color: rgba(192,57,43,.5);
}
.risk-factors {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 10px;
}
.risk-factor {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px;
    background: var(--bg-3);
    border-radius: 3px;
    border-left: 3px solid var(--line);
    font-size: .82rem;
    flex-wrap: wrap;
}
.risk-factor.sev-red    { border-left-color: #c0392b; }
.risk-factor.sev-amber  { border-left-color: #d4a73c; }
.risk-factor.sev-info   { border-left-color: var(--text-3); opacity: .85; }
.rf-label { flex: 1; color: var(--text); }
.rf-detail { font-size: .72rem; }
.rf-weight {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-3);
    padding: 1px 6px;
    background: var(--bg-card);
    border-radius: 3px;
    border: 1px solid var(--line-soft);
}
.risk-factor.sev-red .rf-weight { color: #e8786a; border-color: rgba(192,57,43,.4); }
.risk-factor.sev-amber .rf-weight { color: #d4a73c; border-color: rgba(212,167,60,.4); }
.risk-card-foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
    line-height: 1.5;
}
.risk-disclaimer {
    padding: 10px 14px;
    background: var(--bg-3);
    border-left: 3px solid var(--line);
    border-radius: 4px;
    line-height: 1.55;
}

/* ============ ORM: autodeclaración (4 pastillas) ============ */
.orm-decl {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}
.orm-decl.pending {
    background: color-mix(in srgb, var(--sev-caution) 7%, transparent);
    border-radius: 8px;
    padding: 10px;
    border-top: none;
}
.orm-decl-title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.orm-decl-badge {
    background: var(--sev-caution);
    color: #fff;
    font-size: .66rem;
    padding: 1px 8px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.orm-decl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    flex-wrap: wrap;
}
.orm-decl-q { font-size: .8rem; color: var(--text); }
.orm-seg { display: flex; gap: 4px; }
.orm-seg-btn {
    min-height: 34px;
    padding: 4px 12px;
    font-size: .76rem;
    border: 1px solid var(--line);
    background: var(--bg-card);
    color: var(--text-2);
    border-radius: 8px;
    cursor: pointer;
}
.orm-seg-btn.sel.lv0 { background: color-mix(in srgb, var(--sev-vfr) 16%, transparent); border-color: var(--sev-vfr); color: var(--text); font-weight: 600; }
.orm-seg-btn.sel.lv1 { background: color-mix(in srgb, var(--sev-caution) 18%, transparent); border-color: var(--sev-caution); color: var(--text); font-weight: 600; }
.orm-seg-btn.sel.lv2 { background: color-mix(in srgb, var(--sev-lifr) 16%, transparent); border-color: var(--sev-lifr); color: var(--text); font-weight: 600; }

/* ============ ORM: mitigaciones (Grave/Severo) ============ */
.orm-mits {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--sev-caution);
    background: color-mix(in srgb, var(--sev-caution) 8%, transparent);
}
.orm-mits.sev-red {
    border-color: var(--sev-lifr);
    background: color-mix(in srgb, var(--sev-lifr) 8%, transparent);
}
.orm-mits-title {
    font-weight: 600;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.orm-mits-sub { margin-bottom: 8px; }
.orm-mit-row, .orm-mit-ack {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: .82rem;
    cursor: pointer;
    min-height: 34px;
}
.orm-mit-row input, .orm-mit-ack input {
    width: 17px; height: 17px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
}
.orm-mit-ack {
    border-top: 1px dashed var(--line);
    margin-top: 6px;
    padding-top: 10px;
    font-weight: 600;
}

/* ====================== MODO OFFLINE ====================== */
.offline-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 16px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-2);
    transition: background .15s ease, border-color .15s ease;
}
.offline-indicator:hover {
    background: var(--bg-3);
    border-color: var(--accent);
}
.offline-indicator.warn {
    background: rgba(212,167,60,.12);
    border-color: rgba(212,167,60,.4);
    color: #d4a73c;
}
.oi-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.oi-dot.online { background: var(--sev-vfr); box-shadow: 0 0 6px rgba(46,194,126,.5); }
.oi-dot.offline { background: #d4a73c; }
.oi-text { font-family: var(--font-mono); letter-spacing: .04em; }

/* Banner offline */
.offline-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: rgba(212,167,60,.12);
    border: 1px solid rgba(212,167,60,.4);
    border-radius: var(--r-sm);
    font-size: .85rem;
}
.offline-banner.hidden { display: none; }
.offline-banner.warn {
    background: rgba(192,57,43,.10);
    border-color: rgba(192,57,43,.4);
}
.of-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    color: #d4a73c;
}
.of-icon.warn { color: var(--sev-lifr); }
.of-text {
    display: flex; flex-direction: column;
    gap: 2px;
    flex: 1;
}
.of-text strong { color: var(--text); }

/* Barra de progreso del modal de offline */
.offline-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}
.offline-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--sev-vfr));
    width: 0%;
    transition: width .3s ease;
}

/* ====================== CREW MATE (asistente IA) ====================== */
/* FAB circular, pegado al borde derecho: solo el logo + "AI"/"IA".
   Compacto para no tapar contenido. */
.ai-fab {
    position: fixed;
    bottom: 16px;
    right: 8px;
    z-index: 1500;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 58px; height: 58px;
    padding: 0;
    background: var(--accent);
    color: var(--bg);
    border: 0;
    border-radius: 50%;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(34, 211, 197, 0.35),
                0 0 0 1px rgba(255,255,255,.15);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ai-fab:hover {
    background: color-mix(in srgb, var(--accent) 92%, white);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 28px rgba(34, 211, 197, 0.45),
                0 0 0 1px rgba(255,255,255,.25);
}
.ai-fab.hidden { display: none; }
.ai-fab-label { font-weight: 800; font-size: .64rem; letter-spacing: .08em; line-height: 1; }
/* Plate oscuro circular detrás del brand mark dentro del FAB.
   Sobre el fondo naranja del botón, el trazo naranja del chevron
   desaparecería. El plate oscuro hace de "porthole" / instrumento
   y le da contraste sin alterar el mark de marca. */
.ai-fab-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0a1322;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    flex-shrink: 0;
}
.ai-fab-mark .brand-mark { width: 19px; height: 19px; }
/* Dentro del FAB el chevron gris pierde contraste contra fondo oscuro;
   usamos la versión clara automática del brand mark. Esto NO es cambiar
   el logo: el SVG fuente sigue siendo el oficial; CSS sólo adapta el
   tono del gris al contexto, exactamente como ya hace en dark mode. */
.ai-fab .brand-mark .bm-gray { stroke: #9DB0C5; }

@media (max-width: 600px) {
    /* Se mantiene circular con logo + AI/IA (sin ocultar el texto) */
    .ai-fab { width: 54px; height: 54px; bottom: 14px; right: 6px; }
}

.ai-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 440px;
    max-width: 100vw;
    background: var(--bg-card);
    border-left: 1px solid var(--line);
    z-index: 2000;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: ai-slide-in 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.ai-panel.hidden { display: none; }
@keyframes ai-slide-in {
    from { transform: translateX(100%); opacity: 0.6; }
    to { transform: translateX(0); opacity: 1; }
}
.ai-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-card);
}
.ai-head-id { display: flex; align-items: center; gap: 10px; color: var(--accent); }
.ai-head-id h3 { margin: 0; font-size: 1rem; color: var(--text); }
.ai-sub { font-size: .72rem; }
.ai-head-actions { display: flex; gap: 4px; }
.ai-icon-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.ai-icon-btn:hover { background: var(--bg-3); color: var(--accent); }

.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.ai-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-2);
}
/* Brand mark centrado en estado vacío del panel IA — refuerza que la IA
   es parte de AI CrewMate, no un add-on genérico. */
.ai-empty-mark {
    display: block;
    margin: 0 auto 14px;
}
.ai-empty-title { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ai-empty-sub { font-size: .85rem; color: var(--text-3); margin-bottom: 18px; line-height: 1.5; }
.ai-suggestions {
    display: flex; flex-direction: column; gap: 8px;
    max-width: 320px; margin: 0 auto;
}
.ai-sugg {
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    color: var(--text-2);
    padding: 8px 12px;
    border-radius: 18px;
    cursor: pointer;
    font-size: .82rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    font-family: inherit;
}
.ai-sugg:hover {
    background: rgba(125,184,255,.10);
    border-color: rgba(125,184,255,.4);
    color: var(--accent);
}

.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .88rem;
    line-height: 1.55;
    word-wrap: break-word;
}
.ai-msg-user .ai-msg-bubble {
    background: linear-gradient(135deg, #5189d4, #3d6ea8);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ai-msg-assistant .ai-msg-bubble {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--line-soft);
    border-bottom-left-radius: 4px;
}
.ai-msg-bubble code {
    background: rgba(0,0,0,.25);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: .85em;
}
.ai-msg-bubble strong { color: var(--accent); }
.ai-msg-user .ai-msg-bubble strong { color: #ffd6a5; }

/* Indicador "está escribiendo..." */
.ai-typing {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 14px 16px;
}
.ai-typing span {
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--text-3);
    border-radius: 50%;
    animation: ai-typing 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-typing {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.ai-input-bar {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: var(--bg-card);
}
.ai-input {
    flex: 1;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 9px 14px;
    color: var(--text);
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.4;
    resize: none;
    max-height: 120px;
    transition: border-color .15s ease;
}
.ai-input:focus {
    outline: none;
    border-color: var(--accent);
}
.ai-send {
    background: var(--accent);
    color: var(--bg);
    border: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .15s ease, transform .15s ease;
    flex-shrink: 0;
}
.ai-send:hover { transform: scale(1.05); }
.ai-send:active { transform: scale(.95); }
.ai-status {
    padding: 6px 16px 8px;
    font-size: .72rem;
    text-align: center;
    min-height: 14px;
}
.ai-dialog { max-width: 480px; }

/* ====================== LANG TOGGLE ====================== */
.lang-toggle {
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--text-2);
    height: 34px;
    min-width: 44px;
    padding: 0 10px;
    border-radius: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lang-toggle:hover {
    background: var(--bg-3);
    color: var(--accent);
    border-color: var(--accent);
}
.lang-current { line-height: 1; }

/* ====================== PERSONAL MINIMA ====================== */
.topbar-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    padding: 0;
}
.topbar-btn:hover {
    background: var(--bg-card);
    color: var(--accent);
    border-color: var(--accent);
}

/* Banner de violaciones bajo el header del briefing */
.personal-minima-banner { margin: 14px 18px 0; }
.personal-minima-banner:empty { display: none; }
.pm-banner {
    border-radius: var(--r-md);
    padding: 12px 16px;
    font-size: .88rem;
    border-left-width: 3px;
    border-left-style: solid;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pm-banner.ok {
    display: flex; align-items: center; gap: 12px;
    background: var(--sev-vfr-soft);
    border: 1px solid var(--line);
    border-left-color: var(--sev-vfr);
    color: var(--text);
}
.pm-banner.violation, .pm-banner.caution {
    background: var(--sev-lifr-soft);
    border: 1px solid var(--line);
    border-left-color: var(--sev-lifr);
    overflow: hidden;
}
.pm-banner.caution {
    background: var(--sev-ifr-soft);
    border-left-color: var(--sev-ifr);
}
.pm-banner.violation > summary, .pm-banner.caution > summary { cursor: pointer; }
.pm-banner-sum {
    display: flex; align-items: center; gap: 10px;
    list-style: none;
    padding: 2px 0;
}
.pm-banner-sum::marker, .pm-banner-sum::-webkit-details-marker { display: none; }
.pm-banner-icon { font-size: 1.1rem; }
.pm-banner.ok .pm-banner-icon { color: var(--sev-vfr); }
.pm-banner.violation .pm-banner-icon { color: #e8786a; }
.pm-banner.caution .pm-banner-icon { color: #d4a73c; }
.pm-banner-edit {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
}
.pm-banner-edit:hover { background: var(--bg-card); color: var(--text); }
.pm-viol-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.pm-viol-item {
    display: grid;
    grid-template-columns: 70px 1fr;
    grid-template-rows: auto auto;
    grid-column-gap: 10px;
    padding: 6px 10px;
    background: var(--bg-card);
    border-left: 3px solid #c0392b;
    border-radius: 3px;
    cursor: pointer;
    transition: background .15s ease;
}
.pm-viol-item.sev-caution { border-left-color: #d4a73c; }
.pm-viol-item:hover { background: var(--bg-3); }
.pm-viol-icao {
    grid-row: 1 / 3;
    align-self: center;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .04em;
}
.pm-viol-label { font-weight: 600; color: var(--text); font-size: .85rem; }
.pm-viol-detail { font-size: .75rem; line-height: 1.4; }

/* Pista con violación de mínimo personal */
.map-rwy-comp.pm-violation {
    background: rgba(192,57,43,.22);
    color: #e8786a;
    border-color: rgba(192,57,43,.5);
    font-weight: 700;
}

/* Modal — premium spring entry + backdrop blur progresivo */
.pm-modal {
    position: fixed; top:0;right:0;bottom:0;left:0; z-index: 9999;
    pointer-events: auto;
}
.pm-modal.hidden { display: none; }

/* Estados de animación — se aplican vía CSS sin necesidad de JS */
.pm-backdrop {
    position: absolute; top:0;right:0;bottom:0;left:0;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    animation: pm-backdrop-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.theme-day .pm-backdrop {
    animation: pm-backdrop-in-day 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pm-backdrop-in {
    from { background: rgba(0,0,0,0);   backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
    to   { background: rgba(0,0,0,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}
@keyframes pm-backdrop-in-day {
    from { background: rgba(15,23,42,0);    backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
    to   { background: rgba(15,23,42,0.30); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}

.pm-dialog {
    position: absolute;
    top: 50%; left: 50%;
    width: 92%; max-width: 580px;
    max-height: 88vh;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
    /* Spring entry — escala desde 0.90 con overshoot ligero */
    transform: translate(-50%, -50%) scale(0.90);
    opacity: 0;
    animation: pm-dialog-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pm-dialog-in {
    from { transform: translate(-50%, -50%) scale(0.90); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}
/* En tactil (iPad/Android) y pantallas estrechas, las ventanas de opciones/
   configuracion se abren SIEMPRE a pantalla completa: mas superficie util,
   sin bordes que recorten listas, y patron nativo de app movil. */
@media (hover: none), (max-width: 700px) {
    .pm-modal .pm-dialog {
        top: 0; left: 0;
        width: 100%; max-width: none;
        height: 100dvh; max-height: 100dvh;
        border-radius: 0;
        border: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: none;
        animation: pm-dialog-in-full 0.28s ease forwards;
    }
    @keyframes pm-dialog-in-full {
        from { transform: translateY(16px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    .pm-modal .pm-body { max-height: none; }
    /* Campos comodos para dedo y sin zoom automatico de iOS (salta con <16px) */
    .pm-row input[type="number"], .pm-row input[type="text"],
    .pm-row input[type="date"], .pm-row input[type="datetime-local"], .pm-row select {
        min-height: 44px;
        font-size: 16px;
    }
    .pm-row input[type="number"] { width: 110px; }
    .aicm-step-btn { width: 44px; height: 44px; }
}

/* ============ CONTROLES CON ESTILO PROPIO EN VENTANAS DE OPCIONES ============
   Checkboxes, selects y steppers numericos dejan de ser los genericos del
   navegador y adoptan los tokens de la app (tema dia/noche incluido). */
.pm-modal input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px; height: 22px;
    min-width: 22px;
    margin: 0;
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    background: var(--bg-recess);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.pm-modal input[type="checkbox"]::before {
    content: "";
    width: 12px; height: 12px;
    transform: scale(0);
    transition: transform .12s ease;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background: var(--bg);
}
.pm-modal input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.pm-modal input[type="checkbox"]:checked::before { transform: scale(1); }
.pm-modal input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Select nativo oculto: lo sustituye el control propio .aicm-select (app.js).
   El <select> sigue en el DOM para que el resto del codigo lea/escriba su valor. */
.pm-modal select.aicm-select-native { display: none !important; }
.aicm-select {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 150px;
    padding: 8px 12px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: .88rem;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
}
.aicm-select:hover { border-color: var(--line-strong); }
.aicm-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aicm-select-chev { color: var(--text-2); font-size: .75em; flex-shrink: 0; }
@media (hover: none) {
    .aicm-select { min-height: 44px; font-size: 16px; }
}

/* ====== AICM TIME — selector de hora en cascada (horas | minutos) ====== */
.aicm-time { width: 200px; padding: 0 0 6px; overflow: visible; }
.aicm-time-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
}
.aicm-time-val { font: 700 1.05rem var(--font-num, monospace); color: var(--accent); letter-spacing: .06em; }
.aicm-time-ok {
    background: var(--accent);
    color: var(--bg);
    border: 0;
    border-radius: 8px;
    padding: 6px 16px;
    font: 700 .8rem var(--font-ui, inherit);
    cursor: pointer;
    min-height: 32px;
}
.theme-day .aicm-time-ok { color: #fff; }
.aicm-time-cols {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    height: 200px;              /* 5 filas de 40px; la central es la elegida */
    padding: 0 10px;
}
.aicm-time-band {
    position: absolute;
    left: 8px; right: 8px;
    top: 80px; height: 40px;    /* banda central */
    border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: 8px;
    pointer-events: none;
}
.aicm-time-col {
    width: 64px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 80px 0;            /* deja centrar la primera y la última fila */
    text-align: center;
}
.aicm-time-col::-webkit-scrollbar { display: none; }
.aicm-time-col b {
    display: block;
    height: 40px;
    line-height: 40px;
    scroll-snap-align: center;
    font: 600 19px var(--font-num, monospace);
    color: var(--text-3);
    cursor: pointer;
}
.aicm-time-col b.sel { color: var(--text); font-weight: 700; }
.aicm-time-sep { align-self: center; font: 700 20px var(--font-num, monospace); color: var(--text-3); }

/* Hora HHMM directa + boton Ahora en "Añadir vuelo" (sustituye la rueda) */
.lbf-trow { display: flex; gap: 8px; align-items: center; }
.lbf-in.lbf-time {
    font-family: var(--font-num, monospace);
    font-size: 1.1rem;
    letter-spacing: .06em;
    text-align: center;
    width: 96px;
    flex: 0 0 auto;
}
.lbf-in.lbf-time.bad { border-color: var(--sev-lifr); }
.lbf-now {
    padding: 8px 12px;
    min-height: 36px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--bg-3);
    color: var(--text-2);
    font-size: .78rem;
    font-family: inherit;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.lbf-now:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
@media (hover: none) {
    .lbf-now { min-height: 44px; }
    .lbf-in.lbf-time { min-height: 44px; font-size: 16px; }
}

/* Severidad con FORMA ademas de color (WCAG 1.4.1): ▲ caution, ◆ critico,
   ⓘ info. El punto de color se sustituye por la forma en ambar/rojo/azul. */
.tab-sev-dot.tab-sev-shape {
    background: transparent !important;
    box-shadow: none !important;
    width: auto; height: auto;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
}
.tab-sev-dot.tab-sev-shape svg { display: block; }
.tab-sev-shape.sev-mvfr { color: var(--sev-mvfr); }
.tab-sev-shape.sev-ifr  { color: var(--sev-ifr); }
.tab-sev-shape.sev-lifr { color: var(--sev-lifr); animation: none; }
.rfcv-sev-mark {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 6px;
    font-size: .8rem;
    font-weight: 700;
}
.rfcv-sev-mark.sev-red   { color: #ef4444; }
.rfcv-sev-mark.sev-amber { color: #f97316; }
.rfcv-sev-mark.sev-green { color: #22c55e; }

/* Validacion en linea del plan de vuelo (WCAG 3.3.1) */
.field-invalid { border-color: var(--sev-lifr) !important; }
.field-error {
    color: var(--sev-lifr);
    font-size: .78rem;
    margin-top: 4px;
    line-height: 1.35;
}

/* ============ PLAN SIMPLIFICADO: esenciales + detalles plegables ============ */
.fpl-essential { margin-bottom: 12px; }
.fpl-essential .field input,
.fpl-essential .field select { font-size: 1.02rem; }
.field-label .req { color: var(--accent); font-weight: 700; margin-left: 2px; }
.fpl-details-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--text-2);
    font-size: .88rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.fpl-details-toggle:hover { border-color: var(--line-strong); color: var(--text); }
.fpl-details-chev {
    font-size: .8em;
    flex-shrink: 0;
    transition: transform .18s ease;
}
.fpl-details.open .fpl-details-chev { transform: rotate(90deg); }
.fpl-details-opt { color: var(--text-3); }
.fpl-details-summary {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-3);
    font-size: .78rem;
    font-family: var(--font-mono);
}
.fpl-details-body { margin-top: 10px; }
.fpl-details-body.hidden { display: none; }
@media (hover: none) {
    .fpl-details-toggle { min-height: 44px; }
}

/* ==== ONBOARDING v2: multi-aeronave, base con nombre, paso final ==== */
.ob-ac-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
    min-height: 34px;
}
.ob-ac-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text);
    font-family: var(--font-num, monospace);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ob-ac-chip:hover { border-color: var(--accent); }
.ob-ac-chip.primary { border-color: var(--accent); background: var(--accent-soft); }
.ob-ac-chip.primary .ti { color: var(--accent); font-size: .85em; }
.ob-ac-chip-x {
    display: inline-grid;
    place-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    color: var(--text-2);
    font-weight: 700;
    font-style: normal;
}
.ob-ac-chip-x:hover { background: var(--sev-lifr); color: var(--bg); }
.ob-base-name { text-align: center; margin-top: 8px; min-height: 1.2em; }
.ob-base-name.ok { color: var(--sev-vfr); }
/* Toggle "mi base es un campo ULM" — habilita búsqueda por nombre en el paso 2 */
.ob-ulm-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: .82rem;
    color: var(--text-2);
    cursor: pointer;
    min-height: 44px; /* objetivo táctil */
}
.ob-ulm-row input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.ob-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px auto;
    max-width: 380px;
    text-align: left;
}
.ob-sum-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card);
}
.ob-sum-row .ti { color: var(--accent); font-size: 18px; flex-shrink: 0; }
.ob-sum-lbl { color: var(--text-3); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; width: 84px; flex-shrink: 0; }
.ob-sum-val { color: var(--text); font-size: .92rem; font-weight: 600; min-width: 0; }
.ob-final-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}
.ob-final-main { padding: 13px 22px !important; font-size: 1rem !important; display: inline-flex; align-items: center; gap: 8px; }
@media (hover: none) {
    .ob-ac-chip { min-height: 44px; }
    .ob-ac-chip-x { width: 28px; height: 28px; }
}
/* Perfil: chips "También vuelo" + fila de añadir */
.pp-ac-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; min-height: 30px; }
.pp-ac-addrow { display: flex; gap: 8px; align-items: center; }
.pp-ac-addrow input { width: 110px; }

/* ============ MODO DEMO: boton en el gate + banner persistente ============ */
#welcome-gate .wg-demo {
    background: transparent;
    border: 1px dashed rgba(255,255,255,.22);
    color: #aebed2;
    font-weight: 500;
}
#welcome-gate .wg-demo:hover { border-color: #22D3C5; color: #22D3C5; background: rgba(34,211,197,.06); }
#demo-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 42px;
    padding: 7px 14px;
    background: #92400E;
    color: #FFF7ED;
    font-size: .85rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
#demo-banner .db-txt { font-weight: 600; letter-spacing: .01em; }
#demo-banner button {
    background: #FFF7ED;
    color: #92400E;
    border: 0;
    border-radius: 999px;
    padding: 7px 16px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 30px;
}
#demo-banner button:hover { filter: brightness(0.95); }
/* El banner empuja la topbar sticky y el contenido hacia abajo */
html.demo-mode body { padding-top: 46px; }
html.demo-mode .topbar { top: 46px; }
/* Los toasts tambien bajan: si no, el banner los tapa */
html.demo-mode .toast-container { top: calc(env(safe-area-inset-top, 0px) + 60px); }
@media (hover: none) {
    #demo-banner button { min-height: 44px; }
}

/* Steppers -/+ de los campos numericos (los crea app.js) */
.pm-modal input[type="number"]::-webkit-outer-spin-button,
.pm-modal input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pm-modal input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.aicm-stepper { display: inline-flex; align-items: center; gap: 6px; }
.aicm-step-btn {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--bg-3);
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.aicm-step-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.aicm-step-btn:active { transform: scale(0.94); }
.pm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.pm-head h2 { margin: 0; font-size: 1.05rem; color: var(--text); }
.pm-close {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.pm-close:hover { background: var(--bg-3); color: var(--text); }
.pm-intro { padding: 8px 18px 0; }
.pm-body {
    flex: 1; overflow-y: auto;
    padding: 8px 18px 18px;
    display: flex; flex-direction: column; gap: 14px;
}
.pm-section h3 {
    margin: 12px 0 8px;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
}
.pm-row {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 0;
    font-size: .85rem;
}
.pm-row > span:first-child { flex: 1; color: var(--text-2); }
.pm-row input[type="number"] {
    width: 80px;
    padding: 5px 8px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: .82rem;
    text-align: right;
}
.pm-row select {
    padding: 5px 8px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font-size: .82rem;
}
.pm-unit {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-3);
    min-width: 24px;
}
.pm-toggle { padding: 4px 0; }
.pm-toggle input { margin-right: 8px; }
.pm-pheno-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}
.pm-check {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem;
    color: var(--text-2);
    cursor: pointer;
}
.pm-check input { margin: 0; }
.pm-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid var(--line-soft);
    background: var(--bg-3);
}
.pm-foot-right { display: flex; gap: 8px; }
.pm-btn {
    padding: 7px 16px;
    border-radius: 4px;
    border: 1px solid var(--line);
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: background .15s ease;
}
.pm-btn-secondary {
    background: transparent;
    color: var(--text-2);
}
.pm-btn-secondary:hover { background: var(--bg-card); color: var(--text); }
.pm-btn-primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.pm-btn-primary:hover { opacity: .9; }

/* ====================== NOTAMS — VENTANA OPERATIVA ====================== */
.notams-window-chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(125,184,255,.12);
    color: var(--accent);
    border: 1px solid rgba(125,184,255,.3);
    letter-spacing: .03em;
}
.notams-window-chip.warn {
    background: rgba(212,167,60,.12);
    color: #d4a73c;
    border-color: rgba(212,167,60,.4);
}

/* Badge "EN VENTANA" / "FUERA" */
.notam-flight-badge {
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: .04em;
    border: 1px solid;
}
.notam-flight-badge.in {
    background: rgba(46,194,126,.18);
    color: var(--sev-vfr);
    border-color: rgba(46,194,126,.45);
}
.notam-flight-badge.out {
    background: rgba(120,120,140,.15);
    color: var(--text-3);
    border-color: var(--line);
    opacity: .9;
}

/* Badge condicional: PPR / O/R / EXC */
.notam-cond-badge {
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: .05em;
    border: 1px solid;
}
.notam-cond-badge.ppr {
    background: rgba(212,167,60,.18);
    color: #e0b551;
    border-color: rgba(212,167,60,.5);
}
.notam-cond-badge.exc {
    background: rgba(125,184,255,.15);
    color: var(--accent);
    border-color: rgba(125,184,255,.4);
}

/* Header de columna NOTAM con ventana */
.notam-col-window {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-3);
    background: var(--bg-card);
    padding: 1px 7px;
    border-radius: 3px;
    border: 1px solid var(--line-soft);
}

/* Sección "fuera de la ventana" (a nivel global y a nivel columna) */
.notams-out-of-window,
.notam-col-oow {
    margin-top: 14px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.notams-out-of-window > summary,
.notam-col-oow > summary {
    cursor: pointer;
    padding: 10px 12px;
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-card);
    list-style: none;
    user-select: none;
}
.notams-out-of-window > summary::marker,
.notam-col-oow > summary::marker { display: none; }
.notams-out-of-window > summary::-webkit-details-marker,
.notam-col-oow > summary::-webkit-details-marker { display: none; }
.notams-out-of-window[open] > summary,
.notam-col-oow[open] > summary { border-bottom: 1px solid var(--line-soft); }
.oow-icon { font-size: 1rem; }
.oow-title { font-weight: 600; color: var(--text-2); }
.oow-body, .notam-col-oow-body {
    padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.notam-col-oow {
    margin-top: 8px;
    font-size: .85rem;
}

/* Línea de schedule en card NOTAM */
.notam-tag-schedule {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-2);
    padding: 4px 6px;
    background: rgba(125,184,255,.07);
    border-left: 2px solid var(--accent);
    border-radius: 2px;
    margin: 4px 0;
    letter-spacing: .02em;
}

/* Chip de ventana temporal en la barra superior del aeródromo */
.airport-window-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-2);
    border: 1px solid var(--line-soft);
    letter-spacing: .03em;
}
.airport-window-chip.warn {
    background: rgba(212,167,60,.12);
    color: #d4a73c;
    border-color: rgba(212,167,60,.4);
}
.airport-window-chip .muted { font-weight: 500; }

/* Sub-encabezado de ventana en la sección sidebar */
.map-notam-window {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    padding: 6px 8px;
    margin-bottom: 8px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    font-size: .76rem;
}
.map-notam-window.warn {
    background: rgba(212,167,60,.10);
    border-color: rgba(212,167,60,.35);
}
.map-notam-window-label {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
    background: rgba(125,184,255,.12);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid rgba(125,184,255,.3);
}
.map-notam-window-time {
    font-family: var(--font-mono);
    color: var(--text);
    font-weight: 600;
}

/* Chip de ventana en el detalle al click */
.anc-window {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-3);
    padding: 2px 8px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
}

/* Sidebar — sección de NOTAMs sobre carta */
.map-notam-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
}
.map-notam-label {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-3);
    width: 36px;
    flex-shrink: 0;
    letter-spacing: .04em;
}
.map-notam-pill {
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .02em;
}
.map-notam-pill.sev-red {
    background: rgba(192,57,43,.18);
    color: #e8786a;
    border: 1px solid rgba(192,57,43,.4);
}
.map-notam-pill.sev-amber {
    background: rgba(212,167,60,.18);
    color: #d4a73c;
    border: 1px solid rgba(212,167,60,.4);
}
.map-notam-pill.sev-partial {
    background: rgba(232,119,26,.18);
    color: #f0913a;
    border: 1px solid rgba(232,119,26,.42);
}
.map-notam-refs {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding-left: 44px;
    margin-top: 2px;
}
.map-notam-ref {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: .04em;
}
.map-notam-ref[onclick]:hover { filter: brightness(1.25); outline: 1px solid currentColor; }
.map-notam-ref.sev-red {
    background: rgba(192,57,43,.22);
    color: #f08576;
    border: 1px solid rgba(192,57,43,.5);
}
.map-notam-ref.sev-amber {
    background: rgba(212,167,60,.20);
    color: #e0b551;
    border: 1px solid rgba(212,167,60,.45);
}
.map-notam-ref.sev-partial {
    background: rgba(232,119,26,.22);
    color: #f0954a;
    border: 1px solid rgba(232,119,26,.5);
}

/* Detalle de NOTAM al click sobre elemento */
.airport-notam-detail {
    display: flex; flex-direction: column; gap: 8px;
}
.anc-header {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
}
.anc-element {
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .04em;
}
.anc-status {
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: .03em;
}
.anc-status.sev-red {
    background: rgba(192,57,43,.22);
    color: #f08576;
    border: 1px solid rgba(192,57,43,.5);
}
.anc-status.sev-amber {
    background: rgba(212,167,60,.22);
    color: #e0b551;
    border: 1px solid rgba(212,167,60,.5);
}
.anc-airport { margin-left: auto; }
.anc-close {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.anc-close:hover { background: var(--bg-card); color: var(--text); }
.anc-notams {
    list-style: none;
    margin: 0; padding: 0;
    max-height: 220px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
}
.anc-item {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    padding: 8px 10px;
}
.anc-item-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.anc-num {
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 700;
    color: var(--accent);
}
.anc-dates {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--text-3);
}
.anc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.anc-tag {
    font-size: .7rem;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--bg-3);
    color: var(--text-2);
    border: 1px solid var(--line-soft);
}
.anc-raw {
    font-family: var(--font-mono);
    font-size: .76rem;
    line-height: 1.4;
    color: var(--text-2);
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.map-side-sec {
    display: flex; flex-direction: column;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}
.map-side-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.map-side-title {
    margin: 0 0 4px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    font-weight: 700;
}
.map-side-row {
    display: flex; align-items: center; gap: 8px;
    font-size: .85rem;
    padding: 3px 0;
}
.map-side-row .lbl { color: var(--text-3); flex: 1; }
.map-side-row .val { font-family: var(--font-mono); color: var(--text); font-weight: 600; }

/* Leyenda vertical */
.map-legend-vert {
    display: flex; flex-direction: column; gap: 4px;
}
.legend-item {
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem;
    color: var(--text-2);
}
.legend-bar {
    display: inline-block;
    width: 22px; height: 5px;
    border-radius: 2px;
    flex-shrink: 0;
}
.legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Badge de fuente de la BD */
.bundle-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(46,194,126,.15);
    color: var(--sev-vfr);
    border: 1px solid rgba(46,194,126,.3);
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: .04em;
}
.bundle-badge.cache {
    background: rgba(93,173,226,.15);
    color: var(--sev-mvfr);
    border-color: rgba(93,173,226,.3);
}

.navdata-cmd {
    margin: 6px 0;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--accent);
    white-space: pre-wrap;
    word-break: break-all;
}

/* Drop-zone para subir fix.dat manualmente */
.navdata-cta {
    margin-top: 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(245,176,65,.10), rgba(245,176,65,.04));
    border: 1px solid rgba(245,176,65,.35);
    border-radius: var(--r-sm);
    font-size: .82rem;
}
.navdata-cta strong { color: var(--sev-ifr); }
.navdata-cta p { margin: 6px 0; line-height: 1.5; }
.navdata-cta code {
    font-family: var(--font-mono);
    background: var(--bg-card);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .85em;
    border: 1px solid var(--line-soft);
}

.navdata-drop {
    margin-top: 8px;
    padding: 14px;
    background: var(--bg-3);
    border: 2px dashed var(--line);
    border-radius: var(--r-sm);
    text-align: center;
    transition: all .18s;
    cursor: pointer;
}
.navdata-drop:hover, .navdata-drop.drag-over {
    border-color: var(--accent);
    background: rgba(247,183,51,.06);
}
.navdata-drop-label {
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--text-2);
    font-size: .85rem;
}
.navdata-drop-icon { font-size: 1.4rem; color: var(--accent); }
#navdata-upload-status { margin-top: 6px; }

/* Diagnóstico de waypoints en sidebar */
.waypoint-diag > summary {
    cursor: pointer;
    padding: 4px 0;
    list-style: none;
    user-select: none;
}
.waypoint-diag > summary::-webkit-details-marker { display: none; }
.waypoint-diag > summary::before {
    content: "▶";
    font-size: .55rem;
    color: var(--text-3);
    transition: transform .18s;
    margin-right: 6px;
}
.waypoint-diag[open] > summary::before { transform: rotate(90deg); }
.wp-diag-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.wp-row {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--text-3);
    border-radius: 4px;
    padding: 6px 8px;
}
.wp-row.resolved   { border-left-color: var(--sev-vfr); }
.wp-row.unresolved { border-left-color: var(--sev-lifr); }
.wp-row-head {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono);
    font-size: .76rem;
}
.wp-ident { font-weight: 700; color: var(--text); }
.wp-result-good { color: var(--sev-vfr); font-size: .68rem; }
.wp-result-bad  { color: var(--sev-lifr); font-size: .68rem; }
.wp-attempts { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.wp-attempt {
    display: flex; align-items: center; gap: 6px;
    font-size: .68rem;
    color: var(--text-3);
    padding-left: 6px;
}
.wp-src { min-width: 80px; }
.wp-badge {
    font-family: var(--font-mono);
    padding: 0 5px;
    border-radius: 3px;
    font-weight: 700;
    font-size: .68rem;
}
.wp-badge.ok    { background: rgba(46,194,126,.15); color: var(--sev-vfr); }
.wp-badge.miss  { background: var(--bg-3); color: var(--text-3); }
.wp-badge.err   { background: rgba(231,76,60,.15); color: var(--sev-lifr); }
.wp-badge.gray  { background: var(--bg-3); color: var(--text-3); font-weight: 500; }

/* OpenAIP - CTA en sidebar y modal de configuración */
.openaip-active { color: var(--sev-vfr); font-weight: 600; }
.btn-link {
    background: transparent;
    border: 0;
    color: var(--accent-2);
    cursor: pointer;
    font-size: .82rem;
    padding: 2px 6px;
    text-decoration: underline;
}
.btn-link:hover { color: var(--accent); }

.openaip-cta {
    margin-top: 4px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(247,183,51,.10), rgba(247,183,51,.04));
    border: 1px solid rgba(247,183,51,.35);
    border-radius: var(--r-sm);
    display: flex; flex-direction: column; gap: 6px;
}
.openaip-cta-head { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.openaip-cta-icon { font-size: 1rem; }
.openaip-cta p { margin: 0; line-height: 1.4; }
.openaip-cta .btn { align-self: flex-start; }

.openaip-modal {
    position: fixed; top:0;right:0;bottom:0;left:0;
    background: rgba(0,0,0,.7);
    display: grid; place-items: center;
    z-index: 350;
    padding: 16px;
    backdrop-filter: blur(4px);
    animation: proc-modal-fadein .18s ease-out;
}
.openaip-modal.hidden { display: none; }
.openaip-modal-box {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    max-width: 580px; width: 100%;
    max-height: 92vh; overflow: hidden;
    display: flex; flex-direction: column;
    animation: proc-modal-slide .25s cubic-bezier(0.32, 0.72, 0, 1);
}

.openaip-intro {
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 14px;
    color: var(--text);
}

.openaip-steps {
    display: flex; flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.openaip-steps .step {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font-size: .88rem;
    line-height: 1.5;
}
.openaip-steps .num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: var(--accent);
    color: #1a1004;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800;
    font-size: .82rem;
}
.openaip-steps a {
    color: var(--accent-2);
    font-weight: 600;
}
.openaip-steps code {
    font-family: var(--font-mono);
    background: var(--bg-card);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .85em;
    border: 1px solid var(--line-soft);
}

.openaip-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    font-weight: 600;
    margin-bottom: 6px;
}
.openaip-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: .88rem;
    margin-bottom: 8px;
}
.openaip-input:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(247,183,51,.18);
}
.openaip-current {
    margin-bottom: 10px;
    padding: 8px 10px;
    background: var(--bg-2);
    border-radius: 4px;
    font-style: italic;
}

.openaip-test-result {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: .85rem;
    display: flex; align-items: center; gap: 10px;
    line-height: 1.4;
}
.openaip-test-result.hidden { display: none; }
.openaip-test-result.ok {
    background: rgba(46,194,126,.12);
    border: 1px solid rgba(46,194,126,.4);
    color: var(--sev-vfr);
}
.openaip-test-result.err {
    background: rgba(231,76,60,.12);
    border: 1px solid rgba(231,76,60,.4);
    color: var(--sev-lifr);
}
.openaip-test-result .icon {
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
}

.openaip-modal-actions {
    display: flex; gap: 8px; align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    flex-wrap: wrap;
}

.openaip-disclaimer {
    margin-top: 14px;
    padding: 8px 10px;
    background: var(--bg-2);
    border-radius: 4px;
    font-style: italic;
    color: var(--text-3);
    font-size: .76rem;
    line-height: 1.5;
}

/* Waypoints en el mapa: rombo + etiqueta siempre visible */
.map-wp-icon-wrap {
    background: transparent !important;
    border: 0 !important;
}
.map-waypoint {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    user-select: none;
}
.map-wp-diamond {
    width: 9px;
    height: 9px;
    background: #f7b733;
    transform: rotate(45deg);
    border: 1.5px solid rgba(20, 20, 20, .75);
    box-shadow:
        0 0 0 1px rgba(247, 183, 51, .55),
        0 1px 3px rgba(0, 0, 0, .5);
}
.map-wp-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    color: #f7b733;
    background: rgba(15, 20, 25, .82);
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 5px;
    white-space: nowrap;
    letter-spacing: .04em;
    border: 1px solid rgba(247, 183, 51, .35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* Eventos en el mapa: turbulencia, icing, jet */
.map-event-wrap { background: transparent !important; border: 0 !important; }
.map-event-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 14px; font-weight: 700;
    color: white;
    box-shadow: 0 0 0 2px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.4);
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* Eventos METEO = ROMBOS con color propio por fenómeno (los círculos
   quedan reservados para NOTAMs). La severidad se expresa con intensidad
   de color y pulso — NUNCA con el rojo de NOTAM activo, que confundía. */
.map-event-icon.turb, .map-event-icon.ice {
    border-radius: 7px;
    transform: rotate(45deg);
}
.map-event-icon.turb > span, .map-event-icon.ice > span {
    display: block;
    transform: rotate(-45deg);
}
.map-event-icon.turb.sev-mod  { background: #e6a83a; }
.map-event-icon.turb.sev-high { background: #e0762a; animation: pulse-turb 1.6s ease-in-out infinite; }
.map-event-icon.ice.sev-mod   { background: #5dade2; }
.map-event-icon.ice.sev-high  { background: #2e78d2; animation: pulse-ice 1.6s ease-in-out infinite; }
.map-event-icon.jet.sev-normal{ background: #3498db; }
.map-event-icon.jet.sev-strong{ background: #9b59b6; }
@keyframes pulse-turb {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.4); }
    50%      { box-shadow: 0 0 0 4px rgba(224,118,42,.5), 0 0 14px rgba(224,118,42,.65); }
}
@keyframes pulse-ice {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.4); }
    50%      { box-shadow: 0 0 0 4px rgba(46,120,210,.5), 0 0 14px rgba(46,120,210,.65); }
}

/* Lista de eventos en sidebar */
.map-event-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 0;
}
.map-event-pill {
    font-size: .76rem;
    padding: 3px 9px;
    border-radius: 12px;
    font-weight: 600;
    color: white;
    display: inline-flex; align-items: center; gap: 4px;
}
.map-event-pill.turb { background: #e6a83a; }
.map-event-pill.turb.sev-high { background: #e0584d; }
.map-event-pill.ice  { background: #5dade2; }
.map-event-pill.ice.sev-high { background: #e0584d; }
.map-event-pill.jet  { background: #3498db; }
.map-event-pill.jet.sev-strong { background: #9b59b6; }

.map-events-detail {
    margin-top: 8px;
}
.map-events-detail summary { cursor: pointer; padding: 4px 0; }
.map-event-detail {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 6px 0;
    font-size: .82rem;
    border-top: 1px dashed var(--line-soft);
}
.map-event-detail:first-of-type { border-top: 0; }
.map-no-events {
    color: var(--sev-vfr);
    padding: 4px 0;
    font-weight: 500;
}

/* Legacy classes (para compatibilidad si existieran fuera del mapa) */
.map-legend {
    margin-top: 8px;
    display: flex; flex-wrap: wrap; gap: 14px;
    color: var(--text-3); font-size: .78rem;
}
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; }
.dot-route   { background: var(--accent); }
.dot-airport { background: var(--accent-2); }
.dot-sigmet  { background: var(--sev-lifr); }
.dot-pirep   { background: var(--sev-ifr); }
.dot-traffic { background: #888; }

/* ====================== METAR/TAF ====================== */
/* Cards apilados verticalmente para que cada uno ocupe todo el ancho.
   Da espacio al diagrama de nubes para ser realmente legible. */
.metar-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.metar-card {
    background: var(--bg-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    overflow: hidden;
    border-left: 4px solid var(--text-3);
}
.metar-card.sev-vfr  { border-left-color: var(--sev-vfr); }
.metar-card.sev-mvfr { border-left-color: var(--sev-mvfr); }
.metar-card.sev-ifr  { border-left-color: var(--sev-ifr); }
.metar-card.sev-lifr { border-left-color: var(--sev-lifr); }

.metar-card-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line-soft);
}
.metar-card-head .icao { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; }
.metar-card-head .role { font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.metar-card-head .sev-badge {
    font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 12px;
    text-transform: uppercase; letter-spacing: .06em;
}
.sev-badge.sev-vfr  { background: rgba(46,194,126,.15); color: var(--sev-vfr); }
.sev-badge.sev-mvfr { background: rgba(93,173,226,.15); color: var(--sev-mvfr); }
.sev-badge.sev-ifr  { background: rgba(245,176,65,.18); color: var(--sev-ifr); }
.sev-badge.sev-lifr { background: rgba(231,76,60,.18); color: var(--sev-lifr); }

.metar-body { padding: 12px 14px; }

.kpi-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-bottom: 10px;
}
.kpi {
    background: var(--bg-card); border: 1px solid var(--line-soft);
    border-radius: var(--r-sm); padding: 8px 10px;
    text-align: center;
}
.kpi .lbl { font-size: .65rem; text-transform: uppercase; color: var(--text-3); letter-spacing: .08em; }
.kpi .val { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; margin-top: 2px; }
.kpi.warn .val { color: var(--sev-ifr); }
.kpi.crit .val { color: var(--sev-lifr); }

.highlights {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.chip {
    font-size: .76rem; padding: 3px 9px; border-radius: 11px;
    background: var(--bg-card); border: 1px solid var(--line-soft);
    color: var(--text-2);
}
.chip.warn { background: rgba(245,176,65,.15); color: var(--sev-ifr); border-color: rgba(245,176,65,.35); }
.chip.crit { background: rgba(231,76,60,.18);  color: var(--sev-lifr); border-color: rgba(231,76,60,.4); }
.chip.ok   { background: rgba(46,194,126,.13); color: var(--sev-vfr); border-color: rgba(46,194,126,.32); }

.raw-block {
    margin-top: 10px;
}
.raw-block details { font-size: .82rem; }
.raw-block summary { cursor: pointer; color: var(--text-3); padding: 4px 0; }
.raw-block pre {
    margin: 6px 0 0; padding: 10px;
    background: var(--bg-card); border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font-family: var(--font-mono); font-size: .8rem;
    overflow-x: auto; white-space: pre-wrap;
    color: var(--text-2);
}

/* ====================== METAR CARD V2 — secciones agrupadas ====================== */
.ms-section {
    padding: 10px 0;
    border-top: 1px solid var(--line-soft);
}
.ms-section:first-of-type { border-top: 0; }
.ms-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.ms-icon { font-size: .95rem; opacity: .85; }
.ms-title {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-3);
    font-weight: 600;
}
.ms-now {
    font-size: .92rem;
    color: var(--text);
    line-height: 1.45;
}
.ms-event {
    margin-top: 4px;
    font-size: .82rem;
    color: var(--text-2);
    line-height: 1.4;
    padding-left: 10px;
    border-left: 2px solid var(--text-3);
}
.ms-event.warn { border-left-color: var(--sev-ifr); color: var(--text); }
.ms-event.crit { border-left-color: var(--sev-lifr); color: var(--text); font-weight: 500; }
.ms-event.ok   { border-left-color: var(--sev-vfr); }

/* ============ NUEVO LAYOUT METAR (2 columnas) ============ */
/* Grid superior: viento (izq 50%) + nubes (der 50%) */
.ms-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 6px;
}
@media (max-width: 980px) {
    .ms-top-grid { grid-template-columns: 1fr; }
}

/* Bloques de viento y nubes ya no llevan border-top en .ms-section dentro del grid */
.ms-top-grid .ms-section { border-top: 0; padding-top: 0; }
.ms-wind-block, .ms-clouds-block { display: flex; flex-direction: column; }

/* Layout interno del viento: compás + 3 cards en vertical */
.ms-wind-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 14px;
    align-items: stretch;
}
.ms-wind-svg {
    color: var(--text);
    width: 250px; height: 250px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    padding: 12px;
    box-sizing: border-box;
}
/* Stats en columna vertical (no grid auto-fit horizontal) */
.ms-wind-layout .wind-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ms-wind-layout .wind-stat {
    flex: 1;
    min-height: 70px;
}
/* Texto decodificado debajo del viento */
.ms-decoded {
    margin-top: 10px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.45;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--line-soft);
}
/* Texto codificado debajo de las nubes (monoespacio) */
.ms-coded {
    margin-top: 10px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.86rem;
    font-family: ui-monospace, 'SF Mono', monospace;
    line-height: 1.5;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    letter-spacing: 0.02em;
}

@media (max-width: 720px) {
    .ms-wind-layout { grid-template-columns: 1fr; }
    .ms-wind-svg { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; margin: 0 auto; }
}
.wind-compass {
    width: 100%; height: 100%; display: block;
}

/* Stats iOS-style — pills minimalistas */
.wind-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}
.wind-stat {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 10px 12px;
    transition: background .2s;
}
.wind-stat:hover {
    background: var(--bg-3);
}
.wind-stat .ws-lbl {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    margin-bottom: 4px;
}
.wind-stat .ws-val {
    font-family: -apple-system, 'SF Pro Display', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.02em;
}
.wind-stat .ws-val.ok   { color: #2ecc71; }
.wind-stat .ws-val.warn { color: #e67e22; }
.wind-stat .ws-val.crit { color: #e74c3c; }
.wind-stat .ws-val.wind-spd  { color: #e74c3c; }
/* Rachas: naranja accent — coherente con la flecha del compass */
.wind-stat .ws-val.wind-gust { color: var(--accent); }
.wind-stat .ws-val.empty { color: var(--text-3); opacity: 0.45; }
.wind-stat.wind-stat-empty { opacity: 0.75; }
.wind-stat .ws-u {
    font-size: .72rem;
    font-weight: 500;
    margin-left: 3px;
    color: var(--text-3);
}
.wind-stat .ws-sub {
    font-size: .68rem;
    color: var(--text-3);
    margin-top: 3px;
    font-family: ui-monospace, 'SF Mono', monospace;
}

@media (max-width: 720px) {
    .ms-wind-grid { grid-template-columns: 1fr; justify-items: center; }
    .ms-wind-svg { margin: 0 auto; width: 260px; height: 260px; }
    .wind-stats { width: 100%; }
}

/* Sección Nubosidad: card propio muy redondeado, integra con la severidad del aeropuerto */
.ms-clouds-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}
.ms-cloud-svg {
    color: var(--text);
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: 22px;
    padding: 18px 22px;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
}
/* Integrar con la severidad del aeropuerto: borde superior coloreado según sev de la card padre */
.metar-card.sev-vfr  .ms-cloud-svg { border-top: 3px solid var(--sev-vfr); }
.metar-card.sev-mvfr .ms-cloud-svg { border-top: 3px solid var(--sev-mvfr); }
.metar-card.sev-ifr  .ms-cloud-svg { border-top: 3px solid var(--sev-ifr); }
.metar-card.sev-lifr .ms-cloud-svg { border-top: 3px solid var(--sev-lifr); }

.cloud-diagram {
    width: 100%; height: auto; display: block;
    max-height: 420px;
}
.ms-cloud-text {
    padding: 4px 8px 0;
    font-family: -apple-system, 'SF Pro Text', sans-serif;
    color: var(--text-2);
}

.ms-events-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Sección inferior: visibilidad + T/Td + QNH con iconos.
   align-items: start → las cards crecen solo lo que necesitan
   (no se estiran para igualar a la card más alta). Misma anchura,
   alto independiente. */
.ms-bottom-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
@media (max-width: 720px) {
    .ms-bottom-info { grid-template-columns: 1fr; }
}
.ms-info-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
}
.ms-info-card-wide { grid-column: 1 / -1; }
.ms-info-card > i.ti {
    font-size: 26px;
    color: var(--accent);
    line-height: 1;
    margin-top: 2px;
}
.ms-info-text { min-width: 0; }
.ms-info-lbl {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-3);
    margin-bottom: 4px;
}
.ms-info-val {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 500;
    line-height: 1.35;
}
.ms-info-note {
    color: var(--sev-ifr);
    font-size: 0.82rem;
    font-weight: 400;
}
.ms-info-sub {
    margin-top: 4px;
    color: var(--text-3);
    font-size: 0.78rem;
    font-family: ui-monospace, 'SF Mono', monospace;
    line-height: 1.4;
}
/* Variante "warning": alertas/eventos TAF en color de aviso */
.ms-info-sub-warn {
    color: var(--sev-ifr, #d97706);
    font-family: var(--font-ui);
    font-weight: 500;
}

/* ====================== SIGMETS ====================== */
.sigmet-list { display: flex; flex-direction: column; gap: 10px; }

/* Cabecera-resumen */
.sigmet-summary {
    padding: 12px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--bg-3);
    margin-bottom: 4px;
}
.sigmet-summary.crit {
    border-left: 4px solid var(--sev-lifr);
    background: rgba(231,76,60,.07);
}
.sigmet-summary.ok {
    border-left: 4px solid var(--sev-vfr);
    background: rgba(46,194,126,.06);
}

.sigmet-item {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-left: 4px solid var(--sev-lifr);
    border-radius: var(--r-sm);
    padding: 12px 14px;
}
.sigmet-item.airmet { border-left-color: var(--sev-ifr); }
.sigmet-item.compact {
    padding: 8px 12px;
    background: var(--bg-card);
    border-left-color: var(--text-3);
    opacity: .9;
}
.sigmet-item.compact .head { margin-bottom: 0; }
.sigmet-item.compact.airmet { border-left-color: var(--text-3); opacity: .8; }
.sigmet-item .head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
    gap: 10px;
}
.sigmet-item .title { font-weight: 600; font-size: .95rem; }
.sigmet-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .68rem;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-card);
    color: var(--text-3);
    margin-right: 6px;
    font-weight: 700;
    letter-spacing: .04em;
}
.sigmet-item.airmet .sigmet-tag { background: rgba(245,176,65,.15); color: var(--sev-ifr); }
.sigmet-item .meta { font-family: var(--font-mono); font-size: .8rem; color: var(--text-3); white-space: nowrap; }
.sigmet-item .crossing {
    margin-top: 8px;
    background: var(--bg-card);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    font-size: .85rem;
}
.sigmet-item .crossing.intersect { color: var(--sev-lifr); font-weight: 600; }
.sigmet-empty { color: var(--text-3); font-style: italic; }

/* Grupo colapsable de SIGMETs sin afectación */
.sigmet-group {
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
    margin-top: 6px;
}
.sigmet-group > summary {
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text-2);
    font-size: .9rem;
    list-style: none;
    user-select: none;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; gap: 8px;
}
.sigmet-group > summary::-webkit-details-marker { display: none; }
.sigmet-group > summary::before {
    content: "▶";
    font-size: .65rem;
    color: var(--text-3);
    transition: transform .18s;
    display: inline-block;
}
.sigmet-group[open] > summary::before { transform: rotate(90deg); }
.sigmet-group > summary:hover { background: var(--bg-3); color: var(--text); }

.sigmet-group-inner {
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 6px;
}
.sigmet-subhead {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    font-weight: 600;
    padding: 8px 0 4px;
    border-bottom: 1px dashed var(--line-soft);
    margin-bottom: 4px;
}
.sigmet-subhead:first-child { padding-top: 0; }

/* ====================== PIREPS ====================== */
.pirep-summary { display: flex; flex-direction: column; gap: 10px; }
.pirep-bucket {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px 14px;
}
.pirep-bucket .title { font-weight: 600; margin-bottom: 4px; }
.pirep-bucket ul { margin: 6px 0 0; padding-left: 18px; }
.pirep-bucket li { font-family: var(--font-mono); font-size: .82rem; color: var(--text-2); padding: 2px 0; }

/* ====================== WIND STRIP ====================== */
.wind-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    margin-bottom: 14px;
}
.wind-cell {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.wind-cell .pos { font-size: .68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.wind-cell .dir { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; margin: 4px 0; }
.wind-cell .comp { font-size: .78rem; color: var(--text-2); }
.wind-cell .arrow { font-size: 1.6rem; line-height: 1; display: inline-block; transform-origin: center; transition: transform .25s; }

.wind-cell.fav-vmf { background: rgba(46,194,126,.14); border-color: var(--sev-vfr); }
.wind-cell.fav-fav { background: rgba(46,194,126,.07); }
.wind-cell.fav-neu { /* default */ }
.wind-cell.fav-des { background: rgba(245,176,65,.10); }
.wind-cell.fav-vmd { background: rgba(231,76,60,.13); border-color: var(--sev-lifr); }

.wind-detail {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: .9rem;
}
.wind-detail .scale {
    display: flex;
    height: 22px;
    border-radius: 11px;
    overflow: hidden;
    margin: 8px 0;
    position: relative;
    background: var(--bg-card);
}
.wind-detail .scale .seg { flex: 1; }
.wind-detail .scale .seg.s1 { background: var(--sev-lifr); }
.wind-detail .scale .seg.s2 { background: var(--sev-ifr); }
.wind-detail .scale .seg.s3 { background: #95a5a6; }
.wind-detail .scale .seg.s4 { background: #82c39b; }
.wind-detail .scale .seg.s5 { background: var(--sev-vfr); }
.wind-detail .scale .marker {
    position: absolute; top: -4px; bottom: -4px;
    width: 4px; background: var(--text); border-radius: 2px;
    box-shadow: 0 0 0 2px var(--bg-card);
}
.scale-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-3); }

/* ====================== TRÁFICO ====================== */
.traffic-panel {
    display: grid;
    /* Antes 0.8fr / 1.2fr (40/60). Ahora 1fr / 1.2fr (~45/55) para que el
       radar pueda crecer ~25% sin invadir territorio de la tabla de tráficos.
       En iPad landscape (panel ~988px) la columna del radar pasa de ~395px
       → ~449px, permitiendo radar de hasta 450px (vs 360 antes). */
    grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.2fr);
    gap: 14px;
    align-items: stretch;  /* las dos cols comparten altura → tabla scroll interno */
}
@media (max-width: 880px) { .traffic-panel { grid-template-columns: 1fr; } }

/* ---- COLUMNA RADAR ---- */
.traffic-radar-col {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px;
    display: flex; flex-direction: column;
    align-items: center;
}
.radar-head {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-3);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 8px;
    font-family: var(--font-mono);
}
/* Wrapper que superpone el mini-mapa satellite y el SVG del radar.
   Default 400px (antes 320, +25%). En el contexto de .traffic-radar-col
   se sobreescribe a 450px para aprovechar la columna completa. */
.radar-wrap {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    margin: 0 auto;
}
/* Mini-mapa Leaflet satellite de fondo, recortado en círculo.
   Antes el background era rgba(...,0.85) — opaco 85% — y ocultaba el
   satélite. Bajado a 0.18 para que se vea el terreno con buen contraste
   sobre los dots de los aviones. */
.radar-bg-map {
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    width: 100%;
    height: 100%;
    /* ARREGLO DEFINITIVO del "radar gris": el mapa Leaflet NO se recorta —
       ni border-radius+overflow, ni translateZ, ni mask. Cualquier recorte
       compuesto sobre las tiles translate3d de Leaflet se quedaba EN BLANCO de
       forma intermitente en Chromium. El aspecto circular lo da el overlay
       ::after tapando las 4 esquinas con el color del panel. Leaflet ya recorta
       sus propias tiles al cuadro (leaflet-container tiene overflow:hidden). */
    /* Fallback visual si los tiles no cargan (scope oscuro, no gris roto). */
    background: radial-gradient(circle at 50% 42%, #16212c 0%, #0c141d 78%);
    z-index: 0;
}
/* Asegurar que las tiles del satélite se vean (Leaflet aplica sus propios estilos) */
.radar-bg-map .leaflet-container {
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
    /* Leve filtro para destacar contrastes (terreno vs urbanas vs agua) */
    filter: saturate(0.9) brightness(0.92);
}
/* Overlay que crea el CÍRCULO tapando las 4 esquinas del mapa cuadrado con el
   color del panel, más una viñeta suave. NO lleva border-radius (debe ser un
   cuadro completo para cubrir las esquinas). El mapa debajo nunca se recorta. */
.radar-bg-map::after {
    content: "";
    position: absolute; top:0;right:0;bottom:0;left:0;
    background: radial-gradient(circle closest-side at 50% 50%,
        rgba(0,0,0,0) 0 90%,
        rgba(0,0,0,0.30) 96%,
        var(--bg-3) 99%);
    pointer-events: none;
    /* z-index alto: DEBE pintar por encima del tilePane de Leaflet (z-index 200),
       si no las esquinas del mapa cuadrado se ven y el scope parece cuadrado.
       Va dentro del stacking context de .radar-bg-map (z-index:0), así que sigue
       por DEBAJO del .radar-svg (z-index:1) con los anillos y aviones. NO se
       recorta el mapa (nada de border-radius/overflow) -> no reaparece el gris. */
    z-index: 500;
}
.radar-svg {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    display: block;
}
/* En modo con mapa de fondo, el gradient radarBg interno se hace transparente.
   Las líneas y texto del radar se refuerzan para que se vean sobre el satélite. */
.radar-wrap .radar-svg .r-ring {
    stroke: rgba(255,255,255,0.55) !important;
    stroke-width: .5 !important;
    opacity: 0.85 !important;
}
.radar-wrap .radar-svg .r-cross {
    stroke: rgba(255,255,255,0.40) !important;
    stroke-width: .35 !important;
}
.radar-wrap .radar-svg .r-ring-lbl,
.radar-wrap .radar-svg .r-cardinal {
    fill: rgba(255,255,255,0.92) !important;
    paint-order: stroke;
    stroke: rgba(0,0,0,0.6);
    stroke-width: 0.6;
}
.radar-svg .r-ring { fill: none; stroke: var(--line); stroke-width: .4; opacity: .6; }
.radar-svg .r-cross { stroke: var(--line); stroke-width: .25; opacity: .5; }
.radar-svg .r-ring-lbl, .radar-svg .r-cardinal {
    font-family: var(--font-mono);
    fill: var(--text-3);
    font-size: 5px;
    font-weight: 600;
}
.radar-svg .r-cardinal { fill: var(--accent); font-size: 5.5px; }
.radar-svg .r-center { fill: var(--accent-2); }
.radar-svg .r-center-halo {
    fill: none;
    stroke: var(--accent-2);
    stroke-width: .5;
    opacity: .4;
    animation: radar-pulse 2.6s ease-out infinite;
}
@keyframes radar-pulse {
    0%   { r: 4; opacity: .8; }
    100% { r: 16; opacity: 0; }
}

/* Aviones por banda de altitud */
/* Dots de aviones: con el terreno satellite visible necesitamos más
   contraste — borde blanco fino + drop shadow oscuro para legibilidad
   sobre cualquier tipo de terreno (verde, marrón, agua azul). */
.radar-svg .ac {
    stroke: rgba(255,255,255,.85);
    stroke-width: .5;
    filter: drop-shadow(0 0 1.2px rgba(0,0,0,0.75));
}
.radar-svg .ac.ac-low  { fill: var(--sev-vfr); }
.radar-svg .ac.ac-mid  { fill: var(--accent); }
.radar-svg .ac.ac-high { fill: #ffffff; opacity: .85; }
/* Clasificación nueva: APPROACH / INBOUND / OVERFLIGHT / UNKNOWN.
   Colores elegidos para máxima discriminación a primera vista:
   verde APROXIMANDO (lo que importa), ámbar entrando, gris sobrevuelo
   (de-prioritized visualmente), blanco tenue indeterminado. */
.radar-svg .ac.ac-approach   { fill: #2ecc71; opacity: 1; }
.radar-svg .ac.ac-inbound    { fill: #f5a623; opacity: .95; }
.radar-svg .ac.ac-overflight { fill: #95a5a6; opacity: .55; }
.radar-svg .ac.ac-unknown    { fill: #ecf0f1; opacity: .55; }

.radar-svg .ac-vec {
    stroke-width: .9;
    opacity: 0.85;
    fill: none;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.7));
}
.radar-svg .ac-vec.ac-low  { stroke: var(--sev-vfr); }
.radar-svg .ac-vec.ac-mid  { stroke: var(--accent); }
.radar-svg .ac-vec.ac-high { stroke: #ffffff; }
.radar-svg .ac-vec.ac-approach   { stroke: #2ecc71; }
.radar-svg .ac-vec.ac-inbound    { stroke: #f5a623; }
.radar-svg .ac-vec.ac-overflight { stroke: #95a5a6; opacity: .5; }
.radar-svg .ac-vec.ac-unknown    { stroke: #ecf0f1; opacity: .5; }

/* Leyenda del radar — dots adicionales para la nueva clasificación */
.radar-legend .dot.ac-approach   { background: #2ecc71; }
.radar-legend .dot.ac-inbound    { background: #f5a623; }
.radar-legend .dot.ac-overflight { background: #95a5a6; }
.radar-legend .dot.ac-unknown    { background: #ecf0f1; }

/* === CLASIFICACIÓN: tabla 4 niveles en stats col === */
.traffic-classified {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin: 10px 0 8px;
    padding: 8px 10px;
    background: var(--bg-2, rgba(255,255,255,0.03));
    border-radius: 8px;
    border: 1px solid var(--line, rgba(255,255,255,0.07));
}
.tcls-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1.2;
}
.tcls-row .tcls-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.tcls-approach   .tcls-dot { background: #2ecc71; }
.tcls-inbound    .tcls-dot { background: #f5a623; }
.tcls-overflight .tcls-dot { background: #95a5a6; }
.tcls-unknown    .tcls-dot { background: #ecf0f1; }
.tcls-row .tcls-num {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 700;
    font-size: 14px;
    min-width: 22px;
    text-align: right;
}
.tcls-row .tcls-lbl { flex: 1; }
.tcls-row .tcls-conf {
    font-size: 10.5px;
    color: var(--muted, rgba(255,255,255,0.45));
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Badges de tipo en la tabla (APP/INB/OVR/—) */
.tcls-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    font-family: var(--font-mono, ui-monospace, monospace);
    line-height: 1.4;
    color: #fff;
}
.tcls-badge-approach   { background: #2ecc71; color: #0a3018; }
.tcls-badge-inbound    { background: #f5a623; color: #3b2200; }
.tcls-badge-overflight { background: #5d6d7e; color: #ecf0f1; }
.tcls-badge-unknown    { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }

/* Fila APPROACH destacada sutilmente */
.traffic-list-compact tr.approach td { background: rgba(46, 204, 113, 0.06); }

.traffic-source {
    margin-top: 6px;
    opacity: 0.7;
}

/* Sweep animado — ELIMINADO. La animación CSS infinita (rotate 360° cada 4 s
   sobre un grupo SVG) era el elemento más frágil del radar: en tablets/GPU
   lentas dejaba el SVG en blanco o congelado. Sin barrido, el radar es un
   render estático que solo cambia con los datos: más simple y fiable. */

.radar-legend {
    display: flex; flex-wrap: wrap; gap: 10px;
    width: 100%;
    margin-top: 10px;
    font-size: .72rem;
    color: var(--text-3);
    justify-content: center;
}
.radar-legend i.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; vertical-align: -1px; margin-right: 4px; }
.radar-legend i.ac-low  { background: var(--sev-vfr); }
.radar-legend i.ac-mid  { background: var(--accent); }
.radar-legend i.ac-high { background: var(--text-3); }

/* ---- COLUMNA STATS ---- */
.traffic-stats-col {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px;
    display: flex; flex-direction: column;
    gap: 10px;
}
.traffic-numbers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.traffic-numbers.single {
    grid-template-columns: 1fr;
}
.t-num {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    padding: 12px;
    text-align: center;
}
.t-num .big {
    font-family: var(--font-mono);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
}
.t-num.expected .big { color: var(--accent); }
.t-num.current  .big { color: var(--accent-2); }
.t-num .lbl {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-3); margin-top: 6px; font-weight: 600;
}

.gauge-bar {
    height: 10px; background: var(--bg-card); border-radius: 5px; overflow: hidden;
    border: 1px solid var(--line-soft);
}
.gauge-fill { height: 100%; background: linear-gradient(90deg, var(--sev-vfr), var(--sev-ifr), var(--sev-lifr)); transition: width .4s; }
.gauge-verdict {
    padding: 8px 10px;
    border-radius: var(--r-sm);
    font-weight: 600;
}
.gauge-verdict.sev-vfr  { background: rgba(46,194,126,.15); color: var(--sev-vfr); }
.gauge-verdict.sev-mvfr { background: rgba(93,173,226,.15); color: var(--sev-mvfr); }
.gauge-verdict.sev-ifr  { background: rgba(245,176,65,.18); color: var(--sev-ifr); }
.gauge-verdict.sev-lifr { background: rgba(231,76,60,.18); color: var(--sev-lifr); }
.gauge-verdict.sev-info { background: var(--bg-card); color: var(--text-2); }

/* Histórico bar chart */
.forecast-detail summary {
    cursor: pointer; color: var(--text-2); font-size: .85rem;
    padding: 4px 0; user-select: none;
}
.hist-bars {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 8px;
    height: 80px;
    align-items: end;
}
.hist-bar {
    display: flex; flex-direction: column; align-items: center;
    justify-content: end;
    height: 100%;
    text-align: center;
}
.hist-bar .bar {
    width: 70%;
    min-height: 2px;
    background: linear-gradient(to top, var(--accent), var(--accent-2));
    border-radius: 2px 2px 0 0;
}
.hist-bar.miss .bar { background: var(--line); opacity: .3; }
.hist-bar .lbl { font-size: .65rem; color: var(--text-3); margin-top: 2px; font-family: var(--font-mono); }
.hist-bar .val { font-size: .68rem; color: var(--text); font-family: var(--font-mono); }

/* Tabla de tráficos */
.traffic-list {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    max-height: 240px; overflow: auto;
}
.traffic-list table {
    width: 100%; border-collapse: collapse;
    font-family: var(--font-mono); font-size: .82rem;
}
.traffic-list th, .traffic-list td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
}
.traffic-list th { background: var(--bg-card); position: sticky; top: 0; color: var(--text-3); font-weight: 600; }
.traffic-list tr:last-child td { border-bottom: 0; }
.traffic-list .approach { color: var(--accent); }
.traffic-list .approach td { font-weight: 600; }

.traffic-list-title {
    padding: 8px 12px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line-soft);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-2);
    font-weight: 600;
}

/* ---- Variante compacta: tabla dentro de la stats col (no fila aparte) ----
   Pensada para que la pestaña Traffic entre sin scroll vertical en laptop
   13-15" y en iPad landscape. La tabla scrolea internamente; el resto del
   layout se mantiene visible siempre. */
.traffic-list.traffic-list-compact {
    /* Cap explícito para no dejar que la lista de 100+ tráficos infle
       la pestaña entera. El usuario scrollea DENTRO de la tabla. */
    max-height: 320px;
    flex: 0 1 320px;
    min-height: 0;
    overflow: hidden;     /* el scroll vive en .traffic-list-scroll */
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}
.traffic-list.traffic-list-compact .traffic-list-title {
    padding: 6px 10px;
    font-size: .72rem;
    flex: 0 0 auto;
}
.traffic-list.traffic-list-compact .traffic-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.traffic-list.traffic-list-compact table {
    font-size: .76rem;
}
.traffic-list.traffic-list-compact th,
.traffic-list.traffic-list-compact td {
    padding: 3px 8px;
    line-height: 1.25;
}
.traffic-list.traffic-list-compact th {
    background: var(--bg-card);
    position: sticky; top: 0;
    z-index: 1;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 8px;
}

/* La stats col es flex column; con la tabla dentro, los elementos previos
   (numbers + gauge + verdict + histDetail) son flex 0 (tamaño natural) y la
   tabla absorbe el espacio restante. */
.traffic-stats-col > .traffic-numbers,
.traffic-stats-col > .gauge-bar,
.traffic-stats-col > .gauge-verdict,
.traffic-stats-col > .muted.small,
.traffic-stats-col > .forecast-detail {
    flex: 0 0 auto;
}

/* Cards numéricas algo más compactas para liberar altura para la tabla */
.traffic-stats-col .t-num { padding: 9px 10px; }
.traffic-stats-col .t-num .big { font-size: 2rem; line-height: 1; }
.traffic-stats-col .t-num .lbl {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
}

/* Radar: aumentado ~25% (360 → 450) sin cambiar el tamaño de la card
   contenedora — el radar aprovecha más superficie útil de la columna,
   manteniendo el padding mínimo para que respire respecto al borde.
   La altura de la columna la dicta el lado derecho (números + warning
   + tabla); el radar se centra en el espacio sobrante. */
.traffic-radar-col { padding: 8px; }
.traffic-radar-col .radar-wrap {
    max-width: 450px;
    width: 100%;
    margin: auto;         /* centrado horizontal + vertical (col flex) */
}
.traffic-radar-col .radar-svg {
    max-width: 450px;
}
.traffic-radar-col .radar-legend {
    margin-top: 8px;
    flex: 0 0 auto;
}

/* Lista inbound al destino */
.traffic-inbound {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    margin-top: 8px;
}
.traffic-inbound > summary {
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: var(--bg-2);
    border-bottom: 1px solid transparent;
    display: flex; align-items: center; gap: 12px;
    transition: background .15s;
}
.traffic-inbound > summary::-webkit-details-marker { display: none; }
.traffic-inbound > summary::before {
    content: "▶";
    font-size: .65rem;
    color: var(--text-3);
    transition: transform .18s;
    margin-right: 6px;
    display: inline-block;
}
.traffic-inbound[open] > summary::before { transform: rotate(90deg); }
.traffic-inbound[open] > summary { border-bottom-color: var(--line-soft); }
.traffic-inbound > summary:hover { background: var(--bg-3); }
.traffic-inbound > summary strong { color: var(--text); }

.traffic-inbound table {
    width: 100%; border-collapse: collapse;
    font-family: var(--font-mono); font-size: .82rem;
}
.traffic-inbound th, .traffic-inbound td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
}
.traffic-inbound th {
    background: var(--bg-card);
    color: var(--text-3);
    font-weight: 600;
    position: sticky; top: 0;
}
.traffic-inbound tr:last-child td { border-bottom: 0; }
.traffic-inbound tr.in-window {
    background: rgba(247, 183, 51, .07);
}
.traffic-inbound tr.in-window td { color: var(--accent); font-weight: 600; }

/* ====================== LOADING (premium skeleton) ====================== */
.loading {
    position: fixed; top:0;right:0;bottom:0;left:0;
    background: rgba(10, 19, 34, 0);
    display: grid; place-items: center;
    z-index: 1000;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    animation: pm-backdrop-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    padding: 22px;
}
.loading.hidden { display: none; }

.loading-box {
    background: var(--bg-card);
    border: 1px solid var(--line);
    padding: 26px 28px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    min-width: 360px;
    max-width: 460px;
    width: 100%;
    text-align: left;
    opacity: 0;
    transform: scale(0.94);
    animation: pm-perf-dialog-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.05s;
    position: relative;
    overflow: hidden;
}

/* Shimmer top bar — barra de progreso animada estilo iOS Pro */
.loading-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent),
        var(--accent),
        transparent
    );
    background-size: 50% 100%;
    animation: loading-shimmer 1.6s ease-in-out infinite;
}
@keyframes loading-shimmer {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* Icono central — compass rose girando, identidad aeronáutica */
.loading-spinner {
    width: 48px; height: 48px;
    margin: 6px auto 14px;
    border-radius: 50%;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-right-color: var(--accent);
    animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    position: relative;
}
.loading-spinner::after {
    content: "";
    position: absolute;
    top:7px;right:7px;bottom:7px;left:7px;
    border-radius: 50%;
    border: 1px dashed var(--line-strong);
    opacity: 0.4;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}

.loading-steps {
    list-style: none;
    padding: 14px 0 4px;
    margin: 0;
    border-top: 1px solid var(--line-soft);
    margin-top: 16px;
}
.loading-steps li {
    font-size: .87rem;
    color: var(--text-3);
    padding: 6px 0;
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 10px;
    transition: color 0.25s ease;
    position: relative;
}
.loading-steps li::before {
    width: 18px; height: 18px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 50%;
    font-family: "tabler-icons" !important;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.loading-steps li.pending::before {
    content: "\eb8e";   /* ti-circle (outline) */
    color: var(--text-3);
}
.loading-steps li.active {
    color: var(--text);
    font-weight: 500;
}
.loading-steps li.active::before {
    content: "\f4be";   /* ti-loader-2 */
    color: var(--accent);
    animation: spin 1s linear infinite;
}
.loading-steps li.done {
    color: var(--text-2);
}
.loading-steps li.done::before {
    content: "\eb0a";   /* ti-circle-check */
    color: var(--sev-vfr);
    background: var(--sev-vfr-soft);
}
.loading-steps li.error {
    color: var(--sev-lifr);
    font-weight: 500;
}
.loading-steps li.error::before {
    content: "\eb13";   /* ti-circle-x */
    color: var(--sev-lifr);
    background: var(--sev-lifr-soft);
}

/* Skeleton bloque oculto que se podría mostrar bajo el box si quisiéramos
   un preview real del briefing card. Por ahora el loading-box es ya
   suficientemente premium. */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-recess) 0%,
        var(--bg-3) 50%,
        var(--bg-recess) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ====================== PIE ====================== */
.page-foot {
    text-align: center;
    padding: 18px 22px 32px;
    color: var(--text-3);
    font-size: .76rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* ====================== PERFORMANCE ====================== */
.perf-panel { display: flex; flex-direction: column; gap: 14px; }
.perf-aircraft-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    flex-wrap: wrap;
}
.perf-ac-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 600; }
.perf-ac-select {
    flex: 1; min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 8px 10px;
    border-radius: var(--r-sm);
    font-family: var(--font-ui); font-size: .92rem;
}
.btn-sm { padding: 6px 12px; font-size: .82rem; }

.perf-ac-summary {
    background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 10px 14px;
}
.ac-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.ac-info { display: flex; flex-direction: column; gap: 2px; }
.ac-info .ac-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 600; }
.ac-info .ac-val { font-family: var(--font-mono); font-size: .9rem; font-weight: 600; }

.perf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 980px) { .perf-grid { grid-template-columns: 1fr; } }

.perf-section { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; }
.perf-section-title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: 0; }

.perf-form { display: flex; flex-direction: column; gap: 8px; }
.perf-row { display: flex; gap: 8px; flex-wrap: wrap; }
.perf-field { display: flex; flex-direction: column; flex: 1; min-width: 90px; gap: 3px; }
.perf-field span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 600; }
.perf-input {
    background: var(--bg-card); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 8px 10px;
    font-family: var(--font-mono); font-size: .9rem; color: var(--text);
    width: 100%; min-width: 0;
}
.perf-input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(247,183,51,.18); }

/* ===== Resultado de performance ===== */
.perf-result {
    margin-top: 14px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    display: flex; flex-direction: column; gap: 14px;
}
.perf-verdict {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    border-left: 5px solid;
}
.perf-verdict.sev-go      { background: rgba(46,194,126,.12); border-left-color: var(--sev-vfr); color: var(--sev-vfr); }
.perf-verdict.sev-marginal{ background: rgba(245,176,65,.13); border-left-color: var(--sev-ifr); color: var(--sev-ifr); }
.perf-verdict.sev-no-go   { background: rgba(231,76,60,.15);  border-left-color: var(--sev-lifr);color: var(--sev-lifr); }
.verdict-icon { font-size: 2rem; line-height: 1; }
.verdict-text { font-size: 1.4rem; font-weight: 800; letter-spacing: .04em; }
.verdict-sub { font-size: .82rem; color: var(--text-2); margin-top: 2px; }

.rwy-diagram {
    margin: 4px 0;
}
.rwy-bg {
    position: relative;
    height: 36px;
    background: repeating-linear-gradient(90deg, var(--bg-3) 0 12px, var(--line) 12px 14px);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: visible;
}
.rwy-used {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(46,194,126,.5), rgba(46,194,126,.7));
    transition: width .4s ease;
}
.rwy-used.sev-marginal { background: linear-gradient(90deg, rgba(245,176,65,.5), rgba(245,176,65,.75)); }
.rwy-used.sev-no-go    { background: linear-gradient(90deg, rgba(231,76,60,.55), rgba(231,76,60,.85)); }
.rwy-marker {
    position: absolute; top: -6px; bottom: -6px;
    width: 2px; background: var(--text);
    pointer-events: none;
}
.rwy-marker span {
    position: absolute; top: -20px; left: -25px;
    background: var(--bg-card); border: 1px solid var(--line);
    padding: 2px 6px; border-radius: 4px;
    font-family: var(--font-mono); font-size: .72rem; white-space: nowrap;
}
.rwy-marker-actual span { top: auto; bottom: -22px; }
.rwy-labels {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--text-3); margin-top: 4px;
}

.perf-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.perf-kpi {
    background: var(--bg-3); border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    padding: 10px 8px;
    text-align: center;
}
.perf-kpi .kpi-num {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.perf-kpi .kpi-num.warn { color: var(--sev-ifr); }
.perf-kpi .kpi-lbl { font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.perf-kpi .kpi-sub { font-size: .72rem; color: var(--text-2); }

.perf-vspeeds {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.vspeed {
    background: var(--bg-3); border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px 18px;
    text-align: center;
    min-width: 90px;
}
.vspeed-num {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent-2);
}
.vspeed-lbl { font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; font-weight: 600; }

.perf-wind-section { display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: center; }
.wind-viz { width: 100px; height: 100px; }
.wind-viz-rwy { fill: var(--text-3); font-family: var(--font-mono); font-size: 8px; text-anchor: middle; font-weight: 700; }
.perf-wind-info { font-size: .85rem; line-height: 1.6; }

.perf-issues { display: flex; flex-direction: column; gap: 4px; }
.perf-issue {
    padding: 6px 10px; border-radius: var(--r-sm);
    background: var(--bg-3); border: 1px solid var(--line);
    font-size: .85rem;
}
.perf-issue.critical { background: rgba(231,76,60,.13); color: var(--sev-lifr); border-color: rgba(231,76,60,.4); font-weight: 600; }
.perf-issue.warning  { background: rgba(245,176,65,.12); color: var(--sev-ifr);  border-color: rgba(245,176,65,.35); }

/* Modal editor */
.perf-modal {
    position: fixed; top:0;right:0;bottom:0;left:0;
    background: rgba(0,0,0,0);
    display: grid; place-items: center;
    z-index: 200;
    padding: 20px;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    animation: pm-backdrop-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.perf-modal.hidden { display: none; }
.perf-modal-box {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    max-width: 800px; width: 100%;
    max-height: 90vh; overflow: auto;
    opacity: 0;
    transform: scale(0.90);
    animation: pm-perf-dialog-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pm-perf-dialog-in {
    from { transform: scale(0.90); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.perf-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.perf-modal-form {
    padding: 14px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.perf-modal-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line-soft); align-items: center; }

/* ====================== AERÓDROMOS (FICHAS OPERACIONALES) ====================== */
/* !important para sobrescribir el UA stylesheet [hidden]{display:none}
   que algún flujo añade en runtime y bloquea el render del aeródromo. */
.aero-panel { display: flex !important; flex-direction: column; gap: 14px; }
.aero-disclaimer {
    display: flex; align-items: flex-start; gap: 12px;
    background: rgba(93,173,226,.08);
    border: 1px solid rgba(93,173,226,.3);
    border-left: 4px solid var(--accent-2);
    border-radius: var(--r-sm);
    padding: 12px;
}
.aero-disclaimer-icon { font-size: 1.4rem; color: var(--accent-2); line-height: 1; flex-shrink: 0; }

/* Barra de acciones (botón Procedimientos) — alineada a la derecha arriba. */
.aero-actions-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 0 0;
}

/* Footer-disclaimer discreto al final de la pestaña Aeródromo.
   Antes era un bloque grande arriba; ahora es una línea suave abajo. */
.aero-disclaimer-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    color: var(--text-3);
    font-size: 0.72rem;
    line-height: 1.4;
    opacity: 0.78;
}
.aero-disclaimer-footer .aero-disclaimer-icon {
    font-size: 0.85rem;
    color: var(--text-3);
}
.aero-disclaimer-footer strong { color: var(--text-2); font-weight: 600; }

/* Selector tipo Meteo — pills horizontales con dot de severidad. Reutilizamos
   las clases .mv-pill / .mv-pill-dot del prototipo handoff para consistencia
   visual entre Meteo y Aeródromos. */
.aero-selector-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 2px;
    flex-wrap: wrap;
}
.aero-selector-label {
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-2);
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.mv-selector.aero-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mv-selector.aero-selector .mv-pill {
    /* añade subrayado de rol bajo el ICAO */
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mv-selector.aero-selector .mv-pill-role {
    font-family: var(--font-ui, inherit);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3, #9aa3b0);
    padding: 1px 6px;
    background: var(--bg-3, rgba(0,0,0,0.05));
    border-radius: 4px;
    margin-left: 2px;
}
.mv-selector.aero-selector .mv-pill.active .mv-pill-role {
    color: #0C8577;
    background: rgba(12,133,119,0.15);
}

/* Host del card del aeropuerto seleccionado — el card ocupa todo el ancho
   y se reemplaza al cambiar de pill, sin scroll multi-aeródromo */
.aero-card-host {
    display: flex;
    flex-direction: column;
}

.aero-card {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.aero-card-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line-soft);
    flex-wrap: wrap;
}
.aero-card-icao { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 800; color: var(--text); }
.aero-card-name { margin-top: 2px; }
.aero-card-role {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    background: var(--bg-card);
    color: var(--accent-2);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--line);
    margin-left: auto;
}
.aero-complex-badge {
    font-size: .7rem; font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase; letter-spacing: .06em;
}
.aero-complex-low    { background: rgba(46,194,126,.15); color: var(--sev-vfr); }
.aero-complex-medium { background: rgba(93,173,226,.15); color: var(--sev-mvfr); }
.aero-complex-high   { background: rgba(245,176,65,.18); color: var(--sev-ifr); }
.aero-complex-extreme{ background: rgba(231,76,60,.18); color: var(--sev-lifr); }

.aero-card-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.aero-notes {
    color: var(--text-2);
    line-height: 1.6;
    font-size: .92rem;
}

.aero-facts { display: flex; flex-direction: column; gap: 6px; }
.aero-fact {
    display: flex; gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-size: .85rem;
}
.aero-fact .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 700; min-width: 100px; padding-top: 2px; }
.aero-fact .val { color: var(--text); flex: 1; }

.aero-section-title {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--sev-lifr);
    padding: 8px 10px;
    background: rgba(231,76,60,.1);
    border-radius: var(--r-sm);
    border: 1px solid rgba(231,76,60,.3);
}

.aero-active-empty {
    color: var(--sev-vfr);
    font-size: .9rem;
    padding: 8px 12px;
    background: rgba(46,194,126,.08);
    border-radius: var(--r-sm);
    border: 1px solid rgba(46,194,126,.25);
}

.aero-hazard-list { display: flex; flex-direction: column; gap: 6px; }
.aero-hazard {
    display: flex; gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--text-3);
    border-radius: var(--r-sm);
    padding: 10px 12px;
}
.aero-hazard.active.sev-crit { border-left-color: var(--sev-lifr); background: rgba(231,76,60,.05); }
.aero-hazard.active.sev-warn { border-left-color: var(--sev-ifr); background: rgba(245,176,65,.04); }
.aero-hazard.active.sev-info { border-left-color: var(--sev-mvfr); }
.aero-hazard.passive { opacity: .85; border-left-color: var(--text-3); }

.aero-hazard-icon { font-size: 1.3rem; line-height: 1.2; flex-shrink: 0; }
.aero-hazard-body { flex: 1; }
.aero-hazard-title { font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.aero-hazard-desc { color: var(--text-2); font-size: .85rem; line-height: 1.5; }
/* Botón clickable de procedimiento dentro del hazard */
.aero-hazard-proc-btn {
    margin-top: 8px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(231,76,60,.10), rgba(231,76,60,.04));
    border: 1px solid rgba(231,76,60,.35);
    border-radius: var(--r-sm);
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-ui);
    text-align: left;
    transition: all .18s cubic-bezier(0.32, 0.72, 0, 1);
}
.aero-hazard-proc-btn:hover {
    background: linear-gradient(90deg, rgba(231,76,60,.18), rgba(231,76,60,.10));
    border-color: var(--sev-lifr);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(231,76,60,.15);
}
.aero-hazard-proc-btn:active { transform: translateX(0); }
.aero-hazard-proc-btn .proc-btn-icon {
    font-size: 1.2rem;
    color: var(--sev-lifr);
    flex-shrink: 0;
}
.aero-hazard-proc-btn .proc-btn-label {
    flex: 1;
    display: flex; flex-direction: column;
    line-height: 1.3;
}
.aero-hazard-proc-btn .proc-btn-action {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sev-lifr);
    font-weight: 700;
}
.aero-hazard-proc-btn .proc-btn-name {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
}
.aero-hazard-proc-btn .proc-btn-arrow {
    color: var(--sev-lifr);
    font-size: 1.2rem;
    transition: transform .18s;
}
.aero-hazard-proc-btn:hover .proc-btn-arrow { transform: translateX(3px); }
.aero-hazard-ref { margin-top: 4px; }

.aero-passive {
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.aero-passive > summary {
    cursor: pointer;
    padding: 10px 12px;
    color: var(--text-2);
    font-size: .85rem;
    list-style: none;
    user-select: none;
}
.aero-passive > summary::-webkit-details-marker { display: none; }
.aero-passive > summary::before {
    content: "▶";
    color: var(--text-3); font-size: .65rem;
    margin-right: 8px;
    transition: transform .18s;
    display: inline-block;
}
.aero-passive[open] > summary::before { transform: rotate(90deg); }
.aero-passive .aero-hazard-list { padding: 4px 12px 12px; }

/* ===== MODAL DE PROCEDIMIENTO ===== */
.proc-modal {
    position: fixed; top:0;right:0;bottom:0;left:0;
    background: rgba(0,0,0,0);
    display: grid; place-items: center;
    z-index: 300;
    padding: 16px;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    animation: pm-backdrop-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.proc-modal.hidden { display: none; }
.proc-modal-box {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    max-width: 720px;
    width: 100%;
    max-height: 92vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    opacity: 0;
    transform: scale(0.90);
    animation: pm-perf-dialog-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes proc-modal-slide {
    from { opacity: 0; transform: translateY(20px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.proc-modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(231,76,60,.10), transparent);
    border-bottom: 2px solid var(--sev-lifr);
}
.proc-modal-icon { font-size: 1.8rem; color: var(--sev-lifr); line-height: 1; flex-shrink: 0; }
.proc-modal-title {
    font-size: 1.15rem; font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
}
.proc-modal-close {
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--text-2);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 1rem;
    transition: all .15s;
    flex-shrink: 0;
}
.proc-modal-close:hover { background: var(--sev-lifr); color: white; transform: scale(1.05); }

.proc-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

/* Catálogo de procedimientos */
.proc-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}
.proc-catalog-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-left: 3px solid var(--sev-lifr);
    border-radius: var(--r-sm);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-ui);
    transition: all .18s cubic-bezier(0.32, 0.72, 0, 1);
}
.proc-catalog-item:hover {
    background: var(--bg-card);
    border-color: var(--sev-lifr);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231,76,60,.15);
}
.proc-catalog-icon { font-size: 1.2rem; color: var(--sev-lifr); flex-shrink: 0; }
.proc-catalog-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.proc-catalog-title { font-weight: 600; font-size: .92rem; }
.proc-catalog-cat { font-size: .75rem; }
.proc-catalog-arrow {
    color: var(--text-3); font-size: 1.1rem;
    transition: transform .18s, color .18s;
}
.proc-catalog-item:hover .proc-catalog-arrow {
    color: var(--sev-lifr);
    transform: translateX(3px);
}

/* Procedimiento de emergencia card (legacy, lo dejamos por compat) */
.aero-proc-card {
    background: var(--bg-card);
    border: 2px solid var(--sev-lifr);
    border-radius: var(--r-sm);
    padding: 14px;
    margin: 12px 14px 14px;
    box-shadow: 0 0 0 1px rgba(231,76,60,.2);
}
.aero-proc-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.aero-proc-icon { font-size: 1.6rem; color: var(--sev-lifr); line-height: 1; }
.aero-proc-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.aero-proc-steps {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.aero-proc-steps li {
    display: flex; gap: 10px;
    padding: 8px 10px;
    background: var(--bg-3);
    border-left: 3px solid var(--sev-lifr);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: .88rem;
}
.aero-proc-steps li .phase {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--sev-lifr);
    min-width: 90px;
    flex-shrink: 0;
    font-size: .78rem;
    text-transform: uppercase;
    align-self: flex-start;
    padding-top: 2px;
}
.aero-proc-steps li .text { color: var(--text); flex: 1; line-height: 1.5; }
.aero-proc-warns {
    background: rgba(245,176,65,.08);
    border: 1px solid rgba(245,176,65,.25);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-size: .85rem;
    margin: 6px 0;
}
.aero-proc-warns ul { margin: 4px 0 0; padding-left: 18px; }
.aero-proc-warns li { padding: 2px 0; color: var(--sev-ifr); }
.aero-proc-ref { margin-top: 6px; font-style: italic; }
.aero-proc-disclaimer {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--bg-2);
    border-radius: 4px;
    font-style: italic;
}

/* ====================== WATCH / RE-BRIEFING ====================== */
.btn-warning {
    background: var(--sev-ifr) !important;
    color: #1a1004 !important;
    animation: btn-pulse 1.6s ease-in-out infinite;
}
@keyframes btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,176,65,.5); }
    50%      { box-shadow: 0 0 0 8px rgba(245,176,65,0); }
}

.watch-status {
    position: fixed;
    bottom: 18px; right: 18px;
    width: 360px;
    max-width: calc(100vw - 36px);
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--r);
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
    z-index: 150;
    overflow: hidden;
    animation: watch-slide-in .35s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes watch-slide-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.watch-status.hidden { display: none; }
.watch-status.collapsed .watch-status-body { display: none; }

.watch-status-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(247,183,51,.15), transparent);
    border-bottom: 1px solid var(--line-soft);
}
.watch-pulse {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--sev-vfr);
    box-shadow: 0 0 0 0 rgba(46,194,126,.6);
    animation: watch-pulse 2s ease-out infinite;
    flex-shrink: 0;
}
@keyframes watch-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(46,194,126,.6); }
    100% { box-shadow: 0 0 0 12px rgba(46,194,126,0); }
}
.watch-status-title {
    flex: 1;
    font-weight: 700; font-size: .9rem;
    color: var(--text);
}
.watch-status-toggle, .watch-status-close {
    background: transparent;
    border: 0;
    color: var(--text-3);
    cursor: pointer;
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 1rem;
    display: grid; place-items: center;
    transition: all .15s;
}
.watch-status-toggle:hover, .watch-status-close:hover {
    background: var(--bg-3);
    color: var(--text);
}
.watch-status-close:hover { color: var(--sev-lifr); }

.watch-status-body {
    max-height: 60vh;
    overflow-y: auto;
}
.watch-meta {
    padding: 10px 12px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: .82rem;
}
.watch-meta #watch-route { color: var(--accent); font-weight: 700; }

.watch-events {
    display: flex; flex-direction: column;
}
.watch-event {
    display: flex; gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-3);
    border-left: 3px solid var(--text-3);
    animation: event-flash .8s ease-out;
}
@keyframes event-flash {
    from { background: rgba(247,183,51,.2); }
    to   { background: var(--bg-3); }
}
.watch-event:last-child { border-bottom: 0; }
.watch-event.sev-info     { border-left-color: var(--sev-mvfr); }
.watch-event.sev-high     { border-left-color: var(--sev-ifr); }
.watch-event.sev-critical { border-left-color: var(--sev-lifr); }

.watch-event-time {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-3);
    flex-shrink: 0;
    min-width: 56px;
    padding-top: 1px;
}
.watch-event-content { flex: 1; }
.watch-event-title {
    font-weight: 600;
    font-size: .85rem;
    color: var(--text);
    margin-bottom: 2px;
}
.watch-event-body {
    font-size: .8rem;
    color: var(--text-2);
    line-height: 1.4;
    word-break: break-word;
}

/* ====================== RESPONSIVE ====================== */
@media (max-width: 900px) {
    .grid-form { grid-template-columns: repeat(2, 1fr); }
    .kpi-row   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .grid-form { grid-template-columns: 1fr; }
    .topbar { padding: 10px 14px; }
    .main { padding: 14px; }
    .card-head, .briefing-block { padding: 14px; }
}

/* ================================================================
   DISPATCH COMPLIANCE HERO PANEL  (ForeFlight iOS Pro style)
   ================================================================ */
.dispatch-hero { margin: 14px 18px 0; }
.dispatch-hero.hidden { display: none; }

.dispatch-hero-inner {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--bg-card);
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
}
/* Acento de severidad como banda lateral sutil — NO fondo coloreado pleno */
.dispatch-hero-inner::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--text-3);
}
.dispatch-hero-inner.sev-green::before { background: var(--sev-vfr); }
.dispatch-hero-inner.sev-amber::before { background: var(--sev-ifr); }
.dispatch-hero-inner.sev-red::before   { background: var(--sev-lifr); }

/* HEAD ---------------------------------------------------------- */
.dh-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 18px;
    padding: 18px 22px 16px 26px;
    align-items: center;
}
.dh-verdict-block {
    display: flex; align-items: center; gap: 14px;
    grid-column: 1; grid-row: 1 / span 2;
}
/* Píldora del verdict — más elegante que un número gigante */
.dh-verdict-big {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 8px 16px;
    border-radius: var(--r-full);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dh-verdict-big::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.sev-green .dh-verdict-big  { background: var(--sev-vfr-soft);  color: var(--sev-vfr); }
.sev-amber .dh-verdict-big  { background: var(--sev-ifr-soft);  color: var(--sev-ifr); }
.sev-red   .dh-verdict-big  { background: var(--sev-lifr-soft); color: var(--sev-lifr); }

.dh-verdict-sub {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -.01em;
}
.dh-counts {
    grid-column: 2;
    grid-row: 1;
    display: flex; gap: 8px; flex-wrap: wrap;
    align-self: end;
}
.dh-count {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    font-family: ui-monospace, monospace;
}
.dh-count.sev-go      { background: var(--sev-vfr-soft);  color: var(--sev-vfr); }
.dh-count.sev-caution { background: var(--sev-ifr-soft);  color: var(--sev-ifr); }
.dh-count.sev-nogo    { background: var(--sev-lifr-soft); color: var(--sev-lifr); }

.dh-subtitle {
    grid-column: 2;
    grid-row: 2;
    color: var(--text-2);
    font-size: .85rem;
    align-self: start;
}
.dh-toggle {
    grid-column: 3;
    grid-row: 1 / span 2;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dh-toggle:hover { background: var(--bg-3); color: var(--text); border-color: var(--line-strong); }
.dh-toggle-arrow { font-size: 14px; line-height: 1; }

/* BODY ---------------------------------------------------------- */
.dh-body {
    border-top: 1px solid var(--line);
    padding: 14px 18px;
    transition: max-height 0.25s ease, opacity 0.18s;
    max-height: 2000px;
    opacity: 1;
}
.dh-body.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
    overflow: hidden;
    pointer-events: none;
}

/* AIRPORT MINI-CARDS -------------------------------------------- */
.dh-airports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.dh-airport {
    border-radius: var(--r-md);
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: var(--bg-3);
    transition: border-color 0.15s, transform 0.12s;
}
.dh-airport.sev-go      { border-color: var(--line); }
.dh-airport.sev-caution { border-left: 3px solid var(--sev-ifr); padding-left: 14px; }
.dh-airport.sev-nogo    { border-left: 3px solid var(--sev-lifr); padding-left: 14px; }

.dh-airport-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.dh-airport-verdict {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}
.sev-go      .dh-airport-verdict { color: var(--sev-vfr); }
.sev-caution .dh-airport-verdict { color: var(--sev-ifr); }
.sev-nogo    .dh-airport-verdict { color: var(--sev-lifr); }

.dh-airport-icao {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
}
.dh-airport-role {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-3);
}
.dh-airport-pills {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.dh-pill {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
}
.dh-pill.sev-ok   { background: var(--sev-vfr-soft);  color: var(--sev-vfr); }
.dh-pill.sev-warn { background: var(--sev-ifr-soft);  color: var(--sev-ifr); }
.dh-pill.sev-fail { background: var(--sev-lifr-soft); color: var(--sev-lifr); }
.dh-pill.sev-unk  { background: var(--bg-recess); color: var(--text-3); }

.dh-reasons {
    margin: 0; padding: 0;
    list-style: none;
    font-size: .76rem;
    color: var(--text-2);
}
.dh-reasons li {
    padding: 2px 0;
    padding-left: 12px;
    position: relative;
}
.dh-reasons li::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--text-3);
}
.dh-reasons-ok { font-size: .76rem; }

/* PLANNING MINIMA BLOCK (por ALTN / DEST) ----------------------- */
.dh-pm {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}
.dh-pm-info {
    /* Info-only para DEST (no es un ALTN real) — más sutil */
    opacity: 0.78;
}
.dh-pm-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.dh-pm-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-2);
}
.dh-pm-basis {
    font-size: .70rem;
    font-family: ui-monospace, monospace;
}
.dh-pm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.dh-pm-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 4px;
    background: rgba(255,255,255,0.025);
    border-left: 3px solid transparent;
    line-height: 1.15;
}
.dh-pm-cell.sev-ok   { border-left-color: var(--sev-vfr); }
.dh-pm-cell.sev-warn { border-left-color: var(--sev-mvfr); background: rgba(247,183,51,0.06); }
.dh-pm-cell.sev-fail { border-left-color: var(--sev-lifr); background: rgba(224,88,77,0.08); }
.dh-pm-cell-lbl {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    font-weight: 600;
}
.dh-pm-cell-actual {
    font-size: 1rem;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    color: var(--text);
    margin-top: 1px;
}
.dh-pm-cell-req {
    font-size: .68rem;
    font-family: ui-monospace, monospace;
    margin-top: 1px;
}

/* CHECKLIST ----------------------------------------------------- */
.dh-checklist {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    margin-top: 6px;
}
.dh-checklist-title {
    margin: 0 0 10px;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-2);
}
.dh-checklist-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 4px 12px;
}
.dh-ck-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background 0.12s;
}
.dh-ck-row:hover { background: rgba(255,255,255,0.025); }
.dh-ck-row.sev-go     { color: var(--text); }
.dh-ck-row.sev-caution { color: var(--text); }
.dh-ck-row.sev-nogo    { color: var(--text); }
.dh-ck-row.sev-manual  { color: var(--text); }

.dh-ck-icon {
    font-size: 17px;
    line-height: 1.4;
    text-align: center;
}
.sev-go      .dh-ck-icon { color: var(--sev-vfr); }
.sev-caution .dh-ck-icon { color: var(--sev-ifr); }
.sev-nogo    .dh-ck-icon { color: var(--sev-lifr); }
.sev-manual  .dh-ck-icon { color: var(--text-3); }

.dh-ck-body {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.dh-ck-label {
    font-size: .85rem;
    line-height: 1.3;
}
.dh-ck-detail { font-size: .74rem; }
.dh-ck-ref {
    font-size: .68rem;
    font-family: ui-monospace, monospace;
    color: var(--text-3);
    padding-top: 2px;
}

/* DISCLAIMER ---------------------------------------------------- */
.dh-disclaimer {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: rgba(154,166,173,0.06);
    border-left: 3px solid var(--text-3);
    font-size: .76rem;
    line-height: 1.45;
}

/* Mobile/tablet --------------------------------------------------*/
@media (max-width: 700px) {
    .dh-head {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
    }
    .dh-verdict-block { grid-column: 1; grid-row: 1; }
    .dh-counts        { grid-column: 2; grid-row: 1; align-self: center; }
    .dh-subtitle      { grid-column: 1 / -1; grid-row: 2; }
    .dh-toggle        { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
    .dh-verdict-big   { font-size: 1rem; }
}

/* ================================================================
   HEALTH INDICATOR (topbar — fuentes de datos caídas)
   ================================================================ */
.health-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: var(--sev-ifr-soft);
    color: var(--sev-ifr);
    border: 1px solid var(--sev-ifr);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    transition: background .15s, transform .12s;
    animation: pulse-soft-kf 2.4s ease-in-out infinite;
}
.health-indicator:hover { background: color-mix(in srgb, var(--sev-ifr-soft) 70%, var(--sev-ifr)); }
.health-indicator.hidden { display: none; }
.health-indicator .hi-count {
    font-variant-numeric: tabular-nums;
    min-width: 12px;
    text-align: center;
}
.health-indicator i.ti { font-size: 16px; line-height: 1; }

/* Offline indicator meta (cache info) */
.oi-meta {
    font-family: var(--font-num);
    font-size: .72rem;
}

/* Health modal */
.hm-dialog { max-width: 520px !important; }
.hm-body { padding: 16px 22px !important; }
.hm-list {
    display: grid; gap: 8px;
    margin-top: 12px;
}
.hm-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: start;
    gap: 12px;
    padding: 10px 12px;
    background: var(--sev-ifr-soft);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--sev-ifr);
}
.hm-icon { color: var(--sev-ifr); font-size: 18px; line-height: 1; margin-top: 2px; }
.hm-source { font-weight: 600; color: var(--text); font-size: .92rem; }
.hm-msg { line-height: 1.4; }
.hm-empty {
    text-align: center; padding: 24px;
    background: var(--sev-vfr-soft);
    border-radius: var(--r-sm);
    color: var(--sev-vfr);
}

/* ================================================================
   PILOT PROFILE MODAL
   ================================================================ */
.pp-dialog { max-width: 640px !important; }
.pp-body { padding: 18px 22px !important; gap: 16px !important; }
.pp-section { display: flex; flex-direction: column; gap: 10px; }
.pp-section h3 {
    margin: 8px 0 4px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--text-3);
}
.pp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) { .pp-grid { grid-template-columns: 1fr; } }
.pp-ratings {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 8px 4px;
}
.pp-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .88rem;
    color: var(--text);
}
.pp-checkbox input { accent-color: var(--accent); width: 16px; height: 16px; }
.pp-stats {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.pp-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pp-stat {
    text-align: center;
    background: var(--bg-recess);
    border-radius: var(--r-sm);
    padding: 14px 10px;
}
.pp-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font-num);
    margin-bottom: 4px;
}
.pp-stat-num.sev-go { color: var(--sev-vfr); }
.pp-stat-num.sev-caution { color: var(--sev-ifr); }
.pp-stat-num.sev-nogo { color: var(--sev-lifr); }
.pp-stat-lbl {
    font-size: .76rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ================================================================
   ONBOARDING WIZARD
   ================================================================ */
.ob-dialog { max-width: 560px !important; }
.ob-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 8px !important;
    border-bottom: 0 !important;
}
.ob-head h2 { font-size: 1.2rem !important; margin: 0; }
.ob-dots {
    display: flex; gap: 8px;
}
.ob-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line);
    transition: background .2s, transform .2s;
}
.ob-dot.active {
    background: var(--accent);
    transform: scale(1.2);
}
.ob-body { padding: 8px 22px 18px !important; min-height: 360px; }
.ob-step { display: none; animation: pb-stagger-in .35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ob-step.active { display: block; }
.ob-icon-wrap {
    display: flex; justify-content: center;
    margin: 8px 0 12px;
}
.ob-step-icon {
    font-size: 56px;
    color: var(--accent);
    background: var(--accent-soft);
    width: 100px; height: 100px;
    border-radius: 50%;
    display: grid; place-items: center;
}
.ob-step-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: -.01em;
}
.ob-step-sub {
    text-align: center;
    margin: 0 0 18px;
    font-size: .9rem;
}

/* Step 1 — Aircraft grid */
.ob-aircraft-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
@media (max-width: 540px) { .ob-aircraft-grid { grid-template-columns: repeat(2, 1fr); } }
.ob-aircraft {
    background: var(--bg-3);
    border: 1.5px solid var(--line);
    color: var(--text);
    border-radius: var(--r-md);
    padding: 14px 8px;
    cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    transition: all .15s;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
}
.ob-aircraft:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
}
.ob-aircraft.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.ob-aircraft i.ti { font-size: 20px; }
.ob-custom-ac { margin-top: 8px; }

/* Step 2 — Home base */
.ob-base-field {
    max-width: 280px;
    margin: 0 auto;
}
.ob-base-field input.icao {
    font-size: 1.3rem !important;
    text-align: center;
    padding: 12px !important;
    letter-spacing: .18em !important;
    font-weight: 600 !important;
}

/* Step 3 — License */
.ob-license-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 540px) { .ob-license-grid { grid-template-columns: 1fr; } }
.ob-license {
    background: var(--bg-3);
    border: 1.5px solid var(--line);
    color: var(--text);
    border-radius: var(--r-md);
    padding: 16px 14px;
    cursor: pointer;
    text-align: left;
    display: flex; flex-direction: column;
    gap: 4px;
    transition: all .15s;
    font-family: inherit;
}
.ob-license:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
}
.ob-license.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.ob-license strong { color: var(--text); font-size: 1rem; }
.ob-license.selected strong { color: var(--accent); }

.ob-foot { padding: 14px 22px 18px !important; }

/* ================================================================
   LOCAL VFR FLIGHT BADGE (DEP=DEST)
   ================================================================ */
.local-flight-badge {
    display: grid;
    /* 4 columnas: icono · texto · toggle VFR/IFR · radio */
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-left: 3px solid var(--accent);
    transition: all 0.22s ease;
}
/* En pantallas estrechas (móvil): toggle + radio van en su propia fila debajo */
@media (max-width: 640px) {
    .local-flight-badge {
        grid-template-columns: 28px 1fr;
    }
    .lfb-type-toggle,
    .lfb-radius {
        grid-column: 1 / -1;
        justify-self: start;
    }
    .lfb-type-toggle { margin-right: 0; }
}
.local-flight-badge.hidden { display: none; }
.local-flight-badge > i.ti {
    font-size: 22px;
    color: var(--accent);
    line-height: 1;
}
.lfb-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lfb-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -.005em;
}
.lfb-sub {
    line-height: 1.35;
}
/* Segmented control VFR / IFR para vuelo local */
.lfb-type-toggle {
    display: inline-flex;
    gap: 0;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 3px;
    margin-right: 12px;
}
.lfb-type-btn {
    background: transparent;
    border: 0;
    padding: 5px 14px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: var(--font-mono);
    color: var(--text-3);
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.lfb-type-btn:hover { color: var(--text); }
.lfb-type-btn.active {
    background: var(--accent);
    color: var(--bg);
    box-shadow: 0 1px 3px rgba(12,133,119,0.3);
}
.lfb-type-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.lfb-radius {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 4px 12px;
    transition: border-color 0.15s ease;
    white-space: nowrap;       /* el label no debe romperse en 2 líneas */
    flex-shrink: 0;
}
.lfb-radius:focus-within { border-color: var(--accent); }
.lfb-radius-lbl {
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    flex-shrink: 0;
}
.lfb-radius input {
    width: 50px;
    background: transparent;
    border: 0;
    color: var(--text);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    padding: 4px 0;
    outline: none;
    -moz-appearance: textfield;
}
.lfb-radius input::-webkit-outer-spin-button,
.lfb-radius input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.lfb-radius-unit {
    font-size: .82rem;
    color: var(--text-2);
    font-weight: 500;
}

/* ================================================================
   NOTAM PASTE — toolbar + modal premium
   ================================================================ */
.notams-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 12px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.notams-toolbar .btn { padding: 6px 12px; font-size: .84rem; }

.np-dialog { max-width: 720px !important; }
.np-body { padding: 18px 22px !important; }
.np-body textarea#np-text {
    width: 100%;
    font-family: var(--font-mono);
    font-size: .85rem;
    background: var(--bg-recess);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text);
    padding: 12px;
    resize: vertical;
    min-height: 220px;
    line-height: 1.45;
}
.np-body textarea#np-text:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.np-preview {
    margin-top: 12px;
    display: grid;
    gap: 6px;
}
.np-preview-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: var(--bg-3);
    border-left: 3px solid var(--sev-vfr);
    font-size: .85rem;
}
.np-preview-item.error {
    border-left-color: var(--sev-lifr);
    background: var(--sev-lifr-soft);
}
.np-preview-num {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .85rem;
}
.np-preview-meta {
    font-size: .78rem;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.np-preview-badge {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sev-vfr-soft);
    color: var(--sev-vfr);
    font-weight: 700;
}
.np-preview-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-3);
    font-size: .85rem;
    background: var(--bg-recess);
    border-radius: var(--r-sm);
    border: 1px dashed var(--line);
}

/* ================================================================
   ROUTE NOTAM MARKERS (zonas militares R/P/D + actividades W*)
   ================================================================ */
.route-notam-marker-wrap {
    background: transparent !important;
    border: 0 !important;
}
.route-notam-marker {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1.5px solid currentColor;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    font-size: 15px;
    line-height: 1;
}
.route-notam-marker i.ti {
    color: currentColor;
    line-height: 1;
}

/* ================================================================
   AUTH MODAL — Sign in / Sign up / Reset
   ================================================================ */
.auth-dialog {
    max-width: 460px !important;
}
.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--line-soft);
    padding: 0 22px;
    margin-top: -8px;
    background: var(--bg-card);
}
.auth-tab {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text-3);
    padding: 14px 6px;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
    letter-spacing: -.005em;
    font-family: inherit;
}
.auth-tab:hover { color: var(--text-2); }
.auth-tab.active { color: var(--accent); font-weight: 600; }
.auth-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px; left: 12px; right: 12px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
}
.auth-body { padding: 18px 22px 20px !important; gap: 14px !important; }

/* OAuth providers */
.auth-oauth {
    display: flex; flex-direction: column; gap: 8px;
}
.auth-oauth-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--bg-3);
    color: var(--text);
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    font-family: inherit;
}
.auth-oauth-btn:hover {
    background: color-mix(in srgb, var(--bg-3) 80%, var(--line-strong));
    border-color: var(--line-strong);
}
.auth-oauth-btn:active { transform: scale(0.98); }
.auth-oauth-btn i.ti { font-size: 18px; line-height: 1; }
.auth-apple i.ti { color: var(--text); }

/* Divider con texto */
.auth-divider {
    display: flex; align-items: center; gap: 10px;
    color: var(--text-3);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin: 2px 0;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1; height: 1px;
    background: var(--line);
}

/* Forms */
.auth-form {
    display: flex; flex-direction: column; gap: 12px;
}
.auth-form.hidden { display: none; }
.auth-form .field input {
    width: 100%;
}
.auth-hint { margin-top: 4px; }

/* Consent checkbox */
.auth-consent {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .82rem;
    color: var(--text-2);
    line-height: 1.45;
    cursor: pointer;
}
.auth-consent input[type="checkbox"] {
    margin-top: 2px;
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* Link buttons (forgot, back) */
.auth-link-btn {
    background: transparent;
    border: 0;
    color: var(--accent);
    font-size: .85rem;
    cursor: pointer;
    padding: 0;
    align-self: flex-start;
    font-family: inherit;
    transition: opacity 0.15s ease;
}
.auth-link-btn:hover { opacity: 0.75; text-decoration: underline; text-underline-offset: 3px; }

.auth-submit {
    width: 100%;
    justify-content: center;
    padding: 11px 16px !important;
    margin-top: 4px;
}
.auth-submit:disabled { opacity: 0.6; }
.auth-submit.loading {
    position: relative;
    pointer-events: none;
}

.auth-feedback {
    font-size: .85rem;
    line-height: 1.4;
    min-height: 0;
    padding: 0;
    transition: padding 0.18s ease;
}
.auth-feedback.error,
.auth-feedback.success {
    padding: 10px 12px;
    border-radius: var(--r-sm);
    border-left-width: 3px;
    border-left-style: solid;
}
.auth-feedback.error {
    background: var(--sev-lifr-soft);
    border-left-color: var(--sev-lifr);
    color: var(--text);
}
.auth-feedback.success {
    background: var(--sev-vfr-soft);
    border-left-color: var(--sev-vfr);
    color: var(--text);
}
.auth-feedback:empty { display: none; }

.auth-privacy {
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
    margin: 0;
    text-align: center;
    line-height: 1.45;
}

/* ================================================================
   PROFILE MENU — dropdown del topbar con toggles de visibilidad
   ================================================================ */
.profile-wrap {
    position: relative;
}
.profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 1600;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;
    transition:
        opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.profile-menu:not(.hidden) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.profile-menu.hidden { display: block; }   /* override del display:none */

/* Toggle de visibilidad controlado por el menú Perfil */
.user-hidden { display: none !important; }

.profile-menu-section {
    padding: 6px 4px;
}
.profile-menu-divider {
    height: 1px;
    background: var(--line-soft);
    margin: 4px 0;
}
.profile-menu-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--text-3);
    padding: 8px 12px 4px;
}

.profile-menu-item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.12s ease;
}
.profile-menu-item:hover {
    background: var(--bg-3);
}
.profile-menu-item > i.ti {
    font-size: 18px;
    color: var(--accent);
    line-height: 1;
}
.profile-menu-item .pmi-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.profile-menu-item .pmi-title {
    font-size: .92rem;
    font-weight: 500;
    color: var(--text);
}
.profile-menu-item .pmi-sub {
    font-size: .76rem;
}
.profile-menu-item .pmi-chev {
    color: var(--text-3);
    font-size: 16px;
    line-height: 1;
}
.profile-menu-item .pmi-meta {
    font-family: -apple-system, "SF Mono", ui-monospace, monospace;
    font-size: .7rem;
    color: var(--text-3);
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Bloque de cuenta del usuario (signed in) en el dropdown perfil */
.profile-account-info {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--bg-recess);
}
.profile-account-info.hidden { display: none; }
.pai-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid; place-items: center;
    font-size: 20px;
}
.pai-text { min-width: 0; }
.pai-email {
    font-size: .88rem;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pai-status { font-size: .72rem; }
.profile-signout-btn {
    background: transparent;
    border: 0;
    color: var(--text-2);
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    font-size: 18px;
    transition: background 0.12s, color 0.12s;
}
.profile-signout-btn:hover {
    background: var(--sev-lifr-soft);
    color: var(--sev-lifr);
}

/* Toggle item con switch iOS */
.profile-toggle-item {
    display: grid;
    grid-template-columns: 22px 1fr 42px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s ease;
    position: relative;
}
.profile-toggle-item:hover {
    background: var(--bg-3);
}
.profile-toggle-item > i.ti.pti-icon {
    font-size: 18px;
    color: var(--text-2);
    line-height: 1;
}
.profile-toggle-item .pti-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.profile-toggle-item .pti-title {
    font-size: .92rem;
    font-weight: 500;
    color: var(--text);
}
.profile-toggle-item .pti-sub {
    font-size: .76rem;
}

/* iOS-style switch */
.profile-toggle-item { cursor: pointer; }
.profile-switch {
    appearance: none;
    -webkit-appearance: none;
    /* Oculto visualmente pero accesible: mantiene el click delegation desde <label> */
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    grid-column: 3;
    justify-self: end;
}
.profile-switch-track {
    position: relative;
    grid-column: 3;
    justify-self: end;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--bg-recess);
    border: 1px solid var(--line);
    transition: background 0.22s ease, border-color 0.22s ease;
    flex-shrink: 0;
}
.profile-switch-track::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--text-2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s ease;
}
.profile-switch:checked + .profile-switch-track {
    background: var(--sev-vfr);
    border-color: var(--sev-vfr);
}
.profile-switch:checked + .profile-switch-track::after {
    transform: translateX(18px);
    background: #fff;
}
.profile-switch:focus-visible + .profile-switch-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 540px) {
    .profile-menu {
        right: -8px;
        min-width: 280px;
    }
}

/* Topbar btn (usado por theme-toggle, profile, etc.) — ya definido en estructura existente,
   pero refuerzo cómo se ven en hover */
.topbar-btn {
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 1.05rem;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
    padding: 0;
}
.topbar-btn:hover {
    background: var(--bg-3);
    color: var(--text);
    border-color: var(--line-strong);
}
.topbar-btn[aria-expanded="true"] {
    background: var(--bg-3);
    border-color: var(--accent);
    color: var(--accent);
}

/* ================================================================
   PREMIUM POLISH — HOVER, FOCUS, MOTION GLOBAL
   ================================================================ */

/* Theme transition global — todos los var changes se animan suavemente
   cuando el usuario cambia día/noche. */
html.theme-transition,
html.theme-transition * {
    transition:
        background-color 0.34s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.34s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.34s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.34s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-delay: 0 !important;
}

/* Hover lift — cualquier elemento con clase `.lift` o cards principales
   se eleva sutilmente al hover. Da sensación táctil/premium global. */
.card,
.dh-airport,
.notam-card,
.notam-visual,
.notam-tag,
.aero-card,
.wi-card,
.risk-card,
.lbv-entry,
.map-notam-row,
.proc-catalog-item,
.notam-portal {
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.18s ease,
        background-color 0.18s ease;
}
.dh-airport:hover,
.notam-card:hover,
.notam-visual:hover,
.notam-tag:hover,
.wi-card:hover,
.risk-card:hover,
.lbv-entry:hover,
.proc-catalog-item:hover,
.notam-portal:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-strong);
}

/* Focus rings premium — accesibles y bonitos */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
    transition: outline-offset 0.12s ease;
}
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 3px;
}

/* Spring active state — TODOS los elementos clickables se "hunden" al click */
button:not(:disabled):active,
.btn:not(:disabled):active,
.dh-toggle:active,
.theme-toggle:active,
.icon-btn:active,
.tab:active {
    transform: scale(0.97);
    transition: transform 0.06s ease;
}

/* Selección de texto refinada */
::selection {
    background: var(--accent-soft);
    color: var(--text);
}

/* Scrollbar más sutil en cards internas */
.brief-pane::-webkit-scrollbar,
.pm-body::-webkit-scrollbar,
.ai-conversation::-webkit-scrollbar {
    width: 8px;
}
.brief-pane::-webkit-scrollbar-thumb,
.pm-body::-webkit-scrollbar-thumb,
.ai-conversation::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Imágenes / SVG fluidos */
img, svg { max-width: 100%; height: auto; }

/* Disable hover lift en mobile táctil */
@media (hover: none) {
    .dh-airport:hover,
    .notam-card:hover,
    .notam-visual:hover,
    .notam-tag:hover,
    .wi-card:hover,
    .risk-card:hover,
    .lbv-entry:hover,
    .proc-catalog-item:hover {
        transform: none;
        box-shadow: var(--shadow);
    }
}

/* ================================================================
   HUD-STYLE CRITICAL GLOW — efecto sutil de avionica en críticos
   ================================================================ */
.hud-glow {
    position: relative;
}
.hud-glow::after {
    content: "";
    position: absolute;
    top:-1px;right:-1px;bottom:-1px;left:-1px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 0 1px currentColor,
        0 0 8px 0 currentColor,
        inset 0 0 8px -2px currentColor;
    opacity: 0.32;
    animation: hud-glow-pulse 3s ease-in-out infinite;
}
@keyframes hud-glow-pulse {
    0%, 100% { opacity: 0.20; }
    50%      { opacity: 0.45; }
}

/* Aplicado automáticamente a NOTAMs / dispatch críticos */
.dispatch-hero-inner.sev-red {
    box-shadow:
        var(--shadow),
        0 0 0 1px rgba(244, 63, 94, 0.12),
        0 0 16px -4px rgba(244, 63, 94, 0.20);
}
.dispatch-hero-inner.sev-amber {
    box-shadow:
        var(--shadow),
        0 0 0 1px rgba(251, 146, 60, 0.10);
}

/* ================================================================
   EMPTY STATES — premium branding cuando no hay briefing
   ================================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--text-2);
    gap: 14px;
}
.empty-state-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--bg-recess);
    display: grid;
    place-items: center;
    color: var(--accent);
    font-size: 34px;
    border: 1px solid var(--line);
}
.empty-state-icon i.ti { line-height: 1; }
.empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -.01em;
}
.empty-state-msg {
    font-size: .92rem;
    max-width: 380px;
    line-height: 1.5;
}
.empty-state-cta {
    margin-top: 6px;
}

/* ================================================================
   PULSE ANIMATIONS — para estados críticos / live
   ================================================================ */
@keyframes pulse-critical-kf {
    0%, 100% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 6px transparent;
        opacity: 0.85;
    }
}
.pulse-critical {
    animation: pulse-critical-kf 1.6s ease-in-out infinite;
    will-change: opacity, box-shadow;
}

@keyframes pulse-soft-kf {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
.pulse-soft {
    animation: pulse-soft-kf 2.4s ease-in-out infinite;
    will-change: opacity;
}

/* Pulse dot — para indicar live/active */
@keyframes pulse-dot-kf {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 currentColor;
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px transparent;
    }
}
.pulse-dot {
    animation: pulse-dot-kf 1.8s ease-in-out infinite;
}

/* Aplicación automática a elementos críticos del dispatch hero */
.dh-verdict-big.sev-red,
.dispatch-hero-inner.sev-red .dh-verdict-big {
    animation: pulse-soft-kf 2.4s ease-in-out infinite;
}

/* Banda lateral del hero pulsa cuando rojo */
.dispatch-hero-inner.sev-red::before {
    animation: pulse-soft-kf 2.2s ease-in-out infinite;
}

/* NOTAM crítico — la dot inicial pulsa sutil */
.notam-card.sev-critical {
    border-left: 3px solid var(--sev-lifr);
}
.notam-card.sev-critical::before {
    content: "";
    position: absolute;
    top: 12px; right: 12px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sev-lifr);
    animation: pulse-dot-kf 1.8s ease-in-out infinite;
    color: var(--sev-lifr);
}
.notam-card { position: relative; }

/* Re-briefing activo indicator */
.watch-active-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--accent);
    font-weight: 500;
}
.watch-active-indicator::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent);
    animation: pulse-dot-kf 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pulse-critical, .pulse-soft, .pulse-dot,
    .notam-card.sev-critical::before,
    .watch-active-indicator::before,
    .dh-verdict-big.sev-red,
    .dispatch-hero-inner.sev-red::before {
        animation: none !important;
    }
}

/* ================================================================
   NOTAM v2 — tarjeta con icono, titular humano y colores calmados
   ----------------------------------------------------------------
   Va al final de la hoja a propósito: sobreescribe los colores
   fluorescentes históricos (rgba 231,76,60 / 245,176,65) con la
   paleta --ntm-* en TODAS las superficies NOTAM.
   ================================================================ */
/* --- Layout nueva tarjeta: icono + contenido --- */
.notam-row { display: flex; gap: 12px; align-items: flex-start; }
.notam-ico {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 19px;
    background: var(--ntm-low-soft);
    color: var(--ntm-low);
    border: 1px solid var(--line-soft);
    margin-top: 1px;
}
.notam-card.sev-critical .notam-ico { background: var(--ntm-crit-soft); color: var(--ntm-crit); border-color: var(--ntm-crit); }
.notam-card.sev-high     .notam-ico { background: var(--ntm-high-soft); color: var(--ntm-high); border-color: var(--ntm-high); }
.notam-card.sev-medium   .notam-ico { background: var(--ntm-med-soft);  color: var(--ntm-med); }
.notam-main { flex: 1 1 auto; min-width: 0; }
.notam-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    letter-spacing: .01em;
}
.notam-card.sev-critical .notam-title { color: var(--ntm-crit); }
.notam-card.sev-high     .notam-title { color: var(--ntm-high); }
.notam-id-mini {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-3);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.notam-summary {
    font-size: .84rem;
    line-height: 1.5;
    color: var(--text-2);
    margin: 4px 0 2px;
    overflow-wrap: break-word;
}
.notam-when {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--text-3);
    margin-top: 6px;
}
.notam-when .ti { font-size: .9rem; }

/* --- Tarjeta: bordes/fondos con la paleta calmada --- */
.notam-card.sev-critical { border-left-color: var(--ntm-crit); background: var(--ntm-crit-soft); }
.notam-card.sev-high     { border-left-color: var(--ntm-high); background: var(--ntm-high-soft); }
.notam-card.sev-medium   { border-left-color: var(--ntm-med);  background: transparent; }
.notam-card.sev-low      { border-left-color: var(--ntm-low);  background: transparent; }
.notam-card.sev-critical::before { background: var(--ntm-crit); color: var(--ntm-crit); }

/* ================================================================
   RISK BRIEFING — tiles "números del vuelo", watch list y modo
   presentación. Integrado con el design system actual; las barras
   dobles animadas existentes (risk-card-bar) no se tocan.
   ================================================================ */
.rb-section-lbl {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 18px 4px 8px;
}
.rb-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.rb-tile {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-top: 3px solid var(--sev-vfr);
    border-radius: var(--r-md);
    padding: 12px 14px;
}
.rb-tile.sev-green { border-top-color: var(--sev-vfr); }
.rb-tile.sev-amber { border-top-color: var(--sev-caution); }
.rb-tile.sev-red   { border-top-color: var(--sev-lifr); }
.rb-tile-lbl {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
}
.rb-tile-lbl .ti { font-size: .9rem; }
.rb-tile-val {
    font-family: var(--font-ui);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.15;
    margin-top: 6px;
    color: var(--text);
}
.rb-tile.sev-amber .rb-tile-val { color: var(--sev-caution); }
.rb-tile.sev-red   .rb-tile-val { color: var(--sev-lifr); }
.rb-tile-val small { font-size: .85rem; font-weight: 600; color: var(--text-2); }
.rb-tile-sub { margin-top: 4px; line-height: 1.4; }

/* Fuente del dato en los desplegables de factores de riesgo */
.rfcv-detail-src {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--line-soft);
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--text-3);
    letter-spacing: .03em;
}
.rfcv-detail-src .ti { font-size: .85rem; }

.rb-present-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 16px auto 4px;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    background: var(--bg-card);
    color: var(--text);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}
.rb-present-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Pantalla completa: fondo correcto y tipografías ampliadas */
.risk-panel.rb-present {
    background: var(--bg);
    overflow-y: auto;
    padding: 28px clamp(16px, 4vw, 60px);
}
.risk-panel.rb-present .rb-tile-val { font-size: 2.2rem; }
.risk-panel.rb-present .rb-tile-sub,
.risk-panel.rb-present .rb-watch-item { font-size: 1.05rem; }
.risk-panel.rb-present .rcs-num { font-size: 2.6rem; }
.risk-panel.rb-present .rb-present-btn { position: fixed; bottom: 18px; right: 18px; background: var(--bg-3); }

/* ================================================================
   SIGMET/PIREP v2 — el vacío con valor: tarjeta de verificación,
   aviso más cercano, nota PIREP-Europa y ✓ en la pestaña.
   ================================================================ */
.sigmet-clean-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--sev-vfr);
    border-radius: var(--r-lg);
    padding: 22px 24px;
}
.scc-ico {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: var(--sev-vfr-soft);
    color: var(--sev-vfr);
    font-size: 28px;
}
.scc-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--sev-vfr);
    margin-bottom: 8px;
}
.scc-rows { display: flex; flex-direction: column; gap: 5px; }
.scc-row { font-size: .88rem; color: var(--text-2); line-height: 1.45; }
.scc-row b { color: var(--text); }
.scc-age {
    display: flex; align-items: center; gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line-soft);
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-3);
}
.sigmet-nearest {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ntm-low);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin-top: 10px;
    font-size: .88rem;
    color: var(--text-2);
}
.sigmet-nearest b { color: var(--text); }
.sigmet-nearest .ti { color: var(--ntm-low); font-size: 1.1rem; }
.pirep-empty-note {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px;
}
.pirep-empty-note .ti { color: var(--text-3); font-size: 1.15rem; margin-top: 1px; }
.pirep-empty-note .muted { margin-top: 4px; line-height: 1.5; }
/* ✓ en la pestaña cuando la verificación pasó limpia */
.tab-sev-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--sev-vfr-soft);
    color: var(--sev-vfr);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* --- Badges de origen del hazard en pestaña Aeródromo (METAR vs TAF@ETA) --- */
.aero-hazard-srcrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.aero-hazard-src {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: var(--r-full);
    border: 1px solid;
}
.aero-hazard-src.now { color: var(--ntm-crit); border-color: var(--ntm-crit); background: var(--ntm-crit-soft); }
.aero-hazard-src.eta { color: var(--ntm-high); border-color: var(--ntm-high); background: var(--ntm-high-soft); }

/* ================================================================
   METEO v2 — tiles con número protagonista + barras, compás con
   física. (Sobrescribe los tamaños base de .mv-stat-val de arriba.)
   ================================================================ */
/* Entrada escalonada de las 6 tiles */
.mv-stats-grid .mv-stat {
    opacity: 0;
    transform: translateY(18px) scale(.97);
    animation: mvTileIn .65s cubic-bezier(.22, 1, .36, 1) forwards;
}
.mv-stats-grid .mv-stat:nth-child(1) { animation-delay: .05s; }
.mv-stats-grid .mv-stat:nth-child(2) { animation-delay: .12s; }
.mv-stats-grid .mv-stat:nth-child(3) { animation-delay: .19s; }
.mv-stats-grid .mv-stat:nth-child(4) { animation-delay: .26s; }
.mv-stats-grid .mv-stat:nth-child(5) { animation-delay: .33s; }
.mv-stats-grid .mv-stat:nth-child(6) { animation-delay: .40s; }
@keyframes mvTileIn { to { opacity: 1; transform: none; } }

/* Número protagonista (antes 0.98rem — quedaba pobre) */
.mv-col-stats .mv-stat-val,
.mv-stat-val {
    font-size: 1.55rem;
    line-height: 1.1;
    margin-top: 4px;
}
.mv-stat-val small { font-size: 0.95rem; color: var(--text-2); font-weight: 600; }
.mv-stat-sub { font-size: 0.76rem; margin-top: 4px; line-height: 1.4; }
.mv-stat-extra {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-2);
    margin-top: 2px;
    line-height: 1.4;
}
/* Barra-visual al pie de cada tile (se llena vía _animateMeteoV2) */
.mv-stat-bar {
    height: 5px;
    border-radius: 4px;
    background: var(--bg-card);
    overflow: hidden;
    margin-top: auto;
    padding: 0;
}
.mv-stat { min-height: 132px; }
.mv-stat-bar i {
    display: block;
    height: 100%;
    border-radius: 4px;
    width: 0;
    transition: width 1s .45s cubic-bezier(.22, 1, .36, 1);
}
/* Sub del micro-card CRUZADO ("de 20 kt — 30%") */
.mv-microcard-sub {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--text-3);
    margin-top: 2px;
}

/* Compás v2: flecha con muelle + glow de pista activa */
.wcp-windg {
    transform: rotate(0deg);
    transition: transform 1.3s cubic-bezier(.32, 1.45, .45, 1);
    will-change: transform;
}
.wcp-glow {
    opacity: 0;
    animation: wcpGlowIn .6s 1.35s ease forwards;
}
@keyframes wcpGlowIn { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .mv-stats-grid .mv-stat { animation: none; opacity: 1; transform: none; }
    .wcp-windg { transition: none; }
    .wcp-glow { animation: none; opacity: .45; }
    .mv-stat-bar i { transition: none; }
}

/* --- Onboarding paso 4: tema + switches de preferencias --- */
.ob-theme-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 16px; }
.ob-theme {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 12px;
    background: var(--bg-recess);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: var(--font-ui);
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.ob-theme .ti { font-size: 22px; color: var(--text-2); }
.ob-theme.selected { border-color: var(--accent); background: var(--accent-soft); }
.ob-theme.selected .ti { color: var(--accent); }
.ob-pref-list { display: flex; flex-direction: column; gap: 8px; }
.ob-pref {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    text-align: left;
    padding: 13px 14px;
    background: var(--bg-recess);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: var(--font-ui);
    cursor: pointer;
    transition: border-color .2s;
}
.ob-pref:hover { border-color: var(--line-strong); }
.ob-pref-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-pref-txt .muted { line-height: 1.4; }
.ob-pref-switch {
    flex: 0 0 auto;
    width: 42px; height: 24px;
    border-radius: 999px;
    background: var(--bg-3);
    border: 1px solid var(--line-strong);
    position: relative;
    transition: background .2s, border-color .2s;
}
.ob-pref-switch::after {
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--text-3);
    transition: transform .22s cubic-bezier(.22,1,.36,1), background .2s;
}
.ob-pref.on .ob-pref-switch { background: var(--accent-soft); border-color: var(--accent); }
.ob-pref.on .ob-pref-switch::after { transform: translateX(18px); background: var(--accent); }

/* --- Chip de frescura en la vista Meteo (cabecera del aeropuerto) --- */
.mv-head-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.mv-age { font-size: 0.74rem; }

/* --- Icono de los grupos por tag (la vista principal de NOTAMs) --- */
.notam-tag-ico {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: 16px;
    background: var(--ntm-low-soft);
    color: var(--ntm-low);
    border: 1px solid var(--line-soft);
}
.notam-tag.sev-critical .notam-tag-ico { background: var(--ntm-crit-soft); color: var(--ntm-crit); border-color: var(--ntm-crit); }
.notam-tag.sev-high     .notam-tag-ico { background: var(--ntm-high-soft); color: var(--ntm-high); border-color: var(--ntm-high); }
.notam-tag.sev-medium   .notam-tag-ico { background: var(--ntm-med-soft);  color: var(--ntm-med); }
.notam-visual .notam-tag-ico { margin-right: 4px; }
.notam-visual.sev-critical .notam-tag-ico { background: var(--ntm-crit-soft); color: var(--ntm-crit); border-color: var(--ntm-crit); }
.notam-visual.sev-high     .notam-tag-ico { background: var(--ntm-high-soft); color: var(--ntm-high); border-color: var(--ntm-high); }
.notam-tag-schedule .ti { font-size: .9rem; opacity: .8; }

/* --- Pills de conteo y agrupaciones --- */
.notam-count-pill.sev-critical { background: var(--ntm-crit-soft); color: var(--ntm-crit); border-color: var(--ntm-crit); }
.notam-count-pill.sev-high     { background: var(--ntm-high-soft); color: var(--ntm-high); border-color: var(--ntm-high); }
.notam-count-pill.sev-medium   { background: var(--ntm-med-soft);  color: var(--ntm-med);  border-color: var(--ntm-med); }
.notam-count-pill.sev-low      { background: var(--ntm-low-soft);  color: var(--ntm-low);  border-color: var(--ntm-low); }
.notam-sec.sev-lifr .notam-sec-dot   { background: var(--ntm-crit); }
.notam-sec.sev-ifr  .notam-sec-dot   { background: var(--ntm-high); }
.notam-sec.sev-mvfr .notam-sec-dot   { background: var(--ntm-med); }
.notam-sec.sev-lifr .notam-sec-label { color: var(--ntm-crit); }
.notam-sec.sev-ifr  .notam-sec-label { color: var(--ntm-high); }
.notam-tag.sev-critical { border-left-color: var(--ntm-crit); background: linear-gradient(90deg, var(--ntm-crit-soft), var(--bg-card) 60%); }
.notam-tag.sev-critical:hover { box-shadow: 0 1px 6px var(--ntm-crit-soft); }
.notam-tag.sev-high     { border-left-color: var(--ntm-high); background: linear-gradient(90deg, var(--ntm-high-soft), var(--bg-card) 60%); }
.notam-tag.sev-high:hover     { box-shadow: 0 1px 6px var(--ntm-high-soft); }
.notam-tag.sev-critical .notam-tag-title { color: var(--ntm-crit); }
.notam-tag.sev-high     .notam-tag-title { color: var(--ntm-high); }
.notam-visual.sev-critical { border-left-color: var(--ntm-crit); background: var(--ntm-crit-soft); }
.notam-visual.sev-high     { border-left-color: var(--ntm-high); background: var(--ntm-high-soft); }
.notam-visual.sev-critical .notam-visual-title { color: var(--ntm-crit); }
.notam-visual.sev-high     .notam-visual-title { color: var(--ntm-high); }
.notam-sev-block.sev-critical .notam-sev-title { background: var(--ntm-crit-soft); color: var(--ntm-crit); }
.notam-sev-block.sev-high     .notam-sev-title { background: var(--ntm-high-soft); color: var(--ntm-high); }

/* --- Banner resumen de NOTAMs v2: delicado e integrado --- */
.notams-banner {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ntm-low);
    border-radius: var(--r-md);
    padding: 13px 16px;
    gap: 14px;
}
.notams-banner.crit { border-left-color: var(--ntm-crit); background: var(--bg-card); }
.notams-banner.warn { border-left-color: var(--ntm-high); background: var(--bg-card); }
.notams-banner.ok   { border-left-color: var(--sev-vfr);  background: var(--bg-card); }
.notams-banner strong { font-weight: 600; font-size: .95rem; }
.notams-banner.crit strong { color: var(--ntm-crit); }
.notams-banner.warn strong { color: var(--ntm-high); }
.notams-banner-ico {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    border: 1px solid var(--line-soft);
    background: var(--ntm-low-soft);
    color: var(--ntm-low);
}
.notams-banner-ico.crit { background: var(--ntm-crit-soft); color: var(--ntm-crit); }
.notams-banner-ico.warn { background: var(--ntm-high-soft); color: var(--ntm-high); }
.notams-banner-ico.ok   { background: var(--sev-vfr-soft);  color: var(--sev-vfr); }
.notams-window-chip {
    background: var(--bg-recess);
    color: var(--text-2);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    padding: 3px 10px;
    letter-spacing: .02em;
}
/* Conteos: discretos, solo color de texto + punto, sin cajas chillonas */
.notams-counts { gap: 10px; align-items: center; }
.notam-count-pill {
    min-width: 0;
    padding: 0;
    background: none !important;
    border: none !important;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.notam-count-pill::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
}
.notam-count-pill.sev-critical { color: var(--ntm-crit); }
.notam-count-pill.sev-high     { color: var(--ntm-high); }
.notam-count-pill.sev-medium   { color: var(--ntm-med); }
.notam-count-pill.sev-low      { color: var(--ntm-low); }
.notam-count-pill.sev-info     { color: var(--text-3); }

/* Enlace de feedback del intérprete NOTAM */
.notam-report {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-3);
    background: none; border: none; padding: 2px 0;
    cursor: pointer; opacity: .72;
    transition: color .15s ease, opacity .15s ease;
}
.notam-report i { font-size: .82rem; }
.notam-report:hover { color: var(--accent); opacity: 1; }
.notam-report-sm { font-size: 0.68rem; margin-top: 6px; opacity: .55; }
.notam-report-sm:hover { opacity: 1; }

/* Pills dentro de la tarjeta (tags secundarios) */
.notam-card.sev-critical .notam-tag { background: var(--ntm-crit-soft); color: var(--ntm-crit); border-color: var(--ntm-crit); }
.notam-card.sev-high     .notam-tag { background: var(--ntm-high-soft); color: var(--ntm-high); border-color: var(--ntm-high); }

/* En móvil/iPad estrecho, el id pasa debajo del título sin apretujar */
@media (max-width: 560px) {
    .notam-id-mini { margin-left: 0; width: 100%; order: 10; }
}

/* ================================================================
   SPLASH SCREEN — compass rose mientras carga
   ================================================================ */
.splash {
    position: fixed; top:0;right:0;bottom:0;left:0;
    z-index: 9999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
    background: linear-gradient(180deg, #0a1322 0%, #060c18 100%);
    color: #22D3C5;
    opacity: 1;
    transition: opacity .45s ease, visibility .45s ease;
}
.splash.splash-out,
.splash.splash-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-logo {
    width: 110px !important;
    height: 110px !important;
    max-width: 110px;
    color: #0C8577;
    /* Solo "pop" inicial. La rotación se aplica al anillo del compás
       (.splash-ring) para que el brand mark central se quede estático. */
    animation: splash-pop .55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    filter: drop-shadow(0 0 14px rgba(12, 133, 119, 0.28));
}
.splash-logo .splash-ring {
    transform-origin: 60px 60px;     /* centro del viewBox 120x120 */
    animation: splash-spin 8s linear infinite;
}
.splash-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #f5f7fa;
    margin-top: 4px;
}
.splash-sub {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245, 247, 250, 0.5);
}
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-pop  {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .splash-logo { animation: none; }
    .splash-logo .splash-ring { animation: none; }
}

/* ================================================================
   ROUTE HERO — DEP → DEST visual flow (compacto)
   ================================================================ */
.route-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent),
        color-mix(in srgb, var(--accent-2) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-2) 24%, transparent);
    border-radius: 12px;
}
.rh-airport {
    display: flex; flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.rh-dep   { text-align: left;  align-items: flex-start; }
.rh-dest  { text-align: right; align-items: flex-end; }
.rh-label {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-2);
    font-weight: 600;
    line-height: 1;
}
.rh-icao {
    font-family: -apple-system, "SF Mono", ui-monospace, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text, #f5f7fa);
    line-height: 1.1;
}
.rh-icao.rh-empty { color: var(--text-3); font-weight: 500; }
.rh-name {
    font-size: 0.68rem;
    color: var(--text-2);
    max-width: 18ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.rh-arrow {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--accent-2);
    min-width: 90px;
}
.rh-arrow svg {
    width: 88px !important;
    height: 14px !important;
    max-width: 88px;
    flex-shrink: 0;
}
.rh-arrow-meta {
    margin-top: 2px;
    font-family: -apple-system, "SF Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: var(--text-2);
    min-height: 0.8em;
    line-height: 1;
}
.route-hero.rh-local .rh-arrow svg { opacity: 0.3; }
.route-hero.rh-local .rh-arrow::after {
    content: "VFR LOCAL";
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    color: #22D3C5;
    font-weight: 700;
    margin-top: 2px;
}

/* (Reglas .brief-group / .brief-divider / .brief-tab-hero retiradas:
    todas las pills heredan el estilo unificado de .brief-tab arriba) */

/* ================================================================
   APP VERSION FOOTER
   ================================================================ */
.app-version {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: -apple-system, "SF Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: rgba(245, 247, 250, 0.38);
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
}
.app-version i { font-size: 0.78rem; opacity: 0.65; }
.app-version .av-sep { opacity: 0.35; }

/* ================================================================
   PRINT / PDF STYLESHEET
   ================================================================ */
@media print {
    @page { margin: 14mm; size: A4 portrait; }
    html, body { background: #fff !important; color: #111 !important; font-size: 10pt; }
    .topbar, .ai-fab, .ai-panel,
    #card-input, .splash,
    .btn, .tabs, .map-subtabs, .brief-tabs,
    .toast-container, .watch-status, #profile-menu,
    .health-badge, footer.card-foot,
    #onboarding-modal, #pp-modal, #auth-modal,
    #health-modal, #notam-paste-modal {
        display: none !important;
    }
    .brief-pane {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        page-break-inside: avoid;
        margin-bottom: 14pt;
    }
    .leaflet-container, .map-container, #route-map { display: none !important; }
    .route-hero { background: #fff !important; border: 1px solid #999 !important; color: #000 !important; }
    .rh-icao { color: #000 !important; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
html.printing .tab-panel { display: block !important; }
html.printing .brief-pane { display: block !important; }

/* ====================================================================
   METEO V13 — handoff design (selector arriba + ficha grande + lista)
   ==================================================================== */
.meteo-v13 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: var(--font-ui);
}

/* ----- Cabecera (breadcrumb + título + selector pills) ----- */
.mv-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.mv-head-left { display: flex; flex-direction: column; gap: 4px; }
.mv-breadcrumb {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-3);
    text-transform: uppercase;
}
.mv-route-title {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    font-family: var(--font-mono);
}
.mv-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mv-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    color: var(--text-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.mv-theme-btn:hover { background: var(--bg-3); color: var(--text); }
.mv-theme-btn i { font-size: 14px; }

.mv-selector {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    box-shadow: var(--shadow-sm);
}
.mv-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}
.mv-pill:hover { color: var(--text); }
.mv-pill.active {
    background: var(--bg-2);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(16,24,40,.10);
}
.mv-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mv-pill-dot.sev-vfr   { background: var(--sev-vfr); }
.mv-pill-dot.sev-mvfr  { background: var(--sev-mvfr); }
.mv-pill-dot.sev-ifr   { background: var(--sev-ifr); }
.mv-pill-dot.sev-lifr  { background: var(--sev-lifr); }

/* ----- Ficha grande del aeropuerto seleccionado ----- */
.mv-hero {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    box-shadow: var(--shadow-sm);
}
.mv-hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.mv-hero-compass {
    width: 200px; height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mv-hero-compass .wind-compass { width: 100%; height: auto; max-width: 200px; }
.mv-compass-empty {
    color: var(--text-3);
    font-size: 1.5rem;
}
.mv-headcross {
    display: flex;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--text-2);
    font-family: var(--font-mono);
}
.mv-headcross strong { color: var(--text); font-weight: 600; }

.mv-hero-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.mv-hero-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.mv-hero-title { display: flex; align-items: baseline; gap: 12px; }
.mv-hero-icao {
    font-family: var(--font-mono);
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1;
}
.mv-hero-role {
    color: var(--text-3);
    font-size: 0.9rem;
    font-weight: 500;
}
.mv-hero-sevbadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-3);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-2);
}
.mv-hero-sevbadge.sev-vfr  { background: var(--sev-vfr-soft); color: var(--sev-vfr); }
.mv-hero-sevbadge.sev-mvfr { background: var(--sev-mvfr-soft); color: var(--sev-mvfr); }
.mv-hero-sevbadge.sev-ifr  { background: var(--sev-ifr-soft); color: var(--sev-ifr); }
.mv-hero-sevbadge.sev-lifr { background: var(--sev-lifr-soft); color: var(--sev-lifr); }
.mv-sev-text { font-weight: 700; }
.mv-sev-desc { color: currentColor; opacity: .85; font-weight: 500; }

.mv-hero-subtitle {
    font-size: 0.88rem;
    color: var(--text-2);
}
.mv-hero-oneliner {
    font-size: 0.95rem;
    color: var(--text);
    margin-top: 2px;
}

/* Stats apiladas (columna izquierda) — más compactas */
.mv-stats-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mv-stat {
    background: var(--bg-recess);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mv-stat-head {
    font-size: 0.66rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    display: flex; align-items: center; gap: 6px;
}
.mv-stat-head i { font-size: 13px; }
.mv-stat-val {
    font-family: var(--font-mono);
    font-size: 1.7rem;    /* v2: número protagonista (antes 0.98rem) */
    line-height: 1.1;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-top: 4px;
}
.mv-stat-val-kt {
    font-weight: 500;
    color: var(--text-2);
    font-size: 0.85rem;
}
.mv-stat-sub {
    font-size: 0.72rem;
    color: var(--text-3);
    font-family: var(--font-mono);
}

/* ----- Header v2 (logo + breadcrumb + selector pills + sub-row callsign) ----- */
.mv-head-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.mv-head-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mv-head-brand-icon {
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.mv-head-brand-text { display: flex; flex-direction: column; gap: 1px; }
.mv-head-brand-text .mv-breadcrumb { font-size: 0.68rem; letter-spacing: 0.14em; }
.mv-head-brand-text .mv-route-title { font-size: 1.4rem; font-family: var(--font-ui); letter-spacing: -0.01em; }

.mv-subrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: var(--bg-3);
    border-radius: var(--r-sm);
    font-size: 0.78rem;
    color: var(--text-2);
}
.mv-callsign {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text);
    padding: 3px 8px;
    background: var(--bg-card);
    border-radius: var(--r-sm);
    border: 1px solid var(--line-soft);
}
.mv-sep { color: var(--text-3); }
.mv-route-mini {
    font-family: var(--font-mono);
    color: var(--text-2);
    letter-spacing: 0.04em;
}
.mv-eobt {
    font-family: var(--font-mono);
    color: var(--text-2);
    letter-spacing: 0.04em;
}

/* ----- Layout v16: 50% izquierda / 50% derecha -----
   La mitad izquierda se subdivide internamente:
     - arriba: 2 cols (compass+avisos | 6 stats)
     - abajo:  METAR + TAF a lo ancho (50% del total)
   La mitad derecha es solo el cloud profile, altura sincronizada. */
.mv-layout-v16 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
.mv-left-half {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.mv-right-half {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
/* v17 (optimización de pantalla / iPad): el cloud profile es COMPACTO
   (altura natural, SVG con tope) y METAR/TAF ocupa el resto de la
   columna derecha. Fenómenos significativos pasa a la izquierda. */
.mv-right-half .mv-card.mv-profile { flex: 0 0 auto; }
.mv-right-half .mv-card.mv-obs { flex: 1; min-height: 0; }
.mv-left-half .mv-card.mv-phenomena { flex: 1; }
.mv-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}
.mv-col-left, .mv-col-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.mv-col-left {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 14px;
    box-shadow: var(--shadow-sm);
}
.mv-col-stats {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 14px;
    box-shadow: var(--shadow-sm);
}

/* Cabecera dentro de col-left: ICAO + nombre + sev badge */
.mv-airport-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.mv-airport-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mv-airport-icao {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
}
.mv-airport-name {
    font-size: 0.82rem;
    color: var(--text-2);
}

/* Compass — más grande ahora que la columna izquierda gana espacio vertical
   al sacar los avisos de fenómenos a la mitad derecha. */
.mv-compass-big {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
    flex: 1;
    align-items: center;
}
.mv-compass-big .wind-compass {
    width: 100%;
    max-width: 240px;
    height: auto;
}

/* 3 micro-cards Cara / Cruzado / Pista */
.mv-microcards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.mv-microcard {
    background: var(--bg-recess);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    padding: 8px 6px;
    text-align: center;
}
.mv-microcard-lbl {
    font-size: 0.6rem;
    color: var(--text-3);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 2px;
}
.mv-microcard-val {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}
.mv-microcard-val.crit { color: var(--sev-lifr); }

/* Avisos de fenómenos en ruta (bajo las micro-cards) */
.mv-route-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.mv-route-alert {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--sev-lifr-soft);
    border: 1px solid color-mix(in srgb, var(--sev-lifr) 35%, transparent);
    border-radius: var(--r-md);
}
.mv-route-alert i {
    color: var(--sev-lifr);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.mv-route-alert-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.mv-route-alert-desc {
    font-size: 0.76rem;
    color: var(--text-2);
    line-height: 1.45;
}
.mv-route-alert-empty {
    padding: 10px 12px;
    background: var(--sev-vfr-soft);
    color: var(--sev-vfr);
    border-radius: var(--r-md);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

/* Grid 2x3 de stats en columna de stats — cards compactas (al 25% del ancho) */
.mv-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    flex: 1;
}
.mv-col-stats .mv-stat {
    padding: 9px 10px;
}
.mv-col-stats .mv-stat-head {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}
/* v2: número protagonista (antes 0.88rem — quedaba pobre, ver preview) */
.mv-col-stats .mv-stat-val {
    font-size: 1.7rem;
    line-height: 1.1;
    margin-top: 4px;
    font-weight: 700;
}
.mv-col-stats .mv-stat-val small { font-size: 0.95rem; color: var(--text-2); font-weight: 600; }
.mv-col-stats .mv-stat-val-kt { font-size: 0.85rem; }
.mv-col-stats .mv-stat-sub {
    font-size: 0.73rem;
    line-height: 1.4;
}
.mv-col-stats .mv-stat-extra { font-size: 0.7rem; }
.mv-card {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mv-card-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-3);
    text-transform: uppercase;
}

.mv-profile-svg svg { width: 100%; height: auto; max-height: 220px; }
.mv-profile-foot {
    font-size: 0.82rem;
    color: var(--text-2);
}

.mv-raw-box {
    background: var(--bg-recess);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mv-raw-head, .mv-raw-head-row {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.mv-raw-head-row {
    display: flex; justify-content: space-between; align-items: center;
}
.mv-raw-flag {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-3);
}
.mv-raw-flag.ok { background: var(--sev-vfr-soft); color: var(--sev-vfr); }
.mv-raw-flag.warn { background: var(--sev-ifr-soft); color: var(--sev-ifr); }
.mv-raw-text {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}
.mv-raw-foot {
    font-size: 0.78rem;
    color: var(--text-2);
    font-style: italic;
    border-top: 1px dashed var(--line-soft);
    padding-top: 6px;
}

/* ----- Aeródromos de la ruta: grid horizontal con cards estrechas ----- */
.mv-ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.mv-adcard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    background: var(--bg-card);
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    font-family: var(--font-ui);
}
.mv-adcard:hover { background: var(--bg-3); transform: translateY(-1px); }
.mv-adcard.active {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.mv-adcard-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mv-adcard-badge {
    padding: 3px 7px;
    border-radius: var(--r-sm);
    font-size: 0.66rem;
    font-weight: 700;
    background: var(--bg-3);
    color: var(--text-2);
    letter-spacing: 0.04em;
}
.mv-adcard-badge.sev-vfr  { background: var(--sev-vfr-soft); color: var(--sev-vfr); }
.mv-adcard-badge.sev-mvfr { background: var(--sev-mvfr-soft); color: var(--sev-mvfr); }
.mv-adcard-badge.sev-ifr  { background: var(--sev-ifr-soft); color: var(--sev-ifr); }
.mv-adcard-badge.sev-lifr { background: var(--sev-lifr-soft); color: var(--sev-lifr); }
.mv-adcard-icao {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
}
.mv-adcard-role {
    font-size: 0.58rem;
    color: var(--text-3);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-left: auto;
}
.mv-adcard-name {
    font-size: 0.76rem;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mv-adcard-data {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-3);
    border-top: 1px dashed var(--line-soft);
    padding-top: 4px;
    margin-top: 2px;
}
.mv-adcard-wind { color: var(--text); font-weight: 600; }
.mv-adcard-cloud { color: var(--text-3); }

/* ----- Avisos en ruta: grid horizontal ----- */
.mv-avisos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}

/* v17: el perfil de nubes ya NO se estira a toda la columna — usa el
   tope de altura base (220px) y deja el resto a METAR/TAF. */
.mv-right-half .mv-profile-svg {
    display: block;
    overflow: hidden;
}
.mv-right-half .mv-profile-svg svg {
    width: 100%;
    height: auto;
    max-height: 220px;
    display: block;
}

/* Aerodromes row (sin contenedor card, cards directas) */
.mv-ads-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.mv-aviso {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--sev-mvfr);
    background: var(--bg-recess);
    border-radius: var(--r-md);
}
.mv-aviso.sev-ifr  { border-left-color: var(--sev-ifr);  background: var(--sev-ifr-soft); }
.mv-aviso.sev-lifr { border-left-color: var(--sev-lifr); background: var(--sev-lifr-soft); }
.mv-aviso i { color: var(--text-2); font-size: 18px; margin-top: 1px; }
.mv-aviso-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mv-aviso-id {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}
.mv-aviso-text {
    font-size: 0.78rem;
    color: var(--text-2);
    line-height: 1.45;
}
.mv-aviso-empty {
    padding: 12px;
    font-size: 0.85rem;
    color: var(--sev-vfr);
    background: var(--sev-vfr-soft);
    border-radius: var(--r-md);
    font-weight: 600;
}

@media (max-width: 1100px) {
    .mv-layout-v16 { grid-template-columns: 1fr; }
}

/* ================================================================
   MÓVIL · optimización táctil, notch y teclados
   Bloque aislado para revisión/revert fácil. Solo afecta a táctil/móvil;
   la vista desktop con ratón no cambia.
   ================================================================ */

/* 1 · ANTI-ZOOM iOS — un control de formulario con <16px hace que Safari
   haga zoom al enfocarlo. Forzamos 16px en móvil (no altera el layout). */
@media (max-width: 720px) {
    .field input, .field select, textarea,
    input[type="text"], input[type="search"], input[type="number"],
    input[type="email"], input[type="tel"], input[type="password"] {
        font-size: 16px;
    }
}

/* 2 · SAFE-AREA — notch superior y barra de gestos inferior (iOS) */
@supports (padding: max(0px)) {
    .topbar       { padding-top: max(env(safe-area-inset-top), 0px); }
    .page-foot    { padding-bottom: max(env(safe-area-inset-bottom), 14px); }
    .ai-fab       { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
    #watch-status { margin-bottom: env(safe-area-inset-bottom, 0px); }
    .proc-modal   { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* 3 · GESTOS Y SCROLL */
html, body {
    overscroll-behavior-y: none;        /* sin pull-to-refresh accidental */
    -webkit-text-size-adjust: 100%;     /* no reescalar texto al rotar */
}
.map-side, .tab-panel, .proc-modal, .lbv-list {
    -webkit-overflow-scrolling: touch;  /* inercia de scroll iOS */
}

/* 4 · TÁCTIL — solo dispositivos sin hover (móvil/tablet) */
@media (hover: none) {
    a, button, .btn, .tab, .brief-tab, .map-subtab,
    .topbar-btn, .profile-menu-item,
    [role="tab"], [role="button"], [role="menuitem"] {
        -webkit-tap-highlight-color: transparent;
    }
    .topbar-btn, .btn, .profile-menu-item,
    .map-subtab, [role="tab"] {
        min-height: 44px;
    }
    /* Botones pequeños (cierres, iconos): area tactil minima 44x44 (WCAG 2.5.5) */
    .pm-close, .anc-close, .toast-close, .proc-modal-close,
    .watch-status-toggle, .watch-status-close, .ai-icon-btn,
    .card-toggle, .icon-btn, .theme-toggle, .ai-attach, .hdr-logbook-btn,
    .lbv-val-edit, .lbv-val-del, .lbv-pe-edit, .lbv-pe-del,
    .lbv2-edit, .lbv2-del, .lbv2-dup, .lbv3-qchip {
        min-width: 44px;
        min-height: 44px;
    }
    /* Controles de zoom de Leaflet más grandes para dedo */
    .leaflet-touch .leaflet-bar a,
    .leaflet-control-zoom a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 22px;
    }
    /* Botón "NOTAMS de área" y chips del mapa con área táctil cómoda */
    .map-notam-toggle button,
    .map-subtab { padding-top: 9px; padding-bottom: 9px; }
}

/* ================================================================
   ZOOM del mapa (Leaflet) integrado en el tema. Por defecto Leaflet
   pinta botones blancos que desentonan con el cockpit oscuro.
   ================================================================ */
.leaflet-control-zoom.leaflet-bar {
    border: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden;
    border-radius: 11px !important;
}
.leaflet-control-zoom a {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 32px !important;
    font-size: 20px !important;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.leaflet-control-zoom a.leaflet-control-zoom-in { border-radius: 11px 11px 0 0 !important; }
.leaflet-control-zoom a.leaflet-control-zoom-out { border-radius: 0 0 11px 11px !important; border-top: none !important; }
.leaflet-control-zoom a:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.leaflet-control-zoom a.leaflet-disabled { opacity: .38 !important; }

/* REALCE de la imagen satélite (Clarity): +saturación y +contraste para el
   aspecto tipo Google Earth. Solo afecta a las TESELAS satélite (la capa lleva
   la clase acm-sat-realce); las pistas dibujadas, etiquetas y marcadores viven
   en otras panes y NO se filtran. No aplica al estilo "mfd" ni a mapas de calle. */
.acm-sat-realce { filter: saturate(1.32) contrast(1.14) brightness(1.04); }

/* ================================================================
   RUTAS FAVORITAS — estrella en el hero + popup opuesto a "Solicitar
   briefing", sincronizadas en la cuenta (Supabase).
   ================================================================ */
/* Grupo de favoritas en el PIE, a la derecha: [estrella vacía] [Planes favoritos] */
.favs-group {
    margin-left: auto;
    display: flex; align-items: center; gap: 8px;
    position: relative;
}
/* Estrella de favoritos: chip circular integrado en el diseño, con estado
   dorado brillante y animación "pop" al guardar/quitar. */
.rh-fav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    cursor: pointer;
    color: #cfe0e8;
    transition: color .15s ease, transform .12s ease, background .15s ease,
                border-color .15s ease, box-shadow .15s ease;
}
.rh-fav:hover {
    color: #f5c518;
    border-color: rgba(245, 197, 24, 0.55);
    background: rgba(245, 197, 24, 0.08);
    transform: translateY(-1px);
}
.rh-fav.is-fav {
    color: #f5c518;
    border-color: rgba(245, 197, 24, 0.6);
    background: rgba(245, 197, 24, 0.12);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.25);
}
.rh-fav:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.rh-fav.fav-pop { animation: favPop .38s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes favPop { 0% { transform: scale(.7); } 55% { transform: scale(1.28); } 100% { transform: scale(1); } }
body.theme-day .rh-fav { color: #5a6b73; background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.15); }
body.theme-day .rh-fav:hover, body.theme-day .rh-fav.is-fav { color: #b8890a; border-color: rgba(184,137,10,.5); background: rgba(184,137,10,.08); }

/* Botón "Planes favoritos" (estrella amarilla) a la derecha de la estrella vacía */
.favs-btn {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 5px 12px 5px 10px;
    font-size: .78rem; color: var(--text);
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.favs-btn:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255,255,255,.26); }
.favs-btn .ti { color: #f5c518; font-size: 15px; }
body.theme-day .favs-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.14); }
/* Desplegable de planes favoritos: tarjeta elevada con entrada animada,
   filas de dos líneas (nombre + ruta) y borrar visible solo al pasar. */
.favs-pop {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    min-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    padding: 8px;
    z-index: 60;
    display: block;
    opacity: 0;
    transform: translateY(6px) scale(.98);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.favs-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.favs-pop-title {
    font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted, #8aa);
    padding: 6px 10px 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
}
.favs-item {
    display: block; position: relative;
    width: 100%;
    padding: 8px 30px 8px 10px;
    border-radius: 10px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text); text-align: left;
    font-size: .86rem;
    transition: background .12s ease;
}
.favs-item + .favs-item { margin-top: 2px; }
.favs-item:hover { background: var(--accent-soft); }
.favs-item .fi-name { display: block; font-weight: 600; font-size: .82rem; margin-bottom: 1px; }
.favs-item .fi-route { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .03em; }
.favs-item .fi-fl { color: var(--accent); font-size: .76rem; margin-left: 8px; }
.favs-item .fi-alt { color: var(--muted, #8aa); font-size: .72rem; margin-left: 6px; }
.favs-item-del {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; cursor: pointer;
    color: var(--muted, #8aa); font-size: 15px; padding: 3px 7px; border-radius: 7px;
    opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.favs-item:hover .favs-item-del { opacity: 1; }
.favs-item-del:hover { color: #ff6b6b; background: rgba(255,107,107,.12); }
.favs-empty { padding: 12px 10px; color: var(--muted, #8aa); font-size: .82rem; line-height: 1.5; }
.favs-item .fi-name { font-weight: 700; color: var(--text, #e6edf5); margin-right: 6px; }

/* Modal para nombrar la ruta favorita */
.favname-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; z-index: 10000;
    animation: favnameFade .15s ease;
}
@keyframes favnameFade { from { opacity: 0; } to { opacity: 1; } }
.favname-modal {
    background: var(--bg-card, #0f1a2d); border: 1px solid var(--line, rgba(255,255,255,.14));
    border-radius: 16px; padding: 18px 18px 16px; width: min(360px, 92vw);
    box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: favnameIn .18s ease;
}
@keyframes favnameIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.favname-title { font-weight: 700; font-size: 1rem; color: var(--text, #e6edf5); margin-bottom: 6px; }
.favname-route { font-family: ui-monospace, monospace; font-size: .85rem; color: var(--accent, #22d3c5); margin-bottom: 12px; }
.favname-input {
    width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--line, rgba(255,255,255,.16)); background: var(--bg-3, #16233a);
    color: var(--text, #e6edf5); font-size: .95rem;
}
.favname-input:focus { outline: none; border-color: var(--accent, #22d3c5); }
.favname-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.favname-btn { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line, rgba(255,255,255,.16)); cursor: pointer; font-size: .88rem; }
.favname-cancel { background: none; color: var(--text-2, #8ea4be); }
.favname-save { background: var(--accent, #22d3c5); border-color: var(--accent, #22d3c5); color: #04222b; font-weight: 700; }

/* Pestaña M&B en ROJO cuando el peso y centrado está FUERA DE LÍMITES */
#brief-tabs .brief-tab.mb-oo-limits { color: #ff6b6b !important; animation: mbTabPulse 1.3s ease-in-out infinite; }
#brief-tabs .brief-tab.mb-oo-limits svg { stroke: #ff6b6b !important; }
#brief-tabs .brief-tab.mb-oo-limits.active { background: rgba(224,83,61,.18) !important; border-color: #e0533d !important; }
#brief-tabs .brief-tab.mb-oo-limits .mb-oo-dot { color: #ff6b6b; font-weight: 800; margin-right: 3px; }
@keyframes mbTabPulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* ================================================================
   SUGERENCIA DE ROTACIÓN — la app luce mejor en horizontal.
   Solo aparece en teléfonos en vertical; al girar a horizontal el
   propio media query la oculta. Difumina la app de fondo.
   ================================================================ */
.rotate-hint { display: none; }
@media (max-width: 560px) and (orientation: portrait) {
    /* Solo cuando el BRIEF ya está cargado (#card-briefing sin .hidden).
       Durante la entrada de datos del FPL el vertical es lo natural, así
       que no molestamos con el aviso hasta tener el briefing delante. */
    body:has(#card-briefing:not(.hidden)) .rotate-hint:not(.dismissed) {
        display: flex;
        position: fixed;
        top:0;right:0;bottom:0;left:0;
        z-index: 4000;
        align-items: center;
        justify-content: center;
        padding: 28px;
        background: rgba(8, 15, 30, 0.55);
        -webkit-backdrop-filter: blur(11px);
        backdrop-filter: blur(11px);
    }
}
.rotate-hint-card {
    text-align: center;
    max-width: 320px;
    color: var(--text);
}
.rotate-hint-phone {
    width: 64px;
    height: 100px;
    margin: 0 auto 22px;
    border: 3px solid var(--accent);
    border-radius: 12px;
    position: relative;
    transform-origin: center;
    animation: rotate-hint-spin 2.4s ease-in-out infinite;
}
.rotate-hint-phone::before {
    /* "botón" del teléfono */
    content: "";
    position: absolute;
    bottom: 7px; left: 50%;
    width: 16px; height: 3px;
    transform: translateX(-50%);
    background: var(--accent);
    border-radius: 2px;
    opacity: .8;
}
@keyframes rotate-hint-spin {
    0%, 18%   { transform: rotate(0deg); }
    50%, 68%  { transform: rotate(-90deg); }
    100%      { transform: rotate(-90deg); }
}
.rotate-hint-title {
    font-size: 1.18rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.rotate-hint-sub {
    font-size: .92rem;
    color: var(--text-2);
    line-height: 1.45;
}
.rotate-hint-dismiss {
    margin-top: 22px;
    padding: 11px 20px;
    min-height: 44px;
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font: inherit;
    cursor: pointer;
}
.rotate-hint-dismiss:active { background: var(--bg-3); }

/* ================================================================
   ENTRADA DE DATOS (plan de vuelo) optimizada para VERTICAL.
   Los pilotos meten el FPL con el móvil en vertical; aquí hacemos
   que las 3 pestañas de carga y el formulario quepan cómodos.
   ================================================================ */
@media (max-width: 640px) {
    /* Las 3 pestañas de carga (Manual / Pegar FPL / Subir) a todo el ancho,
       repartidas en partes iguales y sin desbordarse. */
    .card-input .tabs {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        gap: 3px;
    }
    .card-input .tabs .tab {
        padding: 8px 6px;
        font-size: .76rem;
        line-height: 1.15;
        text-align: center;
        white-space: normal;        /* deja que el texto largo baje a 2 líneas */
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
    /* Menos padding en los paneles → más pantalla para los campos */
    .tab-panel { padding: 14px; }
    /* Formulario a 1 columna con separación cómoda para el dedo */
    .grid-form { grid-template-columns: 1fr; gap: 14px; }
    /* Cabecera del plan: que los botones de logbook bajen a su línea y
       ocupen el ancho, sin apretar el título ni las pestañas. */
    .card-head-logbook { width: 100%; order: 5; display: flex; gap: 8px; }
    .card-head-logbook .hdr-logbook-btn {
        flex: 1;
        min-height: 44px;
        justify-content: center;
    }
    /* Route-hero compacto: flecha más estrecha para que respiren los ICAO */
    .route-hero { padding: 10px; gap: 8px; }
    .rh-arrow { min-width: 54px; }
    .rh-arrow svg { width: 52px !important; max-width: 52px; }
    /* Textarea de "Pegar FPL" más alto y cómodo en vertical */
    #f-paste { min-height: 220px; }
}

/* ================================================================
   TOPBAR MÓVIL — la barra superior no tenía reglas responsive y se
   desbordaba en iPhone (subtítulo + reloj + estado + idioma + perfil
   + tema no caben en ~390px), generando scroll horizontal que
   descentraba TODA la app. Aquí la compactamos a una sola fila limpia.
   ================================================================ */
@media (max-width: 640px) {
    /* Cinturón de seguridad: nada puede provocar scroll horizontal.
       Usamos clip (no hidden) para no romper el position:sticky del topbar. */
    html, body { overflow-x: clip; max-width: 100%; }

    .topbar { padding: 9px 12px; gap: 8px; }
    .brand { gap: 8px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
    /* El subtítulo "Briefing inteligente · datos en tiempo real" no cabe */
    .brand-sub { display: none; }
    .brand-title {
        font-size: .98rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .topbar-right { gap: 6px; flex: 0 0 auto; }
    /* Reloj Zulú compacto (dato clave para el piloto, se mantiene) */
    .utc-clock { padding: 4px 7px; font-size: .78rem; }
    /* Estado de conexión: dejamos solo el punto de color (el texto "Online"
       se entiende por el punto y libera el ancho que faltaba) */
    .offline-indicator { padding: 6px; }
    .offline-indicator .oi-text,
    .offline-indicator .oi-meta { display: none; }
    .lang-toggle { padding: 5px 8px; }
}
/* ================================================================
   LOGBOOK v2 — dashboard visual (donut, anillos, mapa, países)
   Añadido por integración Logbook v2. Reutiliza tokens existentes.
   ================================================================ */
.lbv-hero-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:4px}
.lbv-hero-card{background:linear-gradient(135deg,rgba(34,211,197,.14),rgba(34,211,197,.02));
  border:1px solid rgba(34,211,197,.22);border-radius:var(--r-lg);padding:20px 22px;position:relative;overflow:hidden}
.lbv-hero-lbl{font:600 12px var(--font-num);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lbv-hero-num{font:800 2.8rem/1 var(--font-ui);letter-spacing:-.03em;margin-top:6px}
.lbv-hero-split{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.lbv-chip{font:600 11.5px var(--font-num);padding:4px 10px;border-radius:var(--r-full);
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text-2)}
.lbv-chip b{color:var(--text)}
.lbv-donut-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;display:flex;align-items:center;gap:18px}
.lbv-donut-svg{position:relative;flex:none}
.lbv-donut-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lbv-donut-pct{font:700 1rem var(--font-num)}
.lbv-donut-cl{font-size:.6rem;color:var(--text-3);letter-spacing:.08em}
.lbv-legend{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.lbv-leg{display:flex;align-items:center;gap:9px;font-size:.84rem}
.lbv-dot{width:10px;height:10px;border-radius:3px;flex:none}
.lbv-lv{margin-left:auto;font-family:var(--font-num);color:var(--text-2);font-size:.8rem;white-space:nowrap}
.lbv-leg b{font-weight:600}
.lbv-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.lbv-kpi{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;transition:.2s}
.lbv-kpi:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.lbv-kpi-num{font:700 1.4rem/1 var(--font-num);letter-spacing:-.02em}
.lbv-kpi-lbl{margin-top:5px;font-size:.72rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.lbv-kpi i{float:right;font-size:18px;color:var(--text-3);opacity:.6}
/* currency rings */
.lbv-cur-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lbv-ring{position:relative;width:104px;height:104px;margin:0 auto 10px}
.lbv-ring svg{transform:rotate(-90deg)}
.lbv-ring-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lbv-ring-val{font:700 1.4rem/1 var(--font-num)}
.lbv-ring-tgt{font-size:.66rem;color:var(--text-3);font-family:var(--font-num);margin-top:2px}
.lbv-badge{position:absolute;top:12px;right:12px;font-size:16px}
.lbv-badge.ok{color:var(--sev-vfr)}.lbv-badge.warn{color:var(--sev-lifr)}
.lbv-ccard.warn{border-color:rgba(244,63,94,.4);background:linear-gradient(180deg,rgba(244,63,94,.06),var(--bg-card))}
.lbv-ccard.ok{border-color:rgba(52,211,153,.35)}
/* mapa */
.lbv-map-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.lbv-mstat{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-align:center}
.lbv-mstat-num{font:800 1.7rem/1 var(--font-ui);color:var(--accent)}
.lbv-mstat-lbl{margin-top:5px;font-size:.72rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
#lbv-map{height:clamp(360px,56vh,680px);border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden}
#lbv-map .leaflet-container{background:var(--bg)}
.lbv-country-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.lbv-cchip{font:600 12px var(--font-ui);padding:5px 11px;border-radius:var(--r-full);
  background:var(--bg-card);border:1px solid var(--line);color:var(--text);display:inline-flex;gap:6px;align-items:center}
/* flights v2: edición + tags clase/rol + total.
   Columnas: día · ruta · tiempos · foto · acciones.
   (Este !important es el que manda de verdad sobre la fila: si se toca la
   rejilla más arriba y no aquí, las acciones se van a una segunda línea.) */
.lbv2-entry{grid-template-columns:40px 1fr auto 48px 34px !important}
.lbv2-mo{display:block;font-size:.6rem;color:var(--text-3);letter-spacing:.1em;margin-top:2px}
.lbv2-act{display:flex;flex-direction:column;gap:4px}
.lbv2-edit,.lbv2-del,.lbv2-dup{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--text-3);cursor:pointer;font-size:14px;display:grid;place-items:center;line-height:1}
.lbv2-edit:hover{color:var(--accent);border-color:var(--accent)}
.lbv2-dup:hover{color:var(--accent-2);border-color:var(--accent-2)}
.lbv2-del:hover{color:var(--sev-lifr);border-color:var(--sev-lifr)}

/* ==== CALMA VISUAL de la lista de vuelos ==== */
/* Acciones por fila OCULTAS por defecto: aparecen al pasar el raton
   (escritorio), al enfocar con teclado o al expandir la fila (tablet: tocar). */
.lbv2-act { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.lbv2-entry:hover .lbv2-act,
.lbv2-entry.open .lbv2-act,
.lbv2-entry:focus-within .lbv2-act { opacity: 1; pointer-events: auto; }
/* Callsign como texto discreto, no como pildora */
.lbv2-cs-txt { font-family: var(--font-num, monospace); font-size: 11px; color: var(--text-3); letter-spacing: .04em; margin-right: 2px; }
/* Mini-iconos (IFR, luna, firma): grises y silenciosos; se encienden al abrir */
.lbv2-minis { display: inline-flex; align-items: center; gap: 7px; margin-left: 2px; }
.lbv2-mini { font-style: normal; color: var(--text-3); font-size: 13px; line-height: 1; }
.lbv2-mini-txt { font: 700 9.5px var(--font-num, monospace); letter-spacing: .06em; border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; }
.lbv2-entry.open .lbv2-mini, .lbv2-entry:hover .lbv2-mini { color: var(--text-2); }
/* Vuelo local (dep = dest): etiqueta propia en lugar de flecha a "?" */
.lbv3-localtag { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font: 600 12px var(--font-ui, inherit); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; padding: 3px 10px; }
/* Destino ausente: aviso ambar, no un "?" misterioso */
.rt-nodest { color: var(--sev-ifr); font-size: 14px; }
/* Foto de aeronave: nada de cubo fantasma — invisible hasta que carga */
.lbv-acthumb { opacity: 0; transition: opacity .25s ease; }
.lbv-acthumb.acph-in { opacity: 1; }
.lbv-acthumb.acph-none { visibility: hidden; }
.lbv2-tag-cls{color:var(--accent-2);border-color:rgba(96,165,250,.3);background:rgba(96,165,250,.1)}
.lbv2-tag-picus{color:var(--sev-vfr);border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.1)}
.lbv2-tag-instructor{color:var(--sev-info);border-color:rgba(167,139,250,.3);background:rgba(167,139,250,.1)}
.lbv2-foot{display:flex;justify-content:flex-end;gap:18px;padding:14px 4px 2px;border-top:1px dashed var(--line);
  margin-top:6px;font-family:var(--font-num);font-size:.9rem;color:var(--text-2)}
.lbv2-foot b{color:var(--accent)}
@media(max-width:760px){
  .lbv-hero-row,.lbv-cur-grid,.lbv-map-stats{grid-template-columns:1fr 1fr}
  .lbv-kpi-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===== Logbook v2 — ajustes post-deploy (ancho, números, mapa, grids) ===== */
.logbook-viewer-dialog { max-width: 1040px; width: 94%; }
.lbv-hero-num, .lbv-kpi-num, .lbv-ring-val, .lbv-lv, .lbv-donut-pct,
.lbv-mstat-num, .lbv-type-val, .lbv2-block, .lbv2-foot, .lbv-chip,
.lbv-rstat-num, .lbv2-month-stats, .lbv2-time, .lbv2-day {
  font-family: var(--font-ui) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.lbv-cur-grid { grid-template-columns: repeat(4, 1fr); }
.lbv-kpi-grid { grid-template-columns: repeat(4, 1fr); }
.lbv-ring { width: 112px; height: 112px; }
.lbv-ring-val { font-size: 1.05rem; line-height: 1.05; }
.lbv-ring-tgt { font-size: 0.62rem; }
.lbv-ccard { padding: 16px 12px; }
.lbv-donut-card { gap: 14px; }
.lbv-legend { min-width: 0; }
.lbv-lv { font-size: 0.78rem; }
#lbv-map { background: var(--bg); }
@media (max-width: 880px){
  .lbv-cur-grid, .lbv-kpi-grid, .lbv-map-stats { grid-template-columns: repeat(2,1fr); }
  .lbv-hero-row { grid-template-columns: 1fr; }
}

/* ===== Logbook v2 rev3 — compacto, sin scroll anidado, asignador de clase ===== */
.logbook-viewer-dialog{ max-height: 92vh; }
.lbv-chart-wrap{ overflow: visible; min-height: 0; padding: 12px 10px 8px; }
.lbv-classmap{ margin: 8px 0 4px; border:1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-recess); }
.lbv-classmap > summary{ cursor:pointer; padding:9px 12px; font:600 13px var(--font-ui); color: var(--accent); list-style:none; display:flex; align-items:center; gap:7px; }
.lbv-classmap > summary::-webkit-details-marker{ display:none; }
.lbv-classmap-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; padding:0 12px 12px; }
.lbv-cmrow{ display:flex; align-items:center; gap:8px; }
.lbv-cmtype{ font:700 12px var(--font-ui); min-width:46px; color: var(--text); letter-spacing:-.01em; }
.lbv-cmsel{ flex:1; font:500 12.5px var(--font-ui); background: var(--bg-2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:5px 8px; }
.lbv-cmsel:focus{ border-color: var(--accent); outline:none; }

/* ===== Logbook v2 rev4 — fix solape gráfico horas/mes ===== */
.lbv-chart-wrap{ overflow: hidden; height: 210px; min-height: 0; padding: 12px 10px; }
.lbv-chart{ display: block; width: 100%; height: 100%; }

/* ===== Logbook v2 rev5 — gráfico robusto (SVG absoluto) + ventana más alta + Recencia compacta ===== */
.logbook-viewer-dialog{ max-height: 96vh; }
/* Gráfico horas/mes: contenedor de altura fija y SVG posicionado absoluto que lo rellena
   (evita el colapso de height:auto sobre <svg viewBox> en Chrome). */
.lbv-chart-wrap{ position: relative; height: 200px; min-height: 0; overflow: hidden; padding: 0; }
.lbv-chart{ position: absolute; top: 8px; left: 10px; right: 10px; bottom: 6px; width: auto; height: auto; }
/* Recencia compacta para que la experiencia previa entre sin scroll */
.lbv-ring{ width: 94px; height: 94px; }
.lbv-ccard{ padding: 13px 10px; }
.lbv-ccard-sub{ font-size: 0.68rem; line-height: 1.35; }
.lbv-cur-grid{ gap: 10px; }
.lbv-pe-table th, .lbv-pe-table td{ padding: 6px 9px; }
.lbv-pe-table-wrap{ overflow: visible; }

/* ===== Logbook v2 — botón añadir vuelo ===== */
.lbv-addbar{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.lbv-addbtn{ font:700 13px var(--font-ui); color:#1a0d00; background:linear-gradient(180deg,#5EEAD4,var(--accent)); border:none; border-radius:999px; padding:8px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:transform .15s; }
.lbv-addbtn:hover{ transform:translateY(-1px); }

/* ===== Logbook v2 rev6 — gráfico responsive fiable (svg con width/height + viewBox) ===== */
.lbv-chart-wrap{ position: static; height: auto; min-height: 0; overflow: hidden; padding: 12px 10px; }
.lbv-chart{ position: static; display: block; width: 100%; max-width: 100%; height: auto; }

/* ===== Logbook v2 rev7 — gráfico horas/mes en columnas HTML (fiable) ===== */
.lbv-chart-wrap{ position: static; height: auto; min-height: 0; overflow: hidden; padding: 12px 12px 6px; }
.lbv-mchart{ display: flex; align-items: flex-end; gap: 5px; }
.lbv-mcol{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.lbv-mval{ font: 600 10px var(--font-ui); color: var(--text-2); margin-bottom: 4px; height: 13px; line-height: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lbv-mbar{ width: 72%; max-width: 38px; background: linear-gradient(180deg, #5EEAD4, var(--accent)); border-radius: 5px 5px 0 0; }
.lbv-mbar.empty{ background: rgba(255,255,255,.07); height: 2px !important; }
.lbv-mlabel{ font: 600 11px var(--font-ui); color: var(--text-3); margin-top: 6px; text-align: center; line-height: 1.1; }
.lbv-mlabel span{ display: block; font-size: 9px; opacity: .55; margin-top: 1px; }

/* ===== Recencia rev6 — anillos mas amplios, sin badge, target limpio ===== */
.lbv-ring{ width: 118px; height: 118px; }
.lbv-ring-center{ padding: 0 6px; box-sizing: border-box; }
.lbv-ring-val{ font-size: 1.02rem; line-height: 1.05; white-space: nowrap; }
.lbv-ring-tgt{ font-size: 0.62rem; white-space: nowrap; }
@media (max-width: 520px){
  .lbv-ring{ width: 104px; height: 104px; }
  .lbv-ring-val{ font-size: 0.9rem; }
}

/* ===== SIGMET/PIREP: texto original legible y desplegable ===== */
.sigmet-raw, .pirep-raw { margin-top: 6px; }
.sigmet-raw > summary, .pirep-raw > summary {
  cursor: pointer; font-size: .82rem; color: var(--accent);
  font-family: var(--font-ui); user-select: none; padding: 2px 0;
}
.sigmet-raw pre, .pirep-raw pre {
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
  font-family: var(--font-mono, monospace); font-size: .8rem; line-height: 1.45;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin: 6px 0 2px; color: var(--text);
}
.pirep-raw { list-style: none; }
.pirep-bucket ul { list-style: none; padding-left: 0; }

/* ===== Buscar NOTAM por número ===== */
.notams-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notams-search-bar { margin: 8px 0 4px; }
.notams-search-bar.hidden { display: none; }
.nsb-row { display: flex; gap: 8px; align-items: center; }
.nsb-row input {
  flex: 1; min-width: 0; padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--text);
  font-family: var(--font-ui); font-size: .9rem; text-transform: uppercase;
}
.nsb-row input:focus { outline: none; border-color: var(--ac
/* ----- Crew Mate · documentos del piloto (RAG) ----- */
.aidocs-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.aidocs-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px; }
.aidocs-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.aidocs-meta { flex: 0 0 auto; }
.aidocs-del { flex: 0 0 auto; background: transparent; border: none; color: var(--text-2); cursor: pointer; font-size: .9rem; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.aidocs-del:hover { color: var(--sev-red, #e74c3c); background: rgba(231,76,60,.12); }

/* ----- Botón adjuntar documento en el chat (clip integrado) ----- */
.ai-attach { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: transparent; color: var(--text-2); border-radius: 10px; cursor: pointer; transition: color .15s ease, background .15s ease, transform .1s ease; }
.ai-attach:hover { color: var(--accent); background: rgba(34, 211, 197, .12); }
.ai-attach:active { transform: scale(.92); }
.ai-attach:disabled { opacity: .45; cursor: default; }
.ai-attach svg { display: block; }


/* ----- Control de pantalla completa del mapa de rutas ----- */
.lbv-fs-ctrl a { display: flex !important; align-items: center; justify-content: center; width: 30px; height: 30px; line-height: 30px; color: #333; }
.lbv-fs-ctrl a:hover { color: var(--accent); }
.lbv-fs-ctrl i { font-size: 17px; pointer-events: none; }
#lbv-map:fullscreen { width: 100%; height: 100%; border-radius: 0; border: 0; }
#lbv-map:-webkit-full-screen { width: 100%; height: 100%; border-radius: 0; border: 0; }

/* Selector de reglas de vuelo al importar logbook (Todos IFR/VFR/manual) */
.lbi-rules { margin: 12px 0 6px; }
.lbi-rules-title { margin-bottom: 6px; }
.lbi-rules-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lbi-rule-opt {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
    cursor: pointer; font-size: .85rem; user-select: none;
    background: var(--bg-card);
}
.lbi-rule-opt:hover { border-color: var(--accent); }
.lbi-rule-opt input { accent-color: var(--accent); margin: 0; }
.lbi-rule-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ================================================================
   LOGBOOK v3 — "Career Cockpit" (scoped a .lbv3, ambos temas)
   ================================================================ */
.lbv3 { animation: lbv3up .45s cubic-bezier(.2,.7,.3,1); }
@keyframes lbv3up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .lbv3, .lbv3 * { animation: none !important; transition: none !important; }
}

/* ---- Hero ---- */
.lbv3-hero { margin: 4px 0 18px; }
.lbv3-hero-lbl { font: 600 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.lbv3-hero-num {
    font: 800 clamp(46px, 7vw, 72px)/1.05 var(--font-ui); letter-spacing: -.02em;
    background: linear-gradient(100deg, var(--accent) 15%, var(--accent-2) 105%);
    -webkit-background-clip: text; background-clip: text;
    color: var(--accent); -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}
.lbv3-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.lbv3-chip { background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: 500 12px var(--font-ui); color: var(--text-2); }
.lbv3-chip b { color: var(--text); font-family: var(--font-num); font-weight: 600; }
.lbv3-chip.hot { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }

/* ---- Tarjetas / títulos de sección ---- */
.lbv3-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; }
.lbv3-h3 { font: 700 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lbv3-h3sub { margin-left: auto; font: 500 11px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.lbv3-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 760px) { .lbv3-grid2 { grid-template-columns: 1fr; } }
.lbv3-grid2 .lbv3-card { margin-bottom: 0; }
.lbv3-donut { border: 0 !important; background: none !important; padding: 0 !important; }

/* ---- Heatmap de actividad ---- */
.lbv3-heatwrap { overflow-x: auto; padding-bottom: 4px; }
.lbv3-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; width: max-content; }
.lbv3-heat i, .lbv3-heatleg i { width: 11px; height: 11px; border-radius: 3px; background: var(--bg-recess); display: inline-block; }
.lbv3-heat i.pad { background: transparent; }
.lbv3-heat i { transition: transform .1s; }
.lbv3-heat i:hover { transform: scale(1.35); outline: 1px solid var(--accent); }
.lbv3-heat .l1, .lbv3-heatleg .l1 { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.lbv3-heat .l2, .lbv3-heatleg .l2 { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.lbv3-heat .l3, .lbv3-heatleg .l3 { background: color-mix(in srgb, var(--accent) 75%, transparent); }
.lbv3-heat .l4, .lbv3-heatleg .l4 { background: var(--accent); }
.lbv3-heatfoot { font: 500 11px var(--font-ui); color: var(--text-3); margin-top: 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lbv3-heatfoot b { color: var(--text); font-family: var(--font-num); }
.lbv3-heatleg { display: inline-flex; align-items: center; gap: 4px; }
.lbv3-heatleg i { width: 9px; height: 9px; border-radius: 2px; }

/* ---- Top aeropuertos ---- */
.lbv3-toplist { display: flex; flex-direction: column; gap: 9px; }
.lbv3-toprow { display: flex; align-items: center; gap: 10px; font: 500 13px var(--font-ui); }
.lbv3-toprow .code { font: 600 13px var(--font-num); width: 46px; color: var(--accent-2); }
.lbv3-toprow .meter { flex: 1; height: 6px; background: var(--bg-recess); border-radius: 3px; overflow: hidden; }
.lbv3-toprow .meter i { display: block; height: 100%; background: var(--accent-2); border-radius: 3px; transform: scaleX(0); transform-origin: left; animation: lbv3growx .8s .15s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes lbv3growx { to { transform: scaleX(1); } }
.lbv3-toprow .n { font: 500 12px var(--font-num); color: var(--text-2); width: 48px; text-align: right; }

/* ---- Recencia: tarjetas con anillo ---- */
.lbv3 .lbv-cur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; }
.lbv3-ccard { display: flex !important; gap: 14px; align-items: center; background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.lbv3-ccard.ok { border-left: 3px solid #34d399; }
.lbv3-ccard.warn { border-left: 3px solid #f43f5e; }
.lbv3-ringbox { position: relative; width: 78px; height: 78px; flex: none; }
.lbv3-ringc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lbv3-ringv { font: 600 14px var(--font-num); color: var(--text); }
.lbv3-ringt { font: 500 9px var(--font-num); color: var(--text-3); margin-top: 1px; }
.lbv3-ccbody { min-width: 0; }
.lbv3-cctitle { font: 700 13.5px var(--font-ui); color: var(--text); }
.lbv3-ccsub { font: 400 11.5px var(--font-ui); color: var(--text-3); margin-top: 3px; line-height: 1.45; }
.lbv3-ccfoot { font: 500 11px var(--font-num); margin-top: 6px; }
.lbv3 .t-ok { color: #34d399; }
.lbv3 .t-warn { color: #f5b042; }

/* ---- Chips rápidos (tab Vuelos) ---- */
.lbv3-qchips { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 12px; }
.lbv3-qchip { background: var(--bg-card); border: 1px solid var(--line); color: var(--text-2); border-radius: 999px; padding: 6px 14px; font: 600 12.5px var(--font-ui); cursor: pointer; transition: all .15s; }
.lbv3-qchip:hover { color: var(--text); }
.lbv3-qchip.active { background: var(--accent); color: #10131a; border-color: var(--accent); }

/* ---- Filas de vuelo v3 ---- */
.lbv3 .lbv2-entry.lbv3-flight { border-radius: 14px; transition: border-color .15s, transform .15s; }
.lbv3 .lbv2-entry.lbv3-flight:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateX(4px); }
.lbv3 .lbv3-flight.has-notes { cursor: pointer; }
.lbv3-day { text-align: center; font-family: var(--font-num); min-width: 40px; }
.lbv3-day b { display: block; font-size: 19px; font-weight: 600; color: var(--text); line-height: 1.1; }
.lbv3-day span { font-size: 9.5px; color: var(--text-3); letter-spacing: .1em; }
.lbv3-route { display: flex; align-items: center; gap: 11px; font: 600 16px var(--font-num); color: var(--text); }
.lbv3-line { flex: 0 1 150px; min-width: 40px; height: 2px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 1px; position: relative; }
.lbv3-line::after { content: "✈"; position: absolute; top: -9px; left: 0; font-size: 11px; color: var(--accent); transition: left .5s cubic-bezier(.2,.7,.3,1); }
.lbv3-flight:hover .lbv3-line::after { left: calc(100% - 13px); }
.lbv3 .lbv3-notes { display: none; }
.lbv3 .lbv3-flight.open .lbv3-notes { display: block; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.lbv3 .lbv3-flight.has-notes .lbv3-route::before { content: "▸"; font-size: 10px; color: var(--text-3); margin-right: -4px; transition: transform .15s; display: inline-block; }
.lbv3 .lbv3-flight.open .lbv3-route::before { transform: rotate(90deg); }

/* ---- Mapa: récords + arcos animados ---- */
.lbv3-maprecs { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font: 500 12px var(--font-ui); color: var(--text-2); }
.lbv3-maprecs b { color: var(--text); font-family: var(--font-num); font-weight: 600; }
.lbv3-arc { stroke-dasharray: 7 6; animation: lbv3dash 1.6s linear infinite; }
@keyframes lbv3dash { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) { .lbv3-arc { animation: none; stroke-dasharray: none; } }