/* Catalogo Formativo 2026 — foglio di stile dell'applicazione.
   Stessa impostazione estetica dell'app Gestione Precari (testata fotografica
   compattabile, menu laterale, piè di pagina istituzionale) e linguaggio
   visivo del Design System Italia, ma senza alcuna dipendenza esterna: niente
   Bootstrap Italia da CDN, niente Google Fonts. Il font Titillium Web (licenza
   SIL OFL, assets/fonts/OFL.txt) e le icone (Bootstrap Icons, MIT,
   assets/img/icone.svg) sono serviti dall'app stessa. */

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/titillium-web-v10-latin-ext_latin-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/titillium-web-v10-latin-ext_latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/titillium-web-v10-latin-ext_latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/titillium-web-v10-latin-ext_latin-700.woff2') format('woff2');
}

: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-pagina: #f0f4f8;
    --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: 'Titillium Web', -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-pagina);
    /* Piè di pagina sempre in fondo, anche con poco contenuto. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > .area-contenuto { flex: 1 0 auto; }
/* I campi dei form ereditano il font dell'app (i browser li escludono). */
button, input, select, textarea { font-family: inherit; }

.contenitore {
    width: 100%;
    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 (come Gestione Precari) --- */
/* Contenitore largo per testata e piè di pagina: stessa misura (1280px)
   dell'app Gestione Precari, così le due applicazioni si sovrappongono. */
.contenitore-largo {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}
.testata {
    position: sticky;
    top: 0;
    z-index: 100;
}
.intestazione-slim {
    background: var(--blu-scuro);
    color: #fff;
    font-size: 0.82rem;
}
.intestazione-slim .contenitore-largo {
    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; }
.intestazione-slim .slim-destra { font-weight: 600; white-space: nowrap; }

/* 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 (classe aggiunta da catalogo-layout.js) */
.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; }

/* --- Menu laterale --- */
.guscio { display: flex; align-items: stretch; width: 100%; flex: 1 0 auto; }
.guscio-contenuto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.guscio-contenuto > .area-contenuto { flex: 1 0 auto; padding: 28px 32px 40px; }
@media (max-width: 768px) {
    .guscio-contenuto > .area-contenuto { padding: 20px 0 32px; }
}
/* Sfondo: la stessa fotografia istituzionale della pagina di accesso
   (headerb.jpg), ancorata al viewport perché la scala resti identica a
   quella dell'accesso qualunque sia l'altezza della colonna. */
.menu-laterale {
    width: 256px;
    flex: 0 0 256px;
    color: #fff;
    background:
        url('../img/headerb.jpg') left top / cover no-repeat fixed,
        var(--blu-notte);
}
.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; }
.utente-ruolo { font-size: 0.78rem; opacity: 0.85; }
.utente-ente {
    font-size: 0.8rem;
    line-height: 1.3;
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.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; }
.menu-laterale .pallino-notifica { margin-left: auto; background: #ffc107; color: var(--ink-1); }
.menu-laterale nav a.attivo .pallino-notifica { background: #fff; }

/* Selettore del ruolo nel box utente (persone con più ruoli). */
.utente-box .selettore-ruolo-nav { flex-wrap: wrap; margin-top: 0.4rem; font-size: 0.8rem; color: #fff; }
.utente-box .selettore-ruolo-nav select { width: 100%; max-width: 100%; }

/* 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) {
    /* Su schermi stretti la testata scorre via: resta fissa solo la barra
       del menu, per non sottrarre metà della finestra al contenuto. */
    .testata { position: relative; }
    .guscio { flex-direction: column; }
    .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;
    }
    .menu-laterale.aperto {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.2s ease;
        box-shadow: 0 0 40px rgba(9, 30, 55, 0.5);
    }
}

/* --- Contenuto --- */
/* Superficie neutra: nessuna immagine dietro ai contenuti del gestionale. */
.area-contenuto {
    background: var(--sfondo-pagina);
    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 --- */
/* Hero fotografico come in Gestione Precari: headerb.jpg è il prosieguo di
   header.jpg (stessa larghezza, tagliata per l'area del corpo). Qui
   attachment:fixed è sicuro perché l'area non sta dentro un antenato
   sticky; sotto l'altezza naturale dell'immagine resta il bianco della
   sua sfumatura finale. */
.area-accesso {
    padding: 2.75rem 0 4rem;
    overflow: hidden;
    background: url('../img/headerb.jpg') top center / cover no-repeat fixed, #fff;
}
/* Le schede si allineano al contenitore della testata (1280px): i bordi
   cadono sotto lo stemma a sinistra e sotto i loghi a destra. */
.area-accesso .contenuto {
    max-width: 1280px;
    padding: 0 20px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.accesso {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
/* Presentazione del servizio: pannello chiaro velato sopra la fotografia,
   così il testo resta leggibile su qualunque zona dell'immagine. */
.accesso-testo {
    padding: 1.6rem 1.9rem;
    color: var(--ink-1);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-left: 4px solid var(--blu);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(23, 50, 77, 0.14);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.accesso-testo h1 {
    max-width: none;
    margin: 0.35rem 0 0.8rem;
    color: var(--blu);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.15;
}
.accesso-testo > p:not(.introduzione-etichetta) {
    max-width: none;
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}
.accesso-testo .nota { color: var(--ink-2); font-size: inherit; }
/* Le due vie d'ingresso — chi è già referente e chi deve accreditarsi —
   affiancate quando lo schermo lo consente, impilate altrimenti: sono
   scelte alternative, non un percorso in sequenza, e la disposizione lo
   deve rendere subito leggibile. */
.accesso-colonne {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}
.accesso > .avviso-largo { margin: 0; max-width: none; }
.accesso > .avviso-largo ~ .accesso-colonne { margin-top: 0; }
@media (min-width: 820px) {
    .accesso-colonne { grid-template-columns: 1fr 1fr; }
}
.avviso-largo { max-width: 62rem; }
.accesso-riquadro {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(23, 50, 77, 0.14);
    padding: 1.6rem 1.9rem;
    transition: box-shadow 180ms ease, border-color 180ms ease;
}
.accesso-riquadro:focus-within {
    border-color: #fff;
    box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.85),
                0 0 28px 6px rgba(115, 190, 255, 0.45);
}
@media (hover: hover) {
    .accesso-riquadro:hover {
        border-color: #fff;
        box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.85),
                    0 0 28px 6px rgba(115, 190, 255, 0.45);
    }
}
@media (prefers-reduced-motion: reduce) {
    .accesso-riquadro { transition: none; }
}
.accesso-riquadro h2 { margin-top: 0; font-size: 1.75rem; color: var(--blu); }
.accesso-riquadro h2::before { display: none; }
@media (max-width: 640px) {
    .accesso-testo { padding: 1.2rem 1.1rem; }
    .area-accesso { padding-top: 1.5rem; }
    .accesso-testo > p:not(.introduzione-etichetta) { font-size: 1rem; }
    .accesso-riquadro { padding: 1.5rem; }
    .area-accesso { padding-bottom: 2.5rem; }
}
.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);
    font-size: 0.9rem;
}
.pie-pagina .contenitore-largo { padding-top: 28px; }
.pie-principale {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.pie-marchio { display: flex; gap: 14px; align-items: flex-start; line-height: 1.45; }
.pie-marchio img { width: 46px; height: 46px; object-fit: contain; }
.pie-marchio strong { color: #fff; font-size: 1rem; }
.pie-attenuato { opacity: 0.75; font-size: 0.85rem; }
/* Collegamenti su due colonne, per non allungare il piè di pagina. */
.pie-collegamenti {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px 28px;
    justify-content: end;
    align-content: start;
    text-align: right;
}
.pie-collegamenti a { color: #fff; text-decoration: none; }
.pie-collegamenti a:hover { text-decoration: underline; }
.pie-piccolo { margin: 0; padding: 12px 0 16px; font-size: 0.8rem; opacity: 0.75; }
@media (max-width: 640px) {
    .pie-collegamenti { grid-template-columns: 1fr; justify-content: start; text-align: left; }
}

/* --- 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 { margin-top: 0; }
.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, .intestazione-loghi,
    .pie-pagina, .salta-contenuto { display: none !important; }
    .testata { position: static; }
    .intestazione { background: none !important; color: var(--ink-1) !important; box-shadow: none; min-height: 0; }
    .intestazione::before { display: none; }
    .intestazione-brand { color: var(--ink-1); }
    .guscio { display: block; }
    .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); }

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

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

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

/* =====================================================================
   Catalogo Formativo 2026 — stili propri di questa applicazione.

   Tutto quanto segue si appoggia ai token già dichiarati in `:root`
   (palette Design System Italia): nessun colore è scritto a mano qui,
   così un cambio di palette resta un'unica modifica in testa al file.
   ===================================================================== */

/* --- Fascia di avviso per l'ambiente di collaudo --------------------
   Deve essere impossibile da non vedere: registrare una candidatura di
   prova credendola vera è l'errore che questa fascia previene. */
.fascia-collaudo {
    background: var(--ambra-tenue);
    border-bottom: 2px solid var(--ambra);
    color: var(--ambra);
    font-size: 0.875rem;
    padding: 0.55rem 0;
}
/* Selettore del ruolo nella barra di navigazione (persone con più ruoli). */
.selettore-ruolo-nav { align-items: center; display: flex; gap: 0.35rem; max-width: 100%; }
.selettore-ruolo-nav select {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 1rem;
    color: inherit;
    font: inherit;
    font-weight: 700;
    max-width: 22rem;
    padding: 0.15rem 0.6rem;
}
.selettore-ruolo-nav select option { color: var(--ink-1); }
.selettore-ruolo-nav button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 1rem;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0.15rem 0.6rem;
}
.selettore-ruolo-nav select:focus-visible,
.selettore-ruolo-nav button:focus-visible { outline: 2px solid var(--superficie); outline-offset: 1px; }
.pastiglia-prova {
    background: var(--ambra-tenue);
    border: 1px solid var(--ambra);
    border-radius: 1rem;
    color: var(--ambra);
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.4rem;
    padding: 0 0.5rem;
    white-space: nowrap;
}
.fascia-collaudo code {
    background: rgba(163, 95, 0, 0.12);
    border-radius: 3px;
    padding: 0 0.25rem;
}

/* --- Barra di stato della selezione (in cima al catalogo) ---------- */
.barra-stato-scelte {
    align-items: center;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--blu);
    border-radius: var(--raggio-piccolo, 6px);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 0.85rem 1.1rem;
}

/* --- Campi di modulo (filtri e form) ------------------------------- */
.filtri { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 12rem; }
.campo label { color: var(--ink-2); font-size: 0.85rem; font-weight: 600; }
.campo input,
.campo select,
.campo textarea {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo, 6px);
    color: var(--ink-1);
    font: inherit;
    padding: 0.5rem 0.65rem;
}
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
    outline: 2px solid var(--blu);
    outline-offset: 1px;
}
.campo-azione { flex-direction: row; gap: 0.5rem; min-width: 0; }
/* Nel riordino l'etichetta è lunga e la tendina corta: affiancarle tiene
   insieme «quale attività» e «in che posizione», che letti su due righe
   distinte si perdono di vista. */
