/* audioCheck — strumento da campo. Carta da disegno, inchiostro, nastro carta. */
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --carta:#EBEFEA;      /* foglio da disegno */
  --foglio:#FFFFFF;
  --inchiostro:#1B2430;
  --muto:#5A6770;
  --bordo:#D3DAD2;
  --griglia:rgba(27,36,48,.045);
  --segnale:#0E7C86;    /* azioni */
  --segnale-scuro:#0A5A62;
  --segnale-tenue:#E1F0F0;
  --nastro:#E8D9A3;     /* nastro carta */
  --nastro-testo:#4E3F14;
  --ambra:#B86E0B;
  --ambra-tenue:#FBF1DD;
  --ok:#2D7A4C;
  --ok-tenue:#E3F1E7;
  --pannello:#E8762A;
  --titoli:"Barlow Condensed","Arial Narrow",sans-serif;
  --testo:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --numeri:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --raggio:6px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --carta:#121819;--foglio:#1A2225;--inchiostro:#E3E9E5;--muto:#9AA7A8;
    --bordo:#2B3639;--griglia:rgba(227,233,229,.035);
    --segnale:#3DB2BC;--segnale-scuro:#7FD3DA;--segnale-tenue:#173236;
    --nastro:#6B5C30;--nastro-testo:#F5EBC6;
    --ambra:#E2A23D;--ambra-tenue:#2D2516;--ok:#5CC08A;--ok-tenue:#173024;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.55 var(--testo);color:var(--inchiostro);
  background-color:var(--carta);
  background-image:linear-gradient(var(--griglia) 1px,transparent 1px),
                   linear-gradient(90deg,var(--griglia) 1px,transparent 1px);
  background-size:24px 24px}
a{color:var(--segnale);text-underline-offset:.18em}
a:hover{color:var(--segnale-scuro)}
:focus-visible{outline:3px solid var(--segnale);outline-offset:2px;border-radius:3px}

