/* ================= 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, cosi' il riquadro arriva,
       sfora e si assesta. Era 1.42 in 440ms ma Jacopo lo sentiva «troppo
       secco» (14 ottobre, sera): piu' corsa oltre il punto e piu' tempo
       per tornare, cosi' il rimbalzo si vede davvero. */
    transition:transform 580ms cubic-bezier(.3, 1.65, .45, 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);
}

/* ---------- LA BARRA COME WHATSAPP (14 ottobre 2026) ----------
   Jacopo, con lo screenshot di WhatsApp: «vorrei come l'immagine sia la
   posizione che la forma e l'effetto glass della barra». Quindi: capsula
   piena (tonda alle estremita'), appoggiata in basso con poco margine, vetro
   piu' trasparente che lascia vedere sotto, e la voce accesa dentro una
   capsula chiara, senza il filetto colorato sopra. Vale per il gestionale e
   per l'app dei clienti, che caricano tutte e due questo file per ultimo.
   (Il 6 settembre l'aveva voluta meno tonda: adesso la vuole cosi'.) */
@media (max-width:899px) {
  .tabbar.tabbar {
    width:calc(100% - 28px); max-width:460px;
    /* 14 ottobre, sera: «abbassiamo ancora un po' la barra» — da 6 a 2. */
    bottom:calc(2px + var(--sab, 0px));
    padding:5px; gap:0; border-radius:999px;
    background:linear-gradient(145deg, rgba(44,46,50,.52), rgba(22,24,27,.46));
    backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.35);
  }
  .tabbar.tabbar button { min-height:56px; border-radius:999px; }
  .tabbar.tabbar button svg { width:23px; height:23px; }
  .tabbar.tabbar button.on svg { width:23px; height:23px; }
  .tabbar.tabbar button .tl, .tabbar.tabbar button .lb { font-size:10.5px; }
  .tabbar.con-selettore .selettore {
    border-radius:999px;
    background:rgba(255,255,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  }
  .tabbar.con-selettore .selettore::before { display:none; }
  /* il tratteggio led sul bordo del cerchio della voce scelta (14 ottobre,
     sera): Jacopo lo rivuole «come prima» — un filo tratteggiato del colore
     d'accento che corre sul bordo della capsula accesa, col suo bagliore. */
  .tabbar.con-selettore .selettore::after {
    content:""; position:absolute; inset:0; border-radius:999px; pointer-events:none;
    border:1.5px dashed var(--barra-acc); opacity:.85;
    box-shadow:0 0 10px color-mix(in srgb, var(--barra-acc) 45%, transparent),
      inset 0 0 8px color-mix(in srgb, var(--barra-acc) 20%, transparent);
  }
  .tabbar.tabbar:not(.con-selettore) button.on {
    background:rgba(255,255,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    outline:1.5px dashed var(--barra-acc); outline-offset:-1.5px;
  }
}

/* ---------- LE CASELLE, ALLA APPLE (14 ottobre 2026) ----------
   Jacopo: «vorrei che le caselle fossero fatte molto meglio, prendi spunto
   da Apple: se ci clicco dentro il contenuto scompare». Tre cose:
   1. il testo d'esempio dentro la casella sparisce appena la tocchi, come
      nei campi di iOS: resta il cursore, non l'invito;
   2. sul telefono le caselle hanno l'altezza di un dito (44 px), angoli a
      12, fondo pieno e un filo che si accende solo quando scrivi;
   3. nel compilatore: la riga del giorno non stringe piu' tre caselle in
      fila (la prima si leggeva a meta'), la nota ha aria intorno e il tasto
      «superserie» non si appoggia piu' sopra la nota dell'esercizio prima. */
input::placeholder, textarea::placeholder { transition: opacity .15s ease; }
input:focus::placeholder, textarea:focus::placeholder { opacity: 0; }

@media (max-width:899px) {
  /* 2. le caselle del gestionale sul telefono */
  .modal input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  .modal select, .modal textarea {
    min-height: 44px; border-radius: 12px;
  }
  /* 3. il compilatore */
  #bDays .gio-h2 {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px;
    padding-left: 0; margin-top: 10px;
  }
  #bDays .gio-h2 .gio-sub { grid-column: 1 / -1; }
  #bDays .gio-h2 .gio-sub, #bDays .gio-h2 .gio-rec, #bDays .gio-h2 .gio-nota {
    width: auto; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  }
  #bDays .ese-d .d-nota {
    min-height: 42px; padding: 10px 12px; border-radius: 12px; margin-top: 4px;
  }
  #bDays .ese-d .dato { min-height: 40px; padding: 4px 10px; border-radius: 11px; }
  /* il tasto «superserie» sta nello spazio fra un esercizio e l'altro,
     non sopra la nota di quello prima */
  #bDays .ese:has(.lega) { padding-top: 26px; }
  #bDays .ese .lega { top: 4px; height: 22px; }
}