/* ═══════════════════════════════════════════════════════════════════════════
   PORTALE CLIENTI — foglio di stile
   File: dashboard/public/portale/portale.css — nuovo il 4 agosto 2026

   Pensato PRIMA per il telefono: è lì che il cliente lo aprirà, in palestra,
   con una mano sola. Sul computer si allarga e si centra.
   Volutamente diverso dal CRM: qui deve sembrare un'app, non uno strumento
   di lavoro. Sfondo scuro elegante sull'accesso, chiaro dentro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La tavolozza del portale, allineata al logo il 5/08/2026.
   Stessi colori esatti del CRM: il cliente e il preparatore devono vedere lo
   stesso marchio, non due verdi diversi. Il verde è campionato dal logo
   (#647855). Vedi il commento lungo in crm/src/styles/main.css. */
:root{
  --bg:#F5F5F1;
  --surface:#FFFFFF;
  --surface-2:#FAFAF6;
  --sunk:#EFEFE9;
  --ink:#141C1A;
  --ink-soft:#4F5A52;
  --ink-faint:#8C948A;
  --line:#E4E4DC;
  --line-strong:#D0D2C6;
  --accent:#647855;
  --accent-dark:#4C5C41;
  --accent-soft:#EDF1E8;
  --dark:#141C1A;
  --danger:#A0463A;
  --danger-soft:#F6E9E6;
  --amber:#A07216;
  --amber-soft:#F7F0DF;
  /* I riquadri scuri (la card «ciao», i numeri dei progressi, le kcal).
     Sono variabili dal 26/08/2026 perché in tema scuro un quasi-nero su
     quasi-nero sparisce: lì diventano una superficie RIALZATA invece che
     abbassata. */
  --scuro-fondo:linear-gradient(150deg,#1B2724,#141C1A);
  --scuro-testo:#F2F5F3;
  --scuro-tenue:#93A29D;
  --scuro-morbido:#B9C5C0;
  --barra-alta:#141C1A;
  --barra-fondo:rgba(255,255,255,.96);

  /* ═══ I RAGGI (26/08/2026) ═══
     Richiesta di Luca: «arrotondare bordi». Non un raggio solo per tutto: la
     dimensione dell'angolo deve seguire quella dell'oggetto. Un raggio di
     18px su un pulsante alto 32 lo trasforma in una pillola per sbaglio;
     lo stesso raggio su una card di 200px si nota appena. */
  --r:18px;        /* card e riquadri */
  --r-sm:12px;     /* campi e pulsanti */
  --r-xs:9px;      /* pillole e cose piccole */

  --ombra:0 1px 2px rgba(30,38,30,.035), 0 8px 24px rgba(30,38,30,.06);
  --barra-h:64px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   IL TEMA SCURO (26 agosto 2026)

   RICHIESTA DI LUCA
   «Se serve aggiungi qualche estensione per migliorare l'estetica, la
    grafica, arrotondare bordi, aggiungere palette di colori, temi diversi o
    altro così.»

   ─────────────────────────────────────────────────────────────────────────
   PERCHÉ QUESTA È LA COSA PIÙ UTILE DELLE TRE

   Non è un vezzo: è QUANDO si usa quest'app. Il portale si apre in palestra
   fra una serie e l'altra, e quasi sempre di sera. Uno schermo bianco pieno
   in una sala poco illuminata è la ragione per cui la gente abbassa la
   luminosità al minimo e poi non legge più i numeri delle ripetizioni.

   ─────────────────────────────────────────────────────────────────────────
   TRE STATI, E IL PRIMO È «COME IL TELEFONO»

   `data-tema` sulla radice: assente = segue il telefono (che è quello che
   quasi tutti vogliono senza saperlo), «chiaro» o «scuro» = scelta esplicita.
   Il doppio blocco qui sotto serve proprio a questo: la media query vale solo
   se NON c'è una scelta contraria, così chi ha scelto il chiaro non se lo
   vede ribaltare al tramonto dal telefono.

   ⚠ IL VERDE NON È LO STESSO NEI DUE TEMI, e non è un errore di
   trascrizione. Il verde del logo (#647855) su fondo scuro va sotto il
   rapporto di contrasto che serve per leggerci sopra del testo: nel tema
   scuro si usa una versione schiarita dello stesso verde, che resta
   riconoscibile come il colore del marchio ma si legge. Il marchio è il
   colore, non il codice esadecimale.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) { color-scheme: dark; }
  :root:not([data-tema="chiaro"]){
    --bg:#111613;
    --surface:#1A211D;
    --surface-2:#161D19;
    --sunk:#222B26;
    --ink:#E9EEE9;
    --ink-soft:#AEBAB1;
    --ink-faint:#7B877E;
    --line:#28312C;
    --line-strong:#3A453E;
    --accent:#8FA97A;
    --accent-dark:#AAC395;
    --accent-soft:#222D1E;
    --danger:#D98878;
    --danger-soft:#2E1F1C;
    --amber:#D8B463;
    --amber-soft:#2B2517;
    /* Sul fondo scuro il riquadro «scuro» si RIALZA invece di abbassarsi:
       altrimenti sarebbe un rettangolo invisibile in mezzo alla pagina. */
    --scuro-fondo:linear-gradient(150deg,#2A362F,#202A25);
    --scuro-testo:#EFF4EE;
    --scuro-tenue:#9FAFA4;
    --scuro-morbido:#C3CEC6;
    --barra-alta:#0C110E;
    --barra-fondo:rgba(20,26,22,.94);
    --ombra:0 1px 2px rgba(0,0,0,.28), 0 10px 28px rgba(0,0,0,.34);
  }
}

:root[data-tema="scuro"] { color-scheme: dark; }
:root[data-tema="scuro"]{
  --bg:#111613;
  --surface:#1A211D;
  --surface-2:#161D19;
  --sunk:#222B26;
  --ink:#E9EEE9;
  --ink-soft:#AEBAB1;
  --ink-faint:#7B877E;
  --line:#28312C;
  --line-strong:#3A453E;
  --accent:#8FA97A;
  --accent-dark:#AAC395;
  --accent-soft:#222D1E;
  --danger:#D98878;
  --danger-soft:#2E1F1C;
  --amber:#D8B463;
  --amber-soft:#2B2517;
  --scuro-fondo:linear-gradient(150deg,#2A362F,#202A25);
  --scuro-testo:#EFF4EE;
  --scuro-tenue:#9FAFA4;
  --scuro-morbido:#C3CEC6;
  --barra-alta:#0C110E;
  --barra-fondo:rgba(20,26,22,.94);
  --ombra:0 1px 2px rgba(0,0,0,.28), 0 10px 28px rgba(0,0,0,.34);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-testo);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;}

/* ═══════════════════════════════════════════════════════════════════════════
   I TITOLI — Archivo, in due larghezze (15 settembre 2026)

   Scelta di Luca dopo il provino: «Mi piace tanto la A, Archivio, ma con le
   lettere piccole della C (Inter)». Quindi Archivo sui titoli, Inter su tutto
   il resto. I nomi dei font stanno in assets/font/font.css, e basta quello.

   ⚠ PERCHÉ PESO E LARGHEZZA STANNO QUI E NON NELLE SINGOLE REGOLE
   Prima ogni titolo si portava dietro il suo `font-weight`. Erano 42 posti
   fra questo foglio e quello del CRM: cambiare idea sul peso voleva dire
   toccarli tutti e 42, e dimenticarne due. Adesso le singole regole dicono
   solo QUALE titolo sono e quanto è grande; quanto sono pesanti e quanto
   strette le lettere lo dicono queste due regole, e i numeri veri stanno in
   font.css. Si cambia il vestito dell'app da lì.

   LE DUE LARGHEZZE, e perché non è una sola
   Archivo è una famiglia VARIABILE: la larghezza è un cursore, non un altro
   file. Si usa così:
     · titoli dentro le righe (nomi, intestazioni di riquadro) → 88%, appena
       stretti, si leggono normalmente;
     · titoli da manifesto (le intestazioni vere) → 72% MAIUSCOLO, che è la
       forma dei manifesti sportivi. Non è il font della Nike — quello non si
       compra — ma è quella forma lì, ed è la forma che fa l'effetto.

   ⚠ IL MAIUSCOLO NON VA SUI DATI. «GIORNO A — SPINTA» è un'etichetta nostra e
   può gridare; il NOME DI UN CLIENTE no: un nome scritto tutto maiuscolo si
   legge peggio e sembra un modulo della questura. Per questo `.testa-nome` e
   i vari `strong` delle righe stanno nel primo gruppo e non nel secondo.
   ═══════════════════════════════════════════════════════════════════════════ */

h1,h2,h3,
.testa-nome,
.titolo-sez,
.linea-testa strong,
.quando-giorno,
.giorno-titolo,
.reg-salva-testa strong,
.int-riga-testa strong,
.ali-libera strong,
.pr-riga-testa strong,
.es-card-numero.lettera,
.cancello-foglio h2{
  font-family:var(--font-titolo);
  font-weight:var(--titolo-peso);
  font-stretch:var(--titolo-largo);
}

/* I titoli da manifesto. ⚠ Questa regola sta DOPO quella di sopra apposta:
   ha la stessa forza, quindi vince l'ultima. Spostarla in cima la spegne. */
h1,h2,h3,
.titolo-sez,
.quando-giorno,
.giorno-titolo,
.cancello-foglio h2{
  font-weight:var(--manifesto-peso);
  font-stretch:var(--manifesto-largo);
  text-transform:uppercase;
  letter-spacing:var(--manifesto-spazio);
  font-style:oblique var(--manifesto-inclinazione);
}

/* ⚠ I TITOLI GRANDI, PIÙ STRETTI ANCORA (15/09/2026, dalle foto di Luca).
   La scheda del marchio Nike dice «-62% Tracking»: sopra i 20px le lettere
   vanno quasi attaccate, altrimenti il titolo si sfilaccia e smette di
   sembrare un manifesto. Sotto restano ariose: è la stessa parola, ma a 14px
   le maiuscole strette attaccate non si leggono più.
   ⚠ Anche questa DOPO le altre due: stessa forza, vince l'ultima. */
h1,
h2,
.quando-giorno,
.cancello-foglio h2{
  letter-spacing:var(--manifesto-spazio-stretto);
}
.mono{font-family:var(--font-numeri);}
button{font-family:inherit;cursor:pointer;}
[hidden]{display:none !important;}

/* ═══════ ACCESSO ═══════ */

.accesso{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto;background:var(--dark);
}
/* Sfondo professionale: sfumature morbide, niente foto di palestra */
.accesso-sfondo{
  position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(closest-side at 22% 18%, rgba(14,111,99,.42), transparent 70%),
    radial-gradient(closest-side at 82% 78%, rgba(81,70,132,.30), transparent 70%),
    radial-gradient(closest-side at 60% 8%, rgba(47,110,146,.22), transparent 65%),
    linear-gradient(160deg,#101815 0%,#141C1A 45%,#0F1614 100%);
}
.accesso-sfondo::after{
  /* Trama sottile: dà profondità senza disturbare */
  content:"";position:absolute;inset:-40%;opacity:.05;
  background-image:repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 14px);
}
.accesso-box{
  position:relative;z-index:1;width:100%;max-width:390px;
  background:var(--surface);border-radius:var(--r);padding:34px 28px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.42);text-align:center;
}
.accesso-logo{height:52px;width:auto;margin-bottom:20px;}
.accesso-box h1{font-size:23px;margin-bottom:6px;}
.accesso-sotto{margin:0 0 24px;font-size:13.5px;color:var(--ink-soft);}
.accesso-aiuto{margin:20px 0 0;font-size:12px;color:var(--ink-faint);line-height:1.6;}

.campo{margin-bottom:15px;text-align:left;}
.campo label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
/* Età · peso · altezza della registrazione (31/08/2026): tre numeri corti
 * su una riga sola — in colonna sarebbero tre schermate di scorrimento. */
.campo-terzi{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
/* Peso e altezza, da quando l'età è diventata la data di nascita e ha preso
   una riga sua (24/09/2026): una data non ci sta in un terzo di telefono. */
.campo-due{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
/* La «nota grigia» del profilo (31/08/2026, parole di Luca): i dati che il
 * cliente ha inserito registrandosi, in sola lettura. Il grigio è il fondo
 * secondario del tema, così resta grigio anche in scuro. */
.dati-inseriti{background:var(--surface-2);border:1px dashed var(--line-strong);}
.dati-inseriti .valore{color:var(--ink-soft);}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-family:inherit;font-size:16px;   /* 16px: sotto, iPhone zooma da solo */
  color:var(--ink);background:var(--surface);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{resize:vertical;min-height:70px;}
/* ⚠ LA DATA (24/09/2026, la data di nascita nella registrazione). Senza queste
   due righe su iPhone la casella resta a forma di pillola, e VUOTA si schiaccia
   a metà altezza: nel laboratorio sembrava un altro modulo incollato sopra. */
input[type=date]{min-height:48px;-webkit-appearance:none;appearance:none;display:block;text-align:left;}

.errore{
  background:var(--danger-soft);color:var(--danger);border-radius:var(--r-sm);
  padding:11px 13px;font-size:13px;margin-bottom:14px;text-align:left;font-weight:500;
}

.btn-primario{
  background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);
  padding:14px 20px;font-size:15px;font-weight:600;transition:background .15s;
}
.btn-primario:hover{background:var(--accent-dark);}
.btn-primario:disabled{opacity:.55;cursor:not-allowed;}
.btn-largo{width:100%;}
.btn-secondario{
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:11px 16px;font-size:14px;font-weight:600;
}
.btn-secondario:hover{background:var(--sunk);}
.btn-piccolo{padding:8px 13px;font-size:13px;}
.btn-pericolo{background:var(--danger-soft);color:var(--danger);border:none;}
.btn-pericolo:hover{background:var(--danger);color:#fff;}

/* ═══════ GUSCIO APP ═══════ */

/* La barra in alto (riordinata il 30/08/2026, richiesta di Luca): il NOME a
   sinistra, «Esci» al centro, il LOGO a destra. È una GRIGLIA a tre colonne
   con i lati uguali (1fr auto 1fr): è l'unico modo di avere «Esci» davvero
   in mezzo alla barra e insieme la pillola del nome che abbraccia il testo. */
.testa{
  position:sticky;top:0;z-index:20;height:60px;background:var(--barra-alta);color:var(--scuro-testo);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 16px;
  padding-top:env(safe-area-inset-top);height:calc(60px + env(safe-area-inset-top));
}
/* Il logo della barra è già bianco+verde: niente filtri (5/08/2026). */
.testa-logo{height:32px;width:auto;}
/* Il nome del cliente: primo, grande, evidenziato (28/08/2026, punto 17). */
.testa-nome{justify-self:start;max-width:100%;
  font-family:var(--font-titolo);font-size:19px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.testa-nome:not(:empty){
  background:rgba(255,255,255,.13);
  border-radius:10px;padding:5px 13px;
}
.testa-dx{justify-self:end;display:flex;align-items:center;min-width:0;}
.btn-esci{justify-self:center;}
.btn-esci{
  background:transparent;border:1px solid rgba(255,255,255,.22);color:#F2F5F3;
  border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:600;
}
.btn-esci:hover{background:rgba(255,255,255,.1);}

.contenuto{
  max-width:640px;margin:0 auto;
  padding:20px 16px calc(var(--barra-h) + env(safe-area-inset-bottom) + 24px);
}
.pagina{display:none;}
.pagina.attiva{display:block;animation:entra .22s ease;}
@keyframes entra{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ⚠⚠ LA FASCIA IN BASSO — rifatta il 22/09/2026, su due segnalazioni di Luca
 * dal suo iPhone: «si è buggata la fascia sotto, quando scorrevo giù
 * sovrapponeva alle altre cose» e «quando apro la tastiera scorre verso
 * l'alto. Deve rimanere fissa».
 *
 * 1. ⚠ VIA IL VETRO SMERIGLIATO. `backdrop-filter` su un elemento
 *    `position:fixed` è il modo più conosciuto di far sbavare il disegno su
 *    iOS: mentre la pagina scorre, la fotografia di quello che sta dietro
 *    arriva in ritardo, e per un istante DENTRO la fascia si vede il
 *    contenuto di un attimo prima. A occhio è esattamente «si sovrappone
 *    alle altre cose».
 *    ⚠ E se ne va senza rimpianti: lo sfondo era già `rgba(...,.96)`, cioè
 *    opaco al 96%, quindi la sfocatura lavorava sul 4% che traspare. Un
 *    effetto che non si vede non vale un guasto che si vede.
 *
 * 2. ⚠ UNO STRATO TUTTO SUO (`translateZ(0)`): così il telefono disegna la
 *    fascia una volta e poi la fa scorrere, invece di ridisegnarla a ogni
 *    pixel insieme a quello che le passa sotto.
 *
 * 3. LA TASTIERA: la regola qui sotto, `body.tastiera-aperta`. */
.barra-basso{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--surface);
  border-top:1px solid var(--line);display:flex;
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
}

/* ⚠⚠ CON LA TASTIERA APERTA LA FASCIA SPARISCE, e non è una rinuncia.
 *
 * Su iPhone `position:fixed` è ancorato alla finestra COME SE la tastiera non
 * esistesse. Quando si apre, il sistema solleva la pagina e la fascia si
 * trascina su con lei, finendo in mezzo al contenuto: è il «scorre verso
 * l'alto» della segnalazione.
 *
 * Le strade erano due, e la seconda è peggio di come sembra:
 *   · toglierla finché si scrive;
 *   · inchiodarla SOPRA la tastiera.
 * Inchiodarla vuol dire mettere cinque icone proprio sopra il bordo della
 * tastiera — cioè addosso alla casella dei kg che si sta riempiendo. Si
 * risolverebbe il tremolio creando un guasto peggiore, e per giunta uno di
 * quelli che sembrano voluti.
 *
 * ⚠ `visibility` e non `display:none`: la fascia resta nell'albero del
 * disegno, quindi tornare indietro è un ridisegno e non una ricostruzione —
 * niente sfarfallio quando si chiude la tastiera fra una serie e l'altra.
 *
 * ⚠ Chi non ha `visualViewport` (browser vecchi) non riceve mai questa
 * classe: la fascia resta com'era sempre stata, che è il comportamento di
 * prima e non uno peggiore. */
body.tastiera-aperta .barra-basso{visibility:hidden;}
.barra-basso .voce{
  flex:1;border:none;background:transparent;padding:9px 4px 8px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;font-weight:600;color:var(--ink-faint);height:var(--barra-h);
  justify-content:center;transition:color .15s;
}
.barra-basso .voce .icona{font-size:20px;line-height:1;}
.barra-basso .voce.attiva{color:var(--accent);}

/* ═══════ BLOCCHI ═══════ */

/* ⚠ LO SPAZIO SOTTO IL TITOLO RESTA ANCHE SENZA IL SOTTOTITOLO (21/09/2026).
 *
 * Richiesta di Luca: «mi piace che hai tolto le scritte, ma una volta tolte le
 * scritte in grigio doveva rimanere quella spaziatura lì, che è tutto attaccato
 * ed è brutto». Era esatto: il respiro sotto al titolo non lo faceva il titolo,
 * lo faceva il `margin-bottom:20px` del SOTTOTITOLO. Tolte le spiegazioni,
 * restavano 4px e il contenuto saliva addosso al titolo.
 *
 * Adesso lo spazio ce l'ha il titolo, e si stringe SOLO quando un sottotitolo
 * c'è davvero (`:has`) — quei pochi rimasti dicono un dato, non una
 * spiegazione: «3 allenamenti in questo blocco». ⚠ Con un `.titolo-sez` sotto
 * non serve nessuna regola: i margini fra fratelli si comprimono e vince il
 * suo, che è più grande (26px). */
.titolo-pagina{font-size:22px;margin-bottom:22px;}
.titolo-pagina:has(+ .sotto-pagina){margin-bottom:4px;}
.sotto-pagina{margin:0 0 22px;font-size:13.5px;color:var(--ink-soft);}
.titolo-sez{
  font-family:var(--font-titolo);font-size:15px;
  margin:26px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line);
}
.titolo-sez:first-child{margin-top:0;}

/* Il testo che spiega una sezione, sotto il titolo (29/08/2026). Serviva già
   in tre posti scritto a mano dentro un <p> con lo stile inline. */
.sotto-sez{
  margin:-6px 0 12px;font-size:13px;line-height:1.5;color:var(--ink-soft);
}

/* ═══ IL PERCORSO BLOCCO PER BLOCCO (29/08/2026, punto 10 di Luca) ═══
   Una card per blocco, con la barra del lavoro per seduta. Le card sono in
   colonna e non in griglia apposta: il percorso si legge dall'alto in basso,
   come è successo. */
.pr-blocchi{display:flex;flex-direction:column;gap:10px;}
.pr-blocco{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;box-shadow:var(--ombra);
}
.pr-blocco-testa{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:9px;flex-wrap:wrap;
}
.pr-blocco-testa strong{font-size:14.5px;}
.pr-blocco-testa span{font-size:12px;color:var(--ink-faint);white-space:nowrap;}
.pr-blocco-barra{
  height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-bottom:9px;
}
.pr-blocco-barra span{display:block;height:100%;background:var(--accent);border-radius:99px;}
.pr-blocco-numeri{
  display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);
}
.pr-blocco-numeri strong{color:var(--ink);font-variant-numeric:tabular-nums;}

.riquadro{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 17px;margin-bottom:12px;box-shadow:var(--ombra);
}
.riquadro-scuro{
  background:var(--scuro-fondo);color:var(--scuro-testo);
  border:none;border-radius:var(--r);padding:22px;margin-bottom:16px;
}
.riquadro-scuro .occhiello{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--scuro-tenue);font-weight:700;margin-bottom:7px;}
.riquadro-scuro h2{font-size:21px;margin-bottom:6px;}
.riquadro-scuro p{margin:0;font-size:13.5px;color:var(--scuro-morbido);}

/* ⚠ L'avviso che spiega cos'è una richiesta (30/08/2026). Ha un colore suo,
   più caldo della nota grigia: chi sta per toccare «Invia» deve accorgersene,
   non scorrere oltre credendo di aver già prenotato. */
.avviso-richiesta{
  background:var(--amber-soft);color:var(--amber);
  border:1px solid var(--amber);border-radius:var(--r-sm);
  padding:13px 15px;margin-bottom:12px;font-size:13.5px;line-height:1.55;
}
.avviso-richiesta strong{display:block;margin-bottom:5px;font-size:14px;}
.avviso-richiesta strong + strong{display:inline;font-size:inherit;}

.nota{background:var(--sunk);border-radius:var(--r-sm);padding:13px 15px;
  font-size:13px;color:var(--ink-soft);line-height:1.6;}
.nota-attenzione{background:var(--amber-soft);color:var(--amber);
  border-left:3px solid var(--amber);border-radius:var(--r-sm);
  padding:13px 15px;font-size:13px;line-height:1.6;margin-bottom:14px;}

/* Riscaldamento e defaticamento come elenco (12/08/2026): gli stessi
   esercizi, con gli stessi numeri, che il cliente trova sul PDF. */
.fase-riga{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;font-size:13.5px;line-height:1.5;
}
.fase-riga + .fase-riga{border-top:1px solid var(--line);}
.fase-riga small{display:block;color:var(--ink-faint);font-size:12px;}
.fase-par{
  flex-shrink:0;font-family:var(--font-numeri);font-size:12.5px;
  font-weight:600;color:var(--ink-soft);
}

/* LA LINEA DEL TEMPO (12/08/2026)
   Il percorso intero in verticale: fatto, in corso, chiuso. La riga a
   sinistra li tiene uniti — è quella che fa vedere che sono UNA sequenza e
   non tre schede separate. */
.linea{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md, 14px);padding:16px 18px;margin-bottom:20px;
}
.linea-testa{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:14px;
}
.linea-testa strong{font-family:var(--font-titolo);font-size:16px;}
.linea-testa small{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;}

