/* ================================================================
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: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Display",
system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--font-num: "IBM Plex 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 · ForeFlight-style dark) ===== */
.theme-night {
--bg: #0a1322; /* page background (deepest navy) */
--bg-2: #0f1a2d; /* sticky chrome / topbar */
--bg-3: #1c2e48; /* elevated surface / hover */
--bg-card: #14233a; /* card surface */
--bg-recess: #0c172a; /* recessed (inputs) */
--line: rgba(255,255,255,0.10);
--line-soft: rgba(255,255,255,0.05);
--line-strong: rgba(255,255,255,0.18);
--text: #e6edf5;
--text-2: #8ea4be;
--text-3: #5b7491;
--accent: #ff7e1a; /* ForeFlight warm orange — primary CTA */
--accent-soft: rgba(255,126,26,0.14);
--accent-2: #60a5fa; /* secondary accent (radar 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 #ea580c a #F2741A (un punto más cálido y luminoso). */
.theme-day {
--bg: #EAEDF1; /* fondo de página, más frío */
--bg-2: #FFFFFF; /* chrome / topbar */
--bg-3: #EFF2F6; /* superficie elevada / hover */
--bg-card: #FFFFFF; /* superficie de tarjeta */
--bg-recess: #F4F6F9; /* inputs (hundido) */
--line: rgba(18,28,42,0.10);
--line-soft: rgba(18,28,42,0.07);
--line-strong: rgba(18,28,42,0.16);
--text: #15212E;
--text-2: #5A6A7A;
--text-3: #93A0AE;
--accent: #F2741A; /* naranja marca del prototipo */
--accent-soft: rgba(242,116,26,0.12);
--accent-2: #1E78D6; /* azul radar 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: #149A66;
--sev-mvfr: #1E78D6;
--sev-ifr: #C9821A; /* ámbar caution — uso aviation actual */
--sev-caution:#C9821A; /* alias explícito */
--sev-lifr: #DC4035; /* rojo crítico / IFR categoría */
--sev-info: #7A8794;
--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: #9a7a2e;
--ntm-med: #4a6e96;
--ntm-low: #76808f;
--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 (#F2741A).
Aplicable en cualquier wordmark donde aparezca "AI CrewMate" como
AI CrewMate. Hereda el resto del color
del contenedor para que respete dark/light modes. */
.brand-ai {
color: #F2741A;
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: #F2741A; }
/* 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: #f2741a;
color: #ffffff;
border-color: #f2741a;
}
.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); }
.btn-primary {
background: var(--accent);
color: #fff;
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; }
.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 */
.brief-tabs-row-main {
max-width: 1080px;
margin: 0 auto;
width: 100%;
}
.brief-tabs-row-main .brief-tab {
flex: 1 1 0;
justify-content: center;
min-width: 0; /* permite que el texto se ajuste */
}
.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(242, 116, 26, 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(255, 126, 26, 0.06);
border: 1px solid rgba(255, 126, 26, 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: #ff7e1a; 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);
}
.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: #f2741a;
box-shadow: 0 0 0 2px rgba(242,116,26,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(242,116,26,0.04);
border-color: rgba(242,116,26,0.18);
}
.wind-cross .wpv-row.sel {
border-color: #f2741a;
background: rgba(242,116,26,0.05);
box-shadow: 0 1px 8px rgba(242,116,26,0.12);
}
.wind-cross .wpv-row:focus-visible {
outline: none;
border-color: #f2741a;
}
/* 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: #f2741a; }
.wind-cross .wpv-plane {
color: #f2741a;
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: #f2741a;
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: #f2741a;
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: #ff9a3d; }
.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;
inset: 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;
grid-template-columns: 30px 1fr 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: #fff;
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 { max-width: 820px; }
/* ================================================================
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(242, 116, 26, 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(242,116,26,0.08), rgba(242,116,26,0.02));
border-color: rgba(242,116,26,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(90deg, #F2741A, #ff9c4d);
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: #e74c3c; }
/* --- 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: #e74c3c; border-color: #e74c3c; }
.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(242,116,26,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 {
display: grid;
grid-template-columns: 32px 1fr auto 28px;
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(242, 116, 26, 0.18); color: #F2741A; }
.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: #e74c3c; }
@media (max-width: 640px) {
.lbv2-entry { grid-template-columns: 28px 1fr 24px; }
.lbv2-right { grid-column: 1 / -2; text-align: left; display: flex; gap: 10px; align-items: baseline; }
}
/* ================================================================
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; inset: 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: #fff;
border-color: var(--accent);
}
.tcc-btn-primary:hover { background: color-mix(in srgb, var(--accent) 90%, white); }
.tcc-btn-destructive {
background: #e74c3c;
color: #fff;
border-color: #e74c3c;
}
.tcc-btn-destructive:hover { background: #c0392b; }
/* ================================================================
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(242, 116, 26, 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(242, 116, 26, 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;
}
/* ====================== 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) ====================== */
.ai-fab {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1500;
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 18px 12px 14px;
background: var(--accent);
color: #fff;
border: 0;
border-radius: 999px;
font-family: inherit;
font-size: .9rem;
font-weight: 500;
cursor: pointer;
box-shadow: 0 6px 20px rgba(255, 126, 26, 0.35),
0 0 0 1px rgba(255,255,255,.15);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
letter-spacing: .02em;
}
.ai-fab:hover {
background: color-mix(in srgb, var(--accent) 92%, white);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(255, 126, 26, 0.45),
0 0 0 1px rgba(255,255,255,.25);
}
.ai-fab.hidden { display: none; }
.ai-fab-label { font-weight: 700; }
/* 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: 32px;
height: 32px;
border-radius: 50%;
background: #0a1322;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
flex-shrink: 0;
}
/* 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) {
.ai-fab-label { display: none; }
.ai-fab { padding: 12px; }
}
.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; inset: 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; inset: 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; }
}
.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-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.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);
}
/* 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; inset: 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);
}
.map-event-icon.turb.sev-mod { background: #e6a83a; }
.map-event-icon.turb.sev-high { background: #e0584d; animation: pulse-warn 1.6s ease-in-out infinite; }
.map-event-icon.ice.sev-mod { background: #5dade2; }
.map-event-icon.ice.sev-high { background: #e0584d; animation: pulse-warn 1.6s ease-in-out infinite; }
.map-event-icon.jet.sev-normal{ background: #3498db; }
.map-event-icon.jet.sev-strong{ background: #9b59b6; }
@keyframes pulse-warn {
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(231,76,60,.45), 0 0 14px rgba(231,76,60,.6); }
}
/* 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;
inset: 0;
width: 100%;
height: 100%;
border-radius: 50%;
clip-path: circle(50% at 50% 50%);
-webkit-clip-path: circle(50% at 50% 50%);
overflow: hidden;
background: rgba(20, 28, 36, 0.18);
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);
}
/* Viñeta interna más suave para no esconder el terreno. */
.radar-bg-map::after {
content: "";
position: absolute; inset: 0;
border-radius: 50%;
box-shadow: inset 0 0 30px rgba(0,0,0,0.30);
pointer-events: none;
}
.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 */
.radar-svg .r-sweep-group {
transform-origin: 0 0;
animation: radar-sweep 4s linear infinite;
}
.radar-svg .r-sweep-line { stroke: var(--accent); stroke-width: .5; opacity: .8; }
@keyframes radar-sweep {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.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; inset: 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;
inset: 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; inset: 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: #f2741a;
background: rgba(242,116,26,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; inset: 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: #fff;
box-shadow: 0 1px 3px rgba(242,116,26,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: 200;
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