/* ===========================================================================
   Area riservata — "Il mio percorso" dentro Il mio account.
   Si carica solo sulle pagine account (vedi sv_enqueue_assets).

   Il layout ricalca il mockup della consegna: sei linguette, riepilogo a due
   colonne con la colonna laterale appiccicata, finestre per spostare e
   disdire. Le due colonne si chiamano `.svp-due-colonne` e non `-split`:
   `sv-responsive.css` collassa da solo tutto quello che finisce per `-split`
   a 960px, e qui la colonna laterale deve reggere fino a 900.
   =========================================================================== */

/* La voce attiva del menu account: WooCommerce la colora di nero, che qui non
   è un colore del progetto e stacca da tutto il resto. */
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--accent) !important;
  color: var(--bg) !important;
}
.woocommerce-MyAccount-navigation a:hover { color: var(--accent); }

/* ===== La pagina di accesso =====
   Vive nello stesso foglio dell'area perché è la stessa pagina di WordPress
   (Il mio account, da sloggati): un foglio a parte non avrebbe un momento in
   cui caricarsi da solo. */
.sv-accesso {
  display: grid; grid-template-columns: 1fr .9fr; gap: 56px; align-items: start;
  padding: 24px 0 40px;
}
.sv-accesso-testo { display: flex; flex-direction: column; gap: 20px; }
.sv-accesso-testo h1 { font-size: 46px; line-height: 1.07; font-weight: 300; }
.sv-accesso-testo .lead { font-size: 18px; line-height: 1.7; color: var(--ink-soft); max-width: 520px; }
.sv-accesso-punti { display: flex; flex-direction: column; gap: 11px; }
.sv-accesso-punti li {
  position: relative; padding-left: 20px;
  font-size: 16px; line-height: 1.6; color: var(--ink);
}
.sv-accesso-punti li::before {
  content: "·"; position: absolute; left: 0; top: -2px;
  color: var(--accent); font-weight: 700; font-size: 20px;
}
.sv-accesso-nota {
  background: var(--bg-alt); padding: 20px;
  font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 520px;
}

.sv-accesso-scatola {
  border: 1px solid var(--border-strong); background: var(--bg);
  box-shadow: var(--shadow-md); padding: 30px;
  display: flex; flex-direction: column; gap: 16px;
}
.sv-accesso-scatola h2 { font-size: 30px; font-weight: 300; }
/* WooCommerce disegna `form.login` come una scheda a sé: bordo, angoli e
   padding suoi. Dentro la nostra scatola diventava un riquadro dentro un
   riquadro. */