.linea-voce{display:flex;gap:12px;position:relative;padding-bottom:16px;}
.linea-voce:last-of-type{padding-bottom:0;}
/* Il filo che collega una tappa alla successiva. */
.linea-voce:not(:last-of-type)::before{
  content:"";position:absolute;left:11px;top:24px;bottom:0;
  width:2px;background:var(--line);
}
.linea-segno{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;background:var(--sunk);color:var(--ink-faint);
  position:relative;z-index:1;
}
.linea-voce.fatto .linea-segno{background:var(--accent);color:#fff;}
.linea-voce.in-corso .linea-segno{background:var(--accent-soft);color:var(--accent);border:2px solid var(--accent);}

.linea-corpo{flex:1;min-width:0;}
.linea-titolo{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3;}
.linea-voce.bloccato .linea-titolo{color:var(--ink-faint);}
.linea-quando{font-size:12px;color:var(--ink-faint);margin-top:2px;}
.linea-voce.in-corso .linea-quando{color:var(--accent);font-weight:600;}
.linea-perche{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin-top:5px;}

/* La tappa che si apre per prima si stacca dalle altre: è quella che dà il
   motivo per arrivare in fondo a questo blocco. */
.linea-voce.evidenzia .linea-corpo{
  background:var(--sunk);border-radius:10px;padding:9px 12px;margin:-4px 0 0 -2px;
}
.linea-voce.evidenzia .linea-titolo{color:var(--ink);}

.linea-barra{
  height:5px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:8px;
}
.linea-barra span{display:block;height:100%;background:var(--accent);border-radius:3px;}

.linea-nota{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.55;color:var(--ink-faint);
}

/* I CONSIGLI DI GIUSEPPE (12/08/2026)
   Al posto dell'elenco delle limitazioni, che è stato tolto. Verde e non
   ambra apposta: non è un avvertimento su quello che non va, è una cosa
   scritta a mano per questa persona — e si deve leggere così. */
.consigli{
  background:var(--accent-soft, #EDF1E8);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:15px 17px;
}
.consigli-testa{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px;
}
.consigli p{margin:0;font-size:14px;line-height:1.65;color:var(--ink);}

.riga{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14px;}
.riga:last-child{border-bottom:none;}
.riga .etichetta{color:var(--ink-faint);flex-shrink:0;}
.riga .valore{text-align:right;font-weight:500;}

.pillola{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  padding:4px 10px;border-radius:99px;background:var(--sunk);color:var(--ink-soft);font-weight:600;}
.pillola.verde{background:var(--accent-soft);color:var(--accent-dark);}
.pillola.gialla{background:var(--amber-soft);color:var(--amber);}

/* La scelta sulle immagini (30/08/2026): due pulsanti affiancati, e quello
   scelto si vede — se non si vedesse, uno premerebbe di nuovo per sicurezza. */
.scelta-consenso{display:flex;gap:10px;flex-wrap:wrap;}
.scelta-consenso .btn-largo{flex:1 1 46%;}
.scelta-consenso .attiva{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark);font-weight:600;}
.pillola.rossa{background:var(--danger-soft);color:var(--danger);}
.pillole{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;}

.vuoto{text-align:center;padding:40px 18px;color:var(--ink-faint);}
.vuoto .emoji{font-size:34px;margin-bottom:10px;opacity:.55;}
.vuoto h3{font-size:16px;color:var(--ink-soft);margin-bottom:6px;}
.vuoto p{font-size:13px;margin:0 auto;max-width:38ch;line-height:1.6;}

/* Card appuntamento */
.appuntamento{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:10px;display:flex;gap:14px;align-items:flex-start;
}
.appuntamento.passato{opacity:.55;}
/* ⚠ In attesa di conferma (30/08/2026): NON è spenta come un annullato —
   quella seduta può ancora succedere — ma si deve distinguere da una
   confermata, altrimenti il cliente si presenta senza che nessuno lo aspetti.
   Il bordo giallo la mette a metà strada, che è dov'è. */
.appuntamento.in-attesa{border-color:var(--amber);background:var(--amber-soft);}
.appuntamento.annullato{opacity:.5;}
.appuntamento.annullato .quando-giorno{text-decoration:line-through;}
.quando{
  flex-shrink:0;text-align:center;background:var(--accent-soft);color:var(--accent-dark);
  border-radius:var(--r-sm);padding:8px 10px;min-width:56px;
}
.quando-giorno{font-family:var(--font-titolo);font-size:20px;line-height:1;}
.quando-mese{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-top:2px;}
.quando-ora{font-family:var(--font-numeri);font-size:12px;margin-top:4px;}
.appuntamento-corpo{flex:1;min-width:0;}
.appuntamento-corpo strong{display:block;font-size:14.5px;}
.appuntamento-corpo small{display:block;font-size:12px;color:var(--ink-faint);margin-top:2px;}

/* Scheda di allenamento */
.scheda{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;margin-bottom:11px;box-shadow:var(--ombra);
}
.scheda-titolo{font-weight:600;font-size:15px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.scheda-data{font-size:12px;color:var(--ink-faint);margin-top:2px;}
.scheda-azioni{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.giorno{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 13px;margin-top:10px;}
.giorno-titolo{font-family:var(--font-titolo);font-size:14px;margin-bottom:7px;}
.esercizio{display:flex;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.esercizio:last-child{border-bottom:none;}
.esercizio .carico{font-family:var(--font-numeri);font-size:12.5px;
  color:var(--ink-soft);white-space:nowrap;}

/* Bottoni grandi di prenotazione */
.scelta-grande{
  width:100%;text-align:left;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r);padding:17px 18px;margin-bottom:11px;
  display:flex;align-items:center;gap:15px;transition:border-color .15s,transform .1s,box-shadow .15s;
}
.scelta-grande:hover{border-color:var(--accent);box-shadow:var(--ombra);}
.scelta-grande:active{transform:scale(.99);}
.scelta-grande .emoji{font-size:26px;flex-shrink:0;}
.scelta-grande strong{display:block;font-size:15.5px;}
.scelta-grande small{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px;}
.scelta-grande .freccia{margin-left:auto;color:var(--ink-faint);font-size:19px;}

/* ═══════ FOGLIO CHE SALE DAL BASSO ═══════ */

.foglio-fondo{position:fixed;inset:0;background:rgba(20,28,26,.5);z-index:40;animation:sfuma .2s ease;}
@keyframes sfuma{from{opacity:0;}to{opacity:1;}}
.foglio{
  position:fixed;left:0;right:0;bottom:0;z-index:41;
  background:var(--surface);border-radius:20px 20px 0 0;
  max-height:88vh;display:flex;flex-direction:column;
  animation:sali .28s cubic-bezier(.4,0,.2,1);
  padding-bottom:env(safe-area-inset-bottom);
}
@keyframes sali{from{transform:translateY(100%);}to{transform:none;}}
.foglio-maniglia{width:38px;height:4px;background:var(--line-strong);
  border-radius:99px;margin:10px auto 4px;flex-shrink:0;}
.foglio-testa{display:flex;align-items:center;justify-content:space-between;
  padding:8px 18px 14px;border-bottom:1px solid var(--line);flex-shrink:0;}
.foglio-testa h2{font-size:18px;}
.btn-chiudi{border:none;background:transparent;font-size:19px;color:var(--ink-faint);
  width:34px;height:34px;border-radius:8px;}
.btn-chiudi:hover{background:var(--sunk);}
.foglio-corpo{padding:18px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}

/* Griglia degli orari */
.giorno-slot{margin-bottom:18px;}
.giorno-slot h3{font-size:14px;margin-bottom:9px;text-transform:capitalize;}
.orari{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;}
.orario{
  padding:12px 6px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);font-family:var(--font-numeri);font-size:14px;
  font-weight:500;text-align:center;transition:.14s;
}
.orario:hover{border-color:var(--accent);color:var(--accent-dark);}
.orario.scelto{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ⚠ IL MESSAGGIO NON SI TOCCA — `pointer-events:none` (27/08/2026)
   È IL GUASTO che Luca segnalava da due giorni: «non mi fa premere sulla
   casella di testo». Non era la casella.

   Questo riquadro è FISSO, sta appena sopra la barra in basso e arriva largo
   quanto lo schermo: cioè esattamente dove sta la casella di risposta di un
   intervento quando sei in fondo a un filo. Senza `pointer-events:none` si
   MANGIA i tocchi per i 3,6 secondi in cui resta a schermo — e quei 3,6
   secondi cadono subito dopo aver mandato una risposta, che è precisamente il
   momento in cui uno tocca la casella successiva.

   Misurato su iPhone: mandata una risposta, `elementFromPoint` al centro
   della casella tornava `DIV#brindisi`. Il dito toccava il messaggio.

   Perché non si vedeva provando: passa da sola dopo 3,6 secondi. Chi riprova
   con calma ci riesce, e il guasto sembra non essere mai esistito.

   ⚠ Il CRM ce l'aveva già giusto (`.avviso-volante`, pointer-events:none):
   qui era stato dimenticato. Un avviso che si legge e basta non deve MAI
   prendersi i tocchi. */
.brindisi{
  position:fixed;left:50%;bottom:calc(var(--barra-h) + 22px);transform:translateX(-50%);
  pointer-events:none;
  background:var(--dark);color:#F2F5F3;padding:13px 20px;border-radius:99px;
  font-size:13.5px;font-weight:500;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.28);
  max-width:calc(100vw - 40px);text-align:center;animation:sali2 .25s ease;
}
@keyframes sali2{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}
.brindisi.errore-brindisi{background:var(--danger);}

@media (min-width:700px){
  .foglio{left:50%;right:auto;transform:translateX(-50%);width:560px;
    border-radius:20px;bottom:auto;top:50%;margin-top:0;
    animation:none;max-height:82vh;}
  .foglio{top:9vh;}
  .foglio-maniglia{display:none;}
  .barra-basso{max-width:640px;margin:0 auto;border-radius:16px 16px 0 0;
    border:1px solid var(--line);border-bottom:none;}
}

/* ═══════ LA TUA SETTIMANA (5 agosto 2026) ═══════
   Sette caselle che scorrono in orizzontale: sul telefono è il modo naturale
   di guardare una settimana, e non costringe a rimpicciolire il testo. */

.settimana{
  display:flex;gap:8px;overflow-x:auto;
  padding:2px 0 8px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.settimana::-webkit-scrollbar{height:0;}
.sett-g{
  flex:0 0 108px;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:4px;
  padding:11px 11px 13px;border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  /* Dal 2/09/2026 la scheda-giorno è un BOTTONE (porta al suo allenamento):
     l'aspetto resta quello di prima, il tocco fa qualcosa. */
  font:inherit;text-align:left;cursor:pointer;color:inherit;
}
.sett-g.allena{
  background:var(--surface);
  border-color:var(--accent);
}
.sett-g.oggi{box-shadow:0 0 0 2px var(--accent);}
.sett-g-nome{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);
}
.sett-g.allena .sett-g-nome{color:var(--accent);}
.sett-g-titolo{
  font-size:12.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sett-g-sotto{font-size:10.5px;color:var(--ink-faint);}
/* La riga piccola in fondo alla tessera (9/09/2026). ⚠ Piccola e in fondo
   APPOSTA: il giorno vero lo decide il cliente, e quello resta la scritta
   grande in cima. Dal 24/09/2026 ci sta solo «fatto»: la parola «previsto»
   l'ha tolta Luca (vedi portale.js, «La tua settimana»). */
.sett-g-consiglio{
  font-size:10px;color:var(--ink-faint);opacity:.85;
  margin-top:auto;padding-top:4px;
}
.sett-g-riposo{font-size:12px;color:var(--ink-faint);font-style:italic;margin-top:2px;}
/* Il giorno previsto (21/09/2026): chiaro finché non è fatto; il giorno
   previsto per oggi e non ancora fatto ha il bordo tratteggiato. */
.sett-g.allena .sett-g-nome.previsto{color:var(--ink-faint);}
.sett-g.tocca{border-style:dashed;}
/* I fogli con una domanda (21/09/2026): «Inizi l'allenamento?», «Occhio ai recuperi». */
.foglio-p{font-size:15px;line-height:1.5;margin:0 0 10px;}
.foglio-azioni{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.nota-piccola{
  font-size:11.5px;color:var(--ink-faint);
  line-height:1.55;margin:2px 0 0;
}

/* ═══════ ALLENAMENTI (5 agosto 2026) ═══════
   Pensata per il pollice: numeri grandi, poche cose per schermata, il
   "come si fa" sempre raggiungibile senza cercarlo. */

.all-scelta{
  display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;
  -webkit-overflow-scrolling:touch;
}
.all-scelta::-webkit-scrollbar{height:0;}
.all-tab{
  flex:0 0 auto;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--ink-faint);white-space:nowrap;
}
.all-tab.attivo{
  background:var(--accent);border-color:var(--accent);color:#fff;
}

.all-testa{margin:6px 0 16px;}
.all-testa h2{font-size:21px;line-height:1.25;margin:2px 0 3px;}
.all-conta{font-size:12px;color:var(--ink-faint);}
.all-oggi{
  display:inline-block;padding:3px 10px;border-radius:999px;margin-bottom:6px;
  background:var(--accent);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}

.all-fase{
  padding:12px 14px;margin-bottom:14px;border-radius:14px;
  background:var(--surface-2);
}
.all-fase-eti{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:3px;
}
.all-fase p{margin:0;font-size:13.5px;line-height:1.55;}

/* La card di un esercizio */
.es-card{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;margin-bottom:10px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
}
.es-card-numero{
  flex:0 0 26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);
  color:var(--ink-faint);
  font-size:12px;font-weight:700;
}
.es-card-corpo{flex:1;min-width:0;}
.es-card-nome{font-size:15px;font-weight:600;line-height:1.3;}
.es-card-numeri{display:flex;gap:18px;flex-wrap:wrap;margin-top:9px;}
.es-dato{display:flex;flex-direction:column;line-height:1.15;}
.es-dato strong{font-size:19px;font-weight:600;}
.es-dato small{
  font-size:10px;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.04em;margin-top:1px;
}
/* ═══════ IL DIARIO: segnare i carichi (8 agosto 2026) ═══════
   Si usa in palestra, in piedi, con le mani sudate. Quindi caselle GRANDI —
   almeno 44px, la misura minima perché un dito le prenda al primo colpo — e
   niente da leggere per capire cosa fare. */

.reg{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;}
.reg summary{
  display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);padding:4px 0;
}
.reg summary::-webkit-details-marker{display:none;}
.reg summary small{margin-left:auto;font-weight:400;font-size:11.5px;color:var(--ink-faint);text-align:right;}
.reg-icona{color:var(--accent);font-size:15px;}
.reg[open] summary{color:var(--ink);margin-bottom:8px;}

.reg-corpo{display:flex;flex-direction:column;gap:8px;}
.reg-riga{display:flex;align-items:center;gap:8px;}
.reg-n{
  width:26px;flex-shrink:0;font-size:12px;font-weight:700;color:var(--ink-faint);
  font-family:var(--font-numeri);
}
.reg-campo{position:relative;flex:1;display:flex;align-items:center;}
.reg-campo input{
  width:100%;min-height:46px;padding:10px 38px 10px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);
  font-family:var(--font-numeri);font-size:17px;font-weight:600;color:var(--ink);
  text-align:center;
}
.reg-campo input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(100,120,85,.18);}
.reg-campo small{
  position:absolute;right:12px;font-size:11px;color:var(--ink-faint);pointer-events:none;
  text-transform:uppercase;letter-spacing:.04em;
}
.reg-per{color:var(--ink-faint);font-size:14px;}

/* Col la barra scritta, l'etichetta «rip» sparisce e il campo si prende
   tutta la larghezza: «10/10» non ci stava e veniva tagliato a metà. */
.reg-campo.con-barra input{padding-right:12px;font-size:16px;}
.reg-campo.con-barra small{display:none;}

/* Il pulsante della barra (26/08/2026). Stretto e smorto: serve a pochi
   casi e non deve rubare l'occhio ai due campi, che sono la cosa da
   riempire. Ma resta alto 46px come loro — si preme con le mani stanche,
   e la regola dei 44px vale anche per quello che si usa di rado. */
.reg-slash{
  flex-shrink:0;width:34px;min-height:46px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface-2);
  color:var(--ink-faint);font-family:var(--font-numeri);
  font-size:17px;font-weight:600;line-height:1;
}
.reg-slash:active{background:var(--accent-soft);color:var(--accent-dark);border-color:var(--accent);}
.reg-nota{
  width:100%;min-height:44px;padding:10px 12px;margin-top:2px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);
  font-family:inherit;font-size:14px;color:var(--ink);
}

/* ═══ LE CASELLE DI RACCONTO (26/08/2026) ═══
   Richiesta di Luca: «quando il cliente lamenta un fastidio o una situazione
   aprire una casella in cui può approfondire».

   È LARGA E ALTA APPOSTA. Le altre caselle raccolgono un'etichetta di due
   parole; questa raccoglie un racconto, e la dimensione è il primo messaggio
   che riceve chi legge: una riga sottile dice «rispondi corto», tre righe
   dicono «qui puoi spiegare». Cresce da sola mentre si scrive (vedi
   `cresciConTesto`), perché su un telefono scrivere dentro una feritoia è il
   motivo per cui la gente si ferma a metà frase.

   Il font è 16px e non 14: sotto i 16 iOS ingrandisce la pagina da solo al
   primo tocco sulla casella, e l'utente si ritrova la schermata sbilenca
   senza aver fatto niente. */
