/* Calabria Lavoro Hub — foglio di stile dell'applicazione.
   Linguaggio visivo del Design System Italia (palette, spaziatura, elevazioni),
   ma senza alcuna dipendenza esterna: niente Bootstrap Italia da CDN, niente
   Google Fonts. L'app resta autonoma e autoconsistente (vedi CLAUDE.md): la
   tipografia usa lo stack di sistema, non "Titillium Web" mai caricato. */

:root {
    /* Palette istituzionale (token Design System Italia) */
    --blu: #0066cc;
    --blu-vivo: #0073e6;
    --blu-scuro: #00264d;
    --blu-notte: #012a57;
    --blu-bordo: #003d7a;

    /* Testo */
    --ink-1: #17324d;
    --ink-2: #455b71;
    --ink-3: #5c6f82;

    /* Superfici */
    --sfondo: #f0f4f8;
    --superficie: #ffffff;
    --linea: #d9e4f0;

    /* Feedback */
    --verde: #00734f;
    --verde-tenue: #e0f0e9;
    --ambra: #a35f00;
    --ambra-tenue: #fbeedd;
    --rosso: #a3271f;
    --rosso-tenue: #fdf1f0;
    --grigio-tenue-bg: #e7e9ec;

    /* Elevazione */
    --ombra: 0 2px 8px rgba(23, 50, 77, 0.08);
    --ombra-alta: 0 10px 28px rgba(23, 50, 77, 0.14);
    --raggio: 8px;
    --raggio-piccolo: 6px;

    /* Margini laterali del contenitore e della scheda bianca: su schermi
       stretti si riducono insieme, e la barra delle azioni dell'intervista
       li usa per sbordare fino ai bordi della scheda. */
    --gutter-contenitore: 1.5rem;
    --gutter-scheda: 1.75rem;

    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-1);
    background: var(--sfondo);
    /* Piè di pagina sempre in fondo, anche con poco contenuto (pagina di
       accesso, errori): l'area centrale si allunga fino a riempire. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > .area-contenuto { flex: 1 0 auto; }

.contenitore {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--gutter-contenitore);
}
@media (max-width: 640px) {
    :root { --gutter-contenitore: 1rem; --gutter-scheda: 1rem; }
}

.salta-contenuto {
    position: absolute;
    left: -9999px;
}
.salta-contenuto:focus {
    position: fixed;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 200;
    background: var(--superficie);
    color: var(--blu);
    padding: 0.6rem 1.1rem;
    border-radius: var(--raggio-piccolo);
    box-shadow: var(--ombra-alta);
    font-weight: 700;
}

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

/* Focus visibile e coerente su tutti gli elementi interattivi (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.bottone:focus-visible {
    outline: 3px solid #ff9900;
    outline-offset: 2px;
}

code {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-size: 0.85em;
    color: var(--ink-1);
    background: #edf3fa;
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
}

/* --- Testata: fascia slim + fascia fotografica + menu (come il Catalogo
   Formativo) --- */
/* Resta in vista mentre la pagina scorre e si compatta oltre una soglia
   (classe intestazione--compatta aggiunta da lavorohub-layout.js). */
.testata {
    position: sticky;
    top: 0;
    z-index: 100;
}
/* La testata va da un bordo all'altro come il menu e il contenuto che
   le stanno sotto: lo stemma si allinea al menu laterale. */
