/* app.css - demo Nuova Salute.
   COLORI: solo quelli del LOGO della cliente (Andrea, 13/11/2026: il sito non si copia): blu del testo #2E5A90, blu della croce
   #467EB2, rosso del cuore #CC4D46. IMPOSTAZIONE: quella delle demo G&A (standard_webapp: misura al testo, colonne fisse, titolo
   col suo comando accanto, niente testi d'aiuto) con il tono di mamaskin.app indicato da Andrea: fondi chiarissimi sfumati, schede
   bianche con angoli larghi e ombra appena accennata, pulsanti a pillola alti 44px, barra di navigazione "di vetro" che galleggia
   in basso sul telefono, titoli stretti (letter-spacing negativo), Manrope. Font in locale (niente rete, regola 9bis di linea). */
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(../fonts/manrope-400.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url(../fonts/manrope-500.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(../fonts/manrope-600.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(../fonts/manrope-700.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 800; font-display: swap; src: url(../fonts/manrope-800.woff2) format('woff2'); }

:root {
  color-scheme: only light;   /* voce 38 dello standard: i browser che scuriscono da soli non toccano la pagina */
  --ink: #17263A; --soft: #3F5065; --muted: #6A7A8E; --line: #E2E9F1; --line-forte: #CFDAE6;
  --blu: #2E5A90; --blu-2: #467EB2; --blu-soft: #EAF1F9; --blu-tenue: #F4F8FC;
  --cuore: #CC4D46; --cuore-soft: #FBECEB;
  --ok: #2A7350; --ok-soft: #E6F3EC; --att: #9A5B0C; --att-soft: #FCF1E1; --spento: #8592A3; --spento-soft: #EEF1F5;
  --fondo: #F6F9FC;
  --raggio: 22px; --raggio-s: 14px;
  --ombra: 0 14px 30px rgba(15, 23, 42, .045), 0 2px 6px rgba(15, 23, 42, .03);
  --ombra-su: 0 24px 40px -12px rgba(30, 60, 100, .22);
  --menu: 248px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15.5px; line-height: 1.5; color: var(--ink);
  background: linear-gradient(160deg, #F3F7FC 0%, #FFFFFF 55%, #FDF6F6 100%) fixed; min-height: 100vh; }
body.bloccato { overflow: hidden; }
h1, h2, h3 { letter-spacing: -.03em; line-height: 1.15; margin: 0; font-weight: 800; }
h1 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
h2 { font-size: 1.2rem; font-weight: 750; }
h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--blu); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icona { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.muto { color: var(--muted); }
.occhiello { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--blu-2); outline-offset: 2px; }

/* ---- pulsanti: pillole alte 44px ---- */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--blu);
  background: var(--blu); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px -6px rgba(46,90,144,.5); }
.bottone:hover { background: #274E7E; }
.bottone.secondario { background: rgba(255,255,255,.9); color: var(--ink); border-color: var(--line-forte); box-shadow: none; }
.bottone.secondario:hover { border-color: var(--blu-2); background: var(--blu-soft); }
.bottone.verde { background: var(--ok); border-color: var(--ok); }
.bottone.piccolo { min-height: 36px; padding: 0 14px; font-size: .9rem; }
.bottone:disabled { opacity: .5; cursor: default; }
.tasto-icona { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); }
.tasto-icona:hover { background: var(--blu-soft); }
.tasti-contatto { display: flex; gap: 10px; flex-wrap: wrap; }
.tasto-tondo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-forte); background: #fff; color: var(--ink); font-weight: 650; text-decoration: none; font-size: .92rem; }
.tasto-tondo .icona { width: 18px; height: 18px; color: var(--blu); }
.tasto-tondo:hover { border-color: var(--blu-2); background: var(--blu-soft); }

/* ---- pillole e chip ---- */
.pillola { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--blu-soft); color: var(--blu); white-space: nowrap; }
.pillola.ok { background: var(--ok-soft); color: var(--ok); }
.pillola.att { background: var(--att-soft); color: var(--att); }
.pillola.rosso { background: var(--cuore-soft); color: var(--cuore); }
.pillola.spento { background: var(--spento-soft); color: var(--spento); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: var(--blu-tenue); border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--soft); }
.avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--c); color: #fff; font-weight: 800; font-size: .85rem; flex: none; box-shadow: 0 0 0 3px #fff; }
.avatar.piccolo { width: 26px; height: 26px; font-size: .68rem; box-shadow: none; }
.puntino { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--c, var(--blu)); flex: none; }

