/* =========================================================
   Club Tío Mono — sistema visual
   Paleta extraída del logo real de @tio.mono_ (naranja #E64A21)
   y del tono del feed (fondos oscuros + crema).
   ========================================================= */

:root {
  /* Marca */
  --brand:        oklch(0.63 0.196 38);
  --brand-hi:     oklch(0.69 0.185 41);
  --brand-lo:     oklch(0.55 0.185 36);
  --brand-ink:    oklch(0.18 0.045 34);   /* texto SOBRE naranja — 4.9:1 */
  --brand-tint:   oklch(0.63 0.196 38 / 0.13);

  /* Superficies (near-black cálido, no gris) */
  --bg:           oklch(0.165 0.014 42);
  --surface:      oklch(0.215 0.016 42);
  --surface-2:    oklch(0.265 0.018 42);
  --surface-3:    oklch(0.315 0.018 42);

  /* Tinta */
  --ink:          oklch(0.97 0.014 75);
  --ink-2:        oklch(0.855 0.018 65);
  --ink-muted:    oklch(0.745 0.020 60);  /* 6.2:1 sobre --surface */
  --line:         oklch(0.325 0.018 42);
  --line-soft:    oklch(0.265 0.016 42);

  /* Semánticos */
  --ok:           oklch(0.74 0.155 155);
  --warn:         oklch(0.80 0.150 85);
  --danger:       oklch(0.66 0.190 22);

  /* Forma */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Espacio */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t:      200ms;
  --t-slow: 320ms;

  /* Capas */
  --z-nav: 40;
  --z-flag: 60;
  --z-dialog: 80;
  --z-toast: 90;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;

  /* Columna de alto fijo: así scrollea el contenido de cada pantalla
     y no el documento entero (si no, la barra inferior se despega). */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
svg { display: block; }

/* Íconos: trazo uniforme en toda la app */
svg[viewBox="0 0 24 24"] {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-hi);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Contenedor tipo teléfono ──────────────────────────── */
.phone {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
@media (min-width: 520px) {
  body { background: oklch(0.115 0.010 42); }
  .phone { box-shadow: 0 0 0 1px var(--line-soft); }
}

/* ── Aviso de demo ─────────────────────────────────────── */
.demo-flag {
  flex: none; z-index: var(--z-flag);
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; max-width: 460px; margin-inline: auto;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem; font-weight: 500; color: var(--ink-2);
}
.demo-flag__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn); flex: none;
}
.demo-flag__x {
  margin-left: auto; padding: 0 var(--sp-1);
  font-size: 1.15rem; line-height: 1; color: var(--ink-muted);
  transition: color var(--t-fast) var(--ease);
}
.demo-flag__x:hover { color: var(--ink); }
.demo-flag[hidden] { display: none; }

/* ── Pantallas ─────────────────────────────────────────── */
.screen {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
}
.screen[hidden] { display: none; }
.screen.has-nav .scroll { padding-bottom: 104px; }

.scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4) var(--sp-4) var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-4);
}

