/* stile-ritocchi-2 — foglio di stile di RitMo Coach.
   Stava dentro coach.html. */
/* Il pallino non è rosso da allarme: è dello stesso vetro scuro
   dell'assistente, con il bordo nel verde di casa. Si vede, ma non urla. */
.ph .tasto-ai .ai-nov{
  position:absolute; top:-2px; right:-2px; z-index:3;
  min-width:19px; height:19px; padding:0 5px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; line-height:1; letter-spacing:-.01em;
  border-radius:99px; pointer-events:none;
  color:var(--accento-testo, var(--accento));
  background:color-mix(in srgb, var(--scheda, #10161200) 78%, transparent);
  border:1px solid color-mix(in srgb, var(--accento) 55%, transparent);
  box-shadow:0 2px 10px #0000006b, inset 0 0 0 1px #ffffff12;
  backdrop-filter:blur(9px) saturate(1.3);
  -webkit-backdrop-filter:blur(9px) saturate(1.3);
}
/* la "eh?": il segno si inclina appena, due volte, e si ferma. Non gira
   in tondo per sempre: chiede attenzione una volta sola. */
@keyframes novitaEh{
  0%,62%,100%{ transform:rotate(0) }
  70%{ transform:rotate(-9deg) } 78%{ transform:rotate(6deg) }
  86%{ transform:rotate(-4deg) } 93%{ transform:rotate(2deg) }
}
.ph .tasto-ai.ha-novita svg{ animation:novitaEh 4.6s ease-in-out 3; transform-origin:50% 50%; }
@media (prefers-reduced-motion:reduce){ .ph .tasto-ai.ha-novita svg{ animation:none } }

#novBanner{
  display:flex; flex-direction:column; gap:6px;
  margin:0 0 12px; padding:12px 13px 11px; border-radius:13px;
  background:color-mix(in srgb, var(--accento) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--accento) 26%, transparent);
}
#novBanner > b{ font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accento-testo, var(--accento)); }
#novBanner span{ display:block; font-size:13px; line-height:1.45; color:var(--ink); }
#novBanner span i{ font-style:normal; color:var(--gray); font-size:11.5px;
  margin-right:7px; font-variant-numeric:tabular-nums; }
#novBanner span b{ font-weight:700; margin-right:5px; }
#novBanner span em{ font-style:normal; color:var(--gray); }
#novBanner button{
  align-self:flex-start; margin-top:3px; padding:5px 12px; border-radius:99px;
  font-size:12px; font-weight:700; cursor:pointer; color:var(--accento-testo, var(--accento));
  background:transparent; border:1px solid color-mix(in srgb, var(--accento) 40%, transparent);
}
#novBanner button:active{ transform:scale(.96) }


/* ============ IL NOME SI SCRIVE DOVE SI LEGGE ============
   22 settembre 2026. Due posti dove il gestionale chiedeva un nome con
   prompt(): il salvataggio di un modello e la rinomina nell'elenco. La
   finestrella del browser ha un altro aspetto, non si puo' vestire, e dentro
   l'app installata sul telefono a volte non compare. Adesso la domanda sta
   nella finestra di casa, con una casella dentro; e nell'elenco dei modelli
   il nome e' gia' la casella, senza passare da un tasto. */
.chiedi-campo { display:block; margin-top:16px; }
/* «hidden» deve vincere sul display:block qui sopra: senza, la casella NOME
   compariva anche nelle conferme (pubblica, scarta la bozza) — giro del 2 ottobre */
.chiedi-campo[hidden] { display:none; }
.chiedi-campo > span { display:block; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:var(--grigio); margin-bottom:6px; }
.chiedi-campo > input {
  width:100%; min-height:46px; padding:0 14px; border-radius:12px; font:inherit;
  /* 16px: sotto, l'iPhone ingrandisce la pagina da solo quando si tocca */
  font-size:16px; font-weight:600;
  border:1px solid var(--filo); background:var(--campo); color:var(--inchiostro);
}
.chiedi-campo > input:focus { outline:none; border-color:var(--accento); }

/* la riga di un modello: la casella si vede che e' una casella, se no
   nessuno prova a scriverci dentro */
.mrowi-tpl { align-items:center; gap:10px; }
.mrowi-tpl .tpl-nome {
  flex:1; min-width:0; font:inherit; font-size:16px; font-weight:600;
  padding:10px 12px; border-radius:11px;
  border:1px solid var(--filo); background:var(--campo); color:var(--inchiostro);
}
.mrowi-tpl .tpl-nome:hover { border-color:color-mix(in srgb, var(--accento) 40%, var(--filo)); }
.mrowi-tpl .tpl-nome:focus { outline:none; border-color:var(--accento); }

/* I codici vecchi (23 settembre 2026): un riquadro d'avviso, non un allarme.
   Etichetta grigia in maiuscolo come ogni insegna; l'ambra solo sul filo. */
.cod-vecchi { margin:0 0 12px; padding:16px; }
.cod-vecchi[hidden] { display:none; }
.cod-vecchi .cv-t { font:600 11px/1.2 var(--f-mono, monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio, #9AA0A6); margin-bottom:8px; }
.cod-vecchi p { margin:0 0 12px; font-size:14px; line-height:1.45; max-width:68ch; }
.cod-vecchi .cv-l { list-style:none; margin:0 0 12px; padding:0; }
.cod-vecchi .cv-l li { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--filo, rgba(255,255,255,.08)); }
.cod-vecchi .cv-l b { font-family:var(--f-mono, monospace); letter-spacing:.06em; }

/* LA BOZZA DELLA SCHEDA (revisione R06, 24 settembre 2026): una riga sopra i
   giorni, neutra, che dice di quando e' e come buttarla */
.bbozza{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 12px; padding:10px 14px; border-radius:14px; border:1px solid var(--filo);
  background:var(--campo); font-size:13px; color:var(--grigio); }
.bbozza b{ color:var(--inchiostro); font-weight:600; }
.bbozza[hidden]{ display:none; }

/* L'anteprima della scheda come la riceve il cliente (giro del 2 ottobre 2026) */
.prev-g { background: var(--soft); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.prev-gt { font-size: 14px; display: block; }
.prev-gn { margin: 4px 0 2px; font-size: 12.5px; color: var(--gray); }
.prev-e { padding: 7px 0; border-bottom: 1px solid var(--line, rgba(127,127,127,.18)); }
.prev-e:last-child { border-bottom: 0; }
.prev-er { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.prev-er b { color: var(--accento-testo); white-space: nowrap; }
.prev-e small { display: block; margin-top: 2px; font-size: 12px; color: var(--gray); }

/* I COMANDI DI RITORNO SEGUONO IL TEMA (giro nell'app del 2 ottobre 2026):
   «← Tutti i clienti» e «← Tutti i messaggi» erano bianchi al 65% anche nel
   tema chiaro, cioe' bianco su quasi bianco. Stessa sorte per gli altri testi
   scritti in bianco fisso sopra le superfici del tema. */
.back{ color: var(--gray); border-radius: 8px; }
.back:hover{ color: var(--ink); }
.back:focus-visible{ color: var(--ink); outline: 2px solid var(--accento-testo); outline-offset: 3px; }
.chead .sub2{ color: var(--gray); }
.setrow .chev{ color: var(--gray); }
.note-open{ background: var(--campo); border-color: var(--line); color: var(--ink); }

/* la proposta di Mo si puo' scartare (giro del 2 ottobre 2026) */
.aiprop button.aiprop-no{ background: transparent; color: var(--inchiostro, var(--ink)); border: 1px solid var(--line); margin-left: 8px; font-weight: 700; }
.aiprop.scartata{ border-color: var(--line); opacity: .75; }
.aiprop .aiprop-esito{ display: block; font-size: 12.5px; color: var(--gray); }

/* GIRO AUTOMATICO DEL 3 OTTOBRE 2026: contrasto del testo.
   Nel tema chiaro il verde pieno dell'accento (#00A866 su bianco) arriva a
   2,98:1 e l'ambra dell'attenzione a 2:1: come colore di una scritta non si
   legge al sole. Per le scritte si usa la versione «testo» del tema, che e'
   fatta apposta; i fondi e i filetti restano quelli di prima. */
html.tema-chiaro .side nav button.on,
html.tema-chiaro .side nav button.on .badge,
html.tema-chiaro .ph .mt-nome i, html.tema-chiaro #brandNome i { color:var(--accento-testo); }
html.tema-chiaro .pill-att, html.tema-chiaro .pg-manca b { color:var(--attesa); }
html.tema-chiaro .clfil button.col-attivi:not(.on) { color:#166534; }
html.tema-chiaro .clfil button.col-attesa:not(.on) { color:#854D0E; }
/* nel tema scuro il grigio tenue su una scheda scura sta a 3,7:1: i codici
   dei clienti e i giorni della settimana passano al grigio normale */
html:not(.tema-chiaro) .cl .code, html:not(.tema-chiaro) .og-g .sg { color:var(--grigio); }
html.tema-chiaro .adem .st { color:var(--accento-testo); }

/* ANALISI MENSILI E PROGRESSI nelle Statistiche (8 ottobre 2026). Una riga
   per cliente: chi e' seguito dal mese, le misure come si muovono, sotto la
   riga piccola degli allenamenti. I colori sono quelli delle pillole di
   sempre, quindi leggibili nei due temi. */
.prg-riga { border-top:1px solid var(--filo); padding:10px 2px; }
.prg-riga:first-of-type { border-top:0; }
.prg-chi { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
/* la riga si apre: il dettaglio con tutte le misure, la BIA e gli esercizi */
summary.prg-chi { cursor:pointer; list-style:none; }
summary.prg-chi::-webkit-details-marker { display:none; }
.prg-apri { margin-left:auto; color:var(--grigio-tenue); font-size:16px; transition:transform .15s ease; }
details[open] > summary .prg-apri { transform:rotate(90deg); }
.prg-det { margin-top:8px; display:grid; gap:10px; }
.prg-grp label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--grigio); margin-bottom:4px; }
.prg-mr { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:3px 0; font-variant-numeric:tabular-nums; }
.prg-mr span { color:var(--grigio); min-width:0; }
.prg-mr b { font-weight:600; color:var(--inchiostro); text-align:right; }
.prg-mai .prg-corpo { line-height:1.6; }
.prg-quando { font-size:12px; color:var(--grigio); }
.prg-corpo { margin-top:4px; font-size:13.5px; color:var(--inchiostro); font-variant-numeric:tabular-nums; }
.prg-corpo .prg-d, .prg-alle .prg-d { font-style:normal; font-size:12px; color:var(--grigio); }
.prg-alle { margin-top:3px; font-size:12.5px; color:var(--grigio); font-variant-numeric:tabular-nums; }

/* IL FULMINE DEI MESSAGGI PREIMPOSTATI (14 ottobre 2026): un tasto piccolo
   accanto alla casella della conversazione, e il menu che sale da sotto. */
.csend #cvPre{ flex:0 0 auto; width:38px; height:38px; border-radius:12px; border:1px solid var(--filo,rgba(255,255,255,.14));
  background:transparent; color:var(--grigio,#9aa); display:grid; place-content:center; }
.csend #cvPre:active{ color:var(--accento-testo,#7fd4a2); }
#cvPreMenu{ left:8px; right:auto; max-width:min(320px, calc(100vw - 32px)); }
#cvPreMenu[hidden]{ display:none; }