/* Portale Soci SOGNI APS · palette e font del sito associazionesogni.com. */
@font-face {
  font-family: "Baloo Tamma 2";
  src: url("fonts/baloo-tamma-2.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("fonts/mulish.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  /* la palette del sito, nell'ordine dei progetti: rosa → lilla → azzurro → verde acqua */
  --rosa-chiaro: #ffc3da;
  --rosa: #ffafcc;
  --lilla-chiaro: #cdb4db;
  --lilla: #b38dc8;
  --azzurro-chiaro: #bde0fe;
  --azzurro: #a2d2ff;
  --verde-chiaro: #9bcec8;
  --verde: #53afa6;
  /* giallo scelto con Samuele il 24/10, per ora solo sulla tessera */
  --giallo-chiaro: #ffe8a3;
  --giallo: #ffd166;
  --pesca-chiaro: #ffd8c4;
  --pesca: #ffb899;
  --nero: #1a1a1a;
  /* versioni più scure per testi e bordi, leggibili sul bianco */
  --lilla-testo: #6f4a8a;
  --verde-testo: #2f7d75;
  --rosso: #c0395e;
  --rosso-chiaro: #fde0e8;

  --bg: #ffffff;
  --fg: var(--nero);
  --muted: #5b5563;
  --card: #ffffff;
  --border: #ebe4f0;
  --soft: #f7f2fa;
  --shadow: 0 6px 18px rgba(70, 40, 90, .09);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17141b;
    --fg: #f3eef6;
    --muted: #b7adbf;
    --card: #221d28;
    --border: #3a3242;
    --soft: #2a2331;
    --shadow: 0 6px 18px rgba(0, 0, 0, .35);
    --lilla-testo: #d2b6e6;
    --verde-testo: #8fd6cd;
    --rosso-chiaro: #4a2532;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.55 "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3 {
  font-family: "Baloo Tamma 2", "Mulish", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin: .8em 0 .4em;
}
h1 { font-size: 2rem; text-align: center; }
h2 { font-size: 1.45rem; color: var(--lilla-testo); }
h3 { font-size: 1.2rem; }
a { color: inherit; text-decoration-color: var(--lilla); text-underline-offset: 3px; }
p { margin: .5em 0; }
img { max-width: 100%; }

/* --- Testata ------------------------------------------------------------------ */
/* Testata: una fascia di pois nei nostri colori (gialli compresi) scende dall'alto fino a metà logo; i pois sono
   più grandi vicino al bordo, crescono e calano a onda e scorrono piano verso destra (Samuele, 11/11/2026: al posto
   dell'acquerello del 24/10). Piastrelle SVG 480×100 senza giunture da tools/pois_fondi.py. */
/* iPhone (app sulla Home, 09/11): la fascia sale sotto l'ora e le notifiche (status bar «black-translucent»,
   viewport-fit=cover); env(safe-area-inset-top) è l'altezza di quella barra, 0 su Android e nel browser */
.top { --alto: calc(70px + env(safe-area-inset-top, 0px)); position: relative; text-align: center;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 4px; overflow: hidden; }
.top > * { position: relative; z-index: 1; }
.top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--alto); z-index: 0; pointer-events: none;
  background: url("img/pois-alto.svg?v=2") 0 0 / auto 100% repeat-x;
  animation: pois-alto 40s linear infinite;
}
/* una piastrella alta H è larga 480 × H / 100 (336 px con H = 70): si sposta di una piastrella intera, niente salti */
@keyframes pois-alto { to { background-position: calc(var(--alto) * 4.8) 0; } }
.top-logo { display: inline-block; }
.top-logo img { display: block; width: 190px; max-width: 60vw; height: auto; }
.top-title {
  margin: 2px 0 0; font-family: "Baloo Tamma 2", sans-serif; font-weight: 700; font-size: 1.05rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--giallo);   /* il nostro giallo (Samuele, 11/11) */
}

/* --- Navigazione --------------------------------------------------------------- */
.nav {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  padding: 10px 12px; max-width: 760px; margin: 0 auto;
}
.nav a {
  text-decoration: none; font-weight: 800; padding: 7px 13px; border-radius: 999px;
  font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--card); border: 1px solid var(--border);
}
.nav a[aria-current="page"] { background: var(--lilla-chiaro); border-color: var(--lilla); color: var(--nero); }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 12px; }
.subnav a {
  text-decoration: none; font-weight: 700; padding: 6px 14px; border-radius: 999px; font-size: .9rem;
  background: var(--card); border: 1px solid var(--border);
}
.subnav a[aria-current="page"] { background: var(--azzurro-chiaro); color: var(--nero); border-color: var(--azzurro); }
.subnav[aria-label="Admin"] a[aria-current="page"] { background: var(--giallo-chiaro); border-color: #d9a520; }
.badge {
  display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; text-align: center;
  background: #d9d6dc; color: var(--nero); font-size: .8rem;   /* pallini delle notifiche grigi (24/10) */
}
.banner-scaduto {
  max-width: 760px; margin: 4px auto 0; padding: 10px 16px; text-align: center; font-weight: 600;
  background: var(--rosa-chiaro); color: var(--nero); border-radius: 14px;
}

main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 16px 32px; }

/* --- Riquadri -------------------------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 18px 16px; margin: 14px 0; box-shadow: var(--shadow);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
/* strisce colorate su entrambi i lati delle schede (Samuele, 24/10) */
.card-rosa { border-left: 6px solid var(--rosa); border-right: 6px solid var(--rosa); }
.card-lilla { border-left: 6px solid var(--lilla); border-right: 6px solid var(--lilla); }
.card-azzurro { border-left: 6px solid var(--azzurro); border-right: 6px solid var(--azzurro); }
.card-verde { border-left: 6px solid var(--verde); border-right: 6px solid var(--verde); }
.grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.grid > .card { margin: 0; }
a.card { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
a.card:hover { transform: translateY(-2px); border-color: var(--lilla); }
a.card.agenda-item, a.card.row, a.card.lesson-row { display: flex; }

/* --- Pulsanti -------------------------------------------------------------------- */
/* Un colore per tipo: lilla = azioni del socio, verde = WhatsApp e conferme di pagamento,
   azzurro = profilo e impostazioni, tratteggiato = admin, rosso = solo per togliere o cancellare. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 22px; min-height: 46px; line-height: 1.2;
  font: 800 1rem "Mulish", system-ui, sans-serif; text-decoration: none; cursor: pointer;
  /* nessun pulsante ha l'ombra sotto (Samuele, 25/10) */
  background: var(--lilla); color: var(--nero); box-shadow: none;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(.97); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible { outline: 3px solid var(--lilla-testo); outline-offset: 3px; }
.btn-socio { background: var(--lilla); }
.btn-pay { background: var(--verde); color: #ffffff; }
.btn-wa { background: #25d366; color: #0b3d1e; }
.btn-profile { background: var(--azzurro); }
/* Admin (24/10): il giallo pieno della palette, pieno (senza tratteggio) */
/* dal 09/11 tutto l'Admin è giallo chiaro: il giallo pieno è della Chat (Samuele) */
.btn-admin { background: var(--giallo-chiaro); color: var(--nero); border: 2px solid var(--giallo-chiaro); box-shadow: none; }
.btn-light { background: var(--soft); color: var(--fg); box-shadow: none; }
.btn-danger { background: var(--rosso); color: #ffffff; }
.btn-small { min-height: 38px; padding: 7px 15px; font-size: .9rem; }
.btn[disabled], .btn.is-off { opacity: .55; cursor: not-allowed; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.actions.center { justify-content: center; }
.actions form { margin: 0; }
.inline { display: inline; margin: 0; }

/* --- Messaggi ------------------------------------------------------------------------ */
.flash {
  padding: 12px 16px; margin: 14px 0; border-radius: 16px; text-align: center;
  background: var(--azzurro-chiaro); color: var(--nero); font-weight: 600; animation: pop .3s ease-out;
}
.flash-error { background: var(--rosso-chiaro); color: var(--fg); }
.flash-success { background: var(--verde-chiaro); }

/* --- Testo ---------------------------------------------------------------------------- */
.small { font-size: .9rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }
.pre { white-space: pre-line; }
.prose { line-height: 1.65; }
.tag {
  display: inline-block; padding: 2px 11px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: var(--nero);
}
.tag-rosa { background: var(--rosa-chiaro); }
.tag-lilla { background: var(--lilla-chiaro); }
.tag-azzurro { background: var(--azzurro-chiaro); }
.tag-verde { background: var(--verde-chiaro); }
.tag-grigio { background: #e4e0e8; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }
.row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* --- Moduli ---------------------------------------------------------------------------- */
.form label { display: block; font-weight: 700; margin: 0 0 14px; }
.form input[type=email], .form input[type=password], .form input[type=text], .form input[type=tel],
.form input[type=search], .form input[type=number], .form input[type=datetime-local], .form input[type=date],
.form input[type=time], .form input[type=url], .form input[type=file], .form select, .form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px;
  font: 400 1rem "Mulish", system-ui, sans-serif; color: var(--fg);
  background: var(--bg); border: 2px solid var(--border); border-radius: 14px;
}
.form input[readonly] { background: var(--soft); color: var(--muted); }
.form textarea { min-height: 110px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--lilla); }
.form label.check { display: flex; gap: 10px; align-items: center; font-weight: 400; }
.form label.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--lilla-testo); }
.form .btn.wide { width: 100%; }
.form-row { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.danger-zone { border: 2px dashed var(--rosso); }
details.more > summary { cursor: pointer; font-weight: 700; color: var(--lilla-testo); }

/* --- Tessera ---------------------------------------------------------------------------- */
.tessera {
  /* bordo con la sfumatura dei colori dell'associazione; dentro, a destra, la criniera di unicorno
     (immagine data da Samuele il 24/10) coperta da un velo bianco al 75% */
  position: relative; overflow: hidden; border-radius: 22px; padding: 14px 16px; color: var(--nero);
  border: 6px solid transparent;
  /* orizzontale come una carta (85,6 × 54 mm) */
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; gap: 1.5cqi 3cqi; aspect-ratio: 1.586;
  /* tutte le misure in cqi (percentuale della larghezza della tessera): resta orizzontale anche con il testo grande
     impostato nel telefono (24/10) */
  container-type: inline-size;
  background: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)) padding-box,
    url("img/criniera.jpg") right center / auto 100% no-repeat padding-box,
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--rosa) 0%, var(--lilla) 35%, var(--azzurro) 70%, var(--verde) 100%) border-box;
  box-shadow: var(--shadow); margin: 14px 0;
}
.tessera-main { min-width: 0; display: flex; flex-direction: column; }
.tessera-logo { width: 34cqi; height: auto; }
.tessera-main .tessera-name { margin-top: auto; }   /* nome e titolo in basso, sopra i dati: in alto c'è il logo */
.tessera-side { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 2cqi; }
.tessera-side .tessera-qr { order: -1; }   /* il QR sempre in alto a destra, la foto sotto (24/10) */
.tessera-name { font-family: "Baloo Tamma 2", sans-serif; font-weight: 700; font-size: 5.6cqi; line-height: 1.1; margin: 2cqi 0 .5cqi;
  text-transform: uppercase; }
.tessera-ruolo { margin: 0 0 1cqi; font-weight: 800; font-size: 3.6cqi; }   /* solo grassetto, senza pastiglia (24/10) */
.tessera .kv { margin: 0; gap: .2cqi 3cqi; font-size: 3.4cqi; line-height: 1.35; }
.tessera-dati { grid-column: 1 / -1; }
.tessera .kv dt { color: #4a4152; }
.tessera .kv .tag { font-size: 3cqi; padding: .2cqi 2.2cqi; }
.tessera .kv dd { text-align: right; }
.tessera-photo { width: 14cqi; height: 14cqi; border-radius: 50%; object-fit: cover; border: 3px solid #ffffff; }
/* stato della quota sulla tessera (24/10): pistacchio se in regola, arancione pastello se da rinnovare */
.stato-attivo { background: #dcedb9; color: var(--nero); }
.stato-scaduto { background: #ffdcab; color: var(--nero); }

.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--soft); display: block; }
/* foto da controllare (Admin, 09/11): grande, per vedere bene il viso */
.avatar.avatar-grande { width: 160px; height: 160px; margin: 0 auto; }
.avatar-empty {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lilla-chiaro); color: var(--nero); font: 700 2rem "Baloo Tamma 2", sans-serif;
}

/* --- Agenda e calendario ------------------------------------------------------------------- */
.agenda-item { display: flex; gap: 14px; align-items: center; }
.agenda-date {
  flex: none; width: 64px; text-align: center; border-radius: 16px; padding: 6px 4px;
  background: var(--proj, #1a1a1a); color: var(--proj-testo, #ffffff); font-weight: 800; line-height: 1.1;
}
.agenda-date .d { display: block; font: 700 1.6rem "Baloo Tamma 2", sans-serif; }
.agenda-date .m { display: block; font-size: .75rem; text-transform: uppercase; }
.agenda-title { font-weight: 800; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th { font-size: .75rem; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.cal td { height: 54px; vertical-align: top; padding: 3px; border: 1px solid var(--border); }
.cal .num { font-size: .8rem; font-weight: 700; }
.cal .is-today { background: var(--soft); }
.cal .is-today .num { color: var(--lilla-testo); }
.cal .dot { display: block; height: 7px; border-radius: 4px; margin-top: 3px; background: var(--proj, #1a1a1a); }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cal-nav h2 { margin: 0; text-transform: capitalize; }
.legend { display: flex; gap: 14px; justify-content: center; font-size: .85rem; color: var(--muted); }
.legend { flex-wrap: wrap; }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 7px; border-radius: 4px; margin-right: 5px; background: var(--proj, #1a1a1a); }

/* --- Eventi, corsi, news ---------------------------------------------------------------------- */
.poster { width: 100%; max-height: 420px; object-fit: contain; border-radius: 14px; background: var(--soft); }
.price { font: 700 1.5rem "Baloo Tamma 2", sans-serif; color: var(--lilla-testo); }
/* nome sopra e prezzo a capo sotto: tutte le schede uguali, anche con i nomi lunghi (Samuele, 25/10) */
.nome-prezzo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.news-img { width: 100%; border-radius: 14px; margin: 6px 0; }
/* data sopra e etichetta (Prenotato, Libero, Ultimi posti, Sold out) sempre a capo sotto (Samuele, 25/10) */
.lesson-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tokens { font: 700 1.3rem "Baloo Tamma 2", sans-serif; }

/* --- Contatti ---------------------------------------------------------------------------------- */
.board { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.board-member:first-child { grid-column: 1 / -1; }   /* il presidente da solo in cima, gli altri due per riga */
.board-member { display: block; text-align: center; text-decoration: none; color: inherit; }
.board-member img, .board-member .avatar-empty { width: 120px; height: 120px; margin: 0 auto 8px; border-radius: 50%; object-fit: cover; }
.board-member strong { display: block; }
/* scheda «Resta aggiornato» (25/10): newsletter, canale e gruppo Telegram, un pulsante azzurro sotto l'altro */
.resta-aggiornato { display: grid; gap: 10px; }
.resta-aggiornato .tile-icon { width: 22px; height: 22px; flex: none; }

/* --- Admin ------------------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { color: var(--muted); font-weight: 700; }
.perm-table td, .perm-table th { text-align: center; }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; }

.foot {
  position: relative; margin-top: 28px; padding: 56px 16px 26px; min-height: 150px; box-sizing: border-box;
  text-align: center; font-size: .85rem; color: var(--nero); overflow: hidden;
}
.foot > * { position: relative; z-index: 1; }
.foot a { color: inherit; }
.foot .foot-firma { margin-top: 10px; font-size: .78rem; opacity: .75; }
/* piè di pagina: i pois salgono dal fondo e scorrono verso sinistra (piastrella 480×150); dietro le scritte sono
   piccoli e le scritte hanno un alone del colore della pagina, così si leggono */
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 0; pointer-events: none;
  background: url("img/pois-basso.svg?v=2") 0 0 / auto 100% repeat-x;
  animation: pois-basso 50s linear infinite;
}
@keyframes pois-basso { to { background-position: -480px 0; } }
.foot > * { text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg); }
/* «riduci movimento»: i pois restano fermi (l'animazione è dentro l'SVG, la regola generale non la ferma) */
@media (prefers-reduced-motion: reduce) {
  .top::before { background-image: url("img/pois-alto-fermo.svg?v=2"); }
  .foot::before { background-image: url("img/pois-basso-fermo.svg?v=2"); }
}
/* modalità scura: i pois un po' più scuri, così il logo bianco e il testo chiaro si leggono (con l'acquerello era .55;
   con i pois .55 li spegneva troppo) */
@media (prefers-color-scheme: dark) {
  .top::before, .foot::before { filter: brightness(.78); }
  .foot { color: var(--fg); }
}
.foot p { margin: 4px 0; }

@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.grow { flex: 1; min-width: 220px; }
.mt { margin-top: 14px; }
.shake { animation: shake .4s ease-in-out; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Timbri come sul sito (sogni-prossimi-eventi.php): rosso «Sold out» inclinato con doppia cornice e
   locandina un po' spenta; giallo «Ultimi posti disponibili», su due righe, locandina normale. */
.poster-wrap { position: relative; display: block; overflow: hidden; container-type: inline-size; border-radius: 14px; }
.poster-wrap .poster { display: block; width: 100%; max-height: none; }
.poster-wrap.is-sold .poster { filter: grayscale(.35) brightness(.92); }
.stamp {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg);
  padding: .28em .7em .18em; border: 4px solid #d62828; border-radius: 10px;
  outline: 2px solid #d62828; outline-offset: 3px; background: rgba(255, 255, 255, .9); color: #d62828;
  font: 800 clamp(20px, 9cqi, 34px)/1 "Baloo Tamma 2", system-ui, sans-serif;
  letter-spacing: .08em; white-space: nowrap; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(26, 26, 26, .25); pointer-events: none;
}
.stamp.stamp-ultimi {
  border-color: #e0a800; outline-color: #e0a800; background: rgba(255, 214, 10, .95); color: #1a1a1a;
  font-size: clamp(15px, 6.5cqi, 24px); letter-spacing: .05em; line-height: 1.05; text-align: center;
}
.tag-sold { background: #ffffff; color: #d62828; border: 2px solid #d62828; }
.tag-ultimi { background: #ffd60a; color: #1a1a1a; }
.btn-esaurito { background: #ffffff; color: #d62828; border: 2px solid #d62828; box-shadow: none; cursor: default; }
.btn-esaurito:hover { transform: none; filter: none; }
a.card.event-card { display: flex; gap: 14px; align-items: flex-start; }
.event-card .poster-wrap { flex: 0 0 110px; }
.event-card .event-text { flex: 1; min-width: 0; }
.event-card h3 { margin-top: 0; }
/* Elenco eventi: le locandine, due per riga sul telefono (come sul sito), con data e nome sotto. */
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
/* scheda verticale dell'evento (24/10), come quella dei gettoni: bordo in alto del colore del progetto */
a.card.event-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 10px 10px 12px;
  text-align: center; text-decoration: none; color: inherit;
  border-top: 6px solid var(--proj, var(--lilla)); border-bottom: 6px solid var(--proj, var(--lilla));
  transition: transform .15s ease;
}
.event-tile:hover { transform: translateY(-2px); }
.event-tile .poster-box { width: 100%; box-shadow: none; }
.event-tile strong { line-height: 1.25; }
.event-tile .event-date { line-height: 1.3; }
.event-tile strong + .small { margin-top: -6px; }
.event-tile .tag { margin-top: 2px; }
.tag.tag-proj-vuoto { background: var(--card); color: var(--fg); border: 2px solid var(--proj); }
.poster-box { position: relative; display: block; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
  transition: transform .15s ease; }
.poster-box .poster-wrap { border-radius: 0; }
.poster-empty { display: grid; place-items: center; aspect-ratio: 3 / 4; padding: 12px; text-align: center;
  background: linear-gradient(135deg, var(--rosa-chiaro), var(--lilla-chiaro) 45%, var(--azzurro-chiaro) 80%, var(--verde-chiaro));
  color: var(--nero); font: 700 1.1rem/1.2 "Baloo Tamma 2", sans-serif; }
.poster-box > .tag { position: absolute; top: 8px; right: 8px; }

/* I colori dei progetti, gli stessi del sito (sogni_pe_colori_progetti). Gli eventi una tantum restano neri. */
.proj-nib { --proj: #ffc3da; --proj-testo: #1a1a1a; --proj-scuro: #c2477e; }
.proj-dinner { --proj: #ffafcc; --proj-testo: #1a1a1a; --proj-scuro: #c23c74; }
.proj-yoga { --proj: #cdb4db; --proj-testo: #1a1a1a; --proj-scuro: #6f4a8a; }
.proj-everyone { --proj: #b38dc8; --proj-testo: #1a1a1a; --proj-scuro: #6a3f8c; }
.proj-road { --proj: #bde0fe; --proj-testo: #1a1a1a; --proj-scuro: #2f6fa8; }
.proj-bookclub { --proj: #a2d2ff; --proj-testo: #1a1a1a; --proj-scuro: #2864a0; }
.proj-handcraft { --proj: #9bcec8; --proj-testo: #1a1a1a; --proj-scuro: #2f7d75; }
.proj-games { --proj: #53afa6; --proj-testo: #1a1a1a; --proj-scuro: #24675f; }
.proj-altro { --proj: #1a1a1a; --proj-testo: #ffffff; --proj-scuro: #1a1a1a; }
@media (prefers-color-scheme: dark) { .proj-altro { --proj: #f3eef6; --proj-testo: #1a1a1a; } }
.tag.tag-proj { background: var(--proj); color: var(--proj-testo); }
/* Come sul sito: i pulsanti dell'evento pieni del colore del progetto, bordo colorato sulla scheda. */
/* bordo sopra e sotto, come le schede dei gettoni e degli eventi (24/10) */
.proj-card { border-top: 6px solid var(--proj, var(--lilla)); border-bottom: 6px solid var(--proj, var(--lilla)); }
.proj-card .btn-pay, .proj-card .btn-socio { background: var(--proj); color: var(--proj-testo); }
.proj-card .btn-light { background: var(--card); color: var(--fg); border: 2px solid var(--proj); }
/* pagina dell'evento tutta nel colore dell'evento (24/10): niente lilla dentro le schede dell'evento */
.event-page a:not(.btn) { color: var(--proj-scuro, var(--fg)); text-decoration-color: var(--proj); }
.proj-card .price, .proj-card .event-kind, .proj-card details.more > summary, .proj-card a:not(.btn) { color: var(--proj-scuro, var(--fg)); }
.proj-card .event-kind { margin: 0; font-weight: 800; letter-spacing: .03em; }
.proj-card .btn:focus-visible { outline-color: var(--proj-scuro); }
@media (prefers-color-scheme: dark) {
  .proj-card .price, .proj-card .event-kind, .proj-card details.more > summary, .proj-card a:not(.btn) { color: var(--proj); }
}
/* Le locandine hanno già una loro cornice: angoli dritti, niente bordo nostro, così la loro si vede intera (24/10) */
.poster-box, .poster-wrap, .poster-box .poster, .poster-wrap .poster { border-radius: 0; }
.poster-wrap .poster { background: none; }
.poster-wrap.is-big { margin: 14px 0; box-shadow: var(--shadow); }
section[class^="proj-"] > h2 { border-left: 8px solid var(--proj); border-right: 8px solid var(--proj); padding: 0 10px; color: var(--fg); }

/* --- Home: riquadri delle sezioni ----------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 8px 0 18px; }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 112px; border-radius: 18px; text-decoration: none; color: var(--nero);
  font-family: "Baloo Tamma 2", sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1;
  letter-spacing: .03em; text-transform: uppercase; box-shadow: var(--shadow);
  border: 2px solid transparent; transition: transform .12s ease;
}
.tile:hover { transform: translateY(-2px); }
.tile:active { transform: scale(.98); }
.tile:focus-visible { outline: 3px solid var(--lilla-testo); outline-offset: 2px; }
.tile-icon { width: 34px; height: 34px; }
.tile-rosa { background: var(--rosa-chiaro); border-color: var(--rosa-chiaro); }
.tile-rosa-pieno { background: var(--rosa); border-color: var(--rosa); }
.tile-lilla { background: var(--lilla-chiaro); border-color: var(--lilla-chiaro); }
.tile-lilla-pieno { background: var(--lilla); border-color: var(--lilla); }
.tile-azzurro { background: var(--azzurro-chiaro); border-color: var(--azzurro-chiaro); }
.tile-azzurro-pieno { background: var(--azzurro); border-color: var(--azzurro); }
/* Admin: tratteggiato come tutti i pulsanti admin, su tutta la riga */
.tile-admin {
  background: var(--giallo-chiaro); color: var(--nero); border: 2px solid var(--giallo-chiaro);   /* Admin: giallo chiaro (09/11) */
}
.tile-chat { background: var(--giallo); color: var(--nero); border: 2px solid var(--giallo); }   /* Chat: giallo pieno (09/11) */
/* Home: sempre 2 per riga, una riga per colore; Eventi da solo e largo in cima (Samuele, 24/10) */
.tiles.tiles-home { grid-template-columns: repeat(2, 1fr); }
.tiles-home .tile-largo { grid-column: 1 / -1; }   /* anche i riquadri larghi: icona sopra e nome sotto (Samuele, 25/10) */
/* Admin occupa tutta la riga solo se la riga sopra è completa; se c'è un posto libero si mette lì.
   Con Eventi largo in cima, un riquadro in posizione pari comincia una riga nuova. */
/* Chat e Admin (09/11): vicini se ci sono tutti e due, largo l'ultimo se resta da solo sulla riga */
.tiles-home .tile-admin:last-child:nth-child(even), .tiles-home .tile-chat:last-child:nth-child(even) { grid-column: 1 / -1; }

/* --- Corsi: gettoni del socio e pulsanti dei corsi -------------------------------- */
.tokens-card { text-align: center; border-top: 6px solid var(--verde); border-bottom: 6px solid var(--verde); }
.tokens-label { margin: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--verde-testo); }
.tokens-big { margin: 0; font: 700 3.6rem/1.1 "Baloo Tamma 2", sans-serif; }
.tokens-card .list { text-align: left; }
.tile-proj { background: var(--proj); color: var(--proj-testo); border-color: var(--proj); padding: 0 10px; text-align: center; }
.tokens-card .btn { margin-top: 10px; }
#gettoni { scroll-margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.inline-form { margin: -4px 4px 20px; }

/* --- Corsi: tutto col colore di Naked Yoga (Samuele, 24/10) ------------------------- */
.corsi .tokens-card, .card-corsi { border-top: 6px solid var(--proj); border-bottom: 6px solid var(--proj); }
.corsi .tokens-label { color: var(--lilla-testo); }
.corsi .card-azzurro, .corsi .card-verde { border-left-color: var(--proj); border-right-color: var(--proj); }
.corsi .btn-pay, .corsi .btn-socio { background: var(--proj); color: var(--proj-testo); }
.corsi .btn-light { border: 2px solid var(--proj); }
.corsi .price { color: var(--lilla-testo); }

/* --- Menu in alto (25/10): icona e nome, tutti della stessa misura, 4 per riga; ogni colonna è un colore,
   il chiaro sopra e il pieno sotto (rosa, lilla, azzurro, verde). Admin a parte, nella testata. ------------ */
.nav-icons {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; gap: 6px;
  width: 100%; box-sizing: border-box; padding-left: 12px; padding-right: 12px; max-width: 560px;
}
.nav-icons a {
  /* il nome a destra dell'icona, sulla stessa riga (Samuele, 25/10) */
  position: relative; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 2px; min-height: 42px; border-radius: 12px; border: 2px solid transparent; color: var(--nero);
  text-transform: none; letter-spacing: 0; font-size: clamp(.58rem, 2.6vw, .85rem); font-weight: 700; line-height: 1.1;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.nav-icons .tile-icon { width: clamp(14px, 4vw, 18px); height: clamp(14px, 4vw, 18px); flex: none; }
.nav-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Admin: solo l'icona, a destra sulla riga di «Portale Soci» */
.top-riga { position: relative; display: flex; justify-content: center; align-items: center; min-height: 44px; }
.top-riga .top-title { margin: 0; }
.top-admin {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px; background: var(--giallo-chiaro); color: var(--nero);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.top-admin .tile-icon { width: 24px; height: 24px; }
.top-admin[aria-current="page"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #d9a520; }
.top-chat { background: var(--giallo); right: auto; left: 0; }   /* Chat in alto a sinistra (09/11) */
.top-admin .badge { position: absolute; top: -7px; right: -7px; }
/* stessi colori dei riquadri della Home, senza bordo; --tinta è anche il colore dell'anello della pagina aperta (24/10) */
.nav-icons a.tile-rosa { --tinta: var(--rosa-chiaro); }
.nav-icons a.tile-rosa-pieno { --tinta: var(--rosa); }
.nav-icons a.tile-lilla { --tinta: var(--lilla-chiaro); }
.nav-icons a.tile-lilla-pieno { --tinta: var(--lilla); }
.nav-icons a.tile-azzurro { --tinta: var(--azzurro-chiaro); }
.nav-icons a.tile-azzurro-pieno { --tinta: var(--azzurro); }
.nav-icons a.tile-verde-chiaro { --tinta: var(--verde-chiaro); }
.nav-icons a.tile-verde-pieno { --tinta: var(--verde); }
.nav-icons a[class*="tile-"] { background: var(--tinta); border-color: var(--tinta); }
.nav-icons a[aria-current="page"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--tinta, var(--lilla-testo)); }
.nav-icons .badge { position: absolute; top: -7px; right: -7px; }
.nav-label {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 20;
  padding: 4px 10px; border-radius: 999px; background: var(--nero); color: #ffffff; white-space: nowrap;
  font-size: .8rem; font-weight: 700; pointer-events: none;
}
.tile-verde { background: var(--verde-chiaro); border-color: var(--verde-chiaro); }

/* --- Contatti: quadratini con l'icona -------------------------------------------------------------- */
.contact-tiles { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.contact-tile {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; border: 2px solid transparent;
  color: var(--nero); box-shadow: var(--shadow); transition: transform .12s ease;
}
.contact-tile:active { transform: scale(.96); }
.contact-tile .tile-icon { width: 38px; height: 38px; }

/* --- Volontari (24/10): verde acqua chiaro, il colore dopo l'azzurro pieno ------------------------------- */
.tile-verde-chiaro { background: var(--verde-chiaro); border-color: var(--verde-chiaro); }
.tile-verde-pieno { background: var(--verde); border-color: var(--verde); color: var(--nero); }
.card-volontari { border-left: 6px solid var(--verde); border-right: 6px solid var(--verde); }
.tag-volontari { background: var(--verde-chiaro); }
.volontari .btn-socio { background: var(--verde); color: #ffffff; }
.vol-event h3 { margin: 2px 0 8px; }
.vol-shift { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--border); text-align: left; }
.vol-shift form { flex: none; }
/* pagina dell'evento: la descrizione sta nella stessa scheda del pagamento */
.event-desc { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); text-align: left; }
.volontari h2 { color: var(--verde-testo); }

/* --- QR della tessera e tessera a tutto schermo (24/10) ------------------------------------------- */
.tessera-qr { display: block; width: 22cqi; height: 22cqi; }   /* sfondo trasparente, sopra la tessera */
.tessera-qr svg { display: block; width: 100%; height: 100%; }
.tessera[data-fullscreen] { cursor: zoom-in; }
.tessera-overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(26, 26, 26, .82); cursor: zoom-out;
}
.tessera-overlay .tessera { width: min(100%, 560px); margin: 0; cursor: zoom-out; }
/* a tutto schermo il QR diventa grande, per la scansione */
/* a tutto schermo: la tessera in alto, sotto foto e QR grande e centrato */
.tessera-overlay .tessera { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; }
.tessera-overlay .tessera-side { order: 3; }
.tessera-overlay .tessera-side { justify-content: center; }
.tessera-overlay .tessera-qr { width: min(70vw, 300px); height: min(70vw, 300px); margin: 6px auto 0; }

/* pagina di verifica aperta dal QR della tessera */
.verifica { border-top: 8px solid var(--verde); border-bottom: 8px solid var(--verde); }
.verifica-scaduto, .verifica-escluso { border-color: var(--rosso); }
.verifica h1 { margin-bottom: 0; }
.verifica-esito { font: 800 1.6rem "Baloo Tamma 2", sans-serif; margin: 10px 0 0; color: var(--verde-testo); }
.verifica-scaduto .verifica-esito, .verifica-escluso .verifica-esito { color: var(--rosso); }

/* pagina dello stato socio (statosocio.associazionesogni.com): solo logo, scheda e piè di pagina */
.pagina-stato main { display: grid; align-content: center; min-height: 40vh; }
.pagina-stato .top { padding-bottom: 18px; }
/* il modulo di adesione, sito a sé (iscrizione.associazionesogni.com, 13/11): testata e piè con i pois, senza menu */
.pagina-iscrizione .top { padding-bottom: 18px; }
.pagina-iscrizione .top-title { margin-top: 6px; }
.adesione-intro h1 { margin-top: 0; }
.adesione-intro p { line-height: 1.55; }


/* elenchi a schede (pagina Admin 24/10, menu dei Documenti 25/10): si toccano tutte, a righe alterne giallo chiaro e giallo pieno (Samuele);
   testo sempre nero, anche in modalità scura */
.voci > .card { background: var(--giallo-chiaro); border-color: var(--giallo-chiaro); color: var(--nero); margin: 10px 0; }
.voci > .card:nth-child(even) { background: var(--giallo-chiaro); border-color: #f5d77a; }
.voci > a.card:hover { border-color: #d9a520; }
.voci > .card { flex-wrap: nowrap; }
.voci .freccia { font-size: 1.8rem; line-height: 1; opacity: .55; }
/* Admin → Soci (25/10): foto a sinistra alta quanto le tre righe (tessera, nome e cognome, codice fiscale) */
.elenco-soci > .card { justify-content: flex-start; gap: 14px; padding: 12px 14px; }
.elenco-soci .avatar, .elenco-soci .avatar-empty { width: 64px; height: 64px; flex: none; }
.elenco-soci .avatar-empty { background: #ffffff; font-size: 1.5rem; }
.socio-righe { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.socio-righe .tag { margin-top: 4px; }

/* titoli delle sezioni del menu e delle voci dell'Admin in maiuscolo (Samuele, 24/10); i nomi (evento, corso,
   persona, news) restano come sono */
.titolo-sezione { text-transform: uppercase; letter-spacing: .03em; }

/* pagina del socio nell'Admin: foto in alto al centro, sotto ogni voce con il dato a capo (Samuele, 25/10) */
.scheda-socio .avatar, .scheda-socio .avatar-empty { margin: 0 auto 14px; }
.kv-a-capo { display: block; }
.kv-a-capo dt { font-size: .85rem; margin-top: 12px; }
.kv-a-capo dt:first-child { margin-top: 0; }
.kv-a-capo dd { overflow-wrap: anywhere; }
.kv-a-capo .diff { display: block; color: var(--rosso); font-weight: 700; font-size: .9rem; }

/* il giallo è solo per l'Admin (Samuele, 25/10): gli elenchi a schede delle sezioni dei soci hanno il colore della
   sezione, i Documenti l'azzurro */
.voci-azzurro > .card { background: var(--azzurro-chiaro); border-color: var(--azzurro-chiaro); }
.voci-azzurro > .card:nth-child(even) { background: var(--azzurro); border-color: var(--azzurro); }
.voci-azzurro > a.card:hover { border-color: #6fb3f0; }
/* Admin → pagina del socio: un pagamento per scheda (25/10) */
.pagamento p { margin: 0; }
.pagamento .row { flex-wrap: nowrap; margin: 4px 0; }
.pagamento .price { flex: none; font-size: 1.25rem; }
/* Primo accesso (25/10): quello che manca (spunta dei dati, foto) diventa rosso */
.card.da-completare { border: 2px solid var(--rosso); background: #fff1f3; }
.card.da-completare .check { color: var(--rosso); font-weight: 800; }
label.da-completare { color: var(--rosso); font-weight: 800; }
label.da-completare input, label.da-completare input:focus { border-color: var(--rosso); box-shadow: 0 0 0 3px #ffd6dc; }

/* --- Pagina del corso (25/10): regole delle cancellazioni e calendario delle lezioni ----------------- */
.regole { margin: 0; padding-left: 20px; }
.regole li { margin: 6px 0; }
.cal-corso td { height: 56px; padding: 0; }
.cal-corso td > .num { display: block; padding: 3px; }
.cal-corso td[class*="lezione-"] a {
  display: flex; flex-direction: column; height: 100%; min-height: 54px; padding: 3px; text-decoration: none;
  color: var(--nero); background: var(--lezione); border-radius: 8px;
}
.cal-corso .ora { margin-top: auto; font-size: .7rem; font-weight: 700; }
.lezione-libera { --lezione: #cdb4db; }          /* lilla: il colore dei corsi */
.lezione-ultimi { --lezione: #ffd60a; }          /* giallo come il timbro «Ultimi posti» */
.lezione-sold { --lezione: #f6b5bd; }
.lezione-prenotata { --lezione: #9bcec8; }
.lezione-attesa { --lezione: #bde0fe; }
.lezione-annullata { --lezione: #e4e0e8; }
.lezione-annullata .num, .lezione-annullata .ora { text-decoration: line-through; }
.lezione-passata { --lezione: #f0eaf4; }
.lezione-passata a { color: var(--muted) !important; }
.legenda-corso span { display: inline-flex; align-items: center; gap: 6px; margin: 4px 10px 0 0; font-size: .85rem; }
.legenda-corso span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--lezione); }

/* --- Calendario come quello del sito (25/10, copia di sogni-calendario.php): cella del colore del progetto con il
   logo dentro; con due appuntamenti la cella si divide a metà, ognuna col suo colore ---------------------------- */
.proj-art { --proj: #e9ebf5; --proj-testo: #1a1a1a; --proj-scuro: #4b5aa0; }
.cal-sito { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: #e5e2e6;
  border: 1px solid #e5e2e6; border-radius: 12px; overflow: hidden; }
.cal-sito-int { background: #ffffff; text-align: center; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 1px; color: var(--nero); }
.cal-sito-cella { position: relative; background: #ffffff; min-height: 4.2rem; padding: 3px; display: flex;
  flex-direction: column; align-items: center; color: var(--nero); }
.cal-sito-cella.vuota { background: #fafafa; }
.cal-sito-cella.con-evento { background: var(--cella, var(--proj)); }
.cal-sito-cella.proj-nib, .cal-sito-evento.proj-nib { --cella: #ffcfe1; }   /* lo sfondo del logo NiB, come sul sito */
.cal-sito-num { align-self: flex-start; font-size: .7rem; font-weight: 700; line-height: 1; opacity: .75; }
.con-evento .cal-sito-num { opacity: 1; }
.oggi .cal-sito-num { background: var(--nero); color: #ffffff; border-radius: 999px; width: 1.3rem; height: 1.3rem;
  display: flex; align-items: center; justify-content: center; opacity: 1; }
.cal-sito-eventi { display: flex; flex: 1; width: 100%; align-items: center; justify-content: center; gap: 2px; }
.cal-sito-evento { display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0;
  max-width: 46px; text-decoration: none; color: inherit; }
.cal-sito-evento img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 6px; display: block; }
.cal-sito-testo { font-size: .55rem; font-weight: 800; text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
.cal-sito-cella.multi { padding: 0; }
.multi .cal-sito-num { position: absolute; top: 3px; left: 3px; z-index: 2; }
.multi .cal-sito-eventi { position: absolute; inset: 0; gap: 0; align-items: stretch; }
.multi .cal-sito-evento { max-width: none; padding: 14px 2px 2px; background: var(--cella, var(--proj)); }
.multi .cal-sito-evento img { max-width: 24px; }
.multi .cal-sito-evento + .cal-sito-evento { box-shadow: inset 1px 0 0 rgba(0, 0, 0, .12); }
@media (min-width: 600px) {
  .cal-sito-cella { min-height: 6rem; padding: 5px; }
  .cal-sito-evento { max-width: 90px; }
  .multi .cal-sito-evento img { max-width: 60px; }
  .cal-sito-int { font-size: .75rem; }
  .cal-sito-num { font-size: .8rem; }
}
/* Calendario, elenco sotto (25/10): la scheda del colore dell'evento, dentro tutto testo (niente pastiglie) */
.card.agenda-colorata { background: var(--proj); border-color: var(--proj); color: var(--proj-testo); }
.agenda-colorata .agenda-date { background: none; color: inherit; }
.agenda-colorata .small.muted { color: inherit; opacity: .8; }
.agenda-progetto { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
/* il nome scritto (progetto senza logo) resta dentro la sua cella */
.cal-sito-evento { overflow: hidden; }
.cal-sito-testo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.agenda-timbro { margin-left: auto; align-self: flex-end; flex: none; }

/* --- Votazioni (News → Votazioni, 01/11/2026) -------------------------------------------------- */
.subnav-news a[aria-current="page"] { background: var(--lilla-chiaro); border-color: var(--lilla); }
.scheda-voto h2 { margin-top: 0; }
.domanda { border: 0; padding: 0; margin: 0 0 18px; }
.domanda legend { font-weight: 800; margin-bottom: 8px; padding: 0; }
.domanda label.check { margin: 0 0 8px; }
.domanda-admin { border-bottom: 1px solid var(--border); padding: 8px 0; }
.domanda-admin:last-child { border-bottom: 0; }
.voce-risultato { margin: 8px 0; }
.voce-risultato progress { width: 100%; height: 12px; accent-color: var(--lilla-testo); }
.lista-allegati { padding-left: 20px; }
@media print {
  .top, .nav, .foot, .no-print, .flash { display: none !important; }
  body { background: #ffffff; }
  .card { box-shadow: none; border: 1px solid #cccccc; break-inside: avoid; }
}
.senza-diritto td { color: var(--muted); opacity: .6; }
.senza-diritto label { cursor: not-allowed; }

/* --- Elenchi a due per riga: se l'ultimo resta da solo va al centro (Samuele, 01/11) ---------------------- */
/* Eventi: due per riga sul telefono, tre dai 600 px; flex centrato, così una riga incompleta sta in mezzo */
.poster-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; }
.poster-grid > .event-tile { flex: 0 0 calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); }
@media (min-width: 600px) {
  .poster-grid > .event-tile { flex-basis: calc((100% - 28px) / 3); max-width: calc((100% - 28px) / 3); }
}
.poster-grid > .card:not(.event-tile) { flex: 1 1 100%; }
/* Contatti: dopo il presidente, due per riga; l'ultimo da solo al centro */
.board-member:last-child:nth-child(even) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
/* Pulsanti dei corsi (e gli altri riquadri fuori dalla Home): l'ultimo di una riga incompleta al centro */
.tiles:not(.tiles-home) { display: flex; flex-wrap: wrap; justify-content: center; }
.tiles:not(.tiles-home) > .tile { flex: 0 0 calc((100% - 12px) / 2); }
@media (min-width: 600px) { .tiles:not(.tiles-home) > .tile { flex-basis: calc((100% - 24px) / 3); } }
.subnav-eventi a[aria-current="page"] { background: var(--rosa-chiaro); border-color: var(--rosa); }

/* domande del modulo dell'evento (Samuele, 02/11): allineate a sinistra dentro la scheda centrata */
.domande-evento { text-align: left; margin-top: 10px; }

/* lezione di prova già fatta: il pacchetto resta visibile in grigio (Samuele, 03/11) */
.pacchetto-usato, .corsi .card-azzurro.pacchetto-usato { border-left-color: #d6d1dc; border-right-color: #d6d1dc; color: var(--muted); }
.pacchetto-usato .price, .pacchetto-usato strong { color: var(--muted); }

/* --- Pass degli eventi e delle lezioni (Samuele, 03/11) ------------------------------------------------------ */
.pass-card { cursor: zoom-in; }
.pass-titolo { font: 800 1.3rem "Baloo Tamma 2", sans-serif; margin: 0; }
.pass-nome { font-weight: 800; font-size: 1.1rem; margin: 8px 0 0; }
.pass-qr { width: min(60vw, 240px); margin: 10px auto 0; }
.pass-qr svg { display: block; width: 100%; height: auto; }   /* sfondo bianco: si legge anche in modalità scura */
.tessera-overlay .pass-card { width: min(100%, 480px); margin: 0; cursor: zoom-out; }
.tessera-overlay .pass-qr { width: min(80vw, 340px); }
/* Admin → Ingressi */
.scanner-box video { display: block; width: 100%; max-width: 480px; margin: 12px auto 6px; border-radius: 16px; background: #000; }
.pass-esito { border-top: 10px solid var(--verde); border-bottom: 10px solid var(--verde); }
.pass-gia { border-color: var(--giallo); }
.pass-no { border-color: var(--rosso); }
.pass-esito-titolo { font: 800 1.7rem "Baloo Tamma 2", sans-serif; margin: 10px 0 0; color: var(--verde-testo); }
.pass-no .pass-esito-titolo { color: var(--rosso); }
.pass-gia .pass-esito-titolo { color: var(--fg); }
.pass-foto { display: block; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0 auto; }
.ingresso-riga { align-items: center; gap: 12px; }
.ingresso-entrato { opacity: .65; }
/* Profilo a elenco (Samuele, 03/11): verde acqua, il colore del Profilo */
.voci-verde > .card { background: var(--verde-chiaro); border-color: var(--verde-chiaro); }
.voci-verde > .card:nth-child(even) { background: var(--verde); border-color: var(--verde); }
.voci-verde > a.card:hover { border-color: #3f8f87; }
.gettone-riga { align-items: center; }
.gettone-penale { border-left: 6px solid var(--rosso); }
.pass-riga { width: 100%; text-align: left; font: inherit; color: inherit; cursor: zoom-in; }
.pass-icona { font-weight: 800; white-space: nowrap; }
/* «Esci dal Portale»: tratteggiato rosso, senza fondo (Samuele, 03/11) */
.btn-esci { background: transparent; color: var(--rosso); border: 2px dashed var(--rosso); box-shadow: none; }
/* News per anno (Samuele, 04/11): l'anno si apre e dentro ci sono le sue news */
.anno-news > summary { font-size: 1.1rem; }
.anno-news > .card { margin: 10px 0 0; }
/* Dichiarazione di scarico prima dell'iscrizione (Samuele, 04/11): il testo in un riquadro da far scorrere fino in fondo */
.scarico { text-align: left; }
.scarico-testo { max-height: 55vh; overflow-y: auto; padding: 12px 14px; margin: 12px 0 6px; background: var(--card);
  border-top: 3px solid var(--proj, var(--lilla)); border-bottom: 3px solid var(--proj, var(--lilla)); border-radius: 10px;
  font-size: .95rem; line-height: 1.6; -webkit-overflow-scrolling: touch; }
.scarico-testo:focus { outline: 2px solid var(--proj, var(--lilla)); }
.scarico-clausole { margin: 12px 0; padding: 10px 12px; border-left: 4px solid var(--proj, var(--lilla));
  border-right: 4px solid var(--proj, var(--lilla)); border-radius: 10px; background: var(--soft); }
.scarico .check input[disabled] + *, .scarico .check:has(input[disabled]) { opacity: .6; }
.scarico-letto [data-scarico-avviso] { visibility: hidden; }

/* --- Sondaggi (04/11/2026) --------------------------------------------------------------------- */
/* stelle da 1 a 5: radio nascosti, le etichette in ordine inverso così :checked ~ label colora fino alla scelta */
.stelle-scelta { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-direction: row-reverse; justify-content: center; gap: 4px; }
.stelle-scelta legend { width: 100%; text-align: center; font-weight: 700; margin-bottom: 6px; }
.stelle-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stelle-scelta label { font-size: 2.6rem; line-height: 1; color: var(--border); cursor: pointer; padding: 4px; }
.stelle-scelta input:checked ~ label,
.stelle-scelta label:hover, .stelle-scelta label:hover ~ label { color: #e0a100; }
.stelle-scelta input:focus-visible + label { outline: 2px solid var(--lilla-testo); border-radius: 6px; }
.scelta-riga { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.scelta-riga legend { font-weight: 700; margin-bottom: 6px; }
.stelle-media { color: var(--fg); font-weight: 700; }
.stelle-conteggio { max-width: 220px; margin: 8px auto 0; }
.stelle-conteggio th, .stelle-conteggio td { text-align: center; }
/* il grafico dell'andamento: una linea, griglia leggera, la media tratteggiata */
.grafico-svg { width: 100%; height: auto; display: block; }
.g-griglia { stroke: var(--border); stroke-width: 1; }
.g-asse { fill: var(--muted); font-size: 12px; font-family: inherit; }
.g-media { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.g-linea { fill: none; stroke: var(--lilla-testo); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-marca { fill: var(--lilla-testo); stroke: var(--card); stroke-width: 2; }
.g-bersaglio { fill: transparent; cursor: pointer; }
.g-punto:hover .g-marca { r: 7; }
/* Admin → Numeri (05/11): tessere coi numeri grandi, una riga per evento/corso coi numeri che vanno a capo */
.numeri-tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.numeri-tessere .card { margin: 0; padding: 12px 8px; }
.numeri-tessere .numero { margin: 0; font: 700 1.9rem/1.1 "Baloo Tamma 2", sans-serif; }
.numeri-tessere .small { margin: 4px 0 0; }
.numeri-riga { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0; }

/* Pagamenti senza ricevuta o fattura (05/11): numero del documento e pulsante sulla stessa riga */
.form-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.form-inline input[type="text"] { width: 8.5em; margin: 0; }

/* «COMING SOON» in cima alla pagina d'ingresso (Samuele, 05/11/2026): fascia con i quattro colori pieni del sito,
   nell'ordine rosa → lilla → azzurro → verde acqua. Niente giallo: è solo dell'Admin. Da togliere all'apertura ai soci. */
.coming-soon {
  margin: 0 0 18px; padding: 14px 12px; border-radius: 16px; text-align: center;
  background: linear-gradient(90deg, var(--rosa), var(--lilla), var(--azzurro), var(--verde));
  color: var(--nero); font-family: "Baloo Tamma 2", "Mulish", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(1.9rem, 9vw, 2.8rem); line-height: 1.05; letter-spacing: .08em; text-transform: uppercase;
}

/* Pagina d'ingresso: le 8 schede a due per riga anche sul telefono, come sul computer (Samuele, 05/11/2026) */
@media (max-width: 639px) {
  .landing-schede { grid-template-columns: 1fr 1fr; gap: 10px; }
  .landing-schede .card { padding: 12px 10px; }
  .landing-schede h3 { font-size: 1rem; margin: 0 0 4px; }
  .landing-schede p { font-size: .8rem; line-height: 1.35; margin: 0; }
}

/* Ruoli e permessi: i corsi che segue l'istruttore, rientrati sotto il ruolo (06/11) */
.corsi-istruttore { border: 0; margin: 0 0 .6rem 1.6rem; padding: 0; }
.corsi-istruttore legend { padding: 0; margin-bottom: .2rem; }

/* Pagina d'ingresso: «Hai già l'account? Accedi» sotto il Coming soon (06/11) */
.accedi-discreto { margin: -6px 0 18px; }
.accedi-discreto a { font-weight: 700; }

/* Convenzioni: l'icona di WhatsApp, alta come le emoji accanto (08/11) */
.ico-wa { width: 1.05em; height: 1.05em; vertical-align: -0.15em; }

/* registro delle azioni a righe (09/11) */
.registro-riga { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--soft); }
.registro-riga:last-child { border-bottom: 0; }

/* --- Chat degli eventi (09/11/2026) ---------------------------------------------------------------------------- */
.big-emoji { font-size: 2.6rem; margin: 0; }
.chat-fissato { border-left: 6px solid var(--lilla); position: sticky; top: 0; z-index: 5; padding-top: 10px; padding-bottom: 10px; }
.chat-fissato summary { font-weight: 700; cursor: pointer; }
.chat-fissato p { margin: 8px 0 0; }
.chat-lista { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 110px; }
.chat-msg {
  align-self: flex-start; max-width: 86%; background: var(--soft); border-radius: 14px 14px 14px 4px;
  padding: 8px 12px; position: relative;
}
.chat-mio { align-self: flex-end; background: var(--lilla-chiaro); color: var(--nero); border-radius: 14px 14px 4px 14px; }
.chat-msg p { margin: 0 0 4px; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-chi { font-size: .85rem; }
.chat-ora { color: var(--muted); font-size: .75rem; margin-left: 4px; }
.chat-mio .chat-ora { color: #4d3c58; }
.chat-tag { font-size: .7rem; padding: 1px 7px; }
.chat-testo { overflow-wrap: anywhere; }
.chat-foto { margin: 4px 0; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.chat-foto img { display: block; max-width: 100%; max-height: 340px; border-radius: 10px; pointer-events: none;
  -webkit-user-drag: none; -webkit-touch-callout: none; }
.chat-foto.aperta {
  position: fixed; inset: 0; z-index: 40; margin: 0; background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.chat-foto.aperta img { max-height: 100%; max-width: 100%; border-radius: 0; }
.chat-file { font-weight: 700; overflow-wrap: anywhere; }
.chat-elimina { margin: 2px 0 0; text-align: right; }
.chat-x { background: none; border: 0; padding: 0; color: var(--muted); font-size: .75rem; text-decoration: underline; cursor: pointer; }
.chat-mio .chat-x { color: #4d3c58; }
.chat-scrivi {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
.chat-riga { display: flex; gap: 8px; align-items: flex-end; max-width: 720px; margin: 0 auto; }
.chat-riga textarea {
  flex: 1; min-height: 42px; max-height: 160px; resize: none; font: inherit; padding: 9px 12px;
  border: 2px solid var(--border); border-radius: 20px; background: var(--card); color: var(--fg);
}
.chat-riga textarea:focus { outline: none; border-color: var(--lilla); }
/* foto e PDF (11/11): pulsanti tondi nel colore dell'evento con le icone del Portale, non più emoji */
.chat-clip { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 999px; margin: 0;
  cursor: pointer; background: var(--proj, var(--lilla-chiaro)); color: var(--proj-testo, var(--nero)); }
.chat-clip .tile-icon { width: 21px; height: 21px; }
/* con i due pulsanti tondi il campo è più stretto: «Scrivi un messaggio» su una riga sola anche sui telefoni piccoli */
.chat-riga { gap: 6px; }
.chat-riga textarea { padding-left: 11px; padding-right: 11px; }
.chat-riga textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-errore, .chat-allegato-nome { max-width: 720px; margin: 0 auto 6px; }
.chat-capito { margin-bottom: 120px; }

/* Elenco delle chat (09/11): una scheda per evento, piena del colore dell'evento */
.chat-elenco > .chat-voce { display: flex; align-items: center; gap: 12px; margin: 10px 0; text-decoration: none;
  background: var(--proj, var(--lilla-chiaro)); border-color: var(--proj, var(--lilla-chiaro)); color: var(--proj-testo, var(--nero)); }
.chat-voce-testo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.chat-voce-ultimo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.chat-voce .freccia { font-size: 1.8rem; line-height: 1; opacity: .55; }
.chat-titolo { margin-bottom: 0; font-size: 1.4rem; }   /* più piccolo (Samuele, 11/11) */
.chat-sotto { margin-top: 2px; }

/* reazioni ai messaggi e pausa notturna (09/11) */
.chat-reazioni { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.chat-reazione-form { margin: 0; }
.chat-reazione { border: 1px solid var(--border); background: var(--card); color: var(--fg); border-radius: 999px;
  padding: 1px 8px; font-size: .85rem; line-height: 1.6; cursor: pointer; }
.chat-reazione span { margin-left: 3px; font-weight: 700; }
.chat-reazione.vuota { opacity: .55; }
.chat-reazione.mia { border-color: var(--lilla-testo); background: var(--lilla-chiaro); color: var(--nero); opacity: 1; }
.chat-reazione[disabled] { cursor: default; }
.chat-pausa { position: fixed; left: 0; right: 0; bottom: 64px; z-index: 31; margin: 0; padding: 6px 12px;
  background: var(--azzurro-chiaro); color: var(--nero); }
.chat-scrivi.in-pausa textarea, .chat-scrivi.in-pausa .chat-clip { opacity: .5; pointer-events: none; }
/* aperto è lungo: resta in cima alla chat ma non copre i messaggi mentre si scorre; chiuso resta fisso in alto */
.chat-fissato[open] { position: static; }

/* la chat nei colori dell'evento (Samuele, 09/11): i miei messaggi, Invia, il bordo del messaggio fissato, le reazioni mie */
.chat .chat-fissato { border-left-color: var(--proj, var(--lilla)); }
.chat .chat-mio { background: var(--proj, var(--lilla-chiaro)); color: var(--proj-testo, var(--nero)); }
.chat .chat-mio .chat-ora, .chat .chat-mio .chat-x { color: inherit; opacity: .75; }
.chat .chat-mio .chat-file, .chat .chat-mio a { color: inherit; }
.chat .btn-socio { background: var(--proj, var(--lilla)); color: var(--proj-testo, var(--nero)); }
.chat .chat-reazione.mia { border-color: var(--proj-scuro, var(--lilla-testo)); background: var(--proj, var(--lilla-chiaro));
  color: var(--proj-testo, var(--nero)); }
.chat .chat-riga textarea:focus { border-color: var(--proj, var(--lilla)); }
.chat .chat-tag { background: var(--proj, var(--lilla-chiaro)); color: var(--proj-testo, var(--nero)); }
.chat .chat-mio .chat-tag { background: var(--card); color: var(--fg); }
.chat > p > a, .chat-sotto a { color: var(--proj-scuro, var(--fg)); text-decoration-color: var(--proj); }
@media (prefers-color-scheme: dark) { .chat > p > a, .chat-sotto a { color: var(--proj, var(--fg)); } }
/* senza footer: la lista finisce sopra la barra per scrivere */
.chat .chat-lista { margin-bottom: 96px; }

/* reazioni col tocco lungo (Samuele, 09/11): sotto il messaggio solo quelle già messe; tenendo premuto il messaggio
   compaiono tutte e tre, più grandi, per sceglierne una */
.chat-msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.chat-reazione-form:has(.vuota) { display: none; }
.chat-reazioni:not(:has(.chat-reazione:not(.vuota))) { display: none; }
.chat-msg.scegli { box-shadow: 0 0 0 3px var(--proj, var(--lilla)); }
.chat-msg.scegli .chat-reazioni { display: flex; }
.chat-msg.scegli .chat-reazione-form { display: block; }
.chat-msg.scegli .chat-reazione { font-size: 1.3rem; padding: 4px 12px; opacity: 1; }

/* messaggi raggruppati come WhatsApp (Samuele, 09/11) */
.chat-giorno { align-self: center; margin: 6px 0 0; padding: 3px 12px; border-radius: 999px; font-size: .78rem;
  background: var(--soft); color: var(--muted); }
.chat-giorno:first-child { margin-top: 0; }
.chat-msg.segue { margin-top: -6px; }
.chat-msg.segue .chat-chi strong, .chat-msg.segue .chat-tag { display: none; }
.chat-msg.segue .chat-ora { margin-left: 0; }
.chat-msg.segue:not(.chat-mio) { border-top-left-radius: 4px; }
.chat-msg.segue.chat-mio { border-top-right-radius: 4px; }

/* Admin → Gadget dei sostenitori (09/11) */
.gadget-voce { margin: 10px 0; }
.gadget-voce.gadget-fatto { opacity: .9; }
.gadget-nome { margin: 0 0 8px; }
.gadget-form { margin: 0; }
.gadget-form .gadget-nota { margin-bottom: 6px; font-weight: 400; }
.gadget-form .gadget-data { max-width: 160px; padding: 7px 10px; border: 2px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--fg); font: inherit; }
.gadget-conti { margin: 0 0 8px; }
.gadget-cosa { margin: 0 0 6px; }
.gadget-nota-testo { margin: 0 0 4px; }
.gadget-nota-box { margin: 0 0 6px; }
.gadget-nota-box .gadget-nota { margin: 6px 0; }
.gadget-voce { padding-top: 12px; padding-bottom: 12px; }
.gadget-voce > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.gadget-voce > summary::-webkit-details-marker { display: none; }
.gadget-voce > summary::after { content: "›"; margin-left: auto; font-size: 1.5rem; line-height: 1; opacity: .55;
  transition: transform .15s ease; }
.gadget-voce[open] > summary::after { transform: rotate(90deg); }
.gadget-voce > summary { margin: 0; }
.gadget-stato { margin: 10px 0 8px; }

/* Guide per i soci (Profilo → Guide, 10/11/2026) */
.guida-indice { margin: 0; padding-left: 1.2em; }
.guida-indice li { margin: 4px 0; }
.guida-argomento { scroll-margin-top: 16px; }
.guida-argomento ul { padding-left: 1.2em; }
.guida-argomento li { margin: 6px 0; }

/* --- Chat dell'evento più larga (Samuele, 11/11) ---------------------------------------------------------------
   Nella chat la testata è stretta (body.compatto dal modello): logo, «Portale Soci» e Chat/Admin più piccoli, le 8
   sezioni su una riga sola con la sola icona (il nome tenendo premuto, come Admin), nell'ordine dei colori. */
body.compatto .top { --alto: calc(46px + env(safe-area-inset-top, 0px));
  padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
body.compatto .top-logo img { width: 116px; }
body.compatto .top-title { font-size: .78rem; }
body.compatto .top-riga { min-height: 34px; }
body.compatto .top-admin { width: 34px; height: 34px; border-radius: 11px; }
body.compatto .top-admin .tile-icon { width: 19px; height: 19px; }
body.compatto .nav-icons { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding-top: 6px; padding-bottom: 6px; }
body.compatto .nav-icons a { min-height: 34px; padding: 0; border-radius: 10px; }
body.compatto .nav-nome { display: none; }
body.compatto .nav-icons .tile-icon { width: 18px; height: 18px; }
body.compatto .nav-icons .badge { top: -6px; right: -4px; }
/* su una riga l'ordine dei colori (Samuele, 11/11): rosa chiaro e pieno, lilla, azzurro, verde = Home, Eventi, Corsi,
   News, Documenti, Contatti, Profilo, Volontari; non 4 chiari + 4 pieni */
body.compatto .nav-icons a.tile-rosa { order: 1; }
body.compatto .nav-icons a.tile-rosa-pieno { order: 2; }
body.compatto .nav-icons a.tile-lilla { order: 3; }
body.compatto .nav-icons a.tile-lilla-pieno { order: 4; }
body.compatto .nav-icons a.tile-azzurro { order: 5; }
body.compatto .nav-icons a.tile-azzurro-pieno { order: 6; }
body.compatto .nav-icons a.tile-verde-chiaro { order: 7; }
body.compatto .nav-icons a.tile-verde-pieno { order: 8; }
/* l'anello attorno a Chat/Admin (pagina aperta) sporge di 5 px sotto: la testata ha overflow hidden e lo tagliava */
.top { padding-bottom: 7px; }

/* --- Animazione tra le pagine (Samuele, 11/11) ---------------------------------------------------------------
   View Transitions tra documenti (Chrome/Android, Safari 18.2+; altrove si cambia pagina e basta). Ogni pulsante ha
   un nome per sezione, uguale nei riquadri della Home, nel menu in alto e nella testata stretta della chat: dalla
   Home i riquadri salgono e diventano il menu, tornando alla Home scendono; la chat stringe e riallarga il menu
   (anche col tasto indietro). Solo da e verso la Home o la chat: tra le altre pagine la salta vt.js. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.top-logo { view-transition-name: pt-logo; }
.top-title { view-transition-name: pt-titolo; }
.top-chat, .tiles-home .tile-chat { view-transition-name: pt-chat; }
.top-admin:not(.top-chat), .tiles-home .tile-admin { view-transition-name: pt-admin; }
.nav-icons a.tile-rosa { view-transition-name: pt-home; }
.nav-icons a.tile-rosa-pieno, .tiles-home .tile-rosa-pieno { view-transition-name: pt-eventi; }
.nav-icons a.tile-lilla, .tiles-home .tile-lilla { view-transition-name: pt-corsi; }
.nav-icons a.tile-lilla-pieno, .tiles-home .tile-lilla-pieno { view-transition-name: pt-news; }
.nav-icons a.tile-azzurro, .tiles-home .tile-azzurro { view-transition-name: pt-documenti; }
.nav-icons a.tile-azzurro-pieno, .tiles-home .tile-azzurro-pieno { view-transition-name: pt-contatti; }
.nav-icons a.tile-verde-chiaro, .tiles-home .tile-verde-chiaro { view-transition-name: pt-profilo; }
.nav-icons a.tile-verde-pieno, .tiles-home .tile-verde-pieno { view-transition-name: pt-volontari; }
::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.3, .8, .3, 1); }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: .25s; }

/* --- Messaggio fissato dopo «Ho capito» (Samuele, 11/11): una riga piccola sopra la barra per scrivere ---------- */
.chat-fissato-mini { max-width: 720px; margin: 0 auto 6px; font-size: .8rem; color: var(--muted); }
.chat-fissato-mini summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-fissato-mini p { margin: 4px 0 2px; max-height: 40vh; overflow-y: auto; color: var(--fg); }
.chat.chat-confermato .chat-lista { margin-bottom: 120px; }
.chat.chat-confermato .chat-pausa { bottom: 88px; }

/* puntina del messaggio fissato (11/11): icona del Portale nel colore dell'evento */
.chat-fissato summary .tile-icon, .chat-fissato-mini summary .tile-icon { width: 1.1em; height: 1.1em; vertical-align: -.2em;
  color: var(--proj-scuro, var(--lilla-testo)); }
@media (prefers-color-scheme: dark) {
  .chat-fissato summary .tile-icon, .chat-fissato-mini summary .tile-icon { color: var(--proj, var(--lilla)); }
}

/* barra per scrivere (Samuele, 11/11): graffetta, campo e freccia di Invia centrati fra loro, Invia tondo senza scritta */
.chat-riga { align-items: center; }
/* la freccia uguale alla graffetta (Samuele, 11/11): stesso pulsante tondo, stesso colore, stessa icona a tratto */
.chat .chat-invia { flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 999px;
  box-shadow: none; display: grid; place-items: center;
  background: var(--proj, var(--lilla-chiaro)); color: var(--proj-testo, var(--nero)); }
.chat-invia .tile-icon { width: 21px; height: 21px; }

/* menu della graffetta (Samuele, 11/11): Foto e File PDF in una schedina sopra il pulsante */
.chat-allega { position: relative; flex: none; }
.chat-allega > summary { list-style: none; }
.chat-allega > summary::-webkit-details-marker { display: none; }
.chat-allega[open] > summary { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--proj, var(--lilla)); }
.chat-allega-menu { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 35; min-width: 170px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.chat-allega-voce { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 12px;
  font-weight: 700; cursor: pointer; color: var(--fg); }
.chat-allega-voce:hover, .chat-allega-voce:active { background: var(--soft); }
.chat-allega-voce .tile-icon { width: 21px; height: 21px; flex: none; color: var(--proj-scuro, var(--lilla-testo)); }
@media (prefers-color-scheme: dark) { .chat-allega-voce .tile-icon { color: var(--proj, var(--lilla)); } }

/* Modulo di adesione (Samuele, 13/11): Statuto e informative in un riquadro da far scorrere fino in fondo */
.adesione-blocco { text-align: left; }
.leggi-box { max-height: 55vh; overflow-y: auto; padding: 12px 14px; margin: 10px 0 6px; background: var(--card);
  border: 1px solid var(--line, #e6e0ec); border-radius: 10px; font-size: .95rem; }
.leggi-box.pre { white-space: pre-line; }
.leggi-box:focus { outline: 2px solid var(--lilla); }
.statuto-pagine { max-height: 70vh; padding: 6px; background: #fff; }
.statuto-pagine img { display: block; width: 100%; height: auto; margin: 0 0 8px; border: 1px solid #eee; }
.adesione-blocco.letto [data-leggi-avviso] { visibility: hidden; }
.adesione-blocco .check:has(input[disabled]) { opacity: .6; }
.passi-adesione { display: flex; justify-content: center; gap: 6px; padding: 0; margin: 10px 0 18px; list-style: none;
  counter-reset: passo; flex-wrap: wrap; }
.passi-adesione li { counter-increment: passo; font-size: .85rem; padding: 4px 10px; border-radius: 999px;
  background: var(--soft); color: var(--muted); }
.passi-adesione li::before { content: counter(passo) ". "; }
.passi-adesione li.attivo { background: var(--lilla); color: #1a1a1a; font-weight: 700; }
.passi-adesione li.fatto { background: var(--verde, #9bcec8); color: #1a1a1a; }
.form label.check input[type=radio] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--lilla-testo); }