/* Font Inter ospitato sul sito (nessuna richiesta a server esterni) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }

/* ===========================================================
   Superiori Bresciane — foglio di stile
   Estetica minimale: bianco, grigio chiaro, angoli arrotondati
   =========================================================== */

:root {
    --bianco: #FFFFFF;
    --grigio-100: #F7F7F8;
    --grigio-200: #EFEFF1;
    --grigio-300: #E2E2E6;
    --grigio-500: #9A9AA3;
    --testo: #1C1C21;
    --testo-tenue: #6E6E78;
    --accento: #2E2E35;
    --accento-hover: #17171B;
    --verde: #2F7A4F;
    --verde-sfondo: #EEF6F1;
    --rosso: #B3403A;
    --rosso-sfondo: #FCEEED;

    --raggio: 16px;
    --raggio-piccolo: 10px;
    --raggio-pillola: 999px;

    --font-titoli: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
    --font-testo: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bianco);
    color: var(--testo);
    font-family: var(--font-testo);
    font-size: 16px;
    line-height: 1.55;
}

a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

h1, h2, h3 {
    font-family: var(--font-titoli);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.5em;
    letter-spacing: -0.015em;
}

p { margin: 0 0 1em; max-width: 65ch; color: var(--testo-tenue); }

.contenitore {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
}

.contenitore-stretto { max-width: 640px; }
.contenitore-ampia { max-width: 900px; }

/* ---------- Intestazione ---------- */
.intestazione {
    background: var(--bianco);
}

.barra-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    flex-wrap: wrap;
    gap: 12px;
}

.marchio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-titoli);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--testo);
}

.logo-marchio {
    height: 46px;
    width: auto;
    display: block;
}

.marchio .citta {
    color: var(--testo-tenue);
    font-weight: 400;
    font-size: 0.95rem;
}

.nav-link {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 0.95rem;
}

.nav-link a { color: var(--testo-tenue); }

.campanella-notifiche {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-100);
    border: 1px solid var(--grigio-300);
    color: var(--testo-tenue) !important;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.campanella-notifiche:hover {
    background: var(--bianco);
    border-color: var(--accento);
    color: var(--accento) !important;
}

.campanella-notifiche svg { width: 18px; height: 18px; }

.badge-campanella {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: var(--raggio-pillola);
    background: var(--rosso);
    color: var(--bianco);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.campanella-notifiche .badge-campanella { border: 2px solid var(--bianco); }

.pulsante {
    display: inline-block;
    padding: 11px 22px;
    border: 1px solid var(--accento);
    border-radius: var(--raggio-pillola);
    background: var(--accento);
    color: var(--bianco) !important;
    font-family: var(--font-testo);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.pulsante:hover { background: var(--accento-hover); border-color: var(--accento-hover); }

.pulsante-secondario {
    background: var(--grigio-100);
    border-color: var(--grigio-200);
    color: var(--testo) !important;
}
.pulsante-secondario:hover { background: var(--grigio-200); }

.pulsante-pericolo {
    background: var(--bianco);
    border-color: var(--rosso);
    color: var(--rosso) !important;
}
.pulsante-pericolo:hover { background: var(--rosso-sfondo); }

/* ---------- Hero ---------- */
.hero {
    padding: 72px 0 56px;
}

.hero .occhiello {
    display: inline-block;
    color: var(--testo-tenue);
    background: var(--grigio-100);
    border-radius: var(--raggio-pillola);
    padding: 6px 16px;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 22px;
}

.hero h1 {
    font-size: clamp(2.1rem, 4.5vw, 3.2rem);
    color: var(--testo);
}

.hero .sottotitolo {
    font-size: 1.1rem;
    color: var(--testo-tenue);
    max-width: 52ch;
    margin-top: 16px;
}

.azioni-hero {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.hero-scelta {
    min-height: calc(100vh - 74px);
    display: flex;
    align-items: center;
    padding: 40px 0;
}

.blocco-scelta {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.blocco-scelta .occhiello { display: inline-block; }
.blocco-scelta h1 { max-width: none; }
.blocco-scelta .sottotitolo { max-width: none; margin-left: auto; margin-right: auto; }

.azioni-hero-grandi { justify-content: center; }

.pulsante-grande {
    padding: 14px 32px;
    font-size: 1rem;
}

/* ---------- Sezioni contenuto ---------- */
.sezione { padding: 48px 0; }
.sezione-divisa { border-top: 1px solid var(--grigio-200); }

.griglia-ruoli {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ruolo-cella {
    padding: 26px 24px;
    background: var(--grigio-100);
    border-radius: var(--raggio);
}

.ruolo-cella h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--testo); }
.ruolo-cella p { color: var(--testo-tenue); font-size: 0.95rem; margin: 0; }

/* ---------- Moduli (form) ---------- */
.scheda-modulo {
    max-width: 460px;
    margin: 0 auto;
    padding: 36px;
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
}

.scheda-modulo-larga { max-width: 640px; }

.scheda-modulo h1 { font-size: 1.6rem; color: var(--testo); }
.scheda-modulo .sottotitolo {
    color: var(--testo-tenue);
    margin-top: -6px;
    margin-bottom: 26px;
    font-size: 0.96rem;
}

.campo { margin-bottom: 16px; }

.campo label {
    display: block;
    font-size: 0.86rem;
    color: var(--testo-tenue);
    margin-bottom: 6px;
    font-weight: 500;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
    font-family: var(--font-testo);
    font-size: 1rem;
    color: var(--testo);
}

.campo textarea { resize: vertical; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--accento);
    background: var(--bianco);
}

.riga-due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.campo-consenso { margin-bottom: 12px; }

.etichetta-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.94rem;
    color: var(--testo-tenue);
    cursor: pointer;
}

.etichetta-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    accent-color: var(--accento);
    flex-shrink: 0;
    cursor: pointer;
}

.modulo-piede {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--testo-tenue);
    text-align: center;
}

.avviso {
    padding: 12px 16px;
    border-radius: var(--raggio-piccolo);
    color: var(--rosso);
    background: var(--rosso-sfondo);
    font-size: 0.92rem;
    margin-bottom: 18px;
}

.conferma {
    padding: 12px 16px;
    border-radius: var(--raggio-piccolo);
    color: var(--verde);
    background: var(--verde-sfondo);
    font-size: 0.92rem;
    margin-bottom: 18px;
}

/* ---------- Dashboard utente ---------- */
.pannello-benvenuto {
    background: var(--grigio-100);
    border-radius: var(--raggio);
    padding: 30px 32px;
    margin-bottom: 20px;
}

.etichetta-ruolo {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--raggio-pillola);
    background: var(--bianco);
    color: var(--testo-tenue);
    border: 1px solid var(--grigio-300);
}

/* ---------- Scheda dati profilo ---------- */
.scheda-dati {
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    padding: 28px 30px;
    margin-bottom: 20px;
}

.titolo-scheda {
    font-size: 1.15rem;
    margin-bottom: 18px;
}

.griglia-dati {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin: 0;
}

.griglia-dati dt {
    font-size: 0.78rem;
    color: var(--testo-tenue);
    margin-bottom: 3px;
}

.griglia-dati dd {
    margin: 0;
    font-size: 0.96rem;
    color: var(--testo);
}

.riga-documento {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--grigio-200);
}

.riga-documento:last-of-type { border-bottom: none; }

.riga-documento-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
}

.riga-documento-azioni {
    display: flex;
    gap: 12px;
    align-items: center;
}

.lista-storico {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.voce-storico {
    padding: 14px 16px;
    background: var(--grigio-100);
    border-radius: var(--raggio-piccolo);
}

.voce-storico-intestazione {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.voce-storico p {
    color: var(--testo);
    font-size: 0.92rem;
}

.banner-disabilitato {
    background: var(--rosso-sfondo);
    color: var(--rosso);
    border-radius: var(--raggio);
    padding: 18px 22px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

/* ---------- Hub: pulsanti categoria ---------- */
.griglia-categorie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.griglia-categorie-compatta {
    grid-template-columns: repeat(2, 1fr);
}

.pulsante-categoria {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    min-height: 132px;
    padding: 22px 22px;
    background: var(--bianco);
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio);
    color: var(--testo) !important;
    text-decoration: none !important;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    position: relative;
}

.pulsante-categoria:hover {
    background: var(--grigio-100);
    border-color: var(--testo);
    transform: translateY(-2px);
}

.pulsante-categoria-icona {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
    color: var(--testo);
}

.pulsante-categoria-icona svg { width: 18px; height: 18px; }

.pulsante-categoria-riga-sotto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pulsante-categoria-titolo {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
}

.pulsante-categoria-freccia {
    color: var(--testo-tenue);
    font-size: 1.2rem;
}

.badge-urgente {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--raggio-pillola);
    background: var(--rosso);
    color: var(--bianco);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.pulsante-categoria .badge-urgente {
    position: absolute;
    top: 16px;
    right: 16px;
}

/* ---------- Liste/griglie contenuti (news/convenzioni/appuntamenti) ---------- */
.lista-contenuti {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 22px;
    align-items: start;
}

/* Variante "uniforme": tutte le card della stessa altezza e con la
   stessa struttura interna — usata per gli appuntamenti, dove
   immagini e testo di lunghezza diversa rendevano la griglia disordinata. */
.lista-contenuti-uniforme {
    align-items: stretch;
}

.lista-contenuti-uniforme .contenuto-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lista-contenuti-uniforme .contenuto-item-corpo {
    margin-top: auto;
    padding-top: 10px;
}

.lista-contenuti-uniforme .link-scopri-di-piu {
    margin-top: 4px;
}

.contenuto-item {
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    padding: 22px 24px;
}

.contenuto-item.contenuto-urgente {
    border-color: var(--rosso);
}

.contenuto-item-intestazione {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contenuto-item-intestazione h2 {
    font-size: 1.05rem;
    margin: 0;
    flex: 1;
}

.contenuto-item-data {
    color: var(--testo-tenue);
    font-size: 0.82rem;
    margin: 4px 0 12px;
}

.contenuto-item-corpo {
    color: var(--testo);
    font-size: 0.92rem;
    line-height: 1.6;
}

.contenuto-troncato {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.contenuto-troncato.espanso {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.link-scopri-di-piu {
    display: inline-block;
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    color: var(--accento);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}

.archivio-eventi-passati {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--grigio-200);
}

.archivio-eventi-passati summary {
    cursor: pointer;
    font-weight: 500;
    font-size: 0.98rem;
    color: var(--testo-tenue);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.archivio-eventi-passati summary::-webkit-details-marker { display: none; }

.archivio-eventi-passati summary::before {
    content: '›';
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 1.1rem;
}

.archivio-eventi-passati[open] summary::before { transform: rotate(90deg); }

.archivio-eventi-passati .contenuto-item { opacity: 0.8; }

.contenuto-item-evento {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 14px;
    padding: 12px 14px;
    background: var(--grigio-100);
    border-radius: var(--raggio-piccolo);
    font-size: 0.85rem;
    color: var(--testo);
}

.contenuto-item-evento strong { color: var(--testo-tenue); font-weight: 500; }

.contenuto-item-immagine {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--raggio-piccolo);
    margin-bottom: 14px;
    display: block;
    background: var(--grigio-100);
}

.contenuto-item-logo {
    height: 44px;
    width: auto;
    border-radius: 8px;
    margin-bottom: 12px;
}

.contenuto-item-descrizione {
    font-weight: 500;
    color: var(--testo);
    margin: 6px 0 10px;
}

.tag-categoria-news {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-100);
    color: var(--testo-tenue);
    margin-bottom: 6px;
}

.opzioni-validita {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.etichetta-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--testo);
    cursor: pointer;
}

.etichetta-radio input { width: 18px; height: 18px; accent-color: var(--accento); }

.sotto-blocco-validita {
    margin: 10px 0 16px;
    padding: 14px 16px;
    background: var(--grigio-100);
    border-radius: var(--raggio-piccolo);
}

.griglia-giorni {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.etichetta-checkbox-compatta {
    font-size: 0.86rem;
    gap: 8px;
}
.etichetta-checkbox-compatta input[type="checkbox"] { width: 18px; height: 18px; }

/* ---------- Paginazione mobile ---------- */
.controlli-paginazione {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.indicatore-pagina {
    font-size: 0.88rem;
    color: var(--testo-tenue);
    min-width: 40px;
    text-align: center;
}

/* ---------- Tabelle scrollabili su schermi stretti ---------- */
.tabella-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--raggio);
    /* Il bordo lo disegna il riquadro arrotondato (non la tabella quadrata):
       così gli angoli non "mordono" più le linee della tabella. */
    border: 1px solid var(--grigio-200);
}
.tabella-scroll table.tabella-utenti { border-radius: 0; border: none; min-width: 640px; }

/* ---------- Social ---------- */
/* ---------- Card virtuale ---------- */
.card-virtuale {
    background: var(--bianco);
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio);
    padding: 30px;
    text-align: center;
}

.card-virtuale-intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    text-align: left;
}

.card-virtuale-marchio {
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 1rem;
}

.card-virtuale-nome {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 22px;
}

.card-virtuale-qr {
    display: flex;
    justify-content: center;
    padding: 16px;
    background: var(--grigio-100);
    border-radius: var(--raggio-piccolo);
    margin-bottom: 18px;
}

.card-virtuale-qr img { display: block; border-radius: 8px; }

.card-virtuale-codice {
    font-family: monospace;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    color: var(--testo-tenue);
}

/* ---------- Esito scansione (area attività) ---------- */
.esito-scansione {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-radius: var(--raggio);
    margin-bottom: 22px;
    font-size: 0.95rem;
}

.esito-scansione-titolo { font-weight: 600; font-size: 1.05rem; }

.esito-successo { background: var(--verde-sfondo); color: var(--verde); }
.esito-fallito { background: var(--rosso-sfondo); color: var(--rosso); }

.sezione-social {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--grigio-200);
}

.sezione-social h2 {
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.sezione-social .sottotitolo-social {
    color: var(--testo-tenue);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* ---------- Partner ---------- */
.griglia-partner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 22px;
}

.scheda-partner {
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    padding: 22px;
    text-align: center;
}

.scheda-partner-logo {
    height: 56px;
    width: auto;
    max-width: 100%;
    margin-bottom: 14px;
}

.scheda-partner h2 { font-size: 1.02rem; margin-bottom: 6px; }
.scheda-partner p { font-size: 0.88rem; margin: 0; }

.riga-social-partner {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.icona-social-partner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--raggio-pillola);
    border: 1px solid var(--grigio-300);
    color: var(--testo-tenue);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.icona-social-partner:hover { border-color: var(--accento); color: var(--accento); }
.icona-social-partner svg { width: 16px; height: 16px; }

.griglia-partner-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.griglia-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pulsante-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: var(--bianco);
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-pillola);
    color: var(--testo) !important;
    text-decoration: none !important;
    font-size: 0.92rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pulsante-social:hover { background: var(--grigio-100); border-color: var(--testo); }
.pulsante-social svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Pannello admin ---------- */
.corpo-admin {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--bianco);
}

.barra-laterale {
    background: var(--grigio-100);
    border-right: 1px solid var(--grigio-200);
    color: var(--testo);
    padding: 28px 20px;
}

.barra-laterale .marchio-admin {
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.logo-marchio-admin {
    height: 42px;
    width: auto;
    display: block;
    margin-bottom: 4px;
}

.barra-laterale .sotto-marchio {
    font-size: 0.82rem;
    color: var(--testo-tenue);
    margin-bottom: 30px;
}

.menu-admin { display: flex; flex-direction: column; gap: 2px; }

.menu-admin a {
    color: var(--testo-tenue);
    padding: 10px 12px;
    border-radius: var(--raggio-piccolo);
    font-size: 0.94rem;
    font-weight: 500;
}
.menu-admin a:hover { background: var(--grigio-200); text-decoration: none; }
.menu-admin a.attivo { background: var(--accento); color: var(--bianco); }

.contenuto-admin { padding: 34px 40px; min-width: 0; }

.riga-statistiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.pallino-online {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--verde);
    margin-right: 8px;
    vertical-align: middle;
}

.statistica {
    background: var(--grigio-100);
    border-radius: var(--raggio);
    padding: 20px 20px;
}

.statistica .numero {
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 2rem;
    color: var(--testo);
    line-height: 1;
}

.statistica .didascalia {
    color: var(--testo-tenue);
    font-size: 0.85rem;
    margin-top: 8px;
}

.barra-filtri {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.barra-filtri input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: 10px 14px;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
    font-size: 0.92rem;
    color: var(--testo);
}

.barra-filtri select {
    padding: 10px 12px;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
    font-size: 0.92rem;
    color: var(--testo);
}

table.tabella-utenti {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    overflow: hidden;
}

table.tabella-utenti th,
table.tabella-utenti td {
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--grigio-200);
    font-size: 0.92rem;
}

table.tabella-utenti th {
    color: var(--testo-tenue);
    font-weight: 500;
    font-size: 0.8rem;
    background: var(--grigio-100);
}

table.tabella-utenti tr:last-child td { border-bottom: none; }

.azione-tabella {
    font-size: 0.85rem;
    margin-right: 10px;
    white-space: nowrap;
    font-weight: 500;
}

.badge-stato {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--raggio-pillola);
    background: var(--verde-sfondo);
    color: var(--verde);
}
.badge-stato.sospeso { background: var(--rosso-sfondo); color: var(--rosso); }

/* ---------- Piede pagina ---------- */
/* ---------- Documenti legali (privacy, termini) ---------- */
.documento-legale h2 {
    font-size: 1.1rem;
    margin-top: 32px;
    margin-bottom: 10px;
}

.documento-legale p, .documento-legale li {
    color: var(--testo);
    font-size: 0.94rem;
    line-height: 1.7;
    max-width: none;
}

.documento-legale ul {
    padding-left: 20px;
    margin: 0 0 1em;
}

.documento-legale li { margin-bottom: 6px; }

.tabella-informativa {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 20px;
    font-size: 0.88rem;
}

.tabella-informativa th, .tabella-informativa td {
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--grigio-200);
    vertical-align: top;
}

.tabella-informativa th {
    background: var(--grigio-100);
    font-weight: 500;
    color: var(--testo-tenue);
}

.piede {
    border-top: 1px solid var(--grigio-200);
    padding: 26px 0;
    color: var(--testo-tenue);
    font-size: 0.85rem;
}

/* ---------- Reattività ---------- */
@media (max-width: 760px) {
    .logo-marchio { height: 38px; }
    .azione-tabella { display: inline-block; padding: 6px 2px; margin-right: 8px; }
    .griglia-ruoli { grid-template-columns: 1fr; }
    .corpo-admin { grid-template-columns: minmax(0, 1fr); }
    .barra-laterale { display: none; }
    .contenuto-admin { padding: 22px 18px; }
    .riga-statistiche { grid-template-columns: repeat(2, 1fr); }
    .riga-due { grid-template-columns: 1fr; }
    .scheda-modulo { padding: 26px 20px; }
    .griglia-dati { grid-template-columns: 1fr; }
    .hero-scelta { min-height: auto; padding: 60px 0; }
    .griglia-categorie { grid-template-columns: 1fr; }
    .lista-contenuti { grid-template-columns: 1fr; }
    .controlli-paginazione { display: flex; }
    .barra-filtri { flex-direction: column; align-items: stretch; }
    .barra-filtri select, .barra-filtri input[type="text"] { width: 100%; }
    .sezione { padding: 32px 0; }
    .contenitore { padding: 0 18px; }
    .griglia-partner { grid-template-columns: 1fr; }
}

@media (max-width: 980px) and (min-width: 761px) {
    .griglia-categorie { grid-template-columns: repeat(2, 1fr); }
    .lista-contenuti { grid-template-columns: repeat(2, 1fr); }
    .griglia-partner { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------- Notifiche ---------- */
.lista-notifiche {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 20px;
}

.voce-notifica {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--raggio-piccolo);
    color: var(--testo) !important;
    text-decoration: none !important;
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
}

.voce-notifica:hover { background: var(--grigio-100); }

.voce-notifica-tipo {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-100);
    color: var(--testo-tenue);
}

.voce-notifica-testo { flex: 1; font-size: 0.92rem; }

.voce-notifica-data {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--testo-tenue);
}

@media (max-width: 760px) {
    .voce-notifica { flex-wrap: wrap; }
    .voce-notifica-data { width: 100%; }
}

/* ---------- Chat ---------- */
.scheda-chat {
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    overflow: hidden;
}

.intestazione-chat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--grigio-200);
    background: var(--grigio-100);
}

.avatar-amministrazione {
    width: 42px;
    height: 42px;
    font-size: 0.95rem;
    background: var(--accento);
    color: var(--bianco);
}

.intestazione-chat-titolo { font-weight: 600; font-size: 0.98rem; }
.intestazione-chat-sottotitolo { font-size: 0.8rem; color: var(--testo-tenue); margin-top: 1px; }

.finestra-chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 420px;
    overflow-y: auto;
    padding: 22px;
    background: var(--bianco);
}

.chat-vuota {
    text-align: center;
    color: var(--testo-tenue);
    font-size: 0.9rem;
    margin: auto;
    line-height: 1.6;
}

.bolla-chat {
    max-width: 74%;
    padding: 10px 15px;
    border-radius: 16px;
    font-size: 0.92rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.bolla-utente {
    align-self: flex-end;
    background: var(--accento);
    color: var(--bianco);
    border-bottom-right-radius: 4px;
}

.bolla-utente .bolla-chat-data { color: rgba(255,255,255,0.7); }

.bolla-admin {
    align-self: flex-start;
    background: var(--grigio-100);
    color: var(--testo);
    border-bottom-left-radius: 4px;
}

.bolla-chat-testo { line-height: 1.5; }

.bolla-chat-data {
    font-size: 0.68rem;
    color: var(--testo-tenue);
    margin-top: 5px;
    text-align: right;
}

.modulo-chat {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border-top: 1px solid var(--grigio-200);
    background: var(--bianco);
}

.modulo-chat textarea {
    flex: 1;
    padding: 11px 16px;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-pillola);
    background: var(--grigio-100);
    font-family: var(--font-testo);
    font-size: 0.95rem;
    resize: none;
    max-height: 120px;
    line-height: 1.4;
}

.modulo-chat textarea:focus { outline: none; border-color: var(--accento); background: var(--bianco); }

.pulsante-invia-chat {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accento);
    color: var(--bianco);
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pulsante-invia-chat:hover { background: var(--accento-hover); }
.pulsante-invia-chat svg { width: 19px; height: 19px; }

/* ---------- Chat admin (elenco + conversazione) ---------- */
.layout-chat-admin {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}

.elenco-conversazioni {
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    overflow: hidden;
}

.voce-conversazione {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--grigio-200);
    text-decoration: none !important;
    color: var(--testo) !important;
}

.voce-conversazione:last-child { border-bottom: none; }
.voce-conversazione:hover { background: var(--grigio-100); }
.voce-conversazione.attiva { background: var(--grigio-100); border-left: 3px solid var(--accento); }

.avatar-conversazione { width: 36px; height: 36px; font-size: 0.8rem; flex-shrink: 0; }

.voce-conversazione-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.voce-conversazione-nome { font-weight: 500; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-conversazione-ruolo { font-size: 0.75rem; color: var(--testo-tenue); }

.finestra-conversazione {
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    overflow: hidden;
}

.intestazione-chat-admin { border-bottom: 1px solid var(--grigio-200); background: var(--grigio-100); }

.conversazione-vuota {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 460px;
    color: var(--testo-tenue);
    text-align: center;
    padding: 20px;
}

.conversazione-vuota svg { width: 40px; height: 40px; opacity: 0.5; }
.conversazione-vuota p { margin: 0; font-size: 0.92rem; }

@media (max-width: 760px) {
    .layout-chat-admin { grid-template-columns: 1fr; }
    .bolla-chat { max-width: 88%; }
    .finestra-chat { height: 340px; }
    .elenco-conversazioni { max-height: 260px; overflow-y: auto; }
}

/* ---------- Foto profilo ---------- */
.avatar-utente {
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.avatar-iniziali {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grigio-200);
    color: var(--testo-tenue);
    font-weight: 600;
    flex-shrink: 0;
}

/* ---------- Pulsante "torna indietro" ---------- */
.pulsante-indietro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-100);
    border: 1px solid var(--grigio-300);
    color: var(--testo) !important;
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pulsante-indietro:hover {
    background: var(--bianco);
    border-color: var(--accento);
    color: var(--accento) !important;
}

/* ---------- News in formato orizzontale ---------- */
.lista-notizie {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
}

.voce-notizia {
    display: flex;
    gap: 18px;
    padding: 20px;
    background: var(--bianco);
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.voce-notizia.notizia-urgente { border-color: var(--rosso); }

.voce-notizia-data {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
    color: var(--accento);
}

.voce-notizia-giorno { font-family: var(--font-titoli); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.voce-notizia-mese { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; margin-top: 2px; }

.voce-notizia-corpo { flex: 1; min-width: 0; }

.voce-notizia-intestazione {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.voce-notizia-corpo h2 { font-size: 1.05rem; margin: 0 0 6px; }

.voce-notizia-descrizione {
    font-weight: 500;
    color: var(--testo);
    font-size: 0.92rem;
    margin: 0 0 6px;
}

.voce-notizia-testo-completo {
    color: var(--testo-tenue);
    font-size: 0.88rem;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .voce-notizia { flex-direction: column; gap: 10px; }
    .voce-notizia-data { flex-direction: row; width: auto; height: auto; padding: 6px 12px; gap: 6px; align-self: flex-start; }
}

/* ---------- Barra selezione multipla (invio email di gruppo) ---------- */
.barra-azioni-selezione {
    position: sticky;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 20px;
    background: var(--accento);
    color: var(--bianco);
    border-radius: var(--raggio);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.barra-azioni-selezione span { font-size: 0.9rem; }
.barra-azioni-selezione .pulsante { background: var(--bianco); color: var(--accento) !important; border-color: var(--bianco); }
.barra-azioni-selezione .pulsante:hover { background: var(--grigio-100); }

.elenco-destinatari { display: flex; flex-wrap: wrap; gap: 6px; }

.chip-destinatario {
    font-size: 0.82rem;
    padding: 4px 12px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-100);
    color: var(--testo);
}

/* ---------- Campo caricamento file personalizzato ---------- */
.input-file-nascosto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.campo-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pulsante-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-100);
    border: 1px solid var(--grigio-300);
    color: var(--testo);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.pulsante-file:hover { background: var(--bianco); border-color: var(--accento); }
.pulsante-file svg { width: 16px; height: 16px; }

.input-file-nascosto:focus-visible + .pulsante-file,
.pulsante-file:has(+ .input-file-nascosto:focus-visible) {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

.nome-file-scelto {
    font-size: 0.85rem;
    color: var(--testo-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* ---------- Riquadro download modulo liberatoria ---------- */
.riquadro-scarica-modulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--grigio-100);
    border-radius: var(--raggio-piccolo);
    margin-bottom: 18px;
    font-size: 0.88rem;
}

.riquadro-scarica-modulo p { color: var(--testo-tenue); font-size: 0.85rem; max-width: 46ch; }

@media (max-width: 600px) {
    .riquadro-scarica-modulo { flex-direction: column; align-items: stretch; text-align: left; }
}

/* ---------- Documenti intervista (lato utente) ---------- */
.intestazione-documenti {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.progresso-documenti {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--raggio-pillola);
    background: var(--rosso-sfondo);
    color: var(--rosso);
}

.progresso-documenti.progresso-completo {
    background: var(--verde-sfondo);
    color: var(--verde);
}

.icona-riquadro-modulo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--testo-tenue);
}

.griglia-documenti {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.scheda-documento {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: var(--grigio-100);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio-piccolo);
}

.scheda-documento.documento-completo { border-color: var(--verde); background: var(--verde-sfondo); }
.scheda-documento.documento-mancante { border-color: var(--grigio-300); }

.scheda-documento-intestazione {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.icona-documento {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bianco);
}

.icona-documento svg { width: 17px; height: 17px; }
.documento-completo .icona-documento { color: var(--verde); }
.documento-mancante .icona-documento { color: var(--testo-tenue); }

.scheda-documento-testo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.scheda-documento-titolo {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--testo);
    line-height: 1.35;
}

.badge-stato-documento {
    display: inline-flex;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--raggio-pillola);
}

.badge-stato-documento.stato-caricato { background: var(--verde); color: var(--bianco); }
.badge-stato-documento.stato-mancante { background: var(--grigio-300); color: var(--testo-tenue); }

.scheda-documento-azioni-file {
    display: flex;
    gap: 14px;
    padding-top: 4px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.modulo-upload-documento {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modulo-upload-documento .campo-file { flex-wrap: wrap; }
.modulo-upload-documento .nome-file-scelto { max-width: 100%; }
.pulsante-upload-documento { align-self: flex-start; }

@media (max-width: 700px) {
    .griglia-documenti { grid-template-columns: 1fr; }
}

/* ---------- Selettore membri (assegnazione documenti staff) ---------- */
.selettore-membri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.scheda-membro-selezionabile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.scheda-membro-selezionabile:hover { border-color: var(--accento); }

.scheda-membro-selezionabile input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.avatar-membro-selezione {
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
    flex-shrink: 0;
}

.scheda-membro-nome {
    flex: 1;
    font-size: 0.86rem;
    color: var(--testo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scheda-membro-spunta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--grigio-300);
    color: transparent;
    background: var(--bianco);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.scheda-membro-spunta svg { width: 12px; height: 12px; }

.scheda-membro-selezionabile:has(input:checked) {
    border-color: var(--accento);
    background: var(--bianco);
    box-shadow: 0 0 0 1px var(--accento);
}

.scheda-membro-selezionabile input:checked ~ .scheda-membro-spunta {
    background: var(--accento);
    border-color: var(--accento);
    color: var(--bianco);
}

/* ---------- Menu a tendina admin (solo da cellulare) ---------- */
.barra-menu-admin-mobile {
    display: none;
    position: sticky;
    top: 0;
    z-index: 30;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bianco);
    border-bottom: 1px solid var(--grigio-200);
}

.barra-menu-admin-mobile .logo-marchio-admin-mobile {
    height: 26px;
    width: auto;
    margin-right: auto;
}

.menu-admin-mobile {
    padding: 9px 34px 9px 14px;
    border-radius: var(--raggio-pillola);
    border: 1px solid var(--grigio-300);
    background: var(--grigio-100)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
        no-repeat right 10px center / 16px 16px;
    font-size: 0.86rem;
    font-family: var(--font-testo);
    color: var(--testo);
    max-width: 230px;
    appearance: none;
    -webkit-appearance: none;
}

.menu-admin-mobile:focus { outline: none; border-color: var(--accento); }

@media (max-width: 760px) {
    .barra-menu-admin-mobile { display: flex; }
}

/* ---------- Isole "La nostra storia" (homepage) ---------- */
.isola-storia {
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    padding: 28px 30px;
    margin-bottom: 20px;
}

.isola-storia h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.isola-storia p {
    color: var(--testo);
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: none;
    margin: 0;
}

@media (max-width: 760px) {
    .isola-storia { padding: 22px 20px; }
}

.isola-hero {
    text-align: center;
    padding: 48px 40px;
}

.isola-hero .occhiello { display: inline-block; }
.isola-hero h1 { max-width: none; margin-left: auto; margin-right: auto; }
.isola-hero .sottotitolo { max-width: none; margin: 16px auto 0; }

@media (max-width: 760px) {
    .isola-hero { padding: 32px 22px; }
}

/* ---------- Effetto macchina da scrivere (titolo home) ---------- */
.testo-macchina-da-scrivere {
    /* Nessun vincolo di larghezza o "nowrap": il titolo si comporta
       come un titolo normale e va a capo se serve, anche su mobile.
       La scrittura progressiva è gestita da site.js. */
}

.cursore-typewriter {
    display: inline-block;
    width: 0.08em;
    height: 0.9em;
    margin-left: 2px;
    background: var(--testo);
    vertical-align: text-bottom;
    animation: cursore-lampeggio 0.8s step-end infinite;
}

@keyframes cursore-lampeggio {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cursore-typewriter { display: none; }
}

.suggerimento-scorri {
    margin: 16px 0 0;
    color: var(--grigio-500);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.suggerimento-scorri.visibile { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .suggerimento-scorri { opacity: 1; transition: none; }
}

/* ---------- Saluto dashboard con azioni rapide ---------- */
.intestazione-saluto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.azioni-saluto {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pulsante-piccolo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: 0.85rem;
}

.pulsante-piccolo svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (max-width: 760px) {
    .intestazione-saluto { flex-direction: column; align-items: flex-start; }
    .azioni-saluto { width: 100%; }
    .azioni-saluto .pulsante-piccolo { flex: 1; justify-content: center; }
}

/* ---------- Rappresentanti d'Istituto (admin) ---------- */
.riquadro-credenziali {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 22px;
    padding: 16px 18px;
    background: var(--grigio-100);
    border: 1px dashed var(--grigio-300);
    border-radius: var(--raggio-piccolo);
}
.riquadro-credenziali > div { display: flex; flex-direction: column; gap: 3px; min-width: 150px; flex: 1; }
.riquadro-credenziali span { font-size: 0.75rem; color: var(--testo-tenue); }
.riquadro-credenziali code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.02rem;
    font-weight: 600;
    word-break: break-all;
}

.gruppo-scuola { margin-bottom: 28px; }
.gruppo-scuola h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    margin-bottom: 12px;
}
.conteggio-scuola {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-200);
    color: var(--testo-tenue);
}

.griglia-rappresentanti {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}

.scheda-rappresentante {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    min-width: 0;
}
.scheda-rappresentante-nome { font-weight: 600; font-size: 0.98rem; }
.scheda-rappresentante-dati { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.scheda-rappresentante-dati > div { display: flex; gap: 8px; font-size: 0.85rem; }
.scheda-rappresentante-dati dt { color: var(--testo-tenue); flex: 0 0 86px; }
.scheda-rappresentante-dati dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.scheda-rappresentante-dati code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; }
.scheda-rappresentante-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--grigio-200);
}
.azione-pulsante { background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; color: var(--accento); }

/* Etichetta accanto al nome in "Gestione utenti" */
.tag-rappresentante {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-200);
    color: var(--testo-tenue);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .griglia-rappresentanti { grid-template-columns: 1fr; }
    .scheda-rappresentante-azioni .azione-tabella { padding: 8px 2px; }
    .riquadro-credenziali > div { min-width: 100%; }
}

/* ---------- Intestazione: respiro verticale anche su mobile ----------
   Il padding "0 18px" del contenitore su mobile azzerava il padding
   verticale della barra: logo e pulsanti restavano attaccati al bordo. */
.contenitore.barra-nav { padding-top: 22px; padding-bottom: 22px; }

@media (max-width: 760px) {
    .contenitore.barra-nav { padding-top: 14px; padding-bottom: 14px; }
}

/* ---------- Titolo home: layout stabile durante la scrittura ----------
   Una copia invisibile del testo completo occupa lo spazio finale
   (anche su due righe), così il titolo che si scrive e la scritta
   "Scorri per scoprirne di più" non saltano su e giù a ogni ciclo. */
.titolo-riserva { display: grid; }
.titolo-riserva > * { grid-area: 1 / 1; }
.testo-riserva { visibility: hidden; }

/* ---------- Intestazione su telefono: logo e menu sulla stessa riga ---------- */
@media (max-width: 760px) {
    .barra-nav { gap: 8px; }
    .nav-link { gap: 12px; font-size: 0.88rem; }
    .nav-link .pulsante { padding: 9px 16px; font-size: 0.88rem; }
}

/* =========================================================
   Questionari
   ========================================================= */
.intestazione-pagina-admin {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.titolo-sezione-admin { font-size: 1.15rem; margin: 26px 0 14px; }

/* Stato del questionario */
.badge-stato-quest {
    display: inline-block;
    padding: 3px 11px;
    border-radius: var(--raggio-pillola);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-stato-quest.stato-bozza { background: var(--grigio-200); color: var(--testo-tenue); }
.badge-stato-quest.stato-programmato { background: #FFF4DB; color: #8A5A00; }
.badge-stato-quest.stato-online { background: var(--verde-sfondo); color: var(--verde); }
.badge-stato-quest.stato-chiuso { background: var(--rosso-sfondo); color: var(--rosso); }

/* Elenco questionari */
.griglia-questionari {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
.scheda-questionario {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px;
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    min-width: 0;
}
.scheda-questionario-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.scheda-questionario-testa h2 { font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }
.scheda-questionario-descrizione { margin: 0; font-size: 0.88rem; color: var(--testo-tenue); }
.scheda-questionario-dati { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.scheda-questionario-dati > div { display: flex; gap: 10px; font-size: 0.85rem; }
.scheda-questionario-dati dt { flex: 0 0 74px; color: var(--testo-tenue); }
.scheda-questionario-dati dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.scheda-questionario-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--grigio-200);
}

/* Link da condividere */
.box-link-condivisione { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.box-link-condivisione input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--testo);
}
.riquadro-pubblicato {
    margin: 0 0 22px;
    padding: 20px 22px;
    background: var(--grigio-100);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
}
.riquadro-pubblicato h2 { font-size: 1.05rem; margin: 0 0 12px; }
.riquadro-pubblicato p { margin: 0 0 12px; }
.riquadro-pubblicato-nuovo { background: var(--verde-sfondo); border-color: var(--verde); }
.nota-stato { margin: 12px 0 0 !important; font-size: 0.85rem; color: var(--testo-tenue); }

.avviso-info {
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--grigio-100);
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-piccolo);
    font-size: 0.9rem;
}

/* Passaggi (impostazioni → domande → fine) */
.passi-questionario { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0 0 22px; padding: 0; }
.passi-questionario li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-100);
    color: var(--testo-tenue);
    font-size: 0.85rem;
    font-weight: 500;
}
.passi-questionario li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grigio-300);
    color: var(--testo);
    font-size: 0.75rem;
    font-weight: 700;
}
.passi-questionario .passo-attivo { background: var(--accento); color: var(--bianco); }
.passi-questionario .passo-attivo span { background: var(--bianco); color: var(--accento); }
.passi-questionario .passo-fatto { color: var(--verde); background: var(--verde-sfondo); }
.passi-questionario .passo-fatto span { background: var(--verde); color: var(--bianco); }

/* Scelte nelle impostazioni */
.scelte-impostazione { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scelta-impostazione {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
    cursor: pointer;
}
.scelta-impostazione:hover { border-color: var(--accento); }
.scelta-impostazione input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--accento); }
.scelta-impostazione strong { display: block; font-size: 0.92rem; }
.scelta-impostazione small { display: block; margin-top: 2px; color: var(--testo-tenue); font-size: 0.8rem; line-height: 1.45; }
.scelta-impostazione:has(input:checked) { background: var(--bianco); border-color: var(--accento); box-shadow: 0 0 0 1px var(--accento); }
.aiuto-campo { display: block; margin-top: 5px; color: var(--testo-tenue); font-size: 0.8rem; }

/* Costruttore delle domande */
.scheda-domanda, .scheda-risultato {
    margin-bottom: 14px;
    padding: 18px 20px;
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
}
.scheda-domanda-testa { display: flex; align-items: flex-start; gap: 14px; }
.domanda-numero {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grigio-100);
    border: 1px solid var(--grigio-300);
    font-size: 0.82rem;
    font-weight: 700;
}
.scheda-domanda-titolo { flex: 1; min-width: 0; }
.scheda-domanda-titolo strong { display: block; font-size: 0.98rem; overflow-wrap: anywhere; }
.riga-badge { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.badge-tipo {
    padding: 2px 10px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-100);
    border: 1px solid var(--grigio-200);
    color: var(--testo-tenue);
    font-size: 0.74rem;
    font-weight: 500;
}
.badge-obbligatoria { background: var(--rosso-sfondo); border-color: transparent; color: var(--rosso); }
.scheda-domanda-sposta { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.scheda-domanda-sposta form { margin: 0; }
.pulsante-freccia {
    width: 30px;
    height: 26px;
    border: 1px solid var(--grigio-300);
    border-radius: 8px;
    background: var(--bianco);
    color: var(--testo);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}
.pulsante-freccia:hover:not(:disabled) { border-color: var(--accento); }
.pulsante-freccia:disabled { opacity: 0.35; cursor: default; }
.lista-opzioni-anteprima { margin: 12px 0 0 44px; padding-left: 18px; color: var(--testo-tenue); font-size: 0.88rem; }
.lista-opzioni-anteprima li { margin-bottom: 2px; overflow-wrap: anywhere; }
.anteprima-tipo { margin: 10px 0 0 44px; color: var(--testo-tenue); font-size: 0.88rem; }
.modifica-domanda { margin: 14px 0 0 44px; }
.modifica-domanda summary { cursor: pointer; color: var(--accento); font-size: 0.86rem; font-weight: 500; }
.modifica-domanda form { margin-top: 14px; }

.riquadro-fine {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 22px 24px;
    background: var(--grigio-100);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
}
.riquadro-fine h2 { font-size: 1.1rem; margin: 0 0 4px; }
.riquadro-fine p { margin: 0; color: var(--testo-tenue); font-size: 0.9rem; }
.riquadro-fine button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Risultati */
.tab-risultati { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 18px; }
.tab-risultati a {
    padding: 8px 16px;
    border-radius: var(--raggio-pillola);
    background: var(--grigio-100);
    color: var(--testo-tenue);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
}
.tab-risultati a:hover { background: var(--grigio-200); }
.tab-risultati a.tab-attivo { background: var(--accento); color: var(--bianco); }
.media-valutazione { margin: 14px 0 4px 44px; font-size: 1.8rem; font-weight: 700; }
.media-valutazione small { font-size: 0.8rem; font-weight: 400; color: var(--testo-tenue); margin-left: 4px; }
.righe-risultato { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0 44px; }
.riga-risultato-testa { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; margin-bottom: 5px; }
.riga-risultato-etichetta { min-width: 0; overflow-wrap: anywhere; }
.riga-risultato-valore { flex-shrink: 0; color: var(--testo-tenue); }
.riga-risultato-valore strong { color: var(--testo); }
.barra-risultato { height: 10px; background: var(--grigio-200); border-radius: 999px; overflow: hidden; }
.barra-risultato span { display: block; height: 100%; background: var(--accento); border-radius: 999px; }
.nota-risultato { margin: 14px 0 0 44px; color: var(--testo-tenue); font-size: 0.82rem; }
.elenco-risposte-testo { list-style: none; margin: 14px 0 0 44px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.elenco-risposte-testo li { padding: 12px 14px; background: var(--grigio-100); border-radius: var(--raggio-piccolo); }
.elenco-risposte-testo p { margin: 0 0 4px; font-size: 0.92rem; overflow-wrap: anywhere; }
.elenco-risposte-testo small { color: var(--testo-tenue); font-size: 0.76rem; }
.testa-risposta-singola { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--grigio-200); font-size: 0.85rem; }
.testa-risposta-singola span { color: var(--testo-tenue); overflow-wrap: anywhere; }
.risposta-singola { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.risposta-singola dt { font-size: 0.8rem; color: var(--testo-tenue); }
.risposta-singola dd { margin: 2px 0 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.nessuna-risposta { color: var(--grigio-500); }
.paginazione-risultati { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; font-size: 0.88rem; color: var(--testo-tenue); }

/* Pagina pubblica di compilazione */
.scheda-esito { text-align: center; padding: 36px 28px; }
.scheda-esito h1 { font-size: 1.5rem; margin-bottom: 12px; }
.scheda-esito p { margin: 0 auto 18px; max-width: 46ch; }
.modulo-questionario { margin-top: 6px; }
.campo-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.domanda-compilazione {
    margin-bottom: 16px;
    padding: 20px 22px;
    background: var(--bianco);
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
}
.domanda-compilazione.domanda-errore { border-color: var(--rosso); }
.domanda-testo { margin: 0 0 14px; font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; color: var(--testo); }
.domanda-numero-pubblico { color: var(--testo-tenue); margin-right: 4px; }
.asterisco { color: var(--rosso); margin-left: 3px; }
.domanda-compilazione input[type="text"],
.domanda-compilazione select,
.domanda-compilazione textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
    font-family: var(--font-testo);
    font-size: 1rem;
    color: var(--testo);
}
.domanda-compilazione textarea { resize: vertical; }
.domanda-compilazione input[type="text"]:focus,
.domanda-compilazione select:focus,
.domanda-compilazione textarea:focus { outline: none; border-color: var(--accento); background: var(--bianco); }
.opzioni-compilazione { display: flex; flex-direction: column; gap: 8px; }
.opzione-compilazione {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
    cursor: pointer;
}
.opzione-compilazione input { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--accento); }
.opzione-compilazione span { min-width: 0; overflow-wrap: anywhere; }
.opzione-compilazione:hover { border-color: var(--accento); }
.opzione-compilazione:has(input:checked) { background: var(--bianco); border-color: var(--accento); box-shadow: 0 0 0 1px var(--accento); }
.scala-valutazione { display: flex; gap: 10px; flex-wrap: wrap; }
.scala-valutazione label { cursor: pointer; }
.scala-valutazione input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scala-valutazione span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--grigio-300);
    border-radius: 50%;
    background: var(--grigio-100);
    font-weight: 600;
}
.scala-valutazione label:hover span { border-color: var(--accento); }
.scala-valutazione input:checked + span { background: var(--accento); border-color: var(--accento); color: var(--bianco); }
.scala-valutazione input:focus-visible + span { outline: 2px solid var(--accento); outline-offset: 2px; }
.scala-valutazione-legenda { display: flex; justify-content: space-between; max-width: 290px; margin-top: 8px; font-size: 0.78rem; color: var(--testo-tenue); }
.errore-domanda { margin: 10px 0 0; color: var(--rosso); font-size: 0.86rem; font-weight: 500; }
.nota-anonimato { margin: 8px 0 0; color: var(--testo-tenue); font-size: 0.86rem; }

@media (max-width: 760px) {
    .griglia-questionari { grid-template-columns: minmax(0, 1fr); }
    .scelte-impostazione { grid-template-columns: 1fr; }
    .lista-opzioni-anteprima, .anteprima-tipo, .modifica-domanda,
    .media-valutazione, .righe-risultato, .nota-risultato, .elenco-risposte-testo { margin-left: 0; }
    .scheda-domanda-testa { gap: 10px; }
    .scheda-domanda, .scheda-risultato, .domanda-compilazione { padding: 16px; }
    .intestazione-pagina-admin .pulsante { width: 100%; text-align: center; }
    .riquadro-fine { flex-direction: column; align-items: stretch; }
    .riquadro-fine .pulsante { width: 100%; }
    .scala-valutazione span { width: 44px; height: 44px; }
}

/* Questionari: rifiniture di leggibilità */
.elenco-risposte-testo p, .media-valutazione { color: var(--testo); }
.campo input:disabled { opacity: 0.45; cursor: not-allowed; }

/* =====================================================================
   AREA UTENTE — menu laterale (desktop) / tendina (mobile) + dashboard
   Tonalità: blu navy
   ===================================================================== */
body.area-utente, body.area-admin {
    --navy: #14284B;
    --navy-scuro: #0C1B36;
    --navy-medio: #1E3A5F;
    --navy-chiaro: #E8EEF8;
    --accento: #1E3A5F;
    --accento-hover: #142943;
    --sfondo-app: #F2F5FA;
    background: var(--sfondo-app);
}
body.area-utente .intestazione { background: var(--bianco); border-bottom: 1px solid #E1E7F0; }
body.area-utente .contenitore.barra-nav { padding-top: 12px; padding-bottom: 12px; max-width: none; padding-left: 24px; padding-right: 24px; }
body.area-utente .nav-link .pulsante-secondario { display: none; }
body.area-utente .piede { background: var(--bianco); border-top: 1px solid #E1E7F0; }

.app-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - 140px);
}
.app-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-scuro) 100%);
    color: #fff;
    padding: 22px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mu-profilo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.07);
    color: #fff;
}
.mu-profilo:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
.mu-avatar {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 50%;
    background: #3D5C8F;
    color: #fff;
    font-weight: 600; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mu-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-profilo-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mu-profilo-testo strong { font-size: 0.93rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-profilo-testo small { font-size: 0.76rem; color: #A9BCDC; }
.mu-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.mu-lista a, .mu-tendina-pannello a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 11px;
    color: #C9D6EE;
    font-size: 0.93rem;
    font-weight: 500;
    position: relative;
}
.mu-lista a:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.mu-lista a.attivo { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.mu-lista svg, .mu-tendina-pannello svg { width: 19px; height: 19px; flex-shrink: 0; }
.mu-voce-testo { flex: 1; min-width: 0; }
.mu-badge {
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: #E5484D; color: #fff;
    font-size: 0.72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.mu-esci-desktop {
    color: #A9BCDC; font-size: 0.88rem; padding: 10px 12px; border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.14); text-align: center;
}
.mu-esci-desktop:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }

.app-main { min-width: 0; padding: 0; }
.app-main .contenitore { max-width: 1020px; padding: 0 32px; }
.app-main .sezione { padding: 34px 0 48px; }
.app-main p:has(> a.pulsante-indietro[href="dashboard.php"]) { display: none; }
.mu-mobile { display: none; }

/* Dashboard */
.dash { max-width: 1060px; margin: 0 auto; padding: 30px 32px 48px; display: flex; flex-direction: column; gap: 22px; }
.dash-intestazione { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.dash-data { margin: 0 0 4px; font-size: 0.83rem; color: #6B7C99; text-transform: capitalize; }
.dash h1 { font-size: 1.85rem; margin: 0; color: var(--navy); }
.dash-azioni { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-pulsante {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px;
    background: #fff; color: var(--navy);
    border: 1px solid #D5DEEC;
    font-size: 0.86rem; font-weight: 600; white-space: nowrap;
}
.dash-pulsante:hover { background: var(--navy-chiaro); text-decoration: none; }
.dash-pulsante svg { width: 16px; height: 16px; }

.dash-avvisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.dash-avviso {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 16px;
    background: #fff; border: 1px solid #D5DEEC;
    color: var(--navy);
}
.dash-avviso:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(20,40,75,0.10); }
.dash-avviso-icona {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    background: var(--navy-chiaro); color: var(--navy-medio);
    display: flex; align-items: center; justify-content: center;
}
.dash-avviso-icona svg { width: 21px; height: 21px; }
.dash-avviso-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.dash-avviso-testo strong { font-size: 0.93rem; }
.dash-avviso-testo small { color: #5C6E8C; font-size: 0.8rem; margin-top: 2px; }
.dash-avviso-azione { font-size: 0.8rem; font-weight: 600; white-space: nowrap; color: var(--navy-medio); }
.dash-avviso-urgente { border-color: #F0C5C3; background: #FFF6F5; }
.dash-avviso-urgente .dash-avviso-icona { background: #FBE2E0; color: #B3403A; }
.dash-avviso-urgente .dash-avviso-azione { color: #B3403A; }

/* Slideshow */
.slideshow {
    position: relative;
    border-radius: 22px;
    background: linear-gradient(135deg, #1E3A5F 0%, #0F2342 60%, #0A1830 100%);
    color: #fff;
    overflow: hidden;
    padding: 34px 36px 24px;
    box-shadow: 0 14px 34px rgba(15,35,66,0.22);
}
.slideshow::after {
    content: ''; position: absolute; right: -80px; top: -80px;
    width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(120,160,230,0.35), rgba(120,160,230,0) 70%);
    pointer-events: none;
}
.slideshow-pista { display: grid; position: relative; z-index: 1; }
.slide {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden;
    transform: translateX(14px);
    transition: opacity .45s ease, transform .45s ease, visibility .45s;
    display: flex; flex-direction: column; align-items: flex-start;
}
.slide.attiva { opacity: 1; visibility: visible; transform: none; }
.slide-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.slide-tag { padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,0.14); font-size: 0.74rem; font-weight: 600; letter-spacing: .02em; }
.slide-tag-urgente { background: #E5484D; }
.slide-data { font-size: 0.8rem; color: #A9BCDC; }
.slide h2 { color: #fff; font-size: 1.65rem; margin: 0 0 10px; max-width: 24ch; }
.slide p { color: #C9D6EE; font-size: 0.97rem; max-width: 60ch; margin: 0 0 16px; }
.slide-link { color: #fff; font-weight: 600; font-size: 0.9rem; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,0.14); }
.slide-link:hover { background: rgba(255,255,255,0.24); text-decoration: none; }
.slideshow-comandi { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.slideshow-punti { display: flex; gap: 8px; }
.slideshow-punto { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: rgba(255,255,255,0.35); cursor: pointer; transition: width .25s, background .25s; }
.slideshow-punto.attivo { width: 26px; background: #fff; }
.slideshow-freccia { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); background: transparent; color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.slideshow-freccia:hover { background: rgba(255,255,255,0.14); }

/* Schede */
.dash-colonne { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-scheda { background: #fff; border: 1px solid #DDE5F0; border-radius: 20px; padding: 20px 22px; }
.dash-scheda-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dash-scheda h2 { font-size: 1.05rem; margin: 0; color: var(--navy); }
.dash-scheda-testa a { font-size: 0.82rem; font-weight: 600; color: var(--navy-medio); white-space: nowrap; }
.dash-vuoto { margin: 10px 0 4px; font-size: 0.9rem; }
.dash-feed, .dash-eventi { list-style: none; margin: 0; padding: 0; }
.dash-feed li + li, .dash-eventi li + li { border-top: 1px solid #EBF0F7; }
.dash-feed a, .dash-eventi a { display: flex; align-items: center; gap: 13px; padding: 12px 4px; color: var(--navy); border-radius: 10px; }
.dash-feed a:hover, .dash-eventi a:hover { background: #F5F8FC; text-decoration: none; }
.dash-feed-tipo { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--navy-chiaro); color: var(--navy-medio); }
.dash-feed-tipo svg { width: 19px; height: 19px; }
.dash-feed-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.dash-feed-testo strong { font-size: 0.92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-feed-testo small { font-size: 0.78rem; color: #6B7C99; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-evento-data { width: 46px; flex-shrink: 0; border-radius: 12px; background: var(--navy-medio); color: #fff; text-align: center; padding: 6px 0 5px; line-height: 1.05; }
.dash-evento-data b { display: block; font-size: 1.1rem; }
.dash-evento-data i { display: block; font-style: normal; font-size: 0.64rem; letter-spacing: .06em; color: #A9BCDC; }
.dash-social { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; font-size: 0.85rem; color: #6B7C99; }
.dash-social a { color: var(--navy-medio); font-weight: 600; }

@media (max-width: 900px) {
    .app-shell { display: block; min-height: 0; }
    .app-sidebar { display: none; }
    .mu-mobile { display: block; position: sticky; top: 0; z-index: 40; background: var(--navy); box-shadow: 0 4px 14px rgba(12,27,54,0.25); }
    .mu-tendina summary {
        list-style: none; cursor: pointer;
        display: flex; align-items: center; justify-content: space-between;
        padding: 13px 18px; color: #fff; font-weight: 600; font-size: 0.97rem;
    }
    .mu-tendina summary::-webkit-details-marker { display: none; }
    .mu-tendina summary::marker { content: ''; }
    .mu-tendina-voce { display: flex; align-items: center; gap: 11px; }
    .mu-tendina-voce svg { width: 20px; height: 20px; }
    .mu-tendina-freccia { width: 9px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .2s; }
    .mu-tendina[open] .mu-tendina-freccia { transform: rotate(-135deg); margin-top: 4px; }
    .mu-tendina-pannello { background: var(--navy-scuro); padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; }
    .mu-tendina-pannello a:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
    .mu-tendina-pannello a.attivo { background: #fff; color: var(--navy); font-weight: 600; }
    .mu-tendina-pannello .mu-esci { color: #A9BCDC; margin-top: 6px; border-top: 1px solid rgba(255,255,255,0.12); border-radius: 0; padding-top: 14px; }
    .app-main .contenitore { padding: 0 18px; }
    .app-main .sezione { padding: 26px 0 36px; }
    body.area-utente .contenitore.barra-nav { padding-left: 18px; padding-right: 18px; }
    .dash { padding: 22px 18px 36px; gap: 18px; }
    .dash h1 { font-size: 1.55rem; }
    .dash-azioni { width: 100%; }
    .dash-pulsante { flex: 1; justify-content: center; padding: 10px 12px; font-size: 0.8rem; white-space: normal; text-align: center; }
    .dash-avvisi { grid-template-columns: minmax(0, 1fr); }
    .dash-colonne { grid-template-columns: minmax(0, 1fr); }
    .slideshow { padding: 24px 20px 18px; border-radius: 18px; }
    .slide h2 { font-size: 1.3rem; }
    .dash-avviso-azione { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .slide { transition: none; }
}

/* =====================================================================
   PANNELLO ADMIN — stesso stile navy dell'area utente
   ===================================================================== */
body.area-admin { background: var(--sfondo-app); }
body.area-admin .corpo-admin { background: var(--sfondo-app); }
body.area-admin .barra-laterale {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-scuro) 100%);
    border-right: 0;
    color: #fff;
}
body.area-admin .logo-marchio-admin {
    background: none; padding: 0; border-radius: 0;
    height: 52px; margin-bottom: 10px;
    filter: brightness(0) invert(1);
}
body.area-admin .barra-laterale .sotto-marchio { color: #A9BCDC; margin-bottom: 24px; }
body.area-admin .menu-admin a { color: #C9D6EE; border-radius: 11px; }
body.area-admin .menu-admin a:hover { background: rgba(255,255,255,0.08); color: #fff; }
body.area-admin .menu-admin a.attivo { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
body.area-admin .menu-admin .menu-gruppo summary { color: #C9D6EE; border-radius: 11px; }
body.area-admin .menu-admin .menu-gruppo summary:hover { background: rgba(255,255,255,0.08); color: #fff; }
body.area-admin .menu-admin .menu-gruppo summary.gruppo-attivo { color: #fff; }
body.area-admin .menu-admin .menu-gruppo-voci { border-left-color: rgba(255,255,255,0.18); }
body.area-admin .contenuto-admin h1 { color: var(--navy); }
body.area-admin .menu-admin-mobile { border-color: var(--navy-medio); color: var(--navy); font-weight: 600; background-color: #fff; }
body.area-admin .barra-menu-admin-mobile { border-bottom-color: #E1E7F0; }

/* =====================================================================
   RIQUADRI: solo contorno stondato navy (esclusa la dashboard generale)
   ===================================================================== */
body.area-utente .voce-notizia,
body.area-utente .contenuto-item,
body.area-utente .scheda-partner,
body.area-utente .scheda-dati,
body.area-utente .scheda-modulo,
body.area-utente .scheda-chat,
body.area-utente .pulsante-categoria,
body.area-utente .pannello-benvenuto,
body.area-utente .riquadro-scarica-modulo,
body.area-utente .scheda-documento:not(.documento-completo),
body.area-utente .voce-storico,
body.area-utente .tabella-scroll,
body.area-admin .scheda-modulo,
body.area-admin .scheda-dati,
body.area-admin .scheda-partner,
body.area-admin .statistica,
body.area-admin .scheda-chat,
body.area-admin .scheda-questionario,
body.area-admin .scheda-rappresentante,
body.area-admin .scheda-domanda,
body.area-admin .scheda-risultato,
body.area-admin .scheda-documento:not(.documento-completo),
body.area-admin .riquadro-credenziali,
body.area-admin .riquadro-fine,
body.area-admin .riquadro-pubblicato:not(.riquadro-pubblicato-nuovo),
body.area-admin .riquadro-scarica-modulo,
body.area-admin .voce-storico,
body.area-admin .tabella-scroll,
body.area-admin table.tabella-utenti,
body.area-admin table.tabella-informativa {
    background: transparent;
    border: 1.5px solid var(--navy-medio);
    border-radius: var(--raggio);
    box-shadow: none;
}
body.area-utente .voce-notizia.notizia-urgente,
body.area-utente .contenuto-item.contenuto-urgente { border-color: var(--rosso); }
body.area-utente .pulsante-categoria:hover { background: rgba(30,58,95,0.05); }
body.area-utente .voce-notizia-data { background: var(--navy-chiaro); color: var(--navy); }
body.area-utente .contenuto-item-evento { background: transparent; border: 1px solid #C9D6EA; }
body.area-utente .tag-categoria-news { background: var(--navy-chiaro); color: var(--navy-medio); }
body.area-admin table.tabella-utenti th { background: rgba(30,58,95,0.06); color: var(--navy); }
body.area-admin table.tabella-utenti td, body.area-admin table.tabella-utenti th { border-bottom-color: #C9D6EA; }
body.area-utente .tabella-scroll table.tabella-utenti, body.area-admin .tabella-scroll table.tabella-utenti { border: 0; }


/* Appuntamenti: uno sotto l'altro, dal più imminente al più lontano */
.lista-appuntamenti { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.lista-appuntamenti .contenuto-item { display: block; width: 100%; }
.lista-appuntamenti .contenuto-item-immagine { aspect-ratio: auto; max-height: 360px; object-fit: contain; width: auto; max-width: 100%; }
.lista-appuntamenti .contenuto-item-corpo { margin-top: 0; padding-top: 10px; }

/* Moduli e schede: occupano la larghezza disponibile (web) e si adattano al mobile */
body.area-admin .contenuto-admin { max-width: 1240px; }
body.area-admin .contenuto-admin .scheda-modulo,
body.area-admin .contenuto-admin .scheda-modulo-larga,
body.area-admin .contenuto-admin :is(div, form, section, table)[style*="max-width"] {
    max-width: 1100px !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
body.area-admin .contenuto-admin .scheda-modulo { padding: 32px 36px; }
@media (min-width: 1100px) {
    body.area-admin .contenuto-admin .scheda-modulo .riga-due { gap: 18px; }
}
@media (max-width: 760px) {
    body.area-admin .contenuto-admin .scheda-modulo { padding: 24px 18px; }
}
body.area-utente .app-main .contenitore-stretto { max-width: 920px; }
body.area-utente .app-main .scheda-modulo { max-width: 920px; margin-left: 0; margin-right: 0; width: 100%; }

/* ---------- Adattamento alla larghezza dello schermo (web e mobile) ---------- */
body.area-admin .contenuto-admin .scheda-dati,
body.area-admin .contenuto-admin .scheda-modulo,
body.area-admin .contenuto-admin .scheda-modulo-larga {
    max-width: 1100px !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
body.area-admin .contenuto-admin .riga-due { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
body.area-admin .contenuto-admin .campo { margin-bottom: 18px; }
body.area-admin .contenuto-admin .campo input,
body.area-admin .contenuto-admin .campo select,
body.area-admin .contenuto-admin .campo textarea { max-width: 100%; }
body.area-admin .contenuto-admin .griglia-dati { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
body.area-admin .contenuto-admin .intestazione-pagina-admin,
body.area-admin .contenuto-admin .barra-filtri { max-width: 1100px; }

body.area-utente .app-main .contenitore-stretto,
body.area-utente .app-main .contenitore-ampia { max-width: 1020px; }
body.area-utente .app-main .scheda-modulo,
body.area-utente .app-main .scheda-modulo-larga { max-width: 1020px; margin-left: 0; margin-right: 0; }
body.area-utente .app-main .riga-due { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 760px) {
    body.area-admin .contenuto-admin .scheda-dati,
    body.area-admin .contenuto-admin .scheda-modulo,
    body.area-utente .app-main .scheda-modulo { padding: 22px 16px; }
    body.area-admin .contenuto-admin .riga-due,
    body.area-utente .app-main .riga-due { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pulsante "Scopri di più" ---------- */
.link-scopri-di-piu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 14px 7px 16px;
    border: 1.5px solid var(--accento);
    border-radius: 999px;
    background: transparent;
    color: var(--accento);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.link-scopri-di-piu::after {
    content: '';
    width: 6px; height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform .2s;
}
.link-scopri-di-piu[data-azione="comprimi"]::after { transform: rotate(-135deg); margin-top: 3px; }
.link-scopri-di-piu:hover { background: var(--accento); color: #fff; }

/* ---------- Appuntamenti (stessa linea delle news) ---------- */
.voce-appuntamento .voce-appuntamento-dettagli { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-bottom: 8px; }
.voce-appuntamento .voce-appuntamento-dettagli b { font-weight: 600; color: var(--testo-tenue); }
.voce-appuntamento-locandina {
    width: 110px; height: 110px; flex-shrink: 0;
    object-fit: cover; border-radius: var(--raggio-piccolo);
    background: var(--grigio-100);
}
.lista-appuntamenti .voce-notizia { align-items: flex-start; }
@media (max-width: 600px) {
    .voce-appuntamento-locandina { width: 100%; height: auto; max-height: 260px; order: 3; }
    .voce-appuntamento .voce-appuntamento-dettagli { flex-direction: column; }
}

/* ---------- Tutto a larghezza piena: sfrutta lo spazio a destra ---------- */
body.area-admin .contenuto-admin { max-width: none !important; width: 100%; }
body.area-admin .contenuto-admin .scheda-dati,
body.area-admin .contenuto-admin .scheda-modulo,
body.area-admin .contenuto-admin .scheda-modulo-larga,
body.area-admin .contenuto-admin :is(div, form, section, table, p)[style*="max-width"],
body.area-admin .contenuto-admin .intestazione-pagina-admin,
body.area-admin .contenuto-admin .barra-filtri {
    max-width: none !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
body.area-admin .contenuto-admin p { max-width: none; }
body.area-utente .app-main .contenitore,
body.area-utente .app-main .contenitore-stretto,
body.area-utente .app-main .contenitore-ampia,
body.area-utente .app-main .scheda-modulo,
body.area-utente .app-main .scheda-modulo-larga,
body.area-utente .app-main :is(div, form, section)[style*="max-width"] { max-width: none !important; }
body.area-utente .app-main .contenitore { margin: 0; width: 100%; padding: 0 36px; }
body.area-utente .app-main p { max-width: none; }
.dash { max-width: none; margin: 0; }
@media (max-width: 900px) {
    body.area-utente .app-main .contenitore { padding: 0 18px; }
}

/* ---------- Spazi area utente (contenuto principale, non il menu) ---------- */
body.area-utente .app-main { padding: 36px 48px 64px; }
body.area-utente .app-main .contenitore,
body.area-utente .app-main .sezione,
body.area-utente .app-main .dash { padding-left: 0; padding-right: 0; }
body.area-utente .app-main .sezione { padding-top: 0; padding-bottom: 0; }
body.area-utente .app-main .dash { padding-top: 0; padding-bottom: 0; gap: 26px; }
body.area-utente .app-main h1 { margin-bottom: 22px; }
body.area-utente .app-main .pulsante-indietro { margin-bottom: 4px; }
body.area-utente .app-main p:has(> .pulsante-indietro) { margin-bottom: 18px !important; }
body.area-utente .app-main .lista-notizie,
body.area-utente .app-main .lista-appuntamenti { gap: 20px; margin-top: 0; }
body.area-utente .app-main .voce-notizia { padding: 24px 28px; gap: 22px; }
body.area-utente .app-main .voce-notizia-corpo h2 { margin-bottom: 8px; }
body.area-utente .app-main .voce-notizia-testo-completo { margin-top: 4px; }
body.area-utente .app-main .lista-contenuti { gap: 20px; margin-top: 0; }
body.area-utente .app-main .contenuto-item { padding: 24px 26px; }
body.area-utente .app-main .griglia-partner { gap: 20px; }
body.area-utente .app-main .scheda-modulo,
body.area-utente .app-main .scheda-dati { padding: 28px 30px; }
body.area-utente .app-main .archivio-eventi-passati { margin-top: 36px; padding-top: 22px; }
body.area-utente .app-main .link-scopri-di-piu { margin-top: 14px; }
@media (max-width: 900px) {
    body.area-utente .app-main { padding: 24px 16px 44px; }
    body.area-utente .app-main .voce-notizia { padding: 18px; gap: 12px; }
    body.area-utente .app-main .contenuto-item,
    body.area-utente .app-main .scheda-modulo,
    body.area-utente .app-main .scheda-dati { padding: 20px 18px; }
}

/* Eliminazione account (admin) */
button.azione-tabella { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; color: var(--accento); }
button.azione-tabella:hover { text-decoration: underline; }
.azione-elimina, button.azione-elimina { color: var(--rosso); }
.barra-azioni-selezione .pulsante.pulsante-pericolo-pieno { background: var(--rosso); border-color: var(--rosso); color: #fff !important; }
.barra-azioni-selezione .pulsante.pulsante-pericolo-pieno:hover { background: #9a342f; }

/* =====================================================================
   LOGIN / REGISTRAZIONE — stile navy della piattaforma
   ===================================================================== */
body.pagina-accesso {
    --navy: #14284B; --navy-scuro: #0C1B36; --navy-medio: #1E3A5F;
    --accento: #1E3A5F; --accento-hover: #142943;
    min-height: 100vh;
    display: flex; flex-direction: column;
    background:
        radial-gradient(circle at 85% 8%, rgba(120,160,230,0.30), rgba(120,160,230,0) 45%),
        linear-gradient(160deg, #1E3A5F 0%, #14284B 45%, #0A1830 100%);
    background-attachment: fixed;
}
body.pagina-accesso .intestazione { background: transparent; }
body.pagina-accesso .logo-marchio { background: none; padding: 0; border-radius: 0; height: 52px; filter: brightness(0) invert(1); }
body.pagina-accesso .nav-link a { color: #C9D6EE; font-weight: 500; }
body.pagina-accesso .nav-link a:hover { color: #fff; text-decoration: none; }
body.pagina-accesso .nav-link a.pulsante { background: #fff; color: #14284B !important; border-color: #fff; font-weight: 600; }
body.pagina-accesso .nav-link a.pulsante:hover { background: #E8EEF8; }
body.pagina-accesso .sezione { flex: 1; padding: 28px 0 48px; }
body.pagina-accesso .scheda-modulo {
    background: #fff;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(4,12,28,0.45);
    padding: 40px 38px;
}
body.pagina-accesso .scheda-modulo h1 { color: var(--navy); }
body.pagina-accesso .scheda-modulo .sottotitolo { color: #5C6E8C; }
body.pagina-accesso .campo label { color: #4A5B78; }
body.pagina-accesso .campo input,
body.pagina-accesso .campo select,
body.pagina-accesso .campo textarea { background: #F4F7FB; border: 1px solid #D5DEEC; }
body.pagina-accesso .campo input:focus,
body.pagina-accesso .campo select:focus,
body.pagina-accesso .campo textarea:focus { border-color: var(--navy-medio); box-shadow: 0 0 0 3px rgba(30,58,95,0.15); outline: none; background: #fff; }
body.pagina-accesso .scheda-modulo .pulsante { background: var(--navy-medio); border-color: var(--navy-medio); border-radius: 12px; padding: 13px 20px; font-weight: 600; }
body.pagina-accesso .scheda-modulo .pulsante:hover { background: var(--navy-scuro); border-color: var(--navy-scuro); }
body.pagina-accesso .modulo-piede { color: #5C6E8C; }
body.pagina-accesso .modulo-piede a, body.pagina-accesso .scheda-modulo a { color: var(--navy-medio); font-weight: 600; }
body.pagina-accesso .piede { background: transparent; border-top: 1px solid rgba(255,255,255,0.14); color: #A9BCDC; }
body.pagina-accesso .piede a { color: #fff; }
@media (max-width: 760px) {
    body.pagina-accesso .scheda-modulo { padding: 28px 20px; border-radius: 18px; }
    body.pagina-accesso .logo-marchio { height: 44px; }
}

/* Mobile area utente: barra in alto tutta navy con logo bianco centrato */
@media (max-width: 900px) {
    body.area-utente .intestazione { background: var(--navy); border-bottom: 0; }
    body.area-utente .contenitore.barra-nav {
        position: relative;
        justify-content: center;
        padding-top: 16px; padding-bottom: 12px;
    }
    body.area-utente .logo-marchio { height: 46px; filter: brightness(0) invert(1); }
    body.area-utente .nav-link { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
    body.area-utente .mu-mobile { box-shadow: 0 6px 16px rgba(12,27,54,0.22); }
    body.area-utente .mu-tendina summary { border-top: 1px solid rgba(255,255,255,0.12); }
}

/* Istituti */
.griglia-istituti { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.scheda-istituto { padding: 20px 22px !important; }
.scheda-istituto-nome { font-weight: 600; font-size: 1.02rem; color: var(--navy, #14284B); margin: 0 0 10px; }
.scheda-istituto-dati { margin: 0 0 14px; display: flex; flex-direction: column; gap: 5px; }
.scheda-istituto-dati > div { display: flex; gap: 10px; font-size: 0.86rem; }
.scheda-istituto-dati dt { flex: 0 0 74px; color: var(--testo-tenue); }
.scheda-istituto-dati dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.dash-istituto-nome { display: flex; align-items: center; gap: 13px; margin: 6px 0 14px; color: var(--navy); font-size: 1.05rem; }
.dash-istituto-dati { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; }
.dash-istituto-dati > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-istituto-dati dt { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6B7C99; }
.dash-istituto-dati dd { margin: 0; font-size: 0.93rem; overflow-wrap: anywhere; color: var(--navy); }
.dash-istituto-dati a { color: var(--navy-medio); font-weight: 600; }

/* Link di registrazione per istituto */
.scheda-istituto-link { border-top: 1px solid #D5DEEC; padding-top: 12px; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.scheda-istituto-link > span { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6B7C99; }
.scheda-istituto-link input { width: 100%; padding: 8px 10px; border: 1px solid #D5DEEC; border-radius: 10px; background: #F4F7FB; font-size: 0.8rem; font-family: inherit; color: var(--testo); }
.scheda-istituto-link-azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* Intestazione: margine laterale anche con schermi di larghezza intermedia */
.contenitore.barra-nav { padding-left: 24px; padding-right: 24px; }
@media (max-width: 760px) { .contenitore.barra-nav { padding-left: 18px; padding-right: 18px; } }

/* ---- Appuntamenti: icone dettagli e "Aggiungi al calendario" ---- */
.voce-appuntamento .voce-appuntamento-dettagli span { display: inline-flex; align-items: center; gap: 7px; }
.icona-dettaglio { width: 17px; height: 17px; flex: none; color: var(--navy-medio); }
.voce-appuntamento-azioni { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 6px; }
.aggiungi-calendario { position: relative; display: inline-block; }
.aggiungi-calendario summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border: 1.5px solid var(--navy-medio); border-radius: 999px;
    font-size: 0.85rem; font-weight: 600; color: var(--navy-medio); background: transparent;
}
.aggiungi-calendario summary::-webkit-details-marker { display: none; }
.aggiungi-calendario summary:hover, .aggiungi-calendario[open] summary { background: var(--navy-chiaro); }
.aggiungi-calendario .icona-dettaglio { width: 16px; height: 16px; }
.aggiungi-calendario-menu {
    position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); min-width: 230px;
    background: #fff; border: 1.5px solid var(--navy-medio); border-radius: 12px; padding: 6px;
    box-shadow: 0 8px 24px rgba(20,40,75,.15);
}
.aggiungi-calendario-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 0.88rem; color: var(--navy); text-decoration: none; }
.aggiungi-calendario-menu a:hover { background: var(--navy-chiaro); }

/* ---- Paginazione News (4 per pagina) ---- */
.paginazione-news { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 28px 0 8px; }
.paginazione-news a, .paginazione-news .pag-attiva {
    min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--navy-medio); border-radius: 999px; font-size: 0.92rem; font-weight: 600;
    color: var(--navy-medio); text-decoration: none; background: transparent;
}
.paginazione-news a:hover { background: var(--navy-chiaro); }
.paginazione-news .pag-attiva { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Riga azioni appuntamento: "Scopri di più" e "Aggiungi al calendario" identici */
.voce-appuntamento-azioni { margin-top: 12px; gap: 10px; align-items: center; }
.voce-appuntamento-azioni .link-scopri-di-piu { margin-top: 0; }
.aggiungi-calendario summary {
    gap: 8px; padding: 7px 16px; border: 1.5px solid var(--accento); color: var(--accento);
    font-family: inherit; font-size: 0.82rem; font-weight: 600; line-height: normal;
    transition: background .15s, color .15s;
}
.aggiungi-calendario summary:hover, .aggiungi-calendario[open] summary { background: var(--accento); color: #fff; }
.aggiungi-calendario .icona-dettaglio { width: 15px; height: 15px; color: currentColor; }

/* ---- Appuntamenti: selettore vista e vista settimanale ---- */
.selettore-vista { display: inline-flex; margin: 16px 0 18px; padding: 4px; border: 1.5px solid var(--navy-medio); border-radius: 999px; gap: 4px; }
.selettore-vista a { padding: 7px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; color: var(--navy-medio); text-decoration: none; }
.selettore-vista a.attiva { background: var(--navy); color: #fff; }
.settimana-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; color: var(--navy); }
.settimana-nav a { padding: 7px 14px; border: 1.5px solid var(--navy-medio); border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--navy-medio); text-decoration: none; }
.settimana-nav a:hover { background: var(--navy-chiaro); }
.settimana-nav .settimana-oggi { margin-left: auto; background: var(--navy-chiaro); }
.settimana-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border: 1.5px solid var(--navy-medio); border-radius: var(--raggio); overflow: hidden; background: #fff; }
.sett-giorno { border-right: 1px solid #DCE5F3; min-width: 0; display: flex; flex-direction: column; }
.sett-giorno:last-child { border-right: 0; }
.sett-testa { background: #DCE5F3; color: var(--navy); text-align: center; padding: 10px 6px; display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; }
.sett-testa strong { font-size: 0.88rem; letter-spacing: .04em; text-transform: uppercase; }
.sett-giorno.sett-passato .sett-testa { background: #E8EEF8; color: #6B7A93; }
.sett-giorno.sett-sabato .sett-testa { background: var(--navy-medio); color: #fff; }
.sett-giorno.sett-domenica .sett-testa { background: var(--navy); color: #fff; }
.sett-giorno.sett-oggi .sett-testa { background: #3C69B0; color: #fff; }
.sett-corpo { padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; background: #fff; }
.sett-giorno.sett-oggi .sett-corpo { background: #EEF3FB; }
.sett-vuoto { font-size: 0.78rem; color: #9AA7BC; text-align: center; margin: 6px 0; }
.sett-evento { background: #fff; border: 1px solid #DCE5F3; border-left: 4px solid var(--navy-medio); border-radius: 8px; box-shadow: 0 1px 4px rgba(20,40,75,.08); }
.sett-evento.sett-urgente { border-left-color: #B3403A; }
.sett-evento summary { list-style: none; cursor: pointer; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.sett-evento summary::-webkit-details-marker { display: none; }
.sett-luogo { font-size: 0.72rem; color: var(--testo-tenue); }
.sett-titolo { font-size: 0.92rem; font-weight: 600; color: var(--navy); line-height: 1.25; overflow-wrap: anywhere; }
.sett-orario { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--navy-medio); margin-top: 2px; }
.sett-orario .icona-dettaglio, .sett-meta .icona-dettaglio { width: 13px; height: 13px; }
.sett-dettagli { padding: 0 10px 10px; font-size: 0.8rem; color: var(--testo-tenue); }
.sett-dettagli p { margin: 0 0 6px; }
.sett-meta { display: flex; align-items: center; gap: 5px; color: var(--navy-medio); font-weight: 500; }
.sett-dettagli .aggiungi-calendario-menu { position: static; box-shadow: none; margin-top: 6px; min-width: 0; }
@media (max-width: 1100px) {
    .settimana-griglia { grid-template-columns: minmax(0, 1fr); }
    .sett-giorno { border-right: 0; border-bottom: 1px solid #DCE5F3; }
    .sett-giorno:last-child { border-bottom: 0; }
    .sett-testa { flex-direction: row; justify-content: space-between; text-align: left; padding: 10px 14px; }
    .sett-testa span { order: 2; }
}
.sett-dettagli .aggiungi-calendario { display: block; }
.sett-dettagli .aggiungi-calendario summary { border-radius: 12px; font-size: 0.74rem; padding: 6px 10px; gap: 6px; text-align: left; }

/* ---- Vista settimanale: card cliccabile + popup ---- */
.sett-evento { cursor: pointer; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.sett-evento:hover { background: var(--navy-chiaro); }
.sett-citta { font-size: 0.72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--navy-medio); }
.sett-indirizzo { font-size: 0.74rem; color: var(--testo-tenue); line-height: 1.3; }
.popup-evento { border: 1.5px solid var(--navy-medio); border-radius: 16px; padding: 26px 26px 22px; width: min(560px, calc(100vw - 32px)); max-height: 86vh; overflow: auto; background: #fff; color: var(--navy); }
.popup-evento::backdrop { background: rgba(12, 27, 54, .55); }
.popup-evento h2 { font-size: 1.3rem; margin: 0 28px 14px 0; }
.popup-evento-chiudi { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--navy-chiaro); color: var(--navy); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sett-pop-meta { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 8px; font-weight: 500; }
.sett-pop-meta .icona-dettaglio { width: 17px; height: 17px; margin-top: 2px; }
.sett-pop-testo { color: var(--testo-tenue); margin: 12px 0 0; font-size: 0.92rem; }
.sett-pop-locandina { display: block; max-width: 100%; max-height: 320px; margin: 14px auto 0; border-radius: 10px; }
.popup-evento .aggiungi-calendario { margin-top: 16px; }

/* Navigazione settimana su mobile: tutto su una riga */
@media (max-width: 700px) {
    .settimana-nav { flex-wrap: nowrap; gap: 8px; }
    .settimana-nav .sett-nav-testo { display: none; }
    .settimana-nav a { padding: 7px 14px; flex: none; }
    .settimana-nav strong { flex: 1; text-align: center; font-size: 0.88rem; white-space: nowrap; }
    .settimana-nav .settimana-oggi { margin-left: 0; }
}

.popup-evento .aggiungi-calendario { margin-top: 26px; }
.popup-evento .sett-pop-testo + .aggiungi-calendario, .popup-evento .sett-pop-locandina + .aggiungi-calendario { margin-top: 26px; }
.popup-evento .aggiungi-calendario { margin-top: 26px !important; }

/* ---- Area Rappresentante d'Istituto ---- */
.dash-rappresentante {
    display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 18px 22px;
    border-radius: 20px; background: var(--navy); color: #fff; text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.dash-rappresentante:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(20,40,75,.25); }
.dash-rappresentante-icona { width: 48px; height: 48px; flex: none; border-radius: 14px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; }
.dash-rappresentante-icona svg { width: 24px; height: 24px; }
.dash-rappresentante-testo { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.dash-rappresentante-testo strong { font-size: 1.1rem; }
.dash-rappresentante-testo small { opacity: .8; font-size: .86rem; }
.dash-rappresentante-freccia { font-size: 1.8rem; line-height: 1; }
.rappr-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 28px; }
.rappr-scelta { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1.5px solid var(--navy-medio); border-radius: var(--raggio); color: var(--navy); text-decoration: none; background: transparent; }
.rappr-scelta:hover { background: var(--navy-chiaro); text-decoration: none; }
.rappr-scelta-icona { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--navy-chiaro); color: var(--navy-medio); display: flex; align-items: center; justify-content: center; }
.rappr-scelta-icona svg { width: 24px; height: 24px; }
.rappr-scelta-testo { display: flex; flex-direction: column; flex: 1; line-height: 1.35; }
.rappr-scelta-testo strong { font-size: 1.05rem; }
.rappr-scelta-testo small { color: var(--testo-tenue); }

/* ---- Bacheca ---- */
.bacheca-testa { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 20px; color: var(--testo-tenue); }
.bacheca-post { border: 1.5px solid var(--navy-medio); border-radius: var(--raggio); padding: 20px 22px; margin-bottom: 18px; background: transparent; }
.bacheca-post-testa { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bacheca-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; }
.bacheca-chi { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.bacheca-chi small, .bacheca-commento-testa small { color: var(--testo-tenue); font-size: 0.78rem; }
.bacheca-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--navy-chiaro); color: var(--navy-medio); font-size: 0.68rem; font-weight: 700; vertical-align: middle; }
.bacheca-azioni { white-space: nowrap; }
.bacheca-titolo { font-size: 1.15rem; margin: 0 0 6px; color: var(--navy); overflow-wrap: anywhere; }
.bacheca-descrizione { margin: 0 0 14px; overflow-wrap: anywhere; }
.bacheca-commenti { border-top: 1px solid #DCE5F3; padding-top: 12px; }
.bacheca-commenti h3 { font-size: 0.85rem; margin: 0 0 8px; color: var(--navy-medio); }
.bacheca-commento { background: var(--navy-chiaro); border-radius: 12px; padding: 9px 13px; margin-bottom: 8px; }
.bacheca-commento-testa { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; }
.bacheca-commento p { margin: 3px 0 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.bacheca-form-commento { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.bacheca-form-commento textarea { flex: 1; min-width: 0; resize: vertical; padding: 9px 12px; border: 1.5px solid var(--navy-medio); border-radius: 12px; font: inherit; background: #fff; }
@media (max-width: 600px) {
    .bacheca-post { padding: 16px; }
    .bacheca-post-testa { flex-wrap: wrap; }
    .bacheca-azioni { width: 100%; padding-left: 52px; }
    .bacheca-form-commento { flex-direction: column; align-items: stretch; }
}


/* ---------- Gestione utenti: avatar, etichetta rappresentante, pagine ---------- */
.cella-utente { display: flex; align-items: center; gap: 12px; }
.cella-utente-testo { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.avatar-lista { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-lista .avatar-online { position: absolute; right: -1px; bottom: -1px; margin: 0; border: 2px solid #fff; width: 12px; height: 12px; box-sizing: border-box; }
.tag-rappresentante {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    padding: 3px 10px 3px 8px; border-radius: 999px;
    background: var(--navy-chiaro); color: var(--navy); border: 1px solid var(--navy-medio);
    font-size: 0.7rem; font-weight: 600; white-space: nowrap; line-height: 1.3;
}
.tag-rappresentante svg { flex-shrink: 0; }
.paginazione-admin { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 22px 0 8px; }
.pagina-btn {
    min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--navy-medio); border-radius: 999px; background: #fff; color: var(--navy);
    font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.pagina-btn:hover { background: var(--navy-chiaro); }
.pagina-btn.attiva { background: var(--navy); color: #fff; border-color: var(--navy); }
.pagina-puntini { color: var(--testo-tenue); padding: 0 4px; }


/* ---------- Campo di ricerca rapida (liste) ---------- */
.campo-ricerca { position: relative; width: 100%; max-width: 460px; margin-bottom: 16px; }
.campo-ricerca svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--navy-medio); pointer-events: none; }
.campo-ricerca input[type="search"] {
    width: 100%; height: 46px; padding: 0 18px 0 44px; box-sizing: border-box;
    border: 1.5px solid var(--navy-medio); border-radius: 999px; background: #fff; color: var(--testo, #1b2433);
    font: inherit; font-size: 0.95rem; outline: none; -webkit-appearance: none; appearance: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.campo-ricerca input[type="search"]::placeholder { color: #8591a7; }
.campo-ricerca input[type="search"]:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(30, 58, 95, .14); }
.campo-ricerca input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }