/* HELIOS — Greek Premium
   ======================
   Registro "product": il design serve il compito. La scena di riferimento resta
   quella — responsabile in piedi dietro il bancone alle 00:30, una mano sola.

   I COLORI NON SONO INVENTATI, E NON SONO NEMMENO SCELTI QUI. Sono presi uno
   per uno da `HELIOS_Report_Incassi_Luglio2026.html`, il report che Gianlu ha
   indicato come riferimento visivo vincolante. Ogni token qui sotto porta
   accanto il nome che ha nel report. Se un giorno il report cambia, si cambia
   qui e basta: nel resto del foglio non c'è un solo colore scritto a mano.

   Nota storica: fino ad agosto 2026 la palette era campionata dal logo
   (navy #0C2461, oro #FABA20). Il report usa un navy appena più chiaro e un oro
   appena più caldo. Vince il report, perché è la cosa che Gianlu ha in mano.

   IL GRECO SI SENTE, NON SI VEDE. Nessuna colonna, nessuna statua. Il meandro
   compare solo come separatore sottile e come texture appena percettibile
   dietro l'intestazione. Se qualcuno lo nota, è già troppo.

   Regole tenute d'occhio: niente barrette laterali colorate, niente testo con
   gradiente, niente vetro smerigliato decorativo, niente griglie di card
   identiche, niente emoji.                                                   */

/* ═══════════════════════════════════════════════════════════════ token ══ */
:root {
  /* --- superfici: i quattro navy del report ---------------------------- */
  --fondo:        #0E1E36;   /* report --bg   · testata, barra, accesso      */
  --fondo-2:      #0B1930;   /* pozzetti: campi, tracce delle barre          */
  --superficie:   #16305A;   /* report --card · pannelli e righe             */
  --superficie-2: #1B3A6B;   /* report: riempimento colonne · bottoni, hover */
  --bordo:        #264268;   /* report --line                                */
  --bordo-forte:  #33578A;

  /* --- testo ----------------------------------------------------------- */
  --testo:      #EAF0FA;   /* report --tx                                    */
  --testo-2:    #9DB0CC;   /* report --mut                                   */
  --testo-3:    #8895A7;   /* report --grey · pavimento, mai sotto           */
  --testo-assi: #6F83A3;   /* report: etichette degli assi nei grafici       */

  /* --- oro: azione primaria e selezione, mai decorazione ---------------- */
  --oro:       #F4B942;   /* report --gold                                   */
  --oro-vivo:  #FFCB60;
  --oro-scuro: #E0A32E;   /* report --gold2                                  */
  --oro-tenue: rgba(244, 185, 66, .16);   /* report .b-mon                   */
  --su-oro:    #0E1E36;   /* il report scrive navy sopra l'oro               */

  /* --- blu dei dati ----------------------------------------------------- */
  --ceramica:        #3B7DD8;   /* report --blue · barre, linee, spicchi     */
  --ceramica-chiara: #7FB0EC;   /* la stessa tinta, ma leggibile come testo  */
  --ceramica-tenue:  rgba(59, 125, 216, .18);

  /* --- grigio neutro: "Altro" nel mix pagamenti ------------------------- */
  --grigio: #8895A7;      /* report --grey                                   */

  /* --- stato operativo: solo questi, solo per stato ---------------------
     Ogni stato ha DUE tinte: quella piena per pallini e riempimenti, quella
     chiara per il testo. Il report fa esattamente così (.b-ex ha lo sfondo
     verde al 18% e la scritta #6fe0a8), ed è anche l'unico modo di restare
     leggibili sul navy senza sbiadire i grafici.                          */
  --ok:        #3FAE7A;   /* report --green                                  */
  --ok-testo:  #6FE0A8;   /* report .b-ex                                    */
  --ok-tenue:  rgba(63, 174, 122, .18);
  --att:       #F4B942;   /* report --gold, usato come "tieni d'occhio"      */
  --att-testo: #F4B942;
  --att-tenue: rgba(244, 185, 66, .16);
  --err:       #E5533C;   /* report --red                                    */
  --err-testo: #FF8B76;   /* report .b-lo                                    */
  --err-tenue: rgba(229, 83, 60, .16);

  /* --- un colore per sede, sempre lo stesso -----------------------------
     Nel report è il filo conduttore: il pallino accanto a "Don Minzoni" ha
     la stessa tinta della sua barra, della sua linea e del suo grafico. */
  --sede-DOM: #E0A32E;
  --sede-CDP: #3B7DD8;
  --sede-LDC: #3FAE7A;
  --sede-GEN: #8895A7;

  /* --- tipografia -------------------------------------------------------
     Il report usa Georgia sui titoli e sui numeri grandi, e il carattere di
     sistema su tutto il resto. Nessun font scaricato da internet: l'app si
     apre identica anche senza rete, che per una PWA non è un dettaglio. */
  --f-titoli:  Georgia, 'Times New Roman', serif;
  --f-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-numeri:  var(--f-ui);          /* numeri in riga e in tabella          */
  --f-cifrone: Georgia, 'Times New Roman', serif;  /* i KPI grandi           */

  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.125rem;
  --t-xl: 1.375rem; --t-2xl: 1.6rem; --t-3xl: 2rem; --t-4xl: 2.5rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* raggi del report: card 16, cover 20, pillole tonde */
  --r-sm: 8px; --r: 16px; --r-lg: 20px; --r-pill: 999px;

  /* Il report non ha ombre: separa con un bordo da 1px. Le teniamo solo
     dove qualcosa galleggia davvero sopra il resto. */
  --om-1: 0 1px 2px rgba(4, 12, 26, .45);
  --om-2: 0 8px 24px rgba(4, 12, 26, .45);
  --om-3: 0 20px 48px rgba(4, 12, 26, .60);

  --mossa: 180ms cubic-bezier(.22, 1, .36, 1);
  --z-barra: 100; --z-velo: 200; --z-pannello: 210; --z-avviso: 300;
}

/* Il meandro greco: una greca disegnata una volta sola e riusata come
   separatore. Sta qui come immagine SVG in linea per non fare richieste. */
:root {
  --greca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 10h6V2h12v6h-6v-4h4v6H4v-8h16v10h4V0h24' fill='none' stroke='%23F4B942' stroke-width='1.4' stroke-opacity='.5'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════ di base ══ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--f-ui);
  font-size: var(--t-md);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--testo);
  background: var(--fondo-2);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2 {
  font-family: var(--f-titoli);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .01em;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.3; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: var(--r-sm); }

.numero { font-family: var(--f-numeri); font-variant-numeric: tabular-nums; }
.nascosto { display: none !important; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden;
                clip: rect(0 0 0 0); white-space: nowrap; }

/* Separatore fra i blocchi grossi: una riga sottile con un rombo d'oro al
   centro. Il rombo è il simbolo del marchio, e a questa misura si vede per
   quello che è — al contrario del meandro, che va bene sulla carta stampata
   e su uno schermo da telefono diventa rumore. */
.greca {
  height: 1px; background: var(--bordo); margin: var(--s5) 0;
  position: relative;
}
.greca::after {
  content: ''; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px;
  margin-left: -3.5px; background: var(--oro-scuro); transform: rotate(45deg);
  border-radius: 1px; opacity: .8;
}

/* ═══════════════════════════════════════════════════════════ impianto ══ */
.app { min-height: 100svh; display: flex; flex-direction: column;
       padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
.pagina { flex: 1; padding: var(--s4); max-width: 760px; width: 100%; margin-inline: auto; }
.pagina > * + * { margin-top: var(--s4); }
.corpo-vista > * + * { margin-top: var(--s5); }

.ambiente {
  background: var(--att-tenue); color: var(--att-testo);
  text-align: center; padding: var(--s2) var(--s3);
  font-size: var(--t-sm); font-weight: 600;
  border-bottom: 1px solid rgba(244, 185, 66, .35);
}

/* --------------------------------------------------------- intestazione */
.testata {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4);
  background: var(--fondo);
  border-bottom: 1px solid var(--bordo);
}
/* Qui c'era il meandro greco come texture. A 12 pixel d'altezza non era una
   texture: era un disegno, e si leggeva come una fila di quadratini rotti.
   L'intestazione si chiude con la riga d'oro sottile del report. */
.testata::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro-scuro) 22%,
              var(--oro-scuro) 78%, transparent);
  opacity: .5; pointer-events: none;
}
.testata > .interno { display: flex; align-items: center; justify-content: space-between;
                      gap: var(--s3); max-width: 760px; width: 100%; margin-inline: auto; }
.saluto { font-size: var(--t-sm); color: var(--testo-2); text-align: right; }
.saluto b { color: var(--testo); font-weight: 600; display: block; }
.saluto small { font-size: var(--t-xs); color: var(--testo-3); }

.marchio { display: flex; align-items: center; gap: var(--s3); }
.marchio img, .marchio svg { width: 34px; height: 34px; flex: none; display: block; }
.marchio .nome {
  font-family: var(--f-titoli); font-weight: 700;
  letter-spacing: .14em; font-size: var(--t-lg); line-height: 1;
}
.marchio .nome small {
  display: block; font-family: var(--f-ui); font-weight: 500;
  font-size: 9.5px; letter-spacing: .18em; color: var(--oro); margin-top: 3px;
}

