/* Reloj de Güria en el iPad (`/kiosco` del portal: `app/vistas/kiosco.py` y
   `kiosco.js`). Pensado para un iPad apoyado en la barra, horizontal o vertical: botones
   grandes, nombres grandes y nada que se toque dos veces. Sin <dialog> (Safari viejo) y
   sin estilos en línea.

   Re-pintado R2-d (`docs/DISENO_R2_REPINTADO.md`, §3.18), solo con CSS: mismos
   nombres de clase. Como el portal, el kiosco no carga `sistema.css` ni sus fuentes
   (lista cerrada de estáticos y CSP, `app/rutas_kiosco.py`): copia los VALORES de los
   tokens `--rc-*` en su `:root` (cada copia dice de qué token viene; la otra copia
   está en `portal.css`) y usa la letra del sistema. El acento se lee de `--acento`,
   con el petróleo por omisión (la cadena la exige `test_rutas_kiosco.py`).

   Valores que escribe `kiosco.js` y que esta hoja pinta: `#conexion[data-estado]`
   (`en-linea` con el punto verde; cualquier otro, `sin-conexion`, en rojo),
   `.velo--resultado[data-tipo]` (`entrada` en verde, `salida` en azul, `aviso` en
   ámbar), `[data-revisar="si"]` (un aro ámbar en el sello), `.puntos i.lleno`,
   `.grilla--apagada`, `.persona--turno`, `.sacudir`, `.caja--camara`, `.caja--acciones`, `#camara[data-estado]`
   (`activando`, `lista` o `tomada`) y `#camara-marco[data-destello]`. «¿Qué quieres marcar?» y su
   confirmación (`#acciones`, `#confirmar`) los pinta `kiosco.js` con las acciones que dice el servidor. */

:root {
  --fondo: #F5F6F8;            /* --rc-fondo */
  --superficie: #FFFFFF;       /* --rc-superficie */
  --borde: #E7E8EC;            /* --rc-borde */
  --borde-fuerte: #D6D9E0;     /* --rc-borde-fuerte */
  --borde-pildora: #E1E3E8;    /* --rc-borde-pildora */
  --separador: #EEF0F3;        /* --rc-separador */
  --texto: #1D2230;            /* --rc-texto */
  --texto-secundario: #3A4150; /* --rc-texto-secundario */
  --texto-tenue: #5B6272;      /* --rc-texto-tenue */
  --acento-kiosco: var(--acento, #0B6E79);
  --acento-suave: #E8F0F1;     /* --rc-acento-suave (del petróleo) */
  --revisar-fondo: #FFF1DC;    /* --rc-revisar-fondo */
  --revisar-texto: #7A4100;    /* --rc-revisar-texto */
  --pagar-fondo: #EAF2FF;      /* --rc-pagar-fondo */
  --pagar-texto: #1D4E9E;      /* --rc-pagar-texto */
  --vencida-fondo: #FDECEC;    /* --rc-vencida-fondo */
  --vencida-texto: #9B1C1C;    /* --rc-vencida-texto */
  --pagada-fondo: #E8F5EE;     /* --rc-pagada-fondo */
  --pagada-texto: #1C6B3F;     /* --rc-pagada-texto */
  --bien: #1F9254;             /* --rc-bien */
  --radio: 8px;                /* --rc-radio */
  --radio-control: 9px;        /* --rc-radio-control */
  --radio-tarjeta: 12px;       /* --rc-radio-tarjeta */
  --sombra-flotante: 0 12px 32px rgb(29 34 48 / 14%), 0 2px 6px rgb(29 34 48 / 8%); /* --rc-sombra-flotante */
  /* Sin Geist: el portal no sirve archivos de fuentes (pendiente en DISENO_R1_PUENTE.md). */
  --fuente: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --fuente-mono: ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
}

body.kiosco {
  background: var(--fondo);
  color: var(--texto);
  font: 400 16px/1.45 var(--fuente);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

button,
input {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--acento-kiosco);
  outline-offset: 2px;
}

/* ── Cabecera: blanca, con la marca, la hora y la conexión ──────────────── */
.kiosco-cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 8px max(24px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}

.kiosco-marca {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.kiosco-marca strong { font: 600 18px/1.2 var(--fuente); }

.kiosco-marca span {
  color: var(--texto-tenue);
  font: 600 11px/16px var(--fuente);
  letter-spacing: .07em;
}

.kiosco-reloj {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#reloj-hora {
  font: 600 32px/1.1 var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

#reloj-fecha {
  color: var(--texto-tenue);
  font: 500 13px/1.3 var(--fuente);
}

/* La conexión: una píldora con su punto (verde en línea; rojo sin conexión). */
.kiosco-conexion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--borde-pildora);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-secundario);
  font: 600 13px/1.2 var(--fuente);
}

.kiosco-conexion i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bien);
}

.kiosco-conexion:not([data-estado="en-linea"]) {
  border-color: transparent;
  background: var(--vencida-fondo);
  color: var(--vencida-texto);
}

.kiosco-conexion:not([data-estado="en-linea"]) i { background: var(--vencida-texto); }

/* ── Pantallas ──────────────────────────────────────────────────────────── */
.kiosco-cuerpo {
  padding: 24px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px));
}

/* Cargando, enrolar y error: una tarjeta centrada de 440 px. */
.pantalla--centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 440px);
  margin: min(10vh, 80px) auto 0;
  padding: 28px 24px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  text-align: center;
}

.pantalla--centro > p:not([class]) {
  margin: 0;
  color: var(--texto-secundario);
}

.antetitulo {
  margin: 0;
  color: var(--texto-tenue);
  font: 600 11px/16px var(--fuente);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.pantalla--error .antetitulo { color: var(--vencida-texto); }

/* El nombre del iPad lo escribe Benjamín: se muestra tal cual. */
#nombre-ipad { text-transform: none; }

.kiosco h1 {
  margin: 6px 0 8px;
  color: var(--texto);
  font: 600 26px/1.2 var(--fuente);
  letter-spacing: -0.01em;
}

.bajada {
  max-width: 560px;
  margin: 0 0 20px;
  color: var(--texto-tenue);
  font-size: 15px;
  line-height: 1.5;
}

.girando {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border: 2px solid var(--borde-fuerte);
  border-top-color: var(--acento-kiosco);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--texto);
  font: 600 17px/1.2 var(--fuente);
}

.boton--primario {
  border-color: transparent;
  background: var(--acento-kiosco);
  color: var(--superficie);
}

.boton:disabled { opacity: .55; }

/* ── Enrolar ────────────────────────────────────────────────────────────── */
.enrolar {
  display: grid;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.enrolar label {
  color: var(--texto-tenue);
  font: 500 12px/1.2 var(--fuente);
}

.enrolar input {
  width: 100%;
  min-height: 56px;
  padding: 0 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--texto);
  font: 600 24px/1.2 var(--fuente-mono);
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
  -webkit-user-select: text;
  user-select: text;
}

.enrolar input:focus {
  border-color: var(--acento-kiosco);
  box-shadow: 0 0 0 3px var(--acento-suave);
  outline: 2px solid transparent;
}

.error {
  min-height: 20px;
  margin: 4px 0 0;
  color: var(--vencida-texto);
  font: 600 14px/1.4 var(--fuente);
}

/* ── ¿Quién eres? ───────────────────────────────────────────────────────── */
.equipo-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 20px;
}

.equipo-titulo > div { flex: 1 1 320px; }

#pantalla-equipo h1 { font-size: 30px; }
#pantalla-equipo .bajada { margin-bottom: 0; }

/* Modo sombra, con los valores de `.rc-aviso--revisar`. */
.aviso-modo {
  flex: 0 1 320px;
  padding: 12px 14px;
  border: 1px solid var(--revisar-texto);
  border-left-width: 3px;
  border-radius: var(--radio);
  background: var(--revisar-fondo);
  color: var(--revisar-texto);
}

.aviso-modo strong { font: 600 13px/1.4 var(--fuente); }

