/*
 * Telefono (Strumenti e Posologia): 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.
 *
 * Zona: i due pannelli a tutto schermo della scrivania e della visita,
 *   Strumenti  (#strumOverlay, partials/strumenti-specialistici)
 *   Posologia  (#posoOverlay,  partials/posologia)
 * Tutte e due le finestre hanno la classe .strum-overlay: le regole comuni
 * partono da li', quelle proprie da #strumOverlay o da .poso-overlay.
 *
 * Com'erano sul telefono: l'elenco era una fila che scorreva di lato (17
 * strumenti in 3.700 px, 60 farmaci in 12.000 px) e se ne vedeva uno e
 * mezzo; il risultato del calcolo stava in fondo, sotto l'ultima domanda,
 * e compilando non si vedeva; nella Posologia, dopo una ricerca, il primo
 * risultato diventava alto 600 px e spingeva la scheda fuori dallo schermo.
 *
 * Com'e' adesso:
 *   - il pannello scorre tutto insieme: in cima l'elenco in colonna (alto al
 *     massimo un terzo dello schermo, con i titoli dei gruppi e un'ombra che
 *     avvisa quando c'e' altro), sotto lo strumento o la scheda. Scorrendo,
 *     l'elenco esce di scena e il modulo ha tutto lo schermo, anche con la
 *     tastiera aperta;
 *   - il risultato degli strumenti resta appoggiato in fondo allo schermo
 *     finche' non si arriva al suo posto: si vede cambiare a ogni risposta;
 *   - bersagli da 44-48 px, testi da almeno 13-14 px, campi a 16 px (sotto
 *     quella misura l'iPhone ingrandisce la pagina al tocco).
 *
 * Tutto sta dentro @media screen: stampando su un foglio stretto la
 * condizione dei 768 px sarebbe vera anche per la carta.
 */
@media screen {

/* =========================================================================
   1. IL PANNELLO A TUTTO SCHERMO
   L'altezza visibile con la tastiera aperta arriva da public/js/chat-telefono.js
   (--tel-vv-alto e --tel-vv-altezza): senza, vale lo schermo intero.
   ========================================================================= */
.strum-overlay{
  top:var(--tel-vv-alto,0);bottom:auto;height:var(--tel-vv-altezza,100%);
  padding:0;align-items:stretch;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.strum-overlay .strum-pannello{width:100%;max-height:none;height:100%;border:0;border-radius:0;box-shadow:none;}
.strum-overlay .strum-testa{
  flex-shrink:0;gap:.5rem;align-items:center;
  padding:calc(.5rem + env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) .6rem max(1rem, env(safe-area-inset-left));
}
.strum-overlay .strum-testa > div{min-width:0;}
.strum-overlay .strum-testa h2{font-size:1.15rem;line-height:1.3;}
.strum-overlay .strum-testa p{font-size:.875rem;line-height:1.4;}
.strum-overlay .strum-chiudi{width:44px;height:44px;font-size:1.05rem;}

/* =========================================================================
   2. IL CORPO: UNA SOLA BARRA DI SCORRIMENTO
   Sotto i 900 px doctor-dashboard.css ne fa una griglia (elenco in fila,
   dettaglio che scorre per conto suo). Qui il corpo intero scorre: elenco
   sopra, strumento sotto. Lo spazio in fondo (scroll-padding) tiene il
   campo col fuoco sopra il risultato appoggiato in basso.
   ========================================================================= */
.strum-overlay .strum-corpo{
  display:block;flex:1 1 auto;min-height:0;padding:0;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scroll-padding-top:.5rem;scroll-padding-bottom:6.5rem;
}
.strum-overlay .strum-dettaglio{
  overflow:visible;min-height:0;
  padding:1rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

/* =========================================================================
   3. L'ELENCO IN COLONNA
   Una voce per riga, alta un dito, con il nome intero; alto al massimo un
   terzo dello schermo e scorrevole. I titoli dei gruppi ("Per la tua
   specialita'", "Sempre disponibili", "In altre specialita'") tornano: in
   fila erano nascosti. L'ombra in alto e in basso compare solo quando da
   quella parte c'e' altro (sfondo "local" sopra ombre "scroll").
   ========================================================================= */
.strum-overlay .strum-elenco{
  flex-direction:column;flex-wrap:nowrap;gap:2px;
  max-height:min(34vh, 16.5rem);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:.25rem max(.6rem, env(safe-area-inset-right)) .5rem max(.6rem, env(safe-area-inset-left));
  border-right:none;border-bottom:1px solid var(--doc-border);
  background:
    linear-gradient(var(--doc-bg) 35%, rgba(15,23,42,0)) center top / 100% 2rem no-repeat local,
    linear-gradient(rgba(15,23,42,0), var(--doc-bg) 65%) center bottom / 100% 2rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(2,6,23,.55), rgba(2,6,23,0)) center top / 100% .75rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(2,6,23,.55), rgba(2,6,23,0)) center bottom / 100% .75rem no-repeat scroll,
    var(--doc-bg);
}
html[data-tema="giorno"] .strum-overlay .strum-elenco{
  background:
    linear-gradient(var(--doc-bg) 35%, rgba(226,232,240,0)) center top / 100% 2rem no-repeat local,
    linear-gradient(rgba(226,232,240,0), var(--doc-bg) 65%) center bottom / 100% 2rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(15,23,42,.22), rgba(15,23,42,0)) center top / 100% .75rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(15,23,42,.22), rgba(15,23,42,0)) center bottom / 100% .75rem no-repeat scroll,
    var(--doc-bg);
}
.strum-overlay .strum-elenco-tit{
  display:block;margin:0;padding:.7rem .7rem .3rem;
  font-size:.8125rem;letter-spacing:.06em;line-height:1.3;
}
.strum-overlay .strum-elenco-tit:not(:first-child){margin-top:.4rem;padding-top:.75rem;}
.strum-overlay .strum-elenco-tit[hidden]{display:none;}
.strum-overlay .strum-ve{
  width:100%;max-width:none;flex:0 0 auto;min-height:48px;justify-content:center;gap:.15rem;
  padding:.5rem .75rem;border-radius:10px;white-space:normal;
}
.strum-overlay .strum-ve[hidden]{display:none;}
.strum-overlay .strum-ve-nome{font-size:.9375rem;line-height:1.3;}
.strum-overlay .strum-ve-sigla{font-size:.8125rem;line-height:1.3;}
/* La voce scelta: la barra ciano a sinistra un filo piu' spessa, si vede
   anche col pollice sopra. */
