/* ================= IL MOVIMENTO COMUNE =================
   23 settembre 2026, Jacopo: gestionale e app dei clienti devono sembrare la
   stessa app, e le due barre in basso devono essere UGUALI. Fino a oggi erano
   due copie scritte a mano che si erano allontanate: 370 contro 350 px di
   larghezza, tasti alti 50 contro 56, icone 20 contro 21, filetto acceso nel
   gestionale e verde scuro quasi invisibile nell'app. Questo file e' caricato
   per ULTIMO da tutte e due le pagine, quindi quello che dice qui vince; la
   classe ripetuta (.tabbar.tabbar) serve a battere le regole vecchie senza
   !important.

   Cosa c'e':
   1. la barra in basso, misura per misura, una volta sola;
   2. il SELETTORE: il riquadro grigio non e' piu' disegnato sul tasto acceso
      ma e' un pezzo suo che scorre da una voce all'altra con la molla
      (parti/movimento.js lo sposta);
   3. l'icona che si gonfia appena e si assesta (il «gommoso» di prima,
      ammorbidito);
   4. il «Salvato» sui tasti che salvano;
   5. la spunta della serie e la barra dell'avanzamento nell'app dei clienti.

   Si anima SOLO transform e opacity. Chi ha chiesto meno movimento al
   telefono non vede niente di tutto questo (in fondo al file). */

/* ---------- 1. la barra, sul telefono ---------- */
@media (max-width:899px) {
  .tabbar.tabbar {
    box-sizing:border-box; width:min(420px, calc(100% - 24px)); bottom:calc(12px + var(--sab, 0px));
    padding:6px; gap:2px; border-radius:18px;
    /* il colore acceso lo decide la pagina (qui sotto): nel gestionale e'
       quello del tema del trainer scritto su fondo scuro, nell'app dei
       clienti quello del trainer schiarito. La forma e' la stessa. */
  }
  .tabbar.tabbar button {
    flex:1 1 0; min-width:0; height:auto; min-height:54px; padding:0 2px; gap:4px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    border-radius:12px; position:relative; z-index:1;
    /* il riquadro ora e' del selettore: il tasto resta nudo */
    background:none; border:0; box-shadow:none;
  }
  .tabbar.tabbar button svg { width:21px; height:21px; }
  .tabbar.tabbar button .tl, .tabbar.tabbar button .lb {
    font-size:10px; font-weight:600; line-height:1; letter-spacing:0;
  }
  .tabbar.tabbar button.on { color:var(--barra-acc); background:none; border:0; box-shadow:none; }
  .tabbar.tabbar button.on .tl, .tabbar.tabbar button.on .lb { font-weight:700; }
  .tabbar.tabbar button.on svg { width:21px; height:21px; }
  /* il filetto sopra la voce se ne va col selettore */
  .tabbar.tabbar button.on::before { display:none; }
  /* finche' il selettore non c'e' (prima che parta lo script) il tasto
     acceso tiene il suo riquadro: niente barra senza segnale */
  .tabbar.tabbar:not(.con-selettore) button.on {
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.075));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.17);
  }
}
#tabbarNav { --barra-acc:var(--accento-testo, #3DFFB0); }
#tabbar    { --barra-acc:color-mix(in srgb, var(--accento) 42%, #C9FFE4); }

/* ---------- 2. il selettore ---------- */
.tabbar .selettore { display:none; }
@media (max-width:899px) {
  .tabbar.con-selettore .selettore {
    display:block; position:absolute; left:0; top:0; z-index:0; pointer-events:none;
    width:var(--sw, 0px); height:var(--sh, 0px); border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.075));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.18),
      0 7px 18px rgba(0,0,0,.20);
    transform:translate3d(var(--sx, 0px), var(--sy, 0px), 0) scale(var(--sk, 1), var(--sj, 1));
    /* la molla: la curva passa oltre e torna (1.42 sopra l'uno), cosi'
       il riquadro arriva, sfora appena e si ferma */
    transition:transform 440ms cubic-bezier(.32, 1.42, .52, 1), opacity 160ms;
    opacity:0;
  }
  .tabbar.con-selettore .selettore.pronto { opacity:1; }
  /* in viaggio si allunga un poco e si schiaccia: e' il «gommoso» */
  .tabbar.con-selettore .selettore.viaggia { transition-duration:180ms, 160ms; transition-timing-function:ease-out, ease; }
  .tabbar.con-selettore .selettore::before {
    content:""; position:absolute; left:12px; right:12px; top:-1px; height:3px;
    border-radius:0 0 3px 3px; background:var(--barra-acc);
    box-shadow:0 1px 8px color-mix(in srgb, var(--barra-acc) 55%, transparent);
  }
}

/* ---------- 3. l'icona che si gonfia e si assesta ---------- */
@keyframes mov-gonfia {
  0%   { transform:scale(1, 1); }
  30%  { transform:scale(1.18, .9); }
  58%  { transform:scale(.96, 1.05); }
  80%  { transform:scale(1.03, .99); }
  100% { transform:scale(1, 1); }
}
.tabbar.tabbar button.tap svg { animation:mov-gonfia 440ms cubic-bezier(.3,.7,.4,1); }

/* ---------- 4. «Salvato» ---------- */
.mov-salvato { position:relative; }
.mov-salvato .mov-ok {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  animation:mov-entra 260ms cubic-bezier(.3,1.5,.5,1) both;
}
.mov-salvato .mov-ok svg { width:15px; height:15px; flex:0 0 auto; }
.mov-salvato .mov-ok svg path { animation:mov-spunta 320ms 60ms cubic-bezier(.3,1.6,.5,1) both; transform-origin:50% 60%; }
@keyframes mov-entra { from { opacity:0; transform:translateY(4px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes mov-spunta { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }
/* i tasti con la sola icona (la spunta in cima ai fogli) fanno solo il salto */
.mov-salvato-icona { animation:mov-gonfia 440ms cubic-bezier(.3,.7,.4,1); }

/* ---------- 5. la serie fatta, nell'app dei clienti ---------- */
/* L'avanzamento non cambia piu' la larghezza (che rimisura la pagina a ogni
   passo): la barra e' piena e si scala da sinistra. */
.gw-top .p i#gwProg {
  width:100%; transform-origin:0 50%;
  transform:scaleX(var(--avanz, 0));
  transition:transform 520ms cubic-bezier(.22, 1, .36, 1);
}
.gw-cd .mov-fatta {
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--accento) 18%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accento) 45%, transparent);
  color:var(--barra-acc, var(--accento));
  animation:mov-fatta 520ms cubic-bezier(.3,1.5,.5,1) both;
}
.gw-cd .mov-fatta svg { width:28px; height:28px; }
.gw-cd .mov-fatta svg path { animation:mov-spunta 360ms 140ms cubic-bezier(.3,1.7,.5,1) both; transform-origin:50% 60%; }
@keyframes mov-fatta { 0% { opacity:0; transform:scale(.5); } 60% { opacity:1; transform:scale(1.08); } 100% { opacity:1; transform:scale(1); } }
/* l'ultima serie segnata entra nell'elenco invece di comparire */
.gw-fatte .r.mov-nuova { animation:mov-entra 320ms cubic-bezier(.3,1.3,.5,1) both; }
#gw { --barra-acc:color-mix(in srgb, var(--accento) 42%, #C9FFE4); }

/* ---------- chi ha chiesto meno movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .tabbar.con-selettore .selettore { transition:none; }
  .tabbar.tabbar button.tap svg,
  .mov-salvato .mov-ok, .mov-salvato .mov-ok svg path, .mov-salvato-icona,
  .gw-cd .mov-fatta, .gw-cd .mov-fatta svg path, .gw-fatte .r.mov-nuova { animation:none; }
  .gw-top .p i#gwProg { transition:none; }
}

/* IL FILO APERTO DELLA CHAT COME LA BARRA IN BASSO (sesto giro, 24 settembre
   2026). «Generale» aperto aveva solo il filetto verde SOTTO: il bordo di
   sopra e la luce non c'erano, e non somigliava al vetro con la luce che
   Jacopo aveva chiesto. Adesso e' lo stesso selettore della barra: vetro
   grigio, orlo chiaro tutto intorno e il led in ALTO, con il suo bagliore. */
.cvfili .cvfilo { position:relative; overflow:visible; }
.cvfili .cvfilo.on.on {
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.075));
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 7px 18px rgba(0,0,0,.20);
  color:var(--barra-acc, var(--accento-testo));
}
.cvfili .cvfilo.on::before {
  content:""; position:absolute; left:18%; right:18%; top:-1px; height:3px;
  border-radius:0 0 3px 3px; background:var(--accento);
  box-shadow:0 1px 8px color-mix(in srgb, var(--accento) 55%, transparent);
}
html.tema-chiaro .cvfili .cvfilo.on.on {
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.02));
  border-color:rgba(0,0,0,.10);
}