/* Tema scuro unico: si usa in palestra, spesso con le luci basse e lo schermo al minimo.
   Tutto ciò che si tocca è alto almeno 52px, per usarlo con un pollice. */
:root {
  --fondo: #0f1115;
  --pannello: #181b22;
  --pannello-2: #222630;
  --bordo: #2e3340;
  --testo: #f2f3f5;
  --testo-2: #a3a9b6;
  --accento: #ff6b2c;
  --accento-scuro: #c94a14;
  --ok: #3ccf7a;
  --errore: #ff5c5c;
  --raggio: 14px;
  --tocco: 56px;
  --sicuro-sotto: env(safe-area-inset-bottom, 0px);
  --sicuro-sopra: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

#vista {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(16px + var(--sicuro-sopra)) 16px calc(96px + var(--sicuro-sotto));
}
body.senza-schede #vista { padding-bottom: calc(24px + var(--sicuro-sotto)); }

h1 { font-size: 1.6rem; margin: 4px 0 16px; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin: 24px 0 10px; color: var(--testo-2); font-weight: 600; }
p { margin: 8px 0; }
.piccolo { font-size: 0.9rem; color: var(--testo-2); }
.vuoto { color: var(--testo-2); text-align: center; padding: 32px 8px; }

/* Pulsanti */
button, .pulsante {
  font: inherit;
  min-height: var(--tocco);
  padding: 0 20px;
  border-radius: var(--raggio);
  border: 1px solid var(--bordo);
  background: var(--pannello-2);
  color: var(--testo);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  touch-action: manipulation;
  user-select: none;
}
button:active, .pulsante:active { transform: scale(0.98); }
button:disabled { opacity: 0.45; }
button.primario, .pulsante.primario { background: var(--accento); border-color: var(--accento); color: #1a0d05; }
button.primario:active { background: var(--accento-scuro); }
button.pericolo { color: var(--errore); }
button.largo, .pulsante.largo { width: 100%; }
button.enorme { min-height: 72px; font-size: 1.2rem; width: 100%; }
button.piatto { background: transparent; border-color: transparent; }
button.tondo { min-width: var(--tocco); padding: 0; }
.fila { display: flex; gap: 10px; align-items: center; }
.fila > * { flex: 1; min-width: 0; }
input[type="date"] { min-width: 0; -webkit-appearance: none; appearance: none; }
.fila > .stretto { flex: 0 0 auto; }

/* Moduli */
label { display: block; margin: 14px 0 6px; color: var(--testo-2); font-size: 0.95rem; }
input, select, textarea {
  font: inherit;
  width: 100%;
  min-height: var(--tocco);
  padding: 12px 14px;
  border-radius: var(--raggio);
  border: 1px solid var(--bordo);
  background: var(--pannello);
  color: var(--testo);
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 1px;
}

/* Schede e liste */
.scheda {
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 16px;
  margin: 12px 0;
}
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li > a, .lista > li > button.riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: var(--raggio);
  background: var(--pannello);
  border: 1px solid var(--bordo);
  color: var(--testo);
  text-decoration: none;
  text-align: left;
  font-weight: 500;
}
.lista .dettaglio { color: var(--testo-2); font-size: 0.9rem; font-weight: 400; }
.etichetta {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--pannello-2);
  color: var(--testo-2);
  font-size: 0.8rem;
  font-weight: 600;
}
.etichetta.accento { background: rgba(255, 107, 44, 0.18); color: var(--accento); }

/* Barra delle schede in basso */
#schede {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: rgba(15, 17, 21, 0.96);
  border-top: 1px solid var(--bordo);
  padding-bottom: var(--sicuro-sotto);
  z-index: 10;
  backdrop-filter: blur(8px);
}
#schede a {
  flex: 1;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--testo-2);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
}
#schede a .ico { font-size: 1.35rem; line-height: 1; }
#schede a[aria-current="page"] { color: var(--accento); }

