/* ================= L'ASPETTO COMUNE =================
   23 settembre 2026. Il gemello fermo di parti/movimento.css: qui le forme,
   la' il movimento. Caricato da gestionale e app dei clienti subito PRIMA di
   movimento.css, cioe' dopo tutti gli altri fogli: quello che dice vince.

   La regola di Jacopo che tiene insieme tutto: il segnale di «dove sei» e'
   UNO in tutta l'app — il riquadro grigio rialzato col filetto d'accento in
   cima. Lo porta la voce accesa della barra, il giorno scelto della scheda,
   la riga scelta di un elenco. Un secondo modo di dire la stessa cosa (il
   riquadro tutto verde di prima) e' un'app diversa. */

:root {
  /* il riquadro grigio, una ricetta sola */
  --rialzo-fondo: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  --rialzo-orlo: inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.17);
  --ombra-morbida: 0 10px 28px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.18);
  /* il vetro: per quello che galleggia sopra i contenuti, mai per le schede */
  --vetro-fondo: linear-gradient(145deg, rgba(36,39,43,.72), rgba(14,16,18,.62));
  --vetro-sfoca: blur(28px) saturate(170%);
  --vetro-orlo: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.20);
  --vetro-ombra: 0 24px 60px rgba(0,0,0,.50), 0 4px 14px rgba(0,0,0,.22);
}

