:root {
  --inchiostro: #17202b;
  --testo: #26313d;
  --tenue: #5b6674;
  --linea: #e1e5eb;
  --linea-forte: #c9d0d9;
  --fondo: #f4f5f7;
  --superficie: #ffffff;
  --blu: #1f3a5f;
  --blu-scuro: #172c49;
  --blu-tenue: #e8eef6;
  --focus: #2f6fb0;
  --critico: #b42318;
  --critico-tenue: #fdecea;
  --attenzione: #a15c07;
  --attenzione-tenue: #fdf3e2;
  --info: #175cd3;
  --ok: #067647;
  --ok-tenue: #e7f6ec;
  --evidenza: #fff3c4;
  /* integrazioni dell'istruttoria (spec §37): ardesia, fra il blu delle tappe e il grigio della teorica */
  --integrazione: #5f7591;
  --sospensione: rgba(95, 117, 145, .16);
  --raggio: 8px;
  --ombra: 0 1px 2px rgba(23, 32, 43, .06), 0 4px 12px rgba(23, 32, 43, .05);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  color: var(--testo);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
::selection { background: #cfe0f5; color: var(--inchiostro); }
a { color: var(--blu); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--focus); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.tenue { color: var(--tenue); }

/* ---------- Testata ---------- */
.testata {
  display: flex; align-items: center; gap: 32px;
  padding: 0 24px; height: 52px;
  background: var(--blu); color: #fff;
}
.marchio { color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.marchio span { font-weight: 400; color: #b9c9de; margin-left: 2px; }
.marchio:hover { color: #fff; }
.testata nav { display: flex; gap: 4px; height: 100%; }
.testata nav a {
  display: flex; align-items: center; padding: 0 12px;
  color: #d3deec; text-decoration: none; border-bottom: 2px solid transparent;
}
.testata nav a:hover { color: #fff; }
.testata nav a[aria-current] { color: #fff; border-bottom-color: #fff; }
.testata :focus-visible { outline-color: #fff; }
.utente { margin-left: auto; display: flex; align-items: center; gap: 12px; color: #d3deec; font-size: 13px; }
.utente[hidden] { display: none; }
.utente .errore { margin: 0; color: #ffb4a8; }
.link-chiaro { min-height: 28px; padding: 0 10px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.link-chiaro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ---------- Ingresso ---------- */
.ingresso {
  max-width: 360px; margin: 64px auto 0; padding: 24px; display: flex; flex-direction: column; gap: 16px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.ingresso h1 { font-size: 18px; }
.ingresso label { font-size: 13px; font-weight: 600; color: var(--inchiostro); }
.ingresso .errore { margin: 0; }
.ingresso p { margin: 0; }
.ingresso button { align-self: stretch; }

main { padding: 16px 24px 24px; max-width: 1600px; margin: 0 auto; }

/* ---------- Titoli ---------- */
.intestazione { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
h1 { font-size: 22px; line-height: 1.25; margin: 0; color: var(--inchiostro); letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: 15px; margin: 0 0 12px; color: var(--inchiostro); }
.conteggio {
  font-size: 12px; font-weight: 600; color: var(--tenue); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 999px; padding: 0 8px; font-variant-numeric: tabular-nums;
}
.sottotitolo { color: var(--tenue); margin: -8px 0 16px; max-width: 75ch; }
.indietro { display: inline-block; font-size: 13px; color: var(--tenue); text-decoration: none; margin-bottom: 8px; }
.indietro:hover { color: var(--blu); }
.intestazione.pratica { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 20px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; color: var(--tenue); font-size: 13px; }
.meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--linea-forte); margin: 0 16px 3px -10px; }

/* ---------- Controlli ---------- */
button, input, select { font: inherit; color: inherit; }
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; font-weight: 600; font-size: 13px; white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s;
}
button:disabled { opacity: .55; cursor: progress; }
button.primario { background: var(--blu); color: #fff; }
button.primario:hover:not(:disabled) { background: var(--blu-scuro); }
button.secondario { background: var(--superficie); color: var(--blu); border-color: var(--linea-forte); }
button.secondario:hover:not(:disabled) { border-color: var(--blu); }
input, select {
  min-height: 34px; padding: 0 10px; border: 1px solid var(--linea-forte); border-radius: 6px;
  background: var(--superficie); width: 100%;
}
input:hover, select:hover { border-color: #aab4c1; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
input::placeholder { color: #8a94a1; }
input[type="date"], input[type="number"] { font-variant-numeric: tabular-nums; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span { font-size: 12px; font-weight: 600; color: var(--tenue); }
.azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.errore { color: var(--critico); margin: 8px 0 0; }
.errore:empty { display: none; }

/* ---------- Nuova pratica ---------- */
.nuova-pratica {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
  padding: 16px 18px; margin-bottom: 24px;
}
.nuova-pratica .campi { display: grid; grid-template-columns: 2fr 1.4fr 1.2fr 1fr 1fr auto; gap: 12px; align-items: end; }

/* ---------- Tabelle ---------- */
.tabella {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.tabella th, .tabella td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella th { font-size: 12px; font-weight: 600; color: var(--tenue); background: #f9fafb; position: sticky; top: 0; }
.tabella tbody tr:hover td { background: #f8fafc; }
.tabella td a { font-weight: 600; text-decoration: none; }
.tabella td a:hover { text-decoration: underline; }
/* Elenco delle pratiche (spec §42): «+ Nuova pratica» a destra del titolo; comandi della riga allineati a destra */
.intestazione .apri-nuova { margin-left: auto; align-self: center; }
.nuova-pratica[hidden] { display: none; }
.azioni-nuova { display: flex; gap: 8px; align-items: end; }
.tabella-pratiche td { vertical-align: middle; }
.tabella-pratiche .cella-comandi { width: 1%; white-space: nowrap; padding-top: 4px; padding-bottom: 4px; }
.comandi-riga { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.frecce-elenco { display: inline-flex; gap: 2px; }
.frecce-elenco button.icona { width: 30px; height: 30px; min-height: 30px; padding: 0; color: var(--tenue); }
.frecce-elenco button.icona:hover:not(:disabled) { color: var(--blu); background: var(--blu-tenue); }
.frecce-elenco button.icona:disabled { opacity: .3; cursor: default; }
.frecce-elenco svg { width: 16px; height: 16px; }
.visivamente-nascosto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.codice { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; color: var(--inchiostro); }
.vuoto { background: var(--superficie); border: 1px dashed var(--linea-forte); border-radius: var(--raggio); padding: 28px; color: var(--tenue); max-width: 75ch; }
.chip {
  display: inline-block; font-size: 11px; font-weight: 600; line-height: 18px; padding: 0 8px;
  border-radius: 999px; white-space: nowrap;
}
.chip.da_validare { color: var(--attenzione); background: var(--attenzione-tenue); }
.chip.validata { color: var(--ok); background: var(--ok-tenue); }
.chip.neutro { color: var(--testo); background: #eef1f5; }

/* ---------- Schede e legenda ---------- */
.barra-schede { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 12px; }
.barra-schede > * { min-width: 0; }
.schede { display: inline-flex; padding: 3px; background: #e7eaef; border-radius: 8px; }
.schede a {
  padding: 6px 14px; border-radius: 6px; color: var(--tenue); text-decoration: none; font-weight: 600; font-size: 13px;
}
.schede a:hover { color: var(--inchiostro); }
.schede a[aria-current] { background: var(--superficie); color: var(--blu); box-shadow: 0 1px 2px rgba(23, 32, 43, .12); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--tenue); font-size: 12px; flex-basis: 100%; margin-top: -4px; }
.legenda[hidden] { display: none; }
/* «Legenda ▸»: si apre e si chiude, la scelta resta nel browser */
button.apri-legenda {
  min-height: 30px; padding: 0 10px 0 8px; gap: 8px; background: transparent; color: var(--tenue); font-weight: 600; font-size: 12px;
}
button.apri-legenda::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease-out;
}
button.apri-legenda[aria-expanded="true"]::after { transform: translateY(-2px) rotate(45deg); }
button.apri-legenda:hover { color: var(--inchiostro); background: #e7eaef; }
.legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.legenda svg { width: 16px; height: 16px; overflow: visible; }
.legenda svg[viewBox="0 0 22 16"] { width: 22px; }
.campione { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.campione.critico { background: #f2c4bf; }
.campione.attenzione { background: #f3dcb4; }
.campione.informazione { background: #c9daf1; }
.segno-validare {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: var(--attenzione); background: var(--attenzione-tenue);
}

/* ---------- Layout pratica ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.gantt {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden;
}
.nomi { border-right: 1px solid var(--linea); background: var(--superficie); position: relative; z-index: 1; }
.nome-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: 0; padding: 0 12px 0 14px; border: 0; border-radius: 0; background: transparent;
  color: var(--testo); font-weight: 400; font-size: 13px; text-align: left; white-space: normal;
}
.riga-nomi { position: relative; }
.riga-nomi:nth-child(even) .nome-riga { background: #fafbfc; }
.riga-nomi .nome-riga:hover { background: var(--blu-tenue); }
.riga-nomi .nome-riga.evidenziata { background: var(--evidenza); }
.riga-nomi .nome-riga.selezionata { background: var(--blu-tenue); box-shadow: inset 3px 0 0 var(--blu); font-weight: 600; color: var(--inchiostro); }
.nome-riga:focus-visible { outline-offset: -2px; border-radius: 0; }
.testo-nome { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.testa-nomi { display: flex; align-items: flex-start; padding: 4px 14px 0; border-bottom: 1px solid var(--linea); }
.testa-nomi span { font-size: 11px; font-weight: 600; color: var(--tenue); }
.nome-riga.attivita .testo-nome { color: var(--inchiostro); }
.scorre { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #b7c0cc transparent; }
.scorre::-webkit-scrollbar { height: 12px; }
.scorre::-webkit-scrollbar-track { background: #f1f3f6; border-top: 1px solid var(--linea); }
.scorre::-webkit-scrollbar-thumb { background: #b7c0cc; border-radius: 6px; border: 3px solid #f1f3f6; }
.scorre::-webkit-scrollbar-thumb:hover { background: #8f9aa8; }
.scorre svg { display: block; }

/* ---------- Pannello ---------- */
.pannello {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
  padding: 18px; position: relative;
}
.pannello:focus { outline: none; }
.pannello h2 { font-size: 16px; line-height: 1.3; }
.date { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 13px; }
.date dt { color: var(--tenue); }
.date dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--inchiostro); }
.campi-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.anteprima { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.anteprima > p { margin: 0 0 8px; }
.spostamenti { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; font-size: 13px; }
.spostamenti li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 0; border-bottom: 1px solid var(--linea);
}
.spostamenti li:last-child { border-bottom: 0; }
.nome-spost { grid-column: 1 / -1; color: var(--inchiostro); }
.date-spost { color: var(--tenue); font-variant-numeric: tabular-nums; }
.delta { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; justify-self: end; }
.delta.piu { color: var(--critico); }
.delta.meno { color: var(--ok); }

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none;
  max-width: 280px; padding: 10px 12px; border-radius: 8px;
  background: var(--inchiostro); color: #eef2f7; font-size: 12px; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(23, 32, 43, .22);
}
.tooltip[hidden] { display: none; }
.tooltip strong { display: block; color: #fff; font-size: 13px; margin-bottom: 6px; }
.tooltip dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
.tooltip dt { color: #a9b6c6; }
.tooltip dd { margin: 0; font-variant-numeric: tabular-nums; }
.tooltip p { margin: 6px 0 0; color: #f3cf8e; }

/* ---------- SVG del Gantt ---------- */
#gantt { font-family: inherit; }
.riga-alterna { fill: #fafbfc; }
.griglia { stroke: #eceff3; } .griglia.anno { stroke: var(--linea-forte); }
.bordo-testa { stroke: var(--linea); }
.mese { font-size: 11px; fill: var(--tenue); }
.mese.anno { font-weight: 700; fill: var(--inchiostro); }
.oggi { stroke: var(--critico); stroke-width: 1.5; stroke-dasharray: 4 3; }
.oggi-fondo { fill: var(--critico); }
.oggi-etichetta { font-size: 9px; font-weight: 700; fill: #fff; text-transform: uppercase; letter-spacing: .06em; }
/* DSAN (spec §41.2): avvio dichiarato, linea piena blu accanto al tratteggio rosso di «oggi» */
.dsan-linea { stroke: var(--blu); stroke-width: 1.5; }
.dsan-fondo { fill: var(--blu); }
.dsan-etichetta { font-size: 9px; font-weight: 700; fill: #fff; letter-spacing: .06em; }
.dsan { cursor: help; }
.legenda .linea-dsan { display: inline-block; width: 2px; height: 12px; background: var(--blu); vertical-align: middle; }
.fascia { opacity: .5; }
.fascia.critico { fill: var(--critico-tenue); }
.fascia.attenzione { fill: var(--attenzione-tenue); }
.fascia.informazione { fill: none; }
.nastro { cursor: help; }
.nastro.critico { fill: #e99a91; }
.nastro.attenzione { fill: #e8b766; }
.nastro.informazione { fill: #9dbbe3; }
.sfondo-riga { fill: transparent; }
.riga { cursor: pointer; }
.riga:hover .sfondo-riga { fill: rgba(47, 111, 176, .06); }
.riga.evidenziata .sfondo-riga { fill: rgba(255, 214, 102, .35); }
.riga.selezionata .sfondo-riga { fill: rgba(47, 111, 176, .1); }
.effettiva { fill: var(--blu); }
.presumibile { fill: #fff; stroke: var(--blu); stroke-width: 2; }
.teorica { fill: none; stroke: #7b8694; stroke-width: 1.25; stroke-dasharray: 2 2; }
.data-tappa { font-size: 11px; fill: var(--tenue); font-variant-numeric: tabular-nums; }
.barra { fill: #5a7ba3; }
.riga:hover .barra, .riga.selezionata .barra { fill: var(--blu); }
.approvvigionamento { stroke: var(--attenzione); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ordine { fill: var(--attenzione); }
/* Integrazioni (spec §37): barra richiesta → risposta; vuota e tratteggiata fino al termine mentre si aspetta.
   La sospensione è una banda tenue sulla riga dell'esito, sotto i rombi. */
.barra-integrazione { fill: var(--integrazione); }
.barra-integrazione.aperta { fill: var(--superficie); stroke: var(--integrazione); stroke-width: 1.5; stroke-dasharray: 4 3; }
.integrazione-richiesta { fill: var(--integrazione); stroke: var(--superficie); stroke-width: 1; }
.riga:hover .barra-integrazione:not(.aperta), .riga.selezionata .barra-integrazione:not(.aperta) { fill: #4a5f7a; }
.banda-sospensione { fill: var(--sospensione); stroke: var(--integrazione); stroke-width: .75; stroke-dasharray: 2 2; cursor: help; }

/* ---------- Preparazione della domanda ---------- */
.obiettivo {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
  padding: 14px 18px; margin-bottom: 16px;
}
.obiettivo-data { display: flex; flex-direction: column; gap: 2px; }
.obiettivo-data strong { font-size: 22px; color: var(--inchiostro); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.etichetta-piccola { font-size: 12px; font-weight: 600; color: var(--tenue); }
.conteggi { display: flex; gap: 6px; margin-top: 4px; }
.margine-invio { font-size: 13px; font-weight: 600; color: var(--ok); font-variant-numeric: tabular-nums; }
.riepilogo-profilo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; padding-top: 10px;
  border-top: 1px solid var(--linea); font-size: 13px; color: var(--testo); overflow-wrap: anywhere;
}
.riepilogo-profilo button.link { font-size: 13px; }
.profilo {
  border: 0; margin: 0; padding: 0;
  min-width: 0; /* un fieldset è largo almeno quanto il contenuto: senza, le caselle allargano la pagina */
}
.spunta { white-space: nowrap; }
.spunta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.spunta input { width: 16px; height: 16px; min-height: 0; accent-color: var(--blu); }
.chip.critica { color: #fff; background: var(--critico); }
.chip.in_ritardo { color: var(--critico); background: var(--critico-tenue); }
.avviso { margin: 0 0 12px; padding: 8px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.avviso.critica { color: #fff; background: var(--critico); }
.avviso.in_ritardo { color: var(--critico); background: var(--critico-tenue); }
.avviso.attenzione { color: var(--testo); background: var(--attenzione-tenue); border: 1px solid color-mix(in srgb, var(--attenzione) 40%, transparent); font-weight: 400; }
.modificati-dopo p { margin: 0 0 4px; }
.modificati-dopo ul { margin: 0; padding-left: 18px; }
.stati-prep { display: inline-flex; padding: 3px; background: #e7eaef; border-radius: 8px; margin-bottom: 14px; }
.stati-prep button { min-height: 28px; padding: 0 12px; background: transparent; color: var(--tenue); }
.stati-prep button.attivo { background: var(--superficie); color: var(--blu); box-shadow: 0 1px 2px rgba(23, 32, 43, .12); }
.piccolo { font-size: 12px; margin: 6px 0 0; }
button.link, a.link, .tabella td a.link {
  display: inline; min-height: 0; padding: 0; border: 0; background: none;
  color: var(--blu); font-weight: 600; font-size: 12px; text-decoration: underline; text-underline-offset: 2px;
}
button.link:hover, a.link:hover { color: var(--focus); }
.pannello h3 { font-size: 13px; margin: 16px 0 6px; color: var(--inchiostro); }
.documenti { margin: 0; padding-left: 18px; font-size: 13px; }
.documenti li { margin-bottom: 2px; }
.nota { font-size: 13px; color: var(--tenue); background: #f7f8fa; border-radius: 6px; padding: 8px 10px; margin: 12px 0 0; }
/* Istruttoria (spec §37): come nasce la data dell'esito, ritardo tipico, pannello dell'integrazione */
.spiega-date { margin: -6px 0 16px; padding: 8px 10px; background: var(--fondo); border-radius: 6px; }
.spiega-data { margin: 0; font-size: 12px; line-height: 1.45; color: var(--tenue); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.spiega-data + .spiega-data { margin-top: 2px; }
.riga-ritardo { margin: 0 0 16px; padding-top: 12px; border-top: 1px solid var(--linea); }
.riga-ritardo .date { margin: 0 0 4px; }
.editor-ritardo { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 10px 12px; background: var(--fondo); border-radius: 6px; }
.editor-ritardo[hidden] { display: none; }
.editor-ritardo .campo { max-width: 260px; }
.editor-ritardo .azioni { margin-top: 0; }
.editor-ritardo .anteprima { margin-top: 4px; }
.nota-dm { margin: -4px 0 12px; font-size: 12px; font-weight: 600; color: var(--attenzione); }
.stato-integrazione.scaduta { color: var(--critico); font-weight: 600; }
.nota-integrazione { margin: 0; font-size: 13px; color: var(--testo); overflow-wrap: anywhere; white-space: pre-line; }
.nota-anteprima { font-size: 13px; font-weight: 600; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
#int-nota {
  width: 100%; min-height: 56px; resize: vertical; padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.45;
  border: 1px solid var(--linea-forte); border-radius: 6px; background: var(--superficie); color: var(--testo);
}
#int-nota:hover { border-color: #aab4c1; }
#int-nota:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.campi-integrazione { display: flex; flex-direction: column; gap: 12px; }
.campi-integrazione .aiuto-campo { line-height: 1.4; }
.campi-integrazione > .aiuto-campo { margin-top: -8px; font-size: 12px; font-weight: 400; color: var(--tenue); }
.sigla {
  flex: none; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 18px; padding: 0 5px;
  border-radius: 4px; color: var(--tenue); background: #eef1f5;
}
.sigla.sc, .sigla.impresa_sc { color: var(--blu); background: var(--blu-tenue); }
.sigla.tecnico { color: #5b3e8a; background: #f0eafa; }
.sigla.banca { color: #0b5d63; background: #e3f4f4; }
.sigla.fornitori { color: #5a5f12; background: #f1f3dc; }
.sigla.invitalia { color: #8a4b08; background: #fdf1e3; }
.sigla.regione { color: #1e6b3a; background: #e6f4ea; }
.sigla.ministero { color: #6b2c5f; background: #f7e8f3; }
.segni { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.nome-riga.stato-fatto .testo-nome { color: var(--tenue); text-decoration: line-through; text-decoration-color: #b7c0cc; }
/* Attività escluse (a mano o dal profilo, spec §28.2): nome barrato e in grigio, nessuna barra, etichetta del motivo */
.nome-riga.stato-non_serve .testo-nome, .nome-riga.esclusa .testo-nome {
  color: var(--tenue); font-style: italic; text-decoration: line-through; text-decoration-color: #9aa5b3;
}
.nome-riga.esclusa .sigla { opacity: .5; }
.etichetta-esclusa { font-size: 11px; font-style: italic; fill: var(--tenue); }
.campione-esclusa { font-size: 12px; font-style: italic; color: var(--tenue); text-decoration: line-through; text-decoration-color: #9aa5b3; }
.nota-esclusa { margin: 12px 0; padding: 8px 10px; font-size: 13px; color: var(--testo); background: #f7f8fa;
  border-left: 3px solid var(--linea-forte); border-radius: 0 6px 6px 0; }
.nota-esclusa p { margin: 0; }
.nota-esclusa p + p { margin-top: 2px; color: var(--tenue); }
.etichetta-esclusa-dettaglio { font-weight: 600; color: var(--testo); }
.campo-stato > button.escludi { align-self: flex-start; font-size: 13px; margin-top: 2px; }
.valore-esclusa { color: var(--tenue); font-style: italic; }
.campo > #riattiva-el { align-self: flex-start; }
.nota-tappe { margin: -4px 0 12px; font-size: 13px; color: var(--testo); }
.campione.prep-non_serve { background: transparent; border: 1px dashed var(--linea-forte); }
.nome-riga.allerta-in_ritardo, .nome-riga.allerta-critica { box-shadow: inset 3px 0 0 var(--critico); }
.campione.prep-da_fare { background: #7d95b3; }
.campione.prep-in_corso { background: var(--blu); }
.campione.prep-fatto { background: #43a06d; }
.campione.prep-ritardo { background: #fff; border: 2px solid var(--critico); }
.barra-prep.da_fare { fill: #7d95b3; }
.barra-prep.in_corso { fill: var(--blu); }
.barra-prep.fatto { fill: #43a06d; }
.barra-prep.in_ritardo, .barra-prep.critica { stroke: var(--critico); stroke-width: 2; }
.barra-prep.critica { fill: #f2c4bf; }
/* anticipata: filo puntinato dalla scadenza del piano alla tacca dell'ultimo giorno utile */
.ultimo-utile-filo { stroke: #8a96a6; stroke-width: 1; stroke-dasharray: 1.5 3; stroke-linecap: round; }
.ultimo-utile-tacca { stroke: #5b6674; stroke-width: 1.5; stroke-linecap: round; }
.invio { fill: var(--critico); }
.barra-riepilogo { fill: #2b3f5c; }
.barra-riepilogo.fatto { fill: #2d6b4a; }
.barra-riepilogo.non_serve { fill: #9aa5b3; }
.sforamento { fill: var(--critico); opacity: .85; }
.etichetta-sforamento { fill: var(--critico); font-size: 11px; font-weight: 600; }
.lucchetto { fill: var(--blu); fill-rule: evenodd; }
.freccia-linea { fill: none; stroke: #6b7f99; stroke-width: 1.4; stroke-opacity: .8; }
.freccia-punta { fill: #6b7f99; fill-opacity: .9; }
.freccia { pointer-events: none; }
.nome-riga.madre { padding-left: 30px; }
.nome-riga.livello-1 { padding-left: 44px; }
.toggle-figlie { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 1; width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--tenue); font-size: 13px; line-height: 1; cursor: pointer; }
.toggle-figlie:hover { color: var(--inchiostro); background: var(--linea); }
.toggle-figlie:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nome-riga .segno-personale { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--info); margin-left: 6px; flex: none; }

/* ---------- Schermi stretti ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .nuova-pratica .campi { grid-template-columns: 1fr 1fr; }
  .nuova-pratica .campo.largo { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  main { padding: 16px; }
  /* testata su più righe: logo, voci e utente restano dentro lo schermo (390 px) */
  .testata { flex-wrap: wrap; height: auto; gap: 4px 16px; padding: 8px 16px; }
  .testata nav { height: auto; flex-wrap: wrap; min-width: 0; }
  .testata nav a { padding: 6px 10px; }
  .utente { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
  .gantt { grid-template-columns: 150px minmax(0, 1fr); }
  .nome-riga { font-size: 12px; padding: 0 8px 0 10px; }
  .nuova-pratica .campi { grid-template-columns: 1fr; }
  .nuova-pratica .campi button { width: 100%; }
  .tabella thead { display: none; }
  .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; }
  .tabella tr { border-bottom: 1px solid var(--linea); padding: 8px 0; }
  .tabella td { border: 0; padding: 2px 14px; }
  .legenda { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Avvisi ---------- */
.colonna-destra { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.avvisi { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 14px 14px 10px; }
.testa-avvisi { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.testa-avvisi h2 { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.interruttore { font-size: 12px; color: var(--tenue); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.lista-avvisi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.lista-avvisi .avviso { all: unset; box-sizing: border-box; display: grid; gap: 2px; width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--linea); background: var(--fondo); cursor: pointer; font-size: 13px; }
.lista-avvisi .avviso:hover { background: var(--blu-tenue); }
.lista-avvisi .avviso:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.lista-avvisi .avviso.critico { border-color: color-mix(in srgb, var(--critico) 30%, transparent); background: var(--critico-tenue); }
.lista-avvisi .avviso.attenzione { border-color: color-mix(in srgb, var(--attenzione) 30%, transparent); background: var(--attenzione-tenue); }
.lista-avvisi .avviso .gravita { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.lista-avvisi .avviso.critico .gravita { color: var(--critico); }
.lista-avvisi .avviso.attenzione .gravita { color: var(--attenzione); }
.scheda-avviso { font-size: 11px; color: var(--tenue); }
.badge-critico { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: var(--critico); border-radius: 999px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.vuoto.piccolo { font-size: 13px; margin: 4px 0; }

/* ---------- Assistente ---------- */
.chat { position: fixed; top: 52px; right: 0; bottom: 0; width: min(var(--larghezza-chat, 440px), 100vw); z-index: 30; display: flex; flex-direction: column; background: var(--superficie); border-left: 1px solid var(--linea); box-shadow: -8px 0 24px rgba(23, 32, 43, .08); }
.chat[hidden] { display: none; }
.testa-chat { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
.titolo-chat { flex: none; min-width: 0; max-width: 150px; }
.titolo-chat h2 { margin: 0; }
.sottotitolo-chat { margin: 2px 0 0; font-size: 12px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testa-chat select { flex: 1; min-width: 0; }
.messaggi { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 100%; font-size: 14px; line-height: 1.5; }
.msg.user { align-self: flex-end; background: var(--blu-tenue); border-radius: 10px 10px 2px 10px; padding: 8px 12px; max-width: 85%; }
.msg.user p { margin: 0; white-space: pre-wrap; }
.msg.assistant p, .msg.assistant ul, .msg.assistant ol { margin: 0 0 8px; }
.msg.assistant h3, .msg.assistant h4, .msg.assistant h5 { font-size: 14px; margin: 10px 0 6px; }
.msg table, .pagina-wiki table { border-collapse: collapse; font-size: 13px; margin: 6px 0 10px; }
.msg th, .msg td, .pagina-wiki th, .pagina-wiki td { border: 1px solid var(--linea); padding: 4px 8px; text-align: left; vertical-align: top; }
.msg code, .pagina-wiki code { background: var(--fondo); border-radius: 4px; padding: 0 4px; font-size: 12.5px; }
a.wiki { text-decoration-style: dotted; }
.stato-msg { font-size: 12px; color: var(--tenue); font-style: italic; margin: 4px 0 0; }
.suggerimento, .avviso-chat { font-size: 13px; color: var(--tenue); }
.avviso-chat { color: var(--attenzione); background: var(--attenzione-tenue); border-radius: 6px; padding: 8px 10px; }
.domanda { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--linea); }
/* Casella a tutta larghezza; sotto, graffetta e microfono a sinistra e Invia a destra. */
.riga-domanda { display: flex; gap: 8px; align-items: center; min-width: 0; }
/* Una riga da vuota, cresce col testo (app.js) fino a 40vh, poi scorre. */
.domanda textarea { width: 100%; min-width: 0; resize: none; height: 44px; min-height: 44px; max-height: 40vh; overflow-y: auto; font: inherit; font-size: 14px; line-height: 1.45; padding: 10px; border: 1px solid var(--linea-forte); border-radius: 6px; }
.riga-domanda .primario { height: 44px; flex: none; margin-left: auto; }
.tasto-domanda { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--superficie); color: var(--tenue); border: 1px solid var(--linea-forte); border-radius: 6px; cursor: pointer; }
.tasto-domanda svg { width: 20px; height: 20px; }
.tasto-domanda:hover:not(:disabled) { color: var(--inchiostro); border-color: var(--tenue); background: var(--fondo); }
.tasto-domanda:disabled { opacity: .45; cursor: default; }
.tasto-domanda.in-ascolto { color: var(--critico); border-color: var(--critico); background: var(--critico-tenue); animation: in-ascolto 1.2s ease-in-out infinite; }
@keyframes in-ascolto { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .tasto-domanda.in-ascolto { animation: none; } }
.allegati-attesa { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip-allegato { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 4px 4px 8px; border: 1px solid var(--linea-forte); border-radius: 6px; background: var(--fondo); font-size: 12.5px; line-height: 1.3; }
.chip-allegato > svg { flex: none; width: 14px; height: 14px; color: var(--tenue); }
.testo-allegato { display: flex; flex-direction: column; min-width: 0; }
.nome-allegato { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--inchiostro); }
.dettaglio-allegato { color: var(--tenue); font-size: 11.5px; }
.chip-allegato.stato-caricamento .dettaglio-allegato { font-style: italic; }
.chip-allegato.stato-errore { border-color: var(--critico); background: var(--critico-tenue); }
.chip-allegato.stato-errore .dettaglio-allegato, .chip-allegato.stato-errore > svg { color: var(--critico); }
.chip-allegato .togli-allegato { width: 28px; height: 28px; }
.chip-allegato .togli-allegato svg { width: 14px; height: 14px; }
.icona:disabled { opacity: .45; cursor: default; }
.allegati-msg { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; padding: 6px 0 0; list-style: none; border-top: 1px solid rgba(31, 58, 95, .15); font-size: 12.5px; color: var(--tenue); }
.allegati-msg li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.allegati-msg svg { flex: none; width: 13px; height: 13px; }
.allegati-msg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagina-wiki { width: min(760px, calc(100vw - 32px)); height: min(80vh, 880px); min-width: min(360px, calc(100vw - 16px)); min-height: 240px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); padding: 0; border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: 0 12px 40px rgba(23, 32, 43, .18); resize: both; overflow: hidden; }
.pagina-wiki[open] { display: flex; flex-direction: column; }
.pagina-wiki::backdrop { background: rgba(23, 32, 43, .35); }
.pagina-wiki .contenuto { flex: 1; min-height: 0; overflow: auto; padding: 16px 24px 28px; font-size: 14px; line-height: 1.55; overscroll-behavior: contain; }
.pagina-wiki .contenuto > :first-child { margin-top: 0; }
.testa-wiki { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 12px 24px; border-bottom: 1px solid var(--linea); background: var(--superficie); }
.titolo-wiki { flex: 1; min-width: 0; }
.titolo-wiki p { margin: 0 0 2px; font-size: 12px; color: var(--tenue); }
.titolo-wiki h2 { margin: 0; font-size: 16px; line-height: 1.35; text-wrap: balance; }

.icona { all: unset; box-sizing: border-box; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; cursor: pointer; border-radius: 6px; color: var(--tenue); }
.icona svg { width: 18px; height: 18px; }
.icona:hover { background: var(--fondo); color: var(--inchiostro); }
.icona:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pagina-wiki .fonti { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linea); }
.pagina-wiki .fonti h3 { font-size: 13px; margin: 0 0 6px; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.pagina-wiki .fonti ul { margin: 0; padding-left: 18px; }
a.citazione { text-decoration-style: dotted; }

.nota-chat { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; background: var(--critico-tenue); color: var(--critico); font-size: 13px; border-bottom: 1px solid var(--linea); }
.nota-chat span { flex: 1; }

/* ---------- Intestazione della pratica, compatta ---------- */
.testa-pratica { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 0 0 12px; }
.identita { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; flex: 1 1 360px; }
.testa-pratica .comandi-pratica { flex: 0 1 auto; min-width: 0; }
.briciola { font-size: 13px; color: var(--tenue); text-decoration: none; }
.briciola:hover { color: var(--blu); text-decoration: underline; }
.identita .sep { font-size: 13px; color: var(--linea-forte); }
.identita h1 { font-size: 19px; }
.identita .meta { display: flex; flex-wrap: wrap; gap: 2px 0; min-width: 0; margin-left: 6px; }
.identita .meta span + span::before { content: "·"; display: inline; width: auto; height: auto; background: none; border-radius: 0; margin: 0 8px; color: var(--linea-forte); }
button.con-icona { display: inline-flex; align-items: center; gap: 8px; flex: none; }
button.con-icona svg { width: 16px; height: 16px; }
#apri-chat[aria-expanded="true"] { background: var(--blu-tenue); border-color: var(--blu); }

/* ---------- Cassetto chat ridimensionabile ---------- */
.maniglia { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; cursor: col-resize; touch-action: none; z-index: 1; }
.maniglia::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background-color .15s ease-out; }
.maniglia:hover::after, .maniglia.attiva::after, .maniglia:focus-visible::after { background: var(--focus); }
.maniglia:focus-visible { outline: none; }
body.ridimensiona { cursor: col-resize; user-select: none; }
@media (min-width: 1101px) {
  body.chat-aperta main { max-width: none; margin: 0 var(--larghezza-chat, 440px) 0 0; }
}
@media (max-width: 640px) {
  .testa-pratica { gap: 8px; }
  .identita h1 { font-size: 17px; flex-basis: 100%; order: 1; }
  .identita .meta { order: 2; margin-left: 0; font-size: 12px; max-width: 100%; }
  #apri-chat { justify-self: start; }
  .chat { width: 100vw; }
  .nome-allegato { max-width: 52vw; }
  .chip-allegato .togli-allegato { width: 40px; height: 40px; }
  .maniglia { display: none; }
  .testa-wiki { padding-left: 16px; }
  .pagina-wiki .contenuto { padding: 14px 16px 24px; }
}
.pagina-wiki .contenuto:focus { outline: none; }


/* ---------- Amministrazione ---------- */
.amministrazione { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; min-width: 0; }
.amministrazione .pannello { position: static; }
.amministrazione .azioni { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
@media (min-width: 1101px) {  /* sotto valgono le colonne di .nuova-pratica .campi (2 fino a 1100 px, 1 sotto 640) */
  .amministrazione .campi { grid-template-columns: 2fr 2fr 1.2fr auto; }
}
.amministrazione .tabella td, .amministrazione .pannello, .amministrazione details, .amministrazione form,
.riquadro-password { min-width: 0; overflow-wrap: anywhere; }
.amministrazione input, .amministrazione select { max-width: 100%; }
.badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--blu-tenue); color: var(--blu); font-size: 11px; font-weight: 600;
}
.riquadro-password {
  background: var(--blu-tenue); border: 1px solid var(--blu); border-radius: var(--raggio); padding: 12px 16px;
}
.riquadro-password p { margin: 0 0 8px; }
.riga-password { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.password-temporanea { font-family: monospace; width: 22ch; max-width: 100%; }
.esito-rifiutata td, .esito-errore td { color: var(--critico); background: var(--critico-tenue); }
.avviso-costi { color: var(--attenzione); background: var(--attenzione-tenue); padding: 6px 10px; border-radius: var(--raggio); }
.filtri { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.pagine { display: flex; gap: 1rem; align-items: center; margin-top: 8px; }
.scorri-x { overflow-x: auto; max-width: 100%; }
.amministrazione .esito:empty { display: none; }
@media (max-width: 640px) {
  .amministrazione .campi { grid-template-columns: 1fr; }
  .permessi { grid-template-columns: minmax(0, 1fr); }
  .filtri .campo, .filtri input, .filtri select { width: 100%; }
}
a.secondario {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  min-height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--linea-forte);
  background: var(--superficie); color: var(--blu); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap;
}
a.secondario:hover { border-color: var(--blu); color: var(--blu); }

.fascia-archivio { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 14px; background: var(--inchiostro); color: var(--superficie); font-size: 14px; }
.fascia-archivio > .comandi-archivio { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.fascia-archivio :focus-visible { outline-color: #fff; }
/* «Elimina definitivamente» sulla fascia scura: contorno e testo rosa chiaro (lo stesso di .utente .errore), meno evidente di «Ripristina». */
.fascia-archivio button.secondario.pericolo { background: transparent; color: #ffb4a8; border-color: rgba(255, 180, 168, .45); }
.fascia-archivio button.secondario.pericolo:hover:not(:disabled) { background: rgba(255, 180, 168, .12); border-color: #ffb4a8; }

/* ---------- Utente in testata e «Il mio account» ---------- */
.voce-utente {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 12px 3px 3px;
  border: 1px solid transparent; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600;
  transition: background-color .12s, border-color .12s;
}
.voce-utente:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.voce-utente[aria-current] { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
#nome-utente { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iniziali {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: #d3deec; color: var(--blu); font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.iniziali.grande { width: 56px; height: 56px; font-size: 19px; background: var(--blu-tenue); }
.account { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.account .intestazione { margin: 0; }
.account .pannello { position: static; }
.scheda-account { display: flex; align-items: center; gap: 20px; }
.dati-account { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 24px; margin: 0; }
.dati-account dt { color: var(--tenue); font-size: 13px; }
.dati-account dd { margin: 0; color: var(--inchiostro); overflow-wrap: anywhere; }
.elenco-permessi {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 12px 28px;
}
.elenco-permessi li { position: relative; display: flex; flex-direction: column; gap: 1px; padding-left: 16px; }
.elenco-permessi li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
}
.elenco-permessi strong { color: var(--inchiostro); font-weight: 600; }
.elenco-permessi .tenue { font-size: 13px; }
.modulo-password { display: flex; flex-direction: column; gap: 14px; max-width: 380px; }
.modulo-password h2, .modulo-password p { margin: 0; }
.modulo-password label, .ingresso label { font-size: 13px; font-weight: 600; color: var(--inchiostro); }
.modulo-password label .tenue, .ingresso label .tenue { font-weight: 400; }
.modulo-password button[type="submit"] { align-self: flex-start; }
.riuscito { color: var(--ok); margin: 0; }
.riuscito:empty { display: none; }

/* campo password con il pulsante «mostra»: si nasconde quello nativo di Edge per non averne due */
.campo-password { position: relative; }
.campo-password input { padding-right: 44px; }
.campo-password input::-ms-reveal, .campo-password input::-ms-clear { display: none; }
.mostra-password {
  position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
  width: 36px; min-height: 0; height: 28px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--tenue);
}
.mostra-password:hover { color: var(--blu); background: var(--blu-tenue); }
.mostra-password[aria-pressed="true"] { color: var(--blu); }
.mostra-password svg { width: 18px; height: 18px; }

/* ---------- Amministrazione: rifinitura ---------- */
.amministrazione .nuova-pratica { margin-bottom: 0; }
.nuovo-utente .piccolo { margin: 10px 0 0; }
.amministrazione .tabella td { vertical-align: middle; }
.amministrazione .tabella .azioni { margin-top: 0; gap: 4px 14px; }
.chi strong { margin-right: 6px; color: var(--inchiostro); }
.chi .badge { margin: 0 4px 0 0; vertical-align: 1px; }
.ruolo-fisso { color: var(--inchiostro); }
.chip.stato-attivo { color: var(--ok); background: var(--ok-tenue); }
.chip.stato-da-cambiare { color: var(--attenzione); background: var(--attenzione-tenue); }
.chip.stato-disattivato { color: var(--tenue); background: #eef1f5; }
.tabella tr.spento td { color: var(--tenue); }

.ruolo-blocco { padding: 0; overflow: hidden; }
.ruolo-blocco > summary {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px 14px 42px; cursor: pointer; list-style: none;
}
.ruolo-blocco > summary::-webkit-details-marker { display: none; }
.ruolo-blocco > summary::before {
  content: ""; position: absolute; left: 19px; top: 21px; width: 7px; height: 7px;
  border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue);
  transform: rotate(-45deg); transition: transform .15s ease-out;
}
.ruolo-blocco[open] > summary::before { transform: rotate(45deg); top: 18px; }
.ruolo-blocco > summary:hover { background: #f8fafc; }
.ruolo-blocco[open] > summary { border-bottom: 1px solid var(--linea); }
.ruolo-blocco > summary:focus-visible { outline-offset: -2px; }
.testa-ruolo { display: flex; align-items: center; gap: 10px; color: var(--inchiostro); }
.descrizione-ruolo { font-size: 13px; }
.ruolo-blocco form.ruolo { display: flex; flex-direction: column; gap: 18px; padding: 16px 18px 18px; }
.ruolo-blocco > .parti-da { padding: 16px 18px 0; max-width: 360px; }
.campi-ruolo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.permessi {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px;
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.permessi legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--tenue); }
.gruppo-permessi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gruppo-permessi h3 { margin: 0 0 4px; font-size: 13px; color: var(--inchiostro); }
.casella { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; margin-left: -8px; border-radius: 6px; cursor: pointer; }
.casella:hover { background: #f5f7fa; }
.casella input[type="checkbox"] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--blu); }
.casella > span { display: flex; flex-direction: column; min-width: 0; }
.casella strong { font-size: 13px; font-weight: 600; color: var(--inchiostro); }
.casella small { font-size: 12px; line-height: 1.4; }
fieldset:disabled .casella { cursor: default; }
fieldset:disabled .casella:hover { background: none; }
.comandi-ruolo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
button.link.pericolo { color: var(--critico); }
button.link.pericolo:hover { color: #8f1c13; }
/* Eliminare una pratica (spec §38.1): «Elimina» pieno rosso, spento finché il nome non coincide. */
button.pericolo-pieno { background: var(--critico); color: #fff; border-color: var(--critico); }
button.pericolo-pieno:hover:not(:disabled) { background: #8f1c13; border-color: #8f1c13; }
button.pericolo-pieno:disabled { opacity: .45; cursor: not-allowed; }
button.pericolo-pieno[aria-busy="true"] { opacity: .75; cursor: progress; }
button.secondario.pericolo { color: var(--critico); }
button.secondario.pericolo:hover:not(:disabled) { background: var(--critico-tenue); border-color: var(--critico); }
.dialogo-elimina { width: min(480px, calc(100vw - 32px)); }
.dialogo-elimina .corpo-esporta > p { max-width: 65ch; }
.corpo-esporta > .avviso-elimina { margin: 0 0 8px; }
.corpo-esporta > .campo { margin-top: 18px; }
.corpo-esporta > #elimina-nome-atteso { margin: 6px 0 0; overflow-wrap: anywhere; }
.corpo-esporta > #elimina-errore { margin: 12px 0 0; }
.dialogo-elimina .nome-esatto { white-space: pre-wrap; }  /* spazi doppi, iniziali e finali visibili: si riscrivono */
.azioni-elimina { justify-content: flex-end; margin-top: 20px; }
.messaggio-elenco { margin: 0 0 12px; outline: none; }
@media (max-width: 480px) {
  .azioni-elimina { flex-direction: column; align-items: stretch; }
  .azioni-elimina button { min-height: 40px; }
  .fascia-archivio > .comandi-archivio { margin-left: 0; }
}
/* «Copia pratica» (Piano 23): stesso impianto del dialogo «Elimina», azione primaria blu a destra. */
.dialogo-copia { width: min(480px, calc(100vw - 32px)); }
.dialogo-copia .corpo-esporta > p { max-width: 65ch; }
.corpo-esporta > #copia-spiega { margin: 0 0 4px; line-height: 1.5; }
.corpo-esporta > #copia-nota { margin: 6px 0 0; }
.corpo-esporta > #copia-errore { margin: 12px 0 0; }
/* vuoto resta nel documento (niente display:none), così il messaggio scritto dopo si annuncia */
.corpo-esporta > #copia-errore:empty { margin: 0; }
.azioni-copia { justify-content: flex-end; margin-top: 20px; }
.dialogo-copia input[aria-invalid="true"] { border-color: var(--critico); }
.primario[aria-busy="true"] { opacity: .75; cursor: progress; }
/* «Copia creata: «…»» in testa alla copia appena aperta */
.messaggio-pratica { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; background: var(--ok-tenue); border-radius: var(--raggio); outline: none; overflow-wrap: anywhere; }
.messaggio-pratica svg { width: 16px; height: 16px; flex: none; }
/* «Nome della pratica» in testa alle Impostazioni: il campo prende la riga, «Salva nome» accanto */
.riga-obiettivo.riga-nome-pratica .campo-nome-pratica { flex: 1 1 260px; min-width: 0; }
.nome-in-lettura { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .azioni-copia { flex-direction: column; align-items: stretch; }
  .azioni-copia button { min-height: 40px; }
}
.nota-ruolo { margin: 0; }

.costi .totale-costi { margin: 0 0 12px; color: var(--inchiostro); }
.costi .tabella { margin-bottom: 8px; }
.costi .piccolo { margin: 0; }
.vuoto { margin: 0 0 8px; color: var(--tenue); }
.vuoto.pannello { margin: 0; padding: 28px 18px; text-align: center; }
.filtri .esporta { margin-left: auto; }

@media (max-width: 1100px) {
  .permessi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .scheda-account { flex-direction: column; align-items: flex-start; gap: 14px; }
  .campi-ruolo, .permessi { grid-template-columns: minmax(0, 1fr); }
  .comandi-ruolo { flex-wrap: wrap; }
  .filtri .esporta { margin-left: 0; width: 100%; }
  .amministrazione .tabella tr { padding: 10px 0; }
  .amministrazione .tabella td {
    display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 10px; align-items: center; padding: 3px 14px;
  }
  .amministrazione .tabella td:not([data-etichetta]) { display: block; padding-bottom: 6px; }
  .amministrazione .tabella td[data-etichetta]::before {
    content: attr(data-etichetta); font-size: 12px; font-weight: 600; color: var(--tenue);
  }
  .amministrazione .tabella td select { width: 100%; }
}
/* le voci nascoste della testata restano nascoste: «display: flex» dei link non deve vincere su [hidden] */
.testata nav a[hidden] { display: none; }
.filtri .esporta { align-self: flex-end; }
@media (max-width: 640px) {
  .amministrazione .tabella td .chip { justify-self: start; }
  .amministrazione .scorri-x .tabella td { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* ---------- Pagina «Regole» ---------- */
.pagina-regole { max-width: 980px; }
.pagina-regole .sottotitolo { margin: 0 0 16px; }
.barra-regole { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 8px; }
.barra-regole .stati-prep { margin: 0; }
.legenda-regole { margin: 0; font-size: 13px; }
.fase-regole { margin-top: 28px; }
.fase-regole h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 10px; }
.elenco-regole {
  list-style: none; margin: 0; padding: 0;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
}
.voce-regola { padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.voce-regola:last-child { border-bottom: 0; }
.testa-voce { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.testa-voce h3 { margin: 0; font-size: 14px; line-height: 1.4; color: var(--inchiostro); text-wrap: balance; }
.testa-voce .chip { flex: none; }
.spiegazione { margin: 6px 0 10px; max-width: 75ch; color: var(--testo); }
.fatti-regola { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; font-size: 13px; }
.fatti-regola div { display: flex; gap: 6px; }
.fatti-regola dt { color: var(--tenue); }
.fatti-regola dd { margin: 0; color: var(--inchiostro); font-weight: 600; }
.tecnico { margin-top: 10px; font-size: 12px; }
.tecnico summary { display: inline-block; color: var(--tenue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tecnico summary:hover { color: var(--blu); }
.tecnico summary::-webkit-details-marker { display: none; }
.tecnico[open] summary { margin-bottom: 6px; }
.tecnico dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; padding: 10px 12px; background: #f8fafc; border-radius: 6px; }
.tecnico dt { color: var(--tenue); }
.tecnico dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .testa-voce { flex-direction: column; gap: 6px; }
  .fatti-regola { flex-direction: column; }
  .voce-regola { padding: 14px; }
}

/* ---------- Pagina «Guida» ---------- */
.pagina-guida { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; max-width: 1040px; }
.indice-guida { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.apri-indice { display: none; }
.elenco-guida input[type="search"] { margin-bottom: 14px; }
.gruppo-guida + .gruppo-guida { margin-top: 18px; }
.gruppo-guida h2 { margin: 0 0 6px; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.gruppo-guida ul { list-style: none; margin: 0; padding: 0; }
.gruppo-guida a { display: block; padding: 5px 10px; border-radius: 6px; color: var(--testo); text-decoration: none; line-height: 1.4; }
.gruppo-guida a:hover { background: var(--superficie); color: var(--inchiostro); }
.gruppo-guida a[aria-current] { background: var(--blu-tenue); color: var(--blu); font-weight: 600; }
.gruppo-guida .sezioni-guida { margin: 2px 0 6px 10px; padding-left: 8px; border-left: 1px solid var(--linea); }
.gruppo-guida .sezioni-guida a { padding: 3px 8px; font-size: 13px; color: var(--tenue); }
.gruppo-guida .sezioni-guida a:hover { color: var(--blu); }
.nessun-risultato { margin: 0; padding: 4px 10px; font-size: 13px; }
.testo-guida { min-width: 0; padding: 24px 32px 28px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); }
.testo-guida .occhiello { margin: 0 0 4px; font-size: 12px; color: var(--tenue); }
.testo-guida h1 { margin-bottom: 16px; }
.corpo-guida { font-size: 14px; line-height: 1.6; }
.corpo-guida > :first-child { margin-top: 0; }
.corpo-guida h2 { margin: 28px 0 8px; font-size: 16px; scroll-margin-top: 16px; }
.corpo-guida h3 { margin: 20px 0 6px; font-size: 14px; color: var(--inchiostro); }
.corpo-guida p, .corpo-guida ul, .corpo-guida ol { margin: 0 0 12px; }
.corpo-guida ul, .corpo-guida ol { padding-left: 22px; }
.corpo-guida li + li { margin-top: 4px; }
.corpo-guida strong { color: var(--inchiostro); }
.corpo-guida code { padding: 1px 5px; border-radius: 4px; background: var(--fondo); font-size: 12.5px; }
.corpo-guida table { border-collapse: collapse; margin: 0 0 14px; font-size: 13px; display: block; overflow-x: auto; }
.corpo-guida th, .corpo-guida td { padding: 6px 10px; border: 1px solid var(--linea); text-align: left; vertical-align: top; }
.corpo-guida th { background: var(--fondo); color: var(--inchiostro); }
.sfoglia-guida { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--linea); }
.sfoglia-guida a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 6px; text-decoration: none; font-weight: 600; line-height: 1.4; }
.sfoglia-guida a:hover { border-color: var(--blu); }
.sfoglia-guida a span { font-size: 12px; font-weight: 400; color: var(--tenue); }
.sfoglia-guida .successiva { grid-column: 2; text-align: right; }
.guida-assente { padding: 0; border: 0; }
.guida-assente h1 { font-size: 18px; margin-bottom: 8px; }
.guida-assente p { margin: 0; }
@media (max-width: 900px) {
  .pagina-guida { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
  .testo-guida { padding: 20px 20px 24px; }
}
@media (max-width: 640px) {
  .pagina-guida { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .indice-guida { position: static; max-height: none; overflow: visible; padding: 0; }
  .apri-indice { display: inline-flex; width: 100%; justify-content: space-between; }
  .apri-indice::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
  .apri-indice[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .elenco-guida { display: none; margin-top: 8px; padding: 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); }
  .elenco-guida.aperto { display: block; }
  .gruppo-guida a { padding: 8px 10px; }
  .testo-guida { padding: 16px; }
  .sfoglia-guida { grid-template-columns: 1fr; }
  .sfoglia-guida .successiva { grid-column: 1; }
}

/* ---------- Esportazioni ---------- */
.comandi-pratica { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* «Altro…» della testata: stesso aspetto dei pulsanti secondari accanto; le voci tengono l'icona */
.altro-pratica > summary { padding: 0 14px; background: var(--superficie); border: 1px solid var(--linea-forte); }
.altro-pratica > summary:hover, .altro-pratica[open] > summary { border-color: var(--blu); }
.altro-pratica .menu-altro { min-width: 200px; }
.altro-pratica .menu-altro button { gap: 8px; }
.altro-pratica .menu-altro svg { width: 16px; height: 16px; color: var(--tenue); }
.dialogo-esporta { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: 0 12px 40px rgba(23, 32, 43, .18); color: var(--testo); background: var(--superficie); }
.dialogo-esporta::backdrop { background: rgba(23, 32, 43, .35); }
.corpo-esporta { padding: 16px 24px 20px; }
.corpo-esporta > p { margin: 0 0 14px; }
.schede-esporta { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 0; border: 0; }
.schede-esporta legend { padding: 0; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--tenue); }
.formati { display: flex; flex-wrap: wrap; gap: 8px; }
.formati button { flex: 1 1 auto; }
.menu-chat { position: relative; flex: none; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; min-width: 140px; padding: 4px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 6px; box-shadow: var(--ombra); }
.menu[hidden] { display: none; }
.menu button { justify-content: flex-start; min-height: 32px; padding: 0 10px; background: transparent; color: var(--testo); font-weight: 400; border-radius: 4px; }
.menu button:hover, .menu button:focus-visible { background: var(--fondo); color: var(--inchiostro); }
@media (max-width: 640px) {
  .comandi-pratica { justify-content: flex-start; }
  .altro-pratica .menu-altro { left: 0; right: auto; }
  .corpo-esporta { padding: 14px 16px 18px; }
}
.corpo-esporta > .errore { margin: 12px 0 0; }
.corpo-esporta > #nota-esporta { margin: 12px 0 0; }
.corpo-esporta > #nota-esporta:empty { display: none; }
/* Sotto i 640 px la testata della chat va su due righe: titolo e ×, poi conversazione e comandi. */
@media (max-width: 640px) {
  .testa-chat { flex-wrap: wrap; row-gap: 8px; }
  .titolo-chat { order: 0; flex: 1 1 calc(100% - 48px); max-width: none; }
  #chiudi-chat { order: 1; }
  .testa-chat > :not(.titolo-chat):not(#chiudi-chat) { order: 2; }
}

/* ---------- Preparazione: dettaglio, legami, anteprima, storico ---------- */
.colonna-gantt { min-width: 0; }
.comandi-gantt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.comandi-gantt .piccolo { margin: 0; }
.comandi-gantt button[aria-pressed="true"] { border-color: var(--blu); background: var(--blu-tenue); }
/* Vista per responsabile: menu, «solo le sue» e sintesi a destra di «+ Attività»; le righe degli altri sbiadite.
   L'evidenziazione di avvisi e anteprima e la riga selezionata restano piene. */
.comandi-nuova, .filtro-responsabile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.filtro-responsabile { margin-left: auto; }
.campo-responsabile { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--testo); }
.campo-responsabile select { width: auto; min-width: 0; max-width: 100%; font-weight: 400; }
.sintesi-responsabile { font-size: 13px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.filtro-responsabile [hidden] { display: none; }
/* vuota resta nel DOM (regione «live»): niente spazio in più */
.sintesi-responsabile:empty { margin-left: -12px; }
.nome-riga.sbiadita:not(.evidenziata):not(.selezionata) > * { opacity: .38; }
.riga.sbiadita:not(.evidenziata):not(.selezionata) > :not(.sfondo-riga) { opacity: .22; }
.nome-riga.contesto:not(.evidenziata):not(.selezionata) { color: var(--tenue); }
.nome-riga.contesto:not(.evidenziata):not(.selezionata) .sigla { opacity: .6; }
.riga.contesto:not(.evidenziata):not(.selezionata) > :not(.sfondo-riga) { opacity: .4; }
.dialogo-esporta .solo-responsabile { margin: 2px 0 6px; white-space: normal; }
@media (max-width: 640px) {
  .filtro-responsabile { margin-left: 0; width: 100%; }
  .campo-responsabile { flex: 1 1 100%; }
  .campo-responsabile select { flex: 1; }
}
.madre-di { margin: -6px 0 8px; font-size: 13px; color: var(--tenue); overflow-wrap: anywhere; }
.madre-di button.link { font-size: 13px; }
.base-elemento { margin: 0 0 12px; font-size: 12px; color: var(--tenue); overflow-wrap: anywhere; }
.pannello h2 { overflow-wrap: anywhere; }
/* Titolo con la matita (Piano 19): la matita segue il nome; in modifica il campo prende il posto del titolo con lo
   stesso corpo e la stessa riga di partenza del testo, così niente salta. */
.titolo-elemento { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 12px; min-height: 32px; }
.titolo-elemento > h2 { flex: 0 1 auto; min-width: 0; margin: 0; padding-top: 5px; }
.titolo-elemento > .icona { margin-top: 0; }
.titolo-elemento > .icona svg { width: 16px; height: 16px; }
.pannello.chiudibile > .titolo-elemento { padding-right: 32px; }
.rinomina { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px; }
.rinomina input {
  height: 32px; min-height: 32px; margin-left: -9px; width: calc(100% + 9px); padding: 0 8px;
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--inchiostro);
}
.rinomina input[aria-invalid="true"],
#nome-pratica[aria-invalid="true"] { border-color: var(--critico); }
.rinomina .icona svg { width: 16px; height: 16px; }
.rinomina .aiuto-campo, .rinomina .errore { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; }
.rinomina .aiuto-campo { color: var(--tenue); }
.rinomina .errore[hidden] { display: none; }
.titolo-elemento[aria-busy="true"] { cursor: progress; }
.nome-catalogo { margin: -8px 0 10px; font-size: 12px; color: var(--tenue); overflow-wrap: anywhere; }
/* Posizione nell'elenco: due frecce unite in un solo controllo, il ripristino accanto */
.posizione-elemento { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 12px; font-size: 12px; color: var(--tenue); }
.frecce { display: inline-flex; flex: none; gap: 1px; padding: 1px; border: 1px solid var(--linea-forte); border-radius: var(--raggio); background: var(--superficie); }
.frecce .icona { width: 32px; height: 32px; }
.frecce .icona svg { width: 16px; height: 16px; }
.frecce .icona:disabled:hover { background: none; color: var(--tenue); }
.posizione-elemento .icona[aria-busy="true"] { cursor: progress; opacity: .7; }
.esito-titolo .errore { margin: -4px 0 12px; font-size: 13px; }
#form-prep, #form-nuovo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#form-prep > .campo, #form-nuovo > .campo { margin: 0; }
/* Responsabile su tutta la riga, Durata e Stato affiancati */
.campi-tre { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campi-tre > :first-child { grid-column: 1 / -1; }
.campi-tre select, .campi-coppia select { min-width: 0; }
.campo > .aiuto-campo { font-size: 12px; font-weight: 400; color: var(--tenue); }
.valore-campo { margin: 0; min-height: 34px; display: flex; align-items: center; font-size: 13px; color: var(--inchiostro); }
.campo-breve { max-width: 180px; }
.campo[hidden] { display: none; }
/* «Fatta il»: quando si segna «fatto» compare in un riquadro che si nota, con la spiegazione (spec §28.3) */
.campo-fatta { margin: 0 0 14px; }
.campo-fatta[hidden], .campo-fatta .aiuto-campo[hidden] { display: none; }
.campo-fatta .campo { margin: 0; }
.campo-fatta.in-evidenza { padding: 10px 12px; background: var(--ok-tenue); border-left: 3px solid #43a06d;
  border-radius: 0 6px 6px 0; }
.campo-fatta.in-evidenza .campo > span { color: var(--inchiostro); }
.campo-fatta .aiuto-campo { margin: 6px 0 0; font-size: 12px; color: var(--tenue); }
/* «Non si anticipa» (spec §33): la casella sotto «Viene dopo», con da dove viene il valore e cosa fa */
.campo-non-anticipare { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--linea); }
.riga-non-anticipare { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.riga-non-anticipare .spunta { font-weight: 600; color: var(--inchiostro); }
.campo-non-anticipare .aiuto-campo { margin: 4px 0 0; font-size: 12px; color: var(--tenue); }
.campo-non-anticipare .aiuto-campo .link { font-size: 12px; }
/* «Fatto» sull'attività principale: le sottoattività che si chiudono, nell'anteprima */
.chiusura-sotto { margin: 10px 0 8px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 6px; background: var(--fondo); }
.titolo-chiusura { margin: 0 0 6px; font-weight: 600; color: var(--inchiostro); }
.lista-chiusura { margin: 0 0 6px; padding: 0; list-style: none; }
.lista-chiusura li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 5px 0; border-top: 1px solid var(--linea); }
.lista-chiusura li:first-child { border-top: 0; }
.nome-chiusura { min-width: 0; color: var(--inchiostro); overflow-wrap: anywhere; }
.segni-chiusura { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.nota-chiusura { flex-basis: 100%; font-size: 12px; color: var(--tenue); }
.chiusura-sotto > p.tenue { margin: 4px 0 0; }
.chiusura-sotto .avviso { margin: 8px 0 0; }
.etichetta-gruppo { font-size: 12px; font-weight: 600; color: var(--tenue); }
p.etichetta-gruppo { margin: 0 0 8px; }
/* Date: automatiche / fisse */
.gruppo-date { margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--linea); min-width: 0; }
.gruppo-date legend { float: left; width: 100%; padding: 12px 0 0; margin-top: -12px; font-size: 12px; font-weight: 600; color: var(--tenue); }
.gruppo-date legend + * { clear: left; }
.scelta-date { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 6px; margin-bottom: 10px; }
.scelta-date input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--blu); }
.date-fisse { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.date-fisse[hidden], #date-automatiche[hidden], .scegli-posizione[hidden], .editor-legami[hidden] { display: none; }
.gruppo-date .date { margin: 0; }
.gruppo-date .piccolo { margin: 8px 0 0; }
/* Viene dopo: riga di lettura, editor al clic */
.riga-legami { padding-top: 12px; border-top: 1px solid var(--linea); font-size: 13px; }
.riga-legami > p { margin: 0; color: var(--inchiostro); overflow-wrap: anywhere; }
.riga-legami button.link { font-size: 13px; }
.editor-legami { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 10px 12px; background: var(--fondo); border-radius: 6px; }
.editor-legami .piccolo { margin: 0; }
.editor-legami > button.link { align-self: flex-start; }
.editor-legami select { min-width: 0; }
/* attesa di un legame del catalogo (Piano 23): il numero dei giorni accanto al nome, «+10 g» fra i codici */
.editor-legami .legami li:has(.campo-attesa) { align-items: center; }
.campo-attesa { flex: none; display: inline-flex; }
.tabella-catalogo .campo-attesa input[type="number"], .campo-attesa input { width: 5.5em; }
.attesa-codice { color: var(--tenue); font-variant-numeric: tabular-nums; }
.campo-ritardo { max-width: 220px; }
.legami { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.legami li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.legami li:last-child { border-bottom: 0; }
.nome-legame { flex: 1; min-width: 0; color: var(--inchiostro); overflow-wrap: anywhere; }
.ritardo-legame { flex: none; font-size: 12px; font-weight: 600; color: var(--tenue); font-variant-numeric: tabular-nums; }
/* Una sola azione principale, il resto in «Altro…» */
.azioni-pannello { align-items: center; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--linea); }
.altro { position: relative; }
.altro > summary {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 6px; cursor: pointer;
  font-weight: 600; font-size: 13px; color: var(--blu); list-style: none; user-select: none;
}
.altro > summary::-webkit-details-marker { display: none; }
.altro > summary:hover { background: var(--blu-tenue); }
.altro > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.altro[open] > summary { background: var(--blu-tenue); }
.menu-altro {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 230px; padding: 4px;
  display: flex; flex-direction: column; background: var(--superficie); border-radius: var(--raggio);
  box-shadow: 0 2px 4px rgba(23, 32, 43, .08), 0 8px 24px rgba(23, 32, 43, .14);
}
/* aperto su computer: nello strato in cima alla pagina (popover), posizione calcolata da menu-altro.js */
.menu-altro.galleggiante { position: fixed; right: auto; inset: auto; margin: 0; border: 0; color: inherit; overflow: visible; min-width: 200px; max-width: calc(100vw - 16px); z-index: 40; }
.menu-altro button { justify-content: flex-start; width: 100%; background: transparent; color: var(--inchiostro); font-weight: 500; }
.menu-altro button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.menu-altro button:hover { background: var(--blu-tenue); }
.menu-altro button.pericolo { color: var(--critico); }
.menu-altro button.pericolo:hover { background: var(--critico-tenue); }
.conferma-salvato { margin: 0; font-size: 13px; color: var(--ok); font-weight: 600; }
.conferma-salvato button.link { font-size: 13px; }
#esito:empty, .esito-storico:empty { display: none; }
/* Nuova attività: posizione in parole, «cambia» per sceglierla */
.posizione { margin: 0; font-size: 13px; color: var(--inchiostro); overflow-wrap: anywhere; }
.posizione button.link { font-size: 13px; }
.scegli-posizione { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; background: var(--fondo); border-radius: 6px; }
.scegli-posizione > button.link { align-self: flex-start; }
.scegli-posizione select { min-width: 0; }
#form-nuovo > .azioni { margin-top: 0; }
/* Anteprima: frase di causa, una riga per attività */
.causa { font-weight: 600; color: var(--inchiostro); overflow-wrap: anywhere; text-wrap: pretty; }
.anteprima .avviso.attenzione { font-weight: 400; }
.domanda-anteprima { font-weight: 600; color: var(--inchiostro); overflow-wrap: anywhere; }
.nome-spost { overflow-wrap: anywhere; }
.sforamenti { margin: 0 0 10px; font-size: 13px; }
.sforamenti > p { margin: 0 0 4px; font-size: 12px; font-weight: 700; }
.sforamenti ul { margin: 0; padding-left: 18px; overflow-wrap: anywhere; }
.sforamenti.nuovi > p { color: var(--critico); }
.sforamenti.risolti > p { color: var(--ok); }
#form-prep .anteprima, #form-nuovo + #esito .anteprima { margin-top: 0; }
.riepilogo { margin-top: 4px; }
.motivo-lettura { margin: -4px 0 10px; }
/* Storico */
.dialogo-storico { width: min(620px, calc(100vw - 32px)); }
.dialogo-storico[open] { display: flex; flex-direction: column; }
.corpo-storico { flex: 1; min-height: 0; overflow: auto; padding: 8px 24px 20px; overscroll-behavior: contain; }
.ultima-modifica { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 16px; border-bottom: 1px solid var(--linea-forte); }
.ultima-modifica .testo-storico { margin: 0; font-weight: 600; }
.ultima-modifica .testa-voce-storico { margin: 0 0 6px; }
.ultima-modifica .esito-storico { align-self: stretch; }
.corpo-storico > .conferma-salvato { padding-top: 12px; }
.lista-storico { list-style: none; margin: 0; padding: 0; }
.voce-storico { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.voce-storico:last-child { border-bottom: 0; }
.voce-storico:focus { outline: none; }
.voce-storico.annullamento .testo-storico { color: var(--tenue); }
.testa-voce-storico { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 12px; color: var(--tenue); }
.testa-voce-storico time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--testo); }
.testa-voce-storico .chip { font-size: 11px; }
.testo-storico { margin: 4px 0 6px; font-size: 14px; color: var(--inchiostro); overflow-wrap: anywhere; }
.voce-storico button.link.piccolo { margin: 0; }
.esito-storico .anteprima { margin-top: 8px; }
.esito-storico .conferma-salvato[tabindex], .corpo-storico .conferma-salvato[tabindex] { outline: none; }
@media (max-width: 640px) {
  .corpo-storico { padding: 6px 16px 18px; }
  .altro[open] { flex-basis: 100%; }
  .menu-altro { position: static; margin-top: 4px; box-shadow: none; border: 1px solid var(--linea); }
}
/* Referenti della pratica */
.dialogo-referenti { width: min(520px, calc(100vw - 32px)); }
.dialogo-referenti[open] { display: flex; flex-direction: column; }
.corpo-referenti { flex: 1; min-height: 0; overflow: auto; padding: 8px 24px 20px; overscroll-behavior: contain; }
.corpo-referenti > .tenue:first-child { margin: 12px 0; }
.lista-referenti { list-style: none; margin: 0; padding: 0; }
.voce-referente { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.voce-referente:last-child { border-bottom: 0; }
.testo-referente { flex: 1 1 220px; min-width: 0; color: var(--inchiostro); overflow-wrap: anywhere; }
.voce-referente button.link { font-size: 13px; }
.chip.blu { color: var(--blu); background: var(--blu-tenue); }
.vuoto-referenti { margin: 12px 0; }
#errore-togli { margin: 4px 0 0; }
.sezione-referenti { padding: 14px 0 4px; border-top: 1px solid var(--linea-forte); margin-top: 12px; }
.sezione-referenti h3 { margin: 0 0 10px; font-size: 13px; color: var(--inchiostro); }
.sezione-referenti .piccolo { margin: 0; }
.modulo-referente { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.modulo-referente .campo.largo { grid-column: span 2; }
.modulo-referente input, .modulo-referente select { width: 100%; min-width: 0; }
.sezione-referenti > .errore { margin: 8px 0 0; }
.nota-referenti { margin: 16px 0 0; padding: 10px 12px; font-size: 12.5px; color: var(--tenue); background: var(--fondo); border-radius: 6px; }
@media (max-width: 640px) {
  .corpo-referenti { padding: 6px 16px 18px; }
  .modulo-referente { grid-template-columns: 1fr; }
  .modulo-referente .campo.largo { grid-column: auto; }
  .modulo-referente button { justify-self: start; }
}

/* ---------- Dettaglio vicino alla riga ---------- */
/* Chiusura del dettaglio (deseleziona); su telefono la stessa testata porta la maniglia del foglio. */
.testa-foglio { position: absolute; top: 10px; right: 10px; z-index: 2; }
.maniglia-foglio { display: none; }
.pannello.chiudibile > h2:first-of-type { padding-right: 32px; }
.velo-foglio { display: none; }
/* Avvisi ridotti a un'etichetta mentre il dettaglio è in cima */
.avvisi.compatti { padding: 4px; box-shadow: none; }
.avvisi.compatti h2 { margin: 0; display: flex; align-items: center; }
.avvisi.compatti h2 a.aiuto { margin: 0 8px 0 4px; }
button.apri-avvisi {
  flex: 1; justify-content: flex-start; gap: 6px; min-height: 36px; padding: 0 10px; background: transparent;
  color: var(--inchiostro); font-size: 14px;
}
button.apri-avvisi:hover { background: var(--fondo); }
button.apri-avvisi::after {
  content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid var(--tenue); border-bottom: 1.5px solid var(--tenue);
  transform: rotate(-45deg); transition: transform .15s ease-out;
}
button.apri-avvisi[aria-expanded="true"]::after { transform: translateY(-2px) rotate(45deg); }
.corpo-avvisi { display: flex; flex-direction: column; gap: 8px; padding: 6px; }
.corpo-avvisi[hidden] { display: none; }
.corpo-avvisi .interruttore { align-self: flex-end; }
button.link.testo { font-size: inherit; }
/* Su computer la colonna di destra resta a vista mentre si scorre il Gantt; se il dettaglio è lungo scorre da sé. */
@media (min-width: 1101px) {
  .layout.con-dettaglio .colonna-destra {
    position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
    padding: 2px; margin: -2px; scrollbar-width: thin; scrollbar-color: #b7c0cc transparent;
  }
}
/* Su telefono il dettaglio è un foglio dal basso */
@media (max-width: 640px) {
  .layout.con-dettaglio .pannello {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; max-height: 78vh; max-height: 78dvh; overflow-y: auto;
    overscroll-behavior: contain; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); border: 0;
    border-radius: 14px 14px 0 0; box-shadow: 0 -2px 6px rgba(23, 32, 43, .06), 0 -12px 32px rgba(23, 32, 43, .16);
  }
  .layout.con-dettaglio .testa-foglio {
    position: sticky; top: 0; right: auto; display: flex; justify-content: center; align-items: center;
    height: 44px; margin: 0 -16px 2px; background: var(--superficie);
  }
  .layout.con-dettaglio .maniglia-foglio { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--linea-forte); }
  .layout.con-dettaglio .chiudi-dettaglio { position: absolute; right: 6px; top: 2px; width: 40px; height: 40px; }
  .layout.con-dettaglio .pannello.chiudibile > h2:first-of-type { padding-right: 0; }
  .layout.con-dettaglio .pannello.chiudibile > .titolo-elemento { padding-right: 0; }
  .layout.con-dettaglio .velo-foglio { display: block; position: fixed; inset: 0; z-index: 24; background: rgba(23, 32, 43, .35); }
  .pannello.entra { animation: foglio-su .32s cubic-bezier(.22, 1, .36, 1); }
  .layout.con-dettaglio .velo-foglio { animation: velo .2s ease-out; }
  body.foglio-aperto { overflow: hidden; }
}
@keyframes foglio-su { from { transform: translateY(100%); } }
@keyframes velo { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pannello.entra, .velo-foglio { animation: none !important; } }

/* ---------- Impostazioni della pratica ---------- */
.dialogo-impostazioni { width: min(560px, calc(100vw - 32px)); }
.corpo-impostazioni > .conferma-salvato { padding-top: 12px; outline: none; }
.corpo-impostazioni > .motivo-lettura { margin: 12px 0 0; }
.sezione-impostazioni { padding: 14px 0 16px; }
.sezione-impostazioni + .sezione-impostazioni { border-top: 1px solid var(--linea-forte); }
.sezione-impostazioni h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--inchiostro); }
.profilo.sezione-impostazioni legend {
  float: left; width: 100%; padding: 14px 0 0; margin: -14px 0 6px; font-size: 13px; font-weight: 700; color: var(--inchiostro);
}
.profilo.sezione-impostazioni legend + * { clear: left; }
.valore-impostazione { margin: 0; font-size: 14px; color: var(--testo); font-variant-numeric: tabular-nums; }
.valore-impostazione strong { font-size: 16px; color: var(--inchiostro); }
.sezione-impostazioni .piccolo { margin: 2px 0 0; }
.riga-obiettivo { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 12px; }
.riga-obiettivo .campo { flex: 0 1 200px; }
.esito-obiettivo .anteprima { margin-top: 14px; }
.esito-obiettivo:empty { display: none; }
.profilo .aiuto-profilo { margin: 0 0 10px; }
.profilo .caselle { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 20px; }
.profilo .spunta { white-space: normal; align-items: flex-start; line-height: 1.35; }
.profilo .spunta input { margin-top: 1px; flex: none; }
fieldset.profilo:disabled .spunta { cursor: default; color: var(--tenue); }

/* «?» verso la Guida: cerchietto discreto accanto a titoli e pulsanti */
a.aiuto { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 18px; height: 18px; flex: none; margin-left: 4px; vertical-align: middle; border: 1px solid var(--linea-forte); border-radius: 50%; background: var(--superficie); color: var(--tenue); font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; }
a.aiuto:hover { color: var(--blu); border-color: var(--blu); background: var(--blu-tenue); }
a.aiuto:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 50%; }

/* ---------- Piano di riferimento e scostamenti (spec §28.4) ---------- */
/* Promemoria finché il riferimento manca: una voce tenue nella riga dei dati, non un avviso */
.promemoria-riferimento { color: var(--tenue); }
.promemoria-riferimento button.link { font-size: inherit; font-weight: 600; }
/* Gantt: barra grigia sottile sotto la barra attuale; il campione accanto all'interruttore */
.barra-riferimento { fill: #8e98a6; }
.interruttore-riferimento { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.campione-riferimento { display: inline-block; width: 22px; height: 3px; border-radius: 2px; background: #8e98a6; }
/* Dettaglio */
.rispetto-riferimento { margin: -4px 0 12px; font-size: 13px; color: var(--tenue); }
.delta { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--inchiostro); white-space: nowrap; }
.delta.ritardo { color: var(--critico); }
.delta.anticipo { color: var(--ok); }
.delta.in-linea { font-weight: 400; color: var(--tenue); }
.delta.slitta { font-weight: 400; color: var(--testo); }  /* slittamento previsto: un piano, non un ritardo (R7) */
.delta.scaduta { color: var(--attenzione); }              /* scaduta, ancora aperta: si vede ma non si somma */
/* Finestra «Scostamenti» */
.dialogo-scostamenti { width: min(860px, calc(100vw - 32px)); }
.testa-scost { padding: 12px 0 14px; border-bottom: 1px solid var(--linea-forte); }
.testa-scost p { margin: 0 0 4px; overflow-wrap: anywhere; }
.testa-scost .fissato { font-weight: 600; color: var(--inchiostro); }
.motivo-riferimento { color: var(--testo); }
.campo-versione { max-width: 420px; margin: 0 0 10px; }
.campo-versione select { min-width: 0; }
.nota-versione { margin: 8px 0 6px; }
.invio-scost { font-size: 13px; color: var(--testo); }
.invio-scost .etichetta-gruppo { margin-right: 6px; }
.sezione-scost { padding: 14px 0 6px; }
.sezione-scost h3, .scheda-scost h3 { margin: 0 0 8px; font-size: 13px; color: var(--inchiostro); }
.scheda-scost h3 .tenue { font-weight: 400; }
.somme-scost { list-style: none; margin: 0 0 6px; padding: 0; max-width: 520px; font-variant-numeric: tabular-nums; }
.somme-scost li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--linea); font-size: 13px; }
.somme-scost li:last-child { border-bottom: 0; }
.somme-scost li.senza > span:first-child { font-style: italic; color: var(--tenue); }
.giorni-scost { font-weight: 600; color: var(--critico); text-align: right; }
.somme-scost .tenue { font-size: 12px; text-align: right; }
.filtro-scost { padding: 10px 0; border-top: 1px solid var(--linea); }
.filtro-scost .spunta { font-size: 13px; }
.scheda-scost { padding: 10px 0 8px; }
.schede-scost.solo-mosse tr.in-linea { display: none; }
.schede-scost.solo-mosse .scheda-scost.ferma .tabella-scostamenti { display: none; }
.tabella-scostamenti { font-size: 13px; }
.tabella-scostamenti th, .tabella-scostamenti td { padding: 7px 10px; }
.tabella-scostamenti td:not(:first-child), .tabella-scostamenti th:not(:first-child) { white-space: nowrap; }
.tabella-scostamenti th { position: static; }
.tabella-scostamenti tr.sotto td:first-child { padding-left: 24px; }
.tabella-scostamenti tr.tolta .nome-scost { color: var(--tenue); text-decoration: line-through; text-decoration-color: #9aa5b3; }
.nome-scost { display: block; color: var(--inchiostro); overflow-wrap: anywhere; }
.chi-scost { display: block; font-size: 12px; color: var(--tenue); }
.rifissa { padding: 14px 0 4px; border-top: 1px solid var(--linea-forte); margin-top: 8px; }
.modulo-rifissa { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.modulo-rifissa[hidden] { display: none; }
.modulo-rifissa p, .modulo-rifissa .campo { margin: 0; }
.modulo-rifissa textarea { width: 100%; resize: vertical; }
.senza-riferimento { padding: 14px 0 6px; max-width: 62ch; }
.senza-riferimento > p { margin: 0 0 14px; }
.esito-rifissa:empty { display: none; }
.esito-rifissa .errore { margin: 8px 0 0; }
.corpo-scostamenti > .conferma-salvato { padding-top: 12px; }
@media (max-width: 640px) {
  /* righe impilate (.tabella): nome a tutta riga, poi le tre date con la loro etichetta */
  .tabella-scostamenti tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 8px 0; }
  .tabella-scostamenti td { padding: 0 12px; }
  .tabella-scostamenti td:first-child { grid-column: 1 / -1; }
  .tabella-scostamenti tr.sotto td:first-child { padding-left: 22px; }
  .tabella-scostamenti td[data-etichetta]::before { content: attr(data-etichetta) " "; color: var(--tenue); font-size: 12px; }
  .schede-scost.solo-mosse tr.in-linea { display: none; }
  .somme-scost li { grid-template-columns: minmax(0, 1fr) auto; }
  .somme-scost li > .tenue { grid-column: 1 / -1; text-align: left; }
}
.identita .meta span { white-space: nowrap; }

/* ---------- Progetto: WP e fasi (Piano 9a) ---------- */
/* Date del programma in testa: tre date affiancate, i conteggi a destra, la nota sotto */
/* voci allineate in alto: etichette e date sulla stessa riga anche con il margine sotto l'ultimazione */
.riquadro-progetto { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px 28px; padding: 12px 18px; }
.voce-progetto { display: flex; flex-direction: column; gap: 2px; }
.voce-progetto strong { font-size: 17px; color: var(--inchiostro); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.riquadro-progetto .conteggi { margin: 0; align-self: center; }
.nota-progetto { flex-basis: 100%; display: inline-flex; align-items: center; gap: 2px; }
/* asse per trimestri: i mesi in mezzo appena accennati */
.griglia.fine { stroke: #f3f5f8; }
/* un WP si legge come titolo del suo gruppo di fasi */
.nome-riga.wp .testo-nome { font-weight: 600; color: var(--inchiostro); }
.nome-riga.wp.esclusa .testo-nome { font-weight: 400; color: var(--tenue); }
/* «?» della tappa «Avvio del programma (DSAN)» nella colonna dei nomi, prima della sigla */
.riga-nomi > a.aiuto { position: absolute; top: 50%; right: 54px; transform: translateY(-50%); margin: 0; z-index: 2; }
.nome-riga.con-aiuto { padding-right: 12px; }
.nome-riga.con-aiuto .testo-nome { padding-right: 24px; }
/* pannello della fase: Responsabile e Tipo, poi Durata e Stato */
.campi-tre.campi-fase > :first-child { grid-column: auto; }
.campi-fase .campo > span { display: inline-flex; align-items: center; gap: 2px; }
/* l'unità resta leggibile per intero («settimane»): se accanto al numero non c'è posto, va sotto */
.durata-unita { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.durata-unita input { width: 4.5em; flex: none; font-variant-numeric: tabular-nums; }
.durata-unita select { flex: 1 0 7.5em; min-width: 0; }
.chip.tipo-fase.spesa { color: var(--blu); background: var(--blu-tenue); }
.chip.tipo-fase.preparatoria { color: var(--ok); background: var(--ok-tenue); }
.chip.tipo-fase.senza { color: var(--tenue); background: #eef1f5; }
.testo-critico { color: var(--critico); font-weight: 600; }
.campione.prep-critica { background: #f2c4bf; border: 2px solid var(--critico); }
/* «?» accanto agli avvisi delle fasi (non avvio, ultimazione) */
.lista-avvisi li:has(> .aiuto-avviso) { display: flex; align-items: flex-start; gap: 4px; }
.lista-avvisi li > .aiuto-avviso { flex: none; padding-top: 9px; }
@media (max-width: 640px) {
  .riquadro-progetto { gap: 8px 18px; padding: 12px 14px; }
  .voce-progetto strong { font-size: 15px; }
  /* telefono: la colonna è stretta, il «?» resta nel Dettaglio della tappa */
  .riga-nomi > a.aiuto { display: none; }
  .nome-riga.con-aiuto .testo-nome { padding-right: 0; }
}
/* il WP della fase su tutta la riga, sotto Durata e Stato */
.campi-tre.campi-fase > .campo-wp { grid-column: 1 / -1; }
.spostata-wp { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--inchiostro); }

/* ---------- Novità dal sito Invitalia (spec §30) ---------- */
/* campanello in testata, prima dell'utente: icona e numero «da vedere» */
.campanello {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: 50%; color: #d3deec; text-decoration: none; transition: background-color .12s, color .12s;
}
.campanello[hidden] { display: none; }
.campanello:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.campanello svg { width: 19px; height: 19px; }
.numero-novita {
  position: absolute; top: 1px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: #fff; color: var(--blu); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--blu);
}
.numero-novita[hidden] { display: none; }
.novita { max-width: 920px; }
.novita .intestazione { align-items: center; flex-wrap: wrap; }
.novita .sottotitolo { margin: -8px 0 8px; }
.novita > .tenue.piccolo { margin: 0 0 12px; }
.elenco-novita { display: flex; flex-direction: column; gap: 12px; }
.voce-novita {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 16px 18px;
  min-width: 0; overflow-wrap: anywhere;
}
.testa-novita { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.testa-novita time { font-variant-numeric: tabular-nums; }
.voce-novita h2 { font-size: 15px; line-height: 1.35; margin: 8px 0 10px; }
.voce-novita h2 a { text-decoration: none; }
.voce-novita h2 a:hover { text-decoration: underline; }
.voce-novita h3 { font-size: 12px; font-weight: 600; color: var(--tenue); margin: 14px 0 6px; }
.voce-novita p { margin: 0 0 8px; max-width: 75ch; }
.voce-novita ul { margin: 0; padding-left: 18px; max-width: 80ch; }
.voce-novita li + li { margin-top: 4px; }
.voce-novita .piccolo { margin: 4px 0 8px; }
.chip.tipo-novita { color: var(--blu); background: var(--blu-tenue); }
.chip.tipo-avviso, .chip.tipo-stato { color: var(--attenzione); background: var(--attenzione-tenue); }
.chip.tipo-non_leggibile, .chip.tipo-troppi_cambiamenti, .chip.tipo-pagina_sparita { color: var(--testo); background: #eef1f5; }
.riassunto-novita { border-left: 3px solid var(--linea-forte); padding: 2px 0 2px 12px; margin: 0 0 4px; }
.riassunto-novita p { margin: 0; }
.riassunto-novita .piccolo { margin: 2px 0 0; font-style: italic; }
.frasi.aggiunte li::marker { content: "+  "; color: var(--ok); font-weight: 700; }
.frasi.tolte li::marker { content: "−  "; color: var(--critico); font-weight: 700; }
.frasi.tolte li { color: var(--tenue); }
.frasi .mostra-tutto { margin: 6px 0 0 18px; }
.documenti-novita ul { list-style: none; padding-left: 0; }
.documenti-novita .chip { margin-right: 4px; }
.esito-novita { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0 !important; font-size: 13px; }
.chip.stato-non_serve { color: var(--testo); background: #eef1f5; }
.chip.stato-da_aggiungere { color: var(--attenzione); background: var(--attenzione-tenue); }
.chip.stato-aggiunta { color: var(--ok); background: var(--ok-tenue); }
.nota-novita { font-size: 13px; margin-top: 6px !important; }
.decidi-novita {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--linea);
}
.decidi-novita .campo { flex: 1 1 260px; min-width: 0; }
.decidi-novita .azioni { margin-top: 0; }
.decidi-novita .errore { flex-basis: 100%; margin: 0; }
@media (max-width: 640px) {
  .voce-novita { padding: 14px; }
  .filtri-novita { display: flex; flex-wrap: wrap; }
  .decidi-novita .azioni, .decidi-novita .azioni button { width: 100%; }
}

/* ---------- Erogazioni e documenti (Piano 15) ---------- */
/* Le erogazioni hanno il verde acqua già usato per «Banca / assicurazione»: tenue, distinto dagli avvisi */
:root { --erogazione: #0b5d63; --erogazione-tenue: #e3f4f4; }
.chip.erogazione, .chip.tipo-fase.erogazione { color: var(--erogazione); background: var(--erogazione-tenue); }
.chip.erogazione { display: inline-flex; align-items: center; gap: 4px; }
.chip.erogazione svg { width: 13px; height: 13px; }
.segno-erogazione { display: inline-flex; color: var(--erogazione); }
.segno-erogazione svg { width: 15px; height: 15px; }
.legenda .segno-erogazione svg { width: 16px; height: 16px; }
.barra-riepilogo.erogazione { fill: var(--erogazione); }
.conta-documenti { font-size: 11px; font-weight: 600; fill: var(--erogazione); font-variant-numeric: tabular-nums; }
/* documenti della domanda (spec §35) accanto alle attività della Preparazione: tono neutro del testo secondario,
   distinto dal verde delle erogazioni (5,9:1 sullo sfondo delle righe) */
.conta-documenti.domanda { fill: var(--tenue); }
/* un alone chiaro: il testo resta leggibile sopra le frecce dei legami e la linea di «oggi» */
.conta-documenti.domanda { paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; stroke-linejoin: round; }
/* comandi del Progetto: il gruppo delle erogazioni accanto a «+ WP» */
.comandi-erogazioni { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.comandi-erogazioni .piccolo { margin: 0; }
/* margine accanto all'ultimazione: verde come il margine prima dell'invio, ambra sotto la soglia */
.margine-ultimazione.sotto { color: var(--attenzione); }
/* Preparazione: «Documenti della domanda» con il conteggio */
.riga-documenti-domanda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.conteggio-doc { font-size: 13px; font-weight: 600; color: var(--tenue); font-variant-numeric: tabular-nums; }
/* percentuale prevista di un'erogazione */
.campo-percentuale > label { font-size: 12px; font-weight: 600; color: var(--tenue); }
.con-unita { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tenue); }
.con-unita input { width: 5.5em; }
.campo-percentuale { margin-bottom: 4px; }
.testo-pannello { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
/* lista dei documenti (pannello della raccolta, tappa edilizia, dialogo della domanda) */
.sezione-documenti { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); min-width: 0; }
.dialogo-documenti .sezione-documenti { margin-top: 8px; padding-top: 0; border-top: 0; }
.testa-doc { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.testa-doc h3 { margin: 0; }
.sezione-documenti .filtro-doc { margin: 10px 0 4px; }
.sezione-doc h4 {
  display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 6px; padding-bottom: 4px;
  font-size: 12px; font-weight: 700; color: var(--inchiostro); border-bottom: 1px solid var(--linea);
}
.conta-sezione { flex: none; font-weight: 600; color: var(--tenue); font-variant-numeric: tabular-nums; }
.voci-doc { list-style: none; margin: 0; padding: 0; }
.voce-doc { padding: 10px 0; border-bottom: 1px solid #eef1f5; }
.voce-doc:last-child { border-bottom: 0; }
.testo-doc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--inchiostro); overflow-wrap: anywhere; }
.voce-doc.non_serve .testo-doc { color: var(--tenue); text-decoration: line-through; text-decoration-color: #b7c0cc; }
.quando-doc { margin: 2px 0 0; font-size: 12px; color: var(--tenue); line-height: 1.4; }
.attivita-doc {
  display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 700;
  line-height: 17px; color: var(--blu); background: var(--blu-tenue); font-variant-numeric: tabular-nums; vertical-align: 1px;
}
.riga-stato-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
/* stato a tre scelte: un controllo segmentato fatto di radio (frecce della tastiera comprese) */
.stati-doc { display: inline-flex; flex-wrap: wrap; padding: 2px; background: #e7eaef; border-radius: 7px; max-width: 100%; }
.stato-doc { position: relative; display: inline-flex; cursor: pointer; }
.stato-doc input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.stato-doc span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--tenue); white-space: nowrap; }
.stato-doc:hover span { color: var(--inchiostro); }
.stato-doc input:checked + span { background: var(--superficie); color: var(--blu); box-shadow: 0 1px 2px rgba(23, 32, 43, .12); }
.stato-doc.ricevuto input:checked + span { color: var(--ok); }
.stato-doc.non_serve input:checked + span { color: var(--testo); }
.stato-doc input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.stato-doc input:disabled + span { opacity: .6; cursor: progress; }
.stato-letto { font-size: 12px; font-weight: 600; color: var(--tenue); }
.stato-letto.ricevuto { color: var(--ok); }
.nota-doc { margin: 6px 0 2px; padding: 6px 8px; font-size: 12px; color: var(--testo); background: #f7f8fa; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.modifica-nota { margin-top: 8px; }
.modifica-nota textarea {
  width: 100%; min-width: 0; resize: vertical; font: inherit; font-size: 13px; line-height: 1.45; padding: 6px 8px;
  border: 1px solid var(--linea-forte); border-radius: 6px;
}
.modifica-nota textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.modifica-nota .azioni { margin-top: 6px; }
.dialogo-documenti { width: min(720px, calc(100vw - 32px)); }
/* «Scarica l'elenco (PDF)» (spec §39.1): azione secondaria sopra la lista, le due caselle accanto al pulsante */
.scarica-documenti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.scarica-documenti .opzioni-elenco { display: flex; flex-wrap: wrap; gap: 0 16px; }
.scarica-documenti .spunta { white-space: normal; min-height: 32px; }
.scarica-documenti > .tenue, .scarica-documenti > .errore { flex-basis: 100%; margin: 0; }
.scarica-documenti > .errore:empty { display: none; }
.insieme-esporta { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--linea); }
.corpo-documenti > .tenue:first-child { margin: 12px 0 4px; }
.modifica-nota .piccolo-pulsante { min-height: 28px; padding: 0 10px; font-size: 12px; }
/* documenti della domanda per attività (spec §35): interruttore del raggruppamento e filtro, due controlli distinti
   sulla stessa riga (a capo su telefono) */
.scelte-doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 10px 0 4px; }
.scelte-doc .stati-prep, .sezione-documenti .scelte-doc .filtro-doc { margin: 0; }
/* il codice dell'attività come link: stesso segno azzurro del codice, bersaglio di tocco di 33 px */
button.link.attivita-doc {
  position: relative; display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--blu-tenue);
  font-size: 11px; font-weight: 700; line-height: 17px; text-decoration: none; vertical-align: 1px;
}
button.link.attivita-doc::after { content: ''; position: absolute; inset: -8px -4px; }
button.link.attivita-doc:hover { color: var(--blu-scuro); background: #d3dfee; text-decoration: underline; text-underline-offset: 2px; }
button.link.attivita-doc:focus-visible { outline-offset: 1px; }
/* intestazione di un gruppo per attività: codice, nome della pratica, «attività esclusa»; sotto il responsabile;
   il conteggio resta a destra anche quando il nome va a capo */
.gruppo-attivita-doc h4 { align-items: flex-start; margin-top: 18px; }
.gruppo-attivita-doc:first-of-type h4 { margin-top: 12px; }
.nome-gruppo-doc { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.titolo-gruppo-doc { font-size: 13px; overflow-wrap: anywhere; }   /* il nome scorre accanto al codice e va a capo */
.titolo-gruppo-doc .esclusa-doc { margin-left: 6px; white-space: nowrap; }
.chi-gruppo-doc { font-size: 12px; font-weight: 400; color: var(--tenue); }
.esclusa-doc { font-size: 11px; font-weight: 400; font-style: italic; color: var(--tenue); }
.gruppo-attivita-doc.esclusa .titolo-gruppo-doc > span:not(.esclusa-doc) { color: var(--tenue); }
.gruppo-attivita-doc .conta-sezione { font-size: 12px; line-height: 19.5px; }

/* ---------- Amministrazione: Catalogo (Piano 16a) ---------- */
.catalogo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.intro-catalogo { margin: 0; max-width: 80ch; font-size: 13px; }
/* le quattro sezioni: schede sottolineate, un livello sotto le schede dell'Amministrazione */
.schede.schede-catalogo {
  display: flex; gap: 4px; max-width: 100%; margin-top: 2px; padding: 0; background: none; border-radius: 0;
  border-bottom: 1px solid var(--linea-forte); overflow-x: auto; scrollbar-width: none;
}
.schede-catalogo a { flex: none; padding: 8px 12px; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.schede-catalogo a:hover { border-bottom-color: var(--linea-forte); }
.schede-catalogo a[aria-current] { background: none; box-shadow: none; color: var(--blu); border-bottom-color: var(--blu); }
.schede-catalogo a:focus-visible { outline-offset: -2px; }
.sezione-catalogo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pannello-catalogo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.solo-lettore {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* testata: la revisione attiva; in bozza una fascia color attenzione con il conteggio dei valori cambiati */
.testa-catalogo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.testa-catalogo.in-bozza {
  margin: -18px -18px 0; padding: 14px 18px; background: var(--attenzione-tenue);
  border-bottom: 1px solid #f0dcb4; border-radius: var(--raggio) var(--raggio) 0 0;
}
.titolo-catalogo { min-width: 0; }
.titolo-catalogo h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; color: var(--inchiostro); }
.revisione-attiva { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--testo); }
.in-bozza .revisione-attiva .chip.neutro { background: var(--superficie); }
.motivo-revisione { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.in-bozza .motivo-revisione { color: #6b5a3e; }
.comandi-catalogo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.conta-modifiche { margin: 0 6px 0 0; font-size: 13px; font-weight: 600; color: var(--attenzione); font-variant-numeric: tabular-nums; }
.conta-modifiche.zero { font-weight: 400; color: var(--tenue); }
/* in bozza, l'azione ripetuta in fondo all'editor, sempre in vista mentre si scorre */
.barra-bozza {
  position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px 12px; margin: 0 -18px -18px; padding: 10px 18px; background: var(--superficie);
  border-top: 1px solid var(--linea-forte); border-radius: 0 0 var(--raggio) var(--raggio);
}
.corpo-catalogo { min-width: 0; }
.nota-catalogo { margin: 0 0 10px; }

/* le tabelle di Preparazione e Modello WP: colonne fisse, così nessuna si schiaccia */
.tabella-catalogo { font-size: 13px; table-layout: fixed; }
.tabella-catalogo th, .tabella-catalogo td { padding: 9px 12px; }
.amministrazione .tabella.tabella-catalogo td { vertical-align: top; overflow-wrap: break-word; }
.tabella-catalogo .col-durata { width: 8rem; }
.tabella-catalogo.in-modifica .col-durata { width: 11.5rem; }
.tabella-catalogo .col-chi { width: 12.5rem; }
.tabella-catalogo.in-modifica .col-chi { width: 14rem; }
.tabella-catalogo .col-viene { width: 27%; }
.tabella-catalogo .col-anticipo { width: 8.5rem; }
.tabella-catalogo .col-tipo { width: 8.5rem; }
.tabella-catalogo.in-modifica .col-tipo { width: 10.5rem; }
.tabella-catalogo .col-durata-wp { width: 8rem; }
.tabella-catalogo.in-modifica .col-durata-wp { width: 13rem; }
.tabella-catalogo .col-viene-wp { width: 26%; }
.tabella-catalogo td.num { font-variant-numeric: tabular-nums; }

/* attività principali e sottoattività: le principali in neretto, le sottoattività rientrate su una linea guida */
.nome-cella { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.nome-cella .codice { flex: none; min-width: 3.4rem; color: var(--tenue); }
.nome-att { min-width: 0; color: var(--testo); }
.tabella-catalogo tr.principale .nome-cella .codice { color: var(--inchiostro); font-weight: 600; }
.tabella-catalogo tr.principale .nome-att { color: var(--inchiostro); font-weight: 600; }
.tabella-catalogo tr.sotto td.prima-cella { position: relative; padding-left: 36px; }
.tabella-catalogo tr.sotto td.prima-cella::before {
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: var(--linea-forte);
}
.tabella-catalogo tr.sotto.ultima td.prima-cella::before { bottom: 12px; }
.tabella-catalogo tr.con-sotto td, .tabella-catalogo tr.sotto:not(.ultima) td { border-bottom-color: #eef1f4; }
.dalle-sotto { font-size: 12px; }

/* «Viene dopo»: i codici in piccole etichette, il nome nel suggerimento */
.codici-viene { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.codici-viene li {
  position: relative; display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px;
  border-radius: 4px; background: #eef1f5; cursor: default;
}
.codici-viene li:hover { background: #e2e7ee; }
.codici-viene .codice { font-size: 11.5px; }
.codici-viene.nomi li { font-size: 12px; color: var(--inchiostro); }
.testo-viene { overflow-wrap: anywhere; }
.testo-viene.tenue { font-size: 12px; }
.viene-cella { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tabella-catalogo td .editor-legami { margin-top: 8px; }

/* in bozza: controlli compatti; il valore della revisione attiva, barrato, solo dove è cambiato */
.tabella-catalogo input[type="number"] { width: 7ch; min-width: 0; min-height: 30px; height: 30px; padding: 0 6px; }
.tabella-catalogo select { width: 100%; min-width: 0; max-width: 100%; min-height: 30px; height: 30px; padding: 0 6px; font-size: 13px; }
.tabella-catalogo.in-modifica td:has(> .dalle-sotto) { padding-top: 14px; }
.tabella-catalogo.in-modifica td:has(> .viene-cella) { padding-top: 13px; }
/* «Non si anticipa»: «sì» in evidenza, «no» tenue; in bozza la casella con il «sì»/«no» accanto */
.cella-anticipo .si-anticipo { font-weight: 600; color: var(--inchiostro); }
.cella-anticipo .da-principale { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; }
.tabella-catalogo.in-modifica td.cella-anticipo { padding-top: 14px; }
.spunta-cella { min-height: 24px; }
.campo-cella { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.unita-campo { color: var(--tenue); font-size: 12px; }
.durata-unita { display: flex; gap: 6px; align-items: center; min-width: 0; }
.durata-unita input { flex: none; }
.amministrazione .tabella .durata-unita select { width: auto; flex: 1 1 0; min-width: 0; }
.valore-prima { display: none; font-size: 12px; color: #6b5a3e; text-decoration-color: #b08a4a; }
.cambiato .valore-prima { display: inline; }
td.cambiato > .valore-prima { display: block; margin-top: 3px; }
.tabella-catalogo td.cambiato, .campo-erogazioni.cambiato, .voce-catalogo.cambiato { background: var(--evidenza); }
.tabella-catalogo tbody tr:hover td.cambiato { background: var(--evidenza); }

/* Piano 16b: in bozza il nome è un campo nella prima cella, con le frecce dell'ordine; sotto, il nome di prima e «testi» */
.nome-bozza { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: 0 8px; }
.nome-bozza.nome-fase { grid-template-columns: minmax(0, 1fr) auto; }
.nome-bozza > .codice { color: var(--tenue); }
.tabella-catalogo tr.principale .nome-bozza > .codice { color: var(--inchiostro); font-weight: 600; }
.tabella-catalogo .campo-nome {
  width: 100%; min-width: 0; height: 32px; min-height: 32px; padding: 0 8px;
  font: inherit; font-size: 13px; line-height: 1.3; color: var(--inchiostro); text-overflow: ellipsis;
}
.tabella-catalogo tr.principale .campo-nome { font-weight: 600; }
.tabella-catalogo .campo-nome:invalid { border-color: var(--critico); }
/* il campo del nome (32 px) e le frecce (36 px) al centro dei campi delle altre celle */
.tabella-catalogo.in-modifica td.prima-cella { padding-top: 6px; }
.sotto-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 4px; padding-left: calc(3.4rem + 8px); }
.nome-fase + .sotto-nome { padding-left: 0; }
td.cambiato .sotto-nome > .valore-prima { flex-basis: 100%; overflow-wrap: anywhere; }
/* link nelle celle: la zona da toccare è di 32 px, la riga non si alza */
button.link.link-cella { display: inline-flex; align-items: center; min-height: 32px; margin: -6px -6px; padding: 0 6px; border-radius: 4px; }
button.link:disabled { color: var(--tenue); text-decoration: none; cursor: default; }
.nome-cella button.link.link-cella { margin-left: auto; font-weight: 400; color: var(--tenue); }
.nome-cella .link-cella:hover, .nome-cella .link-cella[aria-expanded="true"] { color: var(--blu); }
.fase-nuova { font-size: 11.5px; }
.tabella-catalogo tr.nuova td, .tabella-catalogo tbody tr.nuova:hover td { background: var(--evidenza); }
/* «testi»: un riquadro sotto la riga, allineato al nome */
.tabella-catalogo tr.con-testi td { border-bottom-color: transparent; }
.tabella-catalogo tr.riga-testi > td { padding: 0 12px 14px calc(12px + 3.4rem + 10px); }
.tabella-catalogo tbody tr.riga-testi:hover td { background: none; }
.tabella-catalogo tr.riga-testi.sotto > td { position: relative; padding-left: calc(36px + 3.4rem + 10px); }
.tabella-catalogo tr.riga-testi.sotto > td::before {
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: var(--linea-forte);
}
.testi-attivita {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 6px 14px; max-width: 60rem; margin: 0;
  padding: 12px 14px; background: var(--fondo); border-radius: var(--raggio); font-size: 13px;
}
.testi-attivita dt { font-size: 12px; font-weight: 600; color: var(--tenue); }
.testi-attivita dd { margin: 0; color: var(--inchiostro); overflow-wrap: anywhere; }
.testi-attivita .testi-collegati { margin: 0; }
.modulo-testi {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 6.5rem minmax(0, 1fr); gap: 10px 12px; max-width: 60rem;
  padding: 12px 14px; background: var(--fondo); border-radius: var(--raggio);
}
.modulo-testi .campo-largo { grid-column: 1 / -1; }
.modulo-testi .campo > span { font-weight: 600; }
.modulo-testi .campo > span small { font-weight: 400; }
.tabella-catalogo .modulo-testi input, .tabella-catalogo .modulo-testi select { width: 100%; min-height: 32px; height: 32px; padding: 0 8px; font-size: 13px; }
.modulo-testi textarea {
  width: 100%; min-width: 0; resize: vertical; font: inherit; font-size: 13px; line-height: 1.45; padding: 6px 8px;
  border: 1px solid var(--linea-forte); border-radius: 6px; background: var(--superficie);
}
.modulo-testi textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.modulo-testi .testi-collegati { margin: 0; }
.modulo-testi .errore { margin: 0; font-size: 13px; }
.modulo-testi .errore:focus { outline: none; }
.modulo-testi .azioni { margin-top: 0; }

/* Erogazioni */
.campi-erogazioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; }
.campo-erogazioni { gap: 6px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--raggio); }
.campo-erogazioni input { max-width: 7rem; }
.campo-erogazioni > .campo-cella { font-size: 13px; font-weight: 400; color: var(--testo); }
.campo-erogazioni small { font-size: 12px; line-height: 1.4; }
.valore-catalogo { font-size: 18px; color: var(--inchiostro); font-variant-numeric: tabular-nums; }

/* Documenti */
.schede-doc { flex-wrap: wrap; margin-bottom: 10px; max-width: 100%; }
.schede-doc button {
  min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--tenue);
  font-weight: 600; font-size: 13px;
}
.schede-doc button:hover { color: var(--inchiostro); }
.schede-doc button[aria-pressed="true"] { background: var(--superficie); color: var(--blu); box-shadow: 0 1px 2px rgba(23, 32, 43, .12); }
.conta-doc { margin-left: 4px; font-weight: 400; font-variant-numeric: tabular-nums; }
.sezione-doc h3 { margin: 18px 0 6px; font-size: 13px; color: var(--inchiostro); }
.sezione-doc h3 .tenue { font-weight: 400; }
.voci-catalogo { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--superficie); }
.voci-catalogo > li { padding: 8px 12px; border-bottom: 1px solid var(--linea); }
.voci-catalogo > li:last-child { border-bottom: 0; }
.voce-catalogo { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; font-size: 13px; }
.voce-catalogo > .codice { color: var(--tenue); }
.testo-voce { display: flex; flex-direction: column; gap: 2px; color: var(--inchiostro); overflow-wrap: anywhere; }
.testo-voce small { font-size: 12px; }
.testo-voce > .chip { align-self: flex-start; }
.dati-voce { color: var(--tenue); }
.azioni-voce { display: inline-flex; gap: 12px; white-space: nowrap; }
.voce-catalogo.ritirata .testo-voce { color: var(--tenue); }
.voce-catalogo.ritirata > .codice { text-decoration: line-through; text-decoration-color: #9aa5b3; color: var(--tenue); }
.nuova-voce { margin-top: 12px; }
.modulo-voce { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--fondo); border-radius: var(--raggio); }
.modulo-voce h4 { margin: 0; font-size: 13px; color: var(--inchiostro); }
.modulo-voce textarea, .conferma-catalogo textarea {
  width: 100%; min-width: 0; resize: vertical; font: inherit; font-size: 13px; line-height: 1.45; padding: 6px 8px;
  border: 1px solid var(--linea-forte); border-radius: 6px; background: var(--superficie);
}
.modulo-voce textarea:focus-visible, .conferma-catalogo textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.modulo-voce .azioni { margin-top: 0; }
.condizione-voce { margin: 0; padding: 0; border: 0; min-width: 0; }
.condizione-voce legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--tenue); }
.caselle-voce { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 4px 16px; }
.casella-piccola { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.casella-piccola input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--blu); }

/* «Vedi effetto e salva»: le differenze in un riquadro, poi le pratiche; i valori che non cambiano in tenue */
.anteprima-catalogo { display: flex; flex-direction: column; gap: 4px; border-color: var(--blu); }
.anteprima-catalogo h3 { margin: 0 0 8px; font-size: 15px; }
.anteprima-catalogo h4 { margin: 16px 0 6px; font-size: 13px; color: var(--inchiostro); }
.anteprima-catalogo > h4:first-of-type { margin-top: 4px; }
.lista-differenze { margin: 0; padding-left: 18px; font-size: 13px; }
.lista-differenze li { margin-bottom: 2px; overflow-wrap: anywhere; }
.anteprima-catalogo > .lista-differenze { padding: 10px 14px 10px 32px; background: var(--fondo); border-radius: 6px; color: var(--inchiostro); }
.anteprima-catalogo > .lista-differenze li:last-child { margin-bottom: 0; }
.conteggio-effetto { margin: 0 0 8px; font-size: 13px; }
.tabella-effetto { font-size: 13px; }
.tabella-effetto th, .tabella-effetto td { padding: 9px 12px; }
.amministrazione .tabella.tabella-effetto td { vertical-align: top; }
.tabella-effetto .valore-effetto > .tenue:only-child { white-space: nowrap; }
.tabella-effetto td.prima-cella { min-width: 11rem; }
.tabella-effetto td .codice { font-size: 11.5px; color: inherit; }
.tabella-effetto td strong { color: var(--inchiostro); font-weight: 600; }
.tabella-effetto td .piccolo { margin-top: 2px; }
.tabella-effetto tr.blocca td { background: var(--critico-tenue); }
.lista-breve { margin: 0; padding-left: 16px; }
.lista-breve li { overflow-wrap: anywhere; }
.critico-testo { color: var(--critico); margin: 2px 0 0; }
.ok-testo { color: var(--ok); margin: 2px 0 0; }
.conferma-catalogo { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--linea); }
.scelta-catalogo { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.scelta-catalogo legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--tenue); }
.scelta-catalogo input[type="radio"] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--blu); }
.conferma-catalogo .azioni { margin-top: 0; }
.errore-catalogo { padding: 10px 12px; color: var(--critico); background: var(--critico-tenue); border-radius: 6px; font-size: 13px; }
.errore-catalogo:focus { outline: none; }
.errore-catalogo p { margin: 0; font-weight: 600; }
.errore-catalogo ul { margin: 6px 0 0; padding-left: 18px; }
.errore-catalogo button { margin-top: 8px; }

/* Storico delle revisioni */
.revisioni-catalogo { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); }
.revisioni-catalogo > summary { padding: 12px 18px; cursor: pointer; font-weight: 600; color: var(--inchiostro); }
.revisioni-catalogo > summary .tenue { font-weight: 400; }
.revisioni-catalogo[open] > summary { border-bottom: 1px solid var(--linea); }
.revisioni-catalogo .tabella { border: 0; border-radius: 0; font-size: 13px; }
.tabella-revisioni tr.attiva td { background: #f8fafc; }
.tabella-revisioni tr.dettaglio-revisione td { background: var(--fondo); }
.tabella-revisioni .dettaglio-revisione p { margin: 0; }
.azioni-revisione { display: inline-flex; gap: 14px; white-space: nowrap; }
.pannello-catalogo .riuscito { font-size: 13px; }

@media (max-width: 640px) {
  .testa-catalogo { flex-direction: column; align-items: stretch; }
  .testa-catalogo.in-bozza { padding: 14px 16px; }
  .comandi-catalogo button { flex: 1 1 auto; }
  .comandi-catalogo .conta-modifiche { flex-basis: 100%; }
  .barra-bozza { padding: 10px 16px; }
  .barra-bozza .conta-modifiche { margin-right: auto; }
  /* righe compatte: il nome a tutta riga, poi i valori affiancati a due a due con l'etichetta sopra */
  .schede.schede-catalogo { gap: 0; }
  .schede-catalogo a { flex: 1 1 auto; padding: 8px 6px; text-align: center; }
  .amministrazione .scorri-x .tabella.tabella-catalogo tr {
    display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 8px 14px;
    padding: 12px 14px; border-bottom: 1px solid var(--linea);
  }
  .amministrazione .scorri-x .tabella.tabella-wp tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .amministrazione .scorri-x .tabella.tabella-catalogo tbody tr:last-child { border-bottom: 0; }
  .amministrazione .scorri-x .tabella.tabella-catalogo td { display: block; min-width: 0; padding: 0; border: 0; }
  .amministrazione .scorri-x .tabella.tabella-catalogo td[data-etichetta]::before {
    display: block; margin-bottom: 2px; font-size: 11px;
  }
  .amministrazione .scorri-x .tabella.tabella-catalogo td.prima-cella,
  .amministrazione .scorri-x .tabella.tabella-catalogo td[data-etichetta="Viene dopo"] { grid-column: 1 / -1; }
  .amministrazione .scorri-x .tabella.tabella-catalogo td.cambiato { margin: -4px -6px; padding: 4px 6px; border-radius: 4px; }
  .tabella-catalogo.in-modifica td.prima-cella, .tabella-catalogo.in-modifica td:has(> .dalle-sotto),
  .tabella-catalogo.in-modifica td:has(> .viene-cella), .tabella-catalogo.in-modifica td.cella-anticipo { padding-top: 0; }
  .amministrazione .scorri-x .tabella.tabella-catalogo tr.con-sotto,
  .amministrazione .scorri-x .tabella.tabella-catalogo tr.sotto:not(.ultima) { border-bottom-color: #eef1f4; }
  .amministrazione .scorri-x .tabella.tabella-catalogo tr.sotto {
    padding-left: 34px;
    background: linear-gradient(var(--linea-forte), var(--linea-forte)) 18px 0 / 1px 100% no-repeat;
  }
  .amministrazione .scorri-x .tabella.tabella-catalogo tr.sotto.ultima { background-size: 1px calc(100% - 14px); }
  .tabella-catalogo tr.sotto td.prima-cella { padding-left: 0; }
  .tabella-catalogo tr.sotto td.prima-cella::before { display: none; }
  .tabella-catalogo .nome-cella .codice { min-width: 0; }
  .nome-bozza { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sotto-nome { padding-left: 0; }
  .amministrazione .scorri-x .tabella.tabella-catalogo tr.con-testi { border-bottom-color: transparent; padding-bottom: 6px; }
  .amministrazione .scorri-x .tabella.tabella-catalogo tr.riga-testi { display: block; padding: 0 14px 12px; }
  .amministrazione .scorri-x .tabella.tabella-catalogo tr.riga-testi.sotto { padding-left: 34px; }
  .tabella-catalogo tr.riga-testi > td, .tabella-catalogo tr.riga-testi.sotto > td { padding: 0; }
  .tabella-catalogo tr.riga-testi.sotto > td::before { display: none; }
  .testi-attivita { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .testi-attivita dd + dt { margin-top: 6px; }
  .modulo-testi { grid-template-columns: minmax(0, 1fr); }
  .amministrazione .scorri-x .tabella.tabella-catalogo tr.nuova { background: var(--evidenza); }
  .amministrazione .scorri-x .tabella.tabella-catalogo tr.nuova td { background: none; }
  .modulo-testi .campo-pagina input { max-width: 8rem; }
  .modulo-testi .azioni button { flex: 1 1 auto; }
  /* l'effetto sulle pratiche: ogni valore con l'etichetta a sinistra */
  .amministrazione .scorri-x .tabella.tabella-effetto td { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; padding: 3px 14px; }
  .amministrazione .scorri-x .tabella.tabella-effetto td.prima-cella { padding-top: 8px; padding-bottom: 4px; }
  .amministrazione .tabella-revisioni td { display: block; padding: 4px 14px; }
  .amministrazione .tabella-revisioni td[data-etichetta]::before { display: block; margin-bottom: 2px; }
  .tabella-revisioni td.prima-cella { padding-top: 6px; font-weight: 600; }
  .voce-catalogo { grid-template-columns: minmax(0, 1fr); }
  .azioni-voce { justify-content: flex-start; }
  .campi-erogazioni { grid-template-columns: minmax(0, 1fr); }
  .modulo-voce .campi-coppia { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Zoom e Gantt grande (spec §42.3) ---------- */
/* Comandi della vista, a destra nella riga delle schede: zoom («−», scala, «+»), riepilogo, «Avvisi (n)» e «Gantt
   grande». La barra sopra il Gantt tiene solo modifiche e filtri: ognuna delle due righe sta su una linea. */
.comandi-vista { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-left: auto; min-width: 0; }
.barra-schede .comandi-vista { order: 2; }
.barra-schede .legenda { order: 3; }
/* zoom in un riquadro unico, alto e bordato come i pulsanti accanto: − scala + */
.zoom { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--linea-forte); border-radius: 6px; background: var(--superficie); overflow: hidden; }
.zoom .icona { width: 32px; height: auto; border-radius: 0; color: var(--blu); }
.zoom .icona:hover { background: var(--blu-tenue); }
.zoom .icona:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.scala-zoom { display: inline-flex; align-items: center; justify-content: center; min-width: 13ch; padding: 0 8px; border-left: 1px solid var(--linea); border-right: 1px solid var(--linea); font-size: 13px; font-weight: 600; color: var(--blu); white-space: nowrap; }
.zoom .icona[aria-disabled="true"] { opacity: .45; cursor: default; }
.zoom .icona[aria-disabled="true"]:hover { background: none; color: var(--tenue); }
#avvisi-grande[aria-expanded="true"] { border-color: var(--blu); background: var(--blu-tenue); }
/* Intestazione del Gantt (nastro, mesi, «oggi», DSAN) in un svg a parte, sopra lo spazio vuoto in cima al corpo:
   nel Gantt grande resta ferma mentre il corpo scorre in verticale. */
.gantt-testa { position: sticky; top: 0; z-index: 2; background: var(--superficie); }
/* Acceso: il Gantt occupa larghezza piena e altezza che resta (--altezza-gantt da app.js) e scorre al suo interno in
   entrambe le direzioni; nomi a sinistra e intestazione restano fermi. Dettaglio e avvisi stanno sopra, a destra. */
.layout.grande { grid-template-columns: minmax(0, 1fr); position: relative; }
.layout.grande .gantt {
  grid-template-columns: 240px max-content; overflow: auto; max-height: var(--altezza-gantt, 70vh);
  overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding: 48px 0 0 240px;  /* TESTA e colonna dei nomi */
  scrollbar-width: thin; scrollbar-color: #b7c0cc transparent;
}
.layout.grande .scorre { overflow: visible; }
.layout.grande .nomi { position: sticky; left: 0; z-index: 3; }
.layout.grande .testa-nomi { position: sticky; top: 0; z-index: 3; background: var(--superficie); }
.layout.grande .colonna-destra { display: none; }
.layout.grande.con-pannello .colonna-destra {
  display: flex; position: absolute; top: var(--cima-pannello, 0); right: 12px; z-index: 6;
  width: 340px; max-width: calc(100% - 24px); max-height: var(--altezza-pannello, 70vh); margin: 0; padding: 0;
  overflow-y: auto; overscroll-behavior: contain; border-radius: var(--raggio);
  box-shadow: 0 2px 6px rgba(23, 32, 43, .08), 0 12px 32px rgba(23, 32, 43, .16);
  scrollbar-width: thin; scrollbar-color: #b7c0cc transparent;
}
/* nel pannello una cosa sola: il Dettaglio della riga, oppure gli avvisi */
.layout.grande.con-dettaglio .colonna-destra .avvisi { display: none; }
/* riepilogo: il riquadro della scheda, compatto, al posto degli avvisi */
.layout.grande.con-riepilogo .colonna-destra .avvisi { display: none; }
#riepilogo-grande[aria-expanded="true"] { border-color: var(--blu); background: var(--blu-tenue); }
.riepilogo-grande { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.testa-riepilogo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.testa-riepilogo h2 { margin: 0; }
.riepilogo-grande > .obiettivo, .riepilogo-grande > .riquadro-progetto { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.riepilogo-grande .nota-tappe { margin: 0; }
/* legenda nel pannello del Gantt grande: una voce per riga */
.legenda.legenda-pannello { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 0; border: 0; background: none; }
.layout.grande:not(.con-dettaglio) .colonna-destra #modifica { display: none; }
.layout.grande .colonna-destra .avvisi { box-shadow: none; }
.layout.grande .testa-avvisi { align-items: center; }
@media (max-width: 640px) {
  #gantt-grande, #avvisi-grande, #riepilogo-grande { display: none; }
  .comandi-vista { margin-left: 0; }
}

/* Cronos di prova (CRONOS_AMBIENTE=prova): fascia fissa sopra la testata, mai in produzione */
.fascia-prova {
  position: sticky; top: 0; z-index: 1000;
  padding: 6px 24px; background: #b45309; color: #fff;
  font-weight: 600; font-size: 13px; text-align: center; letter-spacing: .01em;
}

/* «Fai slittare da qui…» (spec §44): comando nel blocco Date e dialogo con l'anteprima */
.riga-slitta { margin: 8px 0 0; font-size: 13px; }
.riga-slitta .link:disabled { color: var(--tenue); cursor: not-allowed; text-decoration: none; }
.dialogo-slitta { width: min(640px, calc(100vw - 32px)); }
.dialogo-slitta .scelta-slitta { border: 0; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.dialogo-slitta .scelta-slitta legend { font-size: 12px; font-weight: 600; color: var(--tenue); padding: 0; margin-bottom: 4px; }
.dialogo-slitta #sl-anteprima:not(:empty) { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linea); }
.elenco-slitta { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.elenco-slitta .spunta { white-space: normal; align-items: flex-start; overflow-wrap: anywhere; }
.elenco-slitta .spunta input { margin-top: 3px; flex: none; }
.dialogo-slitta #sl-anteprima > p { overflow-wrap: anywhere; }
.avviso-slitta { margin: 8px 0; padding: 8px 12px; border-radius: 6px; background: var(--attenzione-tenue);
  border: 1px solid color-mix(in srgb, var(--attenzione) 40%, transparent); color: var(--testo); }
.non-collegate { margin: 8px 0; font-size: 13px; color: var(--tenue); }
.non-collegate summary { cursor: pointer; }
.avviso-slitta > p, .avviso-slitta > ul { margin: 0; }
.avviso-slitta > ul { padding-left: 20px; margin-top: 4px; }