/* Entrada de pantalla */
.screen:not([hidden]) { animation: screen-in var(--t) var(--ease); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Topbar ────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  flex: none;
}
.topbar--plain { padding-bottom: var(--sp-4); }
.topbar--cashier { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar__title {
  flex: 1; text-align: center;
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
}
.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn:active { transform: scale(0.96); }
.icon-btn--bare { background: none; }
.icon-btn--bare:hover { background: var(--surface); }
.icon-btn--spacer { visibility: hidden; }

.greet { flex: 1; min-width: 0; }
.greet__hi { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; }
.greet__hi strong { font-weight: 800; }
.greet__sub { font-size: 0.82rem; color: var(--ink-muted); margin-top: 1px; }

/* ── Tipografía ────────────────────────────────────────── */
.h1 {
  font-size: 1.75rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15;
  text-wrap: balance;
}
.lede {
  color: var(--ink-muted); font-size: 0.95rem;
  max-width: 60ch; text-wrap: pretty;
}
.lede--tight { margin-bottom: var(--sp-1); }
.fineprint {
  font-size: 0.75rem; color: var(--ink-muted);
  line-height: 1.45; text-wrap: pretty;
}
.fineprint--center { text-align: center; padding-block: var(--sp-4); }
.link {
  /* Padding negativo al margen para llegar a 44px de área táctil
     sin cambiar el ritmo visual del encabezado. */
  margin: calc(var(--sp-3) * -1);
  padding: var(--sp-3);
  min-height: 44px;
  display: inline-flex; align-items: center;
  font-size: 0.82rem; font-weight: 600; color: var(--brand-hi);
  text-underline-offset: 3px;
}
.link:hover { text-decoration: underline; }

/* ── El Tío Mono ───────────────────────────────────────── */
.mono { display: block; flex: none; line-height: 0; user-select: none; }
.mono-svg { width: 100%; height: 100%; overflow: visible; }
.mono--xs { width: 32px; height: 32px; }
.mono--sm { width: 38px; height: 38px; }
.mono--md { width: 68px; height: 68px; }
.mono--lg { width: 108px; height: 108px; }

/* Sobre la tarjeta naranja el disco de marca se pierde: se oscurece */
.card-tm .mono-bg { fill: oklch(0.18 0.045 34 / 0.20); }

/* Respiración: el personaje nunca queda del todo quieto */
.mono-body {
  transform-box: fill-box;
  transform-origin: 50% 88%;
  animation: mono-respira 4.2s var(--ease) infinite;
}
@keyframes mono-respira {
  0%, 100% { transform: translateY(0)      scale(1, 1); }
  45%      { transform: translateY(-2.5px) scale(0.995, 1.008); }
}

/* Orejas: se mueven apenas, y desfasadas entre sí */
.mono-ear { transform-box: fill-box; transform-origin: 50% 22%; }
.mono-ear--l { animation: mono-oreja-l 4.2s var(--ease) infinite; }
.mono-ear--r { animation: mono-oreja-r 4.2s var(--ease) infinite 0.35s; }
@keyframes mono-oreja-l { 0%,100% { rotate: 0deg; } 50% { rotate: -4deg; } }
@keyframes mono-oreja-r { 0%,100% { rotate: 0deg; } 50% { rotate:  4deg; } }

/* Parpadeo */
.mono-eye-shut { display: none; }
.mono-eye-open {
  transform-box: fill-box;
  transform-origin: center;
  animation: mono-parpadeo 6.5s steps(1, end) infinite;
}
.mono-eye--r .mono-eye-open { animation-delay: 0.04s; }
@keyframes mono-parpadeo {
  0%, 95.5%, 100% { transform: scaleY(1); }
  96.8%           { transform: scaleY(0.08); }
  98%             { transform: scaleY(1); }
}

/* Estados de ánimo */
.mono[data-mood="guino"] .mono-eye--l .mono-eye-open { display: none; }
.mono[data-mood="guino"] .mono-eye--l .mono-eye-shut { display: block; }

.mono[data-mood="feliz"] .mono-eye-open,
.mono[data-mood="espera"] .mono-eye-open { display: none; }
.mono[data-mood="feliz"] .mono-eye-shut,
.mono[data-mood="espera"] .mono-eye-shut { display: block; }
.mono[data-mood="espera"] .mono-mouth {
  transform-box: fill-box; transform-origin: 50% 0;
  transform: scaleY(0.45);
}
.mono[data-mood="feliz"] .mono-body { animation-duration: 1.9s; }

/* Gestos puntuales */
.mono--saltar .mono-body  { animation: mono-salta 720ms var(--ease); }
.mono--asentir .mono-body { animation: mono-asiente 620ms var(--ease); }
@keyframes mono-salta {
  0%   { transform: translateY(0)     scale(1, 1); }
  22%  { transform: translateY(6px)   scale(1.07, 0.92); }
  50%  { transform: translateY(-16px) scale(0.95, 1.07); }
  74%  { transform: translateY(3px)   scale(1.05, 0.95); }
  100% { transform: translateY(0)     scale(1, 1); }
}
@keyframes mono-asiente {
  0%, 100% { rotate: 0deg; }
  30%      { rotate: -6deg; }
  65%      { rotate: 4deg; }
}

/* ── Botones ───────────────────────────────────────────── */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
  text-align: center;
}
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn__icon { width: 19px; height: 19px; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 40px; padding: 0 var(--sp-4); font-size: 0.85rem; }
.btn--lg { min-height: 56px; font-size: 1.05rem; }

.btn--primary { --btn-bg: var(--brand); --btn-fg: var(--brand-ink); font-weight: 700; }
.btn--primary:hover:not(:disabled) { background: var(--brand-hi); }

.btn--solid { --btn-bg: var(--surface-2); }

.btn--outline {
  --btn-bg: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--outline:hover:not(:disabled) { background: var(--surface); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface); color: var(--ink); }

.btn--danger { --btn-bg: transparent; --btn-fg: var(--danger); box-shadow: inset 0 0 0 1.5px oklch(0.66 0.19 22 / 0.4); }
.btn--danger:hover:not(:disabled) { background: oklch(0.66 0.19 22 / 0.12); }

.row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ── Bienvenida ────────────────────────────────────────── */
.welcome { justify-content: space-between; padding: var(--sp-6) var(--sp-5) var(--sp-8); }
.welcome__art {
  flex: 1; display: grid; place-items: center;
  min-height: 180px;
  position: relative;
}
.welcome__art::after {
  content: ''; position: absolute; inset: 50% auto auto 50%;
  width: 220px; height: 220px; translate: -50% -50%;
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 68%);
  z-index: -1;
}
.welcome__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.welcome__kicker {
  font-size: 0.78rem; font-weight: 700; color: var(--brand-hi);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.welcome__title {
  font-size: clamp(2.1rem, 9vw, 2.75rem); font-weight: 900;
  letter-spacing: -0.035em; line-height: 1.05;
}
.welcome__text { color: var(--ink-muted); font-size: 1rem; text-wrap: pretty; }
.welcome__actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ── Formularios ───────────────────────────────────────── */
.signup__body { padding: 0 var(--sp-5) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
.signup__body form { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-4); }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.input {
  width: 100%; min-height: 52px;
  padding: 0 var(--sp-4);
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.input::placeholder { color: oklch(0.635 0.018 55); }  /* 4.5:1 sobre --surface */
.input:hover { border-color: var(--line); }
.input:focus { outline: none; border-color: var(--brand); background: var(--surface-2); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input--lg { min-height: 60px; font-size: 1.35rem; font-weight: 700; }

.input-group { display: flex; align-items: stretch; }
.input-group__prefix {
  display: grid; place-items: center;
  padding-inline: var(--sp-4);
  background: var(--surface-2);
  border: 1.5px solid var(--line-soft);
  border-right: 0;
  border-radius: var(--r) 0 0 var(--r);
  color: var(--ink-muted);
  font-size: 0.95rem; font-weight: 600;
  white-space: nowrap;
}
.input--grouped { border-radius: 0 var(--r) var(--r) 0; }
.field__hint { font-size: 0.76rem; color: var(--ink-muted); }
.field__error { font-size: 0.78rem; color: var(--danger); font-weight: 500; }
.field__error[hidden] { display: none; }

/* ── La tarjeta ────────────────────────────────────────── */
.card-tm {
  display: flex; flex-direction: column; gap: var(--sp-5);
  width: 100%; text-align: left;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 88% 6%, var(--brand-hi) 0%, transparent 58%),
    var(--brand);
  color: var(--brand-ink);
  transition: transform var(--t) var(--ease), filter var(--t) var(--ease);
}
.card-tm:hover { filter: brightness(1.04); }
.card-tm:active { transform: scale(0.99); }
.card-tm__top { display: flex; align-items: center; justify-content: space-between; }
.card-tm__brand { font-size: 0.82rem; font-weight: 800; letter-spacing: -0.01em; opacity: 0.75; }
.card-tm__label { font-size: 0.78rem; font-weight: 600; opacity: 0.7; }
.card-tm__amount {
  font-size: 2.6rem; font-weight: 900;
  letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.card-tm__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.card-tm__holder {
  font-size: 0.82rem; font-weight: 600; opacity: 0.8;
  text-transform: uppercase; letter-spacing: 0.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-tm__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.card-tm__cta svg { width: 17px; height: 17px; stroke-width: 2; }

/* ── Paneles ───────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.panel--flush { padding: 0; gap: 0; overflow: hidden; }
.panel--demo { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-soft); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.panel__head--pad { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.panel__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.panel__lede { font-size: 0.87rem; color: var(--ink-muted); text-wrap: pretty; }
.panel__foot { font-size: 0.85rem; color: var(--ink-2); font-weight: 500; }

.pill {
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-hi);
  font-size: 0.78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Sellos ────────────────────────────────────────────── */
.stamps {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: var(--sp-2); list-style: none; padding: 0;
  margin-block: var(--sp-1);
}
.stamp {
  aspect-ratio: 1;
  min-width: 0;   /* sin esto el contenido estira la columna y el 8.º sello se va de pantalla */
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--line-soft);
  color: var(--ink-muted);
  font-size: 0.72rem; font-weight: 700;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.stamp--on {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: none;
}
.stamp--on svg { width: 15px; height: 15px; stroke-width: 3; }
.stamp--free {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--brand);
  color: var(--brand-hi);
}
.stamp--free svg { width: 16px; height: 16px; stroke-width: 2; }
.stamp--pop { animation: stamp-pop var(--t-slow) var(--ease); }
@keyframes stamp-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Medidor de puntos ─────────────────────────────────── */
.meter {
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
  margin-block: var(--sp-2);
}
.meter__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--brand);
  width: 0;
  transition: width var(--t-slow) var(--ease);
}
.meter__marks { position: absolute; inset: 0; display: flex; }
.meter__mark { flex: 1; border-right: 2px solid var(--bg); }
.meter__mark:last-child { border-right: 0; }

/* ── Nota del Tío ──────────────────────────────────────── */
.tio-note {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--brand-tint);
}
.tio-note p { font-size: 0.88rem; color: var(--ink); font-weight: 500; text-wrap: pretty; }
.tio-note[hidden] { display: none; }

/* ── Movimientos ───────────────────────────────────────── */
.tx { list-style: none; padding: 0; }
.tx__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line-soft);
}
.tx__item:first-child { border-top: 0; }
.tx--full .tx__item {
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
}
.tx--full .tx__item:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.tx--full .tx__item:last-child  { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.tx__ico {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
}
.tx__ico svg { width: 18px; height: 18px; }
.tx__ico--in  { background: oklch(0.74 0.155 155 / 0.15); color: var(--ok); }
.tx__ico--out { background: var(--surface-2); color: var(--ink-2); }
.tx__ico--gift{ background: var(--brand-tint); color: var(--brand-hi); }
.tx__body { flex: 1; min-width: 0; }
.tx__what { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; }
.tx__when { font-size: 0.76rem; color: var(--ink-muted); }
.tx__amt {
  font-size: 0.95rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tx__amt--in { color: var(--ok); }
.tx__amt--gift { color: var(--brand-hi); }

/* ── Montos de carga ───────────────────────────────────── */
.amounts { border: 0; padding: 0; margin: 0; }
.amounts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.amount {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-soft);
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.amount strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.amount span { font-size: 0.7rem; color: var(--brand-hi); font-weight: 700; min-height: 1em; }
.amount:hover { background: var(--surface-2); }
.amount[aria-pressed="true"] {
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 2px var(--brand);
}

.bonus {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  background: var(--brand-tint);
}
.bonus p { font-size: 0.85rem; font-weight: 600; }
.bonus[hidden] { display: none; }

.summary {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--surface);
}
.summary__row {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: 0.88rem; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.summary__row[hidden] { display: none; }
.summary__plus { color: var(--brand-hi); font-weight: 700; }
.summary__row--total {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  font-size: 1rem; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em;
}

/* ── Premios ───────────────────────────────────────────── */
.rewards { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.reward {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.reward--ready { box-shadow: inset 0 0 0 2px var(--brand); }
.reward__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 26px;
}
.reward--ready .reward__ico { background: var(--brand-tint); }
.reward__body { flex: 1; min-width: 0; }
.reward__name { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.015em; }
.reward__need { font-size: 0.78rem; color: var(--ink-muted); margin-top: 1px; }
.reward--ready .reward__need { color: var(--brand-hi); font-weight: 600; }
.reward__btn { flex: none; }

/* ── Menú ──────────────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
  flex: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 0.85rem; font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); font-weight: 700; }

.dishes { list-style: none; padding: 0; display: flex; flex-direction: column; }
.dish {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line-soft);
}
.dish:first-child { border-top: 0; padding-top: 0; }
.dish__body { flex: 1; min-width: 0; }
.dish__name { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.015em; }
.dish__desc { font-size: 0.82rem; color: var(--ink-muted); margin-top: 2px; text-wrap: pretty; }
.dish__price {
  font-size: 0.95rem; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  letter-spacing: -0.02em;
}
.menu-cat { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.025em; margin-top: var(--sp-2); }

/* ── Pagar / QR ────────────────────────────────────────── */
.pay__body {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
  text-align: center;
}
.qr-frame {
  display: grid; place-items: center;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: #fff;   /* máximo contraste: los lectores lo agradecen */
  width: min(292px, 82vw);
  aspect-ratio: 1;
}
.qr-frame canvas { width: 100%; height: auto; image-rendering: pixelated; }
.qr-fallback { text-align: center; color: #111; }
.qr-fallback__code {
  font-size: 2rem; font-weight: 900; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.qr-fallback__hint { font-size: 0.8rem; color: #555; margin-top: var(--sp-2); }

.pay__code { font-size: 0.88rem; color: var(--ink-muted); }
.pay__code strong { color: var(--ink); font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

.pay__meta {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  width: 100%;
}
.pay__meta-item { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pay__meta-label { font-size: 0.74rem; color: var(--ink-muted); font-weight: 500; }
.pay__meta-value {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pay__meta-sep { width: 1px; align-self: stretch; background: var(--line-soft); }
.pay__hint { font-size: 0.8rem; color: var(--ink-muted); max-width: 34ch; text-wrap: pretty; }
.pay__body .btn--ghost { margin-top: auto; }

/* ── Modo cajero ───────────────────────────────────────── */
.cashier { background: var(--bg); }
.cashier__body {
  flex: 1; overflow-y: auto;
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.cashier__intro { font-size: 0.85rem; color: var(--ink-muted); text-wrap: pretty; }
.cashier__client {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.cashier__avatar {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 1.3rem; font-weight: 800;
}
.cashier__name { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.cashier__meta { font-size: 0.82rem; color: var(--ink-muted); }
.cashier__actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.cashier__log {
  font-size: 0.76rem; color: var(--ink-muted);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  background: var(--surface);
  text-wrap: pretty;
}

/* ── Perfil ────────────────────────────────────────────── */
.kv {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.kv:first-child { border-top: 0; padding-top: 0; }
.kv span { color: var(--ink-muted); }
.kv strong { font-weight: 700; letter-spacing: -0.01em; text-align: right; }

.switcher { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.switcher__opt {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r);
  background: var(--surface-2);
  text-align: left;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.switcher__opt strong { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.015em; }
.switcher__opt span { font-size: 0.75rem; color: var(--ink-muted); }
.switcher__opt[aria-checked="true"] {
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 2px var(--brand);
}
.switcher__opt[aria-checked="true"] span { color: var(--brand-hi); }

.demo-tools { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); }

.local-note {
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 0.82rem; color: var(--ink-muted);
}
.local-note strong { color: var(--ink-2); }

/* ── Estados vacíos ────────────────────────────────────── */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
}
.empty[hidden] { display: none; }
.empty h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.empty p { font-size: 0.88rem; color: var(--ink-muted); max-width: 32ch; text-wrap: pretty; }

/* ── Navegación ────────────────────────────────────────── */
.nav {
  position: fixed; bottom: 0; left: 50%; translate: -50% 0;
  z-index: var(--z-nav);
  width: 100%; max-width: 460px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: oklch(0.165 0.014 42 / 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
}
.nav[hidden] { display: none; }
.nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--sp-2) 0;
  color: var(--ink-muted);
  font-size: 0.66rem; font-weight: 600;
  transition: color var(--t-fast) var(--ease);
  min-height: 48px; justify-content: center;
}
.nav__item svg { width: 21px; height: 21px; }
.nav__item:hover { color: var(--ink-2); }
.nav__item.is-on { color: var(--brand-hi); }
.nav__qr {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  margin-inline: auto;
  border-radius: var(--r);
  background: var(--brand);
  color: var(--brand-ink);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav__qr svg { width: 25px; height: 25px; stroke-width: 1.6; }
.nav__qr:hover { background: var(--brand-hi); }
.nav__qr:active { transform: scale(0.94); }

/* ── Premio desbloqueado ───────────────────────────────── */
.unlock {
  border: 0; padding: 0;
  background: transparent;
  max-width: 340px; width: calc(100% - 40px);
  color: var(--ink);
  margin: auto;
}
.unlock::backdrop { background: oklch(0.10 0.01 42 / 0.75); backdrop-filter: blur(3px); }
.unlock__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}
.unlock[open] .unlock__inner { animation: unlock-in var(--t-slow) var(--ease); }
@keyframes unlock-in {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.unlock__kicker {
  font-size: 0.74rem; font-weight: 700; color: var(--brand-hi);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.unlock__title { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.unlock__text { font-size: 0.9rem; color: var(--ink-muted); text-wrap: pretty; }
.unlock .btn { margin-top: var(--sp-2); }

/* ── Avisos ────────────────────────────────────────────── */
.toast-wrap {
  position: fixed; bottom: calc(96px + env(safe-area-inset-bottom));
  left: 50%; translate: -50% 0;
  z-index: var(--z-toast);
  width: min(430px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  background: var(--surface-3);
  color: var(--ink);
  font-size: 0.87rem; font-weight: 600;
  animation: toast-in var(--t) var(--ease);
}
.toast--ok  { background: oklch(0.30 0.075 155); }
.toast--bad { background: oklch(0.33 0.09 22); }
.toast.is-out { animation: toast-out var(--t) var(--ease) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ── Movimiento reducido ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .screen:not([hidden]) { animation: none; }
}