/* ---- Toast ---- */
.toast-stack {
  position: fixed; top: var(--space-5); right: var(--space-5); z-index: 1000;
  display: flex; flex-direction: column; gap: var(--space-2); max-width: 340px;
}
.toast {
  /* Snackbar: always dark, independent of the page's light/dark mode. */
  background: #14171A; color: #EEEFEA;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-size: 13.5px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--danger { background: var(--color-danger); color: #fff; }
.toast--success { background: var(--color-success); color: #fff; }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 17, 19, .5);
  display: flex; align-items: center; justify-content: center; padding: var(--space-5);
  opacity: 0; transition: opacity .15s; z-index: 1100;
}
.modal-overlay.is-visible { opacity: 1; }
.modal {
  background: var(--color-surface); border-radius: var(--radius-lg);
  width: 100%; max-width: 440px; box-shadow: var(--shadow-lg);
  max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border);
}
.modal-header h3 { font-size: 16px; }
.modal-close {
  background: none; border: none;
  width: 44px; height: 44px; margin: -10px -8px -10px 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-ink-muted); flex: none;
}
.modal-close:hover { color: var(--color-ink); }
.modal-body { padding: var(--space-5); overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

/* ---- Empty / error state ---- */
.empty-state {
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
  padding: var(--space-7); text-align: center; color: var(--color-ink-muted);
  background: var(--color-surface);
}
.empty-state p { margin: 0; }
.empty-state-icon { display: inline-flex; margin-bottom: var(--space-3); color: var(--color-ink-faint); }
.empty-state .btn { margin-top: var(--space-4); }
.empty-state--error { border-style: solid; border-color: var(--color-danger-soft); }
.empty-state--error p { color: var(--color-danger); }
.empty-state--error .empty-state-icon { color: var(--color-danger); }

/* ---- Auth screen ---- */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.auth-brand {
  display: none;
  /* Panel de marca: siempre oscuro a propósito, independiente del modo claro/oscuro del sistema. */
  background: #14171A; color: #EEEFEA;
  padding: var(--space-8) var(--space-7); flex-direction: column; justify-content: space-between;
}
.auth-brand-mark {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: var(--space-3); font-size: 14px;
}
.auth-brand-mark .mark-badge {
  background: var(--color-primary); color: var(--color-primary-ink);
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.auth-brand-copy h1 { font-size: 34px; max-width: 12ch; margin-top: var(--space-7); }
.auth-brand-copy p { color: rgba(238, 239, 234, .7); max-width: 34ch; margin-top: var(--space-3); }
.auth-brand-features { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); padding: 0; }
.auth-brand-feature {
  display: flex; align-items: center; gap: var(--space-3); font-size: 13.5px;
  color: rgba(238, 239, 234, .85);
}
.auth-brand-feature svg { color: var(--color-primary); flex: none; }
.auth-brand-foot { font-size: 12px; color: rgba(238, 239, 234, .5); }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.auth-card { width: 100%; max-width: 380px; }
.auth-tabs {
  display: flex; gap: var(--space-1); margin-bottom: var(--space-6);
  background: var(--color-surface-alt); padding: 4px; border-radius: var(--radius-md);
}
.auth-tab {
  flex: 1; height: 38px; border: none; background: transparent; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--color-ink-muted);
}
.auth-tab.is-active { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-sm); }
.auth-form h2 { margin-bottom: var(--space-1); }
.auth-subtitle { color: var(--color-ink-muted); font-size: 13.5px; margin-bottom: var(--space-5); }
.auth-forgot-link {
  display: block; width: 100%; text-align: center; margin-top: var(--space-3);
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-ink-muted); font-size: 13px; text-decoration: underline;
}
.auth-forgot-link:hover { color: var(--color-ink); }

@media (min-width: 900px) {
  .auth-shell { grid-template-columns: 1fr 1fr; }
  .auth-brand { display: flex; }
}

/* ---- App shell: trainer ---- */
.app-shell--trainer { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width); flex: none; background: var(--color-surface);
  border-right: 1px solid var(--color-border); padding: var(--space-5) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.sidebar-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  color: var(--color-ink-muted); font-size: 14px; font-weight: 500;
}
.sidebar-link:hover { background: var(--color-surface-alt); text-decoration: none; color: var(--color-ink); }
.sidebar-link.is-active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.sidebar-icon { display: inline-flex; flex: none; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--header-height); flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6); border-bottom: 1px solid var(--color-border); background: var(--color-surface);
  gap: var(--space-3); overflow: hidden;
}
.topbar-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.topbar-mark {
  /* Logo chip: always dark, independent of the page's light/dark mode. */
  background: #14171A; color: #EEEFEA; width: 30px; height: 30px; flex: none;
  border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
.topbar-business {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-user { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.topbar-username { font-size: 13.5px; color: var(--color-ink-muted); }

.app-content { flex: 1; padding: var(--space-6); min-width: 0; }
.page-head { margin-bottom: var(--space-6); }
.page-head h1 { font-size: 26px; }

@media (max-width: 900px) {
  .app-shell--trainer { flex-direction: column; }
  .sidebar {
    width: 100%; flex-direction: row; overflow-x: auto; border-right: none;
    border-bottom: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); gap: var(--space-2);
  }
  .sidebar-link { flex-direction: column; gap: var(--space-1); font-size: 11px; white-space: nowrap; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 var(--space-4); }
  .topbar-username { display: none; }
  .app-content { padding: var(--space-4); }
}

/* ---- App shell: client ---- */
.app-shell--client { min-height: 100vh; display: flex; justify-content: center; background: var(--color-surface-alt); }
.client-frame {
  width: 100%; max-width: 480px; min-height: 100vh; background: var(--color-bg);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.client-topbar {
  height: 56px; flex: none; display: flex; align-items: center; padding: 0 var(--space-5);
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
}
.app-content--client { padding: 0 var(--space-5) var(--space-6); flex: 1; }
.bottom-nav {
  height: var(--bottom-nav-height); flex: none; display: flex;
  border-top: 1px solid var(--color-border); background: var(--color-surface);
  position: sticky; bottom: 0;
}
.bottom-nav-link {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--color-ink-faint); font-size: 11px; font-weight: 600;
}
.bottom-nav-link:hover { text-decoration: none; }
.bottom-nav-link.is-active { color: var(--color-primary); }

/* ---- Cards & page headers ---- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.page-head-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6); flex-wrap: wrap;
}
.page-head-row h1 { font-size: 24px; margin-top: 2px; }
.page-head-row .eyebrow a { color: inherit; }
.page-head-row .eyebrow a:hover { color: var(--color-primary); }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); color: var(--color-ink-muted); white-space: nowrap;
}
.badge--muted { background: var(--color-surface-alt); color: var(--color-ink-muted); }
.badge--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--info { background: var(--color-info-soft); color: var(--color-info); }

/* ---- Exercise library ---- */
.exercise-library-controls { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.exercise-search {
  flex: 1; height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: 13.5px;
}
.exercise-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.exercise-filter {
  height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: 13px;
}
.exercise-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 420px; overflow-y: auto; }
.exercise-empty { color: var(--color-ink-muted); font-size: 13.5px; padding: var(--space-4) 0; }

.exercise-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.exercise-card-name { font-weight: 600; font-size: 13.5px; margin: 0; }
.exercise-card-meta { display: flex; align-items: center; gap: var(--space-2); margin: 4px 0 0; font-size: 12px; color: var(--color-ink-muted); }

/* ---- Routine exercise row ---- */
.rx-row {
  display: flex; align-items: flex-end; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); margin-bottom: var(--space-2); cursor: grab;
}
.rx-row.is-dragging { opacity: .4; }
.rx-row.is-removing { opacity: .4; pointer-events: none; }
.rx-drag { color: var(--color-ink-faint); flex: none; padding-bottom: 10px; }
.rx-name { flex: 1 1 120px; font-size: 13.5px; font-weight: 600; padding-bottom: 10px; min-width: 100px; }
.rx-field { display: flex; flex-direction: column; gap: 3px; width: 72px; }
.rx-field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-ink-muted); }
.rx-field input {
  height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong); background: var(--color-bg); font-size: 13px; width: 100%;
}
.rx-field input:focus { outline: none; border-color: var(--color-primary); }
.rx-delete { background: none; border: none; color: var(--color-ink-faint); padding: var(--space-2); flex: none; }
.rx-delete:hover { color: var(--color-danger); }

/* ---- Days ---- */
.days-row { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-4); }
.day-column {
  flex: none; width: 320px; background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);
}
.day-column.is-dragging { opacity: .4; }
.day-header { display: flex; align-items: center; gap: var(--space-2); }
.day-drag { color: var(--color-ink-faint); cursor: grab; flex: none; }
.day-title-input {
  flex: 1; border: none; background: transparent; font-family: var(--font-display);
  font-weight: 700; font-size: 15px; color: var(--color-ink); padding: var(--space-1); border-radius: var(--radius-sm);
}
.day-title-input:focus { outline: none; background: var(--color-surface); box-shadow: 0 0 0 2px var(--color-primary-soft); }
.day-delete { background: none; border: none; color: var(--color-ink-faint); flex: none; padding: var(--space-1); }
.day-delete:hover { color: var(--color-danger); }
.day-body { display: flex; flex-direction: column; min-height: 12px; }
.day-add-exercise { align-self: flex-start; }

/* ---- Routine meta & grid ---- */
.routine-meta { margin-bottom: var(--space-6); }
.routine-actions { display: flex; gap: var(--space-2); flex: none; }
.routine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.routine-card {
  display: block; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-ink);
}
.routine-card:hover { border-color: var(--color-border-strong); text-decoration: none; box-shadow: var(--shadow-sm); }
.routine-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.routine-card-head h3 { font-size: 15px; }
.routine-card-goal { color: var(--color-ink-muted); font-size: 12.5px; margin: 0; }

/* ---- Clients ---- */
.client-search {
  width: 100%; max-width: 360px; height: 40px; padding: 0 var(--space-4); margin-bottom: var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: 13.5px;
}
.client-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.client-list { display: flex; flex-direction: column; gap: var(--space-2); }
.client-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); font: inherit; color: inherit;
}
.client-row:hover { border-color: var(--color-border-strong); background: var(--color-surface-alt); }
.client-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none;
}
.client-avatar--lg { width: 48px; height: 48px; font-size: 17px; }
.client-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.client-row-name { font-weight: 600; font-size: 13.5px; }
.client-row-email { font-size: 12.5px; color: var(--color-ink-muted); }

.client-detail-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.client-detail-meta { color: var(--color-ink-muted); font-size: 13px; margin: 2px 0 0; }
.client-detail-section { margin-bottom: var(--space-5); }
.client-detail-section:last-child { margin-bottom: 0; }
.client-detail-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.client-routines { display: flex; flex-direction: column; gap: var(--space-2); }
.client-routine-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: 13px; color: var(--color-ink);
}
.client-routine-link:hover { background: var(--color-surface-alt); text-decoration: none; }

@media (max-width: 720px) {
  .day-column { width: 88vw; }
}

/* ---- Workout session (client, mobile-first) ---- */
.workout-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.workout-header .eyebrow { margin: 0; }
.workout-timer { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--color-primary); }

.day-picker-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.day-picker-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%;
  padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); text-align: left; color: var(--color-primary); min-height: 44px;
}
.day-picker-routine { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-ink-muted); margin: 0; }
.day-picker-day { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--color-ink); margin: 2px 0; }
.day-picker-count { font-size: 12.5px; color: var(--color-ink-muted); margin: 0; }

.exercise-stack { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: 8px; }
.exercise-block {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.exercise-block-head h3 { font-size: 16px; }
.exercise-block-target { font-size: 12px; color: var(--color-ink-muted); margin: 3px 0 0; }
.exercise-block-last { font-size: 12px; color: var(--color-primary); margin: 2px 0 0; font-weight: 600; }

.set-rows { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.set-row {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.set-row-primary { display: flex; align-items: flex-end; gap: var(--space-2); }
.set-row-secondary { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.set-index {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--color-surface);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  color: var(--color-ink-muted); margin-bottom: 10px;
}
.set-field { display: flex; flex-direction: column; gap: 4px; }
.set-field label { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-ink-muted); }
.set-field--stepper { flex: 1; min-width: 0; }
.stepper {
  display: flex; align-items: stretch; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); overflow: hidden; height: 44px;
}
.stepper-btn {
  width: 44px; flex: none; border: none; background: var(--color-surface-alt); color: var(--color-ink);
  font-size: 18px; font-weight: 600; line-height: 1;
}
.stepper-value {
  flex: 1; min-width: 0; border: none; background: var(--color-surface); text-align: center;
  font-size: 15px; font-weight: 700; -moz-appearance: textfield;
}
.stepper-value::-webkit-outer-spin-button, .stepper-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.set-extra-input {
  width: 52px; height: 44px; text-align: center; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: 14px; font-weight: 600;
}
.set-check {
  width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-ink-faint); display: inline-flex; align-items: center; justify-content: center;
}
.set-row.is-completed .set-check { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.set-row.is-completed .stepper, .set-row.is-completed .set-extra-input { border-color: var(--color-success); }
.add-set { margin-top: var(--space-3); }

.rest-timer-slot { position: sticky; bottom: 78px; z-index: 20; }
.rest-timer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  /* Overlay bar: always dark, independent of the page's light/dark mode. */
  background: #14171A; color: #EEEFEA; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin-top: var(--space-3);
}
.rest-timer-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.rest-timer-value { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.rest-timer-skip {
  background: rgba(255, 255, 255, .14); border: none; color: inherit; border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-size: 12.5px; font-weight: 600; height: 32px;
}

.finish-workout { margin-top: var(--space-5); }

/* ---- Progress page ---- */
.progress-section { margin-bottom: var(--space-7); }
.progress-section:last-child { margin-bottom: 0; }
.pr-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.pr-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.pr-exercise { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: var(--space-2); }
.pr-value { font-family: var(--font-mono); font-weight: 700; color: var(--color-primary); font-size: 13.5px; }
.pr-date { font-size: 11.5px; color: var(--color-ink-muted); }
.progress-chart { width: 100%; height: 180px; margin-top: var(--space-3); display: block; }
.measurement-form { margin-top: var(--space-2); }

/* ---- Client home teaser ---- */
.routine-teaser {
  background: var(--color-primary); color: var(--color-primary-ink); border-radius: var(--radius-lg);
  padding: var(--space-5); margin-bottom: var(--space-6);
}
.routine-teaser .eyebrow { color: var(--color-primary-ink); opacity: .75; margin-bottom: 4px; }
.routine-teaser h2 { font-size: 19px; margin: 0 0 var(--space-4); color: var(--color-primary-ink); }
.routine-teaser .btn { background: var(--color-surface); color: var(--color-ink); }
.routine-teaser .exercise-empty { color: var(--color-primary-ink); opacity: .8; padding: 0; }

/* ---- CRM Kanban ---- */
.kanban-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.kanban-toolbar .exercise-filter { width: auto; min-width: 190px; }
.kanban-board { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-3); align-items: flex-start; }
.kanban-column {
  flex: none; width: 280px; background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3);
}
.kanban-column-head { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1); }
.kanban-column-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stage-color, var(--color-border-strong)); flex: none; }
.kanban-column-head h3 { font-size: 13.5px; flex: 1; }
.kanban-column-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-muted);
  background: var(--color-surface); border-radius: var(--radius-pill); padding: 1px 7px;
}
.kanban-column-body { display: flex; flex-direction: column; gap: var(--space-2); min-height: 40px; }

.lead-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3); cursor: grab; display: flex; flex-direction: column; gap: var(--space-2);
}
.lead-card.is-dragging { opacity: .4; }
.lead-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.lead-card-name { font-weight: 600; font-size: 13px; }
.lead-card-bottom { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--color-ink-muted); }
.lead-card-value { font-family: var(--font-mono); font-weight: 600; color: var(--color-ink); }

/* ---- Lead detail ---- */
.lead-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.lead-detail-meta { color: var(--color-ink-muted); font-size: 13px; margin: 2px 0 0; }
.lead-detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0 0 var(--space-4); }
.lead-detail-facts dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-ink-muted); margin-bottom: 2px; }
.lead-detail-facts dd { margin: 0; font-size: 13.5px; font-weight: 600; }
.lead-detail-notes {
  font-size: 13px; color: var(--color-ink-muted); background: var(--color-surface-alt);
  padding: var(--space-3); border-radius: var(--radius-md); margin: 0 0 var(--space-4);
}
.lead-detail-section-head { margin-bottom: var(--space-2); }
.lead-activity-form { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.lead-activity-form select {
  height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: 13.5px;
}
.lead-activity-form textarea {
  padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border-strong);
  background: var(--color-surface); font-size: 13.5px; resize: vertical; font-family: inherit;
}
.lead-activity-form .btn { align-self: flex-end; }
.lead-activity-timeline { display: flex; flex-direction: column; gap: var(--space-3); max-height: 240px; overflow-y: auto; }
.activity-item { border-left: 2px solid var(--color-border-strong); padding-left: var(--space-3); }
.activity-desc { font-size: 13px; margin: 4px 0 2px; }
.activity-date { font-size: 11px; color: var(--color-ink-muted); margin: 0; }
.lead-detail-actions { justify-content: flex-start; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

/* ---- Anamnesis (read-only, ficha de cliente) ---- */
.anamnesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); margin: 0; }
.anamnesis-grid .span-2 { grid-column: 1 / -1; }
.anamnesis-grid dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-ink-muted); margin-bottom: 2px; }
.anamnesis-grid dd { margin: 0 0 var(--space-3); font-size: 13px; }

/* ---- Onboarding checklist ---- */
.onboarding-row {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-2); cursor: pointer;
}
.onboarding-row input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.onboarding-title { font-size: 13.5px; font-weight: 600; margin: 0; }
.onboarding-desc { font-size: 12.5px; color: var(--color-ink-muted); margin: 2px 0 0; }
.onboarding-row.is-done { opacity: .6; cursor: default; }
.onboarding-row.is-done .onboarding-title { text-decoration: line-through; }

/* ---- Section tabs (billing) ---- */
.section-tabs {
  display: flex; gap: var(--space-1); margin-bottom: var(--space-6);
  background: var(--color-surface-alt); padding: 4px; border-radius: var(--radius-md); width: fit-content;
}
.section-tab {
  height: 38px; padding: 0 var(--space-5); border: none; background: transparent; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--color-ink-muted);
}
.section-tab.is-active { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-sm); }

/* ---- Billing toolbar ---- */
.billing-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.billing-toolbar .exercise-filter { width: auto; min-width: 160px; }

/* ---- Finance KPIs ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.kpi-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-ink-muted); margin: 0 0 6px; }
.kpi-value { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.kpi-delta { font-size: 12px; margin: 4px 0 0; font-weight: 600; }
.kpi-delta.is-up { color: var(--color-success); }
.kpi-delta.is-down { color: var(--color-danger); }
.finance-chart-card { padding: var(--space-5); }
.finance-chart { width: 100%; height: 220px; display: block; margin-top: var(--space-3); }

/* ---- Subscriptions ---- */
.subscription-list { display: flex; flex-direction: column; gap: var(--space-2); }
.subscription-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.subscription-client { font-weight: 600; font-size: 13.5px; margin: 0; }
.subscription-plan { font-size: 12.5px; color: var(--color-ink-muted); margin: 2px 0 0; }
.subscription-meta { display: flex; align-items: center; gap: var(--space-4); font-size: 12.5px; color: var(--color-ink-muted); }
.subscription-price { font-family: var(--font-mono); font-weight: 600; color: var(--color-ink); }

/* ---- Invoices ---- */
.invoice-list { display: flex; flex-direction: column; gap: var(--space-2); }
.invoice-row {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.invoice-main { flex: 1; min-width: 140px; }
.invoice-number { font-family: var(--font-mono); font-weight: 600; font-size: 13px; margin: 0; }
.invoice-client { font-size: 12.5px; color: var(--color-ink-muted); margin: 2px 0 0; }
.invoice-date { font-size: 12.5px; color: var(--color-ink-muted); width: 90px; font-variant-numeric: tabular-nums; }
.invoice-total { font-family: var(--font-mono); font-weight: 700; width: 90px; font-variant-numeric: tabular-nums; }
.invoice-actions { display: flex; gap: var(--space-2); }

.invoice-items { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.invoice-item-row { display: grid; grid-template-columns: 1fr 64px 90px 32px; gap: var(--space-2); align-items: center; }
.invoice-item-row input {
  height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong);
  background: var(--color-surface); font-size: 13px; width: 100%;
}
.invoice-item-remove { background: none; border: none; color: var(--color-ink-faint); height: 40px; }
.invoice-item-remove:hover { color: var(--color-danger); }
.invoice-tax-note { font-size: 11.5px; color: var(--color-ink-muted); margin: 4px 0 0; }
.invoice-totals {
  border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-3);
  display: flex; flex-direction: column; gap: 4px;
}
.invoice-totals > div { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-ink-muted); }
.invoice-total-row { font-weight: 700; color: var(--color-ink); font-size: 15px; }

/* ---- Trainer dashboard ---- */
.kpi-card--link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.kpi-card--link:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); text-decoration: none; }

.dashboard-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.dashboard-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); gap: var(--space-2); }
.dashboard-panel-head .eyebrow { margin: 0; }
.dashboard-panel-head a { font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.funnel-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.funnel-row:last-child { border-bottom: none; }
.funnel-stage { flex: 1; font-size: 13px; }
.funnel-count { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--color-ink-muted); }

.activity-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.activity-row:last-child { border-bottom: none; }
.activity-row-main { display: flex; flex-direction: column; gap: 2px; }
.activity-row-name { font-weight: 600; font-size: 13px; }
.activity-row-detail { font-size: 12px; color: var(--color-ink-muted); }

@media (max-width: 900px) {
  .dashboard-columns { grid-template-columns: 1fr; }
}

/* ---- Client profile ---- */
.profile-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.profile-head h2 { font-size: 18px; }

/* ---- SaaS plan (Mi plan) ---- */
.plan-card { padding: var(--space-5); max-width: 520px; }
.plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.plan-card-head h2 { margin: 4px 0 0; font-size: 22px; }
.plan-trial-note { font-size: 13px; color: var(--color-ink-muted); margin: var(--space-3) 0 0; }
.plan-card-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

/* ---- Connect payments (Cobros) ---- */
.connect-card { padding: var(--space-5); max-width: 620px; margin-bottom: var(--space-5); }
.connect-card h2 { font-size: 20px; margin: 4px 0 var(--space-3); }
.connect-intro { color: var(--color-ink-muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 var(--space-5); }
.connect-charge-form { display: flex; flex-direction: column; gap: var(--space-4); }
.connect-link-result { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: 13.5px; }
.connect-link-row { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.connect-link-row input {
  flex: 1; height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong); background: var(--color-surface-alt); font-size: 12.5px; font-family: var(--font-mono);
}
.connect-history { padding: var(--space-5); }
.payment-row {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: 13px;
}
.payment-row:last-child { border-bottom: none; }
.payment-client { font-weight: 600; min-width: 140px; }
.payment-desc { color: var(--color-ink-muted); flex: 1; min-width: 120px; }
.payment-amount { font-family: var(--font-mono); font-weight: 700; width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.payment-date { color: var(--color-ink-muted); width: 90px; font-variant-numeric: tabular-nums; }
.payment-receipt {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-primary); text-decoration: none; font-weight: 600;
}
.payment-receipt:hover { text-decoration: underline; }
.payment-receipt:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Onboarding tour ---- */
.tour-overlay {
  position: fixed; inset: 0; z-index: 1200; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.tour-overlay.is-visible { opacity: 1; }
.tour-spotlight {
  position: fixed; border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(15, 17, 19, .68);
  transition: top .25s, left .25s, width .25s, height .25s;
  animation: tour-pulse 1.8s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%, 100% { outline: 3px solid rgba(255, 90, 54, .55); outline-offset: 2px; }
  50% { outline: 3px solid rgba(255, 90, 54, .95); outline-offset: 4px; }
}
.tour-bubble {
  position: fixed; max-width: 280px; background: var(--color-surface);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-4); pointer-events: auto;
  transition: top .25s, left .25s;
}
.tour-bubble-step {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-primary); font-weight: 600; margin: 0 0 var(--space-1);
}
.tour-bubble-text { font-size: 14px; color: var(--color-ink); margin: 0 0 var(--space-3); }
.tour-bubble-skip {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-ink-muted); font-size: 12.5px; text-decoration: underline;
}
.tour-bubble-skip:hover { color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) {
  .tour-spotlight { animation: none; }
}
.profile-since { font-size: 12.5px; color: var(--color-ink-muted); margin: 2px 0 0; }