/* Il portale pubblico. Colori del gestionale (DESIGN.md), respiro diverso:
   qui non si lavora otto ore, si legge una pagina e si sceglie un orario. */

:root {
  --navy: #1c3356;
  --navy-alto: #26456f;
  --navy-velato: #e8eef6;
  --inchiostro: #0e1a2e;
  --grafite: #5b6577;
  --carta: #f4f6fa;
  --foglio: #ffffff;
  --riga: #e1e6ef;
  --riga-marcata: #cdd5e2;
  /* Il bordo di un controllo non è decorazione: è il modo di sapere dove
     finisce il campo. 3.14:1 su bianco — `--riga-marcata` stava a 1.48:1, e
     su uno schermo al sole non c'era. Le righe che separano e basta restano
     `--riga`: alzarle tutte a 3:1 farebbe una gabbia. */
  --riga-controllo: #8792a6;
  --verde: #1f7a4d;
  --verde-velato: #e6f3ec;
  --rosso: #b42318;
  --rosso-velato: #fdece9;
  --ambra: #8a5a00;
  --ambra-velata: #fbf1de;
  --ambra-riga: #efd9a8;
  /* L'oro delle stelle: 3.06:1 su bianco. Un giallo più chiaro sarebbe
     sparito, e la stella è un grafico che porta significato (WCAG 1.4.11).
     Accanto c'è comunque il numero: la forma non è l'unico canale. */
  --stella: #c8860d;
  --focus: #2f5487;
  --raggio: 0.75rem;
  --raggio-sm: 0.5rem;
  --ombra: 0 1px 2px rgba(14, 26, 46, 0.06), 0 8px 24px rgba(14, 26, 46, 0.06);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--inchiostro);
  background: var(--carta);
  /* Il piede sta in fondo alla finestra anche quando la pagina è corta.
     Senza, un elenco con una città sola lasciava la riga «Prenotazioni
     gestite con Clinova One» a metà schermo, con mezza pagina vuota sotto:
     sembrava che il contenuto fosse finito lì per un errore.
     `dvh` e non `vh` per il telefono, dove la barra dell'indirizzo entra ed
     esce e `100vh` è sempre un po' più della finestra vera. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-header,
.site-footer { flex: none; }

a { color: var(--navy-alto); }

/* Il cursore e la selezione sono parte del disegno anche se li disegna il
   browser: lasciati ai valori di sistema sono l'unica cosa in pagina che
   non appartiene a nessuna palette. */
::selection {
  background: var(--navy-velato);
  color: var(--inchiostro);
}

input,
textarea { caret-color: var(--navy); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 0.5rem;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 0.75rem; }

/* --- intelaiatura ------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--navy);
  color: var(--foglio);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--foglio);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand-claim {
  margin: 0;
  font-size: 0.8125rem;
  color: #b9c6da;
}

.site-nav {
  margin-left: auto;
  color: var(--foglio);
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  white-space: nowrap;
}

.site-nav:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 32rem) {
  .site-header { flex-wrap: wrap; }
  .brand-claim { order: 3; flex: 1 0 100%; }
}

main {
  /* `flex: 1` con `width: 100%`: in colonna il `margin: 0 auto` centra, ma
     senza larghezza esplicita l'elemento si stringe sul contenuto e le
     pagine corte finivano incolonnate a sinistra. */
  flex: 1 0 auto;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.site-footer {
  border-top: 1px solid var(--riga);
  background: var(--foglio);
  color: var(--grafite);
  font-size: 0.8125rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.site-footer p { margin: 0.125rem 0; }

/* --- briciole ----------------------------------------------------------- */

.breadcrumb {
  font-size: 0.8125rem;
  color: var(--grafite);
  margin-bottom: 1rem;
}

.breadcrumb a { color: var(--grafite); }

/* --- scheda del medico -------------------------------------------------- */

.doctor {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 56rem) {
  .doctor { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 1.5rem;
}

.card + .card { margin-top: 1rem; }

.doctor-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--navy-velato);
  flex: none;
}

