/* Stacco — direzione «Nastro». Bolle morbide, bersagli grandi, viola pieno. */

:root{
  /* IL VESTITO E' QUELLO DI ALESSIO. L'app e' sua: non c'e' un momento in
     cui si vede il viola e poi arriva l'oro, perche' il viola non c'e' piu'.
     Il meccanismo del marchio resta intero — da «studi.marchio» si cambiano
     tutti questi colori senza toccare il foglio di stile — ed e' quello che
     servira' il giorno in cui l'app andra' a un altro allenatore.
     Crema e oro di giorno, nero e oro di notte. */
  --sfondo:#FFFFFF;
  --carta:#FBF8F1;
  --inchiostro:#0B0B0D;
  --tenue:#5C564A;
  --viola-testo:#8A6315;   /* il colore quando è testo, non sfondo */
  --tenue2:#6E6758;
  --filo:#EFE9DC;
  --filo-forte:#DFD6C2;
  /* «--viola» di nome, oro di fatto: il nome resta per non riscrivere mille
     righe, e tanto il colore vero arriva dal marchio dello studio. */
  --viola:#D4AF37;
  --viola-cupo:#8A6315;   /* il capo scuro dei gradienti */
  /* Sull'oro il bianco sta a 2,1: sopra ci va il nero. Non e' una scelta di
     gusto, e' l'unico dei due che si legge. */
  --sopra-colore:#0B0B0D;
  /* Il viola come TESTO su una carta bianca: il «Comincia» dei pulsanti
     chiari sopra le schede colorate. Il viola pieno li' sta a 4,2 — lo
     metteva solo «marchio.js», quindi senza marchio non lo metteva nessuno
     e restava il chiaro. 7,87 su bianco. */
  /* L'oro come TESTO su fondo chiaro sta a 2,1 e sparisce: come scritta si
     usa il bronzo, che e' lo stesso colore portato a 4,5 su bianco. */
  --colore-su-carta:#8A6315;
  --accento:#8A6315;
  /* LA TESTATA, senza marchio nel database: gli stessi valori che
     «marchio.js» calcola quando lo studio c'e'. Chiara col filo d'oro —
     una fascia d'oro pieno alta mezzo schermo con sopra un titolo bianco
     sta a 2,1, e non e' un marchio, e' un cartello. */
  --testata-a:#FBF8F1;
  --testata-b:#FFFFFF;
  --testata-luce:rgba(212,175,55,.14);
  --su-testata:#0B0B0D;
  --su-testata-tenue:#5C564A;
  --filo-testata:#D4AF37;
  /* l alone sotto i pulsanti: era viola anche sotto un pulsante d oro */
  --ombra-viola:rgba(212,175,55,.75);
  /* la carta del giorno di riposo: scura e calda come il resto, non il
     blu-viola di prima. Il fondo resta diverso dal colore pieno, perche'
     un giorno senza allenamento non deve sembrare un allenamento. */
  --riposo-a:#3A332A;
  --riposo-b:#241F17;
  --viola-scuro:#B8952C;
  --viola-chiaro:#F7EFDB;
  --buono:#0E7C72;
  /* Era #E09A1F, un ambra a un passo dall'oro: addosso a uno studio dorato
     l'avviso si confondeva con l'accento, e un allarme che somiglia a una
     decorazione non e' un allarme. Arancio bruciato: lontano dall'oro e
     lontano dal rosso dei dischi, cosi' resta «attenzione» e non «errore». */
  --attenzione:#D9661A;
  --attenzione-chiara:#F59B4A;   /* la stessa, per fondi scuri */
  --attenzione-velo:#FDF0E4;

  /* «attenzione» e «non si torna indietro» non sono la stessa cosa: l'arancio
     dice «guarda», questo rosso dice «e' definitivo». Non e' il rosso del
     disco da 25, che in questa app vuol dire un peso. */
  --grave:#C0271F;
  --su-grave:#FFFFFF;   /* quello che si legge sopra --grave */
  --grave-velo:#FCEBE9;

  /* dischi olimpici, colori veri */
  --d25:#D1342A; --d20:#1B4FA0; --d15:#E8B321; --d10:#2E8B45; --d5:#F4F4F0; --d2:#1A1A1A;

  /* macro */
  --proteine:#4F5BD5;
  --carboidrati:#17A398;
  --grassi:#E09A1F;

  --r:20px;
  --ombra:0 10px 26px -16px rgba(60,40,140,.45);
  --ombra-alta:0 18px 40px -20px rgba(60,40,140,.5);
}

/* ============ il tema scuro ============
   Era dichiarato ma non esisteva: nessuna regola ridefiniva i colori, così
   «sempre scuro» metteva l'attributo e non cambiava niente. Qui i colori ci sono,
   e valgono sia quando lo chiede il telefono sia quando lo sceglie la persona. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sfondo:#0B0B0D; --carta:#17150F; --inchiostro:#F2EEE6;
    --tenue:#A39D90; --tenue2:#8D8779;
    --filo:#2A261C; --filo-forte:#3E3828;
    --grave:#FF8178; --grave-velo:#36201F; --su-grave:#2A0C0A;
    /* Era #7C62FF: su bianco 4,16 e su nero 4,43 — sotto soglia in tutti e
       due i versi, quindi nessun testo ci stava bene sopra. Il pieno si
       scurisce (bianco 5,08) e per le SCRITTE viola si schiarisce (5,07
       sulla carta scura): sono due mestieri diversi e due colori diversi. */
    --viola:#D4AF37; --viola-chiaro:#2A2214;
    --viola-testo:#E7C45C; --accento:#E7C45C;
    --colore-su-carta:#8A6315;   /* i pulsanti chiari restano su fondo bianco */
    --testata-a:#241F14; --testata-b:#0B0B0D;
    --testata-luce:rgba(212,175,55,.30);
    --su-testata:#FFFFFF; --su-testata-tenue:rgba(255,255,255,.82);
    --filo-testata:#D4AF37;
    --sopra-colore:#0B0B0D;
    --ombra:0 12px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --sfondo:#0B0B0D; --carta:#17150F; --inchiostro:#F2EEE6;
  --tenue:#A39D90; --tenue2:#8D8779;
  --filo:#2A261C; --filo-forte:#3E3828;
  --grave:#FF8178; --grave-velo:#36201F; --su-grave:#2A0C0A;
  --viola:#D4AF37; --viola-chiaro:#2A2214;
  --viola-testo:#E7C45C; --accento:#E7C45C;
  --colore-su-carta:#8A6315;
  --sopra-colore:#0B0B0D;
  --testata-a:#241F14; --testata-b:#0B0B0D;
  --testata-luce:rgba(212,175,55,.30);
  --su-testata:#FFFFFF; --su-testata-tenue:rgba(255,255,255,.82);
  --filo-testata:#D4AF37;
  --su-viola-chiaro:#F0D98A;
  --ombra:0 12px 30px -18px rgba(0,0,0,.8);
}
:root[data-theme="dark"] .acqua{background:var(--carta);border-color:var(--filo)}
:root[data-theme="dark"] .acqua b{color:var(--inchiostro)}
:root[data-theme="dark"] .bicchieri i{background:var(--viola-chiaro)}



*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--sfondo);color:var(--inchiostro);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.025em}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--viola);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.tabellare{font-variant-numeric:tabular-nums}
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- telaio ---------------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
@media (max-width:860px){.app{grid-template-columns:1fr}}

