/* ============================================================
   FamilyDoctor — foglio di stile unico.
   Attuazione di design-system.md. Regola vincolante: ogni valore
   estetico vive nel blocco :root qui sotto e in nessun altro
   punto del progetto. Le classi descrivono il ruolo, non
   l'aspetto. Il legame fra dato e grafica passa dagli attributi
   data-categoria e data-stato, mai da un colore mandato dal
   backend. Cambiare veste significa riscrivere :root e, al
   massimo, i template.
   ============================================================ */

/* ---------- 1. Font, serviti in locale ---------- */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/font/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/font/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/font/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/font/poppins-800.woff2') format('woff2');
}

/* ---------- 2. Token del tema ---------- */

:root {
  /* Marca e superfici */
  --verde-scuro:        #1D6B4F;
  --verde-medio:        #2F855D;
  --verde-profondo:     #164F3B;
  --verde-card:         #4FBE81;
  --verde-chiaro:       #3E9268;
  --verde-tinta:        #DDF0E4;
  --verde-avatar:       #CFE9DA;

  /* Azione */
  --arancio:            #F2734B;
  --arancio-blob:       #D4522A;
  --arancio-tinta:      #FBE3DA;
  --arancio-testo:      #D4522A;

  /* Pericolo — solo admin e configuratore */
  --rosso:              #E24B4A;
  --rosso-tinta:        #FCEBEB;
  --rosso-testo:        #A32D2D;

  /* Categorie delle funzioni.

     Il blu tiene insieme le tre cose che si mandano al medico e che
     lui poi lavora: ricetta, referto, certificato. Il certificato ha
     lo stesso blu un gradino piu' fondo, perche' e' il piu' formale
     dei tre e va distinto senza staccarsi dagli altri. */
  --periwinkle:         #8B93E8;
  --periwinkle-blob:    #2D3A8C;
  --blu-carta:          #5B7CE0;
  --blu-carta-blob:     #2A3F91;
  --blu-fondo:          #4059C7;
  --blu-fondo-blob:     #22307A;
  --giallo-carta:       #F0C349;
  --giallo-carta-blob:  #B8860B;
  --ambra:              #F5A83C;
  --ambra-blob:         #C97B12;
  --ambra-tinta:        #FBEBD2;
  --ambra-testo:        #C97B12;

  /* Neutri */
  --crema:              #FAF6F0;
  --bianco:             #FFFFFF;
  --testo:              #1F1F1F;
  --testo-tenue:        #8A8781;
  --testo-debole:       #ABA8A3;
  --testo-disabilitato: #D6D3CE;
  --icona-inattiva:     #C9C6C1;

  /* Superfici di servizio */
  --scheletro:          #F1EFE9;
  --filo:               #F7F5F0;
  --bordo-campo:        #E8E5DE;
  --selezione:          #F4F9F6;
  --verde-etichetta:    #7FBFA0;

  /* Tipografia */
  --font: 'Poppins', system-ui, sans-serif;
  --peso-titolo: 700;
  --peso-numero: 800;
  --peso-medio: 500;
  --peso-testo: 400;
  --t-saluto: 18px;
  --t-titolo-sezione: 17px;
  --t-titolo-schermata: 16px;
  --t-card-titolo: 14px;
  --t-card: 13px;
  --t-corpo: 12px;
  --t-piccolo: 11px;
  --t-minimo: 10px;
  --t-numero-grande: 26px;

  /* Forma e spazio */
  --r-foglio: 24px;
  --r-card: 16px;
  --r-card-piccola: 14px;
  --r-controllo: 12px;
  --r-icona: 13px;
  --r-pastiglia: 8px;
  --s-schermo: 14px;
  --s-card: 11px;
  --s-gap: 10px;

  /* Impaginazione */
  --largo: 900px;

  /* Misure di servizio, derivate: non sono scelte estetiche nuove
     ma costanti di attuazione che servono in più punti */
  --tocco-minimo: 44px;
  --paziente-largo: 480px;
  --menu-largo: 150px;
  --velo: rgba(31, 31, 31, 0.45);
}

/* ---------- 3. Azzeramento e basi ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-weight: var(--peso-testo);
  font-size: var(--t-corpo);
  color: var(--testo);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { margin: 0; }

img { max-width: 100%; display: block; }

[hidden] { display: none !important; }

/* ---------- 4. Il blob, firma visiva ---------- */

