/* ============================================================
   COMPONENTI — mattoni riusabili dell'interfaccia.
   Regola di progetto: "festa" (gradienti, ombre colorate, molla) sui blocchi
   che motivano; "piatto" (superficie unita, contrasto alto, cifre tabulari)
   su tutto ciò che si legge mentre si lavora.
   ============================================================ */

/* ============================================================
   ENTRATA A CASCATA DELLE CARD
   Solo la PRIMA volta che si apre una sezione (js/animazioni.js tiene il
   conto): al ritorno la schermata è già conosciuta e rivederla montarsi
   somiglierebbe a un ricaricamento. 30 ms di sfasamento, non uno di più: sopra
   i 40 ms smette di sembrare "una cosa che arriva" e diventa "una lista lenta".
   `backwards` e non `both`: l'animazione riempie solo il tempo PRIMA di
   partire, e finita non lascia trasformazioni appese sull'elemento.
   ============================================================ */
.cascata {
  animation: cascata-entra var(--t) var(--e) backwards;
  animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes cascata-entra {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cascata { animation: none; } }

/* ============================================================
   PAGER DEI GIORNI — lo scorrimento continuo fra un giorno e l'altro.
   `touch-action: pan-y` è la chiave: lo scorrimento verticale resta al
   browser (fluido come deve essere), quello orizzontale è nostro.
   Il movimento è sempre e solo `transform`: nessun reflow, 60 fps.
   ============================================================ */
.pager {
  position: relative;
  /* `clip` e non `hidden`: taglia in orizzontale senza creare un contenitore
     di scorrimento, così la pagina continua a scorrere in verticale. */
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
}
.pager-pista {
  position: relative;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.pager-pan { width: 100%; }
/* Il pannello corrente è in flusso: è lui a dettare l'altezza della pagina. */
.pager-pan.corrente { position: relative; }
/* I due vicini stanno appena fuori schermo, con un respiro fra le pagine.
   ALTEZZA ZERO A RIPOSO. Essere `absolute` li toglie dal flusso, ma NON dal
   traboccamento: `.pager` taglia solo in orizzontale (deve, altrimenti le barre
   appiccicate smettono di appiccicarsi), quindi un vicino più alto del giorno
   visibile allungava la pagina — su un giorno di riposo si scorrevano schermate
   intere di vuoto perché a comandare era la seduta del giorno prima.
   A riposo sono quindi alti zero e tagliati; js/carosello.js li riaccende
   (`.lati-vivi`) solo mentre stanno davvero entrando in scena. */
.pager-pan.prec,
.pager-pan.succ { position: absolute; top: 0; height: 0; overflow: hidden; }
.pager.lati-vivi .pager-pan.prec,
.pager.lati-vivi .pager-pan.succ { height: auto; overflow: visible; }
.pager-pan.prec { left: calc(-100% - var(--pager-gap)); }
.pager-pan.succ { left: calc(100% + var(--pager-gap)); }
/* Durante il trascinamento nessun tocco deve attivare i controlli sottostanti. */
.pager.in-trascinamento .pager-pan { pointer-events: none; }

/* ---------- RIGA DI CONTESTO (settimana + frecce giorno) ---------- */
.riga-settimana {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.btn-freccia {
  flex: 0 0 auto;
  width: var(--touch); height: var(--touch);
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--velo); border: 1px solid var(--bordo); color: var(--txt-2);
  transition: transform var(--t-veloce) var(--e), background var(--t-veloce) var(--e), color var(--t-veloce) var(--e);
}
.btn-freccia:active { transform: scale(.9); background: var(--velo-2); color: var(--txt); }
.sett-eti { flex: 1; min-width: 0; text-align: center; line-height: 1.25; }
.sett-eti strong {
  display: block;
  font-size: var(--f-s); font-weight: var(--peso-forte); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sett-eti span {
  display: block;
  font-size: var(--f-eti); color: var(--txt-3); font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sett-eti.cambia { animation: cambia-testa var(--t-veloce) var(--e) both; }

/* ---------- BARRA DEI GIORNI + CALENDARIO ---------- */
/* Resta attaccata in alto: cambiando giorno si sa sempre dove si è, e il
   calendario è raggiungibile senza risalire tutta la scheda.
   Si ferma SOTTO la fascia di sistema (`--safe-top`, vedi css/base.css): la
   fascia è un elemento fisso a sé, quindi qui non serve nessun margine interno
   aggiuntivo — e la barra resta alta uguale anche quando è ancora a metà
   pagina, senza aprire un vuoto sopra la striscia dei giorni. */
.barra-giorni {
  position: sticky;
  top: var(--safe-top);
  z-index: 30;
  display: flex; align-items: stretch; gap: var(--sp-2);
  margin: 0 -18px var(--sp-3);
  padding: var(--sp-1) 18px var(--sp-2);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--bordo);
}
.barra-giorni .giorni-strip { flex: 1; min-width: 0; }
.btn-cal {
  flex: 0 0 auto;
  width: 42px;
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--velo); border: 1px solid var(--bordo); color: var(--txt-2);
  transition: transform var(--t-veloce) var(--e), background var(--t-veloce) var(--e), color var(--t-veloce) var(--e);
}
.btn-cal::after {
  content: "MESE";
  font-size: 7.5px; letter-spacing: .08em; font-weight: var(--peso-forte); color: var(--txt-3);
}
.btn-cal:active { transform: scale(.93); background: var(--velo-2); color: var(--txt); }

/* ---------- CALENDARIO MENSILE ---------- */
.cal { padding-bottom: 4px; }
.cal-testata {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.cal-testata .icona-tonda:disabled { opacity: .3; }
.cal-titolo { text-align: center; line-height: 1.15; }
.cal-titolo strong {
  display: block; font-size: var(--f-l); font-weight: var(--peso-forte);
  letter-spacing: -.03em; text-transform: capitalize;
}
.cal-titolo span { font-size: var(--f-xs); color: var(--txt-3); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; }

.cal-settimana {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1);
  margin-bottom: var(--sp-1);
}
.cal-settimana span {
  text-align: center;
  font-size: var(--f-micro); letter-spacing: .1em; font-weight: var(--peso-forte);
  color: var(--txt-3);
}

/* ALTEZZA COSTANTE DEL CALENDARIO.
   Le righe sono SEMPRE sei e SEMPRE alte uguali: `grid-template-rows` fissa la
   misura invece di lasciarla decidere al contenuto, e js/calendario.js riempie
   la griglia fino a 42 caselle anche nei mesi che ne userebbero 28.
   Serve a due cose insieme:
   · fra un mese e l'altro il foglio non cambia altezza (il foglio è ancorato in
     basso: cambiare altezza sposta frecce, titolo e legenda sotto il dito, e il
     tocco successivo finisce sul mese sbagliato);
   · dentro lo stesso mese una riga di sole giornate di riposo — senza etichetta
     della seduta — non risulta più bassa di una riga di allenamenti.
   Le celle non hanno più `min-height`: riempiono la riga, che è già ≥ 44 px. */
.cal-griglia {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, var(--cal-riga));
  gap: var(--sp-1);
}
.cal-vuota { height: 100%; }
.cal-g {
  position: relative;
  height: 100%;
  border-radius: 13px;
  border: 1px solid var(--bordo);
  background: var(--sup-piatta);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 2px;
  transition: transform var(--t-veloce) var(--e), background var(--t-veloce) var(--e);
}
.cal-g:active { transform: scale(.9); }
.cal-g .n { font-size: var(--f-metrica-s); font-weight: var(--peso-forte); line-height: 1; color: var(--txt); }
/* Il segno sotto il numero: pieno = si allena, vuoto = riposo. */
.cal-g .seg {
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent; border: 1.5px solid transparent;
  transition: background var(--t) var(--e), border-color var(--t) var(--e);
}
.cal-g.g-on  .seg { background: var(--acc); border-color: transparent; }
.cal-g.g-off .seg { background: transparent; border-color: var(--txt-3); }
/* L'etichetta della seduta. Il testo arriva già normalizzato da js/sedute.js
   («Dorso A», «Spinta», «Gambe B»): il maiuscoletto è qui, in un punto solo,
   così il casing non dipende più da come il piano del mese ha scritto il nome. */
.cal-g .tag {
  font-size: 8px; font-weight: var(--peso-forte); letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--txt-3); line-height: 1;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: entra-tag var(--t) var(--e) both;
}
@keyframes entra-tag { from { opacity: 0; } to { opacity: 1; } }
.cal-g.fuori { opacity: .3; background: transparent; border-style: dashed; }
.cal-g.fuori .n { color: var(--txt-3); font-weight: var(--peso-medio); }
/* Oggi: anello, sempre riconoscibile anche quando non è il giorno selezionato. */
.cal-g.oggi { border-color: var(--acc-3); box-shadow: inset 0 0 0 1px var(--acc-3); }
/* Giorno che si sta guardando: pieno, non c'è modo di confonderlo. */
.cal-g.scelto {
  background: var(--grad-freddo); border-color: transparent;
  box-shadow: var(--ombra-freddo);
}
.cal-g.scelto .n { color: var(--txt-inv); }
.cal-g.scelto .tag { color: var(--txt-inv); opacity: .78; }
.cal-g.scelto.g-on  .seg { background: var(--txt-inv); }
.cal-g.scelto.g-off .seg { border-color: var(--txt-inv); }

.cal-legenda {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--f-xs); color: var(--txt-3); font-weight: var(--peso-medio);
}
.cal-legenda span { display: flex; align-items: center; gap: 6px; }
.cal-legenda i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cal-legenda i.on { background: var(--acc); }
.cal-legenda i.off { border: 1.5px solid var(--txt-3); }
.cal-legenda i.oggi { border: 2px solid var(--acc-3); }
/* Due righe RISERVATE, sempre: la nota passa da «Carico i tipi di giornata…» a
   «31 giorni nel piano · 22 sedute» a un messaggio di ripiego più lungo, e se
   l'altezza seguisse il testo il pulsante «Vai a oggi» ballerebbe mentre si
   sfogliano i mesi — proprio nell'istante in cui il dito si sta muovendo. */
.cal-nota {
  font-size: var(--f-xs); color: var(--txt-3); margin-top: var(--sp-2);
  line-height: 1.45; min-height: calc(var(--f-xs) * 1.45 * 2);
}
.cal-azioni { margin-top: var(--sp-3); }
.cal-azioni .btn { width: 100%; }

/* ---------- CARD ---------- */
.card {
  background: var(--sup);
  border: 1px solid var(--bordo);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 13px;
}
.card.piatta { background: var(--sup-piatta); }
.card.stretta { padding: 14px; }
.card h3 { font-size: var(--f-m); font-weight: var(--peso-forte); letter-spacing: -.02em; line-height: 1.2; }

/* ---------- PULSANTI ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  min-height: var(--touch-comodo);
  padding: 0 20px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: var(--peso-forte);
  letter-spacing: .01em;
  transition: transform var(--t-veloce) var(--e), opacity var(--t-veloce) var(--e);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; }
.btn-caldo   { background: var(--grad-caldo);  color: var(--txt-inv); box-shadow: var(--ombra-caldo); }
.btn-freddo  { background: var(--grad-freddo); color: var(--txt-inv); box-shadow: var(--ombra-freddo); }
.btn-verde   { background: var(--grad-verde);  color: var(--txt-inv); box-shadow: var(--ombra-verde); }
.btn-scuro   { background: var(--bg); color: var(--txt); border: 1px solid var(--bordo-forte); }
.btn-fantasma{ background: var(--velo); color: var(--txt-2); border: 1px solid var(--bordo); }
.btn-piccolo { min-height: var(--touch); font-size: var(--f-s); padding: 0 15px; width: auto; }
.btn-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }

/* ---------- SEDUTA DEL GIORNO (blocco motivazionale) ---------- */
.seduta {
  border-radius: var(--r);
  padding: 20px;
  margin-bottom: 13px;
  position: relative;
  overflow: hidden;
  background: var(--grad-freddo);
  color: var(--txt-inv);
  box-shadow: var(--ombra-freddo);
}
/* Il filo di luce sul bordo alto è ciò che dà spessore alla card gradiente:
   senza, su uno schermo OLED il rettangolo colorato sembra incollato al fondo.
   Costa zero (è un'ombra interna, non un elemento) e non tocca il testo. */
.seduta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), var(--ombra-freddo); }
.seduta.riposo {
  background: var(--sup); color: var(--txt);
  border: 1px solid var(--bordo); border-top-color: var(--bordo-luce);
  box-shadow: var(--ombra-1);
}

/* ---------- LE BOLLE (stile lampada di lava) ----------
   La posizione la scrive js/bolle.js, fotogramma per fotogramma, con una
   fisica minima: deriva, micro-cambi di rotta e rimbalzo morbido sui bordi
   della card. Qui restano solo forma, colore e ritaglio.

   Perché non più `@keyframes`: un percorso scritto in CSS è lo STESSO giro
   all'infinito. Per non farsi riconoscere doveva essere lentissimo (~3 px/s),
   cioè invisibile. Con la fisica si può andare a 10-22 px/s — un movimento che
   si vede — senza che l'occhio impari mai il tragitto.

   `will-change` dichiarato una volta sola qui: le due proprietà che il ciclo
   tocca sono `translate` e `scale`, entrambe composite. */
.bolle {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
/* LA BOLLA È UNA SFUMATURA, NON UN CERCHIO SFOCATO (correzione del giro 7).
   Prima era un disco bianco pieno al 15% di opacità con `filter: blur(6px)`.
   Due difetti insieme: su un gradiente già chiaro un velo del 15% sta sotto la
   soglia di percezione — sul telefono la card sembrava semplicemente FERMA,
   anche mentre le bolle si muovevano davvero (misurato: tre bolle su tre
   spostate di ~40 px in 1,2 s, e invisibili) — e la sfocatura costava un
   passaggio fuori schermo per bolla a ogni fotogramma.

   La sfumatura radiale risolve entrambi: il centro può essere molto più denso
   (si vede) perché il bordo si spegne da solo fino a zero (resta morbido), e
   non c'è alcun filtro da calcolare — solo un gradiente disegnato una volta e
   poi traslato dal compositore. Più visibile E più leggera di prima.

   I tre toni non sono decorazione gratuita: bianco, rosa e ciano sono i colori
   dell'identità dell'app, e alternarli fa sembrare che dentro la card ci sia
   una luce che si muove, invece di tre macchie uguali.

   PERCHÉ LE CLASSI E NON PIÙ `nth-child` (giro 4). Ogni blob adesso ha anche
   una SCIA: un secondo elemento più grande e più tenue che insegue la stessa
   posizione con ritardo. Con i colori legati alla posizione fra i fratelli, le
   scie — che vengono dopo — avrebbero preso il bianco predefinito e la
   corrispondenza fra nucleo e scia si sarebbe rotta. Il colore adesso è una
   classe scritta da js/bolle.js: scia e nucleo la condividono, sempre. */
.bolle i {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  /* Tre fermate invece di due, e spegnimento al 92%: il nucleo resta denso
     (è ciò che si vede) mentre il bordo si allunga in una coda lunghissima che
     non disegna mai un contorno. È la differenza fra un blob di lampada di lava
     e un disco con l'alone. */
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .62) 34%,
    rgba(255, 255, 255, .24) 62%, rgba(255, 255, 255, 0) 92%);
  /* Le due sole proprietà che il ciclo tocca, entrambe composite. Dichiararle
     qui promuove la bolla su un livello proprio già al primo fotogramma,
     invece che al primo movimento. */
  will-change: transform, opacity;
}
.bolle i.b2 {
  background: radial-gradient(circle closest-side,
    rgba(255, 214, 236, .96) 0%, rgba(255, 150, 200, .58) 34%,
    rgba(255, 125, 186, .22) 62%, rgba(255, 125, 186, 0) 92%);
}
.bolle i.b3 {
  background: radial-gradient(circle closest-side,
    rgba(206, 246, 255, .96) 0%, rgba(130, 228, 255, .58) 34%,
    rgba(90, 220, 255, .22) 62%, rgba(90, 220, 255, 0) 92%);
}
.bolle i.b4 {
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, .90) 0%, rgba(205, 190, 255, .54) 34%,
    rgba(190, 170, 255, .20) 62%, rgba(190, 170, 255, 0) 92%);
}
.bolle i.b5 {
  background: radial-gradient(circle closest-side,
    rgba(226, 255, 244, .92) 0%, rgba(150, 245, 214, .52) 34%,
    rgba(110, 236, 198, .20) 62%, rgba(110, 236, 198, 0) 92%);
}
/* Card riposo: fondo unito e scuro, quindi i colori pieni ci si vedrebbero come
   macchie. Una sola sfumatura neutra, stesso movimento: le due card sono
   gemelle e devono comportarsi allo stesso modo.

   L'ATTENUAZIONE STA SULLO STRATO, NON SULLE BOLLE. Prima era
   `opacity: .18 !important` su ogni bolla, e dal giro 4 quell'`!important`
   avrebbe congelato il respiro di opacità che js/bolle.js scrive in linea:
   sulla card del riposo le bolle si sarebbero mosse senza mai accendersi.
   Attenuando lo strato che le contiene, il respiro resta e la card resta sobria. */
.seduta.riposo .bolle { opacity: .34; }
.seduta.riposo .bolle i {
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--txt-3) 92%, transparent) 0%,
    color-mix(in srgb, var(--txt-3) 34%, transparent) 46%,
    transparent 78%) !important;
}

/* I contenuti stanno sopra le bolle: `z-index` esplicito e non solo
   `position: relative`, perché senza un livello dichiarato lo strato delle
   bolle (primo figlio) e i contenuti finirebbero nello stesso piano.

   LA REGOLA ESCLUDE `.bolle`, E NON È UN DETTAGLIO (correzione del giro 8,
   diagnosi con prova visiva in scripts/collaudo_bolle.mjs).
   `.seduta > *` e `.bolle` hanno la STESSA specificità (0,1,0): a parità vince
   l'ultima scritta nel foglio, cioè questa. Il risultato era che lo strato
   delle bolle diventava `position: relative` — quindi un blocco di flusso
   normale, alto ZERO perché contiene solo figli assoluti — e il suo
   `overflow: hidden` ritagliava via TUTTE e quattro le bolle. Misurato:
   strato 414×0 px, quattro bolle con geometria e transform corretti, e zero
   pixel diversi fra due fotogrammi a 2,5 s di distanza. Le bolle si muovevano
   per davvero: non erano mai state dipinte.

   Da qui due presidi: la regola dei contenuti non tocca più lo strato, e la
   riga sotto ridichiara posizione e riquadro con specificità (0,2,0), così
   nessuna futura regola `.seduta > *` può riaprire lo stesso buco. */
.seduta > *:not(.bolle) { position: relative; z-index: 1; }
.seduta > .bolle { position: absolute; inset: 0; z-index: 0; }
.seduta .ora { font-size: var(--f-s); font-weight: var(--peso-forte); letter-spacing: .12em; text-transform: uppercase; opacity: .74; }
.seduta h2 { font-size: var(--f-l); font-weight: var(--peso-forte); letter-spacing: -.03em; line-height: 1.14; margin-top: 5px; }
/* Il dettaglio del nome della seduta: sta sotto il titolo, in piccolo, al
   massimo due righe. Il nome integrale resta nel suggerimento e nell'etichetta
   accessibile del titolo, oltre che nella Scheda. */
