/* ═══ BLOCCO: stile ═══
   Preso dall'app di Mihaela (Mihaela-gestione/public/index.html righe 15-107),
   senza il suo logo sullo sfondo. In piu' ci sono alcune CLASSI con nome
   (.scheda, .tasto, .scelta, .pallino...): sono gli stessi numeri che Mihaela
   scrive a mano dentro ogni riga, messi in un posto solo, cosi' ogni schermata
   del bar esce uguale alle altre senza ricopiare stili lunghi.
   Regole che non si toccano: caselle a 16 px o piu' (sotto, iPhone zooma e
   non torna indietro); touch-action:manipulation su tutto quello che si tocca
   (senza, Safari aspetta 300 ms e ogni tanto si mangia il tocco).          */

/* ---------- lo schermo: niente zoom, niente scorrimento di lato ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  max-width:100%;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;height:100%;overflow-x:hidden;touch-action:pan-y}
/* hidden nasconde DAVVERO: `.ti{display:inline-block}` di icone.css vinceva sull'attributo e l'icona di WhatsApp nascosta
   si vedeva accanto a tutti i nomi (verificatore, giro 2 del 24/09/2026) */
[hidden]{display:none!important}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
     background:#dfe3e8;color:#111827;display:flex;align-items:center;justify-content:center}

/* ---------- la cornice da telefono (sul Mac); sul telefono vero sparisce ---------- */
.tel{width:400px;height:860px;background:#f4f6f7;background-image:linear-gradient(#dee6ec,#ffffff);
  overflow:hidden;position:relative;
  border:12px solid #16181d;border-radius:46px;box-shadow:0 30px 70px rgba(0,0,0,.35);
  display:flex;flex-direction:column}
