/* ═════════ Fase 5 · Progreso ═════════
 * Gráficas: serie 1 dorado (pesas), serie 2 azul (clases), serie 3 rubí (cardio); pasaron el
 * validador de color contra la tarjeta en los dos modos (#17140f y #fff).
 * Mapa del cuerpo: recuperación con los tres estados fijos (verde, naranja, rojo)
 * y series semanales como semáforo: verde ya cumplió, amarillo a medias, rojo nada.
 */
:root {
  --viz-1: #bd8a06;   /* pesas: dorado */
  --viz-2: #3987e5;   /* clases: azul */
  --viz-3: #e5385a;   /* cardio: rubí */
  --viz-grid: #29241c;
  --viz-axis: #423a2e;
  --bm-none: #464646;   /* el gris de los músculos del dibujo (sin dato) */
  --st-fresh: #22a352;
  --st-recovering: #f2902f;   /* naranja, como --warn: el amarillo es de lo que se toca */
  --st-loaded: #e04444;
  --vol-low: #184f95;
  --vol-ok: #3987e5;
  --vol-high: #9ec5f4;
  --sv-ok: #22a352;
  --sv-low: #e5b80b;
  --sv-none: #e04444;
}
[data-theme="light"] {
  --viz-1: #b07d00;
  --viz-2: #2a78d6;
  --viz-3: #d42a4f;
  --viz-grid: #ece9e2;
  --viz-axis: #cdc7ba;
  --st-fresh: #2fae5c;
  --st-recovering: #e57c17;
  --st-loaded: #d03b3b;
  --vol-low: #86b6ef;
  --vol-ok: #2a78d6;
  --vol-high: #104281;
  --sv-ok: #2fae5c;
  --sv-low: #c99a06;
  --sv-none: #d03b3b;
}

/* ───────── Mapa del cuerpo ───────── */
.body-map { display: block; width: 100%; max-width: 400px; height: auto; max-height: 360px; margin: 0 auto; }
.bm-m {
  stroke: none; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  cursor: pointer; outline: none;
  transition: fill 0.35s var(--ease-out-expo), opacity 0.2s;
}
@media (hover: hover) { .bm-m:hover { opacity: 0.82; } }
.bm-m:focus-visible, .bm-m.is-on { stroke: var(--flame); stroke-width: 2.5; }
.st-fresh { fill: var(--st-fresh); }
.st-recovering { fill: var(--st-recovering); }
.st-loaded { fill: var(--st-loaded); }
.vol-none { fill: var(--bm-none); }
.vol-low { fill: var(--vol-low); }
.vol-ok { fill: var(--vol-ok); }
.vol-high { fill: var(--vol-high); }
.sv-ok, .sv-high { fill: var(--sv-ok); }
.sv-low { fill: var(--sv-low); }
.sv-none { fill: var(--sv-none); }
.bm-m.rk-fill { fill: var(--fill); }
/* Sin dato se deja ver el gris del dibujo (y se sigue pudiendo tocar). */
.body-map .vol-none { fill: transparent; }