/* ---------- la scheda di allenamento: il giorno scelto ---------- */
.sc-day { position:relative; transition:transform 260ms cubic-bezier(.3,1.4,.5,1), background-color 160ms; }
.sc-day.sc-day.on {
  background:var(--rialzo-fondo); border-color:transparent; color:#fff;
  box-shadow:var(--rialzo-orlo), var(--ombra-morbida);
  transform:translateY(-2px);
}
.sc-day.sc-day.on b { color:var(--barra-acc, #C9FFE4); }
.sc-day.sc-day.on span { color:rgba(255,255,255,.62); }
.sc-day.sc-day.on::before {
  content:""; position:absolute; left:14px; right:14px; top:-1px; height:3px;
  border-radius:0 0 3px 3px; background:var(--barra-acc, #C9FFE4);
  box-shadow:0 1px 8px color-mix(in srgb, var(--barra-acc, #C9FFE4) 55%, transparent);
}
#pg-scheda, #scDays { --barra-acc:color-mix(in srgb, var(--accento) 42%, #C9FFE4); }

/* ---------- la fine dell'allenamento ---------- */
.gw-fine { padding-top:4px; }
.gw-anello { position:relative; width:132px; height:132px; margin:0 auto 14px; color:var(--barra-acc, #C9FFE4);
  animation:asp-anello 620ms cubic-bezier(.3,1.35,.5,1) both; }
#gw { --barra-acc:color-mix(in srgb, var(--accento) 42%, #C9FFE4); }
.gw-anello svg { width:100%; height:100%; transform:rotate(-90deg); display:block; }
.gw-anello circle { fill:none; stroke-width:8; }
.gw-anello .fondo { stroke:rgba(255,255,255,.09); }
.gw-anello .pieno { stroke:currentColor; stroke-linecap:round; }
.gw-anello .centro { position:absolute; inset:0; display:grid; place-items:center; }
.gw-anello .centro svg { width:44px; height:44px; transform:none;
  animation:asp-spunta 420ms 260ms cubic-bezier(.3,1.7,.5,1) both; }
@keyframes asp-anello { from { opacity:0; transform:scale(.72) rotate(-20deg); } to { opacity:1; transform:none; } }
@keyframes asp-spunta { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:scale(1); } }
/* lo scoppio: dodici puntini che escono dal cerchio e spariscono, una volta */
.gw-anello .scintille { position:absolute; left:50%; top:50%; width:0; height:0; }
.gw-anello .scintille i {
  position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:0;
  animation:asp-scintilla 760ms var(--t, 0ms) cubic-bezier(.2,.8,.3,1) 380ms both;
}
.gw-anello .scintille i:nth-child(3n) { background:rgba(255,255,255,.8); width:4px; height:4px; }
@keyframes asp-scintilla {
  0%   { opacity:0; transform:rotate(var(--a)) translateY(-40px) scale(.4); }
  25%  { opacity:1; }
  100% { opacity:0; transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) scale(1); }
}
.gw-fine .l { margin-top:2px; }
.gw-numeri { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:18px 0 4px; }
.gw-numeri > div { padding:12px 8px; border-radius:14px; background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); text-align:center; }
.gw-numeri b { display:block; font-size:24px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; color:#fff; }
.gw-numeri b small { font-size:14px; font-weight:700; color:rgba(255,255,255,.45); }
.gw-numeri span { display:block; margin-top:4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }

@media (prefers-reduced-motion: reduce) {
  .sc-day { transition:none; }
  .gw-anello, .gw-anello .centro svg { animation:none; }
  .gw-anello .scintille { display:none; }
}

/* ---------- le finestre: sul telefono salgono dal basso, sul computer compaiono ---------- */
/* Le finestre (.overlay > .modal) comparivano di colpo, con «display:none
   → flex». Qui l'overlay resta com'e' (display) e si anima solo il velo
   (opacity) e la scheda (transform): sul telefono sale dal basso come il
   foglio di «Altro» e la finestra delle conferme, sul computer arriva con
   una piccola variazione di scala. Stessa ricetta in tutte e due le app.
   I fogli a tutto schermo (.foglio-pieno) hanno gia' il loro modo. */
.overlay.overlay { transition:none; }
.overlay > .modal {
  animation:asp-finestra-pc 220ms cubic-bezier(.2,.9,.3,1) both;
  box-shadow:var(--vetro-ombra);
}
.overlay.on > .modal { animation-name:asp-finestra-pc; }
@keyframes asp-finestra-pc { from { opacity:0; transform:scale(.96) translateY(6px); } to { opacity:1; transform:none; } }
@media (max-width:560px) {
  .overlay.overlay:not(.overlay-foglio) { align-items:flex-end; padding:0; }
  .overlay:not(.overlay-foglio) > .modal {
    width:100%; max-width:100%; border-radius:22px 22px 0 0;
    padding-bottom:calc(22px + var(--sab, 0px));
    animation-name:asp-finestra-su; animation-duration:300ms;
  }
  .overlay.on:not(.overlay-foglio) > .modal { animation-name:asp-finestra-su; }
  @keyframes asp-finestra-su { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
}
/* il velo dietro si accende insieme alla scheda */
.overlay.on { animation:asp-velo 180ms ease both; }
@keyframes asp-velo { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .overlay > .modal, .overlay.on > .modal, .overlay.on { animation:none; }
}

/* ---------- il cambio di schermata: una dissolvenza con un piccolo scorrimento ---------- */
/* Cambiando voce nella barra la pagina nuova entra con una dissolvenza e
   uno scorrimento di 10 px. La direzione la scrive parti/movimento.js sul
   body («va-avanti» quando si entra in un dettaglio o si va a una voce piu'
   a destra, «va-indietro» quando si torna): entrare scivola da destra,
   tornare da sinistra, come sfogliare. Il gestionale fa gia' salire le
   schede una alla volta (saliDentro): qui si muove il foglio intero,
   poco, e le due cose si sommano senza litigare. */
/* ⚠ una pagina spostata di 10 px verso destra allarga la finestra: su
   iPhone la pagina diventa 400 px e resta storta (trappola gia' pagata con
   la griglia dei nomi). Lo scorrimento si fa dentro un contenitore che
   ritaglia: il pezzo che sporge non conta. */
/* «backwards» e non «both» (24 settembre 2026 sera): con «both» a fine
   animazione la pagina teneva una trasformazione (identica, ma c'era), e una
   pagina trasformata fa da contenitore a tutto quello che ha dentro in
   «position:fixed» — «Oggi» del calendario, che galleggia sopra la barra,
   finiva in fondo alla pagina invece che in fondo allo schermo. */
.page.on { animation:asp-pagina 260ms cubic-bezier(.2,.9,.3,1) backwards; }
.app, .sheet, #app { overflow-x:clip; }
body.va-indietro .page.on { animation-name:asp-pagina-indietro; }
@keyframes asp-pagina { from { opacity:0; transform:translate3d(10px,0,0); } to { opacity:1; transform:none; } }
@keyframes asp-pagina-indietro { from { opacity:0; transform:translate3d(-10px,0,0); } to { opacity:1; transform:none; } }
/* la scheda del cliente e' un dettaglio: entra da destra, e l'elenco torna da sinistra */
#clientDetail[style*="block"] { animation:asp-pagina 260ms cubic-bezier(.2,.9,.3,1) both; }
body.va-indietro #clientiList[style*="block"] { animation:asp-pagina-indietro 260ms cubic-bezier(.2,.9,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .page.on, #clientDetail[style*="block"], body.va-indietro #clientiList[style*="block"] { animation:none; }
}

/* ---------- le sagome mentre arrivano i dati ---------- */
/* Un riquadro che aspetta i dati mostra delle barre grigie della misura
   del contenuto invece di «Caricamento…» o del vuoto, cosi' la pagina non
   salta quando arrivano. Si usa mettendo «sagoma» sul contenitore: le
   righe dentro (.sg) sono grigie e respirano; togliendo la classe restano
   i contenuti veri. La luce che scorre e' un'opacita' che pulsa, non uno
   sfondo che si muove: costa niente. */
.sagoma .sg, .sg-riga {
  display:block; height:14px; border-radius:7px;
  background:color-mix(in srgb, var(--inchiostro, #fff) 9%, transparent);
  animation:asp-respira 1.4s ease-in-out infinite;
}
.sagoma .sg + .sg, .sg-riga + .sg-riga { margin-top:10px; }
.sg-riga.corta { width:42%; } .sg-riga.media { width:68%; } .sg-riga.alta { height:22px; }
.sg-scheda { padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.035); }
.sg-scheda + .sg-scheda { margin-top:10px; }
@keyframes asp-respira { 0%, 100% { opacity:.55; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .sagoma .sg, .sg-riga { animation:none; } }
/* la chat che carica: tre bolle, due a sinistra e una a destra */
.sg-chat { display:flex; flex-direction:column; gap:10px; padding:12px 4px; }
.sg-chat .sg-bolla { height:34px; border-radius:16px; width:58%; margin:0; }
.sg-chat .sg-bolla.corta { width:38%; }
.sg-chat .sg-bolla.dx { align-self:flex-end; }

/* ---------- il vetro, dove galleggia qualcosa ---------- */
/* Stessa ricetta della barra in basso (che gia' la porta): trasparenza,
   sfondo sfocato, orlo chiaro in cima come un riflesso. Solo su quello che
   sta SOPRA i contenuti — barra, foglio «Altro», finestre, conferme,
   avvisi — mai sulle schede e sui numeri, che devono restare leggibili.
   Il velo bianco sul vetro e' un anti-pattern: qui il riflesso e' un orlo
   di un pixel, non una lastra. */
@media (max-width:899px) {
  .tabbar.tabbar {
    background:var(--vetro-fondo);
    backdrop-filter:var(--vetro-sfoca); -webkit-backdrop-filter:var(--vetro-sfoca);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:var(--vetro-orlo), var(--vetro-ombra);
  }
  .tabbar.tabbar::after { display:none; }   /* il riflesso ora e' l'orlo */
  .foglio-altro.foglio-altro {
    background:var(--vetro-fondo);
    backdrop-filter:var(--vetro-sfoca); -webkit-backdrop-filter:var(--vetro-sfoca);
    border-top:0; box-shadow:var(--vetro-orlo), var(--vetro-ombra);
  }
  .overlay:not(.overlay-foglio) > .modal, .chiedi-box.chiedi-box {
    background:color-mix(in srgb, var(--scheda) 88%, transparent);
    backdrop-filter:var(--vetro-sfoca); -webkit-backdrop-filter:var(--vetro-sfoca);
    border:0; box-shadow:var(--vetro-orlo), var(--vetro-ombra);
  }
}
/* l'avviso in basso: vetro scuro invece del marrone pieno, stesso in tutte e due le app */
.toast.toast { background:color-mix(in srgb, #16181B 84%, transparent); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 12px 32px rgba(0,0,0,.4); color:#fff; }
.toast.toast.ok { background:color-mix(in srgb, #1F8F55 82%, transparent); }

/* ---------- la base: le schede, le insegne, le ombre ---------- */
/* Prima degli effetti, le cose che fanno sembrare le due app la stessa app.
   Le schede del gestionale (.card) hanno ombra morbida e orlo chiaro in
   cima; quelle dell'app dei clienti (.sc-box, .sc-card) avevano solo un
   bordo. Una ricetta sola per tutte, con la stessa curva (20) e la stessa
   ombra. Le insegne dei riquadri (le etichette in maiuscolo) hanno la
   stessa misura, la stessa spaziatura e lo stesso grigio ovunque. */
.card, .sc-box, .sc-card {
  border-radius:20px;
  box-shadow:0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
}
.sc-box, .sc-card { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); }
/* le insegne: 11 px mono, maiuscolo, grigio — in tutte e due le app */
/* Nell'app dei clienti tre insegne (.sc-blk, .cal-next, .exh) erano scritte
   nel colore dell'accento: e' decorazione, e la regola del 5% la vieta. Qui
   tornano grigie come tutte le altre; l'accento resta a dove sei e all'azione. */
.sc-head .k, .sc-blk .k, .cal-next .k, .exh .k, .gw-fatte .k, .cv-t {
  font-family:var(--f-mono, ui-monospace, monospace); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
/* i titoli di sezione: stessa scala nelle due app (19 sul telefono, 21 sul computer) */
.sec-t, .sheet h2 { font-size:19px; letter-spacing:-.02em; }
@media (min-width:900px) { .sec-t, .sheet h2 { font-size:21px; } }
/* le icone dentro i tasti: 16 px, allineate al testo */
.btn svg, .gw-b svg, .mgo svg { width:16px; height:16px; vertical-align:-3px; }

/* ================= LA DISCIPLINA NEL COMPILATORE (1° ottobre 2026) =================
   Powerlifting e calisthenics. Solo gettoni del tema: il grigio non si tinge,
   l'accento resta alla tappa in cui si e' (un trattino) e a nient'altro. */
.bdisc { margin:0 0 12px; }
.bdisc .bh-lab, .bmass .bh-lab { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray); font-weight:700; margin-bottom:5px; }
.bdisc .seg { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; padding:4px; border:1px solid var(--filo); background:var(--campo); border-radius:12px; }
.bdisc .seg button { border:0; background:none; color:var(--gray); font:600 13.5px/1 var(--f-testo, inherit); padding:10px 4px; border-radius:9px; cursor:pointer; min-height:36px; }
.bdisc .seg button[aria-checked="true"] { background:var(--scheda); color:var(--ink); box-shadow:inset 0 0 0 1px var(--filo-forte, var(--filo)); }
.bmass { margin:0 0 12px; }
.bmass[hidden] { display:none; }
.bmass .bh-lab { display:flex; justify-content:space-between; gap:8px; }
.bmass .bh-lab i { font:500 10.5px var(--f-mono, monospace); letter-spacing:0; text-transform:none; font-style:normal; }
.bmass-r { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.bmass-c { display:block; border:1px solid var(--filo); background:var(--campo); border-radius:12px; padding:8px 12px; cursor:text; }
.bmass-c small { display:block; font-size:11px; color:var(--gray); font-weight:600; }
.bmass-c span { display:flex; align-items:baseline; gap:4px; }
.bmass-c input { width:100%; min-width:0; border:0; background:none; outline:none; padding:0; color:var(--ink);
  font:700 18px/1.25 var(--f-display, inherit); font-variant-numeric:tabular-nums; }
.bmass-c em { font:500 11px var(--f-mono, monospace); color:var(--gray); font-style:normal; }
.bmass-c:focus-within { border-color:color-mix(in srgb, var(--accento) 55%, transparent); }

/* le parti della seduta: un'etichetta con una riga, non un riquadro */
#bDays .sez { display:flex; align-items:center; gap:8px; padding:16px 16px 4px 14px; border-top:1px solid var(--soft);
  font:600 10.5px/1 var(--f-mono, monospace); text-transform:uppercase; letter-spacing:.08em; color:var(--gray); }
#bDays .sez::after { content:""; flex:1; height:1px; background:var(--soft); }
#bDays .sez + .ese { border-top:0; }

/* il pezzo della disciplina sotto i numeri di sempre */
.ese-x { display:contents; }
.ese-x .dato { display:inline-flex; align-items:center; gap:1px; background:var(--soft); border-radius:9px; padding:3px 8px; font-size:12.5px; font-weight:700; color:var(--ink); }
.ese-x .dato em { font-style:normal; color:var(--gray); padding:0 1px; }
.ese-x .dato small { font-size:10.5px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:.04em; margin-right:3px; }
.ese-x .dato input { border:0; background:none; outline:none; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--ink); padding:0;
  text-align:center; font-variant-numeric:tabular-nums; width:34px; field-sizing:content; min-width:18px; }
.ese-x .dato.car { gap:6px; padding:3px 6px 3px 4px; }
.ese-x .tipo { display:inline-flex; border-radius:7px; background:var(--campo); padding:2px; gap:1px; }
.ese-x .tipo button { border:0; background:none; font:600 10px/1 var(--f-mono, monospace); color:var(--gray); padding:4px 6px; border-radius:5px; text-transform:uppercase; cursor:pointer; }
.ese-x .tipo button.on { background:var(--scheda); color:var(--ink); box-shadow:inset 0 0 0 1px var(--filo); }
.ese-x .calc { font:500 12px var(--f-mono, monospace); color:var(--gray); white-space:nowrap; }
.ese-x .bollo { font:500 10.5px/1 var(--f-mono, monospace); color:var(--gray); border:1px solid var(--filo); border-radius:5px; padding:4px 6px; white-space:nowrap; }
.ese-x select { border:1px solid var(--filo); background:var(--campo); color:var(--gray); border-radius:8px; padding:4px 6px; font:500 11.5px var(--f-mono, monospace); max-width:100%; }
.ese-x .scar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; width:100%; }
.ese-x .scar > i { font-style:normal; color:var(--gray); font-size:13px; }
.ese-x .scar .lab { font-size:12px; color:var(--gray); font-weight:600; }
.ese-x .scar-x { border:0; background:none; color:var(--gray); font-size:12px; padding:4px 6px; cursor:pointer; }
.ese-x .scar-piu { border:1px dashed var(--filo-forte, var(--filo)); background:none; color:var(--gray); border-radius:8px; padding:4px 8px; font:600 11.5px var(--f-testo, inherit); cursor:pointer; }
.ese-x .cat { display:flex; align-items:center; gap:8px; width:100%; }
.ese-x .cat > button { flex:0 0 auto; width:30px; height:30px; border-radius:8px; border:1px solid var(--filo); background:var(--campo); color:var(--ink); font-size:15px; line-height:1; padding:0; cursor:pointer; }
.ese-x .cat > button:disabled { opacity:.35; cursor:default; }
.ese-x .cat-t { flex:1; min-width:0; }
.ese-x .cat-t b { display:block; font-size:12px; color:var(--gray); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.ese-x .cat-t small { font:500 11px var(--f-mono, monospace); color:var(--gray); }
.ese-x .tappe { display:flex; gap:3px; margin-top:5px; }
.ese-x .tappe span { flex:1; height:3px; border-radius:2px; background:var(--soft); }
.ese-x .tappe span.f { background:color-mix(in srgb, var(--ink) 40%, transparent); }
.ese-x .tappe span.q { background:var(--accento); }
.ese-x .d-sali { flex:1 1 100%; min-width:0; border:1px solid var(--filo); background:var(--campo); border-radius:9px; padding:6px 10px;
  font:inherit; font-size:12.5px; color:var(--ink); outline:none; }
.ese-x .d-sali:focus { border-color:color-mix(in srgb, var(--accento) 55%, transparent); }
@media (max-width:720px) {
  .ese-x .dato input { font-size:13px; }
}
/* larghezze fisse dove il navigatore non sa ancora misurare il testo da solo */
.ese-x .dato .d-car { width:30px; } .ese-x .dato .d-pausa { width:24px; } .ese-x .dato .d-zav { width:58px; } .ese-x .dato .d-tempo { width:46px; }
.ese-x .dato .d-sser { width:22px; } .ese-x .dato .d-srip { width:30px; } .ese-x .dato .d-sdel { width:34px; }
/* con la disciplina accesa la nota va in fondo, larga: in mezzo alle pastiglie si stringeva */
.ese-d:has(.ese-x) .d-nota { order:2; flex:1 1 100%; }
.ese-d:has(.ese-x) .d-vid { order:1; }

/* ================= LE SUPERSERIE NEL COMPILATORE (1° ottobre 2026) =================
   Un tasto piccolo sulla riga che separa due esercizi li lega nello stesso
   giro; le righe legate portano A1, A2 al posto del numero e un filo grigio
   che le unisce. Niente colore: e' una struttura, non uno stato. */
#bDays .ese { position:relative; }
#bDays .ese .lega { position:absolute; top:-10px; left:44px; z-index:2; height:20px; padding:0 8px; border-radius:6px;
  border:1px solid var(--filo); background:var(--scheda); color:color-mix(in srgb, var(--gray) 70%, transparent);
  font:600 10.5px/18px var(--f-mono, monospace); letter-spacing:.02em; cursor:pointer; white-space:nowrap; }
#bDays .ese .lega:hover, #bDays .ese .lega:focus-visible { color:var(--ink); border-color:var(--filo-forte, var(--filo)); }
#bDays .ese .lega.on { color:var(--ink); border-color:var(--filo-forte, var(--filo)); }
#bDays .ese.in-sup .ese-n { width:auto; min-width:21px; padding:0 4px; font-family:var(--f-mono, monospace); position:relative; z-index:1;
  background:var(--campo); color:var(--ink); box-shadow:inset 0 0 0 1px var(--filo-forte, var(--filo)); }
#bDays .ese.in-sup::before { content:""; position:absolute; left:24px; top:0; bottom:0; width:1px; background:var(--filo-forte, var(--filo)); }
#bDays .ese.in-sup.sup-primo::before { top:18px; }
#bDays .ese.in-sup.sup-ultimo::before { bottom:auto; height:18px; }
#bDays .ese.in-sup.sup-primo.sup-ultimo::before { display:none; }
#bDays .ese.in-sup + .ese.in-sup:not(.sup-primo) { border-top-style:dashed; }
@media (max-width:720px) {
  #bDays .ese .lega { left:40px; }
  #bDays .ese.in-sup::before { left:21px; }
}

/* ---- I COLLABORATORI (2 ottobre 2026) ---- */
.collab-c { border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:10px 0; background:var(--card); }
.collab-c.spento { opacity:.6; }
.collab-h { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.collab-h b { display:block; font-size:15px; color:var(--ink); }
.collab-h i { display:block; font-style:normal; font-size:12.5px; color:var(--gray); margin-top:1px; }
.collab-cli { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 8px; }
.collab-chip { display:inline-flex; align-items:center; gap:6px; background:var(--soft); border-radius:999px; padding:4px 6px 4px 10px; font-size:12.5px; font-weight:700; color:var(--ink); }
.collab-chip em { font-style:normal; font-weight:600; font-size:11px; color:var(--gray); }
.collab-chip.si em { color:var(--accento-testo, #0a7d5a); }
.collab-chip.no em { color:#c0392b; }
.collab-chip button { border:0; background:none; color:var(--gray); font-size:15px; line-height:1; cursor:pointer; padding:0 4px; }
.collab-az { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.collab-az select, .team-affida select { border:1px solid var(--line); border-radius:10px; padding:6px 8px; font:inherit; font-size:13px; background:var(--card); color:var(--ink); }
.collab-nuovo { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.collab-nuovo label { display:block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--gray); margin-bottom:8px; }
.collab-campi { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.collab-campi input, .collab-link input, .team-scrivi input { border:1px solid var(--line); border-radius:10px; padding:9px 11px; font:inherit; font-size:14px; background:var(--card); color:var(--ink); min-width:0; }
.collab-campi input:last-child { grid-column:1 / -1; }
.collab-link { margin-top:14px; }
.collab-link input { width:100%; box-sizing:border-box; }
.team-r { border-top:1px solid var(--soft); padding:10px 0; }
.team-r:first-of-type { border-top:0; }
.team-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.team-h b { font-size:14.5px; color:var(--ink); }
.team-h i { font-style:normal; font-size:12.5px; color:var(--gray); }
.team-piano { background:var(--soft); border-radius:12px; padding:10px 12px; margin:8px 0; font-size:13.5px; }
.team-piano i { display:block; font-style:normal; font-size:11.5px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.team-piano p { margin:0 0 6px; color:var(--ink); }
.team-note { display:flex; flex-direction:column; gap:4px; margin:6px 0; }
.team-n { font-size:13px; color:var(--ink); }
.team-n b { color:var(--gray); font-weight:800; margin-right:4px; }
.team-n i { font-style:normal; font-size:11px; color:var(--gray); margin-left:6px; }
.team-n.mia b { color:var(--accento-testo, #0a7d5a); }
.team-scrivi { display:flex; gap:6px; }
.team-scrivi input { flex:1; }
.team-affida { margin-top:8px; }
@media (max-width:560px) { .collab-campi { grid-template-columns:1fr; } }

/* ============================================================
   PIU' ARIA FRA LE RIGHE DEL COMPILATORE (14 ottobre 2026, sera).
   Jacopo: «le sezioni compilabili sono tutte attaccate: tanto si scorre
   in basso, occupare meno spazio non e' meglio — prenditi lo spazio che
   serve». Quindi le righe respirano in verticale: si scorre un filo di
   piu', ma si compila senza le dita appiccicate.
   ============================================================ */
.ese { padding-top:18px; padding-bottom:18px; }
#bDays .sez { padding:28px 16px 10px 14px; }
.brow { gap:12px; margin-bottom:20px; }
.bdisc, .bmass { margin-bottom:20px; }
.bh-meta { margin-top:18px; }
.bguida { margin:18px 0; }
.addrow { padding:13px 16px; }
.bx th { padding:12px 10px 7px; }
.bx td { padding:8px 6px; }

/* COME SI SALVA UN MODELLO, DETTO CHIARO (14 ottobre 2026, sera).
   Sul telefono «Salva modello» era ridotto a un dischetto muto: il tasto
   riprende una scritta corta e, finche' non esiste nessun modello, sopra
   i tasti c'e' una riga che spiega il giro. */
.bnota-tpl { margin:18px 2px 10px; font-size:13px; color:var(--gray); line-height:1.5; }
.bnota-tpl b { color:var(--ink); }
.bfoot .et2 { display:none; }
@media (max-width:720px) {
  .bfoot.sticky #saveTpl { flex:0 0 auto; padding:0 12px; }
  .bfoot.sticky #saveTpl .et2 { display:inline; font-size:12.5px; font-weight:700; }
  .bfoot.sticky #saveTpl .ib { margin-right:5px; }
}