/*
 * Telefono (visita): regole SOLO per schermi larghi meno di 768 px.
 * Il foglio e' caricato con media="(max-width: 767.98px)" da
 * resources/views/includes/telefono-css.blade.php: sul computer e sul
 * tablet non viene applicato, quindi la loro impaginazione non cambia.
 *
 * Tutto sta dentro @media screen: in STAMPA queste regole non valgono mai
 * (un foglio A5 e' largo 559 px, sotto la soglia: senza questo recinto la
 * carta prenderebbe l'impaginazione del telefono).
 *
 * Zone di questo file:
 *   1. la visita aperta a tutto schermo (testata compatta, comandi fissi)
 *   2. la cartella: pulsanti in alto, allegati, cronologia, note
 *   3. Inquadramento Anamnestico
 *   4. Dittafono
 *   5. Referto Clinico (S, O, A, P) e Farmaci Prescritti
 *   6. i quattro passi finali
 *   7. la videovisita (Google Meet)
 *   8. l'anteprima di stampa: il velo nella scrivania e il foglio nel telaio
 *   9. la scheda del paziente nel pannello
 */
@media screen {

/* =========================================================================
   1. LA VISITA APERTA A TUTTO SCHERMO
   Sul computer la visita si apre in una scheda grande quasi quanto lo
   schermo (lo script le da' posizione e misure in pixel). Sul telefono
   quei due centimetri di bordo erano spazio perso: qui prende lo schermo
   intero. I valori dello script sono "inline", percio' servono gli
   !important. Niente vh/vw: con il testo ingrandito (A+) quelle unita' non
   si riducono; i quattro lati a zero funzionano con qualsiasi taglia.
   ========================================================================= */
.appointment-card.is-focus{
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:auto !important; height:auto !important;
  border-radius:0; border-width:0;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
  -webkit-overflow-scrolling:touch;
}

/* La testata della visita era alta 330 px e scorreva via insieme a
   "Chiudi". Ora si divide in due: i dati del paziente (scorrono con la
   cartella) e la barra dei comandi, che resta sempre in cima.
   display:contents toglie la scatola della testata e lascia i suoi due
   figli nel flusso della scheda: cosi' la barra puo' restare appesa in
   alto mentre la cartella scorre sotto. */
.appointment-card.is-focus .appointment-header{display:contents;}
.appointment-card.is-focus .appointment-info{
  flex-direction:row; flex-wrap:wrap; align-items:center; gap:.45rem .5rem;
  padding:calc(.7rem + env(safe-area-inset-top)) .85rem .55rem;
}
.appointment-card.is-focus .appointment-info .time{min-width:0;font-size:1.05rem;}
.appointment-card.is-focus .appointment-info .patient-name{
  max-width:100%; min-height:44px; display:inline-flex; align-items:center;
  white-space:normal; text-align:left; font-size:1.1rem; line-height:1.25;
}
.appointment-card.is-focus .appointment-info .patient-eta,
.appointment-card.is-focus .appointment-info .badge-visit-type,
.appointment-card.is-focus .appointment-info .badge-location,
.appointment-card.is-focus .appointment-info .badge-anamnesis,
.appointment-card.is-focus .appointment-info .badge-stato-visita{font-size:.875rem;}
.appointment-card.is-focus .appointment-info .badge-location{min-height:44px;display:inline-flex;align-items:center;}
.appointment-card.is-focus .appointment-info .btn-sollecita{min-height:44px;font-size:.875rem;}
.appointment-card.is-focus .appointment-info .btn-sollecita small{font-size:.875rem;}

.appointment-card.is-focus .appointment-actions{
  position:sticky; top:0; z-index:30;
  display:flex; flex-wrap:nowrap; gap:.45rem;
  padding:calc(.5rem + env(safe-area-inset-top)) .85rem .5rem;
  background:var(--doc-panel); border-bottom:1px solid var(--doc-border);
  box-shadow:0 8px 16px -10px rgba(2,6,23,.55);
}
.appointment-card.is-focus .appointment-actions .btn{
  flex:1 1 0; min-width:0; min-height:44px; margin:0;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.35rem .45rem; font-size:.875rem; line-height:1.15;
  white-space:normal; text-align:center;
}
html[data-tema="giorno"] .appointment-card.is-focus .appointment-actions{
  box-shadow:0 8px 16px -10px rgba(15,23,42,.25);
}
/* "Visita in Corso" di notte: bianco su ambra #F59E0B dava contrasto 2,15
   (minimo 4,5). Sul telefono il testo diventa scuro: 7,7 sul fondo, 5,6
   al tocco. Di giorno l'ambra e' gia' scuro (#B45309) e il bianco va bene.
   (Uguale difetto sul computer: decisione lasciata ad Antonio.) */
html:not([data-tema="giorno"]) .appointment-card .btn-avvia.btn-warning,
html:not([data-tema="giorno"]) .appointment-card .btn-avvia.btn-warning:hover{color:#0F1929;}

/* I pulsanti Posologia / Strumenti / Aria: sotto i 600 px erano gia' una
   fila sola in fondo; fra 600 e 767 px restavano una pila di tre barre a
   tutta larghezza, alta 170 px, sopra la cartella. Ora sono una fila sola
   a ogni larghezza del telefono, sopra la barra di sistema dell'iPhone, e
   la cartella lascia in fondo lo spazio per non farsi coprire l'ultimo passo. */
body.visita-focus .focus-azioni{
  flex-direction:row; gap:.4rem;
  bottom:calc(.6rem + env(safe-area-inset-bottom));
  left:calc(.6rem + env(safe-area-inset-left));
  right:calc(.6rem + env(safe-area-inset-right));
}
body.visita-focus .focus-azioni > .btn-strumenti-focus,
body.visita-focus .focus-azioni > .btn-aria-focus{
  flex:1 1 0; min-width:0; min-height:44px; padding:.55rem .35rem; gap:.35rem; white-space:nowrap;
}
body.visita-focus .appointment-card.is-focus .cartella-footer-actions{
  padding-bottom:calc(5.25rem + env(safe-area-inset-bottom));
}
/* la chat di Aria aperta durante la visita si appoggia sopra la fila */
body.visita-focus .aria-copilot.is-lifted{
  bottom:calc(4.2rem + env(safe-area-inset-bottom));
  right:calc(.6rem + env(safe-area-inset-right)); width:calc(100vw - 1.2rem);
}

/* =========================================================================
   2. LA CARTELLA: MENO CORNICI, PIU' TESTO
   Scheda, cartella, pannello e sotto-sezione avevano ognuno il suo bordo
   interno: a 390 px il campo dei farmaci restava largo meno di 200 px.
   ========================================================================= */
.appointment-card.is-focus .cartella-clinica{padding:.75rem .6rem 1rem;}
.cartella-clinica-content .cartella-body{gap:.75rem;}
.cartella-clinica-content .panel{padding:.9rem .75rem;}

.cartella-clinica-content .cartella-header{gap:.6rem;margin-bottom:1rem;padding-bottom:.85rem;}
.cartella-clinica-content .patient-details h3{font-size:1.2rem;line-height:1.3;}
.cartella-clinica-content .patient-age{font-size:.875rem;}
/* I tre pulsanti (Allegati, Precedenti, Note) in una fila di tre parti
   uguali, alti un dito. */
.appointment-card .cartella-clinica-content .cartella-actions{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; width:100%;
}
.appointment-card .cartella-clinica-content .cartella-actions .btn{
  min-height:44px; margin:0; padding:.35rem .4rem !important; font-size:.875rem !important;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  white-space:normal; line-height:1.2; text-align:center;
}

/* I "?" di aiuto e le piccole icone restano piccole alla vista, ma il dito
   trova un bersaglio di 44 px: un bordo invisibile attorno al simbolo. */
.cartella-clinica-content .aiuto-funzione,
.appointment-card.is-focus .aiuto-funzione,
.cartella-clinica-content .inq-matita,
.pz-scheda .aiuto-funzione,
.pz-scheda .inq-matita{position:relative;}
.cartella-clinica-content .aiuto-funzione::after,
.appointment-card.is-focus .aiuto-funzione::after,
.cartella-clinica-content .inq-matita::after,
.pz-scheda .aiuto-funzione::after,
.pz-scheda .inq-matita::after{content:"";position:absolute;inset:-10px;}

/* Allegati: una colonna sola (le schede chiedevano almeno 280 px e a 320
   uscivano dal bordo), anteprima e scarica grandi come un dito. */
.cartella-clinica-content .alleg-griglia{grid-template-columns:minmax(0,1fr);}
.cartella-clinica-content .alleg-scheda{padding:.6rem .7rem;gap:.6rem;}
.cartella-clinica-content .alleg-nome{font-size:.9rem;}
.cartella-clinica-content .alleg-meta,
.cartella-clinica-content .alleg-conta{font-size:.875rem;}
.cartella-clinica-content .alleg-azioni a{width:44px;height:44px;border-radius:10px;}
.cartella-clinica-content .alleg-audio{width:100%;max-width:100%;}
.cartella-clinica-content .alleg-vuoto span{font-size:.875rem;}

/* Cronologia delle visite precedenti */
.cartella-clinica-content .visita-prec-mese,
.cartella-clinica-content .visita-prec-tipo,
.cartella-clinica-content .visita-date{font-size:.875rem;}
.cartella-clinica-content .visita-prec-estratto{font-size:.9rem;line-height:1.5;}
.cartella-clinica-content .prec-soap-bottoni{gap:.4rem;}
.cartella-clinica-content .prec-soap-btn{min-height:44px;font-size:.875rem;}
.cartella-clinica-content .prec-espandi{min-height:44px;font-size:.875rem;}
.cartella-clinica-content .prec-soap-corpo p{font-size:.9rem;}

/* Note private: 16 px, altrimenti l'iPhone ingrandisce la pagina al tocco. */
.cartella-clinica-content .js-nota-medico{font-size:16px;}
.cartella-clinica-content .nota-medico-esito{font-size:.875rem;}

/* =========================================================================
   3. INQUADRAMENTO ANAMNESTICO
   ========================================================================= */
.cartella-clinica-content .panel-toggle{min-height:44px;gap:.4rem;}
.cartella-clinica-content .panel-toggle h4{font-size:1rem;line-height:1.3;margin-bottom:0;}
.cartella-clinica-content .inq-firma{font-size:.875rem;}
.cartella-clinica-content .inq-matita{width:36px;height:36px;}
.cartella-clinica-content .inq-scarica{min-height:44px;display:inline-flex;align-items:center;}
.cartella-clinica-content .inq-riga-ana span{font-size:.875rem;}
.cartella-clinica-content .inq-scheda-corpo{font-size:.95rem;line-height:1.55;overflow-wrap:anywhere;}
.cartella-clinica-content .inq-scheda-tit{font-size:.875rem;}
.cartella-clinica-content .inq textarea,
.cartella-clinica-content .inq input[type="text"]{font-size:16px;}
.cartella-clinica-content .inq summary{min-height:44px;font-size:.875rem;}
.cartella-clinica-content .inq summary span{font-size:.875rem;}
/* le scritte di servizio dell'inquadramento (contatori, cenni, etichette
   delle sotto-voci, piede "scritto da Aria") scendevano fino a 9,5 px */
.cartella-clinica-content .inq-conta,
.cartella-clinica-content .inq-cenno,
.cartella-clinica-content .inq-piede-ai,
.cartella-clinica-content .inq-contesto-tit,
.cartella-clinica-content .inq-riga-ana .e-contatti,
.cartella-clinica-content .inq-scarica{font-size:.875rem;}
.cartella-clinica-content .inq-sotto-label{font-size:.8125rem;}

/* =========================================================================
   4. DITTAFONO
   Le due caselle (trascrizione e nota) sono gia' una sotto l'altra:
   qui il testo sale a 16 px e l'altezza iniziale scende, cosi' sullo
   schermo del telefono resta posto per il resto.
   ========================================================================= */
.cartella-clinica-content .ditta-flusso{gap:.5rem;}
.cartella-clinica-content .ditta-passo{min-height:52px;font-size:.875rem;}
.cartella-clinica-content .dictation-timer{font-size:.875rem !important;}
.cartella-clinica-content .dictation-format-badge{font-size:.8125rem;}
.cartella-clinica-content .dittafono-grid{gap:.75rem !important;}
.cartella-clinica-content .dictation-transcript,
.cartella-clinica-content .dictation-note-editor{
  font-size:16px !important; min-height:150px !important; max-height:45vh !important;
}
.cartella-clinica-content .dictation-status,
.cartella-clinica-content .dictation-chunks-meta,
.cartella-clinica-content .dictation-length-meta{font-size:.875rem !important;}
.cartella-clinica-content .dittafono-col label{font-size:.875rem !important;}
.cartella-clinica-content .dictation-progress{font-size:.875rem !important;}

/* =========================================================================
   5. REFERTO CLINICO (S, O, A, P) E FARMACI PRESCRITTI
   ========================================================================= */
.cartella-clinica-content .referto-section h4{flex-wrap:wrap;row-gap:.25rem;}
.cartella-clinica-content .referto-salvato{font-size:.875rem;}
.cartella-clinica-content .soap-sub-list{padding-left:.6rem;margin-left:0;}
.cartella-clinica-content .soap-title{font-size:.95rem;}
.cartella-clinica-content .soap-sub-label{font-size:.875rem;}
.cartella-clinica-content .soap-input .referto-text{font-size:16px;padding-bottom:58px;}
/* "Ottimizza con AI" e "Ripristina" alti un dito */
.cartella-clinica-content .soap-actions .btn-ai-optimize{height:44px;font-size:.875rem;}
.cartella-clinica-content .soap-actions .btn-ai-undo{width:44px;height:44px;flex-basis:44px;}

/* Ogni farmaco diventa una scheda a una colonna: in cima il numero e la
   X per toglierlo, sotto il nome a tutta riga, poi Dosaggio e Durata
   affiancati e "Quando" a tutta riga (e' il testo piu' lungo). Prima i
   campi erano larghi 75 px: "1 compr", "al mattin". */
.cartella-clinica-content .fx-riga{
  grid-template-columns:minmax(0,1fr) 44px;
  grid-template-areas:"num togli" "griglia griglia" "sotto sotto";
  gap:.4rem; padding:.6rem .65rem .75rem;
}
.cartella-clinica-content .fx-num{padding-top:0;align-self:center;text-align:left;font-size:.95rem;}
.cartella-clinica-content .fx-togli{margin-top:0;width:44px;height:44px;align-self:center;}
.cartella-clinica-content .fx-griglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;}
.cartella-clinica-content .fx-c-nome,
.cartella-clinica-content .fx-c-freq{grid-column:1 / -1;}
.cartella-clinica-content .fx-c-nome{order:1;}
.cartella-clinica-content .fx-c-dose{order:2;}
.cartella-clinica-content .fx-c-dur{order:3;}
.cartella-clinica-content .fx-c-freq{order:4;}
/* sui telefoni piu' stretti (320 px) anche Dosaggio e Durata a tutta riga */
@media (max-width:359.98px){
  .cartella-clinica-content .fx-griglia{grid-template-columns:minmax(0,1fr);}
  .cartella-clinica-content .panel{padding:.8rem .6rem;}
}
.cartella-clinica-content .fx-campo label{font-size:.8125rem;}
.cartella-clinica-content .fx-peso-campi label{font-size:.875rem;}
.cartella-clinica-content .fx-in{font-size:16px;min-height:44px;}
.cartella-clinica-content .fx-aic{font-size:.875rem;}
.cartella-clinica-content .fx-schema-on-eti{min-height:44px;font-size:.875rem;}
.cartella-clinica-content .fx-schema-on-eti input{width:22px;height:22px;}
.cartella-clinica-content .fx-schema-on-eti small{font-size:.875rem;}
.cartella-clinica-content .fx-schema{grid-template-columns:repeat(4,minmax(0,1fr));}
.cartella-clinica-content .fx-giorno-eti{font-size:.75rem;}
.cartella-clinica-content .fx-giorno{font-size:16px;min-height:44px;}
.cartella-clinica-content .fx-piede{gap:.6rem;}
.cartella-clinica-content .fx-aggiungi{min-height:44px;width:100%;justify-content:center;font-size:.9rem;}
.cartella-clinica-content .fx-suggerimento{min-width:0;flex-basis:100%;font-size:.875rem;}
.cartella-clinica-content .fx-peso summary{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .5rem;}
.cartella-clinica-content .fx-peso-sotto,
.cartella-clinica-content .fx-peso-nota{font-size:.875rem;}
.cartella-clinica-content .fx-peso-campi input{font-size:16px;min-height:44px;}
.cartella-clinica-content .fx-peso-copia{min-height:44px;}
.cartella-clinica-content .fx-note-eti{font-size:.875rem;}
.cartella-clinica-content .fx-note{font-size:16px;}
/* I suggerimenti del prontuario: righe alte un dito, dentro lo schermo. */
.cartella-clinica-content .farmaci-editor .med-tendina{max-height:45vh;}
.cartella-clinica-content .farmaci-editor .med-voce{min-height:48px;padding:.6rem .75rem;}
.cartella-clinica-content .farmaci-editor .med-voce b{font-size:.95rem;}
.cartella-clinica-content .farmaci-editor .med-voce span,
.cartella-clinica-content .farmaci-editor .med-vuota{font-size:.875rem;}

/* =========================================================================
   6. I QUATTRO PASSI FINALI
   Sono gia' in colonna; qui il testo introduttivo e gli stati diventano
   leggibili e ogni passo e' alto almeno un dito.
   ========================================================================= */
.cartella-clinica-content .cartella-footer-actions{gap:.6rem;}
.cartella-clinica-content .vp-intro{font-size:.9rem;line-height:1.5;}
.cartella-clinica-content .vp-btn{min-height:56px;}
.cartella-clinica-content .vp-titolo{font-size:1rem;}
.cartella-clinica-content .vp-stato{font-size:.875rem;}

/* =========================================================================
   7. LA VIDEOVISITA (GOOGLE MEET)
   Campo dell'indirizzo e "Manda il link" uno sotto l'altro, a tutta
   larghezza. Il riquadro del pagamento andava in una colonnina di dieci
   lettere con il pulsante sopra al testo: ora testo sopra, pulsante sotto.
   ========================================================================= */
.cartella-clinica-content .meet-visita{padding:.9rem .8rem;}
.cartella-clinica-content .meet-visita-stato{font-size:.875rem;}
.cartella-clinica-content .meet-passi{padding-left:1.1rem;font-size:.9rem;}
.cartella-clinica-content .meet-passi code{font-size:.875rem;overflow-wrap:anywhere;}
.cartella-clinica-content .meet-crea{display:flex;width:100%;min-height:48px;justify-content:center;text-align:center;}
.cartella-clinica-content .meet-invio{flex-direction:column;align-items:stretch;}
.cartella-clinica-content .meet-invio .meet-link{min-width:0;width:100%;min-height:48px;font-size:16px;}
.cartella-clinica-content .meet-invio .btn{width:100%;min-height:48px;justify-content:center;}
.cartella-clinica-content .meet-esito{font-size:.875rem;}
.cartella-clinica-content .meet-pagamento{flex-wrap:wrap;align-items:flex-start;}
.cartella-clinica-content .meet-pagamento > i{margin-top:.2rem;}
.cartella-clinica-content .meet-pagamento span{flex:1 1 calc(100% - 2rem);font-size:.9rem;line-height:1.5;}
.cartella-clinica-content .meet-pagamento .btn{flex:1 1 100%;min-height:44px;justify-content:center;font-size:.9rem;}

/* =========================================================================
   8. L'ANTEPRIMA DI STAMPA
   8a. Il velo nella scrivania: a tutto schermo, "Chiudi" alto un dito,
       il telaio che finisce sopra la barra di sistema dell'iPhone.
   ========================================================================= */
#stampaVelo{padding:0;}
#stampaVelo .stampa-pannello{
  width:100%; height:100%; max-height:none; border-radius:0; border-width:0;
  padding-bottom:env(safe-area-inset-bottom);
}
#stampaVelo .stampa-velo-testa{
  padding:calc(.4rem + env(safe-area-inset-top)) calc(.75rem + env(safe-area-inset-right)) .4rem calc(.9rem + env(safe-area-inset-left));
  gap:.5rem;
}
#stampaVelo .stampa-velo-titolo{font-size:1rem;}
#stampaVelo .stampa-velo-chiudi{min-height:44px;padding:.4rem 1rem;font-size:.9rem;flex-shrink:0;}