.seduta .coda-nome {
  font-size: var(--f-xs); font-weight: var(--peso-medio); opacity: .82;
  margin-top: 6px; line-height: 1.38;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.seduta .meta { font-size: var(--f-s); font-weight: var(--peso-medio); opacity: .8; margin-top: 10px; line-height: 1.45; }
.seduta.riposo .meta { opacity: 1; color: var(--txt-2); }
.seduta .btn-scuro { margin-top: 16px; background: rgba(10, 8, 24, .82); color: #fff; border-color: transparent; }
.seduta.riposo .btn-scuro { background: var(--bg); color: var(--txt); border-color: var(--bordo-forte); }

/* ---------- PUNTI DEL GIORNO DI RIPOSO ----------
   La nota del piano è un paragrafo unico e denso (camminata, cosa non fare,
   cosa succede domani, cosa registrare). A muro di testo era un blocco che
   nessuno legge; qui è un elenco di 2-4 punti, uno per frase, con il grassetto
   del piano interpretato davvero — mai gli asterischi a schermo. */
.punti-riposo {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 9px;
}
/* Il punto è un blocco di testo NORMALE con il pallino in posizione assoluta,
   non una griglia a due colonne: dentro c'è testo misto a `<strong>`, e in una
   griglia ogni pezzo di testo separato da un elemento diventa una cella a sé
   («**Camminata 30-45 minuti** a passo normale» finiva su quattro righe, una
   parola per riga). Con il flusso inline il grassetto resta dentro la frase. */
.punti-riposo li {
  position: relative;
  padding-left: 20px;
  font-size: var(--f-s);
  line-height: 1.5;
  color: var(--txt-2);
}
/* Pallino disegnato, non un carattere: resta identico su ogni telefono e
   allineato alla PRIMA riga anche quando il punto occupa tre righe. */
.punti-riposo li::before {
  content: "";
  position: absolute;
  left: 4px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc);
}
.punti-riposo b, .punti-riposo strong { color: var(--txt); font-weight: var(--peso-forte); }

/* Il pieghevole «Leggi tutto» dentro la card di riposo: va a filo dei bordi
   come nelle card a pannelli, con la sua linea di separazione sopra. */
.seduta .pieghevole-box {
  margin: 16px -20px -20px;
  border-top: 1px solid var(--bordo);
}
.seduta .pieghevole-box > .tog { border-top: none; }
.seduta .pieghevole-dentro { padding: 0 20px 16px; }

/* ---------- NUMERI DEL GIORNO ---------- */
.kcal-hero {
  border-radius: var(--r);
  padding: 22px 20px;
  margin-bottom: 13px;
  text-align: center;
  background: var(--sup);
  border: 1px solid var(--bordo);
  position: relative;
  overflow: hidden;
}
/* Alone della card delle kcal: stessa famiglia delle bolle, ma qui sotto c'è
   un numero da leggere, quindi si muove ancora meno — solo un respiro
   lentissimo, senza spostamento. Serve a non far sembrare la card un'immagine. */
.kcal-hero::before {
  content: "";
  position: absolute; inset: 0; opacity: .17; pointer-events: none;
  background: radial-gradient(60% 90% at 50% 0%, var(--acc), transparent 70%);
  transform-origin: 50% 0;
  animation: bolla-respiro var(--t-bolla-c) var(--e-bolla) infinite;
}
/* L'unico respiro rimasto in CSS: le bolle vere hanno una fisica propria
   (js/bolle.js), qui basta che l'alone non sembri un'immagine incollata. */
@keyframes bolla-respiro {
  0%   { scale: 1; }
  50%  { scale: 1.09; }
  100% { scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .kcal-hero::before { animation: none; } }
.kcal-hero > * { position: relative; }
.kcal-hero .v {
  font-size: var(--f-xxl);
  font-weight: var(--peso-forte);
  letter-spacing: -.045em;
  line-height: 1;
  background: var(--grad-caldo);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kcal-hero .e { margin-top: 8px; }
.kcal-hero .t { font-size: var(--f-xs); color: var(--txt-2); margin-top: 6px; }

.macro3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 13px; }
.mc {
  background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r-s);
  padding: 13px 11px;
  min-width: 0;
  /* La card diventa il contenitore di riferimento: il corpo del numero si misura
     sulla SUA larghezza, non su quella dello schermo. Così le tre card hanno
     sempre lo stesso identico corpo, su iPhone come su un tablet. */
  container-type: inline-size;
}
/* Valore + unità su UNA SOLA riga, sempre e in tutte e tre le card.
   A 26 px «162,9 g» e «294,3 g» non ci stavano e la «g» finiva sotto, mentre
   «71,5 g» (una cifra in meno) restava in riga: tre card disallineate.
   Il `clamp` sulla larghezza della card risolve il caso a monte, il `nowrap`
   garantisce che non possa succedere comunque. La prima riga è la riserva per
   i browser senza unità di container. */
/* 25cqi = un quarto della larghezza utile della card. Misurato: nella cella da
   88 px di un iPhone da 390 px «294,3 g» ci sta fino a 25,5 px di corpo; a 25cqi
   ne vengono 22, cioè il 14% di margine — abbastanza da coprire anche le cifre
   un po' più larghe del font di sistema di iOS. */
.mc .v {
  font-size: 20px;
  font-size: clamp(14px, 25cqi, 24px);
  font-weight: var(--peso-forte); letter-spacing: -.03em; line-height: 1.05;
  white-space: nowrap;
}
/* Etichetta e target su UNA riga sola, sotto la barra: «Proteine (165)».
   Erano due righe (nome sopra la barra, target sotto): tre righe per card, per
   tre card, facevano scendere i pasti sotto la piega ogni singolo giorno. */
.mc .e { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); font-weight: var(--peso-forte); margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc .b { height: 5px; border-radius: 3px; background: var(--velo-2); margin-top: 9px; overflow: hidden; }
/* La barra parte vuota e si riempie fino a `--q` quando entra davvero nello
   schermo (js/animazioni.js). Riempirla al momento del disegno significherebbe
   sprecare l'animazione per le barre che stanno sotto la piega: arrivandoci
   scorrendo, le si troverebbe già piene. */
.mc .b i { display: block; height: 100%; border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform var(--t-lento) var(--e-molla); }
.mc .b i.riempita { transform: scaleX(var(--q, 1)); }
.mc.p .b i { background: var(--grad-caldo); }
.mc.c .b i { background: var(--grad-freddo); }
.mc.g .b i { background: var(--grad-ambra); }

/* Badge "verificato": è la garanzia che il numero viene dal report, non da un calcolo dell'app. */
.verif {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent);
  border-radius: var(--r-s);
  padding: 12px 15px;
  font-size: var(--f-xs);
  color: var(--txt-2);
  line-height: 1.4;
}
.verif b { color: var(--ok-txt); font-weight: var(--peso-forte); white-space: nowrap; }
.verif .ic { flex: 0 0 auto; display: flex; color: var(--ok-txt); }
.verif .ic svg { width: 16px; height: 16px; }

/* ---------- RIGA PRE-WORKOUT (Oggi) ----------
   Sotto il blocco della seduta: quando si allena, l'ultima cosa da sapere
   prima di uscire è cosa si mangia prima. Riga sottile e a piena larghezza,
   con la stessa grammatica delle card pasto — porta esattamente lì. */
.pre-wo {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  min-height: var(--touch);
  padding: 11px 14px;
  margin: -4px 0 13px;
  border-radius: var(--r-s);
  background: var(--velo);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--ambra);
  transition: transform var(--t-veloce) var(--e), background var(--t-veloce) var(--e);
}
.pre-wo:active { transform: scale(.99); background: var(--velo-2); }
.pre-wo .ic { flex: 0 0 auto; display: flex; color: var(--ambra); }
.pre-wo .testo { flex: 1; min-width: 0; }
.pre-wo .eti { display: block; color: var(--txt-2); letter-spacing: .08em; }
.pre-wo .d {
  display: block; margin-top: 3px;
  font-size: var(--f-xs); color: var(--txt-3); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.pre-wo .frec { flex: 0 0 auto; color: var(--txt-3); display: flex; }

/* ---------- PASTI IN SINTESI ---------- */
.pasto-card {
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left;
  background: var(--sup);
  border: 1px solid var(--bordo);
  border-radius: var(--r-s);
  padding: 13px;
  margin-bottom: 9px;
  transition: transform var(--t-veloce) var(--e), border-color var(--t-veloce) var(--e);
}
.pasto-card:active { transform: scale(.985); }
.pasto-card.fatto { border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
.bolla {
  flex: 0 0 auto;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--f-eti); font-weight: var(--peso-forte); letter-spacing: .04em;
  color: var(--txt-inv);
  background: var(--grad-caldo);
  box-shadow: var(--ombra-caldo);
}
.bolla.fredda { background: var(--grad-freddo); box-shadow: var(--ombra-freddo); }
.bolla.verde  { background: var(--grad-verde);  box-shadow: var(--ombra-verde); }
.bolla.ambra  { background: var(--grad-ambra);  box-shadow: none; }
.pasto-card .testo { min-width: 0; flex: 1; }
.pasto-card h3 { font-size: 15.5px; font-weight: var(--peso-medio); letter-spacing: -.015em; line-height: 1.28; }
.pasto-card .d { font-size: var(--f-xs); color: var(--txt-3); margin-top: 3px; line-height: 1.4; }
.pasto-card .k { margin-left: auto; text-align: right; flex: 0 0 auto; }
.pasto-card .k b { font-size: 17px; font-weight: var(--peso-forte); }
.pasto-card .k small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); font-weight: var(--peso-forte); }

/* ---------- PROMEMORIA ---------- */
.prom li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r-s);
  padding: 13px; margin-bottom: 9px;
  font-size: var(--f-s); color: var(--txt-2); line-height: 1.5;
}
.prom li .ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--velo); color: var(--txt-2);
}
.prom li .ic svg { width: 18px; height: 18px; }
.prom li .ic.integ { color: var(--ok-txt); background: color-mix(in srgb, var(--ok) 13%, transparent); }
/* `b` è SOLO l'etichetta della riga («Integrazione»), scritta dall'app.
   Il grassetto che arriva dai piani è `strong` (vedi `mdInline`): prima
   condivideva questa regola e ogni «**3-5 g al giorno**» dentro un promemoria
   diventava un titolo a blocco che spezzava la frase in tre righe. */
.prom li b { display: block; color: var(--txt); font-weight: var(--peso-forte); font-size: var(--f-xs); margin-bottom: 2px; }
.prom li strong { color: var(--txt); font-weight: var(--peso-forte); }

/* ---------- ESERCIZIO (zona "lavoro": massima leggibilità) ---------- */
.ex {
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-radius: var(--r);
  margin-bottom: 12px;
  overflow: hidden;
}
.ex.attivo { border-color: transparent; box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 48%, transparent), var(--ombra-caldo); }
.ex.completo { opacity: .72; }
.ex-h { padding: 16px 16px 14px; }
.ex-h .riga1 { display: flex; align-items: center; gap: var(--sp-1); }
.ex-h .indice {
  display: inline-flex; align-items: center;
  min-height: 22px;
  font-size: var(--f-eti); font-weight: var(--peso-forte); letter-spacing: .1em;
  background: var(--velo); border: 1px solid var(--bordo);
  border-radius: var(--r-pill); padding: 0 10px; color: var(--txt-2);
}
/* Serie fatte su serie previste: dice a colpo d'occhio quanto manca. */
.ex-h .fatte {
  display: inline-flex; align-items: center;
  min-height: 22px; padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--f-eti); font-weight: var(--peso-forte);
  letter-spacing: .02em;
  background: var(--velo); border: 1px solid var(--bordo); color: var(--txt-3);
  transition: color var(--t) var(--e), background var(--t) var(--e), border-color var(--t) var(--e);
}
.ex-h .fatte.piena {
  color: var(--ok-txt);
  border-color: color-mix(in srgb, var(--ok) 36%, transparent);
  background: color-mix(in srgb, var(--ok) 13%, transparent);
}
.ex-h .riga1 .btn-info { margin-left: auto; }
.ex-h h3 { font-size: 19px; font-weight: var(--peso-forte); letter-spacing: -.025em; line-height: 1.2; margin-top: 10px; }

/* Il tasto "i": la scheda tecnica completa a un tocco, mai in faccia. */
.btn-info {
  flex: 0 0 auto;
  width: var(--touch); height: var(--touch);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--velo); border: 1px solid var(--bordo);
  color: var(--acc-txt);
  font-size: 17px; font-weight: var(--peso-forte); font-style: italic;
  transition: transform var(--t-veloce) var(--e), background var(--t-veloce) var(--e);
}
.btn-info:active { transform: scale(.9); background: var(--velo-2); }

/* ---------- METRICHE (serie×rip, RIR, tempo, recupero) ----------
   Il blocchetto più letto dell'app: si guarda con il bilanciere in mano.
   Regole: una sola griglia, celle di altezza identica, numeri in cifre
   tabulari perfettamente centrati, etichetta su --txt-2 (contrasto AA,
   non il grigio decorativo di prima) e separatori invece di 4 riquadri
   staccati — così le quattro voci si leggono come una riga sola. */
.met-griglia {
  display: grid;
  /* Il numero di colonne segue il numero di celle: la card esercizio ne ha due
     (serie×rip e RIR), la scheda tecnica quattro. Con `repeat(4, …)` fisso, la
     riga a due celle lasciava mezza griglia vuota. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--velo);
  border: 1px solid var(--bordo);
  border-radius: var(--r-s);
  overflow: hidden;
  margin-top: var(--sp-3);
}
.met {
  min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 4px;
  text-align: center;
  border-left: 1px solid var(--bordo);
  /* Le due righe che impediscono qualunque sovrapposizione: la cella può
     davvero restringersi e nulla di ciò che contiene può uscirne.
     È il difetto che si vedeva sul plank, dove «isometria 30 s» finiva
     sopra «RIR 3-4»: il valore era `nowrap` e tracimava nella cella accanto. */
  min-width: 0;
  overflow: hidden;
}
.met:first-child { border-left: none; }
.met .v {
  font-size: var(--f-metrica);
  font-weight: var(--peso-forte);
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--txt);
  max-width: 100%;
  /* Mai `nowrap`: se proprio non ci sta, il valore va a capo DENTRO la sua
     cella (e la riga di metriche cresce tutta insieme, restando allineata). */
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* Scalini di corpo assegnati da js/ui.js in base alla lunghezza del valore:
   «RIR 3-4» resta grande, «ISO 40-45 s» e «3×12-15/braccio» rimpiccioliscono
   quel tanto che basta a stare in riga senza toccare le celle vicine. */
.met .v.v-s  { font-size: var(--f-metrica-s); }
.met .v.v-xs { font-size: var(--f-metrica-xs); letter-spacing: -.01em; line-height: 1.18; }
.met .e {
  font-size: var(--f-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: var(--peso-forte);
  color: var(--txt-2);
  line-height: 1.1;
}
/* Due sole celle = spazio doppio per cella = numeri più grandi. È il motivo
   per cui la riga è stata ridotta a due voci: leggerle a un metro, col
   telefono appoggiato sulla panca. */
.met-griglia[data-celle="2"] .met { min-height: 62px; }
.met-griglia[data-celle="2"] .met .v { font-size: 23px; }
.met-griglia[data-celle="2"] .met .v.v-s { font-size: 19px; }
.met-griglia[data-celle="2"] .met .v.v-xs { font-size: 15px; }
.met-griglia[data-celle="2"] .met .e { font-size: var(--f-eti); }

/* Toni: l'intensità e il tempo sono i due parametri che si sbagliano di più,
   un colore li distingue senza aggiungere testo. */
.met.acc .v { color: var(--acc-txt); }
.met.freddo .v { color: var(--acc-2-txt); }
.met.verde .v { color: var(--ok-txt); }

/* Metrica che si può toccare (Intensità → voce RIR del vocabolario).
   Il puntino di richiamo accanto all'etichetta è l'unico modo, in una cella
   alta 62 px, di dire «qui c'è dell'altro» senza rubare spazio al numero. */
.met .e { display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.met-ci { display: inline-flex; opacity: .62; }
.met-ci svg { width: 11px; height: 11px; stroke-width: 2.4; }
.met-tocca { width: 100%; transition: transform var(--t-tocco) var(--e), background-color var(--t-tocco) var(--e); }
.met-tocca:active { transform: scale(var(--scala-tocco)); background: var(--velo); }
/* Sotto-etichetta: la usa il tempo di esecuzione a quattro cifre («2-1-1-0»),
   che senza di essa è la sigla più muta della scheda. */
.met.con-sotto { min-height: 74px; }
.met-sotto {
  font-size: 8.5px; letter-spacing: .02em; line-height: 1.25;
  color: var(--txt-3); text-transform: none; font-weight: var(--peso-medio);
  margin-top: 2px; max-width: 100%;
}
/* Sotto i 360 px ogni cella perde ~15 px: tutti gli scalini scendono di uno. */
@media (max-width: 359px) {
  .met .v { font-size: var(--f-metrica-s); }
  .met .v.v-s { font-size: 12.5px; }
  .met .v.v-xs { font-size: 10.5px; }
  .met .e { font-size: 8.5px; letter-spacing: .05em; }
}

/* ---------- CARICO DI OGGI / ULTIMA VOLTA ---------- */
.carico-riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--bordo);
}
.carico-riga .tgt-col { min-width: 0; }
.carico-riga .tgt { font-size: var(--f-l); font-weight: var(--peso-forte); letter-spacing: -.035em; line-height: 1; }
/* La condizione che nei mesi 5-6 sta fra parentesi dentro `carico_target`
   («(+2,5 kg se il collaudo è uscito pulito); back-off: metà zavorra»): sotto,
   in corpo piccolo, così il carico torna a essere un numero grande. Il testo
   integrale resta nel suggerimento e nel foglio della prescrizione. */
.carico-riga .tgt-coda {
  font-size: var(--f-xs); line-height: 1.4; color: var(--txt-3);
  margin-top: 5px; overflow-wrap: anywhere;
}
.carico-riga .tgt-e {
  font-size: var(--f-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-2); font-weight: var(--peso-forte); margin-bottom: 5px;
}
.carico-riga .ult {
  text-align: right; font-size: var(--f-eti); color: var(--txt-3);
  letter-spacing: .06em; text-transform: uppercase; font-weight: var(--peso-forte);
}
.carico-riga .ult b {
  display: block; font-size: var(--f-metrica); color: var(--txt-2);
  font-weight: var(--peso-forte); letter-spacing: -.02em; text-transform: none;
  margin-top: 3px; white-space: nowrap;
}

/* Un carico prescritto a parole («70-80% del carico del pushdown») non è un
   numero: alla taglia del numerone andrebbe a capo tre volte e spingerebbe le
   righe di registrazione sotto la piega. Scende di corpo e resta su una riga. */
.carico-riga .tgt.lungo {
  font-size: var(--f-metrica); letter-spacing: -.02em; line-height: 1.15;
}
/* Secondo scalino: le frasi-regola dei mesi di forza, oltre i 40 caratteri. */
.carico-riga .tgt.lungo.extra {
  font-size: var(--f-metrica-s); line-height: 1.3;
}

/* ---------- SERIE DI AVVICINAMENTO ----------
   Una TABELLINA, non una striscia di testo. La versione precedente allineava i
   gradini in orizzontale separati da «→»: con i gradini a parole («corpo
   libero», «metà zavorra») la striscia supera i 375 px di un iPhone, va a capo
   dove capita e le frecce restano appese a fine riga. Il risultato, in palestra,
   è un paragrafo da decifrare al posto di quattro numeri da eseguire.

   Ogni gradino è una riga con la stessa geometria: passo · carico · ×rip.
   I carichi si incolonnano, la rampa si legge dall'alto in basso nell'ordine in
   cui si esegue — la stessa direzione di lettura delle righe di registrazione
   che stanno subito sotto. Niente può sbrodolare: la colonna centrale è l'unica
   elastica ed è l'unica autorizzata ad andare a capo. */
.avvic {
  margin-top: var(--sp-3);
  padding: 10px 12px 11px;
  background: var(--velo);
  border: 1px solid var(--bordo);
  border-radius: var(--r-xs);
}
.avvic-testa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: 7px; min-width: 0;
}
.avvic-testa .e {
  font-size: var(--f-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-2); font-weight: var(--peso-forte); flex: none;
}
.avvic-testa .n {
  font-size: var(--f-eti); color: var(--txt-3); font-weight: var(--peso-forte);
  flex: none; white-space: nowrap;
}

.avvic-tab { list-style: none; margin: 0; padding: 0; }
/* 22px per il passo, il resto al carico, le ripetizioni a destra: tre colonne
   fisse su tutte le righe, così i numeri si leggono in verticale senza cercarli. */
.avvic-r {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-2);
  min-height: 32px;
  padding: 3px 0;
  border-top: 1px solid var(--bordo);
}
.avvic-r:first-child { border-top: 0; }
.avvic-r .p {
  font-size: var(--f-eti); font-weight: var(--peso-forte); color: var(--txt-3);
  text-align: center; font-variant-numeric: tabular-nums;
}
/* Il carico è l'unica cella che può andare a capo, e va a capo come RIGA della
   tabella (l'attrezzo scende sotto la percentuale), mai come paragrafo. */
.avvic-r .c {
  display: flex; align-items: baseline; flex-wrap: wrap;
  column-gap: 7px; row-gap: 1px; min-width: 0;
}
.avvic-r .c b {
  font-size: var(--f-metrica); font-weight: var(--peso-forte);
  letter-spacing: -.02em; color: var(--txt); line-height: 1.15;
}
/* Gradino senza percentuale («bilanciere vuoto»): è testo, non un numero, e non
   deve rubare la scala ai gradini che lo sono. */
.avvic-r .c b.testo {
  font-size: var(--f-xs); color: var(--txt-2); letter-spacing: 0;
  overflow-wrap: anywhere;
}
/* Precisazione del gradino: l'attrezzo su cui si esegue la rampa
   («40%» alla «lat machine», perché le trazioni sono a corpo libero). */
.avvic-r .c .q {
  font-size: var(--f-eti); color: var(--txt-3); font-weight: var(--peso-forte);
  overflow-wrap: anywhere;
}
.avvic-r .x {
  font-size: var(--f-metrica); font-weight: var(--peso-forte); color: var(--txt-2);
  letter-spacing: -.02em; white-space: nowrap; text-align: right;
  font-variant-numeric: tabular-nums;
}
/* La frase «su cosa sono le percentuali» è una didascalia: si legge una volta,
   sotto la tabella, e non si mette mai fra il titolo e i gradini. */
.avvic-did {
  margin: 8px 0 0; font-size: var(--f-eti); line-height: 1.4;
  color: var(--txt-3); overflow-wrap: anywhere;
}
/* Quando `carico_riferimento` è un PARAGRAFO e non un frammento (vedi
   `eParagrafoAutonomo` in js/schermate/allenamento.js) non è più una
   didascalia da una riga ma un pensiero del trainer da leggere: prende un filo
   a sinistra e un po' d'aria, così si distingue dai gradini della tabellina
   invece di sembrarne la coda. */
.avvic-did.discorsiva {
  margin-top: 10px; padding-left: 10px;
  border-left: 2px solid var(--bordo-forte);
  color: var(--txt-2); line-height: 1.5;
}

/* ---------- LA PROGRESSIONE DELLA SETTIMANA ----------
   Un blocco solo, in testa alla lista degli esercizi: dal mese 7 il campo
   `nota_progressione` porta qui il racconto che prima inquinava la didascalia
   della rampa di ogni esercizio. Fondo appena staccato e filo d'accento a
   sinistra: è contesto da leggere una volta, non una prescrizione da rileggere
   fra una serie e l'altra, quindi non deve competere con le card degli
   esercizi. */
.nota-progressione {
  padding: 14px 16px;
  margin-bottom: 12px;
  border-left: 3px solid var(--acc);
  background: color-mix(in srgb, var(--acc) 7%, var(--sup));
}
.nota-progressione .eti {
  display: block;
  font-size: var(--f-eti); font-weight: var(--peso-forte);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 7px;
}
.nota-progressione p { font-size: var(--f-s); line-height: 1.5; color: var(--txt-2); }
.nota-progressione p + p { margin-top: 8px; }

.carico-indic {
  margin-top: 9px; font-size: var(--f-eti); line-height: 1.4; color: var(--txt-2);
}
.carico-indic b { color: var(--txt); font-weight: var(--peso-forte); }

.cue {
  font-size: 13.5px; color: var(--txt-2); margin-top: var(--sp-3);
  padding: 11px 13px 11px 14px;
  background: var(--velo);
  border-left: 3px solid var(--acc);
  border-radius: 4px var(--r-xs) var(--r-xs) 4px;
  line-height: 1.45;
}
.cue b { color: var(--txt); font-weight: var(--peso-forte); }

