/* ============================================================
   styles.css — Tema "pedana": ardesia + accento ottone
   Font: Space Grotesk (display) + Inter (corpo)
   ============================================================ */

:root {
  /* Palette ardesia */
  --sfondo:        #14171c;
  --sfondo-2:      #1b1f26;
  --pannello:      #20252e;
  --pannello-2:    #262c37;
  --bordo:         #313845;
  --bordo-chiaro:  #3d4655;

  /* Testo */
  --testo:         #e7ebf0;
  --testo-2:       #a9b2c0;
  --testo-3:       #6c7686;

  /* Accento ottone */
  --ottone:        #c8a24c;
  --ottone-chiaro: #e0c074;
  --ottone-scuro:  #9a7a32;

  /* Stati */
  --ok:       #4caf7d;
  --attesa:   #d4a13c;
  --errore:   #e06363;
  --avviso:   #d99a3c;

  /* Armi (codifica colore) */
  --fioretto: #5b9bd5;
  --spada:    #6fcf97;
  --sciabola: #e0a458;
  --storica:  #b07cc6;

  --raggio:   10px;
  --raggio-s: 7px;
  --ombra:    0 8px 30px rgba(0,0,0,.35);
  --transizione: .18s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* FIX fondamentale: l'attributo hidden deve sempre nascondere l'elemento,
   anche quando una classe imposta display:grid/flex. Senza questo, tutte
   le schermate (login, attesa, app) si mostrano impilate. */
[hidden] { display: none !important; }

body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .marchio__nome {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a { color: var(--ottone-chiaro); text-decoration: none; }
a:hover { text-decoration: underline; }

.no-scroll { overflow: hidden; }

/* ---------- Marchio ---------- */
.marchio { text-align: center; margin-bottom: 1.8rem; }
.marchio__lama {
  width: 3px; height: 56px; margin: 0 auto .8rem;
  background: linear-gradient(to bottom, var(--ottone-chiaro), var(--ottone-scuro));
  border-radius: 3px;
  box-shadow: 0 0 18px rgba(200,162,76,.4);
}
.marchio__lama--piccola { height: 26px; margin: 0; }
.marchio__nome { font-size: 1.5rem; color: var(--testo); }
.marchio__sotto { color: var(--testo-3); font-size: .85rem; margin-top: .2rem; }

/* ---------- Schermate auth / attesa ---------- */
.schermata-auth, .schermata-attesa {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(200,162,76,.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(91,155,213,.05), transparent 40%),
    var(--sfondo);
}
.card-auth {
  width: 100%; max-width: 410px;
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 2.2rem; box-shadow: var(--ombra);
}
.testo-centro { text-align: center; color: var(--testo-2); margin-bottom: 1.4rem; }

/* ---------- Form ---------- */
.form { display: flex; flex-direction: column; gap: .9rem; }
.form h2 { margin-bottom: .3rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo > span { font-size: .82rem; color: var(--testo-2); font-weight: 500; }
.campo--inline { display: flex; flex-direction: row; align-items: center; gap: .5rem; cursor: pointer; }
.campo--inline span { font-size: .9rem; }

.box-offerta {
  align-items: flex-start;
  background: rgba(200,162,76,.10);
  border: 1px solid rgba(200,162,76,.45);
  border-radius: var(--raggio-s);
  padding: .75rem 1rem;
  margin: 1rem 0;
  transition: background var(--transizione), border-color var(--transizione);
}
.box-offerta:hover { background: rgba(200,162,76,.18); border-color: rgba(200,162,76,.7); }
.box-offerta .testo-evidenza { color: var(--ottone-chiaro); }

.box-offerta input[type="checkbox"],
#f-academy-box input[type="checkbox"] {
  width: 1.2rem; height: 1.2rem; accent-color: var(--ottone); flex-shrink: 0;
}
.box-offerta input[type="checkbox"] { margin-top: .1rem; }
#f-academy-box { padding-left: 1rem; }

input, select, textarea {
  background: var(--sfondo-2); border: 1px solid var(--bordo);
  color: var(--testo); border-radius: var(--raggio-s);
  padding: .6rem .7rem; font-family: inherit; font-size: .92rem;
  transition: border-color var(--transizione);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ottone); box-shadow: 0 0 0 3px rgba(200,162,76,.12);
}
input[type="checkbox"] { width: auto; accent-color: var(--ottone); }
textarea { resize: vertical; }

/* Campo segnalato come non valido dopo un tentativo di salvataggio fallito
   (oltre al testo nel banner d'errore, aiuta a individuarlo a colpo d'occhio). */
.campo-invalido { border-color: var(--errore) !important; box-shadow: 0 0 0 3px rgba(224,99,99,.15) !important; }
fieldset.campo-invalido { border-color: var(--errore); }

/* Modulo pubblico: dopo il primo tentativo di invio, i campi nativamente
   "required" ma vuoti/non validi vengono evidenziati allo stesso modo. */
.form--validato :invalid { border-color: var(--errore); }

.form__azioni { display: flex; gap: .6rem; margin-top: .4rem; flex-wrap: wrap; }
.testo-secondario { font-size: .85rem; color: var(--testo-3); text-align: center; margin-top: .3rem; }

.fieldset {
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: .9rem; margin: .3rem 0;
}
.fieldset legend { padding: 0 .5rem; font-size: .82rem; color: var(--ottone-chiaro); font-weight: 600; }

.griglia-due { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.griglia-tre { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .9rem; }
.checkbox-griglia { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }

/* ---------- Bottoni ---------- */
.btn {
  background: var(--ottone); color: #1a1407; border: none;
  border-radius: var(--raggio-s); padding: .6rem 1.1rem;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .92rem;
  cursor: pointer; transition: var(--transizione);
}
.btn:hover { background: var(--ottone-chiaro); }
.btn:active { transform: translateY(1px); }
.btn--largo { width: 100%; padding: .7rem; }
.btn--piccolo { padding: .4rem .8rem; font-size: .85rem; }
.btn--secondario { background: var(--pannello-2); color: var(--testo); border: 1px solid var(--bordo-chiaro); }
.btn--secondario:hover { background: var(--bordo); }

.btn-icona {
  background: transparent; border: 1px solid var(--bordo); color: var(--testo-2);
  border-radius: var(--raggio-s); padding: .35rem .55rem; cursor: pointer;
  font-size: .9rem; transition: var(--transizione);
}
.btn-icona:hover { border-color: var(--ottone); color: var(--ottone-chiaro); }
.btn-icona--pericolo:hover { border-color: var(--errore); color: var(--errore); }

/* Tooltip di aiuto al passaggio del mouse su ogni icona, in ogni sezione
   del gestionale: riusa il testo già presente in title="..." (già su
   ogni .btn-icona esistente, non serve toccare nessun altro file) invece
   di aspettare il tooltip nativo del browser — lento, spento, spesso
   ignorato. Il title nativo resta comunque come rete di sicurezza per
   l'accessibilità, semplicemente arriva dopo. */
.btn-icona { position: relative; }
.btn-icona[title]:hover::after,
.btn-icona[title]:focus-visible::after {
  content: attr(title);
  position: absolute; bottom: calc(100% + .4rem); left: 50%; transform: translateX(-50%);
  background: var(--pannello-2); color: var(--testo); border: 1px solid var(--bordo-chiaro);
  border-radius: var(--raggio-s); padding: .3rem .6rem; font-size: .78rem; font-weight: 500;
  white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.35);
  pointer-events: none; z-index: 60; opacity: 0;
  animation: mostra-tooltip-icona .12s ease .35s forwards;
}
@keyframes mostra-tooltip-icona { to { opacity: 1; } }

/* ---------- Layout app ---------- */
.layout { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

.barra-laterale {
  background: var(--sfondo-2); border-right: 1px solid var(--bordo);
  display: flex; flex-direction: column; padding: 1.3rem 1rem;
}
.barra-laterale__marchio {
  display: flex; align-items: center; gap: .6rem;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.05rem;
  padding: 0 .4rem 1.3rem; border-bottom: 1px solid var(--bordo); margin-bottom: 1rem;
}

.nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.nav__voce {
  text-align: left; background: transparent; border: none; color: var(--testo-2);
  padding: .6rem .7rem; border-radius: var(--raggio-s); cursor: pointer;
  font-family: inherit; font-size: .92rem; font-weight: 500; transition: var(--transizione);
}
.nav__voce:hover { background: var(--pannello); color: var(--testo); }
.nav__voce--attiva { background: var(--pannello-2); color: var(--ottone-chiaro); }

.barra-laterale__pie { display: flex; flex-direction: column; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--bordo); }
.utente {
  text-align: left; background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column; padding: .3rem .4rem; border-radius: var(--raggio-s);
  transition: var(--transizione);
}
.utente:hover { background: var(--pannello); }
.utente__nome { font-weight: 600; font-size: .9rem; color: var(--testo); }
.utente__ruolo { font-size: .78rem; color: var(--testo-3); }

.contenuto { padding: 2rem 2.2rem; overflow-y: auto; max-height: 100vh; }

/* ---------- Viste ---------- */
.vista { display: none; }
.vista--attiva { display: block; animation: entra .2s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vista__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; gap: 1rem; flex-wrap: wrap; }

.barra-filtri { margin-bottom: 1rem; }
.input-cerca { max-width: 340px; }

/* ---------- Pannelli ---------- */
.pannello {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 1.3rem; margin-bottom: 1.3rem;
}
.pannello__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

/* ---------- Tabelle ---------- */
.tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabella th {
  text-align: left; color: var(--testo-3); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; padding: .5rem .7rem; border-bottom: 1px solid var(--bordo);
}
.tabella td { padding: .65rem .7rem; border-bottom: 1px solid var(--bordo); }
.tabella tbody tr:hover, .tabella tbody tr:hover { background: var(--pannello-2); }
.tabella--compatta td, .tabella--compatta th { padding: .4rem .5rem; }
.td-azioni { text-align: right; width: 1%; white-space: nowrap; }
.td-centro { text-align: center; }

/* ---------- Elenchi (categorie/armi) ---------- */
.gruppo { margin-bottom: 1.1rem; }
.gruppo__titolo { color: var(--ottone-chiaro); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
.elenco { list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.elenco__voce {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .15rem .8rem;
  background: var(--sfondo-2); border: 1px solid var(--bordo);
  border-radius: var(--raggio-s); padding: .5rem .7rem;
}
.elenco__nome { font-weight: 500; }
.elenco__azioni { display: flex; gap: .35rem; }

/* ---------- Tag e badge ---------- */
.tag {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: .12rem .5rem; border-radius: 20px; margin-left: .3rem;
  background: var(--bordo); color: var(--testo-2);
}
.tag--olimpica { background: rgba(91,155,213,.18); color: var(--fioretto); }
.tag--storica  { background: rgba(176,124,198,.18); color: var(--storica); }
.tag--entrambe { background: rgba(200,162,76,.18); color: var(--ottone-chiaro); }
.tag--agonistico { background: rgba(76,175,125,.16); color: var(--ok); }

.badge {
  display: inline-block; font-size: .76rem; font-weight: 600;
  padding: .15rem .55rem; border-radius: 6px; background: var(--bordo); color: var(--testo-2);
}
.badge--ok { background: rgba(76,175,125,.16); color: var(--ok); }
.badge--attesa { background: rgba(212,161,60,.16); color: var(--attesa); }
.badge--errore { background: rgba(224,99,99,.16); color: var(--errore); }

/* ---------- Messaggi ---------- */
.messaggio { padding: .6rem .8rem; border-radius: var(--raggio-s); font-size: .88rem; }
.messaggio--errore  { background: rgba(224,99,99,.12);  color: var(--errore); border: 1px solid rgba(224,99,99,.3); }
.messaggio--successo{ background: rgba(76,175,125,.12); color: var(--ok);     border: 1px solid rgba(76,175,125,.3); }
.messaggio--avviso  { background: rgba(217,154,60,.12); color: var(--avviso); border: 1px solid rgba(217,154,60,.3); }

.caricamento { color: var(--testo-3); padding: 2rem; text-align: center; }
.stato-vuoto { color: var(--testo-3); padding: 2.5rem 1rem; text-align: center; }

/* ---------- Modale ---------- */
.modale-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: grid; place-items: center; padding: 1.5rem; z-index: 100;
  animation: sfuma .15s ease;
}
@keyframes sfuma { from { opacity: 0; } to { opacity: 1; } }
.modale {
  background: var(--pannello); border: 1px solid var(--bordo-chiaro);
  border-radius: var(--raggio); width: 100%; max-width: 620px;
  max-height: 90vh; overflow-y: auto; box-shadow: var(--ombra);
}
.modale__testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--bordo); position: sticky; top: 0;
  background: var(--pannello);
}
.modale__chiudi {
  background: transparent; border: none; color: var(--testo-3);
  font-size: 1.6rem; line-height: 1; cursor: pointer; transition: var(--transizione);
}
.modale__chiudi:hover { color: var(--testo); }
.modale__corpo { padding: 1.3rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--pannello-2); border: 1px solid var(--bordo-chiaro);
  color: var(--testo); padding: .8rem 1.3rem; border-radius: var(--raggio-s);
  box-shadow: var(--ombra); z-index: 200; font-size: .9rem; font-weight: 500;
  transition: transform .25s ease; max-width: 90vw;
}
.toast--visibile { transform: translateX(-50%) translateY(0); }
.toast--successo { border-left: 3px solid var(--ok); }
.toast--errore   { border-left: 3px solid var(--errore); }
.toast--info     { border-left: 3px solid var(--ottone); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .barra-laterale {
    flex-direction: row; align-items: center; flex-wrap: wrap;
    border-right: none; border-bottom: 1px solid var(--bordo); padding: .8rem 1rem;
  }
  .barra-laterale__marchio { border: none; padding: 0; margin: 0 1rem 0 0; }
  .nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .barra-laterale__pie { flex-direction: row; align-items: center; border: none; padding: 0; }
  .contenuto { padding: 1.2rem; max-height: none; }
  .griglia-due { grid-template-columns: 1fr; }
  .griglia-tre { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
}

/* Focus visibile per accessibilità */
:focus-visible { outline: 2px solid var(--ottone-chiaro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   v3 — Accordion discipline, sottosezioni, fix overflow
   ============================================================ */

/* Fix overflow globale: niente testo che esce dai bordi */
.contenuto { min-width: 0; }
.tabella td, .tabella th { overflow-wrap: anywhere; word-break: break-word; }
.tabella-wrap { width: 100%; overflow-x: auto; }   /* tabella scrollabile se troppo larga */
.cella-tag { white-space: normal; }
.elenco__nome { overflow-wrap: anywhere; min-width: 0; }
.vista__testa h1 { overflow-wrap: anywhere; min-width: 0; }

/* Accordion (discipline) */
.accordion { display: flex; flex-direction: column; gap: .6rem; }
.accordion__item {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--raggio); overflow: hidden;
}
.accordion__testa {
  width: 100%; display: flex; align-items: center; gap: .8rem;
  background: transparent; border: none; cursor: pointer; color: var(--testo);
  padding: 1rem 1.2rem; font-family: inherit; text-align: left;
  transition: background var(--transizione);
}
.accordion__testa:hover { background: var(--pannello-2); }
.accordion__titolo {
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.05rem;
  flex: 1; min-width: 0; overflow-wrap: anywhere;
}
.accordion__meta { color: var(--testo-3); font-size: .82rem; white-space: nowrap; }
.accordion__freccia { color: var(--ottone-chiaro); font-size: .9rem; }
.accordion__corpo { padding: 0 1.2rem 1.2rem; border-top: 1px solid var(--bordo); }
.accordion__azioni-disc { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }

/* Sottosezioni armi/categorie dentro la disciplina */
.sottosezione { margin-top: 1.2rem; }
.sottosezione__testa {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .6rem; gap: .8rem;
}
.sottosezione__testa h3 { color: var(--ottone-chiaro); font-size: .95rem; }
.vuoto-piccolo { color: var(--testo-3); font-size: .85rem; padding: .4rem 0; }

/* Gruppi di checkbox armi (nelle modali) */
.gruppo-armi { margin-bottom: .8rem; }
.gruppo-armi__titolo {
  display: block; font-size: .78rem; color: var(--ottone-chiaro);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem; font-weight: 600;
}

/* Pulsante secondario pericolo */
.btn--pericolo { color: var(--errore); }
.btn--pericolo:hover { border-color: var(--errore); background: rgba(224,99,99,.1); }

/* Checkbox agonista evidenziato */
.campo--agonista { align-self: end; padding-bottom: .5rem; }

/* gruppo__titolo h4 nelle categorie accordion */
h4.gruppo__titolo { color: var(--testo-2); font-size: .8rem; margin: .6rem 0 .35rem; }

/* Le tag senza colore-disciplina usano uno stile neutro coerente */
.tag { background: rgba(200,162,76,.14); color: var(--ottone-chiaro); }
.tag--ok, .badge--ok { background: rgba(76,175,125,.16); color: var(--ok); }

/* Select con optgroup leggibili sul tema scuro */
select optgroup { background: var(--sfondo-2); color: var(--testo-3); font-weight: 600; }
select option { background: var(--sfondo-2); color: var(--testo); }

/* ============================================================
   v3.1 — Fix overflow barra laterale + responsive mobile
   ============================================================ */

/* Email lunga nel piè di pagina della barra laterale: va a capo, non sfora */
.barra-laterale__pie { min-width: 0; }
.utente { width: 100%; min-width: 0; }
.utente__nome, .utente__ruolo {
  max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
}
.utente__nome { font-size: .85rem; line-height: 1.3; }

/* Email anche nelle tabelle: spezza se serve */
.tabella td:first-child, .tabella th:first-child { white-space: normal; }

/* Modali a tutta larghezza su schermi piccoli */
@media (max-width: 760px) {
  .modale-overlay { padding: 0; align-items: flex-end; }
  .modale { max-width: 100%; max-height: 92vh; border-radius: var(--raggio) var(--raggio) 0 0; }
  .vista__testa { flex-direction: column; align-items: flex-start; }
  .vista__testa .btn { width: 100%; }
  .accordion__meta { display: none; }      /* spazio risparmiato su mobile */
  .input-cerca { max-width: 100%; }
  .pannello { padding: 1rem; }
  .contenuto { padding: 1rem; }
}

/* Barra laterale orizzontale su mobile: compatta e ordinata */
@media (max-width: 760px) {
  .barra-laterale {
    flex-direction: column; align-items: stretch; gap: .6rem;
    padding: .9rem 1rem;
  }
  .barra-laterale__marchio { margin: 0 0 .3rem; padding: 0 0 .6rem; border-bottom: 1px solid var(--bordo); }
  .nav { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .nav__voce { flex: 1 1 auto; text-align: center; }
  .barra-laterale__pie {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: .8rem; border-top: 1px solid var(--bordo); padding-top: .6rem;
  }
  .barra-laterale__pie .utente { flex: 1; }
  .barra-laterale__pie .btn { width: auto; flex: 0 0 auto; }
}

/* Tabelle sempre scrollabili in orizzontale se troppo larghe (mobile-safe) */
.tabella-wrap { -webkit-overflow-scrolling: touch; }

/* Evita zoom involontario su iOS quando si tocca un input (font >= 16px) */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px; }
}

/* ============================================================
   v3.2 — Tabelle che si adattano SEMPRE al contenitore
   (niente testo fuori dai margini a zoom 100%)
   ============================================================ */

/* table-layout: fixed forza la tabella a stare nella larghezza del box;
   le colonne si dividono lo spazio e il testo va a capo dentro le celle. */
.tabella {
  width: 100%;
  table-layout: fixed;
  min-width: 0;
}
.tabella th, .tabella td {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: none;
  vertical-align: middle;
}
.tabella td { white-space: normal; }
/* Le intestazioni sono etichette brevi (1-3 parole, es. "Richiesta il"):
   il "normal" di sopra le spezzava a capo in un punto qualunque pur di
   stare nella colonna, spesso a metà locuzione. Restano su una riga sola
   — la colonna si allarga per contenerle, coperta dallo scroll orizzontale
   della tabella se non c'è spazio. */
.tabella th { white-space: nowrap; }

/* Colonna azioni: larghezza fissa così il bottone non viene mai tagliato */
.tabella th:last-child, .tabella td.td-azioni { width: 96px; }
.td-azioni { text-align: right; white-space: normal; }
.td-azioni .btn, .td-azioni .btn-icona { white-space: nowrap; }

/* Colonna azioni "ampia": per righe con molti bottoni (es. Prove Corsi
   Convalidate: Dettagli/Modulo/Reinvia/Scarica/Segna pagata/Promuovi/Non
   rinnovata/Cestina) i 96px della colonna standard li facevano accavallare
   senza respiro. .azioni-flex li dispone su più righe e colonne (si
   riempiono da destra, a capo quando non c'è più posto), invece di
   impilarli uno sotto l'altro a piena larghezza: molto più compatto in
   verticale quando i bottoni per riga sono tanti. */
.tabella td.td-azioni--ampia { width: 340px; }
/* width:100% esplicito, non lasciato all'auto di default: un contenitore
   flex senza larghezza propria si dimensiona sul contenuto dei figli
   (shrink-to-fit) invece di riempire la cella — con le sotto-griglie
   sotto (che hanno flex-basis 100% *di questo contenitore*, non della
   cella) il risultato era una colonna azioni stretta sul contenuto più
   corto invece che sui 340px dichiarati sopra, con bottoni e icone
   schiacciati molto più del dovuto. */
.azioni-flex { display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center; gap: .4rem .5rem; padding: .2rem 0; width: 100%; }
.azioni-flex > * { width: auto; flex: 0 0 auto; text-align: center; }
/* Colonna allargata apposta per il testo più lungo ("Promuovi ad
   atleta"): il nowrap generale di ".td-azioni .btn" e lo spezza-parole
   globale di ".tabella td" (pensati per celle strette con un solo
   termine) qui non servono più — il testo va a capo solo tra una parola
   e l'altra, mai a metà parola, e nella maggior parte dei casi sta su
   un'unica riga. */
.azioni-flex .btn, .azioni-flex .btn-icona {
  white-space: normal; line-height: 1.3;
  overflow-wrap: break-word; word-break: normal; hyphens: none;
}

/* Sotto-griglie di .azioni-flex (oggi solo Prove Corsi): due file
   allineate a colonne perfette invece che bottoni sparsi di misure
   diverse — una striscia di sole icone in alto (azioni "di servizio":
   Dettagli/Reinvia/Scarica/Cestina), una griglia a 2 colonne sotto per i
   bottoni testuali (le azioni sullo stato della prova). Ognuna occupa
   sempre la riga intera (flex-basis 100%) così stanno sempre una sopra
   l'altra, mai affiancate. */
.azioni-flex__icone {
  flex: 0 0 100%;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid var(--bordo); border-radius: var(--raggio-s); overflow: hidden;
}
.azioni-flex__icone .btn-icona {
  width: 100%; margin: 0; border: none; border-radius: 0;
  border-right: 1px solid var(--bordo);
}
.azioni-flex__icone .btn-icona:last-child { border-right: none; }

.azioni-flex__testo {
  flex: 0 0 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
}
.azioni-flex__testo > * {
  width: 100%; margin: 0; padding: .4rem .35rem;
  font-size: .76rem; line-height: 1.15; text-align: center;
  overflow: hidden; /* rete di sicurezza: il testo non sbrodola mai fuori dal bottone */
}

/* Su desktop non serve lo scroll orizzontale: la tabella ci sta */
.tabella-wrap { overflow-x: visible; }

/* Su mobile, se 5-6 colonne diventano troppo strette, si può scorrere */
@media (max-width: 760px) {
  .tabella-wrap { overflow-x: auto; }
  .tabella { min-width: 520px; }   /* sotto questa soglia scrolla invece di accavallarsi */
}

/* ============================================================
   v4.3 — Notifiche, badge di navigazione, box assegnazioni
   ============================================================ */

/* Campanella + pannello notifiche (piè barra laterale) */
.notifiche { position: relative; }
.notifiche__btn { width: 100%; position: relative; }
.notifiche__badge {
  margin-left: .4rem; background: var(--errore); color: #fff;
  border-radius: 10px; padding: 1px 7px; font-size: .72rem; font-weight: 700;
}
.notifiche__pannello {
  position: absolute; bottom: 115%; left: 0; right: 0;
  max-height: 320px; overflow-y: auto;
  background: var(--pannello); border: 1px solid var(--bordo-chiaro);
  border-radius: var(--raggio); padding: .3rem; z-index: 60; box-shadow: var(--ombra);
}
.notifiche__voce { padding: .55rem .7rem; border-bottom: 1px solid var(--bordo); }
.notifiche__voce:last-child { border-bottom: none; }
.notifiche__voce--nuova { background: rgba(200,162,76,.07); }
.notifiche__testo { font-size: .88rem; color: var(--testo-2); overflow-wrap: anywhere; }
.notifiche__voce--nuova .notifiche__testo { color: var(--testo); font-weight: 600; }
.notifiche__data { font-size: .72rem; color: var(--testo-3); margin-top: .15rem; }
.notifiche__vuoto { color: var(--testo-3); padding: .8rem; font-size: .88rem; }

/* Badge numerico sulle voci di navigazione (riusabile) */
.nav__badge {
  margin-left: .5rem; background: var(--errore); color: #fff;
  border-radius: 10px; padding: 0 7px; font-size: .72rem; font-weight: 700; line-height: 1.5;
}

/* Box assegnazioni a fisarmonica: testa cliccabile coerente col tema */
.box-acc__testa { cursor: pointer; display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.box-acc__freccia { display: inline-block; transition: transform var(--transizione); opacity: .6; color: var(--ottone-chiaro); }
.box-acc__freccia--aperta { transform: rotate(90deg); }
.box-acc__cont { opacity: .55; font-weight: 400; }
.box-acc__riga { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.storico-atleta { margin-bottom: .6rem; }
.storico-atleta__testa { cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.storico-atleta__sintesi { min-width: 0; overflow-wrap: anywhere; }

/* Su mobile il pannello notifiche diventa una "sheet" in basso, sempre raggiungibile */
@media (max-width: 760px) {
  .notifiche { position: static; }
  .notifiche__pannello {
    position: fixed; left: .8rem; right: .8rem; bottom: .8rem; top: auto;
    max-height: 55vh;
  }
}

/* ============================================================
   v4.4 — Calendario gare/eventi
   ============================================================ */

/* Card evento nelle liste */
.evento-card { cursor: pointer; padding: .7rem .3rem; border-bottom: 1px solid var(--bordo); }
.evento-card:last-child { border-bottom: none; }
.evento-card:hover { background: var(--pannello-2); }
.evento-card__riga { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; align-items: baseline; }
.evento-card__meta { font-size: .85rem; color: var(--testo-3); margin-top: .15rem; }
.evento-card__armi { font-size: .82rem; color: var(--testo-3); white-space: nowrap; }

/* Accordion dei sotto-eventi, annidato dentro la card della madre */
.evento-card__sotto { margin-top: .5rem; }
.evento-card__sotto summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--ottone-chiaro);
  list-style: none; display: inline-block;
}
.evento-card__sotto summary::-webkit-details-marker { display: none; }
.evento-card__sotto summary::before { content: "▸ "; }
.evento-card__sotto[open] summary::before { content: "▾ "; }
.evento-card__sotto .elenco { margin: .4rem 0 0 1rem; }
.evento-card__sotto .elenco__voce { cursor: pointer; padding: .4rem .6rem; font-size: .85rem; }
.evento-card__sotto .elenco__voce:hover { background: var(--pannello-2); }

/* Griglia calendario mensile */
.cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-intest {
  text-align: center; font-size: .72rem; color: var(--testo-3);
  text-transform: uppercase; letter-spacing: .04em; padding: .3rem 0; font-weight: 600;
}
.cal-cella {
  min-height: 74px; background: var(--pannello-2); border: 1px solid var(--bordo);
  border-radius: var(--raggio-s); padding: .25rem; display: flex; flex-direction: column; gap: 2px;
}
.cal-cella--vuota { background: transparent; border: none; }
.cal-num { font-size: .72rem; color: var(--testo-3); text-align: right; }
.cal-ev {
  font-size: .72rem; background: rgba(200,162,76,.18); color: var(--ottone-chiaro);
  border-radius: 4px; padding: 1px 4px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-ev:hover { background: rgba(200,162,76,.3); }

/* Su mobile il calendario resta leggibile: celle più basse, testo eventi nascosto a favore di un puntino */
@media (max-width: 760px) {
  .cal-cella { min-height: 46px; }
  .cal-ev { font-size: 0; padding: 0; height: 6px; border-radius: 3px; }
}

/* ============================================================
   v4.6 — Liste a scorrimento e righe-checkbox nelle modali
   (convoca atleti, membri coppia/squadra)
   Risolve: checkbox incollata al testo, righe lunghe che si
   accavallano, parole spezzate. Testo che va a capo rientrando
   sotto il testo (non sotto la casella). Pulito a zoom 100%.
   ============================================================ */

/* Contenitore lista con scroll verticale uniforme per tutte le modali */
.lista-scroll {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  padding: .5rem;
  margin-top: .3rem;
  min-width: 0;
}
.lista-scroll .vuoto-piccolo { padding: .3rem .2rem; }

/* Riga con casella + etichetta: la casella resta a sinistra,
   il testo occupa il resto e va a capo rientrato (allineato al testo). */
.riga-check {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .22rem .15rem;
  cursor: pointer;
  border-radius: var(--raggio-s);
  transition: background var(--transizione);
}
.riga-check:hover { background: var(--pannello-2); }
.riga-check > input[type="checkbox"] {
  margin-top: .2rem;     /* allinea la casella alla prima riga di testo */
  flex: 0 0 auto;
}
.riga-check > span {
  flex: 1;
  min-width: 0;
  font-size: .9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Voce non selezionabile (es. atleta già in un'altra coppia/squadra) */
.riga-check--off { opacity: .55; cursor: default; }
.riga-check--off:hover { background: transparent; }

/* Nelle modali la griglia a due colonne diventa una colonna se lo spazio
   è poco, così select e bottoni non si stringono fino a troncarsi. */
@media (max-width: 560px) {
  .modale .griglia-due { grid-template-columns: 1fr; }
  .modale .griglia-tre { grid-template-columns: 1fr; }
}

/* ============================================================
   v4.7 — Tabelle DATI (convocati, coppie/squadre)
   Il table-layout:fixed (v3.2) andava bene per poche colonne larghe,
   ma con 6-7 colonne strette spezzava ogni parola ("Fioret to",
   "Boz za", "PIAZZ ."). Qui le colonne si dimensionano al CONTENUTO
   e il testo va a capo SOLO tra le parole, mai dentro una parola.
   ============================================================ */

.tabella--dati {
  table-layout: auto;   /* annulla il fixed globale: colonne in base al contenuto */
}
.tabella--dati th,
.tabella--dati td {
  white-space: normal;       /* può andare a capo... */
  overflow-wrap: normal;     /* ...ma SOLO ai normali punti di interruzione */
  word-break: normal;        /* niente parole spezzate a metà */
  vertical-align: middle;
}
/* Le intestazioni restano comunque su una riga sola, stesso motivo della
   regola gemella sopra per le tabelle "normali" (es. "Approvata il" non
   deve spezzarsi in "Approvata"/"il"). */
.tabella--dati th { white-space: nowrap; }
/* La colonna azioni (matita/cestino) e i campi numerici restano stretti e compatti */
.tabella--dati .td-azioni { width: 1%; white-space: nowrap; }
.tabella--dati input[type="number"] { width: 64px; min-width: 56px; }

/* Se la somma delle colonne supera il contenitore, il wrapper scorre in
   orizzontale invece di stringere e spezzare (vale anche su desktop). */
.tabella-wrap--scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   v4.8 — Nome+cognome sempre su una riga + modale ridimensionabile
   ============================================================ */

/* Nome e cognome non si spezzano mai: nelle liste "Membri" si va a capo
   solo TRA un atleta e l'altro (alla virgola), non dentro il nome. */
.nome-membro { white-space: nowrap; }

/* La modale non è più di larghezza fissa: parte larga fino al 90% dello
   schermo (tetto a 1400px perché su monitor molto larghi 90vw sarebbe
   eccessivo), così le tabelle con molte colonne (es. i convocati di un
   evento) non richiedono uno scroll orizzontale interno per essere lette
   per intero. Resta comunque ridimensionabile a mano se serve più stretta
   (trascina l'angolo in basso a destra). */
@media (min-width: 761px) {
  .modale-overlay { align-items: flex-start; }   /* ancorata in alto: il resize verticale è naturale */
  .modale {
    width: min(1400px, 90vw);
    max-width: 90vw;
    min-width: 340px;
    min-height: 220px;
    max-height: 90vh;
    resize: both;       /* maniglia di ridimensionamento in basso a destra */
    overflow: auto;     /* necessario perché il resize funzioni */
  }
}

/* ============================================================
   v4.9 — Hub a tab nella scheda atleta + Tab statistiche
   La scheda di un atleta esistente ha una barra di tab in alto
   (Anagrafica | Statistiche). Le card riepilogano i numeri,
   le tabelle riusano .tabella--dati / .tabella-wrap--scroll.
   Tutto additivo: nessuna regola precedente toccata.
   ============================================================ */

/* Barra dei tab in cima alla scheda */
.scheda-tabs {
  display: flex; gap: .25rem; flex-wrap: wrap;
  margin: -.2rem 0 1.1rem;
  border-bottom: 1px solid var(--bordo);
}
.scheda-tab {
  background: transparent; border: none; color: var(--testo-2);
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .9rem;
  padding: .5rem .85rem; cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: var(--raggio-s) var(--raggio-s) 0 0;
  transition: var(--transizione);
}
.scheda-tab:hover { color: var(--testo); background: var(--pannello-2); }
.scheda-tab--attiva { color: var(--ottone-chiaro); border-bottom-color: var(--ottone); }

/* Card riepilogo statistiche (si adattano in larghezza, vanno a capo su mobile) */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: .6rem; margin-bottom: 1.2rem;
}
.stat-card {
  background: var(--sfondo-2); border: 1px solid var(--bordo);
  border-radius: var(--raggio-s); padding: .8rem .6rem; text-align: center;
}
.stat-card__num {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 1.5rem; line-height: 1.1; color: var(--ottone-chiaro);
}
.stat-card__lbl {
  font-size: .72rem; color: var(--testo-3); margin-top: .25rem;
  text-transform: uppercase; letter-spacing: .03em;
}

/* Titoletti di sezione dentro il tab statistiche */
.stat-titolo {
  color: var(--ottone-chiaro); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em;
  margin: 1.1rem 0 .5rem;
}

/* Dashboard: griglia di riquadri indipendenti, ciascuno un widget */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.dash-pannello {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 1.1rem 1.2rem;
}
.dash-pannello__titolo {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 1rem; color: var(--testo); margin-bottom: .8rem;
}

/* ============================================================
   v4.11 — Statistiche di club: filtro per arma + grafici
   Pillole di filtro, barre (CSS) e donut (SVG inline). Additivo.
   ============================================================ */

/* Pillole filtro arma */
.filtro-armi { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 1.1rem; }
.pill {
  background: var(--sfondo-2); border: 1px solid var(--bordo); color: var(--testo-2);
  border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; font-weight: 600;
  font-family: "Space Grotesk", sans-serif; cursor: pointer; transition: var(--transizione);
}
.pill:hover { color: var(--testo); border-color: var(--ottone); }
.pill--attiva { background: var(--ottone); border-color: var(--ottone); color: var(--sfondo); }

/* Griglia grafici */
.grafici {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin: .4rem 0 1.4rem;
}
.grafico {
  background: var(--sfondo-2); border: 1px solid var(--bordo);
  border-radius: var(--raggio-s); padding: 1rem;
}
.grafico__titolo {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--testo-3); margin: 0 0 .9rem;
}

/* Barre orizzontali (CSS) */
.barre { display: flex; flex-direction: column; gap: .55rem; }
.barra { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: .55rem; }
.barra__lbl { font-size: .85rem; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__track { background: var(--pannello-2); border-radius: 999px; height: .55rem; overflow: hidden; }
.barra__fill { background: var(--ottone); height: 100%; border-radius: 999px; min-width: 2px; }
.barra__val { font-size: .82rem; color: var(--testo); font-weight: 600; min-width: 1.4rem; text-align: right; }

/* Donut (SVG) + legenda */
.donut-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.donut { width: 116px; height: 116px; flex: 0 0 auto; }
.donut__centro-num { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 9px; fill: var(--testo); }
.donut__centro-lbl { font-size: 4px; fill: var(--testo-3); text-transform: uppercase; letter-spacing: .04em; }
.donut-legend { display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; }
.donut-legend__riga { display: flex; align-items: center; gap: .45rem; color: var(--testo-2); }
.donut-legend__sw { width: .72rem; height: .72rem; border-radius: 2px; flex: 0 0 auto; }
.donut-legend__val { color: var(--testo); font-weight: 600; margin-left: .15rem; }

/* ============================================================
   v4.15 — Registro presenze: riga con doppia casella
   (Presente + Lezione 1:1), colonne allineate all'intestazione.
   ============================================================ */
.pr-intesta,
.pr-riga {
  display: grid;
  grid-template-columns: 1fr 5.5rem 5.5rem;
  align-items: center;
  gap: .6rem;
}
.pr-intesta {
  padding: 0 .2rem .5rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--testo-3);
}
.pr-intesta span:not(:first-child) { text-align: center; }
.pr-riga {
  padding: .55rem .2rem;
  border-bottom: 1px solid var(--bordo);
}
.pr-riga:last-child { border-bottom: none; }
.pr-nome { color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-cell { text-align: center; }
.pr-cell input { cursor: pointer; width: 1.05rem; height: 1.05rem; }

/* ============================================================
   v4.18 — Menù a GRUPPI (Anagrafiche / Discipline / Calendario /
   Staff / Analisi / Scadenze). Titoletti + voce disattivata.
   ============================================================ */
.nav__gruppo { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .55rem; }
.nav__gruppo:last-child { margin-bottom: 0; }
.nav__gruppo-tit {
  color: var(--testo-3); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: .5rem .7rem .15rem;
}
/* Voce disattivata (es. Scadenze): visibile ma non cliccabile */
.nav__voce--disabilitata {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  opacity: .5; cursor: default;
}
.nav__voce--disabilitata:hover { background: transparent; color: var(--testo-2); }
.nav__presto {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: var(--bordo); color: var(--testo-3);
  border-radius: 20px; padding: .05rem .45rem; line-height: 1.6;
}

/* ============================================================
   Elenco riordinabile con maniglia (es. Testi e consensi): righe
   chiuse per default, si espandono al clic; la maniglia trascina
   la riga sopra/sotto le altre (Pointer Events, mouse e touch).
   ============================================================ */
.elenco-riordinabile__riga {
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  margin-bottom: .6rem; background: var(--pannello);
}
.elenco-riordinabile__riga.sta-trascinando {
  z-index: 5; box-shadow: var(--ombra); opacity: .92; cursor: grabbing;
}
.elenco-riordinabile__testa {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; cursor: pointer; user-select: none;
}
.elenco-riordinabile__maniglia {
  cursor: grab; color: var(--testo-2); font-size: 1.1rem; line-height: 1;
  padding: .2rem .3rem; touch-action: none;
}
.elenco-riordinabile__maniglia:active { cursor: grabbing; }
.elenco-riordinabile__titolo { flex: 1; font-weight: 600; }
.elenco-riordinabile__chevron { color: var(--testo-2); transition: transform .15s; }
.elenco-riordinabile__riga.aperta .elenco-riordinabile__chevron { transform: rotate(180deg); }
.elenco-riordinabile__dettaglio { padding: 0 .8rem .8rem; border-top: 1px solid var(--bordo); }

/* Su mobile la barra è già a colonna: impilo i gruppi (più leggibile dei chip a riga) */
@media (max-width: 760px) {
  .nav { flex-direction: column; flex-wrap: nowrap; }
  .nav__gruppo { margin-bottom: .4rem; }
  .nav__gruppo-tit { padding: .35rem .5rem .1rem; }
}

/* Calendario personalizzato del modulo pubblico Prove: sostituisce il date
   picker nativo quando il corso+sede ha giorni noti dal Time Table, per poter
   disattivare e segnalare in rosso i giorni non previsti (il picker del
   sistema operativo non permette di farlo). */
.cal-prova { margin: .3rem 0 .5rem; padding: .7rem .8rem; background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: 10px; }
.cal-prova__intestazione { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cal-prova__mese { font-size: .85rem; font-weight: 600; color: var(--testo); text-transform: capitalize; }
.cal-prova__nav {
  background: transparent; border: 1px solid var(--bordo); color: var(--testo-2);
  border-radius: 6px; width: 26px; height: 26px; line-height: 1; cursor: pointer; font-family: inherit; font-size: 1rem;
}
.cal-prova__nav:hover:not(:disabled) { border-color: var(--ok); color: var(--testo); }
.cal-prova__nav:disabled { opacity: .3; cursor: default; }
.cal-prova__intestaz-giorni {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  font-size: .68rem; color: var(--testo-3); text-align: center; margin-bottom: .25rem; text-transform: uppercase;
}
.cal-prova__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-prova__giorno {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: .82rem; font-family: inherit;
  background: var(--sfondo); border: 1px solid var(--bordo); color: var(--testo); cursor: pointer;
}
.cal-prova__giorno:hover:not(:disabled) { border-color: var(--ok); }
.cal-prova__giorno--vuoto { visibility: hidden; border: none; background: none; }
.cal-prova__giorno--assente { background: rgba(224, 99, 99, .1); border-color: rgba(224, 99, 99, .25); color: var(--errore); opacity: .6; cursor: not-allowed; }
.cal-prova__giorno--passato { opacity: .35; cursor: not-allowed; color: var(--testo-3); }
.cal-prova__giorno--selezionato { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 700; }
.cal-prova__legenda { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--testo-3); margin: .5rem 0 0; }
.cal-prova__pallino { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cal-prova__pallino--assente { background: var(--errore); opacity: .6; }