/* ══════════════════════════════════════════════════════════════
   PILOT HUB · FLIGHT REVIEW — panel de debrief sobre el mapa (F2+F3)
   Design system: navy #0B3C91 · sky #3FA9F5 · turquesa #3DD9C5
   El mapa NUNCA se cierra: el panel se monta encima y lo deja vivo.
   ══════════════════════════════════════════════════════════════ */

.fr-wrap { --fr-navy:#0B3C91; --fr-sky:#3FA9F5; --fr-turq:#3DD9C5;
  --fr-ink:#222; --fr-bg:#F5F7FA; --fr-mag:#E040FB;
  --fr-line:rgba(11,60,145,.12); --fr-mut:#5B6B85; }

/* ── Panel ───────────────────────────────────────────────── */
/* Altura de apilado: en la vista normal el panel vive DENTRO de la tarjeta
   y debe quedar por debajo del chrome de la app — la barra de módulos está
   en z-index 200 y el panel se le montaba encima. En pantalla completa la
   tarjeta sube a 3000 y su botonera a 3100, así que ahí el panel necesita
   más (ver .fr-lateral / .fr-sheet más abajo). */
.fr-panel{
  position:absolute; top:0; right:0; z-index:20;
  width:360px; height:100%;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-left:1px solid var(--fr-line);
  box-shadow:-12px 0 34px rgba(11,60,145,.14);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--fr-ink);
  transform:translateX(102%);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.fr-panel.fr-open{ transform:none; }

.fr-head{ padding:14px 16px 10px; border-bottom:1px solid var(--fr-line); flex:0 0 auto; }
.fr-title{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700;
  color:var(--fr-navy); letter-spacing:-.01em; }
.fr-title .fr-x{ margin-left:auto; }
.fr-scope{ margin-top:6px; font-size:11px; line-height:1.45; color:var(--fr-mut); }

.fr-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 16px 24px; }
.fr-sec{ margin-top:18px; }
.fr-sec:first-child{ margin-top:4px; }
.fr-h{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--fr-mut); margin-bottom:8px; }

