:root{
--bg:#eef1f3; --surface:#ffffff; --surface-2:#f4f7f8; --surface-3:#eef2f4;
--border:#e4e9eb; --border-strong:#d3dadd;
--text:#16242a; --text-2:#5c6b72; --text-3:#909ca2;
--accent:#0f7a6b; --accent-bg:#e4f3f0; --accent-strong:#0a5a4f;
--accent-2:#159bb0;
--grad:linear-gradient(135deg,#0f7a6b 0%,#159bb0 100%);
--grad-strong:linear-gradient(135deg,#0a5a4f 0%,#0f7e8e 100%);
--ring:0 0 0 3px var(--accent-bg);
--ok:#1d8a5e; --ok-bg:#e6f5ec;
--warn:#bd7a06; --warn-bg:#fbf0d6;
--bad:#cf3f3f; --bad-bg:#fbe9e9;
--side-1:#0f6f61; --side-2:#0a4a40; --side-text:#dff0ec; --side-dim:#9cc6bd;
--shadow-sm:0 1px 2px rgba(16,40,46,.06),0 1px 3px rgba(16,40,46,.05);
--shadow:0 4px 14px rgba(16,40,46,.07),0 2px 6px rgba(16,40,46,.05);
--shadow-lg:0 18px 40px rgba(16,40,46,.16);
--radius:12px; --radius-lg:16px;
--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--mono:'SF Mono',ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
}
/* Tema scuro. Due copie IDENTICHE delle stesse variabili, ed è voluto: una
segue il sistema (a meno che in Personalizza non si sia scelto "chiaro"),
l'altra vale quando si sceglie "scuro" su un sistema chiaro. Il CSS non sa
unire una media query e un selettore nella stessa regola. Se ne cambi una,
cambia l'altra: un test (aspetto.test.mjs) le confronta. */
@media(prefers-color-scheme:dark){
:root:not([data-tema="chiaro"]){
--bg:#0e1416; --surface:#192123; --surface-2:#202a2d; --surface-3:#26312f;
--border:#2a3639; --border-strong:#3a484c;
--text:#e8eef0; --text-2:#9cadb2; --text-3:#6c7d82;
--accent:#2bb39e; --accent-bg:#16332d; --accent-strong:#54d4c0;
--accent-2:#3cc5d6;
--grad:linear-gradient(135deg,#1f9e8c 0%,#2596c9 100%);
--grad-strong:linear-gradient(135deg,#2bb39e 0%,#36b6d8 100%);
--ok:#3fbe84; --ok-bg:#16302350;
--warn:#d99a2b; --warn-bg:#33270f80;
--bad:#e36363; --bad-bg:#341a1a80;
--side-1:#0c4a41; --side-2:#072e29; --side-text:#d3ebe5; --side-dim:#7fb3a9;
--shadow-sm:0 1px 2px rgba(0,0,0,.3);
--shadow:0 6px 18px rgba(0,0,0,.35);
--shadow-lg:0 20px 44px rgba(0,0,0,.5);
}
}
:root[data-tema="scuro"]{
--bg:#0e1416; --surface:#192123; --surface-2:#202a2d; --surface-3:#26312f;
--border:#2a3639; --border-strong:#3a484c;
--text:#e8eef0; --text-2:#9cadb2; --text-3:#6c7d82;
--accent:#2bb39e; --accent-bg:#16332d; --accent-strong:#54d4c0;
--accent-2:#3cc5d6;
--grad:linear-gradient(135deg,#1f9e8c 0%,#2596c9 100%);
--grad-strong:linear-gradient(135deg,#2bb39e 0%,#36b6d8 100%);
--ok:#3fbe84; --ok-bg:#16302350;
--warn:#d99a2b; --warn-bg:#33270f80;
--bad:#e36363; --bad-bg:#341a1a80;
--side-1:#0c4a41; --side-2:#072e29; --side-text:#d3ebe5; --side-dim:#7fb3a9;
--shadow-sm:0 1px 2px rgba(0,0,0,.3);
--shadow:0 6px 18px rgba(0,0,0,.35);
--shadow-lg:0 20px 44px rgba(0,0,0,.5);
}
/* i controlli del browser (barre di scorrimento, caselle) seguono il tema scelto */
:root[data-tema="chiaro"]{color-scheme:light}
:root[data-tema="scuro"]{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit}
/* ============== LAYOUT ============== */
.app{display:flex;min-height:100vh}
/* La colonna è alta quanto lo schermo e **scorre**. Senza `overflow-y:auto`
quello che non ci stava — su un telefono: le ultime voci del menù e i
pulsanti "Importa documento" / "Esporta backup" — restava sotto il bordo e
non si raggiungeva in nessun modo, perché la colonna è alta 100vh fissi e
a scorrere era la pagina dietro. `dvh` per la stessa ragione della modale:
su mobile `vh` conta anche la striscia coperta dalla barra del browser, e
quei 60-100px sono esattamente dove stanno i pulsanti. La riga con `vh`
resta prima, per i browser che non conoscono `dvh`.
Nota: il segnalino bianco della voce attiva sta a `left:-16px`, cioè sul
bordo interno della colonna; è dentro il riquadro di ritaglio e resta
visibile. Mettendo invece lo scorrimento su `.side-nav` verrebbe tagliato. */
.sidebar{width:248px;flex-shrink:0;background:linear-gradient(170deg,var(--side-1),var(--side-2));color:var(--side-text);display:flex;flex-direction:column;padding:20px 16px;position:sticky;top:0;
height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain}
/* la barra di scorrimento non deve spezzare il verde della colonna */
.sidebar::-webkit-scrollbar{width:0}
.sidebar{scrollbar-width:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{padding:24px 30px 60px;max-width:1180px;width:100%;margin-inline:auto}
/* ============== BRAND ============== */
.brand{display:flex;align-items:center;gap:11px;padding:4px 6px 16px}
.brand-logo{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0;backdrop-filter:blur(4px)}
.brand-logo svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:2}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:16px;font-weight:700;letter-spacing:-.01em}
.brand-text span{font-size:12px;color:var(--side-dim);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
/* ============== FASCICOLO APERTO (in cima alla colonna di sinistra) ==============
Di chi sono i referti che sto guardando. Sta qui, sotto al marchio, e
l'account sta in alto a destra: **lontani**. Finché sono stati affiancati
nello stesso angolo erano due riquadri uguali — avatar, nome, freccetta —
e non si capiva quale delle due cose si stesse cambiando, né che fossero
due cose diverse. Non si somigliano nemmeno più: questa è una targhetta
chiara sul verde della colonna, con l'icona della cartella e scritto di chi
è il fascicolo; quello è l'avatar tondo di chi ha fatto il login.
Sotto ci sono le sezioni: la targhetta le intesta tutte. */
.fsw-btn{display:flex;width:100%;min-width:0;align-items:center;gap:10px;text-align:left;
margin-bottom:18px;padding:9px 10px;border-radius:12px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--side-text);
font-family:inherit;cursor:pointer;transition:.14s}
.fsw-btn:hover,.fsw-btn.pop-aperto{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.34)}
.fsw-ico{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;opacity:.8}
.fsw-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.fsw-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
color:var(--side-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsw-name{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsw-btn.vuoto .fsw-name{color:var(--side-dim);font-weight:500}
.fsw-chev{width:15px;height:15px;flex-shrink:0;stroke:var(--side-dim);fill:none;stroke-width:2.2;transition:transform .15s}
.fsw-btn.pop-aperto .fsw-chev{transform:rotate(180deg)}
/* l'avatar con le iniziali resta dove serve davvero: la modale "nuovo
fascicolo" e le voci del menù dei fascicoli */
.user-avatar{position:relative;width:34px;height:34px;border-radius:10px;flex-shrink:0;
background:var(--grad);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:.02em}
.mu-avatar{width:38px;height:38px;border-radius:12px;font-size:14px}
/* ============== MENÙ A COMPARSA (fascicoli, account) ==============
Vive in e si posiziona in fixed, come i menù di ui-select:
dentro la sidebar sarebbe schiacciato nella sua colonna. */
.pop{position:fixed;z-index:200;min-width:236px;max-width:340px;padding:6px;
background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
max-height:min(70vh,520px);overflow:auto;opacity:0;transform:translateY(-5px);transition:opacity .13s,transform .13s}
.pop.open{opacity:1;transform:none}
.pop-cap{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700;padding:8px 10px 6px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-item{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:10px;background:none;
font-family:inherit;font-size:13.5px;color:var(--text);cursor:pointer;text-align:left}
.pop-item:hover{background:var(--surface-2)}
.pop-item>svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;opacity:.7}
.pop-item.sel .pop-name{font-weight:700}
.pop-item.danger{color:var(--bad)}
.pop-item.danger:hover{background:var(--bad-bg)}
.pop-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.pop-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-meta{font-size:11px;color:var(--text-3)}
.pop-av{width:28px;height:28px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:700;background:var(--accent-bg);color:var(--accent-strong)}
.pop-check{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:2.4;flex-shrink:0}
.pop-sep{height:1px;background:var(--border);margin:6px 4px}
.pop-vuoto{padding:6px 10px 12px;font-size:12.5px;color:var(--text-3);line-height:1.5}
/* ============== SIDE NAV ============== */
/* È il menù a scorrere, non tutta la colonna: così "Importa documento" e
"Esporta backup" restano dove sono, sempre raggiungibili. Prima, su uno
schermo basso — un telefono con la barra del browser aperta, una finestra
non a tutto schermo — le ultime voci e i due pulsanti finivano sotto il
bordo e non si arrivava a toccarli in nessun modo: la colonna è alta quanto
lo schermo e a scorrere era solo la pagina dietro.
`min-height:0` è la parte che si dimentica: senza, un elemento flessibile
non scende sotto la propria altezza naturale e l'`overflow` non entra mai in
funzione. `padding-left` + `margin-left` negativi allargano la scatola di
16px a sinistra senza spostare il contenuto: il segnalino bianco della voce
attiva sta a `left:-16px` e senza questo verrebbe tagliato via, perché un
contenitore che scorre ritaglia tutto quello che esce dal suo riquadro. */
.side-nav{display:flex;flex-direction:column;gap:3px;
flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
padding-left:16px;margin-left:-16px;scrollbar-width:none}
.side-nav::-webkit-scrollbar{width:0}
.side-nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--side-dim);font-weight:600;padding:0 8px 8px}
.side-link{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;color:var(--side-text);font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:.13s;position:relative}
.side-link svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;opacity:.85;flex-shrink:0}
.side-link:hover{background:rgba(255,255,255,.08)}
.side-link.active{background:rgba(255,255,255,.16);font-weight:600}
.side-link.active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:20px;background:#fff;border-radius:0 3px 3px 0}
.side-count{margin-left:auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.16);padding:1px 8px;border-radius:20px;min-width:22px;text-align:center}
.side-count:empty{display:none}
/* ============== SIDE ACTIONS ============== */
.side-actions{margin-top:auto;flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding-top:18px}
.folder-status{font-size:11px;color:var(--side-dim);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
display:block;width:100%;padding:5px 8px;border:0;border-radius:8px;background:none;font-family:inherit;cursor:pointer;transition:.13s}
.folder-status:hover{background:rgba(255,255,255,.08);color:var(--side-text)}
.folder-status:empty{display:none}
.folder-status.busy{color:var(--side-text)}
.folder-status.warn{color:#ffd9a1;background:rgba(217,154,43,.18)}
/* chi è collegato: in alto a destra, un clic apre cambio password / esci */
.acct-wrap{min-width:0;flex:0 1 auto}
.acct{display:flex;width:100%;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:12px;text-align:left;
background:var(--surface);border:1px solid var(--border);color:var(--text);
font-family:inherit;cursor:pointer;transition:.14s;max-width:210px}
.acct:hover,.acct.pop-aperto{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.acct-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
font-size:11.5px;font-weight:700;background:var(--accent-bg);color:var(--accent-strong);letter-spacing:.02em}
.acct-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.acct-user{font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-role{font-size:10px;font-weight:600;letter-spacing:.03em;color:var(--text-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-chev{width:15px;height:15px;stroke:var(--text-3);fill:none;stroke-width:2.2;flex-shrink:0;transition:transform .15s}
.acct.pop-aperto .acct-chev{transform:rotate(180deg)}
/* ============== PANNELLO AMMINISTRAZIONE ============== */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;
box-shadow:var(--shadow-sm);margin-bottom:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.panel-head .panel-title{margin:0}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.adm-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:13px 14px;
display:flex;flex-direction:column;gap:2px;min-width:0}
.adm-stat-n{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis}
.adm-stat-l{font-size:12px;color:var(--text-2);font-weight:600}
.adm-stat-s{font-size:11px;color:var(--text-3)}
.adm-path{margin-top:13px;font-size:11.5px;color:var(--text-3);font-family:var(--mono);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-note{font-size:13px;color:var(--text-2);line-height:1.6;margin-bottom:13px}
.adm-note.adm-avviso{color:var(--warn);background:var(--warn-bg);padding:9px 12px;border-radius:calc(var(--radius) - 3px);margin:12px 0 0}
.adm-note.adm-ok{color:var(--ok);background:var(--ok-bg);padding:9px 12px;border-radius:calc(var(--radius) - 3px);margin:12px 0 0}
.adm-note code{font-family:var(--mono);font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:5px}
.adm-email{color:var(--accent);font-size:12px;margin-left:3px}
.po-titolo{font-size:14px;font-weight:700;margin:20px 0 10px}
.po-bottoni{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.po-storia{margin-top:16px;border-top:1px solid var(--border);padding-top:8px}
.po-conf{font-family:var(--mono);font-size:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:calc(var(--radius) - 3px);
padding:10px 12px;overflow-x:auto;white-space:pre;margin:0 0 13px;color:var(--text)}
#po-admin textarea{width:100%;resize:vertical;min-height:110px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;line-height:1.5}
#po-admin textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.adm-dim{color:var(--text-3);font-size:12.5px;white-space:nowrap}
.adm-none{color:var(--text-3);font-style:italic}
.adm-table-wrap{overflow-x:auto;margin:0 -20px;padding:0 20px}
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);
font-weight:700;padding:0 12px 8px 0;white-space:nowrap}
.adm-table td{padding:10px 12px 10px 0;border-top:1px solid var(--border);vertical-align:middle}
.adm-table tr:hover td{background:var(--surface-2)}
.adm-actions{display:flex;gap:6px;justify-content:flex-end;padding-right:0!important}
.adm-role{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;
background:var(--surface-3);color:var(--text-2)}
.adm-role.admin{background:var(--accent-bg);color:var(--accent-strong)}
.adm-list{list-style:none;display:flex;flex-direction:column;gap:1px}
.adm-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border);
font-size:12.5px;font-family:var(--mono)}
.adm-list li:first-child{border-top:0}
.adm-checks{display:flex;flex-direction:column;gap:7px;max-height:170px;overflow:auto;
background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px}
/* la casella deve restare una casella: ".form-field input{width:100%}" sta più
avanti nel foglio e con la stessa specificità vinceva lei, stirando la
spunta per tutta la riga e spingendo il nome a destra */
/* ============== SCHERMATA DI ACCESSO ==============
È la prima cosa che si vede dell'app, sempre: vale la pena che sia
bella. Sfondo con due aloni sfocati nei colori del tema, scheda che
entra dal basso, campi con l'occhio per rileggere la password. */
.authbox{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px;
background:var(--bg);overflow:auto}
.authbox.open{display:flex}
body.auth-aperta{overflow:hidden}
/* finché la sessione non è controllata l'app non si vede: niente lampo dell'interfaccia prima del login */
html.in-avvio .app{visibility:hidden}
.auth-sfondo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auth-sfondo i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45}
.auth-sfondo i:nth-child(1){width:460px;height:460px;left:-130px;top:-150px;background:color-mix(in srgb,var(--accent) 60%,transparent)}
.auth-sfondo i:nth-child(2){width:540px;height:540px;right:-170px;bottom:-190px;background:color-mix(in srgb,var(--accent-2) 50%,transparent)}
.auth-card{position:relative;width:100%;max-width:412px;background:var(--surface);border:1px solid var(--border);
border-radius:22px;padding:30px 28px 22px;box-shadow:var(--shadow-lg);animation:auth-in .34s cubic-bezier(.2,.8,.3,1)}
@keyframes auth-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.auth-logo{width:52px;height:52px;margin:0 auto 14px;border-radius:16px;display:flex;align-items:center;justify-content:center;
background:var(--grad);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 38%,transparent)}
.auth-logo svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2}
.auth-chip{display:flex;align-items:center;gap:6px;width:max-content;margin:0 auto 11px;padding:4px 11px;border-radius:20px;
font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
background:var(--accent-bg);color:var(--accent-strong)}
.auth-chip svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}
.auth-card h1{font-size:21px;text-align:center;margin-bottom:8px;letter-spacing:-.02em}
.auth-sub{font-size:12.5px;color:var(--text-2);text-align:center;line-height:1.6;margin-bottom:22px}
.auth-field{margin-bottom:14px}
.auth-hint{display:flex;align-items:flex-start;gap:6px;margin-top:6px;font-size:11.5px;color:var(--text-3);line-height:1.45}
.auth-hint svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;margin-top:1px}
.auth-pw{position:relative;display:block}
.auth-pw input{padding-right:42px}
.auth-occhio{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:9px;
background:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.auth-occhio:hover{background:var(--surface-2);color:var(--text-2)}
.auth-occhio svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.auth-forza{display:none;align-items:center;gap:5px;margin:-4px 0 14px}
.auth-forza.liv1,.auth-forza.liv2,.auth-forza.liv3{display:flex}
.auth-forza i{flex:1;height:4px;border-radius:3px;background:var(--surface-3);transition:background .2s}
.auth-forza b{font-size:11px;font-weight:600;color:var(--text-3);min-width:58px;text-align:right}
.auth-forza.liv1 i:nth-child(1){background:var(--bad)}
.auth-forza.liv1 b{color:var(--bad)}
.auth-forza.liv2 i:nth-child(-n+2){background:var(--warn)}
.auth-forza.liv2 b{color:var(--warn)}
.auth-forza.liv3 i{background:var(--ok)}
.auth-forza.liv3 b{color:var(--ok)}
.authbox .auth-ok{margin-top:6px;height:46px;font-size:14.5px;background:var(--grad);color:#fff;border-color:transparent;
box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 32%,transparent)}
.authbox .auth-ok:hover{background:var(--grad-strong);color:#fff;border-color:transparent;transform:translateY(-1px)}
.authbox .auth-ok:disabled{opacity:.6;cursor:default;transform:none}
.auth-piede{display:flex;align-items:flex-start;gap:7px;margin-top:18px;padding-top:15px;border-top:1px solid var(--border);
font-size:11.5px;color:var(--text-3);line-height:1.5}
.auth-piede svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;margin-top:2px}
.auth-card .modal-err:empty{display:none}
.auth-card .modal-err{margin-top:2px}
/* Dal login alla registrazione e ritorno ("Non hai un account? Creane uno"):
un pulsante vestito da link, fuori da ogni label. */
.auth-cambia{margin-top:14px;text-align:center;font-size:12.5px;color:var(--text-2)}
.auth-cambia button{border:0;background:none;padding:2px 4px;border-radius:6px;font:inherit;font-weight:600;
color:var(--accent-strong);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.auth-cambia button:hover{color:var(--accent)}
.auth-cambia button:focus-visible{box-shadow:var(--ring)}
.auth-cambia+.auth-cambia{margin-top:6px}
.modal-err.auth-ok-msg{color:var(--ok)}
/* Il codice di recupero (schermata d'ingresso e modale dell'account): da
ricopiare a mano, quindi grande, in monospazio e selezionabile in un clic.
Se lo schermo è stretto va a capo a metà (due gruppi per riga, gli span),
mai dentro un gruppo. */
.codice-rec{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 12px;margin-bottom:16px;
border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface-2)}
.codice-rec-testo{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:.06em;color:var(--text);
text-align:center;line-height:1.5;user-select:all;overflow-wrap:break-word;max-width:100%}
.codice-rec-testo span{white-space:nowrap}
.codice-rec-azioni{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.codice-rec-ok{margin-bottom:14px}
.pop-avviso{color:var(--warn);font-weight:600}
/* ============== BUTTONS ============== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer;font-size:13px;font-weight:600;transition:.13s;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn-block{width:100%}
.btn-primary{background:#fff;color:var(--side-2);border-color:transparent;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#f0fbf8;color:var(--side-2);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--side-text)}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
.btn-danger{background:var(--bad);border-color:transparent;color:#fff}
.btn-danger:hover{background:color-mix(in srgb,var(--bad) 82%,#000);border-color:transparent;color:#fff}
/* ============== TOPBAR ============== */
/* Barra in alto a tre zone: titolo a sinistra, RICERCA AL CENTRO, l'account
— e solo lui — a destra (il fascicolo sta in cima alla colonna di sinistra).
La griglia 1fr / campo / 1fr tiene la ricerca al centro della finestra anche quando i due lati hanno larghezze diverse — con un
flex si sposterebbe a ogni cambio di titolo. Il contenuto della barra ha lo
stesso max-width della pagina, così tutto resta incolonnato. */
.topbar{padding:14px 30px;border-bottom:1px solid var(--border);
background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(8px);
position:sticky;top:0;z-index:20}
.topbar-inner{max-width:1180px;margin-inline:auto;width:100%;
display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,420px) minmax(0,1fr);align-items:center;gap:16px}
/* minmax(0,1fr) e min-width:0 ovunque: senza, le colonne laterali non
scendono sotto la larghezza del loro contenuto e a schermi medi il campo
di ricerca finiva sotto il riquadro dell'account */
.topbar-sx{display:flex;align-items:center;gap:12px;min-width:0}
/* justify-self:end farebbe prendere all'elemento la larghezza del suo
contenuto, sfondando la colonna e finendo sopra al campo di ricerca:
si lascia largo quanto la colonna e si spinge il contenuto a destra. */
.topbar-dx{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.topbar-dx > *{min-width:0}
.acct{min-width:0}
.topbar-text{min-width:0}
/* compare solo sotto i 720px, al posto del sottotitolo */
#topbar-fsw{display:none;font-size:12.5px;font-weight:600;color:var(--accent-strong);
margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.topbar-text h1{font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-text p{font-size:12.5px;color:var(--text-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hamburger{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;align-items:center;justify-content:center}
.hamburger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
/* ============== SECTIONS ============== */
.section{display:none;animation:fade .25s ease}
.section.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ============== DASHBOARD ============== */
.greeting{margin-bottom:20px}
.greeting h2{font-size:23px;font-weight:700;letter-spacing:-.02em}
.greeting p{font-size:14px;color:var(--text-2);margin-top:2px}
/* Saluto della Panoramica: la prima schermata dopo il login, quindi è
quella che dà il tono. Scheda scura nei colori del tema, con il nome del
fascicolo aperto e le due azioni che si fanno davvero ogni volta. */
.hero{position:relative;overflow:hidden;border-radius:20px;padding:24px 26px;margin-bottom:22px;
background:linear-gradient(135deg,var(--side-1),var(--side-2));color:#fff;box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;right:-70px;top:-110px;width:320px;height:320px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%);pointer-events:none}
.hero-cap{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--side-dim);margin-bottom:7px}
.hero-cap svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}
.hero h2{font-size:25px;font-weight:700;letter-spacing:-.025em;line-height:1.18}
.hero p{font-size:13.5px;color:var(--side-text);opacity:.88;margin-top:5px;max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;position:relative;z-index:1}
.content .hero .btn-primary{background:#fff;color:var(--side-2);border-color:transparent;box-shadow:var(--shadow-sm)}
.content .hero .btn-primary:hover{background:#f0fbf8;color:var(--side-2);transform:translateY(-1px)}
.hero .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);color:#fff}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:26px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;
box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.stat-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tinta,var(--accent));opacity:.9}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.stat-card .stat-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.stat-card .stat-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2}
.stat-val{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1}
.stat-label{font-size:12.5px;color:var(--text-2);margin-top:5px;font-weight:500}
.btn-accent{background:var(--grad);color:#fff;border-color:transparent;
box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 26%,transparent)}
.btn-accent:hover{background:var(--grad-strong);color:#fff;border-color:transparent;transform:translateY(-1px)}
.panel-title{font-size:15px;font-weight:700;margin:0 0 12px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.panel-title .muted{font-weight:500;color:var(--text-3);font-size:13px}
.spec-bars{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm)}
.spec-bar{display:flex;align-items:center;gap:10px;font-size:13px}
.spec-bar .nm{width:120px;flex-shrink:0;color:var(--text-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spec-bar .track{flex:1;height:8px;background:var(--surface-3);border-radius:6px;overflow:hidden}
.spec-bar .fill{display:block;height:100%;border-radius:6px}
.spec-bar .ct{width:24px;text-align:right;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
/* ============== TIMELINE (recenti) ============== */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:14px;align-items:center;padding:13px 10px;margin:0 -10px;border-radius:12px;
border-bottom:1px solid var(--border);transition:background .12s}
.tl-item:hover{background:var(--surface-2)}
.tl-item:last-child{border-bottom:none}
.tl-dot{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tl-dot svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.tl-body{flex:1;min-width:0}
.tl-title{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-meta{font-size:12px;color:var(--text-2)}
.tl-date{font-size:11.5px;color:var(--text-3);font-family:var(--mono);white-space:nowrap}
.card.soft{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:8px 18px;box-shadow:var(--shadow-sm)}
/* ============== FILTER CHIPS / SEGMENTED ============== */
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:6px 13px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;font-weight:600;transition:.12s;box-shadow:var(--shadow-sm)}
.chip:hover{color:var(--text);border-color:var(--border-strong)}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.chip.active .chip-dot{background:#fff !important}
.chip-n{font-size:10.5px;font-weight:800;background:var(--surface-3);color:var(--text-3);padding:1px 7px;border-radius:10px;line-height:1.5}
.chip.active .chip-n{background:rgba(255,255,255,.25);color:#fff}
.segmented{display:inline-flex;background:var(--surface-3);border-radius:10px;padding:3px;gap:2px;margin-bottom:18px}
.seg{border:none;background:transparent;color:var(--text-2);font-size:13px;font-weight:600;padding:7px 16px;border-radius:8px;cursor:pointer;transition:.12s}
.seg:hover{color:var(--text)}
.seg.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}
/* ============== CARDS DOCUMENTO ============== */
.card-list{display:flex;flex-direction:column;gap:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-sm);transition:.16s;position:relative;border-left:3px solid var(--spec,var(--border))}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-left-color:var(--spec,var(--accent))}
.card-head{display:flex;align-items:flex-start;gap:14px}
.card-icon{width:42px;height:42px;border-radius:12px;background:var(--spec-bg,var(--accent-bg));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card-icon svg{width:21px;height:21px;stroke:var(--spec,var(--accent));fill:none;stroke-width:2}
.card-head-text{flex:1;min-width:0}
.card-title{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.card-meta{font-size:12.5px;color:var(--text-2);margin-top:3px}
.card-meta b{color:var(--text);font-weight:600}
.card-date{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text-2);background:var(--surface-3);padding:3px 9px;border-radius:7px;white-space:nowrap}
.badge{display:inline-block;font-size:11px;font-weight:700;color:var(--spec,var(--accent));background:var(--spec-bg,var(--accent-bg));padding:3px 10px;border-radius:20px;margin-bottom:7px;letter-spacing:.01em}
.card-body{font-size:13.5px;color:var(--text);line-height:1.65;white-space:pre-wrap;border-top:1px solid var(--border);padding-top:12px;margin-top:14px}
.card-field{margin-top:10px;font-size:13.5px;line-height:1.6}
.card-field-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:700;margin-bottom:1px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}
.tag{font-size:11.5px;color:var(--text-2);background:var(--surface-3);border:1px solid var(--border);padding:3px 9px;border-radius:20px;font-weight:500}
.card-actions{display:flex;gap:5px;margin-left:auto}
.icon-btn{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px;cursor:pointer;color:var(--text-2);transition:.12s;display:flex}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.icon-btn.danger:hover{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;display:block}
/* ============== EMPTY ============== */
.empty{text-align:center;padding:64px 20px;color:var(--text-3)}
.empty-ico{width:70px;height:70px;border-radius:20px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.empty-ico svg{width:32px;height:32px;stroke:var(--text-3);fill:none;stroke-width:1.6}
.empty p{font-size:16px;margin-bottom:5px;color:var(--text);font-weight:600}
.empty span{font-size:13.5px;max-width:380px;display:inline-block}
/* ============== TABELLA PIVOT ============== */
.table-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
table.pivot{border-collapse:collapse;width:100%;font-size:13px}
table.pivot th,table.pivot td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
table.pivot thead th{background:var(--surface-2);font-weight:700;font-size:11.5px;color:var(--text-2);position:sticky;top:0;text-transform:uppercase;letter-spacing:.03em}
table.pivot thead th.date-col{text-align:center;font-family:var(--mono);font-size:11px;text-transform:none}
table.pivot .marker-cell{font-weight:600;position:sticky;left:0;background:var(--surface);min-width:170px}
table.pivot .ref-cell{color:var(--text-3);font-size:11px;font-family:var(--mono)}
table.pivot td.val{text-align:center;font-family:var(--mono);font-weight:600}
table.pivot tbody tr:hover td{background:var(--surface-2)}
table.pivot tbody tr:hover .marker-cell{background:var(--surface-2)}
.val .pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:11px;font-size:12px}
.val.ok .pill{background:var(--ok-bg);color:var(--ok)}
.val.warn .pill{background:var(--warn-bg);color:var(--warn)}
.val.bad .pill{background:var(--bad-bg);color:var(--bad)}
.val.neutral{color:var(--text-3)}
.trend{font-size:10px;opacity:.7}
.legend{display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--text-2);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:5px}
.dot{width:9px;height:9px;border-radius:50%}
/* ============== DETTAGLIO ANALISI: valori per pannello ============== */
.an-pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;letter-spacing:.01em}
.an-pill.bad{background:var(--bad-bg);color:var(--bad)}
.an-pill.warn{background:var(--warn-bg);color:var(--warn)}
.an-pill.ok{background:var(--ok-bg);color:var(--ok)}
.badge-edit{border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:.12s}
.badge-edit svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;opacity:.6}
.badge-edit:hover{filter:brightness(.95)}
.badge-edit:hover svg{opacity:1}
.an-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 14px;
padding-top:15px;border-top:1px solid var(--border)}
.an-seg{margin-bottom:0}
.an-seg .seg b{font-weight:800;opacity:.6;margin-left:3px}
.an-seg .seg:disabled{opacity:.4;cursor:default}
.an-seg .seg.active b{opacity:.75}
.an-searchbox{position:relative;display:flex;align-items:center;flex:1;min-width:180px;max-width:280px}
.an-searchbox svg{position:absolute;left:10px;width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:2;pointer-events:none}
.an-searchbox input{width:100%;padding:8px 11px 8px 31px;border:1px solid var(--border-strong);border-radius:9px;
background:var(--surface);color:var(--text);font:inherit;font-size:13px;outline:none;transition:.12s}
.an-searchbox input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.an-searchbox input::-webkit-search-cancel-button{cursor:pointer}
.an-group{margin-bottom:18px}
.an-group-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.an-group-name{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}
.an-group-n{font-size:11px;font-weight:700;color:var(--text-3);background:var(--surface-3);padding:1px 7px;border-radius:20px}
.an-rows{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);
border-radius:11px;overflow:hidden}
.an-row{display:grid;grid-template-columns:minmax(0,1fr) 96px auto 88px;align-items:center;gap:14px;
width:100%;text-align:left;padding:9px 13px;background:var(--surface);border:0;border-left:3px solid var(--st,var(--border));
cursor:pointer;font:inherit;color:var(--text);transition:background .12s}
.an-row:hover{background:var(--surface-2)}
.an-cell-name{display:flex;flex-direction:column;min-width:0}
.an-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-ref{font-size:10.5px;color:var(--text-3);font-family:var(--mono)}
.an-bar{position:relative;height:6px;border-radius:6px;background:var(--surface-3);overflow:visible}
.an-bar.vuota{background:none}
.an-band{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--ok) 32%,transparent);border-radius:6px}
.an-dot{position:absolute;top:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;transform:translateY(-50%);
box-shadow:0 0 0 2px var(--surface)}
.an-dot.oltre{width:7px;height:12px;border-radius:2px;margin-left:-3.5px}
.an-cell-val{display:flex;align-items:baseline;gap:5px;justify-content:flex-end;white-space:nowrap}
.an-val{font-family:var(--mono);font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.an-val.bad{color:var(--bad)} .an-val.warn{color:var(--warn)}
.an-unit{font-size:10.5px;color:var(--text-3)}
.an-delta{font-size:11.5px;font-weight:600;color:var(--text-3);text-align:right;white-space:nowrap}
.an-delta.up{color:color-mix(in srgb,var(--bad) 62%,var(--text-3))}
.an-delta.down{color:color-mix(in srgb,var(--accent) 62%,var(--text-3))}
.an-nores{padding:26px;text-align:center;color:var(--text-3);font-size:13px}
@media(max-width:760px){
.an-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
.an-bar{grid-column:1/-1;order:3}
.an-delta{order:2;text-align:right}
}
/* ============== ANDAMENTO: grafici ============== */
.chart-card{padding:18px 20px}
.chart-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:20px;align-items:start}
.chart-side{display:flex;flex-direction:column;gap:9px;min-width:0}
.chart-side .an-searchbox{max-width:none}
.chart-list{display:flex;flex-direction:column;gap:1px;max-height:430px;overflow-y:auto;
border:1px solid var(--border);border-radius:11px;padding:5px}
.chart-list-head{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);
padding:10px 8px 4px}
.chart-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 8px;border:0;border-radius:8px;
background:none;cursor:pointer;font:inherit;font-size:12.5px;color:var(--text-2);transition:.11s}
.chart-opt:hover{background:var(--surface-2);color:var(--text)}
.chart-opt.on{background:var(--surface-2);color:var(--text);font-weight:600}
.chart-opt-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;border:1.5px solid var(--border-strong)}
.chart-opt.on .chart-opt-dot{background:var(--c);border-color:var(--c)}
.chart-opt-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-opt-n{font-size:10.5px;color:var(--text-3);font-family:var(--mono)}
.chart-hint{font-size:11px;color:var(--text-3);line-height:1.5}
.chart-main{min-width:0}
.chart-stampa{flex-shrink:0;margin-left:auto}
.chart-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.chart-titolo{display:flex;gap:14px;flex-wrap:wrap}
.chart-leg{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.chart-leg::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c,var(--accent))}
.chart-leg i{font-style:normal;font-weight:500;font-size:11px;color:var(--text-3);font-family:var(--mono)}
.chart-plot{position:relative}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-empty{padding:46px 20px;text-align:center;color:var(--text-3);font-size:13px}
.chart-tip{position:absolute;display:none;pointer-events:none;background:var(--text);color:var(--bg);
padding:7px 10px;border-radius:9px;font-size:11.5px;line-height:1.45;box-shadow:var(--shadow-lg);white-space:nowrap;z-index:5}
.chart-tip b{display:block;font-size:14px;font-family:var(--mono);letter-spacing:-.01em}
.chart-tip b.bad{color:#ff9a9a} .chart-tip b.warn{color:#ffd08a} .chart-tip b.ok{color:#8de0b8}
.chart-tip span{display:block;opacity:.75}
.ch-tip-ref{font-family:var(--mono)}
.ax-grid{stroke:var(--border);stroke-width:1}
.ax-line{stroke:var(--border-strong);stroke-width:1;opacity:.7}
.ax-lab{fill:var(--text-3);font-size:10px;font-family:var(--mono)}
.ch-band{fill:var(--ok);opacity:.11}
.ch-bandline{stroke:var(--ok);stroke-width:1;stroke-dasharray:3 4;opacity:.45}
.ch-area{fill:var(--accent);opacity:.06}
.ch-line{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.ch-dot{stroke:var(--surface);stroke-width:2}
.ch-guide{stroke:var(--text-3);stroke-width:1;stroke-dasharray:3 4;opacity:.6}
.ch-solo{fill:var(--text);font-size:12px;font-weight:700;font-family:var(--mono)}
.ch-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:9px;margin-top:14px;
padding-top:14px;border-top:1px solid var(--border)}
.ch-stat{display:flex;flex-direction:column;gap:1px;min-width:0}
.ch-stat-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);font-weight:700}
.ch-stat-v{font-size:13.5px;font-weight:700;font-family:var(--mono);letter-spacing:-.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-stat-v.bad{color:var(--bad)} .ch-stat-v.warn{color:var(--warn)} .ch-stat-v.ok{color:var(--ok)}
.ch-smalls{display:flex;flex-direction:column;gap:6px}
.ch-small{border-bottom:1px solid var(--border);padding-bottom:6px}
.ch-small:last-of-type{border-bottom:0}
.ch-small-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:2px}
.ch-small-val{font-family:var(--mono);font-size:13px;font-weight:700}
.ch-small-val i{font-style:normal;font-weight:500;font-size:10.5px;color:var(--text-3)}
.ch-small-val.bad{color:var(--bad)} .ch-small-val.warn{color:var(--warn)}
.ch-axis{margin-top:-4px}
.chart-filtro{width:100%;display:flex}
.chart-filtro .seg{flex:1;padding:6px 8px;font-size:12px}
.chart-opt.sola{opacity:.62}
.chart-opt.sola .chart-opt-n{color:var(--text-3);font-style:italic}
.an-delta.prima{font-weight:500;font-style:italic;opacity:.7}
/* una sola misurazione: il valore per quello che è, non un grafico vuoto */
.ch-unico{padding:6px 2px 2px}
.ch-unico-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ch-unico-val{font-family:var(--mono);font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1}
.ch-unico-val i{font-style:normal;font-size:15px;font-weight:500;color:var(--text-3);margin-left:6px}
.ch-unico-val.bad{color:var(--bad)} .ch-unico-val.warn{color:var(--warn)} .ch-unico-val.ok{color:var(--ok)}
.ch-unico-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2)}
.ch-unico .an-bar{display:block;height:8px;margin:0 0 8px}
.ch-unico-ref{font-size:12px;color:var(--text-3);font-family:var(--mono);margin-bottom:18px}
.ch-unico-nota{display:flex;gap:9px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--border);
border-radius:11px;padding:12px 14px;font-size:12.5px;line-height:1.6;color:var(--text-2)}
.ch-unico-nota svg{width:15px;height:15px;stroke:var(--text-3);fill:none;stroke-width:2;flex-shrink:0;margin-top:2px}
/* schede del glossario sotto al grafico: cos'è l'esame, su cosa incide, alto/basso */
.gl-wrap{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.gl-card{display:flex;flex-direction:column;gap:12px}
.gl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gl-tit{font-size:15px;font-weight:800;letter-spacing:-.01em}
.gl-sys{display:flex;gap:5px;flex-wrap:wrap}
.gl-tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--accent-bg);color:var(--accent-strong);white-space:nowrap}
.gl-cosa{font-size:13.5px;line-height:1.6;color:var(--text)}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.gl-box{display:flex;flex-direction:column;gap:4px;padding:11px 13px;border-radius:11px;background:var(--surface-2);
border:1px solid var(--border);font-size:12.5px;line-height:1.55;color:var(--text-2)}
.gl-box b{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.gl-box.alto b{color:var(--bad)} .gl-box.basso b{color:var(--accent-2)}
.gl-box.positivo b,.gl-box.alterato b{color:var(--warn)} .gl-box.negativo b{color:var(--ok)}
.gl-nota{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--text-2)}
.gl-nota svg,.gl-vuota svg{width:15px;height:15px;stroke:var(--text-3);fill:none;stroke-width:2;flex-shrink:0;margin-top:2px}
.gl-coll{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gl-coll-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-right:4px}
.gl-link{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--border-strong);border-radius:20px;
background:var(--surface);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:.12s}
.gl-link:hover{border-color:var(--accent);color:var(--accent-strong)}
.gl-link i{font-style:normal;font-size:10.5px;color:var(--text-3);font-family:var(--mono)}
.gl-fonte{font-size:11px;line-height:1.5;color:var(--text-3)}
.gl-fonte a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.gl-vuota{flex-direction:row;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--text-2);line-height:1.55}
.gl-multi{display:flex;flex-direction:column;gap:6px}
.gl-details{border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.gl-details summary{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer;list-style:none;font-size:13px}
.gl-details summary::-webkit-details-marker{display:none}
.gl-sum-dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--accent));flex-shrink:0}
.gl-sum-name{font-weight:700;white-space:nowrap}
.gl-sum-sub{flex:1;min-width:0;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-details summary svg{width:16px;height:16px;stroke:var(--text-3);fill:none;stroke-width:2.2;flex-shrink:0;transition:.15s}
.gl-details[open] summary svg{transform:rotate(90deg)}
.gl-details .gl-card{padding:2px 12px 14px}
@media(max-width:900px){
.chart-layout{grid-template-columns:1fr}
.chart-list{max-height:220px}
}
/* ============== SEZIONE AI ============== */
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.form-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.form-field>span{font-size:12px;font-weight:600;color:var(--text-2)}
.form-field>span a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.form-field input,.form-field select,.ai-json{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;width:100%;transition:border-color .12s,box-shadow .12s}
.form-field input:hover,.form-field select:hover{border-color:var(--border-strong)}
.form-field input:focus,.form-field select:focus,.ai-json:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
/* select personalizzato: niente freccia di sistema, chevron pulito */
.form-field select{
appearance:none;-webkit-appearance:none;-moz-appearance:none;
cursor:pointer;padding-right:38px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23909ca2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.form-field select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f7a6b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.form-field select option{background:var(--surface);color:var(--text)}
.ai-link{border:0;background:none;padding:0;margin-left:8px;font:inherit;font-size:11.5px;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ai-link:hover{color:var(--accent-strong)}
.ai-warn{font-size:12px;color:var(--text-2);background:var(--warn-bg);border:1px solid var(--border);border-radius:var(--radius);padding:8px 11px;margin-top:4px;line-height:1.5}
/* esito della verifica: i valori estratti esistono davvero nel PDF? */
.ai-check{display:flex;flex-direction:column;gap:5px;border-radius:var(--radius);padding:12px 15px;
margin-bottom:14px;border:1px solid var(--border);font-size:12.5px;line-height:1.6}
.ai-check>b{display:flex;align-items:center;gap:7px;font-size:13.5px}
.ai-check span{color:var(--text-2)}
.ai-check span b{color:var(--text)}
.ai-check-list li b{color:var(--text)}
.ai-check.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.ai-check.ok b{color:var(--ok)}
.ai-check.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.ai-check.warn b{color:var(--warn)}
.ai-check.none{background:var(--surface-2)}
.ai-check.none b{color:var(--text-2)}
.ai-check-list{list-style:none;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.ai-check-list li{font-size:12.5px;color:var(--text)}
.ai-check-list code{font-family:var(--mono);background:var(--surface);padding:1px 6px;border-radius:5px}
.ai-check-list i{color:var(--text-3);font-size:11.5px}
.ai-check-more{font-size:12.5px;margin-bottom:14px;border:1px solid var(--border);border-radius:var(--radius);
padding:10px 14px;background:var(--surface-2)}
.ai-check-more summary{cursor:pointer;font-weight:600;display:flex;align-items:center;gap:7px;color:var(--text-2)}
.ai-check-more p{color:var(--text-2);margin:9px 0;line-height:1.55}
.ai-check-more ul{list-style:none;display:flex;flex-direction:column;gap:3px;max-height:220px;overflow:auto;
font-family:var(--mono);font-size:11.5px;color:var(--text-2)}
.ai-testo{font-size:12.5px;margin-bottom:14px}
.ai-testo summary{cursor:pointer;color:var(--text-2);font-weight:600}
.ai-testo pre{margin-top:9px;max-height:300px;overflow:auto;background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--radius);padding:12px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.55;white-space:pre-wrap}
.ai-status{font-size:13px;margin-top:12px;line-height:1.5;white-space:pre-wrap}
.ai-status.ok{color:var(--ok)}
.ai-status.bad{color:var(--bad)}
.ai-json{min-height:260px;font-family:var(--mono);font-size:12.5px;line-height:1.55;resize:vertical}
.ai-json.bad{border-color:var(--bad)!important;box-shadow:0 0 0 3px var(--bad-bg)}
/* opzione "solo testo" sotto alla drop zone */
.ai-opt{font-size:12.5px;line-height:1.5;color:var(--text-2);margin:-4px 0 14px}
.ai-opt[hidden]{display:none}
.ai-opt b{color:var(--text)}
/* --- Step 3: editor del documento --- */
.ed{margin-bottom:14px}
.ed-meta{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.ed-meta .form-field{margin-bottom:10px}
.ed-meta .form-field textarea{padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);
font-size:13.5px;font-family:inherit;width:100%;min-height:72px;line-height:1.5;resize:vertical;transition:border-color .12s,box-shadow .12s}
.ed-meta .form-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.ed-wide{grid-column:1/-1}
@media(max-width:640px){.ed-meta{grid-template-columns:1fr}}
.ed-tab-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface);max-height:520px;overflow-y:auto}
.ed-tab{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.ed-tab th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
color:var(--text-3);padding:8px 8px;border-bottom:1px solid var(--border)}
.ed-tab td{padding:3px 4px;border-bottom:1px solid var(--border);vertical-align:middle}
.ed-tab tr:last-child td{border-bottom:0}
.ed-tab input{width:100%;padding:6px 8px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text);
font-size:13px;font-family:inherit;transition:.12s}
.ed-tab input:hover{border-color:var(--border)}
.ed-tab input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-bg)}
.ed-tab-val input,.ed-tab-ref input,.ed-tab-unit input{font-family:var(--mono);font-size:12.5px}
.ed-tab-val input{font-weight:700}
.ed-tab-name{min-width:200px}
.ed-tab-val,.ed-tab-ref{width:84px} .ed-tab-unit{width:124px}
.ed-tab-st{width:30px;text-align:center;padding-left:8px!important}
.ed-st{display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center}
.ed-st.ok{background:var(--ok-bg);color:var(--ok)} .ed-st.warn{background:var(--warn-bg);color:var(--warn)}
.ed-tab tr.sospetta td{background:color-mix(in srgb,var(--warn) 6%,transparent)}
.ed-tab-x{width:32px;text-align:center}
.ed-tab-x button{width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:var(--text-3);font-size:16px;line-height:1;cursor:pointer;transition:.12s}
.ed-tab-x button:hover{background:var(--bad-bg);color:var(--bad)}
.ed-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.ed-n{font-size:12px;color:var(--text-3);font-family:var(--mono)}
/* form manuale dentro le sezioni Visite e Analisi */
.ed-card .detail-head{margin-bottom:16px}
.ed-card .ed{margin-bottom:6px}
.ed-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:14px;border-top:1px solid var(--border);margin-top:14px}
.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.list-toolbar-n{font-size:12.5px;color:var(--text-3);font-weight:600}
.list-toolbar-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* visite raggruppate per specialità */
.vgroup{margin-bottom:20px}
.vgroup-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding-left:2px}
.vgroup-dot{width:10px;height:10px;border-radius:50%;background:var(--spec,var(--border));flex-shrink:0}
.vgroup-name{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--spec,var(--text-2))}
.vgroup-n{font-size:11px;font-weight:700;color:var(--text-3);background:var(--surface-3);padding:1px 7px;border-radius:20px}
.vgroup-last{margin-left:auto;font-size:11.5px;color:var(--text-3)}
/* badge + suggerimento della specialità nel dettaglio */
.badge-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.badge-row .badge{margin-bottom:0}
.spec-hint{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--text-2);background:var(--surface-2);
border:1px dashed var(--border-strong);border-radius:20px;padding:3px 10px;cursor:pointer;font-family:inherit;transition:.12s}
.spec-hint b{color:var(--accent-strong)}
.spec-hint:hover{border-color:var(--accent);color:var(--text)}
.spec-hint svg{stroke:var(--accent)}
.spec-bar.cliccabile{cursor:pointer;border-radius:8px;margin:0 -6px;padding:3px 6px;transition:background .12s}
.spec-bar.cliccabile:hover{background:var(--surface-2)}
.ai-drop-dopp{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--warn)}
.ai-drop-dopp svg{stroke:var(--warn)}
.ai-dopp .btn{margin:2px 2px 2px 0}
.ai-dopp i{color:var(--text-3);font-size:11.5px}
/* le visite sul grafico dell'andamento */
.ch-visita line{stroke:var(--accent-2);stroke-width:1.3;stroke-dasharray:2 4;opacity:.75}
.ch-visita circle{fill:var(--accent-2);stroke:var(--surface);stroke-width:1.5;cursor:help}
.chart-note{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--text-3);line-height:1.4}
.chart-note svg{width:13px;height:13px;stroke:var(--text-3);fill:none;stroke-width:2;flex-shrink:0}
.ai-paz{margin-bottom:10px}
.ai-paz .btn{margin-top:6px}
.ai-check-fix summary{color:var(--text-3)}
.ai-check-fix ul{font-family:inherit;font-size:12.5px;color:var(--text-2);margin-top:8px;gap:5px}
@media(max-width:640px){.ai-grid{grid-template-columns:1fr}}
/* --- Hero della sezione AI --- */
.ai-hero{display:flex;align-items:center;gap:18px;background:var(--grad);border-radius:var(--radius-lg);padding:20px 24px;color:#fff;margin-bottom:18px;box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 28%,transparent);flex-wrap:wrap}
.ai-hero-ic{width:52px;height:52px;border-radius:15px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;backdrop-filter:blur(4px)}
.ai-hero-ic svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:2}
.ai-hero-txt{flex:1;min-width:230px}
.ai-hero-txt h2{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.ai-hero-txt p{font-size:13px;opacity:.93;margin-top:3px;max-width:540px;line-height:1.5}
.ai-hero-flow{display:flex;align-items:center;gap:7px}
.fstep{display:flex;flex-direction:column;align-items:center;gap:4px;width:56px}
.fstep b{width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800}
.fstep i{font-style:normal;font-size:9.5px;font-weight:700;opacity:.85;letter-spacing:.05em;text-transform:uppercase}
.farrow{opacity:.55;font-weight:700;margin-top:-16px}
/* --- Card a step --- */
.card.ai-step{padding:0;margin-bottom:16px;overflow:hidden}
.ai-step-head,.ai-provider>summary{display:flex;align-items:center;gap:13px;padding:15px 18px}
.ai-provider>summary{cursor:pointer;list-style:none;user-select:none}
.ai-provider>summary::-webkit-details-marker{display:none}
.ai-provider>summary:hover{background:var(--surface-2)}
.ai-step-num{width:30px;height:30px;border-radius:9px;background:var(--accent-bg);color:var(--accent);font-weight:800;font-size:13.5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-step-titles{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.ai-step-title{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.ai-step-sub{font-size:12px;color:var(--text-2)}
.ai-step-sub .okc{color:var(--ok);font-weight:700}
.ai-step-sub .badc{color:var(--warn);font-weight:700}
.ai-step-chev{color:var(--text-3);display:flex;transition:transform .15s}
.ai-provider[open] .ai-step-chev{transform:rotate(180deg)}
.ai-step-body{padding:4px 18px 18px 61px}
@media(max-width:640px){.ai-step-body{padding-left:18px}}
/* --- Step 2: tipo documento + drop zone --- */
.ai-types{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.ai-prop-nuova{display:block;font-size:11px;font-weight:600;color:var(--text-3);letter-spacing:0;margin-top:2px}
.ed-hint{font-style:normal;font-weight:500;color:var(--text-3);margin-left:6px}
@media(max-width:640px){.ai-types{grid-template-columns:1fr}}
.ai-type{position:relative;text-align:left;display:flex;flex-direction:column;gap:3px;padding:14px 15px;border:1.5px solid var(--border);border-radius:13px;background:var(--surface-2);cursor:pointer;font:inherit;color:var(--text);transition:.14s}
.ai-type:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.ai-type.sel{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.ai-type-ic{width:34px;height:34px;border-radius:9px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:5px;color:var(--text-2)}
.ai-type.sel .ai-type-ic{color:var(--accent)}
.ai-type-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.ai-type-name{font-size:13.5px;font-weight:700}
.ai-type-sub{font-size:11.5px;color:var(--text-2);line-height:1.4}
.ai-type.sel::after{content:"✓";position:absolute;top:10px;right:12px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ai-drop{border:2px dashed var(--border-strong);border-radius:14px;padding:24px 18px;text-align:center;cursor:pointer;transition:.15s;background:var(--surface-2);display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px}
.ai-drop:hover,.ai-drop.drag{border-color:var(--accent);background:var(--accent-bg)}
.ai-drop.has{border-style:solid;border-color:var(--accent);background:var(--accent-bg)}
.ai-drop-big{display:flex}
.ai-drop-big svg{width:30px;height:30px;stroke:var(--text-3);fill:none;stroke-width:1.7}
.ai-drop.has .ai-drop-big svg,.ai-drop.drag .ai-drop-big svg{stroke:var(--accent)}
.ai-drop-txt{font-size:13px;color:var(--text-2)}
.ai-drop-txt b{color:var(--text)}
.ai-drop.has .ai-drop-txt b{color:var(--accent-strong)}
.ai-drop-hint{display:block;font-size:11.5px;color:var(--text-3);margin-top:2px}
.ai-go{width:100%;justify-content:center;padding:11px;font-size:14px}
/* --- Step 2: foto del referto (scansione.js) ---
"Scatta una foto" apre la fotocamera solo dove c'è (capture): con mouse e
tastiera aprirebbe lo stesso selettore di "Scegli le foto", quindi sparisce. */
.ai-foto-azioni{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}
.ai-foto-nota{font-size:11.5px;color:var(--text-3)}
@media (hover:hover) and (pointer:fine){.ai-foto-cam{display:none}}
.scan{border:1px solid var(--border);border-radius:13px;background:var(--surface-2);padding:12px;margin:0 0 14px}
.scan-head{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.scan-filtri{display:flex;gap:6px;flex-wrap:wrap}
.scan-hint{font-size:11.5px;color:var(--text-3);line-height:1.4}
.scan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.scan-grid>*{min-width:0}
.scan-pag{display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:6px}
.scan-mini{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:8px;overflow:hidden;background:var(--surface-3);cursor:zoom-in}
.scan-mini img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .15s}
.scan-num{position:absolute;bottom:6px;left:6px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.scan-azioni{display:flex;gap:2px}
.scan-azioni button{flex:1;min-width:0;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:7px;background:none;color:var(--text-2);cursor:pointer}
.scan-azioni button:hover:not(:disabled){background:var(--surface-2);border-color:var(--border);color:var(--text)}
.scan-azioni button.via:hover{color:var(--bad)}
.scan-azioni button:disabled{opacity:.3;cursor:default}
.scan-azioni svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.scan-attesa{align-items:center;justify-content:center;gap:8px;min-height:120px;font-size:12px;color:var(--text-2);text-align:center}
.scan-attesa .ai-spin{margin:0}
.scan-anteprima{display:flex;align-items:center;justify-content:center;min-height:220px;background:var(--surface-3);border-radius:10px;overflow:hidden}
.scan-anteprima img{display:block;max-width:100%;max-height:calc(100vh - 240px);max-height:calc(100dvh - 240px)}
/* step 3: il nome del PDF */
.ai-nome{margin:-4px 0 14px}
.ai-nome-alt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--text-2);margin-top:6px}
.ai-nome-alt[hidden]{display:none}
.ai-nome-alt svg{stroke:var(--accent)}
.ai-nome-alt a{color:var(--accent-strong);font-weight:600;overflow-wrap:anywhere}
.ai-spin{display:inline-block;width:14px;height:14px;border:2px solid var(--accent-bg);border-top-color:var(--accent);border-radius:50%;animation:aispin .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes aispin{to{transform:rotate(360deg)}}
/* --- Step 3: proposta di categoria --- */
.ai-prop{display:flex;align-items:center;gap:15px;padding:15px 16px;border:1px solid color-mix(in srgb,var(--spec,var(--accent)) 30%,var(--border));border-left:4px solid var(--spec,var(--accent));border-radius:13px;background:color-mix(in srgb,var(--spec,var(--accent)) 5%,var(--surface));margin:6px 0 14px;flex-wrap:wrap}
.ai-prop-ic{width:44px;height:44px;border-radius:12px;background:var(--spec-bg,var(--accent-bg));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-prop-ic svg{width:22px;height:22px;stroke:var(--spec,var(--accent));fill:none;stroke-width:2}
.ai-prop-main{flex:1;min-width:200px}
.ai-prop-kicker{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--text-3);display:flex;align-items:center;gap:5px}
.ai-prop-kicker svg{stroke:var(--spec,var(--accent))}
.ai-prop-badge{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--spec,var(--accent));margin:2px 0}
.ai-prop-meta{font-size:12.5px;color:var(--text-2)}
.ai-prop-pick{display:flex;flex-direction:column;gap:5px;width:230px;max-width:100%}
.ai-prop-pick>span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)}
/* --- Step 3: JSON ripiegabile --- */
.ai-json-details{margin-bottom:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden}
.ai-json-details summary{padding:11px 14px;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;user-select:none}
.ai-json-details summary::-webkit-details-marker{display:none}
.ai-json-details summary::before{content:"▸";color:var(--text-3);transition:transform .15s}
.ai-json-details[open] summary::before{transform:rotate(90deg)}
.ai-json-details summary:hover{color:var(--text)}
.ai-json-details .ai-json{border:none;border-top:1px solid var(--border);border-radius:0;background:var(--surface)}
/* ============== IMMAGINI: miniature, candidati, visualizzatore ============== */
.thumbs{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.thumb-wrap{position:relative;width:66px;height:66px}
.thumb{width:66px;height:66px;padding:0;border:1px solid var(--border);border-radius:11px;overflow:hidden;cursor:pointer;background:var(--surface-2);display:block;transition:.12s}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.thumb-del{position:absolute;top:-7px;right:-7px;width:21px;height:21px;border-radius:50%;border:2px solid var(--surface);background:var(--bad);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center}
.thumb-wrap:hover .thumb-del{display:flex}
.cand-head{font-size:13px;color:var(--text-2);margin:6px 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cand-head.bad{color:var(--bad)}
.cand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px;margin-bottom:12px}
.cand{position:relative;cursor:pointer;display:block}
.cand input{position:absolute;top:7px;left:7px;z-index:2;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.cand-box{display:block;border:2px solid var(--border);border-radius:11px;overflow:hidden;aspect-ratio:1;background:var(--surface-2)}
.cand input:checked ~ .cand-box{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.cand-box img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;z-index:90;backdrop-filter:blur(5px)}
.lightbox.open{display:block;animation:fade .2s ease}
.lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
padding:30px 30px 84px;touch-action:none}
.lb-stage .lb-img{cursor:zoom-in}
.lb-stage.zoomed .lb-img{cursor:grab} .lb-stage.dragging .lb-img{cursor:grabbing}
.lb-img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.55);
transform-origin:center center;transition:transform .14s ease;user-select:none;-webkit-user-drag:none;will-change:transform}
.lb-stage.dragging .lb-img{transition:none}
.lb-bar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:6px;
border-radius:15px;background:rgba(18,22,24,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);box-shadow:var(--shadow-lg)}
.lb-bar button{width:38px;height:38px;border:0;border-radius:11px;background:transparent;color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:.12s}
.lb-bar button:hover{background:rgba(255,255,255,.14)}
.lb-bar button[hidden]{display:none}
.lb-bar .lb-salva{width:auto;padding:0 13px 0 10px;gap:7px;font:inherit;font-size:12.5px;font-weight:700;color:#fff;
background:var(--accent);animation:fade .2s ease}
.lb-bar .lb-salva:hover{background:var(--accent-strong)}
.lb-bar .lb-salva svg{width:16px;height:16px}
.lb-bar button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.lb-zoom{min-width:52px;text-align:center;font-family:var(--mono);font-size:12px;color:#fff;opacity:.85;cursor:default}
.lb-sep{width:1px;height:22px;background:rgba(255,255,255,.18);margin:0 4px}
.lb-hint{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:11.5px;color:rgba(255,255,255,.75);
white-space:nowrap;pointer-events:none;background:rgba(18,22,24,.6);padding:5px 12px;border-radius:20px;backdrop-filter:blur(6px)}
@media(max-width:640px){.lb-hint{display:none}.lb-stage{padding:14px 14px 84px}}
/* ============== TOAST ============== */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--text);color:var(--bg);padding:11px 20px;border-radius:11px;font-size:13px;font-weight:500;opacity:0;transition:.3s;pointer-events:none;z-index:80;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ============== SCRIM mobile ============== */
.sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
/* ============== ELENCO VISITE (righe) ============== */
.vlist{display:flex;flex-direction:column;gap:9px}
.vrow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:12px 15px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--spec,var(--border));border-radius:12px;cursor:pointer;font:inherit;color:var(--text);box-shadow:var(--shadow-sm);transition:transform .14s,box-shadow .14s,border-color .14s}
.vrow:hover{box-shadow:var(--shadow);transform:translateX(3px);border-left-color:var(--spec,var(--accent))}
.vrow-ic{width:38px;height:38px;border-radius:10px;background:var(--spec-bg,var(--accent-bg));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vrow-ic svg{width:19px;height:19px;stroke:var(--spec,var(--accent));fill:none;stroke-width:2}
.vrow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vrow-title{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow-sub{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow-right{display:flex;align-items:center;gap:11px;flex-shrink:0}
.vrow-flag{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--text-3)}
.vrow-flag svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.vrow-date{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text-2);background:var(--surface-3);padding:3px 9px;border-radius:7px;white-space:nowrap}
.vrow-chev{display:flex;color:var(--text-3)}
.vrow-chev svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
@media(max-width:600px){.vrow-flag{display:none}}
/* ============== DETTAGLIO DOCUMENTO ============== */
.back-btn{background:none;border:none;color:var(--accent);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:4px 2px;margin-bottom:14px;display:inline-flex;align-items:center;gap:3px;border-radius:6px}
.back-btn:hover{color:var(--accent-strong)}
.detail{padding:22px 24px;border-left:3px solid var(--spec,var(--accent))}
.detail-head{display:flex;align-items:flex-start;gap:14px}
.detail-headtext{flex:1;min-width:0}
.detail-title{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:6px 0 3px}
.detail-meta{font-size:13px;color:var(--text-2)}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap;padding:16px 0;margin:16px 0 0;border-top:1px solid var(--border)}
.btn-danger-ghost{color:var(--bad)}
.btn-danger-ghost:hover{color:#fff;background:var(--bad);border-color:var(--bad)}
.detail-section{margin-top:18px}
.detail-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:700;margin-bottom:5px}
.detail-text{font-size:14px;line-height:1.65;white-space:pre-wrap}
/* ============== VISUALIZZATORE PDF IN-PAGINA ============== */
.pdfbox{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;z-index:95;padding:22px;backdrop-filter:blur(5px)}
.pdfbox.open{display:flex;animation:fade .2s ease}
.pdfbox-inner{background:var(--surface);width:min(1040px,96vw);height:92vh;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.pdfbox-head{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.pdfbox-ico{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;flex-shrink:0}
.pdfbox-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdfbox-frame{flex:1;border:none;width:100%;background:var(--surface-3)}
/* ============== FINESTRA MODALE ============== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(5px)}
.modal.open{display:flex;animation:fade .18s ease}
/* La modale non può essere più alta dello schermo: il fondo è centrato in un
contenitore `fixed`, quindi quello che esce sopra e sotto viene tagliato e
**non si raggiunge scorrendo**. Su un telefono — dove la barra del browser
si mangia un pezzo di schermo — un form con sei campi arrivava a 800px e i
pulsanti "Annulla / Salva" restavano fuori. Ora si scorre dentro la modale.
`dvh` è l'altezza davvero visibile su mobile (con `vh`, Safari conta anche
la parte coperta dalla barra); la riga con `vh` resta per i browser che non
conoscono `dvh`. */
.modal-box{background:var(--surface);width:min(460px,94vw);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:20px 22px 18px;animation:pop .22s cubic-bezier(.2,.9,.3,1.15);
max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
.modal.largo .modal-box{width:min(760px,94vw)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px}
.modal-ico{width:42px;height:42px;border-radius:12px;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-ico:empty{display:none}
.modal-ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2}
.modal.danger .modal-ico{background:var(--bad-bg);color:var(--bad)}
.modal-headtext{flex:1;min-width:0;padding-top:1px}
.modal-title{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.modal-sub{font-size:13px;color:var(--text-2);margin-top:3px;line-height:1.5}
.modal-sub:empty{display:none}
.modal-err{font-size:12.5px;color:var(--bad);font-weight:500;margin-top:8px}
.modal-err:empty{display:none}
.modal-warn{font-size:13px;line-height:1.6;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px 14px}
.modal-warn b{color:var(--text)}
.modal-list{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.modal-list li{padding:8px 11px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);font-family:var(--mono);font-size:11.5px}
/* registro degli errori del server (amministrazione) */
.adm-err{margin-top:16px;font-size:13px}
.adm-err summary{cursor:pointer;font-weight:600;color:var(--warn)}
.adm-err-none{margin-top:16px;margin-bottom:0;color:var(--text-3)}
.adm-err-list{list-style:none;display:flex;flex-direction:column;gap:1px;margin:10px 0 6px}
.adm-err-list li{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--border);font-size:12px}
.adm-err-list li b{font-family:var(--mono);font-weight:600;white-space:nowrap}
.adm-err-list li span:last-child{color:var(--text-2);word-break:break-word}
@media(max-width:640px){.adm-err-list li{grid-template-columns:1fr}}
/* registro degli accessi (amministrazione e "le tue attività") */
.rg-filtri{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.rg-filtri > *{min-width:0;flex:1 1 200px;max-width:280px}
.rg-list{list-style:none;display:flex;flex-direction:column}
.rg-voce{display:grid;grid-template-columns:92px minmax(0,1fr);gap:3px 14px;padding:9px 0;border-top:1px solid var(--border);font-size:13px}
.rg-voce:first-child{border-top:0}
.rg-quando{grid-row:span 2;color:var(--text-3);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:1px}
.rg-cosa{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;min-width:0}
.rg-cosa b{font-weight:600}
.rg-account{font-weight:600;color:var(--accent-strong)}
.rg-det{color:var(--text-2);overflow-wrap:anywhere}
.rg-dove{grid-column:2;color:var(--text-3);font-size:12px;overflow-wrap:anywhere}
.rg-fallito .rg-cosa b{color:var(--bad)}
.rg-amministrazione .rg-cosa b{color:var(--warn)}
.rg-altri{margin-top:10px}
@media(max-width:480px){.rg-voce{grid-template-columns:minmax(0,1fr)}.rg-quando{grid-row:auto}.rg-dove{grid-column:1}}
.ch-stat-v.alias{font-family:var(--font);font-weight:600;font-size:12.5px;white-space:normal}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.mu-row{display:flex;align-items:flex-end;gap:12px}
.mu-avatar{width:44px;height:44px;border-radius:12px;font-size:15px;flex-shrink:0;margin-bottom:1px}
.input-error{border-color:var(--bad) !important;box-shadow:0 0 0 3px var(--bad-bg) !important}
/* ============== RIFINITURE GLOBALI ============== */
.main{background:radial-gradient(1100px 420px at 78% -10%, color-mix(in srgb,var(--accent) 9%, transparent), transparent), var(--bg)}
@media(prefers-color-scheme:dark){
:root:not([data-tema="chiaro"]) .main{background:radial-gradient(1100px 420px at 78% -10%, color-mix(in srgb,var(--accent) 14%, transparent), transparent), var(--bg)}
}
:root[data-tema="scuro"] .main{background:radial-gradient(1100px 420px at 78% -10%, color-mix(in srgb,var(--accent) 14%, transparent), transparent), var(--bg)}
/* Focus visibile coerente */
*:focus-visible{outline:none}
.btn:focus-visible,.chip:focus-visible,.seg:focus-visible,.icon-btn:focus-visible,.iconlet:focus-visible{box-shadow:var(--ring)}
/* Scrollbar discrete */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:padding-box}
/* Pulsante primario nel contenuto e nelle modali: gradiente */
.content .btn-primary,.modal-box .btn-primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%,transparent)}
.content .btn-primary:hover,.modal-box .btn-primary:hover{background:var(--grad-strong);color:#fff;transform:translateY(-1px);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent)}
.content .btn-primary:active,.modal-box .btn-primary:active{transform:translateY(0)}
/* Logo brand con leggero gradiente */
.brand-logo{background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* Voce di nav attiva: pillola sfumata */
.side-link.active{background:linear-gradient(100deg,rgba(255,255,255,.20),rgba(255,255,255,.10))}
/* Chip filtro attiva: gradiente */
.chip.active{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 28%,transparent)}
/* Segmented attivo */
.seg.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}
/* Stat card: filo sfumato in alto + hover */
.stat-card{transition:transform .16s,box-shadow .16s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);opacity:.85}
/* Badge specialità un filo più nitido */
.badge{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--spec,var(--accent)) 22%,transparent)}
/* ============== SELECT PERSONALIZZATO ============== */
.fs-native{display:none !important}
.fancy-select{position:relative;width:100%}
.fs-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-align:left;transition:border-color .12s,box-shadow .12s}
.fs-trigger:hover{border-color:var(--border-strong)}
.fancy-select.open .fs-trigger{border-color:var(--accent);box-shadow:var(--ring)}
.fancy-select.disabled .fs-trigger{opacity:.55;cursor:not-allowed}
.fs-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-chev{width:16px;height:16px;stroke:var(--text-3);fill:none;stroke-width:2.2;flex-shrink:0;transition:transform .2s,stroke .12s}
.fancy-select.open .fs-chev{transform:rotate(180deg);stroke:var(--accent)}
/* il menù vive in e si posiziona in fixed (ui-select.js → posiziona); sta sopra
a tutto, modali comprese, perché anche dentro una modale c'è un select */
.fs-menu{position:fixed;min-width:190px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-lg);padding:6px;z-index:150;max-height:300px;overflow:auto;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top center;pointer-events:none;transition:opacity .15s ease,transform .15s ease;color:var(--text)}
.fs-menu.open{opacity:1;transform:none;pointer-events:auto}
.fs-option{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;font-size:14px;color:var(--text);cursor:pointer;transition:background .1s}
.fs-option:hover{background:var(--surface-2)}
.fs-option.sel{color:var(--accent);font-weight:600;background:var(--accent-bg)}
.fs-otext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-check{width:16px;height:16px;flex-shrink:0;color:var(--accent);opacity:0;display:flex;transition:opacity .1s}
.fs-check svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.6}
.fs-option.sel .fs-check{opacity:1}
/* Variante per la sidebar scura (selettore utente) — riquadro come gli altri menù */
.user-pick .fs-trigger{padding:9px 11px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font-size:13.5px;font-weight:600;border-radius:10px}
.user-pick .fs-trigger:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.12)}
.user-pick .fancy-select.open .fs-trigger{border-color:rgba(255,255,255,.5);box-shadow:0 0 0 3px rgba(255,255,255,.09)}
.user-pick .fs-chev{stroke:var(--side-text)}
.user-pick .fancy-select.open .fs-chev{stroke:#fff}
/* ============== PROMEMORIA (scadenze) ==============
Tre stati e tre colori: in ritardo (rosso), in arrivo (ambra), più avanti
(neutro). Il colore sta sulla riga, non su un pallino: si deve capire con
un'occhiata sola quali controlli chiedono qualcosa adesso. */
.sc-group{margin-bottom:22px}
.sc-group-head{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.sc-group-name{font-size:14px;font-weight:700;letter-spacing:-.01em}
.sc-group-n{font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px;background:var(--surface-3);color:var(--text-2)}
.sc-group-sub{font-size:12px;color:var(--text-3)}
.sc-ritardo .sc-group-name{color:var(--bad)}
.sc-ritardo .sc-group-n{background:var(--bad-bg);color:var(--bad)}
.sc-presto .sc-group-n{background:var(--warn-bg);color:var(--warn)}
.sc-row{display:flex;align-items:center;gap:13px;padding:13px 16px;margin-bottom:9px;
background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--border-strong);
border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .13s,transform .13s}
.sc-row:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.sc-row.sc-cliccabile{cursor:pointer}
.sc-andamenti .sc-meta{font-family:var(--mono);font-size:12px}
.sc-row.st-ritardo{border-left-color:var(--bad)}
.sc-row.st-presto{border-left-color:var(--warn)}
.sc-row.st-futuro{border-left-color:var(--accent)}
.sc-row.st-chiuso{opacity:.62;border-left-color:var(--ok)}
.sc-ico{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:var(--surface-2);color:var(--text-2)}
.sc-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.st-ritardo .sc-ico{background:var(--bad-bg);color:var(--bad)}
.st-presto .sc-ico{background:var(--warn-bg);color:var(--warn)}
.st-chiuso .sc-ico{background:var(--ok-bg);color:var(--ok)}
.sc-body{flex:1;min-width:0}
.sc-tit{font-size:14px;font-weight:600;letter-spacing:-.01em}
.sc-meta{font-size:12px;color:var(--text-2);margin-top:2px}
.sc-note{font-size:12px;color:var(--text-3);margin-top:3px;font-style:italic}
.sc-quando{text-align:right;flex-shrink:0;display:flex;flex-direction:column;line-height:1.35}
.sc-quando b{font-size:13px;font-family:var(--mono);font-weight:600}
.sc-quando span{font-size:11.5px;color:var(--text-3)}
.st-ritardo .sc-quando span{color:var(--bad);font-weight:600}
.st-presto .sc-quando span{color:var(--warn);font-weight:600}
.sc-btns{display:flex;gap:6px;flex-shrink:0}
.btn.icon-only{padding:6px 8px}
.btn.icon-only svg{margin:0}
.btn-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--border))}
.btn-ok:hover{background:var(--ok);border-color:var(--ok);color:#fff}
.sc-form-riga{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sc-sugg{font-size:12px;color:var(--text-2);line-height:1.5;margin:-2px 0 12px;display:none}
.sc-sugg.c-è{display:block;background:var(--accent-bg);border-radius:9px;padding:9px 11px}
.sc-mini{padding:6px 16px}
.sc-mini-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);cursor:pointer}
.sc-mini-row:last-child{border-bottom:none}
.sc-mini-row .sc-ico{width:30px;height:30px;border-radius:9px}
.sc-mini-row .sc-ico svg{width:15px;height:15px}
.sc-mini-row .sc-tit{font-size:13px}
.side-count.allarme{background:var(--bad);color:#fff}
/* ============== RICERCA GLOBALE ==============
Si apre sopra tutto, come una tavolozza di comandi: il campo in alto,
i risultati raggruppati sotto, frecce e Invio per non staccare le mani
dalla tastiera. */
.cerca-btn{width:100%;display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:12px;
background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);cursor:pointer;
font-family:inherit;font-size:13px;transition:.14s;text-align:left}
.cerca-btn:hover{border-color:var(--accent);color:var(--text-2);background:var(--surface);box-shadow:var(--shadow-sm)}
.cerca-btn > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cerca-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.cerca-btn kbd{font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:6px;flex-shrink:0;
background:var(--surface-3);color:var(--text-3);border:1px solid var(--border)}
.cerca-box{position:fixed;inset:0;z-index:180;display:none}
.cerca-box.open{display:block}
.cerca-scrim{position:absolute;inset:0;background:rgba(8,18,20,.5);backdrop-filter:blur(3px)}
.cerca-card{position:relative;margin:9vh auto 0;width:min(660px,calc(100% - 32px));background:var(--surface);
border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;
animation:cerca-in .18s cubic-bezier(.2,.8,.3,1)}
@keyframes cerca-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.cerca-top{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--border)}
.cerca-top svg{width:19px;height:19px;stroke:var(--text-3);fill:none;stroke-width:2;flex-shrink:0}
.cerca-top input{flex:1;border:0;outline:none;background:none;font-family:inherit;font-size:16px;color:var(--text)}
.cerca-top input::placeholder{color:var(--text-3)}
.cerca-esc{font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:6px;background:var(--surface-3);
color:var(--text-3);border:1px solid var(--border);cursor:pointer}
.cerca-risultati{max-height:min(60vh,520px);overflow:auto;padding:8px}
.cerca-gruppo{display:flex;align-items:center;gap:7px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
font-weight:700;color:var(--text-3);padding:10px 10px 6px}
.cerca-gruppo span{font-size:10px;background:var(--surface-3);border-radius:20px;padding:1px 6px}
.cerca-voce{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border:0;border-radius:11px;
background:none;font-family:inherit;text-align:left;cursor:pointer;color:var(--text)}
.cerca-voce:hover{background:var(--surface-2)}
.cerca-voce.sel{background:var(--accent-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.cerca-ico{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:var(--surface-3);color:var(--text-2)}
.cerca-voce.sel .cerca-ico{background:var(--surface);color:var(--accent)}
.cerca-ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.cerca-testo{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.cerca-tit{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cerca-sotto{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cerca-data{font-size:11.5px;color:var(--text-3);font-family:var(--mono);flex-shrink:0}
.cerca-voce mark{background:color-mix(in srgb,var(--accent) 26%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.cerca-altri{font-size:11.5px;color:var(--text-3);padding:2px 10px 8px}
.cerca-vuoto{padding:26px 18px 30px;text-align:center}
.cerca-vuoto p{font-size:14px;color:var(--text-2);margin-bottom:6px}
.cerca-vuoto span{font-size:12px;color:var(--text-3)}
/* sola lettura: quello che resta visibile non deve promettere modifiche */
body.sola-lettura .thumb-del{display:none}
/* ============== TERAPIE ============== */
.tp-group{margin-bottom:22px}
.tp-row{display:flex;align-items:center;gap:13px;padding:13px 16px;margin-bottom:9px;
background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);
border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .13s,transform .13s}
.tp-row:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.tp-row.st-finita{opacity:.6;border-left-color:var(--border-strong)}
.tp-ico{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:var(--accent-bg);color:var(--accent-strong)}
.tp-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.st-finita .tp-ico{background:var(--surface-2);color:var(--text-3)}
.tp-body{flex:1;min-width:0}
.tp-tit{font-size:14px;font-weight:600;letter-spacing:-.01em}
.tp-motivo{font-size:12.5px;font-weight:500;color:var(--text-3)}
.tp-meta{font-size:12.5px;color:var(--text-2);margin-top:2px}
.tp-note{font-size:12px;color:var(--text-3);margin-top:3px;font-style:italic}
.tp-check{margin:-4px 0 12px}
.tp-mini{padding:6px 16px}
.tp-mini-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer}
.tp-mini-row:last-child{border-bottom:none}
.tp-mini-row .tp-ico{width:30px;height:30px;border-radius:9px}
.tp-mini-row .tp-ico svg{width:15px;height:15px}
.tp-mini-row .tp-tit{font-size:13px}
.tp-mini-altri{font-size:12px;color:var(--text-3);padding:8px 0 10px}
/* ============== SCHEDA DA STAMPARE ==============
A schermo è un'anteprima su fondo bianco (è carta, anche in tema scuro);
in stampa resta solo il foglio, senza barra e senza app. */
.stampa-box{position:fixed;inset:0;z-index:220;display:none;background:var(--bg);overflow:auto}
.stampa-box.open{display:block}
.stampa-barra{position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--border);
padding:14px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm)}
.st-barra-testa{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.st-barra-testa b{font-size:15px}
.st-barra-testa span{font-size:12.5px;color:var(--text-3)}
.st-scelte{display:flex;gap:16px;flex-wrap:wrap}
.st-esami{border-top:1px solid var(--border);padding-top:11px;display:flex;flex-direction:column;gap:8px}
.st-esami-tit{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--text-3)}
.st-esami-tit span{background:var(--surface-3);border-radius:20px;padding:1px 7px;margin-left:6px;letter-spacing:0}
.st-esami-lista{display:flex;flex-wrap:wrap;gap:6px;max-height:104px;overflow:auto}
.st-pill{border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:20px;
padding:4px 11px;font-family:inherit;font-size:12.5px;cursor:pointer;transition:.12s}
.st-pill:hover{border-color:var(--accent);color:var(--accent)}
.st-pill b{font-weight:700;font-size:11px;opacity:.6;margin-left:4px}
.st-pill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.st-pill.on b{opacity:.8}
.st-periodo{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3)}
.st-none{font-size:12.5px;color:var(--text-3)}
.st-azioni{display:flex;gap:9px}
/* il pulsante principale qui è fuori da .content, dove .btn-primary è bianco
perché pensato per la sidebar scura: gli si rimette il gradiente */
.stampa-barra .btn-primary{background:var(--grad);color:#fff;border-color:transparent;
box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 26%,transparent)}
.stampa-barra .btn-primary:hover{background:var(--grad-strong);color:#fff;transform:translateY(-1px)}
.stampa-foglio{max-width:210mm;margin:20px auto 60px;background:#fff;color:#15201f;border-radius:5px;
padding:16mm 15mm;box-shadow:var(--shadow-lg);font-size:11.5px;line-height:1.45}
.fg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
border-bottom:2px solid #15201f;padding-bottom:10px;margin-bottom:18px}
.fg-kicker{font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:#5c6b72;font-weight:700}
.fg-head h1{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:3px;color:#15201f}
.fg-data{font-size:10px;color:#5c6b72;text-align:right;line-height:1.5}
.fg-sez{margin-bottom:18px}
.fg-sez h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:#15201f;
margin-bottom:7px;padding-bottom:4px;border-bottom:1px solid #cfd8d9}
.fg-sez h2 span{text-transform:none;letter-spacing:0;font-weight:500;color:#5c6b72;font-size:11px;margin-left:6px}
.fg-tab{width:100%;border-collapse:collapse}
.fg-tab th,.fg-tab td{text-align:left;padding:4px 7px;border-bottom:1px solid #e4e9eb;vertical-align:top}
.fg-tab thead th{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:#5c6b72;font-weight:700;
border-bottom:1px solid #b9c4c6}
.fg-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fg-matrice th.fg-esame{text-align:left;font-weight:600;white-space:nowrap}
.fg-matrice th.fg-esame span{display:block;font-weight:400;font-size:9.5px;color:#5c6b72}
.fg-fuori{font-weight:700}
.fg-manca{color:#9aa6a8}
.fg-rif{color:#5c6b72;white-space:nowrap}
.fg-spark-td{width:110px;padding-right:0}
.fg-spark{display:block}
.fg-diag{font-size:10.5px;color:#5c6b72}
.fg-legenda{font-size:9.5px;color:#5c6b72;margin-top:6px}
.fg-vuoto{font-size:11px;color:#5c6b72;font-style:italic}
.fg-piede{margin-top:22px;padding-top:9px;border-top:1px solid #cfd8d9;font-size:9.5px;color:#5c6b72;line-height:1.5}
@media print {
/* si stampa solo se l'anteprima è aperta: altrimenti Ctrl+P darebbe una
pagina bianca invece dell'app */
body.stampa-attiva > *:not(.stampa-box){display:none !important}
body.stampa-attiva .stampa-box{position:static;display:block;background:#fff;overflow:visible}
body.stampa-attiva .stampa-barra{display:none !important}
body.stampa-attiva .stampa-foglio{max-width:none;margin:0;padding:0;box-shadow:none;border-radius:0;font-size:10.5pt}
.fg-sez,.fg-tab tr{break-inside:avoid}
.fg-head{break-after:avoid}
@page{size:A4;margin:14mm}
}
/* ============== CESTINO ============== */
.ce-nota{font-size:12.5px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--radius);padding:11px 14px;margin-bottom:14px;line-height:1.55}
.ce-row{display:flex;align-items:center;gap:13px;padding:13px 16px;margin-bottom:9px;
background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--border-strong);
border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.ce-ico{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:var(--surface-2);color:var(--text-3)}
.ce-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.ce-body{flex:1;min-width:0}
.ce-tit{font-size:14px;font-weight:600;letter-spacing:-.01em}
.ce-meta{font-size:12px;color:var(--text-2);margin-top:2px}
.ce-quando{text-align:right;flex-shrink:0;display:flex;flex-direction:column;line-height:1.35}
.ce-quando b{font-size:12px;font-weight:600;color:var(--text-2)}
.ce-quando span{font-size:11.5px;color:var(--text-3)}
/* scelta del tipo di backup, nella modale */
.scelta-backup{display:block;width:100%;text-align:left;padding:13px 15px;margin-bottom:10px;border-radius:var(--radius);
border:1px solid var(--border);background:var(--surface);cursor:pointer;font-family:inherit;transition:.13s}
.scelta-backup:hover{border-color:var(--accent);background:var(--surface-2);transform:translateY(-1px)}
/* ATTENZIONE al selettore: ">" e non discendente. Con ".scelta-backup b" la
riga in grassetto DENTRO la descrizione diventava anche lei un blocco flex
e spezzava la frase in tre pezzi. È lo stesso inciampo di ".ai-check b". */
.scelta-backup > b{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);margin-bottom:3px}
.scelta-backup > span{display:block;font-size:12.5px;color:var(--text-2);line-height:1.5}
.scelta-tag{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
background:var(--accent-bg);color:var(--accent-strong);padding:2px 8px;border-radius:20px}
.adm-azioni{display:flex;gap:9px;flex-wrap:wrap}
.adm-nota-attenzione{margin-top:11px;padding-top:10px;border-top:1px solid var(--border)}
/* ============== PROFILO (anagrafica, nascita, crescita) ============== */
.pf-testa{display:flex;align-items:center;gap:16px;padding:18px 20px;margin-bottom:18px;border-radius:var(--radius-lg);
background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.pf-avatar{width:52px;height:52px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
font-size:18px;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--grad)}
.pf-testa-txt{flex:1;min-width:0}
.pf-testa-txt h2{font-size:21px;font-weight:700;letter-spacing:-.02em}
.pf-testa-txt p{font-size:13px;color:var(--text-2);margin-top:2px}
.pf-gruppo{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:12px;flex-shrink:0;
background:var(--bad-bg);color:var(--bad);font-size:17px;font-weight:800;letter-spacing:-.01em}
.pf-gruppo svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.pf-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
padding:16px 18px;box-shadow:var(--shadow-sm)}
.pf-larga{margin-bottom:16px}
.pf-card-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.pf-card-head h3{flex:1;font-size:14px;font-weight:700;letter-spacing:-.01em}
.pf-card-head > svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:2;flex-shrink:0}
.pf-riga{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:6px 0;
border-bottom:1px dashed var(--border);font-size:13px}
.pf-riga:last-child{border-bottom:none}
.pf-riga span{color:var(--text-2);white-space:nowrap}
.pf-riga b{font-weight:600;text-align:right}
.pf-note{margin-top:10px;padding:9px 11px;border-radius:10px;background:var(--surface-2);
font-size:12.5px;color:var(--text-2);line-height:1.5}
.pf-vuoto{font-size:12.5px;color:var(--text-3);line-height:1.55}
.pf-voce{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.pf-voce:last-child{border-bottom:none}
.pf-voce-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.pf-voce-txt b{font-size:13.5px;font-weight:600}
.pf-voce-txt span{font-size:12px;color:var(--text-2)}
.pf-voce-btn{display:flex;gap:5px;flex-shrink:0}
.pf-tag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
padding:1px 7px;border-radius:20px;background:var(--surface-3);color:var(--text-2);vertical-align:middle}
.pf-tag.media{background:var(--warn-bg);color:var(--warn)}
.pf-tag.grave{background:var(--bad-bg);color:var(--bad)}
.pf-sotto-titolo{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
color:var(--text-3);margin:14px 0 4px}
.pf-nato-riga{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;margin-bottom:12px}
.pf-nato-riga b{font-size:16px;font-weight:700}
.pf-nato-riga span{color:var(--text-2);font-size:13px}
.pf-nato-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.pf-nato{background:var(--surface-2);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.pf-nato span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700}
.pf-nato b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pf-grafici{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:14px}
.pf-grafico{background:var(--surface-2);border-radius:12px;padding:11px 12px}
.pf-grafico-tit{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--text-2);margin-bottom:4px}
.pf-grafico-tit b{font-size:14px;color:var(--text);font-weight:700}
.pf-grafico svg{width:100%;height:96px;display:block}
.pf-grafico-piede{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-3);font-family:var(--mono)}
.pf-tab-wrap{overflow-x:auto}
.pf-tab{width:100%;border-collapse:collapse;font-size:13px}
.pf-tab th,.pf-tab td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.pf-tab thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700}
.pf-tab .n{text-align:right;font-variant-numeric:tabular-nums}
.pf-dim{color:var(--text-3);font-size:12px}
.pf-avvertenza{font-size:11.5px;color:var(--text-3);margin-top:10px;line-height:1.5}
.pf-emergenza{flex-shrink:0}
.pf-emergenza svg{width:15px;height:15px;stroke:var(--bad);fill:none;stroke-width:2.2}
/* ============== SCHEDA DI EMERGENZA (emergenza.js) ==============
La modale di chi tiene il fascicolo. La pagina che si apre dal tag ha
uno stile suo, dentro pagina-emergenza.js: non carica questo file. */
.em-punti{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--text-2);line-height:1.5}
.em-punti b{color:var(--text)}
.em-sotto-titolo{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin:18px 0 9px}
.em-campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 14px;
background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px 12px}
.em-campi>*{min-width:0}
.em-nota{font-size:12px;color:var(--text-3);margin-top:7px;line-height:1.5}
.em-avviso{font-size:12.5px;line-height:1.5;padding:9px 11px;border-radius:10px;background:var(--warn-bg);margin-bottom:10px}
.em-link{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 11px;margin-bottom:10px}
.em-link code{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere;user-select:all}
.em-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.em-azioni .btn{text-decoration:none}
.em-azioni svg,.em-qr-txt svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.em-esito{font-size:13px;font-weight:600;margin-top:9px;padding:9px 11px;border-radius:10px}
.em-esito:empty{display:none}
.em-esito.attesa{background:var(--accent-bg);color:var(--accent-strong)}
.em-esito.ok{background:var(--ok-bg);color:var(--ok)}
.em-esito.errore{background:var(--bad-bg);color:var(--bad)}
.em-qr-riga{display:flex;gap:14px;align-items:center;margin-top:16px}
.em-qr{width:132px;flex:0 0 132px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.em-qr svg{display:block;width:100%;height:auto}
.em-qr svg path{stroke:none}
.em-qr-txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;font-size:12.5px;color:var(--text-2);line-height:1.5}
.em-qr-txt b{font-size:13.5px;color:var(--text)}
.em-letture{list-style:none;display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.em-letture li{display:flex;justify-content:space-between;gap:10px;color:var(--text-2)}
.em-letture li span:first-child{color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0}
.em-fondo{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;padding-top:12px;border-top:1px solid var(--border)}
.em-azione{font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer}
.em-azione.danger{color:var(--bad)}
@media(max-width:480px){.em-qr-riga{flex-direction:column;align-items:flex-start}}
/* ============== VACCINI ============== */
.vx-anno{margin-bottom:20px}
.vx-row{display:flex;align-items:center;gap:13px;padding:13px 16px;margin-bottom:9px;
background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent-2);
border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .13s,transform .13s}
.vx-row:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.vx-ico{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--accent-2) 14%,transparent);color:var(--accent-2)}
.vx-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.vx-body{flex:1;min-width:0}
.vx-tit{font-size:14px;font-weight:600;letter-spacing:-.01em}
.vx-meta{font-size:12.5px;color:var(--text-2);margin-top:2px}
.vx-reazioni{font-size:12px;color:var(--warn);margin-top:3px}
.vx-note{font-size:12px;color:var(--text-3);margin-top:3px;font-style:italic}
.vx-quando{text-align:right;flex-shrink:0;display:flex;flex-direction:column;line-height:1.35}
.vx-quando b{font-size:13px;font-family:var(--mono);font-weight:600}
.vx-quando span{font-size:11.5px;color:var(--text-3)}
.vx-richiami{background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
border-radius:var(--radius);padding:13px 16px;margin-bottom:18px}
.vx-richiami-tit{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--warn);margin-bottom:8px}
.vx-richiami-tit svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.vx-richiamo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:6px 0;font-size:13px;border-top:1px solid color-mix(in srgb,var(--warn) 22%,transparent)}
.vx-richiamo:first-of-type{border-top:none}
.vx-richiamo i{color:var(--text-2);font-style:normal;font-size:12px}
.vx-richiamo.tardi i{color:var(--bad);font-weight:600}
/* chip con le cose da sapere subito, sulla scheda d'apertura */
.hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;cursor:pointer;position:relative;z-index:1}
.hero-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600;
background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2)}
.hero-chip svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.hero-chip.grave{background:rgba(231,99,99,.32);border-color:rgba(255,190,190,.5)}
/* blocchi dell'anagrafica sul foglio stampato */
.fg-sotto-nome{font-size:11px;color:#5c6b72;margin-top:2px}
.fg-ana{display:flex;flex-direction:column;gap:3px}
.fg-ana-riga{display:flex;gap:10px;align-items:baseline;font-size:11px}
.fg-ana-riga > span{flex:0 0 130px;color:#5c6b72;text-transform:uppercase;font-size:9.5px;letter-spacing:.05em;font-weight:700}
.fg-ana-riga > b{flex:1;font-weight:600}
.fg-ana-riga i{font-weight:400;color:#5c6b72;font-style:normal}
.fg-allarme{border:1.5px solid #15201f;border-radius:4px;padding:5px 9px;margin-bottom:7px;
font-weight:700;font-size:11.5px}
/* La barra in alto si stringe per gradi, nell'ordine in cui le cose
diventano superflue.
Da quando il fascicolo sta nella colonna di sinistra, quassù c'è solo
l'account e lo spazio non se lo contende più nessuno: il nome resta fino
al telefono. */
/* 1000 → le tre zone non ci stanno più in fila: titolo e account sopra, la
ricerca sotto a tutta larghezza. */
@media (max-width: 1000px) {
.topbar-inner{grid-template-columns:1fr auto;grid-template-areas:"sx dx" "cerca cerca";gap:10px}
.topbar-sx{grid-area:sx}
.topbar-dx{grid-area:dx}
.cerca-btn{grid-area:cerca}
.acct-role{display:none}
.acct{padding:5px 10px 5px 5px;max-width:190px}
}
/* ============== CAMPI: TUTTI DELL'APP ==============
Caselle, cursori, ricerca, suggerimenti e menù hanno UN aspetto solo,
quello dell'app, in chiaro e in scuro, e seguono gli angoli scelti in
Personalizza. Prima ogni casella era quella del browser (diversa su
Windows, Mac e Android) con sette varianti di etichetta, i suggerimenti
erano il menù grigio del browser e ogni menù aveva i suoi angoli.
Una casella nuova: . */
input[type="checkbox"]{-webkit-appearance:none;appearance:none;flex:0 0 18px;width:18px;height:18px;margin:0;
border:1.5px solid var(--border-strong);border-radius:max(4px,calc(var(--radius) - 7px));background:var(--surface);
display:inline-grid;place-content:center;vertical-align:middle;cursor:pointer;
transition:background .12s,border-color .12s,box-shadow .12s}
input[type="checkbox"]::after{content:"";width:10px;height:10px;background:#fff;transform:scale(0);transition:transform .12s;
clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
input[type="checkbox"]:hover{border-color:var(--accent)}
input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
input[type="checkbox"]:checked::after{transform:scale(1)}
input[type="checkbox"]:focus-visible{outline:none;box-shadow:var(--ring)}
input[type="checkbox"]:disabled{opacity:.5;cursor:not-allowed}
.casella{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:500;color:var(--text);line-height:1.4;cursor:pointer}
.casella > input{margin-top:1px}
.casella > span{min-width:0}
.casella i{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--text-3);line-height:1.4;margin-top:1px}
/* cursori: la parte piena nel colore scelto (--pieno lo aggiorna ui-campi.js) */
input[type="range"]{-webkit-appearance:none;appearance:none;height:22px;background:none;cursor:pointer;--pieno:50%}
input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:6px;
background:linear-gradient(to right,var(--accent) var(--pieno),var(--surface-3) var(--pieno))}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;
background:var(--surface);border:3px solid var(--accent);box-shadow:var(--shadow-sm);transition:transform .1s}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.12)}
input[type="range"]::-moz-range-track{height:6px;border-radius:6px;background:var(--surface-3)}
input[type="range"]::-moz-range-progress{height:6px;border-radius:6px;background:var(--accent)}
input[type="range"]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--accent)}
input[type="range"]:focus-visible{outline:none}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring)}
/* ricerca: via la crocetta e le decorazioni del browser */
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
/* i menù (tendine, suggerimenti, account e fascicolo, calendario): stessi angoli, che seguono Personalizza */
.fs-menu,.pop,.ud-box{border-radius:calc(var(--radius) + 2px)}
.fs-option,.pop-item,.ud-g,.ud-anno,.ud-nav,.ud-titolo,.ud-piede-btn,.ud-apri{border-radius:calc(var(--radius) - 3px)}
.fs-trigger{border-radius:calc(var(--radius) - 2px)}
.fs-option.attiva{background:var(--surface-2)}
.uc-menu .fs-option{font-size:13.5px}
/* il pannello dell'ora: la stessa scatola del calendario */
.ud-ore{width:258px}
.ud-ore-tit{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700;margin:4px 2px 6px}
.ud-ore-griglia{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-bottom:6px}
.ud-ore-griglia .ud-g{height:30px;font-size:12.5px;font-family:var(--mono)}
/* ============== CAMPO DATA E CALENDARIO (ui-date.js) ==============
Il calendario del browser cambia faccia a ogni browser e ignora il tema
della pagina: era l'unico pezzo che sembrava di un altro programma. Qui
il campo resta un (scrivibile a mano, e `.value`
continua a dare la data in ISO), ma l'icona è la nostra e il calendario
che si apre è disegnato qui sotto. */
.ud-wrap{position:relative;display:block}
.ud-input{padding-right:40px !important}
/* via il quadratino del browser: al suo posto c'è il nostro bottone */
.ud-input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
.ud-input::-webkit-inner-spin-button,.ud-input::-webkit-clear-button{display:none;-webkit-appearance:none}
.ud-apri{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;
border:0;border-radius:9px;background:none;color:var(--text-3);cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:.12s}
.ud-apri:hover{background:var(--surface-2);color:var(--accent)}
.ud-apri svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.ud-box{position:fixed;z-index:210;width:278px;padding:10px;border-radius:14px;
background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);
opacity:0;transform:translateY(-5px);transition:opacity .12s,transform .12s}
.ud-box.open{opacity:1;transform:none}
.ud-testa{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.ud-nav{width:30px;height:30px;flex-shrink:0;border:0;border-radius:9px;background:none;color:var(--text-2);
cursor:pointer;display:flex;align-items:center;justify-content:center}
.ud-nav:hover{background:var(--surface-2);color:var(--accent)}
.ud-nav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.ud-titolo{flex:1;border:0;border-radius:9px;background:none;font-family:inherit;font-size:13.5px;
font-weight:700;color:var(--text);cursor:pointer;padding:6px 8px;text-transform:capitalize}
.ud-titolo:hover{background:var(--surface-2)}
.ud-settimana,.ud-griglia{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ud-settimana span{text-align:center;font-size:10px;font-weight:700;color:var(--text-3);padding:4px 0}
.ud-g{height:32px;border:0;border-radius:9px;background:none;font-family:inherit;font-size:13px;
color:var(--text);cursor:pointer;transition:.1s}
.ud-g:hover{background:var(--surface-2)}
.ud-g.fuori{color:var(--text-3);opacity:.55}
.ud-g.oggi{box-shadow:inset 0 0 0 1.5px var(--accent);font-weight:700}
.ud-g.sel{background:var(--accent);color:#fff;font-weight:700}
.ud-g.sel:hover{background:var(--accent-strong)}
.ud-anni{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ud-anno{height:36px;border:0;border-radius:9px;background:none;font-family:inherit;font-size:13px;
color:var(--text);cursor:pointer}
.ud-anno:hover{background:var(--surface-2)}
.ud-anno.sel{background:var(--accent);color:#fff;font-weight:700}
.ud-piede{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.ud-piede-btn{flex:1;padding:7px;border:1px solid var(--border);border-radius:9px;background:var(--surface);
font-family:inherit;font-size:12.5px;color:var(--text-2);cursor:pointer;transition:.12s}
.ud-piede-btn:hover{border-color:var(--accent);color:var(--accent)}
/* ============== RIQUADRI (blocchi.js) ==============
Una griglia sola per tutte le sezioni fatte di riquadri: 12 colonne, e ogni
riquadro ne prende --col (3, 4, 6, 8, 9 o 12). Le righe sono alte --riga e
blocchi.js dà a ogni riquadro le righe che servono alla sua altezza: con
`dense` i riquadri stretti salgono nei vuoti accanto a quelli alti. Finché
non è misurata (.misurata) la griglia ha righe normali: meglio una prima
occhiata senza incastri che riquadri uno sopra l'altro.
`minmax(0,1fr)` e `min-width:0` non sono facoltativi: una colonna di griglia
non scende sotto la larghezza minima del suo contenuto, e bastava il titolo
lungo di un documento recente (che non va a capo) per tenere la pagina
larga 490px su un telefono da 393. */
.blocchi{--riga:4px;--gap:18px;position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
grid-auto-flow:row dense;column-gap:var(--gap);row-gap:var(--gap);align-items:start}
.blocchi.misurata{grid-auto-rows:var(--riga);row-gap:0}
/* la sonda dà a blocchi.js la misura di una riga, zoom del testo compreso */
.blocchi-sonda{position:absolute;left:0;top:0;width:1px;height:calc(var(--riga) * 25);visibility:hidden;pointer-events:none}
.blocco{grid-column:span var(--col,12);min-width:0;position:relative}
.blocco-corpo{min-width:0}
/* lo spazio fra i riquadri lo mette la griglia: i margini sotto l'ultimo pezzo di un riquadro no */
.blocco-corpo > :last-child{margin-bottom:0}
/* Disporre: ogni riquadro ha una barra (trascina, sposta, larghezza, nascondi)
e un bordo destro da tirare. Il contenuto non risponde ai clic. */
.blocchi.in-modifica{padding-top:4px}
.blocchi.in-modifica .blocco{outline:2px dashed color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:5px;
border-radius:var(--radius-lg)}
.blocchi.in-modifica .blocco:hover{outline-color:var(--accent)}
.in-modifica .blocco-corpo{pointer-events:none;user-select:none}
.blocco-barra{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px;
padding:4px 6px 4px 8px;border-radius:calc(var(--radius) - 2px);background:var(--accent-bg);color:var(--accent-strong);
font-size:12.5px;font-weight:600}
.blocco-presa{display:flex;align-items:center;gap:6px;flex:1;min-width:0;cursor:grab;touch-action:none;padding:3px 0}
.blocco-presa svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.6}
.blocco-nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blocco-comandi{display:flex;align-items:center;gap:1px}
.blocco-btn{width:28px;height:28px;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;transition:.12s}
.blocco-btn:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.blocco-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.blocco-btn:disabled{opacity:.3;cursor:default;background:none}
.blocco-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.blocco-larghezza{min-width:40px;text-align:center;font-family:var(--mono);font-size:11.5px}
.blocco-sep{width:1px;height:16px;margin:0 4px;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.blocco-bordo{position:absolute;top:0;bottom:0;right:-12px;width:16px;cursor:ew-resize;touch-action:none;
display:flex;align-items:center;justify-content:center;z-index:2}
.blocco-bordo::after{content:"";width:5px;height:44px;max-height:70%;border-radius:4px;background:var(--accent);opacity:.5;transition:.12s}
.blocco-bordo:hover::after,.blocco-allargando .blocco-bordo::after{opacity:1;height:70px}
.blocco-segnaposto{opacity:.3}
.blocco-fantasma{position:fixed;z-index:200;margin:0;pointer-events:none;opacity:.94;cursor:grabbing;
border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:var(--bg);overflow:hidden}
.blocco-vuoto{padding:26px 16px;text-align:center;color:var(--text-3);font-size:13px;
border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-2)}
html.disponendo.trascinando,html.disponendo.trascinando *{cursor:grabbing !important}
/* il vassoio: i riquadri nascosti e i due modi di uscire, attaccato al fondo dello schermo */
.blocchi-vassoio{position:sticky;bottom:14px;z-index:15;margin-top:20px;display:flex;align-items:center;
justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--radius-lg);
background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg)}
.bv-nascosti{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.bv-tit{font-size:12.5px;font-weight:600;color:var(--text-2);margin-right:4px}
.bv-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;cursor:pointer;
border:1px dashed var(--border-strong);background:var(--surface-2);color:var(--text);font-family:inherit;font-size:12.5px;transition:.12s}
.bv-chip:hover{border-color:var(--accent);color:var(--accent)}
.bv-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2}
.bv-azioni{display:flex;gap:8px;margin-left:auto}
/* il pulsante in alto (un .btn: senza questa riga "hidden" non nasconderebbe niente) */
.disponi-btn[hidden]{display:none}
.disponi-btn.attivo{background:var(--accent);border-color:var(--accent);color:#fff}
.disponi-btn.attivo:hover{color:#fff;filter:brightness(1.08)}
/* ============== STRUTTURA DELLA PAGINA (Personalizza) ==============
Attributi su scritti da aspetto.js (e dallo script in testa a
index.html, prima che la pagina si disegni). */
.content{zoom:var(--zoom-contenuto,1)}
:root[data-larghezza="ampia"] .content,:root[data-larghezza="ampia"] .topbar-inner{max-width:1480px}
:root[data-larghezza="piena"] .content,:root[data-larghezza="piena"] .topbar-inner{max-width:none}
:root[data-barra="scorre"] .topbar{position:relative}
:root[data-menu-pos="destra"] .app{flex-direction:row-reverse}
.side-nav .nascosta{display:none}
/* Menù a sole icone: solo dove il menù è una colonna (sul telefono è un
cassetto che si apre, e lì i nomi servono). Il nome resta nel title. */
@media(min-width:721px){
:root[data-menu-stile="icone"] .sidebar{width:78px;padding:18px 12px}
:root[data-menu-stile="icone"] .brand{justify-content:center;padding:4px 0 16px}
:root[data-menu-stile="icone"] .brand-text,:root[data-menu-stile="icone"] .fsw-txt,:root[data-menu-stile="icone"] .fsw-chev,
:root[data-menu-stile="icone"] .side-nav-label,:root[data-menu-stile="icone"] .side-link > span:not(.side-count),
:root[data-menu-stile="icone"] .side-actions .btn span,:root[data-menu-stile="icone"] .folder-status{display:none}
:root[data-menu-stile="icone"] .fsw-btn{justify-content:center;padding:10px 0}
:root[data-menu-stile="icone"] .side-nav{gap:5px}
:root[data-menu-stile="icone"] .side-link{justify-content:center;padding:11px 0}
:root[data-menu-stile="icone"] .side-count{position:absolute;top:2px;right:2px;min-width:0;padding:0 5px;font-size:9.5px;line-height:15px}
:root[data-menu-stile="icone"] .side-actions .btn{padding:10px 0}
}
/* Spazi compatti: meno aria attorno e dentro ai riquadri */
:root[data-densita="compatta"] .content{padding:16px 22px 44px}
:root[data-densita="compatta"] .topbar{padding-top:9px;padding-bottom:9px}
:root[data-densita="compatta"] .blocchi{--gap:10px}
:root[data-densita="compatta"] .panel,:root[data-densita="compatta"] .card,:root[data-densita="compatta"] .pf-card{padding:12px 14px}
:root[data-densita="compatta"] .pf-testa{padding:12px 14px}
:root[data-densita="compatta"] .hero{padding:17px 19px}
:root[data-densita="compatta"] .stat-card{padding:12px}
:root[data-densita="compatta"] .side-link{padding:7px 10px}
/* Angoli: i componenti principali seguono --radius (il cursore in
Personalizza). calc() sotto zero vale zero: a raggio 0 tutto è squadrato. */
.btn,.form-field input,.form-field select,.segmented,.side-link{border-radius:calc(var(--radius) - 2px)}
.btn-sm,.seg{border-radius:calc(var(--radius) - 4px)}
.fsw-btn,.pf-avatar,.stat-card .stat-ico{border-radius:var(--radius)}
.hero{border-radius:calc(var(--radius-lg) + 4px)}
/* ============== MISURE FATTE A CASA (misure.js) ============== */
.ms-card{display:flex;flex-direction:column;gap:12px}
.ms-testa{display:flex;align-items:center;gap:12px;min-width:0}
.ms-ico{width:38px;height:38px;border-radius:var(--radius);flex-shrink:0;display:flex;align-items:center;justify-content:center;
color:var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 14%,transparent)}
.ms-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.ms-pressione{--c:#cf3f3f}.ms-glicemia{--c:#c2410c}.ms-peso{--c:#4f9bd9}
.ms-saturazione{--c:#0e9aa7}.ms-temperatura{--c:#b45309}.ms-frequenza{--c:#be185d}
.ms-tit{flex:1;min-width:0}
.ms-tit h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.ms-tit span{font-size:12px;color:var(--text-3)}
.ms-val{white-space:nowrap;text-align:right}
.ms-val b{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.02em}
.ms-val i{font-style:normal;font-size:11.5px;color:var(--text-3)}
.ms-val.bad b{color:var(--bad)}.ms-val.warn b{color:var(--warn)}.ms-val.ok b{color:var(--ok)}
.ms-grafico .ch-smalls{margin:0}
.ms-uno{font-size:12.5px;color:var(--text-3);padding:10px 0}
.ms-piede{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--text-3)}
.ms-elenco{display:flex;flex-direction:column}
.ms-riga{display:flex;align-items:center;gap:12px;padding:9px 4px;border-top:1px solid var(--border)}
.ms-riga:first-child{border-top:0}
.ms-quando{width:92px;flex-shrink:0;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text-2);display:flex;flex-direction:column}
.ms-quando i{font-style:normal;font-weight:500;color:var(--text-3)}
.ms-pills{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ms-pill{font-family:var(--mono);font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--surface-3)}
.ms-pill i{font-style:normal;font-weight:500;color:var(--text-3);font-family:var(--font);font-size:11px}
.ms-nota{font-size:12px;color:var(--text-3)}
.ms-btns{display:flex;gap:4px;flex-shrink:0}
.ms-gruppo{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700;margin:4px 0 6px}
.sc-form-riga.ms-tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.ms-mini{display:flex;flex-direction:column;gap:2px;padding:10px 12px;cursor:pointer}
.ms-mini-riga{display:flex;align-items:center;gap:10px;padding:5px 0}
.ms-mini .ms-ico{width:30px;height:30px}
.ms-mini .ms-ico svg{width:16px;height:16px}
.ms-mini-nome{flex:1;min-width:0;font-size:13px;font-weight:600;display:flex;flex-direction:column;line-height:1.25}
.ms-mini-nome i{font-style:normal;font-weight:500;font-size:11px;color:var(--text-3)}
.ms-mini .ms-val b{font-size:15px}
@media(max-width:720px){
.sc-form-riga.ms-tre{grid-template-columns:1fr 1fr}
.ms-riga{flex-wrap:wrap}
.ms-btns{margin-left:auto}
}
/* ============== SPESE SANITARIE (spese.js) ============== */
.sp-toolbar{flex-wrap:wrap}
.sp-anni{margin-bottom:0}
.sp-totale{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sp-totale-ico{width:46px;height:46px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
background:var(--accent-bg);color:var(--accent);flex-shrink:0}
.sp-totale-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.sp-totale-lab{font-size:12.5px;color:var(--text-2);font-weight:600}
.sp-totale-val{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.sp-totale-sub{font-size:12px;color:var(--text-3)}
.sp-bars{box-shadow:none;padding:14px}
.sp-bars .spec-bar .nm{width:140px}
.sp-ct{width:auto;min-width:86px;text-align:right;font-family:var(--mono)}
.sp-attenzione{margin-top:12px;font-size:12.5px;color:var(--warn);line-height:1.45}
.sp-famiglia{display:flex;flex-direction:column}
.sp-persona{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 4px;border-top:1px solid var(--border)}
.sp-persona:first-child{border-top:0}
.sp-persona b{font-family:var(--mono);font-size:14px}
.sp-persona.questa .sp-persona-nome{color:var(--accent-strong)}
.sp-persona-nome{display:flex;flex-direction:column;font-size:13.5px;font-weight:600;line-height:1.3}
.sp-persona-nome i{font-style:normal;font-weight:500;font-size:11.5px;color:var(--text-3)}
.sp-tutti{border-top:2px solid var(--border-strong)}
.sp-elenco{display:flex;flex-direction:column}
.sp-riga{display:flex;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--border)}
.sp-riga:first-child{border-top:0}
.sp-data{width:76px;flex-shrink:0;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text-2)}
.sp-tipo{flex-shrink:0;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;color:var(--c);
background:color-mix(in srgb,var(--c) 14%,transparent);white-space:nowrap}
.sp-desc{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.sp-desc b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-desc i{font-style:normal;font-size:12px;color:var(--text-3)}
.sp-avvisi{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.sp-avviso{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;background:var(--warn-bg);color:var(--warn)}
.sp-avviso.sp-av-ricevuta{background:var(--surface-3);color:var(--text-3)}
.sp-importo{font-family:var(--mono);font-size:14px;font-weight:700;white-space:nowrap}
.sp-btns{display:flex;gap:4px;flex-shrink:0}
.sp-rimb{margin:4px 0 12px}
.sp-ricevuta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px dashed var(--border-strong);
border-radius:calc(var(--radius) - 2px);background:var(--surface-2)}
.sp-ric-tit{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--text-2)}
.sp-ric-tit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.sp-ric-nome{flex:1;min-width:0;font-size:12.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-scelte{display:flex;flex-direction:column;gap:10px}
.sp-mini{cursor:pointer;padding:12px 14px}
.sp-mini-tot{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.sp-mini-tot i{font-family:var(--font);font-style:normal;font-size:12px;font-weight:500;color:var(--text-3)}
.sp-mini-riga{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0}
.sp-mini-riga span{display:flex;align-items:center;gap:7px;color:var(--text-2)}
.sp-mini-riga span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.sp-mini-riga b{font-family:var(--mono)}
@media(max-width:720px){
.sp-riga{flex-wrap:wrap}
.sp-desc{flex-basis:calc(100% - 100px);order:3}
.sp-importo{margin-left:auto}
.sp-btns{order:4;margin-left:auto}
.sp-bars .spec-bar .nm{width:96px}
}
/* ============== LINEA DEL TEMPO (linea.js) ==============
L'SVG ha una larghezza minima: sul telefono scorre di lato dentro al
riquadro invece di rimpicciolire le scritte fino a non leggerle. */
.ln .panel-head{margin-bottom:10px}
.ln-periodi{margin-bottom:0}
.ln-periodi .seg{padding:5px 11px;font-size:12px}
.ln-scroll{overflow-x:auto;overscroll-behavior-x:contain;margin:0 -4px;padding:0 4px}
.ln-svg{display:block;width:100%;min-width:620px;height:auto}
.ln-corsia{fill:var(--surface-2);stroke:var(--border);stroke-width:1}
.ln-nome{fill:var(--text);font-size:13px;font-weight:600;font-family:var(--font)}
.ln-conta{fill:var(--text-3);font-size:11px;font-family:var(--mono)}
.ln-tacca{stroke:var(--border);stroke-width:1}
.ln-tacca.forte{stroke:var(--border-strong)}
.ln-asse{fill:var(--text-3);font-size:11px;font-family:var(--mono)}
.ln-asse.forte{fill:var(--text-2);font-weight:600}
.ln-oggi{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 3}
.ln-oggi-t{fill:var(--accent);font-weight:700}
.ln-punto{stroke:var(--surface);stroke-width:2}
.ln-segno{cursor:pointer}
.ln-segno:hover .ln-punto,.ln-segno:hover rect{filter:brightness(1.15);stroke:var(--text)}
.ln-barra-testo{fill:#fff;font-size:10px;font-weight:700;font-family:var(--font);pointer-events:none}
/* ============== QUESTO DISPOSITIVO: APP E NOTIFICHE (dispositivo.js) ============== */
/* l'invito a installare: in fondo allo schermo, sopra a tutto tranne le modali */
.dv-invito{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;
display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:560px;margin:0 auto;padding:12px 14px;
background:var(--surface);border:1px solid var(--border-strong);border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow-lg);
transform:translateY(140%);transition:transform .3s ease}
.dv-invito.open{transform:none}
.dv-invito img{border-radius:11px;flex-shrink:0}
.dv-invito-txt{flex:1;min-width:180px;display:flex;flex-direction:column;line-height:1.35}
.dv-invito-txt b{font-size:14px}
.dv-invito-txt span{font-size:12.5px;color:var(--text-2)}
.dv-invito-btn{display:flex;gap:8px;margin-left:auto}
.dv-scelte{display:flex;flex-direction:column;gap:12px}
.dv-sotto{display:flex;flex-direction:column;gap:10px;padding-left:28px}
.dv-prova{align-self:flex-start}
.dv-passi{margin:0 0 12px 20px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.5}
.dv-ico{display:inline-flex;vertical-align:-3px;color:var(--accent)}
.dv-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
/* l'app installata su iPhone: la barra in alto non finisce sotto l'orologio */
@media(display-mode:standalone){
body .topbar{padding-top:max(12px,env(safe-area-inset-top))} /* "body": vince anche sulla regola del telefono, che viene dopo */
body .sidebar{padding-top:max(20px,env(safe-area-inset-top))}
}
/* ============== SICUREZZA DELL'ACCOUNT (sicurezza.js) ============== */
/* il QR va su fondo bianco anche in scuro: le app lo leggono meglio così */
.sc-qr{display:flex;justify-content:center;margin:4px 0 10px}
.sc-qr svg{width:190px;height:190px;padding:10px;background:#fff;border-radius:var(--radius)}
.sc-segreto code{display:block;margin-top:6px;padding:8px 10px;border-radius:calc(var(--radius) - 3px);background:var(--surface-2);
font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--text);user-select:all;word-break:break-all}
.sc-sess{display:flex;flex-direction:column}
.sc-questa{border-color:var(--accent);background:var(--accent-bg)}
.sc-questa em{font-style:normal;font-size:11px;font-weight:700;color:var(--accent-strong);margin-left:4px}
.adm-2fa{margin:4px 0 10px}
.auth-otp input{letter-spacing:.2em;font-family:var(--mono);font-size:18px;text-align:center}
/* ============== PERSONALIZZA (aspetto.js) ============== */
.as-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.as-colonna{display:flex;flex-direction:column;gap:18px;min-width:0}
.as-colonna > .panel{margin:0}
.as-campo{margin-bottom:16px}
.as-campo:last-child{margin-bottom:0}
.as-etichetta{font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:7px}
.as-seg{margin-bottom:0;flex-wrap:wrap;max-width:100%}
.as-nota{font-size:12px;color:var(--text-3);margin-top:7px;line-height:1.45}
.panel > .as-nota{margin:0 0 12px}
.as-colori{display:flex;flex-wrap:wrap;gap:8px}
.as-colore{width:32px;height:32px;padding:0;border-radius:50%;border:2px solid var(--surface);background:var(--c);
box-shadow:0 0 0 1px var(--border-strong);cursor:pointer;position:relative;transition:.12s}
.as-colore:hover{transform:scale(1.08)}
.as-colore.active{box-shadow:0 0 0 2px var(--accent)}
.as-altro{background:conic-gradient(#e74c3c,#f1c40f,#2ecc71,#3498db,#9b59b6,#e74c3c);overflow:hidden}
.as-altro.active{background:var(--c)}
.as-altro input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.as-cursore{display:flex;align-items:center;gap:12px}
.as-cursore input{flex:1;min-width:0}
.as-cursore b{min-width:76px;text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.as-gruppo{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700;margin:14px 0 6px}
.as-riga{display:flex;align-items:center;gap:10px;padding:6px 8px;margin-bottom:6px;border-radius:calc(var(--radius) - 2px);
border:1px solid var(--border);background:var(--surface-2)}
.as-riga.spenta{opacity:.6}
.as-mostra{flex:1;min-width:0;align-items:center}
.as-frecce{display:flex;gap:4px}
.as-sez{padding:8px 8px 8px 12px}
.as-sez-nome{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.as-sez-nome b{font-size:13.5px}
.as-sez-nome small{font-size:11.5px;color:var(--text-3)}
.as-fondo{display:flex;justify-content:center;margin-top:22px}
@media(max-width:900px){.as-griglia{grid-template-columns:1fr}}
/* ============== TELEFONO ==============
Sotto i 720px la pagina è una colonna sola e stretta. Quello che su un
portatile sta comodo in fila — icona, titolo, struttura, pastiglie, data,
freccia — qui si contende 360px, e a rimetterci era sempre il titolo:
"Consulenza allergol…", "Ecografia tiroidea e…". Ma il titolo è l'unica
cosa che serve per riconoscere un documento; la data e le pastiglie si
leggono anche una riga più sotto. Quindi le righe vanno a capo: titolo
(fino a due righe) in alto, tutto il resto sotto, rientrato sotto al
titolo perché si veda che appartiene alla stessa riga. */
@media(max-width:720px){
.hamburger{display:flex}
.sidebar{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
.app.nav-open .sidebar{transform:translateX(0)}
.app.nav-open .sidebar-scrim{display:block}
.content{padding:18px 18px 50px}
.topbar{padding:12px 16px}
/* sul telefono dell'account resta il tondo con le iniziali */
.acct .acct-txt,.acct .acct-chev{display:none}
/* e il sottotitolo della sezione lascia il posto al nome del fascicolo:
di chi sono i documenti conta, "referti e andamento dei valori" no */
#topbar-sub{display:none}
#topbar-fsw{display:block}
.acct{padding:5px;max-width:none}
}
@media (max-width: 720px) {
.sc-row{flex-wrap:wrap}
.sc-quando{text-align:left;flex-direction:row;gap:8px;align-items:baseline}
.sc-btns{margin-left:auto}
.sc-form-riga{grid-template-columns:1fr}
/* su schermo stretto la ricerca prende tutta la riga: la scritta serve,
la scorciatoia da tastiera no (non c'è tastiera) */
.cerca-btn kbd{display:none}
.cerca-card{margin-top:4vh}
/* Panoramica: due riquadri per riga invece di quattro cartelloni uno sotto
l'altro (180px di larghezza minima non ci stavano in due, e si scorreva
mezzo schermo per leggere quattro numeri) */
.stat-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.stat-card{padding:13px}
.stat-card .stat-ico{width:32px;height:32px;border-radius:9px;margin-bottom:8px}
.stat-card .stat-ico svg{width:17px;height:17px}
.stat-val{font-size:23px}
.stat-label{font-size:11.5px}
/* i titoli dei documenti recenti possono prendersi due righe */
.tl-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* le righe di Visite e Analisi vanno a capo */
.vrow{flex-wrap:wrap;padding:12px 13px}
.vrow-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vrow-right{flex-basis:100%;justify-content:flex-start;gap:9px;padding-left:51px;margin-top:-2px}
/* la freccia non serve: la riga è tutta un pulsante, e su una riga sua
sarebbe solo un simbolo che galleggia */
.vrow-chev{display:none}
/* promemoria e terapie: il titolo si prende la riga, data e pulsanti
scendono sotto (48px = icona + spazio, così restano incolonnati) */
.sc-body,.tp-body{flex-basis:calc(100% - 49px)}
}
@media (max-width: 720px) {
.tp-row{flex-wrap:wrap}
.stampa-foglio{padding:14px;margin:12px;font-size:11px}
.st-azioni{flex-direction:column}
}
@media (max-width: 720px) {
.ce-row{flex-wrap:wrap}
.ce-quando{text-align:left}
}
@media (max-width: 720px) {
.pf-testa{flex-wrap:wrap}
/* i riquadri: una colonna sola. Ordine e nascosti valgono, le larghezze no.
stretch e non start (quello della griglia): in una colonna flex "start"
lascia ogni riquadro largo quanto il suo contenuto, e la linea del tempo
(620px) allargava tutta la pagina invece di scorrere dentro di sé. */
.blocchi,.blocchi.misurata{display:flex;flex-direction:column;gap:var(--gap);align-items:stretch}
.blocco-bordo,.blocco-larghezza,.blocco-btn[data-azione="stringi"],.blocco-btn[data-azione="allarga"],
.blocco-sep{display:none}
.disponi-btn span{display:none}
.disponi-btn{padding:8px}
/* il menù a destra entra da destra */
:root[data-menu-pos="destra"] .sidebar{left:auto;right:0;transform:translateX(100%)}
:root[data-menu-pos="destra"] .app.nav-open .sidebar{transform:translateX(0)}
.vx-row{flex-wrap:wrap}
.vx-quando{text-align:left;flex-direction:row;gap:8px;align-items:baseline}
}
/* ---- Link per il medico ---- */
.cd-sezioni{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 14px;margin-bottom:6px}
.cd-riga.cd-finito{opacity:.6}
.cd-link input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);
color:var(--text);font-family:var(--mono);font-size:12.5px}
.cd-bottoni{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.cd-qr{margin-top:12px}
/* aperto con il link: di chi è, fino a quando, e come uscire */
.ospite-banner{display:flex;align-items:center;gap:14px;justify-content:space-between;margin:14px 28px 0;padding:11px 16px;
border-radius:var(--radius);background:var(--accent-bg);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
color:var(--text);font-size:13.5px;line-height:1.5}
.ospite-banner .btn{flex-shrink:0}
body.ospite .side-nav-label,body.ospite #save-status,body.ospite #btn-disponi,body.ospite .fsw-chev{display:none!important}
@media (max-width:720px){.ospite-banner{margin:10px 12px 0;flex-direction:column;align-items:stretch}}
body.ospite .acct-avatar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}