/* ── TOKENS ─────────────────────────────────────────────────────────────────
   Una sola tinta de acento. El resto es neutro para que el estado de la tarjeta
   (sellos, premio listo) sea lo único con color. Pensado para un cajero con prisa,
   con el sol en la pantalla: contraste alto y botones grandes. */
:root {
  --fondo: #f6f4ef;
  --superficie: #ffffff;
  --tinta: #1c1b18;
  --tinta-suave: #5f5b52;
  --linea: #dcd7cb;
  --acento: #0b6b4f;
  --acento-tinta: #ffffff;
  --premio: #b4530a;
  --premio-fondo: #fdf0e1;
  --error: #a3231b;
  --error-fondo: #fdeceb;
  --ok: #0b6b4f;
  --radio: 14px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #14130f;
    --superficie: #1e1c17;
    --tinta: #f2efe7;
    --tinta-suave: #b3ad9f;
    --linea: #39362d;
    --acento: #3fc79a;
    --acento-tinta: #06231a;
    --premio: #f0a35a;
    --premio-fondo: #2e2013;
    --error: #ff8f86;
    --error-fondo: #331a18;
    --ok: #3fc79a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

[hidden] { display: none !important; }

/* ── BARRA ──────────────────────────────────────────────────────────────── */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--gutter);
  padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--linea);
  background: var(--superficie);
}
.barra-nombre { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { max-width: 480px; margin: 0 auto; padding: 0 var(--gutter); }
.vista { padding: 24px 0 32px; }

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.01em; }
h1:focus { outline: none; }
.suave { color: var(--tinta-suave); margin: 0 0 20px; }
.etiqueta { color: var(--tinta-suave); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 4px; }

/* ── FORMULARIOS ────────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; margin: 16px 0 6px; }
input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font: inherit;
  color: var(--tinta);
  background: var(--superficie);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
}
input:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* ── BOTONES ────────────────────────────────────────────────────────────── */
.boton {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  padding: 14px 18px;
  font: inherit;
  font-weight: 650;
  border-radius: var(--radio);
  border: 1.5px solid transparent;
  cursor: pointer;
}
.boton:disabled { opacity: 0.55; cursor: progress; }
.primario { background: var(--acento); color: var(--acento-tinta); }
.secundario { background: transparent; color: var(--tinta); border-color: var(--linea); }
.premio-btn { background: var(--premio); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .premio-btn { color: #1b1004; } }

.enlace {
  background: none;
  border: 0;
  padding: 10px 4px;
  font: inherit;
  color: var(--tinta-suave);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}
.acciones .enlace { display: block; margin: 4px auto 0; }

/* ── MENSAJES ───────────────────────────────────────────────────────────── */
.mensaje { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); }
.mensaje.error { background: var(--error-fondo); border-color: var(--error); color: var(--error); font-weight: 600; }
.mensaje.ok { border-color: var(--ok); color: var(--ok); font-weight: 600; }

/* ── ESCÁNER ────────────────────────────────────────────────────────────── */
.visor {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  margin-top: 16px;
  overflow: hidden;
  border-radius: var(--radio);
  background: #000;
}
.visor video { width: 100%; height: 100%; object-fit: cover; }
.marco {
  position: absolute;
  inset: 18%;
  border-radius: 12px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.manual { margin-top: 20px; }
.manual summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; }

/* ── TARJETA ────────────────────────────────────────────────────────────── */
.saldo {
  margin: 16px 0 8px;
  padding: 20px;
  text-align: center;
  background: var(--superficie);
  border: 1.5px solid var(--linea);
  border-radius: calc(var(--radio) + 4px);
}
.saldo-numero { margin: 0; font-size: 3.6rem; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.saldo-de { font-size: 1.4rem; font-weight: 500; color: var(--tinta-suave); }
.puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 14px; }
.punto { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linea); }
.punto.lleno { background: var(--acento); border-color: var(--acento); }
.premio { margin: 0; color: var(--tinta-suave); }
.premio strong { color: var(--tinta); }
.aviso-premio {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--radio);
  background: var(--premio-fondo);
  color: var(--premio);
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  .punto { transition: background-color 0.25s ease, border-color 0.25s ease; }
}