/* Impianto minimale e tipografico: poche linee, molta aria, i numeri in primo piano.
   I colori stanno tutti qui sotto: il tema chiaro e quello scuro cambiano solo
   questi valori, il resto del foglio non sa quale dei due sia attivo. */

:root {
  --fondo:        #fbfbfa;
  --superficie:   #ffffff;
  --testo:        #131715;
  /* i due grigi sono scelti per restare leggibili sul fondo: il piu' chiaro
     e' usato anche per etichette da 11-12px, che hanno bisogno di contrasto */
  --tenue:        #5a635e;
  --debole:       #6b7671;
  --linea:        #e7e9e7;
  --linea-forte:  #d3d8d5;
  --accento:      #0d7a4f;
  --accento-velo: #e9f5ef;
  --attenzione:   #9a6200;
  --negativo:     #b3261e;
  --raggio:       12px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:        #0e100f;
    --superficie:   #151917;
    --testo:        #edf0ee;
    --tenue:        #97a19b;
    --debole:       #7b857f;
    --linea:        #232825;
    --linea-forte:  #333a36;
    --accento:      #4ade80;
    --accento-velo: #13251c;
    --attenzione:   #f0b429;
    --negativo:     #f87171;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum" 1;      /* cifre di larghezza uguale: le colonne restano allineate */
  letter-spacing: -.011em;
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 620px; margin: 0 auto; padding: 20px 20px 72px; }

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

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

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.barra-testo { flex: 1; min-width: 0; }
.barra h1 {
  margin: 0; font-size: 21px; font-weight: 640; letter-spacing: -.021em;
}
.barra p {
  margin: 1px 0 0; font-size: 13px; color: var(--tenue); letter-spacing: 0;
}
.indietro {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none; margin-left: -6px;
  font-size: 24px; line-height: 1; text-decoration: none;
  color: var(--tenue); border-radius: 50%;
}
.indietro:active { background: var(--linea); }
.esci {
  color: var(--tenue); font-size: 13px; text-decoration: none; flex: none;
}

/* ---------- accesso ---------- */

.riquadro {
  margin-top: 28px;
  display: flex; flex-direction: column; gap: 18px;
}
.riquadro label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tenue);
}
.riquadro input {
  font-size: 17px; padding: 14px 0; font-family: inherit;
  color: var(--testo); background: none;
  border: 0; border-bottom: 1.5px solid var(--linea-forte);
  border-radius: 0;
}
.riquadro input:focus { outline: none; border-bottom-color: var(--accento); }
.riquadro button {
  margin-top: 6px; padding: 15px;
  font-size: 16px; font-weight: 600; font-family: inherit;
  border: 0; border-radius: var(--raggio);
  background: var(--accento); color: var(--fondo);
  cursor: pointer;
}
.riquadro button:active { opacity: .85; }
.spiega { margin: 0; font-size: 14px; color: var(--tenue); }
.errore {
  margin: 0; padding: 12px 14px; border-radius: var(--raggio);
  background: var(--accento-velo);
  color: var(--negativo); font-size: 14px;
}

/* ---------- scelta della persona ---------- */

.etichetta-scelta {
  margin: 30px 0 2px; font-size: 11px; font-weight: 660;
  letter-spacing: .08em; text-transform: uppercase; color: var(--debole);
}
.scelta { display: flex; flex-direction: column; }
.persona {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 2px; text-decoration: none; color: var(--testo);
  border-bottom: 1px solid var(--linea);
}
.persona:active { background: var(--linea); }
.iniziale {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accento-velo); color: var(--accento);
  font-size: 19px; font-weight: 650; letter-spacing: -.01em;
}
.persona-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.persona-testo strong { font-size: 19px; font-weight: 620; letter-spacing: -.02em; }
.persona-testo small { color: var(--tenue); font-size: 13px; }
.persona-testo small b { color: var(--testo); font-weight: 650; }
.punto { color: var(--linea-forte); margin: 0 3px; }
.freccia { color: var(--debole); font-size: 22px; flex: none; }

