/* ============================================================
   FamilyDoctor - i pezzi che servono a tutti.

   Bottoni, riquadri, moduli da compilare, avvisi, finestre
   sovrapposte, stati vuoti: le cose che compaiono tanto nell'area
   del paziente quanto in quelle del medico e del creatore.

   Si legge dopo `base.css`, che gli da' i colori e le misure.
   ============================================================ */

/* ---------- 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 {
  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,
.campagna-ticket,
.campagna-giorno,
.campagna-scelta {
  will-change: transform;
}

/* ---------- 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;
}

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

.card-appuntamento {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--verde-card);
  color: var(--bianco);
  padding: 14px var(--s-card);
}
/* Il cerchio verde solo senza colore scelto: messo qui per tutte,
   copriva quello del colore, e un ticket rosa aveva il cerchio verde. */
.card-appuntamento:not([data-colore]) { --fondo-blob: var(--verde-scuro); }
.card-appuntamento > *:not(.blob) { position: relative; }
/* Chi ha piu' di un appuntamento ne vede piu' d'uno, uno sotto
   l'altro e staccati: attaccati sembravano una scheda sola. */
.card-appuntamento + .card-appuntamento { margin-top: 10px; }
/* Il colore del bottone da cui viene l'appuntamento. */
.card-appuntamento[data-colore] { background: var(--fondo-card); }
/* L'orario l'ha cambiato il medico: arancione, cosi' si vede prima
   di leggere. Lo stesso arancione delle cose da guardare. */
/* Doppia classe: vince sul cerchio verde di serie e sul colore del
   bottone, che altrimenti coprivano l'arancione. */
.card-appuntamento.card-appuntamento--modificata {
  background: var(--arancio);
  --fondo-blob: var(--arancio-testo);
}

/* La scheda che apre Maps si tocca: il dito lo deve sapere prima di
   provarci. Non si aggiunge un tasto - la scheda intera e' il
   bersaglio - ma si dice che e' viva col cursore e con un contorno
   quando la si raggiunge da tastiera. */
.card-appuntamento--tocca { cursor: pointer; }
.card-appuntamento--tocca:focus-visible {
  outline: 3px solid var(--bianco);
  outline-offset: -3px;
}
.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-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' ambra come "in lavorazione": si aspetta ancora
   qualcosa. Il verde e' di quello che e' arrivato - evasa, la
   conversazione a cui il medico ha risposto, l'appuntamento
   confermato - cosi' il colore da solo dice se c'e' da aspettare. */
[data-stato="in-corso"].pastiglia-stato,
[data-stato="aspetta"].pastiglia-stato      { background: var(--ambra-tinta);  color: var(--ambra-testo); }
[data-stato="confermato"].pastiglia-stato,
[data-stato="evasa"].pastiglia-stato,
[data-stato="eseguita"].pastiglia-stato     { background: var(--verde-tinta);  color: var(--verde-medio); }
[data-stato="evaso"].pastiglia-stato,
[data-stato="letto"].pastiglia-stato        { background: var(--crema);        color: var(--testo-tenue); }
[data-stato="annullato"].pastiglia-stato,
[data-stato="non-accolta"].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); }
/* Una cosa da fare che e' in ritardo: un'attivita' domiciliare senza
   l'accesso del periodo, un promemoria di un giorno passato. */
[data-stato="urgente"].pastiglia-stato      { background: var(--rosso-tinta);  color: var(--rosso-testo); }

/* ---------- 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); }
/* Giallo: le cose da leggere, consenso e dissenso dei vaccini; grigio:
   cambiare una scelta senza allarme. */
.bottone-azione--giallo { background: var(--giallo-carta); color: var(--testo); --fondo-blob: var(--giallo-carta-blob); }
.bottone-azione--grigio { background: #ECEBE8; color: var(--testo); --fondo-blob: transparent; }
.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); }
/* I due riquadri-icona che si somigliano: quello delle righe lunghe
   della home e quello delle voci delle Informazioni. Stessa misura,
   stesso ritaglio - senza il quale la macchia decorativa esce dai
   bordi e va ad appoggiarsi dove capita. */
.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;
}
/* La macchia dietro l'icona usava il colore scuro della categoria, e
   l'icona bianca ci spariva dentro. Adesso e' un velo chiaro sopra
   la tinta: si vede che c'e', e non mangia il disegno. */
.voce-info__icona .blob,
.voce-navigazione__icona .blob { background: rgba(255, 255, 255, 0.24); }
.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); }

/* Le righe delle richieste in home, piu' grandi e col bordo del loro
   colore (2 novembre 2026): sono le notizie che il paziente cerca
   quando apre l'app. */
/* Le tre righe in fondo alla home del paziente («Le mie richieste»,
   «Accesso protetto», «Informazioni ed opzioni»): un po' piu' grandi
   del normale, meno delle notizie sulle richieste (2 novembre 2026). */
