/* Il portale delle dashboard Cosmari, con l'identità del portale clienti di Cosmari (cosmari-portale-clienti,
   src/public/css/portal.css; richiesta di Federico del 10/10/2026: «usa la grafica cosmari come quella del portal»):
   barra blu con il logo bianco, gli stessi colori, bottoni, schede, tabelle ed etichette. Niente framework, niente font
   né immagini da fuori (CSP 'self'): il logo è in statici/img. Leggibile sul telefono. Solo tema chiaro, come il portale clienti. */
/* I TOKEN: tutti i colori del portale stanno qui e solo qui (gli altri fogli usano var(--…)). Velo e bianco-NN = superfici sulla barra blu;
   stati = sfondo (--ok, --att, --err, --info), bordo (-b) e testo (-t); gli avvisi hanno toni propri (--avv-…). */
:root{--primario:#0C50A0;--primario-chiaro:#1a6fcc;--primario-scuro:#083a73;--verde:#8bc53f;--arancio:#f39c12;--rosso:#c0392b;--confronto:#e5646e;
--bianco:#fff;--g50:#f8f9fa;--g100:#e9ecef;--g200:#dee2e6;--g300:#ced4da;--g500:#6c757d;--g700:#495057;--g900:#212529;
--raggio:8px;--ombra:0 1px 3px rgba(0,0,0,.1);--ombra-forte:0 4px 12px rgba(0,0,0,.12);--ombra-pannello:-6px 0 24px rgba(45,62,80,.18);
--testo:var(--g900);--tenue:var(--g500);--bordo:var(--g200);--sfondo:var(--bianco);--fondo2:var(--g50);--accento:var(--primario);--accento-t:var(--bianco);
--link:var(--primario);--evidenza:#e8f0fa;--fuoco:rgba(26,111,204,.15);--su:var(--ok-t);--giu:var(--rosso);--ambra:#9a6700;
--carta:var(--bianco);--pagina:var(--g50);--bordo-forte:var(--g300);--ombra-menu:var(--ombra-forte);
--velo:rgba(255,255,255,.15);--velo-forte:rgba(255,255,255,.25);--velo-linea:rgba(255,255,255,.35);
--bianco-90:rgba(255,255,255,.9);--bianco-80:rgba(255,255,255,.8);--bianco-75:rgba(255,255,255,.75);--piede-testo:#c5d5e4;
--ok:#e8f5d8;--ok-b:#8bc53f;--ok-t:#3d6b10;--att:#fff3cd;--att-b:#f39c12;--att-t:#856404;--err:#f8d7da;--err-b:#c0392b;--err-t:#721c24;
--info:#d1ecf1;--info-b:#1a6fcc;--info-t:#0c5460;
--avv-att-b:#ffe08a;--avv-att-t:#6b4f00;--avv-err-b:#f5c6cb;--avv-ok:#d4edda;--avv-ok-b:#c3e6cb;--avv-ok-t:#155724;--avv-info-b:#bee5eb;
--bordo-aletta:rgba(45,62,80,.22);--bordo-aletta-2:rgba(45,62,80,.16);--bordo-aletta-0:rgba(45,62,80,0)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--testo);background:var(--g50);
  min-height:100vh;display:flex;flex-direction:column}
a{color:var(--link)}
/* ⛔ nessun contenitore (Task 20, Federico 14/10/2026: «a tutto schermo, non con container»): main e piede a tutta larghezza in OGNI pagina;
   i margini laterali sono quelli delle dashboard (body.dashboard, sotto). Solo l'ingresso (body.semplice) è un riquadro stretto. */
main{width:100%;margin:0 auto;padding:24px 24px 32px;flex:1}
h1{font-size:24px;font-weight:700;margin:4px 0 16px;color:var(--primario-scuro)}h2{font-size:17px;margin:24px 0 8px;color:var(--primario-scuro)}
h2 small{font-weight:400;color:var(--tenue);font-size:12px}
.tenue,small{color:var(--tenue);font-size:12.5px}
td small,th small{display:block}

/* la barra blu in alto, come il portale clienti: logo bianco, voci bianche all'80%, chi sei ed Esci a destra */
.testata{position:sticky;top:0;z-index:100;display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;min-height:56px;padding:0 24px;
  background:var(--primario);color:var(--bianco);box-shadow:var(--ombra)}