.blob {
  position: absolute;
  pointer-events: none;
  background: var(--fondo-blob, var(--verde-medio));
  /* La sagoma non si ottiene più arrotondando gli angoli del
     riquadro: è un disegno che fa da maschera al colore.

     Il motivo è un guasto vero, trovato a forza di prove su un
     telefono. Certi browser — Edge su Android, non Chrome sullo
     stesso apparecchio — sbagliano a tracciare un riquadro i cui
     angoli sono tondi quanto mezzo riquadro: uno degli angoli
     esce a punta invece che a curva, e la bolla sembra morsicata.
     Succede con qualunque numero, percentuali o pixel, e persino
     con il cerchio perfetto; non succede mai se la stessa sagoma
     arriva da un disegno. Sono due strade di disegno diverse
     dentro il motore grafico, e solo la prima è rotta lì.

     Il profilo qui sotto è lo stesso di prima, tradotto: quattro
     archi che si toccano a metà di ogni lato, gli stessi raggi.
     Su una griglia di quarantottomila punti le due sagome
     discordano nello 0,6 per cento, cioè meno di un pixel di
     bordo. La misura non è scritta dentro il disegno: si allunga
     con la bolla, come facevano le percentuali. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M56.31,0 L59.22,0 A40.78,46.6 0 0 1 100,46.6 L100,46.6 A45.63,53.4 0 0 1 54.37,100 L51.46,100 A51.46,43.69 0 0 1 0,56.31 L0,50.49 A56.31,50.49 0 0 1 56.31,0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M56.31,0 L59.22,0 A40.78,46.6 0 0 1 100,46.6 L100,46.6 A45.63,53.4 0 0 1 54.37,100 L51.46,100 A51.46,43.69 0 0 1 0,56.31 L0,50.49 A56.31,50.49 0 0 1 56.31,0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Niente rotazione, e non è una dimenticanza. La bolla sporge
   sempre da un angolo, dentro un riquadro che la taglia con il
   proprio angolo tondo: se la si ruota, certi telefoni la
   disegnano a parte e si dimenticano di quel taglio, e la bolla
   esce squadrata sopra il bordo arrotondato del bottone. La forma
   irregolare sta già tutta nei raggi, che sono storti da soli.

   Varianti di forma: la variazione da card a card è decisa qui,
   non dal JavaScript */
.blob--a {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M62,0 L62,0 A38,56 0 0 1 100,56 L100,56 A45,44 0 0 1 55,100 L55,100 A55,52 0 0 1 0,48 L0,48 A62,48 0 0 1 62,0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M62,0 L62,0 A38,56 0 0 1 100,56 L100,56 A45,44 0 0 1 55,100 L55,100 A55,52 0 0 1 0,48 L0,48 A62,48 0 0 1 62,0 Z' fill='black'/%3E%3C/svg%3E");
}
.blob--b {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M43,0 L43,0 A57,43 0 0 1 100,43 L100,43 A61,57 0 0 1 39,100 L39,100 A39,43 0 0 1 0,57 L0,57 A43,57 0 0 1 43,0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M43,0 L43,0 A57,43 0 0 1 100,43 L100,43 A61,57 0 0 1 39,100 L39,100 A39,43 0 0 1 0,57 L0,57 A43,57 0 0 1 43,0 Z' fill='black'/%3E%3C/svg%3E");
}
.blob--c {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M55,0 L55,0 A45,62 0 0 1 100,62 L100,62 A38,38 0 0 1 62,100 L62,100 A62,56 0 0 1 0,44 L0,44 A55,44 0 0 1 55,0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M55,0 L55,0 A45,62 0 0 1 100,62 L100,62 A38,38 0 0 1 62,100 L62,100 A62,56 0 0 1 0,44 L0,44 A55,44 0 0 1 55,0 Z' fill='black'/%3E%3C/svg%3E");
}

/* Posizioni ricorrenti */
.blob--basso-destra { right: -22px; bottom: -26px; width: 76px; height: 76px; }
.blob--alto-destra  { right: -18px; top: -24px;   width: 70px; height: 70px; }
.blob--alto-sinistra{ left: -26px;  top: -30px;   width: 88px; height: 88px; }
.blob--basso-sinistra { left: -20px; bottom: -24px; width: 66px; height: 66px; }

/* Il blob è un decoro d'angolo e deve restare tale: su una
   superficie piccola va rimpicciolito con lei, altrimenti da
   firma diventa macchia e si mangia l'etichetta.

   Sulle tessere dei servizi però non è più lo stesso decoro sette
   volte. Prima lo era davvero: stessa forma, 58x52, stesso angolo,
   su tutte. Adesso forma, misura e posa girano con l'ordine della
   griglia — sei combinazioni, poi si ricomincia — e due delle sei
   stanno intere dentro il riquadro invece di uscire da un angolo.
   Il giro lo decide la posizione, non il caso: la stessa tessera
   ha la stessa bolla a ogni apertura. Le pose intere stanno solo
   in alto a destra, l'unico angolo dove non c'è né l'icona né il
   nome, e dove quindi una bolla intera non copre niente.

   La bolla è anche velata a poco più di metà: a tinta piena il
   salto di colore era troppo netto, e da firma tornava macchia. */
.tessera-servizio .blob { left: auto; opacity: 0.55; }
.tessera-servizio .blob--posa-0 { width: 62px; height: 56px; right: -21px; bottom: -19px; top: auto; }
.tessera-servizio .blob--posa-1 { width: 30px; height: 27px; right: 12px;  top: 11px;  bottom: auto; }
.tessera-servizio .blob--posa-2 { width: 56px; height: 50px; right: -19px; top: -17px; bottom: auto; }
.tessera-servizio .blob--posa-3 { width: 84px; height: 68px; right: -28px; bottom: -23px; top: auto; }
.tessera-servizio .blob--posa-4 { width: 40px; height: 35px; right: 14px;  top: 13px;  bottom: auto; }
.tessera-servizio .blob--posa-5 { width: 48px; height: 44px; right: -16px; bottom: -15px; top: auto; }

.bottone-azione .blob,
.condividi-link__copia .blob {
  width: 46px;
  height: 46px;
  right: -15px;
  top: -17px;
  bottom: auto;
  left: auto;
}

/* Dentro un riquadro icona piccolo il blob si rimpicciolisce,
   altrimenti riempie tutto e il decoro diventa il fondo */
.voce-info__icona .blob,
.voce-navigazione__icona .blob,
.albero__segno .blob,
.tessera-servizio__icona .blob,
.identita-medico__telefono .blob {
  width: 30px;
  height: 30px;
  right: -9px;
  bottom: -11px;
  top: auto;
  left: auto;
}

.blob-illustrativo {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  background: var(--verde-tinta);
  /* Stessa sagoma e stesso motivo della bolla piccola */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M56.31,0 L59.22,0 A40.78,46.6 0 0 1 100,46.6 L100,46.6 A45.63,53.4 0 0 1 54.37,100 L51.46,100 A51.46,43.69 0 0 1 0,56.31 L0,50.49 A56.31,50.49 0 0 1 56.31,0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M56.31,0 L59.22,0 A40.78,46.6 0 0 1 100,46.6 L100,46.6 A45.63,53.4 0 0 1 54.37,100 L51.46,100 A51.46,43.69 0 0 1 0,56.31 L0,50.49 A56.31,50.49 0 0 1 56.31,0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: rotate(-11deg);
  color: var(--verde-medio);
  flex: none;
}
.blob-illustrativo > .icona { transform: rotate(11deg); }
.blob-illustrativo[data-tono="avviso"]     { background: var(--arancio-tinta); color: var(--arancio-testo); }
.blob-illustrativo[data-tono="attesa"]     { background: var(--ambra-tinta);   color: var(--ambra-testo); }
.blob-illustrativo[data-tono="rete"]       { background: var(--crema);         color: var(--testo-tenue); }
.blob-illustrativo[data-tono="distruttivo"]{ background: var(--rosso-tinta);   color: var(--rosso-testo); }

/* ---------- 4-bis. Lo strato dei riquadri tondi ----------

   Questa e' una toppa, e va detto che toppa e': serve a girare
   intorno a un guasto che non e' nostro.

   Su certi telefoni - visto con Edge su Android, mentre Chrome
   sullo stesso apparecchio e sulla stessa pagina va bene - un
   riquadro con gli angoli tondi esce morsicato: un angolo perde
   la curva e viene via un cuneo, e lo stesso capita ai quadratini
   delle icone che ci stanno dentro. Sei banchi di prova per
   arrivarci: non e' la forma, non e' il ritaglio, non e' il
   telaio della schermata, non sono le icone. Il guasto compare
   solo quando il riquadro viene disegnato insieme al resto della
   pagina, sullo stesso strato; se il browser gli da' uno strato
   suo, il riquadro torna perfetto.

   "will-change: transform" e' il modo di chiedere quello strato.
   Costa un po' di memoria video per ogni elemento, e per questo
   sta solo sui riquadri tondi che il paziente ha davvero davanti,
   non su tutto. Il giorno che quel browser si aggiusta, questa
   regola si cancella e non lascia buchi: non cambia come si vede
   niente, cambia solo dove viene disegnato. */

.tessera-servizio,
.bottone-azione,
.voce-info,
.voce-navigazione,
.card-bianca,
.card-appuntamento,
.avviso,
.blob-illustrativo {
  will-change: transform;
}

/* ---------- 5. Icone ---------- */

.icona {
  width: 21px;
  height: 21px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icona--piccola { width: 16px; height: 16px; }
.icona--media   { width: 24px; height: 24px; }
.icona--grande  { width: 34px; height: 34px; }

/* ---------- 6. Telaio delle schermate ---------- */

.applicazione {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.schermo {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Lato paziente il telaio è stretto e centrato anche su schermo grande */
.applicazione[data-interfaccia="paziente"] .schermo {
  width: 100%;
  max-width: var(--paziente-largo);
  margin: 0 auto;
  background: var(--crema);
  position: relative;
  /* Niente angoli tondi. Da computer il telaio è una finta
     cornice di telefono e l'arrotondamento ci stava; sul telefono
     vero quei quattro angoli sono gli angoli dello schermo, e
     lasciano vedere il fondo della pagina come quattro spicchi
     chiari sopra la testata verde. */
  overflow: hidden;
  /* Il telaio riempie lo schermo, così la barra dei due tasti
     resta appoggiata in fondo anche quando il contenuto è corto */
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 520px) {
  .applicazione[data-interfaccia="paziente"] {
    padding: 18px 0;
    background: var(--scheletro);
  }
  .applicazione[data-interfaccia="paziente"] .schermo {
    min-height: calc(100vh - 36px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
  }
}

.scorre {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 7. Testata verde ---------- */

.testata {
  position: relative;
  overflow: hidden;
  background: var(--verde-scuro);
  --fondo-blob: var(--verde-medio);
  color: var(--bianco);
  padding: 18px var(--s-schermo) 44px;
}
/* Perché ":not(.blob)". Queste regole servono a sollevare il
   contenuto sopra la macchia decorativa, dandogli un contesto di
   impilamento. Prendendo anche la macchia le toglievano però il
   "position: absolute" — stessa specificità, e vince l'ultima
   scritta — rimettendola nel flusso: dentro un bottone diventava un
   riquadro largo quarantasei pixel che spingeva il testo di lato e
   si vedeva come una chiazza storta. Si notava soprattutto da
   telefono, dove i bottoni sono stretti e lo spostamento pesa. */
.testata > *:not(.blob) { position: relative; }

.identita-medico {
  display: flex;
  align-items: center;
  gap: 10px;
}
.identita-medico__foto {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: var(--verde-avatar);
  flex: none;
}
.identita-medico__testo { flex: 1; min-width: 0; }
.identita-medico__nome {
  font-size: var(--t-card-titolo);
  font-weight: var(--peso-titolo);
  color: var(--bianco);
}
.identita-medico__qualifica {
  font-size: var(--t-minimo);
  color: var(--verde-avatar);
}
.identita-medico__telefono {
  width: 28px;
  height: 28px;
  border-radius: var(--r-icona);
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: var(--bianco);
  flex: none;
}
.identita-medico__telefono .icona { width: 14px; height: 14px; }
/* I due tondi in colonna: chiamare e cambiare persona sono due gesti
   della stessa importanza e hanno la stessa misura. */
.identita-medico__tondi { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* La riga che dice per conto di chi si sta agendo. Sta fra il saluto
   e la domanda, dove si legge senza cercarla. */
.saluto__per {
  font-size: var(--t-corpo);
  font-weight: var(--peso-titolo);
  opacity: 0.92;
  margin-top: 2px;
}

.saluto { margin-top: 16px; }
.saluto__riga {
  font-size: var(--t-saluto);
  font-weight: var(--peso-titolo);
  color: var(--bianco);
  line-height: 1.25;
}
.saluto__sotto {
  font-size: var(--t-corpo);
  color: var(--verde-avatar);
  margin-top: 2px;
}

/* Il foglio bianco sale sopra la testata */
.foglio {
  background: var(--crema);
  border-radius: var(--r-foglio) var(--r-foglio) 0 0;
  margin-top: -20px;
  padding: 15px var(--s-schermo) 22px;
  position: relative;
  flex: 1;
}

.sezione + .sezione { margin-top: 22px; }
.sezione__titolo {
  font-size: var(--t-titolo-sezione);
  font-weight: var(--peso-titolo);
  margin-bottom: 10px;
}
.sezione__titolo--piccolo {
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  color: var(--testo-debole);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- 8. Categorie: il colore per funzione ---------- */

/* Il colore raggruppa per che cosa si sta facendo, non per capriccio:
   verde chi prende un posto in agenda, arancio chi lo libera, blu le
   tre carte che si mandano al medico, giallo il parlare. */
[data-categoria="appuntamento"] { --fondo-card: var(--verde-card);   --fondo-blob: var(--verde-scuro); }
[data-categoria="domiciliare"]  { --fondo-card: var(--verde-card);   --fondo-blob: var(--verde-scuro); }
[data-categoria="annullamento"] { --fondo-card: var(--arancio);      --fondo-blob: var(--arancio-blob); }
[data-categoria="prescrizione"] { --fondo-card: var(--blu-carta);    --fondo-blob: var(--blu-carta-blob); }
[data-categoria="referto"]      { --fondo-card: var(--blu-carta);    --fondo-blob: var(--blu-carta-blob); }
[data-categoria="certificato"]  { --fondo-card: var(--blu-fondo);    --fondo-blob: var(--blu-fondo-blob); }
[data-categoria="vaccinazione"] { --fondo-card: var(--blu-fondo);    --fondo-blob: var(--blu-fondo-blob); }
[data-categoria="messaggio"]    { --fondo-card: var(--giallo-carta); --fondo-blob: var(--giallo-carta-blob); }
[data-categoria="informazioni"] { --fondo-card: var(--verde-scuro);  --fondo-blob: var(--verde-medio); }

/* ---------- 9. Tessere di servizio ---------- */

.griglia-servizi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-gap);
}

/* La tessera è alta quanto il suo contenuto, come nella galleria:
   il riquadro dell'icona in alto a sinistra, l'etichetta sotto a
   una distanza fissa. Forzarla quadrata la faceva diventare un
   riquadrone mezzo vuoto. */
.tessera-servizio {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--fondo-card, var(--verde-card));
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  color: var(--bianco);
  min-height: 96px;
}
/* L'icona e il nome sono i due pesi della tessera, e a 26 e 12 non
   pesavano niente: il colore si mangiava tutto e in mezzo restava
   un buco. Il riquadro sale a 34 e smette di essere un cerchietto,
   il nome sale a 14. */
.tessera-servizio__icona {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.25);
  color: var(--bianco);
}
.tessera-servizio__icona .icona { width: 19px; height: 19px; }
.tessera-servizio__etichetta {
  position: relative;
  font-size: var(--t-card-titolo);
  font-weight: var(--peso-titolo);
  color: var(--bianco);
  line-height: 1.25;
}
.tessera-servizio__resta {
  position: relative;
  font-size: var(--t-minimo);
  font-weight: var(--peso-medio);
  color: var(--bianco);
}

/* ---------- 10. Card ---------- */

.card-appuntamento {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--verde-card);
  --fondo-blob: var(--verde-scuro);
  color: var(--bianco);
  padding: 14px var(--s-card);
}
.card-appuntamento > *:not(.blob) { position: relative; }
.card-appuntamento__titolo {
  font-size: var(--t-card-titolo);
  font-weight: var(--peso-titolo);
  color: var(--bianco);
  padding-right: 26px;
}
.card-appuntamento__quando {
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  color: var(--bianco);
  margin-top: 4px;
}
.card-appuntamento__dove {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  color: var(--bianco);
  margin-top: 6px;
}
.card-appuntamento__menu {
  position: absolute;
  top: 10px;
  right: 8px;
  color: var(--bianco);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.card-richiesta {
  background: var(--bianco);
  border-radius: var(--r-card-piccola);
  padding: 12px var(--s-card);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.card-richiesta__corpo { flex: 1; min-width: 0; }
.card-richiesta__titolo {
  font-size: var(--t-card-titolo);
  font-weight: var(--peso-titolo);
}
.card-richiesta__meta {
  font-size: var(--t-piccolo);
  color: var(--testo-debole);
  margin-top: 3px;
}

.pila > * + * { margin-top: var(--s-gap); }

/* ---------- 11. Pastiglie ---------- */

.pastiglia-stato {
  display: inline-block;
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  padding: 3px 9px;
  border-radius: var(--r-pastiglia);
  background: var(--crema);
  color: var(--testo-tenue);
  white-space: nowrap;
}
[data-stato="in-lavorazione"].pastiglia-stato,
[data-stato="da-gestire"].pastiglia-stato   { background: var(--ambra-tinta);  color: var(--ambra-testo); }
[data-stato="pronto"].pastiglia-stato,
/* "In corso" e' un passo avanti rispetto a "in lavorazione": il
   medico ha risposto e la cosa si e' mossa. Verde, quindi, non ambra
   - il colore dice da solo che non si aspetta piu' nel vuoto. */
[data-stato="in-corso"].pastiglia-stato,
[data-stato="confermato"].pastiglia-stato   { background: var(--verde-tinta);  color: var(--verde-medio); }
[data-stato="evaso"].pastiglia-stato,
[data-stato="letto"].pastiglia-stato,
[data-stato="eseguita"].pastiglia-stato     { background: var(--crema);        color: var(--testo-tenue); }
[data-stato="annullato"].pastiglia-stato,
[data-stato="cestino"].pastiglia-stato      { background: var(--crema);        color: var(--testo-debole); }
[data-stato="da-inviare"].pastiglia-stato   { background: var(--arancio-tinta); color: var(--arancio-testo); }
[data-stato="inviato"].pastiglia-stato      { background: var(--verde-tinta);  color: var(--verde-medio); }

.pastiglia-ambulatorio {
  display: inline-block;
  font-size: var(--t-minimo);
  font-weight: var(--peso-medio);
  padding: 3px 9px;
  border-radius: var(--r-pastiglia);
  background: var(--crema);
  color: var(--testo-tenue);
}
.card-appuntamento .pastiglia-ambulatorio,
.tessera-servizio .pastiglia-ambulatorio {
  background: rgba(255, 255, 255, 0.22);
  color: var(--bianco);
}

/* ---------- 12. Striscia dei giorni, calendario, slot ---------- */

.striscia-giorni {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.striscia-giorni__giorno {
  border-radius: 10px;
  padding: 6px 0;
  text-align: center;
  min-height: var(--tocco-minimo);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.striscia-giorni__iniziale {
  font-size: var(--t-minimo);
  font-weight: var(--peso-medio);
  color: var(--testo-debole);
}
.striscia-giorni__numero {
  font-size: var(--t-card);
  font-weight: var(--peso-titolo);
}
.striscia-giorni__giorno[aria-pressed="true"] { background: var(--arancio); }
.striscia-giorni__giorno[aria-pressed="true"] .striscia-giorni__numero { color: var(--bianco); }
.striscia-giorni__giorno[aria-pressed="true"] .striscia-giorni__iniziale { color: var(--arancio-tinta); }

.calendario {
  background: var(--bianco);
  border-radius: var(--r-card);
  padding: var(--s-card);
}
.calendario__testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.calendario__mese {
  font-size: var(--t-card);
  font-weight: var(--peso-titolo);
}
.calendario__griglia {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendario__intestazione {
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  color: var(--testo-debole);
  text-align: center;
  padding-bottom: 4px;
}
.calendario__giorno {
  aspect-ratio: 1 / 1;
  min-height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  color: var(--testo);
}
.calendario__giorno[data-giorno="libero"]  { background: var(--verde-tinta);   color: var(--verde-medio); font-weight: var(--peso-titolo); }
.calendario__giorno[data-giorno="chiuso"]  { background: var(--arancio-tinta); color: var(--arancio-testo); }
.calendario__giorno[data-giorno="fuori"]   { color: var(--testo-disabilitato); }
.calendario__giorno[data-giorno="oggi"]    { background: var(--selezione); }
.calendario__giorno[aria-pressed="true"]   { background: var(--arancio); color: var(--bianco); }

.griglia-slot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.slot {
  background: var(--bianco);
  border-radius: var(--r-controllo);
  padding: 12px 0;
  text-align: center;
  font-size: var(--t-card);
  font-weight: var(--peso-medio);
  color: var(--verde-medio);
  min-height: var(--tocco-minimo);
}
.slot--scelto   { background: var(--verde-card); color: var(--bianco); font-weight: var(--peso-titolo); }
.slot--occupato { color: var(--testo-disabilitato); }

/* ---------- 13. Bottoni ---------- */

.bottone-azione {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tocco-minimo);
  padding: 13px 18px;
  border-radius: var(--r-controllo);
  background: var(--arancio);
  --fondo-blob: var(--arancio-blob);
  color: var(--bianco);
  font-size: var(--t-card);
  font-weight: var(--peso-titolo);
}
.bottone-azione > *:not(.blob) { position: relative; }
.bottone-azione--verde { background: var(--verde-scuro); --fondo-blob: var(--verde-medio); }
.bottone-azione--pericolo { background: var(--rosso); --fondo-blob: var(--rosso-testo); }
.bottone-azione--neutro {
  background: var(--crema);
  color: var(--testo);
  --fondo-blob: transparent;
}
.bottone-azione[disabled] {
  background: var(--scheletro);
  color: var(--testo-disabilitato);
  --fondo-blob: transparent;
  pointer-events: none;
}

.bottone-testo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tocco-minimo);
  font-size: var(--t-card);
  font-weight: var(--peso-titolo);
  color: var(--verde-scuro);
}

.bottone-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bottone-riga > * { flex: 1; min-width: 140px; }

/* ---------- 14. Voci di elenco e navigazione ---------- */

/* La riga sta sul foglio, che è crema: per staccarsene è bianca.
   Dentro una card bianca si inverte e torna crema. */
.voce-info,
.voce-navigazione {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--bianco);
  border-radius: var(--r-card-piccola);
  padding: 10px var(--s-card);
  min-height: var(--tocco-minimo);
}
.card-bianca .voce-info,
.card-bianca .voce-navigazione { background: var(--crema); }
.voce-info__icona,
.voce-navigazione__icona {
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--fondo-card, var(--verde-tinta));
  color: var(--bianco);
  flex: none;
}
.voce-info__icona .icona,
.voce-navigazione__icona .icona { width: 16px; height: 16px; }
.voce-info__corpo,
.voce-navigazione__corpo { flex: 1; min-width: 0; }
.voce-info__titolo,
.voce-navigazione__titolo {
  font-size: var(--t-corpo);
  font-weight: var(--peso-titolo);
}
.voce-info__sotto,
.voce-navigazione__sotto {
  font-size: var(--t-piccolo);
  color: var(--testo-debole);
  margin-top: 2px;
}
.voce-navigazione__freccia { color: var(--testo-debole); }

/* La voce delle Informazioni non porta altrove: si apre sul posto,
   e il contenuto scende sotto. La freccia gira di un quarto per
   dire da che parte sta andando la cosa. */
.fisarmonica { display: block; }
.fisarmonica__dentro { padding: 10px 0 4px; }
.voce-info[aria-expanded="true"] { background: var(--verde-tinta); }
.voce-info .voce-navigazione__freccia { transition: transform 0.15s ease-out; }
.voce-info[aria-expanded="true"] .voce-navigazione__freccia { transform: rotate(90deg); }

/* Sul foglio bianco le voci restano crema; dentro una card bianca
   il fondo si inverte */
.card-bianca { background: var(--bianco); border-radius: var(--r-card); padding: var(--s-card); }

/* La riga che spiega perche' un tasto non c'e'. Sta dove sarebbe
   stato il tasto, altrimenti sembra che sia sparito. */
/* Il pallino rosso delle risposte non lette, in alto a destra sulla
   tessera. Porta il numero, perche' "tre" e "uno" non sono la stessa
   notizia e chi apre vuole sapere quanto lo aspetta. */
/* Sulla riga di una persona, il pallino sta in fila e non appeso a
   un angolo: la voce e' larga quanto la riga, e un tondo in alto a
   destra finirebbe nel vuoto. */
.pallino-nuovi--in-riga {
  position: static;
  margin-left: auto;
  align-self: center;
  border: none;
}

.pallino-nuovi {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  background: var(--rosso-testo, #B3261E);
  color: var(--bianco);
  border: 2px solid var(--bianco);
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Uno scambio intero dentro una scatola sola: la domanda in cima,
   sotto quello che e' seguito. Chi ha scritto si vede dal rientro e
   dal colore, non solo dalla parola sopra: si scorre con l'occhio,
   non si legge riga per riga. */
.filo {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bianco);
  border-radius: var(--r-card);
  padding: 12px 13px;
}
.filo--apribile { cursor: pointer; }
.filo--apribile:hover { background: var(--crema); }
.filo--nuovo { box-shadow: 0 0 0 2px var(--verde-tinta); }
.filo__titolo {
  display: block;
  font-size: var(--t-minimo);
  color: var(--testo-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 7px;
}
.filo__battuta {
  display: block;
  border-left: 3px solid var(--filo);
  padding-left: 9px;
}
.filo__battuta + .filo__battuta { margin-top: 9px; }
.filo__battuta--medico { border-left-color: var(--verde-medio); }
.filo__battuta--tua { border-left-color: var(--bordo-campo, var(--filo)); }
.filo__chi { font-size: var(--t-piccolo); font-weight: var(--peso-titolo); margin-right: 6px; }
.filo__quando { font-size: var(--t-minimo); color: var(--testo-tenue); }
.filo__testo {
  display: block;
  font-size: var(--t-corpo);
  line-height: 1.45;
  white-space: pre-wrap;
  margin-top: 2px;
}
.filo__invito {
  display: block;
  margin-top: 9px;
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  color: var(--verde-medio);
}

/* ---------- Il calendario a settimana ----------
   Sette colonne piu' quella delle ore. Su uno schermo stretto non ci
   stanno: invece di schiacciarle finche' diventano illeggibili, la
   griglia si tiene la sua larghezza e scorre di lato dentro il suo
   riquadro - la pagina, quella, non si muove. */
.settimana-cal {
  display: grid;
  grid-template-columns: 46px repeat(7, minmax(74px, 1fr));
  gap: 1px;
  background: var(--filo);
  border-radius: var(--r-controllo);
  overflow-x: auto;
  overflow-y: hidden;
}
.settimana-cal__ore, .settimana-cal__colonna {
  background: var(--bianco);
  display: flex;
  flex-direction: column;
}
.settimana-cal__colonna--oggi { background: var(--verde-tinta); }
.settimana-cal__testa {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  border-bottom: 1px solid var(--filo);
}
.settimana-cal__ora {
  flex: 1;
  font-size: 10px;
  color: var(--testo-tenue);
  padding: 1px 4px 0 0;
  text-align: right;
  border-top: 1px solid var(--filo);
}
/* L'altezza segue quante ore si stanno guardando: dodici ore hanno
   righe comode, ventiquattro le stringono per non fare una pagina
   lunga il doppio dello schermo. */
.settimana-cal__pista {
  position: relative;
  flex: 1;
  min-height: calc(var(--ore, 12) * 34px);
  display: flex;
  flex-direction: column;
}
.settimana-cal__riga { flex: 1; border-top: 1px solid var(--filo); }
/* Il riquadro di un appuntamento non scende sotto la misura che
   serve a leggerlo: una visita di venti minuti in una griglia di
   dodici ore sarebbe alta pochi pixel, e il nome del paziente non ci
   starebbe. Meglio due riquadri vicini che si toccano di due
   riquadri illeggibili. */
.settimana-cal__evento {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 5px;
  padding: 3px 5px;
  font-size: 10px;
  line-height: 1.25;
  text-align: left;
  overflow: hidden;
  background: var(--verde-medio);
  color: var(--bianco);
  min-height: 24px;
}
/* Una chiusura si vede da lontano ed e' rossa: il grigio a righine
   si confondeva con lo sfondo, e una settimana chiusa sembrava una
   settimana vuota. */
.settimana-cal__evento--ferie {
  background: var(--rosso-tinta);
  color: var(--rosso-testo);
  box-shadow: inset 0 0 0 1px var(--rosso-testo);
  font-weight: var(--peso-titolo);
}

/* ---------- Il calendario a mese ----------
   Nel quadratino il testo di un appuntamento non ci sta, e fingere
   che ci stia vuol dire scriverlo illeggibile: la casella porta il
   numero di quello che ha, e il giorno toccato si legge sotto. */
.mese-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mese-cal__testa {
  text-align: center;
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  color: var(--testo-tenue);
  padding-bottom: 2px;
}
.mese-cal__giorno {
  position: relative;
  aspect-ratio: 1;
  min-height: 38px;
  border-radius: var(--r-controllo);
  background: var(--bianco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.mese-cal__giorno--fuori { opacity: 0.4; }
.mese-cal__giorno--oggi { outline: 2px solid var(--verde-medio); }
.mese-cal__giorno--scelto { background: var(--verde-tinta); }
.mese-cal__giorno--chiuso {
  background: var(--rosso-tinta);
  color: var(--rosso-testo);
}
.mese-cal__numero { font-size: var(--t-piccolo); font-weight: var(--peso-medio); }
.mese-cal__conto {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--verde-medio);
  color: var(--bianco);
  font-size: 10px;
  font-weight: var(--peso-titolo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---------- I testi che arrivano al paziente ----------
   Sette schede, una per messaggio: il nome sopra e grande, sotto
   dove arriva, poi il riquadro per riscriverlo e il testo standard.
   Ogni messaggio ha la sua scheda perche' sono cose diverse, e
   metterli in fila dentro un riquadro solo li faceva sembrare
   varianti della stessa. */
.testo-scheda { padding-bottom: 14px; }
.testo-scheda + .testo-scheda { margin-top: 4px; }
.testo-scheda__titolo {
  font-size: var(--t-card);
  font-weight: var(--peso-titolo);
  margin-bottom: 3px;
}
.testo-scheda__dove {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  line-height: 1.45;
  margin-bottom: 9px;
}
/* Il riquadro cresce col testo: una barra di scorrimento dentro un
   campo di tre righe nasconde meta' di quello che si sta scrivendo. */
/* Un pezzo di messaggio - l'oggetto, il testo - dentro la scheda del
   messaggio a cui appartiene. La riga sopra e lo stacco lo tengono
   distinto senza separarlo. */
.testo-pezzo { padding-top: 11px; margin-top: 11px; border-top: 1px solid var(--filo); }
.testo-pezzo__etichetta {
  display: block;
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  margin-bottom: 5px;
}
.testo-pezzo__campo {
  width: 100%;
  min-height: 44px;
  resize: none;
  overflow: hidden;
  line-height: 1.45;
  margin-bottom: 7px;
}
.testo-scheda__canale {
  display: inline-block;
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  background: var(--crema);
  color: var(--testo-tenue);
  border-radius: var(--r-pastiglia);
  padding: 2px 8px;
  margin-bottom: 6px;
}
.testo-scheda__standard {
  background: var(--crema);
  border-radius: var(--r-controllo);
  padding: 8px 11px;
}
.testo-scheda__etichetta {
  display: block;
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  color: var(--testo-tenue);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.testo-scheda__standard-corpo {
  display: block;
  font-size: var(--t-piccolo);
  line-height: 1.5;
  white-space: pre-wrap;
}
.testo-scheda__graffe {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 9px;
}
.testo-scheda__graffa {
  font-family: ui-monospace, monospace;
  font-size: var(--t-minimo);
  background: var(--verde-tinta);
  color: var(--verde-medio);
  border-radius: var(--r-pastiglia);
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.testo-scheda__graffa:hover { background: var(--verde-medio); color: var(--bianco); }
.testo-scheda__graffa-nota { font-size: var(--t-minimo); color: var(--testo-tenue); }

/* Lo stato di un profilo, scritto e colorato nella sua colonna: la
   pastiglia accanto ripeteva la stessa parola. */
/* La classe della colonna colora gia' il testo di grigio: per
   scavalcarla non basta l'attributo da solo. */
.lista-admin__riga [data-stato-testo] { font-weight: var(--peso-medio); }
.lista-admin__riga [data-stato-testo="attivo"] { color: var(--verde-medio); }
.lista-admin__riga [data-stato-testo="sospeso"] { color: var(--arancio-testo); }
.lista-admin__riga [data-stato-testo="incompleto"] { color: var(--testo-tenue); }
.lista-admin__riga [data-stato-testo="da-inviare"] { color: var(--arancio-testo); }
.lista-admin__riga [data-stato-testo="inviato"] { color: var(--verde-medio); }

/* Una sezione che si apre solo se serve. Chiusa e' una riga, aperta
   e' una scheda: cosi' quello che riguarda pochi non spinge in fondo
   alla pagina quello che si fa ogni giorno. */
.scheda-piega {
  background: var(--bianco);
  border-radius: var(--r-card);
  padding: 4px var(--s-card) 10px;
}
.scheda-piega[open] { padding-bottom: var(--s-card); }
.scheda-piega__testa {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--testo-debole);
}
.scheda-piega__testa::-webkit-details-marker { display: none; }
.scheda-piega__testa::before {
  content: '▸';
  font-size: 11px;
  transition: transform 0.12s ease;
}
.scheda-piega[open] > .scheda-piega__testa::before { transform: rotate(90deg); }

.nota-pagina {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  line-height: 1.45;
  padding: 0 4px;
}

/* ---------- 15. Avvisi ---------- */

.avviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: var(--r-controllo);
  padding: 10px var(--s-card);
  background: var(--ambra-tinta);
  color: var(--ambra-testo);
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  line-height: 1.4;
}
/* Quando gli avvisi sono due (quello di famiglia e quello del tipo)
   restano staccati, cosi' si leggono come due cose distinte. */
.avviso__riga + .avviso__riga { margin-top: 8px; }

/* L'avvertenza scritta dal medico e' l'unica cosa della pagina che
   il paziente deve leggere per forza, e la si leggeva alla stessa
   misura di tutto il resto: un gradino piu' grande. */
.avviso--disclaimer { font-size: var(--t-card); }
.avviso--errore { background: var(--arancio-tinta); color: var(--arancio-testo); }
.avviso--calma  { background: var(--verde-tinta);   color: var(--verde-medio); }
.avviso--grave  { background: var(--rosso-tinta);   color: var(--rosso-testo); }
/* La striscia del motore da riavviare: sta in cima all'area di
   lavoro e non si confonde con gli avvisi del programma, perche' non
   parla di pazienti ma di chi lo sta facendo funzionare. */
.striscia-riavvio { margin-bottom: 10px; align-items: flex-start; }
/* L'avviso in cima alla home: il titolo sopra, il testo sotto, e
   respira piu' degli altri perche' e' la prima cosa che si legge
   aprendo l'app. */
.avviso--home { margin: 0 0 4px; align-items: flex-start; }
.avviso--home strong { display: block; margin-bottom: 2px; }
.avviso__riga { display: block; font-weight: var(--peso-normale, 400); }
.avviso__riga + .avviso__riga { margin-top: 6px; }

.messaggio-in-linea {
  font-size: var(--t-piccolo);
  font-weight: var(--peso-medio);
  color: var(--rosso-testo);
  margin-top: 5px;
}
.messaggio-in-linea--calma { color: var(--verde-medio); }

/* ---------- 16. Modulo a blocchi ---------- */

.modulo > * + * { margin-top: 16px; }

/* Fra un blocco e il successivo ci vuole più aria che fra
   l'etichetta e il suo campo, altrimenti l'occhio lega l'etichetta
   al riquadro che le sta sopra invece che a quello sotto. Da
   telefono, dove i riquadri sono larghi quanto lo schermo e uno
   sotto l'altro, l'equivoco è quasi obbligato. */
.blocco + .blocco { margin-top: 22px; }

.blocco__etichetta {
  display: block;
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--testo-tenue);
  margin-bottom: 7px;
}

/* Il campo dimenticato si accende: etichetta, bordo del campo e
   riquadro intero in rosso, così a un avviso "manca qualcosa" segue
   un posto dove guardare — anche nei blocchi senza casella, come
   gli orari o il colore. */
.blocco--manca {
  background: var(--rosso-tinta);
  border-left: 3px solid var(--rosso);
  border-radius: 8px;
  padding: 8px 10px;
}
.blocco--manca .blocco__etichetta { color: var(--rosso-testo); }
.blocco--manca input,
.blocco--manca textarea,
.blocco--manca select { border-color: var(--rosso); }

.elenco-spunta > * + * { margin-top: 8px; }
.spunta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bianco);
  border-radius: var(--r-controllo);
  padding: 11px var(--s-card);
  min-height: var(--tocco-minimo);
  font-size: var(--t-card);
  font-weight: var(--peso-medio);
}
.spunta__segno {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--bordo-campo);
  display: grid;
  place-items: center;
  color: transparent;
  flex: none;
}
.spunta input { position: absolute; opacity: 0; pointer-events: none; }
.spunta input:checked + .spunta__segno {
  background: var(--verde-card);
  border-color: var(--verde-card);
  color: var(--bianco);
}

.scelta-singola > * + * { margin-top: 8px; }
.scelta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--bianco);
  border-radius: var(--r-controllo);
  padding: 12px var(--s-card);
  min-height: var(--tocco-minimo);
  border: 2px solid transparent;
}
.scelta__segno {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bordo-campo);
  display: grid;
  place-items: center;
  flex: none;
}
.scelta__segno::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
}
.scelta input { position: absolute; opacity: 0; pointer-events: none; }
.scelta input:checked ~ .scelta__corpo { }
.scelta:has(input:checked) { border-color: var(--verde-card); }
.scelta:has(input:checked) .scelta__segno { border-color: var(--verde-card); }
.scelta:has(input:checked) .scelta__segno::after { background: var(--verde-card); }
.scelta__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scelta__titolo { font-size: var(--t-card); font-weight: var(--peso-titolo); }
.scelta__sotto  { font-size: var(--t-piccolo); color: var(--testo-debole); margin-top: 2px; }

/* Anche le altre righe composte vogliono i pezzi incolonnati */
.spunta,
.voce-info__corpo,
.voce-navigazione__corpo,
.card-richiesta__corpo,
.albero__corpo,
.identita-medico__testo { display: flex; }
.voce-info__corpo,
.voce-navigazione__corpo,
.card-richiesta__corpo,
.albero__corpo,
.identita-medico__testo { flex-direction: column; }
.spunta { align-items: center; }

.campo-testo,
.campo-riga {
  width: 100%;
  background: var(--bianco);
  border: 1px solid var(--bordo-campo);
  border-radius: var(--r-controllo);
  padding: 12px var(--s-card);
  font-size: var(--t-card);
  color: var(--testo);
  resize: none;
}
.campo-riga { height: 44px; }
.campo-testo { height: 66px; }
.campo-testo--alto { height: 120px; }
.campo-testo::placeholder,
.campo-riga::placeholder { color: var(--testo-debole); }
.campo-testo:focus,
.campo-riga:focus { outline: 2px solid var(--verde-tinta); outline-offset: 0; border-color: var(--verde-card); }
[data-errore="si"].campo-testo,
[data-errore="si"].campo-riga { border-color: var(--rosso); }

.contatore-caratteri {
  display: block;
  text-align: right;
  font-size: var(--t-minimo);
  color: var(--testo-debole);
  margin-top: 4px;
}
.contatore-caratteri[data-oltre="si"] { color: var(--rosso-testo); font-weight: var(--peso-titolo); }

.riquadro-lettura {
  background: var(--crema);
  border-radius: var(--r-controllo);
  padding: 11px var(--s-card);
  font-size: var(--t-card);
  font-weight: var(--peso-medio);
  color: var(--testo-tenue);
}

.dropzone {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--verde-card);
  --fondo-blob: var(--verde-scuro);
  color: var(--bianco);
  padding: 22px var(--s-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  width: 100%;
}
.dropzone > *:not(.blob) { position: relative; }
.dropzone__titolo { font-size: var(--t-card); font-weight: var(--peso-titolo); color: var(--bianco); }
.dropzone__formato { font-size: var(--t-piccolo); font-weight: var(--peso-medio); color: var(--bianco); }

.allegato {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bianco);
  border-radius: var(--r-controllo);
  padding: 10px var(--s-card);
  font-size: var(--t-corpo);
}
.allegato__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 17. Testata di sottoschermata ---------- */

.testata-sotto {
  padding: 16px var(--s-schermo) 6px;
}
.testata-sotto__titolo {
  font-size: var(--t-titolo-schermata);
  font-weight: var(--peso-titolo);
}
.testata-sotto__contesto {
  font-size: var(--t-piccolo);
  color: var(--testo-debole);
  margin-top: 2px;
}

.contenuto {
  padding: 10px var(--s-schermo) 24px;
}

/* ---------- 18. Barra inferiore del paziente ---------- */

.barra-inferiore {
  display: flex;
  background: var(--bianco);
  border-top: 1px solid var(--scheletro);
  flex: none;
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inferiore__cella {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 0;
  min-height: var(--tocco-minimo);
  color: var(--verde-scuro);
}
.barra-inferiore__cella + .barra-inferiore__cella { border-left: 1px solid var(--scheletro); }
.barra-inferiore__etichetta {
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
}
.barra-inferiore__cella[disabled] { color: var(--testo-disabilitato); pointer-events: none; }

/* ---------- 19. Stati vuoti, caricamento, errore ---------- */

.stato-pieno {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 40px var(--s-schermo);
}
.stato-pieno__titolo {
  font-size: var(--t-titolo-sezione);
  font-weight: var(--peso-titolo);
}
.stato-pieno__riga {
  font-size: var(--t-corpo);
  color: var(--testo-tenue);
  max-width: 30ch;
  line-height: 1.5;
}
.stato-pieno .bottone-azione { max-width: 260px; }
/* Il riquadro del vuoto quando e' premibile: si vede che lo e'. */
.stato-pieno--premibile {
  width: 100%;
  border: 1px dashed var(--bordo-campo);
  border-radius: var(--r-card);
  cursor: pointer;
}
.stato-pieno--premibile:hover { border-color: var(--verde-card); }

.scheletro {
  background: var(--scheletro);
  border-radius: var(--r-controllo);
  height: 14px;
}
.scheletro--tessera { aspect-ratio: 1 / 1; height: auto; border-radius: var(--r-card); }
.scheletro--card    { height: 84px; border-radius: var(--r-card); }
.scheletro--riga    { height: 14px; }
.scheletro--corta   { width: 45%; }
.scheletro--media   { width: 70%; }
.scheletro--foto    { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.testata .scheletro { background: rgba(255, 255, 255, 0.18); }

/* Mappa incorporata della schermata Posizione */
.mappa {
  width: 100%;
  height: 190px;
  border: 0;
  border-radius: var(--r-card-piccola);
  display: block;
  margin-bottom: 10px;
}

/* ---------- 20. Menu laterale di admin e configuratore ---------- */

.impalcatura {
  display: flex;
  min-height: 100vh;
}
.menu-laterale {
  width: var(--menu-largo);
  flex: none;
  background: var(--verde-scuro);
  --fondo-blob: var(--verde-medio);
  color: var(--bianco);
  padding: 16px 10px;
  position: relative;
  overflow: hidden;
}
.menu-laterale > *:not(.blob) { position: relative; }
.menu-laterale__marchio {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: var(--t-card);
  font-weight: var(--peso-titolo);
  color: var(--bianco);
  margin-bottom: 18px;
  padding: 0;
}
.menu-laterale__gruppo {
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--verde-etichetta);
  padding: 14px 6px 6px;
}
.menu-laterale__voce {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  padding: 9px 8px;
  min-height: 38px;
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  color: var(--bianco);
}
.menu-laterale__voce[aria-current="page"] { background: rgba(255, 255, 255, 0.14); font-weight: var(--peso-titolo); }
.menu-laterale__testo { flex: 1; min-width: 0; }
.menu-laterale__contatore {
  background: var(--arancio);
  color: var(--bianco);
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  border-radius: var(--r-pastiglia);
  padding: 2px 7px;
}

.area-lavoro {
  flex: 1;
  min-width: 0;
  background: var(--crema);
  padding: 20px 22px 40px;
}
.area-lavoro__testata {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.area-lavoro__titolo {
  font-size: var(--t-titolo-sezione);
  font-weight: var(--peso-titolo);
}
.area-lavoro__contesto {
  font-size: var(--t-piccolo);
  color: var(--testo-debole);
  margin-top: 2px;
}

.briciole {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-piccolo);
  color: var(--testo-debole);
  margin-bottom: 10px;
}
.briciole__voce[aria-current="page"] { color: var(--testo); font-weight: var(--peso-titolo); }

.apri-menu {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: var(--r-icona);
  place-items: center;
  background: var(--bianco);
  color: var(--verde-scuro);
}

@media (max-width: 899px) {
  .menu-laterale {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
  }
  .menu-laterale[data-aperto="si"] { transform: translateX(0); }
  .apri-menu { display: grid; }
  .area-lavoro { padding: 14px var(--s-schermo) 40px; }
}

/* ---------- 21. Liste di admin ---------- */

.lista-admin {
  background: var(--bianco);
  border-radius: var(--r-card);
  overflow: hidden;
}
.lista-admin__intestazione,
.lista-admin__riga {
  display: grid;
  /* L'ultima colonna ha una misura sua e non `auto`: intestazione e
     righe sono due griglie separate, e con `auto` la colonna delle
     azioni valeva zero nell'intestazione (che li' e' vuota) e
     centocinquanta nelle righe. Le tre colonne di testo ricevevano
     percio' larghezze diverse, e i titoli non stavano sopra la loro
     colonna. */
  grid-template-columns: var(--colonne, 2fr 1fr 1fr 150px);
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
}
.lista-admin__intestazione {
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--testo-debole);
}
.lista-admin__riga + .lista-admin__riga,
.lista-admin__intestazione + .lista-admin__riga { border-top: 1px solid var(--filo); }
.lista-admin__riga[aria-selected="true"] { background: var(--selezione); }
/* Le righe di un elenco di persone si aprono toccandole, ma una riga
   in un elenco continuo non lo dice: sembra una tabella da leggere.
   A riquadri staccati si vede che sono oggetti, e che uno lo si puo'
   prendere in mano. */
.lista-admin--riquadri {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.lista-admin--riquadri > .lista-admin__riga {
  background: var(--bianco);
  border: 1px solid var(--filo);
  border-radius: var(--r-card);
  cursor: pointer;
}
.lista-admin--riquadri > .lista-admin__riga:hover {
  border-color: var(--verde-medio);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.lista-admin--riquadri > .lista-admin__intestazione {
  border: none;
  background: none;
  padding-bottom: 0;
}
.lista-admin--riquadri > .lista-admin__riga + .lista-admin__riga,
.lista-admin--riquadri > .lista-admin__intestazione + .lista-admin__riga { border-top: 1px solid var(--filo); }
.lista-admin__principale { font-size: var(--t-card); font-weight: var(--peso-medio); }
.lista-admin__secondario { font-size: var(--t-corpo); color: var(--testo-tenue); }
/* I titoli di un medico: sotto il nome, piu' piccoli e piu' tenui. */
.lista-admin__sottotitolo {
  display: block;
  margin-top: 2px;
  font-size: var(--t-piccolo);
  font-weight: var(--peso-testo);
  color: var(--testo-debole);
}
/* Una riga può portare due azioni — aprire e togliere — e vanno
   affiancate a destra, non appoggiate una all'altra. */
.lista-admin__azione {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Quattro tasti su una riga stretta non ci stanno in fila: vanno
     a capo invece di uscire dallo schermo o di rimpicciolirsi
     finche' non si riesce piu' a centrarli col dito. */
  flex-wrap: wrap;
  gap: 6px 8px;
}
/* Un campo dentro la colonna delle azioni non e' un campo di modulo:
   sta in fila con i tasti, non sopra di loro. `.campo-riga` nasce
   largo quanto tutta la riga, e messo qui buttava a capo tutto quello
   che gli stava accanto - il tasto Nascondi finiva sopra la tendina
   invece che di fianco. Vale ovunque si metta un controllo in una
   riga di elenco, non solo nei contatti senza gruppo. */
/* La tendina del ruolo dentro la sua colonna: sta larga quanto la
   colonna, e la striscia del gruppo nuovo scende sotto invece di
   spingere fuori la riga. */
.ruolo-scelta { display: block; }
.ruolo-scelta .campo-riga {
  width: 100%;
  height: 34px;
  padding: 5px 8px;
  font-size: var(--t-piccolo);
}
.ruolo-nuovo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
}

.lista-admin__azione .campo-riga {
  width: auto;
  min-width: 150px;
  max-width: 210px;
  height: 36px;
  padding: 6px 10px;
  font-size: var(--t-piccolo);
  flex: 0 1 auto;
}

/* La spunta che sceglie una riga di un elenco di lavoro, per
   esempio le visite domiciliari da mettere in itinerario. È cosa
   diversa da .spunta, che è la riga intera di un elenco a scelta
   multipla lato paziente. */
.spunta-riga {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  accent-color: var(--verde-card);
  vertical-align: middle;
  flex: none;
}
.spunta-riga:disabled { opacity: 0.35; }

/* Casella e nome sono un bersaglio solo: una casella da diciotto
   pixel in una riga che per il resto apre i dettagli si manca col
   mouse, e chi la manca crede che non funzioni. */
.spunta-nome {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 6px 4px 0;
  margin: -4px 0;
  border-radius: var(--r-controllo);
}
.spunta-nome:hover { background: var(--crema); }
.spunta-nome--spenta { cursor: not-allowed; color: var(--testo-tenue); }
.spunta-nome--spenta:hover { background: none; }

.bottone-riga-lista {
  padding: 7px 13px;
  border-radius: var(--r-pastiglia);
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  background: var(--arancio);
  color: var(--bianco);
  min-height: 32px;
  white-space: nowrap;
}
.bottone-riga-lista--neutro { background: var(--crema); color: var(--testo-tenue); }
.bottone-riga-lista--pericolo { background: var(--rosso-tinta); color: var(--rosso-testo); }
/* Verde per le azioni che chiudono una pratica: "Risolto" non e' un
   pericolo e non deve avere il colore di chi cancella. */
.bottone-riga-lista--verde { background: var(--verde-medio); color: var(--bianco); }
/* "Risposto" e "Confermata" non sono tasti spenti: sono
   informazioni. Il grigio da solo li fa sembrare rotti, il verde
   pieno li fa sembrare premibili: verde chiaro, quindi, e il cursore
   che non promette niente. */
/* Il tasto per tornare indietro, in fondo alla pagina. Verde come le
   azioni sarebbe una gara con quella vera che gli sta accanto - due
   tasti pieni dello stesso colore e uno che non sa quale premere -
   e grigio come prima sparirebbe. Contornato: si vede ed e' un'altra
   cosa. */
.bottone-azione--indietro {
  background: transparent;
  color: var(--verde-medio);
  box-shadow: inset 0 0 0 2px var(--verde-medio);
  font-weight: var(--peso-titolo);
}
.bottone-azione--indietro:hover { background: var(--verde-tinta); }

/* Archiviare non e' ne' un traguardo ne' un pericolo: e' mettere via.
   Il verde diceva "bravo, fatto" e il rosso "attento": ambra, che non
   dice ne' l'uno ne' l'altro. */
.bottone-riga-lista--archivia { background: var(--ambra-tinta); color: var(--ambra-testo); }

.bottone-riga-lista--fatto {
  background: var(--verde-tinta);
  color: var(--verde-medio);
  cursor: default;
  opacity: 1;
}

/* La barra di ricerca in testata: stretta, per non rubare spazio al
   titolo, e su schermo piccolo si allarga da sola sotto di esso. */
.campo-cerca { max-width: 220px; min-height: 34px; padding: 6px 10px; }
@media (max-width: 719px) { .campo-cerca { max-width: none; } }

@media (max-width: 719px) {
  .lista-admin__intestazione { display: none; }
  .lista-admin__riga {
    grid-template-columns: 1fr auto;
    grid-auto-rows: min-content;
    row-gap: 3px;
    padding: 12px 14px;
  }
  .lista-admin__riga > .lista-admin__principale { grid-column: 1; }
  .lista-admin__riga > .lista-admin__secondario { grid-column: 1; }
  .lista-admin__riga > .lista-admin__azione { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  /* Con piu' di due tasti la colonna stretta a destra non basta:
     scendono sotto il testo, su tutta la larghezza, dove ci stanno
     e si premono. */
  .lista-admin__riga.lista-admin__riga--molte-azioni > .lista-admin__azione {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-start;
    margin-top: 4px;
  }
}

/* ---------- 22. Filtri a pastiglia ---------- */

.filtri {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bianco);
  border-radius: var(--r-pastiglia);
  padding: 7px 13px;
  min-height: 34px;
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  color: var(--testo-tenue);
}
.filtro[aria-pressed="true"] { background: var(--verde-scuro); color: var(--bianco); }
.filtro__conteggio { font-weight: var(--peso-numero); }

/* ---------- 23. Scheda di dettaglio ---------- */

.scheda {
  background: var(--bianco);
  border-radius: var(--r-card);
  padding: 16px;
}
/* Dentro una scheda un tasto attaccato a quello che lo precede si
   preme per sbaglio: in Fasce orarie "Copia lunedi" e "Salva queste
   fasce" si toccavano, zero pixel fra i due. */
.scheda > .bottone-azione,
.scheda > .bottone-testo { margin-top: 12px; }
.scheda > .bottone-azione:first-child,
.scheda > .bottone-testo:first-child { margin-top: 0; }
.scheda__anagrafica {
  background: var(--crema);
  border-radius: var(--r-card-piccola);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.scheda__sezione + .scheda__sezione { margin-top: 14px; }
.scheda__intestazione {
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  color: var(--testo-tenue);
  margin-bottom: 6px;
}
.scheda__azioni {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.scheda__azioni .bottone-azione { flex: 1; }
.bottone-cestino {
  width: 44px;
  height: 44px;
  border-radius: var(--r-controllo);
  display: grid;
  place-items: center;
  background: var(--crema);
  color: var(--rosso-testo);
  flex: none;
}

.coppia { display: flex; gap: 14px; flex-wrap: wrap; }
.coppia__voce { min-width: 120px; }
.coppia__etichetta {
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--testo-debole);
}
.coppia__valore { font-size: var(--t-card); font-weight: var(--peso-medio); margin-top: 2px; overflow-wrap: anywhere; }
/* Righe che vogliono respirare: una scheda di sole coppie, lette una
   per una, e' faticosa se stanno appiccicate. */
.coppia--ariosa { padding: 9px 0; }
.coppia--ariosa + .coppia--ariosa { border-top: 1px solid var(--filo); }

/* ---------- 24. Finestra sovrapposta e avviso temporaneo ---------- */

/* Il velo scorre. Prima non lo faceva, e una finestra più alta
   dello schermo — il modulo di un bottone del menu, per dirne una —
   usciva dai due bordi senza che si potesse raggiungerla: i suoi
   tasti "Chiudi" e "Applica" restavano sotto il bordo inferiore, il
   menu laterale era coperto, e da lì non si usciva più.
   Il centraggio si fa con `margin: auto` invece che con
   `place-items: center`, perché quest'ultimo, quando il contenuto è
   più alto del contenitore, gli taglia via il bordo di sopra. */
.velo {
  position: fixed;
  inset: 0;
  background: var(--velo);
  display: flex;
  justify-content: center;
  padding: var(--s-schermo);
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modale {
  background: var(--bianco);
  border-radius: var(--r-foglio);
  padding: 22px;
  width: 100%;
  max-width: 380px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.modale__titolo { font-size: var(--t-titolo-sezione); font-weight: var(--peso-titolo); }
.modale__riga { font-size: var(--t-corpo); color: var(--testo-tenue); line-height: 1.5; }
.modale__azioni { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.modale__azioni > * { flex: 1; }

@media (max-width: 719px) {
  .velo { padding: 0; }
  .modale {
    max-width: none;
    border-radius: 0;
    justify-content: center;
    min-height: 100%;
    margin: 0;
  }
}

/* ---------- Il segnale di attesa ----------
   Compare solo se la risposta tarda: sotto il mezzo secondo
   lampeggerebbe e basta, e un lampo è più fastidioso di un attimo
   di silenzio. Copre lo schermo perché mentre il motore scrive su
   Google non si deve premere due volte lo stesso tasto. */
.attesa {
  position: fixed;
  inset: 0;
  background: var(--velo);
  display: grid;
  place-items: center;
  z-index: 60;
}
.attesa__scatola {
  background: var(--bianco);
  border-radius: var(--r-card);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 48px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.attesa__testo { font-size: var(--t-corpo); color: var(--testo-tenue); }
.attesa__giostra {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 3px solid var(--verde-tinta);
  border-top-color: var(--verde-card);
  animation: gira 0.7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
/* Chi ha chiesto meno animazioni vede il cerchio fermo, non un
   cerchio che gira comunque. */
@media (prefers-reduced-motion: reduce) {
  .attesa__giostra { animation: none; }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--verde-scuro);
  color: var(--bianco);
  border-radius: var(--r-controllo);
  padding: 12px 16px;
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  max-width: calc(100% - 32px);
  z-index: 50;
}
.toast__icona { color: var(--verde-tinta); }
.toast__annulla { font-weight: var(--peso-titolo); color: var(--verde-tinta); }

/* ---------- 25. Barra di avanzamento del wizard ---------- */

.passi { display: flex; align-items: center; gap: 0; margin-bottom: 18px; }
.passi__punto {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--scheletro);
  color: var(--testo-debole);
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  flex: none;
}
.passi__punto[data-passo="fatto"]    { background: var(--verde-card); color: var(--bianco); }
.passi__punto[data-passo="corrente"] { background: var(--arancio); color: var(--bianco); }
.passi__filo { flex: 1; height: 2px; background: var(--scheletro); }
.passi__filo[data-passo="fatto"] { background: var(--verde-card); }

.passi-stretti { margin-bottom: 18px; }
.passi-stretti__testo {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  color: var(--testo-tenue);
  margin-bottom: 6px;
}
.passi-stretti__barra { height: 6px; border-radius: 3px; background: var(--scheletro); overflow: hidden; }
.passi-stretti__riempimento { height: 100%; background: var(--arancio); border-radius: 3px; }

@media (min-width: 720px) { .passi-stretti { display: none; } }
@media (max-width: 719px) { .passi { display: none; } }

/* ---------- 26. Editor di orari ---------- */

.editor-orari > * + * { border-top: 1px solid var(--filo); }
.editor-orari__giorno {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  flex-wrap: wrap;
}
.editor-orari__nome {
  width: 92px;
  font-size: var(--t-card);
  font-weight: var(--peso-medio);
  flex: none;
}
/* Sei pixel bastavano quando le pastiglie erano due; con gli orologi,
   il piu' e i due attrezzi sono cinque cose in fila. */
.editor-orari__fasce { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }

.interruttore {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--scheletro);
  position: relative;
  flex: none;
  transition: background 0.15s;
}
.interruttore::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bianco);
  transition: transform 0.15s;
}
.interruttore[aria-checked="true"] { background: var(--verde-card); }
.interruttore[aria-checked="true"]::after { transform: translateX(16px); }

.fascia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--verde-tinta);
  color: var(--verde-medio);
  border-radius: var(--r-pastiglia);
  padding: 6px 10px;
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
}
.fascia__togli { color: var(--verde-medio); display: grid; place-items: center; }
.fascia--aggiungi {
  background: transparent;
  border: 1px dashed var(--bordo-campo);
  color: var(--testo-tenue);
}
/* Copia e incolla degli orari: stessa forma delle fasce, ma neutri,
   perche' non sono un orario, sono un attrezzo. */
