/* ==========================================================================
   components.css · Los componentes del kiosco.
   El crítico es .opcion (AnswerButton): es donde ocurre el juego.
   ========================================================================== */

/* ==========================================================================
   AnswerButton · el componente crítico
   ========================================================================== */
.opciones {
  display: grid;
  gap: var(--touch-gap);
  /* stretch: las tres hermanas crecen con la más alta. Tres botones de
     distinta altura se ven rotos. */
  align-items: stretch;
}

.opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  min-height: var(--touch-tv);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);

  /* Los tres botones son visualmente IDÉNTICOS en reposo. Colorearlos
     distinto sería una pista visual falsa que arruina el juego. */
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-md);
  text-align: left;

  transition:
    transform var(--dur-instant) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);

  /* Aparición escalonada: el stagger de 60ms guía la lectura de arriba hacia
     abajo y es la animación con mejor relación costo/beneficio del proyecto.
     El delay lo setea el JS con --i. */
  animation: opcion-entra var(--dur-fast) var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes opcion-entra {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.opcion__token {
  display: grid;
  place-items: center;
  width: clamp(52px, 6.5vh, 76px);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--accent);
  /* ⚠️ NUNCA blanco sobre --teal-500: 2.83:1. El ink-900 da 5.89:1. */
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.opcion__texto {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-semibold);
  line-height: 1.28;
  /* Alineado a la izquierda: centrado, opciones de distinta longitud crean un
     borde irregular difícil de escanear de un vistazo. */
  text-align: left;
  text-wrap: pretty;
}

.opcion__icono {
  width: clamp(34px, 4vh, 48px);
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* --- Estados --- */
.opcion[data-estado='presionada'] {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  transform: scale(0.97);
}
.opcion[data-estado='presionada'] .opcion__token { background: var(--teal-400); }

.opcion[data-estado='correcta'] {
  background: var(--success-500);
  border-color: var(--success-300);
  color: var(--text-on-accent);
  box-shadow: var(--glow-success);
  animation: acierto 520ms var(--ease-spring);
}
.opcion[data-estado='correcta'] .opcion__token {
  background: var(--success-700);
  color: var(--white);
}
.opcion[data-estado='correcta'] .opcion__icono { opacity: 1; }

@keyframes acierto {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.opcion[data-estado='incorrecta'] {
  background: var(--error-600);
  border-color: var(--error-300);
  color: var(--white);
  box-shadow: var(--glow-error);
  animation: sacudir 300ms var(--ease-in-out);
}
.opcion[data-estado='incorrecta'] .opcion__token {
  background: var(--error-700);
  color: var(--white);
}
.opcion[data-estado='incorrecta'] .opcion__icono { opacity: 1; }

@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

.opcion[data-estado='atenuada'] {
  opacity: 0.35;
  box-shadow: none;
}

/* Deshabilitar en el mismo tick del evento: un doble toque nervioso en una TV
   capacitiva es la norma, no la excepción. */
.opciones[data-bloqueado] .opcion { pointer-events: none; }

/* ==========================================================================
   CTA principal
   ========================================================================== */
.cta {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--touch-tv-cta);
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-pill);

  background: var(--white);
  color: var(--teal-900);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-caps, 0.06em);
  text-transform: uppercase;
  box-shadow: var(--shadow-lg);

  transition:
    transform var(--dur-instant) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.cta[data-estado='presionada'] { transform: scale(0.97); }

.cta:disabled {
  opacity: 0.4;
  box-shadow: none;
  pointer-events: none;
}

/* El CTA de atracción late con escala, nunca con opacidad: un botón que se
   desvanece parece deshabilitado. */
.cta--pulsa { animation: latir 2400ms var(--ease-in-out) infinite; }

@keyframes latir {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* ==========================================================================
   TimerRing
   ========================================================================== */
.timer {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(104px, 13vh, 168px);
  aspect-ratio: 1;
  transition: opacity var(--dur-normal) var(--ease-out);
}
.timer[hidden] { display: none; }

.timer__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);      /* que empiece a vaciarse desde arriba */
}

.timer__pista {
  fill: none;
  stroke: var(--surface);
  stroke-width: 10;
}