.marchio,.piede-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--bianco);flex:none}
.marchio img{height:28px;width:auto;display:block}
.marchio span{font-size:13px;color:var(--bianco-75);border-left:1px solid var(--velo-linea);padding-left:10px;line-height:20px}
.testata nav{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0;padding:10px 0}
.voce{display:inline-flex;align-items:center;white-space:nowrap;padding:8px 14px;border-radius:var(--raggio);text-decoration:none;color:var(--bianco-80);font-size:14px;transition:background .15s,color .15s}
.voce:hover,.voce.attiva{background:var(--velo);color:var(--bianco)}
.voce.attiva{font-weight:600}
.voce:focus-visible{outline:2px solid var(--bianco);outline-offset:1px}
/* il menu per aree (Task 19): «Logistica ▾» apre un pannello con le sue pagine. Lo stato è aria-expanded del bottone (menu.js);
   senza JavaScript (il gruppo non ha data-pronto) il pannello si apre col fuoco. Sul telefono il pannello è largo quanto la barra. */
.gruppo{position:relative;display:flex}
.gruppo-bottone{gap:8px;border:0;background:none;font-weight:inherit;line-height:inherit}
.gruppo-bottone::after{content:'';border:5px solid transparent;border-top-color:currentColor;border-bottom:0;transition:transform .15s}
.gruppo-bottone[aria-expanded="true"]{background:var(--velo-forte);color:var(--bianco)}
.gruppo-bottone[aria-expanded="true"]::after{transform:rotate(180deg)}
/* il pannello scorre da sé se le voci non entrano sotto la barra (ferma in cima): 100% = l'altezza di chi lo contiene, il gruppo qui e la barra
   sul telefono; il margine tiene conto di dove il gruppo sta nella barra. 100vh prima, per i browser senza dvh */
.gruppo-pannello{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:110;min-width:240px;margin:0;padding:6px;list-style:none;
  max-height:calc(100vh - 100% - 32px);max-height:calc(100dvh - 100% - 32px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);box-shadow:var(--ombra-menu)}
.gruppo-bottone[aria-expanded="true"]+.gruppo-pannello,.gruppo:not([data-pronto]):focus-within .gruppo-pannello{display:block}
.voce-gruppo{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:6px;color:var(--testo);text-decoration:none;font-size:14px;white-space:nowrap}
.voce-gruppo:hover,.voce-gruppo:focus-visible{background:var(--evidenza);color:var(--primario-scuro)}
.voce-gruppo:focus-visible{outline:2px solid var(--primario-chiaro);outline-offset:-2px}
.voce-gruppo.attiva{color:var(--primario);font-weight:600;box-shadow:inset 3px 0 var(--primario)}
.esci{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.chi{color:var(--bianco-90);font-size:13px;overflow-wrap:anywhere}
.esci button{background:var(--velo);border:0;color:var(--bianco);padding:6px 12px;font-size:13px}
.esci button:hover{background:var(--velo-forte)}

/* il piede blu col logo, come il portale clienti */
footer{background:var(--primario);color:var(--bianco);margin-top:auto;font-size:13px;line-height:1.6}
footer .piede{margin:0 auto;padding:28px 24px 24px}
footer p{margin:4px 0;color:var(--piede-testo)}
footer a{color:var(--bianco)}
.piede-logo{margin-bottom:10px}.piede-logo img{height:34px;width:auto;display:block}
.piede-logo span{display:none}
body.semplice main{max-width:620px;padding-top:32px}

/* bottoni, campi, avvisi, schede, tabelle: quelli del portale clienti */
button,.bottone{font:inherit;font-size:14px;font-weight:600;display:inline-block;border:1px solid var(--g300);border-radius:var(--raggio);padding:8px 16px;
  background:var(--bianco);color:var(--g700);cursor:pointer;text-decoration:none;transition:background .15s}
button:hover,.bottone:hover{background:var(--g100)}
button.primario,.bottone.primario{background:var(--primario);border-color:var(--primario);color:var(--bianco)}
button.primario:hover,.bottone.primario:hover{background:var(--primario-scuro);border-color:var(--primario-scuro)}
.bottone.grande{padding:12px 22px;font-size:17px}
button.pericolo{background:var(--rosso);border-color:var(--rosso);color:var(--bianco)}
button:disabled{opacity:.6;cursor:not-allowed}
input,select,textarea{font:inherit;font-size:14px;color:var(--testo);background:var(--bianco);border:1px solid var(--g300);border-radius:var(--raggio);padding:8px 12px;max-width:100%}
textarea{width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primario-chiaro);box-shadow:0 0 0 3px var(--fuoco)}
.riga label{display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:600;color:var(--g700)}
.avviso{border:1px solid;border-radius:var(--raggio);padding:12px 16px;margin:10px 0;font-size:14px}
.avviso p{margin:4px 0}.avviso strong{display:block}
.avviso.attenzione{background:var(--att);border-color:var(--avv-att-b);color:var(--avv-att-t)}.avviso.errore{background:var(--err);border-color:var(--avv-err-b);color:var(--err-t)}
.avviso.ok{background:var(--avv-ok);border-color:var(--avv-ok-b);color:var(--avv-ok-t)}.avviso.info{background:var(--info);border-color:var(--avv-info-b);color:var(--info-t)}
.riquadro{background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);padding:16px 20px;margin:14px 0}.riquadro ol,.riquadro ul{padding-left:20px;margin:6px 0}
.su{color:var(--ok-t)}.giu{color:var(--rosso)}
/* le etichette: i «badge» del portale clienti */
.etichetta{display:inline-block;font-size:11px;font-weight:600;border-radius:12px;padding:2px 8px;border:0;white-space:nowrap;background:var(--g200);color:var(--g700)}
.etichetta.stima{background:var(--att);color:var(--att-t)}.etichetta.dato{background:var(--ok);color:var(--ok-t)}.etichetta.manca{background:var(--err);color:var(--err-t)}
.scorre{overflow-x:auto;background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);margin:8px 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--g100);vertical-align:top}
th{background:var(--g50);color:var(--g700);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
tbody tr:hover td{background:var(--g50)}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}td.nome{font-weight:600}
.larga table{white-space:nowrap}
.scorre th:first-child,.scorre td.nome{position:sticky;left:0;background:var(--bianco);z-index:1;box-shadow:inset -1px 0 var(--g200)}
.scorre th:first-child{background:var(--g50)}
.larga td.nome{white-space:normal;min-width:150px;max-width:240px}
/* le tabelle di 12 mesi (Sintesi annuale, Centri di costo) entrano tutte nel loro riquadro a 1440 coi numeri veri (revisione del
   Task 20): celle, carattere e intestazioni più stretti */
