/* =============================================================================
   aMare Pizzo - foglio di stile unico
   I colori derivano dal logo: blu profondo, azzurro mare, corallo.
   Mobile first: il layout parte da 320 px e cresce per breakpoint.

   ARCHITETTURA DEI COLORI
   I nomi delle variabili descrivono il RUOLO, non la tinta, perche' in modalita'
   scura la stessa tinta non puo' svolgere lo stesso compito. In particolare:
     --azione   sfondo dei pulsanti pieni, sempre abbastanza scuro da reggere
                testo bianco in entrambe le modalita';
     --link     colore del testo dei collegamenti, che in modalita' scura deve
                schiarirsi mentre --azione resta scuro;
     --titolo   colore dei titoli, che in modalita' scura diventa chiaro mentre
                --blu-scuro continua a indicare una superficie scura.
   Chi modifica questo file non deve reintrodurre colori fissi al posto di
   queste variabili: e' l'unica cosa che tiene insieme le due modalita'.
   ========================================================================== */

/* --- Carattere -------------------------------------------------------------
   IBM Plex Sans, licenza SIL Open Font, ospitato sul nostro server.
   Non si usa il CDN di Google Fonts: farebbe arrivare l'IP di ogni visitatore
   a un terzo senza base giuridica, cosa che l'informativa non prevede.
   Se i file dei caratteri non sono presenti il sito resta leggibile con la
   pila di sistema indicata piu' sotto.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Marchio: i tre colori del logo, senza mediazioni. */
    --blu:            #002d79;
    --blu-scuro:      #001f52;
    --blu-chiaro:     #e7edf8;
    --azzurro:        #00bbdc;
    --azzurro-chiaro: #e0f6fb;
    --corallo:        #fd5c17;
    --giallo:         #f9c22b;   /* solo decorativo: il sole del meteo mare */

    /* Le due varianti scure servono dove la tinta di marchio non reggerebbe il
       contrasto: l'azzurro #00bbdc su bianco si ferma a 2,3:1 e l'arancione
       #fd5c17 con testo bianco a 3,1:1, sotto il minimo di 4,5:1 dello standard
       AA. Sono la stessa tinta portata al punto in cui si legge, non un altro
       colore: si usano per testo, bordi e riempimenti che vogliono dire
       qualcosa. Le due tinte piene restano per il resto. */
    --azzurro-testo:  #007e94;   /* 4,8:1 su bianco */
    --corallo-scuro:  #cc4206;   /* 4,8:1 con testo bianco */

    /* Ruoli */
    --titolo:         #002d79;
    --link:           #002d79;
    --link-hover:     #001f52;
    --azione:         #002d79;
    --azione-hover:   #001f52;
    --azione-testo:   #ffffff;
    --su-scuro:       #002d79;   /* superficie scura: piede e barra admin */
    --su-scuro-testo: #cfe0f0;

    /* Neutri */
    --testo:          #16212b;
    --testo-tenue:    #52646f;
    --bordo:          #dbe3ec;
    --bordo-tenue:    #e9eef4;
    --sfondo:         #f1f6fc;
    --superficie:     #ffffff;

    /* Stati */
    --ok:             #1b7a4b;
    --ok-sfondo:      #e2f3e9;
    --attenzione:     #7d5100;
    --attenzione-sfondo: #fdf0dc;
    --errore:         #b3261e;
    --errore-sfondo:  #fdecea;
    --neutro-sfondo:  #eceff3;

    --raggio:         10px;
    --raggio-sm:      6px;
    --ombra:          0 1px 2px rgba(9, 30, 66, .06), 0 4px 14px rgba(9, 30, 66, .05);
    --spazio:         1rem;
    --larghezza:      74rem;

    /* Ritmo verticale delle fasce di contenuto */
    --fascia:         clamp(2.5rem, 1rem + 4vw, 4.5rem);
}

/* --- Tema scuro, a richiesta -----------------------------------------------
   Il sito e' chiaro sempre, anche su un telefono impostato in modalita' scura:
   il tema scuro si sceglie dal pulsante nel menu e non lo decide il sistema.
   La scelta viaggia in un cookie e il server la riemette come attributo
   data-tema su <html>, cosi' la pagina nasce gia' del colore giusto invece di
   lampeggiare in bianco mentre parte il JavaScript.
   Si cambiano solo i valori: nessuna regola sotto questo blocco cambia forma.
   --azione resta un blu medio perche' sopra ci va testo bianco; a schiarirsi
   e' --link, che invece e' testo su fondo scuro.
   -------------------------------------------------------------------------- */
:root[data-tema="scuro"] {
    color-scheme: dark;

    --blu:            #7fb2ee;
    --blu-scuro:      #071228;
    --blu-chiaro:     #11203a;
    --azzurro:        #35d3f0;
    --azzurro-chiaro: #0c2733;
    --corallo:        #fd5c17;
    --giallo:         #f9c22b;

    /* Su fondo scuro l'azzurro pieno si legge (10:1): la variante per il testo
       coincide con la tinta di marchio e non ha piu' bisogno di scurirsi. */
    --azzurro-testo:  #35d3f0;
    --corallo-scuro:  #cc4206;   /* resta questa: i pulsanti hanno testo bianco */

    --titolo:         #dce9f5;
    --link:           #86bcf5;
    --link-hover:     #b0d5fa;
    --azione:         #2f6fc4;   /* 5.0:1 con testo bianco */
    --azione-hover:   #3d81d8;
    --azione-testo:   #ffffff;
    --su-scuro:       #071228;
    --su-scuro-testo: #b6cbdd;

    --testo:          #e7edf3;
    --testo-tenue:    #9db0c0;
    --bordo:          #24333f;
    --bordo-tenue:    #1b2833;
    --sfondo:         #0d1720;
    --superficie:     #121f2a;

    --ok:             #7fd3a3;
    --ok-sfondo:      #12351f;
    --attenzione:     #f0c675;
    --attenzione-sfondo: #3d2f12;
    --errore:         #f4a49e;
    --errore-sfondo:  #3d1512;
    --neutro-sfondo:  #1d2a35;

    --ombra:          0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .28);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--testo);
    background: var(--sfondo);
    -webkit-font-smoothing: antialiased;
}

/* Scala tipografica piu' ampia della precedente: la gerarchia si legge
   a colpo d'occhio invece di affidarsi al solo grassetto. */
h1, h2, h3 { color: var(--titolo); margin: 0 0 .45em; line-height: 1.18; letter-spacing: -.017em; }
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 600; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); font-weight: 600; }
h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

img { max-width: 100%; height: auto; }

/* Focus sempre visibile: requisito di accessibilita', non decorazione. */
:focus-visible {
    outline: 3px solid var(--azzurro-testo);
    outline-offset: 2px;
    border-radius: var(--raggio-sm);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--azione);
    color: var(--azione-testo);
    padding: .75rem 1rem;
    z-index: 1000;
}
.skip-link:focus { left: 0; }

.container {
    width: 100%;
    max-width: var(--larghezza);
    margin-inline: auto;
    padding-inline: var(--spazio);
}

.main { padding-block: 2rem 3.5rem; }
.main--full { padding: 0; max-width: none; }

.muted { color: var(--testo-tenue); }
.lead  { font-size: 1.12rem; color: var(--testo-tenue); max-width: 62ch; }
.eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    font-weight: 700;
    color: var(--azzurro-testo);
    margin: 0;
}

/* --- Avviso emergenze -------------------------------------------------------
   Non e' piu' una fascia in cima a ogni pagina: sta nelle due pagine dove
   qualcuno potrebbe scambiare l'applicazione per il numero da chiamare, cioe'
   "Come funziona" e il modulo di segnalazione. Riusa il messaggio di avviso e
   ci aggiunge solo l'icona in linea.
   -------------------------------------------------------------------------- */
.avviso-emergenza { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
.avviso-emergenza svg { flex: none; color: var(--attenzione); }

/* --- Intestazione --------------------------------------------------------- */
.site-header {
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 500;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 68px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: inherit;
    margin-right: auto;
}
.brand__mark { border-radius: 8px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { color: var(--link); font-size: 1.08rem; letter-spacing: -.015em; }
.brand__text small  { color: var(--azzurro-testo); font-size: .72rem; font-weight: 600; }
.brand--stacked { flex-direction: column; text-align: center; margin: 0 0 1.5rem; }
.brand--compact .brand__text strong { font-size: .95rem; }

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    background: var(--superficie);
    color: var(--link);
    cursor: pointer;
}

.site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: .25rem;
    padding-bottom: .75rem;
}
.site-nav.is-open { display: flex; }
/* :not(.btn) e' obbligatorio: "\.site-nav a" ha specificita' maggiore di
   "\.btn--small" e senza l'esclusione azzererebbe il padding dei pulsanti,
   facendo uscire l'etichetta dal riquadro. */
.site-nav a:not(.btn) {
    padding: .6rem .25rem;
    text-decoration: none;
    color: var(--testo);
    font-weight: 500;
    border-radius: var(--raggio-sm);
    transition: color .18s ease;
}
.site-nav a:not(.btn):hover { color: var(--link); }
.site-nav .btn { text-align: center; }
.nav-form { margin: 0; }

@media (min-width: 62rem) {
    .nav-toggle { display: none; }
    .site-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: auto;
        gap: 1.35rem;
        padding: 0;
    }
    .site-nav a:not(.btn) { padding: .35rem 0; font-size: .95rem; }

    /* Da qui il menu sta su una riga e ogni etichetta in piu' la fa spezzare in
       due: l'interruttore del tema si riduce alla sola icona. Il nome resta nel
       markup per i lettori di schermo, nascosto alla vista e non a loro. */
    .theme-toggle { width: 38px; padding: .4rem; justify-content: center; }
    .theme-toggle__testo {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Interruttore del tema, ultima voce del menu. Ha l'aspetto di un comando
   neutro e non di un'azione primaria: cambia una preferenza, non fa avanzare
   niente. Le due etichette e le due icone convivono nel markup e si scambiano
   qui secondo data-tema, cosi' lo script non deve riscrivere del testo. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .45rem;
    min-height: 38px;
    padding: .4rem .8rem;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--testo-tenue);
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.theme-toggle:hover { border-color: var(--azzurro-testo); color: var(--link); }
.theme-toggle[hidden] { display: none; }
.theme-toggle__icona { flex: none; }

.theme-toggle__icona--sole,
.theme-toggle__testo--chiaro { display: none; }
[data-tema="scuro"] .theme-toggle__icona--luna,
[data-tema="scuro"] .theme-toggle__testo--scuro { display: none; }
[data-tema="scuro"] .theme-toggle__icona--sole { display: block; }
[data-tema="scuro"] .theme-toggle__testo--chiaro { display: inline; }

/* --- Pulsanti ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 46px;              /* area di tocco comoda anche con le mani bagnate */
    padding: .6rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--raggio-sm);
    background: var(--azione);
    color: var(--azione-testo);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    /* flex: none e' necessario, non decorativo: dentro un contenitore flex
       (barra di navigazione, azioni del wizard) il pulsante si restringerebbe
       sotto la larghezza della propria etichetta, che con nowrap uscirebbe dal
       riquadro. I contenitori hanno tutti flex-wrap: wrap, quindi i pulsanti
       vanno a capo invece di sfondare. */
    flex: none;
    cursor: pointer;
    transition: background .18s ease, transform .12s ease, border-color .18s ease;
}
.btn:hover  { background: var(--azione-hover); color: var(--azione-testo); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn--ghost {
    background: transparent;
    color: var(--link);
    border-color: var(--bordo);
}
.btn--ghost:hover { background: var(--blu-chiaro); color: var(--link-hover); }

.btn--accent { background: var(--corallo-scuro); }
.btn--accent:hover { background: #93321a; }

.btn--danger { background: var(--errore); color: #fff; }
.btn--danger:hover { background: #8e1c16; color: #fff; }
[data-tema="scuro"] .btn--danger { background: #8e1c16; }
[data-tema="scuro"] .btn--danger:hover { background: #a5231c; }

.btn--small { min-height: 38px; padding: .35rem .8rem; font-size: .875rem; }
.btn--block { width: 100%; }

.link-button {
    background: none;
    border: 0;
    padding: .6rem .25rem;
    font: inherit;
    font-weight: 500;
    color: var(--link);
    cursor: pointer;
    text-decoration: underline;
}

/* --- Messaggi ------------------------------------------------------------- */
.alert {
    border: 1px solid var(--bordo);
    border-left-width: 4px;
    border-radius: var(--raggio-sm);
    padding: .8rem 1rem;
    margin: 1rem 0;
    background: var(--superficie);
}
.alert--success { border-left-color: var(--ok);          background: var(--ok-sfondo); }
.alert--warning { border-left-color: var(--attenzione);  background: var(--attenzione-sfondo); }
.alert--error   { border-left-color: var(--errore);      background: var(--errore-sfondo); }

.notice {
    border-radius: var(--raggio);
    padding: 1.1rem 1.25rem;
    margin: 1.5rem 0;
    background: var(--blu-chiaro);
}
.notice--warning { background: var(--attenzione-sfondo); }
.notice h2, .notice h3 { margin-top: 0; font-size: 1.05rem; }
.notice ul { margin: 0; padding-left: 1.2rem; }
.notice li + li { margin-top: .35rem; }

.disclaimer {
    font-size: .9rem;
    color: var(--testo-tenue);
    border-top: 1px solid var(--bordo);
    padding-top: 1rem;
    margin-top: 2rem;
    max-width: 70ch;
}

/* --- Card e griglie --------------------------------------------------------
   La card e' riservata a cio' che e' davvero un oggetto a se': una segnalazione,
   un passo del modulo, un pannello di accesso. Per raggruppare testo si usano
   lo spazio e i filetti, non un altro riquadro.
   -------------------------------------------------------------------------- */
.card {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 1.35rem 1.4rem;
    margin-bottom: 1.25rem;
}
.card h2:first-child { margin-top: 0; }

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) {
    .grid--2 { grid-template-columns: 1fr 1fr; }
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.page-head h1, .page-head h2 { margin: 0; }

/* --- Fasce e apertura di pagina --------------------------------------------
   Usate dalle pagine pubbliche discorsive (come funziona, regole, privacy).
   -------------------------------------------------------------------------- */
.band { padding-block: var(--fascia); border-top: 1px solid var(--bordo); }
.band:first-child { border-top: 0; padding-top: 0; }
.band--soft { background: var(--superficie); border-top: 0; }

.hero { padding-block: 0 var(--fascia); }
.hero__grid { display: grid; gap: 2rem; align-items: center; }
.hero p.lead { margin-bottom: 1.75rem; max-width: 46ch; }
.hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero__fig { margin: 0; }
.hero__fig img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--raggio);
    border: 1px solid var(--bordo);
    display: block;
    background: var(--blu-chiaro);
}
.hero__cap { font-size: .84rem; color: var(--testo-tenue); margin: .6rem 0 0; }
@media (min-width: 62rem) {
    .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; }
}

/* --- Passi numerati ---------------------------------------------------------
   Sostituisce l'elenco ordinato semplice dove la sequenza e' il contenuto
   principale della sezione. Filetti al posto di card ripetute.
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: passo; }
.steps li {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 1rem;
    padding: 1.35rem 0;
    border-top: 1px solid var(--bordo);
}
.steps li:last-child { border-bottom: 1px solid var(--bordo); }
.steps li::before {
    counter-increment: passo;
    content: counter(passo);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--azzurro-testo);
    line-height: 1.25;
}
/* Titolo e testo stanno nella colonna accanto al numero. Senza indicarlo, il
   testo - terzo elemento della griglia dopo il numero e il titolo - andrebbe a
   capo nella colonna del numero, larga 2,75 rem: su telefono si leggerebbe una
   parola per riga. */
.steps h3 { margin: 0 0 .2rem; grid-column: 2; }
.steps p  { margin: 0; color: var(--testo-tenue); max-width: 64ch; grid-column: 2; }
@media (min-width: 48rem) {
    .steps li { grid-template-columns: 3.5rem 15rem 1fr; align-items: baseline; column-gap: 1.5rem; }
    .steps h3 { margin: 0; }
    /* Da qui in poi le colonne sono tre: il titolo resta in mezzo, il testo va a destra. */
    .steps p  { grid-column: 3; }
}

/* --- Form ----------------------------------------------------------------- */
.form { margin-top: 1rem; }
/* min-width: 0 evita che la larghezza minima intrinseca dei select (data dall'opzione
   piu' lunga) sfondi il contenitore sugli schermi da 320 px. */
.field { margin-bottom: 1.15rem; min-width: 0; }
.field__label, .field > label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .95rem;
}
.field__hint {
    font-size: .84rem;
    color: var(--testo-tenue);
    margin: .35rem 0 0;
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], input[type="number"], input[type="file"], select, textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: .6rem .75rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    background: var(--superficie);
    font: inherit;
    color: var(--testo);
    transition: border-color .18s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--azzurro-testo); }
/* Il segnaposto deve restare distinguibile dal valore ma leggibile:
   sotto il 4.5:1 diventerebbe decorazione. */
::placeholder { color: var(--testo-tenue); opacity: 1; }
textarea { min-height: 7rem; resize: vertical; }
input[type="color"] { width: 56px; height: 46px; padding: 2px; border: 1px solid var(--bordo); border-radius: var(--raggio-sm); }

.input--code { font-size: 1.4rem; letter-spacing: .35em; text-align: center; max-width: 12ch; }
.input--narrow { max-width: 6rem; }

.field--check {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: .5rem;
    align-items: start;
}
.field--check input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: .3rem; }
.field--check label { font-weight: 400; font-size: .95rem; }
.field--check label strong { display: block; font-weight: 600; }
.field--check label small  { display: block; color: var(--testo-tenue); }

.field--row { display: flex; gap: .75rem; }
/* min-width: 0 permette ai campi data di scendere sotto la loro larghezza
   intrinseca: senza, due date affiancate sfondano un pannello da 320 px. */
.field--row > div { flex: 1 1 0; min-width: 0; }

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-end;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.filters .field { margin-bottom: 0; min-width: 0; flex: 1 1 10rem; }
/* Versione verticale del blocco filtri (pannello mappa).
   Volutamente NON flex: un contenitore flex in colonna con wrap dimensiona la
   riga sulla larghezza massima dei figli, e i select finiscono per sfondare il
   pannello sugli schermi stretti. */
.filters--stacked { display: block; border: 0; padding: 0; background: none; }
.filters--stacked .field { margin-bottom: .9rem; }
.filters--inline { padding: .5rem; }
.filters__actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.row-form {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
    padding: .9rem 0;
    border-bottom: 1px solid var(--bordo);
}
.row-form:last-child { border-bottom: 0; }
.row-form .field { margin-bottom: 0; }
.row-form__code { flex: 0 0 8rem; padding-bottom: .6rem; }
.field--grow { flex: 1 1 14rem; }
.field--narrow { flex: 0 0 7rem; }

.sticky-actions {
    position: sticky;
    bottom: 0;
    background: var(--sfondo);
    padding: .85rem 0;
    border-top: 1px solid var(--bordo);
}

/* --- Card di autenticazione ------------------------------------------------ */
.auth-card {
    max-width: 30rem;
    margin: 0 auto;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 1.75rem;
}
.auth-links {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bordo);
    font-size: .92rem;
}
.auth-details { margin-top: 1rem; font-size: .92rem; }
.auth-details summary { cursor: pointer; color: var(--link); }

.minimal-shell {
    max-width: 30rem;
    margin: 0 auto;
    padding: 2.5rem 1rem;
}

.secret-box {
    background: var(--blu-chiaro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1rem;
    margin: 1rem 0;
}
.secret-box__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: .06em;
    text-align: center;
    background: var(--superficie);
    margin-bottom: .5rem;
}
/* Versione a gruppi di quattro: serve solo alla lettura, non e' selezionabile
   per errore al posto del valore reale. */
.secret-box__grouped {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    letter-spacing: .1em;
    text-align: center;
    color: var(--titolo);
    user-select: none;
    margin: .75rem 0 .25rem;
}
.totp-uri code { font-size: .78rem; word-break: break-all; }

/* --- Wizard segnalazione ---------------------------------------------------- */
.wizard { max-width: 44rem; }
.wizard__progress {
    display: flex;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    counter-reset: step;
    font-size: .8rem;
}
.wizard__progress li {
    flex: 1;
    text-align: center;
    padding: .45rem .2rem;
    border-radius: var(--raggio-sm);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    color: var(--testo-tenue);
}
.wizard__progress li[aria-current="step"] {
    background: var(--azione);
    border-color: var(--azione);
    color: var(--azione-testo);
    font-weight: 600;
}
.wizard__progress li.is-done { background: var(--blu-chiaro); border-color: var(--blu-chiaro); color: var(--link); }

.wizard__step {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--superficie);
    box-shadow: var(--ombra);
    padding: 1.35rem 1.4rem;
    margin: 0 0 1.25rem;
}
.wizard__step legend {
    font-weight: 700;
    color: var(--titolo);
    font-size: 1.12rem;
    padding: 0 .35rem;
}
.wizard__actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: 1.35rem;
    flex-wrap: wrap;
}

.geo-status {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border-radius: var(--raggio-sm);
    background: var(--sfondo);
    border: 1px solid var(--bordo);
    font-size: .92rem;
}
.geo-status.is-ok   { background: var(--ok-sfondo);      border-color: var(--ok); }
.geo-status.is-fail { background: var(--errore-sfondo);  border-color: var(--errore); }

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .6rem;
}
.choice {
    display: block;
    position: relative;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    padding: .8rem .85rem .8rem 2.4rem;
    background: var(--superficie);
    cursor: pointer;
    transition: border-color .18s ease;
}
.choice:hover { border-color: var(--azzurro-testo); }
.choice input {
    position: absolute;
    left: .85rem;
    top: .95rem;
    width: 1.1rem;
    height: 1.1rem;
}
.choice:has(input:checked) {
    border-color: var(--cat-color, var(--azione));
    box-shadow: inset 3px 0 0 var(--cat-color, var(--azione));
    background: var(--blu-chiaro);
}
.choice__body strong { display: block; }
.choice__body small  { color: var(--testo-tenue); font-size: .8rem; line-height: 1.4; display: block; }

/* Il pulsante nativo dell'input file non e' personalizzabile: nascondiamo
   l'input (senza toglierlo dal flusso della tastiera) e usiamo la sua <label>
   come pulsante, cosi' l'etichetta dice "Scatta foto" invece di "Scegli file". */
.photo-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}
.photo-picker .photo-picker__input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* L'anello di focus segue l'input nascosto: chi naviga da tastiera vede
   evidenziato il pulsante che sta per attivare. */
.photo-picker__input:focus-visible + .photo-picker__button {
    outline: 3px solid var(--azzurro-testo);
    outline-offset: 2px;
}
/* .btn impone display: inline-flex e vince sulla regola [hidden] del browser:
   senza questa riga il pulsante resterebbe visibile una volta raggiunto il
   numero massimo di foto. */
.photo-picker__button[hidden] { display: none; }
.photo-picker__status {
    margin: 0;
    font-size: .875rem;
    color: var(--testo-tenue);
}

.photo-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: .6rem;
    margin-top: 1rem;
}
.photo-previews figure { margin: 0; }
.photo-previews img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--raggio-sm);
    border: 1px solid var(--bordo);
}
.photo-previews figcaption { font-size: .75rem; color: var(--testo-tenue); }
.photo-previews .btn { margin-top: .35rem; }
/* L'avviso non e' una miniatura: occupa tutta la riga della griglia invece
   di stringersi nella colonna da 8 rem. */
.photo-previews .alert { grid-column: 1 / -1; }

/* --- Mappa ------------------------------------------------------------------ */
.map-layout { display: flex; flex-direction: column; }
.map-canvas { position: relative; }
#map {
    height: 60vh;
    min-height: 20rem;
    width: 100%;
    background: var(--blu-chiaro);
}
.map-panel {
    padding: 1.5rem var(--spazio) 2.5rem;
    background: var(--superficie);
    border-top: 1px solid var(--bordo);
}
.map-panel__intro h1 { font-size: 1.4rem; letter-spacing: -.015em; }
.map-panel__intro p { font-size: .95rem; }
.map-panel__status {
    font-size: .875rem;
    color: var(--testo-tenue);
    padding: .6rem 0;
    border-top: 1px solid var(--bordo);
    border-bottom: 1px solid var(--bordo);
    margin: 1.25rem 0;
}

.map-results { list-style: none; margin: 0; padding: 0; max-height: 24rem; overflow-y: auto; }
.map-results li { border-bottom: 1px solid var(--bordo-tenue); }
.map-results a {
    display: block;
    padding: .75rem .25rem;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid transparent;
    padding-left: .6rem;
    transition: border-color .18s ease, background .18s ease;
}
.map-results a:hover { background: var(--blu-chiaro); border-left-color: var(--azzurro-testo); }
.map-results strong { color: var(--link); display: block; font-size: .95rem; }
.map-results small  { color: var(--testo-tenue); }