.aviso-modo p {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

/* La hora del iPad no calza: con los valores de `.rc-aviso--alerta`. */
.aviso-reloj {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--vencida-texto);
  border-left-width: 3px;
  border-radius: var(--radio);
  background: var(--vencida-fondo);
  color: var(--vencida-texto);
  font: 600 15px/1.45 var(--fuente);
}

/* Cada persona, una tarjeta blanca que se toca entera. */
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

.grilla--apagada {
  opacity: .5;
  pointer-events: none;
}

.persona {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 128px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  color: var(--texto);
  text-align: left;
}

.persona--turno { border-color: var(--acento-kiosco); }

.persona:active {
  border-color: var(--acento-kiosco);
  background: var(--acento-suave);
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--separador);
  color: var(--texto-secundario);
  font: 600 20px/1 var(--fuente);
}

.persona__nombre { font: 600 18px/1.25 var(--fuente); }

.persona__etiqueta {
  color: var(--texto-tenue);
  font: 600 13px/1.3 var(--fuente);
}

.persona__etiqueta--falta { color: var(--revisar-texto); }

.vacio {
  grid-column: 1 / -1;
  margin: 0;
  padding: 40px 16px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-tarjeta);
  color: var(--texto-tenue);
  font-size: 18px;
  text-align: center;
}

/* ── El PIN y el resultado (capas sobre la pantalla, no <dialog>) ───────── */
.velo {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgb(29 34 48 / 60%);
}

.caja {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(380px, 100%);
  padding: 24px;
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra-flotante);
  text-align: center;
}

.cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--texto-secundario);
  font: 400 26px/1 var(--fuente);
}

.cerrar:active { background: var(--separador); }

.caja .avatar {
  width: 64px;
  height: 64px;
  font-size: 22px;
}

.caja h2 {
  margin: 12px 0 2px;
  color: var(--texto);
  font: 600 22px/1.25 var(--fuente);
}

.caja-ayuda {
  margin: 0 0 14px;
  color: var(--texto-tenue);
  font-size: 14px;
  line-height: 1.4;
}

.puntos {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.puntos i {
  width: 14px;
  height: 14px;
  border: 2px solid var(--borde-fuerte);
  border-radius: 50%;
}

.puntos i.lleno {
  border-color: var(--acento-kiosco);
  background: var(--acento-kiosco);
}

/* El teclado: 3 × 4 teclas de 72 px de alto (64 en un vertical estrecho). */
.teclado {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 276px);
}