.timer__progreso {
  fill: none;
  stroke: var(--teal-300);
  stroke-width: 10;
  stroke-linecap: round;
  /* 2πr con r=52 → 326.7. El JS mueve stroke-dashoffset. */
  stroke-dasharray: 326.7;
  stroke-dashoffset: 0;
  transition: stroke var(--dur-normal) var(--ease-out);
}

.timer__numero {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1;
}

.timer[data-tramo='aviso'] .timer__progreso { stroke: var(--warning-500); }
.timer[data-tramo='aviso']  { animation: pulso 1000ms var(--ease-in-out) infinite; }
.timer[data-tramo='critico'] .timer__progreso { stroke: var(--error-500); }
.timer[data-tramo='critico'] { animation: pulso 560ms var(--ease-in-out) infinite; }

@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ==========================================================================
   ProgressDots · el color solo no basta, siempre van con el texto al lado
   ========================================================================== */
.puntos { display: flex; gap: var(--space-3); justify-content: center; }

.punto {
  width: 14px;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 2px solid var(--border);
  transition: all var(--dur-fast) var(--ease-out);
}
.puntos--grandes .punto { width: 22px; border-width: 3px; }

.punto[data-estado='actual'] {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}
.punto[data-estado='correcta'] {
  background: var(--success-500);
  border-color: var(--success-500);
}
.punto[data-estado='incorrecta'] {
  background: var(--error-500);
  border-color: var(--error-500);
}

.progreso { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

/* ==========================================================================
   Badges de línea de producto
   Los colores de línea aparecen SOLO acá, en el chip del panel y en la
   tarjeta de refuerzo. Nunca en los botones de respuesta.
   ========================================================================== */
.lineas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Los logos de línea son arte a color con el wordmark en gris oscuro: están
   diseñados para fondo blanco. Sobre el teal oscuro del kiosco el wordmark
   desaparece, así que el badge le pone su propio fondo claro en lugar de
   recolorear el logo (recolorear un logo de marca no es una opción). */
.linea {
  display: grid;
  place-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--white);
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
}
.linea img { width: clamp(78px, 11vw, 118px); height: auto; }

.linea--mujer    { border-color: color-mix(in srgb, var(--mujer-500) 55%, transparent); }
.linea--defensas { border-color: color-mix(in srgb, var(--defensas-500) 55%, transparent); }
.linea--estres   { border-color: color-mix(in srgb, var(--estres-500) 55%, transparent); }

/* ==========================================================================
   Campos de formulario
   ========================================================================== */
.campo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--touch-tv-cta);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  border: 2px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.campo[data-foco] { border-color: var(--border-strong); }
.campo[data-error] { border-color: var(--error-500); }

.campo__input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--fw-semibold);
  color: var(--text);
  caret-color: var(--accent);
}
.campo__input::placeholder { color: var(--text-tertiary); opacity: 0.5; }

/* Cursor simulado: el input real está readonly en modo kiosco para que no se
   dispare el teclado del sistema, así que hay que mostrar que está activo. */
.campo[data-foco] .campo__input::after { content: ''; }
.campo__cursor {
  width: 3px;
  height: 1.1em;
  background: var(--accent);
  animation: parpadeo 1100ms steps(1) infinite;
}
@keyframes parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* El nombre se guarda en mayúsculas (ver server/services/nombre.js): el input
   lo muestra así desde la primera tecla para que no haya sorpresa al enviar. */
.campo__input--mayus { text-transform: uppercase; }

/* El teléfono con dígitos tabulares y espaciado: los grupos 4-3-3 se leen de
   un vistazo y los números no bailan al ir apareciendo. */
.campo__input--tel {
  letter-spacing: 0.08em;
  font-weight: var(--fw-bold);
}

.campo__error {
  min-height: 1.6em;
  font-size: var(--step-0);
  font-weight: var(--fw-medium);
  color: var(--error-300);
  text-align: center;
}

.campo__ayuda {
  font-size: var(--step-0);
  color: var(--text-tertiary);
  text-align: center;
}
.campo__ayuda[hidden] { display: none; }

.form__label {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}

/* ==========================================================================
   Checkbox de consentimiento
   El label completo es tocable, no solo la cajita de 20px.
   ========================================================================== */
.consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--touch-comfy);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--white) 5%, transparent);
  border: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.consentimiento:has(:checked) { border-color: var(--success-500); }

.consentimiento__box {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.consentimiento__marca {
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 3px solid var(--border-strong);
  background: transparent;
  transition: all var(--dur-fast) var(--ease-out);
}
.consentimiento__marca svg {
  width: 70%;
  fill: none;
  stroke: var(--white);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition: all var(--dur-fast) var(--ease-spring);
}
.consentimiento:has(:checked) .consentimiento__marca {
  background: var(--success-500);
  border-color: var(--success-500);
}
.consentimiento:has(:checked) .consentimiento__marca svg { opacity: 1; transform: none; }

/* --step-1 y no --step-0: es texto legal que la persona tiene que poder leer
   de pie antes de aceptarlo, así que entra en el mínimo de 28px del kiosco. */
.consentimiento__texto {
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ==========================================================================
   Teclado en pantalla
   El nativo de una Smart TV es impredecible: a veces no aparece, a veces tapa
   el input, a veces abre un overlay del sistema que rompe el fullscreen.
   ========================================================================== */
.teclado {
  display: flex;
  flex-direction: column;
  gap: var(--tecla-gap);
  width: 100%;

  /* Tamaños de docs/07-UX-KIOSCO-TV.md §2.3: la tecla de texto tiene un
     mínimo de 72px y un recomendado de 96px en TV; la numérica, 88 y 120.
     Acá se apunta al recomendado, no al mínimo: el dedo cae con mucha menos
     precisión a 60cm de distancia que sobre un teléfono en la mano. */
  --tecla-alto: clamp(64px, 7vh, 118px);
  --tecla-gap: clamp(6px, 0.8vh, 14px);
}
.teclado[hidden] { display: none; }
.teclado[data-bloqueado] { opacity: 0.4; pointer-events: none; }

.teclado__fila {
  display: flex;
  gap: var(--tecla-gap);
  justify-content: center;
}

.tecla {
  /* --ancho multiplica el crecimiento: ESPACIO ocupa 5 columnas y BORRAR 3,
     sin sacarlos de la grilla ni romper la alineación de las letras. */
  flex: var(--ancho, 1) 1 0;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: var(--tecla-alto);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 2px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-bold);
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-instant) var(--ease-out),
    background-color var(--dur-instant) var(--ease-out),
    border-color var(--dur-instant) var(--ease-out);
}

/* Feedback en menos de 50ms: sin él la gente toca de nuevo, y de nuevo, y
   decide que está roto. */
.tecla[data-estado='presionada'] {
  background: var(--accent);
  border-color: var(--teal-200);
  color: var(--text-on-accent);   /* ⚠️ ink-900, nunca blanco sobre teal-500 */
  transform: scale(0.93);
}

.tecla--accion {
  background: var(--surface-raised);
  font-size: var(--step-0);
  letter-spacing: var(--ls-caps, 0.06em);
}

.tecla--hueco {
  visibility: hidden;
  box-shadow: none;
  pointer-events: none;
}

.tecla svg {
  width: 1.6em; height: 1.6em;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Numérico -------------------------------------------------------------
   Solo 3 columnas, así que cada tecla puede ser mucho más grande. Es el
   teclado en el que un error cuesta más: un dígito mal y Adium no puede
   llamar al ganador. */
.teclado--num {
  --tecla-alto: clamp(72px, 9.5vh, 148px);
  --tecla-gap: clamp(8px, 1.2vh, 20px);
  max-width: 620px;
  margin-inline: auto;
}
.teclado--num .tecla {
  font-size: var(--step-3);
  font-weight: var(--fw-extrabold);
}
.teclado--num .tecla svg { width: 1.1em; height: 1.1em; stroke-width: 2; }

/* ==========================================================================
   Tarjeta de refuerzo educativo (LOSE)
   ========================================================================== */
.refuerzo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 2px solid var(--border);
  border-left: 6px solid var(--accent);
  text-align: left;
}
.refuerzo[hidden] { display: none; }
.refuerzo__texto {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  text-wrap: pretty;
}

/* ==========================================================================
   Confeti
   ========================================================================== */
#confeti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-confetti);
  pointer-events: none;
}