/* 8b. Dentro il telaio (print-preview.blade.php, che carica questo foglio
   solo sotto i 768 px). Il foglio A4 e' largo 794 px: sul telefono si
   vede intero, rimpicciolito come l'anteprima di un PDF. Si usa transform
   e non zoom: le misure che l'impaginazione prende in JavaScript
   (offsetHeight) restano quelle vere della carta, quindi le pagine e la
   stampa escono identiche a quelle del computer. --tv-a4 e' la scala del
   foglio A4, --tv-a5 quella dell'A5 (ricetta), per ogni larghezza. */
:root{--tv-a4:.72;--tv-a5:1;}
@media (max-width:599.98px){ :root{--tv-a4:.57;--tv-a5:.81;} }
@media (max-width:479.98px){ :root{--tv-a4:.51;--tv-a5:.72;} }
@media (max-width:429.98px){ :root{--tv-a4:.47;--tv-a5:.67;} }
@media (max-width:399.98px){ :root{--tv-a4:.44;--tv-a5:.62;} }
@media (max-width:374.98px){ :root{--tv-a4:.42;--tv-a5:.6;} }
@media (max-width:339.98px){ :root{--tv-a4:.37;--tv-a5:.53;} }

.doc-area{padding:.75rem 0 calc(8.5rem + env(safe-area-inset-bottom));overflow:hidden;}
.doc-area .doc-pagina{
  transform:scale(var(--tv-a4)); transform-origin:top left;
  margin:0 0 calc(14px - 297mm * (1 - var(--tv-a4))) calc((100% - 210mm * var(--tv-a4)) / 2);
}
.doc-area .doc-pagina.e-a5{
  transform:scale(var(--tv-a5));
  margin:0 0 calc(14px - 210mm * (1 - var(--tv-a5))) calc((100% - 148mm * var(--tv-a5)) / 2);
}
/* "Nessuna ricetta da stampare": non e' un foglio vero (niente altezza A4),
   e' un avviso; resta a grandezza naturale, largo quanto lo schermo. */
.doc-area .doc-pagina[style*="min-height:auto"]{
  transform:none; width:auto; margin:0 .75rem 14px;
}
/* La ricetta: il foglio sta in una cornice grande quanto la sua immagine
   ridotta (come .rx-scaler nel Ricettario). */
.rx-print-target{
  position:relative; overflow:hidden;
  width:calc(148mm * var(--tv-a5)); height:calc(210mm * var(--tv-a5));
  margin:0 auto calc(8.5rem + env(safe-area-inset-bottom));
}
.rx-print-target .rx-sheet{
  position:absolute; top:0; left:0; margin:0 !important;
  transform:scale(var(--tv-a5)); transform-origin:top left;
}
.rx-print-target:has(.rx-a4){width:calc(210mm * var(--tv-a4));height:calc(297mm * var(--tv-a4));}
.rx-print-target .rx-sheet.rx-a4{transform:scale(var(--tv-a4));}
/* Con referto e ricetta insieme, lo spazio per la barra dei comandi resta
   solo sotto l'ultimo foglio. */
.doc-area:has(~ .rx-print-target){padding-bottom:.25rem;}

/* La barra degli strumenti non resta appesa in cima (rubava un terzo
   dello schermo): scorre via col documento. Formato e conteggio in una
   riga, tasti alti un dito. */
.doc-barra{position:static;margin:.6rem .6rem .5rem;padding:.6rem .7rem;}
.doc-barra-riga{gap:.5rem;}
.doc-barra-sx{flex-wrap:wrap;gap:.5rem;}
.doc-barra-dx{margin-left:auto;width:auto;}
.doc-formato-eti{font-size:.75rem;}
.doc-formato-btn{min-height:44px;min-width:52px;font-size:.9rem;}
.doc-conta{font-size:.875rem;}
.doc-barra .doc-nota{font-size:.875rem;margin-top:.55rem;padding-top:.55rem;}
.doc-barra .aiuto-funzione{position:relative;}
.doc-barra .aiuto-funzione::after{content:"";position:absolute;inset:-10px;}

/* I comandi (Ricetta TS, Firma, Stampa) diventano una barra in fondo a
   tutta larghezza: prima la zattera sbordava a sinistra dello schermo. */
.doc-flottante{
  left:.5rem; right:.5rem; bottom:calc(.5rem + env(safe-area-inset-bottom));
  flex-wrap:wrap; justify-content:stretch; gap:.45rem; padding:.5rem;
}
.doc-flottante .doc-btn{
  flex:1 1 0; min-width:0; min-height:48px; justify-content:center;
  padding:.5rem .6rem; font-size:.95rem; line-height:1.2; text-align:center; white-space:normal;
}
.doc-flottante .doc-btn.e-nrbe{flex-basis:100%;}
.doc-nrbe-esito{left:.75rem;right:.75rem;max-width:none;font-size:.9rem;}

/* La firma: un foglio che sale dal basso, a tutta larghezza, sopra la
   barra dei comandi (che intanto si nasconde: il velo della firma prima
   stava sotto la barra e ne restava coperto). Tasti alti un dito. */
body:has(.firma-velo) .doc-flottante{display:none;}
.firma-velo{z-index:1300;align-items:flex-end;padding:0;}
.firma-scatola{
  width:100%; max-height:100%; overflow-y:auto; border-radius:16px 16px 0 0;
  padding:18px 16px calc(16px + env(safe-area-inset-bottom));
}
.firma-guida,
.firma-avvertenza{font-size:.9rem;}
.firma-tela{height:210px;}
.firma-azioni{flex-wrap:wrap;gap:.5rem;}
.firma-spazio{display:none;}
.firma-btn{min-height:48px;font-size:.95rem;flex:1 1 0;}
.firma-btn.e-ok{flex:1 1 100%;order:3;}
.firma-esito{font-size:.875rem;}

/* =========================================================================
   9. LA SCHEDA DEL PAZIENTE NEL PANNELLO
   Il contenitore (tutto schermo, X alta un dito, aree sicure) e' lo stesso
   delle notifiche e sta in telefono-finestre.css; qui c'e' solo il
   contenuto della scheda.
   ========================================================================= */

.pz-scheda .pz-testa{gap:.75rem;}
.pz-scheda .pz-iniziali{width:44px;height:44px;}
.pz-scheda .pz-dati{font-size:.875rem;gap:.35rem .9rem;}
.pz-scheda .pz-dati > span{overflow-wrap:anywhere;}
.pz-scheda .pz-completa-btn{min-height:44px;font-size:.875rem;}
.pz-scheda .pz-completa-campi{grid-template-columns:minmax(0,1fr);}
.pz-scheda .pz-completa-campi label span{font-size:.8125rem;}
.pz-scheda .btn{font-size:.875rem;}
.pz-scheda .pz-completa-campi input,
.pz-scheda .pz-completa-campi select{font-size:16px;min-height:44px;}
.pz-scheda .pz-completa-nota,
.pz-scheda .pz-completa-esito{font-size:.875rem;}
.pz-scheda .pz-completa-azioni .btn{min-height:44px;}

/* "?", Scrivi, Prenota visita: tasti alti un dito */
.pz-scheda .pz-testa-azioni{gap:.5rem;align-items:center;width:100%;}
.pz-scheda .pz-testa-azioni .btn{min-height:44px;flex:1 1 auto;justify-content:center;font-size:.9rem;}

.pz-scheda .pz-blocco h4{font-size:1rem;flex-wrap:wrap;}
.pz-scheda .pz-conta{font-size:.875rem;}
.pz-scheda .pz-vuoto-testo,
.pz-scheda .pz-assente-testo,
.pz-scheda .pz-integra-nota{font-size:.875rem;}
.pz-scheda .pz-anamnesi-assente > p:first-child{font-size:.9rem;}
.pz-scheda .pz-assente-azioni .btn-sollecita,
.pz-scheda .pz-assente-azioni .pz-integra-btn{min-height:48px;flex:1 1 100%;}
.pz-scheda .pz-voce label{font-size:.875rem;}
.pz-scheda .pz-voce-testo,
.pz-scheda .pz-integra-form textarea,
.pz-scheda .pz-integra-form input{font-size:16px;}
.pz-scheda .pz-integra-azioni .btn{min-height:44px;}
.pz-scheda .pz-esito{font-size:.875rem;}

/* Le visite (prossime e passate): data e ora sopra, studio e stato
   sotto, il tasto a destra alto un dito. Prima il nome dello studio si
   riduceva a "Studio Vi...". */
.pz-scheda .pz-riga{
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"quando azione" "dove azione" "stato azione";
  gap:.2rem .6rem; padding:.6rem .15rem; font-size:.9rem;
}
.pz-scheda .pz-riga-quando{grid-area:quando;}
.pz-scheda .pz-riga-quando span{font-size:.875rem;}
.pz-scheda .pz-riga-dove{grid-area:dove;white-space:normal;}
.pz-scheda .pz-riga-stato{grid-area:stato;flex-wrap:wrap;}
.pz-scheda .pz-riga-stato:empty{display:none;}
.pz-scheda .pz-riga-azione{grid-area:azione;align-self:center;min-height:44px;font-size:.875rem;padding:.3rem .75rem;}
.pz-scheda .pz-tag{font-size:.8125rem;}
.pz-scheda .pz-mostra-tutte{min-height:44px;font-size:.9rem;}
.pz-scheda .pz-integra summary{min-height:44px;display:flex;align-items:center;}

/* Il consenso dentro la scheda (passare il telefono al paziente per la
   firma): testi a 14 px, casella della firma e "Cancella" comodi. */
.pz-scheda .cons-punto-testo,
.pz-scheda .cons-punto-nota,
.pz-scheda .cons-valore,
.pz-scheda .cons-nota-legale,
.pz-scheda .cons-parte-eti,
.pz-scheda .cons-documento-cenno,
.pz-scheda .cons-intro,
.pz-scheda .cons-quando,
.pz-scheda .cons-avviso,
.pz-scheda .cons-messaggio,
.pz-scheda .cons-esito,
.pz-scheda .cons-otp-spiega,
.pz-scheda .cons-leva-nota,
.pz-scheda .cons-documento-corpo,
.pz-scheda .cons-pannello .cons-testo,
.pz-scheda .cons-pannello .cons-testo .cons-h3,
.pz-scheda .cons-pannello .cons-testo .cons-parte{font-size:.875rem;}
.pz-scheda .cons-stato,
.pz-scheda .cons-pannello .cons-punto-tipo,
.pz-scheda .cons-pannello .cons-testo .cons-parte-eti{font-size:.8125rem;}
.pz-scheda .cons-testa-nome span{font-size:.875rem;}
.pz-scheda .cons-tela-pulisci{min-height:44px;font-size:.875rem;}
.pz-scheda .cons-btn,
.pz-scheda .cons-metodo,
.pz-scheda .cons-revoca-btn,
.pz-scheda .cons-revoca-si,
.pz-scheda .cons-revoca-no{min-height:44px;}
.pz-scheda .cons-otp-campo{font-size:16px;min-height:44px;}
.pz-scheda .cons-punto > label,
.pz-scheda label.cons-punto{min-height:44px;}

/* L'inquadramento dentro la scheda: stesse misure della visita */
.pz-scheda .inq-scheda-corpo{font-size:.95rem;line-height:1.55;overflow-wrap:anywhere;}
.pz-scheda .inq-scheda-tit,
.pz-scheda .inq-riga-ana span,
.pz-scheda .inq-conta,
.pz-scheda .inq-cenno,
.pz-scheda .inq-piede-ai,
.pz-scheda .inq-contesto-tit,
.pz-scheda .inq summary,
.pz-scheda .inq summary span{font-size:.875rem;}
.pz-scheda .inq-sotto-label{font-size:.8125rem;}
.pz-scheda .inq summary{min-height:44px;}
.pz-scheda .inq-matita{width:36px;height:36px;}
.pz-scheda .inq textarea{font-size:16px;}

} /* fine @media screen */