:root {
    --blu:        #2d3748;
    --blu-mid:    #3d4a5c;
    --blu-light:  #edf0f4;
    --blu-accent: #4a5568;
    --verde:      #3a7d5c;
    --verde-light:#dcfce7;
    --arancio:    #b8722a;
    --arancio-light:#fff7ed;
    --giallo:     #ca8a04;
    --rosso:      #a8433f;
    --rosso-light:#fef2f2;
    --grigio-bg:  #f4f6f9;
    --grigio-card:#ffffff;
    --grigio-brd: #e2e8f0;
    --testo:      #1e293b;
    --testo-soft: #64748b;
    --testo-xsoft:#94a3b8;
    --font:       "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --shadow:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
    --radius:     8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--grigio-bg);
    color: var(--testo);
    font-size: 14px;
}

/* ── INTESTAZIONE ── */
.header-app {
    background: var(--blu);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.header-titolo { color: white; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: 0.2px; }
.btn-torna-indietro {
    color: rgba(255,255,255,0.75); text-decoration: none; font-size: 12.5px; font-weight: 500;
    border-radius: 6px; padding: 6px 10px; background: none; border: none;
    cursor: pointer; font-family: var(--font); transition: background 0.15s, color 0.15s;
}
.btn-torna-indietro:hover { background: rgba(255,255,255,0.12); color: white; }

.contenuto { max-width: 1300px; margin: 0 auto; padding: 22px 24px 48px; }

/* ── CARD / PANNELLO ── */
.pannello {
    background: var(--grigio-card);
    border: 1px solid var(--grigio-brd);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 18px;
    margin-bottom: 12px;
}
.pannello h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--testo); }
.pannello h3 { font-size: 13px; font-weight: 600; color: var(--testo); }
.pannello p { margin: 6px 0 0; }
.pannello p:first-child { margin-top: 0; }

.zona-drop {
    border: 2px dashed var(--grigio-brd);
    border-radius: var(--radius);
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--testo-soft);
    margin-bottom: 0.75rem;
    font-size: 13px;
}
.zona-drop.trascinamento-attivo { border-color: var(--blu); background: var(--blu-light); }
.link-file { color: var(--blu); text-decoration: underline; cursor: pointer; }
.link-file input { display: none; }