/* ---------- giorni della scheda ---------- */

.giorni {
  display: flex; gap: 6px; overflow-x: auto;
  margin: 0 -20px 22px; padding: 0 20px 2px;
  scrollbar-width: none;
}
.giorni::-webkit-scrollbar { display: none; }
.giorno {
  flex: none; padding: 8px 14px; border-radius: 999px;
  text-decoration: none; color: var(--tenue);
  border: 1px solid var(--linea);
  display: flex; flex-direction: column; align-items: flex-start;
}
.giorno strong {
  font-size: 13px; font-weight: 600; color: inherit; text-transform: capitalize;
}
.giorno small { display: none; }             /* il gruppo e' gia' scritto nella barra */
.giorno.attivo {
  background: var(--testo); border-color: var(--testo); color: var(--fondo);
}

/* ---------- riga della data ---------- */

.riga-data {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 26px;
}
.riga-data label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--debole);
}
.riga-data input[type=date] {
  font-family: inherit; font-size: 15px; font-weight: 550;
  padding: 2px 0; color: var(--testo);
  background: none; border: 0; border-radius: 0;
}
.collegamenti { display: flex; gap: 18px; }
.link-progresso {
  text-decoration: none; color: var(--accento);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  padding: 10px 0;
}

/* ---------- spunte integratori ---------- */

.integratori {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--linea);
}
.spunta {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; min-height: 42px; border-radius: 999px;
  border: 1px solid var(--linea-forte); cursor: pointer;
  font-size: 14px; color: var(--tenue);
  -webkit-user-select: none; user-select: none;
}
.spunta input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--accento); }
.spunta:has(input:checked) {
  border-color: var(--accento); background: var(--accento-velo); color: var(--accento);
  font-weight: 600;
}
.integratori .stato { margin-left: auto; }

/* ---------- esercizio ---------- */

.esercizi { display: flex; flex-direction: column; }
.esercizio { padding: 26px 0; border-bottom: 1px solid var(--linea); }
.esercizio header { display: flex; align-items: flex-start; gap: 13px; }

/* Le figure sono a colori (verde scuro, verde medio, oro): riprodurle in un
   colore solo faceva sparire le parti del disegno. Restano quindi immagini
   vere, appoggiate su un riquadro chiaro che le rende leggibili anche col
   tema scuro. */
.figura {
  flex: none; width: 66px; height: 66px; margin-top: 0;
  border-radius: 12px; background: #fff; padding: 3px;
  object-fit: contain;
}
.titolo-esercizio { flex: 1; min-width: 0; }
.titolo-esercizio h2 {
  margin: 0; font-size: 19px; font-weight: 620; line-height: 1.25; letter-spacing: -.02em;
}
.target {
  margin: 4px 0 0; font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--debole);
}
.nota-scheda { text-transform: none; letter-spacing: 0; font-weight: 400; }

.stato { flex: none; font-size: 13px; color: var(--debole); min-width: 16px; text-align: right; }
.stato.salvato { color: var(--accento); font-size: 15px; }
.stato.attesa { color: var(--attenzione); font-size: 11px; max-width: 96px; line-height: 1.25; }
.stato.errore { color: var(--negativo); font-size: 11px; max-width: 96px; line-height: 1.25; }

.ultima {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 0; font-size: 13px; color: var(--tenue);
}
.ultima strong { color: var(--testo); font-weight: 600; }
.ricopia {
  margin-left: auto; padding: 8px 14px; min-height: 38px;
  border-radius: 999px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--linea-forte); background: none; color: var(--accento);
  font-size: 12px; font-weight: 600;
}
.ricopia:active { background: var(--accento-velo); }

/* ---------- serie ---------- */

