/* Progreso móvil: jerarquía compacta basada en la referencia de producto. */
@media (max-width: 720px), (min-width: 721px) and (max-width: 1023px) and (orientation: portrait) {
  .page-progreso .progress-screen,
  .page-progreso .progress-screen.mode-summary { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .page-progreso .progress-desktop-periods { display: none !important; }
  .page-progreso .progress-screen.mode-water > .progress-wide-card,
  .page-progreso .progress-screen.mode-weight > .progress-wide-card,
  .page-progreso .progress-screen.mode-waist > .progress-wide-card,
  .page-progreso .progress-screen.mode-training > .progress-wide-card,
  .page-progreso .progress-screen.mode-care > .progress-wide-card { display: none !important; }
  .page-progreso .progress-mobile-kpis { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; overflow: hidden !important; }
  .page-progreso .progress-heading { margin: 3px 2px 0 !important; font-size: 22px !important; }

  /* Seguimiento y periodo quedan juntos al final del contenido. */
  .page-progreso .progress-toolbar { order: 50 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 4px 0 0 !important; }
  .page-progreso .progress-selector { justify-content: flex-start !important; min-width: 0 !important; min-height: 52px !important; padding: 0 11px !important; gap: 8px !important; border-radius: 15px !important; font-size: 14px !important; }
  .page-progreso .progress-selector .asset-icon { width: 27px !important; height: 27px !important; }
  .page-progreso .progress-selector > span { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .page-progreso .progress-selector b { margin-left: auto !important; }

  /* Resumen en filas limpias y pulsables. */
  .page-progreso .progress-screen.mode-summary > .progress-wide-card,
  .page-progreso .progress-screen.mode-summary > .progress-mini-grid > .progress-mini-card { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; min-height: 82px !important; margin: 0 !important; padding: 10px 4px !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; background: transparent !important; }
  .page-progreso .progress-screen.mode-summary > .progress-wide-card:first-of-type { border-top: 1px solid var(--line-soft) !important; }
  .page-progreso .progress-screen.mode-summary > .progress-mini-grid { display: contents !important; }
  .page-progreso .progress-screen.mode-summary .progress-wide-icon,
  .page-progreso .progress-screen.mode-summary .progress-mini-card > div { display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; }
  .page-progreso .progress-screen.mode-summary .progress-wide-icon .asset-icon,
  .page-progreso .progress-screen.mode-summary .progress-mini-card .asset-icon { width: 39px !important; height: 39px !important; }
  .page-progreso .progress-screen.mode-summary .progress-wide-copy,
  .page-progreso .progress-screen.mode-summary .progress-mini-card section { gap: 2px !important; }
  .page-progreso .progress-screen.mode-summary .progress-wide-copy small,
  .page-progreso .progress-screen.mode-summary .progress-mini-card small { color: #f1f5fb !important; font-size: 15px !important; }
  .page-progreso .progress-screen.mode-summary .progress-wide-copy strong,
  .page-progreso .progress-screen.mode-summary .progress-mini-card strong { font-size: 19px !important; }
  .page-progreso .progress-screen.mode-summary .progress-wide-copy span,
  .page-progreso .progress-screen.mode-summary .progress-mini-card span { font-size: 12px !important; }
  .page-progreso .progress-screen.mode-summary :is(.progress-wide-copy, .progress-wide-side, .progress-mini-card section) { overflow-wrap: normal !important; word-break: normal !important; }
  .page-progreso .progress-screen.mode-summary :is(.progress-wide-copy small, .progress-mini-card small) { white-space: nowrap !important; }
  .page-progreso .progress-screen.mode-summary .progress-wide-side { grid-column: 3 !important; grid-row: 1 !important; align-self: center !important; max-width: 105px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--cyan) !important; font-size: 12px !important; text-align: right !important; }
  .page-progreso .progress-screen.mode-summary .metric-peso .progress-wide-side span { display: block !important; white-space: nowrap !important; }
  .page-progreso .progress-compare { position: static !important; inset: auto !important; order: 40 !important; width: 100% !important; min-height: 49px !important; margin: 2px 0 !important; padding: 0 14px !important; border-radius: 15px !important; background: linear-gradient(100deg, #0b2940, #0a3c52) !important; box-shadow: none !important; transform: none !important; font-size: 13px !important; }
  .page-progreso .progress-compare::before, .page-progreso .progress-compare::after { content: none !important; }

  /* Indicadores compactos compartidos por las vistas analíticas. */
  .page-progreso .progress-mobile-kpis { margin: 0 !important; border-color: var(--line) !important; border-radius: 17px !important; background: linear-gradient(145deg,#091d31,#061423) !important; box-shadow: none !important; }
  .page-progreso .progress-mobile-kpis article { display: grid !important; grid-template-rows: minmax(19px, auto) auto auto !important; align-content: center !important; justify-items: center !important; min-height: 86px !important; padding: 9px 3px !important; border-right: 1px solid #1b506b !important; text-align: center !important; }
  .page-progreso .progress-mobile-kpis article:last-child { border-right: 0 !important; }
  .page-progreso .progress-mobile-kpis small { display: block !important; min-height: 19px !important; color: #9fb3c6 !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1.15 !important; text-transform: uppercase !important; }
  .page-progreso .progress-mobile-kpis strong { display: block !important; max-width: 100% !important; overflow: hidden !important; color: #f2f7ff !important; font-size: 21px !important; line-height: 1.08 !important; letter-spacing: -.04em !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .page-progreso .progress-mobile-kpis span { display: block !important; margin-top: 3px !important; color: #b8c9d9 !important; font-size: 11px !important; line-height: 1 !important; }
  .page-progreso .progress-mobile-kpis.weight article:last-child strong { font-size: 16px !important; letter-spacing: -.03em !important; }

  .page-progreso .progress-screen:not(.mode-summary) > .progress-chart-card { min-height: 350px !important; margin: 2px 0 0 !important; padding: 16px 13px !important; border: 1px solid var(--line) !important; border-radius: 20px !important; background: linear-gradient(145deg,#081a2d,#04111f) !important; }
  .page-progreso .progress-chart-card h2 { font-size: 22px !important; }
  .page-progreso .progress-chart-card p { margin-top: 5px !important; font-size: 11px !important; }
  .page-progreso .chart-legend { gap: 12px !important; margin: 12px 0 7px !important; font-size: 10px !important; }
  .page-progreso .progress-chart { width: 100% !important; height: 270px !important; margin: 0 auto !important; }
  .page-progreso .metric-bar.below { fill: var(--progress-under) !important; }
  .page-progreso .metric-bar.complete { fill: var(--progress-goal) !important; }
  .page-progreso .metric-bar.over { fill: var(--progress-over) !important; }
  .page-progreso .chart-goal { stroke: #84dce8 !important; stroke-dasharray: 6 5 !important; }

  /* Peso y Cintura comparten la lectura de evolución. */
  .page-progreso .progress-screen.mode-weight > .weight-metrics { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .page-progreso .progress-screen.mode-weight > .weight-metrics .progress-mini-card { min-height: 82px !important; border: 1px solid var(--line-soft) !important; border-radius: 16px !important; background: linear-gradient(145deg,#091a2d,#051321) !important; }
  .page-progreso .progress-screen.mode-waist > .progress-chart-card { min-height: 340px !important; }

  /* Cuidado personal: tarjetas equivalentes y actividad legible. */
  .page-progreso .progress-mobile-care { gap: 8px !important; margin: 0 !important; }
  .page-progreso .progress-mobile-care article { min-height: 132px !important; padding: 11px 5px !important; border-radius: 16px !important; }
  .page-progreso .progress-mobile-care article > span,
  .page-progreso .progress-mobile-care .asset-icon { width: 31px !important; height: 31px !important; }
  .page-progreso .progress-mobile-care small { font-size: 9px !important; }
  .page-progreso .progress-mobile-care strong { font-size: 25px !important; }
  .page-progreso .progress-mobile-care b { font-size: 10px !important; }
  .page-progreso .progress-screen.mode-care > .progress-chart-card { min-height: 260px !important; }
  .page-progreso .care-mobile-activity-row { padding: 9px 0 !important; }
}

.page-progreso .progress-training-card { min-height: 0; }
.page-progreso .training-progress-visual { margin: 2px 0 0; padding: 16px 14px 12px; border: 1px solid var(--line, #203b51); border-radius: 18px; background: linear-gradient(145deg, #091d31, #061423); }
.page-progreso .training-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.page-progreso .training-progress-heading h2 { margin: 0; font-size: 18px; }
.page-progreso .training-progress-heading strong { color: var(--cyan, #16cde2); font-size: 13px; white-space: nowrap; }
.page-progreso .training-week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 118px; }
.page-progreso .training-week-day { display: grid; grid-template-rows: 1fr 18px; gap: 5px; min-width: 0; text-align: center; color: #93a8bd; font-size: 11px; }
.page-progreso .training-week-bar-shell { display: flex; align-items: flex-end; min-height: 0; height: 100%; }
.page-progreso .training-week-bar { position: relative; align-self: end; min-height: 4px; height: var(--training-height); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #35d7e5, #1584b6); }
.page-progreso .training-week-bar span { position: absolute; inset: 4px 0 auto; color: #f3f7fb; font-size: 11px; font-weight: 800; }
@media (max-width: 720px), (min-width: 721px) and (max-width: 1023px) and (orientation: portrait) {
  .page-progreso .training-progress-visual { padding: 13px 10px 10px; }
  .page-progreso .training-progress-heading h2 { font-size: 16px; }
  .page-progreso .training-progress-heading strong { font-size: 12px; }
  .page-progreso .training-week-bars { height: 100px; gap: 5px; }
}
.page-progreso .progress-training-list { display: grid; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line, #203b51); }
.page-progreso .progress-training-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 4px; border-bottom: 1px solid var(--line-soft, #193247); }
.page-progreso .progress-training-list li strong { color: #edf6ff; font-size: 15px; text-align: right; }
.page-progreso .progress-training-list li .training-session-date { flex: 0 0 auto; color: #9bb1c8; font-size: 13px; text-align: left; }
@media (max-width: 599px) {
  .page-progreso .progress-training-list li { align-items: flex-start; flex-direction: column; gap: 3px; }
  .page-progreso .progress-training-list li span { text-align: left; }
}

/* Entrenamiento: las barras muestran el valor encima y la lista no reserva
   la altura de un gráfico vacío. */
.page-progreso .training-week-bar {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: visible;
}
.page-progreso .training-week-bar span {
  top: auto;
  bottom: calc(100% + 5px);
  inset-inline: 0;
  white-space: nowrap;
  pointer-events: none;
}
.page-progreso .training-week-bar:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.training-bucket-detail { display: grid; gap: 0; border: 1px solid var(--line, #203b51); border-radius: 15px; overflow: hidden; background: #061526; }
.training-bucket-detail p { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 13px 14px; border-bottom: 1px solid var(--line-soft, #193247); color: #9bb1c8; }
.training-bucket-detail p:last-child { border-bottom: 0; }
.training-bucket-detail strong { color: #f2f7ff; text-align: right; }
.training-bucket-detail p:last-child { align-items: start; }
.training-bucket-detail p:last-child > strong { flex: 1; }
.training-routines-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; align-items: start !important; padding: 13px 14px !important; border-bottom: 0; color: #9bb1c8; }
.training-routines-row > span { display: block; align-self: start; line-height: 1.3; }
.training-bucket-routines-wrap { min-width: 0; width: 100%; padding: 0 !important; }
.training-bucket-routines { display: grid; gap: 4px; width: 100%; margin: 0 !important; padding: 0 !important; list-style: none; text-align: right; }
.training-bucket-routines li { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); align-items: center; gap: 10px; min-height: 24px; color: #f2f7ff; line-height: 1.3; }
.training-bucket-routines li span { color: #9bb1c8; white-space: nowrap; text-align: left; }
.training-bucket-routines li strong { text-align: right; align-self: center; }
.training-week-bars { grid-template-columns: repeat(var(--training-buckets, 7), minmax(0, 1fr)); }
.training-week-bar.empty { background: #173149; }
.training-week-bar.partial { background: linear-gradient(180deg, #35d7e5, #1584b6); }
.training-week-bar.complete { background: linear-gradient(180deg, #48e29a, #168d5b); }
.training-week-bar.exceeded { background: linear-gradient(180deg, #b58aff, #7245bd); }
.training-progress-empty { margin: 0; padding: 30px 12px 18px; color: #93a8bd; text-align: center; }
@media (max-width: 720px), (min-width: 721px) and (max-width: 1023px) and (orientation: portrait) {
  .page-progreso .progress-screen.mode-training > .progress-training-card { min-height: 0 !important; height: auto !important; padding: 14px 12px !important; }
  .page-progreso .progress-screen.mode-training .training-progress-visual { min-height: 0 !important; height: auto !important; }
  .page-progreso .progress-screen.mode-training .training-week-bars { height: 128px !important; align-items: end !important; }
  .page-progreso .progress-screen.mode-training .training-week-day { grid-template-rows: 1fr 18px; }
  .page-progreso .progress-screen.mode-training .training-week-bars { grid-template-columns: repeat(var(--training-buckets, 7), minmax(0, 1fr)) !important; grid-auto-flow: row !important; }
  .page-progreso .progress-screen.mode-training .training-week-bar { min-height: 7px !important; }
}

.page-progreso .progress-screen.mode-weight .metric-avance section { width: 100% !important; }
.page-progreso .weight-progress-track { display: block; width: 100%; height: 6px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #183047; }
.page-progreso .weight-progress-track > i { display: block; width: var(--weight-progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2787f4,#18cddd); box-shadow: 0 0 10px #18cddd66; }

/* Una sola paleta de gráficos para teléfono, tableta y escritorio. */
.page-progreso .chart-grid { stroke: #22364a !important; }
.page-progreso .chart-goal { stroke: #84dce8 !important; stroke-dasharray: 6 5 !important; }
.page-progreso .metric-bar.below { fill: var(--progress-under, #38c9eb) !important; opacity: 1 !important; }
.page-progreso .metric-bar.complete { fill: var(--progress-goal, #42dfb2) !important; opacity: 1 !important; }
.page-progreso .metric-bar.over { fill: var(--progress-over, #9b6be8) !important; opacity: 1 !important; }
.page-progreso .metric-bar.estimated { fill: #101d32 !important; stroke: #1b2b43 !important; stroke-width: 1 !important; opacity: 1 !important; }
.page-progreso .weight-line { stroke: #3b8ef3 !important; opacity: 1 !important; visibility: visible !important; }
.page-progreso .weight-point { fill: #3b8ef3 !important; opacity: 1 !important; visibility: visible !important; }
.page-progreso .average-line { stroke: #39d2a0 !important; opacity: 1 !important; visibility: visible !important; }
.page-progreso .trend-line { stroke: #a779ff !important; opacity: 1 !important; visibility: visible !important; }

/* En una pestaña del navegador queda aire entre los selectores y la barra
   fija. La PWA conserva su separación nativa. */
@media (max-width: 720px) and (display-mode: browser), (min-width: 721px) and (max-width: 1023px) and (orientation: portrait) and (display-mode: browser) {
  .page-progreso .progress-toolbar { margin-bottom: 12px !important; }
}

/* La leyenda replica exactamente los tres degradados de las barras. */
.page-progreso .chart-legend .below { color: #38c9eb !important; }
.page-progreso .chart-legend .complete { color: #42dfb2 !important; }
.page-progreso .chart-legend .over { color: #9b6be8 !important; }
.page-progreso .chart-legend .goal { color: #84dce8 !important; }