/* Volumen: brillo propio de cada pieza pintada */
.bm-sheen { pointer-events: none; }
.bm-sheen path { fill: url(#bm-sheen-g); }
.body-map .bm-m { transform-box: fill-box; transform-origin: 50% 50%; animation: bm-in 720ms var(--ease-out-expo) both; animation-delay: calc(var(--d, 0) * 22ms + 80ms); }
.body-map .bm-sheen { animation: m-fade 900ms 500ms both; }
.bm-m.is-on { animation: bm-pick 520ms var(--ease-spring); }
@keyframes bm-in { from { opacity: 0; transform: scale(0.82); } }
@keyframes bm-pick { 40% { transform: scale(1.06); } }

.bm-caps { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 400px; margin: -2px auto 0; text-align: center; }
.bm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: var(--text-sm); color: var(--muted); }
.bm-key { display: inline-flex; align-items: center; gap: 6px; }
.bm-sw { width: 12px; height: 12px; border-radius: 4px; background: currentColor; }
.bm-sw.st-fresh { background: var(--st-fresh); }
.bm-sw.st-recovering { background: var(--st-recovering); }
.bm-sw.st-loaded { background: var(--st-loaded); }
.bm-sw.vol-none { background: var(--bm-none); }
.bm-sw.vol-low { background: var(--vol-low); }
.bm-sw.vol-ok { background: var(--vol-ok); }
.bm-sw.vol-high { background: var(--vol-high); }
.bm-sw.sv-ok, .bm-sw.sv-high { background: var(--sv-ok); }
.bm-sw.sv-low { background: var(--sv-low); }
.bm-sw.sv-none { background: var(--sv-none); }
.bm-detail {
  display: grid; gap: 4px; min-height: 68px; padding: 12px 14px;
  border-radius: var(--radius-field); background: var(--card-2);
}
.bm-detail .row { justify-content: space-between; gap: 8px; }
.bm-detail p svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.bm-group .badge { margin-bottom: 4px; }

/* ───────── Gráficas ───────── */
.viz { margin: 0; display: grid; gap: 10px; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--text-sm); color: var(--muted); }
.viz-key { display: inline-flex; align-items: center; gap: 6px; }
.viz-sw { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.viz-sw.s1 { background: var(--viz-1); }
.viz-sw.s2 { background: var(--viz-2); }
.viz-sw.s3 { background: var(--viz-3); }
.viz-plot { position: relative; min-height: 210px; }
.viz-svg { display: block; overflow: visible; touch-action: pan-y; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-base { stroke: var(--viz-axis); stroke-width: 1; }
.viz-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-value { fill: var(--ink); font-size: 12px; font-weight: 700; }
.viz-bar { transition: opacity 0.2s, filter 0.2s; }
.viz-bar.s1 { fill: var(--viz-1); color: var(--viz-1); }
.viz-bar.s2 { fill: var(--viz-2); color: var(--viz-2); }
.viz-bar.s3 { fill: var(--viz-3); color: var(--viz-3); }
.viz-col.is-hot .viz-bar { filter: drop-shadow(0 0 8px currentColor); }
.viz-hit { fill: transparent; cursor: pointer; outline: none; }
.viz-hit:focus-visible { stroke: var(--flame); stroke-width: 2; }
.viz-cols.has-hot .viz-col:not(.is-hot) .viz-bar { opacity: 0.4; }
.viz-grow .viz-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: viz-grow 0.8s var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes viz-grow { from { transform: scaleY(0); } }
.viz-line-path { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 4px 8px color-mix(in oklab, var(--viz-1) 55%, transparent)); }
.viz-area { fill: var(--viz-1); }
.viz-dot { fill: var(--viz-1); stroke: var(--card); stroke-width: 2; }
.viz-reveal { transform-box: fill-box; transform-origin: 0 0; animation: m-bar 1.3s var(--ease-out-expo) both; }
.viz-pulse { fill: var(--viz-1); pointer-events: none; transform-box: fill-box; transform-origin: center; animation: viz-pulse 2.2s ease-out infinite; }
@keyframes viz-pulse { from { transform: scale(1); opacity: 0.55; } to { transform: scale(3.2); opacity: 0; } }
.viz-hair { stroke: var(--muted); stroke-width: 1; }
.viz-svg:focus-visible { outline: 2px solid var(--flame); outline-offset: 4px; border-radius: 8px; }
.viz-tip {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  display: grid; gap: 2px; padding: 8px 10px; white-space: nowrap;
  background: var(--card-2); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow-pop); font-size: var(--text-sm);
}
.viz-tip-row { display: flex; align-items: center; gap: 6px; }
.viz-tip-row strong { color: var(--ink); }
.viz-tip-row span { color: var(--muted); }
.viz-tip-row:last-child strong { font-weight: 500; color: var(--muted); }
.viz-table { overflow-x: auto; }

/* ───────── Números ───────── */
.stats-2 { grid-template-columns: 1fr 1fr; }
.stats-2 .stat-num { font-size: 1.375rem; }
.stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--muted); }
.stat-delta svg { width: 14px; height: 14px; }
.stat-delta.is-up { color: var(--ok); }
.type-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--type); vertical-align: 0; }
.tbars .mbar-track > span { background: var(--viz-1); }

/* ───────── Historial ───────── */
.list-item .li-icon.tl-class { --ic: var(--type); --ic-ink: #fff; }

/* ───────── Inicio: esta semana ───────── */
.week-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; text-align: center; }
.wd { display: grid; justify-items: center; gap: 6px; font-size: var(--text-sm); color: var(--muted); }
.wd-dot {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); color: #fff;
}
.wd-dot svg { width: 16px; height: 16px; }
.wd.has-w .wd-dot, .wd.has-c .wd-dot { border-color: transparent; box-shadow: var(--gloss-edge); }
.wd.has-w .wd-dot { background: var(--gloss), var(--viz-1); color: var(--on-flame); }
.wd.has-c .wd-dot { background: var(--gloss), var(--viz-2); }
.wd.has-w.has-c .wd-dot { background: var(--gloss), linear-gradient(135deg, var(--viz-1) 50%, var(--viz-2) 50%); color: #fff; }
.wd.is-today.has-w .wd-dot, .wd.is-today.has-c .wd-dot { box-shadow: var(--gloss-edge), 0 0 0 2px var(--card), 0 0 0 4px var(--gold); }
.wd.is-today .wd-dot { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold); }
.wd.is-today { color: var(--ink); font-weight: 700; }
.wd.is-future .wd-dot { border-style: dashed; opacity: 0.6; }
.week-title { display: grid; gap: 4px; }
.week-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--text-sm); color: var(--muted); }
.week-sum .viz-key { white-space: nowrap; }
.rec-line { display: flex; align-items: flex-start; gap: 6px; font-size: var(--text-sm); margin-top: 8px; }
.rec-line svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.rec-line.is-ok { color: var(--ok); }
.rec-line.is-warn { color: var(--warn); }
.rec-line.is-bad { color: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  .viz-grow .viz-bar, .viz-reveal, .viz-pulse { animation: none; }
  .bm-m { transition: none; }
  .body-map .bm-m, .body-map .bm-sheen, .bm-m.is-on { animation: none; }
}

/* ═════════ Fuerza: rango, escudos y escalera ═════════
 * El color del rango va en el escudo, las barras y los puntos; el texto sigue en
 * los tonos de texto (así se lee en los dos modos aunque el rango sea plata u oro).
 */