.serie { display: flex; flex-direction: column; margin-top: 14px; }
.serie-riga {
  display: grid; grid-template-columns: 20px 1fr 1fr;
  align-items: center; gap: 12px 16px;
  padding: 3px 0;
}
.numero { font-size: 12px; font-weight: 600; color: var(--debole); text-align: center; }
.campo {
  display: flex; flex-direction: row-reverse; align-items: baseline; gap: 6px;
  border-bottom: 1.5px solid var(--linea);
  padding-bottom: 2px;
}
.campo span { font-size: 11px; color: var(--debole); flex: none; }
.campo input {
  flex: 1; width: 100%; min-width: 0;
  background: none; border: 0; color: var(--testo); font-family: inherit;
  font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  padding: 9px 0; text-align: right;
}
.campo input::placeholder { color: var(--linea-forte); }
.campo input:focus { outline: none; }
.campo:focus-within { border-bottom-color: var(--accento); }

.azioni-esercizio { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.aggiungi-serie {
  flex: none; padding: 10px 0; min-height: 42px; cursor: pointer; font-family: inherit;
  background: none; border: 0; color: var(--accento);
  font-size: 13px; font-weight: 600;
}
.nota {
  flex: 1; min-width: 0; padding: 10px 0; min-height: 42px; font-family: inherit;
  background: none; color: var(--testo); font-size: 14px;
  border: 0; border-bottom: 1px solid var(--linea);
}
.nota::placeholder { color: var(--debole); }
.nota:focus { outline: none; border-bottom-color: var(--accento); }

/* ---------- progresso ---------- */

.mese-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 26px;
}
.mese-nav a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; text-decoration: none;
  color: var(--tenue); font-size: 20px; line-height: 1;
}
.mese-nav a:active { background: var(--linea); }
.mese-nav a.spento { opacity: .25; pointer-events: none; }
.mese-nav strong {
  font-size: 17px; font-weight: 640; text-transform: capitalize; letter-spacing: -.02em;
}

.riepilogo { display: flex; gap: 26px; margin-bottom: 26px; }
.riepilogo div { flex: 1; }
.riepilogo b {
  display: block; font-size: 27px; font-weight: 660; letter-spacing: -.03em;
  line-height: 1.1;
}
.riepilogo span {
  display: block; margin-top: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--debole);
}

.riepilogo-integratori {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin: -10px 0 24px; padding-bottom: 22px;
  border-bottom: 1px solid var(--linea);
  font-size: 13px; color: var(--tenue);
}
.riepilogo-integratori b { color: var(--testo); font-weight: 640; }

.titolo-gruppo {
  margin: 30px 0 4px; font-size: 11px; font-weight: 660;
  color: var(--debole); text-transform: uppercase; letter-spacing: .08em;
}

.prog-esercizio { padding: 18px 0; border-bottom: 1px solid var(--linea); }
.prog-testa { display: flex; align-items: center; gap: 12px; }
.prog-testa .figura { width: 42px; height: 42px; margin: 0; border-radius: 9px; padding: 2px; }
.prog-testa h3 {
  margin: 0; font-size: 15px; font-weight: 600; flex: 1; min-width: 0;
  letter-spacing: -.015em;
}
.delta { font-size: 13px; font-weight: 640; white-space: nowrap; }
.delta.su { color: var(--accento); }
.delta.giu { color: var(--negativo); }
.delta.pari { color: var(--debole); }

.prog-numeri { display: flex; gap: 18px; margin-top: 8px; font-size: 12px; color: var(--debole); }
.prog-numeri b { color: var(--testo); font-weight: 620; font-size: 13px; }
.andamento {
  margin-top: 12px; width: 100%; height: 38px; display: block; overflow: visible;
  color: var(--accento);
}
.vuoto { color: var(--tenue); font-size: 15px; text-align: center; padding: 44px 12px; }

.esporta {
  display: block; text-align: center; text-decoration: none;
  padding: 14px; margin: 26px 0 8px;
  border: 1px solid var(--linea-forte); border-radius: var(--raggio);
  color: var(--accento); font-size: 14px; font-weight: 600;
}
.esporta:active { background: var(--accento-velo); }