.tecla {
  height: 72px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  color: var(--texto);
  font: 500 24px/1 var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

.tecla:active { background: var(--acento-suave); }

.tecla--borrar {
  color: var(--texto-secundario);
  font-family: var(--fuente);
}

.tecla--ok {
  border-color: transparent;
  background: var(--acento-kiosco);
  color: var(--superficie);
  font: 600 20px/1 var(--fuente);
}

.tecla--ok:disabled { opacity: .45; }

/* ── La foto de quien dio su consentimiento ─────────────────────────────
   `kiosco.js` abre este panel después de un PIN correcto y lo pinta con
   `#camara[data-estado]`: `activando` (pidiendo la cámara), `lista` (vista previa en vivo,
   el botón TOMAR FOTO y, al final, la cuenta regresiva) y `tomada` (la foto a la vista con
   «Listo»). `#camara-marco[data-destello="si"]` es el destello de 220 ms. */

/* La caja crece para que la vista previa sea grande; sin avatar, puntos ni ×: el teclado ya
   no sirve y la foto no se salta. */
.caja--camara { width: min(608px, 100%); }

.caja--camara .avatar,
.caja--camara .puntos,
.caja--camara .caja-ayuda,
.caja--camara .cerrar,
.caja--camara .error { display: none; }

.caja--camara h2 { margin-top: 0; }

.camara {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

/* El marco es 4:3 (la cámara pide 640 × 480), sin `aspect-ratio` para Safari viejo. Su ancho
   se limita con el alto de la pantalla (390 px quedan para el nombre, la acción, el texto y el botón),
   así no hay que desplazarse ni en un iPad horizontal. */
.camara__marco {
  position: relative;
  width: min(100%, 560px, calc((100vh - 390px) * 4 / 3));
  width: min(100%, 560px, calc((100dvh - 390px) * 4 / 3));
  min-width: min(100%, 240px);
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
  background: var(--texto);
}

.camara__marco::before {
  content: "";
  display: block;
  padding-top: 75%;
}

.camara__marco video,
.camara__marco canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Espejo solo en pantalla, para que la persona se vea como en un espejo: la foto sale tal
   cual, sin espejo (la que queda a la vista al tomarla tampoco lo lleva). */
.camara video { transform: scaleX(-1); }

.camara canvas { display: none; }

.camara[data-estado="tomada"] canvas { display: block; }
.camara[data-estado="tomada"] video { display: none; }

.camara[data-estado="tomada"] .camara__marco { box-shadow: 0 0 0 4px var(--bien); }

/* La guía de la cara: un óvalo suave, y fuera de él la imagen un poco más oscura. */
.camara__guia {
  position: absolute;
  top: 7%;
  right: 29%;
  bottom: 7%;
  left: 29%;
  border: 3px solid rgb(255 255 255 / 75%);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgb(29 34 48 / 22%);
  pointer-events: none;
}

.camara:not([data-estado="lista"]) .camara__guia { display: none; }

/* El destello: se enciende de golpe al tocar y se desvanece. */
.camara__destello {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  opacity: 0;
  transition: opacity .35s ease-out;
  pointer-events: none;
}

.camara__marco[data-destello="si"] .camara__destello {
  opacity: .9;
  transition: none;
}

/* La marca que se va a registrar («SALIDA»), sobre la vista previa: la persona confirma qué marca
   mientras se mira. */
.camara__accion {
  margin: 0;
  color: var(--acento-kiosco);
  font: 700 28px/1.2 var(--fuente);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.camara__accion:empty { display: none; }

.camara__texto {
  min-height: 27px;
  margin: 0;
  color: var(--texto);
  font: 600 20px/1.35 var(--fuente);
}

/* Reserva su alto para que el botón no salte cuando aparece la cuenta. */
.camara__cuenta {
  min-height: 36px;
  margin: 0;
  color: var(--revisar-texto);
  font: 600 22px/1.3 var(--fuente);
  font-variant-numeric: tabular-nums;
}

.camara[data-estado="tomada"] .camara__cuenta {
  color: var(--pagada-texto);
  font-size: 28px;
}

/* El botón: 80 px de alto, a todo el ancho, para tocarlo de lejos y de apuro. */
.boton--foto {
  min-height: 80px;
  font-size: 22px;
  letter-spacing: .04em;
}

.camara[data-estado="tomada"] .boton--foto { visibility: hidden; }

/* ── ¿Qué quieres marcar? ───────────────────────────────────────────────
   Después del PIN: el estado de la persona, las acciones que valen (botones de 96 px las principales y
   de 64 px la secundaria) y CANCELAR. Sin teclado, puntos ni ×: CANCELAR hace de ×. */
.caja--acciones { width: min(480px, 100%); }

.caja--acciones .puntos,
.caja--acciones .caja-ayuda,
.caja--acciones .cerrar,
.caja--acciones .error { display: none; }

.acciones,
.confirmar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.acciones__estado {
  margin: 0;
  color: var(--texto);
  font: 600 22px/1.3 var(--fuente);
}

.acciones__detalle {
  margin: 0;
  color: var(--texto-tenue);
  font: 500 15px/1.4 var(--fuente);
}

/* El aviso (una entrada de ayer sin salida): con los valores de `.rc-aviso--revisar`. */
.acciones__aviso {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--revisar-texto);
  border-left-width: 3px;
  border-radius: var(--radio);
  background: var(--revisar-fondo);
  color: var(--revisar-texto);
  font: 600 15px/1.45 var(--fuente);
  text-align: left;
}

.acciones__pregunta {
  margin: 4px 0 0;
  color: var(--texto-secundario);
  font: 600 17px/1.3 var(--fuente);
}

.acciones__botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accion--principal {
  min-height: 96px;
  font-size: 28px;
  letter-spacing: .04em;
}

.accion-secundaria {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.accion--secundaria {
  min-height: 64px;
  border-width: 2px;
  font-size: 17px;
}

.accion__ayuda {
  margin: 0;
  color: var(--texto-tenue);
  font-size: 14px;
  line-height: 1.4;
}

.boton--cancelar,
.boton--secundario { min-height: 64px; }

.boton--cancelar {
  border-color: transparent;
  background: transparent;
  color: var(--texto-secundario);
  text-decoration: underline;
}

/* Confirmación de una acción (la de «olvidé marcar mi entrada», y la de ENTRADA con una entrada abierta fuera del día). */
.confirmar__titulo {
  margin: 0;
  color: var(--texto);
  font: 700 22px/1.25 var(--fuente);
}

.confirmar__texto {
  margin: 0;
  color: var(--texto-secundario);
  font: 400 17px/1.5 var(--fuente);
  text-align: left;
}

.boton--accion { min-height: 80px; font-size: 20px; }

/* El foco se ve siempre, con un anillo más grueso que el general: el primer botón nace enfocado. */
.accion:focus-visible,
.boton--cancelar:focus-visible,
.confirmar .boton:focus-visible {
  outline: 4px solid var(--acento-kiosco);
  outline-offset: 3px;
}

.sacudir { animation: sacudir .3s; }

@keyframes sacudir {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Resultado: el sello verde de «pagada» en la entrada, azul en la salida y ámbar en
   un aviso; con el aro ámbar si la marca queda para revisar. */
.caja--resultado { padding-top: 32px; }

.sello {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--pagada-fondo);
  color: var(--pagada-texto);
  font: 600 44px/1 var(--fuente);
}

.velo--resultado[data-tipo="salida"] .sello {
  background: var(--pagar-fondo);
  color: var(--pagar-texto);
}

.velo--resultado[data-tipo="aviso"] .sello {
  background: var(--revisar-fondo);
  color: var(--revisar-texto);
}

.velo--resultado[data-revisar="si"] .sello { box-shadow: 0 0 0 6px var(--revisar-fondo); }

.caja--resultado .antetitulo { margin-top: 16px; }
.velo--resultado[data-tipo="aviso"] .antetitulo { color: var(--revisar-texto); }

/* El tipo de la marca, en grande: «SALIDA REGISTRADA». Verde en la entrada, azul en la salida y ámbar
   en un aviso, como el sello. */
#resultado-tipo {
  color: var(--pagada-texto);
  font: 700 30px/1.2 var(--fuente);
  letter-spacing: .02em;
}

.velo--resultado[data-tipo="salida"] #resultado-tipo { color: var(--pagar-texto); }
.velo--resultado[data-tipo="aviso"] #resultado-tipo { color: var(--revisar-texto); }
.caja--resultado h2 { font-size: 24px; }
.caja--resultado h2:empty { display: none; }

.resultado-hora {
  margin: 4px 0 8px;
  color: var(--texto);
  font: 600 40px/1.1 var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

.resultado-hora:empty { display: none; }

/* El folio de la marca: los 12 primeros caracteres de su huella, para citarlo si hace falta. */
.resultado-folio {
  margin: 0 0 10px;
  color: var(--texto-tenue);
  font: 600 14px/1.2 var(--fuente-mono);
  letter-spacing: 0.08em;
}

#resultado-cerrar { margin-top: 8px; }

/* ── Apagado ────────────────────────────────────────────────────────────── */
.kiosco--apagado .kiosco-cabecera { justify-content: flex-start; }

/* ── Vertical estrecho o celular ────────────────────────────────────────── */
@media (max-width: 560px) {
  .kiosco-reloj { display: none; }
  .kiosco-cuerpo { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); }
  #pantalla-equipo h1 { font-size: 26px; }
  .persona { min-height: 112px; }
  .tecla { height: 64px; }
}

/* Con «reducir movimiento» el destello deja de ser un fogonazo que se desvanece: pasa a
   un cambio de color breve (el acento, sin transición). */
@media (prefers-reduced-motion: reduce) {
  .girando,
  .sacudir { animation: none; }

  .camara__destello {
    background: var(--acento-kiosco);
    transition: none;
  }

  .camara__marco[data-destello="si"] .camara__destello { opacity: .55; }
}