.fascia--attrezzo {
  background: var(--crema);
  color: var(--testo-tenue);
}

/* La fascia che si compila invece di leggersi: i due orologi
   stanno dentro la stessa pastiglia verde delle altre. */
.fascia--orario { padding: 4px 6px 4px 8px; }
.fascia__tratto { color: var(--verde-medio); }
.campo-ora {
  background: var(--bianco);
  border: 1px solid var(--bordo-campo);
  border-radius: var(--r-controllo);
  padding: 4px 6px;
  font-size: var(--t-piccolo);
  font-family: inherit;
  color: var(--testo);
  min-height: 30px;
}
.campo-ora[data-errore="si"] { border-color: var(--rosso-testo); }

/* Una voce delle Informazioni: interruttore, nome modificabile e la
   riga che dice da dove viene il contenuto. */
.voce-informazione {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
}
.voce-informazione + .voce-informazione { border-top: 1px solid var(--filo); }
.voce-informazione > .interruttore { margin-top: 8px; }
.voce-informazione__corpo { flex: 1; min-width: 0; }
.voce-informazione__sotto {
  display: block;
  margin-top: 4px;
  font-size: var(--t-piccolo);
  color: var(--testo-debole);
  overflow-wrap: anywhere;
}

/* ---------- 27. Calendario del medico ---------- */

.calendario-medico {
  background: var(--bianco);
  border-radius: var(--r-card);
  padding: 14px;
  overflow-x: auto;
}
.calendario-medico__legenda {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}
.calendario-medico__voce-legenda { display: inline-flex; align-items: center; gap: 6px; }
.calendario-medico__pallino {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--colore-sede, var(--verde-card));
  flex: none;
}
.calendario-medico__griglia {
  display: grid;
  grid-template-columns: 54px repeat(var(--colonne-giorni, 7), minmax(78px, 1fr));
  gap: 1px;
  background: var(--filo);
  min-width: 620px;
}
.calendario-medico__cella { background: var(--bianco); min-height: 34px; padding: 2px; }
.calendario-medico__ora {
  background: var(--bianco);
  font-size: var(--t-minimo);
  color: var(--testo-debole);
  text-align: right;
  padding: 2px 6px 0 0;
}
.calendario-medico__intestazione {
  background: var(--bianco);
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  text-align: center;
  padding: 6px 0;
}
.evento {
  border-left: 3px solid var(--colore-sede, var(--verde-card));
  background: color-mix(in srgb, var(--colore-sede, var(--verde-card)) 12%, var(--bianco));
  border-radius: 6px;
  padding: 3px 5px;
  font-size: var(--t-minimo);
  font-weight: var(--peso-medio);
  line-height: 1.25;
  overflow: hidden;
}
/* Una chiusura e' rossa in tutte e tre le viste. A righine grigie si
   confondeva con lo sfondo, e cinque giorni chiusi somigliavano a
   cinque giorni liberi - che e' esattamente il contrario. */
.evento--ferie {
  border-left-style: solid;
  border-left-color: var(--rosso-testo);
  background: var(--rosso-tinta);
  color: var(--rosso-testo);
  font-weight: var(--peso-titolo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 719px) {
  .calendario-medico__griglia { grid-template-columns: 54px 1fr; min-width: 0; }
}

/* ---------- 28. Selettore di colore ---------- */

.scelta-colore {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 8px;
}
.scelta-colore__tassello {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-icona);
  background: var(--colore-sede);
  display: grid;
  place-items: center;
  color: var(--bianco);
  position: relative;
  min-height: 40px;
}
.scelta-colore__tassello[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--r-icona) + 3px);
  border: 2px solid var(--testo);
}
.scelta-colore__tassello[data-uso="occupato"],
.scelta-colore__tassello[data-uso="bloccato"] { opacity: 0.4; pointer-events: none; }

/* Il nome del colore scelto, sotto la fila. I tasselli da soli
   dicono la tinta ma non come si chiama, e senza nome chi non
   distingue bene i colori non sa che cosa ha selezionato. */
.scelta-colore__nome {
  display: block;
  margin-top: 8px;
  font-size: var(--t-piccolo);
  color: var(--testo-debole);
}
.scelta-colore__nome > span { display: block; }
.scelta-colore__presi { margin-top: 2px; font-size: var(--t-minimo); }

/* Il pallino del colore accanto al nome di una sede, negli elenchi:
   scegliendo il colore della seconda sede bisogna sapere a occhio
   quale ha la prima. */
.pallino-colore {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--colore-sede, var(--bordo-campo));
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
  flex: none;
}

/* ---------- 29. Pannello di condivisione del link ---------- */

.condividi-link > * + * { margin-top: 12px; }
.condividi-link__campo { display: flex; gap: 8px; align-items: stretch; }
.condividi-link__campo .campo-riga { flex: 1; }
.condividi-link__copia {
  padding: 0 16px;
  border-radius: var(--r-controllo);
  background: var(--verde-scuro);
  color: var(--bianco);
  font-size: var(--t-corpo);
  font-weight: var(--peso-titolo);
  min-height: var(--tocco-minimo);
  flex: none;
}
.condividi-link__canali { display: flex; gap: 8px; }
.condividi-link__canali > * { flex: 1; }
.condividi-link__spento {
  font-size: var(--t-minimo);
  color: var(--testo-debole);
  margin-top: 4px;
}

/* ---------- 30. Costruttore del menu del ruolo ---------- */

/* Una colonna sola, sempre. Su schermo largo si spezzava in due, e
   quello che ci si aspettava di trovare sotto compariva invece in
   alto a destra: l'ordine di lettura non corrispondeva piu'
   all'ordine delle cose. */
.builder { display: grid; grid-template-columns: 1fr; gap: 16px; }

.albero { background: var(--bianco); border-radius: var(--r-card); padding: 12px; }
.albero__voce {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-radius: var(--r-controllo);
  width: 100%;
  text-align: left;
  min-height: var(--tocco-minimo);
}
.albero__voce + .albero__voce { border-top: 1px solid var(--filo); }
.albero__voce[aria-selected="true"] { background: var(--selezione); }
.albero__voce[data-visibile="no"] { opacity: 0.5; }
/* La maniglia si tiene premuta e si trascina: `touch-action: none`
   dice al telefono che il dito che parte da qui non sta scorrendo
   la pagina, altrimenti il trascinamento non comincerebbe mai. */