.campo-inline {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr auto;
    padding: 0.4rem 0;
}
.campo-inline select { min-width: 4.5rem; }
.campo-spunta { align-items: flex-start; flex-direction: row; gap: 0.6rem; min-width: 0; }
.campo-spunta label { font-weight: 400; }
/* Segnala una posizione assegnata due volte: il server rifiuta comunque
   l'invio, questo evita di scoprirlo solo dopo un ricaricamento. */
.campo-errore { border-color: var(--rosso) !important; background: var(--rosso-tenue); }

.modulo { display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; }
.modulo-ordine fieldset {
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo, 6px);
    margin: 1.5rem 0 1rem;
    padding: 1rem 1.2rem;
}
.modulo-ordine legend { color: var(--ink-1); font-weight: 700; padding: 0 0.4rem; }
.modulo-conferma { display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; }

/* --- Esiti positivi ------------------------------------------------ */
.avviso-successo {
    background: var(--verde-tenue);
    border-left: 4px solid var(--verde);
    color: var(--verde);
}
.avviso-successo a { color: inherit; }

/* --- Pulsanti aggiuntivi ------------------------------------------- */
.bottone-conferma { background: var(--verde); }
.bottone-conferma:hover, .bottone-conferma:focus { background: #005c3f; }
.bottone-attenzione {
    background: var(--ambra);
    border-color: var(--ambra);
    color: var(--superficie);
}
.bottone-attenzione:hover, .bottone-attenzione:focus { background: #8a5000; }
.bottone-inattivo, .bottone:disabled { cursor: not-allowed; opacity: 0.5; }
.azioni { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }

/* --- Briciole di navigazione --------------------------------------- */
.briciole { color: var(--ink-3); font-size: 0.875rem; margin-bottom: 1rem; }

/* --- Catalogo: tabella delle attività -------------------------------
   Riga già in candidatura: si riconosce dal bordo, come nella griglia
   di schede che questa tabella sostituisce. */
.tabella-catalogo tbody tr.riga-scelta td:first-child { border-left: 4px solid var(--verde); }
.tabella-catalogo .cella-azione { min-width: 8rem; }
.tabella-catalogo .priorita {
    height: 1.4rem;
    width: 1.4rem;
    font-size: 0.75rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* Anteprima del corso: un box di sola lettura (nessun controllo al suo
   interno, solo testo) che si apre al passaggio del mouse sulla riga.
   Il titolo è un pulsante non per azionarlo, ma per renderlo raggiungibile
   da tastiera: portando il focus lì il box resta visibile anche senza
   mouse, invece di dipendere solo da :hover. */
.anteprima-corso { display: inline-block; }
.anteprima-corso-titolo {
    background: none;
    border: 0;
    color: var(--ink-1);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
}
.anteprima-corso-titolo:hover, .anteprima-corso-titolo:focus-visible {
    color: var(--blu);
    text-decoration: underline;
}
.anteprima-corso-box {
    background: var(--sfondo);
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo, 6px);
    display: none;
    margin-top: 0.5rem;
    max-width: 30rem;
    padding: 0.7rem 0.9rem;
}
.anteprima-corso-box .carta-descrizione { margin: 0 0 0.5rem; }
.tabella-catalogo tr.riga-attivita:hover .anteprima-corso-box,
.anteprima-corso:focus-within .anteprima-corso-box {
    display: block;
}

/* --- Catalogo: elementi condivisi fra tabella e dettaglio ------------ */
.carta-codice {
    background: var(--sfondo);
    border-radius: 3px;
    color: var(--ink-3);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 0.78rem;
    padding: 0.1rem 0.4rem;
}
.carta-stato {
    color: var(--verde);
    font-size: 0.85rem;
    font-weight: 600;
    margin: auto 0 0;
}
.carta-stato-limite { color: var(--ink-3); font-weight: 400; }

/* --- Etichette di tipologia ---------------------------------------- */
.etichetta {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.55rem;
    text-transform: uppercase;
}
.etichetta-upskilling { background: #e8f0fb; color: var(--blu-notte); }
.etichetta-reskilling { background: var(--ambra-tenue); color: var(--ambra); }

/* --- Ordine di preferenza ------------------------------------------
   Un numero in un cerchio: l'ordine di preferenza è l'informazione che
   deve leggersi per prima in ogni elenco di scelte. */
.priorita {
    align-items: center;
    background: var(--blu);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-weight: 700;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

/* --- Elenco delle scelte dell'ente --------------------------------- */
.elenco-scelte { list-style: none; margin: 0; padding: 0; }
.elenco-scelte .scelta {
    align-items: flex-start;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio, 8px);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.7rem;
    padding: 1rem 1.2rem;
}
/* Un'attività ritirata dal catalogo dopo la scelta: va vista subito,
   perché blocca la conferma finché non è sostituita. */
.scelta-non-valida { border-left: 4px solid var(--rosso); background: var(--rosso-tenue); }
.scelta-corpo { display: flex; gap: 0.9rem; align-items: flex-start; }
.scelta-titolo { font-weight: 600; margin: 0 0 0.2rem; }
.scelta-titolo a { color: var(--ink-1); text-decoration: none; }
.scelta-titolo a:hover { color: var(--blu); text-decoration: underline; }
.scelta-meta { color: var(--ink-3); font-size: 0.85rem; margin: 0; }
.scelta-note { color: var(--ink-2); font-size: 0.85rem; margin: 0.4rem 0 0; }
.scelta-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.scelta-corpo > div { min-width: 0; overflow-wrap: anywhere; }
.scelta-sede { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; width: 100%; }
.scelta-sede .campo { flex: 1 1 18rem; min-width: 0; margin: 0; }
.scelta-sede select { width: 100%; max-width: 100%; }
.scheda-valore.scheda-stato { font-size: 1.25rem; line-height: 1.4; }
.tabella-scorrevole { max-width: 100%; overflow-x: auto; }
.percorso-candidatura { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.percorso-candidatura li { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 13rem; padding: 0.8rem; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--superficie); color: var(--ink-2); }
.percorso-candidatura .percorso-corrente { border-color: var(--blu); background: #edf4fc; color: var(--ink-1); font-weight: 700; }
.percorso-numero { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.75rem; height: 1.75rem; border: 1px solid currentColor; border-radius: 50%; }
@media print { .percorso-candidatura { display: none; } }

/* --- Schede a coppie etichetta/valore ------------------------------ */
.dati-scheda {
    display: grid;
    gap: 0.9rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin: 0;
}
.dati-scheda dt {
    color: var(--ink-3);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.dati-scheda dd { color: var(--ink-1); font-weight: 600; margin: 0.15rem 0 0; }

.elenco-semplice { color: var(--ink-2); margin: 0; padding-left: 1.2rem; }
.elenco-semplice li { margin-bottom: 0.3rem; }

/* --- Sezione che dispone un atto revocabile ------------------------ */
.sezione-attenzione {
    background: var(--ambra-tenue);
    border-left: 4px solid var(--ambra);
    border-radius: var(--raggio-piccolo, 6px);
    padding: 1.2rem 1.4rem;
}

/* --- Stati delle candidature --------------------------------------- */
.stato-confermata { background: var(--verde-tenue); color: var(--verde); }
.stato-in_corso { background: var(--ambra-tenue); color: var(--ambra); }
.stato-non_avviata { background: var(--sfondo); color: var(--ink-3); }

/* --- Grafici -------------------------------------------------------
   Altezza fissa e non aspect-ratio: con poche aree il grafico resterebbe
   altrimenti altissimo su schermo largo. */
.contenitore-grafico { height: 20rem; margin-bottom: 1.5rem; position: relative; }

/* --- Versione stampabile -------------------------------------------
   La pagina di stampa non passa dal layout: qui si dà da sola sfondo e
   margini, e si tolgono gli ornamenti che su carta sono rumore. */
.pagina-stampa { background: #fff; color: #000; }
.pagina-stampa .contenuto { max-width: 48rem; padding: 2rem 1.5rem; }
.stampa-intestazione {
    align-items: center;
    border-bottom: 2px solid var(--linea);
    display: flex;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}
.stampa-intestazione img { height: 3.2rem; width: auto; }
.stampa-ente { font-weight: 700; margin: 0; }
.stampa-programma { color: var(--ink-2); font-size: 0.85rem; margin: 0.2rem 0 0; }
.stampa-firma { margin-top: 3.5rem; }
@media print {
    .pagina-stampa .avviso { border: 1px solid #000; }
    .pagina-stampa a { color: #000; text-decoration: none; }
    .solo-schermo { display: none; }
}

/* --- Candidatura unica ----------------------------------------------- */
.elenco-verifiche { list-style: none; margin: 0 0 1rem; padding: 0; }
.elenco-verifiche li { border-left: 4px solid var(--linea); margin-bottom: 0.4rem; padding: 0.35rem 0.75rem; }
.elenco-verifiche .verifica-ko { background: #fdf0ef; border-left-color: #a3271f; }
.elenco-verifiche .verifica-ok { background: #eef7f2; border-left-color: #00734f; }
.griglia-ore { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.firma-valida { color: #00734f; font-weight: 700; }
.firma-non_valida, .firma-assente { color: #a3271f; font-weight: 700; }
.modulo-documento { align-items: end; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.modulo-documento input[type="file"] { max-width: 100%; }
.qualifica-scheda { border: 1px solid var(--linea); border-radius: 4px; margin-bottom: 1rem; padding: 1rem 1.2rem; }
.qualifica-scheda h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.qualifica-meta { color: var(--ink-2); font-size: 0.9rem; margin: 0 0 0.6rem; }

/* --- Scheda del Repertorio regionale (trascritta dal PDF) ------------- */
.scheda-repertorio h3 { margin-top: 1.8rem; }
.profilo-repertorio { margin: 0; }
.profilo-repertorio > div {
    border-bottom: 1px solid var(--linea);
    display: grid;
    gap: 0.2rem 1.5rem;
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    padding: 0.55rem 0;
}
.profilo-repertorio dt { color: var(--ink-2); font-size: 0.9rem; font-weight: 600; }
.profilo-repertorio dd { color: var(--ink-1); margin: 0; }
.competenza-repertorio {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: 4px;
    margin: 1rem 0;
    padding: 1rem 1.2rem;
}
.competenza-repertorio h4 { align-items: baseline; display: flex; font-size: 1.05rem; gap: 0.6rem; margin: 0 0 0.8rem; }
.dati-competenza { margin: 0 0 1rem; }
.dati-competenza > div { margin-bottom: 0.5rem; }
.dati-competenza dt { color: var(--ink-2); font-size: 0.85rem; font-weight: 600; }
.dati-competenza dd { margin: 0.1rem 0 0; }
.colonne-competenza { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.colonne-competenza h5 { font-size: 0.95rem; margin: 0 0 0.5rem; }

@media (max-width: 720px) {
    .profilo-repertorio > div { grid-template-columns: 1fr; }
    .barra-stato-scelte { flex-direction: column; align-items: flex-start; }
    .campo { min-width: 100%; }
    .elenco-scelte .scelta { flex-direction: column; }
}

/* =====================================================================
   Auto-accreditamento SPID-first: combobox di selezione ente, modulo di
   richiesta, checklist delle sedi, istruttoria amministrativa.
   ===================================================================== */

/* --- Combobox ricercabile (pattern WAI-ARIA, home page) ------------- */
.combobox { position: relative; margin-bottom: 0.8rem; }
.campo-etichetta {
    display: block;
    color: var(--ink-2);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.campo-testo {
    width: 100%;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo, 6px);
    color: var(--ink-1);
    font: inherit;
    padding: 0.6rem 0.75rem;
}
.campo-testo:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }
.combobox-lista {
    display: none;
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 0.2rem 0 0;
    padding: 0.3rem 0;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo, 6px);
    box-shadow: var(--ombra-alta);
    list-style: none;
}
.combobox-lista.aperta { display: block; }
.combobox-lista li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.92rem;
}
.combobox-lista li:hover,
.combobox-lista li[aria-selected="true"] { background: var(--sfondo); }
.combobox-piva {
    color: var(--ink-2);
    font-size: 0.8rem;
}
.combobox-contatore { min-height: 1.1rem; margin-top: 0.25rem; }

/* --- Modulo di accreditamento ---------------------------------------- */
.modulo-accreditamento { display: flex; flex-direction: column; gap: 1.4rem; max-width: 54rem; }
.accreditamento-contatti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.accreditamento-ente, .accreditamento-identita-nota { grid-column: 1 / -1; }
.accreditamento-identita-nota { margin: -0.35rem 0 0; }
.campo-identita input[readonly] { background: var(--sfondo); color: var(--ink-1); cursor: default; }
.accreditamento-documenti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.accreditamento-documenti [hidden] { display: none; }
.modulo-accreditamento .campo { min-width: 0; }
.modulo-accreditamento input[type="file"] { width: 100%; min-width: 0; font: inherit; padding: 0.6rem; border: 1px solid var(--linea); border-radius: var(--raggio-piccolo); }
.accreditamento-azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.accreditamento-azioni .bottone { width: auto; margin: 0; }
@media (max-width: 720px) {
    .accreditamento-contatti, .accreditamento-documenti { grid-template-columns: 1fr; }
}
.obbligatorio { color: var(--rosso); }
.modulo-sezione {
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo, 6px);
    padding: 1rem 1.2rem;
    margin: 0;
}
.modulo-sezione legend { font-weight: 700; color: var(--ink-1); padding: 0 0.4rem; }
.campo-radio, .campo-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
}
.campo-radio label, .campo-checkbox label { font-weight: 400; }
.campo-avviso { color: var(--rosso); font-size: 0.85rem; margin-top: 0.3rem; }
.lista-sedi-checkbox {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.2rem 1rem;
    margin-top: 0.6rem;
}

/* --- Istruttoria accreditamenti --------------------------------------- */
.azioni-decisione {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
.modulo-respingi { display: flex; gap: 0.5rem; }
.modulo-respingi input[type="text"] {
    border: 1px solid var(--linea);
    border-radius: var(--raggio-piccolo, 6px);
    font: inherit;
    padding: 0.5rem 0.7rem;
    min-width: 18rem;
}

/* --- Pallino di notifica sulla voce di menu --------------------------- */
.pallino-notifica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    margin-left: 0.35rem;
    background: var(--rosso);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 720px) {
    .lista-sedi-checkbox { grid-template-columns: 1fr; }
    .azioni-decisione { flex-direction: column; }
}