/* ---------- Base: kiosco táctil sin zoom, selección ni scroll ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--idle-bg);
  color: var(--idle-text);
  font-family: var(--font);
  font-weight: var(--weight-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Durante la aprobación el fondo de la página también es naranja: si iOS deja algún
   hueco fuera de la app (bordes, safe areas), no se ve una franja negra.
   Cambia al terminar de crecer el círculo y vuelve a negro de inmediato al reiniciar */
html:has(.atm[data-state="approved"]),
html:has(.atm[data-state="approved"]) body {
  background: var(--approved-bg);
  transition: background-color 0s linear 400ms;
}

body,
button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

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

img { -webkit-user-drag: none; }

.atm {
  --pad: clamp(24px, 4vmin, 56px);
  /* Franja de la barra de estado de iPadOS (24 pt): no se puede ocultar desde la web.
     Se reserva siempre para que el marco del ATM pueda taparla sin cortar nada */
  --status-bar: 24px;
  position: fixed;
  inset: 0;
  /* Bug de iOS en app instalada con barra translúcida: la altura útil no cuenta la barra
     de estado y queda una franja abajo. Se extiende esa medida (0 en Safari normal) */
  bottom: calc(-1 * env(safe-area-inset-top));
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  padding:
    calc(var(--pad) + max(env(safe-area-inset-top), var(--status-bar)))
    calc(var(--pad) + env(safe-area-inset-right))
    calc(var(--pad) + env(safe-area-inset-bottom))
    calc(var(--pad) + env(safe-area-inset-left));
}

/* ---------- Reposo / PIN ---------- */
.screen--idle {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: clamp(16px, 3vmin, 40px);
  background: var(--idle-bg);
  color: var(--idle-text);
}

.brand { align-self: start; }

/* Área de toque generosa y sin gestos del sistema (vista previa, arrastre, scroll) */
.brand__hold {
  padding: 20px;
  margin: -20px;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.brand__hold .brand__logo {
  pointer-events: none;
  transition: transform 200ms ease-out;
}

/* Señal para producción: el logo se encoge mientras se mantiene presionado */
.brand__hold.is-holding .brand__logo {
  transform: scale(0.8);
  transition: transform 3s linear;
}

.brand__logo {
  display: block;
  height: clamp(48px, 8vmin, 96px); /* mínimo de marca: 40px */
  width: auto;
}

.prompt {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: clamp(24px, 5vmin, 56px);
  text-align: center;
}

.prompt__title {
  margin: 0;
  font-weight: var(--weight-head);
  font-size: clamp(28px, 4.6vmin, 56px);
  line-height: var(--leading-head);
  letter-spacing: -0.01em;
}

/* Indicadores de PIN: la "O" de la marca. Vacío = anillo fino; lleno = trazo grueso + punto naranja (Focus) */
.pin {
  display: flex;
  gap: clamp(16px, 3vmin, 32px);
}

.pin__dot {
  --size: clamp(36px, 6vmin, 64px);
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: calc(var(--size) * 0.07) solid var(--pin-ring);
  transition: border-width 160ms ease-out, transform 160ms ease-out;
}

.pin__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--pin-dot);
  transform: scale(0);
  transition: transform 160ms ease-out;
}

.pin__dot.is-filled {
  border-width: calc(var(--size) * 0.35);
}

.pin__dot.is-filled::after { transform: scale(1); }

.keypad {
  --key: clamp(84px, 12.5vmin, 150px);
  display: grid;
  grid-template-columns: repeat(3, var(--key));
  grid-auto-rows: calc(var(--key) * 0.78);
  gap: clamp(12px, 2vmin, 24px);
  align-self: end;
}

.key {
  border-radius: 999px;
  background: var(--key-bg);
  color: var(--key-text);
  font-size: calc(var(--key) * 0.38);
  font-weight: var(--weight-head);
  line-height: 1;
  transition: transform 90ms ease-out, background-color 90ms ease-out, opacity 160ms;
}

.key--action { font-size: calc(var(--key) * 0.2); }

.key--clear {
  background: var(--clear-bg);
  color: var(--clear-text);
  box-shadow: inset 0 0 0 3px var(--clear-border);
}

.key--enter {
  background: var(--enter-bg);
  color: var(--enter-text);
}

/* Flex: respuesta táctil sutil */
.key.is-pressed {
  transform: scale(0.94);
  background: var(--key-pressed-bg);
}
.key--clear.is-pressed { background: rgb(255 255 255 / 0.18); }
.key--enter.is-pressed { background: var(--enter-bg); filter: brightness(0.92); }

.key:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Bloqueo durante la aprobación */
.atm[data-state="approved"] .keypad { pointer-events: none; }

/* Vertical: teclado ancho, ocupa la mitad inferior */
@media (orientation: portrait) {
  .keypad { --key: clamp(84px, 19vw, 180px); }
  .prompt__title { font-size: clamp(28px, 5.4vw, 64px); }
}

/* Horizontal: marca y PIN a la izquierda, teclado a la derecha */
@media (orientation: landscape) {
  .keypad { --key: clamp(84px, 15vmin, 160px); }
  .screen--idle {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 6vmin, 96px);
    justify-items: start;
  }
  .brand { grid-column: 1; grid-row: 1; }
  .prompt { grid-column: 1; grid-row: 2; justify-items: start; text-align: left; }
  .keypad { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}

/* ---------- Aprobación: Magnify (el círculo naranja crece desde Enter) ---------- */
.screen--approved {
  --cx: 50%;
  --cy: 80%;
  display: grid;
  place-items: center;
  background: var(--approved-bg);
  color: var(--approved-text);
  clip-path: circle(0 at var(--cx) var(--cy));
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease-in, clip-path 0s linear 280ms;
}

.atm[data-state="approved"] .screen--approved {
  clip-path: circle(150vmax at var(--cx) var(--cy));
  opacity: 1;
  transition: clip-path 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.approved {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3.5vmin, 40px);
  text-align: center;
}

.approved__mark {
  --size: clamp(140px, 26vmin, 300px);
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: calc(var(--size) * 0.06) solid var(--approved-mark);
}

.approved__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: var(--approved-mark);
}

.approved__title {
  margin: 0;
  font-weight: var(--weight-head);
  font-size: clamp(44px, 8vmin, 104px);
  line-height: var(--leading-head);
  letter-spacing: -0.02em;
}

.approved__subtitle {
  margin: 0;
  font-size: clamp(28px, 4.6vmin, 56px);
  line-height: 1.1;
}

/* Entrada del contenido tras el Magnify */
.approved > * {
  opacity: 0;
  transform: translateY(12px);
}

.atm[data-state="approved"] .approved > * {
  opacity: 1;
  transform: none;
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}
.atm[data-state="approved"] .approved > :nth-child(1) { transition-delay: 200ms; }
.atm[data-state="approved"] .approved > :nth-child(2) { transition-delay: 280ms; }
.atm[data-state="approved"] .approved > :nth-child(3) { transition-delay: 360ms; }

/* Focus: el anillo engrosa al aparecer */
.atm[data-state="approved"] .approved__mark {
  animation: focus 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms both;
}

@keyframes focus {
  from { border-width: calc(var(--size) * 0.02); transform: scale(0.85); }
  to   { border-width: calc(var(--size) * 0.06); transform: scale(1); }
}

/* ---------- Toque inicial ---------- */
.start {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 32px;
  background: var(--idle-bg);
  color: var(--idle-text);
  transition: opacity 300ms ease-out;
}

.start[hidden] { display: none; }
.start.is-leaving { opacity: 0; pointer-events: none; }

.start__ring {
  width: clamp(120px, 20vmin, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--orange);
  animation: breathe 2.4s ease-in-out infinite;
}

.start__label {
  font-size: clamp(28px, 4.6vmin, 56px);
  font-weight: var(--weight-head);
}

/* Versión y estado offline, discretos, para que producción los confirme al abrir */
.start__version {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 14px;
  color: var(--grey-300);
}

@keyframes breathe {
  50% { border-width: 28px; }
}

/* ---------- Toast de producción ---------- */
/* Fuera del layout cuando no se usa: no puede asomarse */
.toast[hidden] { display: none; }

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  font-size: 16px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}