/* ==========================================================================
   componentes.css · Piezas compartidas entre la TV, la tablet y el lanzador.
   Cero hexadecimales: todo sale de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Entrada de pantalla. La misma en los dos dispositivos, para que el corte se
   sienta simultáneo aunque cada uno la dibuje por su cuenta.

   ⚠️ Es una ANIMACIÓN y no una transición con una clase que agrega el JS, y la
   diferencia importa: la primera versión ponía `opacity: 0` y sumaba la clase
   dentro de un requestAnimationFrame. En una pestaña de fondo —una TV con el
   navegador detrás de otra ventana, o volviendo del protector de pantalla— el
   navegador NO ejecuta requestAnimationFrame, así que la clase nunca llegaba y
   la pantalla se quedaba invisible. Negra, sin un solo error.

   Así, el estado natural del elemento es "visible": si la animación no corre,
   se ve igual. La animación es lo prescindible, no la visibilidad.
   -------------------------------------------------------------------------- */
.pantalla,
.panel {
  animation: entrar-pantalla var(--t-pantalla) var(--ease-out);
}

@keyframes entrar-pantalla {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

/* --------------------------------------------------------------------------
   Botón principal · el degradado del boceto, oscurecido hasta que aguanta
   texto blanco. Ver la nota de --gradiente-cta en tokens.css.
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--touch-cta);
  padding: 0 var(--space-8);
  border-radius: var(--radio-full);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--peso-black);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-accent);
  background-image: var(--gradiente-cta);
  box-shadow: var(--glow-cta);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}

.boton:active {
  transform: scale(0.97);
  box-shadow: var(--sombra-sm);
}

.boton:disabled {
  filter: grayscale(0.5) brightness(0.75);
  box-shadow: none;
  cursor: default;
}

.boton--principal {
  width: min(100%, 30rem);
}

/* --------------------------------------------------------------------------
   Premios · los chips del cierre
   -------------------------------------------------------------------------- */
.premios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.premio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radio-full);
  background: var(--surface-raised);
  font-size: var(--step-0);
  color: var(--text-secondary);
}

.premio__icono {
  font-size: 1.2em;
}

/* --------------------------------------------------------------------------
   Espera · el girador
   -------------------------------------------------------------------------- */
.girador {
  width: 3.5rem;
  height: 3.5rem;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: girar 900ms linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Aviso de conexión de la TV. Chico y abajo: es para quien monta el evento,
   no para el público, y no puede competir con el juego.
   -------------------------------------------------------------------------- */
.aviso {
  position: fixed;
  z-index: var(--z-overlay);
  bottom: var(--space-4);
  left: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radio-full);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  font-size: var(--step--2);
  color: var(--text-tertiary);
}

.aviso__punto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--casi);
  animation: latir 1.4s var(--ease-in-out) infinite;
}

@keyframes latir {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   Error flotante de la tablet
   -------------------------------------------------------------------------- */
.error-flotante {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  max-width: min(90vw, 34rem);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radio-md);
  background: var(--error-600);
  color: var(--white);
  font-size: var(--step--1);
  text-align: center;
  box-shadow: var(--sombra-lg);
}

/* --------------------------------------------------------------------------
   Confeti · canvas a pantalla completa, encima de todo y sin capturar toques
   -------------------------------------------------------------------------- */
.confeti {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Botón de pantalla completa · modo presentación

   Discreto en una esquina y semitransparente para no competir con el juego.
   Se esconde al entrar en pantalla completa: ahí la pantalla queda limpia y se
   sale con Esc, el botón "atrás" o recargando. Solo aparece donde el navegador
   soporta pantalla completa (kiosk.js no lo instala en iOS).
   -------------------------------------------------------------------------- */
.fs-boton {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radio-full);
  background: var(--surface-raised);
  color: var(--text-tertiary);
  opacity: 0.35;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.fs-boton:hover,
.fs-boton:focus-visible {
  opacity: 0.9;
}

.fs-boton svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}

/* En pantalla completa, fuera: modo presentación sin controles a la vista. */
body[data-pantalla-completa='1'] .fs-boton {
  display: none;
}

/* Tarjeta de ayuda para iPad: Safari no deja poner una página en pantalla
   completa, así que el botón explica cómo "Agregar a inicio" para verla sin la
   barra de direcciones. Va sobre el botón, en la misma esquina. */
.fs-ayuda {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + 3.5rem);
  z-index: var(--z-toast);
  max-width: min(20rem, calc(100vw - var(--space-6)));
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radio-lg);
  background: var(--surface-raised);
  box-shadow: var(--sombra-lg);
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: 1.4;
}

.fs-ayuda p {
  margin: 0;
}

.fs-ayuda p + p {
  margin-top: var(--space-3);
}

.fs-ayuda__titulo {
  color: var(--text);
  font-weight: 700;
}

.fs-ayuda__pie {
  color: var(--text-tertiary);
  font-size: var(--step--2);
}