table.stretta{font-size:13px}table.stretta th,table.stretta td{padding:8px 5px}table.stretta th{letter-spacing:0}
table.stretta th:first-child,table.stretta td.nome{padding-left:12px}
.larga table.stretta td.nome{min-width:130px;max-width:180px}
tr.totale td{font-weight:600;background:var(--g50);border-top:2px solid var(--g200)}
td.tot,th.tot{background:var(--g50);font-weight:600}td.tot-prima,th.tot-prima{border-right:2px solid var(--g200)}td.aperto{color:var(--tenue)}
tr.manca td{color:var(--tenue);font-style:italic}td.riservato,tr.riservata td{color:var(--tenue);font-style:italic}tr.inizio td{border-top:2px solid var(--g200)}
td.misura{color:var(--tenue);font-size:12px;white-space:nowrap}td.vuoto{color:var(--tenue)}
td.cliccabile{cursor:pointer;color:var(--link)}
.grafico{width:100%;height:320px}
.elenco ul{list-style:none;padding:0;margin:6px 0}.elenco li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 0;border-bottom:1px solid var(--g100)}
.in-linea{display:inline}.riga{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0}
a.piccolo{font-size:13px;font-weight:400;margin-left:8px}
@media (max-width:768px){
.testata{padding:10px 12px 0;gap:6px 12px}
.testata nav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;padding:0 0 8px;scrollbar-width:none}
.voce{min-height:44px;padding:6px 12px;font-size:14px}
.chi{display:none}
.marchio span{display:none}
.gruppo{position:static}
.gruppo-pannello{position:absolute;left:0;right:0;top:100%;min-width:0;padding:8px 12px 12px;border-width:1px 0;border-radius:0;
  max-height:calc(100vh - 100% - 8px);max-height:calc(100dvh - 100% - 8px)}
