/* Doppioni PEC: la carta verde della cartolina di ritorno, l'inchiostro viola del timbro d'ufficio,
   il rosso ceralacca solo per ciò che elimina. Un solo gesto forte: il timbro sul confronto. */
@font-face{font-family:"Atkinson Next";src:url("fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Next";src:url("fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Next";src:url("fonts/atkinson-hyperlegible-next-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Atkinson Mono";src:url("fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --verde:#DDE8D6; --verde-scuro:#C7D7BC; --foglio:#FBFCF8; --foglio-2:#F0F4EC;
  --inchiostro:#16233A; --grigio:#4C5B60; --filetto:#B4C4AC;
  --timbro:#4A33B2; --timbro-tenue:#E8E4FA; --su-timbro:#FFFFFF;
  --ceralacca:#A2261A; --ceralacca-tenue:#F9E5E1; --su-ceralacca:#FFFFFF;
  --ambra:#765000; --ambra-tenue:#F6EBC8;
  --testo:"Atkinson Next","Atkinson Hyperlegible Next","Segoe UI",system-ui,sans-serif;
  --mono:"Atkinson Mono","Atkinson Hyperlegible Mono",ui-monospace,Consolas,monospace;
  --ombra:0 1px 0 rgba(22,35,58,.08),0 8px 24px -16px rgba(22,35,58,.35);
  --blend:multiply;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --verde:#14231C; --verde-scuro:#1F3329; --foglio:#1B2C24; --foglio-2:#223529;
  --inchiostro:#E9F0E6; --grigio:#A9BBAE; --filetto:#3B5246;
  --timbro:#B9AEFA; --timbro-tenue:#2C2A52; --su-timbro:#17132E;
  --ceralacca:#F39A8C; --ceralacca-tenue:#44211C; --su-ceralacca:#2A0E0A;
  --ambra:#E8C468; --ambra-tenue:#3A2F12;
  --ombra:0 1px 0 rgba(0,0,0,.3),0 8px 24px -16px rgba(0,0,0,.7);
  --blend:normal; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --verde:#14231C; --verde-scuro:#1F3329; --foglio:#1B2C24; --foglio-2:#223529;
  --inchiostro:#E9F0E6; --grigio:#A9BBAE; --filetto:#3B5246;
  --timbro:#B9AEFA; --timbro-tenue:#2C2A52; --su-timbro:#17132E;
  --ceralacca:#F39A8C; --ceralacca-tenue:#44211C; --su-ceralacca:#2A0E0A;
  --ambra:#E8C468; --ambra-tenue:#3A2F12;
  --ombra:0 1px 0 rgba(0,0,0,.3),0 8px 24px -16px rgba(0,0,0,.7);
  --blend:normal; color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--verde);color:var(--inchiostro);font:400 15.5px/1.5 var(--testo);min-height:100vh;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--foglio)}
h1,h2,h3,p,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{text-wrap:balance;line-height:1.2}
h1{font-size:1.75rem;font-weight:800;letter-spacing:-.012em}
h2{font-size:1.3rem;font-weight:800;letter-spacing:-.008em}
h3{font-size:1rem;font-weight:700}
a{color:var(--timbro)}
:focus-visible{outline:3px solid var(--timbro);outline-offset:2px;border-radius:2px}
.fine{color:var(--grigio);font-size:.875rem}
.hash{font:400 .82rem/1.45 var(--mono);overflow-wrap:anywhere}
.lungo{max-width:62ch}
.icona{display:inline-flex;width:1.1em;height:1.1em;flex:none}
.icona svg{width:100%;height:100%;display:block}

/* pulsanti */
button,.btn{font:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:42px;padding:.45em 1em;border:1.5px solid var(--inchiostro);background:transparent;color:var(--inchiostro);border-radius:4px;font-weight:700;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--foglio-2)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.primario{background:var(--timbro);border-color:var(--timbro);color:var(--su-timbro)}
.btn.primario:hover{filter:brightness(1.12);background:var(--timbro)}
.btn.pericolo{background:var(--ceralacca);border-color:var(--ceralacca);color:var(--su-ceralacca)}
.btn.pericolo:hover{filter:brightness(1.1);background:var(--ceralacca)}
.btn.piccolo{min-height:34px;padding:.2em .7em;font-size:.9rem}
.link{background:none;border:0;padding:0;color:var(--timbro);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font:inherit;font-weight:700}

/* testata */
.testata{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--foglio);border-bottom:1.5px solid var(--inchiostro)}
.testata-in{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.5rem;padding-block:.55rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.marchio{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.1rem;color:var(--inchiostro);white-space:nowrap}
.marchio .icona{width:1.65rem;height:1.65rem;color:var(--timbro)}
.marchio small{font-weight:400;font-size:.8rem;color:var(--grigio)}
.menu{display:flex;flex-wrap:wrap;gap:.1rem .25rem;flex:1 1 auto;min-width:0}
.menu button{background:none;border:0;border-bottom:3px solid transparent;padding:.4rem .6rem;min-height:40px;font-weight:700;color:var(--grigio);cursor:pointer;display:inline-flex;gap:.4em;align-items:center}
.menu button:hover{color:var(--inchiostro)}
.menu button[aria-current="page"]{color:var(--inchiostro);border-bottom-color:var(--timbro)}
.conteggio{font-size:.78rem;font-weight:700;background:var(--verde-scuro);color:var(--inchiostro);padding:.02em .45em;border-radius:99px}
.utente{display:flex;align-items:center;gap:.75rem;font-size:.88rem;color:var(--grigio);min-width:0}
.utente span{overflow-wrap:anywhere}

/* impaginazione */
.pagina{padding-block:1.25rem 7rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1500px;margin-inline:auto;display:grid;gap:1rem}
.pagina.stretta{max-width:760px}
.foglio{background:var(--foglio);border:1px solid var(--filetto);border-radius:3px;padding:1.25rem;box-shadow:var(--ombra);min-width:0}
.pila{display:grid;gap:.75rem;min-width:0}
.riga{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.spazia{justify-content:space-between}

/* riepilogo */
.riepilogo{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between}
.riepilogo p.fine{margin-top:.2rem}

/* avanzamento */
.avanzamento{display:grid;gap:.5rem}
.barra-prog{height:12px;border:1.5px solid var(--inchiostro);border-radius:2px;background:var(--foglio-2);overflow:hidden}
.barra-prog i{display:block;height:100%;background:var(--timbro);width:0;transition:width .3s linear}

/* schede */
.schede{display:flex;flex-wrap:wrap;gap:.25rem;border-bottom:1.5px solid var(--inchiostro)}
.schede button{border:1.5px solid transparent;border-bottom:0;background:transparent;padding:.55rem .85rem;font-weight:700;color:var(--grigio);cursor:pointer;border-radius:3px 3px 0 0;display:inline-flex;gap:.5em;align-items:center;margin-bottom:-1.5px;min-height:42px}
.schede button:hover{color:var(--inchiostro)}
.schede button[aria-selected="true"]{background:var(--foglio);color:var(--inchiostro);border-color:var(--inchiostro);border-bottom:1.5px solid var(--foglio)}
.spiega{padding:.6rem 0 0;color:var(--grigio);font-size:.92rem;max-width:80ch}

/* due colonne */
.banco{display:grid;grid-template-columns:minmax(290px,380px) minmax(0,1fr);gap:1rem;align-items:start}
.elenco{background:var(--foglio);border:1px solid var(--filetto);border-radius:3px;min-width:0;box-shadow:var(--ombra)}
.elenco-testa{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;justify-content:space-between;padding:.65rem .85rem;border-bottom:1px solid var(--filetto)}
.elenco-testa select{max-width:100%}
.voce{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .65rem;padding:.7rem .85rem;border-bottom:1px solid var(--filetto);align-items:start}
.voce:last-child{border-bottom:0}
.voce.attiva{background:var(--timbro-tenue)}
.voce input{margin:.25rem 0 0;width:18px;height:18px;accent-color:var(--timbro)}
.voce .apri{all:unset;cursor:pointer;display:grid;gap:.15rem;min-width:0;grid-column:2}
.voce .apri:focus-visible{outline:3px solid var(--timbro);outline-offset:3px}
.voce .ogg{font-weight:700;overflow-wrap:anywhere}
.voce:hover .ogg{text-decoration:underline;text-underline-offset:2px}
.voce .sub{font-size:.86rem;color:var(--grigio);overflow-wrap:anywhere}
.etichette{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.25rem}
.etichetta{font-size:.76rem;font-weight:700;padding:.05em .45em;border:1px solid currentColor;border-radius:3px;color:var(--grigio);white-space:nowrap}
.etichetta.viola{color:var(--timbro)}
.etichetta.ambra{color:var(--ambra)}
.etichetta.rossa{color:var(--ceralacca)}

/* confronto */
.confronto{background:var(--foglio);border:1px solid var(--filetto);border-radius:3px;padding:1.25rem;box-shadow:var(--ombra);display:grid;gap:1.15rem;min-width:0}
.confronto-testa{display:flex;gap:1rem 1.5rem;justify-content:space-between;align-items:flex-start}
.confronto-testa>div:first-child{min-width:0}
.confronto-testa h2{overflow-wrap:anywhere}
.indietro{display:none}

/* il timbro */
.timbro{--c:var(--timbro);flex:none;display:grid;justify-items:center;padding:.4rem .8rem .35rem;border:3.5px double var(--c);border-radius:7px;color:var(--c);transform:rotate(-4deg);mix-blend-mode:var(--blend);text-transform:uppercase;font-weight:800;letter-spacing:.07em;font-size:1.18rem;line-height:1.15;text-align:center;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.15'/%3E%3C/filter%3E%3Crect width='220' height='90' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.15'/%3E%3C/filter%3E%3Crect width='220' height='90' filter='url(%23n)'/%3E%3C/svg%3E")}
.timbro small{font-size:.68rem;letter-spacing:.09em;font-weight:700}
.timbro.ambra{--c:var(--ambra)}
.timbro.rossa{--c:var(--ceralacca)}
.timbro.batte{animation:batti .22s cubic-bezier(.2,1.5,.5,1) both}
@keyframes batti{from{opacity:0;transform:rotate(-4deg) scale(1.5)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.timbro.batte{animation:none}.barra-prog i{transition:none}}

/* controlli */
.controlli{display:grid;gap:.4rem}
.controlli li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem;align-items:start}
.controlli .icona{margin-top:.2em}
.controlli .si{color:var(--timbro)}
.controlli .no{color:var(--ceralacca)}
.controlli .forse{color:var(--ambra)}
.controlli b{font-weight:700}
.controlli small{display:block;color:var(--grigio);font-size:.86rem;overflow-wrap:anywhere}

/* copie, staccate come tagliandi */
.copie{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));border:1px solid var(--filetto);border-radius:3px;background:var(--foglio-2)}
.copia{display:grid;gap:.6rem;padding:.9rem;align-content:start;min-width:0;border-left:2px dashed var(--filetto)}
.copia:first-child{border-left:0}
.copia.resta{background:var(--foglio)}
.copia-testa{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem .6rem;align-items:baseline}
.copia dl{display:grid;gap:.35rem}
.copia dt{font-size:.8rem;color:var(--grigio)}
.copia dd{overflow-wrap:anywhere}
.scelta{display:flex;gap:.5rem;align-items:center;font-weight:700;cursor:pointer;min-height:30px}
.scelta input{width:18px;height:18px;accent-color:var(--timbro);margin:0;flex:none}
.destino{font-size:.88rem;font-weight:700}
.destino.resta{color:var(--timbro)}
.destino.via{color:var(--ceralacca)}
@media (max-width:640px){.copia{border-left:0;border-top:2px dashed var(--filetto)}.copia:first-child{border-top:0}}

/* allegati */
.scorre{overflow-x:auto;min-width:0}
table{border-collapse:collapse;width:100%}
th{font-weight:700;font-size:.85rem;text-align:left;color:var(--grigio)}
th,td{padding:.5rem .6rem;border-bottom:1px solid var(--filetto);vertical-align:top;text-align:left}
td.num,th.num{text-align:right;white-space:nowrap}
tr.diverso td{background:var(--ceralacca-tenue)}
td.nome{overflow-wrap:anywhere;min-width:12rem;font-weight:700}
.esito{display:inline-flex;gap:.35em;align-items:center;font-weight:700;white-space:nowrap}
.esito.si{color:var(--timbro)}
.esito.no{color:var(--ceralacca)}
.selezione-gruppo{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;padding-top:.85rem;border-top:1.5px solid var(--inchiostro)}

/* barra azioni */
.barra-azioni{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--inchiostro);color:var(--foglio);padding-block:.7rem calc(.7rem + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.barra-azioni-in{max-width:1500px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;justify-content:space-between}
.barra-azioni .link{color:inherit}
.barra-azioni .btn{background:var(--foglio);color:var(--inchiostro);border-color:var(--foglio)}
.barra-azioni .btn:hover{filter:brightness(.93);background:var(--foglio)}

/* moduli */
label.campo{display:grid;gap:.25rem;font-weight:700;min-width:0}
label.campo .fine{font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=number],select{font:inherit;color:var(--inchiostro);background:var(--foglio);border:1.5px solid var(--grigio);border-radius:3px;padding:.5em .65em;min-height:42px;width:100%;min-width:0}
select{width:auto}
input:disabled{background:var(--foglio-2);color:var(--grigio)}
.griglia-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.85rem}
.cartelle{display:grid;gap:.25rem}
.cartelle label{display:flex;gap:.55rem;align-items:center;justify-content:space-between;padding:.4rem .5rem;border-bottom:1px solid var(--filetto);cursor:pointer}
.cartelle label>span:first-child{display:flex;gap:.55rem;align-items:center;min-width:0;overflow-wrap:anywhere}
.cartelle input{width:18px;height:18px;accent-color:var(--timbro);flex:none;margin:0}
.avviso{padding:.65rem .85rem;border:1.5px solid currentColor;border-radius:3px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem}
.avviso .icona{margin-top:.2em}
.avviso.ok{color:var(--timbro);background:var(--timbro-tenue)}
.avviso.err{color:var(--ceralacca);background:var(--ceralacca-tenue)}
.avviso.att{color:var(--ambra);background:var(--ambra-tenue)}
.avviso p,.avviso div{color:var(--inchiostro)}
.avviso b{color:inherit}
details>summary{cursor:pointer;font-weight:700;min-height:30px}
details[open]>summary{margin-bottom:.75rem}
.vuoto{display:grid;gap:.8rem;justify-items:start;padding:1.5rem 1.25rem}

/* accesso */
.accesso{min-height:100vh;display:grid;place-items:center;padding-block:1.5rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.accesso .foglio{width:min(440px,100%);display:grid;gap:1rem}
.accesso .marchio{font-size:1.25rem}

/* finestre */
dialog{border:1.5px solid var(--inchiostro);border-radius:3px;background:var(--foglio);color:var(--inchiostro);padding:0;max-width:min(640px,calc(100vw - 24px));width:100%;max-height:calc(100vh - 24px);box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(16,28,22,.6)}
.dlg{display:grid;gap:1rem;padding:1.25rem}
.dlg-piede{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
dialog.lettore{max-width:min(980px,calc(100vw - 24px))}
.lettore-testa{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;position:sticky;top:0;background:var(--foglio);padding:1rem 1.25rem;border-bottom:1.5px solid var(--inchiostro);z-index:1}
.lettore-testa h2{overflow-wrap:anywhere}
.lettore-corpo{display:grid;gap:1.1rem;padding:1.1rem 1.25rem 1.5rem}
.campi{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.2rem .9rem}
.campi dt{color:var(--grigio);font-size:.88rem}
.campi dd{overflow-wrap:anywhere}
.testo-mail{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--foglio-2);border:1px solid var(--filetto);padding:.9rem;border-radius:3px;max-height:50vh;overflow:auto;font-size:.95rem}
iframe.corpo{width:100%;height:50vh;border:1px solid var(--filetto);background:#fff;border-radius:3px}
.scaricabili{display:grid;gap:.4rem}
.scaricabili li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem .8rem;padding:.45rem 0;border-bottom:1px solid var(--filetto)}
.scaricabili .nm{font-weight:700;overflow-wrap:anywhere}

/* avviso a comparsa */
.notifica{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5.25rem + env(safe-area-inset-bottom,0px));z-index:30;background:var(--inchiostro);color:var(--foglio);padding:.6rem 1rem;border-radius:3px;max-width:calc(100vw - 32px);font-weight:700;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}

/* tabella larga */
.tabella td{font-size:.94rem}
.tabella .ogg{font-weight:700;overflow-wrap:anywhere;min-width:12rem}
.tabella input{width:18px;height:18px;accent-color:var(--timbro);margin:0}
.anteprima-nota{background:var(--inchiostro);color:var(--foglio);font-size:.9rem;padding-block:.4rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

@media (max-width:980px){
  .banco{grid-template-columns:minmax(0,1fr)}
  .banco.in-dettaglio .elenco{display:none}
  .banco:not(.in-dettaglio) .confronto{display:none}
  .indietro{display:inline-flex}
}
@media (max-width:640px){
  .confronto,.foglio{padding:1rem}
  .confronto-testa{flex-direction:column-reverse}
  .utente span{display:none}
  .testata-in{gap:.15rem .75rem}
  h1{font-size:1.45rem}
  table.allegati thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.allegati,table.allegati tbody,table.allegati tr,table.allegati td{display:block;width:100%}
  table.allegati tr{padding:.6rem 0;border-bottom:1px solid var(--filetto)}
  table.allegati tr.diverso{background:var(--ceralacca-tenue);padding-inline:.5rem}
  table.allegati tr.diverso td{background:none}
  table.allegati td{border:0;padding:.15rem 0;min-width:0}
  table.allegati td[data-etichetta]::before{content:attr(data-etichetta);display:block;font-size:.8rem;color:var(--grigio)}
  table.allegati td[data-etichetta] div{display:inline}
  table.allegati td[data-etichetta] .hash{display:block}
}