/* COCKPIT — pantalla post-login (dirección ganadora del panel 2026-08-13).
   Todo namespaced bajo #cockpit: cero fugas al resto del shell. El fallback
   (renderDashboardWidgets) no usa nada de acá.
   Identidad: la de la landing Órbita — grafito, UN amarillo (#FFD11A),
   Unbounded para títulos, Martian Mono para datos. Radio casi nulo: esto
   es un instrumento, no una card. */

/* Fuentes SELF-HOST (Fase 0): sin CDN, sin FOUT de Google. Variables:
   un archivo por familia cubre todos los pesos. */
@font-face{
  font-family:'Martian Mono';
  src:url('/static/assets/fonts/martian-mono-var.woff2') format('woff2');
  font-weight:400 800; font-display:swap;
}
@font-face{
  font-family:'Unbounded';
  src:url('/static/assets/fonts/unbounded-var.woff2') format('woff2');
  font-weight:400 900; font-display:swap;
}

#cockpit{
  --ck-fondo:#0B0D11; --ck-panel:#14171D; --ck-panel2:#1A1E25;
  --ck-hair:rgba(235,240,248,.10); --ck-tinta:#EDF0F4; --ck-mut:#96A0B0;
  --ck-dim:#5E6878; --ck-acento:#FFD11A; --ck-ok:#3DDC5E; --ck-mal:#E4574B;
  --ck-mono:'Martian Mono',ui-monospace,Consolas,monospace;
  --ck-disp:'Unbounded',system-ui,sans-serif;

  /* z 600: arriba de los overlays de marca del shell (SUNSET, etc.) pero
     abajo del bento (1000+) y de los módulos que montan fixed encima */
  position:fixed; inset:0; z-index:600; overflow:auto;
  background:var(--ck-fondo); color:var(--ck-tinta);
  font:13px/1.5 system-ui,'Segoe UI',sans-serif;
  display:grid; grid-template-rows:auto auto 1fr auto;
}

/* ── barra de estado (28px, radio 0: instrumento) ─────────────────────── */
.ckBarra{
  display:flex; align-items:center; gap:18px; padding:0 14px; height:30px;
  border-bottom:1px solid var(--ck-hair); font-family:var(--ck-mono);
  font-size:10.5px; letter-spacing:.04em; color:var(--ck-mut);
  font-variant-numeric:tabular-nums;
}
.ckBarra .ckLed{ width:8px; height:8px; border-radius:50%; background:var(--ck-dim);
  flex:none; transition:background .3s }
.ckBarra .ckLed.on{ background:var(--ck-ok); box-shadow:0 0 6px var(--ck-ok) }
.ckBarra .ckLed.off{ background:var(--ck-mal); box-shadow:0 0 6px var(--ck-mal) }
.ckBarra b{ color:var(--ck-tinta); font-weight:600 }
.ckMarca{ font-family:var(--ck-disp); font-weight:800; font-size:11px;
  letter-spacing:-.02em; color:var(--ck-tinta) }
.ckMarca i{ font-style:normal; color:var(--ck-acento) }
.ckEmp{ margin-left:auto }
.ckCred{ color:var(--ck-acento); font-weight:600 }
/* [2026-08-17] Badge "sé qué plan tengo": chip siempre visible en la barra del cockpit. */
.ckPlan{ padding:1.5px 8px; border-radius:999px; font-size:9.5px; font-weight:700; letter-spacing:.06em;
  color:var(--ck-acento); background:color-mix(in oklab, var(--ck-acento) 14%, transparent);
  border:1px solid color-mix(in oklab, var(--ck-acento) 34%, transparent); white-space:nowrap; flex:none }
.ckPlanAdmin{ color:var(--ck-tinta); background:color-mix(in oklab, var(--ck-tinta) 12%, transparent);
  border-color:color-mix(in oklab, var(--ck-tinta) 30%, transparent) }

/* ── horizonte de discado (Fase 6: se dibuja solo con fuente real) ────── */
.ckHorizonte{ height:3px; background:var(--ck-panel2) }
.ckHorizonte i{ display:block; height:100%; width:0; background:var(--ck-acento) }

/* ── cuerpo: dock 72 · centro · hilo 280 ──────────────────────────────── */
.ckCuerpo{ display:grid; grid-template-columns:72px 1fr 280px; min-height:0 }
@media(max-width:1100px){ .ckCuerpo{ grid-template-columns:64px 1fr } .ckHilo{ display:none } }

.ckDock{ border-right:1px solid var(--ck-hair); padding:10px 8px;
  display:flex; flex-direction:column; gap:8px; align-items:center }
