/* =====================================================================
   THE MESSENGERS MASS CHOIR — stile
   Nero e verde del logo. Due temi: scuro (default di sistema) e chiaro.
   Sul tema chiaro il verde per i testi è più scuro per restare leggibile.
   ===================================================================== */

:root {
  --font-corpo: 'Barlow', system-ui, 'Segoe UI', sans-serif;
  --font-titoli: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
  --font-pennello: 'Caveat Brush', 'Ink Free', 'Segoe Print', cursive;

  --verde: #7dc718;          /* verde del logo */
  --c-si: #7dc718;
  --c-incerto: #f6c84c;
  --c-no: #ff8a80;
  --pericolo: #d92d20;

  --raggio: 14px;
  --raggio-grande: 28px;
}

:root[data-theme="scuro"] {
  color-scheme: dark;
  --sfondo: #121212;
  --superficie: #1c1c1b;
  --superficie-2: #272825;
  --testo: #f3f4ef;
  --tenue: #a9aba2;
  --linea: #363731;
  --accento: #7dc718;
  --accento-testo: #8fdc27;
  --su-accento: #0c1400;
}

:root[data-theme="chiaro"] {
  color-scheme: light;
  --sfondo: #f3f4ee;
  --superficie: #ffffff;
  --superficie-2: #e7eadd;
  --testo: #141512;
  --tenue: #565a4f;
  --linea: #d3d7c8;
  --accento: #7dc718;
  --accento-testo: #3d7500;
  --su-accento: #0c1400;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 400 1.0625rem/1.5 var(--font-corpo);
  min-height: 100dvh;
}

h1, h2, h3, p { overflow-wrap: anywhere; }

a { color: var(--accento-testo); }

:focus-visible {
  outline: 3px solid var(--accento-testo);
  outline-offset: 2px;
}

.salta {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--accento);
  color: var(--su-accento);
  padding: .6rem 1rem;
  border-radius: 999px;
  z-index: 100;
  font-weight: 600;
}
.salta:focus { top: .75rem; }

.ico { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------- Testata e navigazione ---------- */
#testata {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.25rem;
  background: var(--sfondo);
  border-bottom: 1px solid var(--linea);
}

.marchio img { display: block; height: 48px; width: auto; }

#nav-principale { display: flex; gap: .25rem; margin-inline-start: .5rem; }

#nav-principale a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font: 600 1.15rem/1 var(--font-titoli);
  color: var(--tenue);
  text-decoration: none;
}
#nav-principale a:hover { color: var(--testo); background: var(--superficie-2); }
#nav-principale a[aria-current="page"] { background: var(--accento); color: var(--su-accento); }

.strumenti { margin-inline-start: auto; display: flex; align-items: center; gap: .35rem; }
.utente { font-size: .95rem; color: var(--tenue); margin-inline-end: .35rem; }

.icona-bottone {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
}
.icona-bottone:hover { background: var(--superficie-2); color: var(--testo); }
.icona-bottone.pericolo-hover:hover { color: #fff; background: var(--pericolo); }

/* ---------- Contenuto ---------- */
main {
  max-width: 58rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}
/* main riceve il focus da script a ogni cambio pagina: niente cornice, è solo per lettori di schermo e tastiera */
main:focus, main:focus-visible { outline: none; }

.intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0 1.25rem;
}

.titolo-pagina {
  font: 400 clamp(2.6rem, 8vw, 4rem)/1 var(--font-pennello);
  color: var(--accento-testo);
  margin: 0;
  transform: rotate(-1.5deg);
  transform-origin: left bottom;
  padding-block: .1em;
}

.sottotitolo { margin: .25rem 0 0; color: var(--tenue); }

.nota { color: var(--tenue); font-size: .95rem; }

.vuoto {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--tenue);
  border: 1.5px dashed var(--linea);
  border-radius: var(--raggio-grande);
}
.vuoto strong { display: block; color: var(--testo); font: 700 1.5rem var(--font-titoli); margin-bottom: .25rem; }

/* ---------- Bottoni ---------- */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem 1.2rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 600 1rem/1.2 var(--font-corpo);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.bottone.primario { background: var(--accento); color: var(--su-accento); }
.bottone.primario:hover { background: #8ee02a; }
.bottone.secondario { background: transparent; color: var(--testo); border-color: var(--linea); }
.bottone.secondario:hover { background: var(--superficie-2); border-color: var(--tenue); }
.bottone.pericolo { background: var(--pericolo); color: #fff; }
.bottone.pericolo:hover { background: #b42318; }
.bottone.largo { width: 100%; }

/* ---------- Campi ---------- */
.campo { display: grid; gap: .35rem; margin-block: .9rem; }
.campo > span { font-weight: 600; font-size: .95rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="time"], input[type="search"], input[type="tel"], select, textarea {
  font: inherit;
  color: var(--testo);
  background: var(--superficie);
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  padding: .6rem .8rem;
  min-height: 46px;
  width: 100%;
}
input:hover, select:hover { border-color: var(--tenue); }

.campo-gruppo { border: 0; padding: 0; margin: 1rem 0; }
.campo-gruppo legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: .45rem; }
.opzioni { display: flex; flex-wrap: wrap; gap: .5rem; }
.opzione {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
}
.opzione input { width: 1.05rem; height: 1.05rem; min-height: 0; accent-color: var(--accento); margin: 0; }
.opzione:has(input:checked) { border-color: var(--accento-testo); background: var(--superficie-2); }
.opzione:has(input:disabled) { opacity: .6; cursor: default; }

.riga-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.errore {
  margin: .75rem 0 0;
  padding: .6rem .9rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pericolo) 16%, transparent);
  border: 1px solid var(--pericolo);
  font-size: .95rem;
}

/* ---------- Accesso ---------- */
.accesso {
  min-height: calc(100dvh - 7rem);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  padding-block: 1rem;
}
.logo-grande {
  width: min(26rem, 86vw);
  height: auto;
  transform: rotate(-3deg);
  animation: assesta .7s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes assesta {
  from { opacity: 0; transform: rotate(-12deg) scale(.82); }
  to { opacity: 1; transform: rotate(-3deg) scale(1); }
}
.pannello-accesso {
  width: min(24rem, 100%);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-grande);
  padding: .75rem 1.5rem 1.5rem;
}
.pannello-accesso .titolo-pagina { font-size: 2.6rem; }

/* ---------- Concerti ---------- */
.elenco-concerti { display: grid; gap: 0; }

.concerto {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .25rem 1.25rem;
  align-items: start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--linea);
}
.elenco-concerti > .concerto:first-child { border-top: 0; }

.data {
  width: 5rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--accento);
  color: var(--su-accento);
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1;
  transform: rotate(-4deg);
}
.giorno { font: 800 2.1rem/1 var(--font-titoli); }
.mese { font: 700 1rem/1 var(--font-titoli); }

.dettagli { min-width: 0; }
.concerto-titolo { font: 700 1.9rem/1.1 var(--font-titoli); margin: 0; }
.quando { margin: .2rem 0 0; font-weight: 500; }
.tra {
  display: inline-block;
  margin-inline-start: .35rem;
  padding: .05rem .6rem;
  border-radius: 999px;
  background: var(--accento);
  color: var(--su-accento);
  font-size: .85rem;
  font-weight: 700;
}
.luogo { margin: .1rem 0 0; color: var(--tenue); }
.luogo a { display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: .35rem; white-space: nowrap; }
.luogo .ico { width: 1rem; height: 1rem; }

.band { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .75rem 0 0; }
.chip {
  display: inline-block;
  padding: .15rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--linea);
  font-size: .88rem;
  color: var(--tenue);
}
.chip-band { background: var(--superficie-2); color: var(--testo); border-color: transparent; font-weight: 600; }
.chip-no { border-style: dashed; }

.azioni-concerto { display: flex; gap: .15rem; }

.blocco-sotto { grid-column: 1 / -1; margin-top: 1rem; }

.concerto.passato .data { background: var(--superficie-2); color: var(--tenue); }
.concerto.passato .concerto-titolo { color: var(--tenue); }

/* Il prossimo concerto è un pannello nero: sempre nero, in entrambi i temi */
.concerto.prossimo {
  --testo: #f3f4ef;
  --tenue: #a9aba2;
  --linea: #3a3b35;
  --superficie-2: #2a2b28;
  --accento-testo: #8fdc27;
  background: #161616;
  color: var(--testo);
  border: 1.5px solid var(--accento);
  border-radius: var(--raggio-grande);
  padding: 1.5rem;
  margin-bottom: .75rem;
}
.concerto.prossimo + .concerto { border-top: 0; }

/* Adesione del corista */
.adesione { border-top: 1px dashed var(--linea); padding-top: 1rem; }
.adesione-domanda { margin: 0 0 .6rem; font: 700 1.25rem var(--font-titoli); }
.scelte { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: .5rem; }
.scelta {
  min-height: 52px;
  padding: .4rem .7rem;
  border-radius: var(--raggio);
  border: 1.5px solid var(--linea);
  background: transparent;
  color: var(--testo);
  font: 600 1rem/1.2 var(--font-corpo);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.scelta:hover { border-color: var(--tenue); background: var(--superficie-2); }
.scelta[aria-pressed="true"] { border-color: transparent; color: #101010; }
.scelta[aria-pressed="true"]::before { content: '✓ '; }
.scelta-si[aria-pressed="true"] { background: var(--c-si); }
.scelta-incerto[aria-pressed="true"] { background: var(--c-incerto); }
.scelta-no[aria-pressed="true"] { background: var(--c-no); }
.esito { margin: .6rem 0 0; font-size: .95rem; color: var(--tenue); }

/* Riepilogo per l'amministratore */
.riepilogo { border-top: 1px dashed var(--linea); padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; }
.conteggi { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; list-style: none; padding: 0; margin: 0; color: var(--tenue); }
.conteggi strong { font: 800 1.6rem/1 var(--font-titoli); color: var(--testo); margin-inline-end: .3rem; }

.passati { margin-top: 2rem; }
.passati summary {
  cursor: pointer;
  font: 700 1.4rem var(--font-titoli);
  padding: .5rem 0;
}
.passati .concerto { padding-block: 1.25rem; }

/* ---------- Partecipanti ---------- */
.indietro { display: inline-flex; align-items: center; gap: .25rem; margin-top: 1rem; text-decoration: none; font-weight: 600; }
.indietro:hover { text-decoration: underline; }

.filtri { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.filtro {
  min-height: 44px;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--linea);
  background: transparent;
  color: var(--testo);
  font: 600 1rem var(--font-corpo);
  cursor: pointer;
}
.filtro:hover { background: var(--superficie-2); }
.filtro[aria-pressed="true"] { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.filtro b { font-family: var(--font-titoli); font-size: 1.15rem; margin-inline-start: .25rem; }

.azioni-elenco { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }

.gruppo-sezione { margin-block: 1.75rem; }
.gruppo-sezione h2 {
  display: flex;
  align-items: center;
  gap: .75rem;
  font: 700 1.8rem/1 var(--font-titoli);
  margin: 0 0 .5rem;
}
.gruppo-sezione ul { columns: 2 15rem; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.gruppo-sezione li { padding: .3rem 0; border-bottom: 1px solid var(--linea); break-inside: avoid; }
.gruppo-sezione .nessuno { color: var(--tenue); font-style: italic; }
.totale { font: 700 1.3rem var(--font-titoli); }
.solo-stampa { display: none; }

/* Pillola ovale: richiama l'ovale del logo */
.ovale {
  display: inline-block;
  padding: .2rem 1rem;
  border-radius: 50%;
  background: var(--accento);
  color: var(--su-accento);
  font: 700 1rem/1.3 var(--font-titoli);
  white-space: nowrap;
}

/* ---------- Liste (coristi, sezioni, brani) ---------- */
.barra-strumenti { display: grid; grid-template-columns: 1fr minmax(11rem, 15rem); gap: .75rem; margin-bottom: .5rem; }
.contatore { color: var(--tenue); margin: .5rem 0 0; }

.elenco { list-style: none; margin: 0; padding: 0; }
.riga {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "info pillola azioni";
  align-items: center;
  gap: .25rem 1rem;
  padding: .9rem 0;
  border-top: 1px solid var(--linea);
}
.riga:first-child { border-top: 0; }
.riga .info { grid-area: info; min-width: 0; }
.riga .pillola { grid-area: pillola; }
.riga .azioni-riga { grid-area: azioni; display: flex; gap: .15rem; }
.riga .nome { font: 700 1.35rem/1.15 var(--font-titoli); }
.riga .nome a { color: inherit; text-decoration: none; }
.riga .nome a:hover { color: var(--accento-testo); }
.riga .meta { display: block; color: var(--tenue); font-size: .92rem; }

/* ---------- Brano: cartelle ---------- */
.cartelle { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1.25rem; }
.cartella {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--raggio);
}
.cartella .ico { width: 1.9rem; height: 1.9rem; color: var(--accento-testo); grid-row: span 2; }
.cartella h2 { font: 700 1.35rem/1.1 var(--font-titoli); margin: 0; }
.cartella p { margin: 0; color: var(--tenue); font-size: .92rem; }
.cartella.tua { border-color: var(--accento-testo); background: var(--superficie-2); }
.cartella .ovale { grid-column: 2; justify-self: start; margin-top: .3rem; font-size: .85rem; }

.informazione {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1.1rem;
  margin-top: 1.25rem;
  border-radius: var(--raggio);
  background: var(--superficie-2);
  color: var(--tenue);
}

/* ---------- Impostazioni ---------- */
.sezione-impostazioni { padding: 1.5rem 0; border-top: 1px solid var(--linea); }
.sezione-impostazioni:first-of-type { border-top: 0; }
.sezione-impostazioni h2 { font: 700 1.6rem var(--font-titoli); margin: 0 0 .25rem; }
.sezione-impostazioni .azioni-riga { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---------- Modale ---------- */
dialog {
  border: 0;
  padding: 0;
  border-radius: var(--raggio-grande);
  background: var(--superficie);
  color: var(--testo);
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
dialog::backdrop { background: rgba(0, 0, 0, .62); }
dialog[open] { animation: apri .18s ease-out; }
@keyframes apri { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modulo { padding: 1.5rem; }
.modulo h2 { font: 700 2rem/1.1 var(--font-titoli); margin: 0 0 .25rem; }
.modulo .azioni { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---------- Avvisi ---------- */
#avvisi {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  display: grid;
  justify-items: center;
  gap: .5rem;
  pointer-events: none;
  z-index: 60;
}
.avviso {
  background: var(--testo);
  color: var(--sfondo);
  padding: .7rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  animation: apri .2s ease-out;
}
.avviso.errore-avviso { background: var(--pericolo); color: #fff; }

/* ---------- Scaletta e brani da studiare ---------- */
.scaletta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-start; margin-bottom: 1rem; }
.scaletta details { flex: 1 1 18rem; min-width: 0; }
.scaletta summary { cursor: pointer; font: 700 1.3rem var(--font-titoli); padding: .25rem 0; }
.brani-scaletta { margin: .5rem 0 0; padding-left: 1.6rem; }
.brani-scaletta li { padding: .2rem 0; }
.brani-scaletta li a { color: inherit; }
.chip-solisti { background: var(--accento); color: var(--su-accento); border-color: transparent; font-weight: 700; }
.chip-previsti { border-style: dashed; color: var(--testo); }
.solisti-brano { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-inline-start: .6rem; vertical-align: middle; }
.azioni-scaletta { display: flex; flex-wrap: wrap; gap: .5rem; }
.esito-scelto { color: var(--accento-testo); font-weight: 600; }

/* ---------- Adesione: solo corista / anche solista ---------- */
.tipo-si { margin-top: 1rem; }
.scelte.scelte-2 { grid-template-columns: 1fr 1fr; }
.scelta-tipo[aria-pressed="true"] { background: var(--accento); }

/* ---------- Elenco partecipanti: solisti evidenziati ---------- */
.gruppo-sezione li.solista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding-inline: .6rem;
  border-radius: 8px;
  font-weight: 600;
  background: color-mix(in srgb, var(--accento) 20%, transparent);
}
.ovale-solista { font-size: .8rem; padding: .05rem .8rem; }

/* ---------- Sezioni (elenco in sola lettura) ---------- */
.testa-sezione { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.testa-sezione h2 { margin: 0; }

/* ---------- Editor brani (modale) ---------- */
/* Elenco brani nell'editor: numero e titolo a sinistra, pulsanti sempre allineati a destra nella stessa colonna.
   Stretto (telefono): titolo e pulsanti sulla prima riga, "Solisti previsti" sotto. Largo: tutto su una riga. */
.editor-lista { margin: .5rem 0 1rem; padding: 0; list-style: none; counter-reset: brano; }
.editor-lista li {
  counter-increment: brano;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "num titolo comandi" ". solisti solisti";
  align-items: center;
  column-gap: .75rem;
  row-gap: .15rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--linea);
}
.editor-lista li:not(:has(.opzione-piccola)) { grid-template-areas: "num titolo comandi"; }
.editor-lista li::before { grid-area: num; content: counter(brano) "."; color: var(--tenue); font-weight: 600; min-width: 1.8rem; }
.editor-titolo { grid-area: titolo; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.editor-comandi { grid-area: comandi; justify-self: end; display: inline-flex; }
.editor-lista .opzione-piccola { grid-area: solisti; justify-self: start; }
@media (min-width: 34rem) {
  .editor-lista li { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "num titolo solisti comandi"; }
  .editor-lista li:not(:has(.opzione-piccola)) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num titolo comandi"; }
}
.opzione-piccola { padding: .15rem .7rem; font-size: .9rem; }
.riga-aggiungi { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: end; }
.riga-aggiungi .campo { margin-block: 0; }

/* ---------- Notifiche ---------- */
.campanella { position: relative; }
.badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: var(--pericolo);
  color: #fff;
  font: 700 .72rem/1.15rem var(--font-corpo);
  text-align: center;
}
.azioni-intestazione { display: flex; flex-wrap: wrap; gap: .5rem; }
.notifica a {
  display: grid;
  gap: .1rem;
  padding: .9rem 0 .9rem 1rem;
  border-left: 4px solid transparent;
  color: var(--tenue);
  text-decoration: none;
}
.notifica a:hover { background: var(--superficie-2); }
.notifica.non-letta a { border-left-color: var(--accento); color: var(--testo); }
.notifica-titolo { font: 700 1.35rem/1.1 var(--font-titoli); color: var(--testo); }
.notifica + .notifica { border-top: 1px solid var(--linea); }
.notifica .meta { color: var(--tenue); font-size: .9rem; }

.barra-strumenti.una { grid-template-columns: 1fr; }
.elenco-accessi { padding-left: 1.2rem; }

/* ---------- Mobile ---------- */
@media (max-width: 46rem) {
  #testata { padding-inline: .9rem; }
  .utente { display: none; }
  .marchio img { height: 42px; }

  #nav-principale {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    gap: 0;
    justify-content: space-around;
    background: var(--superficie);
    border-top: 1px solid var(--linea);
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
    z-index: 30;
    overflow-x: auto;
  }
  #nav-principale a {
    flex-direction: column;
    gap: .15rem;
    padding: .4rem .15rem;
    border-radius: 14px;
    font-size: .78rem;
    letter-spacing: -.01em;
    min-width: 0;
    flex: 1;
    text-align: center;
  }
  main { padding-bottom: 6rem; }
  #avvisi { bottom: 5.5rem; }
}

@media (max-width: 40rem) {
  .concerto { grid-template-columns: auto 1fr; }
  .azioni-concerto { grid-column: 1 / -1; order: 3; margin-top: .25rem; }
  .blocco-sotto { order: 4; }
  .concerto.prossimo { padding: 1.1rem; }
  .data { width: 4.4rem; height: 3.9rem; }
  .giorno { font-size: 1.8rem; }
  .scelte { grid-template-columns: 1fr 1fr 1fr; }
  .scelta { font-size: .95rem; padding-inline: .35rem; }
  .barra-strumenti { grid-template-columns: 1fr; }
  .riga { grid-template-columns: 1fr auto; grid-template-areas: "info azioni" "pillola pillola"; }
  .riga .pillola { justify-self: start; margin-top: .25rem; }
  .cartelle { grid-template-columns: 1fr; }
  .riga-2 { grid-template-columns: 1fr; }
  .modulo { padding: 1.15rem; }
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Stampa (elenco partecipanti) ---------- */
@media print {
  :root[data-theme] {
    --sfondo: #fff; --testo: #000; --tenue: #333; --linea: #999; --accento-testo: #000; --superficie-2: #eee;
  }
  #testata, #nav-principale, #avvisi, .filtri, .azioni-elenco, .indietro, .intestazione .bottone, .no-stampa { display: none !important; }
  .report { border: 0; padding: 0; background: none; }
  .report-sezione, .report-dati { break-inside: avoid; }
  body { background: #fff; color: #000; font-size: 12pt; }
  main { padding: 0; max-width: none; }
  .titolo-pagina { transform: none; color: #000; font-size: 28pt; }
  .solo-stampa { display: block; }
  .ovale { background: none; border: 1px solid #000; color: #000; }
}


/* ---------- V2: textarea, band, dettagli riservati, palco ---------- */
textarea { resize: vertical; line-height: 1.4; min-height: 90px; }
input:hover, select:hover, textarea:hover { border-color: var(--tenue); }

.palco { margin: .25rem 0 .5rem; color: var(--tenue); }
.palco strong { color: var(--testo); }
.chip strong { font-weight: 700; }

.strumenti-band { display: grid; gap: .6rem; }
.riga-strumento { display: grid; grid-template-columns: 9.5rem 1fr; gap: .6rem; align-items: center; }
.riga-strumento .nome-band { min-height: 42px; }
.riga-strumento .nome-band[hidden] { display: block; visibility: hidden; }
@media (max-width: 34rem) { .riga-strumento { grid-template-columns: 1fr; } .riga-strumento .nome-band[hidden] { display: none; } }

.campo-gruppo.riservato { border: 1.5px dashed var(--linea); border-radius: var(--raggio); padding: .25rem 1rem .5rem; }
.campo-gruppo.riservato legend { display: flex; align-items: center; gap: .4rem; padding-inline: .4rem; }
.ico { flex: none; }

.riservati { margin: 0 0 1rem; padding: .6rem 1rem; border: 1.5px dashed var(--linea); border-radius: var(--raggio); }
.riservati summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.riservati dl { margin: .6rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
.riservati dt { color: var(--tenue); font-weight: 600; }
.riservati dd { margin: 0; white-space: pre-line; }
@media (max-width: 34rem) { .riservati dl { grid-template-columns: 1fr; gap: 0; } .riservati dd { margin-bottom: .5rem; } }

.raccomandazioni { flex: 1 1 100%; padding: .75rem 1rem; border-left: 4px solid var(--accento); background: var(--superficie-2); border-radius: 0 var(--raggio) var(--raggio) 0; }
.raccomandazioni h3 { margin: 0 0 .25rem; font: 700 1.15rem var(--font-titoli); }
.raccomandazioni p { margin: 0; white-space: pre-line; }

.presenti { flex: 1 1 100%; }
.presenti summary { cursor: pointer; font: 700 1.3rem var(--font-titoli); padding: .25rem 0; }
.opzione.tutti { margin-bottom: .5rem; font-weight: 600; }

.riga-band { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gruppo-sezione:has(.riga-band) ul { columns: 1; }

/* Report stampabile */
.report { max-width: 52rem; margin-inline: auto; padding: 1.5rem; background: var(--superficie); border: 1.5px solid var(--linea); border-radius: var(--raggio-grande); }
.report-testa { display: flex; align-items: center; gap: 1rem; padding-bottom: .75rem; border-bottom: 3px solid var(--accento); }
.report-testa img { height: 48px; width: auto; }
.report-testa strong { display: block; font: 700 1.4rem var(--font-titoli); }
.report-testa span { color: var(--tenue); }
.report-titolo { font: 700 1.9rem var(--font-titoli); margin: 1rem 0 .5rem; }
.report h3 { font: 700 1.3rem var(--font-titoli); margin: 1.4rem 0 .4rem; border-bottom: 1px solid var(--linea); padding-bottom: .2rem; }
.report-dati { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.report-dati dt { color: var(--tenue); font-weight: 600; }
.report-dati dd { margin: 0; }
.report-lista { margin: .3rem 0 0; padding-left: 1.4rem; }
.report-lista li { padding: .1rem 0; }
.report-testo { margin: 0; white-space: pre-line; }
.report-sezione h4 { margin: .8rem 0 .2rem; font: 700 1.05rem var(--font-corpo); }
.report-sezione h4 span { color: var(--tenue); font-weight: 400; }
.report-colonne { columns: 2 14rem; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.report-colonne li { padding: .15rem 0; break-inside: avoid; }
@media print {
  .report-testa img { filter: none; }
  .report h3 { break-after: avoid; }
}


/* ---------- V3: foto, profilo, report presenze ---------- */
.avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--linea); background: var(--superficie-2); }
.avatar-iniziali { display: inline-grid; place-items: center; font: 700 1.1rem var(--font-titoli); color: var(--accento-testo); letter-spacing: .02em; }
.avatar-grande { width: 9rem; height: 9rem; border-width: 3px; border-color: var(--accento); }
.avatar-grande.avatar-iniziali { font-size: 3rem; }
.info-corista { display: flex; align-items: center; gap: .9rem; }
.info-corista > div { min-width: 0; }

.profilo { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start; margin-block: 1rem; }
.profilo-foto { display: grid; justify-items: center; gap: 1rem; }
.profilo-foto .azioni-riga { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.profilo-dati { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 0; }
.profilo-dati dt { color: var(--tenue); font-weight: 600; }
.profilo-dati dd { margin: 0; }
@media (max-width: 34rem) { .profilo { grid-template-columns: 1fr; justify-items: center; } .profilo-dati { justify-self: stretch; } }

.campo-anno { max-width: 12rem; }
.campo[hidden] { display: none; }
.tabella { width: 100%; border-collapse: collapse; }
.tabella th, .tabella td { padding: .4rem .5rem; border-bottom: 1px solid var(--linea); text-align: left; font-weight: 400; }
.tabella thead th { font-weight: 600; color: var(--tenue); font-size: .9rem; }
.tabella thead th span { font-weight: 400; }
.tabella tbody th { font-weight: 500; }
.tabella .num { text-align: right; width: 7rem; font-variant-numeric: tabular-nums; }
.gruppo-tabella { break-inside: avoid; }
@media print { .avatar { border-color: #999; } .tabella th, .tabella td { border-bottom-color: #999; } }

/* ---------- V4: bozze e pubblicazione, report dotazione ---------- */
.ovale-bozza { background: var(--c-incerto); color: #1a1400; border-color: transparent; font-weight: 700; }
.banda-bozza { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .75rem 1rem; margin-bottom: 1rem; border: 1.5px dashed var(--c-incerto); border-radius: var(--raggio); }
.banda-bozza .nota { flex: 1 1 14rem; margin: 0; }
.concerto.bozza .data { opacity: .75; }
.tabella td { white-space: nowrap; }
.tabella td.manca { color: var(--c-no); font-weight: 600; }
:root[data-theme="chiaro"] .tabella td.manca { color: #b42318; }
@media print { .tabella td.manca { color: #000; text-decoration: underline; } .banda-bozza { border-color: #999; } }

/* ---------- V7: deleghe, profili amministratore e direttrice ---------- */
.ovale-delegato { font-size: .75rem; padding: .02rem .7rem; margin-inline-start: .4rem; vertical-align: middle; }
.cambia-vista { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; white-space: nowrap; }
.sezione-impostazioni select { min-width: 14rem; max-width: 100%; }
.riga-delegato { grid-template-areas: "info azioni"; grid-template-columns: 1fr auto; }
@media (max-width: 46rem) { .cambia-vista .testo-vista { display: none; } .cambia-vista { padding: .5rem; } }
@media print { .cambia-vista { display: none; } }

/* Testata compatta tra tablet e desktop: l'amministratore ha sette voci più gli strumenti e senza questo la pagina scorre in orizzontale */
@media (min-width: 46.01rem) and (max-width: 84rem) {
  .utente { display: none; }
  #nav-principale { margin-inline-start: .25rem; gap: .1rem; }
  #nav-principale a { padding: .5rem .65rem; font-size: 1.05rem; gap: .35rem; }
  .cambia-vista .testo-vista { display: none; }
  .cambia-vista { padding: .5rem; }
}
/* Sotto i 1120px le voci non attive restano solo icona (testo nascosto alla vista ma letto dagli screen reader) */
@media (min-width: 46.01rem) and (max-width: 70rem) {
  #nav-principale a:not([aria-current="page"]) span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- V8: repertorio (Play, solisti, candidature), parcheggio, gestione ---------- */
.play {
  display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; flex: none;
  border: 0; border-radius: 50%; background: var(--accento); color: var(--su-accento); cursor: pointer;
}
.play .ico { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.play:hover:not(:disabled) { background: #8ee02a; }
.play.in-riproduzione { outline: 3px solid var(--accento-testo); outline-offset: 2px; }
.play:disabled { background: transparent; color: var(--tenue); border: 1.5px dashed var(--linea); cursor: not-allowed; }
.riga.riga-brano { grid-template-columns: 1fr auto auto; grid-template-areas: "info azioni play"; }
.riga-brano .cella-play { grid-area: play; display: flex; justify-content: flex-end; }
.solisti-riga { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 0; }
.chip-valutare { background: var(--c-incerto); color: #1a1400; border-color: transparent; font-weight: 700; }
.avviso-candidature {
  display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; padding: .8rem 1rem;
  border: 1.5px solid var(--c-incerto); border-radius: var(--raggio); background: var(--superficie-2);
}
.avviso-candidature a { color: inherit; font-weight: 600; }
.brani-scaletta li .gruppo-play { float: right; margin-inline-start: .5rem; }
.brani-scaletta li .play { width: 1.9rem; height: 1.9rem; }
.brani-scaletta li::after { content: ""; display: block; clear: both; }
.dati-brano { margin-block: 1rem; }
.solisti-sezione { margin-block: 1.25rem; }
.solisti-sezione h2 { font: 700 1.5rem var(--font-titoli); margin: 0 0 .4rem; }
.sotto-titolo { font: 700 1.15rem var(--font-titoli); margin: 1rem 0 .3rem; }
.elenco-candidati { list-style: none; margin: 0 0 .5rem; padding: 0; }
.elenco-candidati li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--linea); }
.cartella .cartella-azioni { grid-column: 2; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.editor-solista { grid-column: 1 / -1; padding: .25rem 0 .4rem 2.55rem; }
.editor-solista .campo-gruppo { margin: .3rem 0; }
.editor-solista.da-scegliere { border-left: 3px solid var(--c-incerto); padding-left: .8rem; margin-left: 1.7rem; }
.campo-parcheggio { margin-top: .6rem; }
.riservati-admin { border-style: dashed; }
@media (max-width: 40rem) {
  .riga.riga-brano { grid-template-columns: 1fr auto auto; grid-template-areas: "info azioni play"; }
  .editor-solista { padding-left: 0; }
  .editor-solista.da-scegliere { margin-left: 0; }
}
@media print { .play, .cella-play, .playlist-btn { display: none; } }

/* ---------- V9: Play giallo (originale) e verde (linea), import CSV ---------- */
.gruppo-play { display: inline-flex; align-items: center; gap: .4rem; }
.play-originale { background: var(--c-incerto); color: #1a1400; }
.play-originale:hover:not(:disabled) { background: #ffd966; }
.elenco-errori { margin: .25rem 0 .75rem; padding-inline-start: 1.2rem; font-size: .95rem; }
#anteprima-csv { margin-top: .75rem; }
.errore-import { margin: .5rem 0 0; padding: .6rem .9rem; border-radius: 12px; background: color-mix(in srgb, var(--pericolo) 16%, transparent); border: 1px solid var(--pericolo); font-size: .95rem; }

/* ---------- V11: termini e privacy al primo accesso, scarico audio ---------- */
.casella-termini { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin-block: 1rem; line-height: 1.4; cursor: pointer; }
.casella-termini input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--accento); }
.scarica-audio { text-decoration: none; }