/* =====================================================================
   La Rosa del Benessere — foglio di stile della piattaforma core
   Stile: dashboard moderna — sfondo grigio chiaro, card bianche
   morbide, badge pastello, chip icone colorati, tipografia Inter.
   Regole BRIEF §8: palette unica, zero inline, card cliccabili, no modal.
   Ogni azienda può avere il proprio foglio in modules/{azienda}/.
   ===================================================================== */

/* --- Font: Inter (locale, niente CDN) ------------------------------- */
@font-face {
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/inter-700.woff2') format('woff2');
}

:root {
    /* brand */
    --rdb-rosa:          #c94f7c;
    --rdb-rosa-scuro:    #a63d64;
    --rdb-rosa-chiaro:   #fbeef4;
    --rdb-salvia:        #2f9e6e;
    --rdb-salvia-chiaro: #e5f4ec;
    --rdb-oro:           #e8a33d;
    --rdb-oro-chiaro:    #fdf3e3;
    --rdb-azzurro:       #3d78e8;
    --rdb-azzurro-chiaro:#e9f0fd;

    /* superfici e testo (stile dashboard) */
    --rdb-sfondo:      #f5f4f2;
    --rdb-carta:       #ffffff;
    --rdb-testo:       #232120;
    --rdb-muto:        #8b8680;
    --rdb-bordo:       #eae7e2;
    --rdb-ombra:       0 1px 2px rgba(44, 40, 35, .05);
    --rdb-ombra-hover: 0 10px 28px rgba(44, 40, 35, .10);
    --rdb-raggio:      16px;
    --rdb-raggio-sm:   10px;

    /* compatibilità col vecchio nome */
    --rdb-crema: var(--rdb-sfondo);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--rdb-sfondo);
    color: var(--rdb-testo);
    letter-spacing: -.011em;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; }

a { color: var(--rdb-rosa-scuro); }

/* --- Bottoni --------------------------------------------------------- */
.btn {
    border-radius: var(--rdb-raggio-sm);
    font-weight: 600;
    letter-spacing: -.011em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.btn-primary {
    --bs-btn-bg: var(--rdb-rosa);
    --bs-btn-border-color: var(--rdb-rosa);
    --bs-btn-hover-bg: var(--rdb-rosa-scuro);
    --bs-btn-hover-border-color: var(--rdb-rosa-scuro);
    --bs-btn-active-bg: var(--rdb-rosa-scuro);
    --bs-btn-active-border-color: var(--rdb-rosa-scuro);
    --bs-btn-disabled-bg: #e6b7c9;
    --bs-btn-disabled-border-color: #e6b7c9;
}

.btn-outline-primary {
    --bs-btn-color: var(--rdb-rosa);
    --bs-btn-border-color: #e8cdd9;
    --bs-btn-hover-bg: var(--rdb-rosa);
    --bs-btn-hover-border-color: var(--rdb-rosa);
    --bs-btn-active-bg: var(--rdb-rosa-scuro);
    --bs-btn-active-border-color: var(--rdb-rosa-scuro);
}

.btn-outline-secondary {
    --bs-btn-color: var(--rdb-testo);
    --bs-btn-border-color: var(--rdb-bordo);
    --bs-btn-hover-bg: var(--rdb-sfondo);
    --bs-btn-hover-border-color: var(--rdb-bordo);
    --bs-btn-hover-color: var(--rdb-testo);
}

.text-primary   { color: var(--rdb-rosa) !important; }
.bg-primary     { background-color: var(--rdb-rosa) !important; }
.border-primary { border-color: var(--rdb-rosa) !important; }

/* --- Form ------------------------------------------------------------ */
.form-control, .form-select {
    border-radius: var(--rdb-raggio-sm);
    border-color: #e2ded8;
    padding: .55rem .85rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--rdb-rosa);
    box-shadow: 0 0 0 .25rem rgba(201, 79, 124, .12);
}

.form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--rdb-muto);
    margin-bottom: .3rem;
}

.input-group-text {
    border-radius: var(--rdb-raggio-sm);
    border-color: #e2ded8;
    background: var(--rdb-sfondo);
    color: var(--rdb-muto);
}

/* --- Card ------------------------------------------------------------ */
.card {
    border: 1px solid var(--rdb-bordo);
    border-radius: var(--rdb-raggio);
    box-shadow: var(--rdb-ombra);
}

/* card header (modello template): bianco, tratteggio sotto, arioso */
.card-header {
    background: var(--rdb-carta);
    border-bottom: 1px dashed var(--rdb-bordo);
    padding: .9rem 1.25rem;
    border-top-left-radius: calc(var(--rdb-raggio) - 1px) !important;
    border-top-right-radius: calc(var(--rdb-raggio) - 1px) !important;
}

.card-cliccabile {
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

.card-cliccabile:hover {
    transform: translateY(-3px);
    box-shadow: var(--rdb-ombra-hover);
}

.card-cliccabile .stretched-link { text-decoration: none; }

/* --- Chip icona (stile stat-card) ------------------------------------ */
.chip-icona {
    width: 3.9rem;
    height: 3.9rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.chip-rosa    { background: var(--rdb-rosa-chiaro); color: var(--rdb-rosa-scuro); }
.chip-salvia  { background: var(--rdb-salvia-chiaro); color: var(--rdb-salvia); }
.chip-oro     { background: var(--rdb-oro-chiaro); color: var(--rdb-oro); }
.chip-azzurro { background: var(--rdb-azzurro-chiaro); color: var(--rdb-azzurro); }
.chip-grigio  { background: var(--rdb-sfondo); color: var(--rdb-muto); }

/* --- Badge: pastello soft (rimappa tutti i badge Bootstrap) ---------- */
.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .38em .75em;
}

.badge.text-bg-success   { background: var(--rdb-salvia-chiaro) !important; color: var(--rdb-salvia) !important; }
.badge.text-bg-warning   { background: var(--rdb-oro-chiaro) !important; color: #b97417 !important; }
.badge.text-bg-danger    { background: #fdeaea !important; color: #c94444 !important; }
.badge.text-bg-info      { background: var(--rdb-azzurro-chiaro) !important; color: var(--rdb-azzurro) !important; }
.badge.text-bg-secondary { background: #efece8 !important; color: var(--rdb-muto) !important; }
.badge.text-bg-dark      { background: var(--rdb-testo) !important; color: #fff !important; }
.badge.text-bg-light     { background: var(--rdb-sfondo) !important; color: var(--rdb-muto) !important; border: 1px solid var(--rdb-bordo); }

/* testo minuto (date nelle card, note a margine) */
.testo-micro { font-size: .72rem; }

/* card missione compatta in dashboard */
.scheda-missione-compatta { padding: .75rem .9rem; }

/* card missione in dashboard: titolo su due righe e stati leggibili */
.testo-due-righe {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

/* missioni in dashboard: righe una sotto l'altra dentro la card brillante */
.elenco-missioni .riga-missione {
    padding: .8rem .6rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background .12s ease;
}

.elenco-missioni .riga-missione { border: 1px solid var(--rdb-bordo); }

.elenco-missioni .riga-missione:hover { box-shadow: var(--rdb-ombra-hover); }

.elenco-missioni .riga-missione:hover .bi-chevron-right { color: var(--bs-primary) !important; }

/* icone missione: tutte dello stesso colore, nude e un filo più grandi */
.elenco-missioni .icona-missione {
    font-size: 1.6rem;
    color: var(--rdb-rosa, var(--bs-primary));
    line-height: 1;
}

/* badge punti compatto per le righe */
.badge-punti-mini { padding: .2rem .6rem; font-size: .72rem; }

/* pill di stato "in corso" (salvia come la barra di progresso) */
.pillola-in-corso {
    background: var(--rdb-salvia);
    color: #fff;
    font-weight: 600;
    font-size: .7rem;
    padding: .35rem .65rem;
}

/* anello di avanzamento (conic-gradient pilotato da --progresso 0-100) */
.anello-progresso {
    --progresso: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: conic-gradient(var(--rdb-salvia) calc(var(--progresso) * 1%), var(--rdb-sfondo) 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.anello-progresso::before {
    content: "";
    position: absolute;
    inset: 5px;
    background: #fff;
    border-radius: 50%;
}

.anello-progresso > span {
    position: relative;
    font-size: .66rem;
    font-weight: 700;
    color: var(--rdb-salvia);
}

/* chip compatto per le tessere piccole */
.chip-icona-mini {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    font-size: 1rem;
}

/* modal di dettaglio missione: stretto, verticale e arioso */
.lettore-scheda-stretta { width: min(92vw, 380px); border-radius: 1.1rem; }

.lettore-scheda-stretta .lettore-corpo {
    text-align: center;
    padding: 2.75rem 2rem 2.25rem;
}

/* meta della missione: una voce per riga, col divisorio sopra */
.dettaglio-missione-meta {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    border-top: 1px solid var(--rdb-bordo);
    padding-top: 1.1rem;
}

.chip-icona-grande {
    width: 76px;
    height: 76px;
    font-size: 1.9rem;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* card strumento compatta in dashboard: icona + titolo su una riga */
.scheda-strumento-compatta {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
}

/* utility mancante in Bootstrap: lascia troncare i figli dei flex */
.min-w-0 { min-width: 0; }

.scheda-strumento-compatta .h6 { font-size: .92rem; }

/* box "attiva strumenti": i tool a pagamento ancora da sbloccare */
.box-attiva-strumenti {
    background: var(--rdb-rosa-chiaro);
    border: 1px dashed rgba(201, 79, 124, .35);
    border-radius: var(--rdb-raggio);
    padding: 1.15rem 1.25rem 1.25rem;
}

.scheda-attiva-strumento {
    display: flex;
    flex-direction: column;
    padding: .9rem 1rem 1rem;
}

.scheda-attiva-strumento .h6 { font-size: .92rem; }

/* tab delle pagine strumento: pillole dentro una card bianca */
.tab-strumento {
    display: flex;
    width: 100%;
    gap: .25rem;
    background: var(--rdb-carta);
    border: 1px solid var(--rdb-bordo);
    border-radius: 999px;
    padding: .3rem;
    box-shadow: var(--rdb-ombra);
    margin: 1.1rem 0 1.5rem;
}

.tab-strumento .nav-link {
    color: var(--rdb-muto);
    font-size: .88rem;
    font-weight: 500;
    padding: .45rem 1rem;
    border-radius: 999px;
    white-space: nowrap;
}

.tab-strumento .nav-link:hover { color: var(--rdb-testo); background: var(--rdb-sfondo); }

.tab-strumento .nav-link.active {
    color: var(--rdb-rosa);
    background: var(--rdb-rosa-chiaro);
    font-weight: 600;
}

/* sidebar strumenti dell'area incaricato (desktop) */
.sidebar-strumenti {
    width: 232px;
    flex-shrink: 0;
    position: sticky;
    top: 70px;
}

.sidebar-strumenti-corpo {
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* testata delle pagine interne (modello template): chip piu' grande */
.testata-strumento .chip-icona { font-size: 1.75rem; }

/* blocco profilo in testa alla sidebar: foto grande tonda, nome, codice */
.sidebar-profilo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .15rem;
    padding: 1.25rem .85rem 1rem;
    text-decoration: none;
    color: var(--rdb-testo);
    border-bottom: 1px solid var(--rdb-bordo);
    border-radius: var(--rdb-raggio) var(--rdb-raggio) 0 0;
}

.sidebar-profilo:hover { color: var(--rdb-testo); }

/* coda della sidebar: bordo intero da lato a lato, con il suo respiro */
.sidebar-impostazioni {
    border-top: 1px solid var(--rdb-bordo);
    padding: .5rem;
    margin-top: .35rem;
}

.sidebar-avatar {
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--rdb-rosa-chiaro);
    margin-bottom: .5rem;
}

.sidebar-avatar-iniziali {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rdb-rosa-chiaro);
    color: var(--rdb-rosa);
    font-weight: 700;
    font-size: 3rem;
}

.sidebar-strumenti-titolo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.7rem .65rem .25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rdb-muto);
}

.sidebar-strumenti-titolo a {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rdb-muto);
    text-decoration: none;
}

.sidebar-strumenti-titolo a:hover { color: var(--rdb-rosa); }

.voce-strumento {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 300;
    color: var(--rdb-testo);
    text-decoration: none;
}

/* barretta a sinistra sulla voce attiva, oltre allo sfondo */
.voce-strumento.attiva::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 50%;
    background: var(--rdb-rosa);
}


.voce-strumento:hover { background: var(--rdb-sfondo); color: var(--rdb-testo); }

.voce-strumento.attiva {
    background: var(--rdb-rosa-chiaro);
    color: var(--rdb-rosa);
    font-weight: 300;
}

.voce-strumento.bloccata,
.voce-strumento.bloccata > i:first-child { color: var(--rdb-muto); }

.voce-strumento .bi-lock { font-size: .75rem; }

/* tab verticale delle integrazioni sito */
.voce-integrazione.attiva {
    background: var(--rdb-rosa-chiaro);
    border-left: 3px solid var(--rdb-rosa);
    padding-left: calc(1.25rem - 3px);
}

/* --- Tabelle --------------------------------------------------------- */
.table thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rdb-muto);
    border-bottom-width: 1px;
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.table td { border-color: var(--rdb-bordo); padding-top: .8rem; padding-bottom: .8rem; }

.table-hover > tbody > tr:hover > * { background-color: #f9f8f6; }

.list-group-item { border-color: var(--rdb-bordo); }

/* --- Alert ------------------------------------------------------------ */
.alert { border: 0; border-radius: var(--rdb-raggio-sm); }
.alert-success { background: var(--rdb-salvia-chiaro); color: var(--rdb-salvia); }
.alert-danger  { background: #fdeaea; color: #c94444; }
.alert-warning { background: var(--rdb-oro-chiaro); color: #9a6210; }

/* --- Megamenu admin (orizzontale superiore) --------------------------- */
.navbar-admin {
    background: var(--rdb-carta);
    border-bottom: 1px solid var(--rdb-bordo);
}

.navbar-admin .navbar-brand { color: var(--rdb-rosa); font-weight: 700; }

.navbar-admin .nav-link {
    color: var(--rdb-muto);
    font-weight: 500;
    padding: .55rem .9rem;
    margin: .35rem .1rem;
    border-radius: var(--rdb-raggio-sm);
}

.navbar-admin .nav-link:hover { color: var(--rdb-testo); background: var(--rdb-sfondo); }

.navbar-admin .nav-link.active { color: var(--rdb-rosa); background: var(--rdb-rosa-chiaro); }

.megamenu {
    width: 100%;
    border: 1px solid var(--rdb-bordo);
    border-radius: 0 0 var(--rdb-raggio) var(--rdb-raggio);
    box-shadow: 0 18px 40px rgba(44, 40, 35, .10);
    padding: 1.35rem 1.6rem;
}

.megamenu .megamenu-titolo {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--rdb-muto);
    margin-bottom: .55rem;
}

.megamenu a.dropdown-item {
    border-radius: var(--rdb-raggio-sm);
    padding: .5rem .75rem;
    font-weight: 500;
}

.megamenu a.dropdown-item:hover { background: var(--rdb-sfondo); }

.megamenu a.dropdown-item i { color: var(--rdb-rosa); width: 1.4rem; }

/* --- Area utente ------------------------------------------------------ */
.barra-mobile {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    background: var(--rdb-carta);
    border-top: 1px solid var(--rdb-bordo);
    display: flex;
    justify-content: space-around;
    padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
}

.barra-mobile a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    text-decoration: none;
    color: var(--rdb-muto);
    font-size: .68rem;
    font-weight: 500;
    min-width: 3.5rem;
    position: relative;
}

.barra-mobile a i { font-size: 1.3rem; }

.barra-mobile a.active { color: var(--rdb-rosa); }

.contenuto-utente { padding-bottom: 5rem; }

@media (min-width: 992px) {
    .barra-mobile { display: none; }
    .contenuto-utente { padding-bottom: 2rem; }
}

/* --- Badge notifiche -------------------------------------------------- */
.badge-notifiche {
    position: absolute;
    top: -2px;
    right: 2px;
    background: var(--rdb-rosa);
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .1rem .35rem;
    line-height: 1.1;
}

/* --- Banner MAGIC LOGIN ----------------------------------------------- */
.banner-magic-login {
    background: var(--rdb-oro);
    color: #3d2f10;
    font-weight: 600;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1040;
}

/* --- Missioni ---------------------------------------------------------- */
.progresso-missione { height: .45rem; border-radius: 999px; background: var(--rdb-sfondo); }

.progresso-missione .progress-bar { background: var(--rdb-salvia); border-radius: 999px; }

.badge-punti {
    background: var(--rdb-rosa-chiaro);
    color: var(--rdb-rosa-scuro);
    font-weight: 700;
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: .82rem;
    white-space: nowrap;
}

.stato-missione-attiva     { color: var(--rdb-salvia); font-weight: 600; }
.stato-missione-completata { color: var(--rdb-oro); font-weight: 600; }
.stato-missione-scaduta    { color: var(--rdb-muto); }

/* --- Dashboard: saluto e stat-card ------------------------------------- */
.saluto-titolo { font-weight: 700; font-size: clamp(1.3rem, 2.5vw, 1.7rem); }

.saluto-sottotitolo { color: var(--rdb-muto); font-size: .9rem; }

.stat-card .stat-numero { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }

.stat-card .stat-etichetta { color: var(--rdb-muto); font-size: .82rem; font-weight: 500; }

.stat-card .stat-link {
    font-size: .78rem;
    font-weight: 600;
    color: var(--rdb-muto);
    text-decoration: none;
    border-top: 1px solid var(--rdb-bordo);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem 1.25rem;
}

.stat-card .stat-link:hover { color: var(--rdb-rosa); }

/* --- Pagine auth -------------------------------------------------------- */
.pagina-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.pagina-auth .card {
    width: 100%;
    max-width: 430px;
    border: 0;
    box-shadow: 0 24px 60px rgba(44, 40, 35, .12);
}

/* --- Barra dev cambio-account (solo sviluppo) --------------------------- */
.barra-dev {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: .75rem;
    z-index: 1050;
    background: var(--rdb-testo);
    color: #fff;
    border-radius: 999px;
    padding: .35rem .9rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    box-shadow: 0 12px 30px rgba(35, 33, 32, .35);
    font-size: .78rem;
    white-space: nowrap;
    max-width: calc(100vw - 1rem);
    overflow-x: auto;
}

.barra-dev .barra-dev-titolo { color: #9aa0a9; margin-right: .35rem; }

.barra-dev a {
    color: #fff;
    text-decoration: none;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-weight: 500;
}

.barra-dev a:hover { background: rgba(255, 255, 255, .12); }

.barra-dev a.attivo { background: var(--rdb-rosa); }

@media (max-width: 991.98px) {
    body:has(.barra-mobile) .barra-dev { bottom: 4.6rem; }
}

/* --- Selezione del mondo (prima pagina dopo il login) -------------------- */
.pagina-mondi {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--rdb-rosa-scuro) 0%, var(--rdb-rosa) 45%, #8a3354 100%);
}

/* logo e marchio centrati in testa alla pagina */
.mondi-logo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #fff;
    color: var(--rdb-rosa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    box-shadow: 0 14px 36px rgba(61, 15, 33, .3);
}

.mondi-marchio {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .01em;
}

.pagina-mondi .btn-outline-light { border-color: rgba(255, 255, 255, .35); font-weight: 500; }

.mondi-contenuto { padding: 3.5rem 1rem 6rem; }

.mondi-saluto { color: rgba(255, 255, 255, .85); font-size: 1.05rem; }

.mondi-titolo {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.3rem);
}

.mondi-sottotitolo { color: rgba(255, 255, 255, .75); }

.carta-mondo { border: 0; box-shadow: 0 18px 45px rgba(61, 15, 33, .28); }

.carta-mondo .mondo-icona {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: var(--rdb-rosa-chiaro);
    color: var(--rdb-rosa-scuro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
}

.carta-mondo-attiva .mondo-icona { background: var(--rdb-rosa); color: #fff; }

.carta-mondo:hover { transform: translateY(-4px); }

/* --- Testata a due righe (riga 1: brand+azioni · riga 2: menu) -------- */
.testata {
    background: var(--rdb-carta);
    border-bottom: 1px solid var(--rdb-bordo);
}

.testata-riga1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.testata-brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rdb-rosa);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.testata-brand:hover { color: var(--rdb-rosa-scuro); }

/* brand del mondo: mai a capo, ellissi se serve */
.brand-mondo {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.brand-mondo .testata-brand {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* menu inline nell'header, a destra prima dei pulsanti */
.menu-testata { align-items: center; gap: .25rem; }

.menu-testata .voce-menu {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--rdb-muto);
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
}

.menu-testata .voce-menu:hover { color: var(--rdb-testo); background: var(--rdb-sfondo); }

.menu-testata .voce-menu.active {
    color: var(--rdb-rosa);
    background: var(--rdb-rosa-chiaro);
    font-weight: 600;
}

/* pillola chiara in testata (es. Missioni): come il badge punti ma light */
.pillola-testata {
    background: var(--rdb-sfondo);
    color: var(--rdb-testo);
    font-weight: 600;
    font-size: .82rem;
    border-radius: 999px;
    padding: .35rem 1.15rem;
    text-decoration: none;
    white-space: nowrap;
    align-items: center;
}

.pillola-testata:hover { background: var(--rdb-bordo); color: var(--rdb-testo); }

.pillola-testata.active { background: var(--rdb-rosa-chiaro); color: var(--rdb-rosa); }

/* eventi: blocco data in stile calendario */
.evento-data {
    width: 74px;
    text-align: center;
    background: var(--rdb-rosa-chiaro);
    border-radius: var(--rdb-raggio-sm);
    padding: .6rem .3rem;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
}

.evento-data .evento-giorno { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--rdb-rosa); }

.evento-data .evento-mese { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--rdb-rosa); }

.evento-data .evento-ora { font-size: .68rem; color: var(--rdb-muto); margin-top: .25rem; }

/* ricerca nella toolbar: a destra, coi bordi a pillola */
.tab-strumento .ricerca-barra { margin-left: auto; align-self: center; }

.ricerca-pillola {
    border-radius: 999px 0 0 999px;
    border-right: 0;
    min-width: 190px;
}

.ricerca-pillola-btn { border-radius: 0 999px 999px 0; }

.ricerca-pillola-sola { border-radius: 999px; min-width: 200px; }

/* tendine lunghe (sotto categorie): compatte, scorrevoli, filtrabili */
.tendina-compatta {
    max-height: 320px;
    overflow-y: auto;
    min-width: 260px;
}

.tendina-compatta .dropdown-item { font-size: .85rem; padding-top: .3rem; padding-bottom: .3rem; }

/* divisorio verticale in testata (tra punti-missioni e le azioni) */
.divisore-testata {
    width: 1px;
    height: 1.6rem;
    background: var(--rdb-bordo);
    margin: 0 .35rem;
}

/* azioni tonde a destra (campanella, profilo, esci) */
.azione-testata {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--rdb-bordo);
    background: var(--rdb-carta);
    color: var(--rdb-muto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    text-decoration: none;
    position: relative;
}

.azione-testata:hover {
    color: var(--rdb-rosa);
    border-color: var(--rdb-rosa);
    background: var(--rdb-rosa-chiaro);
}

/* riga 2: il menu su riga dedicata */
.testata-riga2 {
    border-top: 1px solid var(--rdb-bordo);
    background: var(--rdb-carta);
}

.testata-riga2 .voce-menu {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--rdb-muto);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.testata-riga2 .voce-menu:hover { color: var(--rdb-testo); }

.testata-riga2 .voce-menu.active {
    color: var(--rdb-rosa);
    border-bottom-color: var(--rdb-rosa);
    font-weight: 600;
}

/* la riga 2 dell'admin ospita i megamenu: voci allineate allo stile */
.testata-riga2.navbar-admin { border-bottom: 0; }

.testata-riga2.navbar-admin .nav-link {
    margin: .3rem .1rem;
    padding: .5rem .9rem;
}

/* variante compatta del chip icona (righe strumento in dashboard) */
.chip-icona-sm { width: 2.2rem; height: 2.2rem; font-size: 1rem; border-radius: 9px; }

/* menu a tendina coerenti con lo stile (riga 2 utente) */
.dropdown-menu {
    border: 1px solid var(--rdb-bordo);
    border-radius: var(--rdb-raggio-sm);
    box-shadow: 0 14px 34px rgba(44, 40, 35, .12);
    padding: .4rem;
}

.dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .88rem;
    font-weight: 500;
}

.dropdown-menu .dropdown-item:hover { background: var(--rdb-sfondo); }

.dropdown-menu .dropdown-item i { color: var(--rdb-rosa); width: 1.3rem; }

/* --- Admin template: sidebar sinistra + topbar ------------------------ */
.corpo-admin { min-height: 100vh; }

.admin-impianto {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.sidebar-admin {
    width: 264px;
    flex-shrink: 0;
    background: var(--rdb-carta);
    border-right: 1px solid var(--rdb-bordo);
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .sidebar-admin {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.sidebar-brand {
    padding: 1rem 1.25rem;
    background: var(--rdb-carta);
    border-bottom: 1px solid var(--rdb-bordo);
    height: 62px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sidebar-brand a {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rdb-rosa);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.sidebar-nav { padding: .6rem .75rem 5rem; }

.sidebar-sezione {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rdb-muto);
    padding: 1rem .6rem .4rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.pallino-azienda {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--rdb-rosa);
    display: inline-block;
    flex-shrink: 0;
}

.sidebar-voce {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    margin-bottom: .12rem;
    border-radius: var(--rdb-raggio-sm);
    font-size: .875rem;
    font-weight: 500;
    color: #6b6660;
    text-decoration: none;
}

.sidebar-voce i { font-size: 1rem; width: 1.2rem; text-align: center; }

.sidebar-voce:hover { color: var(--rdb-testo); background: var(--rdb-sfondo); }

.sidebar-voce.active { color: var(--rdb-rosa); background: var(--rdb-rosa-chiaro); font-weight: 600; }

.admin-principale {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    background: var(--rdb-carta);
    border-bottom: 1px solid var(--rdb-bordo);
    padding: 0 1.5rem;
    height: 62px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* gabbia unica per tutte le pagine admin: larghezza content,
   centrata tra la sidebar e il bordo destro */
.admin-contenuto {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding: 1.6rem 1.5rem 5rem;
}

/* su mobile la sidebar è un cassetto laterale (offcanvas) */
@media (max-width: 991.98px) {
    .sidebar-admin { width: 280px; }
}

/* sezioni azienda espandibili nella sidebar admin */
.sidebar-espandibile {
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    border-radius: var(--rdb-raggio-sm);
}

.sidebar-espandibile:hover { color: var(--rdb-testo); background: var(--rdb-sfondo); }

/* intestazione azienda: maiuscolo pieno, più grande e compatto */
.intestazione-azienda {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--rdb-testo);
    padding: .45rem .6rem;
}

/* un semplice divisore prima di ogni azienda */
.sidebar-divisore {
    border: 0;
    border-top: 1px solid var(--rdb-bordo);
    margin: .8rem .35rem .35rem;
    opacity: 1;
}

/* nel dettaglio strumento: il ponte verso i contenuti, a destra */
.scheda-contenuti {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .95rem;
    border: 1px solid var(--rdb-bordo);
    border-radius: 999px;
    background: var(--rdb-carta);
    color: var(--rdb-muto);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.scheda-contenuti:hover {
    color: var(--rdb-rosa);
    border-color: var(--rdb-rosa);
    background: var(--rdb-rosa-chiaro);
}

.scheda-contenuti .bi-box-arrow-up-right { font-size: .7rem; }

/* etichetta di gruppo dentro la sezione azienda (es. Contenuti) */
.sidebar-etichetta {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rdb-muto);
    padding: .55rem .75rem .2rem;
}

/* voci contenuto: leggermente rientrate e più minute */
.sidebar-voce-contenuto {
    margin-left: .55rem;
    font-size: .84rem;
}

/* pin: tiene la sezione azienda sempre aperta (localStorage) */
.pin-azienda {
    margin-left: auto;
    padding: .15rem .3rem;
    border-radius: 6px;
    color: var(--rdb-bordo);
    font-size: .8rem;
    line-height: 1;
}

.sidebar-espandibile:hover .pin-azienda { color: var(--rdb-muto); }

.pin-azienda:hover { color: var(--rdb-rosa); background: var(--rdb-rosa-chiaro); }

.pin-azienda.fissata { color: var(--rdb-rosa); }

.sidebar-espandibile .bi-chevron-down {
    margin-left: .35rem;
    font-size: .7rem;
    transition: transform .18s ease;
}

.sidebar-espandibile.collapsed .bi-chevron-down { transform: rotate(-90deg); }


/* rifinitura sidebar: scrollbar discreta e fondo sempre bianco */
.sidebar-admin { scrollbar-width: thin; scrollbar-color: var(--rdb-bordo) transparent; }

.sidebar-admin::-webkit-scrollbar { width: 6px; }

.sidebar-admin::-webkit-scrollbar-thumb { background: var(--rdb-bordo); border-radius: 999px; }

.sidebar-admin,
.sidebar-admin.offcanvas-lg { background-color: var(--rdb-carta) !important; }

/* contrazione completa della sidebar (bottone in topbar, solo desktop) */
@media (min-width: 992px) {
    .sidebar-admin { transition: margin-left .22s ease; }

    html.sidebar-chiusa .sidebar-admin { margin-left: -264px; }
}

/* breadcrumb delle liste di gestione */
.briciole {
    font-size: .78rem;
    margin-bottom: .5rem;
    --bs-breadcrumb-divider-color: var(--rdb-muto);
}

.briciole .breadcrumb-item a { color: var(--rdb-muto); text-decoration: none; font-weight: 500; }

.briciole .breadcrumb-item a:hover { color: var(--rdb-rosa); }

.briciole .breadcrumb-item.active { color: var(--rdb-testo); font-weight: 600; }

.briciole .breadcrumb-item + .breadcrumb-item::before { color: var(--rdb-muto); }

/* tab di sezione nelle pagine di dettaglio */
.schede-dettaglio {
    border-bottom: 1px solid var(--rdb-bordo);
    gap: .25rem;
}

.schede-dettaglio .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .9rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--rdb-muto);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.schede-dettaglio .nav-link:hover { color: var(--rdb-testo); }

.schede-dettaglio .nav-link.active {
    color: var(--rdb-rosa);
    border-bottom-color: var(--rdb-rosa);
    font-weight: 600;
}

.schede-dettaglio .nav-link .badge { font-size: .68rem; }

/* drag & drop di riordino nell'hub strumenti */
.maniglia-ordine {
    cursor: grab;
    color: var(--rdb-muto);
    font-size: 1.1rem;
    padding: .2rem .1rem;
    position: relative;
    z-index: 2; /* sopra lo stretched-link della card */
}

.maniglia-ordine:active { cursor: grabbing; }

.colonna-strumento.in-trascinamento { opacity: .4; }

/* righe di tabella interamente cliccabili */
tr[data-href] { cursor: pointer; }

/* immagini degli items */
.miniatura-item {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--rdb-bordo);
}

.miniatura-item-grande { width: 96px; height: 96px; border-radius: 12px; }

/* segnaposto quando il contenuto non ha ancora un'immagine */
.miniatura-vuota {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rdb-sfondo);
    color: var(--rdb-muto);
    flex-shrink: 0;
}

/* mini editor per le descrizioni */
.mini-editor {
    border: 1px solid #e2ded8;
    border-radius: var(--rdb-raggio-sm);
    overflow: hidden;
    background: var(--rdb-carta);
}

.mini-editor:focus-within {
    border-color: var(--rdb-rosa);
    box-shadow: 0 0 0 .25rem rgba(201, 79, 124, .12);
}

.mini-editor-barra {
    display: flex;
    gap: .15rem;
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--rdb-bordo);
    background: var(--rdb-sfondo);
}

.mini-editor-barra button {
    border: 0;
    background: none;
    border-radius: 7px;
    width: 1.9rem;
    height: 1.9rem;
    color: var(--rdb-muto);
    font-size: .95rem;
}

.mini-editor-barra button:hover { background: var(--rdb-carta); color: var(--rdb-testo); }

.mini-editor-area {
    min-height: 9rem;
    padding: .6rem .85rem;
    outline: none;
    font-size: .95rem;
}

.mini-editor-area ul, .mini-editor-area ol { padding-left: 1.4rem; margin-bottom: .5rem; }

/* form item a due colonne */
.form-item { max-width: 1020px; }

/* elenchi lunghi di checkbox (es. categorie articolo): compatti e scorrevoli */
.elenco-scorrevole {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--rdb-bordo);
    border-radius: var(--rdb-raggio-sm);
    padding: .5rem .75rem;
    background: #fff;
}

.elenco-scorrevole .form-check {
    margin-bottom: .1rem;
    min-height: 0;
}

.elenco-scorrevole .form-check-label {
    font-size: .82rem;
}

.elenco-scorrevole .form-check-input {
    margin-top: .18rem;
}

/* freccia a destra nelle righe interamente cliccabili */
.freccia-riga { color: var(--rdb-muto); font-size: 1rem; }

tr[data-href]:hover .freccia-riga { color: var(--rdb-rosa); }

/* copertine e contenuto degli articoli */
.copertina-articolo {
    height: 150px;
    object-fit: cover;
    border-top-left-radius: var(--rdb-raggio);
    border-top-right-radius: var(--rdb-raggio);
}

.copertina-articolo-grande { height: 260px; }

/* --- Sito personale pubblico (modello 2026-07-30) ------------------- */

/* font del sito personale (locale come Inter, file variabile):
   Montserrat — un bastoni geometrico ed elegante per i titoli */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* tutte le sezioni (header, contenuto, footer) sulla stessa larghezza */
.sito-contenuto { max-width: 1080px; margin-inline: auto; }

.sito-personale {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
}

.sito-personale h1, .sito-personale h2, .sito-personale h3,
.sito-personale h4, .sito-personale h5, .sito-personale h6 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* scala tipografica più generosa */
.sito-personale .h4 { font-size: 1.7rem; }
.sito-personale .h5 { font-size: 1.35rem; }
.sito-personale .h6 { font-size: 1.1rem; }

/* più aria: card, griglie e sezioni */
.sito-personale .card-body { padding: 1.6rem; }

.sito-personale .row.g-3 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

/* filo superiore nel colore aziendale */
.sito-testata-bordo { border-top: 3px solid var(--rdb-rosa); }