@media (max-width:640px),(hover:none) and (pointer:coarse){
  body{background:#f4f6f7;display:block}
  .tel{width:100%;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none}}

/* ---------- la stampa: sulla carta finisce SOLO .foglio ---------- */
@media print{
  html,body{height:auto;background:#fff;display:block;overflow:visible}
  .tel{width:auto;height:auto;background:#fff;border:0;border-radius:0;
       box-shadow:none;overflow:visible;display:block}
  header,#testa,#stato,.nostampa{display:none!important}
  #corpo{flex:none;height:auto;max-height:none;overflow:visible!important;padding:0!important}
  .foglio{border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
  @page{margin:16mm}
}

/* ---------- i tre contenitori fissi: #testa, #corpo (scorre), #stato ---------- */
header{padding:16px 16px 0;flex:0 0 auto;padding-top:max(16px,env(safe-area-inset-top))}
#testa{flex:0 0 auto}
/* NIENTE -webkit-overflow-scrolling:touch: lascia buchi bianchi su iOS */
#corpo{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
       padding:10px 16px calc(24px + env(safe-area-inset-bottom))}

/* ---------- il tocco ----------
   Tutto quello che si tocca e' un <button> oppure ha la classe .tocca.  */
button,.tocca{touch-action:manipulation}
button{font:inherit;cursor:pointer;background:transparent;border:0.5px solid rgba(17,24,39,.16);
       border-radius:10px;color:#111827;padding:8px 12px;
       box-shadow:0 3px 0 rgba(17,24,39,.11), 0 4px 10px rgba(17,24,39,.10);
       transition:transform .06s ease, box-shadow .06s ease, filter .06s ease;
       -webkit-user-select:none;user-select:none}
button:active,button.premuto{transform:translateY(3px);
       box-shadow:0 0 0 rgba(17,24,39,0), 0 1px 3px rgba(17,24,39,.12);filter:brightness(.95)}
.tocca{cursor:pointer;-webkit-user-select:none;user-select:none;
       transition:transform .07s ease, box-shadow .07s ease, filter .07s ease}
.tocca:active,.tocca.premuto{transform:scale(.975);filter:brightness(.96)}

/* ---------- le caselle ---------- */
input,select,textarea{font:inherit;font-size:16px;padding:11px;border:0.5px solid rgba(17,24,39,.22);
      border-radius:10px;background:#fff;outline:none;color:#111827;width:100%}
input:focus,select:focus,textarea:focus{border-color:#0F766E;box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.sec{color:#6b7280}.mut{color:#9ca3af}

/* ---------- l'avviso in basso (si fa attraversare dal dito) ---------- */
.stato{position:absolute;left:0;right:0;bottom:0;pointer-events:none;background:#111827;color:#fff;font-size:14px;
       padding:12px 14px;padding-bottom:max(12px,env(safe-area-inset-bottom));text-align:center;
       transform:translateY(100%);transition:transform .25s;z-index:30}
.stato.on{transform:translateY(0)}

/* ---------- la home a quadrati ---------- */
/* minmax(0,1fr): la colonna si stringe davvero. Con «1fr» e aspect-ratio, sui telefoni stretti (≤340 px,
   iPhone SE con lo zoom) un testo che andava a capo allargava il quadrato e la colonna destra usciva
   dallo schermo (verificatore, 23/09/2026) */
.griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.quadro{position:relative;min-width:0;min-height:146px;overflow-wrap:anywhere;border-radius:20px;padding:14px;border:1px solid;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 4px 14px rgba(17,24,39,.11), 0 1px 3px rgba(17,24,39,.07),
    inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1.5px 0 rgba(17,24,39,.055)}
.quadro:active,.quadro.premuto{transform:translateY(1px) scale(.985);
  box-shadow:0 10px 26px rgba(17,24,39,.20), 0 3px 8px rgba(17,24,39,.13);filter:brightness(.985)}
.quadro.spento{opacity:.5}
.quadro-icona{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.75);border:1px solid;
  display:flex;align-items:center;justify-content:center;font-size:22px}
.quadro-nome{font-size:19px;font-weight:600;letter-spacing:-.3px;line-height:1.15}
.quadro-riga{font-size:13.5px;margin-top:4px;line-height:1.3}
.logo{width:74px;height:74px;border-radius:19px;background:#0F766E;color:#fff;margin:0 auto;
  display:flex;align-items:center;justify-content:center;font-size:36px;
  box-shadow:0 7px 18px rgba(17,24,39,.18)}
.logo.piccolo{width:44px;height:44px;border-radius:14px;font-size:22px;margin:0;box-shadow:none;flex:0 0 auto}
/* 44 px come tutti i tasti (erano 36: browser vero, 24/09/2026, BV5) */
.tasto-esci{min-height:44px;font-size:13.5px;font-weight:500;color:#9ca3af;background:#fff;border:1px solid #d6dade;
  border-radius:8px;padding:9px 22px}

/* ---------- i pallini ----------
   .pallino = quello sul quadrato della home (rosso: c'e' da fare; verde: tutto a posto / aperto).
   .punto   = il pallino piccolo dentro le righe e nelle legende.            */
.pallino{position:absolute;top:10px;right:10px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;
  border:2px solid #fff;display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:700;color:#fff;box-shadow:0 2px 6px rgba(17,24,39,.20)}
.pallino:empty{min-width:16px;width:16px;height:16px;padding:0}
.pallino.rosso{background:#DC2626}
.pallino.verde{background:#059669}
.punto{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 auto;vertical-align:middle}
.punto.rosso{background:#E24B4A}.punto.verde{background:#059669}
.punto.giallo{background:#F59E0B}.punto.grigio{background:#E5E7EB}

/* ---------- i riquadri e le righe ---------- */
.scheda{background:#fff;border-radius:14px;border:0.5px solid rgba(17,24,39,.09);
  box-shadow:0 1px 2px rgba(17,24,39,.10),0 5px 16px rgba(17,24,39,.09)}
.scheda+.scheda{margin-top:10px}
.riga{display:flex;align-items:center;gap:10px;padding:13px 12px}
.riga+.riga{border-top:0.5px solid rgba(17,24,39,.06)}
.etichetta{font-size:13.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#9ca3af;margin:18px 2px 8px}
.spiega{font-size:14px;color:#6b7280;margin:0 0 12px;line-height:1.5}
.errore{font-size:15px;color:#c2410c;margin-top:10px;line-height:1.45}
.nome{font-size:19px;font-weight:600}
.avatar{border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;flex:0 0 auto}

/* ---------- i tasti ---------- */
.tasto{width:100%;padding:15px;font-size:16.5px;border-radius:12px;background:#fff;color:#6b7280}
.tasto.ok{border-color:#0F766E;color:#0F766E;font-weight:600}
.tasto.pieno{border:0;background:#0F766E;color:#fff;font-weight:600}
.tasto.ross{border-color:#c2410c;color:#c2410c}
.tasto:disabled{opacity:.55}
/* il tasto tondo della freccia e delle frecce avanti/indietro */
.tondo{width:44px;height:44px;border-radius:11px;padding:0;background:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:19px}

/* ---------- le linguette a tocchi (ruolo, categoria, giorni...) ----------
   quella scelta e' PIENA (col colore della schermata), le altre vuote; vanno a capo */
.scelte{display:flex;flex-wrap:wrap;gap:6px}
.scelta{min-height:44px;padding:11px 15px;font-size:15.5px;border-radius:10px;background:#fff;color:#374151;
  border:1px solid rgba(17,24,39,.16);box-shadow:none}
.scelta.on{background:#0F766E;color:#fff;font-weight:600;border-color:transparent;
  box-shadow:0 2px 5px rgba(17,24,39,.18)}

/* ---------- il − numero + (piuMeno) e il − casella + (passo) ---------- */
.pm{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.pm button{width:44px;height:44px;padding:0;border:0;border-radius:10px;font-size:20px;
  display:flex;align-items:center;justify-content:center}
.pm .meno{background:#f1f3f4;color:#6b7280}
.pm .piu{background:#E1F5EE;color:#0F6E56}
.pm .num{min-width:44px;text-align:center;font-size:23px;font-weight:600}
.pm .pm-casella{width:84px;font-size:21px;padding:9px 4px}
.pm .pm-unita{font-size:18px;font-weight:600;color:#6b7280;margin-left:-2px}
/* il tasto piccolo dentro una riga («Rimetti», «Arrivato»...) */
.tasto-piccolo{flex:0 0 auto;padding:10px 14px;font-size:15px;font-weight:600;border-radius:10px;background:#fff}
.tasto-piccolo.ok{border-color:#0F766E;color:#0F766E}

/* ---------- le caselle dei numeri e dei soldi ---------- */
.numero{text-align:center;font-size:22px;font-weight:600;padding:9px 4px}
.soldi{text-align:right;font-size:24px;font-weight:600;color:#0F766E;padding:8px 10px}

/* ---------- la conferma nella riga ---------- */
.conferma{margin-top:11px;padding:13px;border-radius:12px;background:#FCEBEB;border:0.5px solid #f0999b}
.conferma-domanda{font-size:15.5px;color:#A32D2D;margin-bottom:11px;line-height:1.45}
.conferma-domanda .sec{font-size:14px}
.conferma-si,.conferma-no{flex:1;padding:13px;font-size:16px;border-radius:11px;background:#fff}
.conferma-si{font-weight:600;border-color:#A32D2D;color:#A32D2D}