/* ============================================================
   UA PROJECT SUITE — DESIGN SYSTEM v1 (Fase 3, Sprint UI 1)
   Indicazioni esperto 18/07/2026: palette professionale a UN
   accento, spazio bianco, gerarchia tipografica forte, angoli
   morbidi, ombre leggere, animazioni 150-200 ms.
   METODO: prima i token e i componenti, poi le schermate.
   Caricato DOPO style.css: qui si ridefiniscono i fondamenti;
   il tema notte (html.tema-notte) conserva i suoi override.
   ============================================================ */

/* ---------------- TOKEN (tema chiaro) ---------------- */
html:not(.tema-notte) {
  --bg: #F6F8FA;
  --card-bg: #FFFFFF;
  --text: #111827;
  --muted: #6B7280;
  --border: #E5E7EB;
  --accent: #2563EB;        /* UN solo colore d'accento */
  --accent-soft: #EFF6FF;
  --accent-dark: #1D4ED8;
  --warn-bg: #FEF3C7;
}
:root {
  --ds-ok: #10B981;
  --ds-warn: #F59E0B;
  --ds-err: #EF4444;
  --ds-t: 170ms;            /* durata unica delle transizioni */
  --ds-r: 14px;             /* raggio card */
  --ds-r-sm: 10px;          /* raggio controlli */
  --ds-r-pill: 999px;       /* pill/badge */
  --ds-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px -12px rgba(17,24,39,.10);
  --ds-shadow-hover: 0 2px 4px rgba(17,24,39,.05), 0 14px 32px -12px rgba(17,24,39,.16);
  /* DS 2.1 (FASE 1) — scale canoniche additive: uniformano valori oggi hardcoded.
     Non cambiano l'aspetto esistente; sono da adottare progressivamente. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --h-control: 36px;        /* altezza standard di input/select/button */
  --h-control-sm: 30px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  --z-nav: 40; --z-sticky: 50; --z-overlay: 60; --z-modal: 70; --z-flash: 90;
  /* Fondo dei campi, tenuto separato da --card-bg: la regola di base qui sotto ha
     specificita' piu' alta di "html.tema-notte input" in style.css e la vincerebbe,
     appiattendo i campi sul colore della card. Di notte devono restare piu' scuri
     della card, altrimenti si distinguono solo dal bordo. */
  --field-bg: var(--card-bg);
}
html.tema-notte { --field-bg: #0f1526; }

/* ---------------- TIPOGRAFIA (gerarchia forte) ---------------- */
body { font-size: 14px; letter-spacing: .01em; }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
h3 { font-size: 13.5px; font-weight: 700; }
.sez2-head h1 { font-size: 26px; }
.sez2-head p, .hint { line-height: 1.55; }

/* ---------------- COMPONENTI: card ---------------- */
.card, .inv-pacc, .pm-card, .eula-box {
  border-radius: var(--ds-r);
  border-color: var(--border);
  box-shadow: var(--ds-shadow);
  transition: box-shadow var(--ds-t) ease, transform var(--ds-t) ease, border-color var(--ds-t) ease;
}
.card { padding: 18px 20px; }

/* ---------------- COMPONENTI: pulsanti ---------------- */
button, .file-btn, .dd summary {
  border-radius: var(--ds-r-sm);
  transition: background var(--ds-t) ease, border-color var(--ds-t) ease, color var(--ds-t) ease, transform var(--ds-t) ease, box-shadow var(--ds-t) ease;
}
.btn-primary {
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
  font-weight: 650; padding: 8px 14px;
  box-shadow: 0 1px 2px rgba(37,99,235,.25), 0 6px 16px -8px rgba(37,99,235,.45);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { border-radius: var(--ds-r-sm); }
button:not(.btn-primary):not(.var-chip):not(.tool-card):not(.entry2-card):not(.disc-card):not(.nav2-btn):hover { border-color: var(--accent); color: var(--accent-dark); }
/* default NEUTRO e theme-aware per i button SENZA classe dedicata (prima cadevano
   sul default del browser: grigio #f0f0f0 / testo nero, illeggibile in tema notte —
   es. «Salva ora», «Esporta JSON», il toggle tema in Impostazioni, «Esci»).
   Bassa specificità (0,0,1): ogni button con una classe propria lo sovrascrive. */
button { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); padding: 7px 13px; }

/* ---------------- COMPONENTI: campi ----------------
   Qui c'erano SOLO il raggio degli angoli e il focus: bordo, riempimento,
   carattere e sfondo restavano quelli predefiniti del browser. I campi dentro
   componenti con CSS proprio (tabelle, filtri PEC) sembravano a posto, tutti gli
   altri no: caselle schiacciate, carattere piu' piccolo del testo intorno, bordo
   sottile. Era il caso dei moduli di inserimento — Nuova gara, editor dello
   studio, antincendio. (segnalato dal committente 28/07/2026)

   La regola vale per TUTTI i campi: sistemare qui raddrizza ogni modulo
   dell'applicazione in una volta, invece di rincorrerli uno per uno.
   Caselle di spunta e interruttori restano fuori: non sono campi di testo. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select, textarea {
  min-height: var(--h-control);
  padding: 7px 11px;
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--text);
  font: inherit;            /* senza, i campi usano il carattere di sistema e stonano */
  line-height: 1.35;
  max-width: 100%;
  box-sizing: border-box;
}
textarea { min-height: 78px; padding: 9px 11px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }

/* La freccia predefinita di <select> cambia da un sistema all'altro ed e' la
   ragione per cui le tendine sembravano di un'altra applicazione. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Dentro le tabelle i campi restano compatti: li' la densita' e' il punto. */
.grid-table input:not([type="checkbox"]):not([type="radio"]),
.grid-table select, .grid-table textarea { min-height: var(--h-control-sm); padding: 4px 7px; }

/* Su iPhone Safari INGRANDISCE la pagina quando si tocca un campo con carattere
   sotto i 16px, e non la rimpicciolisce piu' da sola: il modulo resta tagliato. */
@media (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea { font-size: 16px; }
}

input, select, textarea {
  border-radius: var(--ds-r-sm) !important;
  transition: border-color var(--ds-t) ease, box-shadow var(--ds-t) ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent) !important;
  box-shadow: var(--focus-ring);
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
/* ---------------- COMPONENTI: moduli di inserimento ----------------
   Griglia a colonne che si adattano, con l'etichetta SOPRA il campo.
   I moduli erano scritti come <label>Testo<input></label> dentro una griglia
   inline: l'etichetta finiva di fianco al campo, le colonne non si allineavano e
   la stessa scheda cambiava aspetto a ogni larghezza. Con l'etichetta sopra, i
   campi partono tutti dalla stessa riga e la lettura scende in verticale.

   align-items: start e' necessario: senza, una riga con un campo piu' alto
   (una textarea) stira anche gli altri. */
.ds-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
  margin: var(--sp-3) 0 var(--sp-4);
}
.ds-form > label, .ds-campo {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;                       /* senza, un campo lungo sfonda la colonna */
  font-size: 12px; font-weight: 650; color: var(--muted);
}
.ds-form > label > input, .ds-form > label > select, .ds-form > label > textarea,
.ds-campo > input, .ds-campo > select, .ds-campo > textarea { width: 100%; }
/* un campo che occupa tutta la riga: note, oggetti lunghi, descrizioni */
.ds-form > label.larga, .ds-campo.larga { grid-column: 1 / -1; }
/* titolo di sezione dentro il modulo, a tutta larghezza */
.ds-form-titolo { grid-column: 1 / -1; margin: var(--sp-2) 0 0; }
/* riga dei pulsanti in fondo, staccata dai campi */
.ds-form-azioni {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

/* ---------------- schermata di accesso ----------------
   Le etichette stavano di fianco ai campi e i due campi finivano sulla stessa
   riga, uno lungo e uno corto: sembrava un modulo montato di fretta. Qui la
   colonna e' una sola e l'etichetta sta sopra, come in tutti gli altri moduli. */
.gate-accesso .gate-marchio { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.gate-accesso .gate-marchio h1 { margin: 0; font-size: 19px; line-height: 1.2; }
.gate-accesso .gate-marchio .marchio-mini { width: 38px; height: 38px; flex: 0 0 38px; margin-right: 0; vertical-align: 0; }
.gate-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.gate-form .lbl { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 650; color: var(--muted); margin: 0; }
.gate-form .lbl > input { width: 100%; }
/* La firma del fornitore: presente ma in secondo piano rispetto al marchio del cliente. */
.gate-firma {
  margin: var(--sp-4) 0 0; text-align: right;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); opacity: .75;
}

/* DS 2.1 — stato d'errore canonico dei campi (era assente) */
.is-error, input.is-error, select.is-error, textarea.is-error {
  border-color: var(--ds-err) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-err) 16%, transparent);
}
.field-msg-err { color: var(--ds-err); font-size: 12px; margin-top: 3px; display: block; }

/* ---------------- COMPONENTI: badge di stato (frasi, non numeri) ---------------- */
.ds-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; border-radius: 999px; padding: 3px 10px; }
.ds-badge.ok { color: #065F46; background: color-mix(in srgb, var(--ds-ok) 14%, transparent); }
.ds-badge.warn { color: #92400E; background: color-mix(in srgb, var(--ds-warn) 16%, transparent); }
.ds-badge.err { color: #991B1B; background: color-mix(in srgb, var(--ds-err) 13%, transparent); }
.ds-badge.off { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }

/* ---------------- COMPONENTI: barra di avanzamento ---------------- */
.ds-progress { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 14%, transparent); overflow: hidden; }
.ds-progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #60A5FA); transition: width 400ms ease; }

/* ---------------- DASHBOARD DI COMMESSA ---------------- */
.dash-testata { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.dash-testata h1 { margin: 0; }
.dash-perc { font-size: 22px; font-weight: 800; color: var(--accent); }
.dash-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 14px; }
.dash-riga { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px dashed var(--border); cursor: pointer; border-radius: 8px; transition: background var(--ds-t) ease; }
.dash-riga:hover { background: var(--accent-soft); }
.dash-riga:last-of-type { border-bottom: none; }
.dash-riga .ico { width: 22px; text-align: center; font-size: 15px; }
.dash-riga b { font-size: 13.5px; }
.dash-riga .frase { flex: 1; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.dash-fare { counter-reset: fare; }
.dash-fare .dash-riga::before { counter-increment: fare; content: counter(fare); width: 20px; height: 20px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 20px; }

/* ---------------- TIMELINE DELLA COMMESSA (stile GitHub) ---------------- */
.dash-timeline { position: relative; }
.dash-timeline::before { content: ""; position: absolute; left: 17px; top: 16px; bottom: 16px; width: 2px; background: var(--border); }
.tl-punto { display: flex; align-items: center; gap: 12px; padding: 7px 0 7px 6px; position: relative; }
.tl-punto .ds-stato { position: relative; z-index: 1; background-clip: padding-box; box-shadow: 0 0 0 4px var(--card-bg); }
.tl-punto span { font-size: 13px; color: var(--muted); }
.tl-punto.fatto span { color: var(--text); }
.tl-punto.prossimo span { color: var(--accent-dark); font-weight: 700; }
.tl-punto.prossimo .ds-stato { color: var(--accent-dark); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--card-bg); }

/* ---------------- CTA "PASSO SUCCESSIVO" (il software suggerisce) ---------------- */
.dash-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 11px 18px; margin-top: 12px; border-radius: 12px; }

/* ---------------- TEMPLATE COMUNE DEI TOOL (risultato dominante) ---------------- */
.tool-sez-tit { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.ris-primo { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; animation: ds-pop 180ms ease both; }
.ris-primo span { font-size: 12px; color: var(--muted); }
.ris-primo b { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.ris-primo.ko b { color: var(--ds-err); }
.ris-righe { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 26px; }
.ris-riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.ris-riga span { color: var(--muted); }
.ris-riga.ko b { color: var(--ds-err); }
.ris-riga.ko::before { content: "!"; color: var(--ds-err); font-weight: 800; }
.tool-contesto { white-space: nowrap; }
/* v2.2: stati del risultato principale (ko resta l'alias di error) */
.ris-primo.st-warning b { color: #B45309; }
.ris-primo.st-info b { color: #2563EB; }
.ris-primo.st-notCalculated b { color: var(--muted); }
.ris-stato { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; }
.ris-stato.st-ok { background: #DCFCE7; color: #166534; }
.ris-stato.st-warning { background: #FEF3C7; color: #92400E; }
.ris-stato.st-error { background: #FEE2E2; color: #991B1B; }
.ris-stato.st-info { background: #DBEAFE; color: #1E40AF; }
.ris-stato.st-notCalculated { background: var(--border); color: var(--muted); }
/* la scheda tecnica vive solo nella stampa/Word */
.solo-stampa { display: none; }
@media print { body.print-report .solo-stampa { display: block; } }

/* ---------------- TOOL CORRISPETTIVI ---------------- */
.corr-tabs { display: flex; gap: 8px; margin: 2px 0 14px; flex-wrap: wrap; }
.corr-tab { border: 1px solid var(--border); border-radius: 10px; padding: 9px 16px; font-weight: 650; font-size: 13px; cursor: pointer; background: transparent; color: inherit; transition: all 170ms ease; }
.corr-tab.on { background: #2563EB; border-color: #2563EB; color: #fff; }
.tema-notte .corr-tab.on { background: #3B82F6; border-color: #3B82F6; }
.corr-avvisi { margin-bottom: 8px; }
.corr-avvisi .corr-err { color: var(--ds-err); font-weight: 600; }
.corr-avvisi .corr-warn { color: #B45309; font-weight: 600; }
.corr-frase { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.corr-pers { color: #B45309; font-weight: 800; margin-left: 4px; font-size: 15px; }
/* FASE 4 — motivazione degli scostamenti G/Q dalle tavole */
.corr-warn { color: #B45309; font-weight: 600; }
.corr-ov-manca > td { background: color-mix(in srgb, #f59e0b 14%, transparent); }
.corr-ov-manca .corr-warn { background: #B45309; color: #fff; border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700; }
/* FASE 6 — modale "salva nel progetto: scegli la destinazione" */
.ua-dest-cerca { width: 100%; margin: 6px 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text); }
.ua-dest-lista { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ua-dest-riga { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.ua-dest-riga:hover { border-color: var(--accent); background: var(--accent-soft); }
.ua-dest-riga.att { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ua-dest-riga input[type="radio"] { margin-top: 3px; flex: 0 0 auto; }
.ua-dest-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ua-dest-nuovo { margin-top: 10px; border-style: dashed; }
.ua-dest-nuovonome { margin-top: 6px; width: 100%; max-width: 340px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text); }
/* STUDIO — grafici Budget ME portati (studio-charts.js, classi bud-*) */
.bud-chart { width: 100%; height: auto; display: block; }

/* Barre orizzontali in HTML anziché in SVG: dentro un viewBox stirato al 100% il
   testo scala con la larghezza del riquadro, e allo zoom del browser le etichette
   diventavano enormi o minuscole. Qui il testo ha misura propria e solo le barre
   si adattano. La colonna delle etichette si restringe da sola sugli schermi
   stretti, senza soglie da indovinare nel JavaScript. */
.bud-hbar { display: grid; gap: 8px; }
.bud-hbar-row {
  display: grid;
  grid-template-columns: minmax(0, clamp(72px, 28%, 220px)) 1fr auto;
  align-items: center;
  gap: 12px;
}
.bud-hbar-lab {
  font-size: 12px; line-height: 1.3; color: var(--muted); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bud-hbar-track { position: relative; display: flex; align-items: center; min-width: 0; }
.bud-hbar-fill {
  height: 100%; min-width: 3px; border-radius: 5px;
  transition: width .35s cubic-bezier(.2, .7, .3, 1), filter .15s ease;
}
.bud-hbar-fill.hovered { filter: brightness(1.08); }
.bud-hbar-val {
  font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Barra impilata: i segmenti si spartiscono la larghezza in proporzione al valore. */
.bud-stack { display: flex; gap: 3px; height: 22px; width: 100%; }
.bud-stack-seg {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 8px; border-radius: 5px; overflow: hidden;
  color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
  transition: filter .15s ease;
}
.bud-stack-seg.hovered { filter: brightness(1.08); }

@media (max-width: 560px) {
  .bud-hbar-row { grid-template-columns: minmax(0, 38%) 1fr auto; gap: 8px; }
  .bud-hbar-lab, .bud-hbar-val { font-size: 11px; }
}
.bud-gridline { stroke: color-mix(in srgb, var(--muted) 25%, transparent); stroke-width: 1; }
.bud-axline { stroke: color-mix(in srgb, var(--muted) 45%, transparent); stroke-width: 1; }
.bud-ax-lab { font-size: 11px; fill: var(--muted); }
.bud-val-lab, .bud-end-lab { font-size: 11.5px; font-weight: 600; fill: var(--text); }
.bud-seg-lab { font-size: 11px; font-weight: 600; }
.bud-mark { transition: opacity .12s; cursor: default; }
.bud-mark.hovered { opacity: .82; }
.bud-crosshair { stroke: color-mix(in srgb, var(--muted) 45%, transparent); stroke-width: 1; pointer-events: none; }
.bud-legend { display: flex; gap: 10px 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
.bud-lg-item { display: inline-flex; align-items: center; gap: 6px; }
.bud-lg-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.bud-lg-line { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.bud-chart-tip { position: fixed; z-index: var(--z-flash); display: none; background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--ds-shadow-hover); padding: 8px 10px; font-size: 12px; pointer-events: none; max-width: 280px; }
.bud-tip-row { display: flex; align-items: center; gap: 7px; padding: 1px 0; }
.bud-tip-row.strong .bud-tip-val { font-weight: 700; }
.bud-tip-key { width: 12px; height: 3px; border-radius: 2px; flex: 0 0 12px; }
.bud-tip-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.bud-tip-lab { color: var(--muted); }
.bud-meter { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.bud-meter-track { flex: 1; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--muted) 15%, transparent); overflow: hidden; min-width: 60px; }
.bud-meter-fill { height: 100%; border-radius: 5px 5px 5px 0; }
.bud-meter-val { font-size: 12px; font-weight: 600; min-width: 38px; text-align: right; }
.tnum { font-variant-numeric: tabular-nums; }

/* FASE 7A (pre-go-live) — Cantiere: barre di avanzamento della dashboard */
.cant-avz { display: grid; grid-template-columns: 220px 1fr auto; gap: var(--sp-3); align-items: center; margin: var(--sp-2) 0; }
.cant-avz small { grid-column: 2 / -1; margin-top: -4px; }
.cant-barra { height: 10px; border-radius: var(--ds-r-pill); background: color-mix(in srgb, var(--muted) 15%, transparent); overflow: hidden; }
.cant-fill { height: 100%; border-radius: var(--ds-r-pill); background: var(--accent); transition: width var(--ds-t) ease; }
.cant-fill.ko { background: var(--ds-err); }
@media (max-width: 640px) { .cant-avz { grid-template-columns: 1fr auto; } .cant-avz > span { grid-column: 1 / -1; } }

/* V5 §6: rimossi toolbar ricerca/filtri-funzione e badge delle card Strumenti
   (la ricerca globale è l'unico punto di accesso; niente simboli decorativi) */
.tool-card { position: relative; }

/* FASE 4 (pre-go-live) — Progetti 2.0: card ricche della lista commesse */
.pm-disc { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.pm-disc .ds-badge { font-size: 10.5px; padding: 1px 8px; }
.pm-next { font-size: 12px; color: var(--accent-dark); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-avvisi { font-size: 11.5px; color: #B45309; margin-top: 3px; }
.pm-stato-sel { font-size: 11px; padding: 2px 6px; border-radius: var(--ds-r-pill); border: 1px solid var(--border); background: var(--card-bg); color: var(--muted); max-width: 108px; }
.pm-stato-sel.st-Attiva { color: #065F46; border-color: color-mix(in srgb, var(--ds-ok) 45%, transparent); }
.pm-stato-sel.st-Conclusa { color: var(--accent-dark); }
.pm-stato-sel.st-Archiviata { opacity: .7; }
.pm-card.pm-arch { opacity: .62; }

/* FASE 6 (pre-go-live) — attività operative della commessa */
.att-riga { padding: 7px 4px; border-bottom: 1px dashed var(--border); }
.att-riga span { flex: 1; }
.att-riga .icon-btn { opacity: 0; transition: opacity var(--ds-t) ease; }
.att-riga:hover .icon-btn { opacity: 1; }
.att-fatta span { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ds-ok) 55%, transparent); }

/* FASE 7 — sotto-navigazione del gruppo "Progetti" (Panoramica · Progetto · Commesse) */
.pj-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pj-subtab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); background: var(--card-bg); color: var(--muted); border-radius: 999px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.pj-subtab svg.ic { width: 16px; height: 16px; }
.pj-subtab:hover { border-color: var(--accent); color: var(--text); }
.pj-subtab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pj-subtab.on svg.ic { color: #fff; }
/* pill dei carichi LATS importati (riferimento congruenza, v63) */
.result-pill.lats { background: rgba(14,165,233,.12); border: 1px solid rgba(14,165,233,.4); }
.result-pill.lats b { color: #0ea5e9; }

/* CNI: sezioni a fisarmonica con selezione della singola prestazione (v62) */
.cni-acc { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.cni-acc > summary { padding: 10px 14px; cursor: pointer; font-weight: 650; font-size: 13.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cni-acc > summary::-webkit-details-marker { display: none; }
.cni-acc[open] > summary { border-bottom: 1px solid var(--border); background: rgba(14,165,233,.05); }
.cni-conta { font-size: 11.5px; color: var(--muted); background: var(--border); border-radius: 999px; padding: 1px 9px; }
.cni-prest { padding: 6px 12px 10px; display: grid; gap: 4px; }
.cni-riga { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.cni-riga:hover { background: rgba(14,165,233,.06); }
.cni-riga.on { background: rgba(14,165,233,.1); }
.cni-sezioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.cni-sez { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 170ms ease; }
.cni-sez:hover { border-color: #0ea5e9; }
.cni-sez.on { border-color: #0ea5e9; background: rgba(14,165,233,.08); }
.cni-sez b { display: block; font-size: 13px; }
.cni-sez .hint { display: block; font-size: 11.5px; margin-top: 2px; }

/* separatore nella nav sidebar (strumenti globali barra) */
.nav2-sep { height: 1px; background: var(--border); margin: 6px 10px; opacity: .6; }
/* Home: allineamento coerente delle sezioni (richiesta utente v60) */
.entry2-foot { text-align: center; margin-top: 22px; color: var(--muted); font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.home-sezione { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.home-tit { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
/* chips materia scrollabili su mobile (adatta all'app) */
.materia-chips { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.materia-chip { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 640px) {
  .home-azioni { grid-template-columns: 1fr !important; }
  .cni-sezioni { grid-template-columns: 1fr; }
}

/* Home: azioni più COMPATTE (richiesta utente v58) */
.home-azioni .card { padding: 14px 16px !important; }
.home-azioni .card h2 { font-size: 15px; margin: 6px 0 4px; }
.home-azioni .card p { font-size: 12px; margin: 0 0 8px; }
.home-azioni .card .btn-primary, .home-azioni .card .btn-ghost { font-size: 12px; padding: 6px 12px; }

/* ---------------- COMPONENTI toolWorkspace v0.1 ---------------- */
.ws-overlay { position: fixed; inset: 0; background: rgba(10, 16, 30, .48); display: none; z-index: 300; align-items: center; justify-content: center; padding: 18px; }
.ws-overlay.on { display: flex; }
.ws-modal { max-width: 880px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; animation: ds-pop 180ms ease both; margin: 0; }
.ws-modal-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.ws-modal-testa h3 { margin: 0; font-size: 15px; }
.ws-modal-corpo { overflow: auto; padding: 10px 2px; }
.ws-modal-azioni { padding-top: 10px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ws-empty { padding: 18px; text-align: center; }
.ws-tool-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ws-tool-azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   toolWorkspace — componenti Blocco F (SPEC_TOOLWORKSPACE)
   Solo token del design system: il tema notte si adatta da sé.
   ============================================================ */
/* ContextBadge */
.ws-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; border-radius: 999px; padding: 3px 11px; }
.ws-ctx-prj { color: var(--accent-dark); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.ws-ctx-quick { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); border: 1px solid var(--border); }

/* ResultGrid */
.ws-grid-tit { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 4px; }
.ris-riga b.st-warning { color: #B45309; } .ris-riga b.st-info { color: var(--accent); } .ris-riga b.st-ok { color: #166534; }

/* AdvancedSettings */
.ws-adv { border: 1px solid var(--border); border-radius: var(--ds-r-sm); margin: 10px 0; background: color-mix(in srgb, var(--muted) 4%, transparent); }
.ws-adv > summary { cursor: pointer; padding: 9px 13px; font-weight: 650; font-size: 12.5px; list-style: none; }
.ws-adv > summary::-webkit-details-marker { display: none; }
.ws-adv[open] > summary { border-bottom: 1px solid var(--border); }
.ws-adv-corpo { padding: 12px 13px; }

/* DataTable */
.ws-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--ds-r-sm); }
.ws-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ws-table th, .ws-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ws-table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: color-mix(in srgb, var(--muted) 6%, transparent); }
.ws-table.sticky thead th { position: sticky; top: 0; z-index: 2; }
.ws-table td.num, .ws-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ws-table td.forte { font-weight: 700; }
.ws-table tbody tr:last-child td { border-bottom: none; }
.ws-table tbody tr:hover { background: var(--accent-soft); }
.ws-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); }

/* ExportActions + StickyActions + Unsaved */
.ws-export { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-sticky { position: sticky; bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 10px 0 2px; margin-top: 12px; border-top: 1px solid var(--border); background: linear-gradient(to top, var(--card-bg) 70%, transparent); z-index: 5; }
.ws-unsaved { animation: ds-pop 180ms ease both; }

/* HistoryPanel */
.ws-history { list-style: none; margin: 6px 0 0; padding: 0; }
.ws-history-voce { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0 8px 16px; border-left: 2px solid var(--border); position: relative; }
.ws-history-voce::before { content: ""; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ws-history-quando { font-size: 11px; color: var(--muted); }
.ws-history-chi { font-size: 11px; color: var(--muted); text-align: right; }
.ws-history-cosa { font-size: 13px; }
.ws-history-imp { font-size: 12.5px; font-weight: 700; text-align: right; }

/* Salva nel progetto — voci dei calcoli salvati */
.calc-voce { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.calc-voce:last-child { border-bottom: none; }
.calc-testa { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.calc-azioni { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.calc-azioni .btn-ghost { font-size: 12px; padding: 4px 10px; }

/* Drawer (pannello laterale) */
.ws-overlay-drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
.ws-drawer { max-width: 460px; width: 92%; height: 100%; max-height: none; border-radius: 0; display: flex; flex-direction: column; animation: ws-slide 220ms ease both; margin: 0; }
@keyframes ws-slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* SearchPicker + MultiSelect */
.ws-pick-cerca { width: 100%; margin-bottom: 6px; }
.ws-pick-lista, .ws-multi-lista { max-height: 40vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--ds-r-sm); }
.ws-pick-voce { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 8px 12px; border: none; border-bottom: 1px dashed var(--border); background: transparent; color: inherit; cursor: pointer; font-size: 13px; }
.ws-pick-voce:last-child { border-bottom: none; }
.ws-pick-voce:hover { background: var(--accent-soft); }
.ws-pick-voce[data-on] { background: var(--accent-soft); font-weight: 650; box-shadow: inset 3px 0 0 var(--accent); }
.ws-multi-voce { display: flex; gap: 9px; align-items: baseline; padding: 7px 12px; border-bottom: 1px dashed var(--border); font-size: 13px; cursor: pointer; }
.ws-multi-voce:last-child { border-bottom: none; }
.ws-multi-voce:hover { background: var(--accent-soft); }
.ws-multi-voce small { margin-left: auto; }

/* WorkspaceNavigation + layout dell'ambiente */
.ws-corpo { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.ws-panels { min-width: 0; }  /* le tabelle larghe scorrono in .table-wrap invece di sfondare il grid */
.ws-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 8px; }
.ws-nav-tab { display: flex; align-items: center; gap: 9px; text-align: left; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--ds-r-sm); background: transparent; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; }
.ws-nav-tab i { font-style: normal; opacity: .8; }
.ws-nav-tab:hover { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.ws-nav-tab.on { background: var(--accent-soft); color: var(--accent-dark); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
/* Su telefono le linguette di sezione diventano una tendina. Era un <select>
   nudo con la sola larghezza: minuscolo, con la grafica del sistema operativo, e
   non sembrava affatto il navigatore della sezione — sembrava un campo dimenticato
   li' in mezzo. (segnalato dal committente 28/07/2026)
   Ora ha il peso di un comando di navigazione: alto come un pulsante, testo in
   evidenza, colore d'accento e l'etichetta che dice a cosa serve. */
.ws-nav-mobile { display: none; margin: 0 0 14px; }
.ws-nav-mobile label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.ws-nav-mobile select {
  width: 100%;
  min-height: 46px;
  padding: 10px 38px 10px 14px;
  font-size: 16px; font-weight: 700;
  color: var(--accent-dark);
  background-color: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 7px 7px, 7px 7px;
}
.ws-nav-mobile select:focus { background-color: var(--card-bg); }
.ws-panel { display: none; animation: ds-pop 170ms ease both; }
.ws-panel.on { display: block; }
@media (max-width: 760px) {
  .ws-corpo { grid-template-columns: 1fr; gap: 0; }
  .ws-nav { display: none; }
  .ws-nav-mobile { display: block; }
}

/* catalogo prestazioni dello studio (Preventivi) */
.prest-acc { border: 1px solid var(--border); border-radius: var(--ds-r-sm); margin-bottom: 8px; }
.prest-acc > summary { cursor: pointer; padding: 9px 13px; font-weight: 650; font-size: 13px; list-style: none; }
.prest-acc > summary::-webkit-details-marker { display: none; }
.prest-acc[open] > summary { border-bottom: 1px solid var(--border); }
.prest-lista .ws-multi-voce { align-items: flex-start; padding: 9px 12px; }
.prest-lista .ws-multi-voce input { margin-top: 3px; }
.prev-serv { margin-bottom: 10px; }

/* selettore prestazioni Z-2 */
.selz2-filtri { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.selz2-lista { max-height: 36vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px; }
.selz2-voce { display: flex; gap: 8px; align-items: flex-start; padding: 7px 2px; border-bottom: 1px dashed var(--border); font-size: 13px; }
.selz2-voce:last-child { border-bottom: none; }
.selz2-star { cursor: pointer; color: var(--muted); background: none; border: none; font-size: 15px; padding: 0 2px; }
.selz2-star.on { color: #B45309; }
.selz2-opere { display: flex; gap: 10px 16px; flex-wrap: wrap; margin: 8px 0; }
.selz2-opere label { font-size: 12.5px; display: flex; gap: 6px; align-items: center; }

/* ---------------- CHIPS MATERIA (testata Strumenti) ---------------- */
.materia-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.materia-chip { border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 650; cursor: pointer; background: transparent; color: inherit; transition: all 170ms ease; }
.materia-chip:hover { border-color: var(--mc); }
.materia-chip.on { background: var(--mc); border-color: var(--mc); color: #fff; }

/* ---------------- SCHEDA DOCUMENTO (Report Engine) ---------------- */
.ds-doc-kpi { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 2px; }
.ds-doc-kpi div { min-width: 84px; }
.ds-doc-kpi b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.ds-doc-kpi span { font-size: 11.5px; color: var(--muted); }

/* ============================================================
   SPRINT UI 2 — sidebar, icone di stato, motion, tipografia
   ============================================================ */

/* tipografia professionale: usa Inter/Geist/Plex se presenti sul sistema,
   altrimenti Segoe UI Variable (nessun download: l'app resta offline) */
body { font-family: "Inter", "Geist", "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, Arial, sans-serif; }

/* SIDEBAR (desktop ≥1100px): la navigazione diventa colonna sinistra pulita.
   Parte SOTTO l'header reale: --top2-h è misurata dalla shell ad ogni render. */
@media (min-width: 1100px) {
  .nav2 {
    position: fixed; left: 0; top: var(--top2-h, 57px); bottom: 0; width: 212px;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 4px; padding: 16px 10px; border-bottom: none; border-right: 1px solid var(--border);
    overflow-y: auto;
  }
  .nav2-btn { justify-content: flex-start; padding: 10px 12px; border-radius: var(--ds-r-sm); font-size: 13.5px; }
  .nav2-btn.on { background: var(--accent-soft); color: var(--accent-dark); }
  /* main#content.content2 per BATTERE la regola `main#content { margin: 0 auto;
     max-width: 1280px }` di style.css (specificità con ID): senza, il contenuto
     si centrava FINENDO SOTTO la sidebar (bug storico scoperto il 22/07) */
  .content2, main#content.content2 { margin-left: 212px; margin-right: 0; width: auto; max-width: none; padding: 22px 30px 60px; }
  .top2 { flex-wrap: nowrap; }
}
/* tema notte: voci di navigazione ben leggibili */
html.tema-notte .nav2-btn { color: #9FB0D8; }
html.tema-notte .nav2-btn:hover { color: #DBEAFE; }
html.tema-notte .nav2-btn.on { background: rgba(59,130,246,.24); color: #DBEAFE; }

/* icone di stato (niente emoji: pallini vettoriali coerenti) */
.ds-stato { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.ds-stato svg.ic { width: 14px; height: 14px; }
.ds-stato.ok { color: #047857; background: color-mix(in srgb, var(--ds-ok) 16%, transparent); }
.ds-stato.warn { color: #B45309; background: color-mix(in srgb, var(--ds-warn) 20%, transparent); }
.ds-stato.err { color: #B91C1C; background: color-mix(in srgb, var(--ds-err) 15%, transparent); }
.ds-stato.off { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.dash-riga .dom, .doc-riga .dom { color: var(--muted); display: inline-flex; }
.dash-riga .dom svg.ic, .doc-riga .dom svg.ic { width: 16px; height: 16px; }

/* MOTION (180 ms: la UI "vive", mai istantanea) */
@keyframes ds-pop { from { opacity: 0; transform: scale(.94) translateY(2px); } to { opacity: 1; transform: none; } }
.ds-badge, .verdetto, .result-pill, .ds-doc-kpi div { animation: ds-pop 180ms ease both; }
.dash-riga[data-doc-goto]::after, .dash-riga[data-nav2]::after {
  content: "Apri →"; color: var(--accent); font-size: 12px; font-weight: 700;
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--ds-t) ease, transform var(--ds-t) ease;
}
.dash-riga:hover::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* tema notte armonizzato alla nuova palette */
html.tema-notte {
  --accent: #3B82F6; --accent-soft: rgba(59,130,246,.15); --accent-dark: #93C5FD;
  --ds-shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.6);
  --ds-shadow-hover: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.7);
}
html.tema-notte .top2, html.tema-notte .nav2 { background: rgba(15,21,38,.86); backdrop-filter: blur(8px); }
html.tema-notte .btn-primary { color: #fff; }

/* ---------------- HOME (tre azioni evidenti + recenti) ---------------- */
.home-azioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; width: 100%; max-width: 1000px; margin-bottom: 8px; }
.home-azione { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; padding: 18px; border: 1.5px solid var(--border); border-radius: var(--ds-r); background: var(--card-bg); color: var(--text); box-shadow: var(--ds-shadow); transition: transform var(--ds-t) ease, box-shadow var(--ds-t) ease, border-color var(--ds-t) ease; }
.home-azione:hover:not(.off) { transform: translateY(-2px); box-shadow: var(--ds-shadow-hover); border-color: var(--accent); }
.home-azione b { font-size: 15.5px; letter-spacing: -.01em; }
.home-azione span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.home-azione-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; }
.home-azione-ico svg.ic { width: 20px; height: 20px; }
.home-azione.off { opacity: .6; cursor: default; }
.home-sezione { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; max-width: 1000px; margin-top: 10px; justify-content: center; }
.home-tit { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.entry2-card.compatta { padding: 20px 16px 16px; }
.entry2-card.compatta .entry2-ico { width: 58px; height: 58px; border-radius: 17px; }
.entry2-card.compatta .entry2-ico svg.ic { width: 30px; height: 30px; }
.entry2-card.compatta .entry2-nome { font-size: 16px; }
html.tema-notte .home-azione { background: #171e33; }

/* ---------------- WIZARD (percorso guidato: 3 sole azioni) ---------------- */
.wiz-shell { max-width: 1080px; margin: 0 auto; padding: 22px 20px 96px; min-height: 100vh; }
.wiz-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wiz-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
.wiz-testa h1 { margin: 2px 0 0; }
.wiz-passi { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 18px; }
.wiz-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--card-bg); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 650; }
.wiz-pill .wiz-n { width: 17px; height: 17px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 14%, transparent); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; }
.wiz-pill.on { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.wiz-pill.on .wiz-n { background: var(--accent); color: #fff; }
.wiz-pill.fatto { color: #047857; }
.wiz-pill.fatto svg.ic { width: 15px; height: 15px; }
.wiz-footer { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--card-bg) 88%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--border); z-index: 50; }
.wiz-footer .btn-primary { padding: 10px 22px; font-size: 14px; }
html.tema-notte .wiz-footer { background: rgba(15,21,38,.88); }

/* ---------------- rifiniture globali ---------------- */
.nav2 { border-radius: 0; }
.nav2-btn { border-radius: var(--ds-r-sm); transition: background var(--ds-t) ease, color var(--ds-t) ease; }
.tool-card, .disc-card, .entry2-card { transition: transform var(--ds-t) ease, box-shadow var(--ds-t) ease, border-color var(--ds-t) ease; }
.tool-card:hover { box-shadow: var(--ds-shadow-hover); }
.table-wrap { border-radius: var(--ds-r-sm); }
html:not(.tema-notte) .top2, html:not(.tema-notte) .nav2 { background: rgba(255,255,255,.86); backdrop-filter: blur(8px); }

/* ---------------- FASE 6: preventivi — congelamento e revisioni ---------------- */
.prev-fs { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.prev-fs:disabled { opacity: .78; }
.prev-frozen-banner {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-3); padding: 10px 14px; border-radius: var(--ds-r-sm);
  background: color-mix(in srgb, var(--ds-warn) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--ds-warn) 45%, var(--border));
  font-size: 13px;
}
.prev-frozen-az { display: inline-flex; gap: var(--sp-2); align-items: center; }
.prev-rev { border: 1px solid var(--border); border-radius: var(--ds-r-sm); padding: 8px 12px; margin-top: 8px; }
.prev-rev > summary { cursor: pointer; }
.prev-rev[open] > summary { margin-bottom: 8px; }

/* ---------------- FASE 1: pagina di controllo componenti (#componenti) ---------------- */
.dsc-page { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 960px; margin: 0 auto; padding: var(--sp-4) var(--sp-4) 60px; display: flex; flex-direction: column; gap: var(--sp-4); }
.dsc-top { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; background: var(--bg); border-bottom: 1px solid var(--border); }
.dsc-top b { font-size: 16px; } .dsc-note { display: block; color: var(--muted); font-size: 12px; }
.dsc-top-az { display: flex; gap: var(--sp-2); align-items: center; }
.dsc-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.dsc-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.dsc-sw { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px; }
.dsc-sw-box { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); flex: 0 0 auto; }
.dsc-sw code { color: var(--muted); font-size: 11px; }
@media (max-width: 640px) { .dsc-page .grid-3 { grid-template-columns: 1fr; } }