/* ---------- REGISTRAZIONE SERIE ---------- */
.serie-lista { border-top: 1px solid var(--bordo); }
/* Cosa si registra quando la tecnica del giorno allunga la serie: una riga
   sola, sopra i campi, nel registro informativo (grigio) e non in quello delle
   azioni — non c'è niente da toccare, c'è da sapere cosa scrivere. */
.serie-nota {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--bordo);
  font-size: 12.5px; line-height: 1.4; color: var(--txt-2);
}
.serie-nota .ic { display: inline-flex; flex: 0 0 auto; margin-top: 1px; color: var(--txt-3); }
.serie-nota b { color: var(--txt); font-weight: var(--peso-forte); }
/* Colonne: numero · carico · ripetizioni · RIR · spunta.
   Il RIR vale 0,62 di una colonna piena e non 1: è precompilato dalla
   prescrizione e si tocca solo quando la serie è andata diversamente, mentre
   kg e ripetizioni si scrivono a ogni serie. Restringerlo allinea kg → rip →
   spunta su una linea che il pollice percorre senza deviare. */
.serie-riga {
  display: grid;
  grid-template-columns: 30px 1fr 1fr .62fr var(--touch);
  gap: 6px; align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--bordo);
}
/* Il RIR resta pienamente utilizzabile (≥ 44 px di altezza), solo più discreto:
   al tocco torna in primo piano come gli altri campi. */
.serie-riga .intesta .secondaria,
.serie-riga.intesta .secondaria { opacity: .62; }
.serie-riga input.secondaria {
  font-size: 15px;
  color: var(--txt-2);
  background: transparent;
  border-style: dashed;
}
.serie-riga input.secondaria:focus { color: var(--txt); background: var(--velo-2); border-style: solid; }
.serie-riga.salvata input.secondaria { background: transparent; }
.serie-riga.intesta {
  padding-top: 11px; padding-bottom: 5px; border-bottom: none;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); font-weight: var(--peso-forte); text-align: center;
}
.serie-riga .n {
  font-size: var(--f-s); font-weight: var(--peso-forte); color: var(--txt-3); text-align: center;
}
.serie-riga.salvata .n { color: var(--ok-txt); }
.serie-riga input {
  width: 100%; min-height: var(--touch);
  background: var(--velo); border: 1px solid var(--bordo); border-radius: var(--r-xs);
  text-align: center;
  font-size: 18px; font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  transition: border-color var(--t-veloce) var(--e), background var(--t-veloce) var(--e);
  -moz-appearance: textfield;
}
.serie-riga input::-webkit-outer-spin-button,
.serie-riga input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.serie-riga input:focus { border-color: var(--acc); background: var(--velo-2); outline: none; }
.serie-riga input::placeholder { color: var(--txt-3); font-weight: var(--peso-normale); }
.serie-riga.salvata input { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.btn-ok {
  width: var(--touch); height: var(--touch); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--velo); border: 1px solid var(--bordo); color: var(--txt-3);
  transition: transform var(--t-veloce) var(--e);
}
.btn-ok svg { width: 20px; height: 20px; }
.btn-ok:active { transform: scale(.9); }
.serie-riga.salvata .btn-ok { background: var(--grad-verde); color: var(--txt-inv); border-color: transparent; }
.btn-ok.festa { animation: pop var(--t-molla) var(--e-molla); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
/* Lampo verde sulla riga appena registrata: conferma visibile anche di sfuggita,
   col telefono a terra e il respiro corto. Solo opacity: nessun reflow. */
.serie-riga.appena::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ok);
  opacity: 0;
  pointer-events: none;
  animation: lampo 700ms var(--e) both;
}
.serie-riga { position: relative; }
@keyframes lampo { 0% { opacity: .22; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .serie-riga.appena::after { animation: none; } }

/* Un solo pulsante, a tutta larghezza: è il bersaglio più premuto della
   seduta e si centra con le mani sudate senza guardare. La nota libera è
   passata dentro il tasto «i» e sotto la pressione lunga sulla card. */
.ex-azioni { display: grid; gap: 8px; padding: 11px 12px 13px; }
.btn-recupero {
  min-height: var(--touch-comodo);
  border-radius: var(--r-pill);
  background: var(--grad-caldo); color: var(--txt-inv);
  font-weight: var(--peso-forte); font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--ombra-caldo);
  transition: transform var(--t-veloce) var(--e);
}
.btn-recupero:active { transform: scale(.97); }

/* ---------- APERTURA/CHIUSURA DETTAGLI ---------- */
.tog {
  width: 100%; min-height: var(--touch-comodo);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 10px 16px;
  border-top: 1px solid var(--bordo);
  font-size: var(--f-s); font-weight: var(--peso-medio); color: var(--acc-txt);
  text-align: left;
  transition: background var(--t-veloce) var(--e);
}
.tog .et { min-width: 0; line-height: 1.35; flex: 1; }
/* Etichetta su due righe: la seconda è la regola che NON può stare dietro un
   tocco («Pesce, verdure a foglia: sempre al momento»). Il pannello resta
   chiuso, ma la cosa da sapere è già detta. */
.tog.con-sotto { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.tog.con-sotto .tog-ic { margin-top: 2px; }
.tog.con-sotto .frec { margin-top: 2px; }
.tog .et-capo { display: block; }
.tog .et-sotto {
  display: block; margin-top: 3px;
  font-size: var(--f-xs); color: var(--txt-3);
  font-weight: var(--peso-normale); line-height: 1.4;
}
.tog .tog-ic { flex: 0 0 auto; display: flex; color: var(--acc-txt); }
.tog:active { background: var(--velo); }
/* Il pannello che si apre non "scatta": la freccia gira mentre l'altezza
   scorre, con la stessa durata. Sono due movimenti, ma si leggono come uno. */
.tog:active { transform: none; }
/* Card che contiene solo pannelli richiudibili: niente imbottitura e niente
   linea di separazione in cima, così in palestra gli esercizi salgono subito. */
.card.pannello { padding: 0; overflow: hidden; }
.card.pannello > .pieghevole-box > .tog,
.card.pannello > .tog { border-top: none; }
.card.pannello .pieghevole-dentro { padding: 0 16px 14px; }
/* Contenuto di un pannello che vive fuori da una card imbottita. */
.dentro-pannello { padding: 14px 16px 4px; }
/* Riga di sola lettura con l'aspetto di una checklist (pasti nei giorni di riposo). */
.check.statico { cursor: default; }
.check.statico:active { transform: none; }
/* Nota esplicativa in coda a un modulo: minuscola ma leggibile, non un'etichetta. */
.nota-fine { font-size: var(--f-xs); color: var(--txt-3); line-height: 1.5; margin-top: 4px; }
.tog .frec { transition: transform var(--t) var(--e); flex: 0 0 auto; color: var(--acc-txt); }
.tog[aria-expanded="true"] .frec { transform: rotate(180deg); }

/* L'altezza scorre davvero (0fr → 1fr) invece di saltare: è l'unico modo
   senza misurare il DOM in JavaScript. Il contenuto sfuma con `opacity`. */
.pieghevole {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--e);
}
.pieghevole > .pieghevole-dentro {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  /* Chiuso il contenuto esce anche dal percorso di tabulazione, non solo dalla vista. */
  visibility: hidden;
  transition: opacity var(--t-veloce) var(--e), visibility 0s linear var(--t);
}
.pieghevole.aperto { grid-template-rows: 1fr; }
.pieghevole.aperto > .pieghevole-dentro {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-veloce) var(--e) 60ms, visibility 0s;
}

/* ---------- CHIP (etichette contestuali) ----------
   Sostituiscono i vecchi «badge» sparsi: una sola forma, un solo corpo,
   allineamento verticale perfetto anche accanto a un'icona emoji. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  /* Un chip non si comprime MAI per far posto ai vicini: se non ci sta, la
     riga va a capo (è `flex-wrap` di `.chip-riga` a occuparsene). Senza questa
     riga, tre chip su una riga stretta si schiacciavano a vicenda e
     «Post-workout» si impaginava su tre righe da una parola l'una. */
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--f-eti);
  font-weight: var(--peso-forte);
  letter-spacing: .02em;
  line-height: 1.25;
  background: var(--velo);
  color: var(--txt-2);
  border: 1px solid var(--bordo);
  margin: 0;
  /* Un chip che cambia stato (da «da fare» a «fatto») deve virare, non
     sostituirsi: stessa durata del tocco, così sembra la conseguenza del dito. */
  transition: background-color var(--t-tocco) var(--e), color var(--t-tocco) var(--e),
              border-color var(--t-tocco) var(--e), transform var(--t-tocco) var(--e);
}
.chip .ci { display: inline-flex; flex: 0 0 auto; }
.chip .ci svg { width: 13px; height: 13px; stroke-width: 2.4; }
.chip.ok      { color: var(--ok-txt);     border-color: color-mix(in srgb, var(--ok) 34%, transparent);      background: color-mix(in srgb, var(--ok) 12%, transparent); }
.chip.batch   { color: var(--acc-2-txt);  border-color: color-mix(in srgb, var(--acc-2) 40%, transparent);   background: color-mix(in srgb, var(--acc-2) 14%, transparent); }
.chip.avviso  { color: var(--allerta);    border-color: color-mix(in srgb, var(--allerta) 42%, transparent); background: color-mix(in srgb, var(--allerta) 13%, transparent); }
.chip.acc     { color: var(--acc-txt);    border-color: color-mix(in srgb, var(--acc) 38%, transparent);     background: color-mix(in srgb, var(--acc) 12%, transparent); }
.chip-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
/* Chip che porta da qualche parte (es. «Già pronto dal batch» → conservazione).
   Resta un chip a vedersi, ma è un bersaglio vero: 32 px di altezza e la
   freccina che dichiara che si può toccare. */
.chip-btn { min-height: 32px; padding-right: 7px; cursor: pointer; }
.chip-btn .frec { opacity: .7; }
.chip-btn:active { transform: scale(var(--scala-tocco)); }

/* --- COLLISIONE DI NOMI: un chip non è mai un riquadro d'avviso ---
   `avviso`, `info` e `demo` sono nomi di TONO usati dai chip, ma esistono
   anche come blocchi a piena larghezza (sezione AVVISI, più sotto in questo
   foglio). A parità di specificità vince l'ultima regola scritta: «Nota di
   sicurezza» ereditava così `padding: 13px 15px`, `margin-bottom: 13px` e
   `align-items: flex-start` del riquadro, e risultava alto 47 px accanto a un
   chip da 24. Qui la forma del chip si riafferma con specificità 2 (due
   classi), che batte il riquadro ovunque stia nel foglio. */
.chip.avviso,
.chip.info,
.chip.demo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 10px;
  margin: 0;
  border-radius: var(--r-pill);
  font-size: var(--f-eti);
  line-height: 1.25;
}
.chip.info { color: var(--acc-2-txt); border-color: color-mix(in srgb, var(--acc-2) 40%, transparent); background: color-mix(in srgb, var(--acc-2) 13%, transparent); }
.chip.demo { color: var(--ambra);     border-color: color-mix(in srgb, var(--ambra) 46%, transparent);  background: color-mix(in srgb, var(--ambra) 12%, transparent); }
/* L'icona del chip resta centrata sulla riga: il riquadro d'avviso la
   spingeva di un pixel in basso (`margin-top: 1px`) per allinearla a un
   paragrafo, qui non c'è nessun paragrafo. */
.chip .ci,
.chip .ic { margin-top: 0; }