.strum-overlay .strum-ve.e-attiva{box-shadow:inset 3px 0 0 var(--doc-cyan);}
.strum-overlay .strum-ve.e-attiva .strum-ve-nome{color:var(--doc-text-strong);}

/* =========================================================================
   4. LO STRUMENTO APERTO
   ========================================================================= */
/* Nome e sigla uno sotto l'altro: affiancati il nome andava su tre righe. */
.strum-overlay .strum-dettaglio .strum-scheda-testa{
  flex-direction:column;align-items:flex-start;gap:.3rem;margin-bottom:1rem;padding-bottom:.8rem;
}
.strum-overlay .strum-dettaglio .strum-scheda-testa strong{font-size:1.15rem;line-height:1.3;}
.strum-overlay .strum-dettaglio .strum-scheda-testa em{font-size:.875rem;white-space:normal;}

/* I campi numerici due per riga quando ci stanno (da 360 px in su): i
   calcoli da 5-6 dati stanno in uno schermo. Le domande dei questionari
   restano una per riga, hanno testi e risposte lunghi. */
.strum-overlay .strum-dettaglio .strum-campi{grid-template-columns:repeat(auto-fill, minmax(9.25rem, 1fr));gap:.85rem .75rem;}
.strum-overlay .strum-dettaglio .strum-voci{grid-template-columns:minmax(0,1fr);gap:.85rem;}
.strum-overlay .strum-campo{min-width:0;justify-content:flex-end;}
/* Le scelte con tante voci (per esempio il farmaco della dose pediatrica)
   hanno testi lunghi: prendono la riga intera, a meta' si leggeva
   "Paracetamolo per...". Sesso, si'/no e simili restano affiancati. */
.strum-overlay .strum-dettaglio .strum-campo:has(select > option:nth-of-type(4)){grid-column:1 / -1;}
.strum-overlay .strum-campo label,
.strum-overlay .strum-voce label{font-size:.875rem;line-height:1.35;}
.strum-overlay .strum-unita{gap:.4rem;}
.strum-overlay .strum-unita input{min-width:0;flex:1 1 auto;}
.strum-overlay .strum-unita span{font-size:.8125rem;}
.strum-overlay .strum-campo :is(input,select),
.strum-overlay .strum-voce select{font-size:16px;min-height:44px;padding:.5rem .65rem;}
.strum-overlay .strum-campo-avviso{font-size:.8125rem;}

/* Il risultato resta appoggiato in fondo allo schermo mentre si compila,
   e torna al suo posto quando ci si arriva scorrendo. */
.strum-overlay .strum-dettaglio .strum-esito{
  position:sticky;bottom:0;z-index:3;
  margin:1.25rem calc(-1 * max(1rem, env(safe-area-inset-right))) 0 calc(-1 * max(1rem, env(safe-area-inset-left)));
  padding:.7rem max(1rem, env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background:var(--doc-bg);border-top:1px solid var(--doc-border);
  box-shadow:0 -12px 16px -12px rgba(2,6,23,.7);
  row-gap:.35rem;
}
html[data-tema="giorno"] .strum-overlay .strum-dettaglio .strum-esito{box-shadow:0 -12px 16px -12px rgba(15,23,42,.25);}
.strum-overlay .strum-dettaglio .strum-valore{font-size:1.75rem;}
.strum-overlay .strum-dettaglio .strum-valore.e-testo{font-size:1rem;}
.strum-overlay .strum-um{font-size:.875rem;}
/* Il significato va a capo sotto il numero, a tutta larghezza: accanto
   restava una colonnina di tre parole per riga. */
.strum-overlay .strum-dettaglio .strum-significato{
  flex:1 1 100%;margin-left:0;padding-left:.75rem;font-size:.9375rem;line-height:1.4;
}
.strum-overlay :is(.strum-avvertenza,.strum-fonte,.strum-nota){font-size:.8125rem;line-height:1.55;}
.strum-overlay .strum-riga :is(b,span){font-size:.875rem;}
.strum-overlay .strum-lettura > summary{min-height:44px;display:flex;align-items:center;gap:.4rem;font-size:.875rem;}
.strum-overlay .strum-banda{font-size:.875rem;}

/* =========================================================================
   5. POSOLOGIA: RICERCA, ELENCO E SCHEDA
   ========================================================================= */
.poso-overlay .poso-sinistra{display:block;border-right:none;border-bottom:none;}
.poso-overlay .poso-cerca{padding:.75rem max(1rem, env(safe-area-inset-right)) .4rem max(1rem, env(safe-area-inset-left));}
.poso-overlay .poso-cerca input{font-size:16px;min-height:48px;padding-top:.6rem;padding-bottom:.6rem;}
.poso-overlay .poso-cerca-box i{font-size:.9rem;}
/* I risultati delle altre specialita' arrivano dentro un contenitore: in
   colonna e' un blocco come gli altri, niente altezze gonfiate. */
.poso-overlay .poso-altre{display:flex;flex-direction:column;gap:2px;}
.poso-overlay .poso-elenco .strum-ve-sigla{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.poso-overlay .poso-elenco .poso-nessuna{font-size:.875rem;padding:.6rem .7rem;margin:0;}

/* La scheda comincia dal nome del farmaco: la riga della lista e della
   fonte (uguale per tutto il gruppo) scende in fondo, accanto alla data
   di aggiornamento. Sul computer resta in cima. */
.poso-overlay .poso-dettaglio .poso-scheda:not([hidden]){display:flex;flex-direction:column;}
.poso-overlay .poso-dettaglio .poso-lista-fonte{
  order:1;margin:1rem 0 0;padding:.75rem 0 0;border-bottom:0;border-top:1px solid var(--doc-border);
  font-size:.8125rem;
}
.poso-overlay .poso-dettaglio .poso-piede{order:2;margin-top:.35rem;padding-top:0;border-top:0;}
.poso-overlay .poso-dettaglio .poso-testa{flex-wrap:wrap;margin-bottom:.6rem;}
.poso-overlay .poso-dettaglio .poso-testa strong{font-size:1.2rem;line-height:1.3;}
.poso-overlay .poso-dettaglio .poso-testa em{font-size:.9375rem;line-height:1.4;margin-top:.2rem;}
.poso-overlay .poso-badge{font-size:.75rem;}
.poso-overlay .poso-riga{padding:.55rem 0;gap:.2rem;}
.poso-overlay .poso-eti{font-size:.75rem;}
.poso-overlay .poso-testo{font-size:.9375rem;line-height:1.55;}
.poso-overlay :is(.poso-fonte,.poso-ped-attesa,.poso-ped-note,.fx-peso-nota,.poso-calc-tetto){font-size:.8125rem;}

/* Calcolo per peso e dose pediatrica: la riga del titolo e' alta un dito,
   i campi a tutta larghezza con le etichette leggibili. */
.poso-overlay :is(.fx-peso,.poso-ped){padding:0 .85rem;}
.poso-overlay :is(.fx-peso,.poso-ped) > summary{min-height:48px;flex-wrap:wrap;row-gap:.15rem;padding:.6rem 0;font-size:.9375rem;}
.poso-overlay .fx-peso-sotto{flex:1 1 100%;font-size:.8125rem;line-height:1.45;}
.poso-overlay .fx-peso-campi{grid-template-columns:minmax(0,1fr);gap:.7rem;}
.poso-overlay .fx-peso-campi label{font-size:.75rem;}
.poso-overlay .fx-peso-campi :is(input,select){font-size:16px;min-height:44px;width:100%;}
.poso-overlay .fx-peso-esito{gap:.5rem 1rem;font-size:.875rem;}
.poso-overlay .fx-peso-copia{min-height:40px;padding:.4rem .9rem;font-size:.875rem;}
.poso-overlay .poso-ped-esito{font-size:.9375rem;}
.poso-overlay .poso-ped-testo{font-size:.9375rem;}
.poso-overlay .poso-ped-fasce{font-size:.875rem;}
.poso-overlay .poso-ped-fasce th{width:38%;}


} /* fine @media screen */