@font-face{font-family:'ERGANE Doc';font-weight:400;font-style:normal;font-display:swap;src:url(/font/jost-400.woff2) format('woff2')}
@font-face{font-family:'ERGANE Doc';font-weight:500;font-style:normal;font-display:swap;src:url(/font/jost-500.woff2) format('woff2')}
@font-face{font-family:'ERGANE Doc';font-weight:600 700;font-style:normal;font-display:swap;src:url(/font/jost-600.woff2) format('woff2')}
:root{--ink:#231F20;--mut:#5B6165;--mut2:color-mix(in srgb,#5B6165 52%,#231F20);--bg:#fff;--paper:#F1F2F2;--line:#D7D7D7;--line2:#C4C6C6;
--teal:#C94025;--teal-dark:#A6341A;--teal-deep:#8D2511;--teal-soft:#E7B2A7;--side-lbl:#F1CCC5;--side-link:#F9E9E5;--side-mut:#F3D5CF;
--red:#BE1E3C;--red-deep:#78122A;--red-soft:#FBEAEE;--ok:#2E7D46;--ok-deep:#1F5A32;--ok-soft:#E6F2E9;--amber:#E08A00;--amber-dark:#B06C00;--amber-deep:#7A4B00;--amber-soft:#FDF1DC;
--info-soft:#E9EBEC;--targhetta:#D7D8D2;--targhetta-bordo:#B7B9B2;--sel:color-mix(in srgb,var(--teal) 9%,var(--bg));--r:6px;
--sans:'ERGANE Doc','Futura PT',Jost,'Century Gothic','Avenir Next','Trebuchet MS',sans-serif;--mono:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:#9BA1A5 var(--paper)}
body{margin:0;font:400 14px/1.5 var(--sans);background:var(--paper);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
::selection{background:var(--teal-soft);color:var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#B4B8BB;border-radius:8px;border:3px solid var(--paper)}::-webkit-scrollbar-thumb:hover{background:var(--mut)}
a{color:var(--teal-dark);text-underline-offset:2px}a:hover{color:var(--teal-deep)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
.side :focus-visible,.mtop :focus-visible{outline-color:#fff}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.salta{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:50;border-radius:var(--r)}.salta:focus{left:8px}
h1,h2,h3{font-family:var(--sans);margin:0;line-height:1.15}
h2{font-size:15px;font-weight:600}
code,.mono{font-family:var(--mono);font-variant-numeric:slashed-zero tabular-nums}
.muto{color:var(--mut2)}

/* guscio: barra laterale minio, come ERGANE */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;padding:16px 12px 14px;color:var(--side-link);background:linear-gradient(180deg,var(--teal-dark),var(--teal-deep))}
.brand{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:12px 14px;text-decoration:none}
.brand .logo{display:block;height:36px;width:auto}
.prod{margin:-8px 4px 0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--side-lbl);font-weight:600}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r);color:var(--side-link);text-decoration:none;font-weight:500;font-size:14px;transition:background-color .15s}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav a[aria-current=page]{background:#fff;color:var(--teal-dark)}
.nav a[aria-current=page] .ic{color:var(--teal)}
.nav .conta{margin-left:auto;min-width:22px;padding:0 7px;border-radius:999px;background:var(--amber);color:var(--ink);font-size:12px;font-weight:700;text-align:center;line-height:20px}
.nav .lbl{margin:14px 12px 4px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--side-lbl);font-weight:600}
.foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.22);font-size:13px;color:var(--side-mut)}
.foot .chi{display:flex;align-items:baseline;gap:8px;color:var(--side-link);font-weight:500}
.foot .ruolo{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--side-lbl)}
.foot form{margin:0}
.esci{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:var(--r);font:500 13px var(--sans);cursor:pointer;transition:background-color .15s}
.esci:hover{background:rgba(255,255,255,.14)}
.mtop{display:none}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;padding:18px 28px 14px;background:rgba(255,255,255,.85);border-bottom:1px solid var(--line)}
.topbar h1{font-size:22px;font-weight:600}
.topbar .sub{margin:0;font-size:13px;color:var(--mut2)}
.content{padding:20px 28px 48px;width:100%;max-width:1320px}
.stretto{max-width:760px}

