/* ============================================================================
   Mosaiko — foglio di stile unico (Brand Book v1.0)
   Palette tessere: Terracotta guida le azioni, Bianco+Carta dominano (~80%),
   tessere colorate solo come accenti. Radius 14-16 nella PWA, 8-10 nel
   gestionale. Bottoni a pillola, hit target >= 44px, icone a tratto 2.5px.
   ========================================================================== */

/* ------------------------------------------------------------------ font
   Self-hosted (niente CDN: zero richieste a terzi, GDPR-friendly).
   Se i file non sono ancora in /assets/fonts, i fallback di sistema reggono. */
@font-face {
    font-family: 'Signika';
    src: url('/assets/fonts/signika-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Signika';
    src: url('/assets/fonts/signika-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/assets/fonts/source-sans-3-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/assets/fonts/source-sans-3-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/assets/fonts/source-sans-3-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* ---------------------------------------------------------------- token */
:root {
    /* Palette tessere */
    --terracotta:       #E2725B;
    --terracotta-dark:  #B3543F;  /* testi piccoli su chiaro: contrasto AA */
    --terracotta-aa:    #D54326;  /* superfici che portano TESTO BIANCO: il #E2725B
                                     con il bianco da 3.09:1, sotto il 4.5 di WCAG AA.
                                     Il terracotta pieno resta per logo, tessere e bordi. */
    --ambra:            #E8A13D;
    --salvia:           #3D8B7D;
    --cobalto:          #4A6FA5;
    --ametista:         #8B5E8F;
    --corallo:          #C94F4F;  /* SOLO errori e alert */
    /* Varianti per il TESTO su fondo chiaro: le tinte piene non arrivano al
       4.5:1 richiesto da WCAG AA (l'ambra su bianco è appena 2.19:1).
       Stessa tinta, luminosità abbassata quanto basta. Le tinte piene restano
       per sfondi e decorazioni. */
    --ambra-dark:       #A06513;  /* testo: 4.5:1 su carta */
    --salvia-dark:      #327267;  /* testo (anche sul flash tinteggiato) e sfondo con testo bianco */
    --corallo-dark:     #BA3939;  /* testo errore (anche sul flash) e sfondo con testo bianco */
    --caffe:            #3A2E28;  /* testi */
    --talpa:            #6B5D51;  /* testi secondari */
    --carta:            #FAF7F2;  /* sfondo base */
    --bianco:           #FFFFFF;
    --fuga:             #EDE6DB;  /* bordi delicati, "malta" */
    --line:             #E4DBCE;  /* bordo di card/tabelle (era referenziato ma non definito) */
    /* Superfici scure ("caffè"/"legno") e testi che vi poggiano sopra: prima
       ripetuti a mano (#46372f, #F3ECE1, #B7A793) in tile, stat, hero. */
    --scuro:            #46372F;  /* superficie scura calda (tile ore, hero stat) */
    --su-scuro:         #F3ECE1;  /* testo/valore su superficie scura */
    --su-scuro-muted:   #B7A793;  /* testo secondario su superficie scura */

    --font-display: 'Signika', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-text: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --radius-app: 16px;     /* PWA: card morbide */
    --radius-admin: 10px;   /* gestionale: più denso */
    --radius-field: 12px;
    --shadow-card: 0 1px 3px rgba(58, 46, 40, .07), 0 4px 14px rgba(58, 46, 40, .05);
    /* Sollevata: per il momento in cui una card viene toccata o sfiorata. */
    --shadow-lift: 0 2px 6px rgba(58, 46, 40, .10), 0 12px 28px rgba(58, 46, 40, .12);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Chi naviga da tastiera non deve ripassare header e menu a ogni pagina
   (WCAG 2.4.1): il link compare solo quando riceve il fuoco. */
.skip-link {
    position: absolute;
    left: 8px;
    top: -100px;
    z-index: 100;
    background: var(--bianco);
    color: var(--terracotta-dark);
    font-weight: 600;
    padding: 12px 18px;
    border-radius: var(--radius-field);
    box-shadow: var(--shadow-card);
    transition: top .12s ease;
}
.skip-link:focus { top: 8px; outline: 2.5px solid var(--cobalto); outline-offset: 2px; }

/* Rispetta chi ha chiesto meno movimento al sistema (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
body {
    margin: 0;
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.55;
    color: var(--caffe);
    background: var(--carta);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Niente doppio-tap-zoom: tocchi reattivi come in un'app (la mappa Leaflet
       gestisce da sé il proprio zoom). */
    touch-action: manipulation;
}
img, svg { max-width: 100%; }
a { color: var(--terracotta-dark); }
a:hover { text-decoration-thickness: 2px; }  /* non schiarire: il colore chiaro scende sotto AA */

/* Scala tipografica (Brand Book sez. 04) */
h1 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.2; margin: 0 0 .35em; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.25; margin: 0 0 .4em; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 .4em; }
.caption { font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--talpa); }

/* ----------------------------------------------------------------- logo */
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo-mark { width: 28px; height: 28px; flex: none; }
.logo-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--caffe);
    letter-spacing: .01em;
}
.logo-word b { font-weight: inherit; color: var(--terracotta); }
.site-logo { text-decoration: none; }

/* -------------------------------------------------------- layout "base" */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}
.lang-switch { font-weight: 600; font-size: 14px; color: var(--talpa); }
.lang-switch a { text-decoration: none; color: var(--talpa); padding: 8px 6px; }
.lang-switch a.is-active { color: var(--terracotta-dark); }

/* Azioni dell'header: selettore lingua (a tendina) + accesso. */
.site-nav { display: flex; align-items: center; gap: 12px; }
.btn-login {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 12px;
    background: var(--caffe);
    color: var(--carta);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .15s ease;
}
.btn-login:hover { background: #2c231e; color: var(--carta); }

.site-main {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 22px 48px;
}
/* La landing gestisce da sé larghezza e spaziatura (bande a tutta larghezza). */
.site-main-wide { max-width: none; padding: 0; }

.site-footer {
    text-align: center;
    padding: 26px 22px 34px;
    color: var(--talpa);
    font-size: 14px;
}
.site-footer .payoff {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--talpa);
    margin: 0 0 6px;
}
.site-footer a { color: var(--talpa); }

/* ---------------------------------------------------------------- hero */
.hero { text-align: center; max-width: 560px; margin: 7vh auto 0; }
.hero h1 { font-size: 40px; }
.hero-sub { font-size: 18px; color: var(--talpa); margin: 0 0 28px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 26px; font-size: 14px; color: var(--talpa); }

/* --------------------------------------------------------------- bottoni
   A pillola, hit target >= 44px. Terracotta = UNA azione primaria per pagina. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 26px;
    border-radius: 14px;              /* rounded-rect moderno, uniforme in tutte le aree */
    border: none;
    font-family: var(--font-text);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--terracotta-aa); color: var(--bianco); }
.btn-primary:hover { background: var(--terracotta-dark); color: var(--bianco); }
.btn-secondary {
    background: var(--bianco);
    color: var(--caffe);
    box-shadow: inset 0 0 0 1.5px var(--fuga);
}
.btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--terracotta); color: var(--terracotta-dark); }
/* Varianti del design system (nate sulla landing, ora globali e riutilizzabili). */
.btn-ghost { background: transparent; color: var(--caffe); box-shadow: inset 0 0 0 1.5px rgba(58, 46, 40, .18); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--terracotta); color: var(--terracotta-dark); }
.btn-dark { background: var(--caffe); color: var(--carta); }
.btn-dark:hover { background: #2c231e; color: var(--carta); }
.btn-amber { background: var(--ambra); color: var(--caffe); }
.btn-amber:hover { background: #d8922f; color: var(--caffe); }
.btn-cream { background: var(--carta); color: var(--caffe); }
.btn-cream:hover { background: var(--bianco); color: var(--caffe); }
.btn-block { width: 100%; }

/* Accesso con Google. Bianco con bordo, logo a colori: è la forma richiesta
   dalle linee guida del marchio Google, che su questo non lasciano scelta. */
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--bianco);
    color: var(--caffe);
    box-shadow: inset 0 0 0 1.5px var(--fuga);
    text-decoration: none;
}
.btn-google:hover { box-shadow: inset 0 0 0 1.5px var(--talpa); color: var(--caffe); }
.btn-google-logo { width: 20px; height: 20px; flex: none; }

/* Pulsanti con icona: nell'app si preme, non si "clicca un link". */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}
.btn-icon svg { width: 20px; height: 20px; flex: none; }
.profile-links { display: grid; gap: 10px; margin: 20px 0 8px; }

/* --- Scopri: le tre porte d'ingresso ai progetti ------------------------- */
.discover-top { display: grid; gap: 12px; margin-bottom: 22px; }

.discover-portal {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    min-height: 76px;              /* bersaglio ampio: si preme col pollice */
    border-radius: 18px;
    background: var(--bianco);
    box-shadow: inset 0 0 0 1.5px var(--fuga);
    color: var(--caffe);
    text-decoration: none;
}
.discover-portal:hover { box-shadow: inset 0 0 0 1.5px var(--terracotta); color: var(--caffe); }
.discover-icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--carta);
    color: var(--terracotta-dark);
}
.discover-icon svg { width: 24px; height: 24px; }
.discover-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.discover-body strong { font-size: 1.0625rem; }
.discover-body span { color: var(--talpa); font-size: .875rem; }
.discover-go { margin-left: auto; flex: none; font-size: 1.25rem; color: var(--talpa); }

/* La tessera dell'IA è la ragione per cui l'app esiste: deve saltare all'occhio
   senza urlare. Fondo pieno invece di un bordo in più fra tanti — e i due
   terracotta scuri, non il chiaro, perché sopra ci va testo bianco. */
.discover-portal-ai {
    background: linear-gradient(135deg, var(--terracotta-aa) 0%, var(--terracotta-dark) 100%);
    box-shadow: none;
    color: var(--bianco);
}
.discover-portal-ai:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .16); color: var(--bianco); }
.discover-portal-ai .discover-icon { background: rgba(255, 255, 255, .22); color: var(--bianco); }
.discover-portal-ai .discover-body span,
.discover-portal-ai .discover-go { color: rgba(255, 255, 255, .88); }

/* --- Attesa del matching ------------------------------------------------- */
/* Le quattro tessere si accendono a turno: è il marchio che spiega da solo
   cosa sta succedendo — ogni tessera cerca il suo posto. */
.suspense {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(250, 247, 242, .95);
}
.suspense-box { text-align: center; max-width: 22rem; }
.suspense-tiles {
    display: grid;
    grid-template-columns: repeat(2, 38px);
    gap: 9px;
    justify-content: center;
    margin-bottom: 22px;
}
.suspense-tiles span {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    opacity: .28;
    animation: suspense-tile 1.6s ease-in-out infinite;
}
.suspense-tiles span:nth-child(1) { background: var(--terracotta); animation-delay: 0s; }
.suspense-tiles span:nth-child(2) { background: var(--ambra);      animation-delay: .18s; }
.suspense-tiles span:nth-child(3) { background: var(--cobalto);    animation-delay: .54s; }
.suspense-tiles span:nth-child(4) { background: var(--salvia);     animation-delay: .36s; }
@keyframes suspense-tile {
    0%, 100% { opacity: .28; transform: scale(.86); }
    40%      { opacity: 1;   transform: scale(1); }
}
.suspense-step {
    color: var(--caffe);
    font-size: 1.0625rem;
    min-height: 2.6em;             /* il testo cambia: niente salti di layout */
}

/* Chi ha chiesto meno movimento riceve lo stesso messaggio, fermo. */
@media (prefers-reduced-motion: reduce) {
    .suspense-tiles span { animation: none; opacity: 1; transform: none; }
}

/* --- Celebrazione traguardi ---------------------------------------------- */
body.celebrate-open { overflow: hidden; } /* la festa ha tutta la scena */

.celebrate {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(58, 46, 40, .55);   /* velo caffè: il badge risalta */
    backdrop-filter: blur(3px);
}
.celebrate-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.celebrate-box {
    position: relative;
    width: 100%;
    max-width: 22rem;
    background: var(--carta);
    border-radius: 24px;
    padding: 32px 24px 20px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
    animation: celebrate-rise .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes celebrate-rise {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.celebrate-art {
    width: 132px;
    height: 132px;
    margin: 0 auto 18px;
    animation: celebrate-pop .55s cubic-bezier(.2, .9, .3, 1.4) .1s both;
}
.celebrate-art svg { width: 100%; height: 100%; }
@keyframes celebrate-pop {
    0%   { opacity: 0; transform: scale(.3) rotate(-12deg); }
    70%  { transform: scale(1.08) rotate(3deg); }
    100% { opacity: 1; transform: none; }
}

.celebrate-kicker {
    color: var(--terracotta-dark);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .8125rem;
}
.celebrate-name { font-size: 1.5rem; margin: 4px 0 6px; }
.celebrate-desc { color: var(--talpa); font-size: .9375rem; }
.celebrate-actions { display: grid; gap: 10px; margin-top: 22px; }

/* Coriandoli: quadratini che cadono ruotando, nei colori del mosaico. */
.confetti {
    position: absolute;
    top: -12px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    opacity: .9;
    animation-name: confetti-fall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
@keyframes confetti-fall {
    0%   { transform: translateY(-10px) rotate(0);      opacity: 1; }
    100% { transform: translateY(105vh) rotate(540deg); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
    .celebrate-box { animation: none; }
    .celebrate-art { animation: none; }
    .confetti { display: none; }
}

/* Separatore fra i due modi di accedere. */
.auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    color: var(--talpa);
    font-size: .875rem;
}
.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fuga);
}
.btn-text {
    background: none;
    border: none;
    padding: 10px 6px;
    min-height: 44px;
    font: inherit;
    font-weight: 600;
    color: var(--terracotta-dark);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn:focus-visible, .btn-text:focus-visible, a:focus-visible {
    outline: 2.5px solid var(--cobalto);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------- card */
.card {
    background: var(--bianco);
    border-radius: var(--radius-app);
    box-shadow: var(--shadow-card);
    padding: 28px;
}
.card-auth { max-width: 440px; margin: 4vh auto 0; }
.card-intro { color: var(--talpa); margin-top: 0; }
.card-links { font-size: 15px; margin-bottom: 0; }

/* ----------------------------------------------------------------- form */
.field { margin: 0 0 18px; }
.field label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--talpa);
    margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.field input[type="time"] {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    font: inherit;
    color: var(--caffe);
    background: var(--bianco);
    border: 1.5px solid var(--fuga);
    border-radius: var(--radius-field);
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* L'orario "dalle–alle": due campi che respirano come gli altri, allineati. */
.field .time-range input[type="time"] { text-align: center; }
.field input:focus {
    outline: none;
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(226, 114, 91, .18);
}
.field-hint { font-size: 13.5px; color: var(--talpa); margin: 6px 0 0; }
.field-error { font-size: 14px; color: var(--corallo-dark); font-weight: 600; margin: 6px 0 0; }
.field.has-error input { border-color: var(--corallo-dark); }

.field-check label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--caffe);
    cursor: pointer;
}
.field-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    flex: none;
    accent-color: var(--terracotta);
}

/* ---------------------------------------------------------------- flash */
.flash {
    max-width: 440px;
    margin: 0 auto 16px;
    padding: 13px 18px;
    border-radius: var(--radius-field);
    font-weight: 600;
    font-size: 15px;
}
.flash-success { background: rgba(61, 139, 125, .13); color: var(--salvia-dark); }
.flash-error { background: rgba(201, 79, 79, .12); color: var(--corallo-dark); }
.card .flash { margin-left: 0; margin-right: 0; }

/* ----------------------------------------------------------- pagine 4xx */
.error-card { text-align: center; }
.error-code {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--terracotta-dark);
    letter-spacing: .1em;
    margin: 0 0 4px;
}

/* --------------------------------------------------------------- policy */
.policy { max-width: 680px; margin: 0 auto; }
.policy-version { font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--talpa); }
.policy h2 { font-size: 20px; margin-top: 1.4em; }

/* ============================================================== PWA app */
.page-app { padding-bottom: 86px; /* spazio per la tab bar */ }
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}
.app-shell { display: flex; flex: 1; width: 100%; }
.app-side { display: none; }   /* i volontari navigano dalla tab bar: nessuna sidebar */
.app-main { flex: 1; padding: 6px 20px 24px; max-width: 560px; width: 100%; margin: 0 auto; }
/* Ritmo verticale coerente: 16px fra i blocchi impilati (card, form, sezioni).
   Prima alcuni componenti ce l'avevano (dash/ore/stats: margin-bottom 16) e le
   card semplici no (si toccavano). I margini fra fratelli si fondono, quindi non
   raddoppia. .app-main è un flex item (BFC): il collasso resta interno. */
.app-main > * + * { margin-top: 16px; }

/* Avviso desktop "installa sul telefono": nascosto su mobile (base), mostrato
   ≥620px dal media qui sotto. La base sta PRIMA del media, così vince l'override. */
.app-install-nudge { display: none; align-items: center; gap: 12px; justify-content: center;
    background: var(--caffe); color: var(--su-scuro); padding: 10px 16px; font-size: 14px; }
.app-install-nudge svg { width: 20px; height: 20px; flex: none; }
.app-install-nudge b { color: #fff; font-family: var(--font-display); }

/* Modale desktop "apri sul telefono" col QR (mostrata da app.js). */
.qr-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qr-modal-backdrop { position: absolute; inset: 0; background: rgba(58, 46, 40, .55); }
.qr-modal-card { position: relative; background: var(--bianco); border-radius: 22px; padding: 30px 28px; max-width: 360px; width: 100%; text-align: center; box-shadow: var(--shadow-lift); }
.qr-modal-code { display: block; width: 210px; height: 210px; margin: 4px auto 18px; }
.qr-modal-code .qr { display: block; width: 100%; height: 100%; }
.qr-modal-card h2 { margin: 0 0 6px; }
.qr-modal-card p { color: var(--talpa); margin: 0 0 20px; }
.qr-modal-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--talpa); cursor: pointer; border-radius: 10px; }
.qr-modal-x svg { width: 22px; height: 22px; }
.qr-modal-x:hover { background: var(--carta); color: var(--caffe); }

/* Volontari = esperienza mobile/PWA. Anche su desktop l'app resta una colonna in
   stile telefono, centrata: un solo design, coerente ovunque. La navigazione è
   sempre la tab bar in basso (la sua versione desktop, centrata, è definita dopo
   la regola base .tabbar). Il gestionale è un'altra shell e resta desktop-first. */
@media (min-width: 620px) {
    .app-main { max-width: 480px; }
    .app-header { max-width: 480px; margin: 0 auto; width: 100%; }
    .app-install-nudge { display: flex; }
}
/* I componenti "dashboard" nella PWA restano SEMPRE impilati (mobile): le loro
   media query guardano il viewport, non la colonna, quindi qui le forziamo. */
.page-app .stats-kpis { grid-template-columns: 1fr 1fr; }
.page-app .dash-grid,
.page-app .stats-grid2 { grid-template-columns: 1fr; }
.page-app .field-grid { grid-template-columns: 1fr; }

.app-hero { padding: 10px 2px 18px; }
.app-hero h1 { font-size: 28px; margin-bottom: .1em; }
.app-tagline { color: var(--talpa); margin: 0; }


/* ----------------------------------------- dashboard volontario (tessere) */
/* Hero scuro "Ore donate": numero eroe + andamento su fondo caffè. */
.tile-hours { text-align: left; padding: 20px; margin-bottom: 14px; border: 0; color: var(--su-scuro); background: radial-gradient(120% 100% at 15% 0%, var(--scuro), var(--caffe)); }
.tile-mosaic { width: 30px; height: 30px; margin: 0 0 6px; }
.tile-hours-label { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--su-scuro-muted); margin: 0; }
.tile-hours-value { font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1; margin: 4px 0; color: var(--su-scuro); }
.tile-hours-sub { color: var(--su-scuro-muted); font-size: 14.5px; margin: 0; }
.tile-pending { display: block; color: var(--ambra); font-weight: 600; margin-top: 2px; }
.tile-hours .btn { display: flex; width: 100%; margin-top: 16px; }
/* Grafico dentro l'hero scuro: barre chiare, mese in corso in terracotta.
   Scoped a .tile-hours: il grafico del profilo (card bianca) resta invariato. */
