/* summary.css — resúmenes mensual y anual (#/summary) y piezas compartidas con el bloque «Resumen de la semana»
   de #/weekly (.sum-delta). Propietario: módulo de resúmenes. Color de cada deporte: variable --kc (= --act-<tipo>),
   siempre acompañado de su emoji y su nombre (nunca solo color). */

.sum { gap: 14px; }

/* Navegación de periodos (como la del panel semanal) */
.sum-nav { display: flex; align-items: center; gap: 8px; }
.sum-nav-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--text);
}
.sum-nav-btn.is-pressed { background: var(--border-strong); }
.sum-nav-btn:disabled { opacity: 0.35; }
.sum-nav-cur {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  font-size: calc(16px * var(--ts));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sum-nav-cur:disabled { color: var(--text-2); opacity: 1; }
.sum-provisional {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 2px;
  font-size: calc(13px * var(--ts));
  line-height: 1.45;
  color: var(--muted);
}
.sum-provisional .icon { flex: none; margin-top: 2px; color: var(--info); }
.sum-empty { padding: 4px; }

/* Cabecera de tarjeta */
.sum-card-head { display: flex; align-items: center; gap: 10px; }
.sum-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info);
}
.sum-card-titles { flex: 1; min-width: 0; }
.sum-card-title { font-size: calc(18px * var(--ts)); font-weight: 750; }
.sum-card-sub { margin-top: 2px; font-size: calc(13px * var(--ts)); line-height: 1.35; color: var(--muted); }
.sum-sub-title { font-size: calc(13px * var(--ts)); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sum-note { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.sum-none { font-size: calc(14px * var(--ts)); line-height: 1.45; color: var(--muted); }

/* Diferencia con el periodo anterior: flecha + texto (+3, %), con color de apoyo. Sin juicio: subir no es «bien». */
.sum-delta {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.sum-delta-arrow { flex: none; font-size: var(--fs-xs); }
.sum-delta-text { min-width: 0; }
.sum-delta-part { white-space: nowrap; }
/* Ronda 8 (A4): neutro por defecto (gris de la base); verde/ámbar solo con una regla (util.deltaTone) */
.sum-delta-tone-good { background: var(--ok-soft); color: var(--ok); }
.sum-delta-tone-warn { background: var(--warn-soft); color: var(--warn); }
.sum-delta-same,
.sum-delta-none { color: var(--muted); }

/* KPIs */
.sum-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sum-kpi-wide { grid-column: 1 / -1; }
.sum-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.sum-kpi-label { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.sum-kpi-value { font-size: calc(20px * var(--ts)); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sum-kpi-sub { font-size: calc(12px * var(--ts)); line-height: 1.3; color: var(--muted); }
.sum-kpi .sum-delta { margin-top: 3px; }

/* Por deporte */
.sum-sports { display: flex; flex-direction: column; gap: 8px; }
.sum-sports .section-title { margin: 4px 2px 0; }
.sum-sport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sum-sport {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-top: 4px solid var(--kc);
  background: var(--surface);
}
.sum-sport-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sum-sport-emoji { flex: none; font-size: calc(18px * var(--ts)); line-height: 1; }
.sum-sport-name { min-width: 0; font-size: calc(15px * var(--ts)); font-weight: 750; overflow-wrap: anywhere; }
.sum-sport-main { font-size: calc(22px * var(--ts)); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sum-sport-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; font-size: calc(13px * var(--ts)); color: var(--text-2); font-variant-numeric: tabular-nums; }
.sum-sport .sum-delta { margin-top: 3px; }

/* Calendario del mes (días entrenados) */
.sum-cal { display: flex; flex-direction: column; gap: 4px; }
.sum-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sum-cal-head { font-size: calc(12px * var(--ts)); font-weight: 700; color: var(--muted); text-align: center; }
.sum-cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-2);
  font-size: calc(14px * var(--ts));
  font-variant-numeric: tabular-nums;
}
.sum-cal-pad { visibility: hidden; }
.sum-cal-on { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); font-weight: 750; }
button.sum-cal-on.is-pressed { background: var(--border-strong); }
.sum-cal-today { box-shadow: inset 0 0 0 2px var(--accent); }
/* Días por llegar: un gris más apagado que los pasados (--muted frente a --text-2) pero legible (≥ 4,5:1); con opacity
   quedaban en ~2:1 (como los días de otro mes en calendar.css) */
.sum-cal-future { color: var(--muted); }
.sum-cal-num { line-height: 1; }
.sum-cal-dots { display: flex; gap: 3px; height: 6px; }
.sum-cal-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--kc); }
.sum-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sum-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--ts)); color: var(--text-2); }
.sum-legend-item .sum-cal-dot { width: 8px; height: 8px; }

/* Año: días entrenados por mes (barras verticales; cada una abre su mes) */
.sum-mbars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; align-items: end; }
.sum-mbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 2px 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-2);
}
.sum-mbar.is-pressed { background: var(--surface-2); }
.sum-mbar:disabled { opacity: 0.35; }
.sum-mbar-val { min-height: 16px; font-size: calc(12px * var(--ts)); font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.sum-mbar-track { position: relative; display: flex; align-items: flex-end; width: 100%; max-width: 20px; height: 96px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.sum-mbar-fill { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); }
.sum-mbar-label { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.sum-mbar-cur .sum-mbar-label { color: var(--accent); font-weight: 800; }

/* Fuerza: series por músculo */
.sum-muscles { display: flex; flex-direction: column; gap: 6px; }
.sum-mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.sum-mrow { display: flex; flex-direction: column; gap: 5px; padding: 7px 0 8px; border-bottom: 1px solid var(--border); }
.sum-mrow:last-child { border-bottom: 0; }
.sum-mrow-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.sum-mrow-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); font-weight: 650; overflow-wrap: anywhere; }
.sum-mrow-val { flex: none; margin-left: auto; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.sum-mrow-val b { font-size: calc(15px * var(--ts)); font-weight: 800; color: var(--text); }
.sum-mbar-h { display: block; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.sum-mbar-h-fill { display: block; height: 100%; border-radius: 4px; background: var(--kc); }

/* Récords y ejercicios que más progresan */
.sum-list-wrap { display: flex; flex-direction: column; }
.sum-rec-list,
.sum-prog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.sum-rec-btn,
.sum-prog-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  text-align: left;
}
.sum-rec:last-child .sum-rec-btn,
.sum-prog:last-child .sum-prog-btn { border-bottom: 0; }
.sum-rec-btn.is-pressed,
.sum-prog-btn.is-pressed { background: var(--surface-2); }
.sum-rec-btn .chev,
.sum-prog-btn .chev { flex: none; color: var(--muted); }
.sum-rec-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-3);
  box-shadow: inset 3px 0 0 var(--kc);
  color: var(--pr);
  font-size: calc(17px * var(--ts));
}
.sum-rec-main,
.sum-prog-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sum-rec-label,
.sum-prog-name { font-size: calc(15px * var(--ts)); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sum-rec-count { margin-left: 6px; vertical-align: 1px; }
.sum-rec-detail { font-size: calc(13px * var(--ts)); line-height: 1.35; color: var(--text-2); overflow-wrap: anywhere; }
.sum-rec-date { flex: none; font-size: calc(13px * var(--ts)); color: var(--muted); white-space: nowrap; }
.sum-prog-vals { font-size: calc(14px * var(--ts)); font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.sum-prog-basis { font-size: var(--fs-sm); line-height: 1.35; color: var(--muted); }
.sum-prog-btn .sum-delta { flex: none; align-self: center; max-width: 44%; }
.sum-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--accent);
  font-size: calc(15px * var(--ts));
  font-weight: 700;
}
.sum-more .icon { transition: transform 0.15s ease; }
.sum-more.open .icon { transform: rotate(180deg); }

/* Comparación */
.sum-cmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.sum-cmp-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.sum-cmp-row:last-child { border-bottom: 0; }
.sum-cmp-row[style] { padding-left: 10px; box-shadow: inset 3px 0 0 var(--kc); }
/* La etiqueta nunca baja de su palabra más larga con el emoji pegado («🏃 Carrera», no partida): si no cabe, cede la
   columna de la derecha, cuya diferencia se parte entre la cifra y el % (texto grande, PULIDO §17) */
.sum-cmp-main { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sum-cmp-label { font-size: calc(15px * var(--ts)); font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
.sum-cmp-prev { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.sum-cmp-right { flex: 0 1 auto; max-width: 58%; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sum-cmp-cur { font-size: calc(16px * var(--ts)); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.sum-cmp-right .sum-delta { align-self: flex-end; }

/* Pantallas muy estrechas (320 px) */
@media (max-width: 359px) {
  .sum-kpi-value,
  .sum-sport-main { font-size: calc(19px * var(--ts)); }
  .sum-sport { padding: 10px; }
  .sum-cal-cell { font-size: calc(13px * var(--ts)); }
}