/* header su una riga: marchio a sinistra, menu in linea a destra */
.sito-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.sito-marchio { display: flex; align-items: center; gap: 1.1rem; }

.sito-foto {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--rdb-rosa-chiaro, var(--rdb-bordo));
    flex-shrink: 0;
}

.sito-foto-vuota {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rdb-rosa-chiaro, var(--rdb-sfondo));
    color: var(--rdb-rosa-scuro, var(--rdb-muto));
    font-size: 1.4rem;
}

.sito-foto-grande { width: 150px; height: 150px; }

.sito-nav { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }

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

.sito-nav-voce {
    padding: .5rem 1rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--rdb-muto);
    text-decoration: none;
    border-radius: 2rem;
    white-space: nowrap;
}

.sito-nav-voce:hover { color: var(--rdb-testo); background: var(--rdb-sfondo); }

.sito-nav-voce.attiva {
    color: var(--rdb-rosa-scuro, var(--rdb-rosa));
    background: var(--rdb-rosa-chiaro, var(--rdb-sfondo));
}

.sito-personale { padding-bottom: 5.5rem; /* spazio per la barra contattami */ }

/* accenti del sito nel colore aziendale */
.sito-personale .chip-icona {
    background: var(--rdb-rosa-chiaro, var(--rdb-sfondo));
    color: var(--rdb-rosa-scuro, var(--rdb-muto));
}

.sito-slide {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: linear-gradient(120deg, var(--rdb-rosa-chiaro, var(--rdb-carta)), var(--rdb-carta) 70%);
    border: 1px solid var(--rdb-bordo);
    border-radius: var(--rdb-raggio-sm);
    padding: 2rem 2.75rem;
    min-height: 260px;
}

.sito-slide img {
    max-height: 200px;
    max-width: 40%;
    object-fit: contain;
}

.immagine-catalogo {
    height: 160px;
    object-fit: contain;
    padding: 1rem 1rem 0;
}

.immagine-prodotto {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.barra-contattami {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: .75rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .5rem;
    /* sfondo neutro chiaro: i bottoni verdi devono staccare */
    background: var(--rdb-carta);
    color: var(--rdb-testo);
    border: 1px solid var(--rdb-bordo);
    border-radius: 2rem;
    padding: .4rem .5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.barra-contattami .btn { border-radius: 1.5rem; }

/* --- Biglietto da visita (pagina-contatto stile Linktree) ------------ */
.biglietto-pagina {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: linear-gradient(180deg, var(--rdb-rosa-chiaro, var(--rdb-sfondo)), var(--rdb-sfondo) 320px);
    padding: 2.5rem 1rem 2rem;
}

.biglietto {
    width: 100%;
    max-width: 430px;
    text-align: center;
}

.biglietto-foto { margin-bottom: 1rem; border-width: 3px; }

/* recapito a cerchio col numero visibile sotto */
.biglietto-recapito-blocco {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
}

.biglietto-recapito-testo {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: .78rem;
    font-weight: 500;
    color: var(--rdb-testo);
}

/* box finale: QR da inquadrare + qualifica dell'incaricato */
.biglietto-riquadro-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--rdb-carta);
    border: 1px solid var(--rdb-bordo);
    border-radius: var(--rdb-raggio-sm);
    padding: 1.1rem;
    margin-top: 1.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.biglietto-qr {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--rdb-bordo);
    border-radius: .6rem;
    padding: .35rem;
    cursor: pointer;
}

.biglietto-qr svg { width: 100%; height: 100%; display: block; }

.biglietto-qr-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, .78);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: pointer;
    text-align: center;
}

.biglietto-qr-overlay[hidden] { display: none; }

.biglietto-qr-grande {
    background: #fff;
    padding: 1.25rem;
    border-radius: 1rem;
    width: min(78vw, 340px);
}

.biglietto-qr-grande svg { width: 100%; height: auto; display: block; }

.biglietto-recapito {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.biglietto-bottone {
    display: block;
    padding: .9rem 1.2rem;
    background: var(--rdb-carta);
    border: 1px solid var(--rdb-bordo);
    border-radius: 2rem;
    color: var(--rdb-testo);
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    box-shadow: var(--rdb-ombra, 0 1px 2px rgba(0, 0, 0, .05));
    transition: transform .12s ease, box-shadow .12s ease;
}

.biglietto-bottone:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    color: var(--rdb-rosa-scuro, var(--rdb-testo));
}

.biglietto-bottone-sito {
    background: var(--rdb-rosa);
    border-color: var(--rdb-rosa);
    color: #fff;
}

.biglietto-bottone-sito:hover { color: #fff; }

/* --- "Insieme ci piace": diario-percorso del cliente ----------------- */
.icp-stato {
    background: var(--rdb-carta);
    border: 1px solid var(--rdb-bordo);
    border-radius: var(--rdb-raggio-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--rdb-testo);
}

.icp-stato .bi { color: var(--rdb-rosa); }

.icp-giorni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.icp-giorno {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rdb-carta);
    border: 1px solid var(--rdb-bordo);
    border-radius: 50%;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 600;
    color: var(--rdb-testo);
    text-decoration: none;
}

a.icp-giorno:hover { border-color: var(--rdb-rosa); color: var(--rdb-rosa-scuro, var(--rdb-rosa)); }

.icp-giorno.corrente {
    background: var(--rdb-rosa);
    border-color: var(--rdb-rosa);
    color: #fff;
}

.icp-giorno.bloccato {
    background: var(--rdb-sfondo);
    color: var(--rdb-muto);
    font-size: .8rem;
}

.icp-barra-giorno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.icp-barra-vuota { width: 38px; }

/* card piccole degli articoli del giorno (lettura in popup) */
.icp-articolo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    background: var(--rdb-carta);
    border: 1px solid var(--rdb-bordo);
    border-radius: var(--rdb-raggio-sm);
    padding: .75rem;
    cursor: pointer;
    text-align: center;
}

.icp-articolo:hover { border-color: var(--rdb-rosa); }

.icp-articolo img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    border-radius: calc(var(--rdb-raggio-sm) - 4px);
}

.icp-articolo-icona {
    width: 100%;
    height: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rdb-rosa-chiaro, var(--rdb-sfondo));
    color: var(--rdb-rosa-scuro, var(--rdb-muto));
    border-radius: calc(var(--rdb-raggio-sm) - 4px);
    font-size: 1.5rem;
}

.icp-articolo-titolo {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: .82rem;
    font-weight: 600;
    color: var(--rdb-testo);
    line-height: 1.3;
}

/* popup di lettura */
.lettore-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lettore-overlay[hidden] { display: none; }

.lettore-scheda {
    position: relative;
    background: var(--rdb-carta);
    border-radius: var(--rdb-raggio-sm);
    width: min(94vw, 640px);
    max-height: 88vh;
    display: flex;
    text-align: left;
}

.lettore-corpo {
    overflow-y: auto;
    padding: 1.5rem;
    width: 100%;
}

.lettore-chiudi {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 1;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--rdb-sfondo);
    color: var(--rdb-testo);
    cursor: pointer;
}

body.lettore-aperto { overflow: hidden; }

/* --- Quiz pubblico (/test/{codice}) ---------------------------------- */
.quiz-pagina { max-width: 560px; }

.quiz-domanda {
    background: var(--rdb-carta);
    border: 1px solid var(--rdb-bordo);
    border-radius: var(--rdb-raggio-sm);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.quiz-domanda-testo {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 600;
    margin-bottom: .75rem;
}

.quiz-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rdb-rosa-chiaro, var(--rdb-sfondo));
    color: var(--rdb-rosa-scuro, var(--rdb-muto));
    font-size: .85rem;
    margin-right: .35rem;
}

.quiz-risposta {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem .7rem;
    border: 1px solid var(--rdb-bordo);
    border-radius: .6rem;
    margin-bottom: .5rem;
    cursor: pointer;
}

.quiz-risposta:hover { border-color: var(--rdb-rosa); }

.quiz-risposta .form-check-input { margin-top: .2rem; flex-shrink: 0; }

.quiz-punteggio {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rdb-rosa);
}

.contenuto-articolo { line-height: 1.7; }

.contenuto-articolo p { margin-bottom: .9rem; }

.contenuto-articolo img { max-width: 100%; height: auto; border-radius: var(--rdb-raggio-sm); }

/* --- Cancello esito quiz: urgenza gentile ---------------------------- */
@keyframes impulso-anello {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rdb-rosa) 45%, transparent); }
    70%  { box-shadow: 0 0 0 16px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.impulso-anello { animation: impulso-anello 1.6s ease-out infinite; }

@keyframes impulso-bottone {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 14px color-mix(in srgb, var(--rdb-rosa) 30%, transparent); }
    50%      { transform: scale(1.03); box-shadow: 0 10px 24px color-mix(in srgb, var(--rdb-rosa) 45%, transparent); }
}

.impulso-bottone { animation: impulso-bottone 1.4s ease-in-out infinite; }

/* l'esito è "lì sotto", sfocato dietro il lucchetto */
.esito-sfocato {
    position: relative;
    border: 1px dashed var(--rdb-bordo);
    border-radius: var(--rdb-raggio-sm);
    padding: 1rem 1.15rem;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}

.esito-sfocato .esito-righe { filter: blur(7px); }

.esito-sfocato .esito-lucchetto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: var(--rdb-rosa);
}

@media (prefers-reduced-motion: reduce) {
    .impulso-anello, .impulso-bottone { animation: none; }
}

/* --- Sito personale: header col cerca e navbar colorata (modello storico) --- */
.sito-cerca { flex: 1 1 auto; max-width: 430px; margin-left: auto; }

.sito-navbar {
    background: var(--rdb-rosa);
    padding: .4rem 0;
}

.sito-navbar .sito-nav-voce {
    color: rgba(255, 255, 255, .92);
    font-weight: 600;
}

.sito-navbar .sito-nav-voce:hover { color: #fff; background: rgba(255, 255, 255, .16); }

.sito-navbar .sito-nav-voce.attiva { color: var(--rdb-rosa); background: #fff; }

.btn-chiamami {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    color: var(--rdb-testo);
    border-radius: 999px;
    padding: .35rem 1.05rem;
    text-decoration: none;
    box-shadow: var(--rdb-ombra);
    white-space: nowrap;
}

.btn-chiamami:hover { color: var(--rdb-rosa); }

.btn-chiamami .bi { color: var(--rdb-rosa); font-size: 1.15rem; }

/* icone tonde nell'header del sito (WhatsApp, email) */
.azione-sito {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--rdb-bordo);
    background: #fff;
    color: var(--rdb-rosa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    text-decoration: none;
}

.azione-sito:hover { background: var(--rdb-rosa-chiaro); color: var(--rdb-rosa-scuro); }

/* cerca sulla navbar colorata */
.cerca-navbar { border-color: transparent; min-width: 210px; }

@media (max-width: 575px) {
    .cerca-navbar { min-width: 0; width: 130px; }
    .btn-chiamami { padding: .3rem .7rem; gap: .4rem; }
    .btn-chiamami .testo-micro { display: none; }
    .sito-testata { flex-wrap: wrap; row-gap: .5rem; }
}

/* hero della home: fascia gradiente, testo a sinistra e prodotto intero */
.hero-sito { margin-inline: calc(50% - 50vw); }

.hero-sito-lastra {
    background: linear-gradient(115deg, var(--rdb-rosa-chiaro) 0%, #fff 62%);
    border-bottom: 1px solid var(--rdb-bordo);
}

.hero-sito-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: clamp(280px, 34vw, 400px);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.hero-sito-testo { max-width: 46%; }

.hero-sito-titolo {
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--rdb-testo);
    margin-bottom: .5rem;
}

.hero-sito-figura {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-sito-figura img {
    max-height: clamp(200px, 26vw, 320px);
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(44, 40, 35, .18));
}

@media (max-width: 767px) {
    .hero-sito-riga { flex-direction: column-reverse; text-align: center; gap: 1rem; }
    .hero-sito-testo { max-width: 100%; }
}

.hero-sito .carousel-control-prev,
.hero-sito .carousel-control-next { width: 3.5rem; }

.hero-sito .carousel-control-prev-icon,
.hero-sito .carousel-control-next-icon { filter: invert(.6) grayscale(1); }

/* ---- downline: catena sponsor e squadra ---- */
.avatar-downline {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--rdb-bordo);
    flex-shrink: 0;
}

.avatar-downline-vuoto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rdb-rosa-chiaro, var(--rdb-sfondo));
    color: var(--rdb-rosa-scuro, var(--rdb-muto));
    font-weight: 600;
    font-size: .85rem;
}

/* variante piccolina: la downline in dashboard */
.avatar-downline.avatar-mini {
    width: 22px;
    height: 22px;
    border-width: 1px;
    font-size: .6rem;
}

.catena-sponsor { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }

.anello-catena {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid var(--rdb-bordo);
    border-radius: 999px;
    padding: .35rem .95rem .35rem .45rem;
    background: #fff;
}

.anello-catena.anello-io {
    background: var(--rdb-rosa-chiaro, var(--rdb-sfondo));
    border-color: var(--rdb-rosa, var(--rdb-bordo));
}

/* scala della risalita: verticale, con rientro crescente verso il basso */
.scala-sponsor { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; overflow-x: auto; }

.scala-sponsor .anello-catena { flex-shrink: 0; }

.anello-catena.anello-capo {
    border-color: var(--rdb-rosa-scuro, var(--rdb-bordo));
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .07);
}

.gradino-freccia { color: var(--rdb-muto); line-height: 1; padding-left: 1.15rem; font-size: 1.05rem; }

/* ---- diario ICP: sezioni del giorno a toggle ---- */
.icp-sezione {
    border: 1px solid var(--rdb-bordo);
    border-radius: .75rem;
    background: #fff;
    margin-bottom: .6rem;
}

.icp-sezione summary {
    cursor: pointer;
    list-style: none;
    padding: .8rem 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.icp-sezione summary::-webkit-details-marker { display: none; }

.icp-sezione summary::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    margin-left: auto;
    transition: transform .15s ease;
}

.icp-sezione[open] summary::after { transform: rotate(180deg); }

.icp-sezione summary i { color: var(--rdb-rosa-scuro, inherit); }

.icp-sezione-corpo { padding: 0 1.1rem 1rem; }

/* iframe nei contenuti (video incorporati da WP): sempre pieni e 16/9 */
.contenuto-articolo iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: .5rem;
}

/* albero categorie formazione: rientro per livello */
.albero-categorie .albero-voce { padding: .3rem 0 .3rem calc(var(--livello, 0) * 1.1rem); border-bottom: 1px dashed var(--rdb-bordo); }
.albero-categorie .albero-voce:last-child { border-bottom: 0; }
.albero-categorie .albero-voce a:hover span:first-child { color: var(--rdb-rosa-scuro, inherit) !important; }

/* colonna categorie formazione: voce attiva con barra a sinistra */
.elenco-categorie .list-group-item.attiva {
    background: var(--rdb-rosa-chiaro, var(--rdb-sfondo));
    font-weight: 600;
    position: relative;
}

.elenco-categorie .list-group-item.attiva::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rdb-rosa, var(--rdb-bordo));
}

/* chips delle selezioni (pack/ricette/approfondimenti nei percorsi) */
.scelte-selezione { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.9rem; }
.scelte-selezione:empty::before { content: 'Nessuna selezione'; color: var(--rdb-muto); font-size: .8rem; }
.scelta-chip { cursor: pointer; }
.scelta-chip:hover { background: #fdeaea !important; }

/* diario ICP: gabbia più larga del biglietto (contenuti ricchi) */
.biglietto-largo { max-width: 720px; }

/* modal di selezione: elenco scrollabile a sx, anteprima a dx */
.elenco-modal { max-height: 52vh; overflow-y: auto; padding-right: .25rem; }

.anteprima-modal {
    background: var(--rdb-sfondo, #f8f9fa);
    border: 1px dashed var(--rdb-bordo);
    border-radius: .75rem;
    padding: 1rem;
    min-height: 200px;
    position: sticky;
    top: 0;
}

.anteprima-modal-foto {
    width: 100%;
    max-height: 170px;
    object-fit: contain;
    border-radius: .5rem;
    background: #fff;
}

/* insiemecipiace: card-invito alla creazione (tratteggiata) */
.carta-crea {
    border: 2px dashed var(--rdb-bordo);
    background: transparent;
    color: var(--rdb-muto);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.carta-crea:hover {
    border-color: var(--rdb-rosa, var(--rdb-bordo));
    color: var(--rdb-rosa-scuro, inherit);
    background: var(--rdb-rosa-chiaro, #fff);
}

/* invito ICP attivo: la card fa da navigazione */
.invito-icp.attiva {
    border-color: var(--rdb-rosa, var(--rdb-bordo));
    background: var(--rdb-rosa-chiaro, #fff);
    box-shadow: none;
}

/* card dei prodotti scelti (pack percorsi): foto, nome, X, dettaglio al click */
.carta-scelta {
    position: relative;
    width: 118px;
    border: 1px solid var(--rdb-bordo);
    border-radius: .6rem;
    background: #fff;
    padding: .45rem .45rem .5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.carta-scelta:hover { border-color: var(--rdb-rosa, var(--rdb-bordo)); box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .06); }

.carta-scelta img,
.carta-scelta .scelta-foto-vuota {
    width: 100%;
    height: 64px;
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rdb-muto);
    font-size: 1.4rem;
}

.carta-scelta .scelta-nome {
    display: block;
    font-size: .7rem;
    line-height: 1.2;
    margin-top: .3rem;
    overflow: hidden;
    max-height: 2.4em;
}

.scelta-rimuovi {
    position: absolute;
    top: -.45rem;
    right: -.45rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1px solid var(--rdb-bordo);
    background: #fff;
    color: var(--rdb-muto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.scelta-rimuovi:hover { color: #dc3545; border-color: #dc3545; }

/* testa carrello: miniature dei prodotti */
.carrello-miniatura {
    width: 40px;
    height: 40px;
    border-radius: .45rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--rdb-bordo);
}

.carrello-miniatura-vuota {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rdb-muto);
}

/* registrazione a due passi: account → attivazione azienda */
.passi-registrazione { display: flex; align-items: center; gap: .6rem; }

.passi-registrazione .passo { display: flex; align-items: center; gap: .45rem; color: var(--rdb-muto); }

.passi-registrazione .passo-cerchio {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 2px solid var(--rdb-bordo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
    background: #fff;
}

.passi-registrazione .passo.attivo { color: inherit; }

.passi-registrazione .passo.attivo .passo-cerchio {
    border-color: var(--rdb-rosa, var(--rdb-bordo));
    background: var(--rdb-rosa-chiaro, #fff);
    color: var(--rdb-rosa-scuro, inherit);
}

.passi-registrazione .passo.fatto .passo-cerchio {
    background: var(--rdb-rosa, var(--rdb-bordo));
    border-color: var(--rdb-rosa, var(--rdb-bordo));
    color: #fff;
}

.passi-registrazione .passo-testo { font-size: .8rem; font-weight: 600; }

.passi-registrazione .passo-linea { flex-grow: 1; height: 2px; background: var(--rdb-bordo); border-radius: 2px; }

.passi-registrazione .passo-linea.fatta { background: var(--rdb-rosa, var(--rdb-bordo)); }

/* dashboard: livello attuale nella scala del piano marketing */
.badge.livello-attuale {
    background: var(--rdb-rosa, #d63384);
    color: #fff;
}

/* dashboard: card brillanti con filigrana */
.carta-brillante {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--rdb-rosa-chiaro, #fdf3f6) 0%, #fff 55%);
    border-color: var(--rdb-rosa-chiaro, var(--rdb-bordo));
}

.carta-brillante .icona-filigrana {
    position: absolute;
    right: -1.2rem;
    bottom: -1.6rem;
    font-size: 9rem;
    line-height: 1;
    color: var(--rdb-rosa, #d63384);
    opacity: .08;
    pointer-events: none;
}