.reg-racconto{
  width:100%;min-height:82px;padding:12px 14px;margin-top:4px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  font-family:inherit;font-size:16px;line-height:1.55;color:var(--ink);
  resize:none;overflow-y:auto;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.reg-racconto::placeholder{color:var(--ink-faint);opacity:.85;}
.reg-racconto:focus{
  border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px rgba(100,120,85,.18);
}
/* Il conteggio compare solo oltre il 60% dello spazio: prima è un limite
   sventolato in faccia a chi non ha ancora scritto niente. */
.reg-conta{
  min-height:14px;margin-top:4px;text-align:right;
  font-family:var(--font-numeri);font-size:11px;color:var(--ink-faint);
}

/* L'approfondimento è FIGLIO della domanda sopra, non una domanda nuova.
   Rientrato e con la barretta a sinistra si legge come tale: senza, il modulo
   sembra raddoppiato di colpo proprio nel momento peggiore — quando la
   persona ha appena detto che qualcosa non è andato. */
.dom.dom-approfondimento{
  border-top:none;padding-top:2px;padding-bottom:14px;
  margin-left:12px;padding-left:14px;
  border-left:2px solid var(--accent-soft, var(--line));
}
.dom.dom-approfondimento .dom-testo{font-size:14.5px;}

/* La barra finale: com'è andata, e il pulsante che salva tutto insieme. */
.reg-salva{
  margin-top:22px;padding:18px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--line);
}
.reg-salva-testa{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;}
.reg-salva-testa strong{font-family:var(--font-titolo);font-size:17px;}
.reg-salva-testa small{font-size:11.5px;color:var(--ink-faint);}
.reg-salva-intro{
  margin:-6px 0 16px;font-size:12.5px;line-height:1.5;color:var(--ink-faint);
}

/* LE DOMANDE DI FINE SEDUTA (12/08/2026)
   Erano una sola («com'è andata?»), adesso sono cinque. Con cinque domande
   il rischio non è più lo spazio: è che sembrino un modulo da compilare e
   nessuno risponda. Per questo ogni domanda è staccata dalle altre da una
   riga sottile, e i bottoni restano grandi da premere col pollice. */
.dom{padding:14px 0;border-top:1px solid var(--line);}
.dom:first-of-type{border-top:none;padding-top:0;}
.dom[hidden]{display:none;}
.dom-testo{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px;}
.dom-aiuto{font-size:12px;line-height:1.45;color:var(--ink-faint);margin-bottom:9px;}

.reg-scelte{display:flex;gap:8px;}
.reg-faccia{
  flex:1;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  padding:6px 4px;text-align:center;line-height:1.2;
}
.reg-faccia span{font-size:22px;line-height:1;}
.reg-faccia.scelta{border-color:var(--accent);background:rgba(100,120,85,.10);color:var(--ink);}
/* Quattro opzioni sullo stesso rigo su uno schermo da telefono: si stringe
   tutto quel tanto che basta perché «Al limite» non vada a capo. */
.reg-scelte.fitte{gap:6px;}
.reg-scelte.fitte .reg-faccia{font-size:11px;min-height:56px;padding:6px 2px;}
.reg-scelte.fitte .reg-faccia span{font-size:19px;}

/* La tendina con gli esercizi del giorno: si risponde con un tocco invece
   che scrivendo il nome a mano sul telefono. */
.reg-tendina{
  width:100%;min-height:46px;padding:10px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);
  font-family:inherit;font-size:14.5px;font-weight:500;color:var(--ink);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8f85' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px;
  padding-right:34px;
}
.reg-tendina:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(100,120,85,.18);}

.btn-grande{
  width:100%;min-height:54px;margin-top:12px;border:none;border-radius:13px;
  background:var(--accent);color:#fff;font-family:inherit;font-size:16px;font-weight:600;
  cursor:pointer;
}
.btn-grande:disabled{opacity:.6;}
.nota-piccola.fatto{color:var(--accent);font-weight:600;}
.nota-piccola.avviso{color:var(--amber);font-weight:600;}

/* Il tempo sotto tensione detto a parole (7/08/2026): quattro numeri con un
   trattino in mezzo non li capisce nessuno da solo in sala. */
.es-card-tut{
  margin-top:9px;padding:7px 11px;border-radius:9px;
  background:var(--surface-2);font-size:12.5px;line-height:1.45;color:var(--ink-soft);
}

/* Come si esegue (24/08/2026): stessa forma del riquadrino del tempo sotto
   tensione, perché sono due istruzioni dello stesso tipo — «come si fa» e non
   «quanto se ne fa». Il bordo verde a sinistra lo stacca dal TUT quando ci
   sono tutti e due: sono due cose da fare, non una frase sola. */
.es-card-esecuzione{
  margin-top:9px;padding:7px 11px;border-radius:9px;
  background:var(--accent-soft);border-left:3px solid var(--accent);
  font-size:12.5px;line-height:1.45;color:var(--ink);font-weight:500;
}

/* La nota scritta a mano da Giuseppe per QUESTA persona su QUESTO esercizio
   (28/08/2026). Ha la stessa forma delle altre due, ma il bordo ambra: è
   l'unica delle tre che non vale per tutti, ed è quella che dice come
   proteggersi. Dal 28/08 è uno dei tre canali rimasti — vedi cardEsercizio. */
.es-card-nota{
  margin-top:9px;padding:7px 11px;border-radius:9px;
  background:var(--surface-2);border-left:3px solid var(--amber);
  font-size:12.5px;line-height:1.45;color:var(--ink);
}

/* ═══ I DUE CRONOMETRI (24/08/2026) ═══
   Il recupero accanto a ogni esercizio, e la durata della seduta in cima.

   Il pulsante del recupero ha la stessa forma a pillola di «.es-video», che
   vive già dentro la stessa card: sono due cose che si fanno con l'esercizio
   davanti, e devono somigliarsi. Quando il recupero parte diventa verde
   pieno — si deve vedere da lontano, col telefono appoggiato per terra.

   min-height 44px: è la misura minima perché un dito prenda il bersaglio al
   primo colpo, la stessa già usata per le caselle del diario. Qui conta più
   che altrove, perché lo si preme con le mani stanche. */
.rec-timer{margin-top:11px;}
/* Dal 28/08/2026 (punto 11 di Luca) il timer sta NELLA riga dei numeri,
 * spinto a destra, BLU e un filo più grande: si vede e non ruba una riga. */
