/* ═══════════════════════════════════════════════════════════════════════════
   PREVENTIVO — lo strumento («La croce evoluta», modello F)
   ───────────────────────────────────────────────────────────────────────────
   selezione-rebrand/05-ui/STRUTTURA.md §4: testata essenziale, consensi su una
   scheda bianca su fondo ghiaccio, i tre modi di costruire come ingressi con
   l'icona in cerchio, riepilogo come scheda con il totale in Stevie Sans
   Black e l'elemento accento nell'angolo, le righe che cambiano il totale
   con un'etichetta Montserrat accanto, da telefono la barra del totale.

   Tutte le classi hanno il prefisso pv-: pagina.css usa già .passo, .scheda,
   .voce, .livello per altre cose.
   ═══════════════════════════════════════════════════════════════════════════ */

.pv-piccolo { font-size: var(--nl-t-piccolo); line-height: 1.45; color: var(--nl-ink-2); }

/* ── La testa: titolo del passo e passi in una riga (5/10) ────────────────
   Il titolo è un h1 compatto, con la seconda parte leggera sulla stessa riga;
   i passi stanno a destra. Prima titolo grande e passi occupavano mezza
   schermata sopra lo strumento. */
.pv-passi-barra { border-bottom: 1px solid var(--nl-bordo); background: var(--nl-bianco); }
.pv-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: .9rem; }
.pv-titolo {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 900; line-height: 1.1;
  letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance;
}
.pv-titolo .leggero { display: inline; }
.pv-titolo-passo:focus-visible { outline-offset: 4px; }
.pv-passi { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; counter-reset: passo; }
.pv-passi li {
  display: inline-flex; align-items: center; gap: .6rem; counter-increment: passo;
  font: 700 var(--nl-t-piccolo)/1.2 var(--nl-font-marchio); color: var(--nl-ink-3);
}
.pv-passi li::before {
  content: counter(passo); display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border: 1.5px solid var(--nl-bordo); border-radius: 50%; font-size: .875rem;
}
.pv-passi li[aria-current="step"] { color: var(--nl-ink); }
.pv-passi li[aria-current="step"]::before { border-color: transparent; background: var(--nl-accento-ink); color: var(--nl-bianco); }
.pv-passi li.is-fatto { color: var(--nl-blu-ink); }
/* Sotto i 1024px i passi restano numeri (il nome del passo in corso è già
   nel titolo accanto): così titolo e passi stanno ancora in una riga. */
@media (max-width: 63.9375em) {
  .pv-testa { flex-wrap: nowrap; }
  .pv-passi { flex-wrap: nowrap; gap: .4rem; }
  .pv-passi li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.pv-passi li.is-fatto::before { content: "✓"; border-color: var(--nl-blu-ink); }

.pv-passo { padding-block: clamp(1.25rem, 1rem + 1.25vw, 2.25rem) var(--nl-sezione); }
.pv-inviato { padding-top: clamp(2rem, 1.25rem + 3vw, 4rem); }
.pv-passo .titolo:focus-visible { outline-offset: 6px; }

/* ── Passo 1: consensi ─────────────────────────────────────────────────── */
.pv-consensi, .pv-strumento, .pv-dati { background: var(--nl-ghiaccio); }
.pv-consensi::before {
  content: ""; position: absolute; z-index: -1; right: -16rem; top: -10rem; width: 44rem; aspect-ratio: 1;
  background: var(--nl-tinta-blu);
  -webkit-mask: var(--forma-contorno) center / contain no-repeat; mask: var(--forma-contorno) center / contain no-repeat;
}
/* A tutta larghezza (10/10, Mauro): niente colonna di testo accanto al
   modulo, ma blocchi uno sotto l'altro, ognuno con la sua griglia. */
.pv-inizio { display: grid; gap: 1.5rem; }
.pv-inizio-testa { display: grid; justify-items: start; gap: .6rem; max-width: 54rem; }
/* I vantaggi in una riga compatta (12/10, Mauro): spunta e frase, uno accanto
   all'altro, senza riquadri. Da telefono vanno a capo in due righe al massimo
   (font più piccolo), così la domanda arriva nella prima schermata. */
.pv-vantaggi { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin: 0; font-size: var(--nl-t-piccolo); font-weight: 600; line-height: 1.35; }
.pv-vantaggi li { align-items: center; }
@media (max-width: 39.99em) { .pv-vantaggi { gap: .3rem 1rem; font-size: .9375rem; } }

/* Il pannello di partenza: «Sei già paziente?» e i consensi affiancati da
   computer, sotto la nota sui dati e il pulsante. */
/* Il riquadro (12/10): bordo e fondo passano al contenitore, che tiene insieme i
   consensi e, in fondo, la riga della ricetta. */
.pv-inizio-pannello { display: grid; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda); background: var(--nl-bianco); }
.pv-scheda-consensi { gap: 1.5rem; }
@media (max-width: 29.99em) { .pv-inizio-pannello .modulo { padding: 1.25rem 1.1rem; } }
@media (min-width: 64em) {
  .pv-scheda-consensi { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.75rem 3.5rem; padding: 2rem 2.25rem; }
  .pv-consensi-piede { grid-column: 1 / -1; }
}
.pv-paziente { display: grid; gap: .9rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.pv-paziente legend { padding: 0; margin-bottom: .9rem; }
.pv-paziente[aria-invalid="true"] .pv-scelta { border-color: var(--nl-errore); }
/* CAP o città, solo per i già pazienti (7/10). */
.pv-zona { display: grid; gap: .4rem; max-width: 24rem; }
.pv-zona[hidden] { display: none; }
.pv-gratuito-no { margin-bottom: 1rem; }
.pv-scelte { display: grid; gap: .75rem; }
@media (min-width: 30em) { .pv-scelte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-scelta {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  padding: 1rem; border: 1.5px solid var(--nl-bordo); border-radius: var(--nl-r-medio);
  cursor: pointer; transition: border-color var(--nl-veloce), background-color var(--nl-veloce);
}
.pv-scelta input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--nl-blu-ink); }
.pv-scelta-testo { display: grid; gap: .2rem; }
.pv-scelta-testo span { font-size: var(--nl-t-piccolo); line-height: 1.4; color: var(--nl-ink-2); }
.pv-scelta:has(input:checked) { border-color: var(--nl-blu-ink); background: var(--nl-vetro); }
/* Con l'illustrazione (12/10): una piccola scheda. In alto il disegno e il pallino
   della scelta (dove si cerca la spunta), sotto il testo a tutta larghezza, così le due
   righe non si stringono accanto al disegno. L'illustrazione è decorativa: la scelta la
   dice il testo. */
.pv-scelta:has(.pv-scelta-illu) {
  grid-template-columns: 1fr auto; grid-template-areas: "illu scelta" "testo testo";
  gap: .75rem; align-items: start; padding: 1rem 1rem 1.1rem;
}
.pv-scelta:has(.pv-scelta-illu) input { grid-area: scelta; }
.pv-scelta:has(.pv-scelta-illu) .pv-scelta-illu { grid-area: illu; }
.pv-scelta:has(.pv-scelta-illu) .pv-scelta-testo { grid-area: testo; }
/* Quando le schede stanno in una colonna (telefono): disegno, titolo e pallino in
   riga, la frase sotto a tutta larghezza. Quattro schede del passo 3 passano da
   800 a 600px; «Sei già paziente?» uguale, per coerenza. */
@media (max-width: 39.99em) {
  .pv-modo-scelta:has(.pv-scelta-illu) { grid-template-columns: 2.75rem 1fr auto; grid-template-areas: "illu titolo scelta" "testo testo testo"; align-items: center; gap: .5rem .8rem; }
  .pv-modo-scelta .pv-scelta-testo { display: contents; }
  .pv-modo-scelta .pv-scelta-testo strong { grid-area: titolo; line-height: 1.25; }
  .pv-modo-scelta .pv-scelta-testo span { grid-area: testo; }
  .pv-modo-scelta .pv-scelta-illu { width: 2.75rem; height: 2.75rem; }
  .pv-scheda-dati.modulo { padding: 1.25rem 1.1rem; }
}
@media (max-width: 29.99em) {
  .pv-paziente .pv-scelta:has(.pv-scelta-illu) { grid-template-columns: 2.75rem 1fr auto; grid-template-areas: "illu titolo scelta" "testo testo testo"; align-items: center; gap: .5rem .8rem; }
  .pv-paziente .pv-scelta-testo { display: contents; }
  .pv-paziente .pv-scelta-testo strong { grid-area: titolo; line-height: 1.25; }
  .pv-paziente .pv-scelta-testo span { grid-area: testo; }
  .pv-paziente .pv-scelta-illu { width: 2.75rem; height: 2.75rem; }
}
.pv-scelta-illu {
  width: 3.5rem; height: 3.5rem;
  --illu-fondo: var(--nl-tinta-blu); --illu-tratto: var(--nl-blu-ink); --illu-accento: var(--nl-accento); --illu-carta: var(--nl-bianco);
  transition: transform var(--nl-veloce) var(--nl-esce);
}
.movimento .pv-scelta:has(input:checked) .pv-scelta-illu { transform: scale(1.06); }
@media (hover: hover) and (pointer: fine) { .pv-scelta:hover { border-color: var(--nl-blu-ink); } }
/* I consensi in breve (10/10): il testo intero si apre sotto. */
.pv-consensi-caselle { gap: .8rem; padding-block: 0; }
.pv-consensi-caselle .voce-titolo { margin-bottom: .1rem; }
.pv-consensi-link { display: grid; justify-items: start; gap: .5rem; padding-left: 2.125rem; font-size: var(--nl-t-piccolo); }
.pv-consensi-esteso summary { cursor: pointer; font-weight: 700; color: var(--nl-blu-ink); }
.pv-consensi-esteso p { margin-top: .6rem; line-height: 1.5; color: var(--nl-ink-2); }
.pv-consensi-piede { display: grid; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--nl-bordo); }
/* Dal 12/10 la nota sui dati sta sopra le caselle: qui resta il pulsante, a destra. */
@media (min-width: 48em) { .pv-consensi-piede { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; gap: 1rem 2.5rem; } .pv-consensi-invia { grid-column: 2; } }
.pv-consensi-invia { display: grid; gap: .75rem; }
.pv-scheda-consensi .pulsante { width: 100%; }

/* ── Passo 2: lo strumento ─────────────────────────────────────────────── */
/* Dove cercare: sta sopra il campo di ricerca, l'unica cosa che cambia. */
.pv-viste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pv-viste-etichetta { margin-right: .25rem; font-weight: 700; }

.pv-pillola {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1.1rem;
  border: 1.5px solid var(--nl-bordo); border-radius: var(--nl-r-pillola); background: var(--nl-bianco);
  font: 700 var(--nl-t-piccolo)/1.2 var(--nl-font-marchio); color: var(--nl-ink);
  transition: border-color var(--nl-veloce), background-color var(--nl-veloce), color var(--nl-veloce);
}
.pv-pillola[aria-pressed="true"] { border-color: var(--nl-blu-ink); background: var(--nl-blu-ink); color: var(--nl-bianco); }
.pv-pillola strong { font-variant-numeric: tabular-nums; }

.pv-nota-vista {
  display: flex; gap: .6rem; max-width: 52rem; padding: .9rem 1.1rem;
  border-radius: var(--nl-r-medio); background: var(--nl-tinta-blu); color: var(--nl-ink);
}
.pv-nota-vista .icona { flex: none; margin-top: .15rem; color: var(--nl-blu-ink); }

.pv-griglia { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 64em) { .pv-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 3rem; } }
@media (min-width: 90em) { .pv-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 3.5rem; } }
.pv-scelte-colonna { min-width: 0; }

/* I tre modi di costruire: ingressi con l'icona in cerchio. */
/* Da telefono uno sotto l'altro; da 640px sempre tre in riga (mai due più
   uno). L'icona sta in cima, allineata alla prima riga del titolo. */
.pv-ingressi { display: grid; gap: .75rem; }
@media (min-width: 40em) {
  .pv-ingressi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Quattro ingressi (sul principale, 11/10): due per riga, mai tre più uno. */
  .pv-ingressi:has(> .pv-ingresso:nth-of-type(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pv-ingresso {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .85rem;
  padding: 1rem 1.1rem; border: 2px solid transparent; border-radius: var(--nl-r-scheda);
  background: var(--nl-bianco); text-align: left;
  transition: border-color var(--nl-veloce);
}
.pv-ingresso[aria-selected="true"] { border-color: var(--nl-blu-ink); }
.pv-ingresso[aria-selected="true"] .tondo { border-color: transparent; background: var(--nl-blu-ink); color: var(--nl-bianco); }
.pv-ingresso-testo { display: grid; gap: .2rem; padding-top: .35rem; }
.pv-ingresso-testo strong { font-size: var(--nl-t-voce); font-weight: 900; line-height: 1.15; text-transform: uppercase; }
.pv-ingresso-testo span { font-size: var(--nl-t-piccolo); line-height: 1.35; color: var(--nl-ink-2); }

.pv-pannello { display: grid; gap: 1rem; margin-top: 2rem; }
.pv-pannello-testo { max-width: 44rem; color: var(--nl-ink-2); }
.pv-pannello .cerca { width: 100%; margin-top: 0; }
.pv-sottotitolo { margin-top: 1.5rem; font-size: var(--nl-t-voce); font-weight: 900; line-height: 1.15; text-transform: uppercase; }

/* Righe scelte: risultati della ricerca, moduli, aree. */
.pv-risultati, .pv-righe { display: grid; gap: .6rem; }
.pv-riga {
  display: grid; gap: .75rem 1.25rem; align-items: center;
  padding: 1rem 1.25rem; border: 1.5px solid transparent; border-radius: var(--nl-r-medio);
  background: var(--nl-bianco);
}
@media (min-width: 40em) { .pv-riga { grid-template-columns: minmax(0, 1fr) auto; } }
.pv-riga.is-scelta { border-color: var(--nl-blu-ink); }
.pv-riga-testo { display: grid; justify-items: start; gap: .25rem; min-width: 0; }
.pv-riga-nome { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pv-riga-meta, .pv-riga-descrizione { font-size: var(--nl-t-piccolo); line-height: 1.4; color: var(--nl-ink-2); }
.pv-riga-azione { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pv-prezzo { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-prezzo--richiesta { font-weight: 500; color: var(--nl-ink-2); }
.pv-prezzo--grande { font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1; }
.pv-vuoto { display: grid; gap: .35rem; padding: 1.25rem; border-radius: var(--nl-r-medio); background: var(--nl-bianco); }
.pv-chip-attenzione { background: var(--nl-accento-tinta); color: var(--nl-accento-brace); }

.pv-scegli {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .45rem 1rem;
  border: 1.5px solid var(--nl-blu-ink); border-radius: var(--nl-r-pillola); background: var(--nl-bianco);
  font: 700 var(--nl-t-piccolo)/1 var(--nl-font-marchio); color: var(--nl-blu-ink);
  transition: background-color var(--nl-veloce), color var(--nl-veloce);
}
.pv-scegli .icona { width: 1.1rem; height: 1.1rem; }
.pv-scegli.is-scelto { background: var(--nl-blu-ink); color: var(--nl-bianco); }

/* ── La ricetta letta sul telefono (10/10, R5) ────────────────────────────
   Si spiega al passo 1 (.pv-ricetta-intro, dove poi si legge). Al
   passo 2 «Leggi la ricetta» sta in fondo al riepilogo e nella barra da
   telefono; l'attesa e gli esami da confermare in #ricetta, in cima alla
   colonna delle scelte, sopra i modi di costruire. L'attesa mostra la foto
   con una riga d'accento che la scorre: dice «sto leggendo questa». Chi
   chiede meno movimento vede la foto ferma e la barra. */
/* La card della ricetta al passo 1 (10/10): cliccabile tutta (il clic sulla
   card lo passa al pulsante, preventivo.js), con il bordo che si accende al
   passaggio. Non con un ::after sul pulsante: premuto, il pulsante si stringe
   e il clic finirebbe fuori. */
.pv-ricetta-intro {
  position: relative; display: grid; gap: 1rem;
  width: 100%; padding: 1.25rem 1.35rem; border: 1.5px solid var(--nl-bordo); border-radius: var(--nl-r-scheda); background: var(--nl-bianco);
  box-shadow: 0 1px 2px rgb(13 43 73 / .06); cursor: pointer;
  transition: border-color var(--nl-veloce), box-shadow var(--nl-veloce);
}
/* Dentro il riquadro (12/10): una riga leggera in fondo, sotto un filetto, senza
   bordo né ombra propri. Il resto (clic su tutta la riga, lettura dentro) è uguale. */
.pv-ricetta-intro--riga { border: 0; border-top: 1px solid var(--nl-bordo); border-radius: 0 0 var(--nl-r-scheda) var(--nl-r-scheda); background: var(--nl-ghiaccio); box-shadow: none; padding: 1.1rem 1.75rem; }
.pv-ricetta-intro--riga .pv-ricetta-titolo { font-size: var(--nl-t-voce); }
.pv-ricetta-intro--riga .tondo { width: 2.5rem; height: 2.5rem; }
@media (min-width: 64em) { .pv-ricetta-intro--riga { padding-inline: 2.25rem; } }
@media (max-width: 29.99em) { .pv-ricetta-intro--riga { padding: 1rem 1.1rem; } }
@media (hover: hover) and (pointer: fine) {
  .pv-ricetta-intro--riga:not(.is-letta):hover { box-shadow: none; background: var(--nl-vetro); }
}
.pv-ricetta-intro--riga.is-letta { background: var(--nl-bianco); }
/* L'invito: icona, testo, pulsanti; da tablet i pulsanti a destra. */
.pv-ricetta-invito { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .85rem 1.1rem; }
.pv-ricetta-intro .tondo { background: var(--nl-tinta-blu); color: var(--nl-blu-ink); }
.pv-ricetta-testo { display: grid; justify-items: start; gap: .4rem; padding-top: .2rem; max-width: 46rem; }
.pv-ricetta-avvia { white-space: nowrap; }
.pv-ricetta-pulsanti { grid-column: 2; display: flex; flex-wrap: wrap; gap: .5rem; }
.pv-ricetta-pulsanti [hidden] { display: none; }
@media (min-width: 48em) {
  .pv-ricetta-invito { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.5rem; }
  .pv-ricetta-pulsanti { grid-column: auto; justify-content: flex-end; }
}
/* Letta la ricetta (10/10, Mauro: un box solo): l'invito lascia il posto
   alla lettura, e la card non è più un pulsante. Senza niente da mostrare
   la zona della lettura non occupa spazio. */
.pv-ricetta-intro.is-letta { cursor: default; border-color: var(--nl-blu-ink); }
.pv-ricetta-intro.is-letta .pv-ricetta-invito { display: none; }
.pv-ricetta-intro:not(.is-letta) .pv-ricetta:not(:has(.pv-ricetta-esito:not(:empty))) { display: none; }
.pv-ricetta-intro .pv-ricetta { margin: 0; }
.pv-ricetta-intro .pv-ricetta-corpo { padding: 0; border: 0; }
/* Un PDF in lettura: l'icona del documento al posto della foto. */
.pv-ricetta-foto--pdf { display: grid; place-items: center; color: var(--nl-blu-ink); }
.pv-ricetta-foto--pdf .icona { width: 2.25rem; height: 2.25rem; }
@media (max-width: 29.99em) { .pv-ricetta-intro { padding: 1.1rem; } .pv-ricetta-invito { gap: .75rem .85rem; } .pv-ricetta-intro .tondo { width: 2.5rem; height: 2.5rem; } }
@media (hover: hover) and (pointer: fine) {
  .pv-ricetta-intro:not(.is-letta):hover { border-color: var(--nl-blu-ink); box-shadow: 0 6px 18px rgb(13 43 73 / .10); }
}
.pv-ricetta-intro:has(.pv-ricetta-avvia:focus-visible) { border-color: var(--nl-blu-ink); }
/* Un file trascinato sopra (da computer, 10/10): la zona che lo riceve. */
.pv-ricetta-intro.is-trascina, .pv-ricetta.is-trascina { outline: 2px dashed var(--nl-blu-ink); outline-offset: 4px; background-color: var(--nl-tinta-blu); }
.pv-ricetta.is-trascina { min-height: 5rem; border-radius: var(--nl-r-medio); }
.pv-ricetta { display: grid; gap: .6rem; }
.pv-ricetta:has(.pv-ricetta-corpo:not([hidden])), .pv-ricetta:has(.pv-ricetta-esito:not(:empty)) { margin-bottom: 1.5rem; }
.pv-ricetta-titolo, .pv-ricetta-esiti-titolo { font-size: var(--nl-t-voce); font-weight: 900; line-height: 1.15; text-transform: uppercase; }
.pv-ricetta-esiti-titolo:focus, .pv-ricetta-fase:focus, .pv-ricetta-vuoto .voce-titolo:focus { outline: none; }
.pv-ricetta-corpo { display: grid; gap: 1rem; padding: 1.1rem 1.25rem; border: 1.5px solid var(--nl-blu-ink); border-radius: var(--nl-r-medio); background: var(--nl-bianco); }
.pv-ricetta-pronta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .85rem 1rem; }
.pv-ricetta-esito:empty { display: none; }
.pv-ricetta-esito { font-weight: 700; color: var(--nl-blu-ink); }

.pv-ricetta-attesa { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: 1rem 1.25rem; }
.pv-ricetta-attesa-testo { display: grid; justify-items: start; gap: .35rem; min-width: 0; }
.pv-ricetta-fase { font-weight: 700; line-height: 1.3; }
.pv-ricetta-foto { position: relative; overflow: hidden; height: 6rem; border-radius: var(--nl-r-campo); background: var(--nl-vetro); }
.pv-ricetta-foto img { width: 100%; height: 100%; object-fit: cover; }
.pv-ricetta-scansione {
  position: absolute; inset: 0 0 auto; height: 2px; opacity: 0;
  background: var(--nl-accento); box-shadow: 0 0 .5rem .1rem var(--nl-accento);
}
.movimento .pv-ricetta-scansione { opacity: 1; animation: pv-scansione 1.6s ease-in-out infinite alternate; }
@keyframes pv-scansione { to { transform: translateY(calc(6rem - 2px)); } }

.pv-ricetta-barra {
  -webkit-appearance: none; appearance: none; width: 100%; height: .5rem; margin-block: .35rem .15rem;
  border: 0; border-radius: var(--nl-r-pillola); overflow: hidden; background: var(--nl-vetro); color: var(--nl-accento-ink);
}
.pv-ricetta-barra::-webkit-progress-bar { border-radius: var(--nl-r-pillola); background: var(--nl-vetro); }
.pv-ricetta-barra::-webkit-progress-value { border-radius: var(--nl-r-pillola); background: var(--nl-accento-ink); transition: width .3s var(--nl-esce); }
.pv-ricetta-barra::-moz-progress-bar { border-radius: var(--nl-r-pillola); background: var(--nl-accento-ink); }

.pv-ricetta-testa { display: grid; gap: .3rem; }
/* La tabella della ricetta (10/10, Mauro): una riga per prestazione, quelle
   che facciamo con la spunta, le altre con un'icona al posto della spunta e
   a lato cosa succede. Da telefono la scritta va sotto il nome. */
.pv-ricetta-tabella { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-medio); overflow: hidden; background: var(--nl-bianco); }
.pv-ricetta-riga + .pv-ricetta-riga { border-top: 1px solid var(--nl-bordo); }
.pv-ricetta-linea { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr) auto; align-items: center; gap: .4rem .9rem; padding: .8rem 1rem; }
label.pv-ricetta-linea { cursor: pointer; }
label.pv-ricetta-linea:has(input:disabled) { cursor: default; }
.pv-ricetta-linea input { width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--nl-blu-ink); }
.pv-ricetta-riga:has(> .pv-ricetta-linea input[type="checkbox"]:checked:not(:disabled)) { background: var(--nl-vetro); }
.pv-ricetta-riga--altra .pv-riga-nome { color: var(--nl-ink-2); }
.pv-ricetta-segno { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; color: var(--nl-ink-3); }
.pv-ricetta-segno .icona { width: 1.1rem; height: 1.1rem; }
.pv-ricetta-stato { justify-self: end; padding: .3rem .75rem; border-radius: var(--nl-r-pillola); font: 700 var(--nl-t-piccolo)/1.25 var(--nl-font-marchio); text-align: right; }
.pv-ricetta-stato--no { background: var(--nl-accento-tinta); color: var(--nl-accento-brace); }
.pv-ricetta-stato--centro { background: var(--nl-tinta-blu); color: var(--nl-blu-ink); }
.pv-ricetta-stato--centralino { background: var(--nl-vetro); color: var(--nl-ink); }
.pv-ricetta-vai { justify-self: end; min-height: 2.25rem; padding: .3rem .85rem; }
.pv-ricetta-vai .icona { width: 1rem; height: 1rem; }
@media (max-width: 29.99em) {
  .pv-ricetta-linea { grid-template-columns: 1.375rem minmax(0, 1fr); }
  .pv-ricetta-linea > :nth-child(3) { grid-column: 2; justify-self: start; text-align: left; }
}
/* Lo stesso codice per più esami: le scelte dentro la riga. */
.pv-ricetta-dubbio { display: grid; min-width: 0; margin: 0; padding: .8rem 1rem; border: 0; }
.pv-ricetta-dubbio legend { float: left; width: 100%; margin-bottom: .4rem; color: var(--nl-ink); font-weight: 700; }
.pv-ricetta-scelte { display: grid; clear: both; }
.pv-ricetta-dubbio .pv-ricetta-linea { padding: .4rem 0; }
/* Per saperne di più: telefono e WhatsApp, sotto la tabella. */
.pv-ricetta-contatti { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; padding: .9rem 1.1rem; border-radius: var(--nl-r-medio); background: var(--nl-tinta-blu); }
.pv-ricetta-contatti p { max-width: 38rem; font-size: var(--nl-t-piccolo); line-height: 1.45; }
.pv-ricetta-contatti-azioni { display: flex; flex-wrap: wrap; gap: .5rem; }
.pv-ricetta-nota { display: grid; justify-items: start; gap: .5rem; font-size: var(--nl-t-piccolo); line-height: 1.45; color: var(--nl-ink-2); }
.pv-ricetta-vuoto { display: grid; gap: .35rem; }
.pv-ricetta-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
/* Come «Richiedi questo preventivo»: durante la lettura «Leggi la ricetta»
   aspetta, e «Aggiungi» aspetta almeno una spunta. */
.pv-ricetta .pulsante:disabled { opacity: .45; cursor: not-allowed; }

/* ── La voce portata da un'altra pagina (5/10) ────────────────────────────
   Prima dei consensi: un riquadro bianco in cima al testo dei consensi,
   con i nomi della voce (niente prezzi). Dopo: un riquadro blu notte in cima
   al preventivo, «Già nel tuo preventivo» e sotto il passo in più, su righe
   bianche. È l'unico fondo scuro dello strumento: si vede per primo. */
.pv-portato { display: grid; gap: .6rem; padding: 1rem 1.1rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-medio); background: var(--nl-bianco); }
.pv-portato-titolo { display: flex; align-items: center; gap: .5rem; font: 700 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio); color: var(--nl-blu-ink); }
.pv-portato-titolo .icona { width: 1.1rem; height: 1.1rem; }
.pv-portato-voci { display: flex; flex-wrap: wrap; gap: .4rem; }
.pv-portato-voci li { padding: .35rem .8rem; border-radius: var(--nl-r-pillola); background: var(--nl-vetro); font-weight: 700; line-height: 1.3; }

