/* ════════════════════════════════════════════════════════════════════
   AION · Sistema de Diseño — tokens unificados (A)
   Única fuente de verdad para color, tipografía, espaciado, radios,
   sombras y motion. Todos los módulos lo consumen vía <link>.
   Mantiene compatibilidad con los nombres ya usados (--fg, --ok, etc).
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Marca · navy ── */
  --navy-950:#020610; --navy-900:#0a1626; --navy-800:#0d1d31; --navy-700:#0f2032; --navy-600:#16304a;
  /* ── Superficies (dark-first táctico) ── */
  --bg:var(--navy-950); --surface-0:#030911; --surface-1:#050b16; --surface-2:#07101d;
  --surface-3:#0a1626; --surface-4:#0f2032; --panel:#0b1422; --glass:rgba(7,14,24,.72);
  /* ── Bordes ── */
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14); --border-glow:rgba(224,181,61,.3);
  /* ── Texto ── */
  --fg:#eef3f9; --fg-2:#c4d0de; --fg-3:#8a9cb0; --fg-4:#5e7088;
  /* ── Rojo Clave (acento primario) ── */
  --red-500:#3dc3d6; --red-600:#11a7bd; --red-700:#0d8fa5; --red:var(--red-600); --red-bright:var(--red-500);
  --accent:var(--red-600); --accent-bright:var(--red-500);
  /* ── Gold ── */
  --gold-400:#e0b53d; --gold-500:#d4a017; --gold-600:#b8870f; --gold:var(--gold-400);
  /* ── Estados ── */
  --ok:#2fcf8f; --info:#5aa9f0; --warn:#e8b13a; --crit:#f04444; --viol:#9b8cff;
  --ok-bg:rgba(47,207,143,.14); --info-bg:rgba(90,169,240,.14); --warn-bg:rgba(232,177,58,.14);
  --crit-bg:rgba(240,68,68,.14); --viol-bg:rgba(155,140,255,.14); --gold-bg:rgba(224,181,61,.14);
  /* ── Tipografía ── */
  --f-head:'Montserrat',sans-serif; --f-body:'Inter',sans-serif; --f-mono:'JetBrains Mono',monospace;
  --fs-xs:10px; --fs-sm:12px; --fs-md:14px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:30px; --fs-3xl:44px;
  /* ── Espaciado (escala 4px) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  /* ── Radios ── */
  --r-sm:6px; --r-md:9px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-pill:999px;
  /* ── Sombras ── */
  --sh-1:0 2px 8px rgba(0,0,0,.3); --sh-2:0 8px 24px rgba(0,0,0,.4);
  --sh-3:0 18px 50px rgba(0,0,0,.55); --sh-4:0 30px 90px rgba(0,0,0,.7);
  --glow-ok:0 0 8px var(--ok); --glow-warn:0 0 8px var(--warn); --glow-crit:0 0 8px var(--crit); --glow-gold:0 0 8px var(--gold);
  /* ── Motion ── */
  --ease:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-bounce:cubic-bezier(.2,1.4,.4,1);
  --t-fast:.15s; --t-med:.25s; --t-slow:.4s;
  /* ── Z-index ── */
  --z-nav:20; --z-overlay:60; --z-panel:100000; --z-toast:100001;
}
@media (prefers-reduced-motion:reduce){ :root{ --t-fast:0s; --t-med:0s; --t-slow:0s; } }

/* ── Responsive base (D) — heredado por todos los módulos ── */
@media (max-width:1100px){
  :root{ --fs-2xl:26px; --fs-3xl:36px; }
}
@media (max-width:820px){
  :root{ --fs-xl:19px; --fs-2xl:23px; --fs-3xl:30px; }
  /* grids de tarjetas/KPIs colapsan a 2 columnas o 1 */
  .kpis,.grid,.grid3,.tiles,.tiles.three,.cards{ grid-template-columns:1fr 1fr !important; }
  /* paneles laterales fijos pasan a ancho completo */
  .panel,.picker,.alpanel,.elite-draw{ width:100% !important; max-width:100% !important; }
}
@media (max-width:560px){
  :root{ --sp-6:16px; --sp-8:22px; }
  .kpis,.grid,.grid3,.tiles,.tiles.three,.cards{ grid-template-columns:1fr !important; }
  /* apps con sidebar de 2 columnas → apilan */
  .app{ grid-template-columns:1fr !important; }
}
/* muro 4K: el video wall ya es fluido (grid de fr); el contenido no se estira de más */
@media (min-width:2200px){
  .body,.wrap{ max-width:1900px; margin-left:auto; margin-right:auto; }
}