/* tokens.css v2.1 — marca Igneo Lab: negro, blanco, rojo fuego, Bebas Neue */

/* Bebas Neue + Inter — SIN Arial en ningún stack */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Marca ── */
  --rojo:  #e02d00;
  --rojo2: #ff6a45;
  --glow:  rgba(224,45,0,.35);
  --bg:    #0a0a0a;
  --bg2:   #000;
  --card:  #131313;
  --card2: #0f0f0f;
  --txt:   #fff;
  --txt2:  #9a9aa2;
  --txt3:  #5f5f68;
  --line:  rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.16);

  /* ── Semáforo ── */
  --verde:    #22c55e;
  --amarillo: #eab308;
  --rojo-sem: #ff3b30;

  /* ── Gradientes ── */
  --g-fuego:  linear-gradient(135deg,#e02d00,#ff7a18);
  --g-brasa:  linear-gradient(135deg,#ff7a18,#ffc24b);
  --g-plasma: linear-gradient(135deg,#ff2d55,#e02d00);
  --g-noche:  linear-gradient(135deg,#1b2a4a,#0a0a0a);

  /* ── Tipografía — SIN Arial ── */
  --f-display: 'Bebas Neue', 'Impact', 'Haettenschweiler', condensed, sans-serif;
  --f-body:    'Inter', 'SF Pro Text', system-ui, -apple-system, sans-serif;
  --fw-display: 400;
  --ls-display: .04em;
  --ls-caps:    .12em;

  /* ── Color por persona (se sobreescribe al entrar) ── */
  --persona-color: var(--rojo);
  --persona-glow:  rgba(224,45,0,.3);

  /* Paleta fija por rol */
  --mike-color:    #3a5a7a;
  --iker-color:    #cc2200;
  --valeria-color: #c9a800;

  /* ── Espaciado / forma ── */
  --r:      8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;
  --gap:    16px;

  /* ── Shell ── */
  --sidebar-w: 88px;
  --topbar-h:  60px;

  /* ── Escala UI grande ── */
  --btn-h:     44px;   /* altura mínima de botón */
  --btn-h-lg:  52px;   /* botón grande / acción primaria */
  --btn-fz:    14px;
  --btn-fz-lg: 16px;
}

/* ── Anillo / eclipse (motivo de marca) ── */
/* .anillo envuelve el SVG, la etiqueta va centrada dentro */
.anillo {
  display: inline-grid;
  place-items: center;
  position: relative;
}
.anillo svg {
  transform: rotate(-90deg);
}
.anillo .anillo-label {
  position: absolute;
  font-family: var(--f-display);
  color: var(--txt);
  letter-spacing: .03em;
  line-height: 1;
}
.anillo-track {
  fill: none;
  stroke: rgba(255,255,255,.08);
}
.anillo-fill {
  fill: none;
  stroke-linecap: round;
}

/* ── Halo de portada (eclipse animado) ── */
.halo-ring {
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(224,45,0,.25);
  box-shadow:
    0 0 0 6px rgba(224,45,0,.08),
    0 0 40px rgba(224,45,0,.18),
    inset 0 0 20px rgba(224,45,0,.06);
  animation: halo-pulse 3s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(224,45,0,.08), 0 0 40px rgba(224,45,0,.18), inset 0 0 20px rgba(224,45,0,.06); }
  50%       { box-shadow: 0 0 0 10px rgba(224,45,0,.12), 0 0 60px rgba(224,45,0,.28), inset 0 0 30px rgba(224,45,0,.1); }
}

/* Loader circular (eclipse en carga) */
.eclipse-loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: var(--rojo);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }