:root{
  --paper:#FAF7F2;--plane1:#FFFDFA;--plane2:#FFFFFF;
  --line:#E4DDD2;--line2:#CEC4B5;--ink:#241F1A;--ink2:#5A5148;--ink3:#6E6459;
  --blu:#3C5A7A;--blu2:#2E4761;--rosso:#9C4A38;--ocra:#B0822F;
  --veloblu:#E8EEF4;--velorosso:#F5E9E5;--veloocra:#F6EFE0;
  --sh1:0 1px 2px rgba(52,40,26,.07);
  --sh2:0 2px 4px rgba(52,40,26,.05),0 8px 18px rgba(52,40,26,.07);
  --sh3:0 4px 10px rgba(52,40,26,.06),0 20px 44px rgba(52,40,26,.12);
}
*{box-sizing:border-box}
html{color-scheme:light}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:16px;line-height:1.55}
h1,h2,h3,p,ul{margin:0}
a{color:var(--blu);text-decoration:none}
a:hover{color:var(--blu2);text-decoration:underline}
:focus-visible{outline:2px solid var(--blu);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.dsp{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;line-height:1.03;letter-spacing:-.012em}
.occhiello{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.nota{font-size:14px;color:var(--ink3);line-height:1.5}
.p1{background:var(--plane1);border:1px solid var(--line);box-shadow:var(--sh1)}
.p2{background:var(--plane2);border:1px solid var(--line);box-shadow:var(--sh2)}

/* barra e fascia */
.barra{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(20px,4vw,56px);height:64px;background:var(--plane1);border-bottom:1px solid var(--line)}
.marchio{display:flex;align-items:center;gap:12px;color:var(--ink)}
.marchio:hover{text-decoration:none}
.barra nav{display:flex;gap:4px}
.barra nav a{display:flex;align-items:center;height:44px;padding:0 14px;color:var(--ink2)}
.barra nav a.attiva{color:var(--ink);font-weight:600;box-shadow:inset 0 -3px 0 var(--blu)}
.fascia{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:clamp(32px,5vw,60px) clamp(20px,4vw,56px) clamp(24px,4vw,44px);background:var(--plane1);border-bottom:1px solid var(--line);box-shadow:var(--sh1)}
.fascia h1{font-size:clamp(40px,6vw,72px);margin-top:14px}
.fascia p.sotto{font-size:clamp(17px,1.6vw,20px);color:var(--ink2);max-width:640px;margin-top:14px;text-wrap:pretty}
.corpo{padding:clamp(24px,4vw,56px)}
.griglia{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
@media (max-width:980px){.griglia{grid-template-columns:1fr}}

/* sezioni numerate */
.sezione{padding:clamp(20px,3vw,32px);margin-bottom:28px}
.testata{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.numero{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff}
.numero.ocra{color:var(--ink)}
.testata h2{font-size:28px}

/* controlli */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid transparent;font:inherit;font-size:17px;cursor:pointer;background:none;color:inherit;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-p{background:var(--blu);color:#fff;box-shadow:var(--sh2)}
.btn-p:hover{background:var(--blu2);color:#fff}
.btn-s{background:var(--plane2);border-color:var(--line2);box-shadow:var(--sh1);color:var(--ink)}
.btn-r{color:var(--rosso)}
.campo{display:flex;flex-direction:column;gap:6px}
.etichetta{font-size:14px;font-weight:600;color:var(--ink2)}
.input,select.input,textarea.input{min-height:46px;padding:10px 14px;background:var(--plane2);border:1px solid var(--line2);font:inherit;font-size:16px;color:var(--ink);width:100%}
textarea.input{min-height:140px;line-height:1.55}
.due{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.quattro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:820px){.quattro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.due{grid-template-columns:1fr}}

.goccia{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 20px;border:2px dashed var(--line2);background:var(--plane2);text-align:center;cursor:pointer}
.goccia.piena{border-style:solid;border-color:var(--blu)}
.goccia input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.goccia strong{font-size:19px}
.goccia .btn{min-height:42px;font-size:16px}
.goccia:hover .btn{border-color:var(--ink)}
.file-scelto{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:10px 14px;margin-top:10px;background:var(--veloblu);border-left:4px solid var(--blu)}
.file-scelto strong{word-break:break-word}
.interruttore.spento{opacity:.55;cursor:not-allowed;background:var(--paper)}

.scelta{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--plane2);border:1px solid var(--line2);box-shadow:var(--sh1);cursor:pointer;margin-bottom:12px}
.scelta:has(input:checked){border:2px solid var(--blu);box-shadow:var(--sh2);padding:17px}
.scelta input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--blu);flex:none}
.scelta .titolo{font-size:18px;font-weight:600}
.sotto-scelte{margin:8px 0 14px 56px;padding-left:20px;border-left:3px solid var(--line);display:flex;flex-direction:column;gap:10px}
.sotto-scelte .scelta{margin-bottom:0}
.interruttore{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--plane2);border:1px solid var(--line);margin-bottom:12px;cursor:pointer}
.interruttore input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--blu);flex:none}
.interruttore .titolo{font-size:17px;font-weight:600}
.pastiglia{display:inline-block;white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line);background:var(--paper);color:var(--ink3)}
.pastiglia.blu{color:var(--blu);background:var(--veloblu);border-color:#C4D3E1}
.pastiglia.rossa{color:var(--rosso);background:var(--velorosso);border-color:#E4CDC6}

/* riepilogo / laterale */
.laterale{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px}
.scheda{padding:22px}
.righe{display:flex;flex-direction:column}
.righe > div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.righe > div:first-child{border-top:none}

/* avanzamento */
.blocchi{display:flex;gap:4px;margin:24px 0 8px}
.blocchi span{flex:1 1 0;height:14px;background:var(--line)}
.blocchi span.fatto{background:var(--blu)}
.blocchi span.corrente{background:var(--ocra)}
.fasi{display:flex;flex-direction:column}
.fase{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.fase .marca{width:24px;height:24px;flex:none;margin-top:4px;border:2px solid var(--line2)}
.fase.fatto .marca{background:var(--blu);border-color:var(--blu)}
.fase.corrente .marca{background:var(--ocra);border-color:var(--ocra)}
.fase h3{font-size:24px}
.fase.futuro h3{color:var(--ink3)}
.avviso{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-left:4px solid var(--ocra);background:var(--veloocra)}
.avviso.rosso{border-color:var(--rosso);background:var(--velorosso)}
.avviso.blu{border-color:var(--blu);background:var(--veloblu)}

/* la lavorazione sta lavorando: qualcosa si muove anche se la pagina e' ferma */
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes scorre{from{left:-40%}to{left:100%}}
.spia,.blocchi.viva span.corrente,.fasi.viva .fase.corrente .marca{animation:pulsa 1.6s ease-in-out infinite}
.attivita{position:relative;height:8px;margin-top:14px;background:var(--line);overflow:hidden}
.attivita::before{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:var(--ocra);animation:scorre 1.8s linear infinite}
@media (prefers-reduced-motion:reduce){.attivita::before{animation:none!important;left:0;width:100%;opacity:.5}}

/* griglia slide */
.miniature{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.miniatura{display:flex;flex-direction:column;gap:8px;cursor:pointer}
.miniatura .cornice{position:relative;background:var(--plane2);border:2px solid var(--line2);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.miniatura:has(input:checked) .cornice{border-color:var(--blu);box-shadow:var(--sh2)}
.miniatura:not(:has(input:checked)) .cornice img{opacity:.45;filter:grayscale(1)}
.miniatura img{max-width:100%;max-height:100%;object-fit:contain}
.miniatura input{position:absolute;top:10px;left:10px;width:26px;height:26px;margin:0;accent-color:var(--blu)}
.barra-fissa{position:sticky;bottom:0;display:flex;align-items:center;gap:20px;padding:16px clamp(20px,4vw,56px);background:var(--plane2);border-top:1px solid var(--line2);box-shadow:0 -6px 20px rgba(52,40,26,.10)}

/* elenco lavorazioni */
.elenco{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;margin-top:22px}
.elenco article{display:flex;flex-direction:column;gap:6px}
.elenco .quadro{height:110px;display:flex;align-items:center;justify-content:center}
.elenco h3{font-size:22px}

/* barra: chi e' collegato */
.persona{display:flex;align-items:center;gap:6px;flex:none}
.persona a{display:flex;align-items:center;height:44px;padding:0 12px;color:var(--ink2)}
.persona a.attiva{color:var(--ink);font-weight:600;box-shadow:inset 0 -3px 0 var(--blu)}
.persona form{margin:0}
.btn-testo{font:inherit;font-size:15px;color:var(--ink3);background:none;border:none;cursor:pointer;padding:8px 10px;min-height:44px}
.btn-testo:hover{color:var(--rosso);text-decoration:underline}
@media (max-width:900px){.barra{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.barra nav{flex-wrap:wrap}}

/* pagine di accesso */
.accesso{min-height:calc(100vh - 64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.accesso .lato{padding:clamp(32px,6vw,80px);display:flex;flex-direction:column;justify-content:center;gap:18px;background:var(--plane1);border-right:1px solid var(--line)}
.accesso .lato h1{font-size:clamp(40px,5vw,64px)}
.accesso .modulo{padding:clamp(32px,6vw,80px);display:flex;flex-direction:column;justify-content:center}
.accesso .modulo form,.accesso .modulo .scatola{max-width:440px;width:100%;display:flex;flex-direction:column;gap:18px}
@media (max-width:900px){.accesso{grid-template-columns:1fr}.accesso .lato{border-right:none;border-bottom:1px solid var(--line)}}

/* tabelle */
.tabella{width:100%;border-collapse:collapse;font-size:15px}
.tabella th{text-align:left;vertical-align:bottom;white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);padding:10px 12px;border-bottom:2px solid var(--ink)}
.tabella td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.tabella tr:last-child td{border-bottom:none}
.tabella .num{text-align:right;font-variant-numeric:tabular-nums}
.tabella form{margin:0;display:inline}
.tabella .btn-testo{min-height:0;padding:0;font-size:15px;line-height:inherit;vertical-align:baseline}
.tabella .btn{min-height:36px;font-size:15px;padding:0 14px}
.scorrevole{overflow-x:auto}
.codice{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:15px;letter-spacing:.06em}

/* statistiche */
.cifre{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.cifre > div{padding:18px 20px;background:var(--plane2);border:1px solid var(--line)}
.cifre .dsp{font-size:40px;display:block;margin-top:4px}

/* pulsanti in fila, filtri */
.fila{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.filtri{display:flex;gap:4px;flex-wrap:wrap}
.filtri a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--line2);background:var(--plane2);color:var(--ink2);font-size:14px}
.filtri a.attivo{background:var(--ink);color:#fff;border-color:var(--ink)}
.filtri a:hover{text-decoration:none;border-color:var(--ink)}

/* gruppi della configurazione */
details.gruppo{background:var(--plane1);border:1px solid var(--line);box-shadow:var(--sh1);margin-bottom:14px}
details.gruppo > summary{display:flex;align-items:center;gap:16px;padding:18px 22px;cursor:pointer;list-style:none}
details.gruppo > summary::-webkit-details-marker{display:none}
details.gruppo > summary h2{font-size:24px}
details.gruppo[open] > summary{border-bottom:1px solid var(--line)}
details.gruppo .voci{padding:8px 22px 22px}
.voce{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.voce:last-child{border-bottom:none}
.voce .chiave{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:12px;color:var(--ink3)}
.voce .titolo{font-size:17px;font-weight:600}
@media (max-width:760px){.voce{grid-template-columns:1fr}}

/* caricamento in corso */
.velo{position:fixed;inset:0;background:rgba(36,31,26,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.finestra{width:min(560px,100%);padding:32px;background:var(--plane2);border:1px solid var(--line);box-shadow:var(--sh3)}
.avanzamento{height:16px;background:var(--line);margin:18px 0 8px}
.avanzamento > div{height:100%;background:var(--blu);width:0;transition:width .3s linear}
@media (prefers-reduced-motion:reduce){.avanzamento > div{transition:none}}