:root {
  --green-900: #1f4d2c;
  --green-700: #2f7a44;
  --green-500: #4ea35e;
  --terracotta-600: #b65a32;
  --terracotta-500: #d77a4f;
  --cream-50: #fbf7ee;
  --cream-100: #f4ecd8;
  --ink-900: #1d2a23;
  --ink-700: #3a4a40;
  --ink-500: #6b7a70;
  --danger: #b3321f;
  --shadow: 0 8px 30px rgba(31, 77, 44, 0.08);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

/* L'attributo `hidden` deve sempre nascondere, anche su elementi con un
   `display` esplicito (grid/flex): le regole d'autore battono lo user-agent. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--cream-50);
  color: var(--ink-900);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

a {
  color: var(--green-700);
}

a:hover {
  color: var(--terracotta-600);
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 2.25rem);
}

/* ---------- Header ---------- */
.site-header {
  background: white;
  border-bottom: 1px solid var(--cream-100);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--green-900);
  font-weight: 600;
}

.brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

/* Azioni account sempre visibili nella barra, accanto all'hamburger. */
.header-azioni {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-user a,
.header-user .link-button {
  text-decoration: none;
  color: var(--ink-700);
}

.header-user a:hover,
.header-user .link-button:hover {
  color: var(--green-900);
}

/* Menù principale: sempre a scomparsa, aperto dall'hamburger. */
.site-nav {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease;
}

.site-nav.is-open {
  grid-template-rows: 1fr;
}

.site-nav a {
  text-decoration: none;
}

.site-nav-inner {
  min-height: 0;
  padding-top: 0.5rem;
}

.site-nav-primary {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.site-nav-primary a {
  display: block;
  font-weight: 500;
  color: var(--green-900);
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid var(--cream-100);
}

.site-nav-primary li:last-child a {
  border-bottom: none;
}

.site-nav-primary a:hover {
  color: var(--terracotta-600);
}

/* Gruppi del menù: intestazione (categoria) con le sotto-voci collassabili
   sotto. L'intestazione è un bottone che apre/chiude il gruppo (accordion);
   di default è chiuso, tranne il gruppo che contiene la pagina corrente. */
.site-nav-gruppo-titolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.7rem 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-500);
  /* reset bottone */
  background: none;
  border: none;
  border-bottom: 1px solid var(--cream-100);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.site-nav-gruppo-titolo:hover {
  color: var(--green-900);
}

.site-nav-gruppo-caret {
  font-size: 0.7rem;
  line-height: 1;
  color: var(--ink-500);
  transition: transform 0.2s ease;
}

.site-nav-gruppo.is-expanded > .site-nav-gruppo-titolo .site-nav-gruppo-caret {
  transform: rotate(180deg);
}

/* Respiro tra le sezioni del menù admin. */
#admin-menu .site-nav-gruppo + .site-nav-gruppo {
  margin-top: 0.35rem;
}

/* Collasso animato delle sotto-voci (stesso trucco grid del pannello). */
.site-nav-sub-wrap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.24s ease;
}

.site-nav-gruppo.is-expanded > .site-nav-sub-wrap {
  grid-template-rows: 1fr;
}

.site-nav-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.site-nav-sub a {
  padding-left: 1.4rem;
}

/* Voce di menù attiva (sotto-voce o voce singola): evidenziata in terracotta. */
.site-nav-primary a.active,
.site-nav-sub a.active {
  color: var(--terracotta-600);
  font-weight: 600;
}

/* Intestazione del gruppo che contiene la pagina corrente: segnalata in modo
   più tenue (verde scuro) per non competere con la sotto-voce attiva. */
.site-nav-gruppo-titolo.is-sezione-attiva {
  color: var(--green-900);
}

/* Sezione utente in cima al menù (Area socio / Il mio account), separata dal
   resto da un divisore sotto. Il logout non è più qui: è un bottone nell'area. */
.site-nav-utente {
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--cream-100);
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--green-900);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menù admin: si apre dal bottone "Admin" della barra account, con lo stesso
   meccanismo a scomparsa dell'hamburger (riusa .site-nav). */
.admin-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-menu-caret {
  font-size: 0.7em;
  transition: transform 0.25s ease;
}

.admin-menu-toggle[aria-expanded="true"] .admin-menu-caret {
  transform: rotate(180deg);
}

.admin-nav-badge {
  background: var(--terracotta-600);
  color: white;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.05rem 0.45rem;
}

#admin-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#admin-menu a.active {
  color: var(--terracotta-600);
  font-weight: 600;
}

/* Su schermi stretti il nome esteso non ci sta accanto ai link account. */
@media (max-width: 640px) {
  .brand span {
    display: none;
  }
  .header-user {
    gap: 0.75rem;
  }
}

.inline-form {
  display: inline;
  margin: 0;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-700);
  cursor: pointer;
  font: inherit;
}

.link-button:hover {
  color: var(--terracotta-600);
}

.user-pill {
  font-size: 0.85rem;
  color: var(--ink-500);
  background: var(--cream-100);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

/* ---------- Hero / Home ---------- */
.hero {
  padding: 3rem 0 2rem;
}

.hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 0 1rem;
  color: var(--green-900);
}

.hero p {
  font-size: 1.1rem;
  color: var(--ink-700);
  max-width: 680px;
}

.placeholder {
  margin: 2rem 0 4rem;
  padding: 2rem;
  border: 1px dashed var(--cream-100);
  border-radius: var(--radius);
  background: white;
  color: var(--ink-500);
}

/* ---------- WIP ---------- */
body.wip {
  background:
    radial-gradient(circle at 20% 0%, rgba(78, 163, 94, 0.18), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(215, 122, 79, 0.18), transparent 55%),
    var(--cream-50);
}

.wip-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
}

.wip-card {
  background: white;
  padding: 3rem 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 540px;
  text-align: center;
}

.wip-logo {
  width: 280px;
  height: 280px;
  max-width: 70vw;
  max-height: 70vw;
  border-radius: 50%;
  margin-bottom: 1.5rem;
}

.wip-card h1 {
  margin: 0 0 1rem;
  color: var(--green-900);
  font-size: 1.75rem;
}

.wip-tagline {
  color: var(--ink-700);
  margin: 0 0 1.5rem;
}

/* Mini-agenda eventi in homepage */
.home-agenda {
  margin: 0 0 2rem;
  text-align: left;
}

.home-agenda-titolo {
  margin: 0 0 0.5rem;
  color: var(--green-900);
  font-size: 1.15rem;
  text-align: center;
}

.home-agenda-lista {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.home-agenda-lista li + li {
  border-top: 1px solid var(--cream-100);
}

.home-agenda-riga {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.65rem 0.35rem;
  text-decoration: none;
  color: var(--ink-900);
}

.home-agenda-riga:hover {
  color: var(--green-900);
  background: var(--cream-50);
}

.home-agenda-data {
  flex: 0 0 5.5rem;
  color: var(--terracotta-600);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.home-agenda-evento {
  flex: 1;
  font-weight: 500;
}

.home-agenda-freccia {
  color: var(--ink-500);
  font-size: 1.1rem;
  align-self: center;
}

.home-agenda-tutti {
  text-align: center;
}

/* Badge "Evento del territorio": eventi promossi ma non organizzati dalla Pro Loco */
.badge-territorio {
  display: inline-block;
  background: var(--cream-100);
  color: var(--terracotta-600);
  border: 1px solid var(--terracotta-500);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
}

.badge-territorio-mini {
  padding: 0.05rem 0.5rem;
  font-size: 0.68rem;
  margin: 0 0 0 0.3rem;
  vertical-align: middle;
}

.badge-territorio-slide {
  margin-bottom: 0.5rem;
  background: rgba(251, 247, 238, 0.92);
}

/* Pillola organizzatore sull'anteprima delle card eventi del territorio */
.evento-card-media {
  position: relative;
}

.evento-card-org {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100% - 1.2rem);
  background: rgba(255, 255, 255, 0.93);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-900);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.evento-card-org-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
}

.evento-card-org-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Vetrina del territorio (/organizzazioni) --- */
.org-pagina {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.org-pagina h1 {
  color: var(--green-900);
}

/* Riga del titolo sezione: titolo a sinistra, toggle vista a destra. */
.org-pagina-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.org-pagina-header h1 {
  margin: 0;
}

.org-intro {
  color: var(--ink-700);
  margin: 0 0 2rem;
  max-width: 640px;
}

.org-cta {
  display: inline-block;
  background: var(--cream-100);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  margin: 2.5rem 0 0;
  color: var(--ink-700);
}

.org-cta a {
  font-weight: 600;
}

.org-proponi {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
  max-width: 720px;
}

.org-proponi h1 {
  color: var(--green-900);
}

.org-proponi-grazie {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem;
  text-align: center;
  margin-top: 1rem;
}

.org-proponi-grazie h1 {
  margin-top: 0;
}

.org-proponi-grazie p {
  color: var(--ink-700);
}

.org-proponi-identita {
  background: var(--cream-50);
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  color: var(--ink-900);
}

.org-proponi-identita-nota {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--ink-500);
}

.org-proponi-referente-nota {
  margin: 0 0 0.8rem;
}

/* Testo lungo su più righe: checkbox allineata alla prima riga, non centrata */
.form-evento .checkbox-inline.org-proponi-consenso {
  align-items: flex-start;
  margin-top: 1rem;
}

.form-evento .checkbox-inline.org-proponi-consenso input {
  margin-top: 0.25rem;
}

/* Toolbar vetrina attività: ricerca + chip categoria */
.org-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
}

.org-ricerca {
  width: 100%;
  max-width: 480px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  font-size: 1rem;
  background: white;
}

.org-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Toggle Elenco/Mappa: affiancato al titolo della sezione, così è chiaramente
   un selettore di vista e non si confonde con un pulsante "cerca". */
.org-vista-toggle,
.soci-vista-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: white;
  border: 1px solid var(--cream-100);
  border-radius: 999px;
}

.soci-vista-toggle {
  margin: 1rem 0;
}

.org-vista-btn,
.soci-vista-btn {
  font: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--ink-700);
  padding: 0.4rem 1.05rem;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}

.org-vista-btn:hover,
.soci-vista-btn:hover {
  color: var(--green-900);
}

.org-vista-btn[aria-pressed="true"],
.soci-vista-btn[aria-pressed="true"] {
  background: var(--green-700);
  color: white;
}

/* Vista mappa */
.org-mappa-canvas,
.soci-mappa-canvas {
  height: clamp(360px, 60vh, 600px);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  z-index: 0; /* tiene i controlli Leaflet sotto header/menu del sito */
}

.org-mappa-nota,
.org-mappa-vuoto,
.soci-mappa-nota,
.soci-mappa-vuoto {
  margin: 0.7rem 0 0;
  color: var(--ink-500);
  font-size: 0.9rem;
}

/* Pin della mappa soci: pallino verde; con badge numerico se più soci allo
   stesso indirizzo. Reso come divIcon (niente immagini marker). */
.soci-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--green-700);
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Popup mappa soci: elenco delle persone a quell'indirizzo */
.soci-popup {
  min-width: 170px;
}

.soci-popup-indirizzo {
  display: block;
  color: var(--ink-500);
  font-size: 0.8rem;
  margin-bottom: 0.45rem;
}

.soci-popup-item {
  padding: 0.4rem 0;
  border-top: 1px solid var(--cream-100);
}

.soci-popup-item:first-of-type {
  border-top: none;
}

.soci-popup-nome {
  color: var(--green-900);
  font-weight: 600;
}

.soci-popup-cell {
  display: block;
  color: var(--ink-700);
  font-size: 0.85rem;
}

.soci-popup-link {
  font-weight: 600;
  font-size: 0.85rem;
}

/* Contenuto del popup di un marker */
.org-popup {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 150px;
}

.org-popup-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 0.2rem;
}

.org-popup-nome {
  color: var(--green-900);
  font-size: 1rem;
}

.org-popup-descrizione {
  color: var(--ink-700);
  font-size: 0.85rem;
}

.org-popup-indirizzo {
  color: var(--ink-500);
  font-size: 0.8rem;
}

.org-popup-link {
  margin-top: 0.35rem;
  font-weight: 600;
}

.org-chip {
  font: inherit;
  cursor: pointer;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--cream-100);
  background: white;
  color: var(--ink-700);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.org-chip:hover {
  border-color: var(--green-500);
}

.org-chip.is-active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: white;
}

.org-nessun-risultato {
  color: var(--ink-500);
  margin-top: 1.5rem;
}

.org-card-categorie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
}

.org-card-cat {
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--cream-100);
  color: var(--ink-700);
}

.org-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}

.org-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem;
  text-decoration: none;
  color: inherit;
}

.org-card:hover .org-card-nome {
  color: var(--terracotta-600);
}

.org-card-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 0;
}

.org-card-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--green-700), var(--terracotta-500));
  color: white;
  font-size: 1.6rem;
  font-weight: 700;
}

.org-card-nome {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  color: var(--green-900);
}

.org-card-descrizione {
  margin: 0 0 0.3rem;
  color: var(--ink-700);
  font-size: 0.95rem;
}

.org-card-indirizzo {
  margin: 0;
  color: var(--ink-500);
  font-size: 0.85rem;
}

/* ---------- Esplora Gaiofana (landing vetrina) ---------- */
.esplora-sezioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.esplora-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem;
}

.esplora-card-testa {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.esplora-card-testa h2 {
  margin: 0;
  font-size: 1.4rem;
}

.esplora-card-testa h2 a {
  color: var(--green-900);
  text-decoration: none;
}

.esplora-card-testa h2 a:hover {
  color: var(--terracotta-600);
}

.esplora-conteggio {
  background: var(--cream-100);
  color: var(--ink-700);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.1rem 0.6rem;
}

.esplora-card-intro {
  color: var(--ink-700);
  margin: 0.6rem 0 1.2rem;
  flex-grow: 1;
}

.esplora-anteprima {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  padding: 0;
}

.esplora-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--cream-50);
}

.esplora-logo-placeholder {
  background: linear-gradient(135deg, var(--green-700), var(--terracotta-500));
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
}

.esplora-vuoto {
  margin: 0 0 1.4rem;
}

.esplora-cta {
  align-self: flex-start;
}

/* Scheda organizzazione: più larga del container standard, è una landing */
.container.org-dettaglio {
  max-width: 1280px;
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}

.org-scheda {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.org-copertina {
  margin: 0;
}

.org-copertina img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

.org-testata {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.5rem 1.8rem 0;
}

.org-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 14px;
  flex-shrink: 0;
}

.org-copertina + .org-testata .org-logo {
  margin-top: -2.6rem;
  background: white;
  box-shadow: var(--shadow);
  padding: 6px;
}

.org-testata h1 {
  margin: 0 0 0.25rem;
  color: var(--green-900);
  font-size: 1.6rem;
}

.org-descrizione-breve {
  margin: 0;
  color: var(--ink-700);
}

.org-corpo {
  padding: 1.5rem 1.8rem 2rem;
}

.org-corpo h2 {
  color: var(--green-900);
  font-size: 1.15rem;
  margin: 1.6rem 0 0.6rem;
}

.org-corpo section:first-child h2 {
  margin-top: 0;
}

.org-chi-siamo p {
  color: var(--ink-700);
  /* La pagina è larga ma le righe di testo lunghe si leggono male */
  max-width: 80ch;
}

.org-eventi-passati .home-agenda-data {
  flex-basis: 7.5rem;
}

.org-eventi-passati .home-agenda-riga {
  opacity: 0.75;
}

.org-eventi-passati .home-agenda-riga:hover {
  opacity: 1;
}

.org-info {
  background: var(--cream-50);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin-top: 1.6rem;
}

.org-info h2 {
  margin-top: 0;
}

.org-info dl {
  display: grid;
  /* min(100%, 280px): le colonne non scendono mai sotto 280px (niente "due
     colonne strette"), e su schermi più stretti impilano in una sola senza
     mai sforare il contenitore. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1rem 2rem;
  margin: 0;
}

.org-info dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  margin-bottom: 0.15rem;
}

.org-info dd {
  margin: 0;
}

.org-orari {
  white-space: pre-line;
}

.org-mappa {
  margin-top: 0.6rem;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 0; /* tiene i controlli Leaflet sotto header/menu del sito */
}

/* Link social come bottoni a tema (Facebook/Instagram/Sito), su una riga
   centrata tra "Chi siamo" e "Informazioni". */
.org-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.4rem 0 0.4rem;
}

.org-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  transition: filter 0.15s ease, background 0.15s ease, transform 0.05s ease;
}

.org-social a:hover { color: #fff; filter: brightness(1.07); }
.org-social a:active { transform: translateY(1px); }

.org-social svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.org-social .is-facebook { background: #1877f2; }
.org-social .is-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.org-social .is-sito { background: var(--green-700); }
.org-social .is-sito:hover { filter: none; background: var(--green-900); }

.org-mappa-link {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
}

/* "Organizzato da" nel dettaglio evento */
.evento-organizzatori {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  align-items: center;
}

.evento-organizzatore {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.evento-organizzatore-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
}

/* Iscrizioni gestite su un sito esterno */
.evento-iscrizioni-esterne {
  margin-top: 1.5rem;
  text-align: center;
}

.evento-iscrizioni-esterne-hint {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-500);
}

.wip-status {
  display: inline-block;
  background: var(--cream-100);
  color: var(--green-900);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.wip-contact {
  color: var(--ink-700);
  margin: 0;
}

.wip-login-hint {
  margin: 0.8rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-700);
}

.wip-login-hint + .wip-contact {
  margin-top: 1.5rem;
}

.wip-facebook,
.wip-whatsapp {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.wip-facebook + .wip-whatsapp {
  margin-top: 1.2rem;
  padding-top: 0;
  border-top: none;
}

.wip-social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.wip-social-label {
  margin: 0;
  color: var(--ink-700);
  font-weight: 500;
}

.btn-whatsapp,
.btn-facebook,
.btn-instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.3rem;
  color: white;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.05s ease;
}

.btn-whatsapp { background: #25D366; }
.btn-whatsapp:hover { background: #1da851; color: white; }

.btn-facebook { background: #1877F2; }
.btn-facebook:hover { background: #145dbf; color: white; }

.btn-instagram { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.btn-instagram:hover { filter: brightness(0.9); color: white; }

.btn-whatsapp:active,
.btn-facebook:active,
.btn-instagram:active {
  transform: translateY(1px);
}

.btn-whatsapp svg,
.btn-facebook svg,
.btn-instagram svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.wip-qr {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  background: white;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(31, 77, 44, 0.08);
}

.wip-qr-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-500);
}

/* Su telefono i margini di cornice e riquadro lasciavano al testo meno di
   metà schermo: si stringono, e lo slideshow prende tutta la larghezza. */
@media (max-width: 600px) {
  .wip-main {
    padding: 1.25rem 0.75rem 2.5rem;
  }

  .wip-card {
    padding: 1.75rem 1.25rem;
  }

  .wip-card .hero-slideshow {
    max-width: none;
  }
}

/* Il QR serve a chi guarda da un computer: dal telefono non si inquadra. */
@media (pointer: coarse) {
  .wip-qr,
  .wip-qr-hint {
    display: none;
  }
}

/* ---------- Auth ---------- */
body.auth {
  background:
    radial-gradient(circle at 50% 0%, rgba(78, 163, 94, 0.18), transparent 55%),
    var(--cream-50);
}

.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  min-height: 100vh;
}

.auth-card {
  background: white;
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.auth-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
}

.auth-card h1 {
  margin: 0;
  color: var(--green-900);
}

.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  font-size: 0.9rem;
  color: var(--ink-700);
}

.auth-card input {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--cream-50);
}

.auth-card input:focus {
  outline: 2px solid var(--green-500);
  outline-offset: 1px;
  background: white;
}

.auth-error {
  background: #fdecea;
  color: var(--danger);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.auth-back {
  margin: 0;
  font-size: 0.9rem;
}

.auth-back a {
  text-decoration: none;
}

.auth-intro {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-500);
  text-align: left;
}

.auth-info {
  background: #e8f3ec;
  color: var(--green-900);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.auth-card label.checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.auth-card label.checkbox input {
  width: auto;
  margin-top: 0.2rem;
}

.auth-card-sub {
  padding: 1rem 2.5rem;
  margin-top: 0.75rem;
}

.form-success {
  background: #e8f3ec;
  color: var(--green-900);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

/* ---------- Admin ---------- */
.admin {
  padding-top: 2.5rem; padding-bottom: 4rem;
}

.admin h1 {
  color: var(--green-900);
  margin-top: 0;
}

.admin-tutto-ok {
  color: var(--green-700);
}

.card {
  background: white;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}

.card h2 {
  margin-top: 0;
  color: var(--green-900);
}

.state-on {
  color: var(--terracotta-600);
}

.state-off {
  color: var(--green-700);
}

.toggle-form {
  margin-top: 1rem;
}

.banner-warning {
  margin: 1rem auto;
  padding: 0.75rem 1rem;
  background: #fff5e6;
  border: 1px solid #f3d6a3;
  color: #7a4a10;
  border-radius: 8px;
}

.banner-warning a {
  color: #7a4a10;
  font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  border: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.05s ease, background 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--green-700);
  color: white;
}

.btn-primary:hover {
  background: var(--green-900);
}

.btn-danger {
  background: var(--terracotta-600);
  color: white;
}

.btn-danger:hover {
  background: #8e4424;
}

/* ---------- Area soci ---------- */
.area-soci {
  padding-top: 2rem; padding-bottom: 4rem;
}

.area-soci h1 {
  color: var(--green-900);
  margin-top: 0.6rem;
}

.status-ok h2 { color: var(--green-700); }
.status-err h2 { color: var(--danger); }

.hint {
  color: var(--ink-500);
  font-size: 0.9rem;
}

/* ---------- Admin: iscrizioni ---------- */
.badge {
  display: inline-block;
  background: var(--terracotta-600);
  color: white;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.audit-filtri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem 1rem;
  align-items: end;
  background: white;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 1rem 0 1.5rem;
}

.audit-filtri label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--ink-700);
}

.audit-filtri select,
.audit-filtri input[type="date"] {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  background: var(--cream-50);
  font-size: 0.95rem;
}

.audit-filtri-azioni {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.search-form {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.search-form input[type="search"] {
  flex: 1 1 280px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  font-size: 1rem;
  background: white;
}

.filtri-stato {
  display: flex;
  gap: 0.4rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

/* Selettore dell'anno associativo, sopra i filtri per stato. */
.filtro-anno {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  color: var(--ink-700);
}

.filtro-anno select {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  background: white;
  font: inherit;
  color: var(--ink-700);
}

.filtri-stato a {
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--cream-100);
  color: var(--ink-700);
  font-size: 0.92rem;
}

.filtri-stato a.active {
  background: var(--green-700);
  color: white;
  border-color: var(--green-700);
}

.tabella-iscrizioni {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.tabella-iscrizioni th,
.tabella-iscrizioni td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--cream-100);
  font-size: 0.93rem;
}

.tabella-iscrizioni th {
  background: var(--cream-100);
  color: var(--green-900);
  font-weight: 600;
}

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

/* Intestazioni ordinabili: l'intera cella è cliccabile, la colonna attiva
   è evidenziata e la freccia indica la direzione corrente. */
.tabella-iscrizioni th.th-ord {
  padding: 0;
}
.tabella-iscrizioni th.th-ord a {
  display: block;
  padding: 0.7rem 0.85rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.tabella-iscrizioni th.th-ord a:hover {
  background: #e9e2d2;
}
.tabella-iscrizioni th.th-ord-attiva {
  color: var(--terracotta-600);
}

/* Link "Vedi tutto →" in fondo a una card della dashboard admin. */
.card-vedi-tutto {
  margin: 0.9rem 0 0;
  font-weight: 600;
}

.stato {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: capitalize;
}

.stato-in_attesa_pagamento { background: #fdf2cc; color: #8a6b00; }
.stato-pagamento_dichiarato { background: #ffe8d4; color: #a14400; }
.stato-pronto_alla_consegna { background: #d9e9f9; color: #1b5687; }
.stato-confermata { background: #d8efde; color: #1d5b2a; }
.stato-rifiutata { background: #fdecea; color: var(--danger); }

.empty {
  text-align: center;
  color: var(--ink-500);
  padding: 2rem;
}

.iscrizione-detail .azione-form {
  border-top: 1px solid var(--cream-100);
  padding-top: 1rem;
  margin-top: 1rem;
}

.iscrizione-detail .azione-form:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.inline-label {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.9rem;
  color: var(--ink-700);
}

.inline-label input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--cream-50);
}

.flash-success {
  background: #e8f5ec;
  color: #1d5b2a;
}

.password-card {
  border: 2px solid var(--terracotta-500);
}

.password-value {
  display: inline-block;
  font-size: 1.15rem;
  padding: 0.3rem 0.6rem;
  background: var(--cream-50);
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline li {
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--cream-100);
  font-size: 0.93rem;
}

.timeline li:last-child {
  border-bottom: none;
}

.riepilogo.larga {
  grid-template-columns: 160px 1fr;
}

.riepilogo.larga dd {
  text-align: left;
}

/* ---------- Iscrizione (landing + form) ---------- */
.iscrizione-landing {
  padding-top: 2.5rem; padding-bottom: 4rem;
}

.iscrizione-hero {
  padding: 1rem 0 2rem;
}

.iscrizione-hero h1 {
  color: var(--green-900);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin: 0 0 1rem;
}

.iscrizione-lead {
  font-size: 1.1rem;
  color: var(--ink-700);
  max-width: 720px;
}

.iscrizione-cta-block {
  margin: 1.5rem 0 0;
}

.iscrizione-cta-hint {
  color: var(--ink-500);
  font-size: 0.95rem;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.cards-grid .card {
  margin-bottom: 0;
  padding: 1.5rem;
}

.cards-grid .amount {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--terracotta-600);
  margin: 0.3rem 0 0.8rem;
}

.card-note {
  font-size: 0.95rem;
  color: var(--ink-700);
  background: var(--cream-50);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  margin-top: 1rem;
}

.plain-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.plain-list li {
  padding: 0.3rem 0;
}

.iscrizione-condizioni {
  padding: 1.8rem 2rem;
}

.iscrizione-condizioni ul {
  padding-left: 1.2rem;
}

.iscrizione-condizioni li {
  margin-bottom: 0.7rem;
}

.btn-lg {
  padding: 0.9rem 1.6rem;
  font-size: 1.05rem;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* ---------- Form iscrizione ---------- */
.iscrizione-form-page {
  padding-top: 2rem; padding-bottom: 4rem;
}

.iscrizione-form-page h1 {
  color: var(--green-900);
  margin-bottom: 0.4rem;
}

.iscrizione-form {
  margin-top: 1.5rem;
}

.iscrizione-form fieldset {
  background: white;
  border: 1px solid var(--cream-100);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.2rem;
  margin: 0 0 1.5rem;
  box-shadow: var(--shadow);
}

.iscrizione-form legend {
  float: left;
  width: 100%;
  padding: 0 0 0.7rem;
  margin: 0 0 1rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--green-900);
  border-bottom: 1px solid var(--cream-100);
}

/* Tutti i fratelli, non solo il primo: se il primo è [hidden] (campi
   minori/maggiorenni) il successivo resterebbe accanto alla legend flottante. */
.iscrizione-form fieldset > legend ~ * {
  clear: both;
}

.iscrizione-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.92rem;
  color: var(--ink-700);
  margin-bottom: 1rem;
  flex: 1 1 0;
}

.iscrizione-form input[type="text"],
.iscrizione-form input[type="email"],
.iscrizione-form input[type="tel"],
.iscrizione-form input[type="date"],
.iscrizione-form input[type="number"],
.iscrizione-form select,
.iscrizione-form textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--cream-50);
  font-family: inherit;
  resize: vertical;
}

.iscrizione-form input:focus,
.iscrizione-form select:focus,
.iscrizione-form textarea:focus {
  outline: 2px solid var(--green-500);
  outline-offset: 1px;
  background: white;
}

.iscrizione-form .form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.iscrizione-form .form-row > label {
  min-width: 140px;
}

.iscrizione-form .grow-2 {
  flex-grow: 2;
}

.field-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 0.1rem;
}

.quota-ridotta-nota {
  background: var(--cream-100);
  border-left: 3px solid var(--green-700);
  color: var(--ink-700);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  font-size: 0.95rem;
  max-width: 720px;
}

.form-error-banner {
  background: #fdecea;
  color: var(--danger);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

/* Stesso riquadro per i messaggi di conferma: deve battere i colori qui sopra. */
.form-error-banner.flash-success {
  background: #e8f5ec;
  color: #1d5b2a;
}

.radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0 1rem;
}

.radio-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.3rem !important;
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  padding: 0.8rem !important;
  background: var(--cream-50);
  cursor: pointer;
  margin: 0 !important;
  position: relative;
  transition: border-color 0.1s ease, background 0.1s ease;
}

.radio-card:has(input:checked) {
  border-color: var(--green-700);
  background: white;
  box-shadow: 0 0 0 2px rgba(78, 163, 94, 0.15);
}

.radio-card input[type="radio"] {
  margin: 0;
}

.radio-card-amount {
  font-weight: 600;
  color: var(--green-900);
}

.radio-card-note {
  font-size: 0.82rem;
  color: var(--ink-500);
}

.radio-card-input {
  width: 100%;
  margin-top: 0.3rem;
}

.checkbox {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.6rem !important;
  margin-bottom: 0.6rem !important;
}

.checkbox input {
  margin-top: 0.2rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.btn-link {
  background: none;
  border: none;
  color: var(--green-700);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.btn-link:hover {
  color: var(--terracotta-600);
}

/* ---------- Pagina grazie ---------- */
.iscrizione-grazie {
  padding-top: 2rem; padding-bottom: 4rem;
  max-width: 760px;
}

.status-card {
  text-align: center;
}

.status-card h1 {
  margin-top: 0;
  color: var(--green-900);
}

.status-wait h1 {
  color: var(--terracotta-600);
}

.status-banner {
  background: #e8f5ec;
  color: #1d5b2a;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  margin-top: 1rem;
}

.riepilogo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1.5rem;
  margin: 0;
}

.riepilogo dt {
  color: var(--ink-700);
}

.riepilogo dd {
  margin: 0;
  text-align: right;
}

.riepilogo .totale {
  border-top: 1px solid var(--cream-100);
  padding-top: 0.6rem;
  margin-top: 0.4rem;
  font-size: 1.1rem;
  color: var(--green-900);
}

.pagamento .causale {
  background: var(--cream-50);
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95rem;
  display: inline-block;
  margin-right: 0.4rem;
}

.pagamento .hint {
  color: var(--ink-500);
  font-size: 0.9rem;
}

.dichiara-form {
  margin-top: 1.2rem;
  border-top: 1px solid var(--cream-100);
  padding-top: 1.2rem;
}

.iscrizione-link-permanente {
  margin-top: 1.5rem;
  color: var(--ink-500);
  font-size: 0.85rem;
  text-align: center;
}

.iscrizione-link-permanente code {
  background: var(--cream-100);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* ---------- Pagine documento (statuto, informativa) ---------- */
.documento {
  padding-top: 2rem; padding-bottom: 4rem;
}

.documento-back {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.documento-back a {
  text-decoration: none;
}

.documento-corpo {
  background: white;
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  line-height: 1.6;
}

.documento-corpo h1 {
  margin-top: 0;
  color: var(--green-900);
}

.documento-corpo h2 {
  color: var(--green-900);
  margin-top: 2rem;
}

.documento-corpo .statuto-art {
  border-top: 2px solid var(--cream-100);
  padding-top: 1rem;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.documento-corpo p {
  margin: 0.6rem 0;
}

.documento-corpo blockquote {
  margin: 0.6rem 0 0.6rem 1.2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--cream-100);
  color: var(--ink-700);
}

.documento-corpo ul,
.documento-corpo ol {
  padding-left: 1.5rem;
}

.documento-corpo table {
  border-collapse: collapse;
  margin-top: 0.8rem;
}

.documento-corpo table th,
.documento-corpo table td {
  border: 1px solid var(--cream-100);
  padding: 0.45rem 0.7rem;
  font-size: 0.95rem;
}

.documento-sottotitolo {
  color: var(--ink-500);
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .documento-corpo {
    padding: 1.5rem 1.1rem;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green-900);
  color: var(--cream-100);
  padding: 2rem 0;
  margin-top: auto;
}

.site-footer a {
  color: var(--cream-50);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.footer-meta {
  color: var(--cream-100);
  opacity: 0.8;
}

@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
  }
  .card {
    padding: 1.25rem;
  }
  .iscrizione-condizioni {
    padding: 1.25rem;
  }
  .iscrizione-form fieldset {
    padding: 1.1rem 1.1rem 0.7rem;
  }
  .cards-grid .card {
    padding: 1.25rem;
  }
  .tabella-iscrizioni th,
  .tabella-iscrizioni td {
    padding: 0.5rem 0.55rem;
  }
  .iscrizione-form .form-row {
    gap: 0.7rem;
  }
}

/* =========================================================================
   Eventi
   ========================================================================= */

/* --- Stato badge aggiuntivo --- */
.stato-archiviata { background: #e3e3df; color: #555; }

/* --- Slideshow homepage --- */
.hero-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 1.5rem;
  overflow: hidden;
  background: white;
}

.hero-slideshow-track {
  position: absolute; inset: 0;
}

.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-slide-logo {
  background: white;
  flex-direction: column;
  text-align: center;
  padding: 1rem;
}

.hero-slide-logo-img {
  max-width: 70%;
  max-height: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.hero-slide-logo h1 {
  display: none; /* l'h1 testuale di accompagnamento è gestito altrove se serve */
}

.hero-slide-evento {
  cursor: pointer;
}

.hero-slide-img,
.hero-slide-img-placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--green-700), var(--terracotta-500));
}

.hero-slide-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.2rem 1.1rem 1.4rem;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0) 100%);
  color: white;
  text-align: left;
}

.hero-slide-data {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.95;
  margin-bottom: 0.2rem;
}

.hero-slide-titolo {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  line-height: 1.25;
  color: white;
}

.hero-slide-sottotitolo,
.hero-slide-luogo {
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.92;
}

.hero-slide-cta {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.18);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.hero-slideshow-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-900);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
}

.hero-slideshow:hover .hero-slideshow-nav,
.hero-slideshow:focus-within .hero-slideshow-nav {
  opacity: 1;
}

.hero-slideshow-nav:hover { background: white; }
.hero-slideshow-prev { left: 0.4rem; }
.hero-slideshow-next { right: 0.4rem; }

.hero-slideshow-indicators {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}

.hero-slideshow-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.25);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}

.hero-slideshow-dot.is-active {
  background: white;
}

/* Indicatori meno visibili sulla slide logo (sfondo chiaro). */
.hero-slide-logo.is-active ~ .hero-slideshow-indicators .hero-slideshow-dot {
  border-color: rgba(0,0,0,0.4);
  background: rgba(0,0,0,0.15);
}
.hero-slide-logo.is-active ~ .hero-slideshow-indicators .hero-slideshow-dot.is-active {
  background: var(--green-700);
}

/* --- Pagina pubblica /eventi --- */
.eventi-pagina {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.eventi-pagina h1 {
  color: var(--green-900);
  margin: 0 0 0.4rem;
}

.eventi-intro {
  color: var(--ink-700);
  margin: 0 0 2rem;
}

/* Header con toggle Elenco/Calendario (riusa .org-vista-toggle / .org-vista-btn) */
.eventi-pagina-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.eventi-pagina-header h1 {
  margin: 0 0 0.2rem;
}

/* --- Vista calendario --- */
.eventi-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem 0 1.2rem;
}

.eventi-cal-mese {
  margin: 0;
  min-width: 11rem;
  text-align: center;
  color: var(--green-900);
  font-size: 1.15rem;
}

.eventi-cal-prev,
.eventi-cal-next {
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--cream-100);
  background: white;
  color: var(--green-700);
  transition: background 0.15s, color 0.15s;
}

.eventi-cal-prev:hover:not(:disabled),
.eventi-cal-next:hover:not(:disabled) {
  background: var(--green-700);
  color: white;
}

.eventi-cal-prev:disabled,
.eventi-cal-next:disabled {
  opacity: 0.3;
  cursor: default;
}

.eventi-cal-griglia {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.eventi-cal-dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding-bottom: 0.2rem;
}

.eventi-cal-giorno {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--cream-100);
  background: var(--cream-50);
  padding: 4px;
  overflow: visible;
}

.eventi-cal-giorno.is-vuota {
  border-color: transparent;
  background: transparent;
}

.eventi-cal-num {
  position: relative;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-700);
}

.eventi-cal-giorno.is-oggi .eventi-cal-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--terracotta-500);
  color: white;
}

/* Casella con evento: cliccabile */
.eventi-cal-giorno.ha-evento {
  cursor: pointer;
  border-color: var(--green-500);
}

.eventi-cal-giorno.ha-evento:hover,
.eventi-cal-giorno.ha-evento:focus-visible,
.eventi-cal-giorno.is-aperto {
  box-shadow: 0 0 0 2px var(--green-500);
  outline: none;
}

/* Casella con miniatura dell'evento di sfondo */
.eventi-cal-giorno.ha-img {
  background-size: cover;
  background-position: center;
}

.eventi-cal-giorno.ha-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(29, 42, 35, 0.78) 0%, rgba(29, 42, 35, 0.05) 55%);
  z-index: 1;
}

.eventi-cal-giorno.ha-img .eventi-cal-num {
  color: white;
}

.eventi-cal-giorno.ha-img.is-oggi .eventi-cal-num {
  color: white;
}

/* Casella "Più eventi": colore pieno */
.eventi-cal-giorno.ha-molti {
  background: var(--green-700);
  border-color: var(--green-700);
}

.eventi-cal-giorno.ha-molti .eventi-cal-num {
  color: white;
}

.eventi-cal-evento-tit {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  font-size: 0.68rem;
  line-height: 1.15;
  font-weight: 600;
  color: white;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eventi-cal-giorno.ha-evento:not(.ha-img):not(.ha-molti) .eventi-cal-evento-tit {
  color: var(--green-900);
}

/* Popup di anteprima ancorato alla casella */
.eventi-cal-popup {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 80vw);
  max-height: 70vh;
  overflow-y: auto;
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(31, 77, 44, 0.22);
  border: 1px solid var(--cream-100);
  padding: 0.5rem;
  cursor: default;
  text-align: left;
}

.eventi-cal-popup-chiudi {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-700);
  font-size: 1.3rem;
  line-height: 1;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  cursor: pointer;
}

.eventi-cal-popup-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  overflow: hidden;
}

.eventi-cal-popup-card + .eventi-cal-popup-card {
  margin-top: 0.5rem;
  border-top: 1px solid var(--cream-100);
  padding-top: 0.5rem;
}

.eventi-cal-popup-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.eventi-cal-popup-corpo {
  padding: 0.5rem 0.3rem 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.eventi-cal-popup-data {
  font-size: 0.74rem;
  color: var(--terracotta-600);
  font-weight: 600;
}

.eventi-cal-popup-titolo {
  color: var(--green-900);
  font-size: 0.95rem;
  line-height: 1.2;
}

.eventi-cal-popup-luogo {
  font-size: 0.8rem;
  color: var(--ink-500);
}

.eventi-cal-popup-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green-700);
  margin-top: 0.15rem;
}

.eventi-cal-popup-card:hover .eventi-cal-popup-link {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .eventi-cal-griglia {
    gap: 3px;
  }
  .eventi-cal-dow {
    font-size: 0.6rem;
  }
  .eventi-cal-giorno {
    border-radius: 7px;
    padding: 2px;
  }
  .eventi-cal-num {
    font-size: 0.68rem;
  }
  .eventi-cal-evento-tit {
    font-size: 0.58rem;
    -webkit-line-clamp: 2;
  }
}

.eventi-sezione {
  margin: 1.5rem 0 1rem;
  color: var(--green-900);
}

.eventi-mese {
  margin: 2rem 0 1rem;
  color: var(--terracotta-600);
  font-size: 0.95rem;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--cream-100);
}

.eventi-mese:first-of-type {
  margin-top: 0.4rem;
}

.eventi-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}

.evento-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.evento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(31, 77, 44, 0.14);
  color: inherit;
}

.evento-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.evento-card-placeholder {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, var(--green-700), var(--terracotta-500));
}

.evento-card-body {
  padding: 1rem 1.1rem 1.2rem;
}

.evento-card-data {
  font-size: 0.82rem;
  color: var(--terracotta-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.evento-card-titolo {
  margin: 0 0 0.3rem;
  color: var(--green-900);
  font-size: 1.15rem;
  line-height: 1.3;
}

.evento-card-sottotitolo {
  margin: 0 0 0.3rem;
  color: var(--ink-700);
  font-size: 0.93rem;
}

.evento-card-luogo {
  margin: 0.4rem 0 0;
  color: var(--ink-500);
  font-size: 0.88rem;
}

.evento-card-passato {
  opacity: 0.88;
}

.eventi-passati {
  margin-top: 2.5rem;
  border-top: 1px solid var(--cream-100);
  padding-top: 1.2rem;
}

.eventi-passati > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--green-900);
  padding: 0.5rem 0;
  margin-bottom: 0.8rem;
}

/* --- Pagina dettaglio evento --- */
.evento-dettaglio {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
  max-width: 760px;
}

.evento-dettaglio h1 {
  color: var(--green-900);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin: 0 0 0.4rem;
}

.evento-sottotitolo {
  font-size: 1.15rem;
  color: var(--ink-700);
  margin: 0 0 1.5rem;
}

.evento-hero {
  margin: 0;
}

.evento-hero img {
  width: 100%;
  display: block;
  max-height: 480px;
  object-fit: cover;
}

.evento-card-info {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
  margin: 1rem 0 1.5rem;
  overflow: hidden;
}

.evento-card-info h1 {
  margin: 0;
}

.evento-body {
  padding: 0.4rem 1.8rem 1.8rem;
}

.evento-titolo-hero {
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
  color: var(--cream-50);
  padding: 1.1rem 1.8rem 1.15rem;
  margin: 0;
  border-radius: 0;
}

.evento-titolo-hero h1 {
  color: var(--cream-50);
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.evento-titolo-hero .evento-sottotitolo {
  margin: 0.5rem 0 0;
  color: rgba(251, 247, 238, 0.82);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 400;
}

.evento-meta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  padding: 1.2rem 1.6rem;
  margin: 0.8rem 0 1.4rem;
  background-color: var(--cream-50);
  background-image:
    /* Tacca sinistra con anello verde */
    radial-gradient(circle at 0 50%,
      transparent 14px,
      var(--green-900) 14px,
      var(--green-900) 15px,
      transparent 15px),
    /* Tacca destra con anello verde */
    radial-gradient(circle at 100% 50%,
      transparent 14px,
      var(--green-900) 14px,
      var(--green-900) 15px,
      transparent 15px),
    /* Bordo top */
    linear-gradient(var(--green-900), var(--green-900)),
    /* Bordo bottom */
    linear-gradient(var(--green-900), var(--green-900)),
    /* Bordo sinistro sopra la tacca */
    linear-gradient(var(--green-900), var(--green-900)),
    /* Bordo sinistro sotto la tacca */
    linear-gradient(var(--green-900), var(--green-900)),
    /* Bordo destro sopra la tacca */
    linear-gradient(var(--green-900), var(--green-900)),
    /* Bordo destro sotto la tacca */
    linear-gradient(var(--green-900), var(--green-900));
  background-repeat: no-repeat;
  background-position:
    0 0,
    100% 0,
    0 0,
    0 100%,
    0 0,
    0 100%,
    100% 0,
    100% 100%;
  background-size:
    50% 100%,
    50% 100%,
    100% 1px,
    100% 1px,
    1px calc(50% - 14px),
    1px calc(50% - 14px),
    1px calc(50% - 14px),
    1px calc(50% - 14px);
}

.evento-meta::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  bottom: 0.7rem;
  left: 50%;
  width: 0;
  border-left: 2px dashed rgba(31, 77, 44, 0.22);
}

.evento-meta:has(> div:only-child)::before {
  display: none;
}

@media (max-width: 600px) {
  .evento-meta {
    grid-template-columns: 1fr;
    background-image: none;
    background-color: var(--cream-50);
    border: 1px solid var(--green-900);
    border-radius: 12px;
  }
  .evento-meta::before {
    display: none;
  }
}

.evento-meta dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  margin-bottom: 0.15rem;
}

.evento-meta dd {
  margin: 0;
  color: var(--ink-900);
}

.evento-meta-fine {
  font-size: 0.9rem;
  color: var(--ink-500);
}

.evento-descrizione p {
  margin: 0 0 0.9rem;
  color: var(--ink-700);
  line-height: 1.65;
}

.evento-fb-link {
  margin-top: 1.5rem;
}

/* --- Form admin eventi --- */
.form-evento fieldset {
  background: white;
  border: 1px solid var(--cream-100);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem 1rem;
  margin: 0 0 1.2rem;
}

.form-evento legend {
  float: left;
  width: 100%;
  padding: 0 0 0.6rem;
  margin: 0 0 0.9rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--green-900);
  border-bottom: 1px solid var(--cream-100);
}

.form-evento fieldset > legend + * {
  clear: both;
}

.form-evento label {
  display: block;
  margin: 0 0 1rem;
  font-weight: 500;
  color: var(--ink-700);
}

.form-evento input[type="text"],
.form-evento input[type="url"],
.form-evento input[type="email"],
.form-evento input[type="number"],
.form-evento input[type="datetime-local"],
.form-evento select,
.form-evento textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--cream-50);
  font-family: inherit;
}

.form-evento textarea {
  resize: vertical;
  min-height: 130px;
}

.form-evento input:focus,
.form-evento select:focus,
.form-evento textarea:focus {
  outline: 2px solid var(--green-500);
  outline-offset: 1px;
  background: white;
}

.form-evento input.has-error,
.form-evento textarea.has-error {
  border-color: var(--danger);
}

.form-evento .errore {
  display: block;
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}

.form-evento .hint {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-top: 0.25rem;
  font-weight: 400;
}

.form-evento .form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.form-evento .form-row > label {
  flex: 1 1 220px;
  min-width: 220px;
}

.form-evento .checkbox-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  cursor: pointer;
}

.form-evento .checkbox-inline input {
  width: auto;
  margin: 0;
}

/* Griglia di checkbox (es. categorie attività) */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem 1rem;
}

.form-evento .immagine-corrente {
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.form-evento .form-actions {
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .hero-slideshow {
    max-width: 280px;
  }
  .hero-slide-titolo { font-size: 1rem; }
  .hero-slide-overlay { padding: 0.8rem 0.8rem 1rem; }
}

/* --- Registrazione evento (pagina dettaglio) --- */
.evento-registrazione {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-100);
}

.evento-registrazione-titolo {
  margin: 0 0 0.8rem;
  color: var(--green-900);
  font-size: 1.3rem;
}

.evento-reg-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terracotta-600);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.evento-reg-box {
  background: var(--cream-50);
  border-left: 4px solid var(--green-700);
  border-radius: 10px;
  padding: 1rem 1.2rem 1.1rem;
  margin: 0.5rem 0 1rem;
}

.evento-reg-box-richiesta {
  border-left-color: var(--terracotta-500);
}

.evento-reg-stato {
  margin: 0 0 0.8rem;
}

.evento-reg-list {
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
  color: var(--ink-700);
}

.evento-reg-list li {
  margin: 0.2rem 0;
}

.evento-reg-info {
  background: var(--cream-100);
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  color: var(--ink-700);
}

.evento-reg-posti,
.evento-reg-costo {
  margin: 0.4rem 0 0.8rem;
  color: var(--ink-700);
}

/* "Posti disponibili: N su M" nascosto per ora (decisione in sospeso). Rimuovere per riattivarlo. */
.evento-reg-posti {
  display: none;
}

.form-evento-iscrivi label {
  display: block;
  margin: 0.6rem 0 1rem;
  font-weight: 500;
  color: var(--ink-700);
}

.form-evento-iscrivi input[type="number"],
.form-evento-iscrivi input[type="text"],
.form-evento-iscrivi input[type="email"],
.form-evento-iscrivi input[type="tel"],
.form-evento-iscrivi textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  font-family: inherit;
}

.form-evento-iscrivi input:focus,
.form-evento-iscrivi textarea:focus {
  outline: 2px solid var(--green-500);
  outline-offset: 1px;
  background: white;
}

.form-evento-iscrivi textarea {
  resize: vertical;
  min-height: 80px;
}

.form-evento-iscrivi input.has-error,
.form-evento-iscrivi textarea.has-error {
  border-color: var(--danger);
}

.form-evento-iscrivi .form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.form-evento-iscrivi .form-row > label {
  flex: 1 1 180px;
  min-width: 180px;
  margin-top: 0;
  margin-bottom: 0.8rem;
}

/* Scelta del turno (eventi a turni, mig.0044): una griglia di fasce orarie. */
.evento-reg-turni { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.evento-reg-turni legend { font-weight: 600; padding: 0; margin-bottom: 0.5rem; color: var(--green-900); }
.turni-griglia { display: grid; gap: 0.45rem; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.form-evento-iscrivi label.turno-scelta {
  position: relative;
  margin: 0;
  display: grid;
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--ink-700);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.turno-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.turno-scelta:focus-within { outline: 3px solid var(--terracotta-500); outline-offset: 2px; }
.turno-ora { font-weight: 800; font-size: 0.98rem; }
.turno-fine { font-weight: 600; font-size: 0.8rem; }
.turno-posti { font-size: 0.8rem; color: var(--ink-500); }
.turno-scelta:has(input:checked) { background: var(--green-700); color: white; }
.turno-scelta:has(input:checked) .turno-posti { color: white; }
.turno-scelta.is-off { cursor: not-allowed; opacity: 0.5; background: var(--cream-100); }
.turno-scelta.is-off .turno-ora { text-decoration: line-through; }
.evento-reg-turni .hint { display: block; margin-top: 0.45rem; }

.evento-reg-pagamento {
  background: white;
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 0.5rem 0 1rem;
}

.evento-reg-pagamento legend,
.evento-reg-anagrafica legend {
  float: left;
  width: 100%;
  padding: 0 0 0.6rem;
  margin: 0 0 0.9rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--green-900);
  border-bottom: 1px solid var(--cream-100);
}

.evento-reg-pagamento > legend + *,
.evento-reg-anagrafica > legend + * {
  clear: both;
}

.evento-pagamento-istruzioni {
  background: white;
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 0.8rem 0;
}

.evento-pagamento-causale {
  font-family: monospace;
  background: var(--cream-50);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  margin: 0.4rem 0 0.8rem;
}

.evento-reg-azioni {
  margin-top: 0.8rem;
}

.btn-link-danger {
  background: none;
  border: none;
  padding: 0;
  color: var(--danger);
  cursor: pointer;
  font-size: 0.93rem;
  text-decoration: underline;
}

.evento-reg-nota {
  font-size: 0.88rem;
  color: var(--ink-500);
  margin-top: 0.6rem;
}

/* --- Area soci: i miei eventi --- */
.area-soci-eventi {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.area-soci-eventi h1 {
  color: var(--green-900);
}

.evento-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.evento-mini {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem 1.2rem;
  margin: 0.8rem 0;
}

.evento-mini-data {
  font-size: 0.82rem;
  color: var(--terracotta-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.evento-mini-titolo {
  margin: 0.2rem 0 0.3rem;
  font-size: 1.1rem;
}

.evento-mini-titolo a {
  color: var(--green-900);
  text-decoration: none;
}

.evento-mini-luogo {
  font-size: 0.92rem;
  color: var(--ink-500);
  margin-bottom: 0.3rem;
}

.evento-mini-stato {
  font-size: 0.9rem;
  color: var(--ink-700);
}

.evento-mini-storico { opacity: 0.85; }

/* --- Statistiche evento (admin) --- */
.stats-evento {
  margin: 1rem 0;
}

.stats-evento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
}

.stat-cell {
  background: white;
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
}

.stat-cell-highlight {
  background: var(--cream-50);
  border-color: var(--terracotta-500);
}

.stat-label {
  font-size: 0.78rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-900);
  line-height: 1;
}

.stat-suffix {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-500);
  margin-left: 0.3rem;
}

.presenza-form select {
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--cream-100);
  font-size: 0.9rem;
  background: var(--cream-50);
}

.evento-azioni-secondarie {
  margin: 1rem 0;
}

.evento-ics-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.badge-ospite,
.badge-minore {
  display: inline-block;
  background: var(--cream-100);
  color: var(--terracotta-600);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.3rem;
}

/* Socio minorenne (lib/minori.js): stesso badge, colore del verde sociale. */
.badge-minore {
  color: var(--green-700);
}

.evento-reg-anagrafica {
  background: var(--cream-50);
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 0.4rem 0 1rem;
}

.evento-reg-info-ospite {
  font-size: 0.92rem;
  color: var(--ink-500);
  margin: 0 0 0.8rem;
}

.paypal-warning {
  background: #fdf2cc;
  border-left: 4px solid var(--terracotta-500);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.8rem 0;
  font-size: 0.92rem;
  color: #5c4400;
  line-height: 1.45;
}

.paypal-warning strong {
  color: var(--terracotta-600);
}

.iban-block {
  background: var(--cream-50);
  border-left: 4px solid var(--green-700);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

.iban-block > div {
  margin: 0.1rem 0;
}

.iban-block .iban {
  display: inline-block;
  background: white;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* ---------- Donazioni ---------- */
.donazione-page,
.donazione-grazie {
  max-width: 680px;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.donazione-card h1,
.donazione-grazie-card h1 {
  margin-top: 0;
  color: var(--green-900);
}

.donazione-intro {
  color: var(--ink-700);
  margin-bottom: 1.25rem;
}

.donazione-detraibile {
  background: var(--cream-50);
  border-left: 4px solid var(--green-700);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin: 0 0 1.5rem;
}

.donazione-detraibile-titolo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.donazione-detraibile p {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-700);
}

.donazione-detraibile-nota {
  font-size: 0.85rem !important;
  color: var(--ink-500) !important;
}

.donazione-socio-box {
  background: var(--cream-50);
  border: 1px solid var(--cream-100);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.donazione-socio-nome {
  font-size: 1.1rem;
  margin: 0.2rem 0 0.6rem;
}

.donazione-socio-dati {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--ink-700);
}

.donazione-socio-dati li {
  margin: 0.15rem 0;
}

.donazione-socio-switch {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--ink-500);
}

.donazione-socio-switch .inline-form {
  display: inline;
}

.donazione-socio-switch .link-button {
  color: var(--terracotta-600);
  text-decoration: underline;
}

.donazione-metodo-testo {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-700);
}

.donazione-contanti {
  margin-top: 0.6rem;
  font-size: 0.92rem;
}

.donazione-contanti > summary {
  display: inline;
  cursor: pointer;
  color: var(--terracotta-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.donazione-contanti > summary::-webkit-details-marker {
  display: none;
}

.donazione-contanti > p {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--terracotta-500);
  border-radius: 0 8px 8px 0;
  background: var(--cream-100);
  color: var(--ink-700);
}

/* Pagina di ringraziamento */
.donazione-grazie-card {
  text-align: center;
}

.donazione-grazie-emoji {
  font-size: 3rem;
  line-height: 1;
}

.donazione-grazie-lead {
  font-size: 1.1rem;
  color: var(--ink-700);
}

.donazione-istruzioni {
  text-align: left;
  background: var(--cream-50);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 1.5rem 0;
}

.donazione-grazie-ricevuta {
  color: var(--ink-700);
  font-size: 0.95rem;
}

.donazione-grazie-detraibile {
  font-size: 0.82rem;
  color: var(--ink-500);
  border-top: 1px solid var(--cream-100);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

.donazione-grazie-azioni {
  margin-top: 1.5rem;
}

/* Confetti overlay */
.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}

/* Azioni nella tabella admin donazioni */
.donazione-azioni {
  white-space: nowrap;
}

.donazione-azioni .inline-form {
  display: inline-block;
  margin-right: 0.4rem;
}


/* Selettore socio nel form "Nuova ricevuta" */
.socio-picker {
  background: var(--cream-50);
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 1rem;
}
.socio-picker-label {
  font-weight: 600;
  color: var(--ink-700);
}
.socio-search-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.socio-search-row input {
  flex: 1;
}
.socio-results {
  margin-top: 6px;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  background: #fff;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.socio-result {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--cream-100);
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  color: var(--ink-900);
}
.socio-result:last-child {
  border-bottom: 0;
}
.socio-result:hover,
.socio-result:focus {
  background: var(--cream-50);
}
.socio-result-empty {
  padding: 10px 12px;
  color: var(--ink-500);
}
.socio-selected {
  margin-top: 6px;
  color: var(--ink-700);
}
.socio-selected strong {
  color: var(--green-900);
}

/* ---------- Sondaggi ---------- */
.btn-secondary {
  background: var(--cream-100);
  color: var(--green-900);
}
.btn-secondary:hover {
  background: #e8dcc0;
}

.page-head {
  padding: 2rem 0 0.5rem;
}
.page-head h1 {
  color: var(--green-900);
  margin: 0 0 0.25rem;
}
.page-intro {
  color: var(--ink-500);
  margin: 0 0 1rem;
  max-width: 60ch;
}

.badge-soft {
  display: inline-block;
  background: var(--cream-100);
  color: var(--ink-700);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.sondaggio-badges { margin: 0.5rem 0 0; display: flex; gap: 0.4rem; flex-wrap: wrap; }

.sondaggi-sezione { margin: 1.5rem 0 2.5rem; }
.sondaggi-sezione h2 { color: var(--green-900); }

.sondaggi-griglia {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.sondaggio-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sondaggio-card > a {
  display: block;
  padding: 1.2rem 1.3rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.sondaggio-card > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(31, 77, 44, 0.14);
}
.sondaggio-card-soft { padding: 1.2rem 1.3rem; opacity: 0.85; }
.sondaggio-card h3 { margin: 0.5rem 0 0.4rem; color: var(--green-900); }
.sondaggio-desc { margin: 0 0 0.6rem; color: var(--ink-700); font-size: 0.92rem; }
.sondaggio-meta { margin: 0; color: var(--ink-500); font-size: 0.85rem; }

.sondaggio-stato {
  display: inline-block;
  border-radius: 999px;
  padding: 0.12rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stato-attivo { background: #e3f3e8; color: var(--green-900); }
.stato-programmato { background: var(--cream-100); color: var(--ink-700); }
.stato-chiuso { background: #f0e6dd; color: var(--terracotta-600); }

/* Dettaglio */
.countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: var(--cream-50);
  border: 1px solid var(--cream-100);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.countdown-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-500); }
.countdown-value { font-size: 1.8rem; font-weight: 700; color: var(--green-900); font-variant-numeric: tabular-nums; }
.countdown-urgente .countdown-value { color: var(--terracotta-600); }
.countdown-scaduto .countdown-value { color: var(--ink-500); font-size: 1.1rem; }
.sondaggio-turnout { text-align: center; color: var(--ink-500); font-size: 0.9rem; margin: 0.4rem 0 0; }

.sondaggio-form { margin-top: 1.2rem; }
.domanda {
  border: 1px solid var(--cream-100);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.2rem;
}
.domanda legend { font-weight: 700; color: var(--green-900); padding: 0 0.4rem; }
.opzioni { display: flex; flex-direction: column; gap: 0.55rem; }
.opzione {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.1s ease, background 0.1s ease;
}
.opzione:hover { border-color: var(--green-500); background: var(--cream-50); }
.opzione input { width: auto; }

.risposta-aperta-input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  font: inherit;
  background: var(--cream-50);
  resize: vertical;
}
.risposta-aperta-input:focus { outline: 2px solid var(--green-500); outline-offset: 1px; background: white; }

.scala-poli { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-500); margin-bottom: 0.4rem; }
.scala-valori { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.scala-valore {
  position: relative;
  flex: 1 1 auto;
  min-width: 2.4rem;
  text-align: center;
}
.scala-valore input { position: absolute; opacity: 0; pointer-events: none; }
.scala-valore span {
  display: block;
  padding: 0.55rem 0;
  border: 1px solid var(--cream-100);
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s ease;
}
.scala-valore:hover span { border-color: var(--green-500); }
.scala-valore input:checked + span { background: var(--green-700); color: white; border-color: var(--green-700); }
.scala-valore input:focus-visible + span { outline: 2px solid var(--green-500); outline-offset: 2px; }

/* Risultati */
.risultato-domanda { margin: 1.5rem 0; }
.risultato-domanda h3 { color: var(--green-900); margin: 0 0 0.7rem; }
.scala-media { color: var(--ink-700); margin: 0 0 0.6rem; }

.grafico-barre { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.barra-riga { display: flex; flex-direction: column; gap: 0.25rem; }
.barra-label { display: flex; justify-content: space-between; font-size: 0.9rem; gap: 1rem; }
.barra-num { color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-traccia { background: var(--cream-100); border-radius: 999px; height: 14px; overflow: hidden; }
.barra-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.grafico-scala .barra-label span:first-child { font-weight: 700; }

.sintesi-ai {
  background: var(--cream-50);
  border-left: 4px solid var(--green-700);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 0.4rem 0;
}
.sintesi-ai-badge {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green-700);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.sintesi-ai-testo { white-space: pre-wrap; color: var(--ink-900); }
.risposte-aperte-admin { margin-top: 0.8rem; }
.risposte-aperte-admin summary { cursor: pointer; color: var(--ink-500); font-size: 0.9rem; }
.risposte-aperte-admin ul { margin: 0.5rem 0 0; }
.risposte-aperte-admin li { margin-bottom: 0.4rem; }

.grafico-torta-wrap { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.grafico-torta {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--cream-100);
  opacity: 0;
  transform: scale(0.85) rotate(-12deg);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.grafico-torta.torta-visibile { opacity: 1; transform: scale(1) rotate(0); }
.legenda { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; }
.legenda li { display: flex; align-items: center; gap: 0.5rem; }
.legenda-colore { width: 14px; height: 14px; border-radius: 4px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .barra-fill, .grafico-torta { transition: none; }
}

.admin-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.form-due-colonne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 520px) {
  .form-due-colonne { grid-template-columns: 1fr; }
}

.domanda-blocco {
  border: 1px solid var(--cream-100);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
  background: var(--cream-50);
}
.domanda-blocco-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.domanda-blocco-head strong { color: var(--green-900); }
#aggiungi-domanda { margin-bottom: 1rem; }
.domande-readonly { margin: 0; padding-left: 1.2rem; }
.domande-readonly > li { margin-bottom: 0.8rem; }

/* Conferma di voto con checkmark animato */
.voto-conferma {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #e8f3ec;
  color: var(--green-900);
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  margin: 0 0 1rem;
  font-weight: 600;
  animation: voto-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes voto-pop {
  0% { transform: scale(0.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.voto-check { width: 34px; height: 34px; flex: none; }
.voto-check-cerchio {
  stroke: var(--green-700); stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: voto-draw 0.5s ease forwards;
}
.voto-check-segno {
  stroke: var(--green-700); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: voto-draw 0.35s 0.45s ease forwards;
}
@keyframes voto-draw { to { stroke-dashoffset: 0; } }
.voto-stato { text-align: center; margin: 1rem 0; }
.voto-stato h2 { color: var(--green-900); margin: 0 0 0.4rem; }

.anteprima-banner {
  background: #fdf3e2;
  border: 1px solid #e8cfa0;
  color: var(--ink-700);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
}
.anteprima-banner a { margin-left: 0.5rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .voto-conferma { animation: none; }
  .voto-check-cerchio, .voto-check-segno { animation: none; stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   Statistiche admin (/admin/stats)
   -------------------------------------------------------------------------- */

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.stat-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat-num {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--green-900);
  font-variant-numeric: tabular-nums;
}

.stat-label { font-weight: 600; color: var(--ink-700); }
.stat-sub { font-size: 0.85rem; color: var(--ink-500); }

.stats-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  border-bottom: 2px solid var(--cream-100);
  padding-bottom: 0.6rem;
}

.stats-tab {
  border: 1px solid var(--cream-100);
  background: white;
  color: var(--ink-700);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.stats-tab:hover { background: var(--cream-50); }

.stats-tab.active {
  background: var(--green-900);
  border-color: var(--green-900);
  color: white;
}

.stats-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.stats-grid-2 .card { margin-bottom: 1.5rem; }

.chart-wrap { position: relative; height: 300px; }
.chart-wrap-torta { height: 240px; }

.stats-small { color: var(--ink-500); font-size: 0.65em; font-weight: 400; }
.stats-h2-spazio { margin-top: 1.8rem; color: var(--green-900); }
.stats-barre .barra-label span:first-child { overflow-wrap: anywhere; }

.stats-filtri {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.stats-filtri label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ink-700);
  font-size: 0.9rem;
}

.stats-filtri select {
  font: inherit;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  background: white;
  color: var(--ink-700);
  max-width: 320px;
}

.barra-riga-cliccabile { cursor: pointer; border-radius: 8px; }
.barra-riga-cliccabile:hover { background: var(--cream-50); }

@media (max-width: 768px) {
  .stats-grid-2 { grid-template-columns: 1fr; }
  .chart-wrap { height: 240px; }
}

/* ===========================================================================
   Foto profilo (avatar)
   Miniatura circolare riusabile (partial avatar.ejs). Senza foto mostra le
   iniziali su un cerchio dal colore stabile (--avatar-hue impostato inline).
   =========================================================================== */
.avatar {
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream-100);
  vertical-align: middle;
}
.avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  background: hsl(var(--avatar-hue, 140) 45% 42%);
}
.avatar-sm { width: 28px; height: 28px; font-size: 0.72rem; }
.avatar-md { width: 40px; height: 40px; font-size: 1rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.7rem; }
.avatar-xl {
  width: 140px; height: 140px; font-size: 3.2rem;
  box-shadow: var(--shadow);
}

/* Link "Area socio" nell'header con miniatura accanto. */
.area-socio-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Intestazione con avatar (dashboard socio, scheda socio admin). */
.area-soci-intestazione {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.area-soci-intestazione h1 { margin: 0; }
.area-soci-intestazione-azione { margin: 0.25rem 0 0; font-size: 0.95rem; }

/* Card foto profilo nel profilo socio. */
.avatar-card-corpo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.avatar-card-azioni { flex: 1 1 220px; }
.avatar-file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.avatar-elimina-form { margin-top: 0.6rem; }

/* Editor di ritaglio. */
.avatar-cropper { margin-top: 1.25rem; max-width: 320px; }
.avatar-crop-stage {
  position: relative;
  width: 280px;
  height: 280px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ink-900);
  touch-action: none;
  cursor: grab;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.avatar-crop-stage:active { cursor: grabbing; }
.avatar-crop-stage img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;
}
.avatar-crop-zoom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem auto 0;
  max-width: 280px;
  color: var(--ink-500);
}
.avatar-crop-zoom input[type="range"] { flex: 1; }
.avatar-crop-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
}

/* Colonna miniatura nell'elenco soci admin. */
.th-avatar, .td-avatar { width: 40px; }
.td-avatar a { display: inline-flex; }

/* Foto e commenti dei partecipanti (/admin/eventi/:id/contributi) */
.contributi-lista { display: grid; gap: 0.8rem; margin-top: 1rem; }
.contributo { background: white; border: 1px solid var(--cream-100); border-radius: 12px; padding: 0.8rem 1rem; scroll-margin-top: 5rem; }
.contributo header { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.contributo-voto { color: var(--terracotta-500); letter-spacing: 0.05em; }
.contributo-voto-vuoto { color: var(--cream-100); }
.contributo-testo { white-space: pre-line; overflow-wrap: anywhere; margin: 0.5rem 0; }
.contributo-foto { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin: 0.5rem 0; }
.contributo-foto figure { margin: 0; display: grid; gap: 0.2rem; }
.contributo-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.contributo-foto form { margin: 0; }
.contributo-chi { font-size: 0.9rem; color: var(--ink-500); }

/* Moderazione commenti Gaiofanhack (/admin/hack-commenti) */
.hack-commento-testo-admin {
  max-width: 420px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Pulsante di Halloween in homepage (/halloween): i colori del volantino,
   carta e inchiostro viola con ombra netta. */
.home-halloween-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 16px;
  background: #fff8ec;
  color: #2a1b3d;
  border: 2.5px solid #2a1b3d;
  border-radius: 14px;
  box-shadow: 3px 4px 0 #2a1b3d;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
}
.home-halloween-btn:hover { color: #2a1b3d; background: #fff0da; }
.home-halloween-btn strong { color: #b5470c; }
.home-halloween-zucca { flex: none; }
.home-halloween-btn .home-agenda-freccia { margin-left: auto; }

/* Bottone "videogiochi di Gaiofana" in homepage: richiama lo stile terminale
   verde fosforo delle pagine Gaiofanhack (hack.css), qui replicato in piccolo
   perché la homepage non carica quel foglio di stile. */
.home-hack-btn {
  display: block;
  margin-top: 10px;
  padding: 13px 18px;
  background: #000;
  color: #00ff00;
  border: 2px solid #00cc00;
  border-radius: 8px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0 14px rgba(0, 255, 0, 0.2);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.home-hack-btn:hover {
  box-shadow: 0 0 22px rgba(0, 255, 0, 0.45);
  transform: translateY(-1px);
  color: #00ff00;
}
.home-hack-btn strong { text-decoration: underline; white-space: nowrap; }
.home-hack-btn-prompt { font-weight: 700; margin-right: 4px; }
.home-hack-btn-prompt::after {
  content: '▮';
  margin-left: 2px;
  animation: home-hack-blink 1.1s steps(1) infinite;
}
@keyframes home-hack-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .home-hack-btn-prompt::after { animation: none; }
}

/* ==========================================================================
   Sentieri (gestionale)
   ========================================================================== */

.nav-riservata { font-size: 0.8em; }

.st-pagina { padding-top: 2rem; padding-bottom: 4rem; }
.st-pagina h1 { color: var(--green-900); margin: 0.2rem 0 0.3rem; }
.st-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin-bottom: 1rem; }
.st-testa h1 { margin: 0; }
.st-testa p { flex-basis: 100%; margin: 0; }
.st-riservata {
  display: inline-block; flex-basis: auto !important;
  background: #fff5e6; color: #7a4a10; border: 1px solid #f3d6a3;
  border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.88rem;
}
.st-flash-errore { display: block; background: #fdecea; padding: 0.6rem 0.8rem; border-radius: 8px; }
.st-vuoto { background: white; border-radius: var(--radius); box-shadow: var(--shadow); }
.st-link-piccolo { font-size: 0.85rem; margin-left: 0.4rem; }
.st-sezione-titolo { color: var(--green-900); margin: 2rem 0 0.8rem; }
.st-sezione-stato {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem;
  border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-bottom: 1rem; border: 1px solid;
}
.st-sezione-stato p { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--ink-700); max-width: 44rem; }
.st-sezione-aperta { background: #eef6ef; border-color: #b7dbc0; }
.st-sezione-chiusa { background: #fff8ee; border-color: #f3d6a3; }
.st-sezione-soci { background: #eef4fb; border-color: #bcd3ec; }
.st-sezione-azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Semafori e badge */
.st-dot {
  display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%;
  margin-right: 0.35em; vertical-align: baseline; flex: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.st-dot-rosso { background: #c0392b; }
.st-dot-giallo { background: #e0a100; }
.st-dot-verde { background: #2f7a44; }
.st-semaforo-mini { white-space: nowrap; margin-right: 0.6rem; }

.st-badge {
  display: inline-flex; align-items: center; gap: 0.2rem;
  background: var(--cream-100); color: var(--ink-700);
  padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.8rem; white-space: nowrap;
}
.st-badge-pubblico { background: #d8efde; color: #1d5b2a; }
.st-badge-soci { background: #d9e9f9; color: #1b5687; }
.st-badge-gestori { background: #efe9f7; color: #5b3d86; }
.st-badge-lavori { background: #ffe8d4; color: #a14400; }
.st-badge-pubblicata { background: #d8efde; color: #1d5b2a; }

.st-stato, .st-stato-accordo {
  display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.st-stato-da_fare { background: #fde3d3; color: #a14400; }
.st-stato-in_corso { background: #fdf2cc; color: #8a6b00; }
.st-stato-fatto { background: #d8efde; color: #1d5b2a; }
.st-accordo-rosso { background: #fdecea; color: #9b2c1f; }
.st-accordo-giallo { background: #fdf2cc; color: #7a5b00; }
.st-accordo-verde { background: #d8efde; color: #1d5b2a; }
.st-stato-accordo-grande { font-size: 1rem; padding: 0.3rem 0.9rem; }

.st-btn-piccolo { padding: 0.4rem 0.8rem; font-size: 0.88rem; }
.st-btn-chiaro { background: white; color: var(--green-900); border: 1px solid #d9d2bf; }
.st-btn-chiaro:hover { background: var(--cream-100); color: var(--green-900); }
.st-btn-pericolo { color: #9b2c1f; }

/* Dashboard */
.st-scorciatoie { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem; }
.st-scorciatoia {
  display: flex; align-items: center; gap: 0.8rem; background: white; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.9rem 1.1rem; text-decoration: none; color: var(--ink-900);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.st-scorciatoia:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(31, 77, 44, 0.14); color: var(--ink-900); }
.st-scorciatoia strong { display: block; color: var(--green-900); }
.st-scorciatoia small { color: var(--ink-500); }
.st-scorciatoia-icona { font-size: 2rem; line-height: 1; }

.st-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.st-card {
  display: flex; flex-direction: column; background: white; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: var(--ink-900);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.st-card:hover { transform: translateY(-3px) rotate(-0.3deg); box-shadow: 0 14px 34px rgba(31, 77, 44, 0.16); color: var(--ink-900); }
.st-card-forma {
  height: 120px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 30%, rgba(78, 163, 94, 0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(215, 122, 79, 0.15), transparent 55%),
    var(--cream-50);
}
.st-card-forma svg { width: 100%; height: 100%; padding: 6px; }
.st-forma-bordo { fill: none; stroke: white; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.st-forma-linea { fill: none; stroke: var(--terracotta-600); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.st-forma-inizio { fill: var(--green-700); stroke: white; stroke-width: 2; }
.st-card-vuota { color: var(--ink-500); font-size: 0.92rem; }
.st-card-corpo { padding: 0.8rem 1rem 1rem; }
.st-card-corpo h3 { margin: 0 0 0.3rem; color: var(--green-900); font-size: 1.1rem; }
.st-card-numeri { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--ink-700); }
.st-card-badge { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.st-card-nuovo {
  padding: 1.2rem; gap: 0.6rem; justify-content: center; border: 2px dashed #d9d2bf;
  background: rgba(255, 255, 255, 0.6); box-shadow: none;
}
.st-card-nuovo-icona { font-size: 1.8rem; }
.st-card-nuovo input {
  padding: 0.6rem 0.8rem; border: 1px solid #d9d2bf; border-radius: 8px; font: inherit;
}
.st-gestori { margin-top: 2rem; }
.st-gestori-lista { list-style: none; padding: 0; margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

/* Lista lavori */
.st-lavori-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.st-lavoro {
  display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; background: white;
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.9rem 1.1rem;
  border-left: 6px solid #d35400;
}
.st-lavoro-in_corso { border-left-color: #e0a100; }
.st-lavoro-fatto { border-left-color: #2f7a44; opacity: 0.8; }
.st-lavoro-emoji { font-size: 1.8rem; grid-row: span 2; }
.st-lavoro-corpo strong { color: var(--green-900); }
.st-lavoro-meta { display: block; color: var(--ink-500); font-size: 0.85rem; }
.st-lavoro-descr { margin: 0.3rem 0; white-space: pre-line; }
.st-lavoro-azioni { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

/* Proprietà */
.st-azioni-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.st-tabella-wrap { overflow-x: auto; }
.st-tabella td { vertical-align: top; }
.st-proprieta-griglia { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; }
.st-proprieta-griglia .card { margin-bottom: 0; }
.st-proprieta-mappa-card { padding: 0.6rem; }
.st-mini-mappa { height: 300px; border-radius: 10px; }
.st-mini-mappa-azioni { margin: 0.6rem 0.4rem 0.2rem; }
.st-proprieta .card { margin-top: 1.5rem; }
.st-collegati { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.st-collegati li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.st-form-riga { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.st-form-riga select, .st-form-riga input {
  padding: 0.45rem 0.6rem; border: 1px solid #d9d2bf; border-radius: 8px; font: inherit; min-width: 0; flex: 1;
}
.st-nuovo-evento { margin-bottom: 1.2rem; }
.st-nuovo-evento > summary { list-style: none; display: inline-block; }
.st-nuovo-evento > summary::-webkit-details-marker { display: none; }
.st-nuovo-evento[open] > summary { margin-bottom: 1rem; }
.st-form-evento { background: var(--cream-50); border-radius: 12px; padding: 1rem; }
.iscrizione-form .st-scelte {
  border: 0; padding: 0; margin: 0.2rem 0 1rem; background: none; box-shadow: none;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.iscrizione-form .st-scelte legend {
  float: none; width: auto; border: 0; font-weight: 400; font-size: 0.92rem; color: var(--ink-700);
  margin: 0 0 0.4rem; padding: 0;
}
.iscrizione-form .st-scelta { display: inline-block; flex: none; margin: 0; position: relative; }
.st-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.st-scelta span {
  display: inline-block; white-space: nowrap; padding: 0.35rem 0.75rem; border-radius: 999px; background: white;
  border: 1px solid #d9d2bf; cursor: pointer; font-size: 0.92rem;
}
.st-scelta input:checked + span { background: var(--green-700); color: white; border-color: var(--green-700); }
.st-scelta input:focus-visible + span { outline: 2px solid var(--terracotta-500); outline-offset: 2px; }
.st-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.st-timeline::before { content: ''; position: absolute; left: 1.2rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--cream-100); }
.st-timeline-voce { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.8rem; padding: 0.6rem 0; position: relative; }
.st-timeline-icona {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: white; border: 2px solid var(--cream-100);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; position: relative;
}
.st-timeline-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.st-timeline-note { margin: 0.3rem 0; white-space: pre-line; }
.st-timeline-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.st-conferma > summary { list-style: none; cursor: pointer; display: inline; }
.st-conferma > summary::-webkit-details-marker { display: none; }
.st-conferma[open] > summary { display: none; }
.st-zona-pericolo {
  margin-top: 2rem; border: 1px solid #f0c4bb; border-radius: 12px; padding: 0.8rem 1rem; background: #fff8f6;
}
.st-zona-pericolo > summary { cursor: pointer; color: #9b2c1f; font-weight: 600; }
.st-zona-pericolo input { padding: 0.5rem; border: 1px solid #d9d2bf; border-radius: 8px; font: inherit; margin: 0 0.4rem 0.4rem 0; }

@media (max-width: 760px) {
  .st-proprieta-griglia { grid-template-columns: 1fr; }
}

/* ---------- Editor a tutto schermo ---------- */
body.st-editor-body { height: 100vh; height: 100dvh; overflow: hidden; }
/* Header compatto: i menù chiusi non devono rubare spazio alla mappa. */
.st-editor-body .header-inner { row-gap: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.st-editor-body .site-nav:not(.is-open) .site-nav-inner { padding-top: 0; }
.st-avviso-testa { margin: 0 0.9rem 0.5rem; }
.st-editor { flex: 1; min-height: 0; display: flex; position: relative; }
.st-editor-mappa-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-mappa { flex: 1; min-height: 0; background: #e8e4d8; }
.st-mappa.st-modo-disegno { cursor: crosshair; }
.st-mappa.st-modo-disegno .leaflet-interactive { cursor: crosshair; }

.st-barra {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem;
  background: white; border-bottom: 1px solid var(--cream-100); min-height: 56px;
}
.st-barra-strumenti { display: flex; gap: 0.4rem; flex-wrap: wrap; flex: 1; }
.st-controllo-vista a { font-size: 15px; text-decoration: none; }
.st-barra-modo { background: #fffaf0; }
.st-strumento {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.85rem;
  border-radius: 999px; border: 1px solid #d9d2bf; background: white; color: var(--ink-900);
  font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; white-space: nowrap;
  transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.st-strumento:hover:not(:disabled) { background: var(--cream-50); box-shadow: 0 3px 10px rgba(31, 77, 44, 0.12); }
.st-strumento:active:not(:disabled) { transform: scale(0.96); }
.st-strumento:disabled { opacity: 0.45; cursor: default; }
.st-strumento > span { font-size: 1.15rem; line-height: 1; }
.st-strumento-ok { background: var(--green-700); border-color: var(--green-700); color: white; }
.st-strumento-ok:hover:not(:disabled) { background: var(--green-900); }
.st-strumento-pericolo { color: #9b2c1f; border-color: #f0c4bb; }
.st-strumento-invito { animation: st-invito 1.4s ease-in-out infinite; border-color: var(--terracotta-500); }
@keyframes st-invito {
  0%, 100% { box-shadow: 0 0 0 0 rgba(215, 122, 79, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(215, 122, 79, 0); }
}
.st-guida { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.st-guida-testo { margin: 0; font-size: 0.92rem; color: var(--ink-700); }
.st-guida-azioni { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Pannello laterale */
.st-pannello {
  width: 400px; flex: none; display: flex; flex-direction: column; min-height: 0;
  background: white; border-left: 1px solid var(--cream-100); z-index: 1050;
}
.st-pannello-testa { flex: none; border-bottom: 1px solid var(--cream-100); background: white; }
.st-pannello-titolo { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem 0.3rem; }
.st-indietro-dashboard {
  text-decoration: none; font-size: 1.2rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--cream-50); flex: none;
}
.st-titolo-sentiero {
  font-size: 1.1rem; margin: 0; color: var(--green-900); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-pannello-toggle { display: none; }
.st-salva {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.3rem 0.9rem 0.5rem;
}
.st-salva-stato { font-size: 0.85rem; color: var(--ink-500); }
.st-salva-ok { color: var(--green-700); }
.st-salva-sporco { color: #a14400; font-weight: 600; }
.st-salva-nota {
  flex: 1 1 100%; min-width: 0; padding: 0.4rem 0.6rem; border: 1px solid #d9d2bf; border-radius: 8px; font: inherit; font-size: 0.88rem;
}
.st-btn-salva { margin-left: auto; padding: 0.45rem 0.9rem; animation: st-respira 2.4s ease-in-out infinite; }
@keyframes st-respira {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 122, 68, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(47, 122, 68, 0); }
}
.st-tabs { display: flex; overflow-x: auto; padding: 0 0.4rem; gap: 0.1rem; scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem;
  padding: 0.55rem 0.3rem; border: 0; border-bottom: 3px solid transparent; background: none;
  font: inherit; font-size: 0.82rem; color: var(--ink-700); cursor: pointer;
}
.st-tab-on { border-bottom-color: var(--terracotta-600); color: var(--green-900); font-weight: 600; }
.st-tab-n {
  background: var(--cream-100); border-radius: 999px; padding: 0 0.4rem; font-size: 0.75rem; min-width: 1.3em; text-align: center;
}
.st-tab-on .st-tab-n { background: var(--terracotta-600); color: white; }
.st-pannello-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem; -webkit-overflow-scrolling: touch; }

.st-blocco { margin-bottom: 1.2rem; }
.st-blocco h2 { font-size: 0.95rem; margin: 0 0 0.5rem; color: var(--green-900); }
.st-blocco-secondario { border-top: 1px solid var(--cream-100); padding-top: 1rem; }
.st-nota { display: block; color: var(--ink-500); font-size: 0.83rem; margin: 0.4rem 0; }
.st-avviso { background: #fdecea; color: #7d2418; border-radius: 10px; padding: 0.55rem 0.75rem; font-size: 0.88rem; margin: 0.5rem 0; }
.st-avviso-info { background: #e9f1fb; color: #1b4f86; }
.st-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; font-weight: 600; color: var(--ink-700); margin-bottom: 0.8rem; }
.st-form input, .st-form textarea {
  font: inherit; font-weight: 400; font-size: 1rem; padding: 0.55rem 0.7rem;
  border: 1px solid #d9d2bf; border-radius: 10px; background: white; color: var(--ink-900);
}
.st-form input:focus, .st-form textarea:focus, .st-salva-nota:focus {
  outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(78, 163, 94, 0.2);
}
.st-campo { margin-bottom: 0.9rem; }
.st-campo-label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink-700); margin-bottom: 0.35rem; }
.st-segmenti { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.st-seg {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.45rem 0.75rem; border-radius: 999px;
  border: 1px solid #d9d2bf; background: white; font: inherit; font-size: 0.88rem; cursor: pointer; color: var(--ink-900);
  transition: transform 0.1s ease, background 0.15s ease;
}
.st-seg:hover { background: var(--cream-50); }
.st-seg:active { transform: scale(0.95); }
.st-seg-on, .st-seg-on:hover { background: var(--green-700); border-color: var(--green-700); color: white; }
.st-chips .st-seg-on, .st-chips .st-seg-on:hover { background: var(--terracotta-600); border-color: var(--terracotta-600); }
.st-segmenti-difficolta .st-seg { flex: 1; justify-content: center; flex-direction: column; gap: 0; padding: 0.4rem; }
.st-segmenti-accordo .st-seg-on .st-dot { box-shadow: 0 0 0 2px white; }
.st-segmenti-filtro { margin: 0.8rem 0; }

.st-btn-grande {
  display: block; width: 100%; text-align: center; padding: 0.8rem 1rem; margin: 0.4rem 0 0.8rem;
  border-radius: 14px; border: 2px dashed var(--terracotta-500); background: #fff7f1;
  color: var(--terracotta-600); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  text-decoration: none; transition: transform 0.1s ease, background 0.15s ease;
}
.st-btn-grande:hover { background: #ffeee2; color: var(--terracotta-600); }
.st-btn-grande:active { transform: scale(0.98); }
.st-btn-grande:disabled { opacity: 0.5; cursor: default; }
.st-btn-grande-chiaro { border: 1px solid #d9d2bf; background: var(--cream-50); color: var(--green-900); }
.st-btn-grande-chiaro:hover { background: var(--cream-100); color: var(--green-900); }
.st-btn-grande-festa { border-style: solid; background: var(--green-700); border-color: var(--green-700); color: white; }
.st-btn-grande-festa:hover { background: var(--green-900); color: white; }

.st-numeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.st-numeri > div {
  background: var(--cream-50); border-radius: 12px; padding: 0.5rem 0.6rem; display: flex; flex-direction: column;
}
.st-numeri span { font-size: 1.2rem; }
.st-numeri strong { color: var(--green-900); font-size: 0.95rem; }
.st-numeri small { color: var(--ink-500); font-size: 0.75rem; }

.st-lista { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.35rem; }
.st-lista-titolo { font-size: 0.85rem; color: var(--ink-500); margin: 1rem 0 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; }
.st-lista button, .st-lista a {
  width: 100%; display: flex; align-items: center; gap: 0.7rem; text-align: left; padding: 0.55rem 0.7rem;
  border-radius: 12px; border: 1px solid var(--cream-100); background: white; font: inherit; cursor: pointer;
  color: var(--ink-900); text-decoration: none; transition: background 0.15s ease, transform 0.1s ease;
}
.st-lista button:hover, .st-lista a:hover { background: var(--cream-50); color: var(--ink-900); }
.st-lista button:active, .st-lista a:active { transform: scale(0.98); }
.st-lista-emoji { font-size: 1.4rem; width: 1.8rem; text-align: center; flex: none; }
.st-lista-testo { display: flex; flex-direction: column; min-width: 0; }
.st-lista-testo strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-lista-testo small { color: var(--ink-500); font-size: 0.8rem; }
.st-lista-lavoro-fatto { opacity: 0.6; }
.st-vuoto-pannello { text-align: center; color: var(--ink-500); padding: 1.5rem 0.5rem; line-height: 1.8; }
.st-semaforo-riepilogo { background: var(--cream-50); border-radius: 12px; padding: 0.6rem 0.8rem; font-size: 0.9rem; margin-bottom: 0.6rem; }

.st-dettaglio { animation: st-entra 0.25s ease both; }
@keyframes st-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.st-indietro { border: 0; background: none; padding: 0.2rem 0; color: var(--green-700); font: inherit; font-size: 0.9rem; cursor: pointer; }
.st-dettaglio-titolo { font-size: 1.15rem; color: var(--green-900); margin: 0.3rem 0 0.8rem; }
.st-tipi { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 0.35rem; }
.st-tipo {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.45rem 0.2rem;
  border-radius: 12px; border: 2px solid transparent; background: var(--cream-50); cursor: pointer; font: inherit;
  transition: transform 0.12s ease, background 0.15s ease;
}
.st-tipo span { font-size: 1.5rem; line-height: 1.2; }
.st-tipo small { font-size: 0.7rem; color: var(--ink-700); text-align: center; line-height: 1.15; }
.st-tipo:hover { background: var(--cream-100); transform: translateY(-2px); }
.st-tipo-on { border-color: var(--terracotta-600); background: #fff1e8; }
.st-tipo-on span { animation: st-saltello 0.4s ease; }
@keyframes st-saltello { 40% { transform: translateY(-5px) scale(1.15); } }
.st-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 1rem 0 0.4rem; }
.st-conferma-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.9rem; }
.st-dettagli { margin-top: 0.8rem; }
.st-dettagli > summary { cursor: pointer; font-size: 0.9rem; color: var(--green-700); }
.st-dettagli[open] > summary { margin-bottom: 0.5rem; }
.st-prefisso { color: var(--ink-500); font-size: 0.9rem; }
.st-pannello .st-zona-pericolo { margin-top: 1rem; }

.st-foto-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.4rem; }
.st-foto { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--cream-100); }
.st-foto-apri { border: 0; padding: 0; width: 100%; height: 100%; cursor: zoom-in; display: block; }
.st-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.st-foto:hover img { transform: scale(1.06); }
.st-foto-azioni { position: absolute; top: 3px; right: 3px; display: flex; gap: 3px; }
.st-foto-azioni button {
  width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(29, 42, 35, 0.72); color: white;
  font-size: 0.72rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.st-foto-aggiungi {
  aspect-ratio: 1; border-radius: 10px; border: 2px dashed #d9d2bf; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; font-size: 0.78rem; font-weight: 600;
  color: var(--ink-700); cursor: pointer; background: white;
}
.st-foto-aggiungi span { font-size: 1.5rem; }
.st-foto-aggiungi:hover { background: var(--cream-50); }
.st-foto-aggiungi input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.st-versioni { list-style: none; padding: 0; margin: 0.8rem 0; display: grid; gap: 0.5rem; }
.st-versioni li { border: 1px solid var(--cream-100); border-radius: 12px; padding: 0.55rem 0.75rem; }
.st-versioni small { color: var(--ink-500); }
.st-versione-pubblicata { border-color: #9fd0ad !important; background: #f3faf5; }
.st-versione-testa { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.st-versione-nota { margin: 0.25rem 0; font-size: 0.9rem; font-style: italic; }
.st-versione-azioni { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.2rem; }

/* Toast */
.st-toast-zona {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 1100;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none;
  width: min(92vw, 460px);
}
.st-toast {
  background: var(--ink-900); color: white; padding: 0.55rem 1rem; border-radius: 999px;
  font-size: 0.92rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); text-align: center;
  animation: st-toast-pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.st-toast-ok { background: var(--green-900); }
.st-toast-info { background: #1b4f86; }
.st-toast-avviso { background: #8a5a00; }
.st-toast-errore { background: #9b2c1f; border-radius: 14px; }
.st-toast-via { opacity: 0; transform: translateY(-8px); transition: opacity 0.5s ease, transform 0.5s ease; }
@keyframes st-toast-pop { from { opacity: 0; transform: translateY(-10px) scale(0.9); } to { opacity: 1; transform: none; } }

/* Festa */
.st-festa {
  position: fixed; z-index: 3000; font-size: 1.6rem; pointer-events: none;
  animation: st-festa 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes st-festa {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) scale(1) rotate(25deg); opacity: 0; }
}

/* Galleria foto */
.st-galleria {
  position: fixed; inset: 0; z-index: 4000; background: rgba(15, 24, 19, 0.94);
  display: flex; align-items: center; justify-content: center; animation: st-entra 0.2s ease both;
}
.st-galleria figure { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.st-galleria img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.st-galleria figcaption { color: #ddd; margin-top: 0.6rem; font-size: 0.9rem; }
.st-galleria button {
  position: absolute; background: rgba(255, 255, 255, 0.12); color: white; border: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
}
.st-galleria button:hover { background: rgba(255, 255, 255, 0.25); }
.st-galleria-chiudi { top: 14px; right: 14px; font-size: 1.2rem !important; }
.st-galleria-prec { left: 12px; top: 50%; transform: translateY(-50%); }
.st-galleria-succ { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- Elementi sulla mappa ---------- */
.st-pin-wrap, .st-bandierina-wrap, .st-lavoro-etichetta-wrap { background: none; border: 0; }
.st-pin-anim { position: relative; width: 40px; height: 48px; }
.st-pin {
  position: absolute; left: 3px; top: 1px; width: 34px; height: 34px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: white; border: 3px solid var(--terracotta-600);
  box-shadow: -2px 3px 8px rgba(0, 0, 0, 0.3);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease;
}
.st-pin-emoji { transform: rotate(45deg); font-size: 17px; line-height: 1; }
.st-pin-vis-soci .st-pin { border-color: #2b6cb0; }
.st-pin-vis-gestori .st-pin { border-color: #6b4fa0; border-style: dashed; }
.st-pin-lucchetto {
  position: absolute; right: -4px; top: -6px; font-size: 12px; background: white; border-radius: 50%;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.st-pin-sel .st-pin { border-color: var(--green-700); box-shadow: 0 0 0 4px rgba(78, 163, 94, 0.45), -2px 3px 8px rgba(0, 0, 0, 0.3); }
.st-pin-sel { animation: st-pin-saltella 1.2s ease-in-out infinite; }
@keyframes st-pin-saltella { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.st-pin-cade { animation: st-pin-cade 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes st-pin-cade {
  0% { transform: translateY(-60px) scale(0.6); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.st-pin-wrap:hover .st-pin-anim:not(.st-pin-sel) { animation: st-pin-saltello 0.4s ease; }
@keyframes st-pin-saltello { 40% { transform: translateY(-5px); } }
.st-pin-lavoro .st-pin { border-radius: 10px 10px 10px 0; background: #fff7ec; border-color: #d35400; }
.st-pin-lavoro-in_corso .st-pin { border-color: #e0a100; }
.st-pin-lavoro-fatto .st-pin { border-color: #2f7a44; opacity: 0.6; }
.st-lavoro-etichetta {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: #fff7ec; border: 2px solid #d35400; font-size: 15px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.st-lavoro-etichetta-in_corso { border-color: #e0a100; }
.st-lavoro-etichetta-fatto { border-color: #2f7a44; opacity: 0.6; }
.st-lavoro-etichetta.st-sel { box-shadow: 0 0 0 4px rgba(211, 84, 0, 0.35); }
.st-bandierina { font-size: 24px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }

.st-vertice {
  background: white; border: 3px solid var(--terracotta-600); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); cursor: grab;
}
.st-vertice-inizio { border-color: var(--green-700); background: #d8efde; }
.st-vertice-fine { background: var(--terracotta-500); }
.st-vertice-sel { background: #c0392b; border-color: white; box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.4); }
.st-medio {
  background: rgba(255, 255, 255, 0.85); border: 2px solid var(--terracotta-500); border-radius: 50%;
  opacity: 0.75; cursor: copy;
}
.st-medio:hover { opacity: 1; }
.st-qui {
  background: #2b7bd6; border: 3px solid white; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(43, 123, 214, 0.6); animation: st-qui 1.8s ease-out infinite;
}
@keyframes st-qui { 0% { box-shadow: 0 0 0 0 rgba(43, 123, 214, 0.6); } 100% { box-shadow: 0 0 0 16px rgba(43, 123, 214, 0); } }

.leaflet-tooltip.st-etichetta-proprieta {
  display: none; background: rgba(255, 255, 255, 0.85); border: 0; box-shadow: none;
  font-size: 11px; font-weight: 600; color: var(--ink-900); padding: 1px 6px; border-radius: 6px;
}
.leaflet-tooltip.st-etichetta-proprieta::before { display: none; }
.st-zoom-vicino .leaflet-tooltip.st-etichetta-proprieta,
.leaflet-tooltip.st-etichetta-proprieta.st-sel { display: block; }

/* Telefono: la mappa occupa tutto, il pannello diventa un cassetto dal basso */
@media (max-width: 899px) {
  .st-editor { flex-direction: column; }
  .st-editor-mappa-col { padding-bottom: var(--st-testa-h, 110px); }
  .st-pannello {
    position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: 72%;
    border-left: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  }
  .st-pannello .st-pannello-corpo { display: none; }
  .st-pannello.st-pannello-aperto .st-pannello-corpo { display: block; }
  .st-pannello-testa { border-radius: 18px 18px 0 0; }
  .st-pannello-titolo { padding-top: 0.5rem; }
  .st-pannello-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
    border-radius: 50%; border: 1px solid #d9d2bf; background: white; font-size: 1.1rem; cursor: pointer; flex: none;
    transition: transform 0.2s ease;
  }
  .st-pannello-aperto .st-pannello-toggle { transform: rotate(180deg); }
  .st-tab-label { display: none; }
  .st-tab { font-size: 1.1rem; padding: 0.45rem 0.3rem; }
  .st-barra { padding: 0.4rem; min-height: 0; }
  .st-barra-strumenti { gap: 0.3rem; flex-wrap: nowrap; }
  .st-strumento { padding: 0.45rem 0.55rem; font-size: 0.82rem; gap: 0.25rem; }
  .st-strumento > span { font-size: 1rem; }
  .st-toast-zona { top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-pin-cade, .st-pin-sel, .st-btn-salva, .st-strumento-invito, .st-qui, .st-dettaglio, .st-toast { animation: none !important; }
}

/* ==========================================================================
   Sentieri (pagine pubbliche)
   ========================================================================== */

.sp-pagina { padding-bottom: 4rem; }
.sp-banner { background: #fff5e6; border-bottom: 1px solid #f3d6a3; color: #7a4a10; padding: 0.6rem 0; font-size: 0.92rem; }
.sp-banner a { margin-left: 0.6rem; font-weight: 600; color: #7a4a10; }

/* Testata con colline */
.sp-hero {
  position: relative; overflow: hidden; padding: 2rem 0 6.5rem;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 214, 120, 0.55) 0, rgba(255, 214, 120, 0) 22%),
    linear-gradient(180deg, #dcefe0 0%, #f4ecd8 100%);
}
.sp-hero-foto {
  background:
    linear-gradient(180deg, rgba(20, 35, 25, 0.15) 0%, rgba(20, 35, 25, 0.65) 100%),
    var(--sp-copertina) center / cover no-repeat;
  padding-top: 7rem; color: white;
}
.sp-hero-testo { position: relative; z-index: 1; }
.sp-hero h1 {
  font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.1; margin: 0.3rem 0 0.5rem; color: var(--green-900);
  animation: sp-sale 0.6s ease both;
}
.sp-hero-foto h1 { color: white; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.sp-sommario { font-size: 1.12rem; max-width: 42rem; margin: 0; color: var(--ink-700); animation: sp-sale 0.6s 0.1s ease both; }
.sp-hero-foto .sp-sommario { color: rgba(255, 255, 255, 0.92); }
.sp-briciole { margin: 0 0 0.4rem; }
.sp-briciole a { text-decoration: none; font-weight: 600; }
.sp-hero-foto .sp-briciole a { color: white; }
.sp-etichetta {
  display: inline-block; background: rgba(255, 255, 255, 0.85); color: var(--ink-900);
  border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.82rem; font-weight: 600; margin-right: 0.3rem;
}
.sp-colline { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; }
.sp-collina-1 { fill: #9ccc9a; opacity: 0.75; }
.sp-collina-2 { fill: #6fae73; opacity: 0.85; }
.sp-collina-3 { fill: var(--cream-50); }
.sp-hero-foto .sp-collina-1, .sp-hero-foto .sp-collina-2 { opacity: 0.45; }
@keyframes sp-sale { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Numeri, chip, azioni */
.sp-riassunto { position: relative; z-index: 2; margin-top: -3.8rem; }
.sp-numeri { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 0.7rem; }
.sp-numeri li {
  background: white; border-radius: 18px; box-shadow: var(--shadow); padding: 0.8rem 0.9rem;
  display: flex; flex-direction: column; animation: sp-sale 0.5s ease both;
}
.sp-numeri li:nth-child(2) { animation-delay: 0.06s; }
.sp-numeri li:nth-child(3) { animation-delay: 0.12s; }
.sp-numeri li:nth-child(4) { animation-delay: 0.18s; }
.sp-numeri li:nth-child(5) { animation-delay: 0.24s; }
.sp-numeri-emoji { font-size: 1.7rem; line-height: 1.2; transition: transform 0.2s ease; display: inline-block; }
.sp-numeri li:hover .sp-numeri-emoji { transform: translateY(-3px) rotate(-6deg) scale(1.1); }
.sp-numeri strong { font-size: 1.15rem; color: var(--green-900); }
.sp-numeri small { color: var(--ink-500); font-size: 0.82rem; }
.sp-difficolta i, .sp-card-difficolta i { font-style: normal; opacity: 0.22; filter: grayscale(1); }
.sp-difficolta i.on, .sp-card-difficolta i.on { opacity: 1; filter: none; }
.sp-chip-righe { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.sp-chip-riga { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.sp-chip-titolo { font-size: 0.82rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.2rem; }
.sp-chip { background: white; border: 1px solid var(--cream-100); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.9rem; }
.sp-azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 1.5rem; }
.sp-azione {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 1rem; border-radius: 999px;
  background: white; border: 1px solid #d9d2bf; color: var(--green-900); font: inherit; font-weight: 600; font-size: 0.92rem;
  text-decoration: none; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.sp-azione:hover { box-shadow: 0 4px 14px rgba(31, 77, 44, 0.14); color: var(--green-900); transform: translateY(-1px); }
.sp-azione:active { transform: scale(0.97); }
.sp-azione-gestore { border-style: dashed; border-color: var(--terracotta-500); color: var(--terracotta-600); }

/* Mappa */
.sp-mappa-sezione { position: relative; }
.sp-mappa { height: 62vh; min-height: 360px; max-height: 640px; background: #e8e4d8; }
.sp-mappa-grande {
  position: absolute; right: 12px; bottom: 28px; z-index: 1000; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.9rem; border-radius: 999px; border: 0; background: white; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--green-900); cursor: pointer;
}
.sp-mappa-sezione-grande { position: fixed; inset: 0; z-index: 3000; background: white; }
.sp-mappa-sezione-grande .sp-mappa { height: 100%; max-height: none; }
body.sp-senza-scroll { overflow: hidden; }
.sp-mappa-lista { height: 380px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.5rem; }

.sp-pin-n {
  position: absolute; right: -6px; bottom: 10px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px;
  background: var(--green-700); color: white; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); border: 2px solid white;
}
.sp-escursionista-wrap { background: none; border: 0; }
.sp-escursionista {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: white; border: 3px solid var(--green-700); font-size: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Carte-popup */
.sp-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); }
.sp-popup .leaflet-popup-content { margin: 0; width: auto !important; min-width: 240px; }
.sp-popup a.leaflet-popup-close-button {
  top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.9);
  color: var(--ink-900); font-size: 18px; line-height: 26px; z-index: 2;
}
.sp-carta { animation: sp-gira 0.55s cubic-bezier(0.3, 1.35, 0.5, 1) both; transform-origin: 50% 100%; }
@keyframes sp-gira {
  from { opacity: 0; transform: perspective(700px) rotateY(-80deg) scale(0.7); }
  to { opacity: 1; transform: none; }
}
.sp-carta-testa {
  position: relative; height: 128px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), transparent 60%),
    var(--sp-colore, var(--green-500));
}
.sp-carta-emoji { font-size: 3.6rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)); animation: sp-ondeggia 2.6s ease-in-out infinite; }
@keyframes sp-ondeggia { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
.sp-carta-img { border: 0; padding: 0; width: 100%; height: 100%; cursor: zoom-in; display: block; }
.sp-carta-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-carta-n {
  position: absolute; left: 10px; bottom: -14px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--green-700); color: white; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 3px solid white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.sp-carta-corpo { padding: 1.1rem 1rem 0.9rem; }
.sp-carta-tipo { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); font-weight: 600; }
.sp-carta h3 { margin: 0.2rem 0 0.35rem; font-size: 1.1rem; color: var(--green-900); line-height: 1.25; }
.sp-carta p { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--ink-700); max-height: 9.5em; overflow-y: auto; }
.sp-carta-foto {
  border: 0; background: var(--cream-100); color: var(--green-900); font: inherit; font-weight: 600; font-size: 0.88rem;
  padding: 0.45rem 0.8rem; border-radius: 999px; cursor: pointer;
}
.sp-carta-foto:hover { background: #ebe0c4; }
.sp-carta-avviso .sp-carta-corpo { border-top: 6px solid #d35400; }

/* Corpo della scheda */
.sp-corpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; margin-top: 2rem; }
.sp-corpo h2 { color: var(--green-900); font-size: 1.3rem; margin: 0 0 0.8rem; }
.sp-descrizione p { font-size: 1.05rem; line-height: 1.7; white-space: pre-line; }
.sp-colonna > section { margin-bottom: 2rem; }
.sp-avvisi { background: #fff4e8; border: 1px solid #f6d2ae; border-radius: var(--radius); padding: 1rem 1.2rem; }
.sp-avvisi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.sp-avviso {
  display: flex; gap: 0.7rem; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0;
  font: inherit; cursor: pointer; padding: 0.3rem 0; color: var(--ink-900);
}
.sp-avviso small { display: block; color: var(--ink-700); white-space: pre-line; }
.sp-avviso-emoji { font-size: 1.4rem; }
.sp-tappe-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: none; }
.sp-tappa {
  width: 100%; display: flex; align-items: center; gap: 0.8rem; text-align: left; background: white; border: 0;
  border-radius: 16px; box-shadow: var(--shadow); padding: 0.75rem 0.9rem; font: inherit; color: var(--ink-900); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sp-tappa:hover { transform: translateY(-2px) rotate(-0.3deg); box-shadow: 0 12px 28px rgba(31, 77, 44, 0.16); }
.sp-tappa-n {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--green-700); color: white;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.sp-tappa-emoji { flex: none; font-size: 1.7rem; transition: transform 0.2s ease; }
.sp-tappa:hover .sp-tappa-emoji { transform: scale(1.2) rotate(-8deg); }
.sp-tappa-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-tappa-testo small { color: var(--ink-500); font-size: 0.82rem; }
.sp-tappa-descr {
  font-size: 0.9rem; color: var(--ink-700); margin-top: 0.2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-tappa-foto { flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.sp-lato { display: flex; flex-direction: column; gap: 1rem; }
.sp-box { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.sp-box h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.sp-box p { margin: 0 0 0.7rem; }
.sp-testo-libero { white-space: pre-line; }
.sp-nota { color: var(--ink-500); font-size: 0.85rem; }
.sp-box-segnala { background: #eef6ef; box-shadow: none; }

/* Profilo altimetrico */
.sp-profilo-svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.sp-profilo-area { stroke: none; }
.sp-profilo-linea { fill: none; stroke: var(--terracotta-600); stroke-width: 2.5; stroke-linejoin: round; }
.sp-profilo-asse { stroke: #d9d2bf; stroke-width: 1; }
.sp-profilo-etichetta { font-size: 10px; fill: var(--ink-500); }
.sp-profilo-punto circle { fill: var(--green-700); stroke: white; stroke-width: 2; }
.sp-profilo-punto text { font-size: 8px; font-weight: 700; fill: white; text-anchor: middle; }
.sp-profilo-cursore line { stroke: var(--green-900); stroke-width: 1; stroke-dasharray: 3 3; }
.sp-profilo-cursore circle { fill: white; stroke: var(--green-900); stroke-width: 2.5; }
.sp-profilo-valore { font-size: 10px; font-weight: 700; fill: var(--green-900); paint-order: stroke; stroke: white; stroke-width: 3px; }
.sp-profilo-presa { fill: transparent; cursor: crosshair; }

/* Elenco */
.sp-hero-lista { padding-bottom: 5.5rem; }
.sp-lista-corpo { margin-top: 1rem; }
.sp-filtri { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.2rem; }
.sp-filtro {
  border: 1px solid #d9d2bf; background: white; border-radius: 999px; padding: 0.5rem 1rem; font: inherit;
  font-size: 0.92rem; cursor: pointer; color: var(--ink-900); transition: transform 0.1s ease, background 0.15s ease;
}
.sp-filtro:hover { background: var(--cream-50); }
.sp-filtro:active { transform: scale(0.95); }
.sp-filtro-on, .sp-filtro-on:hover { background: var(--green-700); color: white; border-color: var(--green-700); }
.sp-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.2rem; }
.sp-card {
  display: flex; flex-direction: column; background: white; border-radius: 20px; box-shadow: var(--shadow);
  overflow: hidden; text-decoration: none; color: var(--ink-900); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sp-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 16px 36px rgba(31, 77, 44, 0.18); color: var(--ink-900); }
.sp-card-entra { animation: sp-sale 0.4s ease both; }
.sp-card-forma {
  position: relative; height: 140px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 214, 120, 0.5), transparent 30%),
    linear-gradient(180deg, #dcefe0, #f4ecd8);
}
.sp-card-forma svg { width: 100%; height: 100%; padding: 8px; }
.sp-forma-bordo { fill: none; stroke: white; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.sp-forma-linea { fill: none; stroke: var(--terracotta-600); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 0; }
.sp-card:hover .sp-forma-linea { animation: sp-disegna 1.1s ease; }
@keyframes sp-disegna { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.sp-forma-inizio { fill: var(--green-700); stroke: white; stroke-width: 2; }
.sp-card-forma-vuota { font-size: 3rem; }
.sp-card-etichette { position: absolute; top: 10px; left: 10px; }
.sp-card-corpo { padding: 0.9rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.sp-card-corpo h2 { margin: 0 0 0.3rem; font-size: 1.2rem; color: var(--green-900); }
.sp-card-corpo > p { margin: 0 0 0.6rem; color: var(--ink-700); font-size: 0.94rem; }
.sp-card-numeri { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.92rem; }
.sp-card-piede { margin-top: auto !important; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.sp-card-difficolta { font-size: 0.88rem; font-weight: 600; color: var(--green-900); }
.sp-card-adatto { display: flex; gap: 0.2rem; font-size: 1.1rem; }
.sp-vuoto { text-align: center; font-size: 1.1rem; color: var(--ink-700); padding: 2.5rem 1rem; background: white; border-radius: var(--radius); box-shadow: var(--shadow); }
.sp-link-gestione { margin-top: 2rem; text-align: center; }

/* Esplora: card Sentieri */
.esplora-sentieri { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 0.3rem; }
.esplora-sentieri li { display: flex; justify-content: space-between; gap: 0.5rem; }
.esplora-sentieri li::before { content: '🥾'; margin-right: 0.4rem; }
.esplora-sentieri li a { flex: 1; }
.esplora-sentieri small { color: var(--ink-500); }

.sp-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 5000;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none;
}

@media (max-width: 800px) {
  .sp-corpo { grid-template-columns: 1fr; }
  .sp-hero { padding-bottom: 5.5rem; }
  .sp-hero-foto { padding-top: 5rem; }
  .sp-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-mappa { height: 55vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-hero h1, .sp-sommario, .sp-numeri li, .sp-carta, .sp-carta-emoji, .sp-card-entra { animation: none !important; }
}

/* Stampa: una scheda da portare in tasca */
@media print {
  .site-header, .site-footer, .sp-banner, .sp-azioni, .sp-mappa-grande, .leaflet-control-container,
  .sp-box-segnala, .sp-toast, .sp-colline, .sp-briciole { display: none !important; }
  body { background: white; }
  .sp-hero, .sp-hero-foto { background: none !important; color: var(--ink-900); padding: 0 0 0.5rem; }
  .sp-hero-foto h1, .sp-hero-foto .sp-sommario { color: var(--ink-900); text-shadow: none; }
  .sp-riassunto { margin-top: 0; }
  .sp-numeri li, .sp-box, .sp-tappa { box-shadow: none; border: 1px solid #ddd; animation: none; }
  .sp-mappa { height: 420px !important; max-height: none; break-inside: avoid; }
  .sp-corpo { display: block; }
  .sp-tappa { break-inside: avoid; }
  .sp-tappa-descr { display: block; -webkit-line-clamp: unset; }
  .sp-lato { margin-top: 1rem; }
}

/* ---------- Progetti comuni (crowdfunding) ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Infografica: [livello %] [sagoma] [tacche delle soglie] */
/* La sagoma ha altezza fissa e larghezza dal viewBox: non va mai compressa
   (verrebbe rimpicciolita dentro il suo riquadro e le tacche, posizionate in %
   dell'altezza, non combacerebbero più con le linee). Si restringe la scala. */
.pc-infografica {
  --pc-altezza: 400px;
  display: grid;
  grid-template-columns: 3.2rem auto minmax(0, 1fr);
  margin: 1.2rem 0 0.8rem;
}
.pc-figura { position: relative; }
.pc-svg {
  display: block;
  height: var(--pc-altezza);
  width: auto;
  overflow: visible;
}
.pc-bordo {
  fill: var(--ink-700);
  stroke: var(--ink-700);
  stroke-width: 7;
  stroke-linejoin: round;
}
.pc-fondo { fill: #efe6cf; }
.pc-soglia-linea {
  stroke: var(--ink-900);
  stroke-opacity: 0.4;
  stroke-width: 2;
  stroke-dasharray: 5 5;
}
.pc-onda { animation: pc-onda 2.8s linear infinite; }
@keyframes pc-onda {
  to { transform: translateX(-40px); }
}

.pc-colonna-livello,
.pc-scala {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pc-livello {
  position: absolute;
  right: 0.55rem;
  transform: translateY(-50%);
}
.pc-livello-perc {
  position: relative;
  display: inline-block;
  background: var(--terracotta-600);
  color: white;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.pc-livello-perc::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right: 0;
  border-left-color: var(--terracotta-600);
}
.pc-tacca {
  position: absolute;
  left: 0.6rem;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  padding-left: 0.6rem;
  border-left: 3px solid var(--cream-100);
  transition: border-color 0.3s ease;
}
.pc-tacca-importo {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
/* Una riga sola: le tacche sono distanziate per due righe (importo + titolo);
   il titolo completo è nella lista "Le tappe" e nel title. */
.pc-tacca-titolo {
  font-size: 0.8rem;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-tacca-obiettivo .pc-tacca-importo { font-size: 1rem; color: var(--terracotta-600); }
.pc-tacca.is-raggiunta { border-left-color: var(--green-500); }
.pc-tacca.is-raggiunta .pc-tacca-importo { color: var(--green-700); }
.pc-tacca.is-raggiunta .pc-tacca-importo::after { content: ' ✓'; }
.pc-tacca.pc-pop { animation: pc-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes pc-pop {
  0% { transform: translateY(-50%) scale(1); }
  40% { transform: translateY(-50%) scale(1.18); }
  100% { transform: translateY(-50%) scale(1); }
}

/* Effetti a obiettivo raggiunto */
.pc-effetto {
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.is-pieno .pc-effetto { opacity: 1; }

.pc-fiamma { transform-box: fill-box; transform-origin: 50% 100%; }
.is-pieno .pc-fiamma-1 { animation: pc-fiamma 0.9s ease-in-out infinite alternate; }
.is-pieno .pc-fiamma-2 { animation: pc-fiamma 0.7s ease-in-out infinite alternate-reverse; }
.is-pieno .pc-fiamma-3 { animation: pc-fiamma 0.5s ease-in-out infinite alternate; }
@keyframes pc-fiamma {
  from { transform: scale(0.82, 0.78); }
  to { transform: scale(1.06, 1.16); }
}

.pc-scintille { transform-box: fill-box; transform-origin: 50% 100%; }
.is-pieno .pc-scintille { animation: pc-scintille 1.4s ease-in-out infinite; }
@keyframes pc-scintille {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

.pc-frutti circle {
  fill: #d0312d;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.is-pieno .pc-frutti circle { transform: scale(1); }
.pc-frutti circle:nth-child(2) { transition-delay: 0.08s; }
.pc-frutti circle:nth-child(3) { transition-delay: 0.16s; }
.pc-frutti circle:nth-child(4) { transition-delay: 0.24s; }
.pc-frutti circle:nth-child(5) { transition-delay: 0.32s; }
.pc-frutti circle:nth-child(6) { transition-delay: 0.4s; }
.pc-frutti circle:nth-child(7) { transition-delay: 0.48s; }
.pc-frutti circle:nth-child(8) { transition-delay: 0.56s; }
.pc-frutti circle:nth-child(9) { transition-delay: 0.64s; }
.pc-frutti circle:nth-child(10) { transition-delay: 0.72s; }

.pc-finestre rect,
.pc-finestre circle {
  fill: rgba(29, 42, 35, 0.14);
  transition: fill 0.8s ease;
}
.is-pieno .pc-finestre rect,
.is-pieno .pc-finestre circle { fill: #ffd86b; }
.pc-fumo circle { transform-box: fill-box; transform-origin: center; }
.is-pieno .pc-fumo circle { animation: pc-fumo 3s ease-out infinite; }
.is-pieno .pc-fumo .pc-fumo-2 { animation-delay: 1s; }
.is-pieno .pc-fumo .pc-fumo-3 { animation-delay: 2s; }
@keyframes pc-fumo {
  0% { transform: translate(0, 24px) scale(0.4); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translate(8px, -16px) scale(1.25); opacity: 0; }
}

/* Kit occasioni: Halloween, Natale, tombola, castagnata, climatizzatore */
.pc-volto path { fill: rgba(29, 42, 35, 0.4); transition: fill 0.8s ease; }
.is-pieno .pc-volto path { fill: #ffd23f; }
.pc-pipistrello { transform-box: fill-box; transform-origin: center; }
.is-pieno .pc-pipistrello { animation: pc-battito 0.35s ease-in-out infinite alternate; }
@keyframes pc-battito {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.35); }
}

.pc-palline circle {
  fill: rgba(255, 255, 255, 0.5);
  stroke: rgba(29, 42, 35, 0.35);
  stroke-width: 2;
  transition: fill 0.6s ease;
}
.is-pieno .pc-palline .pc-pallina-a { fill: #d0312d; }
.is-pieno .pc-palline .pc-pallina-b { fill: #f2b33d; }
.is-pieno .pc-palline .pc-pallina-c { fill: #4aa3df; }
.is-pieno .pc-palline circle { animation: pc-luccica 1.6s ease-in-out infinite; }
.is-pieno .pc-palline circle:nth-child(3n + 2) { animation-delay: 0.5s; }
.is-pieno .pc-palline circle:nth-child(3n) { animation-delay: 1s; }
@keyframes pc-luccica {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pc-stella-raggi { transform-box: fill-box; transform-origin: center; }
.is-pieno .pc-stella-raggi { animation: pc-scintille 1.4s ease-in-out infinite; }

.pc-gettone { transform-box: fill-box; transform-origin: center; }
.is-pieno .pc-gettone { animation: pc-salto 1.2s ease-in-out infinite; }
.is-pieno .pc-gettone-2 { animation-delay: 0.2s; }
.is-pieno .pc-gettone-3 { animation-delay: 0.4s; }
@keyframes pc-salto {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.is-pieno .pc-vapore path { animation: pc-vapore 2.4s ease-out infinite; }
.is-pieno .pc-vapore .pc-vapore-2 { animation-delay: 0.8s; }
.is-pieno .pc-vapore .pc-vapore-3 { animation-delay: 1.6s; }
@keyframes pc-vapore {
  0% { transform: translateY(12px); opacity: 0; }
  40% { opacity: 0.9; }
  100% { transform: translateY(-10px); opacity: 0; }
}

.pc-temp { transition: opacity 0.6s ease; }
.pc-temp-fresco { opacity: 0; }
.is-pieno .pc-temp-caldo { opacity: 0; }
.is-pieno .pc-temp-fresco { opacity: 1; }
.is-pieno .pc-aria path { stroke-dasharray: 10 8; animation: pc-aria 0.9s linear infinite; }
@keyframes pc-aria {
  to { stroke-dashoffset: -18; }
}
.pc-fiocco { transform-box: fill-box; transform-origin: center; }
.is-pieno .pc-fiocco { animation: pc-fiocco 3s linear infinite; }
@keyframes pc-fiocco {
  to { transform: rotate(180deg); }
}

/* Elementi bonus sopra la sagoma */
.pc-alone { transform-box: fill-box; transform-origin: center; }
.is-pieno .pc-alone { animation: pc-gira 12s linear infinite; }
.is-pieno .pc-alone-veloce { animation-duration: 1.6s; }
@keyframes pc-gira {
  to { transform: rotate(360deg); }
}
.pc-brillio { transform-box: fill-box; transform-origin: center; }
.is-pieno .pc-brillio { animation: pc-luccica 1.2s ease-in-out infinite; }
.is-pieno .pc-brillio-2 { animation-delay: 0.4s; }
.is-pieno .pc-brillio-3 { animation-delay: 0.8s; }
.pc-nota { transform-box: fill-box; transform-origin: center; }
.is-pieno .pc-nota { animation: pc-vapore 2.2s ease-out infinite; }
.is-pieno .pc-nota-2 { animation-delay: 1.1s; }
.is-pieno .pc-sventola { stroke-dasharray: 14 10; animation: pc-aria 1.2s linear infinite; }
.pc-orbita { transform-origin: 0 0; animation: pc-gira 9s linear infinite; }
.pc-contro { transform-box: fill-box; transform-origin: center; animation: pc-gira-contro 9s linear infinite; }
.is-pieno .pc-orbita, .is-pieno .pc-contro { animation-duration: 4s; }
.pc-ala { transform-box: fill-box; transform-origin: center; animation: pc-battito 0.35s ease-in-out infinite alternate; }
@keyframes pc-gira-contro {
  to { transform: rotate(-360deg); }
}
.pc-fagiolo {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.is-pieno .pc-fagiolo { transform: scale(1); }
.is-pieno .pc-fagiolo-2 { transition-delay: 0.15s; }
.is-pieno .pc-fagiolo-3 { transition-delay: 0.3s; }
.is-pieno .pc-fagiolo-4 { transition-delay: 0.45s; }
.is-pieno .pc-fagiolo-5 { transition-delay: 0.6s; }
.pc-castagna-salta { transform-box: fill-box; transform-origin: center; }
.is-pieno .pc-castagna-salta { animation: pc-salto 1s ease-in-out infinite; }

.pc-badge-bonus {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: #f2b33d;
  color: #4a3200;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.pc-obiettivo-superato { margin: 0.4rem 0 0; color: var(--green-700); font-weight: 600; font-size: 0.9rem; }
.pc-tacca-bonus .pc-tacca-importo { color: #b07a10; }
.pc-tacca-bonus.is-raggiunta .pc-tacca-importo { color: var(--green-700); }
.pc-tappe li.pc-tappa-bonus { align-items: start; }
.pc-tappa-bonus .pc-tappa-segno { color: #b07a10; border-color: #f2b33d; }
.pc-tappe li.pc-tappa-bonus.is-raggiunta .pc-tappa-segno { color: white; }
.pc-tappa-descrizione { display: block; margin-top: 0.2rem; color: var(--ink-700); font-size: 0.88rem; font-weight: 400; }
.pc-bonus-admin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; }
.pc-bonus-anteprima { margin: 0; text-align: center; }
.pc-bonus-anteprima .pc-svg { --pc-altezza: 240px; }
@media (max-width: 700px) {
  .pc-bonus-admin { grid-template-columns: minmax(0, 1fr); }
}

/* Barra e versione mini (card, home) */
.pc-barra {
  display: block;
  height: 10px;
  background: var(--cream-100);
  border-radius: 999px;
  overflow: hidden;
}
.pc-barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--terracotta-600), var(--terracotta-500));
}
.pc-mini { display: block; margin: 0; }
.pc-mini .pc-svg { --pc-altezza: 150px; }

/* Scheda progetto. width: il body è flex in colonna e i margini auto del
   .container disattiverebbero lo stretch: la pagina si stringerebbe sul contenuto. */
.progetti,
.progetto-page { width: 100%; }
.progetto-page { padding-bottom: 3rem; }
.progetto-back { margin: 1.2rem 0 0.4rem; }
.progetto-back a { font-weight: 600; text-decoration: none; }
.progetto-head h1 {
  color: var(--green-900);
  margin: 0.5rem 0 0.25rem;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.15;
}
.progetto-sottotitolo {
  color: var(--ink-700);
  font-size: 1.1rem;
  margin: 0 0 1.2rem;
  max-width: 60ch;
}
.progetto-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.progetto-termometro { padding: 1.5rem; }
.progetto-termometro .pc-infografica {
  --pc-altezza: 380px;
  /* Impilata (schermi medi) resta centrata e non si allarga oltre il necessario. */
  max-width: 34rem;
  margin: 1.2rem auto 0.8rem;
}
.progetto-termometro .btn + .btn { margin-top: 0.6rem; }
.pc-cifre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 0 0 0.6rem;
  color: var(--ink-700);
}
.pc-raccolto {
  font-size: 2.1rem;
  line-height: 1;
  color: var(--terracotta-600);
  font-variant-numeric: tabular-nums;
}
.pc-meta { margin: 0.55rem 0 0; color: var(--ink-500); font-size: 0.9rem; }
.pc-meta strong { color: var(--ink-900); }
.pc-incitamento { text-align: center; margin: 0.4rem 0 1.1rem; }
.pc-frase {
  margin: 0 0 0.2rem;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--green-900);
}
.pc-frase-dettaglio { margin: 0; color: var(--ink-700); }
.pc-urgenza {
  display: inline-block;
  margin: 0.6rem 0 0;
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  background: #fff5e6;
  color: #7a4a10;
  font-weight: 700;
  font-size: 0.85rem;
}
.pc-condividi-esito { text-align: center; margin: 0.4rem 0 0; min-height: 1.2em; }

.progetto-contenuto h2 { color: var(--green-900); }
.progetto-tappe { margin-bottom: 1.5rem; }
.progetto-descrizione p { max-width: 65ch; }
.progetto-aggiornamento { border-left: 5px solid var(--green-500); }

.pc-tappe { list-style: none; padding: 0; margin: 0 0 1rem; }
.pc-tappe li {
  display: grid;
  grid-template-columns: 1.6rem 5.8rem 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--cream-100);
}
.pc-tappa-segno {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid #e2d6b8;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  color: white;
  font-weight: 800;
}
.pc-tappe li.is-raggiunta .pc-tappa-segno { background: var(--green-700); border-color: var(--green-700); }
.pc-tappa-importo { font-weight: 700; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.pc-tappe li.is-raggiunta .pc-tappa-titolo { color: var(--green-900); font-weight: 600; }
.pc-tappa-obiettivo .pc-tappa-importo { color: var(--terracotta-600); }
.pc-se-non-raggiunto {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: var(--cream-100);
  color: var(--ink-700);
  font-size: 0.9rem;
}

.progetto-dona { scroll-margin-top: 1rem; }
.pc-importi { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.2rem; }
.pc-importo-chip {
  font: inherit;
  font-weight: 700;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 2px solid var(--cream-100);
  background: white;
  color: var(--green-900);
  cursor: pointer;
}
.pc-importo-chip:hover { border-color: var(--green-500); }
.pc-importo-chip.is-attivo { background: var(--green-700); border-color: var(--green-700); color: white; }
.form-evento-iscrivi .pc-importo-label { margin-top: 0.4rem; }
.pc-mostra-nome small { display: block; font-weight: 400; }
.pc-nota-termometro { margin: 0.8rem 0 0; }

.progetto-muro h2 { display: flex; align-items: center; gap: 0.5rem; }
.pc-muro-conta {
  background: var(--cream-100);
  color: var(--ink-700);
  border-radius: 999px;
  font-size: 0.85rem;
  padding: 0.05rem 0.6rem;
}
.pc-muro {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.6rem;
}
.pc-muro-voce {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 0.6rem;
  padding: 0.7rem 0.9rem;
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.pc-muro-nome { font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; }
.pc-muro-voce.is-anonimo .pc-muro-nome { font-style: italic; color: var(--ink-700); }
.pc-muro-importo { font-weight: 800; color: var(--terracotta-600); white-space: nowrap; }
.pc-muro-data { grid-column: 1 / -1; font-size: 0.78rem; color: var(--ink-500); }
.pc-muro-offerta { background: var(--cream-100); box-shadow: none; }

/* Elenco progetti */
.progetti-sezione { margin: 1.5rem 0 2.5rem; }
.progetti-sezione h2 { color: var(--green-900); }
.progetti-griglia {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1.2rem;
}
.progetto-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.progetto-card > a {
  display: flex;
  gap: 1rem;
  height: 100%;
  padding: 1.2rem;
  color: inherit;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.progetto-card > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(31, 77, 44, 0.14);
}
.progetto-card .pc-mini { flex: 0 0 auto; }
.progetto-card-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.progetto-card h3 { margin: 0; color: var(--green-900); line-height: 1.2; }
.progetto-card-sotto { margin: 0; color: var(--ink-700); font-size: 0.9rem; }
.progetto-card-cifre { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--ink-700); }
.progetto-card-cifre strong { color: var(--terracotta-600); }
.progetto-card-meta { margin: 0; font-size: 0.85rem; color: var(--ink-500); }
.progetto-card-frase { margin: 0.2rem 0 0; font-size: 0.88rem; font-weight: 700; color: var(--green-900); }
.progetto-card-cta { margin-top: auto; padding-top: 0.4rem; font-weight: 700; color: var(--green-700); }
.progetto-card-concluso .progetto-card-testo { gap: 0.3rem; }
.progetto-card .sondaggio-stato { align-self: flex-start; }
.progetti-altro { color: var(--ink-700); }
.progetti-admin-link { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; }
.progetto-back { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; }
.progetto-back .progetti-admin-link { margin: 0; }

/* Progetto Halloween: rimando alla pagina dell'evento con la zucca che saltella. */
.progetto-evento-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 34rem;
  margin: 0 0 1.5rem;
  padding: 0.8rem 1.2rem 0.8rem 0.9rem;
  background: #fff4e6;
  border: 2px solid #f28c28;
  border-radius: var(--radius);
  color: var(--ink-900);
  text-decoration: none;
  box-shadow: var(--shadow);
}
.progetto-evento-link:hover,
.progetto-evento-link:focus-visible { background: #ffe9cf; }
.pel-zucca { flex: 0 0 auto; width: 64px; height: auto; overflow: visible; }
.pel-testo { display: flex; flex-direction: column; gap: 0.15rem; }
.pel-testo strong { font-size: 1.1rem; color: var(--ink-900); }
.pel-url { font-weight: 700; color: #b5461a; overflow-wrap: anywhere; }
.progetto-evento-link:hover .pel-url { text-decoration: underline; }
.pel-salto {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pel-salto 1.1s ease-in-out infinite;
}
.pel-ombra {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pel-ombra 1.1s ease-in-out infinite;
}
@keyframes pel-salto {
  0%, 100% { transform: translateY(0) scale(1.08, 0.9); }
  15% { transform: translateY(0) scale(0.95, 1.06); }
  45% { transform: translateY(-14px) rotate(-6deg) scale(1, 1); }
  55% { transform: translateY(-14px) rotate(6deg) scale(1, 1); }
  85% { transform: translateY(0) scale(0.97, 1.04); }
}
@keyframes pel-ombra {
  0%, 15%, 85%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.6); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .pel-salto,
  .pel-ombra { animation: none; }
}

/* Home e /donazioni */
.home-progetti { margin: 0.5rem 0 1.2rem; }
.home-progetto {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.35rem;
  color: var(--ink-900);
  text-decoration: none;
  border-top: 1px solid var(--cream-100);
}
.home-progetto:hover { background: var(--cream-50); color: var(--green-900); }
.home-progetto .pc-mini .pc-svg { --pc-altezza: 84px; }
.home-progetto-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.home-progetto-titolo { font-weight: 600; }
.home-progetto-cifre { font-size: 0.85rem; color: var(--ink-700); }
.home-progetto-frase { font-size: 0.85rem; font-weight: 600; color: var(--terracotta-600); }
.donazione-progetti {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  background: var(--cream-100);
}
.donazione-progetti ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.donazione-progetti li { margin: 0.2rem 0; }
.donazione-progetti a { font-weight: 600; }
.donazione-grazie-progetto {
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: #f3faf5;
  border-left: 4px solid var(--green-500);
  text-align: left;
}

/* Admin */
.pc-admin-riepilogo { color: var(--ink-700); }
.pc-sagome-scelta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.8rem;
}
.iscrizione-form .pc-sagoma-opzione {
  position: relative;
  align-items: center;
  padding: 0.8rem 0.6rem;
  border: 2px solid var(--cream-100);
  border-radius: 12px;
  cursor: pointer;
}
.pc-sagoma-opzione input { position: absolute; opacity: 0; pointer-events: none; }
.pc-sagoma-opzione:has(input:checked) { border-color: var(--green-700); background: #f3faf5; }
.pc-sagoma-opzione:has(input:focus-visible) { outline: 3px solid var(--green-500); outline-offset: 2px; }
.pc-sagoma-anteprima .pc-svg { --pc-altezza: 130px; }
.pc-sagoma-nome { font-weight: 600; }
.pc-offerta-form { margin-top: 1rem; }
.pc-offerta-azioni { align-self: end; }
.pc-elimina { margin: 0 0 2rem; }
.donazioni-filtro-progetto { margin: 0 0 1rem; }
.donazioni-filtro-progetto label { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Termometro e descrizione affiancati solo quando c'è spazio per entrambi:
   31rem di riquadro lasciano alla scala ~190px per le tappe, e a 1040px la
   colonna di destra resta larga ~28rem per testo e form. */
@media (min-width: 1040px) {
  .progetto-layout {
    grid-template-columns: minmax(0, 31rem) minmax(0, 1fr);
    align-items: start;
  }
  .progetto-termometro { position: sticky; top: 1rem; }
}

@media (max-width: 600px) {
  /* Su telefono il livello in % è già nelle cifre sopra: spazio alla scala. */
  .pc-infografica {
    --pc-altezza: 320px;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pc-colonna-livello { display: none; }
  .progetto-termometro .pc-infografica { --pc-altezza: 320px; }
  .pc-tacca-titolo { font-size: 0.75rem; }
  .progetto-card > a { padding: 1rem; gap: 0.8rem; }
  .pc-mini .pc-svg { --pc-altezza: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-onda, .pc-fiamma, .pc-fumo circle, .pc-scintille, .pc-tacca.pc-pop,
  .pc-pipistrello, .pc-palline circle, .pc-stella-raggi, .pc-gettone, .pc-vapore path,
  .pc-aria path, .pc-fiocco, .pc-alone, .pc-brillio, .pc-nota, .pc-sventola,
  .pc-orbita, .pc-contro, .pc-ala, .pc-castagna-salta { animation: none !important; }
  .pc-fagiolo { transition: none; }
  .pc-frutti circle, .pc-finestre rect, .pc-finestre circle, .pc-effetto,
  .pc-volto path, .pc-temp { transition: none; }
}

/* ---------- Corsi: il taccuino d'artista (/corsi) ---------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces-italic.woff2') format('woff2');
}

.corsi-pagina {
  --inchiostro: #2f2b27;
  --matita: #77716a;
  --carta: #fdfaf2;
  overflow-x: clip;
  padding: 1.5rem 0.75rem 2.5rem;
}

/* Il foglio: carta avorio con grana leggera, appena storta. */
.corsi-foglio {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
  background:
    radial-gradient(circle at 30% 40%, rgba(120, 100, 60, 0.035) 0 1px, transparent 1.5px) 0 0 / 6px 6px,
    radial-gradient(circle at 70% 70%, rgba(120, 100, 60, 0.03) 0 1px, transparent 1.5px) 0 0 / 9px 9px,
    linear-gradient(180deg, #fffdf6, #fbf6ea);
  border-radius: 2px;
  box-shadow: 0 1px 0 #ebe2cc, 0 24px 50px -22px rgba(70, 50, 20, 0.25);
  transform: rotate(-0.25deg);
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  color: var(--inchiostro);
}

/* Schizzi a matita e macchie d'acquerello */
.corsi-scarabocchi-defs { position: absolute; width: 0; height: 0; }

.corsi-scarabocchi {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.scarabocchio {
  position: absolute;
  overflow: visible;
}

/* La grana della matita va sugli elementi interni (sull'<svg> esterno
   Chrome non disegna nulla). */
.scarabocchio > *,
.corsi-sottolineatura > *,
.corsi-freccia > * {
  filter: url(#corsi-matita);
}

.scarabocchio .tr,
.corsi-sottolineatura .tr,
.corsi-freccia .tr {
  fill: none;
  stroke: var(--matita);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.scarabocchio .tr.sottile { stroke-width: 1; }

/* Velature d'acquerello dentro agli schizzi */
.tr.w-salvia { fill: rgba(143, 178, 138, 0.38); }
.tr.w-oliva { fill: rgba(112, 128, 76, 0.5); }
.tr.w-ocra { fill: rgba(222, 178, 90, 0.42); }
.tr.w-terracotta { fill: rgba(205, 116, 80, 0.55); }

.corsi-sottolineatura .tr,
.corsi-freccia .tr {
  stroke: var(--inchiostro);
  stroke-width: 1.6;
}

/* Il tratto si disegna piano, poi arriva la velatura. */
.corsi-js .scarabocchio .tr,
.corsi-js .corsi-sottolineatura .tr,
.corsi-js .corsi-freccia .tr {
  stroke-dashoffset: 1;
  fill-opacity: 0;
  animation: schizzo-disegna 2.2s ease-in-out var(--d, 0s) forwards;
  animation-play-state: paused;
}

.corsi-js .is-visibile .tr { animation-play-state: running; }

@keyframes schizzo-disegna {
  65% { stroke-dashoffset: 0; fill-opacity: 0; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

/* Movimento: solo una brezza leggera sui rami. */
.mv { transform-box: fill-box; transform-origin: 0% 100%; }
.mv-brezza { animation: schizzo-brezza 6s ease-in-out infinite alternate; }
.mv-lenta { animation-duration: 8.5s; animation-delay: -2s; }

@keyframes schizzo-brezza {
  from { transform: rotate(-1.2deg); }
  to { transform: rotate(1.4deg); }
}

/* Le macchie (e la velatura dei cartoncini) passano dal filtro SVG
   #corsi-acquerello: bordi sfrangiati e pigmento granuloso. */
.corsi-macchia {
  position: absolute;
  border-radius: 58% 42% 55% 45% / 47% 58% 42% 53%;
  filter: url(#corsi-acquerello);
  opacity: 0.7;
}

.corsi-macchia::after {
  content: '';
  position: absolute;
  inset: 22% 18% 18% 30%;
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  background: inherit;
  opacity: 0.6;
}

.macchia-salvia { background: radial-gradient(ellipse at 45% 45%, rgba(156, 191, 152, 0.35), rgba(156, 191, 152, 0.22) 62%, rgba(130, 170, 125, 0.4) 70%, transparent 72%); }
.macchia-ocra { background: radial-gradient(ellipse at 45% 45%, rgba(230, 190, 100, 0.33), rgba(230, 190, 100, 0.2) 62%, rgba(215, 170, 80, 0.38) 70%, transparent 72%); }
.macchia-terracotta { background: radial-gradient(ellipse at 45% 45%, rgba(217, 144, 106, 0.3), rgba(217, 144, 106, 0.18) 62%, rgba(200, 120, 85, 0.36) 70%, transparent 72%); }
.macchia-blu { background: radial-gradient(ellipse at 45% 45%, rgba(143, 176, 207, 0.33), rgba(143, 176, 207, 0.2) 62%, rgba(120, 155, 190, 0.38) 70%, transparent 72%); }

.corsi-js .corsi-macchia { animation: macchia-spande 2.4s ease-out both; }

@keyframes macchia-spande {
  from { opacity: 0; transform: scale(0.4); }
}

/* Dove stanno schizzi e macchie sul foglio */
.macchia-1 { top: 1.2rem; left: 2%; width: 170px; height: 110px; }
.macchia-2 { top: 2.5rem; right: 4%; width: 120px; height: 100px; animation-delay: 0.4s; }
.macchia-3 { top: 48%; right: 1%; width: 110px; height: 90px; animation-delay: 0.8s; }
.macchia-4 { bottom: 3rem; left: 9%; width: 130px; height: 85px; animation-delay: 1.2s; }

.schizzo-ulivo { top: 0.8rem; left: -8px; width: 230px; transform: rotate(-6deg); }
.schizzo-foglia { top: 2rem; right: 6%; width: 64px; transform: rotate(20deg); }
.schizzo-felce { top: 30%; left: 0; width: 64px; }
.schizzo-bacche { top: 44%; right: 0; width: 130px; transform: rotate(-18deg); }
.schizzo-fiore { bottom: 0.5rem; left: 4%; width: 78px; }
.schizzo-spiga-1 { bottom: 0.5rem; right: 6%; width: 46px; }
.schizzo-spiga-2 { bottom: 0.2rem; right: calc(6% + 34px); width: 40px; transform: rotate(10deg); }

/* Titolo e testi */
.corsi-foglio-testa {
  position: relative;
  max-width: 48rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.corsi-titolo {
  margin: 0;
  font-family: inherit;
  font-weight: 350;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.05;
  text-wrap: balance;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
}

.corsi-titolo em {
  white-space: nowrap;
  font-weight: 400;
  color: #b65a32;
}

.corsi-sottolineatura {
  display: block;
  width: min(260px, 60%);
  height: 20px;
  margin: 0.35rem auto 0;
  overflow: visible;
  --d: 0.4s;
}

.corsi-intro {
  max-width: 36rem;
  margin: 0.9rem auto 0;
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: #5b554d;
}

.corsi-vuoto {
  position: relative;
  margin: 3rem 0 6rem;
  text-align: center;
  font-style: italic;
  font-size: 1.2rem;
  color: #6b655c;
}

/* La bacheca: cartoncini con angolini fotografici */
.corsi-bacheca {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2.6rem 2.4rem;
  max-width: 860px;
  margin: 0 auto;
  padding: 1rem 0;
}

.corsi-foglietto {
  margin-top: var(--y);
}

/* Riordino dei foglietti (solo admin, js/corsi-ordine.js) */
.corsi-riordino {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: 860px;
  margin: 0 auto 1rem;
}
.corsi-riordino-azioni { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.corsi-riordino-azioni[hidden] { display: none; }
.corsi-riordino-aiuto { font-size: 0.9rem; color: var(--ink-500); }
.corsi-riordino-esito { font-size: 0.9rem; }
/* Durante il riordino niente animazione d'ingresso: spostare un foglietto
   nel DOM la farebbe ripartire. */
.corsi-js .corsi-bacheca.is-riordino .corsi-foglietto { position: relative; cursor: grab; opacity: 1; animation: none; }
.corsi-bacheca.is-riordino .corsi-foglietto-carta {
  outline: 2px dashed var(--c);
  outline-offset: 4px;
  cursor: grab;
}
.corsi-bacheca.is-riordino .corsi-foglietto.is-trascinato { opacity: 0.4; }
.corsi-riordino-frecce {
  position: absolute;
  left: 50%;
  bottom: -1.9rem;
  display: flex;
  gap: 0.4rem;
  transform: translateX(-50%);
}
.corsi-riordino-frecce button {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--c);
  border-radius: 6px;
  background: white;
  color: var(--c);
  font: inherit;
  cursor: pointer;
}

.corsi-js .corsi-foglietto { opacity: 0; }

.corsi-js .corsi-foglietto.is-visibile {
  animation: cartoncino-posa 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(var(--i) * 120ms);
}

@keyframes cartoncino-posa {
  from { opacity: 0; transform: translateY(18px) rotate(3deg); }
  to { opacity: 1; transform: none; }
}

.corsi-foglietto-carta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 1.6rem 1.2rem 1.4rem;
  background: var(--carta);
  border: 1px solid #ece4d2;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(60, 40, 10, 0.08), 0 14px 26px -16px rgba(60, 40, 10, 0.35);
  color: var(--inchiostro);
  text-align: center;
  text-decoration: none;
  transform: rotate(var(--r));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.4s;
}

.corsi-foglietto-carta:hover,
.corsi-foglietto-carta:focus-visible {
  color: var(--inchiostro);
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 2px 3px rgba(60, 40, 10, 0.08), 0 24px 34px -18px rgba(60, 40, 10, 0.4);
  z-index: 2;
}

.corsi-foglietto-carta:focus-visible {
  outline: 1.5px solid var(--inchiostro);
  outline-offset: 5px;
}

/* Angolini fotografici: quattro triangoli di carta scura sugli angoli. */
.corsi-angolini {
  position: absolute;
  inset: -3px;
  pointer-events: none;
  --a: #4a4038;
  background:
    linear-gradient(135deg, var(--a) 0 50%, transparent 50%) top left / 20px 20px no-repeat,
    linear-gradient(225deg, var(--a) 0 50%, transparent 50%) top right / 20px 20px no-repeat,
    linear-gradient(45deg, var(--a) 0 50%, transparent 50%) bottom left / 20px 20px no-repeat,
    linear-gradient(315deg, var(--a) 0 50%, transparent 50%) bottom right / 20px 20px no-repeat;
  opacity: 0.88;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* Macchia d'acquerello nel colore del corso, dietro all'illustrazione */
.corsi-acquerello {
  position: absolute;
  top: 1rem;
  left: 50%;
  width: 136px;
  height: 112px;
  margin-left: -68px;
  border-radius: 58% 42% 55% 45% / 47% 58% 42% 53%;
  background: radial-gradient(ellipse at 42% 42%,
    color-mix(in srgb, var(--c) 26%, transparent),
    color-mix(in srgb, var(--c) 16%, transparent) 60%,
    color-mix(in srgb, var(--c) 34%, transparent) 69%,
    transparent 71%);
  filter: url(#corsi-acquerello);
  pointer-events: none;
}

.corsi-acquerello::after {
  content: '';
  position: absolute;
  inset: 18% 10% 26% 34%;
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  background: color-mix(in srgb, var(--c) 14%, transparent);
}

.corsi-foglietto:nth-child(3n + 2) .corsi-acquerello { border-radius: 45% 55% 48% 52% / 60% 40% 58% 42%; transform: rotate(18deg); }
.corsi-foglietto:nth-child(3n) .corsi-acquerello { border-radius: 52% 48% 40% 60% / 42% 56% 44% 58%; transform: rotate(-14deg); }

.corsi-js .corsi-foglietto .corsi-acquerello { opacity: 0; }

.corsi-js .corsi-foglietto.is-visibile .corsi-acquerello {
  animation: acquerello-spande 1.6s ease-out both;
  animation-delay: calc(var(--i) * 120ms + 0.35s);
}

@keyframes acquerello-spande {
  from { opacity: 0; scale: 0.35; }
  to { opacity: 1; scale: 1; }
}

/* L'illustrazione diventa un disegno a china, con le velature nel colore. */
.corsi-foglietto-carta .corsi-ill {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0.3rem 0 0.7rem;
  color: var(--inchiostro);
  --ill-bianco: var(--carta);
}

.corsi-foglietto-carta .corsi-ill .ill-sfondo { display: none; }
.corsi-foglietto-carta .corsi-ill .t { stroke-width: 2.6; }
.corsi-foglietto-carta .corsi-ill .t.sottile { stroke-width: 1.8; }
.corsi-foglietto-carta .corsi-ill .t.spesso { stroke-width: 4; }
.corsi-foglietto-carta .corsi-ill .l { fill: var(--c); opacity: 0.35; }
.corsi-foglietto-carta .corsi-ill .ill-alone { fill: var(--c); }
.corsi-foglietto-carta .corsi-ill .ill-onda { stroke: var(--c); }

.corsi-foglietto-nome {
  position: relative;
  margin: 0;
  font-family: inherit;
  font-weight: 450;
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--inchiostro);
}

.corsi-foglietto-giorni {
  position: relative;
  margin: 0.3rem 0 0;
  font-style: italic;
  font-weight: 350;
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--c) 80%, black);
}

.corsi-foglietto-dal {
  position: relative;
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 300;
  color: #6b655c;
}

/* "oggi": timbrino a inchiostro */
.corsi-bollino {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  padding: 0.1rem 0.55rem 0.15rem;
  border: 1.5px solid #b65a32;
  border-radius: 999px;
  color: #b65a32;
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.3;
  transform: rotate(8deg);
}

.corsi-bollino.is-salta {
  border-color: #8a837a;
  color: #8a837a;
  text-decoration: line-through;
}

/* In fondo al foglio */
.corsi-foglio-fondo {
  position: relative;
  margin: 3.5rem auto 0;
  text-align: center;
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #5b554d;
}

.corsi-foglio-fondo a { color: #b65a32; }

.corsi-foglio-fondo-piccolo { font-size: 0.95rem; color: #77716a; }

.corsi-freccia {
  display: inline-block;
  width: 42px;
  height: 22px;
  margin-left: 0.25rem;
  vertical-align: middle;
  overflow: visible;
  transform: rotate(180deg) scaleY(-1);
  --d: 0.2s;
}

@media (max-width: 720px) {
  .corsi-pagina { padding: 0.75rem 0.4rem 2rem; }
  .corsi-foglio { padding: 6rem 1.1rem 8.5rem; transform: none; }
  .corsi-bacheca { grid-template-columns: 1fr; gap: 2.2rem; max-width: 320px; }
  .corsi-foglietto { margin-top: 0; }
  .corsi-foglietto-carta { transform: rotate(calc(var(--r) * 0.6)); }
  .schizzo-ulivo { width: 170px; top: 0.4rem; }
  .schizzo-foglia { width: 48px; top: 1rem; right: 4%; }
  .schizzo-felce, .schizzo-bacche, .macchia-3 { display: none; }
  .schizzo-fiore { width: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .mv { animation: none !important; }
}

/* Orologio della scheda corso: lancette all'ora indicata, girano all'apertura. */
.corsi-orologio {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: visible;
}

.corsi-orologio-quadrante {
  fill: white;
  stroke: var(--c);
  stroke-width: 2.5;
}

.corsi-orologio-tacche line {
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.55;
}

.corsi-lancetta {
  stroke: var(--ink-900);
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 20px 20px;
}

.corsi-lancetta-ore {
  stroke-width: 3;
  transform: rotate(var(--ore));
}

.corsi-lancetta-minuti {
  stroke: var(--c);
  stroke-width: 2;
  transform: rotate(var(--minuti));
}

.corsi-orologio-perno { fill: var(--ink-900); }

.fascia-mattina .corsi-orologio-quadrante { fill: #fff6d6; }
.fascia-pomeriggio .corsi-orologio-quadrante { fill: #ffe9d6; }
.fascia-sera .corsi-orologio-quadrante { fill: #24304a; }
.fascia-sera .corsi-lancetta-ore { stroke: white; }
.fascia-sera .corsi-orologio-perno { fill: white; }

@media (prefers-reduced-motion: reduce) {
  .corso-orario .corsi-lancetta { animation: none; }
}

/* Scheda del corso */
.corso-dettaglio {
  padding-bottom: 2.5rem;
}

.corso-back {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.corso-testa {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 65%, black));
  color: white;
  box-shadow: var(--shadow);
}

.corso-testa::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -40px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 20px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.corso-testa h1 {
  margin: 0;
  color: white;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.1;
}

.corso-testa .badge-territorio {
  margin: 0 0 0.5rem;
}

.corso-sottotitolo {
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
  opacity: 0.92;
}

.corso-concluso {
  display: inline-block;
  margin: 0.75rem 0 0;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.85rem;
}

.corso-orari {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
}

.corso-orario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 1rem 0.75rem;
  border-top: 5px solid var(--c);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
  text-align: center;
}

.corso-orario .corsi-orologio {
  width: 58px;
  height: 58px;
  margin-bottom: 0.35rem;
}

.corso-orario .corsi-lancetta-ore { animation: corsi-gira 1.5s cubic-bezier(0.34, 1.25, 0.5, 1) both; }
.corso-orario .corsi-lancetta-minuti { animation: corsi-gira 1.5s cubic-bezier(0.34, 1.25, 0.5, 1) both; }

@keyframes corsi-gira {
  from { transform: rotate(0deg); }
}

.corso-orario-giorno {
  font-weight: 700;
}

.corso-orario-ora {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--c);
  font-variant-numeric: tabular-nums;
}

.corso-orario-luogo {
  font-size: 0.8rem;
  color: var(--ink-500);
}

.corso-orario-periodo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c);
}

.corso-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 760px) {
  .corso-layout { grid-template-columns: 1fr; }
}

.corso-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.corso-prossimi h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.corso-prossimi-lista {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.corso-prossimi-lista li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--cream-100);
}

.corso-prossimi-data::first-letter {
  text-transform: uppercase;
}

.corso-prossimi-ora {
  font-weight: 700;
  color: var(--c);
  font-variant-numeric: tabular-nums;
}

.corso-prossimi-nota {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--terracotta-600);
}

.corso-prossimi-lista .stato-annullato .corso-prossimi-data,
.corso-prossimi-lista .stato-annullato .corso-prossimi-ora {
  text-decoration: line-through;
  opacity: 0.55;
}

/* Admin corsi */
.corsi-pallino {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--c);
}

.corsi-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.form-evento .corsi-palette-opzione {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  border: 2px solid var(--cream-100);
  border-radius: 999px;
  background: white;
  font-weight: 400;
  cursor: pointer;
}

.corsi-palette-opzione input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.corsi-palette-campione {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--c);
}

.form-evento .corsi-palette-opzione:has(input:checked) {
  border-color: var(--c);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
  font-weight: 700;
}

.corsi-palette-opzione:has(input:focus-visible) {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

.corsi-righe {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.6rem 0;
}

.corsi-riga {
  display: grid;
  grid-template-columns: 9.5rem 7rem 7rem 9.5rem 9.5rem minmax(8rem, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: var(--cream-50);
}

.corsi-riga-link {
  grid-template-columns: 13rem minmax(0, 1fr) auto;
}

.form-evento .corsi-riga label {
  margin: 0;
}

.corsi-riga-togli {
  padding-bottom: 0.75rem;
}

@media (max-width: 700px) {
  .corsi-riga,
  .corsi-riga-link {
    grid-template-columns: 1fr 1fr;
  }
  .corsi-riga-luogo,
  .corsi-riga-url {
    grid-column: 1 / -1;
  }
}

.form-evento input[type="date"],
.form-evento input[type="time"] {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cream-100);
  border-radius: 8px;
  background: var(--cream-50);
  font: inherit;
}

.corsi-riga input,
.corsi-riga select {
  background: white !important;
}

.form-evento fieldset.corsi-variazione-tipo {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  margin: 0;
  padding: 0 0 0.7rem;
  border: 0;
  background: none;
  box-shadow: none;
}

.corsi-variazione-form {
  margin-top: 1rem;
}

/* Calendario eventi: i corsi come pallini colorati */
.eventi-cal-giorno.ha-corsi {
  cursor: pointer;
}

.eventi-cal-giorno.ha-corsi:hover,
.eventi-cal-giorno.ha-corsi:focus-visible {
  box-shadow: 0 0 0 2px var(--green-500);
  outline: none;
}

.eventi-cal-corsi {
  position: absolute;
  top: 6px;
  right: 5px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  max-width: 55%;
}

.eventi-cal-corso-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1.5px white;
}

.eventi-cal-corso-punto.stato-annullato,
.eventi-cal-corso-punto.stato-spostato {
  background: white;
  box-shadow: inset 0 0 0 1.5px var(--c);
}

.eventi-cal-popup-corsi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--cream-100);
}

.eventi-cal-popup-chiudi + .eventi-cal-popup-corsi {
  margin-top: 0;
  padding-top: 0.2rem;
  border-top: 0;
}

.eventi-cal-popup-corsi-titolo {
  padding: 0 0.3rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.eventi-cal-popup-corso {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 0.5rem;
  padding: 0.35rem 0.4rem 0.35rem 0.6rem;
  border-left: 4px solid var(--c);
  border-radius: 6px;
  color: var(--ink-900);
  text-decoration: none;
}

.eventi-cal-popup-corso:hover {
  background: var(--cream-50);
  color: var(--ink-900);
}

.eventi-cal-popup-corso-ora {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c);
  font-variant-numeric: tabular-nums;
}

.eventi-cal-popup-corso-nome {
  font-size: 0.9rem;
  font-weight: 600;
}

.eventi-cal-popup-corso-nota {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--terracotta-600);
}

.eventi-cal-popup-corso.stato-annullato .eventi-cal-popup-corso-ora,
.eventi-cal-popup-corso.stato-annullato .eventi-cal-popup-corso-nome,
.eventi-cal-popup-corso.stato-spostato .eventi-cal-popup-corso-ora,
.eventi-cal-popup-corso.stato-spostato .eventi-cal-popup-corso-nome {
  text-decoration: line-through;
  opacity: 0.6;
}

.eventi-cal-legenda {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
}

.eventi-cal-corsi-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--cream-100);
  border-radius: 999px;
  background: white;
  color: var(--ink-700);
  font: inherit;
  cursor: pointer;
}

.eventi-cal-corsi-toggle[aria-pressed="false"] {
  opacity: 0.6;
  text-decoration: line-through;
}

.eventi-cal-corsi-toggle-punti {
  display: inline-flex;
  gap: 2px;
}

.eventi-cal-corsi-toggle-punti i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.eventi-cal-corsi-toggle-punti i:nth-child(1) { background: #2f7a44; }
.eventi-cal-corsi-toggle-punti i:nth-child(2) { background: #c0582c; }
.eventi-cal-corsi-toggle-punti i:nth-child(3) { background: #2f5fa8; }

@media (max-width: 560px) {
  .eventi-cal-corsi { top: 3px; right: 3px; gap: 1px; }
  .eventi-cal-corso-punto { width: 5px; height: 5px; box-shadow: 0 0 0 1px white; }
}

/* Elenco eventi: rimando ai corsi settimanali */
.eventi-corsi-box {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.1rem 1rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 1rem 1.5rem;
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
  color: var(--ink-900);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.eventi-corsi-box::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: linear-gradient(to bottom, #2f7a44, #c0582c, #2f5fa8, #7a4aa8);
}

.eventi-corsi-box:hover {
  color: var(--ink-900);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(31, 77, 44, 0.14);
}

.eventi-corsi-box-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta-600);
}

.eventi-corsi-box-titolo {
  font-size: 1.15rem;
  color: var(--green-900);
}

.eventi-corsi-box-nomi {
  font-size: 0.9rem;
  color: var(--ink-500);
}

.eventi-corsi-box-cta {
  grid-column: 2;
  grid-row: 1 / span 3;
  font-weight: 700;
  color: var(--green-700);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .eventi-corsi-box { grid-template-columns: 1fr; }
  .eventi-corsi-box-cta { grid-column: 1; grid-row: auto; margin-top: 0.35rem; }
}

/* ---------- Illustrazioni animate dei corsi (lib/corsi-illustrazioni.js) ---------- */

.corsi-ill {
  flex: none;
  width: 64px;
  height: 64px;
  overflow: visible;
  color: var(--c);
}

.corsi-ill .ill-sfondo { fill: currentColor; opacity: 0.1; }
.corsi-ill .t { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.corsi-ill .t.sottile { stroke-width: 2.6; }
.corsi-ill .t.spesso { stroke-width: 6; }
.corsi-ill .t.bianco { stroke: var(--ill-bianco, white); }
.corsi-ill .p { fill: currentColor; }
.corsi-ill .l { fill: currentColor; opacity: 0.22; }
.corsi-ill .l-tratto { opacity: 0.35; }
.corsi-ill .bianco-pieno { fill: var(--ill-bianco, white); }

/* Yoga: braccia che salgono sopra la testa, alone del respiro */
.ill-yoga-braccio { transform-box: view-box; transform-origin: 50px 34px; }
.ill-yoga-sx { transform: rotate(40deg); animation: ill-yoga-sx 5s ease-in-out infinite; }
.ill-yoga-dx { transform: rotate(-40deg); animation: ill-yoga-dx 5s ease-in-out infinite; }
@keyframes ill-yoga-sx { 0%, 15%, 100% { transform: rotate(40deg); } 45%, 70% { transform: rotate(160deg); } }
@keyframes ill-yoga-dx { 0%, 15%, 100% { transform: rotate(-40deg); } 45%, 70% { transform: rotate(-160deg); } }
.corsi-ill .ill-alone {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ill-alone 5s ease-in-out infinite;
}
@keyframes ill-alone { 0%, 15%, 100% { opacity: 0; transform: scale(0.6); } 50%, 70% { opacity: 0.16; transform: scale(1); } }

/* Danza (fitness danzato, hip hop): i fianchi vanno a destra e a sinistra
   molleggiando; a ogni molleggio le braccia, aperte, si piegano coi pugni
   verso il petto.
   Le gambe restano coi piedi a terra: skewX con origine al suolo sposta
   l'anca (33 sopra il suolo) di 5 = tan(8.6°)·33; scaleY(0.94) la abbassa
   di 2, come il busto. */
.ill-danza-gambe { transform-box: view-box; transform-origin: 50px 88px; animation: ill-danza-gambe 1.2s ease-in-out infinite; }
@keyframes ill-danza-gambe {
  0%, 100% { transform: skewX(8.6deg) scaleY(1); }
  25%, 75% { transform: skewX(0deg) scaleY(0.94); }
  50% { transform: skewX(-8.6deg) scaleY(1); }
}
.ill-danza-busto { transform-box: view-box; transform-origin: 50px 56px; animation: ill-danza-busto 1.2s ease-in-out infinite; }
@keyframes ill-danza-busto {
  0%, 100% { transform: translate(-5px, 0) rotate(5deg); }
  25%, 75% { transform: translate(0, 2px) rotate(0deg); }
  50% { transform: translate(5px, 0) rotate(-5deg); }
}
.ill-danza-avambraccio { transform-box: view-box; animation: 1.2s ease-in-out infinite; }
.ill-danza-sx { transform-origin: 37px 41px; transform: rotate(130deg); animation-name: ill-danza-sx; }
.ill-danza-dx { transform-origin: 63px 41px; transform: rotate(-130deg); animation-name: ill-danza-dx; }
@keyframes ill-danza-sx { 0%, 50%, 100% { transform: rotate(130deg); } 25%, 75% { transform: rotate(0deg); } }
@keyframes ill-danza-dx { 0%, 50%, 100% { transform: rotate(-130deg); } 25%, 75% { transform: rotate(0deg); } }
.corsi-ill .ill-danza-mossa { opacity: 0; animation: ill-danza-mossa 1.2s ease-out infinite; }
.corsi-ill .ill-danza-mossa-dx { animation-delay: -0.6s; }
@keyframes ill-danza-mossa { 0%, 10% { opacity: 0.8; } 35%, 100% { opacity: 0; } }

/* Studio: il bambino annuisce leggendo; la pagina che si gira e la
   scintilla sono quelle di lettura e teatro */
.ill-studio-testa { transform-box: view-box; transform-origin: 50px 48px; animation: ill-studio-testa 3.6s ease-in-out infinite; }
@keyframes ill-studio-testa { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(1px); } }

/* Pilates: il "teaser", seduti in equilibrio a V con gambe e braccia tese;
   la V si chiude e si riapre piano. Da ferma (stampa, niente animazioni)
   resta la V aperta. */
.ill-pilates-gamba { transform-box: view-box; transform-origin: 47px 78px; animation: ill-pilates-gamba 2.6s ease-in-out infinite; }
@keyframes ill-pilates-gamba { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }
.ill-pilates-busto { transform-box: view-box; transform-origin: 47px 78px; animation: ill-pilates-busto 2.6s ease-in-out infinite; }
@keyframes ill-pilates-busto { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(9deg); } }
.ill-pilates-sudore { opacity: 0; animation: ill-goccia 2.6s ease-in infinite; }
@keyframes ill-goccia { 0%, 35% { opacity: 0; transform: translateY(-4px); } 55% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Respiro: il corpo si gonfia, onde che si allargano */
.corsi-ill .ill-onda {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50px 46px;
  animation: ill-onda 4s ease-out infinite;
}
.corsi-ill .ill-onda-2 { animation-delay: 2s; }
@keyframes ill-onda { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }
.ill-respiro-corpo { transform-box: view-box; transform-origin: 50px 78px; animation: ill-respiro 4s ease-in-out infinite; }
@keyframes ill-respiro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* Qi Gong: "separare cielo e terra" (Otto pezzi di broccato). Un palmo
   spinge in alto, l'altro in basso; le mani si scambiano passando davanti
   al petto e nel passaggio la figura si abbassa piegando le ginocchia.
   Le braccia sono disegnate puntando in giù e ruotano alla spalla (50,35)
   e al gomito (50,49); il sinistro è lo specchio del destro, sfasato di
   mezzo ciclo. Fermo (reduced motion) resta la posa: dx giù, sx su. */
.ill-qigong-busto { animation: ill-qigong-busto 8s ease-in-out infinite; }
@keyframes ill-qigong-busto { 0%, 10%, 40%, 60%, 90%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(2.5px); } }
/* Gambe alte 28 (da y 60 a 88): scendere di 2.5 = scaleY(25.5/28) */
.ill-qigong-gambe { transform-box: view-box; transform-origin: 50px 88px; animation: ill-qigong-gambe 8s ease-in-out infinite; }
@keyframes ill-qigong-gambe { 0%, 10%, 40%, 60%, 90%, 100% { transform: scaleY(1); } 25%, 75% { transform: scaleY(0.911); } }
.ill-qigong-spalla, .ill-qigong-gomito { transform-box: view-box; animation: 8s ease-in-out infinite; }
.ill-qigong-spalla { transform-origin: 50px 35px; }
.ill-qigong-gomito { transform-origin: 50px 49px; }
.ill-qigong-spalla-sx, .ill-qigong-gomito-sx { animation-delay: -4s; }
.ill-qigong-spalla-dx { transform: rotate(-30deg); animation-name: ill-qigong-spalla-dx; }
.ill-qigong-gomito-dx { transform: rotate(18deg); animation-name: ill-qigong-gomito-dx; }
.ill-qigong-spalla-sx { transform: rotate(130deg); animation-name: ill-qigong-spalla-sx; }
.ill-qigong-gomito-sx { transform: rotate(-310deg); animation-name: ill-qigong-gomito-sx; }
/* Gomito da 160° a 310° (non -50°): così l'avambraccio sale davanti al
   viso invece di ricadere verso il basso */
@keyframes ill-qigong-spalla-dx { 0%, 10%, 90%, 100% { transform: rotate(-30deg); } 25%, 75% { transform: rotate(-50deg); } 40%, 60% { transform: rotate(-130deg); } }
@keyframes ill-qigong-gomito-dx { 0%, 10%, 90%, 100% { transform: rotate(18deg); } 25%, 75% { transform: rotate(160deg); } 40%, 60% { transform: rotate(310deg); } }
@keyframes ill-qigong-spalla-sx { 0%, 10%, 90%, 100% { transform: rotate(30deg); } 25%, 75% { transform: rotate(50deg); } 40%, 60% { transform: rotate(130deg); } }
@keyframes ill-qigong-gomito-sx { 0%, 10%, 90%, 100% { transform: rotate(-18deg); } 25%, 75% { transform: rotate(-160deg); } 40%, 60% { transform: rotate(-310deg); } }

/* Teatro: maschere che dondolano, scintilla */
.ill-maschera { transform-box: fill-box; transform-origin: 50% 20%; animation: ill-maschera 3s ease-in-out infinite; }
.ill-maschera-2 { animation-delay: -1.5s; }
@keyframes ill-maschera { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg) translateY(-3px); } }
.corsi-ill .ill-maschera-viso { fill: var(--ill-bianco, white); }
.ill-scintilla, .ill-stellina { transform-box: fill-box; transform-origin: center; animation: ill-brilla 1.6s ease-in-out infinite; }
@keyframes ill-brilla { 0%, 100% { transform: scale(0.4) rotate(0deg); opacity: 0.3; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

/* Giochi: dado che rimbalza girando, pedina che saltella */
.ill-dado { transform-box: fill-box; transform-origin: center; animation: ill-dado 2.4s cubic-bezier(0.3, 0.6, 0.4, 1) infinite; }
@keyframes ill-dado {
  0% { transform: translateY(0) rotate(0deg); }
  12% { transform: translateY(2px) scaleY(0.9) rotate(0deg); }
  45% { transform: translateY(-22px) rotate(180deg); }
  75% { transform: translateY(0) rotate(360deg); }
  85% { transform: translateY(1px) scaleY(0.94) rotate(360deg); }
  100% { transform: translateY(0) rotate(360deg); }
}
.corsi-ill .ill-dado-faccia { fill: var(--ill-bianco, white); }
.ill-ombra { transform-box: fill-box; transform-origin: center; animation: ill-ombra 2.4s cubic-bezier(0.3, 0.6, 0.4, 1) infinite; }
@keyframes ill-ombra { 0%, 75%, 100% { transform: scaleX(1); } 45% { transform: scaleX(0.5); opacity: 0.1; } }
.ill-pedina { transform-box: fill-box; transform-origin: 50% 100%; animation: ill-pedina 2.4s ease-in-out infinite; }
@keyframes ill-pedina {
  0%, 55%, 100% { transform: translateY(0); }
  65% { transform: scaleY(0.85); }
  78% { transform: translateY(-12px); }
  90% { transform: translateY(0) scaleY(0.95); }
}

/* Carte: il ventaglio si chiude e si riapre. Senza animazione (locandina,
   riduzione del movimento) resta aperto. */
.ill-carta { transform-box: view-box; transform-origin: 50px 82px; }
.ill-carta-sx { transform: rotate(-24deg); animation: ill-carta-sx 3.2s ease-in-out infinite; }
.ill-carta-centro { animation: ill-carta-centro 3.2s ease-in-out infinite; }
.ill-carta-dx { transform: rotate(24deg); animation: ill-carta-dx 3.2s ease-in-out infinite; }
@keyframes ill-carta-sx { 0%, 30%, 100% { transform: rotate(-24deg); } 50%, 62% { transform: rotate(-2deg); } }
@keyframes ill-carta-centro { 0%, 30%, 100% { transform: translateY(-3px); } 50%, 62% { transform: translateY(0); } }
@keyframes ill-carta-dx { 0%, 30%, 100% { transform: rotate(24deg); } 50%, 62% { transform: rotate(2deg); } }
.corsi-ill .ill-carta-faccia { fill: var(--ill-bianco, white); stroke-width: 3.5; }
.corsi-foglietto-carta .corsi-ill .ill-carta-faccia { stroke-width: 2.4; }

/* Cucito: punti che scorrono, ago che entra ed esce */
.corsi-ill .ill-cucitura { stroke-width: 3; stroke-dasharray: 6 5; animation: ill-cuci 1.6s linear infinite; }
@keyframes ill-cuci { to { stroke-dashoffset: -22; } }
.ill-ago { animation: ill-ago 1.6s ease-in-out infinite; }
@keyframes ill-ago { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, 12px); } }

/* Musica: note che ondeggiano e volano via */
.ill-note { transform-box: fill-box; transform-origin: 50% 100%; animation: ill-note 0.6s ease-in-out infinite alternate; }
@keyframes ill-note { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translateY(-2px); } }
.ill-nota-volante { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ill-vola 3s ease-out infinite; }
.ill-nota-2 { animation-delay: 1.5s; }
@keyframes ill-vola { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px) rotate(14deg); } }

/* Pittura: il pennello traccia la pennellata */
.corsi-ill .ill-pennellata { stroke-width: 6; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ill-dipingi 3.2s linear infinite; }
@keyframes ill-dipingi { 0% { stroke-dashoffset: 100; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 88%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.ill-pennello { animation: ill-pennello 3.2s linear infinite; }
@keyframes ill-pennello {
  0% { transform: translate(16px, 70px); opacity: 1; }
  14% { transform: translate(30px, 60px); }
  28% { transform: translate(44px, 66px); }
  42% { transform: translate(58px, 65px); }
  56% { transform: translate(72px, 62px); }
  70% { transform: translate(88px, 54px); opacity: 1; }
  88% { transform: translate(88px, 54px); opacity: 0; }
  100% { transform: translate(16px, 70px); opacity: 0; }
}

/* Lettura: la pagina si gira */
.ill-pagina { transform-box: view-box; transform-origin: 50px 50px; animation: ill-pagina 3.6s ease-in-out infinite; }
@keyframes ill-pagina {
  0% { transform: scaleX(1); opacity: 0; }
  8%, 25% { transform: scaleX(1); opacity: 1; }
  60%, 85% { transform: scaleX(-1); opacity: 1; }
  100% { transform: scaleX(-1); opacity: 0; }
}
.corsi-ill .ill-pagina-foglio { fill: var(--ill-bianco, white); stroke-width: 3; }

/* Generica: stella che respira e stelline */
.ill-stella { transform-box: fill-box; transform-origin: center; animation: ill-stella 4s ease-in-out infinite; }
@keyframes ill-stella { 0%, 100% { transform: scale(0.9) rotate(0deg); } 50% { transform: scale(1.08) rotate(45deg); } }
.ill-stellina-2 { animation-delay: 0.6s; }
.ill-stellina-3 { animation-delay: 1.2s; }

/* Sulla pagina /corsi le figure si animano quando il foglietto è appuntato. */
.corsi-js [data-corsi-anima]:not(.is-visibile) .corsi-ill * { animation-play-state: paused; }

/* Scheda: illustrazione grande, bianca, nella testata colorata */
.corso-testa-ill {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  color: white;
  --ill-bianco: var(--c);
}

.corso-testa:has(.corso-testa-ill) {
  padding-right: 10rem;
  min-height: 150px;
}

/* Admin: elenco e scelta dell'illustrazione */
.corsi-admin-ill .corsi-ill {
  width: 34px;
  height: 34px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.corsi-ill-scelta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.6rem;
}

.form-evento .corsi-ill-opzione {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.6rem 0.4rem;
  border: 2px solid var(--cream-100);
  border-radius: var(--radius);
  background: white;
  font-size: 0.82rem;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}

.corsi-ill-opzione input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.corsi-ill-opzione .corsi-ill {
  width: 72px;
  height: 72px;
}

.form-evento .corsi-ill-opzione:has(input:checked) {
  border-color: var(--c);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
  font-weight: 700;
}

.corsi-ill-opzione:has(input:focus-visible) {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .corso-testa-ill { width: 80px; height: 80px; margin-top: -40px; right: 1rem; }
  .corso-testa:has(.corso-testa-ill) { padding-right: 6.5rem; min-height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .corsi-ill * { animation: none !important; }
  .corsi-ill .ill-pennellata { stroke-dashoffset: 0; }
  .ill-pennello { transform: translate(88px, 54px); }
  .corsi-ill .ill-onda-1 { opacity: 0.3; transform: scale(1.2); }
}

/* Admin, nuovo socio: "Compila da foto del modulo" (public/js/socio-da-foto.js). */
.da-foto {
  background: #fff;
  border: 1px dashed var(--green-500);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1rem 0 1.5rem;
}
.da-foto h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.da-foto-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: 0.6rem; }
.da-foto-stato { color: var(--ink-700); }
.da-foto-avvisi { margin: 0.4rem 0 0; padding-left: 1.2rem; color: var(--ink-700); }
.da-foto-anteprime {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  width: 140px;
  max-height: 40vh;
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow), 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 0.3rem;
  cursor: zoom-in;
}
.da-foto-anteprime.grande { width: min(640px, calc(100vw - 2rem)); max-height: 85vh; cursor: zoom-out; }
.da-foto-anteprime img { display: block; width: 100%; height: auto; }
.da-foto-anteprime img + img { margin-top: 0.3rem; }
.da-foto-anteprime a { display: block; padding: 0.5rem; }
.iscrizione-form .ai-letto input,
.iscrizione-form .ai-letto select,
.iscrizione-form .ai-letto textarea { background: #eef7f0; }
.iscrizione-form .ai-incerto input,
.iscrizione-form .ai-incerto select,
.iscrizione-form .ai-incerto textarea { background: #fff4c2; border-color: #d9a400; }
.iscrizione-form .radio-grid.ai-incerto { outline: 2px solid #d9a400; outline-offset: 4px; border-radius: 8px; }