/* ===========================================================================
   Stile del Portale Ente.

   ── Il tema, dal 9 settembre 2026 ────────────────────────────────────────
   Menu laterale scuro, area di lavoro chiara, riquadri numerici a tinta piena
   con sfumatura. Il linguaggio visivo è quello di **Adminty**, scelto dal
   committente fra tre proposte.

   ⚠️ **Non è il loro codice.** Adminty è un tema commerciale su Bootstrap 5:
   comprarlo avrebbe voluto dire adottare Bootstrap e riscrivere tutte le
   viste, contro la scelta di questo progetto. Qui è ricostruito con il CSS
   nostro, prendendo dal loro demo soltanto la direzione visiva e i valori dei
   colori — misurati sul demo, non a occhio:

       sfondo   #f3f3f3      menu       #404e67     attivo   #fe8a7d
       testo    #353c4e      superfici  #ffffff     raggio   5px
       primario #01a9ac      ombra      0 1px 20px rgba(69,90,100,.08)

   ⚠️ **Il carattere è quello di sistema, non Open Sans** come nell'originale:
   la Content-Security-Policy non consente origini esterne e il §16 del Doc 2
   chiede di poter ricreare l'ambiente senza dipendere dalla rete in uscita.

   ⚠️ **Questo supera la parte visiva della DE9.** Il Centralizzatore resta
   scuro: è una console interna, questa è l'area cliente, e il committente ha
   chiesto per quest'ultima un aspetto proprio. La struttura — nomi delle
   classi, guscio, griglie — resta invece la stessa, quindi una modifica
   strutturale continua a valere per entrambi.

   Scritto a mano e senza framework, e senza CDN.
   =========================================================================== */

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

:root {
    /* Area di lavoro */
    --sfondo:          #f3f3f3;
    --sfondo-2:        #f7f8fa;   /* fasce tenui: testate di tabella, piedi */
    --card:            #ffffff;
    --card-sopra:      #fafbfc;   /* riga di tabella sotto il puntatore */
    --bordo:           #eceff3;
    --bordo-chiaro:    #e2e6ec;
    --testo:           #353c4e;
    --testo-2:         #8b95a5;
    --testo-3:         #aab2bd;

    /* Menu laterale: è l'unica superficie scura, e ha una palette propria */
    --lat:             #404e67;
    --lat-sopra:       #37435a;
    --lat-testo:       #dcdcdc;
    --lat-tenue:       #a9b3c6;
    --lat-sezione:     #8794ad;
    --lat-attivo:      #fe8a7d;

    /* Colori con un significato. ⚠️ Il verde resta riservato a «i dati stanno
       arrivando»: è la regola stabilita quando si è visto che COLLEGATO non
       vuol dire che arrivi qualcosa. */
    --blu:             #4680ff;
    --verde:           #0ac282;
    --giallo:          #fe9365;
    --rosso:           #fe5d70;
    --viola:           #7759de;
    --arancio:         #fe9365;
    --ciano:           #01a9ac;

    /* Azione principale: il verde-acqua di Adminty, distinto dal blu
       informativo perché «premi qui» e «questa è un'informazione» non devono
       avere lo stesso colore. */
    --primario:        #01a9ac;
    --primario-scuro:  #018a8d;

    /* Le sfumature dei riquadri numerici, firma del tema */
    --sf-teal:         linear-gradient(to right, #01a9ac, #01dbdf);
    --sf-verde:        linear-gradient(to right, #0ac282, #0df3a3);
    --sf-arancio:      linear-gradient(to right, #fe9365, #feb798);
    --sf-rosa:         linear-gradient(to right, #fe5d70, #fe909d);
    --sf-viola:        linear-gradient(to right, #7759de, #9d8bf0);
    --sf-grigio:       linear-gradient(to right, #9aa5b5, #b7c0cc);

    --ombra:           0 1px 20px 0 rgba(69, 90, 100, .08);
    --ombra-alta:      0 6px 28px 0 rgba(69, 90, 100, .16);
    --raggio:          5px;
    --raggio-sm:       4px;
    --transizione:     .2s ease;
    --larghezza-menu:  240px;
}

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: #eaecef; }
::-webkit-scrollbar-thumb { background: #d4d9e0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #bfc6cf; }

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

code {
    background: #f4f6f8;
    border: 1px solid var(--bordo-chiaro);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12.5px;
    color: #55606f;
}

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

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

.laterale {
    width: var(--larghezza-menu);
    flex: 0 0 var(--larghezza-menu);
    /* ⚠️ L'unica superficie scura del portale, con una palette propria: i
       token chiari qui dentro non valgono, e le regole sotto li rimpiazzano
       una per una invece di lasciarli filtrare. */
    background: var(--lat);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.laterale-marchio {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 20px;
    height: 60px;
    background: var(--lat-sopra);
}

.logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    background: var(--lat-attivo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}

.laterale-titolo {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1px;
    line-height: 1.25;
    color: #fff;
}

.laterale-titolo span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--lat-sezione);
    letter-spacing: .2px;
}

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

.menu-gruppo {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--lat-sezione);
    padding: 14px 20px 6px;
}

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

.menu-voce {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    color: var(--lat-tenue);
    font-weight: 400;
    transition: all var(--transizione);
    border-left: 3px solid transparent;
}

.menu-voce:hover {
    background: var(--lat-sopra);
    color: #fff;
    text-decoration: none;
}

/* Il coral di Adminty sulla voce corrente: è l'unico posto del menu dove
   compare un colore, quindi si vede da lontano dove si è. */
.menu-voce.attiva {
    background: var(--lat-sopra);
    color: var(--lat-attivo);
    border-left-color: var(--lat-attivo);
    font-weight: 600;
}

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

.laterale-piede {
    padding: 14px 20px;
    border-top: 1px solid #4a5876;
    font-size: 11.5px;
    color: var(--lat-sezione);
}

.laterale-piede span { color: var(--lat-tenue); }

.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(--card);
    box-shadow: var(--ombra);
    position: sticky;
    top: 0;
    z-index: 50;
}

.barra-titolo { flex: 1; font-size: 16px; font-weight: 600; color: #505458; }

.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: 5px 13px;
    background: var(--sfondo-2);
    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 ─────────────────────────────────────────────────────────── */

.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;
}

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

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

/* Il titolo dentro la scheda d'accesso sta sotto il marchio del layout: se
   avesse la misura di un titolo di pagina competerebbe con esso. */
.scheda-accesso h1 { font-size: 17px; }

.sottotitolo-pagina,
.sottotitolo { 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: rgba(1, 169, 172, .13);
    color: var(--primario);
}

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

.scheda {
    background: var(--card);
    border: none;
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 22px;
    margin-bottom: 20px;
}

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

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

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

/* ── Riquadri numerici, a tinta piena con sfumatura ─────────────────────── */

/* È la firma del tema: quattro tessere colorate in cima alla pagina, numero
   grande in bianco.

   ⚠️ I colori restano quelli che avevano un significato, non quelli che
   stanno bene insieme. Il verde è di «stanno trasmettendo» e di nient'altro —
   è l'unica condizione in cui i dati arrivano davvero, e un pannello che
   colorasse di verde «collegati» direbbe all'operatore che è tutto a posto
   quando può non arrivare nulla. */

/* 200px e non di più: i riquadri della pagina iniziale sono cinque, e con una
   misura minima maggiore il quinto va a capo da solo su uno schermo normale —
   una riga con una tessera sola sembra un errore di impaginazione. */
.riquadri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.riquadro {
    background: var(--sf-teal);
    border: none;
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 18px 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: all var(--transizione);
}

.riquadro:hover { box-shadow: var(--ombra-alta); transform: translateY(-2px); }

/* L'icona galleggia a destra del numero, tenue: è un ornamento che aiuta a
   distinguere le tessere a colpo d'occhio, non un'informazione. */
.riquadro-icona {
    position: absolute;
    top: 16px;
    right: 18px;
    width: auto;
    height: auto;
    background: none;
    font-size: 26px;
    opacity: .5;
    margin: 0;
}

.riquadro-etichetta {
    display: block;
    order: 2;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .95);
    margin: 2px 0 0;
}

.riquadro-valore,
.riquadro-numero {
    display: block;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.1;
    color: #fff;
}

.riquadro-nota {
    display: block;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .28);
    font-size: 11.5px;
    color: rgba(255, 255, 255, .9);
}

.riquadro-verde   { background: var(--sf-verde); }
.riquadro-arancio { background: var(--sf-arancio); }
.riquadro-rosso   { background: var(--sf-rosa); }
.riquadro-viola   { background: var(--sf-viola); }
.riquadro-ciano   { background: var(--sf-teal); }
.riquadro-grigio  { background: var(--sf-grigio); }

/* Su tinta piena il numero è sempre bianco: le varianti colorate del tema
   scuro qui non servono più, e lasciarle produrrebbe testo colorato su fondo
   colorato. */
.riquadro-verde .riquadro-valore,   .riquadro-verde .riquadro-numero,
.riquadro-arancio .riquadro-valore, .riquadro-arancio .riquadro-numero,
.riquadro-rosso .riquadro-valore,   .riquadro-rosso .riquadro-numero,
.riquadro-viola .riquadro-valore,   .riquadro-viola .riquadro-numero,
.riquadro-ciano .riquadro-valore,   .riquadro-ciano .riquadro-numero,
.riquadro-grigio .riquadro-valore,  .riquadro-grigio .riquadro-numero { color: #fff; }

.riquadro-verde .riquadro-icona,
.riquadro-arancio .riquadro-icona,
.riquadro-rosso .riquadro-icona,
.riquadro-viola .riquadro-icona,
.riquadro-ciano .riquadro-icona,
.riquadro-grigio .riquadro-icona { background: none; color: #fff; }

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

.tabella-scheda {
    background: var(--card);
    border: none;
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    overflow: hidden;
    margin-bottom: 20px;
}

.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-contenitore` è il nome usato qui,
   `.tabella-avvolgi` quello del Centralizzatore. */
.tabella-avvolgi,
.tabella-contenitore { 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: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: transparent;
    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: .5; }

.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(10, 194, 130, .13); color: #08a06c; }
.stato-spento    { background: #eef0f3;                 color: var(--testo-2); }
.stato-bloccato  { background: rgba(254, 147, 101, .16); color: #d9722f; }
.stato-errore    { background: rgba(254, 93, 112, .13);  color: #d93a4f; }
.stato-info      { background: rgba(70, 128, 255, .12);  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(--primario);
}

.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: #fff;
    border: 1px solid var(--bordo-chiaro);
    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(--primario);
}

.campo input[readonly],
.campo input[disabled] {
    background: var(--sfondo-2);
    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(--primario); }

.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: var(--sfondo-2);
    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;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--bordo);
}

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

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

.pulsante:hover { background: var(--sfondo-2); border-color: #d3d9e1; color: var(--testo); text-decoration: none; }

.pulsante-principale {
    background: var(--primario);
    border-color: var(--primario);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(1, 169, 172, .28);
}

.pulsante-principale:hover { background: var(--primario-scuro); border-color: var(--primario-scuro); color: #fff; }

.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(--primario);
    font: inherit;
    cursor: pointer;
}

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

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

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

.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: #e8f8f1; color: #067a53; border-color: #bfead9; }
.avviso-errore     { background: #ffeef0; color: #cc2f43; border-color: #ffd2d8; }
.avviso-attenzione { background: #fff2ea; color: #c05b1f; border-color: #ffddc9; }

/* `.avviso-informativo` è il nome usato dalle viste di questo portale. */
.avviso-informa,
.avviso-informativo { background: #eef4ff; color: #4a5568; border-color: #d3e0fb; }

.avviso-informa strong,
.avviso-informativo strong { color: var(--blu); }

/* ── 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;
}

/* Dentro una cella o una definizione «vuoto» è un trattino, non un riquadro:
   la versione a colonna centrata occuperebbe 170px di altezza dentro una
   riga di tabella. */
td > .vuoto,
dd > .vuoto,
.vuoto-in-linea {
    display: inline;
    min-height: 0;
    text-align: left;
}

.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; }

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

.filtro { padding-bottom: 14px; }

.filtro-campi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0 14px;
    align-items: start;
}

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

.campo-largo {
    max-width: none;
    margin-bottom: 12px;
    grid-column: span 2;
}

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

.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 { margin-right: auto; }

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

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

.pulsante-spento {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* ── Celle numeriche e monospazio ──────────────────────────────────────── */

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

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

.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; }

.cella-secondaria {
    display: block;
    color: var(--testo-3);
    font-weight: 400;
    font-size: 12px;
}

.cella-monospazio {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
}

.cella-dettagli {
    white-space: normal;
    max-width: 46ch;
    color: var(--testo-2);
    font-size: 12.5px;
}

/* ── Utilità di testo ──────────────────────────────────────────────────── */

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

.testo-staccato { margin-bottom: 18px; }

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

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

.scheda h2 + p,
.scheda h2 + ul { margin-top: 4px; }

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

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

/* ── Codice di sei cifre e regole della password ───────────────────────── */

.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;
}

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

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

/* Il segno si disegna in CSS e non con un carattere nel markup: così 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: #d9722f;
}

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

.campo input.campo-non-valido,
.campo textarea.campo-non-valido,
.campo select.campo-non-valido {
    border-color: var(--rosso);
    background: #fff6f7;
}

/* ── 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,
    .riquadro-numero { font-size: 22px; }
    .barra-titolo { font-size: 15px; }
    .pastiglia { display: none; }
    .intestazione-pagina { align-items: flex-start; flex-direction: column; }
    .campo-largo { grid-column: span 1; }
}


/* ===========================================================================
   SECONDA SEZIONE — SOLO DEL PORTALE ENTE

   Quello che il Centralizzatore non ha: la barra dei filtri di questo portale,
   il pannello del link di attivazione, le pastiglie di severità e di stato del
   collegamento e il grafico della serie temporale.
   =========================================================================== */

/* ── Barra dei filtri ──────────────────────────────────────────────────── */

.filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: var(--card);
    border: none;
    box-shadow: var(--ombra);
    border-radius: var(--raggio);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.filtri .campo {
    margin-bottom: 0;
    max-width: none;
    flex: 0 1 auto;
}

.filtri .campo-ricerca { flex: 1 1 240px; }

/* ── Griglia di dati del dettaglio ─────────────────────────────────────── */

/* ⚠️ DUE colonne fisse, non `auto-fit`.

   Con `repeat(auto-fit, minmax(220px, 1fr))` ogni `dt` e ogni `dd` diventa una
   cella indipendente: su uno schermo largo la griglia ne mette cinque o sei per
   riga, e le coppie si spezzano — l'etichetta finisce in fondo a una riga e il
   suo valore all'inizio della successiva. Sulla pagina iniziale il risultato
   era illeggibile: «Collegati» con accanto il numero di un altro stato.

   Con due colonne ogni riga della griglia è esattamente una coppia, sempre,
   qualunque sia la larghezza. È anche la forma classica di un elenco di
   definizioni, e si legge in colonna invece che a zig-zag. */
.dati {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 10px 24px;
    align-items: baseline;
    margin: 0;
}

.dati dt {
    color: var(--testo-3);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.dati dd {
    margin: 0;
    font-size: 13.5px;
    word-break: break-word;
}

@media (max-width: 620px) {
    /* Sotto una certa larghezza due colonne strizzano il valore: si impila. */
    .dati { grid-template-columns: 1fr; gap: 2px; }
    .dati dt { margin-top: 10px; }
}

/* ── Il link di attivazione ────────────────────────────────────────────── */

/* Il pannello è vistoso di proposito: il token in chiaro esiste una volta
   sola, e se l'operatore chiude la pagina senza copiarlo va rigenerato. */
.pannello-link {
    background: #e8f8f1;
    border: 1px solid #bfead9;
    border-radius: var(--raggio);
    padding: 20px;
    margin-bottom: 16px;
}

.pannello-link h2 { color: #067a53; }

.link-attivazione {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin: 12px 0 4px;
}

.link-attivazione input {
    flex: 1;
    padding: 9px 11px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    font: 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    background: #fff;
    color: var(--testo);
}

/* ── Severità degli eventi ─────────────────────────────────────────────── */

.severita {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.severita-1 { background: rgba(70, 128, 255, .12);  color: var(--blu); }
.severita-2 { background: rgba(254, 147, 101, .16); color: #d9722f; }
.severita-3 { background: rgba(254, 93, 112, .13);  color: #d93a4f; }

/* Distingue un evento di trasmissione da uno derivato dai dati. Serve: i dati
   arrivano al cloud solo quando il telefono dell'assistito sincronizza, quindi
   l'assenza di segnale è quasi sempre tecnica e non clinica. */
.etichetta-tecnico {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    font-size: 11px;
    color: var(--testo-3);
    white-space: nowrap;
}

.riga-non-letta td { font-weight: 600; }

/* ── Grafico della serie temporale ─────────────────────────────────────── */

.grafico {
    width: 100%;
    height: 220px;
    display: block;
}

.grafico-linea {
    fill: none;
    stroke: var(--primario);
    stroke-width: 2;
}

/* La minima si distingue per colore E per tratteggio: con il solo colore, chi
   non lo percepisce vedrebbe due linee identiche che si incrociano. */
.grafico-linea-minima {
    stroke: var(--viola);
    stroke-dasharray: 5 3;
}

/* Un campione isolato e' un pallino pieno: la spezzata da un vertice solo non
   si vede, e il grafico sembrerebbe vuoto pur avendo un dato. */
.grafico-punto {
    fill: currentColor;
    stroke: none;
}

.grafico-linea.grafico-punto { fill: var(--primario); }
.grafico-linea-minima.grafico-punto { fill: var(--viola); }

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

/* ⚠️ Senza questa riga l'attributo hidden non nasconde niente: una regola
   d'autore con display:flex batte il [hidden]{display:none} del browser, e la
   legenda della pressione compariva anche sui grafici a una linea sola. */
.legenda-grafico[hidden] { display: none; }

.legenda-grafico {
    display: flex;
    gap: 18px;
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--testo-2);
}

.voce-legenda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.voce-legenda::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
}

.voce-legenda-massima { color: var(--primario); }
.voce-legenda-minima { color: var(--viola); }

/* Stessa trappola della legenda: senza la riga [hidden] la striscia resterebbe
   visibile e vuota quando il periodo non ha campioni. */
.sintesi-grafico[hidden] { display: none; }

.sintesi-grafico {
    display: block;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--bordo);
    font-size: 12px;
    color: var(--testo-2);
}

.grafico-etichetta {
    fill: var(--testo-3);
    font-size: 11px;
}

.grafico-vuoto {
    color: var(--testo-3);
    font-size: 13px;
    padding: 40px 0;
    text-align: center;
}

.barra-grafico {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.barra-grafico .campo {
    margin-bottom: 0;
    max-width: none;
}

/* ── Valori dei segnali ────────────────────────────────────────────────── */

.valore-segnale { font-size: 20px; font-weight: 700; }

.valore-unita {
    font-size: 13px;
    font-weight: 400;
    color: var(--testo-2);
}

/* Qualità 2 = sospetta, 3 = fuori dall'intervallo atteso: si segnala senza
   nascondere il valore, perché è il dato che il dispositivo ha inviato. */
.qualita-sospetta { color: #d9722f; }

.qualita-fuori-intervallo { color: var(--rosso); }

/* ── Stati del collegamento ────────────────────────────────────────────── */

/* ⚠️ Sono nove stati e non tre colori a caso: la macchina è quella del Doc 1
   (CREATED → INVITED → AUTHORIZED → CONNECTED → ACTIVE, più
   AUTHORIZATION_FAILED, REVOKED, INACTIVE, ERROR). Il verde è riservato a
   ATTIVO, l'unico stato in cui i dati stanno davvero arrivando: COLLEGATO in
   verde direbbe all'operatore «tutto a posto» quando può non arrivare nulla. */
.stato-attivo                 { background: rgba(10, 194, 130, .13); color: #08a06c; }
.stato-collegato              { background: rgba(70, 128, 255, .12);  color: var(--blu); }
.stato-autorizzato            { background: rgba(1, 169, 172, .13);   color: #018a8d; }
.stato-invitato               { background: rgba(119, 89, 222, .12);  color: var(--viola); }
.stato-creato                 { background: #eef0f3;                  color: var(--testo-2); }
.stato-inattivo               { background: rgba(254, 147, 101, .16); color: #d9722f; }
.stato-revocato               { background: #eef0f3;                  color: var(--testo-2); }
.stato-errore                 { background: rgba(254, 93, 112, .13);  color: #d93a4f; }
.stato-autorizzazione_fallita { background: rgba(254, 93, 112, .13);  color: #d93a4f; }

/* ── Azioni secondarie delle pagine di accesso ─────────────────────────── */

.azioni-accesso {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--bordo);
    font-size: 13px;
}

/* Lampeggia quando si prova a incollare dove non si può: senza un riscontro,
   il campo sembrerebbe rotto invece che protetto. */
.nota-evidenziata {
    color: #d9722f;
    font-weight: 600;
}

.scheda-password { max-width: none; }

/* «Disattivato dall'Ente»: grigio pieno, distinto dalle pastiglie di stato del
   collegamento, che descrivono l'autorizzazione presso il produttore. */
.stato-spento {
    background: #eef0f3;
    color: var(--testo-3);
    margin-left: 6px;
}

/* La riga che riconcilia il numero del riepilogo con quello dell'elenco. */
.nota-conteggio {
    margin: -4px 0 14px;
    font-size: 12.5px;
}

/* ── Campanella degli eventi, nella barra in alto ──────────────────────── */

/* Gli eventi non sono un'area del portale: sono notifiche. Stanno qui e non
   nel menu laterale, dove sarebbero sullo stesso piano di «Assistiti». */

.campanella {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--testo-2);
    text-decoration: none;
    transition: all var(--transizione);
}

.campanella:hover {
    background: var(--sfondo-2);
    border-color: var(--bordo);
    text-decoration: none;
}

.campanella-icona { font-size: 15px; line-height: 1; }

/* Con qualcosa da leggere il bordo si accende: il numero da solo è piccolo,
   e su una barra scura passa inosservato. */
.campanella-piena {
    border-color: rgba(1, 169, 172, .35);
    background: rgba(1, 169, 172, .10);
    color: var(--primario);
}

.campanella-conteggio {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--rosso);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
}

/* ── La finestra degli eventi ──────────────────────────────────────────── */

/* Un <dialog> vero, non un div finto: la gestione del focus, di Esc e dello
   sfondo la fa il browser, e la farebbe meglio di noi. */
.finestra {
    width: min(680px, calc(100vw - 32px));
    max-height: min(70vh, 620px);

    /* ⚠️ `margin: auto` va rimesso a mano: è così che il browser centra un
       <dialog> aperto con showModal(), e il reset `* { margin: 0 }` in cima a
       questo foglio glielo toglie. Senza, la finestra compare incollata in alto
       a sinistra. */
    margin: auto;

    padding: 0;
    border: none;
    border-radius: var(--raggio);
    background: var(--card);
    color: var(--testo);
    box-shadow: 0 10px 40px rgba(69, 90, 100, .22);
    overflow: hidden;

    /* display:flex romperebbe l'apertura: un <dialog> chiuso è display:none, e
       una regola che lo forza a flex lo rende visibile sempre. La colonna si
       applica solo quando è aperto. */
}

.finestra[open] {
    display: flex;
    flex-direction: column;
}

.finestra::backdrop {
    background: rgba(53, 60, 78, .45);
}

.finestra-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bordo);
    background: var(--card);
}

.finestra-testa h2 { margin: 0; font-size: 14px; color: #505458; }

.finestra-corpo {
    flex: 1;
    overflow-y: auto;
    padding: 6px 20px;
}

.finestra-piede {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-top: 1px solid var(--bordo);
    background: var(--sfondo-2);
}


/* ── Le righe della finestra ───────────────────────────────────────────── */

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

.notifica {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 2px 10px;
    padding: 12px 0;
    border-top: 1px solid var(--bordo);
}

.notifica:first-child { border-top: none; }

/* Un punto colorato al posto della pastiglia: in un elenco stretto la parola
   «informativo» ripetuta otto volte è rumore, e il colore basta — il titolo
   della pastiglia porta comunque la parola per chi passa sopra. */
/* ⚠️ Il pallino occupa una cella sola, in alto a sinistra; tutto il resto sta
   nella seconda colonna, riga dopo riga.

   Le alternative provate non reggono: `grid-row: span 3` dipende da quante
   righe ha la notifica — quattro o cinque, secondo che ci siano messaggio e
   azioni — e `1 / -1` in una griglia senza righe esplicite vale «solo la prima
   riga», che fa collassare le altre una sull'altra. Fissare la colonna di ogni
   figlio è l'unica forma che non cambia comportamento al cambiare del
   contenuto. */
.notifica > * { grid-column: 2; }

.notifica-severita {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    margin-top: 7px;
}

.notifica-testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.notifica-titolo { font-weight: 600; }

.notifica-quando {
    color: var(--testo-3);
    font-size: 11.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.notifica-chi { font-size: 12.5px; }

.notifica-messaggio {
    color: var(--testo-2);
    font-size: 12.5px;
}

/* Non letto: una barra a sinistra, non il grassetto su tutto — otto righe in
   grassetto non distinguono più niente. */
.notifica-nuova {
    background: rgba(1, 169, 172, .05);
    box-shadow: inset 2px 0 0 var(--primario);
    padding-left: 10px;
    margin-left: -10px;
}

@media (max-width: 620px) {
    .finestra { max-height: 85vh; }
    .campanella-conteggio { top: -4px; right: -4px; }
}

/* ── Azioni sulle righe della finestra ─────────────────────────────────── */

/* Una notifica che non si può togliere di mezzo da dove la si legge costringe
   a un secondo viaggio, e il contatore non torna mai a zero. */

.notifica-azioni {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 4px;
    font-size: 12.5px;
}

.notifica-azioni form { margin: 0; }

/* «Segna letto» sono due parole, e in una colonna stretta andavano a capo:
   un'azione spezzata su due righe non si legge come un'azione. */
.notifica-azioni button { white-space: nowrap; }

.notifica-azioni button:disabled { opacity: .4; cursor: default; }

/* ── Selezione multipla nell'elenco ────────────────────────────────────── */

.barra-selezione {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--card);
    border: none;
    box-shadow: var(--ombra);
    border-radius: var(--raggio);
}

.selezione-tutte {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.selezione-tutte input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primario);
}

.colonna-scelta { width: 34px; }

.scelta-riga {
    width: 16px;
    height: 16px;
    accent-color: var(--primario);
    cursor: pointer;
}

/* Un'intestazione che serve solo a chi usa un lettore di schermo: la colonna
   delle caselle non ha un titolo da mostrare, ma non può restare senza nome. */
.nascosto-visivamente {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── L'anello degli stati, nella pagina iniziale ────────────────────────── */

/* Piccolo di proposito: è un riepilogo, non il contenuto della pagina. Il
   riquadro non si allarga oltre la misura in cui la legenda resta leggibile —
   un anello grande quanto lo schermo non dice niente di più. */

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

.anello {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.anello-disegno {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    display: block;
}

/* ⚠️ `stroke: currentColor` è il perno di tutto: le classi `stato-<codice>`
   definiscono `color` per le pastiglie, e riusarle qui garantisce che il
   verde dell'anello sia lo STESSO verde della pastiglia «ATTIVO». Se una
   fetta avesse un colore proprio, il grafico e l'elenco racconterebbero la
   stessa cosa in due modi. */
.fetta {
    fill: none;
    stroke: currentColor;
    transition: opacity var(--transizione);
}

.anello:hover .fetta { opacity: .55; }
.anello:hover .fetta:hover { opacity: 1; }

/* Il totale al centro del buco. `pointer-events: none` perché non deve
   rubare il passaggio del puntatore alle fette sotto. */
.anello-centro {
    position: absolute;
    left: 0;
    top: 50%;
    width: 150px;
    transform: translateY(-50%);
    text-align: center;
    pointer-events: none;
}

.anello-totale {
    display: block;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--testo);
}

.anello-parola {
    display: block;
    font-size: 11.5px;
    color: var(--testo-2);
}

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

.anello-legenda li {
    display: grid;
    grid-template-columns: 11px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
}

.anello-legenda li + li { border-top: 1px solid var(--bordo); }

.anello-segno {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: currentColor;
}

.anello-nome { color: var(--testo); }

.anello-quanti {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 2.5ch;
    text-align: right;
}

/* La quota in tono minore: il numero assoluto è quello su cui si agisce, la
   percentuale serve solo a dare la proporzione che l'anello già mostra. */
.anello-quota {
    color: var(--testo-3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    min-width: 4ch;
    text-align: right;
}

@media (max-width: 620px) {
    .anello { gap: 16px; justify-content: center; }
    .anello-legenda { min-width: 100%; }
}