:root {
  --sfondo: #111827;
  --superficie: #1f2937;
  --superficie-2: #273244;
  --bordo: #374151;
  --testo: #f9fafb;
  --testo-2: #9ca3af;
  --primario: #22c55e;
  --primario-scuro: #15803d;
  --giallo: #ffe45c;
  --rosso: #ef4444;
  --raggio: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--sfondo); color: var(--testo); }
body {
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  min-height: 100vh;
}
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }

/* barra in alto */
#barra {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: rgba(17, 24, 39, .96); border-bottom: 1px solid var(--bordo);
}
#titolo { font-weight: 700; font-size: 18px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icona { background: none; border: 0; font-size: 24px; padding: 4px 8px; line-height: 1; }
.pillola { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: #7c2d12; color: #fed7aa; }
.pillola.coda { background: #1e3a8a; color: #bfdbfe; }

#vista { padding: 16px; max-width: 640px; margin: 0 auto; }

/* home */
.saluto { font-size: 26px; font-weight: 800; margin: 8px 0 2px; }
.sottotitolo { color: var(--testo-2); margin: 0 0 18px; }
.scelte { display: grid; gap: 12px; }
.scelta {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 18px; border-radius: var(--raggio); border: 1px solid var(--bordo); background: var(--superficie);
}
.scelta .emoji { font-size: 30px; width: 44px; text-align: center; }
.scelta b { display: block; font-size: 18px; }
.scelta small { color: var(--testo-2); }
.scelta[disabled] { opacity: .5; }
.scelta.evidenza { border-color: var(--primario); background: linear-gradient(135deg, #14532d, var(--superficie)); }

/* moduli */
label { display: block; font-size: 14px; color: var(--testo-2); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--testo); background: var(--superficie-2);
  border: 1px solid var(--bordo); border-radius: 10px; padding: 12px;
}
.principale, .secondario {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; padding: 12px 16px; font-weight: 700; border: 1px solid transparent;
}
.principale { background: var(--primario); color: #052e16; }
.secondario { background: var(--superficie-2); border-color: var(--bordo); }
.largo { width: 100%; margin-top: 16px; }
.errore { color: #fca5a5; min-height: 1.4em; margin-top: 8px; }
.nota-grigia { color: var(--testo-2); font-size: 14px; }

/* allenamento */
.linguette { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; }
.linguetta {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--bordo); background: var(--superficie);
  white-space: nowrap;
}
.linguetta.attiva { background: var(--primario); color: #052e16; border-color: var(--primario); font-weight: 700; }
.riga-settimana { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--testo-2); font-size: 14px; }
.riga-settimana select { width: auto; padding: 6px 10px; }

.banda {
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 10px; margin: 14px 0 8px;
}
.card {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  margin-bottom: 12px; overflow: hidden;
}
.card.fatto { border-color: var(--primario-scuro); }
.card.diverso { border-color: #b45309; }
.card-testa { display: flex; gap: 12px; padding: 12px; }
.foto {
  width: 84px; height: 84px; flex: 0 0 84px; border-radius: 10px; object-fit: cover; background: #fff;
  border: 0; padding: 0; position: relative; overflow: hidden;
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .play {
  position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff; border-radius: 99px;
  font-size: 11px; padding: 2px 6px;
}
.etichetta-blocco { font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 2px; }
.nome { font-weight: 700; font-size: 17px; line-height: 1.25; }
.tecnica { color: #f87171; font-size: 13px; font-weight: 600; }
.prescrizione { font-size: 20px; font-weight: 800; margin-top: 6px; }
.prescrizione.test { background: var(--giallo); color: #111; display: inline-block; padding: 2px 8px; border-radius: 6px; }
.dettaglio { font-size: 14px; color: var(--testo-2); }
.back-off { font-size: 15px; font-weight: 700; color: #fbbf24; margin-top: 2px; }
.stato-fatto { font-size: 13px; margin-top: 4px; }
.stato-fatto.ok { color: #86efac; }
.stato-fatto.no { color: #fdba74; }
.azioni { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border-top: 1px solid var(--bordo); }
.azioni button {
  background: none; border: 0; border-right: 1px solid var(--bordo); padding: 12px 4px; font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.azioni button:last-child { border-right: 0; }
.azioni .simbolo { font-size: 20px; line-height: 1; }
.azioni .attivo { color: var(--primario); }

/* modulo "ho fatto diverso" */
/* --foglio-sotto = altezza del menu in basso quando il foglio si ferma sopra di esso (apriFoglio in personal.js) */
.foglio-sfondo { position: fixed; inset: 0; bottom: var(--foglio-sotto, 0px); background: rgba(0,0,0,.6); z-index: 20; display: flex; align-items: flex-end; }
.foglio {
  background: var(--superficie); width: 100%; max-width: 640px; margin: 0 auto; border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain;
  /* dvh = altezza davvero visibile sul telefono (vh conta anche la barra del browser); vh per i browser vecchi */
  max-height: calc(92vh - var(--foglio-sotto, 0px));
  max-height: calc(100dvh - var(--foglio-sotto, 0px) - 24px - env(safe-area-inset-top, 0px));
}
.foglio h3 { margin: 0 0 4px; }
.griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* Annulla / Salva sempre visibili: restano attaccati in fondo al foglio e i campi scorrono sopra */
.bottoni-foglio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px;
  position: sticky; bottom: 0; z-index: 2; background: var(--superficie);
  padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 12px -10px rgba(0,0,0,.35); }
.bottoni-foglio button { margin: 0; }
/* col piede fisso il margine sotto lo da' il piede (senza, tra piede e bordo si vedrebbero i campi che scorrono);
   scroll-padding: il campo su cui si scrive non finisce sotto i bottoni */
.foglio:has(.bottoni-foglio) { padding-bottom: 0; scroll-padding-bottom: 96px; }

/* cronometro */
.timer { position: fixed; inset: 0; z-index: 30; background: rgba(9,12,20,.97); display: flex; align-items: center; justify-content: center; padding: 16px; }
.timer-scheda { width: 100%; max-width: 380px; text-align: center; }
.timer-titolo { color: var(--testo-2); font-size: 16px; }
.timer-tempo { font-size: 88px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 10px 0; }
.timer-tempo.finito { color: var(--primario); }
.timer-barra { height: 8px; background: var(--superficie-2); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
#timer-avanzamento { height: 100%; width: 0; background: var(--primario); transition: width .25s linear; }
.timer-bottoni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.timer-bottoni button { padding: 14px; border-radius: 12px; border: 1px solid var(--bordo); background: var(--superficie); font-weight: 700; }
.timer .principale { width: 100%; }

/* esercizio */
.grande-foto { width: 100%; max-height: 360px; object-fit: contain; background: #fff; border-radius: var(--raggio); }
video { width: 100%; border-radius: var(--raggio); background: #000; }
.tabella { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.tabella td, .tabella th { padding: 8px; border-bottom: 1px solid var(--bordo); text-align: left; }
.tabella tr.corrente td { color: var(--primario); font-weight: 700; }

/* progressi e dati */
.confronto { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 14px 0; text-align: center; }
.confronto .box { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 8px; }
.confronto .box small { color: var(--testo-2); display: block; }
.confronto .box b { font-size: 18px; }
.freccia { font-size: 22px; color: var(--primario); }
.grafico { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 8px; }
.grafico svg { width: 100%; height: auto; display: block; }
.sezione { margin-top: 20px; }
.sezione h2 { font-size: 18px; margin: 0 0 8px; }
.valori { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.valore { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px; }
.valore small { color: var(--testo-2); display: block; font-size: 12px; }
.valore b { font-size: 18px; }
.delta-su { color: #86efac; font-size: 12px; }
.delta-giu { color: #fca5a5; font-size: 12px; }

.avviso {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  background: #0f172a; border: 1px solid var(--bordo); color: var(--testo); padding: 12px 14px; border-radius: 12px;
  max-width: 600px; margin: 0 auto; box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.vuoto { text-align: center; color: var(--testo-2); padding: 30px 10px; }

/* anteprima del personal */
#banda-anteprima {
  position: sticky; top: calc(49px + env(safe-area-inset-top, 0px)); z-index: 4;
  background: #7c3aed; color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
#banda-anteprima button {
  background: #fff; color: #5b21b6; border: none; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700;
  cursor: pointer; width: auto; margin: 0;
}

/* Mi nutro e spesa */
.riga-giorno { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.riga-giorno .secondario { padding: 8px 14px; }
.alimenti { margin: 8px 0 0; padding-left: 18px; }
.alimenti li { margin: 4px 0; }
.alimenti details summary { color: var(--testo-2); font-size: 13px; cursor: pointer; }
.pasto-card.adesso { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
.riga-alimento { margin-bottom: 8px; }
.riga-alimento label { margin-top: 8px; color: var(--testo); }
.griglia-2 { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.linguette-app { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 10px; }
.lista-spesa { display: grid; gap: 6px; }
.voce-spesa {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px; border-radius: 12px;
  background: var(--superficie); border: 1px solid var(--bordo); color: var(--testo); font-size: 16px;
}
.voce-spesa input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primario); }
.voce-spesa.presa span { opacity: .55; text-decoration: line-through; }

/* sotto-schede */
.sottoschede { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.sottoschede button { background: none; border: 0; border-radius: 9px; padding: 9px 6px; font-size: 13px; font-weight: 600; color: var(--testo-2); }
.sottoschede button.attiva { background: var(--superficie-2); color: var(--testo); box-shadow: inset 0 -2px 0 var(--primario); }
.riquadro { background: var(--superficie); border: 1px solid var(--bordo); border-left: 4px solid var(--primario);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.riquadro p { margin: 8px 0 0; }
.grafico.torta { display: flex; gap: 12px; align-items: center; }
.grafico.torta svg { width: 130px; flex: 0 0 130px; }
.legenda { list-style: none; margin: 0; padding: 0; font-size: 13px; flex: 1; }
.legenda li { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.legenda li b { margin-left: auto; }
.legenda span { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.grafico.barre { padding: 10px; }
.barra-riga { display: grid; grid-template-columns: 110px 1fr 32px; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.barra-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-traccia { display: flex; height: 12px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; }
.barra-riga b { text-align: right; }
.spiega { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.spiega summary { font-weight: 700; cursor: pointer; }
.spiega p { margin: 8px 0 2px; color: var(--testo-2); }
.percorso { padding-left: 20px; }
.percorso li { margin: 6px 0; }
.percorso li.corrente b { color: var(--primario); }
.pillola-fase { font-size: 11px; background: #14532d; color: #bbf7d0; border-radius: 99px; padding: 1px 8px; margin-left: 4px; }
.confronto-tab td:nth-child(2) { color: var(--testo-2); }
.foto-confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.foto-confronto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; background: #000; }
.foto-confronto.testa { text-align: center; margin-bottom: 4px; }
.foto-confronto.testa small { color: var(--testo-2); font-weight: 400; }
.foto-vuota { aspect-ratio: 3 / 4; border-radius: 12px; border: 1px dashed var(--bordo); display: flex; align-items: center; justify-content: center; color: var(--testo-2); }

.delta-meglio { color: #86efac; font-size: 12px; }
.delta-peggio { color: #fca5a5; font-size: 12px; }
.delta-neutro { color: var(--testo-2); font-size: 12px; }

/* promemoria dei pasti */
.riquadro.promemoria { display: flex; gap: 10px; align-items: center; }
.riquadro.promemoria button { flex: 0 0 auto; padding: 8px 14px; }
.riquadro.da-segnare { border-left-color: #f59e0b; }
.bottoni-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.bottoni-3 button { padding: 10px 6px; }

/* privacy e consensi */
.consenso { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; padding: 12px; border-radius: 12px;
  background: var(--superficie); border: 1px solid var(--bordo); color: var(--testo); font-size: 14px; line-height: 1.4; }
.consenso input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--primario); }
.consenso .necessario { font-size: 11px; color: #f59e0b; text-transform: uppercase; margin-left: 4px; }

/* calorie e macro: giorno in Mi nutro e riepilogo del mese */
.conto-giorno { display: flex; gap: 10px; align-items: center; }
.conto-giorno .numeri { flex: 1; }
.conto-giorno .kcal { font-size: 20px; font-weight: 700; }
.conto-giorno button { flex: 0 0 auto; padding: 8px 12px; }
.macro-riga { display: grid; grid-template-columns: 92px 1fr 88px; gap: 8px; align-items: center; margin: 7px 0; font-size: 13px; }
.macro-riga .traccia { position: relative; height: 12px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; }
.macro-riga .pieno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--primario); }
.macro-riga .pieno.oltre { background: #f59e0b; }
.macro-riga b { text-align: right; font-weight: 600; }
.giorni-mese { display: grid; gap: 3px; }
.giorno-mese { display: grid; grid-template-columns: 44px 1fr 64px; gap: 8px; align-items: center; font-size: 12px; }
.giorno-mese .traccia { position: relative; height: 10px; background: var(--superficie-2); border-radius: 5px; overflow: hidden; }
.giorno-mese .pieno { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primario); border-radius: 5px; }
.giorno-mese .previsto { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--testo); opacity: .6; }
.giorno-mese.vuoto-g { opacity: .45; }
.riga-mese { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.riga-mese .secondario { padding: 8px 14px; }

/* ============================================================
   STILE TABLER SCURO (26/09/2026): stessi colori e carattere del portale
   ============================================================ */
:root {
  --sfondo: #151f2c;
  --superficie: #1b2838;
  --superficie-2: #22324a;
  --bordo: #2b3b50;
  --testo: #e6eaf0;
  --testo-2: #96a3b6;
  --primario: #2f9e4f;
  --primario-scuro: #24793c;
  --raggio: 12px;
}
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#barra { background: rgba(24, 36, 51, .97); }
#titolo { font-weight: 600; letter-spacing: -.01em; }
.saluto { font-weight: 700; letter-spacing: -.02em; }
.scelta, .card, .riquadro, .valore, .grafico, .spiega, .voce-spesa, .consenso {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.scelta { border-radius: 12px; }
.scelta.evidenza { background: linear-gradient(135deg, color-mix(in srgb, var(--primario) 28%, var(--superficie)), var(--superficie)); }
.principale { color: #ffffff; font-weight: 600; border-radius: 8px; }
.principale:active { background: var(--primario-scuro); }
.secondario { border-radius: 8px; }
input, select, textarea { background: var(--superficie); border-color: var(--bordo); border-radius: 8px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 25%, transparent); }
.sottoschede button.attiva { box-shadow: inset 0 -2px 0 var(--primario); }
.linguetta.attiva { color: #ffffff; }

/* restyling in stile portale: logo, riquadri con icone colorate, barra di navigazione in basso */
.logo-barra { height: 26px; width: auto; flex: 0 0 auto; }
#indietro:not([hidden]) + .logo-barra { display: none; }
.scelta { padding: 14px 16px; gap: 14px; position: relative; }
.scelta::after { content: "chevron_right"; font-family: "Material Symbols Rounded"; font-size: 22px; color: var(--testo-2); margin-left: auto; }
.scelta[disabled]::after { content: ""; }
.icona-scelta { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
.icona-scelta .material-symbols-rounded { font-size: 26px; }
.testo-scelta b { font-size: 17px; font-weight: 600; }
.c-verde { background: var(--primario); } .c-arancio { background: #f76707; } .c-viola { background: #ae3ec9; }
.c-blu { background: #206bc4; } .c-whatsapp { background: #25a244; }
.scelta.evidenza { border-color: color-mix(in srgb, var(--primario) 60%, var(--bordo)); }

#navbar-basso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(24, 36, 51, .98); border-top: 1px solid var(--bordo); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
#navbar-basso[hidden] { display: none; }
#navbar-basso button { background: none; border: 0; color: var(--testo-2); display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 500; padding: 4px 0; border-radius: 10px; }
#navbar-basso button .material-symbols-rounded { font-size: 24px; padding: 2px 16px; border-radius: 999px; transition: background .15s; }
#navbar-basso button.attivo { color: var(--testo); }
#navbar-basso button.attivo .material-symbols-rounded { background: color-mix(in srgb, var(--primario) 28%, transparent); color: #6ee7a0; }
body.con-navbar #vista { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
body.con-navbar .avviso { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* tema chiaro (pulsante sole/luna in alto): stessi colori del portale in chiaro */
:root[data-modo="chiaro"] {
  --sfondo: #f6f8fb; --superficie: #ffffff; --superficie-2: #eef2f7; --bordo: #e1e5eb;
  --testo: #182433; --testo-2: #66738a; color-scheme: light;
}
:root[data-modo="chiaro"] #barra { background: rgba(255, 255, 255, .97); }
:root[data-modo="chiaro"] #navbar-basso { background: rgba(255, 255, 255, .98); }
:root[data-modo="chiaro"] #navbar-basso button.attivo .material-symbols-rounded { color: var(--primario-scuro); }
:root[data-modo="chiaro"] .scelta, :root[data-modo="chiaro"] .card, :root[data-modo="chiaro"] .riquadro,
:root[data-modo="chiaro"] .valore, :root[data-modo="chiaro"] .voce-spesa { box-shadow: 0 1px 2px rgba(24, 36, 51, .05), 0 2px 8px rgba(24, 36, 51, .04); }
:root[data-modo="chiaro"] .avviso { background: #182433; color: #fff; }
:root[data-modo="chiaro"] .logo-barra { filter: none; }
:root[data-modo="scuro"] .se-chiaro, :root[data-modo="chiaro"] .se-scuro { display: none; }
.icona.tema { margin-left: auto; color: var(--testo-2); display: inline-flex; }
#stato-rete:not([hidden]) + .icona.tema { margin-left: 6px; }

/* alternative (colonna di destra) sempre visibili nella dieta */
.alternative { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 4px 0 2px; font-size: 13px; }
.alternative > span:first-child { color: var(--testo-2); font-style: italic; margin-right: 2px; }
.alternative .alt { background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: 999px; padding: 1px 9px; color: var(--testo); }

/* lista della spesa: carrello e "Non c'e'" con le alternative */
.voce-spesa { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.voce-spesa .voce-principale { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 0; margin: 0; color: var(--testo); font-size: 16px; }
.voce-spesa .voce-principale input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primario); }
.voce-spesa.presa .voce-principale span { opacity: .6; }
.voce-spesa.presa .voce-principale b { text-decoration: line-through; }
.non-ce { flex: 0 0 auto; border: 1px solid var(--bordo); background: var(--superficie-2); color: var(--testo); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; font-weight: 600; }
.non-ce.aperto { border-color: var(--primario); }
.alternative-spesa { flex-basis: 100%; display: grid; gap: 6px; padding: 8px 0 2px 34px; }
.alt-spesa { display: flex; gap: 10px; align-items: center; margin: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bordo);
  background: var(--superficie-2); color: var(--testo); font-size: 15px; }
.alt-spesa input { width: 20px; height: 20px; margin: 0; accent-color: var(--primario); }
.preso-invece { color: var(--primario); font-weight: 600; }
.link-annulla { justify-self: start; background: none; border: 0; color: var(--testo-2); text-decoration: underline; font-size: 13px; padding: 2px 0; }
.voce-spesa.presa span { text-decoration: none; }
.voce-spesa.presa .voce-principale b { text-decoration: line-through; }

/* Mi nutro: principale (verde, spuntata) e alternative da toccare */
.alimenti li.con-opzioni { list-style: none; margin-left: -18px; padding: 4px 0; }
.opzioni { display: flex; flex-wrap: wrap; gap: 6px; }
.opz { display: inline-flex; align-items: center; gap: 6px; text-align: left; font: inherit; font-size: 14px; line-height: 1.3;
  padding: 7px 11px; border-radius: 10px; cursor: pointer; color: var(--testo); transition: background .15s, border-color .15s; }
.opz .spunta { display: none; font-weight: 700; }
.opz.selezionata .spunta { display: inline; }
.opz.principale { background: transparent; border: 1.5px solid color-mix(in srgb, var(--primario) 55%, var(--bordo)); }
.opz.principale.selezionata { background: var(--primario); border-color: var(--primario); color: #fff; }
.opz.principale.selezionata b, .opz.principale.selezionata .nota-grigia { color: #fff; }
.opz.alt { background: rgba(32, 107, 196, .10); border: 1.5px dashed rgba(66, 153, 225, .55); color: var(--testo-2); }
.opz.alt.selezionata { background: #206bc4; border-style: solid; border-color: #206bc4; color: #fff; }

/* alimento tolto (non mangiato) e avviso sui valori indicativi */
.opz.principale.tolta { border-style: dashed; border-color: var(--bordo); color: var(--testo-2); opacity: .75; }
.opz.principale.tolta .testo-opz { text-decoration: line-through; }
.opz.principale.tolta::after { content: "non mangiato"; font-size: 11px; font-weight: 600; margin-left: 4px; color: #e5484d; }
.avviso-valori { border-left-color: #f59e0b; font-size: 13px; line-height: 1.45; color: var(--testo-2); }
.avviso-valori b { color: var(--testo); }

/* --- Skeleton di caricamento (riquadri grigi mentre i dati arrivano) --- */
.skeleton-lista { padding: 4px 0; }
.skeleton-card {
  background: var(--sfondo-card);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}
.skeleton-foto {
  float: left; width: 80px; height: 80px; margin-right: 12px;
  background: var(--bordo); border-radius: 8px; opacity: .45;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}
.skeleton-riga {
  height: 14px; background: var(--bordo); border-radius: 6px;
  opacity: .45; margin-bottom: 10px;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}
.skeleton-testo-1 { margin-left: 92px; width: 60%; height: 18px; }
.skeleton-testo-2 { margin-left: 92px; width: 40%; height: 12px; }
.skeleton-bottoni { clear: both; height: 32px; width: 100%; margin-top: 14px; }
@keyframes skeleton-pulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: .65; }
}

/* --- Badge e pannello dei TEST della scheda --- */
.test-risultato {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.test-risultato.test-fatto {
  background: color-mix(in srgb, #10b981 18%, transparent);
  color: #10b981;
  border-left: 3px solid #10b981;
}
.test-risultato.test-fatto b { color: inherit; font-size: 15px; }
.test-risultato.test-dacompilare {
  background: color-mix(in srgb, #b3261e 18%, transparent);
  color: #f0a89f;
  border-left: 3px solid #b3261e;
  font-weight: 600;
}
.test-risultato .material-symbols-rounded { font-size: 18px; }

.azioni .azione-test {
  background: #b3261e;
  color: white;
  font-weight: 700;
}
.azioni .azione-test.attivo { background: #7f1d1d; }

/* --- Contatore serie: pulsante grigio "N serie fatta/e", flash verde al click --- */
.azioni .azione-serie {
  background: color-mix(in srgb, var(--testo) 8%, transparent) !important;
  color: var(--testo) !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}
.azioni .azione-serie.azione-serie-verde {
  background: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.4) !important;
  transform: scale(1.04);
}
/* Pulsante finale (tutte le serie completate): verde permanente, non cliccabile */
.azioni .azione-fine-verde,
.azioni .azione-fine-verde:disabled {
  background: #16a34a !important;
  color: #ffffff !important;
  cursor: default !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.35) !important;
}

/* Serie per serie: conteggio ben visibile + tabella (punti 2 e 3, 24/10/2026) */
.serie-prog { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.serie-prog .serie-num { font-size: 15px; font-weight: 700; }
.pallini { display: flex; gap: 6px; }
.pallino { width: 13px; height: 13px; border-radius: 99px; border: 2px solid var(--bordo); background: transparent; }
.pallino.on { background: var(--primario); border-color: var(--primario); }
.pallino.corrente { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.tab-serie { width: 100%; border-collapse: collapse; margin: 2px 0 2px; font-variant-numeric: tabular-nums; }
.tab-serie th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--testo-2);
  text-align: left; padding: 2px 6px; font-weight: 700; }
.tab-serie th:last-child { text-align: right; }
.tab-serie td { padding: 7px 6px; border-top: 1px solid var(--bordo); vertical-align: middle; }
.tab-serie .sp-n { width: 20px; color: var(--testo-2); font-weight: 700; }
.tab-serie .sp-prev { color: var(--testo-2); font-size: 14px; }
.tab-serie .sp-f { text-align: right; white-space: nowrap; }
.tab-serie tr.corrente td { background: rgba(34, 197, 94, 0.09); }
.tab-serie tr.done .sp-fatto { color: var(--primario); font-weight: 600; }
.sp-ok { font-weight: 800; }
.sp-vuoto { color: var(--bordo); }
.sp-chip { background: var(--primario); color: #052e16; border: 0; border-radius: 99px; padding: 6px 14px;
  font-weight: 700; font-size: 13px; cursor: pointer; }
.sp-matita { background: none; border: 0; color: var(--testo-2); font-size: 15px; padding: 4px 6px; margin-left: 6px; cursor: pointer; }
.azioni .azione-annulla { color: var(--giallo) !important; }
.azioni .azione-annulla:disabled { opacity: 0.4; cursor: default; }
.azioni .azione-conferma { background: #16a34a !important; color: #ffffff !important; font-weight: 700; }

/* avviso della fase beta al primo accesso (privacy.js) */
.avviso-beta { border: 2px solid #dc2626; background: rgba(220, 38, 38, 0.12); border-radius: 12px; padding: 12px 14px; margin: 12px 0; line-height: 1.45; }
.avviso-beta b { color: #ef4444; }

/* funzioni del personal nell'app (personal.js) */
.modifica-valori { background: none; border: 1px dashed var(--bordo); color: var(--testo-secondario); border-radius: 8px;
  padding: 4px 10px; font-size: 13px; margin-top: 6px; width: auto; cursor: pointer; }
.azioni-personal { display: flex; gap: 8px; margin: 4px 0 14px; }
.azioni-personal button { flex: 1; margin: 0; }
.griglia-campi-app { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 8px; }
.griglia-campi-app label { font-size: 13px; color: var(--testo-secondario); display: flex; flex-direction: column; gap: 4px; }
/* BIA: valore calcolato dall'altro della coppia (% <-> kg) col peso */
.griglia-campi-app input[data-calcolato] { border-style: dashed; color: var(--testo-2); }
#mf-detta.attivo { background: #dc2626; color: #fff; border-color: #dc2626; }
.peso-live { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #10b981 14%, transparent); font-size: 14px; }
.scelta-ingresso { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scelta-ingresso > label, .scelta-ingresso > button { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px; padding: 12px 8px; margin: 0; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 14px; }
.scelta-ingresso small { font-weight: 400; font-size: 11px; opacity: .85; }
/* contatore dei circuiti (giro N di M, esercizi fatti) */
.contatore-circuito { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 8px;
  padding: 10px 14px; border-radius: 12px; border: 2px solid var(--bordo); background: var(--sfondo-card, transparent); font-size: 15px; }
.contatore-circuito.finito { border-color: #16a34a; background: color-mix(in srgb, #16a34a 14%, transparent); }
.contatore-circuito .pallini { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.contatore-circuito .pallino { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bordo); }
.contatore-circuito .pallino.fatto { background: #16a34a; border-color: #16a34a; }
.azioni .azione-circuito { background: color-mix(in srgb, var(--testo) 8%, transparent) !important; color: var(--testo) !important; font-weight: 700; }

/* pacchetti di personal e pagamenti in scadenza (pacchetti.js) */
.avviso-pagamenti { border: 1px solid #d97706; background: color-mix(in srgb, #d97706 14%, transparent); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.avviso-pagamenti > b { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pacchetto-cliente h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-2); margin: 16px 0 6px; }
.conti-pacchetto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.conti-pacchetto > div { border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 12px; }
.conti-pacchetto b { display: block; font-size: 18px; }
.conti-pacchetto small { color: var(--testo-2); font-size: 12px; }
.barra-pacchetto { height: 8px; border-radius: 4px; background: var(--bordo); overflow: hidden; margin-top: 10px; }
.barra-pacchetto span { display: block; height: 100%; background: var(--primario); }
.riga-seduta { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bordo); font-size: 14px; }
.orari-liberi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.orari-liberi button { padding: 10px 14px; }
/* il calendario del personal nella pagina Prenota (pacchetti.js, calendarioLiberi) */
.cal-giorni { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; }
.cal-giorno { flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; margin: 0;
  border: 1px solid var(--bordo); border-radius: 10px; background: var(--superficie-2); color: var(--testo); }
.cal-giorno b { font-size: 18px; line-height: 1.1; }
.cal-giorno small { font-size: 11px; color: var(--testo-2); }
.cal-giorno small:last-child { color: var(--primario); font-weight: 600; }
.cal-giorno.scelto { border-color: var(--primario); box-shadow: inset 0 0 0 1px var(--primario); }
.cal-giorno.pieno { opacity: .45; cursor: default; }
.cal-giorno.pieno small:last-child { color: var(--testo-2); font-weight: 400; }
.cal-titolo { width: 100%; margin: 0; }
.riga-seduta.in-programma { align-items: center; }
.riga-seduta.in-programma small { display: block; color: var(--testo-2); font-size: 12px; }
.azioni-seduta { display: flex; gap: 6px; }
.azioni-seduta button { padding: 8px 12px; }

/* app del personal: Oggi, Calendario, Ore (app-personal.js) */
.numeri-personal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.numeri-personal > div { border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 6px; text-align: center; background: var(--superficie); }
.numeri-personal b { display: block; font-size: 20px; }
.numeri-personal small { color: var(--testo-2); font-size: 11px; line-height: 1.2; display: block; }
.app-personal { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--bordo); border-left: 4px solid #d97706; border-radius: 10px; }
.app-personal.richiesta { border-left-color: #7c3aed; }
.app-personal.confermato { border-left-color: var(--primario); background: color-mix(in srgb, var(--primario) 14%, var(--superficie)); }
.app-personal.persa { border-left-color: #e5484d; opacity: .8; }
.app-personal .testo { min-width: 0; }
.app-personal .testo b, .app-personal .testo span, .app-personal .testo small { display: block; }
.app-personal .testo small { color: var(--testo-2); font-size: 12px; }
.azioni-app { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.azioni-app button { padding: 8px 12px; font-size: 13px; }
.riga-personal { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bordo); font-size: 14px; }
.riga-personal:last-child { border-bottom: 0; }
.riga-personal small { display: block; color: var(--testo-2); font-size: 12px; }
.riga-personal .quando { flex: 0 0 auto; text-align: right; font-size: 13px; color: var(--testo-2); }
.riga-personal .quando.tardi { color: #fca5a5; }
.domanda-ore { border: 1px solid var(--bordo); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.domanda-ore b, .domanda-ore span { display: block; }
.domanda-ore span { color: var(--testo-2); font-size: 13px; margin-bottom: 4px; }
.domanda-ore.risposta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.domanda-ore.risposta span { flex: 1; margin: 0; }
.domanda-ore .largo { margin-top: 10px; }
.due-ore { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modi-calendario { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 10px 0; }
.modi-calendario button { padding: 8px 2px; font-size: 13px; border-radius: 10px; border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo-2); font-weight: 600; }
.modi-calendario button.attivo { background: var(--primario); border-color: var(--primario); color: #fff; }
.nav-calendario { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.nav-calendario button { padding: 6px 16px; font-size: 20px; line-height: 1; }
.mese-personal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mese-personal.intestazione { margin-bottom: 4px; }
.mese-personal.intestazione span { text-align: center; font-size: 11px; color: var(--testo-2); font-weight: 700; }
.mese-personal button { aspect-ratio: 1; border: 1px solid var(--bordo); border-radius: 8px; background: var(--superficie); color: var(--testo); padding: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mese-personal button.oggi { border-color: var(--primario); }
.mese-personal button.pieno { background: var(--superficie-2); }
.mese-personal button b { font-size: 14px; }
.mese-personal button small { font-size: 11px; color: var(--primario); font-weight: 700; display: flex; align-items: center; gap: 3px; }
.mese-personal button small i { width: 6px; height: 6px; border-radius: 50%; background: #d97706; display: inline-block; }
.anno-personal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.anno-personal button { border: 1px solid var(--bordo); border-radius: 10px; background: var(--superficie); color: var(--testo); padding: 10px; text-align: left; }
.anno-personal button.pieno { border-color: var(--primario); }
.anno-personal button b { display: block; }
.anno-personal button small { color: var(--testo-2); font-size: 11.5px; }
.giorno-lista { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; background: none; border: 0;
  border-bottom: 1px solid var(--bordo); color: var(--testo); padding: 12px 0 6px; margin-bottom: 8px; text-align: left; text-transform: capitalize; }
.giorno-lista.oggi b { color: var(--primario); }
.giorno-lista small { color: var(--testo-2); font-size: 12px; text-transform: none; }
/* sabati e domeniche evidenziati nel calendario del personal */
.mese-personal button.sabato { background: color-mix(in srgb, #f59e0b 12%, var(--superficie)); }
.mese-personal button.domenica { background: color-mix(in srgb, #ef4444 14%, var(--superficie)); }
.mese-personal button.sabato b, .mese-personal.intestazione .sabato, .giorno-lista.sabato b, .nav-calendario b.sabato { color: #f59e0b; }
.mese-personal button.domenica b, .mese-personal.intestazione .domenica, .giorno-lista.domenica b, .nav-calendario b.domenica { color: #ef4444; }
/* eventi liberi del calendario del personal */
.evento-personal { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 8px; color: var(--testo);
  border: 1px solid var(--bordo); border-left: 4px solid #3b82f6; border-radius: 10px; background: color-mix(in srgb, #3b82f6 10%, var(--superficie)); }
.evento-personal b, .evento-personal span, .evento-personal small { display: block; }
.evento-personal small { color: var(--testo-2); font-size: 12px; }
.form-evento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-evento label { display: block; font-size: 13px; }
.form-evento label span { display: block; color: var(--testo-2); margin-bottom: 4px; }
.form-evento .intero, .form-evento button, .form-evento .bottoni-foglio { grid-column: 1 / -1; }
.form-evento .bottoni-foglio button { grid-column: auto; }
.form-evento .spunta { display: flex; gap: 8px; align-items: center; }
.form-evento .spunta input { width: auto; }
.form-evento select[size] { height: auto; padding: 4px; }
.form-evento select[size] option { padding: 8px; border-radius: 6px; }
/* oggi ben riconoscibile nel calendario del personal (vince anche sul colore del fine settimana) */
.pillola-oggi { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--primario); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.mese-personal button.oggi { border: 2px solid var(--primario); background: color-mix(in srgb, var(--primario) 18%, var(--superficie)); }
.mese-personal button.oggi b { background: var(--primario); color: #fff; border-radius: 50%; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; }
.giorno-lista.oggi { border-bottom: 2px solid var(--primario); }
.giorno-lista.oggi b { color: var(--primario); }
/* ore di lavoro fisso in palestra / studio nel calendario del personal */
.lavoro-personal { padding: 9px 12px; margin-bottom: 8px; border: 1px solid var(--bordo); border-left: 4px solid #db2777; border-radius: 10px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, #db2777 14%, var(--superficie)) 0 8px, color-mix(in srgb, #db2777 6%, var(--superficie)) 8px 16px); }
.lavoro-personal b, .lavoro-personal span, .lavoro-personal small { display: block; }
.lavoro-personal small { color: var(--testo-2); font-size: 12px; }
/* "Lavori come": scelta dell'account (in proprio o una palestra) in cima a "Oggi" */
.lavori-come { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 12px; border: 1px solid var(--primario); border-radius: 12px;
  background: color-mix(in srgb, var(--primario) 12%, var(--superficie)); font-size: 14px; }
.lavori-come span { white-space: nowrap; font-weight: 700; }
.lavori-come select { flex: 1; min-width: 0; margin: 0; }
/* "Lavori come" nella barra in alto, a sinistra del logo */
.lavori-come-barra { display: flex; flex-direction: column; gap: 1px; flex: 0 1 140px; min-width: 0; margin: 0; }
.lavori-come-barra[hidden] { display: none; }
.lavori-come-barra small { font-size: 10px; font-weight: 700; color: var(--primario); line-height: 1; white-space: nowrap; }
.lavori-come-barra select { width: 100%; margin: 0; padding: 3px 6px; font-size: 12px; min-height: 0; height: auto;
  border: 1px solid var(--primario); background: color-mix(in srgb, var(--primario) 12%, var(--superficie)); }
.lavoro-personal.timbrato { border-left-color: #06b6d4; background: color-mix(in srgb, #06b6d4 22%, var(--superficie)); }
.lavoro-personal.timbrato small { color: #67e8f9; font-weight: 700; }
.lavoro-personal.assente { opacity: .6; text-decoration: line-through; }

/* App del personal in stile gadget, come la schermata "Oggi" (body.stile-gadget, acceso da barraAltaPersonal):
   riquadri arrotondati con una leggera sfumatura del loro colore (--c) e l'icona colorata nel titolo (h2[data-icona]) */
body.stile-gadget .sezione { --c: var(--primario); margin-top: 12px; padding: 12px 14px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--bordo));
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, var(--superficie)), var(--superficie) 55%);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06); }
body.stile-gadget .sezione > h2 { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; margin: 0 0 10px; }
body.stile-gadget .sezione > h2[data-icona]::before { content: attr(data-icona); font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
  font-size: 19px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
body.stile-gadget .sezione > h2 .pillola { margin-left: auto; }
body.stile-gadget .sottoschede { border-radius: 14px; }
body.stile-gadget .sottoschede button { border-radius: 11px; }
body.stile-gadget .app-personal, body.stile-gadget .evento-personal, body.stile-gadget .lavoro-personal, body.stile-gadget .domanda-ore { border-radius: 12px; }
body.stile-gadget .riquadro { border-radius: 18px; }
body.stile-gadget .numeri-personal > div { border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, #3b82f6 10%, var(--superficie)), var(--superficie) 60%); }
body.stile-gadget .modi-calendario button { border-radius: 999px; }
body.stile-gadget .nav-calendario button, body.stile-gadget #cal-oggi { border-radius: 12px; }
body.stile-gadget .mese-personal button { border-radius: 12px; }
body.stile-gadget .anno-personal button { border-radius: 16px; padding: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--primario) 8%, var(--superficie)), var(--superficie) 60%); }
body.stile-gadget .giorno-lista { padding: 10px 12px; margin: 12px 0 8px; border: 1px solid var(--bordo); border-radius: 14px; background: var(--superficie); }
body.stile-gadget .giorno-lista.oggi { border: 1px solid var(--primario); background: color-mix(in srgb, var(--primario) 12%, var(--superficie)); }
body.stile-gadget .scelta { border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--primario) 8%, var(--superficie)), var(--superficie) 55%);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06); }
body.stile-gadget #cerca-cliente { border-radius: 12px; }
body.stile-gadget .sezione .secondario.largo { border: 1px dashed color-mix(in srgb, var(--c) 55%, var(--bordo)); border-radius: 12px; margin-top: 8px;
  background: color-mix(in srgb, var(--c) 8%, transparent); color: color-mix(in srgb, var(--c) 70%, var(--testo)); }
body.stile-gadget .riquadro.promemoria { border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--bordo)); border-left: 1px solid color-mix(in srgb, #f59e0b 30%, var(--bordo));
  background: linear-gradient(160deg, color-mix(in srgb, #f59e0b 12%, var(--superficie)), var(--superficie) 60%); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06); }
body.stile-gadget .sezione .riquadro.promemoria { border: 0; background: none; box-shadow: none; padding: 0; }
/* "Modifica" ed "Esci" in fondo alla home e a "Oggi": stessa altezza anche con l'icona */
#modifica-oggi, #esci-oggi, #modifica-home, #esci, #torna-lista, #partenza-clienti { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 42px; width: auto;
  vertical-align: middle; margin: 0 3px 6px !important; padding-top: 0; padding-bottom: 0; }
/* giorni della settimana nei corsi dell'app del personal: nome sopra, numero sotto */
.giorno-corsi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px !important; }
.giorno-corsi br { display: none; }
/* "Torna alla home" in fondo alle funzioni dell'app del personal */
.torna-home { max-width: 640px; margin: 4px auto 28px; padding: 0 16px; text-align: center; }
.torna-home[hidden] { display: none; }
.torna-home button { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 999px; width: auto; }
/* App del cliente nello stile dei gadget (stesso body.stile-gadget): dentro una sezione-gadget i riquadri interni
   (grafici, tabelle, avvisi) perdono la loro cornice, cosi' non ci sono riquadri dentro riquadri */
body.stile-gadget .sezione .grafico, body.stile-gadget .sezione > .riquadro { border: 0; background: none; padding: 0; box-shadow: none; }
body.stile-gadget .sezione .grafico.barre { padding: 0; }
body.stile-gadget .sezione .tabella { margin-top: 4px; }
body.stile-gadget .sezione .spiega { border-radius: 12px; background: color-mix(in srgb, var(--c) 6%, var(--superficie)); }
body.stile-gadget .sezione .valore { border-radius: 14px; background: color-mix(in srgb, var(--c) 6%, var(--superficie)); }
body.stile-gadget .card { border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--primario) 7%, var(--superficie)), var(--superficie) 55%);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06); }
body.stile-gadget .card .foto { border-radius: 12px; overflow: hidden; }
body.stile-gadget .banda { border-radius: 14px; }
body.stile-gadget .riquadro { border-radius: 18px; }
body.stile-gadget .linguetta { padding: 8px 16px; }
body.stile-gadget .sezione > h2 { flex-wrap: wrap; }
body.stile-gadget .sezione > h2[data-icona] > small { flex-basis: 100%; padding-left: 39px; margin-top: -8px; font-size: 12px; font-weight: 400; }
body.stile-gadget .riquadro:not(.promemoria) { border: 1px solid color-mix(in srgb, var(--primario) 30%, var(--bordo));
  background: linear-gradient(160deg, color-mix(in srgb, var(--primario) 12%, var(--superficie)), var(--superficie) 60%); }
body.stile-gadget .riquadro.da-segnare { border-color: color-mix(in srgb, #f59e0b 35%, var(--bordo));
  background: linear-gradient(160deg, color-mix(in srgb, #f59e0b 12%, var(--superficie)), var(--superficie) 60%); }
/* pagina di un gadget nell'app del personal: il gadget a tutta larghezza, senza cornice (sta gia' nel riquadro) */
.gh-intera .gh-gadget { border: 0; background: none; box-shadow: none; padding: 0; overflow: visible; }
.gh-intera .gh-corpo { overflow: visible; font-size: 14px; }
.gh-intera .gh-voce { padding: 8px 0; }
/* sezioni che si aprono toccando il titolo (Impostazioni del cliente) */
.sezione.apribile > h2 { cursor: pointer; margin-bottom: 0; user-select: none; }
.sezione.apribile > h2::after { content: "expand_more"; font-family: "Material Symbols Rounded"; font-weight: normal; font-size: 22px; line-height: 1;
  margin-left: auto; color: var(--testo-2); transition: transform .15s; font-feature-settings: "liga"; }
.sezione.apribile > h2[aria-expanded="true"]::after { transform: rotate(180deg); }
.sezione.apribile > .corpo-sezione { margin-top: 10px; }
/* sezioni dentro una sezione che si apre (Impostazioni, Account -> dati personali): senza cornice doppia */
.corpo-sezione .sezione { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin-top: 14px; }
/* corsi nell'app del cliente: compreso nell'abbonamento, lezione singola a pagamento, non incluso */
.pillola-corso { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pillola-corso.incluso { background: rgba(34,197,94,.16); color: #16a34a; }
.pillola-corso.pagamento { background: rgba(245,158,11,.18); color: #d97706; }
.pillola-corso.non-incluso { background: rgba(239,68,68,.15); color: #ef4444; }
.chiama-segreteria { font-size: 12px; font-weight: 700; color: var(--primario); margin-left: 6px; }
/* avvisi da confermare: finestra sopra a tutto (si chiude solo con "Avviso letto") */
.avviso-modale-velo { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 18px; }
.avviso-modale { width: 100%; max-width: 420px; background: var(--superficie); color: var(--testo); border: 1px solid color-mix(in srgb, var(--primario) 35%, var(--bordo));
  border-radius: 20px; padding: 22px 18px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.45); max-height: 90vh; overflow-y: auto; }
.avviso-modale-icona { font-size: 30px; width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primario) 18%, transparent); color: var(--primario); }
.avviso-modale h3 { margin: 10px 0 8px; font-size: 18px; }
.avviso-modale p { margin: 0 0 16px; color: var(--testo-2); font-size: 14px; line-height: 1.5; text-align: left; }
/* banner pubblicitario: previsto, oggi nascosto */
.banner-pubblicita { max-width: 640px; margin: 8px auto 0; padding: 0 16px; }
.banner-pubblicita[hidden] { display: none; }
/* banner dell'offerta destinata al cliente (0119): in cima alle pagine finche' non la legge */
.banner-offerta { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); max-width: 608px; margin: 12px auto 0; padding: 10px 14px; text-align: left;
  border-radius: 16px; border: 1px solid color-mix(in srgb, #ec4899 40%, var(--bordo)); color: var(--testo); cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, #ec4899 22%, var(--superficie)), color-mix(in srgb, #f59e0b 14%, var(--superficie))); }
.banner-offerta[hidden] { display: none; }
.banner-offerta > .material-symbols-rounded { font-size: 26px; color: #ec4899; }
.banner-offerta b, .banner-offerta small { display: block; }
.banner-offerta small { color: var(--testo-2); font-size: 12px; }
/* notizie della palestra (app.js, vistaNotizie): striscia in cima e pagina */
.banner-notizia { border-color: color-mix(in srgb, #3b82f6 40%, var(--bordo));
  background: linear-gradient(135deg, color-mix(in srgb, #3b82f6 20%, var(--superficie)), color-mix(in srgb, #ec4899 12%, var(--superficie))); }
.banner-notizia > .material-symbols-rounded { color: #3b82f6; }
.notizia { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 18px; overflow: hidden; margin-bottom: 14px; }
.notizia.nuova { border-color: color-mix(in srgb, #3b82f6 55%, var(--bordo)); }
.notizia img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.notizia-corpo { padding: 12px 16px 14px; }
.notizia-corpo h2 { font-size: 18px; margin: 4px 0 2px; }
.notizia-corpo p { margin: 8px 0 0; white-space: pre-line; line-height: 1.45; }
.notizia-etichetta { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; margin-right: 6px;
  background: color-mix(in srgb, #f59e0b 20%, transparent); color: #d97706; }
.notizia-etichetta.nuova { background: color-mix(in srgb, #3b82f6 20%, transparent); color: #3b82f6; }
/* sondaggi della palestra (app.js, vistaSondaggi) */
.banner-sondaggio { border-color: color-mix(in srgb, #8b5cf6 40%, var(--bordo));
  background: linear-gradient(135deg, color-mix(in srgb, #8b5cf6 20%, var(--superficie)), color-mix(in srgb, #22c55e 10%, var(--superficie))); }
.banner-sondaggio > .material-symbols-rounded { color: #8b5cf6; }
.sondaggio { margin-bottom: 26px; }
.sondaggio h2 { font-size: 20px; margin: 0 0 4px; }
.sd-domanda-app { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 16px; padding: 12px 14px; margin: 10px 0; }
.sd-domanda-app > b { display: block; margin-bottom: 10px; }
.sd-domanda-app textarea { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--bordo); background: var(--sfondo); color: var(--testo); padding: 10px; font: inherit; }
.sd-stelle { display: flex; gap: 6px; }
.sd-stelle button { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--bordo); }
.sd-stelle button .material-symbols-rounded { font-size: 40px; font-variation-settings: "FILL" 1; }
.sd-stelle button.scelto { color: #f59e0b; }
.sd-nps { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; }
.sd-nps button { padding: 9px 0; border-radius: 8px; border: 1px solid var(--bordo); background: var(--sfondo); color: var(--testo); font-weight: 700; cursor: pointer; }
.sd-nps button.scelto { background: var(--primario); border-color: var(--primario); color: #fff; }
.sd-nps-legenda { display: flex; justify-content: space-between; margin-top: 4px; color: var(--testo-2); }
.sd-pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-pillole button { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--bordo); background: var(--sfondo); color: var(--testo); font: inherit; font-weight: 600; cursor: pointer; }
.sd-pillole button.scelto { background: color-mix(in srgb, var(--primario) 18%, var(--superficie)); border-color: var(--primario); }
/* il certificato medico in "Il mio abbonamento" (app.js, azioniCertificato) */
.azioni-certificato { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.azioni-certificato:empty { display: none; }
.azioni-certificato > button { width: auto; margin: 0; padding: 9px 12px; }
.azioni-certificato .material-symbols-rounded { font-size: 18px; }
.azioni-certificato [data-cert-modulo] { flex-basis: 100%; }
.azioni-certificato [data-cert-modulo] button { margin-top: 10px; }

/* Quanta gente c'e' in palestra (vistaAffollamento in app.js) */
.gente-giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 6px 0; }
.gente-giorni button { padding: 8px 0; font-size: 13px; border-radius: 10px; border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo-2); font-weight: 600; margin: 0; }
.gente-giorni button.attivo { background: var(--primario); border-color: var(--primario); color: #fff; }
.gente-riga { display: grid; grid-template-columns: 46px 1fr 104px; gap: 8px; align-items: center; padding: 3px 4px; border-radius: 8px; font-size: 13px; }
.gente-riga.adesso { background: color-mix(in srgb, var(--primario) 14%, transparent); font-weight: 700; }
.gente-ora { color: var(--testo-2); font-variant-numeric: tabular-nums; }
.gente-barra { height: 12px; border-radius: 6px; background: var(--bordo); overflow: hidden; }
.gente-barra span { display: block; height: 100%; border-radius: 6px; }
.gente-testo { font-size: 12px; font-weight: 600; text-align: right; }

/* "Installa FitStack sul telefono" (installa.js, home del cliente) */
.banner-installa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 14px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--bordo); background: color-mix(in srgb, var(--primario) 10%, transparent); }
.banner-installa-testo { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--testo-2); }
.banner-installa-testo strong { color: inherit; font-size: 14px; }
.banner-installa-bottoni { display: flex; gap: 8px; }
.banner-installa-bottoni button { width: auto; margin: 0; padding: 8px 14px; }

/* "Nuova versione dell'app: tocca per aggiornare" (app.js, avvio) */
.banda-aggiorna { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 3000; margin: 0;
  padding: 14px 16px; border-radius: 14px; border: 0; background: var(--primario); color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); cursor: pointer; }

/* guida durante l'allenamento e sensazioni a fine seduta (guida-allenamento.js) */
.guida-serie { margin-top: 6px; padding: 6px 10px; border-radius: 8px; font-size: 13px; line-height: 1.35;
  background: color-mix(in srgb, #fbbf24 14%, transparent); border-left: 3px solid #fbbf24; }
.guida-serie.ora { background: color-mix(in srgb, #22c55e 16%, transparent); border-left-color: #22c55e; }
.tecnica-modo { font-weight: 400; color: var(--testo-2); font-size: 13px; }
.riga-tecnica { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.info-tecnica { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 2px;
  padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; cursor: pointer; }
.info-tecnica .material-symbols-rounded { font-size: 22px; }
.come-si-fa { margin-left: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; background: transparent;
  color: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.testo-tecnica { white-space: pre-line; line-height: 1.5; font-size: 15px; }
.bottone-sensazione { display: block; width: 100%; margin: 14px 0 6px; padding: 14px; border-radius: 14px; font-size: 15px;
  border: 1px dashed var(--bordo, #555); background: transparent; color: inherit; cursor: pointer; }
.sens-voti { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 12px 0 4px; }
.sens-voti button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border-radius: 12px;
  border: 2px solid var(--bordo, #555); background: transparent; color: inherit; font-size: 12px; cursor: pointer; }
.sens-voti button span { font-size: 28px; line-height: 1; }
.sens-titolo { margin: 14px 0 6px; font-weight: 600; font-size: 14px; }
.sens-etichette { display: flex; flex-wrap: wrap; gap: 6px; }
.sens-etichette button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bordo, #555); background: transparent;
  color: inherit; font-size: 13px; cursor: pointer; }
.sens-fatica { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.sens-fatica button { padding: 8px 0; border-radius: 8px; border: 1px solid var(--bordo, #555); background: transparent; color: inherit;
  font-weight: 700; cursor: pointer; }
.sens-voti button.scelto, .sens-etichette button.scelto, .sens-fatica button.scelto { border-color: #22c55e;
  background: color-mix(in srgb, #22c55e 22%, transparent); }

/* pulsante "Invia scheda" nell'elenco dei clienti del personal: si ingrandisce al passaggio (prima era un onmouseover,
   tolto per le regole severe del browser, 22/10/2026) */
.bottone-invia-scheda:hover { transform: scale(1.05); }

/* Mi nutro stile Fitatu (30/10/2026, mi-nutro.js): scelta iniziale, pasti con Aggiungi, barra di calorie e macro in fondo */
.mn-bivio h2 { margin: 6px 0 4px; }
.mn-scelta { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; margin: 12px 0; padding: 18px 16px;
  border-radius: var(--raggio); border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo); }
.mn-scelta .material-symbols-rounded { font-size: 34px; color: var(--primario); }
.mn-scelta small { color: var(--testo-2); }
.mn-avviso { display: block; width: 100%; text-align: left; border-left-color: #f59e0b; color: var(--testo); }
.mn-link { background: none; border: 0; color: var(--testo-2); text-decoration: underline; font-size: 13px; padding: 2px 0; }
.mn-pasto { padding: 12px 14px; margin-bottom: 10px; }
.mn-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mn-voci { list-style: none; margin: 8px 0 0; padding: 0; }
.mn-voci li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--bordo); }
.mn-voci li > span:first-child { flex: 1; min-width: 0; }
.mn-kcal { font-weight: 600; white-space: nowrap; }
.mn-togli { background: none; border: 0; color: var(--testo-2); font-size: 15px; padding: 4px 6px; }
.mn-aggiungi { display: flex; align-items: center; gap: 4px; margin-top: 8px; background: none; border: 0; color: var(--primario);
  font-weight: 700; padding: 6px 0; }
.mn-risultati { max-height: 45vh; overflow-y: auto; margin: 8px 0; }
.mn-risultato { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 11px 4px; background: none;
  border: 0; border-bottom: 1px solid var(--bordo); color: var(--testo); }
.mn-risultato small { color: var(--testo-2); white-space: nowrap; }
.mn-rapidi { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.mn-rapidi button { padding: 6px 10px; }
.mn-macro-ricetta { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; margin: 8px 0; }
.mn-macro-ricetta span { color: var(--testo-2); font-size: 14px; }
.ricetta-aggiunta { margin: 6px 0 10px; padding: 8px 10px; border-left: 3px solid var(--primario); border-radius: 6px;
  background: color-mix(in srgb, var(--primario) 12%, transparent); font-size: 14px; }
.barra-macro { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 5; margin-top: 14px; padding: 10px 14px;
  border-radius: var(--raggio); border: 1px solid var(--bordo); background: color-mix(in srgb, var(--superficie) 94%, transparent);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .25); backdrop-filter: blur(6px); }
body.con-navbar .barra-macro { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
/* nel diario la barra arriva dopo (contenitore #mn-barra): sticky il contenitore, la barra dentro no */
#mn-barra { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
body.con-navbar #mn-barra { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
#mn-barra .barra-macro { position: static; }
.bm-kcal { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bm-kcal b { font-size: 20px; }
.bm-resta { color: var(--primario); font-size: 13px; font-weight: 600; }
.bm-oltre { color: #f76707; font-size: 13px; font-weight: 600; }
.bm-barra { height: 6px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.bm-barra span { display: block; height: 100%; border-radius: 99px; }
.bm-grande { height: 8px; margin: 6px 0 8px; }
.bm-righe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bm-nome { font-size: 11px; color: var(--testo-2); margin-bottom: 3px; }
.bm-numeri { font-size: 11px; margin-top: 3px; white-space: nowrap; }