.fianco{background:var(--carta);padding:22px 16px;display:flex;flex-direction:column;gap:26px;border-right:1px solid var(--filo)}
.marchio{display:flex;align-items:baseline;gap:9px;padding:6px 10px 0}
.marchio b{font-size:24px;font-weight:800;letter-spacing:-.025em}
.marchio span{font-size:11.5px;color:var(--tenue2);font-weight:600}
.menu{display:flex;flex-direction:column;gap:4px}
.menu a{
  display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;
  text-decoration:none;color:var(--tenue);font-size:15px;font-weight:700;min-height:48px;
  transition:background .15s ease, color .15s ease;
}
.menu a:hover{background:var(--viola-chiaro);color:var(--inchiostro)}
.menu a.vivo{background:var(--viola);color:var(--sopra-colore, #fff);box-shadow:0 8px 18px -10px var(--ombra-viola, rgba(212,175,55,.75))}
.menu .pastiglia{margin-left:auto;background:var(--viola-chiaro);color:var(--viola-testo);font-size:12px;padding:2px 9px;border-radius:99px;font-weight:800}
.menu a.vivo .pastiglia{background:rgba(255,255,255,.25);color:#fff}
.fianco .fondo{margin-top:auto;border-top:1px solid var(--filo);padding:16px 12px 4px;font-size:13.5px;color:var(--tenue)}
.fianco .fondo b{display:block;color:var(--inchiostro);font-size:15px;font-weight:800}

.foglio{padding:30px 32px 70px;min-width:0}
@media (max-width:620px){.foglio{padding:22px 18px 60px}}

.testata{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.testata h1{font-size:clamp(26px,3.2vw,34px);line-height:1.1}
.testata .sotto{color:var(--tenue);font-size:14.5px;margin-top:5px;font-weight:500}
.azioni{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

.bott{
  border:2px solid var(--filo-forte);background:var(--carta);border-radius:14px;
  padding:12px 18px;font-size:14.5px;font-weight:800;min-height:48px;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.bott:hover{border-color:var(--viola-testo);color:var(--viola-testo)}
.bott:active{transform:scale(.98)}
.bott.pieno{background:var(--viola);border-color:var(--viola-testo);color:var(--sopra-colore, #fff);box-shadow:0 12px 24px -12px var(--ombra-viola, rgba(212,175,55,.75))}
.bott.pieno:hover{background:var(--viola-scuro);border-color:var(--viola-scuro);color:#fff}
.bott:disabled{opacity:.55;cursor:default;box-shadow:none}
.indietro{background:none;border:0;color:var(--tenue);font-size:14px;font-weight:700;padding:0 0 12px;display:inline-flex;gap:6px}
.indietro:hover{color:var(--viola-testo)}

/* ---------------- tessere di riepilogo ---------------- */
.misure{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.misura{background:var(--carta);border-radius:var(--r);padding:18px 20px;box-shadow:var(--ombra);
  display:flex;flex-direction:column;gap:6px;min-width:0}
.misura .et{min-height:2.6em}
.misura .et{font-size:13px;color:var(--tenue);font-weight:600}
.misura .val{font-size:32px;font-weight:800;letter-spacing:-.025em;margin-top:4px;line-height:1.1}
.misura .val small{font-size:15px;color:var(--tenue);font-weight:700}
.barretta{height:9px;background:var(--viola-chiaro);border-radius:99px;margin-top:12px;overflow:hidden}
.barretta i{display:block;height:100%;background:var(--viola);border-radius:99px;transition:width .4s cubic-bezier(.2,.7,.2,1)}

.riquadro{background:var(--carta);border-radius:var(--r);box-shadow:var(--ombra);overflow:hidden}
.lavoro{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
@media (max-width:1180px){.lavoro{grid-template-columns:1fr}}

/* ---------------- persone ---------------- */
.griglia-persone{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.persona{
  display:flex;gap:15px;align-items:flex-start;background:var(--carta);border:0;
  border-radius:var(--r);padding:20px;text-align:left;width:100%;box-shadow:var(--ombra);
  transition:transform .15s ease, box-shadow .15s ease;
}
.persona:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta)}
.faccia{width:52px;height:52px;border-radius:18px;flex:0 0 auto;display:grid;place-items:center;background:var(--viola-chiaro);color:var(--viola-testo);font-weight:800;font-size:17px}
.persona b{font-size:18px;font-weight:800;display:block;letter-spacing:-.02em}
.persona .obb{color:var(--tenue);font-size:13.5px;margin-top:2px;font-weight:500}
.persona .stato-riga{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:12.5px;color:var(--tenue);font-weight:600}
.pallino{width:8px;height:8px;border-radius:99px;background:var(--buono);flex:0 0 auto}
.pallino.spento{background:var(--tenue2)}
.persona .av{flex:1;height:8px;background:var(--viola-chiaro);border-radius:99px;overflow:hidden;min-width:50px}
.persona .av i{display:block;height:100%;background:var(--viola);border-radius:99px}

/* ---------------- giorni ---------------- */
.giorni{display:flex;gap:8px;padding:16px 18px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--filo)}
.giorno{border:2px solid var(--filo-forte);background:transparent;border-radius:14px;padding:9px 16px;font-size:14px;font-weight:700;min-height:44px;transition:all .15s ease}
.giorno b{font-weight:800}
.giorno small{color:var(--tenue);margin-left:7px;font-weight:600;font-size:11.5px}
.giorno:hover{border-color:var(--viola-testo)}
.giorno[aria-selected="true"]{background:var(--viola);border-color:var(--viola-testo);color:var(--sopra-colore, #fff)}
.giorno[aria-selected="true"] small{color:rgba(255,255,255,.75)}
.settimana{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--tenue);font-weight:600}
.settimana select{font:inherit;font-weight:700;border:2px solid var(--filo-forte);border-radius:12px;padding:9px 12px;background:var(--carta);min-height:44px}

/* ---------------- tabella esercizi ---------------- */
table.esercizi{width:100%;border-collapse:collapse}
table.esercizi th{text-align:left;font-size:12px;color:var(--tenue);font-weight:800;padding:14px;border-bottom:1px solid var(--filo);white-space:nowrap}
table.esercizi td{padding:14px;border-bottom:1px solid var(--filo);vertical-align:middle}
table.esercizi tr:last-child td{border-bottom:0}
table.esercizi tr.sposta:hover{background:#FAF9FE}
.presa{color:var(--tenue2);cursor:grab;user-select:none;font-size:15px}
.nomeese{display:flex;align-items:center;gap:13px;min-width:230px}
.posa{
  width:54px;height:54px;border-radius:16px;flex:0 0 auto;background:var(--viola-chiaro);border:0;
  display:grid;place-items:center;font-size:11px;color:var(--tenue2);text-align:center;line-height:1.15;padding:4px;font-weight:700;
}
.nomeese b{font-weight:800;display:block;font-size:15px}
.nomeese small{color:var(--tenue);font-size:12.5px;font-weight:600}
.serie{display:flex;gap:5px}
.serie input,.carico input{
  font:inherit;font-weight:700;font-variant-numeric:tabular-nums;border:2px solid var(--filo);
  border-radius:12px;padding:10px 8px;background:var(--carta);text-align:center;min-height:44px;transition:border-color .15s ease;
}
.serie input{width:54px}
.serie input:hover,.carico input:hover{border-color:var(--filo-forte)}
.serie input:focus,.carico input:focus{border-color:var(--viola-testo);outline:none}
.carico{display:flex;align-items:center;gap:9px;white-space:nowrap}
.carico input{width:68px;text-align:right;padding-right:10px}
.dischi{display:flex;gap:3px;align-items:center}
.dischi i{width:11px;border-radius:3px;display:block;border:1px solid rgba(27,26,46,.22)}
.legendadischi{display:flex;gap:16px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--filo);font-size:12.5px;color:var(--tenue);align-items:center;font-weight:600}
.legendadischi span{display:flex;align-items:center;gap:6px}
.legendadischi i{width:9px;height:16px;border-radius:3px;border:1px solid rgba(27,26,46,.22)}
.tecnica{font-size:12.5px;background:var(--viola-chiaro);border-radius:99px;padding:5px 12px;color:var(--viola-testo);white-space:nowrap;font-weight:800}
.tecnica.evid{background:#FDF2DD;color:#8A5D05}
.notaese{font-size:13px;color:var(--tenue);max-width:26ch;font-weight:500}
.piede-tab{padding:16px 18px}

/* ---------------- libreria ---------------- */
.libreria{position:sticky;top:24px}
.libreria h3{font-size:18px;padding:18px 18px 0}
.libreria p.spiega{font-size:13.5px;color:var(--tenue);padding:5px 18px 14px;margin:0;font-weight:500}
.cerca{padding:0 18px 14px}
.cerca input{width:100%;font:inherit;font-weight:600;border:2px solid var(--filo);border-radius:14px;padding:12px 15px;min-height:48px;background:var(--sfondo)}
.cerca input:focus{border-color:var(--viola-testo);outline:none;background:var(--carta)}
.gruppi{display:flex;gap:7px;padding:0 18px 16px;flex-wrap:wrap}
.gruppo{min-height:44px;border:0;background:var(--sfondo);border-radius:99px;padding:8px 14px;font-size:13px;color:var(--tenue);font-weight:700}
.gruppo:hover{background:var(--viola-chiaro);color:var(--viola-testo)}
.gruppo[aria-pressed="true"]{background:var(--viola);color:var(--sopra-colore, #fff)}
.elenco{max-height:440px;overflow:auto;border-top:1px solid var(--filo)}
.voce{display:flex;align-items:center;gap:13px;padding:12px 18px;border-bottom:1px solid var(--filo)}
.voce:last-child{border-bottom:0}
.voce .posa{width:46px;height:46px;border-radius:14px}
.voce b{font-weight:800;font-size:14.5px;display:block}
.voce small{color:var(--tenue);font-size:12.5px;font-weight:600}
.piu{
  border:0;background:var(--viola-chiaro);color:var(--viola-testo);border-radius:13px;
  display:grid;place-items:center;flex:0 0 auto;font-weight:700;line-height:1;
}
.voce .piu{margin-left:auto;border:0;background:var(--viola-chiaro);color:var(--viola-testo);border-radius:13px;width:44px;height:44px;font-size:22px;line-height:1;display:grid;place-items:center;flex:0 0 auto;font-weight:700}
.voce .piu:hover{background:var(--viola);color:var(--sopra-colore, #fff)}

/* ---------------- esercizi ---------------- */
.griglia-esercizi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.carta-ese{background:var(--carta);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombra)}
.carta-ese .copertina{height:148px;background:var(--viola-chiaro);display:grid;place-items:center;color:var(--tenue2);font-size:12.5px;text-align:center;padding:12px;font-weight:700}
.carta-ese .copertina img{width:100%;height:100%;object-fit:cover}
.carta-ese .sotto{padding:16px 18px 18px}
.carta-ese b{font-size:16.5px;display:block;font-weight:800;letter-spacing:-.02em}
.carta-ese small{color:var(--tenue);font-size:12.5px;font-weight:600}
.carta-ese p{font-size:13.5px;color:var(--tenue);margin:10px 0 0;line-height:1.45;font-weight:500}

/* ---------------- vuoti, avvisi, finestre ---------------- */
.vuoto{text-align:center;padding:52px 24px;color:var(--tenue)}
.vuoto b{display:block;font-size:19px;color:var(--inchiostro);margin-bottom:6px;font-weight:800}
.vuoto p{margin:0 0 18px;font-size:14.5px;font-weight:500}

.salvato{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(18px);
  background:var(--inchiostro);color:#fff;padding:14px 24px;border-radius:99px;font-size:15px;font-weight:700;
  box-shadow:0 20px 40px -18px rgba(27,26,46,.8);opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);z-index:50;
}
.salvato.vedi{opacity:1;transform:translateX(-50%) translateY(0)}

/* IL NASTRO DEL PAGAMENTO
   Non e' l'avviso che scompare da solo: questo resta, perche' dice una cosa
   che la persona deve poter rileggere. Sta in alto, dove non copre la barra.
   I colori dicono la verita': l'attesa e' neutra — sta solo aspettando, non
   c'e' niente di rotto — il fatto prende il verde del buono, il lento
   l'arancio dell'attenzione. Mai il rosso: nessuno ha perso dei soldi. */
.nastro-pagamento{
  position:fixed;left:50%;top:14px;transform:translateX(-50%);
  width:calc(100% - 28px);max-width:460px;z-index:60;
  display:grid;grid-template-columns:1fr auto;align-items:start;gap:4px 12px;
  padding:14px 16px;border-radius:18px;
  background:var(--carta);border:1.5px solid var(--filo-forte);
  box-shadow:0 22px 44px -22px rgba(11,11,13,.55);
}
.nastro-pagamento b{grid-column:1;font-size:15.5px;font-weight:800;color:var(--inchiostro)}
.nastro-pagamento span{grid-column:1;font-size:13.5px;font-weight:500;line-height:1.45;color:var(--tenue)}
.nastro-chiudi{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  width:34px;height:34px;border:0;border-radius:11px;background:transparent;
  font-size:21px;line-height:1;color:var(--tenue);cursor:pointer;
}
.nastro-chiudi:hover{background:var(--filo)}
.nastro-pagamento[data-stato="attesa"] b::before,
.nastro-pagamento[data-stato="lento"] b::before{
  content:'';display:inline-block;width:9px;height:9px;margin-right:8px;
  border-radius:50%;background:var(--accento);
  /* un battito, non una rotellina che gira: dice «sto aspettando» senza far
     credere che ci sia qualcosa da caricare */
  animation:nastro-battito 1.4s ease-in-out infinite;
}
.nastro-pagamento[data-stato="fatto"]{border-color:var(--buono)}
.nastro-pagamento[data-stato="fatto"] b{color:var(--buono)}
.nastro-pagamento[data-stato="lento"]{border-color:var(--attenzione)}
@keyframes nastro-battito{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .nastro-pagamento[data-stato] b::before{animation:none;opacity:.9}
}

.velo{position:fixed;inset:0;background:rgba(27,26,46,.4);display:grid;place-items:center;padding:20px;z-index:40;backdrop-filter:blur(3px)}
.velo[hidden]{display:none}
.finestra{background:var(--carta);border-radius:26px;max-width:540px;width:100%;max-height:88vh;overflow:auto;padding:28px;box-shadow:0 40px 80px -30px rgba(27,26,46,.5)}
.finestra h2{font-size:24px}
.finestra p.sotto{color:var(--tenue);font-size:14.5px;margin:7px 0 20px;font-weight:500}
.campo{display:block;margin-bottom:15px}
.campo span{display:block;font-size:13px;color:var(--tenue);margin-bottom:7px;font-weight:700}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-weight:600;border:2px solid var(--filo);border-radius:14px;padding:13px 15px;background:var(--sfondo);min-height:50px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--viola-testo);outline:none;background:var(--carta)}
.campo textarea{min-height:88px;resize:vertical}
.coppia{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.in-fondo{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}

.carica-foto{border:2.5px dashed var(--filo-forte);border-radius:18px;padding:24px;text-align:center;color:var(--tenue);font-size:14px;font-weight:700;cursor:pointer;display:block;background:var(--sfondo)}
.carica-foto:hover{border-color:var(--viola-testo);color:var(--viola-testo);background:var(--viola-chiaro)}
.carica-foto img{max-height:160px;border-radius:14px;display:block;margin:0 auto 10px}
.posa.conFoto{background:none;padding:0;overflow:hidden}
.posa img{width:100%;height:100%;object-fit:cover;display:block}

/* ================= lato telefono ================= */
.tel-pagina{min-height:100vh;display:grid;place-items:center;padding:30px 16px;background:var(--sfondo)}
.telefono{
  width:400px;max-width:100%;height:830px;background:var(--sfondo);border-radius:42px;
  border:11px solid #211F3A;box-shadow:0 40px 80px -36px rgba(27,26,46,.7);
  overflow:hidden;display:flex;flex-direction:column;
}
@media (max-width:520px){
  .tel-pagina{padding:0}
  /* Su un telefono vero la cornice sparisce e l'app prende tutto lo schermo.
     Le tre altezze servono tutte e tre: 100vh su iPhone conta anche la striscia
     coperta dalla barra di Safari, e la barra in fondo finisce tagliata fuori.
     Chi capisce l'ultima riga usa quella; gli altri si fermano a quella prima. */
  /* Questa altezza serve al telefono disegnato del lato cliente. Applicata anche
     allo studio bloccava il body a uno schermo: la dashboard scorreva dentro se
     stessa e sotto il contenuto restavano centinaia di pixel vuoti. */
  html{height:100%}
  body.lato-telefono, body:not(.lato-studio){height:100%}
  html, body{overflow-x:hidden;overscroll-behavior:none;touch-action:manipulation}
  body.lato-studio{height:auto;min-height:100%}
  .tel-pagina{min-height:100vh;min-height:-webkit-fill-available;min-height:100dvh;padding:0}
  .telefono{
    border:0;border-radius:0;width:100%;box-shadow:none;
    height:100vh;
    height:-webkit-fill-available;
    height:100dvh;
  }
}
/* La finta barra di stato serviva quando il telefono era disegnato dentro una pagina
   del computer. Su un telefono vero è un secondo orologio sotto quello vero, e ruba i
   32 pixel più preziosi che ci sono. Resta solo nella cornice sul computer. */
.stato{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:11.5px;color:var(--tenue);flex:0 0 auto;font-weight:700}
@media (max-width:520px){
  .stato{display:none}
  .maniglia{display:none}
  .corpo-scena{padding-top:10px}
}
.schermo{flex:1;overflow:auto;padding:0 18px 16px}
.schermo::-webkit-scrollbar{width:0}
.cima{display:flex;align-items:center;justify-content:space-between;padding:8px 0 16px}
.cima .data{font-size:13px;color:var(--tenue);font-weight:600}
.cima h2{font-size:25px;letter-spacing:-.02em}
.tondo{width:44px;height:44px;border-radius:15px;background:var(--carta);border:0;display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--viola-testo);box-shadow:var(--ombra)}
/* Sotto la barra si lascia lo spazio della striscia di iPhone: senza, le icone
   finiscono sotto il bordo dello schermo e non si riescono a premere. */
.barra-giu{flex:0 0 auto;border-top:1px solid var(--filo);display:grid;grid-template-columns:repeat(4,1fr);
  padding:9px 8px calc(14px + env(safe-area-inset-bottom, 0px));background:var(--carta)}
.barra-giu button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--tenue2);padding:6px 0;font-weight:700;min-height:52px}
.barra-giu button.vivo{color:var(--viola-testo)}
.barra-giu svg{width:23px;height:23px;stroke-width:2}

.anello{display:flex;align-items:center;gap:22px;padding:2px 0 16px}
.anello svg{flex:0 0 auto}
.anello .cuore{font-size:38px;line-height:1;letter-spacing:-.025em;font-weight:800}
.anello .cuore small{font-size:13.5px;color:var(--tenue);display:block;margin-top:5px;letter-spacing:0;font-weight:600}
.conto{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px;color:var(--tenue);
  margin-top:14px;font-weight:600;padding-top:14px;border-top:1px solid var(--filo)}
.conto b{display:block;color:var(--inchiostro);font-size:18px;font-weight:800;margin-top:2px;letter-spacing:-.02em}
.macro{display:grid;gap:13px;padding:2px 0 18px}
.macro .riga{display:grid;grid-template-columns:1fr auto;gap:5px;font-size:13px;font-weight:600}
.macro .riga span{color:var(--tenue)}
.macro .riga b{font-weight:800;color:var(--inchiostro);font-variant-numeric:tabular-nums}
.macro .pista{grid-column:1/-1;height:12px;border-radius:99px;background:var(--viola-chiaro);overflow:hidden}
.macro .pista i{display:block;height:100%;border-radius:99px;transition:width .4s cubic-bezier(.2,.7,.2,1)}

/* Le carte dei pasti erano quattro rettangoli uguali con un numero in un angolo.
   Adesso ognuna dice a che ora si mangia, quanto pesa e com'e' fatto quel pasto. */
.pasto{
  background:var(--carta);border-radius:22px;padding:18px 18px 16px;margin-bottom:14px;
  box-shadow:var(--ombra);border-left:4px solid var(--filo-forte);
}
.pasto.pieno{border-left-color:var(--cibo, #17A398)}
/* il nome del pasto e quando si mangia, a sinistra; le calorie grandi, a destra */
.pasto .capo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pasto .capo-che small{display:block;font-size:12px;color:var(--tenue2);font-weight:600;margin-top:1px}
.pasto .capo b{font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.pasto .capo .kcal{
  font-size:19px;color:var(--inchiostro);font-variant-numeric:tabular-nums;font-weight:800;
  letter-spacing:-.025em;white-space:nowrap;
}
.pasto .capo .kcal i{font-style:normal;font-size:11.5px;color:var(--tenue);font-weight:700;margin-left:3px}

/* i tre macro del singolo pasto: tre pastiglie sotto il titolo */
.macro-pasto{display:flex;gap:7px;margin:12px 0 2px;flex-wrap:wrap}
.macro-pasto span{
  display:inline-flex;align-items:center;gap:5px;background:var(--sfondo);
  border-radius:99px;padding:5px 11px 5px 8px;font-size:13px;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.macro-pasto i{width:8px;height:8px;border-radius:99px;flex:0 0 auto}
.macro-pasto small{font-size:11px;color:var(--tenue);font-weight:700;margin-left:1px}
.alimento{display:flex;align-items:center;gap:10px;padding:11px 0 0;font-size:14px;font-weight:600}
.alimento .q{color:var(--tenue);font-size:12.5px;font-weight:500}
.alimento .k{margin-left:auto;color:var(--tenue);font-size:13px;font-variant-numeric:tabular-nums;font-weight:700}
.aggiungi{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:13px;border:0;background:var(--viola-chiaro);border-radius:14px;padding:12px;font-size:14px;color:var(--viola-testo);width:100%;font-weight:800;min-height:48px}
.aggiungi:hover{background:var(--viola);color:var(--sopra-colore, #fff)}

.oggi-card{background:var(--viola);color:var(--sopra-colore, #fff);border-radius:24px;padding:20px;box-shadow:0 18px 36px -18px var(--ombra-viola, rgba(212,175,55,.75))}
/* Questi tre erano bianchi sbiaditi: sopra il viola reggevano, sopra l'oro di
   uno studio stavano a 1,7 su 4,5. Il velo si fa ora sul colore del testo di
   questa carta, che e' gia' calcolato per leggersi sul suo fondo. */
.oggi-card .et{font-size:12.5px;color:color-mix(in srgb, var(--sopra-colore, #fff) 78%, transparent);font-weight:700}
.oggi-card h3{font-size:22px;margin-top:4px;letter-spacing:-.02em}
.oggi-card .dettagli{display:flex;gap:14px;font-size:12.5px;color:color-mix(in srgb, var(--sopra-colore, #fff) 84%, transparent);margin-top:10px;flex-wrap:wrap;font-weight:600}
.oggi-card .bott{width:100%;margin-top:16px;text-align:center;display:block;background:#fff;color:var(--colore-su-carta, var(--viola-testo));border-color:#fff;box-shadow:none}
.oggi-card .bott:hover{background:#F3F1FB;color:var(--viola-scuro);border-color:#F3F1FB}

.passo{display:flex;align-items:center;gap:13px;padding:13px 16px;font-size:14px;background:var(--carta);border-radius:18px;margin-bottom:9px;box-shadow:var(--ombra);cursor:pointer;transition:transform .12s ease}
.passo:hover{transform:translateX(3px)}
.passo .posa{width:48px;height:48px;border-radius:15px}
.passo b{font-weight:800;display:block;font-size:14.5px}
.passo small{color:var(--tenue);font-size:12.5px;font-weight:600}
.passo .spunta{margin-left:auto;width:44px;height:44px;border-radius:12px;border:2px solid var(--filo-forte);display:grid;place-items:center;background:none;color:var(--tenue2);flex:0 0 auto;font-size:12px;font-weight:800}
.passo .spunta[aria-pressed="true"]{background:var(--buono);border-color:var(--buono);color:#fff}
.sezione-et{font-size:12.5px;color:var(--tenue);margin:20px 0 8px;font-weight:800}

.posa-grande{height:250px;border-radius:24px;background:var(--viola-chiaro);display:grid;place-items:center;text-align:center;color:var(--tenue2);font-size:13px;padding:18px;line-height:1.45;font-weight:700}
.serie-elenco{margin-top:16px;display:grid;gap:9px}
.serie-riga{display:grid;grid-template-columns:30px 1fr 1fr 44px;gap:10px;align-items:center;font-size:14px}
.serie-riga .n{color:var(--tenue);font-size:12.5px;font-weight:800}
.serie-riga .campo{border:0;background:var(--carta);border-radius:14px;padding:13px 12px;font-variant-numeric:tabular-nums;font-weight:800;box-shadow:var(--ombra);margin:0}
.serie-riga .campo span{color:var(--tenue);font-size:12px;font-weight:600}
.serie-riga.fatta .campo{background:#E6F7F5;box-shadow:none;color:#0E6E66}
.serie-riga .spunta{width:44px;height:44px;border-radius:15px;border:2px solid var(--filo-forte);background:var(--carta);display:grid;place-items:center;color:var(--tenue2);font-size:16px;font-weight:800}
.serie-riga .spunta[aria-pressed="true"]{background:var(--buono);border-color:var(--buono);color:#fff}
.recupero{margin-top:16px;background:var(--carta);border-radius:20px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--ombra)}
.recupero .t{font-size:28px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.02em}
.recupero small{color:var(--tenue);font-size:12.5px;display:block;font-weight:700}

.campo-cerca{display:flex;gap:9px;margin:2px 0 14px}
.campo-cerca input{flex:1;font:inherit;font-weight:600;border:2px solid var(--filo);border-radius:14px;padding:13px 15px;min-height:50px}
.ris{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:14px;width:100%;background:var(--carta);border:0;border-radius:18px;text-align:left;margin-bottom:9px;box-shadow:var(--ombra);transition:transform .12s ease}
.ris:hover{transform:translateX(3px)}
.ris b{font-weight:800;display:block}
.ris small{color:var(--tenue);font-size:12.5px;font-weight:600}
.ris .k{margin-left:auto;font-size:13px;color:var(--tenue);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:800}
.avviso{background:var(--viola-chiaro);border-radius:16px;padding:13px 16px;font-size:13.5px;color:var(--su-viola-chiaro, #8A6315);margin-bottom:14px;font-weight:600;line-height:1.5}

/* la carta bianca su cui poggia quasi tutto il lato telefono.
   Era usata in otto punti del codice e non era mai stata definita: i riquadri
   delle misure, della costanza e dello storico restavano senza sfondo. */
.bolla{background:var(--carta);border-radius:20px;padding:18px;box-shadow:var(--ombra)}

.grafico{background:var(--carta);border-radius:22px;padding:18px;margin-top:4px;box-shadow:var(--ombra)}
.grafico h3{font-size:17px}
.grafico .delta{font-size:13px;color:var(--tenue);margin-top:3px;font-weight:600}
.pila{display:grid;gap:11px;margin-top:4px}
.pila .r{display:grid;grid-template-columns:78px 1fr auto;gap:11px;align-items:center;font-size:13px;font-weight:600}
.pila .r span{color:var(--tenue)}
.pila .r .p{height:12px;background:var(--viola-chiaro);border-radius:99px;overflow:hidden}
.pila .r .p i{display:block;height:100%;background:var(--viola);border-radius:99px}
.pila .r b{font-weight:800;font-variant-numeric:tabular-nums}

.contatore{display:flex;align-items:center;gap:0;background:var(--sfondo);border-radius:16px;overflow:hidden;width:fit-content}
.contatore button{width:52px;height:52px;background:none;border:0;font-size:22px;line-height:1;font-weight:800;color:var(--viola-testo)}
.contatore button:hover{background:var(--viola-chiaro)}
.contatore span{min-width:110px;text-align:center;font-variant-numeric:tabular-nums;font-size:16px;font-weight:800}
.anteprima-macro{display:flex;gap:18px;margin-top:16px;font-size:12.5px;color:var(--tenue);flex-wrap:wrap;font-weight:600}
.anteprima-macro b{display:block;color:var(--inchiostro);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}

.cambia-faccia{position:fixed;top:16px;right:18px;font-size:13.5px;z-index:30;text-decoration:none;display:inline-flex;align-items:center;background:var(--carta);box-shadow:var(--ombra)}
@media (max-width:860px){.cambia-faccia{display:none}}


/* ============ aggiunte: linguette, chat, compiti, record, acqua ============ */

.barra-giu{grid-template-columns:repeat(6,1fr)}
  .barra-giu button{font-size:11px;gap:3px}
  .barra-giu svg{width:21px;height:21px}
/* 10 px erano le sei parole piu' lette dell'app, e le piu' piccole. */
.barra-giu button{font-size:11.5px}

.linguette{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.linguetta{
  border:0;background:var(--carta);border-radius:14px;padding:12px 20px;font-size:14.5px;
  font-weight:800;color:var(--tenue);min-height:48px;box-shadow:var(--ombra);
  display:inline-flex;align-items:center;gap:8px;
}
.linguetta:hover{color:var(--viola-testo)}
.linguetta[aria-selected="true"]{background:var(--viola);color:var(--sopra-colore, #fff)}

.bollino{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--viola);color:var(--sopra-colore, #fff);font-size:11.5px;font-weight:800;vertical-align:middle;
}
.linguetta[aria-selected="true"] .bollino{background:rgba(255,255,255,.3)}

/* chat */
.chat{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto;padding:4px 2px 10px}
.chat-tel{max-height:none;padding-bottom:4px}
.bolla-msg{
  max-width:78%;padding:12px 16px;border-radius:20px;font-size:14px;font-weight:600;line-height:1.45;
  position:relative;
}
.bolla-msg .quando{display:block;font-size:11px;font-weight:600;opacity:.65;margin-top:5px}
.bolla-msg.mia{align-self:flex-end;background:var(--viola);color:var(--sopra-colore, #fff);border-bottom-right-radius:7px}
.bolla-msg.sua{align-self:flex-start;background:var(--carta);box-shadow:var(--ombra);border-bottom-left-radius:7px}
.chat .bolla-msg.sua{background:var(--sfondo);box-shadow:none}
.scrivi{display:flex;gap:10px;margin-top:14px}
.scrivi input{
  flex:1;font:inherit;font-weight:600;border:2px solid var(--filo);border-radius:14px;
  padding:13px 16px;min-height:50px;background:var(--sfondo);
}
.scrivi input:focus{border-color:var(--viola-testo);outline:none;background:var(--carta)}

/* compiti, lato allenatore */
.compiti{display:grid;gap:10px}
.compito{display:flex;align-items:center;gap:13px;background:var(--sfondo);border-radius:16px;padding:14px 16px}
.compito b{font-size:15px;font-weight:800;display:block}
.compito small{color:var(--tenue);font-size:12.5px;font-weight:600}
.segno{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--filo);color:var(--tenue2);font-weight:800;
}
.segno.si{background:var(--buono);color:#fff}

/* compiti, lato telefono */
.compito-tel{
  display:flex;align-items:center;gap:13px;background:var(--carta);border-radius:18px;
  padding:13px 16px;margin-bottom:9px;box-shadow:var(--ombra);
}
.compito-tel b{font-size:14.5px;font-weight:800;display:block}
.compito-tel small{color:var(--tenue);font-size:12.5px;font-weight:600}
.compito-tel .spunta{
  width:44px;height:44px;border-radius:14px;border:2px solid var(--filo-forte);background:none;
  display:grid;place-items:center;color:var(--tenue2);font-size:15px;font-weight:800;flex:0 0 auto;
}
.pista-mini{display:block;height:7px;background:var(--viola-chiaro);border-radius:99px;overflow:hidden;margin:7px 0 5px}
.pista-mini i{display:block;height:100%;background:var(--viola);border-radius:99px}

/* record e storico */
.record{
  margin-top:12px;background:#E6F7F5;color:#0E6E66;border-radius:16px;padding:12px 16px;
  font-size:13.5px;font-weight:700;
}
.record b{font-weight:800}
.storico{background:var(--carta);border-radius:18px;padding:6px 16px;box-shadow:var(--ombra)}
.riga-st{
  display:flex;justify-content:space-between;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--filo);font-size:13.5px;color:var(--tenue);font-weight:600;
}
.riga-st:last-child{border-bottom:0}
.riga-st b{color:var(--inchiostro);font-weight:800;font-variant-numeric:tabular-nums}





/* le cose che segni sempre, pronte sotto il pasto */
.soliti{display:flex;gap:8px;margin:12px 0 2px;flex-wrap:wrap}
.solito{
  flex:1 1 auto;min-width:0;background:var(--sfondo);border:1px dashed var(--filo-forte);
  border-radius:14px;padding:9px 12px;text-align:left;font:inherit;color:inherit;
}
.solito:active{background:var(--viola-chiaro);border-color:var(--viola-testo)}
.solito b{display:block;font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.solito small{display:block;font-size:11.5px;color:var(--tenue);font-weight:600;margin-top:1px}







/* ============ il profilo ============ */
.pr-capo{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.pr-faccia{
  width:58px;height:58px;border-radius:20px;background:var(--viola);color:var(--sopra-colore, #fff);
  display:grid;place-items:center;font-size:21px;font-weight:800;flex:0 0 auto;
}
.pr-numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pr-numeri div{background:var(--sfondo);border-radius:14px;padding:12px 10px;text-align:center}
.pr-numeri b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.pr-numeri span{display:block;font-size:11.5px;color:var(--tenue);font-weight:700;margin-top:3px;line-height:1.3}
.pr-riga{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;
  padding:13px 16px;background:var(--sfondo);border-radius:14px;font-size:14px;font-weight:600}
.pr-riga b{font-weight:800}
.pr-tema{display:grid;gap:8px}
.pr-scelta{
  text-align:left;background:var(--sfondo);border:2px solid transparent;border-radius:14px;
  padding:13px 16px;font:inherit;font-size:14.5px;font-weight:700;color:inherit;
}
.pr-scelta.scelto{border-color:var(--viola-testo);background:var(--viola-chiaro);color:var(--viola-testo)}

/* ============ la home ============ */
.sotto-scena{margin:8px 0 0;font-size:14px;color:var(--su-testata-tenue, rgba(255,255,255,.94));font-weight:600}
.settimana-pallini{display:flex;gap:7px;margin-top:18px}
.sp{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  /* I giorni della settimana: bianco pieno. Lo sbiadito diceva «questo non
     l hai fatto», ma quella cosa la dice gia la barretta sotto — e detta
     col grigio su viola voleva dire 3,7 di contrasto. */
  font-size:11px;font-weight:800;color:var(--su-testata, #fff);
}
.sp i{width:100%;height:5px;border-radius:99px;background:color-mix(in srgb, var(--su-testata, #fff) 22%, transparent)}
.sp.previsto i{background:color-mix(in srgb, var(--su-testata, #fff) 45%, transparent)}
.sp.saltato i{background:color-mix(in srgb, var(--su-testata, #fff) 22%, transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--su-testata, #fff) 48%, transparent)}
.sp.fatto i{background:var(--su-testata, #fff)}
.sp.fatto{color:var(--su-testata, #fff)}
.sp.oggi i{background:#FFD774;height:7px;margin-top:-1px}
/* il giorno di oggi: era #FFD774, 3,7 sul viola del tema scuro. La
   barretta resta di quel giallo — e' un segno, non una parola — la
   scritta si schiarisce fino a leggersi. */
/* il giorno di oggi: l oro sulla testata chiara sta a 2, il bronzo si legge */
.sp.oggi{color:var(--accento, #FFF1CF)}

.oggi-ese{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 0}
.oggi-ese span{
  background:rgba(255,255,255,.16);border-radius:99px;padding:6px 12px;
  font-size:12.5px;font-weight:700;white-space:nowrap;
}
.oggi-ese .altri{background:color-mix(in srgb, var(--sopra-colore, #fff) 10%, transparent);color:color-mix(in srgb, var(--sopra-colore, #fff) 76%, transparent)}
.oggi-sale{
  margin-top:14px;background:rgba(255,255,255,.14);border-radius:14px;padding:11px 14px;
  font-size:13.5px;font-weight:600;line-height:1.45;
}
.oggi-sale b{font-weight:800}

.riposo-numero{margin-top:16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.riposo-numero b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.riposo-numero span{font-size:13px;color:rgba(255,255,255,.7);font-weight:600}
.riposo-dice{margin:16px 0 0;font-size:13.5px;color:rgba(255,255,255,.8);font-weight:500;line-height:1.5}

/* ============ la barra del telefono fa parte della testata ============
   Sopra restava una striscia bianca che tagliava la pagina in due. Adesso la
   testata passa sotto l'orologio e le tacche, che restano leggibili perché
   il colore lassù è sempre scuro e le scritte di sistema sono bianche. */
@media (max-width:520px){
  /* la scena si allunga sotto l'orologio e ci porta il suo colore;
     il corpo prende la stessa tinta, così non resta la striscia bianca */
  .scena{padding-top:calc(16px + env(safe-area-inset-top, 0px))}
  .telefono{padding-top:0;background:transparent}
  /* era questo il quadrato chiaro che compariva trascinando: la pagina che
     ospitava la cornice del telefono aveva il suo sfondo. Sul telefono vero
     non serve: si lascia vedere il colore della scheda. */
  .tel-pagina{background:transparent}
  /* dietro l'orologio del telefono: la stessa tinta della testata, una per
     tutte le schede. Erano cinque colori diversi, e trascinando la pagina
     compariva il verde o l'arancio di Stacco su uno studio nero e oro. */
  html[data-scheda], body[data-scheda]{background:var(--testata-a, var(--viola-scuro))}
  /* Sono le tinte che si vedono dietro la barra di sistema e trascinando la
     pagina. Scritte a mano, restavano il verde e l'arancio di Stacco su uno
     studio nero e oro: un lampo di un colore che il cliente non ha mai scelto,
     proprio nel punto che sembra «di sistema» e quindi vero. */
  html[data-marchio="scuro"][data-scheda], html[data-marchio="scuro"] body[data-scheda]{background:var(--sfondo)}
  /* in scuro vince il fondo scuro: il colore resta solo nella testata */
  :root[data-theme="dark"], :root[data-theme="dark"] body{background:#0B0B0D !important}
  .corpo-scena{background:var(--sfondo)}
}

/* ============ dentro un pasto ============
   Dalla card si entra e si vede tutto: quanto pesa sulla giornata, i macro
   e ogni singola cosa con i suoi valori. Prima la card era un vicolo cieco. */
.pasto .capo{width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left;padding:0}
.pasto .capo:active{opacity:.6}
.dentro-macro{display:grid;gap:14px;margin-top:18px}
.dm-riga{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center}
.dm-nome{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700}
.dm-nome i{width:9px;height:9px;border-radius:99px;flex:0 0 auto}
.dm-barra{height:9px;border-radius:99px;background:var(--filo);overflow:hidden}
.dm-barra i{display:block;height:100%;border-radius:99px}
.dm-riga b{font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums}
.dm-riga small{grid-column:2 / -1;font-size:11.5px;color:var(--tenue);font-weight:600;margin-top:-6px}
.dentro-voci{display:grid;gap:2px}
.dv-riga{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--filo)}
.dv-riga:last-child{border-bottom:0}
.dv-foto{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.dv-che{flex:1;min-width:0}
.dv-che b{display:block;font-size:14.5px;font-weight:800}
.dv-che small{display:block;font-size:12px;color:var(--tenue);font-weight:600;margin-top:2px}
.dv-k{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.dv-k small{display:block;font-size:11.5px;color:var(--tenue);font-weight:700;margin-top:-2px}




/* ============ lo studio da telefono verticale ============
   Il menu era una colonna alta quanto lo schermo: bisognava scorrere tutta la
   lista prima di vedere il contenuto. Qui diventa una striscia che scorre di lato
   e resta in cima, come le linguette di un'app vera. */
/* La lente serve sul telefono, dove non c'è un tasto «/» da premere; sul
   computer c'è già «Cerca» nel menu. Le misure stavano solo dentro la regola
   del telefono: sul computer l'icona cresceva fino a 215 px, una lente grande
   quanto una mano in mezzo al menu. Qui c'è la misura, e il telefono la
   riaccende. */
.cerca-su{display:none;width:44px;height:44px;flex:0 0 auto}
.cerca-su svg{width:19px;height:19px}

@media (max-width:620px){
  .app{display:block}
  /* «sticky» qui non teneva: basta un antenato con overflow nascosto — e la
     pagina ce l'ha, per non farsi trascinare di lato — perché smetta di
     attaccarsi, in silenzio. Inchiodata, invece, resta ferma sempre. */
  .fianco{
    position:fixed;top:0;left:0;right:0;width:100%;z-index:40;
    flex-direction:row;align-items:center;gap:8px;
    overflow-x:auto;padding:10px 12px;border-right:0;border-bottom:1px solid var(--filo);
    background:var(--carta);-webkit-overflow-scrolling:touch;
    padding-top:calc(10px + env(safe-area-inset-top));
  }
  /* lo spazio che la barra non occupa più nel flusso */
  .lato-studio .app{padding-top:calc(71px + env(safe-area-inset-top))}
  .fianco::-webkit-scrollbar{display:none}
  .fianco .marchio{padding:0 8px 0 2px;flex:0 0 auto}
  .fianco .marchio span{display:none}
  .menu{display:flex !important;flex-direction:row;gap:6px;flex:0 0 auto;align-items:center}
  .menu a{white-space:nowrap;padding:9px 14px;font-size:13.5px;border-radius:99px;margin:0}
  .menu a svg{display:none}
  .menu .pastiglia{margin-left:6px}
  /* del piede, nella striscia, resta solo l'uscita: un allenatore deve poter
     tornare a vedere l'app come la vede chi si allena, e senza quel pulsante
     da telefono restava chiuso dentro. */
  .fianco .fondo{display:flex;align-items:center;gap:8px;border:0;padding:0;margin:0 0 0 auto;flex:0 0 auto}
  .fianco .fondo > *{display:none !important}
  /* quello che vale solo davanti a una tastiera e a un monitor */
  .solo-grande{display:none !important}
  .cerca-su{
    display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;order:-1;
    border:1px solid var(--filo);border-radius:12px;background:var(--carta);color:var(--tenue);
  }
  .cerca-su svg{width:19px;height:19px}
  .fianco .fondo #esci-studio{
    display:block !important;white-space:nowrap;padding:9px 14px;font-size:13px;border-radius:99px;
    background:var(--sfondo);color:var(--tenue);min-height:44px;
  }
  .foglio{padding:16px 14px 40px}
  /* Una tabella con le intestazioni che non vanno a capo è larga 866 px: su uno
     schermo da 390 sfondava la pagina e trascinava di lato tutto il resto.
     Scorre lei, dentro il suo riquadro, e la pagina resta ferma. */
  .foglio table.esercizi{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .foglio table.esercizi td, .foglio table.esercizi th{padding:12px 10px}
  /* Le carte in fila avevano altezze diverse perché una etichetta andava a capo. */
  .lavoro > *, .misure > *{min-width:0}
  .foglio .val, .foglio .conto .voce > b{overflow-wrap:anywhere}
  .testata{flex-direction:column;align-items:flex-start;gap:12px}
  .testata .azioni{width:100%;display:flex;gap:8px;flex-wrap:wrap}
  .testata .azioni .bott{flex:1 1 auto}
  .lavoro{grid-template-columns:1fr !important}
  .misure{grid-template-columns:1fr 1fr}
}

/* ============ la porta di chi allena ============ */
/* anche la testata di Studio e' quella delle altre: una sola per tutte */
.scena-studio{
  background:
    radial-gradient(120% 90% at 85% -10%, var(--testata-luce, rgba(255,255,255,.18)) 0%,
                    rgba(255,255,255,0) 55%),
    linear-gradient(165deg, var(--testata-a, var(--viola)) 0%,
                            var(--testata-b, var(--viola-cupo, #3A1FA8)) 100%);
}
.st-cose{display:grid;gap:11px;margin-top:14px}
.st-cose span{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;line-height:1.5}
.st-cose i{width:7px;height:7px;border-radius:99px;background:var(--viola);flex:0 0 auto;margin-top:7px}

/* ============ la lettura dei progressi ============
   Un numero è un archivio; una frase è un progresso. «4.337 kg» non dice niente,
   «sollevi il 27% in più di quando hai cominciato» dice tutto. */
/* Era un gradiente dal colore pieno al suo capo scuro, con sopra il testo
   «che si legge sul colore pieno». Ma un gradiente ha due capi: il nero che
   si legge benissimo sull oro arrivava a 2,0 sul bronzo in fondo al riquadro,
   e la frase si spegneva a meta. Adesso il fondo e la carta con un velo del
   colore: una tinta sola, e il testo e quello di tutte le altre carte. */
.lettura{
  background:color-mix(in srgb, var(--viola) 12%, var(--carta));
  color:var(--inchiostro);
  border:1px solid color-mix(in srgb, var(--viola) 45%, transparent);
  border-radius:22px;padding:22px;margin-bottom:16px;
}
.le-et{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--accento, var(--viola-testo))}
/* Il fondo di questo riquadro e' il colore pieno dello studio, quindi il
   testo e' quello che ci si legge sopra: su un oro, il bianco sta a 1,07 —
   scritte invisibili dentro una carta accesa. */
.lettura p{
  margin:14px 0 0;font-size:17px;font-weight:600;line-height:1.45;
  color:var(--inchiostro);
}
.lettura p b{color:var(--accento, var(--viola-testo));font-weight:800}
.gr-nota{margin:10px 0 0;font-size:12px;color:var(--tenue2);font-weight:600}

/* ============ il diario: un anello e tre barre ============
   Prima c'erano tre anelli concentrici, una legenda di quattro righe e le stesse
   cose ripetute sui pasti: quattro modi di dire lo stesso. Adesso il numero che
   conta sta nell'anello e i tre macro hanno tre barre uguali, coi grassi inclusi. */
.anelli{display:flex;align-items:center;gap:20px}
.anello-solo{width:132px;height:132px;flex:0 0 auto}
.anelli-testo{min-width:0;flex:1}
.anelli-testo .cuore{font-size:38px;line-height:1;letter-spacing:-.028em;font-weight:800}
.anelli-testo .cuore small{display:block;font-size:13px;color:var(--tenue);font-weight:600;margin-top:6px;letter-spacing:0}
.su-tot{margin-top:12px;font-size:13px;color:var(--tenue);font-weight:700;font-variant-numeric:tabular-nums}

.macro-barre{display:grid;gap:15px;margin-top:22px;padding-top:20px;border-top:1px solid var(--filo)}
.mb-riga{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center}
.mb-nome{font-size:13.5px;font-weight:700}
.mb-pista{height:11px;border-radius:99px;background:var(--filo);overflow:hidden}
.mb-pista i{display:block;height:100%;border-radius:99px;transition:width .3s ease}
.mb-num{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mb-num small{font-size:11.5px;color:var(--tenue);font-weight:700}
.mb-manca{grid-column:2 / -1;font-size:11.5px;color:var(--tenue);font-weight:600;margin-top:-9px}
@media (max-width:400px){
  .anello-solo{width:112px;height:112px}
  .mb-riga{grid-template-columns:84px 1fr auto}
}

/* ============ il recupero, a tutto schermo ============ */
.recupero-pieno{
  position:fixed;inset:0;z-index:90;display:flex;align-items:stretch;justify-content:center;
  background:linear-gradient(165deg,var(--viola) 0%, #2E1785 100%);color:var(--sopra-colore, #fff);
  animation:rp-entra .22s ease-out;
}
.recupero-pieno.finito{background:linear-gradient(165deg,#17A398 0%, #0C6F67 100%)}
.recupero-pieno.va-via{animation:rp-esce .2s ease-in forwards}
@keyframes rp-entra{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes rp-esce{to{opacity:0;transform:scale(.98)}}
.rp-esci{
  position:absolute;top:calc(14px + env(safe-area-inset-top, 0px));right:16px;z-index:2;
  width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);
  color:#fff;font-size:17px;font-weight:800;
}
/* l'anello sta sopra e il tempo ci sta dentro: niente più cerchio dietro le scritte.
   I pulsanti stanno in basso, dove il pollice arriva senza cambiare presa. */
/* anello al centro, pulsanti in fondo: il pollice ci arriva senza cambiare presa */
.rp-dentro{
  position:relative;text-align:center;width:100%;max-width:360px;
  padding:calc(78px + env(safe-area-inset-top, 0px)) 24px calc(30px + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.rp-anello{width:252px;height:252px;max-width:72vw;max-height:72vw;display:block}
.rp-dentro-anello{
  fill:#fff;font-size:27px;font-weight:800;letter-spacing:-.025em;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
}
.rp-dentro-et{
  fill:rgba(255,255,255,.65);font-size:7px;font-weight:800;letter-spacing:.2em;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
}
.rp-dopo{margin-top:30px;margin-bottom:auto;font-size:15px;color:rgba(255,255,255,.82);font-weight:600;line-height:1.5}
.rp-dopo b{color:#fff;font-weight:800}
.rp-tasti{display:flex;gap:10px;margin-top:auto;padding-top:34px;width:100%}
.rp-tasti .bott{flex:1;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;min-height:54px}
.rp-tasti .bott.pieno{background:#fff;color:var(--colore-su-carta, var(--viola-testo));border-color:#fff}

/* la pastiglia che resta in cima quando esci dal recupero */
/* La pastiglia del recupero sta IN BASSO, appoggiata sopra la barra delle schede.
   In alto finiva sotto l'orologio del telefono e sembravano due barre sovrapposte;
   qui invece galleggia dove arriva il pollice e non si accavalla a niente. */
.rp-pastiglia{
  position:fixed;z-index:95;left:50%;transform:translateX(-50%);
  bottom:calc(82px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;gap:9px;border:0;
  background:#1B1A2E;color:#fff;border-radius:99px;padding:11px 20px 11px 15px;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.55);font:inherit;
  animation:rp-sale .24s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes rp-sale{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1}}
.rp-pastiglia i{width:9px;height:9px;border-radius:99px;background:#7C62FF;flex:0 0 auto;animation:battito 1s infinite}
.rp-pastiglia.finita{background:#0E6E66}
.rp-pastiglia.finita i{background:#6FE3D6;animation:none}
.rp-pastiglia b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.rp-pastiglia span{font-size:12px;color:rgba(255,255,255,.6);font-weight:700}
@keyframes battito{0%,100%{opacity:1}50%{opacity:.3}}

/* ============ cosa caricare sul bilanciere ============
   Era una riga di testo in grigio: «bilanciere 20 kg + 15 per lato».
   È la cosa che nessun concorrente ha e si guarda con le mani occupate,
   quindi si disegna: i dischi veri, nell'ordine in cui si infilano. */
.dischi-grandi{
  background:var(--carta);border-radius:20px;padding:16px 18px 14px;margin-top:14px;
  box-shadow:var(--ombra);
}
.dg-testa{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dg-testa b{font-size:15px;font-weight:800}
.dg-testa span{font-size:12.5px;color:var(--tenue);font-weight:600}
.dg-barra{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:96px;margin:16px 0 12px;
}
/* l'asta attraversa tutto, i dischi ci stanno infilati sopra */
.dg-asta{
  position:absolute;left:0;right:0;top:calc(50% - 9px);transform:translateY(-50%);
  height:10px;border-radius:5px;
  background:linear-gradient(180deg,#C9C6DE 0%, #9F9BBD 55%, #7F7B9E 100%);
}
/* ogni disco porta scritto il suo peso: così si sa cosa infilare senza contare */
.dg-pezzo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;margin:0 2px;flex:0 0 auto}
.dg-pezzo small{font-size:11.5px;font-weight:800;color:var(--tenue);font-variant-numeric:tabular-nums}
.dg-disco{
  position:relative;z-index:1;width:17px;border-radius:5px;flex:0 0 auto;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.16), 0 3px 8px rgba(27,26,46,.26);
}
.dg-fermo{
  position:relative;z-index:1;width:10px;height:30px;border-radius:4px;
  background:#6E6758;margin-left:5px;flex:0 0 auto;
}
.dg-sotto{font-size:12.5px;color:var(--tenue);font-weight:700}

/* ============ la proposta di un allenatore ============
   Si vede, ma non urla: non è una pubblicità, è una mano tesa a chi si è fermato.
   Per questo ha il colore caldo del prodotto e non quello degli avvisi. */
.proposta{
  background:linear-gradient(165deg, var(--viola) 0%, var(--viola-cupo, #3A1FA8) 100%);
  color:#fff;border-radius:22px;padding:20px;margin:4px 0 16px;
  box-shadow:0 18px 40px -24px var(--ombra-viola, rgba(212,175,55,.6));
}
.proposta b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.proposta p{margin:8px 0 16px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.88);font-weight:500}
.proposta .bott{width:100%;background:#fff;color:var(--colore-su-carta, var(--viola-testo));border-color:#fff}
.proposta small{display:block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.7);font-weight:600;text-align:center}

/* ============ lo storico degli allenamenti ============
   Una riga per seduta: la lettera del giorno a sinistra come un timbro,
   la data in mezzo, e a destra il numero che racconta la fatica. */
.allenamenti{background:var(--carta);border-radius:18px;padding:4px 6px;box-shadow:var(--ombra)}
.st-riga{
  display:grid;grid-template-columns:38px 1fr auto;gap:13px;align-items:center;
  width:100%;background:none;border:0;text-align:left;font:inherit;color:inherit;
  padding:12px 10px;border-bottom:1px solid var(--filo);border-radius:12px;
}
.st-riga:last-child{border-bottom:0}
.st-riga:active{background:var(--sfondo)}
.st-giorno{
  width:38px;height:38px;border-radius:13px;background:var(--viola-chiaro);color:var(--viola-testo);
  display:grid;place-items:center;font-size:15px;font-weight:800;
}
.st-che b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.st-che small{display:block;font-size:12.5px;color:var(--tenue);font-weight:600;margin-top:1px}
.st-quanto{text-align:right;white-space:nowrap}
.st-quanto b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.st-quanto small{display:block;font-size:11.5px;color:var(--tenue);font-weight:700;margin-top:-1px}

.st-apri{
  width:100%;background:none;border:0;border-top:1px solid var(--filo);
  padding:14px 10px;font:inherit;font-size:14px;font-weight:800;color:var(--viola-testo);
}
.st-apri:active{background:var(--sfondo)}

.st-cima{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.st-cima span{font-size:12.5px;color:var(--tenue);font-weight:600}
.st-cima b{font-size:13px;font-weight:800;white-space:nowrap}
.st-barre{display:flex;align-items:flex-end;gap:5px;height:76px}
.st-barre i{
  flex:1;background:var(--viola-chiaro);border-radius:5px 5px 2px 2px;min-height:8px;
}
.st-barre i:last-child{background:var(--viola)}
.st-estremi{display:flex;justify-content:space-between;margin-top:7px;font-size:11.5px;color:var(--tenue2);font-weight:600}
.st-es b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.st-es{grid-template-columns:1fr auto !important}

/* acqua */
/* L'acqua si tocca piu' volte al giorno, e l'azzurro dice «acqua» senza che
   nessuno legga niente. Ma un riquadro azzurro pieno, in un'app nera e oro,
   sembrava ritagliato da un'altra applicazione: la CARTA e' come tutte le
   altre, e l'azzurro resta dove serve a capire a che punto sei — i
   bicchieri. Il resto e' dello studio. */
.acqua{
  margin:0;background:var(--carta);border:1px solid var(--filo);
}
.acqua b{color:var(--inchiostro)}
/* «0 di 8 bicchieri»: e' una didascalia come le altre, quindi il grigio
   caldo dello studio — prima era azzurro su azzurro, 4,16. */
.acqua .quanti{color:var(--tenue) !important}
.acqua .bott{border-color:var(--filo-forte);color:var(--inchiostro)}
/* bianco su #1B90BD sta a 3,64: il «+» che si preme otto volte al giorno
   era la cosa meno leggibile della schermata. Fondo piu' scuro, e il bianco
   arriva a 6,4. */
/* il «+» e' il pulsante principale di questa carta: pieno, col colore dello
   studio e sopra quello che ci si legge — che sull'oro e' il nero. */
.acqua .bott.pieno{background:var(--viola);border-color:var(--viola);color:var(--sopra-colore, #fff)}
.bicchieri{display:flex;gap:6px;margin-top:16px}
/* Il bicchiere VUOTO non e' acqua: e' il posto dove l acqua andra'. Era
   azzurrino lo stesso, e otto caselle azzurre dicevano «fatto» a chi non
   aveva bevuto niente. Adesso e' il binario delle barre dei macro, cioe'
   il nulla dello studio, e l azzurro resta solo dove c e' qualcosa. */
.bicchieri i{
  flex:1;height:34px;border-radius:9px;background:var(--viola-chiaro);
  border:2px solid transparent;transition:background .2s ease, transform .2s ease;
}
.bicchieri i.pieno{
  background:linear-gradient(180deg,#56B9DC 0%, #1B90BD 100%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .acqua{background:var(--carta);border-color:var(--filo)}
  :root:not([data-theme="light"]) .acqua b{color:var(--inchiostro)}
  :root:not([data-theme="light"]) .acqua .quanti{color:var(--tenue) !important}
  :root:not([data-theme="light"]) .bicchieri i{background:var(--viola-chiaro)}
}

/* Le carte del diario hanno bisogno d'aria: una addosso all'altra sembrano una sola. */
.corpo-scena .bolla + .bolla{margin-top:16px}

/* piano alimentare, lato allenatore */
.riga-piano{
  display:flex;align-items:flex-start;gap:12px;background:var(--sfondo);border-radius:16px;
  padding:14px 16px;margin-bottom:10px;
}
.riga-piano b{font-size:15px;font-weight:800}
.riga-piano p{margin:4px 0 0;font-size:13.5px;color:var(--tenue);font-weight:500;line-height:1.45}

/* giorni della settimana */
/* Sette quadratini da 38 px separati da 5: andando a capo, «lun» finiva a
   cinque pixel da «gio», e col pollice se ne prende uno a caso. Più grandi,
   più distanti, e il colore del testo è quello pieno: erano anche sbiaditi. */
.giorni-sett{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.gs{
  border:0;background:var(--sfondo);border-radius:12px;min-width:42px;height:44px;
  font-size:12.5px;font-weight:800;color:var(--tenue);flex:0 0 auto;
}
.gs:hover{background:var(--viola-chiaro);color:var(--viola-testo)}
.gs.si{background:var(--viola);color:var(--sopra-colore, #fff)}

/* selettore piccolo in tabella */
.minisel{
  font:inherit;font-weight:700;font-size:13px;border:2px solid var(--filo);border-radius:12px;
  padding:9px 10px;background:var(--carta);min-height:44px;color:var(--tenue);
}

/* foto del pasto nel diario */
.foto-pasto{width:38px;height:38px;border-radius:12px;object-fit:cover;flex:0 0 auto}

.avviso-tocca{cursor:pointer}
.avviso-tocca:hover{background:#E3DEFB}

/* coriandoli del record */
.coriandoli{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.coriandoli i{
  position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;
  animation:cade 1.3s cubic-bezier(.3,.6,.4,1) forwards;
}
@keyframes cade{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
@media (prefers-reduced-motion:reduce){.coriandoli{display:none}}


/* ============ tema scuro: segue il telefono ============ */
@media (prefers-color-scheme: dark){
  :root{
    --sfondo:#0B0B0D;
    --carta:#17150F;
    --inchiostro:#F2EEE6;
    --tenue:#A39D90;
    --tenue2:#8D8779;
    --filo:#2A261C;
    --filo-forte:#3E3828;
    --viola:#D4AF37;
    --viola-scuro:#B8952C;
    --viola-chiaro:#2A2214;
    --viola-testo:#E7C45C; --accento:#E7C45C;
    --colore-su-carta:#8A6315; --sopra-colore:#0B0B0D;
    --buono:#2BC4B4;
    --ombra:0 10px 26px -16px rgba(0,0,0,.8);
    --ombra-alta:0 18px 40px -20px rgba(0,0,0,.9);
  }
  .telefono{border-color:#000}
  .oggi-card .bott{background:#fff;color:#8A6315}
  .oggi-card .bott:hover{background:#EDEAFC;color:#2E2080}
  .serie-riga.fatta .campo{background:#143F3C;color:#6FE3D6}
  .record{background:#143F3C;color:#6FE3D6}
  .avviso{background:var(--viola-chiaro);color:var(--su-viola-chiaro, #CFC6FF)}
  .avviso-tocca:hover{background:#342C63}
  .tecnica.evid{background:#3D2F12;color:#F0C777}
  .salvato{background:var(--carta);color:var(--inchiostro);border:1px solid var(--filo-forte)}
  .velo{background:rgba(8,7,16,.65)}
  table.esercizi tr.sposta:hover{background:#221F39}
  .bicchieri i{background:var(--viola-chiaro)}
  .bicchieri i.pieno{background:linear-gradient(180deg,#56B9DC 0%, #1B90BD 100%)}
}

/* ============ movimento ============ */
@keyframes entra-da-destra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes entra-da-sinistra{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes sale{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.va-avanti{animation:entra-da-destra .26s cubic-bezier(.2,.8,.2,1)}
.va-indietro{animation:entra-da-sinistra .26s cubic-bezier(.2,.8,.2,1)}
.sale{animation:sale .3s cubic-bezier(.2,.8,.2,1) both}
.a-scalare > *{animation:sale .34s cubic-bezier(.2,.8,.2,1) both}
.a-scalare > *:nth-child(1){animation-delay:.02s}
.a-scalare > *:nth-child(2){animation-delay:.05s}
.a-scalare > *:nth-child(3){animation-delay:.08s}
.a-scalare > *:nth-child(4){animation-delay:.11s}
.a-scalare > *:nth-child(5){animation-delay:.14s}
.a-scalare > *:nth-child(n+6){animation-delay:.17s}
.anello svg circle:last-child{transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)}
.passo:active,.ris:active,.persona:active{transform:scale(.985)}

/* barra di avanzamento dell'allenamento */
.avanzamento{
  position:sticky;top:0;z-index:5;background:var(--sfondo);padding:6px 0 12px;
}
.avanzamento .pista{height:8px;background:var(--viola-chiaro);border-radius:99px;overflow:hidden}
.avanzamento .pista i{display:block;height:100%;background:var(--viola);border-radius:99px;
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
.avanzamento .scritta{display:flex;justify-content:space-between;font-size:12px;color:var(--tenue);
  font-weight:700;margin-bottom:6px}

/* trascinare per riordinare */
.sposta{transition:background .12s ease}
tr.in-mano{opacity:.4}
tr.bersaglio td{box-shadow:inset 0 2px 0 var(--viola)}
.presa{cursor:grab;padding:0 4px}
.presa:active{cursor:grabbing}

/* ricerca rapida da tastiera */
.rapida{
  position:fixed;inset:0;background:rgba(27,26,46,.45);backdrop-filter:blur(3px);
  display:grid;place-items:start center;padding:12vh 20px;z-index:60;
}
.rapida[hidden]{display:none}
.rapida .cassetto{
  background:var(--carta);border-radius:22px;width:100%;max-width:560px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);animation:sale .2s cubic-bezier(.2,.8,.2,1);
}
.rapida input{
  width:100%;border:0;border-bottom:1px solid var(--filo);padding:20px 22px;font:inherit;
  font-size:17px;font-weight:700;background:none;color:var(--inchiostro);
}
.rapida input:focus{outline:none}
.rapida .esiti{max-height:52vh;overflow:auto;padding:8px}
.rapida .esito{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  font-size:14.5px;font-weight:700;cursor:pointer;
}
.rapida .esito small{color:var(--tenue);font-weight:600;font-size:12.5px;margin-left:auto}
.rapida .esito.scelto{background:var(--viola-chiaro);color:var(--viola-testo)}
.rapida .vuota{padding:24px;color:var(--tenue);font-size:14px;font-weight:600;text-align:center}
.tasto-scorciatoia{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;
  background:var(--filo);color:var(--tenue);font-size:11.5px;font-weight:800;
}

/* segnali: chi sta mollando */
.segnali{display:grid;gap:12px;margin-bottom:24px}
.segnale{
  display:flex;align-items:flex-start;gap:14px;background:var(--carta);border-radius:18px;
  padding:16px 18px;box-shadow:var(--ombra);border-left:5px solid var(--viola);
}
.segnale.caldo{border-left-color:var(--attenzione)}
.segnale .ico{
  width:38px;height:38px;border-radius:13px;background:var(--viola-chiaro);display:grid;place-items:center;
  flex:0 0 auto;color:var(--viola-testo);
}
.segnale.caldo .ico{background:#FDF2DD;color:#8A5D05}
.segnale b{display:block;font-size:15px;font-weight:800}
.segnale p{margin:3px 0 0;font-size:13.5px;color:var(--tenue);font-weight:500;line-height:1.45}
.segnale .bott{margin-left:auto;flex:0 0 auto;min-height:44px;padding:10px 14px;font-size:13.5px}
@media (prefers-color-scheme: dark){ .segnale.caldo .ico{background:#3D2F12;color:#F0C777} }

/* icone disegnate */
.ico-svg{width:20px;height:20px;stroke-width:2;fill:none;stroke:currentColor;flex:0 0 auto}
.menu .ico-svg{width:19px;height:19px}
.faccia-ico{width:22px;height:22px}

/* numeri che salgono */
.conta{font-variant-numeric:tabular-nums}


/* ============ blocco nuovo: vocali, check-in, salute, misure, stampa ============ */

/* note vocali */
.vocale{width:100%;height:40px;margin:2px 0 4px;display:block}
.bolla-msg.mia .vocale{filter:none}
.video-msg{width:100%;border-radius:14px;margin-top:8px;background:#000;display:block}
.commento-video{
  display:block;margin-top:7px;padding:8px 11px;border-radius:11px;font-size:12.5px;font-weight:700;
  background:rgba(255,255,255,.18);
}
.bolla-msg.sua .commento-video{background:var(--viola-chiaro);color:var(--viola-testo)}
.bott.registra{background:#D8362A;border-color:#D8362A;color:#fff;animation:pulsa 1.4s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.72}}
@media (prefers-reduced-motion:reduce){.bott.registra{animation:none}}

/* richiamo del check-in sul telefono */
.richiamo{
  display:block;width:100%;text-align:left;border:0;margin-bottom:14px;cursor:pointer;
  background:var(--carta);box-shadow:var(--ombra);
}
.richiamo b{font-size:16px;font-weight:800;display:block}
.richiamo p{margin:5px 0 0;font-size:13.5px;color:var(--tenue);font-weight:500;line-height:1.45}
.richiamo .vai-avanti{display:inline-block;margin-top:10px;color:var(--viola-testo);font-weight:800;font-size:13.5px}

/* voti da 1 a 10 */
.voti{display:flex;gap:6px;flex-wrap:wrap}
.voto{
  width:44px;height:44px;border-radius:13px;border:2px solid var(--filo);background:var(--carta);
  font-weight:800;font-size:14px;color:var(--tenue);
}
.voto:hover{border-color:var(--viola-testo);color:var(--viola-testo)}
.voto.scelto{background:var(--viola);border-color:var(--viola-testo);color:var(--sopra-colore, #fff)}

/* check-in lato allenatore */
.risposta-ck{background:var(--sfondo);border-radius:18px;padding:18px;margin-bottom:14px}
.risposta-ck.nuova{background:var(--viola-chiaro)}
.capo-ck{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.capo-ck b{font-size:16px;font-weight:800}
.riga-ck{
  display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--filo);
  font-size:13.5px;color:var(--tenue);font-weight:600;
}
.riga-ck:last-child{border-bottom:0}
.riga-ck.lunga{display:block}
.riga-ck.lunga p{margin:5px 0 0;color:var(--inchiostro);font-weight:600;font-size:14px}
.riga-ck p{margin:0}
.punteggio{
  margin-left:auto;font-weight:800;font-size:13.5px;padding:4px 11px;border-radius:99px;white-space:nowrap;
}
.punteggio.alto{background:#E6F7F5;color:#0E6E66}
.punteggio.medio{background:#FDF2DD;color:#8A5D05}
.punteggio.basso{background:#FBE3E0;color:#9B2A1E}
@media (prefers-color-scheme: dark){
  .punteggio.alto{background:#143F3C;color:#6FE3D6}
  .punteggio.medio{background:#3D2F12;color:#F0C777}
  .punteggio.basso{background:#3F1A15;color:#F3A99E}
}
.elenco-dom{margin-top:16px}

/* allergie: la x dentro la pastiglia */
.x-piccolo{background:none;border:0;color:inherit;font-weight:800;font-size:14px;padding:0 0 0 4px;cursor:pointer}

/* equilibrio del corpo */
.eq{display:grid;gap:7px;margin-top:10px}
.riga-eq{display:grid;grid-template-columns:58px 1fr auto;gap:9px;align-items:center;font-size:12.5px;font-weight:700;color:var(--tenue)}
.riga-eq .p{height:9px;background:var(--viola-chiaro);border-radius:99px;overflow:hidden}
.riga-eq .p i{display:block;height:100%;background:var(--viola);border-radius:99px}
.riga-eq b{color:var(--inchiostro);font-variant-numeric:tabular-nums}

/* massimale stimato */
.stimato{display:block;margin-top:4px;font-weight:700;opacity:.85}

/* striscia dei giorni */
.striscia{
  background:var(--viola);color:var(--sopra-colore, #fff);border-radius:18px;padding:14px 18px;margin-bottom:4px;
  box-shadow:0 14px 28px -16px var(--ombra-viola, rgba(212,175,55,.75));
}
.striscia b{font-size:17px;font-weight:800;display:block}
.striscia span{font-size:13px;color:rgba(255,255,255,.82);font-weight:600}

/* lista della spesa */
.spesa{display:grid;gap:8px;max-height:46vh;overflow:auto}
.voce-spesa{
  display:flex;align-items:center;gap:12px;background:var(--sfondo);border-radius:14px;
  padding:12px 14px;cursor:pointer;
}
.voce-spesa input{width:22px;height:22px;accent-color:var(--viola-testo);flex:0 0 auto}
.voce-spesa b{font-size:14.5px;font-weight:800;display:block}
.voce-spesa small{color:var(--tenue);font-size:12.5px;font-weight:600}
.voce-spesa.presa b{text-decoration:line-through;color:var(--tenue2)}

/* foto a confronto */
.coppia-foto{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.coppia-foto figure{margin:0}
.coppia-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;display:block;background:var(--viola-chiaro)}
.coppia-foto figcaption{font-size:12px;color:var(--tenue);font-weight:700;text-align:center;margin-top:7px}
.coppia-foto.grande img{aspect-ratio:3/4}

/* misure */
.riga-misura{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--filo);font-size:14px;font-weight:600}
.riga-misura:last-of-type{border-bottom:0}
.riga-misura span{color:var(--tenue);text-transform:capitalize;flex:1}
.riga-misura b{font-weight:800;font-variant-numeric:tabular-nums}
.riga-misura small{font-size:12.5px;font-weight:800;min-width:72px;text-align:right;color:var(--tenue2)}
.riga-misura small.buona{color:var(--buono)}
.riga-misura small.calo{color:var(--attenzione)}

/* ============ stampa: rapporto del mese e scheda ============ */
#stampa{position:fixed;inset:0;background:#fff;color:#111;overflow:auto;z-index:70;padding:0 0 60px}
.barra-stampa{
  position:sticky;top:0;display:flex;align-items:center;gap:14px;padding:14px 22px;
  background:var(--carta);border-bottom:1px solid var(--filo);color:var(--inchiostro);z-index:2;
}
.foglio-stampa{max-width:760px;margin:0 auto;padding:40px 30px;color:#15141F;background:#fff}
.foglio-stampa h1{font-size:30px;letter-spacing:-.02em}
.foglio-stampa h2{font-size:18px;margin:28px 0 12px;letter-spacing:-.02em}
.cap-rapporto{display:flex;align-items:flex-start;gap:20px;border-bottom:2px solid #15141F;padding-bottom:16px}
.cap-rapporto p{margin:4px 0 0;color:#5B5873;font-size:14px;font-weight:600}
.cap-rapporto .firma{margin-left:auto;font-weight:800;font-size:14px;color:#5B5873}
.numeri-rapporto{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.numeri-rapporto div{border:1px solid #DCD9EC;border-radius:12px;padding:12px 14px}
.numeri-rapporto span{display:block;font-size:11.5px;color:#5B5873;font-weight:700}
.numeri-rapporto b{display:block;font-size:17px;margin-top:4px;font-weight:800}
.tab-rapporto{width:100%;border-collapse:collapse;font-size:14px}
.tab-rapporto th{text-align:left;font-size:11.5px;color:#5B5873;padding:8px 10px;border-bottom:1px solid #DCD9EC}
.tab-rapporto td{padding:10px;border-bottom:1px solid #EEECF7;vertical-align:top}
.tab-rapporto small{color:#5B5873;font-size:12px}
.tab-rapporto .su{color:#0E6E66;font-weight:800;text-align:right;white-space:nowrap}
.tab-rapporto .giu{color:#0E6E66;font-weight:800;text-align:right;white-space:nowrap}
.tab-scheda .caselle{letter-spacing:5px;color:#9B98B8;white-space:nowrap}
.giorno-stampa{break-inside:avoid}
.foto-rapporto{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.foto-rapporto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
.foto-rapporto figcaption{font-size:12px;color:#5B5873;text-align:center;margin-top:6px;font-weight:700}
.foto-rapporto figure{margin:0}
.spazio-scrittura{
  border:1px dashed #BCB8D8;border-radius:12px;padding:18px;min-height:76px;color:#5B5873;font-size:14px;
}
.piede-stampa{margin-top:26px;font-size:12px;color:#5B5873}

@media print{
  body > *:not(#stampa){display:none !important}
  #stampa{position:static;padding:0}
  .barra-stampa{display:none}
  .foglio-stampa{max-width:none;padding:0}
  .spazio-scrittura{border-color:#999}
  @page{margin:18mm}
}

.sino{display:flex;gap:9px}
.sn{
  flex:1;min-height:48px;border:2px solid var(--filo);background:var(--carta);border-radius:14px;
  font-weight:800;font-size:15px;color:var(--tenue);
}
.sn:hover{border-color:var(--viola-testo);color:var(--viola-testo)}
.sn.scelto{background:var(--viola);border-color:var(--viola-testo);color:var(--sopra-colore, #fff)}
.richiamo.caldo{border-left:5px solid var(--attenzione)}
.tab-rapporto .neutra{color:#5B5873;font-weight:700;text-align:right;white-space:nowrap}

/* ============ agenda, pagamenti, automatici, sfide, piano settimana ============ */

/* la pastiglia che dice la verità su cosa è disegnato */
/* Il bordo tutt'intorno, non solo a sinistra: su un fondo scuro il riquadro
   si riconosce come avviso prima ancora di leggerlo, e il colore non deve
   fare tutto il lavoro da solo. */
.anteprima-avviso{
  background:var(--attenzione-velo);border-radius:16px;padding:14px 18px;margin-bottom:20px;
  border:1px solid color-mix(in srgb, var(--attenzione) 42%, transparent);
  border-left:5px solid var(--attenzione);
}
.anteprima-avviso b{display:block;font-size:14.5px;font-weight:800;color:#8A3C06}
.anteprima-avviso p{margin:4px 0 0;font-size:13.5px;color:#9A4A12;font-weight:500;line-height:1.5}
@media (prefers-color-scheme: dark){
  .anteprima-avviso{background:#36200E;border-color:color-mix(in srgb, var(--attenzione-chiara) 46%, transparent);border-left-color:var(--attenzione-chiara)}
  .anteprima-avviso b{color:var(--attenzione-chiara)}
  .anteprima-avviso p{color:#E0A878}
}
/* e lo stesso quando e' lo STUDIO a chiedere il tema scuro, non il telefono */
html[data-marchio="scuro"] .anteprima-avviso{background:#36200E;border-color:color-mix(in srgb, var(--attenzione-chiara) 46%, transparent);border-left-color:var(--attenzione-chiara)}
html[data-marchio="scuro"] .anteprima-avviso b{color:var(--attenzione-chiara)}
html[data-marchio="scuro"] .anteprima-avviso p{color:#E0A878}

/* agenda */
.seduta{
  display:flex;align-items:center;gap:14px;background:var(--sfondo);border-radius:16px;
  padding:14px 16px;margin-bottom:9px;
}
.seduta .ora{font-size:18px;font-weight:800;min-width:56px;letter-spacing:-.02em}
.seduta b{font-size:15px;font-weight:800;display:block}
.seduta small{color:var(--tenue);font-size:12.5px;font-weight:600}

/* fattura disegnata */
.fattura-finta{border:2px dashed var(--filo-forte);border-radius:18px;padding:18px;margin-bottom:6px}
.riga-f{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--filo);font-size:14px}
.riga-f:last-child{border-bottom:0}
.riga-f span{color:var(--tenue);font-weight:600}
.riga-f b{font-weight:800;text-align:right}
.riga-f.totale{border-top:2px solid var(--inchiostro);margin-top:6px;padding-top:12px;font-size:16px}

/* messaggi automatici spenti */
.segnale.spenta{opacity:.55;border-left-color:var(--tenue2)}

/* sfide */
.ico-grande{
  width:52px;height:52px;border-radius:18px;background:var(--viola-chiaro);color:var(--viola-testo);
  display:grid;place-items:center;flex:0 0 auto;
}
.posto{
  display:inline-grid;place-items:center;width:24px;height:24px;border-radius:9px;
  background:var(--filo);color:var(--tenue);font-size:12px;font-weight:800;
}
.posto.oro{background:var(--attenzione);color:#fff}

/* i tre modi di aggiungere un pasto */
.modi-aggiunta{display:flex;gap:8px;margin-top:12px}
.modi-aggiunta .aggiungi{margin-top:0}
.aggiungi.stretto{flex:0 0 auto;width:52px;padding:10px 0}
.aggiungi.stretto .ico-svg{width:22px;height:22px}

/* mirino del codice a barre */
.mirino{
  height:190px;border-radius:20px;background:#15141F;position:relative;overflow:hidden;
  display:grid;place-items:center;color:#9B98B8;font-size:12.5px;font-weight:700;
}
.mirino::before{
  content:'';position:absolute;inset:34px 28px;border:2px solid rgba(255,255,255,.35);border-radius:12px;
}
.linea-scansione{
  position:absolute;left:28px;right:28px;height:2px;background:#FF4D4D;box-shadow:0 0 12px #FF4D4D;
  animation:scorri 2.2s ease-in-out infinite;
}
@keyframes scorri{0%,100%{top:40px}50%{top:146px}}
@media (prefers-reduced-motion:reduce){.linea-scansione{animation:none;top:92px}}

/* dettatura */
.ascolto{
  min-height:86px;border-radius:18px;background:var(--sfondo);display:grid;place-items:center;
  padding:16px;text-align:center;font-size:14.5px;color:var(--tenue);font-weight:600;line-height:1.5;
}
.ascolto.attivo{background:var(--viola-chiaro);color:var(--viola-testo);animation:pulsa 1.4s ease-in-out infinite}

/* ============ correzioni dal controllo a tappeto ============
   1. i comandi «indietro» erano alti meno di 30px: col dito non si prendono
   2. il grigio dei testi secondari stava sotto la soglia di contrasto
   3. nel tema scuro il viola schiarito non reggeva il testo bianco piccolo   */

.indietro{min-height:40px;padding:8px 2px 10px;align-items:center}
.fianco .fondo .indietro{min-height:40px;padding:8px 0}

:root{ --tenue2:#6E6758; }
@media (prefers-color-scheme: dark){ :root{ --tenue2:#8D8779; } }

/* la pastiglia sulla voce attiva: piena, non trasparente */
.menu a.vivo .pastiglia{background:#fff;color:var(--viola-testo)}

/* nel tema scuro le superfici viola piene restano scure, così il bianco si legge */
@media (prefers-color-scheme: dark){
  .oggi-card{background:var(--viola)}
  .oggi-card .dettagli{color:color-mix(in srgb, var(--sopra-colore, #fff) 90%, transparent)}
  .oggi-card .et{color:color-mix(in srgb, var(--sopra-colore, #fff) 84%, transparent)}
  .striscia{background:var(--viola)}
  .striscia span{color:rgba(255,255,255,.88)}
  .bolla-msg.mia{background:var(--viola)}
  .menu a.vivo{background:var(--viola)}
  .gs.si, .giorno[aria-selected="true"], .gruppo[aria-pressed="true"],
  .voto.scelto, .sn.scelto, .linguetta[aria-selected="true"]{background:var(--viola)}
  .bott.pieno{background:var(--viola);border-color:var(--viola)}
  /* «Comincia» sta sopra una carta già viola, quindi è bianco col testo viola.
     Questa regola gli rendeva viola anche il fondo, lasciandogli il testo
     viola: il pulsante principale dell'app spariva, contrasto 1,71. Sulle
     carte colorate resta bianco, che è anche il modo in cui si vede di più. */
  .oggi-card .bott.pieno, .rp-tasti .bott.pieno, .proposta .bott.pieno{
    background:#fff;border-color:#fff;color:#2E1C7A;
  }
  .bott.pieno:hover{background:var(--viola-scuro);border-color:var(--viola-scuro)}
}

/* contrasto delle pastiglie e dei tondi con le iniziali */
.menu a.vivo .pastiglia{color:var(--viola-scuro)}
@media (prefers-color-scheme: dark){
  .faccia{color:#E7C45C}
  .menu .pastiglia{color:#E7C45C}
  .bollino{background:var(--viola)}
  .tondo{color:#E7C45C}
  .voce .piu{color:#E7C45C}
  .aggiungi{color:#E7C45C}
  .gruppo:hover{color:#E7C45C}
  .ico-grande{color:#E7C45C}
  .tecnica{color:#E7C45C}
  .commento-video{color:#E7C45C}
  .bolla-msg.sua .commento-video{color:#E7C45C}
  .indietro:hover, .bott:hover{color:#E7C45C}
  .richiamo .vai-avanti{color:var(--accento, #E7C45C)}
  .contatore button{color:#E7C45C}
  .ascolto.attivo{color:#E7C45C}
}

/* il verde del «va bene» era troppo chiaro sulle scritte piccole */
.riga-misura small.buona{color:#0E7C72}
.riga-misura small.calo{color:#A7700F}
.posa{color:#5C564A}
@media (prefers-color-scheme: dark){
  .riga-misura small.buona{color:#5BD6C7}
  .riga-misura small.calo{color:#F0C777}
  .posa{color:#B9B2A2}
}
/* l'ultimo comando basso: il pulsante per mandare il video */
.scrivi + div .bott, label[for="video-file"]{min-height:48px;display:inline-flex;align-items:center;justify-content:center}

/* ============ ultime correzioni dal controllo ============
   1. ogni «×» o «+» è un bersaglio da 40px, anche quando sembra solo un simbolo
   2. il grigio dei testi secondari era 4,3:1 sul fondo lilla: sotto la soglia di 4,5  */
/* 44 px: sotto, il dito prende il bordo di quello accanto. E il «+»
   dell acqua eredita il colore della sua carta, non il viola. */
.piu{min-width:44px;min-height:44px}
.acqua .piu{background:var(--viola-chiaro);color:var(--accento, var(--viola-testo))}
.x-piccolo{min-width:28px;min-height:28px;display:inline-grid;place-items:center}
.voti .voto, .sino .sn{min-height:44px}
:root{ --tenue:#5C564A; }
@media (prefers-color-scheme: dark){ :root{ --tenue:#A39D90; } }

/* la pastiglia dell'allergia e la sua «×»: bersaglio vero anche qui */
.tecnica{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:6px 14px}
.x-piccolo{min-width:32px;min-height:32px;margin-right:-6px}

/* il puntino del compito non ancora fatto: era troppo chiaro per leggersi */
.segno{color:#4F4B70}
@media (prefers-color-scheme: dark){ .segno{color:#C4C0DF} }

/* i numeri della classifica incolonnati, non appesi alla barra.
   Solo i figli diretti: dentro la riga c'è anche la pastiglia del posto,
   che con questa regola si allargava schiacciando i nomi. */
.pila .r > b{min-width:76px;text-align:right}
.pila .r > span:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.pila .r .posto{flex:0 0 auto}


/* il conto del mese, nella pagina Pagamenti: si legge come una ricevuta,
   una riga per aliquota e il totale staccato sotto una linea */
.conto{display:grid;grid-template-columns:1fr;gap:2px}
.conto .voce{
  display:grid;grid-template-columns:1fr auto 54px 104px;gap:14px;align-items:center;
  padding:15px 2px;border-bottom:1px solid var(--filo);
}
.conto .voce:last-child{border-bottom:0}
.conto .chi{font-size:15px;font-weight:700;line-height:1.3}
.conto .chi small{display:block;font-size:12.5px;color:var(--tenue);font-weight:600;margin-top:2px}
.conto .base{font-size:14px;color:var(--tenue);font-weight:700;text-align:right}
.conto .aliq{
  font-size:12px;font-weight:800;text-align:center;padding:4px 0;border-radius:99px;
  background:var(--sfondo);color:var(--tenue);
}
.conto .aliq.alta{background:var(--viola-chiaro);color:var(--viola-testo)}
.conto .voce > b{font-size:17px;font-weight:800;text-align:right;letter-spacing:-.02em}
.conto .totale{
  grid-template-columns:1fr 104px;margin-top:8px;padding-top:18px;
  border-top:2px solid var(--filo-forte);border-bottom:0;
}
.conto .totale .chi{font-size:16px}
.conto .totale > b{font-size:26px;letter-spacing:-.024em}
@media (max-width:620px){
  .conto .voce{grid-template-columns:1fr auto;gap:6px 12px;row-gap:6px}
  .conto .chi{grid-column:1;grid-row:1}
  .conto .base{grid-column:1;grid-row:2;text-align:left;font-size:13px}
  .conto .aliq{grid-column:2;grid-row:1;justify-self:end;padding:4px 12px}
  .conto .voce > b{grid-column:2;grid-row:2;justify-self:end}
  .conto .totale{grid-template-columns:1fr auto}
  .conto .totale .chi{grid-row:1}
  .conto .totale > b{grid-column:2;grid-row:1}
}





/* ============ la classifica di una sfida ============
   Prima stava dentro la griglia generica da 78 pixel e i nomi si accavallavano.
   Qui ogni cosa ha la sua colonna: posto, nome con quanto manca, barra, punteggio. */
.classifica{display:grid;gap:2px;margin-top:20px}
.cl-riga{
  display:grid;grid-template-columns:32px minmax(0,1fr) 110px auto;gap:14px;align-items:center;
  padding:12px 2px;border-bottom:1px solid var(--filo);
}
.cl-riga:last-child{border-bottom:0}
.cl-riga .posto{
  width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  background:var(--sfondo);color:var(--tenue);font-size:14px;font-weight:800;
}
.cl-riga .posto.oro{background:#F6E2A8;color:#6B5212}
.cl-riga .posto.argento{background:#E4E6EC;color:#55596B}
.cl-riga .posto.bronzo{background:#EDD9C6;color:#6E4C2E}
.cl-nome{min-width:0}
.cl-nome b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-nome small{display:block;font-size:12.5px;color:var(--tenue);font-weight:600;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-barra{height:10px;border-radius:99px;background:var(--viola-chiaro);overflow:hidden}
.cl-barra i{display:block;height:100%;background:var(--viola);border-radius:99px}
.cl-punti{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;min-width:72px}
@media (max-width:720px){
  .cl-riga{grid-template-columns:32px minmax(0,1fr) auto;row-gap:6px}
  .cl-barra{grid-column:2 / -1}
}

/* ============ cosa vedono i tuoi clienti ============
   Il profilo e' una scelta grande e dichiarata; gli interruttori sono la rifinitura
   e devono dire a colpo d'occhio cos'e' acceso. */
.profili{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.profilo{
  position:relative;text-align:left;background:var(--sfondo);border:2px solid transparent;
  border-radius:18px;padding:18px;font:inherit;color:inherit;
}
.profilo:hover{border-color:var(--filo-forte)}
.profilo b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;padding-right:52px}
.profilo small{display:block;font-size:13px;color:var(--tenue);font-weight:600;margin-top:5px;line-height:1.45}
.profilo.scelto{border-color:var(--viola-testo);background:var(--viola-chiaro)}
.profilo.scelto small{color:var(--viola-testo)}
.profilo .tuo{
  position:absolute;top:15px;right:15px;background:var(--viola);color:var(--sopra-colore, #fff);
  font-size:11px;font-weight:800;padding:4px 10px;border-radius:99px;
}

.interruttori{display:grid;gap:2px;margin-top:14px}
.inter{
  display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center;width:100%;
  background:none;border:0;border-bottom:1px solid var(--filo);text-align:left;
  font:inherit;color:inherit;padding:15px 4px;
}
.inter:last-child{border-bottom:0}
.inter .levetta{
  width:46px;height:27px;border-radius:99px;background:var(--filo-forte);
  display:block;position:relative;transition:background .18s ease;
}
.inter .levetta i{
  position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:99px;background:#fff;
  transition:transform .18s ease;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.inter.on .levetta{background:var(--viola)}
.inter.on .levetta i{transform:translateX(19px)}
.inter-che b{display:block;font-size:15px;font-weight:800}
.inter-che small{display:block;font-size:13px;color:var(--tenue);font-weight:600;margin-top:2px;line-height:1.45}
.inter.bloccato{opacity:.5}

.nota-legge{
  background:#FDF2DD;border-left:5px solid #E09A1F;border-radius:14px;padding:16px 18px;margin-top:20px;
}
.nota-legge b{display:block;font-size:14.5px;color:#7A5806;font-weight:800}
.nota-legge p{margin:6px 0 0;font-size:13.5px;color:#8A6410;font-weight:500;line-height:1.5}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nota-legge{background:#3D2F12;border-left-color:var(--attenzione)}
  :root:not([data-theme="light"]) .nota-legge b{color:#F0C777}
  :root:not([data-theme="light"]) .nota-legge p{color:#D6B271}
}



/* le tre cose che si fanno quando la settimana salta */
.adatta{display:grid;gap:10px;margin-top:18px}
.ad-voce{
  text-align:left;background:var(--sfondo);border:2px solid transparent;border-radius:18px;
  padding:16px 18px;font:inherit;color:inherit;
}
.ad-voce:hover{border-color:var(--viola-testo);background:var(--viola-chiaro)}
.ad-voce b{display:block;font-size:15.5px;font-weight:800}
.ad-voce small{display:block;font-size:13px;color:var(--tenue);font-weight:600;margin-top:5px;line-height:1.5}
.ad-voce:hover small{color:var(--viola-testo)}


/* ============ la settimana dell'agenda ============
   Un elenco va bene con tre sedute; con venti serve vedere dove sono i buchi. */
.sett-barra{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sett-barra .bott{min-width:46px;min-height:46px;font-size:20px;padding:0;line-height:1}
.sett-barra span{flex:1}
.sett-barra b{display:block;font-size:16px;font-weight:800}
.sett-barra small{display:block;font-size:13px;color:var(--tenue);font-weight:600;margin-top:2px}
.sett-griglia{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
@media (max-width:980px){.sett-griglia{grid-template-columns:repeat(3,1fr)}}
.sg-giorno{background:var(--carta);border-radius:16px;padding:12px 10px;box-shadow:var(--ombra);min-height:150px;display:flex;flex-direction:column}
.sg-giorno.oggi{box-shadow:0 0 0 2px var(--viola), var(--ombra)}
.sg-giorno.vuoto{background:var(--sfondo);box-shadow:none}
.sg-capo{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.sg-capo b{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.sg-capo span{font-size:13px;color:var(--tenue);font-weight:700}
.sg-giorno.oggi .sg-capo b{color:var(--viola-testo)}
.sg-dentro{display:grid;gap:7px;align-content:start;flex:1}
.sg-seduta{background:var(--viola-chiaro);border-radius:11px;padding:8px 10px;border-left:3px solid var(--viola)}
.sg-seduta.attesa{background:#FDF2DD;border-left-color:var(--attenzione)}
.sg-seduta b{display:block;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.sg-seduta span{display:block;font-size:12.5px;font-weight:700;margin-top:1px}
.sg-seduta small{display:block;font-size:11px;color:var(--tenue);font-weight:700}
.sg-libero{font-size:12px;color:var(--tenue2);font-weight:700;align-self:center;justify-self:center;margin:auto}


/* ============ il piano costruito dai macro ============ */
.pc-conto{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:18px 0}
.pc-num{background:var(--sfondo);border-radius:14px;padding:12px 14px}
.pc-num span{display:block;font-size:12px;color:var(--tenue);font-weight:700}
.pc-num b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.pc-num b small{font-size:12px;color:var(--tenue);font-weight:700;margin-left:3px}
.pc-num i{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:#8A6410;margin-top:3px}
.pc-num i.ok{color:#0E6E66}
.pc-pasto{border:1px solid var(--filo);border-radius:16px;padding:14px 16px;margin-bottom:10px}
.pc-pasto > b{display:block;font-size:15px;font-weight:800;margin-bottom:8px}
.pc-voce{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--filo);font-size:13.5px;font-weight:600}
.pc-voce:last-child{border-bottom:0}
.pc-voce b{font-weight:800;white-space:nowrap}

/* ============ i modelli ============
   Erano due schede che si potevano solo eliminare. Adesso si aprono, si vede
   cosa contengono e si assegnano: la promessa del sottotitolo, mantenuta. */
.griglia-modelli{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.modello{background:var(--carta);border-radius:22px;box-shadow:var(--ombra);overflow:hidden;display:flex;flex-direction:column}
.mo-apri{display:flex;gap:16px;align-items:flex-start;width:100%;background:none;border:0;text-align:left;font:inherit;color:inherit;padding:20px 20px 14px}
.mo-apri:hover{background:var(--sfondo)}
.mo-num{
  width:54px;height:54px;border-radius:18px;background:var(--viola-chiaro);color:var(--viola-testo);
  display:grid;place-items:center;align-content:center;font-size:20px;font-weight:800;flex:0 0 auto;line-height:1;
}
.mo-num small{font-size:11.5px;font-weight:700;opacity:.8}
.mo-che{min-width:0;flex:1}
.mo-che b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.mo-che > small{display:block;font-size:13px;color:var(--tenue);font-weight:600;margin-top:3px}
.mo-giorni{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.mo-giorni i{background:var(--sfondo);border-radius:99px;padding:4px 10px;font-style:normal;font-size:12px;font-weight:700;color:var(--tenue)}
.mo-tasti{display:flex;gap:9px;padding:0 20px 18px;margin-top:auto}
.mo-tasti .bott{flex:1;min-height:44px}
.mo-giorno{border:1px solid var(--filo);border-radius:16px;padding:14px 16px;margin-top:12px}
.mo-capo{display:flex;align-items:baseline;gap:9px}
.mo-capo b{font-size:15px;font-weight:800}
.mo-capo span{font-size:13px;color:var(--tenue);font-weight:600}
.mo-lista{display:grid;gap:2px;margin-top:10px}
.mo-riga{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--filo);font-size:13.5px;font-weight:600}
.mo-riga:last-child{border-bottom:0}
.mo-riga b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mo-vuoto{margin:10px 0 0;font-size:13px;color:var(--tenue2);font-weight:600}

/* ============ scegliere piu' persone ============
   In modalita' scelta la card non apre piu' la persona: la prende.
   Deve essere ovvio a colpo d'occhio quali sono prese. */
.persona.scegliibile{border:2px solid var(--filo-forte)}
.persona.scegliibile:hover{border-color:var(--viola-testo)}
.persona.presa{border-color:var(--viola-testo);background:var(--viola-chiaro)}
.persona.presa .faccia{background:var(--viola);color:var(--sopra-colore, #fff)}

.barra-scelta{
  position:sticky;bottom:18px;margin-top:22px;display:none;
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--carta);border:2px solid var(--viola);border-radius:20px;
  padding:14px 18px;box-shadow:0 18px 40px -22px rgba(60,40,140,.65);
}
.barra-scelta.aperta{display:flex}
.bs-conto{font-size:15px;font-weight:800}
.bs-azioni{display:flex;gap:10px;flex-wrap:wrap}
.barra-scelta .bott[disabled]{opacity:.45;cursor:not-allowed}

/* ============ prepara la settimana prossima ============
   Il salto si deve leggere in un colpo: il vecchio barrato, il nuovo in grande.
   Le righe che non cambiano restano spente, ma dicono perché. */
.passo-scelta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.ps{
  background:var(--sfondo);border:2px solid transparent;border-radius:16px;padding:12px 10px;
  text-align:left;font:inherit;color:inherit;
}
.ps b{display:block;font-size:14.5px;font-weight:800}
.ps small{display:block;font-size:11.5px;color:var(--tenue);font-weight:600;margin-top:3px;line-height:1.35}
.ps.scelto{border-color:var(--viola-testo);background:var(--viola-chiaro)}
.ps.scelto small{color:var(--viola-testo)}

.prog-elenco{display:grid;gap:2px;max-height:46vh;overflow:auto}
.prog-riga{
  display:grid;grid-template-columns:22px 1fr auto;gap:13px;align-items:center;
  padding:13px 4px;border-bottom:1px solid var(--filo);
}
.prog-riga:last-child{border-bottom:0}
.prog-riga input{width:20px;height:20px;accent-color:var(--viola-testo)}
.prog-vuoto{display:block;width:20px}
.prog-che b{display:block;font-size:14.5px;font-weight:800;line-height:1.3}
.prog-che small{display:block;font-size:12.5px;color:var(--tenue);font-weight:600;margin-top:2px}
.prog-salto{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.prog-salto s{color:var(--tenue2);font-size:13px;font-weight:700;text-decoration-thickness:1px}
.prog-salto b{font-size:16px;font-weight:800;color:var(--viola-testo);margin-left:5px}
.prog-uguale{font-size:13.5px;color:var(--tenue);font-weight:700}
.prog-riga.ferma{opacity:.72}
@media (max-width:620px){
  .passo-scelta{grid-template-columns:1fr}
  .prog-riga{grid-template-columns:22px 1fr;row-gap:4px}
  .prog-salto{grid-column:2;text-align:left}
}

/* la lettera del giorno, nello storico degli allenamenti */
.lettera-giorno{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--viola-chiaro);color:var(--viola-testo);font-size:13px;font-weight:800;
}

/* Pagamenti: due flussi opposti, si devono distinguere a colpo d'occhio */
.capo-soldi{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.capo-soldi .verso{
  font-size:12px;font-weight:800;padding:5px 12px;border-radius:99px;white-space:nowrap;
}
.capo-soldi.esce .verso{background:#FDF2DD;color:#7A5806}
.capo-soldi.entra .verso{background:#E6F7F5;color:#0E6E66}
@media (prefers-color-scheme: dark){
  .capo-soldi.esce .verso{background:#3D2F12;color:#F0C777}
  .capo-soldi.entra .verso{background:#143F3C;color:#6FE3D6}
}

/* ============ le scene: ogni scheda ha la sua, e si sente il cambio ============ */
.schermo{padding:0 !important;overflow:auto}

.scena{
  position:relative;padding:16px 20px 70px;color:#fff;overflow:hidden;
}
.scena::after{
  content:'';position:absolute;inset:0;opacity:.26;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.scena .riga-alta{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.scena .occhiello{font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--su-testata-tenue, rgba(255,255,255,.92))}
/* Il velo era cosi' leggero che le iniziali sopra stavano a 4,16: una
   pastiglia che si vede ma non si legge. */
.av-scena{
  width:44px;height:44px;border-radius:14px;
  background:color-mix(in srgb, var(--su-testata, #fff) 26%, transparent);color:var(--su-testata, #fff);
  border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;
  font-size:13.5px;font-weight:800;flex:0 0 auto;backdrop-filter:blur(6px);
}
button.av-scena{cursor:pointer;font-size:17px}
.titolo-scena{color:var(--su-testata, #fff);
  position:relative;z-index:1;margin:16px 0 0;font-size:33px;font-weight:800;
  letter-spacing:-.025em;line-height:1.06;
}
.numeri-scena{display:flex;gap:24px;position:relative;z-index:1;margin-top:20px;flex-wrap:wrap}
.numeri-scena span{display:block;font-size:11.5px;color:var(--su-testata-tenue, rgba(255,255,255,.92));font-weight:700}
.numeri-scena b{font-size:25px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.numeri-scena b small{font-size:12.5px;font-weight:700;opacity:.92;letter-spacing:0}

/* il corpo sale sopra la scena: due piani veri */
.corpo-scena{
  position:relative;margin-top:-50px;background:var(--sfondo);
  border-radius:28px 28px 0 0;padding:20px 18px 18px;min-height:62vh;
  box-shadow:0 -14px 34px -20px rgba(0,0,0,.45);
}
.maniglia{width:38px;height:4px;border-radius:99px;background:var(--filo-forte);margin:-8px auto 16px}

/* i cinque colori: si capisce dove si è prima di leggere */
/* ---------------------------------------------------------- LE TESTATE
   Erano cinque: viola, grigio-blu, verde acqua, blu e arancio, una per
   scheda. Cinque tinte che non erano di nessuno studio — e addosso a uno
   studio nero e oro facevano sembrare l'app di qualcun altro a ogni scheda.
   Adesso e' UNA SOLA, e i suoi due capi arrivano dal marchio: un allenatore
   diverso avra' i suoi senza che qui dentro cambi niente.

   Dove si capisce in che scheda si e'? Dal titolo, dall'icona accesa in
   fondo e dal contenuto. Il colore diceva la stessa cosa tre volte, e la
   diceva sbagliata. */
.scena-oggi, .scena-scheda, .scena-cibo, .scena-messaggi, .scena-progressi{
  background:
    radial-gradient(120% 90% at 85% -10%, var(--testata-luce, rgba(255,255,255,.18)) 0%,
                    rgba(255,255,255,0) 55%),
    linear-gradient(165deg, var(--testata-a, var(--viola)) 0%,
                            var(--testata-b, var(--viola-cupo, #3A1FA8)) 100%);
}

/* La voce accesa in fondo: un colore solo, quello del marchio, gia' scurito
   o schiarito quanto basta per leggersi sul fondo della barra. Prima cambiava
   con la scheda, ed erano le tinte di sopra: in tema scuro la voce attiva di
   «Scheda» stava a 1,1 di contrasto — accesa e invisibile. */
.barra-giu button.vivo{color:var(--accento, var(--viola-testo))}
@media (prefers-color-scheme: dark){
  .corpo-scena{box-shadow:0 -14px 34px -18px rgba(0,0,0,.8)}
}

/* la vecchia testata non serve più dove c'è la scena */
.corpo-scena > .cima{display:none}

@media (max-width:420px){
  .titolo-scena{color:var(--su-testata, #fff);font-size:29px}
  .numeri-scena{gap:18px}
  .numeri-scena b{font-size:22px}
}


/* ============ il riepilogo di fine allenamento ============ */
.fine{margin:-28px -28px -28px;border-radius:26px;overflow:hidden}
.fine-scena{
  padding:34px 28px 30px;color:#fff;text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(110% 80% at 50% -10%, #8B6BFF 0%, rgba(139,107,255,0) 60%),
    linear-gradient(165deg,var(--viola) 0%, #2E1A86 100%);
}
.fine-scena::after{
  content:'';position:absolute;inset:0;opacity:.3;
  background-image:radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
  mask-image:linear-gradient(180deg,#000,transparent 75%);
}
.fine-et{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.76);position:relative}
.fine-titolo{font-size:34px;font-weight:800;letter-spacing:-.025em;line-height:1.08;margin-top:10px;position:relative}
.fine-record{
  display:inline-block;margin-top:14px;background:#F2B01E;color:#4A2F00;border-radius:99px;
  padding:7px 16px;font-size:13px;font-weight:800;position:relative;
}
.fine-numeri{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filo);
}
.fine-numeri div{background:var(--carta);padding:16px 18px}
.fine-numeri span{display:block;font-size:12px;color:var(--tenue);font-weight:700}
.fine-numeri b{display:block;font-size:28px;font-weight:800;letter-spacing:-.025em;margin-top:3px;font-variant-numeric:tabular-nums}
.fine-numeri b small{font-size:14px;color:var(--tenue);font-weight:700}
.fine-confronto{
  padding:16px 28px;font-size:14px;font-weight:600;color:var(--tenue);background:var(--carta);line-height:1.5;
}
.fine-confronto.su{color:#0E7C72}
.fine-peso{padding:0 28px 18px;font-size:13px;color:var(--tenue2);font-weight:600;background:var(--carta)}
.fine .campo{padding:0 28px}
.fine .in-fondo{padding:0 28px 28px;margin-top:16px;background:var(--carta)}
@media (prefers-color-scheme: dark){ .fine-confronto.su{color:#5BD6C7} }


/* ============ il primo giorno ============ */
.partenza{max-width:640px;margin:0 auto}
.scena-coach{
  color:#fff;border-radius:26px;padding:34px 32px 30px;position:relative;overflow:hidden;margin-bottom:22px;
  background:
    radial-gradient(120% 90% at 85% -10%, #8B6BFF 0%, rgba(139,107,255,0) 55%),
    linear-gradient(165deg,var(--viola) 0%, var(--viola-cupo, #3A1FA8) 100%);
}
.scena-coach::after{
  content:'';position:absolute;inset:0;opacity:.28;
  background-image:radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.scena-coach .occhiello{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.76);position:relative}
.scena-coach h1{font-size:34px;letter-spacing:-.025em;margin:12px 0 0;position:relative}
.scena-coach p{color:rgba(255,255,255,.86);font-size:15px;margin:10px 0 0;max-width:52ch;position:relative;font-weight:500}
.avanzamento-partenza{display:flex;align-items:center;gap:14px;margin-top:22px;position:relative}
.avanzamento-partenza .pista{flex:1;height:8px;background:rgba(255,255,255,.22);border-radius:99px;overflow:hidden}
.avanzamento-partenza .pista i{display:block;height:100%;background:#fff;border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.avanzamento-partenza span{font-size:12.5px;font-weight:800;color:rgba(255,255,255,.9)}

.passi-partenza{display:grid;gap:12px}
.passo-p{
  display:flex;align-items:center;gap:16px;background:var(--carta);border:2px solid transparent;
  border-radius:20px;padding:18px 20px;text-align:left;width:100%;box-shadow:var(--ombra);
  transition:transform .14s ease, border-color .14s ease;
}
.passo-p:hover{transform:translateX(3px)}
.passo-p.ora{border-color:var(--viola-testo)}
.passo-p .num{
  width:38px;height:38px;border-radius:13px;background:var(--sfondo);color:var(--tenue);
  display:grid;place-items:center;font-weight:800;font-size:15px;flex:0 0 auto;
}
.passo-p.ora .num{background:var(--viola);color:var(--sopra-colore, #fff)}
.passo-p.fatto .num{background:var(--buono);color:#fff}
.passo-p .testo{flex:1;min-width:0}
.passo-p b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.passo-p small{color:var(--tenue);font-size:13.5px;font-weight:500}
.passo-p.fatto b{color:var(--tenue)}
.passo-p .freccia{color:var(--filo-forte);font-size:22px;font-weight:800}

.o-prova{display:flex;align-items:center;gap:14px;margin:26px 0 16px;color:var(--tenue2);font-size:13px;font-weight:700}
.o-prova::before,.o-prova::after{content:'';flex:1;height:1px;background:var(--filo)}
.nota-partenza{color:var(--tenue);font-size:13px;margin:12px 0 0;font-weight:500;text-align:center}


/* esercizi a tempo e a distanza */
.modo-et{font-size:12px;color:var(--tenue);font-weight:700;white-space:nowrap}
.cronometro{
  margin-top:16px;background:var(--inchiostro);color:#fff;border-radius:20px;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.cronometro small{color:rgba(255,255,255,.7);font-size:12.5px;display:block;font-weight:700}
.cronometro .t{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cronometro.acceso{background:#0E7C72}
.cronometro .bott{background:#fff;color:var(--inchiostro);border-color:#fff}
@media (prefers-color-scheme: dark){
  .cronometro{background:#2A2742}
  .cronometro.acceso{background:#0E7C72}
}

/* i crediti della libreria esercizi: la licenza li vuole visibili */
.crediti{color:var(--tenue2);font-size:12px;font-weight:500;margin:28px 0 0;padding-top:16px;border-top:1px solid var(--filo);line-height:1.6}
.crediti a{color:var(--viola-testo);font-weight:700;text-decoration:none}
.crediti a:hover{text-decoration:underline}

/* il richiamo del check-in è un bottone: gli angoli vanno rimessi */
.bolla.richiamo{border-radius:24px;padding:20px}

/* ============ correzione: le immagini sbordavano dal loro riquadro ============
   «height:100%» non si applica a un elemento centrato dentro una griglia:
   l'illustrazione restava 512×512 ridotta a 235 e copriva il testo sotto.
   Si ancora al riquadro con position, e si usa «contain» per non tagliare la figura. */
.carta-ese .copertina{position:relative;overflow:hidden;height:168px;padding:0}
.carta-ese .copertina img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.posa{position:relative;overflow:hidden}
.posa img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.posa.conFoto{background:var(--viola-chiaro)}


/* la pagina Esercizi con la libreria grande: serve cercare */
.cerca-esercizi{margin-bottom:20px}
.cerca-esercizi input{
  width:100%;max-width:520px;font:inherit;font-weight:600;border:2px solid var(--filo);
  border-radius:14px;padding:13px 16px;min-height:50px;background:var(--carta);
}
.cerca-esercizi input:focus{border-color:var(--viola-testo);outline:none}
.cerca-esercizi .gruppi{padding:14px 0 0}
.carta-ese[hidden]{display:none}

/* i crediti della banca dati alimenti: la licenza ODbL li vuole visibili */
.crediti-cibo{font-size:11.5px;color:var(--tenue);font-weight:500;line-height:1.5;margin:14px 0 0}
.crediti-cibo a{color:var(--viola-testo);font-weight:700;text-decoration:none}


/* ============ i numeri non si spezzano ============
   «27,60 € al» a capo «mese»: una cifra tagliata in due si legge come un'altra
   cifra. Il numero e la sua unità restano sulla stessa riga, sempre. */
.val{white-space:nowrap}
.val small{white-space:nowrap}
.conto .voce > b, .conto .totale > b{white-space:nowrap}



/* ============ l'invito ============ */
.inv-codice{
  background:linear-gradient(165deg,var(--viola) 0%, var(--viola-cupo, #3A1FA8) 100%);color:var(--sopra-colore, #fff);
  border-radius:20px;padding:22px;text-align:center;
}
.inv-et{font-size:11.5px;font-weight:800;letter-spacing:.16em;color:rgba(255,255,255,.7)}
.inv-codice b{
  display:block;font-size:38px;font-weight:800;letter-spacing:.14em;margin:10px 0 8px;
  font-variant-numeric:tabular-nums;
}
.inv-codice small{display:block;font-size:12.5px;color:rgba(255,255,255,.8);font-weight:500;line-height:1.5}
.inv-link{
  background:var(--sfondo);border:1px solid var(--filo);border-radius:14px;
  padding:14px 16px;font-size:13px;color:var(--tenue);font-weight:600;
  overflow-wrap:anywhere;line-height:1.5;
}
.inv-tasti{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.inv-tasti .bott{width:100%}



/* ============ la porta dello studio ============
   È la prima cosa che vede un allenatore, e per molti sarà anche l'unica se
   non convince: una colonna sola, poche righe, niente da capire. */
/* «Guardala senza accesso» stava sotto la piega su schermi bassi: chi non
   scorre non lo trova, e chi clicca senza vederlo preme il vuoto. La porta
   sta in uno schermo solo. */
.acc-foglio{
  min-height:auto;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:14px;padding:12px 0 32px;
}
.acc-riquadro{
  width:100%;max-width:420px;background:var(--carta);border-radius:24px;
  padding:26px 28px;box-shadow:0 30px 60px -40px rgba(40,30,90,.5);
  border:1px solid var(--filo);
}
.acc-marchio{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--viola-testo)}
.acc-riquadro h1{font-size:25px;margin:12px 0 5px;letter-spacing:-.024em}
.acc-sotto{font-size:14.5px;color:var(--tenue);font-weight:500;line-height:1.5;margin:0 0 16px}
.acc-errore{
  margin:14px 0 0;padding:12px 14px;border-radius:12px;font-size:13.5px;font-weight:600;
  background:#FDECEC;color:#9B2C2C;border:1px solid #F5C6C6;
}
.acc-sotto-tasti{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;justify-content:center}
.acc-link{
  background:none;border:0;color:var(--viola-testo);font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;padding:8px 2px;min-height:40px;
}
.acc-link:hover{text-decoration:underline}
.acc-prova{color:var(--tenue)}
@media (prefers-color-scheme: dark){
  .acc-errore{background:#3A1F20;color:#F3B6B6;border-color:#5B2E2F}
}
@media (max-width:620px){
  .acc-riquadro{padding:28px 22px;border-radius:20px}
  .acc-riquadro h1{font-size:24px}
}


.iv-errore{
  margin:14px 0 0;padding:12px 14px;border-radius:12px;font-size:13.5px;font-weight:600;
  background:#FDECEC;color:#9B2C2C;border:1px solid #F5C6C6;
}
@media (prefers-color-scheme: dark){
  .iv-errore{background:#3A1F20;color:#F3B6B6;border-color:#5B2E2F}
}


/* ---- il viola che si legge, al buio ---- */
@media (prefers-color-scheme: dark){
  .acc-link, .conto .aliq.alta, .inv-codice .inv-et{color:#9B85FF}
  .crediti a{color:#9B85FF}
}
:root[data-theme="dark"] .acc-link,
:root[data-theme="dark"] .conto .aliq.alta{color:#9B85FF}
/* il credito in coda era alto 34 px: è un collegamento, va premuto */
.crediti a{display:inline-block;min-height:44px;line-height:44px}


/* Al buio il viola come testo stava a 4,03: sotto il minimo leggibile.
   Schiarito solo lui; come sfondo dei pulsanti resta quello di prima, o il
   bianco che ci sta sopra diventerebbe illeggibile a sua volta. */
@media (prefers-color-scheme: dark){ :root{ --viola-testo:#E7C45C; } }
:root[data-theme="dark"]{ --viola-testo:#E7C45C; }
:root[data-theme="light"]{ --viola-testo:var(--colore-su-carta, #8A6315); }   /* l oro come scritta non si legge: bronzo */


/* Ultimi quattro punti rimasti sotto soglia al buio: usavano il viola pieno
   scritto a mano invece della variabile. Misurati 4,03 e 4,16 su 4,5. */
@media (prefers-color-scheme: dark){
  .tuo{background:#3A2E7A;color:#D9CFFF}
  .prog-uguale, .tasto-scorciatoia{color:#9B85FF}
}




/* ---- due colori che non avevano una versione per il buio ----
   Erano scritti fissi, pensati sulla carta bianca: al buio il meno dell'acqua
   restava a 2,33 e l'etichetta «Studio», quando è la scheda aperta, a 1,80.
   Le altre schede si leggevano, quindi sembrava a posto: lo era per cinque
   su sei. */
@media (prefers-color-scheme: dark){
  .acqua .bott{border-color:var(--filo-forte);color:var(--inchiostro)}
  .acqua .bott.pieno{background:var(--viola);border-color:var(--viola);color:var(--sopra-colore, #fff)}
}
:root[data-theme="dark"] .acqua .bott{border-color:var(--filo-forte);color:var(--inchiostro)}


.acc-prova{
  display:block;width:100%;margin-top:10px;padding-top:14px;
  border-top:1px solid var(--filo);border-radius:0;
}


/* l'avviso sull'intolleranza, dentro il piano */
.av-allergia{
  display:block;margin-top:6px;padding:7px 10px;border-radius:9px;
  background:#FDF2E2;color:#8A5B00;border:1px solid #F0D9AE;
  font-size:12.5px;font-weight:700;line-height:1.45;
}
@media (prefers-color-scheme: dark){
  .av-allergia{background:#3A2E12;color:#F0C777;border-color:#5B4A20}
}

/* ============ l'app resta un'app, anche girata ============
   Le regole qui sotto erano dentro «max-width:520px»: bastava girare il
   telefono perché sparissero e tornasse la cornice disegnata, con il menu in
   fondo fuori dallo schermo. Adesso dipendono da come si è arrivati, non da
   quanto è larga la finestra. */
html[data-modo="app"], html[data-modo="app"] body{height:100%}
html[data-modo="app"] .tel-pagina{
  min-height:100vh;min-height:-webkit-fill-available;min-height:100dvh;padding:0;
}
html[data-modo="app"] .telefono{
  border:0;border-radius:0;box-shadow:none;
  width:100%;max-width:520px;margin:0 auto;      /* girato resta una colonna */
  height:100vh;height:-webkit-fill-available;height:100dvh;
}
html[data-modo="app"] .stato,
html[data-modo="app"] .maniglia,
html[data-modo="app"] .cambia-faccia{display:none !important}
html[data-modo="app"] .corpo-scena{padding-top:10px}


/* ============ si tocca, non si seleziona ============
   Tenendo premuto su un titolo, sul tempo di recupero o sul menu in fondo
   compariva «Copia», e sulle immagini «Salva immagine»: nessuna app fa così,
   e con le spunte delle serie, che si premono di fretta, capitava di continuo.
   Si blocca sull'interfaccia e si riaccende dove si scrive — perché lì
   selezionare, copiare e incollare devono funzionare come sempre. */
.telefono, .tel-pagina, .app{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
input, textarea, select, [contenteditable="true"],
.bolla-msg, .bolla-msg *{
  -webkit-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}
/* Un messaggio dell'allenatore può contenere un indirizzo o un'indicazione
   lunga: quello si deve poter copiare. */
button, a, .gs, .voto, .sn, .linguetta, .barra-giu button, .bott{
  touch-action:manipulation;
}
img{-webkit-user-drag:none; user-drag:none}

/* l'interruttore del suono, dentro il recupero */
.rp-suono{
  margin-top:18px;background:none;border:0;color:rgba(255,255,255,.75);
  font:inherit;font-size:13px;font-weight:700;padding:12px 18px;min-height:44px;
  border-radius:99px;cursor:pointer;
}
.rp-suono[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#fff}
.rp-suono::before{content:'♪ ';opacity:.8}
.rp-suono[aria-pressed="false"]::before{content:'✕ '}

/* ============ IL TELEFONO GIRATO ============
   Girando lo schermo restava la colonna del verticale in mezzo, con due bande
   vuote ai lati: l'app sembrava non essere stata pensata per quella posizione.
   In orizzontale l'altezza è poca — 375 o 390 px — e la larghezza abbonda:
   il menu si sposta di lato, perché quei 76 px in fondo servono al contenuto,
   e quello che nel verticale sta in colonna qui si mette in due.

   La regola guarda l'altezza, non la larghezza: un telefono girato è basso,
   un computer no. Così un portatile da 1280×800 non prende queste regole. */
@media (orientation: landscape) and (max-height: 520px){

  /* ---- il menu diventa una colonna a sinistra ---- */
  html[data-modo="app"] .telefono{
    max-width:none; flex-direction:row-reverse;   /* il menu finisce a sinistra */
    padding-left:env(safe-area-inset-left, 0px);
    padding-right:env(safe-area-inset-right, 0px);
  }
  .barra-giu{
    grid-template-columns:1fr; grid-auto-rows:min-content;
    align-content:center; gap:2px;
    border-top:0; border-right:1px solid var(--filo);
    width:82px; flex:0 0 82px; height:100%;
    padding:8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .barra-giu button{min-height:46px; font-size:11px; gap:2px; padding:4px 0}
  .barra-giu svg{width:20px; height:20px}
  .schermo{padding:0 14px 12px}
  .corpo-scena > *{max-width:100%}
  .cima{padding:6px 0 10px}
  .cima h2{font-size:20px}

  /* ---- due colonne, dove il contenuto è davvero due cose ---- */
  .due-lati{
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:16px; align-items:start;
  }

  /* La scena colorata in cima si prendeva 270 px dei 390 disponibili: più di
     metà schermo per dire che giorno è. In orizzontale si schiaccia, e il
     titolo si mette in fila con la data invece che sotto. */
  /* Il corpo bianco risale di 50 px per sovrapporsi alla scena colorata:
     è l'effetto che fa sembrare la pagina una carta sopra l'altra. Avendo
     schiacciato la scena, quei 50 px si mangiavano il titolo — «Il tuo
     diario» finiva sotto i riquadri. Lo spazio sotto il titolo e la risalita
     vanno cambiati insieme, o uno copre l'altro. */
  .scena{padding:10px 18px 34px}
  .corpo-scena{margin-top:-22px; border-radius:20px 20px 0 0; padding:14px 16px 16px;
               min-height:0}
  .riga-alta{padding-bottom:2px}
  .occhiello{font-size:11.5px}
  .titolo-scena{color:var(--su-testata, #fff);font-size:19px; margin-top:2px}
  .sotto-scena{font-size:12.5px; margin-top:2px}
  /* I numeri di riepilogo nella scena finivano tagliati sotto la carta, e
     dicevano le stesse cose che si leggono appena sotto: «830 kcal che
     restano» è già nell'anello. Su uno schermo alto 390 px lo spazio va a
     quello che non è scritto da nessun'altra parte. */
  .numeri-scena{display:none}

  /* Con un blocco solo la seconda colonna restava vuota, e metà schermo con
     niente dentro sembra un errore. Le colonne si fanno solo se c'è roba per
     due: «auto-fit» lascia che l'unico blocco si prenda tutto. */
  /* Con una griglia le righe si allineano fra loro: accanto a un'immagine
     alta, un blocco di due righe lasciava sotto di sé un buco di 110 px.
     Le colonne che scorrono non hanno righe: il contenuto riempie la prima
     e passa alla seconda, come su un giornale. */
  .corpo-scena{
    display:block; columns:2; column-gap:18px;
  }
  .corpo-scena > *{
    break-inside:avoid; page-break-inside:avoid;   /* niente blocchi spezzati */
    margin-bottom:12px;
  }


  .corpo-scena > .sezione-et{column-span:all; margin-top:4px}

  /* L'illustrazione dell'esercizio è alta 250 px: su uno schermo di 390 si
     prendeva tutto, e accanto restava un buco con dentro due righe. Qui si
     riduce, e quello che serve mentre ci si allena — carico, serie, record —
     sta tutto nella metà di sinistra senza scorrere. */
  /* L'illustrazione dell'esercizio è alta 250 px e non ha una classe sua: su
     uno schermo di 390 si prendeva tutto, e accanto restava un buco con dentro
     due righe. Si limita per quello che è — un'immagine dentro lo schermo —
     non per come si chiama. */
  .posa-grande{height:150px; border-radius:18px; padding:10px}
  .schermo img{max-height:160px; width:auto; max-width:100%; object-fit:contain}
  .schermo .posa img, .schermo .dv-foto{max-height:none}

  /* l'esercizio in corso: a sinistra come si fa, a destra cosa si è fatto */
  .anelli{gap:14px}
  .anello-solo{width:104px; height:104px}
  .macro-barre{margin-top:14px; padding-top:12px}

  /* In due colonne il campo per scrivere finiva in alto a destra, staccato
     dalla conversazione: in nessuna app di messaggi è così, e con la tastiera
     aperta in orizzontale lo spazio è pochissimo. Una colonna sola, larga,
     col campo sotto, dove lo cerca il pollice. */
  body[data-scheda="messaggi"] .corpo-scena{columns:1}
  .chat{max-height:none}
  .scrivi{
    position:sticky; bottom:0; background:var(--sfondo);
    padding-bottom:6px; display:flex; gap:8px; align-items:center;
  }
  .scrivi input, .scrivi textarea{flex:1; min-width:0}
  .scrivi button{flex:0 0 auto}

  /* il recupero a tutto schermo: in orizzontale il numero sta di fianco */
  .rp-dentro{flex-direction:row; align-items:center; gap:24px}
  .rp-anello{width:150px; height:150px}
  .rp-tasti{flex-direction:column}
}

/* ============ LE SCENE, COL MARCHIO DI UNO STUDIO ============
   Le cinque intestazioni colorate — viola, verde per il cibo, blu, arancione —
   sono un buon segnale di «dove sono». Ma sono i colori di Stacco: addosso a
   uno studio nero e oro diventano cinque colori che non c'entrano niente.

   Col marchio acceso restano cinque, ma nella sua tavolozza: lo stesso fondo,
   e un alone del suo colore che cambia posizione e forza da una sezione
   all'altra. Si riconosce ancora dove si è, senza che compaia un verde che
   nessuno ha scelto. */
/* Erano sei, una per sezione, con l'alone del colore spostato ogni volta.
   Adesso e' una sola: stessa testata dappertutto, nera con il filo d'oro
   dello studio. Il colore non deve dire in che scheda sono — lo dicono il
   titolo e l'icona accesa — deve dire di chi e' l'app. */
html[data-marchio="scuro"] .scena,
html[data-marchio="scuro"] .scena-coach{
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--viola) 30%, transparent) 0%, transparent 56%),
    linear-gradient(165deg, color-mix(in srgb, var(--viola) 9%, var(--carta)) 0%, var(--sfondo) 100%);
  border-bottom:1px solid color-mix(in srgb, var(--viola) 45%, transparent);
}

/* La scena resta scura anche col marchio, quindi quello che ci sta sopra resta
   chiaro: i veli bianchi e il testo sopra di loro non cambiano. È il motivo per
   cui qui NON si usa «--sopra-colore», che è pensato per il colore pieno. */
/* Il colore di quello che sta sulla testata lo decide il marchio: bianco su
   una testata scura, l'inchiostro dello studio su una chiara. Era «#fff»
   fisso, e su una testata crema il titolo spariva — 2,1 di contrasto. */
/* vale anche senza marchio nel database: il vestito di base e' gia' suo */
.scena, .scena *{color:var(--su-testata, #fff)}
html[data-marchio] .scena,
html[data-marchio] .scena *{color:var(--su-testata, #fff)}
html[data-marchio] .titolo-scena{color:var(--su-testata, #fff);color:var(--su-testata, #fff)}
html[data-marchio] .occhiello,
html[data-marchio] .sotto-scena{color:var(--su-testata-tenue, rgba(255,255,255,.82))}
/* la riga che chiude la testata: su quella chiara e' l'unico oro che si vede,
   ed e' li' che deve stare — non sotto un titolo */
.scena{ border-bottom:2px solid var(--filo-testata, transparent); }
html[data-marchio="chiaro"] .scena{
  border-bottom:2px solid var(--filo-testata, var(--viola));
}
/* i veli bianchi delle pastiglie sulla testata chiara diventano scuri */
html[data-marchio="chiaro"] .av-scena{
  background:color-mix(in srgb, var(--inchiostro) 8%, transparent);
  border-color:color-mix(in srgb, var(--inchiostro) 16%, transparent);
}

/* la barra in fondo segue la sezione: col marchio, il colore è il suo */
/* Era «--viola» pieno: l'oro su una barra chiara sta a 2,1 e la voce accesa
   si legge peggio di quelle spente. «--accento» e' lo stesso colore gia'
   portato a 4,5 sul fondo che ha sotto. */
html[data-marchio="scuro"] .barra-giu button.vivo{color:var(--accento, var(--viola)) !important}


/* ============ IL TEMA SCURO DI UNO STUDIO, NON DEL TELEFONO ============
   Tutto il tema scuro dell'app stava dentro «prefers-color-scheme: dark»,
   cioe' dipendeva da come ha impostato il telefono chi guarda. Uno studio che
   sceglie il tema scuro prendeva il fondo nero e si teneva i testi del tema
   chiaro: su un telefono impostato in chiaro restavano un verde a 3,17 e un
   grigio-viola a 2,0, e nessun errore lo segnalava.
   Qui sotto le stesse regole valgono anche quando e' lo STUDIO a chiedere il
   tema scuro. Sono ricopiate da quei blocchi, non riscritte a mano. */
html[data-marchio="scuro"]:root:not([data-theme="light"]){--sfondo:#0B0B0D; --carta:#17150F; --inchiostro:#F2EEE6;
    --tenue:#A39D90; --tenue2:#8D8779;
    --filo:var(--carta); --filo-forte:#3E3828;
    --grave:#FF8178; --grave-velo:#36201F; --su-grave:#2A0C0A;
    /* Era #7C62FF: su bianco 4,16 e su nero 4,43 — sotto soglia in tutti e
       due i versi, quindi nessun testo ci stava bene sopra. Il pieno si
       scurisce (bianco 5,08) e per le SCRITTE viola si schiarisce (5,07
       sulla carta scura): sono due mestieri diversi e due colori diversi. */
    --viola:#D4AF37; --viola-chiaro:#2A2214;
    --viola-testo:#E7C45C; --accento:#E7C45C;
    --colore-su-carta:#8A6315;   /* i pulsanti chiari restano su fondo bianco */
    --testata-a:#241F14; --testata-b:#0B0B0D;
    --testata-luce:rgba(212,175,55,.30);
    --su-testata:#FFFFFF; --su-testata-tenue:rgba(255,255,255,.82);
    --filo-testata:#D4AF37;
    --sopra-colore:#0B0B0D;
    --ombra:0 12px 30px -18px rgba(0,0,0,.8);}
html[data-marchio="scuro"]:root:not([data-theme="light"]) .acqua{background:#10303D;border-color:#1B4A5C}
html[data-marchio="scuro"]:root:not([data-theme="light"]) .acqua b{color:#8FD6EE}
html[data-marchio="scuro"]:root:not([data-theme="light"]) .acqua .quanti{color:var(--tenue) !important}
html[data-marchio="scuro"]:root:not([data-theme="light"]) .bicchieri i{background:var(--viola-chiaro)}
html[data-marchio="scuro"]:root{--sfondo:#0B0B0D;
    --carta:#17150F;
    --inchiostro:#F2EEE6;
    --tenue:#A39D90;
    --tenue2:#8D8779;
    --filo:var(--carta);
    --filo-forte:#3E3828;
    --viola:#D4AF37;
    --viola-scuro:#B8952C;
    --viola-chiaro:#2A2214;
    --viola-testo:#E7C45C; --accento:#E7C45C;
    --colore-su-carta:#8A6315; --sopra-colore:#0B0B0D;
    --buono:#2BC4B4;
    --ombra:0 10px 26px -16px rgba(0,0,0,.8);
    --ombra-alta:0 18px 40px -20px rgba(0,0,0,.9);}
html[data-marchio="scuro"] .telefono{border-color:#000}
html[data-marchio="scuro"] .oggi-card .bott{background:#fff;color:#8A6315}
html[data-marchio="scuro"] .oggi-card .bott:hover{background:#EDEAFC;color:#2E2080}
html[data-marchio="scuro"] .serie-riga.fatta .campo{background:#143F3C;color:#6FE3D6}
html[data-marchio="scuro"] .record{background:#143F3C;color:#6FE3D6}
html[data-marchio="scuro"] .avviso{background:var(--viola-chiaro);color:var(--su-viola-chiaro, var(--su-viola-chiaro, #CFC6FF))}
html[data-marchio="scuro"] .avviso-tocca:hover{background:var(--filo)}
html[data-marchio="scuro"] .tecnica.evid{background:#3D2F12;color:#F0C777}
html[data-marchio="scuro"] .salvato{background:var(--carta);color:#fff}
html[data-marchio="scuro"] .velo{background:rgba(8,7,16,.65)}
html[data-marchio="scuro"] table.esercizi tr.sposta:hover{background:var(--carta)}
html[data-marchio="scuro"] .bicchieri i{background:var(--viola-chiaro)}
html[data-marchio="scuro"] .bicchieri i.pieno{background:linear-gradient(180deg,#56B9DC 0%, #1B90BD 100%)}
html[data-marchio="scuro"] .segnale.caldo .ico{background:#3D2F12;color:#F0C777}
html[data-marchio="scuro"] .punteggio.alto{background:#143F3C;color:#6FE3D6}
html[data-marchio="scuro"] .punteggio.medio{background:#3D2F12;color:#F0C777}
html[data-marchio="scuro"] .punteggio.basso{background:#3F1A15;color:#F3A99E}

html[data-marchio="scuro"] .oggi-card{background:var(--viola)}
html[data-marchio="scuro"] .oggi-card .dettagli{color:color-mix(in srgb, var(--sopra-colore, #fff) 90%, transparent)}
html[data-marchio="scuro"] .oggi-card .et{color:color-mix(in srgb, var(--sopra-colore, #fff) 84%, transparent)}
html[data-marchio="scuro"] .striscia{background:var(--viola)}
html[data-marchio="scuro"] .striscia span{color:rgba(255,255,255,.88)}
html[data-marchio="scuro"] .bolla-msg.mia{background:var(--viola)}
html[data-marchio="scuro"] .menu a.vivo{background:var(--viola)}
html[data-marchio="scuro"] .gs.si, html[data-marchio="scuro"] .giorno[aria-selected="true"], html[data-marchio="scuro"] .gruppo[aria-pressed="true"], html[data-marchio="scuro"] .voto.scelto, html[data-marchio="scuro"] .sn.scelto, html[data-marchio="scuro"] .linguetta[aria-selected="true"]{background:var(--viola)}
html[data-marchio="scuro"] .bott.pieno{background:var(--viola);border-color:var(--viola)}
html[data-marchio="scuro"] /* «Comincia» sta sopra una carta già viola, html[data-marchio="scuro"] quindi è bianco col testo viola.
     Questa regola gli rendeva viola anche il fondo, html[data-marchio="scuro"] lasciandogli il testo
     viola: il pulsante principale dell'app spariva, html[data-marchio="scuro"] contrasto 1, html[data-marchio="scuro"] 71. Sulle
     carte colorate resta bianco, html[data-marchio="scuro"] che è anche il modo in cui si vede di più. */
  .oggi-card .bott.pieno, html[data-marchio="scuro"] .rp-tasti .bott.pieno, html[data-marchio="scuro"] .proposta .bott.pieno{background:#fff;border-color:#fff;color:var(--colore-su-carta, #2E1C7A);}
html[data-marchio="scuro"] .bott.pieno:hover{background:var(--viola-scuro);border-color:var(--viola-scuro)}
html[data-marchio="scuro"] .faccia{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .menu .pastiglia{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .bollino{background:var(--viola)}
html[data-marchio="scuro"] .tondo{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .voce .piu{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .aggiungi{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .gruppo:hover{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .ico-grande{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .tecnica{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .commento-video{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .bolla-msg.sua .commento-video{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .indietro:hover, html[data-marchio="scuro"] .bott:hover{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .richiamo .vai-avanti{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .contatore button{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .ascolto.attivo{color:var(--su-viola-chiaro, #E7C45C)}
html[data-marchio="scuro"] .riga-misura small.buona{color:#5BD6C7}
html[data-marchio="scuro"] .riga-misura small.calo{color:#F0C777}
html[data-marchio="scuro"] .posa{color:#B9B2A2}
html[data-marchio="scuro"]:root{--tenue:#A39D90;}
html[data-marchio="scuro"] .segno{color:#C4C0DF}
html[data-marchio="scuro"]:root:not([data-theme="light"]) .nota-legge{background:#3D2F12;border-left-color:var(--attenzione)}
html[data-marchio="scuro"]:root:not([data-theme="light"]) .nota-legge b{color:#F0C777}
html[data-marchio="scuro"]:root:not([data-theme="light"]) .nota-legge p{color:#D6B271}
html[data-marchio="scuro"] .capo-soldi.esce .verso{background:#3D2F12;color:#F0C777}
html[data-marchio="scuro"] .capo-soldi.entra .verso{background:#143F3C;color:#6FE3D6}
html[data-marchio="scuro"] body[data-scheda="cibo"] .barra-giu button.vivo{color:#5BD6C7}
html[data-marchio="scuro"] body[data-scheda="messaggi"] .barra-giu button.vivo{color:#9AA6FF}
html[data-marchio="scuro"] body[data-scheda="progressi"] .barra-giu button.vivo{color:#F0B45F}
html[data-marchio="scuro"] .corpo-scena{box-shadow:0 -14px 34px -18px rgba(0,0,0,.8)}
html[data-marchio="scuro"] .fine-confronto.su{color:#5BD6C7}
html[data-marchio="scuro"] .cronometro{background:var(--carta)}
html[data-marchio="scuro"] .cronometro.acceso{background:#0E7C72}
html[data-marchio="scuro"] .acc-errore{background:#3A1F20;color:#F3B6B6;border-color:#5B2E2F}
html[data-marchio="scuro"] .iv-errore{background:#3A1F20;color:#F3B6B6;border-color:#5B2E2F}
html[data-marchio="scuro"] .acc-link, html[data-marchio="scuro"] .conto .aliq.alta, html[data-marchio="scuro"] .inv-codice .inv-et{color:#9B85FF}
html[data-marchio="scuro"] .crediti a{color:#9B85FF}
html[data-marchio="scuro"]:root{--viola-testo:#E7C45C;}
html[data-marchio="scuro"] .tuo{background:#3A2E7A;color:#D9CFFF}
html[data-marchio="scuro"] .prog-uguale, html[data-marchio="scuro"] .tasto-scorciatoia{color:#9B85FF}
html[data-marchio="scuro"] .acqua .bott{border-color:#2A5F75;color:#5CC2E6}
html[data-marchio="scuro"] .acqua .bott.pieno{background:var(--viola);border-color:var(--viola);color:var(--sopra-colore, #fff)}
html[data-marchio="scuro"] .av-allergia{background:#3A2E12;color:#F0C777;border-color:#5B4A20}

/* Due colori che nessun blocco copriva, trovati misurando col marchio acceso. */

/* La barretta del giorno di oggi e' dipinta col colore dello studio: sopra
   l'oro la sua etichetta bianca sbiadita stava a 1,76. */
.giorno.oggi small, .giorno[aria-current] small{
  color:color-mix(in srgb, var(--sopra-colore, #fff) 78%, transparent);
}

/* L'azzurro dell'acqua e' un colore suo e resta: ma su una carta scura
   spariva (2,23). In tema scuro si schiarisce, senza diventare un altro colore. */
html[data-marchio="scuro"] .acqua b,
html[data-marchio="scuro"] .acqua .bott{ color:#7FD3F0; }
html[data-marchio="scuro"] .acqua .bott{ border-color:#2C5B6E; }

/* Gli ultimi due, trovati misurando. */
/* La barretta del giorno scelto e' dipinta col colore dello studio: sopra
   l'oro la sua etichetta bianca sbiadita stava a 1,76 su 4,5. */
/* Vale anche senza marchio nel database, adesso che il vestito di base e'
   gia' oro: la regola valeva solo con «data-marchio» addosso. */
.giorno[aria-selected="true"] small,
html[data-marchio] .giorno[aria-selected="true"] small{
  color:color-mix(in srgb, var(--sopra-colore, #fff) 82%, transparent);
}
/* la scorciatoia da tastiera accanto a «Indietro» */
html[data-marchio="scuro"] .prog-uguale,
html[data-marchio="scuro"] .tasto-scorciatoia{ color:var(--su-viola-chiaro, #9B85FF); }

/* l'ultimo viola di Stacco: i collegamenti della scheda accesso. */
html[data-marchio="scuro"] .acc-link,
html[data-marchio="scuro"] .conto .aliq.alta,
html[data-marchio="scuro"] .inv-codice .inv-et{ color:var(--su-viola-chiaro, #9B85FF); }
html[data-marchio="scuro"] .acc-link{ border-top-color:var(--filo); }

/* Questi stanno su una CARTA, non sul velo: serve l'accento calcolato per lei.
   Con «:root» in piu' per passare davanti alle regole del tema del telefono,
   che hanno la stessa forza e arrivano prima. */
html[data-marchio="scuro"]:root .acc-link,
html[data-marchio="scuro"]:root .conto .aliq.alta,
html[data-marchio="scuro"]:root .inv-codice .inv-et,
html[data-marchio="scuro"]:root .prog-uguale,
html[data-marchio="scuro"]:root .tasto-scorciatoia{ color:var(--accento, #9B85FF); }

/* ============ GLI ORARI DELL'ALLENATORE ============ */
.riga-interruttore{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:14px 16px;border:1px solid var(--filo);border-radius:14px;margin:4px 0 18px;
  background:var(--sfondo);cursor:pointer;
}
.riga-interruttore b{display:block;font-size:14.5px}
.riga-interruttore small{display:block;font-size:12.5px;color:var(--tenue);
  font-weight:500;line-height:1.5;margin-top:3px}
.riga-interruttore input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--viola)}

#or-giorni{display:grid;gap:2px;margin-bottom:20px}
.giorno-orari{display:grid;grid-template-columns:minmax(96px,1fr) minmax(0,2.4fr);
  gap:12px;align-items:start;padding:9px 0;border-bottom:1px solid var(--filo)}
.giorno-orari:last-child{border-bottom:0}
.go-testa{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:5px}
.go-testa b{font-size:14px;text-transform:capitalize}
/* senza «nowrap» su mercoledi e domenica il pulsante andava a capo
   e diventava due righe: «+» sopra e «fascia» sotto. */
.bott.piccolo{min-height:30px;padding:0 10px;font-size:12px;border-radius:9px;
  white-space:nowrap;flex:0 0 auto}
.go-testa b{min-width:0;overflow-wrap:anywhere}
.go-fasce{display:grid;gap:7px}
.fascia{display:flex;align-items:center;gap:7px}
.fascia input[type="time"]{
  min-height:40px;padding:0 9px;border:1px solid var(--filo-forte);border-radius:10px;
  background:var(--carta);color:var(--inchiostro);font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;width:100%;min-width:0;
}
.fascia span{color:var(--tenue2);flex:0 0 auto}
.fascia .piu{flex:0 0 auto;background:none;border:0;color:var(--tenue2);
  font-size:19px;line-height:1;cursor:pointer;padding:0 4px;min-height:40px}
.fascia .piu:hover{color:var(--attenzione)}
.go-niente{color:var(--tenue2);font-size:13px;font-weight:600;padding-top:9px;display:block}

.go-conto{font-size:13.5px;font-weight:600;color:var(--tenue);margin:0 0 16px}
/* una fascia storta non e' un allarme rosso: e' una cosa da sistemare */
.go-conto.storto{color:var(--attenzione)}

/* sul telefono i sette giorni stanno uno sopra l'altro */
@media (max-width:560px){
  .giorno-orari{grid-template-columns:1fr;gap:6px;padding:11px 0}
  .go-testa{padding-top:0}
}

/* ============ CHIEDERE UN'ORA, DAL TELEFONO ============ */
.pr-tipi{display:grid;gap:8px;margin-bottom:16px}
.pr-tipo{
  text-align:left;padding:12px 14px;border:1.5px solid var(--filo);border-radius:14px;
  background:var(--carta);color:var(--inchiostro);cursor:pointer;min-height:56px;
}
.pr-tipo b{display:block;font-size:14.5px}
.pr-tipo small{display:block;font-size:12.5px;color:var(--tenue);font-weight:600;margin-top:2px}
/* lo scelto si distingue dal bordo e dal fondo, non solo dal colore del testo */
.pr-tipo.scelto{border-color:var(--viola);background:var(--viola-chiaro)}
.pr-tipo.scelto b{color:var(--su-viola-chiaro, var(--viola-testo))}
.pr-tipo.scelto small{color:var(--su-viola-chiaro, var(--viola-testo));opacity:.85}

/* i giorni scorrono di lato: quattordici non ci stanno su uno schermo */
.pr-giorni{
  display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.pr-giorno{
  flex:0 0 auto;width:58px;padding:9px 0;border:1.5px solid var(--filo);border-radius:14px;
  background:var(--carta);color:var(--inchiostro);cursor:pointer;scroll-snap-align:start;
  display:grid;gap:1px;justify-items:center;min-height:68px;
}
.pr-giorno small{font-size:11px;color:var(--tenue);font-weight:700;text-transform:lowercase}
.pr-giorno b{font-size:19px;font-variant-numeric:tabular-nums;line-height:1.1}
.pr-giorno i{font-size:11.5px;font-style:normal;color:var(--tenue2);font-weight:600}
.pr-giorno.scelto{border-color:var(--viola);background:var(--viola);color:var(--sopra-colore,#fff)}
.pr-giorno.scelto small, .pr-giorno.scelto i{color:var(--sopra-colore,#fff);opacity:.82}

.pr-ore{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin-top:4px}
.pr-ora{
  min-height:46px;border:1.5px solid var(--filo-forte);border-radius:12px;
  background:var(--carta);color:var(--inchiostro);font-size:14.5px;font-weight:700;
  font-variant-numeric:tabular-nums;cursor:pointer;
}
.pr-ora:hover{border-color:var(--viola);color:var(--viola-testo)}
.pr-niente{font-size:13.5px;color:var(--tenue);font-weight:500;line-height:1.55;margin:4px 0 0}

/* le richieste gia' fatte, in cima */
.miei-app{display:grid;gap:8px;margin:12px 0 4px}
.mio-app{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--filo);border-radius:12px;background:var(--sfondo)}
.ma-quando{flex:1;min-width:0}
.ma-quando b{display:block;font-size:13.5px}
.ma-quando small{display:block;font-size:11.5px;color:var(--tenue);font-weight:600;margin-top:1px}
.mio-app .piu{background:none;border:0;color:var(--tenue2);font-size:19px;cursor:pointer;
  padding:0 2px;min-height:34px;flex:0 0 auto}
.mio-app .piu:hover{color:var(--attenzione)}

/* ============ LA FINE DEL PERCORSO ============ */
.fine-perc{display:grid;gap:10px;margin-bottom:16px;padding:18px 20px}
.fine-perc b{font-size:16.5px;line-height:1.3}
.fine-perc .fp-nome{color:var(--viola-testo)}
.fine-perc p{margin:0;font-size:13.5px;color:var(--tenue);font-weight:500;line-height:1.55}
.fine-perc .bott{width:100%}
/* «ho finito» e «mi manca un allenamento» non sono la stessa cosa:
   il primo e' pieno, il secondo no */
.fine-perc .bott + .bott{margin-top:-2px}

/* Il percorso chiuso e' un traguardo, non un guasto: il bordo prende il
   colore dello studio, non quello dell'allarme. */
.fine-perc.chiuso{
  border:1.5px solid var(--viola);
  background:linear-gradient(170deg, var(--viola-chiaro) 0%, var(--carta) 72%);
}
.fine-perc.chiuso b{color:var(--su-viola-chiaro, var(--viola-testo))}
/* quando la call e' gia' presa non c'e' piu' niente da fare: si abbassa la voce */
.fine-perc.fatta{border:1px solid var(--filo);background:var(--sfondo)}
.fine-perc.fatta b{font-size:15px}

/* Il corpo chiaro si ferma a 62vh: con poco contenuto — la scheda chiusa ne
   ha pochissimo — sotto restava una fascia del colore della scena, come se la
   pagina fosse finita male. Qui prende tutto lo spazio che avanza fino alla
   barra. */
.schermo:has(> .corpo-scena){display:flex;flex-direction:column}
/* «1 1 auto» voleva dire «cresci», e invece diceva anche «restringiti»: in un
   contenitore che scorre il corpo veniva SCHIACCIATO all altezza della
   finestra — 614 px con dentro 1778 px di roba — e sotto spuntava il colore
   della testata al posto dello sfondo. Lo stesso succedeva alla testata, che
   accorciata finiva sotto la carta e si portava via titolo, sottotitolo e
   numeri. «0» al posto del secondo numero: cresce, non si stringe. */
.schermo > .corpo-scena{flex:1 0 auto}
.schermo > .scena{flex:0 0 auto}

/* ============ CHI HA CHIUSO IL PERCORSO (lato allenatore) ============ */
.chiusi{
  border:1px solid var(--filo-forte);border-radius:18px;background:var(--carta);
  padding:16px 18px;margin-bottom:20px;
}
.ch-testa{margin-bottom:12px}
.ch-testa b{display:block;font-size:15.5px}
.ch-testa small{display:block;font-size:12.5px;color:var(--tenue);font-weight:600;margin-top:2px}
.ch-riga{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-top:1px solid var(--filo);
}
.ch-chi{flex:1;min-width:0}
.ch-chi b{display:block;font-size:14px}
.ch-chi small{display:block;font-size:12px;color:var(--tenue);font-weight:600;margin-top:1px}
.ch-stato{
  font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:99px;
  white-space:nowrap;flex:0 0 auto;
}
/* Il colore dice la verita': chi aspetta e' un richiamo, chi ha gia' la data
   non e' un problema. Un verde su «non chiesta» direbbe una bugia. */
.ch-riga.ch-attesa .ch-stato{background:color-mix(in srgb, var(--attenzione) 16%, transparent);
  color:var(--attenzione)}
.ch-riga.ch-datare .ch-stato{background:var(--viola-chiaro);color:var(--su-viola-chiaro, var(--viola-testo))}
.ch-riga.ch-fissata .ch-stato{background:color-mix(in srgb, var(--buono) 15%, transparent);
  color:var(--buono)}
@media (max-width:560px){
  .ch-riga{flex-wrap:wrap}
  .ch-riga .posa{order:1}
  .ch-chi{order:2;flex:1 1 60%}
  .ch-stato{order:4}
  .ch-riga .bott{order:3;margin-left:auto}
}

.ch-tt{display:flex;align-items:center;justify-content:space-between;gap:10px}


/* Una griglia invece del flex: lo spazio e' assegnato, non conteso, e le
   colonne restano allineate fra una riga e l'altra. */
.ch-riga{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;column-gap:12px;
}
@media (max-width:620px){
  .ch-riga{grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px}
  .ch-riga .bott{grid-column:3;grid-row:2}
  .ch-chi{grid-column:2;grid-row:1}
  .ch-stato{grid-column:2;grid-row:2;justify-self:start}
}


/* ============ LE TECNICHE DI INTENSITA' ============ */
#tec-elenco{display:grid;gap:14px;margin:4px 0 18px}
.tec-riga{border:1px solid var(--filo);border-radius:14px;padding:14px 16px;background:var(--sfondo)}
.tec-capo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tec-on{display:flex;align-items:center;gap:9px;cursor:pointer;min-width:0}
.tec-on input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--viola)}
.tec-on b{font-size:14.5px}
.tec-sigla{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--tenue2);
  border:1px solid var(--filo-forte);border-radius:6px;padding:1px 6px}
/* «da scrivere» e' una cosa che manca, non un errore: arancio, non rosso */
.tec-manca{font-size:11.5px;font-weight:800;color:var(--attenzione);white-space:nowrap;
  background:color-mix(in srgb, var(--attenzione) 14%, transparent);padding:3px 9px;border-radius:99px}
.tec-ok{font-size:11.5px;font-weight:800;color:var(--buono);white-space:nowrap;
  background:color-mix(in srgb, var(--buono) 13%, transparent);padding:3px 9px;border-radius:99px}
.tec-riga.manca{border-color:color-mix(in srgb, var(--attenzione) 40%, transparent)}
.tec-nota{margin:8px 0 10px;font-size:12.5px;color:var(--tenue);font-weight:500;line-height:1.5}
.tec-riga textarea{width:100%;min-height:68px;padding:10px 12px;border:1px solid var(--filo-forte);
  border-radius:11px;background:var(--carta);color:var(--inchiostro);font:inherit;font-size:13.5px;
  line-height:1.55;resize:vertical}

/* come la vede chi si allena */
.tec-cl{border-left:3px solid var(--viola);padding:8px 0 8px 12px;margin:10px 0}
.tec-cl-nome{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--viola-testo)}
.tec-cl p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--inchiostro);font-weight:500}
/* senza la spiegazione dell'allenatore si abbassa la voce e si dice di chiedere */
.tec-cl.muta{border-left-color:var(--filo-forte)}
.tec-cl.muta .tec-cl-nome{color:var(--tenue)}
.tec-cl-chiedi{color:var(--tenue) !important;font-weight:500}
/* il nome e la sigla si scrivono: sono suoi, non nostri */
.tec-capo{align-items:center}
.tec-nome{flex:1 1 160px;min-width:0;min-height:36px;padding:0 10px;font-size:14.5px;
  font-weight:700;border:1px solid transparent;border-radius:9px;background:transparent;
  color:var(--inchiostro)}
.tec-nome:hover{border-color:var(--filo)}
.tec-nome:focus{border-color:var(--viola);background:var(--carta);outline:none}
.tec-sg{width:76px;flex:0 0 auto;min-height:36px;padding:0 8px;font-size:11.5px;font-weight:800;
  letter-spacing:.05em;text-align:center;border:1px solid var(--filo);border-radius:7px;
  background:transparent;color:var(--tenue2);text-transform:uppercase}
.tec-sg:focus{border-color:var(--viola);background:var(--carta);color:var(--inchiostro);outline:none}

/* ============ IL CODICE SCONTO ============ */
.sconto .sc-nota{margin:6px 0 12px;font-size:13.5px;color:var(--tenue);font-weight:500;line-height:1.55}
.sc-codice{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:13px;
  background:var(--sfondo);border:1px dashed var(--filo-forte);flex-wrap:wrap}
.sc-dove{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tenue2);flex:0 0 auto}
.sc-codice code{flex:1;min-width:0;font-family:inherit;font-size:19px;font-weight:800;
  letter-spacing:.09em;color:var(--viola-testo);word-break:break-all;
  -webkit-user-select:all;user-select:all}
.sc-codice .bott{flex:0 0 auto}

.campo input.storto{border-color:var(--attenzione)}

/* ---------------------------------------------- cancellare il proprio account
   Il rosso sta solo qui dentro, e solo sulla cosa che non si disfa. Il pulsante
   che apre la finestra e' tenue come gli altri: a spaventare dev'essere la
   conferma, non il menu. */
.canc-numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 16px}
.canc-numeri div{background:var(--grave-velo);border-radius:14px;padding:12px 8px;text-align:center}
.canc-numeri b{display:block;font-size:22px;color:var(--grave);line-height:1.1}
.canc-numeri span{display:block;font-size:11.5px;color:var(--tenue);font-weight:600;margin-top:4px}
.canc-resta{font-size:13px;color:var(--tenue);font-weight:500;line-height:1.55;margin:0 0 14px}
.canc-scrivi{width:100%;padding:13px 14px;font:inherit;font-size:16px;
  border:2px solid var(--filo-forte);border-radius:14px;background:var(--carta);
  color:var(--inchiostro);text-align:center;letter-spacing:.06em}
.canc-scrivi:focus{outline:none;border-color:var(--grave)}
.bott.grave{background:var(--grave);border-color:var(--grave);color:var(--su-grave)}
.bott.grave[disabled]{opacity:.4}

/* ---------------------------------------------- la pagina dell invito ----
   «hidden» da solo non basta: la barra e una griglia, e display vince
   sull attributo. Senza questa riga restava li, e da li si entrava nella
   demo con i dati di un altra persona. */
.barra-giu[hidden]{display:none !important}

.iv-consenso{
  display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;
  font-size:13px;line-height:1.5;color:var(--tenue);font-weight:500;cursor:pointer;
}
.iv-consenso input{
  width:22px;height:22px;flex:0 0 auto;margin-top:1px;accent-color:var(--viola);
}
.iv-consenso i{display:block;font-style:italic;color:var(--tenue2);font-size:12px;margin-top:2px}

/* ============================================================================
   LO SCURO CHE SCEGLIE LA PERSONA, NON IL TELEFONO

   Tutto quello che sta in «@media (prefers-color-scheme: dark)» vale solo se
   e' il telefono a chiedere il buio. Ma l'app ha una sua scelta — «sempre
   scuro» — e chi la usa su un telefono impostato in chiaro prendeva il fondo
   nero con sopra i colori del tema chiaro: un verde a 3,3 e un viola a 2,2,
   senza che niente lo segnalasse.

   Qui sotto le stesse regole, nemmeno un colore cambiato, valgono anche
   quando la scelta e' dell'app. Sono generate da quei blocchi, non scritte a
   mano, perche' scritte a mano se ne dimentica sempre una.

   I commenti si tolgono PRIMA di spezzare le regole: la prima volta non lo
   facevo, e un «/* ... *\/» in mezzo a un blocco e' finito dentro un
   selettore. Quella regola non valeva niente, e sembrava esserci.
   ============================================================================ */
:root[data-theme="dark"]{--sfondo:#0B0B0D; --carta:#17150F; --inchiostro:#F2EEE6;
    --tenue:#A39D90; --tenue2:#8D8779;
    --filo:#2A261C; --filo-forte:#3E3828;
    --grave:#FF8178; --grave-velo:#36201F; --su-grave:#2A0C0A;
    
    --viola:#D4AF37; --viola-chiaro:#2A2214;
    --viola-testo:#E7C45C; --accento:#E7C45C;
    --colore-su-carta:#8A6315;   
    --sopra-colore:#0B0B0D;
    --ombra:0 12px 30px -18px rgba(0,0,0,.8);}
:root[data-theme="dark"] .acqua .quanti{color:var(--tenue) !important}
:root[data-theme="dark"]{--sfondo:#0B0B0D;
    --carta:#17150F;
    --inchiostro:#F2EEE6;
    --tenue:#A39D90;
    --tenue2:#8D8779;
    --filo:#2A261C;
    --filo-forte:#3E3828;
    --viola:#D4AF37;
    --viola-scuro:#B8952C;
    --viola-chiaro:#2A2214;
    --viola-testo:#E7C45C; --accento:#E7C45C;
    --colore-su-carta:#8A6315; --sopra-colore:#0B0B0D;
    --buono:#2BC4B4;
    --ombra:0 10px 26px -16px rgba(0,0,0,.8);
    --ombra-alta:0 18px 40px -20px rgba(0,0,0,.9);}
:root[data-theme="dark"] .telefono{border-color:#000}
:root[data-theme="dark"] .oggi-card .bott{background:#fff;color:#8A6315}
:root[data-theme="dark"] .oggi-card .bott:hover{background:#EDEAFC;color:#2E2080}
:root[data-theme="dark"] .serie-riga.fatta .campo{background:#143F3C;color:#6FE3D6}
:root[data-theme="dark"] .record{background:#143F3C;color:#6FE3D6}
:root[data-theme="dark"] .avviso{background:var(--viola-chiaro);color:var(--su-viola-chiaro, #CFC6FF)}
:root[data-theme="dark"] .avviso-tocca:hover{background:#342C63}
:root[data-theme="dark"] .tecnica.evid{background:#3D2F12;color:#F0C777}
:root[data-theme="dark"] .salvato{background:var(--carta);color:var(--inchiostro);border:1px solid var(--filo-forte)}
:root[data-theme="dark"] .velo{background:rgba(8,7,16,.65)}
:root[data-theme="dark"] table.esercizi tr.sposta:hover{background:#221F39}
:root[data-theme="dark"] .bicchieri i.pieno{background:linear-gradient(180deg,#56B9DC 0%, #1B90BD 100%)}
:root[data-theme="dark"] .segnale.caldo .ico{background:#3D2F12;color:#F0C777}
:root[data-theme="dark"] .punteggio.alto{background:#143F3C;color:#6FE3D6}
:root[data-theme="dark"] .punteggio.medio{background:#3D2F12;color:#F0C777}
:root[data-theme="dark"] .punteggio.basso{background:#3F1A15;color:#F3A99E}
:root[data-theme="dark"] .anteprima-avviso{background:#36200E;border-color:color-mix(in srgb, var(--attenzione-chiara) 46%, transparent);border-left-color:var(--attenzione-chiara)}
:root[data-theme="dark"] .anteprima-avviso b{color:var(--attenzione-chiara)}
:root[data-theme="dark"] .anteprima-avviso p{color:#E0A878}
:root[data-theme="dark"]{--tenue2:#8D8779;}
:root[data-theme="dark"] .oggi-card{background:var(--viola)}
:root[data-theme="dark"] .oggi-card .dettagli{color:color-mix(in srgb, var(--sopra-colore, #fff) 90%, transparent)}
:root[data-theme="dark"] .oggi-card .et{color:color-mix(in srgb, var(--sopra-colore, #fff) 84%, transparent)}
:root[data-theme="dark"] .striscia{background:var(--viola)}
:root[data-theme="dark"] .striscia span{color:rgba(255,255,255,.88)}
:root[data-theme="dark"] .bolla-msg.mia{background:var(--viola)}
:root[data-theme="dark"] .menu a.vivo{background:var(--viola)}
:root[data-theme="dark"] .gs.si, :root[data-theme="dark"] .giorno[aria-selected="true"], :root[data-theme="dark"] .gruppo[aria-pressed="true"], :root[data-theme="dark"] .voto.scelto, :root[data-theme="dark"] .sn.scelto, :root[data-theme="dark"] .linguetta[aria-selected="true"]{background:var(--viola)}
:root[data-theme="dark"] .bott.pieno{background:var(--viola);border-color:var(--viola)}
:root[data-theme="dark"] .oggi-card .bott.pieno, :root[data-theme="dark"] .rp-tasti .bott.pieno, :root[data-theme="dark"] .proposta .bott.pieno{background:#fff;border-color:#fff;color:#2E1C7A;}
:root[data-theme="dark"] .bott.pieno:hover{background:var(--viola-scuro);border-color:var(--viola-scuro)}
:root[data-theme="dark"] .faccia{color:#E7C45C}
:root[data-theme="dark"] .menu .pastiglia{color:#E7C45C}
:root[data-theme="dark"] .bollino{background:var(--viola)}
:root[data-theme="dark"] .tondo{color:#E7C45C}
:root[data-theme="dark"] .voce .piu{color:#E7C45C}
:root[data-theme="dark"] .aggiungi{color:#E7C45C}
:root[data-theme="dark"] .gruppo:hover{color:#E7C45C}
:root[data-theme="dark"] .ico-grande{color:#E7C45C}
:root[data-theme="dark"] .tecnica{color:#E7C45C}
:root[data-theme="dark"] .commento-video{color:#E7C45C}
:root[data-theme="dark"] .bolla-msg.sua .commento-video{color:#E7C45C}
:root[data-theme="dark"] .indietro:hover, :root[data-theme="dark"] .bott:hover{color:#E7C45C}
:root[data-theme="dark"] .richiamo .vai-avanti{color:var(--accento, #E7C45C)}
:root[data-theme="dark"] .contatore button{color:#E7C45C}
:root[data-theme="dark"] .ascolto.attivo{color:#E7C45C}
:root[data-theme="dark"] .riga-misura small.buona{color:#5BD6C7}
:root[data-theme="dark"] .riga-misura small.calo{color:#F0C777}
:root[data-theme="dark"] .posa{color:#B9B2A2}
:root[data-theme="dark"]{--tenue:#A39D90;}
:root[data-theme="dark"] .segno{color:#C4C0DF}
:root[data-theme="dark"] .nota-legge{background:#3D2F12;border-left-color:var(--attenzione)}
:root[data-theme="dark"] .nota-legge b{color:#F0C777}
:root[data-theme="dark"] .nota-legge p{color:#D6B271}
:root[data-theme="dark"] .capo-soldi.esce .verso{background:#3D2F12;color:#F0C777}
:root[data-theme="dark"] .capo-soldi.entra .verso{background:#143F3C;color:#6FE3D6}
:root[data-theme="dark"] .corpo-scena{box-shadow:0 -14px 34px -18px rgba(0,0,0,.8)}
:root[data-theme="dark"] .fine-confronto.su{color:#5BD6C7}
:root[data-theme="dark"] .cronometro{background:#2A2742}
:root[data-theme="dark"] .cronometro.acceso{background:#0E7C72}
:root[data-theme="dark"] .acc-errore{background:#3A1F20;color:#F3B6B6;border-color:#5B2E2F}
:root[data-theme="dark"] .iv-errore{background:#3A1F20;color:#F3B6B6;border-color:#5B2E2F}
:root[data-theme="dark"] .acc-link, :root[data-theme="dark"] .conto .aliq.alta, :root[data-theme="dark"] .inv-codice .inv-et{color:#9B85FF}
:root[data-theme="dark"] .crediti a{color:#9B85FF}
:root[data-theme="dark"]{--viola-testo:#E7C45C;}
:root[data-theme="dark"] .tuo{background:#3A2E7A;color:#D9CFFF}
:root[data-theme="dark"] .prog-uguale, :root[data-theme="dark"] .tasto-scorciatoia{color:#9B85FF}
:root[data-theme="dark"] .acqua .bott.pieno{background:var(--viola);border-color:var(--viola);color:var(--sopra-colore, #fff)}
:root[data-theme="dark"] .av-allergia{background:#3A2E12;color:#F0C777;border-color:#5B4A20}

/* ------------------------------------------- il giorno di riposo, in fondo
   Questa regola DEVE stare dopo le altre. Il blocco qui sopra riscrive
   «.oggi-card{background:var(--viola)}» per il tema scuro, e con la stessa
   specificita' vince chi viene dopo: la carta del riposo tornava oro pieno
   col testo bianco sopra, 2,1 di contrasto, e il suo gradiente spariva. */
/* La carta del giorno di riposo ha un fondo suo, SCURO in tutti e due i
   temi: non e' il colore pieno dello studio. Il testo pero' prendeva
   «--sopra-colore», che e' calcolato per il colore pieno — sull'oro e'
   nero, e nero su questo blu scuro fa 1,17. Qui la variabile si ridefinisce
   per la carta e basta: tutto quello che c'e' dentro la segue.
   Trovato di domenica, perche' il giorno di riposo prima non si apriva. */
:root .oggi-card.riposo{
  /* qui il fondo e' SCURO anche quando il tema e' chiaro: sopra ci va il
     bianco, non il nero che si legge sull'oro */
  --sopra-colore:#FFFFFF;
  background:linear-gradient(165deg,var(--riposo-a, #3A332A) 0%, var(--riposo-b, #241F17) 100%);
  color:#FFFFFF;
}

/* ---------------------------------------------------- il logo di Alessio
   Due file, uno per i fondi scuri e uno per i chiari: un SVG messo come
   immagine non si ricolora dal foglio di stile, quindi si mettono tutti e
   due e si nasconde quello che non serve. Cosi' il logo cambia col tema
   come tutto il resto, invece di restare chiaro su chiaro. */
.logo-base{width:auto;display:block}
.logo-chiaro{display:none}
:root[data-theme="dark"] .logo-scuro{display:block}
:root[data-theme="dark"] .logo-chiaro{display:none}
:root[data-theme="light"] .logo-scuro{display:none}
:root[data-theme="light"] .logo-chiaro{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .logo-scuro{display:none}
  :root:not([data-theme="dark"]) .logo-chiaro{display:block}
}
/* nella testata il fondo e' scuro anche di giorno? no: la testata chiara e'
   crema, quindi li' vale il tema come dappertutto */
.scena .logo-base{margin-bottom:10px}
.marchio .logo-base{max-width:100%}

/* il logo dentro la testata: il simbolo accanto all occhiello, il logo
   intero da solo sulla porta e sull invito */
.capo-scena{display:flex;align-items:center;gap:10px;min-width:0}
.logo-testata{display:block;flex:0 0 auto}
.logo-testata.logo-grande{margin-bottom:2px}
.scena .riga-alta{align-items:flex-start}