.sv-accesso-scatola form.login {
  border: 0; padding: 0; margin: 0; border-radius: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.sv-accesso-scatola .form-row { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; }
/* I selettori qui sotto sono più lunghi del necessario di proposito: le regole
   che devono battere sono quelle di WooCommerce (`.woocommerce button.button`)
   e quelle del checkout in `woocommerce.css` (`.woocommerce form .form-row
   label`), e con un selettore corto perdono senza dirlo. */
.sv-accesso-scatola form .form-row label { font-size: 14px; color: var(--ink-soft); font-weight: 400; }
.sv-accesso-scatola input[type="text"],
.sv-accesso-scatola input[type="password"] { width: 100%; min-width: 0; }
.sv-accesso-invio { gap: 14px !important; }
/* Il checkbox e la sua etichetta sono dentro un <label>, che di suo non è un
   contenitore flex: senza questo il quadratino finiva sopra al testo. */
.sv-accesso-invio .woocommerce-form-login__rememberme {
  display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px;
}
.sv-accesso-invio .woocommerce-form-login__rememberme input { width: auto; margin: 0; }
.sv-accesso-scatola .sv-accesso-invio button.button {
  width: 100%; background: var(--accent); background-color: var(--accent); color: var(--bg);
  border: 1px solid var(--accent); border-radius: var(--radius-s);
  padding: 15px; font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.sv-accesso-scatola .sv-accesso-invio button.button:hover {
  background: var(--accent-dark); background-color: var(--accent-dark);
  border-color: var(--accent-dark); color: var(--bg);
}
/* ===== «Accedi con Google» dentro la scatola =====
   Il bottone lo stampa il plugin `woocommerce-google-apple-login`
   sull'hook `woocommerce_login_form_start`, quindi arriva come PRIMO figlio del
   form, sopra Email e Password. Qui si decide solo dove sta e quanto è largo:
   il vestito del bottone è roba di Google e sta nel foglio del plugin.

   ⚠️ Il bottone vero è disegnato da Google dentro un iframe, e la sua larghezza
   la accetta solo fra 200 e 400 px — non può diventare largo quanto «Entra».
   Per questo la colonna è centrata e limitata a 400: così il ripiego, il
   bottone di Google e il separatore stanno tutti sulla stessa larghezza, e non
   sembra che uno dei tre sia venuto storto. */
.sv-accesso-scatola .wcgl-login-wrapper {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  gap: 18px;
}
.sv-accesso-scatola .wcgl-separatore { color: var(--ink-soft); }
.sv-accesso-scatola .wcgl-separatore span { font-size: 13px; }

.sv-accesso-scatola .lost_password { font-size: 14px; text-align: center; }
.sv-accesso-scatola .lost_password a { color: var(--ink-dim); }
.sv-accesso-primo {
  border-top: 1px solid var(--border-header); padding-top: 16px;
  font-size: 14px; line-height: 1.65; color: var(--ink-soft);
}

@media (max-width: 860px) {
  .sv-accesso { grid-template-columns: 1fr; gap: 32px; }
  .sv-accesso-testo h1 { font-size: 36px; }
}

/* ===== La pagina =====
   L'area è una pagina a sé (template-percorso.php), non più una linguetta di
   Il mio account: 1180px come nel mockup, sul fondo del sito, senza menu
   laterale e senza scatola bianca intorno. */
.pc-pagina { max-width: 1180px; margin: 0 auto; padding: 40px var(--gutter) 90px; }
.pc-guasto { display: flex; flex-direction: column; gap: 16px; max-width: 620px; padding: 60px 0; }
.pc-guasto h1 { font-size: 40px; font-weight: 300; }

.svp-area { display: flex; flex-direction: column; gap: 26px; }

/* ---- Testata ---- */
.svp-testata {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); padding-bottom: 20px;
}
/* `:first-of-type` e non `> div`: i figli div della testata sono DUE — il
   blocco del titolo e quello dei link — e una regola su tutti e due metteva
   "Il mio account" ed "Esci" uno sotto l'altro. */
.svp-testata > div:first-of-type { display: flex; flex-direction: column; gap: 8px; }
.svp-testata h1 { font-size: 44px; line-height: 1.08; font-weight: 300; }
.svp-testata h2 { font-size: 40px; line-height: 1.08; font-weight: 300; }
.svp-testata-link { display: flex; gap: 20px; align-items: center; }
.svp-testata-link a { font-size: 14px; color: var(--ink-dim); }
.svp-testata-link a:hover { color: var(--accent); }
.svp-esci { font-size: 14px; color: var(--ink-dim); }
.svp-esci:hover { color: var(--accent); }

/* Qui c'era `.svp-richiamo`, il rimando all'area sulla Bacheca di Il mio
   account. Tolto il 4 settembre 2026 insieme alla Bacheca: adesso
   `/mio-account/` porta direttamente all'area, quindi non c'è più niente da
   richiamare — e una regola che veste un elemento che nessuno stampa più è
   solo peso da leggere. */

/* ---- Promemoria ---- */
.svp-promemoria {
  background: var(--bg-alt); border-left: 3px solid var(--accent);
  padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px; align-items: center;
}
.svp-promemoria-testo { display: flex; flex-direction: column; gap: 6px; }
.svp-promemoria-testo p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.svp-promemoria-azioni { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---- Navigazione fra le sezioni ---- */
.svp-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.svp-tab {
  padding: 13px 14px; font-size: 15px; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.svp-tab:hover { color: var(--accent); text-decoration: none; }
.svp-tab.attiva { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
.svp-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px;
  background: var(--accent); color: var(--bg);
  font-family: var(--font-mono); font-size: 10px; text-align: center;
}

/* Gli avvisi dopo un salvataggio: in cima, prima del saluto, dove si guarda
   tornando dal modulo. Lo stile delle singole righe è in woocommerce.css. */
.svp-avvisi { margin-bottom: 24px; }
.svp-avvisi ul { margin: 0; padding: 0; list-style: none; }

/* ---- Impaginazione comune alle sezioni ---- */
.svp-sezione { min-width: 0; }
.svp-due-colonne {
  display: grid; grid-template-columns: 1.5fr minmax(0, 1fr);
  gap: 44px; align-items: start;
}
.svp-principale { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.svp-lato { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
/* ⚠️ `section { padding: 96px 0 }` di sv-base vale anche per i <section> usati
   come blocco dentro una colonna: fra il riquadro dell'appuntamento e "Il mio
   piano alimentare" restavano quasi duecento pixel che nel CSS di questa
   pagina non erano scritti da nessuna parte. */
.svp-area section { padding: 0; }
.svp-blocco { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.svp-blocco-testo { display: flex; flex-direction: column; gap: 10px; }
.svp-testa-split {
  display: grid; grid-template-columns: 1.4fr minmax(0, 1fr);
  gap: 34px; align-items: start; margin-bottom: 26px;
}

.svp-sezione h3 { font-size: 30px; font-weight: 300; }
.svp-sezione h4 { font-size: 22px; font-weight: 300; }
.svp-intro { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 560px; }
.svp-vuoto { color: var(--ink-mute); font-size: 15px; padding: 12px 0; }
.svp-nota { font-size: 13px; color: var(--ink-mute); line-height: 1.6; }
.svp-spento { color: var(--ink-faint); }
.svp-sotto { margin-top: 18px; }

/* ---- Bottoni e link dell'area ----
   Non riusano `.btn` del tema: dentro l'account convivono con i bottoni di
   WooCommerce, che hanno una loro `.button` con padding e colori propri, e
   mescolarli faceva due altezze diverse nella stessa riga. */
.svp-btn {
  display: inline-block; text-align: center;
  background: var(--accent); color: var(--bg);
  padding: 13px 20px; font-size: 15px; font-weight: 700;
  border: 1px solid var(--accent); border-radius: var(--radius-s);
  cursor: pointer; font-family: inherit; line-height: 1.2;
}
.svp-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--bg); text-decoration: none; }
.svp-btn[disabled] { background: var(--border-soft); border-color: var(--border-soft); color: var(--ink-faint); cursor: default; }
.svp-btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); font-weight: 400; }
.svp-btn-ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.svp-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--ink-dim);
}
.svp-link:hover { color: var(--accent); text-decoration: underline; }
.svp-freccia { font-size: 15px; font-weight: 700; color: var(--accent); }
.svp-inline { display: inline-flex; }

/* ---- Riquadri della colonna laterale ---- */
.svp-box {
  background: var(--bg); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--border);
}
.svp-box p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.svp-box-bordo { border-color: var(--border-strong); }
.svp-box-sabbia { background: var(--bg-alt); border-color: transparent; }
.svp-box-nota {
  border-top: 1px solid var(--border-soft); padding-top: 14px;
  font-size: 13px !important; line-height: 1.6; color: var(--ink-mute) !important;
}
.svp-box-riga { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.svp-box-largo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px; align-items: center; padding: 28px;
}
/* Il `gap` di `.svp-box` separa i figli DIRETTI, e qui la colonna del testo è
   un `div`: dentro, sopratitolo e paragrafo si toccavano perché `.eyebrow` è
   inline-block e non ha margini. Stesso ritmo del resto dei riquadri. */
.svp-box-largo > div { display: flex; flex-direction: column; gap: 10px; }
.svp-dati { display: flex; flex-direction: column; gap: 12px; }
.svp-dati > div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.svp-dati dt { color: var(--ink-dim); }
.svp-dati dd { text-align: right; max-width: 60%; }
.svp-credito-cifra { font-family: var(--font-serif); font-size: 32px; color: var(--accent); line-height: 1; }

/* ===== "Come funziona quest'area" =====
   Sta in cima al riepilogo e si chiude per sempre. Bordo e non fondo pieno: il
   promemoria del controllo sopra è già una fascia sabbia, e due fasce piene
   una sull'altra fanno sembrare la pagina un elenco di avvisi. */
.svp-benvenuto {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  border: 1px solid var(--border); background: var(--surface-2);
  padding: 30px 34px; margin-bottom: 40px;
}
/* Il testo è un paragrafo lungo, non una riga: senza un limite arriverebbe a
   novanta caratteri sui 1180px dell'area, che è il doppio di quanto si legga
   comodamente. */
.svp-benvenuto-testo {
  min-width: 0; max-width: 64ch;
  display: flex; flex-direction: column; gap: 12px;
}
.svp-benvenuto-testo p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.svp-benvenuto .svp-inline { flex: none; padding-top: 2px; }

/* ---- Il registro del credito ----
   Il saldo da solo non si spiega: sotto la cifra ci vanno i movimenti che la
   compongono, che è il motivo per cui il credito è un registro e non un
   numero in usermeta. */