/* ════════════════════════════════════════════════════════════ bottoni ══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--superficie-2); color: var(--testo);
  font-size: var(--t-md); font-weight: 600;
  transition: background var(--mossa), transform var(--mossa), border-color var(--mossa);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: var(--bordo); }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primario { background: var(--oro); color: var(--su-oro); font-weight: 700; }
.btn-primario:hover:not(:disabled) { background: var(--oro-vivo); }

.btn-fantasma { background: transparent; border-color: var(--bordo); color: var(--testo-2); }
.btn-fantasma:hover:not(:disabled) { background: var(--superficie); color: var(--testo);
                                     border-color: var(--bordo-forte); }
.btn-grande { width: 100%; min-height: 64px; font-size: var(--t-lg); border-radius: var(--r-lg); }
.btn[aria-busy="true"] { pointer-events: none; opacity: .7; }

.btn-riga { display: flex; gap: var(--s2); }
.btn-riga > * { flex: 1; }

/* ═══════════════════════════════════════════════════════════ pannelli ══ */
/* Non si chiamano "card": sono contenitori funzionali, non una griglia
   decorativa di schede tutte uguali. */
.pannello {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--r);
  padding: var(--s4);
}
.pannello > * + * { margin-top: var(--s3); }
.pannello-teso { padding: var(--s3) var(--s4); }

.titolo-blocco {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  font-size: var(--t-sm); font-weight: 600; color: var(--testo-2);
}
.titolo-sezione {
  font-family: var(--f-titoli); font-size: var(--t-xl); font-weight: 600;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
}
.titolo-sezione .conta { font-family: var(--f-ui); font-size: var(--t-sm);
                          font-weight: 500; color: var(--testo-3); }

/* ══════════════════════════════════════════════════════════════ stati ══ */
.stato { display: inline-flex; align-items: center; gap: var(--s2);
         font-size: var(--t-sm); font-weight: 600; }
.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punto-vuoto      { border: 2px solid var(--testo-3); }
.punto-ok         { background: var(--ok); }
.punto-attenzione { background: var(--att); }
.punto-verificata { background: var(--oro); }

.pillola { display: inline-flex; align-items: center; gap: var(--s1);
           padding: 3px var(--s3); border-radius: var(--r-pill);
           font-size: var(--t-xs); font-weight: 700; white-space: nowrap; }
.pil-ok   { background: var(--ok-tenue);   color: var(--ok-testo);  border: 1px solid rgba(63, 174, 122, .40); }
.pil-att  { background: var(--att-tenue);  color: var(--att-testo); border: 1px solid rgba(244, 185, 66, .40); }
.pil-err  { background: var(--err-tenue);  color: var(--err-testo); border: 1px solid rgba(229, 83, 60, .40); }
.pil-oro  { background: var(--oro-tenue);  color: var(--oro);       border: 1px solid rgba(244, 185, 66, .40); }
.pil-cer  { background: var(--ceramica-tenue); color: var(--ceramica-chiara); border: 1px solid rgba(59, 125, 216, .40); }
.pil-neutra { background: var(--superficie-2); color: var(--testo-2); }

/* ═════════════════════════════════════════════════════════════ moduli ══ */
.campo { display: flex; flex-direction: column; gap: var(--s2); }
.campo label { font-size: var(--t-sm); font-weight: 600; color: var(--testo-2); }
.campo .aiuto { font-size: var(--t-xs); color: var(--testo-3); line-height: 1.45; }

input, select, textarea {
  width: 100%; min-height: 52px; padding: var(--s3) var(--s4);
  background: var(--fondo-2); border: 1px solid var(--bordo); border-radius: var(--r-sm);
  font-size: var(--t-md);          /* ← 16px: sotto, iOS ingrandisce la pagina */
  transition: border-color var(--mossa), box-shadow var(--mossa);
}
input:hover, select:hover, textarea:hover { border-color: var(--bordo-forte); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro-tenue);
}
input::placeholder, textarea::placeholder { color: var(--testo-3); }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

.importo { position: relative; }
.importo::before {
  content: "€"; position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%);
  color: var(--testo-3); pointer-events: none;
}
.importo input {
  padding-left: calc(var(--s4) + 1.1em);
  font-family: var(--f-numeri); font-variant-numeric: tabular-nums;
  font-size: var(--t-lg); font-weight: 600;
}
.importo-grande input { font-size: var(--t-2xl); min-height: 66px; }
.griglia-campi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 380px) { .griglia-campi { grid-template-columns: 1fr; } }

/* ────────────────────────────────────────────── selettori a segmenti ── */
.segmenti {
  display: flex; gap: 2px; padding: 3px;
  background: var(--fondo-2); border: 1px solid var(--bordo); border-radius: var(--r);
}
.segmenti button {
  flex: 1; min-height: 42px; padding: 0 var(--s3);
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--testo-2); font-size: var(--t-sm); font-weight: 600;
  transition: background var(--mossa), color var(--mossa);
  white-space: nowrap;
}
.segmenti button[aria-pressed="true"] { background: var(--oro); color: var(--su-oro); }
.segmenti.scorre { overflow-x: auto; scrollbar-width: none; }
.segmenti.scorre::-webkit-scrollbar { display: none; }
.segmenti.scorre button { flex: 0 0 auto; }

/* ═════════════════════════════════════════════════════════ quadratura ══ */
.quadratura {
  position: sticky; bottom: calc(74px + env(safe-area-inset-bottom));
  border-radius: var(--r); padding: var(--s4);
  border: 1px solid var(--bordo); background: var(--superficie-2);
  box-shadow: var(--om-2); z-index: var(--z-barra);
  transition: border-color var(--mossa), background var(--mossa);
}
.quadratura[data-stato="ok"] { border-color: var(--ok); background: #16352F; }
.quadratura[data-stato="no"] { border-color: var(--att); background: #33301F; }
.quadratura .riga { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.quadratura .cifra { font-family: var(--f-numeri); font-size: var(--t-2xl);
                     font-weight: 800; font-variant-numeric: tabular-nums; }
.quadratura .spiega { font-size: var(--t-sm); color: var(--testo-2); margin-top: var(--s2); line-height: 1.45; }
.quadratura[data-stato="ok"] .cifra { color: var(--ok-testo); }
.quadratura[data-stato="no"] .cifra { color: var(--att-testo); }

/* ═════════════════════════════════════════════════════════════ numeri ══ */
.numerone { font-family: var(--f-cifrone); font-variant-numeric: tabular-nums;
            font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.05; }
.numerone-xl { font-size: var(--t-4xl); }
.etichetta { font-size: var(--t-sm); color: var(--testo-2); }
.etichetta-piccola { font-size: var(--t-xs); color: var(--testo-3); }

.coppia { display: flex; align-items: baseline; justify-content: space-between;
          gap: var(--s3); padding: var(--s3) 0; }
.coppia + .coppia { border-top: 1px solid var(--bordo); }
.coppia .valore { font-family: var(--f-numeri); font-variant-numeric: tabular-nums; font-weight: 700; }

/* variazione rispetto al periodo prima */
.delta { font-family: var(--f-numeri); font-size: var(--t-sm); font-weight: 700;
         font-variant-numeric: tabular-nums; }
.delta-su  { color: var(--ok-testo); }
.delta-giu { color: var(--err-testo); }
.delta-fermo { color: var(--testo-3); }

/* ═══════════════════════════════════════════════════════ righe elenco ══ */
.elenco { display: flex; flex-direction: column; gap: var(--s2); }
.riga {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; text-align: left; padding: var(--s4); min-height: 64px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r);
  color: var(--testo);
  transition: background var(--mossa), border-color var(--mossa);
}
button.riga:hover { background: var(--superficie-2); border-color: var(--bordo-forte); }
.riga .corpo { flex: 1; min-width: 0; }
.riga .nome { font-weight: 600; }
.riga .sotto { font-size: var(--t-sm); color: var(--testo-2); margin-top: 2px; }
.riga .cifra { font-family: var(--f-numeri); font-variant-numeric: tabular-nums;
               font-weight: 700; text-align: right; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════ classifica ══ */
/* Barre orizzontali: su telefono si leggono meglio di una torta, e non
   servono etichette che si sovrappongono. */
.barre { display: flex; flex-direction: column; gap: var(--s3); }
.barra-voce .sopra { display: flex; justify-content: space-between; align-items: baseline;
                     gap: var(--s3); margin-bottom: var(--s2); font-size: var(--t-sm); }
.barra-voce .sopra .valore { font-family: var(--f-numeri); font-weight: 700;
                             font-variant-numeric: tabular-nums; }
.barra-voce .traccia { height: 8px; border-radius: 4px; background: var(--fondo-2); overflow: hidden; }
.barra-voce .riempi { height: 100%; border-radius: 4px; background: var(--oro);
                      transition: width 420ms cubic-bezier(.22,1,.36,1); }

/* ══════════════════════════════════════════════════════════════ avvisi ══ */
.avviso { display: flex; gap: var(--s3); align-items: flex-start;
          padding: var(--s3) var(--s4); border-radius: var(--r-sm);
          font-size: var(--t-sm); line-height: 1.45; border: 1px solid transparent; }
.avv-info { background: var(--superficie-2); color: var(--testo-2); border-color: var(--bordo); }
.avv-att  { background: var(--att-tenue); color: var(--att-testo); border-color: rgba(244, 185, 66, .40); }
.avv-err  { background: var(--err-tenue); color: var(--err-testo); border-color: rgba(229, 83, 60, .40); }
.avv-ok   { background: var(--ok-tenue);  color: var(--ok-testo);  border-color: rgba(63, 174, 122, .40); }

/* ═════════════════════════════════════════════════════════ navigazione ══ */
/* Cinque destinazioni al massimo, tutte visibili insieme: niente barra che
   scorre in orizzontale, perché una voce che devi cercare è una voce che non
   userai. Le sotto-sezioni stanno dentro, nei segmenti in cima alla pagina. */
.barra {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-barra);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--fondo); border-top: 1px solid var(--bordo);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra button {
  min-width: 0; min-height: 58px; padding: var(--s2) 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; color: var(--testo-3);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: color var(--mossa);
  position: relative;
}
.barra button[aria-current="page"] { color: var(--oro); }
.barra button[aria-current="page"]::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2px;
  background: var(--oro); border-radius: 0 0 2px 2px;
}
.barra .glifo { font-size: 19px; line-height: 1; }

/* ════════════════════════════════════════════════════════════ accesso ══ */
.accesso { min-height: 100svh; display: grid; place-items: center; padding: var(--s5);
           background: var(--fondo); position: relative; }
/* Il meandro qui era una fila di quadratini che sembrava un difetto di
   caricamento. Restano due righe d'oro sfumate, come nel report. */
.accesso::before, .accesso::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro-scuro) 25%,
              var(--oro-scuro) 75%, transparent);
  opacity: .45;
}
.accesso::after { inset: auto 0 0 0; }
.accesso form { width: 100%; max-width: 380px; }
.accesso form > * + * { margin-top: var(--s4); }
.accesso .marchio { flex-direction: column; gap: var(--s4); margin-bottom: var(--s7); text-align: center; }
.accesso .marchio img, .accesso .marchio svg { width: 92px; height: 92px; }
.accesso .marchio .nome { font-size: var(--t-2xl); }

/* ══════════════════════════════════════════════════════════ scheletri ══ */
.scheletro {
  background: linear-gradient(90deg, var(--superficie) 25%, var(--superficie-2) 37%, var(--superficie) 63%);
  background-size: 400% 100%; animation: scorri 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes scorri { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.scheletro-riga { height: 64px; }

/* ═══════════════════════════════════════════════════════ stato vuoto ══ */
.vuoto { text-align: center; padding: var(--s7) var(--s4); color: var(--testo-2); }
.vuoto .glifo { font-size: 32px; margin-bottom: var(--s3); opacity: .45; }
.vuoto h3 { color: var(--testo); margin-bottom: var(--s2); font-family: var(--f-titoli);
            font-size: var(--t-lg); }
.vuoto p { font-size: var(--t-sm); max-width: 36ch; margin-inline: auto; line-height: 1.5; }

/* ═════════════════════════════════════════════════════════════ foglio ══ */
.velo { position: fixed; inset: 0; z-index: var(--z-velo);
        background: rgba(6, 14, 28, .72); animation: comparsa 160ms ease-out; }
.foglio {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-pannello);
  background: var(--superficie); border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: 1px solid var(--bordo);
  padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  max-height: 86svh; overflow-y: auto; box-shadow: var(--om-3);
  animation: salita 240ms cubic-bezier(.22, 1, .36, 1);
}
.foglio > * + * { margin-top: var(--s4); }
.foglio .maniglia { width: 38px; height: 4px; border-radius: 2px;
                    background: var(--bordo-forte); margin: 0 auto var(--s4); }
.foglio h2 { font-size: var(--t-lg); }
@keyframes salita   { from { transform: translateY(100%); } to { transform: none; } }
@keyframes comparsa { from { opacity: 0; } to { opacity: 1; } }

/* ════════════════════════════════════════════════ stato salvataggio ══ */
.sincro {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom)); z-index: var(--z-avviso);
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; box-shadow: var(--om-2);
  animation: comparsa 160ms ease-out;
}
.sincro-invio  { background: var(--superficie-2); color: var(--testo-2); border: 1px solid var(--bordo); }
.sincro-fatto  { background: var(--ok);  color: #06301D; }
.sincro-errore { background: var(--err); color: #FFF2EF; }

/* ═════════════════════════════════════════════════════════ sparkline ══ */
/* Grafico minimo: niente libreria, niente canvas. Un SVG che si adatta. */
.spark { width: 100%; height: 56px; display: block; overflow: visible; }
.spark path.linea { fill: none; stroke: var(--oro); stroke-width: 2;
                    stroke-linejoin: round; stroke-linecap: round; }
.spark path.area  { fill: var(--oro-tenue); stroke: none; }
.spark circle.oggi { fill: var(--oro); }

/* colonne per l'andamento: si toccano bene, si leggono a colpo d'occhio */
.colonne { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.colonna { flex: 1; min-width: 0; display: flex; flex-direction: column;
           justify-content: flex-end; gap: 3px; }
.colonna .stelo { background: var(--superficie-2); border-radius: 3px 3px 0 0;
                  min-height: 2px; transition: height 420ms cubic-bezier(.22,1,.36,1); }
.colonna.forte .stelo { background: var(--oro); }
.colonna .giorno { font-size: 9px; color: var(--testo-3); text-align: center;
                   font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════ schermi più larghi ══ */
@media (min-width: 780px) {
  /* La barra resta in basso anche sul computer: e' la stessa app, e cambiarla
     di posto non aiuterebbe nessuno. Lo spazio sotto va tenuto comunque, se
     no il contenuto le finisce dietro — succedeva, e nascondeva il bottone
     "Inserisci una chiusura". */
  .barra {
    display: flex; justify-content: center; gap: var(--s1);
    padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));
  }
  .barra button { flex: 0 0 auto; min-width: 0; min-height: 42px; flex-direction: row;
                  padding: 0 var(--s4); border-radius: var(--r-sm); font-size: var(--t-sm); }
  .barra button[aria-current="page"]::before { display: none; }
  .barra button[aria-current="page"] { background: var(--oro-tenue); }
  .quadratura { position: static; box-shadow: none; }
  .btn-grande { width: auto; min-width: 300px; }
}

/* ══════════════════════════════════════════════════════ meno movimento ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ════════════════════════════════════════════ Food cost · Spese · Budget ══ */

/* Campo di ricerca: su telefono deve stare sotto il pollice e restare
   visibile quando la tastiera si apre. */
.cerca { position: relative; }
.cerca input { padding-left: calc(var(--s4) + 1.4em); }
.cerca::before {
  content: "⌕"; position: absolute; left: var(--s4); top: 50%;
  transform: translateY(-50%); color: var(--testo-3); font-size: 18px;
  pointer-events: none;
}

/* Riga di un piatto: nome + due numeri, senza tabella.
   Le tabelle a più colonne su schermo stretto diventano illeggibili. */
.piatto {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3);
  align-items: baseline;
  padding: var(--s3) var(--s4); min-height: 62px;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--r); width: 100%; text-align: left; color: var(--testo);
  transition: background var(--mossa), border-color var(--mossa);
}
button.piatto:hover { background: var(--superficie-2); border-color: var(--bordo-forte); }
.piatto .nome { font-weight: 600; line-height: 1.3; }
.piatto .fc {
  font-family: var(--f-numeri); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: var(--t-lg); text-align: right; white-space: nowrap;
}
.piatto .sotto { grid-column: 1; font-size: var(--t-xs); color: var(--testo-2); }
.piatto .margine {
  grid-column: 2; font-family: var(--f-numeri); font-variant-numeric: tabular-nums;
  font-size: var(--t-xs); color: var(--testo-2); text-align: right; white-space: nowrap;
}
.fc-basso { color: var(--ok-testo); }
.fc-medio { color: var(--att-testo); }
.fc-alto  { color: var(--err-testo); }
.fc-niente { color: var(--testo-3); font-size: var(--t-sm); font-weight: 600; }