.tile-hours .chart-hours { margin-top: 8px; }
.tile-hours .chart-axis { stroke: rgba(243, 236, 225, .16); }
.tile-hours .chart-bar { fill: rgba(243, 236, 225, .28); }
.tile-hours .chart-bar.is-current { fill: var(--terracotta); }
.tile-hours .chart-bar-empty { fill: rgba(243, 236, 225, .18); }
.tile-hours .chart-value { fill: var(--su-scuro-muted); }
.tile-hours .chart-label { fill: var(--su-scuro-muted); }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tile { padding: 18px 20px; text-decoration: none; color: var(--caffe); display: block; }
.tile-wide { grid-column: 1 / -1; }
.tile-icon svg { width: 26px; height: 26px; color: var(--terracotta); }
.tile-value { font-family: var(--font-display); font-weight: 700; font-size: 30px; margin: 6px 0 0; }
.tile-label { font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--talpa); margin: 0; }
.tile-accent { box-shadow: inset 0 0 0 1.5px var(--terracotta), var(--shadow-card); }
.tile-empty { color: var(--talpa); margin: 8px 0; }

.assoc-mini { list-style: none; margin: 10px 0 0; padding: 0; }
.assoc-mini li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--fuga); }
.assoc-mini li:last-child { border-bottom: none; }
.assoc-mini-name { font-weight: 600; font-size: 15px; }
.assoc-mini-hours { color: var(--salvia-dark); font-weight: 600; font-size: 14px; }
.assoc-mini-tag { font-size: 12.5px; font-weight: 600; color: var(--ambra-dark); }
.assoc-mini-pending .assoc-mini-name { color: var(--talpa); font-weight: 400; }

.tile-discover { margin-bottom: 8px; }
.tile-discover-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.tile-discover-head h2 { font-size: 18px; margin: 0; }
.discover-cards { display: flex; flex-direction: column; gap: 10px; }
.discover-card { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; padding: 16px 18px; text-decoration: none; color: var(--caffe); }
.discover-card strong { font-size: 16px; }
.discover-meta { color: var(--talpa); font-size: 14px; }

/* ------------------------------------------------------ badge (tessere) */
.badge-count { font-family: var(--font-display); font-weight: 700; color: var(--talpa); }
.badge-strip { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.badge-item { width: 72px; text-align: center; }
.badge-tessera {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 6px;
    background: var(--medal);
    border-radius: 6px 16px 16px 16px;   /* eco della tessera del logo */
    box-shadow: 0 2px 6px rgba(58, 46, 40, .18);
}
.badge-item.is-locked .badge-tessera { background: var(--fuga); box-shadow: none; }
.badge-item.is-locked .badge-name { color: var(--talpa); }
.badge-name { font-size: 12px; font-weight: 600; line-height: 1.2; }
.badge-item.is-earned .badge-name { color: var(--caffe); }

.empty-state { text-align: center; padding: 36px 26px; }
.empty-tiles { width: 56px; height: 56px; margin-bottom: 14px; }
.empty-state h2 { font-size: 20px; }
.empty-state p { color: var(--talpa); margin-bottom: 0; }
/* Disco d'icona per gli stati vuoti "attenzione gentile" (es. profilo da completare). */
.empty-ic {
    display: inline-grid;
    place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(232, 161, 61, .16);
    color: var(--ambra-dark);
}
.empty-ic svg { width: 28px; height: 28px; }
.empty-state .btn { margin-top: 16px; }

/* Tab bar: 5 voci, icone a tratto, Terracotta solo sull'attiva */
.tabbar {
    position: fixed;
    inset: auto 0 0 0;
    display: flex;
    background: var(--bianco);
    border-top: 1.5px solid var(--fuga);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    z-index: 10;
}
/* Desktop: la tab bar accompagna la colonna telefono, centrata (non a tutta
   larghezza). Dopo la regola base .tabbar per vincere nell'ordine del sorgente. */
@media (min-width: 620px) {
    .tabbar {
        inset: auto auto 0 50%;
        transform: translateX(-50%);
        width: 480px;
        max-width: calc(100vw - 20px);
        border: 1.5px solid var(--fuga);
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
    }
}
.tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 52px;
    justify-content: center;
    text-decoration: none;
    color: var(--talpa);
    font-size: 11px;
    font-weight: 600;
}
.tab svg { width: 25px; height: 25px; }
.tab.is-active { color: var(--terracotta-dark); }
.tab.is-disabled { opacity: .38; cursor: default; }

/* ========================================================== gestionale */
.page-admin .card { border-radius: var(--radius-admin); }
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--bianco);
    border-bottom: 1.5px solid var(--fuga);
}
.admin-topbar-left { display: flex; align-items: center; gap: 6px; }
.admin-shell { display: flex; flex: 1; min-height: 0; }
.admin-sidebar {
    width: 224px;
    flex: none;
    padding: 18px 12px;
    border-right: 1.5px solid var(--fuga);
    background: var(--bianco);
}
.side-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: var(--radius-admin);
    text-decoration: none;
    color: var(--caffe);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
}
.side-link svg { width: 21px; height: 21px; color: var(--talpa); }
.side-link.is-active { background: rgba(226, 114, 91, .1); color: var(--terracotta-dark); }
.side-link.is-active svg { color: var(--terracotta); }
.side-link.is-disabled { opacity: .38; cursor: default; }
.admin-main { flex: 1; padding: 26px 30px; }
.admin-title { font-size: 26px; }
.admin-intro { max-width: 760px; margin: -2px 0 20px; color: var(--talpa); font-size: 15px; line-height: 1.45; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 18px; }
.kpi { padding: 20px 22px; }
.kpi-label { font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--talpa); margin: 0 0 4px; }
.kpi-value { font-family: var(--font-display); font-weight: 700; font-size: 34px; margin: 0; }

/* Mobile gestionale: la sidebar diventa un pannello a scomparsa (drawer),
   aperto dall'hamburger nella topbar. Su desktop resta la barra laterale. */
.drawer-toggle { display: none; }
.drawer-overlay { display: none; }
@media (max-width: 860px) {
    .drawer-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; flex: none; margin-right: 4px;
        border: none; background: transparent; color: var(--caffe);
        border-radius: var(--radius-admin); cursor: pointer;
    }
    .drawer-toggle svg { width: 24px; height: 24px; }
    .admin-shell { flex-direction: column; }
    .admin-sidebar {
        position: fixed; top: 0; left: 0; z-index: 60;
        width: 280px; max-width: 84vw; height: 100%; overflow-y: auto;
        border-right: 1.5px solid var(--fuga);
        transform: translateX(-100%);
        transition: transform .22s ease;
    }
    .admin-sidebar.is-open { transform: none; box-shadow: var(--shadow-lift); }
    .drawer-overlay {
        display: block; position: fixed; inset: 0; z-index: 55;
        background: rgba(58, 46, 40, .45);
        opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    .drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
    body.drawer-open { overflow: hidden; }
    .hero h1 { font-size: 32px; }
}

/* ------------------------------------------------- form del gestionale */
.admin-form { max-width: 760px; }
.form-section { margin-bottom: 18px; }
.form-section h2 { font-size: 19px; }

/* Elenco/archivio progetti a schede: titolo in evidenza, meta + referente,
   azioni-pulsante nello stile della pagina operatori. */
.proj-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 14px; }
.proj-search { flex: 1 1 240px; display: flex; align-items: center; gap: 9px; background: var(--bianco); border: 1.5px solid var(--fuga); border-radius: 999px; padding: 0 16px; min-height: 44px; }
.proj-search svg { width: 18px; height: 18px; flex: none; color: var(--talpa); }
.proj-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--caffe); padding: 10px 0; }
.proj-archive-link { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.proj-archive-link svg { width: 16px; height: 16px; }
.proj-no-results { color: var(--talpa); text-align: center; padding: 20px; }

.proj-list { display: flex; flex-direction: column; gap: 12px; }
.proj-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.proj-item.is-archived { opacity: .65; }
.proj-item-main { flex: 1 1 260px; min-width: 0; }
.proj-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.proj-item-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0; line-height: 1.2; }
.proj-item-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; color: var(--talpa); font-size: 14px; }
.pim { display: inline-flex; align-items: center; gap: 5px; }
.pim svg { width: 15px; height: 15px; flex: none; color: var(--talpa); }
.proj-item-langs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.proj-item-ref { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--caffe); }
.proj-item-ref svg { width: 16px; height: 16px; flex: none; color: var(--talpa); }
.proj-item .approval-actions { flex: none; align-items: flex-start; }
.proj-item .approval-actions .inline-form { margin: 0; }
@media (max-width: 560px) { .proj-item .approval-actions { flex: 1 1 100%; } }

/* ------------------------------------------------ statistiche associazione */
.stats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.stats-sub { color: var(--talpa); margin: 4px 0 0; font-size: 14px; }
.stats-seg { display: flex; background: rgba(58, 46, 40, .06); border-radius: 999px; padding: 3px; gap: 2px; }
.stats-seg a { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--talpa); padding: 8px 15px; border-radius: 999px; text-decoration: none; }
.stats-seg a.is-active { background: var(--bianco); color: var(--caffe); box-shadow: 0 1px 3px rgba(58, 46, 40, .14); }

.stats-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stats-kpi { display: flex; flex-direction: column; background: var(--bianco); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); padding: 16px; text-decoration: none; color: var(--caffe); }
.stats-kpi .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--bianco); margin-bottom: 10px; }
.stats-kpi .ic svg { width: 21px; height: 21px; }
.stats-kpi .v { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.stats-kpi .v small { font-size: 16px; color: var(--talpa); font-weight: 600; }
.stats-kpi .l { color: var(--talpa); font-size: 13px; font-weight: 600; margin-top: 3px; }
.stats-kpi .d { font-size: 12px; font-weight: 700; margin-top: 6px; }
.stats-kpi .d.up { color: var(--salvia-dark); }
.stats-kpi .d.down { color: var(--corallo-dark); }
.stats-kpi .d.warn { color: var(--ambra-dark); }

.stats-hero { background: radial-gradient(120% 130% at 12% 0%, var(--scuro), var(--caffe)); color: var(--su-scuro); border-radius: 20px; padding: 20px; }
/* Riga hero + torta affiancati: l'hero (scuro) e la card si allineano in alto,
   ognuno con la propria altezza naturale. */
.stats-grid2-hero { align-items: start; }
.stats-hero .lbl { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--su-scuro-muted); margin: 0; }
.stats-hero .big { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; margin: 4px 0; }
.stats-hero .big small { font-size: 18px; color: var(--su-scuro-muted); font-weight: 600; }
.stats-hero .mini { display: flex; gap: 22px; flex-wrap: wrap; margin: 0; color: var(--su-scuro-muted); font-size: 13.5px; }
.stats-hero .mini b { color: var(--su-scuro); font-family: var(--font-display); font-weight: 700; }
.stats-chart { margin-top: 14px; }
.stats-hero .chart-bar { fill: url(#g-hero); }
.stats-hero .chart-bar.is-current { fill: url(#g-hero-cur); }
.stats-hero .chart-axis { stroke: rgba(243, 236, 225, .16); }
.stats-hero .chart-label { fill: var(--su-scuro-muted); }

.stats-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 720px) { .stats-kpis { grid-template-columns: 1fr 1fr; } .stats-grid2 { grid-template-columns: 1fr; } }
.stats-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.stats-card-head h2 { margin: 0; }
.stats-legend { display: flex; gap: 12px; font-size: 12px; color: var(--talpa); font-weight: 600; }
.stats-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.stats-legend .lg-bar i { width: 10px; height: 10px; border-radius: 3px; }
.stats-legend .lg-line i { width: 14px; height: 0; border-top: 2px solid var(--terracotta); }

.stats-combo, .stats-week { display: block; width: 100%; height: auto; overflow: visible; }
.stats-combo .combo-bar { fill: url(#g-cobalto); }
.stats-combo .combo-line { fill: none; stroke: var(--terracotta); stroke-width: 2; }
.stats-combo .combo-dot { fill: var(--terracotta); }
.stats-week .week-bar { fill: url(#g-salvia); }
.stats-week .week-bar.is-max { fill: url(#g-terracotta); }

/* Boost grafico: gradienti + hover + ingresso animato. Tutto CSP-safe
   (SVG <defs> + regole in questo foglio, nessuno style inline, niente JS). */
.stats-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#g-terracotta .a { stop-color: var(--terracotta); } #g-terracotta .b { stop-color: var(--terracotta-dark); }
#g-cobalto .a { stop-color: #5A82BD; }              #g-cobalto .b { stop-color: var(--cobalto); }
#g-salvia .a { stop-color: #4CA394; }               #g-salvia .b { stop-color: var(--salvia); }
#g-hero .a { stop-color: rgba(243, 236, 225, .42); } #g-hero .b { stop-color: rgba(243, 236, 225, .12); }
#g-hero-cur .a { stop-color: #F0906F; }             #g-hero-cur .b { stop-color: var(--terracotta); }

/* Hover: la barra si schiarisce (filter è consentito dalla CSP). */
.stats-chart .chart-bar, .stats-combo .combo-bar, .stats-week .week-bar { transition: filter .15s ease; }
.stats-chart .chart-bar:hover, .stats-combo .combo-bar:hover, .stats-week .week-bar:hover { filter: brightness(1.12); }
.stats-chart .chart-bar, .stats-combo .combo-bar, .stats-week .week-bar { cursor: default; }

/* Barre progetto: leggero riflesso sopra il colore-associazione (oc-*). */
.pstat-bar-fill { background-image: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .05)); }

@media (prefers-reduced-motion: no-preference) {
    .stats-chart .chart-bar, .stats-combo .combo-bar, .stats-week .week-bar {
        transform-box: fill-box; transform-origin: bottom;
        animation: statBarGrow .7s cubic-bezier(.2, .8, .2, 1) both;
    }
    .stats-chart .chart-bar:nth-of-type(1) { animation-delay: .00s; } .stats-chart .chart-bar:nth-of-type(2) { animation-delay: .04s; }
    .stats-chart .chart-bar:nth-of-type(3) { animation-delay: .08s; } .stats-chart .chart-bar:nth-of-type(4) { animation-delay: .12s; }
    .stats-chart .chart-bar:nth-of-type(5) { animation-delay: .16s; } .stats-chart .chart-bar:nth-of-type(6) { animation-delay: .20s; }
    .stats-chart .chart-bar:nth-of-type(7) { animation-delay: .24s; } .stats-chart .chart-bar:nth-of-type(8) { animation-delay: .28s; }
    .stats-chart .chart-bar:nth-of-type(9) { animation-delay: .32s; } .stats-chart .chart-bar:nth-of-type(10) { animation-delay: .36s; }
    .stats-chart .chart-bar:nth-of-type(11) { animation-delay: .40s; } .stats-chart .chart-bar:nth-of-type(12) { animation-delay: .44s; }
    .stats-combo .combo-bar:nth-of-type(1) { animation-delay: .05s; } .stats-combo .combo-bar:nth-of-type(2) { animation-delay: .12s; }
    .stats-combo .combo-bar:nth-of-type(3) { animation-delay: .19s; } .stats-combo .combo-bar:nth-of-type(4) { animation-delay: .26s; }
    .stats-combo .combo-bar:nth-of-type(5) { animation-delay: .33s; } .stats-combo .combo-bar:nth-of-type(6) { animation-delay: .40s; }
    .stats-week .week-bar:nth-of-type(1) { animation-delay: .04s; } .stats-week .week-bar:nth-of-type(2) { animation-delay: .10s; }
    .stats-week .week-bar:nth-of-type(3) { animation-delay: .16s; } .stats-week .week-bar:nth-of-type(4) { animation-delay: .22s; }
    .stats-week .week-bar:nth-of-type(5) { animation-delay: .28s; } .stats-week .week-bar:nth-of-type(6) { animation-delay: .34s; }
    .stats-week .week-bar:nth-of-type(7) { animation-delay: .40s; }
    /* Linea età: si "disegna" da sinistra; i punti compaiono dopo. */
    .stats-combo .combo-line { stroke-dasharray: 900; stroke-dashoffset: 900; animation: statLineDraw 1.1s ease .35s forwards; }
    .stats-combo .combo-dot { opacity: 0; animation: statDotIn .3s ease both; }
    .stats-combo .combo-dot:nth-of-type(1) { animation-delay: .5s; } .stats-combo .combo-dot:nth-of-type(2) { animation-delay: .6s; }
    .stats-combo .combo-dot:nth-of-type(3) { animation-delay: .7s; } .stats-combo .combo-dot:nth-of-type(4) { animation-delay: .8s; }
    .stats-combo .combo-dot:nth-of-type(5) { animation-delay: .9s; } .stats-combo .combo-dot:nth-of-type(6) { animation-delay: 1s; }
    /* Barre progetto: crescono da sinistra. */
    .pstat-bar-fill { transform-origin: left; animation: statFillGrow .8s cubic-bezier(.2, .8, .2, 1) both; }
    .pstat-bars .pstat-bar:nth-child(2) .pstat-bar-fill { animation-delay: .08s; }
    .pstat-bars .pstat-bar:nth-child(3) .pstat-bar-fill { animation-delay: .16s; }
    .pstat-bars .pstat-bar:nth-child(4) .pstat-bar-fill { animation-delay: .24s; }
    .pstat-bars .pstat-bar:nth-child(5) .pstat-bar-fill { animation-delay: .32s; }
    .pstat-bars .pstat-bar:nth-child(6) .pstat-bar-fill { animation-delay: .40s; }
}
@keyframes statBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes statLineDraw { to { stroke-dashoffset: 0; } }
@keyframes statDotIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes statFillGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Torta (donut) ore-per-progetto: archi SVG + legenda. */
.stats-pie { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.stats-pie .pie { width: 132px; height: 132px; flex: 0 0 auto; }
.pie-track { fill: none; stroke: var(--fuga); stroke-width: 14; }
.pie-seg { fill: none; stroke-width: 14; transition: filter .15s ease; }
.pie-seg:hover { filter: brightness(1.1); }
.pie-seg.s-terracotta { stroke: var(--terracotta); } .pie-seg.s-cobalto { stroke: var(--cobalto); }
.pie-seg.s-salvia { stroke: var(--salvia); }         .pie-seg.s-ambra { stroke: var(--ambra); }
.pie-seg.s-ametista { stroke: var(--ametista); }     .pie-seg.s-talpa { stroke: var(--talpa); }
.pie-total { fill: var(--caffe); font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.pie-total-lbl { fill: var(--talpa); font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.pie-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 7px; }
.pie-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pie-legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.pie-legend .sw.s-terracotta { background: var(--terracotta); } .pie-legend .sw.s-cobalto { background: var(--cobalto); }
.pie-legend .sw.s-salvia { background: var(--salvia); }         .pie-legend .sw.s-ambra { background: var(--ambra); }
.pie-legend .sw.s-ametista { background: var(--ametista); }     .pie-legend .sw.s-talpa { background: var(--talpa); }
.pie-legend .nm { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-legend .hh { color: var(--talpa); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .stats-pie .pie { animation: fadeIn .5s ease both; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Media per associazione (super-admin): tre numeri affiancati. */
.stats-avg { display: flex; flex-wrap: wrap; gap: 28px; }
.stats-avg > div { display: flex; flex-direction: column; }
.stats-avg .v { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--caffe); font-variant-numeric: tabular-nums; }
.stats-avg .l { color: var(--talpa); font-size: 13px; font-weight: 600; margin-top: 3px; }

/* ============================ Dashboard operativa ============================ */
.dash-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
    background: radial-gradient(120% 140% at 10% 0%, var(--scuro), var(--caffe)); color: var(--su-scuro);
    border-radius: 20px; padding: 22px 24px; margin-bottom: 16px; }
.dash-hero-hi .hi { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin: 0; }
.dash-hero-hi .hi b { color: #fff; }
.dash-hero-hi .sub { margin: 4px 0 0; color: var(--su-scuro-muted); font-size: 14px; }
.dash-hero-stat { text-align: right; }
.dash-hero-stat .v { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.dash-hero-stat .v small { font-size: 15px; color: var(--su-scuro-muted); font-weight: 600; }
.dash-hero-stat .l { color: var(--su-scuro-muted); font-size: 13px; }
.dash-hero-stat .l b { font-family: var(--font-display); font-weight: 700; margin-left: 4px; }
.dash-hero-stat .l b.up { color: #8FCF9F; }
.dash-hero-stat .l b.down { color: #E7A08F; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } .dash-hero-stat { text-align: left; } }

.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dash-card-head h2 { margin: 0; }
.dash-more { font-size: 13px; font-weight: 600; color: var(--terracotta-dark); white-space: nowrap; text-decoration: none; }
.dash-more:hover { text-decoration: underline; }

.dash-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-todo-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    background: var(--carta); border: 1px solid var(--fuga); text-decoration: none; color: var(--caffe);
    transition: transform .12s ease, box-shadow .12s ease; }
.dash-todo-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.dash-todo-row .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.dash-todo-row .ic svg { width: 19px; height: 19px; }
.dash-todo-row .tx { flex: 1; font-weight: 600; }
.dash-todo-row .ct { font-family: var(--font-display); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.dash-todo-row .go { color: var(--talpa); font-weight: 700; }

.dash-ok { display: flex; align-items: center; gap: 14px; padding: 8px 2px; }
.dash-ok-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--salvia); color: #fff; flex: 0 0 auto; }
.dash-ok-ic svg { width: 22px; height: 22px; }
.dash-ok-t { margin: 0; font-weight: 700; font-family: var(--font-display); }
.dash-ok-b { margin: 2px 0 0; color: var(--talpa); font-size: 13.5px; }

.dash-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dash-actions a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 16px 10px; border-radius: 14px; background: var(--carta); border: 1px solid var(--fuga);
    text-decoration: none; color: var(--caffe); font-weight: 600; font-size: 13.5px;
    transition: transform .12s ease, box-shadow .12s ease; }
.dash-actions a:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.dash-actions .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.dash-actions .ic svg { width: 21px; height: 21px; }

.dash-queue-lbl { color: var(--talpa); font-size: 13px; font-weight: 600; margin: 14px 0 8px; }
.dash-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dash-queue li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--fuga); }
.dash-queue li:first-child { border-top: 0; }
.dash-queue .av { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; flex: 0 0 auto; }
.dash-queue .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-queue .meta .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-queue .meta .sub { color: var(--talpa); font-size: 12.5px; }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-danger { background: var(--corallo-dark); color: var(--bianco); }
.btn-danger:hover { background: var(--corallo); color: var(--bianco); }

/* ============================ Roster volontari ============================ */
.vol-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.vol-head h2 { margin: 0; }
.vol-search { display: inline-flex; align-items: center; gap: 8px; background: var(--carta); border: 1px solid var(--fuga); border-radius: 12px; padding: 8px 12px; color: var(--talpa); }
.vol-search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.vol-search input { border: 0; background: transparent; outline: none; font: inherit; color: var(--caffe); min-width: 190px; }
.vol-roster { display: flex; flex-direction: column; }
.vol-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--fuga); flex-wrap: wrap; }
.vol-row:first-child { border-top: 0; }
.vol-row .av { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; flex: 0 0 auto; }
.vol-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.vol-nm { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vol-sub { color: var(--talpa); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vol-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.vol-status.is-active { background: rgba(61, 139, 125, .14); color: var(--salvia-dark); }
.vol-status.is-susp { background: rgba(232, 161, 61, .18); color: var(--ambra-dark); }
.vol-facts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.vol-since { color: var(--talpa); font-size: 12.5px; }
.vol-hours { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.vol-actions { display: flex; align-items: flex-start; gap: 8px; flex: 0 0 auto; }
.vol-remove > summary { list-style: none; cursor: pointer; }
.vol-remove > summary::-webkit-details-marker { display: none; }
.vol-remove-box { margin-top: 8px; padding: 12px; background: var(--carta); border: 1px solid var(--fuga); border-radius: 12px; max-width: 260px; }
.vol-remove-box p { margin: 0 0 8px; font-size: 13px; color: var(--talpa); }
.vol-noresult { color: var(--talpa); padding: 12px 2px; }
.vol-caps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ==================== Funzioni premium: interruttori + modale ==================== */
.feature-toggles { display: flex; flex-direction: column; }
.feature-toggle { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--fuga); margin: 0; flex-wrap: wrap; }
.feature-toggle:first-child { border-top: 0; }
.feature-toggle-info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.feature-name { font-weight: 700; }
.feature-desc { color: var(--talpa); font-size: 13px; }
.feature-state { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; background: rgba(58, 46, 40, .06); color: var(--talpa); }
.feature-state.is-on { background: rgba(61, 139, 125, .14); color: var(--salvia-dark); }

body.modal-open { overflow: hidden; }
.premium-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.premium-modal[hidden] { display: none; }
.premium-modal-backdrop { position: absolute; inset: 0; background: rgba(40, 30, 25, .5); }
.premium-modal-card { position: relative; background: var(--bianco); border-radius: 20px; box-shadow: var(--shadow-lift); padding: 26px; max-width: 420px; width: 100%; text-align: center; }
.premium-modal-ic { width: 52px; height: 52px; border-radius: 16px; background: rgba(226, 114, 91, .12); color: var(--terracotta); display: inline-grid; place-items: center; margin-bottom: 8px; }
.premium-modal-ic svg { width: 26px; height: 26px; }
.premium-modal-card h2 { margin: 0 0 6px; }
.premium-modal-card p { margin: 0 0 6px; color: var(--caffe); }
.premium-modal-note { color: var(--talpa); font-size: 13.5px; }
.premium-modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.premium-modal-actions form { margin: 0; }

/* Stile unificato "funzione bloccata": look attenuato + corona dorata, apre il
   modale al click. Usato ovunque (registri, statistiche, broadcast, traduzioni). */
.btn-locked { background: var(--carta); color: var(--talpa); box-shadow: inset 0 0 0 1.5px var(--fuga); text-decoration: none; cursor: pointer; }
.btn-locked:hover { color: var(--terracotta-dark); box-shadow: inset 0 0 0 1.5px var(--terracotta); background: var(--carta); }
.btn-locked svg { color: var(--ambra); }
.tr-btn.tr-locked { text-decoration: none; color: var(--talpa); cursor: pointer; }
.tr-btn.tr-locked:hover { color: var(--terracotta-dark); }
.tr-crown { width: 13px; height: 13px; color: var(--ambra); margin-left: 1px; flex: 0 0 auto; }
.regime-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0 14px; }
@media (max-width: 640px) { .vol-facts { align-items: flex-start; text-align: left; flex: 1 0 100%; } .vol-actions { width: 100%; } }

/* Attività su scheda progetto (volontari + ore) */
.proj-item-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.proj-item-stats .proj-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--talpa); }
.proj-item-stats .proj-stat svg { width: 16px; height: 16px; color: var(--terracotta); flex: 0 0 auto; }
.proj-item-stats .proj-stat b { color: var(--caffe); font-family: var(--font-display); font-weight: 700; }

/* ============================ Ore da confermare ============================ */
.hour-list { display: flex; flex-direction: column; }
.hour-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--fuga); flex-wrap: wrap; }
.hour-row:first-child { border-top: 0; }
.hour-row .av { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; flex: 0 0 auto; }
.hour-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hour-vol { font-weight: 700; }
.hour-vol small { color: var(--talpa); font-weight: 500; font-size: 13px; }
.hour-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--talpa); font-size: 13px; }
.hour-note { margin: 2px 0 0; color: var(--talpa); font-size: 13px; font-style: italic; }
.hour-amt { font-family: var(--font-display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.hour-amt small { font-size: 13px; color: var(--talpa); font-weight: 600; }
.hour-actions { display: flex; align-items: flex-start; gap: 8px; flex: 0 0 auto; }
@media (max-width: 680px) { .hour-amt { order: 3; } .hour-actions { width: 100%; } }

.stats-lead { display: flex; flex-direction: column; }
.stats-lead .row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--fuga); }
.stats-lead .row:first-child { border-top: 0; }
.stats-lead .rank { width: 22px; text-align: center; font-family: var(--font-display); font-weight: 700; color: var(--talpa); }
.stats-lead .av { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--bianco); font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.stats-lead .nm { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-lead .hh { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

.stats-empty { color: var(--talpa); font-size: 13.5px; }
.stats-note { color: var(--talpa); font-size: 13.5px; margin: 12px 0 0; }

.stats-ai { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 90% 0%, #5a4a2f, #3a2e28); color: var(--su-scuro); border-radius: 20px; padding: 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.stats-ai-badge { position: absolute; top: 14px; right: 16px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--ambra); color: var(--caffe); border-radius: 999px; padding: 4px 11px; }
.stats-ai-ic { width: 56px; height: 56px; flex: none; border-radius: 16px; background: linear-gradient(135deg, #f0916f, var(--terracotta-aa)); display: grid; place-items: center; color: #fff; }
.stats-ai-ic svg { width: 30px; height: 30px; }
.stats-ai-body { flex: 1; min-width: 220px; }
.stats-ai-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 0 0 4px; color: #fff; }
.stats-ai-body p { margin: 0; color: var(--su-scuro-muted); font-size: 14px; }
.stats-ai-form { flex: none; margin: 0; }
.stats-ai-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--terracotta-aa); color: #fff; border: 0; border-radius: 999px; padding: 13px 22px; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; cursor: pointer; white-space: nowrap; }
.stats-ai-cta:hover { background: var(--terracotta-dark); }
.stats-ai-cta svg { width: 19px; height: 19px; }
.stats-ai-locked { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--ambra); font-family: var(--font-display); font-weight: 700; font-size: 13.5px; }
.stats-ai-locked svg { width: 18px; height: 18px; }
.stats-ai-note { flex: 1 1 100%; color: #9a8b79; font-size: 11.5px; margin: 4px 0 0; }

/* Splash mentre l'IA genera il report. */
.ai-splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(58, 46, 40, .55); }
.ai-splash[hidden] { display: none; }
.ai-splash-card { background: var(--bianco); border-radius: 20px; padding: 32px 40px; text-align: center; box-shadow: var(--shadow-lift); max-width: 340px; margin: 16px; }
.ai-splash-spin { display: block; width: 44px; height: 44px; margin: 0 auto 16px; border: 4px solid var(--fuga); border-top-color: var(--terracotta-aa); border-radius: 50%; animation: aisp .8s linear infinite; }
@keyframes aisp { to { transform: rotate(360deg); } }
.ai-splash-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 4px; color: var(--caffe); }
.ai-splash-sub { color: var(--talpa); font-size: 14px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .ai-splash-spin { animation: none; } }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } }
.field textarea,
.field select,
.field input[type="date"],
.field input[type="number"],
.field input[type="file"] {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    font: inherit;
    color: var(--caffe);
    background: var(--bianco);
    border: 1.5px solid var(--fuga);
    border-radius: var(--radius-field);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field textarea:focus, .field select:focus,
.field input[type="date"]:focus, .field input[type="number"]:focus {
    outline: none;
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(226, 114, 91, .18);
}
.form-actions { display: flex; gap: 12px; justify-content: flex-end; max-width: 760px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.logo-preview {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: var(--radius-admin);
    border: 1.5px solid var(--fuga);
    background: var(--bianco);
    margin-bottom: 8px;
    padding: 6px;
}
/* Carta intestata (modello Word): link al modello base + al file caricato. */
.letterhead-base { margin: 0 0 10px; }
.letterhead-base a { color: var(--cobalto); font-weight: 600; }
.letterhead-current { margin: 0 0 8px; }
.letterhead-current a { color: var(--cobalto); font-weight: 600; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--talpa); margin-bottom: 10px; }
.check-inline input { accent-color: var(--terracotta-aa); }
.geo-ok { color: var(--salvia-dark); font-weight: 600; }

/* ---------------------------------------- badge ambiti (tessere colore) */
.badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    background: var(--cat-badge, var(--terracotta-aa));
    color: var(--cat-fg, var(--bianco));
}

/* Token colore per categoria: UNA riga per chiave imposta i 5 token letti da
   badge / pcat / accento / segnaposto logo. Aggiungere un colore = una riga qui
   + la chiave in CategoryRepository::COLORS.
   --cat = tinta piena (accento/logo) · --cat-badge = fondo badge ·
   --cat-fg = testo su tinta piena · --cat-soft = fondo tenue del pcat ·
   --cat-ink = testo sul fondo tenue. */
.badge-terracotta,.pcat-terracotta,.pc-cat-terracotta{--cat:var(--terracotta);--cat-badge:var(--terracotta-aa);--cat-fg:#fff;--cat-soft:rgba(226,114,91,.15);--cat-ink:var(--terracotta-dark);}
.badge-cobalto,.pcat-cobalto,.pc-cat-cobalto{--cat:var(--cobalto);--cat-badge:var(--cobalto);--cat-fg:#fff;--cat-soft:rgba(74,111,165,.15);--cat-ink:var(--cobalto);}
.badge-salvia,.pcat-salvia,.pc-cat-salvia{--cat:var(--salvia);--cat-badge:var(--salvia-dark);--cat-fg:#fff;--cat-soft:rgba(61,139,125,.15);--cat-ink:var(--salvia-dark);}
.badge-ametista,.pcat-ametista,.pc-cat-ametista{--cat:var(--ametista);--cat-badge:var(--ametista);--cat-fg:#fff;--cat-soft:rgba(139,94,143,.15);--cat-ink:var(--ametista);}
.badge-ambra,.pcat-ambra,.pc-cat-ambra{--cat:var(--ambra);--cat-badge:var(--ambra);--cat-fg:var(--caffe);--cat-soft:rgba(232,161,61,.22);--cat-ink:var(--ambra-dark);}
.badge-smeraldo,.pcat-smeraldo,.pc-cat-smeraldo{--cat:#1f9d78;--cat-badge:#1f9d78;--cat-fg:#fff;--cat-soft:rgba(31,157,120,.15);--cat-ink:#146149;}
.badge-pino,.pcat-pino,.pc-cat-pino{--cat:#2f7d5b;--cat-badge:#2f7d5b;--cat-fg:#fff;--cat-soft:rgba(47,125,91,.15);--cat-ink:#1e5a40;}
.badge-oliva,.pcat-oliva,.pc-cat-oliva{--cat:#6f8038;--cat-badge:#6f8038;--cat-fg:#fff;--cat-soft:rgba(111,128,56,.18);--cat-ink:#54622a;}
.badge-senape,.pcat-senape,.pc-cat-senape{--cat:#d0a02a;--cat-badge:#d0a02a;--cat-fg:var(--caffe);--cat-soft:rgba(208,160,42,.20);--cat-ink:#8a6a12;}
.badge-ruggine,.pcat-ruggine,.pc-cat-ruggine{--cat:#b5532a;--cat-badge:#b5532a;--cat-fg:#fff;--cat-soft:rgba(181,83,42,.16);--cat-ink:#8a3d1e;}
.badge-mattone,.pcat-mattone,.pc-cat-mattone{--cat:#a23e34;--cat-badge:#a23e34;--cat-fg:#fff;--cat-soft:rgba(162,62,52,.16);--cat-ink:#7a2c24;}
.badge-corallo,.pcat-corallo,.pc-cat-corallo{--cat:#e0765f;--cat-badge:#e0765f;--cat-fg:var(--caffe);--cat-soft:rgba(224,118,95,.18);--cat-ink:#b5492e;}
.badge-rosa,.pcat-rosa,.pc-cat-rosa{--cat:#d17a90;--cat-badge:#d17a90;--cat-fg:var(--caffe);--cat-soft:rgba(209,122,144,.18);--cat-ink:#a1495f;}
.badge-magenta,.pcat-magenta,.pc-cat-magenta{--cat:#b14a78;--cat-badge:#b14a78;--cat-fg:#fff;--cat-soft:rgba(177,74,120,.16);--cat-ink:#832f56;}
.badge-prugna,.pcat-prugna,.pc-cat-prugna{--cat:#7d466b;--cat-badge:#7d466b;--cat-fg:#fff;--cat-soft:rgba(125,70,107,.16);--cat-ink:#5a3049;}
.badge-viola,.pcat-viola,.pc-cat-viola{--cat:#6d5aa6;--cat-badge:#6d5aa6;--cat-fg:#fff;--cat-soft:rgba(109,90,166,.16);--cat-ink:#4a3a7d;}
.badge-indaco,.pcat-indaco,.pc-cat-indaco{--cat:#4a4b8c;--cat-badge:#4a4b8c;--cat-fg:#fff;--cat-soft:rgba(74,75,140,.16);--cat-ink:#343569;}
.badge-blunotte,.pcat-blunotte,.pc-cat-blunotte{--cat:#2f3e6b;--cat-badge:#2f3e6b;--cat-fg:#fff;--cat-soft:rgba(47,62,107,.16);--cat-ink:#202c50;}
.badge-acciaio,.pcat-acciaio,.pc-cat-acciaio{--cat:#4a6076;--cat-badge:#4a6076;--cat-fg:#fff;--cat-soft:rgba(74,96,118,.16);--cat-ink:#334656;}
.badge-ardesia,.pcat-ardesia,.pc-cat-ardesia{--cat:#566573;--cat-badge:#566573;--cat-fg:#fff;--cat-soft:rgba(86,101,115,.16);--cat-ink:#3c4753;}
.badge-cielo,.pcat-cielo,.pc-cat-cielo{--cat:#5b9bd5;--cat-badge:#5b9bd5;--cat-fg:var(--caffe);--cat-soft:rgba(91,155,213,.18);--cat-ink:#2f6798;}
.badge-acqua,.pcat-acqua,.pc-cat-acqua{--cat:#2fa1a1;--cat-badge:#2fa1a1;--cat-fg:#fff;--cat-soft:rgba(47,161,161,.16);--cat-ink:#1d6e6e;}
.badge-menta,.pcat-menta,.pc-cat-menta{--cat:#6fbf9f;--cat-badge:#6fbf9f;--cat-fg:var(--caffe);--cat-soft:rgba(111,191,159,.20);--cat-ink:#357a5d;}
.badge-lime,.pcat-lime,.pc-cat-lime{--cat:#9bbf3f;--cat-badge:#9bbf3f;--cat-fg:var(--caffe);--cat-soft:rgba(155,191,63,.20);--cat-ink:#61782a;}
.badge-muschio,.pcat-muschio,.pc-cat-muschio{--cat:#5c7a3f;--cat-badge:#5c7a3f;--cat-fg:#fff;--cat-soft:rgba(92,122,63,.16);--cat-ink:#41582b;}
.badge-cachi,.pcat-cachi,.pc-cat-cachi{--cat:#9c8b57;--cat-badge:#9c8b57;--cat-fg:#fff;--cat-soft:rgba(156,139,87,.18);--cat-ink:#6b5d34;}
.badge-sabbia,.pcat-sabbia,.pc-cat-sabbia{--cat:#c9a86a;--cat-badge:#c9a86a;--cat-fg:var(--caffe);--cat-soft:rgba(201,168,106,.20);--cat-ink:#8a6d3a;}
.badge-malva,.pcat-malva,.pc-cat-malva{--cat:#a9799b;--cat-badge:#a9799b;--cat-fg:#fff;--cat-soft:rgba(169,121,155,.18);--cat-ink:#754f6a;}
.badge-bordeaux,.pcat-bordeaux,.pc-cat-bordeaux{--cat:#8a2f43;--cat-badge:#8a2f43;--cat-fg:#fff;--cat-soft:rgba(138,47,67,.16);--cat-ink:#68222f;}
.badge-cioccolato,.pcat-cioccolato,.pc-cat-cioccolato{--cat:#6b4a35;--cat-badge:#6b4a35;--cat-fg:#fff;--cat-soft:rgba(107,74,53,.16);--cat-ink:#4c3425;}

/* --------------------------------------------------- tabelle gestionale */
.admin-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
/* Card impilate nel gestionale: prima si toccavano (0). 18px coerenti, anche
   dentro i form (es. impostazioni IA) grazie all'adiacenza. */
.page-admin .admin-main .card + .card { margin-top: 18px; }
.table-card { padding: 8px 0; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--talpa);
    padding: 10px 18px;
    border-bottom: 1.5px solid var(--fuga);
}
.data-table td { padding: 13px 18px; border-bottom: 1px solid var(--fuga); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.cell-title { font-weight: 600; }
.cell-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: flex-start; }
.cell-actions .btn-text { padding: 8px 6px; }
/* Conferma / Rifiuta ore: veri pulsanti, non più link. Verde = approva,
   contorno = rifiuta (cauto), rosso pieno = conferma il rifiuto. Compatti per
   la cella tabella. */
.cell-actions .btn { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.btn-approve { background: var(--salvia-dark); color: var(--bianco); }
.btn-approve:hover { background: var(--salvia); color: var(--bianco); }
.btn-approve svg { width: 18px; height: 18px; }
.btn-reject { background: var(--bianco); color: var(--caffe); box-shadow: inset 0 0 0 1.5px var(--fuga); list-style: none; }
.btn-reject:hover { box-shadow: inset 0 0 0 1.5px var(--corallo-dark); color: var(--corallo-dark); }
.reject-details { text-align: left; }
.reject-details > summary { cursor: pointer; }
.reject-details > summary::-webkit-details-marker { display: none; }
.reject-details > summary::marker { content: ""; }
.btn-reject-confirm { background: var(--corallo-dark); color: var(--bianco); }
.btn-reject-confirm:hover { filter: brightness(1.07); color: var(--bianco); }
.btn-text-muted { color: var(--talpa); }
.btn-text-danger { color: var(--terracotta-dark); }
.inline-form { display: inline; }
/* Archiviato lo dice già l'etichetta di stato in fondo alla riga: qui basta
   una tinta. Con opacity: .55 il testo scendeva a 3.31:1. */
.row-archived { background: var(--carta); }
.geo-dot { color: var(--salvia-dark); font-size: 11px; }
.status { font-weight: 600; font-size: 13.5px; }
.status-published { color: var(--salvia-dark); }
.status-draft { color: var(--talpa); }
.status-archived { color: var(--talpa); }

/* --------------------------------------------------- card approvazioni */
.approval-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.approval-info h2 { margin-bottom: 2px; font-size: 20px; }
.approval-project { margin: 0 0 4px; font-size: 14.5px; color: var(--caffe); }
.approval-project strong { color: var(--terracotta-dark); }
.approval-meta { color: var(--talpa); font-size: 14px; margin: 0; }
.approval-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Il motivo del rifiuto: compare sotto "Rifiuta" (dentro il <details>), in
   colonna, compatto. Un campo e il pulsante che conferma. */
.reject-form { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-top: 8px; width: 230px; max-width: 100%; }
.reject-form input {
    min-height: 44px;
    padding: 9px 13px;
    font: inherit;
    font-size: 14px;
    color: var(--caffe);
    background: var(--bianco);
    border: 1.5px solid var(--fuga);
    border-radius: var(--radius-field);
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.reject-form input:focus { outline: none; border-color: var(--corallo-dark); box-shadow: 0 0 0 3px rgba(178, 84, 63, .16); }
.pending-reason { font-weight: 600; color: var(--corallo-dark); }

/* ---------------------------------------------- traduzioni IA + toast */
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.btn-ai { font-size: 13px; padding: 4px 6px; min-height: 32px; white-space: nowrap; }
.btn-ai.is-busy { opacity: .5; cursor: wait; }
.btn-ai svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.btn-ai[data-improve] { color: var(--terracotta-dark); }
.admin-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 12px);
    background: var(--caffe);
    color: var(--carta);
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14.5px;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 100;
    max-width: min(90vw, 480px);
}
.admin-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.admin-toast.is-error { background: var(--corallo-dark); color: var(--bianco); }

/* ------------------------------------------------- geo-picker + mappa */
.geo-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.geo-actions .field-hint { margin: 0; flex: 1; min-width: 220px; }
.geo-suggestions {
    list-style: none;
    margin: 0 0 12px;
    padding: 6px;
    background: var(--bianco);
    border: 1.5px solid var(--fuga);
    border-radius: var(--radius-field);
}
.geo-suggestions button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    font-size: 14.5px;
    color: var(--caffe);
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.geo-suggestions button:hover { background: rgba(226, 114, 91, .1); color: var(--terracotta-dark); }
.geo-map {
    height: 260px;
    border-radius: var(--radius-admin);
    border: 1.5px solid var(--fuga);
    margin-bottom: 6px;
}

/* --------------------------------------------- blocchi traduzione */
.tr-block {
    border: 1.5px solid var(--fuga);
    border-radius: var(--radius-admin);
    padding: 14px 16px 16px;
    margin: 0 0 12px;
}
/* Editor traduzioni a tab: una linguetta per lingua, un blocco visibile alla
   volta. Senza JS i blocchi restano impilati (progressive enhancement). */
.tr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tr-tab {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid var(--fuga); background: var(--bianco); color: var(--talpa);
    border-radius: 999px; padding: 7px 14px; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.tr-tab.is-active { background: rgba(226, 114, 91, .12); border-color: transparent; color: var(--terracotta-dark); }
.tr-tab-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ambra); }  /* lingua ancora vuota */
#tr-blocks.tabs-on .tr-block { display: none; margin: 0; }
#tr-blocks.tabs-on .tr-block.is-active { display: block; }
#tr-blocks.tabs-on .tr-lang-name { display: none; }   /* la lingua è già nella tab */
.tr-block .tr-lang-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.tr-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Strumenti traduzione come pulsanti-icona (non più link di testo). */
.tr-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--fuga); background: var(--bianco); color: var(--caffe);
    border-radius: 999px; padding: 6px 12px; min-height: 34px; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.tr-btn svg { width: 15px; height: 15px; flex: none; }
.tr-btn:hover { border-color: var(--terracotta); color: var(--terracotta-dark); }
.tr-btn.is-busy { opacity: .5; cursor: wait; }
.tr-btn-improve { color: var(--terracotta-dark); border-color: rgba(226, 114, 91, .35); }
.tr-btn-remove { flex: none; width: 34px; padding: 6px; justify-content: center; color: var(--corallo-dark); border-color: rgba(201, 79, 79, .3); }
.tr-btn-remove:hover { color: var(--corallo-dark); border-color: var(--corallo-dark); background: rgba(201, 79, 79, .06); }
.tr-block .tr-title,
.tr-block .tr-desc {
    width: 100%;
    padding: 10px 13px;
    font: inherit;
    color: var(--caffe);
    background: var(--bianco);
    border: 1.5px solid var(--fuga);
    border-radius: var(--radius-field);
}
.tr-block .tr-title { min-height: 44px; margin-bottom: 8px; }
.tr-block .tr-desc { resize: vertical; min-height: 90px; }
.tr-block .tr-title:focus, .tr-block .tr-desc:focus {
    outline: none;
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(226, 114, 91, .18);
}
.tr-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tr-add select {
    flex: 1;
    max-width: 260px;
    min-height: 44px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14.5px;
    border: 1.5px solid var(--fuga);
    border-radius: var(--radius-field);
    background: var(--bianco);
}
.tr-add .btn { min-height: 44px; padding: 8px 20px; }

/* -------------------------------------------------- lingue richieste */
.lang-picker { margin-top: 8px; }
.lang-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lang-chips:empty { display: none; }
.lang-chip-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 5px 8px 5px 13px;
}
.lang-chip-edit [data-remove] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    color: var(--cobalto);
    padding: 2px 6px;
    border-radius: 999px;
}
.lang-chip-edit [data-remove]:hover { background: rgba(74, 111, 165, .18); }
#lang-search {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    font: inherit;
    color: var(--caffe);
    background: var(--bianco);
    border: 1.5px solid var(--fuga);
    border-radius: var(--radius-field);
}
#lang-search:focus {
    outline: none;
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(226, 114, 91, .18);
}
#lang-options { margin-top: 8px; }
.lang-chip {
    display: inline-block;
    padding: 2px 9px;
    margin: 1px 2px 1px 0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: rgba(74, 111, 165, .12);
    color: var(--cobalto);
    white-space: nowrap;
}
.cell-langs { max-width: 180px; }

/* -------------------------------------------- ricerca progetti (PWA) */
.search-head h1 { font-size: 26px; margin-bottom: 12px; }
.search-filters { margin-bottom: 14px; }
.search-input {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    font: inherit;
    border: 1.5px solid var(--fuga);
    border-radius: 999px;
    background: var(--bianco);
    margin-bottom: 8px;
}
.search-input:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(226,114,91,.18); }
.search-selects { display: flex; gap: 8px; flex-wrap: wrap; }
.search-selects select {
    flex: 1;
    min-width: 120px;
    min-height: 44px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14.5px;
    border: 1.5px solid var(--fuga);
    border-radius: var(--radius-field);
    background: var(--bianco);
    color: var(--caffe);
}
.search-selects .btn { min-height: 44px; padding: 8px 20px; }
.search-map {
    height: 220px;
    border-radius: var(--radius-app);
    border: 1.5px solid var(--fuga);
    margin-bottom: 14px;
    z-index: 0;
}
.project-cards { display: flex; flex-direction: column; gap: 12px; }
.project-card { display: block; text-decoration: none; color: var(--caffe); padding: 18px 20px; }
.project-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.project-card-head h2 { font-size: 18px; margin: 0; }
.project-card-meta { color: var(--talpa); font-size: 14.5px; margin: 4px 0 0; }
.project-card-langs { margin: 8px 0 0; }
.tile-match { display: block; margin-bottom: 14px; text-decoration: none; }
.tile-match-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 6px 0 2px; }
.tile-match-sub { color: var(--talpa); font-size: 14.5px; margin: 0; }
.match-reason { margin: 8px 0 0; font-size: 14.5px; color: var(--terracotta-dark); font-weight: 600; }
.match-disclaimer { margin-top: 12px; text-align: center; }
.project-detail h1 { font-size: 24px; margin-bottom: 2px; }
/* Switch fra le versioni linguistiche del contenuto (scheda progetto). */
.pl-langs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pl-langs-lbl { font-size: 12.5px; font-weight: 600; color: var(--talpa); }
.pl-lang { border: 1px solid var(--fuga); background: var(--bianco); color: var(--caffe); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pl-lang.is-active { background: rgba(226, 114, 91, .12); border-color: transparent; color: var(--terracotta-dark); }
.pl-desc { margin: 0; white-space: pre-line; }   /* newline dal testo, senza <br> (JS usa textContent) */
.project-section { margin-top: 14px; padding: 20px; }
.project-section h2 { font-size: 17px; }
.member-state { font-weight: 600; color: var(--talpa); }
.member-active { color: var(--salvia-dark); }

/* --------------------------------------------------- ore (PWA + admin) */
.hours-list h2 { font-size: 18px; margin: 18px 0 10px; }
.hours-list { margin-top: 16px; }
.hour-row { padding: 14px 18px; margin-bottom: 10px; }
.hour-row-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hour-row-what { flex: 1; font-size: 14.5px; color: var(--talpa); min-width: 140px; }
.hour-row-date { font-size: 13.5px; color: var(--talpa); }
.hour-row-side { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.hour-row-reason { font-size: 14px; color: var(--corallo-dark); margin: 6px 0 0; }
.status-hour-pending { color: var(--ambra-dark); }
.status-hour-confirmed { color: var(--salvia-dark); }
.status-hour-rejected { color: var(--corallo-dark); }
.hours-total-row { display: flex; align-items: baseline; gap: 10px; margin: 6px 0; }
.hours-total-row span { flex: 1; }
.hours-total-row em { font-style: normal; font-size: 13.5px; color: var(--ambra-dark); font-weight: 600; }
.admin-subtitle { font-size: 19px; margin: 20px 0 10px; }
.cell-sub { display: block; font-weight: 400; font-size: 13px; color: var(--talpa); }
.cell-note { max-width: 220px; font-size: 14px; color: var(--talpa); }

/* ------------------------------------------------------ messaggistica */
.nav-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--terracotta-aa);
    color: var(--bianco);
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
.tab-icon-wrap { position: relative; display: inline-flex; }
.nav-badge-inline { position: static; margin-left: auto; }
.side-link { position: relative; }

/* --------------------------------------------------- messaggi (redesign)
   Lista conversazioni con avatar colorato + chat a bolle. Partial condivisi. */
.conv-list { display: flex; flex-direction: column; gap: 8px; }
.conv {
    display: flex; align-items: center; gap: 13px; position: relative;
    background: var(--bianco); border: 1px solid var(--fuga); border-radius: 16px;
    box-shadow: var(--shadow-card); padding: 13px 14px;
    text-decoration: none; color: var(--caffe);
    transition: transform .12s ease;
}
.conv:active { transform: scale(.995); }
.conv-av {
    width: 46px; height: 46px; flex: none; border-radius: 14px;
    display: grid; place-items: center; color: var(--bianco);
    font-family: var(--font-display); font-weight: 700; font-size: 19px;
}
.conv-main { flex: 1; min-width: 0; }
.conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.conv-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { flex: none; font-size: 12px; color: var(--talpa); }
.conv-prev { color: var(--talpa); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.conv-prev .you { font-weight: 600; }
.conv.unread .conv-prev { color: var(--caffe); font-weight: 600; }
.conv-dot { position: absolute; top: 13px; right: 14px; width: 10px; height: 10px; border-radius: 999px; background: var(--terracotta-aa); }

.conv-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    background: var(--bianco); border: 1px solid var(--fuga); border-radius: 18px;
    box-shadow: var(--shadow-card); padding: 34px 22px; color: var(--talpa);
}
.conv-empty-ic { width: 56px; height: 56px; border-radius: 18px; background: rgba(226,114,91,.12); color: var(--terracotta); display: grid; place-items: center; margin-bottom: 4px; }
.conv-empty-ic svg { width: 28px; height: 28px; }
.conv-empty b { font-family: var(--font-display); font-weight: 700; color: var(--caffe); font-size: 17px; }
.conv-empty p { margin: 0; }

.thread-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.thread-head .icon-btn {
    width: 38px; height: 38px; flex: none; border-radius: 999px;
    background: rgba(58,46,40,.06); color: var(--caffe);
    display: grid; place-items: center; border: 0; text-decoration: none;
}
.thread-head .icon-btn svg { width: 20px; height: 20px; }
.thread-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.thread-id .conv-av { width: 40px; height: 40px; font-size: 16px; border-radius: 12px; }
.thread-id b { font-family: var(--font-display); font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding: 4px 0;
}
.thread-empty { color: var(--talpa); text-align: center; padding: 20px; }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 18px; }
.bubble-body { margin: 0; font-size: 15px; line-height: 1.4; }
/* L'orario è testo piccolo (11px): niente opacity, che sulla bolla terracotta
   lo portava a 2.94:1. Lo smorziamo col colore, restando sopra il 4.5:1. */
.bubble-time { display: block; font-size: 11px; color: var(--talpa); margin-top: 3px; }
.bubble-mine { align-self: flex-end; background: var(--terracotta-aa); color: var(--bianco); border-bottom-right-radius: 6px; }
.bubble-mine .bubble-time { color: var(--bianco); }
.bubble-theirs { align-self: flex-start; background: var(--bianco); border: 1px solid var(--fuga); box-shadow: var(--shadow-card); border-bottom-left-radius: 6px; }
/* Compositore a pillola nel thread. */
.composer { position: relative; display: flex; align-items: flex-end; gap: 6px; background: var(--bianco); border: 1px solid var(--fuga); border-radius: 22px; box-shadow: var(--shadow-card); padding: 6px; }
.composer textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; font: inherit; background: transparent; color: var(--caffe); padding: 9px 4px; max-height: 120px; }
.composer .send { width: 42px; height: 42px; flex: none; border-radius: 999px; background: var(--terracotta-aa); color: var(--bianco); border: 0; display: grid; place-items: center; cursor: pointer; }
.composer .send:hover { background: var(--terracotta-dark); }
.composer .send svg { width: 20px; height: 20px; }

/* Bottone + pannello emoji. */
.emoji-btn { width: 40px; height: 40px; flex: none; align-self: flex-end; border: 0; background: transparent; color: var(--talpa); border-radius: 999px; display: grid; place-items: center; cursor: pointer; }
.emoji-btn:hover { color: var(--terracotta-dark); }
.emoji-btn svg { width: 23px; height: 23px; }
.emoji-panel {
    position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px);
    background: var(--bianco); border: 1px solid var(--fuga); border-radius: 16px;
    box-shadow: var(--shadow-lift); padding: 8px; z-index: 12;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    max-height: 208px; overflow-y: auto;
}
.emoji-panel[hidden] { display: none; }
.emoji-panel button { border: 0; background: transparent; font-size: 22px; line-height: 1; padding: 6px 0; border-radius: 10px; cursor: pointer; }
.emoji-panel button:hover { background: rgba(58,46,40,.06); }

/* Avatar con logo (associazione/unità/progetto), altrimenti l'iniziale colorata. */
.conv-av.has-logo { background: var(--bianco); box-shadow: inset 0 0 0 1px var(--fuga); overflow: hidden; }
.conv-av.has-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

/* Separatore-giorno (stile WhatsApp): pillola discreta centrata fra i messaggi. */
.day { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--talpa); background: rgba(58,46,40,.06); border-radius: 999px; padding: 3px 12px; margin: 4px 0; }

/* Richiesta di adesione dentro il thread. */
.req-card, .req-approve { align-self: stretch; background: var(--bianco); border: 1px solid var(--fuga); border-radius: 16px; padding: 13px 14px; box-shadow: var(--shadow-card); }
.req-card .lbl, .req-approve .lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--talpa); }
.req-card .lbl svg, .req-approve .lbl svg { width: 14px; height: 14px; }
.req-card .proj, .req-approve .proj { font-family: var(--font-display); font-weight: 700; margin-top: 4px; }
.req-pending { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--ambra-dark); background: rgba(232,161,61,.18); border-radius: 999px; padding: 3px 10px; }
.req-approve { display: flex; flex-direction: column; gap: 12px; }
.req-approve-actions { display: flex; gap: 10px; }
.req-approve-actions form { flex: 1; margin: 0; }
.btn-req { width: 100%; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 15px; border-radius: 999px; padding: 11px; }
.btn-req-yes { background: var(--salvia-dark); color: var(--bianco); }
.btn-req-yes:hover { background: var(--salvia); }
.btn-req-no { background: var(--bianco); color: var(--corallo-dark); box-shadow: inset 0 0 0 1.5px rgba(201,79,79,.35); }

/* Compositore SEMPRE in basso, fisso sopra la tab bar (solo PWA volontario). */
.page-app .thread .composer {
    position: fixed;
    left: 50%; transform: translateX(-50%);
    bottom: calc(68px + env(safe-area-inset-bottom));
    width: calc(100% - 32px); max-width: 528px;
    z-index: 9;
}
.page-app .thread .thread-body { padding-bottom: 90px; }

/* Gestionale: sul thread la PAGINA occupa esattamente il viewport e NON scorre;
   scorre solo il corpo dei messaggi, così la barra di scrittura resta ferma in
   basso. Serve un'altezza fissa (100dvh) + min-height:0 lungo tutta la catena
   flex (body → admin-shell → admin-main → thread → thread-body), altrimenti col
   body a min-height:100vh il contenuto cresce e trascina giù il compositore.
   :has() applica tutto solo a questa pagina; senza :has resta lo scorrimento
   normale (nessuna rottura). */
body.page-admin:has(.thread) { height: 100vh; height: 100dvh; overflow: hidden; }
.admin-main:has(.thread) { display: flex; flex-direction: column; min-height: 0; }
.admin-main:has(.thread) > .admin-legal { display: none; }
.page-admin .thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.page-admin .thread .thread-body { flex: 1; overflow-y: auto; min-height: 0; margin-bottom: 12px; padding-right: 4px; }
.page-admin .thread .composer { flex: none; }

/* Form "contatta" (prima conversazione da pagina progetto). */
.contact-form textarea {
    flex: 1;
    width: 100%;
    padding: 10px 14px;
    font: inherit;
    border: 1.5px solid var(--fuga);
    border-radius: var(--radius-field);
    background: var(--bianco);
    resize: vertical;
    min-height: 46px;
}
.contact-form textarea:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(226,114,91,.18); }
.contact-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.contact-form textarea { width: 100%; }

/* --------------------------------------------------------- registri */
.report-form .form-actions { justify-content: flex-start; }
.report-locked { color: var(--talpa); font-size: 14px; font-weight: 600; align-self: center; }

/* Registri come flusso a due passi: elenco progetti → elenco volontari, con
   ricerca rapida su entrambi (gli elenchi possono essere lunghi). */

/* "← Tutti i progetti": ritorno al passo precedente. */
.admin-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--talpa); font-weight: 600; font-size: 14px; text-decoration: none; }
.admin-back:hover { color: var(--terracotta); }
.admin-back svg { width: 18px; height: 18px; }

/* Barra di ricerca rapida (filtro client-side). */
.list-filter-wrap { position: relative; margin-bottom: 14px; }
.list-filter-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--talpa); pointer-events: none; }
.list-filter { width: 100%; min-height: 48px; padding: 11px 14px 11px 44px; font: inherit; color: var(--caffe); background: var(--bianco); border: 1.5px solid var(--fuga); border-radius: var(--radius-field); }
.list-filter:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(226,114,91,.18); }
.list-filter-empty { color: var(--talpa); text-align: center; padding: 18px 0; }

/* Elenco (progetti o volontari): righe-scheda leggere. */
.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.report-list-item { margin: 0; }

/* Riga progetto: cliccabile, freccia a destra. */
.report-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bianco); border: 1.5px solid var(--fuga); border-radius: var(--radius-admin); text-decoration: none; color: var(--caffe); transition: border-color .15s ease, box-shadow .15s ease; }
.report-row:hover { border-color: var(--terracotta); box-shadow: var(--shadow-card); }
.report-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.report-row-title { font-weight: 700; font-size: 16px; }
.report-row-sub { color: var(--talpa); font-size: 13px; }
.report-row-arrow { flex: 0 0 auto; width: 22px; height: 22px; color: var(--talpa); }
.report-row .av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; flex: 0 0 auto; }
.report-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; }
.report-cat { font-weight: 600; }
.report-hours { font-weight: 700; color: var(--caffe); font-variant-numeric: tabular-nums; }
.report-summary { color: var(--talpa); font-size: 14px; margin: -4px 0 14px; }

/* Riga volontario: info a sinistra, pulsanti a destra. */
.report-vol { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: var(--bianco); border: 1.5px solid var(--fuga); border-radius: var(--radius-admin); }
.report-vol-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-vol-name { font-weight: 700; font-size: 16px; }
.report-vol-nick { color: var(--talpa); font-weight: 500; font-size: 14px; }
.report-vol-meta { color: var(--talpa); font-size: 13px; }
.report-vol-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.report-doc-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Pulsanti compatti per le righe (elenchi lunghi). */
.btn-tiny { padding: 8px 12px; font-size: 13px; min-height: 38px; }

/* Scarico massivo + nota premium. */
.report-bulk { max-width: 760px; margin-bottom: 18px; }
.report-bulk .field-hint { margin-top: 8px; }
.report-premium-note { max-width: 760px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 16px; background: rgba(232,161,61,.12); border-radius: var(--radius-admin); color: var(--caffe); font-size: 14px; }
.report-premium-note svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ambra-dark); }
@media (max-width: 640px) { .report-vol-actions { width: 100%; } .report-vol-actions .btn { flex: 1; } }

/* --------------------------------------------------------- GDPR / dati */
.gdpr-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gdpr-danger { box-shadow: inset 0 0 0 1.5px rgba(201,79,79,.4), var(--shadow-card); }
.gdpr-danger h2 { color: var(--corallo-dark); }
.btn-danger { background: var(--corallo-dark); color: var(--bianco); }
.btn-danger:hover { background: #b23f3f; color: var(--bianco); }
.profile-gdpr-link { text-align: center; margin: 18px 0 4px; }
.profile-gdpr-link a { font-weight: 600; }

/* ============================================ badge / traguardi */
.badge-art { display: block; width: 100%; height: 100%; }
.badge-thumb { display: inline-flex; width: 56px; height: 56px; flex: none; }
.badge-thumb .badge-art { width: 100%; height: 100%; }
.badge-thumb.is-locked .badge-art,
.badge-card.is-locked .badge-art { filter: grayscale(1) opacity(.55); }

/* Teaser nella home */
.badge-teaser { display: block; text-decoration: none; color: var(--caffe); margin-bottom: 14px; }
.badge-teaser:hover { color: var(--caffe); }
.badge-teaser-strip { display: flex; gap: 10px; margin: 12px 0 10px; flex-wrap: wrap; }
.badge-teaser-strip .badge-thumb { width: 48px; height: 48px; }
.badge-teaser-cta { font-weight: 600; color: var(--terracotta-dark); font-size: 14px; }
.badge-count { font-family: var(--font-display); font-weight: 700; color: var(--talpa); }

/* Galleria pagina traguardi */
.badge-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
.badge-card { background: var(--bianco); border-radius: var(--radius-app); box-shadow: var(--shadow-card); padding: 20px 14px; text-align: center; }
.badge-card .badge-thumb { position: relative; width: 84px; height: 84px; margin: 0 auto 10px; }
.badge-lock { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; background: var(--bianco); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); }
.badge-lock svg { width: 15px; height: 15px; color: var(--talpa); }
.badge-card-name { font-family: var(--font-display); font-weight: 700; margin: 0; font-size: 16px; }
.badge-card.is-locked .badge-card-name { color: var(--talpa); }
.badge-card-desc { font-size: 13px; color: var(--talpa); margin: 5px 0 0; line-height: 1.35; }
.badge-card-date { font-size: 12px; color: var(--salvia-dark); font-weight: 600; margin: 7px 0 0; }

/* Super-admin: lista e picker */
.cell-badge-art { width: 52px; }
.badge-thumb-sm { width: 40px; height: 40px; }
.badge-rule { font-weight: 600; white-space: nowrap; }
.field-label-inline { font-weight: 600; margin: 16px 0 8px; }
.accent-row { display: flex; gap: 12px; flex-wrap: wrap; }
.accent-swatch { cursor: pointer; position: relative; line-height: 0; }
.accent-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.accent-swatch span { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bianco), 0 0 0 3px var(--fuga); }
.accent-swatch input:checked + span { box-shadow: 0 0 0 2px var(--bianco), 0 0 0 3px var(--caffe); }
.accent-swatch input:focus-visible + span { outline: 2.5px solid var(--cobalto); outline-offset: 3px; }
.artwork-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px; margin-top: 4px; }
.artwork-option { cursor: pointer; line-height: 0; }
.artwork-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.artwork-preview { display: block; border-radius: 12px; padding: 4px; box-shadow: 0 0 0 2px transparent; transition: box-shadow .12s; }
.artwork-option input:checked + .artwork-preview { box-shadow: 0 0 0 2.5px var(--terracotta); }
.artwork-option input:focus-visible + .artwork-preview { outline: 2.5px solid var(--cobalto); outline-offset: 2px; }
.badge-form .form-actions { max-width: none; }

/* ===================================================== 2FA / sicurezza */
.twofa-on { color: var(--salvia-dark); }
.twofa-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 20px; letter-spacing: 2px; font-weight: 700;
    background: var(--carta); border-radius: var(--radius-field);
    padding: 12px 16px; word-break: break-all; margin: 8px 0 0;
}
.twofa-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.twofa-inline input {
    flex: 1; min-width: 160px; padding: 10px 12px;
    border: 1.5px solid var(--fuga); border-radius: var(--radius-field);
    font-size: 18px; letter-spacing: 4px;
}
.twofa-inline input:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(226,114,91,.18); }
.twofa-uri { margin-top: 12px; }
.twofa-uri summary { cursor: pointer; color: var(--terracotta-dark); font-weight: 600; font-size: 14px; }
.twofa-uri input {
    width: 100%; margin-top: 8px; padding: 8px 10px;
    border: 1.5px solid var(--fuga); border-radius: var(--radius-field);
    font-size: 13px; color: var(--talpa);
}
.recovery-codes {
    list-style: none; margin: 0 0 14px; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px;
}
.recovery-codes li {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 16px; font-weight: 700; letter-spacing: 1px;
    background: var(--carta); border-radius: 8px; padding: 10px; text-align: center;
}
.qr-box { display: flex; justify-content: center; margin: 10px 0 4px; }
.qr { width: 224px; height: 224px; max-width: 100%; box-shadow: var(--shadow-card); border-radius: 10px; }
.twofa-manual { margin-top: 16px; }
.twofa-manual summary { cursor: pointer; color: var(--terracotta-dark); font-weight: 600; font-size: 14px; }
.twofa-uri-input {
    width: 100%; margin-top: 8px; padding: 8px 10px;
    border: 1.5px solid var(--fuga); border-radius: var(--radius-field);
    font-size: 13px; color: var(--talpa);
}

/* ============================== gestione associazioni (super-admin) */
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.filter-tab {
    padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 14px;
    text-decoration: none; color: var(--talpa); background: var(--bianco);
    box-shadow: inset 0 0 0 1.5px var(--fuga);
}
.filter-tab:hover { color: var(--terracotta-dark); }
.filter-tab.is-active { background: var(--terracotta-aa); color: var(--bianco); box-shadow: none; }
.filter-tab.is-active:hover { color: var(--bianco); }
.status-suspended { color: var(--ambra-dark); }
.assoc-suspended-title { color: var(--ambra-dark); }
.assoc-facts { margin: 6px 0 0; display: grid; gap: 10px; }
.assoc-facts > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--fuga); padding-bottom: 8px; }
.assoc-facts dt { color: var(--talpa); font-weight: 600; font-size: 14px; margin: 0; }
.assoc-facts dd { margin: 0; text-align: right; font-weight: 600; }
.assoc-no-delete { max-width: 620px; margin-top: 18px; }

/* ---------------------------------------------- footer note legali */
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.admin-legal {
    margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--fuga);
    font-size: 13px; color: var(--talpa); display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.admin-legal a, .app-legal a { color: var(--talpa); text-decoration: none; }
.admin-legal a:hover, .app-legal a:hover { color: var(--terracotta-dark); text-decoration: underline; }
.app-legal {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center;
    font-size: 13px; color: var(--talpa); margin: 24px 0 8px;
}

/* -------------------------------------------- ambiti: selettore colore */
.cat-color-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cat-color-swatch { cursor: pointer; position: relative; line-height: 0; }
.cat-color-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Pallino colorato (il colore arriva dai token --cat-badge della classe badge-<k>). */
.cat-swatch-dot {
    display: block; width: 30px; height: 30px; border-radius: 50%;
    background: var(--cat-badge, var(--talpa));
    box-shadow: inset 0 0 0 1px rgba(58, 46, 40, .14);
    outline: 2px solid transparent; outline-offset: 2px;
}
.cat-color-swatch input:checked + .cat-swatch-dot { outline-color: var(--caffe); }
.cat-color-swatch input:focus-visible + .cat-swatch-dot { outline-color: var(--cobalto); }
/* Colore già assegnato ad altra categoria: sbiadito ma selezionabile. */
.cat-color-swatch.is-used .cat-swatch-dot { opacity: .32; }
.cat-color-swatch.is-used input:checked + .cat-swatch-dot { opacity: 1; }

/* -------------------------------- attributi progetto (impegno richiesto) */
.field-legend { display: block; font-weight: 600; margin-bottom: 6px; }
.check-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.check-pill { cursor: pointer; line-height: 0; }
.check-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-pill span {
    display: inline-block; padding: 8px 15px; border-radius: 999px;
    font-weight: 600; font-size: 14px; line-height: 1.2; background: var(--bianco);
    box-shadow: inset 0 0 0 1.5px var(--fuga); color: var(--caffe);
}
.check-pill input:checked + span { background: var(--terracotta-aa); color: var(--bianco); box-shadow: none; }
.check-pill input:focus-visible + span { outline: 2.5px solid var(--cobalto); outline-offset: 2px; }
.pmeta-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.pmeta-list li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--fuga); padding-bottom: 8px; }
.pmeta-list li:last-child { border-bottom: none; padding-bottom: 0; }
.pmeta-list span { color: var(--talpa); font-weight: 600; font-size: 14px; }
.pmeta-list strong { text-align: right; }

/* ------------------------------------------- ricerca avanzata + vicino a me */
.search-form { display: flex; flex-direction: column; gap: 12px; }
.search-bar { display: flex; gap: 8px; }
.search-bar .search-input { flex: 1; }
.search-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.search-adv { flex: 1; min-width: 240px; background: var(--bianco); border-radius: var(--radius-app); box-shadow: var(--shadow-card); }
.search-adv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 600; color: var(--caffe); }
.search-adv > summary::-webkit-details-marker { display: none; }
.search-adv > summary svg { width: 18px; height: 18px; color: var(--terracotta); }
.search-adv[open] > summary { border-bottom: 1px solid var(--fuga); }
.search-adv-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.search-adv-actions { display: flex; gap: 14px; align-items: center; }
.near-me { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.near-btn { display: inline-flex; align-items: center; gap: 7px; }
.near-btn svg { width: 18px; height: 18px; }
.near-btn.is-on { background: var(--terracotta-aa); color: var(--bianco); box-shadow: none; }
.near-btn.is-on svg { color: var(--bianco); }
.near-radius { padding: 10px 12px; border: 1.5px solid var(--fuga); border-radius: var(--radius-field); background: var(--bianco); }
.near-status { color: var(--talpa); font-size: 14px; font-weight: 600; margin: 0; }
.search-count { color: var(--talpa); font-weight: 600; font-size: 14px; margin: 4px 0 10px; }
.project-card-attrs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.attr-chip { font-size: 12.5px; font-weight: 600; color: var(--caffe); background: var(--carta); border-radius: 999px; padding: 3px 10px; }

/* Tipologie riconosciute (rimborso): badge "ufficiale" ambra + chip importo verde.
   Riga condivisa da card elenco e slide mappa. */
.scheme-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.scheme-badge {
    font-size: 12px; font-weight: 700; line-height: 1.2;
    color: var(--caffe); background: var(--ambra);
    border-radius: 999px; padding: 3px 11px;
}
.comp-chip {
    font-size: 12.5px; font-weight: 700; line-height: 1.2;
    color: var(--salvia-dark); background: rgba(122, 158, 110, .16);
    border-radius: 999px; padding: 3px 11px; white-space: nowrap;
}
.scopri-slide .scheme-line { margin-top: 4px; }
.scopri-slide .scheme-badge { font-size: 11px; padding: 2px 9px; }
.scopri-slide .comp-chip { font-size: 11.5px; padding: 2px 9px; }

/* Form associazione: importo + periodo affiancati. */
.comp-row { display: flex; gap: 8px; }
.comp-row input { flex: 1; min-width: 0; }
.comp-row select { flex: none; width: auto; }

/* Ricerca: riga età + "solo con rimborso". */
.search-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; }
.search-age { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--talpa); }
.search-age input { width: 92px; }
.project-card-distance { color: var(--terracotta-dark); font-weight: 600; }
.time-range { display: flex; align-items: center; gap: 8px; }
.time-range input { flex: 1; min-width: 0; }

/* Rotellina orari sempre visibile (home volontario). Due colonne che scorrono
   a scatti di 30'; l'orario nella fascia centrale è quello scelto. Pensata per
   il tocco: niente modale, si scorre e si conferma. IDs/rowH combaciano con
   [data-timewheel] in app.js (rowH = 44). */
.timewheel { display: flex; gap: 12px; align-items: flex-end; }
.tw-group { flex: 1; min-width: 0; text-align: center; }
.tw-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--talpa); margin-bottom: 6px; letter-spacing: .02em; }
.tw-colwrap {
    position: relative;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--carta);
}
/* Fascia centrale evidenziata: è lo "slot" del valore scelto. Sta dietro al testo. */
.tw-colwrap::after {
    content: "";
    position: absolute;
    left: 6px; right: 6px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    border-radius: 9px;
    background: rgba(226, 114, 91, .12);
    z-index: 0;
    pointer-events: none;
}
.tw-col {
    position: relative;
    z-index: 1;
    height: 132px;               /* 3 righe da 44px */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 66%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 66%, transparent 100%);
}
.tw-col::-webkit-scrollbar { display: none; }
.tw-col:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 1px; }
.tw-pad { height: 44px; }
.tw-opt {
    display: block;
    width: 100%;
    height: 44px;
    line-height: 44px;
    scroll-snap-align: center;
    text-align: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--talpa);
    opacity: .5;
    transition: color .12s ease, opacity .12s ease;
}
.tw-opt.is-sel { color: var(--caffe); opacity: 1; }

/* Riga "te ne restano N oggi": trasparenza sui limiti IA, un filo più marcata
   di un normale hint. */
.ai-quota { margin-top: 8px; font-weight: 600; color: var(--talpa); }
.ai-quota-top { text-align: center; margin: 0 0 14px; }

/* L'attestato scuola è indipendente dall'ufficio: staccato dagli altri formati. */
.report-certificate { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--fuga); }
.report-certificate h2 { font-size: 18px; margin: 0 0 4px; }
.report-certificate .field-hint { max-width: 640px; margin-bottom: 12px; }

/* ----------------------------------------------------------- timbratore */
.timer-card { text-align: center; }
.timer-card.is-running { border-left: 4px solid var(--salvia-dark); }
.timer-card h2 { margin-top: 0; }
.timer-card .timer-start { margin-top: 12px; text-align: left; }
.timer-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 14px;
    color: var(--salvia-dark);
}
/* Il pallino pulsa: lo sguardo deve cadere qui. Chi ha chiesto meno movimento
   lo vede fermo — la regola globale prefers-reduced-motion azzera l'animazione,
   e il pallino resta comunque verde e visibile. */
.timer-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--salvia-dark);
    animation: timer-pulse 1.6s ease-in-out infinite;
}
@keyframes timer-pulse { 50% { opacity: .25; } }
.timer-clock {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 44px;
    letter-spacing: 1px;
    color: var(--caffe);
    margin: 0;
    font-variant-numeric: tabular-nums; /* le cifre non ballano a ogni secondo */
}
.timer-project { margin: 2px 0 14px; font-size: 14px; }
.timer-project strong { display: block; color: var(--caffe); }
.timer-project span { color: var(--talpa); font-size: 13px; }
.timer-actions { display: flex; align-items: center; justify-content: center; gap: 16px; }
.timer-actions form { margin: 0; }
.timer-proposal {
    background: rgba(50, 114, 103, .10);
    border-left: 3px solid var(--salvia-dark);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 16px 0 0;              /* respiro fra timbratore e ciò che segue */
    font-size: 14.5px;
    color: var(--caffe);
    font-weight: 600;
}
.timer-proposal-err { margin: 16px 0 0; }

/* Timbratore come eroe: un disco d'icona sopra il titolo, l'occhio parte da lì. */
.timer-card { padding: 26px 24px 24px; }
.timer-hero-ic {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: rgba(226, 114, 91, .14);
    color: var(--terracotta-dark);
}
.timer-hero-ic svg { width: 32px; height: 32px; }
/* Avvio turno: il gesto principale della pagina, quindi un pulsante grande e
   invitante con l'icona play. È qui che deve cadere il pollice. */
.timer-start-btn {
    min-height: 56px;
    font-size: 17px;
    margin-top: 4px;
    box-shadow: 0 8px 20px rgba(178, 84, 63, .28);
}
.timer-start-btn svg { width: 22px; height: 22px; }

/* Suggerimenti attività dallo storico: chip toccabili sotto il campo. Sul
   telefono il datalist si apre solo digitando, le chip invece sono subito lì. */
.note-suggest { margin-top: 10px; }
.note-suggest-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--talpa); margin-bottom: 6px; }
.note-suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.note-chip {
    border: 1.5px solid var(--fuga);
    background: var(--bianco);
    color: var(--caffe);
    border-radius: 999px;
    padding: 7px 13px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.note-chip:hover { border-color: var(--terracotta); }
.note-chip:active { transform: scale(.96); }

/* Inserimento a mano: c'è, ma non grida. Voce a comparsa, il modulo dentro. */
.hours-manual { padding: 0; margin-top: 16px; }
.hours-manual > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    color: var(--caffe);
}
.hours-manual > summary::-webkit-details-marker { display: none; }
.hours-manual > summary svg { width: 20px; height: 20px; color: var(--talpa); flex: none; }
/* Chevron che ruota all'apertura: segnala che è espandibile. */
.hours-manual > summary::after {
    content: "";
    margin-left: auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--talpa);
    border-bottom: 2px solid var(--talpa);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.hours-manual[open] > summary::after { transform: rotate(-135deg); }
.hours-manual[open] > summary { border-bottom: 1px solid var(--fuga); }
.hours-manual > form { padding: 16px 18px; }

/* Storico: un accenno di colore a sinistra racconta lo stato a colpo d'occhio. */
.hour-row { border-left: 3px solid var(--fuga); }
.hour-row-confirmed { border-left-color: var(--salvia-dark); }
.hour-row-pending   { border-left-color: var(--ambra); }
.hour-row-rejected  { border-left-color: var(--corallo-dark, var(--terracotta-dark)); }

/* ------------------------------------------------------ landing pubblica
   Redesign a tessere: bande a tutta larghezza chiare/scure alternate, con card
   numerate. Font del progetto (Signika / Source Sans 3). Sui fondi colorati che
   portano testo bianco si usano le varianti -dark/-aa: contrasto WCAG AA. */
.lp { width: 100%; }
.lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* Bande a tutta larghezza, chiare e scure alternate */
.lp-band { padding: 72px 0; }
.lp-band-light { background: var(--carta); }
.lp-band-dark { background: var(--caffe); }

/* Testata di banda: mosaico decorativo, titolo, lead, azione */
.lp-band-head { max-width: 640px; margin: 0 0 40px; }
.lp-mark { display: grid; grid-template-columns: repeat(2, 14px); gap: 4px; margin: 0 0 18px; width: max-content; }
.lp-mark i { width: 14px; height: 14px; border-radius: 5px; display: block; }
.lp-mark-terracotta { background: var(--terracotta); }
.lp-mark-ambra { background: var(--ambra); }
.lp-mark-salvia { background: var(--salvia); }
.lp-mark-cobalto { background: var(--cobalto); }
.lp-mark-talpa { background: rgba(255, 255, 255, .14); }              /* tessere "spente" su fondo scuro */
.lp-band-light .lp-mark-talpa { background: rgba(58, 46, 40, .10); }  /* ...e su fondo chiaro */

