/* ═══════════════════════════════════════════════════════════════
   PILOT HUB — DESIGN SYSTEM v2 · Brand Book 1.0 (2026)
   Navy es la marca; turquesa es la energía. Inter comunica,
   JetBrains Mono da autoridad técnica. Calma de cabina.
═══════════════════════════════════════════════════════════════ */
:root {
  /* Primarios */
  --navy: #0B3C91;        /* Navy 600 — color de marca */
  --navy-800: #08306F;
  --navy-900: #061F52;
  --grad-navy: linear-gradient(158deg, #0B3C91 0%, #08306F 55%, #061F52 100%);
  --grad-accent: linear-gradient(145deg, #3DD9C5 0%, #3FA9F5 100%);
  /* Acentos */
  --teal: #3DD9C5;
  --sky: #3FA9F5;
  --accent: #3FA9F5;
  /* Neutrales */
  --ink: #22314F;
  --slate: #33415C;
  --muted: #8A99B5;
  --line: #E1E8F2;
  --cloud: #F4F8FD;
  --white: #FFFFFF;
  /* Semánticos */
  --ok: #1CA895;
  --ok-bg: #DFF6F2;
  --danger: #C0392B;
  --danger-bg: #FBEBE8;
  --warn: #B45309;        /* solo cautions de seguridad (W&B, fuel) */
  --warn-bg: #FCF3E3;
  /* Compat v1 */
  --dark: var(--ink);
  --bg: var(--cloud);
  --border: var(--line);
  --card: var(--white);
  /* Tipografía */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Forma y sombra — tinte navy, nunca negro */
  --r-sm: 10px; --r-md: 18px; --r-lg: 26px; --r-pill: 100px;
  --shadow-1: 0 1px 2px rgba(11,60,145,0.05), 0 4px 14px rgba(11,60,145,0.06);
  --shadow-2: 0 2px 4px rgba(11,60,145,0.06), 0 12px 32px rgba(11,60,145,0.10);
  --shadow-3: 0 24px 64px rgba(6,31,82,0.28);
  /* Motion — preciso, sin rebotes */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-micro: 160ms; --t-move: 320ms;
  --nav-h: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; font-family: var(--font-ui); background: var(--cloud); color: var(--ink); font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* PWA standalone: 100% del html puede quedar corto frente al viewport real
   (safe areas / barra del sistema) y deja una franja blanca abajo. dvh la elimina. */
@supports (height: 100dvh) { html, body { height: 100dvh; } }
body { overscroll-behavior-y: none; }
@media (display-mode: standalone) {
  .bottom-nav { background: rgba(255,255,255,0.97); }
}
body { display: flex; flex-direction: column; }
::selection { background: rgba(63,169,245,0.25); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* HEADER — gradiente de portada + cinta de rumbos */
.header {
  background: var(--grad-navy);
  color: #fff;
  padding: 14px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: 0.9;
}
.header-brand { display: flex; align-items: center; gap: 11px; }
.logo-svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgba(6,31,82,0.5)); }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.1; }
.brand-name .brand-hub { color: var(--teal); }
.brand-tag { font-family: var(--font-mono); font-size: 8.5px; color: rgba(255,255,255,0.72); letter-spacing: 0.22em; font-weight: 500; text-transform: uppercase; margin-top: 2px; }
.header-clock { font-family: var(--font-mono); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--teal); letter-spacing: 0.04em; }

/* MAIN */
main { flex: 1; overflow-y: auto; padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 34px); width: 100%; }

/* TABS */
.tab-panel { display: none; padding: 18px 16px; animation: panelIn var(--t-move) var(--ease); }
.tab-panel.active { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* BOTTOM NAV — vidrio esmerilado */
.bottom-nav {
  position: fixed;
  bottom: calc(12px + var(--safe-bottom));
  left: 14px; right: 14px;
  max-width: 430px;
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 8px;
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(225,232,242,0.9);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.nav-btn {
  flex: 1;
  max-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  transition: color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
  height: 46px;
  border-radius: var(--r-pill);
}
.nav-btn:active { transform: scale(0.94); }
.nav-btn.active {
  color: var(--navy);
  background: rgba(11,60,145,0.09);
  flex-direction: row;
  gap: 7px;
  flex: 2.4;
  max-width: none;
  padding: 0 12px;
}
.nav-btn.active .nav-label { display: block; font-size: 11.5px; }
.nav-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-micro) var(--ease); }
.nav-btn.active svg { transform: translateY(-1px); stroke-width: 2; }
.nav-label { display: none; font-size: 9.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* CARDS — radio 18, sombra navy, sin borde duro */
.card {
  background: var(--white);
  border: 1px solid rgba(225,232,242,0.6);
  border-radius: var(--r-md);
  padding: 18px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.card-title {
  font-size: 14px; font-weight: 700; color: var(--navy);
  letter-spacing: -0.2px;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.card-title::before {
  content: '';
  width: 3.5px; height: 15px;
  border-radius: 2px;
  background: var(--grad-accent);
  flex-shrink: 0;
}
.card-title svg { display: none; }

/* FORM ELEMENTS — targets 44px, foco anillo suave */
label { display: block; font-size: 11.5px; font-weight: 600; color: var(--slate); margin-bottom: 5px; letter-spacing: 0.01em; }
input, select, textarea {
  width: 100%;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 11px 13px;
  min-height: 44px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: var(--cloud);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color var(--t-micro) var(--ease), background var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--sky);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(63,169,245,0.14);
}
input[type="number"], input[type="time"] { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A99B5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
.form-row { margin-bottom: 13px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* SECTION HEADING — kicker mono */
.section-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 20px 2px 10px;
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 20px;
  min-height: 46px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.1px;
  border: none;
  cursor: pointer;
  transition: transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease), background var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--navy); color: #fff; width: 100%; box-shadow: 0 6px 18px rgba(11,60,145,0.28); }
.btn-primary:hover { background: var(--navy-800); }
.btn-secondary { background: var(--white); color: var(--navy); border: 1.5px solid var(--line); box-shadow: none; }
.btn-secondary:hover { border-color: var(--sky); color: var(--sky); }
.btn-sm { padding: 8px 14px; min-height: 36px; font-size: 13px; border-radius: 10px; }
.btn-danger { background: var(--danger-bg); color: var(--danger); }

/* STATUS BADGE */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.02em; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: rgba(63,169,245,0.14); color: var(--navy); }

/* STATUS ALERTS */
.status-alert { border-radius: 12px; padding: 12px 14px; font-size: 13px; font-weight: 500; margin: 10px 0; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.status-alert.ok { background: var(--ok-bg); color: #0E7566; }
.status-alert.warn { background: var(--warn-bg); color: var(--warn); }
.status-alert.danger { background: var(--danger-bg); color: var(--danger); }
.status-alert.info { background: rgba(63,169,245,0.10); color: var(--navy); }

/* TABLE */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 8px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--cloud); }
.data-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table td input { padding: 6px 8px; min-height: 36px; font-size: 14px; border-radius: 8px; }
.data-table .total-row td { font-weight: 700; background: var(--cloud); color: var(--navy); }

/* METRIC CARDS — datos en mono */
.metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.metric { background: var(--white); border: 1px solid rgba(225,232,242,0.6); border-radius: 12px; padding: 11px 12px; box-shadow: var(--shadow-1); }
.metric-label { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.metric-value { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.15; font-variant-numeric: tabular-nums; }
.metric-unit { font-size: 10px; font-weight: 500; color: var(--muted); font-family: var(--font-ui); }
.metrics-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }

/* ROUTE TABLE — log de navegación técnico */
.route-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11.5px; }
.route-table th { background: var(--navy-900); color: rgba(255,255,255,0.85); padding: 8px 6px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; }
.route-table th:first-child { border-radius: 8px 0 0 0; }
.route-table th:last-child { border-radius: 0 8px 0 0; }
.route-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.route-table tr:nth-child(even) td { background: var(--cloud); }
.route-table tr.total-row td { background: rgba(61,217,197,0.10); font-weight: 700; color: var(--navy); }

/* UTC CLOCK */
#utcClock { font-variant-numeric: tabular-nums; }

