/* ==========================================================================
   kiosk.css · Layout específico de cada pantalla y adaptación por viewport.
   Un layout escalado fluido, no cuatro diseños con cuatro breakpoints.
   ========================================================================== */

/* ==========================================================================
   ATTRACT
   ========================================================================== */
.attract__centro { gap: var(--space-6); }

.attract__titulo {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* Líneas más largas obligan a mover la cabeza a 2m de distancia. */
  max-width: 14ch;
  margin-inline: auto;
}

.attract__bajada {
  font-size: var(--step-1);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--text-secondary);
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
  transition: opacity var(--dur-normal) var(--ease-out);
}
.attract__bajada[data-saliendo] { opacity: 0; }

/* Prueba social: si alguien ganó hace un rato, se puede ganar. */
.attract__chip-ganador {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--success-500) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--success-500) 45%, transparent);
  font-size: var(--step-0);
  font-weight: var(--fw-semibold);
  color: var(--white);
  animation: entrar var(--dur-normal) var(--ease-out) both;
}
.attract__chip-ganador[hidden] { display: none; }

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro__centro { gap: var(--space-7); }

.intro__titulo {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-wrap: balance;
}

.intro__timer {
  font-size: var(--step-1);
  color: var(--text-secondary);
}
.intro__timer[hidden] { display: none; }

/* Los dos puntos se encienden en secuencia durante el puente de 1.5s.
   Los DOS están visibles desde el primer frame, apagados (aro vacío): el spec
   dice "dos puntos apagados que se encienden en secuencia", y un punto que
   arranca en opacity 0.3 y escala 0.4 no se ve — parecía que había uno solo. */
.puntos--grandes .punto {
  animation: punto-enciende var(--dur-normal) var(--ease-spring) both;
}
.puntos--grandes .punto:nth-child(1) { animation-delay: 200ms; }
.puntos--grandes .punto:nth-child(2) { animation-delay: 700ms; }

@keyframes punto-enciende {
  from { transform: scale(1); background: transparent; border-color: var(--border); }
  60%  { transform: scale(1.35); }
  to   { transform: scale(1); background: var(--accent); border-color: var(--accent); }
}

/* ==========================================================================
   QUESTION
   ========================================================================== */
.question__top { gap: var(--space-4); }

/* "Pregunta 1 de 2" NO es decoración: docs/02 §5.3 exige que los puntos de
   progreso vayan siempre acompañados del texto porque el color solo no basta.
   Como el jugador tiene que leerlo, entra en el mínimo de 28px del kiosco, no
   en el ~17px que la tabla de §3.2 asigna a los eyebrows. */
#progreso-texto { font-size: var(--step-1); }

@media (max-width: 800px) {
  #progreso-texto { font-size: var(--step--1); }
}

.question__medio {
  gap: var(--space-6);
  /* El enunciado es el bloque más grande de la pantalla, pero por debajo
     empieza la zona de acción: justificamos al centro con tope arriba. */
  justify-content: center;
}

.question__texto {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--fw-bold);
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
  /* Máximo 24 caracteres por línea (docs/07 §6): más largo y se pierde el
     renglón al volver. El enunciado NUNCA se trunca ni scrollea; si no entra,
     el clamp() del --step-3 lo achica. */
  max-width: 22ch;
  margin-inline: auto;
}

/* Las preguntas largas del banco (la id 83 tiene 118 caracteres) necesitan
   bajar un paso de escala para entrar sin cortarse. El JS lo marca. */
.question__texto[data-largo='mucho'] {
  font-size: var(--step-2);
  max-width: 26ch;
}

/* ==========================================================================
   WIN_REVEAL
   ========================================================================== */
.pantalla--win {
  position: relative;
  /* Gradiente más brillante: el momento merece cambiar de aire. */
  background: radial-gradient(ellipse 120% 70% at 50% 35%,
              color-mix(in srgb, var(--success-500) 30%, transparent) 0%,
              transparent 65%);
}

.win__centro { gap: var(--space-6); }

