:root {
  color-scheme: light;
  /* legacy names kept (they're referenced ~200 places across Login/Onboarding/Profile/Stats/
     calendar/modals) but every one now points at the light qk-* palette declared further down
     this file — one palette rendered everywhere, without hand-rewriting every old selector.
     --qk-font/--qk-font-mono also flow back here so those older screens pick up the same
     Manrope/IBM Plex Mono type as Home/Plan instead of the generic system-font stack. */
  --bg: var(--qk-bg);
  --panel: var(--qk-surface);
  --panel-2: var(--qk-surface-alt);
  --border: var(--qk-border);
  --border-strong: var(--qk-border-strong);
  --text: var(--qk-text);
  --text-dim: var(--qk-text-soft);
  --text-faint: var(--qk-muted);
  --lime: var(--qk-accent-light);
  --lime-dim: var(--qk-accent);
  --coral: var(--qk-accent);
  --coral-dim: var(--qk-accent-light);
  --cyan: var(--qk-info);
  --orange: var(--qk-long);
  --red: var(--qk-danger);
  --green-build: var(--qk-easy);
  --amber-taper: var(--qk-warning);
  --pink-speed: var(--qk-speed);
  --slate-lift: var(--qk-strength);
  --mono: var(--qk-font-mono);
  --sans: var(--qk-font);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
}

/* app shell: sidebar + main column */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

.brand-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--coral);
  box-shadow: 0 0 10px var(--coral);
}
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: transparent;
  border: none; border-left: 3px solid transparent;
  color: var(--text-dim); font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 13px 20px 13px 17px; cursor: pointer; transition: all .15s;
}
.nav-item:hover { background: rgba(20,23,28,0.03); color: var(--text); }
.nav-item.active { border-left-color: var(--coral); background: rgba(219,124,107,0.08); color: var(--text); }
.nav-icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.85;
}
.nav-item.active .nav-icon { opacity: 1; }

.main-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

.btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, transform .1s, background .15s;
}
.btn:hover { border-color: rgba(20,23,28,0.3); background: var(--panel-2); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; }
.btn-primary {
  background: var(--coral);
  color: var(--qk-text);
  border-color: var(--coral);
  width: 100%;
  padding: 14px;
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 800;
  border-radius: 10px;
}
.btn-primary:hover { background: var(--qk-accent-light); }

/* generic card */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
}

.block-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 6px;
}

.dashboard {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 1040px; width: 100%; margin: 0 auto;
  padding: 24px 24px calc(48px + env(safe-area-inset-bottom));
}

.view { display: none; }
.view.active { display: flex; flex-direction: column; gap: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .view.active { animation: viewFadeIn .32s ease; }
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.profile-card { max-width: 660px; }
.profile-title { font-size: 17px; font-weight: 700; margin: 4px 0 4px; }
.profile-body { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 20px; }
.profile-section-title {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint); margin: 14px 0 -4px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.profile-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.profile-actions { display: flex; gap: 10px; }
.profile-actions .btn-primary { flex: 1; }
.profile-footer { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.strava-connect-btn { display: inline-flex; line-height: 0; max-width: 100%; }
.strava-connect-btn img { height: 40px; width: auto; max-width: 100%; display: block; }

.account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(20,23,28,0.02); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; flex-wrap: wrap;
}
.account-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.account-info span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--text-faint); font-weight: 700; }
.account-info b { font-size: 14px; color: var(--text); }
.lang-toggles { display: flex; gap: 8px; }
.lang-toggle {
  flex: 1; padding: 10px 0; border-radius: 8px; border: 1px solid var(--border-strong);
  background: rgba(20,23,28,0.03); color: var(--text-dim); font-family: var(--sans);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.lang-toggle:hover { border-color: rgba(20,23,28,0.3); }
.lang-toggle.active { background: var(--coral); border-color: var(--coral); color: var(--qk-text); }

/* login screen */
.login-screen {
  display: none; position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center; padding: 20px;
  background: var(--bg);
}
.login-screen.active { display: flex; }

/* initial-load skeleton — sits above everything until we know whether to show login or the dashboard */
.app-loading {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 20px;
  background: var(--bg);
  transition: opacity .25s ease, visibility .25s ease;
}
.app-loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loading-brand {
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.12em; font-size: 14px;
  display: flex; align-items: center; gap: 8px; color: var(--text);
}
.skeleton-row { display: flex; gap: 12px; width: 100%; max-width: 340px; }
.skeleton-card {
  flex: 1; height: 58px; border-radius: 12px; border: 1px solid var(--border);
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 37%, var(--panel) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}
.skeleton-card-wide { height: 78px; }
@keyframes skeletonShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.login-card {
  width: 100%; max-width: 360px; background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 60px rgba(20,23,28,0.12);
}
.login-brand {
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.12em; font-size: 14px;
  display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 4px;
}
.login-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.login-error { font-size: 12.5px; color: var(--red); min-height: 16px; text-align: center; }

/* qk-styled login/signup card — .login-screen (fixed overlay + centering) stays as-is;
   only the inner card is reskinned. Onboarding keeps the old .login-card look for now,
   since it isn't part of this pass. */
.qk-auth-card {
  width: 100%; max-width: 360px; background: var(--qk-surface);
  border: 1px solid var(--qk-border); border-radius: var(--qk-radius-lg); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px; font-family: var(--qk-font); color: var(--qk-text);
  box-shadow: 0 24px 60px rgba(20,23,28,0.12);
}
.qk-auth-card .qk-logo { text-align: center; }
.qk-auth-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 14px 0 0; text-align: center; }
.qk-auth-sub { font-size: 13px; color: var(--qk-muted); text-align: center; margin: 0 0 4px; }
.qk-auth-card .qk-input { margin-top: 0; }
.qk-auth-error { font-size: 12.5px; color: var(--qk-danger); text-align: center; min-height: 16px; margin: -2px 0; }
.qk-auth-success { font-size: 12.5px; color: var(--qk-positive); text-align: center; min-height: 16px; margin: -2px 0; }
.qk-auth-card .qk-quiet { margin-top: 2px; }

.qk-logo { font-family: var(--qk-font-mono); font-weight: 600; font-size: 20px; letter-spacing: 0.18em; color: var(--qk-text); }
.qk-logo b { color: var(--qk-accent); font-weight: 600; }
.qk-input {
  width: 100%; min-height: 52px; border-radius: 14px; border: 1px solid var(--qk-border);
  background: var(--qk-surface-alt); color: var(--qk-text); padding: 0 16px;
  font-family: var(--qk-font); font-size: 15px; margin-top: 10px; outline: none;
}
.qk-input:focus { border-color: var(--qk-accent); }
.qk-input::placeholder { color: var(--qk-muted); }
.qk-btn-block { width: 100%; min-height: 52px; margin-top: 6px; border: none; border-radius: var(--qk-radius-pill); background: var(--qk-accent); color: var(--qk-bg); font-family: var(--qk-font); font-size: 15px; font-weight: 800; cursor: pointer; }
.qk-quiet { margin-top: 18px; text-align: center; font-size: 13px; color: var(--qk-muted); }
.qk-quiet a { color: var(--qk-accent); text-decoration: none; }
.qk-quiet a:hover { text-decoration: underline; }
.onboarding-card { max-width: 420px; max-height: 90vh; overflow-y: auto; }
.onboarding-hint { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; text-align: center; margin: -6px 0 4px; }

.ob-progress { display: flex; gap: 4px; margin: 2px 0 0; }
.ob-progress i { flex: 1; height: 4px; border-radius: 2px; background: var(--border); display: block; }
.ob-progress i.done { background: var(--coral); }
.ob-step-label { font-family: var(--mono); font-size: 11px; color: var(--text-faint); text-align: center; margin: 2px 0 6px; }
.ob-step { display: none; flex-direction: column; gap: 14px; }
.ob-step.active { display: flex; }
.ob-nav { display: flex; gap: 10px; margin-top: 4px; }
.ob-nav .btn-primary { flex: 1; }
#obBack.hidden { display: none; }

.level-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.level-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--panel); cursor: pointer; font-family: inherit; color: var(--text); }
.level-card.active { border-color: var(--coral); background: rgba(255,148,109,0.08); }
.level-ring { width: 32px; height: 32px; flex: none; }
.level-ring-bg { fill: none; stroke: var(--border-strong); stroke-width: 3; }
.level-ring-fill { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; }
.level-card b { display: block; font-size: 14px; }
.level-card small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; font-weight: 400; line-height: 1.4; }

.onboarding-summary { list-style: none; padding: 0; margin: 4px 0; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.onboarding-summary li { padding: 10px 0; border-top: 1px solid var(--border-strong); }
.onboarding-summary li:first-child { border-top: none; }
.onboarding-summary b { color: var(--text); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; font-weight: 700; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.stats-grid .zones-card, .stats-grid .qk-card { grid-column: 1 / -1; }

/* days off calendar */
.calendar-card { max-width: 480px; }
.calendar-hint { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin-bottom: 18px; }
.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar-nav-btn { width: 38px; height: 38px; padding: 0; font-size: 18px; line-height: 1; flex: none; }
.calendar-month { font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.calendar-weekday-row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); text-align: center;
  margin-bottom: 6px; font-weight: 700;
}
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-day {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(20,23,28,0.02); color: var(--text-dim); font-family: var(--mono);
  font-size: 12.5px; cursor: pointer; transition: all .12s; display: flex; align-items: center; justify-content: center;
}
.calendar-day:hover:not(.cal-disabled):not(.cal-empty) { border-color: var(--coral); color: var(--text); }
.calendar-day.cal-empty { visibility: hidden; cursor: default; }
.calendar-day.cal-disabled { color: var(--text-faint); opacity: 0.35; cursor: default; }
.calendar-day.cal-today { border-color: var(--cyan); color: var(--cyan); font-weight: 700; }
.calendar-day.cal-blocked-date { background: var(--coral); border-color: var(--coral); color: var(--qk-text); font-weight: 700; }
.calendar-day.cal-no-equipment-date { background: var(--qk-accent-alt, #5457D6); border-color: var(--qk-accent-alt, #5457D6); color: #fff; font-weight: 700; }
.calendar-day.cal-blocked-weekly { background: rgba(20,23,28,0.05); color: var(--text-faint); cursor: default; text-decoration: line-through; }
.calendar-legend { display: flex; gap: 16px; margin-top: 16px; font-size: 11px; color: var(--text-faint); flex-wrap: wrap; }
.calendar-legend span { display: flex; align-items: center; gap: 6px; }
.cal-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-swatch-off { background: var(--coral); }
.cal-swatch-no-equip { background: var(--qk-accent-alt, #5457D6); }
.cal-swatch-weekly { background: rgba(20,23,28,0.15); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.pill {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  background: rgba(20,23,28,0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
  letter-spacing: 0.04em;
}
.pill b { color: var(--text); font-weight: 700; margin-left: 3px; }
.stat-value { font-size: 22px; font-weight: 700; margin-top: 2px; }
.stat-value span { font-family: var(--mono); }
.stat-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

.ring {
  --pct: 0%;
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--orange) var(--pct), rgba(20,23,28,0.08) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ring::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--panel);
}
.ring span { position: relative; font-family: var(--mono); font-size: 11px; font-weight: 700; }
/* block distance */
.block-main { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.block-number { font-family: var(--mono); font-size: 46px; font-weight: 800; color: var(--lime); line-height: 1; }
.block-unit { font-size: 20px; color: var(--lime-dim); margin-left: 6px; font-weight: 600; }
.block-detail { flex: 1; min-width: 260px; }
.block-detail-line { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.block-detail-line b { color: var(--text); }
.block-detail-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 8px; }
.progress-bar { height: 6px; border-radius: 4px; background: rgba(20,23,28,0.06); overflow: hidden; }
.progress-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--lime-dim), var(--lime)); border-radius: 4px; transition: width .4s; }

.intensity-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(20,23,28,0.06); margin-top: 10px; }
.intensity-seg { height: 100%; transition: width .4s; }
.intensity-easy { background: var(--qk-easy); }
.intensity-moderate { background: var(--qk-tempo); }
.intensity-hard { background: var(--qk-speed); }
.intensity-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--qk-muted); }
.intensity-legend span { display: inline-flex; align-items: center; gap: 5px; }
.intensity-legend b { color: var(--qk-text-soft); }
.intensity-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.intensity-legend .dot.easy { background: var(--qk-easy); }
.intensity-legend .dot.moderate { background: var(--qk-tempo); }
.intensity-legend .dot.hard { background: var(--qk-speed); }
.timeline-bars { display: flex; gap: 4px; height: 64px; align-items: flex-end; margin: 16px 0 10px; position: relative; }
.timeline-bar {
  flex: 1;
  border-radius: 3px 3px 2px 2px;
  min-width: 0;
  cursor: pointer;
  transition: opacity .12s, transform .12s;
  position: relative;
}
.timeline-bar:hover { opacity: 0.75; transform: translateY(-2px); }
.timeline-bar.foundation { background: var(--cyan); }
.timeline-bar.build { background: var(--green-build); }
.timeline-bar.peak { background: var(--red); }
.timeline-bar.taper { background: var(--amber-taper); }
.swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.timeline-tooltip {
  position: absolute; display: none; pointer-events: none;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 11px; font-size: 12px; font-family: var(--mono); z-index: 20;
  box-shadow: 0 8px 24px rgba(20,23,28,0.16); white-space: nowrap;
}

/* main row */
.row-main { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.week-title { font-weight: 700; font-size: 13.5px; flex: none; }
.week-meta { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); }
.week-row.open .week-body { display: block; }
.adaptive-note {
  font-size: 11.5px; color: var(--amber-taper); background: rgba(207,154,62,0.1);
  border: 1px solid rgba(207,154,62,0.3); border-radius: 8px; padding: 8px 12px;
  margin: -4px 0 14px; line-height: 1.4; cursor: pointer;
}
.adaptive-note-toggle {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em;
  opacity: .75; margin-left: 4px; white-space: nowrap;
}
.adaptive-note.expanded .adaptive-note-toggle { display: none; }
.adaptive-note-detail {
  display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(207,154,62,0.25);
  color: var(--text-dim); font-size: 11.5px; line-height: 1.5;
}
.adaptive-note.expanded .adaptive-note-detail { display: block; }

.day-group { padding: 10px 0; border-top: 1px solid var(--border); border-radius: 8px; transition: background .15s, border-color .15s; }
.day-group:first-child { border-top: none; }

.day-group.day-off { opacity: .55; }
.day-off-label { font-size: 12.5px; color: var(--text-faint); font-style: italic; padding: 2px 0 4px; }

.day-drag-handle {
  cursor: grab; color: var(--text-faint); font-size: 12px; letter-spacing: -1px;
  padding: 2px 4px; margin: -2px -4px -2px -6px; touch-action: none; user-select: none;
}
.day-drag-handle:active { cursor: grabbing; color: var(--coral); }

.day-group.drag-source { opacity: .35; }
.day-group.drag-over { background: rgba(219,124,107,0.1); border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
.day-group.day-off.drag-over { opacity: 1; }
.day-group.day-off.drag-over .day-off-label::after { content: ' — soltar aquí para entrenar este día'; font-style: normal; color: var(--coral); }

.day-drag-floater {
  position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none;
  background: var(--qk-surface); border: 1px solid var(--qk-accent); border-radius: var(--qk-radius-md);
  padding: 12px 14px; box-shadow: 0 12px 28px rgba(20,23,28,0.18); transform: scale(1.03) rotate(-1deg);
  opacity: .96; max-height: 60vh; overflow: hidden; font-family: var(--qk-font);
}

/* zones */
.zones-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.zones-list { display: flex; flex-direction: column; gap: 10px; }
.zone-row { border-bottom: 1px dashed var(--border); padding-bottom: 10px; }
.zone-row:last-child { border-bottom: none; padding-bottom: 0; }
.zone-row-main { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.zone-name { font-size: 12.5px; font-weight: 700; }
.zone-desc { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }
.zone-pace-wrap { text-align: right; flex: none; }
.zone-pace { font-family: var(--mono); font-size: 12.5px; color: var(--cyan); font-weight: 700; white-space: nowrap; }
.zone-hr { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; margin-top: 1px; }
.zone-why-toggle {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-faint); margin-left: 4px;
}
.zone-row.expanded .zone-why-toggle { display: none; }
.zone-why-detail {
  display: none; font-size: 11px; color: var(--text-dim); line-height: 1.5;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.zone-row.expanded .zone-why-detail { display: block; }
.zones-note { font-size: 11px; color: var(--text-faint); line-height: 1.5; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.zones-note b { color: var(--text); }

/* charts */
.chart-canvas-wrap { position: relative; height: 160px; margin-top: 10px; }
.chart-canvas-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.chart-error {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; font-size: 12.5px; color: var(--qk-muted);
  padding: 0 16px;
}
.chart-error-retry {
  font-family: var(--qk-font-mono); font-size: 12px; font-weight: 700; color: var(--qk-accent);
  background: none; border: 1px solid var(--qk-accent); border-radius: var(--qk-radius-pill);
  padding: 6px 16px; cursor: pointer;
}
.chart-title { font-size: 13.5px; font-weight: 700; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--text-faint); font-weight: 700; }
.field input, .field select, .field textarea {
  background: rgba(20,23,28,0.03); border: 1px solid var(--border-strong); border-radius: 9px;
  color: var(--text); font-family: var(--sans); font-size: 13.5px; padding: 11px 12px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--coral); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field-wide { grid-column: span 2; }
.field-pair { display: flex; gap: 8px; }
.field-pair input { width: 100%; }
.field-triple { display: flex; align-items: center; gap: 6px; }
.field-triple input, .field-triple select { width: 100%; text-align: center; text-align-last: center; }
.field-sep { color: var(--text-faint); font-family: var(--mono); font-weight: 700; }
.pace-estimate-hint {
  display: none; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--text-faint); margin-top: 8px; padding: 8px 10px;
  background: rgba(63,198,241,0.06); border: 1px solid rgba(63,198,241,0.25); border-radius: 8px;
}
.pace-estimate-hint.visible { display: flex; }
.pace-estimate-hint b { color: var(--cyan); }

/* weekday toggles — default (untouched) = training day (active/coral);
   tapping a day marks it as a day off (dimmed), matching the "Training Days" label. */
.weekday-toggles { display: flex; gap: 6px; }
.day-toggle {
  flex: 1; padding: 10px 0; border-radius: 8px; border: 1px solid var(--coral);
  background: var(--coral); color: var(--qk-text); font-family: var(--mono);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.day-toggle:hover { opacity: 0.85; }
.day-toggle.off {
  background: rgba(20,23,28,0.03); border-color: var(--border-strong); color: var(--text-dim); opacity: 1;
}
.day-toggle.off:hover { border-color: rgba(20,23,28,0.3); }
.modal-backdrop.open { display: flex; }
.modal-foot .btn-primary { width: auto; flex: 1; }

.qk-celebrate {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 14px); z-index: 200;
  transform: translate(-50%, -140%); opacity: 0;
  background: var(--qk-text); color: var(--qk-bg);
  font-family: var(--qk-font); font-size: 13px; font-weight: 700;
  padding: 10px 18px; border-radius: 100px; box-shadow: 0 8px 24px rgba(20,23,28,0.18);
  pointer-events: none; white-space: nowrap;
  transition: transform .32s cubic-bezier(.2,.9,.3,1.3), opacity .25s ease;
}
.qk-celebrate.show {
  transform: translate(-50%, 0); opacity: 1;
  transition: transform .32s cubic-bezier(.2,.9,.3,1.3), opacity .2s ease;
}
.qk-celebrate.error { background: var(--qk-danger); }

.qk-nav {
  display: flex;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: calc(var(--qk-nav-h) + env(safe-area-inset-bottom));
  padding-top: 13px; padding-bottom: env(safe-area-inset-bottom);
  background: var(--qk-surface-alt); border-top: 1px solid var(--qk-border);
}
.qk-nav > .nav-item.qk-tab { max-width: 120px; margin: 0 auto; }
.qk-nav .nav-item.qk-tab {
  flex: 1; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 5px; color: var(--qk-muted); font-size: 9.5px; font-weight: 600; letter-spacing: .01em;
  font-family: var(--qk-font); border: none; background: transparent; padding: 0; width: auto;
}
.qk-nav .nav-item.qk-tab:hover { background: transparent; color: var(--qk-text-soft); }
.qk-nav .nav-item.qk-tab .nav-icon { width: 21px; height: 21px; opacity: 1; }
.qk-nav .nav-item.qk-tab.active { color: var(--qk-accent); font-weight: 700; }
.qk-nav .nav-item.qk-tab.active .nav-icon { opacity: 1; }

/* responsive */
.dashboard { padding-bottom: calc(var(--qk-nav-h) + 24px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr; }
  .block-number { font-size: 36px; }
  .dashboard { padding: 18px 16px calc(var(--qk-nav-h) + 24px + env(safe-area-inset-bottom)) 16px; }
}
@media (max-width: 560px) {
  .field-wide { grid-column: span 1; }
}

/* ============================================================
   QK design system — new visual direction from Claude Design.
   Self-contained (own --qk-* tokens + .qk-* classes) so it can
   be adopted one view at a time without touching the old rules
   above, which unmigrated views still depend on.
   ============================================================ */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/manrope-800.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibmplexmono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibmplexmono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibmplexmono-600.woff2') format('woff2'); }

:root {
  --qk-bg: #F7F7F5;
  --qk-surface: #FFFFFF;
  --qk-surface-alt: #F0F1F3;
  --qk-border: #E3E5E9;
  --qk-border-strong: #CDD1D8;
  --qk-accent: #FF5A1F;
  --qk-accent-light: #FF946D;
  --qk-accent-alt: #5457D6;
  --qk-positive: #2E9E5B;
  --qk-info: #1C86BE;
  --qk-warning: #C77A1E;
  --qk-danger: #C0392E;
  --qk-text: #14171C;
  --qk-text-soft: #5B6270;
  --qk-muted: #8A909C;

  --qk-font: Manrope, system-ui, -apple-system, sans-serif;
  --qk-font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  --qk-radius-lg: 22px;
  --qk-radius-md: 18px;
  --qk-radius-pill: 999px;
  --qk-gap-page: 24px;
  --qk-gap-card: 12px;
  --qk-nav-h: 82px;

  --qk-easy: #3E9E6B;
  --qk-tempo: #14A896;
  --qk-speed: #5457D6;
  --qk-long: #D97A2A;
  --qk-recovery: #4C82A0;
  --qk-strength: #8A5CC7;
  --qk-rest: #8A909C;
}

.qk-mono { font-family: var(--qk-font-mono); }
.qk-eyebrow { font-family: var(--qk-font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--qk-muted); }
/* the one line on Home meant to feel personal, not technical — sans-serif, sentence case,
   warmer weight/size than the mono all-caps labels used everywhere else on this screen. */
.qk-greeting { font-family: var(--qk-font); font-size: 15px; font-weight: 700; color: var(--qk-text-soft); letter-spacing: 0; }
.qk-label { font-family: var(--qk-font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--qk-muted); }

/* --- cabecera --- */
.qk-header { padding: 4px var(--qk-gap-page) 0; font-family: var(--qk-font); color: var(--qk-text); }
.qk-week-top { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; gap: 12px; }
.qk-week-title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.qk-phase { font-family: var(--qk-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--qk-accent); white-space: nowrap; }
.qk-progress { margin-top: 12px; height: 9px; border-radius: 5px; background: var(--qk-border); overflow: hidden; }
.qk-progress > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--qk-accent-light), var(--qk-accent)); transition: width .3s ease; }
.qk-week-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--qk-muted); gap: 12px; }
.qk-week-meta b { color: var(--qk-text-soft); }
.qk-week-meta-left { justify-content: flex-start; text-align: left; }
.qk-sync-status { margin-top: 4px; font-size: 11.5px; color: var(--qk-muted); }

.qk-week-strip { display: flex; justify-content: space-between; padding: 14px var(--qk-gap-page) 0; }
.qk-week-strip-day { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; background: none; border: none; padding: 4px 2px; cursor: pointer; font-family: var(--qk-font); }
.qk-week-strip-dow { font-family: var(--qk-font-mono); font-size: 9px; letter-spacing: .1em; color: var(--qk-muted); }
.qk-week-strip-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--qk-text); }
.qk-week-strip-day.today .qk-week-strip-num { background: var(--qk-accent); color: var(--qk-bg); }
.qk-week-strip-dots { display: flex; gap: 3px; height: 6px; }

/* --- tarjeta de sesión de hoy --- */
.qk-today {
  margin: 14px var(--qk-gap-page) 0;
  background: var(--qk-surface);
  border-radius: var(--qk-radius-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
  font-family: var(--qk-font);
  color: var(--qk-text);
}
.qk-today::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--qk-accent); opacity: 0.09; pointer-events: none;
}
.qk-type { display: flex; align-items: center; gap: 8px; }
.qk-type-ctx { font-family: var(--qk-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--qk-muted); text-transform: uppercase; }
.qk-desc { font-size: 14px; line-height: 1.6; color: var(--qk-text-soft); margin-top: 10px; }
.qk-desc strong { color: var(--qk-text); }
.qk-btn-ghost { width: 44px; height: 44px; flex: none; border: 1px solid var(--qk-border); border-radius: 50%; background: transparent; color: var(--qk-text-soft); font-size: 18px; cursor: pointer; }
.qk-empty { font-size: 13.5px; color: var(--qk-text-soft); line-height: 1.6; padding: 4px 0; }

.qk-hero-top { display: flex; align-items: flex-start; justify-content: space-between; }
.qk-hero-icon { width: 44px; height: 44px; border-radius: 16px; background: rgba(255,90,31,0.08); color: var(--qk-accent); display: flex; align-items: center; justify-content: center; flex: none; }
.qk-hero-icon svg { width: 22px; height: 22px; }
.qk-hero-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin: 14px 0 0; }
.qk-hero-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--qk-border); flex-wrap: wrap; }
.qk-hero-stats { display: flex; gap: 20px; }
.qk-hero-stat { display: flex; flex-direction: column; gap: 3px; }
.qk-hero-stat-label { font-family: var(--qk-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--qk-muted); text-transform: uppercase; }
.qk-hero-stat-value { font-family: var(--qk-font-mono); font-weight: 700; font-size: 14px; }
.qk-hero-actions { display: flex; align-items: center; gap: 10px; }
.qk-hero-cta { width: 44px; height: 44px; flex: none; border-radius: 50%; border: none; background: var(--qk-text); color: var(--qk-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.qk-hero-cta svg { width: 16px; height: 16px; }
.qk-hero-cta.done { background: var(--qk-accent); }

/* today card: the hero's own exercise list sits inside #todayCard's padding already, so
   drop the side indent .qk-ex-list assumes when used inside the checklist-style cards */
#todayList .qk-ex-list { margin-left: 0; }

/* secondary sessions (e.g. same-day strength) and Strava extras render as standalone
   cards below the hero, matching the design — flush with the page like every other
   top-level card, with only vertical spacing between them. */
#todaySecondary:empty { display: none; }
#todaySecondary .qk-row { margin: 0; }
#todaySecondary .qk-secondary + .qk-secondary .qk-row { margin-top: var(--qk-gap-card); }
#todaySecondary .qk-ex-list { margin-left: 0; }

/* --- filas / tiras secundarias --- */
.qk-row { margin: var(--qk-gap-card) var(--qk-gap-page) 0; background: var(--qk-surface-alt); border-radius: var(--qk-radius-md); padding: 12px 18px; display: flex; align-items: center; gap: 12px; min-height: 56px; text-decoration: none; color: inherit; font-family: var(--qk-font); }
.qk-row-badge { width: 34px; height: 34px; border-radius: 12px; background: var(--qk-border); display: flex; align-items: center; justify-content: center; font-family: var(--qk-font-mono); font-size: 10px; font-weight: 600; color: var(--qk-strength); }
.qk-row-title { font-size: 15px; font-weight: 700; color: var(--qk-text); }
.qk-row-sub { font-size: 13px; color: var(--qk-muted); margin-top: 2px; }
.qk-chev { color: var(--qk-muted); font-size: 18px; }

/* --- weekly progress / key metrics / rest-of-week (Home) --- */
.qk-section { margin: 0 var(--qk-gap-page); }
.qk-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.qk-section-title { font-family: var(--qk-font); font-size: 17px; font-weight: 800; color: var(--qk-text); margin: 0; letter-spacing: -0.01em; }
.qk-section-meta { font-family: var(--qk-font); font-size: 12.5px; font-weight: 600; color: var(--qk-muted); text-decoration: none; }

.qk-weekly-card { background: var(--qk-surface); border: 1px solid var(--qk-border); border-radius: var(--qk-radius-lg); padding: 18px; }
.qk-weekly-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.qk-weekly-pct { display: flex; flex-direction: column; gap: 4px; }
.qk-weekly-pct b { font-family: var(--qk-font); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--qk-text); }
.qk-weekly-pct b small { font-size: 14px; font-weight: 600; color: var(--qk-muted); margin-left: 2px; }
.qk-weekly-goal { font-family: var(--qk-font); font-size: 12px; font-weight: 600; color: var(--qk-muted); }
.qk-weekly-minibars { display: flex; align-items: flex-end; gap: 6px; height: 44px; }
.qk-weekly-minibar { width: 6px; border-radius: 3px; background: var(--qk-border); }
.qk-weekly-minibar.active { background: var(--qk-accent); }

.qk-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qk-metric-card { background: var(--qk-surface); border: 1px solid var(--qk-border); border-radius: var(--qk-radius-lg); padding: 16px; }
.qk-metric-icon svg { width: 20px; height: 20px; display: block; margin-bottom: 10px; }
.qk-metric-label { display: block; font-family: var(--qk-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qk-muted); }
.qk-metric-value { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; }
.qk-metric-value span { font-family: var(--qk-font-mono); font-size: 19px; font-weight: 800; color: var(--qk-text); }
.qk-metric-value small { font-size: 10.5px; color: var(--qk-muted); font-weight: 600; }
.qk-metric-sub { display: block; font-size: 10.5px; color: var(--qk-muted); margin-top: 6px; line-height: 1.4; }

.qk-restweek-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--qk-surface); border: 1px solid var(--qk-border); border-radius: var(--qk-radius-md);
  padding: 12px; margin-top: 8px; cursor: pointer; font-family: var(--qk-font);
}
.qk-restweek-row:first-child { margin-top: 0; }
.qk-restweek-badge {
  width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--qk-surface-alt);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.qk-restweek-badge span { font-family: var(--qk-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--qk-muted); text-transform: uppercase; }
.qk-restweek-badge b { font-size: 14px; font-weight: 800; color: var(--qk-text); }
.qk-restweek-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qk-restweek-title { font-size: 14px; font-weight: 700; color: var(--qk-text); }
.qk-restweek-sub { font-size: 12px; color: var(--qk-muted); margin-top: 2px; }

/* --- gráfico de volumen (reusa la barra existente, retocada con tokens qk) --- */
.qk-chart { margin: 10px var(--qk-gap-page) 0; background: var(--qk-surface-alt); border-radius: var(--qk-radius-md); padding: 12px 16px 10px; }
.qk-chart-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.qk-chart-top .qk-label { flex: 1; min-width: 140px; }
.qk-chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--qk-font-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--qk-muted); }
.qk-chart-axis [data-phase].active { color: var(--qk-accent); font-weight: 700; }
.qk-chart .timeline-bars { margin: 10px 0 0; }
.qk-chart .timeline-bars svg { width: 100%; height: 96px; display: block; overflow: visible; }
.qk-chart .tl-hit { cursor: pointer; }
.qk-chart .timeline-tooltip { background: var(--qk-bg); border: 1px solid var(--qk-border); border-radius: 10px; padding: 8px 10px; font-size: 11.5px; color: var(--qk-text-soft); line-height: 1.5; max-width: 160px; }

/* --- tarjeta de sesión (Today / Plan) --- */
.qk-session { margin: var(--qk-gap-card) 0 0; background: var(--qk-surface); border-radius: var(--qk-radius-md); padding: 14px 16px; font-family: var(--qk-font); }
.qk-session:first-child { margin-top: 0; }
.qk-session-top { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.qk-check { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid var(--qk-border); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.qk-check[aria-pressed="true"] { border-color: var(--qk-accent); background: var(--qk-accent); }
.qk-check svg { opacity: 0; stroke: var(--qk-bg); }
.qk-check[aria-pressed="true"] svg { opacity: 1; }
.qk-tag { font-family: var(--qk-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 20px; border: 1px solid currentColor; white-space: nowrap; }
.qk-tag.easy { color: var(--qk-easy); }
.qk-tag.tempo { color: var(--qk-tempo); }
.qk-tag.speed { color: var(--qk-speed); }
.qk-tag.long { color: var(--qk-long); }
.qk-tag.recovery { color: var(--qk-recovery); }
.qk-tag.strength { color: var(--qk-strength); }
.qk-tag.rest { color: var(--qk-rest); }
.qk-session-name { font-size: 15px; font-weight: 700; color: var(--qk-text); margin-left: 2px; }
.qk-session-name small { color: var(--qk-muted); font-weight: 600; font-size: 12px; }
.qk-session-desc { font-size: 13px; line-height: 1.6; color: var(--qk-text-soft); margin: 10px 0 0 36px; }
.qk-session.done .qk-session-name { opacity: .6; text-decoration: line-through; text-decoration-color: var(--qk-muted); }
.qk-session.done .qk-session-desc { opacity: .5; }

/* ejercicios de fuerza dentro de la tarjeta de hoy */
.qk-ex-list { margin: 10px 0 0 36px; }
.qk-ex-row { padding: 10px 0; border-top: 1px solid var(--qk-border); cursor: pointer; }
.qk-ex-row-main { display: flex; align-items: center; gap: 10px; }
.qk-ex-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; background: var(--qk-surface-alt); }
.qk-ex-name { font-size: 14px; font-weight: 700; color: var(--qk-text); }
.qk-ex-sets { font-family: var(--qk-font-mono); font-size: 11px; color: var(--qk-muted); }
.qk-ex-toggle { margin-left: auto; font-size: 11px; color: var(--qk-accent); font-family: var(--qk-font-mono); }
.qk-ex-detail { display: none; margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--qk-text-soft); }
.qk-ex-row.expanded .qk-ex-detail { display: block; }
.qk-ex-detail img { width: 100%; border-radius: 12px; margin-bottom: 8px; display: block; }
.qk-ex-detail ol { margin: 0; padding-left: 18px; }
.qk-hint { margin: 8px var(--qk-gap-page) 0; font-size: 12px; color: var(--qk-muted); }

/* the qk-* component margins above assume a plain block-flow page (the mockup's own
   <main>); our .view.active is a flex column with its own 16px gap and .dashboard
   already pads the view 24px on each side, so strip the components' own margins
   when they sit directly inside a view to avoid doubling both. */
.view.active > .qk-header,
.view.active > .qk-week-strip,
.view.active > .qk-today,
.view.active > .qk-row,
.view.active > .qk-chart,
.view.active > .qk-acc,
.view.active > .qk-section-h,
.view.active > .qk-hint {
  margin: 0;
}
.qk-section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 20px var(--qk-gap-page) 8px; }
.qk-section-h h2 { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--qk-text); font-family: var(--qk-font); }

.qk-acc { margin: var(--qk-gap-card) 0 0; background: var(--qk-surface); border-radius: var(--qk-radius-md); overflow: hidden; font-family: var(--qk-font); }
.qk-acc:first-child { margin-top: 0; }
.qk-acc-head { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: transparent; border: none; color: inherit; cursor: pointer; text-align: left; }
.qk-acc-num { font-family: var(--qk-font-mono); font-size: 12px; color: var(--qk-muted); width: 26px; flex: none; }
.qk-acc-main { flex: 1; min-width: 0; }
.qk-acc-title { font-size: 15px; font-weight: 700; color: var(--qk-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qk-acc-sub { font-size: 12px; color: var(--qk-muted); margin-top: 2px; }
.qk-chip { font-family: var(--qk-font-mono); font-size: 9px; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 20px; border: 1px solid currentColor; flex: none; }
.qk-chip.foundation { color: var(--qk-recovery); }
.qk-chip.build { color: var(--qk-accent); }
.qk-chip.peak { color: var(--qk-long); }
.qk-chip.taper { color: var(--qk-accent-alt); }
.qk-acc-progress { margin-left: auto; font-family: var(--qk-font-mono); font-size: 11px; color: var(--qk-muted); display: flex; align-items: center; gap: 8px; flex: none; }
.qk-acc-km { font-size: 10px; color: var(--qk-text-soft); background: var(--qk-border); padding: 2px 8px; border-radius: 999px; }
.qk-acc-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.qk-acc-body { padding: 0 16px 16px; display: none; }
.qk-acc.open .qk-acc-body { display: block; }
.qk-acc-caret { transition: transform 0.18s ease; color: var(--qk-muted); flex: none; }
.qk-acc.open .qk-acc-caret { transform: rotate(90deg); }
.qk-acc-note { font-size: 12px; color: var(--qk-text-soft); margin: 10px 0 12px; line-height: 1.5; }
.qk-acc-note b { color: var(--qk-long); }
.qk-sync-garmin {
  display: block; width: 100%; margin: 0 0 16px; padding: 10px 12px;
  font-family: var(--qk-font); font-size: 12.5px; font-weight: 700; text-align: center;
  border-radius: 12px; border: 1px solid var(--qk-accent); background: rgba(255,90,31,0.06);
  color: var(--qk-accent); cursor: pointer; transition: all .15s;
}
.qk-sync-garmin:hover { background: rgba(255,90,31,0.12); }
.qk-sync-garmin:disabled { opacity: .6; cursor: default; }

/* resumen compacto de una semana colapsada — visible en vez de qk-acc-body hasta que se abre */
.qk-acc-compact { padding: 0 16px 14px; cursor: pointer; }
.qk-acc.open .qk-acc-compact { display: none; }
.qk-week-progress { display: flex; gap: 4px; margin: 2px 0 12px; }
.qk-week-progress i { flex: 1; height: 4px; border-radius: 2px; background: var(--qk-border); display: block; }
.qk-week-progress i.done { background: var(--qk-accent); }
.qk-compact-day { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.qk-compact-day-label { font-family: var(--qk-font-mono); font-size: 10.5px; color: var(--qk-muted); letter-spacing: .05em; width: 26px; flex: none; padding-top: 3px; }
.qk-compact-sessions { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qk-compact-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--qk-text-soft); }
.qk-day-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; background: currentColor; }
.qk-day-dot.easy { color: var(--qk-easy); }
.qk-day-dot.tempo { color: var(--qk-tempo); }
.qk-day-dot.speed { color: var(--qk-speed); }
.qk-day-dot.long { color: var(--qk-long); }
.qk-day-dot.recovery { color: var(--qk-recovery); }
.qk-day-dot.strength { color: var(--qk-strength); }
.qk-day-dot.rest { color: var(--qk-rest); }

/* días arrastrables */
.qk-day { padding: 12px 0; border-top: 1px solid var(--qk-border); }
.qk-day:first-child { border-top: none; }
/* the whole head row is the drag handle now (not just the ⠿⠿ glyph) — that glyph is a ~12px
   target, too small to reliably catch a thumb; missing it landed the touch on the plain date
   text next to it, which iOS Safari treats as "press and hold to select text" instead of our
   drag. touch-action/user-select/-webkit-touch-callout: none across the whole row stops that. */
.qk-day-head { display: flex; align-items: center; gap: 10px; padding: 4px 0; touch-action: none; user-select: none; -webkit-touch-callout: none; cursor: grab; }
.qk-day-head:active { cursor: grabbing; }
.qk-day.day-off { opacity: .55; }
.qk-day-label { font-family: var(--qk-font-mono); font-size: 10.5px; color: var(--qk-muted); letter-spacing: .05em; }
.qk-day-off-label { font-size: 12.5px; color: var(--qk-muted); font-style: italic; padding: 8px 0 0 30px; }
.qk-grip { color: var(--qk-muted); font-size: 12px; letter-spacing: -1px; }
.qk-day-head:active .qk-grip { color: var(--qk-accent); }
.qk-grip:active { cursor: grabbing; color: var(--qk-accent); }
.qk-day.drag-source { opacity: .35; }
.qk-day.drag-over { background: rgba(255,148,109,0.08); box-shadow: inset 0 0 0 1px var(--qk-accent); border-radius: 10px; }
.qk-day.day-off.drag-over { opacity: 1; }
.qk-day-body { padding-top: 10px; }

/* registro de lo real, dentro de una tarjeta de sesión */
.qk-log { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 0 36px; }
.qk-field { background: var(--qk-surface-alt); border-radius: 12px; padding: 8px 12px; }
.qk-field label { display: block; font-family: var(--qk-font-mono); font-size: 8px; letter-spacing: 0.14em; color: var(--qk-muted); }
.qk-field input, .qk-field select, .qk-field textarea { width: 100%; border: none; background: transparent; color: var(--qk-text); font-family: var(--qk-font); font-size: 14px; font-weight: 700; padding: 2px 0 0; outline: none; resize: vertical; }
.qk-field input::placeholder, .qk-field textarea::placeholder { color: var(--qk-muted); font-weight: 500; }
.qk-field-wide { grid-column: 1 / -1; }
.qk-card { background: var(--qk-surface); border-radius: var(--qk-radius-md); padding: 16px; }
.qk-card-title { font-size: 15px; font-weight: 700; color: var(--qk-text); margin-bottom: 10px; }

/* the shared .adaptive-note component (also used, unmigrated, on Stats/Train) gets a
   qk-flavored look scoped to Plan only, so it doesn't clash with the new surroundings
   without forcing a redesign of the other views before their turn comes. */
#view-plan.view.active { gap: 8px; }
#view-plan .adaptive-note {
  font-family: var(--qk-font); font-size: 12px; color: var(--qk-text-soft);
  background: var(--qk-surface-alt); border: 1px solid var(--qk-border); border-radius: var(--qk-radius-md);
  padding: 12px 16px; margin: 0;
}
#view-plan .adaptive-note-toggle { font-family: var(--qk-font-mono); color: var(--qk-accent); }
#view-plan .adaptive-note-detail { border-top-color: var(--qk-border); color: var(--qk-muted); }

/* Stats never got its own override either — same "unmigrated" gap as Plan had, just for a
   different view. The base .adaptive-note's margin (-4px 0 14px) was tuned for a different
   context (snug under a paragraph in Plan's old layout): a negative top margin crowds it
   against the legend/value line above, while 14px below reads as an oversized, unbalanced gap
   before the card's own padding even starts. Symmetric spacing here, matching the 10px rhythm
   already used between this card's other internal rows. */
#view-stats .adaptive-note { margin: 10px 0 0; }