/* Quanto ci si può fidare del dato: quattro stati, un colore ciascuno. */
.qualita { display: flex; gap: var(--s2); flex-wrap: wrap; }
.q-certo     { background: var(--ok-tenue); color: var(--ok-testo); }
.q-parziale  { background: var(--ceramica-tenue); color: var(--ceramica-chiara); }
.q-stima     { background: var(--att-tenue); color: var(--att-testo); }
.q-verificare{ background: var(--err-tenue); color: var(--err-testo); }

/* Barra a due poli: incassi contro spese, si legge in un colpo d'occhio. */
.bilancia { display: flex; height: 34px; border-radius: var(--r-sm); overflow: hidden;
            border: 1px solid var(--bordo); }
.bilancia > div { display: flex; align-items: center; justify-content: center;
                  font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
                  overflow: hidden; }
.bilancia .entra { background: var(--ok-tenue); color: var(--ok-testo); }
.bilancia .esce  { background: var(--err-tenue); color: var(--err-testo); }

/* Avanzamento verso il budget, con la tacca dell'obiettivo. */
.avanzamento { position: relative; height: 12px; border-radius: 6px;
               background: var(--fondo-2); overflow: hidden; margin: var(--s2) 0; }
.avanzamento .fatto { height: 100%; border-radius: 6px; background: var(--ceramica);
                      transition: width 480ms cubic-bezier(.22,1,.36,1); }