.rk-emblem { display: block; flex-shrink: 0; overflow: visible; filter: drop-shadow(0 5px 10px color-mix(in oklab, var(--rk) 50%, transparent)); }
.rk-sm { width: 40px; height: 40px; }
.rk-md { width: 60px; height: 60px; }
.rk-lg { width: 112px; height: 112px; }
/* Contorno negro grueso para que se lea chiquito, como insignia de juego. */
/* Destellos de Unreal y rombos del escalón (rank-art.js) */
.rk-spark { transform-box: fill-box; transform-origin: center; }
.rk-lg .rk-spark { animation: rk-twinkle 2.6s ease-in-out infinite; }
.rk-lg .rk-spark:nth-of-type(2n) { animation-delay: 1.3s; }
@keyframes rk-twinkle { 50% { transform: scale(0.4); opacity: 0.4; } }
.rk-sm .rk-pips { display: none; }
.rk-aura { opacity: calc(0.35 + var(--t, 1) * 0.11); transform-origin: 60px 64px; }
.rk-t1 { --t: 1; } .rk-t2 { --t: 2; } .rk-t3 { --t: 3; } .rk-t4 { --t: 4; } .rk-t5 { --t: 5; } .rk-t6 { --t: 6; }
.rk-sweep { fill: #fff; opacity: 0; }

.rk-sm .rk-aura, .rk-md .rk-aura { opacity: calc(0.15 + var(--t, 1) * 0.08); transform: scale(0.85); }
.rk-lg { filter: drop-shadow(0 0 calc(6px + var(--t) * 3px) color-mix(in oklab, var(--rk) 60%, transparent)); }
.rk-lg .rk-aura { animation: rk-breathe 3.6s ease-in-out infinite; }
.rk-lg .rk-sweep { animation: rk-sweep 4.5s 1s ease-in-out infinite; }
.rk-lg.rk-t6 .rk-body { animation: rk-glow 3s ease-in-out infinite; }
@keyframes rk-glow { 50% { opacity: 0.9; } }
@keyframes rk-breathe { 50% { transform: scale(1.08); opacity: 1; } }
@keyframes rk-sweep { 0% { transform: skewX(-18deg) translateX(0); opacity: 0; } 10% { opacity: 0.5; } 45% { transform: skewX(-18deg) translateX(190px); opacity: 0.5; } 46%, 100% { opacity: 0; transform: skewX(-18deg) translateX(190px); } }
.rk-emblem.is-locked { filter: grayscale(1); opacity: 0.35; }
/* Admin · Reglas: el nombre de cada rango junto a su insignia */
.rank-name-row { display: flex; align-items: flex-start; gap: 12px; }
.rank-name-row .rk-emblem { margin-top: 22px; }
.rank-name-head { grid-column: 1 / -1; margin: 0 0 4px; }
.rank-name-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: end; }
.rank-name-fields .field { min-width: 0; }
.rk-txt { color: var(--ink); font-weight: 700; white-space: nowrap; }
.rk-txt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--rk); box-shadow: 0 0 6px var(--rk); vertical-align: 1px; }
.rank-bar-caps .rk-txt::before { display: none; }
.rk-badge {
  color: #1a1305; font-weight: 700;
  background: var(--gloss), linear-gradient(145deg, color-mix(in oklab, var(--rk) 60%, white), var(--rk) 55%, color-mix(in oklab, var(--rk) 75%, black));
  box-shadow: var(--gloss-edge);
}

.rank-hero {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 14px;
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in oklab, var(--rk) 26%, transparent), transparent 62%),
    var(--card);
  box-shadow: var(--shadow-card), inset 0 0 0 1px color-mix(in oklab, var(--rk) 30%, transparent);
}
.rank-rays {
  position: absolute; z-index: -1; left: -60px; top: -70px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in oklab, var(--rk) 22%, transparent) 0deg 8deg, transparent 8deg 22deg);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
  animation: rk-spin 40s linear infinite;
}
.rank-hero-top { display: flex; align-items: center; gap: 16px; }
.rank-emblem-wrap { animation: rk-float 4.5s ease-in-out infinite, m-pop 800ms var(--ease-spring) both; }
.rank-name { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.rank-div {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.25em; padding: 0 0.3em; margin-left: 2px;
  border-radius: var(--radius-full); vertical-align: 0.2em;
  background: var(--gloss), linear-gradient(135deg, color-mix(in oklab, var(--rk) 70%, white), var(--rk));
  box-shadow: var(--gloss-edge), 0 4px 12px -6px var(--rk);
  color: #fff; font-size: 0.5em; letter-spacing: 0.04em; text-shadow: 0 1px 2px oklch(0 0 0 / 0.35);
}
.rank-pct { font-size: var(--text-lg); line-height: 1.3; }
.rank-pct strong { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; display: inline-block; }
.rank-bar { position: relative; height: 14px; border-radius: var(--radius-full); background: var(--soft); overflow: hidden; }
.rank-bar > span {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--w));
  background: var(--gloss), linear-gradient(90deg, color-mix(in oklab, var(--rk) 55%, black), var(--rk));
  animation: m-bar 1.3s 250ms var(--ease-out-expo) both;
}
.rank-bar > span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.55), transparent); width: 30%;
  animation: m-shine 3.2s 1.4s ease-in-out infinite;
}
.rank-bar-caps { display: flex; justify-content: space-between; color: var(--muted); margin-top: -6px; }
.rank-bar-caps svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.rank-tip { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-field); background: var(--card-2); font-size: var(--text-sm); }
.rank-tip > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ok); margin-top: 1px; }
@keyframes rk-spin { to { transform: rotate(360deg); } }
@keyframes rk-float { 50% { transform: translateY(-5px); } }

