/* ═══════════════════════════════════════════════════════════════════════════
   training-evolution.css — Redesign vista "Evoluzione progressi" (v2)
   Direzione approvata: 1b "Dashboard visivo" — classifica gruppi muscolari +
   confronto "a manubrio" (○ inizio → ● fine) per esercizio, al posto della
   tabella e delle card semplici.

   COME INTEGRARLO
   1) In training-builder.css, RIMUOVI il blocco che va da:
        /* ── Evoluzione progressi ──────────────────────────────────────────────────
      fino a (incluso):
        @media (max-width: 900px) { .pe-grid { grid-template-columns: 1fr; } }
      (subito PRIMA di "/* ─── Scheda conoscitiva — badge tipo scheda ───").
      Le due righe sopra quel blocco — la sezione
        /* ── Vista evoluzione: nasconde libreria/pannello, canvas a tutta larghezza ─
        .pb-shell--evolution .pb-library, .pb-shell--evolution .pb-right { display:none; }
        .pb-shell--evolution .pb-workspace { display:block; }
        .pb-shell--evolution .pb-canvas { width:100%; }
      NON c'entrano con questo redesign: lasciale dove sono.
   2) In index.html aggiungi, subito dopo <link rel="stylesheet" href="css/training-builder.css">:
        <link rel="stylesheet" href="css/training-evolution.css">
   3) Sostituisci js/training/training-evolution.js con la nuova versione
      (stessa API pubblica: window.renderEvolutionView, window.loadPlanEvolution —
      nessun altro file da toccare).

   Solo token di theme.css (chiaro/scuro via .dark-mode sul root) — niente colori
   hardcoded per testo/fondo, come nel resto di training-builder.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.pe-wrap { padding: 0; }

/* Corpo a due colonne: classifica gruppi (sx) · dettaglio per giorno (dx).
   min-width:0 sulle colonne evita che le righe con min-width sforino la griglia. */
.pe-body { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.pe-body-col { min-width: 0; }
@media (max-width: 1100px) { .pe-body { grid-template-columns: 1fr; } }

/* ── Testata: titolo + riepilogo + confronto blocco iniziale/finale ──────── */
.pe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pe-head h3 { margin: 0 0 3px; font-size: 16px; color: var(--text-heading); }
.pe-summary { margin: 0; font-size: 12px; color: var(--text-secondary); }
.pe-summary b { font-weight: 800; }

.pe-cmp { display: inline-flex; align-items: center; border-radius: 99px; border: 1.5px solid var(--border-medium); overflow: hidden; flex-shrink: 0; }
.pe-cmp-start { padding: 6px 13px; font-size: 11.5px; font-weight: 800; color: var(--text-secondary); white-space: nowrap; }
.pe-cmp-end { padding: 6px 13px; font-size: 11.5px; font-weight: 800; color: var(--text-heading); background: var(--bg-surface-raised); white-space: nowrap; }
.pe-cmp-end--test { color: var(--danger-text, var(--danger)); background: var(--danger-bg); }

/* ── Titoli di sezione + legenda pallini ──────────────────────────────────── */
.pe-lb-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.pe-legend { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 10.5px; display: flex; align-items: center; color: var(--text-muted); }
.pe-legend-dot { display: inline-flex; width: 8px; height: 8px; border-radius: 50%; margin: 0 5px 0 10px; }
.pe-legend-dot--start { border: 2px solid var(--text-hint); }
.pe-legend-dot--end { background: var(--success); }

/* ── Classifica gruppi muscolari ───────────────────────────────────────────
   Larghezza colonna fissa (rank/dot/nome/pct/reps) + track flessibile: così
   tutte le righe restano allineate qualunque sia la lunghezza dei nomi. ── */
.pe-lb { display: flex; flex-direction: column; gap: 7px; margin-bottom: 4px; }
.pe-lb-row { display: flex; align-items: center; gap: 13px; padding: 10px 14px; border: 1.5px solid var(--border-light);
  border-radius: 12px; background: var(--bg-surface); }
.pe-lb-rank { width: 22px; height: 22px; border-radius: 7px; background: var(--bg-surface-raised); color: var(--text-muted);
  font-size: 11px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.pe-lb-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pe-lb-name { min-width: 118px; font-size: 13px; font-weight: 800; color: var(--text-heading); display: flex; flex-direction: column; gap: 1px; }
.pe-lb-name small { font-size: 10px; font-weight: 700; color: var(--text-muted); }
.pe-lb-track { flex: 1; position: relative; height: 18px; background: var(--bg-surface-sunken); border-radius: 99px; overflow: hidden; }
.pe-lb-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--border-dark); }
.pe-lb-fill.pe-delta--pos { background: linear-gradient(90deg, var(--success-dark), var(--success-light)); }
.pe-lb-fill.pe-delta--neg { background: linear-gradient(90deg, var(--danger-dark), var(--danger-light)); }
.pe-lb-pct { min-width: 54px; text-align: right; font-size: 16px; font-weight: 800; }
.pe-lb-reps { min-width: 78px; text-align: right; font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.pe-lb-reps b { font-weight: 800; }

/* ── Dettaglio per giorno ──────────────────────────────────────────────────── */
/* Tab dei giorni: un giorno alla volta in vista (.pe-day-panel.is-active),
   invece di impilarli tutti — evitava che la colonna crescesse a dismisura. */
.pe-daytabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pe-daytab { border: 1.5px solid var(--border-medium); border-radius: 99px; background: var(--bg-surface);
  color: var(--text-secondary); font: inherit; font-size: 11.5px; font-weight: 800; padding: 6px 13px;
  cursor: pointer; white-space: nowrap; }
.pe-daytab.is-active { border-color: var(--gradient-app-start); color: var(--gradient-app-start);
  background: color-mix(in srgb, var(--gradient-app-start) 14%, transparent); }
.pe-day-panel { display: none; }
.pe-day-panel.is-active { display: block; }

.pe-daybar { display: flex; align-items: center; justify-content: space-between; background: var(--bg-surface-raised);
  border-radius: 8px; padding: 7px 12px; font-weight: 800; font-size: 12px; margin: 12px 0 8px; color: var(--text-secondary); }
.pe-daybar:first-child { margin-top: 0; }
.pe-daybar span:last-child { font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.pe-muted { color: var(--text-secondary); }

/* Riga esercizio "a manubrio": ○ inizio → ● fine su una traccia proporzionata
   al salto reale (posizioni calcolate in JS, vedi evoTrackPositions). */
.pe-dbrow { display: flex; align-items: center; gap: 13px; padding: 9px 13px; border: 1.5px solid var(--border-light);
  border-radius: 11px; background: var(--bg-surface); margin-bottom: 7px; }
.pe-dbrow:last-child { margin-bottom: 0; }
.pe-dbrow-bar { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.pe-dbrow-name { min-width: 152px; font-size: 12.5px; font-weight: 800; color: var(--text-heading); display: flex; flex-direction: column; gap: 1px; }
.pe-dbrow-name small { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.pe-dbrow-track { flex: 1; position: relative; height: 6px; background: var(--bg-surface-sunken); border-radius: 99px; margin: 0 5px; }
.pe-dbrow-line { position: absolute; top: 50%; height: 2px; border-radius: 2px; transform: translateY(-50%); background: var(--border-dark); }
.pe-dbrow-line.pe-delta--pos { background: color-mix(in srgb, var(--success) 55%, var(--border-dark)); }
.pe-dbrow-line.pe-delta--neg { background: color-mix(in srgb, var(--danger) 55%, var(--border-dark)); }
.pe-dbrow-dot { position: absolute; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.pe-dbrow-dot--start { width: 10px; height: 10px; background: var(--bg-surface-sunken); border: 2px solid var(--text-hint); }
.pe-dbrow-dot--end { width: 12px; height: 12px; background: var(--text-muted); }
.pe-dbrow-dot--end.pe-delta--pos { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.pe-dbrow-dot--end.pe-delta--neg { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.pe-dbrow-kg { min-width: 108px; text-align: right; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.pe-dbrow-pct { min-width: 48px; text-align: right; font-size: 14px; font-weight: 800; }
.pe-dbrow-reps { min-width: 72px; text-align: right; font-size: 10.5px; color: var(--text-muted); }
.pe-dbrow-reps b { font-weight: 800; }

/* ── Colori delta condivisi (classifica + righe giorno) ───────────────────── */
.pe-delta--pos { color: var(--success); }
.pe-delta--neg { color: var(--danger); }
.pe-delta--zero { color: var(--text-secondary); }

@media (max-width: 860px) {
  .pe-lb-row, .pe-dbrow { flex-wrap: wrap; row-gap: 8px; }
  .pe-lb-track, .pe-dbrow-track { flex-basis: 100%; order: 4; margin: 2px 0; }
}