/* Area staff del portale: quello che manca a portal.css (stesso tema, stesse variabili). */
#staffAccount{width:44px;height:44px;border-radius:50%;background:var(--riempimento);color:var(--tinta-testo);padding:0;flex:0 0 auto}
/* le tre card della home hanno la stessa altezza: la griglia stira anche il pulsante «prossimo corso» */
.statistiche.tre{grid-template-columns:repeat(3,1fr);gap:8px;align-items:stretch}
.statistiche.tre .statistica{padding:12px 10px;height:100%;box-sizing:border-box}
.statistiche.tre .statistica b{font-size:22px}
button.statistica.tocca{text-align:left;align-items:flex-start;font-weight:400;color:var(--testo);border-radius:12px;min-height:0}
button.statistica.tocca b{color:var(--tinta-testo)}
.testa-riga{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.testa-riga strong{flex:1;min-width:0;font-size:17px;overflow-wrap:anywhere}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.cerca{display:flex;align-items:center;gap:8px;background:var(--riempimento);border-radius:10px;padding:0 10px;color:var(--secondario)}
.cerca input{background:transparent;border:0;padding:8px 0;min-height:44px;font-size:17px}
.cerca input:focus{outline:none}
.cerca input::-webkit-search-cancel-button{-webkit-appearance:none}
.campo-cerca{margin:0 0 14px}
.cella.cerca{border-radius:0;background:var(--carta);padding:8px 16px}
.cella.cerca input{background:var(--riempimento);border-radius:10px;padding:8px 12px}
.segmenti.larghi{overflow-x:auto;scrollbar-width:none}
.segmenti.larghi button{flex:1 0 auto;padding:0 12px}
button.semplice.rossa,.semplice.rossa{color:var(--rosso)}
.appello .affiancati{margin-top:8px}
.gruppo .riga.scelta .titolo{color:var(--tinta-testo);font-weight:700}
.anteprima{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:10px;background:var(--riempimento);margin:0 0 14px}
.anteprima-vuota{display:flex;align-items:center;justify-content:center;gap:8px;min-height:72px;border-radius:10px;background:var(--riempimento);color:var(--secondario);margin:0 0 14px;text-decoration:none;font-size:15px}
textarea{resize:vertical;min-height:72px}
/* anagrafica: nome e telefono affiancati, sia in lettura (righe del gruppo) sia nel foglio di modifica */
.due-colonne{display:grid;grid-template-columns:1fr 1fr}
.gruppo .due-colonne .riga+.riga{border-left:1px solid var(--separatore)}
.modale-corpo .due-colonne{gap:10px}
/* «+» tondo a destra del titolo di sezione: bersaglio da 44px, cerchio da 30px */
.sezione button.st-piu{min-height:44px;width:44px;padding:0;margin:-12px -8px -12px 0;background:transparent;display:grid;place-items:center;border-radius:50%}
.st-piu .cerchio{width:30px;height:30px;border-radius:50%;background:var(--tinta);color:var(--su-tinta,#fff);display:grid;place-items:center}
.st-piu .cerchio .ico{width:18px;height:18px;stroke-width:2.6}

/* ---------- avatar con le iniziali, in alto a destra ---------- */
#staffAccount.st-avatar{width:44px;height:44px;min-height:44px;border-radius:50%;align-self:center;background:var(--tinta);color:var(--su-tinta);font-size:17px;font-weight:700;
 letter-spacing:.02em;display:grid;place-items:center;padding:0;flex:0 0 auto;box-shadow:var(--ombra-piu)}
.st-tema button{font-size:15px}

/* Il tema scelto a mano (data-tema su <html>, chiave localStorage odc-tema) lo definisce portal.css. */

/* ---------- video dell'esercizio nella scheda del cliente ---------- */
.st-esercizio .testa-riga{margin-bottom:2px}
.st-esercizio .mini{margin:0}
.st-video-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;margin-top:6px;min-height:36px}
.st-video-azioni .mini-btn{min-height:44px;padding:0 10px;font-size:15px}
.st-video-barra{position:relative;flex:0 1 180px;height:8px;border-radius:99px;background:var(--riempimento);overflow:hidden}
.st-video-barra i{position:absolute;top:0;bottom:0;left:-40%;width:40%;border-radius:99px;background:var(--tinta);animation:st-scorre 1.1s ease-in-out infinite}
@keyframes st-scorre{from{left:-40%}to{left:100%}}
.st-video{display:block;width:100%;max-height:60vh;border-radius:10px;background:#000;margin:0 0 10px}

/* ---------- transizioni in stile iOS (solo CSS; con prefers-reduced-motion si spengono) ---------- */
:root{--st-curva:cubic-bezier(.32,.72,0,1)}
@keyframes st-dissolve{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes st-da-destra{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes st-da-sinistra{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes st-pagina-entra{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:none}}
@keyframes st-foglio-sale{from{transform:translateY(100%)}to{transform:none}}
@keyframes st-velo{from{opacity:0}to{opacity:1}}
/* cambio di sezione: dissolvenza con un leggero scorrimento dal basso */
#staffViste .vista.attiva.st-entra{animation:st-dissolve .28s var(--st-curva) both}
/* striscia dei giorni: il giorno scelto si centra; sotto, il contenuto entra dal lato del cambio */
#appStaff .giorni,.st-pagina .giorni{scroll-snap-type:x proximity;scroll-behavior:smooth;scroll-padding:0 40%}
#appStaff .giorno,.st-pagina .giorno{scroll-snap-align:center}
#appStaff .giorno span{transition:background-color .2s,color .2s,transform .2s var(--st-curva)}
#appStaff .giorno.scelto span{transform:scale(1.06)}
.st-scorre.st-da-destra{animation:st-da-destra .3s var(--st-curva) both}
.st-scorre.st-entra-su{animation:st-dissolve .28s var(--st-curva) both}
.st-scorre.st-da-sinistra{animation:st-da-sinistra .3s var(--st-curva) both}
/* pagine di dettaglio da destra, fogli dal basso, velo in dissolvenza */
dialog.st-pagina[open]{animation:st-pagina-entra .3s var(--st-curva) both}
dialog.st-foglio[open] .modale-card{animation:st-foglio-sale .3s var(--st-curva) both}
dialog.st-pagina[open]::backdrop,dialog.st-foglio[open]::backdrop{animation:st-velo .25s ease-out both}
/* feedback al tocco e chip/stati senza scatti */
#appStaff button,.st-pagina button,.st-foglio button,#bloccoSchermo button{transition:transform .12s var(--st-curva),opacity .12s,background-color .2s,color .2s,box-shadow .2s}
#appStaff button:active,.st-pagina button:active,.st-foglio button:active{transform:scale(.97)}
#appStaff .tab:active{transform:scale(.94)}
#appStaff .tag,.st-pagina .tag,.st-foglio .tag,#appStaff .badge{transition:background-color .2s,color .2s,opacity .2s}
#appStaff .riga,.st-pagina .riga{transition:background-color .2s}
#appStaff .segmenti button,.st-foglio .segmenti button{transition:background-color .2s,box-shadow .2s,font-weight 0s}
@media (prefers-reduced-motion:reduce){
 #staffViste .vista.attiva.st-entra,.st-scorre.st-da-destra,.st-scorre.st-da-sinistra,dialog.st-pagina[open],dialog.st-foglio[open] .modale-card,
 dialog.st-pagina[open]::backdrop,dialog.st-foglio[open]::backdrop,.st-video-barra i{animation:none}
 #appStaff .giorni,.st-pagina .giorni{scroll-behavior:auto}
 #appStaff button,.st-pagina button,.st-foglio button,#appStaff .giorno span{transition:none}
 #appStaff button:active,.st-pagina button:active,.st-foglio button:active,#appStaff .giorno.scelto span{transform:none}
}
/* Indirizzo nel foglio di modifica: via e citta' insieme sotto una sola etichetta. */
#modificaCorpo fieldset.indirizzo{border:0;padding:0;margin:0 0 12px;min-width:0}
#modificaCorpo fieldset.indirizzo legend{font-size:13px;font-weight:600;color:var(--secondario);padding:0;margin:0 0 6px 4px}