/* ---------- storico: una linea del tempo ---------- */

.storico { position: relative; padding-left: 28px; margin-top: 4px; }
/* il filo verticale che unisce le sedute */
.storico::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 18px;
  width: 2px; background: var(--linea);
}

.storico-mese {
  position: relative; z-index: 1;
  margin: 30px 0 16px -28px; padding: 0 10px 0 28px;
  font-size: 11px; font-weight: 660; letter-spacing: .08em;
  text-transform: uppercase; color: var(--debole);
  background: var(--fondo);          /* interrompe il filo dietro l'etichetta */
}
.storico-mese:first-child { margin-top: 0; }

.seduta { position: relative; padding: 2px 0 26px; }
/* il pallino sulla linea */
.seduta::before {
  content: ""; position: absolute; left: -28px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  background: var(--fondo); border: 2px solid var(--linea-forte);
}
.seduta.recente::before { background: var(--accento); border-color: var(--accento); }

.seduta-testa { display: flex; align-items: baseline; gap: 10px; }
.seduta-quando { display: flex; align-items: baseline; gap: 9px; flex: 1; min-width: 0; }
.seduta-testa h2 {
  margin: 0; font-size: 17px; font-weight: 640; line-height: 1.25; letter-spacing: -.02em;
}
.seduta-testa h2::first-letter { text-transform: uppercase; }
.seduta-rel { font-size: 12px; color: var(--debole); white-space: nowrap; }
.seduta-volume {
  flex: none; color: var(--tenue); font-size: 13px; font-weight: 620; white-space: nowrap;
}
.seduta-gruppo {
  margin: 3px 0 0; font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--debole);
}
.seduta-serie-tot { font-weight: 400; }

.seduta-esercizi { list-style: none; margin: 13px 0 0; padding: 0; }
.seduta-esercizi li {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 6px 0;
}
.seduta-nome { flex: 1; min-width: 120px; font-size: 14px; color: var(--tenue); }
.seduta-serie { font-size: 15px; font-weight: 620; color: var(--testo); white-space: nowrap; }
.seduta-nota { flex-basis: 100%; font-size: 12px; color: var(--debole); margin-top: -2px; }
.seduta-vuota { margin: 10px 0 0; font-size: 13px; color: var(--debole); }
.seduta-integratori { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 0; }
.seduta-integratori span { color: var(--accento); font-size: 12px; font-weight: 600; }

/* ---------- schermi piu' larghi ---------- */

@media (min-width: 640px) {
  .serie {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
  }
}

/* ---------- riga verso il calendario degli integratori ---------- */

.riga-integratori {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 2px; margin-bottom: 4px;
  text-decoration: none; color: var(--testo);
  border-bottom: 1px solid var(--linea);
}
.riga-integratori:active { background: var(--linea); }
.ri-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ri-testo strong { font-size: 15px; font-weight: 620; }
.ri-testo small { font-size: 13px; color: var(--tenue); }
.ri-testo small b { color: var(--accento); font-weight: 650; }

/* ---------- calendario degli integratori ---------- */

.calendari { display: flex; flex-direction: column; gap: 30px; }
.calendario-testa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.calendario-testa h2 { margin: 0; font-size: 17px; font-weight: 620; letter-spacing: -.02em; }
.calendario-conteggio { font-size: 13px; color: var(--tenue); white-space: nowrap; }
.calendario-conteggio b { color: var(--testo); font-weight: 650; }