.avanzamento .fatto.pieno { background: var(--ok); }
.avanzamento-nota { display: flex; justify-content: space-between;
                    font-size: var(--t-xs); color: var(--testo-3); }

/* Tacca della proiezione sulla barra del budget */
.tacca { position: absolute; top: -3px; bottom: -3px; width: 2px;
         background: var(--oro); border-radius: 1px; }

/* Griglia di numeri: due o tre colonne, non una tabella */
.numeri-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
                  gap: var(--s3); }
.numeri-griglia > div { background: var(--superficie); border: 1px solid var(--bordo);
                        border-radius: var(--r); padding: var(--s3) var(--s4); }
.numeri-griglia .valore { font-family: var(--f-numeri); font-variant-numeric: tabular-nums;
                          font-weight: 800; font-size: var(--t-xl); margin-top: 2px; }

/* ══════════════════════════════════════════════ Blocco 3 · andamento ══ */

/* Grafico a linea con media mobile: la linea sottile è il giorno per giorno,
   quella spessa è la media a 7 giorni. Su telefono si legge meglio di due
   grafici separati. */
.grafico { width: 100%; height: 150px; display: block; overflow: visible; }
.grafico .griglia { stroke: var(--bordo); stroke-width: .5; }
.grafico .grezzo  { fill: none; stroke: var(--ceramica); stroke-width: 1.2;
                    stroke-opacity: .55; stroke-linejoin: round; }
.grafico .mobile  { fill: none; stroke: var(--oro); stroke-width: 2.4;
                    stroke-linecap: round; stroke-linejoin: round; }
.grafico text { font-size: 9px; fill: var(--testo-3); font-family: var(--f-ui); }
.legenda { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s2);
           font-size: var(--t-xs); color: var(--testo-2); }
.legenda span { display: flex; align-items: center; gap: var(--s2); }
.legenda i { width: 11px; height: 11px; border-radius: 3px; display: block; flex: none; }

/* Un mese per riga: barra proporzionale + variazione. */
.mese-riga {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3);
  padding: var(--s3) var(--s4); background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: var(--r); text-align: left;
}
.mese-riga + .mese-riga { margin-top: var(--s2); }
.mese-riga .nome { font-weight: 600; text-transform: capitalize; }
.mese-riga .cifra { font-family: var(--f-numeri); font-weight: 800;
                    font-variant-numeric: tabular-nums; }
.mese-riga .sotto { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--testo-2); }
.mese-riga .traccia { grid-column: 1 / -1; height: 6px; border-radius: 3px;
                      background: var(--fondo-2); overflow: hidden; margin-top: var(--s1); }
.mese-riga .traccia > div { height: 100%; background: var(--oro); border-radius: 3px; }
.mese-riga.corrente { border-color: var(--oro-scuro); }

/* Media per giorno della settimana: sette colonne che stanno su un telefono. */
.settimana { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s1);
             text-align: center; }
.settimana .g { background: var(--superficie); border: 1px solid var(--bordo);
                border-radius: var(--r-sm); padding: var(--s2) 2px; }
.settimana .g .dì { font-size: 10px; color: var(--testo-3); text-transform: uppercase;
                    letter-spacing: .04em; }
.settimana .g .v  { font-family: var(--f-numeri); font-weight: 700; font-size: var(--t-xs);
                    font-variant-numeric: tabular-nums; margin-top: 2px; }
.settimana .g.migliore { border-color: var(--oro); background: var(--oro-tenue); }
.settimana .g.scarso .v { color: var(--testo-3); font-weight: 600; }
.settimana .g .asterisco { color: var(--testo-3); }

/* ══════════════════════════════════════ dal report: KPI, badge, sedi ══ */
/* Le quattro schede in cima al report ("Il gruppo in sintesi"): etichetta
   minuscola in maiuscoletto, numero grande in Georgia, nota sotto. Su
   telefono stanno due per riga; da 560px in su, quattro. */
.kpi-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (min-width: 560px) { .kpi-griglia { grid-template-columns: repeat(4, 1fr); } }