/* ── TABELLE ── */
.tabella-semplice, .tabella-dettaglio { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.contenitore-tabella-scroll { overflow-x: scroll; margin-top: 0.5rem; }
.contenitore-tabella-scroll table { margin-top: 0; }

/* Barra di scorrimento orizzontale duplicata SOPRA la tabella (oltre a
   quella vera sotto), sincronizzata via JS — comoda quando la tabella è
   molto lunga verticalmente e non si vuole scorrere fino in fondo solo
   per spostarsi lateralmente (§ Giuseppe, 21/07/2026). */
.scrollbar-superiore-finta { overflow-x: scroll; overflow-y: hidden; height: 16px; margin-top: 0.5rem; }
.scrollbar-superiore-finta-interno { height: 1px; }
.tabella-semplice thead, .tabella-dettaglio thead { background: var(--blu); color: white; }
.tabella-semplice th, .tabella-dettaglio th {
    padding: 8px 10px; text-align: left; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
}
.tabella-semplice td, .tabella-dettaglio td {
    padding: 7px 10px; font-size: 12.5px; border-bottom: 1px solid #eee;
}
.tabella-semplice tbody tr:hover, .tabella-dettaglio tbody tr:hover { background: #f8f9ff; }
/* Elenco dei break dentro una cella (tabella Parte/Lista/Break del
   fascicolo di Torre, § Giuseppe 31/07/2026) — una lista usa in pratica
   fino a 3-4 break: niente bullet/indentatura standard, una riga per
   break con spaziatura minima. */
.elenco-compatto { list-style: none; margin: 0; padding: 0; }
.elenco-compatto li { margin: 0 0 3px 0; }
.elenco-compatto li:last-child { margin-bottom: 0; }
.tabella-dettaglio th { cursor: pointer; user-select: none; }
.indicatore-ordinamento { font-size: 0.75rem; color: rgba(255,255,255,0.6); }

/* Nomi file cliccabili (tabella Parte/Lista/Break del fascicolo di
   Torre — Gestione, Verifica prima di procedere, schermata di scarica:
   § Giuseppe, 11/08/2026 "lo stile dei nomi file non è bellissimo").
   Prima erano link "grezzi" col blu/sottolineato di default del
   browser, che con nomi lunghi (frequenti: sono nomi Windchill) e più
   file in colonna diventava un muro di testo blu poco leggibile.
   Icona documento + colore testo normale (sottolinea SOLO in hover, il
   segnale "è cliccabile" resta ma non domina) + spezzatura di parola per
   non forzare mai lo scroll orizzontale della cella. Metadati (End Item/
   revisione/righe) spostati su una riga propria sotto al nome, invece
   di proseguire sulla stessa riga — più facile scorrere a colpo d'occhio
   i nomi file e leggere il dettaglio solo quando serve. */
.link-nome-file {
    color: var(--testo); text-decoration: none; font-weight: 500;
    display: inline-flex; align-items: flex-start; gap: 0.35rem;
    overflow-wrap: anywhere; line-height: 1.35;
}
.link-nome-file::before { content: "📄"; flex-shrink: 0; font-size: 0.9em; margin-top: 1px; }
.link-nome-file:hover { color: var(--blu); text-decoration: underline; }
/* Lista inserita a mano dalla griglia (§ Giuseppe, 11/08/2026 — Caso 3
   dei tre "tipi" di lista/break possibili): non è un vero file, il
   nome mostrato è una stringa sintetica "(inserimento manuale — N
   righe)" — la penna al posto del documento chiarisce a colpo d'occhio
   che lì non c'è nessun Excel da aprire fuori dall'app. */
.link-nome-file.link-manuale::before { content: "✏️"; }
.riga-file-con-dettaglio { display: block; }
.riga-file-con-dettaglio .nota-piccola { display: block; margin: 2px 0 0 1.25rem; }

/* Proporzioni colonne tabella Parte/Lista/Break del fascicolo di Torre
   (§ Giuseppe, 11/08/2026): "Lista da controllare" è per forza di cose
   SEMPRE un solo file, mentre "Break utilizzati" può contenerne diversi
   (e più lunghi in totale) — la larghezza di default del browser
   (proporzionale al contenuto più largo in quel momento) dava troppo
   spazio alla Lista e stringeva i Break. Larghezze fisse: Parte stretta,
   Lista moderata, Break la fetta maggiore. */
.tabella-parte-lista-break { table-layout: fixed; }
.tabella-parte-lista-break th:nth-child(1), .tabella-parte-lista-break td:nth-child(1) { width: 12%; }
.tabella-parte-lista-break th:nth-child(2), .tabella-parte-lista-break td:nth-child(2) { width: 28%; }
.tabella-parte-lista-break th:nth-child(3), .tabella-parte-lista-break td:nth-child(3) { width: 60%; }

/* Dettaglio confronto: elenco denso con molte colonne — carattere più
   piccolo del resto della maschera, sia per comodità di lettura su una
   lista tabellare sia perché aiuta a stare nello spazio orizzontale
   disponibile (§ Giuseppe, 16/07/2026). */
.tabella-dettaglio th { padding: 5px 7px; font-size: 9px; }
.tabella-dettaglio td { padding: 4px 7px; font-size: 10.5px; }

/* Colonna N. Parte/Doc sempre visibile durante lo scroll orizzontale
   nella maschera Dettaglio Breakdown, che può avere fino a 20 colonne
   (§ Giuseppe, 21/07/2026 — difficile capire come scorrere a destra).
   Selettore per data-chiave, non per posizione: nella ricerca unificata
   su più break le prime colonne sono diverse (Breakdown/End Item). */
#tabella-breakdown-dettaglio th[data-chiave="numero_parte_doc_break_down"],
#tabella-breakdown-dettaglio td[data-chiave="numero_parte_doc_break_down"] {
    position: sticky; left: 0; z-index: 1; box-shadow: 2px 0 4px rgba(0,0,0,0.08);
}
#tabella-breakdown-dettaglio thead th[data-chiave="numero_parte_doc_break_down"] { background: var(--blu); z-index: 2; }
#tabella-breakdown-dettaglio tbody td[data-chiave="numero_parte_doc_break_down"] { background: white; }

/* Progressivo (max 4 cifre) e Tipo (1 carattere) nella maschera Dettaglio
   Lista: colonne strette, lasciano più spazio alle altre (§ Giuseppe,
   22/07/2026). */
#tabella-breakdown-dettaglio th[data-chiave="prog_item"],
#tabella-breakdown-dettaglio td[data-chiave="prog_item"] { width: 75px; max-width: 75px; white-space: normal; }
#tabella-breakdown-dettaglio th[data-chiave="tipo_item_gen"],
#tabella-breakdown-dettaglio td[data-chiave="tipo_item_gen"] { width: 55px; max-width: 55px; white-space: normal; }

/* ── BOTTONI ── */
.btn-primario, .btn-secondario, .btn-anomalie {
    display: inline-block;
    padding: 7px 14px;
    border: none;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
}
.btn-primario:hover, .btn-secondario:hover, .btn-anomalie:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primario:disabled, .btn-secondario:disabled, .btn-anomalie:disabled {
    opacity: 0.4; cursor: not-allowed; transform: none !important; pointer-events: none;
}
.btn-primario:active, .btn-secondario:active, .btn-anomalie:active { transform: translateY(0); }

.btn-primario { background: var(--blu); color: white; }
.btn-secondario { background: transparent; color: var(--blu); border: 1.5px solid var(--blu); }
.btn-secondario:hover { background: var(--blu-light); }
.btn-anomalie { background: var(--arancio); color: white; }
.btn-elimina-riga { background: none; border: none; color: var(--rosso); cursor: pointer; text-decoration: underline; font-size: 12px; }
.btn-compatto { padding: 5px 11px; font-size: 11.5px; }
.btn-disabilitato { opacity: 0.4; pointer-events: none; cursor: not-allowed; transform: none !important; }

.messaggi { margin-top: 0.5rem; font-size: 12.5px; }
.messaggi .errore {
    display: block; color: var(--rosso); background: #fde8e8; border: 1px solid #f5c6c6;
    padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; margin-top: 4px;
}
.messaggi .successo { color: var(--verde); }
.nota-piccola { color: var(--testo-soft); font-size: 12px; }
.etichetta-conteggio { font-weight: 500; color: var(--testo-soft); font-size: 12.5px; }

input[type="text"], input[type="password"], select, textarea {
    padding: 8px 10px;
    border: 1px solid var(--grigio-brd);
    border-radius: 5px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--testo);
    background: white;
    outline: none;
}
input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus { border-color: var(--blu); }

