/* ace.css — Foglio di stile condiviso del frontend ACE: fondamenta, guscio e classi comuni dei mockup "B · Rilievo".
   Esiste perché le viste non si ricopino il CSS a vicenda: qui sta ciò che è di tutte, nello <style> di ogni vista ciò che è solo suo. */

/* La fonte della grafica è la tela dei mockup (fuori dal repo), non questo file: dove un numero
   qui non torna col mockup è sbagliato questo. Vedi design/ace-design-brief.md.
   Non ci sono token: i mockup scrivono i valori per esteso, e così fa questo foglio. I colori
   sono pochi e si ritrovano cercandoli — fondo #e9eeea, scavato #dfe6e1, inchiostro #12201a,
   testo secondario #55665d, verde pieno #0f5a3c, verde chiaro #bff0d4, filetto #d5ddd7.
   L'ultima sezione, OLTRE I MOCKUP, veste ciò che i mockup non disegnano (finestre, tendine,
   calendario, messaggi d'errore) con gli stessi pezzi e gli stessi valori. */

/* =============================================================================
   FONT
   Self-hosted: nessuna chiamata a Google. Su un prodotto che vende "i dati dei clienti non
   escono dal server", un font da CDN esporrebbe l'IP del trainer a ogni pagina — una
   contraddizione visibile nel pannello di rete del browser.
   I due file .woff2 stanno in upload/public/fonts/ (vedi LEGGIMI della cartella): se mancano,
   lo stack di fallback regge la pagina e non si rompe niente.
   ============================================================================= */

/* Variabili: un file copre l'intera gamma dei pesi, una richiesta invece di una per peso.
   Sono GLI STESSI file che Google Fonts serve ai mockup (sottoinsieme latino), scaricati una
   volta e messi nel repo: Bricolage Grotesque porta anche l'asse della taglia ottica (opsz
   12–96), ed è quello a ridisegnare le lettere quando il titolo è grande. Senza quell'asse un
   "14" a 78px ha un'altra forma e un'altra larghezza rispetto al mockup.
   Né l'uno né l'altro contengono le frecce ← e →: nei mockup le disegna il carattere generico
   del sistema, e qui succede lo stesso perché lo stack è identico ("…", sans-serif). */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/storico/assets/fonts/HankenGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/storico/assets/fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   BASE
   ============================================================================= */

/* Valgono i default del browser, come nei mockup: corpo 16px, interlinea normale, scatola
   content-box per i blocchi e border-box per bottoni e campi. Chi vuole altro lo dichiara. */
body {
  margin: 0;
  background: #e9eeea;
  color: #12201a;
  font-family: 'Hanken Grotesk', sans-serif;
  -webkit-text-size-adjust: 100%;
}

::selection { background: #bff0d4; color: #0b3d29; }

/* :focus-visible e non :focus — l'anello deve comparire per chi naviga da tastiera, non a
   ogni click del mouse. */
:focus-visible { outline: 3px solid #0f5a3c; outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Chi ha chiesto meno movimento al sistema operativo lo ottiene: nessuna eccezione. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

a { color: #3f5148; text-decoration: none; }
a:hover { color: #12201a; }

/* =============================================================================
   GUSCIO APPLICATIVO
   Il menu NON è una colonna fissa: è una lastra nel flusso della pagina, accanto al contenuto
   finché c'è posto e sopra di lui quando non ce n'è (flex-wrap). Non esiste un breakpoint e
   non esiste un drawer: a 390px il menu va in cima su due colonne perché le voci hanno una
   base di 150px. È così che sono fatti i mockup, telefono compreso.
   ============================================================================= */

.guscio {
  min-height: calc(100vh / var(--scala));
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 20px;
  background: #e9eeea;
  color: #12201a;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  line-height: normal;
}

/* LA SCALA. Su schermo largo tutta la grafica è disegnata all'85% (scelta di Ace, 08/10/2026: sul
   suo computer caratteri e riquadri erano troppo grandi). È uno zoom sulla radice e non un
   ritocco delle misure: le proporzioni restano quelle dei mockup, e per cambiare taglia si
   cambia il solo --scala qui sotto. Da telefono no: lì le misure dei mockup sono già quelle
   giuste per il dito.
   Sotto zoom le coordinate che il browser dà al codice (getBoundingClientRect, clientX) sono
   in pixel di schermo, mentre i px scritti in uno stile vengono rimpiccioliti: chi posiziona
   qualcosa a mano passa da AceScala() in ace.js. E 100vh vale l'85% dello schermo: chi vuole
   l'altezza intera lo divide per --scala, come il guscio qui sotto. */
:root { --scala: 1; }
@media (min-width: 900px) {
  :root { --scala: 0.85; }
}
html { zoom: var(--scala); }

/* Solo l'Agenda: lì il contenuto si stende quanto è alta la pagina, per la griglia. Il menu
   no: nel mockup dell'Agenda (un foglio suo, più vecchio) scendeva fino in fondo e aveva
   "ACE" in un altro carattere, ma dal 07/10/2026 è uguale a quello delle altre pagine
   (Giorgio): alto quanto le sue voci. */
.guscio--steso { align-items: normal; align-content: normal; }
.guscio--steso > .menu { align-self: flex-start; }

.menu {
  flex: 1 0 200px;
  box-sizing: border-box;
  padding: 24px 14px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 0 #fff inset, 0 24px 40px -28px rgba(18, 32, 26, 0.45);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
}

/* Da telefono lo scarto dai bordi scende a 16px SOLO nelle due schermate che hanno un mockup
   da telefono (Home e scheda cliente, larghi 390), perché è lì che il mockup lo dice. Le
   altre tengono i 20px del loro mockup a qualunque larghezza. La soglia di 480px è una scelta
   di questo foglio: i mockup dicono due sole larghezze, 1360 e 390. */
@media (max-width: 480px) {
  .guscio--telefono { padding: 16px; }
}

/* Un contenitore che esiste per il codice e non per l'impaginazione: i suoi figli si
   dispongono come se fossero figli di chi lo contiene. */
.trasparente { display: contents; }

.menu-marchio { position: relative; flex: 1 0 100%; box-sizing: border-box; padding: 0 14px 20px; font-size: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* Il logo dello studio, se è stato caricato in Documenti studio: sotto la scritta ACE, a
   sinistra come lei. Riempie una scatola larga quanto il menu e alta 60: un logo largo e
   basso lo ferma la larghezza, uno quadrato l'altezza. (Nel mockup "Documenti + logo · 2" il
   logo d'esempio era alto 38: sul logo vero risultava troppo piccolo, 07/10/2026.) Lo mette
   ace.js quando l'immagine è arrivata davvero: senza logo qui non c'è niente. */
.menu-marchio-logo { display: block; width: 100%; height: 60px; object-fit: contain; object-position: left center; }
/* Il posto del logo, tenuto PRIMA che l'immagine arrivi: la classe sull'<html> la mette una
   riga di script in testa a ogni pagina, se in questo browser il logo si è già visto. Senza,
   a ogni cambio di pagina il menu nasceva corto e si allungava un attimo dopo, e tutto ciò
   che sta sotto faceva un salto. Quando l'immagine c'è, il segnaposto si toglie. */
.con-logo .menu-marchio::after { content: ''; display: block; width: 100%; height: 60px; }
.con-logo .menu-marchio:has(.menu-marchio-logo)::after { display: none; }

.pagina { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* =============================================================================
   FOGLIO DEI MOCKUP
   Le classi qui sotto sono il foglio di stile comune dei mockup, con gli stessi nomi e gli
   stessi valori. Una sola eccezione di nome: il campo scavato lì si chiama .campo, qui .scavo,
   perché .campo esiste già ed è il contenitore etichetta+controllo delle finestre di modifica.
   ============================================================================= */

@keyframes solleva { from { opacity: 0; transform: translateY(26px) scale(.965); box-shadow: 0 0 0 0 rgba(18,32,26,0) } }
@keyframes emergi { from { opacity: 0; transform: translateY(14px) scale(.96) } }
@keyframes scorri { from { opacity: 0; transform: translateX(-24px) } }
@keyframes cresci { from { transform: scaleY(0) } }
@keyframes stendi { from { transform: scaleX(0) } }
@keyframes battito { 0% { box-shadow: 0 0 0 0 rgba(15,90,60,.55) } 100% { box-shadow: 0 0 0 14px rgba(15,90,60,0) } }
@keyframes imprimi { from { opacity: 0; transform: translateY(-18px) scale(1.06); filter: blur(8px) } }

.tit { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -.03em; line-height: 1 }
.h2 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15 }
.muto { color: #55665d }
.pan { box-sizing: border-box; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 1px 0 #fff inset, 0 30px 50px -34px rgba(18,32,26,.5); animation: solleva .85s cubic-bezier(.16,1,.3,1) both }
.inc { box-sizing: border-box; border-radius: 16px; background: #dfe6e1; box-shadow: inset 0 2px 5px rgba(18,32,26,.16), inset 0 -1px 0 rgba(255,255,255,.9) }
.scuro { background: #12201a; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 30px 44px -26px rgba(18,32,26,.85) }
.scuro .muto { color: #b9cdc2 }
.scuro .tasto.piatto { color: #cdeedd }
.alza { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s }
.alza:hover { transform: translateY(-5px) }
.voce { flex: 1 0 150px; display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 600; transition: background .2s }
.voce:hover { background: #eef3ef }
.voce.qui, .voce.qui:hover { background: #12201a; color: #fff; box-shadow: 0 12px 18px -12px rgba(18,32,26,.8) }
/* Il numero accanto a "Promemoria": quante cose chiedono un gesto. Lo stesso rosso del pallino
   della campanella, perché dice la stessa cosa: c'è qualcosa da guardare. */
.voce-conta { margin-left: auto; min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 6px; border-radius: 999px; background: #b3352a; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center }
.voce.qui .voce-conta { box-shadow: 0 0 0 2px #12201a }
.tasto { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; color: #12201a; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 0 0 1px #d5ddd7, 0 6px 12px -8px rgba(18,32,26,.3); transition: transform .2s, box-shadow .2s }
.tasto:hover { color: #12201a; transform: translateY(-2px); box-shadow: 0 0 0 1px #b9c6bd, 0 12px 18px -8px rgba(18,32,26,.35) }
.tasto:active { transform: translateY(1px); box-shadow: 0 0 0 1px #b9c6bd, inset 0 2px 5px rgba(18,32,26,.22) }
.tasto.pri, .tasto.pri:hover { background: #0f5a3c; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 16px 24px -14px rgba(15,90,60,.8) }
.tasto.pri:active { box-shadow: inset 0 3px 6px rgba(0,0,0,.35) }
.tasto.piatto { background: transparent; box-shadow: none; color: #3f5148 }
.scavo { min-height: 44px; box-sizing: border-box; width: 100%; padding: 0 14px; border: 0; border-radius: 12px; background: #eef2ef; box-shadow: inset 0 2px 4px rgba(18,32,26,.14), inset 0 0 0 1px #d5ddd7; font: inherit; font-size: 15px; color: #12201a; caret-color: #0f5a3c }
.scavo::placeholder { color: #55665d }
.et { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #3f5148 }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap }
.ok { background: #bff0d4; color: #0b3d29 }
.fermo { background: #f1e3bd; color: #553a00 }
.neutro { background: #e6ece8; color: #3f5148 }
/* Ciò che è già scaduto (un pacchetto finito, un pagamento in ritardo): il rosso della campanella, schiarito. */
.allarme { background: #f6dcd8; color: #7a1d14 }
.punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #0f5a3c; animation: battito 1.8s ease-out infinite }
.riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 4px 16px; align-items: center; padding: 14px 16px; border-radius: 16px; color: #12201a; font-size: 14px; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, background .2s }
.riga:hover { background: #fff; color: #12201a; transform: translateY(-3px); box-shadow: 0 0 0 1px #d5ddd7, 0 18px 26px -18px rgba(18,32,26,.5) }
.lev { flex: none; position: relative; width: 56px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: #dfe6e1; box-shadow: inset 0 2px 5px rgba(18,32,26,.22); cursor: pointer; transition: background .3s }
.lev i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 4px 8px -2px rgba(18,32,26,.5); transition: transform .35s cubic-bezier(.16,1,.3,1) }
.lev.su { background: #0f5a3c }
.lev.su i { transform: translateX(24px) }
.colonna { transform-origin: bottom; animation: cresci 1s cubic-bezier(.16,1,.3,1) both }
.striscia { transform-origin: left; animation: stendi 1s cubic-bezier(.16,1,.3,1) both }
.foglio { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s }
.foglio:hover { transform: translateY(-8px) rotate(0deg) !important; box-shadow: 0 0 0 1px #d5ddd7, 0 34px 40px -24px rgba(18,32,26,.55) !important }

/* Un elemento con l'attributo hidden resta nascosto anche quando la sua classe dichiara un
   display: senza questa riga .tasto[hidden] si vedrebbe. */
[hidden] { display: none !important; }
/* Alcune viste nascondono con la classe invece che con l'attributo: stessa garanzia. */
.hidden { display: none !important; }

/* =============================================================================
   OLTRE I MOCKUP
   Finestre di modifica, tendine, calendario, messaggi: i mockup non li disegnano. Sono fatti
   coi pezzi dei mockup (.tasto, .scavo, .et, .inc, .pill, .h2) e, dove serve una scatola in
   più, con regole scritte qui usando gli stessi valori — stessi raggi, stesse ombre, stessi
   colori. L'unico colore che i mockup non hanno è il rosso di ciò che cancella e degli
   errori: #b3352a (5.0:1 sul suo fondo chiaro #fbe4e2, 6.1:1 su bianco).
   ============================================================================= */

/* --- Varianti dei pezzi comuni --- */

/* Il tasto di ciò che cancella dati senza ritorno. */
.tasto.pericolo, .tasto.pericolo:hover { background: #b3352a; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 16px 24px -14px rgba(179,53,42,.8) }
/* Spento mentre una richiesta è in viaggio: non si alza e non promette di rispondere. */
.tasto.pri:disabled, .tasto.pericolo:disabled { opacity: .55; cursor: default; transform: none }
/* Un campo a più righe e una tendina hanno bisogno di un po' di margine interno in verticale. */
textarea.scavo { padding: 10px 14px; min-height: 96px; resize: vertical; line-height: 1.5 }
select.scavo { cursor: pointer }
/* La nota accanto a un'etichetta ("obbligatorio", "almeno 12 caratteri"). */
.et-nota { font-weight: 400; color: #55665d }
/* Un'etichetta che non ha un campo sotto, ma un gruppo di controlli. */
.et-titolo { margin: 0; font-size: 13px; font-weight: 600; color: #3f5148 }

/* --- Messaggi di esito e d'errore --- */
.messaggio { margin: 0; font-size: 13px; font-weight: 600 }
.messaggio:empty { display: none }
.messaggio--ok { color: #0b3d29 }
.messaggio--errore { color: #b3352a }
.errore { margin: 0; font-size: 14px; font-weight: 600; color: #b3352a }
.errore:empty { display: none }

/* --- Finestra di modifica ---
   Un velo scuro sopra la pagina e, al centro, una lastra bianca con la stessa superficie di
   .pan e l'ombra lunga del riquadro di accesso. Testata col titolo e "Chiudi", corpo che
   scorre se non ci sta, piede col tasto principale. */
.modale { position: fixed; inset: 0; z-index: 80; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(18,32,26,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #12201a; font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; line-height: normal; text-align: left }
.modale[hidden], .modale.hidden { display: none }
/* Con una finestra aperta la pagina sotto non scorre. */
body.modale-aperta { overflow: hidden }
.modale-riquadro { box-sizing: border-box; width: 100%; max-width: 520px; max-height: 100%; display: flex; flex-direction: column; border-radius: 24px; background: #fff; box-shadow: 0 1px 0 #fff inset, 0 50px 70px -40px rgba(18,32,26,.6); overflow: hidden; animation: solleva .5s cubic-bezier(.16,1,.3,1) both }
.modale-riquadro--largo { max-width: 1040px }
.modale-testata { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 16px 0 24px }
.modale-testata h2 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15 }
.modale-corpo { overflow-y: auto; padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 14px }
.modale-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 6px }

/* --- Suggerimenti sotto un campo di ricerca --- */
.suggerimenti { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; box-sizing: border-box; margin-top: 4px; max-height: 220px; overflow-y: auto; padding: 4px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #d5ddd7, 0 30px 40px -24px rgba(18,32,26,.55) }
.suggerimenti:empty { display: none }
.suggerimento { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #12201a; text-align: left; cursor: pointer }
.suggerimento:hover { background: #eef3ef }
.suggerimento--vuoto, .suggerimento--vuoto:hover { background: none; color: #55665d; font-weight: 400; cursor: default }
.suggerimento-nota { display: block; font-size: 12px; font-weight: 400; color: #55665d }

/* --- L'editor di un programma di esercizi (ace-programma.js) ---
   Un blocco per giorno ("Tutti i giorni" per primo), e dentro una scheda scavata per
   esercizio, coi campi bianchi. Nome, serie, ripetizioni e recupero stanno su una riga con
   "Togli" in fondo; sotto le sezioni a pastiglie e il video, poi le note per intero. Lo usano
   la finestra degli esercizi del cliente e quella dei programmi pronti della libreria. */
.programma-giorni { display: flex; flex-direction: column; gap: 22px }
.programma-giorni .giorno-blocco { display: flex; flex-direction: column; gap: 10px }
.programma-giorni .giorno-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px }
.programma-giorni .giorno-titolo { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15 }
.programma-giorni .giorno-testa .tasto { min-height: 36px }
.programma-giorni .giorno-testa .rosso, .programma-giorni .giorno-testa .rosso:hover { color: #b3352a }
.programma-giorni .giorno-testa .et-nota { font-size: 13px }
.programma-giorni .giorno-quando { max-width: 460px }
.programma-giorni .giorno-blocco > .tasto { align-self: flex-start }
.programma-giorni .esercizi-righe { display: flex; flex-direction: column; gap: 12px }
.programma-giorni .esercizi-righe:empty { display: none }
.programma-giorni .esercizio-campi { display: grid; grid-template-columns: auto minmax(0, 2.6fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) auto; gap: 10px 12px; padding: 12px 14px; border-radius: 16px; background: #dfe6e1; box-shadow: inset 0 2px 5px rgba(18,32,26,.16), inset 0 -1px 0 rgba(255,255,255,.9) }
.programma-giorni .esercizio-campi .scavo { background: #fff }
.programma-giorni .esercizio-campi textarea.scavo { min-height: 60px }
/* I suggerimenti della libreria stanno sotto il campo del nome, sopra la riga dopo. */
.programma-giorni .campo-nome { position: relative }
.programma-giorni .suggerimento-nota { margin-top: 2px }
.programma-giorni .campo-libreria { grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px }
.programma-giorni .campo-note { grid-column: 2 / -1; grid-row: 3 }
.programma-giorni .togli { grid-column: 7; grid-row: 1; align-self: end }
/* Spostare una riga (26/10/2026): a sinistra, in colonna, il numero che avrà sul PDF, la
   maniglia da trascinare e le due frecce. La maniglia non lascia scorrere la pagina al dito
   (touch-action), se no sul telefono trascinare farebbe scorrere. */
.programma-giorni .riga-sposta { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 2px }
.programma-giorni .riga-numero { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 999px; background: #12201a; color: #fff; font-size: 13px; font-weight: 700 }
.programma-giorni .riga-maniglia { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 40px; border-radius: 10px; color: #3f5148; font-size: 20px; cursor: grab; touch-action: none; user-select: none }
.programma-giorni .riga-maniglia:hover { background: #eef3ef }
.programma-giorni .riga-freccia { min-height: 36px; width: 36px; padding: 0; font-size: 16px }
.programma-giorni .riga-freccia:disabled { opacity: .3; cursor: default }
.programma-giorni .riga-giorno { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #3f5148 }
.programma-giorni .riga-giorno .scavo { min-height: 36px; padding-top: 0; padding-bottom: 0; background: #fff }
/* La riga che si sta trascinando sta sopra le altre e si vede presa in mano. */
.programma-giorni .esercizio-campi.in-trascinamento { position: relative; z-index: 5; box-shadow: 0 0 0 2px #0f5a3c, 0 24px 30px -18px rgba(18,32,26,.5); opacity: .96 }
.programma-giorni .in-trascinamento .riga-maniglia { cursor: grabbing }
.riga-video { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 1 320px }
.riga-video-link { font-size: 13px; font-weight: 600; color: #0f5a3c }
.riga-video .tasto { min-height: 36px; padding: 0 8px; font-size: 13px }
@media (max-width: 700px) {
  .programma-giorni .esercizio-campi { grid-template-columns: 1fr 1fr }
  .programma-giorni .campo-nome, .programma-giorni .campo-libreria, .programma-giorni .campo-note { grid-column: 1 / -1; grid-row: auto }
  .programma-giorni .togli { grid-column: 1 / -1; grid-row: auto; justify-self: start; order: 2 }
  /* Su una colonna numero, maniglia e frecce stanno in fila, in cima alla riga. */
  .programma-giorni .riga-sposta { grid-column: 1 / -1; grid-row: auto; order: -1; flex-direction: row; padding-top: 0 }
  /* Su una colonna l'ordine è quello del DOM, con le note prima delle sezioni: vanno in fondo. */
  .programma-giorni .campo-note { order: 1 }
  .riga-video { flex-basis: 100% }
}

/* --- I gruppi muscolari degli esercizi (petto, schiena, gambe…) ---
   Pastiglie da premere, quante se ne vogliono e anche nessuna (26/10/2026): caselle vere
   sotto (tastiera e lettori di schermo), il quadratino nascosto. Quelle scelte sono piene, come
   i filtri della libreria. */
.sezioni-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.sezioni-titolo { margin-right: 4px; font-size: 13px; font-weight: 600; color: #3f5148 }
.sezione-pastiglia { position: relative; display: inline-flex }
.sezione-pastiglia input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer }
.sezione-pastiglia span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #d5ddd7; font-size: 13px; font-weight: 600; color: #3f5148; transition: background .2s, color .2s }
.sezione-pastiglia:hover span { background: #eef3ef }
.sezione-pastiglia input:checked + span { background: #12201a; color: #fff; box-shadow: none }
.sezione-pastiglia input:focus-visible + span { outline: 2px solid #0f5a3c; outline-offset: 2px }

/* --- Menu a comparsa (scelta del tipo di prenotazione, azioni su un evento) --- */
.menu-comparsa { position: fixed; z-index: 120; box-sizing: border-box; min-width: 192px; padding: 4px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #d5ddd7, 0 30px 40px -24px rgba(18,32,26,.55); font-family: 'Hanken Grotesk', sans-serif }
.menu-comparsa[hidden], .menu-comparsa.hidden { display: none }
.menu-comparsa button { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #12201a; text-align: left; cursor: pointer }
.menu-comparsa button:hover { background: #eef3ef }
.menu-comparsa .voce-elimina { color: #b3352a }
.menu-comparsa .titolo { max-width: 256px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: #55665d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* --- Calendario a comparsa ---
   Un mese alla volta, ancorato a chi lo apre. Oggi è verde, il giorno scelto è inchiostro
   pieno come la voce del menu in cui si è. */
.calendario { position: fixed; z-index: 140; box-sizing: border-box; width: 272px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #d5ddd7, 0 30px 40px -24px rgba(18,32,26,.55); color: #12201a; font-family: 'Hanken Grotesk', sans-serif }
.calendario[hidden] { display: none }
.calendario-testata { display: flex; align-items: center; gap: 4px; margin-bottom: 4px }
.calendario-testata .tasto { min-height: 36px; padding: 0 12px }
.calendario-mese { flex: 1; text-align: center; font-size: 14px; font-weight: 700; text-transform: capitalize }
.calendario-settimana, .calendario-griglia { display: grid; grid-template-columns: repeat(7, 1fr) }
.calendario-settimana span { padding: 4px 0; font-size: 12px; font-weight: 600; color: #55665d; text-align: center }
.calendario-giorno { min-height: 34px; padding: 0; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: #12201a; cursor: pointer }
.calendario-giorno:hover:not(.calendario-giorno--scelto) { background: #eef3ef }
.calendario-giorno:focus-visible { outline-offset: -2px }
.calendario-giorno--fuori { color: #55665d; font-weight: 400 }
.calendario-giorno--oggi { color: #0f5a3c; font-weight: 800 }
.calendario-giorno--scelto { background: #12201a; color: #fff }

/* --- Tendina a comparsa (26/10/2026) ---
   L'elenco che si apre da una <select class="scavo">, disegnato da ace.js al posto di quello del
   sistema: gli stessi pezzi del calendario qui sopra (bianco, angoli da 16, la stessa ombra) e la
   voce scelta in inchiostro pieno come il giorno scelto. Sopra le finestre, come il calendario. */
.tendina { position: fixed; z-index: 140; box-sizing: border-box; max-width: calc(100vw - 16px); max-height: min(340px, calc(100vh - 16px)); overflow-y: auto; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #d5ddd7, 0 30px 40px -24px rgba(18,32,26,.55); color: #12201a; font-family: 'Hanken Grotesk', sans-serif; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d5ddd7 transparent }
.tendina[hidden] { display: none }
.tendina-voce { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #12201a; text-align: left; cursor: pointer }
.tendina-voce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tendina-voce:hover:not(.tendina-voce--scelta):not(:disabled) { background: #eef3ef }
.tendina-voce:focus-visible { outline: 2px solid #0f5a3c; outline-offset: -2px }
.tendina-voce--scelta { background: #12201a; color: #fff }
.tendina-voce:disabled { color: #55665d; font-weight: 400; cursor: default }
.tendina-punto { flex: none; width: 12px; height: 12px; border-radius: 999px }
/* La tendina chiusa: la freccetta è nostra e non quella del sistema, che cambia da un browser
   all'altro. !important perché molti campi riscrivono `background` per intero (il bianco dei
   campi dentro le righe scavate) e la porterebbero via. */
select.scavo { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%233f5148' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important }

/* Un campo data col suo tasto che apre il calendario qui sopra al posto di quello del browser. */
.campo-data { position: relative; display: block }
.campo-data input { padding-right: 64px }
.campo-data input::-webkit-calendar-picker-indicator { display: none }
.campo-data-apri { position: absolute; right: 4px; bottom: 4px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 12px; font-weight: 700; color: #3f5148; cursor: pointer }
.campo-data-apri:hover { background: #dfe6e1; color: #12201a }

/* --- "Messaggi e assistente": una riga per messaggio, nome a sinistra e leva a destra ---
   La usano la scheda cliente e le finestre di prenotazione (lì con la frase di spiegazione). */
.preferenza { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.preferenze-colonna { display: flex; flex-direction: column; gap: 12px }
.preferenza-nome { font-size: 14px; font-weight: 600; color: #12201a }
.preferenza-nota { display: block; font-size: 12px; font-weight: 400 }
.lev:disabled { opacity: .5; cursor: default }

/* --- Ripetizione degli appuntamenti: la riga di riepilogo nel form e i controlli della
   finestra che imposta la regola --- */
.riga-ripetizione { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.riga-ripetizione p { flex: 1 1 12ch; margin: 0; font-size: 13px; font-weight: 400 }
.nota-ripeti { margin: 0; font-size: 13px; color: #55665d }
/* I sette giorni: un binario scavato, e i giorni scelti sono tasti bianchi sollevati. */
.giorni-settimana { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px }
.giorni-settimana .tasto { flex: 1 0 auto; min-width: 44px; padding: 0 8px }
.gruppo-scelte { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px }
.gruppo-scelte legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #3f5148 }
.scelta { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px }
.scelta input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #0f5a3c }
.scelta input[type="number"] { width: 88px }
.scelta .campo-data { flex: 1 1 auto }

/* --- Unione di due schede: la finestra che cerca il doppione e chiede quale tenere --- */
.unisci-intro { margin: 0; font-size: 14px; line-height: 1.5; color: #55665d }
.unisci-cerca { position: relative }
.unisci-scelta { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid #e6ece8 }
.unisci-domanda { margin: 0; font-size: 14px; font-weight: 600 }
.unisci-opzioni { display: flex; flex-direction: column; gap: 8px }
.unisci-opzione { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer }
.unisci-opzione input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #0f5a3c }
.unisci-opzione-testo { display: flex; flex-direction: column }
.unisci-opzione-nota { font-size: 13px; color: #55665d }
.unisci-riepilogo { margin: 0; font-size: 14px; line-height: 1.5 }

/* --- Notifiche dell'assistente: la campanella accanto alla scritta ACE e la sua tendina ---
   La campanella la mette ace.js in ogni vista. È alta 44 come ogni cosa che si tocca, e sta
   centrata sulla riga della scritta (alta 28). Il pallino è il rosso degli avvisi. */
.campanella { position: absolute; top: -8px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: #12201a; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s }
.campanella:hover, .campanella[aria-expanded="true"] { background: #eef3ef }
.campanella svg { width: 24px; height: 24px }
.campanella-conteggio { position: absolute; top: 3px; right: 1px; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #b3352a; color: #fff; font-family: 'Hanken Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff }
.notifiche-tendina { position: fixed; z-index: 120; box-sizing: border-box; width: 380px; max-width: calc(100vw / var(--scala) - 16px); overflow-y: auto; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #d5ddd7, 0 30px 40px -24px rgba(18,32,26,.55); color: #12201a; font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; display: flex; flex-direction: column; gap: 10px }
.notifiche-tendina:focus { outline: none }
.notifiche-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px }
.notifiche-tendina .notifiche-lista { display: flex; flex-direction: column; gap: 10px }
.notifiche-vuoto { font-size: 14px }
/* Una notifica: la usano la tendina e il riquadro della Home. */
.notifica { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px }
.notifica-titolo { font-size: 14px; font-weight: 600 }
/* Il nome porta alla scheda ma non cambia l'aspetto della frase. */
.notifica-titolo a { display: contents; color: inherit }
.notifica-quando { font-size: 12px }
.notifica-extra { font-size: 12px; overflow-wrap: anywhere }
/* Già letta: resta in elenco come cronologia, ma non chiede più attenzione. */
.notifica--letta { background: none; box-shadow: inset 0 0 0 1px #e6ece8 }
.notifica--letta .notifica-titolo { font-weight: 400; color: #55665d }