/* Centro de Mando · tokens de diseño (DISENO.md §2). Público y sin secretos: lo usan el panel y las páginas de acceso.
   Regla semántica: cian = holograma / interactivo / información (NUNCA estado) · verde = solo «bien» · ámbar = atención
   · rojo = falla · gris azulado = dormido / sin dato · oro = solo juego (rango, XP, logros). */

@property --barre { syntax: '<angle>'; inherits: false; initial-value: 360deg; }

:root {
  color-scheme: dark;

  /* ——— 2.1 colores ——— */
  --bg: #03070c;
  --bg-1: #06101a;
  --bg-2: #0a1824;
  --panel: #08141f;
  --panel-2: #0c1e2e;
  --mod-a: #112a3c;
  --mod-b: #07121c;
  --velo: rgba(3, 7, 12, .985);
  --linea: rgba(110, 214, 255, .20);
  --linea-2: rgba(110, 214, 255, .42);
  --linea-ctl: #407f9a;
  --cian: #5fe3ff;
  --cian-2: #2cc4ea;
  --cian-3: #14708c;
  --cian-claro: #a9f1ff;
  --cian-tinte: rgba(95, 227, 255, .12);
  --ok: #3ef0a0;
  --atencion: #ffb547;
  --falla: #ff5c70;
  --falla-texto: #ffc4cc;
  --dormido: #8399a7;
  --dormido-celda: #4d6575;
  --oro: #ffd36a;
  --ok-tinte: rgba(62, 240, 160, .08);
  --atencion-tinte: rgba(255, 181, 71, .08);
  --falla-tinte: rgba(255, 92, 112, .09);
  --oro-tinte: rgba(255, 211, 106, .10);
  --noche: rgba(60, 80, 170, .22);
  --texto: #e6f7ff;
  --texto-2: #abc8d6;
  --texto-3: #86a6b6;
  --sobre-cian: #021219;
  --sobre-estado: #1a0508;

  /* ——— 2.2 tipografía ——— */
  --f-tit: "Space Grotesk", system-ui, sans-serif;
  --f-txt: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ——— 2.3 espaciado y medidas ——— */
  --s-1: 4px; --s-2: 6px; --s-3: 8px; --s-4: 10px; --s-5: 12px;
  --s-6: 16px; --s-7: 22px; --s-8: 28px; --s-9: 40px;
  --toque: 44px;
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --gut: 16px;
  --hdr: calc(54px + var(--sa-t));
  --franja: 30px;
  --dock: calc(124px + var(--sa-b));
  --ancho-vista: 1500px;
  --ancho-sala: 1320px;

  /* ——— 2.5 chaflanes ——— */
  --ch: 10px; --ch-s: 7px; --ch-xs: 5px;
  --poly: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  --poly-s: polygon(var(--ch-s) 0, 100% 0, 100% calc(100% - var(--ch-s)), calc(100% - var(--ch-s)) 100%, 0 100%, 0 var(--ch-s));
  --poly-xs: polygon(var(--ch-xs) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ch-xs));
  --poly-der: polygon(0 0, calc(100% - var(--ch-s)) 0, 100% var(--ch-s), 100% 100%, 0 100%);
  --poly-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  /* ——— 2.6 brillos (lista cerrada) ——— */
  --brillo-nucleo: 0 0 12px rgba(95, 227, 255, .6);
  --sombra-hoja: 0 -8px 28px rgba(0, 0, 0, .55);

  /* ——— 2.7 capas ——— */
  --z-fondo: -1; --z-escena: 0; --z-sala: 40; --z-warp: 45; --z-hud: 60; --z-hojita: 61; --z-xp: 75;
  --z-velo: 79; --z-hoja: 80; --z-arranque: 90; --z-saltar: 100;

  /* ——— 2.8 movimiento ——— */
  --e-sale: cubic-bezier(.2, .8, .2, 1);
  --e-std: cubic-bezier(.4, 0, .2, 1);
  --e-fuerte: cubic-bezier(.7, 0, .3, 1);
  --e-warp: cubic-bezier(.6, 0, .2, 1);
  --e-rayos: cubic-bezier(.4, 0, .3, 1);
  --e-paquete: cubic-bezier(.55, 0, .25, 1);
  --e-onda: cubic-bezier(.2, .7, .3, 1);
  --t-1: 120ms; --t-2: 220ms; --t-3: 380ms; --t-4: 450ms; --t-5: 780ms; --t-6: 1100ms;
}

/* PC: (min-width: 1100px) and (min-height: 600px) */
@media (min-width: 1100px) and (min-height: 600px) {
  :root { --gut: 22px; --hdr: 58px; --franja: 0px; --dock: 66px; }
}