/* bottoni, campi */
button,.bottone{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 14px;font:600 13px/1.2 var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s}
button:hover,.bottone:hover{border-color:var(--ink);background:var(--paper);color:var(--ink)}
button.primario,.bottone.pri{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
button.primario:hover,.bottone.pri:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
button.pericolo{color:var(--red-deep);border-color:var(--red-deep)}button.pericolo:hover{background:var(--red-soft);border-color:var(--red-deep)}
button:disabled{opacity:.5;cursor:not-allowed;background:var(--paper);border-color:var(--line);color:var(--mut2)}
button.fatto{border-color:var(--ok);color:var(--ok-deep)}
label{display:block;margin:12px 0 4px;font-size:12px;font-weight:600;color:var(--mut2)}
input,select,textarea{width:100%;max-width:520px;min-height:38px;padding:7px 10px;font:400 14px var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line2);border-radius:var(--r)}
input:hover,select:hover,textarea:hover{border-color:var(--mut)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,.bottone:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
input::placeholder,textarea::placeholder{color:var(--mut2)}
textarea{min-height:84px;font-family:var(--mono);font-size:13px}
.num,input[type=number]{font-variant-numeric:tabular-nums}
.spunta{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:14px;font-weight:500;color:var(--ink)}
.spunta input{width:18px;min-height:18px;height:18px;accent-color:var(--teal-dark);margin:0}
.aiuto{margin:4px 0 0;font-size:12px;color:var(--mut2)}
.azioni-riga{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
form{margin:0}

/* messaggi: icona + parola, mai il colore da solo, mai un filo laterale */
.msg{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin:0 0 14px;border:1px solid;border-radius:var(--r)}
.msg>.ic{margin-top:2px}.msg p{margin:4px 0 0}.msg strong:first-child{font-weight:600}
.msg.ok{background:var(--ok-soft);border-color:#9CC7A8;color:var(--ok-deep)}
.msg.att{background:var(--amber-soft);border-color:#E3B968;color:var(--amber-deep)}
.msg.err{background:var(--red-soft);border-color:#E3A3B1;color:var(--red-deep)}
.msg.info{background:var(--info-soft);border-color:var(--line2);color:var(--ink)}
.msg .chiave{margin-top:8px;color:var(--ink)}

/* pastiglie e stati: parola + forma */
.pill{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line2);font-size:12px;font-weight:600;line-height:20px;white-space:nowrap}
.pill.ed-officina{background:var(--ink);border-color:var(--ink);color:#fff}
.pill.ed-programmi{background:#fff;border-color:var(--ink);color:var(--ink)}
.pill.ed-prova{background:var(--amber-soft);border-color:#E3B968;color:var(--amber-deep)}
.stato{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;white-space:nowrap}
.stato .ic{width:16px;height:16px}
.s-attiva{color:var(--ok-deep)}.s-prova{color:var(--amber-deep)}.s-daat{color:var(--ink)}.s-scaduta,.s-sosp{color:var(--mut2)}.s-spostata{color:var(--mut2)}.s-firma{color:var(--ink)}
.s-att{color:var(--amber-deep)}.s-appr{color:var(--ok-deep)}.s-rif{color:var(--mut2)}
.az-pill{font-size:12px;font-weight:500;background:var(--bg)}

/* Da fare */
.dafare{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:0 0 16px}
.dafare .dt{align-self:center;margin-right:4px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--mut2)}
.dafare a{display:flex;align-items:center;gap:10px;padding:7px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none;font-size:13px;font-weight:500;transition:border-color .15s,background-color .15s}
.dafare a:hover{border-color:var(--ink)}
.dafare .n{font-size:20px;font-weight:600;min-width:1.2ch;text-align:right}
.dafare a.zero{color:var(--mut2)}.dafare a.zero .n{font-weight:500}
.dafare a.on{border-color:var(--ink);background:var(--ink);color:#fff}
.dafare a.att:not(.zero) .n{color:var(--amber-dark)}.dafare a.att.on .n{color:#fff}

/* elenco + targhetta */
.lavoro{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
.filtri{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:0 0 12px}
.filtri .cp{display:flex;flex-direction:column;flex:1 1 140px;min-width:120px}
.filtri label{margin:0 0 3px}
.filtri input,.filtri select{max-width:none}
.filtri .vai{margin-left:auto}
.tabella{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px}
thead th{background:var(--paper);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);font-weight:600;white-space:nowrap}
thead th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
thead th a:hover{color:var(--ink)}
thead th[aria-sort] a{color:var(--ink)}
thead th .ic{display:none;width:12px;height:12px}thead th[aria-sort] .ic{display:inline}thead th a:hover .ic{display:inline;opacity:.6}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb,var(--paper) 45%,var(--bg))}
tr.scelta td,tr.scelta:hover td{background:var(--sel)}
tr.scelta td.cli a{color:var(--teal-deep)}
td.num,th.num{text-align:right}
.cli a{font-weight:600;color:var(--ink);text-decoration:none;font-size:14px}.cli a:hover{color:var(--teal-dark);text-decoration:underline}
.cli small{display:block;color:var(--mut2);font-size:12px}
.lavoro td.cli{width:100%;max-width:0}.lavoro td.cli a,.lavoro td.cli small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lavoro th:first-child,.lavoro td:first-child{padding-left:12px}
/* righe dello stesso cliente, una dopo l'altra: il nome si attenua e il filo tra loro e' piu' leggero */
tr.segue td{border-bottom-color:color-mix(in srgb,var(--line) 45%,var(--bg))}
tr.stesso td.cli a{font-weight:500;color:var(--mut2)}
tr.stesso td.cli a:hover{color:var(--teal-dark)}
td small.scad{display:block;font-size:12px;color:var(--mut2)}
td small.scad.vicina{color:var(--amber-deep);font-weight:600}
.vuoto{padding:28px 20px;text-align:center;color:var(--mut2)}
.vuoto strong{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.vuoto .bottone{margin-top:12px}

/* TARGHETTA */
.lato{display:flex;flex-direction:column;gap:16px;min-width:0}
.lato>*{min-width:0}
.targhetta{padding:16px 22px 12px;background:var(--targhetta);border:1px solid var(--targhetta-bordo);border-radius:var(--r);color:var(--ink)}
.targhetta header{display:flex;justify-content:flex-start;align-items:center;gap:12px;padding:0 0 12px;border-bottom:1px solid var(--targhetta-bordo)}
.timbro{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:2px solid currentColor;border-radius:4px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.timbro .ic{width:15px;height:15px;stroke-width:2.2}
.timbro.s-scaduta,.timbro.s-sosp,.timbro.s-spostata{border-style:dashed}
.targhetta dl{margin:0;padding:0}
.targhetta .rg{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--targhetta-bordo)}
.targhetta .rg:last-child{border-bottom:0}
.targhetta dt{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#40464A}
.targhetta dd{margin:0;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.targhetta dd small{font-size:12.5px;font-weight:400;color:#40464A}
.targhetta dd.mono{font-size:14px;font-weight:600;letter-spacing:.02em}
.targhetta .grande dd{font-size:17px;font-weight:600}
.imp{font-size:12px;color:var(--mut2)}.imp summary{cursor:pointer;font-weight:600;padding:2px 0}.imp code{display:block;margin-top:4px;word-break:break-all;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:6px 8px}

/* azioni sotto la targhetta */
.blocco{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.blocco>h2{margin-bottom:8px}
.blocco>.hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:-14px -16px 10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.blocco>.hd h2{margin:0}.blocco>.hd .meta{margin-left:auto;font-size:12.5px;color:var(--mut2)}
.lato>.msg{margin:0}
.foot .ver{font-size:11px;letter-spacing:.02em;color:var(--side-lbl)}
details.az{border-top:1px solid var(--line)}details.az:first-of-type{border-top:0}
details.az>summary{display:flex;align-items:center;gap:10px;padding:10px 4px;cursor:pointer;list-style:none;font-weight:600;font-size:14px;border-radius:var(--r)}
details.az>summary::-webkit-details-marker{display:none}
details.az>summary:hover{background:var(--paper)}
details.az>summary .chev{margin-left:auto;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
details.az[open]>summary .chev{transform:rotate(90deg)}
details.az>summary .ic:first-child{color:var(--teal-dark)}
.azcorpo{padding:2px 4px 14px 32px}
.azcorpo label:first-child{margin-top:4px}
.azdiretta{border-top:0;display:flex;align-items:center;gap:10px;padding:4px 0 10px}
.azdiretta .aiuto{margin:0}
.azdiretta button{white-space:nowrap;flex:none}
.chiavecampo{display:flex;gap:8px;align-items:center}
.chiave{display:block;flex:1;min-width:0;padding:8px 10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.chiavecampo button{flex:none}
.blocco label.l0{margin-top:0}

/* linea del tempo */
ol.tempo{list-style:none;margin:6px 0 0;padding:0 0 0 18px;position:relative}
ol.tempo::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line2)}
ol.tempo li{position:relative;padding:6px 0 10px}
ol.tempo li::before{content:'';position:absolute;left:-17px;top:11px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--mut)}
ol.tempo li.ok::before{border-color:var(--ok)}ol.tempo li.no::before{border-color:var(--amber-dark)}
.tempo time{display:block;font-size:12px;color:var(--mut2)}
.tempo .dett{margin:4px 0 0;font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.tempo .dett code,.det code.x,.frase code{font-size:12px}
.tempo .riga1{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.tempo .esito{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600}
.tempo .esito .ic{width:14px;height:14px}.tempo .esito.ok{color:var(--ok-deep)}.tempo .esito.no{color:var(--amber-deep)}
.tutto{display:inline-block;margin-top:4px;font-size:13px;font-weight:600}

/* pagina licenza */
.indietro{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;font-weight:600;font-size:13px;text-decoration:none}
.indietro .ic{transform:rotate(180deg);width:16px;height:16px}

/* nuova licenza e riepilogo */
.duecol{display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,2fr);gap:24px;align-items:start}
.passo{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 18px;margin:0 0 14px;min-width:0;border-width:1px}
fieldset.passo{margin:0 0 14px}
.passo legend{float:left;width:100%;margin-bottom:8px;display:flex;align-items:center;gap:10px;padding:0;font-size:15px;font-weight:600}
.passo .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:600}
.passo .griglia{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.passo .griglia .tutta{grid-column:1/-1}
.passo input,.passo select{max-width:none}
.passo h3{font-size:13px;margin:18px 0 2px;font-weight:600}
.lat{display:flex;flex-direction:column;gap:14px}
.scheda{max-width:760px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin:0 0 18px}
.scheda-testa{display:flex;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.scheda-logo{height:34px;flex:none}
.scheda h2{font-size:18px;margin:0 0 4px}.scheda-testa p{margin:0;font-size:13px;color:var(--mut2)}
.scheda-corpo{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:20px;align-items:start}
.scheda-dati{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px 12px;margin:0;font-size:14px}
.scheda-dati dt{color:var(--mut2);font-weight:500;padding-top:3px}.scheda-dati dd{margin:0;overflow-wrap:anywhere}
.scheda-dati code{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:15px;font-weight:600;background:var(--paper);padding:3px 7px;border-radius:4px}
.scheda-qr{text-align:center}.scheda-qr .qr{width:180px;height:180px;margin:0 auto;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.scheda-qr .qr svg{display:block;width:100%;height:100%}.scheda-qr p{font-size:12px;color:var(--mut2);margin:6px 0 0}
.scheda-qr details{margin-top:8px;font-size:12px;text-align:left}.scheda-qr details code{font-size:12px;overflow-wrap:anywhere}
.scheda-passi{margin:18px 0 0;padding-left:20px;font-size:14px;line-height:1.55}.scheda-passi li{margin:0 0 6px}
.scheda-piede{font-size:12px;color:var(--mut2);margin:12px 0 0}
button.piccolo{min-height:0;padding:3px 8px;font-size:12px;vertical-align:1px}
@media (max-width:640px){.scheda-corpo{grid-template-columns:minmax(0,1fr)}}
@media print{body *{visibility:hidden}.scheda,.scheda *{visibility:visible}.scheda{position:absolute;left:0;top:0;border:0;max-width:none}.scheda-az,.scheda button,.scheda details{display:none}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:2px 0 6px;clear:both}
.seg label{display:flex;align-items:center;gap:6px;margin:0;padding:8px 14px;font-weight:500;font-size:13px;cursor:pointer;border-right:1px solid var(--line)}
.seg label:last-child{border-right:0}
.seg input[type=radio]{width:16px;height:16px;min-height:0;max-width:none;margin:0;padding:0;flex:none;accent-color:var(--teal-dark)}
.seg label{white-space:nowrap}
.seg label:has(input:checked){background:var(--paper);font-weight:600}
.passo-cliente:has(input[value="nuovo"]:checked) .se-esistente{display:none}
.passo-cliente:not(:has(input[value="nuovo"]:checked)) .se-nuovo{display:none}
.guida-nuova ol{margin:6px 0 10px;padding-left:18px;font-size:13px;line-height:1.55}
.guida-nuova li{margin:0 0 6px}
.nuova-pagina{max-width:760px}
.lat .blocco p{margin:0 0 8px;font-size:13px}
.lato .passo .griglia{grid-template-columns:minmax(0,1fr)}
.lato .duecol{grid-template-columns:minmax(0,1fr)}
.pannello-nuova>h2{margin-bottom:10px}
.pannello-nuova .passo{border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0 6px;margin:0}
.pannello-nuova .passo:first-of-type{margin-top:10px}
.conferma .riepilogo{font-size:15px;font-weight:600;margin:0 0 12px;line-height:1.4}
.conferma .msg{margin:0 0 12px}

/* richieste */
.rich{display:flex;flex-direction:column;gap:14px}
.rich article{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:16px 24px;align-items:start;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.rq .tp{display:flex;justify-content:flex-start;gap:8px;margin:0 0 4px}
.rq .ri{margin:0;font-size:15px;font-weight:500}
.rich .meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 2px 0;font-size:12.5px;color:var(--mut2);align-items:center}
.rich .az{display:flex;flex-direction:column;gap:10px}
.rich .az form{display:flex;flex-direction:column;gap:6px}
.rich .az label{margin:0}
.rich .az input{max-width:none}
.rich .az .rif{display:flex;gap:8px;align-items:end}.rich .az .rif .cp{flex:1}

/* registro */
.pastiglie{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:0 0 12px;font-size:13px;color:var(--mut2)}
.catena{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.catena.ok{color:var(--ok-deep)}.catena.no{color:var(--red-deep)}
table.reg td,table.reg th{padding:6px 10px;font-size:12.5px}
table.reg td.ts{white-space:nowrap;color:var(--mut2)}
table.reg td.det{color:var(--ink);min-width:260px;overflow-wrap:anywhere}
table.reg td.ip{white-space:nowrap;color:var(--mut2)}
.det .frase{display:block;font-size:13px;line-height:1.45}
.grezzi{margin-top:3px}
.grezzi summary{cursor:pointer;list-style:none;display:inline-block;font-size:11.5px;color:var(--mut2)}.grezzi summary::-webkit-details-marker{display:none}
.grezzi summary:hover{color:var(--ink)}.grezzi[open] summary{color:var(--ink)}
.grezzi code{display:block;margin-top:4px;padding:6px 8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);font-size:11.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.esito.ok{color:var(--ok-deep);font-weight:600}.esito.no{color:var(--amber-deep);font-weight:600}

/* utenti */
.utenti-az{display:flex;flex-wrap:wrap;gap:6px}
.utenti-az button{min-height:30px;padding:4px 10px;font-size:12px}

/* accesso */
body.solo{display:grid;place-items:center;min-height:100vh;padding:24px 16px}
.accesso{width:100%;max-width:400px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:28px 28px 26px}
.accesso .brand{margin:0 0 20px;background:var(--bg);padding:0;justify-content:flex-start}
.accesso .brand .logo{height:40px}
.accesso h1{font-size:22px;font-weight:600;margin:0 0 4px}
.accesso .sub{margin:0 0 16px;color:var(--mut2);font-size:13px}
.accesso input{max-width:none}
.accesso button{width:100%;margin-top:18px;min-height:42px;font-size:14px}
/* Codice a 6 cifre: un solo campo vero (incolla, completamento dell'app), sei barrette disegnate sotto;
   ogni cifra cade sopra la sua barretta (cella = 1ch di cifra + 1.4ch di spazio, carattere a spaziatura fissa). */
.accesso .otp{display:block;box-sizing:content-box;width:14.4ch;margin:6px auto 0;padding:0 0 10px .7ch;height:auto;border:0;border-radius:0;background-color:transparent;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:30px;font-weight:600;line-height:1.3;letter-spacing:1.4ch;text-align:left;color:var(--ink);caret-color:var(--teal);
  background-image:repeating-linear-gradient(to right,var(--line2) 0 1.6ch,transparent 1.6ch 2.4ch);background-size:13.6ch 3px;background-repeat:no-repeat;background-position:.4ch 100%;overflow:hidden}
.accesso .otp:focus{outline:none;background-image:repeating-linear-gradient(to right,var(--ink) 0 1.6ch,transparent 1.6ch 2.4ch)}
.accesso .otp:focus,.accesso .otp:focus-visible{outline:none;box-shadow:none}   /* il fuoco si vede dalle barrette che diventano nere e dal cursore */
.accesso .otp-nota{margin:8px 0 0;font-size:12px;color:var(--mut2);text-align:center}
.accesso .indietro{margin-top:14px;text-align:center}
.accesso .indietro button.link{width:auto;min-height:0;margin:0;padding:6px 4px;border:0;background:none;color:var(--mut2);font-weight:500;font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.accesso .indietro button.link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.accesso .indietro .ic{width:14px;height:14px;transform:none}
.accesso .piede{margin:16px 0 0;font-size:12px;color:var(--mut2)}
.accesso .contatti{display:flex;flex-direction:column;gap:4px}
.accesso .contatti a{white-space:nowrap}
.errpag{max-width:560px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.errpag h2{font-size:18px;margin-bottom:10px}
.errpag p{margin:12px 0 0}

@media (max-width:1180px){
  .lavoro,.duecol{grid-template-columns:minmax(0,1fr)}
  .rich article{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .shell{display:block}
  .side{display:none}
  /* testata compatta (56 px): logo piccolo a sinistra, «Menu» a destra; il menu aperto copre tutta la larghezza sotto la testata */
  .mtop{display:block;position:sticky;top:0;z-index:20;height:56px;background:var(--teal-dark);color:var(--side-link)}
  .mtop .brand{position:absolute;left:16px;top:10px;height:36px;padding:0 10px;border-radius:6px}.mtop .brand .logo{height:22px}
  .mtop summary{position:absolute;right:16px;top:6px;list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.55);border-radius:var(--r);cursor:pointer;font-weight:600;font-size:15px;color:#fff}
  .mtop summary::-webkit-details-marker{display:none}
  .mtop details[open] summary{background:rgba(255,255,255,.14)}
  .mtop .pannello{position:absolute;left:0;right:0;top:56px;display:flex;flex-direction:column;min-height:calc(100vh - 56px);min-height:calc(100dvh - 56px);max-height:calc(100dvh - 56px);overflow-y:auto;padding:8px 16px 20px;background:linear-gradient(180deg,var(--teal-dark),var(--teal-deep))}
  .mtop .pannello .nav a{min-height:52px;padding:0 14px;font-size:17px;gap:14px}.mtop .pannello .nav .ic{width:22px;height:22px}
  .mtop .foot{margin-top:auto;padding:16px 4px 0;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px}
  .mtop .foot .ver{flex:1 0 100%}
  .mtop .esci{min-height:44px;padding:0 16px;font-size:15px}
  .topbar{padding:14px 16px 10px}.topbar h1{font-size:20px}
  .content{padding:16px 16px 40px}
  .passo .griglia{grid-template-columns:minmax(0,1fr)}
  .targhetta .rg{grid-template-columns:minmax(0,1fr);gap:0}
  .targhetta{padding:14px 16px 10px}
  .dafare{gap:6px}.dafare .dt{flex:1 0 100%}.dafare a{flex:1 1 calc(50% - 6px);padding:8px 10px}
  .filtri .cp{flex:1 1 100%}.filtri .vai{margin-left:0;flex:1 1 100%}.filtri .vai .bottone{width:100%}
  .tabella thead{display:none}
  .tabella table,.tabella tbody{display:block}
  .tabella tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'cli st' 'ed ass' 'riv riv';gap:4px 12px;padding:10px 14px;border-bottom:1px solid var(--line)}
  .tabella tbody tr:last-child{border-bottom:0}
  .tabella td{display:block;padding:0;border:0}
  .tabella td.cli{grid-area:cli}.tabella td.st{grid-area:st;text-align:right}.tabella td.ed{grid-area:ed}.tabella td.ass{grid-area:ass;text-align:right}.tabella td.riv{grid-area:riv}
  .tabella td.cnc{display:none}.tabella td.ed::after{content:attr(data-cnc);margin-left:8px;color:var(--mut2);font-size:12px}
  .tabella td.riv{color:var(--mut2);font-size:12px}
  .tabella tbody tr{position:relative}
  .tabella td.cli a::after{content:'';position:absolute;inset:0}
  .lavoro td.cli{width:auto;max-width:none}
  .lavoro th:first-child,.lavoro td:first-child{padding-left:0}
  tr.scelta{background:var(--sel)}tr.scelta td,tr.scelta:hover td,tbody tr:hover td{background:transparent}
  /* Utenti: un blocco per utente (nome e ruolo, poi TOTP e chiave, poi i bottoni a due a due) */
  .tabella.utenti tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'nome ruolo' 'totp api' 'az az';gap:6px 12px;padding:12px 14px}
  .tabella.utenti td.u-nome{grid-area:nome;font-size:15px}.tabella.utenti td.u-ruolo{grid-area:ruolo;text-align:right}
  .tabella.utenti td.u-totp{grid-area:totp}.tabella.utenti td.u-api{grid-area:api;text-align:right}.tabella.utenti td.u-az{grid-area:az;margin-top:6px}
  .tabella.utenti td.u-totp::before,.tabella.utenti td.u-api::before{content:attr(data-et) ': ';color:var(--mut2);font-size:12px}
  .utenti-az{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.utenti-az form{min-width:0}
  .utenti-az button{width:100%;min-height:44px;padding:6px 8px;font-size:13px}
  .tabella+.blocco{margin-top:20px}
  /* Registro: un blocco per riga (quando, chi, azione, esito; poi la frase); i dati grezzi vanno a capo nel blocco */
  .tabella.registro tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 14px}
  .tabella.registro td{min-width:0}
  .tabella.registro td.ts{order:1}.tabella.registro td.chi{order:2;font-weight:600}.tabella.registro td.az{order:3}.tabella.registro td.es{order:4}
  .tabella.registro td.lic{order:5;font-size:12px}.tabella.registro td.lic:empty,.tabella.registro td:empty{display:none}.tabella.registro td.ip{order:8;flex:1 1 100%;font-size:12px}
  .tabella.registro td.det{order:7;flex:1 1 100%;min-width:0;margin-top:2px;overflow-wrap:anywhere}
            .grezzi code{max-width:100%;overflow-wrap:anywhere;word-break:break-all}
  .rich .az .rif{flex-direction:column;align-items:stretch}
}
@media (pointer:coarse){button,.bottone,input,select{min-height:44px}.nav a{min-height:44px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}