/* Gestionale Esa C5 - foglio di stile unico.
   Identita' ripresa dai documenti della preparazione: blu linea di campo,
   Barlow Condensed per i titoli, tabellare mono per i numeri.
   Pensato prima per il telefono, poi per lo schermo grande. */

:root {
  --blu:        #1743C3;   /* colore della squadra: barre, link, azioni */
  --blu-chiaro: #e8edfb;
  --blu-scuro:  #0f2f8c;

  --fondo:      #f4f4f1;
  --carta:      #fcfcfb;
  --inchiostro: #0b0b0b;
  --testo-2:    #52514e;
  --tenue:      #898781;
  --riga:       #e1e0d9;
  --base:       #c3c2b7;

  /* stati: colori fissi, sempre accompagnati da un'icona e da una parola */
  --ok:       #0ca30c;
  --attesa:   #fab219;
  --serio:    #ec835a;
  --critico:  #d03b3b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: Barlow, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

h1, h2, h3 {
  font-family: "Barlow Condensed", Barlow, "Segoe UI Condensed", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 0 .4rem;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; margin-top: 0; }
h3 { font-size: 1.05rem; color: var(--testo-2); text-transform: uppercase; letter-spacing: .06em; }

a { color: var(--blu); }

/* --- intestazione e menu --- */

header.barra {
  background: var(--blu);
  color: #fff;
  padding: .6rem 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
header.barra .titolo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
header.barra .titolo strong {
  white-space: nowrap;
  font-family: "Barlow Condensed", Barlow, sans-serif;
  font-size: 1.35rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
header.barra a { color: #fff; text-decoration: none; }
header.barra .chi { font-size: .8rem; opacity: .85; }

nav.menu {
  display: flex;
  gap: .2rem;
  overflow-x: auto;
  margin-top: .5rem;
  -webkit-overflow-scrolling: touch;
}
nav.menu a {
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .9rem;
  white-space: nowrap;
  background: rgba(255,255,255,.14);
}
nav.menu a.attivo { background: #fff; color: var(--blu); font-weight: 600; }

main { max-width: 60rem; margin: 0 auto; padding: 1rem 1rem 4rem; }

/* --- schede --- */

.carta {
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.griglia { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .griglia.due { grid-template-columns: 1fr 1fr; } }

.vuoto { color: var(--tenue); font-style: italic; }
.piccolo { font-size: .85rem; color: var(--testo-2); }
.mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* --- moduli --- */

label { display: block; font-size: .8rem; color: var(--testo-2); margin-bottom: .15rem; }
input[type=text], input[type=password], input[type=date], input[type=time],
input[type=number], input[type=tel], select, textarea {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--base);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  color: inherit;
}
textarea { min-height: 5rem; resize: vertical; }
.campi { display: grid; gap: .6rem; }
@media (min-width: 34rem) { .campi.tre { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 34rem) { .campi.due { grid-template-columns: 1fr 1fr; } }

button, .bottone {
  display: inline-block;
  padding: .55rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--blu);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .bottone:hover { background: var(--blu-scuro); }
button.secondario, .bottone.secondario {
  background: #eceae4; color: var(--inchiostro);
}
button.secondario:hover { background: #ddd9d0; }
button.pericolo { background: transparent; color: var(--critico); font-weight: 500; padding: .3rem .5rem; }
button.pericolo:hover { background: #fbeaea; }

.avvisi { margin-bottom: 1rem; }
.avviso { padding: .6rem .8rem; border-radius: 6px; border-left: 4px solid; margin-bottom: .4rem; }
.avviso.ok { background: #eaf6ea; border-color: var(--ok); }
.avviso.errore { background: #fbeaea; border-color: var(--critico); }

/* --- tabelle --- */

.scorri { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: .45rem .5rem; text-align: left; border-bottom: 1px solid var(--riga); }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 600; }
tbody tr:hover { background: #f7f7f4; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- pastiglie di stato: colore + icona + parola, mai il colore da solo --- */

.stato {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 600;
  padding: .15rem .5rem; border-radius: 999px;
  background: #f0efec; color: var(--testo-2);
}
.stato .segno { font-size: .9em; }
.stato.disponibile { background: #eaf6ea; color: #1a6b1a; }
.stato.acciaccato  { background: #fdf3e0; color: #8a5a09; }
.stato.rientro     { background: #fdeee7; color: #9c4a22; }
.stato.infortunato { background: #fbeaea; color: #992a2a; }
.stato.presente    { background: #eaf6ea; color: #1a6b1a; }
.stato.assente     { background: #fbeaea; color: #992a2a; }
.stato.giustificato{ background: #f0efec; color: var(--testo-2); }

.etichetta {
  display: inline-block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; padding: .1rem .45rem; border-radius: 4px;
  background: var(--blu-chiaro); color: var(--blu-scuro); font-weight: 600;
}

/* --- grafico a barre del carico (una serie sola, quindi un colore solo) --- */

.barre { display: grid; gap: .35rem; margin: .6rem 0 .2rem; }
.riga-carico { display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: .5rem; }
.riga-carico .quando { font-size: .8rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.riga-carico .pista { display: block; background: #edece7; border-radius: 4px; height: 1.1rem; overflow: hidden; }
.riga-carico .riempimento {
  display: block;
  height: 100%;
  background: var(--blu);
  border-radius: 0 4px 4px 0;
  min-width: 2px;
}
.riga-carico .valore { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--testo-2); min-width: 3.6rem; text-align: right; }
.riga-carico.salto .riempimento { background: repeating-linear-gradient(135deg, var(--blu) 0 6px, #3a63d6 6px 12px); }

.legenda-carico { font-size: .8rem; color: var(--tenue); border-top: 1px solid var(--riga); padding-top: .5rem; margin-top: .6rem; }

/* --- appello --- */

.appello .riga-giocatore {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--riga);
}
.appello .numeri { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
@media (min-width: 40rem) {
  .appello .riga-giocatore {
    grid-template-columns: 1fr 13rem 11rem;
    align-items: center;
  }
}
.appello .chi { font-weight: 600; }
.scelta-stato { display: flex; gap: .2rem; }
.scelta-stato label {
  flex: 1; margin: 0; text-align: center; cursor: pointer;
  border: 1px solid var(--base); border-radius: 6px; padding: .35rem .1rem;
  font-size: .78rem; color: var(--testo-2); background: #fff;
}
.scelta-stato input { position: absolute; opacity: 0; pointer-events: none; }
.scelta-stato input:checked + span { font-weight: 700; }
.scelta-stato label:has(input:checked) { border-color: var(--blu); background: var(--blu-chiaro); color: var(--blu-scuro); }

.barra-azioni { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.salva-fisso {
  position: sticky; bottom: 0; background: var(--carta);
  border-top: 1px solid var(--riga); padding: .7rem 0; margin-top: .5rem;
}

details summary { cursor: pointer; font-weight: 600; color: var(--blu); padding: .3rem 0; }