/* =====================================================================
   daPRETTE — quello che il prototipo non aveva

   Il prototipo era una vetrina: dati finti, sempre pieni, sempre pronti.
   Un'app vera passa la maggior parte del tempo in stati che lì non
   esistevano — sta caricando, non c'è ancora niente, la rete è caduta,
   il socio è nuovo e non ha comprato nulla. Questo file aggiunge solo
   quelli, senza toccare una riga di stile.css.
   ===================================================================== */

/* `hidden` deve vincere sempre.

   Sembra pedante e invece è un bug vero, trovato aprendo l'app in un
   browser: `.gate` dichiara `display:flex`, che ha la stessa specificità
   dell'attributo `hidden` ma viene dopo — quindi la schermata di accesso
   restava distesa sopra tutta l'app, invisibile perché vuota ma capace
   di intercettare ogni tocco. Da fuori sembrava un'app morta: si vedeva
   la home, nessun bottone rispondeva. */
[hidden]{ display:none !important }

/* ---------------------------------------------------------------- accesso */

.gate{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:26px 22px calc(26px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 15% 0%, rgba(190,219,232,.12), transparent 30rem),
    radial-gradient(circle at 85% 100%, rgba(227,119,80,.14), transparent 28rem),
    var(--ink);
  overflow-y:auto;
}
.gateInner{ width:100%; max-width:420px; }
.gateLogo{ width:88px; display:block; margin:0 auto 26px; opacity:.96 }

.gateStep{ display:none; animation:gateIn .32s cubic-bezier(.2,.7,.3,1) both }
.gateStep.on{ display:block }
@keyframes gateIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.gateStep .display{ font-size:clamp(28px,8vw,36px); line-height:1.05; margin:0 0 12px }
.gateP{ color:var(--muted); font-size:14.5px; line-height:1.5; margin:0 0 22px }
.gateP b{ color:var(--text); white-space:nowrap }
.gateHint{ margin-top:14px; text-align:center }

.gateErr{
  margin:10px 0 0; padding:11px 13px; border-radius:var(--r-s);
  background:rgba(227,119,80,.14); border:1px solid rgba(227,119,80,.4);
  color:#ffd9c9; font-size:13.5px; line-height:1.45;
}

.btnMain.wide, .btnGhost.wide{ width:100%; margin-top:16px }
.btnGhost.wide{ margin-top:9px }
.btnMain[disabled]{ opacity:.5; pointer-events:none }

/* Il codice a sei cifre: cifre grandi e distanziate, perché si legge da
   una notifica e si ribatte a memoria. */
.codeInput{
  font-family:var(--tnum, inherit);
  font-size:30px !important; letter-spacing:.34em; text-align:center;
  padding-left:.34em !important;
}

/* Il riquadro del bentornato: i punti che una persona ha già sono la
   cosa più convincente che possiamo mostrarle, quindi si mostrano
   grandi e prima di qualunque richiesta. */
.bentornatoCard{
  text-align:center; padding:22px 18px 18px; margin:0 0 20px;
  border:1px solid rgba(232,193,90,.32); border-radius:var(--r-l);
  background:linear-gradient(150deg, rgba(232,193,90,.14), rgba(227,119,80,.08) 70%);
}
.bentornatoCard .pts{ display:block; font-size:46px; line-height:1 }
.bentornatoCard .ptsLbl{ display:block; margin-top:5px }
.bTess{ margin:14px 0 0; font-size:12.5px; color:var(--muted); letter-spacing:.04em }
.bTess b{ color:var(--cream); font-weight:700 }

/* ---------------------------------------------------------------- stati */

/* Lo scheletro grigio mentre arrivano i dati. Meglio di uno spinner:
   non fa saltare il contenuto quando compare, perché occupa già il posto
   giusto. */
.pending{
  display:block; border-radius:var(--r-s);
  background:linear-gradient(90deg,
    rgba(248,241,178,.05) 25%, rgba(248,241,178,.11) 37%, rgba(248,241,178,.05) 63%);
  background-size:400% 100%;
  animation:onda 1.3s ease-in-out infinite;
  color:transparent !important;
}
@keyframes onda{ from{background-position:100% 0} to{background-position:0 0} }
.pendingRow{ height:58px; margin-bottom:8px }

.vuoto{
  padding:22px 18px; text-align:center;
  color:var(--muted); font-size:14px; line-height:1.55;
}
.vuoto b{ display:block; color:var(--text); font-size:15px; margin-bottom:5px }

/* La riga che compare quando la connessione non c'è. Dice da quando
   sono vecchi i dati, invece di "errore": un saldo di due minuti fa è
   perfettamente utile, basta saperlo. */
.offline{
  position:fixed; left:0; right:0; z-index:40;
  top:0; padding:calc(6px + env(safe-area-inset-top)) 14px 6px;
  background:var(--surface-3); border-bottom:1px solid var(--line);
  color:var(--muted); font-size:12.5px; text-align:center;
  transform:translateY(-100%); transition:transform .25s ease;
}
.offline.on{ transform:none }

/* ---------------------------------------------------------------- buoni */

.buono{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 14px; border:0; text-align:left; cursor:pointer;
  background:linear-gradient(135deg, rgba(232,193,90,.16), rgba(227,119,80,.10));
  border:1px solid rgba(232,193,90,.34); border-radius:var(--r-m);
  color:var(--text); font:inherit;
}
.buono .val{
  flex:none; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:15px;
  background:rgba(232,193,90,.2); color:var(--gold);
}
.buono .bt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.buono .bt b{ font-size:14.5px }
.buono .bt span{ font-size:12.5px; color:var(--muted) }
.buono.usato{ opacity:.55 }

/* I nomi in classifica sono soprannomi scelti dai clienti: uno lungo
   manda il suo gradino fuori asse rispetto agli altri due. Due righe
   fisse tengono i tre piedistalli allineati comunque. */
.pod .nm{ min-height:2.5em; display:flex; align-items:flex-end; justify-content:center }
.pod .vl{ min-height:1.2em }

/* ---------------------------------------------------------------- varie */

.rowList .row[role="button"]{ cursor:pointer }
.rowList .row[role="button"]:active{ background:rgba(248,241,178,.05) }

.movGiorno{
  padding:14px 2px 6px; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}

/* Un movimento senza righe articolo — capita per gli scontrini più
   vecchi — non deve sembrare rotto. */
.row .txt span:empty::before{ content:"Acquisto"; }

@media (prefers-reduced-motion: reduce){
  .pending{ animation:none }
  .gateStep{ animation:none }
}