/* FIXES & ATOs */
.fixes-search { position: relative; margin-bottom: 10px; }
.fix-list { max-height: 320px; overflow-y: auto; border-radius: 12px; }
.fix-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-micro) var(--ease); }
.fix-item:hover { background: var(--cloud); }
.fix-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.fix-coords { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.dms-inputs{ display:flex; gap:6px; align-items:center; }
.dms-inputs input{ flex:1 1 0; min-width:0; }
.dms-inputs select{ flex:0 0 auto; width:auto; }
.dms-inputs span{ color:var(--muted); font-size:13px; }
.fix-pick-pin div{ width:16px; height:16px; border-radius:50%; background:var(--teal); border:2px solid var(--navy); box-shadow:0 0 0 4px rgba(61,217,197,.35); cursor:grab; }
#fixPickBtn.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.fix-type { font-size: 10px; }

/* PIERNERA — pantalla de instrumento, no terminal hacker */
.piernera-output { font-family: var(--font-mono); font-size: 11px; background: var(--navy-900); color: #A7F3E9; border-radius: var(--r-md); padding: 16px; white-space: pre; overflow-x: auto; line-height: 1.5; box-shadow: inset 0 2px 12px rgba(0,0,0,0.35); }

/* FPL OUTPUT */
.fpl-output { font-family: var(--font-mono); font-size: 12px; background: var(--navy-900); color: #9CCFFA; border-radius: var(--r-md); padding: 16px; white-space: pre-wrap; word-break: break-all; line-height: 1.55; box-shadow: inset 0 2px 12px rgba(0,0,0,0.35); }

/* PRINT STYLES */
@media print {
  .no-print { display: none !important; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; position: static !important; width: 100% !important; padding: 20px !important; background: #fff !important; }
}

/* MODAL PRINT */
.print-modal-overlay { display:none; position:fixed; inset:0; background:rgba(6,31,82,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index:9000; align-items:center; justify-content:center; padding:16px; }
.print-modal-overlay.open { display:flex; animation: panelIn var(--t-move) var(--ease); }
.print-modal { background:#fff; border-radius:var(--r-md); width:100%; max-width:720px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-3); }
.print-modal-header { background:var(--grad-navy); color:#fff; padding:16px 20px; border-radius:var(--r-md) var(--r-md) 0 0; display:flex; align-items:center; justify-content:space-between; }
.print-modal-header h2 { font-size:16px; font-weight:700; letter-spacing:-0.2px; margin:0; }
.print-modal-close { background:rgba(255,255,255,0.12); border:none; color:#fff; font-size:18px; cursor:pointer; line-height:1; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition: background var(--t-micro) var(--ease); }
.print-modal-close:hover { background:rgba(255,255,255,0.22); }
.print-modal-body { padding:20px; }
.print-modal-footer { padding:12px 20px 20px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* FPL FORM PRINT (sin cambios — documento oficial B/N) */
.fpl-form-print { font-family: Arial, sans-serif; font-size: 11px; color: #000; }
.fpl-form-print .fpl-header-print { text-align:center; border:2px solid #000; padding:8px; margin-bottom:0; }
.fpl-form-print .fpl-header-print h3 { font-size:13px; font-weight:bold; margin:0; }
.fpl-form-print .fpl-header-print p { font-size:10px; margin:2px 0 0; }
.fpl-form-print .fpl-grid { display:grid; }
.fpl-form-print .fpl-box { border:1px solid #000; padding:5px 7px; min-height:36px; }
.fpl-form-print .fpl-box-label { font-size:8px; font-weight:bold; color:#333; display:block; margin-bottom:2px; text-transform:uppercase; }
.fpl-form-print .fpl-box-value { font-size:12px; font-weight:600; }
.fpl-form-print .fpl-msg-box { border:2px solid #000; padding:10px; margin-top:0; font-family:'Courier New',monospace; font-size:11px; line-height:1.6; background:#f8f8f8; white-space:pre-wrap; word-break:break-all; }
.fpl-form-print .fpl-msg-label { font-size:8px; font-weight:bold; display:block; margin-bottom:4px; text-transform:uppercase; }
.fpl-form-print .section-divider { background:#000; color:#fff; font-size:9px; font-weight:bold; padding:3px 7px; margin:0; text-transform:uppercase; letter-spacing:.5px; }

/* W&B PRINT (sin cambios — documento) */
.wb-print { font-family: Arial, sans-serif; font-size: 11px; color: #000; }
.wb-print h2 { text-align:center; font-size:15px; font-weight:bold; margin:0 0 2px; }
.wb-print .wb-print-subtitle { text-align:center; font-size:10px; color:#444; margin-bottom:12px; }
.wb-print table { width:100%; border-collapse:collapse; margin-bottom:12px; }
.wb-print th { background:#0B3C91; color:#fff; font-size:10px; padding:5px 8px; text-align:left; }
.wb-print td { border:1px solid #ccc; padding:5px 8px; font-size:11px; }
.wb-print tr:nth-child(even) td { background:#f5f7fa; }
.wb-print .wb-total-row td { font-weight:bold; background:#e8edf5 !important; border-top:2px solid #0B3C91; }
.wb-print .wb-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.wb-print .wb-metric-box { border:2px solid #0B3C91; border-radius:6px; padding:8px; text-align:center; }
.wb-print .wb-metric-box.ok { border-color:#059669; }
.wb-print .wb-metric-box.warn { border-color:#E53E3E; }
.wb-print .wb-metric-label { font-size:9px; color:#555; text-transform:uppercase; font-weight:bold; }
.wb-print .wb-metric-value { font-size:14px; font-weight:bold; color:#0B3C91; margin-top:3px; }
.wb-print .wb-metric-box.ok .wb-metric-value { color:#059669; }
.wb-print .wb-metric-box.warn .wb-metric-value { color:#E53E3E; }
.wb-print .wb-status-banner { border-radius:6px; padding:8px 12px; font-size:11px; font-weight:600; margin-bottom:12px; text-align:center; }
.wb-print .wb-status-banner.ok { background:#d1fae5; color:#059669; border:1px solid #059669; }
.wb-print .wb-status-banner.warn { background:#fee2e2; color:#E53E3E; border:1px solid #E53E3E; }
.wb-print .wb-chart-area { border:1px solid #ccc; border-radius:6px; overflow:hidden; margin-bottom:8px; }
.wb-print .wb-disclaimer { font-size:9px; color:#666; text-align:center; border-top:1px solid #eee; padding-top:6px; }

/* AUTH OVERLAY */
#auth-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--grad-navy);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; font-family: var(--font-ui);
}
#auth-overlay.hidden { display: none; }
.auth-card {
  background: #fff; border-radius: var(--r-lg); padding: 36px 30px;
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-3);
  animation: panelIn 500ms var(--ease);
}
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo svg { width: 52px; height: 52px; }
.auth-logo h1 { font-size: 23px; font-weight: 800; color: var(--navy); margin: 10px 0 3px; letter-spacing: -0.6px; }
.auth-logo p { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0; }
.auth-tabs { display: flex; background: var(--cloud); border-radius: 12px; padding: 3px; margin-bottom: 22px; }
.auth-tab { flex: 1; padding: 9px; border: none; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--t-micro) var(--ease); }
.auth-tab.active { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(11,60,145,0.14); }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 12px; font-weight: 600; color: var(--slate); margin-bottom: 5px; }
.auth-field input { width: 100%; padding: 12px 14px; border: 1.5px solid transparent; background: var(--cloud); border-radius: 12px; font-size: 15px; outline: none; transition: all var(--t-micro) var(--ease); font-family: inherit; }
.auth-field input:focus { border-color: var(--sky); background: #fff; box-shadow: 0 0 0 4px rgba(63,169,245,0.14); }
.auth-btn { width: 100%; padding: 14px; background: var(--navy); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 6px; transition: all var(--t-micro) var(--ease); font-family: inherit; box-shadow: 0 6px 18px rgba(11,60,145,0.28); }
.auth-btn:hover { background: var(--navy-800); }
.auth-btn:active { transform: scale(0.98); }
.auth-btn:disabled { background: var(--muted); cursor: not-allowed; box-shadow: none; }
.auth-error { background: var(--danger-bg); color: var(--danger); border-radius: 10px; padding: 10px 12px; font-size: 12px; margin-bottom: 12px; display: none; }
.auth-error.show { display: block; }
.auth-success { background: var(--ok-bg); color: var(--ok); border-radius: 10px; padding: 10px 12px; font-size: 12px; margin-bottom: 12px; display: none; }
.auth-success.show { display: block; }
.auth-forgot { text-align: right; margin-top: -8px; margin-bottom: 14px; }
.auth-forgot a { font-size: 12px; color: var(--sky); text-decoration: none; cursor: pointer; font-weight: 500; }
.auth-free-banner { margin-top: 20px; padding: 14px; background: var(--cloud); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.auth-free-banner p { font-size: 12px; color: var(--slate); margin: 0 0 8px; font-weight: 500; }
.auth-free-btn { background: none; border: 1.5px solid var(--navy); color: var(--navy); border-radius: var(--r-pill); padding: 8px 18px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all var(--t-micro) var(--ease); }
.auth-free-btn:hover { background: var(--navy); color: #fff; }

/* Badge de plan */
.plan-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); letter-spacing: 0.08em; }
.plan-badge.free { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); }
.plan-badge.paid { background: rgba(61,217,197,0.22); color: var(--teal); }
.plan-badge.plus { background: var(--grad-accent); color: var(--navy-900); }

/* Logout */
.logout-btn { background: none; border: 1px solid rgba(255,255,255,0.28); color: #fff; border-radius: var(--r-pill); padding: 5px 12px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 500; transition: all var(--t-micro) var(--ease); }
.logout-btn:hover { background: rgba(255,255,255,0.14); }

/* Bloqueo free */
.tab-locked { position: relative; }
.tab-locked::after { content: "🔒"; font-size: 10px; margin-left: 3px; }
.free-wall { display: none; position: absolute; inset: 0; background: rgba(11,60,145,0.10); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); z-index: 50; align-items: center; justify-content: center; border-radius: var(--r-md); padding: 24px; }
.free-wall.show { display: flex; align-items: flex-start; justify-content: center; }
.free-wall-card { background: #fff; border-radius: var(--r-lg); padding: 28px 24px; max-width: 320px; width: 100%; box-shadow: var(--shadow-3); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: panelIn 400ms var(--ease); position: sticky; top: 96px; margin-top: 48px; }
.free-wall h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: var(--navy); margin: 0; }
.free-wall p { font-size: 13px; color: var(--slate); margin: 0; line-height: 1.5; }
.free-wall .upgrade-btn { background: var(--grad-accent); color: var(--navy-900); border: none; border-radius: 12px; padding: 13px 26px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 8px 22px rgba(61,217,197,0.35); transition: transform var(--t-micro) var(--ease); }
.free-wall .upgrade-btn:active { transform: scale(0.97); }

/* EXAMEN DGAC */
.dgac-intro { font-size: 13px; color: var(--slate); line-height: 1.5; margin-bottom: 16px; }
.topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.topic-card { position: relative; background: var(--white); border: 1px solid rgba(225,232,242,0.6); border-radius: var(--r-md); padding: 14px; cursor: pointer; transition: transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease); text-align: left; box-shadow: var(--shadow-1); }
.topic-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.topic-card:active { transform: scale(0.97); }
.topic-card .tc-step { font-family: var(--font-mono); font-size: 8px; font-weight: 700; color: var(--sky); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 5px; }
.topic-card .tc-name { font-size: 13px; font-weight: 700; letter-spacing: -0.1px; color: var(--navy); line-height: 1.25; margin-bottom: 8px; min-height: 32px; }
.topic-card .tc-count { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.topic-card .tc-bar { height: 4px; border-radius: 2px; background: var(--cloud); overflow: hidden; }
.topic-card .tc-bar-fill { height: 100%; background: var(--grad-accent); border-radius: 2px; transition: width var(--t-move) var(--ease); }
.topic-card .tc-pct { font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--muted); margin-top: 5px; }
.topic-card.locked { opacity: 0.7; }
.topic-card.locked:hover { transform: none; box-shadow: var(--shadow-1); }
.topic-card .tc-lock { position: absolute; top: 10px; right: 10px; font-size: 13px; opacity: 0.6; }
.topic-card .tc-lock-badge { display: inline-block; background: var(--grad-accent); color: var(--navy-900); font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); margin-top: 4px; letter-spacing: 0.06em; }

.quiz-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.quiz-back { background: none; border: none; color: var(--sky); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 6px 0; display: flex; align-items: center; gap: 4px; }
.quiz-progress-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--muted); }
.quiz-score { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ok); }
.quiz-progress-bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 20px; }
.quiz-progress-bar-fill { height: 100%; background: var(--grad-accent); border-radius: 2px; transition: width var(--t-move) var(--ease); }
.quiz-qtext { font-size: 16px; font-weight: 650; color: var(--ink); letter-spacing: -0.2px; line-height: 1.45; margin-bottom: 18px; }
.quiz-option { display: block; width: 100%; text-align: left; background: var(--white); border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 14px; font-size: 13.5px; font-family: inherit; color: var(--ink); line-height: 1.4; margin-bottom: 9px; cursor: pointer; transition: all var(--t-micro) var(--ease); box-shadow: var(--shadow-1); }
.quiz-option:hover:not(.disabled) { border-color: var(--sky); transform: translateY(-1px); }
.quiz-option:active { transform: scale(0.98); }
.quiz-option .qo-letter { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--cloud); color: var(--slate); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-align: center; line-height: 22px; margin-right: 9px; transition: all var(--t-micro) var(--ease); }
.quiz-option.correct { border-color: var(--teal); background: var(--ok-bg); }
.quiz-option.correct .qo-letter { background: var(--teal); color: var(--navy-900); transform: scale(1.08); }
.quiz-option.incorrect { border-color: var(--danger); background: var(--danger-bg); }
.quiz-option.incorrect .qo-letter { background: var(--danger); color: #fff; }
.quiz-option.disabled { cursor: default; }
.quiz-next-btn { margin-top: 8px; }
.quiz-results { text-align: center; padding: 28px 12px; }
.quiz-results .qr-emoji { font-size: 44px; margin-bottom: 10px; }
.quiz-results .qr-score { font-family: var(--font-mono); font-size: 40px; font-weight: 800; color: var(--navy); letter-spacing: -1px; }
.quiz-results .qr-label { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.dgac-lock-card { text-align: center; padding: 24px 16px; }
.dgac-lock-card .dl-emoji { font-size: 32px; margin-bottom: 8px; }

/* UNIT TOGGLE — segmentado iOS */
.unit-toggle { display: flex; background: var(--cloud); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.unit-toggle button { flex: 1; padding: 7px 12px; border: none; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--t-micro) var(--ease); white-space: nowrap; }
.unit-toggle button.active { background: var(--white); color: var(--navy); box-shadow: 0 1px 4px rgba(11,60,145,0.16); }
.exam-country-bar button { padding: 9px 14px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.exam-country-bar button.active { color: var(--navy); font-weight: 700; }
.flag-ico { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); flex-shrink: 0; }

/* AIRCRAFT CHIPS */
.ac-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.ac-chip { padding: 8px 14px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--slate); font-family: var(--font-mono); font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--t-micro) var(--ease); }
.ac-chip:hover { border-color: var(--sky); color: var(--sky); }
.ac-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 4px 12px rgba(11,60,145,0.25); }

/* EMPTY WEIGHT BOX */
.empty-weight-box { background: var(--cloud); border: 1px solid var(--line); border-left: 3px solid var(--sky); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.empty-weight-box .ew-title { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }

/* CG CHART */
.cg-chart-wrap { position: relative; width: 100%; height: 260px; margin-top: 12px; }

/* DISCLAIMER — informativo, barra sky */
.disclaimer { font-size: 11px; color: var(--slate); background: var(--cloud); border: 1px solid var(--line); border-left: 3px solid var(--sky); border-radius: 10px; padding: 11px 13px; margin-top: 12px; line-height: 1.55; }

/* AUTOCOMPLETE DE FIXES */
.fix-autocomplete-wrap { position: relative; }
.fix-input {
  width: 100%;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 9px 11px;
  min-height: 42px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--cloud);
  outline: none;
  transition: all var(--t-micro) var(--ease);
  text-transform: uppercase;
}
.fix-input:focus { border-color: var(--sky); background: var(--white); box-shadow: 0 0 0 4px rgba(63,169,245,0.14); }
.fix-input.has-match { border-color: var(--teal); background: var(--ok-bg); }
.fix-input.no-match { border-color: var(--danger); }
.fix-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  z-index: 500;
  max-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
}
.fix-dropdown.open { display: block; animation: panelIn 200ms var(--ease); }
.fix-option { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line); transition: background var(--t-micro) var(--ease); }
.fix-option:last-child { border-bottom: none; }
.fix-option:hover, .fix-option.selected { background: var(--cloud); }
.fix-option-icao { font-size: 13px; font-weight: 700; color: var(--navy); min-width: 46px; font-family: var(--font-mono); }
.fix-option-desc { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fix-option-elev { font-family: var(--font-mono); font-size: 10px; color: var(--ok); font-weight: 600; margin-left: auto; white-space: nowrap; }

.copy-btn { font-size: 12px; font-weight: 600; font-family: inherit; padding: 8px 14px; border-radius: var(--r-pill); background: var(--navy); color: #fff; border: none; cursor: pointer; margin-top: 10px; transition: all var(--t-micro) var(--ease); }
.copy-btn:active { transform: scale(0.96); }
.btn-icon { background: none; border: none; cursor: pointer; font-size: 15px; padding: 5px 7px; border-radius: 8px; line-height: 1; transition: background var(--t-micro) var(--ease); }
.btn-icon:hover { background: var(--cloud); }

/* HERRAMIENTAS (E6B + CONVERSIONES) */
.tools-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tool-chip {
  padding: 12px 13px;
  border: 1px solid rgba(225,232,242,0.6);
  border-radius: 12px;
  background: var(--white);
  color: var(--slate);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all var(--t-micro) var(--ease);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-1);
}
.tool-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.tool-chip svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tool-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 6px 16px rgba(11,60,145,0.28); }
.tool-chip.active svg { stroke: var(--teal); }
.tool-panel { display: none; }
.tool-panel.active { display: block; animation: panelIn var(--t-move) var(--ease); }

.conv-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin-bottom: 10px; }
.conv-arrow { display: flex; align-items: center; justify-content: center; padding-bottom: 10px; color: var(--teal); font-size: 18px; font-weight: 700; }
.result-box { background: var(--cloud); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--navy); min-height: 44px; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.conv-unit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.e6b-result {
  background: var(--grad-navy);
  border-radius: var(--r-md);
  padding: 16px;
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  box-shadow: 0 10px 28px rgba(6,31,82,0.30);
}
.e6b-metric { text-align: center; }
.e6b-label { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; color: var(--teal); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 4px; }
.e6b-value { font-family: var(--font-mono); font-size: 23px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.e6b-unit { font-size: 11px; color: rgba(255,255,255,0.55); font-weight: 400; font-family: var(--font-ui); }
.e6b-single { background: var(--cloud); border-radius: 12px; padding: 14px; margin-top: 12px; text-align: center; }
.e6b-single .val { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.e6b-single .lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }

@media (max-width: 380px) {
  .metrics-row { grid-template-columns: repeat(2, 1fr); }
  .form-grid-3 { grid-template-columns: 1fr 1fr; }
  .tools-nav { grid-template-columns: 1fr; }
}

/* DESKTOP — columna centrada, no forms kilométricos */
@media (min-width: 720px) and (hover: hover) and (pointer: fine) {
  body { background: linear-gradient(180deg, #E7EEF9 0%, #F1F6FC 320px, var(--cloud) 100%); }
  main { max-width: 680px; margin: 0 auto; padding-bottom: calc(var(--nav-h) + 56px); }
  .tab-panel { padding: 26px 8px; }
  .card { padding: 22px 20px; border-radius: 20px; }
  .header { padding-left: max(24px, calc((100vw - 680px) / 2)); padding-right: max(24px, calc((100vw - 680px) / 2)); }
  /* Dock flotante estilo macOS */
  .bottom-nav {
    max-width: 600px;
    left: 0; right: 0; bottom: 16px;
    margin: 0 auto;
    height: var(--nav-h);
    padding-bottom: 0;
    border: 1px solid rgba(225,232,242,0.8);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-2);
  }
  .nav-btn:first-child { margin-left: 8px; }
  .nav-btn:last-child { margin-right: 8px; }
  .nav-label { display: block; }
  .nav-btn { height: calc(var(--nav-h) - 12px); }
  .nav-btn.active { flex-direction: column; gap: 3px; flex: 1; max-width: 92px; padding: 6px 2px; }
  .nav-btn.active .nav-label { font-size: 9.5px; }
  .topic-grid { grid-template-columns: 1fr 1fr 1fr; }
  .tools-nav { grid-template-columns: 1fr 1fr 1fr; }
  .free-wall-card { top: 140px; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  main { max-width: 1160px; }
  .header { padding-left: max(24px, calc((100vw - 1160px) / 2)); padding-right: max(24px, calc((100vw - 1160px) / 2)); }
  /* Tabs de una columna: centradas, sin océano de espacio */
  .tab-panel { max-width: 800px; margin: 0 auto; }
  /* Escritorio real: Ruta a 2 columnas cuando hay resultados
     (planificación izquierda · log/mapa/meteo derecha) */
  #tab-ruta.active:has(> #routeResultCard[style*="block"]) {
    max-width: none;
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 0 26px;
    align-items: start;
  }
  #tab-ruta.active:has(> #routeResultCard[style*="block"]) > * { grid-column: 1; }
  #tab-ruta.active:has(> #routeResultCard[style*="block"]) > #routeResultCard { grid-column: 2; grid-row: 1 / span 30; }
  /* W&B: tabla de carga izquierda · envolvente CG fija a la derecha */
  @supports selector(:has(*)) {
    #tab-wb.active { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 0 26px; align-items: start; }
    #tab-wb.active > * { grid-column: 1; }
    #tab-wb.active > .card:has(#wb_cgChart) { grid-column: 2; grid-row: 1 / span 30; position: sticky; top: 88px; }
    #tab-wb .cg-chart-wrap { height: 380px; }
  }
}

/* Language selector */
.lang-selector { display: inline-flex; background: rgba(255,255,255,0.10); border-radius: var(--r-pill); padding: 2px; gap: 0; }
.lang-btn {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: all var(--t-micro) var(--ease);
}
.lang-btn.active { background: rgba(255,255,255,0.92); color: var(--navy); }
.lang-btn:hover:not(.active) { color: #fff; }

/* HOJA "MÁS" — módulos secundarios (patrón iOS) */
.more-sheet-overlay { position: fixed; inset: 0; z-index: 7000; background: rgba(6,31,82,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: flex-end; justify-content: center; }
.more-sheet-overlay.open { display: flex; }
.more-sheet { background: var(--white); width: 100%; max-width: 560px; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 10px 18px calc(18px + var(--safe-bottom)); box-shadow: var(--shadow-3); animation: sheetUp 320ms var(--ease); }
@keyframes sheetUp { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
.more-sheet-handle { width: 38px; height: 4.5px; border-radius: 3px; background: var(--line); margin: 2px auto 14px; }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.more-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; background: var(--cloud); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--slate); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all var(--t-micro) var(--ease); }
.more-tile:hover { border-color: var(--sky); color: var(--navy); }
.more-tile:active { transform: scale(0.96); }
.more-tile svg { width: 24px; height: 24px; stroke: var(--navy); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.more-build { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.2em; color: var(--muted); text-align: center; margin-top: 14px; }

/* HEADER COMPACTO — iPhone / pantallas angostas */
.header-clock { white-space: nowrap; }
@media (max-width: 480px) {
  .brand-tag { display: none; }
  .logo-svg { width: 28px; height: 28px; }
  .brand-name { font-size: 16px; }
  .header { padding: 10px 12px 9px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .header > div:last-child { gap: 6px !important; flex-wrap: nowrap; min-width: 0; }
  .header-clock { font-size: 11px; }
  .logout-btn { padding: 4px 9px; font-size: 10px; }
  .plan-badge { padding: 2px 7px; font-size: 8px; letter-spacing: 0.05em; }
  .lang-btn { padding: 3px 7px; font-size: 9px; }
}

/* MAPA DE RUTA (Leaflet) */
.route-map { height: 340px; border-radius: 12px; overflow: hidden; position: relative; z-index: 1; background: var(--cloud); }
.route-map-label { background: rgba(255,255,255,0.92) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; box-shadow: 0 1px 4px rgba(11,60,145,0.18) !important; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--navy) !important; padding: 1px 5px !important; }
.route-map-label::before { display: none !important; }
.leaflet-container { font-family: var(--font-ui); }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--shadow-2); font-family: var(--font-ui); }
.leaflet-popup-content { font-size: 12.5px; line-height: 1.5; color: var(--ink); }
@media (min-width: 720px) { .route-map { height: 400px; } }

/* METAR/TAF EN RUTA */
.wx-row { padding: 11px 0; border-bottom: 1px solid var(--line); }
.wx-row:first-child { padding-top: 2px; }
.wx-row:last-child { border-bottom: none; padding-bottom: 2px; }
.wx-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wx-icao { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--navy); }
.wx-age { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-left: auto; }
.wx-decoded { font-family: var(--font-mono); font-size: 12px; color: var(--slate); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.wx-raw { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; background: var(--cloud); border-radius: 8px; padding: 8px 10px; color: var(--ink); word-break: break-word; }
.wx-taf { margin-top: 6px; }
.wx-taf summary { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--sky); cursor: pointer; padding: 2px 0; list-style: none; }
.wx-taf summary::before { content: '▸ '; }
.wx-taf[open] summary::before { content: '▾ '; }
.wx-taf .wx-raw { margin-top: 6px; }

/* PROGRESO PPL */
.ppl-row { margin-bottom: 12px; }
.ppl-row:last-child { margin-bottom: 2px; }
.ppl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.ppl-name { font-size: 12.5px; font-weight: 600; color: var(--slate); }
.ppl-check { color: var(--ok); font-weight: 800; }
.ppl-nums { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ppl-nums.done { color: var(--ok); }
.ppl-bar { height: 6px; border-radius: 3px; background: var(--cloud); overflow: hidden; }
.ppl-bar-fill { height: 100%; border-radius: 3px; background: var(--grad-accent); transition: width var(--t-move) var(--ease); }
.ppl-bar-fill.done { background: var(--ok); }

/* DECODIFICADOR METAR */
.mt-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mt-row:last-of-type { border-bottom: none; }
.mt-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); min-width: 96px; flex-shrink: 0; }
.mt-val { font-size: 13px; color: var(--ink); line-height: 1.45; }
.mt-tok { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--sky); background: rgba(63,169,245,0.10); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }



/* ═══════════════════════════════════════════════════════════════
   BOTÓN DE TEMA (header)
═══════════════════════════════════════════════════════════════ */
.theme-btn { background: none; border: 1px solid rgba(255,255,255,0.28); color: #fff; border-radius: var(--r-pill); width: 30px; height: 30px; font-size: 14px; cursor: pointer; line-height: 1; padding: 0; transition: all var(--t-micro) var(--ease); }
.theme-btn:hover { background: rgba(255,255,255,0.12); }

/* ═══════════════════════════════════════════════════════════════
   MODO OSCURO — override de variables del design system.
   Navy/teal/sky se mantienen (la marca no cambia de color);
   cambian neutrales y superficies. Los previews de impresión
   (.print-modal, .wb-print, .fpl-form-print) quedan claros a
   propósito: simulan el papel.
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --ink: #E8EEF9;
  --slate: #C4D0E5;
  --muted: #93A3C0;
  --line: #24345A;
  --cloud: #0D1526;
  --white: #14203A;
  --ok-bg: #0F2E29;
  --danger-bg: #331612;
  --warn-bg: #2E2310;
}
html[data-theme="dark"] body { background: linear-gradient(180deg, #0A1120 0%, #0D1526 320px, var(--cloud) 100%); }

/* Superficies con blanco hardcodeado → superficie oscura */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .free-wall-card { background: var(--white); }
html[data-theme="dark"] .auth-field input:focus,
html[data-theme="dark"] .fix-input:focus { background: var(--white); }

/* Texto navy sobre superficie oscura → sky (legibilidad) */
html[data-theme="dark"] .btn-secondary { color: var(--sky); }
html[data-theme="dark"] .auth-tab.active,
html[data-theme="dark"] .unit-toggle button.active { background: var(--navy); color: #fff; }

/* Charts: el canvas mantiene fondo claro para legibilidad de ejes
   y para que la captura del briefing/print no salga oscura */
html[data-theme="dark"] #wb_cgChart,
html[data-theme="dark"] #lb_hoursChart,
html[data-theme="dark"] #lb_typeChart { background: #fff; border-radius: 8px; }

/* Nav flotante en oscuro */
html[data-theme="dark"] .bottom-nav { background: rgba(20,32,58,0.92); border-color: rgba(36,52,90,0.9); }
html[data-theme="dark"] .nav-btn.active { color: var(--sky); background: rgba(63,169,245,0.14); }

/* Previews de impresión siguen simulando papel */
html[data-theme="dark"] .print-modal { color: #22314F; }


/* ── FPL print — formato oficial (Doc 4444 / CORPAC) con marca Pilot Hub ── */
.fplo{font-family:Arial,Helvetica,sans-serif;color:#000;border:2px solid #000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.fplo-head{display:flex;align-items:center;border-bottom:2px solid #000}
.fplo-brand{display:flex;align-items:center;gap:7px;padding:6px 10px;flex:0 0 auto}
.fplo-brand svg{display:block}
.fplo-brand b{font-size:12px;color:#0B3C91;display:block;line-height:1.15}
.fplo-brand span{font-size:8px;color:#555;display:block}
.fplo-htitle{flex:1;text-align:center;font-size:14px;font-weight:bold}
.fplo-htag{flex:0 0 auto;padding:6px 10px;font-size:8px;font-weight:bold;text-align:right;color:#0B3C91;line-height:1.5}
.fplo-row{display:flex;border-bottom:1px solid #000}
.fplo-cell{flex:1;border-right:1px solid #000;padding:3px 6px 4px;min-height:34px;position:relative}
.fplo-cell:last-child{border-right:none}
.fplo-l{display:block;font-size:6.5px;font-weight:bold;text-transform:uppercase;line-height:1.3;color:#000}
.fplo-l i{font-weight:normal;font-style:italic;color:#444;text-transform:none}
.fplo-v{display:block;font-family:'Courier New',monospace;font-size:12px;font-weight:bold;margin-top:2px;min-height:15px;word-break:break-word}
.fplo-c{text-align:center}
.fplo-tall{min-height:46px}
.fplo-end{position:absolute;right:6px;bottom:3px;font-size:9px;font-weight:bold}
.fplo-sign{flex:1.4}
.fplo-sign .fplo-v{min-height:28px}
.fplo-msg{border-top:2px solid #000;padding:8px 10px;font-family:'Courier New',monospace;font-size:11px;line-height:1.6;white-space:pre-wrap;word-break:break-all;background:#f8f8f8}
.fplo-msg .fplo-l{margin-bottom:4px;font-family:Arial,Helvetica,sans-serif}
.fplo-disc{font-size:8px;color:#555;text-align:center;margin:8px 4px 0}


/* ── Modo store (TWA/Capacitor): sin CTAs de compra ── */
html[data-store] .upgrade-btn{display:none!important}

/* iOS nativo: el documento no scrollea, main es el unico scroller */
html[data-native], html[data-native] body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; }


/* ── Hints de ayuda (v73) ── */
.form-row{position:relative}
.hint-dot{position:absolute;top:-2px;right:0;width:18px;height:18px;border-radius:50%;border:1px solid #3FA9F5;background:transparent;color:#3FA9F5;font-size:11px;font-weight:700;line-height:1;cursor:pointer;padding:0}
.hint-dot:hover{background:#3FA9F5;color:#fff}
#hintPop{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);max-width:340px;width:calc(100% - 48px);background:#0B3C91;color:#fff;padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.45;box-shadow:0 8px 24px rgba(6,31,82,.35);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:9999}
#hintPop.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* ── Perfil de peso vacío por matrícula (v94) ── */
.wb-reg-row{
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
}
.wb-reg-field{flex:0 1 200px;min-width:150px;margin-bottom:0}
/* La matrícula se escribe en mayúsculas, pero el placeholder NO:
   text-transform también afecta al placeholder y se leía "EJ: OB-2143". */
#wb_reg{text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-mono)}
#wb_reg::placeholder{text-transform:none;letter-spacing:normal;font-family:inherit}
.wb-reg-actions{display:flex;gap:8px;flex:1 1 auto;flex-wrap:wrap}
.wb-reg-actions .btn{white-space:nowrap}
.wb-btn-del{flex:0 0 auto;color:var(--muted)}
.wb-btn-del:hover{border-color:var(--danger);color:var(--danger)}
.wb-prof-msg{font-size:12px;font-weight:600;color:var(--muted);margin-top:8px;min-height:16px}
.wb-prof-hint{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}

@media (max-width:520px){
  .wb-reg-field{flex:1 1 100%}
  .wb-reg-actions{flex:1 1 100%}
  .wb-reg-actions .btn{flex:1 1 0}
}
html[data-theme="dark"] .wb-reg-row{border-top-color:var(--line)}

/* ============================================================
   DASHBOARD "HOY" — Fase 1 (Dashboard_Design_Spec_v1)
   ============================================================ */
.dash-head { padding: 2px 2px 14px; }
.dash-dateline { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.dash-greet { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.mono { font-family: var(--font-mono, 'JetBrains Mono', monospace); }

/* Hero — única superficie con gradiente navy (brand book §5) */
.dash-hero { position: relative; border-radius: var(--r-lg, 26px); background: var(--grad-navy); color: #fff; overflow: hidden; box-shadow: 0 14px 34px rgba(6,31,82,.18); margin-bottom: 14px; }
.dash-hero::before { /* cinta de rumbos */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal) 0 14%, rgba(255,255,255,.25) 14% 15%, var(--sky) 15% 32%, rgba(255,255,255,.16) 32% 33%, rgba(255,255,255,.09) 33% 100%);
}
.dash-hero-inner { display: flex; align-items: center; gap: 18px; padding: 22px 20px; }
.dash-hero-main { flex: 1 1 auto; min-width: 0; }
.dash-kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.dash-kicker-accent { color: var(--teal); }
.dash-route { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; line-height: 1.1; overflow-wrap: anywhere; }
.dash-route-empty { font-size: 22px; }
.dash-arr { color: var(--teal); font-weight: 400; }
.dash-meta { font-size: 12.5px; color: rgba(255,255,255,.8); letter-spacing: 0.04em; margin-top: 6px; }
.dash-hero-p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.75); max-width: 46ch; }
.dash-count { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.dash-count-t { font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-count-l { font-size: 12px; color: rgba(255,255,255,.6); }
.dash-daterow { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.dash-datelabel { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.65); margin: 0; }
.dash-dateinput { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: var(--r-pill, 100px); padding: 7px 14px; font-size: 13px; color-scheme: dark; }
.dash-steps { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.dash-step { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; padding: 7px 13px; border-radius: var(--r-pill, 100px); border: 1px solid rgba(255,255,255,.24); color: rgba(255,255,255,.85); background: transparent; cursor: pointer; min-height: 32px; }
.dash-step.done { border-color: transparent; background: rgba(61,217,197,.16); color: var(--teal); }
.dash-cta-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.dash-btn-accent { background: var(--teal); color: var(--navy-900); border: none; font-weight: 700; font-size: 15px; border-radius: var(--r-pill, 100px); padding: 12px 22px; cursor: pointer; min-height: 44px; transition: transform .15s; }
.dash-btn-accent:active { transform: scale(.98); }
.dash-btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.35); color: #fff; font-weight: 600; font-size: 14px; border-radius: var(--r-pill, 100px); padding: 11px 18px; cursor: pointer; min-height: 44px; }
.dash-hero-note { font-size: 12.5px; color: rgba(255,255,255,.55); }
.dash-ready-badge { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--teal); }
.dash-ringwrap { position: relative; flex: 0 0 auto; display: none; }
.dash-ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; color: #fff; }
.dash-adi { width: 96px; height: 96px; flex: 0 0 auto; display: none; }
@media (min-width: 480px) { .dash-ringwrap, .dash-adi { display: block; } }

/* Quick actions */
.dash-qa { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.dash-qa-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--white); border: 1px solid rgba(225,232,242,.6); border-radius: var(--r-md, 18px); padding: 12px 4px 10px; box-shadow: var(--shadow-1); cursor: pointer; min-height: 44px; transition: transform .15s; }
.dash-qa-btn:active { transform: scale(.97); }
.dash-qa-glyph { width: 38px; height: 38px; border-radius: 12px; background: var(--grad-accent); display: flex; align-items: center; justify-content: center; color: #fff; }
.dash-qa-glyph svg { width: 19px; height: 19px; }
.dash-qa-label { font-size: 10.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.15; }

/* Clima */
.dash-base-chip { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; background: rgba(63,169,245,.12); color: var(--navy); border: none; border-radius: var(--r-pill, 100px); padding: 5px 12px; cursor: pointer; min-height: 26px; }
html[data-theme="dark"] .dash-base-chip { color: var(--sky); }
.dash-refresh { background: none; border: 1px solid var(--line); border-radius: 50%; width: 28px; height: 28px; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; }
.dash-wx-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dash-wx-row:last-child { border-bottom: none; }
.dash-wx-icao { font-weight: 700; font-size: 13.5px; color: var(--ink); min-width: 46px; display: flex; flex-direction: column; gap: 2px; }
.dash-wx-basetag { font-size: 8.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.dash-wx-desc { flex: 1; font-size: 12.5px; color: var(--slate); min-width: 0; }
.dash-wx-desc small { display: block; color: var(--muted); font-size: 10.5px; letter-spacing: 0.02em; margin-top: 2px; overflow-wrap: anywhere; }
.dash-wx-age { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.dash-wx-empty { padding: 12px 4px; font-size: 12.5px; color: var(--muted); text-align: center; }
.dash-wx-note { margin-top: 10px; font-size: 10px; color: var(--muted); line-height: 1.4; }

/* Escritorio: hero y contenido respiran más */
@media (min-width: 900px) {
  .dash-hero-inner { padding: 30px 30px; }
  .dash-route { font-size: 38px; }
  .dash-qa-label { font-size: 12px; }
}

/* ── Fase 3: Mi carrera (Mis horas · Vigencias · Estudiar) ── */
.dash-career { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) { .dash-career { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .dash-career .card { margin-bottom: 14px; } }
.dash-card-link { background: none; border: none; color: var(--sky); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 0; }
.dash-teaser { font-size: 13px; color: var(--muted); padding: 6px 0 10px; line-height: 1.5; }
.dash-mini-cta { background: var(--teal); color: var(--navy-900); border: none; font-weight: 700; font-size: 13.5px; border-radius: var(--r-pill, 100px); padding: 9px 18px; cursor: pointer; min-height: 38px; }
.dash-mini-cta.navy { background: var(--navy); color: #fff; margin-top: 12px; }

/* Mis horas */
.dash-hours-big { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 6px; }
.dash-hours-big .n { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-hours-big .u { font-size: 13px; color: var(--muted); font-weight: 600; }
.dash-delta { display: inline-flex; font-size: 11px; font-weight: 600; color: var(--ok); background: var(--ok-bg); padding: 3px 10px; border-radius: var(--r-pill, 100px); }
.dash-spark { margin-top: 12px; display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.dash-spark i { flex: 1; background: rgba(63,169,245,0.16); border-radius: 3px 3px 2px 2px; min-height: 5px; }
.dash-spark i.hi { background: var(--teal); }
.dash-spark-cap { margin-top: 7px; font-size: 11px; color: var(--muted); }

/* Vigencias */
.dash-cur-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.dash-cur-row:last-of-type { border-bottom: none; }
.dash-donut .bg { stroke: var(--line); }
.dash-donut.ok .fg { stroke: var(--ok); }
.dash-donut.warn .fg { stroke: var(--warn); }
.dash-donut.danger .fg { stroke: var(--danger); }
.dash-cur-mid { flex: 1; min-width: 0; }
.dash-cur-mid b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 3px; }
.dash-cur-date { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 12px; color: var(--slate); background: var(--white); max-width: 150px; }
.dash-days { font-size: 12px; font-weight: 700; white-space: nowrap; }
.dash-days.ok { color: var(--ok); } .dash-days.warn { color: var(--warn); } .dash-days.danger { color: var(--danger); }
.dash-cur-foot { padding-top: 9px; font-size: 11px; color: var(--muted); }

/* Sigue estudiando */
.dash-study-lic { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.dash-progressbar { height: 8px; border-radius: var(--r-pill, 100px); background: var(--line); overflow: hidden; }
.dash-progressbar i { display: block; height: 100%; border-radius: var(--r-pill, 100px); background: var(--grad-accent); }
.dash-study-meta { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.dash-streak { margin-top: 12px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--slate); }
.dash-streak .flame { color: var(--teal); flex: 0 0 auto; }

/* ── Fase 2: tarjeta "Requiere atención" ── */
.dash-task-count { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.dash-task { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.dash-task:last-child { border-bottom: none; }
.dash-task-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); margin-top: 5px; flex: 0 0 auto; }
.dash-task.urgent .dash-task-dot { background: var(--danger); }
.dash-task-mid { flex: 1; min-width: 0; }
.dash-task-mid b { display: block; font-size: 13.5px; color: var(--ink); }
.dash-task-mid small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.dash-task-act { background: none; border: none; color: var(--sky); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 4px 0 0; }
.dash-task-badge { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 9px; border-radius: var(--r-pill, 100px); background: var(--danger-bg); color: var(--danger); white-space: nowrap; }
.dash-task-ok { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; font-size: 13px; color: var(--slate); }
.dash-task-okmark { color: var(--ok); font-weight: 700; }

/* ── Fase 4: rol · hitos · año de vuelo ── */
.dash-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-role-chip { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; background: rgba(63,169,245,0.12); color: var(--navy); border: none; border-radius: var(--r-pill, 100px); padding: 5px 12px; cursor: pointer; min-height: 26px; }
html[data-theme="dark"] .dash-role-chip { color: var(--sky); }
.dash-milestone { border-radius: var(--r-md, 18px); background: var(--grad-accent); padding: 2px; margin-bottom: 14px; }
.dash-mile-inner { display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: 16px; padding: 13px 15px; }
.dash-mile-badge { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; background: var(--grad-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.dash-mile-mid { flex: 1; min-width: 0; }
.dash-mile-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.dash-mile-mid b { display: block; font-size: 14.5px; color: var(--ink); margin-top: 2px; }
.dash-mile-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dash-mile-dismiss { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.dash-instr { margin-top: 8px; font-size: 12px; color: var(--slate); }
.dash-instr b { color: var(--ink); }
.dash-year-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 2px 0 12px; }
.dash-year-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dash-year-grid .n { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-year-grid small { font-size: 11px; color: var(--muted); }
.dash-year-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }

/* ── v89: ETD en el hero + aviso de salida pasada ── */
.dash-etd-z { color: rgba(255,255,255,.55); font-size: 12px; font-weight: 700; }
.dash-past-warn { margin-top: 14px; display: inline-block; font-size: 12.5px; font-weight: 600; color: #FFD9D2; background: rgba(192,57,43,.28); border: 1px solid rgba(192,57,43,.45); padding: 8px 14px; border-radius: var(--r-pill, 100px); }
input.dash-dateinput[type="time"] { max-width: 110px; }

/* ── Rutas guardadas (v93) ─────────────────────────────────── */
#srContainer .sr-empty,
#srContainer .sr-teaser-txt { margin:0; font-size:13px; color:var(--muted); }
.sr-teaser { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.sr-row { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--border); }
.sr-row:last-child { border-bottom:none; }
.sr-row-main { flex:1 1 auto; min-width:0; }
.sr-row-name { font-size:14px; font-weight:600; color:var(--text,#222); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-row-meta { font-size:11px; color:var(--muted); margin-top:2px; }
.sr-row-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.sr-icon-btn { min-width:34px; height:34px; border:1px solid var(--border); background:var(--bg,#fff); border-radius:8px; color:var(--muted); font-size:14px; line-height:1; cursor:pointer; }
.sr-icon-btn:hover { color:#0B3C91; border-color:#3FA9F5; }
.sr-edit-input { flex:1 1 auto; min-width:0; font-size:14px; border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.sr-confirm { font-size:12px; color:var(--muted); margin-right:2px; }

/* ── Vuelo en vivo (liveflight.js) ── */
.route-live-bar{display:flex;gap:8px;align-items:center;margin:10px 0 0;flex-wrap:wrap}
#liveFlightBtn.active{background:#0B3C91;color:#fff;border-color:#0B3C91}
.live-readout{margin-top:10px;padding:10px 12px;border:1px solid var(--line,#dbe3ef);border-radius:10px;background:var(--cloud,#F5F7FA);font-family:var(--font-mono,ui-monospace,monospace);font-size:13px;line-height:1.55;color:var(--navy,#0B3C91)}
.live-readout .live-sub{color:#3FA9F5;font-size:12px}
.live-readout .live-note{color:#6b7a90;font-size:11px;display:inline-block;margin-top:2px}
.live-acft-rot{transition:transform .3s linear;transform-origin:50% 50%}

/* ── Mapa en modo pantalla completa (cabina) ── */
body.map-fs-lock{overflow:hidden}
#routeMapCard.route-map-fs{position:fixed;inset:0;z-index:3000;margin:0;padding:0;border:0;border-radius:0;background:#0b1020;display:block}
#routeMapCard.route-map-fs .card-title{display:none}
#routeMapCard.route-map-fs #routeMapNote{display:none}
#routeMapCard.route-map-fs .tile-bar{display:none}
#routeMapCard.route-map-fs .route-map{position:absolute;inset:0;width:100%;height:100vh!important;height:100dvh!important;border-radius:0}
#routeMapCard.route-map-fs .lf-bar{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:10px;right:10px;z-index:3100;margin:0}
#routeMapCard.route-map-fs #liveReadout{position:absolute;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:3100;margin:0;background:rgba(11,32,64,.86);color:#fff;border-color:rgba(255,255,255,.18)}
#routeMapCard.route-map-fs #liveReadout .live-note{color:#c7d2e0}
#routeMapCard.route-map-fs #liveReadout .live-sub{color:#7fc4ff}

/* ── Track-up (Fase 4): rota el mapa con el rumbo; mejor en pantalla completa ── */
#trackUpBtn.active{background:#0B3C91;color:#fff;border-color:#0B3C91}

/* ── MapLibre: marcadores de waypoint (dot + label) ── */
.rt-wp{display:flex;flex-direction:column;align-items:center;pointer-events:none}
.rt-wp-dot{width:11px;height:11px;border-radius:50%;border:2px solid #0B3C91;background:#3FA9F5;box-shadow:0 1px 3px rgba(11,60,145,.4)}
.rt-wp-start .rt-wp-dot{background:#3DD9C5}
.rt-wp-end .rt-wp-dot{background:#0B3C91}
.rt-wp-lbl{margin-top:2px;font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;font-weight:700;color:#0B3C91;background:rgba(255,255,255,.92);border:1px solid var(--line,#dbe3ef);border-radius:6px;padding:1px 5px;white-space:nowrap;box-shadow:0 1px 4px rgba(11,60,145,.18)}
.live-acft-el{will-change:transform}

/* ── v110: HUD y botonera del mapa en vivo ── */
.lf-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#9aa7b8;vertical-align:baseline;margin-right:2px}
.lf-dot.ok{background:#2ecc71}.lf-dot.warn{background:#f39c12}.lf-dot.bad{background:#e74c3c}
.lf-flash{animation:lfflash 1s ease-in-out infinite alternate}
@keyframes lfflash{from{opacity:1}to{opacity:.45}}
#nightBtn.active,#nearAptBtn.active{background:#0B3C91;color:#fff;border-color:#0B3C91}
#routeMapCard.flying .tile-bar{display:none}

/* ── v111 EFB pack ── */
.lf-red{color:#e74c3c;font-weight:700}
#etasBtn.active{background:#0B3C91;color:#fff;border-color:#0B3C91}
#lfArrow{transition:transform .3s linear;transform-origin:50% 50%;color:#3DD9C5;font-weight:700}

/* ── v112: HUD reorganizado ── */
.lf-bar1{display:flex;gap:6px;margin-bottom:8px}
.lf-cell{flex:1;background:rgba(11,60,145,.06);border:1px solid var(--line,#dbe3ef);border-radius:8px;padding:6px 4px;text-align:center;min-width:0}
.lf-lab{display:block;font-size:9px;font-weight:700;letter-spacing:.06em;color:#6b7a90;text-transform:uppercase}
.lf-val{display:block;font-family:var(--font-mono,ui-monospace,monospace);font-size:17px;font-weight:700;color:#0B3C91;white-space:nowrap}
#routeMapCard.route-map-fs .lf-cell{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
#routeMapCard.route-map-fs .lf-lab{color:#c7d2e0}
#routeMapCard.route-map-fs .lf-val{color:#fff}
.lf-nav{margin:2px 0;font-weight:600}
.lf-dettog{background:none;border:none;color:#3FA9F5;font-size:12px;font-weight:700;padding:4px 0;cursor:pointer}
.lf-sheet{border-top:1px dashed var(--line,#dbe3ef);margin-top:6px;padding-top:6px}
.lf-save{margin-top:8px;display:flex;gap:8px;align-items:center;font-weight:600}
#dtoBtn.active{background:#e74c3c;color:#fff;border-color:#e74c3c}

/* ── v114: HSI, CDI, tabla ETAs, noche en HUD, targets, wx dots ── */
.lf-hsi{position:relative;display:inline-flex;width:30px;height:30px;border:1.5px solid #3FA9F5;border-radius:50%;align-items:center;justify-content:center;vertical-align:middle;margin-right:4px}
.lf-rose{position:absolute;inset:0;transition:transform .2s linear}
.lf-rose i{position:absolute;top:-1px;left:50%;transform:translateX(-50%);font-size:7px;font-style:normal;font-weight:700;color:#3FA9F5}
.lf-cdi{margin:4px 0}
.lf-cdi-scale{position:relative;display:inline-block;width:130px;height:14px;vertical-align:middle;background:linear-gradient(to right,transparent 48%,#0B3C91 48%,#0B3C91 52%,transparent 52%)}
.lf-cdi-scale::before{content:'';position:absolute;left:0;right:0;top:6px;height:2px;background:repeating-linear-gradient(to right,#9aa7b8 0 2px,transparent 2px 30px)}
.lf-cdi-dot{position:absolute;left:50%;top:1px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#E040FB;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .4s ease}
.lf-cdi-txt{margin-left:8px}
.lf-etahead{font-weight:700;margin-bottom:4px}
.lf-etatbl{width:100%;border-collapse:collapse;font-family:var(--font-mono,ui-monospace,monospace);font-size:12px}
.lf-etatbl th{text-align:left;font-size:10px;color:#6b7a90;border-bottom:1px solid var(--line,#dbe3ef);padding:2px 6px 2px 0}
.lf-etatbl td{padding:3px 6px 3px 0;border-bottom:1px dashed rgba(150,165,185,.25)}
.lf-etatbl .lf-past td{opacity:.55}
#routeMapCard.night #liveReadout,#routeMapCard.night .live-readout{background:#0d1b2e;color:#dbe6f5;border-color:#22344e}
#routeMapCard.night .lf-cell{background:rgba(255,255,255,.06);border-color:#22344e}
#routeMapCard.night .lf-lab{color:#8fa3bd}
#routeMapCard.night .lf-val{color:#eaf2ff}
#routeMapCard.night .lf-etatbl th{color:#8fa3bd}
#routeMapCard.flying .route-live-bar .btn{padding:10px 14px;font-size:14px}
#replayBtn.active{background:#0B3C91;color:#fff;border-color:#0B3C91}
.wx-dot{width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* ── v115: flecha del HUD = botón Direct-To ── */
.lf-arrowbtn{background:none;border:1.5px solid #3FA9F5;border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#3DD9C5;font-size:16px;cursor:pointer;vertical-align:middle;margin-right:4px;padding:0}
.lf-arrowbtn.active{border-color:#E040FB;color:#E040FB;background:rgba(224,64,251,.12)}
.lf-arrowbtn #lfArrow{transition:transform .3s linear;display:inline-block}


/* ============================================================
   PILOT HUB · IFR TRAINER — HOJA DE ESTILO DEL MÓDULO (V1 CONGELADA)
   ------------------------------------------------------------
   Los bloques están en ORDEN HISTÓRICO porque la cascada depende
   de ese orden: NO reordenar, NO fragmentar en varios archivos.
   Consolidación del Certification Gate: 64 declaraciones muertas
   eliminadas (mismo contexto + selector + propiedad, redeclaradas
   después: la cascada ya las ignoraba). Evidencia y foto previa
   en tests/. Verificación de sintaxis: tests/smoke-css.js.
   ============================================================ */

/* ============================================================
   VOR TRAINER · DESIGN SYSTEM OFICIAL (Consolidación RC7→DS1)
   ------------------------------------------------------------
   TODO el módulo consume EXCLUSIVAMENTE estos tokens. Ningún
   valor tipográfico, de espaciado, radio o color semántico
   puede declararse fuera de este bloque. Los sprints futuros
   amplían este bloque, nunca escriben constantes sueltas.

   TIPOGRAFÍA (jerarquía editorial · Inter)
     display 24/28 · h1 18 · h2 16 · h3 14 · body 13 · caption 11
   DATOS DE INSTRUMENTO (JetBrains Mono · no son jerarquía)
     data-s 13 · data 15 · data-m 20 · data-l 24 · score 40
   ESPACIADO   4 · 8 · 12 · 16 · 20 · 24 · 32
   RADIOS      xs 4 · s 10 · m 18 · l 26 · pill · círculo
   BOTONES     Primary (teal) · Secondary (borde) · Icon (círculo)
               + Control de instrumento (bug): variante sancionada
               de Secondary con radio m y datos mono.
   ============================================================ */
:root{
  --vt-fs-display:24px; --vt-fs-h1:18px; --vt-fs-h2:16px;
  --vt-fs-h3:14px; --vt-fs-body:13px; --vt-fs-caption:11px;
  --vt-fs-data-s:13px; --vt-fs-data:15px; --vt-fs-data-m:20px;
  --vt-fs-data-l:24px; --vt-fs-score:40px;
  --vt-sp-1:4px; --vt-sp-2:8px; --vt-sp-3:12px; --vt-sp-4:16px;
  --vt-sp-5:20px; --vt-sp-6:24px; --vt-sp-7:32px;
  --vt-r-xs:4px; --vt-r-s:10px; --vt-r-m:18px; --vt-r-l:26px;
  --vt-r-pill:100px;
  /* Semánticos (mismos valores de siempre: solo dejan de repetirse) */
  --vt-info-bg:#E6F1FB; --vt-info-fg:#0C447C;
  --vt-ok-bg:#DFF6F2;   --vt-ok-fg:#0F6E56;
  --vt-warn-bg:#FCF3E3; --vt-warn-fg:#7A3B06; --vt-warn:#B45309;
  /* Superficies del modo oscuro del módulo */
  --vt-dk-card:#132B4F; --vt-dk-inset:#0F2444; --vt-dk-ink:#E7EEF9;
}
@media (min-width:821px){ :root{ --vt-fs-display:28px; } }

/* ============================================================
   PILOT HUB · VOR TRAINER — ESTILOS DEL MÓDULO
   ------------------------------------------------------------
   No declara tokens. Consume los de styles.css de Pilot Hub
   (--navy, --teal, --sky, --ink, --muted, --line, --cloud,
   --r-md, --shadow-1, --font-ui, --font-mono). En F6 este
   archivo se concatena al final de styles.css sin cambios.

   Prefijo obligatorio .vt- en todo. Cero selectores de
   elemento sueltos: nada de aquí puede filtrarse a Ruta,
   W&B, FPL ni al resto de la app.
   ============================================================ */

/* ── CR-2 (forense RC2.1): protección global del atributo hidden ──
   Las reglas de display de autor derrotan a la [hidden] del
   navegador. Esta regla viaja con el módulo a cualquier build y
   garantiza que hidden SIEMPRE oculte. Verificada inocua para la
   app (su único hidden, #dashMilestone, usa semántica estándar). */
[hidden]{ display:none !important; }

/* ── Contenedor del módulo ───────────────────────────────── */
.vt{ padding-bottom: 8px; }
.vt-head{
  display:flex; align-items:center; gap:var(--vt-sp-2);
  margin-bottom:var(--vt-sp-3); min-height:44px;
}
.vt-back{
  width:44px; height:44px; flex:0 0 44px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--ink);
  border-radius:50%; cursor:pointer;
}
.vt-back:hover{ background:var(--cloud); }
.vt-back svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.vt-head h2{ font-size:var(--vt-fs-h1); font-weight:600; margin:0; letter-spacing:-.01em; }
.vt-head p{ margin:2px 0 0; font-size:var(--vt-fs-body); color:var(--muted); }

/* ── Home ─────────────────────────────────────────────────── */
.vt-hero{
  background:var(--grad-navy, linear-gradient(158deg,#0B3C91 0%,#08306F 55%,#061F52 100%));
  border-radius:var(--vt-r-l); padding:var(--vt-sp-6) var(--vt-sp-5); color:#fff; margin-bottom:var(--vt-sp-4);
}
.vt-hero h1{ font-size:var(--vt-fs-display); font-weight:600; margin:0 0 var(--vt-sp-1); letter-spacing:-.02em; }
.vt-hero p{ margin:0; font-size:var(--vt-fs-h3); opacity:.86; line-height:1.5; }
.vt-paths{ display:grid; grid-template-columns:1fr; gap:var(--vt-sp-2); }
.vt-path{
  display:flex; align-items:center; gap:var(--vt-sp-3); width:100%; text-align:left;
  background:var(--white,#fff); border:1px solid var(--line);
  border-radius:var(--vt-r-m); padding:var(--vt-sp-4) var(--vt-sp-4); cursor:pointer;
  font-family:var(--font-ui); color:var(--ink);
  transition:border-color 160ms linear, transform 160ms cubic-bezier(.22,.61,.36,1);
}
.vt-path:hover{ border-color:var(--sky); }
.vt-path:active{ transform:scale(.99); }
.vt-path[disabled]{ opacity:.5; cursor:default; }
.vt-path[disabled]:hover{ border-color:var(--line); }
.vt-path.is-featured{ border-color:var(--teal); border-width:2px; padding:var(--vt-sp-3) var(--vt-sp-4); }
.vt-path-ico{
  width:44px; height:44px; flex:0 0 44px; border-radius:var(--vt-r-s);
  background:var(--cloud); display:flex; align-items:center; justify-content:center;
}
.vt-path-ico svg{ width:22px; height:22px; fill:none; stroke:var(--navy);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.vt-path-tx{ flex:1; min-width:0; }
.vt-path-tx b{ display:block; font-size:var(--vt-fs-h3); font-weight:500; }
.vt-path-tx span{ display:block; font-size:var(--vt-fs-body); color:var(--muted); margin-top:2px; line-height:1.4; }
.vt-tag{
  font-size:var(--vt-fs-caption); font-family:var(--font-mono); letter-spacing:.04em;
  padding:var(--vt-sp-1) var(--vt-sp-2); border-radius:var(--vt-r-pill); background:var(--cloud); color:var(--muted);
}
.vt-tag.is-go{ background:var(--vt-ok-bg); color:var(--vt-ok-fg); }

/* ══════════════════════════════════════════════════════════
   SPRINT 2 · HOME COMO PLAN DE ENTRENAMIENTO
   Consume exclusivamente tokens DS1. Cero constantes nuevas.
   ══════════════════════════════════════════════════════════ */
.vt-head--slim{ margin-bottom:var(--vt-sp-1); min-height:44px; }

/* Héroe: nombre · frase · estado · una acción */
.vt-hero--home{ display:flex; flex-direction:column; gap:var(--vt-sp-2);
  animation:vtHeroIn 240ms cubic-bezier(.22,.61,.36,1); }
@keyframes vtHeroIn{ from{ opacity:0; transform:translateY(var(--vt-sp-2)); }
  to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .vt-hero--home{ animation:none; } }
.vt-hero-tagline{ margin:0; font-size:var(--vt-fs-h3); opacity:.86; line-height:1.5; }
.vt-hero-state{
  margin:0; font-size:var(--vt-fs-h2); font-weight:500; line-height:1.45;
  color:var(--teal);
}
.vt-hero-ready{ display:flex; gap:var(--vt-sp-2); align-items:center; }
.vt-hero-ready i{
  width:var(--vt-sp-3); height:var(--vt-sp-3); border-radius:50%;
  border:2px solid rgba(255,255,255,.35); display:inline-block;
}
.vt-hero-ready i.is-done{ background:var(--teal); border-color:var(--teal); }
.vt-hero-ready i.is-now{
  border-color:var(--teal);
  animation:vtTttPulse 1.6s ease-in-out infinite;
}
.vt-hero-ready i.is-open{ border-style:dashed; }
.vt-hero-cta{
  margin-top:var(--vt-sp-1); min-height:52px; justify-content:center;
  font-size:var(--vt-fs-h3); align-self:stretch;
}
@media (min-width:821px){ .vt-hero-cta{ align-self:flex-start; padding:0 var(--vt-sp-7); } }

/* Encabezado del plan */
.vt-plan-h{
  display:block; font-size:var(--vt-fs-caption); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin:var(--vt-sp-5) 0 var(--vt-sp-3) var(--vt-sp-1);
}

/* El plan: pasos unidos por un riel de waypoints */
.vt-journey{ display:flex; flex-direction:column; }
.vt-step{
  display:flex; align-items:stretch; gap:var(--vt-sp-3); width:100%;
  text-align:left; background:transparent; border:none; padding:0;
  cursor:pointer; font-family:var(--font-ui); color:var(--ink);
}
.vt-step-rail{
  flex:0 0 var(--vt-sp-6); display:flex; flex-direction:column;
  align-items:center; position:relative;
}
.vt-step-rail::before{
  content:''; position:absolute; top:0; bottom:0; width:2px;
  background:var(--line);
}
.vt-step:first-child .vt-step-rail::before{ top:var(--vt-sp-5); }
.vt-step:last-child .vt-step-rail::before{ bottom:auto; height:var(--vt-sp-5); }
.vt-step.is-done .vt-step-rail::before{ background:var(--teal); }
.vt-step-node{
  position:relative; z-index:1; margin-top:var(--vt-sp-4);
  width:var(--vt-sp-6); height:var(--vt-sp-6); border-radius:50%;
  background:var(--white,#fff); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-style:normal; font-family:var(--font-mono);
  font-size:var(--vt-fs-body); color:var(--muted);
}
html[data-theme="dark"] .vt-step-node{ background:var(--vt-dk-card); }
.vt-step.is-current .vt-step-node{
  border-color:var(--teal); color:var(--ink);
  animation:vtTttPulse 1.6s ease-in-out infinite;
}
html[data-theme="dark"] .vt-step.is-current .vt-step-node{ color:var(--vt-dk-ink); }
.vt-step.is-done .vt-step-node{ background:var(--teal); border-color:var(--teal); }
.vt-step-node.is-check::after{
  content:''; width:var(--vt-sp-2); height:var(--vt-sp-1);
  border-left:2px solid #04342C; border-bottom:2px solid #04342C;
  transform:rotate(-45deg) translate(1px,-1px);
}
.vt-step-body{
  flex:1; min-width:0; background:var(--white,#fff);
  border:1px solid var(--line); border-radius:var(--vt-r-m);
  padding:var(--vt-sp-3) var(--vt-sp-4); margin-bottom:var(--vt-sp-2);
  display:flex; flex-direction:column; gap:var(--vt-sp-1);
  transition:border-color 160ms linear, transform 160ms cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"] .vt-step-body{ background:var(--vt-dk-card); }
.vt-step:hover .vt-step-body{ border-color:var(--sky); }
.vt-step:active .vt-step-body{ transform:scale(.99); }
.vt-step:focus-visible .vt-step-body{ outline:2px solid var(--sky); outline-offset:2px; }
.vt-step.is-current .vt-step-body{ border-color:var(--teal); border-width:2px; }
.vt-step.is-done .vt-step-body{ opacity:.88; }
.vt-step-eyebrow{
  font-style:normal; font-size:var(--vt-fs-caption); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.vt-step.is-current .vt-step-eyebrow{ color:var(--vt-ok-fg); }
.vt-step-body > b{ font-size:var(--vt-fs-h3); font-weight:500; }
.vt-step-body > span{ font-size:var(--vt-fs-body); color:var(--muted); line-height:1.4; }
.vt-step-body > small{
  font-size:var(--vt-fs-caption); color:var(--muted); line-height:1.4;
}
.vt-step .vt-tag{ align-self:center; flex:0 0 auto; margin-top:var(--vt-sp-4); }

/* Progreso como segmentos, no como números */
.vt-step-prog{ display:flex; gap:var(--vt-sp-1); margin-top:var(--vt-sp-1); }
.vt-step-prog i{
  flex:1; max-width:var(--vt-sp-5); height:var(--vt-sp-1);
  border-radius:var(--vt-r-xs); background:var(--line); display:block;
}
.vt-step-prog i.is-full{ background:var(--teal); }
.vt-step-prog.is-passed i.is-full{ background:var(--teal); }
@media (min-width:821px){
  .vt-journey{ max-width:640px; }
}

/* ── Navigation Lab · disposición ────────────────────────── */
.vt-free{ display:flex; flex-direction:column; gap:var(--vt-sp-3); position:relative; }
.vt-map-col{ display:flex; flex-direction:column; gap:var(--vt-sp-2); }

/* ── RC6 · Dos modos mentales, dos pantallas ─────────────────
   FLY: mapa + instrumento + bugs + Volar. Nada más.
   REVIEW: timeline + panel de debrief. Sin controles de vuelo. */
.vt-free:not(.is-review) .vt-nl{ display:none; }
.vt-free:not(.is-review) .vt-panel{ display:none; }
.vt-free.is-review .vt-bugbar,
.vt-free.is-review .vt-flyrow,
.vt-free.is-review .vt-tools-sheet,
.vt-free.is-review .vt-instructor{ display:none; }

/* ── RC6 · MODO PAUSE: panel sereno, no un modal agresivo ── */
.vt-pause{
  position:absolute; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  background:rgba(244,248,253,.82);
  animation:vtPauseIn 200ms ease-out;
  border-radius:var(--vt-r-m);
}
html[data-theme="dark"] .vt-pause{ background:rgba(6,16,34,.82); }
@keyframes vtPauseIn{ from{ opacity:0; } to{ opacity:1; } }
.vt-pause-card{
  width:min(320px, 88%);
  background:var(--white,#fff); border-radius:var(--vt-r-l);
  box-shadow:var(--shadow-1); padding:var(--vt-sp-5) var(--vt-sp-5);
  display:flex; flex-direction:column; gap:var(--vt-sp-2);
}
html[data-theme="dark"] .vt-pause-card{ background:var(--vt-dk-card); }
.vt-pause-card > b{
  font-size:var(--vt-fs-h2); font-weight:600; text-align:center;
  color:var(--ink); margin-bottom:var(--vt-sp-1);
}
html[data-theme="dark"] .vt-pause-card > b{ color:var(--vt-dk-ink); }
.vt-pause-card .vt-btn{ min-height:50px; justify-content:center; }
@media (prefers-reduced-motion:reduce){ .vt-pause{ animation:none; } }
.vt-card{
  background:var(--white,#fff); border-radius:var(--vt-r-m);
  box-shadow:var(--shadow-1); padding:var(--vt-sp-3);
}
.vt-card.is-dark{ background:var(--navy); padding:var(--vt-sp-2); }
.vt-pane{ width:100%; display:block; touch-action:none; }
/* RC4.1: el mapa manda; el instrumento es referencia. */
.vt-map{ padding:var(--vt-sp-2); }
.vt-map .vt-pane{ max-height:52vh; margin:0 auto; }
.vt-inst{ padding:var(--vt-sp-2); }
.vt-inst .vt-pane{ max-width:240px; margin:0 auto; }
.vt-metric.is-dup{ display:none; }

/* ── RC5 · Zona de vuelo tipo cabina ─────────────────────── */
.vt-controls{ display:flex; flex-direction:column; gap:var(--vt-sp-3);  }
.vt-controls .vt-row{ margin-top:0; }
.vt-btn .vt-tag{ margin-left:var(--vt-sp-1); padding:2px var(--vt-sp-2); font-size:var(--vt-fs-caption); }
.vt-btn:disabled{ opacity:.5; cursor:default; }

/* Bugs de rumbo y curso: grandes, de pulgar, con repetición. */
.vt-bugbar{ display:grid; grid-template-columns:1fr 1fr; gap:var(--vt-sp-2); }
.vt-bug{ display:flex; flex-direction:column; gap:var(--vt-sp-1); }
.vt-bug > b{
  font-size:var(--vt-fs-caption); font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); text-align:center;
}
.vt-bug-row{
  display:grid; grid-template-columns:56px 1fr 56px; gap:var(--vt-sp-1); align-items:stretch;
}
.vt-bug-row button{
  min-height:56px; border:1px solid var(--line); border-radius:var(--vt-r-m);
  background:var(--white,#fff); color:var(--navy); font-size:var(--vt-fs-h1); cursor:pointer;
  touch-action:none; user-select:none; -webkit-user-select:none;
  transition:background 120ms linear, transform 100ms;
}
.vt-bug-row button:active{ background:var(--cloud); transform:scale(.96); }
.vt-bug-row button:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
.vt-bug-row output{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:var(--vt-fs-data-l); font-weight:500;
  color:var(--navy); background:var(--cloud); border-radius:var(--vt-r-m);
  min-width:0;
}
html[data-theme="dark"] .vt-bug-row button{ background:var(--vt-dk-card); color:var(--vt-dk-ink); }
html[data-theme="dark"] .vt-bug-row output{ background:var(--vt-dk-inset); color:var(--teal); }

/* Fila de vuelo: Volar + tiempo + acceso a herramientas */
.vt-flyrow{ display:flex; gap:var(--vt-sp-2); align-items:center; }
.vt-fly{ flex:1; min-height:52px; font-size:var(--vt-fs-h3); }
.vt-tools-btn{ margin-left:auto; gap:var(--vt-sp-2); }
.vt-tools-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.vt-tools-sheet{
  border-top:1px solid var(--line); padding-top:12px;
  display:flex; flex-direction:column; gap:var(--vt-sp-2);
}

/* Botón discreto de Flight Review en la timeline */
.vt-nl-revbtn{ margin-left:auto; padding:0 var(--vt-sp-2); }
.vt-nl-revbtn svg{ width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Panel lateral Flight Review (RC4.1) */
.vt-nl-rev-head{ display:flex; align-items:center; justify-content:space-between; }
.vt-nl-rev-head h3{ margin:0; font-size:var(--vt-fs-h2); font-weight:600; letter-spacing:-.01em; }
.vt-nl-rev-h{
  display:block; font-size:var(--vt-fs-caption); font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-top:var(--vt-sp-1);
}
.vt-nl-errlist{ display:flex; flex-direction:column; gap:var(--vt-sp-1); }
.vt-nl-err{
  display:flex; align-items:center; gap:var(--vt-sp-2); width:100%; text-align:left;
  border:none; background:transparent; padding:var(--vt-sp-2) var(--vt-sp-2); border-radius:var(--vt-r-s);
  font-family:var(--font-ui); font-size:var(--vt-fs-body); color:var(--ink); cursor:pointer;
}
.vt-nl-err:hover{ background:var(--cloud); }
html[data-theme="dark"] .vt-nl-err{ color:var(--vt-dk-ink); }
html[data-theme="dark"] .vt-nl-err:hover{ background:var(--vt-dk-inset); }
.vt-nl-err i{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.vt-nl-err em{ font-style:normal; font-family:var(--font-mono); font-size:var(--vt-fs-body);
  color:var(--muted); margin-left:auto; }

/* ── Navigation Lab · timeline y playback (RC4) ──────────── */
.vt-nl{
  background:var(--white,#fff); border-radius:var(--vt-r-m);
  box-shadow:var(--shadow-1); padding:var(--vt-sp-2) var(--vt-sp-3);
  display:flex; flex-direction:column; gap:var(--vt-sp-2);
}
html[data-theme="dark"] .vt-nl{ background:var(--vt-dk-card); }
.vt-nl-track{ position:relative; padding-top:10px; }
.vt-nl-ticks{ position:absolute; inset:0 12px auto 12px; height:10px; pointer-events:none; }
.vt-nl-ticks span{
  position:absolute; top:0;   border-radius:var(--vt-r-xs);
  transform:translateX(-50%);
}
.vt-nl-slider{ width:100%; }
.vt-nl-slider:disabled{ opacity:.45; }
.vt-nl-times{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono); font-size:var(--vt-fs-caption); color:var(--muted);
}
.vt-nl-times b{ font-weight:500; font-size:var(--vt-fs-body); color:var(--navy); }
html[data-theme="dark"] .vt-nl-times b{ color:var(--teal); }
.vt-nl-controls{ display:flex; flex-wrap:wrap; gap:var(--vt-sp-1); align-items:center; }
.vt-nl-controls .vt-btn{ min-height:38px; padding:0 var(--vt-sp-3); font-size:var(--vt-fs-body); }
.vt-nl-controls .vt-row-label{ flex:0 0 auto; margin-right:2px; }
/* RC4.1: el Flight Review es un panel de debrief, no un bloque
   dentro de la timeline. En móvil fluye tras el mapa; en
   escritorio es una vista lateral fija, tipo ForeFlight Debrief. */
.vt-nl-stats{
  background:var(--white,#fff); border-radius:var(--vt-r-m);
  box-shadow:var(--shadow-1); padding:var(--vt-sp-4);
  display:flex; flex-direction:column; gap:var(--vt-sp-2);
}
html[data-theme="dark"] .vt-nl-stats{ background:var(--vt-dk-card); }
@media (min-width:821px){
  .vt-nl-stats{
    position:fixed; top:0; right:0; bottom:0; width:360px;
    border-radius:0; z-index:60; overflow:auto;
    box-shadow:-8px 0 30px rgba(11,60,145,.14);
    padding:var(--vt-sp-5) var(--vt-sp-4) calc(var(--vt-sp-5) + env(safe-area-inset-bottom));
  }
}
.vt-nl-grid{ grid-template-columns:repeat(2,1fr); row-gap:var(--vt-sp-2); }
/* Timeline: scrub agradable (RC4.1) */
.vt-nl-slider{ height:6px; }
.vt-nl-slider::-webkit-slider-thumb{ width:26px; height:26px; }
.vt-nl-ticks span{ width:5px; height:10px; }
.vt-nl-legend{ display:flex; flex-wrap:wrap; gap:var(--vt-sp-2); margin-top:var(--vt-sp-2); }
.vt-nl-legend span{
  display:inline-flex; align-items:center; gap:var(--vt-sp-1);
  font-size:var(--vt-fs-body); color:var(--ink);
}
html[data-theme="dark"] .vt-nl-legend span{ color:var(--vt-dk-ink); }
.vt-nl-legend i{ width:11px; height:11px; border-radius:50%; display:inline-block; }

/* ── Franja del instructor · altura reservada ─────────────── */
.vt-instructor{
  min-height:62px; display:flex; align-items:center; gap:var(--vt-sp-3);
  background:var(--vt-info-bg); color:var(--vt-info-fg); border-radius:var(--vt-r-m);
  padding:var(--vt-sp-3) var(--vt-sp-3); font-size:var(--vt-fs-h3); line-height:1.45;
  opacity:0; transform:translateY(8px);
  transition:opacity 200ms linear, transform 200ms cubic-bezier(.22,.61,.36,1);
}
.vt-instructor.is-on{ opacity:1; transform:none; }
.vt-instructor.is-alert{ background:var(--vt-warn-bg); color:var(--vt-warn-fg); }
.vt-instructor-ico{ flex:0 0 20px; }
.vt-instructor-ico svg{ width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.vt-instructor-x{
  margin-left:auto; flex:0 0 32px; width:32px; height:32px; border:none;
  background:transparent; color:inherit; opacity:.55; cursor:pointer; border-radius:50%;
}
.vt-instructor-x:hover{ opacity:1; background:rgba(11,60,145,.07); }

/* ── Smart Information Panel ─────────────────────────────── */
.vt-panel{ display:flex; flex-direction:column; gap:var(--vt-sp-2); }
.vt-metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--vt-sp-2); }
.vt-metric{
  background:var(--white,#fff); border-radius:var(--vt-r-s);
  box-shadow:var(--shadow-1); padding:var(--vt-sp-2) var(--vt-sp-2); min-width:0;
}
.vt-metric b{ display:block; font-size:var(--vt-fs-caption); font-weight:400; color:var(--muted);
  letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vt-metric i{ display:block; font-style:normal; font-family:var(--font-mono);
  font-size:var(--vt-fs-data-m); font-weight:500; color:var(--ink); margin-top:3px; }
.vt-metric i small{ font-size:var(--vt-fs-body); color:var(--muted); margin-left:3px; }
.vt-chips{ display:flex; flex-wrap:wrap; gap:var(--vt-sp-2); }
.vt-chip{
  display:inline-flex; align-items:center; gap:var(--vt-sp-2);
  background:var(--white,#fff); border-radius:var(--vt-r-pill); box-shadow:var(--shadow-1);
  padding:var(--vt-sp-1) var(--vt-sp-3); font-size:var(--vt-fs-body); color:var(--muted);
}
.vt-chip em{ font-style:normal; font-family:var(--font-mono); color:var(--ink); }
.vt-chip.is-live em{ color:var(--navy); }
.vt-chip.is-warn{ background:var(--vt-warn-bg); color:var(--vt-warn-fg); }
.vt-chip.is-warn em{ color:var(--vt-warn-fg); }
.vt-situation{
  font-size:var(--vt-fs-h3); line-height:1.55; color:var(--ink);
  background:var(--cloud); border-radius:var(--vt-r-m); padding:var(--vt-sp-3) var(--vt-sp-3);
}
.vt-situation strong{ font-weight:500; font-family:var(--font-mono); }

/* ── Controles ───────────────────────────────────────────── */
.vt-controls{
  background:var(--white,#fff); border-radius:var(--vt-r-m);
  box-shadow:var(--shadow-1); padding:var(--vt-sp-3);
}
.vt-dials{ display:flex; align-items:center; gap:var(--vt-sp-4); }
.vt-dial{ text-align:center; flex:0 0 auto; }
.vt-dial > svg{ width:96px; height:96px; display:block; }
.vt-dial b{ display:block; font-size:var(--vt-fs-caption); color:var(--muted); font-weight:400; margin-top:2px; }
.vt-stepper{ flex:1; min-width:0; }
.vt-stepper-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--vt-sp-2); }
.vt-stepper-top b{ font-size:var(--vt-fs-caption); color:var(--muted); font-weight:400; }
.vt-stepper-top i{ font-style:normal; font-family:var(--font-mono); font-size:var(--vt-fs-data-l);
  font-weight:500; color:var(--navy); }
.vt-stepper-btns{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--vt-sp-1); }
.vt-btn{
  min-height:44px; padding:0 var(--vt-sp-3); border-radius:var(--vt-r-pill);
  border:1px solid var(--line); background:var(--white,#fff); color:var(--ink);
  font-family:var(--font-ui); font-size:var(--vt-fs-body); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--vt-sp-1);
  transition:background 140ms linear, border-color 140ms linear, transform 120ms;
}
.vt-btn:hover{ background:var(--cloud); }
.vt-btn:active{ transform:scale(.97); }
.vt-btn.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.vt-btn.is-primary{ background:var(--teal); border-color:var(--teal);
  color:#04342C; font-weight:500; }
.vt-btn.is-mono{ font-family:var(--font-mono); }
.vt-btn:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
.vt-row{ display:flex; flex-wrap:wrap; gap:var(--vt-sp-2); align-items:center; margin-top:var(--vt-sp-3); }
.vt-row-label{ font-size:var(--vt-fs-caption); color:var(--muted); flex:0 0 100%; }
.vt-slider{ display:flex; align-items:center; gap:var(--vt-sp-3); margin-top:var(--vt-sp-3); }
.vt-slider label{ font-size:var(--vt-fs-body); color:var(--muted); flex:0 0 78px; }
.vt-slider output{ font-family:var(--font-mono); font-size:var(--vt-fs-body); color:var(--navy);
  flex:0 0 58px; text-align:right; }
.vt-range{
  flex:1; min-width:0; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:var(--vt-r-xs); background:var(--line); outline:none;
}
.vt-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--navy); border:3px solid var(--white,#fff); box-shadow:var(--shadow-1);
}
.vt-range::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; border:3px solid #fff;
  background:var(--navy); box-shadow:var(--shadow-1);
}
.vt-range:focus-visible{ outline:2px solid var(--sky); outline-offset:4px; }
.vt-more{ margin-top:var(--vt-sp-2); }
.vt-note{  font-size:var(--vt-fs-body); color:var(--muted); line-height:1.5; }

/* ── Barra TTT ───────────────────────────────────────────── */
.vt-ttt{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--vt-sp-1); min-height:44px; }
.vt-ttt-seg{
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px; padding:var(--vt-sp-1) var(--vt-sp-1);
  border:1.5px solid var(--line); border-radius:var(--vt-r-s);
  color:var(--muted); overflow:hidden;
  transition:border-color 200ms linear, background 220ms linear, color 200ms linear;
}
.vt-ttt-seg b{ font-size:var(--vt-fs-body); font-weight:500; letter-spacing:.02em; }
.vt-ttt-seg span{ font-size:var(--vt-fs-caption); opacity:.85; }
.vt-ttt-check{ display:none; width:14px; height:14px; position:absolute; top:4px; right:5px; }
.vt-ttt-check path{ fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; }
.vt-ttt-seg.is-active{ border-color:var(--teal); color:var(--ink); animation:vtTttPulse 1.6s ease-in-out infinite; }
.vt-ttt-seg.is-done{ background:var(--vt-ok-bg); border-color:var(--vt-ok-bg); color:var(--vt-ok-fg); }
.vt-ttt-seg.is-done .vt-ttt-check{ display:block; }
.vt-ttt-seg.is-wrong{ border-color:var(--vt-warn); color:var(--vt-warn-fg); background:var(--vt-warn-bg); }
@keyframes vtTttPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(61,217,197,0);} 50%{ box-shadow:0 0 0 4px rgba(61,217,197,.18);} }

/* ── Índice de lecciones ─────────────────────────────────── */
.vt-ls-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--vt-sp-3); }
.vt-ls-top b{ font-size:var(--vt-fs-body); font-weight:400; color:var(--muted); }
.vt-ls-list{ display:flex; flex-direction:column; gap:var(--vt-sp-2); }
.vt-ls-row{
  display:flex; align-items:center; gap:var(--vt-sp-3); width:100%; text-align:left;
  background:var(--white,#fff); border:1px solid var(--line);
  border-radius:var(--vt-r-m); padding:var(--vt-sp-3) var(--vt-sp-3); cursor:pointer;
  font-family:var(--font-ui); color:var(--ink); min-height:60px;
  transition:border-color 160ms linear;
}
.vt-ls-row:hover{ border-color:var(--sky); }
.vt-ls-num{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  border:1.5px solid var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:var(--vt-fs-h3);
}
.vt-ls-row.is-next .vt-ls-num{ background:var(--teal); border-color:var(--teal); color:#04342C; }
.vt-ls-row.is-next{ border-color:var(--teal); border-width:2px; padding:var(--vt-sp-3) var(--vt-sp-3); }
.vt-ls-row.is-done .vt-ls-num{ background:var(--vt-ok-bg); border-color:var(--vt-ok-bg); color:var(--vt-ok-fg); }
.vt-ls-num svg{ width:17px; height:17px; }
.vt-ls-num svg path{ fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; }
.vt-ls-tx b{ display:block; font-size:var(--vt-fs-h3); font-weight:500; }
.vt-ls-tx span{ display:block; font-size:var(--vt-fs-body); color:var(--muted); margin-top:1px; }
.vt-ls-cta{ margin-top:var(--vt-sp-3); width:100%; }
.vt-ls-donecard{
  display:flex; align-items:center; justify-content:space-between; gap:var(--vt-sp-3);
  background:var(--vt-ok-bg); color:var(--vt-ok-fg); border-radius:var(--vt-r-m);
  padding:var(--vt-sp-3) var(--vt-sp-4); font-size:var(--vt-fs-h3); margin-bottom:var(--vt-sp-3);
}

/* ── Reproductor de lección ──────────────────────────────── */
.vt-pl{ position:relative; }
.vt-pl-prog{ display:flex; gap:var(--vt-sp-1); margin-bottom:var(--vt-sp-2); }
.vt-pl-prog span{ flex:1; height:3px; border-radius:var(--vt-r-xs); background:var(--line); }
.vt-pl-prog span.is-done{ background:var(--teal); }
.vt-pl-prog span.is-live{ background:var(--sky); }
.vt-pl-head{ display:flex; align-items:center; gap:var(--vt-sp-2); margin-bottom:var(--vt-sp-2); }
.vt-pl-head h3{ flex:1; margin:0; font-size:var(--vt-fs-h2); font-weight:500; }
.vt-pl-stage{ position:relative; display:flex; flex-direction:column; gap:var(--vt-sp-2); }
.vt-pl-badge{
  position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3;
  background:var(--navy); color:#fff; font-family:var(--font-mono); font-size:var(--vt-fs-body);
  border-radius:var(--vt-r-pill); padding:var(--vt-sp-1) var(--vt-sp-3); box-shadow:var(--shadow-1); white-space:nowrap;
}
.vt-pl-say{
  min-height:56px; display:flex; align-items:center;
  background:var(--vt-info-bg); color:var(--vt-info-fg); border-radius:var(--vt-r-m);
  padding:var(--vt-sp-3) var(--vt-sp-4); font-size:var(--vt-fs-h3); line-height:1.45; font-weight:500;
}
.vt-pl-taphint{ text-align:center; font-size:var(--vt-fs-caption); color:var(--muted); padding:2px 0; }
.vt-pl-btnrow{ display:flex; justify-content:center; }
.vt-pl-choices{ display:flex; flex-direction:column; gap:var(--vt-sp-2); }
.vt-pl-choices .vt-btn{ justify-content:flex-start; text-align:left; }
.vt-btn.is-wrong{ border-color:var(--vt-warn); background:var(--vt-warn-bg); color:var(--vt-warn-fg); }
.vt-pl-zones{ position:absolute; inset:0; z-index:1; display:flex; pointer-events:none; }
/* Auditoría A2: en pasos de narración las zonas SUBEN por encima
   de las tarjetas — "toca para continuar" responde en toda la
   pantalla, exactamente donde el usuario espera tocar. */
.vt-pl-stage.is-tapmode .vt-pl-zones{ z-index:4 !important; }
.vt-pl-zones button{
  flex:1; border:none; background:transparent; pointer-events:auto; cursor:pointer;
}
.vt-pl-zones button:last-child{ flex:1.4; }
.vt-pl-stage > *{ position:relative; z-index:2; }
.vt-pl-stage .vt-card{ pointer-events:auto; }
.vt-pl-end{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--vt-sp-3);
   border-radius:var(--vt-r-m);
}
.vt-pl-dialwrap{ display:flex; flex-direction:column; align-items:center; gap:var(--vt-sp-2); }
.vt-pl-dialwrap svg{ width:96px; height:96px; }
/* Auditoría H3: alternativa no gestual al rumbo */
.vt-hdg-steps{ display:grid; grid-template-columns:repeat(4,minmax(52px,1fr)); gap:var(--vt-sp-1); margin-top:var(--vt-sp-2); }
/* Auditoría F1: instrumento con OBS bloqueado (ítems de lectura) */
.vt-inst.is-locked .vt-pane{ cursor:default; }

/* ══════════════════════════════════════════════════════════
   SPRINT 3 · CUATRO LAYOUTS OFICIALES DE LECCIÓN
   La categoría dirige la mirada: cada lección enseña con el
   elemento correcto en el lugar dominante. Mobile-first.
   A concepto — el texto enseña; el lienzo ilustra en calma.
   B instrumento — el CDI domina; el mapa es un espejo pequeño.
   C mapa — la navegación domina; el instrumento acompaña.
   D procedimiento — mapa e instrumento trabajan a la par.
   ══════════════════════════════════════════════════════════ */

/* A · Concepto: la voz del instructor primero, arriba y grande */
.vt-pl-stage.is-cat-a .vt-pl-say{ order:-1; font-size:var(--vt-fs-h2); }
.vt-pl-stage.is-cat-a .vt-map .vt-pane{ max-height:34vh; }
.vt-pl-stage.is-cat-a .vt-pl-taphint{ order:-1; }

/* B · Instrumento: el CDI es el protagonista absoluto */
.vt-pl-stage.is-cat-b .vt-inst{ order:-2; }
.vt-pl-stage.is-cat-b .vt-inst .vt-pane{ max-width:min(340px, 88vw); }

/* C · Mapa: la trayectoria manda; el instrumento es referencia */
.vt-pl-stage.is-cat-c .vt-map .vt-pane{ max-height:48vh; }

/* D · Procedimiento: equilibrio deliberado (mapa+inst+TTT) */
.vt-pl-stage.is-cat-d .vt-map .vt-pane{ max-height:36vh; }
.vt-pl-stage.is-cat-d .vt-inst .vt-pane{ max-width:250px; }

@media (min-width:821px){
  .vt-pl-stage{ display:grid; 
    grid-auto-rows:min-content; align-items:start; }
  .vt-pl-stage .vt-pl-say, .vt-pl-stage .vt-pl-choices,
  .vt-pl-stage .vt-pl-btnrow, .vt-pl-stage .vt-pl-taphint,
  .vt-pl-stage .vt-ttt{ grid-column:1 / -1; }
  /* B en escritorio: instrumento centrado, sin columna fantasma
     (RC7: L4/L5 flotaban descentradas cuando no había mapa) */
  .vt-pl-stage.is-cat-b{ display:flex; flex-direction:column; align-items:center; }
  .vt-pl-stage.is-cat-b > *{ width:100%; max-width:560px; }
  .vt-pl-stage.is-cat-b .vt-inst .vt-pane{ max-width:380px; }
  .vt-pl-stage.is-cat-b .vt-map{ max-width:420px; }
  /* A en escritorio: una columna de lectura */
  .vt-pl-stage.is-cat-a{ display:flex; flex-direction:column; align-items:center; }
  .vt-pl-stage.is-cat-a > *{ width:100%; max-width:640px; }
  /* C en escritorio: mapa enorme a la izquierda, inst pequeño */
  .vt-pl-stage.is-cat-c{ grid-template-columns:minmax(0,1.6fr) minmax(0,240px); }
}

/* ── Ejercicio (Learning Mode) ───────────────────────────── */
.vt-ex{ position:relative; display:flex; flex-direction:column; gap:var(--vt-sp-2); }
.vt-ex-task{
  margin:0; background:var(--cloud); border-radius:var(--vt-r-m);
  padding:var(--vt-sp-3) var(--vt-sp-4); font-size:var(--vt-fs-h3); font-weight:500; line-height:1.45;
  color:var(--ink);
}
.vt-ex-debrief{
  position:absolute; inset:0; z-index:6; display:flex;
  align-items:flex-start; justify-content:center; padding-top:8vh;
  background:rgba(244,248,253,.94); border-radius:var(--vt-r-m);
}
html[data-theme="dark"] .vt-ex-debrief{ background:rgba(6,16,34,.94); }
.vt-db-card{
  width:min(420px, 92%); background:var(--white,#fff);
  border-radius:var(--vt-r-l); box-shadow:var(--shadow-1); padding:var(--vt-sp-5);
  display:flex; flex-direction:column; gap:var(--vt-sp-3);
}
html[data-theme="dark"] .vt-db-card{ background:var(--vt-dk-card); }
.vt-db-verdict{ font-size:var(--vt-fs-h1); font-weight:600; letter-spacing:-.01em; }
.vt-db-verdict.is-pass{ color:var(--vt-ok-fg); }
.vt-db-verdict.is-review{ color:var(--vt-warn-fg); }
.vt-db-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--vt-sp-2); }
.vt-db-grid b{ display:block; font-size:var(--vt-fs-caption); font-weight:400; color:var(--muted); }
.vt-db-grid i{ display:block; font-style:normal; font-family:var(--font-mono);
  font-size:var(--vt-fs-data); margin-top:2px; color:var(--ink); }
html[data-theme="dark"] .vt-db-grid i{ color:var(--vt-dk-ink); }
.vt-db-notes{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:var(--vt-sp-1); }
.vt-db-notes li{ font-size:var(--vt-fs-body); line-height:1.5; color:var(--ink); }
html[data-theme="dark"] .vt-db-notes li{ color:var(--vt-dk-ink); }
.vt-db-btns{ display:flex; flex-direction:column; gap:var(--vt-sp-2); }

@media (min-width:821px){
  .vt-ex{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px);
    grid-auto-rows:min-content; align-items:start; gap:var(--vt-sp-3); }
  .vt-ex-task, .vt-ex .vt-ttt, .vt-ex .vt-pl-choices{ grid-column:1 / -1; }
  .vt-ex-debrief{ align-items:center; padding-top:0; }
}

/* ── Exam Mode ───────────────────────────────────────────── */
.vt-xm-intro{
  background:var(--white,#fff); border-radius:var(--vt-r-l);
  box-shadow:var(--shadow-1); padding:var(--vt-sp-6) var(--vt-sp-5);
  display:flex; flex-direction:column; gap:var(--vt-sp-3); max-width:440px;
}
html[data-theme="dark"] .vt-xm-intro{ background:var(--vt-dk-card); }
.vt-xm-intro p{ margin:0; font-size:var(--vt-fs-h3); line-height:1.55; color:var(--ink); }
html[data-theme="dark"] .vt-xm-intro p{ color:var(--vt-dk-ink); }
.vt-xm-best{ font-family:var(--font-mono); color:var(--navy) !important; }
html[data-theme="dark"] .vt-xm-best{ color:var(--teal) !important; }
.vt-xr{ display:flex; flex-direction:column; gap:var(--vt-sp-4); max-width:520px; }
.vt-xr-score{
  background:var(--white,#fff); border-radius:var(--vt-r-l);
  box-shadow:var(--shadow-1); padding:var(--vt-sp-6);
  display:flex; flex-direction:column; align-items:center; gap:var(--vt-sp-1);
}
html[data-theme="dark"] .vt-xr-score{ background:var(--vt-dk-card); }
.vt-xr-score i{ font-style:normal; font-family:var(--font-mono);
  font-size:var(--vt-fs-score); font-weight:500; color:var(--ink); letter-spacing:-.02em; }
html[data-theme="dark"] .vt-xr-score i{ color:var(--vt-dk-ink); }
.vt-xr-score em{ font-style:normal; font-size:var(--vt-fs-body); color:var(--muted); min-height:18px; }
.vt-xr-h{ margin:var(--vt-sp-1) 0 0; font-size:var(--vt-fs-h3); font-weight:500; color:var(--ink); }
html[data-theme="dark"] .vt-xr-h{ color:var(--vt-dk-ink); }
.vt-xr-crow{ display:flex; align-items:center; gap:var(--vt-sp-2); margin-bottom:var(--vt-sp-2); }
.vt-xr-crow b{ flex:0 0 96px; font-size:var(--vt-fs-body); font-weight:400; color:var(--muted); }
.vt-xr-bar{ flex:1; height:8px; border-radius:var(--vt-r-xs); background:var(--line); overflow:hidden; }
.vt-xr-bar i{ display:block; height:100%; border-radius:var(--vt-r-xs); transition:width 500ms cubic-bezier(.22,.61,.36,1); }
.vt-xr-bar i.is-ok{ background:var(--teal); }
.vt-xr-bar i.is-low{ background:var(--vt-warn); }
.vt-xr-crow em{ font-style:normal; font-family:var(--font-mono); font-size:var(--vt-fs-body);
  flex:0 0 44px; text-align:right; color:var(--ink); }
html[data-theme="dark"] .vt-xr-crow em{ color:var(--vt-dk-ink); }
@media (prefers-reduced-motion:reduce){ .vt-xr-bar i{ transition:none; } }

/* ── Tablet ──────────────────────────────────────────────── */
@media (min-width:431px){
  .vt-inst .vt-pane{ max-width:344px; }
  .vt-map .vt-pane{ max-height:42vh; }
  .vt-metric i{ font-size:var(--vt-fs-data-m); }
}

/* ── Escritorio e iPad horizontal ────────────────────────── */
@media (min-width:821px){
  .vt-free{
    display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,340px);
    
    align-items:start; gap:var(--vt-sp-3);
  }
  .vt-map-col{ grid-area:mapcol; }
  .vt-inst{ grid-area:inst; }
  .vt-instructor{ grid-area:instructor; }
  .vt-panel{ grid-area:panel; }
  .vt-controls{ grid-area:ctl; }
  .vt-map .vt-pane{ max-height:none; }
  .vt-inst .vt-pane{ max-width:300px; }
  .vt-paths{ grid-template-columns:1fr 1fr; }
  .vt-hero{ padding:var(--vt-sp-7) var(--vt-sp-7); }
  .vt-hero h1{ font-size:var(--vt-fs-display); }
}

/* ── Teléfono horizontal: la altura es el recurso escaso ─── */
@media (max-height:520px) and (orientation:landscape){
  .vt-free{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px);
    grid-template-areas:"mapcol inst" "ctl panel"; gap:var(--vt-sp-2);
  }
  .vt-map-col{ grid-area:mapcol; } .vt-inst{ grid-area:inst; }
  .vt-panel{ grid-area:panel; } .vt-controls{ grid-area:ctl; }
  .vt-map .vt-pane{ max-height:52vh; }
  .vt-inst .vt-pane{ max-width:230px; }
  .vt-instructor{
    position:sticky; bottom:8px; grid-column:1 / -1; min-height:50px;
  }
  .vt-hero{ padding:var(--vt-sp-4); }
}

/* ── Modo oscuro ─────────────────────────────────────────── */
html[data-theme="dark"] .vt-card,
html[data-theme="dark"] .vt-metric,
html[data-theme="dark"] .vt-chip,
html[data-theme="dark"] .vt-controls,
html[data-theme="dark"] .vt-path{ background:var(--vt-dk-card); }
html[data-theme="dark"] .vt-card.is-dark{ background:#0A1E3C; }
html[data-theme="dark"] .vt-situation{ background:var(--vt-dk-inset); }
html[data-theme="dark"] .vt-instructor{ background:#123153; color:#BBD9F5; }
html[data-theme="dark"] .vt-instructor.is-alert{ background:#3A2A0E; color:#F0C87A; }
html[data-theme="dark"] .vt-btn{ background:var(--vt-dk-card); color:var(--vt-dk-ink); }
html[data-theme="dark"] .vt-path-ico{ background:var(--vt-dk-inset); }
html[data-theme="dark"] .vt-path-ico svg{ stroke:var(--teal); }

/* ══════════════════════════════════════════════════════════
   VCP-1 · LENGUAJE DE COMPOSICIÓN "ESCENA PH"
   ------------------------------------------------------------
   Cuatro bloques por pantalla: HEADER (silencioso) → ESCENA
   (lienzo continuo, sin cajas) → ACCIÓN (voz + controles del
   paso) → ESTADO (metadata, tinta mínima).
   Regla de tinta: UN protagonista de alto contraste por
   pantalla. Ritmo: sp-2 dentro de un bloque, sp-4/5 entre
   bloques. En modo claro la escena vive sobre el papel; en
   oscuro conserva su panel por legibilidad del instrumental.
   ══════════════════════════════════════════════════════════ */

/* ── ESCENA: mapa e instrumento salen de sus cajas ─────────
   El bisel del instrumento ES su contenedor; el mapa es un
   dibujo sobre la página, no un widget enmarcado. */
html:not([data-theme="dark"]) #vtPlayer .vt-card,
html:not([data-theme="dark"]) #vtEx .vt-card,
html:not([data-theme="dark"]) #vtXmRun .vt-card,
html:not([data-theme="dark"]) #vtFreeRoot .vt-card.vt-map,
html:not([data-theme="dark"]) #vtFreeRoot .vt-card.is-dark{
  background:transparent; box-shadow:none;
  padding:0; border-radius:var(--vt-r-m);
}

/* El protagonista se lleva el tamaño; el secundario pierde
   también la tinta: escala y opacidad bajan juntas. */
.vt-pl-stage.is-cat-b .vt-map{ opacity:.85; }
.vt-pl-stage.is-cat-c .vt-inst{ opacity:.92; }
.vt-pl-stage.is-cat-a .vt-map{ opacity:.9; }

/* ── RITMO DE BLOQUES: la Acción se separa de la Escena ──── */
#vtPlayer .vt-pl-stage{ gap:var(--vt-sp-2); }
#vtPlayer .vt-pl-choices,
#vtPlayer .vt-pl-btnrow{ margin-top:0; }
#vtEx .vt-ex{ gap:var(--vt-sp-2); }
#vtEx .vt-instructor,
#vtEx .vt-pl-choices{ margin-top:var(--vt-sp-4); }
#vtXmRun .vt-ex{ gap:var(--vt-sp-2); }
#vtFreeRoot{ gap:var(--vt-sp-2); }
#vtFreeRoot .vt-instructor{ margin-top:var(--vt-sp-3); }
#vtFreeRoot .vt-controls{ margin-top:var(--vt-sp-3); }
.vt-note{ margin-top:var(--vt-sp-5); }

/* ── HEADER SILENCIOSO: el título no compite con la escena ─ */
#vtPlayer .vt-pl-prog{ margin-bottom:var(--vt-sp-2); }
#vtPlayer .vt-pl-head{ margin-bottom:var(--vt-sp-2); }
#vtPlayer .vt-pl-head h3{ color:var(--muted); font-weight:500; }

/* ── APPLE RULE: ancho de página en escritorio ─────────────
   Una lección, un ejercicio o una pregunta es una PÁGINA, no
   un tablero. El Lab (cabina) conserva su cockpit ancho. */
@media (min-width:821px){
  #vtPlayer .vt-pl,
  #vtEx .vt-ex{ max-width:720px; margin-inline:auto; }
  #vtXmRun .vt-ex{ max-width:640px; margin-inline:auto; }
  #vtPlayer .vt-pl-prog,
  #vtPlayer .vt-pl-head{ max-width:720px; margin-inline:auto; }
}

/* ══════════════════════════════════════════════════════════
   VCP-2 · NARRATIVA ESPACIAL — GRID MAESTRO "SPINE"
   ------------------------------------------------------------
   Una columna espinal por pantalla y una sola dirección: ↓
   FENÓMENO → EXPLICACIÓN → (verificación) → ACCIÓN → RESULTADO
   El orden visual se dirige con `order` sobre el DOM intacto:
   posición pura — cero componentes, cero lógica.
   ══════════════════════════════════════════════════════════ */

/* Lección B (instrumento): la aguja habla, la voz responde
   AL LADO de la aguja, el mapa verifica, la acción cierra. */
.vt-pl-stage.is-cat-b .vt-pl-say{ order:-1; margin-top:var(--vt-sp-2); }
.vt-pl-stage.is-cat-b .vt-pl-taphint{ order:-1; }
/* (el instrumento ya viaja a order:-2 desde Sprint 3) */

/* Lección C (mapa): la trayectoria primero, la voz pegada al
   fenómeno, el instrumento confirma, la acción termina. */
.vt-pl-stage.is-cat-c .vt-map{ order:-2; }
.vt-pl-stage.is-cat-c .vt-pl-say{ order:-1; margin-top:var(--vt-sp-2); }
.vt-pl-stage.is-cat-c .vt-pl-taphint{ order:-1; }

/* Lección D (procedimiento): mapa+aguja+TTT son UNA escena;
   la voz acompaña después; la acción vive pegada. (Orden DOM
   natural: no se toca — la excepción declarada.) */

/* Learning y Examen: TAREA → ESCENA → ACCIÓN → RESULTADO.
   Antes, las opciones vivían después del feedback: zigzag.
   Ahora la acción sigue a la escena y el veredicto cierra. */
#vtEx .vt-pl-choices{ order:3; margin-top:var(--vt-sp-2); }
#vtEx .vt-pl-dialwrap{ order:4; }
#vtEx .vt-instructor{ order:5; }
#vtXmRun .vt-pl-choices{ order:3; margin-top:var(--vt-sp-2); }
#vtXmRun .vt-pl-dialwrap{ order:4; }
#vtXmRun .vt-pl-btnrow{ order:6; }

/* La flecha no se rompe en escritorio: en B la columna ya es
   espinal (Sprint 3); en C el fenómeno y su confirmación
   comparten la fila de escena y la voz cierra debajo. */

/* ══════════════════════════════════════════════════════════
   LAP-1 · ARQUITECTURA "FIGURA CON PIE" (cierre de composición)
   ------------------------------------------------------------
   La demostración es UN cuerpo: fenómeno + espejo + voz + acción
   comparten un único fondo de escena. No son cajas: es el suelo
   común que convierte cuatro elementos en una sola idea visual.
   En oscuro, ese suelo ES el panel: las tarjetas internas
   desaparecen también ahí (resuelve el doble-panel de VCP-1).
   ══════════════════════════════════════════════════════════ */

/* El suelo de escena: una superficie silenciosa por pantalla */
#vtPlayer .vt-pl-stage,
#vtEx .vt-ex,
#vtXmRun .vt-ex{
  background:var(--white,#fff);
  border-radius:var(--vt-r-l);
  padding:var(--vt-sp-4);
  box-shadow:var(--shadow-1);
}
html[data-theme="dark"] #vtPlayer .vt-pl-stage,
html[data-theme="dark"] #vtEx .vt-ex,
html[data-theme="dark"] #vtXmRun .vt-ex{ background:var(--vt-dk-card); }

/* Dentro del suelo, las tarjetas internas mueren TAMBIÉN en
   oscuro: el suelo ya es el panel. Un cuerpo, no cajas. */
html[data-theme="dark"] #vtPlayer .vt-card,
html[data-theme="dark"] #vtEx .vt-card,
html[data-theme="dark"] #vtXmRun .vt-card{
  background:transparent; box-shadow:none; padding:0;
}

/* La tarea del ejercicio vive sobre el suelo, no como caja aparte */
#vtEx .vt-ex-task, #vtXmRun .vt-ex-task{
  background:transparent; padding:var(--vt-sp-1) var(--vt-sp-1) 0;
}

/* Proximidad total: la voz es el PIE de la figura (sp-2 en
   todas las categorías; VCP-2 ya la había acercado en B/C) */
#vtPlayer .vt-pl-say{ margin-top:var(--vt-sp-2); }

/* El fin de lección hereda el suelo (era cloud sobre cloud) */
.vt-pl-end{ background:var(--white,#fff); }
html[data-theme="dark"] .vt-pl-end{ background:var(--vt-dk-card); }

/* Balance óptico 20–30%: el que verifica no es un sello postal */
.vt-pl-stage.is-cat-c .vt-inst .vt-pane{ max-width:240px; }
.vt-pl-stage.is-cat-b .vt-map .vt-pane{ max-height:26vh; }

/* Escritorio: atención, no ancho — el suelo respira del header */
@media (min-width:821px){
  #vtPlayer .vt-pl-stage,
  #vtEx .vt-ex,
  #vtXmRun .vt-ex{ padding:var(--vt-sp-5); }
}

/* ── FEEDBACK DE ESCENA: el halo de éxito abraza el bloque ─
   Con la escena des-cajada, el destello teal recorre el ancho
   del bloque completo: acción y resultado, sin viaje ocular. */

/* ── Movimiento reducido ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .vt-instructor, .vt-path, .vt-btn{ transition:none !important; }
}

/* ── DS1 · Categoría Icon: un solo lenguaje de botón-icono ── */
.vt-back:hover, .vt-instructor-x:hover{ background:var(--cloud); }
html[data-theme="dark"] .vt-back:hover,
html[data-theme="dark"] .vt-instructor-x:hover{ background:var(--vt-dk-inset); }
.vt-back:focus-visible, .vt-instructor-x:focus-visible,
.vt-bug-row button:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
/* Control de instrumento (bug): variante sancionada de Secondary */
.vt-bug-row button:hover{ background:var(--cloud); }

/* ══════════════════════════════════════════════════════════
   HFW-1 · HUMAN FACTORS WORKFLOW PASS
   ------------------------------------------------------------
   Regla: los elementos que se consultan consecutivamente viven
   juntos. El loop del tracking VOR es aguja → decidir → rumbo
   → aguja (cada 1–2 s): CDI y control de rumbo son UN bloque,
   como DG junto al CDI en el six-pack. El TTT es el guion del
   paso activo y vive entre ambos: Twist (OBS, arriba) → guion
   → Turn (rumbo, abajo). Solo `order` sobre DOM intacto.
   ══════════════════════════════════════════════════════════ */

/* ── Lección B con vuelo (L8): aguja → rumbo → voz → mapa ──
   El dial sube desde el fondo hasta pegarse al instrumento.
   (comparte order:-2 con .vt-inst; el DOM lo deja segundo) */
.vt-pl-stage.is-cat-b .vt-pl-dialwrap{ order:-2; }

/* ── Lección C con vuelo (L10): tras el instrumento, la acción.
   El dial (order 0, DOM tras inst) queda adyacente a la aguja;
   botón y opciones cierran después. */
.vt-pl-stage.is-cat-c .vt-pl-btnrow,
.vt-pl-stage.is-cat-c .vt-pl-choices{ order:1; }

/* ── Lección D (L11 · TTT): escena → voz → TTT → rumbo → Talk.
   El flujo espacial ES el flujo Turn·Twist·Track·Talk: la
   instrucción arriba, el guion encendiéndose, el mando que lo
   ejecuta inmediatamente debajo. Cero búsqueda del siguiente
   paso. */
.vt-pl-stage.is-cat-d .vt-pl-say{ order:1; margin-top:var(--vt-sp-2); }
.vt-pl-stage.is-cat-d .vt-pl-taphint{ order:1; }
.vt-pl-stage.is-cat-d .vt-ttt{ order:2; }
.vt-pl-stage.is-cat-d .vt-pl-dialwrap{ order:3; }
.vt-pl-stage.is-cat-d .vt-pl-btnrow,
.vt-pl-stage.is-cat-d .vt-pl-choices{ order:4; }
.vt-pl-stage.is-cat-d .vt-pl-end{ order:5; }

/* ── Learning y Examen (vuelos E4–E6 e ítems de vuelo):
   tarea → mapa → aguja → TTT → rumbo → respuesta → veredicto.
   El TTT deja la cabecera y baja a vivir con los mandos que
   ejecutan sus pasos. En ejercicios estáticos (E1–E3) TTT y
   dial están ocultos: nada cambia. */
#vtEx .vt-ttt,
#vtXmRun .vt-ttt{ order:1; margin-top:var(--vt-sp-2); }
#vtEx .vt-pl-dialwrap,
#vtXmRun .vt-pl-dialwrap{ order:2; }

/* ── Navigation Lab · Fly (teléfono vertical): la franja del
   instructor ya no parte el par aguja↔mandos. El aviso cae
   debajo de los pulgares, donde el ojo aterriza tras actuar. */
.vt-free:not(.is-review) .vt-controls{ order:1; }
.vt-free:not(.is-review) .vt-instructor{ order:2; }

/* ── Navigation Lab · escritorio/iPad: el cockpit se monta
   DEBAJO del instrumento (columna derecha), como los knobs de
   heading/course bajo el PFD de un G1000. El escaneo aguja→
   rumbo deja de cruzar la pantalla en diagonal. En Review la
   fila ctl queda vacía y el panel sube: intacto. */
@media (min-width:821px){
  .vt-free{
    grid-template-areas:
      "mapcol inst"
      "mapcol ctl"
      "mapcol instructor"
      "mapcol panel";
  }
}
/* Teléfono horizontal: sin cambios — excepción con nombre:
   mandos al pulgar izquierdo, aguja al campo visual derecho;
   la altura es el recurso escaso y el par vive en las manos. */

/* ══════════════════════════════════════════════════════════
   VB-1 · VISUAL BALANCE PASS
   ------------------------------------------------------------
   Gramática de composición (pesos definidos):
     ESCENA 55–60% del área · PILA DE INSTRUMENTO 25% ·
     ACCIÓN 15% · FEEDBACK aparece, no reside.
   Regla de masas: cada pantalla se reduce a 3–4 masas; todo
   elemento pertenece a una. Regla de ejes: una sola vertical
   invisible por columna. Regla de proporción: las columnas se
   reparten en fr (1.6:1), nunca en px heredados de otra época.
   Solo layout: grid, flex, márgenes, tamaños, alineaciones.
   ══════════════════════════════════════════════════════════ */

/* ── 1 · Proporción de página (escritorio) ─────────────────
   Las columnas fijas 360/380px nacieron con páginas de 1120px;
   dentro de las páginas de 720/640 (LAP-1) invertían el
   balance: el secundario pesaba MÁS que el protagonista.
   Ahora la escena manda 1.6:1 en toda página de dos columnas. */
@media (min-width:821px){
  .vt-pl-stage{
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    column-gap:var(--vt-sp-4);
  }
  #vtEx .vt-ex, #vtXmRun .vt-ex{
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    column-gap:var(--vt-sp-4);
  }

/* ── 2 · Fin de la auto-colocación: cada masa tiene casa ───
   El dial ya no cae en la celda que el azar del grid le deje:
   la PILA DE INSTRUMENTO (aguja → TTT → rumbo, el par de
   HFW-1) es UNA masa en la columna derecha; el mapa es UNA
   masa que abarca su altura; voz y acción cierran a lo ancho.
   (cat-a y cat-b son flex en escritorio: el grid no los toca) */
  .vt-pl-stage .vt-map{ grid-column:1; grid-row:1 / span 3; }
  .vt-pl-stage .vt-inst{ grid-column:2; grid-row:1; }
  .vt-pl-stage .vt-ttt{ grid-column:2; grid-row:2; }
  .vt-pl-stage .vt-pl-dialwrap{ grid-column:2; grid-row:3; }
  .vt-pl-stage .vt-pl-say{ grid-column:1 / -1; grid-row:4; }
  .vt-pl-stage .vt-pl-taphint{ grid-column:1 / -1; grid-row:5; }
  .vt-pl-stage .vt-pl-btnrow{ grid-column:1 / -1; grid-row:6; }
  .vt-pl-stage .vt-pl-choices{ grid-column:1 / -1; grid-row:7; }

  .vt-ex .vt-ex-task{ grid-column:1 / -1; grid-row:1; }
  .vt-ex .vt-map{ grid-column:1; grid-row:2 / span 3; }
  .vt-ex .vt-inst{ grid-column:2; grid-row:2; }
  .vt-ex .vt-ttt{ grid-column:2; grid-row:3; margin-top:0; }
  .vt-ex .vt-pl-dialwrap{ grid-column:2; grid-row:4; }
  .vt-ex .vt-pl-choices{ grid-column:1 / -1; grid-row:5; }
  .vt-ex .vt-instructor{ grid-column:1 / -1; grid-row:6; }
  .vt-ex .vt-pl-btnrow{ grid-column:1 / -1; grid-row:7; }

/* ── 3 · Lab escritorio: la columna derecha es UNA pila ────
   inst→mandos→aviso a ritmo interno sp-2; el mapa se separa
   a sp-4. El instrumento llena su columna: sus bordes y los
   del cockpit comparten el mismo eje vertical invisible. */
  .vt-free{ column-gap:var(--vt-sp-4); row-gap:var(--vt-sp-2); }
  .vt-free .vt-inst .vt-pane{ max-width:100%; }

/* ── 4 · Masas huérfanas al eje central ────────────────────
   Intro y resultados del examen quedaban ancladas al borde
   izquierdo (centroide al 20% del ancho): al eje. */
  .vt-xm-intro, .vt-xr{ margin-inline:auto; }
}

/* ── 5 · Silueta del grupo de rumbo (todos los tamaños) ────
   Los botones ±10/±5 se estiraban al ancho completo de la
   página bajo un dial de 96px (botón de 170px para un ajuste
   de 5°). El grupo comparte ahora el eje y la anchura del
   dial que comanda: una sola silueta de mando. */
.vt-hdg-steps{ width:min(100%, 320px); margin-inline:auto; }

/* ── 6 · Ritmo móvil: la acción respira, la pila no ────────
   Dentro de la pila (aguja·TTT·rumbo) rige sp-2; antes de la
   decisión (opciones) y del veredicto, sp-2 adicional sobre el
   gap = separación efectiva sp-4. Igual que en Learning/Exam
   desde VCP-2 — ahora también en la lección D. */
@media (max-width:820px){
  .vt-pl-stage.is-cat-d .vt-pl-choices{ margin-top:var(--vt-sp-2); }
  #vtEx .vt-instructor{ margin-top:var(--vt-sp-2); }
}

/* ══════════════════════════════════════════════════════════
   NS-1 · NAVIGATION SIMULATOR
   ------------------------------------------------------------
   Cuatro estados: PREFLIGHT (preparar) → FLY (cabina limpia)
   → PAUSE (inmersión intacta) → REVIEW (debrief). En vuelo,
   escritorio = cabina de tres columnas: INSTRUMENT STACK a la
   izquierda, mapa dominante al centro, NAV STACK a la derecha
   (solo lo que un piloto consulta EN vuelo: radial, DME,
   bandera, aguja). Sin sombras nuevas, sin animaciones nuevas.
   ══════════════════════════════════════════════════════════ */

/* ── PREFLIGHT ─────────────────────────────────────────────
   Overlay sereno sobre la cabina apagada: se configura, no se
   vuela. Reutiliza sliders y botones existentes del DS. */
.vt-preflight{
  position:absolute; inset:0; z-index:7;
  display:flex; align-items:center; justify-content:center;
  background:rgba(244,248,253,.9); border-radius:var(--vt-r-m);
}
html[data-theme="dark"] .vt-preflight{ background:rgba(6,16,34,.92); }
.vt-pf-card{
  width:min(430px, 94%); max-height:100%; overflow:auto;
  background:var(--white,#fff); border-radius:var(--vt-r-l);
  box-shadow:var(--shadow-1); padding:var(--vt-sp-5);
  display:flex; flex-direction:column; gap:var(--vt-sp-3);
}
html[data-theme="dark"] .vt-pf-card{ background:var(--vt-dk-card); }
.vt-pf-card > b{
  font-size:var(--vt-fs-h1); font-weight:600; letter-spacing:-.01em; color:var(--ink);
}
html[data-theme="dark"] .vt-pf-card > b{ color:var(--vt-dk-ink); }
.vt-pf-sub{ margin:0; font-size:var(--vt-fs-body); color:var(--muted); }
.vt-pf-diff > b{
  display:block; font-size:var(--vt-fs-caption); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin-bottom:var(--vt-sp-1);
}
.vt-pf-diff .vt-row{ display:flex; gap:var(--vt-sp-2); }
.vt-pf-diff .vt-btn{ flex:1; justify-content:center; }
.vt-pf-diffnote{ margin:var(--vt-sp-1) 0 0; font-size:var(--vt-fs-caption); color:var(--muted); }
#vtPfStart{ min-height:52px; justify-content:center; margin-top:var(--vt-sp-2); }
/* Espacio reservado para capas futuras (Wind · Holding ·
   Cross Radials · DME Arc · Waypoints · Intersections). */
.vt-pf-layers{ display:grid; grid-template-columns:1fr 1fr; gap:var(--vt-sp-2); }

/* ── CABINA · escritorio/iPad en FLY y PAUSE ───────────────
   Instrument Stack | mapa dominante | NAV Stack. El Review
   conserva su layout de debrief (timeline protagonista). */
@media (min-width:821px){
  .vt-free:not(.is-review){
    display:grid;
    grid-template-columns:minmax(280px,340px) minmax(0,1.6fr) minmax(210px,250px);
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:
      "inst mapcol instructor"
      "ctl  mapcol panel"
      ".    mapcol .";
    column-gap:var(--vt-sp-4); row-gap:var(--vt-sp-2);
    align-items:start;
  }
  /* El NAV Stack vuelve a la vista EN vuelo: radial y DME son
     lectura de piloto, no estadística. (RC6 lo ocultaba junto
     con la timeline; la timeline sigue siendo solo de Review.) */
  .vt-free:not(.is-review) .vt-panel{
    display:flex; flex-direction:column; gap:var(--vt-sp-2);
  }
  .vt-free:not(.is-review) .vt-metrics{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════
   NS-V3 · NAVIGATION SIMULATOR — VISUAL PARITY
   ------------------------------------------------------------
   Réplica del mockup aprobado (versión clara) con la identidad
   oficial de Pilot Hub: navy/sky/teal sobre papel. Del mockup
   se copian layout, jerarquía, espaciado y proporciones — no
   su verde (→ teal oficial) ni texturas. Eje obligatorio:
     HEADER / [INSTRUMENTO+CONTROLES | MAPA | NAV STACK] /
     MENSAJE (a lo ancho) / PLAYBACK (a lo ancho, solo Review).
   Todo scoped a #vtFree. Solo layout + CSS.
   ══════════════════════════════════════════════════════════ */

/* ── Piezas del grid (la columna del mapa se disuelve) ───── */
#vtFree .vt-map-col{ display:contents; }
#vtFree .vt-map{ grid-area:map; }
#vtFree .vt-nl{ grid-area:nl; }

/* ── Paneles: aviónica clara — borde fino, sin sombra ────── */
html:not([data-theme="dark"]) #vtFree #vtFreeRoot .vt-card.is-dark,
html:not([data-theme="dark"]) #vtFree .vt-controls,
html:not([data-theme="dark"]) #vtFree .vt-panel{
  background:var(--white,#fff); border:1px solid var(--line);
  border-radius:var(--vt-r-m); box-shadow:none;
}
#vtFree .vt-controls{ margin-top:0; }
#vtFree .vt-panel{ padding:var(--vt-sp-3); }
/* El mapa no es una tarjeta: va a sangre dentro de su área */
#vtFree #vtFreeRoot .vt-card.vt-map{
  background:transparent; border:none; padding:0; box-shadow:none;
}

/* ── Instrumento: cara clara del mockup (inversión por CSS —
   el renderer queda intacto; regla doble protege el centro) ── */
html:not([data-theme="dark"]) #vtFree .vt-inst .vt-pane [fill="#08306F"]{ fill:#FFFFFF; }
html:not([data-theme="dark"]) #vtFree .vt-inst .vt-pane [fill="#061F52"]{ fill:#FFFFFF; }
html:not([data-theme="dark"]) #vtFree .vt-inst .vt-pane [stroke="#FFFFFF"]{ stroke:#0B3C91; }
html:not([data-theme="dark"]) #vtFree .vt-inst .vt-pane [fill="#FFFFFF"]{ fill:#0B3C91; }
html:not([data-theme="dark"]) #vtFree .vt-inst .vt-pane [fill="#FFFFFF"][stroke="#E1E8F2"]{ fill:#FFFFFF; }
/* El instrumento domina su columna (mockup: ~340px, respira) */
#vtFree .vt-inst .vt-pane{ max-width:100%; }
#vtFree #vtFreeRoot .vt-card.is-dark{ padding:var(--vt-sp-3); }

/* ── NAV Stack: columna de aviónica — filas rótulo/valor ─── */
/* Valores vivos en teal oficial (el verde del mockup → teal) */
#vtFree #vtFlag, #vtFree #vtCdi{ color:var(--teal); }

/* ── Controles: la organización exacta del mockup ──────────
   RUMBO | CURSO arriba (bugs ◀ NNN° ▶), debajo Pausa · 1×2×4×8×
   · Herramientas. Pausa = pastilla llena teal; activo = navy. */
#vtFree .vt-btn.is-primary{
  background:var(--teal); border-color:var(--teal); color:#04263B;
  border-radius:var(--vt-r-pill); font-weight:600;
}
#vtFree .vt-flyrow .vt-btn.is-mono.is-on{
  background:var(--navy); border-color:var(--navy); color:#fff;
}

/* ── ARQUITECTURA · escritorio e iPad (mismo layout que 390px,
   escalado: columnas laterales fijas, mapa con el resto) ──── */
@media (min-width:821px){
  #vtFree .vt-free:not(.is-review){
    display:grid;
    grid-template-columns:minmax(260px,340px) minmax(0,2.2fr) minmax(210px,260px);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "inst map panel"
      "ctl  map panel"
      ".    map ."
      "instructor instructor instructor";
    column-gap:var(--vt-sp-3); row-gap:var(--vt-sp-2);
    align-items:start;
  }
  #vtFree .vt-free:not(.is-review) .vt-panel{
    display:flex; flex-direction:column; gap:var(--vt-sp-2);
  }
  #vtFree .vt-free:not(.is-review) .vt-metrics{ grid-template-columns:1fr; }
  #vtFree .vt-map .vt-pane{ max-height:none; }

  /* REVIEW: mapa | instrumento+datos, y la estación de
     reproducción PEGADA abajo, todo el ancho — no flotando. */
  #vtFree .vt-free.is-review{
    display:grid;
    grid-template-columns:minmax(0,2.2fr) minmax(240px,300px);
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "map inst"
      "map panel"
      "nl  nl";
    column-gap:var(--vt-sp-3); row-gap:var(--vt-sp-3);
    align-items:start;
  }
  html:not([data-theme="dark"]) #vtFree .vt-nl{
    background:var(--white,#fff); border:1px solid var(--line);
    border-radius:var(--vt-r-m);
  }
}

/* ── 390px: el MISMO layout, apilado (no otro diseño) ─────── */
@media (max-width:820px){
  #vtFree .vt-free:not(.is-review) .vt-panel{
    display:flex; flex-direction:column; gap:var(--vt-sp-2); order:3;
  }
  #vtFree .vt-free:not(.is-review) .vt-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #vtFree .vt-map .vt-pane{ max-height:46vh; }
}

/* iPhone horizontal: dos columnas, mapa manda (altura escasa) */
@media (max-height:520px) and (orientation:landscape){
  #vtFree .vt-free:not(.is-review){
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(240px,300px);
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:
      "map inst"
      "map ctl"
      "map .";
    gap:var(--vt-sp-2);
  }
  #vtFree .vt-free:not(.is-review) .vt-panel{ display:none; }
  #vtFree .vt-map .vt-pane{ max-height:none; }
}

/* Destructivo del playback en rojo (mockup) */
#vtFree #vtNlClear{
  color:#C0392B; border-color:rgba(192,57,43,.45); background:transparent;
}

/* ══════════════════════════════════════════════════════════
   NS-LR1 · LAYOUT REWRITE — el mockup es la especificación
   ------------------------------------------------------------
   Layout reconstruido desde cero (los grids anteriores quedan
   superseded por especificidad #vtFree #vtFreeRoot). Geometría
   medida del mockup (1536px de referencia):
     consola izquierda ~350px · mapa = resto (edge-to-edge) ·
     NAV stack flotante ~230px sobre el mapa · mensaje al pie
     de la consola · playback SIEMPRE presente, banda inferior
     a lo ancho (inerte fuera de Review: pointer-events, cero
     cambios de comportamiento — JS intacto).
   ══════════════════════════════════════════════════════════ */

@media (min-width:821px){
  #vtFree #vtFreeRoot{
    display:grid; position:relative;
    
    
    
    column-gap:var(--vt-sp-3); row-gap:var(--vt-sp-2);
    align-items:start;
  }
  #vtFree #vtFreeRoot .vt-inst{ grid-area:inst; }
  #vtFree #vtFreeRoot .vt-controls{ grid-area:ctl; }
  #vtFree #vtFreeRoot .vt-instructor{ grid-area:instructor; margin-top:0; }
  #vtFree #vtFreeRoot .vt-map{ grid-area:map; }
  #vtFree #vtFreeRoot .vt-nl{ grid-area:nl; }
  #vtFree #vtFreeRoot .vt-map-col{ display:contents; }

  /* CONSOLA IZQUIERDA: un solo bloque — piezas del mismo ancho,
     costuras cortas, el OBS con la presencia exacta (≈300px). */
  #vtFree #vtFreeRoot .vt-inst .vt-pane{ max-width:300px; }
  #vtFree #vtFreeRoot .vt-card.is-dark{ padding:var(--vt-sp-4); }

  /* MAPA: protagonista, sin jaula — llena su área hasta abajo. */

  /* NAV STACK: flota sobre el mapa, arriba a la derecha —
     exactamente donde vive en el mockup (único absolute del
     sprint, porque el mockup realmente lo hace). */
  #vtFree #vtFreeRoot .vt-panel{
    display:flex; flex-direction:column; gap:var(--vt-sp-2);
    position:absolute; top:var(--vt-sp-2); right:var(--vt-sp-2);
     z-index:3;
  }
  #vtFree #vtFreeRoot .vt-metrics{ grid-template-columns:1fr; }

  /* PLAYBACK: siempre presente (mockup), banda inferior a lo
     ancho. Fuera de Review es inerte por CSS — mismas guardas
     efectivas que cuando estaba oculto; el JS no cambia. */
  #vtFree #vtFreeRoot:not(.is-review) .vt-nl{
    display:block; pointer-events:none;
  }
  #vtFree #vtFreeRoot:not(.is-review) .vt-nl-rev-head,
  #vtFree #vtFreeRoot:not(.is-review) .vt-nl-errlist,
  #vtFree #vtFreeRoot:not(.is-review) .vt-nl-legend{ display:none; }

  /* REVIEW: misma geometría (un solo layout, como el mockup);
     la consola pierde sus mandos y la banda cobra vida. */
  #vtFree #vtFreeRoot.is-review .vt-controls{ display:none; }
}

/* iPhone horizontal: la altura manda — mapa | consola, sin banda */
@media (min-width:821px) and (max-height:520px) and (orientation:landscape){
  #vtFree #vtFreeRoot{
    
    
    
    gap:var(--vt-sp-2);
  }

  #vtFree #vtFreeRoot .vt-instructor{
    position:sticky; bottom:8px; grid-column:1 / -1;
  }
}

/* ══════════════════════════════════════════════════════════
   NS-LR2 · PIXEL PARITY — convergencia medida contra el mockup
   (1536×1024, ±4px). Proporciones, no píxeles heredados:
   consola 31% · mapa 69% · NAV flotante 11% · sombra suave en
   las masas · rates circulares 44px · playback como estación.
   ══════════════════════════════════════════════════════════ */

@media (min-width:821px){
  /* Proporción medida: consola 476/1536 ≈ 31% (tope 500px) */
  /* NAV flotante: 165/1536 ≈ 11% del viewport */
  #vtFree #vtFreeRoot .vt-panel{ width:clamp(150px, 11vw, 185px); }
  /* Las masas del mockup flotan con sombra suave sobre el papel */
  html:not([data-theme="dark"]) #vtFree #vtFreeRoot .vt-card.is-dark,
  html:not([data-theme="dark"]) #vtFree #vtFreeRoot .vt-controls,
  html:not([data-theme="dark"]) #vtFree #vtFreeRoot .vt-panel,
  html:not([data-theme="dark"]) #vtFree #vtFreeRoot .vt-nl{
    box-shadow:var(--shadow-1);
  }
}

/* Consola: mismo plano — el mensaje comparte el ancho y radio */
#vtFree #vtFreeRoot .vt-instructor{ border-radius:var(--vt-r-m); }

/* Controles, geometría medida: rates = círculos de 44px;
   Pausa pastilla ~110×44; Herramientas pastilla con icono */
#vtFree .vt-flyrow{ align-items:center; gap:var(--vt-sp-2); flex-wrap:wrap; }
#vtFree .vt-flyrow .vt-btn.is-mono{
  width:44px; height:44px; min-height:44px; padding:0;
  border-radius:50%; justify-content:center;
}
#vtFree .vt-flyrow .vt-fly{ min-width:110px; min-height:44px; }
#vtFree .vt-tools-btn{ border-radius:var(--vt-r-pill); }

/* PLAYBACK · estación del mockup: transporte blanco de borde
   fino (el play NO es pastilla verde), aire sp-4, rojo al final */
#vtFree .vt-nl{ padding:var(--vt-sp-4); }
html:not([data-theme="dark"]) #vtFree #vtFreeRoot .vt-nl .vt-btn,
html:not([data-theme="dark"]) #vtFree #vtFreeRoot .vt-nl .vt-btn.is-primary,
html:not([data-theme="dark"]) #vtFree #vtFreeRoot .vt-nl .vt-btn.is-mono{
  background:var(--white,#fff); color:var(--navy);
  border:1px solid var(--line); border-radius:var(--vt-r-s);
  min-height:48px;
}
#vtFree #vtFreeRoot .vt-nl #vtNlPlay{ width:56px; justify-content:center; }
html:not([data-theme="dark"]) #vtFree #vtFreeRoot .vt-nl .vt-btn.is-on{
  border-color:var(--navy); color:var(--navy); font-weight:600;
}
html:not([data-theme="dark"]) #vtFree #vtFreeRoot .vt-nl #vtNlClear{
  color:#C0392B; border-color:rgba(192,57,43,.45);
}

/* ══════════════════════════════════════════════════════════
   NS-PARITY-1 · RÉPLICA VISUAL DEL MOCKUP
   ------------------------------------------------------------
   FASE 1 (geometría): consola = UNA masa con grid interno
   "inst mini / ctl ctl / msg msg"; mapa 69%; NAV 11% flotante;
   playback banda. FASE 2 (piel): heredada de v134–v136 (ya es
   paridad del mismo mockup). FASE 3 (estados): hover/active de
   la toolbar y el pill. Los espejos (mini, badges, burbuja,
   toolbar) existen desde este sprint con HTML permitido.
   ══════════════════════════════════════════════════════════ */

/* ── Header: pill FREE MODE junto al título; sin subtítulo ── */
#vtFree .vt-head p{ display:none; }
.vt-fm-pill{
  align-self:center; margin-left:var(--vt-sp-2);
  background:var(--vt-ok-bg); color:var(--vt-ok-fg);
  font-size:var(--vt-fs-caption); font-weight:600; letter-spacing:.06em;
  padding:var(--vt-sp-1) var(--vt-sp-3); border-radius:var(--vt-r-pill);
  white-space:nowrap;
}
#vtFree .vt-head > div{ display:flex; align-items:center; }

/* ── MASA 1 · Consola: un solo objeto ── */
#vtFree .vt-console{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(96px,8vw,124px);
  grid-template-areas:
    "inst mini"
    "ctl  ctl"
    "msg  msg";
  gap:var(--vt-sp-2);
  align-content:start;
}
#vtFree .vt-mini{ grid-area:mini; }
#vtFree .vt-console .vt-instructor{  margin-top:0; }
/* neutraliza áreas heredadas de sprints anteriores */
#vtFree .vt-console .vt-inst,
#vtFree .vt-console .vt-controls,
#vtFree .vt-console .vt-instructor{ grid-row:auto; grid-column:auto; }
#vtFree .vt-console .vt-inst{ grid-area:inst; }
#vtFree .vt-console .vt-controls{ grid-area:ctl; }
#vtFree .vt-console .vt-instructor{ grid-area:msg; }

/* Mini-datos: la columna de la consola del mockup */
html:not([data-theme="dark"]) #vtFree .vt-mini{
  background:var(--white,#fff); border:1px solid var(--line);
  box-shadow:var(--shadow-1);
}
html[data-theme="dark"] #vtFree .vt-mini{ background:var(--vt-dk-card); }
#vtFree .vt-mini{
  border-radius:var(--vt-r-m); padding:var(--vt-sp-3) var(--vt-sp-2);
  display:flex; flex-direction:column; gap:var(--vt-sp-2);
}
#vtFree .vt-mini-row b{
  display:block; font-weight:500; color:var(--muted);
  font-size:var(--vt-fs-caption); text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#vtFree .vt-mini-row i{
  display:block; font-style:normal; font-family:var(--font-mono);
   color:var(--ink); margin-top:1px;
}
html[data-theme="dark"] #vtFree .vt-mini-row i{ color:var(--vt-dk-ink); }
#vtFree #vtMiCrs, #vtFree #vtMiFlag, #vtFree #vtMiCdi{ color:var(--teal); }

/* Badges del dial (mockup: rumbo arriba, OBS y curso abajo) */
#vtFree .vt-inst{ position:relative; }
#vtFree .vt-dial-badges span{
  position:absolute; font-family:var(--font-mono);
  font-size:var(--vt-fs-body); pointer-events:none;
}
#vtFree .vt-db-hdg{
   left:50%; transform:translateX(-50%);
  background:var(--navy); color:#fff; font-weight:600;
  padding:2px var(--vt-sp-2); border-radius:var(--vt-r-s);
}
#vtFree .vt-db-obs{
   
  background:var(--cloud); color:var(--navy); font-weight:600;
   
}
#vtFree .vt-db-crs{
   left:50%; transform:translateX(-50%);
  border:1.5px solid var(--teal); color:var(--teal); font-weight:600;
  padding:1px var(--vt-sp-2); border-radius:var(--vt-r-s);
  background:transparent;
}

/* ══════════════════════════════════════════════════════════
   NS-PARITY-2 · Cierre de B1/B2 con el HTML ya permitido
   ------------------------------------------------------------
   Tres piezas que el mockup tiene y el DOM no tenía: acciones
   del header, stack NAV de seis filas y caja de mensaje única.
   ══════════════════════════════════════════════════════════ */

/* ── Acciones del header: Home · Ayuda · Más, a la derecha ── */
.vt-head-actions{
  margin-left:auto; display:flex; align-items:center; gap:var(--vt-sp-2);
}
.vt-hd-btn{
  display:inline-flex; align-items:center; gap:var(--vt-sp-2);
  min-height:44px; padding:0 var(--vt-sp-3);
  background:var(--white,#fff); border:1px solid var(--line);
  border-radius:var(--vt-r-pill); color:var(--ink);
  font-family:var(--font-ui); font-size:var(--vt-fs-body); line-height:1;
  white-space:nowrap; cursor:pointer;
}
.vt-hd-btn svg{
  width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.vt-hd-btn .vt-dots circle{ fill:currentColor; stroke:none; }
.vt-hd-btn:hover{ background:var(--cloud); }
.vt-hd-btn:active{ transform:scale(.97); }
.vt-hd-btn:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
html[data-theme="dark"] .vt-hd-btn{
  background:var(--vt-dk-card); color:var(--vt-dk-ink); border-color:transparent;
}
/* En pantalla estrecha las acciones se reducen a su icono */
@media (max-width:820px){
  .vt-hd-btn span{ display:none; }
  .vt-hd-btn{ width:44px; padding:0; justify-content:center; }
}

/* ── Stack NAV: tarjeta blanca con las seis filas del mockup ── */
#vtFree #vtFreeRoot .vt-panel{
  padding:var(--vt-sp-3); border-radius:var(--vt-r-m);
  background:var(--white,#fff); border:1px solid var(--line);
}
html[data-theme="dark"] #vtFree #vtFreeRoot .vt-panel{
  background:var(--vt-dk-card); border-color:transparent;
}
/* Vivos en teal, como el mockup (radial y distancia quedan en tinta) */
#vtFree #vtPnCrs, #vtFree #vtFlag, #vtFree #vtCdi{ color:var(--teal); }
#vtFree .vt-mini-row i small{ font-size:var(--vt-fs-caption); color:var(--muted); margin-left:3px; }

/* ── Caja de mensaje única: aviso del instructor + situación ── */
#vtFree .vt-console .vt-instructor{ opacity:1; transform:none; align-items:flex-start; }
#vtFree .vt-console .vt-instructor .vt-instructor-ico{ margin-top:2px; }
#vtFree #vtInstructorText{ font-weight:600; }
#vtFree #vtInstructorText:empty{ display:none; }
#vtFree .vt-console .vt-situation{
  background:transparent; padding:0; border-radius:0;
  color:inherit; font-size:var(--vt-fs-h3); line-height:1.45;
}
#vtFree .vt-console .vt-instructor:not(.is-on) .vt-instructor-x{ display:none; }

/* ── MASA 2 · Mapa con su toolbar flotante ── */
#vtFree #vtFreeRoot .vt-card.vt-map{ position:relative; }
#vtFree .vt-map-tools{
  position:absolute; right:var(--vt-sp-2); bottom:var(--vt-sp-3);
  display:flex; flex-direction:column; gap:var(--vt-sp-2); z-index:3;
}
#vtFree .vt-map-tools button, #vtFree .vt-mt-north{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--white,#fff); border:1px solid var(--line);
  border-radius:var(--vt-r-s); box-shadow:var(--shadow-1);
  color:var(--navy); font-size:var(--vt-fs-h2); font-family:var(--font-mono);
  cursor:pointer;
}
#vtFree .vt-map-tools button svg{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
/* La N no es un botón: el mapa es norte-arriba por diseño y este
   indicador lo dice. Un toggle aquí prometería algo que el
   renderer no hace (rotación), así que no se finge. */
#vtFree .vt-mt-north{
  cursor:default; font-weight:600; flex-direction:column; gap:1px;
  font-size:var(--vt-fs-caption); line-height:1;
}
#vtFree .vt-mt-north svg{
  width:12px; height:12px; fill:currentColor; stroke:none;
}
#vtFree .vt-map-tools button:hover{ background:var(--cloud); }
#vtFree .vt-map-tools button:active{ transform:scale(.95); }
#vtFree .vt-map-tools button:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
html[data-theme="dark"] #vtFree .vt-map-tools button,
html[data-theme="dark"] #vtFree .vt-mt-north{
  background:var(--vt-dk-card); color:var(--vt-dk-ink); border-color:transparent;
}

/* ── MASA 4 · Burbuja de tiempo sobre el thumb ── */
#vtFree .vt-nl-track{ position:relative; }
#vtFree .vt-nl-bubble{
  position:absolute; top:-36px; transform:translateX(-50%);
  background:var(--white,#fff); border:1px solid var(--line);
  box-shadow:var(--shadow-1); border-radius:var(--vt-r-s);
  font-family:var(--font-mono); font-size:var(--vt-fs-caption); font-weight:600;
  color:var(--ink); padding:3px var(--vt-sp-2); white-space:nowrap; z-index:2;
}
html[data-theme="dark"] #vtFree .vt-nl-bubble{
  background:var(--vt-dk-card); color:var(--vt-dk-ink); border-color:transparent;
}

/* ── Grid raíz: consola | mapa (la consola ya es un item único) ── */
@media (min-width:821px){
  #vtFree #vtFreeRoot{
    grid-template-columns:clamp(320px, 31%, 500px) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:
      "console map"
      "nl      nl";
  }
  #vtFree .vt-console{ grid-area:console; }
  #vtFree .vt-nl-bubble{ top:-38px; }
  /* la mini-columna solo existe en escritorio/iPad (el teléfono
     ya muestra el NAV strip: dato único en pantalla pequeña) */
}
@media (max-width:820px){
  #vtFree .vt-mini{ display:none; }
  #vtFree .vt-console{ display:flex; flex-direction:column; gap:var(--vt-sp-2); }
}
/* iPhone horizontal: mapa | consola (la consola desplaza scroll) */
@media (min-width:821px) and (max-height:520px) and (orientation:landscape){
  #vtFree #vtFreeRoot{
    grid-template-columns:minmax(0,1.8fr) minmax(280px,320px);
    grid-template-rows:minmax(0,1fr);
    grid-template-areas:"map console";
  }
  #vtFree .vt-mini{ display:none; }
  #vtFree #vtFreeRoot:not(.is-review) .vt-nl{ display:none; }
  #vtFree #vtFreeRoot .vt-panel{ display:none; }
}

/* ══════════════════════════════════════════════════════════
   PHASE 1 · RECONSTRUCCIÓN GEOMÉTRICA (solo geometría)
   ------------------------------------------------------------
   Fuentes: mockup 1536×1024 + NS_PHASE0_Analisis_Visual.md.
   Este bloque NO declara color, sombra, radio ni tipografía:
   solo posición, tamaño, padding y aire. Escritorio/iPad; las
   reglas de teléfono y de landscape quedan intactas (el bloque
   exige min-height 521 para no pisar la excepción de altura).
   ══════════════════════════════════════════════════════════ */

@media (min-width:821px) and (min-height:521px){

  /* El Simulator escapa del contenedor centrado: el escenario
     debe tocar el borde derecho real de la pantalla (PHASE0 §7). */

  /* Header: banda de 70 (mockup y0–70) */
  #vtFree .vt-head{ min-height:70px; margin-bottom:0; align-items:center; }

  /* Raíz: consola 30.2% | mapa hasta el borde; gutter 24 (≈25) */
  #vtFree #vtFreeRoot{
    
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:
      "console map"
      "nl      nl";
    column-gap:var(--vt-sp-6);
    row-gap:var(--vt-sp-2);
    padding-right:0;
  }

  /* MASA A · Consola: nace 20 bajo el header (y90 vs mapa y70);
     filas a 12; el respiro grande (24) solo antes del mensaje. */
  #vtFree .vt-console{
    margin-top:var(--vt-sp-5);
    row-gap:var(--vt-sp-3);
    column-gap:0;                                /* costura x370: tocan */
    
  }
  #vtFree .vt-console .vt-card.is-dark{ padding:var(--vt-sp-6); }
   /* Ø dial */
  #vtFree .vt-mini{ padding:var(--vt-sp-3) var(--vt-sp-2); gap:var(--vt-sp-5); }
  #vtFree .vt-console .vt-instructor{ margin-top:var(--vt-sp-3); min-height:88px; }

  /* MASA B · Mapa: escenario — toca el header y llena su área */
  #vtFree #vtFreeRoot .vt-map{  margin-top:0; }

  /* MASA C · Panel NAV: flota a 20/20 del escenario; paso 65
     compartido con la columna de datos (PHASE0 §3). */
  #vtFree #vtFreeRoot .vt-panel{
    top:var(--vt-sp-5);
    right:max(var(--vt-sp-5), env(safe-area-inset-right));
    
    padding:var(--vt-sp-3);
    gap:var(--vt-sp-5);
  }

  /* Satélite · toolbar: mismo eje derecho que C, módulos de 50 */
  #vtFree .vt-map-tools{
    right:max(var(--vt-sp-5), env(safe-area-inset-right));
    bottom:var(--vt-sp-6);
    gap:var(--vt-sp-3);
  }
  #vtFree .vt-map-tools button, #vtFree .vt-mt-north{ width:50px; height:50px; }

  /* MASA D · Playback: zócalo x16 → borde−16; aire 8 arriba */
  #vtFree #vtFreeRoot .vt-nl{
    
    padding:var(--vt-sp-6);
    
  }
}

/* ══════════════════════════════════════════════════════════
   PHASE 2A · IMPLEMENTACIÓN ESTRUCTURAL — IFR TRAINER
   Cada regla responde a un hallazgo RESUELTO de PHASE 1.75.
   ══════════════════════════════════════════════════════════ */

/* H5 · La costura instrumento/datos es UNA línea */
#vtFree .vt-console .vt-card.is-dark{
  border-right:none;
  border-top-right-radius:0; border-bottom-right-radius:0;
}
#vtFree .vt-mini{
  border-top-left-radius:0; border-bottom-left-radius:0;
}

/* H6 · Dial visible de ~300 (el dibujo trae 5% de margen interno) */
#vtFree .vt-console .vt-inst .vt-pane{ max-width:316px; }

/* H7/H8 · Badges del dial: el pill se posa en el aro; OBS = disco */
#vtFree .vt-db-hdg{ top:52px; }
#vtFree .vt-db-obs{
  width:50px; height:50px; left:var(--vt-sp-4); bottom:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; padding:0;
}
#vtFree .vt-db-crs{ bottom:20px; }

/* H9/H10 · Las columnas gemelas laten igual: valores a cuerpo 20 */
#vtFree .vt-mini-row i{ font-size:var(--vt-fs-data-m); }
#vtFree .vt-mini-row.is-warn i{ color:var(--vt-warn-fg); }

/* H12 · Icono del mensaje: disco de 36 */
#vtFree .vt-instructor-ico{
  flex:0 0 36px; width:36px; height:36px; border-radius:50%;
  background:var(--sky); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
#vtFree .vt-instructor-ico svg{ stroke:#fff; }

/* Mensaje del mockup: caja SIEMPRE presente con dos líneas —
   evento del instructor (arriba, se colapsa vacío) + situación */
#vtFree #vtFreeRoot:not(.is-review) .vt-instructor{
  opacity:1; transform:none;
}
#vtFree .vt-msg-body{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
#vtFree .vt-msg-body #vtInstructorText{ font-weight:600; }
#vtFree .vt-msg-body #vtInstructorText:empty{ display:none; }
#vtFree .vt-msg-body .vt-situation{
  background:transparent; padding:0; margin:0;
  font-size:var(--vt-fs-body); color:inherit;
}

/* H20 · Transporte en UNA fila flanqueando el carril */
#vtFree .vt-nl-title{
  display:block; font-size:var(--vt-fs-caption); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin-bottom:var(--vt-sp-3);
}
#vtFree .vt-nl-transport{
  display:flex; align-items:center; gap:var(--vt-sp-2);
}
#vtFree .vt-nl-transport .vt-nl-track{ flex:1; min-width:0; }
#vtFree #vtNlPlay{ width:56px; min-height:48px; justify-content:center; }
#vtFree .vt-nl-times{ margin-top:var(--vt-sp-1);  }

/* H21 · Selector de velocidad único */
#vtFree .vt-nl-speedsel{ min-width:72px; min-height:48px; justify-content:center; font-family:var(--font-mono); }

/* H22 · Línea de estela + destructivo a la derecha */
#vtFree .vt-nl-foot{
  display:flex; align-items:center; gap:var(--vt-sp-2);
  flex-wrap:wrap; margin-top:var(--vt-sp-3);
}
#vtFree .vt-nl-foot .vt-row-label,
#vtFree .vt-nl-adj{ font-size:var(--vt-fs-body); color:var(--muted); }
#vtFree .vt-nl-foot .vt-nl-win{ min-height:36px; padding:2px var(--vt-sp-3); }
#vtFree #vtNlClear{ margin-left:auto; }

/* En vuelo, la banda muestra solo lo que el mockup muestra */
#vtFree #vtFreeRoot:not(.is-review) #vtRevPrev,
#vtFree #vtFreeRoot:not(.is-review) #vtRevNext,
#vtFree #vtFreeRoot:not(.is-review) #vtRevClose,
#vtFree #vtFreeRoot:not(.is-review) #vtNlExport{ display:none; }

/* ══════════════════════════════════════════════════════════
   PHASE 2A.1 · LAYOUT RECOVERY — estabilidad antes que píxel
   ------------------------------------------------------------
   Causa raíz 1: el full-bleed (margin 50%−50vw) revienta dentro
   de los contenedores reales de la app → consola fuera del
   lienzo + scroll horizontal. FUERA: el módulo vuelve a vivir
   dentro de su contenedor (el borde-a-borde literal pasa a 2B).
   Causa raíz 2: la cadena height:100% del mapa en un grid de
   altura automática es circular y Safari la explota. El SVG
   vuelve a su altura por aspecto (560:320): contenido SIEMPRE.
   El renderer no se toca: solo su contenedor.
   ══════════════════════════════════════════════════════════ */

/* móvil y global: sin paddings de escritorio en la fila de tiempos */
#vtFree .vt-nl-times{ padding:0; }

@media (min-width:821px) and (min-height:521px){
  /* 1 · fuera el full-bleed: contención total, cero scroll-x */
  #vtFree{
    margin-left:0; margin-right:0;
    padding-left:0; overflow-x:visible;
  }
  /* 2 · el mapa ocupa SU área: altura por aspecto, no por 100% */
  #vtFree #vtFreeRoot .vt-map{ height:auto; }
  #vtFree #vtFreeRoot .vt-map .vt-pane{
    width:100%; height:auto; max-height:none;
  }
  /* 3 · el zócalo vuelve al ancho del contenedor, sin descuadre */
  #vtFree #vtFreeRoot .vt-nl{ margin-right:0; }
  /* 4 · la fila de tiempos se alinea al carril solo aquí */
  #vtFree .vt-nl-times{ padding:0 152px 0 136px; }
}

/* ══════════════════════════════════════════════════════════
   PHASE 2A.3 · CALIBRACIÓN DE ESCALA (12 reglas, cero layout)
   ------------------------------------------------------------
   Causa del descuadre: las proporciones del mockup son del
   viewport de 1536, pero el módulo vive en un contenedor de
   1120 → 30.2% caía al suelo del clamp y el dial se estrangulaba.
   Se calibra en ABSOLUTOS del mockup: consola 464 · tarjeta del
   instrumento 354 (dial 300 + 24+24) · datos 110 · NAV 156 ·
   zócalo 180 de alto. Solo width/height/clamp/min/max/spacing.
   ══════════════════════════════════════════════════════════ */

@media (min-width:821px) and (min-height:521px){
  /* Consola: 464 del mockup (≈ +30% sobre los 340 efectivos) */
  /* Columna de datos: 110 del mockup */
  /* Instrumento: dial de 300 dentro de tarjeta de 354 */

  /* Renderer = escenario: llena el área central (sin deformar:
     el SVG conserva su aspecto y centra su contenido) */

  /* NAV derecho: 156 del mockup */
  #vtFree #vtFreeRoot .vt-panel{ width:clamp(156px, 10.2vw, 172px); }

  /* Playback: 180 de alto y su respiración */
  #vtFree #vtFreeRoot .vt-nl{ min-height:180px; }
  #vtFree .vt-nl-transport{ gap:var(--vt-sp-3); }
  #vtFree #vtNlPlay{ width:56px; min-height:50px; }
  #vtFree .vt-nl-foot{ margin-top:var(--vt-sp-4); }
}

/* Teléfono: el dial también debe dominar su consola */
@media (max-width:820px){
  #vtFree #vtFreeRoot .vt-nl{ min-height:0; }
}

/* ══════════════════════════════════════════════════════════
   PHASE 2A.4 · PANTALLA COMPLETA Y ORDEN
   ------------------------------------------------------------
   Dos fallos en dispositivo real: (1) el módulo quedaba dentro
   del contenedor de 1120px y sobraba media pantalla; (2) al
   comprimirse, los mínimos rígidos (dial 280–316, consola 430)
   desbordaban la consola y apilaban los mandos en vertical.
   Solución: el simulador se centra al viewport con transform
   (no crea scroll) y TODAS las medidas pasan a ser elásticas.
   ══════════════════════════════════════════════════════════ */

@media (min-width:821px) and (min-height:521px){
  /* 1 · el simulador usa la pantalla completa, sin full-bleed
     por márgenes negativos (esa técnica ya rompió en v139) */
  #vtFree{ position:static; transform:none; width:auto; margin:0; }

  /* 2 · columnas elásticas: la consola cede antes de desbordar */
  #vtFree #vtFreeRoot{
    grid-template-columns:minmax(0, 30%) minmax(0, 1fr);
  }

  /* 3 · la consola nunca se estrangula ni se desborda */
  #vtFree .vt-console{
    grid-template-columns:minmax(0,1fr) minmax(92px, 118px);
    min-width:0;
  }
  #vtFree .vt-console .vt-inst .vt-pane{
    width:100%; max-width:320px; min-width:0; margin-inline:auto;
  }
  #vtFree .vt-console > *{ min-width:0; }

  /* 4 · el escenario llena el centro */
  #vtFree #vtFreeRoot .vt-map .vt-pane{
    min-height:clamp(460px, 60vh, 720px);
  }

  /* 5 · mandos en fila, siempre (nunca columna) */
  #vtFree .vt-flyrow{ flex-wrap:nowrap; }
  #vtFree .vt-bugbar{ grid-template-columns:1fr 1fr; }

  /* 6 · mensaje y zócalo a lo ancho de su columna */
  #vtFree #vtFreeRoot .vt-instructor{ width:auto; }
  #vtFree #vtFreeRoot .vt-nl{ width:auto; }
}

/* ── PANTALLA COMPLETA, BIEN HECHA ─────────────────────────
   La app limita sus paneles: main 1120px y .tab-panel 800px en
   escritorio. Eso comprimía el simulador; forzar la salida con
   márgenes o transform lo cortaba. Correcto: ensanchar el
   contenedor SOLO cuando la pestaña del trainer está activa. */
@media (min-width:821px){
  /* v147: el ancho completo es SOLO del simulador. Home, lecciones,
     Learning y examen conservan su columna centrada de siempre —
     la condición es que la pantalla #vtFree esté visible. */
  main:has(#vtFree:not([hidden])){ max-width:none; }
  #tab-vor.active:has(#vtFree:not([hidden])){
    max-width:none; margin:0;
    padding-left:max(var(--vt-sp-4), env(safe-area-inset-left));
    padding-right:max(var(--vt-sp-4), env(safe-area-inset-right));
  }
}

/* ══════════════════════════════════════════════════════════
   v144 · AJUSTE AL VIEWPORT (100% de zoom)
   ------------------------------------------------------------
   A 33% de zoom todo cabía porque el viewport CSS era enorme;
   a 100% (≈1920×950) la suma consola + mapa 60vh + zócalo
   desbordaba en vertical y obligaba a hacer scroll. Ahora la
   cabina se dimensiona por la ALTURA disponible: el grid tiene
   altura explícita, así el mapa puede ocupar el resto sin
   cadenas circulares y sin mínimos que empujen la página.
   ══════════════════════════════════════════════════════════ */

@media (min-width:1024px) and (min-height:640px){
  /* La cabina ocupa la pantalla disponible (barra app + header
     del módulo + nota legal ≈ 190px) */
  #vtFree #vtFreeRoot{
    height:calc(100dvh - 190px);
    min-height:560px;
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:
      "console map"
      "nl      nl";
    grid-template-columns:clamp(360px, 26%, 470px) minmax(0,1fr);
  }

  /* El escenario llena la fila: ya no necesita min-height */
  #vtFree #vtFreeRoot .vt-map{ height:100%; min-height:0; }
  #vtFree #vtFreeRoot .vt-map .vt-pane{
    width:100%; height:100%; min-height:0; max-height:none;
  }

  /* La consola cabe en la misma altura; si el alto es justo,
     hace scroll interno en vez de estirar la página */
  #vtFree .vt-console{
    height:100%; min-height:0; overflow-y:auto; align-content:start;
  }
  /* El dial se adapta a la altura disponible (nunca desborda) */
  #vtFree .vt-console .vt-inst .vt-pane{ max-height:38dvh; }
  #vtFree .vt-console .vt-card.is-dark{ padding:var(--vt-sp-4); }

  /* Zócalo compacto para que la cabina respire arriba */
  #vtFree #vtFreeRoot .vt-nl{ min-height:0; padding:var(--vt-sp-4); }
  #vtFree .vt-nl-foot{ margin-top:var(--vt-sp-3); }
}

/* ══════════════════════════════════════════════════════════
   v145 · CONSOLA A PRUEBA DE COLAPSO
   ------------------------------------------------------------
   A 100% el grid de la consola colapsaba la tarjeta del
   instrumento a 0 (solo quedaban sus badges) y la columna de
   datos se salía por la izquierda; el overflow interno remataba
   el recorte. Se abandona el grid fluido: fila flex con ancho
   FIJO para los datos y base mínima real para el instrumento.
   Sin overflow interno, sin porcentajes, sin colapso posible.
   ══════════════════════════════════════════════════════════ */

@media (min-width:1024px){
  /* La consola es una pila; su primera fila es inst + datos */
  #vtFree .vt-console{
    display:flex !important; flex-direction:column;
    gap:var(--vt-sp-3); height:auto; overflow:visible;
    min-width:0;
  }
  /* El instrumento y su columna de datos, uno al lado del otro */
  #vtFree .vt-console .vt-inst{
    flex:0 0 auto; display:flex; justify-content:center;
    min-width:0; width:100%;
  }
  #vtFree .vt-console .vt-inst .vt-pane{
    width:100%; max-width:300px; max-height:none; min-width:200px;
  }
  #vtFree .vt-mini{
    flex:0 0 auto; width:auto;
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:var(--vt-sp-2) var(--vt-sp-4);
  }
  #vtFree .vt-mini-row{ min-width:0; }

  /* Columna de la cabina con ancho de trabajo garantizado */
  #vtFree #vtFreeRoot{
    grid-template-columns:minmax(380px, 30%) minmax(0,1fr);
    height:auto; min-height:0;
  }
  /* El escenario recupera altura propia (sin cadena de 100%) */
  #vtFree #vtFreeRoot .vt-map{ height:auto; }
  #vtFree #vtFreeRoot .vt-map .vt-pane{
    height:auto; min-height:clamp(420px, 56dvh, 660px); max-height:none;
  }
}

/* ── v146 · Modo claro: textos que viven SOBRE caja de color ──
   La inversión de la cara del instrumento (blanco→navy) también
   alcanzaba el curso seleccionado (texto blanco sobre la caja
   navy, font-size 19) y la bandera OFF (sobre caja ámbar): se
   volvían invisibles. Ambos conservan su blanco. */
html:not([data-theme="dark"]) #vtFree .vt-inst .vt-pane [font-size="19"],
html:not([data-theme="dark"]) #vtFree .vt-inst .vt-pane [font-size="13"]{
  fill:#FFFFFF;
}

/* ══════════════════════════════════════════════════════════
   v148 · CORRECCIONES DE iPAD PRO
   1) El mapa no rellenaba su columna: quedaba una banda con aire
      arriba y abajo, y eso arrimaba la barra del mapa al panel
      NAV. Se estira a la altura de la fila (que la marca la
      consola) y el SVG llena su caja centrando su contenido.
   2) "Reproducir" se cortaba dentro de un botón de 56 px.
   ══════════════════════════════════════════════════════════ */

@media (min-width:821px){
  /* 1 · el escenario ocupa toda la altura de la fila */
  #vtFree #vtFreeRoot .vt-map{ align-self:stretch; height:auto; }
  #vtFree #vtFreeRoot .vt-map .vt-pane{
    width:100%; height:100%; min-height:0; max-height:none;
  }
  /* la barra del mapa queda al pie de un mapa ya alto: sin choque */
  #vtFree .vt-map-tools{ bottom:var(--vt-sp-5); z-index:4; }

  /* 2 · el transporte respeta su etiqueta */
  #vtFree #vtNlPlay{ width:auto; min-width:112px; padding-inline:var(--vt-sp-4); }
}

/* Teléfono: el mapa conserva su banda propia (no hay columna que llenar) */
@media (max-width:820px){
  #vtFree #vtNlPlay{ width:auto; min-width:104px; }
}

/* ══════════════════════════════════════════════════════════
   v149 · iPAD HORIZONTAL
   1) Con poca altura el dial de 300 px consumía el presupuesto
      vertical y empujaba el zócalo fuera de pantalla: el
      instrumento se dimensiona por la ALTURA disponible.
   2) La barra de pestañas flotante de la app tapaba el borde
      inferior del mapa y el zócalo: la cabina reserva ese aire.
   ══════════════════════════════════════════════════════════ */

@media (min-width:821px){
  /* 2 · aire para la barra flotante de la app */
  #vtFree{ padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
}

/* 1 · altura escasa (iPad horizontal, portátiles): consola compacta */
@media (min-width:821px) and (max-height:1000px){
  #vtFree .vt-console .vt-inst .vt-pane{ width:min(300px, 32dvh); }
  #vtFree .vt-console{ row-gap:var(--vt-sp-2); }
  #vtFree .vt-console .vt-card.is-dark{ padding:var(--vt-sp-3); }
  #vtFree .vt-mini{ gap:var(--vt-sp-2) var(--vt-sp-3); padding:var(--vt-sp-2); }
  #vtFree .vt-console .vt-instructor{ min-height:0; margin-top:var(--vt-sp-2); }
  #vtFree #vtFreeRoot .vt-nl{ padding:var(--vt-sp-3); }
  #vtFree .vt-nl-foot{ margin-top:var(--vt-sp-2); }
}

/* ══════════════════════════════════════════════════════════
   v150 · iPHONE
   1) El mapa usaba el lienzo ancho del escritorio: en vertical
      se dibujaba como una banda con aire alrededor. Ahora el
      lienzo es cuadrado en teléfono (JS) y la tarjeta lo abraza
      sin reservar altura de más.
   2) El título del módulo se partía en dos líneas.
   3) La barra flotante de la app tapaba el pie de la consola.
   ══════════════════════════════════════════════════════════ */

@media (max-width:820px){
  #vtFree #vtFreeRoot .vt-map .vt-pane{ min-height:0; height:auto; max-height:none; }
  #vtFree{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  #vtFree .vt-head h2{ white-space:nowrap; }
  #vtFree .vt-console .vt-inst .vt-pane{ max-width:min(300px, 76vw); }
}
@media (max-width:420px){
  #vtFree .vt-head h2{ font-size:var(--vt-fs-h2); }
}

/* ── v152 · Declaraciones de alcance (Certification Gate 7 y 8) ── */
#vtFree .vt-pf-scope,
#vtFree .vt-rev-scope{
  margin:0; font-size:var(--vt-fs-caption); line-height:1.5; color:var(--muted);
}
#vtFree .vt-rev-scope{ margin-bottom:var(--vt-sp-2); }

/* ── v153 · Gate #11: el zócalo explica por qué está inerte ── */
#vtFree .vt-nl-hint{
  display:block; font-size:var(--vt-fs-caption); color:var(--muted);
  margin:calc(-1 * var(--vt-sp-2)) 0 var(--vt-sp-3);
}
#vtFree #vtFreeRoot.is-review .vt-nl-hint{ display:none; }

/* ── ÍTEM 15 · Degradación sin :has() ─────────────────────────
   El ancho completo del simulador se activa con
   `main:has(#vtFree:not([hidden]))`. En navegadores sin :has()
   (Safari < 15.4, Chrome < 105) la regla se ignora por completo:
   el simulador se dibuja dentro de la columna de 800/1120 px de
   la app. Degradación aceptada — la cabina sigue siendo usable,
   solo más estrecha. NO añadir un fallback por JS: sería lógica
   de presentación y el módulo está congelado. */

/* ══════════════════════════════════════════════════════════
   VISTA DE IMPRESIÓN (sin ventanas emergentes)
   El impreso se muestra dentro de la propia página: funciona en
   Safari móvil (que bloquea popups) y en la app nativa (donde
   WKWebView ignora window.open con URLs blob:).
   ══════════════════════════════════════════════════════════ */
.ph-printview{
  position:fixed; inset:0; z-index:100000; display:flex; flex-direction:column;
  background:#fff;
}
.ph-pv-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  background:var(--navy,#0B3C91); color:#fff;
}
.ph-pv-title{
  flex:1; font-size:13px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.ph-pv-btn{
  flex:0 0 auto; border:1px solid rgba(255,255,255,.5); background:transparent;
  color:#fff; font-family:inherit; font-size:13px; font-weight:600;
  padding:9px 14px; border-radius:10px; cursor:pointer;
}
.ph-pv-btn.is-primary{ background:var(--teal,#3DD9C5); border-color:var(--teal,#3DD9C5); color:#04263B; }
.ph-pv-btn:active{ transform:scale(.97); }
.ph-pv-close{
  flex:0 0 40px; width:40px; height:40px; border:none; background:transparent;
  color:#fff; font-size:20px; line-height:1; cursor:pointer; border-radius:50%;
}
.ph-printview iframe{
  flex:1 1 auto; width:100%; border:none; background:#fff;
  padding-bottom:env(safe-area-inset-bottom);
}