.voce-navigazione--media { padding: 13px var(--s-card); }
.voce-navigazione--media .voce-navigazione__icona { width: 40px; height: 40px; border-radius: 13px; }
.voce-navigazione--media .voce-navigazione__icona .icona { width: 20px; height: 20px; }
.voce-navigazione--media .voce-navigazione__titolo { font-size: calc(var(--t-corpo) + 1px); }
.voce-navigazione--grande {
  padding: 14px var(--s-card);
  border: 1.5px solid var(--fondo-card, var(--verde-tinta));
}
.voce-navigazione--grande .voce-navigazione__icona { width: 44px; height: 44px; border-radius: 14px; }
.voce-navigazione--grande .voce-navigazione__icona .icona { width: 22px; height: 22px; }
.voce-navigazione--grande .voce-navigazione__titolo { font-size: calc(var(--t-corpo) + 1px); }
.voce-navigazione[data-categoria="attesa"] .voce-navigazione__titolo { color: #633806; }
.voce-navigazione[data-categoria="attesa"] .voce-navigazione__sotto,
.voce-navigazione[data-categoria="attesa"] .voce-navigazione__freccia { color: var(--ambra-testo); }
.voce-navigazione[data-categoria="pronta"].voce-navigazione--grande .voce-navigazione__titolo { color: var(--verde-profondo); }
.voce-navigazione[data-categoria="non-accolta"] .voce-navigazione__titolo { color: #2C2C2A; }
.voce-navigazione[data-categoria="non-accolta"] .voce-navigazione__sotto { color: #5F5E5A; }
/* La notizia: si tocca per aprirla, e la X accanto la toglie. Due
   tasti affiancati, non uno dentro l'altro. */
.voce-notizia { padding-right: 6px; }
.voce-notizia__apri {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.voce-notizia__chiudi {
  flex: none;
  width: var(--tocco-minimo);
  height: var(--tocco-minimo);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--testo);
  cursor: pointer;
}

/* 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; }
/* Quello che sta dentro un cassetto aperto si stacca da quello che
   viene dopo: l'informativa privacy e' lunga, e la voce successiva
   - "I miei dati" - finiva incollata in fondo al suo testo e
   sembrava un suo sotto-tasto invece che una voce a se'. */
.fisarmonica__dentro {
  padding: 10px 12px 12px;
  margin-bottom: 10px;
  border-left: 3px solid var(--verde-tinta);
  background: var(--crema);
  border-radius: 0 var(--r-card-piccola) var(--r-card-piccola) 0;
}
.fisarmonica + .fisarmonica { margin-top: 8px; }
.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 {
  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;
}
/* Dentro una riga il pallino non galleggia sull'angolo: sta in fila
   con gli altri pezzi, spinto a destra. Questa regola stava sopra
   quella di partenza, e a parita' di peso vinceva l'ultima scritta:
   il pallino restava appeso all'angolo del riquadro piu' vicino, che
   quasi mai era il suo. */
.pallino-nuovi--in-riga {
  position: static;
  margin-left: auto;
  align-self: center;
  border: none;
}

/* Uno scambio intero dentro una scatola sola: la domanda in cima,
   sotto quello che e' seguito. Chi ha scritto si vede dal lato e dal
   colore della vignetta, 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); }
/* In testa al filo: il titolo e, a destra, lo stato della
   conversazione. */
.filo__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.filo__testa .filo__titolo { margin-bottom: 0; }
.filo__titolo {
  display: block;
  font-size: var(--t-minimo);
  color: var(--testo-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 7px;
}
/* Le battute sono vignette: chi guarda ha le sue a
   destra, su fondo verde chiaro; quelle dell'altro stanno a sinistra,
   su fondo grigio. Gli angoli sono quelli dei tasti, non tondi. */
.filo__battuta {
  display: block;
  width: fit-content;
  max-width: 85%;
  padding: 7px 11px 8px;
  border-radius: var(--r-controllo);
}
.filo__battuta + .filo__battuta { margin-top: 8px; }
.filo__battuta--mia { margin-left: auto; background: var(--vignetta-mia); }
.filo__battuta--altrui { margin-right: auto; background: var(--vignetta-altrui); }
/* Con dei file dentro, la vignetta prende tutta la sua larghezza: le
   miniature stanno in griglia, e in una vignetta stretta si
   metterebbero in colonna. */
.filo__battuta:has(.anteprime, .file-studio) { width: 85%; }
.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);
}
/* L'informativa del primo accesso, chiusa finche' non la si tocca. */
.informativa-piega__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--tocco-minimo);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-card-titolo);
  font-weight: var(--peso-titolo);
  color: var(--verde-scuro);
}
.informativa-piega__testa::-webkit-details-marker { display: none; }
.informativa-piega__freccia { transition: transform 0.15s; }
.informativa-piega[open] .informativa-piega__freccia { transform: rotate(180deg); }
.informativa-piega__testo { margin-top: 10px; text-align: left; }
.informativa-piega { margin-bottom: 16px; }

