/* ==========================================================================
   Portale Radioprotezione - D.Lgs. 101/2020
   Foglio di stile autonomo: nessuna build (Vite/Tailwind) necessaria.
   ========================================================================== */

/* --------------------------------------------------------------------------
   L'attributo hidden deve vincere su qualunque classe che imponga un display.
   Senza questa riga la regola predefinita del browser - [hidden] non si vede -
   viene battuta da una qualsiasi regola d'autore come «.spinner { display:
   inline-flex }», e l'elemento resta visibile per sempre.
   E' esattamente cio' che e' successo allo spinner dello scadenzario: sembrava
   un caricamento che non finiva mai, e invece non stava caricando nulla - era
   un elemento che non si nascondeva.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

:root {
    --brand: #0f5c8c;
    --brand-dark: #0b4569;
    --brand-light: #e6f1f8;
    --ink: #16202b;
    --ink-soft: #4a5a6b;
    --ink-faint: #7b8a99;
    --line: #dde5ec;
    --line-soft: #eaf0f5;
    --bg: #f4f7fa;
    --surface: #ffffff;
    --sidebar: #10222f;
    --sidebar-soft: #1a3242;
    --red: #b4232a;
    --red-bg: #fdeced;
    --amber: #9a6212;
    --amber-bg: #fdf3e0;
    --green: #17694a;
    --green-bg: #e6f5ee;
    --blue: #14568f;
    --blue-bg: #e7f0f9;
    --purple: #5a3a91;
    --purple-bg: #f0eafb;
    --slate: #4f6070;
    --slate-bg: #eef2f6;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(16, 34, 47, .06), 0 4px 14px rgba(16, 34, 47, .05);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 1em; }
small { font-size: 12px; }

/* ---------- Layout applicativo ---------- */

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

.sidebar {
    width: 260px;
    flex: 0 0 260px;
    background: var(--sidebar);
    color: #c9d8e2;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    gap: 11px;
    align-items: center;
}

.sidebar-brand .mark {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 7px;
    background: linear-gradient(140deg, #2b87c4, #0f5c8c);
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 15px;
}

.sidebar-brand .name { color: #fff; font-weight: 650; font-size: 14px; line-height: 1.2; }
.sidebar-brand .sub { font-size: 11px; color: #7d97a8; letter-spacing: .02em; }

.nav-group { padding: 14px 12px 4px; }
.nav-group-title {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
    color: #61798a; padding: 0 8px 6px; font-weight: 600;
}

.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-bottom: 2px;
    border-radius: 6px;
    color: #c9d8e2; font-size: 13.5px;
    transition: background .12s, color .12s;
}
.nav-link:hover { background: var(--sidebar-soft); color: #fff; text-decoration: none; }
.nav-link.active { background: var(--brand); color: #fff; font-weight: 600; }
.nav-link .ico { width: 17px; text-align: center; opacity: .85; flex: 0 0 17px; }
.nav-link .count {
    margin-left: auto; background: rgba(255, 255, 255, .14);
    border-radius: 20px; padding: 1px 7px; font-size: 11px; font-weight: 600;
}
.nav-link.active .count { background: rgba(255, 255, 255, .22); }

/*
   Una voce non ancora aperta.

   Grigia e ferma, non assente: una voce che sparisce lascia credere che quella
   cosa il portale non la faccia, e chi la cerca apre un ticket per chiederla.
   Cosi' invece dice l'unica cosa vera - c'e', la stiamo finendo.

   Non e' un <a>, quindi non ha un indirizzo da copiare ne' si raggiunge col
   tabulatore: sembrare cliccabile senza esserlo e' peggio che sembrare spento.
*/
.nav-link.non-matura {
    /* Il fondo grigio dice "spento" da solo, senza scrivercelo sopra: una
       riga con un'etichetta accanto al nome si legge come una voce con un
       conteggio, ed e' il contrario di cio' che si vuole dire. */
    background: rgba(255, 255, 255, .045);
    color: #6d818f; cursor: default;
}
.nav-link.non-matura:hover { background: rgba(255, 255, 255, .075); color: #7d919f; }
.nav-link.non-matura .ico { opacity: .5; }

/* Il perche' arriva passandoci sopra, dove non toglie spazio a niente. */
.nav-link .in-arrivo {
    margin-left: auto; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
    color: #7d919f; border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px; padding: 1px 6px;
    opacity: 0; transition: opacity .12s;
}
.nav-link.non-matura:hover .in-arrivo { opacity: 1; }

/*
   Una sezione del menu che si apre al click.

   Le impostazioni sono sei voci che si guardano di rado: tenerle sempre aperte
   allunga il menu di sei righe che, nella giornata di chi lavora, non servono
   mai. Chiuse dietro una riga sola restano raggiungibili e smettono di occupare
   lo spazio delle cose che si usano.

   Come per il menu dell utente: <details> e nessun JavaScript. Un menu che
   dipende da uno script non si apre quando lo script non c e', e la voce
   diventa irraggiungibile senza dare segno di guasto.
*/
.menu-sezione > summary { list-style: none; cursor: pointer; }
.menu-sezione > summary::-webkit-details-marker { display: none; }
.menu-sezione > summary .freccia {
    margin-left: auto; color: #7d97a8; font-size: 11px; transition: transform .15s;
}
.menu-sezione[open] > summary .freccia { transform: rotate(180deg); }
.menu-sezione-voci { margin: 2px 0 4px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .08); }
.menu-sezione-voci .nav-link { font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }

.sidebar-footer {
    margin-top: auto; padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
}

.sidebar-user { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.avatar {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: grid; place-items: center; font-size: 12px; font-weight: 650;
}
.sidebar-user .who { min-width: 0; }
.sidebar-user .who strong { color: #fff; display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .who span { color: #7d97a8; font-size: 11px; }

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

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0 26px;
    height: 58px;
    display: flex; align-items: center; gap: 16px;
    position: sticky; top: 0; z-index: 20;
}
.topbar .page-title { font-size: 15px; font-weight: 650; }
.topbar .crumb { color: var(--ink-faint); font-size: 12.5px; }
.topbar .spacer { flex: 1; }

.content { padding: 22px 26px 60px; max-width: 1600px; width: 100%; }

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .lead { color: var(--ink-soft); font-size: 13px; max-width: 780px; margin: 0; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Superfici ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}
.card-head {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .spacer { flex: 1; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }
.card-foot { padding: 12px 16px; border-top: 1px solid var(--line-soft); background: #fbfcfd; border-radius: 0 0 var(--radius) var(--radius); }

/* ---------- Statistiche ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
    border-left: 3px solid var(--brand);
}
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; }
.stat .v { font-size: 26px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.stat .d { font-size: 11.5px; color: var(--ink-faint); }
.stat.red { border-left-color: var(--red); } .stat.red .v { color: var(--red); }
.stat.amber { border-left-color: #d99320; } .stat.amber .v { color: var(--amber); }
.stat.green { border-left-color: #2a8f68; } .stat.green .v { color: var(--green); }
.stat.blue { border-left-color: var(--blue); } .stat.blue .v { color: var(--blue); }
.stat a { color: inherit; }

/* ---------- Tabelle ---------- */

.table-wrap { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 9px 12px; text-align: left; vertical-align: top; }
table.data thead th {
    background: #f7f9fb; border-bottom: 1px solid var(--line);
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-soft); font-weight: 650; white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.data thead th a { color: inherit; display: inline-flex; gap: 4px; align-items: center; }
table.data thead th a .arrow { opacity: .45; font-size: 9px; }
table.data tbody tr { border-bottom: 1px solid var(--line-soft); }
table.data tbody tr:hover { background: #f9fbfd; }
table.data tbody tr.group-row td {
    background: var(--brand-light); font-weight: 650; font-size: 12px;
    text-transform: uppercase; letter-spacing: .05em; color: var(--brand-dark);
}
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .code { font-family: "Cascadia Mono", Consolas, monospace; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
table.data .titolo { font-weight: 600; color: var(--ink); display: block; }
table.data .sotto { color: var(--ink-faint); font-size: 11.5px; }
.riga-scaduta { background: #fef7f7 !important; }
.riga-scaduta:hover { background: #fdeff0 !important; }

.empty { padding: 42px 20px; text-align: center; color: var(--ink-faint); }
.empty .big { font-size: 30px; opacity: .35; display: block; margin-bottom: 6px; }

/* ---------- Badge e pill ---------- */

.badge {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
    border: 1px solid transparent;
}
.badge-red { background: var(--red-bg); color: var(--red); border-color: #f3c9cc; }
.badge-amber { background: var(--amber-bg); color: var(--amber); border-color: #f2ddb4; }
.badge-green { background: var(--green-bg); color: var(--green); border-color: #bfe3d3; }
.badge-blue { background: var(--blue-bg); color: var(--blue); border-color: #c6dcf1; }
.badge-purple { background: var(--purple-bg); color: var(--purple); border-color: #d9cbf3; }
.badge-slate { background: var(--slate-bg); color: var(--slate); border-color: #dbe3ea; }

.pill-list { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Form ---------- */

label, .label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--ink-soft); margin-bottom: 4px;
}
.hint { font-size: 11.5px; color: var(--ink-faint); font-weight: 400; margin-top: 3px; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=search], input[type=tel], input[type=number], select, textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 92, 140, .12);
}
/*
   Un campo in sola lettura si vede come uno disabilitato.

   Serve dove il valore non si tocca ma il browser lo deve leggere: un campo
   disabled e' invisibile al gestore di password, e chi sceglie la propria prima
   password su invito se la troverebbe salvata senza un nome accanto. In sola
   lettura il gestore lo vede, l utente non lo cambia, e all occhio la
   differenza non c e' - che e' esattamente cio' che si vuole.
*/
input[disabled], select[disabled], textarea[disabled],
input[readonly], textarea[readonly] { background: #f4f6f8; color: var(--ink-faint); }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a6b' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; padding-right: 28px; }

.field { margin-bottom: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }

.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 400; color: var(--ink); margin-bottom: 10px; }
.check input { width: auto; margin-top: 2px; }

.error { color: var(--red); font-size: 12px; margin-top: 4px; }
.input-error { border-color: var(--red) !important; }

/*
   Il messaggio d errore sotto il campo che lo riguarda.

   Il riquadro rosso in cima dice che qualcosa non va; questo dice dove. Su un
   modulo lungo il campo mancante e' spesso fuori schermo, e un avviso che
   costringe a cercarlo si smette di leggerlo alla terza volta.
*/
.errore-campo {
    color: var(--red, #b3261e); font-size: 12px; margin-top: 4px; line-height: 1.35;
}

/* Il segno dei campi obbligatori: si legge accanto al nome, dove si guarda. */
label .obbligatorio { color: var(--red, #b3261e); margin-left: 2px; font-weight: 700; }
label .quando { color: var(--ink-faint); font-weight: 400; font-size: 11.5px; margin-left: 4px; }

/* ---------- Bottoni ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px; border-radius: 6px; border: 1px solid var(--line);
    background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: #f5f8fa; text-decoration: none; border-color: #c9d6e0; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-danger { background: #fff; border-color: #e6bcbf; color: var(--red); }
.btn-danger:hover { background: var(--red-bg); border-color: #dba6ab; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--slate-bg); }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Avvisi ---------- */

.alert {
    padding: 11px 14px; border-radius: 6px; margin-bottom: 14px;
    border: 1px solid; font-size: 13px; display: flex; gap: 9px; align-items: flex-start;
}
.alert .ico { flex: 0 0 auto; font-size: 14px; line-height: 1.4; }
.alert-success { background: var(--green-bg); border-color: #bfe3d3; color: var(--green); }
.alert-error { background: var(--red-bg); border-color: #f3c9cc; color: var(--red); }
.alert-warning { background: var(--amber-bg); border-color: #f2ddb4; color: var(--amber); }
.alert-info { background: var(--blue-bg); border-color: #c6dcf1; color: var(--blue); }
.alert ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- Filtri ---------- */

.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; }

/*
   Il pannello dei filtri, a tendina.

   Una barra di ricerca con otto campi occupa due righe di schermo su ogni
   pagina, e su nove pagine su dieci la si guarda per non usarla: si cerca una
   volta e poi si scorre l elenco. Chiusa resta a una riga e restituisce lo
   spazio a cio' che si e' venuti a leggere.

   La testata resta cliccabile per tutta la larghezza: un bersaglio grande di
   una cosa che si apre e si chiude di continuo.
*/
.pannello-filtri > summary { list-style: none; cursor: pointer; }
.pannello-filtri > summary::-webkit-details-marker { display: none; }
.filtri-testa {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 16px; font-size: 13px; color: var(--ink);
    border-radius: var(--radius) var(--radius) 0 0;
}
.pannello-filtri:not([open]) > .filtri-testa { border-radius: var(--radius); }
.filtri-testa:hover { background: var(--surface-soft, #f7f9fb); }
.filtri-testa .ico { opacity: .55; }
.filtri-testa .hint { margin: 0; }
.filtri-testa .freccia { margin-left: auto; color: var(--ink-faint); font-size: 11px; transition: transform .15s; }
.pannello-filtri[open] > .filtri-testa .freccia { transform: rotate(180deg); }
.pannello-filtri[open] > .filtri-testa { border-bottom: 1px solid var(--line); }
.filters-body { padding: 14px 16px 4px; }
.filters-foot {
    padding: 10px 16px; border-top: 1px solid var(--line-soft);
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fbfcfd;
    border-radius: 0 0 var(--radius) var(--radius);
}
.filters-foot .spacer { flex: 1; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line);
    background: #fff; font-size: 12px; color: var(--ink-soft); cursor: pointer;
}
.chip:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.chip.on:hover { color: #fff; }

/* ---------- Paginazione ---------- */

.pager { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pager a, .pager span {
    padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px;
    font-size: 12.5px; color: var(--ink-soft); background: #fff;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pager .current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pager .disabled { opacity: .4; }
.pager-info { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- Pagine di autenticazione ---------- */

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; place-items: center; padding: 30px 16px; background: linear-gradient(160deg, #0e2634 0%, #123c53 55%, #0f5c8c 100%); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: 11px; box-shadow: 0 18px 50px rgba(6, 22, 33, .3); overflow: hidden; }
.auth-head { padding: 24px 28px 6px; text-align: center; }
.auth-head .mark { width: 46px; height: 46px; border-radius: 10px; background: linear-gradient(140deg, #2b87c4, #0f5c8c); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 19px; margin: 0 auto 12px; }
.auth-head h1 { font-size: 19px; }
.auth-head p { color: var(--ink-faint); font-size: 13px; }
.auth-body { padding: 6px 28px 24px; }
.auth-foot { padding: 14px 28px; background: #f7f9fb; border-top: 1px solid var(--line); text-align: center; font-size: 12.5px; color: var(--ink-soft); }
.auth-legal { text-align: center; color: rgba(255, 255, 255, .62); font-size: 11.5px; margin-top: 16px; max-width: 440px; }

/* ---------- Ticket ---------- */

.thread { display: flex; flex-direction: column; gap: 12px; }
.msg { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.msg-head { padding: 8px 13px; border-bottom: 1px solid var(--line-soft); display: flex; gap: 9px; align-items: center; font-size: 12.5px; background: #fbfcfd; border-radius: var(--radius) var(--radius) 0 0; }
.msg-head .who { font-weight: 650; }
.msg-head .when { color: var(--ink-faint); margin-left: auto; font-size: 11.5px; }
.msg-body { padding: 13px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; }
.msg.interna { border-color: #f2ddb4; background: #fffdf7; }
.msg.interna .msg-head { background: var(--amber-bg); border-color: #f2ddb4; }
.msg.sistema { border-style: dashed; background: #fbfcfd; }
.msg.sistema .msg-body { color: var(--ink-faint); font-size: 12.5px; font-style: italic; padding: 8px 13px; }

.meta-list { font-size: 13px; }
.meta-list > div { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.meta-list > div:last-child { border-bottom: 0; }
.meta-list dt, .meta-list .k { flex: 0 0 40%; color: var(--ink-faint); font-size: 12px; }
.meta-list dd, .meta-list .v { margin: 0; flex: 1; }

/* ---------- Layout a due colonne ---------- */

.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; align-items: start; }

/* ---------- MFA ---------- */

.qr-box { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.qr-canvas { width: 190px; height: 190px; border: 1px solid var(--line); border-radius: 8px; padding: 9px; background: #fff; display: grid; place-items: center; }
.qr-canvas img, .qr-canvas canvas { max-width: 100%; height: auto; }
.secret-key {
    font-family: "Cascadia Mono", Consolas, monospace; font-size: 15px; letter-spacing: .08em;
    background: var(--slate-bg); border: 1px dashed #c6d2dc; border-radius: 6px;
    padding: 9px 12px; word-break: break-all; user-select: all;
}
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 7px; }
.recovery-codes code {
    background: #fff; border: 1px solid var(--line); border-radius: 5px;
    padding: 6px 9px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 13px; text-align: center;
}

/* ---------- Testo normativo ed evidenziazioni ---------- */

.testo-norma {
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--ink);
    max-height: 620px;
    overflow-y: auto;
    padding-right: 6px;
    text-align: justify;
    hyphens: auto;
}
.testo-norma mark {
    background: #fff3bf;
    color: inherit;
    padding: 1px 2px;
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 #f0c674;
}

/* ---------- Caricamento AJAX ---------- */

#risultati-scadenzario { transition: opacity .12s ease-in-out; }

.spinner {
    font-size: 12px;
    color: var(--ink-faint);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.spinner::before {
    content: "";
    width: 11px; height: 11px;
    border: 2px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: gira .6s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spinner::before { animation: none; }
    #risultati-scadenzario { transition: none; }
}

/* Chip usati come pulsanti nel form dei filtri */
button.chip { font: inherit; font-size: 12px; }

/* ---------- Varie ---------- */

.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.muted { color: var(--ink-faint); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.text-right { text-align: right; }
hr.sep { border: 0; border-top: 1px solid var(--line-soft); margin: 18px 0; }

.legal-note {
    font-size: 11.5px; color: var(--ink-faint); background: #fbfcfd;
    border: 1px solid var(--line-soft); border-radius: 6px; padding: 9px 12px;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; flex: none; height: auto; position: static; }
    .sidebar-footer { margin-top: 0; }
    .split { grid-template-columns: 1fr; }
    .content { padding: 16px 14px 50px; }
    .topbar { padding: 0 14px; }
}

@media print {
    .sidebar, .topbar, .filters, .btn, .pager { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #ccc; }
}

/* ==========================================================================
   Schema di flusso (radon nei luoghi di lavoro)
   Catena verticale: ogni decisione apre una corsia che esce e una che
   prosegue in basso. Le linee sono pseudo-elementi, cosi il diagramma resta
   testo selezionabile e stampabile.
   ========================================================================== */

.flusso { position: relative; margin: 0 0 8px; padding-left: 30px; }

/* Il filo conduttore che tiene insieme la catena principale. */
.flusso::before {
    content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px;
    width: 2px; background: var(--line); border-radius: 2px;
}

.flusso-passo { position: relative; margin-bottom: 14px; }

.flusso-num {
    position: absolute; left: -30px; top: 10px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--line);
    color: var(--ink-faint); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.flusso-passo.is-attivo > .flusso-num {
    background: var(--brand); border-color: var(--brand); color: #fff;
}

.flusso-passo[data-tipo="decisione"] > .flusso-num {
    background: var(--slate-bg); color: var(--ink-soft); font-size: 13px;
}

.flusso-blocco {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--slate);
    border-radius: var(--radius); padding: 11px 14px;
}

.flusso-passo[data-tipo="decisione"] > .flusso-blocco {
    background: var(--slate-bg); border-left-color: var(--ink-faint);
}
.flusso-passo[data-tipo="comunicazione"] > .flusso-blocco { border-left-color: var(--blue); }
.flusso-blocco:has(.flusso-qui) { border-left-color: var(--brand); }

/* Il blocco della fase a cui l adempimento si riferisce: e il punto di tutto
   lo schema, quindi si deve vedere senza cercarlo. */
.flusso-passo.is-attivo > .flusso-blocco,
.flusso-ramo.is-attivo > .flusso-blocco {
    border-color: var(--brand); border-left-color: var(--brand);
    background: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(15, 92, 140, .12);
}

.flusso-testa { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.flusso-testa h4 { margin: 0; font-size: 14px; font-weight: 650; }

.flusso-qui {
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: #fff; background: var(--brand); border-radius: 20px; padding: 2px 9px; white-space: nowrap;
}

.flusso-rif {
    margin: 3px 0 0; font-size: 11.5px; font-weight: 600; color: var(--brand-dark);
    font-variant-numeric: tabular-nums;
}

.flusso-dettaglio { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-soft); }

.flusso-termine {
    margin: 7px 0 0; font-size: 12.5px; color: var(--ink-soft);
    background: var(--amber-bg); border-radius: 6px; padding: 6px 9px;
}
.flusso-durata {
    font-weight: 700; color: var(--amber); margin-right: 6px; white-space: nowrap;
}

.flusso-nota {
    margin: 7px 0 0; font-size: 12px; color: var(--ink-soft);
    border-left: 2px solid var(--line); padding-left: 9px;
}

.flusso-sanzione {
    margin: 7px 0 0; font-size: 12px; color: var(--red);
    background: var(--red-bg); border-radius: 6px; padding: 6px 9px;
}
.flusso-sanzione .ico { margin-right: 4px; }

.flusso-chip-riga { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }
.flusso-chip {
    font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--ink-soft); background: var(--slate-bg);
    border: 1px solid var(--line); border-radius: 20px; padding: 1px 9px;
}
.flusso-chip.is-corrente { color: #fff; background: var(--brand); border-color: var(--brand); }

/* ---------- Corsie di uscita dalle decisioni ---------- */

.flusso-rami { margin-top: 10px; display: grid; gap: 10px; }

.flusso-ramo { position: relative; padding-left: 46px; }

/* Gomito: scende dal blocco della decisione e gira verso la corsia. */
.flusso-ramo::before {
    content: ""; position: absolute; left: 8px; top: -10px; bottom: auto; height: 26px;
    width: 26px; border-left: 2px solid var(--line); border-bottom: 2px solid var(--line);
    border-bottom-left-radius: 8px;
}

.flusso-ramo.is-attivo::before { border-color: var(--brand); }

.flusso-esito {
    position: absolute; left: 38px; top: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-faint); background: var(--bg); padding: 0 5px;
}

.flusso-ramo { padding-top: 20px; }

.flusso-prosegue {
    margin: 0; padding-left: 2px; font-size: 12px; color: var(--ink-faint); font-style: italic;
}

.flusso-ramo.esce > .flusso-blocco { border-left-color: var(--green); }
.flusso-ramo.esce > .flusso-blocco:has(.flusso-qui) { border-left-color: var(--brand); }

@media (max-width: 980px) {
    .flusso { padding-left: 22px; }
    .flusso::before { left: 7px; }
    .flusso-num { left: -22px; width: 20px; height: 20px; font-size: 10px; }
    .flusso-ramo { padding-left: 28px; }
    .flusso-ramo::before { left: 4px; width: 16px; }
    .flusso-esito { left: 22px; }
}

@media print {
    .flusso-passo, .flusso-ramo { break-inside: avoid; }
    .flusso-blocco { box-shadow: none; }
}

/* ---------- Archivio dei testi: operativi contro consultazione ----------
   L archivio contiene tutto il decreto, ma solo una parte dei riferimenti fa
   discendere un adempimento censito. Le righe operative portano un filetto sul
   bordo sinistro: si distinguono scorrendo la colonna, senza dover leggere il
   conteggio in fondo alla riga. */

table.data tbody tr.rif-operativo td:first-child {
    box-shadow: inset 3px 0 0 var(--brand);
}
table.data tbody tr.rif-operativo td:nth-child(2) { font-weight: 600; }
table.data tbody tr.rif-consultazione td:first-child { color: var(--ink-soft); }

/* ---------- Campanella di sorveglianza della norma ----------
   Sta in alto a destra e la vede chiunque acceda. Il pannello si apre con
   <details>: nessun JavaScript, quindi resta usabile anche se lo script della
   pagina non parte. */

/* Testo per i soli lettori di schermo. Senza questa regola finirebbe a video:
   la classe va definita, non solo usata. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.campanella { position: relative; margin-left: 12px; flex: 0 0 auto; }

.campanella > summary {
    list-style: none; cursor: pointer; user-select: none;
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface);
}
.campanella > summary::-webkit-details-marker { display: none; }
.campanella > summary:hover { background: var(--line-soft); }
.campanella > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.campanella-ico { font-size: 16px; line-height: 1; filter: grayscale(1); opacity: .55; }
.campanella[data-stato="disallineata"] .campanella-ico,
.campanella[data-stato="silenziosa"] .campanella-ico { filter: none; opacity: 1; }

/* La spia: senza di essa la campanella e solo un ornamento. */
.campanella-spia {
    position: absolute; top: 5px; right: 5px;
    width: 9px; height: 9px; border-radius: 50%;
    border: 2px solid var(--surface); background: var(--red);
}
/* Il pallino prende il colore del piu' grave: una campanella che segnala
   sempre allo stesso modo non distingue un promemoria da un guasto. */
.campanella[data-stato="giallo"] .campanella-spia { background: #d99320; }
.campanella[data-stato="blu"] .campanella-spia { background: var(--brand); }

.campanella[data-stato="rosso"] > summary { border-color: var(--red); background: var(--red-bg); }
.campanella[data-stato="giallo"] > summary { border-color: #d99320; background: var(--amber-bg); }

.campanella-pannello {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    width: 330px; padding: 14px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 6px 24px rgba(16, 34, 47, .16);
}
.campanella-pannello p { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-soft); }

.campanella-testa { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.campanella-testa.rossa { color: var(--red); }
.campanella-testa.gialla { color: var(--amber); }
.campanella-testa.verde { color: var(--green); }
.campanella-testa.blu { color: var(--brand); }

/*
   Piu' avvisi in un pannello solo.

   Uno sotto l altro con una riga a separarli: senza, tre avvisi diventano un
   paragrafo unico e si legge solo il primo. Il pannello si alza fino a due
   terzi dello schermo e poi scorre, invece di uscire dalla finestra.
*/
.campanella-voce + .campanella-voce {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.campanella-voce .btn { margin-top: 2px; }
.campanella-pannello { max-height: min(66vh, 560px); overflow-y: auto; }

.campanella-nota { font-size: 11.5px !important; color: var(--ink-faint) !important; }

@media (max-width: 980px) {
    .campanella-pannello { width: min(330px, calc(100vw - 28px)); }
}

@media print { .campanella { display: none; } }

/* Elenco numerato dei passi operativi nella pagina della norma. */
.passi { margin: 0 0 12px; padding-left: 20px; }
.passi li { margin-bottom: 10px; font-size: 13px; }
.blocco {
    display: block; margin-top: 5px; padding: 8px 10px;
    background: var(--slate-bg); border: 1px solid var(--line);
    border-radius: 6px; font-size: 11.5px; line-height: 1.7; overflow-x: auto;
}

/* ---------- Schede dosimetriche ---------- */

/* .sotto e .num esistono solo dentro table.data: qui servono anche fuori. */
.sotto { display: block; color: var(--ink-faint); font-size: 11.5px; }

/* Righe che devono risaltare nel registro: un superamento di limite o una
   esposizione accidentale non possono avere lo stesso peso visivo di una
   lettura di routine. */
table.data tbody tr.riga-allarme > td { background: var(--red-bg); }
table.data tbody tr.riga-allarme:hover > td { background: #fbe1e3; }

/* Le rettifiche: stanno sotto la lettura che correggono, rientrate, perche si
   legga che sono la sua storia e non una lettura in piu. */
table.data tbody tr.riga-revisione > td {
    background: var(--purple-bg); border-top: 0;
    padding-top: 3px; padding-bottom: 6px;
}
table.data tbody tr.riga-revisione td:first-child { padding-left: 22px; }

/* Pulsanti che aprono un pannello inline (rettifica, modifica anagrafica). */
.inline-details { display: inline-block; position: relative; }
.inline-details > summary { list-style: none; cursor: pointer; display: inline-flex; }
.inline-details > summary::-webkit-details-marker { display: none; }

.inline-details .pannello {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
    width: min(560px, calc(100vw - 60px)); padding: 14px; text-align: left;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 6px 24px rgba(16, 34, 47, .16);
}
.inline-details .pannello .field { margin-bottom: 10px; }

/* File di pulsanti "apri scheda per ..." nell avviso dei lavoratori scoperti. */
.inline-form { display: inline-block; margin: 0 6px 6px 0; }

/* I riquadri apribili usati come sezioni di pagina. */
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary.card-head h3 { margin: 0; }
details.card > summary.card-head::after { content: "+"; margin-left: auto; color: var(--ink-faint); font-weight: 700; }
details.card[open] > summary.card-head::after { content: "\2212"; }

@media print {
    .inline-details, .filters, details.card { display: none !important; }
}

/* ---------- Quadro dosimetrico: persone x mesi ---------- */

table.quadro th.mese, table.quadro td.mese { min-width: 58px; padding-left: 4px; padding-right: 4px; }

/* Il nome resta leggibile mentre si scorre in orizzontale: senza, a novembre
   non si sa piu di chi sia la riga. */
table.quadro .sticky-nome {
    position: sticky; left: 0; z-index: 2;
    background: var(--surface); border-right: 1px solid var(--line);
}
table.quadro tbody tr:hover .sticky-nome { background: #f9fbfd; }
table.quadro tbody tr.riga-allarme .sticky-nome { background: var(--red-bg); }

/* Intensita proporzionale alla dose, con lo stesso riferimento per tutta la
   tabella: cosi il colore dice qualcosa anche fra righe diverse. */
table.quadro td.mese { position: relative; }
table.quadro td.mese[style*="--peso"]::before {
    content: ""; position: absolute; inset: 2px;
    background: var(--brand); opacity: calc(var(--peso) * 0.55);
    border-radius: 3px; pointer-events: none;
}
table.quadro td.mese .valore { position: relative; font-variant-numeric: tabular-nums; }
table.quadro td.mese.cella-separata::before { background: var(--red); }
table.quadro td.mese .soglia { position: relative; color: var(--ink-faint); margin-left: 2px; }
table.quadro td.mese .continua { color: var(--ink-faint); letter-spacing: 2px; }
table.quadro td.mese .vuoto { color: var(--line); }

/* Mesi coperti dallo stesso periodo: un filetto li tiene insieme, cosi si vede
   che sono una misura sola e non tre mancanti. */
table.quadro td.mese.cella-periodo { border-top-color: var(--line-soft); border-bottom-color: var(--line-soft); }

.legenda-quadro {
    display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 4px;
    font-size: 11.5px; color: var(--ink-soft);
}
.legenda-quadro .chiave {
    display: inline-block; width: 16px; text-align: center; margin-right: 4px;
    color: var(--ink-faint);
}
.legenda-quadro .chiave.cella-piena { background: var(--brand); opacity: .5; border-radius: 3px; height: 11px; vertical-align: -1px; }
.legenda-quadro .chiave.cella-separata { background: var(--red); opacity: .5; border-radius: 3px; height: 11px; vertical-align: -1px; }

/* ---------- Andamento mensile nella scheda ---------- */

.andamento { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding: 6px 0 0; }
.andamento .mese {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
    align-items: center; height: 100%; position: relative;
}
.andamento .barra {
    width: 100%; background: var(--brand); border-radius: 2px 2px 0 0; min-height: 2px;
}
.andamento .mese.separata .barra { background: var(--red); }
.andamento .mese.continua .barra { background: repeating-linear-gradient(45deg, var(--line), var(--line) 3px, transparent 3px, transparent 6px); }
.andamento .mese .etichetta { font-size: 10px; color: var(--ink-faint); margin-top: 3px; }
.andamento .mese .cifra { font-size: 9.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-bottom: 2px; white-space: nowrap; }

@media print {
    table.quadro .sticky-nome { position: static; }
}

/* Dotazione DPI in elenco: piu dispositivi per riga, uno sotto l altro. */
.assegnato { margin-bottom: 5px; font-size: 12px; }
.assegnato:last-child { margin-bottom: 0; }
.assegnato .code { font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; color: var(--ink-soft); }

/* ---------- Immagini e documenti dei DPI ---------- */

table.data td.miniatura { width: 56px; padding: 4px 6px; }
table.data td.miniatura img {
    width: 46px; height: 36px; object-fit: cover;
    border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
}
table.data td.miniatura .segnaposto { color: var(--line); }

.documenti-dpi { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.documenti-dpi .documento {
    display: flex; align-items: center; gap: 10px;
    padding: 6px; border: 1px solid var(--line-soft); border-radius: 6px;
}
.documenti-dpi .documento img {
    width: 64px; height: 50px; object-fit: cover;
    border: 1px solid var(--line); border-radius: 4px;
}
.documenti-dpi .documento .segnaposto {
    width: 64px; height: 50px; display: flex; align-items: center; justify-content: center;
    background: var(--slate-bg); border: 1px solid var(--line); border-radius: 4px;
    font-size: 10px; font-weight: 700; color: var(--ink-faint);
}
.documenti-dpi .documento .dettaglio { flex: 1; font-size: 12.5px; }

/* Il pannello a comparsa e piu alto quando contiene i documenti: deve poter
   scorrere invece di uscire dallo schermo. */
.inline-details .pannello { max-height: min(70vh, 620px); overflow-y: auto; }

/* ---------- Ricerca globale ---------- */

.ricerca { position: relative; display: flex; align-items: center; margin-left: 10px; }

.ricerca-lente {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: 50%;
    color: var(--ink-soft);
}
.ricerca-lente:hover { background: var(--line-soft); color: var(--ink); }
.ricerca-lente:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ricerca.aperta .ricerca-lente { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Il campo si apre solo quando serve: la barra in alto e stretta e un campo
   sempre visibile ruberebbe spazio al titolo della pagina. */
.ricerca-campo { position: relative; width: 0; overflow: visible; transition: width .18s ease; }
.ricerca.aperta .ricerca-campo { width: 300px; margin-left: 8px; }

.ricerca-campo input {
    width: 100%; height: 34px; padding: 0 10px; font-size: 13px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
    opacity: 0; pointer-events: none;
}
.ricerca.aperta .ricerca-campo input { opacity: 1; pointer-events: auto; }

.ricerca-esiti {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
    width: min(440px, calc(100vw - 40px)); max-height: min(70vh, 520px); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(16, 34, 47, .16); padding: 6px;
}

.ricerca-gruppo {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 8px 4px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint);
}
.ricerca-gruppo .quanti { margin-left: auto; font-weight: 600; letter-spacing: 0; }

.ricerca-voce {
    display: block; padding: 7px 8px; border-radius: 6px; text-decoration: none; color: var(--ink);
}
.ricerca-voce:hover { background: var(--brand-light); text-decoration: none; }
.ricerca-voce .titolo { display: block; font-size: 13px; font-weight: 600; }
.ricerca-voce .dettaglio { display: block; font-size: 11.5px; color: var(--ink-faint); }
.ricerca-voce .etichetta { font-size: 10.5px; color: var(--ink-soft); }

.ricerca-tutti {
    display: block; margin-top: 4px; padding: 8px; text-align: center;
    font-size: 12px; font-weight: 600; border-top: 1px solid var(--line-soft);
}
.ricerca-vuota { padding: 14px; font-size: 12.5px; color: var(--ink-faint); text-align: center; }

@media (max-width: 980px) {
    .ricerca.aperta .ricerca-campo { width: min(220px, 42vw); }
}
@media print { .ricerca { display: none; } }

/* ---------- Logo dell Ente ---------- */

.sidebar-brand .logo-ente {
    width: 38px; height: 38px; object-fit: contain;
    background: #fff; border-radius: 6px; padding: 3px; flex: 0 0 38px;
}

.anteprima-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.anteprima-logo img {
    max-width: 160px; max-height: 80px; object-fit: contain;
    border: 1px solid var(--line); border-radius: 6px; padding: 6px; background: #fff;
}

.anteprima-intestazione {
    display: flex; align-items: center; gap: 14px;
    padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.anteprima-intestazione img { max-width: 90px; max-height: 60px; object-fit: contain; }
.anteprima-intestazione .denominazione { font-size: 14px; font-weight: 700; }
.anteprima-intestazione .riga { font-size: 11.5px; color: var(--ink-soft); }

/* ---------- Ambito: su quale cliente si sta lavorando ---------- */

.ambito { display: flex; align-items: center; gap: 6px; }
.ambito select {
    max-width: 240px; padding: 5px 26px 5px 10px; font-size: 12.5px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.ambito select:hover { border-color: var(--brand); }
.ambito-fisso {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--ink-soft);
    padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.ambito-fisso .ico { opacity: .6; }

/* ---------- Formule di calcolo ---------- */

.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chips-azione { margin-top: 4px; }
.chip-btn { font-family: inherit; line-height: 1.4; }
.chip-btn:active { transform: translateY(1px); }

/* I parametri a sinistra, la formula a destra: due caselle separate, perche'
   sono due cose diverse - l elenco dei nomi ammessi e cio' che se ne fa. */
.formula-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; }
.formula-editor textarea { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; }
@media (max-width: 820px) { .formula-editor { grid-template-columns: 1fr; } }

.espressione {
    padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--bg-soft, #f7f8fa); font-size: 13.5px; overflow-x: auto; white-space: pre-wrap;
}

.prova-formula > summary {
    cursor: pointer; font-size: 12.5px; color: var(--ink-soft);
    padding: 4px 0; user-select: none;
}
.prova-formula > summary:hover { color: var(--brand); }

.esito-formula { margin-left: 10px; font-size: 13px; font-weight: 600; }
.esito-formula.ok { color: var(--green, #167c48); }
.esito-formula.errore { color: var(--red, #b3261e); font-weight: 500; }
.esito-formula.attesa { color: var(--ink-faint); font-weight: 500; }

.hint-inline { font-weight: 400; font-size: 11.5px; color: var(--ink-faint); }
.pannello-largo { min-width: min(720px, 80vw); }

/* Il logo del cliente nella riga dell elenco: abbastanza grande da
   riconoscerlo, non tanto da far crescere la tabella. */
.cliente-riga { display: flex; align-items: center; gap: 10px; }
.logo-cliente {
    width: 40px; height: 40px; flex: 0 0 40px;
    object-fit: contain; border-radius: 6px;
    border: 1px solid var(--line); background: #fff; padding: 2px;
}
.logo-assente {
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; letter-spacing: .5px;
    color: var(--ink-faint); background: var(--bg-soft, #f7f8fa); padding: 0;
}

/* ---------- Scaletta di sviluppo ---------- */

.voce-scaletta .card-head { gap: 10px; }
.voce-scaletta.fatta { opacity: .62; }
.voce-scaletta.fatta h3 { text-decoration: line-through; text-decoration-thickness: 1px; }

.spunta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: 0 0 22px;
    border: 1.5px solid var(--line); border-radius: 5px; background: #fff;
    font-size: 14px; line-height: 1; color: transparent; cursor: pointer; padding: 0;
}
.spunta:hover { border-color: var(--brand); }
.spunta.on { background: var(--green, #167c48); border-color: var(--green, #167c48); color: #fff; }

/* Contenuto clinico: si distingue anche visivamente da cio' che esce verso il
   datore di lavoro, perche' chi compila deve vedere dove passa il confine. */
fieldset.clinico {
    border: 1px solid var(--line); border-left: 3px solid var(--brand);
    border-radius: 8px; padding: 10px 14px 4px; margin: 14px 0;
}
fieldset.clinico > legend {
    font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 0 6px;
}
.badge-teal { background: #e0f2f1; color: #00695c; border-color: #b2dfdb; }

/* Priorita' della scaletta: si cambia dall elenco, senza aprire nulla. */
.scelta-priorita {
    padding: 3px 22px 3px 8px; font-size: 12px; border-radius: 6px;
    border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
}
.scelta-priorita:hover { border-color: var(--brand); }
.conteggio-fascia {
    font-size: 12px; font-weight: 500; color: var(--ink-faint);
    border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; margin-left: 6px;
}

/* Tavola dei radionuclidi: molte colonne numeriche strette. */
.tavola-nuclidi th.gruppo {
    text-align: center; font-size: 11px; letter-spacing: .3px;
    border-bottom: 1px solid var(--line);
}
.tavola-nuclidi td.mono { font-size: 12px; white-space: nowrap; }
.tavola-nuclidi thead th { vertical-align: bottom; }

/* ---------- Carta dei nuclidi ---------- */

.carta-nuclidi { padding: 10px 12px; overflow-x: auto; }
.carta-nuclidi svg { width: 100%; min-width: 560px; height: auto; display: block; }

.carta-nuclidi .guida { stroke: var(--line); stroke-width: .4; }
.carta-nuclidi .bisettrice { stroke: var(--ink-faint); stroke-width: .5; stroke-dasharray: 2 2; opacity: .5; }
.carta-nuclidi .tacca { font-size: 7px; fill: var(--ink-faint); }
.carta-nuclidi .asse { font-size: 8px; fill: var(--ink-soft); letter-spacing: .4px; }

/* Scala su sette decadi: piu' scuro, piu' bassa la soglia di esenzione. */
.carta-nuclidi .nuclide { stroke: #fff; stroke-width: .3; cursor: pointer; }
.carta-nuclidi .nuclide:hover { stroke: var(--ink); stroke-width: .8; }
.carta-nuclidi .d0 { fill: #4a148c; }
.carta-nuclidi .d1 { fill: #6a1b9a; }
.carta-nuclidi .d2 { fill: #8e24aa; }
.carta-nuclidi .d3 { fill: #ab47bc; }
.carta-nuclidi .d4 { fill: #ce93d8; }
.carta-nuclidi .d5 { fill: #e1bee7; }
.carta-nuclidi .d6 { fill: #f3e5f5; }
.carta-nuclidi .ignota { fill: #eceff1; }
.carta-nuclidi .con-emivita { stroke: #00695c; stroke-width: .7; }

.legenda-carta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.voce-legenda { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-soft); }
.chiave-carta {
    width: 11px; height: 11px; border-radius: 2px; display: inline-block;
    border: 1px solid rgba(0, 0, 0, .12);
}
.chiave-carta.d0 { background: #4a148c; }
.chiave-carta.d1 { background: #6a1b9a; }
.chiave-carta.d2 { background: #8e24aa; }
.chiave-carta.d3 { background: #ab47bc; }
.chiave-carta.d4 { background: #ce93d8; }
.chiave-carta.d5 { background: #e1bee7; }
.chiave-carta.d6 { background: #f3e5f5; }
.chiave-carta.ignota { background: #eceff1; }
.chiave-carta.con-emivita { background: #fff; border: 2px solid #00695c; }

/* Legenda cliccabile: filtra la tavola e accende le caselle corrispondenti. */
.legenda-carta .etichetta-legenda { margin-right: 2px; }
a.voce-legenda {
    padding: 2px 8px 2px 5px; border-radius: 12px; border: 1px solid transparent;
    color: var(--ink-soft); text-decoration: none; transition: background .12s, border-color .12s;
}
a.voce-legenda:hover { background: var(--bg-soft, #f7f8fa); border-color: var(--line); text-decoration: none; }
a.voce-legenda.scelta { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
a.voce-legenda.scelta .quanti { color: #fff; border-color: rgba(255, 255, 255, .5); }
.voce-legenda .quanti {
    font-size: 10.5px; margin-left: 3px; padding: 0 5px;
    border: 1px solid var(--line); border-radius: 8px; color: var(--ink-faint);
}

/* I nuclidi fuori dal filtro si spengono ma restano: sparendo si perderebbe la
   forma della valle di stabilita', che e' il motivo per cui una carta si guarda. */
.carta-nuclidi .nuclide.spento { opacity: .12; }
.carta-nuclidi.filtrando .nuclide:not(.spento) { stroke: var(--ink); stroke-width: .5; }

.chiave-carta.emivita { background: #fff; border: 2px solid #00695c; }
.chiave-carta.filiazione { background: #e3f2fd; border-color: #1565c0; }

/* Banche dati */
.split-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .split-tre { grid-template-columns: 1fr; } }
.banca-dati { padding: 7px 0; border-bottom: 1px solid var(--line); }
.banca-dati:last-child { border-bottom: 0; }
.banca-dati > a { font-weight: 600; font-size: 13.5px; }
.banca-dati .descrizione { color: var(--ink-faint); }
.ico-esterno { font-size: 10px; opacity: .55; margin-left: 2px; }

/* Moduli per cliente: una matrice clienti x moduli. */
.tabella-moduli th.colonna-modulo {
    text-align: center; font-size: 11.5px; line-height: 1.35; min-width: 84px;
}
.tabella-moduli th.colonna-modulo .sotto { font-weight: 400; }
.tabella-moduli td.cella-modulo { text-align: center; vertical-align: middle; }
.tabella-moduli td.cella-modulo .spunta { margin: 0 auto; }
.tabella-moduli td.cella-modulo .dal { display: block; margin-top: 3px; font-size: 10.5px; }

/* --------------------------------------------------------------------------
   Editor delle planimetrie.

   Tre colonne: i presidi da collocare, il disegno, le proprieta' di quello
   selezionato. La colonna centrale e' l'unica elastica, perche' e' l'unica in
   cui lo spazio in piu' serve davvero: le altre due hanno contenuto di
   larghezza nota e allargandole si otterrebbero solo campi lunghi e vuoti.
   -------------------------------------------------------------------------- */
.planimetria-guscio {
    display: grid;
    grid-template-columns: 218px minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: start;
    margin-bottom: 18px;
}

@media (max-width: 1180px) {
    .planimetria-guscio { grid-template-columns: 1fr; }
}

.planimetria-barra,
.planimetria-lato { min-width: 0; }

.planimetria-barra {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    max-height: 78vh;
    overflow-y: auto;
}

.planimetria-barra h3 { margin: 0 0 8px; }

.gruppo-presidi { margin-bottom: 10px; }

.voce-presidio {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 7px;
    margin-bottom: 3px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.76rem;
    line-height: 1.15;
    text-align: left;
    color: var(--ink);
}

.voce-presidio:hover { background: var(--brand-light); border-color: var(--brand); }
.voce-presidio svg { flex: 0 0 auto; }

.planimetria-tela {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    overflow: auto;
}

.planimetria-tela svg {
    width: 100%;
    height: auto;
    max-height: 76vh;
    display: block;
    /* Il disegno non si seleziona come fosse testo: trascinando un presidio si
       finirebbe per evidenziare mezza pagina invece di spostarlo. */
    user-select: none;
    touch-action: none;
}

.presidio { cursor: move; }
.presidio.selezionato { filter: drop-shadow(0 0 3px var(--brand)); }

.maniglia {
    fill: var(--surface);
    stroke: var(--brand);
    stroke-width: 2.5;
    cursor: pointer;
}

.maniglia-rotazione { fill: var(--brand-light); }
.filo-maniglia { stroke: var(--brand); stroke-width: 1.2; stroke-dasharray: 4 3; }

.etichetta-presidio {
    font: bold 15px sans-serif;
    fill: var(--ink);
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4px;
    pointer-events: none;
}

.stato-salvataggio {
    margin-top: 8px;
    font-size: 0.78rem;
    min-height: 1.1em;
    color: var(--ink-soft);
}

.stato-salvataggio.ok { color: var(--green); }
.stato-salvataggio.errore { color: var(--red); }

.nascosto { display: none !important; }

/* --- Albero del registro ------------------------------------------------ */
/* L indentazione fa il lavoro della gerarchia: senza, un albero di sei
   livelli si legge come un elenco e non si capisce piu' che cosa sta dentro
   che cosa. */
table.albero td { vertical-align: top; }
table.albero tr.nodo-sezione { background: var(--slate-bg); }
table.albero tr.nodo-sezione strong { color: var(--slate); }
table.albero .fw-normal { font-weight: 400; }
.ico-nodo { opacity: .75; margin-right: .35rem; }
.pallino {
    display: inline-block; width: .7rem; height: .7rem; border-radius: 2px;
    vertical-align: middle; margin-right: .35rem; border: 1px solid rgba(0,0,0,.15);
}
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
    display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px;
    border: 1px solid #dbe3ea; background: #fff; font-size: .82rem; text-decoration: none;
    color: inherit;
}
.chip:hover { border-color: #b9c6d3; }
.chip-on { background: var(--blue-bg); border-color: #c6dcf1; color: var(--blue); font-weight: 600; }
details.menu-nodo > summary { cursor: pointer; list-style: none; }
details.menu-nodo .menu-corpo {
    text-align: left; margin-top: .4rem; padding: .6rem; border: 1px solid #e2e8f0;
    border-radius: 6px; background: #fbfdff;
}
.menu-form { margin-bottom: .7rem; padding-bottom: .7rem; border-bottom: 1px dashed #e2e8f0; }
.menu-form:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.menu-form input, .menu-form select { width: 100%; margin-bottom: .3rem; }
.lista-compatta { list-style: none; padding: 0; margin: .3rem 0; }
.lista-compatta li { padding: .2rem 0; border-bottom: 1px dashed #eef2f6; }
.lista-compatta li:last-child { border-bottom: 0; }
.btn-xs { padding: .05rem .35rem; font-size: .74rem; }
.titolo-gruppo { font-size: 1rem; margin: 1.2rem 0 .5rem; display: flex; align-items: center; gap: .4rem; }

/* --- Fascia di impersonazione ------------------------------------------- */
/* Deve stare addosso e non doversi cercare: chi non si accorge di essere
   dentro l archivio di un altro ci lavora credendo di essere a casa propria. */
.fascia-impersonazione {
    display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem;
    padding: .6rem .9rem; border-radius: 6px;
    background: var(--amber-bg); border: 1px solid #f2ddb4; color: var(--amber);
    font-size: .88rem;
}
.fascia-impersonazione .ico { font-size: 1.1rem; }
.fascia-impersonazione form { margin-left: auto; }
.ambito-dentro { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }

/* --- Requisiti di rilascio ---------------------------------------------- */
/* Ogni voce porta con se' il perche': una checklist di cui non si capisce la
   ragione si spunta a vuoto. */
.requisito { padding: .7rem 0; border-bottom: 1px dashed #e2e8f0; }
.requisito:last-child { border-bottom: 0; }
.requisito-testa { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.requisito.manca { background: linear-gradient(90deg, var(--red-bg), transparent 40%); }
.requisito.attenzione { background: linear-gradient(90deg, var(--amber-bg), transparent 40%); }
.riga-spenta { opacity: .55; }

/* --- Il menu del proprio account ---------------------------------------- */
/* Il riquadro col proprio nome e' il posto dove chiunque va a cercare le
   proprie impostazioni: qui e' anche quello che le contiene. */
.menu-utente > summary { cursor: pointer; list-style: none; }
.menu-utente > summary::-webkit-details-marker { display: none; }
.menu-utente > summary.sidebar-user { margin-bottom: 6px; border-radius: 6px; padding: 4px; }
.menu-utente > summary.sidebar-user:hover { background: rgba(255, 255, 255, .06); }
.menu-utente > summary .freccia { margin-left: auto; color: #7d97a8; font-size: 11px; transition: transform .15s; }
.menu-utente[open] > summary .freccia { transform: rotate(180deg); }
.menu-utente > summary .count { margin-left: auto; }
.menu-utente > summary .count + .freccia { margin-left: 6px; }
.menu-utente-voci { margin: 0 0 8px; }
.menu-utente-voci .nav-link { font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }
fieldset.riquadro { border: 1px solid #e2e8f0; border-radius: 6px; padding: .7rem .9rem; margin: .8rem 0; }
fieldset.riquadro legend { font-size: .82rem; font-weight: 650; color: var(--slate); padding: 0 .3rem; }

/* --- Campo con pulsante accanto ----------------------------------------- */
.con-pulsante { display: flex; gap: .4rem; align-items: stretch; }
.con-pulsante > input { flex: 1; min-width: 0; }
.con-pulsante > .btn { white-space: nowrap; }
.password-generata {
    font-family: "DejaVu Sans Mono", ui-monospace, monospace; font-size: .95rem;
    background: var(--slate-bg); border: 1px dashed #cbd5e1; border-radius: 6px;
    padding: .35rem .6rem; display: inline-block; user-select: all;
}
.chip-incarico {
    display: inline-flex; align-items: center; gap: .25rem; margin: 0 .25rem .25rem 0;
    padding: .1rem .45rem; border: 1px solid #dbe3ea; border-radius: 999px;
    background: #fff; font-size: .8rem;
}

/* --- Scheda in sola lettura --------------------------------------------- */
/* Etichetta a sinistra e valore a destra: si scorre la colonna delle etichette
   per trovare il campo, invece di leggere tutto. */
table.scheda-campi { width: 100%; border-collapse: collapse; margin-bottom: .9rem; }
table.scheda-campi th {
    width: 42%; text-align: left; font-weight: 500; color: var(--slate);
    padding: .3rem .6rem .3rem 0; vertical-align: top; font-size: .84rem;
}
table.scheda-campi td { padding: .3rem 0; vertical-align: top; font-size: .88rem; }
table.scheda-campi tr + tr th, table.scheda-campi tr + tr td { border-top: 1px solid #eef2f6; }
/* La riga cliccabile lo dice: senza il cambio di sfondo e il cursore, chi
   guarda non sa che c'e' qualcosa da premere. */
tr[data-apri] { cursor: pointer; }
tr[data-apri]:hover { background: var(--blue-bg); }
tr[data-apri]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
details.filtri-avanzati { margin: .6rem 0; border-top: 1px dashed #e2e8f0; padding-top: .6rem; }
details.filtri-avanzati > summary {
    cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--slate);
    padding: .2rem 0; user-select: none;
}
details.filtri-avanzati > summary::marker { color: #94a3b8; }

/* --- Firme lette negli allegati ----------------------------------------- */
.firma-allegato { background: #fbfdff; border: 1px solid #e2e8f0; border-radius: 6px;
                  padding: .7rem .9rem; margin: .4rem 0 .8rem; }
.firma-testa { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.firma-blocco { border-top: 1px dashed #e2e8f0; padding-top: .6rem; margin-top: .6rem; }
.firma-blocco:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.firma-riga { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.avvisi-firma { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .8rem; color: var(--amber); }
.avvisi-firma li { margin-bottom: .2rem; }

/* --- Miniature degli apparecchi ----------------------------------------- */
/* Il segnaposto tiene la colonna allineata: senza, le righe con e senza foto
   starebbero su due rientri diversi e l'elenco si leggerebbe peggio. */
.con-miniatura { display: flex; gap: .55rem; align-items: flex-start; }
.miniatura {
    width: 46px; height: 46px; object-fit: cover; border-radius: 4px;
    border: 1px solid #e2e8f0; background: #fff; flex: 0 0 auto;
}
.miniatura-vuota {
    display: flex; align-items: center; justify-content: center;
    color: #cbd5e1; font-size: 1.2rem; background: var(--slate-bg);
}
.galleria { display: flex; flex-wrap: wrap; gap: .8rem; }
.galleria figure { margin: 0; width: 180px; }
.galleria img { width: 180px; height: 135px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f0; }
.galleria figcaption { font-size: .78rem; color: var(--slate); margin-top: .25rem; }
.galleria .principale img { outline: 3px solid var(--blue); outline-offset: 1px; }

/*
   Il compositore di un flusso.

   Una tavola di ottantatre righe con quattro campi per riga: la riga del
   corredo standard si deve distinguere a colpo d occhio da quelle che si
   stanno solo scorrendo, altrimenti si perde di vista che cosa si sta
   aggiungendo e che cosa e' solo passato sotto gli occhi.
*/
table.compositore td { vertical-align: middle; }
table.compositore input.compatto { width: 100%; min-width: 62px; padding: 4px 6px; font-size: 12.5px; }
table.compositore tr.del-corredo { background: #f3f8fd; }
table.compositore tr.del-corredo td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
table.compositore tr[hidden] { display: none; }