.kpi {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--r); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s1);
  min-width: 0;
}
.kpi .lab {
  font-size: 11.5px; color: var(--testo-2);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.kpi .val {
  font-family: var(--f-cifrone); font-size: var(--t-xl); font-weight: 700;
  line-height: 1.1; display: flex; align-items: baseline; gap: var(--s2);
  flex-wrap: wrap; overflow-wrap: anywhere;
}
.kpi .note { font-size: var(--t-xs); color: var(--testo-2); line-height: 1.35; }
.kpi.vuoto-dato .val { color: var(--testo-3); }

/* Il pallino colorato della sede: stessa tinta della sua barra e del suo
   grafico, in tutta l'app. */
.punto-sede { width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block; }
.sede-DOM { background: var(--sede-DOM); }
.sede-CDP { background: var(--sede-CDP); }
.sede-LDC { background: var(--sede-LDC); }
.sede-GEN { background: var(--sede-GEN); }

/* La frase che spiega il grafico, prima del grafico. Nel report è il blocco
   "In sintesi": si legge in italiano, non si interpreta. */
.insight {
  font-size: var(--t-sm); line-height: 1.5; color: var(--testo);
  background: var(--fondo-2); border: 1px solid var(--bordo);
  border-left: 3px solid var(--oro);
  border-radius: var(--r-sm); padding: var(--s3) var(--s4);
}
.insight b { font-weight: 700; }
.insight + * { margin-top: var(--s3); }

/* Riga totale, come nel report: bordo oro sopra e un velo d'oro dietro. */
.riga-totale { border-top: 2px solid var(--oro); background: rgba(244, 185, 66, .06); font-weight: 700; }

/* ═══════════════════════════════════ grafici leggibili sul telefono ══ */
/* La lettura: dice a voce alta quanto vale il punto toccato. Sostituisce il
   tooltip del mouse, che su un telefono non esiste. */
.telaio-grafico { display: flex; flex-direction: column; gap: var(--s2); }
.lettura {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  min-height: 26px; font-size: var(--t-sm); color: var(--testo-2);
}
.lettura .quando { font-weight: 600; color: var(--testo); }
.lettura .quanto {
  font-family: var(--f-cifrone); font-size: var(--t-lg); font-weight: 700; color: var(--oro);
}
.lettura .suggerimento { font-size: var(--t-xs); color: var(--testo-3); }

.tela { width: 100%; display: block; overflow: visible; touch-action: pan-y; }
.tela .griglia   { stroke: var(--bordo); stroke-width: 1; }
.tela .asse      { font-size: 10px; fill: var(--testo-assi); font-family: var(--f-ui); }
.tela .etichetta-punto {
  font-size: 10px; font-weight: 700; fill: var(--testo); font-family: var(--f-ui);
}
.tela .velo      { stroke: none; opacity: .14; }
.tela .linea     { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.tela .linea-media { fill: none; stroke: var(--oro); stroke-width: 2.4;
                     stroke-linejoin: round; stroke-linecap: round; }
.tela .linea-grezza { fill: none; stroke: var(--ceramica); stroke-width: 1.2;
                      stroke-opacity: .6; stroke-linejoin: round; }
.tela .colonna-r { rx: 4; }
.tela .scelto    { stroke: var(--oro); stroke-width: 1.5; fill: none; }
.tela .maniglia-tocco { fill: transparent; }

/* Colonne con l'importo scritto sopra: è il grafico "Media per giorno della
   settimana" del report, che è il più leggibile dei suoi. */
.tela .valore-colonna {
  font-size: 10.5px; font-weight: 700; fill: var(--testo); font-family: var(--f-ui);
}
.tela .nome-colonna { font-size: 10.5px; fill: var(--testo-2); font-family: var(--f-ui); }

/* Il nome di una voce nella classifica a barre, col suo pallino di sede. */
.barra-voce .chi { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }

/* Bottoncino di servizio a fianco di un titolo ("dettaglio", "cambia"). */
.btn-piccolo { min-height: 32px; padding: 0 var(--s3); font-size: var(--t-xs); }

/* La quota accanto all'importo: separata, non appiccicata. */
.barra-voce .sopra .valore { display: inline-flex; align-items: baseline; gap: var(--s2); }
.barra-voce .sopra .quota { color: var(--testo-2); font-weight: 600; font-size: var(--t-xs); }

/* Righe un filo più compatte: su un telefono ne entrano tre invece di due. */
.riga { min-height: 56px; padding: var(--s3) var(--s4); }

/* Nome con il pallino della sede davanti. */
.nome.con-pallino { display: flex; align-items: center; gap: var(--s2); }

/* La striscia quieta: non è un allarme, è un promemoria. */
.ambiente-quieto {
  background: var(--fondo); color: var(--testo-3);
  border-bottom: 1px solid var(--bordo); font-weight: 500;
  font-size: var(--t-xs);
}