/* ============================================================
   FamilyDoctor - quello che vede solo il paziente.

   La testata verde con il medico, le tessere dei servizi, la
   striscia dei giorni per prenotare, la barra in fondo.

   Chi entra nell'area del medico o nel configuratore non scarica
   questo file.
   ============================================================ */

/* ---------- 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);
}
/* I due tondi della testata. Erano 28 px con un filo bianco
   trasparente tutti e due: sul verde scuro si vedevano poco, e due
   gesti diversi - chiamare, e cambiare la persona per cui si agisce -
   sembravano lo stesso tasto premuto due volte. Adesso sono pieni,
   piu' grandi del dito minimo, e di due tinte tenui gia' di casa qui
   dentro: nessuna delle due grida, ma non si confondono. */
.identita-medico__telefono {
  width: 36px;
  height: 36px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: none;
  background: var(--verde-avatar);
  color: var(--verde-scuro);
  flex: none;
}
.identita-medico__telefono--cambio {
  background: var(--ambra-tinta);
  color: var(--ambra-testo);
}
.identita-medico__telefono .icona { width: 18px; height: 18px; }
/* 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; }
/* Il nome di chi apre l'app e' la riga piu' importante della
   testata, e stava alla stessa misura di un titolo di sezione. */
.saluto__riga {
  font-size: var(--t-saluto);
  letter-spacing: -0.01em;
  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;
}

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

/* ---------- 12. Calendario e slot ---------- */

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

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

/* Il messaggio del periodo di vaccinazione, a capo come l'ha scritto
   il medico (2 novembre 2026). */
.campagna-periodo__testo { white-space: pre-line; }