.ckDock button{
  width:52px; height:52px; border-radius:8px; border:1px solid var(--ck-hair);
  background:var(--ck-panel); color:var(--ck-mut); cursor:pointer;
  font-family:var(--ck-mono); font-size:10px; font-weight:600; letter-spacing:.02em;
  display:grid; place-items:center; gap:2px;
  transition:border-color .2s, color .2s, background .2s;
}
.ckDock button:hover{ border-color:#3A4150; color:var(--ck-tinta); background:var(--ck-panel2) }
.ckDock button:focus-visible{ outline:2px solid var(--ck-acento); outline-offset:2px }
.ckDock .ckSep{ width:36px; height:1px; background:var(--ck-hair); margin:4px 0 }
.ckDock .ckMas{ border-style:dashed }

/* ── centro ───────────────────────────────────────────────────────────── */
.ckCentro{ padding:16px 18px; min-width:0; display:flex; flex-direction:column; gap:16px }
.ckTitulo{ font-family:var(--ck-mono); font-size:9.5px; letter-spacing:.2em;
  color:var(--ck-dim); text-transform:uppercase; margin:0 0 8px }

.ckCinta{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px }
@media(max-width:1400px){ .ckCinta{ grid-template-columns:repeat(3,1fr) } }
.ckGauge{ background:var(--ck-panel); border:1px solid var(--ck-hair); border-radius:6px;
  padding:10px 12px 9px; min-height:64px }
/* display:block explícito: como spans inline, valor y etiqueta se montaban */
.ckGauge .ckk{ display:block; font-family:var(--ck-mono); font-size:8.5px; letter-spacing:.14em;
  color:var(--ck-dim); text-transform:uppercase }
.ckGauge .ckv{ display:block; font-family:var(--ck-mono); font-weight:800; font-size:26px;
  letter-spacing:-.05em; line-height:1.15; font-variant-numeric:tabular-nums }
.ckGauge .cks{ display:block; font-family:var(--ck-mono); font-size:9px; color:var(--ck-mut) }
.ckGauge.sinsenal .ckv{ font-size:12px; color:var(--ck-mal); letter-spacing:0 }
.ckGauge.sintrafico .ckv{ font-size:11px; color:var(--ck-dim); letter-spacing:0 }
.ckGauge .ckv .ok{ color:var(--ck-ok) } .ckGauge .ckv .ac{ color:var(--ck-acento) }

.ckPanelBox{ background:var(--ck-panel); border:1px solid var(--ck-hair);
  border-radius:6px; padding:12px 14px; overflow:auto }
.ckTabla{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
.ckTabla th{ font-family:var(--ck-mono); font-size:8.5px; letter-spacing:.14em;
  color:var(--ck-dim); text-transform:uppercase; text-align:left; padding:4px 10px 8px 0 }
.ckTabla td{ padding:7px 10px 7px 0; border-top:1px solid var(--ck-hair); font-size:12.5px }
.ckTabla .mono{ font-family:var(--ck-mono); font-size:11.5px }
.ckTabla .num{ text-align:right }
.ckAbrir{ font-family:var(--ck-mono); font-size:9.5px; font-weight:600; letter-spacing:.04em;
  padding:5px 12px; border-radius:5px; cursor:pointer;
  background:var(--ck-acento); color:#0B0D11; border:0;
  transition:transform .15s }
.ckAbrir:hover{ transform:translateY(-1px) }
.ckAbrir.gris{ background:var(--ck-panel2); color:var(--ck-mut); border:1px solid var(--ck-hair) }
.ckVacio{ color:var(--ck-dim); font-family:var(--ck-mono); font-size:11px; padding:10px 0 4px }

.ckDuo{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media(max-width:1200px){ .ckDuo{ grid-template-columns:1fr } }

/* ── hilo vivo + alertas ──────────────────────────────────────────────── */
.ckHilo{ border-left:1px solid var(--ck-hair); padding:16px 14px; display:flex;
  flex-direction:column; gap:10px; min-height:0; overflow:auto }
.ckEvento{ background:var(--ck-panel); border:1px solid var(--ck-hair); border-radius:6px;
  padding:9px 11px; font-family:var(--ck-mono); font-size:10.5px; color:var(--ck-mut) }
.ckEvento b{ display:block; color:var(--ck-acento); font-size:11.5px }
.ckEvento .h{ color:var(--ck-dim); font-size:9px }
.ckAlerta{ border-left:3px solid var(--ck-mal); background:var(--ck-panel);
  padding:8px 11px; font-size:11.5px; color:var(--ck-mut); border-radius:0 6px 6px 0 }

/* ── pie ──────────────────────────────────────────────────────────────── */
.ckPie{ display:flex; gap:20px; align-items:center; padding:0 14px; height:24px;
  border-top:1px solid var(--ck-hair); font-family:var(--ck-mono); font-size:9.5px;
  letter-spacing:.06em; color:var(--ck-dim) }
.ckPie a{ color:var(--ck-dim); text-decoration:none }
.ckPie a:hover{ color:var(--ck-tinta) }

@media (prefers-reduced-motion:reduce){
  #cockpit *{ transition:none !important; animation:none !important }
}