.avatar-fallback {
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--grafite);
  margin: 0 0 0.25rem;
}

.lede { color: var(--grafite); }

/* --- prestazioni --------------------------------------------------------- */

.services { list-style: none; margin: 0; padding: 0; }

.services li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--riga);
}

.services li:first-child { border-top: 0; }

.service-name { font-weight: 500; }

.service-meta {
  color: var(--grafite);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* --- sede ---------------------------------------------------------------- */

.address { font-style: normal; color: var(--grafite); }

.map {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: var(--raggio-sm);
  margin-top: 0.75rem;
  background: var(--navy-velato);
}

.map-note {
  font-size: 0.75rem;
  color: var(--grafite);
  margin-top: 0.5rem;
}

/* --- il widget ----------------------------------------------------------- */

/* Solo finché è vuoto. L'altezza serve a non far saltare la pagina mentre
   il bundle arriva; a widget montato è un buco — evidente da quando la
   lista delle prestazioni può essere una tendina da una riga. */
#booking-widget:empty { min-height: 12rem; }

.widget-fallback {
  border: 1px dashed var(--riga-marcata);
  border-radius: var(--raggio-sm);
  padding: 1rem;
  color: var(--grafite);
  font-size: 0.9375rem;
}

/* --- home e indici -------------------------------------------------------- */

.hero { margin-bottom: 1.5rem; }

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.tile a {
  display: block;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio-sm);
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}

.tile a:hover {
  border-color: var(--riga-marcata);
  transform: translateY(-1px);
}

.tile-title { display: block; font-weight: 600; }
.tile-meta { display: block; color: var(--grafite); font-size: 0.875rem; }

.people { list-style: none; margin: 0; padding: 0; }

.person + .person { margin-top: 0.5rem; }

.person-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio-sm);
  padding: 0.875rem 1rem;
  text-decoration: none;
  color: inherit;
}

.person-link:hover { border-color: var(--riga-marcata); }

.person-link > span:nth-child(2) { flex: 1; min-width: 0; }

.person-name { display: block; font-weight: 600; }
.person-meta { display: block; color: var(--grafite); font-size: 0.875rem; }

.person-cta {
  flex: none;
  background: var(--navy);
  color: var(--foglio);
  border-radius: var(--raggio-sm);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.empty { color: var(--grafite); }

/* --- il widget di prenotazione ------------------------------------------- */

.widget[aria-busy='true'] { opacity: 0.72; }

.widget-step {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grafite);
  margin: 0 0 0.75rem;
}

.widget-step:focus-visible { outline-offset: 4px; }

.widget-error {
  background: var(--rosso-velato);
  border: 1px solid #f3c7c1;
  color: var(--rosso);
  border-radius: var(--raggio-sm);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
}

/* Sopra le quattro prestazioni la lista diventa una tendina: dodici bottoni
   sono un muro che spinge in basso il calendario, che è la cosa per cui la
   pagina esiste. */
.widget-pick { display: block; }

.widget-select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  font: inherit;
  color: inherit;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
}

.widget-list { list-style: none; margin: 0; padding: 0; }
.widget-list li + li { margin-top: 0.5rem; }

.widget-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  background: var(--foglio);
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  padding: 0.75rem 0.875rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.widget-option:hover { border-color: var(--navy); }

.widget-meta { color: var(--grafite); font-size: 0.8125rem; }

.widget-option .widget-meta { white-space: nowrap; }

/* Solo la prima lettera: in italiano i mesi vanno minuscoli, e
   `text-transform: capitalize` scriveva «Venerdì 11 Settembre». */
.cal-day-label::first-letter,
.widget-done-when::first-letter {
  text-transform: uppercase;
}

/* A tutta larghezza le ore stanno in colonna allineata: si scorre con
   l'occhio, non a zig-zag come faceva il flex a capo. */
.widget-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 0.5rem;
}