/* Avviso breve in basso */
#avviso {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(80px + var(--sicuro-sotto));
  max-width: 528px;
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: var(--raggio);
  background: var(--pannello-2);
  border: 1px solid var(--bordo);
  z-index: 30;
  text-align: center;
  font-weight: 600;
}
#avviso.errore { border-color: var(--errore); color: var(--errore); }

/* Login */
.accesso { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
.accesso img { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 8px; }
.errore-testo { color: var(--errore); min-height: 1.4em; }

/* Stato della connessione */
.stato-rete {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--testo-2);
}
.stato-rete::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.stato-rete.fuori::before { background: var(--errore); }
.stato-rete.attesa::before { background: var(--accento); }

.testata { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.testata h1 { margin: 4px 0; }

/* Pannello che copre la vista (modifica voce, scelta esercizio) */
.foglio {
  position: fixed; inset: 0;
  background: var(--fondo);
  z-index: 20;
  display: flex; flex-direction: column;
  padding-top: var(--sicuro-sopra);
}
.foglio-testata {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--bordo);
  max-width: 560px; width: 100%; margin: 0 auto;
}
.foglio-testata h2 { margin: 0; color: var(--testo); }
.foglio-corpo {
  flex: 1; overflow-y: auto;
  padding: 8px 16px calc(24px + var(--sicuro-sotto));
  max-width: 560px; width: 100%; margin: 0 auto;
}
body.foglio-aperto { overflow: hidden; }

/* Contatore − valore + */
.contatore { display: flex; gap: 8px; align-items: stretch; }
.contatore button { font-size: 1.6rem; min-width: 64px; }
.contatore-valore { text-align: center; font-size: 1.35rem; font-weight: 700; flex: 1; min-width: 0; }

/* Scelte a bottoni */
.scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scelta { min-width: 56px; padding: 0 14px; }
.scelta.attiva { background: var(--accento); border-color: var(--accento); color: #1a0d05; }

/* Editor del programma */
.giorno .testata-giorno { display: flex; gap: 8px; align-items: center; }
.giorno .testata-giorno input { font-weight: 700; font-size: 1.1rem; }
.voce {
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--bordo);
  padding: 6px 0;
}
.voce:first-of-type { border-top: 0; }
.voce .corpo-voce {
  flex: 1; min-width: 0; text-align: left;
  background: transparent; border: 0; padding: 8px 4px;
  flex-direction: column; align-items: flex-start; gap: 2px;
  font-weight: 600;
}
.voce .corpo-voce .dettaglio { font-weight: 400; color: var(--testo-2); font-size: 0.9rem; }
.voce .sposta { display: flex; flex-direction: column; gap: 4px; }
.voce .sposta button { min-height: 40px; min-width: 44px; padding: 0; font-size: 0.9rem; }
.superset-segno {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 107, 44, 0.18); color: var(--accento); font-weight: 800; font-size: 0.85rem;
}
.barra-salva {
  position: sticky; bottom: calc(76px + var(--sicuro-sotto));
  padding: 12px 0 0;
  background: linear-gradient(transparent, var(--fondo) 30%);
}
.cerca { position: sticky; top: 0; padding: 4px 0 8px; background: var(--fondo); z-index: 1; }

/* Oggi */
h2.grande { font-size: 1.5rem; color: var(--testo); margin: 4px 0 12px; }
.scheda.in-corso { border-color: var(--accento); }
.avviso-coda { border-color: var(--accento); }
.anteprima { list-style: none; padding: 0; margin: 0 0 16px; }
.anteprima li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--bordo); }
.anteprima li:first-child { border-top: 0; }
.anteprima .dettaglio { color: var(--testo-2); font-size: 0.9rem; }
details summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; color: var(--testo-2); font-weight: 600; }
details[open] summary { margin-bottom: 8px; }

/* Modalità palestra */
body.in-palestra #vista { padding-bottom: calc(96px + var(--sicuro-sotto)); }
body.in-palestra.con-recupero #vista { padding-bottom: calc(190px + var(--sicuro-sotto)); }
.palestra-testata { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.palestra-titolo { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.palestra-titolo strong { font-size: 1.1rem; }
.esercizi-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px;
  margin: 0 -16px; padding-left: 16px; padding-right: 16px;
  scrollbar-width: none;
}
.pillola { min-height: 44px; white-space: nowrap; font-size: 0.9rem; padding: 0 14px; border-radius: 99px; flex: 0 0 auto; }
.pillola.attiva { border-color: var(--accento); color: var(--accento); }
.pillola.fatta { color: var(--ok); }
.esercizio-testata { display: flex; align-items: center; gap: 10px; }
.esercizio-testata h1 { margin: 8px 0 4px; }
.obiettivo { font-size: 1.1rem; font-weight: 600; margin: 0 0 6px; }
.nota-coach {
  background: rgba(255, 107, 44, 0.1); border-left: 3px solid var(--accento);
  padding: 10px 12px; border-radius: 8px; margin: 10px 0; white-space: pre-wrap;
}
.serie-elenco { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.serie.chiusa {
  width: 100%; justify-content: flex-start; gap: 14px; text-align: left;
  min-height: 56px; font-weight: 600;
}
.serie.chiusa.fatta { color: var(--ok); }
.serie-n {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pannello); font-size: 0.9rem;
}
.serie.aperta {
  background: var(--pannello); border: 2px solid var(--accento);
  border-radius: var(--raggio); padding: 14px;
}
.serie-testata { display: flex; justify-content: space-between; align-items: center; }
.serie.aperta label { margin-top: 12px; }
.rpe-fila { overflow-x: auto; margin: 0 -14px; padding: 0 14px; scrollbar-width: none; }
.rpe-fila .scelte { flex-wrap: nowrap; }
.rpe-fila .scelta { min-width: 52px; padding: 0 10px; flex: 0 0 auto; }
.palestra-piede {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  display: flex; gap: 10px;
  padding: 10px 16px calc(10px + var(--sicuro-sotto));
  background: rgba(15, 17, 21, 0.97); border-top: 1px solid var(--bordo);
}
.palestra-piede button { flex: 1; min-height: 60px; font-size: 1.05rem; }
.serie-riassunto { margin: 8px 0; padding-left: 24px; }
.serie-riassunto li { padding: 4px 0; }

/* Timer di recupero, sopra i pulsanti in basso */
#recupero {
  position: fixed; left: 0; right: 0; z-index: 13;
  bottom: calc(81px + var(--sicuro-sotto));
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--accento); color: #1a0d05;
}
body:not(.in-palestra) #recupero { bottom: calc(65px + var(--sicuro-sotto)); }
#recupero.finito { background: var(--ok); }
#recupero button { background: rgba(0, 0, 0, 0.15); border-color: transparent; color: inherit; min-width: 56px; }
.recupero-centro { flex: 1; text-align: center; line-height: 1.1; }
.recupero-tempo { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#recupero .piccolo { color: inherit; opacity: 0.8; }

/* Striscia "senza rete" */
#rete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding: calc(4px + var(--sicuro-sopra)) 12px 4px;
  background: #3a2a12; color: #ffcf8a;
  font-size: 0.8rem; font-weight: 600; text-align: center;
}

/* Settimane nell'editor del programma */
.voce.saltata .corpo-voce > span:first-child { text-decoration: line-through; color: var(--testo-2); }
.voce .cambia { color: var(--accento); font-size: 0.8rem; font-weight: 600; }
label.spunta { display: flex; align-items: center; gap: 12px; min-height: 52px; color: var(--testo); font-size: 1rem; }
label.spunta input { width: 26px; height: 26px; min-height: 0; flex: 0 0 auto; accent-color: var(--accento); }
/* Il tasto Salva resta attaccato in basso solo quando c'è qualcosa da salvare. */
.barra-salva:has(button:disabled) { position: static; }