/* L'aspetto dell'app, ispirato alle app di pagamento più curate: sfondo nero
   pieno, riquadri appena più chiari, un gradino più chiari ancora i campi e i
   pulsanti; niente righe fra una persona e l'altra, ci pensano i cerchi con il
   numero di maglia; titoli grandi; schede a pillola; barra in basso che
   galleggia. Un colore solo, quello della squadra, per le azioni e per dire
   dove sei; il rosso solo per quello che non va (chi deve, cosa manca, un
   termine che scade). Tutto il resto è bianco, nero e grigio.

   Il tema lo sceglie l'app (Impostazioni → Squadra: come il telefono, scuro o
   chiaro) scrivendo data-tema sulla pagina; lo script in cima a index.html lo
   fa prima del primo disegno. Il colore della squadra arriva allo stesso modo,
   come variabili --marchio-* calcolate da aspetto.js: qui sotto ci sono solo i
   valori di partenza, l'oro di "Goal Den".

   Le animazioni sono brevi, muovono solo posizione e trasparenza (fluide anche
   su un telefono economico) e non si aspettano mai: chi le ha tolte dalle
   impostazioni del telefono non le vede. */
:root {
  --marchio: #d8b25a;
  --su-marchio: #15120a;
  --marchio-testo-scuro: #d8b25a;
  --marchio-testo-chiaro: #86660f;
  --marchio-velo-scuro: rgba(216, 178, 90, .15);
  --marchio-velo-chiaro: rgba(216, 178, 90, .18);

  color-scheme: dark;
  --sfondo: #000;
  --superficie: #1c1c1e;     /* i riquadri */
  --superficie2: #2c2c2e;    /* campi, pulsanti, pillole: un gradino sopra i riquadri */
  --superficie3: #3a3a3c;    /* lo stesso, sotto il dito */
  --campo: #2c2c2e;
  --linea: rgba(255, 255, 255, .08);
  --bordo-forte: #48484a;
  --testo: #f5f5f7;
  --muto: #98989f;
  --rosso: #ff6961;
  --rosso-velo: rgba(255, 105, 97, .16);
  --avatar: #f2f2f7;         /* i cerchi dei giocatori: chiari sul nero */
  --su-avatar: #111113;
  --barra: rgba(28, 28, 30, .94);
  --barra-su: rgba(0, 0, 0, .78);
  --ombra-barra: 0 12px 32px rgba(0, 0, 0, .55);
  --velo: rgba(0, 0, 0, .62);
  --marchio-testo: var(--marchio-testo-scuro);
  --marchio-velo: var(--marchio-velo-scuro);
  --curva: cubic-bezier(.2, .8, .2, 1);
}
:root[data-tema="chiaro"] {
  color-scheme: light;
  --sfondo: #f2f2f7;
  --superficie: #fff;
  --superficie2: #e9e9ee;
  --superficie3: #dcdce1;
  --campo: #f2f2f7;
  --linea: rgba(0, 0, 0, .08);
  --bordo-forte: #c7c7cc;
  --testo: #111113;
  --muto: #636366;
  --rosso: #d70015;
  --rosso-velo: rgba(215, 0, 21, .1);
  --avatar: #1c1c1e;         /* sul chiaro i cerchi diventano scuri */
  --su-avatar: #fff;
  --barra: rgba(255, 255, 255, .94);
  --barra-su: rgba(242, 242, 247, .85);
  --ombra-barra: 0 12px 32px rgba(0, 0, 0, .14);
  --velo: rgba(0, 0, 0, .35);
  --marchio-testo: var(--marchio-testo-chiaro);
  --marchio-velo: var(--marchio-velo-chiaro);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Senza questa riga "display: inline-flex" dei pulsanti vince su hidden, e la
   freccia indietro restava visibile (e muta) anche dove non serve. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
/* La dimensione, scelta per dispositivo in Impostazioni: tutto insieme più grande (testo,
   campi, pulsanti), come lo zoom del browser. "Piccola" è com'era prima. --zoom serve alle
   altezze in vh, che lo zoom moltiplicherebbe oltre lo schermo. */
html[data-dimensione="medio"] { zoom: 1.12; --zoom: 1.12; }
html[data-dimensione="grande"] { zoom: 1.25; --zoom: 1.25; }
body {
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.4 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
  overscroll-behavior-y: contain;
}
.muto { color: var(--muto); }
.piccolo { font-size: 13px; }
.rosso { color: var(--rosso); }
.verde { color: inherit; }            /* il verde non c'è più: la buona notizia è l'assenza del rosso */
.destra { text-align: right; }
.mono { font-variant-numeric: tabular-nums; }
.nota { color: var(--muto); font-size: 13px; line-height: 1.45; margin: 12px 4px; }
/* il testo di una scheda che dice qualcosa (avvisa, chiedi) */
.testo-scheda { line-height: 1.5; margin: 0 2px 6px; }
.testo-scheda p { margin: 0 0 10px; }
/* i titoletti dentro una scheda (una sfida da vicino: chi l'ha raggiunta, chi ci sta arrivando) */
#modale-corpo h3 { margin: 16px 2px 6px; font-size: 13px; font-weight: 600; color: var(--muto); }
/* un pulsante scritto dentro una riga di un elenco: ha lo stesso fondo del riquadro, e senza bordo non si vedrebbe */
.voce-elenco button.mini { flex: none; border: 1px solid var(--bordo-forte); }

/* ---------------------------------------------------------------- icone */
/* Disegni a linea in SVG, dentro questo file: niente immagini da caricare.
   Prendono il colore del testo che hanno intorno. */
.icona {
  display: inline-block; flex: none; width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: var(--disegno) center / contain no-repeat;
  mask: var(--disegno) center / contain no-repeat;
}
/*@ICONE@*/
.i-casa { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 4l8.5 6.5'/%3E%3Cpath d='M5.5 9v11h13V9'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E"); }
.i-partite { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 8.2l3.3 2.4-1.3 3.9h-4l-1.3-3.9z'/%3E%3Cpath d='M12 8.2V3.6M15.3 10.6l4.3-1.4M14 14.5l2.7 3.6M10 14.5l-2.7 3.6M8.7 10.6 4.4 9.2'/%3E%3C/svg%3E"); }
.i-rosa { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.2'/%3E%3Cpath d='M3.5 19.5c.4-3.2 2.7-5.2 5.5-5.2s5.1 2 5.5 5.2'/%3E%3Cpath d='M15.5 5.6a3.2 3.2 0 0 1 0 6'/%3E%3Cpath d='M17 14.6c2 .6 3.3 2.4 3.5 4.9'/%3E%3C/svg%3E"); }
.i-documenti { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8z'/%3E%3Cpath d='M14 3.5V8h4.5'/%3E%3Cpath d='M9 12.5h6M9 16h4'/%3E%3C/svg%3E"); }
.i-impostazioni { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 12h3M11 12h9M4 17h11M19 17h1'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
.i-indietro { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E"); }
.i-avanti { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E"); }
.i-chiudi { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
.i-euro { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 6.6A7 7 0 1 0 17.5 17.4'/%3E%3Cpath d='M4.5 10.2h9M4.5 13.8h9'/%3E%3C/svg%3E"); }
.i-messaggio { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h14A1.5 1.5 0 0 1 20.5 7v8.5A1.5 1.5 0 0 1 19 17h-8l-4.5 3.5V17H5a1.5 1.5 0 0 1-1.5-1.5V7A1.5 1.5 0 0 1 5 5.5z'/%3E%3C/svg%3E"); }
.i-matita { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 5.3l3.5 3.5L9 18.5l-4.2.7.7-4.2z'/%3E%3Cpath d='M13.2 7.3l3.5 3.5'/%3E%3C/svg%3E"); }
.i-scudo { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l7 2.6v5.4c0 4.3-2.9 7.6-7 9-4.1-1.4-7-4.7-7-9V6.1z'/%3E%3C/svg%3E"); }
.i-cartellino { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='4' width='10' height='15' rx='1.8' transform='rotate(10 12 11.5)'/%3E%3C/svg%3E"); }
.i-infortunio { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M12 8.5v7M8.5 12h7'/%3E%3C/svg%3E"); }
.i-piu { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.i-meno { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.i-immagine { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4.5' width='16' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='M4.5 16.5l4.5-4 3.5 3 2.5-2 4.5 4'/%3E%3C/svg%3E"); }
.i-condividi { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M8 7.5l4-4 4 4'/%3E%3Cpath d='M6 11.5v7.5h12v-7.5'/%3E%3C/svg%3E"); }
.i-persona-piu { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8.5' r='3.5'/%3E%3Cpath d='M3.5 20c.5-3.6 3.1-5.8 6.5-5.8 1.4 0 2.6.3 3.6.9'/%3E%3Cpath d='M18 13.5v6M15 16.5h6'/%3E%3C/svg%3E"); }
.i-persona { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20c.6-3.7 3.4-6 7-6s6.4 2.3 7 6'/%3E%3C/svg%3E"); }
.i-calendario { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2.2'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E"); }
.i-firma { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5c2.2-2.4 3.6-6.8 5.4-6.8 1.6 0 .6 5.2 2.4 5.2 1.5 0 2.3-3.4 3.8-3.4 1.2 0 1.2 2 2.6 2 1 0 1.8-.6 2.8-1.4'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E"); }
.i-graffetta { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 7.5 8.8 14.2a2.1 2.1 0 0 0 3 3l7.1-7.1a4.2 4.2 0 0 0-6-6l-7.3 7.3a6.3 6.3 0 0 0 8.9 8.9l5.5-5.5'/%3E%3C/svg%3E"); }
.i-cestino { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 12.5h9l1-12.5'/%3E%3Cpath d='M10.2 11v5M13.8 11v5'/%3E%3C/svg%3E"); }
.i-riapri { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12a7 7 0 1 0 2.05-4.95'/%3E%3Cpath d='M7 3.5v3.6h3.6'/%3E%3C/svg%3E"); }
.i-copia { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11' height='11' rx='2'/%3E%3Cpath d='M15.5 8.5V6A1.5 1.5 0 0 0 14 4.5H6A1.5 1.5 0 0 0 4.5 6v8A1.5 1.5 0 0 0 6 15.5h2.5'/%3E%3C/svg%3E"); }
.i-attenzione { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5 3.5 19.5h17z'/%3E%3Cpath d='M12 10v4.2M12 17v.4'/%3E%3C/svg%3E"); }
.i-info { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.4'/%3E%3C/svg%3E"); }
.i-importa { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E"); }
.i-documento { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8z'/%3E%3Cpath d='M14 3.5V8h4.5'/%3E%3Cpath d='M9 12.5h6M9 16h4'/%3E%3C/svg%3E"); }
.i-coppa { --disegno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4.5h8v5.3a4 4 0 0 1-8 0z'/%3E%3Cpath d='M8 6.3H5.3v1.2A2.7 2.7 0 0 0 8 10.2M16 6.3h2.7v1.2A2.7 2.7 0 0 1 16 10.2'/%3E%3Cpath d='M12 13.8v3.4M8.8 20h6.4M9.8 20v-1.4a1.4 1.4 0 0 1 1.4-1.4h1.6a1.4 1.4 0 0 1 1.4 1.4V20'/%3E%3C/svg%3E"); }
/*@FINE ICONE@*/

/* --------------------------------------------------------------- testata */
/* Sul tablet il contenuto sta in una colonna di 720px, sul PC di 1060 (in
   fondo al file): testata e barra si allineano a quella, invece di scappare
   ai bordi dello schermo. */
#testata, #vista { max-width: 720px; margin: 0 auto; }
#testata { padding: calc(10px + env(safe-area-inset-top)) 18px 6px; }
.comandi { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.riempi { flex: 1; }
#testata-avatar { margin: 12px 0 2px; }
#testata-titolo { margin: 10px 0 0; font-size: 32px; line-height: 1.12; font-weight: 800; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cifra { font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 4px; }
#testata-cifra.muto { color: var(--muto); }
#testata-sotto { color: var(--muto); font-size: 15px; margin-top: 6px; }
#testata-sotto:empty { display: none; }

/* lo stato del collegamento con l'altro dispositivo */
#sincro {
  min-height: 36px; padding: 0 13px; border-radius: 999px;
  font-size: 13px; font-weight: 650; color: var(--muto); white-space: nowrap;
  background: var(--superficie2);
}
#sincro.rosso { color: var(--rosso); background: var(--rosso-velo); }

/* La barra sottile che compare in alto quando il titolo grande esce dallo schermo */
#barra-su {
  position: fixed; top: 0; left: 0; right: 0; z-index: 25;
  display: flex; align-items: center; justify-content: center;
  height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 64px 0;
  background: var(--barra-su);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--linea);
  font-size: 16px; font-weight: 700;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--curva);
}
#barra-su-titolo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#su-indietro { position: absolute; left: 12px; bottom: 8px; }
body.scorso #barra-su { opacity: 1; transform: none; pointer-events: auto; }

/* ------------------------------------------------------------------ vista */
#vista { padding: 16px 16px 28px; }
h2 { font-size: 20px; font-weight: 750; letter-spacing: -.01em; margin: 30px 2px 12px; }
#vista > h2:first-child, .contenuto-scheda > h2:first-child { margin-top: 6px; }

/* L'app chiusa a chiave (senza un accesso): si vede solo la schermata per
   entrare. Niente barra delle sezioni, niente impostazioni, niente indietro. */
body.chiusa #barra, body.chiusa #barra-su, body.chiusa #btn-impostazioni,
body.chiusa #sincro, body.chiusa #btn-indietro { display: none; }
body.chiusa #testata, body.chiusa #vista { max-width: 460px; }
body.chiusa #vista .nota a { color: var(--marchio-testo); }

/* ------------------------------------------------------------------ carte */
.carta {
  background: var(--superficie);
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 14px;
}
.carta.vuota { color: var(--muto); text-align: center; padding: 26px 18px; }
.testa-carta { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.testa-carta .nome { font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.testa-carta .sotto { color: var(--muto); font-size: 14px; margin-top: 2px; }

/* "voce … valore", come i dettagli di un pagamento */
.riga-dettaglio { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; }
.riga-dettaglio + .riga-dettaglio { border-top: 1px solid var(--linea); }
.riga-dettaglio .voce { color: var(--muto); }
.riga-dettaglio .valore { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* elenchi dentro un riquadro (listini, documenti, copie): qui una riga sottile aiuta */
.carta.elenco { padding: 4px 18px; }
.voce-elenco { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.voce-elenco + .voce-elenco { border-top: 1px solid var(--linea); }
.voce-elenco .cresci { flex: 1; min-width: 0; }
.voce-elenco .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.voce-elenco .sotto { color: var(--muto); font-size: 13px; margin-top: 1px; }
.voce-elenco .importo { font-weight: 650; font-variant-numeric: tabular-nums; }
.voce-elenco.figlio { padding-left: 14px; }
.voce-elenco.figlio .nome { font-weight: 500; font-size: 14.5px; }
.voce-elenco.figlio > .icona { width: 18px; height: 18px; color: var(--muto); }
.voce-elenco.cliccabile { cursor: pointer; }

/* una voce che apre qualcosa: cerchio, titolo, spiegazione, freccia */
.carta.voci { padding: 4px 0; }
.voce-azione {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 0;
  padding: 12px 18px; border-radius: 0; background: none; text-align: left;
  font-weight: 400; color: var(--testo);
}
.voce-azione + .voce-azione { border-top: 1px solid var(--linea); }
.voce-azione .cresci { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.voce-azione .nome { font-weight: 650; font-size: 16px; }
.voce-azione .sotto { color: var(--muto); font-size: 13.5px; }
.voce-azione:active { transform: none; background: var(--superficie2); }
.freccia { width: 18px; height: 18px; color: var(--muto); }

/* la cassa in evidenza, come il saldo di un conto */
.principale { background: var(--superficie); border-radius: 26px; overflow: hidden; margin-bottom: 8px; }
.principale-alto {
  display: flex; flex-direction: column; min-height: 150px; padding: 20px 22px 18px;
  background: var(--marchio); color: var(--su-marchio); border-radius: 26px;
}
.principale-alto .etichetta { font-size: 16px; font-weight: 700; }
.principale-alto .cifra { margin-top: auto; font-size: 40px; }
.principale-righe { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; font-size: 13.5px; }
.principale-righe b { font-weight: 750; }
.principale-azioni { display: flex; justify-content: space-evenly; padding: 16px 8px 18px; }

/* pulsanti tondi con l'etichetta sotto */
.azioni-tonde { display: flex; justify-content: space-evenly; align-items: flex-start; gap: 6px; margin: 4px 0 22px; }
.azione-tonda {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 0; width: 96px; padding: 0; background: none; border-radius: 16px;
  font-size: 13px; font-weight: 650; color: var(--testo); text-align: center; line-height: 1.2;
}
.azione-tonda .cerchio { width: 56px; height: 56px; background: var(--superficie2); }
.azione-tonda .cerchio .icona { width: 24px; height: 24px; }
.azione-tonda.primaria .cerchio { background: var(--marchio); color: var(--su-marchio); }
.azione-tonda:active { background: none; transform: scale(.94); }

/* ------------------------------------------------------------- cerchi */
.cerchio {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--superficie2); color: var(--testo);
}
.cerchio.data { line-height: 1; }
.cerchio.data b { font-size: 17px; font-weight: 800; margin-top: 3px; }
.cerchio.data small { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muto); margin-bottom: 3px; }
.cerchio.data.grande { width: 72px; height: 72px; }
.cerchio.data.grande b { font-size: 26px; }
.cerchio.data.grande small { font-size: 12px; }
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--avatar); color: var(--su-avatar);
  font-size: 15px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.avatar.numero { font-size: 17px; }
.avatar.ospite { background: transparent; color: var(--testo); border: 1.5px dashed var(--bordo-forte); }
.avatar.grande { width: 76px; height: 76px; font-size: 26px; }
.avatar.grande.numero { font-size: 30px; }
.avviso .cerchio { background: var(--marchio-velo); color: var(--marchio-testo); }
.avviso.grave .cerchio { background: var(--rosso-velo); color: var(--rosso); }

/* ---------------------------------------------------- liste senza riquadro */
/* le persone (e le partite, i pagamenti) stanno sul nero: niente righe fra
   una e l'altra, il ritmo lo danno i cerchi */
.righe { list-style: none; margin: 0 -4px; padding: 0; }
.riga { display: flex; align-items: center; gap: 14px; padding: 9px 6px; border-radius: 18px; }
.riga .cresci { flex: 1; min-width: 0; }
.riga .nome { font-size: 16.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga .sotto { color: var(--muto); font-size: 13.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.riga .importo { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.riga .destra { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.riga .destra .sotto { margin: 0; }
.riga.cliccabile { cursor: pointer; transition: background-color .15s ease, transform .12s ease; }
.riga.cliccabile:active { background: var(--superficie); transform: scale(.99); }
.riga > .tondo { flex: none; }

/* presenze: si tocca il nome per spuntare, il numero si scrive a destra */
.presenze .riga { padding: 6px 6px; }
.presenze label.cresci { cursor: pointer; padding: 8px 0; }
.presenze .nome { white-space: normal; }

/* -------------------------------------------------------- schede a pillola */
.schede {
  position: relative; display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  margin: 0 -4px 16px; padding: 4px;
}
.schede::-webkit-scrollbar { display: none; }
.scheda {
  position: relative; z-index: 1; flex: none;
  min-height: 42px; padding: 0 14px; border-radius: 999px;
  background: transparent; color: var(--muto);
  font-size: 14.5px; font-weight: 650; white-space: nowrap;
  transition: color .2s ease;
}
.scheda.attiva { color: var(--testo); }
.scheda:active { background: transparent; transform: none; }
.schede .cursore, #barra .cursore {
  position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; width: 0;
  border-radius: 999px; background: var(--superficie2); opacity: 0;
  transition: transform .3s var(--curva), width .3s var(--curva), opacity .2s ease;
}
/* le schede piccole: l'ordine delle liste (per cognome, per numero) */
.schede.piccole { margin-bottom: 10px; }
.schede.piccole .scheda { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.segnale { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--rosso); vertical-align: 2px; }

/* ---------------------------------------------------------------- comandi */
button, .bottone {
  font: inherit; font-size: 15.5px; font-weight: 650;
  border: none; border-radius: 999px;
  min-height: 48px; padding: 0 22px;
  background: var(--superficie2); color: var(--testo);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background-color .15s ease, filter .15s ease;
}
button:active { transform: scale(.97); background: var(--superficie3); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--marchio); outline-offset: 2px; }
button.primario { background: var(--marchio); color: var(--su-marchio); font-weight: 750; }
button.primario:active { background: var(--marchio); filter: brightness(.92); }
button.pericolo { color: var(--rosso); }
button.mini { min-height: 36px; padding: 0 15px; font-size: 13.5px; }
button.ghost { background: transparent; }
button:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.tondo {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%;
  background: var(--superficie2); color: var(--testo); text-decoration: none;
}
.tondo.piccolo { width: 36px; height: 36px; min-height: 36px; }
.tondo.piccolo .icona { width: 18px; height: 18px; }
.tondo.pericolo { color: var(--rosso); }
.azioni { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.azioni > * { flex: 1 1 auto; }
.azioni.colonna { flex-direction: column; }

/* --- i pagamenti letti da un estratto: una riga per movimento, da rivedere prima di registrare */
.mov { background: var(--campo); border-radius: 18px; padding: 12px 14px; margin: 0 0 10px; }
.mov.gia { opacity: .6; }
.mov-testa { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.mov-testa .nome { flex: 1; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.mov-testa .cifra { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.mov-ritaglio { display: block; width: 100%; height: auto; margin-top: 10px; border-radius: 10px; }
.mov-letto { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--muto); overflow-wrap: anywhere; }
.mov-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mov-campi select { grid-column: 1 / -1; }
.mov-campi input, .mov-campi select { background: var(--superficie3); font-size: 15px; padding: 11px 12px; min-width: 0; }
.mov-nota { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--muto); }
.mov-nota:empty { display: none; }
.mov-fonte { display: flex; align-items: center; gap: 10px; margin: 14px 2px 8px; font-size: 13px; font-weight: 600; color: var(--muto); }
.mov-fonte span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov-fonte select { width: auto; max-width: 55%; font-size: 14px; padding: 9px 12px; }
details.mov-altri { margin-top: 14px; }
/* la domanda di una riga in dubbio: discreta, dentro la riga, con le due risposte accanto */
.mov-dubbio { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--marchio-velo); font-size: 13px; line-height: 1.4; }
.mov-dubbio > span:first-child { flex: 1; min-width: 0; }
.mov-scelta { display: flex; gap: 6px; flex: none; }
.mov-scelta button.scelto { background: var(--marchio); color: var(--su-marchio); }

/* ------------------------------------------------------------------ campi */
label.campo { display: block; margin-bottom: 14px; }
label.campo > span { display: block; font-size: 13px; font-weight: 500; color: var(--muto); margin: 0 0 6px 4px; }
input, select, textarea {
  font: inherit; font-size: 16px; width: 100%;
  background: var(--campo); color: var(--testo);
  border: none; border-radius: 14px;
  padding: 13px 15px;
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--marchio); }
input::placeholder, textarea::placeholder { color: var(--muto); }
textarea { min-height: 100px; resize: vertical; font-size: 15px; line-height: 1.45; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.due.largo-stretto { grid-template-columns: 2fr 1fr; }
.numero-maglia { flex: none; width: 58px; text-align: center; padding: 10px 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.numero-maglia:disabled { opacity: .45; }
.numero-maglia.doppio { color: var(--rosso); box-shadow: 0 0 0 2px var(--rosso); }
input[type=color] { height: 50px; padding: 6px; cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: none; border-radius: 9px; }
input[type=color]::-moz-color-swatch { border: none; border-radius: 9px; }

/* la casella: un cerchio che spuntato si riempie del colore della squadra */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 28px; height: 28px; padding: 0; margin: 0;
  border: 2px solid var(--bordo-forte); border-radius: 50%;
  background: transparent;
  display: inline-grid; place-content: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
input[type=checkbox]::before {
  content: ''; width: 13px; height: 13px;
  background: var(--su-marchio);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0); transition: transform .15s var(--curva);
}
input[type=checkbox]:checked { background: var(--marchio); border-color: var(--marchio); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=checkbox].scatto:checked { animation: scatto .3s var(--curva); }
input[type=checkbox]:focus { box-shadow: none; }
input[type=checkbox]:focus-visible { outline: 2px solid var(--marchio); outline-offset: 2px; }

input[type=file] { padding: 9px 10px; font-size: 14px; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 650;
  border: none; border-radius: 999px;
  padding: 8px 14px; margin-right: 10px;
  background: var(--superficie3); color: var(--testo);
  cursor: pointer;
}

/* ---------------------------------------------------------------- pillole */
.pillola {
  display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.5;
  padding: 1px 9px; border-radius: 999px;
  background: var(--superficie2); color: var(--muto);
  white-space: nowrap; vertical-align: 1px;
}
.pillola.ko { background: var(--rosso-velo); color: var(--rosso); }
.pillole { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.nome .pillola { margin-left: 6px; }

/* ----------------------------------------------------------------- avvisi */
.avviso {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--superficie); border-radius: 22px;
  padding: 16px; margin-bottom: 14px; font-size: 14.5px; line-height: 1.45;
}
.avviso > .cerchio { width: 40px; height: 40px; }
.avviso .cresci { flex: 1; min-width: 0; padding-top: 2px; }
.avviso .sotto { color: var(--muto); margin-top: 4px; }
.avviso .azioni { margin: 12px 0 0; }

/* ------------------------------------------------ in evidenza, in cima alla Home */
.evidenza { margin-bottom: 22px; }
.evidenza-quando { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 2px 4px 10px; }

/* ------------------------------------------------------------ statistiche */
.statistiche { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--superficie); border-radius: 22px; margin-bottom: 18px; }
.stat { padding: 15px 14px 14px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--linea); }
.stat .val { font-size: 22px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .eti { font-size: 12px; color: var(--muto); line-height: 1.25; margin-top: 3px; }
/* quattro numeri: sul telefono due per riga, dove c'è posto tutti in fila */
.statistiche.quattro { grid-template-columns: repeat(2, 1fr); }
.statistiche.quattro .stat:nth-child(3) { border-left: 0; }
.statistiche.quattro .stat:nth-child(n+3) { border-top: 1px solid var(--linea); }
@media (min-width: 700px) {
  .statistiche.quattro { grid-template-columns: repeat(4, 1fr); }
  .statistiche.quattro .stat:nth-child(3) { border-left: 1px solid var(--linea); }
  .statistiche.quattro .stat:nth-child(n+3) { border-top: 0; }
}

/* -------------------------------------------------------------- tabellina */
table.conti { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.conti th { text-align: right; font-size: 12px; color: var(--muto); font-weight: 600; padding: 0 0 8px; }
table.conti th:first-child { text-align: left; }
table.conti td { padding: 9px 0; border-top: 1px solid var(--linea); text-align: right; }
table.conti td:first-child { text-align: left; }
table.conti tr.tot td { font-weight: 800; }

/* ------------------------------------------- riquadri che si aprono al tocco */
details > summary {
  display: flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: ''; flex: none; margin-left: auto;
  width: 8px; height: 8px; border: solid var(--muto); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--curva);
}
details[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
details[open] > :not(summary) { animation: compare .25s ease both; }
.messaggi { padding: 4px 0; }
.messaggi details { padding: 14px 18px; }
.messaggi details + details { border-top: 1px solid var(--linea); }
.messaggi summary .nome { font-weight: 650; }
.messaggi details[open] summary { margin-bottom: 8px; }
.messaggi textarea { margin-top: 10px; }
.segnaposto { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--muto); }
code {
  font: 600 12.5px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--marchio-testo); background: var(--superficie2);
  padding: 2px 6px; border-radius: 6px;
}
details.copie > summary { padding: 6px 0; font-weight: 650; }
details.copie .voce-elenco:first-of-type { border-top: 1px solid var(--linea); }

/* -------------------------------------------------------------- documenti */
.anteprima-doc { display: block; width: 100%; height: auto; border-radius: 18px; background: #fff; margin-bottom: 14px; }
fieldset.spunte { border: none; border-radius: 18px; padding: 4px 16px 6px; margin: 0 0 14px; background: var(--campo); }
fieldset.spunte legend { float: left; width: 100%; padding: 10px 0 6px; font-size: 13px; font-weight: 600; color: var(--muto); }
fieldset.spunte label { clear: both; display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; }
fieldset.spunte label + label { border-top: 1px solid var(--linea); }
/* il campione di un colore accanto a una scritta: quello della squadra, preso dal suo logo */
.campione { display: inline-block; width: 18px; height: 18px; margin-left: 8px; border-radius: 50%; vertical-align: -3px; box-shadow: 0 0 0 1px var(--linea); }
.con-campione { white-space: nowrap; }

/* ------------------------------------------------------ i post di Instagram */
/* l'anteprima: la tela è larga 1080 punti, qui si vede intera, alta al massimo quanto lascia lo schermo */
.post-tela { display: flex; justify-content: center; margin: 0 0 14px; }
.post-tela canvas {
  display: block; width: auto; height: auto; max-width: 100%; max-height: calc(56vh / var(--zoom, 1));
  border-radius: 18px; background: var(--superficie);
}
/* arrivando dalla Home la scheda Post sale in cima allo schermo, sotto la barra sottile: anteprima e pulsanti insieme */
.contenuto-scheda { scroll-margin-top: 62px; }
.post-tela.prova canvas { max-height: calc(340px / var(--zoom, 1)); border-radius: 14px; }
/* il risultato: una riga per squadra, con meno · numero · più */
.riga-gol { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.riga-gol + .riga-gol { border-top: 1px solid var(--linea); margin-top: 10px; padding-top: 14px; }
.riga-gol .nome { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.conta { display: flex; align-items: center; gap: 8px; flex: none; }
.conta button, .gettone button { touch-action: manipulation; } /* tocchi veloci di fila: niente ingrandimento */
.numero-gol { width: 58px; text-align: center; padding: 9px 4px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
#post-problema { margin: 12px 2px 0; }
#post-problema:empty { display: none; }
/* i marcatori: un gettone per giocatore, si tocca per ogni gol; chi ha segnato ha il meno accanto */
.gettoni { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.gettone { display: inline-flex; }
.gettone button { min-height: 40px; padding: 0 14px; font-size: 14px; }
.gettone b { font-weight: 800; font-variant-numeric: tabular-nums; }
.gettone.segna button.primario { border-radius: 999px 0 0 999px; padding-right: 10px; }
.gettone .meno { border-radius: 0 999px 999px 0; padding: 0 12px 0 9px; background: var(--superficie3); }
.gettone .meno .icona { width: 16px; height: 16px; }
/* i loghi: il riquadro com'è nel post, in piccolo */
canvas.mini-logo { flex: none; width: 52px; height: 52px; }
/* gli sfondi: una voce per tipo di post, con l'immagine in piccolo e sotto i suoi comandi */
.mini-sfondo { flex: none; width: 44px; height: 52px; margin: 0 4px; border-radius: 10px; object-fit: cover; background: var(--superficie2); }
.mini-sfondo.vuoto { display: inline-block; border: 1.5px dashed var(--bordo-forte); background: transparent; }
.carta.sfondi { padding: 6px 18px; }
.voce-sfondo { padding: 6px 0 12px; }
.voce-sfondo + .voce-sfondo { border-top: 1px solid var(--linea); }
.voce-sfondo .voce-elenco { padding-bottom: 8px; }
.voce-sfondo .azioni { margin: 0; }
ol.passi { margin: 0 0 12px; padding-left: 22px; font-size: 14.5px; line-height: 1.5; }
ol.passi li + li { margin-top: 6px; }
#testo-genera { font-size: 13px; line-height: 1.4; min-height: 120px; }
a.bottone { min-height: 48px; }
.prova-logo { display: flex; justify-content: center; margin-bottom: 8px; }
.prova-logo canvas { width: 190px; height: 190px; }
input[type=range] { padding: 0; background: transparent; accent-color: var(--marchio); min-height: 34px; }
input[type=range]:focus { box-shadow: none; }
.carta > details > summary .nome { font-weight: 650; }
.carta > details .elenco { margin-top: 6px; }
.nota a { color: var(--marchio-testo); }

/* ------------------------------------------------------------------ barra */
/* galleggia sopra il contenuto; la voce in cui sei ha la pillola sotto,
   che scivola quando cambi sezione */
#barra {
  position: fixed; z-index: 30; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100% - 28px), 420px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px; border-radius: 999px;
  background: var(--barra);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--linea); box-shadow: var(--ombra-barra);
}
#barra a {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 650; color: var(--muto); text-decoration: none;
  transition: color .2s ease;
}
#barra a.attivo { color: var(--testo); }
#barra a.attivo .icona { color: var(--marchio-testo); }
#barra a:active { transform: scale(.94); }

/* ---------------------------------------------------------------- brindisi */
/* centrato con left, right e margin auto: con left 50% e transform lo spazio
   per il testo era mezzo schermo, e i messaggi andavano a capo a metà */
#brindisi {
  position: fixed; left: 16px; right: 16px; width: fit-content; margin: 0 auto;
  bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60;
  text-align: center;
  background: var(--testo); color: var(--sfondo);
  padding: 12px 20px; border-radius: 999px; font-weight: 650; font-size: 14.5px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
#brindisi:not([hidden]) { animation: sale .28s var(--curva); }
#brindisi.via { animation: via .2s ease-in forwards; }

/* ----------------------------------------------------------------- modale */
/* un foglio che sale dal basso, con la X in alto come nei dettagli di un pagamento */
dialog#modale {
  border: none; border-radius: 28px 28px 0 0;
  background: var(--superficie); color: var(--testo);
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  width: 100%; max-width: 560px;
  margin: auto auto 0; position: fixed; bottom: 0; top: auto;
  max-height: calc(90vh / var(--zoom, 1)); overflow-y: auto;
}
dialog#modale[open] { animation: foglio .32s var(--curva); }
dialog#modale.esce { animation: foglio-via .2s ease-in forwards; }
dialog#modale::backdrop { background: var(--velo); animation: compare .3s ease; }
dialog#modale.esce::backdrop { animation: svanisce .2s ease-in forwards; }
.modale-testa { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
#modale-titolo { flex: 1; margin: 6px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.modale-azioni { display: flex; gap: 10px; margin-top: 18px; }
.modale-azioni button { flex: 1; }
dialog .carta, dialog .avviso { background: var(--superficie2); }
dialog .carta input, dialog .carta select { background: var(--superficie3); }
/* sul PC la finestra sta al centro, con tutti gli angoli tondi, e compare invece di salire */
@media (min-width: 700px) and (min-height: 560px) {
  dialog#modale { top: 0; bottom: 0; margin: auto; border-radius: 28px; padding-bottom: 20px; max-height: calc(86vh / var(--zoom, 1)); }
  dialog#modale[open] { animation: finestra .26s var(--curva); }
  dialog#modale.esce { animation: finestra-via .18s ease-in forwards; }
}
.dettaglio-testa { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 2px 0 18px; }
.dettaglio-testa .cerchio, .dettaglio-testa .avatar { width: 56px; height: 56px; }
.dettaglio-testa .avatar { font-size: 20px; }
.dettaglio-testa .cifra { margin-top: 2px; }
.dettaglio-testa .muto { font-size: 15px; }

/* ------------------------------------------------------------- animazioni */
@keyframes sale { from { opacity: 0; transform: translateY(10px); } }
@keyframes compare { from { opacity: 0; } }
@keyframes svanisce { to { opacity: 0; } }
@keyframes via { to { opacity: 0; transform: translateY(10px); } }
@keyframes foglio { from { transform: translateY(100%); } }
@keyframes foglio-via { to { transform: translateY(100%); } }
@keyframes finestra { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes finestra-via { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes scatto { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* entrando in una schermata il contenuto sale e compare, le righe una dopo l'altra */
#testata.entrata > :not(.comandi) { animation: sale .3s var(--curva) both; }
#vista.entrata > :not(.righe):not(.contenuto-scheda),
#vista.entrata .contenuto-scheda > :not(.righe) { animation: sale .32s var(--curva) both; animation-delay: 40ms; }
#vista.entrata .righe > .riga { animation: sale .32s var(--curva) both; animation-delay: calc(var(--n, 0) * 24ms + 60ms); }
/* cambiando scheda cambia solo il contenuto della scheda */
#vista.cambio .contenuto-scheda { animation: compare .22s ease both; }
#vista.cambio .contenuto-scheda .righe > .riga { animation: sale .28s var(--curva) both; animation-delay: calc(var(--n, 0) * 18ms); }

/* ------------------------------------------------------------------- PC */
/* Sugli schermi larghi (PC, tablet di traverso) la barra delle sezioni va in
   alto, con icona e scritta affiancate, e non copre più niente; le schermate
   con le liste si allargano: Casa e conti su due colonne, le liste lunghe
   (rosa, presenze, documenti, partite) su due colonne dall'alto in basso.
   Moduli e riquadri di dettaglio restano larghi come sul tablet: una voce e il
   suo valore a un metro di distanza non si leggono. */
@media (min-width: 1024px) {
  body { padding-bottom: 56px; }
  #testata, #vista { max-width: 1060px; }
  #testata { padding-top: 18px; }
  #barra { top: 14px; bottom: auto; width: auto; grid-template-columns: repeat(4, auto); }
  #barra a { flex-direction: row; gap: 8px; padding: 10px 18px; font-size: 14px; }
  #barra a .icona { width: 20px; height: 20px; }
  #barra-su { display: none; }
  #brindisi { bottom: 32px; }
  #vista:not([data-larga]) > * { max-width: 720px; }
  .colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
  .colonna > h2:first-child { margin-top: 6px; }
  #vista[data-larga] > .righe, #vista[data-larga] .contenuto-scheda > .righe { columns: 2; column-gap: 32px; }
  #vista[data-larga] .righe > .riga { break-inside: avoid; }
  .carta.voci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carta.voci .voce-azione + .voce-azione { border-top: none; }
  .carta.voci .voce-azione:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .carta.voci .voce-azione:nth-child(even) { border-left: 1px solid var(--linea); }
  .carta.modulo, .azioni.colonna { max-width: 720px; }
  #vista[data-larga] .azioni-tonde { justify-content: flex-start; gap: 28px; }
}
@media (hover: hover) {
  button:not(:disabled):not(.primario):not(.scheda):not(.azione-tonda):not(.voce-azione):hover { background: var(--superficie3); }
  button.primario:not(:disabled):hover { filter: brightness(1.07); }
  .riga.cliccabile:hover, .voce-azione:hover, .voce-elenco.cliccabile:hover { background: var(--superficie); }
  .carta .voce-azione:hover { background: var(--superficie2); }
  .scheda:not(.attiva):hover, #barra a:not(.attivo):hover { color: var(--testo); }
  .azione-tonda:hover .cerchio { filter: brightness(1.15); }
  details > summary:hover .nome { color: var(--marchio-testo); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; }
}