/* Tres y tres, grandes: a 40 px no se distinguía el escudo. */
.rank-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; margin: 0; padding: 8px 0 0; list-style: none; text-align: center; }
.rank-ladder li { display: grid; justify-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--muted); min-width: 0; }
.rank-ladder .rk-sm { width: min(120px, 100%); height: auto; aspect-ratio: 1; }
.rank-ladder .rk-pips { display: none; }
.rank-ladder li span { white-space: nowrap; }
.rank-ladder li.is-me { color: var(--ink); }
.rank-ladder li.is-me .rk-emblem { transform: scale(1.08); animation: m-pop 700ms 300ms var(--ease-spring) both; }
.rank-ladder li.is-me span { margin-top: 6px; }

.lift-row .li-body { display: grid; gap: 6px; }
.lift-bar { display: block; height: 6px; border-radius: var(--radius-full); background: var(--soft); overflow: hidden; }
.lift-bar > span { display: block; height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--w)); background: linear-gradient(90deg, color-mix(in oklab, var(--rk) 55%, black), var(--rk)); }
.view-enter .lift-bar > span, .anim-swap .lift-bar > span { animation: m-bar 1s 300ms var(--ease-out-expo) both; }
.lift-next { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-sm); color: var(--muted); }
.lift-next > svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ok); }
.lift-next strong { color: var(--ink); }
.list-item .li-icon.rk-none { --ic: #6b7280; --ic-ink: #fff; }
.list-item.is-dim { opacity: 0.78; }

/* Selector chico del mapa (lo secundario): Oxford con brillo al elegirlo */
.seg-mini { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: var(--gloss-soft), var(--card-2); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), inset 0 0 0 1px var(--line); justify-self: start; }
.seg-mini label { position: relative; }
.seg-mini input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg-mini span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 650; white-space: nowrap; color: var(--muted); transition: transform 300ms var(--ease-spring); }
.seg-mini input:checked + span { color: var(--on-flame); background: var(--gloss), var(--flame-grad); box-shadow: var(--gloss-edge), 0 6px 14px -8px var(--flame); animation: m-pop 400ms var(--ease-spring); }
.seg-mini input:focus-visible + span { outline: 2px solid var(--flame); outline-offset: 2px; }

.input-unit { position: relative; }
.input-unit .input { padding-right: 3rem; }
.input-unit > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; }
.rank-setup { background: radial-gradient(120% 70% at 100% 0%, color-mix(in oklab, var(--flame) 16%, transparent), transparent 60%), var(--card); }
.sex-pick span { min-height: 52px; font-size: var(--text-base); }

@media (prefers-reduced-motion: reduce) {
  .rk-lg .rk-aura, .rk-lg .rk-sweep, .rk-lg .rk-spark, .rk-lg.rk-t6 .rk-body, .rank-rays, .rank-emblem-wrap, .rank-bar > span, .rank-bar > span::after, .rank-ladder li.is-me .rk-emblem, .lift-bar > span, .seg-mini input:checked + span { animation: none !important; }
}

/* Números: cada cuadro con su ícono con brillo y un resplandor de su color */
.stat-tile { position: relative; overflow: hidden; }
.stat-tile .stat-ic { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; }
.stat-tile .stat-ic svg { width: 18px; height: 18px; }
.stat-tile::before {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--ic, var(--flame)) 22%, transparent), transparent);
}
.stat-tile:has(.ic-blue)::before { --ic: #3987e5; }
.stat-tile:has(.ic-ruby)::before { --ic: #ef3b5a; }
.stat-tile:has(.ic-violet)::before { --ic: #a855f7; }
.stat-ic.ic-blue { --ic: #3987e5; --ic-ink: #fff; }
.stat-ic.ic-ruby { --ic: #e11d48; --ic-ink: #fff; }
.stat-ic.ic-violet { --ic: #9333ea; --ic-ink: #fff; }
.stat-tile .eyebrow { padding-right: 40px; }

/* ═════════ Tu racha (Inicio) ═════════
 * La flama dorada con las semanas seguidas, la meta en segmentos, los días de la
 * semana y la medalla de maestría con su barra. Apagada en gris si no hay racha. */
.streak-card {
  background-image:
    radial-gradient(120% 60% at 0% 0%, color-mix(in oklab, var(--flame) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--glass-glow), transparent 40%);
}
.streak-card { display: grid; gap: 14px; }
.streak-card .card-head { margin-bottom: 0; }
.streak-hero { display: flex; align-items: center; gap: 14px; }
.streak-flame {
  position: relative; display: grid; place-items: center; flex-shrink: 0;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gloss-soft), var(--oxford); color: var(--oxford-ink); box-shadow: var(--oxford-edge);
}
.streak-flame svg { width: 32px; height: 32px; }
.streak-flame b {
  position: absolute; right: -4px; bottom: -4px; min-width: 28px; height: 28px; padding: 0 6px;
  display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--card); color: var(--ink); font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--line-strong);
}
.streak-hero.is-on .streak-flame {
  background: var(--gloss), radial-gradient(circle at 50% 70%, #fff3b0, var(--flame) 45%, var(--flame-to));
  color: var(--on-flame);
  box-shadow: var(--gloss-edge), 0 0 0 4px color-mix(in oklab, var(--flame) 18%, transparent), 0 10px 28px -8px var(--flame);
}
.streak-hero.is-on .streak-flame svg { animation: flicker 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.streak-hero.is-on .streak-flame b { background: var(--gloss), var(--on-flame); color: var(--flame); box-shadow: 0 0 0 2px var(--flame); }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.06, 1.1) rotate(-3deg); } 60% { transform: scale(0.97, 1.03) rotate(2deg); } }
/* «Hoy te toca» en Inicio: el mismo orbe que la flama de la racha */
.today-row { display: flex; align-items: center; gap: 14px; }
.today-row > p, .today-row > .li-body { min-width: 0; margin: 0; }
.today-orb {
  display: grid; place-items: center; flex-shrink: 0;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gloss-soft), var(--oxford); color: var(--oxford-ink); box-shadow: var(--oxford-edge);
}
.today-orb svg { width: 28px; height: 28px; }
.today-orb.is-gold {
  background: var(--gloss), radial-gradient(circle at 50% 70%, #fff3b0, var(--flame) 45%, var(--flame-to));
  color: var(--on-flame);
  box-shadow: var(--gloss-edge), 0 0 0 4px color-mix(in oklab, var(--flame) 18%, transparent), 0 10px 28px -8px var(--flame);
  animation: m-float 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .today-orb.is-gold { animation: none; } }
.streak-text { display: grid; gap: 2px; min-width: 0; }
.streak-text strong { font-size: var(--text-lg); letter-spacing: -0.015em; }

.streak-ask { margin: 0; }
.streak-goal { display: flex; flex-wrap: wrap; gap: 8px; }

/* La meta en segmentos: uno por día comprometido, dorado el que ya hiciste */
.streak-week { display: grid; gap: 8px; }
.streak-week p { margin: 0; }
.streak-pips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.streak-pips i {
  height: 12px; border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--flame) 9%, var(--card-2));
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.35), inset 0 0 0 1px color-mix(in oklab, var(--flame) 18%, transparent);
}
.streak-pips i.is-done {
  background: var(--gloss), var(--flame-grad);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.5), 0 0 12px -3px var(--flame);
}

/* Maestría: medalla con el número y la barra al siguiente nivel */
.streak-level {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  border-radius: var(--radius-field);
  background: var(--gloss-soft), color-mix(in oklab, var(--flame) 6%, var(--card-2));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--flame) 22%, transparent);
}
.lv-badge {
  display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--gloss), var(--flame-grad); color: var(--on-flame);
  font-size: 1.35rem; font-weight: 850; font-variant-numeric: tabular-nums;
}
.lv-body { flex: 1; display: grid; gap: 6px; min-width: 0; }
.lv-body p { margin: 0; }
.lv-name { display: grid; gap: 2px; }
.lv-name strong { font-size: var(--text-lg); letter-spacing: -0.015em; }
.lv-bar { height: 10px; }

.streak-more summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 650; color: var(--flame-ink); font-size: var(--text-sm); }
.streak-more p { margin: 0 0 10px; }
.lv-ladder { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.lv-ladder li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; color: var(--muted); }
.lv-ladder li span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--card-2); font-weight: 750; font-size: 0.78rem; color: var(--ink);
}
.lv-ladder li small { margin-left: auto; font-variant-numeric: tabular-nums; }
.lv-ladder li.is-past { color: var(--ink); }
.lv-ladder li.is-past span { background: color-mix(in oklab, var(--flame) 30%, var(--card-2)); }
.lv-ladder li.is-me { color: var(--ink); font-weight: 700; background: color-mix(in oklab, var(--flame) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--flame) 45%, transparent); }
.lv-ladder li.is-me span { background: var(--gloss), var(--flame-grad); color: var(--on-flame); }

/* Sabor: chispas que suben de la flama, segmentos que se llenan uno por uno,
 * brillo que cruza la medalla y la tarjeta que se mueve al cumplir la meta. */
.streak-flame .ember { display: none; }
.streak-hero.is-on .streak-flame .ember {
  display: block; position: absolute; left: 50%; top: 18%; width: 5px; height: 5px; border-radius: 50%;
  background: #ffe9a0; box-shadow: 0 0 6px 1px var(--flame); opacity: 0; pointer-events: none;
  animation: ember 2.4s ease-out infinite;
}
.streak-hero.is-on .streak-flame .ember:nth-of-type(2) { margin-left: -12px; animation-delay: 0.8s; animation-duration: 2.8s; }
.streak-hero.is-on .streak-flame .ember:nth-of-type(3) { margin-left: 9px; animation-delay: 1.6s; width: 4px; height: 4px; }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -34px) scale(0.3); } }
.streak-hero.is-on .streak-flame { animation: m-float 4s ease-in-out infinite; }

@keyframes pip-in { from { transform: scaleX(0); opacity: 0; } }
.streak-pips i { transform-origin: left center; animation: pip-in 650ms var(--ease-spring) both; animation-delay: calc(var(--p, 0) * 90ms + 250ms); position: relative; overflow: hidden; }
.streak-pips.is-met i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, oklch(1 0 0 / 0.7) 50%, transparent 70%);
  transform: translateX(-120%); animation: go-shine 2.6s ease-in-out infinite; animation-delay: calc(var(--p, 0) * 120ms + 900ms);
}

.lv-badge { position: relative; overflow: hidden; animation: m-pop 700ms var(--ease-spring) 350ms both; }
.lv-badge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, oklch(1 0 0 / 0.65) 50%, transparent 65%);
  transform: translateX(-120%); animation: go-shine 3.8s ease-in-out 1.4s infinite;
}
.lv-bar > span { transform-origin: left center; animation: m-bar 1.2s var(--ease-out-expo) 450ms both; }
.lv-ladder li { animation: m-rise 480ms var(--ease-out-expo) both; }
.streak-more[open] .lv-ladder li { animation-delay: calc(var(--n, 0) * 40ms); }

@media (prefers-reduced-motion: reduce) {
  .streak-flame .ember, .streak-hero.is-on .streak-flame .ember { display: none; }
  .streak-pips.is-met i::after, .lv-badge::after { display: none; }
  .streak-hero.is-on .streak-flame { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .streak-hero.is-on .streak-flame svg { animation: none; } }