/* I tre passi per aggiungere l'app alla schermata Home dell'iPhone:
   il numero, il disegno che si trova sullo schermo, e cosa fare. */
.passi-installa { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.passi-installa__passo { display: flex; align-items: center; gap: 10px; font-size: var(--t-card); line-height: 1.4; }
.passi-installa__numero {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--verde-tinta);
  color: var(--verde-scuro);
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.passi-installa__icona {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--selezione);
  color: #0A7AFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La foto allegata a un messaggio, sotto il suo testo. */
.filo__foto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 5px 10px 5px 5px;
  border-radius: 10px;
  background: var(--selezione);
  border: 1px solid var(--verde-tinta);
  color: var(--verde-scuro);
  font-size: var(--t-piccolo);
  font-weight: var(--peso-medio);
  text-decoration: none;
}
.filo__foto-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--verde-tinta);
}
/* Il riquadro per scrivere un messaggio e' la parte principale della
   pagina: alto, e sotto solo due tasti piccoli per la foto. */
.campo-testo.campo-testo--messaggio { min-height: 220px; }
.foto-scelta { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* Dal computer: un file trascinato sopra il riquadro degli allegati. */
.allegati--sopra {
  outline: 2px dashed var(--verde-scuro);
  outline-offset: 6px;
  border-radius: var(--r-controllo);
  background: var(--verde-tinta);
}
.foto-scelta__tasti { display: flex; flex-wrap: wrap; gap: 8px; }
.foto-scelta__tasto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid var(--bordo-campo);
  background: var(--bianco);
  color: var(--verde-scuro);
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
}
.foto-scelta__nota { font-size: var(--t-piccolo); color: var(--testo-tenue); }
.foto-scelta__allegata {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bianco);
  border: 1px solid var(--bordo-campo);
  border-radius: var(--r-controllo);
  padding: 8px;
}
.foto-scelta__anteprima {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
  background: var(--verde-tinta);
}
.foto-scelta__dati { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.foto-scelta__nome { font-size: var(--t-corpo); font-weight: var(--peso-medio); }
.foto-scelta__peso { font-size: var(--t-piccolo); color: var(--testo-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Il file che sale in sottofondo, e quello che non e' partito: si
   tocca la riga per riprovare (2 novembre 2026). */
.foto-scelta__barra { height: 4px; margin-top: 6px; }
.foto-scelta__allegata[data-stato="errore"] { border-color: var(--rosso-testo); }
.foto-scelta__allegata[data-stato="errore"] .foto-scelta__peso { color: var(--rosso-testo); font-weight: var(--peso-medio); }
.foto-scelta__allegata[data-stato="errore"] .foto-scelta__dati { cursor: pointer; }
.foto-scelta__togli {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 22px;
  background: var(--rosso-tinta);
  color: var(--rosso-testo);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* «I miei dati», in fondo all'informativa: un titolo piccolo e una
   riga che lo separa dal testo sopra. */
.cassetto__sottotitolo {
  margin: 18px 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--bordo-campo);
  font-size: var(--t-card);
  font-weight: var(--peso-medio);
  color: var(--verde-scuro);
}

/* Gli allegati scelti dal paziente, uno sotto l'altro. */
.allegati__elenco { display: flex; flex-direction: column; gap: 6px; }
.allegati__elenco:empty { display: none; }
.allegati .foto-scelta__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allegati__icona { display: grid; place-items: center; color: var(--verde-scuro); }

/* Le anteprime degli allegati, dalla parte del medico. */
.anteprime { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.anteprime__griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.anteprime__voce {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid var(--bordo-campo);
  border-radius: var(--r-controllo);
  background: var(--filo);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: inherit;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}
.anteprime__voce img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anteprime__voce--documento { color: var(--verde-scuro); }
.anteprime__voce--documento span { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.anteprime__voce--attesa {
  background: linear-gradient(90deg, var(--filo), var(--bordo-campo), var(--filo));
  background-size: 200% 100%;
  animation: anteprima-attesa 1.2s linear infinite;
}
@keyframes anteprima-attesa { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .anteprime__voce--attesa { animation: none; } }
/* Di un documento la prima pagina, fatta da Drive, col nome in una
   striscia in fondo. */
.anteprime__voce--pagina { position: relative; justify-content: flex-start; }
.anteprime__voce--pagina img { height: 100%; }
.anteprime__nome {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* A destra resta il posto per la freccia che scarica. */
  padding: 3px 38px 3px 6px;
  text-align: left;
  background: rgba(255, 255, 255, 0.92);
  color: var(--verde-scuro);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Nel visore, quando la foto intera non si puo' mostrare. */
.visore__avviso {
  position: absolute;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  text-align: center;
  color: #fff;
  font-size: var(--t-piccolo);
}
.visore__avviso:empty { display: none; }

/* La foto grande, sopra tutto. */
.visore {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.visore__foto { max-width: 100%; max-height: 100%; object-fit: contain; }
.visore__conto {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: var(--t-card);
}
.visore__tasto {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.visore__tasto[hidden] { display: none; }
.visore__chiudi { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; font-size: 20px; }
.visore__prima { left: 10px; top: 50%; transform: translateY(-50%); }
.visore__dopo { right: 10px; top: 50%; transform: translateY(-50%); }

/* L'invito e, sulla stessa riga a destra, il tasto rosso Elimina. */
.filo__piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}
.filo__piede .filo__invito { margin-top: 0; }
.filo__elimina {
  flex: none;
  padding: 6px 12px;
  border-radius: var(--r-controllo);
  background: var(--rosso);
  color: var(--bianco);
  font-size: var(--t-piccolo);
  font-weight: var(--peso-titolo);
}

/* ---------- 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.

   Dall'altra parte c'era il problema opposto, e nessuno lo teneva:
   su uno schermo largo le colonne continuavano a crescere insieme
   alla finestra. Una visita di venti minuti diventava un blocco
   lungo un palmo, e la settimana si leggeva peggio che su un
   portatile. Oltre una certa larghezza la griglia smette di
   allargarsi e si mette in mezzo: e' la misura in cui una settimana
   si legge, e piu' spazio non la migliora.

   Sul computer, le colonne partono dalla misura
   con due visite affiancate, anche quando non se ne accavalla
   nessuna: Nicola la preferisce. Su uno schermo stretto la settimana
   scorre di lato, come gia' faceva con due visite affiancate. Sul
   telefono valgono le regole sue, piu' sotto. */
.settimana-cal {
  display: grid;
  grid-template-columns: 46px repeat(var(--giorni, 7), minmax(calc(74px + 56px * (max(var(--corsie, 1), 2) - 1)), 1fr));
  gap: 1px;
  background: var(--filo);
  border-radius: var(--r-controllo);
  overflow-x: auto;
  overflow-y: hidden;
  max-width: calc((940px + 392px * (max(var(--corsie, 1), 2) - 1)) * var(--giorni, 7) / 7);
  margin-inline: auto;
}
.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;
  min-height: var(--alta-ora, 34px);
  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) * var(--alta-ora, 34px));
  display: flex;
  flex-direction: column;
}
.settimana-cal__riga { flex: 1; border-top: 1px solid var(--filo); }
/* Le ore di apertura delle sedi (2 novembre 2026): verde chiaro come
   il giorno di oggi, e oggi bianche. Stanno sotto le righe delle ore
   e sotto gli appuntamenti, e il tocco le attraversa. */
.settimana-cal__pista { isolation: isolate; }
.settimana-cal__aperto {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  background: var(--verde-tinta);
  pointer-events: none;
}
.settimana-cal__colonna--oggi .settimana-cal__aperto { background: var(--bianco); }
/* Il riquadro di un appuntamento: l'ora in piccolo, poi chi e' e per
   che cosa. Il colore e' quello della sua sede - lo stesso della
   pastiglia nella legenda - e non piu' un verde uguale per tutte: con
   due ambulatori non si capiva dove fosse la visita.

   L'altezza gliela da' l'orario, e l'ora della griglia e' bassa e
   fissa (vedi `ALTEZZA_ORA`): una visita corta e' una striscia col
   solo cognome, e i dettagli stanno nella finestrella. */
.settimana-cal__evento {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 5px;
  padding: 3px 5px;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
  /* Il colore del ruolo o del tipo, se scelto; se no quello della
     sede. La sede resta comunque nella striscia a sinistra, e un bordo
     bianco separa due riquadri affiancati o uno dopo l'altro. */
  background: var(--colore-evento, var(--colore-sede, var(--verde-medio)));
  color: var(--testo-sede, var(--bianco));
  border: 1px solid var(--bianco);
  border-left: 4px solid var(--colore-sede, var(--verde-medio));
  min-height: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.settimana-cal__evento--tinto { color: var(--bianco); }
.settimana-cal__ora-evento { font-size: 9px; opacity: 0.85; }
/* Una riga sola, per le visite sotto l'ora: strisce basse. */
.settimana-cal__evento--corto { padding: 1px 4px; justify-content: center; }
.settimana-cal__chi {
  font-weight: var(--peso-titolo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settimana-cal__che {
  font-size: 9px;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 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);
}
/* Un blocco delle prenotazioni: rosso come una chiusura, perche'
   chiude quelle ore, ma a righe, perche' il resto del giorno e'
   aperto. */
.settimana-cal__evento--blocco {
  background: repeating-linear-gradient(135deg, var(--rosso-tinta) 0 6px, var(--bianco) 6px 10px);
  color: var(--rosso-testo);
  box-shadow: inset 0 0 0 1px var(--rosso-testo);
  font-weight: var(--peso-titolo);
}

/* ---------- La settimana sul telefono ----------
   Come in Google Calendar: la griglia arriva quasi ai bordi dello
   schermo, e si sceglie fra tre giorni e sette (medico-agenda.js,
   `giorniSulTelefono`). A sette giorni le colonne stanno tutte nello
   schermo, senza scorrere di lato: testo piccolo che va a capo, e le
   visite corte sono barrette. In alto una fila per quello che dura
   tutto il giorno, e una linea rossa per l'ora di adesso. */
.calendario-medico--telefono { padding: 8px 4px; margin-inline: calc(4px - var(--s-schermo)); }
.settimana-cal--telefono { max-width: none; margin-inline: 0; }
.settimana-cal--sette { grid-template-columns: 20px repeat(var(--giorni, 7), minmax(0, 1fr)); overflow-x: hidden; }
.settimana-cal--tre { grid-template-columns: 34px repeat(var(--giorni, 3), minmax(calc(74px + 56px * (var(--corsie, 1) - 1)), 1fr)); }
.settimana-cal--sette .settimana-cal__testa { height: 32px; white-space: pre-line; line-height: 1.15; text-align: center; font-size: 10px; }
.settimana-cal--telefono .settimana-cal__ora { font-size: 9px; padding-right: 2px; }
.settimana-cal--sette .settimana-cal__evento {
  left: 1px; right: 1px; padding: 1px 2px; gap: 0;
  border-left-width: 2px; border-radius: 3px;
  font-size: 9px; line-height: 1.1; min-height: 4px;
}
.settimana-cal--sette .settimana-cal__evento--corto { justify-content: flex-start; }
/* Va a capo fra una parola e l'altra, non dentro: un cognome spezzato
   a meta' in un riquadro basso lasciava leggere solo «Colom». Quello
   che non ci sta si taglia al bordo. */
.settimana-cal--telefono .settimana-cal__chi { white-space: normal; overflow-wrap: normal; word-break: normal; }
.settimana-cal--sette .settimana-cal__chi { font-size: 9px; }
.settimana-cal__interi {
  height: calc(var(--interi, 1) * 18px + 2px);
  padding: 1px;
  display: flex; flex-direction: column; gap: 1px;
  border-bottom: 1px solid var(--filo);
  overflow: hidden;
}
.settimana-cal__intero {
  height: 17px; flex: none;
  border-radius: 3px; padding: 0 3px;
  font-size: 9px; font-weight: var(--peso-titolo); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--rosso-tinta); color: var(--rosso-testo);
  box-shadow: inset 0 0 0 1px var(--rosso-testo);
  cursor: pointer;
}
.settimana-cal__intero--blocco { background: repeating-linear-gradient(135deg, var(--rosso-tinta) 0 6px, var(--bianco) 6px 10px); }
.settimana-cal__colonna--chiusa .settimana-cal__pista { background: color-mix(in srgb, var(--rosso-tinta) 45%, transparent); }
.settimana-cal__adesso {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--rosso-testo);
  z-index: 2; pointer-events: none;
}
.settimana-cal__adesso::before {
  content: ''; position: absolute; left: -3px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rosso-testo);
}

/* I promemoria in calendario: gialli, col bordo piu' scuro. */
.settimana-cal__evento--promemoria {
  --colore-evento: #FBE7A6;
  --colore-sede: #E0B13A;
  color: #5C4200;
}
.settimana-cal__intero--promemoria { background: #FBE7A6; color: #5C4200; box-shadow: inset 0 0 0 1px #E0B13A; }
/* I periodi di vaccinazione: una striscia verde in cima ai giorni. */
.settimana-cal__evento--periodo {
  --colore-evento: var(--verde-card);
  --colore-sede: var(--verde-scuro);
  color: var(--bianco);
}
.settimana-cal__intero--periodo { background: var(--verde-card); color: var(--bianco); }

/* ---------- Il calendario a mese ----------
   Come la settimana: oltre una certa larghezza la griglia smette di
   crescere e si mette in mezzo. La casella e' quadrata, quindi ogni
   pixel di larghezza in piu' era anche un pixel di altezza in piu':
   su uno schermo largo un mese si prendeva tutta la pagina per
   scriverci dentro trenta numeri. */
.mese-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  max-width: 880px;
  margin-inline: auto;
}
.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;
  /* Il numero in cima e i riquadrini sotto, non tutto in mezzo: con
     tre righe da scrivere il centro non e' piu' un posto. */
  justify-content: flex-start;
  gap: 3px;
  padding: 6px 5px 5px;
  overflow: hidden;
}
/* Un giorno vuoto tiene il numero in mezzo come prima: e' quando c'e'
   qualcosa scritto sotto che il numero deve salire in cima. */
.mese-cal__giorno:not(:has(.mese-cal__badge-pila)) {
  justify-content: center;
  padding-block: 5px;
}
.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); flex: none; }

