/* ==========================================================================
   sofapop · Tokens del sistema "Tienda+"
   Común a la tele (css/tv.css) y al móvil (css/play.css).
   Cárgalo antes que tv-base.css / play-base.css.
   ========================================================================== */

/* --- Tipografía autoalojada: Roboto Flex variable (eje wght), subconjunto latino, 34 KB.
       Licencia SIL OFL 1.1 (fonts/OFL.txt). Cubre español: á é í ó ú ü ñ ¡ ¿ « » €. */
@font-face {
  font-family: "Roboto Flex";
  src: url("fonts/roboto-flex-latin-wght.woff2") format("woff2-variations"),
       url("fonts/roboto-flex-latin-wght.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Tipografía */
  --tg-font: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: var(--tg-font);   /* mismo valor, con el nombre del sistema en Claude */
  --tg-w-regular: 400;   /* texto, metadatos */
  --tg-w-medium: 500;    /* títulos, nombres, botones */
  --tg-w-strong: 600;    /* logo, código de sala, números grandes */
  --tg-tracking-title: -0.03em;   /* títulos grandes */
  --tg-tracking-code: 0.08em;     /* código de sala */

  /* Neutros */
  --tg-bg: #FFFFFF;
  --tg-ink: #1F1F1F;          /* texto principal */
  --tg-ink-2: #3C4043;        /* texto secundario fuerte */
  --tg-muted: #5E6366;        /* metadatos, ayudas (6,1:1 sobre blanco) */
  --tg-surface: #F1F3F4;      /* chips, botón secundario, fondos de avatar */
  --tg-surface-lilac: #F7F5FC;/* tarjetas suaves (pasos, avisos del anfitrión) */
  --tg-line: #E3E5E6;         /* separadores (la barra gris bajo la sala) */
  --tg-line-strong: #C4C7C9;  /* bordes discontinuos de "libre", inputs */

  /* Marca */
  --tg-primary: #6B3FD4;      /* botón principal, pestaña activa, logo */
  --tg-primary-dark: #4A23A0; /* texto sobre lila */
  --tg-primary-soft: #EBE3FF; /* fichas del código, pastillas, fondo ¡YA! */
  --tg-primary-ring: #D9CCFF; /* halo del botón grande del mando */
  --tg-focus: #C9B6FF;        /* aro de foco (mando de la tele) */

  /* Estados */
  --tg-host: #FFC83D;         /* corona del anfitrión, medalla oro */
  --tg-online: #1E8E3E;       /* punto "en línea" */
  --tg-online-text: #1E7A36;
  --tg-idle: #E37400;         /* punto "ausente / reconectando" */
  --tg-idle-text: #A15300;
  --tg-error: #B3261E;
  --tg-error-bg: #FCEEEE;
  --tg-warn-bg: #FFF4E0;
  --tg-warn-text: #6B4400;
  --tg-ok-bg: #E3F5E9;        /* palabra acertada, pastilla de aciertos */
  --tg-ok-text: #136B32;      /* texto sobre ok-bg y blanco (6,3:1) */
  --tg-medal-1: #FFC83D;
  --tg-medal-2: #D9DCE1;
  --tg-medal-3: #F0C7A0;

  /* Equipos */
  --tg-equipo-lila: var(--tg-primary);    /* texto blanco encima */
  --tg-equipo-naranja: var(--tg-idle);    /* texto tg-ink encima */

  /* Personajes (id → color). La forma va en personajes/<id>.svg */
  --tg-rojo: #ff4d4d;
  --tg-naranja: #ff9f1c;
  --tg-amarillo: #ffd60a;
  --tg-verde: #2ecc71;
  --tg-cian: #22d3ee;
  --tg-azul: #4d7cff;
  --tg-morado: #b36bff;
  --tg-rosa: #ff6fb5;

  /* Portadas de juego (color de fondo de cada ilustración) */
  --tg-duelo: #FF6B5A;
  --tg-canicas: #3E8E5A;
  --tg-cohete: #1C1F4A;
  --tg-fruta: #8FD3F4;
  --tg-rebote: #23377A;
  --tg-pompas: #6E3FC9;
  --tg-nimu: #1FA7A0;            /* marca */
  --tg-nimu-oscuro: #117A73;     /* fondo con texto blanco encima */
  --tg-nimu-tinta: #0B4A46;      /* texto turquesa sobre blanco */
  --tg-nimu-claro: #D7F3F1;
  --tg-rol-vigila: #2B2350;
  --tg-rol-adivina: var(--tg-host);
  --tg-nimu-pito: #D93A2B;       /* botón «¡Ni mu!»; texto blanco solo a 40 px o más (4,4:1) */
  --tg-rebobina: #E0457B;
  --tg-rebobina-disney: #E0457B;
  --tg-rebobina-cine: #E0457B;

  /* Espaciado (px a 1080p en la tele, donde 1rem = 32 px: space-8 = 1rem, space-20 = 2,5rem) */
  --space-1: 4px;    /* fichas del código (móvil), gajos del progreso */
  --space-2: 8px;    /* fichas del código (tele), icono y texto */
  --space-3: 12px;   /* chips del marcador, selector de personaje */
  --space-4: 16px;   /* margen mínimo del móvil, cuadrícula de juegos */
  --space-5: 20px;   /* relleno lateral de .tg-pantalla */
  --space-6: 24px;   /* bloques del mando y del marcador */
  --space-8: 32px;   /* secciones de la tele */
  --space-10: 40px;  /* margen del área de juego */
  --space-20: 80px;  /* cabecera y franja de la sala */

  /* Radios */
  --tg-r-pill: 9999px;   /* botones, chips, avatares, mandos: la forma por defecto */
  --r-ficha-m: 7px;      /* fichas del código (móvil) */
  --r-ficha: 14px;       /* fichas del código (tele), portada en el móvil */
  --r-campo: 16px;       /* campo del nombre, QR de la tele */
  --r-aviso: 18px;       /* .tg-aviso */
  --r-portada: 24px;     /* portada 16:9 en la tele */
  --r-escena: 32px;      /* #juego-area, banda de papel del móvil */
  --r-dialogo: 44px;     /* diálogo de pausa, carteles de las escenas */

  /* Movimiento: animar SOLO transform y opacity (regla de rendimiento de la tele) */
  --tg-ease: cubic-bezier(.2, .8, .2, 1);
  --tg-fast: 120ms;
  --tg-base: 200ms;
}