/*
 * Telefono (scrivania): 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: la scrivania del medico (resources/views/doctors/dashboard.blade.php).
 * Ogni regola parte da .main-content, #agendaSezione, #colonnaStrumenti o da
 * un'altra classe che esiste solo nella scrivania: le altre pagine che
 * caricano questo foglio non ne sono toccate. La cartella della visita
 * (.appointment-card.is-focus) e le finestre non sono di questo file.
 *
 * Misure di riferimento: bersagli da toccare di almeno 44 px, testi di
 * almeno 14 px (0.875rem), campi di scrittura a 16 px (sotto quella misura
 * l'iPhone ingrandisce la pagina appena si tocca il campo).
 *
 * Tutto sta dentro @media screen: un foglio A4 stampato dal computer e'
 * largo meno di 768 px e, senza questo recinto, la stampa della scrivania
 * prenderebbe l'impaginazione del telefono.
 */
@media screen {

/* ======================================================================
   1. LA PAGINA
   ====================================================================== */

/* La barra in alto e' fissa (70 px circa): quando "Visite oggi", "Studi
   medici" o "Sidebar" fanno scorrere la pagina fino a una sezione, il
   titolo della sezione finiva sotto la barra. */
#agendaSezione,
#panel-studi-medici,
#colonnaStrumenti{scroll-margin-top:84px;}

/* Lo spazio in fondo per i tre pulsanti tondi flottanti c'e' gia': dopo la
   scrivania viene il piede della pagina, e sotto il piede la pagina lascia
   un margine piu' alto dei pulsanti. */
.main-content{padding-top:.75rem;gap:1.25rem;}

/* ======================================================================
   2. SALUTO, SPECIALITA' E FILA RICETTARIO / POSOLOGIA / STRUMENTI / SIDEBAR
   ====================================================================== */
.main-content .top-bar{gap:.75rem;padding-bottom:1rem;}
.main-content .user-greeting h1{font-size:1.4rem;line-height:1.25;overflow-wrap:anywhere;}
.main-content .user-greeting .subtitle{font-size:.9375rem;padding-left:0;border-left:none;flex-basis:100%;}

/* Quattro pulsanti uguali, due per riga, a tutta larghezza. */
.main-content .top-bar-actions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:100%;
}
.main-content .top-bar-actions .btn{
  width:100%;min-height:44px;justify-content:center;
  padding:.5rem .6rem;font-size:.9375rem;white-space:nowrap;
}
.main-content .top-bar-actions .colonna-toggle-testo{display:inline;}
/* Contrasto di giorno: sul fondo della pagina (#E2E8F0) il petrolio #0E7490
   dei pulsanti fantasma e degli orari delle visite arrivava a 4,35 (minimo
   4,5). Un petrolio appena piu' scuro porta a 5,7. */
html[data-tema="giorno"] .main-content .top-bar-actions .btn-secondary,
html[data-tema="giorno"] .main-content .appointment-card .appointment-info .time{color:#0B6178;}

/* ======================================================================
   3. INDICATORI (visite oggi, lista pazienti, nuovo paziente, studi, fatture)
   Due per riga; "+ Nuovo paziente", l'azione principale, prende la riga
   intera. Etichette a 14 px: a 11 px su un telefono non si leggevano.
   ====================================================================== */
.main-content .indicators-container{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;
  margin-bottom:1.25rem;
}
/* Dentro la scheda: icona e numero sulla prima riga, etichetta sotto, larga
   quanto tutta la scheda. Accanto all'icona "LISTA PAZIENTI" e "FATTURE E
   TS" si spezzavano a meta'. */
.main-content .indicators-container .indicator-card{
  flex:none;min-width:0;min-height:72px;padding:.75rem;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.5rem .625rem;
}
.main-content .indicators-container .indicator-text{display:contents;}
.main-content .indicators-container .indicator-icon{width:40px;height:40px;border-radius:10px;font-size:1.05rem;}
.main-content .indicators-container .indicator-val,
.main-content .indicators-container .indicator-cta{font-size:1.375rem;line-height:1.2;}
.main-content .indicators-container .indicator-label{
  grid-column:1 / -1;font-size:.875rem;letter-spacing:.02em;line-height:1.3;margin-top:0;
}
/* "+ Nuovo paziente" su una riga sola: icona, "+ Nuovo", "PAZIENTE". */
.main-content .indicators-container .indicator-card.is-featured{
  grid-column:1 / -1;grid-template-columns:auto auto minmax(0,1fr);
}
.main-content .indicators-container .indicator-card.is-featured .indicator-label{grid-column:auto;align-self:center;}

/* Telefoni grandi e tablet piccoli in verticale (540-767 px): i quattro
   pulsanti su una riga, gli indicatori tre per riga. */
@media (min-width:540px){
  .main-content .top-bar-actions{grid-template-columns:repeat(4,minmax(0,1fr));}
  .main-content .indicators-container{grid-template-columns:repeat(3,minmax(0,1fr));}
  .main-content .indicators-container .indicator-card.is-featured{grid-column:auto;grid-template-columns:auto minmax(0,1fr);}
  .main-content .indicators-container .indicator-card.is-featured .indicator-label{grid-column:1 / -1;}
}

/* ======================================================================
   4. PANNELLO STUDI MEDICI
   ====================================================================== */
.main-content #panel-studi-medici{padding:1rem;margin-bottom:1.25rem;}
.main-content #panel-studi-medici .panel-header-flex{flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;}
.main-content #panel-studi-medici .panel-header-flex h3{font-size:1.15rem;}
.main-content #panel-studi-medici .btn-add-studio{
  width:100%;min-height:44px;justify-content:center;font-size:.9375rem;
}
.main-content .studio-riga{align-items:flex-start;padding:.75rem 0;}
.main-content .studio-details h4{font-size:1rem;line-height:1.35;}
.main-content .studio-dove,
.main-content .studio-orari{font-size:.875rem;line-height:1.45;}
.main-content .studio-principale{font-size:.8125rem;}
.main-content .studio-actions{gap:0;flex-shrink:0;}
.main-content .studio-actions .btn-icon{
  width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;
}
.main-content .studi-invito .btn{width:100%;min-height:44px;justify-content:center;}

/* ======================================================================
   5. TESTA DELL'AGENDA
   Titolo; Mese / Settimana / Giorno a tutta larghezza; la data (vista
   Giorno) a tutta larghezza; poi Sedi e Nuova Visita sulla stessa riga.
   ====================================================================== */
.main-content .agenda-testa{padding:.75rem;}
.main-content .agenda-comandi{gap:.5rem;}
.main-content .agenda-titolo{font-size:1.125rem;margin-right:0;}

.main-content .vista-switch{display:flex;flex:1 1 100%;padding:3px;}
.main-content .vista-btn{flex:1 1 0;min-height:44px;padding:.4rem .5rem;font-size:.9375rem;}

.main-content .data-nav{display:flex;flex:1 1 100%;min-width:0;padding:3px;}
.main-content .data-nav.is-nascosto{display:none;}
.main-content .data-freccia{flex:0 0 44px;width:44px;height:44px;font-size:.875rem;}
.main-content .data-corrente{
  flex:1 1 auto;min-width:0;height:44px;justify-content:center;padding:0 .5rem;font-size:.9375rem;
}
.main-content .data-corrente .data-testo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.main-content .data-oggi{height:44px;padding:0 .9rem;font-size:.875rem;}

/* Il calendarietto della data si apre largo quanto la testa dell'agenda,
   con giorni grandi da toccare. */
.main-content #dataNav .mini-cal{left:0;right:0;width:auto;padding:.75rem;}
.main-content #dataNav .mini-cal-head{margin-bottom:.35rem;}
.main-content #dataNav .mini-cal-titolo{font-size:1rem;}
.main-content #dataNav .mini-cal-nav{width:44px;height:44px;font-size:.875rem;}
.main-content #dataNav .mini-cal-settimana span{font-size:.8125rem;}
.main-content #dataNav .mini-cal-giorno{min-height:40px;font-size:.9375rem;}

.main-content .sede-campo{flex:0 0 auto;}
.main-content .sede-pill{min-height:44px;padding:0 .9rem;font-size:.9375rem;}
.main-content .sede-menu{max-width:calc(100vw - 3rem);}
.main-content .sede-voce{min-height:44px;font-size:.9375rem;}
.main-content .btn-nuova-visita{
  flex:1 1 auto;min-height:44px;justify-content:center;font-size:.9375rem;
}

/* ======================================================================
   6. CALENDARIO (viste Mese e Settimana)
   ====================================================================== */
.main-content .agenda-calendario{padding:.5rem .5rem .75rem;}

/* Barra del calendario su una riga: frecce e mese al centro, "Oggi" in
   fondo a destra (va a capo da solo sui telefoni piu' stretti). */
.main-content .agenda-calendario .fc .fc-toolbar{
  flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem;
}
.main-content .agenda-calendario .fc .fc-toolbar-chunk:nth-child(2){order:-1;flex:1 1 auto;gap:.25rem;}
.main-content .agenda-calendario .fc .fc-toolbar-chunk:nth-child(3){display:none;}
.main-content .agenda-calendario .fc .fc-toolbar-chunk:nth-child(1){flex:0 0 auto;}
.main-content .agenda-calendario .fc .fc-toolbar-title{font-size:1.0625rem;}
.main-content .agenda-calendario .fc .fc-button{min-height:44px;min-width:44px;font-size:.875rem;}

/* --- Mese: sul telefono una colonna e' larga 45 px e i nomi diventavano
   "G." e "A.". Ogni visita e' un pallino del suo colore (lo stesso della
   legenda) e toccando il giorno si apre la sua lista nella vista Giorno,
   dove ogni visita e' scritta per intero. */
/* Iniziali dei giorni a 14 px; sui telefoni piu' stretti (320 px) scendono
   quanto basta per stare nella colonna. */
.main-content .fc-dayGridMonth-view .fc-col-header-cell-cushion{font-size:min(.875rem, 3.6vw);letter-spacing:0;padding:.4rem 0;}
.main-content .fc-dayGridMonth-view .fc-daygrid-day-frame{min-height:58px;}
.main-content .fc-dayGridMonth-view .fc-daygrid-day-top{justify-content:center;}
.main-content .fc-dayGridMonth-view .fc-daygrid-day-number{font-size:.875rem;padding:.3rem .2rem;}
.main-content .fc-dayGridMonth-view .fc-day-today .fc-daygrid-day-number{
  width:28px;height:28px;min-width:0;padding:0;margin:.2rem auto;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
}
.main-content .fc-dayGridMonth-view .fc-daygrid-day-events{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:0 2px 6px;min-height:0;
}
.main-content .fc-dayGridMonth-view .fc-daygrid-event-harness{margin:0 !important;}
.main-content .fc-dayGridMonth-view .fc-daygrid-event{
  margin:0;padding:0;border:0 !important;background:transparent !important;pointer-events:none;
}
.main-content .fc-dayGridMonth-view .fc-daygrid-event .ev-box{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--ev-tinta,#60a5fa);
}
.main-content .fc-dayGridMonth-view .fc-daygrid-event .ev-nome{display:none;}
/* "+2 altre" non ci sta: resta un segno "+" dello stesso passo dei pallini. */
.main-content .fc-dayGridMonth-view .fc-daygrid-day-bottom{margin:0 !important;pointer-events:none;}
.main-content .fc-dayGridMonth-view .fc-daygrid-more-link{
  display:inline-block;width:9px;height:9px;overflow:hidden;font-size:0;line-height:0;
  border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--doc-text-muted);position:relative;
}

/* --- Settimana: sette colonne da 45 px non si leggono. La griglia resta
   larga come su un tablet e scorre di lato con il dito; l'avviso in cima
   lo dice. */
body.agenda-settimana .main-content #agendaCalendarioWrap::before{
  content:"Scorri di lato per vedere tutti i giorni";
  display:block;margin:.25rem .25rem .6rem;font-size:.875rem;color:var(--doc-text-muted);
}
.main-content .fc-timeGridWeek-view{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
/* Colonne da 7,5rem (120 px): a 390 px si vedono due giorni e mezzo, e il
   mezzo giorno sul bordo dice che la griglia continua di lato. */
.main-content .fc-timeGridWeek-view > .fc-scrollgrid{min-width:calc(3rem + 7 * 7.5rem);}

/* Testata del giorno compatta: giorno e data su una riga, sotto lo studio
   come pillola piccola (nome sopra, orario sotto). Prima la pillola era un
   cerchio largo quanto la colonna e occupava mezzo schermo. */
.main-content .fc-timeGridWeek-view .fc-col-header-cell .fc-scrollgrid-sync-inner{align-items:stretch;}
.main-content .fc-timeGridWeek-view .fc-col-header-cell-cushion{
  display:block;font-size:.875rem;letter-spacing:.04em;white-space:nowrap;text-align:center;padding:.5rem .25rem .4rem;
}
.main-content .fc-timeGridWeek-view .fascia-testate{align-items:stretch;gap:4px;padding:0 4px 6px;}
.main-content .fc-timeGridWeek-view .fascia-testate .fascia-etichetta{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.35rem;row-gap:0;
  width:100%;max-width:none;min-height:0;padding:.25rem .45rem;border-radius:8px;
  text-align:left;white-space:nowrap;font-size:.8125rem;line-height:1.25;letter-spacing:0;
}
.main-content .fc-timeGridWeek-view .fascia-testate .fascia-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.main-content .fc-timeGridWeek-view .fascia-testate .fascia-etichetta small{
  grid-column:2;flex-basis:auto;font-size:.75rem;font-variant-numeric:tabular-nums;
}

/* Le visite: iniziale del nome e cognome su una riga ("M. Esposito"), l'ora
   sotto; se il cognome non ci sta finisce con i puntini, mai spezzato a
   meta' parola. Le righe della mezz'ora sono alte 2,5rem (40 px): una
   visita di mezz'ora contiene le due righe per intero. */
.main-content .fc-timeGridWeek-view .fc-timegrid-slot{height:2.5rem;}
.main-content .fc-timeGridWeek-view .fc-timegrid-event{container-type:inline-size;}
.main-content .fc-timeGridWeek-view .fc-timegrid-event .ev-box{
  justify-content:flex-start;gap:0;padding:.2rem .35rem .15rem .45rem;
}
.main-content .fc-timeGridWeek-view .fc-timegrid-event .ev-nome{
  display:block;width:100%;font-size:.875rem;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;
}
.main-content .fc-timeGridWeek-view .fc-timegrid-event .ev-ora{
  display:block;width:100%;font-size:.8125rem;font-weight:500;line-height:1.15;color:var(--doc-text);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;
}
/* Di notte il testo chiaro #E2E8F0 sulle tinte piene di completate, da
   confermare e impegni personali arrivava a 4,2 (minimo 4,5): in bianco
   passa a 5 e oltre. */
html:not([data-tema="giorno"]) .main-content .fc-timeGridWeek-view .fc-timegrid-event .ev-nome,
html:not([data-tema="giorno"]) .main-content .fc-timeGridWeek-view .fc-timegrid-event .ev-ora{color:#FFFFFF;}
/* Visite piu' corte di mezz'ora: resta il nome. */
.main-content .fc-timeGridWeek-view .fc-timegrid-event-short .ev-box{flex-direction:column;align-items:flex-start;justify-content:center;}
.main-content .fc-timeGridWeek-view .fc-timegrid-event-short .ev-ora{display:none;}
/* Due visite alla stessa ora stanno affiancate, ciascuna in meta' colonna
   (doctor-agenda.js): li' resta il solo cognome, un filo piu' piccolo. */
.main-content .fc-timeGridWeek-view .fc-timegrid-event{margin:1px 1px 1px 2px;}
@container (max-width: 5rem){
  .main-content .fc-timeGridWeek-view .ev-iniziale{display:none;}
  .main-content .fc-timeGridWeek-view .fc-timegrid-event .ev-box{padding-left:.3rem;padding-right:.15rem;}
  .main-content .fc-timeGridWeek-view .fc-timegrid-event .ev-nome{font-size:.8125rem;letter-spacing:-.01em;}
  .main-content .fc-timeGridWeek-view .fc-timegrid-event .ev-ora{font-size:.75rem;}
}
/* Impegni personali: il titolo su due righe a parole intere. */
.main-content .fc-timeGridWeek-view .ev-privato .ev-nome{
  white-space:normal;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  font-size:.8125rem;font-weight:600;
}
/* "adesso" accanto al pallino dell'ora non sta nella colonna delle ore (ne
   restava "AD"): restano il pallino e la linea sul giorno di oggi. */
.main-content .fc-timeGridWeek-view .fc-timegrid-now-indicator-arrow::after{content:none;}
.main-content .fc-timeGridWeek-view .ev-box.ev-breve .ev-ora{display:none;}

/* Scorrimento di lato evidente: finche' a destra ci sono altri giorni il
   bordo sfuma; scorsa la griglia, le ore ferme fanno ombra sui giorni che
   passano sotto (classi messe da doctor-agenda.js). */
.main-content .agenda-calendario .fc-view-harness.e-altro-a-destra::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:1.25rem;z-index:6;pointer-events:none;
  background:linear-gradient(to right, rgba(15,23,42,0), rgba(15,23,42,.55));
}
html[data-tema="giorno"] .main-content .agenda-calendario .fc-view-harness.e-altro-a-destra::after{
  background:linear-gradient(to right, rgba(100,116,139,0), rgba(100,116,139,.2));
}
.main-content .fc-timeGridWeek-view.e-scorsa .fc-timegrid-slot-label,
.main-content .fc-timeGridWeek-view.e-scorsa .fc-col-header .fc-timegrid-axis{box-shadow:6px 0 6px -4px rgba(2,6,23,.45);}
html[data-tema="giorno"] .main-content .fc-timeGridWeek-view.e-scorsa .fc-timegrid-slot-label,
html[data-tema="giorno"] .main-content .fc-timeGridWeek-view.e-scorsa .fc-col-header .fc-timegrid-axis{box-shadow:6px 0 6px -4px rgba(15,23,42,.18);}
/* Sul telefono la Settimana non ha altezza fissa (doctor-agenda.js): i due
   riquadri interni non devono scorrere, cosi' a scorrere di lato e' la vista
   intera e le ore possono restare ferme. */
.main-content .fc-timeGridWeek-view .fc-scroller,
.main-content .fc-timeGridWeek-view .fc-scroller-harness{overflow:visible !important;}
/* Le ore restano ferme a sinistra mentre i giorni scorrono. Per farle stare
   sopra le visite, la tabella delle righe orarie sale di livello e lascia
   passare il tocco (le righe sono trasparenti: sotto si vedono le visite e
   il dito arriva a loro, come prima). */
.main-content .fc-timeGridWeek-view .fc-timegrid-slots{z-index:4;pointer-events:none;}
.main-content .fc-timeGridWeek-view .fc-timegrid-slot-label,
.main-content .fc-timeGridWeek-view .fc-col-header .fc-timegrid-axis{
  position:sticky;left:0;z-index:1;background:var(--doc-panel);
}
.main-content .fc-timeGridWeek-view .fc-timegrid-slot-label-cushion{font-size:.875rem;}
/* Legenda delle fasce degli studi (sotto la Settimana). */
.main-content .agenda-calendario .legenda-voce,
.main-content .agenda-calendario .legenda-nota{font-size:.875rem;min-width:0;}
/* La spiegazione va su una riga sua: accanto ai nomi degli studi finiva in
   una colonnina di una parola per riga. */
.main-content .agenda-calendario .legenda-nota{flex:1 1 100%;}

/* Menu che si apre toccando una visita (Cartella, Avvia, Modifica) o un
   impegno: voci alte 44 px, testi a 14 px, la durata a 16 px (e' un campo). */
.ev-menu{max-width:calc(100vw - 24px);}
.ev-menu .ev-menu-nome{font-size:1rem;}
.ev-menu .ev-menu-quando,
.ev-menu .ev-menu-motivo,
.ev-menu .ev-menu-avviso{font-size:.875rem;}
.ev-menu .ev-menu-voce{min-height:44px;font-size:.9375rem;}
.ev-menu .ev-menu-durata select{min-height:44px;font-size:1rem;}

/* Legenda leggibile, su due colonne. */
.main-content .agenda-legenda{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .75rem;font-size:.875rem;
}
.main-content .agenda-legenda i{width:.75rem;height:.75rem;flex-shrink:0;}
.main-content .agenda-legenda .agenda-stato{grid-column:1 / -1;margin-left:0;font-size:.875rem;}
.main-content .agenda-legenda .agenda-stato:empty{display:none;}
/* Nel Mese si spiega che il giorno si tocca. */
body:not(.agenda-settimana) .main-content .agenda-legenda::after{
  content:"Tocca un giorno per aprire le sue visite.";
  grid-column:1 / -1;font-size:.875rem;color:var(--doc-text-muted);
}

/* ======================================================================
   7. VISTA GIORNO: LE SCHEDE DELLE VISITE
   Ora e nome sulla prima riga, i cartellini (tipo, sede, anamnesi) uno
   accanto all'altro, poi Modifica e Avvia Visita affiancati a tutta
   larghezza. Solo le schede chiuse: la visita aperta (is-focus) e' la
   cartella, che ha il suo foglio (telefono-visita.css).
   ====================================================================== */
.main-content #agendaGiornoWrap{padding:.75rem;}
.main-content .appointments-list .appointment-card:not(.is-focus) .appointment-header{padding:.875rem;gap:.75rem;}
.main-content .appointments-list .appointment-card:not(.is-focus) .appointment-info{
  flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem;
}
.main-content .appointments-list .appointment-card:not(.is-focus) .appointment-info .time{
  min-width:0;font-size:1.125rem;font-variant-numeric:tabular-nums;
}
.main-content .appointments-list .appointment-card:not(.is-focus) .appointment-info .patient-name{
  flex:1 1 calc(100% - 4.5rem);min-width:0;max-width:none;min-height:44px;font-size:1.125rem;
}
.main-content .appointments-list .appointment-card:not(.is-focus) .badge-visit-type,
.main-content .appointments-list .appointment-card:not(.is-focus) .badge-location,
.main-content .appointments-list .appointment-card:not(.is-focus) .badge-stato-visita,
.main-content .appointments-list .appointment-card:not(.is-focus) .badge-anamnesis{
  font-size:.875rem;min-height:32px;align-items:center;
}
.main-content .appointments-list .appointment-card:not(.is-focus) .badge-visit-type{min-width:0;display:inline-flex;}
/* Lo stato dell'anamnesi e' una riga sua, a tutta larghezza, sotto i
   cartellini: prima era una pillola rossa su due righe in mezzo ai
   cartellini e si confondeva. A sinistra lo stato, a destra "Sollecita via
   SMS" vestito da pulsante secondario; il tocco vale su tutta la riga (e'
   un solo pulsante, alto 48 px). */
.main-content .appointments-list .appointment-card:not(.is-focus) .btn-sollecita{
  flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.375rem .75rem;
  min-height:48px;padding:.3125rem .3125rem .3125rem .75rem;border-radius:10px;font-size:.875rem;text-align:left;
}
/* Il fondo rosato solo finche' l'anamnesi manca: durante l'invio e dopo
   restano l'ambra e il verde di sempre. */
.main-content .appointments-list .appointment-card:not(.is-focus) .btn-sollecita:not(.in-corso):not(.inviato){
  background:rgba(239,68,68,.07);border-color:rgba(248,113,113,.32);
}
.main-content .appointments-list .appointment-card:not(.is-focus) .btn-sollecita .btn-sollecita-titolo{flex:1 1 auto;min-width:0;}
.main-content .appointments-list .appointment-card:not(.is-focus) .btn-sollecita small{flex:1 1 100%;font-size:.875rem;}
.main-content .appointments-list .appointment-card:not(.is-focus) .btn-sollecita:not(.in-corso):not(.inviato) small{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;min-height:38px;padding:0 .75rem;border-radius:8px;
  font-weight:700;white-space:nowrap;
  color:#7DD3FC;background:rgba(56,189,248,.10);border:1px solid rgba(56,189,248,.45);
}
.main-content .appointments-list .appointment-card:not(.is-focus) .btn-sollecita:not(.in-corso):not(.inviato) small::before{
  content:"\f7cd";font-family:"Font Awesome 5 Free";font-weight:900;font-size:.9em;
}
.main-content .appointments-list .appointment-card:not(.is-focus) .btn-sollecita:not(.in-corso):not(.inviato):hover small{background:rgba(56,189,248,.18);}
html[data-tema="giorno"] .main-content .appointments-list .appointment-card:not(.is-focus) .btn-sollecita:not(.in-corso):not(.inviato){background:#FEF2F2;border-color:#F3B4B4;}
html[data-tema="giorno"] .main-content .appointments-list .appointment-card:not(.is-focus) .btn-sollecita:not(.in-corso):not(.inviato) small{
  color:#0E7490;background:#EAF6F9;border-color:rgba(14,116,144,.45);
}
html[data-tema="giorno"] .main-content .appointments-list .appointment-card:not(.is-focus) .btn-sollecita:not(.in-corso):not(.inviato):hover small{background:#D5EEF3;}
/* Anamnesi completata: la stessa riga, in verde e senza pulsante. */
.main-content .appointments-list .appointment-card:not(.is-focus) .badge-anamnesis{
  flex:1 1 100%;min-height:40px;padding:.3125rem .75rem;border-radius:10px;
}
/* Di giorno il verde #047857 sul fondo della riga arrivava a 4,1: piu' scuro. */
html[data-tema="giorno"] .main-content .appointments-list .appointment-card:not(.is-focus) .badge-anamnesis.success{color:#065F46;}
/* Affiancati quando ci stanno ("Modifica" e "Avvia Visita"), uno sotto
   l'altro quando no ("Avvia Visita Telematica" e "Visita Completata" sono
   piu' lunghi). Affiancati, Modifica resta della sua misura e il pulsante
   principale prende il resto, a destra; uno sotto l'altro, ciascuno prende
   la riga intera. */
.main-content .appointments-list .appointment-card:not(.is-focus) .appointment-actions{width:100%;flex-wrap:wrap;}
.main-content .appointments-list .appointment-card:not(.is-focus) .appointment-actions .btn{
  flex:1 1 auto;min-height:44px;justify-content:center;white-space:nowrap;
  padding:.5rem .9rem !important;font-size:.9375rem !important;
}
.main-content .appointments-list .appointment-card:not(.is-focus) .appointment-actions .btn-avvia{flex-grow:999;}
/* "Modifica": pulsante secondario fantasma della palette. Prima era grigio
   tenue su grigio e sembrava spento accanto al principale. */
.main-content .appointments-list .appointment-card:not(.is-focus) .appointment-actions .btn-posticipa{
  color:#7DD3FC;background:rgba(56,189,248,.06);border:1px solid rgba(56,189,248,.45);font-weight:600;
}
.main-content .appointments-list .appointment-card:not(.is-focus) .appointment-actions .btn-posticipa:hover{
  color:#BAE6FD;background:rgba(56,189,248,.16);border-color:rgba(56,189,248,.7);
}
html[data-tema="giorno"] .main-content .appointments-list .appointment-card:not(.is-focus) .appointment-actions .btn-posticipa{
  color:#0E7490;background:#EAF6F9;border-color:rgba(14,116,144,.45);
}
html[data-tema="giorno"] .main-content .appointments-list .appointment-card:not(.is-focus) .appointment-actions .btn-posticipa:hover{
  color:#155E75;background:#D5EEF3;border-color:#0E7490;
}

/* Impegni personali e appuntamenti del Team nella giornata. Il titolo
   stava su una riga e si tagliava ("Riunione con il laborator...",
   "Team · Broker assicur..."): ora va a capo, al massimo su due righe.
   L'ora di fine e lo stato del Team erano a 11 px: passano a 13-14 px. La
   riga del Team resta tutta un collegamento; sotto il titolo lo stato a
   sinistra e "Apri" a destra. */
.main-content .appointments-list .impegno-riga{flex-wrap:wrap;min-height:52px;row-gap:.25rem;}
.main-content .appointments-list .impegno-titolo,
.main-content .appointments-list .ev-team-titolo{
  flex:1 1 9rem;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.main-content .appointments-list :is(.impegno-ora,.ev-team-ora) small{font-size:.8125rem;}
.main-content .appointments-list .ev-team-riga{font-size:.9375rem;row-gap:.4rem;}
.main-content .appointments-list .ev-team-icona{width:1.75rem;height:1.75rem;font-size:.8125rem;}
.main-content .appointments-list .ev-team-stato{font-size:.8125rem;padding:.25rem .7rem;}
.main-content .appointments-list .ev-team-apri{font-size:.875rem;min-height:36px;}

/* Giornata libera: i due pulsanti uno sotto l'altro, a tutta larghezza. */
.main-content .giornata-libera-azioni{flex-direction:column;align-items:stretch;}
.main-content .giornata-libera-azioni .btn{width:100%;min-height:44px;justify-content:center;font-size:.9375rem;}

/* Barra delle richieste di appuntamento in attesa: il testo prende tutta la
   riga e "Guardale ora" va sotto, invece di schiacciarlo in una colonnina. */
.main-content .rich-barra{flex-wrap:wrap;gap:.625rem .875rem;padding:.875rem;margin-bottom:1.25rem;}
.main-content .rich-barra .rich-testo{flex:1 1 calc(100% - 56px);font-size:.9375rem;}
.main-content .rich-barra .rich-vai{flex:1 1 100%;justify-content:flex-end;min-height:28px;font-size:.9375rem;}

/* La finestra delle richieste (si apre da "Guardale ora"): a tutto schermo.
   Sotto i 700 px la pagina gia' mette le richieste in una fila che scorre
   di lato sopra la giornata; qui misure da telefono e pulsanti da 44 px.
   Le regole partono da #richVelo perche' lo stile della finestra sta
   dentro la pagina, dopo questo foglio. */
#richVelo{padding:0;align-items:stretch;justify-content:stretch;}
#richVelo .rich-carta{
  max-width:none;max-height:none;height:100%;border:0;border-radius:0;
  padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
#richVelo .rich-testa{padding:.375rem .5rem .375rem 1rem;gap:.5rem;}
#richVelo .rich-testa h3{font-size:1.0625rem;line-height:1.3;}
#richVelo .rich-chiudi{width:44px;height:44px;flex-shrink:0;font-size:1.75rem;}
#richVelo .rich-lista{padding:.75rem;gap:.5rem;}
#richVelo .rich-voce{min-height:44px;min-width:200px;}
#richVelo .rich-voce b{font-size:.9375rem;}
#richVelo .rich-voce em{font-size:.875rem;}
#richVelo .rich-voce-tipo{font-size:.75rem;}
#richVelo .rich-giorno{padding:1rem;}
#richVelo .rich-invito,
#richVelo .rich-note,
#richVelo .rich-g-blocco,
#richVelo .rich-g-testa span{font-size:.875rem;}
#richVelo .rich-azioni{gap:.5rem;}
#richVelo .rich-durata{flex:1 1 100%;font-size:.8125rem;}
#richVelo .rich-durata select{flex:1 1 auto;min-height:44px;font-size:1rem;}
#richVelo .rich-btn{flex:1 1 auto;min-height:44px;justify-content:center;font-size:.9375rem;}

/* ======================================================================
   8. COLONNA DI DESTRA (Agenda Privata, Aria, Andamento, Tempo guadagnato,
   richieste di annullamento). Sul telefono sta sotto l'agenda e parte
   chiusa: si apre con "Sidebar" (lo script porta la pagina fin qui).
   ====================================================================== */
.main-content #colonnaStrumenti{gap:1.25rem;}
.main-content #colonnaStrumenti .sidebar-box{padding:1rem;}
.main-content #colonnaStrumenti .widget-header{flex-wrap:wrap;gap:.5rem;}
.main-content #colonnaStrumenti .widget-header h3{font-size:1.0625rem;}
.main-content #colonnaStrumenti .widget-action{width:44px;height:44px;font-size:.9375rem;}
.main-content #colonnaStrumenti .agenda-privata-sotto{font-size:.875rem;}
.main-content #colonnaStrumenti .priv-data-freccia{width:44px;height:44px;font-size:.875rem;}
.main-content #colonnaStrumenti .priv-data-campo{min-height:44px;font-size:.9375rem;}
.main-content #colonnaStrumenti .priv-nuovo{width:44px;height:44px;}
.main-content #colonnaStrumenti .copilot-espandi{width:44px;height:44px;}
.main-content #colonnaStrumenti .copilot-specialita{font-size:.875rem;}
.main-content #colonnaStrumenti .copilot-sug-eti{font-size:.8125rem;}
.main-content #colonnaStrumenti .copilot-chip{font-size:.875rem;min-height:44px;}
.main-content #colonnaStrumenti .chat-input{font-size:1rem;}
.main-content #colonnaStrumenti .btn-mic{width:44px;height:44px;flex-shrink:0;}
.main-content #colonnaStrumenti .weekly-chart .chart-col .day{font-size:.875rem;}
.main-content #colonnaStrumenti .sett-sintesi,
.main-content #colonnaStrumenti .sett-delta{font-size:.875rem;}
/* "+3 sulla scorsa" di giorno: verde #059669 su bianco = 3,77; #047857 = 5,5. */
html[data-tema="giorno"] .main-content #colonnaStrumenti .sett-delta.e-su{color:#047857;}
.main-content #colonnaStrumenti .private-timeline{font-size:.875rem;}
.main-content #colonnaStrumenti .private-timeline span,
.main-content #colonnaStrumenti .private-timeline b{font-size:.875rem;}
/* L'ora di fine degli impegni e del Team (era a 11 px) e lo stato del Team. */
.main-content #colonnaStrumenti .private-timeline small{font-size:.8125rem;}
.main-content #colonnaStrumenti .private-timeline .ev-team-stato{font-size:.8125rem;padding:.25rem .7rem;}
.main-content #colonnaStrumenti .private-timeline .ev-team-apri{font-size:.875rem;}
.main-content #colonnaStrumenti .tempo-dettaglio summary{font-size:.875rem;min-height:44px;}
.main-content #colonnaStrumenti .tempo-voci li,
.main-content #colonnaStrumenti .tempo-nota,
.main-content #colonnaStrumenti .tempo-scala,
.main-content #colonnaStrumenti .widget-progress span{font-size:.875rem;}
/* Il calendarietto della data dell'Agenda Privata (#privMiniCal) lo sistema
   telefono-finestre.css (sezione 14): qui non si ripete. */
.main-content #colonnaStrumenti .annulli-chi{font-size:1rem;}
.main-content #colonnaStrumenti .annulli-quando,
.main-content #colonnaStrumenti .annulli-motivo{font-size:.875rem;}
.main-content #colonnaStrumenti .annulli-azioni{flex-direction:column;}
.main-content #colonnaStrumenti .annulli-btn{min-height:44px;font-size:.9375rem;}

/* ======================================================================
   9. ARIA A SCHERMO INTERO (dal pulsante tondo o da "espandi")
   Occupa tutto lo schermo; la testata e la casella di scrittura restano
   dentro le aree sicure dell'iPhone (tacca in alto, barra in basso).
   ====================================================================== */
/* Sul computer la chat aperta e' una "stanza" con la cornice, sospesa sul
   velo scuro. Sul telefono la stanza e' lo schermo: niente angoli tondi ne'
   bordi laterali, e il fondo della stanza anche sotto le aree sicure. */
.main-content #colonnaStrumenti .aria-copilot.e-espanso{
  inset:0;border-radius:0;background:#1B2536;
  padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
html[data-tema="giorno"] .main-content #colonnaStrumenti .aria-copilot.e-espanso{background:#F8FAFC;}
.aria-copilot.e-espanso .copilot-header{border-radius:0;border-width:0 0 1px;padding:.75rem 1rem .75rem;}
.aria-copilot.e-espanso .chat-area{border-left:0;border-right:0;padding:1rem;}
.aria-copilot.e-espanso .chat-input-area{border-radius:0;border-width:1px 0 0;padding:.6rem 1rem .75rem;}
.aria-copilot.e-espanso .copilot-espandi{width:44px;height:44px;}
.aria-copilot.e-espanso .copilot-esc-nota{display:none;}
.aria-copilot.e-espanso .copilot-chip{font-size:.9375rem;min-height:44px;}
.aria-copilot.e-espanso .copilot-sug-eti{font-size:.8125rem;}
.aria-copilot.e-espanso .copilot-specialita{font-size:.875rem;}
.aria-copilot.e-espanso .chat-input{font-size:1rem;}
.aria-copilot.e-espanso .btn-mic{width:44px;height:44px;flex-shrink:0;}

/* La casella di scrittura di Aria. Due vecchie regole generiche per i
   telefoni (styles.css: ".chat-input" con 55 px di vuoto sotto il testo;
   css_general: ".chat-input-area" con 8 px tutto attorno, entrambe con
   !important) la facevano alta 83 px, col testo attaccato al bordo
   sinistro. Qui si rimettono le misure della casella; servono !important
   e un selettore piu' preciso per scavalcarle. */
html body .aria-copilot .chat-input{padding:.5rem 0 !important;min-height:40px;line-height:1.45;}
html body.page-system .aria-copilot .chat-input-area{padding:.3rem .3rem .3rem 1rem !important;}
/* A schermo intero la casella e' un campo arrotondato a se', con "Invia"
   accanto, sopra la barra di sistema dell'iPhone. */
html body.page-system .aria-copilot.e-espanso .chat-input-area{
  align-items:flex-end;gap:.5rem;
  padding:.6rem max(.75rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)) !important;
}
html body .aria-copilot.e-espanso .chat-input{
  min-height:44px;padding:.55rem 1rem !important;border:1px solid var(--doc-campo-bordo, #64748B);border-radius:22px;
  background:rgba(15,23,42,.55);
}
html[data-tema="giorno"] body .aria-copilot.e-espanso .chat-input{background:#FFFFFF;}
html body .aria-copilot.e-espanso .chat-input:focus{border-color:var(--doc-cyan);}
/* Le domande del medico a destra e un po' piu' strette, le risposte di
   Aria a tutta larghezza: a colpo d'occhio si vede chi parla. (Sul
   computer tutte le bolle sono larghe uguali.) */
.aria-copilot .message[style*="row-reverse"] .msg-content{max-width:85% !important;}
/* Contrasto: il bianco sul verde acqua #0D9488 in fondo alla bolla del
   medico arrivava a 3,7 (minimo 4,5); con #0F766E passa a 5,5. Il colore
   e' scritto dallo script dentro la bolla, percio' serve !important.
   (Uguale difetto sul computer.) */
.aria-copilot .message[style*="row-reverse"] .msg-content{background:linear-gradient(135deg,#1A56DB,#0F766E) !important;}

/* Andamento dello Studio aperto (dal pulsante-espandi di "Flusso
   Pazienti"): a tutto schermo come Aria, invece di una scheda sospesa con
   i margini. */
.main-content #colonnaStrumenti .anda-box.e-espanso{
  inset:0;border-radius:0;border:0;
  padding:calc(1rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px))
          calc(1.25rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
}
.anda-box.e-espanso .copilot-esc-nota{display:none;}
.anda-box.e-espanso .anda-tessere{gap:.625rem;}
.anda-box.e-espanso .anda-tessera{padding:.875rem;}
.anda-box.e-espanso .anda-tessera > span,
.anda-box.e-espanso .anda-delta,
.anda-box.e-espanso .anda-eti,
.anda-box.e-espanso .anda-nota,
.anda-box.e-espanso .anda-ts-pillola,
.anda-box.e-espanso h4{font-size:.875rem;}
/* Dodici mesi in 300 px: dodici sigle a 12 px si toccavano ("MARAPRMAG").
   Resta scritto un mese si' e uno no, contando dal mese in corso (l'ultimo),
   che si legge sempre; le barre restano tutte e dodici. */
.anda-box.e-espanso .ac-mese{font-size:.75rem;letter-spacing:0;}
.anda-box.e-espanso .ac-col:nth-last-child(even) .ac-mese{visibility:hidden;}
.anda-box.e-espanso .ac-val{font-size:.8125rem;}
/* "+5 sul mese scorso" di giorno: il verde #059669 sulla tessera bianca
   arrivava a 3,8; #047857 porta a 5,5 (come "sulla scorsa" qui sopra).
   (Uguale difetto sul computer.) */
html[data-tema="giorno"] .anda-box.e-espanso .anda-delta.e-su{color:#047857;}

/* ======================================================================
   10. VIDEO DI BENVENUTO (solo al primissimo accesso)
   ====================================================================== */
.benv-velo{
  padding:calc(.75rem + env(safe-area-inset-top, 0px)) .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
}
.benv-scatola{width:100%;padding:1.1rem;}
.benv-scatola h2{font-size:1.2rem;line-height:1.3;}
.benv-guida{font-size:.9375rem;}
.benv-piede{flex-direction:column;align-items:stretch;gap:.5rem;}
.benv-piede .benv-barra{flex:0 0 auto;}
.benv-nota{font-size:.875rem;white-space:normal;text-align:center;}

/* I pulsanti "?" di aiuto (tocco su 44 px) li sistema per tutte le pagine
   telefono-finestre.css (sezione 12): qui non si ripete. */

} /* fine di @media screen */