/* stile-temi — foglio di stile di RitMo Coach.
   Stava dentro coach.html (blocco «temi-coach-suite»). */
/* ============================================================
   TEMI — il trainer sceglie un tema intero, non i singoli colori.
   Qui c'è il tema di partenza (Bosco); applicaTema() riscrive queste
   variabili su :root e cambia tutta l'applicazione in un colpo.
   Sotto, i vecchi nomi restano vivi ma pescano dai token nuovi:
   così le 200 KB di regole già scritte non vanno riscritte.
   ============================================================ */
:root{
  /* IL TEMA DI CASA: "RitMo Coach", costruito sul verde del marchio.
     Questi valori sono quelli che si vedono nel mezzo secondo prima che il
     JavaScript legga il tema scelto: quindi devono già essere quelli giusti,
     altrimenti la pagina lampeggia di un altro colore. */
  /* IL FONDO NEUTRO (5 settembre 2026).
     Prima queste quattro superfici avevano il verde dentro (#0A0F0B, #141A15,
     #1E2620): tutta l'applicazione era monocroma verde, ed e' quello che fa
     sembrare un'interfaccia scaricata da un modello. Adesso il fondo e' un
     neutro appena freddo e il colore lo mette SOLO l'accento — che infatti si
     vede molto di piu' di prima, pur essendoci in meno posti.
     L'accento non e' cambiato: e' lo stesso #00FF9A della girandola. */
  --nero-pece:#050609;
  --fondo:#0A0B0D;
  --scheda:#121417;
  --campo:#191C21;
  --accento:#00FF9A;
  --accento-testo:#3DFFB0;
  --su-accento:#00291A;
  --inchiostro:#E7E9EC;
  --grigio:#8B929C;
  --grigio-tenue:#6A7079;
  --filo:rgba(255,255,255,.09);
  --filo-forte:rgba(255,255,255,.20);
  --attesa:#B58200;
  --ritardo:#E0616C;
  --info:#35C8E0;
  --serie-1:#00FF9A;
  --serie-2:#35C8E0;
  --serie-3:#B58200;
  --serie-4:#E0616C;
  --serie-5:#C6FF8A;
  --serie-6:#8B968D;
}
/* LE TINTE DELLE PERSONE — apposta diverse dalle --serie.
   Nell'elenco Clienti il tondo delle iniziali serve a distinguere una persona
   dall'altra, non a dire come sta: lo stato lo dicono il filo di neon a lato e
   la pastiglia. Se il tondo pescasse dalle --serie, uscirebbero tondi VERDI,
   AMBRA e ROSSI — gli stessi tre colori dello stato — e si leggerebbe un
   semaforo dove non c'e': un cerchio rosso accanto alla pastiglia ATTIVO.
   Qui quei tre colori non ci sono: solo ciano, blu, indaco, viola, magenta e
   ardesia. Nessuno di questi vuol dire niente, ed e' esattamente il punto.
   Sono definite una volta e riscritte per i temi chiari, dove servono piu'
   scure per restare leggibili sul bianco. */
:root{
  /* IL SEMAFORO DEGLI STATI, FUORI DAL TEMA.
     Jacopo, 27 agosto: «scaduti rosso, in attesa giallo, attivi verde. Per
     qualsiasi tema, a prescindere se lo cambi rimane sempre così».
     Prima questi tre segnali pescavano da --accento, --attesa e --ritardo,
     che ogni tema riscrive: con un tema blu «attivo» diventava blu, e il
     semaforo smetteva di essere un semaforo. Un colore che vuol dire una cosa
     non può cambiare con la vernice delle pareti.
     Qui i tre colori sono FISSI. Cambia solo la luminosità fra tema scuro e
     chiaro — stesso identico verde, giallo e rosso, appena più scuri quando
     stanno sul bianco, se no il giallo sparisce e il resto non si legge.
     Le -piena sono per le pastiglie riempite (testo bianco sopra). */
  --st-attivo:#22C55E;   --st-attivo-piena:#15803D;
  --st-attesa:#EAB308;   --st-attesa-piena:#A16207;
  --st-scaduto:#EF4444;  --st-scaduto-piena:#B91C1C;
  --pers-1:#4FC3D9;
  --pers-2:#7BA3EA;
  --pers-3:#9B8BE5;
  --pers-4:#C084D8;
  --pers-5:#DA85B2;
  --pers-6:#8497B8;
}
html.tema-chiaro{
  /* stessi tre colori, un gradino più scuri per stare sul bianco */
  --st-attivo:#15803D;
  --st-attesa:#A16207;
  --st-scaduto:#B91C1C;
  --pers-1:#0E7A93;
  --pers-2:#2E5FB0;
  --pers-3:#5B4BB8;
  --pers-4:#8A3FA8;
  --pers-5:#A83F7C;
  --pers-6:#41577E;
}
:root{
  --orange:  var(--accento);
  --orange2: var(--accento-testo);
  --orange3: var(--accento-testo);
  --bg:   var(--fondo);
  --card: var(--scheda);
  --soft: var(--campo);
  --ink:  var(--inchiostro);
  --gray: var(--grigio);
  --line: var(--filo);
  --ok:   var(--accento);      /* il positivo prende il colore del marchio */
  --warn: var(--ritardo);
}
html, body{ background:var(--fondo); color:var(--inchiostro) }

