/* KairSun Web — pantalla RUTINA (mock 1:1).
 *
 * Contrato: todo el interior mide en `calc(N * var(--u))` (1dp real de la app,
 * ver ks-screens-base.css). Sin JS, sin estilos inline, sin !important.
 * Tokens de Routine: presentation/theme/routine_palette.dart y _C de
 * routine_screen.dart. Copy: lib/l10n/app_es.arb.
 */

.ks-routine,
.ks-routine-track {
  --r-amber: #FFB020;
  --r-amber-hi: #FFC94D;
  --r-amber-deep: #D4891A;
  --r-cyan: #38BDF8;
  --r-cyan-hi: #22D3EE;
  --r-green: #10B981;
  --r-red: #EF4444;
  --r-now: #FF5C7A;
  --r-surface: #14161C;
  --r-elev: #1D2029;
  --r-bg: #0A0C10;
  --r-glass: #0A0C11;
  --r-glass-hi: #33383F;
  --r-line: rgba(255, 255, 255, 0.08);
  --r-muted: rgba(255, 255, 255, 0.54);
  --r-text-2: #CBD5E1;
  --r-gold-ink: #2B1D00;
  --r-mastery: #2DD4BF;
}

.ks-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; display: block; flex: none; }
.ks-num { font-variant-numeric: tabular-nums; }

/* El interruptor Hoy | Tracking vive fuera del phone y el base mide sus
 * pastillas en `--u`: se declara acá para que la unidad exista también fuera
 * del marco (el phone la redefine igual por su propio ancho). */
.ks-view { --u: calc(min(380px, 92vw) / 393); }

/* ══════════════════════════════════════════════════════════════════════════
   HOY — shell + lista + panel contextual flotante + CTA
   ══════════════════════════════════════════════════════════════════════════ */
.ks-routine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 12% -6%, rgba(255, 176, 32, 0.10), transparent 62%),
    var(--r-bg);
  color: var(--ks-text);
  font-family: var(--ks-font);
}

.r-statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(54 * var(--u));
  padding: calc(12 * var(--u)) calc(24 * var(--u)) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  z-index: 9;
}
.r-statusbar__time { font-weight: 700; font-variant-numeric: tabular-nums; }
.r-statusbar__right { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }
.r-statusbar__net { font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: 0.04em; color: var(--r-text-2); }
.r-batt {
  position: relative;
  width: calc(22 * var(--u)); height: calc(11 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: calc(3 * var(--u));
  display: block;
}
.r-batt::before {
  content: "";
  position: absolute;
  inset: calc(1.6 * var(--u));
  width: 62%;
  border-radius: calc(1.6 * var(--u));
  background: #fff;
}
.r-batt::after {
  content: "";
  position: absolute;
  right: calc(-3.4 * var(--u)); top: 50%;
  translate: 0 -50%;
  width: calc(2 * var(--u)); height: calc(4.4 * var(--u));
  border-radius: 0 calc(1.4 * var(--u)) calc(1.4 * var(--u)) 0;
  background: rgba(255, 255, 255, 0.45);
}

.r-chrome {
  position: absolute;
  top: calc(56 * var(--u)); left: calc(18 * var(--u)); right: calc(18 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(8 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: calc(22 * var(--u));
  background:
    linear-gradient(180deg, rgba(255, 176, 32, 0.10), rgba(255, 176, 32, 0) 64%),
    rgba(18, 20, 26, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(calc(10 * var(--u)));
  backdrop-filter: blur(calc(10 * var(--u)));
  z-index: 8;
}
.r-chrome__btn {
  position: relative;
  width: calc(42 * var(--u)); height: calc(42 * var(--u));
  display: grid; place-items: center;
  border-radius: calc(14 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: var(--r-text-2);
  font-size: calc(19 * var(--u));
}
.r-chrome__btn--track { color: var(--r-amber); }
.r-chrome__dot {
  position: absolute;
  top: calc(8 * var(--u)); right: calc(8 * var(--u));
  width: calc(7 * var(--u)); height: calc(7 * var(--u));
  border-radius: 50%;
  background: var(--r-mastery);
  border: 1px solid var(--r-bg);
}
.r-chrome__title {
  font-size: calc(16 * var(--u));
  font-weight: 900;
  letter-spacing: 0.24em;
  color: #fff;
}

.r-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(275 * var(--u)) calc(12 * var(--u)) calc(196 * var(--u));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.r-scroll::-webkit-scrollbar { display: none; }

/* ── Panel contextual ─────────────────────────────────────────────────── */
.r-panel {
  position: absolute;
  top: calc(118 * var(--u)); left: calc(18 * var(--u)); right: calc(18 * var(--u));
  border-radius: calc(28 * var(--u));
  background:
    linear-gradient(180deg, rgba(255, 176, 32, 0.10), rgba(255, 176, 32, 0.02) 46%, rgba(0, 0, 0, 0.10)),
    rgba(22, 24, 31, 0.94);
  border: 1px solid rgba(255, 176, 32, 0.30);
  box-shadow:
    0 calc(18 * var(--u)) calc(36 * var(--u)) rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(calc(12 * var(--u)));
  backdrop-filter: blur(calc(12 * var(--u)));
  z-index: 7;
  overflow: hidden;
}
.r-panel__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(12 * var(--u)) 0;
}
.r-panel__lead { flex: 1 1 auto; display: inline-flex; align-items: baseline; gap: calc(8 * var(--u)); min-width: 0; }
.r-panel__value {
  font-size: calc(28 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.r-panel__caption {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(96 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--r-amber);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r-panel__smart {
  flex: none;
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  color: rgba(226, 232, 240, 0.82);
  font-variant-numeric: tabular-nums;
}

.r-bar {
  position: relative;
  height: calc(29 * var(--u));
  margin: calc(8 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.r-bar__fill {
  position: absolute;
  inset: 0 57% 0 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--r-amber-hi), var(--r-amber-deep));
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(255, 176, 32, 0.38);
  transform-origin: left center;
  animation: r-fill 620ms cubic-bezier(0.22, 0.8, 0.3, 1) 220ms backwards;
}
.r-bar__fill--43 { inset: 0 57% 0 0; }
.r-bar__pill--43 { left: calc(43% - 24 * var(--u)); }
.r-bar__pill {
  position: absolute;
  top: 50%;
  left: calc(43% - 24 * var(--u));
  translate: 0 -50%;
  width: calc(48 * var(--u)); height: calc(21 * var(--u));
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.62));
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(60, 90, 140, 0.20);
  font-size: calc(11 * var(--u));
  font-weight: 900;
  color: var(--r-gold-ink);
}
@keyframes r-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.r-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(3 * var(--u));
  padding: calc(3 * var(--u)) calc(4 * var(--u));
  border-top: 1px solid rgba(255, 176, 32, 0.24);
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.30), rgba(255, 176, 32, 0.08));
}
.r-day {
  position: relative;
  min-height: calc(48 * var(--u));
  border-radius: calc(17 * var(--u));
  display: grid; place-items: center;
}
.r-day b {
  font-size: calc(15 * var(--u));
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--r-muted);
}
.r-day i {
  position: absolute;
  left: 50%; bottom: calc(5 * var(--u));
  translate: -50% 0;
  width: calc(14 * var(--u)); height: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--r-amber);
}
.r-day--done i { background: var(--r-amber); }
.r-day--partial i { background: rgba(255, 176, 32, 0.38); }
.r-day--today { box-shadow: inset 0 0 0 1.3px rgba(255, 176, 32, 0.62); }
.r-day--today b { color: var(--r-amber); }
.r-day--sel {
  background: linear-gradient(180deg, #FFC44D, var(--r-amber) 52%, #E39A16);
  box-shadow:
    0 calc(5 * var(--u)) calc(12 * var(--u)) rgba(255, 176, 32, 0.38),
    0 calc(4 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, 0.36);
}
.r-day--sel b { color: #0D0D0D; font-weight: 900; }
.r-day--sel i { background: #0D0D0D; }

/* ── Secciones ────────────────────────────────────────────────────────── */
.r-section {
  margin: calc(8 * var(--u)) 0 calc(10 * var(--u));
  border-radius: calc(24 * var(--u));
  background:
    linear-gradient(160deg, rgba(255, 176, 32, 0.09), rgba(20, 22, 28, 0) 55%),
    var(--r-surface);
  border: 1px solid rgba(255, 176, 32, 0.34);
  box-shadow:
    0 calc(9 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.42),
    0 calc(6 * var(--u)) calc(18 * var(--u)) -9px rgba(255, 176, 32, 0.14);
  overflow: hidden;
}
.r-section--habits { border-color: rgba(255, 176, 32, 0.34); }
.r-section--tasks {
  background:
    linear-gradient(160deg, rgba(56, 189, 248, 0.09), rgba(20, 22, 28, 0) 55%),
    var(--r-surface);
  border-color: rgba(56, 189, 248, 0.30);
  box-shadow:
    0 calc(9 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.42),
    0 calc(6 * var(--u)) calc(18 * var(--u)) -9px rgba(56, 189, 248, 0.12);
}
.r-section--muted {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(20, 22, 28, 0) 55%),
    var(--r-surface);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 calc(9 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.34);
}
.r-sec {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  background: linear-gradient(180deg, rgba(255, 176, 32, 0.16), rgba(255, 176, 32, 0));
}
.r-section--tasks .r-sec { background: linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0)); }
.r-section--muted .r-sec { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); }
.r-medal {
  position: relative;
  width: calc(42 * var(--u)); height: calc(42 * var(--u));
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--r-amber) calc(var(--ring, 0) * 1%), rgba(255, 176, 32, 0.20) 0);
  color: var(--r-amber);
  font-size: calc(19 * var(--u));
}
.r-medal--40 { --ring: 40; }
.r-medal--50 { --ring: 50; }
.r-medal--cyan { color: var(--r-cyan); background: conic-gradient(var(--r-cyan) calc(var(--ring, 0) * 1%), rgba(56, 189, 248, 0.20) 0); }
.r-medal--muted { color: rgba(255, 255, 255, 0.72); background: none; border: 1px solid rgba(255, 255, 255, 0.16); }
.r-medal__core {
  width: calc(32 * var(--u)); height: calc(32 * var(--u));
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20, 22, 28, 0.96);
  box-shadow: inset 0 0 0 calc(5 * var(--u)) rgba(255, 255, 255, 0.03);
}
.r-medal--cyan .r-medal__core { box-shadow: inset 0 0 0 calc(5 * var(--u)) rgba(56, 189, 248, 0.06); }
.r-sec__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.r-sec__title { font-size: calc(17 * var(--u)); font-weight: 900; letter-spacing: 0.10em; color: var(--r-amber); }
.r-section--tasks .r-sec__title { color: var(--r-cyan); }
.r-section--muted .r-sec__title { color: rgba(255, 255, 255, 0.72); }
.r-sec__caption { font-size: calc(12 * var(--u)); font-weight: 600; color: var(--r-muted); }
.r-sec__count {
  min-height: calc(22 * var(--u));
  padding: 0 calc(9 * var(--u));
  display: inline-flex; align-items: center;
  border-radius: 999px;
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.35);
  color: #FFDD9A;
  font-size: calc(11 * var(--u));
  font-weight: 800;
}
.r-section--tasks .r-sec__count { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.35); color: #A8E4FF; }
.r-section--muted .r-sec__count { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: var(--r-text-2); }
.r-sec__chev { width: calc(36 * var(--u)); display: grid; place-items: center; color: var(--r-muted); font-size: calc(24 * var(--u)); }
.r-sec__body { display: flex; flex-direction: column; padding: 0 calc(12 * var(--u)) calc(12 * var(--u)); }

/* ── Card ─────────────────────────────────────────────────────────────── */
.r-card {
  position: relative;
  border-radius: calc(20 * var(--u));
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(20, 22, 28, 0) 46%),
    linear-gradient(180deg, var(--r-elev), var(--r-surface));
  border: 1px solid var(--r-line);
  box-shadow:
    0 calc(7 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.42),
    0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.34);
}
.r-card--sched { margin: calc(14 * var(--u)) 0; }
.r-card--plain { margin: 0 0 calc(10 * var(--u)); }
.r-card::before {
  content: "";
  position: absolute;
  left: calc(13 * var(--u)); top: calc(18 * var(--u)); bottom: calc(18 * var(--u));
  width: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
  background: linear-gradient(180deg, var(--r-amber), rgba(255, 176, 32, 0.45));
  box-shadow: 0 0 calc(8 * var(--u)) rgba(255, 176, 32, 0.40);
}
.r-card--done::before { background: linear-gradient(180deg, var(--r-green), rgba(16, 185, 129, 0.45)); box-shadow: 0 0 calc(8 * var(--u)) rgba(16, 185, 129, 0.30); }
.r-card--done { background: linear-gradient(160deg, rgba(16, 185, 129, 0.06), rgba(20, 22, 28, 0) 46%), linear-gradient(180deg, var(--r-elev), var(--r-surface)); border-color: rgba(16, 185, 129, 0.32); }
.r-card--future { opacity: 0.82; }
.r-card__row { display: flex; align-items: center; padding: calc(15 * var(--u)) calc(66 * var(--u)) calc(15 * var(--u)) calc(29 * var(--u)); }
.r-avatar {
  flex: none;
  width: calc(48 * var(--u)); height: calc(48 * var(--u));
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: calc(22 * var(--u));
  background: rgba(255, 176, 32, 0.16);
  border: 1px solid rgba(255, 176, 32, 0.36);
  box-shadow: 0 0 calc(14 * var(--u)) -5px rgba(255, 176, 32, 0.20);
}
.r-card--task .r-avatar { border-radius: calc(15 * var(--u)); background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.34); }
.r-card--done .r-avatar { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.40); }
.r-avatar--faded { opacity: 0.6; filter: saturate(0.7); }
.r-card__body { flex: 1; min-width: 0; margin-left: calc(12 * var(--u)); display: flex; flex-direction: column; }
.r-card__name {
  margin: 0;
  font-size: calc(18 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}
.r-card--done .r-card__name { color: var(--r-green); text-decoration: line-through; text-decoration-color: rgba(16, 185, 129, 0.5); }
.r-card--future .r-card__name { color: rgba(255, 255, 255, 0.78); }
.r-chips { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)) calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
.r-chip { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 700; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.r-chip .i { font-size: calc(12 * var(--u)); opacity: 0.9; }
.r-chip--quiet { padding: 0 calc(1 * var(--u)); }
.r-chip--state {
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #A8E4FF;
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
}
.r-dot-ink {
  width: calc(8 * var(--u)); height: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--r-amber);
  opacity: 0.9;
  flex: none;
}