.es-dato-rec{margin-top:0;margin-left:auto;align-self:center;}
.rec-avvia{
  display:inline-flex;align-items:center;gap:7px;
  min-height:46px;padding:10px 17px;border-radius:999px;
  background:var(--blu-rec,#2F6FD0);border:1px solid var(--blu-rec,#2F6FD0);color:#fff;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
}
.rec-avvia small{font-weight:500;color:rgba(255,255,255,.75);font-size:11px;}
.rec-avvia.in-corso{
  background:var(--blu-rec-scuro,#245AA8);border-color:var(--blu-rec-scuro,#245AA8);color:#fff;
}
.rec-avvia.in-corso small{color:rgba(255,255,255,.72);}
.rec-timer .linea-barra{margin-top:7px;}

/* Il cronometro della seduta sta in cima alla pagina, sopra gli esercizi:
   «comincio adesso» si preme prima di allenarsi, non dopo. */
.seduta-timer{margin:14px 0 18px;}
.seduta-corso{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:10px;
}
.seduta-corso strong{font-size:16px;font-variant-numeric:tabular-nums;}
.seduta-finita{
  padding:13px 15px;border-radius:var(--r-sm);
  background:var(--accent-soft);border-left:3px solid var(--accent);
  font-size:13.5px;line-height:1.6;color:var(--ink);
}
.seduta-finita .rec-avvia{
  min-height:0;padding:0;border:none;background:none;
  font-size:12.5px;font-weight:600;color:var(--accent-dark);
  text-decoration:underline;margin-left:6px;
}

.es-video{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  padding:7px 13px;border-radius:999px;
  background:var(--surface-2);
  color:var(--ink);
  font-size:12.5px;font-weight:600;text-decoration:none;
  border:1px solid var(--line);
}
.es-video.mio{
  background:var(--accent);border-color:var(--accent);color:#fff;
}

/* Il pallino del video (28/08/2026, punto 11): un tondo col play in basso a
 * sinistra della card, sotto il numero dell'esercizio. La card ci guadagna
 * mezza altezza. Il tondo è da 38px: un dito lo prende al primo colpo. */
.es-card{position:relative;}
.es-play{
  position:absolute;left:11px;bottom:11px;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink);font-size:14px;text-decoration:none;
  padding-left:2px; /* il triangolo del play pende a sinistra: si ricentra */
}
.es-play.mio{background:var(--accent);border-color:var(--accent);color:#fff;}

/* Il video di Giuseppe a schermo pieno */
.video-pieno{
  position:fixed;inset:0;z-index:900;
  background:rgba(10,14,13,.94);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.video-pieno video{width:100%;max-width:760px;max-height:82vh;border-radius:14px;background:#000;}
.video-chiudi{
  position:absolute;top:16px;right:16px;
  width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(255,255,255,.16);color:#fff;font-size:17px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLI INTERVENTI (26 agosto 2026)

   Richiesta di Luca: «una sezione visualizzabile dal cliente in cui ci sono le
   richieste fatte sugli esercizi, e le mie correzioni».

   PERCHÉ LE BOLLE E NON UN ELENCO. Il filo ha due voci che si alternano, e
   l'unica cosa che il cliente deve capire senza leggere è CHI STA PARLANDO.
   Le bolle lo dicono con la posizione — le sue a destra, quelle di Giuseppe a
   sinistra — cioè con la stessa grammatica di qualunque app di messaggi che
   già conosce. Ma il nome resta scritto sopra ogni bolla: la posizione da
   sola non basta a chi legge con un ingranditore, e non basta nemmeno in
   bianco e nero.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Il pallino col numero, sulla barra in basso. Ancorato all'icona e non alla
   voce, così non si sposta quando l'etichetta cambia lunghezza. */
.barra-basso .voce .icona{position:relative;}
.pallino{
  position:absolute;top:-5px;left:calc(100% - 6px);
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--accent);color:#fff;
  font-family:var(--font-numeri);font-size:10px;font-weight:700;
  line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--barra-fondo);
}

/* Una riga dell'elenco: si legge tutta senza aprirla, e si apre solo se
   serve. L'anteprima dell'ultimo messaggio è tagliata a due righe — una sola
   nasconde troppo, tre diventano già la conversazione. */
.int-riga{
  display:block;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:10px;box-shadow:var(--ombra);
  transition:border-color .15s ease, transform .12s ease;
}
.int-riga:active{transform:scale(.99);}
.int-riga.nuovo{border-color:var(--accent);background:var(--accent-soft);}
.int-riga-testa{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.int-riga-testa strong{font-family:var(--font-titolo);font-size:15.5px;color:var(--ink);}
.int-pallino{
  margin-left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--accent);color:#fff;
  font-family:var(--font-numeri);font-size:11px;font-weight:700;
  line-height:19px;text-align:center;
}
.int-riga-ultimo{
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.int-chi{font-weight:700;color:var(--ink);}
.int-riga-quando{margin-top:6px;font-size:11px;color:var(--ink-faint);}

.int-avviso{
  display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;
  padding:13px 16px;margin-bottom:14px;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid var(--accent);
  font-size:13.5px;color:var(--accent-dark);
}
.int-avviso strong{font-size:15px;}

.btn-indietro{
  background:none;border:none;padding:0 0 12px;
  font-size:14px;font-weight:600;color:var(--accent);
}

/* ── Il filo ── */
.int-filo{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.int-bolla{
  max-width:86%;padding:12px 15px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface);
}
.int-bolla.mia{align-self:flex-end;background:var(--accent-soft);border-color:var(--accent-soft);}
.int-bolla.sua{align-self:flex-start;}
.int-bolla-chi{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint);margin-bottom:4px;
}
.int-bolla.mia .int-bolla-chi{color:var(--accent-dark);}
.int-bolla-testo{font-size:15.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;}
.int-bolla-quando{margin-top:5px;font-size:10.5px;color:var(--ink-faint);}

.int-rispondi{margin-top:16px;}
.int-rispondi .btn-primario{margin-top:10px;}

/* ═══ GLI INTERRUTTORI DELLE NOTIFICHE (29/08/2026) ═══
   Una riga per famiglia: a sinistra cosa è, a destra la casella. La casella
   sta a destra perché è lì che il pollice arriva senza coprire il testo. */
.notif-riga{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;
}
.notif-riga:last-of-type{border-bottom:none;}
.notif-riga strong{display:block;font-size:14.5px;font-weight:600;color:var(--ink);}
.notif-riga small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--ink-faint);}
/* ⚠ 26px e non la misura di sistema: una casella piccola su un telefono si
   manca, e mancarla vuol dire spegnere per sbaglio le risposte di Giuseppe. */
.notif-riga input[type="checkbox"]{
  width:26px;height:26px;flex:none;margin-top:2px;accent-color:var(--accent);
}

/* ═══ IL VIDEO DI ESECUZIONE (29/08/2026) ═══
   Il pulsante che apre la fotocamera, l'anteprima prima di mandare, e il video
   già mandato dentro la bolla del filo. */

.int-video-scelta{margin-top:10px;}
/* ⚠ È un <label> e non un <button>: dentro c'è l'input file, e su un telefono
   toccare l'etichetta apre la fotocamera senza bisogno di nessun JavaScript.
   Un bottone che chiama .click() sull'input funziona quasi sempre, e «quasi»
   su un telefono in palestra vuol dire che a qualcuno non funziona. */
.int-video-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;padding:0 14px;
  border:1px dashed var(--accent);border-radius:12px;
  background:var(--accent-soft);color:var(--accent-dark);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.int-video-btn:active{transform:scale(.99);}
.int-video-scelta>small{
  display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--ink-faint);
}

.int-video-anteprima{margin-top:10px;}
.int-video-anteprima video{
  width:100%;max-height:340px;border-radius:12px;background:#000;display:block;
}
.int-video-riga{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;
}
.int-video-peso{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.int-video-rifai{
  background:transparent;border:1px solid var(--line-strong);border-radius:9px;
  padding:6px 12px;font-family:inherit;font-size:13px;color:var(--ink-soft);cursor:pointer;
}

/* La barra del caricamento: parte a zero e resta invisibile finché non si
   muove, così non compare una barra vuota che sembra un guasto. */
.int-video-barra{
  height:4px;border-radius:99px;background:var(--surface-2);margin-top:9px;overflow:hidden;
}
.int-video-barra span{
  display:block;height:100%;width:0;background:var(--accent);
  border-radius:99px;transition:width .2s linear;
}

/* Il video dentro una bolla. Sta SOPRA il testo: si guarda quello, e il testo
   è il commento di quello che si è visto. */
.int-bolla-video{
  width:100%;max-height:300px;border-radius:10px;background:#000;
  display:block;margin-bottom:7px;
}
.int-bolla-durata{
  font-size:11px;color:var(--ink-faint);margin-bottom:5px;font-variant-numeric:tabular-nums;
}
.int-nota{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--ink-faint);}

/* Un pulsante largo quanto lo schermo: si preme col pollice senza guardare. */
.btn-primario.largo{width:100%;min-height:50px;font-size:15.5px;}

/* «Chiedi di questo esercizio», sulla card. Smorto apposta: serve nei pochi
   casi in cui qualcosa non torna, e non deve competere col recupero e col
   video, che si usano tutte le volte. */
.es-chiedi{
  width:100%;margin-top:8px;min-height:40px;
  background:transparent;border:1px dashed var(--line-strong);border-radius:11px;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-faint);
}
.es-chiedi:active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark);}

/* ── SEI VOCI NELLA BARRA (26/08/2026) ──
   Erano cinque. Con la sesta, a 375px ogni voce ha 62px: l'etichetta più
   lunga («Allenamenti») non ci sta più su una riga. Si stringe la scritta e
   si tiene l'icona grande — è l'icona che si punta col pollice, e resta
   sopra i 44px richiesti in tutte e due le dimensioni. */
@media (max-width:420px){
  .barra-basso .voce{font-size:9.5px;padding-left:2px;padding-right:2px;letter-spacing:-.01em;}
  .barra-basso .voce .icona{font-size:19px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   I CONSIGLI ALIMENTARI, SUL TELEFONO (26 agosto 2026)

   LA LIBERATORIA NON È UN AVVISO LEGALE IN CORPO SEI. È la prima cosa che si
   legge, in chiaro, con lo stesso corpo del resto: il documento di Luca la
   mette in cima e sottolineata, e sminuirla qui vorrebbe dire cambiare il
   senso di quello che si sta consegnando.

   I TRE MACRO SONO IN TRE RIQUADRI E NON IN UNA RIGA DI TESTO. Sono i numeri
   che il cliente confronta ogni giorno con l'app contacalorie: separati si
   ritrovano con un'occhiata, dentro una frase vanno riletti tutte le volte.
   ═══════════════════════════════════════════════════════════════════════════ */

.ali-libera{
  padding:15px 17px;margin-bottom:20px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-strong);
}
.ali-libera strong{display:block;font-family:var(--font-titolo);font-size:15px;margin-bottom:7px;}
.ali-libera p{margin:0 0 7px;font-size:13.5px;line-height:1.65;color:var(--ink-soft);}
.ali-libera-forte{font-weight:600;color:var(--ink) !important;}

/* Le kcal sul riquadro scuro: è il numero attorno a cui gira tutto. */
.ali-kcal-c{text-align:center;}
.ali-kcal-c-num{
  font-family:var(--font-numeri);font-size:42px;font-weight:700;line-height:1;
  letter-spacing:-.02em;
}
.ali-kcal-c-num small{font-size:15px;font-weight:600;margin-left:7px;opacity:.72;}
.ali-kcal-c-sett{margin-top:9px;font-size:12.5px;color:var(--scuro-tenue);}

.ali-macros-c{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px;}
.ali-macro-c{
  padding:13px 8px;border-radius:14px;text-align:center;
  background:var(--surface);border:1px solid var(--line);
}
.ali-macro-c-num{
  font-family:var(--font-numeri);font-size:17px;font-weight:700;color:var(--ink);
  line-height:1.15;
}
.ali-macro-c-num small{font-size:11px;font-weight:600;color:var(--ink-faint);margin-left:2px;}
.ali-macro-c-eti{margin-top:4px;font-size:10.5px;font-weight:600;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.03em;}
/* Il colore distingue i tre macro a colpo d'occhio, ma l'etichetta resta
   scritta sotto ognuno: chi non distingue i colori legge lo stesso. */
.ali-macro-c.prot{border-color:var(--accent);}
.ali-macro-c.carb{border-color:var(--line-strong);}
.ali-macro-c.gras{border-color:var(--line-strong);}

.ali-p{margin:0 0 8px;font-size:13.5px;line-height:1.65;color:var(--ink-soft);}
.ali-p:last-child{margin-bottom:0;}
.ali-sotto{margin-bottom:16px;color:var(--ink-faint);font-size:12.5px;}
.ali-elenco{margin:0;padding-left:18px;font-size:13.5px;line-height:1.75;color:var(--ink-soft);}
.ali-elenco li + li{margin-top:5px;}
.ali-avviso{
  margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-size:12px;font-style:italic;color:var(--ink-faint);
}

.ali-tab-cliente{width:100%;border-collapse:collapse;font-size:13.5px;}
.ali-tab-cliente td{padding:8px 2px;border-bottom:1px solid var(--line);color:var(--ink-soft);}
.ali-tab-cliente tr:last-child td{border-bottom:none;}
.ali-tab-cliente td:first-child{font-weight:600;color:var(--ink);}
.ali-tab-cliente td:last-child{text-align:right;white-space:nowrap;font-size:12.5px;}

/* ── Il giorno d'esempio ── */
.ali-pasto-c{
  padding:14px 16px;margin-bottom:10px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--ombra);
}
.ali-pasto-c-nome{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--accent);margin-bottom:9px;
}
.ali-riga{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:7px 0;font-size:15px;line-height:1.5;color:var(--ink);
}
.ali-riga + .ali-riga{border-top:1px solid var(--line);}
/* Le righe senza grammatura non hanno il pulsante: smorte, così si vede
   subito che sono un'altra cosa e non un pulsante che non funziona. */
.ali-riga.muta{color:var(--ink-soft);padding:7px 0;}
.ali-scambia{
  flex-shrink:0;min-height:32px;padding:0 13px;border-radius:16px;
  background:var(--accent-soft);border:1px solid transparent;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--accent-dark);
}
.ali-scambia.aperto{background:var(--accent);color:#fff;}

.ali-alt{
  margin:4px 0 8px;padding:12px 14px;border-radius:12px;
  background:var(--surface-2);border:1px dashed var(--line-strong);
}
.ali-alt.vuota{font-size:13px;color:var(--ink-faint);}
.ali-alt-testa{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:9px;}
.ali-alt-riga{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
  padding:7px 0;border-top:1px solid var(--line);
}
.ali-alt-riga:first-of-type{border-top:none;}
.ali-alt-riga strong{font-size:14.5px;color:var(--ink);}
.ali-alt-nota{font-size:11.5px;color:var(--ink-faint);}
/* Lo scarto è scritto in monospazio e allineato a destra: si confrontano fra
   loro senza doverli leggere uno per uno. */
.ali-alt-scarto{
  margin-left:auto;font-family:var(--font-numeri);
  font-size:11px;color:var(--ink-faint);text-align:right;
}
.ali-alt-nota-finale{
  margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.6;color:var(--ink-faint);
}

.ali-integr-c{padding:10px 0;border-bottom:1px solid var(--line);}
.ali-integr-c:first-of-type{padding-top:0;}
.ali-integr-c-testa{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:4px;}
.ali-integr-c-testa strong{font-size:14.5px;}
.ali-integr-c-q{
  font-family:var(--font-numeri);font-size:12px;font-weight:600;
  padding:2px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent-dark);
}

/* Lo scarto va sotto il nome e allineato a sinistra: a destra, su 375px,
   andava a capo in mezzo a «+2 g / carboidrati» e si leggeva peggio di così.
   (26/08/2026, visto sul telefono) */
.ali-alt-riga{display:block;}
.ali-alt-nome{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;}
.ali-alt-scarto{
  display:block;margin:3px 0 0;text-align:left;
  font-family:var(--font-numeri);font-size:11px;color:var(--ink-faint);
  line-height:1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   I PROGRESSI (26 agosto 2026)

   Richiesta di Luca: «voglio che il cliente possa visualizzare da dove è
   partito e dove è arrivato».

   LA FRASE PRIMA DEL GRAFICO, ED È UNA SCELTA DI PESO. «Da 40 kg × 8 a
   55 kg × 8, +37%» è quello che una persona racconta agli amici; il grafico è
   quello che guarda una volta. Per questo la frase è grossa, in cima, e il
   grafico viene dopo.
   ═══════════════════════════════════════════════════════════════════════════ */

.pr-insieme{text-align:center;}
.pr-insieme-numeri{display:flex;justify-content:center;gap:26px;margin:6px 0 4px;}
.pr-insieme-numeri div{display:flex;flex-direction:column;}
.pr-insieme-numeri strong{
  font-family:var(--font-numeri);font-size:28px;font-weight:700;line-height:1.1;
}
.pr-insieme-numeri small{font-size:11px;color:var(--scuro-tenue);margin-top:2px;}
.pr-insieme-dal{margin-top:8px;font-size:12px;color:var(--scuro-tenue);}

.pr-record{
  display:flex;align-items:baseline;gap:9px;padding:9px 0;
  border-bottom:1px solid var(--line);
}
.pr-record:last-child{border-bottom:none;}
.pr-record-nome{flex:1;font-size:14px;color:var(--ink);}
.pr-record-peso{font-size:14px;font-weight:700;color:var(--accent-dark);white-space:nowrap;}
.pr-record-data{font-size:11px;color:var(--ink-faint);white-space:nowrap;}

/* La riga di un esercizio: si legge tutta senza aprirla. Il «da → a» è già lì,
   e chi vuole il grafico entra. */
.pr-riga{
  display:block;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:10px;box-shadow:var(--ombra);
  transition:transform .12s ease;
}
.pr-riga:active{transform:scale(.99);}
.pr-riga-testa{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.pr-riga-testa strong{flex:1;font-family:var(--font-titolo);font-size:15.5px;color:var(--ink);}
.pr-var{
  font-family:var(--font-numeri);font-size:12.5px;font-weight:700;
  padding:2px 8px;border-radius:20px;background:var(--surface-sunk);color:var(--ink-faint);
}
.pr-var.su{background:var(--accent-soft);color:var(--accent-dark);}
.pr-var.giu{background:#FBEAE7;color:#A64B36;}
.pr-riga-corpo{display:flex;align-items:baseline;gap:9px;font-size:14px;color:var(--ink-soft);}
.pr-riga-corpo .forte{font-weight:700;color:var(--ink);}
.pr-freccia{color:var(--ink-faint);}
.pr-riga-piede{margin-top:5px;font-size:11px;color:var(--ink-faint);}

/* ── Il dettaglio ── */
.pr-frase{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;justify-content:center;
  padding:18px 16px;margin-bottom:18px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);text-align:center;
}
.pr-frase.su{border-color:var(--accent);background:var(--accent-soft);}
.pr-frase-da,.pr-frase-a{display:flex;flex-direction:column;gap:2px;}
.pr-frase-da span,.pr-frase-a span{
  font-family:var(--font-numeri);font-size:17px;font-weight:700;color:var(--ink);
}
.pr-frase-da span{color:var(--ink-soft);}
.pr-frase-da small,.pr-frase-a small{font-size:10.5px;color:var(--ink-faint);}
.pr-frase-freccia{font-size:20px;color:var(--ink-faint);}
.pr-frase-delta{
  flex-basis:100%;font-family:var(--font-numeri);
  font-size:26px;font-weight:700;color:var(--accent-dark);
}
.pr-frase-delta small{
  display:block;font-family:inherit;font-size:12px;font-weight:400;color:var(--ink-faint);
  margin-top:2px;
}

/* ── Il grafico ── */
.pr-grafico svg{width:100%;height:auto;display:block;overflow:visible;}
.pr-griglia{stroke:var(--line);stroke-width:1;}
/* Due linee, due forme: il carico è pieno, le ripetizioni tratteggiate.
   Il colore da solo non basterebbe — e qui il segnale conta, perché è
   proprio il confronto fra le due che dice in che fase si è. */
.pr-linea-kg{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;}
.pr-linea-reps{fill:none;stroke:var(--ink-faint);stroke-width:1.8;stroke-dasharray:4 3;stroke-linejoin:round;}
.pr-punto-kg{fill:var(--accent);}
.pr-punto-reps{fill:var(--ink-faint);}
.pr-asse{font-family:var(--font-numeri);font-size:9px;}
.pr-asse.kg{fill:var(--accent-dark);}
.pr-asse.reps{fill:var(--ink-faint);}
.pr-data{font-family:inherit;font-size:9px;fill:var(--ink-faint);}

.pr-legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;}
.pr-chiave{display:flex;align-items:baseline;gap:5px;font-size:12px;font-weight:600;color:var(--ink-soft);}
.pr-chiave small{font-weight:400;font-size:10.5px;color:var(--ink-faint);}
.pr-chiave::before{content:"";width:16px;height:0;border-top:3px solid var(--accent);border-radius:2px;}
.pr-chiave.reps::before{border-top:2px dashed var(--ink-faint);}

.pr-nota{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-faint);}

/* La tabella scorre da sola invece di far scorrere la pagina di lato: su un
   telefono una pagina che si muove in orizzontale è un difetto, non una
   funzione. */
.pr-tabella-scorre{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pr-tabella{width:100%;border-collapse:collapse;font-size:13.5px;min-width:300px;}
.pr-tabella th{
  text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--line-strong);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint);white-space:nowrap;
}
.pr-tabella td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);white-space:nowrap;}
.pr-tabella td.forte{font-weight:700;color:var(--ink);}
.pr-tabella tr:last-child td{border-bottom:none;}

/* ═══ LA SCELTA DEL TEMA (26/08/2026) ═══
   Tre pulsanti larghi uguali. L'icona è grande perché è quella che si
   riconosce prima della parola — ma la parola resta scritta: un'icona sola
   costringe a indovinare, e «🌗» non vuol dire «automatico» a nessuno. */
.tema-scelte{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.tema-scelta{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 6px;min-height:82px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;color:var(--ink-soft);
  transition:border-color .15s ease, background .15s ease;
}
.tema-icona{font-size:21px;line-height:1;margin-bottom:3px;}
.tema-scelta strong{font-size:12.5px;color:var(--ink);}
.tema-scelta small{font-size:10.5px;color:var(--ink-faint);text-align:center;line-height:1.35;}
.tema-scelta.attiva{
  background:var(--accent-soft);border-color:var(--accent);
}
.tema-scelta.attiva strong{color:var(--accent-dark);}

/* ═══ BORDI PIÙ MORBIDI (26/08/2026) ═══
   Richiesta di Luca: «arrotondare bordi». I raggi vivono nelle variabili
   (--r, --r-sm, --r-xs) e sono già stati alzati; qui si sistemano i pochi
   punti che avevano un numero scritto a mano e che sarebbero rimasti
   indietro, facendo sembrare il ritocco fatto a metà. */
.reg-campo input,.reg-slash,.reg-nota{border-radius:var(--r-sm);}
.reg-racconto,.int-bolla,.ali-alt{border-radius:var(--r);}
.es-card,.ali-pasto-c,.int-riga,.pr-riga{border-radius:var(--r);}

/* La striscia dell'aggiornamento in corso (27/08/2026).
   Ambra e non rossa: non è un errore del cliente e non è un guasto suo — è
   una cosa che sta succedendo dall'altra parte. Sta in cima, sopra tutto, e
   non si chiude: quando il server torna allineato basta riaprire l'app. */
.avviso-aggiornamento{
  position:sticky;top:0;z-index:60;
  padding:11px 16px;
  background:var(--amber-soft);color:var(--amber);
  border-bottom:1px solid var(--amber);
  font-size:13px;line-height:1.5;text-align:center;
  /* ⚠ Dal 30/08 la striscia SI TOCCA per aggiornare: deve sembrare toccabile,
   * altrimenti resta lì e nessuno prova a premerla. */
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.avviso-aggiornamento:active{filter:brightness(0.95);}

/* ═══════════════════════════════════════════════════════════════════════════
   LE SEQUENZE SUL TELEFONO (27 agosto 2026)

   Richiesta di Luca: «vorrei che la voce circuiti avesse i giri più che le
   serie, così da essere visualizzato meglio dal cliente come tale».

   Fino a oggi il portale non sapeva che le sequenze esistessero: una
   superserie erano due esercizi qualsiasi uno sotto l'altro. Il PDF le
   disegna dal 7 agosto, l'app no — e l'app è quella che si guarda in sala.

   ⚠ LA BARRETTA A SINISTRA È LA COSA CHE FA IL LAVORO. Dice «queste righe
   vanno insieme» senza bisogno di leggere niente, ed è la stessa grammatica
   del PDF: chi ha il foglio in mano e l'app aperta vede la stessa cosa.
   ═══════════════════════════════════════════════════════════════════════════ */

.seq{
  margin-bottom:12px;padding:12px 0 12px 13px;
  border-left:3px solid var(--accent);border-radius:3px;
}
/* Il circuito è più marcato degli altri: è l'unico in cui il modo di
   eseguirlo cambia davvero (si gira, non si ripete), ed è quello che il
   cliente sbaglia se non lo nota. */
.seq.seq-circuito{
  border-left-color:var(--accent-dark);
  background:var(--accent-soft);
  border-radius:var(--r);padding:14px 14px 14px 15px;
}
.seq-testa{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:5px;}
.seq-nome{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--accent-dark);
}
/* I giri scritti in grande, una volta sola: è il numero che conta, e nel
   circuito è l'unico che conta. */
.seq-giri{
  margin-left:auto;padding:3px 11px;border-radius:20px;
  background:var(--accent);color:#fff;font-size:12px;font-weight:600;
}
.seq-giri strong{font-family:var(--font-numeri);font-size:15px;}
.seq-istruzione{
  margin-bottom:10px;font-size:12.5px;line-height:1.55;color:var(--ink-soft);
}
.seq-stazioni .es-card{margin-bottom:8px;}
.seq-stazioni .es-card:last-child{margin-bottom:0;}
/* La lettera della stazione al posto del numero, come sul PDF. */
.es-card-numero.lettera{
  font-family:var(--font-titolo);
  color:var(--accent-dark);background:var(--accent-soft);
}
.seq.seq-circuito .es-card-numero.lettera{background:var(--surface);}

/* ═══════════════════════════════════════════════════════════════════════════
   IL CORE TRAINING SUL TELEFONO (27 agosto 2026)

   Richiesta di Luca: una sezione dedicata, che lui può posizionare come
   attivazione, prima del defaticamento o a fine allenamento.

   ⚠ NON HA L'ASPETTO DELLE CARD DEGLI ESERCIZI, ed è voluto. Le card grandi
   servono a chi si ferma davanti a un attrezzo fra una serie e l'altra: hanno
   il timer, il video, la casella dei carichi. Il core si fa di fila, a corpo
   libero, guardando l'elenco una volta sola — una tabella stretta si legge
   tutta in un colpo, cinque card no.

   È la stessa forma del riscaldamento, e non è un caso: sono le due fasi che
   si leggono in blocco invece che una riga per volta.
   ═══════════════════════════════════════════════════════════════════════════ */

.core-blocco{
  margin-bottom:14px;padding:14px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--ombra);
}
.core-testa{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin-bottom:10px;}
.core-nome{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--accent);
}
/* Il «quando» è la ragione per cui il blocco sta lì: si scrive, non si deduce
   dalla posizione. Chi apre la pagina a metà seduta non sa cosa viene prima. */
.core-quando{font-size:12px;color:var(--ink-faint);}
.core-riga{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:9px 0;border-top:1px solid var(--line);
}
.core-riga:first-child{border-top:none;padding-top:0;}
.core-riga-nome{flex:1;min-width:120px;font-size:15px;color:var(--ink);}
.core-riga-dati{
  font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;
}
.core-riga-dati small{
  display:block;font-family:inherit;font-size:10.5px;font-weight:400;
  color:var(--ink-faint);text-align:right;margin-top:1px;
}
.core-riga-nota{flex-basis:100%;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}

/* ═══ IL TASTO «MESOCICLO» FRA I GIORNI (28/08/2026 — C3) ═══
 * Sta nella fila dei giorni ma si distingue: è un altro modo di guardare
 * la stessa scheda, non un altro giorno. */
.all-tab-mesociclo{
  border-style:dashed;
  color:var(--verde, #7a8b5c);
  font-weight:700;
}

/* Il cronometro della seduta (28/08/2026): piccolo ma vero — minuti,
 * secondi, centesimi. Le cifre tabellari non ballano mentre scorrono. */
.seduta-crono{
  font-variant-numeric:tabular-nums;
  font-size:17px;
  letter-spacing:.02em;
}

/* ═══ I FESTEGGIAMENTI (28/08/2026, punto 10) ═══
 * Una modale vera: si apre al salvataggio e si chiude col pulsante o col
 * fondo. Niente riquadri fissi che intercettano i tocchi di nascosto. */
.festa-fondo{
  position:fixed;inset:0;background:rgba(20,26,23,.55);z-index:80;
}
.festa{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:81;
  width:min(420px,92vw);max-height:86vh;overflow-y:auto;
  background:var(--sfondo-carta,#fff);border-radius:18px;
  padding:26px 22px 20px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.3);
  animation:festa-entra .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes festa-entra{
  from{transform:translate(-50%,-42%) scale(.92);opacity:0;}
  to{transform:translate(-50%,-50%) scale(1);opacity:1;}
}
.festa-emoji{font-size:44px;line-height:1;margin-bottom:8px;animation:festa-salta .7s ease .15s;}
@keyframes festa-salta{
  0%,100%{transform:translateY(0);}
  40%{transform:translateY(-12px);}
  70%{transform:translateY(-4px);}
}
.festa h2{font-size:21px;margin:0 0 14px;}
.festa-numeri{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.festa-chip{
  background:var(--sfondo-rialzato,rgba(127,127,127,.09));
  border-radius:999px;padding:7px 13px;font-size:12.5px;
}
.festa-chip strong{font-size:14px;}
.festa-progressi{margin-bottom:12px;display:flex;flex-direction:column;gap:6px;}
.festa-record{
  font-size:13px;text-align:left;padding:9px 12px;border-radius:10px;
  background:var(--verde-tenue,rgba(122,139,92,.14));
}
.festa-frase{font-size:12.5px;opacity:.75;margin:0 0 14px;line-height:1.5;}
.festa-azioni{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ═══ LA LIBRERIA ESERCIZI (28/08/2026, punto 12) ═══ */
.zone-griglia{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.zona-card{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  padding:15px 14px;border-radius:14px;text-align:left;
  background:var(--surface);border:1px solid var(--line);
  font-family:inherit;color:var(--ink);
}
.zona-card strong{font-size:14.5px;}
.zona-card small{font-size:11px;color:var(--ink-faint);}
.zona-card:active{background:var(--accent-soft);border-color:var(--accent);}
.es-libreria{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;margin-bottom:8px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
}
.es-libreria-testo{min-width:0;}
.es-libreria-testo strong{display:block;font-size:14px;}
.es-libreria-testo small{font-size:11px;color:var(--ink-faint);}
/* Nella lista il pallino non è assoluto: sta nella riga, a destra. */
.es-play.in-lista{position:static;flex-shrink:0;}

/* ═══ «ALLA FINE» A CARTE (28/08/2026, punto 13) ═══ */
.fine-card{
  padding:12px 14px;margin-bottom:9px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);
}
.fine-card-testa{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.fine-card-testa strong{font-size:14.5px;}
.fine-card-descrizione{font-size:12.5px;color:var(--ink-faint);margin-top:3px;line-height:1.45;}
.fine-card .rec-timer{margin-top:10px;}
.fine-nota{
  width:100%;margin-top:10px;min-height:40px;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);color:var(--ink);
  font-family:inherit;font-size:13px;
}
.fine-nota::placeholder{color:var(--ink-faint);}

/* ═══ PRENOTA: presi e bloccati (28/08/2026, punti 15-16) ═══ */
.orario.preso{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--ink-faint);
  border:1px solid var(--line);text-decoration:line-through;
  opacity:.6;cursor:default;
}
.scelta-grande.bloccata{
  opacity:.55;cursor:default;
  background:var(--surface-2);
  filter:grayscale(.6);
}

/* ═══════ LE DUE PORTE — «Come mangiare» e «Gli esercizi» (29/08/2026) ═══════

   Richiesta di Luca: «i consigli alimentari tra "la tua settimana" e "il tuo
   percorso"… uno stile verticale sia per "come mangiare" che per "gli
   esercizi", li metti di fianco e in verticale.»

   Prima erano due sezioni in coda alla home, una sotto l'altra, ognuna con
   titolo, riquadro e bottone: sei righe di schermo per due cose che sono lo
   stesso gesto. Adesso due quadrati affiancati.

   ⚠ DUE COLONNE FISSE, E RESTANO DUE ANCHE SUL TELEFONO STRETTO. Non c'è un
   punto in cui si impilano, ed è voluto: impilandosi tornerebbero esattamente
   la cosa che stavamo togliendo. Il contenuto è corto apposta perché ci stia —
   due parole di nome e quattro di spiegazione. Se un giorno un nome cresce, si
   accorcia il nome, non si rompe la griglia.

   ⚠ IL BOTTONE È TUTTO IL QUADRATO, non una scritta dentro il quadrato: sul
   telefono il dito prende un'area, non un link. Per questo `.porta` è un
   <button> vero e non un <div> con un bottone dentro. */

/* ⚠ Le due porte non hanno un titoletto sopra: lo stacco dal blocco
 * precedente (le tessere della settimana) se lo devono dare da sole, o si
 * appoggiano ai bordi di quelle. */
.due-porte{
  display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:20px 0 11px;
}

.porta{
  /* `text-align:left` e il resto azzerano l'aspetto di <button>: senza,
     eredita il centrato e il font di sistema del browser. */
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 15px 16px;box-shadow:var(--ombra);
  transition:border-color .15s, transform .15s;
}
.porta:hover{border-color:var(--line-strong);}
.porta:active{transform:scale(.985);}

.porta-segno{font-size:23px;line-height:1;margin-bottom:7px;}
.porta-nome{font-weight:600;font-size:15px;}
.porta-sotto{font-size:12px;color:var(--ink-faint);line-height:1.35;}

/* Quando i consigli non ci sono ancora — cinque clienti su sei. Non sparisce:
   si spegne, e dice perché. Un buco nella griglia si nota più di un riquadro
   che spiega, e lascerebbe l'altra porta larga metà schermo, storta. */
.porta.spenta{
  background:var(--surface-2);cursor:default;box-shadow:none;
}
.porta.spenta .porta-segno{opacity:.45;}
.porta.spenta .porta-nome{color:var(--ink-soft);}

/* ═══ LE CALORIE STIMATE (29 agosto 2026) ═══

   ⚠ IL NUMERO NON DEVE ESSERE LA COSA PIÙ GRANDE DELLA PAGINA, ed è una scelta
   contro l'istinto: le calorie sono la cosa che l'occhio cerca per prima, e
   proprio per questo non vanno gridate. È una stima con un errore del 25%;
   scritta in grande come un record diventa un fatto, e qualcuno ci costruisce
   sopra una dieta. Sta in tono minore, e la spiegazione le sta sotto. */

.cal-media{
  display:flex;flex-direction:column;gap:1px;
  padding-bottom:11px;margin-bottom:9px;border-bottom:1px solid var(--line);
}
.cal-media strong{font-size:19px;}
.cal-media span{font-size:12px;color:var(--ink-faint);}

.cal-riga{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line);
}
.cal-riga:last-of-type{border-bottom:0;}
.cal-riga-nome{display:flex;flex-direction:column;gap:1px;font-size:14px;min-width:0;}
.cal-riga-nome small{font-size:11px;color:var(--ink-faint);}
.cal-riga-n{font-size:13px;color:var(--ink-soft);white-space:nowrap;}

/* La spiegazione: sempre visibile, mai dietro un tocco. Quello che si nasconde
   dietro un punto interrogativo non lo legge nessuno — e qui è la parte che
   conta più del numero. */
.cal-spiega{
  margin:11px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-faint);line-height:1.45;
}

/* ═══ LA FIGURA COI PALLINI — la libreria esercizi (29/08/2026 sera) ═══
   La foto dello scheletro è beige su fondo trasparente: sul fondo chiaro
   della pagina sparirebbe, quindi vive dentro un riquadro scuro — come la
   tavola anatomica da cui tutto è partito. I pallini sono in PERCENTUALE
   dell'immagine (vedi ZONE_SUL_CORPO in portale.js): si spostano con lei. */
.corpo-zone{
  max-width:420px;margin:0 auto 14px;
  background:var(--dark);border-radius:18px;padding:10px 0;
}
/* ═══ LA METODICA DELL'ASSESSMENT (1/09/2026 sera, richiesta di Luca) ═══
   Le scritte si accavallavano sul corpo: ora sul corpo restano SOLO i
   pallini colorati, e i nomi vivono in due legende ai lati del quadro —
   davanti a sinistra, dietro a destra, speculari: pallino a sinistra
   della scritta nella colonna sinistra, a destra della scritta nella
   colonna destra (parole sue). */
.zone-quadro{display:flex;align-items:center;gap:2px;padding:0 8px;}
.zone-legenda{flex:1 1 0;display:flex;flex-direction:column;gap:8px;min-width:0;}
.zona-legenda-riga{
  display:flex;align-items:center;gap:6px;
  background:none;border:0;padding:2px;cursor:pointer;font:inherit;
  font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.25;
  color:#F2F5F3;text-align:left;
}
/* La colonna destra è speculare: scritta prima, pallino dopo, tutto
   allineato verso il bordo destro. */
.zone-legenda.dx .zona-legenda-riga{justify-content:flex-end;text-align:right;}
.zona-pallino-legenda{
  width:12px;height:12px;border-radius:50%;flex:0 0 auto;
  border:2px solid #F2F5F3;box-shadow:0 0 0 2px rgba(0,0,0,.35);
}

/* L'involucro che COINCIDE con la foto: è lui lo spazio delle percentuali
   dei pallini — ancorarli a un contenitore più largo li schiaccerebbe
   verso il centro. */
.corpo-zone-figura{position:relative;flex:0 0 46%;}
.corpo-zone-foto{
  display:block;width:100%;user-select:none;-webkit-user-drag:none;
}
.corpo-zona{
  position:absolute;
  /* Il bottone ora È il pallino (più il padding toccabile): si centra. */
  transform:translate(-50%,-50%);
  display:flex;align-items:center;
  background:none;border:0;padding:6px;cursor:pointer;
}
.corpo-zona-punto{
  width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:2px solid #F2F5F3;
  box-shadow:0 0 0 3px rgba(0,0,0,.35);
}
.corpo-zona:active .corpo-zona-punto{filter:brightness(1.6);}

/* Le pillole sotto la figura: legenda, via accessibile, e rete per una zona
   senza coordinate. Sono TUTTE le zone, sempre. */
.zone-pillole{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;}
.zona-pillola{
  font:inherit;font-size:12.5px;padding:7px 12px;border-radius:99px;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  cursor:pointer;
}
.zona-pillola b{color:var(--ink-faint);font-weight:600;margin-left:2px;}
.zona-pillola:active{background:var(--accent-soft);border-color:var(--accent);}

/* ═══ LA STAMPA DEL PIANO ALIMENTARE (29/08/2026 sera) ═══
   Si stampa la pagina così com'è, togliendo tutto quello che su un foglio
   non ha senso: barre, pulsanti, scambi. Su iPhone: Condividi → Stampa →
   pizzicando l'anteprima si salva come PDF. */
.ali-stampa{display:block;margin:0 0 16px;}
@media print{
  /* ⚠ NIENTE FONDI SCRITTI A MANO nemmeno qui (regola di controllo-tema):
     si RIDEFINISCONO LE VARIABILI, così anche chi stampa col tema scuro
     acceso ottiene inchiostro scuro su carta bianca — un fondo hardcoded
     avrebbe lasciato il testo chiaro del tema scuro su foglio bianco. */
  :root{
    --bg:#fff; --surface:#fff; --surface-2:#fff; --sunk:#fff;
    --ink:#111; --ink-soft:#333; --ink-faint:#555;
    --scuro-fondo:none; --scuro-testo:#111; --scuro-tenue:#444; --scuro-morbido:#333;
  }
  .testa, .barra-basso, .btn-indietro, .ali-stampa, .ali-scambia,
  .brindisi, .avviso-aggiornamento, .foglio, .foglio-fondo{display:none !important;}
  .pagina{display:none;}
  .pagina.attiva{display:block;padding:0;}
  .riquadro, .riquadro-scuro, .ali-libera{
    box-shadow:none;border:1px solid #ccc;break-inside:avoid;
  }
}

/* ═══════════ LE FOTO (30/08/2026) ═══════════
   La foto in bolla, l'anteprima prima di mandare, la griglia dei prima/dopo
   nel profilo. Stesso linguaggio dei video: variabili del tema, mai colori
   fissi (controllo-tema docet). */

.int-bolla-foto{
  width:100%;max-height:340px;object-fit:cover;border-radius:12px;display:block;
  margin-bottom:6px;cursor:zoom-in;background:var(--surface-2);
}
.int-foto-anteprima{
  width:100%;max-height:340px;object-fit:contain;border-radius:12px;display:block;
  background:var(--surface-2);
}
.video-pieno img{
  width:100%;max-width:760px;max-height:82vh;object-fit:contain;border-radius:14px;
}

.foto-griglia{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;
}
/* La tendina del tempo (2/09/2026, rivista il 9/09/2026).
 *
 * Il dato «tempo» apre lo «scendi in 2″…» solo quando serve: la tendina resta,
 * ed è la parte che funziona.
 *
 * ⚠ IL BLU PIENO È STATO TOLTO. Luca, 9/09: «va benissimo la tendina sul tut
 * ma non evidenziarla di blu, al massimo che ci sia un riquadro non
 * ingombrante e che non salti all'occhio — torniamo alla pulizia di prima ma
 * con questa feature».
 *
 * Aveva ragione, e la ragione è di struttura: su quella riga ci sono quattro
 * dati alla pari — serie, ripetizioni, recupero, tempo. Colorarne UNO di blu
 * pieno diceva «questo conta più degli altri», che non è vero: il tempo è il
 * meno urgente dei quattro mentre si è sotto un bilanciere. E il blu è anche
 * il colore del TIMER, che lì accanto è l'unica cosa che va davvero premuta:
 * due blu vicini che vogliono dire cose diverse si annullano.
 *
 * Adesso è un dato come gli altri, con intorno un filo di bordo che dice
 * «questo si tocca». Il ▾ nell'etichetta fa il resto. */
.es-dato-tempo{
  background:transparent;color:inherit;cursor:pointer;font:inherit;
  border:1px solid var(--line);border-radius:8px;
  padding:2px 7px;margin:-3px 0;
  display:inline-flex;flex-direction:column;align-items:center;
  transition:border-color .15s ease,background-color .15s ease;
}
/* ⚠ Nessun colore di richiamo nemmeno da aperto: si sposta il BORDO, non il
 * fondo. Un fondo che si accende sotto il dito, su una card che si guarda
 * fra una serie e l'altra, è di nuovo la cosa che salta all'occhio. */
.es-dato-tempo:hover,.es-dato-tempo[aria-expanded="true"]{
  border-color:var(--line-strong);background:var(--surface-2);
}
/* ⚠ Un filo più piccolo degli altri tre dati, apposta. Serie, ripetizioni e
 * recupero sono i numeri che si guardano SOTTO il bilanciere; il tempo si
 * legge una volta all'inizio. Stessa famiglia, mezzo gradino indietro: è
 * quello che Luca chiedeva con «non ingombrante». */
.es-dato-tempo strong{font-size:16px;}
.es-dato-tempo small{color:var(--ink-faint);}

/* Il rullino (2/09/2026): le foto stanno chiuse dietro la maniglia, e la
 * pagina del profilo resta corta. */
.rullino summary{
  cursor:pointer;font-weight:600;font-size:14px;color:var(--ink);
  padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface-2);list-style:none;display:flex;align-items:center;gap:8px;
}
.rullino summary::-webkit-details-marker{display:none;}
.rullino summary b{margin-left:auto;background:var(--accent);color:#fff;border-radius:99px;
  padding:1px 9px;font-size:12px;}
.rullino[open] summary{margin-bottom:12px;}

/* Il confronto prima/dopo (31/08/2026): la coppia grande sopra la griglia. */
.foto-confronto{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;
}
.foto-cella{position:relative;margin:0;}
.foto-cella img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block;
  background:var(--surface-2);cursor:zoom-in;
}
.foto-cella figcaption{
  margin-top:4px;font-size:11px;color:var(--ink-faint);line-height:1.3;
}
/* Il ✕ è piccolo ma il bersaglio no: 30px toccabili su un bordo di foto. */
.foto-x{
  position:absolute;top:5px;right:5px;width:30px;height:30px;border:none;border-radius:50%;
  background:rgba(10,14,13,.55);color:#fff;font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

.foto-etichette{display:flex;gap:8px;margin-top:10px;}
.foto-etichetta{
  flex:1;min-height:38px;border:1px solid var(--line-strong);border-radius:10px;
  background:transparent;color:var(--ink-soft);font-family:inherit;font-size:13px;cursor:pointer;
}
.foto-etichetta.attiva{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark);font-weight:600;
}

/* La scorciatoia sul percorso (30/08/2026): un blocco sbloccato si tocca e
   apre il suo mesociclo. La freccia dice che è una porta, non una riga. */
.linea-voce.apribile{cursor:pointer;border-radius:10px;}
.linea-voce.apribile:active{background:var(--surface-2);}
.linea-freccia{
  align-self:center;color:var(--ink-faint);font-size:18px;flex-shrink:0;
  padding-left:4px;
}

/* ═══════════ IL CANCELLO DELL'INFORMATIVA E LA REGISTRAZIONE (30/08/2026) ═══ */
.cancello-informativa{
  position:fixed;inset:0;z-index:950;background:rgba(10,14,13,.55);
  display:flex;align-items:flex-end;justify-content:center;
}
.cancello-foglio{
  background:var(--surface);color:var(--ink);border-radius:18px 18px 0 0;
  width:100%;max-width:640px;max-height:92dvh;overflow-y:auto;
  padding:22px 18px calc(20px + env(safe-area-inset-bottom));
}
.cancello-foglio h2{font-family:var(--font-titolo);font-size:20px;margin:0 0 8px;}
.cancello-testo{
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  padding:4px 14px;margin:12px 0;max-height:44dvh;overflow-y:auto;
}
.cancello-testo h3{font-size:13.5px;margin:12px 0 4px;}
.cancello-testo p{font-size:13px;line-height:1.65;color:var(--ink-soft);margin:0 0 10px;}
.cancello-spunta{
  display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600;
  margin:12px 0;cursor:pointer;
}
.cancello-spunta input{width:20px;height:20px;flex-shrink:0;}

.reg-informativa{
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  padding:10px 14px;margin:14px 0;
}
.reg-informativa summary{font-size:13px;font-weight:700;cursor:pointer;}
.reg-informativa h3{font-size:13px;margin:10px 0 3px;}
.reg-informativa p{font-size:12.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 8px;}

.reg-credenziali{
  border:1px dashed var(--accent);border-radius:12px;background:var(--accent-soft);
  padding:14px;margin:16px 0;display:grid;gap:10px;
}
.reg-credenziali div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.reg-credenziali span{font-size:12px;color:var(--ink-soft);}
.reg-credenziali strong{font-size:16px;font-variant-numeric:tabular-nums;user-select:all;}

/* Il promemoria «aggiungi alla schermata Home» (30/08/2026): una striscia
   sotto la barra, presente ma non prepotente. Torna a ogni apertura finché
   l'app non gira dall'icona — è il punto, non un difetto. */
.promemoria-installa{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--accent-soft);border-bottom:1px solid var(--line);
  color:var(--ink);padding:11px 14px;font-size:12.5px;line-height:1.5;
}
.pi-icona{font-size:18px;flex-shrink:0;}
.pi-testo{flex:1;min-width:0;}
.pi-chiudi{
  flex-shrink:0;width:30px;height:30px;border:none;border-radius:50%;
  background:transparent;color:var(--ink-faint);font-size:14px;cursor:pointer;
}
.pi-chiudi:active{background:var(--surface-2);}


/* ═══ IL GIRO GUIDATO (21/09/2026) — velo scuro, riflettore sul pezzo di cui
   si parla, nuvoletta che spiega. Vedi il cappello in portale.js. ═══ */
.giro-velo{
  position:fixed;inset:0;z-index:900;
  background:rgba(20,28,26,.72);
  -webkit-tap-highlight-color:transparent;
}
body.giro-in-corso{overflow:hidden;}
/* Il riflettore non è un buco vero: è un rettangolo trasparente con un'ombra
   enorme tutto intorno. Stessa resa, un decimo della fatica. */
.giro-buco{
  position:fixed;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(20,28,26,.72),0 0 0 2px var(--accent);
  background:transparent;
  transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;
}
.giro-nuvola{
  position:fixed;left:50%;transform:none;
  width:min(360px,calc(100vw - 32px));margin-left:min(-180px,calc(-50vw + 16px));
  background:var(--surface);color:var(--ink);
  border-radius:18px;padding:18px;
  box-shadow:0 18px 50px rgba(20,28,26,.45);
  transition:top .25s ease;
}
.giro-titolo{margin:0 0 6px;font-family:var(--font-titolo);font-size:18px;font-weight:800;}
/* `pre-line`: una casella può andare a capo dove lo dice il testo — la firma
   «— Giuseppe» sta su una riga sua (24/09/2026). */
.giro-testo{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);white-space:pre-line;}
/* L'ultima casella del giro, in grande (24/09/2026): «BUON ALLENAMENTO 🐐».
   Una frase sola, da leggere a colpo d'occhio: niente testo sotto. */
.giro-nuvola.grande{text-align:center;padding:26px 18px 18px;}
.giro-nuvola.grande .giro-titolo{font-size:clamp(28px,8.5vw,38px);line-height:1.05;letter-spacing:.01em;margin:0 0 18px;text-wrap:balance;}
.giro-nuvola.grande .giro-testo{display:none;}
.giro-sotto{display:flex;align-items:center;gap:12px;}
.giro-punti{display:flex;gap:5px;flex:1;flex-wrap:wrap;}
.giro-punto{width:6px;height:6px;border-radius:50%;background:var(--line-strong);}
.giro-punto.qui{background:var(--accent);width:18px;border-radius:3px;}
.giro-salta{
  background:none;border:0;color:var(--ink-faint);font-size:13px;
  font-family:inherit;padding:6px 2px;cursor:pointer;
}
.giro-avanti{
  background:var(--accent);color:#fff;border:0;border-radius:12px;
  padding:11px 20px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;
}
@media (prefers-reduced-motion:reduce){ .giro-buco,.giro-nuvola{transition:none;} }

/* L'esito del salvataggio nasce vuoto (21/09/2026): finché non dice niente
   non deve nemmeno occupare spazio, o sotto al pulsante resta un buco. */
#reg-esito:empty{display:none;}

/* Il «coming soon» della HOME (24/09/2026, rifatto la notte stessa): niente
   più riquadro con l'etichetta «In arrivo» — Luca ha scelto la versione B,
   «come Allenamenti»: frase grande, peso normale, centrata, e sotto in
   grigio la stessa frase di Allenamenti. Le notifiche, solo se servono, in
   fondo e più piccole. Niente colori d'allarme: è un'attesa, non un problema.
   ⚠ `gap` di 26px e non 12: «uno spazio in più tra le due frasi» (Luca). */
.in-arrivo-home{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:26px;padding:26px 8px 6px;
}
.in-arrivo-home p{margin:0;font-weight:400;text-wrap:balance;}
.in-arrivo-home .in-arrivo-grande{max-width:20ch;}
.in-arrivo-notifiche{display:flex;flex-direction:column;align-items:center;gap:10px;}
.in-arrivo-notifiche p{font-size:14px;color:var(--ink-soft);}

/* Il «coming soon» della pagina Allenamenti (24/09/2026): richiesta di Luca,
   «centrale e in grande, non in quel riquadro, normale, non in grassetto».
   Niente fondo, niente bordo, peso 400 su tutte e due le righe.
   ⚠ L'ALTEZZA È LO SCHERMO MENO testa (60), spazio sopra (20), titolo (~50)
   e fascia in basso (~88), più le zone sicure dell'iPhone — e un filo MENO
   del necessario, apposta: una pagina che scorre per far vedere un vuoto è
   peggio di una scritta un pelo sopra il centro (che a occhio è il centro).
   `100vh` resta sotto come riserva per i telefoni che non conoscono `svh`.
   ⚠ `gap` di 26px (era 12) dal 24/09 notte: «uno spazio in più tra le due
   frasi», lo stesso della Home — le due schermate respirano uguali. */
.in-arrivo-pagina{
  min-height:calc(100vh - 240px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height:calc(100svh - 240px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;text-align:center;padding:0 8px;
}
.in-arrivo-pagina p{margin:0;font-weight:400;text-wrap:balance;}
.in-arrivo-grande{font-size:26px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);max-width:16ch;}
.in-arrivo-spiega{font-size:17px;line-height:1.55;color:var(--ink-soft);max-width:30ch;}