.testata .contenitore { max-width: none; padding-left: 20px; padding-right: 20px; }
.intestazione-slim {
    background: var(--blu-scuro);
    color: #fff;
    font-size: 0.82rem;
}
.intestazione-slim .contenitore {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 6px;
    padding-bottom: 6px;
}
.intestazione-slim a { color: #fff; text-decoration: none; }
.intestazione-slim a:hover { text-decoration: underline; }

/* header.jpg è ritagliata per questa fascia (1983×106). Il gradiente resta
   come fallback, con contrasto sufficiente per testo e stemma bianchi, se
   l'immagine non carica. Niente attachment:fixed: dentro un antenato
   sticky i background fissi sono inaffidabili tra browser. */
.intestazione {
    position: relative;
    min-height: 106px;
    color: #fff;
    background: linear-gradient(120deg, var(--blu) 0%, #0059b3 60%, #004a99 100%);
    box-shadow: 0 2px 10px rgba(0, 38, 77, 0.35);
    overflow: hidden;
    transition: min-height 0.25s ease;
}
.intestazione::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/header.jpg') center / cover no-repeat;
    pointer-events: none;
}
.intestazione-corpo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 16px;
    padding-bottom: 16px;
    transition: padding 0.25s ease;
}
.intestazione-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    text-decoration: none;
    min-width: 0;
}
.intestazione-stemma {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    transition: width 0.25s ease, height 0.25s ease;
}
.intestazione-app {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.2px;
    transition: font-size 0.25s ease;
}
.intestazione-sottotitolo {
    display: block;
    margin-top: 2px;
    font-size: 0.88rem;
    font-weight: 300;
    letter-spacing: 0.3px;
    opacity: 0.92;
    transition: font-size 0.25s ease, opacity 0.25s ease;
}
/* Loghi istituzionali su un unico pannello bianco, separati da filetti. */
.intestazione-loghi {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    background: #fff;
    border-radius: 4px;
    padding: 6px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.intestazione-loghi img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    padding: 0 10px;
    transition: height 0.25s ease;
}
.intestazione-loghi img + img { border-left: 1px solid #c5ced8; }
@media (max-width: 720px) {
    .intestazione-loghi { display: none; }
    .intestazione-app { font-size: 1.3rem; }
}

/* Testata compattata durante lo scroll */
.intestazione--compatta { min-height: 64px; }
.intestazione--compatta .intestazione-corpo { padding-top: 8px; padding-bottom: 8px; }
.intestazione--compatta .intestazione-stemma { width: 40px; height: 40px; }
.intestazione--compatta .intestazione-app { font-size: 1.25rem; }
.intestazione--compatta .intestazione-sottotitolo { font-size: 0.75rem; opacity: 0.85; margin-top: 0; }
.intestazione--compatta .intestazione-loghi img { height: 32px; }

/* Su schermi stretti la testata (con il menu, che lì va a capo su più
   righe) scorre via: fissa sottrarrebbe metà della finestra al contenuto. */
@media (max-width: 768px) {
    .testata { position: relative; }
}

/* --- Menu laterale (come Gestione Precari e il Catalogo Formativo) --- */
/* Lo sfondo bloccato copre menu e contenuto insieme (vedi .area-contenuto):
   così si vede anche attraverso il menu semitrasparente. */
.guscio {
    display: flex;
    align-items: stretch;
    width: 100%;
    flex: 1 0 auto;
    background: var(--sfondo) url(../img/sfondo.jpg) center top / cover no-repeat;
    background-attachment: fixed;
}
.guscio .area-contenuto { background: none; }
.guscio-contenuto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Accanto al menu il contenuto usa tutta la larghezza disponibile: niente
   colonna centrata da 1180px, che con il menu a sinistra lasciava due
   fasce vuote ai lati. Fra menu e scheda bianca 32px, come in Gestione
   Precari. */
.guscio-contenuto > .area-contenuto { flex: 1 0 auto; padding-left: 2rem; padding-right: 2rem; }
.guscio-contenuto .contenitore { max-width: none; }

.menu-laterale {
    width: 256px;
    flex: 0 0 256px;
    color: #fff;
    /* Trasparente al 75%: lascia intravedere lo sfondo della pagina, che
       per questo sta sul .guscio e non solo sull'area del contenuto. Non
       scendere sotto: sulla zona più chiara dell'immagine le voci (#cfe0f5)
       hanno 5,0:1 di contrasto al 75%, ma solo 2,4:1 al 50% (minimo WCAG
       AA 4,5:1). */
    background: linear-gradient(180deg, rgba(1, 42, 87, 0.75) 0%, rgba(0, 38, 77, 0.75) 100%);
}
/* Il menu segue lo scorrimento restando sotto la testata compattata
   (fascia slim 32px + intestazione 64px): le voci restano sempre a
   portata di mano anche in fondo a un elenco lungo. */
.menu-laterale-interno {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}
.utente-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.utente-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.utente-dati { min-width: 0; flex: 1 1 auto; }
.utente-nome { font-weight: 600; line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
.utente-ruolo { font-size: 0.78rem; opacity: 0.85; }
.menu-laterale nav ul {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
}
.menu-laterale nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px 11px 14px;
    color: #cfe0f5;
    text-decoration: none;
    border-left: 4px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.menu-laterale nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.menu-laterale nav a.attivo {
    background: rgba(0, 102, 204, 0.45);
    border-left-color: #fff;
    color: #fff;
    font-weight: 600;
}
.icona {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    fill: currentColor;
    opacity: 0.85;
}
.menu-laterale nav a.attivo .icona { opacity: 1; }

/* Selettore del ruolo nel box utente (chi ha più ruoli). */
.selettore-ruolo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.selettore-ruolo select {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 1rem;
    padding: 0.15rem 1.4rem 0.15rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.selettore-ruolo select option { color: var(--ink-1); }

/* Barra con il bottone "Menu": solo sugli schermi stretti */
.barra-mobile { display: none; }
.menu-velo {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(9, 30, 55, 0.5);
}
.menu-velo[hidden] { display: none; }
@media (max-width: 768px) {
    .guscio { flex-direction: column; }
    .guscio-contenuto > .area-contenuto { padding-left: 0; padding-right: 0; }
    .barra-mobile {
        display: block;
        position: sticky;
        top: 0;
        z-index: 90;
        background: var(--blu-notte);
        padding: 4px 12px;
    }
    .barra-mobile button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: none;
        border: 0;
        color: #fff;
        font: inherit;
        font-weight: 600;
        font-size: 1.05rem;
        padding: 0.45rem 0.25rem;
        cursor: pointer;
    }
    .menu-laterale {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 150;
        width: 280px;
        overflow-y: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
    }
    /* Qui il menu si apre sopra il contenuto: semitrasparente sarebbe
       illeggibile, quindi torna pieno. */
    .menu-laterale { background: linear-gradient(180deg, var(--blu-notte) 0%, var(--blu-scuro) 100%); }
    .menu-laterale.aperto {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.2s ease;
        box-shadow: 0 0 40px rgba(9, 30, 55, 0.5);
    }
    .menu-laterale-interno { position: static; max-height: none; overflow: visible; }
}

/* Contenitore aggiunto da lavorohub-layout.js attorno a ogni tabella: se
   la tabella è più larga dello spazio, scorre lei e non la pagina. */
.tabella-scorrevole {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Contenuto --- */
/* Fascia fra intestazione e piè di pagina: sfondo decorativo a copertura,
   sopra cui poggia la scheda bianca del contenuto. Lo spazio verticale sta
   qui (padding) e non nei margini di .contenuto, che altrimenti collasserebbero
   fuori dalla fascia lasciandola scoperta. */
.area-contenuto {
    background: var(--sfondo) url(../img/sfondo.jpg) center top / cover no-repeat;
    /* Sfondo bloccato: resta fermo mentre la pagina scorre, ed è dimensionato
       sulla finestra e non sull'altezza della pagina (che sulle pagine lunghe
       lo ingrandiva a dismisura). Dove il browser non lo supporta (Safari su
       iOS) torna semplicemente a scorrere. */
    background-attachment: fixed;
    padding: 1.75rem 0 2.5rem;
}
.contenuto {
    background: var(--superficie);
    padding: 1.85rem var(--gutter-scheda) 2.35rem;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}
h1 {
    margin-top: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ink-1);
}
h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink-1);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
h2::before {
    content: '';
    width: 4px;
    height: 1.05em;
    border-radius: 3px;
    background: var(--blu);
    flex: 0 0 4px;
}
.sezione { margin-bottom: 2.5rem; }
.intestazione-sezione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.selettore-periodo { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.periodo-voce {
    font-size: 0.85rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--linea);
    color: var(--ink-2);
    text-decoration: none;
}
.periodo-voce:hover { background: var(--sfondo); }
.periodo-attiva { background: var(--blu); border-color: var(--blu); color: #fff; font-weight: 600; }
.testo-allerta { color: var(--rosso); font-weight: 600; }
.intestazione-ordinabile { color: inherit; text-decoration: none; }
.intestazione-ordinabile:hover { text-decoration: underline; }
.intestazione-ordinabile::after { content: '↕'; color: var(--ink-3); margin-left: 0.2rem; font-weight: 400; }
.colonna-ordinata-asc::after { content: '↑'; color: var(--blu); }
.colonna-ordinata-desc::after { content: '↓'; color: var(--blu); }
.introduzione { color: var(--ink-2); }
.nota {
    color: var(--ink-3);
    font-size: 0.92rem;
}

/* --- Accesso --- */
.accesso {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 820px) {
    .accesso { grid-template-columns: 1.15fr 1fr; }
}
.accesso-riquadro {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-alta);
    padding: 1.75rem;
}
.accesso-riquadro h2::before { display: none; }
.introduzione-etichetta {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blu);
}

.bottone {
    display: block;
    width: 100%;
    padding: 0.75rem 1.1rem;
    margin-bottom: 0.6rem;
    border: none;
    border-radius: var(--raggio-piccolo);
    background: var(--blu);
    color: var(--superficie);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.bottone:hover, .bottone:focus { background: #0059b3; }
.bottone-secondario {
    background: var(--superficie);
    color: var(--blu);
    border: 2px solid var(--linea);
    padding: calc(0.75rem - 2px) calc(1.1rem - 2px);
}
.bottone-secondario:hover, .bottone-secondario:focus {
    background: #f0f7ff;
    border-color: var(--blu);
}
.bottone-spid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}
.bottone-spid::before {
    content: 'SPID';
    background: var(--superficie);
    color: var(--blu);
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    letter-spacing: 0.04em;
}
.blocco-test {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--linea);
}
.blocco-test-titolo {
    margin: 0 0 0.4rem;
    font-weight: 700;
    color: var(--ambra);
}

.avviso {
    padding: 0.85rem 1.1rem;
    border-left: 4px solid;
    border-radius: var(--raggio-piccolo);
    margin-bottom: 1rem;
    background: var(--superficie);
    box-shadow: var(--ombra);
}
.avviso-errore {
    border-color: var(--rosso);
    background: var(--rosso-tenue);
    color: var(--rosso);
}

/* --- Schede numeriche (KPI) --- */
.griglia-schede {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
}
.scheda {
    border: 1px solid var(--linea);
    border-top: 4px solid var(--ink-3);
    border-radius: var(--raggio);
    padding: 1.1rem 1.2rem;
    background: var(--superficie);
    box-shadow: var(--ombra);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scheda:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.scheda-rilievo {
    border-top-color: var(--blu);
}
.scheda-valore {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
}
.scheda-etichetta {
    display: block;
    font-size: 0.85rem;
    color: var(--ink-2);
    margin-top: 0.15rem;
}

/* --- Tabelle --- */
.tabella {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
}
.tabella th, .tabella td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--linea);
    text-align: left;
    vertical-align: top;
}
.tabella thead th {
    background: #fbfcfe;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--ink-2);
    border-bottom: 2px solid var(--linea);
}
.tabella tbody tr { transition: background-color 0.1s ease; }
.tabella tbody tr:hover { background: #f4f8fc; }
.tabella .numerico { text-align: right; white-space: nowrap; }

.tabella-indicatori .codice {
    display: block;
    font-weight: 700;
    color: var(--blu);
}
.tabella-indicatori .linea-titolo {
    display: block;
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--ink-3);
}
.cella-indicatore .formula {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--ink-3);
}
.riga-fuori-perimetro { background: #fafbfc; }
.riga-sospesa { color: var(--ink-3); }
.riga-sospesa a { color: inherit; }
.dettaglio-import {
    max-height: 20rem;
    overflow: auto;
    white-space: pre-wrap;
    background: var(--sfondo);
    border: 1px solid var(--bordo, #dde3ea);
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.85rem;
}
.frazione {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-3);
}
.da-rilevare, .non-misurabile {
    font-style: italic;
    color: var(--ink-3);
    font-size: 0.88rem;
    white-space: normal;
}

/* --- Pastiglie di provenienza --- */
.legenda {
    background: var(--sfondo);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    padding: 0.9rem 1.1rem;
    font-size: 0.88rem;
    color: var(--ink-2);
    margin-bottom: 1.25rem;
}
.pastiglia {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.15rem 0.65rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.pastiglia::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}
.pastiglia-calcolato { background: var(--verde-tenue); color: var(--verde); }
.pastiglia-attestato { background: var(--ambra-tenue); color: var(--ambra); }
.pastiglia-esterno   { background: var(--grigio-tenue-bg); color: var(--ink-3); }

.esito {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.esito-ok { color: var(--verde); }

/* --- Stati di lavorazione --- */
.stato {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--grigio-tenue-bg);
    color: var(--ink-3);
    white-space: nowrap;
}
.stato-completata { background: var(--verde-tenue); color: var(--verde); }
.stato-in_lavorazione { background: var(--ambra-tenue); color: var(--ambra); }
.stato-cessata, .stato-rifiuto,
.stato-recapito_errato, .stato-non_raggiungibile {
    background: var(--rosso-tenue);
    color: var(--rosso);
}
.stato-da_assegnare { background: var(--sfondo); color: var(--ink-3); }
.stato-assegnata { background: #e8f0fb; color: var(--blu-notte); }

/* --- Piè di pagina --- */
.pie-pagina {
    background: var(--blu-scuro);
    color: #cfe0f5;
    border-top: 3px solid var(--blu);
    padding: 1.5rem 0;
    font-size: 0.85rem;
}
.pie-pagina p { margin: 0; }
.pie-pagina p + p { margin-top: 0.5rem; }
.pie-pagina a { color: #fff; text-decoration: underline; }

/* --- Campagna imprese: filtri, elenco, assegnazione --- */
.filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    padding: 1.1rem;
    margin-bottom: 1.5rem;
    background: var(--sfondo);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.filtri-campo {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 12rem;
    flex: 1 1 12rem;
}
.filtri-campo label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-2);
}
.filtri-campo input,
.filtri-campo select {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo);
    font: inherit;
    background: var(--superficie);
    color: var(--ink-1);
}
.filtri-campo input:focus-visible,
.filtri-campo select:focus-visible {
    border-color: var(--blu);
}
.scelte-ruoli {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    border: 0;
    padding: 0;
    margin: 0 0 0.8rem;
}
.scelta-ruolo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--ink-2);
}
.filtri-azioni {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.collegamento-azzera { font-size: 0.9rem; color: var(--blu); text-decoration: none; }
.collegamento-azzera:hover { text-decoration: underline; }

/* Il .bottone di base è a piena larghezza, disegnato per il form di
   accesso: nelle pagine di gestione serve invece un bottone in linea. */
.bottone-inline {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
}

.riepilogo-elenco {
    margin: 0 0 0.75rem;
    color: var(--ink-2);
    font-size: 0.92rem;
}
.riepilogo-elenco a { color: var(--blu); text-decoration: none; font-weight: 600; }
.riepilogo-elenco a:hover { text-decoration: underline; }

.riquadro-assegnazione {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin: 1.5rem 0;
    padding: 1.1rem;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    background: var(--sfondo);
}
.riquadro-assegnazione legend {
    padding: 0 0.4rem;
    font-weight: 700;
    color: var(--ink-1);
}
.campo-scelta {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-2);
}
.form-revoca { margin-top: 0.5rem; }