.legend { margin: 1.5rem 0; }
.legend summary { cursor: pointer; font-weight: 600; }
.legend__list { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
.legend__list li { display: flex; align-items: center; gap: .5rem; }
.legend__dot {
    width: .85rem; height: .85rem;
    border-radius: 50%;
    flex: none;
    background: var(--cat-color, var(--azione));
    border: 2px solid var(--superficie);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
}

.mini-map {
    height: 15rem;
    border-radius: var(--raggio-sm);
    border: 1px solid var(--bordo);
    background: var(--blu-chiaro);
    margin: 1rem 0;
}
.mini-map--tall { height: 20rem; }

@media (min-width: 64rem) {
    .map-layout {
        flex-direction: row;
        height: calc(100vh - 68px - 36px);
    }
    .map-canvas { flex: 1 1 auto; }
    #map { height: 100%; }
    .map-panel {
        flex: 0 0 25rem;
        border-top: 0;
        border-left: 1px solid var(--bordo);
        overflow-y: auto;
    }
    .map-layout--embedded { height: 28rem; }
    .map-layout--embedded #map { height: 28rem; }
}

/* --- Home dell'utente e pagina d'ingresso -----------------------------------
   La home non e' un testo da leggere ma un pannello di comando: pochi riquadri
   grandi, una cosa sola dentro ciascuno, misurati sul pollice e non sul mouse.
   -------------------------------------------------------------------------- */
.home { max-width: 46rem; }
.home__saluto { color: var(--testo-tenue); margin-bottom: 1.25rem; }

/* Il richiamo a segnalare: card bianca con l'illustrazione della costa che
   entra da destra. L'illustrazione sfuma da sola sul lato sinistro, quindi il
   testo resta su fondo pulito senza bisogno di maschere o velature. L'arancione
   sta solo sul segnaposto e sulla freccia: e' li' l'azione, e non ha
   concorrenti nel resto della pagina. */
.segnala-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .85rem;
    min-height: 8.5rem;
    padding: 1.1rem 1.15rem;
    padding-right: 38%;   /* la colonna che resta all'illustrazione */
    overflow: hidden;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.segnala-hero:hover {
    color: inherit;
    border-color: var(--corallo);
    box-shadow: 0 6px 18px rgba(253, 92, 23, .2);
}
.segnala-hero__foto {
    position: absolute;
    top: 0;
    right: 0;
    width: 46%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 72% center;
    /* Il ritaglio taglia via la sfumatura che l'illustrazione ha per conto suo:
       la si rifa' qui, altrimenti l'immagine si attaccherebbe al testo con un
       bordo netto. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%);
    mask-image: linear-gradient(to right, transparent 0, #000 40%);
}
.segnala-hero__pin { position: relative; display: flex; color: var(--corallo); }
.segnala-hero__testo { position: relative; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.segnala-hero__testo strong { font-size: 1.2rem; line-height: 1.15; letter-spacing: -.02em; color: var(--titolo); }
.segnala-hero__testo span { font-size: .85rem; line-height: 1.35; color: var(--testo-tenue); }
.segnala-hero__freccia {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--corallo);
    border: 3px solid var(--superficie);
    color: #fff;
}
/* Con il tema scuro le illustrazioni, nate su fondo chiaro, sparano: si
   attenuano come gia' si fa con le tessere della mappa. */
[data-tema="scuro"] .segnala-hero__foto,
[data-tema="scuro"] .home-tile__disegno,
[data-tema="scuro"] .benvenuto__cielo,
[data-tema="scuro"] .benvenuto__fig img { filter: brightness(.86) saturate(.92); }

@media (min-width: 40rem) {
    .segnala-hero { min-height: 9.5rem; padding-right: 36%; }
    .segnala-hero__testo strong { font-size: 1.45rem; }
    .segnala-hero__testo span { font-size: .95rem; }
}

.home-griglia { display: grid; gap: 1rem; margin: 1.25rem 0 2rem; }
@media (min-width: 34rem) {
    .home-griglia { grid-template-columns: 1fr 1fr; }
}

.home-tile {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}
.home-tile--link { text-decoration: none; color: inherit; transition: border-color .18s ease; }
.home-tile--link:hover { border-color: var(--azzurro-testo); color: inherit; }
.home-tile__testa { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.home-tile__titolo { font-weight: 600; font-size: 1.05rem; color: var(--titolo); }
.home-tile__freccia { flex: none; color: var(--link); }
.home-tile__corpo { display: flex; flex-direction: column; gap: .6rem; }
.home-tile__disegno { display: block; width: 100%; height: auto; border-radius: var(--raggio-sm); }
.home-tile__dato { font-size: .88rem; color: var(--testo-tenue); }
.home-tile__dato strong { color: var(--testo); font-size: 1.05rem; }
.home-tile__vuoto,
.home-tile__nota { margin: 0; font-size: .8rem; color: var(--testo-tenue); }

.home-tile__corpo--meteo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 1 1 auto;
}
.meteo-mare { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.meteo-mare__cerchio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: var(--azzurro-chiaro);
}

/* var() dentro a un attributo di presentazione SVG non e' sostenuto da tutti i
   browser, e la CSP non ammette attributi style nel markup: i colori delle due
   icone disegnate a mano stanno percio' qui. */
.onda__cresta  { fill: var(--blu); }
.onda__schiuma { fill: #fff; opacity: .85; }
.onda__linea   { stroke: var(--azzurro); stroke-width: 2.6; stroke-linecap: round; }
.onda__linea--tenue { opacity: .55; }
.sole__disco { fill: var(--giallo); }
.sole__raggi { stroke: var(--giallo); stroke-width: 2.2; stroke-linecap: round; }
.meteo-mare__stato { font-size: 1rem; color: var(--titolo); line-height: 1.25; }
.meteo-mare__onda { font-size: .78rem; color: var(--testo-tenue); }
.meteo-aria { display: flex; align-items: center; gap: .4rem; color: var(--attenzione); }
.meteo-aria strong { font-size: 1.7rem; color: var(--titolo); letter-spacing: -.02em; }

.home-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.home-testa h2 { margin: 0; font-size: 1.3rem; }
.home-testa__tutte { display: inline-flex; align-items: center; gap: .25rem; font-size: .9rem; font-weight: 600; text-decoration: none; }
.home-testa__tutte:hover { text-decoration: underline; }

/* Un riquadro solo diviso da filetti, non cinque card in fila: sono righe di
   uno stesso elenco, e la card resta riservata agli oggetti a se'. */
.home-lista {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    overflow: hidden;
}
.home-lista li + li { border-top: 1px solid var(--bordo-tenue); }
.home-lista a {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background .18s ease;
}
.home-lista a:hover { background: var(--blu-chiaro); }
.home-lista__icona {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid var(--bordo);
    color: var(--cat-color, var(--azione));
}
.home-lista__testo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.home-lista__testo strong { font-size: .98rem; color: var(--titolo); }
.home-lista__testo span {
    font-size: .85rem;
    color: var(--testo-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-lista__meta {
    flex: none;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
}
.home-lista__meta time {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .78rem;
    color: var(--testo-tenue);
    white-space: nowrap;
}
.home-lista__meta time svg { flex: none; color: var(--link); }
.home-lista__freccia { flex: none; color: var(--testo-tenue); }

/* Sotto i 22 rem la colonna dello stato mangia la descrizione: resta la sola
   ora, che e' il dato per cui si guarda un elenco di cose appena successe. */
@media (max-width: 22rem) {
    .home-lista__meta .badge { display: none; }
}

.benvenuto { position: relative; max-width: 44rem; }
.benvenuto h1 { margin-top: .2rem; }

/* La fascia di cielo sta dietro all'apertura, non dentro al flusso: e' un
   fondale, e non deve spostare di una riga il testo che le passa sopra. */
.benvenuto__cielo {
    position: absolute;
    top: -2.5rem;
    /* Si allarga fin dentro al margine del contenitore, non oltre: sopra la
       larghezza della pagina comparirebbe una barra di scorrimento orizzontale
       su tutta la home. */
    left: calc(var(--spazio) * -1);
    width: calc(100% + var(--spazio) * 2);
    max-width: none;
    z-index: -1;
    pointer-events: none;
}
.benvenuto__fig { margin: 1.75rem 0 0; }
.benvenuto__fig img {
    display: block;
    width: 100%;
    max-width: 32rem;
    border-radius: var(--raggio);
}
.benvenuto__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1.25rem; }
.benvenuto__nota { font-size: .88rem; max-width: 56ch; }
.benvenuto__scopri {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 2rem 0 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bordo);
    font-weight: 600;
}

/* --- Elenchi di segnalazioni ------------------------------------------------ */
.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.report-card {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--ombra);
    transition: border-color .18s ease;
}
.report-card:hover { border-color: var(--azzurro-testo); }
.report-card__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.report-card__code { font-weight: 700; text-decoration: none; letter-spacing: .01em; }
.report-card__meta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--testo-tenue);
    margin: 0 0 .5rem;
}
.report-card__description { margin: 0; }

/* Griglia asimmetrica per le segnalazioni in evidenza: la prima cella pesa piu'
   delle altre, invece di tre riquadri identici affiancati. */
@media (min-width: 56rem) {
    .report-list--grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: var(--blu-chiaro);
    color: var(--link);
    white-space: nowrap;
}
.badge--submitted    { background: var(--azzurro-chiaro); color: #10586b; }
.badge--in_review    { background: var(--attenzione-sfondo); color: var(--attenzione); }
.badge--verified     { background: var(--ok-sfondo); color: var(--ok); }
.badge--not_verified { background: var(--errore-sfondo); color: var(--errore); }
.badge--closed       { background: var(--neutro-sfondo); color: var(--testo-tenue); }
.badge--muted        { background: var(--neutro-sfondo); color: var(--testo-tenue); }
[data-tema="scuro"] .badge--submitted { color: #7fd0e4; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--testo);
}
.chip::before {
    content: "";
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--cat-color, var(--azione));
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--superficie);
    border: 1px dashed var(--bordo);
    border-radius: var(--raggio);
}
.empty-state--large { padding: 4rem 1rem; }
.empty-state .actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

.pagination { display: flex; flex-wrap: wrap; gap: .35rem; margin: 2rem 0 0; }
.pagination a {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    background: var(--superficie);
    text-decoration: none;
}
.pagination a:hover { border-color: var(--azzurro-testo); }
.pagination a[aria-current="page"] { background: var(--azione); color: var(--azione-testo); border-color: var(--azione); }

/* --- Dettaglio segnalazione -------------------------------------------------- */
.data-list { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .5rem .9rem; margin: 0 0 1.5rem; }
.data-list dt { font-weight: 600; color: var(--testo-tenue); font-size: .9rem; }
.data-list dd { margin: 0; }

.report-description { white-space: pre-line; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .85rem; }
.media-item { margin: 0; }
.media-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--raggio-sm);
    border: 1px solid var(--bordo);
    background: var(--sfondo);
}
.media-item figcaption { font-size: .8rem; display: grid; gap: .25rem; margin-top: .35rem; }
.media-actions { display: flex; gap: .35rem; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--bordo); }
.timeline li { position: relative; padding: 0 0 1.15rem 1rem; }
.timeline li::before {
    content: "";
    position: absolute;
    left: -1.45rem;
    top: .4rem;
    width: .7rem; height: .7rem;
    border-radius: 50%;
    background: var(--azzurro-testo);
    border: 2px solid var(--superficie);
}
.timeline time { display: block; font-size: .8rem; color: var(--testo-tenue); }
.timeline p { margin: .2rem 0; }

.steps-list { padding-left: 1.2rem; }
.steps-list li { margin-bottom: .5rem; }
.plain-list { margin: 0; padding-left: 1.1rem; }

.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: .35rem; }

/* --- Area amministrativa ------------------------------------------------------ */
.body--admin { background: var(--sfondo); }
.admin-shell { display: flex; flex-direction: column; min-height: 100vh; }

.admin-sidebar {
    background: var(--su-scuro);
    color: var(--su-scuro-testo);
    padding: 1rem;
}
.admin-sidebar .brand__text strong { color: #fff; }
.admin-sidebar .brand__text small  { color: var(--azzurro); }
.admin-sidebar nav ul { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.admin-sidebar nav a {
    display: block;
    padding: .55rem .8rem;
    color: var(--su-scuro-testo);
    text-decoration: none;
    border-radius: var(--raggio-sm);
    font-weight: 500;
}
.admin-sidebar nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.admin-sidebar nav a[aria-current="page"] { background: var(--azzurro); color: #06283a; font-weight: 700; }
.admin-sidebar__footer { font-size: .85rem; border-top: 1px solid rgba(255,255,255,.15); padding-top: .75rem; }
.admin-sidebar__footer a, .admin-sidebar__footer .link-button { color: var(--azzurro); }
.admin-sidebar__footer .muted { color: #a9c3da; margin: .35rem 0; }

.admin-content { flex: 1; padding: 1.5rem var(--spazio) 3rem; min-width: 0; }
.admin-topbar h1 { margin: 0 0 1.25rem; }
.admin-toolbar {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

@media (min-width: 60rem) {
    .admin-shell { flex-direction: row; }
    .admin-sidebar {
        flex: 0 0 15rem;
        min-height: 100vh;
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .admin-sidebar nav { flex: 1; }
    .admin-sidebar nav ul { flex-direction: column; }
    .admin-content { padding: 2rem 2.25rem 3rem; }
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .85rem;
    margin-bottom: 1.75rem;
}
.kpi {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--azzurro-testo);
    border-radius: var(--raggio);
    padding: 1rem 1.1rem;
    display: grid;
    gap: .15rem;
}
.kpi__value { font-size: 2rem; font-weight: 600; color: var(--titolo); line-height: 1.05; letter-spacing: -.02em; }
.kpi__label { font-weight: 600; font-size: .9rem; }
.kpi__note  { font-size: .78rem; color: var(--testo-tenue); }

.bar-chart { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.bar-chart li { display: grid; grid-template-columns: 3.5rem 1fr 2rem; gap: .5rem; align-items: center; font-size: .82rem; }
.bar-chart__track { background: var(--sfondo); border-radius: 999px; height: .7rem; overflow: hidden; }
.bar-chart__bar { display: block; height: 100%; background: var(--azzurro-testo); border-radius: 999px; }
.bar-chart__value { text-align: right; font-weight: 600; }

.stat-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .3rem; }
.stat-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--bordo-tenue);
}

.table-wrapper { overflow-x: auto; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--bordo-tenue); vertical-align: top; }
.table th { background: var(--blu-chiaro); color: var(--titolo); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table--compact td, .table--compact th { padding: .4rem .6rem; font-size: .82rem; }

.code-block {
    background: var(--sfondo);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    padding: .6rem;
    font-size: .78rem;
    overflow-x: auto;
    max-width: 26rem;
    white-space: pre-wrap;
}

/* --- Piede ------------------------------------------------------------------- */
.site-footer {
    background: var(--su-scuro);
    color: var(--su-scuro-testo);
    padding: 3rem 0;
    margin-top: 3rem;
    font-size: .92rem;
}
.site-footer__inner { display: grid; gap: 1.5rem; }
.site-footer strong { color: #fff; display: block; margin-bottom: .4rem; }
.site-footer p { max-width: 58ch; }
.site-footer nav { display: flex; flex-direction: column; gap: .45rem; }
.site-footer a { color: var(--azzurro); }

/* Numero di versione. Il deploy su cPanel non e' automatico e l'FTP a volte
   salta dei file: averlo sotto gli occhi dice se il server ha davvero preso
   l'ultima versione, senza confrontare i file a mano. */
.site-footer__version {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .82rem;
    opacity: .72;
}
.admin-sidebar__footer .admin-sidebar__version {
    font-size: .78rem;
    margin-top: .9rem;
    opacity: .8;
}

@media (min-width: 52rem) {
    .site-footer__inner { grid-template-columns: 2fr 1fr; }
}

/* Con il tema scuro il piede e lo sfondo pagina sono quasi della stessa
   luminosita': senza filetto il piede non si stacca dal contenuto. */
[data-tema="scuro"] .site-footer { border-top: 1px solid var(--bordo); }
[data-tema="scuro"] .admin-sidebar { border-right: 1px solid var(--bordo); }

/* --- Barra di navigazione in basso ---------------------------------------------
   Solo su telefono. Sotto i 62 rem il menu principale sta chiuso dietro il
   pulsante a panino, e le quattro cose che si fanno davvero - guardare la home,
   aprire la mappa, segnalare, entrare nel profilo - devono restare a portata di
   pollice. Da 62 rem in su il menu e' gia' tutto in vista e la barra sarebbe una
   ripetizione, quindi sparisce.
   -------------------------------------------------------------------------- */
.tabbar { display: none; }

@media (max-width: 61.999rem) {
    /* Spazio in fondo alla pagina: senza, la barra coprirebbe le ultime righe.
       Le due pagine che la barra non ce l'hanno - area operativa e schermate di
       accesso - restano fuori, altrimenti si porterebbero dietro un vuoto. */
    body:not(.body--admin):not(.body--minimal) {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }

    .tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 600;
        background: var(--superficie);
        border-top: 1px solid var(--bordo);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 12px rgba(9, 30, 66, .08);
    }
    .tabbar__voce {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .15rem;
        min-height: 4.25rem;
        padding: .5rem .25rem;
        text-decoration: none;
        color: var(--testo-tenue);
        font-size: .72rem;
        font-weight: 600;
    }
    .tabbar__icona { display: flex; }
    .tabbar__voce[aria-current="page"] { color: var(--link); }
    /* Il filetto sotto l'etichetta dice qual e' la pagina aperta anche a chi non
       distingue le due tinte: il colore da solo non basterebbe. */
    .tabbar__voce[aria-current="page"] .tabbar__etichetta {
        padding-bottom: 1px;
        border-bottom: 2px solid currentColor;
    }

    /* "Segnala" esce dalla riga: e' l'azione per cui si apre l'applicazione e si
       riconosce senza leggere l'etichetta. */
    .tabbar__voce--azione { color: var(--corallo-scuro); }
    .tabbar__voce--azione .tabbar__icona {
        align-items: center;
        justify-content: center;
        width: 3.3rem;
        height: 3.3rem;
        margin-top: -1.5rem;
        border-radius: 50%;
        /* Qui va la tinta piena del marchio: sopra c'e' un'icona, non del
           testo, e per un oggetto grafico bastano 3:1 (siamo a 3,1:1).
           L'etichetta sotto resta invece nella variante scura, perche' quella
           e' testo su fondo bianco. */
        background: var(--corallo);
        border: 3px solid var(--superficie);
        color: #fff;
        box-shadow: 0 3px 10px rgba(253, 92, 23, .38);
    }
    .tabbar__voce--azione[aria-current="page"] { color: var(--corallo-scuro); }
}

/* --- Indicatori sulla mappa ---------------------------------------------------- */
.map-pin { background: none; border: 0; }
.map-pin__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--cat-color, var(--azione));
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(9, 30, 66, .45);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}
/* Il gruppo di segnalazioni ravvicinate: si distingue dal punto singolo per
   l'alone chiaro, che lo stacca dagli altri indicatori quando si sovrappongono. */
.map-pin__dot--group {
    font-size: .78rem;
    border-width: 3px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 1px 5px rgba(9, 30, 66, .5);
    cursor: zoom-in;
}
.map-pin__count { line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

.map-popup__item { font-size: .88rem; }
.map-popup__item + .map-popup__item { margin-top: .4rem; }
.leaflet-popup-content hr { border: 0; border-top: 1px solid var(--bordo); margin: .5rem 0; }

/* Le tessere della mappa restano chiare anche con il tema scuro: schiarirle
   renderebbe illeggibili i nomi dei luoghi. Si attenua solo la luminosita'. */
[data-tema="scuro"] .leaflet-tile { filter: brightness(.82) saturate(.9); }
[data-tema="scuro"] .leaflet-popup-content-wrapper,
[data-tema="scuro"] .leaflet-popup-tip { background: var(--superficie); color: var(--testo); }

/* --- Movimento ridotto ---------------------------------------------------------
   L'unico movimento del sito sono le transizioni di stato sui comandi.
   Chi ha chiesto meno animazioni le riceve istantanee, non rallentate.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header, .site-footer, .filters, .btn, .tabbar { display: none !important; }
}