@font-face {
  font-family: "Shantell Sans";
  src: url("fonts/shantell-sans-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* una sola escala de grises */
  --g-0: #fbfcfd;  /* pizarra */
  --g-1: #f1f3f6;  /* huecos */
  --g-2: #e4e7ec;  /* líneas finas, trazos fantasma */
  --g-3: #cdd2da;  /* bordes */
  --g-4: #a9b0bb;  /* deshabilitado */
  --g-5: #6b7280;  /* texto secundario */
  --g-6: #4b5260;  /* rótulos */
  --g-9: #16191e;  /* texto */

  /* tintas de fibrón, una por día */
  --ink-1: #cc2f27;
  --ink-2: #1e4fcf;
  --ink-3: #167a43;
  --ink: var(--ink-1);
  --wash: rgba(204, 47, 39, .08);

  --hand: "Shantell Sans", "Marker Felt", ui-rounded, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  /* escala de 4 pasos */
  --t-s: 13px;
  --t-m: 16px;
  --t-l: 20px;
  --t-xl: 44px;

  --tabbar-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
.d1 { --ink: var(--ink-1); --wash: rgba(204, 47, 39, .08); }
.d2 { --ink: var(--ink-2); --wash: rgba(30, 79, 207, .08); }
.d3 { --ink: var(--ink-3); --wash: rgba(22, 122, 67, .09); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--g-0); color: var(--g-9); }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font: var(--t-m)/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  caret-color: var(--ink);
}
::selection { background: var(--wash); color: var(--g-9); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
svg { display: block; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }

#view {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--safe-t) 20px calc(var(--tabbar-h) + var(--safe-b) + 40px);
}

/* ---------- Cabecera del día ---------- */
.day { padding: 28px 0 8px; }
.day-title { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.day-title h1 { font: 800 var(--t-xl)/1 var(--hand); letter-spacing: -.02em; }
.day-title svg { width: 22px; height: 22px; margin-top: 6px; stroke: var(--g-5); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.day-sub { font-size: 17px; color: var(--g-6); margin-top: 6px; }
.day-sub b { color: var(--ink); font-weight: 650; }
.day-week { font-size: 15px; color: var(--g-5); margin-top: 2px; }
.day-week b { color: var(--ink); font-weight: 650; }

.tally { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.tally svg { height: 36px; flex: none; overflow: visible; }
.tally path { fill: none; stroke-linecap: round; stroke-width: 3.6; }
.tally .ghost { stroke: var(--g-2); }
.tally .mark { stroke: var(--ink); transition: stroke-dashoffset .7s var(--ease); }
.tally p { font-size: 15px; color: var(--g-5); line-height: 1.3; }
.tally p b { display: block; font-size: var(--t-l); color: var(--g-9); font-weight: 700; }
.meta { font-size: var(--t-s); color: var(--g-5); margin-top: 12px; }

/* ---------- Bloques ---------- */
.group { font-size: 15px; font-weight: 650; color: var(--g-6); margin: 34px 0 6px; }

.row-check { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--g-2); }
.row-check .txt { flex: 1; min-width: 0; }
.row-check .lbl { font-weight: 650; }
.row-check .sub { font-size: 14px; color: var(--g-5); }

.ex { border-bottom: 1px solid var(--g-2); }
.ex-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0 12px; width: 100%; text-align: left; cursor: pointer; }
.ex-head .txt { flex: 1; min-width: 0; }
.ex-name { font-size: 17px; font-weight: 650; line-height: 1.25; }
.ex-meta { font-size: 14px; color: var(--g-5); margin-top: 3px; }
.ex.is-current .ex-name { font-size: var(--t-l); font-weight: 750; color: var(--ink); letter-spacing: -.01em; }
.underline { display: block; width: min(220px, 70%); height: 8px; margin-top: 2px; overflow: visible; }
.underline path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.ex.is-done .ex-head { align-items: center; padding: 12px 0; }
.ex.is-done .ex-name { color: var(--g-5); font-weight: 600; }
.ex.is-done .ex-meta { margin: 0; }
.ex-done-mark { width: 28px; height: 28px; flex: none; }
.ex-done-mark path { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

.video {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -4px -6px 0 0;
  border-radius: 50%; color: var(--g-6); text-decoration: none;
}
.video svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.video:active { background: var(--g-1); }

.sets { padding-bottom: 6px; }
.set { display: grid; grid-template-columns: 22px minmax(64px, auto) 1fr 48px; align-items: center; gap: 10px; padding: 7px 0; }
.set-n { font-size: var(--t-s); font-weight: 700; color: var(--g-5); text-align: center; }
.set-reps { font-size: 14px; color: var(--g-5); white-space: nowrap; }
.set-reps b { font-size: var(--t-l); color: var(--g-9); font-weight: 700; }

.kg { display: flex; align-items: center; height: 46px; border-radius: 14px; background: var(--g-1); justify-self: end; width: 100%; max-width: 172px; }
.kg button { flex: none; width: 42px; height: 46px; display: grid; place-items: center; color: var(--g-6); }
.kg button svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.kg button:active { color: var(--ink); }
.kg label { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 3px; min-width: 0; }
.kg input {
  width: 100%; min-width: 0; max-width: 56px; background: none; border: 0; padding: 0; outline: none;
  color: var(--g-9); text-align: right; font: 700 var(--t-l)/1 var(--sans); font-variant-numeric: tabular-nums;
}
.kg input::placeholder { color: var(--g-5); font-weight: 600; opacity: 1; }
.kg small { font-size: 12px; color: var(--g-5); }
.kg .up { width: 12px; height: 12px; align-self: center; flex: none; stroke: var(--ink); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kg-empty { justify-self: end; font-size: 14px; color: var(--g-5); padding-right: 6px; }

.check {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--g-3);
  display: grid; place-items: center; transition: border-color .2s, transform .12s var(--ease);
}
.check:active { transform: scale(.92); }
.check svg { width: 34px; height: 34px; overflow: visible; }
.check path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.set.done .check { border-color: transparent; }
.set.done .set-reps b, .set.done .kg input { color: var(--g-6); }
.draw path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .42s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.ex-last { font-size: var(--t-s); color: var(--g-5); padding: 4px 0 14px 32px; }

.round { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--g-3); display: grid; place-items: center; }
.round svg { width: 26px; height: 26px; overflow: visible; }
.round path { fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.on .round { border-color: transparent; }

/* ---------- Botones ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px;
  border-radius: 14px; font-weight: 700; font-size: 17px; background: var(--ink); color: #fff;
}
.btn.ghost { background: var(--g-1); color: var(--g-9); }
.btn.danger { background: none; color: var(--ink-1); border: 1px solid var(--g-3); }
.btn + .btn { margin-top: 10px; }
.btn:active { opacity: .85; }
.finish { margin-top: 28px; }

.complete { margin-top: 30px; text-align: center; padding: 8px 0 4px; }
.complete svg { width: 64px; height: 64px; margin: 0 auto 6px; overflow: visible; }
.complete svg path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.complete h2 { font: 800 28px/1.1 var(--hand); }
.complete p { color: var(--g-5); margin: 6px 0 18px; }

/* ---------- Selector semana/día ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.backdrop { position: absolute; inset: 0; background: rgba(22, 25, 30, .38); animation: fade .2s; }
.panel {
  position: relative; width: 100%; max-width: 560px; background: var(--g-0);
  border-radius: 22px 22px 0 0; padding: 10px 20px calc(var(--safe-b) + 22px);
  box-shadow: 0 -8px 30px rgba(22, 25, 30, .16); animation: up .32s var(--ease);
}
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--g-3); margin: 0 auto 16px; }
.panel h2 { font: 800 26px/1.1 var(--hand); }
.panel .sub { color: var(--g-5); font-size: 15px; margin: 4px 0 18px; }
.grid { display: grid; grid-template-columns: 82px repeat(3, 1fr); gap: 8px; align-items: center; }
.grid .wk { font-size: 15px; font-weight: 650; color: var(--g-6); }
.grid .dh { font-size: var(--t-s); font-weight: 700; text-align: center; color: var(--ink); }
.cell {
  height: 54px; border-radius: 14px; background: var(--g-1); border: 2px solid transparent;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--g-6);
}
.cell svg { width: 30px; height: 30px; overflow: visible; }
.cell path { fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.cell.is-done { background: var(--wash); }
.cell.next { border-color: var(--ink); color: var(--ink); }
.cell.current { box-shadow: 0 0 0 2px var(--g-0), 0 0 0 4px var(--g-9); }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Progreso ---------- */
.page-title { font: 800 var(--t-xl)/1 var(--hand); padding: 28px 0 6px; letter-spacing: -.02em; }
.lede { font-size: 17px; color: var(--g-6); }
.lede b { color: var(--g-9); }

.board { margin-top: 22px; }
.wk-row { display: grid; grid-template-columns: 1fr repeat(3, 40px); align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--g-2); color: var(--g-5); font-size: 15px; }
.wk-row.now { padding: 14px 0; color: var(--g-9); font-weight: 700; font-size: var(--t-l); }
.wk-row .m { width: 40px; height: 28px; display: grid; place-items: center; }
.wk-row.now .m { height: 40px; }
.wk-row .m svg { width: 24px; height: 24px; overflow: visible; }
.wk-row.now .m svg { width: 34px; height: 34px; }
.wk-row .m path { fill: none; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.wk-row .m .ghost { stroke: var(--g-2); }
.wk-row .m .ink { stroke: var(--ink); }
.wk-row .pct { font-size: 12px; font-weight: 700; color: var(--g-6); }
.wk-head { display: grid; grid-template-columns: 1fr repeat(3, 40px); gap: 8px; font-size: 12px; font-weight: 700; padding-bottom: 4px; }
.wk-head span:nth-child(2) { color: var(--ink-1); text-align: center; }
.wk-head span:nth-child(3) { color: var(--ink-2); text-align: center; }
.wk-head span:nth-child(4) { color: var(--ink-3); text-align: center; }

.ex-prog { display: block; width: 100%; text-align: left; padding: 13px 0; border-bottom: 1px solid var(--g-2); }
.ex-prog .line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ex-prog .nm { font-weight: 600; }
.ex-prog .vl { white-space: nowrap; color: var(--g-5); font-size: 14px; }
.ex-prog .vl b { color: var(--g-9); font-size: var(--t-m); }
.ex-prog .delta { color: var(--ink); font-weight: 700; margin-left: 6px; }
.ex-prog[aria-expanded="true"] .nm { color: var(--ink); }

.chart-wrap { margin-top: 12px; position: relative; }
.chart { width: 100%; height: 190px; touch-action: pan-y; }
.chart .grid-l { stroke: var(--g-2); stroke-width: 1; }
.chart .axis-t { fill: var(--g-5); font-size: 11px; font-family: var(--sans); }
.chart .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .pt { fill: var(--ink); stroke: var(--g-0); stroke-width: 2; }
.chart .cross { stroke: var(--g-4); stroke-width: 1; stroke-dasharray: 3 3; }
.tip {
  position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  background: var(--g-0); border: 1px solid var(--g-3); border-radius: 10px; padding: 5px 9px;
  font-size: 12px; color: var(--g-5); box-shadow: 0 2px 8px rgba(22, 25, 30, .08);
}
.tip b { color: var(--g-9); font-size: 14px; }
.empty { color: var(--g-5); font-size: 15px; padding: 10px 0; }

/* ---------- Ajustes ---------- */
.list .item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--g-2); }
.list .item span { color: var(--g-5); font-size: 15px; flex: none; }
.list .item b { font-weight: 600; text-align: right; font-size: 15px; }
.seg-ctl { display: flex; background: var(--g-1); border-radius: 12px; padding: 3px; flex: none; }
.seg-ctl button { padding: 8px 12px; border-radius: 9px; font-size: 14px; font-weight: 650; color: var(--g-6); }
.seg-ctl button.on { background: var(--g-0); color: var(--g-9); box-shadow: 0 1px 3px rgba(22, 25, 30, .14); }
.note { font-size: var(--t-s); color: var(--g-5); margin-top: 10px; line-height: 1.5; }
.section { margin-top: 30px; }
.section > .btn:first-of-type { margin-top: 10px; }

/* ---------- Barra de pestañas ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center;
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: rgba(251, 252, 253, .92); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--g-2);
}
.tabbar button { flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--g-5); font-size: 11px; font-weight: 650; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button.active { color: var(--ink); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); z-index: 60;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; white-space: nowrap;
  background: var(--g-9); color: var(--g-0); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 999px;
  transition: opacity .2s, transform .3s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

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