.paginazione {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 1.25rem;
    font-size: 0.92rem;
}
.paginazione a { color: var(--blu); text-decoration: none; font-weight: 600; }
.paginazione a:hover { text-decoration: underline; }

.avviso-esito {
    border-color: var(--verde);
    background: var(--verde-tenue);
    color: var(--verde);
}

/* Scheda anagrafica dell'impresa. */
.scheda-dati {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 0.55rem 1.5rem;
    margin: 0;
}
.scheda-dati dt {
    font-weight: 600;
    color: var(--ink-2);
}
.scheda-dati dd { margin: 0; }

.riga-attiva { background: #f0f6fd; }

@media (max-width: 640px) {
    .scheda-dati { grid-template-columns: 1fr; }
    .scheda-dati dd { margin-bottom: 0.5rem; }
}

/* --- Grafico degli indicatori (Chart.js, /monitoraggio) --- */
.grafico-riquadro {
    background: var(--sfondo);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    padding: 1.1rem 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
}
.grafico-riquadro h2, .grafico-riquadro h3 { margin-top: 0; }
.grafico-campagna { margin-top: 1.25rem; }
.grafico-tela {
    position: relative;
    width: 100%;
    margin-top: 0.5rem;
}

/* --- DataTables: solo l'ordinamento per colonna, stile riportato al resto
   dell'app. Selettori a specificità pari o superiore a quelli del foglio di
   DataTables (assets/css/dataTables-2.3.8.min.css), caricato prima di
   questo file. --- */
table.dataTable.tabella-imprese {
    border-collapse: collapse;
}
table.dataTable.tabella-imprese > thead > tr > th,
table.dataTable.tabella-imprese > tbody > tr > td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--linea);
}
table.dataTable.tabella-imprese > thead > tr > th {
    border-bottom: 2px solid var(--linea);
}
table.dataTable.tabella-imprese thead > tr > th.dt-orderable-asc:hover,
table.dataTable.tabella-imprese thead > tr > th.dt-orderable-desc:hover {
    outline: none;
    background: #f4f8fc;
}

/* --- Stampa --- */
@media print {
    .intestazione-slim, .menu-laterale, .barra-mobile, .pie-pagina, .salta-contenuto { display: none !important; }
    .guscio { display: block; background: none !important; }
    .testata { position: static; }
    .intestazione { background: none !important; color: var(--ink-1) !important; box-shadow: none; min-height: 0; }
    .intestazione::before { display: none; }
    .area-contenuto { background: none !important; padding: 0; }
    .contenuto { box-shadow: none; border: 1px solid #999; }
}

/* ------------------------------------------------------------------
   Intervista (questionario imprese)
   Una domanda per blocco, controlli larghi e leggibili: l'operatore la
   compila mentre parla al telefono, e non deve cercare il campo giusto.
   ------------------------------------------------------------------ */

.sottotitolo { color: var(--ink-2); margin-top: -0.4rem; }
.briciole { font-size: 0.9rem; color: var(--ink-3); margin: 1.2rem 0 0.4rem; }
.briciole a { color: var(--ink-2); }
.assente { color: var(--ink-3); font-style: italic; }

.bottone-primario,
.bottone-lieve {
    display: inline-block;
    border-radius: var(--raggio-piccolo);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.bottone-primario {
    padding: 0.7rem 1.3rem;
    border: none;
    background: var(--blu);
    color: var(--superficie);
    font-size: 1rem;
}
.bottone-primario:hover:not(:disabled) { background: #0059b3; }
.bottone-primario:disabled { background: var(--grigio-tenue-bg); color: var(--ink-3); cursor: not-allowed; }
.bottone-lieve {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--linea);
    background: var(--superficie);
    color: var(--blu);
    font-size: 0.85rem;
    font-weight: 600;
}
.bottone-lieve:hover { border-color: var(--blu); }
.bottone-attenzione { border-color: var(--ambra); color: var(--ambra); }

.avviso { padding: 0.8rem 1rem; border-radius: var(--raggio-piccolo); margin: 1rem 0; }
.avviso-ok { background: var(--verde-tenue); color: var(--verde); }
.avviso-attenzione { background: var(--ambra-tenue); color: var(--ambra); }
.avviso-neutro { background: var(--grigio-tenue-bg); color: var(--ink-2); }

.riquadro {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 1.2rem 1.4rem;
    margin: 1.2rem 0;
}
.riquadro-attenzione { border-left: 4px solid var(--ambra); }

/* ==========================================================================
   Intervista: percorso delle sezioni, domande, barra delle azioni.
   Regola di sicurezza per tutto il blocco: le classi che i template e
   intervista.js mostrano/nascondono con l'attributo `hidden` (domanda-guscio,
   ricerca-risultati, ricerca-scelto, ricerca-query, posizione-riga,
   posizione-cp-scelto, anagrafica-nuovo) hanno sempre un `[hidden]` esplicito:
   una regola `display` su quelle classi vincerebbe altrimenti sul default
   dello user-agent e le domande condizionali resterebbero sempre visibili,
   senza alcun errore.
   ========================================================================== */

.domanda-guscio[hidden],
.ricerca-risultati[hidden],
.ricerca-scelto[hidden],
.ricerca-query[hidden],
.posizione-riga[hidden],
.posizione-cp-scelto[hidden],
.anagrafica-nuovo[hidden] { display: none; }

/* A8 (sito web / social media): i due sottocampi affiancati invece che uno
   sotto l'altro. Float invece di un flex-wrapper condiviso perché ogni
   sottocampo resta un .domanda-guscio a sé (stessa struttura di ogni altra
   domanda composta): un clear generico sul guscio successivo basta a non
   dover restrutturare il markup condiviso da tutte le domande composte. */
.domanda-guscio[data-gruppo="A8"] {
    float: left;
    width: calc(50% - 0.75rem);
    box-sizing: border-box;
}
.domanda-guscio[data-gruppo="A8"] + .domanda-guscio[data-gruppo="A8"] {
    margin-left: 1.5rem;
}
.domanda-guscio:not([data-gruppo="A8"]) { clear: both; }
@media (max-width: 640px) {
    .domanda-guscio[data-gruppo="A8"] {
        float: none;
        width: auto;
    }
    .domanda-guscio[data-gruppo="A8"] + .domanda-guscio[data-gruppo="A8"] {
        margin-left: 0;
    }
}

.intervista-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-size: 0.92rem; }
.intervista-meta-sep { color: var(--linea); }
@media (max-width: 640px) {
    .intervista-meta { flex-direction: column; gap: 0.15rem; }
    .intervista-meta-sep { display: none; }
}

/* Percorso delle sezioni: uno stepper con lo stato di ciascuna sezione
   (completa / da completare / da compilare), calcolato dal template sui
   dati già in pagina. L'operatore vede dove si trova, cosa manca, e può
   tornare su una sezione già compilata senza perdere quanto scritto. */
.passi-sezione {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.35rem;
    list-style: none;
    padding: 0.35rem;
    margin: 1.2rem 0 1.6rem;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.passo a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3.4rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--raggio-piccolo);
    color: var(--ink-2);
    text-decoration: none;
    line-height: 1.2;
    transition: background-color 0.12s ease;
}
.passo a:hover { background: var(--sfondo); }
.passo a:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }
.passo-sigla {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 2px solid var(--linea);
    background: var(--superficie);
    color: var(--ink-3);
    font-weight: 700;
    font-size: 0.85rem;
}
.passo-testo { display: flex; flex-direction: column; min-width: 0; }
.passo-titolo {
    font-size: 0.84rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.passo-stato { font-size: 0.74rem; color: var(--ink-3); }

.passo-parziale .passo-sigla { border-color: var(--ambra); color: var(--ambra); background: var(--ambra-tenue); }
.passo-parziale .passo-stato { color: var(--ambra); }
.passo-completa .passo-sigla { border-color: var(--verde); color: var(--superficie); background: var(--verde); }
.passo-completa .passo-stato { color: var(--verde); }
.passo-riepilogo .passo-sigla { border-style: dashed; }

.passo-attivo a { background: var(--blu); color: var(--superficie); }
.passo-attivo a:hover { background: #0059b3; }
.passo-attivo .passo-sigla { border-color: var(--superficie); background: var(--superficie); color: var(--blu); }
.passo-attivo .passo-stato { color: var(--superficie); }

@media (max-width: 720px) {
    .passi-sezione { grid-template-columns: repeat(auto-fit, minmax(2.9rem, 1fr)); }
    .passo a { justify-content: center; padding: 0.4rem 0.2rem; min-height: 2.8rem; }
    .passo-testo { display: none; }
}

.sezione-testata { margin: 0 0 1rem; }
.sezione-progresso {
    margin: 0;
    color: var(--blu);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sezione-testata h2 { margin-top: 0.15rem; }

/* Domande: una scheda per domanda, con il codice in evidenza come
   etichetta e il testo della domanda come elemento dominante. */
.domanda {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    padding: 1.1rem 1.3rem 1.2rem;
    margin-bottom: 0.8rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.domanda:focus-within { border-color: #9dbfe6; box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.08); }
.domanda-segnalata { border-left: 4px solid var(--ambra); }
.domanda-testo {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
}
.domanda-codice {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-width: 2.4rem;
    justify-content: center;
    margin-top: 0.15rem;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    background: #e8f0fb;
    color: var(--blu-notte);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.domanda-frase { flex: 1; min-width: 0; }
.domanda-aiuto { color: var(--ink-3); font-size: 0.9rem; margin: -0.2rem 0 0.7rem; }
.domanda-etichetta { color: var(--ink-2); font-size: 0.9rem; font-weight: 600; margin: 0.6rem 0 0.35rem; }
.repertorio-tutti-settori {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--ink-2);
    font-size: 0.88rem;
    margin: 0.4rem 0;
    cursor: pointer;
}
.repertorio-tutti-settori input { margin-top: 0.2rem; }

/* Opzioni a scelta: tutta la riga è cliccabile e la scelta si vede sul
   bordo, non solo sul pallino. Le caselle native restano (accessibilità,
   tastiera, nessun JS): sono solo più grandi e colorate. */
.modulo-intervista input[type="radio"],
.modulo-intervista input[type="checkbox"] {
    accent-color: var(--blu);
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}
.opzioni { display: flex; flex-direction: column; gap: 0.4rem; }
.opzione {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo);
    background: var(--superficie);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.opzione input { margin-top: 0.2rem; }
.opzione:hover { border-color: #9dbfe6; background: #f7fafd; }
.opzione:has(input:checked) { border-color: var(--blu); background: #eef4fb; font-weight: 600; }
.opzione:has(input:focus-visible) { outline: 2px solid var(--blu); outline-offset: 1px; }
.opzione:has(input:disabled) { cursor: default; color: var(--ink-2); background: #fafbfc; }
.opzione:has(input:disabled:checked) { border-color: var(--ink-3); background: var(--grigio-tenue-bg); }

/* Scala 1-5 come controllo segmentato. Sono sempre cinque radio con lo
   stesso name: R7 legge `e_positiva` dall'opzione scelta. */
.scala { max-width: 34rem; }
.scala-segmenti {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo);
    overflow: hidden;
    background: var(--superficie);
}
.scala-voce {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-left: 1px solid var(--linea);
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.scala-voce:first-child { border-left: none; }
.scala-voce:hover { background: #f7fafd; }
.scala-voce input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
}
/* Qui la casella nativa è invisibile, quindi scelta e focus non possono
   dipendere da :has(): il valore segue l'input nel markup e basta un
   selettore di fratello, che ogni browser capisce. */
.scala-valore {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink-2);
}
.scala-voce input:checked ~ .scala-valore { background: var(--blu); color: var(--superficie); }
.scala-voce input:focus-visible ~ .scala-valore { outline: 2px solid var(--blu); outline-offset: -2px; }
.scala-voce input:disabled ~ .scala-valore { cursor: default; }
.scala-voce input:disabled:checked ~ .scala-valore { background: var(--ink-3); }
.scala-estremi {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.3rem;
    color: var(--ink-3);
    font-size: 0.82rem;
}
.scala-estremi span:last-child { text-align: right; }
.scala-escape {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.88rem;
    color: var(--ink-2);
}

.campo-testo, .campo-select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #c4d3e3;
    border-radius: var(--raggio-piccolo);
    font-size: 1rem;
    font-family: inherit;
    background: var(--superficie);
    color: var(--ink-1);
}
.campo-testo:focus, .campo-select:focus { outline: 2px solid var(--blu); outline-offset: -1px; border-color: var(--blu); }
.campo-testo:disabled, .campo-select:disabled { background: #fafbfc; color: var(--ink-2); }

.etichetta-codice {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    background: #edf3fa;
    color: var(--blu-scuro);
    font-size: 0.8rem;
    font-weight: 700;
}
.etichetta-settore { display: block; color: var(--ink-3); font-size: 0.85rem; }

.ricerca-risultati {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    max-height: 20rem;
    overflow-y: auto;
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo);
    box-shadow: var(--ombra);
}
.ricerca-voce { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--linea); cursor: pointer; }
.ricerca-voce:last-child { border-bottom: none; }
.ricerca-voce:hover { background: #edf3fa; }
.ricerca-vuoto { padding: 0.5rem 0.8rem; color: var(--ink-3); font-size: 0.9rem; }
.ricerca-scelto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.6rem 0.8rem;
    background: #f6f9fc;
    border-left: 3px solid var(--blu);
    border-radius: var(--raggio-piccolo);
}
.ricerca-scelto .etichetta-settore { flex-basis: 100%; }

.posizioni-elenco { margin-bottom: 0.6rem; }
.posizione { display: flex; gap: 0.6rem; align-items: flex-start; justify-content: space-between; border-top: 1px solid var(--linea); padding: 0.7rem 0; }
.posizione:first-child { border-top: none; padding-top: 0; }
.posizione-corpo { flex: 1; min-width: 0; }
.posizione-riga { display: flex; gap: 0.5rem; align-items: center; }
.posizione-cp-scelto {
    padding: 0.5rem 0.8rem;
    background: #f6f9fc;
    border-left: 3px solid var(--blu);
    border-radius: var(--raggio-piccolo);
}
.posizione-denominazione-testo { font-weight: 600; margin-right: 0.4rem; }
.posizione-cp-testo { color: var(--ink-2); }

.posizione-dettagli { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.posizione-campo { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--ink-2); flex: 1 1 220px; }
.posizione-campo-numero { flex: 0 1 130px; }

.repertorio-selezionati { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.repertorio-selezionati li {
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.35rem;
    background: #f6f9fc;
    border-left: 3px solid var(--blu);
    border-radius: var(--raggio-piccolo);
}
.posizione-togli { flex: 0 0 auto; }

.verifica-anagrafica h3 { margin-top: 0; }
.anagrafica-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.6rem 1.2rem; margin: 0.8rem 0; }
.anagrafica-campo { padding: 0.5rem 0; border-bottom: 1px solid var(--linea); }
.anagrafica-campi dt { color: var(--ink-3); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.anagrafica-campi dd { margin: 0.15rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.anagrafica-campi dd .etichetta-settore { flex-basis: 100%; }
.anagrafica-nuovo { margin-top: 0.3rem; flex-basis: 100%; }

/* Bottoni dell'intervista. `.bottone-contorno` è il fratello a contorno
   di `.bottone-primario`, stessa altezza: `.bottone` (a tutta larghezza)
   resta per la pagina di accesso e non va toccato. */
.bottone-contorno {
    display: inline-block;
    padding: calc(0.7rem - 2px) 1.1rem;
    border: 2px solid #c4d3e3;
    border-radius: var(--raggio-piccolo);
    background: var(--superficie);
    color: var(--blu);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.bottone-contorno:hover, .bottone-contorno:focus-visible { border-color: var(--blu); background: #f0f7ff; }
.bottone-grande { padding: 0.85rem 1.6rem; font-size: 1.05rem; }

/* Barra delle azioni: resta in vista in fondo alla finestra, così su una
   sezione lunga non si scorre fino in fondo per salvare. */
.barra-azioni {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    /* Sborda fino ai bordi della scheda bianca (.contenuto 1.75rem +
       .contenitore 1.5rem) e ne chiude il fondo con gli stessi angoli. */
    margin: 1.2rem calc(-1 * (var(--gutter-contenitore) + var(--gutter-scheda))) -2.35rem;
    padding: 0.8rem calc(var(--gutter-contenitore) + var(--gutter-scheda));
    background: var(--superficie);
    border-top: 1px solid var(--linea);
    border-radius: 0 0 var(--raggio) var(--raggio);
    box-shadow: 0 -6px 18px rgba(23, 50, 77, 0.06);
}
.barra-azioni-sinistra, .barra-azioni-destra { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.barra-azioni-destra { margin-left: auto; }
.barra-azioni-nota { color: var(--ink-3); font-size: 0.85rem; max-width: 28rem; text-align: right; }
@media (max-width: 640px) {
    .barra-azioni { padding-top: 0.6rem; padding-bottom: 0.6rem; gap: 0.4rem; }
    .barra-azioni-sinistra, .barra-azioni-destra { width: 100%; gap: 0.4rem; }
    .barra-azioni-nota { text-align: left; max-width: none; }
    .barra-azioni .bottone-contorno,
    .barra-azioni .bottone-primario { flex: 1; text-align: center; padding-left: 0.6rem; padding-right: 0.6rem; font-size: 0.95rem; }
}

/* Blocco di avvio nella scheda impresa: l'azione principale della pagina
   sta con lo stato dell'intervista, e "riprendi" si distingue da "avvia". */
.avvio-intervista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1.5rem;
    padding: 1rem 1.3rem;
    margin: 1rem 0;
    background: #eef4fb;
    border: 1px solid #c9dcf1;
    border-left: 4px solid var(--blu);
    border-radius: var(--raggio);
}
.avvio-intervista-ripresa { background: var(--ambra-tenue); border-color: #f0d9b8; border-left-color: var(--ambra); }
.avvio-intervista-testo { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 18rem; }
.avvio-intervista-testo strong { color: var(--ink-1); }
.avvio-intervista-testo span { color: var(--ink-2); font-size: 0.92rem; }

.riepilogo-risposte dt { color: var(--ink-2); font-size: 0.9rem; margin-top: 0.6rem; }
.riepilogo-risposte dd { margin: 0.1rem 0 0; font-weight: 600; }
.elenco-mancanti { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* Barre di distribuzione delle risposte (/analisi): niente grafico per
   quaranta domande, una barra per opzione si legge meglio e senza script. */
.barre-risposte { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.barre-risposte li {
    display: grid;
    grid-template-columns: minmax(8rem, 22rem) 1fr auto;
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 0.3rem;
    font-size: 0.92rem;
}
.barra-traccia {
    display: block;
    width: 100%;
    min-width: 6rem;
    background: var(--grigio-tenue-bg);
    border-radius: 999px;
    height: 0.7rem;
}
.barra-riempimento { display: block; height: 100%; background: var(--blu); border-radius: 999px; }
.barra-valore { color: var(--ink-2); white-space: nowrap; }
@media (max-width: 720px) {
    .barre-risposte li { grid-template-columns: 1fr auto; }
    .barra-traccia { grid-column: 1 / -1; }
}
.elenco-osservazioni { list-style: none; padding: 0; }
.elenco-osservazioni li {
    background: var(--superficie);
    border-left: 3px solid var(--linea);
    border-radius: var(--raggio-piccolo);
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.4rem;
}