:root{
  /* palette presa dalle porte: intonaco, cobalto, ottanio, oliva, aragosta */
  --intonaco:#EFEDE6;
  --intonaco-2:#E5E2D8;
  --grafite:#22262B;
  --ombra:#8C887C;
  --ombra-chiara:#BDB9AD;
  --cobalto:#1B4A8F;
  --ottanio:#0E6F72;
  --oliva:#6E7A3F;
  --aragosta:#C0502D;
  --aragosta-scura:#8B2F17;
  --riga:#D4D0C4;
  --bianco:#FBFAF6;

  --font-ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-dati:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--intonaco);
  color:var(--grafite);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1440px;margin:0 auto;padding:0 20px 80px}

/* ---------- testata ---------- */
header.testata{
  border-bottom:1.5px solid var(--grafite);
  padding:22px 0 16px;
  margin-bottom:0;
}
.eyebrow{
  font-family:var(--font-dati);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ombra);
}
h1{
  font-size:clamp(22px,3.2vw,34px);
  font-weight:600;letter-spacing:-.015em;
  margin:4px 0 0;
}
h1 .sub{color:var(--ombra);font-weight:400}
.testata-riga{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}
.data-rif{display:flex;align-items:center;gap:8px}
.data-rif label{font-family:var(--font-dati);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ombra)}
input[type=date],input[type=text],input[type=number],textarea,select{
  font-family:var(--font-dati);font-size:13px;
  background:var(--bianco);color:var(--grafite);
  border:1px solid var(--riga);border-radius:2px;padding:5px 7px;
}
input:focus-visible,textarea:focus-visible,button:focus-visible,select:focus-visible{
  outline:2px solid var(--cobalto);outline-offset:1px;
}

/* ---------- indicatori ---------- */
.kpi{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-bottom:1px solid var(--grafite);
}
.kpi > div{padding:16px 18px 14px;border-right:1px solid var(--riga)}
.kpi > div:last-child{border-right:0}
.kpi .et{font-family:var(--font-dati);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ombra);display:block;margin-bottom:6px}
.kpi .val{font-family:var(--font-dati);font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1}
.kpi .nota{font-size:12px;color:var(--ombra);margin-top:5px}
.val.pos{color:var(--oliva)} .val.neg{color:var(--aragosta)} .val.crit{color:var(--aragosta-scura)}

/* ---------- navigazione ---------- */
nav.viste{display:flex;gap:0;border-bottom:1px solid var(--riga);margin-bottom:22px;flex-wrap:wrap}
nav.viste button{
  font-family:var(--font-ui);font-size:13px;font-weight:500;
  background:none;border:0;border-bottom:2px solid transparent;
  padding:12px 16px;cursor:pointer;color:var(--ombra);
}
nav.viste button:hover{color:var(--grafite)}
nav.viste button[aria-selected=true]{color:var(--grafite);border-bottom-color:var(--aragosta)}
nav.viste .spazio{flex:1}
.azioni{display:flex;gap:8px;align-items:center;padding:7px 0}
button.az{
  font-family:var(--font-dati);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--bianco);border:1px solid var(--riga);border-radius:2px;
  padding:7px 11px;cursor:pointer;color:var(--grafite);
}
button.az:hover{border-color:var(--grafite)}
button.az.primaria{background:var(--grafite);color:var(--intonaco);border-color:var(--grafite)}
.stato-salvataggio{font-family:var(--font-dati);font-size:11px;color:var(--ombra)}
.stato-salvataggio.sporco{color:var(--aragosta)}

.pannello{display:none}
.pannello.attivo{display:block}

/* ---------- gantt ---------- */
.gantt{border:1px solid var(--riga);background:var(--bianco);overflow:hidden}
.gantt-corpo{display:flex}
.col-nomi{flex:0 0 244px;border-right:1.5px solid var(--grafite);background:var(--bianco);z-index:2}
.col-tempo{flex:1;overflow-x:auto;overflow-y:hidden}
.pista{position:relative;min-width:100%}

.riga{height:26px;display:flex;align-items:center;border-bottom:1px solid #F0EEE7;position:relative}
.riga.gruppo{height:30px;border-bottom:1px solid var(--riga);background:var(--intonaco-2)}
.col-nomi .riga{padding:0 10px;font-size:12.5px;gap:6px}
.col-nomi .riga.gruppo{font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.col-nomi .riga .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.col-nomi .riga .pct{font-family:var(--font-dati);font-size:11px;color:var(--ombra)}
.riga.gruppo .pct{color:var(--grafite);font-weight:600}

.intestazione-tempo{height:44px;border-bottom:1.5px solid var(--grafite);position:relative;background:var(--bianco)}
.intestazione-nomi{height:44px;border-bottom:1.5px solid var(--grafite);display:flex;align-items:flex-end;padding:0 10px 6px;
  font-family:var(--font-dati);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ombra)}
.mese{position:absolute;top:0;height:100%;border-left:1px solid var(--riga);padding:6px 0 0 6px;
  font-family:var(--font-dati);font-size:10.5px;color:var(--ombra);white-space:nowrap;overflow:hidden}
.mese.anno{border-left:1.5px solid var(--ombra)}
.mese .nm{display:block;font-weight:500;color:var(--grafite)}
.griglia-mese{position:absolute;top:0;bottom:0;width:1px;background:#EDEAE1}
.griglia-mese.anno{background:var(--riga)}

/* barra: pianificato in tratteggio grafite, avanzamento pieno, tacca del previsto */
.barra{position:absolute;top:6px;height:14px;border:1px solid var(--ombra-chiara);border-radius:1px;background:#F4F2EB}
.barra .fatto{position:absolute;left:0;top:0;bottom:0;border-radius:0}
.barra .buco{position:absolute;top:0;bottom:0;opacity:.55}
.barra .tacca{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--grafite)}
.barra .tacca::after{content:"";position:absolute;top:-3px;left:-2px;width:6px;height:3px;background:var(--grafite)}
.st-nonini{background:var(--ombra-chiara)}
.st-linea{background:var(--cobalto)}
.st-anticipo{background:var(--oliva)}
.st-ritardo{background:var(--aragosta)}
.st-critico{background:var(--aragosta-scura)}
.st-completata{background:var(--ottanio)}
.hatch-rosso{background:repeating-linear-gradient(45deg,var(--aragosta) 0 3px,transparent 3px 6px)}
.hatch-verde{background:repeating-linear-gradient(45deg,var(--oliva) 0 3px,transparent 3px 6px)}

.filo-oggi{position:absolute;top:0;bottom:0;width:1px;background:var(--cobalto);z-index:3;pointer-events:none}
.filo-oggi::before{content:attr(data-et);position:absolute;bottom:3px;left:4px;
  font-family:var(--font-dati);font-size:9.5px;letter-spacing:.1em;color:var(--cobalto);white-space:nowrap;
  background:var(--bianco);padding:1px 4px;border:1px solid var(--cobalto);border-radius:2px}
.filo-fine{position:absolute;top:0;bottom:0;width:1px;background:var(--aragosta);z-index:3;pointer-events:none;
  background-image:linear-gradient(var(--aragosta) 50%,transparent 50%);background-size:1px 6px;background-repeat:repeat-y}
.filo-fine::before{content:attr(data-et);position:absolute;bottom:3px;right:4px;
  font-family:var(--font-dati);font-size:9.5px;letter-spacing:.1em;color:var(--aragosta);white-space:nowrap;
  background:var(--bianco);padding:1px 4px;border:1px solid var(--aragosta);border-radius:2px}
.riga.etichette{height:24px;border-bottom:0;background:var(--bianco)}
#barre{position:relative}

.vuoto-lane{font-size:12px;color:var(--ombra);font-style:italic;padding-left:10px}

.legenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-family:var(--font-dati);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ombra);align-items:center}
.legenda span{display:flex;align-items:center;gap:6px}
.legenda i{width:14px;height:9px;display:inline-block;border-radius:1px}
.legenda .tacca-demo{width:2px;height:14px;background:var(--grafite);display:inline-block}

/* ---------- settimana ---------- */
.colonne{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.blocco{border:1px solid var(--riga);background:var(--bianco)}
.blocco h2{
  margin:0;padding:11px 14px;border-bottom:1px solid var(--riga);
  font-family:var(--font-dati);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
}
.blocco h2 .conta{color:var(--ombra);font-weight:400}
.blocco.allarme h2{color:var(--aragosta-scura);border-bottom-color:var(--aragosta)}
.voce{padding:11px 14px;border-bottom:1px solid #F0EEE7;display:flex;gap:10px;align-items:flex-start}
.voce:last-child{border-bottom:0}
.voce .marc{width:3px;align-self:stretch;border-radius:2px;flex:0 0 3px}
.voce .testo{flex:1;min-width:0}
.voce .tit{font-size:13px;font-weight:500}
.voce .meta{font-family:var(--font-dati);font-size:11px;color:var(--ombra);margin-top:3px}
.voce .num{font-family:var(--font-dati);font-size:13px;font-weight:600;white-space:nowrap}
.vuoto{padding:16px 14px;font-size:13px;color:var(--ombra)}

/* ---------- tabella ---------- */
table{width:100%;border-collapse:collapse;background:var(--bianco);font-size:13px}
thead th{
  text-align:left;padding:9px 10px;border-bottom:1.5px solid var(--grafite);
  font-family:var(--font-dati);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ombra);
  cursor:pointer;white-space:nowrap;font-weight:500;
}
thead th:hover{color:var(--grafite)}
tbody td{padding:6px 10px;border-bottom:1px solid #F0EEE7;vertical-align:middle}
tbody tr.riga-gruppo td{background:var(--intonaco-2);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--riga)}
td.num,th.num{font-family:var(--font-dati);text-align:right;white-space:nowrap}
.pill{display:inline-block;padding:2px 7px;border-radius:2px;color:var(--bianco);
  font-family:var(--font-dati);font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
input.pct{width:62px;text-align:right}
input.nota{width:100%;min-width:120px}
input.dt{width:126px}
button.elimina{background:none;border:0;color:var(--ombra);cursor:pointer;font-size:15px;line-height:1;padding:2px 6px}
button.elimina:hover{color:var(--aragosta)}
.tabella-cont{overflow-x:auto;border:1px solid var(--riga)}

/* ---------- dati ---------- */
.dati-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.card{border:1px solid var(--riga);background:var(--bianco);padding:16px}
.card h2{margin:0 0 6px;font-size:14px;font-weight:600}
.card p{margin:0 0 12px;font-size:12.5px;color:var(--ombra)}
textarea{width:100%;min-height:190px;resize:vertical;font-size:12px;line-height:1.5}
pre.esempio{background:var(--intonaco-2);border:1px solid var(--riga);padding:10px;font-family:var(--font-dati);
  font-size:11px;overflow-x:auto;margin:0 0 12px;color:var(--grafite)}
.msg{margin-top:10px;font-family:var(--font-dati);font-size:11.5px}
.msg.ok{color:var(--ottanio)} .msg.err{color:var(--aragosta)}

footer{margin-top:34px;padding-top:14px;border-top:1px solid var(--riga);
  font-family:var(--font-dati);font-size:10.5px;letter-spacing:.06em;color:var(--ombra);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media print{
  body{background:#fff}
  nav.viste,.azioni,.dati-griglia,button{display:none !important}
  .wrap{max-width:none;padding:0}
  .col-tempo{overflow:visible}
  .pannello{display:none}
  .pannello.attivo{display:block}
  .gantt,.blocco,.tabella-cont{border-color:#999}
}
@media (max-width:640px){
  .col-nomi{flex-basis:150px}
  .kpi .val{font-size:24px}
}
@media (prefers-reduced-motion:no-preference){
  .barra .fatto{transition:width .18s ease}
}
#bannerLettura{
  margin:10px 0 0;padding:8px 12px;border:1px solid var(--cobalto);border-radius:2px;
  background:var(--bianco);font-family:var(--font-dati);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cobalto);
}
.sola-lettura #corpoTabella input,.sola-lettura button.elimina{pointer-events:none;opacity:.55}