/* ══════════════════════════════════════════════════════════════════
   LAYOUT DEL PORTALE: header, footer e larghezza del contenuto
   Stessa palette e tipografia delle pagine (elenco, dettaglio,
   notifiche, home). Solo aspetto: struttura, menu e script invariati.
   Caricato dopo base.css nei layout _Layout e _LayoutWOutJQ.
   ══════════════════════════════════════════════════════════════════ */
:root {
    /* Un solo blu primario in tutto il portale: allinea anche le variabili di base.css
       (prima #02509A, usato da pulsanti e testi blu) al blu delle pagine. */
    --primary: #0066CC;
    --primary-dark: #004D99;
    --primary-hover: #004D99;
    --portale-primario: #0066CC;
    --portale-primario-scuro: #004D99;
    --portale-notte: #17324D;
    --portale-notte-scuro: #0F2438;
    --portale-testo-chiaro: #C9D8E8;
    --portale-errore: #C02840;
}

/* ── Larghezza comune: header, contenuto e footer allineati ──────── */
@media (min-width: 1200px) {
    .it-header-wrapper .container,
    .portale-contenuto,
    .portale-footer .container {
        max-width: min(95%, 1600px) !important;
    }
}

.it-header-wrapper,
.portale-footer {
    font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
}

/* ── Fascia superiore (ente e area personale) ────────────────────── */
.it-header-wrapper .it-header-slim-wrapper {
    background-color: var(--portale-notte) !important;
    border-bottom: 0;
    padding: .25rem 0;
}

    .it-header-wrapper .it-header-slim-wrapper .navbar-brand {
        font-size: .9rem;
        font-weight: 600;
        letter-spacing: .01em;
    }

    .it-header-wrapper .it-header-slim-wrapper .btn-icon {
        font-size: .9rem;
        font-weight: 600;
    }

/* ── Fascia centrale (marchio e notifiche): un solo blu, senza sfumature ── */
.it-header-wrapper .it-header-center-wrapper {
    background: var(--portale-primario) !important;
    height: auto;
    padding: .9rem 0;
}

    .it-header-wrapper .it-header-center-wrapper .it-header-center-content-wrapper {
        height: auto;
        min-height: 0;
        padding: 0;
    }

    .it-header-wrapper .it-header-center-wrapper a img {
        max-height: 56px !important;
        border-radius: 8px;
        margin-right: 1rem;
    }

.it-header-wrapper .it-brand-text h2 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
}

.it-header-wrapper .it-brand-text h3 {
    font-size: .95rem;
    font-weight: 400;
    opacity: .9;
    margin-top: .1rem;
}

/* Pulsante Notifiche: bianco con testo blu e contatore rosso */
.it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff !important;
    color: var(--portale-primario) !important;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    padding: .5rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .15s;
}

    .it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche:hover {
        background: #F0F6FC !important;
    }

    .it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

    .it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche .icon {
        width: 1.25rem;
        height: 1.25rem;
        fill: var(--portale-primario);
    }

.it-header-wrapper #badgeNotifiche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #C02840; /* contatori ovunque in rosso (notifiche, richieste, home): stesso colore in tutto il portale */
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

/* ── Barra di navigazione: stesso blu della fascia, separata da una linea ── */
.it-header-wrapper .it-header-navbar-wrapper {
    background-color: var(--portale-primario) !important;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

@media (min-width: 992px) {
    .it-header-wrapper .it-header-navbar-wrapper .navbar {
        padding: 0;
    }

    .it-header-wrapper .it-header-navbar-wrapper .navbar-nav .nav-link {
        position: relative;
        padding: .7rem 1.1rem !important;
        border-radius: 0 !important;
        font-size: 1rem;
        font-weight: 600;
        background: transparent !important;
    }

        .it-header-wrapper .it-header-navbar-wrapper .navbar-nav .nav-link:hover {
            background: rgba(255, 255, 255, .12) !important;
        }

    /* Voce della pagina corrente: barra bianca sotto */
    .it-header-wrapper .it-header-navbar-wrapper .navbar-nav .nav-item.active .nav-link::after {
        content: "";
        position: absolute;
        left: 1.1rem;
        right: 1.1rem;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: #fff;
    }
}

/* Mobile: header compatto, menu laterale chiaro con voci leggibili */
@media (max-width: 991.98px) {
    .it-header-wrapper .it-header-center-wrapper {
        padding: .6rem 0;
    }

    .it-header-wrapper .it-header-center-wrapper a img {
        max-height: 40px !important;
        margin-right: .6rem;
    }

    .it-header-wrapper .it-brand-text h2 {
        font-size: 1rem;
    }

    .it-header-wrapper .it-brand-text h3 {
        font-size: .8rem;
    }

    /* Sul telefono il pulsante mostra solo icona e contatore */
    .it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche {
        padding: .45rem .6rem;
    }

        .it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche .portale-notifiche-testo {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

    .it-header-wrapper .navbar-collapsable .menu-wrapper .nav-link {
        color: var(--portale-notte) !important;
        font-weight: 600;
    }

    .it-header-wrapper .navbar-collapsable .menu-wrapper .nav-item.active .nav-link {
        color: var(--portale-primario) !important;
        border-left: 3px solid var(--portale-primario);
        background: #F0F6FC !important;
    }
}
/* ── Footer ──────────────────────────────────────────────────────── */
.portale-footer #footer-bg {
    background: var(--portale-notte) !important;
    color: #fff !important;
    padding: 2.25rem 0 1.75rem;
}

.portale-footer-griglia {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
}

.portale-footer-marchio {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff !important;
    margin: 0 0 .4rem;
}

.portale-footer-descrizione {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--portale-testo-chiaro);
    margin: 0;
    max-width: 30rem;
}

.portale-footer-pill {
    display: inline-block;
    margin-top: .9rem;
    padding: .2rem .8rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
}

.portale-footer-titolo {
    font-size: .8rem !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--portale-testo-chiaro) !important;
    margin: 0 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.portale-footer-link {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .portale-footer-link li {
        margin-bottom: .45rem;
    }

#footer-bg .portale-footer-link a {
    color: #fff !important;
    font-weight: 400;
    font-size: .95rem;
    text-decoration: none;
}

    #footer-bg .portale-footer-link a:hover,
    #footer-bg .portale-footer-link a:focus {
        color: #fff !important;
        text-decoration: underline;
    }

.portale-footer .portale-footer-fondo {
    background: var(--portale-notte-scuro) !important;
    color: var(--portale-testo-chiaro);
    font-size: .85rem;
    padding: .8rem 0;
}

    .portale-footer .portale-footer-fondo a {
        color: #fff;
        font-weight: 600;
        text-decoration: none;
    }

        .portale-footer .portale-footer-fondo a:hover {
            text-decoration: underline;
        }

@media (max-width: 767.98px) {
    .portale-footer #footer-bg {
        padding: 1.75rem 0 1.25rem;
    }

    .portale-footer-griglia {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .portale-footer-intro {
        grid-column: 1 / -1;
    }

    .portale-footer .portale-footer-fondo {
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════════
   INTESTAZIONE DI PAGINA (vista parziale _IntestazionePagina)
   Stesso percorso, titolo e sottotitolo in tutte le pagine.
   ══════════════════════════════════════════════════════════════════ */
.pagina-percorso.breadcrumb-container,
main .breadcrumb-container {
    font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 1rem 0 .25rem;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

main .breadcrumb-container .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: .9rem;
    flex-wrap: wrap;
}

main .breadcrumb-container .breadcrumb-item,
main .breadcrumb-container .breadcrumb-item a {
    color: #5C6F82;
}

    main .breadcrumb-container .breadcrumb-item a {
        color: var(--portale-primario);
        font-weight: 600;
        text-decoration: none;
    }

        main .breadcrumb-container .breadcrumb-item a:hover {
            text-decoration: underline;
        }

    main .breadcrumb-container .breadcrumb-item.active {
        color: #33485C;
        font-weight: 400;
    }

    /* Separatore scritto nel markup: niente separatore automatico di Bootstrap */
    main .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
        display: none;
    }

    main .breadcrumb-container .breadcrumb-item .separator {
        color: #A0AEBB;
        margin: 0 .4rem;
    }

.pagina-intestazione {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
    margin: .5rem 0 1.5rem;
}

.pagina-intestazione-testi {
    flex: 1 1 24rem;
    min-width: 0;
}

.pagina-titolo {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--portale-notte) !important;
    margin: 0 0 .35rem;
}

.pagina-sottotitolo {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #5C6F82;
    margin: 0;
    max-width: 52rem;
}

/* Contenuto in linea dopo il sottotitolo (es. badge del regime amministrativo). */
.pagina-sottotitolo-extra {
    display: inline-block;
    margin-left: .5rem;
    vertical-align: .1em;
}

.regime-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .65rem;
    border-radius: 999px;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1.5;
    white-space: nowrap;
    cursor: help;
}

.pagina-etichetta {
    display: inline-flex;
    align-items: center;
    margin-bottom: .5rem;
    padding: .15rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: #F0F6FC;
    color: var(--portale-primario);
}

.pagina-etichetta-errore { background: #FCEBEE; color: #C02840; }
.pagina-etichetta-attenzione { background: #FFF4E5; color: #A66300; }
.pagina-etichetta-successo { background: #E6F4EF; color: #008055; }

.pagina-intestazione-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

@media (max-width: 767.98px) {
    .pagina-percorso.breadcrumb-container,
    main .breadcrumb-container {
        padding-top: .75rem;
    }

    .pagina-titolo {
        font-size: 1.5rem;
    }

    .pagina-sottotitolo {
        font-size: .95rem;
    }

    .pagina-intestazione {
        margin-bottom: 1.1rem;
    }

    .pagina-intestazione-azioni {
        width: 100%;
    }
}

/* ── Riquadro generico delle pagine informative ──────────────────── */
.pagina-card {
    background: #fff;
    border: 1px solid #D9E1EA;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(23, 50, 77, .06), 0 4px 14px rgba(23, 50, 77, .07);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
    color: #33485C;
}

    .pagina-card h2 {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--portale-notte);
        margin: 0 0 .9rem;
    }

        .pagina-card h2 .icon {
            fill: var(--portale-primario);
            flex-shrink: 0;
        }

    .pagina-card p:last-child {
        margin-bottom: 0;
    }

.pagina-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem;
}

    .pagina-griglia > .pagina-card {
        margin-bottom: 0;
    }

@media (max-width: 767.98px) {
    .pagina-card {
        padding: 1.25rem;
    }

    .pagina-griglia {
        grid-template-columns: 1fr;
    }
}

/* ── Contatti ────────────────────────────────────────────────────── */
.contatto-valore {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--portale-notte);
    text-decoration: none;
}

a.contatto-valore:hover {
    color: var(--portale-primario);
    text-decoration: underline;
}

.contatto-nota {
    display: block;
    font-size: .9rem;
    color: #5C6F82;
    margin-top: .2rem;
}

/* ── Guida (domande frequenti) ───────────────────────────────────── */
.guida-domanda {
    border: 1px solid #D9E1EA;
    border-radius: 12px;
    margin-bottom: .75rem;
    background: #fff;
}

    .guida-domanda summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.25rem;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--portale-notte);
        cursor: pointer;
        list-style: none;
    }

        .guida-domanda summary::-webkit-details-marker {
            display: none;
        }

        .guida-domanda summary::after {
            content: "+";
            flex-shrink: 0;
            font-size: 1.4rem;
            font-weight: 400;
            line-height: 1;
            color: var(--portale-primario);
        }

    .guida-domanda[open] summary::after {
        content: "−";
    }

    .guida-domanda summary:focus-visible {
        outline: 3px solid var(--portale-primario);
        outline-offset: 2px;
        border-radius: 12px;
    }

.guida-risposta {
    padding: 0 1.25rem 1.1rem;
    font-size: .98rem;
    line-height: 1.6;
    /* Testo a tutta larghezza del riquadro (prima 75 caratteri: andava a capo a metà) */
}

    .guida-risposta p:last-child,
    .guida-risposta ul:last-child,
    .guida-risposta ol:last-child {
        margin-bottom: 0;
    }

/* ── Mappa del sito ──────────────────────────────────────────────── */
.mappa-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .mappa-elenco li {
        padding: .45rem 0;
        border-bottom: 1px solid #EEF2F6;
    }

        .mappa-elenco li:last-child {
            border-bottom: 0;
        }

    .mappa-elenco a {
        color: var(--portale-primario);
        font-weight: 600;
        text-decoration: none;
    }

        .mappa-elenco a:hover {
            text-decoration: underline;
        }

    .mappa-elenco small {
        display: block;
        color: #5C6F82;
    }

/* ══════════════════════════════════════════════════════════════════
   PAGINE DI ERRORE
   ══════════════════════════════════════════════════════════════════ */
.pagina-errore {
    max-width: 760px;
    margin: 1.5rem auto 3rem;
    text-align: center;
    border-top: 6px solid #C02840;
    padding: 2.25rem 1.75rem 2rem;
}

.pagina-errore-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: #FCEBEE;
    color: #C02840;
    margin-bottom: 1.25rem;
}

    .pagina-errore-icona .icon {
        width: 2.4rem;
        height: 2.4rem;
        fill: currentColor;
    }

.pagina-errore-avviso {
    border-top-color: #A66300;
}

    .pagina-errore-avviso .pagina-errore-icona {
        background: #FFF4E5;
        color: #A66300;
    }

.pagina-errore h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--portale-notte) !important;
    margin: 0 0 .6rem;
}

.pagina-errore-testo {
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 36rem;
    margin: 0 auto;
}

.pagina-errore-assistenza {
    background: #F5F7FA;
    border-radius: 12px;
    padding: .9rem 1.1rem;
    margin: 1.25rem auto 0;
    max-width: 36rem;
    font-size: .95rem;
}

.pagina-errore-codice {
    display: block;
    margin-top: .4rem;
    font-size: .85rem;
    color: #5C6F82;
}

    .pagina-errore-codice code {
        font-family: "Roboto Mono", Consolas, monospace;
        color: #33485C;
        word-break: break-all;
    }

.pagina-errore-azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

    .pagina-errore-azioni .btn {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        border-radius: 8px;
    }

@media (max-width: 767.98px) {
    .pagina-errore {
        margin-top: 1rem;
        padding: 1.75rem 1.25rem 1.5rem;
    }

        .pagina-errore h1 {
            font-size: 1.4rem;
        }

    .pagina-errore-azioni .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════════
   BANNER COOKIE
   ══════════════════════════════════════════════════════════════════ */
.portale-cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: var(--portale-notte);
    color: #fff;
    font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
    box-shadow: 0 -4px 18px rgba(15, 36, 56, .25);
    padding: 1rem 0;
}

.portale-cookie-contenuto {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
}

.portale-cookie-icona {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    fill: #fff;
}

.portale-cookie-testo {
    flex: 1;
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
}

    .portale-cookie-testo a {
        color: #fff;
        font-weight: 700;
        text-decoration: underline;
        white-space: nowrap;
    }

.portale-cookie-azioni {
    display: flex;
    flex-shrink: 0;
    gap: .5rem;
}

    .portale-cookie-azioni .btn {
        min-width: 7rem;
        border-radius: 8px;
        font-weight: 600;
    }

    .portale-cookie-azioni .btn-light {
        background: #fff !important;
        border-color: #fff !important;
        color: var(--portale-primario) !important;
    }

@media (max-width: 767.98px) {
    .portale-cookie-contenuto {
        flex-wrap: wrap;
    }

    .portale-cookie-icona {
        display: none;
    }

    .portale-cookie-testo {
        flex-basis: 100%;
        font-size: .9rem;
    }

    .portale-cookie-azioni {
        width: 100%;
    }

        .portale-cookie-azioni .btn {
            flex: 1;
        }
}
/* ── Pagine di solo testo (accessibilità, privacy, cookie) ───────── */
.pagina-testo {
    font-size: 1rem;
    line-height: 1.65;
}

    .pagina-testo h2,
    .pagina-testo h3 {
        font-size: 1.15rem;
        margin-top: 1.5rem;
    }

    .pagina-testo a {
        color: var(--portale-primario);
        font-weight: 600;
        word-break: break-word;
    }

    .pagina-testo table {
        max-width: 100%;
        display: block;
        overflow-x: auto;
    }
/* Contenitori annidati nel contenuto: stessa larghezza del contenuto, così
   titoli, schede e stepper restano allineati a header e footer. */
.portale-contenuto .container {
    max-width: none !important;
    padding-left: 0;
    padding-right: 0;
}
/* Allineamento al bordo del contenuto: nome dell'ente e prima voce del menu */
.it-header-wrapper .it-header-slim-wrapper .navbar-brand {
    padding-left: 0;
}

@media (min-width: 992px) {
    .it-header-wrapper .it-header-navbar-wrapper .navbar-nav {
        margin-left: -1.1rem;
    }
}
/* Mobile: spazio per il pulsante del menu (hamburger) accanto al marchio */
@media (max-width: 991.98px) {
    .it-header-wrapper .it-header-center-wrapper .it-header-center-content-wrapper {
        padding-left: 3rem;
    }
}

/* Telefono: margini laterali di 16px, uguali per header, contenuto e footer */
@media (max-width: 575.98px) {
    .it-header-wrapper .container,
    .portale-contenuto,
    .portale-footer .container,
    .portale-cookie .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
/* Logo del portale (SUAP / SUE Sportello Unico Digitale) su tessera bianca nell'header blu */
.it-header-wrapper .it-header-center-wrapper a img.portale-logo {
    width: auto;
    height: 64px;
    max-width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 6px 12px;
    object-fit: contain;
}

/* Nome dell'ente accanto al logo, grande come da modello AGID (titolo del sito) */
.it-header-wrapper .it-brand-text h3.portale-nome-ente {
    color: #fff !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    letter-spacing: 0;
}

@media (max-width: 991.98px) {
    .it-header-wrapper .it-header-center-wrapper a img.portale-logo {
        height: 44px;
        border-radius: 9px;
        padding: 4px 8px;
    }

    .it-header-wrapper .it-brand-text h3.portale-nome-ente {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 575.98px) {
    .it-header-wrapper .it-header-center-wrapper a img.portale-logo {
        height: 38px;
    }

    .it-header-wrapper .it-brand-text h3.portale-nome-ente {
        font-size: 1rem !important;
    }
}/* Marchio e testo del portale: titolo e nome dell'ente ben separati */
.it-header-wrapper .it-brand-wrapper > a {
    gap: 1rem;
}

    .it-header-wrapper .it-brand-wrapper > a img {
        margin-right: 0 !important;
    }

.it-header-wrapper .it-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
}

    .it-header-wrapper .it-brand-text h2 {
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .it-header-wrapper .it-brand-text h3 {
        line-height: 1.2 !important;
        margin: 0 !important;
    }

@media (max-width: 991.98px) {
    .it-header-wrapper .it-brand-wrapper > a {
        gap: .65rem;
    }

    .it-header-wrapper .it-brand-text {
        gap: .15rem;
    }
}
/* Logo originale "SUAP • SUE Digitalizzazione" (ritagliato, sfondo trasparente) con
   titolo del sito e, sotto, il nome dell'ente. */
/* Allineamento tipografico: le due righe del logo ("SUAP • SUE" e "DIGITALIZZAZIONE")
   stanno sulla stessa linea di base del titolo e del nome dell'ente. Il PNG è ritagliato
   al pixel, quindi il bordo sinistro del simbolo coincide con quello del menu e dei
   contenuti. Le misure dipendono dall'altezza del logo: se la si cambia, va ricalcolato
   il margin-top del testo. */
.it-header-wrapper .it-brand-wrapper > a:has(> img.portale-logo-originale) {
    align-items: flex-start !important;
    /* Respiro tra logo e titolo: il logo contiene già del testo, attaccati sembravano
       un'unica scritta. */
    gap: 2rem;
}

@media (max-width: 991.98px) {
    .it-header-wrapper .it-brand-wrapper > a:has(> img.portale-logo-originale) {
        gap: 1.15rem;
    }
}

@media (max-width: 575.98px) {
    .it-header-wrapper .it-brand-wrapper > a:has(> img.portale-logo-originale) {
        gap: .85rem;
    }
}

.it-header-wrapper .it-header-center-wrapper a img.portale-logo-originale {
    width: auto;
    height: 56px;
    max-height: none !important;
    max-width: none;
    flex-shrink: 0;
    border-radius: 0;
}

.it-header-wrapper a:has(> img.portale-logo-originale) .it-brand-text {
    gap: 0;
    margin-top: 8px;
    position: relative;
}

/* Separatore verticale tra il marchio del progetto (logo) e servizio + ente: senza,
   logo e titolo ripetevano "SUAP SUE" uno accanto all'altro come due titoli in
   competizione. Alto quanto il logo, a metà dello spazio che li divide. */
.it-header-wrapper a:has(> img.portale-logo-originale) .it-brand-text::before {
    content: "";
    position: absolute;
    left: calc(var(--logo-separa, 2rem) / -2);
    top: var(--logo-separa-top, -8px);
    height: var(--logo-separa-h, 56px);
    border-left: 1px solid rgba(255, 255, 255, .45);
}

.it-header-wrapper .it-brand-text h2.portale-titolo-sito {
    color: #fff !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}

.it-header-wrapper .it-brand-text h3.portale-nome-ente-sotto {
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    opacity: .92;
    margin: 0 !important;
}

@media (max-width: 991.98px) {
    .it-header-wrapper .it-header-center-wrapper a img.portale-logo-originale {
        height: 48px;
    }

    .it-header-wrapper a:has(> img.portale-logo-originale) .it-brand-text {
        margin-top: 8px;
        --logo-separa: 1.15rem;
        --logo-separa-top: -8px;
        --logo-separa-h: 48px;
    }

    .it-header-wrapper .it-brand-text h2.portale-titolo-sito {
        font-size: 1.15rem !important;
    }

    .it-header-wrapper .it-brand-text h3.portale-nome-ente-sotto {
        font-size: .85rem !important;
    }
}

@media (max-width: 575.98px) {
    .it-header-wrapper .it-header-center-wrapper a img.portale-logo-originale {
        height: 38px;
    }

    /* Con il solo nome dell'ente accanto, il testo va centrato sul logo. */
    .it-header-wrapper .it-brand-wrapper > a:has(> img.portale-logo-originale) {
        align-items: center !important;
    }

    .it-header-wrapper a:has(> img.portale-logo-originale) .it-brand-text {
        margin-top: 0;
    }

    .it-header-wrapper a:has(> img.portale-logo-originale) .it-brand-text::before {
        display: none;
    }

    /* Telefono: il titolo ripete il logo e andrebbe a capo su più righe; resta per i
       lettori di schermo, a vista restano logo e nome del Comune. */
    .it-header-wrapper .it-brand-text h2.portale-titolo-sito {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Più respiro sopra e sotto marchio e titolo */
.it-header-wrapper .it-header-center-wrapper {
    padding: 1.25rem 0 !important;
}

@media (max-width: 991.98px) {
    .it-header-wrapper .it-header-center-wrapper {
        padding: .85rem 0 !important;
    }
}
/* Allineamento: ente, marchio, menu e contenuto partono dallo stesso bordo */
.it-header-wrapper .it-header-slim-wrapper .it-header-slim-wrapper-content {
    padding-left: 0 !important;
}

.it-header-wrapper .it-header-slim-wrapper .it-header-slim-wrapper-content .navbar-brand {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

@media (min-width: 992px) {
    .it-header-wrapper .it-header-navbar-wrapper .navbar,
    .it-header-wrapper .it-header-navbar-wrapper .navbar .navbar-collapsable,
    .it-header-wrapper .it-header-navbar-wrapper .navbar .menu-wrapper {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .it-header-wrapper .it-header-navbar-wrapper .navbar .navbar-nav {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

        /* prima voce del menu a filo del bordo, con la sottolineatura allineata */
        .it-header-wrapper .it-header-navbar-wrapper .navbar .navbar-nav > li:first-child > .nav-link {
            padding-left: 0 !important;
        }

            .it-header-wrapper .it-header-navbar-wrapper .navbar .navbar-nav > li:first-child > .nav-link::after {
                left: 0 !important;
            }
}
/* Notifiche nell'header: solo campanella e contatore (la voce testuale è nel menu).
   Il testo resta per i lettori di schermo; al passaggio del mouse compare "Notifiche". */
.it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche {
    position: relative;
    width: 3rem;
    height: 3rem;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center;
}

    .it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche .portale-notifiche-testo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche .portale-campanella {
        width: 1.5rem !important;
        height: 1.5rem !important;
        fill: var(--portale-primario);
    }

    /* Contatore come bollino in alto a destra della campanella */
    .it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche #badgeNotifiche {
        position: absolute;
        top: -.2rem;
        right: -.25rem;
        border: 2px solid var(--portale-primario);
        min-width: 1.45rem;
        height: 1.45rem;
    }

@media (max-width: 991.98px) {
    .it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche {
        width: 2.5rem;
        height: 2.5rem;
    }

        .it-header-wrapper .it-right-zone .button-wrapper .btn.portale-notifiche .portale-campanella {
            width: 1.3rem !important;
            height: 1.3rem !important;
        }
}

/* ══════════════════════════════════════════════════════════════════
   FINESTRE (modali): stesso stile in tutto il portale.
   Le finestre di avviso Bootstrap Italia (.alert-modal, es. "Documentazione")
   prendono l'intestazione blu delle finestre di conferma.
   ══════════════════════════════════════════════════════════════════ */
.modal .modal-content {
    border: 0;
    border-radius: 16px !important;
    overflow: hidden;
    font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
    box-shadow: 0 10px 40px rgba(15, 36, 56, .25);
}

.modal .modal-footer .btn,
.modal .modal-body .btn {
    border-radius: 8px;
    font-weight: 600;
}

.alert-modal .modal-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--portale-primario) !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 0 !important;
}

    .alert-modal .modal-header .icon {
        fill: #fff !important;
        flex-shrink: 0;
        margin: 0 !important;
    }

    .alert-modal .modal-header .modal-title {
        color: #fff !important;
        font-size: 1.05rem !important;
        font-weight: 700;
        margin: 0;
    }

.alert-modal .modal-body {
    padding: 1.5rem !important;
    font-size: 1rem;
    color: #33485C;
}

.alert-modal .modal-footer {
    border-top: 0 !important;
    padding: 0 1.5rem 1.5rem !important;
}
/* ══════════════════════════════════════════════════════════════════
   I TUOI DATI (Account/ManageData): stesso stile delle sezioni della
   compilazione. Solo aspetto; form, campi e script invariati.
   ══════════════════════════════════════════════════════════════════ */
.dati-utente {
    padding: 0 !important;
    font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
}

    .dati-utente > .card {
        background: #fff !important;
        border: 1px solid #D9E1EA !important;
        border-radius: 16px !important;
        box-shadow: 0 1px 2px rgba(23, 50, 77, .06), 0 4px 14px rgba(23, 50, 77, .07) !important;
        margin: 0 0 2rem !important;
    }

        .dati-utente > .card::after {
            display: none !important;
        }

        .dati-utente > .card > .card-body {
            padding: 1.75rem !important;
        }

    /* Riquadri (callout) come sezioni: titolo sopra, non sovrapposto al bordo */
    .dati-utente .callout {
        position: relative;
        border: 1px solid #D9E1EA !important;
        border-radius: 12px !important;
        background: #fff !important;
        padding: 1.25rem 1.5rem !important;
        margin: 0 0 1.5rem !important;
        max-width: none !important;
    }

        .dati-utente .callout::before,
        .dati-utente .callout::after {
            display: none !important;
        }

    .dati-utente .callout-title {
        position: static !important;
        display: flex !important;
        align-items: center;
        gap: .5rem;
        margin: 0 0 1rem !important;
        padding: 0 0 .65rem !important;
        background: transparent !important;
        border-bottom: 1px solid #EEF2F6;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        color: var(--portale-notte) !important;
    }

        .dati-utente .callout-title .icon {
            width: 1.25rem;
            height: 1.25rem;
            fill: var(--portale-primario) !important;
        }

        .dati-utente .callout > br:first-of-type,
        .dati-utente .callout-title + br {
            display: none;
        }

    /* Spazio tra titolo del riquadro e prima riga di campi; niente vuoto in fondo */
    .dati-utente .callout-title ~ .form-row:first-of-type,
    .dati-utente .callout-title + br + .form-row {
        padding-top: 1.25rem !important;
    }

    .dati-utente .callout > .form-row:last-child .form-group {
        margin-bottom: 0;
    }

    .dati-utente .btn {
        border-radius: 8px;
        font-weight: 600;
    }

    .dati-utente .alert {
        border-radius: 12px;
    }

@media (max-width: 767.98px) {
    .dati-utente > .card > .card-body {
        padding: 1rem !important;
    }

    .dati-utente .callout {
        padding: 1rem !important;
    }
}

/* Striscia in alto: solo il link al sito istituzionale accanto ad "Accedi", senza i
   separatori verticali standard della lista (con un solo link restavano due bordi isolati). */
@media (min-width: 992px) {
    .it-header-slim-wrapper .it-header-slim-wrapper-content .nav-mobile ul.link-list {
        border-left: 0;
        border-right: 0;
        padding: 0 8px;
    }
}

/* Pulsanti della striscia in alto ("Accedi all'area personale", menu utente): al passaggio
   del mouse restano blu (più scuro) con testo bianco, invece dello sfondo scuro di base.css. */
.it-header-slim-wrapper .header-slim-right-zone .btn:hover,
.it-header-slim-wrapper .header-slim-right-zone .btn:focus,
.it-header-slim-wrapper .header-slim-right-zone .btn[aria-expanded="true"],
.it-header-slim-wrapper .it-access-top-wrapper .btn:hover,
.it-header-slim-wrapper .it-access-top-wrapper .btn:focus {
    background-color: #004D99 !important;
    border-color: #004D99 !important;
    color: #fff !important;
}

    .it-header-slim-wrapper .header-slim-right-zone .btn:hover span,
    .it-header-slim-wrapper .header-slim-right-zone .btn:focus span:not(.rounded-icon),
    .it-header-slim-wrapper .it-access-top-wrapper .btn:hover span:not(.rounded-icon) {
        color: #fff !important;
    }

    .it-header-slim-wrapper .header-slim-right-zone .btn:hover .rounded-icon,
    .it-header-slim-wrapper .it-access-top-wrapper .btn:hover .rounded-icon {
        background-color: #fff !important;
    }

    .it-header-slim-wrapper .header-slim-right-zone .btn:hover .rounded-icon .icon,
    .it-header-slim-wrapper .it-access-top-wrapper .btn:hover .rounded-icon .icon {
        fill: #0066CC !important;
    }

    .it-header-slim-wrapper .header-slim-right-zone .btn:hover > .icon {
        fill: #fff !important;
    }
/* Logo a 56px: le sue due righe sono più vicine, quindi il nome dell'ente risale di
   qualche pixel per restare sulla linea di "DIGITALIZZAZIONE" (solo dove c'è anche il
   titolo, cioè da tablet in su). */
@media (min-width: 992px) {
    .it-header-wrapper a:has(> img.portale-logo-originale) .it-brand-text h3.portale-nome-ente-sotto {
        margin-top: -1px !important;
    }
}

/* Voce di menu "Sviluppo" (solo ambienti di sviluppo/collaudo): pillola gialla
   tratteggiata, così si capisce che non è una voce per i cittadini. Giallo chiaro su
   blu: contrasto AA. Nel menu a scomparsa (sfondo bianco) diventa ambra scuro. */
.it-header-wrapper .it-header-navbar-wrapper .navbar-nav .nav-item-sviluppo {
    display: flex;
    align-items: center;   /* centrata sulla riga delle altre voci */
    margin-left: auto;     /* in fondo a destra, staccata dalle voci per i cittadini */
}

@media (min-width: 992px) {
    .it-header-wrapper .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper,
    .it-header-wrapper .it-header-navbar-wrapper .navbar-nav:has(> .nav-item-sviluppo) {
        flex-grow: 1;
    }
}

    .it-header-wrapper .it-header-navbar-wrapper .navbar-nav .nav-item-sviluppo .nav-link {
        display: inline-flex !important;
        align-items: center;
        gap: .35rem;
        align-self: center !important;   /* Bootstrap Italia la spinge in basso (flex-end) */
        margin: 0 !important;
        padding: .2rem .8rem !important;
        border: 1px dashed rgba(255, 224, 138, .85) !important;
        border-radius: 999px !important;
        color: #FFE08A !important;
        font-size: .9rem;
        font-weight: 600;
    }

        .it-header-wrapper .it-header-navbar-wrapper .navbar-nav .nav-item-sviluppo .nav-link .icon {
            fill: currentColor !important;
            width: 1.1rem;
            height: 1.1rem;
        }

        .it-header-wrapper .it-header-navbar-wrapper .navbar-nav .nav-item-sviluppo .nav-link:hover,
        .it-header-wrapper .it-header-navbar-wrapper .navbar-nav .nav-item-sviluppo.active .nav-link {
            background: rgba(255, 224, 138, .16) !important;
            border-style: solid !important;
        }

        /* Pagina aperta: basta il bordo pieno, niente barra bianca sotto */
        .it-header-wrapper .it-header-navbar-wrapper .navbar-nav .nav-item-sviluppo.active .nav-link::after {
            display: none !important;
        }

@media (max-width: 991.98px) {
    .it-header-wrapper .it-header-navbar-wrapper .navbar-nav .nav-item-sviluppo {
        margin: .5rem 1.5rem;
    }

    .it-header-wrapper .navbar-collapsable .menu-wrapper .nav-item-sviluppo .nav-link {
        color: #8A5300 !important;
        border: 1px dashed #C98A1A !important;
    }

        .it-header-wrapper .navbar-collapsable .menu-wrapper .nav-item-sviluppo .nav-link:hover,
        .it-header-wrapper .navbar-collapsable .menu-wrapper .nav-item-sviluppo.active .nav-link {
            background: #FFF4E5 !important;
            border: 1px solid #C98A1A !important;
            color: #8A5300 !important;
        }
}

/* ══ "Carica file" (wwwroot/js/carica-file.js) ═══════════════════════════════
   Campo file del browser invisibile (non display:none: la validazione lo deve
   vedere) e al suo posto pulsante "Carica file" + nome del file. Stile a bordo
   blu come gli altri pulsanti di caricamento: nelle pagine con molti documenti
   pulsanti pieni farebbero concorrenza all'azione principale ("Avanti"). */
input[type="file"].carica-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.carica-file-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 .75rem .4rem 0;
    padding: .4rem .95rem;
    border: 1px solid #0066CC;
    border-radius: 6px;
    background: #fff;
    color: #0066CC;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .15s ease;
}

    .carica-file-btn .icon {
        fill: currentColor;
        width: 1rem;
        height: 1rem;
    }

    .carica-file-btn:hover {
        background: #F0F6FC;
    }

    .carica-file-btn:focus-visible,
    input[type="file"].carica-file-input:focus + .carica-file-btn {
        outline: 2px solid #0066CC;
        outline-offset: 2px;
    }

.carica-file-nome {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: .4rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: .85rem;
    color: #5C6F82;
}

.carica-file-btn-scelto + .carica-file-nome {
    color: #17324D;
    font-weight: 600;
}

/* Campo obbligatorio non compilato dopo "Avanti"/"Invia": il bordo rosso passa al pulsante */
input[type="file"].carica-file-input.is-invalid + .carica-file-btn,
.was-validated input[type="file"].carica-file-input:invalid + .carica-file-btn {
    border-color: #C02840;
    color: #C02840;
}

/* Modulo (passo 6): il pulsante "Rimuovi" torna in riga, dopo il nome del file,
   e compare solo quando un file è stato scelto (come previsto in RenderFileUpload). */
#formContainer .formio-file-input-wrapper:has(> .carica-file-btn) .formio-file-remove {
    position: static !important;
    display: none !important;
    vertical-align: middle;
    margin: 0 0 .4rem .35rem;
}

#formContainer .formio-file-input-wrapper:has(> .carica-file-btn-scelto) .formio-file-remove {
    display: inline-flex !important;
}

@media (max-width: 575px) {
    .carica-file-btn {
        margin-right: .5rem;
        padding: .4rem .75rem;
    }
}

/* ══ Funzioni per soli sviluppatori dentro le pagine dei cittadini ══════════
   (es. "Mostra tutte le versioni", "Compila automaticamente"): stessa pillola gialla
   tratteggiata della voce di menu "Sviluppo", versione su fondo chiaro, così si
   riconoscono subito. Assenti in produzione (StrumentiSviluppo:Abilitati). Vale per
   <label> con casella (piena e con spunta quando attiva) e per <button>. */
.sviluppo-pillola {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .25rem .9rem;
    border: 1px dashed #C98A1A;
    border-radius: 999px;
    background: transparent;
    color: #8A5300;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    box-shadow: none;
}

    .sviluppo-pillola .icon { fill: currentColor; width: 1.1rem; height: 1.1rem; }
    .sviluppo-pillola input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .sviluppo-pillola .sviluppo-pillola-spunta { display: none; }

    .sviluppo-pillola:hover,
    .sviluppo-pillola:has(input:checked) {
        background: #FFF4E5;
        border-style: solid;
        color: #8A5300;
    }

    .sviluppo-pillola:has(input:checked) .sviluppo-pillola-spunta { display: inline-block; }

    .sviluppo-pillola:focus-visible,
    .sviluppo-pillola:has(input:focus-visible) {
        outline: 2px solid #8A5300;
        outline-offset: 2px;
    }

    .sviluppo-pillola:disabled { opacity: .6; cursor: wait; }

/* Riquadri che contengono campi da compilare (stepper della pratica, modulo, "I tuoi
   dati"): base.css fa "sollevare" ogni .card al passaggio del mouse e ingrandisce le
   icone. Ha senso per le schede cliccabili (home, elenchi), non per un modulo: tutto
   si spostava solo muovendo il mouse. Qui i riquadri restano fermi. */
.steppers .card:hover,
#formContainer .card:hover,
.dati-utente .card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.steppers .card:hover .icon,
#formContainer .card:hover .icon,
.dati-utente .card:hover .icon {
    transform: none !important;
}

/* Icona del calendario nei campi data: Bootstrap Italia la centra con top:50% +
   translateY(-50%); qualunque regola che cambia il "transform" delle icone al passaggio
   del mouse (base.css .card:hover .icon, o quella sopra) le toglieva lo spostamento e
   l'icona "saltava". Il pulsante è già un contenitore flex centrato: posizione fissa. */
.steppers .it-datepicker-wrapper .datepicker-button .icon,
#formContainer .it-datepicker-wrapper .datepicker-button .icon,
.dati-utente .it-datepicker-wrapper .datepicker-button .icon {
    position: static !important;
    top: auto !important;
    transform: none !important;
}

/* Percorso (breadcrumb): Home come icona della casa, voci allineate all'icona.
   Telefono: testo più piccolo, le voci vanno a capo senza spezzare le parole a metà. */
main .breadcrumb-container .breadcrumb {
    align-items: center;
    row-gap: .25rem;
}

    main .breadcrumb-container .breadcrumb-item {
        display: inline-flex;
        align-items: center;
    }

    main .breadcrumb-container .breadcrumb-home {
        display: inline-flex;
        align-items: center;
        padding: .1rem;
        border-radius: 4px;
    }

        main .breadcrumb-container .breadcrumb-home .breadcrumb-home-icona {
            width: 1.15rem;
            height: 1.15rem;
            fill: var(--portale-primario);
        }

        main .breadcrumb-container .breadcrumb-home:hover .breadcrumb-home-icona {
            fill: #004D99;
        }

        main .breadcrumb-container .breadcrumb-home:focus-visible {
            outline: 2px solid var(--portale-primario);
            outline-offset: 2px;
        }

@media (max-width: 575.98px) {
    main .breadcrumb-container .breadcrumb {
        font-size: .82rem;
    }

    main .breadcrumb-container .breadcrumb-item .separator {
        margin: 0 .3rem;
    }
}

/* Un solo aspetto per tutti i percorsi, anche quelli scritti a mano nelle pagine aperte
   dal sito del Comune (prima con un'icona "link" accanto a ogni voce): niente icone
   davanti alle voci e, come primo elemento, la casa al posto della parola "Home"
   (la parola resta nel testo per i lettori di schermo). I collegamenti non cambiano. */
main .breadcrumb-container .breadcrumb-item > svg.icon {
    display: none !important;
}

main .breadcrumb-container .breadcrumb-item:first-child > a:not(.breadcrumb-home) {
    display: inline-flex;
    align-items: center;
    width: 1.35rem;
    height: 1.35rem;
    overflow: hidden;
    white-space: nowrap;
    color: transparent !important;
    font-size: 0;
    text-decoration: none !important;
}

    main .breadcrumb-container .breadcrumb-item:first-child > a:not(.breadcrumb-home)::before {
        content: "";
        flex: 0 0 1.15rem;
        width: 1.15rem;
        height: 1.15rem;
        background-color: var(--portale-primario);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 2.5 11.1a.75.75 0 0 0 .96 1.15L5 10.97V19.5c0 .83.67 1.5 1.5 1.5h4v-6h3v6h4c.83 0 1.5-.67 1.5-1.5v-8.53l1.54 1.28a.75.75 0 0 0 .96-1.15z'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 2.5 11.1a.75.75 0 0 0 .96 1.15L5 10.97V19.5c0 .83.67 1.5 1.5 1.5h4v-6h3v6h4c.83 0 1.5-.67 1.5-1.5v-8.53l1.54 1.28a.75.75 0 0 0 .96-1.15z'/%3E%3C/svg%3E") no-repeat center / contain;
    }

/* Avviso "pagina in aggiornamento" in fondo alle pagine informative ancora da completare
   (es. Note legali, Progetto PNRR): sobrio, informativo, non un errore. */
.pagina-avviso-aggiornamento {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 1.5rem;
    padding: .85rem 1.1rem;
    border: 1px solid #D6E4F3;
    border-radius: 10px;
    background: #F0F6FC;
    color: #17324D;
    font-size: .95rem;
}

    .pagina-avviso-aggiornamento .icon {
        flex-shrink: 0;
        margin-top: .1rem;
        fill: var(--portale-primario);
    }