/* ---------- TIMER DI RECUPERO ---------- */
.timer-velo {
  position: fixed; inset: 0; z-index: 70;
  background: color-mix(in srgb, var(--bg) 92%, black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(24px + var(--safe-top)) 22px calc(30px + var(--safe-bot));
  animation: sfuma var(--t) var(--e) both;
}
@keyframes sfuma { from { opacity: 0; } to { opacity: 1; } }
.timer-velo .quale { font-size: var(--f-s); color: var(--txt-2); text-align: center; font-weight: var(--peso-medio); margin-bottom: 4px; }
.timer-velo .quale b { color: var(--txt); font-weight: var(--peso-forte); }
.timer-cerchio { position: relative; width: min(74vw, 268px); aspect-ratio: 1; margin: 10px auto 0; }
.timer-cerchio svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-cerchio circle { fill: none; stroke-linecap: round; }
.timer-cerchio .anello-bg { stroke: var(--velo-2); stroke-width: 12; }
.timer-cerchio .anello-fg { stroke: url(#gradTimer); stroke-width: 12; transition: stroke-dashoffset 1s linear; }
.timer-cerchio .centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timer-cerchio .n {
  font-size: var(--f-mega); font-weight: var(--peso-forte); letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.timer-cerchio .l { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-3); font-weight: var(--peso-forte); margin-top: 8px; }
.timer-cerchio.finito { animation: festa var(--t-lento) var(--e-molla); }
.timer-cerchio.finito .n { color: var(--ok-txt); }
@keyframes festa { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } }
/* ---------- «PROSSIMO» SUL VELO DEL TIMER ----------
   Sotto il cerchio, la sola informazione che serve mentre si recupera: la serie
   che viene, col suo carico, o l'esercizio successivo con la sua prescrizione.
   Arriva un attimo dopo il velo — l'occhio va prima sul numero grande e poi
   scende — e non si muove più: durante il conto alla rovescia nulla deve
   cambiare posizione, o si finisce per rileggerla ogni volta. */
.timer-prossimo {
  width: 100%; max-width: 380px;
  margin-top: 22px;
  padding: 12px 16px;
  border-radius: var(--r-s);
  background: var(--velo);
  border: 1px solid var(--bordo);
  text-align: center;
  animation: prossimo-entra var(--t) var(--e) both 140ms;
}
.timer-prossimo .et {
  display: block;
  font-size: var(--f-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-3); font-weight: var(--peso-forte);
}
.timer-prossimo b {
  display: block; margin-top: 5px;
  font-size: var(--f-m); font-weight: var(--peso-forte);
  letter-spacing: -.02em; line-height: 1.25;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}
@keyframes prossimo-entra {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .timer-prossimo { animation: none; } }

/* I controlli stanno in basso: si arrivano col pollice, a una mano, senza guardare.
   Tre colonne: −15 s · Pausa · +30 s, e sotto il pulsante grande a tutta riga. */
.timer-ctrl { width: 100%; max-width: 380px; margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.timer-ctrl .btn { min-height: 56px; padding: 0 10px; font-size: var(--f-s); }
.timer-ctrl .btn svg { width: 17px; height: 17px; }
.timer-ctrl .largo { grid-column: 1 / -1; font-size: 15px; }

/* Barra persistente: il recupero resta visibile anche scorrendo la scheda. */
.timer-barra {
  position: fixed;
  left: 50%; transform: translateX(-50%) translateY(120%);
  bottom: calc(var(--tab-h) + var(--safe-bot));
  width: 100%; max-width: var(--max-w);
  z-index: 45;
  background: var(--sup-2);
  border-top: 1px solid var(--bordo-forte);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  transition: transform var(--t) var(--e);
}
.timer-barra.visibile { transform: translateX(-50%) translateY(0); }
.timer-barra .bn { font-size: var(--f-l); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; letter-spacing: -.03em; min-width: 74px; }
.timer-barra .bt { flex: 1; min-width: 0; font-size: var(--f-xs); color: var(--txt-2); line-height: 1.3; }
.timer-barra .bt b { display: block; color: var(--txt); font-weight: var(--peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-barra .avanzamento { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--grad-caldo); transition: width 1s linear; }
.timer-barra .btn-piccolo { min-width: 92px; }

/* ---------- CHECKLIST (spesa, batch, pasti) ----------
   Griglia e non flex: la quantità ha una colonna sua che non schiaccia mai il
   nome dell'alimento, e nomi lunghi vanno a capo invece di traboccare.
   Su schermi stretti la quantità scende sotto il nome anziché comprimerlo.

   LA COLONNA DEL NOME HA UN PAVIMENTO. Con `minmax(0, 1fr)` la colonna del
   nome poteva ridursi a ZERO: bastava una quantità lunga («350 g di uovo
   intero + 1.110 g di albume») perché la colonna `auto` di destra si prendesse
   tutta la larghezza e «uova» finisse incolonnato una lettera per riga.
   `minmax(min-content, 1fr)` fissa il pavimento alla parola più lunga del
   nome: sotto quella misura la colonna non scende, e a cedere è la quantità
   (terza colonna, `minmax(0, auto)`), che sa già andare a capo in modo
   leggibile — grammi sulla prima riga, descrizione sulla seconda. */
.check {
  display: grid;
  grid-template-columns: auto minmax(min-content, 1fr) minmax(0, auto);
  align-items: center;
  gap: 4px 12px;
  width: 100%; text-align: left;
  min-height: var(--touch-comodo);
  padding: 11px 14px;
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-s);
  margin-bottom: var(--sp-1);
  transition: transform var(--t-veloce) var(--e), opacity var(--t-veloce) var(--e), border-color var(--t-veloce) var(--e);
}
.check:active { transform: scale(.99); }
.check .box {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px;
  border: 2px solid var(--bordo-forte);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background var(--t-veloce) var(--e), border-color var(--t-veloce) var(--e), transform var(--t-molla) var(--e-molla);
}
.check .box svg { width: 16px; height: 16px; }
/* `break-word` e non `anywhere`: `anywhere` azzera la larghezza minima del
   contenuto (una lettera), e con essa il pavimento `min-content` della colonna.
   Con `break-word` il pavimento è la parola più lunga — che è esattamente
   quello che serve perché «uova» non si incolonni mai. */
.check .testo { font-size: 15px; font-weight: var(--peso-medio); line-height: 1.35; overflow-wrap: break-word; }
.check .testo small { display: block; font-size: var(--f-xs); color: var(--txt-3); font-weight: var(--peso-normale); margin-top: 3px; line-height: 1.4; }
.check .qta {
  justify-self: end;
  min-width: 0;
  /* Tetto della colonna dei pesi: senza, una quantità lunga si prendeva tutto
     lo spazio disponibile e al nome ne restavano 90 px. Con il tetto è la
     quantità a cedere — e ha di che cedere, perché la parte discorsiva è già
     stata spostata sulla riga della nota. */
  max-width: 140px;
  text-align: right;
  font-size: var(--f-s); font-weight: var(--peso-forte); color: var(--txt-2);
  font-variant-numeric: tabular-nums; line-height: 1.3;
  overflow-wrap: break-word;
}
/* Nota della voce: riga propria, a piena larghezza sotto nome e quantità.
   È l'unico posto in cui un testo lungo non toglie spazio a nessuno. */
.check .nota-voce {
  grid-column: 2 / -1;
  margin-top: 2px;
  font-size: var(--f-xs);
  font-weight: var(--peso-normale);
  color: var(--txt-3);
  line-height: 1.45;
  overflow-wrap: break-word;
  text-align: left;
}
/* I grammi non si spezzano MAI: sono il dato che si legge davanti allo
   scaffale. La parte descrittiva («sgocciolate», «di parte edibile», il
   secondo peso delle uova) scende sotto, più piccola e chiara, e lì può
   andare a capo quanto le pare. */
.check .qta b {
  display: block;
  white-space: nowrap;
  font-weight: var(--peso-forte);
  color: var(--txt-2);
}
.check .qta small {
  display: block;
  margin-top: 2px;
  font-size: var(--f-eti);
  font-weight: var(--peso-medio);
  letter-spacing: 0;
  color: var(--txt-3);
  line-height: 1.35;
  overflow-wrap: break-word;
}
/* Sotto i 380 px la quantità va a capo sotto il nome: nessun testo compresso. */
@media (max-width: 379px) {
  .check { grid-template-columns: auto minmax(0, 1fr); }
  .check .qta { grid-column: 2; justify-self: start; text-align: left; color: var(--txt-3); max-width: none; }
  .check .qta b, .check .qta small { display: inline; }
  .check .qta small::before { content: " "; }
  .check .nota-voce { grid-column: 2; }
}
.check.spuntato { opacity: .5; }
.check.spuntato .box { background: var(--grad-verde); border-color: transparent; color: var(--txt-inv); }
.check.spuntato .box.festa { animation: pop var(--t-molla) var(--e-molla); }
.check.spuntato .testo { text-decoration: line-through; text-decoration-color: var(--txt-3); }

.reparto-tit {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  margin: var(--sp-5) 2px var(--sp-2);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--bordo);
}
.reparto-tit h3 { font-size: var(--f-b); font-weight: var(--peso-forte); letter-spacing: -.01em; min-width: 0; }
.reparto-tit .conta {
  flex: 0 0 auto;
  font-size: var(--f-eti); font-weight: var(--peso-forte); color: var(--txt-2);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  background: var(--velo); border: 1px solid var(--bordo); border-radius: var(--r-pill);
  padding: 3px 9px;
}
.reparto-tit .conta.pieno { color: var(--ok-txt); border-color: color-mix(in srgb, var(--ok) 34%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
/* Chiusura della lista della spesa: l'azione distruttiva sta in fondo, dopo
   l'ultimo reparto, separata da una linea — non sulla traiettoria del pollice
   che spunta. */
.chiusura-lista {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo);
}

/* ---------- SOTTOGRUPPO DENTRO UN REPARTO ----------
   Due specie sotto la stessa classe, e la differenza conta:
   · MERCEOLOGICO («Verdura», «Legumi secchi») — è un'etichetta d'ordine, resta
     discreta come prima;
   · FINESTRA D'ACQUISTO («1º acquisto · dom 9 o lun 10 mattina») — dice QUANDO
     si compra ciò che segue. Prima quelle righe stavano in un riquadro a parte,
     staccate dalle voci: «Acquisto n. 1» senza le sue voci sotto non dice cosa
     comprare. Adesso è un'intestazione vera, col quando in evidenza e una linea
     che la lega visivamente al blocco che apre. */
.sottogruppo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: var(--f-micro); letter-spacing: .12em; text-transform: uppercase;
  font-weight: var(--peso-forte); color: var(--txt-3);
  margin: var(--sp-3) 4px var(--sp-1);
}
.sottogruppo .sg-n { color: var(--txt-3); }
.sottogruppo.sg-acquisto {
  align-items: center;
  margin-top: var(--sp-4);
  padding: 7px 10px 7px 11px;
  border-left: 3px solid color-mix(in srgb, var(--acc) 58%, transparent);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background: color-mix(in srgb, var(--acc) 8%, transparent);
}
.sottogruppo.sg-acquisto .sg-ic { display: inline-flex; color: var(--acc-txt); }
.sottogruppo.sg-acquisto .sg-n { color: var(--txt); }
/* Il QUANDO è l'unica cosa che si legge da lontano: fuori dal maiuscoletto
   spaziato, a corpo pieno, nel colore dell'azione. */
.sottogruppo.sg-acquisto .sg-quando {
  text-transform: none; letter-spacing: -.01em;
  font-size: var(--f-s); font-weight: var(--peso-forte); color: var(--acc-txt);
}
.sottogruppo .sg-dett {
  flex: 1 0 100%;
  text-transform: none; letter-spacing: 0;
  font-size: var(--f-eti); font-weight: var(--peso-medio); color: var(--txt-3);
  line-height: 1.4;
}

/* Finestre d'acquisto che nei dati non sono legate a nessuna voce: elenco
   compatto, mai un paragrafo in grassetto. */
.finestre-acquisto {
  margin: var(--sp-2) 2px var(--sp-3);
  padding: 10px 13px;
  border: 1px dashed var(--bordo-forte); border-radius: var(--r-s);
}
.finestre-acquisto > .eti { display: block; margin-bottom: 7px; }
.finestre-acquisto li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px;
  padding: 3px 0;
  font-size: var(--f-xs); color: var(--txt-2);
}
.finestre-acquisto li + li { border-top: 1px solid var(--bordo); margin-top: 3px; padding-top: 6px; }
.finestre-acquisto li b { color: var(--txt); font-weight: var(--peso-forte); }
.finestre-acquisto li .q { color: var(--acc-txt); font-weight: var(--peso-forte); }
.finestre-acquisto li small { flex: 1 0 100%; color: var(--txt-3); line-height: 1.4; }

/* ---------- SPESA: I DUE MOMENTI D'ACQUISTO ----------
   Il criterio primario della schermata non è più il reparto ma il TEMPO:
   «tutto in una volta» e «da comprare a ridosso». Questo blocco è la risposta
   in dieci secondi, prima ancora di scorrere la lista. */
.momenti { margin: var(--sp-4) 0 var(--sp-2); }
.momenti-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.momento-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: var(--touch-comodo);
  padding: 12px 14px;
  text-align: left;
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-s);
  transition: transform var(--t-veloce) var(--e), border-color var(--t-veloce) var(--e);
}
.momento-chip:active { transform: scale(var(--scala-tocco)); }
.momento-chip b {
  font-size: var(--f-m); font-weight: var(--peso-forte); color: var(--txt);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.momento-chip .ti { font-size: var(--f-s); font-weight: var(--peso-forte); color: var(--txt); line-height: 1.2; }
.momento-chip small { font-size: var(--f-eti); color: var(--txt-3); font-weight: var(--peso-medio); line-height: 1.3; }
/* Acceso = questa settimana c'è davvero qualcosa da tornare a prendere. */
.momento-chip.acceso { border-color: color-mix(in srgb, var(--acc) 46%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.momento-chip.acceso b { color: var(--acc-txt); }
.momento-chip.spento { opacity: .62; }
/* ---------- MICRO-LEGENDA DEI COLORI ----------
   Una riga sola, sotto il sommario. Le tre parole in evidenza sono disegnate
   COL COLORE CHE DESCRIVONO: una legenda che spiega il caldo scrivendolo in
   grigio non serve a niente. */
.legenda-colori {
  margin-top: var(--sp-2);
  line-height: 1.5;
}
.legenda-colori .lg-azione { color: var(--acc-txt); font-weight: var(--peso-forte); }
.legenda-colori .lg-gelo { color: var(--acc-3); font-weight: var(--peso-forte); }
.legenda-colori .lg-neutro { color: var(--txt-2); font-weight: var(--peso-medio); }
.legenda-colori .lg-primo { color: var(--txt); font-weight: var(--peso-forte); }

/* Il livello 2: da dove arriva ogni indicazione. Discreto, mai in faccia. */
.momenti-fonti {
  display: flex; align-items: center; gap: 7px;
  width: 100%; min-height: var(--touch);
  margin-top: var(--sp-2); padding: 8px 12px;
  border: 1px dashed var(--bordo); border-radius: var(--r-s);
  background: transparent;
  font-size: var(--f-xs); font-weight: var(--peso-medio); color: var(--txt-3);
  text-align: left;
}
.momenti-fonti svg { flex: 0 0 auto; }
.momenti-fonti:active { transform: scale(var(--scala-tocco)); }

/* La testata della sezione «a ridosso»: stessa griglia del reparto, ma con il
   colore dell'accento — è l'unica parte della lista che chiede un secondo
   viaggio, e deve staccarsi dal resto senza gridare. */
.sez-momento.ridosso { margin-top: var(--sp-5); }
.reparto-tit.momento-tit { border-bottom-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.reparto-tit.momento-tit h3 { color: var(--acc-txt); }
.momento-d {
  font-size: var(--f-xs); color: var(--txt-3); line-height: 1.45;
  margin: 0 2px var(--sp-2);
}

/* ---------- BADGE DI UNA VOCE DELLA SPESA ----------
   Riga propria sotto nome e quantità, come la nota: qui il testo non toglie
   spazio a nessuno e i badge possono andare a capo invece di comprimersi.
   Ordine di lettura: QUANDO si compra, come si tratta, in che corsia sta. */
.check .badge-riga {
  grid-column: 2 / -1;
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 4px;
}
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: var(--f-eti); font-weight: var(--peso-forte);
  letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.35;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Il giorno d'acquisto: è l'informazione per cui questa schermata è stata
   rifatta, quindi è l'unica col colore pieno dell'accento. */
.badge.quando {
  background: color-mix(in srgb, var(--acc) 17%, transparent);
  border-color: color-mix(in srgb, var(--acc) 42%, transparent);
  color: var(--acc-txt);
}
/* «Congela subito» torna AZZURRO FREDDO, ed è la scelta dell'utente.
   Il giro precedente l'aveva reso caldo come «Compra ven mattina» per avere una
   regola sola di colore. All'uso le due azioni non si somigliano: «compra»
   riguarda il giro della spesa e si legge allo scaffale, «congela» riguarda il
   freezer e si esegue a casa. L'azzurro è mnemonico e le separa a colpo
   d'occhio; la micro-legenda in cima dichiara i due registri, quindi nessuno
   deve indovinare.

   `--acc-3` E NON `--acc-2`: il secondo è il viola dell'identità, il terzo è il
   ciano — l'unico dei tre che si legge davvero come «freddo» accanto al caldo
   del badge d'acquisto, ed è quindi l'unico che fa da mnemonico per il freezer.
   Vale in entrambi i temi: #3DD6FF sul fondo scuro, #0A7EA4 su quello chiaro. */
.badge.gelo {
  background: color-mix(in srgb, var(--acc-3) 16%, transparent);
  border-color: color-mix(in srgb, var(--acc-3) 46%, transparent);
  color: var(--acc-3);
}
.badge.corsia {
  background: var(--velo); border-color: var(--bordo);
  color: var(--txt-3); text-transform: none; letter-spacing: 0;
  font-weight: var(--peso-medio);
  white-space: normal;
}
.check.spuntato .badge { opacity: .6; }
@media (max-width: 379px) { .check .badge-riga { grid-column: 2; } }

/* ---------- FOGLIO «DA DOVE ARRIVANO I GIORNI» ---------- */
.fonti-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.fonte {
  padding: 12px 14px;
  background: var(--sup-piatta); border: 1px solid var(--bordo); border-radius: var(--r-s);
}
.fonte-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.fonte-cap b { font-size: var(--f-s); font-weight: var(--peso-forte); color: var(--txt); }
.fonte p {
  margin-top: 7px;
  font-size: var(--f-xs); color: var(--txt-2); line-height: 1.5; font-style: italic;
}
.fonte small {
  display: block; margin-top: 6px;
  font-size: var(--f-micro); letter-spacing: .1em; text-transform: uppercase;
  font-weight: var(--peso-forte); color: var(--txt-3);
}

/* ============================================================
   BATCH COOKING — agenda della settimana e sessioni a fisarmonica
   Vedi js/schermate/batch.js per il progetto e il perché di ogni scelta.
   ============================================================ */

/* ---------- L'AGENDA: quando si cucina, questa settimana ----------
   Il pezzo che mancava. Con cinque sessioni la risposta a «quando cucino?» era
   sepolta dentro il rotolo dei passi; qui sta in cinque righe, in testa. */
.agenda-batch {
  margin: var(--sp-4) 0 var(--sp-2);
  background: var(--sup);
  border: 1px solid var(--bordo);
  border-top-color: var(--bordo-luce);
  border-radius: var(--r);
  box-shadow: var(--ombra-1);
  overflow: hidden;
}
.agenda-testa {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
}
.agenda-testa .n { color: var(--txt-3); letter-spacing: .1em; }
/* Stessa tipografia di `.momento-d` in Spesa: le due schermate spiegano un
   elenco toccabile allo stesso modo, e la sottolineatura di questa riga è
   proprio che le due sezioni sono lo stesso tipo di oggetto. */
.agenda-sotto {
  font-size: var(--f-xs); color: var(--txt-3); line-height: 1.45;
  margin: calc(var(--sp-1) * -1) var(--sp-4) var(--sp-2);
}
.agenda-lista { display: flex; flex-direction: column; }
.agenda-riga {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 22px;
  align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left;
  min-height: var(--touch-comodo);
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--bordo);
  transition: transform var(--t-tocco) var(--e), background-color var(--t-tocco) var(--e);
}
.agenda-riga:active { transform: scale(.99); background: var(--velo); }
.agenda-riga .gg-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-riga .gg-eti {
  font-size: var(--f-s); font-weight: var(--peso-forte);
  letter-spacing: -.01em; color: var(--txt-2); white-space: nowrap;
}
.agenda-riga .gg-ora {
  font-size: var(--f-micro); letter-spacing: .1em; font-weight: var(--peso-forte);
  color: var(--acc-txt);
}
.agenda-riga .testo { min-width: 0; }
/* NIENTE PIÙ ELLISSI QUI, ED È UNA REGOLA, NON UNA PREFERENZA.
   Prima in questa riga finiva la frase intera del piano («Sessione principale —
   DOMENICA 30 agosto, ~2h30 attive (copre lun → mer)») e in 200 px diventava
   «Sessione principale — DOME…»: un titolo tagliato a metà parola, con la data
   ripetuta accanto alla colonna che la data la mostra già.
   Adesso qui arriva il solo TITOLO (js/batchtitoli.js): due-tre parole che
   ci stanno sempre. Se un giorno un piano ne scrivesse uno lungo, va a capo —
   non si accorcia. Il taglio è ciò che si sta eliminando, non lo strumento. */
.agenda-riga .q {
  display: block;
  font-size: 13.5px; font-weight: var(--peso-forte); line-height: 1.3;
  overflow-wrap: break-word;
}
/* I metadati: durata e conteggi. Vanno a capo invece di comprimersi, perché
   sono già stati scomposti in pezzi corti e nessuno di loro può traboccare. */
.agenda-riga .n {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
  margin-top: 3px;
  font-size: var(--f-eti); color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
.agenda-riga .n b { color: var(--txt-2); font-weight: var(--peso-forte); }
.agenda-riga .n > span { flex: 0 0 auto; }
.agenda-riga .seg { display: flex; justify-content: flex-end; color: var(--txt-3); }

/* La sessione di oggi: è la funzione a più alto valore della schermata, perché
   le micro-sessioni serali da tre minuti sono esattamente quelle che si
   dimenticano. Filo caldo a sinistra e fondo appena tinto. */
.agenda-riga.oggi {
  position: relative;
  background: color-mix(in srgb, var(--acc) 8%, transparent);
}
.agenda-riga.oggi::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: var(--r-pill);
  background: var(--grad-caldo);
}
.agenda-riga.oggi .q { color: var(--txt); font-weight: var(--peso-forte); }
.agenda-riga.passata .q,
.agenda-riga.passata .gg-eti { color: var(--txt-3); }
.agenda-riga.fatta .seg { color: var(--ok-txt); }
.agenda-riga.fatta .q { text-decoration: line-through; text-decoration-color: var(--txt-3); }

/* ---------- LA SESSIONE A FISARMONICA ---------- */
.sess {
  margin-bottom: var(--sp-2);
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-top-color: var(--bordo-luce);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t) var(--e);
}
.sess.aperta { border-color: var(--bordo-forte); box-shadow: var(--ombra-1); }
.sess.oggi { border-color: color-mix(in srgb, var(--acc) 38%, transparent); }
.sess.completa .sess-tit .q { color: var(--txt-3); }

.sess-testa {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left;
  min-height: var(--touch-comodo);
  padding: var(--sp-3) var(--sp-4);
  transition: transform var(--t-tocco) var(--e), background-color var(--t-tocco) var(--e);
}
.sess-testa:active { transform: scale(.995); background: var(--velo); }
.sess-tit { flex: 1; min-width: 0; }
/* IL TITOLO È IL TITOLO, NON LA FRASE.
   Fino al giro 3 qui arrivava il `quando` intero del piano («Sessione
   principale — DOMENICA 25 ottobre, ~1h15 attiva (copre lun → mer) — versione
   DELOAD»), ritagliato a due righe: si leggeva «…~2h30 attive (copre lun →…»,
   cioè un titolo troncato a metà parola e con la parentesi aperta. Adesso la
   frase è scomposta (js/batchtitoli.js) e ogni pezzo ha la sua riga:
     .q          il tipo di sessione, mai il giorno
     .sess-data  il giorno per esteso
     .sess-chip  durata, momento, copertura, contesto — chip che vanno a capo
     .sess-resto ciò che non è stato riconosciuto, INTERO
   Nessuno di questi elementi ha ellissi o `line-clamp`: se un testo è lungo va
   a capo. Il troncamento è il difetto che si sta togliendo di mezzo. */
.sess-tit .q {
  display: block;
  font-size: 16px; font-weight: var(--peso-forte);
  letter-spacing: -.02em; line-height: 1.25;
  overflow-wrap: break-word;
}
.sess-data {
  display: block;
  margin-top: 3px;
  font-size: var(--f-xs); color: var(--txt-2); font-weight: var(--peso-medio);
  line-height: 1.35;
}
.sess-chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 7px;
}
.sess-chip-v {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--bordo);
  background: var(--velo);
  font-size: var(--f-eti); font-weight: var(--peso-forte);
  color: var(--txt-2); line-height: 1.35;
  /* Nessun `white-space: nowrap`: un chip lungo manda a capo il proprio testo
     invece di sfondare la colonna o di farsi accorciare. */
  overflow-wrap: break-word;
}
.sess-chip-v .ci { display: inline-flex; color: var(--txt-3); }
/* La durata è il metadato che si cerca per primo: è l'unico acceso. */
.sess-chip-v.durata {
  color: var(--acc-2-txt);
  border-color: color-mix(in srgb, var(--acc-2) 38%, transparent);
  background: color-mix(in srgb, var(--acc-2) 12%, transparent);
}
.sess-chip-v.durata .ci { color: inherit; }
.sess-resto {
  display: block;
  margin-top: 7px;
  font-size: var(--f-xs); color: var(--txt-3); line-height: 1.45;
  overflow-wrap: break-word;
}
.sess-tit .sotto {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 7px;
  font-size: var(--f-xs); color: var(--txt-3);
}
.sess-tit .sotto b { color: var(--acc-2-txt); font-weight: var(--peso-forte); }
.sess-conta { font-variant-numeric: tabular-nums; }
.sess-conta.ok { color: var(--ok-txt); font-weight: var(--peso-forte); }
.sess-frec { flex: 0 0 auto; display: flex; color: var(--txt-3); transition: transform var(--t) var(--e); }
.sess.aperta .sess-frec { transform: rotate(180deg); }

/* Barra di avanzamento sottile, a filo della testata: si anima solo in scala
   orizzontale (composita), quindi spuntare un passo non costa un ricalcolo. */
.sess-barra {
  height: 2px;
  background: var(--velo-2);
  overflow: hidden;
}
.sess-barra i {
  display: block; height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--grad-verde);
  transition: transform var(--t) var(--e);
}

/* Apertura con `grid-template-rows` 0fr → 1fr: è l'unico modo, senza misurare
   nulla in JavaScript, di far SCORRERE l'altezza invece di farla saltare. */
.sess-corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--e);
}
.sess.aperta .sess-corpo { grid-template-rows: 1fr; }
.sess-corpo > .sess-dentro {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--t-veloce) var(--e);
}
.sess.aperta .sess-corpo > .sess-dentro { opacity: 1; padding: 0 var(--sp-3) var(--sp-3); }

/* Introduzione compressa a due righe: è contesto, non istruzione. */
.sess-intro { margin: 0 0 var(--sp-2); }
.sess-intro-tx {
  font-size: var(--f-xs); line-height: 1.5; color: var(--txt-2);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sess-intro-tx.tutto { display: block; -webkit-line-clamp: none; line-clamp: none; }
.sess-intro-tx .testo-tec p { margin-bottom: 0; }
/* Area toccabile piena (44 px di progetto) con ingombro visivo di una riga:
   il margine negativo in basso riassorbe l'altezza in eccesso, così il testo
   resta attaccato all'introduzione e il dito non deve centrare una riga alta
   come un carattere. */
.sess-intro-piu {
  display: inline-flex; align-items: center;
  min-height: var(--touch);
  margin: 0 0 -10px;
  padding-right: 10px;
  font-size: var(--f-eti); letter-spacing: .06em; text-transform: uppercase;
  font-weight: var(--peso-forte); color: var(--acc-txt);
}

/* Le uscite come checklist di contenitori: si aprono da sole a fine sessione. */
.uscite { display: flex; flex-direction: column; gap: 9px; }
.uscite li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: var(--f-xs); line-height: 1.5; color: var(--txt-2);
}
.uscite li .ci { flex: 0 0 auto; display: flex; color: var(--acc-2-txt); margin-top: 2px; }

/* ---------- CONSERVAZIONE: LA MAPPA DEL FRIGO ---------- */
.cons-card { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.cons-gruppo {
  display: flex; align-items: center; gap: 8px;
  margin: var(--sp-4) 0 var(--sp-2);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--bordo);
}
.cons-gruppo:first-child { margin-top: var(--sp-2); }
.cons-gruppo .ic { display: flex; color: var(--acc-3); }
.cons-gruppo .et {
  flex: 1;
  font-size: var(--f-eti); letter-spacing: .12em; text-transform: uppercase;
  font-weight: var(--peso-forte); color: var(--txt-2);
}
.cons-gruppo .n { font-size: var(--f-eti); color: var(--txt-3); font-variant-numeric: tabular-nums; }
.cons-gruppo.g-freezer .ic { color: var(--acc-2-txt); }
.cons-gruppo.g-altro .ic { color: var(--ambra); }
.cons-riga { padding: var(--sp-2) 0; }
.cons-riga .testa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px;
}
.cons-riga .testa b {
  font-size: 14.5px; font-weight: var(--peso-forte); line-height: 1.35;
  overflow-wrap: anywhere;
}
.cons-riga .dove { font-size: var(--f-xs); color: var(--txt-2); margin-top: 4px; line-height: 1.45; }
.cons-riga .nota { font-size: var(--f-xs); color: var(--txt-3); margin-top: 3px; line-height: 1.45; }

/* ---------- PASSO DI PREPARAZIONE (batch cooking) ----------
   Il passo non è una voce di lista: ha un numero d'ordine, un'azione, un
   metodo e un perché. Impilarli in colonna li rende leggibili in cucina,
   col telefono appoggiato e le mani occupate. */
/* Aree esplicite per tutte e quattro le celle: con lo scorrimento automatico,
   numero e casella (che occupano due righe) finivano per sovrapporsi al testo. */
.passi { display: flex; flex-direction: column; }
.passo {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 26px;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 0 var(--sp-3);
  width: 100%; text-align: left;
  padding: var(--sp-3);
  background: var(--sup);
  border: 1px solid var(--bordo);
  border-radius: var(--r-s);
  margin-bottom: var(--sp-1);
  transition: transform var(--t-veloce) var(--e), opacity var(--t-veloce) var(--e),
              border-color var(--t) var(--e), background-color var(--t) var(--e);
}
.passo:active { transform: scale(.99); }

/* IL FILO A OROLOGIO.
   Compare SOLO quando la sessione dichiara davvero una timeline relativa
   (`ora` in formato «0:00», «3:10»): con orari misti — «lun 21:00», «sera» —
   un filo verticale prometterebbe una sequenza a orologio che nei dati non c'è.
   Niente Gantt e niente barre di durata: la durata del singolo passo vive solo
   in prosa dentro `metodo` e non si parsa. */
.passi.filo .passo::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-3) + 14px);
  top: calc(var(--sp-3) + 34px);
  bottom: calc(-1 * var(--sp-1) - 1px);
  width: 2px;
  background: var(--bordo);
}
.passi.filo .passo:last-child::before { display: none; }
.passi.filo .ord-col { position: relative; z-index: 1; }
/* L'ora diventa una stazione sul filo: fondo pieno, così il filo le passa
   dietro invece che attraverso. */
.passi.filo .ora-passo {
  background: var(--sup);
  padding: 1px 5px;
  border-radius: 6px;
  transition: background-color var(--t) var(--e);
}
/* Numero d'ordine e, sotto, l'ora prevista: le sessioni lunghe della domenica
   sono programmate a orologio e «0:50» dice a colpo d'occhio a che punto della
   mattinata si è. Restano una colonna sola, larga come prima. */
