/* ============================================================
   Gestionale ASD — tema moderno
   ============================================================ */
:root {
  /* ---------- Colore istituzionale ----------------------------------------
     `--brand` e' l'unico colore da cui discendono tutti gli altri: le tinte
     qui sotto sono i valori del verde di sempre, e valgono finche' nessuno
     sceglie un colore in Impostazioni -> Aspetto. Quando lo si sceglie, e' il
     frontend (`js/tema.js`) a ricalcolarle e a riscriverle qui sopra, perche'
     le sfumature vanno rifatte anche per il tema scuro e il CSS da solo non
     sa schiarire un colore.
     `--verde*` restano come nomi storici: li usano un centinaio di regole
     scritte quando il colore era per forza verde. Sono alias, non copie. */
  --brand: #1b9e54;
  --brand-scuro: #0f6b3a;
  --brand-chiaro: #e7f6ee;
  --brand-grad: linear-gradient(135deg, #22a95c 0%, #12864a 100%);
  --brand-fianco: linear-gradient(180deg, #e3f4ea 0%, #d6efdf 100%);
  --brand-fianco-bordo: #bfe3cd;

  --verde: var(--brand);
  --verde-scuro: var(--brand-scuro);
  --verde-chiaro: var(--brand-chiaro);
  --grad: var(--brand-grad);

  /* ---------- Scale ---------------------------------------------------------
     Prima di queste ogni pagina sceglieva i suoi margini a occhio, ed e' il
     motivo per cui due riquadri vicini non erano mai distanti uguale. Le
     regole nuove usano queste; quelle vecchie ci passano una pagina per volta.
     Spazi: passo di 4px, che e' quello su cui e' costruito il resto. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Corpi del testo: dal piu' piccolo leggibile al titolo di pagina. */
  --testo-xs: 11.5px;
  --testo-s: 12.5px;
  --testo-m: 14px;
  --testo-l: 15.5px;
  --testo-xl: 18px;
  --testo-2xl: 22px;

  /* Quanto dev'essere grande una cosa che si tocca col dito. Sotto ai 44px
     si sbaglia bersaglio: e' la misura consigliata da Apple e da Google, e
     vale anche per il mouse. */
  --tocco: 44px;

  --bg: #eef2f0;
  --bg2: #f7faf8;
  --card: #ffffff;
  --testo: #16241d;
  --grigio: #64756c;
  --bordo: #e5ebe7;

  --ok-bg: #e4f7ec; --ok-testo: #10814a;
  --warn-bg: #fff3df; --warn-testo: #a65f00;
  --err-bg: #fdecea; --err-testo: #c02617;
  --neutro-bg: #eef1f0; --neutro-testo: #64756c;

  --ombra-s: 0 1px 2px rgba(16, 40, 28, 0.06), 0 1px 3px rgba(16, 40, 28, 0.05);
  --ombra-m: 0 6px 18px rgba(16, 40, 28, 0.10);
  --ombra-l: 0 14px 40px rgba(16, 40, 28, 0.14);
  --raggio: 14px;
  --raggio-s: 9px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  color: var(--testo);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(20, 184, 166, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(27, 158, 84, 0.10), transparent 55%),
    var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  height: 62px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--ombra-m);
}
.brand { font-size: var(--testo-xl); font-weight: 800; letter-spacing: 0.2px; display: flex; align-items: center; gap: var(--sp-3); }
.logo {
  font-size: 20px;
  background: rgba(255, 255, 255, 0.18);
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raggio);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  overflow: hidden;
}
.logo.con-logo { background: #fff; }
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-societa {
  font-weight: 600; font-size: var(--testo-m); opacity: 0.95;
  margin-left: var(--sp-2); padding-left: var(--sp-3); border-left: 1px solid rgba(255,255,255,0.4);
  white-space: nowrap; max-width: 26vw; overflow: hidden; text-overflow: ellipsis;
}
.topbar-sx { display: flex; align-items: center; gap: var(--sp-3); }
.topbar-azioni { display: flex; align-items: center; gap: var(--sp-3); }
/* Hamburger e overlay: nascosti su desktop, attivati dal blocco cellulare in fondo.
   Specificità .icona-topbar.hamburger per battere .icona-topbar (che imposta display). */
.icona-topbar.hamburger { display: none; }
.overlay-menu { display: none; }
.icona-topbar {
  background: rgba(255, 255, 255, 0.16);
  color: #fff; border: none;
  width: 38px; height: 38px;
  border-radius: var(--raggio-s);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--testo-xl); cursor: pointer; text-decoration: none;
  transition: background .15s ease, transform .12s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.icona-topbar:hover { background: rgba(255, 255, 255, 0.30); transform: translateY(-1px); }
.contesto { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--testo-m); }
.ctx-label {
  background: rgba(255, 255, 255, 0.16);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 999px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.btn-piccolo {
  background: #fff; color: var(--verde-scuro);
  border: none; border-radius: var(--raggio-s);
  padding: var(--sp-2) var(--sp-3); font-size: var(--testo-s); font-weight: 700; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-piccolo:hover { transform: translateY(-1px); box-shadow: var(--ombra-s); }

/* ---------- Layout ---------- */
.layout { display: flex; flex: 1; min-height: 0; }
.sidebar {
  width: 214px;
  background: var(--brand-fianco);
  border-right: 1px solid var(--brand-fianco-bordo);
  padding: var(--sp-4) var(--sp-3);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  /* Le voci sono quattordici: su un portatile il menu è più alto dello
     schermo. Senza questo scorreva la PAGINA intera — il contenuto, che ha
     un'altezza fissa e un suo scorrimento, usciva dallo schermo e restavano
     le ultime voci in mezzo al vuoto. Ora scorre il menu dentro al suo
     riquadro, come già faceva da telefono. */
  overflow-y: auto;
}
.nav-link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  color: var(--testo);
  text-decoration: none;
  font-size: var(--testo-m); font-weight: 600;
  border-radius: var(--raggio-s);
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.75); transform: translateX(2px); }
.nav-link.attivo { background: var(--grad); color: #fff; box-shadow: var(--ombra-m); }
.nav-icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: var(--raggio-s);
  font-size: var(--testo-l);
  transition: background .15s ease;
}
.nav-link.attivo .nav-icon { background: rgba(255,255,255,0.22); }

/* Voci che da telefono scendono dalla barra in alto al menu (vedi la media
   query del cellulare). Il chip della stagione, qui, perde i colori da topbar. */
.nav-telefono {
  display: none; flex-direction: column; gap: 2px;
  margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.dark .nav-telefono { border-top-color: rgba(255, 255, 255, 0.12); }
.nav-telefono .nav-link { background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.nav-telefono-stagione:empty { display: none; }
.nav-telefono-stagione { padding: var(--sp-2) var(--sp-3); }
.nav-telefono .stagione-chip:not(.chiusa):not(.preparazione) {
  color: var(--testo); background: var(--bg2); border-color: var(--bordo);
}
.nav-telefono .stagione-chip { font-size: var(--testo-m); }

/* Versione e diritti, in coda al menu sotto l'ultima voce. `margin-top:auto`
   la tiene in fondo alla colonna anche quando le voci sono poche. */
.nav-versione {
  margin: auto 0 0;
  padding: var(--sp-3) var(--sp-3) 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.35;
}
.nav-versione-v { font-size: var(--testo-s); font-weight: 700; color: var(--testo); opacity: .75; }
.nav-versione-c { font-size: var(--testo-xs); color: var(--grigio); }
body.dark .nav-versione { border-top-color: rgba(255, 255, 255, 0.12); }

.content { flex: 1; padding: var(--sp-6); overflow: auto; }

/* Animazione d'ingresso (si riattiva ad ogni cambio pagina) */
@keyframes entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pagina, .card, .home { animation: entra .32s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- Card generica ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 28px;
  max-width: 760px;
  box-shadow: var(--ombra-s);
}
.card h1 { margin-top: 0; color: var(--verde-scuro); }
.placeholder { color: var(--grigio); }

/* ---------- Homepage ---------- */
.home { max-width: 900px; }
.home h1 { color: var(--verde-scuro); margin-bottom: var(--sp-2); font-size: 30px; letter-spacing: -0.5px; }
.home-sub { color: var(--grigio); margin-top: 0; margin-bottom: var(--sp-5); font-size: var(--testo-l); }

.scelte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.scelta {
  position: relative;
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: 18px;
  padding: 28px 20px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  box-shadow: var(--ombra-s);
  overflow: hidden;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.scelta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad); opacity: 0; transition: opacity .2s ease;
}
.scelta:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombra-l);
  border-color: transparent;
}
.scelta:hover::before { opacity: 1; }
.scelta-icon {
  font-size: 30px;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde-chiaro);
  border-radius: 18px;
  margin-bottom: var(--sp-1);
}
.scelta-titolo { font-size: var(--testo-xl); font-weight: 800; color: var(--verde-scuro); }
.scelta-desc { font-size: var(--testo-s); color: var(--grigio); text-align: center; }

.sotto-titolo { margin-top: var(--sp-6); color: var(--verde-scuro); font-size: var(--testo-xl); }

/* Card categoria colorata (Squadre) con cerchietto conteggio giocatori */
.scelta-cat { position: relative; }
.scelta-cat:hover { filter: brightness(0.98); }
.conta-membri {
  position: absolute; top: 8px; right: 8px;
  min-width: 26px; height: 26px; padding: 0 var(--sp-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--verde-scuro);
  font-size: var(--testo-s); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(16, 40, 28, 0.2);
}
.scelte-piccole { margin-top: var(--sp-3); }
.scelta-piccola { padding: 20px var(--sp-4); }
.scelta-sezione .scelta-icon { width: 46px; height: 46px; font-size: var(--testo-2xl); border-radius: var(--raggio); margin-bottom: 2px; }
.scelta-sezione .scelta-titolo { font-size: var(--testo-l); }
.conta-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--err-testo); color: #fff;
  font-size: var(--testo-xs); font-weight: 800;
  min-width: 20px; height: 20px; padding: 0 var(--sp-1);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(192,38,23,0.4);
}

.caricamento { color: var(--grigio); margin-top: var(--sp-4); }
.errore-inline { color: var(--err-testo); margin-top: var(--sp-4); }

/* ---------- Pagine con lista/form ---------- */
.pagina { max-width: 900px; }
/* Gestione Campi ha bisogno di piu' respiro delle altre: sette giorni di
   griglia piu' il pannello dei filtri a fianco non stanno in 900px, e il
   tabellone finirebbe a scorrere di lato proprio lui, che e' la cosa da
   guardare. */
.pagina-larga { max-width: 1180px; }
.pagina-testa {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4); gap: var(--sp-3);
}
.pagina-testa h1 { margin: 0; color: var(--verde-scuro); font-size: 25px; letter-spacing: -0.4px; }
.azioni-testa { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
/* Esito del tabulato FIGC in Anagrafiche: sopra l'elenco, finche' non si chiude. */
.esito-tabulato { margin-bottom: var(--sp-4); }
.esito-tabulato h2 { margin-top: 0; }
.esito-tabulato h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--testo-m); }
.testo-errore { color: var(--err-testo); }
/* Testata dettaglio squadra: pulsante "torna" a sinistra del titolo. */
.pagina-testa--squadra { justify-content: flex-start; }
/* Riga "Aggiungi membro": titolo a sinistra, pulsante che apre il form a destra. */
.riga-aggiungi { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.riga-aggiungi h2 { margin: 0; }

/* Pulsanti */
.btn, .btn-secondario, .btn-pericolo {
  border: none; border-radius: var(--raggio-s);
  padding: var(--sp-3) var(--sp-4); font-size: var(--testo-m); font-weight: 700; cursor: pointer;
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
}
.btn { background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(18,134,74,0.28); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(18,134,74,0.34); filter: saturate(1.05); }
.btn:active { transform: translateY(0); }
.btn-secondario { background: #fff; color: var(--verde-scuro); border: 1px solid var(--bordo); box-shadow: var(--ombra-s); }
.btn-secondario:hover { background: var(--verde-chiaro); transform: translateY(-1px); }
.btn-pericolo { background: var(--err-bg); color: var(--err-testo); }
.btn-pericolo:hover { background: #f9d7d3; transform: translateY(-1px); }
a.btn { text-decoration: none; display: inline-block; }

/* Switch impostazioni */
.switch-riga { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--testo-m); font-weight: 600; cursor: pointer; }
.switch-riga input { width: 18px; height: 18px; accent-color: var(--verde); }

/* Logo società */
.logo-riga { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.logo-societa { width: 120px; height: 120px; object-fit: contain; border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff; padding: var(--sp-2); box-shadow: var(--ombra-s); }

/* Pagina Società: intestazione "hero" con logo grande e nome. */
.hero-societa {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  background: var(--grad); color: #fff;
  border-radius: var(--raggio); padding: var(--sp-5); margin-bottom: var(--sp-4);
  box-shadow: var(--ombra-m);
}
.hero-logo {
  width: 96px; height: 96px; flex-shrink: 0;
  background: #fff; border-radius: 18px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.hero-logo-vuoto { font-size: 44px; }
.hero-info { min-width: 0; }
.hero-info h2 { margin: 0 0 var(--sp-1); color: #fff; font-size: 24px; }
.hero-sotto { margin: 0 0 var(--sp-3); color: rgba(255,255,255,0.9); font-size: var(--testo-m); }
.btn-upload-logo {
  display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  background: rgba(255,255,255,0.20); color: #fff; border: 1px solid rgba(255,255,255,0.45);
}
.btn-upload-logo:hover { background: rgba(255,255,255,0.32); }
.org-multi { min-height: 96px; }

/* Organigramma — ruoli a scelta multipla con chip */
.org-box { display: flex; flex-direction: column; gap: var(--sp-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-height: 8px; }
.chip-org {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--verde-chiaro); color: var(--verde-scuro);
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3); border-radius: 999px; font-size: var(--testo-s); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
}
/* Ruoli singoli dell'organigramma: valore in grassetto maiuscolo. */
.sel-org { text-transform: uppercase; font-weight: 600; }
.rimuovi-chip { border: none; background: transparent; color: var(--verde-scuro); font-weight: 800; font-size: var(--testo-l); line-height: 1; cursor: pointer; padding: 0 2px; }
.rimuovi-chip:hover { color: var(--err-testo); }

/* Organigramma societario: banda laterale + grafico.
   Specificità .sezione-tutori.sez-org per battere il border di .sezione-tutori. */
/* Chi non ha ancora un ruolo societario: chip in tinta neutra, per non
   confondersi con quelli dei ruoli assegnati. */
.sezione-tutori.sez-fuori-org { border-left: 5px solid #8a94a0; }
.sezione-tutori.sez-fuori-org > h2 { color: #55606c; }
.chip-fuori {
  background: #eef1f5; color: #47566a; padding-right: var(--sp-3);
}
.chip-fuori .hint { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: var(--testo-xs); }
.sezione-tutori.sez-org { border-left: 5px solid #7a5cd0; }
.sezione-tutori.sez-org > h2 { color: #5a3fb0; }
.org-titolo { margin: var(--sp-1) 0 var(--sp-4); color: #5a3fb0; font-size: var(--testo-s); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.org-chart { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.org-livello { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin: var(--sp-2) 0; }
.org-linea { width: 2px; height: 18px; background: #d5c9f2; }
.org-card {
  min-width: 180px; max-width: 250px;
  background: var(--card); border: 1px solid var(--bordo); border-top: 3px solid #7a5cd0;
  border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4); text-align: center; box-shadow: var(--ombra-s);
}
.org-card.vuota { opacity: 0.5; border-top-color: var(--bordo); }
.org-ruolo { font-size: var(--testo-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #5a3fb0; }
.org-nome { font-size: var(--testo-m); font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; color: var(--testo); margin-top: var(--sp-1); }
.org-fascia { width: 100%; margin-top: var(--sp-3); }
.org-fascia-tit { display: block; text-align: center; font-size: var(--testo-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--grigio); margin-bottom: var(--sp-2); }

/* Etichette stato pagamento */
.pagato-label { color: #10814a; font-weight: 800; margin: 0 0 var(--sp-2); letter-spacing: 0.3px; }
.parziale-label { color: #a65f00; font-weight: 800; margin: 0 0 var(--sp-2); letter-spacing: 0.3px; }

/* Quota sulla scheda del giocatore: agevolazione, fratelli, riepilogo rate */
.quota-scheda { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.quota-scheda .campo-check > span:nth-child(2) { display: flex; align-items: center; gap: var(--sp-2); min-height: 38px; }
.btn-link { background: none; border: none; padding: 0 var(--sp-1); cursor: pointer; color: var(--grigio); font-size: inherit; }
.btn-link:hover { color: var(--testo); }
.q-fratelli { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.q-fratelli .btn-piccolo { box-shadow: inset 0 0 0 1px var(--bordo); }
.etichetta-mini { font-size: var(--testo-s); font-weight: 700; color: var(--grigio); }
.chip-fratello { display: inline-flex; align-items: center; gap: 2px; padding: 2px var(--sp-2); border-radius: 999px;
  background: var(--verde-chiaro); color: var(--verde-scuro); font-size: var(--testo-s); font-weight: 700; }
.tab-quota th { text-align: left; width: 38%; font-weight: 700; color: var(--grigio); }
.tab-quota td, .tab-quota th { padding: 4px var(--sp-2); }
.quota-riga, .quota-pagamenti { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.quota-voce { font-size: var(--testo-s); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--grigio); min-width: 120px; }
.radio-in-riga { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 700; cursor: pointer; margin-right: var(--sp-3); }
.quota-sintesi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--raggio-s); background: var(--sfondo-alt, rgba(0,0,0,0.035)); }
.quota-sintesi .avviso-quota { flex-basis: 100%; }
.faccine { display: inline-flex; gap: 3px; margin-left: var(--sp-2); vertical-align: -2px; flex-shrink: 0; }
.nome-con-icone { display: flex; align-items: center; max-width: 100%; }
.nome-con-icone .nome-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.faccina { display: inline-flex; line-height: 1; cursor: help; }
.faccina-fratelli { color: #2f6fd0; }
.faccina-parziale { color: #e07a00; }
.faccina-totale { color: #d12f2f; }
.avviso-quota { margin-top: var(--sp-1); color: var(--warn-testo); background: var(--warn-bg);
  border-radius: var(--raggio-s); padding: 2px var(--sp-2); font-size: var(--testo-s); }

/* ---------- Impostazioni ---------- */
.griglia-impostazioni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}
.card-imp {
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 20px var(--sp-5);
  box-shadow: var(--ombra-s);
  transition: transform .12s ease, box-shadow .18s ease;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.card-imp:hover { transform: translateY(-2px); box-shadow: var(--ombra-m); }
.card-imp--full { grid-column: 1 / -1; }
.card-imp .hint { margin-top: 0; }
/* La tabella non esce mai dalla card: se serve, scorre in orizzontale. */
.tab-scroll { overflow-x: auto; margin-top: var(--sp-1); }
.tabella-compatta .in-rata { max-width: 120px; }
.tabella-compatta .in-scad,
.tabella-compatta .in-scad2 { max-width: 150px; }
.tabella-compatta .in-perc { max-width: 70px; }
.tabella-compatta .in-annata { max-width: 110px; }
/* Squadre e quote: otto colonne nel riquadro senza scorrere di lato */
.tab-quote-cat th { white-space: nowrap; }
.tab-quote-cat .in-nome { max-width: 130px; }
.tab-quote-cat .in-annata { max-width: 92px; }
.tab-quote-cat .in-rata { max-width: 90px; }
.tab-quote-cat .in-perc { max-width: 60px; }
.tab-quote-cat .in-scad, .tab-quote-cat .in-scad2 { max-width: 136px; }
@media (max-width: 640px) {
  .griglia-impostazioni { grid-template-columns: 1fr; }
}
/* Il titolo del riquadro: figlio diretto, cosi' i sotto-titoli h4 dentro le
   card (colonne delle voci, pezzi della carta intestata) restano com'erano. */
.card-imp > h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--testo-xl);
  color: var(--verde-scuro);
  display: flex; align-items: center; gap: var(--sp-3);
}
.imp-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--verde-chiaro);
  border-radius: var(--raggio-s); font-size: var(--testo-l);
}
body.dark .card-imp { background: var(--card); }

/* Tabella compatta (quote, elenco allenamenti). Specificità .tabella.tabella-compatta
   per battere il padding grande di ".tabella th/td" definito più sotto. */
.tabella.tabella-compatta th, .tabella.tabella-compatta td,
.tabella-compatta th, .tabella-compatta td { padding: var(--sp-1) var(--sp-3); font-size: var(--testo-s); }
.tabella-compatta input { padding: var(--sp-1) var(--sp-2); font-size: var(--testo-s); }
/* ---- Impostazioni: i riquadri raccolti per argomento ----
   Dieci card tutte uguali una sotto l'altra non dicevano dove guardare: ogni
   gruppo ha ora un titoletto e una riga che spiega di cosa si occupa. */
.intro-imp { margin: 0 0 20px; max-width: 78ch; }
.gruppo-imp { margin-bottom: 28px; }
.tit-gruppo-imp {
  margin: 0 0 2px; font-size: var(--testo-l); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--verde-scuro);
}
.sott-gruppo-imp { margin: 0 0 var(--sp-3); max-width: 78ch; }
/* Impostazioni: cartelle in cima alla pagina e «briciole» per tornare. */
.griglia-cartelle-imp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3); margin: 0 0 24px;
}
.cartella-imp {
  display: flex; align-items: center; gap: var(--sp-3); text-align: left;
  padding: 14px 16px; border: 1px solid var(--bordo); border-radius: 12px;
  background: var(--bg2); color: inherit; font: inherit; cursor: pointer;
}
.cartella-imp:hover { border-color: var(--verde); }
.cartella-ico { font-size: 28px; }
.cartella-testo { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cartella-freccia { font-size: 22px; color: var(--grigio); }
.gruppo-imp[hidden], .intro-imp[hidden] { display: none; }
.briciole-imp { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 20px; flex-wrap: wrap; }

/* ---- Impostazioni: una banda laterale per ogni riquadro ----
   Stessa lettura a colpo d'occhio delle card del resto del programma: la banda
   dice dove finisce un argomento e ne comincia un altro. La pastiglia
   dell'icona prende la stessa tinta trasparente, cosi' funziona anche al buio. */
.imp-aspetto { border-left: 5px solid #7a5cd0; }
.imp-aspetto > h3 { color: #5a3fb0; }
.imp-aspetto .imp-ico { background: rgba(122, 92, 208, 0.18); }
.imp-dati { border-left: 5px solid #8a8f98; }
.imp-dati > h3 { color: #5c626b; }
.imp-dati .imp-ico { background: rgba(138, 143, 152, 0.20); }
.imp-quote { border-left: 5px solid #c9820a; }
.imp-quote > h3 { color: #a65f00; }
.imp-quote .imp-ico { background: rgba(201, 130, 10, 0.18); }
.imp-voci { border-left: 5px solid #1b9e54; }
.imp-voci > h3 { color: #10814a; }
.imp-voci .imp-ico { background: rgba(27, 158, 84, 0.18); }
.imp-campi { border-left: 5px solid #0a9396; }
.imp-campi > h3 { color: #087a7d; }
.imp-campi .imp-ico { background: rgba(10, 147, 150, 0.18); }
.imp-modelli { border-left: 5px solid #6c4bb6; }
.imp-modelli > h3 { color: #54348f; }
.imp-modelli .imp-ico { background: rgba(108, 75, 182, 0.18); }
.imp-carta { border-left: 5px solid #b0568a; }
.imp-carta > h3 { color: #8e3f6d; }
.imp-carta .imp-ico { background: rgba(176, 86, 138, 0.18); }
/* Testo dell'informativa: editor largo, a carattere fisso per vedere titoli e tabelle. */
.testo-privacy {
  width: 100%; min-height: 420px; resize: vertical;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.5;
}
.regole-testo { margin: 8px 0 12px; }
.regole-testo summary { cursor: pointer; font-weight: 600; }
.regole-testo ul { margin: 6px 0 6px 18px; }
/* Barra di formattazione sopra gli editor di testo. */
.barra-formato {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 6px 0 -2px; padding: 4px; border: 1px solid var(--bordo);
  border-radius: 8px 8px 0 0; background: var(--bg2);
}
.barra-formato button {
  min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid var(--bordo);
  border-radius: 6px; background: var(--bg, #fff); color: inherit; font: inherit;
  font-size: 13px; cursor: pointer;
}
.barra-formato button:hover { border-color: var(--verde); }
.barra-formato .fmt-g { font-weight: 700; }
.barra-formato .fmt-c { font-style: italic; font-family: Georgia, serif; }
.sep-formato { width: 1px; height: 20px; background: var(--bordo); margin: 0 4px; }
.barra-formato .hint { margin-left: 6px; font-size: 12px; }
/* `.campo span` mette maiuscolo e grassetto: dentro la barra non serve. */
.campo .barra-formato span { font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Riquadri che si aprono e chiudono col doppio clic sul titolo. */
.card-comprimibile > h3 { cursor: pointer; user-select: none; }
.card-comprimibile.compressa > :not(h3) { display: none; }
.card-comprimibile.compressa > h3 { margin-bottom: 0; }
.freccia-comprimi { margin-left: auto; font-size: 12px; color: var(--grigio); font-weight: 400; }
.freccia-comprimi::after { content: "▾ doppio clic per chiudere"; }
.card-comprimibile.compressa .freccia-comprimi::after { content: "▸ doppio clic per aprire"; }
.imp-email { border-left: 5px solid #2f6db0; }
.imp-email > h3 { color: #245a91; }
.imp-email .imp-ico { background: rgba(47, 109, 176, 0.18); }
/* Password della Contabilita': sta nel blocco «Sicurezza dei dati», con una
   tinta sua (grigio-ardesia) per distinguerla dal backup che le sta accanto. */
.imp-lucchetto { border-left: 5px solid #4a5568; }
.imp-lucchetto > h3 { color: #37404f; }
.imp-lucchetto .imp-ico { background: rgba(74, 85, 104, 0.18); }
.stato-lucchetto { margin: 0 0 var(--sp-3); font-size: var(--testo-s); color: var(--grigio); }
.azioni-lucchetto {
  grid-column: 1 / -1;
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
}
.imp-backup { border-left: 5px solid #b8860b; }
.imp-backup > h3 { color: #8a6508; }
.imp-backup .imp-ico { background: rgba(184, 134, 11, 0.18); }

/* Al buio le varianti scure dei titoli (pensate per il fondo chiaro) si
   leggevano a fatica: si passa a una tinta piu' chiara della stessa famiglia. */
body.dark .imp-aspetto > h3 { color: #a48ce6; }
body.dark .imp-dati > h3 { color: #aeb5bf; }
body.dark .imp-quote > h3 { color: #e2a63c; }
body.dark .imp-voci > h3 { color: #46c67d; }
body.dark .imp-campi > h3 { color: #3cc0c3; }
body.dark .imp-modelli > h3 { color: #a184e0; }
body.dark .imp-carta > h3 { color: #d987b4; }
body.dark .imp-email > h3 { color: #6aa4e0; }
body.dark .imp-lucchetto > h3 { color: #a9b6c9; }
body.dark .imp-backup > h3 { color: #dcaa33; }

/* Zona pericolosa (reset) */
/* Il riquadro del reset e' corto: senza questo si stirerebbe fino all'altezza
   del backup, che ora ha due blocchi dentro, e resterebbe mezzo vuoto. */
.zona-pericolosa { border-color: #e7b4ae; border-left: 5px solid #c0392b; align-self: start; }
.zona-pericolosa > h3 { color: var(--err-testo); }
.zona-pericolosa .imp-ico { background: var(--err-bg); }

/* Ricerca / filtri */
.ricerca {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  font-size: var(--testo-l);
  background: #fff;
  margin-bottom: var(--sp-4);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ricerca:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(27,158,84,0.16); }

.filtri { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.filtri .ricerca { margin-bottom: 0; flex: 1; min-width: 200px; }
.filtro-ruolo { padding: var(--sp-3); border: 1px solid var(--bordo); border-radius: var(--raggio-s); font-size: var(--testo-l); background: #fff; }
.filtro-ruolo:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(27,158,84,0.16); }

/* Tabella */
.tabella {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border-radius: var(--raggio); overflow: hidden;
  border: 1px solid var(--bordo); box-shadow: var(--ombra-s);
}
.tabella th, .tabella td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--bordo); font-size: var(--testo-m); }
.tabella th { background: var(--bg2); color: var(--grigio); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; font-size: var(--testo-xs); }
.tabella tbody tr { cursor: pointer; transition: background .12s ease; }
.tabella tbody tr:hover { background: var(--verde-chiaro); }
.tabella tbody tr:last-child td { border-bottom: none; }
.vuoto { color: var(--grigio); padding: var(--sp-4) 0; }

/* Form */
.form { background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--sp-5); box-shadow: var(--ombra-s); }
.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.griglia-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
.form-compatto { padding: var(--sp-4) 20px; }
.form-compatto .campo { margin-bottom: var(--sp-2); }
.campo { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--testo-s); color: var(--grigio); margin-bottom: var(--sp-3); }
.campo span { font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.campo input, .campo textarea, .campo select {
  padding: var(--sp-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  font-size: var(--testo-m); color: var(--testo); font-family: inherit; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(27,158,84,0.16);
}
/* Scadenze: spunta per riga del sollecito quota al diretto interessato. */
.switch-rata { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--testo-s); color: var(--grigio); cursor: pointer; white-space: nowrap; }
.switch-rata input { width: 15px; height: 15px; accent-color: var(--verde); }
.senza-mail { font-size: var(--testo-s); color: var(--grigio); font-style: italic; cursor: help; border-bottom: 1px dotted var(--bordo); }

/* Impostazioni: registro degli avvisi inviati. */
.filtri-registro { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0; }
.filtri-registro input {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  font-family: inherit; font-size: var(--testo-s); min-width: 180px;
}
.tab-registro { font-size: var(--testo-s); }
.tab-registro .log-dest { color: var(--grigio); word-break: break-word; }
#box-registro[hidden] { display: none; }

/* Log degli accessi (dentro la card Utenti): resta chiuso finche' non si
   preme «Vedi log accessi». */
.azioni-accessi { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin: var(--sp-2) 0 var(--sp-1); }
.filtri-registro select {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  font-family: inherit; font-size: var(--testo-s); background: var(--card); color: inherit;
}
/* Azioni sulla riga di un utente: icone tutte della stessa misura del
   cestino, così stanno su una riga sola anche a tabella stretta. */
.azioni-utente { white-space: nowrap; }
.btn-azione {
  background: transparent; border: none; cursor: pointer; padding: 0;
  width: 30px; height: 28px; border-radius: var(--raggio-s); font-size: var(--testo-l); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; transition: background .12s ease;
}
.btn-azione:hover { background: rgba(0, 0, 0, 0.08); }
body.dark .btn-azione:hover { background: rgba(255, 255, 255, 0.12); }

/* Inventario: una tinta per scheda, così si riconosce dov'è si sta lavorando. */
.tabs-inventario .tab.tab-materiali.attivo { color: #1b7f4b; border-bottom-color: #1b9e54; }
.tabs-inventario .tab.tab-materiali:hover { color: #1b7f4b; }
.tabs-inventario .tab.tab-kit.attivo { color: #245a91; border-bottom-color: #2f6db0; }
.tabs-inventario .tab.tab-kit:hover { color: #245a91; }
.tabs-inventario .tab.tab-assegnazione.attivo { color: #8a5a00; border-bottom-color: #e0a726; }
.tabs-inventario .tab.tab-assegnazione:hover { color: #8a5a00; }
.tabs-inventario .tab.tab-recuperare.attivo { color: #7a3a8f; border-bottom-color: #9b59b6; }
.tabs-inventario .tab.tab-recuperare:hover { color: #7a3a8f; }
.tabs-inventario .tab.tab-richieste.attivo { color: #0a6e70; border-bottom-color: #0a9396; }
.tabs-inventario .tab.tab-richieste:hover { color: #0a6e70; }

/* Inventario -> Richiesta materiale: il form della richiesta e l'elenco di
   quelle inserite. Teal, la quinta tinta della barra. */
.sezione-tutori.sez-richiesta { border-left: 5px solid #0a9396; }
.sezione-tutori.sez-richiesta > h2 { color: #0a6e70; }
.sezione-tutori.sez-elenco-richieste { border-left: 5px solid #4a6572; }
.sezione-tutori.sez-elenco-richieste > h2 { color: #37474f; }
.sf-righe-richiesta { border-left-color: #0a9396; }
.sf-righe-richiesta > .etichetta-blocco { color: #0a6e70; }
.tab-bozza { margin-top: var(--sp-3); }
/* Le pastiglie dello stato: da gestire (ambra), in parte (blu), gestita
   (verde). Le tinte sono quelle gia' usate per gli stati altrove. */
.badge.stato-da_gestire { background: var(--warn-bg); color: var(--warn-testo); }
.badge.stato-parziale { background: #dbeafe; color: #1e40af; }
.badge.stato-gestita { background: var(--ok-bg); color: var(--ok-testo); }
.stato-rich { font-size: var(--testo-s); padding: var(--sp-1) var(--sp-2); }
/* Il pallino rosso sulla scheda «Richiesta materiale»: quante ne aspettano.
   Sta dentro al pulsante della scheda, che e' testo: `inline-flex` lo tiene
   in linea senza alzare la riga delle schede. */
.tab-nuove {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 var(--sp-1); margin-left: var(--sp-2);
  border-radius: 999px; background: #c0392b; color: #fff;
  font-size: var(--testo-xs); font-weight: 800; line-height: 1; vertical-align: middle;
}
.tab.attivo .tab-nuove { background: #a5281c; }
.tab-richieste .desc-voce { display: block; }
/* Il pulsante «aggiungi» sta nella griglia come gli altri campi: senza questo
   si incolla all'etichetta della colonna sopra. */
.campo-pulsante { justify-content: flex-end; }
.campo-pulsante button { margin-top: var(--sp-1); }
.tab-richieste td { vertical-align: top; }
.voci-richiesta { margin: 0; padding-left: var(--sp-4); }
.voci-richiesta li { line-height: 1.5; }

/* Inventario → Recuperare: elenco del materiale che deve rientrare. */
.campo-doppio { display: flex; gap: var(--sp-2); align-items: center; min-width: 0; }
/* I campi dentro a una griglia non devono allargare la colonna: senza questo
   un cognome lungo o una tendina larga spingono fuori il resto del riquadro. */
.griglia-2 > .campo, .griglia-3 > .campo { min-width: 0; }
.griglia-2 > .campo input, .griglia-2 > .campo select,
.griglia-3 > .campo input, .griglia-3 > .campo select { max-width: 100%; min-width: 0; }
.campo-doppio select, .campo-doppio input { flex: 1 1 auto; min-width: 0; }
.tab-recuperi { font-size: var(--testo-s); table-layout: fixed; width: 100%; }
.tab-recuperi th, .tab-recuperi td { overflow-wrap: anywhere; }
.tab-recuperi td { vertical-align: top; }
.tab-recuperi .contatti-rec a { color: var(--verde); text-decoration: none; }
.tab-recuperi .contatti-rec a:hover { text-decoration: underline; }
.tab-recuperi .note-rec { color: var(--grigio); max-width: 220px; }
.azioni-rec { white-space: nowrap; }

/* Ruolo personalizzato: la riga dei permessi sotto all'utente, dentro la
   stessa tabella, così si vede a chi appartiene. */
.riga-permessi > td { background: var(--bg2); padding: 0; }
.perm-box { padding: var(--sp-3) var(--sp-4); border-left: 4px solid #7a5cd0; }
.perm-box > .etichetta-blocco { color: #5a3fb0; }
.perm-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2);
}
.perm-voce { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; }
.perm-nome { font-weight: 700; font-size: var(--testo-s); }
.perm-voce select { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: var(--card); font-size: var(--testo-s); }
.perm-azioni { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.perm-esito { color: var(--verde-scuro); font-weight: 600; }
/* Sezione Utenti: i tre blocchi si distinguono dalla banda laterale, come le
   card colorate del resto dell'applicazione. */
.card.sez-utenti { border-left: 5px solid #2f6db0; }
.card.sez-utenti > h2 { color: #245a91; }
.card.sez-ruoli { border-left: 5px solid #7a5cd0; }
.card.sez-ruoli > h2 { color: #5a3fb0; }
.card.sez-accessi { border-left: 5px solid #b8860b; }
.card.sez-accessi > h2 { color: #8a6508; }
.sezione-form .form-inline { margin-top: 0; }

/* Ruoli personalizzati: elenco, pastiglie dei moduli e scelta delle squadre. */
.riga-ruolo { cursor: pointer; }
.riga-ruolo:hover { background: var(--bg2); }
.conta-ruolo { text-align: center; font-weight: 700; }
.chip-modulo {
  display: inline-block; background: var(--neutro-bg); color: var(--neutro-testo);
  border-radius: 999px; padding: 2px var(--sp-2); font-size: var(--testo-xs); font-weight: 700;
  margin: 1px 0; white-space: nowrap;
}
.chip-modulo.chip-modifica { background: var(--verde-chiaro); color: var(--verde-scuro); }
.chip-squadra {
  display: inline-block; background: #dceaf8; color: #1f4f85;
  border-radius: 999px; padding: 2px var(--sp-2); font-size: var(--testo-xs); font-weight: 700;
  margin: 1px 0; white-space: nowrap;
}
.scelta-squadre { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.opz-squadra { cursor: pointer; }
.opz-squadra input { position: absolute; opacity: 0; pointer-events: none; }
.opz-squadra .opz-corpo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: var(--sp-2) var(--sp-4); font-size: var(--testo-m); font-weight: 700; color: var(--testo);
  box-shadow: var(--ombra-s);
}
.opz-squadra input:checked + .opz-corpo {
  background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--ombra-m);
}
.azioni-nuovo-utente { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; flex-basis: 100%; }

/* Manutenzione del registro accessi: svuotamento e giorni di conservazione. */
.manutenzione-log {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; margin: var(--sp-3) 0;
}
.manutenzione-log .hint { margin: 0 0 var(--sp-2); }
.manutenzione-log input[type="number"] { max-width: 90px; }

/* Versione e copyright, in fondo all'Aiuto e al Manuale. */
.aiuto-versione {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--bordo);
  font-size: var(--testo-s); color: var(--grigio); text-align: center;
}
.man-versione {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--bordo);
  font-size: var(--testo-s); color: var(--grigio); text-align: center;
}

/* Nota sotto a un campo del form: spiega cosa accetta. Dentro a una <label>
   va rimessa in minuscolo: `.campo span` mette maiuscolo e grassetto perche'
   pensato per l'etichetta, e la nota verrebbe fuori urlata. */
.aiuto-campo { display: block; margin-top: var(--sp-1); font-size: var(--testo-xs); color: var(--grigio); }
/* Stessa cosa per le note scritte con la classe `.hint` dentro a una label:
   sono spiegazioni, non etichette, e uscivano in maiuscolo e in grassetto. */
.campo .aiuto-campo, .campo .hint { text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1.45; }

.in-email-utente {
  width: 100%; min-width: 150px; padding: var(--sp-1) var(--sp-2); font-size: var(--testo-s);
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  font-family: inherit; background: var(--card); color: inherit;
}
.login-card .btn-secondario.login-btn { margin-top: var(--sp-2); }
.ultimo-accesso { white-space: nowrap; color: var(--grigio); }
.tab-accessi { font-size: var(--testo-s); }
.tab-accessi .log-dest { color: var(--grigio); word-break: break-word; }
.tab-accessi tr.acc-negato td:nth-child(2) { color: #c0392b; }
#box-accessi[hidden] { display: none; }

/* Scadenze: titolo della sezione e flag della notifica sulla stessa riga.
   Il flag sta a destra, così cade nello stesso punto in tutte le sezioni. */
.testa-scadenze {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3) 20px;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  border-bottom: 1px solid var(--bordo);
  padding-bottom: var(--sp-2);
}
.testa-scadenze .sotto-titolo { margin-top: 0; }
.flag-avviso { font-size: var(--testo-m); font-weight: 600; color: var(--grigio); white-space: nowrap; }
.notifica-dettagli {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
}
.notifica-dettagli[hidden] { display: none; }
.in-destinatari { flex: 1; min-width: 220px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--bordo); border-radius: var(--raggio-s); font-size: var(--testo-s); font-family: inherit; }
.in-giorni { width: 66px; padding: var(--sp-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s); font-size: var(--testo-s); font-family: inherit; }
.mini-campo { font-size: var(--testo-s); color: var(--grigio); display: inline-flex; align-items: center; gap: var(--sp-2); }
.notifica-esito { font-size: var(--testo-s); color: var(--grigio); }
.notifica-esito.errore { color: var(--err-testo); }
.notifica-stato { font-size: var(--testo-s); color: var(--grigio); margin: 0 0 var(--sp-3); }
/* Impostazioni: tabella delle fasce di frequenza. */
.tab-frequenze input[type="number"] { width: 80px; padding: var(--sp-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s); font-family: inherit; font-size: var(--testo-s); }
.tab-frequenze select { padding: var(--sp-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s); font-family: inherit; font-size: var(--testo-s); }
.fr-giorni { font-size: var(--testo-s); color: var(--grigio); }

.quando-parte { font-size: var(--testo-s); color: var(--verde-scuro); background: var(--verde-chiaro); padding: var(--sp-1) var(--sp-2); border-radius: 999px; white-space: nowrap; }
.azioni-varia { display: inline-flex; gap: 2px; align-items: center; white-space: nowrap; }
.invia-varia { border: 0; background: transparent; cursor: pointer; font-size: var(--testo-l); padding: 2px var(--sp-1); border-radius: 6px; }
.invia-varia:hover { background: var(--verde-chiaro); }
.invia-varia:disabled { opacity: 0.5; cursor: default; }

/* Scadenze varie (inserite a mano). */
.sezione-tutori.sez-varie { border-left: 5px solid #6c4bb6; }
.sez-varie > h2 { color: #4b3383; }
.tit-varie { color: #4b3383; }
.riga-varia { cursor: pointer; }
.riga-varia.completata td { opacity: 0.55; }

/* Login: avviso di uscita automatica per inattività. */
.login-avviso {
  background: var(--warn-bg);
  color: var(--warn-testo);
  border-radius: var(--raggio-s);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--testo-s);
  line-height: 1.45;
  text-align: left;
}

/* Impostazioni: voci contabili divise in due colonne (entrate / uscite). */
.voci-colonne { align-items: start; }
.col-voci { min-width: 0; border-left: 4px solid transparent; padding-left: var(--sp-3); }
.col-entrata { border-left-color: #1b9e54; }
.col-uscita { border-left-color: #c0392b; }
.col-voci .sotto-titolo { margin-top: 0; }
.tit-entrata { color: #0f6b3d; }
.tit-uscita { color: #a5281b; }
.td-cestino { width: 44px; text-align: right; }

/* `.campo` è flex: senza questa regola l'attributo hidden non lo nasconderebbe. */
.campo[hidden] { display: none; }
.campo-largo { max-width: 360px; margin-bottom: var(--sp-4); }
.form-azioni { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }

/* Foto tessera */
.form-foto { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-4); }
.foto-tessera { width: 100px; height: 124px; object-fit: cover; border-radius: var(--raggio); border: 1px solid var(--bordo); background: var(--bg); box-shadow: var(--ombra-s); }
.foto-azioni .hint { color: var(--grigio); font-size: var(--testo-s); margin: var(--sp-2) 0 0; }
/* Anteprima della foto del materiale: orizzontale, non tessera. */
.foto-materiale {
  width: 132px; height: 100px; object-fit: cover; border-radius: var(--raggio);
  border: 1px solid var(--bordo); background: var(--bg); box-shadow: var(--ombra-s);
}

/* Sezioni (tutori, dotazione, documenti, membri) */
.sezione-tutori { background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--sp-5); margin-top: var(--sp-4); box-shadow: var(--ombra-s); }
.sezione-tutori h2 { margin-top: 0; font-size: var(--testo-xl); color: var(--verde-scuro); }
.tutore { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) 0; border-bottom: 1px solid var(--bordo); font-size: var(--testo-m); gap: var(--sp-3); }
.tutore:last-child { border-bottom: none; }

/* La riga dell'organico è una griglia e non una fila libera: nome a sinistra,
   poi cartellino FIGC e stato del certificato a DESTRA, subito prima del
   cestino. Le due colonne hanno una larghezza minima, così restano
   incolonnate fra giocatori, allenatori e dirigenti — anche dove il
   certificato non c'è (la casella resta vuota, non sparisce). */
.riga-organico {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: var(--sp-3);
}
.org-nome { min-width: 0; }
.org-figc {
  min-width: 96px; text-align: right; white-space: nowrap;
  font-size: var(--testo-s); font-weight: 700; color: var(--grigio);
  font-variant-numeric: tabular-nums;
}
.org-figc.vuoto-figc { opacity: 0.45; font-weight: 600; }
.org-cert { min-width: 116px; text-align: right; }
/* Da telefono le due colonne vanno sotto al nome: incolonnarle su 320px
   vorrebbe dire tagliare i cognomi. */
@media (max-width: 560px) {
  .riga-organico { grid-template-columns: 1fr auto; }
  .org-nome { grid-column: 1 / -1; }
  .org-figc { min-width: 0; text-align: left; }
  .org-cert { min-width: 0; text-align: left; }
}

/* Sezioni dell'organico squadra: una tinta per ruolo + righe più compatte. */
.sezione-organico { border-left: 5px solid var(--bordo); }
.sezione-organico .tutore { padding: var(--sp-1) 0; }
.sez-allenatori { border-left-color: #e08a1e; }
.sez-allenatori h2 { color: #b56d12; }
.sez-staff-tecnico { border-left-color: #6c4bb6; }
.sez-staff-tecnico h2 { color: #4b3383; }
.sez-dirigenti { border-left-color: #2f6db0; }
.sez-dirigenti h2 { color: #245a91; }
.sez-giocatori { border-left-color: #1b9e54; }
.sez-giocatori h2 { color: var(--verde-scuro); }

/* Elenco Anagrafiche: stesse "card" colorate delle Scadenze (bordo a sinistra),
   sezioni collassabili. */
.sezione-tutori.sez-staff { border-left: 5px solid #2f6db0; }
.sezione-tutori.sez-staff > h2 { color: #245a91; }
.sezione-tutori.sez-giocatori-an { border-left: 5px solid #1b9e54; }
.sezione-tutori.sez-giocatori-an > h2 { color: var(--verde-scuro); }
/* Titolo cliccabile per espandere/comprimere la sezione. */
.toggle-sezione { cursor: pointer; user-select: none; display: flex; align-items: center; gap: var(--sp-2); }
.toggle-sezione .caret { font-size: var(--testo-s); transition: transform .15s ease; opacity: 0.75; }
/* Vale per qualunque sezione a fisarmonica (Anagrafiche, Documenti...). */
.collassata > .sezione-corpo { display: none; }
.collassata > .toggle-sezione .caret { transform: rotate(-90deg); }
/* Chiusa resta solo la riga del titolo: niente aria sotto. */
.sezione-comprimibile.collassata { padding-bottom: var(--sp-3); }
.sezione-comprimibile.collassata > .toggle-sezione { margin-bottom: 0; }
/* Le sezioni delle Anagrafiche hanno il loro interruttore e non passano dal
   modulo condiviso: chiuse devono stringersi come le altre, altrimenti da
   telefono restano quattro riquadri mezzi vuoti. */
.sezione-anagrafica.collassata { padding-bottom: var(--sp-3); }
.sezione-anagrafica.collassata > .toggle-sezione { margin-bottom: 0; }
/* Stesse larghezze di colonna nelle due tabelle → colonne allineate. */
/* Larghezze in pixel (trascinabili): la tabella riempie la riga e, se le
   colonne non ci stanno, scorre di lato invece di andare a capo. */
.tab-anagrafica { width: 100%; table-layout: fixed; }
.tab-anagrafica td, .tab-anagrafica th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-anagrafica th { position: relative; }
.maniglia-col {
  position: absolute; top: 0; right: 0; bottom: 0; width: 8px;
  cursor: col-resize; border-right: 2px solid transparent;
}
.maniglia-col:hover, body.ridimensiona-col .maniglia-col:active { border-right-color: var(--verde); }
body.ridimensiona-col, body.ridimensiona-col * { cursor: col-resize !important; user-select: none; }
/* Nome e cognome leggermente più grandi (colonne fisse → niente disallineamento). */
.tab-anagrafica td:first-child, .tab-anagrafica td:nth-child(2) { font-size: var(--testo-m); font-weight: 600; }
/* Intestazioni ordinabili: cliccabili, con freccia sulla colonna attiva. */
.th-ord { cursor: pointer; user-select: none; white-space: nowrap; }
.th-ord:hover { color: var(--verde-scuro); }
.th-ord.attiva { color: var(--verde-scuro); }
/* Icona "cestino" per l'eliminazione — stessa in tutte le sezioni. */
.btn-cestino {
  background: transparent; border: none; cursor: pointer; padding: 0;
  width: 30px; height: 28px; border-radius: var(--raggio-s); color: #c0392b;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  transition: background .12s ease;
}
.btn-cestino::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v1H4v2h16V4h-5V3H9zM6 8v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8H6zm3 2h2v9H9v-9zm4 0h2v9h-2v-9z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v1H4v2h16V4h-5V3H9zM6 8v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8H6zm3 2h2v9H9v-9zm4 0h2v9h-2v-9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-cestino:hover { background: rgba(192, 57, 43, 0.14); }

/* Icona "occhio" per aprire/visualizzare un file. */
.btn-occhio {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; border-radius: var(--raggio-s); color: var(--verde);
  text-decoration: none; vertical-align: middle; transition: background .12s ease;
}
.btn-occhio::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-occhio:hover { background: var(--verde-chiaro); }

/* Tabelle a colonne allineate (Documenti, Scadenze). */
.tab-doc, .tab-scad { width: 100%; table-layout: fixed; }
.tab-doc td, .tab-doc th, .tab-scad td, .tab-scad th { overflow-wrap: anywhere; }
/* Scadenze: la squadra accanto al nome, quando l'elenco le mescola. Sta un
   passo indietro rispetto al nome: e' un'informazione di contorno, non il
   soggetto della riga. */
.squadra-riga { color: var(--grigio); font-size: var(--testo-s); }

/* Riga d'intestazione della squadra dentro l'elenco (Documenti). */
.riga-gruppo td {
  background: var(--bg);
  font-weight: 700;
  font-size: var(--testo-s);
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--testo);
  padding-top: var(--sp-2);
}
body.dark .riga-gruppo td { background: rgba(255, 255, 255, 0.06); }
.riga-gruppo .conteggio { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Contabilità: card "Registra" evidenziata + filtri per colonna nella tabella. */
.sez-registra { border-left: 5px solid var(--verde); }
.riga-filtri th { padding: var(--sp-2) var(--sp-2) var(--sp-4); background: var(--bg2); text-transform: none; }
/* Filtri sopra le label (Inventario): stacco visivo tra le due righe. */
.riga-labels th { border-top: 2px solid var(--bordo); }
/* Barra schede Inventario con pulsante allineato a destra. */
.inv-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.filtro-col {
  width: 100%; box-sizing: border-box; font-size: var(--testo-s); font-weight: 500;
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--bordo); border-radius: 6px;
  background: var(--card); color: var(--testo);
}
.filtro-col:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 2px rgba(27,158,84,0.15); }
/* Contabilita' (movimenti e documenti): colonne strette, Modifica e cestino
   sempre sulla stessa riga dei dati. */
.tabella.tab-mov th, .tabella.tab-mov td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.tab-mov td:first-child, .tab-mov td:last-child { white-space: nowrap; }
.tab-mov td:last-child { width: 1%; }
.tab-mov td:last-child .btn-piccolo { padding: 2px var(--sp-2); }
.tab-mov select.filtro-col { max-width: 140px; }
/* Flag "maglia" = materiale assegnato. */
.flag-maglia { font-size: var(--testo-l); line-height: 1; }
/* Colore del materiale: nell'elenco è solo un pallino (il nome è nel titolo). */
.pallino-colore {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .3); vertical-align: -2px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .35);
}
/* Colore scritto a mano di cui non conosciamo la tinta: pallino neutro,
   riconoscibile dal bordo tratteggiato. */
.pallino-ignoto {
  background: repeating-linear-gradient(45deg, #e9edf2, #e9edf2 3px, #cfd6de 3px, #cfd6de 6px);
  border-style: dashed;
}

/* Form Anagrafica: sezioni distinte con accento colorato per orientarsi. */
.sezione-form { border: 1px solid var(--bordo); border-left: 5px solid var(--bordo); border-radius: var(--raggio); padding: var(--sp-4); margin-bottom: var(--sp-4); background: var(--bg2); }
.sezione-form > .etichetta-blocco { margin-bottom: var(--sp-3); }
.sezione-form .form-foto { margin-bottom: 0; }
.sf-ruolo { border-left-color: #7a5cd0; }
.sf-ruolo > .etichetta-blocco { color: #5a3fb0; }
.sf-dati { border-left-color: #2f6db0; }
.sf-dati > .etichetta-blocco { color: #245a91; }
.sf-indirizzo { border-left-color: #0a9396; }
.sf-indirizzo > .etichetta-blocco { color: #087a7d; }
.sf-contatto { border-left-color: #0a9396; }
.sf-contatto > .etichetta-blocco { color: #087a7d; }
/* Gestione Campi — il form di inserimento diviso in quattro blocchi numerati:
   cosa si inserisce, dove, quando, per quali settimane. */
.sf-att { border-left-color: #7a5cd0; }
.sf-att > .etichetta-blocco { color: #5a3fb0; }
.sf-campo { border-left-color: #e08a1e; }
.sf-campo > .etichetta-blocco { color: #b56d12; }
.sf-quando { border-left-color: #2f6db0; }
.sf-quando > .etichetta-blocco { color: #245a91; }
.sf-periodo { border-left-color: #0a9396; }
.sf-periodo > .etichetta-blocco { color: #087a7d; }
/* Dentro i blocchi l'ultimo campo non lascia aria in fondo. */
.sezione-form > .campo:last-child, .sezione-form > .griglia-2:last-child { margin-bottom: 0; }

/* I riquadri interni (i due form e la manutenzione) seguono la tinta della
   loro card, cosi' si vede a colpo d'occhio dove finisce un blocco. */
.sf-nuovo-utente { border-left-color: #2f6db0; }
.sf-nuovo-utente > .etichetta-blocco { color: #245a91; }
.sf-nuovo-ruolo { border-left-color: #7a5cd0; }
.sf-nuovo-ruolo > .etichetta-blocco { color: #5a3fb0; }
.sf-manutenzione { border-left-color: #b8860b; }
.sf-manutenzione > .etichetta-blocco { color: #8a6508; }

/* I riquadri interni seguono la tinta della loro card: si vede dove comincia
   un blocco senza bisogno della riga di separazione che c'era prima. */
.sf-imp-campi { border-left-color: #0a9396; }
.sf-imp-campi > .etichetta-blocco { color: #087a7d; }
.sf-imp-voci { border-left-color: #1b9e54; }
.sf-imp-voci > .etichetta-blocco { color: #10814a; }
.sf-imp-modelli { border-left-color: #6c4bb6; }
.sf-imp-modelli > .etichetta-blocco { color: #54348f; }
.sf-imp-carta { border-left-color: #b0568a; }
.sf-imp-carta > .etichetta-blocco { color: #8e3f6d; }
.sf-imp-email { border-left-color: #2f6db0; }
.sf-imp-email > .etichetta-blocco { color: #245a91; }
.sf-imp-lucchetto { border-left-color: #4a5568; }
.sf-imp-lucchetto > .etichetta-blocco { color: #37404f; }
.sf-imp-backup { border-left-color: #b8860b; }
.sf-imp-backup > .etichetta-blocco { color: #8a6508; }
/* L'ultimo riquadro non lascia aria in fondo alla card. */
.card-imp > .sezione-form:last-child { margin-bottom: 0; }
.sezione-form > .hint:last-child, .sezione-form > .form-inline:last-child { margin-bottom: 0; }

/* Contatti: elenco della rubrica esterna. */
.tab-contatti { font-size: var(--testo-s); }
.tab-contatti td a { color: var(--verde); text-decoration: none; }
.tab-contatti td a:hover { text-decoration: underline; }
.riga-contatto { cursor: pointer; }
/* Telefono ed email su una riga sola: un numero o un indirizzo spezzato a
   meta' alzava la riga e rendeva l'elenco faticoso da scorrere. La tabella e'
   dentro .tab-scroll, quindi al massimo scorre di lato. */
.tab-contatti .td-recapito { white-space: nowrap; }
.chip-area {
  display: inline-block; padding: 1px var(--sp-2); border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--bordo);
  font-size: var(--testo-s); white-space: nowrap;
}
.campo-area { display: flex; gap: var(--sp-2); align-items: center; }
.campo-area select { flex: 1 1 auto; min-width: 0; }
.campo-area input { flex: 1 1 auto; min-width: 0; }
.sf-documento { border-left-color: #b56d12; }
.sf-documento > .etichetta-blocco { color: #8a4b14; }
.sf-certificato { border-left-width: 5px; border-left-color: #1b9e54; }
.sf-certificato > .etichetta-blocco { color: #10814a; }
.sf-iscrizione { border-left-width: 5px; border-left-color: #c9820a; }
.sf-iscrizione > .etichetta-blocco { color: #a65f00; }
.sf-note { border-left-color: #8a8f98; }
.sf-note > .etichetta-blocco { color: #5c626b; }

/* Anagrafiche: la riga di istruzioni sopra al form e il riquadro dei dati che
   riguardano i soli giocatori (squadra e quota, certificato medico). Il
   riquadro tiene insieme i blocchi che compaiono e spariscono col ruolo: senza
   una cornice sembrerebbero apparire dal nulla in mezzo alla scheda. */
.nota-form { margin: 0 0 var(--sp-4); font-size: var(--testo-s); color: var(--grigio); }
.gruppo-giocatore {
  border: 1px dashed #b7d9c5; border-radius: var(--raggio); padding: var(--sp-3) var(--sp-3) 2px;
  margin-bottom: var(--sp-4); background: rgba(27, 158, 84, 0.04);
}
.testa-gruppo { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.tit-gruppo {
  font-weight: 800; font-size: var(--testo-s); color: var(--verde-scuro);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.pill-giocatore {
  display: inline-block; padding: 2px var(--sp-2); border-radius: 999px;
  background: #e3f4ea; color: #10814a; border: 1px solid #b7d9c5;
  font-size: var(--testo-xs); font-weight: 700;
}

/* Scadenze: una tinta per tipo di scadenza (certificati / documenti / rate). */
.sezione-tutori.sez-certificati { border-left: 5px solid #1b9e54; }
.sezione-tutori.sez-documenti { border-left: 5px solid #b56d12; }
.sezione-tutori.sez-rate { border-left: 5px solid #c0392b; }
.tit-certificati, .sez-certificati > h2 { color: #0f6b3d; }
.tit-documenti, .sez-documenti > h2 { color: #8a4b14; }
.tit-rate, .sez-rate > h2 { color: #a5281b; }
body.dark .sez-certificati > h2 { color: #46c67d; }
body.dark .sez-documenti > h2 { color: #e2a63c; }
body.dark .sez-rate > h2 { color: #e08a7d; }
body.dark .sez-varie > h2 { color: #a184e0; }

/* Inventario → Assegnazione: modulo di consegna su carta intestata. */
.sezione-tutori.sez-modulo { border-left: 5px solid #b06a2f; }
.sez-modulo > h2 { color: #8a4b14; }
.margini-carta { align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
.margini-carta .mini-campo { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.margini-carta input[type="number"] {
  width: 90px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  font-family: inherit; font-size: var(--testo-m);
}
/* Segnaposto del modello citati nei testi di aiuto. */
.sez-modulo code {
  background: #eef3f8; border: 1px solid var(--bordo); border-radius: 4px;
  padding: 1px var(--sp-1); font-size: var(--testo-s); white-space: nowrap;
}
.avviso-segnaposto { color: var(--warn-testo); }
/* La spunta delle righe da riportare nel modulo. */
.mod-riga { width: 17px; height: 17px; accent-color: var(--verde); }

/* Documenti: una tinta per tipologia (banda laterale + titolo). */
.sezione-tutori.sez-etico { border-left: 5px solid #6c4bb6; }
.sez-etico > h2 { color: #4b3383; }
.sezione-tutori.sez-cartellino { border-left: 5px solid #2f6db0; }
.sez-cartellino > h2 { color: #245a91; }
.sezione-tutori.sez-informative { border-left: 5px solid #0f7b8a; }
.sez-informative > h2 { color: #0b5f6b; }
.sezione-tutori.sez-contratti { border-left: 5px solid #9b2c4a; }
.sez-contratti > h2 { color: #7a1f38; }
.sezione-tutori.sez-verifica { border-left: 5px solid #c0392b; }
.sez-verifica > h2 { color: #962d22; }
/* Verifica dati: le righe filtrate da «Solo chi ha dati mancanti» (anche
   quando da telefono la tabella diventa a schede, con display: flex). */
#tab-verifica tr[hidden] { display: none !important; }
#tab-verifica th[hidden], #tab-verifica td[hidden] { display: none !important; }
.verifica-colonne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.verifica-colonne label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#tab-verifica td { white-space: nowrap; }
.sezione-tutori.sez-generico { border-left: 5px solid #6b7785; }
.sez-generico > h2 { color: #4d5761; }
.sez-certificati > h2 { color: #0f6b3d; }
.sez-documenti > h2 { color: #8a4b14; }
.sezione-tutori.sez-foto { border-left: 5px solid #d1568a; }
.sez-foto > h2 { color: #a63a69; }
.sezione-tutori.sez-inventario { border-left: 5px solid #0a8f8f; }
.sezione-tutori.sez-materiale-tecnico { border-left: 5px solid #5f7a3a; }
.sez-materiale-tecnico > h2 { color: #4a6129; }
.sez-inventario > h2 { color: #076e6e; }
.sezione-tutori.sez-carica { border-left: 5px solid #1b9e54; }
.sez-carica > h2 { color: #0f6b3d; }
.sezione-tutori.sez-da-associare { border-left: 5px solid #d99100; }
.sez-da-associare > h2 { color: #8a5c00; }

/* Documenti: caricamento (file o scatto), associazione e anteprime. */
.riga-file-doc { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.anteprima-scelta { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.mini-anteprima,
.mini-thumb {
  border-radius: var(--raggio-s);
  border: 1px solid var(--bordo);
  object-fit: cover;
  background: #fff;
}
.mini-anteprima { max-height: 90px; max-width: 140px; }
.mini-thumb { width: 42px; height: 34px; cursor: zoom-in; }
.mini-thumb:hover { border-color: var(--verde); box-shadow: var(--ombra-s); }
.assoc-persona { font-weight: 600; }
.assoc-materiale { font-weight: 600; color: #076e6e; }
.assoc-vuota { color: #8a5c00; font-style: italic; }
.assoc-societa { font-weight: 600; }

/* Modale di anteprima del documento. */
.anteprima-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 20, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  z-index: 60;
}
.anteprima-overlay[hidden] { display: none; }
.anteprima-modal {
  position: relative;
  background: var(--card);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-l);
  padding: var(--sp-4);
  max-width: min(920px, 96vw);
  max-height: 92vh;
  overflow: auto;
  animation: entra 0.18s ease;
}
.anteprima-chiudi {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: var(--grigio);
}
.anteprima-corpo img { max-width: 100%; max-height: 74vh; border-radius: var(--raggio-s); display: block; }
.anteprima-corpo iframe { width: min(860px, 88vw); height: 74vh; border: 1px solid var(--bordo); border-radius: var(--raggio-s); }
.anteprima-azioni { margin: var(--sp-3) 0 0; text-align: right; }

/* Codice Etico: riga di stato del modello e barra azioni in fondo. */
.modello-stato { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.modello-stato .hint { margin: 0; }
.riga-azioni-etico { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.riga-azioni-etico .btn-secondario { padding: var(--sp-1) var(--sp-3); font-size: var(--testo-s); }

/* Documenti generati: sole icone, tutte su una riga, righe compatte. */
.azioni-etico { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
/* Specificità pari a `.tabella.tabella-compatta td`, ma dichiarata dopo: vince. */
.tabella.tab-etico td { padding-top: 1px; padding-bottom: 1px; }
.tabella.tab-etico th { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.tab-etico .azioni-etico button { width: 26px; height: 24px; }
/* Codice Etico: nella stessa riga il documento generato e quello caricato
   dopo la firma; il trattino segnala quello dei due che ancora manca. */
.etico-manca { color: var(--grigio); opacity: .7; }
/* Assegnazione: la barra Assegna/Annulla sotto l'elenco da consegnare. */
.azioni-consegna { margin-top: var(--sp-3); align-items: center; }
/* Materiale assegnato raggruppato per persona: il nome si clicca per
   aprire il dettaglio. Più leggero di una card, è dentro una sezione. */
.gruppo-persona {
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  background: var(--card); margin-bottom: var(--sp-2); overflow: hidden;
}
.gruppo-persona > .toggle-sezione {
  margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--testo-m); font-weight: 700;
  color: var(--verde-scuro); background: var(--bg);
}
.gruppo-persona > .toggle-sezione:hover { background: var(--verde-chiaro); }
.gruppo-persona > .sezione-corpo { padding: var(--sp-1) var(--sp-3) var(--sp-2); }
.gruppo-persona .conteggio { margin-left: auto; font-weight: 600; }
/* Filtri sopra l'elenco del materiale assegnato. */
.filtri-assegnato { align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.filtri-assegnato .mini-campo { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.filtri-assegnato select { min-width: 160px; }
.ruolo-gruppo { font-size: var(--testo-s); font-weight: 600; color: var(--grigio); margin-left: var(--sp-2); }
.data-etico { margin-left: var(--sp-2); font-size: var(--testo-xs); }
.tab-etico .azioni-etico .mini-thumb { width: 34px; height: 26px; }
/* Matita: modifica una riga già registrata (sta prima del cestino). */
.btn-matita::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-matita:hover { background: rgba(138, 92, 0, .12); }

/* Icone "stampa", "scarica" e "modifica" (come .btn-cestino/.btn-occhio). */
.btn-stampa, .btn-scarica, .btn-matita {
  background: transparent; border: none; cursor: pointer; padding: 0;
  width: 30px; height: 28px; border-radius: var(--raggio-s);
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  transition: background .12s ease;
}
.btn-stampa { color: #2f6db0; }
.btn-scarica { color: var(--verde); }
.btn-matita { color: #8a5c00; }
.btn-stampa::before, .btn-scarica::before, .btn-matita::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
}
.btn-stampa::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-scarica::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-stampa:hover { background: rgba(47, 109, 176, 0.14); }
.btn-scarica:hover { background: var(--verde-chiaro); }

/* Squadra spenta in Impostazioni: la riga resta leggibile ma si vede che non
   e' in uso, altrimenti si scambia per una squadra come le altre. */
.cat-spenta { opacity: 0.62; }
.cat-spenta input:not(.in-attiva) { font-style: italic; }
.td-attiva { text-align: center; }
.td-attiva .switch-riga { justify-content: center; margin: 0; }

/* ---------- Aspetto: la tavolozza del colore istituzionale ---------- */
.sf-colore { border-left-color: var(--brand); }
.sf-colore > .etichetta-blocco { color: var(--brand-scuro); }
.tavolozza { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }
/* Il quadratino del colore e' un bersaglio da toccare: 44px, non 20. */
.pastello {
  width: var(--tocco); height: var(--tocco); min-width: var(--tocco);
  border: 2px solid transparent; border-radius: var(--raggio-s);
  cursor: pointer; padding: 0; box-shadow: var(--ombra-s);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pastello:hover { transform: translateY(-2px); box-shadow: var(--ombra-m); }
/* Quello scelto si riconosce dal bordo chiaro con l'anello scuro intorno: un
   segno che si vede su qualunque tinta, anche sul grigio ardesia. */
.pastello.scelto {
  border-color: var(--card);
  box-shadow: 0 0 0 3px var(--testo), var(--ombra-s);
}
.riga-colore { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.campo-colore { margin-bottom: 0; }
.campo-colore input[type="color"] {
  width: 64px; height: var(--tocco); padding: 2px; cursor: pointer;
  border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: var(--card);
}
/* Solo per chi usa un lettore di schermo: a video il nome del colore sta nel
   suggerimento, ma un pulsante senza testo non si annuncia. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Finestra di modifica (js/finestra.js) ---------- */
.finestra-sfondo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 30, 22, 0.35);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.finestra {
  background: var(--card); color: var(--testo);
  width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column;
  border-radius: var(--raggio); border: 1px solid var(--bordo);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28); animation: entra .18s ease;
}
/* Dopo il primo trascinamento la posizione la decide il mouse. */
.finestra.spostata { position: fixed; margin: 0; animation: none; }
.finestra-testa {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--bordo);
  background: var(--bg2); border-radius: var(--raggio) var(--raggio) 0 0;
  cursor: move; user-select: none; touch-action: none;
}
.finestra-testa h2 { margin: 0; font-size: 18px; color: var(--verde-scuro); }
.finestra-chiudi {
  background: transparent; border: none; color: var(--grigio); cursor: pointer;
  font-size: var(--testo-xl); line-height: 1; padding: var(--sp-1) var(--sp-2); border-radius: var(--raggio-s);
}
.finestra-chiudi:hover { background: var(--verde-chiaro); color: var(--testo); }
.finestra-form { display: flex; flex-direction: column; min-height: 0; }
.finestra-corpo { padding: var(--sp-4); overflow-y: auto; }
.finestra-piede {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--bordo);
}
@media (max-width: 780px) {
  .finestra-sfondo { padding: 10px; }
  .finestra-testa { cursor: default; }
}

/* ---------- Aiuto contestuale (modale) ---------- */
.aiuto-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 30, 22, 0.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.aiuto-modal {
  position: relative; background: var(--card); color: var(--testo);
  width: 100%; max-width: 560px; max-height: 82vh; overflow-y: auto;
  border-radius: var(--raggio); padding: var(--sp-5) var(--sp-5) 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28); border: 1px solid var(--bordo);
  animation: entra .18s ease;
}
.aiuto-chiudi {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: none; color: var(--grigio);
  font-size: var(--testo-xl); cursor: pointer; line-height: 1; padding: var(--sp-1) var(--sp-2); border-radius: var(--raggio-s);
}
.aiuto-chiudi:hover { background: var(--verde-chiaro); color: var(--testo); }
.aiuto-testa { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.aiuto-testa h2 { margin: 0; color: var(--verde-scuro); font-size: 20px; }
.aiuto-ico {
  font-size: 20px; width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--verde-chiaro); border-radius: var(--raggio-s);
}
.aiuto-intro { margin: 0 0 var(--sp-3); }
.aiuto-punti { margin: 0 0 var(--sp-3); padding-left: 20px; }
.aiuto-punti li { margin: var(--sp-2) 0; line-height: 1.4; }

/* ============================================================
   RIUNIONI E CONVOCAZIONI
   ============================================================ */
/* Tre pastiglie nuove, con le tinte che il foglio usa gia' altrove: «ricevuta»
   verde, «da avvisare a voce» ambra, «non partita» rossa. */
.badge.ok { background: var(--ok-bg); color: var(--ok-testo); }
.badge.attenzione { background: var(--warn-bg); color: var(--warn-testo); }
.badge.errore { background: var(--err-bg); color: var(--err-testo); }

.griglia-campi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3) var(--sp-4); align-items: end;
}
.griglia-campi > .campo { min-width: 0; margin-bottom: 0; }
.griglia-campi > .campo input, .griglia-campi > .campo select { max-width: 100%; }
.form-riunione textarea { width: 100%; max-width: 640px; font-family: inherit; }
.azioni-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }
.avviso-inviata {
  background: var(--warn-bg); color: var(--warn-testo); border-radius: var(--raggio-s);
  padding: var(--sp-3); font-weight: 600;
}

/* Gli invitati, raggruppati per ruolo: si convoca «la dirigenza», non sei nomi. */
.gruppo-invitati {
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: var(--sp-2) var(--sp-4) var(--sp-3); margin: 0 0 var(--sp-3);
}
.gruppo-invitati legend {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  font-size: var(--testo-s); color: var(--verde-scuro); padding: 0 var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-2);
}
.riga-invitato {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-1) 0; cursor: pointer;
}
.riga-invitato .hint { font-size: var(--testo-s); }
/* Chi non ha un indirizzo si invita lo stesso, ma si vede subito: e' la riga
   che poi va avvisata a voce. */
.riga-invitato.senza-email span:first-of-type { color: var(--grigio); }

/* La legenda dei colori sotto al tabellone delle riunioni: solo i tipi che
   quella settimana ci sono davvero. */
.legenda-tipi { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0 0; }
.voce-legenda {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--testo-s); font-weight: 700; color: var(--grigio);
}
.voce-legenda .pallino {
  width: 14px; height: 14px; border-radius: 4px; border: 2px solid transparent; display: inline-block;
}
/* Il riquadro di una riunione nel tabellone si clicca, come le pastiglie dei
   campi: apre quella riunione nel modulo qui sotto. */
.voce-riunione { cursor: pointer; }

.tipo-riunione {
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: var(--sp-4); margin-bottom: var(--sp-4); background: var(--bg2);
}
.tipo-riunione textarea { width: 100%; max-width: 640px; font-family: inherit; }
.ruoli-tipo { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.sez-tipi summary { cursor: pointer; padding: var(--sp-2) 0; }
.riga-riunione.passata { opacity: 0.62; }
.btn-invia { background: var(--verde-scuro); }

/* Il riquadro dell'interruttore push in fondo a una sezione. */
.card-push .switch-riga { font-weight: 700; }
.esito-push { min-height: 1.2em; margin: var(--sp-2) 0 0; font-weight: 600; }

/* ---------- Notifiche push: il pannello del campanello ---------- */
/* Riusa la finestra dell'Aiuto: e' la stessa cosa — una finestrella che si
   apre da un'icona della barra in alto. Qui solo cio' che le serve in piu'. */
.push-modal p { line-height: 1.45; }
.push-istruzioni h3, .push-modal h3 {
  margin: var(--sp-4) 0 var(--sp-2); font-size: var(--testo-m);
  color: var(--verde-scuro); text-transform: uppercase; letter-spacing: 0.4px;
}
.push-istruzioni ol { margin: 0 0 var(--sp-3); padding-left: 22px; }
.push-istruzioni li { margin: var(--sp-2) 0; line-height: 1.45; }
.push-avviso {
  background: var(--giallo-chiaro, #fdf6e3); border: 1px solid var(--bordo);
  border-left: 5px solid #e0a800; border-radius: var(--raggio-s);
  padding: var(--sp-3); margin: var(--sp-2) 0;
}
.push-stato-ok {
  background: var(--verde-chiaro); border-radius: var(--raggio-s);
  padding: var(--sp-3); margin: var(--sp-2) 0; font-weight: 600;
}
.push-dispositivi { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.push-dispositivi li {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  border-bottom: 1px solid var(--bordo); padding: var(--sp-2) 0;
}
.push-dispositivi li:last-child { border-bottom: none; }
.push-nome { font-weight: 700; }
.push-comandi { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-2); }
.push-esito { margin: var(--sp-2) 0 0; font-weight: 600; }

/* ---------- Pagina Manuale ---------- */
.man-indice { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); }
.man-indice-voce {
  background: var(--card); border: 1px solid var(--bordo); border-radius: 999px;
  padding: var(--sp-2) var(--sp-3); font-weight: 600; font-size: var(--testo-s); color: var(--testo);
  text-decoration: none; box-shadow: var(--ombra-s);
}
.man-indice-voce:hover { background: var(--verde-chiaro); }
.man-corpo { display: flex; flex-direction: column; gap: var(--sp-4); }
.man-sezione {
  background: var(--card); border: 1px solid var(--bordo);
  border-left: 5px solid var(--verde); border-radius: var(--raggio);
  padding: var(--sp-4) 20px; box-shadow: var(--ombra-s);
}
.man-titolo { margin: 0 0 var(--sp-2); color: var(--verde-scuro); font-size: var(--testo-xl); display: flex; align-items: center; gap: var(--sp-3); }
.man-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--verde-chiaro); border-radius: var(--raggio-s); font-size: var(--testo-xl);
}
.man-intro { margin: 0 0 var(--sp-2); color: var(--grigio); }
.man-punti { margin: 0; padding-left: 20px; }
/* Il manuale e' diviso in gruppi di argomenti: un titoletto per ognuno, con
   una banda verde a sinistra che li tiene distinti a colpo d'occhio. */
.man-gruppo { margin: var(--sp-3) 0 0; padding-left: var(--sp-3); border-left: 3px solid var(--verde-chiaro); }
.man-gruppo-tit {
  margin: 0 0 var(--sp-1); font-size: var(--testo-m); color: var(--verde-scuro);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.aiuto-gruppo {
  margin: var(--sp-3) 0 2px; font-size: var(--testo-s); color: var(--verde-scuro);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.man-punti li { margin: var(--sp-1) 0; line-height: 1.45; }
.form-inline { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); align-items: center; }
.form-inline input, .form-inline select {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  font-size: var(--testo-m); flex: 1; min-width: 120px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-inline input:focus, .form-inline select:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(27,158,84,0.16); }
.conteggio { color: var(--grigio); font-weight: 500; font-size: var(--testo-m); }

/* Badge */
.badge { display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: 999px; font-size: var(--testo-s); font-weight: 700; white-space: nowrap; letter-spacing: 0.2px; }
.badge.valido { background: var(--ok-bg); color: var(--ok-testo); }
.badge.in-scadenza { background: var(--warn-bg); color: var(--warn-testo); }
.badge.scaduto { background: var(--err-bg); color: var(--err-testo); }
.badge.neutro { background: #e7ecf2; color: #47566a; }
.badge.neutro { background: var(--neutro-bg); color: var(--neutro-testo); }

/* Blocco certificato */
.blocco-certificato { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--sp-4); margin-bottom: var(--sp-4); background: var(--bg2); }
.etichetta-blocco { display: block; font-weight: 700; font-size: var(--testo-s); color: var(--verde-scuro); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: 0.3px; }
.cert-riga { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-2); flex-wrap: wrap; }
.link-file { color: var(--verde-scuro); font-weight: 700; font-size: var(--testo-s); text-decoration: none; }
.link-file:hover { text-decoration: underline; }
.blocco-certificato .hint { color: var(--grigio); font-size: var(--testo-s); margin: var(--sp-1) 0 0; }
.hint { color: var(--grigio); font-size: var(--testo-s); }

/* Tabs */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 2px solid var(--bordo); margin-bottom: var(--sp-3); }
.tab { background: none; border: none; padding: var(--sp-3) var(--sp-4); font-size: var(--testo-l); font-weight: 700; color: var(--grigio); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s ease, border-color .15s ease; }
.tab:hover { color: var(--verde-scuro); }
.tab.attivo { color: var(--verde-scuro); border-bottom-color: var(--verde); }

/* Riepilogo contabile */
.riepilogo { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.ric { flex: 1; min-width: 150px; background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); box-shadow: var(--ombra-s); position: relative; overflow: hidden; }
.ric::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grigio); }
.ric span { font-size: var(--testo-s); color: var(--grigio); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; }
.ric strong { font-size: 24px; letter-spacing: -0.5px; }
.ric-entrata::before { background: #10814a; }
.ric-entrata strong { color: #10814a; }
.ric-uscita::before { background: var(--err-testo); }
.ric-uscita strong { color: var(--err-testo); }
.ric-saldo::before { background: var(--verde); }
.ric-saldo strong { color: var(--verde-scuro); }

/* Barra esportazione */
.export-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); background: var(--bg2); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4); }
.filtri-doc { align-items: flex-end; }
.filtri-doc label { display: flex; flex-direction: column; gap: 2px; }
.filtri-doc .filtro-col { width: auto; min-width: 110px; max-width: 170px; }
.export-bar input[type="date"] { padding: var(--sp-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: #fff; }

/* Scrollbar discreta */
.content::-webkit-scrollbar { width: 10px; }
.content::-webkit-scrollbar-thumb { background: #cfd9d3; border-radius: var(--raggio-s); border: 2px solid transparent; background-clip: padding-box; }
.content::-webkit-scrollbar-thumb:hover { background: #b7c4bc; background-clip: padding-box; }

/* ---------- Allenamenti ---------- */
/* Riepilogo accanto al titolo della pagina. */
.riepilogo-testa {
  background: var(--verde-chiaro); color: var(--verde-scuro);
  border-radius: 999px; padding: var(--sp-1) var(--sp-4); font-size: var(--testo-s); font-weight: 700; white-space: nowrap;
}
.sez-allen-form { border-left: 5px solid #1b9e54; }
.sez-allen-form > h2 { color: var(--verde-scuro); }
.sez-allen-board { border-left: 5px solid #2f6db0; }
.sez-allen-board > h2 { color: #245a91; }
.board-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.board-testa h2 { margin: 0 0 var(--sp-1); }

/* Barra della settimana: frecce, intervallo mostrato, salto a una data e stampa.
   Il tabellone e' settimanale, quindi bisogna sempre sapere QUALE settimana si
   sta guardando: l'intervallo di date sta al centro della barra. */
.barra-settimana {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--bg2); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: var(--sp-3); margin: 0 0 var(--sp-3);
}
.nav-sett { min-width: 38px; padding: var(--sp-2) var(--sp-3); font-size: var(--testo-xl); line-height: 1; }
/* «Questa settimana» si spegne quando ci sei già. */
.barra-settimana button:disabled { opacity: 0.45; cursor: default; transform: none; }
.sett-eti {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--testo-xl);
}
.badge-sett {
  background: var(--verde-chiaro); color: var(--verde-scuro);
  border-radius: 999px; padding: var(--sp-1) var(--sp-3); font-size: var(--testo-xs); font-weight: 800;
}
.vai-a-data {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--testo-s); font-weight: 700; color: var(--grigio); text-transform: uppercase; letter-spacing: 0.4px;
}
.vai-a-data input[type="date"] {
  padding: var(--sp-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  background: var(--card); font-size: var(--testo-m); text-transform: none; letter-spacing: 0;
}
/* Stampa e PDF: sole icone, in fondo alla riga della settimana. */
.btn-barra {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 42px; padding: 0; font-size: var(--testo-2xl); line-height: 1;
  background: var(--card); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: var(--raggio-s); cursor: pointer;
  box-shadow: var(--ombra-s); transition: transform .1s ease, background .12s ease;
}
.btn-barra:hover { transform: translateY(-1px); background: var(--bg2); }
.btn-barra + .btn-barra { margin-left: -2px; }
/* Spinge stampa e PDF a destra sulle righe larghe. */
.spazio-sett { flex: 1; }
.esito-stampa { margin: var(--sp-2) 0 0; }
/* Data del giorno sotto il nome, nell'intestazione del tabellone. */
/* La data e' quello che si cerca guardando il tabellone («che giorno e'
   mercoledi?»): sta sotto al nome del giorno e non deve essere la scritta
   piu' piccola della pagina. */
.th-data {
  display: block; font-size: var(--testo-l); font-weight: 800;
  letter-spacing: 0; opacity: 0.95; margin-top: 1px;
}

/* Tipologia (allenamento / partita / evento): pillole come campo e giorni, con
   la spiegazione sotto all'etichetta. Da selezionata ognuna prende la sua tinta,
   la stessa del segno che compare poi nel tabellone. */
.scelta-tipo { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.opz-tipo { cursor: pointer; }
.opz-tipo input { position: absolute; opacity: 0; pointer-events: none; }
/* Una riga sola: l'etichetta basta, la spiegazione sta nel suggerimento. */
.opz-tipo .opz-corpo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: var(--sp-2) var(--sp-4); font-size: var(--testo-m); font-weight: 700; color: var(--testo);
  box-shadow: var(--ombra-s); transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.opz-tipo:hover .opz-corpo { transform: translateY(-1px); }
.opz-tipo input:checked + .opz-corpo { border-color: transparent; color: #fff; box-shadow: var(--ombra-m); }
.tipo-allenamento input:checked + .opz-corpo { background: var(--grad); }
.tipo-partita input:checked + .opz-corpo { background: linear-gradient(135deg, #2f6db0, #1f4f85); }
.tipo-evento input:checked + .opz-corpo { background: linear-gradient(135deg, #7a4bb6, #5a2f92); }
.opz-tipo input:focus-visible + .opz-corpo { outline: 2px solid var(--verde); outline-offset: 2px; }

/* Parte della giornata: pillole con l'intervallo di orario sotto all'etichetta,
   perché è quello che cambia gli orari proponibili. */
.scelta-fascia { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.opz-fascia { cursor: pointer; }
.opz-fascia input { position: absolute; opacity: 0; pointer-events: none; }
.opz-fascia .opz-corpo {
  display: inline-flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: var(--sp-2) var(--sp-4); font-size: var(--testo-m); font-weight: 700; color: var(--testo);
  box-shadow: var(--ombra-s); transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.opz-fascia em { font-style: normal; font-size: var(--testo-xs); font-weight: 600; opacity: 0.75; }
.opz-fascia:hover .opz-corpo { transform: translateY(-1px); }
.opz-fascia input:checked + .opz-corpo { border-color: transparent; color: #fff; box-shadow: var(--ombra-m); }
.fascia-mattino input:checked + .opz-corpo { background: linear-gradient(135deg, #e0a020, #b97a10); }
.fascia-pomeriggio input:checked + .opz-corpo { background: linear-gradient(135deg, #e07a3c, #b4551f); }
.fascia-sera input:checked + .opz-corpo { background: linear-gradient(135deg, #3f5a99, #26386f); }
.opz-fascia input:focus-visible + .opz-corpo { outline: 2px solid var(--verde); outline-offset: 2px; }
/* Evento che non riguarda una squadra: l'assenza va detta, non lasciata vuota. */
.senza-squadra { color: var(--grigio); font-style: italic; white-space: nowrap; }

/* Segno della tipologia dentro la casella del tabellone e pastiglia nell'elenco. */
.ic-tipo { margin-right: var(--sp-1); font-size: 10px; }
.chip-speciale { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.22); }
.badge-tipo.bt-allenamento { background: var(--verde-chiaro); color: var(--verde-scuro); }
.badge-tipo.bt-partita { background: #dceaf8; color: #1f4f85; }
.badge-tipo.bt-evento { background: #ece0f7; color: #5a2f92; }
.desc-voce {
  display: block; margin-top: 2px; font-size: var(--testo-xs); color: var(--grigio);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agenda-che { flex-basis: 100%; font-size: var(--testo-s); font-weight: 600; opacity: 0.9; }

/* Periodo di validita': stesse pillole di campo e giorni, con la spiegazione
   sotto all'etichetta (le date cambiano sfogliando le settimane). */
.scelta-periodo { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.opz-periodo { cursor: pointer; }
.opz-periodo input { position: absolute; opacity: 0; pointer-events: none; }
.opz-periodo .opz-corpo {
  display: inline-flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: var(--sp-2) var(--sp-4); font-size: var(--testo-m); font-weight: 700; color: var(--testo);
  box-shadow: var(--ombra-s); transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.opz-periodo em { font-style: normal; font-size: var(--testo-xs); font-weight: 600; opacity: 0.75; }
.opz-periodo:hover .opz-corpo { transform: translateY(-1px); }
.opz-periodo input:checked + .opz-corpo {
  background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--ombra-m);
}
.opz-periodo input:focus-visible + .opz-corpo { outline: 2px solid var(--verde); outline-offset: 2px; }
.periodo-date { margin-top: var(--sp-3); }
/* .griglia-2 imposta display:grid e batterebbe l'attributo hidden. */
.periodo-date[hidden] { display: none !important; }

/* Elenco: le sedute che non ricadono nella settimana mostrata restano
   visibili (si devono poter correggere) ma in secondo piano. */
.riga-allen.fuori-settimana td { opacity: 0.55; }
.per-sempre { color: var(--grigio); font-style: italic; }

/* Orario: i due select affiancati con la durata calcolata di fianco. */
.riga-orario { display: flex; align-items: center; gap: var(--sp-2); }
.riga-orario select { flex: 1; min-width: 0; }
.freccia-orario { color: var(--grigio); font-weight: 700; }
.durata-orario {
  background: var(--verde-chiaro); color: var(--verde-scuro);
  border-radius: 999px; padding: var(--sp-1) var(--sp-3); font-size: var(--testo-s); font-weight: 700; white-space: nowrap;
}
.durata-orario.errata { background: var(--err-bg); color: var(--err-testo); }

/* Scelta del campo e dei giorni: pulsanti al posto di tendine e multiselect
   (col dito una tendina multipla è inutilizzabile). L'input resta nel markup,
   nascosto: il form continua a leggerlo e form.reset() funziona. */
.scelta-campi { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.scelta-giorni { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.opz-campo, .opz-giorno { cursor: pointer; }
.opz-campo input, .opz-giorno input { position: absolute; opacity: 0; pointer-events: none; }
.opz-campo .opz-corpo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: var(--sp-2) var(--sp-4); font-size: var(--testo-m); font-weight: 700; color: var(--testo);
  box-shadow: var(--ombra-s); transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.opz-giorno .opz-corpo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; background: var(--card);
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: var(--sp-2); font-size: var(--testo-m); font-weight: 700; color: var(--testo);
  box-shadow: var(--ombra-s); transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.opz-campo:hover .opz-corpo, .opz-giorno:hover .opz-corpo { transform: translateY(-1px); }
/* Selezionato: il campo prende la sua tinta, il giorno il verde dell'app. */
.opz-campo input:checked + .opz-corpo {
  background: var(--tinta); color: var(--tinta-testo); border-color: transparent; box-shadow: var(--ombra-m);
}
.opz-giorno input:checked + .opz-corpo {
  background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--ombra-m);
}
.opz-campo input:focus-visible + .opz-corpo, .opz-giorno input:focus-visible + .opz-corpo {
  outline: 2px solid var(--verde); outline-offset: 2px;
}

/* Il pannello dei filtri sta SOPRA al tabellone, non di fianco: a fianco
   rubava larghezza proprio alla griglia, che e' la cosa da guardare. I quattro
   gruppi si dividono la riga in colonne e dentro ognuna i pulsanti restano
   incolonnati, cosi' si legge «Tipologia: queste voci» a colpo d'occhio. */
.board-layout { display: block; }
.board-colonna { min-width: 0; }
.pannello-filtri {
  background: var(--card); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: var(--sp-4);
  box-shadow: var(--ombra-s);
  /* Il distacco dal tabellone e' voluto e generoso: sotto comincia un'altra
     cosa, e va vista come tale. */
  margin: 0 0 var(--sp-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
}
/* Titolo e nota valgono per tutto il pannello: stanno su una riga loro,
   sopra alle colonne. */
.pannello-tit {
  grid-column: 1 / -1;
  margin: 0; font-size: var(--testo-s); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--verde-scuro);
}
.pannello-nota { grid-column: 1 / -1; margin: calc(var(--sp-2) * -1) 0 0; }
.pannello-filtri .filtri-blocco {
  flex-direction: column; align-items: stretch;
  gap: var(--sp-2); margin: 0;
}
.pannello-filtri .filtri-eti { min-width: 0; }
.pannello-filtri .filtri-campo,
.pannello-filtri .filtri-squadra,
.pannello-filtri .filtri-fascia,
.pannello-filtri .filtri-tipo { flex-direction: column; flex-wrap: nowrap; }
.pannello-filtri .filtro-campo,
.pannello-filtri .filtro-squadra,
.pannello-filtri .filtro-fascia,
.pannello-filtri .filtro-tipo { width: 100%; justify-content: flex-start; }
.pannello-filtri .filtro-conta { margin-left: auto; }
body.dark .pannello-filtri { background: var(--bg2); }

/* Da computer il clic sulla riga porta gia' nel form: una matita in piu' su
   ogni riga sarebbe un comando che ripete quello che si fa gia' cliccando. */
.solo-telefono { display: none; }

/* Gli stessi pulsanti nella pagina Scadenze, dove le squadre non hanno una
   tinta loro: il pallino resta, ma neutro — serve solo a tenere allineate le
   etichette come negli altri filtri. */
.filtri-scadenze { margin-bottom: var(--sp-5); }
.filtri-scadenze .pallino { background: var(--bordo); }
.filtri-scadenze .filtro-squadra.attivo .pallino { background: rgba(255,255,255,0.85); }

/* La schermata che chiede la password della Contabilita'. Non e' il login —
   si e' gia' dentro al programma — quindi resta una card come le altre, solo
   stretta e centrata: si sta bussando a una porta, non entrando in casa. */
.lucchetto { max-width: 420px; margin: var(--sp-6) auto; text-align: center; }
.lucchetto-ico { font-size: 40px; line-height: 1; margin-bottom: var(--sp-2); }
.lucchetto h2 { margin: 0 0 var(--sp-2); color: var(--verde-scuro); }
.lucchetto .campo { text-align: left; margin: var(--sp-4) 0 var(--sp-3); }
.lucchetto input[type="password"] {
  font-size: var(--testo-l); letter-spacing: 2px; text-align: center;
}
.lucchetto .btn { width: 100%; }
.lucchetto .errore-inline { margin: 0 0 var(--sp-3); }

/* Filtri del tabellone (campo e squadra): pulsanti a pillola, uno attivo per volta. */
.filtri-blocco { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); flex-wrap: wrap; }
.filtri-eti {
  font-size: var(--testo-xs); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--grigio); min-width: 62px;
}
.filtri-campo, .filtri-squadra, .filtri-fascia, .filtri-categoria, .filtri-tipo { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex: 1; }
.filtro-campo, .filtro-squadra, .filtro-fascia, .filtro-categoria, .filtro-tipo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--card); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: var(--sp-2) var(--sp-3); font-weight: 700; font-size: var(--testo-s); cursor: pointer;
  box-shadow: var(--ombra-s); transition: background .12s ease, transform .1s ease, color .12s ease, box-shadow .12s ease;
}
.filtro-campo:hover, .filtro-squadra:hover, .filtro-fascia:hover, .filtro-categoria:hover, .filtro-tipo:hover { transform: translateY(-1px); }
/* Il filtro scelto si accende in arancione, uguale per campo, squadra e fascia:
   la tinta di ciò che rappresenta resta nel pallino, così «quale filtro è
   attivo» non si confonde col colore della squadra o del campo. */
.filtro-campo.attivo, .filtro-squadra.attivo, .filtro-fascia.attivo, .filtro-categoria.attivo, .filtro-tipo.attivo {
  background: linear-gradient(135deg, #f0a03c, #d97b12);
  color: #fff; border-color: transparent; box-shadow: var(--ombra-m);
}
/* "Tutti / Tutte" non ha una tinta propria: da attivo usa il verde dell'app. */
/* Su «Tutti/Tutte» e sulle fasce il pallino non rappresenta niente: da attivo
   diventa bianco per non sembrare una tinta scelta. */
.filtro-campo[data-campo=""].attivo .pallino, .filtro-squadra[data-squadra=""].attivo .pallino,
.filtro-tipo[data-tipo=""].attivo .pallino,
.filtro-categoria[data-cat=""].attivo .pallino,
.filtro-squadra[data-squadra="__nessuna__"].attivo .pallino,
.filtro-fascia.attivo .pallino { background: rgba(255,255,255,0.85) !important; }
/* Quante sedute contiene il filtro. */
.filtro-conta {
  background: rgba(0,0,0,0.07); border-radius: 999px;
  padding: 1px var(--sp-2); font-size: var(--testo-xs); font-weight: 800; min-width: 20px; text-align: center;
}
.filtro-campo.attivo .filtro-conta, .filtro-squadra.attivo .filtro-conta,
.filtro-tipo.attivo .filtro-conta,
.filtro-fascia.attivo .filtro-conta, .filtro-categoria.attivo .filtro-conta { background: rgba(255,255,255,0.30); }
/* Pallino colorato che identifica campo/squadra nel pulsante filtro. */
.pallino { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); flex-shrink: 0; }
/* Righe dell'elenco allenamenti: cliccabili per modificare. */
.riga-allen { cursor: pointer; }
.riga-allen:hover { background: var(--bg2); }

/* Tabellone allenamenti (stile Excel, look moderno) */
.tabellone-wrap { overflow-x: auto; border-radius: var(--raggio); box-shadow: var(--ombra-m); background: var(--card); border: 1px solid var(--bordo); }
.tabellone { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }
.tabellone th, .tabellone td { border-right: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); padding: 0; }
.tabellone th:last-child, .tabellone td:last-child { border-right: none; }
.tabellone tbody tr:last-child td { border-bottom: none; }
.tabellone thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--grad); color: #fff;
  font-size: var(--testo-m); font-weight: 800; padding: var(--sp-2);
  text-transform: uppercase; letter-spacing: 0.4px;
  border-right-color: rgba(255,255,255,0.18);
}
.th-giorno { display: block; }
/* Colonna del giorno corrente: etichetta "oggi" e fondo appena più caldo. */
.th-oggi {
  display: inline-block; margin-top: var(--sp-1);
  background: rgba(255,255,255,0.28); border-radius: 999px;
  padding: 1px var(--sp-2); font-size: 9.5px; letter-spacing: 0.5px;
}
.tabellone td.col-oggi { background: rgba(27,158,84,0.05); }
.tabellone .tab-ora {
  position: sticky; left: 0; z-index: 1;
  background: var(--bg2); font-weight: 800; font-size: var(--testo-xs); text-align: center;
  width: 58px; color: var(--grigio); padding: var(--sp-1);
}
/* Solo le ore tonde portano l'etichetta: il resto della colonna resta pulito. */
.tabellone .tab-ora.ora-tonda { color: var(--verde-scuro); }
.tabellone tbody tr:nth-child(even) .tab-ora { background: var(--bg); }
.tabellone td { height: 32px; vertical-align: stretch; }
.cella { display: flex; flex-direction: column; gap: 2px; height: 100%; min-height: 32px; padding: 2px var(--sp-1); }
.chip {
  flex: 1; border-radius: 0; font-size: var(--testo-xs); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.05; padding: 2px var(--sp-1); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
  transition: transform .1s ease, filter .12s ease;
}
/* Angoli tondi solo agli estremi: le fasce di una stessa seduta si leggono come un blocco unico. */
.chip-inizio { border-radius: var(--raggio-s) var(--raggio-s) 0 0; }
.chip-fine { border-radius: 0 0 var(--raggio-s) var(--raggio-s); }
.chip-inizio.chip-fine { border-radius: var(--raggio-s); }
.chip:hover { transform: scale(1.03); filter: saturate(1.1); }
/* Tabellone dei campi a blocchi: ogni attivita' e' un riquadro solo, alto
   quanto dura; quelle che si accavallano nello stesso giorno stanno affiancate
   (la colonna del giorno si allarga quanto serve e il tabellone scorre di lato). */
.tabellone-blocchi td { height: auto; vertical-align: top; }
/* Linea netta fra un giorno e l'altro: le righe delle mezz'ore restano
   leggere, i giorni si distinguono a colpo d'occhio. */
.tabellone-blocchi tbody td:not(:last-child) {
  border-right: 2px solid color-mix(in srgb, var(--grigio) 45%, transparent);
}
.tabellone-blocchi thead th:not(:last-child) { border-right: 2px solid rgba(255,255,255,0.35); }
.tabellone-blocchi .tab-ora { padding: 0; vertical-align: top; }
.ore-blocchi .ora-blocco {
  box-sizing: border-box; padding-top: 2px; font-size: 10.5px; font-weight: 600;
  color: var(--grigio); opacity: .75; border-bottom: 1px solid var(--bordo);
}
.ore-blocchi .ora-blocco.ora-tonda { color: var(--verde-scuro); font-weight: 800; opacity: 1; }
.giorno-blocchi {
  position: relative;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent calc(var(--banda) - 1px),
    var(--bordo) calc(var(--banda) - 1px), var(--bordo) var(--banda));
}
.blocco-cal {
  position: absolute; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 3px 5px 3px 6px; border-left: 4px solid; border-radius: var(--raggio-s);
  font-size: var(--testo-xs); line-height: 1.15;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: filter .12s ease, box-shadow .12s ease;
}
.blocco-cal:hover { z-index: 3; filter: saturate(1.15); box-shadow: 0 3px 10px rgba(0,0,0,0.22); }
.blocco-cal > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-nome { font-weight: 800; }
.bc-nome .ic-tipo { margin-right: 3px; }
.bc-ora { font-weight: 600; opacity: .85; }
.bc-campo {
  font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
/* Mezz'ora sola: ci sta solo il nome (il resto e' nel suggerimento). */
.blocco-basso { justify-content: center; padding-top: 1px; padding-bottom: 1px; }
.blocco-basso .bc-ora, .blocco-basso .bc-campo { display: none; }
.tabellone-vuoto { padding: var(--sp-3); margin: 0; }

/* Pastiglie del tabellone e voci dell'agenda: si cliccano per correggere
   quell'attivita', come una riga dell'elenco. La manina e' l'unico invito:
   dentro una pastiglia alta pochi millimetri non ci sta altro. */
.voce-calendario { cursor: pointer; }
.agenda-voce.voce-calendario:hover { filter: saturate(1.1) brightness(0.98); }

/* Agenda per telefono: una scheda per giorno, mostrata al posto della griglia. */
.agenda-allen { display: none; }
.agenda-giorno {
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); box-shadow: var(--ombra-s);
}
.agenda-giorno.oggi { border-color: var(--verde); }
.agenda-tit {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--testo-s); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--verde-scuro); margin-bottom: var(--sp-2);
}
.agenda-tit .th-oggi { background: var(--verde-chiaro); color: var(--verde-scuro); margin: 0; }
.agenda-voce {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  border-left: 4px solid transparent; border-radius: var(--raggio-s);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--testo-m);
}
.agenda-voce:last-child { margin-bottom: 0; }
.agenda-ora { font-weight: 800; font-variant-numeric: tabular-nums; }
.agenda-squadra { font-weight: 700; flex: 1; }
.agenda-campo { font-size: var(--testo-s); font-weight: 700; opacity: 0.8; }

/* Badge del campo nell'elenco: la tinta arriva dai Campi (Impostazioni). */
.badge.badge-campo { border: 1px solid rgba(0, 0, 0, 0.06); }

/* Impostazioni → Campi di allenamento */
.tab-campi .in-campo-nome { width: 100%; min-width: 120px; }
.tab-campi .td-colore { white-space: nowrap; }
.tab-campi input[type="color"] {
  width: 38px; height: 28px; padding: 0; border: 1px solid var(--bordo);
  border-radius: 6px; background: none; cursor: pointer; vertical-align: middle;
}
.anteprima-campo {
  display: inline-block; margin-left: var(--sp-2); padding: 2px var(--sp-3); border-radius: 999px;
  font-size: var(--testo-s); font-weight: 700; border: 1px solid rgba(0, 0, 0, 0.06);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}
.switch-campo { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.switch-campo span { font-size: var(--testo-s); color: var(--grigio); }
.tab-campi .td-usi, .tab-campi .td-attivo { white-space: nowrap; }
#form-campo input[type="color"] { width: 44px; height: 34px; }

/* ============================================================
   DARK MODE — ridefinisce le variabili e le superfici bianche
   ============================================================ */
body.dark {
  /* Al buio la tinta chiara del marchio non puo' essere chiara: diventa il
     suo fondo scuro. La ricalcola `tema.js` insieme alle altre. */
  --brand-chiaro: #123626;
  --bg: #0f1613;
  --bg2: #16211c;
  --card: #16211c;
  --testo: #e7efe9;
  --grigio: #9db0a6;
  --bordo: #26332c;

  --ok-bg: #123120; --ok-testo: #4fd08a;
  --warn-bg: #3a2c12; --warn-testo: #e0a94a;
  --err-bg: #3a1c19; --err-testo: #f08a7d;
  --neutro-bg: #222f29; --neutro-testo: #9db0a6;
}
body.dark {
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(20, 184, 166, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(27, 158, 84, 0.12), transparent 55%),
    var(--bg);
}
body.dark .sidebar { background: rgba(22, 33, 28, 0.9); border-right-color: var(--bordo); }
body.dark .nav-icon { background: rgba(255, 255, 255, 0.10); }
body.dark .nav-link:hover { background: rgba(255, 255, 255, 0.10); }
body.dark .card,
body.dark .form,
body.dark .tabella,
body.dark .sezione-tutori,
body.dark .ric,
body.dark .blocco-certificato,
body.dark .sezione-form,
body.dark .export-bar,
body.dark .tabellone,
body.dark .tabellone-wrap,
body.dark .btn-secondario { background: var(--card); }
body.dark .tabella th,
body.dark .tabellone thead th,
body.dark .tabellone .tab-ora { background: var(--bg2); }
body.dark .gruppo-giocatore { background: rgba(27, 158, 84, 0.07); border-color: #2f5d45; }
body.dark .pill-giocatore { background: rgba(27, 158, 84, 0.16); border-color: #2f5d45; color: #6fd6a0; }
body.dark .campo input, body.dark .campo select, body.dark .campo textarea,
body.dark .form-inline input, body.dark .form-inline select,
body.dark .ricerca, body.dark .filtro-ruolo,
body.dark input[type="date"], body.dark input[type="file"] {
  background: var(--bg2); color: var(--testo);
}
body.dark .btn-piccolo { background: var(--card); color: var(--testo); }
body.dark .tabella tbody tr:hover { background: #1c2a23; }
/* Allenamenti: le pastiglie verdi hanno bisogno di un testo chiaro sul fondo scuro. */
body.dark .riepilogo-testa, body.dark .durata-orario { color: #6fd39b; }
body.dark .agenda-giorno, body.dark .opz-campo .opz-corpo, body.dark .opz-giorno .opz-corpo { background: var(--card); }
body.dark .opz-periodo .opz-corpo, body.dark .vai-a-data input[type="date"] { background: var(--card); }
body.dark .opz-tipo .opz-corpo { background: var(--card); }
body.dark .opz-fascia .opz-corpo { background: var(--card); }
body.dark .btn-barra, body.dark .perm-voce select, body.dark .opz-squadra .opz-corpo { background: var(--card); }
body.dark .badge-tipo.bt-partita { background: rgba(47,109,176,0.22); color: #9cc6ef; }
body.dark .badge-tipo.bt-evento { background: rgba(122,75,182,0.22); color: #c9a8ef; }
body.dark .tabellone td.col-oggi { background: rgba(27,158,84,0.10); }
body.dark .filtro-conta { background: rgba(255,255,255,0.10); }
/* i colori dei campi allenamento restano leggibili anche in scuro */

/* ============================================================
   ACCESSO (Sessione M3) — schermata di login e utente in topbar
   ============================================================ */
.login-schermo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(20, 184, 166, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(27, 158, 84, 0.12), transparent 55%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-l);
  padding: var(--sp-6) 28px;
  text-align: center;
  animation: entra .25s ease;
}
.login-card h1 { margin: var(--sp-2) 0 2px; font-size: var(--testo-2xl); color: var(--testo); }
.login-logo {
  width: 54px; height: 54px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; border-radius: var(--raggio);
  background: var(--grad); box-shadow: var(--ombra-m);
}
.login-sotto { margin: 0 0 var(--sp-4); color: var(--grigio); font-size: var(--testo-m); }
.login-card .campo { text-align: left; margin-bottom: var(--sp-3); }
.login-errore { min-height: 18px; margin: var(--sp-1) 0 var(--sp-2); color: var(--err-testo); font-size: var(--testo-s); }
.login-btn { width: 100%; }

.area-utente { display: inline-flex; align-items: center; gap: var(--sp-2); }
.utente-chip {
  font-size: var(--testo-s);
  color: #eafff2;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  white-space: nowrap;
}
/* Prova di un ruolo (solo amministratori): chip e icona in ambra, così non si
   dimentica di essere «travestiti» — l'icona resta visibile anche da telefono,
   dove il chip è nascosto. */
/* Selettore della stagione in topbar e striscia delle stagioni passate. */
.area-stagione { display: inline-flex; align-items: center; }
.stagione-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--testo-s); color: #eafff2; white-space: nowrap;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: var(--sp-1) var(--sp-3); border-radius: 999px;
}
.stagione-chip select {
  background: transparent; color: inherit; border: none; font: inherit;
  font-weight: 600; cursor: pointer; padding: 0 2px;
}
.stagione-chip select option { color: var(--testo); background: var(--card); }
.stagione-chip.chiusa { background: #ffd27a; color: #4a2f00; border-color: #ffd27a; }
.stagione-chip.preparazione { background: #cfe6ff; color: #0b3a66; border-color: #cfe6ff; }
.striscia-stagione {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: #fff3d6; color: #4a2f00; border-bottom: 1px solid #f0d58f;
  font-size: var(--testo-m); text-align: center;
}
.striscia-stagione.preparazione { background: #e3f0ff; color: #0b3a66; border-bottom-color: #b9d6f7; }
.utente-chip.in-prova { background: #ffd27a; color: #4a2f00; border-color: #ffd27a; font-weight: 600; }
.simula-box { position: relative; display: inline-flex; }
.btn-simula { gap: 0; font-size: var(--testo-l); }
.btn-simula .simula-frecce { font-size: var(--testo-s); margin-left: 1px; font-weight: 700; }
.btn-simula.in-prova { background: #ffd27a; color: #4a2f00; box-shadow: none; }
.menu-simula {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 230px; max-width: 300px;
  background: var(--card); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  box-shadow: var(--ombra-l);
  padding: var(--sp-2);
}
.menu-simula[hidden] { display: none; }
.menu-simula .hint { margin: 0 var(--sp-2) var(--sp-2); }
.menu-simula-tit { margin: var(--sp-1) var(--sp-2); font-weight: 700; font-size: var(--testo-m); }
.voce-simula {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left;
  background: none; border: none; color: inherit; cursor: pointer;
  padding: var(--sp-2); border-radius: 6px; font-size: var(--testo-m);
  min-height: 36px;
}
.voce-simula:hover { background: var(--bg2); }
.voce-simula.scelta { font-weight: 700; color: var(--brand-scuro); }
.segno-simula { width: 1em; display: inline-block; }

/* ============================================================
   SOLA LETTURA — nasconde i comandi di modifica (solo nel contenuto,
   #view: la topbar e la schermata di login non vengono toccate)
   ============================================================ */
body.sola-lettura #view button[type="submit"],
body.sola-lettura #view button.btn,
body.sola-lettura #view a.btn,
body.sola-lettura #view .btn-pericolo,
body.sola-lettura #view .btn-piccolo,
body.sola-lettura #view .btn-cestino,
body.sola-lettura #view .btn-matita,
body.sola-lettura #view .rimuovi-chip,
body.sola-lettura #view #btn-import,
body.sola-lettura #view #btn-tabulato,
body.sola-lettura #view #btn-scatta,
body.sola-lettura #view #btn-scatta-mat,
body.sola-lettura #view input[type="file"] {
  display: none !important;
}
/* Stampa ed esportazioni restano disponibili: non modificano nulla, e chi
   consulta deve poter stampare un modulo o un report. */
body.sola-lettura #view .btn-export { display: inline-block !important; }
body.sola-lettura #view .btn-barra.btn-export { display: inline-flex !important; }
/* Una pagina puo' ospitare due sezioni con permessi diversi: dentro
   all'Inventario c'e' «Richiesta materiale», che si concede a parte. Il corpo
   della pagina e' in sola lettura solo se non si puo' scrivere in NESSUNA
   delle due, quindi ogni scheda si marca da se' con `.solo-lettura-qui` e
   nasconde i propri comandi. Stesse regole di `body.sola-lettura`, applicate
   pero' a un pezzo solo di pagina. */
#view .solo-lettura-qui button[type="submit"],
#view .solo-lettura-qui button.btn,
#view .solo-lettura-qui a.btn,
#view .solo-lettura-qui .btn-pericolo,
#view .solo-lettura-qui .btn-piccolo,
#view .solo-lettura-qui .btn-secondario,
#view .solo-lettura-qui .btn-cestino,
#view .solo-lettura-qui .btn-matita,
#view .solo-lettura-qui input[type="file"] {
  display: none !important;
}
#view .solo-lettura-qui .btn-export { display: inline-block !important; }
#view .solo-lettura-qui .btn-barra.btn-export { display: inline-flex !important; }
#view .solo-lettura-qui form input,
#view .solo-lettura-qui form select,
#view .solo-lettura-qui form textarea,
#view .solo-lettura-qui .tabella input,
#view .solo-lettura-qui .tabella select {
  pointer-events: none;
  opacity: 0.75;
}
/* ...e all'incontrario: una scheda scrivibile dentro a una pagina che per il
   resto e' in sola lettura (l'inventario in lettura, le richieste in
   modifica). Senza questo il form ci sarebbe ma non si potrebbe compilare. */
body.sola-lettura #view .pagina:not(.solo-lettura-qui) button[type="submit"],
body.sola-lettura #view .pagina:not(.solo-lettura-qui) button.btn,
body.sola-lettura #view .pagina:not(.solo-lettura-qui) .btn-secondario,
body.sola-lettura #view .pagina:not(.solo-lettura-qui) .btn-piccolo {
  display: inline-block !important;
}
body.sola-lettura #view .pagina:not(.solo-lettura-qui) .btn-cestino {
  display: inline-flex !important;
}
body.sola-lettura #view .pagina:not(.solo-lettura-qui) form input,
body.sola-lettura #view .pagina:not(.solo-lettura-qui) form select,
body.sola-lettura #view .pagina:not(.solo-lettura-qui) form textarea,
body.sola-lettura #view .pagina:not(.solo-lettura-qui) .tabella input,
body.sola-lettura #view .pagina:not(.solo-lettura-qui) .tabella select {
  pointer-events: auto;
  opacity: 1;
}

/* I form restano visibili come "scheda di consultazione", ma inerti. */
body.sola-lettura #view form input,
body.sola-lettura #view form select,
body.sola-lettura #view form textarea,
body.sola-lettura #view .tabella input,
body.sola-lettura #view .tabella select {
  pointer-events: none;
  opacity: 0.75;
}

/* ============================================================
   CELLULARE — menù a scomparsa e adattamenti touch
   ============================================================ */
@media (max-width: 780px) {
  .griglia-2 { grid-template-columns: 1fr; }
  .griglia-3 { grid-template-columns: 1fr; }

  /* Topbar più compatta: mostra l'hamburger, nasconde ciò che è secondario. */
  .topbar { padding: 0 12px; }
  .topbar-azioni { gap: 6px; }
  .icona-topbar.hamburger { display: inline-flex; }
  .contesto { display: none; }
  .utente-chip { display: none; }
  /* In alto solo ⏻, tema e ⚙️: il resto è nel menu (.nav-telefono). La prova
     di un ruolo resta visibile solo se è in corso, per non dimenticarla. */
  .topbar-azioni #btn-notifiche, .topbar-azioni #btn-aiuto,
  .btn-simula:not(.in-prova) { display: none; }
  .nav-telefono { display: flex; }
  .brand-societa { display: none; }
  .brand { font-size: 16px; }

  /* La sidebar diventa un pannello che scorre da sinistra. */
  .layout { display: block; }
  .sidebar {
    position: fixed;
    top: 62px; left: 0; bottom: 0;
    width: 250px; max-width: 82vw;
    background: var(--card);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 40;
    box-shadow: var(--ombra-l);
    overflow-y: auto;
  }
  .sidebar.aperta { transform: translateX(0); }
  .nav-link { padding: 13px 12px; font-size: 15.5px; }

  .overlay-menu.visibile {
    display: block;
    position: fixed; inset: 62px 0 0 0;
    background: rgba(8, 20, 14, 0.45);
    z-index: 35;
  }

  .content { padding: 18px 14px; }
  .pagina, .home, .card { max-width: 100%; }
  .home h1 { font-size: 24px; }
  .pagina-testa h1 { font-size: 21px; }

  /* Su iOS un font < 16px fa "zoomare" il campo al focus: lo evitiamo. */
  .campo input, .campo select, .campo textarea,
  .ricerca, .filtro-ruolo,
  .form-inline input, .form-inline select,
  input[type="date"] { font-size: 16px; }

  /* Le tabelle larghe scorrono in orizzontale invece di sbordare. */
  /* Le tabelle non ancora convertite continuano a scorrere di lato. */
  .tabella { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* ---- Tabelle a schede -------------------------------------------------
     Quelle marcate `a-schede` non scorrono: ogni riga diventa una scheda,
     col nome in cima e sotto «etichetta: valore» uno per riga. Le etichette
     arrivano dall'intestazione, attaccate alle celle da `js/schede.js`. */
  .tabella.a-schede,
  .tabella.a-schede tbody,
  .tabella.a-schede td { display: block; width: auto; }
  /* La riga e' una colonna di valori, ma incolonnata con flex e non con
     `block`: serve a poter portare il titolo in cima (`order`) anche quando
     nella tabella sta in mezzo — in Inventario il nome del materiale e' la
     sesta colonna, dopo foto, codici e categoria. */
  .tabella.a-schede tr { display: flex; flex-wrap: wrap; width: auto; }
  .tabella.a-schede td { width: 100%; }
  .tabella.a-schede { white-space: normal; overflow: visible; border-spacing: 0; }
  /* L'intestazione sparisce: il suo testo e' gia' dentro a ogni cella. Resta
     pero' la riga dei FILTRI, che non e' un'etichetta ma un comando: diventa
     una colonna di campi, ognuno col nome della sua colonna sopra. */
  .tabella.a-schede colgroup { display: none; }
  .tabella.a-schede .maniglia-col { display: none; }
  .tab-anagrafica.a-schede td { white-space: normal; overflow: visible; }
  .tabella.a-schede thead { display: block; }
  .tabella.a-schede thead tr:not(.riga-filtri) { display: none; }
  /* Due filtri per riga: con sette campi uno sotto l'altro l'elenco
     comincerebbe a meta' della seconda schermata. */
  .tabella.a-schede thead tr.riga-filtri {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--sp-2); margin-bottom: var(--sp-4);
    border: 0; background: none;
  }
  .tabella.a-schede thead tr.riga-filtri th {
    display: block; padding: 0; border: 0; background: none; text-align: left;
  }
  /* Le celle senza comando non lasciano un buco nella colonna dei filtri. */
  .tabella.a-schede thead tr.riga-filtri th:not([data-eti]) { display: none; }
  .tabella.a-schede thead tr.riga-filtri th::before {
    content: attr(data-eti); display: block; margin-bottom: 2px;
    font-size: var(--testo-xs); font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--grigio);
  }
  .tabella.a-schede thead tr.riga-filtri .filtro-col {
    width: 100%; min-height: var(--tocco);
  }
  .tabella.a-schede tr {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    box-shadow: var(--ombra-s);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
  }
  .tabella.a-schede tr:hover { background: var(--card); }
  .tabella.a-schede td {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); padding: var(--sp-1) 0; border: 0;
    font-size: var(--testo-m); text-align: left;
  }
  .tabella.a-schede td::before {
    content: attr(data-eti);
    flex: 0 0 auto;
    font-size: var(--testo-xs); font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--grigio);
  }
  /* Una cella senza etichetta (la colonna delle azioni) non ne mostra una
     finta: sta da sola, allineata a destra. */
  .tabella.a-schede td:not([data-eti]) { justify-content: flex-end; }
  .tabella.a-schede td:not([data-eti])::before { content: none; }
  /* Le prime colonne sono il titolo della scheda (cognome e nome insieme):
     grandi, in linea, senza etichetta. Il filo di separazione lo mette la
     prima cella dopo di loro, altrimenti finirebbe in mezzo al titolo. */
  .tabella.a-schede td.titolo-scheda {
    order: -1;                 /* in cima, sempre */
    width: auto; flex: 0 0 auto;
    font-size: var(--testo-l); font-weight: 700;
    padding: 0 var(--sp-2) var(--sp-2) 0;
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--bordo);
  }
  .tabella.a-schede td.titolo-scheda::before { content: none; }
  /* Una cella vuota non merita una riga: fra un'etichetta e il nulla si
     capisce meno che senza. */
  .tabella.a-schede td:empty { display: none; }
  /* --- Schede SINTETICHE: si apre quella che serve -------------------------
     Un elenco di attivita' su un telefono e' una colonna lunghissima se ogni
     scheda mostra tutte le sue sei voci. Marcata `sintetica`, la scheda
     chiusa mostra il solo titolo (giorno, orario, squadra, tipologia) e il
     resto — campo, periodo e i comandi — compare toccandola. Non serve
     marcare le celle da nascondere: `data-eti` ce l'hanno gia' tutte quelle
     che non sono ne' titolo ne' comandi, e i comandi sono le uniche altre. */
  .tabella.a-schede.sintetica tbody tr { cursor: pointer; }
  /* Si nasconde per quello che una cella E', non per quello che non e':
     `data-eti` ce l'hanno le celle di dettaglio (glielo mette la marcatura
     automatica) e `celle-comandi` la dichiara chi scrive la tabella. Con la
     regola scritta al contrario — «tutto cio' che non e' titolo» — una
     scheda non ancora marcata si sarebbe svuotata del tutto: si vedeva un
     riquadro vuoto con dentro solo la freccina. Cosi', nel caso peggiore,
     la scheda mostra tutto come prima. */
  .tabella.a-schede.sintetica tbody tr:not(.aperta):not(.riga-intera) td[data-eti],
  .tabella.a-schede.sintetica tbody tr:not(.aperta):not(.riga-intera) td.celle-comandi {
    display: none;
  }
  /* Chiusa, il titolo e' l'unica cosa che si vede: niente filo di
     separazione sotto, che separerebbe dal nulla. */
  .tabella.a-schede.sintetica tbody tr:not(.aperta) td.titolo-scheda {
    border-bottom: 0; margin-bottom: 0; padding-bottom: 0;
  }
  /* La freccina dice che c'e' dell'altro sotto, e gira quando si apre. */
  .tabella.a-schede.sintetica tbody tr:not(.riga-intera)::after {
    content: "▾";
    /* `order: -1` la tiene sulla riga del titolo anche a scheda aperta:
       senza, aprendo finirebbe da sola in fondo, staccata da cio' che apre. */
    order: -1;
    margin-left: auto; align-self: center;
    font-size: var(--testo-m); color: var(--grigio);
    transition: transform .15s ease;
  }
  .tabella.a-schede.sintetica tbody tr.aperta::after { transform: rotate(180deg); }
  /* Aperta, i comandi stanno su una riga loro, in fondo e distanziati. */
  .tabella.a-schede.sintetica tbody tr.aperta td.celle-comandi {
    gap: var(--sp-2); padding-top: var(--sp-2);
  }
  /* La matita compare solo dove il tocco apre invece di modificare. */
  .solo-telefono { display: inline-flex; }
  /* Le righe che occupano tutta la larghezza (messaggi, intestazioni di
     gruppo) restano righe, non diventano schede. */
  .tabella.a-schede tr.riga-intera {
    background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
  }
  .tabella.a-schede tr.riga-intera td { display: block; }
  .tabella.a-schede tr.riga-intera td::before { content: none; }
  /* Dentro a una scheda i comandi si toccano col dito. */
  .tabella.a-schede .btn-cestino,
  .tabella.a-schede .btn-matita,
  .tabella.a-schede .btn-occhio,
  .tabella.a-schede .btn-azione {
    width: var(--tocco); height: var(--tocco); min-width: var(--tocco);
  }
  .tabella.a-schede select, .tabella.a-schede input { min-height: var(--tocco); }

  /* ---- Bersagli tattili -------------------------------------------------
     Un pulsante a icona da 30x28 e' comodo col mouse e sbagliato col dito:
     44px e' la misura consigliata da Apple e da Google, ed e' quella che
     evita di premere il cestino della riga sotto. Vale in tutta la pagina,
     non solo dentro alle tabelle. */
  #view .btn-cestino, #view .btn-matita, #view .btn-occhio,
  #view .btn-azione, #view .btn-stampa, #view .btn-scarica, #view .btn-barra {
    width: var(--tocco); height: var(--tocco); min-width: var(--tocco);
  }
  /* Anche i comandi con l'etichetta e i campi dei form: la riga si tocca. */
  #view .btn, #view .btn-secondario, #view .btn-piccolo, #view .btn-pericolo,
  #view button[type="submit"] { min-height: var(--tocco); }
  #view .campo input, #view .campo select, #view .campo textarea,
  #view .form-inline input, #view .form-inline select {
    min-height: var(--tocco);
  }
  /* Le schede della barra a linguette (Inventario) e i pulsanti dei filtri. */
  #view .tab { min-height: var(--tocco); }
  #view .filtro-campo, #view .filtro-squadra, #view .filtro-tipo,
  #view .filtro-fascia, #view .filtro-categoria { min-height: var(--tocco); }
  .form-azioni { flex-wrap: wrap; }

  /* ----- Allenamenti da telefono ----- */
  /* La griglia settimanale a 7 colonne non si legge su uno schermo stretto:
     al suo posto compare l'agenda giorno per giorno. */
  .tabellone-wrap { display: none; }
  .agenda-allen { display: block; }
  .riepilogo-testa { font-size: 11.5px; padding: 4px 10px; }
  .board-testa { flex-direction: column; gap: 2px; align-items: flex-start; }
  /* I filtri diventano una colonna con i pulsanti a tutta larghezza: si toccano meglio. */
  .filtri-blocco { flex-direction: column; align-items: stretch; gap: 6px; }
  .filtri-eti { min-width: 0; }
  .filtri-campo, .filtri-squadra, .filtri-fascia, .filtri-categoria, .filtri-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Da telefono il pannello e' solo un riquadro in cima: i pulsanti restano
     due per riga come sempre. Serve nominare `.pannello-filtri` perche' la
     regola del pannello e' piu' specifica di quelle qui sopra. */
  .pannello-filtri { padding: 12px; }
  .pannello-filtri .filtri-blocco { flex-direction: column; align-items: stretch; }
  .pannello-filtri .filtri-campo,
  .pannello-filtri .filtri-squadra,
  .pannello-filtri .filtri-fascia,
  .pannello-filtri .filtri-tipo { display: grid; grid-template-columns: 1fr 1fr; }
  .pannello-filtri .filtro-campo,
  .pannello-filtri .filtro-squadra,
  .pannello-filtri .filtro-fascia,
  .pannello-filtri .filtro-tipo { width: auto; }
  .filtro-campo, .filtro-squadra, .filtro-fascia, .filtro-categoria, .filtro-tipo {
    justify-content: flex-start; padding: 11px 12px; font-size: 13.5px;
    /* Senza `min-width: 0` l'etichetta lunga («Materiale Sportivo -
       vestiario») non si accorcia coi puntini: allarga il pulsante e lo fa
       uscire dal riquadro. */
    min-width: 0;
  }
  /* Le linguette (Inventario) vanno a capo invece di uscire dallo schermo. */
  .tabs { flex-wrap: wrap; }
  .filtro-eti { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Campo e giorni a tutta larghezza, con aree grandi da toccare. */
  .scelta-campi { flex-direction: column; }
  .opz-campo .opz-corpo { width: 100%; padding: 12px 14px; font-size: 15px; }
  .scelta-giorni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .opz-giorno .opz-corpo { width: 100%; min-width: 0; padding: 12px 4px; font-size: 15px; }
  .barra-settimana { gap: 6px; }
  .sett-eti { flex: 1 1 100%; order: -1; justify-content: center; }
  .spazio-sett { display: none; }
  .scelta-fascia { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .opz-fascia .opz-corpo { width: 100%; align-items: center; padding: 10px 6px; }
  .scelta-tipo { flex-direction: column; }
  .opz-tipo .opz-corpo { width: 100%; padding: 12px 14px; font-size: 15px; }
  .scelta-periodo { flex-direction: column; }
  .opz-periodo .opz-corpo { width: 100%; padding: 12px 14px; font-size: 15px; }
  .riga-orario { flex-wrap: wrap; }
  .riga-orario select { flex: 1 1 40%; }
  .durata-orario { flex-basis: 100%; text-align: center; }
}

@media (max-width: 430px) {
  .brand-testo { display: none; }
}

/* Informativa privacy: documento da leggere e da stampare. */
.avviso-privacy {
  border-left: 5px solid #e6a700;
  background: var(--warn-bg); color: var(--warn-testo);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px;
}
.doc-privacy { max-width: 900px; line-height: 1.6; }
.doc-privacy h2.tit-privacy { margin: 0 0 4px; font-size: 20px; }
.doc-privacy .sottotitolo-privacy { margin: 0 0 4px; color: var(--grigio); font-size: 13px; }
.doc-privacy h3 {
  margin: 22px 0 8px; font-size: 15.5px; color: var(--verde-scuro);
  border-bottom: 1px solid var(--bordo); padding-bottom: 4px;
}
.doc-privacy ul { margin: 8px 0 8px 18px; padding: 0; }
.doc-privacy li { margin-bottom: 5px; }
.doc-privacy p { margin: 8px 0; }
.tab-privacy { margin: 10px 0; }
.tab-privacy td { vertical-align: top; }
.da-compilare {
  background: #fff3cd; border-bottom: 1px dashed #c0392b; color: #8a5a00;
  padding: 0 3px; border-radius: 3px;
}
.firma-privacy { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--bordo); }

/* Informativa: riquadro del consenso alle immagini, da firmare. */
.consenso-privacy {
  border: 1px solid var(--verde); border-radius: 10px; padding: 14px 16px; margin-top: 22px;
}
.consenso-privacy h3 { margin-top: 0; border: 0; color: var(--verde-scuro); }
.opzione-consenso { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.opzione-consenso .casella {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px;
  border: 1.5px solid var(--testo, #333); border-radius: 2px; background: transparent;
}
.riga-firma { color: var(--grigio); margin: 10px 0 0; }

/* Impostazioni: carta intestata, timbro e firma. */
.griglia-carta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pezzo-carta { border: 1px solid var(--bordo); border-radius: 12px; padding: 12px; background: var(--bg2); }
.pezzo-carta .sotto-titolo { margin-top: 0; }
.pezzo-carta .form-inline { flex-wrap: wrap; gap: 6px; }
.anteprima-carta {
  max-width: 100%; max-height: 90px; display: block; margin: 6px 0;
  background: #fff; border: 1px solid var(--bordo); border-radius: 6px; padding: 4px;
}
.azioni-privacy { display: inline-flex; gap: 8px; }
.stato-stampa { margin-top: 8px; font-size: 13px; }
.firma-privacy { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.firma-societa { text-align: center; }
@media (max-width: 780px) { .griglia-carta { grid-template-columns: 1fr; } }

/* Stampa: resta il solo documento, senza cornice dell'applicazione. */
@media print {
  .topbar, .sidebar, .overlay-menu, .no-stampa, .pagina-testa button { display: none !important; }
  .layout, .content, .pagina { display: block; margin: 0; padding: 0; }
  .card, .doc-privacy { box-shadow: none; border: 0; max-width: none; padding: 0; }
  body { background: #fff; color: #000; }
  .doc-privacy h3 { break-after: avoid; page-break-after: avoid; }
  .tabella { break-inside: auto; }
  .tabella tr { break-inside: avoid; page-break-inside: avoid; }
}


/* ==========================================================================
   Gestione Campi — il form come percorso guidato (v1.8.0)
   Un passaggio per volta: si compila quello aperto, si preme "Avanti" e si
   apre il successivo. I passaggi già fatti restano come righe di riepilogo,
   cliccabili per tornarci.
   ========================================================================== */
.guida-intro { margin: 0 0 12px; }
.form-guidato .passo { padding: 0; overflow: hidden; }
.passo-testa {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
}
.passo-testa:hover { background: rgba(0, 0, 0, 0.03); }
body.dark .passo-testa:hover { background: rgba(255, 255, 255, 0.05); }
.passo-num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grigio); color: #fff; font-size: 13px; font-weight: 800;
}
.passo-tit { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; }
.passo-scelta {
  flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--grigio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.passo-caret { margin-left: auto; font-size: 15px; line-height: 1; opacity: 0.55; transition: transform .15s ease; }
.passo.aperto .passo-caret { transform: rotate(180deg); }
.passo-corpo { display: none; padding: 0 16px 14px; }
/* I passaggi ancora da raggiungere non si vedono: compaiono premendo
   «Avanti →». Uno per volta, come si compila. */
.passo.futuro { display: none; }
.passo.aperto .passo-corpo { display: block; }
/* Il passaggio già a posto porta la spunta al posto del numero. */
.passo.fatto .passo-num { background: var(--verde); }
.passo.fatto .passo-num::after { content: "\2713"; }
.passo.fatto .passo-num { font-size: 0; }
.passo.fatto .passo-num::after { font-size: 13px; }
.passo-azioni {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bordo);
}
.passo-azioni .passo-avanti { margin-left: auto; }
.passo-errore { font-size: 12.5px; color: var(--err-testo); font-weight: 600; }
.passo-corpo > .campo:last-of-type { margin-bottom: 0; }
#stato-guida { color: var(--grigio); }
#btn-salva-allen[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
/* Ogni passaggio tiene la tinta che il suo blocco aveva già. */
.sf-att .passo-num { background: #7a5cd0; }
.sf-att .passo-tit { color: #5a3fb0; }
.sf-campo .passo-num { background: #e08a1e; }
.sf-campo .passo-tit { color: #b56d12; }
.sf-quando .passo-num { background: #2f6db0; }
.sf-quando .passo-tit { color: #245a91; }
.sf-periodo .passo-num { background: #0a9396; }
.sf-periodo .passo-tit { color: #087a7d; }
.passo.fatto .passo-num { background: var(--verde); }
body.dark .sf-att .passo-tit { color: #a48ce6; }
body.dark .sf-campo .passo-tit { color: #e2a63c; }
body.dark .sf-quando .passo-tit { color: #6aa4e0; }
body.dark .sf-periodo .passo-tit { color: #3cc0c3; }

/* Attività concluse: fuori dall'elenco, richiamabili con la spunta. */
.mostra-concluse { font-size: 13px; font-weight: 600; color: var(--grigio); margin-bottom: 10px; }
.mostra-concluse[hidden] { display: none; }
.riga-allen.conclusa td { opacity: 0.6; }

/* ==========================================================================
   Scadenze — sezioni a fisarmonica con il comando nell'intestazione (v1.8.0)
   ========================================================================== */
/* Il flag "Avvisa via email" sta a destra nel titolo, sempre nello stesso
   punto in tutte le sezioni. */
.toggle-sezione.con-azioni .testa-azioni { margin-left: auto; }
.toggle-sezione.con-azioni .testa-tit { min-width: 0; }
.testa-azioni { display: inline-flex; align-items: center; gap: 10px; }
/* Pulsante 🔄 «rileggi i dati» nell'intestazione di una sezione. */
.btn-aggiorna {
  background: none; border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: 2px 8px; font-size: var(--testo-l); line-height: 1.4; cursor: pointer;
}
.btn-aggiorna:hover { background: var(--bg2); }
.btn-aggiorna.in-corso { animation: gira 0.8s linear infinite; opacity: .6; }
@keyframes gira { to { transform: rotate(360deg); } }
.testa-azioni .flag-avviso { gap: 7px; }
/* Da telefono nell'intestazione ci stanno il titolo e poco altro: «Avvisa via
   email» e «Notifica sul telefono» non entravano e finivano SOPRA al titolo
   della sezione. Restano le sole iconcine — 📧 e 🔔 — che dicono la stessa
   cosa in un quarto dello spazio; le parole tornano da computer. Il significato
   resta comunque leggibile: `title` sull'interruttore (tenendolo premuto) e
   `aria-label` sulla casella per chi usa un lettore di schermo.
   La soglia è 640 e non 780: fino a lì le parole ci stanno ancora in una riga
   (provato a 780, 700 e 640), sotto cominciano a schiacciare il titolo. */
@media (max-width: 640px) {
  .testa-azioni { flex: 0 0 auto; gap: 8px; }
  .testa-azioni .eti-flag { display: none; }
  .testa-azioni .flag-avviso { gap: 5px; font-size: var(--testo-l); }
  /* Sola lettura: l'iconcina resta accesa o spenta secondo lo stato. */
  .testa-azioni .notifica-stato { margin: 0; font-size: var(--testo-l); }
  .testa-azioni .notifica-stato.spenta { opacity: 0.4; }
}
/* Il titoletto di un blocco dentro a una sezione: non è una card dentro
   un'altra card, solo una riga che divide. */
.blocco-scad { margin-top: 18px; font-size: 15px; }
.blocco-scad:first-of-type { margin-top: 4px; }
.campo-destinatari { margin-bottom: 0; }
.campo-destinatari .in-destinatari { width: 100%; }
.azioni-notifica { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.azioni-notifica .quando-parte { margin-right: auto; }

/* «Avvisa anche i diretti interessati»: la scelta di scrivere alle persone e
   alle famiglie, non solo alla lista. Sta staccata da una riga sopra perche'
   e' una decisione a se', non un'altra casella dei destinatari; la spiegazione
   sotto e' piccola ma resta sempre in vista, perche' e' quella che dice a chi
   arriva davvero il messaggio. */
.flag-interessati {
  font-size: var(--testo-m); font-weight: 600; color: var(--testo);
  padding-top: var(--sp-2); border-top: 1px solid var(--bordo);
}
.hint-interessati { margin: 0; font-size: 12.5px; color: var(--grigio); line-height: 1.45; }
/* Sotto al flag la spiegazione gli sta appesa; da sola (le rate, che il flag
   non ce l'hanno) si prende il filo sopra e l'aria che serve a staccarla. */
.flag-interessati + .hint-interessati { margin-top: -4px; }
.sel-destinatari + .hint-interessati { padding-top: var(--sp-2); border-top: 1px solid var(--bordo); }

/* La rubrica: gli utenti dell'applicazione da spuntare come destinatari. */
.sel-destinatari { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sel-eti { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--grigio); }
.chip-dest {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 7px; border-radius: 999px;
  border: 1px solid var(--bordo); background: var(--card);
  font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.chip-dest input { width: 14px; height: 14px; accent-color: var(--verde); margin: 0; }
.chip-dest:hover { border-color: var(--verde); }
.chip-dest:has(input:checked) { background: var(--verde-chiaro); border-color: var(--verde); font-weight: 600; }
body.dark .chip-dest:has(input:checked) { background: rgba(27, 158, 84, 0.22); }

/* Scadenze varie: il form in un riquadro, col flag a destra come nelle
   intestazioni delle altre sezioni. */
.sf-varia { border-left-color: #6c4bb6; }
.sf-varia > .etichetta-blocco { color: #54348f; }
body.dark .sf-varia > .etichetta-blocco { color: #a184e0; }
.form-nudo { padding: 0; background: none; border: 0; box-shadow: none; }
.riga-flag-varia { margin-top: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--bordo); }
.eti-flag-varia { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--grigio); }
.tab-varie .avviso-on { font-size: 12.5px; word-break: break-all; }

/* Quantita' modificabile dall'elenco dei materiali (v1.50.0). */
.cella-quantita { white-space: nowrap; }
.q-mat { padding: 2px 6px; text-align: right; }
.q-mat.q-salvata { outline: 2px solid #2e9d5b; background: #e6f6ec; }

/* Inventario uniforme (v1.50.5). Filtri a pulsanti allineati in colonna:
   etichetta, «Tutte», poi le voci, che andando a capo restano sotto la prima. */
.filtri-allineati .filtri-blocco { flex-wrap: nowrap; align-items: flex-start; }
.filtri-allineati .filtri-eti { flex: 0 0 96px; min-width: 96px; padding-top: 10px; }
.filtri-allineati .filtri-con-tutte { flex-wrap: nowrap; align-items: flex-start; min-width: 0; }
.filtri-allineati .filtri-con-tutte > button:first-child { flex: 0 0 104px; justify-content: center; }
.filtri-allineati .filtri-opzioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 1; min-width: 0; }
/* Elenco materiali: celle piu' strette, cosi' le 12 colonne stanno nel riquadro. */
.tabella.tab-materiali th, .tabella.tab-materiali td { padding: var(--sp-1) var(--sp-2); }
.tabella.tab-materiali .riga-labels th { white-space: nowrap; }
@media (max-width: 780px) {
  .filtri-allineati .filtri-blocco { flex-direction: column; align-items: stretch; }
  .filtri-allineati .filtri-eti { flex: none; padding-top: 0; }
  .filtri-allineati .filtri-con-tutte { display: flex; flex-direction: column; align-items: stretch; }
  .filtri-allineati .filtri-con-tutte > button:first-child { flex: none; }
  .filtri-allineati .filtri-opzioni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* Ambiente di PROVA: fascia fissa in alto (vedi backend/ambiente.py). */
.fascia-prova {
  position: sticky; top: 0; z-index: 2000;
  background: repeating-linear-gradient(45deg, #b45309 0 14px, #c2410c 14px 28px);
  color: #fff; font-weight: 700; font-size: 0.85rem; text-align: center;
  padding: 4px 16px; letter-spacing: 0.03em;
}

/* ---------- Messaggi della 2.0 (js/messaggi.js) ---------- */
.avvisi {
  position: fixed; z-index: 3000; left: 50%; bottom: var(--sp-5);
  transform: translateX(-50%); display: flex; flex-direction: column;
  gap: var(--sp-2); width: min(440px, calc(100vw - 32px)); pointer-events: none;
}
.avviso {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--card); color: var(--testo); border-radius: var(--raggio-s);
  border-left: 4px solid var(--ok-testo); box-shadow: var(--ombra-l);
  font-size: var(--testo-m); animation: avviso-entra 0.2s ease-out;
}
.avviso-errore { border-left-color: var(--err-testo); }
.avviso-info { border-left-color: var(--warn-testo); }
.avviso-testo { flex: 1; line-height: 1.4; overflow-wrap: anywhere; }
.avviso-chiudi {
  background: none; border: none; cursor: pointer; color: var(--grigio);
  font-size: 14px; padding: 2px 4px; min-height: 0;
}
.avviso.uscita { opacity: 0; transform: translateY(6px); transition: all 0.25s; }
@keyframes avviso-entra { from { opacity: 0; transform: translateY(8px); } }
.conferma-testo { margin: 0; font-size: var(--testo-l); line-height: 1.5; }