@font-face{
    font-family:'Nunito';
    src:url('/assets/fonts/nunito/Nunito-VariableFont_wght.ttf') format('truetype');
    font-weight:200 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:'Nunito';
    src:url('/assets/fonts/nunito/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight:200 1000;
    font-style:italic;
    font-display:swap;
}

:root{
    /* =========================================================
       BLUE HORIZON - SISTEMA GLOBALE
    ========================================================= */

    --sfondo:#f4f7fa;
    --sfondo-2:#edf3f7;

    --superficie:rgba(255,255,255,.92);
    --superficie-2:rgba(234,242,247,.82);

    --testo:#1b2733;
    --testo-secondario:#687786;

    --bordo:rgba(47,111,149,.14);

    --blu:#2f6f95;
    --blu-2:#5b8da9;
    --blu-3:#245a78;

    /*
     * REAL GOLD
     * Queste variabili restano volutamente disponibili.
     * Verranno usate esclusivamente per Premium,
     * attivazioni Premium e relativi componenti.
     */
    --oro:#c99655;
    --oro-2:#f1d8b4;
    --oro-3:#a76f35;

    --verde:#28755d;
    --rosso:#b42318;
    --info:#2f6f95;

    --ombra:0 24px 70px rgba(41,69,88,.11);
    --ombra-soft:0 16px 42px rgba(41,69,88,.075);
    --ombra-mini:0 8px 22px rgba(41,69,88,.06);

    --raggio:24px;
    --raggio-small:16px;

    --max:1220px;
    --header-h:84px;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;

    font-family:'Nunito', Arial, sans-serif;

    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(255,255,255,.94) 0%,
            rgba(255,255,255,0) 30%
        ),
        radial-gradient(
            circle at 90% 14%,
            rgba(159,192,211,.18) 0%,
            rgba(159,192,211,0) 34%
        ),
        radial-gradient(
            circle at 45% 92%,
            rgba(47,111,149,.06) 0%,
            rgba(47,111,149,0) 34%
        ),
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #f1f6f9 38%,
            #eaf2f7 72%,
            #f8fafc 100%
        );

    background-attachment:scroll;

    color:var(--testo);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    scroll-behavior:smooth;
}

body{
    min-height:100vh;
}

body.menu-mobile-open{
    overflow:hidden;
    touch-action:none;
}

a{
    color:inherit;
    text-decoration:none;

    transition:
        color .18s ease,
        opacity .18s ease,
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

img{
    display:block;
    max-width:100%;
}

button,
input,
select,
textarea{
    font:inherit;
}

a,
button,
input,
textarea,
select,
label,
summary,
[role="button"],
[tabindex]{
    -webkit-tap-highlight-color:transparent;
}

button{
    cursor:pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
.titolo-elegante{
    font-family:'Nunito', Arial, sans-serif;
    letter-spacing:-.035em;
}

:focus-visible{
    outline:none;
}

.contenitore{
    width:min(100% - 28px, var(--max));
    margin-inline:auto;
}

/* =========================================================
   HEADER V2
   Lo stile definitivo specifico dell'header viene completato
   anche da includes/header_v2.php.
========================================================= */

.testata-sito{
    position:sticky;
    top:0;
    z-index:500;

    background:
        radial-gradient(
            circle at 12% -40%,
            rgba(159,192,211,.18),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.98) 0%,
            rgba(246,249,251,.95) 100%
        );

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(47,111,149,.09);

    box-shadow:
        0 8px 26px rgba(41,69,88,.055),
        inset 0 1px 0 rgba(255,255,255,.94);
}

.testata-sito__contenuto{
    min-height:var(--header-h);

    display:grid;
    grid-template-columns:68px minmax(0,1fr) 68px;

    align-items:center;
    gap:10px;
}

.testata-sito__slot{
    display:flex;
    align-items:center;
    min-width:0;
}

.testata-sito__slot--left{
    justify-content:flex-start;
}

.testata-sito__slot--right{
    justify-content:flex-end;
}

.testata-sito__logo-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.logo-sito{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    max-width:min(390px, 100%);
    width:100%;

    -webkit-tap-highlight-color:transparent;
}

.logo-sito img{
    width:auto;
    height:66px;
    max-width:100%;

    object-fit:contain;

    filter:drop-shadow(0 1px 0 rgba(255,255,255,.70));
}

/* =========================================================
   PULSANTE MENU
========================================================= */

.pulsante-menu{
    appearance:none;

    width:56px;
    height:56px;

    border:1px solid rgba(47,111,149,.16);
    border-radius:19px;

    background:
        radial-gradient(
            circle at 28% 16%,
            rgba(255,255,255,.98),
            rgba(255,255,255,0) 44%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #eaf2f7 100%
        );

    color:var(--testo);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:6px;
    padding:0;

    position:relative;
    z-index:760;

    flex:0 0 auto;

    box-shadow:
        0 9px 22px rgba(41,69,88,.075),
        inset 0 1px 0 rgba(255,255,255,.96);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;

    -webkit-tap-highlight-color:transparent;
}

.pulsante-menu:hover{
    border-color:rgba(47,111,149,.32);

    box-shadow:
        0 13px 28px rgba(41,69,88,.10),
        inset 0 1px 0 rgba(255,255,255,.98);
}

.pulsante-menu:active{
    transform:translateY(1px);
}

.pulsante-menu:focus-visible{
    box-shadow:
        0 0 0 4px rgba(47,111,149,.13),
        0 13px 28px rgba(41,69,88,.10);
}

.pulsante-menu__linea{
    width:24px;
    height:2.4px;

    border-radius:999px;

    background:var(--testo);

    transition:
        transform .24s ease,
        opacity .18s ease,
        background .18s ease;
}

.pulsante-menu.is-open{
    background:
        linear-gradient(
            135deg,
            #dceaf2 0%,
            #b8d1df 100%
        );

    border-color:rgba(47,111,149,.28);

    box-shadow:
        0 15px 34px rgba(47,111,149,.14),
        inset 0 1px 0 rgba(255,255,255,.80);
}

.pulsante-menu.is-open .pulsante-menu__linea{
    background:var(--blu-3);
}

.pulsante-menu.is-open .pulsante-menu__linea:nth-child(1){
    transform:translateY(8.5px) rotate(45deg);
}

.pulsante-menu.is-open .pulsante-menu__linea:nth-child(2){
    opacity:0;
}

.pulsante-menu.is-open .pulsante-menu__linea:nth-child(3){
    transform:translateY(-8.5px) rotate(-45deg);
}

/* =========================================================
   USER BUTTON
========================================================= */

.header-user{
    position:relative;

    width:56px;
    height:56px;

    border-radius:999px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(47,111,149,.20);

    background:
        radial-gradient(
            circle at 28% 16%,
            rgba(255,255,255,.98),
            rgba(255,255,255,0) 44%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #e6f0f5 54%,
            #bfd6e2 100%
        );

    color:var(--blu-3);

    overflow:hidden;

    box-shadow:
        0 12px 28px rgba(47,111,149,.13),
        inset 0 1px 0 rgba(255,255,255,.90);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        filter .18s ease;

    z-index:760;

    flex:0 0 auto;

    -webkit-tap-highlight-color:transparent;
}

.header-user:hover{
    filter:saturate(1.02);

    border-color:rgba(47,111,149,.34);

    box-shadow:
        0 16px 34px rgba(47,111,149,.17),
        inset 0 1px 0 rgba(255,255,255,.94);
}

.header-user:active{
    transform:translateY(1px);
}

.header-user:focus-visible{
    box-shadow:
        0 0 0 4px rgba(47,111,149,.13),
        0 16px 34px rgba(47,111,149,.17);
}

.header-user__icon{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.28rem;
    line-height:1;

    border-radius:999px;
    overflow:hidden;
}

.header-user__avatar{
    width:56px;
    height:56px;

    object-fit:cover;

    border-radius:999px;

    display:block;

    border:1px solid rgba(47,111,149,.12);

    background:var(--superficie-2);
}

.header-user__badge{
    position:absolute;

    top:1px;
    right:1px;

    width:13px;
    height:13px;

    border-radius:999px;

    background:var(--blu);

    border:2px solid rgba(255,255,255,.98);

    box-shadow:
        0 4px 10px rgba(47,111,149,.24);

    z-index:5;

    pointer-events:none;
}

/* =========================================================
   MENU / DRAWER
========================================================= */

.nav-overlay{
    display:block !important;

    position:fixed;
    inset:0;

    z-index:610;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    background:rgba(27,39,51,.38);

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

body.menu-mobile-open .nav-overlay{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.nav-principale{
    z-index:700;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}

.nav-principale.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.nav-principale__contenuto{
    position:relative;

    display:block;

    min-width:0;

    background:#f4f7fa;

    border:1px solid rgba(47,111,149,.12);

    box-shadow:
        0 22px 56px rgba(41,69,88,.13),
        inset 0 1px 0 rgba(255,255,255,.94);

    overflow-y:auto;
    overscroll-behavior:contain;

    scrollbar-width:none;
}

.nav-principale__contenuto::-webkit-scrollbar{
    display:none;
}

.nav-principale__contenuto::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.58) 0%,
            rgba(255,255,255,0) 20%,
            rgba(255,255,255,.20) 100%
        );
}

.nav-principale__intro,
.nav-principale__eyebrow{
    display:none !important;
}

.nav-principale__gruppo{
    position:relative;

    z-index:2;

    display:grid;

    gap:7px;

    margin:0;
}

.nav-principale__gruppo--principale,
.nav-principale__gruppo--account{
    align-self:start;

    margin-top:0;
    margin-bottom:0;
}

.nav-principale__separatore{
    position:relative;

    z-index:2;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(47,111,149,.12),
            transparent
        );

    margin:8px 0;
}

.nav-principale a{
    -webkit-tap-highlight-color:transparent;

    position:relative;

    display:grid;
    grid-template-columns:26px minmax(0, 1fr);

    align-items:center;

    gap:10px;

    width:100%;
    min-height:56px;

    padding:9px 10px;

    border-radius:16px;

    color:var(--testo) !important;

    text-align:left;

    line-height:1.1;

    letter-spacing:-.02em;

    background:rgba(255,255,255,.90);

    border:1px solid rgba(47,111,149,.08);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 5px 14px rgba(41,69,88,.04);

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.nav-principale a:hover,
.nav-principale a:focus-visible,
.nav-principale a.attivo{
    background:#ffffff;

    border-color:rgba(47,111,149,.20);

    box-shadow:
        0 9px 20px rgba(41,69,88,.065),
        inset 0 1px 0 rgba(255,255,255,.98);
}

.nav-principale a:hover,
.nav-principale a:focus-visible{
    transform:translateY(-1px);
}

.nav-principale a.attivo::after{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:4px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #9fc0d3,
            #2f6f95
        );

    box-shadow:
        0 6px 14px rgba(47,111,149,.18);
}

.nav-principale__icona{
    width:26px;
    height:26px;
    min-width:26px;

    border-radius:0;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--blu);

    font-size:.92rem;

    background:transparent;

    border:0;

    box-shadow:none;
}

.nav-principale__testi{
    min-width:0;

    display:grid;

    gap:2px;
}

.nav-principale__titolo{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;

    color:var(--testo);

    font-size:.96rem;
    font-weight:950;

    line-height:1.06;

    letter-spacing:-.035em;
}

.nav-principale__descrizione{
    display:block;

    color:var(--testo-secondario);

    font-size:.78rem;
    font-weight:760;

    line-height:1.12;

    letter-spacing:-.01em;
}

.nav-principale__freccia{
    display:none !important;
}

/* CTA normale: Blue Horizon, NON Premium */
.nav-principale__cta{
    min-height:58px;

    background:
        linear-gradient(
            135deg,
            #edf5f9 0%,
            #d6e7f0 100%
        ) !important;

    border-color:rgba(47,111,149,.20) !important;

    box-shadow:
        0 9px 22px rgba(47,111,149,.09),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.nav-principale__cta .nav-principale__icona{
    color:var(--blu-3);
}

.nav-principale__cta .nav-principale__descrizione{
    color:var(--testo-secondario);
}

/* =========================================================
   BADGE
========================================================= */

.badge-notifiche{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:23px;
    height:23px;

    padding:0 7px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #b9d4e2 0%,
            #5d92b0 100%
        );

    color:#ffffff;

    font-size:.74rem;
    font-weight:950;

    line-height:1;

    box-shadow:
        0 7px 16px rgba(47,111,149,.16);
}

/* =========================================================
   PAGINA
========================================================= */

.pagina-sito{
    width:100%;
    padding:0 0 52px;
}

.hero{
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(159,192,211,.18),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(47,111,149,.08),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(245,249,251,.98)
        );

    border:1px solid rgba(47,111,149,.10);

    border-radius:var(--raggio);

    padding:34px;

    box-shadow:var(--ombra-soft);
}

.hero h1{
    margin:0 0 14px;

    font-size:clamp(2.4rem, 5vw, 4.4rem);

    line-height:.92;

    letter-spacing:-.07em;

    color:var(--testo);

    text-align:center;
}

.hero p{
    margin:0 0 20px;

    color:var(--testo-secondario);

    font-size:1.05rem;

    line-height:1.78;

    text-align:center;
}

.azioni{
    display:flex;
    flex-wrap:wrap;

    gap:12px;

    align-items:center;
}

.azioni--centrate{
    justify-content:center;
}

/* =========================================================
   BOTTONI NORMALI
   Blue Horizon.
   Il Real Gold NON viene applicato ai bottoni generici.
========================================================= */

.bottone{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    min-height:54px;

    padding:0 22px;

    border:1px solid rgba(47,111,149,.24);

    border-radius:17px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12) 0%,
            rgba(255,255,255,0) 100%
        ),
        linear-gradient(
            135deg,
            #2f6f95 0%,
            #5b8da9 100%
        );

    color:#ffffff;

    font-weight:900;

    line-height:1;

    text-align:center;

    box-shadow:
        0 14px 30px rgba(47,111,149,.20),
        inset 0 1px 0 rgba(255,255,255,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}

.bottone:hover{
    transform:translateY(-1px);

    filter:brightness(1.025);

    box-shadow:
        0 18px 36px rgba(47,111,149,.25),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.bottone:active{
    transform:translateY(1px);
}

.bottone:focus-visible{
    box-shadow:
        0 0 0 4px rgba(47,111,149,.14),
        0 16px 34px rgba(47,111,149,.22);
}

.bottone--secondario{
    background:rgba(255,255,255,.88);

    color:var(--blu-3);

    border:1px solid rgba(47,111,149,.14);

    box-shadow:
        0 10px 26px rgba(41,69,88,.065),
        inset 0 1px 0 rgba(255,255,255,.96);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.bottone--secondario:hover{
    background:#ffffff;

    border-color:rgba(47,111,149,.24);

    box-shadow:
        0 14px 30px rgba(41,69,88,.09),
        inset 0 1px 0 rgba(255,255,255,.98);
}

.bottone--small{
    min-height:44px;

    padding:0 16px;

    border-radius:14px;

    font-size:.92rem;
}

.bottone--ghost{
    background:rgba(255,255,255,.62);

    color:var(--blu-3);

    border:1px solid rgba(47,111,149,.14);

    box-shadow:none;
}

/* =========================================================
   CARD / GRID
========================================================= */

.griglia{
    display:grid;

    gap:18px;

    margin-top:22px;
}

.carta{
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(159,192,211,.14),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(47,111,149,.055),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(247,250,252,.98)
        );

    border:1px solid rgba(47,111,149,.10);

    border-radius:var(--raggio);

    padding:28px;

    box-shadow:var(--ombra-soft);
}

.carta-auth{
    max-width:940px;

    margin:24px auto 0;
}

.carta h2,
.carta h3{
    margin:0 0 12px;

    line-height:1;

    color:var(--testo);

    text-align:center;

    letter-spacing:-.055em;
}

.carta p{
    margin:0;

    color:var(--testo-secondario);

    line-height:1.78;

    text-align:center;

    max-width:760px;

    margin-left:auto;
    margin-right:auto;
}

.registrazione-titolo{
    text-align:center;

    margin-bottom:20px !important;

    font-size:clamp(2rem, 4vw, 3rem);
}

.sezione{
    margin-top:20px;
}

.sezione-registrazione{
    text-align:center;
}

.sezione-registrazione h3{
    margin-bottom:10px;
}

.sezione-registrazione p{
    max-width:820px;

    margin:0 auto;
}

/* =========================================================
   FORM
========================================================= */

.form-auth{
    display:grid;

    gap:18px;
}

.form-auth .azioni{
    justify-content:center;
}

.form-auth .azioni + a,
.form-auth .azioni + .bottone,
.form-auth a[href*="password"]{
    display:block;

    margin:14px auto 0;

    text-align:center;

    max-width:360px;

    font-weight:800;

    color:var(--blu-3);
}

.gruppo-campi{
    display:grid;

    gap:15px;
}

.gruppo-campi--2{
    grid-template-columns:1fr;
}

.campo{
    display:grid;

    gap:8px;
}

.campo label{
    font-weight:850;

    font-size:.94rem;

    color:var(--testo);
}

.campo-help{
    color:var(--testo-secondario);

    line-height:1.68;

    font-size:.92rem;
}

.campo-help--centrato{
    text-align:center;

    max-width:820px;

    margin:2px auto 0;
}

.input,
.select,
.textarea{
    width:100%;

    min-height:56px;

    border:1px solid rgba(47,111,149,.14);

    border-radius:16px;

    background:rgba(255,255,255,.90);

    padding:0 16px;

    color:var(--testo);

    box-shadow:
        0 7px 17px rgba(41,69,88,.03),
        inset 0 1px 0 rgba(255,255,255,.96);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.input:focus,
.select:focus,
.textarea:focus{
    outline:none;

    border-color:rgba(47,111,149,.52);

    box-shadow:
        0 0 0 4px rgba(47,111,149,.11),
        inset 0 1px 0 rgba(255,255,255,.98);

    background:#ffffff;
}

.input[readonly]{
    background:#e9eff3;

    color:#44525c;
}

.textarea{
    min-height:150px;

    padding:15px 16px;

    resize:vertical;
}

.telefono-wrap{
    display:grid;
    grid-template-columns:92px 1fr;

    gap:10px;

    align-items:stretch;
}

.telefono-prefisso{
    min-height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(47,111,149,.14);

    border-radius:16px;

    background:rgba(255,255,255,.78);

    color:var(--blu-3);

    font-weight:900;

    box-shadow:
        0 7px 17px rgba(41,69,88,.03),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.telefono-input{
    min-width:0;
}

.riga-check{
    display:flex;

    align-items:flex-start;

    gap:10px;

    color:var(--testo-secondario);

    line-height:1.5;
}

.riga-check input{
    margin-top:4px;
}

/* =========================================================
   SELETTORE RUOLO
========================================================= */

.selettore-ruolo{
    display:grid;
    grid-template-columns:1fr;

    gap:12px;
}

.selettore-ruolo--cards{
    gap:14px;
}

.bottone-ruolo{
    min-height:52px;

    border:1px solid rgba(47,111,149,.14);

    border-radius:17px;

    background:rgba(255,255,255,.84);

    color:var(--testo);

    font-weight:900;

    cursor:pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.bottone-ruolo:hover{
    background:#ffffff;

    border-color:rgba(47,111,149,.26);

    box-shadow:var(--ombra-mini);
}

.bottone-ruolo:focus-visible{
    box-shadow:
        0 0 0 4px rgba(47,111,149,.11);
}

.bottone-ruolo.is-attivo{
    background:
        linear-gradient(
            135deg,
            #2f6f95 0%,
            #5b8da9 100%
        );

    color:#ffffff;

    border-color:transparent;

    box-shadow:
        0 12px 28px rgba(47,111,149,.18);
}

.bottone-ruolo--card{
    min-height:unset;

    padding:20px 18px;

    display:grid;

    gap:11px;

    justify-items:center;

    text-align:center;

    box-shadow:var(--ombra-mini);
}

.bottone-ruolo--card:hover{
    transform:translateY(-1px);
}

.bottone-ruolo__icona{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    border-radius:999px;

    background:#e6f0f5;

    color:var(--blu-3);

    font-size:1.2rem;

    line-height:1;
}

.bottone-ruolo.is-attivo .bottone-ruolo__icona{
    background:rgba(255,255,255,.16);

    color:#ffffff;
}

.bottone-ruolo__titolo{
    display:block;

    font-size:1rem;

    font-weight:900;

    line-height:1.2;
}

.bottone-ruolo__descrizione{
    display:block;

    font-size:.92rem;

    font-weight:600;

    line-height:1.55;

    max-width:290px;

    color:var(--testo-secondario);
}

.bottone-ruolo.is-attivo .bottone-ruolo__descrizione{
    color:rgba(255,255,255,.90);
}

.blocco-ruolo{
    display:none;
}

.blocco-ruolo.is-attivo{
    display:grid;

    gap:15px;
}

/* =========================================================
   LOGIN EXTRA
========================================================= */

.auth-extra{
    margin-top:16px;

    text-align:center;
}

.auth-extra a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;

    font-weight:850;

    color:var(--blu-3);

    padding:0 15px;

    border-radius:14px;

    transition:
        background .18s ease,
        color .18s ease;
}

.auth-extra a:hover{
    background:rgba(255,255,255,.80);
}

/* =========================================================
   MESSAGGI
========================================================= */

.messaggio{
    border-radius:18px;

    padding:15px 18px;

    margin:0 auto 18px auto;

    border:1px solid transparent;

    font-weight:800;

    text-align:center;

    max-width:720px;

    box-shadow:
        0 8px 22px rgba(41,69,88,.045);
}

.messaggio--successo{
    background:#e9f5ef;

    color:var(--verde);

    border-color:#b9d9ca;
}

.messaggio--errore{
    background:#f8ebe8;

    color:var(--rosso);

    border-color:#ebc1bc;
}

.messaggio--info{
    background:#eaf3f8;

    color:var(--blu-3);

    border-color:#bfd7e4;
}

.lista-errori{
    margin:10px auto 0 auto;

    padding-left:0;

    list-style-position:inside;

    color:var(--rosso);

    line-height:1.7;

    text-align:center;
}

/* =========================================================
   RIEPILOGO
========================================================= */

.riepilogo{
    display:grid;

    gap:10px;

    margin-top:8px;
}

.riepilogo-item{
    display:flex;

    justify-content:space-between;

    gap:12px;

    padding:13px 15px;

    border:1px solid rgba(47,111,149,.10);

    border-radius:16px;

    background:rgba(255,255,255,.80);
}

.riepilogo-item strong{
    font-size:.95rem;
}

/* =========================================================
   NOTIFICHE
========================================================= */

.notifiche-lista{
    display:grid;

    gap:15px;
}

.notifica{
    border:1px solid rgba(47,111,149,.10);

    border-radius:22px;

    background:rgba(255,255,255,.84);

    padding:18px;

    box-shadow:var(--ombra-mini);
}

.notifica--non-letta{
    border-color:rgba(47,111,149,.28);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f2f7fa
        );

    box-shadow:
        0 0 0 1px rgba(47,111,149,.055),
        0 12px 26px rgba(41,69,88,.075);
}

.notifica__top{
    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;

    margin-bottom:10px;
}

.notifica__titolo{
    margin:0;

    font-size:1.06rem;

    color:var(--testo);
}

.notifica__meta{
    color:var(--testo-secondario);

    font-size:.9rem;
}

.notifica__testo{
    color:var(--testo-secondario);

    line-height:1.7;

    margin:0 0 12px;
}

.notifica__azioni{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    align-items:center;
}

.notifica__stato{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:30px;

    padding:0 11px;

    border-radius:999px;

    background:#eaf1f5;

    color:#44525c;

    font-size:.8rem;

    font-weight:900;

    line-height:1;
}

.notifica__stato--nuova{
    background:#dcecf4;

    color:var(--blu-3);
}

/* =========================================================
   AUTOCOMPLETE COMUNI
========================================================= */

.comune-autocomplete{
    position:relative;
}

.comune-autocomplete__risultati{
    display:none;

    position:absolute;

    top:100%;
    left:0;
    right:0;

    z-index:40;

    margin-top:7px;

    background:#ffffff;

    border:1px solid rgba(47,111,149,.14);

    border-radius:16px;

    box-shadow:
        0 18px 40px rgba(41,69,88,.13);

    overflow:hidden;

    max-height:280px;

    overflow-y:auto;
}

.comune-autocomplete__risultati.is-open{
    display:block;
}

.comune-autocomplete__item{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:3px;

    padding:13px 15px;

    border:none;

    border-bottom:1px solid rgba(47,111,149,.08);

    background:#ffffff;

    color:var(--testo);

    text-align:left;

    cursor:pointer;
}

.comune-autocomplete__item:last-child{
    border-bottom:none;
}

.comune-autocomplete__item:hover{
    background:#eff5f8;
}

.comune-autocomplete__nome{
    font-weight:900;

    line-height:1.35;
}

.comune-autocomplete__meta{
    font-size:.9rem;

    color:var(--testo-secondario);

    line-height:1.4;
}

.comune-autocomplete__vuoto{
    padding:15px;

    color:var(--testo-secondario);

    font-size:.95rem;

    line-height:1.5;
}

/* =========================================================
   FOOTER V2
========================================================= */

.footer-sito{
    margin-top:34px;

    padding:44px 0 46px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255,255,255,.82),
            transparent 42%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(159,192,211,.20),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #eef4f7 48%,
            #e3edf2 100%
        );

    border-top:1px solid rgba(47,111,149,.12);

    color:var(--testo);
}

.footer-sito__contenuto{
    display:grid;

    gap:26px;
}

.footer-sito__top{
    display:grid;

    gap:30px;

    justify-items:center;

    text-align:center;
}

.footer-sito__brand{
    display:grid;

    gap:15px;

    justify-items:center;

    text-align:center;
}

.footer-sito__logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:max-content;

    max-width:100%;

    margin-inline:auto;
}

.footer-sito__logo img{
    height:48px;

    width:auto;

    object-fit:contain;
}

.footer-sito__testo{
    max-width:820px;

    line-height:1.78;

    color:var(--testo-secondario);

    font-size:1rem;

    margin-inline:auto;

    text-align:center;
}

.footer-sito__griglia{
    display:grid;

    grid-template-columns:1fr;

    gap:22px;

    width:100%;

    align-items:start;

    justify-items:center;

    text-align:center;
}

.footer-sito__col{
    display:grid;

    gap:11px;

    justify-items:center;

    text-align:center;
}

.footer-sito__titolo{
    margin:0;

    font-size:.92rem;

    font-weight:950;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--testo);

    text-align:center;
}

.footer-sito__links{
    display:grid;

    gap:9px;

    justify-items:center;

    text-align:center;
}

.footer-sito__links a,
.footer-sito__mini-links a{
    color:#425767;

    font-weight:650;

    transition:
        opacity .18s ease,
        transform .18s ease;

    text-align:center;
}

.footer-sito__links a:hover,
.footer-sito__mini-links a:hover{
    color:var(--blu);

    opacity:.88;
}

.footer-sito__bottom{
    display:grid;

    gap:13px;

    justify-items:center;

    text-align:center;

    padding-top:20px;

    border-top:1px solid rgba(47,111,149,.10);

    color:var(--testo-secondario);

    font-size:.95rem;
}

.footer-sito__copy{
    font-weight:650;

    text-align:center;
}

.footer-sito__mini-links{
    display:flex;
    flex-wrap:wrap;

    justify-content:center;
    align-items:center;

    gap:14px;
}

.footer-sito__collabora-wrap{
    width:100%;

    margin-top:14px;
}

.footer-sito__collabora-divider,
.footer-sito__divider{
    width:100%;
    height:1px;

    background:rgba(47,111,149,.10);
}

.footer-sito__collabora{
    display:flex;

    justify-content:center;
    align-items:center;

    padding:17px 0 7px;

    text-align:center;
}

.footer-sito__collabora-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:38px;

    padding:0 14px;

    border-radius:999px;

    text-decoration:none;

    font-weight:850;

    color:var(--blu-3);

    transition:
        opacity .22s ease,
        transform .22s ease,
        background .22s ease;
}

.footer-sito__collabora-link:hover{
    background:rgba(255,255,255,.72);

    opacity:.94;

    transform:translateY(-1px);
}

.footer-sito__social-wrap{
    width:100%;

    margin-top:6px;
}

.footer-sito__social{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:13px;

    padding:15px 0;

    flex-wrap:wrap;
}

.footer-sito__social-link{
    display:flex;

    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    border-radius:13px;

    background:rgba(255,255,255,.72);

    transition:
        background .22s ease,
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;

    text-decoration:none;

    border:1px solid rgba(47,111,149,.09);

    cursor:pointer;

    padding:0;

    appearance:none;
    -webkit-appearance:none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92);
}

.footer-sito__social-link:hover{
    background:#ffffff;

    border-color:rgba(47,111,149,.18);

    transform:translateY(-2px);

    box-shadow:
        0 9px 20px rgba(41,69,88,.075);
}

.footer-sito__social-link svg{
    display:block;

    width:18px;
    height:18px;

    fill:var(--blu-3);

    flex:0 0 18px;
}

/* =========================================================
   CENTRATURA ARCHIVIO GLOBAL
========================================================= */

.oe-archivio-card__content{
    text-align:center;
}

.oe-archivio-card__top{
    justify-content:center;
}

.oe-archivio-card__top > div:first-child{
    width:100%;
}

.oe-archivio-card__titolo{
    text-align:center;
}

.oe-archivio-card__meta{
    justify-content:center;
}

.oe-archivio-card__meta-item{
    justify-content:center;
}

/* =========================================================
   RESPONSIVE DESKTOP / TABLET
========================================================= */

@media (min-width:768px){
    :root{
        --header-h:90px;
    }

    .testata-sito__contenuto{
        grid-template-columns:74px minmax(0,1fr) 74px;
    }

    .logo-sito img{
        height:70px;
    }

    .nav-principale{
        position:fixed;

        top:0;
        left:0;
        bottom:0;

        width:min(370px, 92vw);
        max-width:370px;

        padding:0;

        transform:translateX(-104%);

        background:transparent;
    }

    .nav-principale.is-open{
        transform:translateX(0);
    }

    .nav-principale__contenuto{
        width:100%;

        height:100vh;
        max-height:100vh;

        margin:0;

        padding:calc(var(--header-h) + 16px) 16px 18px;

        border-radius:0 24px 24px 0;

        border-left:0;
    }

    .nav-principale__gruppo{
        gap:8px;
    }

    .nav-principale a{
        min-height:58px;

        padding:10px 12px;

        border-radius:16px;

        grid-template-columns:28px minmax(0, 1fr);
    }

    .nav-principale__icona{
        width:28px;
        height:28px;
        min-width:28px;

        font-size:.98rem;
    }

    .nav-principale__titolo{
        font-size:1rem;
    }

    .nav-principale__descrizione{
        font-size:.82rem;

        line-height:1.16;
    }

    .nav-principale__cta{
        min-height:60px;
    }

    .footer-sito__top{
        grid-template-columns:1.1fr .9fr;

        align-items:start;
    }

    .footer-sito__griglia{
        grid-template-columns:repeat(3, minmax(0, 1fr));

        gap:24px;
    }

    .griglia{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .gruppo-campi--2{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .selettore-ruolo{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){
    :root{
        --header-h:70px;
    }

    .contenitore{
        width:min(100% - 24px, var(--max));
    }

    .testata-sito__contenuto{
        grid-template-columns:48px minmax(0,1fr) 48px;

        gap:8px;
    }

    .logo-sito img{
        height:54px;
    }

    .pulsante-menu{
        width:42px;
        height:42px;

        border-radius:15px;
    }

    .pulsante-menu__linea{
        width:19px;
        height:2.1px;
    }

    .pulsante-menu.is-open .pulsante-menu__linea:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .pulsante-menu.is-open .pulsante-menu__linea:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    .header-user{
        width:42px;
        height:42px;

        border-radius:999px;
    }

    .header-user__avatar{
        width:42px;
        height:42px;

        border-radius:999px;
    }

    .header-user__icon{
        font-size:1.02rem;

        border-radius:999px;
    }

    .nav-principale{
        position:fixed;

        top:var(--header-h);

        left:0;
        right:0;
        bottom:0;

        width:100vw;
        max-width:none;

        padding:0;

        transform:translateY(-8px);

        background:transparent;
    }

    .nav-principale.is-open{
        transform:translateY(0);
    }

    .nav-principale__contenuto{
        width:100vw;

        height:calc(100vh - var(--header-h));
        max-height:calc(100vh - var(--header-h));

        margin:0;

        padding:10px 10px 16px;

        border-left:0;
        border-right:0;

        border-radius:0;
    }

    .nav-principale__gruppo{
        gap:7px;
    }

    .nav-principale a{
        grid-template-columns:26px minmax(0, 1fr);

        min-height:56px;

        padding:9px 10px;

        border-radius:16px;

        gap:10px;
    }

    .nav-principale__icona{
        width:26px;
        height:26px;
        min-width:26px;

        font-size:.92rem;
    }

    .nav-principale__titolo{
        font-size:.96rem;

        line-height:1.06;
    }

    .nav-principale__descrizione{
        font-size:.78rem;

        line-height:1.12;
    }

    .nav-principale__cta{
        min-height:58px;
    }

    .pagina-sito{
        padding-bottom:38px;
    }

    /*
     * La hero base su mobile viene portata da bordo a bordo.
     * I singoli moduli home verranno poi trattati uno per uno
     * per mantenere il full-width anche sulle altre sezioni.
     */
    .contenitore > .hero{
        width:calc(100% + 24px);

        margin-left:-12px;
        margin-right:-12px;

        border-left:0;
        border-right:0;

        border-radius:0;

        padding:28px 18px;
    }

    .carta{
        border-radius:20px;

        padding:22px;
    }

    .hero h1{
        font-size:2.2rem;
    }

    .hero p{
        font-size:.98rem;
    }

    .registrazione-titolo{
        font-size:1.85rem;
    }

    .telefono-wrap{
        grid-template-columns:78px 1fr;
    }

    .azioni{
        display:grid;

        grid-template-columns:1fr;

        width:100%;
    }

    .azioni .bottone,
    .azioni--centrate .bottone{
        width:100%;
    }

    .footer-sito{
        margin-top:26px;

        padding:34px 0 36px;
    }

    .footer-sito__logo img{
        height:42px;
    }

    .footer-sito__testo{
        font-size:.96rem;
    }

    .footer-sito__social{
        gap:11px;

        padding:13px 0;
    }

    .footer-sito__social-link{
        width:36px;
        height:36px;

        border-radius:12px;
    }

    .footer-sito__social-link svg{
        width:16px;
        height:16px;

        flex:0 0 16px;
    }
}

/* =========================================================
   MOBILE PICCOLO
========================================================= */

@media (max-width:380px){
    .nav-principale__contenuto{
        padding:8px 8px 14px;
    }

    .nav-principale__gruppo{
        gap:6px;
    }

    .nav-principale a{
        min-height:54px;

        padding:8px 9px;

        gap:9px;

        border-radius:15px;
    }

    .nav-principale__icona{
        width:24px;
        height:24px;
        min-width:24px;

        font-size:.88rem;
    }

    .nav-principale__titolo{
        font-size:.92rem;
    }

    .nav-principale__descrizione{
        font-size:.75rem;
    }
}

/* =========================================================
   ACCESSIBILITÀ MOVIMENTO
========================================================= */

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
    }

    .nav-principale,
    .nav-overlay,
    .pulsante-menu,
    .pulsante-menu__linea,
    .header-user,
    a,
    .bottone{
        transition:none !important;
    }
}