/* ── Resumen ─────────────────────────────────────────────── */
.fr-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--fr-line); border:1px solid var(--fr-line); border-radius:10px; overflow:hidden; }
.fr-st{ background:#fff; padding:8px 6px; text-align:center; }
.fr-st b{ display:block; font-size:15px; font-weight:700; color:var(--fr-navy);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.fr-st span{ display:block; margin-top:2px; font-size:9px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--fr-mut); }
.fr-st em{ font-style:normal; font-size:10px; color:var(--fr-mut); }

/* ── Perfil vertical ─────────────────────────────────────── */
.fr-prof{ position:relative; background:#fff; border:1px solid var(--fr-line);
  border-radius:10px; padding:6px 8px 2px; }
.fr-prof svg{ display:block; width:100%; height:104px; cursor:crosshair; }
.fr-prof .fr-ax{ position:absolute; right:10px; font-size:9px; color:var(--fr-mut);
  font-family:ui-monospace,monospace; }
.fr-prof .fr-ax-hi{ top:6px; } .fr-prof .fr-ax-lo{ bottom:4px; }

/* ── Listas clicables ────────────────────────────────────── */
.fr-list{ display:flex; flex-direction:column; gap:4px; }
.fr-row{ display:flex; align-items:center; gap:9px; width:100%;
  padding:9px 10px; border:1px solid var(--fr-line); border-radius:9px;
  background:#fff; font:inherit; font-size:12.5px; color:var(--fr-ink);
  text-align:left; cursor:pointer; transition:background .14s,border-color .14s; }
.fr-row:hover{ background:#F2F7FF; }
.fr-row.fr-on{ border-color:var(--fr-mag); background:rgba(224,64,251,.07); }
.fr-row i{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; }
.fr-row .fr-lbl{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-row .fr-sub{ display:block; font-size:10.5px; color:var(--fr-mut); margin-top:1px; }
.fr-row time{ flex:0 0 auto; font-size:11px; color:var(--fr-mut);
  font-family:ui-monospace,monospace; font-variant-numeric:tabular-nums; }

/* ── Recomendaciones ─────────────────────────────────────── */
.fr-recs{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.fr-recs li{ position:relative; padding:9px 10px 9px 30px; font-size:12.5px; line-height:1.4;
  background:rgba(61,217,197,.10); border:1px solid rgba(61,217,197,.34);
  border-radius:9px; }
.fr-recs li::before{ content:"→"; position:absolute; left:11px; top:9px;
  color:var(--fr-turq); font-weight:700; }

/* ── Leyenda ─────────────────────────────────────────────── */
.fr-leg{ display:flex; flex-wrap:wrap; gap:8px 12px; }
.fr-leg span{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--fr-mut); }
.fr-leg i{ width:8px; height:8px; border-radius:50%; }

/* ── Barra de reproducción (sobre el mapa) ───────────────── */
.fr-play{ position:absolute; left:12px; right:384px; bottom:12px; z-index:19;
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:12px;
  background:rgba(255,255,255,.94); border:1px solid var(--fr-line);
  box-shadow:0 6px 22px rgba(11,60,145,.16);
  font-family:Inter,sans-serif; opacity:0; pointer-events:none;
  transition:opacity .2s; }
.fr-play.fr-open{ opacity:1; pointer-events:auto; }
.fr-btn{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:0;
  background:var(--fr-navy); color:#fff; font-size:14px; cursor:pointer; line-height:1; }
.fr-btn:active{ transform:scale(.94); }
.fr-track{ position:relative; flex:1 1 auto; height:26px; }
.fr-track input{ position:absolute; inset:0; width:100%; margin:0; z-index:2;
  -webkit-appearance:none; appearance:none; background:transparent; }
.fr-track input::-webkit-slider-runnable-track{ height:4px; border-radius:2px;
  background:linear-gradient(90deg,var(--fr-sky) var(--p,0%),var(--fr-line) var(--p,0%)); }
.fr-track input::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px;
  margin-top:-5px; border-radius:50%; background:#fff; border:2px solid var(--fr-navy); }
.fr-track input::-moz-range-track{ height:4px; border-radius:2px; background:var(--fr-line); }
.fr-track input::-moz-range-thumb{ width:12px; height:12px; border-radius:50%;
  background:#fff; border:2px solid var(--fr-navy); }
.fr-ticks{ position:absolute; left:7px; right:7px; top:16px; height:8px; z-index:1; }
.fr-ticks i{ position:absolute; top:0; width:3px; height:8px; border-radius:1px; cursor:pointer; }
.fr-clock{ flex:0 0 auto; font-size:12px; font-family:ui-monospace,monospace;
  color:var(--fr-navy); font-variant-numeric:tabular-nums; }
.fr-x{ background:transparent; border:0; font-size:18px; line-height:1;
  color:var(--fr-mut); cursor:pointer; padding:2px 4px; }

/* ── Avión y anillo de foco ──────────────────────────────── */
.fr-acft{ width:34px; height:34px; }
.fr-ring{ width:54px; height:54px; border-radius:50%;
  border:3px solid var(--fr-mag); box-shadow:0 0 0 6px rgba(224,64,251,.18);
  animation:frPulse 1.4s ease-out infinite; pointer-events:none; }
@keyframes frPulse{ 0%{transform:scale(.7);opacity:1} 100%{transform:scale(1.25);opacity:.25} }

/* Formatos flotantes: solo existen con el mapa a pantalla completa, donde
   la tarjeta está en z-index 3000 y su botonera en 3100. */
.fr-panel.fr-lateral, .fr-panel.fr-sheet{ z-index:3200; }
.fr-play.fr-lateral,  .fr-play.fr-sheet{ z-index:3190; }

/* ── En línea: un bloque más, debajo del mapa ─────────────────
   Es el formato de la vista normal. El panel no flota, no sube y no
   tapa el mapa: se lee como una sección de la tarjeta. */
.fr-panel.fr-inline{
  position:relative; top:auto; right:auto; bottom:auto;
  width:auto; height:auto; margin:10px 0 0;
  transform:none !important;
  border:1px solid var(--fr-line); border-radius:12px;
  box-shadow:0 2px 10px rgba(11,60,145,.06);
  background:#fff;
}
.fr-panel.fr-inline .fr-body{ max-height:58vh; }
.fr-panel.fr-inline .fr-head{ cursor:default; }
.fr-panel.fr-inline .fr-head::before{ display:none; }

/* ── Hoja inferior ───────────────────────────────────────────
   Se activa por clase (.fr-sheet, la pone el JS midiendo la TARJETA)
   y también por ancho de pantalla, como red de seguridad. */
.fr-panel.fr-sheet{
  top:auto; bottom:0; right:0; width:100%; height:62%;
  border-left:0; border-top:1px solid var(--fr-line);
  border-radius:16px 16px 0 0; box-shadow:0 -10px 30px rgba(11,60,145,.18);
  transform:translateY(102%); padding-bottom:env(safe-area-inset-bottom);
}
.fr-panel.fr-sheet.fr-open{ transform:none; }
.fr-panel.fr-sheet.fr-min{ transform:translateY(calc(100% - 108px)); }
.fr-panel.fr-sheet .fr-head{ padding-top:8px; cursor:pointer; }
.fr-panel.fr-sheet .fr-head::before{
  content:""; display:block; width:38px; height:4px; margin:0 auto 8px;
  border-radius:2px; background:var(--fr-line);
}
.fr-play.fr-sheet{ right:12px; bottom:calc(62% + 10px); }
.fr-play.fr-sheet.fr-min{ bottom:120px; }

@media (max-width:820px){
  .fr-panel{ top:auto; bottom:0; right:0; width:100%; height:62%;
    border-left:0; border-top:1px solid var(--fr-line);
    border-radius:16px 16px 0 0; box-shadow:0 -10px 30px rgba(11,60,145,.18);
    transform:translateY(102%); padding-bottom:env(safe-area-inset-bottom); }
  .fr-panel.fr-open{ transform:none; }
  .fr-panel.fr-min{ transform:translateY(calc(100% - 108px)); }
  .fr-head{ padding-top:8px; }
  .fr-head::before{ content:""; display:block; width:38px; height:4px; margin:0 auto 8px;
    border-radius:2px; background:var(--fr-line); }
  .fr-play{ right:12px; bottom:calc(62% + 10px); }
  .fr-panel.fr-min ~ .fr-play{ bottom:120px; }
  .fr-stats{ grid-template-columns:repeat(4,1fr); }
}