/* ---- scelta del tema, nelle impostazioni ---- */

/* LA SCELTA DEL TEMA, IN DUE MOSSE.
   Prima erano settantaquattro riquadri in fila con l'anteprima e il nome:
   per arrivare in fondo si scorreva un pezzo, e alla fine non si sceglieva
   niente perché erano troppi. Ma i settantaquattro sono trentasette colori
   × due interfacce: quindi si chiedono le due cose separate, ed è la stessa
   scelta fatta in due tocchi invece che in trenta. */
.set-lab{ display:block; margin:16px 0 8px; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grigio); font-weight:700 }
.tema-modo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px }
.tema-modo button{ display:flex; align-items:center; gap:10px; padding:11px 13px;
  border:1px solid var(--filo); border-radius:13px; background:var(--campo);
  color:var(--inchiostro); font:inherit; font-weight:700; font-size:14px; cursor:pointer }
.tema-modo button.on{ border-color:var(--accento); box-shadow:inset 0 0 0 1px var(--accento) }
.tema-modo .tm-prova{ width:34px; height:26px; border-radius:7px; flex:0 0 34px;
  display:flex; flex-direction:column; gap:3px; padding:4px; box-sizing:border-box }
.tema-modo .tm-prova i{ height:4px; border-radius:99px; width:70%; background:var(--accento) }
.tema-modo .tm-prova b{ flex:1; border-radius:4px }
.tema-modo .tm-scuro{ background:#0A0F0B; border:1px solid rgba(255,255,255,.14) }
.tema-modo .tm-scuro b{ background:#141A15 }
.tema-modo .tm-chiaro{ background:#EEF4EE; border:1px solid rgba(6,12,7,.14) }
.tema-modo .tm-chiaro b{ background:#FFFFFF }

#temiColori{ display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:9px }
.colBtn{ position:relative; aspect-ratio:1; border-radius:50%; border:2px solid transparent;
  padding:0; cursor:pointer; background:none }
.colBtn span{ display:block; width:100%; height:100%; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) }
.colBtn:hover{ transform:scale(1.08) }
.colBtn.scelto{ border-color:var(--inchiostro) }
.colBtn.scelto::after{ content:"✓"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:15px; font-weight:900;
  color:var(--su-accento) }
.colBtn.ufficiale span{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 2px var(--fondo), 0 0 0 3px var(--accento) }
.tema-nome{ margin-top:12px; font-size:13.5px; color:var(--grigio) }
.tema-nome b{ color:var(--inchiostro); font-weight:700 }

#temiGriglia{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:12px; margin-top:12px }
.temaBtn{ position:relative; border:1px solid var(--filo); border-radius:12px; padding:0;
  overflow:hidden; cursor:pointer; background:none; text-align:left;
  transform:scale(1); transition:transform .16s cubic-bezier(.2,.9,.3,1) }
.temaBtn:hover{ transform:scale(1.025) }
.temaBtn:active{ transform:scale(.985) }
.temaBtn:focus-visible{ outline:2px solid var(--accento); outline-offset:2px }
.temaBtn .bollino{ position:absolute; top:7px; right:7px; z-index:2;
  background:var(--accento); color:var(--su-accento); font-size:9.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; border-radius:99px; padding:3px 7px;
  box-shadow:0 2px 8px rgba(0,0,0,.35); }
.temaBtn .cielo{ height:74px; padding:9px; display:flex; flex-direction:column; gap:6px }
.temaBtn .barra{ height:7px; border-radius:99px; width:64% }
.temaBtn .scheda{ flex:1; border-radius:8px; display:flex; align-items:flex-end; gap:4px; padding:6px }
.temaBtn .pall{ width:11px; height:11px; border-radius:50% }
.temaBtn .nome{ display:block; padding:8px 10px; font-size:12.5px; font-weight:700;
  background:var(--scheda); color:var(--inchiostro); border-top:1px solid var(--filo) }
.temaBtn .nome i{ font-style:normal; font-weight:600; color:var(--grigio); font-size:11px }
.temaBtn.scelto{ border-color:var(--accento) }
.temaBtn.scelto::after{ content:"✓"; position:absolute; top:7px; right:7px; width:20px; height:20px;
  border-radius:50%; background:var(--accento); color:var(--su-accento);
  font-size:12px; font-weight:800; display:grid; place-items:center }