/* MXL Fantacalcio — proposta grafica derivata dal sito mxl.it
   Colori presi dal foglio di stile del sito, non stimati a occhio.
   Nessuna dipendenza esterna: il carattere è ospitato qui. */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(font/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(font/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- i colori del sito, valori esatti --- */
  --fondo:      #17153c;  /* indigo quasi nero: lo sfondo della pagina */
  --fondo-alto: #1e1b45;  /* campi dei moduli, righe alternate */
  --carta:      #24214a;  /* i riquadri */
  --carta-alta: #2e2a58;  /* intestazioni dei riquadri, righe in evidenza */
  --bordo:      #3a3562;
  --bordo-vivo: #504e75;

  --testo:      #e1e0ef;  /* lavanda chiarissimo */
  --tenue:      #9d9ac4;  /* testo secondario — 5,7:1 sul fondo, si legge */
  --pervinca:   #8988ab;  /* il colore più usato del sito: i FONDI dei riquadri chiari */
  --pervinca-testo: #a6a3cc; /* la stessa tinta, schiarita quanto basta per fare testo
                                sui riquadri scuri: 5,5:1 anche sul fondo più chiaro */

  /* --- i tre colori che parlano --- */
  --azione:     #5b57b8;  /* «procedi» — bianco sopra, 6,0:1 */
  --azione-su:  #6a66c9;
  --rosso:      #d91d50;  /* «distruggi» — il rubino del sito, bianco sopra, 5,0:1 */
  --rosso-su:   #b4173f;
  --oro:        #f3bc5d;  /* evidenza: primati, avvisi importanti */
  --verde-capitano: #6fe0a1; /* il capitano di squadra — 9,2:1 sul riquadro */

  --raggio:     15px;     /* l'arrotondamento che usi su tutti i pannelli di MXL */
  --raggio-min: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 16px/1.6 'Jost', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
  letter-spacing: .02em;   /* accennata: il respiro di MXL senza sfilacciare i testi lunghi */
  -webkit-font-smoothing: antialiased;
}

a { color: #bbb7df; }

/* Pagine senza menu (accesso): una colonna sola, centrata. */
.telaio.solo-centro { grid-template-columns: minmax(0, 34rem); justify-content: center; padding-top: 4rem; }
.stretto { max-width: 26rem; }

h1 {
  font-size: 1.6rem; font-weight: 600; margin: 0 0 .3rem; color: #fff;
  letter-spacing: .06em;
}
h2 {
  font-size: 1.05rem; font-weight: 600; margin: 2.2rem 0 .8rem; color: #fff;
  text-transform: uppercase; letter-spacing: .14em;   /* maiuscolo solo qui: è un titolo corto */
}
.sottotitolo { color: var(--tenue); margin: 0 0 1.6rem; }

.carta {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 1.4rem;
}

/* Riquadro pervinca: il colore-firma di MXL, per i pannelli in evidenza
   (classifiche collaterali, albo d'oro). Testo scuro sopra, 5,2:1. */
.carta.pervinca {
  background: var(--pervinca); border-color: #9b9ac0; color: var(--fondo);
}
.carta.pervinca h2, .carta.pervinca h3 { color: var(--fondo); }
.carta.pervinca a { color: #1f1a48; }
.carta.pervinca .tenue { color: #1f1a48; }

label { display: block; font-weight: 600; font-size: .88rem; margin: 0 0 .35rem; color: var(--testo); }
input[type=text], input[type=password], select, textarea {
  width: 100%; padding: .65rem .75rem; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--bordo-vivo); border-radius: var(--raggio-min);
  background: var(--fondo-alto); color: var(--testo);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azione-su); outline-offset: 1px; border-color: var(--azione-su);
}
.campo { margin-bottom: 1.1rem; }

/* ---- Comandi ----
   Riquadro pieno = si fa qualcosa. Testo bianco, sempre. */
button, .bottone {
  display: inline-block; background: var(--azione); color: #fff; border: 0;
  padding: .7rem 1.3rem; font-size: .95rem; font-weight: 600; font-family: inherit;
  letter-spacing: .04em;
  border-radius: var(--raggio-min); cursor: pointer; text-decoration: none;
}
button:hover, .bottone:hover { background: var(--azione-su); color: #fff; }
button.largo { width: 100%; }

/* Comando secondario: vuoto, non pieno. Non compete con quello principale. */
.bottone.tenue, button.tenue {
  background: transparent; color: var(--testo); border: 1px solid var(--bordo-vivo); font-size: .95rem;
}
.bottone.tenue:hover, button.tenue:hover {
  background: rgba(255,255,255,.06); color: #fff; border-color: var(--pervinca-testo);
}

/* ---- Azioni che cancellano ----
   Il rubino di MXL. Sul sito è decorativo; qui fa un mestiere:
   avvisare prima del clic, perché la conferma arriva dopo. */
button.distruttivo, .bottone.distruttivo { background: var(--rosso); color: #fff; }
button.distruttivo:hover, .bottone.distruttivo:hover { background: var(--rosso-su); color: #fff; }

.avviso { padding: .85rem 1.1rem; border-radius: var(--raggio-min); margin-bottom: 1.2rem; font-size: .95rem; }
.avviso.ok         { background: rgba(91,87,184,.22);  color: #cfcdf5; border: 1px solid #4a4695; }
.avviso.errore     { background: rgba(217,29,80,.16);  color: #f6a8bd; border: 1px solid #8e1436; }
.avviso.attenzione { background: rgba(243,188,93,.14); color: #f3d29a; border: 1px solid #8a6b2c; }

table { width: 100%; border-collapse: collapse; background: transparent; }
th, td { padding: .6rem .7rem; border-bottom: 1px solid var(--bordo); text-align: left; }
th {
  background: var(--carta-alta); color: var(--pervinca-testo);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
}
tbody tr:hover td { background: rgba(255,255,255,.03); }
.tabella-scorrevole {
  overflow-x: auto; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.tabella-scorrevole table tr:last-child td { border-bottom: 0; }

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

mark { background: var(--oro); color: var(--fondo); padding: .05em .25em; border-radius: 4px; font-weight: 600; }
.riga-precompilata { background: rgba(255,255,255,.035); }

/* La riga di chi sta guardando: la sua squadra, la giornata attiva.

   Prima era un fondo verdino chiarissimo (#eef4ef) scritto a mano in sei punti
   diversi: un residuo del tema chiaro, rimasto quando la grafica e' passata al
   fondo scuro. Risultato: testo chiaro su fondo quasi bianco, illeggibile.
   Qui l'evidenza si fa nell'unico modo che regge su fondo scuro — un gradino
   piu' chiaro dello sfondo generale — e sta in un posto solo. */
tr.riga-mia td { background: var(--carta-alta); }
tbody tr.riga-mia:hover td { background: rgba(255,255,255,.09); }

/* ---- Calendario scontri diretti: un riquadro per turno ---- */
.griglia-turni {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem; align-items: start;
}
.separatore-girone {
  grid-column: 1 / -1; margin: 1.4rem 0 .2rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pervinca-testo);
  border-top: 1px solid var(--bordo); padding-top: 1rem;
}
.turno {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); overflow: hidden;
}
.turno > header {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .6rem .9rem; background: var(--carta-alta); border-bottom: 1px solid var(--bordo);
}
.turno .numero   { font-weight: 700; font-size: .95rem; color: #fff; }
.turno .giornata { color: var(--tenue); font-size: .8rem; }
.turno table { width: 100%; border-collapse: collapse; background: transparent; }
.turno td { border: 0; padding: .32rem .6rem; font-size: .92rem; }
.turno tr:hover td { background: transparent; }
.turno tr + tr td { border-top: 1px solid rgba(255,255,255,.05); }
.turno .casa   { text-align: right; width: 46%; }
.turno .fuori  { text-align: left;  width: 46%; }
.turno .contro { text-align: center; color: var(--tenue); width: 8%; font-size: .8rem; }
.turno > footer {
  padding: .5rem .9rem; border-top: 1px solid var(--bordo);
  background: rgba(0,0,0,.18); color: var(--tenue); font-size: .8rem;
}

/* ---- Inserimento voti: tutte le squadre in una pagina ---- */
.griglia-voti {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1rem; align-items: start;
}
.squadra-voti {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); overflow: hidden;
}
.squadra-voti > header {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .55rem .8rem; background: var(--carta-alta); border-bottom: 1px solid var(--bordo);
}
.squadra-voti .nome   { font-weight: 700; font-size: .95rem; color: #fff; }
.squadra-voti .totale { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--oro); }
.squadra-voti table { width: 100%; border-collapse: collapse; background: transparent; }
.squadra-voti th {
  background: transparent; color: var(--tenue);
  border-bottom: 1px solid var(--bordo);
  font-size: .66rem; padding: .3rem .35rem; text-align: center; letter-spacing: .1em;
}
.squadra-voti th:nth-child(2) { text-align: left; }
.squadra-voti td { border: 0; padding: .18rem .35rem; font-size: .85rem; }
.squadra-voti tr:hover td { background: transparent; }
.squadra-voti tr + tr td { border-top: 1px solid rgba(255,255,255,.05); }
.squadra-voti .slot { color: var(--tenue); width: 2.2rem; font-size: .72rem; white-space: nowrap; }
.squadra-voti .slot .p {
  display: inline-block; margin-left: .15rem; padding: 0 .25rem;
  background: var(--bordo-vivo); color: var(--testo); border-radius: 4px; font-size: .62rem;
}
.squadra-voti .giocatore { width: 42%; }
.squadra-voti input {
  width: 3.2rem; padding: .22rem .25rem; font-size: .85rem; text-align: center;
  border: 1px solid var(--bordo-vivo); border-radius: 6px;
  background: var(--fondo-alto); color: var(--testo);
}
.squadra-voti input:focus { outline: 2px solid var(--azione-su); outline-offset: 0; }
/* Lo zero come segnaposto: si legge che la casella vuota vale zero, ma non c'è
   niente da scavalcare per scriverci dentro. */
.squadra-voti input::placeholder { color: var(--tenue); opacity: .35; }

/* La pagina pubblica dei punteggi riusa i riquadri dell'inserimento voti, ma
   mostra numeri al posto delle caselle: da qui in giù vale solo là. */
.squadra-voti.mia { border-color: var(--oro); }
.squadra-voti td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.squadra-voti .riga-totale td {
  border-top: 1px solid var(--bordo); color: var(--tenue);
  font-size: .78rem; letter-spacing: .06em; padding-top: .35rem;
}
.squadra-voti .riga-totale td strong { color: var(--oro); font-size: .95rem; }

/* La riga delle vincite in fondo a ogni rosa. */
.riga-vincite {
  margin: .5rem 0 0; padding: .45rem .7rem;
  background: var(--carta-alta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); font-size: .85rem;
}
/* Lo stacco fra titolari e riserve: vale nei riquadri dell'inserimento voti
   e nella tabella del dettaglio di giornata. La versione dentro .squadra-voti
   resta perche' lì una regola piu' specifica (.squadra-voti tr + tr td) la
   scavalcherebbe, e il separatore sparirebbe. */
tr.inizio-riserve td { border-top: 2px solid var(--bordo-vivo); }
.squadra-voti .inizio-riserve td { border-top: 2px solid var(--bordo-vivo); }

/* Una squadra con voti in bozza: il bordo dorato dice "questo lavoro esiste
   ma nessuno lo vede ancora". Serve a non pubblicare per distrazione. */
.squadra-voti.in-bozza { border-color: var(--oro); }
.squadra-voti.in-bozza > header { background: linear-gradient(90deg, rgba(243,188,93,.14), rgba(243,188,93,0) 70%), var(--carta-alta); }
.etichetta-bozza {
  display: inline-block; margin-left: .4rem; padding: 0 .3rem;
  background: var(--oro); color: var(--fondo); border-radius: 4px;
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  vertical-align: .1em;
}

/* ---- La formazione messa d'ufficio (vedi migrazioni/011) ----
   Il tratteggio diagonale dice «questa non l'ha scelta nessuno», e lo dice
   anche a chi guarda da lontano. Non si usa l'oro, che è già la bozza, né il
   rosso, che qui vorrebbe dire errore: d'ufficio non è un guasto, è il
   regolamento che ha funzionato. Resta la pervinca, il colore del sito che
   serve a distinguere senza allarmare.
   Vale in tre posti: inserimento voti, punteggi pubblici, formazioni in home. */
.squadra-voti.dufficio,
.formazione-squadra.dufficio {
  border-color: var(--pervinca);
  background:
    repeating-linear-gradient(-45deg,
      rgba(137,136,171,.10) 0 10px,
      rgba(137,136,171,0)  10px 20px),
    var(--carta);
}
.squadra-voti.dufficio > header,
.formazione-squadra.dufficio > header {
  background: rgba(137,136,171,.20);
}
.etichetta-dufficio {
  display: inline-block; margin-left: .4rem; padding: 0 .3rem;
  background: var(--pervinca); color: var(--fondo); border-radius: 4px;
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  vertical-align: .1em; white-space: nowrap;
}
/* La spiegazione per esteso: il marchio da solo si presta a essere interpretato
   male, e questa è la riga che evita la telefonata del sabato mattina. */
.nota-dufficio {
  margin: 0; padding: .45rem .8rem;
  border-bottom: 1px solid var(--bordo);
  color: var(--pervinca-testo); font-size: .75rem; line-height: 1.35;
}

.barra-salva {
  position: sticky; bottom: 0; margin-top: 1.3rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: .9rem 1.1rem; background: var(--carta);
  border: 1px solid var(--bordo-vivo); border-radius: var(--raggio);
  box-shadow: 0 -6px 24px rgba(0,0,0,.45);
}

/* ---- Avvisi dell'organizzatore, in cima alla home ---- */
.avvisi { margin-bottom: 1.8rem; display: grid; gap: .7rem; }
.avvisi .nota {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--carta); border: 1px solid var(--bordo);
  border-left: 3px solid var(--azione);
  border-radius: var(--raggio); padding: .9rem 1.1rem;
}
.avvisi .nota.importante {
  border-left-color: var(--oro);
  background: linear-gradient(90deg, rgba(243,188,93,.10), rgba(243,188,93,0) 60%), var(--carta);
}
.avvisi .segno {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--oro); color: var(--fondo);
  font-weight: 700; font-size: .85rem; line-height: 1.4rem; text-align: center;
}
.avvisi .testo  { white-space: pre-wrap; }
.avvisi .quando { color: var(--tenue); font-size: .8rem; margin-top: .35rem; }

/* ============================================================
   IMPIANTO A TRE COLONNE — la struttura di mxl.it
   Sinistra: il menu, sempre uguale, diviso per quanto spesso si usa.
   Centro:   la pagina.
   Destra:   quello che riguarda solo la pagina aperta (stato, comandi).
   ============================================================ */

.telaio {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 17rem;
  gap: 1.8rem;
  max-width: 84rem; margin: 0 auto;
  padding: 1.6rem 1.4rem 4rem;
  align-items: start;
}

/* ---- Colonna sinistra ---- */
/* Il menu scorre per conto suo, come la colonna di destra: resta fermo mentre
   il contenuto centrale scorre, e se le voci non ci stanno in altezza scorre
   lui, non la pagina. Senza max-height lo «sticky» cede appena il menu supera
   l'altezza dello schermo, ed e' li' che sembrava attaccato al contenuto. */
.laterale {
  position: sticky; top: 1.4rem;
  max-height: calc(100vh - 2.8rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: .35rem;
  scrollbar-width: thin; scrollbar-color: var(--bordo-vivo) transparent;
}
.laterale::-webkit-scrollbar { width: 8px; }
.laterale::-webkit-scrollbar-track { background: transparent; }
.laterale::-webkit-scrollbar-thumb { background: var(--bordo-vivo); border-radius: 4px; }
.laterale::-webkit-scrollbar-thumb:hover { background: var(--pervinca); }

.laterale .marchio {
  display: block; text-decoration: none;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.1rem 1.1rem;
  margin-bottom: 1.1rem;
}
.laterale .marchio .nome {
  display: block; color: #fff; font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .2em; line-height: 1.2;
}
.laterale .marchio .dal { display: block; color: var(--pervinca-testo); font-size: .72rem; letter-spacing: .16em; margin-top: .35rem; }

.gruppo-menu { margin-bottom: 1.4rem; }
.gruppo-menu > .titolo {
  display: block; padding: 0 .6rem .45rem;
  color: var(--pervinca-testo);
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.menu-laterale { display: flex; flex-direction: column; gap: .1rem; }
.menu-laterale a {
  display: block; text-decoration: none;
  color: var(--tenue); font-size: .93rem;
  padding: .42rem .6rem; border-radius: var(--raggio-min);
}
.menu-laterale a::before { content: "\276F"; color: var(--pervinca); margin-right: .55rem; font-size: .75em; }
.menu-laterale a:hover { color: #fff; background: rgba(255,255,255,.06); }
.menu-laterale a:hover::before { color: var(--pervinca-testo); }
.menu-laterale a.attiva { color: #fff; background: var(--azione); font-weight: 600; }
.menu-laterale a.attiva::before { color: #fff; }

.laterale .identita {
  border-top: 1px solid var(--bordo); margin-top: 1.4rem; padding: 1rem .6rem 0;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-size: .85rem;
}
.laterale .identita .chi { color: #fff; font-weight: 600; }
.laterale .identita a { color: var(--tenue); text-decoration: none; }
.laterale .identita a:hover { color: #fff; }

/* ---- Colonna destra: sottomenu e stato della pagina aperta ---- */
/* La colonna di destra scorre per conto suo: resta ferma mentre il contenuto
   centrale scorre, e se le voci non ci stanno si scorre lei, non la pagina. */
.contestuale {
  position: sticky; top: 1.4rem;
  display: grid; gap: .9rem; align-content: start;
  max-height: calc(100vh - 2.8rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: .35rem;          /* spazio per la barra, che non copra i riquadri */
  scrollbar-width: thin; scrollbar-color: var(--bordo-vivo) transparent;
}
.contestuale::-webkit-scrollbar { width: 8px; }
.contestuale::-webkit-scrollbar-track { background: transparent; }
.contestuale::-webkit-scrollbar-thumb { background: var(--bordo-vivo); border-radius: 4px; }
.contestuale::-webkit-scrollbar-thumb:hover { background: var(--pervinca); }

/* Il menu dell'organizzatore: stesso riquadro degli altri, etichetta in oro
   perche' non si confonda con le voci che vedono tutti. */
.riquadro.organizzatore { border-color: rgba(243,188,93,.28); }
.riquadro.organizzatore > .titolo { color: var(--oro); }
.riquadro.organizzatore .sottomenu a.attiva { background: var(--bordo-vivo); }
.riquadro {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 1rem 1.1rem;
}
.riquadro > .titolo {
  display: block; margin-bottom: .7rem;
  color: var(--pervinca-testo);
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.riquadro .dato { font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1.2; }
.riquadro .sotto { color: var(--tenue); font-size: .85rem; margin-top: .2rem; }
.riquadro.chiuso { border-color: #8e1436; }
.riquadro.aperto { border-color: #4a4695; }
.riquadro .sottomenu { display: flex; flex-direction: column; gap: .1rem; margin: -.2rem -.4rem; }
.riquadro .sottomenu a {
  color: var(--tenue); text-decoration: none; font-size: .9rem;
  padding: .32rem .4rem; border-radius: 6px;
}
.riquadro .sottomenu a:hover { color: #fff; background: rgba(255,255,255,.06); }
.riquadro .sottomenu a.attiva { color: #fff; font-weight: 600; }

/* ---- Schermi stretti ----
   A 1100px la colonna di destra scende sotto il contenuto: è contestuale,
   non essenziale. A 820px anche il menu passa sopra, disposto in linea. */
@media (max-width: 1100px) {
  .telaio { grid-template-columns: 14rem minmax(0, 1fr); }
  .contestuale {
    grid-column: 2; position: static;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    max-height: none; overflow: visible; padding-right: 0;
  }
}
@media (max-width: 820px) {
  .telaio { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .contestuale { grid-column: 1; }
  .laterale {
    position: static;
    max-height: none; overflow: visible; padding-right: 0;
  }
  .laterale .marchio { margin-bottom: .8rem; text-align: center; }
  .gruppo-menu { margin-bottom: .8rem; }
  .menu-laterale { flex-direction: row; flex-wrap: wrap; }
  .menu-laterale a { font-size: .88rem; padding: .35rem .7rem; background: rgba(255,255,255,.04); }
  .laterale .identita { margin-top: 1rem; }
}

/* ---- La firma, in fondo a ogni pagina ---- */
.firma {
  margin: 3rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--bordo);
  color: var(--tenue); font-size: .82rem; letter-spacing: .04em;
}

/* ---- Riquadro per scrivere i testi lunghi (regolamento, albo d'oro) ---- */
textarea.editore {
  min-height: 34rem; resize: vertical;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: .88rem; line-height: 1.6; letter-spacing: 0;
  white-space: pre; overflow-wrap: normal; overflow-x: auto;  /* le tabelle non vanno a capo */
  tab-size: 2;
}

/* Nota rientrata dentro i documenti */
blockquote {
  margin: 1.2rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--bordo-vivo);
  color: var(--tenue);
}

/* ---- Indice in cima ai documenti lunghi ---- */
.indice { margin-bottom: 1.6rem; }
.indice > .titolo {
  display: block; margin-bottom: .8rem;
  color: var(--pervinca-testo);
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.indice ol {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: 2rem;   /* ventinove articoli in colonna sola sono un muro */
}
.indice li { break-inside: avoid; margin: 0 0 .2rem; }
.indice a {
  display: block; text-decoration: none; color: var(--testo);
  font-size: .8rem; line-height: 1.35; padding: .1rem 0;
}
/* Niente sottolineatura nemmeno passandoci sopra: ventinove voci vicine
   diventano un reticolo. Il segnale e' il colore. */
.indice a:hover { color: #fff; text-decoration: none; }
@media (max-width: 700px) { .indice ol { columns: 1; } }

/* Le sezioni del documento: un filo di stacco fra un articolo e l'altro,
   e il salto dell'indice non deve incollare il titolo al bordo dello schermo. */
.documento h3 { scroll-margin-top: 1.5rem; padding-top: .4rem; }

/* ---- Le formazioni di tutte le squadre, in home ---- */
.griglia-formazioni {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .9rem; align-items: start;
}
.formazione-squadra {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); overflow: hidden;
}
.formazione-squadra.mia { border-color: var(--azione); }
.formazione-squadra > header {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .55rem .8rem; background: var(--carta-alta); border-bottom: 1px solid var(--bordo);
}
.formazione-squadra .nome   { font-weight: 700; font-size: .9rem; color: #fff; }
.formazione-squadra .modulo {
  color: var(--oro); font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.formazione-squadra ol { margin: 0; padding: .5rem .8rem; list-style: none; }
.formazione-squadra li {
  display: flex; align-items: baseline; gap: .45rem;
  font-size: .82rem; line-height: 1.5;
}
.formazione-squadra .riserve { padding-top: .1rem; padding-bottom: .7rem; color: var(--tenue); }
.formazione-squadra .etichetta-riserve {
  display: block; margin: .1rem .8rem .1rem;
  padding-top: .45rem; border-top: 1px solid var(--bordo);
  color: var(--pervinca-testo);
  font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
/* La lettera del ruolo: larghezza fissa, così i nomi restano incolonnati. */
.formazione-squadra .r {
  flex: none; width: 1.05rem; text-align: center;
  border-radius: 3px; font-size: .6rem; font-weight: 700; line-height: 1.05rem;
  color: var(--fondo);
}
.formazione-squadra .r-p { background: #f3bc5d; }   /* portiere      */
.formazione-squadra .r-d { background: #9bb8e8; }   /* difensore     */
.formazione-squadra .r-c { background: #9fd6b0; }   /* centrocampista*/
.formazione-squadra .r-a { background: #eda2b6; }   /* attaccante    */
.formazione-squadra .r-\? { background: var(--bordo-vivo); color: var(--testo); }

/* ---- Correzione delle rose ---- */
.rosa-modificabile td { padding: .3rem .5rem; vertical-align: middle; }
.rosa-modificabile input[type=text] { padding: .35rem .5rem; font-size: .9rem; }
.rosa-modificabile select { padding: .35rem .5rem; font-size: .9rem; }
.rosa-modificabile .punti { color: var(--tenue); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rosa-modificabile .togli { white-space: nowrap; }
.rosa-modificabile .cancella { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 400; }
.rosa-modificabile tr.nuovo input[type=text]::placeholder { color: var(--tenue); }
.rosa-modificabile tr.nuovo td { background: rgba(255,255,255,.025); }
/* Il segno «schierato» avvisa prima del clic: quel giocatore è in una
   formazione già salvata, toglierlo la lascia con un nome senza ruolo. */
.schierato {
  display: inline-block; padding: 0 .4rem; border-radius: 4px;
  background: rgba(243,188,93,.16); color: var(--oro);
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* Credito residuo dell'asta: si legge accanto al nome della squadra */
.credito { color: var(--oro); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Il capitano di squadra (regolamento, articolo 20) ---- */
.capitano-nome { color: var(--verde-capitano); font-weight: 700; }
.rosa-modificabile .capitano { text-align: center; width: 2.6rem; }
.rosa-modificabile .capitano input[type=radio] { width: auto; margin: 0; accent-color: var(--verde-capitano); }
.scelta-capitano {
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
  margin: 0 0 .8rem;
}
.scelta-capitano input[type=radio] { width: auto; margin: 0; }

/* La quotazione, accanto al pulsante del capitano */
.rosa-modificabile .capitano { text-align: left; width: 7.5rem; white-space: nowrap; }
.rosa-modificabile input.quota {
  width: 4.2rem; margin-left: .45rem; padding: .3rem .35rem;
  font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums;
}
.rosa-modificabile input.quota::placeholder { color: var(--tenue); font-size: .8em; }

/* La quotazione accanto al nome del capitano, nella griglia delle rose */
.quota-capitano {
  font-weight: 400; font-size: .82em; font-variant-numeric: tabular-nums;
  color: var(--fondo); background: var(--verde-capitano);
  border-radius: 4px; padding: 0 .3em; margin-left: .15em;
}

/* Numero di versione, in coda alla firma: serve a sapere cosa gira davvero */
.firma .versione { color: var(--bordo-vivo); margin-left: .6rem; font-variant-numeric: tabular-nums; }