.albero__maniglia {
  color: var(--testo-disabilitato);
  cursor: grab;
  touch-action: none;
  padding: 8px 4px;
  margin: -8px -4px;
  border-radius: var(--r-icona);
  flex: none;
}
.albero__voce[data-trascino="si"] {
  background: var(--selezione);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  position: relative;
  z-index: 2;
  border-top-color: transparent;
}
.albero__voce[data-trascino="si"] .albero__maniglia { cursor: grabbing; color: var(--verde-medio); }
/* Mentre una voce è in mano, le altre si fanno da parte con lo
   sguardo: si vede subito qual è quella che si sta spostando. */
.albero[data-riordino="si"] .albero__voce:not([data-trascino="si"]) { opacity: 0.55; }
.albero__segno {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--fondo-card, var(--verde-card));
  display: grid;
  place-items: center;
  color: var(--bianco);
  flex: none;
}
.albero__corpo { flex: 1; min-width: 0; }
.albero__titolo { font-size: var(--t-card); font-weight: var(--peso-titolo); }
.albero__riepilogo { font-size: var(--t-piccolo); color: var(--testo-debole); margin-top: 2px; }

/* Le indicazioni di una schermata: un riquadro che segue la
   larghezza della pagina.

   Aveva una misura massima in caratteri, pensata per la lettura, ma
   allargando la finestra restava fermo mentre tutto il resto si
   allargava, e sembrava rotto. La larghezza la decide adesso l'area
   di lavoro, che ha gia' la sua misura buona. `overflow-wrap` resta,
   perche' una parola lunghissima non deve sfondare il riquadro. */
.spiegazione-pagina {
  background: var(--bianco);
  border-radius: var(--r-card);
  padding: 13px var(--s-card);
  font-size: var(--t-corpo);
  color: var(--testo-tenue);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.spiegazione-pagina > p + p { margin-top: 7px; }

.nota-salvataggio {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  text-align: center;
  margin-top: 8px;
}

/* ---------- 31. Accesso ---------- */

.accesso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-schermo);
  background: var(--crema);
}
.accesso__card {
  background: var(--bianco);
  border-radius: var(--r-foglio);
  padding: 28px 24px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.accesso__marchio { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Il logo sopra il nome regge il peso di tutta la schermata, che
   non ha altro: a quarantotto sembrava un francobollo. */
.accesso__logo { width: 68px; height: 68px; }
.accesso__nome { font-size: var(--t-titolo-sezione); font-weight: var(--peso-numero); }
.accesso__etichetta { font-size: var(--t-piccolo); color: var(--testo-debole); }
.accesso__campi { width: 100%; display: flex; flex-direction: column; gap: 12px; }

/* Il logo accanto al nome nel menu. Il numero esce da un conto,
   non da un gusto: il menu è largo 150, dentro i margini restano
   130, e "FamilyDoctor" — tredici pixel, peso 800 — ne occupa 87.
   Al logo, con un solo pixel di stacco, ne restano 42, ed è quanto
   di più grande ci sta tenendo marchio e nome su una riga sola.
   Il prezzo lo paga l'allineamento: il nome parte a 53 invece che
   a 47 come le parole delle voci sotto, sei pixel più a destra.
   Per riaverli in colonna il logo dovrebbe tornare a 36. */
.menu-laterale__marchio img {
  width: 42px;
  height: 42px;
  /* I due margini negativi non sono uno scherzo del righello.
     Il marchio esce di sei pixel dal margine del menu, perche' e'
     un segno e non una voce d'elenco: puo' stare piu' a sinistra
     di tutto il resto. Gli altri due li mangia a destra perche'
     dentro il disegno c'e' un bordo trasparente, e perche' un
     segno tondo, alla quota delle lettere, ha gia' cominciato a
     curvare: contati dal bordo del riquadro i due sembravano
     lontani anche quando erano attaccati. */
  margin-left: -6px;
  margin-right: -2px;
}

/* ---------- Password in chiaro ----------
   Digitare una password lunga a puntini, su una tastiera piccola e
   senza vederla, è il modo più sicuro per sbagliarla tre volte e
   restare bloccati fuori per tre minuti. L'occhio sta dentro il
   campo e non ne cambia l'ingombro. */

.campo-con-occhio { position: relative; display: block; }
.campo-con-occhio .campo-riga { width: 100%; padding-right: 44px; }
.occhio {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--testo-debole);
}
.occhio:hover { color: var(--testo); }
.occhio .icona { width: 20px; height: 20px; }

/* ---------- 32. Tavolozza dei calendari di Google ----------
   Non è la palette dell'app: sono i colori fissi che Google
   Calendar mette a disposizione, e servono soltanto nel
   calendario del medico e nel selettore di colore. Il backend
   manda l'identificativo del colore, non il colore: è il foglio
   di stile a decidere la tinta, come per le categorie. */

[data-colore="1"]  { --colore-sede: #7986CB; }
[data-colore="2"]  { --colore-sede: #33B679; }
[data-colore="3"]  { --colore-sede: #8E24AA; }
[data-colore="4"]  { --colore-sede: #E67C73; }
[data-colore="5"]  { --colore-sede: #F6BF26; }
[data-colore="6"]  { --colore-sede: #F4511E; }
[data-colore="7"]  { --colore-sede: #039BE5; }
[data-colore="8"]  { --colore-sede: #616161; }
[data-colore="9"]  { --colore-sede: #3F51B5; }
[data-colore="10"] { --colore-sede: #0B8043; }
[data-colore="11"] { --colore-sede: #D50000; }

/* Il colore riservato alle ferie: bloccato nel selettore, così
   resta riconoscibile a colpo d'occhio e non toglie una tinta
   alla tavolozza delle sedi */
:root { --colore-ferie: #616161; }

/* ---------- 33. Marchio ----------
   "FamilyDoctor" con la seconda parola in arancio, come nella
   galleria di riferimento. Su fondo verde il testo diventa
   bianco ma l'accento resta arancio. */

/* Le due metà del nome sono due elementi distinti perché la seconda
   ha un colore suo, non perché siano due parole: fra loro non ci va
   spazio, altrimenti si legge "Family Doctor". */
.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-weight: var(--peso-numero);
  letter-spacing: -0.4px;
  color: var(--testo);
}
.marchio__accento { color: var(--arancio); }
.testata .marchio,
.menu-laterale .marchio,
.logo-su-verde .marchio { color: var(--bianco); }

/* Cerchietto con le iniziali, per elenchi di persone */
.iniziali {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--scheletro);
  color: var(--testo-tenue);
  font-size: var(--t-corpo);
  font-weight: var(--peso-titolo);
  flex: none;
}
.iniziali--attivo { background: var(--verde-tinta); color: var(--verde-scuro); }

/* Blocco d'apertura della conferma: la data in piccolo e l'ora
   grande su fondo verde, così il dato che conta si legge da
   lontano */
.eroe {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--verde-scuro);
  --fondo-blob: var(--verde-medio);
  color: var(--bianco);
  padding: 18px;
  text-align: center;
}
.eroe > *:not(.blob) { position: relative; }
.eroe__data { font-size: var(--t-corpo); color: var(--verde-avatar); margin-top: 4px; }
.eroe__ora { font-size: var(--t-numero-grande); font-weight: var(--peso-numero); line-height: 1.1; }

/* Cerchio bianco con la spunta, nelle schermate di esito */
.cerchio-esito {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bianco);
  color: var(--verde-scuro);
  display: grid;
  place-items: center;
  flex: none;
}

/* ---------- 34. Rifiniture di stato ---------- */

/* Annuncio importante in bacheca: filo arancione a sinistra */
[data-rilievo="si"].card-bianca {
  border-left: 4px solid var(--arancio);
}

/* Giorno corrente negli orari di apertura */
.editor-orari__giorno[aria-current="date"] .editor-orari__nome {
  font-weight: var(--peso-titolo);
  color: var(--verde-medio);
}

/* Avanzamento del wizard: la larghezza è discreta, non calcolata
   dal JavaScript, così nessuno stile viene scritto in linea */
[data-avanzamento="1"] { width: 12.5%; }
[data-avanzamento="2"] { width: 25%; }
[data-avanzamento="3"] { width: 37.5%; }
[data-avanzamento="4"] { width: 50%; }
[data-avanzamento="5"] { width: 62.5%; }
[data-avanzamento="6"] { width: 75%; }
[data-avanzamento="7"] { width: 87.5%; }
[data-avanzamento="8"] { width: 100%; }

/* Colonne del calendario del medico: settimana su computer,
   giorno su telefono */
[data-vista="settimana"] { --colonne-giorni: 7; }
[data-vista="giorno"]    { --colonne-giorni: 1; }

/* ---------- 34. Utilità di impaginazione, non di aspetto ---------- */

.riga { display: flex; align-items: center; gap: 8px; }
.riga--sparsa { justify-content: space-between; }
/* Le alternative sotto al riquadro di caricamento: stanno in fila
   se ci stanno, e vanno a capo quando lo schermo e' stretto. */
.riga--alternative { flex-wrap: wrap; gap: 4px 16px; padding: 2px 4px; }
/* Otto pixel vanno bene fra due righe di testo, ma fra due tasti da
   premere col pollice sono pochi: si sbaglia bersaglio. Le colonne
   che contengono azioni respirano di piu'. */
.colonna { display: flex; flex-direction: column; gap: 8px; }
.colonna > .bottone-azione + .bottone-azione,
.colonna > .bottone-azione + .bottone-riga,
.colonna > .bottone-riga + .bottone-azione { margin-top: 4px; }
.spinge { flex: 1; }
.centrato { text-align: center; }
.solo-lettura-schermo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- La "i" che spiega ----------
   Una nota lunga sotto ogni campo aiuta la prima volta e ingombra
   tutte le altre. Qui la spiegazione sta dietro un segno piccolo e
   si apre solo a chi la cerca. */

.spiega {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--verde-medio);
  color: var(--bianco);
  font-size: 11px;
  font-weight: var(--peso-titolo);
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.spiega:hover { background: var(--verde-scuro); }

/* La riga di una voce già inserita, con le sue due azioni */
.voce-inserita {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bianco);
  border-radius: var(--r-controllo);
  padding: 11px var(--s-card);
}
.voce-inserita__testo { flex: 1; min-width: 0; }
.voce-inserita__nome { font-weight: var(--peso-titolo); }
.voce-inserita__sotto { font-size: var(--t-piccolo); color: var(--testo-tenue); }