.passo .ord-col {
  grid-area: 1 / 1 / 3 / 2;
  align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.passo .ora-passo {
  font-size: var(--f-micro); color: var(--txt-3);
  font-weight: var(--peso-forte); font-variant-numeric: tabular-nums;
  letter-spacing: .02em; white-space: nowrap;
}
.passo .ord {
  align-self: start;
  width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--velo-2); color: var(--txt-2);
  font-size: var(--f-s); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums;
  transition: background var(--t-veloce) var(--e), color var(--t-veloce) var(--e);
}
.passo .cosa {
  grid-area: 1 / 2 / 2 / 3;
  font-size: 15px; font-weight: var(--peso-medio); line-height: 1.42;
  overflow-wrap: break-word;
  padding-top: 4px;
}
.passo .box {
  grid-area: 1 / 3 / 3 / 4;
  align-self: start;
  width: 26px; height: 26px; border-radius: 9px;
  border: 2px solid var(--bordo-forte);
  display: flex; align-items: center; justify-content: center; color: transparent;
  margin-top: 2px;
  transition: background var(--t-veloce) var(--e), border-color var(--t-veloce) var(--e);
}
.passo .box svg { width: 16px; height: 16px; }
.passo .dettagli {
  grid-area: 2 / 2 / 3 / 3;
  display: flex; flex-direction: column; gap: 5px; margin-top: 8px;
}
.passo .metodo {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--f-xs); font-weight: var(--peso-forte); color: var(--acc-2-txt);
  letter-spacing: .01em; line-height: 1.35;
}
/* L'icona della postazione: forno, fornello, pentola a pressione, friggitrice,
   freddo, a mani. È un aiuto a colpo d'occhio, non un'informazione a sé — il
   testo dell'apparecchio resta sempre scritto accanto, per esteso. Se
   l'apparecchio non rientra in nessuna famiglia nota, l'icona semplicemente non
   compare: nessun ripiego generico, nessun punto interrogativo. */
.passo .metodo .ap { flex: 0 0 auto; display: flex; margin-top: 1px; opacity: .9; }
.passo .perche { font-size: var(--f-xs); color: var(--txt-3); line-height: 1.45; }

/* «SEI QUI»: il primo passo non ancora spuntato.
   È l'unica risposta alla domanda che ci si fa in cucina con le mani sporche —
   «a che punto ero?» — e scivola da sola al passo successivo appena si spunta. */
.passo .qui { display: none; }
.passo.corrente {
  border-color: color-mix(in srgb, var(--acc) 48%, transparent);
  background: color-mix(in srgb, var(--acc) 7%, var(--sup));
}
.passo.corrente .ord { background: var(--grad-caldo); color: var(--txt-inv); }
.passi.filo .passo.corrente .ora-passo { background: color-mix(in srgb, var(--acc) 7%, var(--sup)); }
.passo.corrente .qui {
  display: block;
  width: fit-content;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--grad-caldo);
  color: var(--txt-inv);
  font-size: var(--f-micro); letter-spacing: .12em; text-transform: uppercase;
  font-weight: var(--peso-forte);
}
.passo.spuntato { opacity: .5; }
.passo.spuntato .cosa > span:last-child { text-decoration: line-through; text-decoration-color: var(--txt-3); }
.passo.spuntato .ord { background: var(--grad-verde); color: var(--txt-inv); }
.passo.spuntato .box { background: var(--grad-verde); border-color: transparent; color: var(--txt-inv); }
.passo.spuntato .box.festa { animation: pop var(--t-molla) var(--e-molla); }

/* ---------- DATO (voce + indicazione) ----------
   Sostituisce le tabelle a due colonne che su 360 px spezzavano le parole:
   etichetta sopra, testo sotto, sempre a piena larghezza. */
.dato {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--bordo);
}
.dato:last-child { border-bottom: none; padding-bottom: 0; }
.dato:first-child { padding-top: 0; }
.dato dt {
  font-size: var(--f-eti); letter-spacing: .1em; text-transform: uppercase;
  font-weight: var(--peso-forte); color: var(--acc-txt);
  margin-bottom: 5px;
}
.dato dd { font-size: 14.5px; color: var(--txt-2); line-height: 1.55; overflow-wrap: anywhere; }
.dato dd b { color: var(--txt); font-weight: var(--peso-forte); }

/* Barra di avanzamento generica (spesa completata, aderenza, ecc.)
   Si anima `transform: scaleX`, non `width`: la larghezza costringe il browser
   a rifare il layout a ogni spunta, la scalatura vive sul compositore. */
.avanz { height: 8px; border-radius: var(--r-pill); background: var(--velo-2); overflow: hidden; }
.avanz i {
  display: block; height: 100%; width: 100%;
  border-radius: var(--r-pill);
  background: var(--grad-verde);
  transform: scaleX(var(--q, 0));
  transform-origin: left center;
  transition: transform var(--t-lento) var(--e-molla);
}

/* ---------- BARRA DELL'AVANZAMENTO SPESA (appiccicata in alto) ----------
   Al supermercato il numero che conta è uno solo: quante voci mancano. Prima
   scorreva via con la pagina alla prima scaffalatura; adesso resta in cima,
   sotto la Dynamic Island, con sfondo pieno.

   L'ALTEZZA È COSTANTE, ANCHE QUANDO SI "COMPRIME". Un elemento `sticky` occupa
   comunque il proprio spazio nel flusso: se cambiasse altezza mentre è
   incollato, tutto il contenuto sotto scivolerebbe di quei pixel e la lista
   sembrerebbe saltare sotto il dito. Perciò la compressione è puramente
   ottica — il contatore rimpicciolisce con `scale`, l'etichetta sfuma — e non
   tocca né il layout né lo scorrimento. */
.spesa-barra {
  position: sticky;
  top: var(--safe-top);          /* subito sotto la fascia di sistema */
  z-index: 25;
  margin: 0 -18px var(--sp-3);
  padding: var(--sp-2) 18px var(--sp-2);
  /* Più coprente della striscia dei giorni: qui dietro passano righe di testo
     fitte, e sotto ci sono due numeri che si leggono di sfuggita in negozio. */
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--bordo);
}
.avanz-riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  min-height: 34px;                 /* altezza inchiodata: vedi sopra */
  margin-bottom: var(--sp-2);
}
.avanz-testo {
  min-width: 0;
  display: flex; align-items: baseline; gap: 8px;
  transform-origin: left center;
  transition: transform var(--t) var(--e);
}
.avanz-conta { font-size: var(--f-l); font-weight: var(--peso-forte); letter-spacing: -.03em; line-height: 1.1; }
.avanz-testo .eti { line-height: 1.1; transition: opacity var(--t) var(--e); }
.avanz-perc {
  flex: 0 0 auto;
  font-size: var(--f-m); font-weight: var(--peso-forte); letter-spacing: -.03em;
  color: var(--ok-txt);
  transition: color var(--t) var(--e);
}
/* Lista completata: il numero diventa verde come la barra. */
.spesa-barra.completa .avanz-conta { color: var(--ok-txt); }
/* Scorrendo, la barra si fa più discreta: il contatore rimpicciolisce del 18%
   e l'etichetta lunga si spegne. Solo `transform` e `opacity`. */
.spesa-barra.compatta .avanz-testo { transform: scale(.82); }
.spesa-barra.compatta .avanz-testo .eti { opacity: 0; }
/* Filo sottile: in una barra sempre presente, 8 px di verde sarebbero un
   secondo titolo. Altezza fissa, come tutto il resto della barra. */
.spesa-barra .avanz { height: 5px; }

/* ---------- INTEGRAZIONE ---------- */
.integ-oggi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: var(--sp-3);
  background: var(--sup);
  border: 1px solid var(--bordo);
  border-radius: var(--r);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.integ-oggi .bolla { width: 44px; height: 44px; }
.integ-oggi .bolla svg { width: 22px; height: 22px; }
.integ-oggi .testo { min-width: 0; }
.integ-oggi .testo-tec { font-size: 15px; color: var(--txt); line-height: 1.5; }
.integ-oggi .testo-tec p:last-child { margin-bottom: 0; }

.no-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.no-voce {
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-s);
  padding: var(--sp-3);
}
.no-tit {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14.5px; font-weight: var(--peso-forte); letter-spacing: -.01em;
  margin-bottom: 5px;
}
.no-tit .x { color: var(--errore); flex: 0 0 auto; display: flex; align-self: center; }
.no-tit .x svg { width: 14px; height: 14px; stroke-width: 2.6; }
.no-motivo { font-size: 13.5px; color: var(--txt-2); line-height: 1.55; overflow-wrap: anywhere; }
.no-motivo b { color: var(--txt); font-weight: var(--peso-forte); }

/* Nota in chiusura di schermata: piccola ma leggibile, mai un'etichetta maiuscola. */
.nota-chiusura {
  font-size: var(--f-xs);
  color: var(--txt-3);
  line-height: 1.55;
  text-align: center;
  margin: var(--sp-5) var(--sp-2) 0;
}

/* ---------- PANNELLO A SCOMPARSA (scheda tecnica, ricetta) ---------- */
.foglio-velo {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: flex-end; justify-content: center;
  animation: sfuma var(--t-veloce) var(--e) both;
}
.foglio {
  width: 100%; max-width: var(--max-w);
  max-height: 92vh; max-height: 92dvh;
  background: var(--sup);
  border-radius: var(--r-l) var(--r-l) 0 0;
  border-top: 1px solid var(--bordo-forte);
  display: flex; flex-direction: column;
  animation: entra-foglio var(--t) var(--e) both;
}
@keyframes entra-foglio { from { transform: translateY(28px); opacity: .4; } to { transform: none; opacity: 1; } }
.foglio-h {
  flex: 0 0 auto;
  position: relative;                 /* la maniglia si posiziona QUI, non sul velo */
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bordo);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.foglio-h .maniglia {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--bordo-forte);
}
.foglio-h h2 { font-size: var(--f-m); font-weight: var(--peso-forte); letter-spacing: -.025em; line-height: 1.2; margin-top: 6px; }
.foglio-h .sotto { font-size: var(--f-xs); color: var(--txt-3); margin-top: 4px; }
.foglio-corpo {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 18px calc(26px + var(--safe-bot));
  /* Il corpo scorre per conto proprio: arrivato in fondo non deve trascinare
     la pagina sotto il foglio. */
  overscroll-behavior: contain;
}

/* ---------- FOGLIO A SCHERMO INTERO CON TESTATA FISSA ----------
   Quando il contenuto CAMBIA sotto un selettore (i grafici di un esercizio),
   un foglio alto quanto il contenuto è insostenibile: ogni vista ha un'altezza
   diversa, quindi a ogni tocco il foglio si alza o si abbassa e il selettore
   scivola sotto il dito. Qui il foglio prende tutta l'altezza disponibile una
   volta per tutte, e la fascia dei comandi è un blocco a sé, fuori dall'area
   scorrevole: al pixel, non si sposta mai. */
.foglio-pieno { height: 100dvh; max-height: 100dvh; border-radius: 0; }
.foglio-pieno .foglio-h { padding-top: calc(14px + var(--safe-top)); }
.foglio-pieno .foglio-h .maniglia { display: none; }
.foglio-fissa {
  flex: 0 0 auto;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--bordo);
  background: var(--sup);
}

/* Testo tecnico lungo: passi, cue, errori. Riga corta e interlinea generosa. */
.testo-tec { font-size: 14.5px; line-height: 1.62; color: var(--txt-2); }
.testo-tec h4 {
  font-size: var(--f-eti); letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc-txt); font-weight: var(--peso-forte);
  margin: 20px 0 8px;
}
.testo-tec h4:first-child { margin-top: 0; }
/* Titoli di terzo livello e oltre (i `###` dei ritagli di allenamento.md):
   sono sotto-sezioni di una sotto-sezione. In maiuscoletto spaziato
   diventavano due righe urlate; qui restano frasi, solo in evidenza. */
.testo-tec h4[data-liv="3"],
.testo-tec h4[data-liv="4"],
.testo-tec h4[data-liv="5"],
.testo-tec h4[data-liv="6"] {
  text-transform: none;
  letter-spacing: -.01em;
  font-size: var(--f-s);
  color: var(--txt);
  margin-top: 16px;
}
.testo-tec p { margin-bottom: 10px; }
.testo-tec b, .testo-tec strong { color: var(--txt); font-weight: var(--peso-forte); }
.testo-tec ol, .testo-tec ul { margin: 0 0 10px; padding-left: 4px; }
.testo-tec li { display: flex; gap: 10px; margin-bottom: 8px; }
.testo-tec li::before { content: "·"; color: var(--acc-txt); font-weight: var(--peso-forte); flex: 0 0 auto; }
.testo-tec ol { counter-reset: p; }
.testo-tec ol li { counter-increment: p; }
.testo-tec ol li::before {
  content: counter(p);
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  background: var(--velo-2); color: var(--txt-2);
  font-size: var(--f-eti); font-weight: var(--peso-forte);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.testo-tec table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: var(--f-xs); }
.testo-tec th, .testo-tec td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--bordo); }
.testo-tec th { color: var(--txt-3); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: var(--peso-forte); }

/* ---------- CARD PASTO (Dieta) ----------
   La testa è un unico bersaglio da ≥ 44 px: casella, nome, sintesi e orario
   si toccano insieme per segnare il pasto come consumato. */
.card.pasto { transition: border-color var(--t) var(--e), opacity var(--t) var(--e); }
.card.pasto.consumato { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pasto-testa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left;
  min-height: var(--touch);
  margin-bottom: var(--sp-3);
}
.pasto-testa .box {
  width: 28px; height: 28px; border-radius: 10px;
  border: 2px solid var(--bordo-forte);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background var(--t-veloce) var(--e), border-color var(--t-veloce) var(--e);
}
.pasto-testa .box svg { width: 17px; height: 17px; }
.pasto-testa .testo { min-width: 0; }
.pasto-testa strong {
  display: block;
  font-size: var(--f-m); font-weight: var(--peso-forte);
  letter-spacing: -.025em; line-height: 1.2;
}
.pasto-testa small {
  display: block;
  font-size: var(--f-xs); color: var(--txt-3);
  font-weight: var(--peso-normale); line-height: 1.4; margin-top: 3px;
}
.pasto-testa .ora {
  flex: 0 0 auto;
  font-size: var(--f-s); font-weight: var(--peso-forte); color: var(--txt-2);
  background: var(--velo); border: 1px solid var(--bordo); border-radius: var(--r-pill);
  padding: 4px 10px;
  letter-spacing: -.01em;
}
.card.pasto.consumato .pasto-testa .box { background: var(--grad-verde); border-color: transparent; color: var(--txt-inv); }
.card.pasto.consumato .pasto-testa .box.festa { animation: pop var(--t-molla) var(--e-molla); }
.card.pasto.consumato .pasto-testa strong { text-decoration: line-through; text-decoration-color: var(--txt-3); }
.card.pasto.consumato .ingr,
.card.pasto.consumato .tot-pasto { opacity: .6; transition: opacity var(--t) var(--e); }

/* Pannelli richiudibili che vanno a filo dei bordi della card. */
.zona-pieghevoli { margin: var(--sp-3) -18px 0; }

/* ---------- TABELLA INGREDIENTI (zona "lavoro") ---------- */
.ingr { width: 100%; border-collapse: collapse; font-size: 15px; }
.ingr td { padding: 10px 0; border-bottom: 1px solid var(--bordo); vertical-align: baseline; }
.ingr tr:last-child td { border-bottom: none; }
.ingr .g {
  text-align: right; white-space: nowrap; padding-left: 12px;
  font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; color: var(--txt);
}
.ingr .nome { color: var(--txt-2); line-height: 1.35; }
/* Riga secondaria dentro una cella (nota di un ingrediente, luogo di conservazione). */
.ingr .sotto-nota { display: block; color: var(--txt-3); font-size: 12px; font-weight: var(--peso-normale); margin-top: 2px; }

/* I totali del giorno non sono più una riga nel corpo della Dieta: le kcal
   stanno nella testata a destra (`.pl.kcal-testa` in css/base.css) e i macro
   nella coda del titolo. La regola `.tot-giorno` è stata tolta con il suo
   elemento: era il doppione di due numeri a quaranta pixel di distanza. */

/* La sinergia quotidiana è una micro-riga, non un paragrafo: due righe al
   massimo, il meccanismo integrale sta nel pieghevole «Perché funziona». */
.sinergia-riga { border-left-color: var(--acc-3); }

.tot-pasto {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bordo);
}
.tot-pasto div { text-align: center; }
.tot-pasto .v { font-size: 17px; font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tot-pasto .e { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); font-weight: var(--peso-forte); margin-top: 2px; }

/* ---------- AVVISI ---------- */
.avviso {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: var(--r-s); padding: 13px 15px; margin-bottom: 13px;
  font-size: var(--f-xs); line-height: 1.5; color: var(--txt-2);
  background: color-mix(in srgb, var(--allerta) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--allerta) 32%, transparent);
}
/* L'icona dell'avviso prende il colore dell'avviso stesso: giallo per i limiti
   di sicurezza, viola per le note informative. Un'emoji non poteva farlo. */
.avviso .ic { flex: 0 0 auto; display: flex; color: var(--allerta); margin-top: 1px; }
.avviso .ic svg { width: 17px; height: 17px; }
.avviso.info .ic { color: var(--acc-2-txt); }
/* Il testo dell'avviso non deve mai far traboccare la card: va a capo, sempre. */
.avviso > div { min-width: 0; overflow-wrap: anywhere; }
.avviso .testo-tec { font-size: var(--f-xs); line-height: 1.5; }
.avviso .testo-tec p:last-child { margin-bottom: 0; }
.avviso b { color: var(--txt); font-weight: var(--peso-forte); }
.avviso.info { background: color-mix(in srgb, var(--acc-2) 12%, transparent); border-color: color-mix(in srgb, var(--acc-2) 32%, transparent); }

/* «Mostra tutto» dentro un avviso: la parte didattica di una nota si apre in
   loco, con la stessa transizione d'altezza dei pieghevoli (0fr → 1fr), senza
   aprire un pannello a parte per due frasi. */
.nota-resto {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--e);
}
.nota-resto > div {
  overflow: hidden; min-height: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-veloce) var(--e), visibility 0s linear var(--t);
}
.nota-resto.aperta { grid-template-rows: 1fr; }
.nota-resto.aperta > div { opacity: 1; visibility: visible; transition: opacity var(--t-veloce) var(--e) 60ms, visibility 0s; }
.mostra-tutto {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; margin-top: 2px;
  font-size: var(--f-xs); font-weight: var(--peso-forte);
  color: var(--acc-2-txt);
}
.mostra-tutto svg { transition: transform var(--t) var(--e); }
.mostra-tutto[aria-expanded="true"] svg { transform: rotate(180deg); }
.avviso.demo { background: color-mix(in srgb, var(--ambra) 12%, transparent); border-color: color-mix(in srgb, var(--ambra) 40%, transparent); }

/* ---------- SEGNALAZIONE TEMPORANEA ---------- */
.toast {
  position: fixed; z-index: 90;
  left: 50%; bottom: calc(var(--tab-h) + 22px + var(--safe-bot));
  transform: translateX(-50%);
  background: var(--sup-3); color: var(--txt);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--r-pill);
  padding: 12px 20px;
  font-size: var(--f-s); font-weight: var(--peso-medio);
  box-shadow: var(--ombra-card);
  max-width: calc(100% - 36px);
  text-align: center;
  animation: toast-entra var(--t-molla) var(--e-molla) both;
}
@keyframes toast-entra { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%); } }

/* ---------- CELEBRAZIONE (l'anima "Energia") ---------- */
.celebra { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.celebra i {
  position: absolute; top: -14px;
  width: 9px; height: 15px; border-radius: 2px;
  animation: cade var(--dur, 1500ms) linear forwards;
}
@keyframes cade {
  from { transform: translateY(0) rotate(0); opacity: 1; }
  to   { transform: translateY(108vh) rotate(760deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .celebra { display: none; } }

.medaglia {
  position: fixed; inset: 0; z-index: 96;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 30px;
  background: color-mix(in srgb, var(--bg) 88%, black);
  text-align: center;
  animation: sfuma var(--t) var(--e) both;
}
.medaglia .disco {
  width: 128px; height: 128px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt-inv);
  background: var(--grad-verde); box-shadow: var(--ombra-verde);
  animation: festa var(--t-lento) var(--e-molla) both;
}
.medaglia .disco svg { width: 58px; height: 58px; stroke-width: 1.7; }
.medaglia h2 { font-size: var(--f-xl); font-weight: var(--peso-forte); letter-spacing: -.035em; }
.medaglia p { font-size: var(--f-s); color: var(--txt-2); line-height: 1.55; max-width: 320px; }
.medaglia .btn { max-width: 280px; }

/* ---------- SELETTORE SEGMENTATO ---------- */
.segm {
  display: flex; gap: 4px; padding: 4px;
  background: var(--velo); border: 1px solid var(--bordo); border-radius: var(--r-pill);
  margin-bottom: 14px;
  overflow-x: auto; scrollbar-width: none;
}
.segm::-webkit-scrollbar { display: none; }
.segm button {
  flex: 1 0 auto; min-height: var(--touch); padding: 0 15px;
  border-radius: var(--r-pill);
  font-size: var(--f-s); font-weight: var(--peso-forte); color: var(--txt-3);
  white-space: nowrap;
  transition: color var(--t-tocco) var(--e), background var(--t-tocco) var(--e),
              transform var(--t-tocco) var(--e);
}
.segm button[aria-pressed="true"] { background: var(--grad-freddo); color: var(--txt-inv); }

/* ---------- VARIANTE CON PILLOLA SCORREVOLE ----------
   Il fondo colorato non salta più da un pulsante all'altro: è un solo elemento
   che scivola, come il cursore della barra delle schede. I pulsanti restano
   trasparenti e cambiano solo colore del testo. */
.segm-guscio { position: relative; }
.segm.con-cursore { position: relative; margin-bottom: 0; }
/* Margini interni più stretti della variante base: con quattro viste
   («Progressione · Volume · e1RM · Parità kg») i 15 px per lato mandavano il
   selettore fuori misura di una trentina di pixel su un telefono da 390, e
   l'ultima etichetta restava tagliata. A 10 px ci stanno tutte; su schermi più
   stretti il selettore scorre, e le sfumature ai bordi lo dichiarano. */
.segm.con-cursore button { background: none !important; position: relative; z-index: 1; padding: 0 10px; }
.segm.con-cursore button[aria-pressed="true"] { color: var(--txt-inv); }
.segm-cursore {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--grad-freddo);
  box-shadow: var(--ombra-freddo);
  pointer-events: none;
  z-index: 0;
}
.segm.con-cursore.pronta .segm-cursore {
  transition: transform var(--t-molla) var(--e-molla), width var(--t-molla) var(--e-molla);
}
/* Sfumature ai bordi: dichiarano che il selettore scorre, senza tagliare
   nessuna etichetta a metà parola. Compaiono solo dal lato dove c'è altro. */
.segm-guscio::before,
.segm-guscio::after {
  content: "";
  position: absolute; top: 1px; bottom: 1px; width: 34px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-tocco) var(--e);
  border-radius: var(--r-pill);
  /* Sopra le etichette, non sotto: i pulsanti del selettore hanno `z-index: 1`
     per stare davanti alla pillola scorrevole, e senza questo livello la
     sfumatura veniva dipinta dietro il testo — cioè non si vedeva affatto. */
  z-index: 2;
}
/* Primo tratto pieno e poi la dissolvenza: con una sfumatura semplice, su un
   testo bianco in grassetto, l'ultima lettera restava comunque leggibile a
   metà — e una lettera tagliata a metà sembra un errore, non un invito a
   scorrere. Qui gli ultimi 12 px sono coperti del tutto. */