/* ---- campi ---- */
label.campo { display: grid; gap: 6px; font-weight: 650; font-size: .9rem; color: var(--soft); }
input[type=text], input[type=search], input[type=password], input[type=date], input[type=time], input[type=number], input[type=email], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-forte); border-radius: var(--raggio-s); background: #fff; font-size: 16px; color: var(--ink); }
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blu-2); box-shadow: 0 0 0 4px var(--blu-soft); }
.campo-nota { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }
.microfono { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 76px; border-radius: var(--raggio-s); border: 1px solid var(--line-forte);
  background: linear-gradient(145deg, #fff, var(--cuore-soft)); color: var(--cuore); font-weight: 750; font-size: .8rem; }
.microfono .icona { width: 24px; height: 24px; }
.microfono.ascolta { background: var(--cuore); color: #fff; border-color: var(--cuore); animation: pulsa 1.3s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(204,77,70,.45); } 50% { box-shadow: 0 0 0 9px rgba(204,77,70,0); } }
@media (prefers-reduced-motion: reduce) { .microfono.ascolta { animation: none; } }
.cerca { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-forte); border-radius: 999px; background: #fff; flex: 1; min-width: 0; max-width: 420px; }
.cerca input { border: 0; padding: 0; min-height: 0; box-shadow: none !important; background: transparent; }
.cerca .icona { color: var(--muted); }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.spunta { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 600; }
.spunta input { width: 20px; height: 20px; accent-color: var(--blu); }

/* ---- segmenti (le viste) e linguette ---- */
.segmenti { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--blu-soft); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmenti button { border: 0; background: transparent; min-height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 700; color: var(--soft); white-space: nowrap; }
.segmenti button[aria-selected=true] { background: #fff; color: var(--blu); box-shadow: 0 2px 8px rgba(30,60,100,.12); }

/* ---- impianto: menu a sinistra sul computer, barra in alto e navigazione di vetro in basso sul telefono ---- */
.ingresso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.ingresso-scheda { width: 100%; max-width: 400px; background: rgba(255,255,255,.92); border: 1px solid #fff; border-radius: 28px; padding: 34px 28px; box-shadow: var(--ombra-su); display: grid; gap: 16px; text-align: center; }
.ingresso-scheda img { width: 220px; height: auto; margin: 0 auto 6px; }
.errore { color: var(--cuore); font-weight: 650; min-height: 1.2em; font-size: .92rem; }
.scelta-utente { display: grid; gap: 10px; text-align: left; }
.scelta-utente button { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; border: 1px solid var(--line); background: #fff; text-align: left; }
.scelta-utente button:hover { border-color: var(--blu-2); background: var(--blu-tenue); }
.scelta-utente b { display: block; }
.scelta-utente small { color: var(--muted); }

.menu { position: fixed; inset: 0 auto 0 0; width: var(--menu); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.75); border-right: 1px solid var(--line); backdrop-filter: blur(12px); z-index: 20; }
.menu .marchio { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; text-decoration: none; color: var(--blu); }
.menu .marchio b { font-size: 1.12rem; letter-spacing: -.03em; }
.menu .marchio small { display: block; color: var(--muted); font-weight: 600; font-size: .74rem; letter-spacing: .02em; }
.marchio svg { width: 34px; height: 34px; flex: none; }
.voce { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 999px; color: var(--soft); text-decoration: none; font-weight: 700; }
.voce:hover { background: var(--blu-soft); color: var(--ink); }
.voce[aria-current=page] { background: var(--blu); color: #fff; box-shadow: 0 8px 18px -8px rgba(46,90,144,.6); }
.voce .conta { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--cuore); color: #fff; font-size: .74rem; display: grid; place-items: center; }
.menu-fondo { margin-top: auto; display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.menu-fondo .io { display: flex; align-items: center; gap: 10px; padding: 6px 10px 10px; }
.menu-fondo .io b { display: block; font-size: .92rem; }
.menu-fondo .io small { color: var(--muted); font-size: .78rem; }
.menu-fondo button { text-align: left; border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; color: var(--soft); font-weight: 650; font-size: .9rem; }
.menu-fondo button:hover { background: var(--blu-soft); }
.versione { padding: 4px 14px; color: var(--muted); font-size: .72rem; }

.barra { display: none; }
.navigazione { display: none; }
main { margin-left: var(--menu); padding: 28px 32px 48px; }
.contenuto { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }  /* minmax(0,1fr): una riga lunga non allarga la pagina */

@media (max-width: 979px) {
  .menu { display: none; }
  main { margin-left: 0; padding: 16px 16px 112px; }
  .barra { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 15; padding: 10px 16px; background: rgba(255,255,255,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .barra .marchio { display: flex; align-items: center; gap: 8px; color: var(--blu); text-decoration: none; font-weight: 800; letter-spacing: -.03em; }
  .barra .marchio svg { width: 28px; height: 28px; }
  .barra .spazio { flex: 1; }
  .barra .io { border: 0; background: transparent; padding: 0; }
  /* la barra di vetro che galleggia (mamaskin): sopra il bordo inferiore del telefono, mai sopra l'ultima riga (padding di main) */
  .navigazione { display: flex; position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 18; height: 66px; padding: 6px; gap: 2px;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.78); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: inset 0 1px 1px #fff, 0 12px 30px -10px rgba(30,60,100,.28), 0 2px 6px rgba(30,60,100,.06); }
  .navigazione a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 999px; color: var(--soft); text-decoration: none; font-size: .7rem; font-weight: 750; position: relative; min-width: 0; }
  .navigazione a[aria-current=page] { background: var(--blu); color: #fff; }
  .navigazione .conta { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--cuore); color: #fff; font-size: .66rem; display: grid; place-items: center; }
}

/* ---- testata di pagina: titolo e il suo comando accanto ---- */
.testata { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.testata .titoli { display: grid; gap: 4px; min-width: 0; }
.comandi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.riquadro { background: #fff; border: 1px solid var(--line); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 20px; min-width: 0; }
.riquadro > h2, .riquadro > header { margin-bottom: 14px; }
.riquadro > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vuoto { padding: 28px 16px; text-align: center; color: var(--muted); font-weight: 600; }
.colonne { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1100px) { .colonne { grid-template-columns: minmax(0, 1fr); } }

/* da fare: le cose che aspettano qualcuno, portano dove si agisce */
.da-fare { display: flex; gap: 10px; flex-wrap: wrap; }
.da-fare a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 650; box-shadow: var(--ombra); font-size: .92rem; }
.da-fare a b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 99px; background: var(--cuore-soft); color: var(--cuore); }
.da-fare a.calmo b { background: var(--blu-soft); color: var(--blu); }

/* ---- agenda ---- */
.navdata { display: flex; align-items: center; gap: 6px; }
.navdata h1 { min-width: 0; }
.giornata-op { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 18px; align-items: start; }
.colonna-op { display: grid; gap: 10px; }
.colonna-op > header { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.colonna-op > header b { display: block; }
.colonna-op > header small { color: var(--muted); font-weight: 600; }
.visita { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: #fff;
  box-shadow: var(--ombra); position: relative; overflow: hidden; color: inherit; }
.visita::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--c, var(--blu)); }
.visita:hover { border-color: var(--blu-2); }
.visita .ora { display: grid; align-content: start; font-variant-numeric: tabular-nums; }
.visita .ora b { font-size: 1.12rem; letter-spacing: -.02em; }
.visita .ora span { color: var(--muted); font-size: .82rem; font-weight: 600; }
.visita .corpo { display: grid; gap: 6px; min-width: 0; }
.visita .nome { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 800; font-size: 1.04rem; letter-spacing: -.02em; }
.visita .nome .pillola { flex: none; }
.visita .luogo { color: var(--muted); font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visita .segni { display: flex; gap: 6px; flex-wrap: wrap; }
.visita.annullato { opacity: .55; }
.visita.annullato .nome span:first-child { text-decoration: line-through; }
.visita.eseguito { background: linear-gradient(145deg, #fff, #F3FAF6); }
.settimana { display: grid; grid-template-columns: repeat(var(--giorni, 7), minmax(0, 1fr)); gap: 10px; }
.giorno-sett { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px; min-height: 160px; display: grid; align-content: start; gap: 6px; box-shadow: var(--ombra); }
.giorno-sett > button.titolo-g { border: 0; background: transparent; text-align: left; padding: 2px 4px 6px; font-weight: 800; display: flex; justify-content: space-between; align-items: baseline; }
.giorno-sett.oggi { border-color: var(--blu-2); box-shadow: 0 0 0 3px var(--blu-soft); }
.mini { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px; border: 0; background: var(--blu-tenue); text-align: left; font-size: .8rem; font-weight: 650; min-width: 0; }
.mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini b { font-variant-numeric: tabular-nums; }
.mini.annullato { opacity: .5; text-decoration: line-through; }
.mese { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.mese .intest { text-align: center; font-size: .75rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.cella { min-height: 92px; padding: 8px 10px; border-radius: 16px; border: 1px solid var(--line); background: #fff; text-align: left; display: grid; align-content: space-between; gap: 6px; }
.cella.fuori { opacity: .4; }
.cella.oggi { border-color: var(--blu-2); box-shadow: 0 0 0 3px var(--blu-soft); }
.cella .n { font-weight: 800; }
.cella .quante { font-size: 1.25rem; font-weight: 800; color: var(--blu); letter-spacing: -.03em; }
.cella .quante small { font-size: .72rem; color: var(--muted); font-weight: 650; letter-spacing: 0; }
.cella .punti { display: flex; gap: 3px; flex-wrap: wrap; }
.elenco-giorni { display: grid; gap: 22px; }
.elenco-giorni h2 { margin-bottom: 10px; font-size: 1.02rem; }
.elenco-giorni .lista { display: grid; gap: 10px; }
@media (max-width: 979px) {
  .settimana { grid-template-columns: minmax(0, 1fr); }
  .giorno-sett { min-height: 0; }
  .mese { gap: 4px; }
  .cella { min-height: 58px; padding: 6px; border-radius: 12px; }
  .cella .quante { font-size: 1rem; }
  .cella .quante small, .cella .punti { display: none; }
  .visita { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 12px 12px 12px 16px; }
}

/* ---- scheda laterale (appuntamento, paziente in breve) ---- */
.velo { position: fixed; inset: 0; background: rgba(23,38,58,.28); opacity: 0; transition: opacity .2s; z-index: 40; }
.velo.aperto { opacity: 1; }
.scheda { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: #fff; z-index: 41; overflow-y: auto; transform: translateX(100%); transition: transform .22s ease; box-shadow: -20px 0 40px rgba(23,38,58,.15); }
.scheda.larga { width: min(760px, 100%); }
.scheda.aperta { transform: none; }
.scheda-corpo { padding: 26px 24px 40px; display: grid; gap: 20px; }
.chiudi-scheda { position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; background: #fff; z-index: 2; border: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .scheda, .velo { transition: none; } }
.blocco { display: grid; gap: 10px; }
.blocco > h3 { display: flex; align-items: center; gap: 8px; }
.blocco > h3 .icona { color: var(--blu-2); }
.da-sapere { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(145deg, #fff, var(--cuore-soft)); border: 1px solid #F3D9D7; }
.da-sapere div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: .93rem; }
.da-sapere dt, .da-sapere div > span:first-child { color: var(--muted); font-weight: 700; }
.righe { display: grid; }
.riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.riga:last-child { border-bottom: 0; }
.riga small { color: var(--muted); font-weight: 600; }
.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.cifra { padding: 14px 16px; border-radius: 18px; background: var(--blu-tenue); border: 1px solid var(--line); display: grid; gap: 2px; }
.cifra b { font-size: 1.5rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cifra span { color: var(--muted); font-weight: 650; font-size: .82rem; }
.cifra.link { text-decoration: none; color: inherit; }
.cifra.link:hover { border-color: var(--blu-2); }
.barre { display: grid; gap: 8px; }
.barra-h { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: .9rem; font-weight: 600; }
.barra-h .traccia { height: 10px; border-radius: 99px; background: var(--blu-soft); overflow: hidden; }
.barra-h .traccia span { display: block; height: 100%; border-radius: 99px; background: var(--c, var(--blu-2)); }
.barra-h.euro { grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) 84px; }
.barra-h b { text-align: right; font-variant-numeric: tabular-nums; }
.tempo { display: grid; gap: 0; }
.tempo .evento { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tempo .evento:last-child { border-bottom: 0; }
.tempo .quando { font-weight: 800; font-size: .88rem; font-variant-numeric: tabular-nums; }
.tempo .quando small { display: block; color: var(--muted); font-weight: 600; }
.tempo .cosa { display: grid; gap: 6px; min-width: 0; }
.tempo .testo-nota { white-space: pre-wrap; }
.tempo .chi { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; font-weight: 650; flex-wrap: wrap; }
.azioni-fine { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.testo { color: var(--soft); max-width: 62ch; }

/* ---- finestra ---- */
.finestra-velo { display: grid; place-items: center; padding: 16px; }
.finestra { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 26px; box-shadow: var(--ombra-su); }
.finestra > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 0 24px; }
.finestra-corpo { padding: 16px 24px 24px; display: grid; gap: 16px; }
.scelte-prest { display: flex; flex-wrap: wrap; gap: 8px; }
.scelte-prest label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-forte); background: #fff; font-weight: 650; font-size: .88rem; cursor: pointer; }
.scelte-prest input { accent-color: var(--blu); }
.scelte-prest label:has(input:checked) { background: var(--blu-soft); border-color: var(--blu-2); color: var(--blu); }
.avviso { padding: 12px 14px; border-radius: var(--raggio-s); background: var(--att-soft); color: var(--att); font-weight: 650; font-size: .9rem; }

/* ---- tabelle che scorrono dentro il loro riquadro, mai la pagina ---- */
.scorre { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table.tab { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tab th { text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 800; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tab td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tab tr:last-child td { border-bottom: 0; }
.tab tr[data-vai] { cursor: pointer; }
.tab tr[data-vai]:hover td { background: var(--blu-tenue); }
.tab .destra, .tab th.destra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab .nome b { display: block; }
.tab .nome small { color: var(--muted); font-weight: 600; }
.tab input { min-height: 36px; padding: 6px 10px; }
@media (max-width: 720px) { .solo-largo { display: none; } }

/* pazienti come schede sul telefono */
.carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.carta { display: grid; gap: 8px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: #fff; box-shadow: var(--ombra); text-decoration: none; color: inherit; }
.carta:hover { border-color: var(--blu-2); }
.carta .nome { font-weight: 800; letter-spacing: -.02em; display: flex; justify-content: space-between; gap: 8px; }
.carta small { color: var(--muted); font-weight: 600; }
.filtri { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* testata del paziente */
.testata-paz { display: grid; gap: 14px; }
.testata-paz .chi { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.testata-paz .iniz { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(145deg, var(--blu-soft), var(--cuore-soft)); color: var(--blu); font-weight: 800; font-size: 1.2rem; }
.testata-paz .sotto { color: var(--muted); font-weight: 650; }

/* ---- messaggi ---- */
.posta { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.fili { display: grid; gap: 6px; max-height: calc(100vh - 210px); overflow-y: auto; padding: 4px; }
.filo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid transparent; background: transparent; text-align: left; color: inherit; text-decoration: none; }
.filo:hover { background: #fff; border-color: var(--line); }
.filo[aria-current=true] { background: #fff; border-color: var(--blu-2); box-shadow: var(--ombra); }
.filo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filo small { grid-column: 1 / -1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.filo .conta { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--cuore); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.filo .ora-f { color: var(--muted); font-size: .78rem; font-weight: 650; }
.conversazione { display: grid; gap: 14px; }
.bolle { display: grid; gap: 10px; padding: 6px 2px; }
.bolla { max-width: min(78%, 520px); padding: 10px 14px; border-radius: 18px; background: var(--blu-tenue); border: 1px solid var(--line); display: grid; gap: 4px; }
.bolla.out { justify-self: end; background: var(--blu); color: #fff; border-color: var(--blu); border-bottom-right-radius: 6px; }
.bolla.in { border-bottom-left-radius: 6px; }
.bolla small { font-size: .74rem; opacity: .75; font-weight: 600; }
.modelli { display: flex; gap: 8px; flex-wrap: wrap; }
.modelli button { border: 1px dashed var(--line-forte); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .84rem; font-weight: 650; color: var(--soft); }
.modelli button:hover { border-color: var(--blu-2); color: var(--blu); }
@media (max-width: 979px) {
  .posta { grid-template-columns: minmax(0, 1fr); }
  .posta.aperta .fili { display: none; }
  .posta:not(.aperta) .conversazione { display: none; }
  .fili { max-height: none; }
  .bolla { max-width: 88%; }
}

/* ---- fattura su carta (si stampa o si salva in PDF) ---- */
.foglio { background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--ombra); padding: 44px 48px; max-width: 820px; width: 100%; margin: 0 auto; display: grid; gap: 26px; font-size: .95rem; }
.foglio .intest { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foglio .intest img { width: 170px; height: auto; }
.foglio .dest { display: grid; gap: 2px; align-content: start; }
.foglio h2 { font-size: 1.35rem; }
.foglio .tab td, .foglio .tab th { padding: 8px 6px; }
.foglio .totali { display: grid; justify-content: end; gap: 4px; }
.foglio .totali div { display: grid; grid-template-columns: 200px 110px; text-align: right; font-variant-numeric: tabular-nums; }
.foglio .totali .tot { font-weight: 800; font-size: 1.1rem; border-top: 1px solid var(--ink); padding-top: 6px; }
.foglio .piede { color: var(--muted); font-size: .82rem; display: grid; gap: 4px; }
@media (max-width: 720px) { .foglio { padding: 22px 18px; } .foglio .totali div { grid-template-columns: 1fr 100px; } }
@media print {
  body { background: #fff; }
  .menu, .barra, .navigazione, .no-stampa, #toast { display: none !important; }
  main { margin: 0; padding: 0; }
  .foglio { box-shadow: none; border: 0; padding: 0; max-width: none; }
}

.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 650; font-size: .9rem; transition: all .2s; max-width: calc(100% - 32px); text-align: center; }
.toast.visibile { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 980px) { .toast { bottom: 28px; } }
.solo-telefono { display: none; }
@media (max-width: 979px) { .solo-telefono { display: inline-flex; } }