/* Mini Olimpiadi Rovegno — foglio di stile unico.
   Mobile-first: le regole base valgono per il telefono, i @media allargano.
   Niente framework: la pagina piu' pesante e' la classifica e deve aprirsi
   subito anche con una tacca di segnale. */

:root {
  --verde: #2f7d4f;
  --verde-scuro: #1f5c39;
  --verde-chiaro: #e6f2ea;
  --rosso: #c0392b;
  --oro: #f2c94c;
  --argento: #dcdcdc;
  --bronzo: #e8b48a;
  --inchiostro: #1c2321;
  --tenue: #6b7672;
  --bordo: #dce3df;
  --sfondo: #f7f9f7;
  --carta: #ffffff;
  --raggio: 10px;
  --ombra: 0 1px 3px rgba(0, 0, 0, .08);
  /* bersaglio minimo per un dito, guanti compresi */
  --tocco: 46px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--inchiostro);
  background: var(--sfondo);
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .6rem; }
a { color: var(--verde-scuro); }
code { background: #eef2ef; padding: .1em .35em; border-radius: 4px; font-size: .9em; }

/* --- barra --------------------------------------------------------------- */

.barra {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .55rem .9rem;
  background: var(--verde);
  color: #fff;
  /* appiccicata solo da tablet in su: vedi il @media piu' sotto */
  z-index: 20;
}
.barra a { color: #fff; text-decoration: none; }
.marchio { font-weight: 700; display: flex; align-items: center; gap: .45rem; }
.marchio-luogo { font-weight: 400; opacity: .85; }
.cerchi {
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 8px 0 0 -3px var(--oro), 16px 0 0 -3px #fff;
  margin-right: 14px;
}
/* Sul telefono le voci non vanno a capo una sotto l'altra (quattro righe di
   barra sono un quarto dello schermo del giudice): scorrono in orizzontale su
   una riga sola sotto al marchio. */
.menu {
  display: flex; gap: .25rem;
  order: 3; flex-basis: 100%;
  flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a { flex: 0 0 auto; }
.uscita { margin-left: auto; }
/* "Rovegno" e il nome di chi e' collegato sono i primi a saltare: servono a
   orientarsi, non a lavorare, e cosi' marchio e uscita stanno su una riga. */
.marchio-luogo, .utente-nome { display: none; }
.utente span { display: none; }
.menu a { padding: .35rem .6rem; border-radius: 999px; font-size: .95rem; }
.menu a.attivo, .menu a:hover { background: rgba(255, 255, 255, .18); }
.uscita { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.utente-nome { opacity: .85; }
.collegamento {
  background: none; border: 1px solid rgba(255, 255, 255, .5); color: #fff;
  padding: .25rem .7rem; border-radius: 999px; cursor: pointer; font: inherit;
}
.accedi { text-decoration: none; }

/* --- impaginazione ------------------------------------------------------- */

.contenuto { max-width: 68rem; margin: 0 auto; padding: 1rem .9rem 3rem; }
/* Le classifiche si guardano anche da lontano, su un monitor grande o
   proiettate: prendono tutta la larghezza invece di lasciare due bande bianche
   ai lati, e su schermi larghi il testo cresce per restare leggibile. */
/* Sul telefono il margine resta quello di sempre: 390px sono pochi e non se ne
   possono regalare 50 ai bordi. Il respiro in piu' parte dal tablet in su. */
.contenuto.largo { max-width: none; }
.campo { max-width: 46rem; }
.accesso { max-width: 24rem; margin: 2.5rem auto; padding: 0 1rem 3rem; }
.copertina { max-width: 60rem; }
.pie {
  padding: 1rem .9rem 2rem; text-align: center; color: var(--tenue);
  font-size: .85rem; border-top: 1px solid var(--bordo);
}
.pie-proloco { display: block; margin-top: .25rem; }
.briciole { margin: 0 0 .5rem; font-size: .9rem; }
.sottotitolo { color: var(--tenue); margin-top: 0; }
.nota { color: var(--tenue); font-size: .88rem; }
.tenue { color: var(--tenue); }
.vuoto { color: var(--tenue); padding: 1.25rem 0; }
.nascosto { display: none; }

/* --- copertina ----------------------------------------------------------- */

.ingresso { text-align: center; padding: 2rem 0 1rem; }
.occhiello { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--tenue); margin: 0; }
.ingresso h1 { font-size: 2rem; margin: .3rem 0; }
.edizione { font-size: 1.2rem; color: var(--verde-scuro); font-weight: 600; margin: .2rem 0; }
.quando, .dove { margin: .15rem 0; color: var(--tenue); }
.azioni-copertina { margin: 1.5rem 0 .5rem; }
.contatore { color: var(--tenue); font-size: .9rem; }
.riquadri { display: grid; gap: 1rem; margin-top: 2rem; }
.riquadro { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem; }
.riquadro h2 { margin-top: 0; font-size: 1rem; }
.riquadro p { margin: 0; color: var(--tenue); font-size: .92rem; }

/* --- bottoni ------------------------------------------------------------- */

.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tocco);
  padding: .5rem 1rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--inchiostro);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.bottone:active { transform: translateY(1px); }
.bottone.primario { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.bottone.secondario { background: #f1f4f2; }
.bottone.tenue { background: none; border-color: transparent; color: var(--tenue); text-decoration: underline; }
.bottone.pericoloso { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.bottone.grande { width: 100%; font-size: 1.05rem; min-height: 52px; }
.bottone.piccolo { min-height: 34px; padding: .2rem .6rem; font-size: .88rem; }
.bottone[disabled] { opacity: .5; }
.azioni-pagina { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }

/* --- form ---------------------------------------------------------------- */

label { display: block; font-size: .85rem; color: var(--tenue); margin-bottom: .6rem; }
input, select, textarea {
  display: block; width: 100%;
  min-height: var(--tocco);
  margin-top: .2rem;
  padding: .45rem .6rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  font: inherit;
  color: var(--inchiostro);
}
input:focus, select:focus { outline: 2px solid var(--verde); outline-offset: 1px; }
fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .4rem .7rem .6rem; margin: 0 0 .6rem; }
legend { font-size: .85rem; color: var(--tenue); padding: 0 .3rem; }
.in-linea { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; margin: .4rem 0; }
.in-linea label { margin-bottom: 0; }
.in-linea input, .in-linea select { display: inline-block; width: auto; }
.riga-form { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .3rem 0; }
.riga-form input, .riga-form select { display: inline-block; width: auto; min-height: 38px; margin-top: 0; }
.filtri { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.filtri select, .filtri input { width: auto; flex: 1 1 10rem; margin-top: 0; }
.spunta-riga { display: flex; align-items: center; gap: .5rem; color: var(--inchiostro); font-size: 1rem; }
.spunta-riga input { width: auto; min-height: auto; margin: 0; }
.avanzate { margin: .3rem 0 .8rem; }
.avanzate summary { color: var(--tenue); font-size: .9rem; cursor: pointer; }

/* --- avvisi -------------------------------------------------------------- */

.avviso-ok, .avviso-ko, .avviso-attenzione {
  padding: .6rem .8rem; border-radius: var(--raggio); margin: .6rem 0; font-size: .95rem;
}
.avviso-ok { background: var(--verde-chiaro); color: var(--verde-scuro); }
.avviso-ko { background: #fdeceb; color: var(--rosso); }
.avviso-attenzione { background: #fff6e0; color: #8a6100; }
.avviso-rete {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 1rem; z-index: 50;
  background: var(--rosso); color: #fff;
  padding: .7rem 1.1rem; border-radius: var(--raggio);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); font-weight: 600;
}

/* --- tabelle ------------------------------------------------------------- */

.tabella, .classifica {
  width: 100%; border-collapse: collapse; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden;
}
.tabella th, .tabella td, .classifica th, .classifica td {
  padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--bordo); font-size: .95rem;
}
.tabella th, .classifica th { background: #f1f4f2; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); }
.tabella tr:last-child td, .classifica tr:last-child td { border-bottom: none; }
.tabella.stretta { max-width: 26rem; }
.col-pos, .col-pett, .col-punti { text-align: right; white-space: nowrap; width: 1%; }
.col-pos { text-align: center; font-weight: 700; }
.col-punti { font-weight: 700; }
.col-misura { text-align: right; white-space: nowrap; }
.cella-barra { width: 40%; }
.tabella-iscritti td { font-size: .9rem; }
.azioni-riga { text-align: right; white-space: nowrap; width: 1%; }

/* --- classifiche --------------------------------------------------------- */

.chip-riga { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem 0 .6rem; -webkit-overflow-scrolling: touch; }
.chip {
  flex: 0 0 auto; padding: .45rem .8rem; border-radius: 999px;
  background: var(--carta); border: 1px solid var(--bordo);
  text-decoration: none; font-size: .9rem; white-space: nowrap;
}
.chip.attivo { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.chip-riga.sottile .chip { font-size: .82rem; padding: .3rem .65rem; }

.blocco-classifica { margin-top: .5rem; }
.testata-classifica { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.testata-classifica h2 { margin: .3rem 0; font-size: 1.05rem; }
.aggiornamento { color: var(--tenue); font-size: .82rem; margin: 0; }
.pallino-live, .pallino-attesa {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .3rem;
  background: var(--verde);
}
.pallino-live { animation: pulsa 2s infinite; }
.pallino-attesa { background: var(--bordo); }
@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.riga-atleta { cursor: pointer; }
.riga-atleta:hover { background: #f6faf7; }
.podio-1 { background: rgba(242, 201, 76, .28); }
.podio-2 { background: rgba(220, 220, 220, .45); }
.podio-3 { background: rgba(232, 180, 138, .3); }
.podio .nome { font-weight: 600; }
.fuori-gara { color: var(--tenue); }
.etichetta-stato { color: var(--tenue); font-size: .85rem; }

.riga-dettaglio td { background: #fbfdfb; padding: 0; }
.dettaglio-gare { list-style: none; margin: 0; padding: .4rem .6rem; }
.dettaglio-gare li {
  display: grid; grid-template-columns: 1fr auto 2.2rem 2.2rem;
  gap: .5rem; padding: .25rem 0; font-size: .88rem;
  border-bottom: 1px dashed var(--bordo);
}
.dettaglio-gare li:last-child { border-bottom: none; }
.dettaglio-gare .misura { font-variant-numeric: tabular-nums; }
.dettaglio-gare .piazzamento, .dettaglio-gare .punti-gara { text-align: right; }
.dettaglio-gare .punti-gara { font-weight: 700; }
.dettaglio-gare .senza-punti { color: var(--tenue); }

/* --- tessere (scelta gara / gruppo) -------------------------------------- */

.fascia-oraria { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.tessere { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.tessera {
  display: grid; gap: .3rem;
  padding: .85rem 1rem;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  text-decoration: none; color: inherit; box-shadow: var(--ombra);
  min-height: 68px;
}
.tessera:active { background: var(--verde-chiaro); }
.tessera.completa { border-color: var(--verde); }
.tessera-nome { font-weight: 600; font-size: 1.05rem; }
.tessera-nota { color: var(--tenue); font-size: .82rem; }
.tessera-conteggio { color: var(--tenue); font-size: .82rem; font-variant-numeric: tabular-nums; }
.barra-avanzamento { display: block; height: 6px; background: #e9eeeb; border-radius: 3px; overflow: hidden; }
.barra-avanzamento > span { display: block; height: 100%; background: var(--verde); }

/* --- vista di campo ------------------------------------------------------ */

/* Sul telefono la barra scorre via: al giudice servono righe di atleti, non
   un menu sempre presente. Resta appiccicata la testata, che dice quale gara
   e quale gruppo si sta compilando: quella serve mentre si scorre. */
.testata-campo { position: sticky; top: 0; background: var(--sfondo); padding: .4rem 0; z-index: 10; box-shadow: 0 6px 8px -8px rgba(0, 0, 0, .35); }
.testata-campo h1 { font-size: 1.2rem; margin: 0; }
.testata-campo .sottotitolo { font-size: .85rem; margin: 0; }

.legenda { margin: .5rem 0 0; font-size: .85rem; color: var(--tenue); }
.legenda summary { cursor: pointer; padding: .3rem 0; }
.legenda ul { margin: .3rem 0 .2rem; padding-left: 1.1rem; }
.legenda li { margin-bottom: .25rem; }
.legenda strong { color: var(--inchiostro); }

.elenco-campo { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.riga-gara {
  background: var(--carta); border: 1px solid var(--bordo); border-left: 5px solid var(--bordo);
  border-radius: var(--raggio); padding: .6rem .7rem; box-shadow: var(--ombra);
}
.riga-gara.stato-risultato { border-left-color: var(--verde); }
.riga-gara.stato-tentato { border-left-color: var(--oro); }
.riga-gara.stato-assente { border-left-color: var(--tenue); opacity: .72; }
.riga-gara.errore { border-left-color: var(--rosso); background: #fffafa; }
.riga-intestazione { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .45rem; }
.pettorale {
  font-variant-numeric: tabular-nums; font-weight: 700;
  background: var(--inchiostro); color: #fff; border-radius: 6px;
  padding: .1rem .4rem; font-size: .9rem;
}
.pettorale.grande { font-size: 1.1rem; padding: .2rem .55rem; }
.riga-intestazione .nome { flex: 1; font-weight: 600; }
.esito-corrente { color: var(--tenue); font-size: .9rem; font-variant-numeric: tabular-nums; }

.riga-controlli { display: flex; gap: .4rem; flex-wrap: wrap; }
.riga-controlli input {
  flex: 1 1 7rem; min-width: 6rem; margin-top: 0;
  font-size: 1.15rem; font-variant-numeric: tabular-nums; text-align: center;
}
.riga-controlli .bottone { flex: 0 0 auto; padding: .5rem .75rem; }
.riga-controlli .bottone.primario { flex: 0 0 5.5rem; }
.errore-riga { color: var(--rosso); font-size: .85rem; margin: .45rem 0 0; }

.appena-salvato { animation: lampo 1.1s ease-out; }
@keyframes lampo {
  0% { background: #d8f0e0; }
  100% { background: var(--carta); }
}
/* indicatore di richiesta in corso: la riga si smorza finche' non torna */
.riga-gara.htmx-request { opacity: .55; }

/* --- iscrizioni ---------------------------------------------------------- */

.form-iscrizione { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .9rem; }
.campi { display: grid; gap: 0 .7rem; grid-template-columns: 1fr; }
.sesso { display: flex; align-items: center; gap: 1rem; }
.sesso label { display: flex; align-items: center; gap: .3rem; margin: 0; color: var(--inchiostro); font-size: 1rem; }
.sesso input { width: auto; min-height: auto; margin: 0; }
.forzatura { background: #fff6e0; border-radius: var(--raggio); padding: .6rem .7rem; margin-bottom: .6rem; }
.esito-iscrizione {
  background: var(--verde-chiaro); border: 1px solid var(--verde);
  border-radius: var(--raggio); padding: .8rem; margin-bottom: .8rem;
}
.assegnato { display: flex; align-items: center; gap: .75rem; margin: 0 0 .6rem; }
.azioni-esito { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.contatore-inline { color: var(--tenue); font-weight: 400; font-size: 1rem; }

.spunta {
  border: 1px solid var(--bordo); background: var(--carta); color: var(--tenue);
  border-radius: 999px; padding: .25rem .7rem; font: inherit; font-size: .82rem;
  cursor: pointer; min-height: 34px; white-space: nowrap;
}
.spunta.fatta { background: var(--verde-chiaro); border-color: var(--verde); color: var(--verde-scuro); font-weight: 600; }

.elenco-trovati { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .4rem; }
.elenco-trovati a {
  display: flex; align-items: center; gap: .6rem; padding: .7rem;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  text-decoration: none; color: inherit; min-height: var(--tocco);
}
.elenco-trovati .nome { flex: 1; font-weight: 600; }
.elenco-trovati .gruppo { color: var(--tenue); font-size: .82rem; }
.cerca { display: flex; gap: .5rem; }
.cerca input { flex: 1; margin-top: 0; }

.numeroni { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1rem 0; }
.numerone {
  display: grid; gap: .1rem; padding: 1rem; text-align: center;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  text-decoration: none; color: inherit;
}
.numerone .cifra { font-size: 2rem; font-weight: 700; line-height: 1; }
.numerone .didascalia { color: var(--tenue); font-size: .82rem; }
.numerone.allarme { border-color: var(--rosso); }
.numerone.allarme .cifra { color: var(--rosso); }

.stato-agente { border-radius: var(--raggio); padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid var(--bordo); }
.stato-agente p { margin: .2rem 0; font-size: .92rem; }
.stato-agente .titolo-stato { font-weight: 700; font-size: 1rem; }
.stato-agente.acceso { background: var(--verde-chiaro); border-color: var(--verde); color: var(--verde-scuro); }
.stato-agente.spento { background: #fdeceb; border-color: var(--rosso); color: var(--rosso); }

.blocco-stampe { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem; margin-bottom: 1rem; }
.blocco-stampe h2 { margin-top: 0; }
.blocco-stampe p { color: var(--tenue); font-size: .92rem; }

.pericolo { color: var(--rosso); }
.zona-pericolo { border: 1px solid #f2c9c4; border-radius: var(--raggio); padding: .8rem; background: #fffafa; }
.zona-pericolo form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.zona-pericolo .nota { margin: 0; }

/* --- schermi larghi ------------------------------------------------------ */

@media (min-width: 40rem) {
  /* da qui in su lo schermo e' abbastanza alto: la barra puo' restare in vista
     e le voci tornano su una riga accanto al marchio */
  .barra { position: sticky; top: 0; }
  .menu { order: 0; flex: 1; flex-basis: auto; flex-wrap: wrap; overflow: visible; }
  .testata-campo { top: 52px; }
  .contenuto.largo { padding-left: 1.5rem; padding-right: 1.5rem; }
  .campi { grid-template-columns: repeat(2, 1fr); }
  .campi .campo-stretto { grid-column: span 1; }
  .riquadri { grid-template-columns: repeat(3, 1fr); }
  .tessere { grid-template-columns: repeat(2, 1fr); }
  .bottone.grande { width: auto; min-width: 16rem; }
  .numeroni { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 60rem) {
  .tessere { grid-template-columns: repeat(3, 1fr); }
  .elenco-campo { grid-template-columns: repeat(2, 1fr); }
}

/* Monitor grande o proiettore: la classifica deve leggersi dal fondo della
   sala, non riempire la larghezza con caratteri piccoli. */
@media (min-width: 90rem) {
  .largo .classifica td { font-size: 1.35rem; padding: .7rem .8rem; }
  .largo .classifica th { font-size: .9rem; }
  .largo .testata-classifica h2 { font-size: 1.5rem; }
  .largo .dettaglio-gare li { font-size: 1.05rem; }
}

@media print {
  .barra, .pie, .chip-riga, .azioni-pagina, .filtri { display: none; }
  body { background: #fff; }
}