/* ===================================================================
   Karaoke.chat — tokens de diseño
   Skill: karaoke-design-system. Identidad propia: no replica MiTV ni
   ninguna plataforma comercial.
   =================================================================== */
:root{
  /* Superficies */
  --k-bg:#07070b;
  --k-bg-2:#0e0e16;
  --k-surface:#16161f;
  --k-surface-2:#1e1e2b;
  --k-line:#2a2a3a;

  /* Acentos — luces de escenario */
  --k-accent:#ff2d78;
  --k-accent-2:#21e6c1;
  --k-accent-3:#7c4dff;
  --k-warn:#ffb020;
  --k-danger:#ff4d4d;

  /* Texto */
  --k-text:#ffffff;
  --k-text-2:#c3c3d4;
  --k-text-3:#8b8ba3;

  --k-grad-hero:linear-gradient(135deg,#7c4dff 0%,#ff2d78 55%,#ff6a3d 100%);
  --k-grad-fade:linear-gradient(180deg,rgba(7,7,11,0) 0%,rgba(7,7,11,.55) 45%,rgba(7,7,11,.93) 82%,#07070b 100%);
  --k-grad-side:linear-gradient(90deg,rgba(7,7,11,.96) 0%,rgba(7,7,11,.75) 45%,rgba(7,7,11,0) 100%);

  /* Foco — el estado más importante del sistema */
  --k-focus-color:var(--k-accent-2);
  --k-focus-ring:3px solid var(--k-focus-color);
  --k-focus-glow:0 0 0 4px rgba(33,230,193,.28), 0 12px 34px rgba(0,0,0,.65);
  --k-focus-scale:1.06;

  /* Espaciado */
  --k-s1:4px; --k-s2:8px; --k-s3:12px; --k-s4:16px;
  --k-s5:24px; --k-s6:32px; --k-s7:48px; --k-s8:64px;

  --k-radius:14px; --k-radius-lg:22px; --k-radius-pill:999px;

  /* Tipografía */
  --k-font:"Inter","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --k-fs-display:40px; --k-fs-h1:30px; --k-fs-h2:22px;
  --k-fs-body:16px;    --k-fs-meta:13px;

  --k-dur:160ms; --k-ease:cubic-bezier(.2,.7,.3,1);

  --k-card-w:210px; --k-card-gap:var(--k-s4);
  --k-safe:var(--k-s5);
  --k-rail-pad:22px;          /* aire para que el glow del foco no se recorte */
  --k-nav-w:88px;             /* rail lateral colapsado */
  --k-nav-w-open:300px;
  --k-tap:48px;               /* altura mínima táctil/enfocable */
}

/* ---------- Móvil ---------- */
@media (max-width:600px){
  :root{
    --k-card-w:144px; --k-fs-display:26px; --k-fs-h1:22px; --k-fs-h2:17px;
    --k-fs-body:15px; --k-fs-meta:12px; --k-safe:var(--k-s4);
    --k-nav-w:0px; --k-rail-pad:14px;
  }
}

/* ---------- Tablet ---------- */
@media (min-width:601px) and (max-width:1023px){
  :root{ --k-card-w:172px; --k-fs-display:34px; --k-fs-h1:26px; }
}

/* ---------- TV 1080p ----------
   Se activa por ancho O por body.tv. Nunca solo por ancho: un monitor de
   1920 no es un televisor, y un Fire TV Stick reporta 1920 lógico. */
@media (min-width:1600px){ :root{ --k-tv:1; } }

body.tv{
  --k-fs-display:64px; --k-fs-h1:44px; --k-fs-h2:32px;
  --k-fs-body:24px;    --k-fs-meta:19px;
  --k-card-w:300px;    --k-card-gap:var(--k-s5);
  --k-safe:48px;       --k-rail-pad:34px;
  --k-nav-w:104px;     --k-nav-w-open:340px;
  --k-tap:64px;
  --k-focus-scale:1.08;
  --k-focus-ring:4px solid var(--k-focus-color);
  --k-focus-glow:0 0 0 6px rgba(33,230,193,.30), 0 18px 46px rgba(0,0,0,.75);
}

/* ---------- TV 4K ---------- */
@media (min-width:2560px){
  body.tv{
    --k-fs-display:96px; --k-fs-h1:64px; --k-fs-h2:44px;
    --k-fs-body:32px;    --k-fs-meta:26px;
    --k-card-w:440px;    --k-safe:80px; --k-nav-w:140px; --k-tap:84px;
  }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  :root{ --k-dur:1ms; --k-focus-scale:1; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}