/* I riquadrini del giorno: ora e cognome, uno per riga, coi colori
   della settimana (il ruolo, il tipo o la sede; la sede nella striscia
   a sinistra). Se non ci stanno tutti, se ne scrivono due e la terza
   riga dice quanti restano fuori. */
.mese-cal__badge-pila {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}
.mese-cal__badge {
  display: block;
  border-radius: 4px;
  padding: 1px 4px;
  background: var(--colore-evento, var(--colore-sede, var(--verde-medio)));
  color: var(--testo-sede, var(--bianco));
  border-left: 3px solid var(--colore-sede, var(--verde-medio));
  font-size: 9.5px;
  font-weight: var(--peso-medio);
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Un blocco delle prenotazioni e un promemoria, come nella settimana. */
.mese-cal__badge--blocco {
  background: repeating-linear-gradient(135deg, var(--rosso-tinta) 0 6px, var(--bianco) 6px 10px);
  color: var(--rosso-testo);
  border-left-color: var(--rosso-testo);
}
.mese-cal__badge--promemoria {
  --colore-evento: #FBE7A6;
  --colore-sede: #E0B13A;
  color: #5C4200;
}
/* "e altri quattro" non e' un appuntamento: niente colore di sede,
   niente barretta. E' un conto. */
.mese-cal__badge--altri {
  background: transparent;
  border-left: 0;
  color: var(--testo-tenue);
  font-weight: var(--peso-titolo);
  padding-left: 6px;
}
/* Il pallino col totale e i riquadrini dicono la stessa cosa in due
   modi, e non si vedono mai insieme: dove la casella e' larga si
   vedono i riquadrini, dove e' stretta il pallino. */
.mese-cal__giorno:has(.mese-cal__badge-pila) > .mese-cal__conto { display: none; }
.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; }