.win__sello {
  display: grid;
  place-items: center;
  width: clamp(96px, 14vh, 168px);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--success-500);
  box-shadow: var(--glow-success);
  animation: sello 620ms var(--ease-spring) both;
}
.win__sello--chico { width: clamp(72px, 10vh, 120px); }
.win__sello svg {
  width: 58%;
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes sello {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.win__titulo {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  text-wrap: balance;
}

.win__bajada {
  font-size: var(--step-1);
  color: var(--text-secondary);
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

.win__marcador {
  font-size: var(--step-1);
  text-align: center;
  color: var(--text-secondary);
}

/* ==========================================================================
   LOSE
   ========================================================================== */
.lose__centro { gap: var(--space-6); }

.lose__titulo {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  text-wrap: balance;
  max-width: 16ch;
  margin-inline: auto;
}

.lose__marcador {
  font-size: var(--step-1);
  color: var(--text-secondary);
}

/* ==========================================================================
   FORM_NOMBRE / FORM_TELEFONO
   ========================================================================== */
/* Centrado y no pegado arriba: con el teclado ocupando el tercio inferior,
   alinear al tope deja ~440px muertos entre el consentimiento y las teclas
   (medido en la TV vertical). Centrado, el recorrido de la vista es
   label → input → consentimiento → teclado, sin saltos. */
.form__centro {
  gap: var(--space-5);
  justify-content: center;
}

.form__abajo { gap: var(--space-4); }

/* ==========================================================================
   THANKS
   ========================================================================== */
.thanks__centro { gap: var(--space-5); }

.thanks__titulo {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  text-wrap: balance;
}

.thanks__bajada {
  font-size: var(--step-1);
  color: var(--text-secondary);
}

/* Enmascarado: deja verificar que se tipeó bien sin exponer el número a la
   fila de gente que está mirando la pantalla. */
.thanks__telefono {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
}

.thanks__cuenta {
  font-size: var(--step-0);
  color: var(--text-tertiary);
  text-align: center;
}

/* ==========================================================================
   ERROR / MAINTENANCE
   ========================================================================== */
.error__titulo, .mant__titulo {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
.error__texto, .mant__texto {
  font-size: var(--step-1);
  color: var(--text-secondary);
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
}
.mant__centro { gap: var(--space-7); }
.pantalla--mant { grid-template-rows: 1fr; }

/* ==========================================================================
   TV HORIZONTAL · 1920×1080
   Dos columnas: pregunta a la izquierda, opciones a la derecha. La zona de
   alcance deja de ser "abajo" y pasa a ser "el lado dominante".
   ========================================================================== */
@media (orientation: landscape) and (min-width: 900px) {
  .pantalla { max-width: min(100%, 1600px); }

  .pantalla--question {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--space-9);
    align-items: center;
  }
  /* Logo y progreso juntos a la izquierda: con space-between el progreso se
     iba al borde derecho, justo debajo del timer absoluto, y los dos textos
     quedaban encimados (verificado en captura). */
  .question__top {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-8);
  }
  .question__medio { grid-column: 1; text-align: left; align-items: flex-start; }
  .question__texto { text-align: left; margin-inline: 0; max-width: 18ch; }
  .pantalla--question .pantalla__abajo { grid-column: 2; justify-content: center; }

  /* En horizontal el timer va arriba a la derecha, no en el centro. */
  .pantalla--question .timer {
    position: absolute;
    top: var(--space-6);
    right: var(--gutter);
  }

  .attract__titulo { max-width: 18ch; }
  .form__centro { max-width: 720px; margin-inline: auto; }
  .form__abajo { max-width: 720px; margin-inline: auto; width: 100%; }
}

/* ==========================================================================
   CELULAR · el teclado propio estorba, el nativo es mejor
   ========================================================================== */
@media (max-width: 767px) {
  .opcion { gap: var(--space-4); padding: var(--space-4); }
  .opcion__token { width: 44px; }
  .lineas { gap: var(--space-2); }
  .linea { padding: var(--space-2); }

  /* El mínimo de 28px es una regla DEL KIOSCO (docs/02 §3.2): a 40cm de un
     teléfono, 30px por opción es enorme y con las opciones más largas del
     banco los tres botones no entran en 844px de alto — medido, desbordaba
     68px. Acá el texto puede achicarse; en la TV no. */
  .opciones[data-denso='medio'] .opcion__texto { font-size: var(--step-0); }
  .opciones[data-denso='mucho'] .opcion__texto {
    font-size: var(--step-0);
    line-height: 1.22;
  }
  .opciones[data-denso='mucho'] .opcion {
    padding: var(--space-3);
    min-height: 64px;
  }
  .opciones[data-denso='mucho'] .opcion__token { width: 38px; font-size: var(--step-0); }
}

/* ==========================================================================
   DENSIDAD EN PANTALLAS GRANDES
   Acá el texto NO se achica por debajo de 28px: lo que cede es el aire, no
   la legibilidad. Es la diferencia entre un kiosco y una página web.
   ========================================================================== */
@media (min-width: 768px) {
  .opciones[data-denso='mucho'] .opcion {
    padding-block: var(--space-3);
  }
  .opciones[data-denso='mucho'] .opcion__texto { line-height: 1.2; }
}

/* ==========================================================================
   ESCRITORIO · contenido centrado, botones sin estirar a lo ancho del monitor
   ========================================================================== */
@media (min-width: 1280px) and (orientation: portrait) {
  .pantalla { max-width: 820px; }
}

/* ==========================================================================
   PANTALLAS MÁS CHICAS QUE LA TV
   Los tamaños táctiles del kiosco (botón de 88–180px, timer de 168px) están
   calculados para 1080×1920. En una tablet o un celular la misma pila de tres
   botones no entra: medido, el celular desbordaba 38px y en tablet el último
   botón llegaba al 99% de la altura, invadiendo la zona de borde que docs/07
   §2.2 reserva desde el 92%.
   Acá se comprime el aire vertical antes que dejar algo fuera del viewport:
   la regla "todo entra sin scroll" vale en todos los dispositivos.
   ========================================================================== */
@media (max-height: 1100px), (max-width: 800px) {
  .pantalla__medio { gap: var(--space-4); }
  .question__medio { gap: var(--space-4); }

  .opcion {
    min-height: clamp(72px, 12vh, 110px);
    padding: var(--space-4) var(--space-5);
  }
  .timer { width: clamp(76px, 11vh, 120px); }
  .marca--chica { width: clamp(96px, 16vw, 140px); }
}

/* Pantallas muy bajas (tablet horizontal, laptop chica): más agresivo todavía. */
@media (max-height: 700px) {
  .pantalla { padding-block: var(--space-4) max(var(--space-4), 6vh); }
  .pantalla__medio { gap: var(--space-2); }
  .opcion { min-height: 66px; padding: var(--space-3) var(--space-4); }
  .timer { width: clamp(64px, 9vh, 92px); }
}