.widget-time {
  /* 44px: il pollice di chi prenota dal telefono in sala d'attesa. */
  min-width: 0;
  min-height: 2.75rem;
  border: 1px solid var(--riga-controllo);
  background: var(--foglio);
  border-radius: var(--raggio-sm);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.widget-time:hover:not(:disabled) {
  border-color: var(--navy);
  background: var(--navy-velato);
}

.widget-time:disabled { opacity: 0.5; cursor: default; }

.widget-held {
  background: var(--navy-velato);
  border-radius: var(--raggio-sm);
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
}

.widget-link {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 0.5rem;
  color: var(--navy-alto);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
}

.widget-form { display: grid; gap: 0.75rem; margin-top: 0.875rem; }

.widget-form label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.widget-form input,
.widget-form textarea {
  font: inherit;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
  min-height: 2.75rem;
}

.widget-form textarea { min-height: 4rem; resize: vertical; }

.widget-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.5rem;
  font-weight: 400;
  line-height: 1.45;
}

.widget-check input { min-height: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; }

.widget-primary {
  min-height: 2.75rem;
  background: var(--navy);
  color: var(--foglio);
  border: 0;
  border-radius: var(--raggio-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.widget-primary:disabled { background: var(--riga-marcata); color: var(--grafite); cursor: default; }

/* Lo stesso bottone quando è un link: la fine del funnel porta a una pagina. */
a.widget-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  text-decoration: none;
}

/* Il consenso che non si può ancora dare: leggibile, ma spento. */
.widget-check-off { color: var(--grafite); }

.widget-done {
  background: var(--verde-velato);
  border: 1px solid #c6e3d3;
  border-radius: var(--raggio-sm);
  padding: 1rem;
}

.widget-done-when {
  font-weight: 600;
  font-size: 1.0625rem;
}

/* --- accesso e area del paziente ----------------------------------------- */

.entrance {
  max-width: 28rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.entrance .card { padding: 1.75rem; }

.or {
  text-align: center;
  color: var(--grafite);
  font-size: 0.875rem;
  margin: 0.875rem 0;
}

.widget-primary.google {
  width: 100%;
  background: var(--foglio);
  color: var(--inchiostro);
  border: 1px solid var(--riga-controllo);
}

.widget-primary.google:hover { background: var(--foglio-ombrato, #eef1f7); }

.area-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* L'azione e l'uscita non hanno lo stesso peso: una è quello che si viene a
   fare, l'altra è andarsene. Prima «Esci» era l'unico comando della pagina. */
.area-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.identity-line {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Il buco da tappare: una scheda, non un avviso. Un avviso si legge e si
   dimentica; una scheda col campo dentro si compila. */
.gap-fill { margin-bottom: 1rem; }

.gap-fill h2 { margin-bottom: 0.25rem; }

.gap-fill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.875rem;
}

.gap-fill-row input {
  font: inherit;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
}

.area-empty p { margin: 0.75rem 0 0; }

.area-empty .widget-meta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--riga);
}

.area-note { margin-top: 1rem; }

@media (max-width: 32rem) {
  .area-head { flex-direction: column; }
  .area-actions { width: 100%; justify-content: space-between; }
}

.notice {
  background: var(--navy-velato);
  border-radius: var(--raggio-sm);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}

.bookings { list-style: none; margin: 0; padding: 0; }

/* Una riga sono tre fatti — quando, cosa con chi, dove — più le azioni.
   In colonna occupavano un terzo della scheda e il resto restava bianco;
   in colonne ognuno sta sotto il suo simile e la lista si legge in
   verticale, che è come si legge una lista. */
.bookings li {
  display: grid;
  /* Nessuna traccia dipende dal contenuto, e questo è il punto: ogni `li` è
     una griglia a sé, quindi con un `auto` in fondo la quarta colonna
     cambiava larghezza da riga a riga — «Meno di 48 ore…» è largo, «Sposta
     Disdici» meno, e sotto niente — e trascinava le altre. Le colonne
     sembravano allineate solo finché i contenuti si somigliavano.

     Prima traccia a 15rem e non 13: «Venerdì 11 settembre, 09:00» sotto i
     15 va a capo, e una data spezzata in due si rilegge due volte. */
  grid-template-columns:
    minmax(13rem, 15rem)
    minmax(0, 1fr)
    minmax(0, 1.2fr)
    minmax(10rem, 12rem);
  gap: 0.75rem 1.5rem;
  align-items: start;
  padding: 0.875rem 0;
  border-top: 1px solid var(--riga);
}

/* Le due liste condividono le stesse tracce, anche se sui passati la quarta
   colonna resta vuota — su una visita già fatta non c'è niente da fare.
   Dandole tre colonne sue il bordo destro della terza cambiava posto fra una
   scheda e l'altra: due liste della stessa cosa, una sotto l'altra, con le
   colonne che saltano. Dodici rem di vuoto costano meno di quel salto. */

.bookings li:first-child { border-top: 0; }

.booking-cell > p { margin: 0; }

.booking-when { margin: 0; font-weight: 600; }
.booking-when::first-letter { text-transform: uppercase; }

.booking-service { font-weight: 500; }

/* La targhetta dello stato. Il colore non è l'unico canale — la parola c'è
   sempre — perché uno su dodici non distingue il verde dal rosso. */
.badge {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 0.05em;
}

.badge-attesa { background: var(--ambra-velata); color: var(--ambra); }
.badge-ok { background: var(--verde-velato); color: var(--verde); }
.badge-stop { background: var(--rosso-velato); color: var(--rosso); }

/* Una data barrata dice «non succede» prima ancora che si legga la
   targhetta. Barrata la data, non tutta la riga: dove e con chi restano
   informazioni vere di una cosa che era stata fissata. */
.booking-off { text-decoration: line-through; text-decoration-color: var(--riga-marcata); }

.booking-off .badge { text-decoration: none; }
.booking-who { color: var(--grafite); }

/* Dove ci si presenta. Non grigio: con due ambulatori lontani è la riga che
   evita il viaggio sbagliato, e una riga così non è un dettaglio. */
.booking-site { font-weight: 500; }

/* Sotto i 48rem le colonne non ci stanno: torna una pila, con il quando in
   testa e le azioni in fondo. */
@media (max-width: 48rem) {
  .bookings li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .booking-cell + .booking-cell { margin-top: 0.25rem; }
  .booking-actions { margin-top: 0.5rem; }
}

.booking-actions { display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end; }

/* Fuori dalla finestra: la regola scritta e il numero, non un vuoto. */
.booking-late { text-align: right; }
.booking-late p { margin: 0 0 0.25rem; }

.widget-link.danger { color: var(--rosso); }

.messages { list-style: none; margin: 0 0 1rem; padding: 0; }

/* Le pagine che rende allauth: i suoi campi non portano le nostre classi,
   quindi si vestono per posizione. Vale solo dentro `.entrance`. */

.entrance form { margin-top: 1rem; }

.entrance input[type='text'],
.entrance input[type='email'],
.entrance input[type='number'] {
  display: block;
  width: 100%;
  font: inherit;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  margin-top: 0.25rem;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
}

.entrance button,
.entrance input[type='submit'] {
  min-height: 2.75rem;
  margin-top: 0.75rem;
  margin-right: 0.5rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: var(--raggio-sm);
  background: var(--navy);
  color: var(--foglio);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.entrance button.widget-link {
  background: none;
  color: var(--navy-alto);
  font-weight: 400;
  padding: 0;
  min-height: 0;
}

/* Il secondo bottone di una coppia (Annulla, Richiedi un nuovo codice) è
   un'azione minore: non deve avere lo stesso peso della conferma. */
.entrance form + form button,
.entrance button[form] {
  background: var(--foglio);
  color: var(--inchiostro);
  border: 1px solid var(--riga-controllo);
  font-weight: 400;
}

.notice-error {
  background: var(--rosso-velato);
  color: var(--rosso);
}

.entrance label { font-weight: 500; font-size: 0.9375rem; }

/* Più di una sede sulla stessa pagina: si separano, non si confondono. */
.site-name { margin: 0 0 0.25rem; font-weight: 600; }

.site-next {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--riga);
}

/* Chi altro c'è in zona: sotto il contenuto della pagina, non dentro. */
.nearby {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--riga);
}

.nearby h2 {
  font-size: 1.0625rem;
  margin-bottom: 0.75rem;
}

.nearby h2 + ul + h2 { margin-top: 1.75rem; }

/* --- l'elenco della zona -------------------------------------------------- */

.results { list-style: none; margin: 0; padding: 0; }

.result + .result { margin-top: 0.625rem; }

.result-link {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--foglio);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}

