/* SB — stile "iOS nativo scuro" (dal 17/10/2026). Ispirazione: Apple Salute/Fitness, Impostazioni di iOS, Revolut
   (schermate in ..\ispirazione\); principi di Material Design 3 per motion, zone da toccare e stati (v8, fonti nel LEGGIMI).
   TUTTI i colori, le misure e le curve stanno in :root qui sotto: per cambiare l'aspetto si toccano solo queste variabili.
   Dentro Telegram con tema scuro app.js sovrascrive --sfondo/--gruppo/--testo/--tenue/--accento.
   18/10 (revisione): tolte le regole della Home v1/v2 (riquadri, tasti tondi), della v3 (bolle di stato, lightbox) e
   le variabili sparse in 6 blocchi :root; ogni selettore ha una regola sola con i valori finali. */
:root {
  /* colori (palette scura di iOS) */
  --sfondo: #000000;
  --gruppo: #1C1C1E;            /* schede e liste raggruppate */
  --gruppo2: #2C2C2E;           /* tasti secondari, campi, tasti tondi */
  --gruppo3: #3A3A3C;           /* riga premuta */
  --separatore: rgba(84, 84, 88, .55);
  --testo: #FFFFFF;
  --tenue: rgba(235, 235, 245, .6);
  --tenue2: rgba(235, 235, 245, .3);
  --grigio-schede: #8E8E93;     /* icone della tab bar non attive */
  --accento: #8B7CFF;           /* viola del logo: selezione, scheda attiva, testi */
  --accento-pieno: #6A5AE0;     /* tasti pieni: viola piu scuro, bianco sopra ≈ 5:1 (ispezione v6: 3,3:1 non bastava) */
  --accento-testo: #FFFFFF;
  --accento-velo: rgba(139, 124, 255, .30);
  --alone: rgba(139, 124, 255, .30);   /* sfumatura in cima alla Home */
  --verde: #30D158;
  --giallo: #FFD60A;
  --arancio: #FF9F0A;
  --rosso: #FF453A;
  --azzurro: #64D2FF;
  --rosa: #FF6482;
  --blu: #0A84FF;               /* scelta (giorni, canali, spunte) */
  --blu-velo: rgba(10, 132, 255, .22);
  --badge: #FF453A;             /* numerini rossi sulle schede, come iOS */
  --c-bozze: var(--accento);    /* colore del titolo di ogni scheda della Home */
  --c-foto: var(--rosa);
  --c-credito: var(--verde);
  --c-pod: var(--azzurro);
  --c-richieste: var(--arancio);
  --c-runpod: #5E5CE6;
  --bolla-fan: #26252A;
  --bolla-thea: var(--accento);
  /* stati dei messaggi: gli stessi colori ovunque (lista, chat) */
  --st-bozza: var(--accento);          /* viola, bordo tratteggiato: "Bozza · da approvare" */
  --st-modifica: var(--giallo);        /* giallo: "In modifica" */
  --st-inviata: var(--verde);          /* spunta verde: "Inviata alle HH:MM" */
  --st-silenzio: var(--grigio-schede); /* grigio: "Non risposto (silenzio)" */
  --st-errore: var(--rosso);           /* rosso: "Non inviata · Riprova" */
  --vetro: rgba(22, 22, 24, .72);      /* barre con sfocatura sotto */
  --sfocatura: saturate(180%) blur(20px);
  /* misure */
  --raggio: 16px;               /* schede */
  --raggio-lista: 12px;         /* liste raggruppate */
  --raggio-tasto: 14px;
  --tasto: 50px;                /* altezza tasti (>= 44 px) */
  --alta: 44px;                 /* barra in alto (senza notch) */
  --barra: 49px;                /* tab bar di iOS: 49 pt + indicatore Home (safe-area-inset-bottom, 34 pt su iPhone 16) */
  --lato: 16px;                 /* margine ai lati */
  --spazio: 24px;               /* spazio fra sezioni */
  /* caratteri: quelli di sistema (SF Pro su iPhone) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --t-corpo: 17px;
  --t-piccolo: 15px;
  --t-nota: 13px;
  --t-titolo-grande: 34px;
  --t-numero: 34px;
  --sopra-sicuro: env(safe-area-inset-top, 0px);
  --sotto-sicuro: env(safe-area-inset-bottom, 0px);
  /* v25 (19/10) --buco/--giu: TOLTI nella v25.1 (spingevano la pagina fuori dalla finestra di iOS: icone tagliate). */
  /* widget della Home (v4): Piccolo 1×1 · Medio 2×1 · Grande 2×2 su 2 colonne */
  --w-spazio: 14px;                                                     /* spazio fra i widget */
  --w-max: 488px;                                                       /* la griglia non cresce oltre (iPad/PC) */
  --cella: calc((min(100vw - 2 * var(--lato), var(--w-max)) - var(--w-spazio)) / 2);   /* lato del widget piccolo */
  --w-raggio: 22px;
  /* movimento: rimbalzi dei widget (v5) e token M3 (v8, https://m3.material.io/styles/motion/easing-and-duration/tokens-specs) */
  --molla: cubic-bezier(.34, 1.36, .64, 1);      /* rimbalzo morbido (un po' oltre e torna) */
  --scivola: cubic-bezier(.2, .9, .25, 1.04);    /* gli altri widget che fanno spazio */
  --m3-standard: cubic-bezier(.2, 0, 0, 1);
  --m3-velo-premuto: rgba(255, 255, 255, .10);   /* stato "premuto" = velo chiaro 10% */
  color-scheme: dark;
}

/* ---------- comportamento da app: niente zoom, niente rimbalzo della pagina, niente selezione sui tasti ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--sfondo); color: var(--testo); }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* v25.1: finestra corta di iOS (app dalla Home, fondo ~55 pt sopra il bordo): l'indicatore Home e FUORI dalla finestra,
   quindi niente spazio per lui sotto la tab bar / la barra di scrittura (safe-area di sotto = 0). La fascia sotto la
   disegna iOS col colore di sfondo della pagina (WebKit 301994 c.12): nell'app installata lo sfondo di <html> e quello
   della tab bar (vetro su nero), cosi la fascia continua la barra invece di essere un nero diverso. Il body copre
   tutto il resto (nessuna differenza visibile dentro la finestra). */