.voce-gruppo{min-height:44px;font-size:16px;padding:10px 12px;white-space:normal}
}
@media (max-width:600px){
.a-schede{border:0;box-shadow:none;background:none}.a-schede table,.a-schede tbody,.a-schede tr,.a-schede td{display:block;width:100%}.a-schede thead{display:none}
.a-schede tr{background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);margin:0 0 8px;padding:4px 0}
.a-schede td{border:0;padding:2px 10px;display:flex;gap:8px}.a-schede td.nome{position:static;box-shadow:none;font-size:16px}
.a-schede td[data-etichetta]::before{content:attr(data-etichetta);color:var(--tenue);font-size:12px;min-width:110px;flex:none}
.a-schede td.guardare{color:var(--testo);font-weight:600}.a-schede td.n{text-align:left;white-space:normal}.a-schede td small{display:inline}
h1{font-size:20px}main{padding:16px 16px 24px}.grafico{height:260px}}
/* le pagine senza utente (ingresso, errori del login) come l'accesso del portale clienti: fondo blu sfumato, riquadro bianco */
body.semplice{background:linear-gradient(135deg,var(--primario-scuro) 0%,var(--primario-chiaro) 100%)}
body.semplice .testata{position:static;background:none;box-shadow:none;justify-content:center;padding-top:32px}
body.semplice main{flex:none;max-width:560px;margin:16px auto 40px;background:var(--bianco);border-radius:12px;box-shadow:var(--ombra-forte);padding:32px 40px}
@media (max-width:600px){body.semplice main{margin:8px 12px 24px;width:auto;padding:24px 20px}}

/* ── LE DASHBOARD: la disposizione delle pagine a tutta larghezza, per Analisi (analisi.css) e per il controllo fatture (controllo.css) ──
   Testata col nome, le date dei dati e le azioni; riquadri su una griglia a 12 colonne con la stessa altezza per riga; schede coi numeri grandi.
   ⛔ `hidden` vince sempre: i bottoni hanno display:inline-block e un «+» nascosto si vedrebbe lo stesso. */
[hidden]{display:none!important}
body.dashboard{background:var(--pagina);font-size:14px}
body.dashboard main{padding:16px 24px 32px;font-variant-numeric:tabular-nums}
body.dashboard .briciole{margin:0 0 2px;font-size:13px}body.dashboard .briciole a{text-decoration:none}
.dash-testa{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px;margin:0 0 14px}
.dash-nome{flex:1 1 560px;min-width:0}
.dash-testa h1{font-size:24px;font-weight:700;line-height:1.25;margin:0 0 2px;color:var(--primario-scuro);overflow-wrap:anywhere}
.intestazione{margin:0;color:var(--tenue);font-size:13px}
.dash-azioni{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.conta{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--evidenza);color:var(--testo);font-size:12px;font-weight:600}
.barra-filtri{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.azzera{font-size:14px;padding:0 6px;text-decoration:none}.azzera:hover{text-decoration:underline}
.pagine{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;font-size:13.5px}
/* ── I MENU A PILLOLA, la barra dei filtri e le pillole della testata («Avvertenze N ▾», «Informazioni sui dati», «Aggiornamento
   dati»): gli stessi in OGNI pagina del portale (Task 20; erano delle sole dashboard di analisi). Un <details> con un pulsante a
   pillola e un riquadro che si apre sotto: funziona senza JavaScript («Applica» nel menu); con JavaScript (portale.js) una scelta si
   applica subito, uno solo aperto alla volta, clic fuori ed Esc chiudono. */
details.menu{position:relative}
details.menu>summary{list-style:none;cursor:pointer}
details.menu>summary::-webkit-details-marker{display:none}
.pillola{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 14px;border:1px solid var(--bordo-forte);border-radius:20px;
  background:var(--carta);color:var(--testo);font-size:14px;white-space:nowrap;max-width:100%}
.pillola::after{content:"";border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--tenue);margin-left:6px}
.pillola:hover{border-color:var(--primario-chiaro)}
.pillola:focus-visible{outline:2px solid var(--link);outline-offset:1px}
.pillola-nome{color:var(--tenue)}.pillola b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.pillola.attiva{background:var(--primario);border-color:var(--primario);color:var(--bianco)}
.pillola.attiva::after{border-top-color:var(--bianco)}
.pillola.attiva .conta{background:var(--velo-forte);color:var(--bianco)}
.pillola.attenzione{border-color:var(--arancio)}
details[open]>.pillola{border-color:var(--primario);box-shadow:0 0 0 1px var(--primario)}
.pillola.attenzione .conta{background:var(--att);color:var(--att-t)}
.menu-pannello{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:260px;max-width:calc(100vw - 32px);background:var(--carta);
  border:1px solid var(--bordo);border-radius:var(--raggio);box-shadow:var(--ombra-menu);padding:14px 16px;display:flex;flex-direction:column;gap:12px;font-size:14px}
.a-destra>.menu-pannello{left:auto;right:0}
.menu-pannello.largo{width:min(560px,calc(100vw - 32px))}
.menu-titolo{margin:0;font-weight:700;font-size:14px;color:var(--primario-scuro)}
.menu-pannello label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tenue)}
.menu-pannello select,.menu-pannello input{width:100%;min-width:0;height:38px;border-color:var(--bordo-forte);border-radius:var(--raggio)}
.menu-piede{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--bordo);padding-top:10px}
.fonti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--testo)}
.fonti li{overflow-wrap:anywhere}
details.avvertenze ul,details.informazioni ul{margin:0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto}
details.avvertenze li,details.informazioni li{overflow-wrap:anywhere}details.avvertenze li.copertura{font-weight:600}

.controlli{margin:0 0 16px}
/* la ricerca nella barra: una pillola con il campo dentro; Invio la applica (niente bottone) */
.pillola.cerca{padding-right:4px;gap:6px;cursor:text}.pillola.cerca::after{content:none}
.pillola.cerca:focus-within{border-color:var(--primario-chiaro);box-shadow:0 0 0 3px var(--fuoco)}
.pillola.cerca input{border:0;background:transparent;height:32px;padding:0 10px 0 2px;width:17em;max-width:100%;min-width:0;font-weight:600;border-radius:20px}
.pillola.cerca input:focus{box-shadow:none}
/* le misure dei Centri di costo: caselle in colonna dentro il menu */
.misure{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.misure legend{padding:0;margin-bottom:6px;font-weight:700;color:var(--primario-scuro)}
.menu-pannello .misure label{flex-direction:row;align-items:center;gap:8px;padding:4px 0;font-size:14px;color:var(--testo)}
.menu-pannello .misure input{width:auto;height:auto;margin:0}

/* la griglia: 12 colonne, 16 px fra i riquadri; le larghezze le decide la pagina e ogni riga è piena, così i riquadri della stessa
   riga hanno la stessa altezza (la griglia li stira) e i bordi allineati */
.blocchi{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin:0}
.blocco[data-larghezza="2"]{grid-column:span 2}.blocco[data-larghezza="3"]{grid-column:span 3}.blocco[data-larghezza="4"]{grid-column:span 4}
.blocco[data-larghezza="6"]{grid-column:span 6}.blocco[data-larghezza="12"]{grid-column:span 12}
.blocco{background:var(--carta);border:0;border-radius:var(--raggio);box-shadow:var(--ombra);padding:16px 20px 14px;min-width:0;display:flex;flex-direction:column;color:var(--testo)}
/* la testata del riquadro come le sezioni del portale clienti: titolo in maiuscoletto blu, una riga sotto */
.tile-testa{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:30px;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid var(--g100)}
.blocco-titolo{flex:1 1 auto;min-width:0;font-size:13px;font-weight:700;margin:0;color:var(--primario);line-height:1.3;text-transform:uppercase;letter-spacing:.4px}
.blocco-corpo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.blocco .nota{font-size:12.5px;color:var(--tenue);margin:6px 0 0}
.blocco-titolo small{display:block;margin-top:2px;text-transform:none;letter-spacing:0;font-weight:400}
/* le pagine del portale nei riquadri (Task 20): la tabella sta dentro il riquadro senza una seconda ombra; un'azione (link) a destra
   del titolo; le tessere coi numeri grandi come le schede delle dashboard, su una riga intera della griglia */
.blocco>.scorre{box-shadow:none;border:1px solid var(--bordo);margin:0}
.elenco-semplice{margin:4px 0;padding-left:20px}.elenco-semplice li{margin:3px 0}
.riga-dato{margin:4px 0}
.azione-tile{margin-left:auto;font-size:13px;font-weight:400;text-transform:none;letter-spacing:0}
.blocchi>.tessere,.blocchi>.pieno{grid-column:1/-1}
.tessere{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:0}
.tessera{background:var(--carta);border-radius:var(--raggio);box-shadow:var(--ombra);padding:16px 20px 14px;min-width:0}
.tessera span{display:block;font-size:13px;font-weight:700;color:var(--primario);text-transform:uppercase;letter-spacing:.4px;
  padding-bottom:6px;margin-bottom:8px;border-bottom:2px solid var(--g100)}
.tessera b{display:block;font-size:30px;line-height:1.25;font-weight:700;color:var(--primario);overflow-wrap:anywhere}
.tessera small{display:block;margin-top:4px;font-size:13px}
/* le schede della Home: riquadri-collegamento, il titolo in maiuscoletto blu come nelle dashboard; tutta la larghezza */
.sezione-home{margin:0 0 20px}.sezione-home h2{margin:0 0 10px;font-size:17px}
.schede{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.scheda{display:flex;flex-direction:column;background:var(--carta);border-radius:var(--raggio);box-shadow:var(--ombra);padding:16px 20px 14px;
  text-decoration:none;color:var(--testo);transition:box-shadow .15s;min-width:0}
.scheda:hover{box-shadow:var(--ombra-forte)}.scheda:focus-visible{outline:2px solid var(--primario-chiaro);outline-offset:2px}
.scheda strong{font-size:13px;font-weight:700;color:var(--primario);text-transform:uppercase;letter-spacing:.4px;padding-bottom:6px;margin-bottom:10px;
  border-bottom:2px solid var(--g100)}
.scheda span{color:var(--tenue);font-size:13.5px}
/* il livello dei Centri di costo (Tutti i CDC › centro › sotto-centro) nella testata del riquadro */
.livello{font-size:13px;color:var(--testo);text-transform:none;letter-spacing:0;font-weight:400}
.nota.stato:empty{display:none}
/* schermo medio: le schede piccole a tre per riga, le altre a due; i riquadri larghi uno sotto l'altro (le schede da 6 restano affiancate) */
@media (max-width:1100px){
  .blocco[data-larghezza="2"]{grid-column:span 4}
  .blocco[data-larghezza="3"],.blocco[data-larghezza="4"]{grid-column:span 6}
  .blocchi>.blocco[data-larghezza="6"]:not(.kpi){grid-column:span 12}
}
/* telefono: 16 px di margine, un riquadro per riga */
@media (max-width:640px){
  body.dashboard main{padding:12px 16px 24px}
  body.dashboard footer .piede{padding:24px 16px}
  .pillola{height:34px;padding:0 10px;font-size:13.5px}
  .pillola.cerca{flex:1 1 100%}.pillola.cerca input{flex:1 1 auto;width:auto}
  /* il menu a tutta larghezza, SOTTO la barra blu (che nelle pagine del portale resta ferma in cima, alta ~99 px): --sotto-barra
     lo scrive portale.js all'apertura (fondo della barra + 8 px); 64 px solo senza JavaScript (revisione del Task 20) */
  .menu-pannello{position:fixed;left:16px;right:16px;top:var(--sotto-barra,64px);width:auto;max-height:calc(100vh - var(--sotto-barra,64px) - 16px);
    max-height:calc(100dvh - var(--sotto-barra,64px) - 16px);overflow-y:auto}
  .a-destra>.menu-pannello{left:16px;right:16px}
  .menu-pannello.largo{width:auto}
  .tessera b{font-size:24px}
  .dash-testa h1{font-size:20px}
  .dash-nome{flex-basis:100%}
  .blocchi{gap:12px}
  .blocco[data-larghezza]{grid-column:span 12}
  .blocco{padding:14px 16px 12px}
}
/* ── LA MODIFICA DI UN MEZZO (Task 21): i campi in griglia, sotto ognuno il valore di adesso in HubSpot; l'anteprima con la storia
   prima e dopo affiancate; la conferma spuntata. Sul telefono un campo per riga e la storia una sotto l'altra. */
.modulo-mezzo .campi{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 16px;margin:4px 0 8px}
.modulo-mezzo .campi label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--g700);min-width:0}
.modulo-mezzo .campi label small{font-weight:400}
.modulo-mezzo select,.modulo-mezzo input[type=date]{width:100%;min-width:0;height:38px}
.azioni-modulo{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
label.conferma{display:flex;gap:8px;align-items:flex-start;font-size:14px;font-weight:600;margin:4px 0 8px}
label.conferma input{margin-top:3px;flex:none}
.prima-dopo{display:grid;grid-template-columns:1fr 1fr;gap:12px}.prima-dopo .tenue{margin:0}
@media (max-width:640px){.prima-dopo{grid-template-columns:1fr}.modulo-mezzo .campi{grid-template-columns:1fr}}