/* ═══════════════════════════════════════════════════════════════════════════
 *  LA VISTA MESOCICLO — lo stile, unico per CRM e portale
 *  File: assets/vista-mesociclo.css — nuovo il 28 agosto 2026
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Va a braccetto con src/knowledge/vistaMesociclo.js: stessa vista in tre
 * posti (anteprima CRM, sezione Schede, pagina Mesociclo del portale), stesso
 * foglio di stile. Sta sotto /assets/ perché quella cartella è APERTA: il
 * telefono di un cliente lo scarica senza aver mai visto il CRM.
 *
 * ⚠ NIENTE COLORI FISSI: tutto passa dalle variabili dell'app che la ospita,
 * con una riserva neutra. Così la vista segue da sola il tema chiaro e scuro
 * di tutti e due i programmi. */

.vm{max-width:760px;}
.vm-vuota{opacity:.7;font-size:14px;padding:14px 0;}

.vm-testa{margin-bottom:14px;}
.vm-testa h2{font-size:20px;margin:0 0 2px;}
.vm-sotto{font-size:12.5px;opacity:.65;}

.vm-settimane-note{margin-bottom:14px;display:flex;flex-direction:column;gap:4px;}
.vm-settimana-nota{
  font-size:12px;opacity:.8;padding:7px 10px;border-radius:8px;
  background:var(--surface-sunk, var(--sfondo-rialzato, rgba(127,127,127,.08)));
}

/* Un giorno: si apre e si chiude senza JavaScript. */
.vm-giorno{
  border:1px solid var(--line, var(--bordo, rgba(127,127,127,.25)));
  border-radius:12px;margin-bottom:10px;overflow:hidden;
  background:var(--surface, var(--sfondo-carta, transparent));
}
.vm-giorno-titolo{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;cursor:pointer;font-weight:700;font-size:15px;
  list-style:none;
}
.vm-giorno-titolo::-webkit-details-marker{display:none;}
.vm-giorno-titolo::after{content:"▾";opacity:.5;font-size:12px;transition:transform .2s;}
.vm-giorno[open] .vm-giorno-titolo::after{transform:rotate(180deg);}
.vm-giorno-titolo small{font-weight:400;font-size:11.5px;opacity:.6;margin-left:auto;}
.vm-giorno-corpo{padding:2px 14px 14px;}

.vm-fase{margin-bottom:14px;}
.vm-fase:last-child{margin-bottom:0;}
.vm-fase-titolo{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  opacity:.55;margin-bottom:7px;
}
.vm-riga-fase{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13px;padding:5px 0;
  border-bottom:1px dashed var(--line, rgba(127,127,127,.18));
}
.vm-riga-fase:last-child{border-bottom:none;}
.vm-riga-fase small{opacity:.65;font-size:11.5px;text-align:right;flex-shrink:0;}
.vm-cardio{font-weight:600;}

.vm-core .vm-core-frase{font-size:12px;opacity:.75;margin-bottom:6px;font-style:italic;}

/* Una sequenza: superserie, triset, circuito. La cornice tiene insieme. */
.vm-sequenza{
  border-left:3px solid var(--accent, var(--verde, #7a8b5c));
  border-radius:4px;padding:6px 0 6px 12px;margin:10px 0;
  background:var(--surface-sunk, rgba(127,127,127,.05));
}
.vm-sequenza-etichetta{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent, var(--verde, #7a8b5c));margin-bottom:4px;
}

.vm-esercizio{padding:9px 0;border-bottom:1px solid var(--line, rgba(127,127,127,.15));}
.vm-esercizio:last-child{border-bottom:none;}
.vm-esercizio.in-sequenza{padding:7px 8px 7px 0;}
.vm-esercizio-testa{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.vm-esercizio-testa strong{font-size:14px;}
.vm-base{font-size:12.5px;font-weight:600;opacity:.8;white-space:nowrap;flex-shrink:0;}

.vm-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;}
.vm-chip{
  font-size:10.5px;padding:2px 8px;border-radius:999px;
  background:var(--surface-sunk, rgba(127,127,127,.1));opacity:.85;
}
.vm-nota{font-size:12px;opacity:.7;margin-top:4px;line-height:1.45;}

/* La progressione: una colonna per settimana, come sul foglio.
 * ⚠ Scorre DENTRO la sua cornice: la pagina non deve mai scorrere di lato. */
.vm-prog-avvolgi{overflow-x:auto;margin-top:8px;}
.vm-prog{border-collapse:collapse;font-size:11.5px;min-width:100%;}
.vm-prog th,.vm-prog td{
  padding:4px 9px;text-align:center;white-space:nowrap;
  border:1px solid var(--line, rgba(127,127,127,.18));
}
.vm-prog th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;opacity:.6;}
.vm-prog td:first-child,.vm-prog th:first-child{text-align:left;font-weight:600;opacity:.75;}