/* ===========================================================================
   Stile della console interna.

   La palette e il linguaggio visivo sono ereditati dalla dashboard del
   prototipo (Huawei APP/Server Console/.../wwwroot/dashboard.html): tema
   scuro, card con barra colorata in testa, tabelle con intestazione in
   maiuscoletto, pastiglie di stato.

   Scritto a mano e senza framework, e senza CDN: il §16 del Doc 2 chiede di
   poter ricreare un ambiente senza conoscenze non documentate, e un asset
   remoto rende l'interfaccia dipendente dalla rete in uscita del server.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------------------------------------------------------------------------
   I token del tema.

   L'aspetto e' quello del cruscotto «Apex» che il committente ha indicato il 9
   settembre 2026: fondo quasi nero, accento verde smeraldo, schede con bordo
   tenue e nessuna ombra pesante, etichette in maiuscoletto.

   ⚠️ E' una RIMPLEMENTAZIONE, non una copia. Apex e' un tema commerciale e i
   suoi fogli di stile non stanno in questo progetto: qui ci sono i nostri, e la
   DC9 lo impone comunque — CSS proprio, nessun CDN, zero dipendenze. I valori
   neutri seguono la scala «zinc» e l'accento lo smeraldo di Tailwind, che sono
   pubblici e sotto licenza MIT.

   ⚠️ Chi cambia una tinta la cambia QUI. Ogni regola piu' sotto usa un token, e
   un colore scritto a mano in fondo al file sopravvive a ogni ritocco del tema
   e poi stona.
   ------------------------------------------------------------------------- */
:root {
    --sfondo:          #09090b;
    --sfondo-2:        #0c0c0f;
    --card:            #111114;
    --card-sopra:      #18181b;
    --bordo:           #27272a;
    --bordo-chiaro:    #3f3f46;
    --testo:           #fafafa;
    --testo-2:         #a1a1aa;
    --testo-3:         #71717a;

    /* L'accento: smeraldo. E' il colore di cio' che funziona, e di cio' che si
       puo' premere — non si usa per decorare. */
    --accento:         #10b981;
    --accento-chiaro:  #34d399;
    --accento-tenue:   rgba(16, 185, 129, .12);

    --blu:             #3b82f6;
    --verde:           #10b981;
    --giallo:          #eab308;
    --rosso:           #ef4444;
    --viola:           #a855f7;
    --arancio:         #f59e0b;
    --ciano:           #06b6d4;
    --rosa:            #ec4899;

    --ombra:           0 1px 2px rgba(0, 0, 0, .4);
    --raggio:          12px;
    --raggio-sm:       8px;
    --transizione:     .15s ease;
    --larghezza-menu:  248px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    background: var(--sfondo);
    color: var(--testo);
    line-height: 1.6;
    font-size: 14px;
    min-height: 100vh;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--sfondo); }
::-webkit-scrollbar-thumb { background: var(--bordo); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bordo-chiaro); }

a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--bordo);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--ciano);
}

/* ── Impianto: menu laterale + colonna principale ───────────────────────── */

.guscio { display: flex; min-height: 100vh; }

.laterale {
    width: var(--larghezza-menu);
    flex: 0 0 var(--larghezza-menu);
    background: var(--sfondo-2);
    border-right: 1px solid var(--bordo);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.laterale-marchio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--bordo);
}

.logo {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: linear-gradient(135deg, var(--accento), #0d9488);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
}

.laterale-titolo {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.25;
}

.laterale-titolo span {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--testo-2);
    letter-spacing: .2px;
}

.menu { flex: 1; padding: 14px 10px; overflow-y: auto; }

.menu-gruppo {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--testo-3);
    padding: 14px 10px 6px;
}

.menu-gruppo:first-child { padding-top: 4px; }

.menu-voce {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--raggio-sm);
    color: var(--testo-2);
    font-weight: 500;
    transition: all var(--transizione);
    border-left: 2px solid transparent;
}

.menu-voce:hover {
    background: var(--card);
    color: var(--testo);
    text-decoration: none;
}

.menu-voce.attiva {
    background: var(--accento-tenue);
    color: var(--accento);
    border-left-color: var(--accento);
}

.menu-icona { font-size: 15px; width: 18px; text-align: center; }

.laterale-piede {
    padding: 14px 20px;
    border-top: 1px solid var(--bordo);
    font-size: 11.5px;
    color: var(--testo-3);
}

.laterale-piede span { color: var(--testo-2); }

.principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Barra superiore ───────────────────────────────────────────────────── */

.barra {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 26px;
    min-height: 60px;
    background: var(--sfondo-2);
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 50;
}

.barra-titolo { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -.2px; }

.barra-destra { display: flex; align-items: center; gap: 12px; }

.barra-destra form { margin: 0; }

.apri-menu {
    display: none;
    background: var(--card);
    border: 1px solid var(--bordo);
    color: var(--testo);
    font-size: 16px;
    padding: 5px 11px;
    border-radius: var(--raggio-sm);
    cursor: pointer;
}

.pastiglia {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--testo-2);
    padding: 6px 13px;
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: 20px;
}

.punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--verde);
    animation: pulsa 2s infinite;
}

@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Contenuto ─────────────────────────────────────────────────────────── */

/* Nessun max-width: su un monitor largo il contenuto usa tutto lo spazio.
   Il tetto di 1400px non centrava nemmeno il contenuto — non c'e' un
   margin auto — quindi a 2400px lasciava 752px vuoti a DESTRA, e la pagina
   risultava sbilanciata invece che semplicemente stretta.

   Cio' che si allarga e' quello che ci guadagna: le tabelle prendono piu'
   colonne senza scorrimento, e le griglie di .riquadri e .dettagli (auto-fill
   su minmax) si distribuiscono su piu' colonne da se'.

   ⚠️ Cio' che NON deve allargarsi ha un tetto proprio, e va lasciato: i campi
   dei moduli (.campo, 480px), le schede dei moduli (.scheda-stretta, 620px) e
   il testo di .avviso e .nota, che oltre una certa misura si legge peggio. */