.r-check {
  position: absolute;
  top: 50%; right: calc(11 * var(--u));
  translate: 0 -50%;
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  border-radius: 50%;
  border: 1.5px solid rgba(255, 176, 32, 0.55);
  background: radial-gradient(circle at 30% 25%, rgba(255, 176, 32, 0.14), rgba(10, 12, 16, 0.96));
  display: grid; place-items: center;
  color: var(--r-bg);
  font-size: calc(22 * var(--u));
}
.r-check--task { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(12 * var(--u)); border-color: rgba(56, 189, 248, 0.55); background: radial-gradient(circle at 30% 25%, rgba(56, 189, 248, 0.14), rgba(10, 12, 16, 0.96)); }
.r-check--done {
  border-color: rgba(16, 185, 129, 0.9);
  background: linear-gradient(140deg, #34D399, var(--r-green));
  box-shadow:
    0 0 calc(14 * var(--u)) -2px rgba(16, 185, 129, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.r-dateTile {
  position: absolute;
  top: 50%; right: calc(11 * var(--u));
  translate: 0 -50%;
  width: calc(52 * var(--u)); height: calc(44 * var(--u));
  border-radius: calc(14 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(1 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.r-dateTile b { font-size: calc(9 * var(--u)); font-weight: 800; letter-spacing: 0.08em; color: var(--r-muted); }
.r-dateTile i { font-style: normal; font-size: calc(17 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; }

.r-subtasks { display: flex; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); color: var(--r-cyan); }
.r-subtasks .i { font-size: calc(13 * var(--u)); }
.r-sub { width: calc(16 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(56, 189, 248, 0.18); }
.r-sub--on { background: var(--r-cyan); box-shadow: 0 0 calc(5 * var(--u)) rgba(56, 189, 248, 0.45); }
.r-subtasks span { font-size: calc(11 * var(--u)); font-weight: 800; color: rgba(56, 189, 248, 0.9); margin-left: calc(3 * var(--u)); }

.r-skill {
  margin-top: calc(10 * var(--u));
  min-height: calc(48 * var(--u));
  padding: calc(7 * var(--u)) calc(8 * var(--u)) calc(7 * var(--u)) calc(11 * var(--u));
  display: flex; align-items: center; gap: calc(8 * var(--u));
  border-radius: calc(14 * var(--u));
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.14), rgba(56, 189, 248, 0.03));
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: 0 0 calc(12 * var(--u)) -5px rgba(56, 189, 248, 0.12);
}
.r-skill__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.r-skill__name { font-size: calc(13.5 * var(--u)); font-weight: 800; letter-spacing: -0.01em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-skill__tag {
  align-self: flex-start;
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(7 * var(--u));
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.30);
  font-size: calc(9.5 * var(--u));
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #9BDDFB;
}
.r-skill__play {
  flex: none;
  width: calc(34 * var(--u)); height: calc(34 * var(--u));
  border-radius: calc(11 * var(--u));
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--r-cyan-hi), #7FD9FF);
  color: #fff;
  font-size: calc(20 * var(--u));
  box-shadow: 0 0 calc(10 * var(--u)) -2px rgba(56, 189, 248, 0.42);
}

/* ── Píldoras de horario y riel ───────────────────────────────────────── */
.r-pill {
  position: absolute;
  left: calc(53 * var(--u));
  translate: -50% 0;
  z-index: 3;
  height: calc(24 * var(--u));
  min-width: calc(64 * var(--u));
  padding: 0 calc(9 * var(--u));
  display: inline-flex; align-items: center; gap: calc(4 * var(--u));
  border-radius: calc(9 * var(--u));
  background: linear-gradient(160deg, var(--r-glass-hi) 0%, var(--r-glass) 44%, #050608 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-size: calc(11.5 * var(--u));
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
}
.r-pill--start { top: calc(-12 * var(--u)); }
.r-pill--end { bottom: calc(-12 * var(--u)); }
.r-card--done .r-pill {
  background: linear-gradient(160deg, #2E5C4C 0%, #17513F 44%, #0B2A20 100%);
  border-color: rgba(16, 185, 129, 0.62);
  color: #D9FBEC;
  box-shadow:
    0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.46),
    0 0 calc(10 * var(--u)) -3px rgba(16, 185, 129, 0.28);
}
.r-node {
  flex: none;
  width: calc(9 * var(--u)); height: calc(9 * var(--u));
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.r-node--filled { background: var(--r-amber); border-color: var(--r-amber); box-shadow: 0 0 calc(5 * var(--u)) rgba(255, 176, 32, 0.45); }
.r-card--done .r-node {
  width: calc(12 * var(--u)); height: calc(12 * var(--u));
  background: rgba(16, 185, 129, 0.95);
  border-color: rgba(16, 185, 129, 0.95);
  display: grid; place-items: center;
  color: var(--r-bg);
  font-size: calc(9 * var(--u));
  box-shadow: 0 0 calc(5 * var(--u)) rgba(16, 185, 129, 0.45);
}
.r-node--sealed .i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }

.r-rail {
  position: absolute;
  left: calc(52 * var(--u)); top: 0; bottom: 0;
  width: calc(2 * var(--u));
  background: linear-gradient(180deg, rgba(255, 176, 32, 0.95), rgba(255, 176, 32, 0.45));
  box-shadow: 0 0 calc(7 * var(--u)) rgba(255, 176, 32, 0.30);
}
.r-rail--live { background: linear-gradient(180deg, rgba(255, 176, 32, 0.55), rgba(255, 176, 32, 0.22)); box-shadow: none; }
.r-rail--task { background: linear-gradient(180deg, rgba(56, 189, 248, 0.85), rgba(56, 189, 248, 0.35)); box-shadow: 0 0 calc(7 * var(--u)) rgba(56, 189, 248, 0.25); }
.r-rail--done { background: linear-gradient(180deg, rgba(16, 185, 129, 0.95), rgba(16, 185, 129, 0.42)); box-shadow: 0 0 calc(7 * var(--u)) rgba(16, 185, 129, 0.30); }
.r-card--done .r-rail--task { background: linear-gradient(180deg, rgba(16, 185, 129, 0.95), rgba(16, 185, 129, 0.42)); box-shadow: 0 0 calc(7 * var(--u)) rgba(16, 185, 129, 0.30); }

/* ── Hueco libre, «Ahora» y choque ────────────────────────────────────── */
.r-gap { position: relative; height: calc(22 * var(--u)); }
.r-gap__rail {
  position: absolute;
  left: calc(52 * var(--u)); top: 0; bottom: 0;
  width: calc(2 * var(--u));
  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.16) calc(3 * var(--u)), transparent calc(3 * var(--u)), transparent calc(6 * var(--u)));
}
.r-gap__node {
  position: absolute;
  left: calc(53 * var(--u)); top: 50%;
  translate: -50% -50%;
  width: calc(9 * var(--u)); height: calc(9 * var(--u));
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.40);
  background: var(--r-bg);
  z-index: 2;
}
.r-gap__pill {
  position: absolute;
  left: calc(53 * var(--u) + 14 * var(--u)); top: 50%;
  translate: 0 -50%;
  height: calc(18 * var(--u));
  padding: 0 calc(7 * var(--u));
  display: inline-flex; align-items: center;
  border-radius: calc(8 * var(--u));
  background: linear-gradient(160deg, rgba(51, 56, 63, 0.94), rgba(10, 12, 17, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.58);
}
.r-gap--far .r-gap__pill { color: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.16); }
.r-gap__pill em { font-style: normal; font-size: calc(10 * var(--u)); font-weight: 600; margin-left: calc(3 * var(--u)); color: rgba(255, 255, 255, 0.7); }
.r-gap--far .r-gap__pill em { color: rgba(255, 255, 255, 0.56); }
.r-gap--done .r-gap__rail {
  background-image: repeating-linear-gradient(to bottom, rgba(16, 185, 129, 0.42) 0, rgba(16, 185, 129, 0.42) calc(3 * var(--u)), transparent calc(3 * var(--u)), transparent calc(6 * var(--u)));
}
.r-gap--done .r-gap__node { border-color: rgba(16, 185, 129, 0.85); }
.r-gap--done .r-gap__pill { border-color: rgba(16, 185, 129, 0.30); }

.r-now { position: relative; height: calc(30 * var(--u)); }
.r-now__rail {
  position: absolute;
  left: calc(52 * var(--u)); top: 0; bottom: 0;
  width: calc(2 * var(--u));
  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.14) calc(3 * var(--u)), transparent calc(3 * var(--u)), transparent calc(6 * var(--u)));
}
.r-now__line {
  position: absolute;
  left: calc(53 * var(--u)); right: 0; top: 50%;
  translate: 0 -50%;
  height: calc(1.5 * var(--u));
  background: linear-gradient(90deg, rgba(255, 92, 122, 0.85), rgba(255, 92, 122, 0));
}
.r-now__dot {
  position: absolute;
  left: calc(53 * var(--u)); top: 50%;
  translate: -50% -50%;
  width: calc(12 * var(--u)); height: calc(12 * var(--u));
  border-radius: 50%;
  background: var(--r-now);
  border: calc(1.6 * var(--u)) solid #fff;
  box-shadow: 0 0 calc(10 * var(--u)) rgba(255, 92, 122, 0.65);
  z-index: 3;
}
.r-now__pill {
  position: absolute;
  left: calc(53 * var(--u) + 14 * var(--u)); top: 50%;
  translate: 0 -50%;
  height: calc(22 * var(--u));
  padding: 0 calc(8 * var(--u));
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  border-radius: calc(8 * var(--u));
  background: linear-gradient(120deg, rgba(43, 22, 30, 0.96), rgba(10, 12, 17, 0.96));
  border: 1px solid rgba(255, 92, 122, 0.55);
  box-shadow: 0 0 calc(10 * var(--u)) -3px rgba(255, 92, 122, 0.22);
  white-space: nowrap;
  overflow: hidden;
}
.r-now__label { font-size: calc(10 * var(--u)); font-weight: 900; letter-spacing: 0.09em; color: var(--r-now); }
.r-now__time { font-size: calc(11.5 * var(--u)); font-weight: 800; color: #fff; }
.r-now__detail { font-size: calc(11 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.78); }

.r-overlap { position: relative; height: calc(22 * var(--u)); }
.r-overlap__icon {
  position: absolute;
  left: calc(53 * var(--u)); top: 50%;
  translate: -50% -50%;
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(43, 33, 16, 0.96);
  border: 1px solid rgba(255, 176, 32, 0.70);
  color: var(--r-amber);
  font-size: calc(12 * var(--u));
  font-weight: 900;
  z-index: 3;
}
.r-overlap__pill {
  position: absolute;
  left: calc(53 * var(--u) + 14 * var(--u)); top: 50%;
  translate: 0 -50%;
  height: calc(18 * var(--u));
  padding: 0 calc(7 * var(--u));
  display: inline-flex; align-items: center;
  border-radius: calc(8 * var(--u));
  background: rgba(43, 33, 16, 0.94);
  border: 1px solid rgba(255, 176, 32, 0.45);
  color: #FFE6BC;
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
}
.r-overlap::before {
  content: "";
  position: absolute;
  left: calc(52 * var(--u)); top: 0; bottom: 0;
  width: calc(2 * var(--u));
  background: rgba(255, 176, 32, 0.55);
}

/* ── Grupo de tag ─────────────────────────────────────────────────────── */
.r-group {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  margin: calc(4 * var(--u)) 0 calc(2 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.r-group__tile {
  width: calc(22 * var(--u)); height: calc(22 * var(--u));
  border-radius: calc(7 * var(--u));
  display: grid; place-items: center;
  font-size: calc(11 * var(--u));
  background: rgba(255, 255, 255, 0.06);
}
.r-group__name { font-size: calc(10.5 * var(--u)); font-weight: 800; letter-spacing: 0.11em; color: var(--r-text-2); }
.r-group__bar { flex: 1; height: calc(4 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.r-group__fill { display: block; height: 100%; border-radius: inherit; background: var(--r-amber); }
.r-group__fill--50 { width: 50%; }
.r-group__count { font-size: calc(11 * var(--u)); font-weight: 800; color: rgba(255, 255, 255, 0.80); }

/* ── Creación (fragmento comprimido de /routine/create) ───────────────── */
.r-create {
  margin: calc(8 * var(--u)) 0 calc(10 * var(--u));
  padding: calc(14 * var(--u));
  border-radius: calc(20 * var(--u));
  background:
    linear-gradient(160deg, rgba(255, 176, 32, 0.08), rgba(20, 22, 28, 0) 55%),
    var(--r-surface);
  border: 1px dashed rgba(255, 176, 32, 0.34);
  box-shadow: 0 calc(7 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.34);
  display: flex; flex-direction: column; gap: calc(12 * var(--u));
}
.r-create__head { display: flex; align-items: center; justify-content: space-between; }
.r-create__kicker { font-size: calc(10.5 * var(--u)); font-weight: 900; letter-spacing: 0.14em; color: var(--r-amber); }
.r-create__pill {
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.35);
  font-size: calc(9.5 * var(--u)); font-weight: 800; letter-spacing: 0.05em; color: #FFDD9A;
}
.r-create__field {
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.r-create__value { font-size: calc(15 * var(--u)); font-weight: 700; }
.r-create__hint { font-size: calc(12 * var(--u)); color: var(--r-muted); }
.r-create__row { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.r-create__label { font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: 0.05em; color: var(--r-muted); display: flex; align-items: center; gap: calc(7 * var(--u)); }
.r-create__label em {
  font-style: normal;
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border-radius: 999px;
  font-size: calc(9 * var(--u)); font-weight: 800;
  color: #9BDDFB;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.30);
}
.r-tagset { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.r-tag {
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--r-text-2);
}
.r-tag--on {
  background: rgba(255, 176, 32, 0.14);
  border-color: rgba(255, 176, 32, 0.55);
  color: #FFDD9A;
}
.r-create__suggest { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; color: #9BDDFB; }
.r-create__suggest .i { font-size: calc(15 * var(--u)); }
.r-reminder {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 176, 32, 0.06);
  border: 1px solid rgba(255, 176, 32, 0.22);
}
.r-reminder .i { font-size: calc(18 * var(--u)); color: var(--r-amber); }
.r-reminder__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.r-reminder__id b { font-size: calc(12.5 * var(--u)); font-weight: 700; }
.r-reminder__id small { font-size: calc(11.5 * var(--u)); color: var(--r-muted); }
.r-switch {
  flex: none;
  width: calc(38 * var(--u)); height: calc(22 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  position: relative;
}
.r-switch i {
  position: absolute;
  top: 50%; left: calc(2 * var(--u));
  translate: 0 -50%;
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  border-radius: 50%;
  background: #fff;
}
.r-switch--on { background: var(--r-amber); border-color: rgba(255, 176, 32, 0.8); }
.r-switch--on i { left: auto; right: calc(2 * var(--u)); background: var(--r-gold-ink); }
.r-create__cta {
  min-height: calc(46 * var(--u));
  border-radius: calc(15 * var(--u));
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--r-amber-hi), var(--r-amber));
  color: var(--r-gold-ink);
  font-size: calc(13.5 * var(--u)); font-weight: 800;
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(255, 176, 32, 0.30);
}

/* ── CTA flotante y dock ──────────────────────────────────────────────── */
.r-cta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 calc(18 * var(--u)) calc(90 * var(--u));
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 12, 16, 0.99) 0%, rgba(10, 12, 16, 0.92) 58%, rgba(10, 12, 16, 0) 100%);
}
.r-cta__btn {
  height: calc(72 * var(--u));
  border-radius: calc(24 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  background: linear-gradient(160deg, #FFD777, #F5A623 72%, #E89A2B);
  color: var(--r-gold-ink);
  box-shadow:
    0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(255, 176, 32, 0.28),
    0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.r-cta__icon { font-size: calc(24 * var(--u)); }
.r-cta__text { display: flex; flex-direction: column; gap: calc(1 * var(--u)); text-align: left; }
.r-cta__text b { font-size: calc(16 * var(--u)); font-weight: 900; letter-spacing: 0.05em; }
.r-cta__text small { font-size: calc(11 * var(--u)); font-weight: 600; opacity: 0.72; }

.r-dock {
  position: absolute;
  left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(10 * var(--u));
  height: calc(64 * var(--u));
  border-radius: calc(24 * var(--u));
  background: rgba(20, 22, 28, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(calc(10 * var(--u)));
  backdrop-filter: blur(calc(10 * var(--u)));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 7;
}
.r-dock__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(3 * var(--u));
  color: rgba(255, 255, 255, 0.45);
  font-size: calc(22 * var(--u));
}
.r-dock__item small { font-size: calc(9 * var(--u)); font-weight: 700; letter-spacing: 0.02em; }
.r-dock__item--on { color: var(--r-amber); }
.r-dock__item--on small { color: var(--r-amber); }
.r-dock__item--on::before {
  content: "";
  position: absolute;
  width: calc(50 * var(--u)); height: calc(44 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(255, 176, 32, 0.12);
}

/* ══════════════════════════════════════════════════════════════════════════
   TRACKING — chrome propio + rangos + tarjetas del rango
   ══════════════════════════════════════════════════════════════════════════ */
.ks-routine-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(130% 46% at 20% -8%, rgba(255, 176, 32, 0.13), transparent 62%),
    var(--r-bg);
  color: var(--ks-text);
  font-family: var(--ks-font);
}
.t-header {
  position: absolute;
  top: calc(54 * var(--u)); left: 0; right: 0;
  padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u));
  display: flex; align-items: center; gap: calc(8 * var(--u));
  z-index: 5;
}
.t-header__back, .t-header__btn {
  flex: none;
  width: calc(42 * var(--u)); height: calc(42 * var(--u));
  border-radius: calc(14 * var(--u));
  display: grid; place-items: center;
  background: var(--r-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--r-text-2);
  font-size: calc(18 * var(--u));
}
.t-header__btn { color: var(--r-muted); }
.t-header__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.t-header__eyebrow { font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: 0.20em; color: var(--r-amber); }
.t-header__title { font-size: calc(24 * var(--u)); font-weight: 900; line-height: 1.1; }

.ks-rtrk { position: absolute; inset: 0; }
.ks-rtrk > input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden;
}
.t-tabs {
  position: absolute;
  top: calc(138 * var(--u)); left: calc(12 * var(--u)); right: calc(12 * var(--u));
  height: calc(46 * var(--u));
  padding: calc(3 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--r-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 5;
}
.t-tabs__pill {
  position: absolute;
  top: calc(3 * var(--u)); bottom: calc(3 * var(--u)); left: calc(3 * var(--u));
  width: calc((100% - 6 * var(--u)) / 5);
  border-radius: calc(13 * var(--u));
  background: linear-gradient(160deg, #D4891A, var(--r-amber));
  box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(255, 176, 32, 0.28);
  transition: transform 0.18s ease;
}
.t-tabs label {
  position: relative;
  z-index: 2;
  display: grid; place-items: center;
  border-radius: calc(13 * var(--u));
  font-size: calc(13.5 * var(--u));
  font-weight: 600;
  color: var(--r-muted);
  cursor: pointer;
}
/* Sin :has() no se puede seguir el radio activo: se oculta la pill para no
 * marcar un rango equivocado (los labels activos siguen funcionando). */
@supports not selector(:has(*)) {
  .t-tabs__pill { display: none; }
}
@supports selector(:has(*)) {
  .ks-rtrk:has(#rtrk-7d:checked) .t-tabs__pill { transform: translateX(0); }
  .ks-rtrk:has(#rtrk-30d:checked) .t-tabs__pill { transform: translateX(100%); }
  .ks-rtrk:has(#rtrk-90d:checked) .t-tabs__pill { transform: translateX(200%); }
  .ks-rtrk:has(#rtrk-year:checked) .t-tabs__pill { transform: translateX(300%); }
  .ks-rtrk:has(#rtrk-all:checked) .t-tabs__pill { transform: translateX(400%); }
}
#rtrk-7d:checked ~ .t-tabs label[for="rtrk-7d"],
#rtrk-30d:checked ~ .t-tabs label[for="rtrk-30d"],
#rtrk-90d:checked ~ .t-tabs label[for="rtrk-90d"],
#rtrk-year:checked ~ .t-tabs label[for="rtrk-year"],
#rtrk-all:checked ~ .t-tabs label[for="rtrk-all"] {
  color: #1A1206;
  font-weight: 800;
}
#rtrk-7d:focus-visible ~ .t-tabs label[for="rtrk-7d"],
#rtrk-30d:focus-visible ~ .t-tabs label[for="rtrk-30d"],
#rtrk-90d:focus-visible ~ .t-tabs label[for="rtrk-90d"],
#rtrk-year:focus-visible ~ .t-tabs label[for="rtrk-year"],
#rtrk-all:focus-visible ~ .t-tabs label[for="rtrk-all"] {
  outline: 2px solid var(--ks-gold);
  outline-offset: 2px;
}

.t-body {
  position: absolute;
  top: calc(192 * var(--u)); left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(40 * var(--u));
  scrollbar-width: none;
}
.t-body::-webkit-scrollbar { display: none; }
.t-pane { display: none; }
#rtrk-7d:checked ~ .t-body .t-pane:nth-of-type(1),
#rtrk-30d:checked ~ .t-body .t-pane:nth-of-type(2),
#rtrk-90d:checked ~ .t-body .t-pane:nth-of-type(3),
#rtrk-year:checked ~ .t-body .t-pane:nth-of-type(4),
#rtrk-all:checked ~ .t-body .t-pane:nth-of-type(5) {
  display: block;
}
.t-pane:nth-of-type(1) .t-chart { --avg: 81; }
.t-pane:nth-of-type(2) .t-chart { --avg: 84; }

.t-card {
  margin-bottom: calc(14 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(24 * var(--u));
  background:
    linear-gradient(180deg, rgba(255, 176, 32, 0.07), rgba(20, 22, 28, 0) 55%),
    var(--r-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.t-card__head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.t-label { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: 0.20em; color: rgba(255, 255, 255, 0.86); }
.t-label i { width: calc(3 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--r-amber); }
.t-label em { font-style: normal; color: var(--r-mastery); letter-spacing: 0; }
.t-compare {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.45);
  color: var(--r-mastery);
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
  white-space: nowrap;
}
.t-compare .i { font-size: calc(14 * var(--u)); }

.t-hero__row { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(14 * var(--u)); }
.t-ring {
  position: relative;
  flex: none;
  width: calc(110 * var(--u)); height: calc(110 * var(--u));
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--r-amber-deep) 0, var(--r-amber-hi) calc(var(--ring, 0) * 1%), rgba(255, 255, 255, 0.14) calc(var(--ring, 0) * 1%));
}
.t-ring::before {
  content: "";
  position: absolute;
  inset: calc(9.4 * var(--u));
  border-radius: 50%;
  background: var(--r-surface);
}
.t-ring__tip { position: absolute; inset: 0; transform: rotate(calc(-90deg + 3.6deg * var(--ring, 0))); }
.t-ring__tip::after {
  content: "";
  position: absolute;
  top: calc(2.2 * var(--u)); left: 50%;
  translate: -50% 0;
  width: calc(5.6 * var(--u)); height: calc(5.6 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 calc(6 * var(--u)) rgba(255, 201, 77, 0.45);
}
.t-ring--81 { --ring: 81; }
.t-ring--84 { --ring: 84; }
.t-ring--78 { --ring: 78; }
.t-ring--82 { --ring: 82; }
.t-ring--80 { --ring: 80; }
.t-ring__value {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(33 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.t-ring__value em { font-style: normal; font-size: calc(14 * var(--u)); font-weight: 700; color: var(--r-muted); align-self: center; translate: 0 calc(7 * var(--u)); margin-left: calc(2 * var(--u)); }
.t-hero__facts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.t-fact-main { font-size: calc(16 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; }
.t-rule { display: block; height: 1px; background: rgba(255, 255, 255, 0.07); }
.t-fact { display: flex; align-items: flex-start; gap: calc(7 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--r-text-2); }
.t-fact__ico { font-size: calc(16 * var(--u)); margin-top: calc(1 * var(--u)); }
.t-fact__ico--green { color: #4ADE80; }
.t-fact__ico--amber { color: var(--r-amber); }

.t-avg {
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  background: rgba(255, 176, 32, 0.10);
  border: 1px solid rgba(255, 176, 32, 0.40);
  font-size: calc(11 * var(--u)); font-weight: 700; color: #FFDD9A;
  font-variant-numeric: tabular-nums;
}
.t-chart { display: flex; gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); }
.t-chart__axis { flex: none; width: calc(30 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; padding-bottom: calc(18 * var(--u)); }
.t-chart__axis em { font-style: normal; font-size: calc(9 * var(--u)); color: var(--r-muted); text-align: right; }
.t-chart__plot { position: relative; flex: 1; height: calc(172 * var(--u)); display: flex; align-items: flex-end; gap: calc(2 * var(--u)); }
.t-chart__plot::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(18 * var(--u) + var(--avg, 0) * 1.4 * var(--u));
  border-top: 1px dashed rgba(255, 176, 32, 0.45);
}
.t-bar { position: relative; flex: 1; height: 100%; }
.t-bar i {
  position: absolute;
  bottom: calc(18 * var(--u)); left: 50%;
  translate: -50% 0;
  width: min(calc(12 * var(--u)), 74%);
  border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
  background: linear-gradient(180deg, var(--r-amber-hi), var(--r-amber));
  transform-origin: bottom center;
  animation: t-grow 620ms cubic-bezier(0.22, 0.8, 0.3, 1) 140ms backwards;
}
.t-bar--100 i { height: calc(150 * var(--u)); }
.t-bar--80 i { height: calc(120 * var(--u)); }
.t-bar--67 i { height: calc(100 * var(--u)); }
.t-bar--60 i { height: calc(90 * var(--u)); }
.t-bar--empty i { height: calc(3 * var(--u)); background: rgba(255, 255, 255, 0.10); }
.t-bar--sel i { box-shadow: 0 0 0 1.5px rgba(255, 201, 77, 0.55), 0 0 calc(10 * var(--u)) rgba(255, 201, 77, 0.35); }
.t-bar small { position: absolute; bottom: 0; left: 50%; translate: -50% 0; font-size: calc(9.5 * var(--u)); font-weight: 700; color: var(--r-muted); }
.t-bar--sel small { color: var(--r-amber); }
@keyframes t-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.t-callout {
  margin-top: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex; align-items: center; justify-content: space-between;
  font-size: calc(12 * var(--u));
  color: var(--r-text-2);
}
.t-callout em { font-style: normal; color: var(--r-amber); font-weight: 700; }
.t-callout__cta {
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.40);
  color: #FFDD9A; font-size: calc(10.5 * var(--u)); font-weight: 800;
}
.t-hint { display: block; margin-top: calc(4 * var(--u)); font-size: calc(12 * var(--u)); color: var(--r-muted); }
.t-board { margin-top: calc(10 * var(--u)); display: flex; flex-direction: column; }
.t-brow { display: flex; align-items: center; gap: calc(11 * var(--u)); min-height: calc(56 * var(--u)); padding: calc(8 * var(--u)) calc(2 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.05); }
.t-brow:first-child { border-top: 0; }
.t-brow__av {
  flex: none;
  width: calc(38 * var(--u)); height: calc(38 * var(--u));
  border-radius: calc(12 * var(--u));
  display: grid; place-items: center;
  font-size: calc(17 * var(--u));
  background: rgba(255, 176, 32, 0.14);
  border: 1px solid rgba(255, 176, 32, 0.40);
}
.t-brow__av--task { background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.40); }
.t-brow__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.t-brow__id b { font-size: calc(14 * var(--u)); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-brow__track { display: block; height: calc(4 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.t-brow__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--r-amber-hi), var(--r-amber)); }
.t-brow__fill--100, .t-brow__fill--92 { background: #4ADE80; }
.t-brow__fill--80 { background: #FFC94D; }
.t-brow__fill--75 { background: var(--r-amber); }
.t-brow__fill--50 { background: rgba(255, 176, 32, 0.55); }
.t-brow__rt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(2 * var(--u)); }
.t-brow__rt b { font-size: calc(14 * var(--u)); font-weight: 800; color: #FFC94D; font-variant-numeric: tabular-nums; }
.t-brow__rt small { font-size: calc(10.5 * var(--u)); color: var(--r-muted); font-variant-numeric: tabular-nums; }

.t-section {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  margin: calc(26 * var(--u)) 0 calc(10 * var(--u));
  font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: 0.20em;
  color: rgba(255, 255, 255, 0.86);
}
.t-section i { width: calc(3 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--r-amber); }
.t-section em { font-style: normal; color: var(--r-mastery); letter-spacing: 0; }

.t-insight { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.t-insight__ico {
  flex: none;
  width: calc(38 * var(--u)); height: calc(38 * var(--u));
  border-radius: calc(12 * var(--u));
  display: grid; place-items: center;
  font-size: calc(20 * var(--u));
}
.t-insight__ico--green { color: #4ADE80; background: rgba(74, 222, 128, 0.13); border: 1px solid rgba(74, 222, 128, 0.35); }
.t-insight__ico--amber { color: var(--r-amber); background: rgba(255, 176, 32, 0.13); border: 1px solid rgba(255, 176, 32, 0.35); }
.t-insight__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.t-insight__body b { font-size: calc(14.5 * var(--u)); font-weight: 800; }
.t-insight__body p { margin: 0; font-size: calc(12.5 * var(--u)); font-weight: 500; line-height: 1.38; color: var(--r-text-2); }
.t-insight__body small { font-size: calc(9.5 * var(--u)); font-weight: 700; letter-spacing: 0.08em; color: rgba(74, 222, 128, 0.85); }
.t-insight:nth-of-type(2) small { color: rgba(255, 176, 32, 0.85); }
.t-locked-copy { margin: 0 0 calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 500; line-height: 1.38; color: var(--r-text-2); }
.t-lock {
  min-height: calc(150 * var(--u));
  border-radius: calc(24 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(29, 32, 41, 0.9)),
    var(--r-elev);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) -10px rgba(0, 0, 0, 0.38);
}
.t-lock__badge {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(5 * var(--u)) calc(11 * var(--u));
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.45);
  color: var(--r-mastery);
  font-size: calc(11.5 * var(--u)); font-weight: 800;
}
.t-lock__badge .i { font-size: calc(14 * var(--u)); }
.t-lock__cta {
  min-height: calc(44 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-radius: calc(14 * var(--u));
  display: grid; place-items: center;
  background: linear-gradient(160deg, #5EEAD4, #14B8A6);
  color: #062A26;
  font-size: calc(13 * var(--u)); font-weight: 800;
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(45, 212, 191, 0.25);
}

.t-month {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  min-height: calc(56 * var(--u));
  padding: calc(4 * var(--u)) 0;
}
.t-month__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.t-month__id b { font-size: calc(14 * var(--u)); font-weight: 700; }
.t-month__id > i { display: block; height: calc(6 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.t-month__fill { display: block; height: 100%; border-radius: inherit; background: #FFC94D; }
.t-month__fill--86, .t-month__fill--85 { background: #FFC94D; }
.t-month__fill--82 { background: var(--r-amber); }
.t-month__rt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(1 * var(--u)); }
.t-month__rt b { font-size: calc(16 * var(--u)); font-weight: 800; color: #FFC94D; font-variant-numeric: tabular-nums; }
.t-month__rt small { font-size: calc(10.5 * var(--u)); color: var(--r-muted); font-variant-numeric: tabular-nums; }
.t-month__chev { color: var(--r-muted); font-size: calc(20 * var(--u)); }

.t-dayrow { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(52 * var(--u)); }
.t-dayrow--p100 { --day-rate: #4ADE80; }
.t-dayrow--p80 { --day-rate: #FFC94D; }
.t-dayrow--p60 { --day-rate: var(--r-amber); }
.t-dayrow__date {
  flex: none;
  width: calc(44 * var(--u));
  padding: calc(4 * var(--u)) 0;
  border-radius: calc(12 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u));
  background: var(--r-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.t-dayrow__date small { font-size: calc(9.5 * var(--u)); font-weight: 700; color: var(--r-muted); }
.t-dayrow__date b { font-size: calc(15 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; }
.t-segs { flex: 1; display: flex; gap: calc(3 * var(--u)); }
.t-segs i { flex: 1; height: calc(8 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.t-segs i.on { background: var(--day-rate, #FFC94D); }
.t-dayrow__rt { flex: none; width: calc(52 * var(--u)); display: flex; justify-content: flex-end; }
.t-dayrow__rt b { font-size: calc(14 * var(--u)); font-weight: 800; color: var(--day-rate, #FFC94D); font-variant-numeric: tabular-nums; }

.t-quarter__grid { display: flex; gap: calc(3 * var(--u)); }
.t-qaxis { flex: none; width: calc(16 * var(--u)); padding-top: calc(22 * var(--u)); display: flex; flex-direction: column; }
.t-qaxis em { font-style: normal; height: calc(24 * var(--u)); display: flex; align-items: center; font-size: calc(9 * var(--u)); font-weight: 700; color: rgba(255, 255, 255, 0.30); }
.t-qaxis em:nth-child(2), .t-qaxis em:nth-child(3) { margin-top: calc(24 * var(--u)); }
.t-week { flex: 1; min-width: 0; animation: t-fade 450ms ease-out backwards; }
.t-week:nth-child(2) { animation-delay: 30ms; }
.t-week:nth-child(3) { animation-delay: 60ms; }
.t-week:nth-child(4) { animation-delay: 90ms; }
.t-week:nth-child(5) { animation-delay: 120ms; }
.t-week:nth-child(6) { animation-delay: 150ms; }
.t-week:nth-child(7) { animation-delay: 180ms; }
.t-week:nth-child(8) { animation-delay: 210ms; }
.t-week:nth-child(9) { animation-delay: 240ms; }
.t-week:nth-child(10) { animation-delay: 270ms; }
.t-week:nth-child(11) { animation-delay: 300ms; }
.t-week:nth-child(12) { animation-delay: 330ms; }
.t-week:nth-child(13) { animation-delay: 360ms; }
.t-week:nth-child(14) { animation-delay: 390ms; }
@keyframes t-fade { from { opacity: 0; } to { opacity: 1; } }
.t-week__m { display: block; height: calc(22 * var(--u)); font-size: calc(9 * var(--u)); font-weight: 700; color: rgba(255, 255, 255, 0.38); white-space: nowrap; overflow: visible; }
.t-q {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: calc(3 * var(--u));
  border-radius: calc(6 * var(--u));
}
.t-q--none { background: #191A20; }
.t-q--low { background: rgba(255, 176, 32, 0.35); }
.t-q--mid { background: rgba(255, 176, 32, 0.78); }
.t-q--perf { background: var(--r-green); }
.t-q--future { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.is-today { box-shadow: inset 0 0 0 1.4px var(--r-amber); }
.t-quarter__summary { display: block; margin-top: calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; color: var(--r-muted); }
.t-legend { display: flex; align-items: center; justify-content: flex-end; gap: calc(3 * var(--u)); margin-top: calc(8 * var(--u)); font-size: calc(9 * var(--u)); color: rgba(255, 255, 255, 0.24); }
.t-legend__c { display: block; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u)); margin-left: calc(3 * var(--u)); }

/* ══════════════════════════════════════════════════════════════════════════
   Calma y pantallas chicas
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .r-bar__fill, .t-bar i, .t-week { animation: none; }
  .t-tabs__pill { transition: none; }
}

/* A 320 el `minmax(320px, 1fr)` del grid base no entra en el content box
 * (320 − 2×20 de padding de página) y la página scrolleaba en horizontal. Se
 * corrige el piso acá: la grilla nunca pide más que el ancho real y el phone
 * toma el disponible (conservando su unidad) en vez de la 92vw fija. */
.screen-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.phone {
  --u: calc(min(380px, 92vw, 100vw - 40px) / 393);
  width: min(380px, 92vw, 100vw - 40px);
}
.screen-head, .screen-notes { min-width: 0; }
.screen-notes code { overflow-wrap: anywhere; }