/* ═══════════════════════════════════════════════════════════════════════════
   training-builder-analytics.css — FASE D: heatmap del corpo + istogramma RPE
   Carica DOPO training-builder.css. Token di theme.css (chiaro/scuro).
   ═══════════════════════════════════════════════════════════════════════════ */

.pb-hm-toggle { display: flex; justify-content: center; gap: 2px; margin: 8px auto; padding: 3px;
  background: var(--bg-surface-raised); border-radius: 9px; width: max-content; }
.pb-hm-toggle button { padding: 4px 14px; border-radius: 7px; border: none; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 800; background: transparent; color: var(--text-muted); }
.pb-hm-toggle button.is-active { background: var(--bg-surface); color: var(--text-heading); box-shadow: 0 1px 3px var(--shadow-sm); }

#pb-heatmap-host svg g { cursor: pointer; }
#pb-heatmap-host svg g:hover [style] { filter: brightness(1.08); }
.pb-hm-cap { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 6px; }

.pb-rpe { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 4px; }
.pb-rpe-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pb-rpe-bar { width: 100%; border-radius: 5px; }
.pb-rpe-col span { font-size: 10px; font-weight: 800; color: var(--text-muted); }