.result-link:hover { border-color: var(--riga-marcata); }

.result-clinic .result-link { background: var(--navy-velato); border-color: #d5e0ee; }

/* I medici della struttura non possono stare *dentro* il link — un link
   dentro un link non esiste — ma devono stare dentro la scheda: fuori si
   leggevano come un nome caduto lì per sbaglio. La scheda si apre in basso
   e loro ne diventano il piede. */
.result-clinic .result-link {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 0.75rem;
}

.result-body { flex: 1; min-width: 0; display: block; }

.result-name { display: block; font-weight: 600; font-size: 1.0625rem; }

.result-meta,
.result-where,
.result-clinic-name {
  display: block;
  color: var(--grafite);
  font-size: 0.875rem;
}

.result-where { margin-top: 0.375rem; }

.result-service {
  /* Flex e non un float: il float usciva dal flusso e con un nome di
     prestazione lungo il prezzo finiva sopra al nome. Qui il prezzo ha la
     sua colonna e il nome può andare a capo sotto di sé. */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--riga);
  font-size: 0.875rem;
}

.result-service b {
  font-weight: 600;
  white-space: nowrap;
}

.result-cta {
  flex: none;
  align-self: center;
  background: var(--navy);
  color: var(--foglio);
  border-radius: var(--raggio-sm);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.result-clinic .result-cta {
  background: var(--foglio);
  color: var(--navy);
  border: 1px solid var(--riga-controllo);
}

.avatar-clinic {
  border-radius: var(--raggio-sm);
  background: var(--foglio);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-weight: 600;
}

.result-doctors {
  margin: 0;
  /* Rientrati sotto il nome della struttura, non sotto il suo ritratto:
     l'incolonnamento è padding della card + ritratto + gap. */
  padding: 0 1rem 0.875rem calc(1rem + 72px + 1rem);
  background: var(--navy-velato);
  border: 1px solid #d5e0ee;
  border-top: 0;
  border-radius: 0 0 var(--raggio) var(--raggio);
  font-size: 0.875rem;
  color: var(--grafite);
}

/* Un riquadro per medico, come nella reference: faccia, nome, specialità.
   Una fila di nomi separati da punti si salta con l'occhio; una faccia no. */
.staff {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.staff-tile {
  display: grid;
  justify-items: center;
  gap: 0.0625rem;
  width: 9rem;
  height: 100%;
  padding: 0.75rem 0.5rem;
  background: var(--foglio);
  border: 1px solid #d5e0ee;
  border-radius: var(--raggio-sm);
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.staff-tile:hover { border-color: var(--navy); }

.staff-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--navy-velato);
  margin-bottom: 0.375rem;
}

.staff-avatar-fallback {
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
}

.staff-name { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; }

.staff-role { font-size: 0.75rem; color: var(--grafite); }

.staff-all {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.875rem;
}

/* Sotto i 32rem la riga non è più una riga: `flex-wrap` non bastava, perché
   `flex: 1` lascia il corpo restringersi invece di andare a capo e il nome
   finiva in una colonna larga tre lettere. Griglia: ritratto e nome sopra,
   indirizzi sotto per tutta la larghezza, bottone in fondo. */
@media (max-width: 32rem) {
  /* Qui il rientro costerebbe una tessera su due: i riquadri partono dal
     bordo della scheda, come il bottone «La struttura» sopra di loro, e
     scorrono invece di impilarsi in una colonna alta cinque schermate. */
  .result-doctors { padding-left: 1rem; }

  .staff {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
  }

  .staff > li { flex: none; scroll-snap-align: start; }

  .staff-tile { width: 8.5rem; }

  .result-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar body"
      "cta cta";
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0.75rem;
  }

  .result-link > .avatar { grid-area: avatar; width: 48px; height: 48px; }
  .result-body { grid-area: body; }

  .result-cta {
    grid-area: cta;
    align-self: stretch;
    text-align: center;
    padding: 0.625rem 0.875rem;
  }
}

/* Presso chi: la riga che distingue «Checchin dentro Medica Line» da
   «Checchin per conto suo». Senza, le due posizioni si leggono identiche. */
.result-clinic-name {
  margin-top: 0.125rem;
  font-weight: 500;
  color: var(--inchiostro);
}

.result-where {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pin {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  fill: none;
  stroke: var(--grafite);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* Un avviso che non è un errore: il prezzo di questa clinica è un altro. */
.widget-notice {
  background: var(--ambra-velata, #fbf1de);
  border: 1px solid var(--ambra-riga, #efd9a8);
  color: var(--ambra, #8a5a00);
  border-radius: var(--raggio-sm);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
}

/* --- il calendario, che è il motivo per cui la pagina esiste ------------- */

.identity { padding-bottom: 1.25rem; }

.identity .doctor-head { margin-bottom: 0; }

.identity-where {
  margin: 0.5rem 0 0;
  color: var(--grafite);
  font-size: 0.9375rem;
}

/* Il palco. A tutta larghezza e con più aria dentro delle altre schede:
   è la cosa che il visitatore è venuto a fare. */
.stage {
  margin-top: 1.25rem;
  padding: 1.75rem;
}

.stage-title { margin-bottom: 1rem; }

.doctor { margin-top: 1.25rem; }

.cal-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--riga);
}

.cal-chosen-name { font-weight: 600; }

.cal-chosen .widget-link { margin-left: auto; }
.cal-chosen .widget-link + .widget-link { margin-left: 0; }

/* La striscia dei giorni: solo quelli che hanno orari, e si scorre. */
.cal-dates {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
  scrollbar-width: thin;
}

.cal-date {
  flex: none;
  scroll-snap-align: start;
  display: grid;
  gap: 0.0625rem;
  justify-items: center;
  min-width: 4.5rem;
  padding: 0.5rem 0.625rem 0.625rem;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}

.cal-date:hover { border-color: var(--navy); }

.cal-date-dow,
.cal-date-mon {
  font-size: 0.75rem;
  color: var(--grafite);
}

.cal-date-num {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cal-date-count {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--grafite);
  white-space: nowrap;
}

.cal-date-on,
.cal-date-on:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--foglio);
}

.cal-date-on .cal-date-dow,
.cal-date-on .cal-date-mon,
.cal-date-on .cal-date-count { color: var(--navy-velato); }

.cal-day { margin-top: 1.25rem; }

.cal-day-label {
  margin: 0 0 0.875rem;
  font-weight: 600;
  font-size: 1.0625rem;
}

.cal-group + .cal-group { margin-top: 1.5rem; }

/* Dove, una volta sola sopra le sue ore, con la riga che porta a fine campo. */
.cal-where {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
}

.cal-where::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--riga);
}

.cal-part + .cal-part { margin-top: 0.875rem; }

.cal-part-label {
  margin: 0 0 0.375rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--grafite);
}

@media (max-width: 40rem) {
  .stage { padding: 1.25rem; }
  .cal-chosen .widget-link { margin-left: 0; }

  /* Con il testo che va a capo tre volte il ritratto centrato finiva a metà
     scheda e il nome partiva dal nulla. In alto, e più piccolo. */
  .doctor-head { align-items: flex-start; }
  .identity .avatar { width: 56px; height: 56px; }
  .identity .avatar-fallback { font-size: 1.125rem; }
}

/* --- la ricevuta --------------------------------------------------------- */

.widget-recap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.375rem 1rem;
  margin: 0.875rem 0 0;
}

.widget-recap > div { display: contents; }

.widget-recap dt {
  font-size: 0.8125rem;
  color: var(--grafite);
  padding-top: 0.0625rem;
}

.widget-recap dd { margin: 0; }

.widget-next {
  margin: 0.875rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid #c6e3d3;
}

.widget-done p:last-child { margin-bottom: 0; }

/* --- bersagli: 44px anche quando il segno è piccolo ---------------------- */

/* Il link che sta da solo in una riga è un bottone travestito, e va preso
   col pollice. Quello dentro una frase no: lì la regola stessa esenta i
   bersagli in linea, e allargarlo spezzerebbe il testo — gli si allarga
   l'area sensibile senza toccare il disegno. */
.area-actions .widget-link,
.booking-actions .widget-link,
.cal-chosen .widget-link,
.widget-form .widget-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.25rem;
}

.booking-actions { gap: 1rem; }

.widget-held .widget-link { position: relative; }

.widget-held .widget-link::after {
  content: '';
  position: absolute;
  inset: -0.75rem -0.5rem;
}

.result-cta,
.person-cta,
.site-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
}

.tile a { min-height: 4rem; }

.site-header { padding-block: 0.75rem; }

/* --- le stelle ----------------------------------------------------------- */

.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1;
}

/* Due file sovrapposte: quella grigia sotto, quella d'oro tagliata alla
   percentuale. Niente mezze stelle da disegnare, e 4,3 su 5 è 4,3. */
.stars-track {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--riga-marcata);
  letter-spacing: 0.05em;
}

.stars-row { display: block; }

.stars-on {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--stella);
}

.stars-text { font-weight: 600; font-variant-numeric: tabular-nums; }

.stars-count { color: var(--grafite); }

.stars-sm { font-size: 0.75rem; gap: 0.25rem; }

/* --- il voto che si dà --------------------------------------------------- */

.stars-pick {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
  border: 0;
  margin: 1rem 0 0;
  padding: 0;
}

.stars-pick legend {
  float: left;
  width: 100%;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* Nascosti all'occhio ma non alla tastiera né a chi legge lo schermo:
   `display: none` li toglierebbe dall'ordine di tabulazione e il voto si
   potrebbe dare solo col mouse. */
.stars-pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.stars-pick label {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raggio-sm);
  cursor: pointer;
}

.stars-pick svg {
  width: 2rem;
  height: 2rem;
  fill: var(--riga-marcata);
}

.stars-pick input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Accesa quella scelta e tutte quelle prima: nel DOM stanno *dopo* (5→1) e
   il verso lo rimette a posto `row-reverse`. */
.stars-pick input:checked + label svg,
.stars-pick input:checked ~ label svg { fill: var(--stella); }

.stars-pick:hover label svg { fill: var(--riga-marcata); }
.stars-pick label:hover svg,
.stars-pick label:hover ~ label svg { fill: var(--stella); }

.entrance textarea {
  display: block;
  width: 100%;
  font: inherit;
  padding: 0.625rem 0.75rem;
  margin-top: 0.25rem;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
  resize: vertical;
}

/* --- quello che dicono i pazienti ---------------------------------------- */

/* Dentro una riga di elenco le stelle vanno a capo da sole: i figli di
   `.result-body` sono blocchi, e un inline-flex resterebbe attaccato al
   testo sopra. */
.result-body .stars,
.staff-tile .stars {
  display: flex;
  margin-top: 0.25rem;
}

.staff-tile .stars { justify-content: center; }

.reviews-band { margin-top: 1.25rem; }

.opinions {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.opinion {
  padding: 1rem 0;
  border-top: 1px solid var(--riga);
}

.opinion:first-child { border-top: 0; padding-top: 0.5rem; }

.opinion-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.opinion-who { font-weight: 600; font-size: 0.9375rem; }

.opinion-when { color: var(--grafite); font-size: 0.8125rem; }
.opinion-when::first-letter { text-transform: uppercase; }

.opinion-text { margin: 0.5rem 0 0; }

/* La risposta della clinica: rientrata e con un bordo, perché è un'altra
   voce — e perché chi legge deve vedere subito che non è il paziente. */
.opinion-reply {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.875rem;
  background: var(--carta);
  border-left: 3px solid var(--riga-controllo);
  border-radius: 0 var(--raggio-sm) var(--raggio-sm) 0;
}

.opinion-reply p { margin: 0; }
.opinion-reply .opinion-who { font-size: 0.8125rem; color: var(--grafite); }

/* --- le due pagine dell'accesso ------------------------------------------ */

/* Le pagine con un compito solo — accedi, il codice — si centrano nella
   finestra. Appoggiate in alto lasciavano 221px di niente sotto la scheda:
   il vuoto stava dalla parte sbagliata. */
.main-centered {
  display: grid;
  align-content: center;
  /* `main` ha 1.5rem sopra e 4rem sotto: centrare dentro un contenitore
     sbilanciato lascia la differenza tutta da una parte. */
  padding-block: 1.5rem;
}

/* Quaranta pixel di titolo sopra una colonna di 358 sono un grido per una
   pagina che chiede una cosa sola. */
.entrance h1 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); }

/* Il campo e il bottone sulla stessa riga, allineati in basso: il bottone
   era 350px contro i 136 del campo — due volte e mezzo — e il peso della
   pagina finiva sulla conferma invece che sulla cosa da scrivere. */
.code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}

.code-row label { flex: 0 0 auto; }

.entrance .code-row button {
  flex: 1 1 8rem;
  margin: 0;
}

/* Sei cifre in un campo da sei cifre. Una casella larga tutta la scheda fa
   cercare qualcosa di più lungo da scrivere.
   Sotto `.entrance` sta una regola `width: 100%` più specifica: il campo va
   nominato con la stessa forza, o resta lungo come tutti gli altri. */
.entrance input[type='text'].code-input,
.code-input {
  width: 10.5rem;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.25em;
  text-align: center;
}

/* Le rassicurazioni: sotto il modulo, non sopra. Prima il compito. */
.entrance-note {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--riga);
  color: var(--grafite);
  font-size: 0.875rem;
}

/* Le due vie d'uscita quando il codice non arriva, sulla stessa riga: sono
   la stessa domanda («e adesso?») con due risposte. */
.entrance-ways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.entrance-ways form { display: flex; margin: 0; }

/* `.widget-link` nasce dentro una frase e porta un rientro: da solo in fondo
   a una scheda quel rientro è un difetto di allineamento. */
.entrance > .card > p > .widget-link { margin-left: 0; }

.entrance-ways .widget-link,
.entrance-ways button.widget-link {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--navy-alto);
  font-weight: 400;
  text-decoration: underline;
}

/* Su telefono la riga diventa una colonna: il campo largo quanto il bottone
   (a 375px non c'è nessuna «casella troppo lunga» da cui difendersi), e le
   due vie d'uscita vicine, perché impilate a 1.25rem si leggono come due
   blocchi scollegati invece che come due risposte alla stessa domanda. */
@media (max-width: 32rem) {
  .code-row { display: grid; gap: 0.625rem; }

  .entrance input[type='text'].code-input { width: 100%; }

  .entrance-ways {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

/* --- il widget dentro il sito di qualcun altro --------------------------- */

/* Sfondo trasparente: la pagina ospite ha il suo, e un rettangolo grigio in
   mezzo al sito di un medico si vede come una toppa. */
body.embed {
  background: transparent;
  min-height: 0;
  display: block;
}

.embed-main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1rem;
}

.embed-head { margin-bottom: 1rem; }

/* I menu: in riga finché ci stanno, uno sotto l'altro quando no. */
.embed-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.embed-pick label { flex: 1 1 12rem; }

.embed-pick select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  font: inherit;
  border: 1px solid var(--riga-controllo);
  border-radius: var(--raggio-sm);
  background: var(--foglio);
  color: inherit;
}

.embed-go { flex: none; padding: 0 1.25rem; }

.embed-who { margin: 0; font-size: 1.125rem; font-weight: 600; }

.embed-where { margin: 0.125rem 0 0; color: var(--grafite); font-size: 0.875rem; }

.embed-foot {
  margin: 1.25rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--riga);
  font-size: 0.75rem;
  color: var(--grafite);
}