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

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

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

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

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

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

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

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

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

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

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