/* La X che toglie un invito. Sta all'estremo destro della riga, e non
   e' un bottone che si vede: prende il colore dell'avviso e resta un
   gradino piu' chiara, perche' e' l'uscita, non la proposta. Il
   margine negativo la porta al bordo del riquadro senza stringere il
   testo, e i dodici pixel di padding le danno un bersaglio da dito
   anche se il segno disegnato e' piccolo. */
.avviso__chiudi {
  margin: -6px calc(var(--s-card) * -1 + 2px) -6px auto;
  padding: 6px 12px;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  flex: none;
}

/* 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); }
/* Il testo scritto a mano, con gli a-capo che ha: una riga vuota e'
   un capoverso, e il grassetto si vede. */
.testo-formattato { white-space: pre-wrap; overflow-wrap: anywhere; }
.testo-formattato strong { font-weight: var(--peso-titolo); }
.avviso--errore { background: var(--arancio-tinta); color: var(--arancio-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; }
.scelta:has(input:disabled) { opacity: 0.5; }

/* ---------- Le quattro caselle del codice ----------
   Larghe quanto basta a prenderle col pollice, e distanti fra loro:
   sbagliare casella su una tastiera numerica e' facilissimo. */
.caselle-codice { display: flex; gap: 8px; }
.casella-codice {
  width: 100%;
  max-width: 56px;
  height: 56px;
  border-radius: var(--r-controllo);
  border: 2px solid var(--bordo-campo);
  background: var(--bianco);
  color: var(--verde-scuro);
  font-family: var(--font);
  font-size: 22px;
  font-weight: var(--peso-numero);
  text-align: center;
  padding: 0;
}
/* Piena si vede: il bordo verde chiaro dice "questa c'e' gia'"
   senza mostrare la cifra. */
.casella-codice[data-piena="si"] { border-color: var(--verde-card); }
.casella-codice:focus {
  outline: none;
  border-color: var(--verde-scuro);
  box-shadow: 0 0 0 3px var(--verde-tinta);
}
/* Le frecce del campo numerico non servono e rubano spazio. */
.casella-codice::-webkit-outer-spin-button,
.casella-codice::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Centrate quando sono da sole in mezzo a una pagina - la schermata
   in cui si entra - e a sinistra quando stanno dentro un modulo
   insieme agli altri campi. */
.caselle-codice--centro { justify-content: center; }

/* ---------- Per conto di chi mi contatti ----------
   Le righe erano tre rettangoli bianchi uguali con un tondino grigio
   a sinistra: il tondino e' il segno di una scelta a radio, ma qui
   non si compila niente, si entra in casa di qualcuno. Al suo posto
   le iniziali, che a colpo d'occhio dicono di chi si parla. */
.persona-scelta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--bianco);
  border-radius: var(--r-card);
  padding: 12px;
  min-height: var(--tocco-minimo);
}
.persona-scelta__tondo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--verde-avatar);
  color: var(--verde-scuro);
  display: grid;
  place-items: center;
  font-size: var(--t-card-titolo);
  font-weight: var(--peso-numero);
  flex: none;
}
/* Chi ha il link in mano si distingue dai familiari: e' casa sua. */
.persona-scelta--io .persona-scelta__tondo {
  background: var(--verde-card);
  color: var(--bianco);
}
.persona-scelta__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.persona-scelta__eti {
  font-size: var(--t-minimo);
  font-weight: var(--peso-titolo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verde-scuro);
  margin-bottom: 1px;
}
.persona-scelta__nome { font-size: var(--t-card-titolo); font-weight: var(--peso-titolo); }
.persona-scelta__sotto { font-size: var(--t-piccolo); color: var(--testo-debole); margin-top: 1px; }