.pv-consigli {
  display: grid; gap: .9rem; margin-bottom: 1.5rem;
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem); border-radius: var(--nl-r-scheda);
  background: var(--nl-blu-notte); color: var(--nl-bianco);
}
.pv-consigli-testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1rem; }
.pv-consigli-occhiello {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem;
  font: 700 var(--nl-t-etichetta)/1.2 var(--nl-font-marchio); letter-spacing: .06em; text-transform: uppercase;
  color: var(--nl-ink-su-scuro-2);
}
.pv-consigli-occhiello .icona { width: 1.35rem; height: 1.35rem; padding: .2rem; border-radius: 50%; background: var(--nl-accento-ink); color: var(--nl-bianco); }
.pv-consigli-titolo { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 900; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
.pv-consigli-titolo:focus { outline: none; }
.pv-consigli-titolo:focus-visible { outline: 2px solid var(--nl-bianco); outline-offset: 4px; }
.pv-consigli > .pv-piccolo { color: var(--nl-ink-su-scuro-2); }
.pv-consigli .pv-togli { color: var(--nl-bianco); }
/* Uno, due o tre suggerimenti: sempre in una riga quando c'è posto. */
.pv-consigli-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .5rem; }
.pv-consiglio {
  display: grid; align-content: space-between; gap: .75rem;
  padding: .9rem 1rem; border-radius: var(--nl-r-medio);
  background: var(--nl-bianco); color: var(--nl-ink);
}
.pv-etichetta--consiglio { background: var(--nl-accento-tinta); color: var(--nl-accento-brace); }
.pv-consiglio .pv-riga-azione { flex-wrap: wrap; gap: .5rem 1rem; }
.pv-consiglio-differenza { font-size: var(--nl-t-piccolo); }
.pv-consigli-moduli { justify-self: start; padding: 0; border: 0; background: none; text-align: left; color: var(--nl-bianco); }
.pv-consigli-moduli:hover { color: var(--nl-bianco); }

/* ── Schede in griglia: profili dei check-up e aree (5/10) ────────────────
   Si vede tutto l'insieme prima di scegliere. Gruppi sul filetto arancione
   come nei pannelli di sala e nella pagina Check-up (la fascia d'età per i
   profili, l'argomento per le aree). La scheda scelta: bordo blu inchiostro,
   fondo vetro e la spunta nell'angolo. */
.pv-fascia + .pv-fascia { margin-top: 1.75rem; }
.pv-fascia-titolo {
  display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem;
  font-size: var(--nl-t-voce); font-weight: 900; line-height: 1.1; text-transform: uppercase; color: var(--nl-blu-ink);
}
.pv-fascia-titolo::after { content: ""; flex: 1; height: 2px; background: var(--nl-accento); }
.pv-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.pv-scheda {
  position: relative; display: grid; align-content: start; justify-items: start; gap: .45rem;
  padding: 1.1rem 1.15rem 1.2rem; border: 1.5px solid var(--nl-bordo); border-radius: var(--nl-r-scheda);
  background: var(--nl-bianco); color: var(--nl-ink); text-align: left;
  transition: border-color var(--nl-veloce), background-color var(--nl-veloce);
}
button.pv-scheda { width: 100%; font: inherit; cursor: pointer; }
.pv-scheda.is-scelta { border-color: var(--nl-blu-ink); box-shadow: inset 0 0 0 1px var(--nl-blu-ink); background: var(--nl-vetro); }
.pv-scheda--larga { grid-column: 1 / -1; }
.pv-scheda-eta { font: 700 var(--nl-t-piccolo)/1.2 var(--nl-font-marchio); color: var(--nl-blu-ink); }
.pv-scheda-nome { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); font-weight: 900; line-height: 1; text-transform: uppercase; }
.pv-scheda-nome--area { padding-right: 2rem; font-size: var(--nl-t-voce); font-weight: 700; line-height: 1.25; text-transform: none; }
.pv-scheda-meta { font-size: var(--nl-t-piccolo); line-height: 1.35; color: var(--nl-ink-2); }
.pv-scheda-livelli { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
/* Sulla scheda del profilo solo «da 29,00 €» (12/10, Mauro). */
.pv-scheda-da { margin-top: .2rem; font: 600 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio); color: var(--nl-blu-ink); font-variant-numeric: tabular-nums; }
.pv-scheda-livello {
  display: inline-flex; align-items: baseline; gap: .4rem; padding: .25rem .65rem; border-radius: var(--nl-r-pillola);
  background: var(--nl-vetro); font: 600 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio); color: var(--nl-blu-ink);
}
.pv-scheda.is-scelta .pv-scheda-livello { background: var(--nl-bianco); }
.pv-scheda-livello strong { font-variant-numeric: tabular-nums; color: var(--nl-ink); }
.pv-scheda-livello--plus, .pv-scheda.is-scelta .pv-scheda-livello--plus { background: var(--nl-accento-tinta); color: var(--nl-accento-brace); }
.pv-scheda-spunta {
  position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--nl-blu-ink); color: var(--nl-bianco);
}
.pv-scheda-spunta .icona { width: 1rem; height: 1rem; stroke-width: 2.5; }
/* Nella scheda le versioni sono righe a tutta larghezza: nome a sinistra,
   prezzo a destra. I nomi lunghi («Intestino e colon – benessere
   intestinale») vanno a capo senza deformare una pillola. */
.pv-scheda .pv-varianti { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; width: 100%; gap: .4rem; margin-top: .35rem; }
.pv-scheda .pv-pillola--prezzo {
  justify-content: space-between; width: 100%; min-height: 2.75rem; padding: .45rem .85rem;
  border-radius: var(--nl-r-medio); text-align: left; line-height: 1.25;
}
.pv-scheda .pv-pillola--prezzo strong { flex: none; margin-left: auto; }
.pv-scheda .pv-visite { width: 100%; margin-top: .5rem; }
@media (hover: hover) and (pointer: fine) { .pv-scheda:hover { border-color: var(--nl-blu-ink); } }

/* Profili: da largo, Under 40 e Over 40 affiancate (come nella pagina
   Check-up), la fascia dei ragazzi su tutta la riga. */
/* Profili: schede più strette, due per riga anche da telefono. */
.pv-profili .pv-schede { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
#pannello-checkup { container-type: inline-size; }
@container (min-width: 44rem) {
  .pv-profili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .pv-profili .pv-fascia:first-child { grid-column: 1 / -1; }
  .pv-profili .pv-fascia + .pv-fascia { margin-top: 1.75rem; }
  .pv-profili .pv-fascia:first-child .pv-schede { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv-profili .pv-fascia:not(:first-child) .pv-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Check-up: livelli e moduli. */
.pv-livelli { display: grid; gap: 1rem; margin-top: 1.25rem; }
.pv-livello {
  position: relative; overflow: hidden; display: grid; justify-items: start; align-content: start; gap: .75rem;
  padding: 1.5rem; border: 2px solid transparent; border-radius: var(--nl-r-scheda); background: var(--nl-bianco);
}
/* Affiancati, i livelli condividono le righe (10/10, Mauro): nome e prezzo,
   quanti esami, «Vedi gli esami», pulsanti stanno alla stessa altezza nelle
   due schede, anche quando una ha più esami. Le righe le dà la griglia del
   contenitore (subgrid); ogni scheda ne occupa quattro. */
@media (min-width: 48em) {
  .pv-livelli { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; row-gap: 0; }
  .pv-livello { grid-row: span 4; grid-template-rows: subgrid; row-gap: .75rem; }
  .pv-livello > * { align-self: start; }
  /* Spazio per l'elemento accento nell'angolo del Plus: non tocca i pulsanti. */
  .pv-livello { padding-bottom: 3.25rem; }
}
.pv-livello-azioni { position: relative; z-index: 1; }
/* I due pulsanti affiancati, in due colonne uguali: nella scheda stretta
   (accanto al riepilogo) il testo va a capo dentro il pulsante. */
.pv-livello-azioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: 100%; }
.pv-livello-azioni .pv-scegli { justify-content: center; padding-inline: .6rem; line-height: 1.15; text-align: center; }
.pv-livello-azioni .pv-scegli .icona { flex: none; }
.pv-scegli--leggero { border-color: var(--nl-bordo); }
.pv-scegli--leggero[aria-expanded="true"] { border-color: var(--nl-blu-ink); background: var(--nl-vetro); }
.pv-prezzo--doppio { font-weight: 500; white-space: normal; }

/* Gli altri esami da aggiungere al check-up: la ricerca sotto i livelli. */
.pv-altri { display: grid; gap: .75rem; margin-top: 1.25rem; padding: 1.25rem; border: 1.5px solid var(--nl-blu-ink); border-radius: var(--nl-r-scheda); background: var(--nl-bianco); }
.pv-altri-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.pv-altri-testa .pv-annulla { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }
.pv-altri-testa .pv-annulla .icona { width: 1.1rem; height: 1.1rem; }
.pv-altri .pv-sottotitolo { margin-top: 0; }
/* Specialità da toccare: le aree a fisarmonica, dentro le pillole. */
.pv-aree-specialita { margin-top: 1rem; border-top: 1px solid var(--nl-bordo); }
.pv-area-gruppo { border-bottom: 1px solid var(--nl-bordo); }
.pv-area-gruppo summary {
  display: flex; align-items: center; gap: 1rem; min-height: 3.25rem; padding-block: .75rem;
  font-weight: 700; line-height: 1.25; cursor: pointer; list-style: none;
}
.pv-area-gruppo summary::-webkit-details-marker { display: none; }
.pv-area-gruppo summary:hover { color: var(--nl-blu-ink); }
.pv-area-nome { flex: 1; }
.pv-area-conta { font-size: var(--nl-t-piccolo); font-weight: 500; color: var(--nl-ink-2); }
.pv-area-gruppo .tondo { flex: none; transition: transform var(--nl-veloce), background-color var(--nl-veloce); }
.pv-area-gruppo[open] .tondo { transform: rotate(45deg); background: var(--nl-vetro); }
.pv-specialita-pillole { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 1rem; }
.pv-area-gruppo > .pv-risultati { padding-bottom: 1.25rem; }
.pv-livello.is-scelto { border-color: var(--nl-blu-ink); }
.pv-livello--plus { background: var(--nl-accento-tinta); }
.pv-livello--plus::after {
  content: ""; position: absolute; right: -1.25rem; bottom: -1.25rem; width: 5rem; aspect-ratio: 1; pointer-events: none;
  background: var(--nl-accento);
  -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat;
}
.pv-livello--plus .esami li { background: var(--nl-bianco); }
.pv-livello-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; width: 100%; }
.pv-livello-nome { font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1; text-transform: uppercase; }

.pv-dettaglio summary {
  width: fit-content; font: 700 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio); color: var(--nl-blu-ink);
  text-decoration: underline; text-underline-offset: .3em; cursor: pointer;
}
.pv-dettaglio[open] summary { margin-bottom: .6rem; }
.pv-dettaglio .esami { max-width: 36rem; }

/* Aree e pacchetti con visita. */
.pv-varianti { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 40em) { .pv-varianti { justify-content: flex-end; } }
.pv-visite {
  display: grid; gap: .6rem; padding-top: 1rem; border-top: 1px dashed var(--nl-bordo);
}
@media (min-width: 40em) { .pv-visite { grid-column: 1 / -1; } }
.pv-visite-titolo { font: 700 var(--nl-t-etichetta)/1.3 var(--nl-font-marchio); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-accento-ink); }
.pv-visite-lista { display: grid; gap: .5rem; }
.pv-visita {
  display: grid; gap: .6rem 1rem; align-items: center; padding: .9rem 1rem;
  border: 1.5px solid transparent; border-radius: var(--nl-r-medio); background: var(--nl-vetro);
}
@media (min-width: 40em) { .pv-visita { grid-template-columns: minmax(0, 1fr) auto; } }
.pv-visita.is-scelta { border-color: var(--nl-blu-ink); background: var(--nl-bianco); }

/* ── Riepilogo ─────────────────────────────────────────────────────────── */
.pv-riepilogo {
  position: relative; overflow: hidden; display: grid; gap: 1rem;
  padding: 1.5rem 1.5rem 1.75rem; border-radius: var(--nl-r-scheda); background: var(--nl-bianco);
  scroll-margin-top: calc(var(--nl-testata) + 1rem);
}
.pv-riepilogo::before {
  content: ""; position: absolute; right: 0; top: 0; width: 3.75rem; aspect-ratio: 1; pointer-events: none;
  background: var(--nl-accento);
  -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat;
}
@media (min-width: 64em) {
  .pv-riepilogo {
    position: sticky; top: calc(var(--nl-testata) + 1.25rem);
    max-height: calc(100vh - var(--nl-testata) - 2.5rem); overflow-y: auto; overscroll-behavior: contain;
  }
}
.pv-riepilogo-titolo { padding-right: 3.5rem; font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1; text-transform: uppercase; }
.pv-riepilogo-vuoto { color: var(--nl-ink-2); }

.pv-voci { display: grid; }
.pv-voce { display: grid; gap: .45rem; padding-block: .9rem; border-bottom: 1px solid var(--nl-bordo); }
.pv-voce:first-child { border-top: 1px solid var(--nl-bordo); }
/* Tre colonne fisse in ogni riga: nome · importo · togli. Così gli importi
   stanno tutti sulla stessa verticale, anche quelli dei totali. */
.pv-riepilogo { --pv-importo: 5.75rem; --pv-togli: 2.25rem; }
.pv-voce-testa {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--pv-importo) var(--pv-togli); align-items: center; gap: .3rem .5rem;
}
.pv-voce-prezzo, .pv-voce-singoli-prezzo { text-align: right; }
.pv-voce-testa .pv-etichetta { grid-column: 1 / -1; }
.pv-voce-titolo { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pv-voce-prezzo { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-voce--gratis .pv-voce-prezzo { color: var(--nl-accento-ink); }

.pv-etichetta {
  display: inline-block; width: fit-content; padding: .2rem .55rem; border-radius: var(--nl-r-pillola);
  font: 700 var(--nl-t-etichetta)/1.2 var(--nl-font-marchio); letter-spacing: .06em; text-transform: uppercase;
  background: var(--nl-vetro); color: var(--nl-blu-ink);
}
.pv-etichetta--gratuito, .pv-etichetta--sconto { background: var(--nl-accento-tinta); color: var(--nl-accento-brace); }
.pv-totale .pv-etichetta { margin-right: .5rem; }

.pv-voce-singoli { display: grid; gap: .5rem; }
.pv-voce-singoli li {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--pv-importo) var(--pv-togli); align-items: center; gap: .5rem;
  font-size: var(--nl-t-piccolo); line-height: 1.35; color: var(--nl-ink-2); overflow-wrap: anywhere;
}
.pv-voce-singoli-prezzo { font-variant-numeric: tabular-nums; }

/* Il cerchio resta di 36px (la colonna --pv-togli), ma il tocco prende 44px:
   l'area in più è un ::after trasparente che sborda di 4px per lato. */
.pv-togli {
  position: relative;
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--nl-ink-3);
  transition: background-color var(--nl-veloce), color var(--nl-veloce);
}
.pv-togli::after { content: ""; position: absolute; inset: -.25rem; border-radius: 50%; }
.pv-togli .icona { width: 1.1rem; height: 1.1rem; }

.pv-compresi { display: grid; gap: .4rem; padding-block: .9rem; border-bottom: 1px solid var(--nl-bordo); }
.pv-richiesta { display: grid; gap: .5rem; padding: 1rem; border: 1.5px dashed var(--nl-bordo); border-radius: var(--nl-r-medio); }
/* PagoDIL: il logo e come funziona, se almeno una voce scelta si paga a rate (23/10). */
/* Il logo sopra il testo: il riepilogo è una colonna stretta. */
.pv-pagodil {
  display: grid; gap: .6rem; padding: 1rem;
  background: var(--nl-bianco); border: 1.5px solid var(--nl-bordo); border-radius: var(--nl-r-medio);
}
.pv-pagodil > div { display: grid; gap: .3rem; }

.pv-totale {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: .3rem; padding-right: calc(var(--pv-togli) + .5rem);
}
.pv-totale > div { display: grid; gap: .2rem; }
.pv-totale-valore { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-totale--sconto .pv-totale-valore { color: var(--nl-accento-ink); }
.pv-totale--finale { align-items: center; margin-top: .4rem; padding-top: 1rem; border-top: 2px solid var(--nl-ink); font-weight: 700; }
.pv-totale-grande { font-size: clamp(2.2rem, 1.8rem + 1.5vw, 2.9rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-validita {
  display: flex; gap: .6rem; margin-block: .75rem .4rem; padding: .8rem 1rem; border-radius: var(--nl-r-medio);
  background: var(--nl-vetro); font-size: var(--nl-t-piccolo); line-height: 1.45;
}
.pv-validita .icona { flex: none; margin-top: .1rem; color: var(--nl-blu-ink); }

.pv-domicilio { padding: 1rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-medio); color: var(--nl-ink); }
.pv-domicilio > span { display: grid; gap: .2rem; }
.pv-riepilogo-azioni { display: grid; gap: .75rem; }
/* Da computer il riepilogo scorre dentro la sua scheda: «Richiedi» resta in fondo, sempre visibile. */
@media (min-width: 64em) {
  .pv-riepilogo-azioni {
    position: sticky; bottom: -1.75rem; z-index: 1;
    margin: 0 -1.5rem -1.75rem; padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--nl-bordo); background: var(--nl-bianco);
  }
}
.pv-riepilogo-azioni .pulsante { width: 100%; }
.pv-riepilogo-azioni .pulsante:disabled { opacity: .45; cursor: not-allowed; }
.pv-ricomincia {
  justify-self: start; padding: 0; border: 0; background: none;
  font-size: var(--nl-t-piccolo); color: var(--nl-ink-2); text-decoration: underline; text-underline-offset: .25em;
}
/* Ricomincia e, per 10 secondi, «Preventivo svuotato · Annulla». */
.pv-ricomincia-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.pv-svuotato { font-size: var(--nl-t-piccolo); color: var(--nl-ink-2); }
.pv-svuotato:empty { display: none; }
.pv-annulla { font-weight: 700; color: var(--nl-blu-ink); }
.pv-avanti-motivo[hidden] { display: none; }
/* Da vuoto (12/10, Mauro): la frase e «Leggi la ricetta». Pulsante, motivo, nota e
   «Ricomincia» tornano quando c'è qualcosa; «Annulla» resta se si è appena svuotato. */
.pv-riepilogo.is-vuoto #avanti-dati,
.pv-riepilogo.is-vuoto .pv-avanti-motivo,
.pv-riepilogo.is-vuoto .pv-riepilogo-azioni > p.pv-piccolo,
.pv-riepilogo.is-vuoto .pv-ricomincia-riga:not(:has(#annulla-svuota:not([hidden]))) { display: none; }

/* Il passaggio del mouse cambia colore e bordo, mai la posizione; e solo con
   un mouse vero: sul telefono resterebbe «acceso» dopo il tocco. */
@media (hover: hover) and (pointer: fine) {
  .pv-pillola:hover { border-color: var(--nl-blu-ink); }
  .pv-ingresso:hover { border-color: var(--nl-bordo); }
  .pv-ingresso[aria-selected="true"]:hover { border-color: var(--nl-blu-ink); }
  .pv-scegli:hover { background: var(--nl-vetro); }
  .pv-scegli.is-scelto:hover { background: var(--nl-blu-ink); }
  .pv-togli:hover { background: var(--nl-vetro); color: var(--nl-accento-ink); }
  .pv-ricomincia:hover { color: var(--nl-accento-ink); }
}

/* Da telefono: la barra del totale prende il posto della barra rapida. */
.pv-barra {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem var(--nl-margine) calc(.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--nl-bordo); background: var(--nl-bianco);
}
.pv-barra[hidden] { display: none; }
.pv-barra p { display: grid; gap: .1rem; }
.pv-barra-etichetta { font: 700 var(--nl-t-etichetta)/1.2 var(--nl-font-marchio); letter-spacing: .06em; text-transform: uppercase; color: var(--nl-ink-2); }
.pv-barra strong { font-size: 1.5rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.pv-barra .pulsante { min-height: 2.9rem; padding: .6rem 1.2rem; }
/* «Leggi la ricetta» (R5): accanto al totale è un'icona con «Ricetta» sotto,
   come in una barra di schede; col preventivo vuoto è l'unico pulsante e
   prende tutta la larghezza, con il nome intero. */
.pv-barra-ricetta {
  flex: none; display: grid; justify-items: center; gap: .2rem; min-width: 3.25rem; min-height: 2.9rem; padding: .2rem .25rem;
  border: 0; background: none; font: 700 .75rem/1 var(--nl-font-marchio); color: var(--nl-blu-ink);
}
.pv-barra-ricetta .icona { width: 1.5rem; height: 1.5rem; }
.pv-barra-ricetta:disabled { opacity: .45; }
.pv-barra-ricetta-lungo { display: none; }
.pv-barra.is-vuota .pv-barra-totale, .pv-barra.is-vuota #barra-vai { display: none; }
.pv-barra.is-vuota .pv-barra-ricetta {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1.5px solid var(--nl-blu-ink); border-radius: var(--nl-r-pillola); font-size: var(--nl-t-piccolo);
}
.pv-barra.is-vuota .pv-barra-ricetta .icona { width: 1.15rem; height: 1.15rem; }
.pv-barra.is-vuota .pv-barra-ricetta-breve { display: none; }
.pv-barra.is-vuota .pv-barra-ricetta-lungo { display: inline; }
body.con-barra { padding-bottom: 5rem; }
@media (min-width: 64em) {
  .pv-barra { display: none !important; }
  body.con-barra { padding-bottom: 0; }
}

/* ── Passo 3: i dati ───────────────────────────────────────────────────── */
.pv-dati-riepilogo:empty { display: none; }
.pv-dati-riepilogo { padding: .9rem 1.1rem; border-radius: var(--nl-r-medio); background: var(--nl-bianco); font-weight: 700; }
.pv-indietro { padding: 0; border: 0; background: none; }
.pv-dati .modulo { border: 1px solid var(--nl-bordo); }
.pv-campi-nota { font-size: var(--nl-t-piccolo); color: var(--nl-ink-2); }
/* L'asterisco dei campi obbligatori (26/10): sull'etichetta, non letto dai
   lettori di schermo (il campo dice già che serve con l'errore). */
[data-obbligatorio]::after { content: "\00a0*"; content: "\00a0*" / ""; color: var(--nl-errore); }
/* Come, quando, i dati (11/10, come la landing del quiz): un modulo solo,
   prima la modalità (schede da scegliere) e quello che serve per lei. */
.pv-dati-dentro { display: grid; gap: 1.5rem; max-width: 60rem; }
.pv-dati-testa { display: grid; justify-items: start; gap: .75rem; }
.pv-scheda-dati { gap: 1.25rem; }
@media (min-width: 48em) { .pv-scheda-dati { padding: 2rem 2.25rem; } }
@media (max-width: 29.99em) { .pv-scheda-dati { padding: 1.25rem; } .pv-modo-dettagli { padding: 1rem; } .pv-orario span { padding-inline: .9rem; } }
/* Il campo trappola: fuori dallo schermo, non nascosto (i programmi lo vedono). */
.pv-trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pv-modo, .pv-orari { min-width: 0; margin: 0; padding: 0; border: 0; }
.pv-modo legend { padding: 0; margin-bottom: .9rem; }
.pv-modi { display: grid; gap: .75rem; }
@media (min-width: 40em) { .pv-modi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-modo[aria-invalid="true"] .pv-scelta { border-color: var(--nl-errore); }
.pv-modo-dettagli { display: grid; gap: 1.1rem; padding: 1.25rem; border-radius: var(--nl-r-medio); background: var(--nl-ghiaccio); }
.pv-quando { display: grid; gap: .6rem; }
.pv-quando .campo { max-width: 17rem; }
.pv-preavviso { display: flex; gap: .5rem; font-size: var(--nl-t-piccolo); line-height: 1.45; color: var(--nl-ink-2); }
.pv-preavviso .icona { flex: none; margin-top: .15rem; color: var(--nl-blu-ink); }
.pv-preavviso a { font-weight: 700; color: var(--nl-blu-ink); white-space: nowrap; }
.pv-orari legend { padding: 0; margin-bottom: .5rem; }
.pv-orari-scelte { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .5rem; }
.pv-orario { position: relative; }
.pv-orario input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pv-orario span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.1rem;
  border: 1.5px solid var(--nl-bordo); border-radius: var(--nl-r-pillola); background: var(--nl-bianco);
  font: 700 var(--nl-t-piccolo)/1.2 var(--nl-font-marchio); color: var(--nl-ink);
  transition: border-color var(--nl-veloce), background-color var(--nl-veloce), color var(--nl-veloce);
}
.pv-orario input:checked + span { border-color: var(--nl-blu-ink); background: var(--nl-blu-ink); color: var(--nl-bianco); }
.pv-orario input:focus-visible + span { outline: 3px solid var(--nl-blu-notte); outline-offset: 2px; }
.pv-orari[aria-invalid="true"] .pv-orario span { border-color: var(--nl-errore); }
/* Visite e altre prestazioni: solo una preferenza (11/10). */
.pv-visite-testo { max-width: 46rem; margin-bottom: 1rem; }
.pv-dati-titolo { margin-top: .5rem; }
/* I gruppi del passo 3 (12/10): «Dove», «Chi sei», «Come ti contattiamo». */
.pv-gruppo { display: grid; gap: .9rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.pv-gruppo legend { padding: 0; margin-bottom: .9rem; }
.pv-gruppo-titolo { font: 700 var(--nl-t-etichetta)/1.3 var(--nl-font-marchio); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-blu-ink); }
.pv-gruppo + .pv-gruppo { margin-top: .5rem; }
.pv-scheda-dati .nota-scudo { max-width: none; }

/* ── Passo 4: conferma ─────────────────────────────────────────────────── */
.pv-inviato { background: var(--nl-ghiaccio); }
.pv-inviato::before {
  content: ""; position: absolute; z-index: -1; left: -14rem; bottom: -16rem; width: 40rem; aspect-ratio: 1;
  background: var(--nl-tinta-blu);
  -webkit-mask: var(--forma-contorno) center / contain no-repeat; mask: var(--forma-contorno) center / contain no-repeat;
}
.pv-inviato-dentro { display: grid; justify-items: center; gap: 1.25rem; max-width: 46rem; text-align: center; }
.pv-inviato-segno { width: 4.5rem; height: 4.5rem; }
.pv-inviato-segno .icona { width: 2rem; height: 2rem; }
.pv-inviato .azioni { justify-content: center; }
/* Il riepilogo della richiesta e le informazioni utili (11/10, come il quiz). */
.pv-esito { display: grid; gap: 1.5rem; width: 100%; margin-top: .5rem; text-align: left; }
.pv-esito-scheda { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda); background: var(--nl-bianco); }
.pv-esito-righe { display: grid; margin: 0; }
.pv-esito-riga { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .2rem 1rem; padding: .6rem 0; border-top: 1px solid var(--nl-bordo); }
.pv-esito-riga:first-child { border-top: 0; padding-top: 0; }
.pv-esito-riga dt { font-size: var(--nl-t-piccolo); color: var(--nl-ink-2); }
.pv-esito-riga dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 29.99em) { .pv-esito-riga { grid-template-columns: 1fr; } }
.pv-esito-stampa { display: grid; justify-items: start; gap: .4rem; }
.pv-esito-info { display: grid; gap: 1.1rem 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .pv-esito-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-esito-voce { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .85rem; }
.pv-esito-voce .tondo { width: 2.5rem; height: 2.5rem; border-color: transparent; background: var(--nl-tinta-blu); color: var(--nl-blu-ink); }
.pv-esito-voce-titolo { font-weight: 700; line-height: 1.3; }
.pv-avviso { color: var(--nl-ink-2); }

/* Il foglio stampato (11/10): a video non c'è; in stampa c'è solo lui. */
/* Le voci e i totali sono copiati dal riepilogo: stesse colonne, senza «Togli». */
.pv-stampa { display: none; --pv-importo: 5.75rem; --pv-togli: 0rem; }
@media print {
  @page { margin: 14mm; }
  body > :not(main), main > :not(#passo-inviato), .pv-inviato-dentro > :not(.pv-stampa) { display: none !important; }
  .pv-inviato, body { background: #fff !important; padding: 0 !important; }
  .pv-inviato::before, .pv-inviato::after { display: none !important; }
  .pv-inviato-dentro { display: block; max-width: none; text-align: left; }
  .pv-stampa { display: grid; gap: 10pt; color: #000; font-size: 10.5pt; }
  .pv-stampa-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 12pt; padding-bottom: 8pt; border-bottom: 1.5pt solid #000; }
  .pv-stampa-sito { font: 900 14pt/1.2 var(--nl-font-marchio); text-transform: uppercase; }
  .pv-stampa-titolo { font-weight: 700; }
  .pv-stampa .pv-esito-riga { grid-template-columns: 9rem 1fr; padding: 3pt 0; }
  .pv-stampa .pv-voce, .pv-stampa .pv-totale { break-inside: avoid; }
}
.pv-registro { width: 100%; margin-top: 1.5rem; text-align: left; }
.pv-registro summary { width: fit-content; margin-inline: auto; font: 700 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio); color: var(--nl-blu-ink); cursor: pointer; }
.pv-registro[open] summary { margin-bottom: .75rem; }
.pv-registro pre {
  max-height: 26rem; margin-top: .75rem; padding: 1rem; overflow: auto;
  border-radius: var(--nl-r-medio); background: var(--nl-bianco);
  font: .8125rem/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--nl-ink);
}

/* Pagare subito, dopo la richiesta (7/10) */
.pv-paga {
  display: grid; justify-items: start; gap: .75rem; max-width: 40rem; margin: 2rem auto 0; padding: 1.5rem; text-align: left;
  border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda); background: var(--nl-bianco);
}
.pv-paga[hidden] { display: none; }
.pv-paga .modulo-stato { justify-self: stretch; }
/* Le tre strade (10/10): online, bonifico, in sede. */
.pv-paga-modi { display: grid; gap: .75rem; width: 100%; margin: .5rem 0 0; padding: 0; list-style: none; }
.pv-paga-modo { display: grid; justify-items: start; gap: .6rem; padding: 1.1rem 1.25rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-medio); background: var(--nl-ghiaccio); }
.pv-paga-modo-titolo { display: flex; align-items: center; gap: .5rem; font: 700 1.0625rem/1.25 var(--nl-font-marchio); }
.pv-paga-modo-titolo .icona { color: var(--nl-blu-ink); }
.pv-paga-metodi { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pv-paga-metodo { padding: .3rem .7rem; border-radius: var(--nl-r-pillola); background: var(--nl-bianco); border: 1px solid var(--nl-bordo); font-size: var(--nl-t-piccolo); font-weight: 600; }
.pv-bonifico { display: grid; gap: .35rem; width: 100%; margin: 0; }
.pv-bonifico-riga { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--nl-bordo); }
.pv-bonifico-riga dt { color: var(--nl-ink-2); font-size: var(--nl-t-piccolo); }
.pv-bonifico-riga dd { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; min-width: 0; font-weight: 600; }
.pv-bonifico-riga dd span { overflow-wrap: anywhere; }
.pv-copia { flex: none; min-height: 2.25rem; padding: 0 .8rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-pillola); background: var(--nl-bianco); color: var(--nl-blu-ink); font: 600 var(--nl-t-piccolo)/1 var(--nl-font-testo); cursor: pointer; }
.pv-copia.is-copiato { border-color: var(--nl-blu-ink); }
@media (max-width: 29.99em) { .pv-bonifico-riga { grid-template-columns: 1fr; gap: .2rem; } }

/* I moduli del check-up (12/10, Mauro): dopo la scelta del livello, chiusi in una
   riga che si apre. */
.pv-moduli { margin-top: 1.5rem; border-top: 1px solid var(--nl-bordo); }
.pv-moduli-apri {
  display: flex; align-items: center; gap: .6rem; padding-block: 1.1rem; list-style: none; cursor: pointer;
  font: 700 var(--nl-t-voce)/1.25 var(--nl-font-testo); color: var(--nl-blu-ink);
}
.pv-moduli-apri::-webkit-details-marker { display: none; }
.pv-moduli-apri .icona { transition: transform var(--nl-veloce) var(--nl-esce); }
.pv-moduli[open] .pv-moduli-apri .icona { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .pv-moduli-apri:hover span { text-decoration: underline; text-underline-offset: .2em; } }
.pv-moduli > .pv-sottotitolo { margin-top: 0; }

/* L'avviso dopo «Ricomincia da capo», in cima al primo passo (12/10). */
.pv-ricominciato { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .85rem 1.1rem; border-radius: var(--nl-r-medio); background: var(--nl-tinta-blu); color: var(--nl-ink); font-size: var(--nl-t-piccolo); }
.pv-ricominciato[hidden] { display: none; }
.pv-ricominciato .icona { color: var(--nl-blu-ink); }

/* ── La vista operatore (28/10) ────────────────────────────────────────────
   Per il centralino e le sedi (js/preventivo.js, «La vista operatore»): una
   barra in cima con chi è, gli sconti, «Nuovo preventivo» ed «Esci»; tutti
   gli ingressi aperti uno sotto l'altro; i codici accanto alle voci. */
.pv-op-barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .6rem var(--nl-margine);
  background: var(--nl-blu-notte); color: var(--nl-bianco);
  font-size: var(--nl-t-piccolo);
}
.pv-op-chi { margin: 0; margin-right: auto; }
.pv-op-chi strong { font-family: var(--nl-font-marchio); text-transform: uppercase; letter-spacing: .04em; }
.pv-op-sconti { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pv-op-barra .pv-pillola { min-height: 2.25rem; padding: .35rem .9rem; border-color: var(--nl-bordo-su-scuro); background: transparent; color: var(--nl-bianco); }
.pv-op-barra .pv-pillola[aria-pressed="true"] { border-color: var(--nl-bianco); background: var(--nl-bianco); color: var(--nl-blu-notte); }
.pv-op-azione {
  min-height: 2.25rem; padding: .35rem .9rem; border: 1.5px solid var(--nl-bianco); border-radius: var(--nl-r-pillola);
  background: transparent; color: var(--nl-bianco); font: 700 var(--nl-t-piccolo)/1.2 var(--nl-font-marchio); cursor: pointer;
}
.pv-op-azione:hover { background: var(--nl-velo-su-scuro); }
.pv-op-nota { flex-basis: 100%; margin: 0; color: var(--nl-ink-su-scuro-2); }
.pv-op-avviso { position: fixed; inset: auto 1rem 1rem auto; z-index: 50; max-width: 24rem; padding: .8rem 1rem;
  border-radius: var(--nl-r-medio); background: var(--nl-blu-notte); color: var(--nl-bianco); box-shadow: var(--nl-ombra); }
/* Una schermata sola, come la dashboard del quiz: niente passi né pulsanti fra un passo e l'altro, le schede
   come linguette (senza icona e nota). I consensi stanno nel modulo dei dati, accanto a «Invia». */
.pv-operatore .pv-passi-barra, .pv-operatore #passo-consensi, .pv-operatore #passo-dati,
.pv-operatore #avanti-dati, .pv-operatore #avanti-motivo { display: none; }
.pv-operatore .pv-strumento { padding-top: 1.25rem; }
.pv-operatore .pv-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: 2rem; }
.pv-op-destra { display: grid; gap: 1rem; min-width: 0; }
.pv-op-destra > * { padding: 1rem 1.25rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda); background: var(--nl-bianco); }
.pv-operatore .pv-riepilogo { position: relative; top: auto; }   /* non segue lo scorrimento; il segno rosso resta nel suo angolo */
/* «Già paziente» in poco spazio: due scelte affiancate, senza illustrazione né nota. */
.pv-operatore .pv-paziente legend { margin-bottom: .5rem; }
.pv-operatore .pv-paziente .pv-scelte { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pv-operatore .pv-paziente .pv-scelta { padding: .5rem .75rem; }
.pv-operatore .pv-paziente .pv-scelta-illu, .pv-operatore .pv-paziente .pv-scelta-testo span { display: none; }
.pv-operatore .pv-ingressi, .pv-operatore .pv-ingressi:has(> .pv-ingresso:nth-of-type(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.pv-operatore .pv-ingresso { padding: .6rem .9rem; }
.pv-operatore .pv-ingresso .tondo, .pv-operatore .pv-ingresso-testo span { display: none; }
.pv-operatore .pv-scheda-dati .pv-consensi-caselle { margin-top: 0; }
.pv-operatore .pv-op-destra .pv-scheda-dati { gap: .75rem; padding: 1rem 1.25rem; }
.pv-operatore .pv-scheda-dati .campi { gap: .6rem .75rem; }
.pv-op-codici { color: var(--nl-ink-2); font-size: var(--nl-t-piccolo); font-variant-numeric: tabular-nums; }
.pv-voce-singoli .pv-op-codici { display: block; }

/* Più fitta (28/10, Mauro: la vista si usa solo da computer). Caratteri più piccoli e meno salti fra le
   grandezze: a far risaltare quello che conta restano il grassetto e il colore. Gli spazi fra le parti si
   stringono, e l'introduzione per il paziente (occhiello, frase, vantaggi) non serve. */
.pv-operatore {
  --nl-t-display: 1.6rem; --nl-t-titolo: 1.35rem; --nl-t-scheda: 1.1rem; --nl-t-sottotitolo: 1.05rem;
  --nl-t-lead: .9375rem; --nl-t-voce: .9375rem; --nl-t-corpo: .875rem; --nl-t-piccolo: .8125rem; --nl-t-etichetta: .6875rem;
  --nl-sezione: 2rem; --nl-margine: 1.5rem;
}
.pv-operatore body { font-size: var(--nl-t-corpo); }
.pv-operatore .pv-inizio-testa, .pv-operatore .pv-vantaggi { display: none; }
.pv-operatore .pv-titolo { font-size: 1.1rem; }
.pv-operatore .pv-consigli-titolo, .pv-operatore .pv-scheda-nome { font-size: 1.05rem; }
.pv-operatore .pv-totale-grande { font-size: 1.6rem; }
.pv-operatore .pv-pillola, .pv-operatore .pulsante { min-height: 2.25rem; padding-block: .35rem; }
.pv-op-destra > .pv-paziente legend { float: left; width: 100%; }
.pv-op-destra > .pv-paziente .pv-scelte { clear: both; }
.pv-operatore #campo-note { min-height: 4.5rem; height: 4.5rem; }

/* Più spazio per scegliere (28/10, Mauro): via testata e piè di pagina; in cima a destra consensi e «Invia», e le due
   card di «come e quando» e dei dati, che si compilano in una finestra. */
.pv-operatore .testata, .pv-operatore .piede { display: none; }
.pv-op-schede { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pv-op-scheda {
  display: grid; gap: .15rem; padding: .6rem .8rem; text-align: left; cursor: pointer;
  border: 1.5px solid var(--nl-bordo); border-radius: var(--nl-r-medio); background: var(--nl-bianco); color: var(--nl-ink);
  transition: border-color var(--nl-veloce);
}
.pv-op-scheda:hover { border-color: var(--nl-blu-ink); }
.pv-op-scheda-titolo { font-weight: 700; }
.pv-op-scheda-riassunto { color: var(--nl-ink-2); font-size: var(--nl-t-piccolo); }
.pv-op-scheda.is-errore { border-color: var(--nl-errore); }
.pv-op-scheda.is-errore .pv-op-scheda-riassunto { color: var(--nl-errore); font-weight: 700; }
.pv-op-destra .pv-consensi-caselle { margin: 0; }
.pv-op-destra .pv-consensi-caselle .nota-scudo, .pv-op-destra .pv-consensi-caselle .voce-titolo, .pv-op-destra .pv-campi-nota,
.pv-op-destra .pv-scheda-dati > .nota-scudo { display: none; }
.pv-op-destra .pv-scheda-dati .azioni { margin-top: .5rem; }
.pv-op-destra .pv-scheda-dati .azioni .pulsante { width: 100%; }
.pv-op-finestra {
  width: min(44rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 1.25rem 1.5rem; overflow: auto;
  border: 0; border-radius: var(--nl-r-scheda); background: var(--nl-bianco); color: var(--nl-ink); box-shadow: var(--nl-ombra);
}
.pv-op-finestra::backdrop { background: rgba(13, 43, 73, .45); }
.pv-op-finestra > * + * { margin-top: 1rem; }
.pv-op-finestra-testa { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pv-op-finestra-testa .voce-titolo { margin: 0; }
.pv-op-finestra-piede { display: flex; justify-content: flex-end; }
.pv-op-finestra .pv-modi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-operatore .pv-riepilogo::before { display: none; }
.pv-operatore .pv-paziente .pv-scelta, .pv-operatore .pv-paziente .pv-scelta:has(.pv-scelta-illu) {
  display: flex; align-items: center; gap: .6rem; min-height: 0; padding: .55rem .75rem;
}
.pv-operatore .pv-paziente .pv-scelta input { order: -1; margin: 0; position: static; }