/* Antojitos · sistema visual
   Jerarquia: cantidad > imagen > dinero > nombre.
   El acento SOLO significa "hay cantidad" o "esto es dinero vivo". */
:root{
  --bg:#0a0a0c; --card:#141418; --card2:#1b1b21; --card3:#212129;
  --line:#23232b; --line2:#2e2e3a;
  --ink:#f5f5f7; --ink-2:#9a9aa6; --ink-3:#5c5c68; --sub:#2a2a33;
  --k:#ff5c9d; --k2:#ff8fc0; --kink:#2a0616;
  --ok:#25d97e; --ok2:#7ef2b5; --bad:#ff5a5a;
  --nav:76px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);
  font:400 16px/1.3 Inter,system-ui,-apple-system,sans-serif;
  overscroll-behavior:none}
button,input{font-family:inherit}
/* cifras: siempre tabulares para que no bailen al cambiar */
.n{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.n i{font-style:normal;font-size:.64em;font-weight:800;opacity:.88}
.n s{text-decoration:none;font-size:.56em;font-weight:800;opacity:.7;vertical-align:.36em;margin-right:.05em}

/* ---- layout general ---- */
.app{min-height:100dvh;display:grid;grid-template-rows:auto 1fr}
.page{overflow:auto;padding:clamp(14px,2.2vw,24px) clamp(14px,2.6vw,26px) 20px}
.head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.head:empty{display:none}
.head h1{font:900 clamp(23px,3.4vw,34px) Inter;letter-spacing:-.035em}
.head .sp{margin-left:auto}

/* ---- navegacion superior ----
   Arriba en vez de abajo: la fila del titulo estaba medio vacia y abajo se
   apilaban dos barras (nav + cobro). Asi el pie queda solo para cobrar. */
.nav{position:sticky;top:0;z-index:60;background:#0d0d11f2;backdrop-filter:blur(20px);
  border-bottom:1.5px solid var(--line);display:flex;gap:6px;overflow-x:auto;
  padding:10px clamp(14px,2.6vw,26px) calc(10px + env(safe-area-inset-top));
  scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{background:#17171d;border:1.5px solid var(--line);color:var(--ink-2);
  cursor:pointer;height:52px;padding:0 clamp(14px,1.8vw,20px);border-radius:15px;
  display:flex;align-items:center;gap:9px;font:800 15px Inter;letter-spacing:-.01em;
  position:relative;white-space:nowrap;flex:none;transition:.15s}
.nav button:hover{background:#20202a;color:var(--ink)}
.nav button svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.nav button[data-on]{background:var(--k);border-color:var(--k);color:var(--kink)}
.nav .badge{background:var(--kink);color:var(--k);font:900 12px Archivo;
  min-width:22px;height:22px;padding:0 6px;border-radius:99px;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;margin-left:1px}
.nav button:not([data-on]) .badge{background:var(--k);color:var(--kink)}

/* ---- controles ---- */
.btn{background:var(--sub);border:1.5px solid var(--line);color:var(--ink);border-radius:15px;
  height:54px;padding:0 20px;font:800 15px Inter;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:8px}
.btn:active{transform:scale(.97)}
.btn.k{background:var(--k);border-color:var(--k);color:var(--kink)}
.btn.g{background:var(--ok);border-color:var(--ok);color:#04220f}
.btn.sm{height:44px;padding:0 15px;font-size:14px;border-radius:12px}
.inp{background:#0e0e11;border:1.5px solid var(--line);border-radius:14px;height:58px;
  color:var(--ink);font:800 19px Inter;padding:0 15px;outline:0;width:100%}
.inp:focus{border-color:var(--k)}
.inp::-webkit-outer-spin-button,.inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp[type=number]{-moz-appearance:textfield}
.fl{display:grid;gap:7px}
.fl u{text-decoration:none;font:600 11px Inter;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.12em}

/* ---- modal ---- */
.mask{position:fixed;inset:0;z-index:250;background:#000000b8;backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .22s}
.mask[data-on]{opacity:1;pointer-events:auto}
.modal{background:var(--card);border:1.5px solid var(--line2);border-radius:26px;
  padding:22px;width:min(100%,520px);max-height:88dvh;overflow:auto;
  transform:translateY(14px) scale(.98);transition:transform .26s cubic-bezier(.2,1,.3,1)}
.mask[data-on] .modal{transform:none}
.modal h2{font:900 24px Inter;letter-spacing:-.025em;margin-bottom:16px}

/* ---- avatar ---- */
.av{border-radius:24px;overflow:hidden;flex:none;background:#17171d}
.av svg{width:100%;height:100%;display:block}

/* ---- estados ---- */
.empty{color:var(--ink-3);font:600 16px Inter;padding:44px 10px;text-align:center}
.load{color:var(--ink-3);font:600 14px Inter;padding:34px 10px;text-align:center}
.toast{position:fixed;left:50%;bottom:118px;transform:translate(-50%,20px);
  background:#1e1e26;border:1.5px solid var(--line2);color:var(--ink);
  padding:13px 20px;border-radius:15px;font:800 15px Inter;z-index:200;
  opacity:0;pointer-events:none;transition:.26s;box-shadow:0 12px 32px #000a}
.toast[data-on]{opacity:1;transform:translate(-50%,0)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#33333f;border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* ---- pantalla de clave ---- */
.lock{position:fixed;inset:0;z-index:400;background:var(--bg);display:grid;place-items:center;
  padding:20px;opacity:0;transition:opacity .3s}
.lock[data-on]{opacity:1}
.lbox{width:min(100%,340px);text-align:center}
.lbox.mal{animation:nope .4s}
@keyframes nope{0%,100%{transform:translateX(0)}20%{transform:translateX(-11px)}
  40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.lg{font:900 clamp(38px,9vw,52px)/1 Fraunces,serif;color:var(--k);letter-spacing:-.03em}
.lt{font:600 15px Inter;color:var(--ink-3);margin-top:10px}
.dots{display:flex;gap:15px;justify-content:center;margin:26px 0 30px}
.dots i{width:17px;height:17px;border-radius:50%;background:transparent;
  border:2.5px solid var(--line2);transition:.16s}
.dots i.on{background:var(--k);border-color:var(--k);transform:scale(1.12)}
.lbox.mal .dots i.on{background:var(--bad);border-color:var(--bad)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.keys button{height:clamp(62px,9vh,74px);border-radius:20px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);font:800 27px Archivo;cursor:pointer;
  font-variant-numeric:tabular-nums}
.keys button:active{background:var(--k);border-color:var(--k);color:var(--kink);transform:scale(.95)}
.keys .gh{visibility:hidden;pointer-events:none}
.keys [data-b]{font-size:21px;color:var(--ink-2)}