/* ───────────────────────── Mi Rutina ───────────────────────── */
:root {
  --bg: #0F1419;
  --card: #1A2129;
  --card2: #222B35;
  --linea: #2A3440;
  --neutro: #2B3540;
  --txt: #F5F7FA;
  --txt2: #8B98A5;
  --acento: #FF6B4A;
  --acento2: #FF9F43;
  --grad: linear-gradient(135deg, #FF6B4A, #FF9F43);
  --bien: #2ED47A;
  --r: 22px;
  --r2: 14px;
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --tabs-h: 64px;
  --resorte: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--txt);
  font: 16px/1.45 system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
}
body::before { /* brillo cálido de fondo */
  content: ""; position: fixed; inset: -20% -30% auto; height: 60vh; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 107, 74, .13), transparent 70%);
}
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--acento2); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3, h4, p { margin: 0; }
.ico { width: 20px; height: 20px; flex: none; }
.txt2 { color: var(--txt2); }
.peq { font-size: 13px; }
.centro { text-align: center; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt2); }

/* ── Estructura ─────────────────────────────────────────────── */
.vista {
  max-width: 520px; margin: 0 auto;
  padding: calc(var(--sa-t) + 18px) 16px calc(var(--tabs-h) + var(--sa-b) + 28px);
}
body.con-mini .vista { padding-bottom: calc(var(--tabs-h) + var(--sa-b) + 92px); }
body.sin-tabs .tabs { display: none; }
.vista.entra > * { animation: entrar .45s var(--suave) both; }
.vista.entra > *:nth-child(2) { animation-delay: .04s; }
.vista.entra > *:nth-child(3) { animation-delay: .08s; }
.vista.entra > *:nth-child(4) { animation-delay: .12s; }
.vista.entra > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }

.top { margin: 4px 2px 14px; }
.saludo { color: var(--txt2); font-size: 15px; font-weight: 500; }
.top h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }

.card { background: var(--card); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
.card-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-cab h3 { font-size: 18px; font-weight: 750; }
.cont { color: var(--txt2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Ciclo de semanas ───────────────────────────────────────── */
.ciclo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.ciclo-txt { font-size: 14px; color: var(--txt2); }
.ciclo-txt b { color: var(--txt); }
.ciclo-ps { display: flex; gap: 6px; }
.ciclo-p {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--txt2); background: var(--card); border: 1.5px solid var(--linea);
}
.ciclo-p.pas { color: var(--txt); border-color: transparent; background: var(--card2); }
.ciclo-p.act { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 4px 14px rgba(255, 107, 74, .4); }

.nota {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--r2); background: rgba(255, 159, 67, .1); color: #FFC58A; font-size: 14px;
}
.nota.comp { margin: 12px 0; background: rgba(76, 141, 255, .1); color: #A9C8FF; line-height: 1.4; }
.nota.comp b { color: #CFE0FF; }
.comp-g { margin: 4px 0 8px; }
.fila-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.btn-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; background: var(--card); color: var(--txt); font-size: 14px; font-weight: 600;
  transition: transform .15s;
}
.btn-chip .ico { width: 17px; height: 17px; color: var(--txt2); }
.btn-chip.acento { background: rgba(255, 107, 74, .14); color: #FF9C85; }
.btn-chip.acento .ico { color: inherit; }
.btn-chip:active { transform: scale(.96); }

/* ── Hero del día ───────────────────────────────────────────── */
.hero {
  --hc: var(--acento);
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  padding: 20px 18px; margin-bottom: 14px; border-radius: 26px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--hc) 30%, transparent), transparent 60%),
    linear-gradient(160deg, #1F2731, #171D24);
  border: 1px solid color-mix(in srgb, var(--hc) 25%, transparent);
}
.hero-txt { flex: 1; min-width: 0; }
.hero h2 { font-size: 26px; font-weight: 850; letter-spacing: -.02em; line-height: 1.12; margin: 4px 0 6px; }
.hero-sub { color: var(--txt2); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.anillo { position: relative; flex: none; }
.anillo svg { display: block; }
.anillo-arco { transition: stroke-dashoffset .6s var(--suave); }
.anillo-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.anillo-c b { font-size: 28px; font-weight: 850; font-variant-numeric: tabular-nums; }
.anillo-c span { font-size: 11px; color: var(--txt2); font-weight: 600; margin-top: 3px; }

.tag {
  --c: var(--acento);
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--c);
  background: color-mix(in srgb, var(--c) 16%, transparent);
}
.tag .ico { width: 13px; height: 13px; }
.tag.marca { --c: #FFD43B; }
.tag.volver { --c: var(--txt2); background: var(--card2); color: var(--txt); }

/* ── Tarjeta de ejercicio ───────────────────────────────────── */
.lista-ej { display: grid; gap: 12px; margin-bottom: 14px; }
.ej {
  --c: var(--acento);
  position: relative; background: var(--card); border-radius: var(--r); padding: 14px 14px 12px 18px;
  overflow: hidden; transition: background .3s, box-shadow .3s;
}
.ej::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.ej.completa { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, var(--card)), var(--card) 60%); }
.ej.record { animation: record 1.2s ease; }
@keyframes record { 30% { box-shadow: 0 0 0 2px #FFD43B, 0 0 30px rgba(255, 212, 59, .35); } }

.ej-cab { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 48px; }
.ej-num {
  width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--card2); color: var(--c); font-weight: 850; font-size: 15px; transition: background .3s, color .3s;
}
.ej.completa .ej-num { background: var(--c); color: #0F1419; }
.ej.completa .ej-num .ico { width: 18px; height: 18px; stroke-width: 3; }
.ej-tit { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ej-n { font-size: 17px; font-weight: 750; line-height: 1.25; }
.ej-meta { font-size: 14px; color: var(--txt2); }
.ej-meta b { color: var(--txt); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ej-chev { width: 32px; height: 32px; display: grid; place-items: center; color: var(--txt2); transition: transform .35s var(--suave); }
.ej.abierta .ej-chev { transform: rotate(180deg); }
.ej-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px 46px; }

.series { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.serie {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--linea); background: var(--bg); display: grid; place-items: center;
  font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums;
  transition: background .25s, border-color .25s, transform .12s;
}
.serie:active { transform: scale(.92); }
.serie-ok { position: absolute; width: 26px; height: 26px; stroke-width: 3; color: #0F1419; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--resorte); }
.serie-n { transition: opacity .15s; }
.serie.hecha { background: var(--c); border-color: var(--c); box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 40%, transparent); }
.serie.hecha .serie-n { opacity: 0; }
.serie.hecha .serie-ok { opacity: 1; transform: scale(1); }
.serie.pop { animation: rebote .5s var(--resorte); }
@keyframes rebote { 0% { transform: scale(.75); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }

.peso { display: flex; align-items: center; gap: 8px; }
.peso-btn {
  width: 52px; height: 52px; border-radius: 16px; background: var(--card2); display: grid; place-items: center; flex: none;
  transition: transform .12s, background .2s;
}
.peso-btn:active { transform: scale(.92); background: var(--linea); }
.peso-btn .ico { width: 22px; height: 22px; }
.peso-in {
  flex: 1; height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg); border: 1.5px solid var(--linea); border-radius: 16px; padding: 0 12px;
}
.peso-in:focus-within { border-color: var(--acento); }
.peso-in input {
  width: 100%; min-width: 0; max-width: 110px; background: none; border: 0; outline: 0; text-align: center;
  font-size: 26px; font-weight: 850; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.peso-in input::placeholder { color: #4A5664; }
.peso-in input::-webkit-outer-spin-button, .peso-in input::-webkit-inner-spin-button { -webkit-appearance: none; }
.peso-in span { color: var(--txt2); font-weight: 600; font-size: 14px; }
.ultima { margin: 8px 2px 0; font-size: 13px; color: var(--txt2); }
.ultima b { color: var(--txt); }
.link { color: var(--acento2); font-weight: 700; padding: 6px 4px; margin: -6px 0; }

.mas { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--suave); }
.ej.abierta .mas { grid-template-rows: 1fr; }
.mas-in { overflow: hidden; min-height: 0; }
.mas-in > :first-child { margin-top: 14px; }
.mas h4 { font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--txt2); margin: 14px 0 6px; }
.pasos { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 8px; }
.pasos li { counter-increment: p; display: flex; gap: 10px; font-size: 15px; }
.pasos li::before {
  content: counter(p); flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: var(--card2); color: var(--c, var(--acento));
}
.btn-sec {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 16px;
  border-radius: 16px; background: var(--card2); font-weight: 700; font-size: 15px; transition: transform .12s;
}
.btn-sec:active { transform: scale(.98); }
.btn-pri {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; margin-top: 14px;
  border-radius: 18px; background: var(--grad); color: #fff; font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 24px rgba(255, 107, 74, .3); transition: transform .12s, opacity .2s;
}
.btn-pri:active { transform: scale(.98); }
.btn-pri:disabled { opacity: .4; box-shadow: none; }
.btn-pri.chico { width: auto; min-height: 52px; margin: 0; padding: 0 20px; }

/* ── Mapa del cuerpo ────────────────────────────────────────── */
.mapa { display: flex; justify-content: center; padding: 6px 0 0; }
.cuerpo { width: 100%; max-width: 280px; height: auto; overflow: visible; }
.cuerpo .z { fill: var(--neutro); stroke: var(--card); stroke-width: 1.4; transition: fill .5s ease; }
.cuerpo .lineas { fill: none; stroke: var(--card); stroke-width: 1.2; opacity: .7; }
.cuerpo text { fill: var(--txt2); font-size: 9px; font-weight: 600; font-family: system-ui, sans-serif; }
.ej.abierta .cuerpo .z.on, .mapa.encendido .cuerpo .z.on { fill: var(--zc); transition-delay: .15s; animation: latido 2.2s ease-in-out .6s infinite; }
.ej.abierta .cuerpo .z.sec, .mapa.encendido .cuerpo .z.sec { fill: color-mix(in srgb, var(--zc) 45%, var(--neutro)); transition-delay: .25s; }
.mapa.encendido .cuerpo .z.on { animation: none; }
@keyframes latido { 50% { filter: brightness(1.25) drop-shadow(0 0 4px var(--zc)); } }

/* ── Domingo ────────────────────────────────────────────────── */
.hero.reposo { --hc: #38BDF8; flex-direction: column; align-items: flex-start; padding: 26px 20px; }
.reposo-ico { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: rgba(56, 189, 248, .15); color: #38BDF8; margin-bottom: 8px; }
.reposo-ico .ico { width: 30px; height: 30px; }
.hero.reposo h2 { font-size: 30px; }
.hero.reposo .hero-sub { font-size: 16px; color: #C9D3DD; max-width: 32ch; }
.manana h3 { font-size: 20px; font-weight: 800; margin: 4px 0 2px; }

/* ── Sugerencias (antes hábitos): solo consejos, nada que marcar ── */
.sugerencias ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sugerencias li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #C9D3DD; }
.sugerencias li .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--acento2); }
.sugerencias li b { color: var(--txt); font-weight: 700; }

.tip { display: flex; gap: 10px; align-items: flex-start; padding: 4px 6px 8px; color: var(--txt2); font-size: 14px; }
.tip b { color: var(--txt); }
.tip .ico { color: var(--acento2); margin-top: 1px; }

/* ── Sábado ─────────────────────────────────────────────────── */
.paso .ej-cab { cursor: default; }
.paso-check {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--linea); display: grid; place-items: center; flex: none;
  transition: background .25s, border-color .25s, transform .12s;
}
.paso-check .ico { width: 24px; height: 24px; stroke-width: 3; color: var(--txt2); }
.paso-check.on { background: var(--c); border-color: var(--c); animation: rebote .5s var(--resorte); }
.paso-check.on .ico { color: #0F1419; }
.paso-check:active { transform: scale(.92); }
.paso-cuerpo { margin: 12px 0 2px 46px; }
.paso-cuerpo .series { margin: 12px 0 2px; }
.nota-core { margin-top: 10px; }
.mini-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-chips span { padding: 6px 11px; border-radius: 999px; background: var(--card2); font-size: 13px; font-weight: 600; }
.trote-res { margin: 12px 0 10px; font-size: 15px; }
.linea-tiempo { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; }
.linea-tiempo span { min-width: 2px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--txt2); font-weight: 600; }
.leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }

/* ── Controles segmentados ──────────────────────────────────── */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 15px; background: var(--bg); margin: 4px 0 14px; }
.seg button { flex: 1; min-height: 42px; border-radius: 11px; font-weight: 700; font-size: 14px; color: var(--txt2); transition: background .25s, color .25s; }
.seg button.act { background: var(--card2); color: var(--txt); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.seg-4 button { font-size: 13px; }

/* ── Hoja inferior ──────────────────────────────────────────── */
.hoja-raiz { position: fixed; inset: 0; z-index: 50; }
.hoja-fondo { position: absolute; inset: 0; background: rgba(5, 8, 11, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.hoja {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; max-height: 88dvh; overflow-y: auto;
  background: var(--card); border-radius: 28px 28px 0 0; padding: 10px 16px calc(var(--sa-b) + 20px);
  transform: translateY(100%); transition: transform .38s var(--suave); overscroll-behavior: contain;
}
.hoja-raiz.abierta .hoja-fondo { opacity: 1; }
.hoja-raiz.abierta .hoja { transform: none; }
.hoja-asa { width: 40px; height: 5px; border-radius: 3px; background: var(--linea); margin: 0 auto 14px; }
.hoja-t { font-size: 22px; font-weight: 800; }
.hoja-sub { color: var(--txt2); font-size: 14px; margin: 4px 0 14px; }
.hoja-sub b { color: var(--txt); }

.alts { display: grid; gap: 8px; margin-bottom: 12px; }
.alt {
  position: relative; display: grid; gap: 4px; padding: 14px; border-radius: 17px; text-align: left;
  background: var(--bg); border: 2px solid transparent; transition: border-color .2s, background .2s;
}
.alt-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.alt-n { font-weight: 750; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
.alt-sr { font-size: 16px; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alt-p { font-size: 14px; color: var(--txt2); }
.alt-tag { position: absolute; top: -8px; right: 12px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #FFD43B; color: #0F1419; }
.alt.sel { border-color: var(--acento); background: rgba(255, 107, 74, .08); }
.alt.original .alt-n { color: var(--acento2); }

.dias { display: grid; gap: 6px; }
.dia-op {
  display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px;
  border-radius: 15px; background: var(--bg); text-align: left; border: 2px solid transparent;
}
.dia-op.act { border-color: var(--acento); }
.dia-n { font-weight: 800; }
.dia-t { color: var(--txt2); font-size: 14px; }
.dia-hoy { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--grad); color: #fff; }

/* ── Descanso ───────────────────────────────────────────────── */
.descanso { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; }
.descanso-fondo { position: absolute; inset: 0; background: rgba(5, 8, 11, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; }
.descanso-panel {
  position: relative; width: 100%; max-width: 520px; margin: 0 auto; text-align: center;
  background: linear-gradient(180deg, #1F2731, var(--card)); border-radius: 32px 32px 0 0;
  padding: 14px 20px calc(var(--sa-b) + 24px); transform: translateY(100%); transition: transform .4s var(--suave);
}
.descanso.abierto .descanso-fondo { opacity: 1; }
.descanso.abierto .descanso-panel { transform: none; }
.descanso-min { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--card2); display: grid; place-items: center; }
.descanso-titulo { font-size: 18px; font-weight: 750; margin: 4px 50px 0; }
.descanso-sub { color: var(--txt2); font-size: 14px; min-height: 20px; margin-top: 4px; }
.reloj { position: relative; width: min(64vw, 250px); aspect-ratio: 1; margin: 16px auto 8px; }
.reloj svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 22px rgba(255, 107, 74, .25)); }
.reloj-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; font-weight: 850; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.descanso-btns { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 10px; margin-top: 14px; }
.descanso-btns button { min-height: 58px; border-radius: 18px; background: var(--card2); font-weight: 800; font-size: 17px; transition: transform .12s; }
.descanso-btns button:active { transform: scale(.95); }
.descanso-btns .primario { background: var(--grad); color: #fff; }
.descanso.listo .reloj-num { color: var(--bien); animation: rebote .6s var(--resorte); }
.descanso.listo .reloj svg { filter: drop-shadow(0 0 30px rgba(46, 212, 122, .5)); }

.mini {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(var(--tabs-h) + var(--sa-b) + 18px);
  max-width: 496px; margin: 0 auto; height: 56px; border-radius: 18px; overflow: hidden;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: #26303B; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); text-align: left;
  animation: subir .35s var(--suave);
}
@keyframes subir { from { transform: translateY(20px); opacity: 0; } }
.mini-barra { position: absolute; inset: auto 0 0 0; height: 4px; background: var(--grad); transform-origin: left; }
.mini .ico { color: var(--acento2); }
.mini-txt { flex: 1; min-width: 0; font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-num { font-size: 22px; font-weight: 850; font-variant-numeric: tabular-nums; }
.mini.listo .mini-num { color: var(--bien); }

/* ── Trote guiado ───────────────────────────────────────────── */
.carrera {
  --fc: #FFD43B;
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  padding: calc(var(--sa-t) + 12px) 20px calc(var(--sa-b) + 22px);
  background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--fc) 38%, var(--bg)), var(--bg) 75%);
  transition: opacity .3s, transform .35s var(--suave), background .6s; opacity: 0; transform: scale(.98);
}
.carrera.abierto { opacity: 1; transform: none; }
.carrera.destello::after { content: ""; position: absolute; inset: 0; background: var(--fc); pointer-events: none; animation: destello .9s ease-out forwards; }
@keyframes destello { from { opacity: .55; } to { opacity: 0; } }
.car-top { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; }
.car-x { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; }
#car-sem { flex: 1; }
#car-total { color: rgba(245, 247, 250, .75); font-variant-numeric: tabular-nums; }
.car-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; }
#car-ronda { font-size: 15px; font-weight: 700; color: rgba(245, 247, 250, .75); min-height: 22px; }
#car-fase { font-size: 64px; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; color: var(--fc); line-height: 1; transition: color .5s; }
#car-desc { font-size: 17px; font-weight: 600; }
#car-reloj { font-size: 104px; font-weight: 850; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.05; margin: 14px 0 6px; }
#car-sig { font-size: 16px; color: rgba(245, 247, 250, .75); font-weight: 600; }
.car-barra { position: relative; margin: 10px 0 22px; }
#car-segs { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; opacity: .9; }
#car-marca { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .7); }
.car-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.car-b { min-height: 64px; border-radius: 20px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 17px; }
.car-b .ico { width: 22px; height: 22px; }
.car-listo { display: none; grid-column: 1 / -1; background: var(--grad); }
.carrera.pausada #car-reloj { animation: parpadeo 1.2s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: .35; } }
.carrera.fin [data-c="pausa"], .carrera.fin [data-c="saltar"]:not(.car-x) { display: none; }
.carrera.fin .car-listo { display: flex; }
.carrera.fin #car-fase { font-size: 72px; }
.carrera.fin #car-reloj { font-size: 72px; }

/* ── Progreso ───────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--card); border-radius: 20px; padding: 14px 12px; display: grid; gap: 2px; }
.stat .ico { color: var(--txt2); width: 18px; height: 18px; margin-bottom: 4px; }
.stat b { font-size: 30px; font-weight: 850; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--txt2); font-weight: 600; line-height: 1.25; }
.stat.racha { background: linear-gradient(150deg, rgba(255, 107, 74, .25), var(--card) 70%); }
.stat.racha .ico { color: var(--acento); }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-h { text-align: center; font-size: 11px; font-weight: 700; color: var(--txt2); padding-bottom: 4px; }
.cal-d {
  aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--bg); color: var(--txt2);
}
.cal-d.dom { opacity: .55; }
.cal-d.futuro { opacity: .3; }
.cal-d.parcial { color: var(--txt); box-shadow: inset 0 0 0 2px var(--acento); }
.cal-d.completo { background: var(--grad); color: #fff; opacity: 1; }
.cal-d.hoy { outline: 2px solid var(--txt); outline-offset: 1px; color: var(--txt); }
.cal-nav { width: 40px; height: 40px; border-radius: 12px; background: var(--card2); display: grid; place-items: center; }
.cal-nav .ico { transform: rotate(90deg); }
.cal-nav.sig .ico { transform: rotate(-90deg); }
.cal-nav:disabled { opacity: .3; }
.cal-ley { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--txt2); font-weight: 600; }
.cal-ley i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; background: var(--bg); }
.cal-ley i.completo { background: var(--grad); }
.cal-ley i.parcial { box-shadow: inset 0 0 0 2px var(--acento); }
.cal-ley i.dom { opacity: .55; box-shadow: inset 0 0 0 1px var(--linea); }

.cintura-in { display: flex; gap: 10px; }
.cintura-in .peso-in { flex: 1; }
.cintura-in + .peq { margin-top: 8px; }
.delta { margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--txt2); }
.delta.bien { color: var(--bien); }
.delta.ojo { color: #FF9F43; }

.grafica { margin: 12px 0 0; }
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-grid { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 2 4; }
.g-eje { fill: var(--txt2); font-size: 10px; font-weight: 600; font-family: system-ui, sans-serif; }
.g-val { fill: var(--txt); font-size: 11px; font-weight: 800; font-family: system-ui, sans-serif; }
.g-cruz { stroke: var(--txt2); stroke-width: 1; transition: opacity .2s; }
.g-hit { cursor: pointer; }
.g-tip { margin-top: 6px; text-align: center; font-size: 14px; color: var(--txt2); }
.g-tip b { color: var(--txt); }

.pe-lista { display: grid; gap: 6px; }
.pe { --c: var(--acento); background: var(--bg); border-radius: 16px; padding: 4px 12px; }
.pe.abierto { padding-bottom: 12px; }
.pe-cab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; text-align: left; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.pe-n { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.25; display: grid; }
.pe-n small { color: var(--txt2); font-weight: 600; font-size: 12px; }
.chispa { width: 72px; height: 26px; flex: none; }
.pe-v { font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; text-align: right; min-width: 52px; }
.pe-v small { font-size: 11px; color: var(--txt2); font-weight: 700; margin-left: 2px; }
.vacio { display: flex; gap: 10px; align-items: center; color: var(--txt2); font-size: 14px; padding: 6px 2px; }

/* ── Guía ───────────────────────────────────────────────────── */
.reglas { display: grid; gap: 0; }
.regla { position: relative; overflow: hidden; }
.regla::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.regla h3 { font-size: 18px; font-weight: 800; color: var(--c); margin-bottom: 8px; }
.regla ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; }
.regla li::marker { color: var(--c); }
.plan { display: grid; gap: 6px; }
.plan-dia { background: var(--bg); border-radius: 15px; }
.plan-dia summary { list-style: none; display: grid; grid-template-columns: 92px 1fr 20px; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px; cursor: pointer; }
.plan-dia summary::-webkit-details-marker { display: none; }
.plan-dia summary .ico { color: var(--txt2); transition: transform .3s; }
.plan-dia[open] summary .ico { transform: rotate(180deg); }
.plan-dia.quieto { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px; }
.plan-dia ul { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 8px; }
.plan-dia li { --c: var(--acento); display: flex; align-items: center; gap: 10px; font-size: 14px; }
.plan-dia li span { flex: 1; }
.plan-dia li small { color: var(--txt2); }
.plan-dia li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-dia li b.trote-b { white-space: normal; text-align: right; font-weight: 600; color: var(--txt2); font-size: 13px; }
.plan-dia > .peq { padding: 0 14px 12px; }
.leyenda-g { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; font-size: 13px; font-weight: 600; }
.leyenda-g span { --c: var(--acento); display: inline-flex; align-items: center; gap: 6px; }
.pie { text-align: center; color: var(--txt2); font-size: 13px; padding: 10px 0 4px; }

/* ── Ajustes ────────────────────────────────────────────────── */
.campo { display: grid; gap: 8px; margin: 4px 0 8px; }
.campo span { font-weight: 650; font-size: 15px; }
.campo input {
  height: 52px; padding: 0 14px; border-radius: 15px; background: var(--bg); border: 1.5px solid var(--linea);
  font-size: 17px; font-weight: 700; outline: 0; width: 100%; -webkit-appearance: none; appearance: none;
}
.campo input:focus { border-color: var(--acento); }
.sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 6px 0; border-bottom: 1px solid var(--linea); cursor: pointer; }
.sw:last-of-type { border-bottom: 0; }
.sw > span { display: grid; gap: 2px; }
.sw small { color: var(--txt2); font-size: 13px; line-height: 1.3; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw i { position: relative; width: 52px; height: 32px; border-radius: 16px; background: var(--linea); flex: none; transition: background .25s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .3s var(--resorte); }
.sw input:checked + i { background: var(--grad); }
.sw input:checked + i::after { transform: translateX(20px); }
.sw input:focus-visible + i { outline: 2px solid var(--acento2); outline-offset: 2px; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fila-2 .btn-sec { margin-top: 12px; }
.card.peligro { background: transparent; border: 1.5px solid rgba(255, 77, 77, .3); padding: 6px; }
.btn-peligro { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; border-radius: 16px; color: #FF6B6B; font-weight: 700; }

/* ── Bienvenida ─────────────────────────────────────────────── */
.bienvenida { min-height: calc(100dvh - var(--sa-t) - 60px); display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 12px; padding: 20px 4px; }
.logo-grande { width: 132px; height: 132px; margin: 0 auto 10px; border-radius: 34px; background: radial-gradient(circle at 30% 20%, #26303B, #141A20); display: grid; place-items: center; box-shadow: 0 20px 50px rgba(255, 107, 74, .25); animation: flotar 4s ease-in-out infinite; }
.logo-grande svg { width: 104px; height: 104px; }
@keyframes flotar { 50% { transform: translateY(-6px); } }
.bienvenida h1 { font-size: 36px; font-weight: 900; letter-spacing: -.02em; }
.bienvenida .campo { text-align: left; margin-top: 12px; }

/* ── Barra de pestañas ──────────────────────────────────────── */
.tabs {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: flex; justify-content: center;
  padding: 6px 8px calc(var(--sa-b) + 6px);
  background: rgba(15, 20, 25, .82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.tabs button {
  flex: 1; max-width: 120px; height: var(--tabs-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--txt2); transition: color .2s;
}
.tabs .ico { width: 24px; height: 24px; transition: transform .3s var(--resorte); }
.tabs button.act { color: var(--acento); }
.tabs button.act .ico { transform: translateY(-1px) scale(1.08); }
.tabs button:active .ico { transform: scale(.88); }

/* ── Aviso y confeti ────────────────────────────────────────── */
.aviso {
  position: fixed; z-index: 90; left: 50%; top: calc(var(--sa-t) + 12px); max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px;
  background: #2A3440; color: var(--txt); font-weight: 650; font-size: 15px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  transform: translate(-50%, -200%); opacity: 0; transition: transform .4s var(--suave), opacity .3s; pointer-events: none;
}
.aviso.visible { transform: translate(-50%, 0); opacity: 1; }
.aviso .ico { color: #FFD43B; }
.confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 95; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Videos de los ejercicios ───────────────────────────────── */
:root { --fig: #E6ECF2; --fig2: #9AA7B4; --equipo: #4E5C6B; --equipo2: #566474; --pad: #44525F; --video-bg: #1C242D; --video-bg2: #12181E; }
.video { position: relative; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 90% at 50% 15%, var(--video-bg), var(--video-bg2)); }
.video-svg { display: block; width: 100%; height: auto; }
.video-svg .cuerpo { fill: var(--fig); }
.video-svg .cuerpo.fondo { fill: var(--fig2); opacity: .75; }
.video-svg .cabeza { fill: var(--fig); }
.video-svg .sombra { fill: #000; opacity: .35; }
.video-svg .suelo { stroke: var(--linea); stroke-width: 2; stroke-linecap: round; }
.video-svg .pad { stroke: var(--pad); stroke-linecap: round; }
.video-svg .pata, .video-svg .riel-s { stroke: var(--equipo); stroke-width: 3; stroke-linecap: round; }
.video-svg .torre { fill: var(--pad); stroke: var(--equipo); stroke-width: 1.5; }
.video-svg .pila { fill: var(--equipo2); }
.video-svg .barra-fija { stroke: var(--fig2); stroke-width: 4; stroke-linecap: round; }
.video-svg .muro { fill: var(--equipo); }
.video-svg .colchoneta { fill: var(--equipo); }
.video-svg .escalon { fill: var(--equipo2); }
.video-svg .fitball { fill: #3E6FB0; opacity: .9; }
.video-svg .cable { stroke: var(--fig2); stroke-width: 1.4; }
.video-svg .polea { fill: var(--equipo2); stroke: var(--fig2); stroke-width: 1.5; }
.video-svg .agarre { fill: var(--fig2); }
.video-svg .riel { stroke: var(--equipo); stroke-width: 4; stroke-linecap: round; }
.video-svg .carro { stroke: var(--equipo2); stroke-width: 6; stroke-linecap: round; }
.video-svg .rodillo { fill: var(--pad); stroke: var(--equipo2); stroke-width: 1.5; }
.video-svg .banda { stroke: var(--acento); stroke-width: 3; stroke-linecap: round; }
.video-svg .barra { stroke: #B8C2CC; stroke-width: 3; stroke-linecap: round; }
.video-svg .disco { fill: #2A333D; stroke: #B8C2CC; stroke-width: 2; }
.video-svg .disco-c { fill: #B8C2CC; }
.video-svg .manc { fill: #2A333D; stroke: #B8C2CC; stroke-width: 1.6; }
.video-svg .manc-c, .video-svg .manc-b { fill: #B8C2CC; }
.video-svg .balon { fill: #8A5A3C; stroke: #C99A72; stroke-width: 1.5; }
.video-svg .marca { fill: rgba(255, 159, 67, .2); stroke: var(--acento2); stroke-width: 2.5; }
.video-svg .marca.oculta { display: none; }
.video-svg .flecha { stroke: var(--acento2); stroke-width: 3; stroke-linecap: round; }
.video-svg .flecha-p { fill: var(--acento2); }
.video-punto { position: absolute; left: 10px; right: 10px; top: 10px; padding: 8px 12px; border-radius: 12px; text-align: center; font-size: 14px; font-weight: 700; color: var(--txt); background: rgba(15, 20, 25, .72); }
.video-punto:empty { display: none; }
.video-ctrl { display: flex; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; }
.video-ctrl button { flex: 1; min-height: 46px; padding: 0 10px; border-radius: 14px; background: var(--card2); font-weight: 750; font-size: 15px; }
.video-ctrl button.act { color: var(--acento2); box-shadow: inset 0 0 0 1.5px var(--acento2); }
.video-ctrl [data-v=play] { background: var(--grad); color: #1A1110; }
.video-pasos { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: vp; display: grid; gap: 4px; }
.video-pasos li { counter-increment: vp; display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; font-size: 15px; color: var(--txt2); cursor: pointer; transition: background .2s, color .2s; }
.video-pasos li::before { content: counter(vp); flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 850; background: var(--card2); color: var(--acento2); }
.video-pasos li.act { background: rgba(255, 107, 74, .12); color: var(--txt); font-weight: 700; }
.video-pasos li.act::before { background: var(--grad); color: #1A1110; }
.video-fijas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.video-fijas figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; background: var(--video-bg); }
.video-fijas b { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--grad); color: #1A1110; font-size: 13px; }
.musculos-leyenda { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ver-video { display: flex; align-items: center; justify-content: center; gap: 8px; }
.alt-video { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .video-pasos li { transition: none; } }

.ini-g { display: block; font-size: 12px; color: var(--txt2); }
.ultima .peq { font-size: 12px; color: var(--txt2); }

/* ── Calentamiento y aviso de subir ─────────────────────────── */
.calent { padding: 0; overflow: hidden; }
.calent summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; min-height: 56px; }
.calent summary::-webkit-details-marker { display: none; }
.calent summary > span { flex: 1; display: grid; gap: 2px; }
.calent summary b { font-size: 17px; font-weight: 800; }
.calent summary small, .cal-lista small { color: var(--txt2); font-size: 13px; }
.calent summary .ico { transition: transform .25s; color: var(--txt2); }
.calent[open] summary .ico { transform: rotate(180deg); }
.cal-lista { margin: 0; padding: 0 18px 16px; list-style: none; counter-reset: cl; display: grid; gap: 8px; }
.cal-lista li { counter-increment: cl; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.cal-lista li::before { content: counter(cl); flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 850; background: var(--card2); color: var(--acento2); }
.cal-lista li > span { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 15px; }
.ver-mini { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--card2); color: var(--acento2); }
.subir { display: flex; gap: 10px; align-items: flex-start; margin: 10px 2px 0; padding: 10px 12px; border-radius: 14px; background: rgba(46, 212, 122, .1); color: #BFF3D6; font-size: 14px; }
.subir .ico { flex: none; color: var(--bien); }
.subir b { color: var(--txt); }

/* Switch de discos en kg o lbs (por ejercicio) */
.unid { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; }
.unid > span { margin-right: auto; font-size: 13px; color: var(--txt2); }
.unid button { min-height: 40px; min-width: 52px; padding: 0 12px; border-radius: 12px; background: var(--bg); color: var(--txt2); font-weight: 750; font-size: 14px; }
.unid button[aria-pressed="true"] { background: rgba(255, 107, 74, .14); color: var(--acento2); box-shadow: inset 0 0 0 1.5px var(--acento); }

/* Cómo armar el peso */
.carga { display: flex; gap: 10px; align-items: flex-start; margin: 10px 2px 0; padding: 10px 12px; border-radius: 14px; background: var(--bg); font-size: 14px; color: #D5DEE7; }
.carga .ico { flex: none; width: 18px; height: 18px; color: var(--acento2); margin-top: 1px; }

:root { --ag-acento: var(--acento2); --ag-piel: #F0C29B; --ag-borde: #8A5634; --ag-metal: #AEB9C6; --ag-goma: #4A5866; --ag-cuerda: #E8D5A6; --ag-fondo: var(--bg); }

/* ── Agarres y accesorios (js/agarres.js) ── */
:root {
  --ag-metal-c: #E3EAF2; --ag-metal-o: #6D7C8E; --ag-goma-c: #6A7686; --ag-goma-o: #1E252E;
  --ag-cuerda-o: #A88F5C; --ag-tela: #2F3B4C; --ag-tela-c: #46566B; --ag-tela-o: #1B232E;
  --ag-fit: #3E7BD6; --ag-fit-c: #8DB8F2; --ag-fit-o: #1F4A8C;
  --ag-b1: #F2D35B; --ag-b2: #E8664F; --ag-b3: #3FAF6B; --ag-b4: #2C3440;
  --ag-fig: color-mix(in srgb, var(--txt2) 38%, transparent);
}
:root[data-tema="claro"] {
  --ag-metal-c: #F4F7FA; --ag-metal-o: #55657A; --ag-goma-c: #5B6676; --ag-goma-o: #1A2029;
  --ag-cuerda-o: #8A6F3A; --ag-tela: #34404F; --ag-tela-c: #4C5C70; --ag-tela-o: #1E2632;
  --ag-fit: #2F6AC4; --ag-fit-c: #7FAAE8; --ag-fit-o: #1B4280;
  --ag-b4: #1E242C;
  --ag-fig: color-mix(in srgb, var(--txt2) 30%, transparent);
}
.ag-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 0;
  font: inherit; font-size: 0.8125rem; font-weight: 750; line-height: 1.2; text-align: left; color: var(--txt);
  background: color-mix(in srgb, var(--ag-acento) 14%, var(--card2)); }
.ag-chip-eq { background: var(--card2); }
button.ag-chip { cursor: pointer; }
button.ag-chip::before { content: ''; position: absolute; inset: -7px -2px; }
button.ag-chip:active { transform: scale(.97); }
.ag-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ag-acento); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ag-ico-eq { width: 24px; height: 16px; stroke-width: 8; }
.ag-chip span { min-width: 0; overflow-wrap: anywhere; }
.alt-ag { display: flex; flex-wrap: wrap; gap: 6px; }
.alt-ag .ag-chip { min-height: 28px; padding: 4px 10px; font-size: 0.75rem; }

/* Hoja "Cómo agarrarlo" */
.ag-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); display: grid; gap: 10px; }
.ag-sec p { color: var(--txt); line-height: 1.45; }
.ag-h { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 800; }
.ag-h .ag-ico { width: 20px; height: 20px; }
.ag-h .ag-ico-eq { width: 30px; height: 20px; }
.ag-sec figure { margin: 0; padding: 8px; border-radius: 16px; background: var(--ag-fondo); text-align: center; }
.ag-sec figcaption { font-size: 0.8125rem; font-weight: 700; color: var(--txt2); margin-top: 2px; }
.ag-leyenda { color: var(--ag-acento); }
.ag-fila { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 12px; align-items: center; }
.ag-fila > div { display: grid; gap: 6px; min-width: 0; }
.ag-solo .ag-svg { max-width: 240px; margin: 0 auto; }
.ag-palmas { font-weight: 750; }
.ag-nota { font-size: 0.875rem; color: var(--txt2) !important; }
.ag-clave { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--ag-acento) 12%, var(--card2)); line-height: 1.45; }
.ag-foto .ag-svg { max-width: 300px; margin: 0 auto; }

/* Dibujos */
.ag-svg { display: block; width: 100%; height: auto; }
.ag-piel { fill: var(--ag-piel); stroke: var(--ag-borde); stroke-width: 2; }
.ag-borde-t, .ag-piel-t { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ag-borde-t { stroke: var(--ag-borde); }
.ag-piel-t { stroke: var(--ag-piel); }
.ag-borde-t.ag-pulgar { stroke: var(--ag-acento); }
.ag-linea { fill: none; stroke: var(--ag-borde); stroke-width: 2; stroke-linecap: round; }
.ag-barra { fill: var(--ag-metal); }
.ag-barra-l { fill: none; stroke: var(--ag-metal); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.ag-banda-l { fill: none; stroke: var(--ag-acento); stroke-width: 10; stroke-linecap: round; }
.ag-disco { fill: var(--ag-goma); stroke: var(--ag-metal); stroke-width: 2; }
.ag-mango { fill: var(--ag-goma); stroke: var(--ag-metal); stroke-width: 2; }
.ag-marco { fill: none; stroke: var(--ag-metal); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ag-cuerda { fill: none; stroke: var(--ag-cuerda); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.ag-tope { fill: var(--ag-goma); }
.ag-balon { fill: var(--ag-goma); stroke: var(--ag-metal); stroke-width: 2; }
.ag-piso { fill: var(--ag-metal); opacity: .6; }
.ag-raya { fill: none; stroke: var(--txt2); stroke-width: 2; stroke-dasharray: 4 4; }
.ag-txt { fill: var(--txt); font-size: 12px; font-weight: 800; }
/* Figura de cuerpo entero */
.ag-fig { fill: var(--ag-fig); }
.ag-fig-l { fill: none; stroke: var(--ag-fig); stroke-width: 13; stroke-linecap: round; }
.ag-figura .ag-borde-t { stroke-width: 11; }
.ag-figura .ag-piel-t { stroke-width: 7; }
.ag-antebrazo { fill: none; stroke: var(--ag-acento); stroke-width: 4; stroke-linecap: round; }
.ag-fbar { fill: none; stroke: var(--ag-metal); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ag-fdisco { fill: var(--ag-goma); stroke: var(--ag-metal); stroke-width: 1.5; }
.ag-fmango { fill: var(--ag-goma); stroke: var(--ag-metal); stroke-width: 1.5; }
.ag-fbalon { fill: var(--ag-goma); stroke: var(--ag-metal); stroke-width: 2; }
.ag-fbanda { fill: none; stroke: var(--ag-acento); stroke-width: 4; stroke-linecap: round; }
.ag-figura .ag-cuerda { stroke-width: 4; }
.ag-cable { fill: none; stroke: var(--txt2); stroke-width: 2; }
.ag-pared { fill: var(--ag-fig); }
/* Imagen de referencia del accesorio */
.ag-acc .ag-cable { stroke-width: 3; }
.ag-mosq { fill: none; stroke: var(--ag-metal-o); stroke-width: 3; stroke-linecap: round; }
.ag-metal-l { fill: none; stroke: var(--ag-metal); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.ag-metal-l.ag-fino { stroke-width: 5; }
.ag-goma-l { fill: none; stroke: var(--ag-goma); stroke-width: 16; stroke-linecap: round; }
.ag-goma-tex { fill: none; stroke: var(--ag-goma-o); stroke-width: 16; stroke-dasharray: 2 4; }
.ag-estria { fill: none; stroke: var(--ag-goma-o); stroke-width: 1.5; opacity: .55; }
.ag-cuerda-g { fill: none; stroke: var(--ag-cuerda); stroke-width: 14; stroke-linecap: round; }
.ag-cuerda-t { fill: none; stroke: var(--ag-cuerda-o); stroke-width: 14; stroke-dasharray: 3 5; opacity: .7; }
.ag-tela { fill: var(--ag-tela); stroke: var(--ag-tela-o); stroke-width: 2; }
.ag-tela-c { fill: var(--ag-tela-c); stroke: var(--ag-tela-o); stroke-width: 1.5; }
.ag-costura { fill: none; stroke: var(--ag-tela-c); stroke-width: 2; stroke-dasharray: 5 4; }
.ag-banda-f { fill: none; stroke-width: 9; }
.ag-sombra { fill: var(--ag-goma-o); opacity: .35; }
.ag-costura-b { fill: none; stroke: var(--ag-goma-o); stroke-width: 3; }
.ag-etiqueta { fill: var(--ag-acento); }
.ag-txt-e { fill: var(--bg); font-size: 14px; font-weight: 900; }
.ag-brillo { fill: var(--ag-metal-c); opacity: .3; }


/* Guía: cuatro filas que se deslizan */
.ag-sub { color: var(--txt2); font-size: 0.875rem; margin: -4px 0 4px; }
.ag-gtit { font-size: 1rem; font-weight: 800; margin: 16px 0 8px; }
.ag-carrusel { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }
.ag-carrusel::-webkit-scrollbar { display: none; }
.ag-t { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; display: grid; align-content: start; gap: 6px; padding: 14px; border-radius: 18px; background: var(--ag-fondo); }
.ag-t .ag-svg { max-height: 120px; margin-bottom: 4px; }
.ag-t b { font-size: 1rem; }
.ag-t p { font-size: 0.875rem; line-height: 1.4; color: var(--txt); }
.ag-t .ag-uso { color: var(--txt2); }
.ag-truco { background: color-mix(in srgb, var(--ag-acento) 12%, var(--ag-fondo)); }
.ag-num { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; color: var(--ag-acento); background: color-mix(in srgb, var(--ag-acento) 16%, transparent); }

/* Fin del descanso: el círculo se llena de verde y parpadea 2 veces (el iPhone no vibra) */
.descanso.listo #reloj-arco { stroke: var(--bien); stroke-dashoffset: 0 !important; transition: stroke .3s; }
.descanso.listo .reloj { animation: fin-descanso .45s ease-in-out 2; }
.descanso.listo .descanso-titulo { font-size: 24px; font-weight: 850; color: var(--bien); }
.descanso.listo [data-t="-15"], .descanso.listo [data-t="15"] { visibility: hidden; }
@keyframes fin-descanso { 50% { opacity: .35; transform: scale(1.04); } }

.estado-audio { margin-top: 10px; font-size: 14px; font-weight: 650; }
.estado-audio .ok { color: var(--bien); }
.estado-audio .mal { color: var(--acento); }

/* ── Unidad general y equivalencia ── */
:root { --disco-1: #E5484D; --disco-2: #3E7BD6; --disco-3: #F2C94C; --disco-4: #3FAF6B; --disco-5: #F2F4F7; --disco-6: #8B98A5; }
.seg button[aria-checked="true"] { background: var(--card2); color: var(--txt); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.unid-global { display: flex; align-items: center; gap: 6px; margin: 4px 2px 12px; }
.unid-global > span { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 14px; font-weight: 650; color: var(--txt2); }
.unid-global > span .ico { width: 18px; height: 18px; color: var(--acento2); }
.unid-global button { min-height: 44px; min-width: 56px; padding: 0 14px; border-radius: 12px; background: var(--card); color: var(--txt2); font-weight: 750; font-size: 15px; }
.unid-global button[aria-checked="true"] { background: color-mix(in srgb, var(--acento) 16%, var(--card)); color: var(--acento2); box-shadow: inset 0 0 0 1.5px var(--acento); }
.equiv-fila { display: flex; align-items: center; gap: 8px; margin: 2px 2px 0; }
.equiv { flex: 1; font-size: 13px; color: var(--txt2); font-variant-numeric: tabular-nums; min-height: 18px; }
.balanza { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--bg); color: var(--acento2); }
.balanza .ico { width: 22px; height: 22px; }

/* ── Calculadora ── */
.calc .seg { margin-bottom: 12px; }
.seg-3 button { font-size: 13px; }
.calc-in { display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: 18px; background: var(--bg); border: 2px solid var(--linea); }
.calc-in:focus-within { border-color: var(--acento); }
.calc-in input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; outline: 0; color: var(--txt); font: inherit; font-size: 44px; font-weight: 850; font-variant-numeric: tabular-nums; }
.calc-in.chico input { font-size: 28px; }
.calc-in span { font-size: 18px; font-weight: 700; color: var(--txt2); }
.calc-res { margin: 14px 2px 4px; font-size: 20px; font-weight: 650; color: var(--txt2); }
.calc-res b { color: var(--txt); font-size: 30px; font-weight: 850; }
.calc-res small { display: block; font-size: 14px; color: var(--txt2); font-weight: 600; margin-top: 4px; }
.calc-sub { margin: 16px 2px 8px; font-size: 13px; font-weight: 700; color: var(--txt2); text-transform: uppercase; letter-spacing: .06em; }
.rapidos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rapidos button { min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--card2); font-weight: 700; font-size: 15px; }
.rapidos button:active, .discos-btn button:active { transform: scale(.95); }
.calc-tabla { margin-top: 12px; border-radius: 14px; background: var(--bg); }
.calc-tabla summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; font-weight: 700; cursor: pointer; list-style: none; }
.calc-tabla summary::-webkit-details-marker { display: none; }
.calc-tabla[open] summary .ico { transform: rotate(180deg); }
.tablas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px 12px; }
.tablas table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.tablas th { text-align: left; color: var(--txt2); font-size: 13px; padding: 6px 4px; }
.tablas td { padding: 6px 4px; border-top: 1px solid var(--linea); }
.tablas td + td { color: var(--acento2); font-weight: 700; }
.calc-propia { display: flex; align-items: center; gap: 10px; margin: -4px 0 8px; }
.calc-propia span { font-size: 14px; color: var(--txt2); }
.calc-propia input { width: 96px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--linea); background: var(--bg); color: var(--txt); font: inherit; font-size: 18px; font-weight: 750; }
.discos-btn { display: flex; flex-wrap: wrap; gap: 8px; }
.discos-btn button { min-width: 52px; min-height: 52px; padding: 0 10px; border-radius: 50%; font-weight: 850; font-size: 15px; color: var(--bg); background: var(--dc); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18); }
.calc-svg { display: block; width: 100%; height: auto; margin-top: 14px; }
.calc-svg .b-barra { fill: var(--txt2); }
.calc-svg .b-agarre { fill: var(--neutro); }
.calc-svg .b-tope { fill: var(--txt); }
.calc-meta { margin: 10px 2px 0; font-size: 15px; line-height: 1.45; }
.tabs button span { white-space: nowrap; }

/* ── Poses fijas (Cómo se hace) ── */
.pasos-vista { margin: 10px 0 12px; }
.poses { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin: 10px -16px 0; padding: 0 16px 4px; scroll-padding: 0 16px; }
.poses::-webkit-scrollbar { display: none; }
.pose { position: relative; flex: 0 0 84%; scroll-snap-align: start; margin: 0; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 90% at 50% 15%, var(--video-bg), var(--video-bg2)); }
.pose figcaption { display: grid; gap: 4px; padding: 4px 14px 14px; }
.pose figcaption b { font-size: 16px; line-height: 1.3; }
.pose-n { position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 850; background: var(--acento); color: var(--bg); }
.cuida { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 750; color: var(--acento); padding: 3px 10px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--acento) 14%, transparent); }
.cuida::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.poses-ayuda { font-size: 13px; color: var(--txt2); margin: 8px 2px 0; }
.si-no { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.si-no figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 2px var(--bc); }
.si-no .si { --bc: color-mix(in srgb, var(--bien) 55%, transparent); }
.si-no .no { --bc: color-mix(in srgb, var(--acento) 55%, transparent); }
.si-no figcaption { display: grid; gap: 2px; padding: 0 10px 12px; font-size: 13px; line-height: 1.35; color: var(--txt2); }
.si-no figcaption b { font-size: 15px; color: var(--txt); }
.pose .video-svg .marca, .si-no .video-svg .marca { fill: none; stroke: var(--acento); stroke-width: 2; stroke-dasharray: 3 3; }
.si-no .si .video-svg .marca { stroke: var(--bien); }
.pose .video-svg .flecha { stroke: var(--acento2); stroke-width: 3; stroke-linecap: round; }
.pose .video-svg .flecha-p { fill: var(--acento2); }

/* Vuelta a la calma */
.enfria { margin-top: 4px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bien) 40%, transparent); }
.enfria .cal-lista li::before { color: var(--bien); }

/* Día que faltaste */
.falta { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acento) 45%, transparent); }
.falta-cab { display: flex; gap: 12px; align-items: flex-start; }
.falta-cab > .ico { flex: none; width: 24px; height: 24px; color: var(--acento2); margin-top: 2px; }
.falta-cab div { display: grid; gap: 2px; }
.falta-cab b { font-size: 17px; font-weight: 800; }
.falta-cab small, .falta-fila small { color: var(--txt2); font-size: 13px; }
.falta-fila { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--bg); }
.falta-fila > span { display: grid; gap: 2px; min-width: 0; }
.falta-fila .btn-chip { min-height: 44px; }
.falta-fila .link { grid-column: 1 / -1; justify-self: start; font-size: 13px; color: var(--txt2); min-height: 32px; }
.recupera { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 750; color: var(--acento2); background: color-mix(in srgb, var(--acento) 14%, transparent); }
.recupera .ico { width: 15px; height: 15px; }
.dia-op.reco { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bien) 50%, transparent); }
.dia-op.reco .dia-hoy { background: color-mix(in srgb, var(--bien) 18%, transparent); color: var(--bien); }

/* Organiza tu semana */
.sem-lista { display: grid; gap: 6px; margin: 4px 0 14px; }
.sem-dia { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--bg); text-align: left; border: 2px solid transparent; box-shadow: inset 4px 0 0 var(--c); transition: border-color .2s, transform .15s; }
.sem-dia:active { transform: scale(.99); }
.sem-dia.sel { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, var(--bg)); }
.sem-dia.fijo { opacity: .55; }
.sem-dia.hecho { opacity: .75; }
.sem-dia.hoy { border-color: color-mix(in srgb, var(--acento2) 45%, transparent); }
.sem-dia.sel.hoy { border-color: var(--acento); }
.sem-fecha { display: grid; justify-items: center; line-height: 1.1; }
.sem-fecha b { font-size: 14px; font-weight: 800; }
.sem-fecha small { font-size: 18px; font-weight: 850; color: var(--txt2); }
.sem-rut { display: grid; gap: 2px; min-width: 0; }
.sem-rut b { font-size: 16px; font-weight: 800; color: var(--txt); }
.sem-rut small { font-size: 13px; color: var(--txt2); }
.sem-rut em { font-style: normal; color: var(--acento2); font-weight: 700; }
.sem-est { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--card2); color: var(--txt2); white-space: nowrap; }
.sem-est .ico { width: 13px; height: 13px; }
.sem-dia.hecho .sem-est { color: var(--bien); }
.sem-dia.falta .sem-est { color: var(--acento); background: color-mix(in srgb, var(--acento) 14%, transparent); }
.sem-dia.hoy .sem-est { color: #fff; background: var(--grad); }
#sem .btn-sec { margin-top: 10px; }
#sem .btn-pri { margin-top: 14px; width: 100%; }
#sem .peq { margin: 6px 2px 0; }

/* Semana visible */
.ciclo-txt { display: grid; gap: 2px; }
.sem-grande { font-size: 20px; font-weight: 850; color: var(--txt); letter-spacing: -.01em; }
.ciclo-txt small { font-size: 13px; color: var(--acento2); font-weight: 700; }

/* Clave del ejercicio (Semana B) */
.tip-ej { display: flex; gap: 8px; align-items: flex-start; margin: 0 2px 10px; font-size: 14px; color: var(--txt); }
.tip-ej .ico { flex: none; width: 16px; height: 16px; color: var(--bien); margin-top: 2px; }

/* Para sentir la espalda */
.sentir { margin: 12px 2px 0; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.sentir h4 { display: flex; align-items: center; gap: 6px; font-size: 15px; margin: 0 0 6px; }
.sentir h4 .ico { width: 16px; height: 16px; color: var(--acento2); }
.sentir-l { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--txt2); line-height: 1.4; }
.sentir-l b { color: var(--txt); }
.no-senti { margin-top: 10px; }
.ej:not(.completa) .no-senti { display: none; }
.no-sentida { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--acento) 12%, transparent); font-size: 14px; }
.no-sentida ol { margin: 6px 0 4px; padding-left: 18px; display: grid; gap: 3px; }

/* "No fui" / "Sí fui" en el aviso de días sin anotar */
.falta-btns { display: flex; gap: 6px; }
.falta-btns .btn-chip { min-height: 44px; }
.falta .btn-sec { margin-top: 12px; }
.hecho-mano { margin-bottom: 12px; }
.hecho-mano .ico { color: var(--bien); }
.falta-fila { grid-template-columns: 1fr; }

.aj-sub { font-size: 15px; margin: 14px 0 4px; }

/* Hice / No hice */
.hice-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 2px 0; }
.btn-hice, .btn-nohice { min-height: 52px; border-radius: 16px; font-weight: 800; font-size: 16px; }
.btn-hice { background: color-mix(in srgb, var(--bien) 18%, var(--card2)); color: var(--txt); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bien) 55%, transparent); }
.btn-nohice { background: var(--card2); color: var(--txt2); }
.btn-hice:active, .btn-nohice:active { transform: scale(.97); }
.reg-res { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 2px 0; padding: 10px 12px; border-radius: 14px; font-size: 14px; }
.reg-res > span { flex: 1 1 60%; min-width: 0; }
.reg-res .ico { width: 18px; height: 18px; flex: none; }
.reg-res.hecho { background: color-mix(in srgb, var(--bien) 14%, transparent); }
.reg-res.hecho .ico { color: var(--bien); }
.reg-res.no { background: var(--bg); color: var(--txt2); }
.reg-res .link { min-height: 44px; }
.ej.reg-hecho { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bien) 60%, transparent); }
.ej.reg-hecho .ej-num { background: var(--bien); color: var(--bg); }
.ej.reg-no { opacity: .6; filter: grayscale(.8); }
.ej.reg-no .ej-n { text-decoration: line-through; }
.reg-ajuste { margin: 12px 2px 0; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--acento) 12%, transparent); font-size: 14px; display: grid; gap: 8px; }
.reg-ajuste > p { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.reg-ajuste .ico { width: 18px; height: 18px; flex: none; color: var(--acento2); }
.reg-ajuste .btn-sec { margin: 0; }
/* Registro rápido */
.reg-filas { display: grid; gap: 8px; margin: 12px 0; }
.reg-fila { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: var(--bg); flex-wrap: wrap; }
.reg-n { width: 28px; text-align: center; color: var(--acento2); font-weight: 850; }
.reg-ctl { flex: 1 1 140px; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.reg-ctl button { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--card2); display: grid; place-items: center; }
.reg-ctl button .ico { width: 20px; height: 20px; }
.reg-ctl span { display: grid; justify-items: center; line-height: 1.1; }
.reg-ctl span b { font-size: 22px; font-weight: 850; font-variant-numeric: tabular-nums; }
.reg-ctl span small { font-size: 12px; color: var(--txt2); }
.motivos { display: grid; gap: 8px; margin-top: 10px; }
.motivos .btn-sec, .sin-maquina .btn-sec { margin: 0; }
.sin-maquina { display: grid; gap: 10px; margin-top: 10px; }
/* Terminé el día */
.fin-barra { position: sticky; bottom: calc(var(--tabs-h) + var(--sa-b) + 10px); z-index: 5; margin: 6px 0 14px; }
body.con-mini .fin-barra { bottom: calc(var(--tabs-h) + var(--sa-b) + 74px); }
.btn-fin { box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.fin-dia { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; }
.fin-dia > .ico { width: 28px; height: 28px; color: #FFD43B; }
.fin-dia > div:not(.fila-2) { display: grid; gap: 2px; }
.fin-dia b { font-size: 18px; font-weight: 850; }
.fin-dia small { color: var(--txt2); font-size: 14px; }
.fin-dia .fila-2 { grid-column: 1 / -1; }
.res-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.res-tiles div { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; background: var(--bg); }
.res-tiles b { font-size: 26px; font-weight: 850; }
.res-tiles b small { font-size: 14px; color: var(--txt2); }
.res-tiles span { font-size: 13px; color: var(--txt2); }
.res-pesos { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 6px; }
.res-pesos li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); font-size: 14px; }
.res-pesos .sube { color: var(--bien); }
.res-pesos .baja { color: var(--acento); }
.res-frase { margin: 6px 2px 14px; font-weight: 700; }
.editando { margin-bottom: 14px; }
.cal-ayuda { margin: 8px 2px 0; }

.alt-vid { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--acento2); }
.alt-vid .ico { width: 14px; height: 14px; }
.alts .alt-video { margin: 4px 0 8px; }

/* ── v20: registro por serie, aproximación, cronómetro y bloques del día ── */
.sfilas { display: grid; gap: 8px; margin: 6px 0 4px; }
.sfila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-radius: 16px; background: var(--bg); }
.sfila .serie { width: 46px; height: 46px; font-size: 17px; flex: none; }
.sfila .serie-ok { width: 22px; height: 22px; }
.sctl { flex: 1 1 220px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.nctl { flex: 1 1 0; min-width: 0; display: flex; align-items: center; height: 46px; border-radius: 14px; background: var(--card2); }
.nctl button { width: 38px; height: 46px; flex: none; display: grid; place-items: center; color: var(--txt); border-radius: 14px; }
.nctl button:active { background: var(--linea); }
.nctl button .ico { width: 18px; height: 18px; }
.nctl label { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.nctl input { width: 100%; min-width: 0; text-align: center; background: none; border: 0; outline: 0; color: var(--txt); font-size: 19px; font-weight: 850; font-variant-numeric: tabular-nums; padding: 0; }
.nctl input::placeholder { color: #4A5664; }
.nctl label:focus-within { box-shadow: inset 0 -2px 0 var(--acento); }
.nctl small { font-size: 10px; color: var(--txt2); font-weight: 700; margin-top: 2px; }
.sx { color: var(--txt2); font-weight: 800; flex: none; }
.sfila.ok .nctl { background: color-mix(in srgb, var(--c) 14%, var(--card2)); }
.sens { flex-basis: 100%; display: flex; gap: 6px; padding-left: 54px; }
.sens button { flex: 1; min-height: 36px; border-radius: 10px; background: var(--card2); color: var(--txt2); font-size: 13px; font-weight: 700; }
.sens button.on { color: var(--txt); background: color-mix(in srgb, var(--c) 20%, var(--card2)); box-shadow: inset 0 0 0 1.5px var(--c); }
.sfilas-acc { display: flex; justify-content: space-between; gap: 8px; margin: 6px 2px 8px; }
.sfilas-acc .link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; min-height: 40px; margin: 0; }
.sfilas-acc .link .ico { width: 16px; height: 16px; }
.sfilas-acc .link[disabled] { opacity: .35; }

.aprox { display: grid; gap: 6px; margin: 8px 0 4px; }
.aprox-f { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; padding: 8px 12px; border-radius: 14px; border: 1.5px dashed var(--linea); color: var(--txt2); text-align: left; }
.aprox-tag { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--card2); color: var(--txt2); }
.aprox-f b { flex: 1; color: #AEB9C4; font-weight: 750; font-variant-numeric: tabular-nums; }
.aprox-f small { font-size: 12px; }
.aprox-f .ico { width: 18px; height: 18px; opacity: .25; }
.aprox-f.hecha { border-style: solid; background: var(--bg); }
.aprox-f.hecha .ico { opacity: 1; }

.sug { display: flex; gap: 10px; align-items: flex-start; margin: 8px 2px 4px; padding: 10px 12px; border-radius: 14px; background: rgba(46, 212, 122, .1); color: #BFF3D6; font-size: 14px; line-height: 1.4; }
.sug .ico { flex: none; width: 18px; height: 18px; color: var(--bien); margin-top: 1px; }
.sug b { color: var(--txt); }

.nota-ej { margin: 10px 2px 0; }
.nota-ej summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--txt2); font-weight: 700; font-size: 14px; cursor: pointer; }
.nota-ej summary::-webkit-details-marker { display: none; }
.nota-ej summary .ico { width: 16px; height: 16px; }
.nota-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chip-n { min-height: 38px; padding: 0 12px; border-radius: 999px; background: var(--bg); color: var(--txt2); font-size: 13px; font-weight: 700; text-align: left; }
.chip-n.on { color: var(--txt); background: rgba(255, 159, 67, .16); box-shadow: inset 0 0 0 1.5px var(--acento2); }
.nota-txt { width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--bg); border: 1.5px solid var(--linea); color: var(--txt); font-size: 16px; }
.nota-txt:focus { outline: 0; border-color: var(--acento); }

.crono { position: sticky; top: calc(var(--sa-t) + 8px); z-index: 4; width: fit-content; margin: 0 0 10px auto; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(26, 33, 41, .94); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); font-size: 14px; font-variant-numeric: tabular-nums; }
.crono .ico { width: 16px; height: 16px; color: var(--acento2); }
.crono b { font-weight: 850; }
.crono small { color: var(--txt2); font-size: 12px; }
.hero-dur { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 14px; color: var(--txt2); }
.hero-dur .ico { width: 15px; height: 15px; flex: none; }
.hero-dur b { color: var(--txt); }
.hoy-trab { display: block; margin-top: 6px; }
.tag.zona { --c: #7FB2FF; }

.cal-paso { margin: 0 18px 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.cal-paso-cab { display: flex; align-items: center; gap: 10px; }
.cal-paso-cab > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cal-paso-cab b { font-size: 15px; }
.cal-paso-cab small { color: var(--txt2); font-size: 13px; }
.cal-paso .cal-lista { padding: 10px 0 2px; }
.cal-paso .cal-lista li { background: var(--card); }
.calent .paso-check { --c: var(--bien); width: 44px; height: 44px; }
.cal-paso.hecho .cal-paso-cab > span, .cal-lista li.hecho > span { opacity: .6; }
.extra-op { padding: 14px 18px; }
.extra-cab { display: flex; align-items: center; gap: 12px; }
.extra-cab > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.extra-cab small { color: var(--txt2); font-size: 13px; }
.core-lista { padding: 8px 0 4px; }
.alt-t { color: var(--txt2); font-size: 12px; }

.pesos-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chip-p { min-width: 48px; min-height: 40px; padding: 0 10px; border-radius: 12px; background: var(--bg); color: var(--txt2); font-weight: 750; font-variant-numeric: tabular-nums; }
.chip-p.on { color: var(--acento2); background: rgba(255, 107, 74, .14); box-shadow: inset 0 0 0 1.5px var(--acento); }