.contenuto {
    padding: 26px;
    width: 100%;
    animation: entra .3s ease both;
}

@keyframes entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.intestazione-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.intestazione-pagina h1 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }

.sottotitolo-pagina { color: var(--testo-2); font-size: 13px; margin-top: 2px; }

h2 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }

.titolo-sezione {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    margin: 26px 0 14px;
}

.icona-sezione {
    width: 30px;
    height: 30px;
    border-radius: var(--raggio-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: var(--accento-tenue);
    color: var(--accento);
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.scheda {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 22px;
    margin-bottom: 18px;
}

.scheda-stretta { max-width: 620px; }

.scheda p { color: var(--testo-2); }

.scheda p + p { margin-top: 10px; }

/* ── Riquadri numerici, con la barra colorata in testa ─────────────────── */

/* ⚠️ auto-FIT, non auto-fill: e' la differenza che riempie la riga.
   Con auto-fill le colonne vuote restano in griglia e i riquadri si fermano
   alla larghezza minima, lasciando uno spazio morto a destra — che e' il
   difetto che il committente ha segnalato. Con auto-fit le colonne vuote
   collassano e i riquadri si allargano fino a occupare tutto. */
.riquadri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Il riquadro nello stile Apex: etichetta in maiuscoletto, valore grande,
   nota sotto, e l'icona in un quadrato tondeggiante IN ALTO A DESTRA.
   L'icona e' prima nel markup perche' e' prima nella lettura logica, e viene
   posizionata: cambiare l'ordine dell'HTML per una ragione visiva e' il modo
   di far leggere «icona, etichetta, valore» a chi usa un lettore di schermo. */
.riquadro {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transizione), background var(--transizione);
}

.riquadro:hover {
    border-color: var(--bordo-chiaro);
    background: var(--card-sopra);
}

.riquadro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accento);
}

.riquadro:hover {
    border-color: var(--bordo-chiaro);
    transform: translateY(-2px);
    box-shadow: var(--ombra);
}

.riquadro-icona {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--accento-tenue);
}

.riquadro-etichetta {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--testo-2);
    margin-bottom: 3px;
}

/* ⚠️ Il valore e' del colore del TESTO, non dell'accento. In Apex il numero e'
   bianco e il colore sta nell'icona e nella variazione: un cruscotto in cui
   ogni numero e' colorato non ha piu' modo di dire «guarda questo». */
.riquadro-valore {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.15;
    color: var(--testo);
    padding-right: 46px;
}

.riquadro-nota { font-size: 11.5px; color: var(--testo-3); margin-top: 5px; }

/* Le varianti tingono l'ICONA e la striscia superiore, non il numero.
   ⚠️ L'unica che tinge anche il valore e' arancio, perche' li' il valore e' una
   PAROLA — «Da validare» — e in quel caso il colore e' l'informazione. */
.riquadro-verde::before { background: var(--verde); }
.riquadro-verde .riquadro-icona { background: rgba(16, 185, 129, .14); color: var(--verde); }

.riquadro-viola::before { background: var(--viola); }
.riquadro-viola .riquadro-icona { background: rgba(168, 85, 247, .14); color: var(--viola); }

.riquadro-arancio::before { background: var(--arancio); }
.riquadro-arancio .riquadro-icona { background: rgba(245, 158, 11, .14); color: var(--arancio); }
.riquadro-arancio .riquadro-valore { color: var(--arancio); font-size: 22px; }

.riquadro-ciano::before { background: var(--ciano); }
.riquadro-ciano .riquadro-icona { background: rgba(6, 182, 212, .14); color: var(--ciano); }

.riquadro-blu::before { background: var(--blu); }
.riquadro-blu .riquadro-icona { background: rgba(59, 130, 246, .14); color: var(--blu); }

.riquadro-grigio::before { background: var(--testo-3); }
.riquadro-grigio .riquadro-icona { background: rgba(113, 113, 122, .18); color: var(--testo-2); }

/* ------------------------------------------ il riquadro che porta a una pagina
   Un riquadro puo' essere un COLLEGAMENTO, e allora e' un <a> e non un <div>
   con un gestore di clic: la CSP vieta gli script in linea (DC18), e un
   collegamento vero si apre anche con la tastiera, col tasto centrale e in una
   scheda nuova.

   ⚠️ Servono display e color espliciti: senza, l'anchor porterebbe il colore
   dell'accento e la sottolineatura su tutto il testo del riquadro. */
a.riquadro {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.riquadro:hover,
a.riquadro:focus-visible { text-decoration: none; }

a.riquadro:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* La freccia in basso a destra dice «questo si apre»: e' il solo segno che
   distingue un riquadro che porta altrove da uno che sta fermo. */
a.riquadro::after {
    content: 'ƒA';
    position: absolute;
    right: 18px;
    bottom: 12px;
    font-size: 17px;
    line-height: 1;
    color: var(--testo-3);
    transition: color var(--transizione), transform var(--transizione);
}

a.riquadro:hover::after { color: var(--testo); transform: translateX(2px); }

/* ── Tabelle ───────────────────────────────────────────────────────────── */

.tabella-scheda {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    margin-bottom: 18px;
}

.tabella-scheda-testa {
    padding: 16px 20px;
    border-bottom: 1px solid var(--bordo);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.tabella-scheda-testa h2 { margin: 0; }

/* Le tabelle hanno molte colonne: scorrono dentro il proprio contenitore
   invece di allargare la pagina. */
.tabella-avvolgi { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
    text-align: left;
    padding: 11px 16px;
    font-weight: 700;
    color: var(--testo-2);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
    background: rgba(0, 0, 0, .18);
    border-bottom: 1px solid var(--bordo);
    white-space: nowrap;
}

tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--bordo);
    white-space: nowrap;
    vertical-align: middle;
}