/* 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; }
/* Il riquadro cresce con quello che c'e' scritto, senza la barra per
   scorrere: l'altezza la mette `adattaAltezza`, qui c'e' il minimo. */
.campo-testo { min-height: 66px; height: 66px; overflow-y: hidden; }
.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); }

/* Il campo data con l'icona del calendario a destra. Sopra l'icona
   sta un campo data vero, trasparente: e' lui che riceve il tocco e
   apre il calendario del dispositivo. */
.campo-con-calendario { position: relative; display: block; }
.campo-con-calendario .campo-riga { padding-right: 48px; }
.tasto-calendario {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--verde-card);
  border-radius: 50%;
}
.tasto-calendario .icona { width: 22px; height: 22px; pointer-events: none; }
.tasto-calendario input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
}
.tasto-calendario input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.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);
}

/* ---------- 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;
}

/* ---------- 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;
}

/* ---------- 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__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;
}

/* Un numero che si puo' chiamare si vede che si puo' chiamare: e' del
   verde dell'app, mentre il resto della riga e' nero. Senza
   sottolineatura, che qui non la usa nessuno. */
.chiamabile { color: var(--verde-scuro); font-weight: var(--peso-medio); }

.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; }
/* Un elenco dentro una finestra: una riga per cosa, coi pallini. */
.elenco-finestra { margin: 0; padding-left: 20px; display: grid; gap: 4px; text-align: left; font-size: var(--t-piccolo); }
.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; }
}

/* La barra di avanzamento di chi manda un file: stessa scatola del
   velo, ma in colonna, con la barra sotto la scritta. Il riempimento
   lo dice una variabile che il programma aggiorna man mano. */
.attesa__scatola--colonna {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 220px;
}
.avanzamento {
  display: block;
  height: 8px;
  border-radius: var(--r-controllo);
  background: var(--verde-tinta);
  overflow: hidden;
}
.avanzamento__pieno {
  display: block;
  height: 100%;
  width: var(--avanzamento, 0%);
  border-radius: inherit;
  background: var(--verde-card);
  transition: width 0.2s linear;
}
.avanzamento__percento {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  text-align: right;
}

.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); }

/* ---------- 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 { 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;
}

/* ---------- 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; }
/* 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; }

/* ---------- 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); }

/* ---------- Il mese su schermo stretto ----------
   Sette colonne dentro un telefono fanno caselle larghe un'unghia: i
   riquadrini non ci stanno, e scriverli comunque vorrebbe dire
   scriverli illeggibili. Si torna al pallino col totale, che e'
   quello che c'era prima e che li' funziona. */
@media (max-width: 719px) {
  .mese-cal__badge-pila { display: none; }
  .mese-cal__giorno:has(.mese-cal__badge-pila) > .mese-cal__conto { display: inline-flex; }
  .mese-cal__giorno { justify-content: center; padding: 5px 3px; }
}

/* La barra che scorre senza numero: si aspetta, ma non si sa quanto. */
.avanzamento--scorre .avanzamento__pieno {
  width: 35%;
  animation: avanzamento-scorre 1.2s ease-in-out infinite;
}
@keyframes avanzamento-scorre {
  from { transform: translateX(-100%); }
  to { transform: translateX(290%); }
}
@media (prefers-reduced-motion: reduce) {
  .avanzamento--scorre .avanzamento__pieno { animation: none; width: 100%; opacity: 0.5; }
}

/* ---------- La campagna vaccinale, dal lato del paziente ---------- */
.campagna-riga { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-card); }
.campagna-riga span { color: var(--testo-tenue); }
.campagna-riga strong { font-weight: var(--peso-medio); text-align: right; }
.campagna-invito { display: flex; flex-direction: column; gap: 6px; }
/* Nel bottone della campagna il testo occupa tutto il riquadro: la
   misura di 30 caratteri e' delle scritte brevi delle pagine vuote, e
   qui mandava a capo il messaggio a meta' riga. */
.campagna-pagina .stato-pieno__riga { max-width: none; }
/* Il messaggio del medico si legge come il testo normale: e' la cosa
   piu' importante della pagina, e in grigio piccolo sembrava una nota. */
.campagna-invito .stato-pieno__riga { color: var(--testo); }
/* La domanda: il nome del vaccino in evidenza, i due tasti compatti
   uno accanto all'altro. */
.campagna-domanda__nome { font-size: var(--t-card-titolo); font-weight: var(--peso-titolo); }
.campagna-risposta { gap: 8px; }
/* Consenso e dissenso informato, in fondo alla pagina delle vaccinazioni. */
.campagna-documenti { margin-top: 8px; }
/* Gialli (prima bianchi col bordo): le cose da leggere. */
.campagna-documenti > .bottone-azione { min-height: 44px; font-size: var(--t-piccolo); }
.campagna-documento { text-align: left; background: var(--bianco); border-radius: var(--r-controllo); padding: 12px; font-size: var(--t-piccolo); max-height: 40vh; overflow-y: auto; }
.campagna-letto { gap: 10px; align-items: center; font-size: var(--t-card); }
.campagna-letto input { width: 22px; height: 22px; flex: 0 0 auto; }
.campagna-risposta > .bottone-azione { flex: 0 0 auto; width: auto; min-width: 0; min-height: 40px; padding: 8px 16px; font-size: var(--t-piccolo); }
/* Le risposte date: il vaccino a sinistra, la risposta a destra. */
.campagna-risposte { gap: 8px; }
.campagna-risposte__riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--t-card); }
.campagna-risposte__nome { font-weight: var(--peso-medio); }
/* La risposta come pastiglia, la stessa forma delle etichette
   «fragile» e «ADI» degli elenchi delle vaccinazioni (22 ottobre
   2026): fondo tinta e scritta scura, verde il si', rossa il no. */
.campagna-risposte__stato {
  display: inline-block; padding: 1px 10px; border-radius: var(--r-pastiglia);
  font-size: var(--t-piccolo); font-weight: var(--peso-medio); white-space: nowrap;
}
.campagna-risposte__stato--si { background: var(--verde-tinta); color: var(--verde-scuro); }
.campagna-risposte__stato--no { background: var(--rosso-tinta); color: var(--rosso-testo); }
/* «Cambia risposta» largo quanto la sua scritta, staccato dal nome
   del vaccino, e un gradino piu' piccolo del bottone normale. */
.campagna-risposte__cambia {
  align-self: flex-start; width: auto; margin-top: 8px;
  padding: 9px 14px; min-height: 36px; font-size: var(--t-piccolo);
}
.campagna-titolo { margin: 6px 0 0; font-size: var(--t-titolo-sezione); font-weight: var(--peso-titolo); }
.campagna-nota { font-size: var(--t-piccolo); color: var(--testo-tenue); }
.campagna-scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.campagna-scelta {
  font: inherit; font-size: var(--t-card); padding: 9px 14px; min-height: 40px;
  border-radius: 20px; border: 1px solid var(--bordo-campo); background: var(--bianco); color: var(--testo);
}
.campagna-scelta[aria-pressed="true"] { background: var(--verde-scuro); border-color: var(--verde-scuro); color: var(--bianco); font-weight: var(--peso-medio); }
.campagna-giorno {
  font: inherit; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px; border-radius: var(--r-card); border: 1.5px solid var(--verde-medio); background: var(--bianco); color: var(--testo);
}
.campagna-giorno:disabled { background: var(--scheletro); color: var(--testo-debole); border-color: var(--bordo-campo); }
.campagna-giorno__testo { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; font-size: var(--t-piccolo); color: var(--testo-tenue); }
.campagna-giorno__testo strong { font-size: var(--t-card-titolo); font-weight: var(--peso-medio); color: inherit; }
.campagna-giorno:not(:disabled) .campagna-giorno__testo strong { color: var(--testo); }
.campagna-giorno__posti { font-size: var(--t-piccolo); font-weight: var(--peso-medio); color: var(--verde-scuro); white-space: nowrap; }
.campagna-giorno:disabled .campagna-giorno__posti { color: var(--testo-debole); }
/* Il numero, grande, come in sala d'attesa. */
.campagna-ticket {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px;
  border-radius: var(--r-foglio); background: var(--verde-scuro); color: var(--bianco); font-size: var(--t-card);
}
.campagna-ticket strong { font-size: 64px; font-weight: var(--peso-numero); line-height: 1; }
.campagna-prendi { font-size: 16px; padding-top: 16px; padding-bottom: 16px; }

/* I file che manda lo studio, sotto la sua risposta. */
.file-studio { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.file-studio__titolo { font-size: var(--t-minimo); font-weight: var(--peso-titolo); color: var(--testo-tenue); text-transform: uppercase; letter-spacing: 0.05em; }
.file-studio__riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.file-studio__file {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  background: var(--bianco); box-shadow: inset 0 0 0 1px var(--filo); font: inherit; color: var(--verde-scuro); cursor: pointer; text-align: left;
}
.file-studio__apri { font-weight: var(--peso-titolo); color: var(--verde-scuro); }
.file-studio__foto { display: block; width: 100%; max-width: 320px; border-radius: 10px; }