/* La sezione «Pazienti» della webapp (pazienti.js): l'elenco e la scheda.

   Si carica dopo webapp.css e ne segue le regole: ogni cosa da toccare è
   alta almeno 44 px, i campi hanno caratteri da 16 px, i colori sono quelli
   dello studio (css/colori.css), e niente allarga la pagina: le griglie
   hanno colonne minmax(0, 1fr) e le righe lunghe finiscono coi puntini. */

/* Ogni griglia qui ha la colonna minmax(0, 1fr): di suo una colonna si
   allarga quanto il testo più lungo che non va a capo (un nome di
   prestazione in una pastiglia), e porterebbe la pagina fuori dallo schermo. */

/* ============ la ricerca e le viste ============ */

.paz-cerca { position: relative; display: flex; align-items: center; margin: 0 0 10px; }
.paz-cerca > svg { position: absolute; left: 13px; width: 19px; height: 19px; color: var(--testo-3); pointer-events: none; }
html[data-guscio="telefono"] input[type="search"].paz-cerca__campo { width: 100%; padding-left: 40px; background: var(--carta); }

/* le viste: una fila che scorre di lato se non ci sta, mai la pagina */
.paz-viste {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--margine)) 8px; padding: 2px var(--margine) 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.paz-viste::-webkit-scrollbar { display: none; }
.paz-vista {
  position: relative; flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--bordo-forte); background: var(--carta); color: var(--testo-2);
  font: inherit; font-weight: 650; font-size: 14px; cursor: pointer; touch-action: manipulation;
}
/* si vede alta 40, si tocca su 44 */
.paz-vista::after { content: ''; position: absolute; inset: -2px 0; }
.paz-vista[aria-pressed="true"] { background: var(--blu-chiaro); border-color: var(--blu-bordo); color: var(--blu-scuro); }
/* sui telefoni le quattro viste ci stanno tutte senza scorrere (fino a 320 px) */
@media (max-width: 400px) {
  .paz-viste { gap: 6px; }
  .paz-vista { padding: 0 12px; }
}
.paz-conta { margin: 0 2px 10px; }
.paz-conta:empty { display: none; }
.paz-risultati { min-width: 0; transition: opacity .15s; }
.paz-risultati--carica { opacity: .55; }

/* ============ l'elenco ============ */

