/* ==========================================================================
   base.css · Reset, blindaje de kiosco y layout de pantalla.
   Todo color y medida sale de tokens.css. Cero hexadecimales acá.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* overscroll-behavior: none mata el pull-to-refresh y el rebote elástico.
     En una TV touch, un arrastre vertical accidental recargando la página a
     mitad de partida es un desastre silencioso. */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-body);
  color: var(--text);
  /* Fondo explícito: sin esto el body es transparente y hereda el del host. */
  background: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  overflow: hidden;              /* el kiosco no scrollea nunca */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Blindaje de kiosco. En modo `web` (celular, laptop de alguien probando) se
   relaja: pelearse con estas restricciones desde una laptop es absurdo. */
body[data-modo='kiosk'] {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: none;                  /* no hay mouse en un stand */
}
body[data-modo='kiosk'] input { user-select: text; -webkit-user-select: text; }

/* manipulation desactiva el doble-tap-zoom y con él los 300ms de retardo del
   click en touch. Esos 300ms son la diferencia entre "responde" y "colgado". */
button, .cta, .opcion, .tecla, .consentimiento { touch-action: manipulation; }

img, svg, canvas { display: block; max-width: 100%; }
img { -webkit-user-drag: none; user-drag: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
input:focus { outline: none; }   /* el foco lo dibuja el contenedor .campo */

h1, h2, h3, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }

strong { font-weight: var(--fw-extrabold); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tabular { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps, 0.08em);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Foco visible siempre. Un kiosco no se navega con teclado, pero el panel sí,
   y el mismo componente vive en los dos lados. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Fondo animado
   ========================================================================== */
#fondo-red {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-base);
  pointer-events: none;
}

/* ==========================================================================
   Estructura de pantalla · 3 filas: top fijo, medio flexible, abajo fijo.
   Las proporciones vienen de las zonas ergonómicas de docs/07 §2.2:
   0-25% zona muerta, 25-55% lectura, 55-92% acción.
   ========================================================================== */
#app {
  position: relative;
  z-index: var(--z-base);
  min-height: 100svh;
}

.pantalla {
  display: none;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding-inline: var(--gutter);
  /* El 8vh de abajo no es decoración: docs/07 §2.2 reserva el 92-100% de la
     altura como "borde", donde nada puede ser tocable porque está pegado al
     bisel físico de la TV. Sin este colchón el último botón terminaba al 98%
     de la pantalla (medido). En una laptop de 700px de alto son 56px y no
     estorba. */
  padding-block: max(var(--space-6), env(safe-area-inset-top))
                 max(var(--space-6), 8vh, env(safe-area-inset-bottom));
  /* Un solo layout escalado, no cuatro diseños. En un monitor grande el
     contenido se centra en vez de estirarse a lo ancho.

     El tope es 1100px y no 900px porque la TV vertical mide 1080 de ancho:
     con 900 se desperdiciaban 180px y las teclas del teclado en pantalla
     quedaban en 69px, por debajo del mínimo táctil de 72px de docs/07 §2.3.
     Medido en el navegador, no calculado. */
  max-width: min(100%, 1100px);
  margin-inline: auto;
}

.pantalla[data-activa] {
  display: grid;
  animation: entrar var(--dur-normal) var(--ease-out) both;
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(1.5%); }
  to   { opacity: 1; transform: none; }
}

.pantalla__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  /* Zona muerta: nada interactivo acá arriba. Hay que estirarse para llegar. */
}

.pantalla__medio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  text-align: center;
  min-height: 0;                 /* deja que el 1fr se encoja de verdad */
}

/* flex-shrink: 0 en los hijos. Sin esto, con la pregunta más larga del banco
   el flex comprimía el <h2> por debajo de su altura de contenido y el texto
   quedaba RECORTADO — verificado forzando la id 49 y la id 57. El spec es
   explícito: el enunciado nunca se trunca ni scrollea; si no entra, se achica
   la tipografía, nunca se corta. */
.pantalla__medio > * { flex-shrink: 0; }

/* Zona de acción: TODOS los botones viven acá. */
.pantalla__abajo {
  display: flex;
  flex-direction: column;
  gap: var(--touch-gap);
  justify-content: flex-end;
}

.marca { object-fit: contain; height: auto; }
.marca--grande { width: clamp(180px, 34vw, 360px); }
.marca--chica  { width: clamp(120px, 20vw, 200px); opacity: 0.9; }

.pie-nota {
  font-size: var(--step--1);
  color: var(--text-tertiary);
  text-align: center;
  min-height: 1.4em;
}

.pie-legal {
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--text-tertiary);
  text-align: center;
  text-wrap: pretty;
}

/* ==========================================================================
   Chip de estado del operador y zona de rescate
   ========================================================================== */
.chip-estado {
  position: fixed;
  top: max(var(--space-3), env(safe-area-inset-top));
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: var(--step--1);
  font-weight: var(--fw-medium);
  /* Deliberadamente discreto: es información para el operador del stand.
     Al jugador nunca se le dice que su registro no se envió. */
  opacity: 0.75;
  pointer-events: none;
}
/* `display: flex` le gana al [hidden] del user-agent stylesheet: sin esta
   regla el chip queda visible para siempre y la TV anuncia "Sin conexión"
   con el WiFi funcionando. */
.chip-estado[hidden] { display: none; }

.chip-estado .icono {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.chip-estado[data-tipo='pendientes'] { color: var(--warning-500); }

#zona-rescate {
  position: fixed;
  top: 0; left: 0;
  width: 12vmin; height: 12vmin;
  max-width: 140px; max-height: 140px;
  z-index: var(--z-debug);
  /* Invisible a propósito: es para el personal, no para el público. */
}

/* ==========================================================================
   Overlay de inactividad
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--teal-950) 82%, transparent);
  backdrop-filter: blur(8px);
  animation: entrar var(--dur-fast) var(--ease-out) both;
}
.overlay[hidden] { display: none; }

.overlay__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: min(100%, 680px);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-xl);
  text-align: center;
}
.overlay__titulo {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
.overlay__texto { font-size: var(--step-1); color: var(--text-secondary); }

/* ==========================================================================
   Modo alto contraste · 5 toques en el logo.
   Situación real: el sol de la tarde entra por la vidriera y la TV deja de
   verse. Sube los fondos a negro y los bordes a blanco.
   ========================================================================== */
body[data-contraste='alto'] {
  --bg: #000000;
  --bg-gradient: none;
  --surface: #101010;
  --surface-raised: #1E1E1E;
  --border: #FFFFFF;
  --border-strong: #FFFFFF;
  --text: #FFFFFF;
  --text-secondary: #FFFFFF;
  --text-tertiary: #E8E8E8;
}
body[data-contraste='alto'] #fondo-red { display: none; }
body[data-contraste='alto'] .opcion { border-width: 3px; }

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  #fondo-red { display: none; }
}