/* ── CARD STATISTICHE ── */
.griglia-card { display: flex; flex-wrap: wrap; gap: 12px; }
.card-stat {
    flex: 1 1 150px; border-radius: var(--radius); padding: 14px 16px;
    background: var(--grigio-card); border: 1px solid var(--grigio-brd);
    border-top: 3px solid var(--grigio-brd); box-shadow: var(--shadow);
}
.card-stat-numero { display: block; font-size: 26px; font-weight: 600; line-height: 1; }
.card-stat-etichetta { display: block; font-size: 11.5px; color: var(--testo-soft); margin-top: 6px; line-height: 1.4; }
.card-ok { border-top-color: var(--verde); } .card-ok .card-stat-numero { color: var(--verde); }
.card-ko1 { border-top-color: var(--arancio); } .card-ko1 .card-stat-numero { color: var(--arancio); }
.card-ko2 { border-top-color: var(--giallo); } .card-ko2 .card-stat-numero { color: var(--giallo); }
.card-ko3 { border-top-color: var(--rosso); } .card-ko3 .card-stat-numero { color: var(--rosso); }

.griglia-due-colonne { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; align-items: start; }
.contenitore-torta { display: flex; justify-content: center; align-items: center; }
.contenitore-torta svg { max-width: 100%; height: auto; }
/* Grafico a barre separate per schermo (§ Giuseppe, 08/08/2026) — SOLO
   maschera/cruscotto, il PDF ufficiale resta la torta in scala di grigi.
   Orizzontali (provate verticali, ma con valori molto sbilanciati le
   barre piccole restavano poco leggibili e "disallineate" — Giuseppe:
   "forse orizzontali le barre rimangono allineate"). */
.barre-riepilogo-schermo { width: 100%; max-width: 360px; }
.totale-barre-riepilogo { font-size: 12.5px; color: var(--testo-soft); margin-bottom: 10px; }
.riga-barra-riepilogo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.riga-barra-riepilogo:last-child { margin-bottom: 0; }
.etichetta-barra-riepilogo { width: 150px; font-size: 12.5px; color: var(--testo); flex-shrink: 0; }
.traccia-barra-riepilogo { flex: 1; background: var(--grigio-bg); border-radius: 4px; height: 16px; overflow: hidden; }
.riempimento-barra-riepilogo { height: 100%; border-radius: 4px; min-width: 2px; }
.valore-barra-riepilogo { width: 90px; text-align: right; font-size: 12.5px; color: var(--testo); flex-shrink: 0; }

/* ── ATTESA ── */
.overlay-attesa {
    position: fixed; inset: 0; background: rgba(45,55,72,0.55);
    display: flex; align-items: center; justify-content: center; z-index: 300;
}
.overlay-attesa.nascosto { display: none; }
.riquadro-attesa { background: white; padding: 1.4rem 1.8rem; border-radius: var(--radius); text-align: center; min-width: 240px; max-width: 380px; box-shadow: var(--shadow-md); }
.barra-indeterminata { height: 5px; border-radius: 3px; background: var(--grigio-bg); overflow: hidden; margin-bottom: 0.7rem; position: relative; }
.barra-indeterminata::after {
    content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
    background: var(--blu); animation: scorrimento-barra 1.1s infinite linear;
}
@keyframes scorrimento-barra { from { left: -40%; } to { left: 100%; } }

/* ── MODALI (Parametri Confronto / Report) ── */
.overlay-modale {
    position: fixed; inset: 0; background: rgba(30,41,59,0.45);
    display: flex; align-items: center; justify-content: center; z-index: 200;
}
.overlay-modale.nascosto { display: none; }
.finestra-modale {
    background: white; border-radius: var(--radius); box-shadow: var(--shadow-md);
    width: 640px; height: 460px; min-width: 320px; min-height: 200px;
    max-width: 95vw; max-height: 90vh;
    resize: both; overflow: auto; display: flex; flex-direction: column;
}
.finestra-modale-larga { width: 820px; }
.finestra-modale-massimizzata { width: 96vw !important; height: 92vh !important; }
.intestazione-modale {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--blu); color: white; padding: 10px 16px; font-size: 13px; font-weight: 600;
    flex-shrink: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.btn-chiudi-modale, .btn-massimizza-modale { background: none; border: none; color: white; cursor: pointer; padding: 0 0.3rem; }
.btn-chiudi-modale { font-size: 1rem; }
.btn-massimizza-modale { font-size: 0.9rem; }
.btn-chiudi-modale:hover, .btn-massimizza-modale:hover { color: #cbd5e0; }
.corpo-modale { padding: 16px 18px; overflow-y: auto; flex: 1; }
.corpo-modale p { margin: 0 0 0.7rem 0; }
.corpo-modale p:last-child { margin-bottom: 0; }

/* ── Icona guida in linea (apre popup con la spiegazione estesa) ── */
.btn-icona-help {
    background: none; border: 1.5px solid var(--blu); color: var(--blu);
    border-radius: 50%; width: 20px; height: 20px; font-size: 12px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; vertical-align: middle; margin-left: 6px; padding: 0; flex-shrink: 0;
}
.btn-icona-help:hover { background: var(--blu); color: white; }
.btn-icona-help-piccolo { width: 16px; height: 16px; font-size: 10px; }

/* ── Esempio grafico di struttura cartelle nei popup di guida ── */
.esempio-struttura-cartelle {
    background: var(--grigio-bg, #f4f6f9); border: 1px solid var(--bordo, #dde3ea);
    border-radius: 8px; padding: 10px 14px; margin: 0.4rem 0 0.9rem 0;
    font-family: "Consolas","Menlo",monospace; font-size: 12.5px; line-height: 1.75;
    white-space: pre; overflow-x: auto;
}
.esempio-struttura-cartelle .etichetta-esempio {
    display: block; font-family: var(--font); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px; color: var(--testo-xsoft);
    margin-bottom: 4px;
}

/* ── FORM: pattern "campo" (etichetta sopra, non a fianco) ── */
.gruppo-campi { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-bottom: 4px; }
.campo { flex: 1 1 260px; min-width: 220px; }
.campo.campo-largo { flex: 1 1 100%; }
.campo-pulsanti-testata { display: flex; align-items: flex-start; gap: 0.5rem; padding-top: 4px; }
.campo label {
    display: block; font-size: 11px; color: var(--testo-xsoft);
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px;
}
.campo input[type="text"], .campo input[type="password"], .campo textarea { width: 100%; }
.campo textarea { resize: vertical; min-height: 60px; font-family: var(--font); }

.riga-form { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.riga-form label { flex: 0 0 130px; font-size: 12px; text-align: right; color: var(--testo-soft); }
.riga-form input { flex: 1; min-width: 0; }
.corpo-modale .riga-form label { flex-basis: 210px; }
.riga-form-larga { flex-direction: column; align-items: stretch; gap: 0.2rem; }
.riga-form-larga label { flex-basis: auto !important; text-align: left !important; }
.riga-form-larga textarea { width: 100%; resize: vertical; }

.etichetta-piccola { display: block; font-size: 12px; margin-top: 0.5rem; color: var(--testo-soft); }
.contenitore-lista-compatta { max-height: 170px; overflow-y: auto; }
/* Solo la tabella Parte/Lista/Break del fascicolo di Torre (§ Giuseppe,
   11/08/2026 — "spazio sprecato in fondo a destra"): da quando i
   metadati (End Item/rev./righe) sono su riga propria sotto al nome
   file, ogni riga occupa più altezza di prima — il tetto di 170px
   ereditato da .contenitore-lista-compatta (tarato sulla tabella
   breakdown manuale, righe singole) scattava lo scroll anche con le
   sole 3 Parti massime previste, lasciando la barra di scorrimento e lo
   spazio sotto vuoti senza motivo. Tetto alzato SOLO qui (selettore più
   specifico, non tocca l'altra tabella) — resta comunque un tetto, per
   il caso raro di una Parte con molti breakdown (fino a 10 previsti). */
.contenitore-fascicolo-torre { max-height: 260px; }
.separatore { border: none; border-top: 1px solid var(--grigio-brd); margin: 1rem 0; }
.riga-azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.riga-pulsanti-filtro { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.separatore-filtri { width: 1px; align-self: stretch; background: var(--grigio-brd); margin: 0 0.2rem; }
.gruppo-azioni-livello { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--grigio-brd); }
.gruppo-azioni-livello .riga-azioni { margin-top: 4px; }
.etichetta-gruppo-livello {
    display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
    color: var(--testo-soft); text-transform: uppercase;
}
.riga-intestazione-maschera { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.etichetta-vista-attuale {
    display: inline-block; background: var(--blu-light); color: var(--blu);
    border-radius: 5px; padding: 6px 12px; font-size: 12.5px; margin: 6px 0 10px;
}

.btn-filtro {
    background: white; border: 1px solid var(--grigio-brd); color: var(--testo);
    border-radius: 18px; padding: 4px 11px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.btn-filtro:hover { border-color: var(--blu); color: var(--blu); }
.btn-filtro-attivo { background: var(--blu); color: white; border-color: var(--blu); }
.etichetta-checkbox { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0.75rem; font-size: 12.5px; }

/* ── OPZIONE A CARD ── (ispirato ad Archivio DUTT, § Giuseppe 02/08/2026:
   scelta on/off più evidente di un checkbox semplice — riquadro
   cliccabile, si evidenzia di verde con pallino pieno quando selezionato.
   Nessun JS necessario: usa :has() per lo stato selezionato.) */
.opzione {
    display: block; border: 1.5px solid var(--grigio-brd); border-radius: 8px;
    padding: 10px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
    margin: 6px 0;
}
.opzione:hover { border-color: var(--blu-accent); }
.opzione:has(input:checked) { border-color: var(--verde); background: var(--verde-light); }
.opzione input[type="checkbox"], .opzione input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.opzione-titolo {
    font-size: 12.5px; font-weight: 600; color: var(--testo);
    display: flex; align-items: center; gap: 8px;
}
.opzione-titolo .dot {
    width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--testo-xsoft);
    display: inline-block; flex-shrink: 0; transition: border-color 0.15s, background 0.15s;
}
.opzione:has(input:checked) .opzione-titolo .dot { border-color: var(--verde); background: var(--verde); }
.opzione-desc { font-size: 11.5px; color: var(--testo-soft); line-height: 1.4; margin-top: 3px; margin-left: 21px; }

.nascosto { display: none; }
/* § Giuseppe, 07/08/2026: per elementi che JS continua a toggleare con
   .nascosto ma che vogliamo tenere SEMPRE invisibili senza toccare il
   JS — es. "Eredita nota L0", concettualmente ritirato ma non rimosso
   dal codice, facile da far tornare togliendo solo questa classe. */
.nascosto-permanente { display: none !important; }
#pannello-inserimento-manuale { margin-top: 0.75rem; overflow-x: auto; }
details summary { cursor: pointer; font-weight: 600; margin-bottom: 0.75rem; font-size: 13px; }

/* Revisione sequenziale — una anomalia alla volta, pensata per lavoro
   concentrato del Capo Ufficio (§ Giuseppe, 19/07/2026). */
.finestra-sequenziale {
    background: white; border-radius: var(--radius); box-shadow: var(--shadow-md);
    width: 620px; max-width: 95vw; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.intestazione-sequenziale {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--blu); color: white; padding: 12px 20px; font-size: 14px; font-weight: 600;
    flex-shrink: 0;
}
.corpo-sequenziale { padding: 24px; overflow-y: auto; flex: 1; }
.scheda-info-anomalia {
    background: var(--grigio-bg); border-radius: 6px; padding: 14px 18px; margin-bottom: 18px;
}
.riga-info { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; gap: 1rem; }
.etichetta-info { color: var(--testo-soft); flex-shrink: 0; }
.riga-info span:last-child { text-align: right; font-weight: 500; }
.badge-esito {
    display: inline-block; padding: 2px 10px; border-radius: 10px; font-weight: 700; font-size: 12px;
    background: var(--arancio-light); color: var(--arancio);
}
.piede-sequenziale {
    display: flex; justify-content: space-between; gap: 0.6rem; padding: 14px 20px;
    border-top: 1px solid var(--grigio-brd); flex-shrink: 0; background: var(--grigio-bg);
}
/* § Giuseppe, 13/08/2026 — bug reale: .piede-sequenziale (display:flex)
   viene dopo .nascosto (display:none) nel foglio, quindi a parità di
   specificità vince lei — un elemento con entrambe le classi restava
   sempre visibile. Selettore per ID, più specifico, per garantire che
   "nascosto" vinca sempre su questo elemento specifico. */
#eredita-piede-riepilogo.nascosto { display: none; }
.messaggio-completamento { text-align: center; padding: 2rem 1rem; }
.messaggio-completamento h2 { color: var(--verde); font-size: 18px; }

.elenco-notifica-sessioni { margin: 0 0 14px; padding-left: 20px; font-size: 13px; }
.campo-annotazione-ad {
    width: 100%; min-width: 140px; border: 1px solid transparent; background: transparent;
    padding: 3px 5px; font-size: inherit; font-family: inherit; border-radius: 4px;
}
.campo-annotazione-ad:hover { border-color: var(--grigio-brd); background: white; }
.campo-annotazione-ad:focus { border-color: var(--blu); background: white; outline: none; }
.campo-annotazione-errore { border-color: var(--rosso) !important; background: var(--rosso-light) !important; }
.badge-esito.badge-ok { background: var(--verde-light); color: var(--verde); }
.btn-apri-nota-riga {
    width: 100%; text-align: left; background: white; border: 1px solid var(--grigio-brd);
    border-radius: 5px; padding: 4px 8px; font-size: 12px; cursor: pointer; color: var(--testo);
}
.btn-apri-nota-riga:hover { border-color: var(--blu); color: var(--blu); }
.btn-verifica-descrizione {
    flex-shrink: 0; background: white; border: 1px solid var(--grigio-brd);
    border-radius: 5px; padding: 2px 7px; font-size: 12px; cursor: pointer;
}
.btn-verifica-descrizione:hover { border-color: var(--blu); background: var(--blu-light); }
.gruppo-verifica-manuale {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px;
    border: 1px solid var(--grigio-brd); border-radius: 8px; background: var(--grigio-bg);
}
.soglia-verifica-manuale { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--testo-soft); }
.soglia-verifica-manuale label { white-space: nowrap; }
.soglia-verifica-manuale input[type="number"] { width: 60px; }
.btn-apri-nota-riga.btn-nota-vuota { color: var(--testo-soft); font-style: italic; }
.elenco-notifica-sessioni li { margin-bottom: 4px; }
.badge-stato-sessione { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; background: var(--grigio-bg); color: var(--testo-soft); }
.badge-stato-sessione[data-stato="In lavorazione"] { background: var(--blu-light); color: var(--blu); }
.badge-stato-sessione[data-stato="Inviata al Responsabile per validazione"] { background: var(--arancio-light); color: var(--arancio); }
.badge-stato-sessione[data-stato="Rimandata all'operatore"] { background: var(--rosso-light); color: var(--rosso); }
.badge-stato-sessione[data-stato="Validata dal Responsabile"] { background: var(--verde-light); color: var(--verde); }
.badge-stato-sessione[data-stato="Report generato"] { background: #e5e7eb; color: #374151; }
/* Badge "Fascicolo Torre" (§ Giuseppe, 31/07/2026: "metterei un qualcosa
   che faccia riconoscere subito che si tratta di un controllo relativo a
   un fascicolo di Torre") — viola, colore non usato da nessuno stato,
   per non confondersi con la semantica arancio/rosso/verde/blu già in
   uso per lo Stato. */
.badge-fascicolo-torre { display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10.5px; font-weight: 700; background: #ede9fe; color: #6d28d9; white-space: nowrap; }
/* Badge "Lotto <id>" (§ Giuseppe, 11/08/2026): sessioni nate dallo stesso
   lancio del batch multi-Torre — colore proprio (ambra), distinto sia
   dal viola di "Fascicolo Torre" (i due badge possono comparire insieme
   sulla stessa riga) sia dalla semantica arancio/rosso/verde/blu dello
   Stato. */
.badge-lotto-massivo { display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10.5px; font-weight: 700; background: #fef3c7; color: #92400e; white-space: nowrap; }
.celle-azioni-sessione { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.celle-azioni-sessione button { min-width: 88px; }
.riga-barra-azioni td { border-top: none; padding-top: 0; padding-bottom: 0.6rem; }
.barra-azioni-cruscotto { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: stretch; }
.barra-azioni-cruscotto + .barra-azioni-cruscotto { margin-top: 0.4rem; }
.nota-fuori-mano { margin-top: 0.5rem; line-height: 1.4; }

.banner-novita {
    background: var(--grigio-card);
    border: 1px solid var(--grigio-brd);
    border-left: 4px solid var(--arancio);
    color: var(--testo);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}
.banner-novita .elenco-notifica-sessioni { list-style: none; margin: 6px 0 0; padding: 0; }
.banner-novita .elenco-notifica-sessioni li { padding: 3px 0; }
.banner-novita a { color: #1a3a5c; }
.badge-novita {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 6px;
}
.badge-novita-rimandata { background: #fde8e8; color: #c0392b; }
.badge-novita-validata { background: #e8f8ee; color: #1a8a4a; }
.badge-novita-chat { background: #e8f0f8; color: #1a3a5c; }
tr.riga-con-novita td:first-child { border-left: 4px solid var(--arancio); }

.btn-espandi-riga {
    background: none; border: 1px solid var(--grigio-brd); border-radius: 5px;
    width: 24px; height: 24px; font-size: 12px; color: var(--testo-soft);
    cursor: pointer; line-height: 1;
}
.btn-espandi-riga:hover { background: var(--blu-light); color: var(--blu); }
tr.filtro-escluso { display: none; }

/* --- Popup "Novità" in basso a destra, mostrato appena l'operatore
   atterra sulla maschera principale — stesso schema del popup solleciti
   di Archivio DUTT (§ Giuseppe, 24/07/2026). --- */
.popup-novita {
    position: fixed; bottom: 20px; right: 20px;
    background: white; border: 1.5px solid var(--arancio); border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    max-width: 380px; width: 90%; z-index: 1000; overflow: hidden;
    animation: popupNovitaSlideUp 0.25s ease;
}
.popup-novita.nascosto { display: none; }
@keyframes popupNovitaSlideUp {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.popup-novita-header {
    background: var(--arancio); color: white; padding: 10px 14px;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 600; font-size: 13px;
}
.popup-novita-header button {
    background: none; border: none; color: white; font-size: 18px;
    cursor: pointer; line-height: 1; opacity: 0.8;
}
.popup-novita-header button:hover { opacity: 1; }
#popup-novita-lista { padding: 6px 14px; max-height: 320px; overflow-y: auto; }
.popup-novita-lista-voce {
    display: block; padding: 10px 0; border-bottom: 1px solid #f0f0f0;
    text-decoration: none; color: inherit;
}
.popup-novita-lista-voce:last-child { border-bottom: none; }
.popup-novita-lista-voce:hover .popup-novita-titolo { text-decoration: underline; }
.popup-novita-titolo { display: block; color: var(--testo); font-weight: 700; font-size: 13px; }
.popup-novita-stato {
    display: block; font-style: italic; font-weight: 600; font-size: 12px;
    margin-top: 2px; color: var(--arancio);
}
.popup-novita-stato-validata { color: var(--verde); }
.popup-novita-stato-chat { color: var(--blu); }
.popup-novita-data { display: block; font-size: 11px; color: var(--testo-xsoft); margin-top: 3px; }
.popup-novita-footer {
    padding: 8px 14px; border-top: 1px solid #f0f0f0; text-align: right;
    font-size: 11px; color: var(--testo-xsoft);
}

/* --- Tre famiglie di pulsanti nei cruscotti: strumenti (blu) / azioni sul
   controllo nel complesso (arancio, elimina in rosso) / collaborazione
   (verde) — stessa forma, colore diverso per categoria logica
   (§ Giuseppe, 23/07/2026). --- */
.gruppo-azioni-cat { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.gruppo-azioni-cat + .gruppo-azioni-cat { margin-top: 0.45rem; }
.etichetta-cat {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--testo-xsoft); white-space: nowrap; margin-right: 2px;
    display: inline-block; width: 260px; flex: 0 0 auto;
}
.btn-cat-strumento {
    background: var(--grigio-card); color: var(--testo);
    border: 1.5px solid var(--grigio-brd); border-left: 4px solid var(--blu);
}
.btn-cat-strumento:hover { background: var(--blu-light); }
.btn-cat-azione {
    background: var(--grigio-card); color: var(--testo);
    border: 1.5px solid var(--grigio-brd); border-left: 4px solid var(--arancio);
}
.btn-cat-azione:hover { background: var(--arancio-light); }
.btn-cat-azione-distruttiva { border-left-color: var(--rosso); }
.btn-cat-azione-distruttiva:hover { background: var(--rosso-light); }
.btn-cat-collab {
    background: var(--grigio-card); color: var(--testo);
    border: 1.5px solid var(--grigio-brd); border-left: 4px solid var(--verde);
}
.btn-cat-collab:hover { background: var(--verde-light); }
.btn-azione-cruscotto {
    flex: 0 0 auto; width: 140px; height: 34px; padding: 3px 6px; font-size: 11px; font-weight: 600;
    line-height: 1.15; white-space: normal; text-align: center;
    display: flex; align-items: center; justify-content: center;
}

/* Colonna Chat/Ultimo messaggio: va allargata per leggere bene il
   messaggio ovunque compaia, invece di restare troncato a poche decine
   di caratteri (§ Giuseppe, 21/07/2026). */
.colonna-chat-larga { min-width: 260px; max-width: 340px; white-space: normal; word-wrap: break-word; }

/* Badge conteggio anomalie da valutare: verde se zero, rosso se diverso
   da zero — colpo d'occhio immediato sullo stato di avanzamento. */
.badge-conteggio { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.badge-conteggio-ok { background: var(--verde-light); color: var(--verde); }
.badge-conteggio-ko { background: var(--rosso-light); color: var(--rosso); }
.elenco-chat { max-height: 300px; overflow-y: auto; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.messaggio-chat { background: var(--grigio-bg); border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.riga-invio-chat { display: flex; gap: 0.5rem; align-items: center; }
.riga-invio-chat input[type="text"] { flex: 1; }
.btn-allega-chat {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 auto;
    border: 1.5px solid var(--grigio-brd); border-radius: 6px;
    cursor: pointer; font-size: 15px; background: var(--grigio-card);
}
.btn-allega-chat:hover { background: var(--blu-light); }
.btn-allega-chat input[type="file"] { display: none; }
.anteprima-allegato-chat {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--blu-light); border-radius: 6px; padding: 4px 10px;
    font-size: 12.5px; margin-bottom: 6px;
}
.anteprima-allegato-chat button {
    background: none; border: none; cursor: pointer; color: var(--testo-soft); font-size: 13px;
}
a.allegato-chat { color: var(--blu); font-weight: 600; text-decoration: none; }
a.allegato-chat:hover { text-decoration: underline; }

.scheda-confronto-breakdown { margin-bottom: 18px; }
.scheda-confronto-breakdown h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--testo-soft); margin: 0 0 8px; }
.tabella-confronto-seq { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabella-confronto-seq th, .tabella-confronto-seq td { padding: 7px 10px; border: 1px solid var(--grigio-brd); text-align: left; }
.tabella-confronto-seq thead th { background: var(--grigio-bg); font-size: 11px; text-transform: uppercase; color: var(--testo-soft); }
.tabella-confronto-seq .valore-differente { font-weight: 700; background: var(--arancio-light); color: var(--arancio); }

/* Barra bulk fissa (Revisione Anomalie): resta visibile mentre si scorre
   la tabella, cosi' l'operatore non deve mai "andare in fondo alla
   maschera" per applicare una valutazione a poche righe selezionate
   (§ Giuseppe, 17/07/2026 — utenza che si distrae facilmente). */
.barra-bulk-fissa {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 250;
    background: white; border-top: 2px solid var(--blu);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
    padding: 10px 20px; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.barra-bulk-fissa.nascosto { display: none; }
.barra-bulk-conteggio { display: flex; align-items: center; gap: 0.6rem; font-size: 13px; white-space: nowrap; }
.barra-bulk-campo { display: flex; align-items: center; gap: 0.4rem; }
.barra-bulk-campo label { font-size: 11px; color: var(--testo-soft); white-space: nowrap; }
.barra-bulk-nota { flex: 1 1 260px; }
.barra-bulk-nota textarea { width: 100%; resize: vertical; min-height: 34px; }
.barra-bulk-messaggi { flex-basis: 100%; }
body.corpo-con-barra-bulk { padding-bottom: 90px; }

.riga-selezionata { background: var(--blu-light); }
.riga-selezionata:hover { background: var(--blu-light); }

@media (max-width: 800px) {
    .griglia-due-colonne { grid-template-columns: 1fr; }
}

/* --- Menu di scelta "Nuovo Controllo di Configurazione" (26/07/2026) --- */
.colonne-gruppi-menu { display: flex; gap: 108px; flex-wrap: wrap; align-items: flex-start; }
.colonna-gruppo-menu { flex: 0 0 auto; }
.griglia-menu-scelta {
    display: flex; flex-direction: column; gap: 8px; margin-top: 8px; width: 460px;
}
/* "Altre Analisi" in orizzontale invece che verticale (§ Giuseppe,
   08/08/2026: "occupiamo meno spazio in verticale") — SOLO questa
   sezione, le altre due (Creazione/Gestione Controlli) restano
   invariate condividendo la stessa classe base. */
.griglia-menu-scelta.griglia-menu-orizzontale {
    /* § Giuseppe, 08/08/2026: "non sono allineate ai tasti sopra" — il
       divario tra le card orizzontali deve essere lo STESSO di
       .colonne-gruppi-menu (108px), altrimenti la seconda card qui non
       cade esattamente sotto la seconda colonna di sopra. */
    flex-direction: row; flex-wrap: wrap; width: auto; gap: 108px;
}
.griglia-menu-orizzontale .scheda-menu-scelta { width: 460px; }
.etichetta-sezione-menu {
    /* § Giuseppe, 08/08/2026: "si veda meglio il nome del box" — da 11px
       grigio chiaro a più grande, più scuro e più spaziato. */
    font-size: 13px; font-weight: 700; color: var(--blu);
    text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 8px;
}
.scheda-menu-scelta {
    display: flex; flex-direction: column; justify-content: center;
    text-decoration: none; color: var(--testo);
    /* § Giuseppe, 08/08/2026, regola generale: "tutti i tasti devono avere
       la stessa dimensione sia in altezza che in larghezza e devono
       essere allineati orizzontalmente e verticalmente... le dimensioni
       vanno assegnate tenendo conto delle diciture più ampie" — altezza
       FISSA (non più min-height, che lasciava crescere le card col
       sottotitolo più lungo), calcolata sul caso peggiore attuale (titolo
       su una riga + sottotitolo su due, es. "Confronta due breakdown:
       part number solo in uno, in entrambi..."). Se in futuro si aggiunge
       un sottotitolo più lungo di questi, va rivista.
    */
    height: 68px;
    background: var(--grigio-card); border: 1.5px solid var(--grigio-brd); border-radius: 8px;
    padding: 8px 12px; transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.scheda-menu-scelta:hover {
    border-color: var(--blu); transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.scheda-menu-riga-superiore { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.icona-scheda-menu { font-size: 15px; line-height: 1; }
.titolo-scheda-menu { font-size: 12.5px; font-weight: 700; color: var(--testo); }
.sottotitolo-scheda-menu { font-size: 11px; color: var(--testo-soft); line-height: 1.3; margin-left: 22px; }

/* --- Riepilogo file riconosciuti (schermata di verifica, Caricamento rapido) --- */
.blocco-file-caricati {
    background: var(--grigio-bg); border: 1px solid var(--grigio-brd); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 4px;
}
.blocco-file-caricati h3 { margin: 0 0 8px; font-size: 13px; }
.elenco-file-riconosciuti {
    list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--testo-soft);
}
.elenco-file-riconosciuti li { padding: 2px 0; word-break: break-all; }

/* --- Pulsanti della schermata di verifica "Caricamento rapido" (29/07):
   larghezza uguale per i tre, testo che va a capo su più righe invece
   di allargare il pulsante — c'è spazio in verticale, meglio sfruttarlo
   che avere pulsanti larghissimi. --- */
.riga-pulsanti-verifica-rapida { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; }
.btn-verifica-rapida {
    width: 250px; min-height: 50px; white-space: normal; line-height: 1.25;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 6px 14px; font-size: 12.5px;
}

/* --- Conteggio file selezionati (29/07) reso ben visibile, non più un
   dettaglio piccolo e grigio — Giuseppe: "rendiamolo più visibile che
   salti subito all'occhio". --- */
.conteggio-file-evidente { font-size: 14px; font-weight: 600; color: var(--testo-soft); }
.conteggio-file-evidente-attivo { color: var(--verde); font-size: 15px; }

/* --- Card statistiche in versione compatta (29/07): usata nella
   schermata di verifica "Caricamento rapido" per non rubare spazio
   verticale ai dati di testata, che restano l'elemento principale
   di quella pagina — Giuseppe: "basta ridurlo un po' che non rubi la
   scena a tutto il resto". --- */
.griglia-card-compatta .card-stat { padding: 8px 12px; border-top-width: 2px; }
.griglia-card-compatta .card-stat-numero { font-size: 18px; }
.griglia-card-compatta .card-stat-etichetta { font-size: 10.5px; margin-top: 3px; }

/* --- Box di errore/avviso nelle pagine "Caricamento rapido" (30/07) —
   .errore-box in realtà non aveva mai avuto uno stile dedicato prima
   d'ora. .avviso-box è per informazioni non bloccanti (es. il controllo
   sul breakdown di riferimento dichiarato nella lista), volutamente più
   tenue del rosso di errore. --- */
.errore-box {
    background: var(--rosso-light); border: 1px solid var(--rosso); border-radius: 8px;
    padding: 10px 14px; margin-bottom: 14px; color: var(--rosso); font-size: 13px;
}
.avviso-box {
    background: var(--arancio-light); border: 1px solid var(--arancio); border-radius: 8px;
    padding: 10px 14px; margin-bottom: 14px; color: var(--arancio); font-size: 13px;
}
.avviso-box div, .errore-box div { padding: 2px 0; }

/* Nome cartella caricata, più in evidenza (§ Giuseppe, 08/08/2026: "si
   vede appena e quasi non si nota" — da nota-piccola a un piccolo
   riquadro con accento colorato). */
.cartella-caricata-evidente {
    background: var(--blu-light); border-left: 3px solid var(--blu); border-radius: 4px;
    padding: 6px 12px; margin-bottom: 12px; font-size: 14px; color: var(--blu);
}
.cartella-caricata-evidente strong { font-weight: 700; }

/* --- Dettagli richiudibili nella schermata di verifica "Caricamento
   rapido" (30/07) — Giuseppe: "la parte della maschera operativa dove
   devo lavorare non è più immediatamente visibile, appesantendo il
   tutto". File riconosciuti + esito confronto ora chiusi di default,
   solo un riepilogo compatto sempre visibile — la testata resta subito
   sotto, senza dover scorrere. --- */
.dettagli-caricamento-rapido {
    background: var(--grigio-bg); border: 1px solid var(--grigio-brd); border-radius: 10px;
    padding: 10px 16px; margin-bottom: 8px;
}
.dettagli-caricamento-rapido summary {
    cursor: pointer; font-size: 13px; font-weight: 600; color: var(--testo);
    list-style: none;
}
.dettagli-caricamento-rapido summary::-webkit-details-marker { display: none; }
.dettagli-caricamento-rapido summary::before { content: "▸ "; color: var(--testo-soft); }
.dettagli-caricamento-rapido[open] summary::before { content: "▾ "; }
.dettagli-caricamento-rapido[open] summary { margin-bottom: 10px; }
/* § Giuseppe, 14/08/2026: badge lampeggiante per richiamare l'attenzione
   su un dettaglio chiuso di default (file utilizzati + esito confronto),
   invece di lasciarlo sempre aperto — "espandere per visualizzare i
   messaggi e le informazioni relative all'elaborazione". */
.badge-espandi-lampeggiante {
    display: inline-block; background: var(--blu); color: #fff; border-radius: 12px;
    padding: 4px 14px; font-size: 13px; font-weight: 700; margin-left: 8px;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
    animation: lampeggio-espandi 1.6s ease-in-out infinite;
}
@keyframes lampeggio-espandi {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.04); }
}
.dettagli-caricamento-rapido[open] .badge-espandi-lampeggiante { display: none; }