/*
  ════════════════════════════════════════════════════════════════
  FOGLIO DI STILE CSS
  ════════════════════════════════════════════════════════════════
  Il CSS è organizzato in sezioni tematiche nell'ordine:
    1.  Reset base
    2.  Elementi form globali (button, input, select, textarea)
    3.  Intestazione app (header fisso in cima)
    4.  Barra di navigazione (tab SPA)
    5.  Layout principale
    6.  Card (contenitori con bordo e intestazione)
    7.  Form (griglie, campi, gruppi di input)
    8.  Badge tipo protocollo (Interno / In ingresso / In uscita)
    9.  Badge stato protocollo (Prenotato / Elaborazione / ...)
   10.  Statistiche dashboard (card numeriche colorate)
   11.  Tabella protocolli multi-riga
   12.  Barra di ricerca
   13.  Allegati (tag con bottone rimozione)
   14.  Messaggi alert (ok, errore, warning, info)
   15.  Paginazione
   16.  Barra sezione (titolo h2 + bottoni)
   17.  Visualizzazione dettaglio (griglia 2 colonne)
   18.  Schermate centrate (login, selezione cartella)
   19.  Box ripristino cartella (verde)
   20.  Card XLSX (export/import)
   21.  Modali (overlay + pannello)
   22.  Toggle lista/albero
   23.  Nodi albero protocolli
   24.  Utility (.nascosto)

  NOTA: Nessun framework CSS esterno (Bootstrap, Tailwind ecc.).
  Tutto il design è custom con variabili CSS inline o hardcoded.
  ════════════════════════════════════════════════════════════════
*/

/* ─────────────────────────────────────────────────────────────
   1. RESET BASE
   Azzera margin e padding di default del browser su tutti gli
   elementi. box-sizing:border-box include padding e border nel
   calcolo della larghezza/altezza, rendendo i layout prevedibili.
   ───────────────────────────────────────────────────────────── */
/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root {
  --colore-barra:  #212121;  /* sovrascritta da UI_COLORE_BARRA  in config.php */
  --colore-sfondo: #f5f5f5;  /* sovrascritta da UI_COLORE_SFONDO in config.php */
}
body{font-family:Segoe UI,Arial,sans-serif;font-size:14px;color:#1a1a1a;background:var(--colore-sfondo);min-height:100vh}

/* ─────────────────────────────────────────────────────────────
   2. ELEMENTI FORM GLOBALI
   Stile base per tutti i button, input, select e textarea
   dell'applicazione. Il border di 0.5px è volutamente sottile
   per un look leggero e moderno. transition:background su button
   produce l'effetto hover fluido. :disabled riduce l'opacità
   al 50% per comunicare visivamente l'inattività.
   ───────────────────────────────────────────────────────────── */
/* ===== ELEMENTI FORM ===== */
button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;
       border:.5px solid #ccc;background:#fff;cursor:pointer;font-size:13px;
       font-family:inherit;transition:background .15s}
button:hover{background:#f0f0f0}
button:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{width:100%;padding:8px 10px;border:.5px solid #ccc;border-radius:6px;
                      font-size:13px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:#555}
textarea{min-height:88px;resize:vertical}
a{color:#1a5fa8}

/* ─────────────────────────────────────────────────────────────
   3. INTESTAZIONE APP
   Header scuro (#2c2c2c) sticky in cima alla pagina (z-index:10).
   Contiene: croce francescana, titolo/sottotitolo dell'ente,
   nome cartella attiva, nome e ufficio dell'utente, bottone Esci.
   I bottoni qui hanno background semi-trasparente bianco per
   integrarsi con lo sfondo scuro senza perdere leggibilità.
   ───────────────────────────────────────────────────────────── */
/* ===== INTESTAZIONE ===== */
.intestazione-app{background:var(--colore-barra);color:#fff;padding:12px 20px;display:flex;
                  align-items:center;gap:12px;position:sticky;top:0;z-index:10}
.intestazione-app .titolo{font-size:14px;font-weight:600;flex:1;line-height:1.4}
.intestazione-app .sottotitolo{font-size:11px;opacity:.6}
.intestazione-app button{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff}
.intestazione-app button:hover{background:rgba(255,255,255,.25)}

/* ─────────────────────────────────────────────────────────────
   4. BARRA DI NAVIGAZIONE (TAB SPA)
   Barra orizzontale di tab sotto l'header per navigare tra le
   sezioni principali (Dashboard, Ricerca, Nuovo, Dati).
   overflow-x:auto permette lo scroll orizzontale su schermi stretti.
   .bottone-nav.attivo evidenzia la sezione corrente con un bordo
   inferiore spesso (#222), simulando il classico stile "tab attivo".
   ───────────────────────────────────────────────────────────── */
/* ===== NAVIGAZIONE ===== */
.barra-nav{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid #ddd;
           background:#fff;overflow-x:auto}
.bottone-nav{padding:10px 16px;font-size:13px;background:none;border:none;
             border-bottom:2px solid transparent;cursor:pointer;color:#666;white-space:nowrap}
.bottone-nav:hover{color:#222}
.bottone-nav.attivo{color:#222;border-bottom-color:#222}

/* ─────────────────────────────────────────────────────────────
   5. LAYOUT PRINCIPALE
   .contenuto-principale centra il contenuto con max-width:1100px
   e padding laterale 24px. Usato come wrapper di tutte le sezioni.
   ───────────────────────────────────────────────────────────── */
/* ===== LAYOUT ===== */
.contenuto-principale{padding:24px;max-width:1100px;margin:0 auto}

/* ─────────────────────────────────────────────────────────────
   6. CARD
   Contenitore white con bordo sottile e angoli arrotondati.
   .card-intestazione: barra grigio chiaro (#fafafa) col titolo
     del gruppo di campi; separata dal corpo da un bordo inferiore.
   .card-corpo: area interna con padding 16px per il contenuto.
   overflow:hidden sulla card fa sì che angoli e intestazione
   non fuoriescano dal bordo arrotondato.
   ───────────────────────────────────────────────────────────── */
/* ===== CARD ===== */
.card{background:#fff;border:1px solid #ddd;border-radius:8px;overflow:hidden;margin-bottom:16px}
.card-intestazione{padding:11px 16px;border-bottom:1px solid #ddd;font-weight:600;
                   font-size:13px;display:flex;align-items:center;gap:8px;
                   color:#444;background:#fafafa}
.card-corpo{padding:16px}

/* ─────────────────────────────────────────────────────────────
   7. FORM — CAMPI, GRIGLIE E GRUPPI
   .campo-form: contenitore verticale (flex-direction:column) per
     label + controllo; gap:5px separa label e input.
   .campo-form label: etichetta in maiuscoletto 11px, grigio scuro.
   .campo-form .campo-sola-lettura: simula un input read-only con
     stile visivo identico (bordo, padding, font) ma sfondo grigio.
   .griglia-form: CSS Grid auto-fill con colonne minimo 210px;
     si adatta automaticamente alla larghezza disponibile.
   .colonna-intera: occupa tutte le colonne (grid-column:1/-1),
     usato per campi ampi come titolo, argomento, descrizioni.
   .input-gruppo / .gruppo-percorso: affianca input e bottoni
     in una riga orizzontale flessibile (flex).
   .nota-sicurezza: testo di avvertimento 10px grigio chiaro.
   ───────────────────────────────────────────────────────────── */
/* ===== FORM ===== */
.campo-form{display:flex;flex-direction:column;gap:5px}
.campo-form label{font-size:11px;color:#666;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.campo-form input,.campo-form select,.campo-form textarea{font-size:13px;font-family:inherit}
.campo-form textarea{min-height:88px;resize:vertical;width:100%}
.campo-form .campo-sola-lettura{background:#f5f5f5;border:1px solid #ddd;border-radius:6px;
                                padding:8px 10px;font-size:13px;color:#666;
                                display:flex;align-items:center;gap:6px;min-height:36px}
.griglia-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.griglia-form .colonna-intera{grid-column:1/-1}
.riga-bottoni{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.input-gruppo{display:flex;gap:6px;align-items:stretch}
.input-gruppo input,.input-gruppo select{flex:1}
.nota-sicurezza{font-size:10px;color:#aaa;display:block;margin-top:3px;line-height:1.4}

/* ─────────────────────────────────────────────────────────────
   8. BADGE TIPO PROTOCOLLO
   Etichette pillola colorate per il tipo di flusso documentale.
   border-radius:20px produce la forma "pillola".
   Palette colori:
     Interno   → sfondo indaco chiaro  (#e8eaf6), testo indaco scuro
     In ingresso→ sfondo verde chiaro  (#e8f5e9), testo verde scuro
     In uscita → sfondo rosa chiaro   (#fce4ec), testo bordeaux
   Le classi vengono generate da badgeTipo() in JavaScript.
   ───────────────────────────────────────────────────────────── */
/* ===== BADGE TIPO ===== */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.badge-interno{background:#e8eaf6;color:#303f9f}
.badge-ingresso{background:#e8f5e9;color:#1b5e20}
.badge-uscita{background:#fce4ec;color:#880e4f}
.badge-tipo-altro{background:#f3e5f5;color:#4a148c}

/* ─────────────────────────────────────────────────────────────
   9. BADGE STATO PROTOCOLLO
   Stessa forma pillola dei badge tipo ma con palette dedicata
   agli stati del workflow documentale:
     Prenotato     → azzurro (#e3f2fd / #0d47a1) — documento aperto
     In elaborazione→ arancione (#fff3e0 / #e65100) — lavoro in corso
     Concluso      → verde (#e8f5e9 / #1b5e20) — pratica chiusa positivamente
     Chiuso        → rosso (#ffebee / #b71c1c) — archiviato/bloccato
   Le classi vengono generate da badgeStato() in JavaScript.
   ───────────────────────────────────────────────────────────── */
/* ===== BADGE STATO ===== */
.badge-prenotato{background:#e3f2fd;color:#0d47a1}
.badge-elaborazione{background:#fff3e0;color:#e65100}
.badge-concluso{background:#e8f5e9;color:#1b5e20}
.badge-chiuso{background:#ffebee;color:#b71c1c}
.badge-stato-altro{background:#f3e5f5;color:#4a148c}

/* ─────────────────────────────────────────────────────────────
   10. STATISTICHE DASHBOARD
   Griglia orizzontale di card numeriche in cima alla dashboard.
   auto-fit minmax(120px,1fr): si adatta da 1 a N colonne.
   .card-statistica: bordo sinistro colorato (4px) per identificare
     il tipo di dato a colpo d'occhio. Il colore del bordo viene
     impostato inline da aggiornaDashboard() in base al tipo.
   .numero: grande (26px, bold) per leggibilità immediata.
   .etichetta: descrizione 11px grigio sotto il numero.
   ───────────────────────────────────────────────────────────── */
/* ===== STATISTICHE ===== */
.griglia-statistiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
                     gap:12px;margin-bottom:20px}
.card-statistica{background:#fff;border:1px solid #ddd;border-radius:8px;
                 padding:14px;border-left:4px solid #555}
.card-statistica .numero{font-size:26px;font-weight:700;line-height:1}
.card-statistica .etichetta{font-size:11px;color:#666;margin-top:3px}

/* ─────────────────────────────────────────────────────────────
   11. TABELLA PROTOCOLLI MULTI-RIGA
   Ogni protocollo occupa 4 righe <tr> consecutive:
     .riga-principale  → numero, radice, tipo, autore, ufficio,
                          data, stato, bottoni azione
     .riga-titolo      → titolo in grassetto (indent 87px)
     .riga-argomento   → argomento (indent 87px)
     .riga-destinatario→ destinatario + bordo inferiore 2px (#eee)

   L'indent di 87px allinea il testo delle righe di dettaglio
   sotto la colonna "Autore" della riga principale, creando
   una gerarchia visiva senza annidamento HTML.

   .riga-evidenziata: classe aggiunta da JS (hover) a tutte le
     4 righe del gruppo simultaneamente → colore #f0f4ff uniforme.
   !important è necessario per sovrascrivere il background
   specifico delle righe di dettaglio (#fcfcfc).

   .etichetta-sub: piccola etichetta grigio/maiuscoletto 11px
     che precede il valore nelle righe di dettaglio
     (es. "📄 TITOLO:" "📋 ARGOMENTO:").

   .scroll-tabella: wrapper con overflow-x:auto per tabelle
     che superano la larghezza dello schermo su mobile.
   ───────────────────────────────────────────────────────────── */
/* ===== TABELLA PROTOCOLLI (dashboard e ricerca) ===== */
.tabella-protocolli{width:100%;border-collapse:collapse;font-size:13px}
.tabella-protocolli thead th{padding:9px 10px;text-align:left;font-size:11px;color:#555;
                              border-bottom:1px solid #ddd;white-space:nowrap;font-weight:600;
                              text-transform:uppercase;letter-spacing:.4px;background:#fafafa}
/* Riga 1: dati identificativi */
.riga-principale td{padding:9px 10px 3px;border-bottom:none;vertical-align:middle}
/* Riga 2: titolo in grassetto, rientrato 75 px */
.riga-titolo td{padding:2px 12px 2px 87px;border-bottom:none;font-size:12px;
                color:#333;background:#fcfcfc}
/* Riga 3: argomento, rientrato 75 px */
.riga-argomento td{padding:2px 12px 2px 87px;border-bottom:none;font-size:12px;
                   color:#555;background:#fcfcfc}
/* Riga 4: destinatario, rientrato 75 px — porta il bordo inferiore */
.riga-destinatario td{padding:2px 12px 9px 87px;border-bottom:2px solid #eee;
                       font-size:12px;color:#555;background:#fcfcfc}
/* Hover coordinato su tutte le righe del gruppo */
.riga-evidenziata td{background:#f0f4ff !important}
/* Etichetta secondaria nelle righe di dettaglio */
.etichetta-sub{color:#aaa;font-size:11px;font-weight:600;text-transform:uppercase;
               letter-spacing:.3px;margin-right:4px}
.scroll-tabella{overflow-x:auto}

/* ─────────────────────────────────────────────────────────────
   12. BARRA DI RICERCA
   Contenitore flex con wrap per i filtri di ricerca.
   Lo sfondo #f9f9f9 e il bordo distinguono visivamente la barra
   dall'area risultati sottostante. min-width:120px evita che i
   campi diventino troppo stretti su schermi medi.
   ───────────────────────────────────────────────────────────── */
/* ===== BARRA DI RICERCA ===== */
.barra-ricerca{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px;
               background:#f9f9f9;border-radius:8px;border:1px solid #ddd;margin-bottom:16px}
.barra-ricerca .campo-form{flex:1;min-width:120px}

/* ─────────────────────────────────────────────────────────────
   13. ALLEGATI
   .lista-allegati: contenitore flex con wrap per i tag allegato.
   .tag-allegato: chip grigio chiaro con bordo sottile; mostra
     icona 📎, nome file e bottone rimozione × (rosso).
   .bottone-rimuovi-allegato: non è un <button> HTML ma uno <span>
     stilizzato come tale; il cursor:pointer lo rende cliccabile.
     Il testo "×" è un segno di moltiplicazione Unicode, non la X.
   ───────────────────────────────────────────────────────────── */
/* ===== ALLEGATI ===== */
.lista-allegati{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag-allegato{background:#f5f5f5;border:1px solid #ddd;border-radius:4px;
              padding:3px 10px;font-size:12px;display:flex;align-items:center;gap:5px}
.bottone-rimuovi-allegato{cursor:pointer;color:#c62828;font-weight:700;font-size:14px;
                           line-height:1;margin-left:2px}

/* ─────────────────────────────────────────────────────────────
   14. MESSAGGI ALERT
   .alert: contenitore base con padding, bordo sinistro colorato
     (4px) e sfondo tenue. Usato per feedback all'utente.
   Varianti per quattro livelli semantici:
     .alert-errore  → rosso  — operazione fallita, input invalido
     .alert-ok      → verde  — operazione completata con successo
     .alert-warning → arancione — avvertimento non bloccante
     .alert-info    → azzurro  — informazione contestuale
   I messaggi vengono iniettati via innerHTML da mostraMessaggio()
   e rimossi automaticamente dopo 5 secondi.
   ───────────────────────────────────────────────────────────── */
/* ===== MESSAGGI ALERT ===== */
.alert{padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:12px;border-left:4px solid}
.alert-errore{background:#fdecea;color:#c62828;border-color:#c62828}
.alert-ok{background:#e8f5e9;color:#1b5e20;border-color:#1b5e20}
.alert-warning{background:#fff8e1;color:#e65100;border-color:#e65100}
.alert-info{background:#e3f2fd;color:#0d47a1;border-color:#0d47a1}

/* ─────────────────────────────────────────────────────────────
   15. PAGINAZIONE
   Barra centrata di bottoni numerici generata da
   renderizzaRisultatiRicerca(). Ogni bottone è un quadratino
   con bordo; il bottone della pagina corrente e quello in hover
   hanno sfondo nero (#222) e testo bianco (stile invertito).
   flex-wrap:wrap permette di andare a capo con molte pagine.
   ───────────────────────────────────────────────────────────── */
/* ===== PAGINAZIONE ===== */
.contenitore-paginazione{display:flex;gap:4px;justify-content:center;padding:12px 0;flex-wrap:wrap}
.bottone-pagina{padding:5px 11px;border:1px solid #ddd;background:#fff;
                border-radius:4px;cursor:pointer;font-size:12px}
.bottone-pagina.attivo,.bottone-pagina:hover{background:#222;color:#fff;border-color:#222}

/* ─────────────────────────────────────────────────────────────
   16. BARRA SEZIONE
   Riga orizzontale in cima a ogni sezione: titolo h2 (flex:1
   occupa tutto lo spazio disponibile) + eventuali bottoni azione
   allineati a destra (es. "← Indietro", "➕ Nuovo").
   flex-wrap:wrap evita overflow su schermi stretti.
   ───────────────────────────────────────────────────────────── */
/* ===== BARRA SEZIONE ===== */
.barra-sezione{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.barra-sezione h2{font-size:18px;font-weight:700;flex:1;color:#222}

/* ─────────────────────────────────────────────────────────────
   17. VISUALIZZAZIONE DETTAGLIO PROTOCOLLO
   .griglia-dettaglio: griglia 2 colonne uguali (1fr 1fr) con
     gap 14px per disporre i campi in coppie affiancate.
   .campo-dettaglio label: etichetta 11px maiuscoletto grigio.
   .campo-dettaglio .valore: testo 13px del valore del campo.
   Usata sia nella scheda visualizzazione che nel modale radice.
   ───────────────────────────────────────────────────────────── */
/* ===== VISUALIZZAZIONE DETTAGLIO ===== */
.griglia-dettaglio{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo-dettaglio label{font-size:11px;color:#777;text-transform:uppercase;
                        letter-spacing:.4px;margin-bottom:4px;display:block;font-weight:600}
.campo-dettaglio .valore{font-size:13px}

/* ─────────────────────────────────────────────────────────────
   18. SCHERMATE CENTRATE (selezione cartella e login)
   .schermata-centrata: occupa tutta la viewport (min-height:100vh)
     con display:flex centrato sia orizzontalmente che verticalmente;
     sfondo grigio chiaro (#f0f0f0) per distinguerle dall'app.
   .pannello-centrato: card bianca max-width:460px con ombra
     leggera e padding 36px; contiene il logo, i campi e i bottoni.
   .logo-app: area logo/icona centrata con croce ✝ 36px grigia.
   .info-cartella: riga grigio chiaro con icona cartella e nome.
   .lista-file-info: elenco dei file gestiti (per onboarding).
   .separatore-con-testo: divisore orizzontale con testo centrato
     ("oppure"), realizzato con ::before e ::after pseudo-elementi.
   ───────────────────────────────────────────────────────────── */
/* ===== SCHERMATE CENTRATE (cartella, login) ===== */
.schermata-centrata{display:flex;align-items:center;justify-content:center;
                    min-height:100vh;padding:40px 20px;background:#f0f0f0}
.pannello-centrato{background:#fff;border:1px solid #ddd;border-radius:10px;
                   padding:36px;width:100%;max-width:460px;
                   box-shadow:0 4px 20px rgba(0,0,0,.08)}
.logo-app{text-align:center;margin-bottom:24px}
.logo-app .icona-croce{font-size:36px;color:#555}
.logo-app h2{font-size:15px;font-weight:700;margin-top:10px;line-height:1.5;color:#222}
.logo-app p{font-size:12px;color:#666;margin-top:4px}
.info-cartella{display:flex;align-items:center;gap:8px;padding:9px 12px;
               background:#f5f5f5;border-radius:6px;border:1px solid #ddd;
               font-size:12px;color:#555}
.lista-file-info div{display:flex;align-items:center;gap:8px;padding:6px 0;
                      border-bottom:1px solid #eee;font-size:12px;color:#555}
.lista-file-info div:last-child{border:none}
.lista-file-info strong{color:#222}
.separatore-con-testo{display:flex;align-items:center;gap:10px;margin:14px 0;
                       color:#aaa;font-size:11px}
.separatore-con-testo::before,.separatore-con-testo::after{content:'';flex:1;border-top:1px solid #ddd}

/* ─────────────────────────────────────────────────────────────
   19. BOX RIPRISTINO CARTELLA (verde)
   Pannello verde (#4caf50, sfondo #f1f8f1) visualizzato quando
   in IndexedDB c'è un handle valido da ripristinare.
   Mostra: icona cartella, nome e data di scadenza del permesso,
   bottone verde "Riapri cartella memorizzata".
   Il bordo verde (2px solid) e il background chiaro segnalano
   una condizione positiva (cartella già disponibile).
   ───────────────────────────────────────────────────────────── */
/* ===== BOX RIPRISTINO CARTELLA ===== */
.box-ripristino{border:2px solid #4caf50;border-radius:8px;padding:18px;
                background:#f1f8f1;margin-bottom:16px;text-align:center}
.box-ripristino .nome-cartella{font-size:15px;font-weight:700;margin:8px 0 2px;color:#222}
.box-ripristino .scadenza{font-size:11px;color:#666;margin-bottom:14px}
.box-ripristino button{width:100%;justify-content:center;background:#4caf50;
                        border-color:#4caf50;color:#fff;padding:10px;font-size:13px}
.box-ripristino button:hover{background:#43a047}

/* ─────────────────────────────────────────────────────────────
   20. CARD XLSX (import/export Excel)
   Griglia auto-fit di card 185px min per le quattro operazioni
   Excel: esporta, scarica template, importa-aggiungi, importa-sostituisci.
   Tre varianti di colore identificano il tipo di operazione:
     .verde → export (dati che escono, azione sicura)
     .blu   → template / informazione
     .ambra → import-sostituisci (azione distruttiva, colore di allerta)
   Nessuna variante per import-aggiungi (colore neutro di default).
   ───────────────────────────────────────────────────────────── */
/* ===== CARD XLSX ===== */
.griglia-xlsx{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px}
.card-xlsx{border:1px solid #ddd;border-radius:8px;padding:16px;text-align:center}
.card-xlsx .icona{font-size:28px;margin-bottom:8px}
.card-xlsx h3{font-size:13px;font-weight:700;margin-bottom:5px}
.card-xlsx p{font-size:11px;color:#666;margin-bottom:12px;line-height:1.5}
.card-xlsx button{width:100%;justify-content:center}
.card-xlsx.verde{border-color:#4caf50;background:#f9fff9}
.card-xlsx.blu{border-color:#1976d2;background:#f3f8ff}
.card-xlsx.ambra{border-color:#f57c00;background:#fffaf3}

/* ─────────────────────────────────────────────────────────────
   21. MODALI (overlay + pannello)
   .sfondo-modale: overlay fixed che copre tutta la viewport con
     sfondo semi-trasparente (rgba 0,0,0,.55); z-index:200 garantisce
     che stia sopra l'header sticky (z-index:10).
     Il click sullo sfondo (delegato via onclick sull'overlay) chiude
     il modale se l'evento target è proprio l'overlay stesso.
   .pannello-modale: card bianca max-width:860px, max-height:90vh con
     scroll interno sul corpo (.corpo-modale flex:1 overflow-y:auto).
     Layout flex colonna per far occupare header e footer spazio fisso
     e lasciare il corpo espandibile.
   .pannello-modale.piccolo: variante max-width:680px per il modale
     di visualizzazione rapida del protocollo radice.
   .intestazione-modale / .piede-modale: header e footer fissi
     (flex-shrink:0) che non scrollano con il contenuto.
   .riga-selezionabile: rende cliccabile l'intera riga della tabella
     nel modale di selezione radice (cursor:pointer + hover verde).
   .bottone-radice: piccolo bottone blu inline "👁 Vedi" per aprire
     il modale radice direttamente dalla scheda di visualizzazione.
   ───────────────────────────────────────────────────────────── */
/* ===== MODALI ===== */
.sfondo-modale{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);
               display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.pannello-modale{background:#fff;border-radius:10px;width:100%;max-width:860px;
                 max-height:90vh;display:flex;flex-direction:column;
                 box-shadow:0 12px 48px rgba(0,0,0,.3)}
.pannello-modale.piccolo{max-width:680px}
.pannello-modale.grande{max-width:1200px}
.intestazione-modale{padding:14px 20px;border-bottom:1px solid #ddd;display:flex;
                      align-items:center;justify-content:space-between;font-weight:700;
                      font-size:15px;background:#fafafa;border-radius:10px 10px 0 0;flex-shrink:0}
.intestazione-modale button{padding:5px 10px;font-size:16px;background:none;
                              border:none;color:#888;cursor:pointer}
.intestazione-modale button:hover{color:#222;background:#f0f0f0}
.corpo-modale{padding:20px;overflow-y:auto;flex:1}
.piede-modale{padding:12px 20px;border-top:1px solid #ddd;display:flex;
              justify-content:flex-end;gap:8px;flex-shrink:0}
.riga-selezionabile{cursor:pointer}
.riga-selezionabile:hover td{background:#e8f5e9 !important}
.bottone-radice{font-size:11px;padding:3px 9px;margin-left:8px;vertical-align:middle;
                border-color:#1976d2;color:#1976d2;background:#f3f8ff}
.bottone-radice:hover{background:#e3f2fd}

/* ─────────────────────────────────────────────────────────────
   22. TOGGLE LISTA / ALBERO (dashboard)
   .toggle-vista: gruppo di bottoni allineato a destra nell'intestazione
     della card dashboard (margin-left:auto spinge a destra in flex).
   .bottone-vista.attivo: sfondo nero, testo bianco — indica la vista
     attiva. Controllato da impostaVistaDashboard() in JS.
   ───────────────────────────────────────────────────────────── */
/* ===== TOGGLE LISTA / ALBERO ===== */
.toggle-vista{display:flex;gap:4px;margin-left:auto}
.bottone-vista{padding:5px 12px;font-size:12px;border-radius:4px}
.bottone-vista.attivo{background:#222;color:#fff;border-color:#222}

/* ─────────────────────────────────────────────────────────────
   23. ALBERO DEI PROTOCOLLI
   .intestazione-nodo-albero: riga flex di un nodo; hover #f0f4ff.
   .nodo-radice: sfondo #fafafa + bordo per i nodi di primo livello.
   .toggle-nodo: piccolo bottone quadrato (22px) ▼/▶ per espandere
     o collassare i figli. Fissato a 22px (flex-shrink:0) per non
     deformarsi a qualsiasi contenuto.
   .segnaposto-foglia: dot ● 8px grigio chiaro nei nodi senza figli,
     dimensionato identicamente al toggle-nodo per allineamento.
   .figli-albero: contenitore dei nodi figlio; rientro 11px + linea
     verticale sinistra 2px grigia (border-left) per visualizzare la
     struttura gerarchica.
   .figli-albero.collassato: display:none nasconde il sottoalbero.
   .albero-container: scrollabile verticalmente (max-height:70vh);
     user-select:none impedisce la selezione accidentale di testo
     quando si clicca velocemente per espandere/collassare.
   .barra-strumenti-albero: riga con contatore e bottoni
     "Espandi tutto" / "Collassa tutto".
   ───────────────────────────────────────────────────────────── */
/* ===== ALBERO DEI PROTOCOLLI ===== */
.intestazione-nodo-albero{display:flex;align-items:center;gap:8px;padding:6px 10px;
                           border-radius:5px;min-height:34px}
.intestazione-nodo-albero:hover{background:#f0f4ff}
.intestazione-nodo-albero.nodo-radice{background:#fafafa;border:1px solid #eee;
                                       margin-bottom:3px;font-weight:600}
.intestazione-nodo-albero.nodo-radice:hover{background:#f0f4ff;border-color:#c5cae9}
.toggle-nodo{width:22px;min-width:22px;height:22px;padding:0;font-size:9px;line-height:1;
             border-radius:4px;background:#f0f0f0;border-color:#ddd;color:#555;
             flex-shrink:0;display:flex;align-items:center;justify-content:center}
.segnaposto-foglia{display:inline-flex;width:22px;min-width:22px;align-items:center;
                   justify-content:center;font-size:8px;color:#ddd;flex-shrink:0}
.figli-albero{margin-left:11px;padding-left:16px;border-left:2px solid #e8e8e8;
              margin-top:2px;padding-top:1px;padding-bottom:1px;margin-bottom:3px}
.figli-albero.collassato{display:none}
.albero-container{padding:14px 16px;max-height:70vh;overflow-y:auto;user-select:none}
.barra-strumenti-albero{display:flex;align-items:center;gap:8px;padding:8px 16px;
                         border-bottom:1px solid #f0f0f0;background:#fafafa;
                         font-size:12px;color:#888;flex-wrap:wrap}
.barra-strumenti-albero button{font-size:12px;padding:4px 10px}

/* ─────────────────────────────────────────────────────────────
   24. UTILITY
   .nascosto: classe CSS di utilità che nasconde completamente un
     elemento (display:none !important). Usata dal sistema di
     navigazione SPA per mostrare/nascondere le sezioni e i modali.
     !important assicura che sovrascriva qualsiasi display inline
     impostato da JavaScript (es. style="display:none").
   ─────────────────────────────────────────────────────────────── */
/* ===== UTILITÀ ===== */
.nascosto{display:none !important}

/* ─────────────────────────────────────────────────────────────
   25. PANNELLO CONTROLLO VERSIONE
   Stili del pannello di aggiornamento obbligatorio mostrato nella
   schermata di login quando la versione locale è inferiore a
   quella minima richiesta in versionePrg.txt.

   .box-versione-ok    → banner verde "versione aggiornata" (debug)
   .box-aggiornamento  → pannello rosso di blocco login con info
                         sulle versioni e sulle azioni disponibili
   .versione-badge     → pillola colorata con numero di versione
   .versione-locale    → badge grigio per la versione del file corrente
   .versione-richiesta → badge rosso per la versione minima richiesta
   .versione-remota    → badge verde per la versione trovata in rete
   .step-aggiornamento → riga numerata del processo di aggiornamento
   ─────────────────────────────────────────────────────────────── */
.box-aggiornamento{border:2px solid #c62828;border-radius:8px;padding:18px;
                   background:#fff5f5;margin-bottom:16px;text-align:center}
.box-aggiornamento h3{font-size:14px;font-weight:700;color:#c62828;margin-bottom:8px}
.box-aggiornamento p{font-size:12px;color:#555;line-height:1.6;margin-bottom:10px}
.versione-badge{display:inline-block;padding:3px 10px;border-radius:12px;
                font-size:12px;font-weight:700;font-family:monospace;margin:2px}
.versione-locale{background:#eeeeee;color:#555}
.versione-richiesta{background:#ffebee;color:#b71c1c}
.versione-remota{background:#e8f5e9;color:#1b5e20}
/* Badge arancione: versione presente ma non verificata per indisponibilità rete */
.versione-elaborazione{background:#fff3e0;color:#e65100}
.confronto-versioni{display:flex;align-items:center;justify-content:center;
                    gap:10px;margin:10px 0;flex-wrap:wrap}
.step-aggiornamento{display:flex;align-items:flex-start;gap:8px;text-align:left;
                    font-size:12px;color:#555;margin:5px 0}
.step-aggiornamento .num{background:#c62828;color:#fff;border-radius:50%;
                          width:18px;height:18px;min-width:18px;display:flex;
                          align-items:center;justify-content:center;font-size:10px;
                          font-weight:700;flex-shrink:0;margin-top:1px}
.step-aggiornamento.ok .num{background:#388e3c}
#log-aggiornamento{text-align:left;font-size:11px;background:#f5f5f5;
                   border-radius:4px;padding:8px 10px;margin-top:10px;
                   max-height:120px;overflow-y:auto;font-family:monospace;
                   color:#333;display:none}