.segm-guscio::before { left: 1px; background: linear-gradient(to right, var(--sup) 0 12px, transparent); }
.segm-guscio::after { right: 1px; background: linear-gradient(to left, var(--sup) 0 12px, transparent); }
.segm-guscio.sfuma-sx::before,
.segm-guscio.sfuma-dx::after { opacity: 1; }
/* Etichetta non premibile al centro di un selettore (es. «Mese 1 · Settimana 1»):
   non deve traboccare né spingere fuori le frecce di navigazione. */
.segm .etichetta-fissa {
  flex: 1 1 auto; min-width: 0; opacity: 1; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis;
}

/* ---------- STRISCIA GIORNI (settimana) ---------- */
/* Griglia fissa a 7 colonne: la settimana si vede sempre tutta, non scorre
   mai e non entra in conflitto con lo swipe orizzontale del carosello. */
.giorni-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.gg {
  --gg-r: 14px;
  position: relative;
  /* Contesto d'impilamento proprio: il riempimento sta sotto il testo della
     casella senza dover contrattare uno `z-index` con il resto della pagina. */
  isolation: isolate;
  min-height: 60px;
  border-radius: var(--gg-r); border: 1px solid var(--bordo); background: var(--sup);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform var(--t-tocco) var(--e), border-color var(--t) var(--e), color var(--t) var(--e);
}

/* IL RIEMPIMENTO DEL GIORNO SCELTO È UNO STRATO, NON UN CAMBIO DI SFONDO.
   Due difetti in una sola riga di CSS, entrambi visti sul telefono:

   1. IL CAMBIO SECCO. `background` che passa da una tinta unita a un gradiente
      NON è una proprietà interpolabile: il browser la commuta in un fotogramma.
      Scorrendo da un giorno all'altro il colore saltava da una casella
      all'altra invece di passarci. Qui il gradiente c'è SEMPRE, sotto ogni
      casella, e a cambiare è solo la sua `opacity` — composita, quindi la
      dissolvenza è fluida a 60 fps e non costa un ricalcolo di layout.
      Il momento in cui parte lo decide js/vistagiorno.js (`alAvvio` del
      carosello): esattamente quando la pagina inizia a scorrere.

   2. L'ANELLO SCURO AL BORDO. Lo strato è `inset: -1px`, cioè copre anche il
      bordo di un pixel della casella, con il raggio maggiorato dello stesso
      pixel perché le due curve coincidano: il colore arriva al filo esatto del
      raggio. (La causa di fondo — l'origine dello sfondo — è corretta
      nell'azzeramento di css/base.css: questa è la geometria che la completa.)

   L'alone colorato vive sullo strato e non sulla casella: così sfuma insieme al
   riempimento invece di accendersi e spegnersi di colpo. */
.gg::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: calc(var(--gg-r) + 1px);
  background: var(--grad-freddo);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--acc-2) 60%, transparent);
  opacity: 0;
  transform: scale(.96);
  transition: opacity var(--t) var(--e), transform var(--t) var(--e);
  pointer-events: none;
}
.gg[aria-current="date"]::before { opacity: 1; transform: none; }

.gg:active { transform: scale(var(--scala-tocco-forte)); }
.gg .d {
  font-size: var(--f-micro); letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt-3); font-weight: var(--peso-forte);
  transition: color var(--t) var(--e), opacity var(--t) var(--e);
}
.gg .n {
  font-size: 18px; font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; line-height: 1;
}
.gg .p {
  width: 5px; height: 5px; border-radius: 50%; background: transparent; border: 1.5px solid transparent;
  transition: background-color var(--t) var(--e), border-color var(--t) var(--e);
}
.gg.on .p { background: var(--acc); }
.gg.off .p { border-color: var(--txt-3); }
.gg[aria-current="date"] { border-color: transparent; color: var(--txt-inv); }
.gg[aria-current="date"] .d { color: var(--txt-inv); opacity: .82; }
.gg[aria-current="date"] .p { background: var(--txt-inv); border-color: var(--txt-inv); }
/* Oggi resta riconoscibile anche mentre si guarda un altro giorno. */
.gg.oggi::after {
  content: "";
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 2px; border-radius: var(--r-pill);
  background: var(--acc-3);
  transition: background-color var(--t) var(--e);
}
.gg[aria-current="date"].oggi::after { background: var(--txt-inv); }

/* ---------- CARD DI NAVIGAZIONE (hub "Altro", mesi) ---------- */
.nav-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r-s);
  padding: 15px; margin-bottom: 9px; min-height: 66px;
  transition: transform var(--t-veloce) var(--e);
}
.nav-card:active { transform: scale(.985); }
.nav-card .ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--velo); color: var(--txt-2);
}
.nav-card .ic svg { width: 22px; height: 22px; }
.nav-card .ic.caldo { background: var(--grad-caldo); }
.nav-card .ic.freddo { background: var(--grad-freddo); }
.nav-card .ic.verde { background: var(--grad-verde); }
.nav-card .ic.ambra { background: var(--grad-ambra); }
.nav-card .testo { flex: 1; min-width: 0; }
.nav-card h3 { font-size: 16px; font-weight: var(--peso-forte); letter-spacing: -.015em; }
.nav-card p { font-size: var(--f-xs); color: var(--txt-3); margin-top: 2px; line-height: 1.4; }
.nav-card .frec { flex: 0 0 auto; color: var(--txt-3); }

/* ---------- MESI: fase, mese, settimane ----------
   La griglia a due colonne di prima, su 360 px, mandava a capo il ruolo della
   settimana su cinque righe. Qui ogni settimana è una riga piena: numero a
   sinistra, date e ruolo che possono respirare, stato a destra. */
/* Le fasi sono contesto, non uno strumento: righe compatte, in coda ai mesi. */
.fase {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-xs);
  margin-bottom: 5px;
}
.fase .barra { align-self: stretch; border-radius: var(--r-pill); background: var(--velo-2); }
.fase.attiva { border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.fase.attiva .barra { background: var(--grad-caldo); }
.fase h4 { font-size: 13.5px; font-weight: var(--peso-medio); line-height: 1.3; letter-spacing: -.01em; }
.fase .quando { font-size: var(--f-eti); color: var(--txt-3); margin-top: 2px; font-variant-numeric: tabular-nums; }

.mese-card { padding-bottom: var(--sp-1); }
.mese-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.mese-testa .num {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--velo); border: 1px solid var(--bordo);
  font-size: var(--f-m); font-weight: var(--peso-forte); letter-spacing: -.03em;
  color: var(--txt-2);
}
.mese-card.ora .mese-testa .num { background: var(--grad-caldo); color: var(--txt-inv); border-color: transparent; box-shadow: var(--ombra-caldo); }
.mese-testa .testo { min-width: 0; flex: 1; }
.mese-testa h3 { font-size: var(--f-m); font-weight: var(--peso-forte); letter-spacing: -.025em; line-height: 1.2; }
.mese-testa p { font-size: var(--f-xs); color: var(--txt-3); margin-top: 5px; line-height: 1.5; }

.sett-lista { margin-top: var(--sp-3); border-top: 1px solid var(--bordo); }
.sett-riga {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left;
  min-height: var(--touch-comodo);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--bordo);
  transition: transform var(--t-veloce) var(--e), opacity var(--t-veloce) var(--e);
}
.sett-riga:last-child { border-bottom: none; padding-bottom: 0; }
.sett-riga:active { transform: scale(.99); opacity: .8; }
.sett-riga .s {
  width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--velo); border: 1px solid var(--bordo);
  font-size: var(--f-s); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums;
  color: var(--txt-2);
}
.sett-riga.corrente .s { background: var(--grad-freddo); color: var(--txt-inv); border-color: transparent; }
.sett-riga .testo { min-width: 0; }
/* `display: block`: sono <span>, senza questo intervallo e ruolo si attaccano
   («3 → 9 agostoTest dei carichi»). */
.sett-riga .quando {
  display: block;
  font-size: 14.5px; font-weight: var(--peso-medio); line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.sett-riga .ruolo {
  display: block;
  font-size: var(--f-xs); color: var(--txt-3); margin-top: 3px; line-height: 1.4;
  overflow-wrap: break-word;
}
.sett-riga .frec { flex: 0 0 auto; color: var(--txt-3); display: flex; }

/* ---------- CONDIVISIONE / PDF ----------
   Il vecchio pulsante «PDF settimana» era una pillola larga che si mangiava
   metà della riga alta e costringeva la data a troncarsi. Qui resta solo
   l'icona: 44 px di area toccabile (il minimo di progetto) in 36 px di
   ingombro visivo, e la scelta fra settimana e mese arriva dopo il tocco. */
.btn-condividi {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--velo); border: 1px solid var(--bordo); color: var(--txt-2);
  position: relative;
  transition: transform var(--t-veloce) var(--e), background var(--t-veloce) var(--e), color var(--t-veloce) var(--e);
}
/* L'area toccabile eccede il disegno: il dito non deve centrare 36 px. */
.btn-condividi::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: var(--touch); height: var(--touch);
}
.btn-condividi svg { width: 20px; height: 20px; }
.btn-condividi:active { transform: scale(.9); background: var(--velo-2); color: var(--txt); }

/* Le due sole voci del foglio di condivisione. */
.scelta-pdf .nav-card:last-child { margin-bottom: 0; }

/* ---------- ANELLI DI ADERENZA ---------- */
.anelli {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.anello-col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.anello-box { position: relative; width: min(116px, 100%); aspect-ratio: 1; }
.anello-box svg { width: 100%; height: 100%; display: block; }
.anello-centro {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.anello-centro .v { font-size: 21px; font-weight: var(--peso-forte); letter-spacing: -.03em; line-height: 1; }
.anello-centro .p { font-size: var(--f-eti); font-weight: var(--peso-forte); color: var(--txt-2); letter-spacing: .04em; }
.anello-col .eti { text-align: center; letter-spacing: .06em; line-height: 1.3; }

/* Sottotitolo di una card: spiega il blocco senza gridare. */
.sotto-titolo {
  font-size: var(--f-xs);
  color: var(--txt-3);
  line-height: 1.5;
  margin: 6px 0 var(--sp-3);
}

/* Collegamento a un'altra sezione dentro un titolo di sezione. */
.link-sez {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 3px;
  min-height: var(--touch); padding: 0 2px 0 10px;
  font-size: var(--f-xs); font-weight: var(--peso-forte); color: var(--acc-txt);
  transition: transform var(--t-veloce) var(--e);
}
.link-sez:active { transform: translateX(2px); }

/* ---------- GRAFICI ---------- */
.graf-card { background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r); padding: 16px 14px 12px; margin-bottom: 13px; }
.graf-card .tit { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; margin-bottom: 4px; }
.graf-card .tit h3 { font-size: var(--f-s); font-weight: var(--peso-forte); color: var(--txt-2); }
.graf-card .tit .val { font-size: var(--f-m); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.graf-card .tit .val small { font-size: var(--f-xs); color: var(--txt-3); font-weight: var(--peso-medio); }
.graf-card svg { width: 100%; height: auto; display: block; overflow: visible; }
.graf-card .legenda { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 4px 0; font-size: var(--f-eti); color: var(--txt-3); font-weight: var(--peso-medio); }
.graf-card .legenda span { display: flex; align-items: center; gap: 5px; }
.graf-card .legenda i { width: 9px; height: 9px; border-radius: 3px; }
/* La linea si disegna da sinistra a destra al primo render: progressione, non decorazione. */
.linea-anim { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: traccia 900ms var(--e) forwards; }
@keyframes traccia { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .linea-anim { animation: none; stroke-dashoffset: 0; } }

/* ---------- CAMPI DI INSERIMENTO ---------- */
/* Separatore leggero dentro una card: divide due blocchi che restano lo stesso
   modulo (misure e scale di recupero salvano nello STESSO archivio). */
.div-leggero { height: 1px; background: var(--bordo); margin: 18px 0 16px; }

/* Riga compatta delle misure già registrate: dopo la seduta l'occhio deve
   cadere sui Carichi, non su un modulo per il peso — che si misura al mattino
   a digiuno e a quell'ora è già stato compilato. */
.riga-misure {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: var(--touch);
}
.riga-misure .testo { min-width: 0; }
.riga-misure .eti { display: block; }
.riga-misure b {
  display: block; margin-top: 3px;
  font-size: var(--f-m); font-weight: var(--peso-forte); letter-spacing: -.02em;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.riga-misure .btn { flex: 0 0 auto; }

.campo { margin-bottom: 13px; }
.campo label { display: block; font-size: var(--f-eti); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); font-weight: var(--peso-forte); margin-bottom: 6px; }
/* Tre scale una sotto l'altra: etichetta corta a sinistra, scala a destra.
   In colonna occupavano quasi due schermate e spingevano i Carichi — cioè il
   motivo per cui si apre Progressi dopo una seduta — sotto la piega. */
.campo-scala {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  align-items: center; gap: var(--sp-2);
  margin-bottom: 9px;
}
.campo-scala label { margin-bottom: 0; letter-spacing: .06em; }
.campo-scala .scala5 button { min-height: var(--touch); }
@media (max-width: 359px) { .campo-scala { grid-template-columns: 60px minmax(0, 1fr); } }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--touch-comodo);
  background: var(--velo); border: 1px solid var(--bordo); border-radius: var(--r-s);
  padding: 0 15px; color: var(--txt);
  font-size: var(--f-b); font-weight: var(--peso-medio);
  transition: border-color var(--t-veloce) var(--e);
}
.campo textarea { padding: 12px 15px; min-height: 88px; line-height: 1.5; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acc); outline: none; }
.campo .aiuto { font-size: var(--f-eti); color: var(--txt-3); margin-top: 5px; line-height: 1.4; }

/* Scala 1-5 per DOMS, sonno, energia: un tocco, nessuna tastiera. */
.scala5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.scala5 button {
  min-height: var(--touch-comodo);
  border-radius: var(--r-s);
  background: var(--velo); border: 1px solid var(--bordo);
  font-size: 17px; font-weight: var(--peso-forte); color: var(--txt-2);
  font-variant-numeric: tabular-nums;
  transition: transform var(--t-veloce) var(--e);
}
.scala5 button:active { transform: scale(.93); }
.scala5 button[aria-pressed="true"] { background: var(--grad-freddo); color: var(--txt-inv); border-color: transparent; }
.scala5 button.scelto { animation: pop var(--t-molla) var(--e-molla); }

/* ============================================================
   MOVIMENTO — le regole comuni a tutta l'app.
   Stanno in fondo perché sovrascrivono, di proposito, il comportamento
   predefinito dei componenti qui sopra: sono la "colla" che tiene insieme
   il modo in cui l'interfaccia risponde.
   ============================================================ */

/* ---------- Uscita dei pannelli ----------
   Entrata e uscita devono essere simmetriche. Un pannello che entra
   scivolando e sparisce di colpo non sembra un oggetto: sembra un errore. */
.foglio-velo.in-uscita { animation: sfuma var(--t) var(--e) reverse both; pointer-events: none; }
.foglio-velo.in-uscita .foglio { animation: esce-foglio var(--t) var(--e-foglio) both; }
@keyframes esce-foglio { from { transform: none; opacity: 1; } to { transform: translateY(34px); opacity: 0; } }
.medaglia.in-uscita { animation: sfuma var(--t) var(--e) reverse both; pointer-events: none; }

/* L'entrata del foglio usa la curva dei pannelli nativi: parte decisa e si
   posa quasi ferma. È l'unica curva che, a 400 ms, non sembra lenta. */
.foglio { animation: entra-foglio var(--t-ampio) var(--e-foglio) both; }

/* ---------- Contatori che cambiano ----------
   «2/3 serie», «14/22 voci»: numeri piccoli che cambiano mentre si guarda
   altrove. Un micro-scatto li rende percepibili senza rubare l'attenzione. */
.num-cambia { animation: num-scatta var(--t) var(--e-molla); }
@keyframes num-scatta {
  0%   { transform: translateY(-3px) scale(1.14); opacity: .55; }
  100% { transform: none; opacity: 1; }
}

/* ---------- Arrivo da un collegamento diretto ----------
   Si atterra su una card in mezzo a una schermata lunga: senza un segnale,
   sembra di essere semplicemente "da qualche parte". L'alone dura poco più
   di un secondo e non sposta nulla (solo box-shadow e background). */
.appena-arrivato { animation: alone-arrivo 1400ms var(--e) both; }
@keyframes alone-arrivo {
  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 62%, transparent), var(--ombra-caldo); }
  35%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 52%, transparent), var(--ombra-caldo); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .appena-arrivato { animation: none; box-shadow: 0 0 0 2px var(--acc); }
  .num-cambia { animation: none; }
}

/* ============================================================
   DIALOGO DI CONFERMA
   Centrato e corto: chiede una cosa sola. L'azione distruttiva è rossa e
   sta a destra (dove arriva il pollice per ultimo, non per primo).
   ============================================================ */
.dialogo-velo {
  position: fixed; inset: 0; z-index: 88;
  background: rgba(0, 0, 0, .66);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: sfuma var(--t-tocco) var(--e) both;
}
.dialogo-velo.in-uscita { animation: sfuma var(--t) var(--e) reverse both; pointer-events: none; }
.dialogo {
  width: 100%; max-width: 380px;
  background: var(--sup);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--r-l);
  padding: 24px 22px 18px;
  box-shadow: var(--ombra-card);
  animation: entra-dialogo var(--t) var(--e-molla) both;
}
.dialogo-velo.in-uscita .dialogo { animation: entra-dialogo var(--t) var(--e) reverse both; }
@keyframes entra-dialogo {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.dialogo h2 { font-size: var(--f-m); font-weight: var(--peso-forte); letter-spacing: -.025em; line-height: 1.22; }
.dialogo p { font-size: var(--f-s); color: var(--txt-2); line-height: 1.5; margin-top: 9px; }
.dialogo-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.dialogo-azioni .btn { width: 100%; }
.btn-distruttivo {
  background: var(--errore);
  color: var(--txt-inv);
  box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--errore) 80%, transparent);
}
:root[data-tema="chiaro"] .btn-distruttivo { color: #fff; }

/* ============================================================
   SELETTORE DI SETTIMANA (Spesa, Batch cooking)
   Una pillola sola in alto: dice dove sei e, toccata, apre l'elenco di
   tutte le settimane esportate. Serve a fare la spesa in anticipo.
   ============================================================ */
.sel-sett {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: var(--touch-comodo);
  padding: 8px 12px 8px 14px;
  margin-bottom: var(--sp-3);
  text-align: left;
  border-radius: var(--r-pill);
  background: var(--velo);
  border: 1px solid var(--bordo);
}
.sel-sett:active { background: var(--velo-2); }
.sel-sett .ic { flex: 0 0 auto; display: flex; color: var(--acc-txt); }
.sel-sett .testo { flex: 1; min-width: 0; line-height: 1.25; }
.sel-sett .testo b {
  display: block;
  font-size: var(--f-s); font-weight: var(--peso-forte); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sel-sett .testo span {
  display: block;
  font-size: var(--f-eti); color: var(--txt-3); font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sel-sett .frec { flex: 0 0 auto; color: var(--txt-3); display: flex; }
/* Segnale che NON si sta guardando la settimana in corso: senza, si rischia
   di fare la spesa per un'altra settimana senza accorgersene. */
.sel-sett.altrove { border-color: color-mix(in srgb, var(--ambra) 52%, transparent); background: color-mix(in srgb, var(--ambra) 12%, transparent); }
.sel-sett.altrove .ic { color: var(--ambra); }

/* Elenco delle settimane dentro il foglio di scelta. */
.lista-sett { display: flex; flex-direction: column; gap: 6px; }
.lista-sett .gruppo {
  font-size: var(--f-eti); letter-spacing: .12em; text-transform: uppercase;
  font-weight: var(--peso-forte); color: var(--txt-3);
  margin: var(--sp-3) 2px var(--sp-1);
}
.lista-sett .gruppo:first-child { margin-top: 0; }
.lista-sett button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left;
  min-height: var(--touch-comodo);
  padding: 10px 12px;
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-s);
}
.lista-sett button .s {
  width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--velo); border: 1px solid var(--bordo);
  font-size: var(--f-s); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums;
  color: var(--txt-2);
}
.lista-sett button .testo { min-width: 0; }
.lista-sett button .quando { display: block; font-size: 14.5px; font-weight: var(--peso-medio); line-height: 1.3; font-variant-numeric: tabular-nums; }
.lista-sett button .ruolo { display: block; font-size: var(--f-xs); color: var(--txt-3); margin-top: 2px; line-height: 1.4; overflow-wrap: break-word; }
.lista-sett button[aria-current="true"] { border-color: transparent; background: var(--grad-freddo); color: var(--txt-inv); }
.lista-sett button[aria-current="true"] .s { background: rgba(255, 255, 255, .22); border-color: transparent; color: var(--txt-inv); }
.lista-sett button[aria-current="true"] .ruolo { color: var(--txt-inv); opacity: .82; }
.lista-sett button .oggi-tag {
  flex: 0 0 auto;
  font-size: var(--f-micro); letter-spacing: .1em; text-transform: uppercase; font-weight: var(--peso-forte);
  color: var(--acc-3);
}
/* Sulla riga selezionata lo sfondo è già azzurro: il ciano dell'etichetta
   «in corso» ci sparirebbe dentro. Sopra il gradiente si usa l'inchiostro
   invertito, come per tutto il resto della riga. */
.lista-sett button[aria-current="true"] .oggi-tag { color: var(--txt-inv); opacity: .85; }

/* ============================================================
   CARICHI PER ESERCIZIO — lista, viste, grafici.
   Regole di lettura (skill dataviz): un solo asse per riquadro, marcatori
   sottili, griglia in secondo piano, legenda sempre presente sopra le due
   serie, didascalia di lettura sotto ogni grafico.
   ============================================================ */

/* Lista degli esercizi registrati: si tocca per aprire i grafici. */
.es-lista { display: flex; flex-direction: column; gap: 6px; }
.es-riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left;
  min-height: var(--touch-comodo);
  padding: 11px 12px 11px 14px;
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-s);
}
.es-riga .testo { min-width: 0; }
.es-riga .nome {
  display: block;
  font-size: 15px; font-weight: var(--peso-medio); line-height: 1.3; letter-spacing: -.01em;
  overflow-wrap: break-word;
}
/* Niente maiuscolo: la riga contiene una data abbreviata («ultima 15 set») e in
   maiuscolo, accanto a un conteggio di sedute, si legge come un numero di serie. */
.es-riga .sotto {
  display: block;
  font-size: var(--f-xs); color: var(--txt-3); font-weight: var(--peso-medio);
  margin-top: 3px; line-height: 1.35;
}
.es-riga .val {
  flex: 0 0 auto; text-align: right;
  font-size: var(--f-metrica); font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--txt);
}
.es-riga .val small { display: block; font-size: var(--f-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); margin-top: 2px; }
.es-riga .frec { flex: 0 0 auto; color: var(--txt-3); display: flex; }
/* I gruppi del progetto V-taper hanno un segno proprio: dorsali e deltoidi
   laterali sono la ragione del programma, si devono distinguere dalla lista. */
.es-riga.priorita { border-left: 3px solid var(--acc); padding-left: 12px; }

/* ---------- ZONA DEL GRAFICO NEL FOGLIO ----------
   Il contenitore che cambia contenuto sotto la testata fissa. L'altezza è
   animata da js/schermate/progressi.js: la vista uscente passa in assoluto
   (esce dal flusso senza lasciare un buco) e quella entrante scivola dentro
   dalla direzione in cui ci si è mossi nel selettore. */
.zona-vista { position: relative; transition: height var(--t) var(--e); }
.zona-vista > .vista-esce {
  position: absolute; inset: 0 0 auto 0; width: 100%;
  pointer-events: none;
  animation: vista-via var(--t-veloce) var(--e) both;
}
.zona-vista > .vista-qui { animation: vista-arriva var(--t) var(--e) both; }
@keyframes vista-via {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(calc(var(--verso, 1) * -16px), 0, 0); }
}
@keyframes vista-arriva {
  from { opacity: 0; transform: translate3d(calc(var(--verso, 1) * 20px), 0, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zona-vista { transition: none; }
  .zona-vista > .vista-esce,
  .zona-vista > .vista-qui { animation: none; }
}

/* Il riquadro di un grafico. */
.gc {
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-s);
  padding: 14px 12px 10px;
  margin-bottom: 12px;
}
.gc .gc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 3px 8px; }
.gc .gc-h h4 { font-size: var(--f-s); font-weight: var(--peso-forte); color: var(--txt); letter-spacing: -.01em; min-width: 0; }
.gc .gc-h .ora {
  flex: 0 0 auto; text-align: right;
  font-size: var(--f-m); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.gc .gc-h .ora small { font-size: var(--f-xs); color: var(--txt-3); font-weight: var(--peso-medio); margin-left: 3px; }
.gc svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Le due serie del grafico a doppia progressione sono impilate, non
   sovrapposte su due assi: due scale diverse su un solo riquadro fanno
   leggere relazioni che non esistono (skill dataviz, regola dell'asse unico). */
.gc .pannello-graf + .pannello-graf { margin-top: 2px; }
.gc .legenda { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 3px 0; font-size: var(--f-eti); color: var(--txt-2); font-weight: var(--peso-medio); }
.gc .legenda span { display: flex; align-items: center; gap: 6px; }
.gc .legenda i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.gc .legenda i.linea { height: 3px; border-radius: 2px; }
.gc .legenda i.contorno { background: none; border: 2px solid var(--txt-3); }

/* Didascalia di lettura: come si legge il grafico e quale trappola evitare.
   È la parte che il personal trainer ha chiesto esplicitamente di mostrare. */
.didascalia {
  margin-top: 10px; padding: 10px 12px;
  background: var(--velo);
  border-left: 3px solid var(--acc-2);
  border-radius: 4px var(--r-xs) var(--r-xs) 4px;
  font-size: var(--f-xs); line-height: 1.5; color: var(--txt-2);
}
.didascalia b { color: var(--txt); font-weight: var(--peso-forte); }
.didascalia .trappola { display: block; margin-top: 6px; color: var(--txt-3); }
.didascalia .trappola b { color: var(--allerta); }

/* Valore letto al tocco su un punto del grafico. */
.gc-tocco {
  min-height: 34px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 3px 0;
  font-size: var(--f-xs); color: var(--txt-2);
  font-variant-numeric: tabular-nums;
}
.gc-tocco b { color: var(--txt); font-weight: var(--peso-forte); }
.gc-tocco .quando { color: var(--txt-3); }

/* Numero grande da solo (rapporto tirata/spinta). */
.numero-solo { text-align: center; padding: 6px 0 2px; }
.numero-solo .v {
  font-size: var(--f-xxl); font-weight: var(--peso-forte);
  letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--ok-txt);
}
.numero-solo.allarme .v { color: var(--errore); }
.numero-solo .e { font-size: var(--f-xs); color: var(--txt-3); margin-top: 8px; }
.numero-solo .stato {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--f-eti); font-weight: var(--peso-forte); letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok-txt);
  border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent);
}
.numero-solo.allarme .stato {
  background: color-mix(in srgb, var(--errore) 14%, transparent);
  color: var(--errore);
  border-color: color-mix(in srgb, var(--errore) 40%, transparent);
}
.numero-solo .stato svg { width: 13px; height: 13px; }

/* Barre orizzontali dei gruppi muscolari: il nome sta a sinistra, per esteso. */
.gruppi { display: flex; flex-direction: column; gap: 9px; padding: 4px 2px 0; }
.gruppo-riga { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.gruppo-riga .nome {
  font-size: var(--f-xs); font-weight: var(--peso-medio); color: var(--txt-2);
  line-height: 1.25; overflow-wrap: break-word;
}
.gruppo-riga.priorita .nome { color: var(--txt); font-weight: var(--peso-forte); }
.gruppo-riga .pista {
  position: relative; height: 18px;
  border-radius: var(--r-xs);
  /* La barra tratteggiata di sfondo è il PRESCRITTO: la barra piena davanti è
     il completato. Confrontarle è la lettura in 5 secondi che serve. */
  border: 1.5px dashed var(--bordo-forte);
  background: transparent;
}
/* `inset: 0` e non `left/top/bottom`: senza `right` la barra aveva larghezza
   zero e `scaleX()` scalava il nulla — il riempimento non si vedeva affatto.
   Si anima `transform` e non `width`: nessun ricalcolo di layout per riga. */
.gruppo-riga .fatto {
  position: absolute; inset: 0;
  border-radius: calc(var(--r-xs) - 2px);
  background: var(--txt-3);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--t-ampio) var(--e-molla);
}
.gruppo-riga.priorita .fatto { background: var(--acc); }
.gruppo-riga .conta {
  flex: 0 0 auto; min-width: 52px; text-align: right;
  font-size: var(--f-xs); font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums; color: var(--txt-2);
}
@media (max-width: 359px) {
  .gruppo-riga { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 7px; }
  .gruppo-riga .conta { min-width: 44px; }
}

/* Nota metodologica in coda a una sezione di grafici. */
.nota-metodo {
  font-size: var(--f-eti); color: var(--txt-3); line-height: 1.55;
  margin: 2px 4px var(--sp-3);
}

/* ---------- Scheletri: lo spazio è riservato prima che i dati arrivino ----------
   Senza, la schermata «cresce» sotto il dito mentre si legge e il tocco finisce
   sull'elemento sbagliato. Il rettangolo grigio occupa da subito l'altezza
   definitiva e sfuma appena il contenuto è pronto. */
.scheletro {
  border-radius: var(--r-s);
  background: linear-gradient(100deg, var(--velo) 30%, var(--velo-2) 50%, var(--velo) 70%);
  background-size: 300% 100%;
  animation: scheletro-onda 1400ms linear infinite;
}
@keyframes scheletro-onda { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .scheletro { animation: none; } }


/* ============================================================
   PREZZI DELLA SPESA
   La riga della lista diventa due bersagli affiancati: a sinistra la casella
   da spuntare (larga quanto resta, perché è il gesto che si ripete settanta
   volte), a destra la piastrella del prezzo, staccata da una linea tratteggiata
   e alta quanto la riga. Il tratteggio non è decorazione: dichiara che la
   piastrella è un'altra cosa, e che toccarla non spunta la voce.
   ============================================================ */
.voce-riga {
  display: flex;
  align-items: stretch;
  margin-bottom: var(--sp-1);
}
.voce-riga > .check { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.voce-riga:not(.senza-prezzo) > .check {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.prezzo {
  position: relative;
  flex: 0 0 auto;
  width: 86px;
  min-height: var(--touch-comodo);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px 5px;
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-left: 1px dashed var(--bordo-forte);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  transition: transform var(--t-veloce) var(--e), background var(--t-veloce) var(--e),
              opacity var(--t-veloce) var(--e);
}
.prezzo b {
  font-size: 14.5px; font-weight: var(--peso-forte); letter-spacing: -.025em;
  color: var(--txt); white-space: nowrap; line-height: 1.15;
}
.prezzo small {
  font-size: var(--f-micro); font-weight: var(--peso-medio);
  color: var(--txt-3); white-space: nowrap; line-height: 1.2;
}
.prezzo:active { background: var(--velo-2); transform: scale(.97); }
/* Prezzo scritto dall'utente: un punto acceso in alto a destra e la cifra nel
   colore d'accento. Sottile ma inequivocabile — e soprattutto NON un secondo
   riquadro colorato, che in una lista di settanta voci sarebbe un coriandolo. */
.prezzo.mio { border-left-style: solid; }
.prezzo.mio b { color: var(--acc-txt); }
.prezzo.mio::after {
  content: "";
  position: absolute; top: 7px; right: 7px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--acc);
}
/* Voce già nel carrello: si spegne tutta la riga, prezzo compreso. */
.voce-riga.presa > .prezzo { opacity: .45; }

/* Dove si trova: solo per i prodotti che non stanno nel supermercato di sempre. */
.check .dove-voce {
  grid-column: 2 / -1;
  display: flex; align-items: flex-start; gap: 5px;
  margin-top: 4px;
  font-size: var(--f-micro);
  font-weight: var(--peso-medio);
  letter-spacing: .01em;
  color: var(--acc-2-txt);
  line-height: 1.4;
  overflow-wrap: break-word;
  text-align: left;
}
.check .dove-voce .ci { flex: 0 0 auto; display: flex; margin-top: 1px; }
.check .dove-voce svg { width: 12px; height: 12px; }

/* Totale del reparto accanto al conteggio: stessa pillola, senza cornice, così
   il conteggio resta il dato principale e l'importo lo accompagna. */
.reparto-conti { flex: 0 0 auto; display: flex; align-items: baseline; gap: 7px; }
.reparto-tit .euro-rep {
  background: none; border: none; padding: 0;
  color: var(--txt-3); letter-spacing: -.01em;
  font-size: var(--f-xs); font-weight: var(--peso-forte);
}
.reparto-tit .euro-rep:empty { display: none; }

/* Totale della settimana nella barra appiccicata. */
.avanz-soldi {
  flex: 0 0 auto;
  flex-direction: column; align-items: flex-end; gap: 0;
  transform-origin: right center;
}
.avanz-euro {
  font-size: var(--f-m); font-weight: var(--peso-forte);
  letter-spacing: -.03em; line-height: 1.1; color: var(--txt);
  white-space: nowrap;
}
.avanz-soldi .eti { font-size: var(--f-micro); letter-spacing: .1em; }
.spesa-barra.compatta .avanz-soldi { transform: scale(.82); }
/* Sotto i 360 px la percentuale è l'informazione più sacrificabile: la barra
   sotto la dice già. Restano voci e importo, che sono i due numeri veri. */
@media (max-width: 359px) {
  .avanz-perc { display: none; }
}

/* Foglio «quanto l'hai pagato»: un campo solo, grande come un tastierino. */
.prezzo-campo { display: flex; align-items: center; gap: 12px; }
.prezzo-campo input {
  flex: 1 1 auto; min-width: 0;
  min-height: 64px;
  padding: 0 16px;
  font-size: 32px; font-weight: var(--peso-forte); letter-spacing: -.03em;
  text-align: right;
  color: var(--txt);
  background: var(--sup-piatta);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--r-s);
}
.prezzo-campo input:focus-visible { outline: 3px solid var(--acc-3); outline-offset: 2px; }
.prezzo-campo .unita {
  flex: 0 0 auto;
  font-size: var(--f-m); font-weight: var(--peso-forte); color: var(--txt-3);
}
.prezzo-anteprima {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  margin-top: 12px; padding: 12px 15px;
  background: var(--velo); border-radius: var(--r-s);
}
.prezzo-anteprima .eti { min-width: 0; }
.prezzo-anteprima b { flex: 0 0 auto; font-size: var(--f-m); font-weight: var(--peso-forte); letter-spacing: -.03em; }
.prezzo-azioni { margin-top: 20px; }

/* ============================================================
   TABELLE DEI PIANI (js/ui.js → mdBlocco)
   Due colonne: ogni riga diventa un blocco, perché la seconda colonna è
   discorsiva e incolonnata su 390 px darebbe una parola per riga.
   Tre o più: tabella vera, che scorre in orizzontale dentro il suo riquadro —
   la pagina non si muove mai di lato.
   ============================================================ */
.md-coppie { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.md-coppia {
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-xs);
  padding: 10px 12px;
}
.md-chiave {
  font-size: var(--f-xs); font-weight: var(--peso-forte);
  color: var(--txt); letter-spacing: -.005em; line-height: 1.35;
}
.md-valore {
  margin-top: 4px;
  font-size: var(--f-xs); color: var(--txt-2); line-height: 1.5;
  overflow-wrap: break-word;
}
.md-tabella {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 10px 0 14px;
  border: 1px solid var(--bordo);
  border-radius: var(--r-xs);
}
.md-tabella table { border-collapse: collapse; width: 100%; font-size: var(--f-xs); }
.md-tabella th, .md-tabella td {
  padding: 8px 11px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--bordo);
}
.md-tabella th {
  font-size: var(--f-eti); text-transform: uppercase; letter-spacing: .08em;
  color: var(--txt-3); font-weight: var(--peso-forte);
}
.md-tabella td { color: var(--txt-2); font-variant-numeric: tabular-nums; }
.md-tabella td:first-child { color: var(--txt); font-weight: var(--peso-medio); }
.md-tabella tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   REFERTO DI VERIFICA (js/referto.js)
   Il verdetto in una fascia sempre visibile; tutto il resto in sezioni
   pieghevoli, con la sicurezza già aperta.
   ============================================================ */
.referto { margin-bottom: var(--sp-3); }
.referto-esito {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--allerta) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--allerta) 32%, transparent);
}
.referto-esito .ic { flex: 0 0 auto; display: flex; color: var(--allerta); margin-top: 1px; }
.referto-esito.ok {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok) 34%, transparent);
}
.referto-esito.ok .ic { color: var(--ok-txt); }
.referto-testo { min-width: 0; }
/* SOLO i figli diretti: il verdetto e la sua riga di numeri. Il grassetto
   che mdInline mette dentro la frase («0,53%») resta in linea — altrimenti
   una sola frase si spezza in cinque righe, una per ogni numero. */
.referto-testo > strong {
  display: block;
  font-size: 15px; font-weight: var(--peso-forte);
  color: var(--txt); letter-spacing: -.015em; line-height: 1.3;
}
.referto-testo > span {
  display: block; margin-top: 5px;
  font-size: var(--f-xs); color: var(--txt-2); line-height: 1.5;
  overflow-wrap: break-word;
}
.referto-testo > span strong { color: var(--txt); font-weight: var(--peso-forte); }
.referto-capo { font-size: 15px; font-weight: var(--peso-forte); margin-bottom: var(--sp-2); }
/* Le sezioni non stanno dentro una card: il margine negativo di
   `.zona-pieghevoli` (che serve alle card) qui va annullato. */
.referto-sezioni {
  margin: var(--sp-2) 0 0;
  background: var(--sup-piatta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-s);
  overflow: hidden;
}
.referto-sezioni > .pieghevole-box:first-child > .tog { border-top: none; }
.referto-piano { margin-top: var(--sp-2); }


/* ---------- BARRA DELLA SPESA A TRE NUMERI ----------
   Da questo giro la barra appiccicata porta tre informazioni invece di due:
   quante voci mancano, quanto costa la lista, a che punto si è. Con le
   etichette ACCANTO ai numeri (com'erano) non ci stavano più su 393 px, e
   «0 / 67» andava a capo a metà frazione. Le etichette scendono quindi SOTTO
   il proprio numero e rimpiccioliscono: ogni blocco è largo quanto la propria
   etichetta e i tre stanno comodi anche su uno schermo da 360 px.
   L'altezza resta identica fra stato normale e stato compatto: una barra
   appiccicata che cambia altezza fa scivolare la lista sotto il dito. */
.spesa-barra .avanz-riga { align-items: flex-start; min-height: 42px; }
.spesa-barra .avanz-testo {
  flex-direction: column; align-items: flex-start; gap: 1px;
  transform-origin: left top;
}
.spesa-barra .avanz-testo .eti {
  font-size: var(--f-micro);
  letter-spacing: .11em;
  line-height: 1.25;
  white-space: nowrap;
}
.spesa-barra .avanz-conta { white-space: nowrap; }
.spesa-barra .avanz-perc { align-self: center; font-size: var(--f-s); }


/* ---------- MICRO-ANIMAZIONI DEI PREZZI ----------
   Il punto che segna «questo prezzo l'hai scritto tu» non deve comparire di
   colpo: nasce da zero con un rimbalzo brevissimo, così l'occhio capisce che è
   la conseguenza del tocco appena dato e non un elemento che c'era già.
   Al ripristino sparisce senza cerimonie: annullare non si festeggia. */
@keyframes prezzo-mio-nasce {
  from { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.35); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
.prezzo.mio::after { animation: prezzo-mio-nasce var(--t-molla) var(--e-molla) both; }
@media (prefers-reduced-motion: reduce) { .prezzo.mio::after { animation: none; } }


/* ============================================================
   GIORNI DI CONSUMO SULLA LISTA DELLA SPESA
   «mar cena 175 g»: quando finisce nel piatto quello che sto comprando.

   DAL GIRO 4 SONO ETICHETTE, NON BERSAGLI. Portavano alla Dieta di quel giorno;
   erano quattromila pulsanti in una schermata in cui il gesto è uno solo —
   spuntare la riga — e stavano esattamente sotto il dito che scorre. Adesso
   sono `span`: niente cursore, niente stato premuto, niente area toccabile
   allargata. Il riassunto apribile resta un pulsante, ed è l'unico.

   UNA RIGA SOLA. Fino a tre chip stanno affiancati; dal quarto in su compare il
   riassunto «N usi in M giorni ▸» che li apre. La riga non va mai a capo: due
   righe di chip per settanta voci raddoppiavano la lunghezza della lista.
   ============================================================ */
.voce-blocco { margin-bottom: var(--sp-1); }
.voce-blocco > .voce-riga { margin-bottom: 0; }
.utilizzi-riga {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  /* Rientro allineato al TESTO della voce, non al bordo della card: i chip
     sono la continuazione di quella riga, non un blocco a sé. 52 px = casella
     della spunta (26) + spaziatura interna della riga (12) + margine (14). */
  padding: 7px 14px 3px 52px;
}
/* Sotto i 380 px i tre chip devono comunque starci: si stringono margini e
   spaziature, non si toglie informazione. */
@media (max-width: 379px) {
  .utilizzi-riga { padding-left: 46px; gap: 4px; }
  .utilizzi-riga > .chip-uso { padding: 3px 8px; gap: 4px; }
}
/* Voce già nel carrello: i giorni impallidiscono con lei. */
.voce-riga.presa + .utilizzi-riga { opacity: .45; }

/* Il chip informativo: compatto, perché non deve più ospitare un dito. */
.chip-uso {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  min-height: 28px;
  padding: 3px 10px;
  position: relative;
  border-radius: var(--r-pill);
  border: 1px solid var(--bordo);
  background: var(--velo);
  color: var(--txt-3);
  font-size: var(--f-eti); font-weight: var(--peso-medio);
  line-height: 1.3;
  white-space: nowrap;
}
/* Il riassunto è l'unico elemento toccabile della riga, e come tale ha il
   bersaglio pieno del progetto e la risposta al tocco di tutta l'app. */
.chip-uso.riassunto {
  min-height: var(--touch); padding: 4px 13px;
  cursor: pointer;
  transition: transform var(--t-tocco) var(--e), background var(--t-tocco) var(--e),
              border-color var(--t-tocco) var(--e), color var(--t-tocco) var(--e);
}
.chip-uso.riassunto:active { transform: scale(var(--scala-tocco-forte)); background: var(--velo-2); }
.chip-uso .g {
  font-weight: var(--peso-forte); letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt-2);
}
.chip-uso .p { color: var(--txt-3); }
/* Il nome dell'alimento, quando la voce di spesa ne compra più d'uno: separato
   da un punto mediano, così si legge come una precisazione del pasto e non
   come un'altra colonna. */
.chip-uso .a { color: var(--txt-2); }
.chip-uso .a::before { content: '·'; margin-right: 5px; color: var(--txt-3); }
.chip-uso .q { font-weight: var(--peso-forte); color: var(--txt-2); font-variant-numeric: tabular-nums; }
/* PRIMO UTILIZZO: SI DISTINGUE PER FORMA, NON PER COLORE.
   Semantica unica dei colori in Spesa (parere del nutrizionista, punto 2): il
   caldo dell'accento significa «devi fare qualcosa» e appartiene ai soli badge
   d'azione («Compra ven mattina», «Congela subito»). Un chip di consumo dice
   quando si mangia: è informazione, e resta neutro anche quando è il primo.
   Prima il primo utilizzo era caldo come i badge d'azione, e sulla stessa riga
   convivevano due gialli che volevano dire cose opposte.
   Il primo utilizzo resta comunque il dato che decide freschezza e ordine di
   consumo, quindi si marca — con il PESO e il BORDO PIENO, che sono differenze
   di forma e non aggiungono un significato di colore. */
.chip-uso.primo {
  border-color: var(--bordo-forte);
  background: var(--velo-2);
  color: var(--txt-2);
  font-weight: var(--peso-forte);
}
.chip-uso.primo .g,
.chip-uso.primo .q { color: var(--txt); }
.chip-uso.primo .p { color: var(--txt-2); }

/* Riassunto apribile: da 4 utilizzi in su, e sempre in dispensa. */
.chip-uso.riassunto { color: var(--txt-2); }
.chip-uso.riassunto .frec { display: inline-flex; transition: transform var(--t) var(--e); }
.utilizzi-riga.aperta .chip-uso.riassunto .frec { transform: rotate(180deg); }
.utilizzi-espansi {
  display: none;
  flex-basis: 100%;
  flex-wrap: wrap; gap: 5px;
  margin-top: 2px;
}
.utilizzi-riga.aperta .utilizzi-espansi { display: flex; }
/* I chip che si aprono arrivano a scaletta invece che tutti insieme: undici
   chip comparsi nello stesso fotogramma si leggono come un blocco unico, a
   scaletta si leggono come un elenco. Lo sfasamento si ferma a 12: oltre,
   l'ultimo arriverebbe mezzo secondo dopo il primo. */
.utilizzi-riga.aperta .utilizzi-espansi > .chip-uso {
  animation: chip-entra var(--t) var(--e) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 22ms);
}
@keyframes chip-entra {
  from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* Badge delle voci che nessun pasto consuma: scorte, materie prime,
   pre-ordini. Sono spiegazioni, non allarmi: grigi, non colorati. */
.badge.scorta,
.badge.materia,
.badge.dopo {
  background: var(--velo); border-color: var(--bordo); color: var(--txt-3);
  text-transform: none; letter-spacing: .01em; font-weight: var(--peso-medio);
  white-space: normal;
}
.badge.dopo { border-style: dashed; }


/* ============================================================
   SETTIMANA DI SCARICO — la stessa cosa detta in tre posti
   Calendario (colore), Oggi (riga sotto il nome), Scheda (banner).
   La parola a Livello 1 è sempre e solo «Scarico»: «deload» resta nel
   dettaglio, fra parentesi, una volta sola.
   ============================================================ */

/* --- calendario: stessa etichetta, tinta fredda ---
   Il tag non cambia MAI («Dorso A» resta «Dorso A»): cambia il colore. Le due
   informazioni devono poter coesistere — cosa alleno e come. */
.cal-g.g-scarico.g-on .seg { background: var(--acc-3); }
.cal-g.g-scarico.g-off .seg { border-color: color-mix(in srgb, var(--acc-3) 70%, transparent); }
.cal-g.g-scarico .tag { color: var(--acc-3); }
.cal-g.g-scarico {
  border-color: color-mix(in srgb, var(--acc-3) 30%, transparent);
  background: color-mix(in srgb, var(--acc-3) 7%, var(--sup-piatta));
}
/* Sul giorno selezionato vince il riempimento pieno: due colori forti sulla
   stessa casella sarebbero solo confusione. */
.cal-g.scelto.g-scarico { background: var(--grad-freddo); border-color: transparent; }
.cal-g.scelto.g-scarico .tag { color: var(--txt-inv); }
.cal-g.scelto.g-scarico.g-on .seg { background: var(--txt-inv); }
.cal-legenda i.scarico { background: var(--acc-3); }

/* --- Oggi: il riquadro dentro la card della seduta ---
   La card ha il gradiente freddo e il testo invertito: qui serve un velo
   chiaro, non un colore d'accento che sul gradiente sparirebbe.

   VETRO SENZA `backdrop-filter`, ed è una scelta. Sotto questo riquadro le
   bolle si muovono di continuo: sfocare lo sfondo significherebbe ricalcolare
   una sfocatura a ogni fotogramma di quel movimento, cioè pagare l'effetto più
   costoso dell'app proprio sopra l'unica animazione permanente. Il vetro qui è
   fatto di luce: velo bianco, riflesso interno sul bordo alto, contorno chiaro
   e un'ombra di contatto morbida. Su un gradiente il risultato è lo stesso —
   il riquadro «galleggia» — e non costa un solo fotogramma.

   Il testo è quello del personal trainer, parola per parola: cambia solo la
   gerarchia tipografica (la frase in grassetto diventa la riga-titolo, il resto
   il corpo) e l'icona della luna, che dice «modalità rigenerazione» prima
   ancora che si legga. */
.riga-scarico {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 12px;
  padding: 11px 13px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .13) 60%);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 6px 18px -12px rgba(0, 0, 0, .65);
  color: var(--txt-inv);
}
.riga-scarico .ic {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.riga-scarico .ic svg { width: 17px; height: 17px; }
.riga-scarico .tx { min-width: 0; font-size: var(--f-xs); line-height: 1.5; }
/* `display: block` fa due cose in una riga: dà alla frase del trainer il suo
   rilievo di titolo e fa collassare lo spazio iniziale del testo che segue —
   che nei dati resta scritto identico, spazio compreso. */
.riga-scarico b {
  display: block;
  font-size: 13.5px; font-weight: var(--peso-forte);
  letter-spacing: -.012em; line-height: 1.35;
  margin-bottom: 3px;
}

/* --- Scheda: banner in testa alla lista esercizi, non pieghevole ---
   È l'unica informazione che, se non letta, fa fare l'opposto di ciò che
   serve. La barra colorata a sinistra lo lega alla famiglia «fredda» delle
   pillole di scarico: stesso significato, stesso colore, ovunque. */
.banner-scarico {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 13px;
  padding: 15px 16px 15px 18px;
  border-radius: var(--r-s);
  border: 1px solid color-mix(in srgb, var(--acc-3) 30%, transparent);
  border-top-color: color-mix(in srgb, var(--acc-3) 46%, transparent);
  /* Non più una tinta piatta: una luce fredda che entra dall'alto a sinistra e
     si spegne verso il basso. È lo stesso modo in cui sono illuminate tutte le
     card dell'app (--luce-alto), declinato nel colore dello scarico. */
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--acc-3) 17%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--acc-3) 11%, transparent), color-mix(in srgb, var(--acc-3) 5%, transparent));
  box-shadow: var(--ombra-1);
  font-size: var(--f-xs); line-height: 1.55; color: var(--txt-2);
  overflow: hidden;
  animation: banner-entra var(--t) var(--e) both;
}
/* Il filo di luce a sinistra: era un `border-left` di 3 px, che sul raggio di
   16 px si vedeva tagliato agli angoli. Qui è un elemento a sé, arrotondato,
   e sfuma alle due estremità come una lampada. */
.banner-scarico::before {
  content: "";
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg,
    transparent, var(--acc-3) 18%, var(--acc-3) 82%, transparent);
}
.banner-scarico .ic {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 11px;
  color: var(--acc-3);
  background: color-mix(in srgb, var(--acc-3) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc-3) 28%, transparent);
}
.banner-scarico .ic svg { width: 18px; height: 18px; }
.banner-scarico .tx { min-width: 0; overflow-wrap: anywhere; padding-top: 1px; }
/* Stessa gerarchia della riga in «Oggi»: la frase del trainer fa da titolo, il
   resto è corpo. Nessuna parola cambiata. */
.banner-scarico b {
  display: block;
  color: var(--txt); font-weight: var(--peso-forte);
  font-size: 14px; letter-spacing: -.012em; line-height: 1.35;
  margin-bottom: 4px;
}
/* Il capoverso della misurazione, che compare solo dove la settimana ne
   dichiara una: si stacca dal primo invece di attaccarcisi, perché sono due
   cose diverse — cosa fare tutta la settimana, e cosa succede il giorno della
   prova. Il primo capoverso resta identico in tutti gli altri scarichi. */
.banner-scarico b.capo { margin-top: 10px; }
@keyframes banner-entra {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}


/* ============================================================
   TECNICHE D'INTENSITÀ E PRESCRIZIONE SULLA CARD DELL'ESERCIZIO
   Due righe che compaiono solo quando servono: la prescrizione lunga (prima
   frase, il resto a un tocco) e la tecnica prevista quel giorno.
   ============================================================ */

/* «dose 1 di 3»: una riga di contesto, non un avviso. */
.riga-dose {
  margin-top: 7px;
  font-size: var(--f-xs); line-height: 1.45; color: var(--txt-3);
}

/* Prescrizione: la prima frase (già in grassetto nei dati) più l'invito ad
   aprire il resto. È un pulsante a tutta larghezza perché il bersaglio va
   preso senza guardare, con il bilanciere appena posato. */
.riga-presc {
  display: block; width: 100%; text-align: left;
  margin-top: var(--sp-2);
  padding: 10px 12px;
  border-radius: var(--r-xs);
  background: var(--velo);
  border: 1px solid var(--bordo);
  transition: transform var(--t-tocco) var(--e), background var(--t-tocco) var(--e);
}
.riga-presc:active { transform: scale(.985); background: var(--velo-2); }
.riga-presc .tx { display: block; font-size: 13.5px; line-height: 1.45; color: var(--txt-2); }
.riga-presc .tx strong { color: var(--txt); font-weight: var(--peso-forte); }
.riga-presc .altro {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: var(--f-eti); font-weight: var(--peso-forte);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--acc-txt);
}

/* Riga della tecnica: la sola riga della card che ha diritto a un colore
   pieno, perché è l'unica cosa che cambia COME si esegue l'ultima serie. */
.riga-tecnica {
  display: block; width: 100%; text-align: left;
  margin-top: var(--sp-2);
  padding: 11px 13px;
  border-radius: var(--r-xs);
  border: 1px solid color-mix(in srgb, var(--acc) 38%, transparent);
  background: color-mix(in srgb, var(--acc) 11%, transparent);
  transition: transform var(--t-tocco) var(--e), background var(--t-tocco) var(--e);
  animation: tecnica-entra var(--t-molla) var(--e-molla) both;
}
.riga-tecnica:active { transform: scale(.985); background: color-mix(in srgb, var(--acc) 17%, transparent); }
.riga-tecnica .et {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--f-eti); font-weight: var(--peso-forte);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--acc-txt);
}
.riga-tecnica .et .ci { display: inline-flex; }
/* La DOSE dichiarata dal piano (campo `tecnica`, dal mese 7). Sta nella riga
   del nome perché è un attributo della tecnica di oggi — «Myo-reps, dose
   minima» — e non un'istruzione in più da leggere in mezzo a una serie. */
.riga-tecnica .et .dose {
  padding: 1px 7px 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--acc) 26%, transparent);
  letter-spacing: .07em;
}
.riga-tecnica.schema .et .dose { background: color-mix(in srgb, var(--acc-2) 24%, transparent); }
.riga-tecnica .tx {
  display: block; margin-top: 5px;
  font-size: 13.5px; line-height: 1.45; color: var(--txt-2);
}
/* Il nome dell'ALTRO esercizio della coppia, dentro la riga del superset. È il
   dato che la riga esisteva per dire e che fino al mese 9 non c'era («in coppia
   con l'esercizio indicato»): sta dentro la frase, non in un'etichetta a parte,
   perché è il complemento oggetto dell'istruzione — ma va trovato con l'occhio
   davanti all'attrezzo, e per questo pesa più del resto della riga. */
.riga-tecnica .tx .compagno,
.tecnica-riga-a p .compagno {
  font-weight: var(--peso-forte); color: var(--txt);
}
/* La riga in più della sola dose ridotta: la settimana in cui una tecnica
   debutta è l'unica in cui questa frase serve, e infatti compare solo lì. */
.riga-tecnica .dose-nota {
  display: block; margin-top: 4px;
  font-size: 12.5px; line-height: 1.4; font-weight: var(--peso-forte);
  color: var(--acc-txt);
}
.riga-tecnica .come {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 7px;
  font-size: var(--f-eti); font-weight: var(--peso-forte);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--acc-txt);
}
@keyframes tecnica-entra {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Il foglio della tecnica: la riga operativa in evidenza, sopra la spiegazione. */
.tecnica-riga-a {
  padding: 13px 15px;
  border-radius: var(--r-s);
  border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent);
  background: color-mix(in srgb, var(--acc) 10%, transparent);
}
.tecnica-riga-a .eti {
  display: block;
  font-size: var(--f-micro); letter-spacing: .12em; text-transform: uppercase;
  font-weight: var(--peso-forte); color: var(--acc-txt);
  margin-bottom: 5px;
}
.tecnica-riga-a p { font-size: var(--f-s); line-height: 1.5; color: var(--txt); }
/* Il blocco della dose nel foglio: stessa famiglia della riga operativa, tinta
   spenta — è un chiarimento su quella riga, non una seconda istruzione. */
.tecnica-riga-a.dose {
  margin-top: 10px;
  border-color: var(--bordo);
  background: var(--velo);
}
.tecnica-riga-a.dose .eti { color: var(--txt-3); }
.nav-card .quando-tec {
  margin-top: 5px;
  font-size: var(--f-micro); letter-spacing: .1em; text-transform: uppercase;
  font-weight: var(--peso-forte); color: var(--txt-3);
}
.voce-vocabolario + .voce-vocabolario {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--bordo);
}


/* ============================================================
   INVITO ALL'AGGIORNAMENTO
   Non è un toast qualunque: è un bersaglio, e resta finché serve.
   ============================================================ */
.toast-azione {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  cursor: pointer;
  border-color: color-mix(in srgb, var(--acc) 52%, transparent);
}
.toast-azione b { color: var(--acc-txt); font-weight: var(--peso-forte); }
.toast-azione:active { transform: translateX(-50%) scale(.97); }


/* ============================================================
   PROFONDITÀ E MICRO-MOVIMENTI — il livello di finitura
   Nessuna regola qui cambia una posizione o una misura: agiscono su ombra,
   sfumatura e — nelle animazioni — solo su `transform` e `opacity`. È la
   condizione perché il telefono le disegni sul compositore, cioè senza
   perdere un fotogramma con la mano appoggiata sulla panca.
   ============================================================ */

/* Le superfici piatte prendono il riflesso in alto e l'ombra a due strati:
   restano dello stesso colore, ma smettono di sembrare rettangoli dipinti sul
   fondo. Le card con gradiente proprio (la seduta, le bolle) non sono qui: il
   loro colore È il contenuto, e una sfumatura sopra lo spegnerebbe. */
.card,
.ex,
.nav-card,
.pasto-card,
.check,
.fase,
.foglio {
  background-image: var(--luce-alto);
}
.card,
.ex,
.nav-card,
.pasto-card { box-shadow: var(--ombra-1); }
.foglio { box-shadow: var(--ombra-2), var(--ombra-alta); }

/* La card dell'esercizio in corso si stacca dal piano invece di limitarsi a
   cambiare il colore del bordo: è quella su cui si torna a fine recupero. */
.ex.attivo { box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 48%, transparent), var(--ombra-caldo); }

/* Un filo di luce sul bordo superiore: è il dettaglio che, su uno schermo
   OLED, distingue una card da un buco nero nello schermo. */
.card,
.ex,
.foglio { border-top-color: var(--bordo-luce); }

/* --- risposta al tocco, dove ancora mancava ---
   Tutto ciò che si può toccare deve affondare sotto il dito, e della stessa
   quantità: è `--scala-tocco`, e averne una sola per tutta l'app è ciò che fa
   sembrare i componenti parti dello stesso oggetto. */
.momento-chip,
.momenti-fonti,
.sel-sett,
.pre-wo,
.link-sez,
.btn-cal,
.mostra-tutto,
.sess-intro-piu,
.agenda-riga,
.gg { transition: transform var(--t-tocco) var(--e); }
.chip-btn:active,
.momento-chip:active,
.momenti-fonti:active,
.sel-sett:active,
.pre-wo:active,
.link-sez:active,
.btn-cal:active,
.gg:active { transform: scale(var(--scala-tocco)); }
/* I bersagli allineati a sinistra affondano DAL LORO BORDO e non dal centro:
   una riga larga quanto la card che si stringe verso il mezzo si legge come
   uno scivolamento, non come una pressione. */
.mostra-tutto:active,
.sess-intro-piu:active { transform: scale(var(--scala-tocco)); transform-origin: left center; }
.agenda-riga:active { transform: scale(var(--scala-tocco-lieve, .992)); }

/* --- calendario: le caselle arrivano a scaletta ---
   Il mese non compare tutto in un fotogramma: le caselle entrano in diagonale,
   9 ms l'una. Dura in tutto meno di 300 ms e trasforma il cambio di mese da
   «sostituzione» a «movimento» — che è l'unica cosa che dice al dito che la
   freccia ha funzionato. Lo sfasamento si ferma a 24 caselle. */
.cal-g {
  animation: cella-entra var(--t-veloce) var(--e) backwards;
  animation-delay: calc(min(var(--i, 0), 24) * 9ms);
}
@keyframes cella-entra {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SIGLE IN CHIARO — i richiami alle spiegazioni
   Vedi js/sigle.js e js/tecniche.js. Le sigle che una regola di testo non può
   sciogliere senza rischi (Fase B1 collide con le vitamine B1/B12) non si
   sostituiscono: si spiegano, a un tocco.
   ============================================================ */

/* Pillola che porta da qualche parte: stessa forma delle altre, più il puntino
   di richiamo. Non cambia dimensione né peso, altrimenti in testata sembrerebbe
   una pillola di un'altra famiglia. */
.pl-tocca {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.pl-tocca:active { transform: scale(var(--scala-tocco)); background: var(--velo-2); }
.pl-ci { display: inline-flex; opacity: .7; }
.pl-ci svg { width: 12px; height: 12px; stroke-width: 2.4; }

/* Puntino di richiamo accanto all'etichetta di un campo (il DOMS del check di
   recupero e delle misure). L'area toccabile è quella di progetto — 44 px pieni,
   perché in palestra il dito non centra un'icona di quattordici — mentre
   l'ingombro nel flusso è quello di una riga di testo: i margini negativi
   riassorbono l'eccedenza da tutti e quattro i lati, così l'etichetta non
   diventa più alta e il puntino resta attaccato alla parola. */
.eti-info {
  display: inline-flex; align-items: center; justify-content: center;
  /* `flex: 0 0 auto`: dentro un'etichetta lunga («Dolori muscolari (DOMS)»)
     il contenitore flessibile stringeva il pulsante fino a 20 px di larghezza,
     e l'area toccabile spariva proprio dove serviva. */
  flex: 0 0 auto;
  width: var(--touch); height: var(--touch);
  margin: -9px -12px -9px -13px;
  border-radius: var(--r-pill);
  color: var(--txt-3);
  vertical-align: middle;
}
.eti-info:active { transform: scale(var(--scala-tocco-forte)); background: var(--velo-2); }

/* Le sei fasi dell'anno, nel foglio aperto dalla pillola. */
.fase-riga {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--bordo);
}
.fase-riga:last-child { border-bottom: none; }
.fase-riga .barra { align-self: stretch; border-radius: var(--r-pill); background: var(--velo-2); }
.fase-riga.attiva .barra { background: var(--grad-caldo); }
.fase-riga .testo { min-width: 0; }
.fase-riga h4 { font-size: 15px; font-weight: var(--peso-forte); letter-spacing: -.02em; line-height: 1.25; }
.fase-riga .ruolo { font-size: var(--f-xs); color: var(--txt-2); margin-top: 3px; line-height: 1.4; }
.fase-riga .quando { font-size: var(--f-eti); color: var(--txt-3); margin-top: 4px; }
.fase-riga .ora-tag {
  font-size: var(--f-micro); letter-spacing: .12em; text-transform: uppercase;
  font-weight: var(--peso-forte); color: var(--txt-inv);
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--grad-caldo);
}

/* Lo schema di carico in card: stessa riga della tecnica, tinta fredda.
   È contesto («l'esercizio è organizzato così»), non un'istruzione da eseguire
   oggi — e su ogni big dei mesi di forza comparirebbe con la stessa forza di un
   drop set, che invece capita una volta a settimana. */
.riga-tecnica.schema {
  border-color: color-mix(in srgb, var(--acc-2) 32%, transparent);
  background: color-mix(in srgb, var(--acc-2) 9%, transparent);
}
.riga-tecnica.schema .et { color: var(--acc-2-txt); }
.riga-tecnica.schema:active { background: color-mix(in srgb, var(--acc-2) 15%, transparent); }

/* Il promemoria del batch di oggi in «Oggi»: stessa famiglia della riga
   pre-workout (è la stessa cosa — «una cosa da fare, in un altro momento della
   giornata»), colore del batch invece che del cibo pre-allenamento. */
.batch-oggi { border-left-color: var(--acc-2); }
.batch-oggi .ic { color: var(--acc-2-txt); }
.batch-oggi.fatta { opacity: .68; border-left-color: var(--ok); }
.batch-oggi.fatta .ic { color: var(--ok-txt); }

/* Area di cattura del dito sui grafici dei carichi.
   Era uno stile inline sull'elemento SVG, e la Content Security Policy
   (`style-src 'self'`, senza `unsafe-inline`) lo scartava in silenzio: il
   gesto verticale sul grafico veniva quindi intercettato dal disegno invece di
   scorrere la pagina. Qui è una classe, e la regola si applica davvero. */
.graf-cattura { touch-action: pan-y; }

@media (prefers-reduced-motion: reduce) {
  .cal-g,
  .banner-scarico,
  .riga-tecnica,
  .utilizzi-riga.aperta .utilizzi-espansi > .chip-uso { animation: none; }
}