.lp-band-title { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; color: var(--carta); margin: 0 0 14px; }
.lp-band-title-ink { color: var(--caffe); }
.lp-band-lead { font-size: 18px; line-height: 1.6; color: rgba(250, 247, 242, .74); margin: 0 0 26px; }
.lp-band-lead-ink { color: var(--talpa); }

/* I bottoni della landing usano ora le varianti globali del design system
   (.btn-ghost / .btn-dark / .btn-amber / .btn-cream), definite più in alto. */

/* Hero */
.lp-hero { padding-top: 44px; }
.lp-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.lp-hero-title { font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1.06; letter-spacing: -.015em; color: var(--caffe); margin: 0 0 18px; }
.lp-hero-sub { font-size: 19px; line-height: 1.6; color: var(--talpa); margin: 0 0 30px; max-width: 46ch; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Altezza FISSA del blocco hero: senza tetto, la foto (aspect-ratio 4/5) si
   allunga a dismisura su schermi larghi. Con height fissa e figli a height:100%
   la foto riempie e ritaglia (object-fit) qualunque sia la larghezza. */
.lp-hero-art { display: grid; grid-template-columns: 4fr 6fr; gap: 16px; height: 520px; }
.lp-hero-tile { background: var(--terracotta); border-radius: 24px; height: 100%; }
.lp-hero-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; }
.lp-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #efe7dc;
    border: 1.5px dashed rgba(58, 46, 40, .2);
    color: rgba(58, 46, 40, .32);
}
.lp-photo-empty svg { width: 56px; height: 56px; }

/* Card a tinta piena (volontari) */
.lp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-card { border-radius: 22px; padding: 26px 24px; }
.lp-card-n { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .12em; opacity: .7; display: block; margin: 0 0 14px; }
.lp-card-title { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.15; margin: 0 0 10px; }
.lp-card-body { font-size: 15px; line-height: 1.55; margin: 0; }
.lp-card-ambra { background: var(--ambra); color: var(--caffe); }              /* testo scuro: l'ambra è chiara */
.lp-card-salvia { background: var(--salvia-dark); color: #fff; }
.lp-card-cobalto { background: var(--cobalto); color: #fff; }
.lp-card-terracotta { background: var(--terracotta-aa); color: #fff; }
.lp-card-salvia .lp-card-body,
.lp-card-cobalto .lp-card-body,
.lp-card-terracotta .lp-card-body { color: rgba(255, 255, 255, .92); }

/* Card bianche con bordo superiore colorato (associazioni) */
.lp-ocard { background: var(--bianco); border-radius: 20px; padding: 26px 24px; border-top: 4px solid var(--fuga); box-shadow: var(--shadow-card); }
.lp-ocard-n { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .12em; display: block; margin: 0 0 12px; }
.lp-ocard-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--caffe); margin: 0 0 10px; }
.lp-ocard-body { font-size: 15px; line-height: 1.55; color: var(--talpa); margin: 0; }
.lp-ocard-cobalto { border-top-color: var(--cobalto); }
.lp-ocard-cobalto .lp-ocard-n { color: var(--cobalto); }
.lp-ocard-ambra { border-top-color: var(--ambra); }
.lp-ocard-ambra .lp-ocard-n { color: var(--ambra-dark); }
.lp-ocard-salvia { border-top-color: var(--salvia); }
.lp-ocard-salvia .lp-ocard-n { color: var(--salvia-dark); }
.lp-ocard-terracotta { border-top-color: var(--terracotta); }
.lp-ocard-terracotta .lp-ocard-n { color: var(--terracotta-dark); }

/* Numeri: veri o assenti (StatsRepository::isWorthShowing). */
.lp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; }
.lp-stats p { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-stats strong { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--terracotta-dark); }
.lp-stats span { color: var(--talpa); font-size: 14px; font-weight: 600; }

/* Installazione: card bianca larga */
.lp-install { background: var(--bianco); border-radius: 28px; box-shadow: var(--shadow-card); padding: 44px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.lp-install-text { max-width: 560px; }
.lp-install-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 0; }
.lp-install-hint { color: var(--talpa); font-size: 14px; max-width: 440px; margin: 12px 0 0; }
.lp-install-art { flex: none; display: grid; grid-template-columns: repeat(2, 34px); gap: 8px; }
.lp-install-art i { width: 34px; height: 34px; border-radius: 11px; display: block; }

/* Chiusura sul marchio */
.lp-final { text-align: center; }
.lp-final-inner { max-width: 640px; }
.lp-final-title { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -.01em; color: var(--carta); margin: 0 0 12px; }
.lp-final-sub { font-size: 18px; color: rgba(250, 247, 242, .74); margin: 0 0 28px; }
.lp-strip { display: flex; gap: 10px; justify-content: center; margin: 48px 0 0; flex-wrap: wrap; }
.lp-strip i { width: 44px; height: 44px; border-radius: 12px; display: block; }
.lp-strip-void { background: rgba(255, 255, 255, .05); }
.lp-strip-terracotta { background: var(--terracotta); }
.lp-strip-ambra { background: var(--ambra); }
.lp-strip-salvia { background: var(--salvia); }
.lp-strip-cobalto { background: var(--cobalto); }

@media (max-width: 860px) {
    .lp-band { padding: 52px 0; }
    .lp-hero { padding-top: 24px; }
    .lp-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    /* Su mobile la tessera sparisce e la foto va a tutta larghezza: qui l'altezza
       fissa non serve, torna il ritratto 4/5 così non è né troppo alta né schiacciata. */
    .lp-hero-art { grid-template-columns: 1fr; height: auto; }
    .lp-hero-tile { display: none; }
    .lp-hero-photo { height: auto; aspect-ratio: 4 / 5; max-height: 60vh; }
    .lp-hero-title { font-size: 36px; }
    .lp-hero-sub { font-size: 17px; }
    .lp-cards, .lp-stats { grid-template-columns: 1fr; }
    .lp-install { flex-direction: column; align-items: flex-start; }
    .lp-band-title, .lp-final-title { font-size: 30px; }
}

/* ------------------------------------------- preferenze e "consigliati" */
.prefs-form { display: flex; flex-direction: column; gap: 20px; }
.prefs-group { border: 0; padding: 0; margin: 0; }
.prefs-group legend { font-weight: 700; color: var(--caffe); padding: 0; margin-bottom: 6px; }
.prefs-group .field-hint { margin: 0 0 10px; }
.prefs-privacy { border-left: 3px solid var(--salvia-dark); padding-left: 10px; margin: 0; }
.prefs-reset { margin: 14px 0 0; text-align: center; }
.prefs-tune { margin: 0 0 12px; }
.prefs-cta { text-align: center; }
.prefs-cta h2 { font-size: 19px; margin: 0 0 6px; }
.prefs-cta p { color: var(--talpa); margin: 0 0 14px; }
.prefs-teaser { display: block; text-decoration: none; margin-top: 14px; }
.prefs-teaser strong { display: block; color: var(--caffe); margin-bottom: 4px; }
.prefs-teaser span { color: var(--talpa); font-size: 14px; }

/* Il "perché" della proposta: mostriamo le ragioni, non il punteggio — un
   numero non si può discutere, "nei tuoi giorni" sì. */
.match-why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.match-why-label { font-size: 12.5px; font-weight: 700; color: var(--talpa); }
.match-chip {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--salvia-dark);
    background: rgba(50, 114, 103, .10);
    border-radius: 999px;
    padding: 3px 10px;
}
.discover-card .match-chip { margin-top: 6px; align-self: flex-start; }

/* ------------------------------------------------------------ focus da
   tastiera. I campi si accendono col bordo terracotta e un alone al 18%:
   basta a chi clicca, non a chi naviga col tab. Qui rimettiamo lo stesso
   outline cobalto dei bottoni (WCAG 2.4.7). Sta in fondo al foglio perché
   deve arrivare dopo gli "outline: none" dei singoli campi. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
.search-input:focus-visible,
.tr-block .tr-title:focus-visible,
.tr-block .tr-desc:focus-visible,
#lang-search:focus-visible,
.thread-reply textarea:focus-visible,
.contact-form textarea:focus-visible,
.twofa-inline input:focus-visible {
    outline: 2.5px solid var(--cobalto);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- varie */

/* L'attributo hidden vale grazie alla regola del browser `[hidden]{display:none}`,
   che però perde contro QUALSIASI nostra regola che imposti display: .btn è
   inline-flex, quindi un <button hidden class="btn"> restava visibile. Succedeva
   davvero al bottone "Installa": compariva anche dove non si può installare. */
[hidden] { display: none !important; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.logout-form { margin: 0; }
.resend-form { margin: 4px 0 0; }

/* nota cookie (solo tecnici → informativa, niente accetta/rifiuta) */
.cookie-notice {
    position: fixed;
    inset: auto 12px 12px 12px;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--caffe);
    color: var(--carta);
    padding: 14px 18px;
    border-radius: var(--radius-field);
    box-shadow: 0 6px 24px rgba(58, 46, 40, .25);
    z-index: 200;
}
.cookie-text { margin: 0; flex: 1; min-width: 200px; font-size: 14px; }
.cookie-text a { color: var(--carta); text-decoration: underline; text-underline-offset: 3px; }
.cookie-notice .btn { min-height: 40px; padding: 8px 20px; }

/* =========================================================================
   Passaggio "app viva" (2026-07-23): profondità al tocco, anelli di
   progresso sui badge, bottom-sheet sulla mappa. Tutto dentro il brand:
   fondo chiaro, palette calda, nessuna libreria.
   ========================================================================= */

/* --- 1. Le card tappabili reagiscono al tocco ---------------------------- */
/* La differenza fra "sito" e "app" è quasi tutta qui: un elemento che si
   preme deve muoversi. Sfioramento = si solleva; pressione = si abbassa. */
.project-card,
.discover-portal,
.badge-card,
.tile-accent,
.btn-icon {
    transition: transform .16s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .project-card:hover,
    .discover-portal:hover,
    .tile-accent:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
}
.project-card:active,
.discover-portal:active,
.badge-card:active,
.tile-accent:active { transform: scale(.985); box-shadow: var(--shadow-card); }

@media (prefers-reduced-motion: reduce) {
    .project-card, .discover-portal, .badge-card, .tile-accent, .btn-icon { transition: none; }
    .project-card:hover, .discover-portal:hover, .tile-accent:hover,
    .project-card:active, .discover-portal:active, .badge-card:active, .tile-accent:active { transform: none; }
}

/* --- 2. Barra di progresso sui badge da conquistare ---------------------- */
/* Quanto manca alla prossima tessera, a colpo d'occhio. Una barra sotto la
   tessera (non un anello attorno): la tessera è un quadrato, il cerchio
   leggeva storto. Il dato c'è già (ore fatte su soglia). */
.badge-bar {
    height: 9px;
    margin: 12px 4px 6px;
    background: var(--fuga);
    border-radius: 999px;
    overflow: hidden;
}
.badge-bar-fill {
    display: block;
    height: 100%;
    width: 0;                  /* default vuoto: mai "pieno" se la larghezza manca */
    border-radius: 999px;
    background: var(--terracotta);   /* colore pieno, non gradiente: si legge senza dubbi */
    transition: width .8s cubic-bezier(.2, .8, .2, 1);
}
/* Larghezza a scatti del 10%: classi STATICHE, non inline style (bloccato dalla
   CSP). Il bucket 0 resta a width:0, quindi davvero vuota. */
.badge-bar-fill[data-fill="1"]  { width: 10%; }
.badge-bar-fill[data-fill="2"]  { width: 20%; }
.badge-bar-fill[data-fill="3"]  { width: 30%; }
.badge-bar-fill[data-fill="4"]  { width: 40%; }
.badge-bar-fill[data-fill="5"]  { width: 50%; }
.badge-bar-fill[data-fill="6"]  { width: 60%; }
.badge-bar-fill[data-fill="7"]  { width: 70%; }
.badge-bar-fill[data-fill="8"]  { width: 80%; }
.badge-bar-fill[data-fill="9"]  { width: 90%; }
.badge-bar-fill[data-fill="10"] { width: 100%; }

/* Maiuscolo visivo (es. codice fiscale): classe invece di inline style, che la
   CSP scarterebbe. Il dato è comunque reso maiuscolo lato server al salvataggio. */
.input-upper { text-transform: uppercase; }
.badge-progress {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--talpa);
}
.badge-progress strong { color: var(--terracotta-dark); }

@media (prefers-reduced-motion: reduce) {
    .badge-bar-fill { transition: none; }
}


/* =========================================================================
   Scopri — mappa a tutto schermo con controlli in sovrimpressione.
   La mappa riempie lo spazio fra header e tab bar; i pulsanti galleggiano
   sopra; i progetti scorrono in una striscia orizzontale in basso.
   ========================================================================= */

/* Modalità: si mostra una regione alla volta. */
.scopri[data-view="map"] .scopri-list { display: none; }
.scopri[data-view="list"] .scopri-map-layer { display: none; }

/* Strato mappa: card contenuta sotto la testata (titolo + segmentato). Gli
   overlay (barra, vicino a me, bacchetta, striscia) si posizionano dentro. */
.scopri-map-layer {
    position: relative;
    /* Altezza: la imposta app.js MISURANDO lo spazio esatto dal top della mappa
       al top della tab bar (fissa) — così la mappa arriva esattamente al menu,
       senza coprirlo e senza far scorrere la pagina. Questo calc è solo un
       ripiego se il JS non gira (PWA: praticamente mai). */
    height: calc(100vh - 200px);
    height: calc(100dvh - 200px);
    min-height: 300px;
    /* full-bleed: mappa e striscia a tutta larghezza (annulla il padding di
       .app-main). Niente cornice: la mappa arriva ai bordi dello schermo. */
    margin: 0 -20px 6px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
/* In modalità mappa la pagina NON deve scorrere: la mappa occupa lo spazio utile
   e si ferma al menu. La classe la mette/toglie app.js sul toggle Mappa/Elenco. */
html.is-scopri-map, body.is-scopri-map { overflow: hidden; }
/* 100dvh (non 100vh): il viewport DINAMICO combacia con lo schermo reale, così il
   body non resta più alto della vista (niente residuo di scroll sotto il menu). */
body.is-scopri-map { min-height: 100dvh; }
body.is-scopri-map .app-main { padding-bottom: 0; }
body.is-scopri-map .scopri-map-layer { margin-bottom: 0; }
.scopri-map { position: absolute; inset: 0; }
.scopri-map .leaflet-control-zoom { display: none; } /* più pulito su mobile */

/* Una sola barra in alto: pillola di ricerca (apre l'elenco) + filtri + vista.
   Sostituisce i controlli sparsi ai quattro angoli. */
.scopri-topbar { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1000; display: flex; align-items: center; gap: 10px; }
.scopri-search-pill {
    flex: 1; min-width: 0; min-height: 48px;
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px;
    border: none; border-radius: 16px;
    background: var(--bianco); box-shadow: var(--shadow-lift);
    color: var(--talpa); font: inherit; font-size: 15px; text-align: left;
    cursor: pointer;
}
.scopri-search-pill svg { width: 20px; height: 20px; flex: none; color: var(--talpa); }
.scopri-search-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scopri-topbtn {
    flex: none; width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 16px;
    background: var(--bianco); box-shadow: var(--shadow-lift);
    color: var(--caffe); cursor: pointer;
}
.scopri-topbtn svg { width: 22px; height: 22px; }

/* In basso a sinistra, quieti: "vicino a me" + raggio (niente più +/−). */
.scopri-nearby { position: absolute; left: 14px; bottom: 150px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.scopri-nearby .scopri-iconbtn.is-busy { opacity: .55; }
.scopri-radius {
    height: 44px;
    border: none;
    border-radius: 14px;
    background: var(--carta);
    box-shadow: var(--shadow-lift);
    color: var(--caffe);
    font: inherit;
    font-weight: 600;
    padding: 0 12px;
}

/* "Cerca in quest'area": pillola quieta (bianca) appena sotto la barra. Appare
   discreta, non compete con l'unica azione appariscente (la bacchetta IA). */
.scopri-search-area {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    background: var(--caffe);
    color: var(--su-scuro);
    font: inherit;
    font-weight: 600;
    font-size: 13.5px;
    box-shadow: var(--shadow-lift);
    cursor: pointer;
    white-space: nowrap;
}

/* Pulsante "Filtri" della mappa: stesso linguaggio degli altri controlli
   (arrotondato, carta, ombra morbida) invece del riquadro fuori brand. */
.disc-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 14px;
    background: var(--carta);
    box-shadow: var(--shadow-lift);
    color: var(--caffe);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.disc-tool svg { width: 19px; height: 19px; flex: none; }

/* In alto a destra: torna all'elenco. */
.scopri-controls { position: absolute; top: 12px; right: 12px; z-index: 1000; }
.scopri-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: none; border-radius: 14px;
    background: var(--carta);
    box-shadow: var(--shadow-lift);
    color: var(--caffe);
    cursor: pointer;
}
.scopri-iconbtn svg { width: 22px; height: 22px; }

/* Azioni flottanti (bacchetta, preferenze): sopra la striscia, a destra. */
.scopri-fabs {
    position: absolute;
    right: 14px;
    bottom: 154px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.scopri-fab {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--carta);
    box-shadow: var(--shadow-lift);
    color: var(--caffe);
    text-decoration: none;
}
.scopri-fab svg { width: 24px; height: 24px; }
.scopri-fab.is-on { background: var(--terracotta-aa); color: var(--bianco); }
.scopri-fab-wand { background: var(--terracotta-aa); color: var(--bianco); } /* l'IA salta all'occhio */

/* Striscia dei progetti a scorrimento laterale (stile Airbnb). Il layer mappa è
   già full-bleed, quindi la striscia riempie tutta la larghezza dello schermo. */
.scopri-strip {
    position: absolute;
    left: 0; right: 0; bottom: 14px;
    z-index: 1000;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.scopri-strip::-webkit-scrollbar { display: none; }
.scopri-slide {
    flex: 0 0 86%;
    scroll-snap-align: center;
    background: var(--carta);
    border-radius: 18px;
    box-shadow: var(--shadow-lift);
    padding: 12px 14px;
    text-decoration: none;
    color: var(--caffe);
    display: flex;
    align-items: center;
    gap: 12px;
}
.scopri-slide.is-active { box-shadow: 0 0 0 2px var(--terracotta), var(--shadow-lift); }
.scopri-slide-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scopri-slide-title { font-size: 16px; line-height: 1.25; }
.scopri-slide-meta { color: var(--talpa); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scopri-slide-body .badge { align-self: flex-start; margin-bottom: 2px; }
/* Badge "da remoto": la scheda non dipende dal luogo, resta anche fuori raggio. */
.scopri-slide-tag {
    align-self: flex-start;
    margin-top: 3px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(74, 111, 165, .14);
    color: var(--cobalto);
    font-size: 11.5px;
    font-weight: 700;
}
/* Nota quando dentro il raggio non cade nulla: riempie la striscia, spiega il vuoto. */
.scopri-strip-note {
    flex: 0 0 86%;
    scroll-snap-align: center;
    margin: 0;
    display: flex;
    align-items: center;
    background: var(--carta);
    border-radius: 18px;
    box-shadow: var(--shadow-lift);
    padding: 14px 16px;
    color: var(--talpa);
    font-size: 14px;
    line-height: 1.4;
}
.scopri-strip-note[hidden] { display: none; }

/* Miniatura di progetto/associazione (striscia ed elenco). Segnaposto con
   l'iniziale quando non c'è nessun logo caricato. */
.media-logo {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bianco);
    box-shadow: inset 0 0 0 1.5px var(--fuga);
}
/* contain (non cover): il logo di un'associazione va mostrato intero, non
   ritagliato. Un filo di respiro attorno perché non tocchi i bordi. */
.media-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.media-logo.is-placeholder {
    background: var(--fuga);
    color: var(--terracotta-dark);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
}
/* Nell'elenco la miniatura è un po' più piccola e il titolo cresce. */
.project-card-head { align-items: center; flex-wrap: nowrap; }
.project-card-head .media-logo { width: 46px; height: 46px; border-radius: 12px; }
.project-card-head h2 { flex: 1; min-width: 0; }

/* Segnaposto nei colori del brand (sostituisce il pin blu di Leaflet). */
.map-pin-wrap { background: none; border: 0; }
.map-pin {
    display: block;
    width: 22px; height: 22px;
    background: var(--terracotta-aa);
    border: 2.5px solid var(--bianco);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 3px 8px rgba(58, 46, 40, .35);
    margin: 3px;
}
.map-pin::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 7px; height: 7px;
    background: var(--bianco);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.leaflet-marker-icon.map-pin-wrap.is-active .map-pin { transform: rotate(-45deg) scale(1.2); box-shadow: 0 4px 12px rgba(58, 46, 40, .45); z-index: 1; }
/* Pin nel colore della categoria: è ciò che dà vita alla mappa. */
.map-pin.pin-terracotta { background: var(--terracotta); }
.map-pin.pin-cobalto    { background: var(--cobalto); }
.map-pin.pin-salvia     { background: var(--salvia); }
.map-pin.pin-ametista   { background: var(--ametista); }
.map-pin.pin-ambra      { background: var(--ambra); }

/* Bolla di raggruppamento: sostituisce più pin vicini, mostra quanti sono.
   Cerchio pieno nel colore del brand, numero bianco; l'alone la stacca dalla
   mappa. Tocco = zoom fino a separare i pin (gestito in app.js). */
.map-cluster-wrap { background: none; border: 0; }
.map-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: var(--terracotta-aa);
    color: var(--bianco);
    border: 2.5px solid var(--bianco);
    border-radius: 50%;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(58, 46, 40, .38);
    cursor: pointer;
}

/* Intestazione dell'elenco: titolo + interruttore verso la mappa. */
.scopri-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.scopri-list-head h1 { font-size: 28px; margin: 0; }
.scopri-list-head .scopri-iconbtn { box-shadow: inset 0 0 0 1.5px var(--fuga); background: var(--bianco); }

/* --- Scopri redesign: accento categoria + veste calda (scoped a .scopri) --- */
/* Card elenco: filo di colore della categoria a sinistra (come le tessere Ore). */
.scopri-list .project-card { position: relative; overflow: hidden; padding-left: 24px; }
.scopri-list .project-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: var(--cat, var(--fuga));
}
/* Striscia mappa: stesso filo a sinistra. */
.scopri-slide { position: relative; overflow: hidden; }
.scopri-slide::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: var(--cat, var(--fuga));
}
/* Con l'ordine titolo → servizio → categoria, il badge scende in fondo. */
.scopri-slide-body .badge { align-self: flex-start; margin: 3px 0 0; }