.svp-movimenti { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.svp-movimenti li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; line-height: 1.4; }
.svp-mov-testo { color: var(--ink-mute); min-width: 0; }
.svp-mov-cifra { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.svp-mov-piu { color: var(--success); }
.svp-mov-meno { color: var(--ink-mute); }
.svp-articolo { display: block; font-size: 15px; line-height: 1.5; }

/* ---- Prossimo appuntamento ---- */
.svp-appuntamento {
  border: 1px solid var(--border-strong); padding: 26px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
}
.svp-app-testo { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.svp-app-quando { font-family: var(--font-serif); font-size: 27px; line-height: 1.18; text-wrap: balance; }
.svp-app-nota { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
/* La colonna dei bottoni ha una larghezza sua e non `auto`: con `auto` si
   prendeva quella del bottone più lungo ("Entra nella videochiamata") e alla
   data restava una colonna da centoquaranta pixel, dove "Settembre" andava a
   capo da solo. */
.svp-app-azioni { display: flex; flex-direction: column; gap: 9px; width: 190px; }
.svp-app-azioni .svp-btn { padding: 12px 10px; font-size: 14px; }
.svp-app-limite { font-size: 12px; color: var(--ink-mute); text-align: center; line-height: 1.5; }

/* ---- Documenti ---- */
.svp-documenti { display: flex; flex-direction: column; }
.svp-documenti li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px;
  align-items: center; padding: 16px 0; border-top: 1px solid var(--border);
}
.svp-doc-testo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svp-doc-titolo { font-size: 17px; line-height: 1.4; }
.svp-doc-meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* ---- Storico visite ---- */
.svp-storico { display: flex; flex-direction: column; }
.svp-storico li {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto;
  gap: 18px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--border); font-size: 15px;
}
.svp-st-data { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }

/* ⚠️ Ogni riga è una griglia a sé (la lista è un flex in colonna), quindi le
   colonne `auto` si misuravano riga per riga: il prezzo e l'etichetta della
   fattura ballavano di venti pixel fra una visita e l'altra. Una larghezza
   minima le incolonna senza dover trasformare la lista in un'unica griglia,
   che si porterebbe via il bordo per riga. */
.svp-st-prezzo {
  color: var(--ink-mute);
  min-width: 92px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.svp-st-fattura {
  font-size: 14px; font-weight: 700; white-space: nowrap;
  min-width: 116px; text-align: right;
}

/* Una visita disdetta resta nello storico, ma spenta: è successa, e non si è
   tenuta. Il prezzo barrato è la cifra che è diventata credito. */
.svp-st-disdetta .svp-st-data,
.svp-st-disdetta .svp-st-tipo { color: var(--ink-faint); }
.svp-st-disdetta .svp-st-prezzo s { color: var(--ink-faint); }

/* ===== Finestre di spostamento e disdetta =====
   Nascoste dal CSS e non dall'attributo `hidden`: senza JavaScript si aprono
   con `:target`, cioè con l'ancora nell'indirizzo, e un elemento `hidden`
   resterebbe invisibile anche da "aperto". */
.svp-modale {
  display: none; position: fixed; inset: 0; z-index: 60;
  background: rgba(46, 32, 38, .55);
  align-items: flex-start; justify-content: center;
  padding: 48px 20px; overflow-y: auto;
}
.svp-modale:target, .svp-modale.aperta { display: flex; }
body.svp-modale-aperta { overflow: hidden; }

.svp-modale-scatola {
  background: var(--bg); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 880px; display: flex; flex-direction: column;
}
.svp-modale-scatola:focus { outline: none; }
.svp-modale-stretta .svp-modale-scatola { max-width: 520px; }
.svp-modale-testa {
  padding: 24px 28px; border-bottom: 1px solid var(--border-header);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
}
.svp-modale-testa h3 { font-size: 28px; line-height: 1.15; font-weight: 300; }
.svp-modale-ora { font-size: 14px; color: var(--ink-dim); margin-top: 6px; }
.svp-chiude { font-size: 22px; line-height: 1; color: var(--ink-mute); padding: 0 4px; }
.svp-chiude:hover { color: var(--accent); text-decoration: none; }

.svp-modale-corpo { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }
/* Nella finestra dello spostamento calendario e orari stanno affiancati; in
   quella della disdetta il corpo è una colonna sola e questa regola non tocca
   niente perché lì non c'è `[data-prodotto]`. */
.svp-modale-corpo[data-prodotto] {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start;
}
.svp-modale-corpo[data-prodotto] .svp-modale-piede { grid-column: 1 / -1; }

.svp-calendario { display: flex; flex-direction: column; gap: 12px; }
.svp-mese { display: flex; justify-content: space-between; align-items: center; }
.svp-mese-nome { font-size: 15px; font-weight: 700; }
.svp-freccia-mese {
  border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--accent); padding: 0 8px;
}
.svp-settimana, .svp-giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.svp-settimana span {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); text-align: center;
}
.svp-giorno-cella {
  height: 38px; display: grid; place-items: center;
  font-size: 14px; font-family: inherit; color: var(--ink);
  border: 1px solid transparent; background: none; border-radius: 999px; cursor: pointer;
}
.svp-giorno-cella.libero { border-color: var(--border-mid); }
.svp-giorno-cella.libero:hover { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.svp-giorno-cella.chiuso { color: #CFC8BD; cursor: default; }
.svp-giorno-cella.scelto { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }

.svp-orari { display: flex; flex-direction: column; gap: 12px; }
.svp-slot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.svp-ora {
  padding: 11px 0; text-align: center; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border-mid); background: var(--bg); color: var(--ink); cursor: pointer;
}
.svp-ora:hover { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.svp-ora.scelto { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }
.svp-avviso { font-size: 14px; color: var(--ink-mute); line-height: 1.6; background: var(--bg-alt); padding: 14px; }

.svp-modale-piede {
  border-top: 1px solid var(--border-header); padding-top: 20px; margin-top: 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.svp-modale-bottoni { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.svp-campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); }

/* Senza JavaScript il calendario non si popola: invece di un riquadro vuoto
   compare la spiegazione. `.svp-con-js` lo mette lo script all'avvio. */
.svp-calendario::after {
  content: "Per scegliere la nuova data serve JavaScript. Se è disattivato, scrivimi e spostiamo insieme l'appuntamento.";
  font-size: 14px; line-height: 1.6; color: var(--ink-mute);
  background: var(--bg-alt); padding: 14px;
}
.svp-con-js .svp-calendario::after { content: none; }

/* ---- Prepara la visita ---- */
.svp-conteggio { font-size: 14px; color: var(--ink-soft); }
.svp-barra { height: 6px; background: var(--border-soft); display: block; }
.svp-barra span { display: block; height: 6px; background: var(--accent); }

.svp-prepara { display: flex; flex-direction: column; margin-bottom: 30px; }
.svp-prepara li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 16px; align-items: center; padding: 15px 0; border-top: 1px solid var(--border);
}
.svp-prepara li.fatto .svp-prepara-voce { text-decoration: line-through; color: var(--ink-faint); }

/* Il «Salvato» delle spunte: un avviso fisso in basso a destra.
   ⚠️ Stava dentro la riga, in posizione assoluta a destra, e finiva SOPRA la
   nota della voce («solo per le visite online», «non più vecchi di 6 mesi»):
   due testi sovrapposti e illeggibili tutti e due. Fuori dal flusso non si
   sovrappone a niente e non sposta niente — e la lista che non salta a ogni
   clic era il motivo per cui non poteva stare dentro la riga. */
.svp-avviso {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  padding: 11px 18px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  pointer-events: none;
  opacity: 0; transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
}
.svp-avviso.visibile { opacity: 1; transform: none; }

@media (max-width: 600px) {
  /* Sul telefono si appoggia al bordo come tutto il resto (vedi «Rientri» in
     sv-responsive.css) ma resta a DESTRA, non a tutta larghezza: una barra da
     un lato all'altro copre una riga intera della lista, cioè proprio quella
     che si è appena spuntata. */
  .svp-avviso { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .svp-avviso { transition: opacity .01s linear; transform: none; }
}
.svp-prepara-voce { font-size: 17px; line-height: 1.5; }
.svp-prepara-nota { font-size: 13px; color: var(--ink-mute); }
/* Il quadratino inerte non si usa più in «Prepara la visita»: le caselle si
   spuntano anche senza un appuntamento in programma (vedi class-svp-area.php).
   La classe resta come aggancio per una lista di sola lettura — la stampa, o
   la cartella vista dalla dietista — ma se un giorno non serve più a nessuno
   va via insieme a questa regola. */
.svp-spunta-finta { width: 20px; height: 20px; border: 1px solid var(--border-strong); display: block; }

.svp-misure-come {
  border: 1px solid var(--border); display: grid; grid-template-columns: 1.15fr .85fr;
  margin-bottom: 26px;
}
.svp-misure-testo { padding: 30px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.svp-passo { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.svp-passo-n { font-family: var(--font-serif); font-size: 28px; color: var(--border-strong); line-height: 1; }
.svp-passo p { font-size: 16px; line-height: 1.7; color: var(--ink); }
.svp-avvertenza {
  background: var(--accent-dark); color: var(--accent-soft);
  padding: 18px; font-size: 16px; line-height: 1.6; font-weight: 700;
}
.svp-misure-schema {
  background: var(--bg-alt); padding: 30px;
  display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center;
}
/* Lo schema delle misure: illustrazione sotto, fasce e numeri in SVG sopra.
   ⚠️ I due strati devono occupare lo STESSO riquadro, se no le fasce cadono
   fuori posto: l'immagine porta la dimensione (width 100%, height auto) e
   l'SVG le sta sopra in assoluto con inset 0. Il viewBox dell'SVG è 520×808,
   cioè i pixel dell'immagine, così le coordinate coincidono a ogni misura. */
.svp-schema {
  position: relative; display: block;
  width: 100%; max-width: 260px; margin: 0;
}
.svp-schema img { display: block; width: 100%; height: auto; }
.svp-schema-segni {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.svp-schema-linee { stroke: var(--accent); }
.svp-schema-numeri { fill: var(--accent); font-family: var(--font-sans); }
.svp-legenda-misure {
  display: flex; flex-direction: column; gap: 7px; align-self: stretch;
  font-size: 14px; color: var(--ink-soft); line-height: 1.5;
}
.svp-legenda-misure strong { color: var(--accent); }

.svp-riga-bottoni { display: flex; gap: 12px; flex-wrap: wrap; }
.svp-link-piccolo { font-size: 14px; color: var(--ink-dim); }
.svp-link-piccolo:hover { color: var(--accent); }
.svp-carta { font-size: 14px; color: var(--ink-mute); line-height: 1.6; }
.svp-carta .svp-link { font-size: 14px; color: var(--accent); text-decoration: underline; }

.svp-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 26px; }
.svp-carica { display: flex; flex-direction: column; gap: 10px; }
.svp-carica-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-mute); }
.svp-carica input[type="file"] { font-size: 13px; }

/* Zona di trascinamento. Il campo file ci sta DENTRO e resta cliccabile: è una
   <label>, quindi un clic in qualunque punto apre comunque il selettore del
   sistema. Il tratteggio dice "qui si può lasciare qualcosa" senza scriverlo. */
.svp-trascina {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 18px 16px; cursor: pointer;
  border: 1px dashed var(--border-strong); background: var(--bg-alt);
  transition: border-color .15s ease, background .15s ease;
}
.svp-trascina:hover, .svp-trascina:focus-within { border-color: var(--accent); }
.svp-trascina.sopra { border-color: var(--accent); background: var(--accent-soft); }
.svp-trascina-testo { font-size: 13px; line-height: 1.5; color: var(--ink-mute); }
.svp-trascina-testo strong { display: block; font-size: 14px; color: var(--ink); }
.svp-trascina input[type="file"] { font-size: 12px; max-width: 100%; }
.svp-trascina-file:not(:empty) {
  font-size: 13px; color: var(--accent); font-weight: 700;
  overflow-wrap: anywhere;
}

/* Correggi / Cancella in fondo alle righe della tabella rilevazioni. */
.svp-riga-azioni { white-space: nowrap; text-align: right; }
.svp-riga-azioni .svp-inline-form { display: inline; }
.svp-minilink {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.svp-minilink + .svp-inline-form { margin-left: 12px; }
.svp-minilink:hover { color: var(--accent-dark); }
.svp-minilink-via { color: var(--ink-mute); }
.svp-minilink-via:hover { color: var(--accent); }

/* Scegli un altro giorno del diario. Sta accanto alle scorciatoie, e su
   schermo stretto va a capo insieme a loro. */
.svp-giorno-scelta { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.svp-campo-in-linea { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-mute); }
.svp-campo-in-linea input {
  font-family: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
}

/* ---- Diario ---- */
.svp-dati-riga {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.svp-dati-riga dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px;
}
.svp-dati-riga dd { font-size: 16px; }

.svp-giorni-riga {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
}
.svp-giorni-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.svp-giorno {
  padding: 9px 18px; font-size: 14px;
  border: 1px solid var(--border-mid); color: var(--ink-soft);
}
.svp-giorno:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.svp-giorno.attivo { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }
.svp-stato-invio { font-size: 13px; color: var(--ink-mute); }

.svp-form-diario { display: flex; flex-direction: column; gap: 18px; }
.svp-diario { width: 100%; border-collapse: collapse; font-size: 15px; }
.svp-diario th {
  background: var(--bg-alt); text-align: left; padding: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
  border-right: 1px solid var(--border); white-space: nowrap;
}
.svp-diario th:last-child { border-right: 0; }
.svp-diario td { border-top: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); padding: 0; }
.svp-diario td:last-child { border-right: 0; }
.svp-diario input, .svp-diario select {
  width: 100%; min-width: 0; border: 0; background: transparent;
  padding: 12px; font-size: 15px; font-family: inherit; color: var(--ink);
}
.svp-diario input:focus, .svp-diario select:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.svp-diario tr.svp-esempio td {
  background: var(--surface-2); color: var(--ink-faint); font-size: 14px; padding: 11px 12px;
}
/* Le colonne: ora e pasto restano strette, la descrizione si prende il resto.
   Senza larghezze fisse la tabella dava a "Ora" lo stesso spazio di "Note". */
.svp-diario th:nth-child(1), .svp-diario td:nth-child(1) { width: 86px; }
.svp-diario th:nth-child(2), .svp-diario td:nth-child(2) { width: 116px; }
.svp-diario th:nth-child(4), .svp-diario td:nth-child(4) { width: 120px; }
.svp-diario th:nth-child(5), .svp-diario td:nth-child(5) { width: 220px; }
.svp-aggiungi { padding: 4px 0; }

/* I bicchieri: dieci radio veri, disegnati.
   Stanno in ordine 10→1 nel DOM e la riga è `row-reverse`, così quello
   selezionato può colorare i FRATELLI SUCCESSIVI (`~`), che a schermo sono
   quelli alla sua sinistra. Il CSS non sa selezionare i fratelli precedenti:
   è l'unico modo di riempire da uno a N senza JavaScript. */
.svp-acqua { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 0; }
.svp-acqua-etichetta { font-size: 15px; color: var(--ink-soft); }
.svp-bicchieri { display: flex; flex-direction: row-reverse; gap: 6px; }
.svp-bicchieri input { position: absolute; opacity: 0; width: 0; height: 0; }
.svp-bicchieri label {
  width: 20px; height: 34px; display: block; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 0 0 4px 4px; background: var(--bg);
}
.svp-bicchieri input:checked + label,
.svp-bicchieri input:checked ~ label { background: var(--accent); border-color: var(--accent); }
.svp-bicchieri input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.svp-acqua-conto { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }

.svp-form-azioni { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.svp-form-azioni .svp-nota { margin-right: auto; }

/* ---- Misure ---- */
.svp-form-misure { display: flex; flex-direction: column; gap: 12px; }
.svp-campi-due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.svp-grafico { gap: 18px; }
.svp-delta { font-size: 14px; color: var(--ink-soft); }
.svp-barre { display: flex; gap: 12px; align-items: flex-end; height: 180px; }
.svp-barra-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; height: 100%; }
.svp-barra-val { font-family: var(--font-mono); font-size: 12px; color: var(--accent-dark); }
.svp-barra-asta { width: 100%; background: var(--accent-mid); display: block; }
.svp-barra-col:last-child .svp-barra-asta { background: var(--accent); }
.svp-barra-data { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

/* La tabella scorre dentro il suo riquadro: su un telefono cinque colonne di
   numeri non stanno, e senza questo la pagina intera scorrerebbe di lato. */
/* ⚠️ `position: relative` non è decorativo: senza, questo contenitore NON
   ritaglia i discendenti in posizione assoluta, perché non è il loro blocco
   contenitore. Bastava l'etichetta invisibile dell'ultima colonna — un
   `.screen-reader-text` largo un pixel — a sporgere fuori dalla tabella e ad
   allargare tutta la pagina: la sezione Peso e misure usciva a 467px su uno
   schermo da 390, con la tabella che invece scorreva regolarmente. */
.svp-tabella-scroll { overflow-x: auto; position: relative; }
.svp-tabella { width: 100%; border-collapse: collapse; font-size: 15px; }
.svp-tabella th, .svp-tabella td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.svp-tabella th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 400;
}

/* ---- Scrivimi ---- */
.svp-conversazione { display: flex; flex-direction: column; gap: 16px; margin-bottom: 6px; }
.svp-messaggio { display: flex; flex-direction: column; gap: 6px; max-width: 82%; }
.svp-messaggio.svp-mio { align-self: flex-end; align-items: flex-end; }
.svp-bolla {
  background: var(--bg-alt); padding: 16px 20px;
  font-size: 16px; line-height: 1.65; color: var(--ink-soft);
}
.svp-mio .svp-bolla { background: var(--accent); color: var(--accent-soft); }
.svp-bolla p { margin: 0 0 8px; }
.svp-bolla p:last-child { margin: 0; }
.svp-msg-meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.svp-form-messaggio { display: flex; flex-direction: column; gap: 14px; }

/* ---- Spesa ---- */
.svp-gruppo { padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-top: 22px; }
.svp-spesa { display: flex; flex-direction: column; margin: 6px 0 0; }
.svp-spesa li {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 0;
}
.svp-spesa li.fatto .svp-voce { text-decoration: line-through; color: var(--ink-faint); }
.svp-voce { flex: 1 1 auto; font-size: 16px; }
.svp-qta { font-size: 14px; color: var(--ink-mute); }
.svp-spunta button {
  width: 20px; height: 20px; border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--accent); font-size: 12px; line-height: 1;
  display: grid; place-items: center; padding: 0; cursor: pointer;
}
.svp-spesa li.fatto .svp-spunta button,
.svp-prepara li.fatto .svp-spunta button { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.svp-elimina button {
  border: 0; background: none; color: var(--ink-faint);
  font-size: 20px; line-height: 1; padding: 0 4px; cursor: pointer;
}
.svp-elimina button:hover { color: var(--accent); }
.svp-spunta, .svp-elimina { display: flex; }
.svp-azioni-spesa { justify-content: flex-start; margin-top: 26px; }
.svp-form-spesa { display: flex; flex-direction: column; gap: 12px; }

/* ---- Ricette salvate ---- */
.svp-salvata {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 0; border-top: 1px solid var(--border-soft);
}
.svp-salvata:first-of-type { border-top: 0; padding-top: 4px; }
.svp-salvata-testa {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px;
  align-items: center; color: var(--ink);
}
.svp-salvata-testa:hover { text-decoration: none; }
.svp-salvata-testa:hover .svp-salvata-nome { color: var(--accent); }
.svp-salvata-foto { width: 64px; height: 52px; object-fit: cover; display: block; background: var(--bg-alt); }
.svp-salvata-nome { font-family: var(--font-serif); font-size: 18px; line-height: 1.25; }
.svp-salvata-azioni {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding-left: 76px;
}
.svp-salvata-azioni .svp-link { font-size: 13px; }

/* ---- Stampa ----
   Quello che si stampa è la lista della spesa: menu, linguette e colonna
   laterale su carta sono rumore. */
@media print {
  .woocommerce-MyAccount-navigation, .svp-tabs, .svp-lato,
  .svp-testata, .svp-promemoria, .svp-azioni-spesa,
  .site-header, .site-footer, .topbar { display: none !important; }
  .svp-due-colonne { grid-template-columns: 1fr; }
  .svp-spunta, .svp-elimina { visibility: hidden; }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  /* ⚠️ `minmax(0, 1fr)` e non `1fr`. Sono la stessa cosa finché il contenuto
     ci sta: `1fr` vale `minmax(auto, 1fr)`, e quell'`auto` è la larghezza
     minima del contenuto. Con dentro la tabella delle rilevazioni — sei
     colonne — la traccia cresceva fino a 594px e la pagina si allargava con
     lei, nonostante il contenitore avesse `overflow-x: auto`. Stessa trappola
     già pagata sul menu dell'account, più sotto. */
  .svp-due-colonne, .svp-testa-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .svp-lato { position: static; }
  .svp-tre { grid-template-columns: 1fr 1fr; }
  .svp-misure-come { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .svp-modale-corpo[data-prodotto] { grid-template-columns: 1fr; }
  .svp-appuntamento { grid-template-columns: 1fr; }
  .svp-app-azioni { min-width: 0; }
  .svp-tre { grid-template-columns: 1fr; }
  .svp-box-largo { grid-template-columns: 1fr; }
  .svp-promemoria { grid-template-columns: 1fr; }

  /* Il bottone "Ho capito" va sotto: di fianco a un testo lungo, su 390px,
     si riduce a una colonna di due lettere per riga. */
  .svp-benvenuto { flex-direction: column; gap: 14px; }
}

@media (max-width: 640px) {
  .svp-testata h2 { font-size: 32px; }
  .svp-sezione h3 { font-size: 26px; }
  .svp-app-quando { font-size: 25px; }

  /* Tre colonne, non due: con due, prezzo ed etichetta finivano su righe
     diverse e «disdetta» restava da sola in fondo, staccata dalla visita a cui
     si riferisce. La data continua a prendersi la riga sopra. */
  .svp-storico li { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 4px; column-gap: 12px; }
  .svp-st-data { grid-column: 1 / -1; }
  /* Su 390px le larghezze minime che incolonnano sul desktop stringerebbero
     il nome della visita fino a mandarlo a capo lettera per lettera. */
  .svp-st-prezzo, .svp-st-fattura { min-width: 0; }
  .svp-dati-riga { grid-template-columns: 1fr; gap: 12px; }
  .svp-campi-due { grid-template-columns: 1fr; }
  .svp-slot { grid-template-columns: repeat(2, 1fr); }
  .svp-modale { padding: 20px 12px; }
  .svp-modale-corpo, .svp-modale-testa { padding: 18px; }

  /* ⚠️ Il contenitore che scorre deve poter RESTRINGERSI. Un figlio di
     flex/grid ha `min-width: auto`, cioè si rifiuta di andare sotto la
     larghezza del suo contenuto: la tabella lo gonfiava a 613px e a sforare
     era la pagina intera, non il riquadro. `min-width: 0` è il pezzo che
     rende utile l'overflow-x. */
  .svp-area, .svp-sezione, .svp-principale { min-width: 0; }
  .svp-tabella-scroll { min-width: 0; max-width: 100%; }

  /* ⚠️ E la colonna della griglia deve poter restringersi anche lei.
     `1fr` vuol dire `minmax(auto, 1fr)`, e quell'`auto` è il min-content del
     contenuto: la tabella allargava la traccia a 475px e con essa il menu
     dell'account, che di suo non c'entrava niente. `minmax(0, 1fr)` è la
     versione che sta davvero dentro. */
  .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-account .woocommerce-MyAccount-content,
  .woocommerce-account .woocommerce-MyAccount-navigation { min-width: 0; }

  .svp-tab { padding: 11px 10px; font-size: 13px; }
  .svp-messaggio { max-width: 100%; }
  .svp-prepara li { grid-template-columns: 24px minmax(0, 1fr); }
  .svp-prepara-nota { grid-column: 2; }
  .svp-form-azioni { justify-content: flex-start; }
  .svp-form-azioni .svp-nota { margin-right: 0; flex: 1 1 100%; }
}