/* ═══════════════════════════════════════════════════════════════════
   TVAZAR Digital — tokens del design system.

   Traídos del sistema «TVAZAR Digital Design System» (Claude Design).
   La metáfora: un televisor encendido en una tienda oscura. El chasis
   es casi negro y la ÚNICA luz del sistema es el neón de las cifras;
   todo lo demás es estructura.

   Dos acentos y solo dos: verde neón = resultados, en vivo y acción
   primaria; ámbar = dinero, premios y cuenta atrás. El rojo se reserva
   para EN VIVO y lo destructivo. El azul y el oro vienen del logotipo
   y viven SOLO en la marca — jamás en un dato.
   ═══════════════════════════════════════════════════════════════════ */

/* Tipografías del sistema. Sustitución declarada: no hay archivos de
   marca, así que son stand-ins de Google Fonts (ver readme del DS). */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&family=Barlow:wght@400;500;600;700&display=swap");

:root {
    /* ── Neutrales: el televisor apagado ─────────────────────────── */
    --tv-black: #04070A;
    --tv-ink-900: #070C10;
    --tv-ink-800: #0B1317;
    --tv-ink-700: #101B20;
    --tv-ink-600: #16242A;
    --tv-ink-500: #1F323A;
    --tv-ink-400: #2B434D;
    --tv-slate-400: #5D7885;
    --tv-slate-300: #8AA5B0;
    --tv-slate-200: #BACBD2;
    --tv-white: #EAF6F2;

    /* ── Verde neón: resultados en vivo, la señal primaria ───────── */
    --green-neon: #3BFF7D;
    --green-500: #1FE066;
    --green-600: #12B953;
    --green-700: #0A8A3D;
    --green-950: #062012;

    /* ── Ámbar: cifras, premios, lectura secundaria ──────────────── */
    --amber-neon: #FFD028;
    --amber-500: #F6B31C;
    --amber-600: #D9930C;
    --amber-950: #241A02;

    /* ── Azul y oro del logotipo: solo marca ─────────────────────── */
    --blue-500: #4FA3F7;
    --blue-300: #8FCBFF;
    --blue-800: #123055;
    --gold-500: #F6C445;

    /* ── Estado ──────────────────────────────────────────────────── */
    --red-live: #FF3B3B;
    --red-600: #D91F1F;
    --red-950: #2A0808;
    --violet-500: #9C6BFF;

    /* ── Alias semánticos: esto es lo que se usa en los componentes ─ */
    --bg-app: var(--tv-black);
    --bg-screen: var(--tv-ink-900);
    --surface-panel: var(--tv-ink-800);
    --surface-card: var(--tv-ink-700);
    --surface-raised: var(--tv-ink-600);
    --surface-led: #050D0A;
    --surface-overlay: rgba(4, 7, 10, .78);

    --border-subtle: rgba(138, 165, 176, .14);
    --border-default: rgba(138, 165, 176, .24);
    --border-strong: rgba(138, 165, 176, .40);
    --border-neon: rgba(59, 255, 125, .55);
    --border-amber: rgba(255, 208, 40, .5);

    --text-primary: var(--tv-white);
    --text-secondary: var(--tv-slate-200);
    --text-muted: var(--tv-slate-400);
    --text-inverse: var(--tv-ink-900);
    --text-led: var(--green-neon);
    --text-led-dim: rgba(59, 255, 125, .28);
    --text-numeric: var(--amber-neon);
    --text-link: var(--green-neon);
    --text-link-hover: #8CFFB4;

    --accent-primary: var(--green-neon);
    --accent-primary-press: var(--green-500);
    --accent-secondary: var(--amber-neon);
    --accent-brand-blue: var(--blue-500);

    --state-live: var(--red-live);
    --state-win: var(--green-neon);
    --state-pending: var(--amber-neon);
    --state-lost: var(--tv-slate-400);
    --state-disabled-bg: var(--tv-ink-600);
    --state-disabled-text: rgba(138, 165, 176, .45);

    --focus-ring: rgba(59, 255, 125, .65);
    --scanline: rgba(138, 165, 176, .045);

    /* ── Tipografía: tres familias, roles NO intercambiables ─────── */
    --font-display: "Chakra Petch", "Segoe UI", sans-serif;   /* títulos, botones, etiquetas */
    --font-led: "Share Tech Mono", ui-monospace, monospace;   /* TODO número, reloj, momio, ticker */
    --font-body: "Barlow", "Helvetica Neue", sans-serif;      /* interfaz, prosa, avisos */
    --font-mono: "Share Tech Mono", ui-monospace, monospace;

    --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px;
    --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 48px;
    --fs-5xl: 64px; --fs-6xl: 88px; --fs-7xl: 120px;

    --lh-tight: 1; --lh-snug: 1.15; --lh-normal: 1.45; --lh-loose: 1.65;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

    /* El LED y el display SIEMPRE van tracked out */
    --ls-led: 0.08em;
    --ls-display: 0.02em;
    --ls-caps: 0.14em;
    --ls-body: 0;
    --ls-tight: -0.01em;

    /* ── Espaciado: base de 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; --sp-16: 64px;

    /* Radios: los paneles se redondean como la barra LED del logotipo */
    --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;
    --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px;

    --bw-hair: 1px; --bw-thin: 1.5px; --bw-thick: 2px; --bw-frame: 3px;

    --container-max: 1240px; --sidebar-w: 264px; --topbar-h: 64px; --tv-safe: 48px;
    --pad-card: var(--sp-5); --pad-panel: var(--sp-6);

    /* ── Movimiento: funcional, nunca decorativo ─────────────────── */
    --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-tick: 1000ms;
    --ease-out: cubic-bezier(.16, .84, .44, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --ease-snap: cubic-bezier(.2, 1.3, .4, 1);

    --z-sticky: 10; --z-overlay: 100; --z-dialog: 200; --z-toast: 300;

    /* ── Elevación: sombras negras profundas para lo que FLOTA ───── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .55);
    --shadow-lg: 0 14px 38px rgba(0, 0, 0, .6);
    --shadow-inset-top: inset 0 1px 0 rgba(234, 246, 242, .06);
    --shadow-inset-led: inset 0 0 32px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(59, 255, 125, .10);

    /* ── Glows de neón: luz EMITIDA, nunca profundidad ───────────── */
    --glow-green-sm: 0 0 6px rgba(59, 255, 125, .55);
    --glow-green-md: 0 0 14px rgba(59, 255, 125, .5), 0 0 34px rgba(59, 255, 125, .22);
    --glow-green-lg: 0 0 22px rgba(59, 255, 125, .6), 0 0 64px rgba(59, 255, 125, .28);
    --glow-amber-md: 0 0 14px rgba(255, 208, 40, .5), 0 0 34px rgba(255, 208, 40, .2);
    --glow-red-md: 0 0 10px rgba(255, 59, 59, .7), 0 0 26px rgba(255, 59, 59, .3);

    --text-glow-green: 0 0 8px rgba(59, 255, 125, .75), 0 0 22px rgba(59, 255, 125, .35);
    --text-glow-amber: 0 0 8px rgba(255, 208, 40, .7), 0 0 22px rgba(255, 208, 40, .3);
    --text-glow-red: 0 0 8px rgba(255, 59, 59, .75), 0 0 22px rgba(255, 59, 59, .3);

    /* ── Mobiliario de pantalla ──────────────────────────────────── */
    --gradient-panel: linear-gradient(180deg, rgba(234, 246, 242, .045), rgba(234, 246, 242, 0) 60%);
    --gradient-led-bar: linear-gradient(180deg, #0A1512 0%, #040A08 55%, #08120F 100%);
    --gradient-protect-bottom: linear-gradient(180deg, rgba(4, 7, 10, 0), rgba(4, 7, 10, .92));
    --gradient-brand-sweep: linear-gradient(90deg, var(--blue-500), var(--green-neon) 55%, var(--amber-neon));
    --scanlines: repeating-linear-gradient(180deg, rgba(138, 165, 176, .05) 0 1px, transparent 1px 3px);
    --blur-overlay: blur(14px);
    --focus-shadow: 0 0 0 2px var(--tv-ink-900), 0 0 0 4px var(--focus-ring);
}

/* ── Utilidades del sistema ──────────────────────────────────────── */

/* TODO número va en LED con su glow: es la única luz de la marca. */
.tv-led {
    font-family: var(--font-led);
    letter-spacing: var(--ls-led);
    color: var(--text-led);
    text-shadow: var(--text-glow-green);
}

.tv-led.ambar {
    color: var(--text-numeric);
    text-shadow: var(--text-glow-amber);
}

/* Micro-etiqueta en mayúsculas: HOY · 20 DE AGOSTO, PREMIO, EN VIVO. */
.tv-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* El chasis LED: ventana encendida con vidrio hundido y bloom arriba.
   UNO por vista — es el héroe; lo demás son tarjetas. */
.tv-panel-led {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--gradient-led-bar);
    border: 1px solid rgba(59, 255, 125, .18);
    box-shadow: var(--glow-green-sm), var(--shadow-inset-led);
}

.tv-panel-led::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--scanlines);
    opacity: .7;
    pointer-events: none;
}

.tv-panel-led::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--green-neon), transparent);
    opacity: .8;
}

/* ── Animaciones canónicas (cuatro, y ninguna decorativa) ────────── */
@keyframes tv-pulse { 0%, 100% { opacity: 1; box-shadow: var(--glow-red-md) } 50% { opacity: .35; box-shadow: none } }
@keyframes tv-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: .2 } }
@keyframes tv-marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
@keyframes tv-flicker { 0%, 96%, 100% { opacity: 1 } 97% { opacity: .72 } 98% { opacity: .95 } }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important }
}