html.finestra-corta { --sotto-sicuro: 0px !important; }
@media (display-mode: standalone) { html { background: #101011; } }
body { position: fixed; inset: 0; font: var(--t-corpo)/1.3 var(--font); letter-spacing: -.01em;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-font-smoothing: antialiased; }
button, a, .schede, .tessera { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.bolla, blockquote, textarea, input, .selezionabile { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
#app { position: absolute; inset: 0; }

/* ---------- zona che scorre (l'unica) ---------- */
.scorri { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  padding: calc(var(--sopra-sicuro) + var(--alta)) 0 calc(var(--barra) + var(--sotto-sicuro) + var(--spazio)); background: transparent; }
/* backface: la schermata che esce col dito (swipe indietro) non lampeggia */
#vista { position: relative; z-index: 1; padding: 0 var(--lato) 24px; max-width: 700px; margin: 0 auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#vista:has(.comandi) { padding-bottom: 150px; }
/* lo sfondo (nero + alone viola della Home) sta FERMO dietro a tutto: tirando giu il rimbalzo mostra lo stesso sfondo,
   niente fascia nera fra sfondo e schermata (v8) */
.sfondo-fisso { position: fixed; inset: 0; z-index: 0; background: var(--sfondo); pointer-events: none; }
.sfondo-fisso .alone { position: absolute; left: 0; right: 0; top: 0; height: calc(460px + var(--sopra-sicuro)); z-index: 0; pointer-events: none; display: none;
  background: radial-gradient(120% 90% at 20% 0%, var(--alone), transparent 70%); }
body.home .sfondo-fisso .alone { display: block; }
body.fuori .sfondo-fisso .alone { display: none; }

/* ---------- titolo grande (si rimpicciolisce scorrendo, app.js) ---------- */
.titolo-grande { position: relative; z-index: 1; padding: 4px var(--lato) 10px; max-width: 700px; margin: 0 auto; }
.titolo-grande h1 { margin: 0; font-size: var(--t-titolo-grande); line-height: 41px; font-weight: 700; letter-spacing: .01em; transform-origin: left bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.titolo-grande .sopra { font-size: var(--t-nota); font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.titolo-grande .chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* ---------- barra in alto (ferma) ---------- */
.barra-alta { position: absolute; top: 0; left: 0; right: 0; z-index: 10; height: calc(var(--sopra-sicuro) + var(--alta)); padding: var(--sopra-sicuro) 8px 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; transition: background .2s, box-shadow .2s; }
.barra-alta.compatta { background: var(--vetro); -webkit-backdrop-filter: var(--sfocatura); backdrop-filter: var(--sfocatura); box-shadow: 0 .5px 0 var(--separatore); }
.titolo-piccolo { font-size: var(--t-corpo); font-weight: 600; opacity: 0; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
/* v24: barra COMPATTA (chat del fan, foglio foto: come Telegram e Foto di iOS): niente titolo grande, titolo piccolo
   sempre visibile con una riga sotto ("follower · Bozza", "18/10, 23:13"), barra sempre col vetro */
body.barra-titolo .titolo-grande { display: none; }
body.barra-titolo .barra-alta { background: var(--vetro); -webkit-backdrop-filter: var(--sfocatura); backdrop-filter: var(--sfocatura); box-shadow: 0 .5px 0 var(--separatore); }
body.barra-titolo .titolo-piccolo { opacity: 1 !important; display: flex; flex-direction: column; align-items: center; line-height: 1.15; cursor: default; }
.tp-nome { font-weight: 600; font-size: var(--t-corpo); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tp-sotto { font-size: 12px; font-weight: 400; color: var(--tenue); max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap; }
.tp-sotto:empty { display: none; }
.tp-sotto .etichetta { font-size: 11px; padding: 0 5px; line-height: 15px; vertical-align: 1px; }
.menu-azioni { display: grid; gap: 8px; }
.btn.rosso { color: var(--rosso); }
.lato { display: flex; align-items: center; min-width: 0; }
.lato.dx { justify-content: flex-end; }
.indietro { display: inline-flex; align-items: center; gap: 2px; color: var(--accento); font-size: var(--t-corpo); height: 44px; padding: 0 8px 0 0; transition: opacity .2s ease-out; }
.indietro svg { width: 24px; height: 24px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- tab bar come iOS (v8): appoggiata al fondo, fino al bordo, sfocatura che copre anche la zona
   dell'indicatore Home, 4 voci della stessa larghezza (griglia), icone ed etichette centrate, voci >= 48 px (M3) ---------- */
.schede { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; margin: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch;
  height: calc(var(--barra) + var(--sotto-sicuro)); padding: 0 env(safe-area-inset-right, 0px) var(--sotto-sicuro) env(safe-area-inset-left, 0px);
  background: var(--vetro); -webkit-backdrop-filter: var(--sfocatura); backdrop-filter: var(--sfocatura); box-shadow: 0 -.5px 0 var(--separatore);
  transform: translateZ(0); }
.schede a { position: relative; flex: none; min-width: 0; min-height: 48px; height: var(--barra); display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 5px; gap: 2px; text-align: center; white-space: nowrap; color: var(--grigio-schede); font-size: 10px; font-weight: 500; letter-spacing: .01em; }
.schede a span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 12px; }
.schede a svg { width: 26px; height: 26px; flex: none; border-radius: 10px; transition: background .1s var(--m3-standard); }
.schede a:active svg { background: var(--m3-velo-premuto); }
.schede a.attiva { color: var(--accento); }
.contatore { position: absolute; top: 1px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--badge); color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }

/* ---------- liste raggruppate (Impostazioni di iOS) ---------- */
.intest { font-size: var(--t-nota); color: var(--tenue); text-transform: uppercase; letter-spacing: .02em; margin: var(--spazio) var(--lato) 7px; }
.piede { font-size: var(--t-nota); color: var(--tenue); margin: 7px var(--lato) 0; line-height: 1.35; }
.gruppo { background: var(--gruppo); border-radius: var(--raggio-lista); overflow: hidden; }
.cella { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px var(--lato); width: 100%; background: none; border: 0; text-align: left; color: var(--testo); cursor: pointer; font-size: var(--t-corpo); transition: background-color .3s ease-out; }
a.cella:active, button.cella:active { background: var(--gruppo3); transition: none; }
.cella + .cella::before { content: ""; position: absolute; top: 0; right: 0; left: var(--rientro, var(--lato)); height: .5px; background: var(--separatore); }
.gruppo.con-icone { --rientro: 57px; }
.gruppo.con-avatar { --rientro: 68px; }
.cella .corpo { flex: 1; min-width: 0; }
.cella .nome { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cella .nome b { font-weight: 600; }
.cella .testo { color: var(--tenue); font-size: var(--t-piccolo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cella .valore { color: var(--tenue); text-align: right; display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 60%; font-size: var(--t-corpo); }
.cella .ora { color: var(--tenue); font-size: var(--t-piccolo); flex: none; }
.cella .chev { color: var(--tenue); flex: none; display: grid; }
.cella .chev svg { width: 14px; height: 14px; }
.cella.accento { color: var(--accento); }
.cella.rossa { color: var(--rosso); }
.cella.centro { justify-content: center; }
.cella.a-capo { display: block; color: var(--tenue); font-size: var(--t-piccolo); }
.qi { width: 29px; height: 29px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none; }
.qi svg { width: 18px; height: 18px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 17px; color: #fff; flex: none; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tenue2); flex: none; }
.punto.verde { background: var(--verde); } .punto.giallo { background: var(--giallo); } .punto.rosso { background: var(--rosso); }
.chip { display: inline-flex; align-items: center; font-size: var(--t-nota); font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--gruppo2); color: var(--tenue); white-space: nowrap; }
.chip.accento { background: var(--accento-velo); color: var(--testo); }
.vuoto { text-align: center; color: var(--tenue); padding: 56px 16px; font-size: var(--t-piccolo); }
.vuoto b { display: block; color: var(--testo); font-size: 20px; margin-bottom: 6px; font-weight: 600; }
.tenue { color: var(--tenue); }
.piccolo { font-size: var(--t-nota); }
.scheletro { height: 120px; border-radius: var(--raggio); background: var(--gruppo); margin-bottom: 12px; animation: respiro 1.4s ease-in-out infinite; }
@keyframes respiro { 50% { opacity: .55; } }

/* interruttore iOS */
.interruttore { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 16px; background: var(--gruppo3); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .2s; }
.interruttore::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); transition: transform .2s; }
.interruttore:checked { background: var(--verde); }
.interruttore:checked::after { transform: translateX(20px); }

/* ---------- chat: bolle tipo Messaggi ---------- */
.chat { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 4px; }
.bolla { border-radius: 18px; padding: 8px 13px; white-space: pre-wrap; word-wrap: break-word; max-width: 82%; font-size: var(--t-corpo); line-height: 1.32; }
.bolla.fan { background: var(--bolla-fan); align-self: flex-start; border-bottom-left-radius: 6px; }
.bolla.thea { background: var(--bolla-thea); color: var(--accento-testo); align-self: flex-end; border-bottom-right-radius: 6px; }
.chi { font-size: 11px; font-weight: 600; color: var(--tenue); margin: 6px 12px -2px; }
.chi.dx { align-self: flex-end; }
.nota { font-size: var(--t-nota); color: var(--giallo); margin: 6px 4px 0; text-align: center; }
.memoria { padding: 4px 0; }

/* ---------- tasti ---------- */
.comandi { position: fixed; left: 0; right: 0; bottom: calc(var(--barra) + var(--sotto-sicuro)); z-index: 9;
  padding: 10px var(--lato); background: var(--vetro); -webkit-backdrop-filter: var(--sfocatura); backdrop-filter: var(--sfocatura); box-shadow: 0 -.5px 0 var(--separatore); }
.comandi .dentro { max-width: 700px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comandi .info { grid-column: 1 / -1; font-size: var(--t-nota); color: var(--tenue); text-align: center; }
.largo { grid-column: 1 / -1; }
.btn { appearance: none; border: 0; background: var(--gruppo2); color: var(--testo); border-radius: var(--raggio-tasto); min-height: var(--tasto); padding: 10px 14px; font-size: var(--t-corpo); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .18s ease-out, opacity .18s ease-out; }
.btn:active { opacity: .6; transform: scale(.97); transition: none; }
.btn:disabled { opacity: .38; pointer-events: none; }      /* spento = 38% (M3) */
.btn.primario { background: var(--accento-pieno); color: var(--accento-testo); }
.btn.piano { background: transparent; color: var(--accento); }
.btn.pieno { width: 100%; }
.campo { width: 100%; min-height: 110px; resize: none; background: var(--gruppo2); color: var(--testo); border: 0; border-radius: var(--raggio-lista); padding: 12px 14px;
  font: 17px/1.35 var(--font); }   /* >= 16 px: iOS non zooma */
.campo:focus { outline: 2px solid var(--accento); outline-offset: 0; }

/* ---------- foglio in basso (conferme, Modifica) ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .5); display: flex; align-items: flex-end; animation: compari .2s ease-out; }
.sheet .pannello { width: 100%; max-width: 700px; margin: 0 auto; background: var(--gruppo); border-radius: 14px 14px 0 0; padding: 8px var(--lato) calc(18px + var(--sotto-sicuro)); animation: sali .25s cubic-bezier(.2, .9, .3, 1);
  transition: transform .2s ease-out; touch-action: auto; }
.sheet .maniglia { width: 36px; height: 5px; border-radius: 3px; background: var(--gruppo3); margin: 0 auto 14px; }
.sheet h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.sheet p { margin: 0 0 14px; color: var(--tenue); font-size: var(--t-piccolo); }
.sheet blockquote { margin: 0 0 14px; padding: 12px 14px; background: var(--gruppo2); border-radius: var(--raggio-lista); white-space: pre-wrap; font-size: var(--t-corpo); }
.sheet .dentro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
@keyframes compari { from { background: rgba(0, 0, 0, 0); } }
@keyframes sali { from { transform: translateY(100%); } }

/* ---------- foto (tipo Foto di iOS) ---------- */
.miniature { display: grid; grid-template-columns: repeat(2, 22px); gap: 2px; flex: none; border-radius: 8px; overflow: hidden; }
.miniature img { width: 22px; height: 22px; object-fit: cover; background: var(--gruppo2); display: block; }
.sfoca .tessera img, .miniature.sfoca img { filter: blur(10px); }
.griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 calc(-1 * var(--lato) + 2px); }
@media (min-width: 560px) { .griglia { grid-template-columns: repeat(4, 1fr); } }
.tessera { position: relative; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: var(--gruppo2); cursor: pointer; border: 0; padding: 0; }
.tessera img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tessera .num { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 600; font-size: 12px; line-height: 22px; text-align: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tessera .rotta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--tenue); font-size: 13px; font-weight: 600; padding: 8px; text-align: center; background: var(--gruppo2); cursor: pointer; }
.tessera .rotta small { font-size: 11px; font-weight: 400; color: var(--tenue2); }
/* v24 (sb-design #2, Foto di iOS): UN solo segno di scelta = il cerchio blu col ✓ + un velo chiaro (niente bordo viola) */
.tessera.scelta::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .16); pointer-events: none; }
.chiuso .tessera { cursor: default; }
/* 18/10 sera: nome del server/canale sopra ogni gruppo di foto, ▶ sui video */
.griglia .gruppo-canale { grid-column: 1 / -1; padding: 10px 4px 4px; font-size: 13px; font-weight: 600; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.griglia .gruppo-canale:first-child { padding-top: 2px; }
.tessera .play { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 17px; line-height: 40px; text-align: center; pointer-events: none; }
/* v27: video con la durata = pillola "▶ 0:14" al centro (come la durata dei video in Foto di iOS, ma al centro: in basso a destra c'e la scelta) */
.tessera .play.con-durata { width: auto; height: 28px; margin: -14px 0 0 0; transform: translateX(-50%); padding: 0 10px; border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 28px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiuso .tessera:not(.scelta) img { opacity: .35; }

/* ---------- avviso con "Annulla" (5 secondi) ---------- */
.avviso { position: fixed; left: 50%; bottom: calc(var(--barra) + var(--sotto-sicuro) + 96px); transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 14px; background: rgba(44, 44, 46, .92); -webkit-backdrop-filter: var(--sfocatura); backdrop-filter: var(--sfocatura);
  color: var(--testo); padding: 12px 14px 12px 18px; border-radius: var(--raggio-tasto); font-size: var(--t-piccolo); width: max-content; max-width: calc(100vw - 32px); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.avviso.errore { box-shadow: inset 0 0 0 1px var(--rosso), 0 10px 30px rgba(0, 0, 0, .5); }
.avviso button { background: none; border: 0; color: var(--accento); font-weight: 600; min-height: 44px; margin: -6px 0; cursor: pointer; padding: 0 4px; font-size: var(--t-piccolo); }

/* ---------- accesso: senza sessione niente barre ---------- */
body.fuori .schede, body.fuori .titolo-grande, body.fuori .barra-alta { display: none; }
body.fuori .scorri { padding-top: var(--sopra-sicuro); }
.accesso { max-width: 380px; margin: 12vh auto 0; text-align: center; }
.accesso .logo { width: 88px; height: 88px; border-radius: 20px; display: block; margin: 0 auto 18px; box-shadow: 0 10px 40px rgba(139, 124, 255, .25); }
.accesso h2 { margin: 0 0 8px; font-size: 28px; font-weight: 700; }
.accesso p { margin: 0 0 24px; color: var(--tenue); font-size: var(--t-piccolo); line-height: 1.4; }
.accesso .gruppo { text-align: left; padding: 14px var(--lato); font-size: var(--t-piccolo); color: var(--tenue); margin-top: 18px; }
.campo.codice { min-height: 0; height: 60px; font-size: 28px; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; margin-bottom: 10px; padding: 0 0 0 .4em; }

/* ---------- navigazione a livelli: la schermata nuova scorre da destra, tornando indietro da sinistra (come iOS;
   curva standard M3, 300 / 250 ms) ---------- */
#vista.push { animation: daDestra .3s var(--m3-standard); }
#vista.pop { animation: daSinistra .25s var(--m3-standard); }
@keyframes daDestra { from { transform: translateX(100%); } }
@keyframes daSinistra { from { transform: translateX(-30%); opacity: .4; } }
.testo-btn { background: none; border: 0; color: var(--accento); font-size: var(--t-corpo); font-weight: 600; padding: 0 12px; min-height: 44px; cursor: pointer; }

/* tira giu per aggiornare: indicatore a 8 raggi come UIRefreshControl di iOS (grigio, i raggi compaiono tirando; al
   rilascio gira a scatti con la scia sfumata) */
.tira { height: 0; opacity: 0; overflow: hidden; display: grid; place-items: center; color: var(--tenue); background: transparent; transition: height .25s, opacity .2s; }
.tira svg { width: 28px; height: 28px; }
.tira line { transition: opacity .08s; }
.tira.gira svg { animation: giraRaggi .8s steps(8) infinite; }
.tira.gira line:nth-child(1) { opacity: 1 !important; } .tira.gira line:nth-child(8) { opacity: .88 !important; } .tira.gira line:nth-child(7) { opacity: .76 !important; }
.tira.gira line:nth-child(6) { opacity: .64 !important; } .tira.gira line:nth-child(5) { opacity: .52 !important; } .tira.gira line:nth-child(4) { opacity: .4 !important; }
.tira.gira line:nth-child(3) { opacity: .3 !important; } .tira.gira line:nth-child(2) { opacity: .22 !important; }
@keyframes giraRaggi { to { transform: rotate(360deg); } }

/* link esterni (icona ↗) */
.chev.esterno svg { width: 14px; height: 14px; }

/* stati dei messaggi (etichette in lista e in chat) */
.etichetta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.etichetta .ic svg { width: 12px; height: 12px; display: block; }
.etichetta.st-bozza { color: var(--st-bozza); border: 1.5px dashed var(--st-bozza); }
.etichetta.st-modifica { color: #1c1c1e; background: var(--st-modifica); }
.etichetta.st-invio { color: var(--testo); background: var(--gruppo3); }
.etichetta.st-inviata { color: var(--st-inviata); background: rgba(48, 209, 88, .14); }
.etichetta.st-silenzio, .etichetta.st-superata { color: var(--st-silenzio); background: var(--gruppo2); }
.etichetta.st-errore { color: #fff; background: var(--st-errore); }
.rotella { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
.destra-riga { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.sotto-bolla { align-self: flex-end; display: flex; align-items: center; gap: 4px; margin: 2px 2px 0; }
.bolla.thea.st-inviata { background: var(--bolla-thea); color: var(--accento-testo); }

/* foglio dal basso grande (galleria, scheda del fan, Nuovo controllo): testata fissa con maniglia, titolo e "Chiudi";
   si chiude trascinando giu */
.sheet .pannello.grande { height: calc(100dvh - var(--sopra-sicuro) - 24px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.testa-sheet { flex: none; padding: 8px var(--lato) 10px; border-bottom: .5px solid var(--separatore); background: var(--gruppo); cursor: grab; }
.testa-sheet .maniglia { margin-bottom: 6px; }
.testa-sheet .riga { display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; }
.testa-sheet .tit { text-align: center; line-height: 1.2; min-width: 0; }
.testa-sheet .tit b { display: block; font-size: var(--t-corpo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testa-sheet .tit small { color: var(--tenue); font-size: 12px; }
.chiudi-sheet { justify-self: end; background: var(--gruppo2); border: 0; color: var(--accento); font-weight: 600; font-size: var(--t-piccolo); border-radius: 999px; padding: 6px 14px; min-height: 44px; cursor: pointer; }
.corpo-sheet { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px var(--lato) calc(20px + var(--sotto-sicuro)); }

/* avviso in basso dopo un'azione */
.avviso.ok { box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .5), 0 10px 30px rgba(0, 0, 0, .5); }
.spunta-ok { width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; flex: none; }
.spunta-ok svg { width: 13px; height: 13px; }

/* foto: barra sopra la griglia (mai tasti sopra le foto) */
.barra-foto { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
.btn.barretta { min-height: 48px; padding: 0 16px; background: var(--gruppo2); font-size: var(--t-piccolo); border-radius: 999px; }
.segmenti { display: inline-flex; background: var(--gruppo2); border-radius: 9px; padding: 2px; }
.segmenti button { border: 0; background: none; color: var(--testo); font-size: var(--t-piccolo); font-weight: 600; padding: 6px 16px; border-radius: 7px; min-height: 40px; cursor: pointer; }
.segmenti button.attivo { background: var(--gruppo3); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.segmenti button:disabled { opacity: .4; }

/* impostazioni */
.badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--rosso); color: #fff; font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; }
.cella.blocco { display: block; }
.riga-problema { display: flex; align-items: center; gap: 8px; }
.riga-problema b { font-weight: 600; font-size: var(--t-corpo); }
.cella.blocco .testo { color: var(--tenue); font-size: var(--t-nota); margin: 2px 0 6px 17px; }
.cosa-fare { font-size: var(--t-piccolo); color: var(--testo); background: var(--gruppo2); border-radius: 10px; padding: 8px 10px; margin-left: 17px; white-space: normal; }
.grande-stato { text-align: center; padding: 18px 0 6px; }
.grande-stato b { display: block; font-size: 40px; font-weight: 700; letter-spacing: -.01em; }
.grande-stato span { color: var(--tenue); font-size: var(--t-piccolo); }
.grande-stato.verde b { color: var(--verde); } .grande-stato.giallo b { color: var(--giallo); }

.etichetta.st-nessuna { color: var(--tenue); border: 1px solid var(--separatore); }


/* =====================================================================================================================
   HOME A WIDGET (v4-v5) come sull'iPhone: Piccolo 1×1 · Medio 2×1 · Grande 2×2 su 2 colonne. Le posizioni le calcola
   app.js (impacca/disponi) e qui si ANIMANO (gli altri scivolano, rimbalzo al rilascio).
   ===================================================================================================================== */
.widgets { position: relative; width: calc(var(--cella) * 2 + var(--w-spazio)); max-width: var(--w-max); margin: 8px auto 0; min-height: 10px; }
.widget { position: relative; min-width: 0; background: var(--gruppo); border-radius: var(--w-raggio); padding: 13px 14px 12px; display: flex; flex-direction: column;
  overflow: hidden; cursor: pointer; -webkit-user-select: none; user-select: none; }
.widget:active:not(.anteprima) { filter: brightness(1.25); }
.widget.w-medio { grid-column: span 2; }
.widget.w-grande { grid-column: span 2; grid-row: span 2; }
.widget.allarme { box-shadow: inset 0 0 0 1.5px var(--c-richieste); }
.w-testa { display: flex; align-items: center; gap: 6px; font-size: var(--t-piccolo); font-weight: 600; min-width: 0; position: relative; z-index: 1; }
.w-ic svg { width: 17px; height: 17px; display: block; }
.w-tit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.w-fuori { margin-left: auto; color: var(--tenue2); display: grid; }
.w-fuori svg { width: 14px; height: 14px; }
.w-chip { margin-left: auto; font-size: 11px; padding: 1px 7px; }
.w-num { font-size: var(--t-numero); font-weight: 700; letter-spacing: -.01em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--testo); }
.w-num.lungo { font-size: 26px; }
.w-num small { font-size: var(--t-piccolo); font-weight: 600; color: var(--tenue); letter-spacing: 0; margin-left: 4px; }
.w-num.giallo { color: var(--giallo); } .w-num.rosso { color: var(--rosso); } .w-num.verde { color: var(--verde); }
.w-sotto { color: var(--tenue); font-size: var(--t-nota); margin-top: 3px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-fondo { margin-top: auto; position: relative; z-index: 1; min-width: 0; }
.w-fondo .w-barra { margin-top: 8px; }
/* medio: numero a sinistra, righe a destra */
.w-corpo-medio { flex: 1; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 12px; align-items: end; min-height: 0; margin-top: 6px; }
.w-sx { min-width: 0; align-self: end; }
.w-dx { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
/* grande: numero in cima, lista sotto */
.w-riga-num { display: flex; align-items: flex-end; gap: 12px; margin: 8px 0 10px; min-width: 0; }
.w-riga-num .w-num { flex: none; max-width: 55%; }
.w-riga-num .w-sotto { margin: 0 0 4px; }
.w-lista { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.w-riga { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 0; border: 0; background: none; color: var(--testo); font: inherit; font-size: var(--t-nota); text-align: left; width: 100%;
  border-top: .5px solid var(--separatore); cursor: pointer; }
.w-riga:first-child { border-top: 0; }
.w-grande .w-riga { font-size: var(--t-piccolo); min-height: 38px; }
.w-a { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.w-b { color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58%; flex: none; }
.w-ora { color: var(--tenue); flex: none; font-size: 12px; }
.w-riga .punto { width: 7px; height: 7px; }
.w-vuoto { color: var(--tenue); font-size: var(--t-nota); line-height: 1.3; }
.w-nota { color: var(--tenue); font-size: 12px; margin-top: 6px; }
.w-barra { height: 7px; border-radius: 4px; background: var(--gruppo3); overflow: hidden; }
.w-barra i { display: block; height: 100%; border-radius: 4px; background: var(--arancio); }
.w-barra i.giallo { background: var(--giallo); } .w-barra i.rosso { background: var(--rosso); }
.w-extra-medio { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
/* mini grafico (grande) */
.w-grafico { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.w-grafico .barre { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; min-height: 0; padding: 0 6px; }
.w-grafico .colonna { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-height: 0; }
.w-grafico .colonna i { width: 100%; max-width: 44px; border-radius: 7px 7px 3px 3px; background: rgba(255, 159, 10, .45); }
.w-grafico .colonna i.oggi { background: var(--arancio); }
.w-grafico .val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.w-grafico .giorno { font-size: 11px; color: var(--tenue); }
/* foto (sempre sfocate nel widget) */
.w-foto img { filter: blur(12px) saturate(1.2); object-fit: cover; display: block; background: var(--gruppo2); }
.w-foto-piccolo { position: absolute; inset: 0; z-index: 0; }
.w-foto-piccolo img { width: 100%; height: 100%; transform: scale(1.15); }
.w-foto-piccolo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .7)); }
.w-foto-medio, .w-foto-grande { display: grid; gap: 4px; height: 100%; min-height: 0; }
.w-foto-medio { grid-template-columns: repeat(3, 1fr); }
.w-foto-grande { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); flex: 1; }
.w-foto-medio > *, .w-foto-grande > * { width: 100%; height: 100%; min-height: 0; border-radius: 10px; overflow: hidden; filter: blur(9px) saturate(1.2); clip-path: inset(0 round 10px); }
.widget.segnaposto .w-num { color: var(--tenue2); }

/* modalita modifica come iOS: tremolio, "−" in alto a sinistra, "+" e "Fine" nella barra */
.widgets.modifica .widget { animation: tremoW .26s ease-in-out infinite alternate; touch-action: none; cursor: grab; overflow: visible; }
.widgets.modifica .widget:nth-child(2n) { animation-delay: -.13s; animation-direction: alternate-reverse; }
@keyframes tremoW { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
.widget.sollevato { animation: none !important; z-index: 5; box-shadow: 0 18px 44px rgba(0, 0, 0, .75); opacity: .96; }
.widget .togli { position: absolute; top: -9px; left: -9px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #636366; color: #fff; display: grid; place-items: center; z-index: 3; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.widget .togli svg { width: 14px; height: 14px; }
.widgets.modifica .w-foto-piccolo { border-radius: var(--w-raggio); overflow: hidden; }
/* v24 (sb-design #4): visibile 34 px, zona di tocco 44×44 (Apple HIG) con il bordo trasparente */
.pill-btn { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 5px solid transparent; background: var(--gruppo2); background-clip: padding-box; color: var(--testo); font-size: var(--t-piccolo); font-weight: 600;
  display: inline-grid; place-items: center; cursor: pointer; margin: 0 1px; }
.pill-btn svg { width: 18px; height: 18px; }
.pill-btn.fine { background: var(--gruppo2); color: var(--testo); }
.pill-btn:active { opacity: .6; }
/* v9 (Stefano 18/10): in modifica la testata ("domenica 18 ottobre · Ciao Stefano") resta INVARIATA */
body.modifica-home .titolo-grande { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* galleria dei widget (foglio grande dal basso) */
.galleria { padding-top: 4px; }
.gal-vetrina { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 18px; }
.gal-mini { border: 0; padding: 0; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; border-radius: 18px; }
.gal-mini .widget { width: var(--cella); height: var(--cella); transform: scale(.65); transform-origin: top left; pointer-events: none; background: var(--gruppo2); }
.gal-indietro { display: inline-flex; align-items: center; gap: 2px; padding: 0; min-height: 36px; font-weight: 400; }
.gal-indietro svg { width: 20px; height: 20px; }
.gal-testa { text-align: center; margin: 4px 0 12px; }
.gal-testa h3 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.gal-testa p { margin: 0 auto; color: var(--tenue); font-size: var(--t-piccolo); max-width: 320px; }
.nastro { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.nastro::-webkit-scrollbar { display: none; }
.pagina-misura { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; height: calc(var(--cella) * 2 + var(--w-spazio) + 8px); }
.pagina-misura .widget { cursor: default; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); background: var(--gruppo2); }
.pagina-misura .w-piccolo { width: var(--cella); height: var(--cella); }
.pagina-misura .w-medio { width: calc(var(--cella) * 2 + var(--w-spazio)); height: var(--cella); }
.pagina-misura .w-grande { width: calc(var(--cella) * 2 + var(--w-spazio)); height: calc(var(--cella) * 2 + var(--w-spazio)); }
.misura-nome { text-align: center; font-size: var(--t-piccolo); font-weight: 600; margin-top: 10px; }
.punti { display: flex; justify-content: center; gap: 8px; margin: 10px 0 16px; }
.punti button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--gruppo3); cursor: pointer; }
.punti button.attivo { background: var(--testo); }
.gal-aggiungi { gap: 6px; }
.gal-piu svg { width: 18px; height: 18px; display: block; }
.sheet .pannello.grande .gruppo { background: var(--gruppo2); }
/* medio: l'unita va sotto il numero, le righe su due livelli (nome / dettaglio) */
.w-sx .w-num small { display: block; margin: 2px 0 0; font-size: var(--t-nota); }
.w-medio .w-riga { min-height: 0; padding: 3px 0; flex-wrap: wrap; row-gap: 0; align-items: baseline; }
.w-medio .w-riga .w-b { flex: 0 0 100%; max-width: 100%; font-size: 12px; padding-left: 14px; }
.w-medio .w-riga .punto { align-self: center; }
.w-medio .w-riga .w-ora { display: none; }
.w-medio .w-riga:not(:has(.punto)) .w-b { padding-left: 0; }
.widget.allarme-rosso { box-shadow: inset 0 0 0 1.5px rgba(255, 69, 58, .75); }


/* motion dei widget (v5) */
.widgets > .widget { position: absolute; left: 0; top: 0; width: var(--cella); height: var(--cella); box-sizing: border-box;
  transition: left .34s var(--scivola), top .34s var(--scivola), width .3s var(--scivola), height .3s var(--scivola), transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.widgets.fermo > .widget { transition: none !important; }
.widgets.modifica > .widget { touch-action: none; -webkit-touch-callout: none; }
/* preso: piu grande, ombra, sopra gli altri, segue il dito senza ritardo */
.widgets > .widget.sollevato { transition: transform .18s ease, box-shadow .18s ease, width .3s var(--scivola), height .3s var(--scivola); transform: scale(1.06); z-index: 6;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); cursor: grabbing; opacity: 1; }
.widgets > .widget.ridimensiona { animation: none !important; transition: transform .18s ease, box-shadow .18s ease; z-index: 6; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
/* rilascio: torna al posto con un rimbalzo */
.widgets > .widget.atterra { animation: none !important; z-index: 5; transition: left .42s var(--molla), top .42s var(--molla), width .42s var(--molla), height .42s var(--molla), transform .42s var(--molla), box-shadow .3s ease; }
.widgets > .widget.via { animation: none !important; transform: scale(.35); opacity: 0; pointer-events: none; transition: transform .22s ease-in, opacity .22s ease-in; }
/* "−" e maniglia: solo in modifica */
.widget .togli, .widget .maniglia-w { display: none; }
.widgets.modifica .widget .togli, .widgets.modifica .widget .maniglia-w { display: grid; }
.widget .maniglia-w { position: absolute; right: -7px; bottom: -7px; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; z-index: 3; cursor: nwse-resize;
  place-items: center; background: #F2F2F7; color: #1C1C1E; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); touch-action: none; }
.widget .maniglia-w svg { width: 15px; height: 15px; }
.widget .maniglia-w::before { content: ""; position: absolute; inset: -9px; }      /* zona di presa piu grande per il dito */
.widget .togli::before { content: ""; position: absolute; inset: -8px; }
body:not(.modifica-home) .piede-modifica { display: none; }

/* avviso stile iOS (UIAlertController): centrato, vetro, due tasti affiancati */
.alert-ios-velo { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 24px; animation: veloOn .18s ease-out; }
.alert-ios-velo.chiude { animation: veloOff .16s ease-in forwards; }
.alert-ios { width: 270px; max-width: 100%; border-radius: 14px; overflow: hidden; background: rgba(44, 44, 46, .92); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  text-align: center; animation: alertOn .26s var(--molla); }
.alert-testo { padding: 19px 16px 17px; }
.alert-testo b { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.alert-testo p { margin: 4px 0 0; font-size: 13px; color: var(--testo); opacity: .85; line-height: 1.35; }
.alert-tasti { display: grid; grid-template-columns: 1fr 1fr; border-top: .5px solid rgba(255, 255, 255, .16); }
.alert-tasti button { border: 0; background: none; min-height: 44px; font-size: 17px; color: #0A84FF; cursor: pointer; font-family: inherit; }
.alert-tasti button + button { border-left: .5px solid rgba(255, 255, 255, .16); }
.alert-tasti .alert-annulla { font-weight: 400; }
.alert-tasti .alert-azione { font-weight: 600; }
.alert-tasti .alert-azione.rosso { color: var(--rosso); }
.alert-tasti button:active { background: rgba(255, 255, 255, .08); }
@keyframes veloOn { from { background: rgba(0, 0, 0, 0); } }
@keyframes veloOff { to { opacity: 0; } }
@keyframes alertOn { from { transform: scale(1.18); opacity: 0; } }

/* Impostazioni */
.cella .valore.nessuno { color: var(--verde); }
.badge.giallo { background: var(--giallo); color: #1C1C1E; }
.attesa-pc { color: var(--giallo) !important; }
.controlli .cella .corpo .testo { white-space: normal; }
.btn.rosso-testo { color: var(--rosso); }
.form-controllo { padding: 4px 0 20px; }
.form-controllo .campi { display: grid; gap: 12px; margin: 0 0 14px; }
.form-controllo label { display: grid; gap: 6px; font-size: var(--t-piccolo); color: var(--tenue); }
.campo-riga { width: 100%; box-sizing: border-box; min-height: 44px; background: var(--gruppo2); color: var(--testo); border: 0; border-radius: var(--raggio-lista); padding: 10px 12px;
  font-size: 17px; font-family: inherit; color-scheme: dark; }
.form-controllo .campo { min-height: 90px; font-size: 17px; }
.form-controllo [hidden] { display: none !important; }
.controlli .cella .corpo .nome { white-space: normal; }

/* ---------- niente scorrimento di lato (v6), Monitor (cancella, nuovo controllo) ---------- */
/* NIENTE scorrimento orizzontale da nessuna parte: si scorre solo in verticale (Stefano 18/10: "Nuovo controllo si
   spostava a destra/sinistra come una pagina web"). Causa: .corpo-sheet aveva overflow-y:auto -> anche x diventava auto,
   e il campo data+ora di iOS e piu largo del telefono. */
html, body, #app, .scorri, #vista, .sheet, .sheet .pannello, .corpo-sheet, .form-controllo { overflow-x: hidden; max-width: 100%; }
.scorri, .corpo-sheet { touch-action: pan-y; overscroll-behavior-x: none; }
.form-controllo * { max-width: 100%; }
input, select, textarea { min-width: 0; max-width: 100%; }
.form-controllo input[type="date"], .form-controllo input[type="time"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; width: 100%; text-align: left; }
.form-controllo input::-webkit-date-and-time-value { text-align: left; }
.form-controllo .campi.due { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Monitor: riga che si scorre verso sinistra (come Mail/Impostazioni) */
.riga-swipe { position: relative; overflow: hidden; }
.riga-swipe + .riga-swipe .davanti::before { content: ""; position: absolute; top: 0; right: 0; left: var(--rientro, var(--lato)); height: .5px; background: var(--separatore); }
.riga-swipe .davanti { position: relative; z-index: 1; background: var(--gruppo); transition: transform .25s cubic-bezier(.2, .9, .3, 1); touch-action: pan-y; }
.gruppo.con-icone .riga-swipe .davanti { --rientro: 60px; }
.riga-swipe .azione-cancella { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0; background: var(--rosso); color: #fff; font: 600 var(--t-piccolo) var(--font); cursor: pointer;
  text-align: right; padding: 0 18px 0 0; visibility: hidden; }
.riga-swipe.aperta .azione-cancella, .riga-swipe.muove .azione-cancella { visibility: visible; }
.riga-swipe.pieno .azione-cancella { padding-right: 24px; }
.btn.rosso-pieno { background: var(--rosso); color: #fff; }
/* Nuovo controllo */
.segmenti.quattro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; width: 100%; }
.segmenti.cinque { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
.segmenti.quattro button, .segmenti.cinque button { padding: 6px 4px; min-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-controllo .orari { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.giorni-sett { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.giorni-sett .giorno { min-height: 44px; border: 0; border-radius: 10px; background: var(--gruppo2); color: var(--testo); font-weight: 600; cursor: pointer; }
.giorni-sett .giorno.scelto { background: var(--blu); color: #fff; }
.riga-canali { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.riga-canali .etichetta { font-size: var(--t-piccolo); color: var(--tenue); }
.tasti-canali { display: flex; gap: 6px; }
.tasti-canali .btn { padding: 0 12px; }
.canali { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.canali .categoria { grid-column: 1 / -1; font-size: var(--t-nota); color: var(--tenue); text-transform: uppercase; letter-spacing: .02em; margin-top: 4px; }
.quadratino { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border: 1.5px solid transparent; border-radius: 12px; background: var(--gruppo2);
  color: var(--testo); font: 500 var(--t-piccolo) var(--font); text-align: left; cursor: pointer; min-width: 0; }
.quadratino .nome-canale { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quadratino .spunta-q { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--tenue); display: grid; place-items: center; color: transparent; }
.quadratino .spunta-q svg { width: 13px; height: 13px; }
.quadratino.scelto { background: var(--blu-velo); border-color: var(--blu); }
.quadratino.scelto .spunta-q { background: var(--blu); border-color: var(--blu); color: #fff; }
.form-controllo .note { min-height: 84px; }
.riepilogo { background: var(--gruppo2); border-radius: var(--raggio-lista); padding: 12px 14px; margin: 4px 0 12px; font-size: var(--t-piccolo); line-height: 1.35; overflow-wrap: anywhere; }
.riepilogo b { display: block; color: var(--tenue); font-size: var(--t-nota); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }


/* ---------- v7 (18/10): widget, browser per i link, gruppi server, foto (tieni premuto, vista singola), Face ID ---------- */
/* le foto dentro i widget non prendono mai il dito (trascinamento nativo / menu di iOS): il widget si sposta sempre */
.widget img { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.widget, .widgets { -webkit-touch-callout: none; }
/* Browser per i link: righe con la spunta come Impostazioni di iOS */
.browser-scelta .spunta-b, .scelta-gruppo .spunta-b { color: var(--blu); display: grid; flex: none; }
.spunta-b svg { width: 18px; height: 18px; }
/* Server da usare in gruppi */
.gruppo-server + .gruppo-server { margin-top: 12px; }
.testa-gruppo { padding-top: 6px; padding-bottom: 6px; }
.apri-gruppo, .sposta-server { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 4px 0; color: var(--testo); text-align: left; cursor: pointer; font: inherit; min-height: 44px; }
.apri-gruppo .freccia { display: grid; color: var(--tenue); transition: transform .2s; width: 29px; place-items: center; flex: none; }
.apri-gruppo .freccia svg { width: 16px; height: 16px; }
.testa-gruppo.aperto .freccia { transform: rotate(90deg); }
.riga-server { padding-top: 2px; padding-bottom: 2px; }
.interruttore:indeterminate { background: rgba(48, 209, 88, .45); }
.interruttore:indeterminate::after { transform: translateX(10px); }
.elenco-gruppi .cella { gap: 8px; }
.elenco-gruppi .btn.barretta { flex: none; }
.nome-gruppo { margin: 4px 0 6px; }
/* FOTO: tenere premuto = nitida; nessun menu di iOS */
.tessera, .tessera img, .vs, .vs img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.sfoca .tessera.nitida img { filter: none; transform: none; }
/* vista singola (galleria) */
.vs { position: fixed; inset: 0; z-index: 30; background: #000; display: flex; flex-direction: column; animation: compari .2s; touch-action: none; overflow: hidden; }
.vs.chiude { animation: veloOff .18s ease-in forwards; }
.vs-testa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(var(--sopra-sicuro) + 6px) 12px 6px; gap: 8px; z-index: 2; }
.vs-testa .vs-mostra { justify-self: start; min-height: 48px; padding: 0 16px; font-size: var(--t-corpo); }
.vs-conta { font-size: var(--t-piccolo); font-weight: 600; font-variant-numeric: tabular-nums; }
.vs-chiudi { justify-self: end; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(60, 60, 67, .6); color: #fff; font-size: 16px; cursor: pointer; }
.vs-nastro { flex: 1; min-height: 0; display: flex; transform: translateX(-100%); will-change: transform; }
/* v9 (Stefano 18/10, iPhone: "rettangolo" in basso a destra): su WebKit filter: blur() su una foto grande (es. 1088×1928)
   si disegna a TESSERE e una tessera esce piu scura = un riquadro sopra la foto. Ora niente filter qui: la versione
   sfocata e una copia piccolissima della foto disegnata su canvas (sfocataDi) e ingrandita dal browser = morbida, senza
   blocchi, uguale su iPhone e PC. Nitida (tieni premuto / Mostra tutto) = la foto vera. */
.vs-foto { flex: 0 0 100%; position: relative; min-width: 0; overflow: hidden; }
.vs-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.vs-foto .vs-sfocata { display: none; }
.vs.sfoca .vs-foto .vs-vera { visibility: hidden; }
.vs.sfoca .vs-foto .vs-sfocata { display: block; }
.vs.sfoca .vs-foto.nitida .vs-vera { visibility: visible; }
.vs.sfoca .vs-foto.nitida .vs-sfocata { display: none; }
.vs-piede { padding: 10px 16px calc(14px + var(--sotto-sicuro)); display: grid; gap: 8px; z-index: 2; }
.vs-aiuto { color: var(--tenue); font-size: var(--t-nota); text-align: center; }
/* v29: VIDEO INTERO nell'app. Il video copre la foto; sfocato = la tela piccolissima ingrandita (come le foto, niente
   filter: blur), nitido tenendo premuto o con "Mostra tutto". Tasti 48 pt: Guarda/Pausa + Audio affiancati, Discord sotto. */
.vs-foto video, .vs-foto canvas.vs-sfocata-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; background: #000; }
.vs-foto canvas.vs-sfocata-video { display: none; }
.vs .vs-foto.con-video > img { display: none; }
.vs.sfoca .vs-foto video { visibility: hidden; }
.vs.sfoca .vs-foto canvas.vs-sfocata-video { display: block; }
.vs.sfoca .vs-foto.nitida video { visibility: visible; }
.vs.sfoca .vs-foto.nitida canvas.vs-sfocata-video { display: none; }
.vs-riga-video { display: flex; gap: 8px; }
.vs-riga-video .btn { flex: 1; min-height: 48px; }
.vs-riga-video .vs-audio { flex: 0 0 auto; padding: 0 14px; }
.vs-discord { min-height: 44px; font-size: var(--t-piccolo); }
.avviso .apri-link, .avviso .aggiorna-ora { min-height: 44px; }
.vs-scegli { width: 100%; }

/* ---------- FASE 2 (18/10): CHAT (elenco stile WhatsApp, conversazione stile iMessage) ---------- */
.cerca-chat { margin: 2px 0 10px; -webkit-appearance: none; appearance: none; }
.filtri-chat { margin-bottom: 6px; }
.ordine-chat { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-size: var(--t-nota); margin: 0 4px 8px; }
.ordine-chat .testo-btn { font-size: var(--t-nota); padding: 0 8px; min-height: 44px; color: var(--tenue); font-weight: 500; }   /* v24: >= 44 pt (Apple HIG) */
.ordine-chat .testo-btn.attivo { color: var(--accento); font-weight: 700; }
.ordine-chat .testo-btn:disabled { opacity: .45; }
.chat-elenco .riga-chat { align-items: center; }
/* v24 (sb-design #3, come Telegram): l'elenco delle chat a tutta larghezza, senza riquadro */
.lista-chat .gruppo.chat-elenco { border-radius: 0; margin: 0 calc(-1 * var(--lato)); background: transparent; }
.riga-nome { display: flex; align-items: center; gap: 6px; min-width: 0; }
.riga-nome b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.riga-nome .ora { margin-left: auto; font-size: var(--t-nota); }
.chip.mini { font-size: 11px; padding: 0 6px; }
.riga-anteprima { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-thea { color: var(--accento); }
.pallino-richiesta { background: var(--c-richieste) !important; width: 10px; height: 10px; }
.chat-elenco .riga-swipe .davanti { --rientro: 68px; background: var(--sfondo); }
.azione-silenzio { background: var(--grigio-schede) !important; }
/* v24 (come Telegram): i messaggi stanno ATTACCATI IN BASSO vicino alla barra (min-height messa da app.js) */
.chat-fan { padding-bottom: 8px; justify-content: flex-end; }
/* barra di scrittura in basso, come iMessage / Telegram. v24: dentro la chat la tab bar è nascosta e la barra di
   scrittura scende fino al fondo; lo spazio sotto i messaggi = la sua altezza vera (--comp-alto, da app.js) */
#vista:has(.compositore) { padding-bottom: 230px; }
body.in-chat #vista:has(.compositore) { padding-bottom: var(--comp-alto, 150px); }
body.in-chat .schede { display: none; }
body.in-chat .scorri { padding-bottom: 0; }
.compositore { position: fixed; left: 0; right: 0; bottom: calc(var(--barra) + var(--sotto-sicuro)); z-index: 9; padding: 8px var(--lato) 10px;
  background: var(--vetro); -webkit-backdrop-filter: var(--sfocatura); backdrop-filter: var(--sfocatura); box-shadow: 0 -.5px 0 var(--separatore); }
body.in-chat .compositore { bottom: 0; padding: 4px var(--lato) calc(8px + var(--sotto-sicuro)); }
.compositore .dentro { max-width: 700px; margin: 0 auto; display: grid; gap: 6px; }
.stato-bozza { display: flex; align-items: center; gap: 6px; }
.stato-bozza:empty { display: none; }
/* v24: tasti rapidi in UNA riga che scorre di lato (M3 suggestion chips); zona di tocco 44 px con il padding */
.rapidi { display: flex; flex-wrap: nowrap; gap: 6px; scroll-snap-type: none; margin: 0 calc(-1 * var(--lato)); padding: 0 var(--lato); }
.chip-btn { flex: none; border: 0; border-radius: 999px; background: var(--gruppo2); color: var(--testo); font: 600 13px var(--font); padding: 0 12px; min-height: 44px; cursor: pointer;
  background-clip: padding-box; border-top: 5px solid transparent; border-bottom: 5px solid transparent; white-space: nowrap; }
.chip-btn.suggerisci { background: var(--accento-velo); }
.chip-btn:disabled { opacity: .4; }
.riga-scrivi { display: flex; align-items: flex-end; gap: 8px; }
.campo-chat { flex: 1; min-width: 0; min-height: 40px; max-height: 160px; resize: none; border: 1.5px dashed var(--st-bozza); border-radius: 20px; background: var(--gruppo); color: var(--testo);
  padding: 9px 14px; font: 17px/1.3 var(--font); outline: none; }
.campo-chat:focus { border-style: solid; }
.campo-chat:disabled { border-color: var(--separatore); opacity: .6; }
.invia-chat { min-height: 40px; border-radius: 20px; padding: 0 16px; flex: none; }
.silenzio-chat { min-height: 36px; padding: 0 14px; font-size: var(--t-piccolo); border-radius: 999px; }
.scheda-fan .gruppo + .piede { margin-bottom: 4px; }
.segmenti.quattro.filtri-chat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filtri-chat button { font-size: 13px; padding: 6px 2px; }
.segmenti.quattro.filtri-chat button { white-space: normal; line-height: 1.1; text-overflow: clip; letter-spacing: -.01em; }


/* =====================================================================================================================
   v8 (18/10/2026) — correzioni dall'iPhone 16 di Stefano (393×852) + principi di Material Design 3: motion (token M3,
   https://m3.material.io/styles/motion/easing-and-duration/tokens-specs), zone da toccare >= 48 px
   (https://m3.material.io/foundations/designing/structure), stati premuto 10% / spento 38%
   (https://m3.material.io/foundations/interaction/states/state-layers), barra di navigazione a voci uguali
   (https://m3.material.io/components/navigation-bar/guidelines). Tab bar e sfondo fisso stanno in cima al file.
   ===================================================================================================================== */
/* FOTO (v8): la scelta si vede dal bordo viola + numero. Le foto sfocate sono un po' ingrandite: il bordo della
   sfocatura non fa piu l'alone scuro ai lati */
.sfoca .tessera img { transform: scale(1.12); }
.barra-foto .piede { flex: 1; min-width: 0; }

/* "Apri i link con  Brave ›" */
.cella .valore-browser { color: var(--tenue); }
.browser-elenco .cella { min-height: 48px; }
.browser-elenco .cella .testo { font-size: var(--t-nota); }

/* RESOCONTI di Claude (18/10 sera): testo da leggere come una nota di iOS — corpo 17 px, righe ariose, link viola */
.resoconto { background: var(--gruppo); border-radius: var(--raggio-lista); padding: 16px var(--lato) 18px; margin-top: 6px; font-size: var(--t-corpo); line-height: 1.45; overflow-wrap: anywhere; }
.resoconto-titolo { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; }
.resoconto-ora { color: var(--tenue); font-size: var(--t-nota); margin: 4px 0 12px; }
.resoconto h3 { font-size: 19px; margin: 18px 0 6px; font-weight: 700; }
.resoconto h4 { font-size: var(--t-corpo); margin: 14px 0 4px; font-weight: 600; color: var(--tenue); }
.resoconto p { margin: 0 0 10px; }
.resoconto ul, .resoconto ol { margin: 0 0 10px; padding-left: 22px; }
.resoconto li { margin: 3px 0; }
.resoconto li.sotto { margin-left: 18px; }
.resoconto blockquote { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--accento); background: var(--gruppo2); border-radius: 8px; color: var(--testo); }
.resoconto blockquote p:last-child { margin-bottom: 0; }
.resoconto hr { border: 0; border-top: 1px solid var(--gruppo2); margin: 14px 0; }
.resoconto code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; background: var(--gruppo2); border-radius: 5px; padding: 1px 5px; }
.resoconto pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; background: var(--gruppo2); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.resoconto .riga-tabella { margin: 0 0 4px; color: var(--testo); }
.link-md { color: var(--accento); text-decoration: underline; text-underline-offset: 2px; }
.telegram-riserva .corpo { white-space: normal; }

/* ---------- 18/10 sera: RESOCONTI v2 — schede separate (Note di Apple / Telegram + Material 3 per la lettura) ---------- */
.resoconto.v2 { background: none; padding: 2px 0 8px; margin-top: 0; line-height: 1.5; }
.resoconto.v2 .resoconto-titolo { font-size: 26px; line-height: 1.2; letter-spacing: -.01em; padding: 0 2px; }
.resoconto.v2 .resoconto-ora { margin: 6px 2px 14px; font-size: var(--t-piccolo); }
.resoconto-intro { background: var(--gruppo); border-radius: var(--raggio); padding: 12px 16px 2px; margin-bottom: 12px; }
.scheda-resoconto { background: var(--gruppo); border-radius: var(--raggio); margin: 0 0 12px; overflow: hidden; box-shadow: inset 4px 0 0 var(--colore); }
.scheda-resoconto > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px 10px 16px; cursor: pointer;
  -webkit-user-select: none; user-select: none; transition: background-color .25s ease-out; }
.scheda-resoconto > summary::-webkit-details-marker { display: none; }
.scheda-resoconto > summary:active { background: var(--gruppo3); transition: none; }
.icona-blocco { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 18px; line-height: 1;
  background: color-mix(in srgb, var(--colore) 22%, transparent); }
.titolo-blocco { flex: 1; min-width: 0; font-weight: 650; font-size: 17px; line-height: 1.25; }
.conta-blocco { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--gruppo2); color: var(--tenue); font-size: 13px; font-weight: 600; line-height: 22px; text-align: center; }
.scheda-resoconto .freccia { flex: none; color: var(--tenue); display: grid; transition: transform .2s cubic-bezier(.2, .9, .3, 1); }
.scheda-resoconto .freccia svg { width: 14px; height: 14px; }
.scheda-resoconto[open] .freccia { transform: rotate(90deg); }
.scheda-corpo { padding: 0 16px 8px; border-top: .5px solid var(--separatore); }
.scheda-corpo > :first-child { margin-top: 10px; }
.scheda-corpo ul, .scheda-corpo ol { padding-left: 0; list-style: none; }
.scheda-corpo li { position: relative; padding: 7px 0 7px 18px; margin: 0; }
.scheda-corpo li + li { border-top: .5px solid var(--separatore); }
.scheda-corpo ul > li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--colore); }
.scheda-corpo ol { counter-reset: n; }
.scheda-corpo ol > li { counter-increment: n; padding-left: 26px; }
.scheda-corpo ol > li::before { content: counter(n); position: absolute; left: 0; top: 8px; width: 19px; height: 19px; border-radius: 50%; background: color-mix(in srgb, var(--colore) 28%, transparent); font-size: 12px; font-weight: 700; line-height: 19px; text-align: center; }
.resoconto .codice { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; font-weight: 600; padding: 1px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--accento) 20%, transparent); color: var(--testo); white-space: nowrap; }
.punti-ok { margin: 4px 0 6px; }
.punto-ok { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; padding: 10px 0; align-items: start; }
.punto-ok + .punto-ok { border-top: .5px solid var(--separatore); }
.punto-ok .n { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--colore) 28%, transparent); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; margin-top: 1px; }
.punto-ok .testo-punto { min-width: 0; }
.scelta-ok { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.scelta-ok button { appearance: none; border: 0; min-height: 40px; border-radius: 10px; background: var(--gruppo2); color: var(--testo); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .18s ease-out, opacity .18s ease-out, background-color .18s; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.scelta-ok button:active { transform: scale(.96); opacity: .75; transition: none; }
.scelta-ok button[data-r="ok"][aria-pressed="true"] { background: var(--verde); color: #04210d; }
.scelta-ok button[data-r="no"][aria-pressed="true"] { background: var(--rosso); color: #fff; }
.punto-ok.inviando .scelta-ok { opacity: .6; pointer-events: none; }
.nota-ok { color: var(--tenue); font-size: var(--t-nota); padding: 2px 0 6px; }

/* ---------- 18/10 sera: PRESSIONE come un'app nativa (iOS HIG + Telegram; Material 3 state layer "pressed") ----------
   righe: grigio SUBITO al tocco e sfuma via al rilascio (come Impostazioni di iOS); tasti: si attenuano e si
   rimpiccioliscono un poco mentre il dito e giu, tornano morbidi. Niente evidenziazione blu di WebKit (sopra, *). */
.indietro:active { opacity: .45; transition: none; }
body.senza-titolo-grande .titolo-grande h1 { display: none; }
/* 19/10 (Stefano: "non capisco come si selezionano"): cerchio in alto a destra come in Foto di iOS: vuoto = da
   scegliere, blu pieno col ✓ = scelta; una riga di aiuto la prima volta ("Ho capito" la toglie su questo telefono) */
.tessera .segno-scelta { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .95);
  background: rgba(0, 0, 0, .25); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); display: grid; place-items: center; color: #fff; pointer-events: none; transition: transform .12s ease-out; }
.tessera .segno-scelta svg { width: 14px; height: 14px; }
.tessera.scelta .segno-scelta { background: var(--blu-ios, #0A84FF); border-color: #fff; transform: scale(1.06); }
.aiuto-foto { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--gruppo); font-size: var(--t-piccolo); line-height: 1.35; }
.aiuto-foto > div { flex: 1; min-width: 0; }
.vs-foto.piena .vs-vera { image-rendering: auto; }

/* ---------- v26 (19/10): conferma dell'accensione di un pod ---------- */
.banner-pod { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--raggio-lista); background: var(--gruppo); box-shadow: inset 0 0 0 1px var(--arancio); }
.banner-pod .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.banner-pod small { color: var(--testo-2, #98989f); font-size: var(--t-nota); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tasti-conferma-pod { display: grid; gap: 12px; margin-top: 18px; }
.tasti-conferma-pod .btn { min-height: 56px; font-size: 19px; font-weight: 600; }
.conferma-pod .valore { white-space: normal; text-align: right; }
/* ---------- v26 (19/10): esperienza d'uso (funzioni prima, il design lo rifiniscono Stefano e Claude) ---------- */
/* pallino blu dei NON letti a sinistra della riga + titolo in grassetto (Mail/WhatsApp) */
.pallino-blu { position: absolute; left: 5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: transparent; pointer-events: none; }
.non-letto > .pallino-blu { background: var(--blu-ios, #0A84FF); }
/* swipe a destra: tasto blu "Non letto"/"Letto" sotto la riga, a sinistra */
.riga-swipe .azione-letto { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0; background: var(--blu-ios, #0A84FF); color: #fff; font: 600 var(--t-piccolo) var(--font);
  text-align: left; padding: 0 0 0 18px; visibility: hidden; cursor: pointer; z-index: 0; }
.riga-swipe.verso-dx .azione-letto, .riga-swipe.aperta-dx .azione-letto { visibility: visible; }
.riga-swipe.verso-dx .azione-cancella, .riga-swipe.aperta-dx .azione-cancella { visibility: hidden; }
/* campanella in Home (Attivita) col numero */
.campanella { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 44px; }
.campanella svg { width: 22px; height: 22px; }
.campanella .contatore { top: -2px; left: auto; right: -4px; }
.n-filtro { color: var(--blu-ios, #0A84FF); font-weight: 700; }
.segmenti.tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-bottom: 6px; }
.segmenti.tre button { padding: 6px 4px; min-height: 44px; white-space: nowrap; }
.lista-attivita .riga-attivita, .lista-problemi .cella { padding-left: 22px; }
/* banner dentro l'app al posto della notifica (app davanti): in alto, 4 s, tocco = la cosa, swipe su = via */
.banner-interno { position: fixed; left: 8px; right: 8px; top: calc(var(--sopra-sicuro) + 6px); z-index: 45; display: block; padding: 12px 14px; border-radius: 14px;
  background: rgba(44, 44, 46, .96); color: var(--testo); font-size: var(--t-piccolo); font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: compari .2s ease-out; }
.banner-grave { box-shadow: inset 0 0 0 1px var(--rosso); }
/* ---------- v28 (19/10): fogli già scelti, foto che riprovano da sole, tasti grandi, galleria con ricerca, widget nuovi ---------- */
/* segnaposto mentre la foto arriva: la tessera pulsa piano (come le anteprime di Foto/Telegram), niente scritte */
.tessera:has(> img.in-carica), .miniature img.in-carica, .w-foto img.in-carica { animation: respiro 1.4s ease-in-out infinite; }
.tessera > img.in-carica, .tessera > img.non-arrivata { opacity: 0; }
/* video senza fotogramma: riquadro scuro col ▶ (mai "non disponibile") */
.tessera:has(> img.non-arrivata) .play { background: rgba(255, 255, 255, .18); }
/* foglio già scelto: le scelte restano col ✓ blu, le altre spente (.chiuso .tessera:not(.scelta) img) */
.chiuso .tessera .segno-scelta { opacity: .95; }
.foglio-scelto .chip { color: var(--blu); background: var(--blu-velo); }
/* tasti del foglio: alti 48 (>= 44 pt di Apple, 48 dp di Material), in basso vicino al pollice */
.btn.tasto-grande { min-height: 48px; padding: 0 12px; font-size: var(--t-corpo); }
.comandi .mostra-foto[aria-pressed="true"] { background: var(--gruppo3); }
.barra-foto .tasto-sfoca { min-height: 48px; }
/* galleria dei widget: campo di ricerca in alto (come "Cerca widget" di iOS) */
.gal-cerca { position: sticky; top: 0; z-index: 2; padding: 2px 0 10px; background: var(--gruppo, #1C1C1E); }
.cerca-widget { width: 100%; min-height: 44px; -webkit-appearance: none; appearance: none; }
.gal-nessuno { padding: 28px 16px; }
/* widget Problemi / Resoconti: bollino coi non letti nella testata, righe nuove in grassetto */
.w-bollino { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--badge); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; flex: none; }
.w-bollino.blu { background: var(--blu); }
.w-riga.nuovo .w-a { font-weight: 700; }
.punto.blu { background: var(--blu); }

/* v30 (20/10): Reference — le Inspo da scegliere per il pod (stessa griglia dei fogli) */
.cerca-ref { width: 100%; min-height: 44px; -webkit-appearance: none; appearance: none; margin: 2px 0 8px; }
.filtro-ref { margin: 0 0 10px; }
.richiesta-ref { background: rgba(94, 92, 230, .22); }
.tessera.in-arrivo { opacity: .85; }
.tessera.in-arrivo .num { background: rgba(94, 92, 230, .85); }
.tessera .togli-agg { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 16px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 15px; line-height: 32px; text-align: center; cursor: pointer; }
.tessera.inviata .num { background: rgba(48, 209, 88, .85); }

/* v32.1 (20/10): GENERATE come i fogli (stessa griglia, stessa ✓); qui solo il segno delle foto nere */
.tessera .chip-nera { position: absolute; top: 6px; right: 6px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--rosso); color: #fff; font-weight: 700; font-size: 11px; line-height: 22px; }
/* v34 (20/10): stato dei post del Calendario a colori come iOS (le righe del piano a lista sono state tolte nella v44) */
.chip.stato-piano.proposto { background: rgba(255, 214, 10, .22); color: var(--testo); }
.chip.stato-piano.ok, .chip.stato-piano.programmato { background: var(--accento-velo); color: var(--testo); }
.chip.stato-piano.uscito { background: rgba(48, 209, 88, .22); color: var(--testo); }
.chip.stato-piano.richiesto { background: rgba(10, 132, 255, .25); color: var(--testo); }
/* v35 (20/10): MODELLI nuovi — una scheda per modello, anteprime in riga, scelta con la stessa spunta dei fogli */
.lista-mod { display: flex; flex-direction: column; gap: 12px; }
.scheda-mod { position: relative; background: var(--gruppo); border-radius: 14px; padding: 12px; cursor: pointer; box-shadow: 0 0 0 0 transparent; transition: box-shadow .15s ease-out; }
.scheda-mod.scelta { box-shadow: 0 0 0 3px var(--accento); }
.lista-mod.chiuso .scheda-mod { cursor: default; }
.testa-mod { display: flex; align-items: flex-start; gap: 10px; }
.testa-mod .corpo { flex: 1; min-width: 0; }
.testa-mod .nome b { overflow-wrap: anywhere; }
.testa-mod .segno-scelta { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); display: grid; place-items: center; color: #fff; pointer-events: none; }
.testa-mod .segno-scelta svg { width: 14px; height: 14px; }
.scheda-mod.scelta .segno-scelta { background: var(--blu-ios, #0A84FF); border-color: #fff; }
.chip-mod { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mod-foto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.mod-foto .mini-mod { aspect-ratio: 3 / 4; border-radius: 8px; }
.mod-foto.sfoca .tessera img { filter: blur(10px); transform: scale(1.12); }
.mod-foto .senza-foto { grid-column: 1 / -1; font-size: 13px; padding: 6px 0; }
.nota-mod { font-size: 12px; margin-top: 8px; overflow-wrap: anywhere; }
.scheda-mod .link-mod { margin-top: 6px; min-height: 44px; padding: 0; }
/* v36 (20/10): CALENDARIO — schede dei post (la parte alta e stata rifatta nella v40, sotto) */
.cal-num { font-size: 16px; font-weight: 700; width: 28px; height: 28px; line-height: 28px; border-radius: 14px; text-align: center; }
.cal-punti { display: flex; gap: 3px; min-height: 6px; }
.cal-punti .punto { width: 6px; height: 6px; margin: 0; }
.scheda-post { background: var(--gruppo); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.scheda-post.passata { opacity: .6; }
.riga-post { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.riga-post .chip { margin-left: auto; }
.cal-foto { width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--gruppo2); }
.cal-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-foto.vuota { display: flex; align-items: center; justify-content: center; color: var(--tenue); aspect-ratio: auto; min-height: 80px; }
.cal-didascalia { margin: 10px 2px 6px; font-size: 15px; overflow-wrap: anywhere; }
.cal-tasti { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cal-tasti .btn { min-height: 48px; }
.cal-vuoto { padding: 28px 16px; }

/* v36.1 (20/10, Stefano: "un tasto solo = tutta la barra; se ne aggiungiamo un altro li dividi; il design sempre") */
.comandi .dentro > :only-child { grid-column: 1 / -1; }
/* tieni premuto su UNA foto del calendario = nitida solo lei */
.cal-foto.sfoca.nitida img { filter: none; transform: none; }
/* cambio di settimana: scivolata leggera di lato (niente attesa: i dati sono gia in memoria) */
/* v42: il nuovo giorno/settimana entra TUTTO dal lato (come le pagine di iOS), non una piccola scossa sul posto */
@keyframes entraDx { from { transform: translateX(60%); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes entraSx { from { transform: translateX(-60%); opacity: .4; } to { transform: none; opacity: 1; } }
.entra-dx { animation: entraDx .24s cubic-bezier(.2, .9, .25, 1); }
.entra-sx { animation: entraSx .24s cubic-bezier(.2, .9, .25, 1); }
@media (prefers-reduced-motion: reduce) { .entra-dx, .entra-sx { animation: none; } }
.cal-foto { cursor: zoom-in; }
.cal-foto.sfoca img { filter: blur(10px); transform: scale(1.12); }

/* v40 (20/10, Stefano: "redesign: caselle troppo lunghe, swipe, il mese da sopra"): come il Calendario dell'iPhone */
.cal-blocco { margin: 0 0 6px; touch-action: pan-y; }
.cal-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-mese-btn { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--testo); font-size: 22px; font-weight: 700; padding: 0; min-height: 44px; cursor: pointer; }
.cal-mese-btn .freccina { color: var(--accento); font-size: 15px; }
.cal-frecce { display: flex; align-items: center; gap: 2px; }
.cal-freccia { border: 0; background: none; color: var(--accento); font-size: 26px; line-height: 1; width: 40px; min-height: 44px; padding: 0; cursor: pointer; }
.cal-oggi { border: 0; background: var(--gruppo); color: var(--accento); font-size: 14px; font-weight: 600; border-radius: 16px; padding: 0 12px; min-height: 32px; cursor: pointer; }
.cal-nomi { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; font-weight: 600; color: var(--tenue); margin: 2px 0 2px; }
.cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; transform-origin: top; }
.cal-cella { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--testo); min-height: 50px; padding: 2px 0; border-radius: 12px; cursor: pointer; }
.cal-cella .cal-num { font-size: 17px; font-weight: 600; width: 32px; height: 32px; line-height: 32px; border-radius: 16px; text-align: center; }
.cal-cella.scelto .cal-num { background: var(--testo); color: var(--sfondo); }
.cal-cella.oggi .cal-num { color: var(--rosso); }
.cal-cella.oggi.scelto .cal-num { background: var(--rosso); color: #fff; }
.cal-cella.fuori { opacity: .35; }
.cal-cella .cal-punti { min-height: 6px; }
.cal-mese-aperto .cal-cella { min-height: 46px; }
@keyframes apreMese { from { transform: scaleY(.25); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes chiudeMese { from { transform: scaleY(2.4); opacity: .3; } to { transform: none; opacity: 1; } }
.cal-griglia.apre { animation: apreMese .26s cubic-bezier(.2, .9, .25, 1); }
.cal-griglia.chiude { animation: chiudeMese .26s cubic-bezier(.2, .9, .25, 1); }
.cal-corpo { min-height: 50vh; touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { .cal-griglia.apre, .cal-griglia.chiude { animation: none; } }

/* =====================================================================================================================
   v45 PROVA M3 (20/10, Stefano: "avvicinarci a M3 di Google"; ispezione sb-ispettore, Designer): ASPETTO Material 3,
   COMPORTAMENTO iOS (swipe, titolo grande, liste, foglio dal basso restano). Tutto in questo blocco: per tornare
   indietro si toglie il blocco (~~_copia_v44_prima_di_M3_20-10~~: nel Cestino il 21/10, M3 tenuto da Stefano).
   Fonti: ruoli colore https://m3.material.io/styles/color/roles · raggi https://m3.material.io/styles/shape/corner-radius-scale
   (token: material-web _md-sys-shape.scss 4/8/12/16/28/pieno) · barra https://m3.material.io/components/navigation-bar/specs
   · tasti https://m3.material.io/components/buttons/specs · segmenti https://m3.material.io/components/segmented-buttons/specs
   Tonalità ricavate dal viola del logo #8B7CFF (tema scuro). Lo sfondo resta NERO (OLED + foto): unica deroga voluta.
   ===================================================================================================================== */
:root {
  --md-surface-container-low: #1C1B21;
  --md-surface-container: #211F27;
  --md-surface-container-high: #2B2931;
  --md-surface-container-highest: #36343C;
  --md-on-surface: #E6E1E9;
  --md-on-surface-variant: #CAC4D2;
  --md-outline: #948F9C;
  --md-outline-variant: #49454F;
  --md-primary: #C9BFFF;
  --md-on-primary: #2F2378;
  --md-primary-container: #463A90;
  --md-on-primary-container: #E5DEFF;
  --md-secondary-container: #4A4460;
  --md-on-secondary-container: #E8DEF8;
  --md-tertiary-container: #633B48;
  --md-on-tertiary-container: #FFD8E4;
  --md-error: #FFB4AB;
  --md-error-container: #93000A;
  --md-on-error-container: #FFDAD6;
  /* i nomi di sempre puntano ai ruoli M3: app.js e il resto del CSS non cambiano */
  --gruppo: var(--md-surface-container);
  --gruppo2: var(--md-surface-container-high);
  --gruppo3: var(--md-surface-container-highest);
  --separatore: var(--md-outline-variant);
  --testo: var(--md-on-surface);
  --tenue: var(--md-on-surface-variant);
  --tenue2: var(--md-outline);
  --accento: var(--md-primary);
  --accento-pieno: var(--md-primary);
  --accento-testo: var(--md-on-primary);
  --accento-velo: rgba(201, 191, 255, .22);
  --bolla-fan: var(--md-surface-container-high);
  --bolla-thea: var(--md-primary-container);
  /* raggi: scala M3 (s 8 · m 12 · l 16 · xl 28 · pieno) */
  --raggio: 16px;
  --raggio-lista: 16px;
  --raggio-tasto: 9999px;
  --w-raggio: 28px;
}
/* barra di navigazione M3: pillola colorata dietro l'icona della scheda attiva, etichetta in grassetto. La barra resta
   alta 49 pt come su iOS (misure dell'iPhone provate v25-v27): pillola 56×28 al posto dei 64×32 di M3 */
.schede a { padding-top: 5px; gap: 2px; }
.schede a svg { width: 56px; height: 28px; padding: 2px 16px; border-radius: 14px; transition: background .25s var(--m3-standard); }
.schede a.attiva { color: var(--md-on-surface); font-weight: 700; }
.schede a.attiva svg { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.contatore { left: calc(50% + 10px); top: 2px; }
/* tasti: a pillola; pieno = primario M3 (testo scuro), gli altri tonali */
.btn { border-radius: 9999px; }
.btn:not(.primario):not(.piano):not(.rosso-pieno) { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn:active { opacity: 1; transform: scale(.97); filter: brightness(1.15); }
.btn.primario { background: var(--md-primary); color: var(--md-on-primary); }
.btn.piano { color: var(--md-primary); }
/* v46 (Stefano: "questo contorno con il nero non mi piace"): ~~segmenti M3 contornati~~ -> gruppo di tasti M3
   Expressive "connected": binario PIENO (niente bordo), la scelta è una pillola tonale dentro, che scivola */
.segmenti { background: var(--md-surface-container-high); border-radius: 9999px; padding: 4px; box-shadow: none; gap: 2px; }
.segmenti button { border-radius: 9999px; min-height: 40px; color: var(--md-on-surface-variant); transition: background-color .2s var(--m3-standard), color .2s var(--m3-standard); }
.segmenti button.attivo { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; }
.segmenti.quattro, .segmenti.cinque, .segmenti.tre { gap: 2px; }
/* v46: ordine delle sezioni di Foto (Modifica -> ≡ da trascinare, come le liste di iOS) */
.blocco-sezioni .barra-foto { margin-top: 0; }
.tasto-ordina { min-height: 36px; padding: 0 12px; font-size: var(--t-piccolo); }
.sezioni-foto.ordina { overflow: visible; }
.sezioni-foto .in-ordine { cursor: default; }
.maniglia-ordine { flex: none; width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; color: var(--tenue); touch-action: none; cursor: grab; }
.maniglia-ordine svg { width: 22px; height: 22px; }
.sezioni-foto .cella.trascinata { z-index: 5; background: var(--md-surface-container-highest); border-radius: 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); transition: none; }
.sezioni-foto .cella.trascinata::before, .sezioni-foto .cella.trascinata + .cella::before { opacity: 0; }
/* =====================================================================================================================
   v48 M3 EXPRESSIVE (20/10, Stefano: "funzioni del genere con uno stile così" — m3.material.io; "fai tutto")
   ===================================================================================================================== */
/* 1. BARRA DI TASTI FLUTTUANTE (https://m3.material.io/components/toolbars): una pillola che galleggia sopra le foto
   ~~barra piatta col vetro a tutta larghezza~~. I tasti stanno in UNA riga: uno solo = tutta la pillola. */
.comandi { left: 12px; right: 12px; bottom: calc(var(--barra) + var(--sotto-sicuro) + 10px); padding: 8px; border-radius: 32px;
  background: #2B2931; box-shadow: 0 8px 28px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(255, 255, 255, .06);
  /* v58 (Stefano: "molto più ritardo"): ~~vetro (backdrop-filter) sopra la griglia che scorre~~ = colore PIENO. Su iPhone lo
     sfocato su un elemento fisso sopra una zona che scorre è pesante e su iOS 26 dà guasti (bug WebKit 289149) */
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.comandi .dentro { display: flex; flex-wrap: wrap; gap: 8px; }
.comandi .dentro > * { flex: 1 1 auto; min-width: 0; }
.comandi .dentro > .largo, .comandi .dentro > .primario { flex-grow: 1.6; }
.comandi .dentro > .info { flex: 1 1 100%; }
.comandi .dentro > .a-capo { flex: 0 0 100%; height: 0; margin-bottom: -8px; }      /* v50: seconda riga di tasti (Reference) */
.comandi .btn { min-height: 48px; padding: 0 10px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vista:has(.comandi) { padding-bottom: 170px; }
/* 2. INDICATORE DI CARICAMENTO A FORME (https://m3.material.io/components/loading-indicator) */
.carica-m3 { width: 48px; height: 48px; display: grid; place-items: center; }
.carica-m3 .forma-m3 { width: 38px; height: 38px; background: var(--md-primary); clip-path: var(--forma-biscotto9); will-change: transform, clip-path; }
.carica-m3.contenuto { width: 44px; height: 44px; border-radius: 50%; background: var(--md-secondary-container); }
.carica-m3.contenuto .forma-m3 { width: 30px; height: 30px; background: var(--md-on-secondary-container); }
.caricamento-m3 { display: grid; place-items: center; min-height: 38vh; }
/* tira giù: la forma cresce col dito, poi gira e cambia forma (i raggi di iOS sono nascosti) */
.tira svg { display: none; }
.tira .carica-m3 { transform: scale(calc(.35 + .65 * var(--tiro, 0))) rotate(calc(var(--tiro, 0) * 200deg)); transition: transform .12s ease-out; }
.tira.pronto .carica-m3, .tira.gira .carica-m3 { transform: scale(1); transition: transform .3s var(--molla); }
/* 3. RICERCA A PILLOLA + FILTRI A CHIP (https://m3.material.io/components/search · /components/chips) */
.cerca-m3 { position: relative; display: block; margin: 2px 0 12px; }
.cerca-m3 .lente { position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--md-on-surface-variant); pointer-events: none; }
.cerca-m3 .lente svg { width: 22px; height: 22px; display: block; }
.cerca-m3 .cerca-chat { margin: 0; min-height: 56px; border-radius: 28px; padding: 0 20px 0 52px; background: var(--md-surface-container-high); font-size: var(--t-corpo); }
.chip-filtri { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 calc(-1 * var(--lato)) 10px; padding: 0 var(--lato); touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.chip-filtri::-webkit-scrollbar { display: none; }
.chip-filtro { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--md-surface-container-high); color: var(--md-on-surface-variant); font: 600 14px/1 var(--font); white-space: nowrap;
  transition: background-color .2s var(--m3-standard), border-radius .3s var(--molla), padding .2s var(--m3-standard); }
.chip-filtro.attivo { background: var(--md-secondary-container); color: var(--md-on-secondary-container); padding-left: 10px; border-radius: 18px; }
.chip-filtro.attivo::before { content: ""; width: 16px; height: 16px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17 19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17 19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.chip-filtro .n-filtro { color: inherit; opacity: .8; }
/* 4. FORME ESPRESSIVE (https://m3.material.io/styles/shape/overview-principles): avatar dei fan a "biscotto" da 9,
   icone delle sezioni a "biscotto" da 4 (forme calcolate in app.js, --forma-*) */
.avatar { border-radius: 0; clip-path: var(--forma-biscotto9); }
.qi { border-radius: 0; clip-path: var(--forma-biscotto4); width: 32px; height: 32px; }
/* 5. TASTI "A MOLLA" (M3 Expressive, motion physics https://m3.material.io/styles/motion/overview): premuti si
   stringono e gli angoli si squadrano, lasciati tornano a pillola con un piccolo rimbalzo */
.btn { transition: border-radius .4s var(--molla), transform .4s var(--molla), background-color .2s var(--m3-standard), filter .2s; }
.btn:active { border-radius: 14px; transform: scale(.95); filter: brightness(1.12); transition: border-radius .1s ease-out, transform .1s ease-out; }
.segmenti button:active, .chip-filtro:active { border-radius: 8px; transform: scale(.96); transition: border-radius .1s, transform .1s; }
.segmenti button, .chip-filtro { transition: background-color .2s var(--m3-standard), border-radius .35s var(--molla), transform .35s var(--molla); }
/* la pillola della scheda attiva si ALLARGA dal centro (prima appariva e basta) */
.schede a svg { background: none !important; position: relative; z-index: 1; }
.schede a::before { content: ""; position: absolute; top: 5px; left: 50%; width: 56px; height: 28px; margin-left: -28px; border-radius: 14px;
  background: var(--md-secondary-container); transform: scaleX(.3); opacity: 0; transition: transform .45s var(--molla), opacity .15s; }
.schede a.attiva::before { transform: scaleX(1); opacity: 1; }
.schede a.attiva svg { color: var(--md-on-secondary-container); }
@media (prefers-reduced-motion: reduce) { .btn, .schede a::before, .chip-filtro { transition: none; } }
/* v56: Calendario — i post SALTATI di base non si vedono; con "Mostra" barrati e spenti */
.scheda-post.saltata { opacity: .45; }
.scheda-post.saltata .riga-post b, .scheda-post.saltata .cal-didascalia { text-decoration: line-through; }
.cal-saltati { display: block; margin: 4px auto 12px; min-height: 40px; font-size: var(--t-piccolo); color: var(--tenue); }
/* v52: Preferenze › App › Diagnosi schermo = una riga come le altre; la freccia gira quando si apre */
.riga-diagnosi .chev { transition: transform .25s var(--m3-standard); }
.riga-diagnosi.aperta .chev { transform: rotate(90deg); }
.diagnosi-schermo { margin: 8px 0 0; padding: 12px 14px; background: var(--gruppo); border-radius: 16px; }
.testo-diagnosi { margin: 0; white-space: pre-wrap; font-size: 12px; color: var(--tenue); }
/* titolo piccolo in alto: mai sopra al tasto Indietro ("‹ Generate") */
.titolo-piccolo { max-width: min(60vw, calc(100vw - 230px)); }
/* chip M3: angoli da 8, colori tonali */
.chip { border-radius: 8px; padding: 3px 10px; background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); font-weight: 600; }
.chip.accento { background: var(--md-primary-container); color: var(--md-on-primary-container); }
/* widget = card M3 "filled": spazi su multipli di 4, allarmi col FONDO tonale invece del filo */
.widget { padding: 16px; }
.widget.allarme { box-shadow: none; background: var(--md-tertiary-container); }
.widget.allarme-rosso { box-shadow: none; background: var(--md-error-container); }
.banner-pod { border-radius: 16px; padding: 14px 16px; }
.banner-grave { box-shadow: none; background: var(--md-error-container); color: var(--md-on-error-container); }
.banner-grave small { color: var(--md-on-error-container); opacity: .85; }
/* campi e liste: stessi raggi */
.campo { border-radius: 12px; background: var(--md-surface-container-highest); }
.scheda-post, .scheda-mod { border-radius: 16px; }