/* =====================================================================
   REDISEÑO 2026 — bloque DASHBOARD (pantalla Hoy)
   Solo tokens de design/tokens.css. Se carga después del <style> principal.
   ===================================================================== */

/* ---- cabecera: botón de cuenta con área táctil de 44 px ---- */
#screen-dashboard .dash-header { gap: var(--sp-3); margin-bottom: var(--sp-6); }
/* el saludo puede llevar un nombre largo sin espacios (p. ej. parte local del email): que no empuje el botón fuera */
#screen-dashboard .dash-header > div { flex: 1; min-width: 0; }
#screen-dashboard #dashGreeting { overflow-wrap: anywhere; }
#screen-dashboard .account-btn { width: 44px; height: 44px; border-color: var(--hairline-strong); color: var(--text-2); }

/* ---- tarjeta protagonista: figura animada + estado semanal ---- */
#screen-dashboard .hero-fig {
  display: flex; flex-direction: column;
  height: 160px; box-sizing: border-box;
  margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3);
  background: radial-gradient(ellipse 80% 70% at 50% 42%, rgba(75, 111, 255, 0.12), transparent), var(--surface-player);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  animation: heroFigIn 380ms var(--ease-out-strong) 80ms backwards;
}
#screen-dashboard .hero-fig[hidden] { display: none; }
#screen-dashboard .hero-fig .fig { flex: 1; min-height: 0; width: 100%; }
/* alto reservado para 2 líneas: la pista cambia de longitud según la fase y, sin reserva,
   la figura se reescalaría en cada cambio */
#screen-dashboard .today-card .hero-fig .fig-cue {
  flex: none; margin: var(--sp-1) 0 0; height: calc(var(--fs-sm) * 1.3 * 2);
  font-size: var(--fs-sm); line-height: 1.3; color: var(--teal-text); text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@keyframes heroFigIn { from { opacity: 0; } to { opacity: 1; } }
/* pantallas bajas: la figura cede altura para que el botón quede más cerca del pliegue */
@media (max-height: 700px) { #screen-dashboard .hero-fig { height: 148px; } }

/* rótulo de la tarjeta: azul de marca mezclado con bone white para llegar a AA (el azul puro da 3,9:1 sobre surface-2) */
#screen-dashboard .today-card > .card-cap {
  color: var(--text-2);
  color: color-mix(in srgb, var(--performance-blue) 70%, var(--bone-white));
}

#screen-dashboard .today-card h2 { margin: 0 0 var(--sp-2); }
#screen-dashboard .today-status {
  display: flex; width: fit-content; max-width: 100%; box-sizing: border-box;
  align-items: center; gap: var(--sp-2);
  min-height: 28px; padding: 0 var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  color: var(--text-2);
  background: var(--surface-1); border: 1px solid var(--hairline-strong); border-radius: var(--r-pill);
}
#screen-dashboard .today-status[hidden] { display: none; }
#screen-dashboard .today-status i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: rgba(244, 242, 237, 0.24); }
#screen-dashboard .today-status.on { color: var(--teal-text); background: rgba(41, 199, 184, 0.1); border-color: rgba(41, 199, 184, 0.3); }
#screen-dashboard .today-status.on i { background: var(--recovery-teal); box-shadow: 0 0 0 3px rgba(41, 199, 184, 0.16); }
#screen-dashboard .today-card #todayMeta { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-3); margin-bottom: var(--sp-4); }

/* ---- "¿Qué entrenas hoy?": fila con scroll horizontal, chips de 44 px ---- */
#screen-dashboard .quick-card .card-cap,
#screen-dashboard .link-card .card-cap { color: var(--text-3); }
#screen-dashboard .quick-card .chip-row {
  flex-wrap: nowrap; gap: var(--sp-2);
  margin: 0 calc(var(--sp-5) * -1); padding: 2px var(--sp-5);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding: 0 var(--sp-5);
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, black calc(100% - var(--sp-5)), transparent);
  mask-image: linear-gradient(90deg, black calc(100% - var(--sp-5)), transparent);
}
#screen-dashboard .quick-card .chip-row::-webkit-scrollbar { display: none; }
#screen-dashboard .quick-card .chip { flex: none; min-height: 44px; padding: 0 var(--sp-5); white-space: nowrap; scroll-snap-align: start; }
#screen-dashboard .quick-card .chip:focus-visible { outline-offset: -2px; }
#screen-dashboard .quick-card .chip-more { color: var(--text-2); }

/* ---- progreso y zona prioritaria ---- */
#screen-dashboard .dash-row > * { min-width: 0; }
#screen-dashboard .stat-card span { color: var(--text-3); }
#screen-dashboard .stat-teal .card-cap { color: var(--teal-text); }
/* un <button> centra su contenido en vertical: sin esto "Zona prioritaria" no se alinea con "Progreso" */
#screen-dashboard .link-card { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; text-align: left; }
#screen-dashboard .stat-card b { overflow-wrap: break-word; }
/* a 360 px la columna mide ~114 px: el halo de 3 px hacía que los puntos consecutivos se tocaran */
#screen-dashboard .week-track .wk i.done { box-shadow: 0 0 0 2px rgba(41, 199, 184, 0.16); }

@media (prefers-reduced-motion: reduce) {
  #screen-dashboard .hero-fig { animation: none; }
}