.calendario-settimana,
.calendario-griglia {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.calendario-settimana {
  margin-bottom: 6px; text-align: center;
  font-size: 10px; font-weight: 660; letter-spacing: .06em; color: var(--debole);
}

.cella {
  aspect-ratio: 1 / 1; min-height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--linea); border-radius: 10px;
  background: none; color: var(--tenue);
  font: inherit; font-size: 14px; font-weight: 550;
  cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.cella.vuota { border: 0; cursor: default; }
.cella.oggi { border-color: var(--tenue); font-weight: 700; }
.cella.presa {
  background: var(--accento); border-color: var(--accento);
  color: var(--fondo); font-weight: 650;
}
.cella:disabled { opacity: .3; cursor: default; }
.cella:active:not(:disabled) { transform: scale(.94); }

.calendario-nota {
  margin: 8px 0 0; font-size: 12px; color: var(--debole);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.calendario-nota .stato { margin-left: auto; }

a.riepilogo-integratori {
  text-decoration: none; color: var(--tenue);
  align-items: center;
}
a.riepilogo-integratori .freccia { margin-left: auto; font-size: 20px; }
a.riepilogo-integratori:active { background: var(--linea); }

/* ---------- timer di recupero ---------- */

.target-recupero { color: var(--tenue); }

.avvia-recupero {
  flex: none; padding: 10px 13px; min-height: 42px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  background: none; color: var(--tenue);
  border: 1px solid var(--linea-forte); border-radius: 999px;
  white-space: nowrap;
}
.avvia-recupero:active { background: var(--accento-velo); color: var(--accento); }

.timer {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--testo); color: var(--fondo);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  max-width: 596px; margin: 0 auto;
}
.timer[hidden] { display: none; }
.timer-tempo {
  font-size: 26px; font-weight: 680; letter-spacing: -.02em;
  min-width: 74px; font-variant-numeric: tabular-nums;
}
.timer-nome {
  flex: 1; min-width: 0; font-size: 13px; opacity: .72;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.timer-piu, .timer-chiudi {
  flex: none; cursor: pointer; font-family: inherit; font-weight: 600;
  background: none; color: inherit; border: 1px solid currentColor;
  border-radius: 999px; opacity: .75;
}
.timer-piu { padding: 8px 12px; min-height: 38px; font-size: 13px; }
.timer-chiudi {
  width: 38px; height: 38px; font-size: 20px; line-height: 1; padding: 0;
  display: grid; place-items: center;
}
.timer-piu:active, .timer-chiudi:active { opacity: 1; }

/* recupero finito: la barra si accende e pulsa */
.timer.finito {
  background: var(--accento);
  color: #06110c;
  animation: timer-pulsa 1s ease-in-out infinite;
}
@keyframes timer-pulsa {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .timer.finito { animation: none; }
}

body.con-timer main { padding-bottom: 124px; }

.opzione-timer {
  margin: 22px 0 0; padding-top: 20px;
  border-top: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.opzione-timer small { font-size: 12px; color: var(--debole); line-height: 1.45; }
.opzione-timer code {
  background: var(--accento-velo); color: var(--accento);
  padding: 1px 5px; border-radius: 5px; font-size: 11px;
}

.prova-comandi {
  align-self: flex-start;
  padding: 10px 14px; min-height: 42px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--linea-forte); border-radius: 999px;
  text-decoration: none; color: var(--accento);
  font-size: 13px; font-weight: 600;
}
.prova-comandi:active { background: var(--accento-velo); }
.esito-prova { font-size: 12px; }

/* quando il timer dell'iPhone e' attivo, il tasto del recupero lo dichiara */
body.timer-iphone .avvia-recupero {
  border-color: var(--accento); color: var(--accento);
}

/* ---------- consiglio di progressione ---------- */

.consiglio {
  margin: 10px 0 0; padding: 9px 12px 9px 14px;
  border-left: 2px solid var(--linea-forte); border-radius: 0 8px 8px 0;
  background: var(--accento-velo);
  font-size: 13px; color: var(--tenue); line-height: 1.4;
}
.consiglio.sali {
  border-left-color: var(--accento); color: var(--accento); font-weight: 600;
}
.consiglio::before { content: "→ "; opacity: .6; }