tbody tr:hover { background: var(--card-sopra); }
tbody tr:last-child td { border-bottom: none; }

tbody tr.riga-spenta td { opacity: .55; }

.cella-principale { font-weight: 600; color: var(--testo); }

.cella-tenue { color: var(--testo-3); }

.colonna-azioni { display: flex; gap: 12px; align-items: center; }

.in-linea { display: inline; margin: 0; }

/* ── Pastiglie di stato ────────────────────────────────────────────────── */

.stato {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
}

.stato-attivo    { background: rgba(45, 212, 160, .12); color: var(--verde); }
.stato-spento    { background: rgba(92, 96, 120, .2);   color: var(--testo-2); }
.stato-bloccato  { background: rgba(245, 197, 66, .12); color: var(--giallo); }
.stato-errore    { background: rgba(240, 86, 74, .12);  color: var(--rosso); }
.stato-info      { background: rgba(59, 130, 246, .14); color: var(--blu); }

/* ── Moduli ────────────────────────────────────────────────────────────── */

fieldset {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    padding: 16px 18px 4px;
    margin-bottom: 20px;
}

legend {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--testo-2);
}

.campo { margin-bottom: 16px; max-width: 480px; }

.campo label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo textarea,
.campo select {
    width: 100%;
    padding: 9px 11px;
    background: var(--sfondo);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    color: var(--testo);
    font: inherit;
    transition: border-color var(--transizione);
}

.campo textarea { min-height: 74px; resize: vertical; }

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
    outline: none;
    border-color: var(--accento);
    box-shadow: 0 0 0 3px var(--accento-tenue);
}

.campo input[readonly],
.campo input[disabled] {
    background: rgba(0, 0, 0, .25);
    color: var(--testo-2);
    cursor: not-allowed;
}

.campo-interruttore { margin-bottom: 16px; }

.campo-interruttore label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
    cursor: pointer;
}

.campo-interruttore input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accento); }

/* Stesso motivo di .avviso: e' testo, e il testo ha una misura di lettura. */
.nota { display: block; color: var(--testo-3); font-size: 11.5px; margin-top: 5px; max-width: 100ch; }

.valore-fisso {
    display: inline-block;
    padding: 7px 11px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    color: var(--testo-2);
    font-size: 13px;
}

.errore-campo { display: block; color: var(--rosso); font-size: 11.5px; margin-top: 5px; }

.azioni-modulo {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--bordo);
}

/* ── Pulsanti ──────────────────────────────────────────────────────────── */

.pulsante {
    display: inline-block;
    padding: 8px 16px;
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    color: var(--testo);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transizione);
}

.pulsante:hover { background: var(--card-sopra); border-color: var(--bordo-chiaro); text-decoration: none; }

.pulsante-principale { background: var(--accento); border-color: var(--accento); color: #06281c; font-weight: 600; }
.pulsante-principale:hover { background: var(--accento-chiaro); border-color: var(--accento-chiaro); }

.pulsante-tenue { background: transparent; color: var(--testo-2); }
.pulsante-tenue:hover { color: var(--testo); }

.pulsante-pericolo { color: var(--rosso); border-color: rgba(240, 86, 74, .4); }
.pulsante-pericolo:hover { background: rgba(240, 86, 74, .1); border-color: var(--rosso); }

.collegamento {
    background: none;
    border: none;
    padding: 0;
    color: var(--accento);
    font: inherit;
    cursor: pointer;
}

.collegamento:hover { text-decoration: underline; }

.collegamento-pericolo { color: var(--rosso); }

/* ── Avvisi ────────────────────────────────────────────────────────────── */

/* La misura e' in ch, non in px: dipende dalla dimensione del carattere, che
   e' cio' che determina quante lettere entrano in una riga. Oltre le 90-100
   l'occhio perde il capo della riga successiva — e questi riquadri portano le
   spiegazioni piu' lunghe della console. Senza il tetto, su un monitor largo
   diventerebbero una riga unica da 2300px. */
.avviso {
    padding: 12px 16px;
    border-radius: var(--raggio-sm);
    margin-bottom: 18px;
    font-size: 13px;
    max-width: 100ch;
    border: 1px solid;
}

.avviso:empty { display: none; }

.avviso ul { margin: 0; padding-left: 20px; }

.avviso-riuscito   { background: rgba(45, 212, 160, .1);  color: var(--verde);  border-color: rgba(45, 212, 160, .3); }
.avviso-errore     { background: rgba(240, 86, 74, .1);   color: var(--rosso);  border-color: rgba(240, 86, 74, .3); }
.avviso-attenzione { background: rgba(245, 197, 66, .1);  color: var(--giallo); border-color: rgba(245, 197, 66, .3); }
.avviso-informa    { background: rgba(78, 140, 255, .08); color: var(--testo-2); border-color: rgba(78, 140, 255, .25); }

.avviso-informa strong { color: var(--accento); }

/* ── Stato vuoto ───────────────────────────────────────────────────────── */

.vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 170px;
    color: var(--testo-3);
    text-align: center;
}

.vuoto-icona { font-size: 30px; opacity: .5; }

/* ── Coppie etichetta/valore ───────────────────────────────────────────── */

.dettagli {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 26px;
}

.dettaglio-etichetta {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--testo-3);
    margin-bottom: 2px;
}

.dettaglio-valore { font-size: 13.5px; word-break: break-all; }

/* ── Pagina di accesso ─────────────────────────────────────────────────── */