/* Intestazione */
.barra{background:var(--inchiostro);color:#F2F5F2;position:sticky;top:0;z-index:10}
@media (prefers-color-scheme:dark){.barra{background:#0B1011;border-bottom:1px solid var(--bordo)}}
.barra-dentro{max-width:1040px;margin:0 auto;padding:.7rem 1.25rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.marchio{display:flex;align-items:center;gap:.5rem;color:#F2F5F2;text-decoration:none;margin-right:auto}
.marchio svg{width:30px;height:20px}
.marchio b{font:700 1.45rem/1 var(--titoli);letter-spacing:.01em}
.marchio:hover{color:#fff}
.barra nav{display:flex;gap:.25rem;flex-wrap:wrap}
.barra nav a{color:#CFE3E4;text-decoration:none;font-weight:500;font-size:.95rem;padding:.4rem .7rem;border-radius:var(--raggio);display:inline-flex;align-items:center;gap:.35rem}
.barra nav a:hover,.barra nav a[aria-current]{background:rgba(255,255,255,.09);color:#fff}
.barra nav i{font-size:1.15rem}

main{max-width:1040px;margin:0 auto;padding:1.5rem 1.25rem 2rem}
footer{text-align:center;padding:1.5rem;color:var(--muto);font:400 .78rem var(--numeri)}

/* Titoli */
h1,h2,h3{font-family:var(--titoli);line-height:1.1;margin:0}
h1{font-weight:700;font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:.005em;margin:.35rem 0 .5rem}
h2{font-weight:600;font-size:1.35rem;margin:0 0 .75rem;display:flex;align-items:center;gap:.5rem}
h2 i{color:var(--segnale);font-size:1.3rem}
.card>h2:first-child{margin-top:-.1rem}

/* Schede */
.card{background:var(--foglio);border:1px solid var(--bordo);border-radius:var(--raggio);padding:1.25rem 1.4rem;margin-bottom:1.1rem;box-shadow:0 1px 0 rgba(27,36,48,.04)}
.card.testa{border-top:4px solid var(--segnale)}
.nota{color:var(--muto);font-size:.9rem}
.vuoto{color:var(--muto)}

/* Nastro carta: l'identificativo scritto come in sala */
.id,.nastro{display:inline-block;background:var(--nastro);color:var(--nastro-testo);
  font:600 .92rem/1 var(--titoli);letter-spacing:.09em;text-transform:uppercase;
  padding:.38rem .8rem .34rem;transform:rotate(-1.2deg);
  clip-path:polygon(0 8%,3% 0,7% 9%,12% 1%,100% 0,97% 12%,100% 30%,96% 50%,100% 70%,97% 88%,100% 100%,8% 100%,4% 92%,0 100%,3% 78%,0 55%,2% 30%);
  box-shadow:0 1px 1px rgba(0,0,0,.08)}
.nastro.piccolo{font-size:.8rem;padding:.28rem .55rem .24rem}

/* Valori */
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 1.1rem}
.valori{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-top:1rem}
.valori div{border-left:3px solid var(--bordo);padding:.1rem 0 .1rem .8rem}
.valori b{display:block;font:600 1.7rem/1.1 var(--titoli);font-variant-numeric:tabular-nums}
.valori span{color:var(--muto);font-size:.82rem}

/* Moduli */
label{display:block;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muto);margin:1rem 0 .3rem}
input,select,textarea{width:100%;padding:.55rem .7rem;font:400 1rem var(--testo);color:var(--inchiostro);
  border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--foglio)}
input:focus,select:focus,textarea:focus{border-color:var(--segnale);outline:2px solid var(--segnale-tenue);outline-offset:0}
input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--segnale)}
.spunta{display:flex!important;gap:.6rem;align-items:center;text-transform:none;letter-spacing:0;font-size:.98rem;font-weight:500;color:var(--inchiostro)}

/* Pulsanti */
button,.bottone{display:inline-flex;align-items:center;gap:.45rem;background:var(--segnale);color:#fff;border:0;border-radius:var(--raggio);
  padding:.65rem 1.25rem;font:600 1rem var(--testo);cursor:pointer;margin-top:1rem;text-decoration:none;line-height:1.2}
button:hover,.bottone:hover{background:var(--segnale-scuro);color:#fff}
@media (prefers-color-scheme:dark){button,.bottone{color:#08201F}button:hover,.bottone:hover{color:#08201F}}
button i,.bottone i{font-size:1.2rem}
button.sec,.bottone.sec{background:transparent;color:var(--segnale);box-shadow:inset 0 0 0 1.5px var(--segnale)}
button.sec:hover,.bottone.sec:hover{background:var(--segnale-tenue);color:var(--segnale-scuro)}
button.ok{background:var(--ok)}
button.piccolo{padding:.38rem .85rem;font-size:.9rem;margin:0}

/* Tabelle */
table{border-collapse:collapse;width:100%;font-size:.93rem}
th{font:600 .74rem var(--testo);letter-spacing:.06em;text-transform:uppercase;color:var(--muto);padding:.5rem .7rem;border-bottom:1.5px solid var(--bordo);text-align:right}
td{padding:.5rem .7rem;border-bottom:1px solid var(--bordo);text-align:right;font-family:var(--numeri);font-size:.88rem;font-variant-numeric:tabular-nums}
th:first-child,td:first-child,td.s,th.s{text-align:left}
td.s{font-family:var(--testo);font-size:.93rem}
tbody tr:last-child td{border-bottom:0}
pre{font:400 .82rem/1.5 var(--numeri);background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);padding:1rem;overflow-x:auto;white-space:pre}

/* Avvisi e stati */
.avviso{background:var(--ambra-tenue);border-left:4px solid var(--ambra);padding:.7rem .9rem;margin:.6rem 0;border-radius:0 var(--raggio) var(--raggio) 0;font-size:.94rem}
.avviso.ok{background:var(--ok-tenue);border-color:var(--ok)}
.stato{font:600 .74rem var(--testo);letter-spacing:.05em;text-transform:uppercase;background:var(--segnale-tenue);color:var(--segnale-scuro);padding:.2rem .6rem;border-radius:20px;white-space:nowrap}
.stato.consegnato{background:var(--ok-tenue);color:var(--ok)}
.stato.misurato{background:var(--ambra-tenue);color:var(--ambra)}
.tocca{color:var(--segnale);font-weight:600}

/* Percorso del progetto: la sequenza vera del lavoro in sala */
.percorso{display:flex;list-style:none;margin:1.1rem 0 0;padding:0;gap:0;counter-reset:passo;overflow-x:auto}
.percorso li{flex:1 1 0;min-width:120px;position:relative;counter-increment:passo}
.percorso li::after{content:"";position:absolute;top:15px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:var(--bordo)}
.percorso li:last-child::after{display:none}
.percorso li.fatto::after{background:var(--segnale)}
.percorso a,.percorso span.p{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-decoration:none;color:var(--muto);font-size:.85rem;text-align:center;padding:0 .3rem}
.percorso .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 1rem var(--titoli);
  border:2px solid var(--bordo);background:var(--foglio);color:var(--muto)}
.percorso .n::before{content:counter(passo)}
.percorso li.fatto .n{background:var(--segnale);border-color:var(--segnale);color:#fff}
.percorso li.fatto .n::before{content:"\f00c";font:900 .9rem "Line Awesome Free"}
.percorso li.qui .n{border-color:var(--segnale);color:var(--segnale);box-shadow:0 0 0 4px var(--segnale-tenue)}
.percorso li.qui a,.percorso li.qui span.p{color:var(--inchiostro);font-weight:600}
.percorso a:hover{color:var(--segnale)}

/* Elenco dei progetti */
.elenco{display:grid;gap:.8rem}
.progetto{display:grid;grid-template-columns:auto 1fr auto;gap:.4rem 1.1rem;align-items:center;background:var(--foglio);
  border:1px solid var(--bordo);border-radius:var(--raggio);padding:1rem 1.2rem;text-decoration:none;color:var(--inchiostro)}
.progetto{transition:border-color .15s,box-shadow .15s}
.progetto:hover{border-color:var(--segnale);color:var(--inchiostro);box-shadow:0 2px 8px rgba(14,124,134,.12)}
.progetto b{font:600 1.3rem/1.15 var(--titoli)}
.progetto .nota{display:block}
.misure{font:500 .85rem var(--numeri);color:var(--muto);white-space:nowrap}
@media (max-width:640px){
  .percorso li{min-width:0}
  .percorso a,.percorso span.p{font-size:.7rem;padding:0 .1rem}
  .percorso .n{width:26px;height:26px;font-size:.85rem}
  .percorso li::after{top:12px;left:calc(50% + 15px);right:calc(-50% + 15px)}
  .progetto{grid-template-columns:1fr auto}
  .progetto .nastro{grid-column:1/-1;justify-self:start}
  main{padding:1rem}
  .card{padding:1rem}
}

/* Disegni */
svg{max-width:100%;height:auto}
.disegno{background:var(--foglio);border-radius:var(--raggio)}
/* I disegni sono su carta chiara anche di notte: i colori dei materiali restano leggibili. */
@media (prefers-color-scheme:dark){.card svg{background:#F4F6F3;border-radius:var(--raggio)}}

/* Portale: archivio in sola lettura */
.barra nav form.esci{margin:0}
.barra nav form.esci button{background:transparent;color:#CFE3E4;font:500 .95rem var(--testo);padding:.4rem .7rem;margin:0;box-shadow:none}
.barra nav form.esci button:hover{background:rgba(255,255,255,.09);color:#fff}
.accesso{max-width:26rem;margin:3rem auto 0}
.accesso form button{margin-top:1.1rem;width:100%;justify-content:center}
.schede{display:flex;gap:.2rem;margin:1.1rem -.2rem 0;border-bottom:1px solid var(--bordo);overflow-x:auto}
.schede a{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .75rem;color:var(--muto);text-decoration:none;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.schede a:hover{color:var(--inchiostro)}
.schede a[aria-current]{color:var(--inchiostro);border-bottom-color:var(--segnale);font-weight:600}
.schede i{font-size:1.15rem}
.riga-titolo{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.riga-titolo h2{margin:0}
.riga-titolo .bottone{margin:0}
.versioni{margin:0;padding-left:1.1rem;font:400 .9rem var(--numeri)}
.versioni a[aria-current]{font-weight:600;color:var(--inchiostro)}