:root{
  --carta:#f6f4ef; --foglio:#ffffff; --inchiostro:#16202a; --seppia:#5d6b78;
  --filo:#e2ddd3; --filo-forte:#cfc7b8;
  --timbro-verde:#1f7a4c; --timbro-rosso:#b3341f; --timbro-ocra:#a8710f;
  --azione:#0b4f9e; --azione-scura:#083c78;
  --ombra:0 1px 2px rgba(22,32,42,.06), 0 8px 24px rgba(22,32,42,.05);
  --display:"Titillium Web", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--carta);color:var(--inchiostro);font-family:var(--display);font-size:15px;line-height:1.5}
a{color:var(--azione)}

/* ---------- testata ---------- */
.testata{position:sticky;top:0;z-index:30;background:rgba(246,244,239,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--filo)}
.testata-riga{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.marchio{font-weight:700;font-size:19px;letter-spacing:-.01em;margin:0}
.marchio span{color:var(--seppia);font-weight:300}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:4px 11px;border-radius:999px;border:1px solid var(--filo-forte);background:var(--foglio);color:var(--seppia)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--timbro-verde);border-color:rgba(31,122,76,.35);background:rgba(31,122,76,.07)}
.pill.attesa{color:var(--timbro-ocra);border-color:rgba(168,113,15,.35);background:rgba(168,113,15,.07)}
.pill.ko{color:var(--timbro-rosso);border-color:rgba(179,52,31,.35);background:rgba(179,52,31,.07)}

.persone{display:flex;gap:0;margin-left:auto;border:1px solid var(--filo-forte);border-radius:10px;overflow:hidden;background:var(--foglio)}
.persone button{border:0;background:transparent;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--seppia);padding:8px 14px;cursor:pointer;border-left:1px solid var(--filo)}
.persone button:first-child{border-left:0}
.persone button.sel{background:var(--inchiostro);color:#fff}
.persone button:hover:not(.sel){background:#f0ece4}

/* ---------- impianto ---------- */
main{max-width:1240px;margin:0 auto;padding:26px 24px 80px}
.sezione{margin-bottom:34px}
.occhiello{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.occhiello h2{font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;margin:0}
.occhiello .nota{font-size:13px;color:var(--seppia)}
.occhiello .destra{margin-left:auto;display:flex;gap:8px}

button.az{font-family:inherit;font-size:13.5px;font-weight:600;border-radius:9px;padding:8px 15px;cursor:pointer;
  border:1px solid var(--azione);background:var(--azione);color:#fff}
button.az:hover{background:var(--azione-scura)}
button.az.vuota{background:transparent;color:var(--azione)}
button.az.vuota:hover{background:rgba(11,79,158,.07)}
button.az.grigia{border-color:var(--filo-forte);background:var(--foglio);color:var(--seppia)}
button.az.grigia:hover{background:#f0ece4}
button.az:disabled{opacity:.45;cursor:not-allowed}
button.mini{font-size:12px;padding:4px 10px;border-radius:7px}

/* ---------- pratiche (cuore della pagina) ---------- */
.pratiche{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.pratica{background:var(--foglio);border:1px solid var(--filo);border-radius:14px;box-shadow:var(--ombra);
  overflow:hidden;display:flex;flex-direction:column}
.pratica.spenta{opacity:.55}
.pratica-testa{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--filo)}
.pratica-titolo{font-weight:700;font-size:15.5px;margin:0;line-height:1.25}
.pratica-sottotitolo{font-size:12.5px;color:var(--seppia);margin:2px 0 0}
.etichetta{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;border:1px solid var(--filo-forte);color:var(--seppia);white-space:nowrap}
.etichetta.ricetta{color:var(--azione);border-color:rgba(11,79,158,.3);background:rgba(11,79,158,.06)}
.etichetta.modifica{color:var(--timbro-ocra);border-color:rgba(168,113,15,.3);background:rgba(168,113,15,.06)}

.attesa-blocco{display:flex;align-items:baseline;gap:10px;padding:14px 18px 4px;flex-wrap:wrap}
.giorni{font-size:52px;font-weight:300;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.giorni.vicino{color:var(--timbro-verde)}
.giorni.nulla{font-size:22px;font-weight:600;color:var(--seppia);letter-spacing:0}
.gg{font-size:15px;font-weight:600;color:var(--seppia);white-space:nowrap}
.delta{margin-left:auto;font-size:11.5px;font-weight:700;white-space:nowrap;color:var(--timbro-verde);
  background:rgba(31,122,76,.1);border-radius:999px;padding:3px 10px}
.data-prima{padding:0 18px 12px;font-size:13.5px;color:var(--seppia)}
.data-prima b{color:var(--inchiostro);font-weight:600}
.attuale{padding:0 18px 12px;font-size:12.5px;color:var(--seppia);display:flex;gap:6px;align-items:baseline}
.attuale .valore{font-family:var(--mono);font-size:12px;color:var(--inchiostro)}
.delta.perso{color:var(--seppia);background:#efeae1}

.sedi{list-style:none;margin:0;padding:0 18px 14px;flex:1}
.sede{padding:11px 0;border-top:1px dashed var(--filo)}
.sede-nome{font-weight:600;font-size:13.5px;display:flex;gap:8px;align-items:baseline}
.sede-nome .quando{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--timbro-verde);white-space:nowrap}
.sede-dett{font-size:12.5px;color:var(--seppia);margin-top:2px}
.sede-slot{font-family:var(--mono);font-size:11.5px;color:var(--seppia);margin-top:4px;word-spacing:-2px}
.pratica-piede{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 18px;background:#faf8f4;border-top:1px solid var(--filo);
  font-size:12px;color:var(--seppia)}
.pratica-piede .destra{margin-left:auto;display:flex;gap:6px}

/* ---------- liste ---------- */
.due{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.due{grid-template-columns:1fr}}
.riquadro{background:var(--foglio);border:1px solid var(--filo);border-radius:14px;box-shadow:var(--ombra)}
.riquadro-testa{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--filo)}
.riquadro-testa h3{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.riquadro-corpo{padding:6px 16px 12px;max-height:320px;overflow:auto}
.voce{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--filo)}
.voce:first-child{border-top:0}
.voce-testo{min-width:0}
.voce-titolo{font-weight:600;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.voce-nota{font-size:12.5px;color:var(--seppia);overflow-wrap:anywhere;margin-top:2px}
.codice{font-family:var(--mono);font-size:11.5px;color:var(--seppia)}
.voce .destra{margin-left:auto;flex:0 0 auto}
.vuoto{padding:18px 0;color:var(--seppia);font-size:13.5px}

table.doc{width:100%;border-collapse:collapse;font-size:13.5px}
table.doc th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--seppia);
  font-weight:600;padding:8px 10px;border-bottom:1px solid var(--filo-forte)}
table.doc td{padding:10px;border-bottom:1px solid var(--filo);vertical-align:top}
table.doc tr:last-child td{border-bottom:0}
.stato{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;padding:2px 7px;border-radius:5px;
  background:rgba(168,113,15,.1);color:var(--timbro-ocra);white-space:nowrap}

/* ---------- diagnostica ---------- */
details.diag{border:1px solid var(--filo);border-radius:14px;background:var(--foglio);box-shadow:var(--ombra)}
details.diag>summary{cursor:pointer;padding:13px 16px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  list-style:none;display:flex;align-items:center;gap:8px}
details.diag>summary::after{content:"apri";margin-left:auto;font-size:11px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--seppia)}
details.diag[open]>summary::after{content:"chiudi"}
.diag-corpo{padding:0 16px 16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.diag-corpo{grid-template-columns:1fr}}
input[type=text],select,textarea{width:100%;font-family:var(--mono);font-size:12.5px;padding:8px 10px;
  border:1px solid var(--filo-forte);border-radius:8px;background:#fcfbf9;color:var(--inchiostro)}
textarea{resize:vertical}
pre.log{font-family:var(--mono);font-size:11.5px;background:#fcfbf9;border:1px solid var(--filo);border-radius:8px;
  padding:10px;max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:0}
.riga{display:flex;gap:8px;margin-bottom:8px}

/* ---------- accesso ---------- */
.velo{position:fixed;inset:0;z-index:50;background:rgba(22,32,42,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.velo[hidden]{display:none}
.scheda-accesso{background:var(--foglio);border-radius:18px;max-width:430px;width:100%;padding:26px;text-align:center;
  box-shadow:0 24px 60px rgba(22,32,42,.3)}
.scheda-accesso h2{margin:0 0 6px;font-size:21px}
.scheda-accesso p{margin:0 0 18px;color:var(--seppia);font-size:14px}
.qr-cornice{width:270px;height:270px;margin:0 auto 16px;border:1px solid var(--filo-forte);border-radius:12px;
  display:flex;align-items:center;justify-content:center;background:#fff;padding:10px}
/* come per .velo: senza questa riga l'attributo hidden non basterebbe,
   perche' il display:flex qui sopra batte il display:none del browser */
.qr-cornice[hidden]{display:none}
.qr-cornice img{width:100%;height:100%;object-fit:contain}
.qr-cornice .segnaposto{color:var(--seppia);font-size:13px;padding:0 24px}
.scheda-accesso .riga{justify-content:center}

/* scelta del modo di accesso */
/* I due modi di entrare nel fascicolo sono riconoscibili prima ancora di
   leggerli: ognuno porta il proprio marchio ufficiale (static/cie.png e
   static/spid-idp-lepidaid.png) e i propri colori.

   Sono i marchi a dettare i fondi, non il contrario: il logo CieID e' bianco
   su trasparente e su fondo chiaro sparirebbe, quindi la CIE e' un pulsante
   blu pieno; il logo Lepida e' nero e arancione e sul blu diventerebbe
   illeggibile, percio' sta su una pastiglia bianca dentro il pulsante SPID,
   che conserva cosi' il blu #06C prescritto da AgID (#036 in hover). */
.metodi{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.metodo{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;padding:12px 16px;border-radius:11px;line-height:1.25;color:#fff;
  border:1.5px solid transparent;transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.metodo:hover:not(:disabled){transform:translateY(-1px)}
.metodo:disabled{opacity:.45;cursor:not-allowed;transform:none}
.metodo-testo{display:flex;flex-direction:column;gap:2px;min-width:0}
.metodo-testo b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.metodo-testo small{font-size:12px;font-weight:400;opacity:.85;overflow-wrap:anywhere}

/* I loghi non vengono mai deformati: altezza fissa, larghezza a proporzione.
   Classe `logo-idp` e non `marchio`: quello e' gia' il titolo in testata. */
.logo-idp{display:block;width:auto}
.logo-cie{height:30px;flex:0 0 auto}
.logo-spid{height:17px}
.pastiglia{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:7px;padding:7px 10px;box-shadow:0 1px 2px rgba(0,0,0,.18)}

/* CIE: blu istituzionale, il logo CieID bianco ci risalta sopra */
.metodo-cie{background:#0b4f9e;border-color:#0b4f9e}
.metodo-cie:hover:not(:disabled){background:#083c78;border-color:#083c78;
  box-shadow:0 3px 12px rgba(11,79,158,.32)}

/* SPID: il blu del bottone ufficiale AgID */
.metodo-spid{background:#06C;border-color:#06C}
.metodo-spid:hover:not(:disabled){background:#036;border-color:#036;
  box-shadow:0 3px 12px rgba(0,102,204,.32)}

/* in corso: un anello sul metodo scelto. Mentre l'accesso gira entrambi i
   pulsanti sono disabilitati, ma quello attivo deve restare acceso: e' lui
   che racconta cosa sta succedendo. */
.metodo.sel{box-shadow:0 0 0 2px var(--foglio), 0 0 0 4px var(--inchiostro)}
.metodo.sel:disabled{opacity:1}
.metodo:focus-visible{outline:2px solid var(--inchiostro);outline-offset:3px}

/* passo corrente + puntini animati */
.passo{display:flex;align-items:center;justify-content:center;gap:8px;min-height:22px;
  font-size:13.5px;color:var(--seppia);margin:0 0 14px}
.puntini{display:inline-flex;gap:4px}
.puntini i{width:5px;height:5px;border-radius:50%;background:var(--azione);opacity:.35;
  animation:respiro 1.2s infinite ease-in-out}
.puntini i:nth-child(2){animation-delay:.15s}
.puntini i:nth-child(3){animation-delay:.3s}
@keyframes respiro{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* attesa del QR: rettangolo che respira */
.scheletro{width:100%;height:100%;border-radius:8px;
  background:linear-gradient(100deg,#f2efe9 30%,#fbfaf8 50%,#f2efe9 70%);
  background-size:250% 100%;animation:scorri 1.6s infinite linear}
@keyframes scorri{0%{background-position:150% 0}100%{background-position:-50% 0}}
.qr-cornice img{animation:comparsa .45s ease-out}
@keyframes comparsa{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.qr-cornice.vivo{position:relative}
.qr-cornice.vivo::after{content:"";position:absolute;inset:-4px;border-radius:14px;
  border:2px solid rgba(11,79,158,.35);animation:pulsa 2s infinite ease-out;pointer-events:none}
@keyframes pulsa{0%{opacity:.7;transform:scale(.98)}70%{opacity:0;transform:scale(1.03)}100%{opacity:0}}

/* istruzioni numerate */
.istruzioni{counter-reset:passo;list-style:none;margin:0 0 16px;padding:0;text-align:left}
.istruzioni li{counter-increment:passo;position:relative;padding:4px 0 4px 30px;font-size:13.5px;color:var(--seppia)}
.istruzioni li::before{content:counter(passo);position:absolute;left:0;top:4px;width:20px;height:20px;
  border-radius:50%;background:var(--inchiostro);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center}

/* barra di caricamento globale */
#barra{position:fixed;top:0;left:0;height:3px;width:0;background:var(--azione);z-index:60;
  transition:width .3s ease, opacity .4s ease;opacity:0}
#barra.attiva{opacity:1}

/* segnaposto nelle liste */
.finto{height:13px;border-radius:4px;background:linear-gradient(100deg,#f2efe9 30%,#fbfaf8 50%,#f2efe9 70%);
  background-size:250% 100%;animation:scorri 1.6s infinite linear;margin:7px 0}

@media (prefers-reduced-motion: reduce){
  .puntini i,.scheletro,.finto,.qr-cornice img,.qr-cornice.vivo::after{animation:none}
}

/* ---------- pagine di servizio (accesso al tool, amministrazione) ---------- */
.centrata{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.scheda{background:var(--foglio);border:1px solid var(--filo);border-radius:16px;box-shadow:var(--ombra);
  padding:30px;width:100%;max-width:390px}
.scheda h1{font-size:22px;margin:0 0 4px}
.scheda .sotto{color:var(--seppia);font-size:13.5px;margin:0 0 22px}
label.campo{display:block;margin-bottom:14px}
label.campo span{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--seppia);margin-bottom:5px}
label.campo input{width:100%;font-family:var(--display);font-size:14.5px;padding:10px 12px;
  border:1px solid var(--filo-forte);border-radius:9px;background:#fcfbf9;color:var(--inchiostro)}
label.campo input:focus{outline:2px solid rgba(11,79,158,.35);outline-offset:1px;border-color:var(--azione)}
.avviso{font-size:13px;border-radius:9px;padding:9px 12px;margin-bottom:14px}
.avviso.male{background:rgba(179,52,31,.09);color:var(--timbro-rosso);border:1px solid rgba(179,52,31,.25)}
.avviso.bene{background:rgba(31,122,76,.09);color:var(--timbro-verde);border:1px solid rgba(31,122,76,.25)}
button.largo{width:100%;justify-content:center}

/* barra utente in testata */
.utente{display:flex;align-items:center;gap:10px;margin-left:14px}
.utente .chi{font-size:13px;color:var(--seppia)}
.utente .chi b{color:var(--inchiostro);font-weight:600}
a.collegamento{font-size:13px;font-weight:600;color:var(--azione);text-decoration:none}
a.collegamento:hover{text-decoration:underline}

/* tabella utenze */
table.utenti{width:100%;border-collapse:collapse;font-size:13.5px}
table.utenti th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--seppia);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--filo-forte)}
table.utenti td{padding:11px 10px;border-bottom:1px solid var(--filo);vertical-align:middle}
table.utenti tr.sospeso td{opacity:.5}
.ruolo{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;padding:2px 7px;border-radius:5px;
  background:#f0ece4;color:var(--seppia)}
.ruolo.admin{background:rgba(11,79,158,.1);color:var(--azione)}
.azioni{display:flex;gap:6px;justify-content:flex-end}

/* ---------- cruscotto sicurezza ---------- */
.controlli{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.controllo{background:var(--foglio);border:1px solid var(--filo);border-left:4px solid var(--filo-forte);
  border-radius:12px;padding:14px 16px;box-shadow:var(--ombra)}
.controllo.ok{border-left-color:var(--timbro-verde)}
.controllo.attenzione{border-left-color:var(--timbro-ocra)}
.controllo.male{border-left-color:var(--timbro-rosso)}
.controllo-testa{display:flex;align-items:center;gap:9px;font-size:14.5px}
.controllo .segno{width:9px;height:9px;border-radius:50%;background:var(--filo-forte);flex:0 0 auto}
.controllo.ok .segno{background:var(--timbro-verde)}
.controllo.attenzione .segno{background:var(--timbro-ocra)}
.controllo.male .segno{background:var(--timbro-rosso)}
.controllo-dett{margin:7px 0 0;font-size:13px;color:var(--seppia)}
.controllo-rimedio{margin:8px 0 0;font-size:12.5px;font-family:var(--mono);color:var(--inchiostro);
  background:#faf8f4;border:1px solid var(--filo);border-radius:7px;padding:7px 9px}
.ruolo.brutto{background:rgba(179,52,31,.1);color:var(--timbro-rosso)}

/* ---------- notifiche Telegram ---------- */
.interruttore{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.interruttore input{position:absolute;opacity:0;width:0;height:0}
.interruttore .leva{flex:0 0 auto;width:42px;height:24px;border-radius:999px;background:var(--filo-forte);
  position:relative;transition:background .18s ease}
.interruttore .leva::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(22,32,42,.3);transition:transform .18s ease}
.interruttore input:checked + .leva{background:var(--timbro-verde)}
.interruttore input:checked + .leva::after{transform:translateX(18px)}
.interruttore input:focus-visible + .leva{outline:2px solid rgba(11,79,158,.45);outline-offset:2px}
.etichetta-leva{font-size:14.5px;font-weight:600}

label.campo small{font-weight:400;letter-spacing:0;text-transform:none;color:var(--seppia)}
small.aiuto{display:block;margin-top:5px;font-size:12px;color:var(--seppia)}
.avviso{margin:12px 0 0;padding:10px 12px;border-radius:9px;font-size:13.5px;
  background:#faf8f4;border:1px solid var(--filo)}

/* ---------- guida passo passo ---------- */
details.guida{margin-top:16px}
details.guida>summary{text-transform:none;letter-spacing:0;font-size:14px}
.guida-corpo{padding:0 16px 18px;max-width:78ch;font-size:14px;line-height:1.62}
.guida-corpo .premessa{color:var(--seppia);margin:0 0 18px}
.guida-corpo h4{margin:26px 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.guida-corpo p{margin:0 0 12px}
.guida-corpo table.doc{margin-top:6px}

.passi{counter-reset:guida;list-style:none;margin:0;padding:0}
.passi>li{counter-increment:guida;position:relative;padding:0 0 20px 42px;
  border-left:1px solid var(--filo);margin-left:13px}
.passi>li:last-child{border-left-color:transparent;padding-bottom:4px}
.passi>li::before{content:counter(guida);position:absolute;left:-14px;top:-2px;
  width:27px;height:27px;border-radius:50%;background:var(--foglio);
  border:1px solid var(--filo-forte);color:var(--azione);
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.passi ul{margin:8px 0 0;padding-left:20px;color:var(--seppia)}
.passi ul li{margin-bottom:5px}
.guida-corpo .codice{font-family:var(--mono);font-size:12.5px;background:#f2efe9;
  border:1px solid var(--filo);border-radius:5px;padding:1px 6px;color:var(--inchiostro);
  overflow-wrap:anywhere}
.guida-corpo .attenzione{margin:10px 0 0;padding:9px 12px;font-size:13px;color:var(--timbro-ocra);
  background:rgba(168,113,15,.08);border:1px solid rgba(168,113,15,.25);border-radius:9px}

@media (max-width:900px){.due{grid-template-columns:1fr}}
/* riga campo+pulsante dentro una label.campo (il selettore `label.campo span`
   trasformerebbe in blocco qualunque contenitore span, da qui il div) */
.campo-riga{display:flex;gap:8px;align-items:stretch}
.campo-riga input{flex:1;min-width:0}
.campo-riga button{flex:0 0 auto}