.corpo-accesso { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.contenuto-accesso { width: 100%; max-width: 380px; padding: 24px; }

.scheda-accesso { margin: 0; }

.accesso-marchio {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.accesso-marchio h1 { font-size: 18px; font-weight: 700; }

.accesso-marchio span { display: block; font-size: 12px; font-weight: 500; color: var(--testo-2); }

.scheda-accesso .campo { max-width: none; }

.scheda-accesso .pulsante-principale { width: 100%; text-align: center; margin-top: 6px; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .apri-menu { display: block; }

    .laterale {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform var(--transizione);
        box-shadow: var(--ombra);
    }

    .laterale.aperto { transform: translateX(0); }

    .contenuto { padding: 18px; }
    .barra { padding: 0 16px; }
}

@media (max-width: 620px) {
    .riquadri { grid-template-columns: 1fr 1fr; gap: 12px; }
    .riquadro-valore { font-size: 22px; }
    .barra-titolo { font-size: 15px; }
    .pastiglia { display: none; }
    .intestazione-pagina { align-items: flex-start; flex-direction: column; }
}

/* ===========================================================================
   Aggiunte della consegna 4

   ⚠️ Queste classi esistono anche per una ragione che non e' estetica: la
   Content-Security-Policy montata in Program.cs vieta gli stili in linea
   dell'applicazione, e gli `style="..."` che erano sparsi nelle viste sono
   diventati le classi qui sotto. Una regola in un foglio di stile si puo'
   riusare e si trova cercando; un `style` in una vista no.
   =========================================================================== */

/* ── Utilita' di testo, al posto degli `style` in linea ─────────────────── */

.testo-tenue { color: var(--testo-2); }

/* Un paragrafo che precede un blocco di comandi: era un
   `style="margin-bottom: 18px"` nelle pagine di errore. */
.testo-staccato { margin-bottom: 18px; }

.elenco-tenue {
    color: var(--testo-2);
    margin: 0 0 10px 20px;
}

.elenco-tenue li + li { margin-top: 6px; }

/* I titoli dentro una scheda hanno bisogno di aria sopra quando ne seguono un
   altro blocco: era un `style="margin-top: 22px"` ripetuto quattro volte. */
.scheda h2 + p,
.scheda h2 + ul { margin-top: 4px; }

.scheda h2:not(:first-child) { margin-top: 22px; }

.scheda p.staccato { margin-top: 14px; }

/* ── Filtro di un elenco ────────────────────────────────────────────────── */

.filtro { padding-bottom: 14px; }

.filtro-campi {
    display: grid;

    /* auto-fill e non auto-fit: con auto-fit una riga con due soli campi li
       stirerebbe per tutta la larghezza, e su uno schermo largo il modulo
       diventerebbe illeggibile. */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0 14px;
    align-items: start;
}

.campo-compatto { max-width: none; margin-bottom: 12px; }

/* Il campo di ricerca libera occupa due colonne quando c'e' spazio: e' quello
   in cui si scrive di piu'. */
.campo-largo {
    max-width: none;
    margin-bottom: 12px;
    grid-column: span 2;
}

/* Una via di mezzo: piu' largo di .campo-compatto, meno di .campo-largo.
   Serve a un elenco a discesa le cui voci sono lunghe — un nome di Ente non
   sta in centonovanta pixel, e tagliato non si distingue da un altro che
   comincia uguale. */
.campo-medio {
    max-width: none;
    margin-bottom: 12px;
}

/* ⚠️ Il modulo di ricerca ha colonne piu' larghe degli altri filtri, e non per
   estetica: la griglia normale parte da 190 px, e con quella misura il campo
   dello pseudonimo non mostra nemmeno meta' di un codice pubblico. Qui la
   colonna parte da 260 px, quindi il campo largo — che ne occupa due — arriva
   a oltre 500 px. */
.filtro-ricerca {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ⚠️ Qui i pulsanti stanno DENTRO la griglia dei campi, mentre sulle altre
   pagine .filtro-azioni e' una riga a se' sotto i campi — ed e' per quella
   posizione che ha un filo di separazione sopra e nessun allineamento
   verticale.

   Dentro la griglia il risultato era sbagliato: align-items: start li
   incollava al bordo superiore della cella, cioe' all'altezza delle ETICHETTE,
   mentre i campi veri cominciano piu' sotto. I pulsanti restavano appesi in
   alto con un filo orizzontale sopra di loro.

   Si allineano invece alla BASE dei campi — stesso margine inferiore, cosi'
   che il bordo basso dei pulsanti coincida con quello dell'elenco a discesa —
   e il filo sparisce, perche' non c'e' piu' niente da separare. */
.filtro-ricerca > .filtro-azioni {
    align-self: end;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 12px;
}

/* E sotto gli 800 px si torna a una colonna sola: due colonne da 260 px non ci
   stanno, e la griglia le stringerebbe sotto la misura utile. */
@media (max-width: 800px) {
    .filtro-ricerca {
        grid-template-columns: minmax(0, 1fr);
    }

    .filtro-ricerca .campo-largo {
        grid-column: span 1;
    }
}

@media (max-width: 620px) {
    .campo-largo { grid-column: span 1; }
}

.filtro-azioni {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid var(--bordo);
    margin-top: 4px;
}

/* ----------------------------------------------- il filtro con un campo solo
   ⚠️ La griglia di .filtro-campi e' sbagliata quando i campi sono uno o due:
   auto-fill con colonne da 190 px stringe l'elenco a discesa a una misura in
   cui un nome di Ente non ci sta, e spinge i pulsanti nella colonna accanto —
   dove la riga di separazione di .filtro-azioni, pensata per stare SOTTO i
   campi, taglia il modulo verticalmente a meta'.

   Qui si dispone in linea: campo e pulsanti sulla stessa riga, allineati in
   basso, cioe' sulla base dell'elenco a discesa e non su quella dell'etichetta
   che gli sta sopra. */
.filtro-in-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.filtro-in-linea .campo {
    margin-bottom: 0;
    max-width: none;
    flex: 0 1 300px;
    min-width: 220px;
}

/* Un campo di ricerca libera ha bisogno di piu' spazio di un elenco a discesa:
   ci si scrive dentro, e a 300 px una ragione sociale non si rilegge. */
.filtro-in-linea .campo-cerca { flex: 1 1 380px; }

/* ⚠️ La casella di spunta porta un margine inferiore pensato per i moduli
   verticali: in una riga allineata in basso quel margine la solleverebbe
   rispetto ai campi e ai pulsanti. */
.filtro-in-linea .campo-interruttore {
    margin-bottom: 0;
    padding-bottom: 9px;
    white-space: nowrap;
}

/* Senza riga sopra e senza spazio: la separazione serviva a staccare i
   pulsanti dai campi quando stavano su due righe, e qui stanno sulla stessa. */
.filtro-in-linea .filtro-azioni {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* ------------------------------------------- la riga delle voci nascoste
   Sta fra il filtro e l'elenco, e c'e' SEMPRE — anche quando non c'e' niente
   di nascosto. Una coda che nasconde qualcosa senza dirlo e' una coda di cui
   non ci si fida: il numero deve stare dove cade l'occhio prima di leggere le
   righe, non in fondo alla pagina. */
.barra-nascosti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    font-size: 13px;
    color: var(--testo-2);
}

/* Un modulo dentro una cella di tabella: serve a non far andare a capo il
   pulsante che contiene, che altrimenti scenderebbe sotto «Apri» perche' un
   <form> e' di blocco. */
.modulo-in-linea { display: inline; }

/* Una casella di spunta messa fra i pulsanti di un filtro: il margine
   inferiore dei moduli verticali la disallineerebbe dai pulsanti. */
.filtro-azioni .campo-interruttore { margin-bottom: 0; white-space: nowrap; }

.nota-in-linea { margin-top: 0; flex: 1; min-width: 240px; }

/* ── Paginazione ────────────────────────────────────────────────────────── */

.paginazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    color: var(--testo-2);
    font-size: 12.5px;
}

.paginazione-conteggio strong { color: var(--testo); }

.paginazione-comandi { display: flex; gap: 8px; flex-wrap: wrap; }

/* Disattivati e non assenti: se comparissero e scomparissero, i pulsanti si
   sposterebbero sotto il cursore a ogni cambio di pagina. */
.pulsante-spento {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* ── Celle di una tabella di conteggi ───────────────────────────────────── */

.colonna-numero { text-align: right; font-variant-numeric: tabular-nums; }

thead th.colonna-numero { text-align: right; }

/* Uno zero resta visibile ma non attira: l'occhio deve cadere sui contatori
   che hanno qualcosa dentro. */
.cella-zero { color: var(--testo-3); }

.cella-verde  { color: var(--verde);  font-weight: 600; }
.cella-gialla { color: var(--giallo); font-weight: 600; }
.cella-rossa  { color: var(--rosso);  font-weight: 600; }

/* Il nome dell'Ente sotto il suo codice, nella stessa cella. */
.cella-secondaria {
    display: block;
    color: var(--testo-3);
    font-weight: 400;
    font-size: 12px;
}

/* Gli istanti e gli indirizzi IP si leggono incolonnati: con un carattere
   proporzionale due righe della stessa lunghezza sembrano diverse. */
.cella-monospazio {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
}

/* I dettagli dell'audit sono l'unica colonna che puo' andare a capo: sono testo
   libero, e tenerli su una riga sola renderebbe la tabella larga il doppio. */
.cella-dettagli {
    white-space: normal;
    max-width: 46ch;
    color: var(--testo-2);
    font-size: 12.5px;
}

.riquadro-valore-piccolo { font-size: 20px; }

/* ── Pagine che precedono la sessione ───────────────────────────────────── */

.testo-accesso {
    color: var(--testo-2);
    font-size: 13px;
    margin-bottom: 16px;
}

.accesso-piede {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--bordo);
    font-size: 12.5px;
}

.accesso-piede + .accesso-piede { margin-top: 10px; }

.accesso-piede .nota { margin-top: 6px; }

/* Sei cifre da leggere e ricopiare: incolonnate, grandi e distanziate, perche'
   e' l'unico campo della pagina e sbagliarlo costa un tentativo. */
.campo-codice {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 22px !important;
    letter-spacing: 10px;
    text-align: center;
    padding: 12px 10px !important;
}

/* ── Elenco delle regole della password ─────────────────────────────────── */

.regole-password {
    list-style: none;
    margin: -6px 0 16px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    font-size: 12.5px;
    color: var(--testo-2);
}

.regole-password li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

/* Il segno si disegna in CSS e non con un carattere nel markup: cosi' cambia
   con la classe, senza che Javascript debba riscrivere il contenuto. */
.regole-password .regola-segno::before {
    content: "\25CB";
    color: var(--testo-3);
}

.regole-password .regola-soddisfatta .regola-segno::before {
    content: "\2713";
    color: var(--verde);
}

.regole-password .regola-mancante .regola-segno::before {
    content: "\2022";
    color: var(--giallo);
}

.regole-password .regola-soddisfatta .regola-testo { color: var(--verde); }

/* ── Campo respinto dalla validazione lato client ───────────────────────── */

.campo input.campo-non-valido,
.campo textarea.campo-non-valido,
.campo select.campo-non-valido {
    border-color: var(--rosso);
    background: rgba(240, 86, 74, .06);
}


/* ── Barre di distribuzione, senza librerie e senza style in linea ──────── */

/* ⚠️ La larghezza sta in una CLASSE e non in uno `style=`: la CSP di questa
   console tiene `unsafe-inline` sugli stili solo perche' ASP.NET Core genera da
   se' `style="display:none"` sui campi nascosti, e uno stile in linea nostro
   renderebbe quell'eccezione permanente. Gli scatti di 5% bastano: una barra e'
   un confronto visivo, e nessuno distingue 43% da 45%.

   Nessuna libreria di grafici, coerente con la DC9: quando serviranno grafici
   veri, la libreria andra' servita da wwwroot e non da un CDN. */

.cella-barra { min-width: 120px; width: 22%; }

/* ⚠️ Si chiamava .barra, come l'intestazione della pagina in _Layout, e
   stando piu' in basso nel foglio LA SOVRASCRIVEVA: l'intestazione ereditava
   display:block e un fondo a gradiente. Con l'accento blu il difetto era
   discreto; col verde e' diventato evidente, ed e' cosi' che l'ho trovato.

   La lezione: in un foglio unico un nome generico e' una collisione che
   aspetta. .riempimento dice cosa e', non che forma ha. */
.riempimento {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accento), #0d9488);
    min-width: 2px;
}

.riempimento-0 { width: 0%; }
.riempimento-5 { width: 5%; }
.riempimento-10 { width: 10%; }
.riempimento-15 { width: 15%; }
.riempimento-20 { width: 20%; }
.riempimento-25 { width: 25%; }
.riempimento-30 { width: 30%; }
.riempimento-35 { width: 35%; }
.riempimento-40 { width: 40%; }
.riempimento-45 { width: 45%; }
.riempimento-50 { width: 50%; }
.riempimento-55 { width: 55%; }
.riempimento-60 { width: 60%; }
.riempimento-65 { width: 65%; }
.riempimento-70 { width: 70%; }
.riempimento-75 { width: 75%; }
.riempimento-80 { width: 80%; }
.riempimento-85 { width: 85%; }
.riempimento-90 { width: 90%; }
.riempimento-95 { width: 95%; }
.riempimento-100 { width: 100%; }

/* ── Pastiglia di un tipo di segnale, nella tabella dei conteggi ────────── */

.pastiglia-tipo {
    display: inline-block;
    background: rgba(78, 140, 255, .1);
    border: 1px solid rgba(78, 140, 255, .25);
    border-radius: 4px;
    padding: 1px 6px;
    margin: 1px 3px 1px 0;
    font-size: 11.5px;
    color: var(--testo-2);
    white-space: nowrap;
    cursor: help;
}

.pastiglia-tipo strong { color: var(--testo); }

/* ----------------------------------------------------------------------------
   Linguette della coda: due domande diverse sulla stessa pagina.
   Sono <a>, non <button>: ognuna e' un indirizzo che si puo' salvare fra i
   preferiti, ed e' cio' che serve a chi apre sempre la stessa coda.
   ------------------------------------------------------------------------- */
.linguette {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--bordo);
    margin-bottom: 1rem;
}

.linguetta {
    padding: 0.5rem 1rem;
    color: var(--testo-tenue);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}

.linguetta:hover {
    color: var(--testo);
}

.linguetta-attiva {
    color: var(--accento);
    border-bottom-color: var(--accento);
}

/* Il conteggio della coda: e' il numero che si guarda per primo. */
.riepilogo-coda {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

.riepilogo-coda strong {
    font-size: 1.4rem;
    color: var(--accento);
}

.nota-inline {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--testo-tenue);
}

.nota-filtro {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--testo-tenue);
}

.numero-allarme {
    color: var(--errore);
    font-weight: 600;
}

.paginazione-stato {
    color: var(--testo-tenue);
    font-size: 0.9rem;
}


/* ===========================================================================
   GRAFICI

   Sono SVG generati dal server. Non c'e' nessuna libreria e non c'e' nessuno
   script: la DC9 esclude i CDN e la DC18 vieta gli script in linea, quindi un
   grafico disegnato dal browser andrebbe servito da wwwroot e inizializzato —
   due cose che un SVG non ha bisogno di fare.

   ⚠️ Il colore dei settori sta QUI e non nel modello di business. Un record che
   porta un codice colore obbliga a ricompilare il Business per cambiare una
   tinta, e mette una decisione di presentazione in uno strato che non ne sa
   niente.
   =========================================================================== */

/* Due griglie, e non una che si arrangia: il committente ha chiesto tre schede
   sulla prima riga e due sulla seconda, ed e' la disposizione giusta — gli
   anelli e l'elenco degli Enti stanno in poco spazio, le serie temporali hanno
   bisogno di larghezza.

   ⚠️ Il numero di colonne e' FISSO, non auto-fit. Con auto-fit il numero
   dipende dalla larghezza dello schermo, e le stesse schede finirebbero
   3+2 su un monitor e 2+2+1 su un altro: il committente ha chiesto una
   disposizione, non un suggerimento. Il collasso resta, ma a soglie decise. */
.griglia-3,
.griglia-2 {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ⚠️ minmax(0, 1fr) e non 1fr: il valore automatico di una colonna di griglia
   e' `auto`, che NON scende sotto la larghezza del suo contenuto — e una
   tabella o un SVG larghi sfondano la colonna invece di adattarsi. Con lo zero
   la colonna puo' stringersi, ed e' il contenuto a scorrere. */

/* Sotto i 1100 px tre colonne diventano due: un anello con la sua legenda in un
   terzo di 1000 px sta in 300 px, e la legenda va a capo su ogni riga. */
@media (max-width: 1100px) {
    .griglia-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* E sotto i 760 px una sola: e' la soglia sotto la quale due colonne di grafico
   diventano illeggibili entrambe. */
@media (max-width: 760px) {
    .griglia-3,
    .griglia-2 { grid-template-columns: minmax(0, 1fr); }
}

.scheda-grafico { margin-bottom: 0; }

.scheda-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.scheda-grafico h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--testo);
}

.scheda-sotto {
    font-size: 12px;
    color: var(--testo-3);
    margin-top: 2px;
}

/* --------------------------------------------------------------- anelli */

.anello-riga {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.anello {
    width: 140px;
    height: 140px;
    flex: 0 0 140px;
    /* ⚠️ La rotazione parte da mezzogiorno. Senza, il primo settore comincia a
       ore 3 e l'anello sembra ruotato di un quarto. */
    transform: rotate(-90deg);
}

.anello-fondo {
    fill: none;
    stroke: var(--card-sopra);
    stroke-width: 14;
}

.anello-settore {
    fill: none;
    stroke-width: 14;
    /* Estremi arrotondati: e' il dettaglio che rende l'anello «Apex» invece di
       un diagramma a torta. ⚠️ Su fette molto piccole arrotonda oltre la loro
       lunghezza e le fa sembrare piu' grandi: e' la ragione per cui i valori
       stanno anche in legenda, in cifre. */
    stroke-linecap: round;
}

/* Il testo dentro l'anello va ruotato al contrario, o esce coricato. */
.anello-valore,
.anello-nota {
    transform: rotate(90deg);
    transform-origin: 70px 70px;
    text-anchor: middle;
}

.anello-valore {
    fill: var(--testo);
    font-size: 26px;
    font-weight: 700;
}

.anello-nota {
    fill: var(--testo-3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* --------------------------------------------------------------- legende */

.legenda {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 160px;
    min-width: 160px;
}

.legenda li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12.5px;
    border-bottom: 1px solid var(--bordo);
}

.legenda li:last-child { border-bottom: none; }

.legenda-nome { flex: 1; color: var(--testo-2); }
.legenda-valore { font-weight: 600; color: var(--testo); }
.legenda-quota { color: var(--testo-3); min-width: 34px; text-align: right; }

.legenda-inline {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--testo-2);
    white-space: nowrap;
}

/* ⚠️ Si chiamava .punto e duplicava quello dell'intestazione — che e' verde
   e PULSA. Stando piu' in basso vinceva, e il pallino di stato accanto al nome
   dell'operatore diventava grigio e immobile. */
.pallino {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 9px;
    background: var(--testo-3);
}

.pallino-tenue { background: var(--bordo-chiaro); }

/* --------------------------------------------------------------- barre */

/* ⚠️ preserveAspectRatio="none" nel markup deforma volutamente l'SVG: le
   colonne si allargano col contenitore e l'altezza resta quella. E' la ragione
   per cui l'altezza e' fissata qui e non nel viewBox. */
.barre {
    width: 100%;
    height: 150px;
    display: block;
}

.griglia { stroke: var(--bordo); stroke-width: 1; }

.barra-riuscita { fill: var(--accento); }
.barra-fallita  { fill: var(--rosso); }
.barra-segnale  { fill: var(--blu); }

/* L'asse: le etichette sono fuori dall'SVG, in un flex che ne ripete il passo.
   ⚠️ Dentro l'SVG con preserveAspectRatio="none" il testo si deformerebbe
   insieme alle colonne, e con quattordici giorni diventa illeggibile. */
.asse-barre {
    display: flex;
    margin-top: 6px;
    font-size: 10px;
    color: var(--testo-3);
}

.asse-barre span {
    flex: 1 1 0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

/* --------------------------------------------------- barre orizzontali */

.barre-orizzontali {
    list-style: none;
    margin: 0;
    padding: 0;
}

.barre-orizzontali li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 12.5px;
}

.barra-nome {
    flex: 0 0 64px;
    color: var(--testo-2);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-vasca {
    flex: 1;
    background: var(--card-sopra);
    border-radius: 4px;
    overflow: hidden;
    display: block;
}

.barra-valore {
    flex: 0 0 40px;
    text-align: right;
    font-weight: 600;
    color: var(--testo);
}

/* --------------------------------------------------------------- note */

.nota-grafico {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--bordo);
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--testo-3);
}

/* ⚠️ Si chiamava .pastiglia e duplicava quella dell'intestazione, che ha
   bordo e fondo: quella accanto al nome dell'operatore li perdeva. */
.quota {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.quota-ok { background: var(--accento-tenue); color: var(--accento); }
.quota-ko { background: rgba(239, 68, 68, .14); color: var(--rosso); }

/* ------------------------------------------------- colori dei settori

   Otto tinte, come gli stati del collegamento. ⚠️ Se un nono stato venisse
   aggiunto alla lookup, MappaturaGrafici riparte dalla prima e due settori
   avranno lo stesso colore: la legenda resta corretta, ma e' il momento di
   aggiungere una classe qui.

   ⚠️ Le due del ciclo sono semantiche e NON stanno nella sequenza: verde vuol
   dire riuscita e rosso fallimento. Usarle per far tornare un ciclo di colori
   darebbe un grafico che mente. */

.settore-riuscita   { stroke: var(--accento); }
.settore-fallimento { stroke: var(--rosso); }

.settore-1 { stroke: var(--accento); }
.settore-2 { stroke: var(--blu); }
.settore-3 { stroke: var(--viola); }
.settore-4 { stroke: var(--arancio); }
.settore-5 { stroke: var(--ciano); }
.settore-6 { stroke: var(--rosa); }
.settore-7 { stroke: var(--giallo); }
.settore-8 { stroke: var(--testo-3); }

/* Gli stessi colori per i pallini della legenda, che sono <span> e non tratti:
   li' serve background, non stroke. */
.pallino.settore-riuscita   { background: var(--accento); }
.pallino.settore-fallimento { background: var(--rosso); }
.pallino.settore-1 { background: var(--accento); }
.pallino.settore-2 { background: var(--blu); }
.pallino.settore-3 { background: var(--viola); }
.pallino.settore-4 { background: var(--arancio); }
.pallino.settore-5 { background: var(--ciano); }
.pallino.settore-6 { background: var(--rosa); }
.pallino.settore-7 { background: var(--giallo); }
.pallino.settore-8 { background: var(--testo-3); }

/* Sotto i 640 px l'anello e la sua legenda si impilano: affiancati, l'anello
   scende a meno di 100 px e le cifre dentro non si leggono piu'. */
@media (max-width: 640px) {
    .anello-riga { flex-direction: column; align-items: flex-start; }
    .anello { width: 120px; height: 120px; flex-basis: 120px; }
    .scheda-testa { flex-direction: column; }
}


/* ===========================================================================
   GUIDA

   ⚠️ Il percorso e' un diagramma in HTML, non in SVG, e contraddice la DC23 a
   ragion veduta: quella vale per i GRAFICI, che sono geometria con etichette
   corte. Qui ogni passo e' una frase, e in un SVG il testo non va a capo — con
   un carattere piu' grande o uno schermo stretto uscirebbe dal riquadro.
   In HTML rifluisce, si ingrandisce, si copia, e lo legge un lettore di
   schermo.

   Il diagramma degli STATI e' invece SVG: etichette di una parola, e la forma
   — la fila che avanza, i rami che escono — e' l'informazione.
   =========================================================================== */

.percorso {
    position: relative;
    margin-bottom: 20px;
}

/* La linea verticale che unisce i passi: si ferma prima dell'ultimo numero, o
   sporgerebbe sotto l'ultimo riquadro. */
.percorso::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 18px;
    bottom: 30px;
    width: 2px;
    background: var(--bordo);
}

.passo {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    position: relative;
}

.passo-numero {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card-sopra);
    border: 2px solid var(--bordo);
    color: var(--testo-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;

    /* Sopra la linea, o la linea gli passa attraverso. */
    position: relative;
    z-index: 1;
}

.passo-corpo {
    flex: 1;
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 14px 18px;
}

.passo-testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.passo-titolo { font-weight: 600; color: var(--testo); font-size: 14.5px; }

.passo-descrizione { margin: 0; color: var(--testo-2); font-size: 13px; line-height: 1.7; }

.passo-guasto {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--bordo);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--testo-3);
}

.passo-guasto strong { color: var(--arancio); }

/* L'attore: e' la risposta alla meta' delle domande, quindi ha un colore. */
.attore {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.attore-mindbe       { background: var(--accento-tenue);          color: var(--accento); }
.attore-ente         { background: rgba(59, 130, 246, .14);       color: var(--blu); }
.attore-persona      { background: rgba(168, 85, 247, .14);       color: var(--viola); }
.attore-piattaforma  { background: rgba(6, 182, 212, .14);        color: var(--ciano); }
.attore-provider     { background: rgba(245, 158, 11, .14);       color: var(--arancio); }

/* --------------------------------------------------------- stati in SVG */

.diagramma-stati {
    width: 100%;
    min-width: 640px;
    height: auto;
    display: block;
    margin-bottom: 18px;
}

.stato-riquadro { stroke-width: 1.5; }
.stato-normale    { fill: var(--card-sopra); stroke: var(--accento); }
.stato-guasto     { fill: var(--card-sopra); stroke: var(--rosso); }
.stato-attenzione { fill: var(--card-sopra); stroke: var(--arancio); }
.stato-revoca     { fill: transparent;       stroke: var(--bordo-chiaro); }

.stato-testo {
    fill: var(--testo);
    font-size: 12px;
    font-weight: 600;
    text-anchor: middle;
}

.stato-testo-piccolo { font-size: 10px; font-weight: 400; fill: var(--testo-3); }

.stato-freccia { stroke: var(--bordo-chiaro); stroke-width: 2; }
.stato-ramo    { stroke: var(--bordo-chiaro); stroke-width: 1.5; stroke-dasharray: 3 3; }
.stato-ramo-tenue { stroke: var(--bordo); }

.tabella-stati td { vertical-align: top; }

/* --------------------------------------------------------- carte e voci */

.griglia-aiuto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.carta-aiuto {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transizione), background var(--transizione);
}

.carta-aiuto:hover {
    border-color: var(--accento);
    background: var(--card-sopra);
    text-decoration: none;
}

.carta-icona { font-size: 22px; }
.carta-titolo { font-weight: 600; color: var(--testo); font-size: 14.5px; }
.carta-testo { font-size: 12.5px; color: var(--testo-3); line-height: 1.6; }

.elenco-aiuto { margin: 0; }

.elenco-aiuto dt {
    font-weight: 600;
    color: var(--testo);
    font-size: 13.5px;
    margin-top: 14px;
}

.elenco-aiuto dt:first-child { margin-top: 0; }

.elenco-aiuto dd {
    margin: 4px 0 0;
    color: var(--testo-2);
    font-size: 13px;
    line-height: 1.7;
}

/* Le avvertenze: il motivo per cui questa guida vale piu' di un elenco di
   campi, quindi si vedono. */
.scheda-sapere { border-color: var(--arancio); }

.elenco-sapere { margin: 0; padding-left: 20px; }

.elenco-sapere li {
    color: var(--testo-2);
    font-size: 13px;
    line-height: 1.75;
    margin-bottom: 10px;
}

.elenco-sapere li:last-child { margin-bottom: 0; }

.titolo-icona { margin-right: 6px; }

/* --------------------------------------------- il pulsante nell'intestazione */

.pulsante-aiuto {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    border: 1px solid var(--bordo);
    background: var(--card);
    color: var(--testo-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all var(--transizione);
}

.pulsante-aiuto:hover {
    border-color: var(--accento);
    color: var(--accento);
    text-decoration: none;
}

@media (max-width: 760px) {
    .diagramma-stati { min-width: 560px; }
    .passo-testa { flex-direction: column; align-items: flex-start; gap: 4px; }
}