/* Colore per categoria: il filo (::before) eredita --cat dalla card/slide che ha
   la classe pc-cat-<colore>; il segnaposto del logo legge --cat/--cat-fg. */
.scopri [class*="pc-cat-"] .media-logo.is-placeholder { background: var(--cat); color: var(--cat-fg, var(--bianco)); box-shadow: none; }

/* Barra di ricerca a pillola nell'elenco: stesso stile della pillola sulla
   mappa — fondo bianco, icona interna a sinistra, bottone tondo a destra. */
.scopri-list .search-bar {
    align-items: center;
    gap: 8px;
    background: var(--bianco);
    border-radius: 999px;
    box-shadow: var(--shadow-lift);
    padding: 4px 4px 4px 16px;
}
.scopri-list .search-bar-ic { width: 20px; height: 20px; flex: none; color: var(--talpa); }
.scopri-list .search-bar .search-input {
    flex: 1; min-width: 0;
    border: none; background: transparent; box-shadow: none;
    border-radius: 0; padding: 11px 0;
}
.scopri-list .search-bar .search-input:focus,
.scopri-list .search-bar .search-input:focus-visible { outline: none; box-shadow: none; }
.scopri-list .search-bar .btn-primary { flex: none; border-radius: 999px; padding: 11px 20px; }

/* Testa della card/slide come nel mockup: logo colorato + colonna
   [categoria → titolo → servizio]. Solo dentro .scopri. */
.scopri-list .project-card-head { align-items: flex-start; gap: 12px; }
.scopri-list .project-card-headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scopri-list .project-card-headtext h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 17.5px; line-height: 1.2; margin: 0;
}
.scopri-list .project-card-meta { margin: 3px 0 0; }
.scopri-list .project-card { padding-top: 15px; padding-bottom: 15px; }

/* Badge categoria "morbido": tinta chiara + testo colorato, sopra al titolo. */
.scopri .pcat {
    display: inline-block; align-self: flex-start;
    font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    border-radius: 999px; padding: 3px 9px; margin-bottom: 4px;
    background: var(--cat-soft, rgba(226, 114, 91, .15));
    color: var(--cat-ink, var(--terracotta-dark));
}

/* Miniatura più grande e senza bordo grigio nell'elenco (tessera piena). */
.scopri-list .project-card-head .media-logo { width: 48px; height: 48px; border-radius: 13px; }
.scopri .media-logo.is-placeholder { box-shadow: none; }

/* Striscia: colonna in alto a sx (categoria → titolo → servizio). */
.scopri-slide { align-items: flex-start; }
.scopri-slide-title { font-family: var(--font-display); font-weight: 700; }
.scopri-slide-body .pcat { margin-bottom: 3px; }

/* Testata Scopri: titolo + conteggio + segmentato Mappa/Elenco. */
.scopri-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 0 12px; }
.scopri-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; margin: 0; }
.scopri-count { color: var(--talpa); font-size: 13.5px; margin: 3px 0 0; }
.scopri-seg { display: flex; flex: none; background: rgba(58, 46, 40, .06); border-radius: 999px; padding: 3px; gap: 2px; }
.scopri-seg-btn {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--talpa);
    padding: 8px 13px; border-radius: 999px;
    display: flex; align-items: center; gap: 6px;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.scopri-seg-btn svg { width: 15px; height: 15px; }
.scopri[data-view="map"]  .scopri-seg-btn[data-view="map"],
.scopri[data-view="list"] .scopri-seg-btn[data-view="list"] {
    background: var(--bianco); color: var(--caffe); box-shadow: 0 1px 3px rgba(58, 46, 40, .14);
}

/* Avviso preferenze in stile "banner cookie": barra fissa in basso. */
.pref-banner {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 60;
    background: var(--caffe);
    color: var(--bianco);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.pref-banner-text { flex: 1; min-width: 180px; }
.pref-banner-text strong { display: block; }
.pref-banner-text span { color: rgba(255, 255, 255, .82); font-size: 14px; }
.pref-banner-actions { display: flex; align-items: center; gap: 8px; }
.pref-banner-actions .btn-text { color: rgba(255, 255, 255, .82); }

/* Recapiti pubblici dell'associazione (dettaglio progetto): pulsanti chiari,
   il telefono per primo per chi vuole un primo contatto a voce. */
.assoc-contacts { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.assoc-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 48px;
    border-radius: 14px;
    background: var(--bianco);
    box-shadow: inset 0 0 0 1.5px var(--fuga);
    color: var(--caffe);
    text-decoration: none;
    font-weight: 600;
    word-break: break-all;
}
.assoc-contact:hover { box-shadow: inset 0 0 0 1.5px var(--terracotta); color: var(--terracotta-dark); }
.assoc-contact svg { width: 22px; height: 22px; flex: none; color: var(--terracotta-dark); }
.contact-referent { font-weight: 600; margin: 0 0 4px; color: var(--caffe); }

/* Referente del progetto (form admin): la spunta "come l'associazione" nasconde
   i campi in CSS puro (nessun JS, che la CSP bloccherebbe). Checkbox e campi
   sono fratelli diretti perché funzioni il selettore ~. */
.referent-check { width: 18px; height: 18px; vertical-align: middle; margin-right: 8px; accent-color: var(--terracotta-aa); }
.referent-label { font-weight: 600; cursor: pointer; }
.referent-fields { margin-top: 16px; }
.referent-check:checked ~ .referent-fields { display: none; }

/* Form progetto come percorso guidato: ogni card è un passo numerato con una
   riga che ne spiega lo scopo. Il numero dà il senso di sequenza e progresso,
   invece del "muro di campi" tutto uguale. */
.form-step-head { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.form-step-num {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--terracotta-aa); color: var(--bianco);
    border-radius: 50%; font-weight: 700; font-size: 15px;
}
.form-step-head h2 { margin: 0; }
.form-step-intro { margin: 0 0 18px 42px; color: var(--talpa); font-size: 14px; line-height: 1.4; }
@media (max-width: 640px) { .form-step-intro { margin-left: 0; } }

/* Blocco "facoltativo" richiudibile: raccoglie ciò che affina ma non serve per
   partire, così il form essenziale resta corto. details nativo = zero JS. */
.form-more { padding-top: 4px; padding-bottom: 4px; }
.form-more > summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    font-size: 19px; font-weight: 700; color: var(--caffe);
    padding: 12px 0;
}
.form-more > summary::-webkit-details-marker { display: none; }
.form-more-badge {
    font-size: 12px; font-weight: 600;
    color: var(--talpa);
    background: var(--fuga);
    border-radius: 999px;
    padding: 3px 10px;
}
.form-more > summary .chev { width: 22px; height: 22px; margin-left: auto; color: var(--talpa); transition: transform .2s ease; }
.form-more[open] > summary .chev { transform: rotate(180deg); }
.form-more[open] > summary { margin-bottom: 6px; }
.form-more-hint { color: var(--talpa); font-size: 14px; line-height: 1.4; margin: 0 0 18px; }
.form-more-sub { font-weight: 700; font-size: 16px; color: var(--caffe); margin: 22px 0 4px; }

/* Ufficio finanziatore a cascata: combobox con ricerca digitando. Ogni livello
   è un input filtrante con la sua lista a comparsa (riusa .geo-suggestions). */
.funding-current { font-size: 14px; color: var(--caffe); margin: 4px 0 10px; }
.funding-slots { display: flex; flex-direction: column; gap: 12px; }
.combo { position: relative; }
.combo > label { display: block; font-size: 14px; font-weight: 600; color: var(--talpa); margin-bottom: 4px; }
.combo-input { width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; color: var(--caffe); background: var(--bianco); border: 1.5px solid var(--fuga); border-radius: var(--radius-field); }
.combo-input:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(226,114,91,.18); }
.combo-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 4px 0 0; max-height: 240px; overflow-y: auto; box-shadow: var(--shadow-card); }
.combo-list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14.5px; color: var(--caffe); }
.combo-list li:hover { background: rgba(226, 114, 91, .1); color: var(--terracotta-dark); }
.combo-list .combo-none, .combo-list .combo-none:hover { color: var(--talpa); cursor: default; background: none; }
.funding-preview { margin: 12px 0 0; }
.funding-preview a { color: var(--cobalto); font-weight: 600; }

/* "Non trovi il tuo ufficio?": link discreto + pannellino inline (AJAX). */
.office-missing { margin-top: 14px; }
.office-missing-toggle { color: var(--talpa); font-weight: 600; padding: 0; }
.office-missing-toggle:hover { color: var(--terracotta); }
.office-missing-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.office-missing-panel textarea { width: 100%; min-height: 64px; padding: 10px 12px; font: inherit; color: var(--caffe); background: var(--bianco); border: 1.5px solid var(--fuga); border-radius: var(--radius-field); resize: vertical; }
.office-missing-panel textarea:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(226,114,91,.18); }

/* Gestione uffici (super-admin): righe con form inline. */
.office-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.office-row input[type="text"], .office-row select { min-height: 42px; padding: 8px 10px; font: inherit; color: var(--caffe); background: var(--bianco); border: 1.5px solid var(--fuga); border-radius: var(--radius-field); flex: 1 1 140px; min-width: 0; }
.office-row .office-code { flex: 0 0 90px; }
.office-active { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--talpa); flex: 0 0 auto; white-space: nowrap; }
.office-active input { accent-color: var(--terracotta-aa); }
.office-del { margin: 0 0 16px; }
.office-add { margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed var(--fuga); }
.office-row-wide input[type="text"], .office-row-wide select { flex: 1 1 120px; }

.office-req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.office-req { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(232,161,61,.1); border-radius: var(--radius-admin); }
.office-req-from { font-size: 13px; color: var(--talpa); font-weight: 600; }
.office-req-msg { margin: 4px 0 0; color: var(--caffe); }

.side-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; background: var(--terracotta-aa); color: var(--bianco); border-radius: 999px; font-size: 12px; font-weight: 700; }

/* Scheda pubblica dell'associazione: logo grande, nome, città. */
.assoc-hero { text-align: center; padding: 8px 2px 14px; }
.assoc-hero-logo {
    display: inline-grid; place-items: center;
    width: 88px; height: 88px;
    margin: 0 auto 12px;
    border-radius: 22px;
    background: var(--bianco);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
}
.assoc-hero-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.assoc-hero-logo.is-placeholder {
    background: var(--carta);
    font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--cobalto);
}
.assoc-hero h1 { margin: 0 0 2px; }

/* Presentazione del volontario nella richiesta di iscrizione (lato assoc.). */
.approval-intro {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--carta);
    border-left: 3px solid var(--terracotta);
    border-radius: 8px;
    color: var(--caffe);
    font-size: 14.5px;
}

/* Grafico ore per mese (dashboard volontario): SVG, colori del brand. */
.chart-card { margin-bottom: 14px; }
.chart-title { font-size: 18px; margin: 0 0 12px; }
.chart-hours { display: block; width: 100%; height: auto; overflow: visible; }
.chart-axis { stroke: var(--fuga); stroke-width: 1.5; }
.chart-bar { fill: var(--terracotta); }
.chart-bar.is-current { fill: var(--terracotta-dark); }   /* il mese in corso spicca */
.chart-bar-empty { fill: var(--fuga); }                    /* mese a zero: solo un accenno */
.chart-value { fill: var(--terracotta-dark); font-size: 11px; font-weight: 700; }
.chart-label { fill: var(--talpa); font-size: 11px; font-weight: 600; }
.chart-note { margin: 10px 0 0; }

/* Home cabina di comando: pastiglie KPI + movimento misurato. */
.app-hero-tight { padding: 8px 2px 12px; }
.kpi-row { display: flex; gap: 10px; margin-bottom: 14px; }
.kpi {
    flex: 1;
    background: var(--bianco);
    border-radius: 16px;
    padding: 14px 8px 12px;
    text-align: center;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--caffe);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: transform .16s ease, box-shadow .16s ease;
}
a.kpi:active { transform: scale(.985); box-shadow: var(--shadow-card); }
.kpi-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--carta); }
.kpi-ic svg { width: 19px; height: 19px; }
.ic-terra { background: var(--terracotta); color: var(--bianco); }
.ic-cobalto { background: var(--cobalto); color: var(--bianco); }
.ic-salvia { background: var(--salvia); color: var(--bianco); }

/* Card "Le tue associazioni" (home): avatar colorato + ore per ente. */
.home-assoc { margin-bottom: 14px; }
.home-assoc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.home-assoc-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0; }
.home-assoc-head a { font-size: 13px; font-weight: 600; color: var(--terracotta-dark); text-decoration: none; }
.home-assoc-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--fuga); }
.home-assoc-row:first-of-type { border-top: 0; }
.home-assoc-av { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--bianco); font-family: var(--font-display); font-weight: 700; }
.home-assoc-n { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-assoc-h { flex: none; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.home-assoc-h small { color: var(--talpa); font-weight: 600; font-size: 12px; }
.kpi-v { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-l { font-size: 11.5px; font-weight: 600; color: var(--talpa); }

/* Comparsa misurata delle pastiglie. */
.kpi-anim .kpi { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.kpi-anim.play .kpi { opacity: 1; transform: none; }
.kpi-anim.play .kpi:nth-child(2) { transition-delay: .06s; }
.kpi-anim.play .kpi:nth-child(3) { transition-delay: .12s; }

/* Barre del grafico che crescono dal basso (solo con JS; senza, sono già piene). */
.chart-bar.grow { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
#hours-chart.play .chart-bar.grow { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
    .kpi-anim .kpi { opacity: 1; transform: none; transition: none; }
    .chart-bar.grow { transform: none; transition: none; }
}

/* Avviso richiesta di iscrizione in attesa (home). */
.pending-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: rgba(232, 161, 61, .14);
    font-size: 14.5px;
}
.pending-note-ic { flex: none; color: var(--ambra-dark); }
.pending-note-ic svg { width: 20px; height: 20px; }

/* --------------------------------------------------------- ricerca IA guidata
   Bivio "guidami / scrivo io" e percorso a domande. Uno schermo alla volta:
   il contenuto è protagonista, i controlli restano quieti. */
.ai-screen[hidden] { display: none; }
.ai-screen { animation: ai-in .32s ease both; }
@keyframes ai-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ai-screen { animation: none; } }

.ai-q { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.18; margin: 2px 0 4px; }
.ai-hint { color: var(--talpa); font-size: 14px; margin: 0 0 18px; }

/* Bivio: due carte, tocco pieno. */
.ai-pick { display: flex; flex-direction: column; gap: 14px; }
.ai-pcard {
    display: flex; align-items: center; gap: 14px;
    width: 100%; text-align: left;
    background: var(--bianco); border: 1.5px solid var(--fuga);
    border-radius: 18px; padding: 16px;
    cursor: pointer; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.ai-pcard:hover { border-color: var(--terracotta); box-shadow: var(--shadow-lift); }
.ai-pcard:active { transform: scale(.985); }
.ai-pic { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; }
.ai-pic svg { width: 25px; height: 25px; }
.ai-pic-t { background: rgba(226, 114, 91, .14); color: var(--terracotta-dark); }
.ai-pic-c { background: rgba(74, 111, 165, .14); color: var(--cobalto); }
.ai-pt { min-width: 0; }
.ai-pt b { display: block; font-size: 16.5px; color: var(--caffe); }
.ai-pt small { color: var(--talpa); font-size: 13px; }
.ai-reco {
    margin-left: auto; align-self: flex-start; flex: none;
    background: var(--salvia-dark); color: var(--bianco);
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
}

/* Pallini di avanzamento. */
.ai-dots { display: flex; gap: 6px; margin: 0 0 14px; }
.ai-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--fuga); transition: width .3s ease, background-color .3s ease; }
.ai-dots span.on { width: 20px; background: var(--terracotta); }

/* Chip di risposta. */
.ai-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.ai-chip {
    border: 1.5px solid var(--fuga); background: var(--bianco); color: var(--caffe);
    border-radius: 14px; padding: 11px 15px;
    font-family: inherit; font-size: 14.5px; font-weight: 600;
    cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.ai-chip:hover { border-color: var(--terracotta); }
.ai-chip:active { transform: scale(.96); }
.ai-chip.sel { background: var(--terracotta-aa); border-color: var(--terracotta-aa); color: var(--bianco); }

.ai-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-back { padding: 10px 4px; }
.ai-nav [data-next] { min-height: 46px; padding: 10px 26px; }

.ai-review-title { margin-top: 2px; }

/* ------------------------------------------------ profilo a schede (statistiche)
   Controllo segmentato in stile app: la scheda Statistiche è la prima cosa che
   si vede, i form si ritirano dietro le altre due schede. */
.seg-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin: 0 0 18px;
    background: rgba(58, 46, 40, .06);
    border-radius: 999px;
}
.seg-tab {
    flex: 1;
    min-height: 42px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--talpa);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.seg-tab svg { width: 16px; height: 16px; }
.seg-tab.is-active {
    background: var(--bianco);
    color: var(--caffe);
    box-shadow: 0 1px 3px rgba(58, 46, 40, .14);
}
/* Con JS attivo, il titolo interno della scheda è ridondante con la linguetta. */
.profile-tabs.tabs-on .panel-title { display: none; }
.profile-panel[hidden] { display: none; }
.profile-panel { animation: ai-in .28s ease both; }
@media (prefers-reduced-motion: reduce) { .profile-panel { animation: none; } }
/* Ritmo verticale fra i blocchi impilati: prima erano troppo attaccati (le card
   non hanno margine proprio). Un respiro uniforme fra tutti i figli diretti. */
.profile-panel > * + * { margin-top: 16px; }
.profile-panel .kpi-row { margin-bottom: 0; }   /* evita il doppio spazio col margine sopra */
.profile-panel .profile-dati { margin-top: 20px; }

/* Card di statistica: etichetta discreta sopra il contenuto. */
.stat-card-label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--talpa);
}
.stat-chart-card, .stat-assoc-card { padding: 16px; }

/* Ore per associazione: una riga per ente, ore confermate in evidenza. */
.stat-assoc-list { list-style: none; margin: 0; padding: 0; }
.stat-assoc {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--fuga);
}
.stat-assoc:first-child { border-top: none; }
.stat-assoc-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-assoc-hours { flex: none; text-align: right; }
.stat-assoc-hours strong { font-family: var(--font-display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.stat-assoc-pending { display: block; font-size: 12.5px; color: var(--ambra-dark); }

/* --- Profilo redesign: hero avatar, statistiche, assaggio traguardi, Esci --- */
/* Avatar in header (accesso al profilo, al posto della scritta "Esci"). */
.header-avatar {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border-radius: 999px;
    color: var(--talpa);
    background: rgba(58, 46, 40, .06);
    transition: color .15s ease, box-shadow .15s ease;
}
.header-avatar svg { width: 21px; height: 21px; }
.header-avatar.is-active { color: var(--terracotta-aa); box-shadow: 0 0 0 2px var(--terracotta-aa); }

/* Testata della pagina: tessera calda con iniziali + nome + pallini associazioni. */
.profile-hero { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.profile-avatar {
    width: 62px; height: 62px; flex: none;
    border-radius: 20px;
    background: radial-gradient(120% 120% at 30% 20%, #f0916f, var(--terracotta));
    color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 24px;
    display: grid; place-items: center;
    box-shadow: 0 8px 20px -8px rgba(226, 114, 91, .6);
}
.profile-avatar.is-icon svg { width: 30px; height: 30px; }
.profile-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profile-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; }
.profile-nick { color: var(--talpa); font-size: 14px; }
.profile-dots { display: flex; gap: 5px; margin-top: 3px; }
.profile-dots span { width: 13px; height: 13px; border-radius: 5px; }

/* Eroe scuro "il tuo impegno". */
.pstat-hero { background: radial-gradient(120% 100% at 20% 0%, var(--scuro), var(--caffe)); color: var(--su-scuro); border-radius: 18px; padding: 18px; }
.pstat-hero-label { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--su-scuro-muted); }
.pstat-hero-big { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.pstat-hero-big small { font-size: 18px; color: var(--su-scuro-muted); font-weight: 600; }
.pstat-kpis { display: flex; gap: 20px; margin-top: 12px; }
.pstat-kpi { display: flex; flex-direction: column; }
.pstat-kpi b { font-family: var(--font-display); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.pstat-kpi span { font-size: 11.5px; color: var(--su-scuro-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Ore per associazione: barra nel colore dell'ente, a scatti di 10%. */
.pstat-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.pstat-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pstat-bar-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstat-bar-h { flex: none; text-align: right; }
.pstat-bar-h strong { font-family: var(--font-display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.pstat-bar-track { height: 9px; border-radius: 99px; background: rgba(58, 46, 40, .08); overflow: hidden; }
.pstat-bar-fill { display: block; height: 100%; border-radius: 99px; width: 0; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.pstat-bar-fill[data-fill="1"]  { width: 10%; }
.pstat-bar-fill[data-fill="2"]  { width: 20%; }
.pstat-bar-fill[data-fill="3"]  { width: 30%; }
.pstat-bar-fill[data-fill="4"]  { width: 40%; }
.pstat-bar-fill[data-fill="5"]  { width: 50%; }
.pstat-bar-fill[data-fill="6"]  { width: 60%; }
.pstat-bar-fill[data-fill="7"]  { width: 70%; }
.pstat-bar-fill[data-fill="8"]  { width: 80%; }
.pstat-bar-fill[data-fill="9"]  { width: 90%; }
.pstat-bar-fill[data-fill="10"] { width: 100%; }

/* Assaggio traguardi: tessere reali + conteggio. */
.pbadges { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--caffe); }
.pbadges-thumbs { display: flex; flex: none; }
.pbadges-thumb { width: 40px; height: 40px; }
.pbadges-thumb + .pbadges-thumb { margin-left: -14px; }
.pbadges-thumb svg { width: 40px; height: 40px; display: block; }
.pbadges-thumb.is-locked svg { filter: grayscale(1); opacity: .55; }
.pbadges-text { display: flex; flex-direction: column; min-width: 0; }
.pbadges-text b { font-family: var(--font-display); font-weight: 700; }
.pbadges-text .muted { font-size: 13px; color: var(--talpa); }
.pbadges-count { margin-left: auto; flex: none; font-family: var(--font-display); font-weight: 700; color: var(--talpa); }

/* Esci: azione di uscita in fondo alla pagina, non un primario. */
.profile-logout { margin-top: 20px; }
.btn-logout { background: var(--bianco); color: var(--corallo-dark); box-shadow: inset 0 0 0 1.5px rgba(201, 79, 79, .35); }
.btn-logout:hover { background: rgba(201, 79, 79, .06); color: var(--corallo-dark); }
@media (prefers-reduced-motion: reduce) { .pstat-bar-fill { transition: none; } }

/* ------------------------------------------------------------ operatori (admin)
   Elenco a card (nome + email + capacità come chip) e form con le spunte. */
.operator-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.operator-info { min-width: 0; }
.operator-info h2 { margin: 0 0 2px; font-size: 19px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.operator-caps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.cap-chip {
    background: rgba(74, 111, 165, .12);
    color: var(--cobalto);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
}
.operator-email-static { margin: 0; font-weight: 600; color: var(--caffe); }
/* Colonna di caselle (progetti da assegnare): una per riga, più leggibile. */
.check-col { display: flex; flex-direction: column; gap: 8px; }
.check-col .check-pill { width: 100%; }

/* Pulsante disattivato per mancanza di permesso: grigio, lucchetto, non porta
   a una "porta chiusa" (403). È uno <span>, quindi non fa nulla al clic. */
.btn.is-locked, .btn-text.is-locked {
    opacity: .5;
    cursor: not-allowed;
}
.btn-text.is-locked { display: inline-flex; align-items: center; gap: 5px; color: var(--talpa); }
.btn.is-locked svg, .btn-text.is-locked svg { width: 16px; height: 16px; flex: none; }

/* Badge premium: pillola ambra con corona. Segnala una funzione a pagamento. */
.premium-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(232, 161, 61, .16);
    color: var(--ambra-dark);
    font-size: 12px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px;
}
.premium-badge svg { width: 14px; height: 14px; flex: none; }
.premium-badge-nav { margin-left: auto; padding: 2px; background: transparent; }
.premium-badge-nav svg { width: 17px; height: 17px; }
.premium-badge-lg { font-size: 13px; padding: 5px 12px; }
.premium-badge-lg svg { width: 16px; height: 16px; }

/* Pagina "funzione premium": spiega e invita a chiedere l'attivazione. */
.upgrade-card { text-align: center; max-width: 540px; margin: 0 auto; }
.upgrade-card .premium-badge-lg { margin-bottom: 6px; }
.upgrade-title { font-size: 24px; margin: 8px 0 6px; }
.upgrade-desc { color: var(--talpa); font-size: 16px; margin: 0 0 14px; }
.upgrade-note { background: rgba(232, 161, 61, .10); border-radius: 10px; padding: 10px 14px; text-align: left; }
.upgrade-card form { margin: 18px 0 8px; }

/* Honeypot anti-spam: fuori schermo (non display:none, che alcuni bot fiutano).
   Un utente non lo vede né ci arriva col tab; un bot lo compila e viene scartato. */
.hp-trap { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* "parte di [associazione madre]" sotto il nome di un'unità operativa. */
.unit-parent { margin: 4px 0 0; font-size: 14px; color: var(--talpa); }
.unit-parent a { font-weight: 600; color: var(--terracotta-dark); }

/* ==========================================================================
   Firme dei volontari (Fase A). Teaser home, pagina firma (canvas),
   richiesta e regime lato associazione.
   ========================================================================== */
.section-label { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--talpa); margin: 18px 0 10px; font-weight: 700; }

/* Teaser in home volontario */
.sign-teaser { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--caffe); margin-bottom: 14px; background: rgba(232,161,61,.12); border-color: rgba(232,161,61,.35); }
.sign-teaser:hover { color: var(--caffe); }
.sign-teaser-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--ambra); color: var(--bianco); display: grid; place-items: center; }
.sign-teaser-ic svg { width: 22px; height: 22px; }
.sign-teaser-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sign-teaser-body strong { font-family: var(--font-display); font-size: 16px; }
.sign-teaser-body span { font-size: 13.5px; color: var(--talpa); }
.sign-teaser-cta { flex: none; font-size: 22px; color: var(--ambra-dark); }

/* Elenco firme (pending / done) */
.sign-list { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 10px; }
.sign-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; color: var(--caffe); }
a.sign-item:hover { color: var(--caffe); border-color: var(--terracotta-aa); }
.sign-item-body { display: flex; flex-direction: column; gap: 3px; }
.sign-item-project { font-size: 16px; }
.sign-item-meta { font-size: 13px; color: var(--talpa); }
.sign-item-action { flex: none; font-weight: 700; color: var(--terracotta-aa); }
.sign-item.is-done { opacity: 1; }
.sign-item-done-mark { display: flex; align-items: center; gap: 6px; color: var(--salvia-dark); font-size: 13px; }
.sign-item-done-mark svg { width: 22px; height: 22px; }

/* Riepilogo da firmare */
.sign-summary { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sign-summary th, .sign-summary td { padding: 8px 6px; border-bottom: 1px solid rgba(58,46,40,.10); text-align: left; font-size: 14px; }
.sign-summary tfoot th, .sign-summary tfoot td { border-bottom: none; border-top: 2px solid rgba(58,46,40,.20); }
.ta-right { text-align: right; }

/* Firma: dichiarazione + apertura del riquadro a tutto schermo */
.sign-declaration { font-size: 13.5px; color: var(--talpa); margin: 6px 0 14px; }

/* Overlay di firma a tutto schermo */
.sign-fs { position: fixed; inset: 0; z-index: 1000; background: var(--carta); display: flex; flex-direction: column; }
.sign-fs[hidden] { display: none; }
.sign-fs-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(58,46,40,.12); font-weight: 700; font-size: 16px; }
.sign-fs-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--caffe); padding: 0 6px; }
/* Bordo tratteggiato di confine dell'area di firma: outline con offset negativo
   (non altera le dimensioni del canvas, quindi non sfasa il tocco). */
.sign-fs-canvas { flex: 1; width: 100%; min-height: 0; background: #fff; touch-action: none; cursor: crosshair; display: block; outline: 2px dashed rgba(58,46,40,.35); outline-offset: -16px; }
.sign-fs-rotate { display: none; margin: 0; padding: 8px 18px; font-size: 13px; color: var(--talpa); background: rgba(226,114,91,.08); text-align: center; }
@media (orientation: portrait) { .sign-fs-rotate { display: block; } }
.sign-fs-foot { display: flex; gap: 12px; padding: 14px 18px; border-top: 1px solid rgba(58,46,40,.12); }
.sign-fs-foot .btn { flex: 1; margin: 0; }
.sign-fs-clear { flex: 1; background: #fff; border: 1px solid rgba(58,46,40,.22); border-radius: 999px; font-size: 15px; color: var(--caffe); cursor: pointer; padding: 10px; }
.sign-fs-clear:hover { border-color: var(--terracotta-aa); color: var(--terracotta-aa); }
body.sign-fs-open { overflow: hidden; }

/* Richiesta firme + regime (lato associazione) */
.sign-request { margin-bottom: 16px; }
.regime-choice { border: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.regime-choice legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; padding: 0; }
.regime-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid rgba(58,46,40,.16); border-radius: 12px; cursor: pointer; }
.regime-opt:has(input:checked) { border-color: var(--terracotta-aa); background: rgba(226,114,91,.06); }
.regime-opt input { margin-top: 3px; flex: none; }
.regime-opt-body { display: flex; flex-direction: column; gap: 2px; }
.regime-opt-body strong { font-size: 14.5px; }
.regime-opt-body span { font-size: 13px; color: var(--talpa); }

/* Segno "firmata" nello storico ore (flusso per turno) */
.hour-signed { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--salvia-dark); font-weight: 600; }
.hour-signed svg { width: 16px; height: 16px; }

/* Stato firma nella lista volontari */
.sign-status-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.sign-status { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(58,46,40,.08); color: var(--talpa); }
.sign-status.is-signed { background: rgba(61,139,125,.14); color: var(--salvia-dark); }
.sign-status.is-pending { background: rgba(226,114,91,.12); color: var(--terracotta-aa); }
.sign-status.is-invalidated { background: rgba(197,67,38,.12); color: var(--corallo-dark); }

/* Azioni nell'intestazione PWA: selettore lingua + logout affiancati */
.app-header-actions { display: flex; align-items: center; gap: 14px; }
.app-header-actions .lang-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.app-header-actions .lang-switch a { color: var(--talpa); text-decoration: none; }
.app-header-actions .lang-switch a.is-active { color: var(--terracotta-aa); }

/* ==========================================================================
   Pagina Ore — redesign: mosaico del mese, tessera che si riempie nel turno,
   registrazione Timbra/A mano, storico per mese. (namespaced .ore-*)
   ========================================================================== */
.control{width:100%;font:inherit;color:var(--caffe);background:var(--carta);border:1.5px solid rgba(58,46,40,.14);border-radius:12px;padding:12px 13px}
.control:focus-visible{outline:2px solid var(--cobalto);outline-offset:1px;border-color:transparent}
select.control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5D51' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
.btn-go{background:var(--salvia);color:#fff}
.btn-go:hover{background:var(--salvia-dark)}

/* Eroe: il tuo mosaico (unico colpo scuro) */
.ore-mosaic{background:radial-gradient(120% 100% at 20% 0%, var(--scuro) 0%, var(--caffe) 60%);color:var(--su-scuro);border-radius:20px;padding:20px 18px 18px;margin-bottom:16px}
.ore-eyebrow{font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--su-scuro-muted);margin:0}
.ore-figure{display:flex;align-items:baseline;gap:8px;margin:2px 0}
.ore-n{font-family:var(--font-display);font-weight:700;font-size:56px;line-height:.95;letter-spacing:-.02em}
.ore-u{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--su-scuro-muted)}
.ore-mtag{margin:0 0 14px;font-size:14px;color:var(--su-scuro-muted)}
.ore-mtag-empty{margin-top:10px}
.ore-tiles{display:grid;grid-template-columns:repeat(auto-fill,22px);gap:6px;justify-content:start}
/* Colori-associazione via CLASSE (la CSP style-src 'self' scarta lo style inline).
   Usati da tessere, pallini legenda, filo delle righe e tessera in riempimento. */
.oc-terracotta{background:var(--terracotta)}
.oc-ambra{background:var(--ambra)}
.oc-cobalto{background:var(--cobalto)}
.oc-salvia{background:var(--salvia)}
.oc-ametista{background:var(--ametista)}
.ore-tile{width:22px;height:22px;border-radius:7px;animation:orepop .4s cubic-bezier(.2,.8,.2,1) both}
.ore-tile.is-empty{background:rgba(243,236,225,.07);animation:none}
@keyframes orepop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.ore-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px}
.ore-li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--su-scuro)}
.ore-dot{width:11px;height:11px;border-radius:4px;flex:none}
.ore-li small{color:var(--su-scuro-muted);font-variant-numeric:tabular-nums}
.ore-year{margin:14px 0 0;font-size:13px;color:var(--su-scuro-muted)}

/* Turno in corso */
.ore-mosaic.is-running{text-align:left}
.ore-clock{font-family:var(--font-display);font-weight:700;font-size:40px;letter-spacing:-.01em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.ore-live{display:flex;align-items:center;gap:16px;margin:8px 0 2px}
.ore-live-tile{width:88px;height:88px;flex:none;border-radius:20px;background:rgba(243,236,225,.09);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(243,236,225,.16)}
.ore-live-fill{position:absolute;left:0;right:0;bottom:0;height:0;transition:height .5s linear}
.ore-live-tile.done{animation:oredone .5s ease}
@keyframes oredone{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.ore-run-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ore-ghost{appearance:none;border:0;background:transparent;color:var(--su-scuro-muted);font-family:var(--font-display);font-weight:600;font-size:14px;padding:8px;cursor:pointer}
.ore-ghost:hover{color:var(--su-scuro)}

.ore-foot{display:flex;align-items:center;gap:7px;justify-content:center;color:var(--talpa);font-size:12.5px;margin:10px 0 0}
.ore-foot svg{width:15px;height:15px;flex:none}

/* Registra: segmento Timbra / A mano */
.ore-record{margin-bottom:16px}
.ore-seg{display:flex;background:rgba(58,46,40,.06);border-radius:999px;padding:3px;gap:2px;margin-bottom:14px}
.ore-seg button{flex:1;appearance:none;border:0;background:transparent;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--talpa);padding:9px 12px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.ore-seg button svg{width:16px;height:16px}
.ore-seg button[aria-selected="true"]{background:#fff;color:var(--caffe);box-shadow:0 1px 3px rgba(58,46,40,.14)}
.ore-mode{display:none;flex-direction:column;gap:14px}
.ore-record[data-mode="timer"] .ore-mode[data-mode="timer"],
.ore-record[data-mode="manual"] .ore-mode[data-mode="manual"]{display:flex}

/* Storico per mese */
.ore-history{display:flex;flex-direction:column;gap:12px}
.ore-history h2{font-family:var(--font-display);font-weight:700;font-size:19px;margin:6px 2px 0}
.ore-mhead{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px;margin-bottom:6px}
.ore-m{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--talpa);text-transform:uppercase;letter-spacing:.04em}
.ore-live-lbl{color:var(--salvia-dark)}
.ore-tot{font-family:var(--font-display);font-weight:700;color:var(--caffe);font-variant-numeric:tabular-nums}
.ore-past{background:#fff;border:1px solid rgba(58,46,40,.10);border-radius:14px;overflow:hidden}
.ore-past>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px}
.ore-past>summary::-webkit-details-marker{display:none}
.ore-past summary .ore-m{font-size:15px;text-transform:none;letter-spacing:0}
.ore-summary-right{display:flex;align-items:center;gap:10px;color:var(--talpa)}
.ore-summary-right b{font-family:var(--font-display);color:var(--caffe);font-variant-numeric:tabular-nums}
.ore-chev{width:18px;height:18px;transition:transform .2s}
.ore-past[open] summary .ore-chev{transform:rotate(180deg)}
.ore-past-body{padding:0 8px 8px}
.ore-rows{display:flex;flex-direction:column;gap:8px}

.ore-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(58,46,40,.10);border-radius:14px;padding:11px 13px}
.ore-month-cur .ore-row{box-shadow:0 1px 3px rgba(58,46,40,.05)}
.ore-accent{width:4px;align-self:stretch;border-radius:4px;flex:none}
.ore-row-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ore-amt{font-family:var(--font-display);font-weight:700;font-size:16px}
.ore-what{font-size:13.5px;color:var(--caffe);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ore-when{font-size:12.5px;color:var(--talpa);font-variant-numeric:tabular-nums}
.ore-reason{font-size:12.5px;color:var(--corallo-dark);margin-top:2px}
.ore-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.ore-pill{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.ore-pill-confirmed{background:rgba(61,139,125,.14);color:var(--salvia-dark)}
.ore-pill-pending{background:rgba(232,161,61,.18);color:var(--ambra-dark)}
.ore-pill-rejected{background:rgba(201,79,79,.14);color:var(--corallo-dark)}
.ore-tosign{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--terracotta-dark);text-decoration:none}
.ore-signed{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--salvia-dark)}
.ore-tosign svg,.ore-signed svg{width:15px;height:15px}

/* Selettore lingua a tendina — header condiviso (app, admin, pubblico) */
.langsel{position:relative}
.langsel>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--caffe);background:rgba(58,46,40,.06);border-radius:999px;padding:7px 12px}
.langsel>summary::-webkit-details-marker{display:none}
.langsel>summary svg{width:14px;height:14px;transition:transform .2s}
.langsel[open]>summary svg{transform:rotate(180deg)}
.langsel>summary:focus-visible{outline:2px solid var(--cobalto);outline-offset:1px}
.langsel-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;background:#fff;border:1px solid rgba(58,46,40,.12);border-radius:12px;box-shadow:0 10px 30px -10px rgba(58,46,40,.35);padding:5px;display:flex;flex-direction:column;min-width:78px}
.langsel-menu a{text-decoration:none;color:var(--caffe);font-family:var(--font-display);font-weight:600;font-size:14px;padding:8px 12px;border-radius:8px}
.langsel-menu a:hover{background:rgba(58,46,40,.06)}
.langsel-menu a.on{color:var(--terracotta-dark);background:rgba(226,114,91,.08)}

/* ---------------------------------------------------- condivisione */
.share-row { max-width: 760px; margin: 6px 0 4px; }
.share-row .btn { width: 100%; }
.share-badges { margin-top: 12px; }
.btn.is-copied { color: var(--salvia-dark); }

/* Scheda progetto pubblica (link condiviso, senza login). */
.pub-project { max-width: 640px; margin: 0 auto; }
.pub-project-face { color: var(--talpa); font-weight: 700; margin: 0 0 4px; }
.pub-project-title { font-size: 28px; margin: 0 0 10px; }
.pub-project-meta { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.pub-project-meta li { background: var(--fuga); color: var(--caffe); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.pub-project-desc { line-height: 1.55; color: var(--caffe); white-space: normal; margin-bottom: 22px; }
.pub-project-cta { text-align: center; }
.pub-project-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }