/* KairSun Web — pantalla Límites / Detox (mock 1:1, sin JS).
 *
 * Contrato: preview/limites/index.html + este archivo + ks-screens-base.css.
 * Tokens y medidas salen del repo de la app (READ-ONLY):
 *   - Límites v2 (dos caminos, contador, disparadores, patrón): docs/features/routine.md 740-766
 *   - Aura del Detox (el borde es la barra): lib/features/routine/presentation/widgets/aura_de_detox.dart
 *   - Registro fino: .../limits/limit_log_panel.dart
 *   - Tu patrón: .../limits/limit_pattern_card.dart + domain/entities/limit_pattern.dart
 *   - Tracking: .../limits/tracking/limits_tracking_screen.dart + limits_tracking_style.dart
 *   - Unidades/disparadores: .../domain/entities/limit_vocabulary.dart
 *   - Fullscreen: .../presentation/routine_detail.dart (_DetoxChallengeCard, _LimitTodayBody, dock)
 *   - Paleta: .../presentation/theme/routine_palette.dart + tracking/limits_tracking_style.dart
 *
 * Todo el interior usa calc(N * var(--u)) (1u = 1dp de la app, 393dp de ancho).
 * Sin JS, sin estilos inline y sin declaraciones de máxima prioridad.
 * Reduce Motion lo resuelve el base.
 */

/* ── Tokens de la pantalla (LimitsInk / RoutinePalette) ─────────────────── */
.ls-phone {
  --ls-bg: #07040F;
  --ls-surface: #130E20;
  --ls-surface-hi: #1B1430;
  --ls-violet: #8B5CF6;
  --ls-violet-bright: #A855F7;
  --ls-lilac: #D8B4FE;
  --ls-indigo: #6366F1;
  --ls-slip: #FB7185;
  --ls-urge: #38BDF8;
  --ls-gold: #FFD166;
  --ls-amber: #FFB020;
  --ls-green: #10B981;
  --ls-green-soft: #6EE7B7;
  --ls-red: #EF4444;
  --ls-red-soft: #FCA5A5;
  --ls-ink: #F8FAFC;
  --ls-ink-2: #CBD5E1;
  --ls-muted: #8B98B2;
}

.ls-phone .phone__screen {
  display: flex;
  flex-direction: column;
  background: var(--ls-bg);
}

/* ── Barra de estado ────────────────────────────────────────────────────── */
.ls-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(46 * var(--u));
  padding: calc(12 * var(--u)) calc(28 * var(--u)) 0;
  color: var(--ls-ink);
  font-size: calc(13 * var(--u));
  font-weight: 700;
}
.ls-status__icons { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.ls-status__icons .ls-i { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* ── Toggle Hoy | Tracking (CSS puro del base) ──────────────────────────── */
.ls-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ls-view > .ks-view__tabs {
  flex: 0 0 auto;
  align-self: center;
  margin: calc(2 * var(--u)) auto calc(10 * var(--u));
}
.ls-view > .ks-view__panes { flex: 1 1 auto; min-height: 0; }
.ls-view .ks-pane { height: 100%; }

/* ── Marco de pantalla y scroll interno ─────────────────────────────────── */
.ls-screen { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.ls-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(2 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.ls-body::-webkit-scrollbar { width: calc(3 * var(--u)); }
.ls-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--ks-r-pill);
}

/* ── Header de pantalla ─────────────────────────────────────────────────── */
.ls-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u));
}
.ls-head__btn {
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(13 * var(--u));
  color: var(--ls-ink-2);
  background: var(--ls-surface);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.10);
}
.ls-head__btn--violet { color: var(--ls-lilac); border-color: rgba(139, 92, 246, 0.35); }
.ls-head__titles { flex: 1 1 auto; min-width: 0; }
.ls-eyebrow {
  margin: 0;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: 0.26em;
  color: var(--ls-lilac);
}
.ls-title {
  margin: calc(2 * var(--u)) 0 0;
  font-size: calc(23 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ls-ink);
}

/* ── Iconos (sprite) ────────────────────────────────────────────────────── */
.ls-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ls-i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; fill: currentColor; }
.ls-i--sm { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.ls-i--lg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.ls-num { font-variant-numeric: tabular-nums; }

/* ── Rótulo de sección (LimitsSectionLabel / _SectionLabel) ─────────────── */
.ls-sectionlabel {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin: calc(13 * var(--u)) 0 calc(8 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(248, 250, 252, 0.86);
}
.ls-sectionlabel::before {
  content: "";
  flex: none;
  width: calc(3 * var(--u));
  height: calc(14 * var(--u));
  border-radius: var(--ks-r-pill);
  background: var(--ls-violet);
}
.ls-sectionlabel--gold::before { background: var(--ls-gold); }
.ls-sectionlabel__hint {
  margin: calc(-6 * var(--u)) 0 calc(10 * var(--u));
  font-size: calc(11.5 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  color: var(--ls-muted);
}

/* ── Card de la lista (routine_card.dart) ───────────────────────────────── */
.ls-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(30 * var(--u));
  border-radius: calc(20 * var(--u));
  background: linear-gradient(150deg, var(--ls-surface-hi), var(--ls-surface));
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.35);
}
.ls-card + .ls-card { margin-top: calc(8 * var(--u)); }
.ls-card__thread {
  position: absolute;
  left: calc(13 * var(--u));
  top: calc(18 * var(--u));
  bottom: calc(18 * var(--u));
  width: calc(3 * var(--u));
  border-radius: var(--ks-r-pill);
  background: linear-gradient(180deg, var(--ls-violet), rgba(139, 92, 246, 0.55));
  box-shadow: 0 0 calc(8 * var(--u)) rgba(139, 92, 246, 0.4);
}
.ls-card__lead {
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(13 * var(--u));
  font-size: calc(18 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.10);
}
.ls-card__main { flex: 1 1 auto; min-width: 0; }
.ls-card__name {
  margin: 0;
  font-size: calc(17 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ls-ink);
}
.ls-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-top: calc(7 * var(--u));
}

/* Orbe del check (_CheckOrb) */
.ls-orb {
  flex: none;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ls-ink-2);
  border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.16);
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 62%);
}
.ls-orb--shield {
  color: var(--ls-lilac);
  border-color: rgba(139, 92, 246, 0.75);
  background: radial-gradient(circle at 50% 38%, rgba(139, 92, 246, 0.30), rgba(139, 92, 246, 0.06) 66%);
  box-shadow: 0 0 calc(12 * var(--u)) rgba(139, 92, 246, 0.35);
}
.ls-orb--open { color: var(--ls-violet); border-color: rgba(139, 92, 246, 0.45); }
.ls-orb--done {
  color: var(--ls-green-soft);
  border-color: rgba(16, 185, 129, 0.80);
  background: radial-gradient(circle at 50% 38%, rgba(16, 185, 129, 0.35), rgba(16, 185, 129, 0.08) 66%);
}
.ls-orb--fall {
  color: var(--ls-red-soft);
  border-color: rgba(239, 68, 68, 0.80);
  background: radial-gradient(circle at 50% 38%, rgba(239, 68, 68, 0.32), rgba(239, 68, 68, 0.08) 66%);
}

/* ── Chips y pills (dos voces: estado con caja, dato de apoyo sin caja) ── */
.ls-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  min-height: calc(22 * var(--u));
  padding: 0 calc(9 * var(--u));
  border-radius: var(--ks-r-pill);
  border: calc(1 * var(--u)) solid currentColor;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ls-chip--violet { color: var(--ls-lilac); }
.ls-chip--quiet {
  min-height: 0;
  padding: 0;
  border-color: transparent;
  color: var(--ls-muted);
  font-size: calc(11 * var(--u));
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
.ls-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  min-height: calc(24 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: var(--ks-r-pill);
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ls-pill--green { color: var(--ls-green-soft); background: rgba(16, 185, 129, 0.14); border: calc(1 * var(--u)) solid rgba(16, 185, 129, 0.50); }
.ls-pill--violet { color: var(--ls-lilac); background: rgba(139, 92, 246, 0.14); border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.50); }

/* Punto de categoría (color del tag real) */
.ls-dot { flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; }
.ls-dot--fumar { background: #9E9E9E; }
.ls-dot--azucar { background: #EC407A; }
.ls-dot--comida { background: #E64A19; }
.ls-dot--pantallas { background: #1565C0; }
.ls-dot--apuestas { background: #D50000; }

/* ── Panel de registro fino (LimitLogPanel) ─────────────────────────────── */
.ls-panel {
  margin-top: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--ls-surface);
  border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.18);
  box-shadow: 0 calc(10 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.30);
}
.ls-panel__head { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.ls-panel__icon {
  flex: none;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ls-lilac);
  background: rgba(139, 92, 246, 0.16);
  border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.35);
}
.ls-panel__title {
  margin: 0;
  font-size: calc(13.5 * var(--u));
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ls-ink);
}
.ls-panel__caption {
  margin: calc(2 * var(--u)) 0 0;
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  color: var(--ls-muted);
}

/* Contador con tope (_ReduceCounter + _CapTrack) */
.ls-counter {
  margin-top: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(139, 92, 246, 0.08);
  border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.22);
}
.ls-counter__row { display: flex; align-items: baseline; gap: calc(6 * var(--u)); }
.ls-counter__num {
  font-size: calc(34 * var(--u));
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ls-ink);
}
.ls-counter__num--over { color: var(--ls-amber); }
.ls-counter__unit { font-size: calc(15 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.60); }
.ls-cap { display: flex; gap: calc(4 * var(--u)); margin-top: calc(10 * var(--u)); }
.ls-cap i {
  flex: 1 1 0;
  height: calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
  background: rgba(255, 255, 255, 0.10);
}
.ls-cap i.is-on {
  background: var(--ls-violet);
  box-shadow: 0 0 calc(8 * var(--u)) rgba(139, 92, 246, 0.55);
}
.ls-cap i.is-over { background: var(--ls-amber); box-shadow: 0 0 calc(8 * var(--u)) rgba(255, 176, 32, 0.55); }
.ls-counter__status {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.ls-counter__status--over { color: var(--ls-amber); }

/* Botones del panel */
.ls-actions { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
.ls-actions--single { margin-top: calc(8 * var(--u)); }
.ls-round {
  flex: none;
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.70);
  background: rgba(255, 255, 255, 0.06);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.18);
}
.ls-btn {
  flex: 1 1 auto;
  min-height: calc(50 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(16 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 800;
  white-space: nowrap;
}
.ls-btn--fill {
  color: #fff;
  background: linear-gradient(140deg, var(--ls-violet), rgba(139, 92, 246, 0.78));
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(139, 92, 246, 0.35);
}
.ls-btn--urge {
  color: var(--ls-urge);
  background: rgba(56, 189, 248, 0.10);
  border: calc(1 * var(--u)) solid rgba(56, 189, 248, 0.40);
}
.ls-btn--green {
  color: var(--ls-green-soft);
  background: rgba(16, 185, 129, 0.12);
  border: calc(1 * var(--u)) solid rgba(16, 185, 129, 0.45);
}
.ls-btn--outline {
  color: var(--ls-lilac);
  background: rgba(139, 92, 246, 0.06);
  border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.55);
}
.ls-btn__count {
  min-width: calc(22 * var(--u));
  padding: 0 calc(8 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(56, 189, 248, 0.22);
  font-size: calc(12.5 * var(--u));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ls-zero {
  margin: calc(6 * var(--u)) 0 0;
  min-height: calc(44 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ls-green-soft);
  font-size: calc(13.5 * var(--u));
  font-weight: 700;
}

/* ¿Qué lo disparó? (8 ids reales de kUrgeTriggerIds) */
.ls-triggers { margin-top: calc(10 * var(--u)); }
.ls-triggers__head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.ls-triggers__ask { font-size: calc(13 * var(--u)); font-weight: 700; color: rgba(255, 255, 255, 0.78); }
.ls-saved { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); color: var(--ls-green-soft); font-size: calc(12 * var(--u)); font-weight: 700; }
.ls-trigger-grid { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.ls-trigger {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  min-height: calc(40 * var(--u));
  padding: 0 calc(11 * var(--u));
  border-radius: calc(20 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.80);
  background: rgba(255, 255, 255, 0.06);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.14);
}
.ls-trigger.is-on {
  color: #fff;
  font-weight: 700;
  background: rgba(139, 92, 246, 0.26);
  border-color: rgba(139, 92, 246, 0.80);
}
.ls-trigger__emoji { font-size: calc(13 * var(--u)); }

/* ── Tu patrón (LimitPatternCard) ───────────────────────────────────────── */
.ls-pattern {
  margin-top: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(18 * var(--u));
  background: rgba(255, 255, 255, 0.03);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.07);
}
.ls-pattern__head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin: 0;
  font-size: calc(13.5 * var(--u));
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
}
.ls-pattern__head--gap { margin-top: calc(10 * var(--u)); }
.ls-pattern__evidence {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(11 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.60);
}
.ls-ptiles { display: grid; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.ls-ptile {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(12 * var(--u));
}
.ls-ptile__label { flex: 1 1 auto; min-width: 0; font-size: calc(12.5 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.60); }
.ls-ptile__value { font-size: calc(14 * var(--u)); font-weight: 800; color: var(--ls-ink); text-align: right; }
.ls-ptile--violet { color: var(--ls-lilac); background: rgba(139, 92, 246, 0.08); border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.20); }
.ls-ptile--amber { color: #FCD34D; background: rgba(255, 176, 32, 0.08); border: calc(1 * var(--u)) solid rgba(255, 176, 32, 0.20); }
.ls-ptile--sky { color: #7DD3FC; background: rgba(56, 189, 248, 0.08); border: calc(1 * var(--u)) solid rgba(56, 189, 248, 0.20); }
.ls-ptile--gold { color: var(--ls-gold); background: rgba(255, 209, 102, 0.08); border: calc(1 * var(--u)) solid rgba(255, 209, 102, 0.20); }
.ls-ptile--slip { color: var(--ls-slip); background: rgba(251, 113, 133, 0.08); border: calc(1 * var(--u)) solid rgba(251, 113, 133, 0.20); }
.ls-pattern__empty { margin: calc(10 * var(--u)) 0 0; font-size: calc(12.5 * var(--u)); line-height: 1.4; color: rgba(255, 255, 255, 0.55); }

/* ── Tracking: línea de tiempo (7D … Detox) ─────────────────────────────── */
.ls-ranges {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: 0 calc(14 * var(--u)) calc(8 * var(--u));
}
.ls-range {
  flex: 1 1 auto;
  min-height: calc(34 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--u));
  border-radius: calc(13 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  border: calc(1 * var(--u)) solid transparent;
}
.ls-range.is-on {
  color: var(--ls-ink);
  font-weight: 800;
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.60);
}
.ls-range--detox { flex: 1.35 1 auto; color: var(--ls-lilac); border-color: rgba(139, 92, 246, 0.30); }
.ls-range__sep { flex: none; width: calc(1 * var(--u)); height: calc(20 * var(--u)); background: rgba(255, 255, 255, 0.12); }

/* Hero sostenido (LimitsHeroCard) */
.ls-hero {
  padding: calc(16 * var(--u));
  border-radius: calc(24 * var(--u));
  background: linear-gradient(150deg, rgba(139, 92, 246, 0.10), var(--ls-surface));
  border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.34);
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, 0.35);
}
.ls-hero__top { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.ls-ringwrap { position: relative; flex: none; width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
.ls-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--ls-indigo) 0,
    var(--ls-violet) calc(var(--ls-p) * 0.5turn),
    var(--ls-lilac) calc(var(--ls-p) * 1turn),
    rgba(255, 255, 255, 0.07) calc(var(--ls-p) * 1turn) 1turn
  );
  -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, 0) calc(100% - calc(11 * var(--u))), #000 calc(100% - calc(10 * var(--u))));
  mask: radial-gradient(closest-side, rgba(0, 0, 0, 0) calc(100% - calc(11 * var(--u))), #000 calc(100% - calc(10 * var(--u))));
}
.ls-ring__val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(26 * var(--u));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ls-ink);
}
.ls-hero__body { flex: 1 1 auto; min-width: 0; }
.ls-hero__kicker { margin: 0; font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: 0.22em; color: var(--ls-lilac); }
.ls-hero__line { margin: calc(6 * var(--u)) 0 0; font-size: calc(14 * var(--u)); font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.86); }
.ls-delta {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin-top: calc(8 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(10 * var(--u));
  color: var(--ls-lilac);
  background: rgba(216, 180, 254, 0.12);
  border: calc(1 * var(--u)) solid rgba(216, 180, 254, 0.35);
  font-size: calc(11 * var(--u));
  font-weight: 700;
}
.ls-kpis { display: flex; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.ls-kpi {
  flex: 1 1 0;
  min-width: 0;
  padding: calc(10 * var(--u));
  border-radius: calc(18 * var(--u));
}
.ls-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--u)); }
.ls-kpi__value { font-size: calc(18 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ls-ink); }
.ls-kpi__label { margin: calc(6 * var(--u)) 0 0; font-size: calc(11 * var(--u)); font-weight: 700; }
.ls-kpi--held { color: var(--ls-lilac); background: rgba(139, 92, 246, 0.08); border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.26); }
.ls-kpi--slip { color: var(--ls-slip); background: rgba(251, 113, 133, 0.08); border: calc(1 * var(--u)) solid rgba(251, 113, 133, 0.26); }
.ls-kpi--urge { color: #7DD3FC; background: rgba(56, 189, 248, 0.08); border: calc(1 * var(--u)) solid rgba(56, 189, 248, 0.26); }

/* Tarjeta por límite (LimitStatsCard) */
.ls-stat {
  padding: calc(14 * var(--u));
  border-radius: calc(24 * var(--u));
  background: linear-gradient(150deg, rgba(139, 92, 246, 0.04), var(--ls-surface));
  border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.16);
}
.ls-stat__head { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.ls-stat__emoji {
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(13 * var(--u));
  font-size: calc(18 * var(--u));
  background: linear-gradient(140deg, rgba(139, 92, 246, 0.30), rgba(99, 102, 241, 0.16));
  border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.45);
}
.ls-stat__name { margin: 0; font-size: calc(15 * var(--u)); font-weight: 700; color: var(--ls-ink); }
.ls-stat__pct { flex: none; font-size: calc(22 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ls-ink); }
.ls-ratebar { height: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); border-radius: var(--ks-r-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ls-ratebar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ls-indigo), var(--ls-lilac)); }
.ls-facts { display: flex; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
.ls-fact { flex: 1 1 0; min-width: 0; }
.ls-fact__value { margin: 0; font-size: calc(13.5 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ls-ink); }
.ls-fact__label { margin: calc(2 * var(--u)) 0 0; font-size: calc(10.5 * var(--u)); font-weight: 600; color: var(--ls-muted); }
.ls-minis { position: relative; display: flex; align-items: flex-end; gap: calc(6 * var(--u)); height: calc(56 * var(--u)); margin-top: calc(14 * var(--u)); }
.ls-mini { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.ls-mini > i {
  display: block;
  border-radius: calc(4 * var(--u));
  background: linear-gradient(180deg, var(--ls-violet-bright), var(--ls-violet));
}
.ls-mini--v0 > i { height: calc(2 * var(--u)); background: rgba(255, 255, 255, 0.10); }
.ls-mini--v1 > i { height: calc(7 * var(--u)); }
.ls-mini--v2 > i { height: calc(12 * var(--u)); }
.ls-mini--v3 > i { height: calc(17 * var(--u)); }
.ls-mini--v4 > i { height: calc(22 * var(--u)); }
.ls-mini--v5 > i { height: calc(27 * var(--u)); }
.ls-mini--v6 > i { height: calc(32 * var(--u)); background: linear-gradient(180deg, #FCD34D, var(--ls-amber)); }
.ls-minis__capline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(27 * var(--u));
  border-top: calc(1 * var(--u)) dashed rgba(255, 209, 102, 0.55);
}
.ls-minis__caplabel {
  position: absolute;
  right: 0;
  bottom: calc(30 * var(--u));
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  color: var(--ls-gold);
}
.ls-trend {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin: calc(10 * var(--u)) 0 0;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(12 * var(--u));
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  color: #FCD34D;
  background: rgba(255, 176, 32, 0.10);
}

/* Patrón con evidencia (LimitsPatternCard) */
.ls-hours {
  display: flex;
  align-items: flex-end;
  gap: calc(2 * var(--u));
  height: calc(58 * var(--u));
  margin-top: calc(10 * var(--u));
}
.ls-hour {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  gap: calc(1 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(255, 255, 255, 0.04);
}
.ls-hour--peak { background: rgba(255, 209, 102, 0.14); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 209, 102, 0.45); }
.ls-hour > i { display: block; border-radius: calc(3 * var(--u)); }
.ls-hour__slip { background: var(--ls-slip); }
.ls-hour__urge { background: var(--ls-urge); }
.ls-seg--s1 { height: calc(4 * var(--u)); }
.ls-seg--s2 { height: calc(8 * var(--u)); }
.ls-seg--s3 { height: calc(13 * var(--u)); }
.ls-seg--s4 { height: calc(18 * var(--u)); }
.ls-seg--u1 { height: calc(3 * var(--u)); }
.ls-seg--u2 { height: calc(7 * var(--u)); }
.ls-seg--u3 { height: calc(11 * var(--u)); }
.ls-hourlabels { display: flex; justify-content: space-between; margin-top: calc(5 * var(--u)); font-size: calc(9.5 * var(--u)); font-weight: 600; color: var(--ls-muted); }
.ls-legend { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(8 * var(--u)); }
.ls-legend__item { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 600; color: var(--ls-muted); }
.ls-legend__swatch { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); }
.ls-legend__swatch--slip { background: var(--ls-slip); }
.ls-legend__swatch--urge { background: var(--ls-urge); }
.ls-patternlines { display: grid; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
.ls-pline { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); }
.ls-pline__icon {
  flex: none;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(9 * var(--u));
}
.ls-pline__text { flex: 1 1 auto; margin: 0; padding-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.90); }
.ls-pline__detail { display: block; margin-top: calc(2 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; color: var(--ls-muted); }
.ls-pline--gold .ls-pline__icon { color: var(--ls-gold); background: rgba(255, 209, 102, 0.12); }
.ls-pline--slip .ls-pline__icon { color: var(--ls-slip); background: rgba(251, 113, 133, 0.12); }
.ls-pline--urge .ls-pline__icon { color: var(--ls-urge); background: rgba(56, 189, 248, 0.12); }
.ls-trigger--count { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.45); }
.ls-trigger__count { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ls-lilac); }

/* ── Detox fullscreen ───────────────────────────────────────────────────── */
.ls-phone--detox .phone__screen { position: relative; }
.ls-detox { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ls-detox__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(2 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.ls-detox__body::-webkit-scrollbar { width: calc(3 * var(--u)); }
.ls-detox__body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: var(--ks-r-pill); }
.ls-detailhead { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.ls-detailhead__titles { flex: 1 1 auto; min-width: 0; }
.ls-detailhead__name {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(21 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ls-ink);
}
.ls-detailhead__chips { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
.ls-medal {
  position: relative;
  flex: none;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  display: grid;
  place-items: center;
}
.ls-medal__disc {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: calc(21 * var(--u));
  background: rgba(139, 92, 246, 0.16);
  box-shadow: 0 0 calc(16 * var(--u)) rgba(139, 92, 246, 0.28);
}

/* Panel de constancia fusionado (_StatsPanel) */
.ls-stats {
  margin-top: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--ls-surface);
  border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.16);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(139, 92, 246, 0.07);
}
.ls-stats__head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(10 * var(--u)); }
.ls-stats__title {
  margin: 0;
  font-family: var(--ks-display);
  font-size: calc(17 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ls-ink);
}
.ls-stats__streak { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.ls-stats__num { font-size: calc(42 * var(--u)); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ls-ink); }
.ls-stats__unit { align-self: flex-end; padding-bottom: calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; color: var(--ls-muted); }
.ls-badges { display: flex; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--u)); }
.ls-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  border-radius: calc(10 * var(--u));
  color: var(--ls-lilac);
  background: rgba(139, 92, 246, 0.12);
  border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.30);
  font-size: calc(9 * var(--u));
  font-weight: 800;
  letter-spacing: 0.08em;
}
.ls-badge b { color: var(--ls-ink); font-size: calc(13 * var(--u)); letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* Estado del reto (_DetoxChallengeCard) */
.ls-challenge {
  margin-top: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(139, 92, 246, 0.08);
  border: calc(1 * var(--u)) solid rgba(139, 92, 246, 0.22);
}
.ls-challenge__row { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(10 * var(--u)); }
.ls-challenge__day { font-size: calc(18 * var(--u)); font-weight: 800; letter-spacing: 0.02em; color: var(--ls-ink); }
.ls-challenge__torecord { font-size: calc(11 * var(--u)); font-weight: 800; color: var(--ls-lilac); text-align: right; }
.ls-challenge__bar { height: calc(6 * var(--u)); margin-top: calc(9 * var(--u)); border-radius: var(--ks-r-pill); background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ls-challenge__bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ls-indigo), var(--ls-violet-bright)); }
.ls-challenge__missing { display: flex; align-items: flex-start; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; line-height: 1.25; color: rgba(255, 255, 255, 0.80); }
.ls-challenge__missing .ls-i { color: var(--ls-lilac); margin-top: calc(1 * var(--u)); }

/* Semana en curso (LimitsStreakBoard, dense) */
.ls-week { margin-top: calc(10 * var(--u)); }
.ls-week__head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.ls-week__label { font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: 0.18em; color: rgba(216, 180, 254, 0.90); }
.ls-week__legend { font-size: calc(10 * var(--u)); font-weight: 600; color: var(--ls-muted); }
.ls-week__row { display: flex; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); }
.ls-day {
  flex: 1 1 0;
  height: calc(40 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(12 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ls-muted);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.05);
}
.ls-day--clean {
  color: #fff;
  background: rgba(16, 185, 129, 0.85);
  border-color: rgba(16, 185, 129, 0.85);
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(16, 185, 129, 0.30);
}
.ls-day--fall {
  color: #fff;
  background: rgba(239, 68, 68, 0.85);
  border-color: rgba(239, 68, 68, 0.85);
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(239, 68, 68, 0.30);
}
.ls-day--missed { border-color: rgba(139, 92, 246, 0.45); border-width: calc(1.5 * var(--u)); }
.ls-day--today { color: var(--ls-gold); border-color: var(--ls-gold); border-width: calc(1.6 * var(--u)); }

/* Dock de gestión */
.ls-dock {
  flex: 0 0 auto;
  display: flex;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  background: linear-gradient(180deg, rgba(19, 14, 32, 0.55), var(--ls-bg));
  border-top: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.07);
}
.ls-tile {
  flex: 2 1 0;
  min-height: calc(48 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  border-radius: calc(14 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 700;
  color: var(--ls-ink-2);
  background: rgba(255, 255, 255, 0.05);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.10);
}
.ls-tile--danger { color: var(--ls-red-soft); }
.ls-tile--violet { color: var(--ls-lilac); border-color: rgba(139, 92, 246, 0.35); }

/* Aura del Detox: el borde es la barra del reto (aura_de_detox.dart) */
.ls-aura {
  --ls-p: 0.6;
  position: absolute;
  top: calc(46 * var(--u));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 0 0 calc(47 * var(--u)) calc(47 * var(--u));
}
.ls-aura::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: calc(1.6 * var(--u));
  border-radius: inherit;
  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--ls-indigo) 0,
    var(--ls-violet) calc(var(--ls-p) * 0.45turn),
    var(--ls-violet-bright) calc(var(--ls-p) * 0.95turn),
    rgba(216, 180, 254, 0.95) calc(var(--ls-p) * 1turn),
    rgba(216, 180, 254, 0.16) calc(var(--ls-p) * 1turn) 1turn
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(168, 85, 247, 0.50));
}
/* Chispa en la punta del avance (60% = 216° cae sobre el borde izquierdo a
 * ~83,5% del alto). En la app el cometa descansa acá; el base apaga cualquier
 * animación con Reduce Motion, así que la punta se muestra resuelta. */
.ls-aura__comet {
  position: absolute;
  left: 0;
  top: 83.5%;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 35%, rgba(216, 180, 254, 0.75) 55%, rgba(168, 85, 247, 0) 72%);
  box-shadow: 0 0 calc(10 * var(--u)) rgba(216, 180, 254, 0.80);
}

/* ── Crear límite: dos caminos + tope + unidad + categorías ─────────────── */
.ls-goal__title { margin: calc(2 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.ls-modes { display: flex; gap: calc(10 * var(--u)); }
.ls-mode {
  flex: 1 1 0;
  min-width: 0;
  padding: calc(10 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.10);
}
.ls-mode.is-on {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.85);
  box-shadow: 0 0 calc(18 * var(--u)) rgba(139, 92, 246, 0.28);
}
.ls-mode__top { display: flex; align-items: center; justify-content: space-between; color: rgba(255, 255, 255, 0.54); }
.ls-mode.is-on .ls-mode__top { color: var(--ls-lilac); }
.ls-mode__check { color: var(--ls-lilac); opacity: 0; }
.ls-mode.is-on .ls-mode__check { opacity: 1; }
.ls-mode__name { margin: calc(8 * var(--u)) 0 0; font-size: calc(14.5 * var(--u)); font-weight: 800; line-height: 1.15; color: rgba(255, 255, 255, 0.70); }
.ls-mode.is-on .ls-mode__name { color: var(--ls-ink); }
.ls-mode__hint { margin: calc(6 * var(--u)) 0 0; font-size: calc(11.5 * var(--u)); font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.45); }
.ls-mode.is-on .ls-mode__hint { color: rgba(255, 255, 255, 0.70); }
.ls-capbox {
  margin-top: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.08);
}
.ls-capbox__label { margin: 0; font-size: calc(12 * var(--u)); font-weight: 700; color: rgba(255, 255, 255, 0.60); }
.ls-capbox__label--gap { margin-top: calc(10 * var(--u)); }
.ls-caprow { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); }
.ls-step {
  flex: none;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(14 * var(--u));
  color: var(--ls-ink-2);
  background: rgba(255, 255, 255, 0.06);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.14);
}
.ls-caprow__center { flex: 1 1 auto; text-align: center; }
.ls-caprow__num { font-size: calc(32 * var(--u)); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ls-ink); }
.ls-caprow__unit { font-size: calc(13 * var(--u)); font-weight: 700; color: var(--ls-lilac); }
.ls-units { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.ls-unit {
  min-height: calc(34 * var(--u));
  display: inline-flex;
  align-items: center;
  padding: 0 calc(12 * var(--u));
  border-radius: var(--ks-r-pill);
  font-size: calc(12 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.05);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.12);
}
.ls-unit.is-on {
  color: #fff;
  font-weight: 800;
  background: rgba(139, 92, 246, 0.26);
  border-color: rgba(139, 92, 246, 0.80);
}
.ls-cats { display: grid; gap: calc(6 * var(--u)); }
.ls-cat {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.09);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  color: var(--ls-ink-2);
}
.ls-cat__emoji { font-size: calc(16 * var(--u)); }
.ls-cat__id { margin-left: auto; font-family: var(--ks-font); font-size: calc(10.5 * var(--u)); font-weight: 600; color: var(--ls-muted); }
.ls-note { margin: calc(10 * var(--u)) 0 0; font-size: calc(11.5 * var(--u)); font-weight: 500; line-height: 1.4; color: var(--ls-muted); }

/* Utilidades de progreso (sin estilos inline) */
.ls-p--60 { --ls-p: 0.60; }
.ls-p--82 { --ls-p: 0.82; }
.ls-w--60 { width: 60%; }
.ls-w--82 { width: 82%; }