.paz-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.paz-riga {
  display: flex; align-items: center; gap: 4px; min-width: 0; padding-right: 8px;
  border: 1px solid var(--bordo); border-radius: 14px; background: var(--carta); box-shadow: var(--ombra-1);
}
.paz-riga__apri {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 9px 4px 9px 12px;
  border: 0; border-radius: 14px; background: none; text-align: left; color: var(--testo); font: inherit;
  cursor: pointer; touch-action: manipulation;
}
.paz-riga__apri:active { background: var(--blu-tenue); }
.paz-riga__testo { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.paz-riga__nome { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 16px; }
.paz-riga__nome strong { min-width: 0; }
.paz-riga__nome .etichetta { flex: none; }
.paz-riga__info, .paz-riga__quando { font-size: 13px; color: var(--testo-2); }
.paz-riga__quando--prossimo { color: var(--blu); font-weight: 600; }
html[data-guscio="telefono"] .paz-riga__chiama { flex: none; border-radius: 50%; border-color: transparent; background: var(--blu-tenue); color: var(--blu); box-shadow: none; }
.paz-iniziali {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-weight: 700; font-size: 14px; background: var(--blu-tenue); color: var(--blu-scuro); border: 1px solid var(--blu-chiaro);
}
.paz-iniziali--grande { width: 56px; height: 56px; font-size: 19px; }
.paz-altri { margin-top: 12px; }
.paz-suggerimento { margin: 14px 0 0; text-align: center; }
.paz-vuoto-azioni { display: grid; gap: 8px; width: 100%; max-width: 360px; margin-top: 6px; }

/* ============ la scheda ============ */

html[data-guscio="telefono"] .paz-torna { margin: -6px 0 6px -12px; padding: 0 12px; color: var(--blu); font-weight: 650; }
.paz-scheda__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
/* i posti dei pezzi che non hanno niente (niente omonimi, niente azioni) non lasciano un buco */
.paz-scheda__corpo > div:empty { display: none; }
.paz-scheda__corpo .scheda-telefono { margin-bottom: 0; }
.paz-testa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.paz-testa__riga { display: flex; align-items: center; gap: 14px; min-width: 0; }
.paz-testa__nome { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.paz-testa__nome h2 { margin: 0; font-size: 21px; line-height: 1.2; color: var(--blu-scuro); overflow-wrap: anywhere; }
.paz-bollini { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.paz-nota { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--giallo-chiaro); color: #6E4500; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.paz-allergie { font-size: 14.5px; }
.paz-allergie--nessuna { color: var(--testo-2); background: var(--fondo); border-color: var(--bordo); }
.paz-avvisi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.paz-omonimi__lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
html[data-guscio="telefono"] .paz-omonimi__lista .btn { background: rgba(255, 255, 255, .75); color: #6E4500; text-align: left; }

/* Chiama, WhatsApp, Prenota: una riga di bottoni grandi, l'icona sopra la
   parola (come la scheda di un contatto del telefono): «WhatsApp» ci sta
   intero anche sul telefono più stretto */
.paz-azioni { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
html[data-guscio="telefono"] .paz-azioni .btn { flex-direction: column; gap: 3px; min-height: 60px; padding: 6px 4px; font-size: 14px; }
html[data-guscio="telefono"] .paz-azioni .btn svg { width: 21px; height: 21px; }

/* il prossimo appuntamento e il conto */
.paz-riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.paz-riquadro {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; min-width: 0; padding: 11px 13px;
  border: 1px solid var(--bordo); border-radius: 14px; background: var(--carta); box-shadow: var(--ombra-1);
  text-align: left; color: var(--testo); font: inherit;
}
.paz-riquadro--tocca { cursor: pointer; touch-action: manipulation; border-color: var(--blu-chiaro); min-height: 44px; }
.paz-riquadro--tocca:active { background: var(--blu-tenue); }
.paz-riquadro__etichetta { font-size: 12.5px; font-weight: 600; color: var(--testo-2); }
.paz-riquadro__valore { font-size: 17px; }
.paz-riquadro--tocca .paz-riquadro__valore { color: var(--blu); }
.paz-riquadro--debito .paz-riquadro__valore { color: var(--rosso); }
.paz-riquadro--credito .paz-riquadro__valore { color: var(--verde); }

/* i pezzi della scheda: contatti, appuntamenti, richiami, cartella */
.paz-parte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; scroll-margin-top: calc(72px + var(--sopra)); }
.paz-parte__testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.paz-parte__testa h3 { margin: 0; font-size: 16.5px; color: var(--blu-scuro); }
.paz-dati { grid-template-columns: max-content minmax(0, 1fr); row-gap: 0; font-size: 14.5px; }
.paz-dati dt, .paz-dati dd { display: flex; align-items: center; min-height: 34px; }
/* i numeri e l'email si toccano: alti 44 */
.paz-dati a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: var(--blu); overflow-wrap: anywhere; }
.paz-cf { font-family: var(--carattere-numeri); letter-spacing: .02em; }
.paz-testo-lungo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ============ gli appuntamenti del paziente ============ */

.paz-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.paz-app__riepilogo { margin: -6px 0 0; }
.paz-app__gruppo { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; font-weight: 650; color: var(--testo-2); }
.paz-app__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--fondo); font-size: 12px; display: inline-grid; place-items: center; }
.paz-app__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.paz-app__voce {
  --c: var(--blu);
  width: 100%; min-height: 58px; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "quando cosa" "quando stato";
  align-items: center; column-gap: 10px; row-gap: 3px; padding: 8px 10px;
  border: 1px solid var(--bordo); border-left: 5px solid var(--c); border-radius: 12px; background: var(--carta);
  text-align: left; color: var(--testo); font: inherit;
}
button.paz-app__voce { cursor: pointer; touch-action: manipulation; }
button.paz-app__voce:active { background: var(--blu-tenue); }
.paz-app__voce--annullato { opacity: .62; }
.paz-app__voce--annullato .paz-app__prestazione { text-decoration: line-through; }
.paz-app__quando { grid-area: quando; display: grid; grid-template-columns: minmax(0, 1fr); line-height: 1.2; }
.paz-app__quando strong { font-size: 14px; }
.paz-app__quando small { font-size: 13px; color: var(--testo-2); }
.paz-app__cosa { grid-area: cosa; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 0; }
.paz-app__prestazione { font-size: 14.5px; font-weight: 600; }
.paz-app__prestazione .pallino { width: 9px; height: 9px; margin-right: 6px; vertical-align: 1px; background: var(--c); }
.paz-app__voce > .etichetta { grid-area: stato; justify-self: start; }

/* ============ la cartella clinica (solo i medici, da leggere) ============ */

.paz-clinica__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.paz-clinica__corpo:empty { display: none; }
.paz-clinica__azioni { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.paz-note { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.paz-nota-visita { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: 12px; font-size: 14px; }
.paz-nota-visita__testa { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.paz-nota-visita p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }