/* GymBro · marcador de pabellón. Fondo claro de pared, panel negro para los números que importan,
   ámbar solo para la serie en curso. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700.woff2) format("woff2"); }

:root {
  --wall: #eceee9;
  --card: #ffffff;
  --sunk: #e3e6df;
  --line: #d3d6ce;
  --ink: #1b1c1a;
  --mute: #5b5e58;
  --panel: #151614;
  --panel-line: #2d2f2b;
  --panel-ink: #f2f2ee;
  --panel-mute: #a6a9a2;
  --amber: #ffb21a;
  --good: #2b7a4b;
  --warn: #9a5f00;
  --bad: #b8321f;
  /* Línea fija de cada día de rutina: A, B, C… */
  --l0: #1f5fbf; --l1: #6a4bb5; --l2: #0f6f78; --l3: #8a5a12; --l4: #3b4a5a; --l5: #9b2c6e;
  /* Zonas de FC */
  --z1: #a3a8a0; --z2: #3d7fd1; --z3: #2f9e6a; --z4: #c2571a; --z5: #b3261e;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --r: 6px;
  --gap: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--wall); color: var(--ink);
  font: 400 16px/1.45 "Barlow", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--ink); color: #fff; }
h1, h2, h3 { margin: 0; font-family: var(--cond); font-weight: 700; line-height: 1.1; text-wrap: balance; }
h1 { font-size: 32px; letter-spacing: -0.01em; }
h2 { font-size: 22px; }
h3 { font-size: 19px; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--l0); outline-offset: 2px; border-radius: 3px; }
.icon { flex: none; }
.muted { color: var(--mute); }
.small { font-size: 14px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.label {
  font: 600 13px/1.2 var(--cond); letter-spacing: 0.09em; text-transform: uppercase; color: var(--mute);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- Estructura ---------- */
main { max-width: 1040px; margin: 0 auto; padding: 16px 16px 104px; }
.auth-main { min-height: 100vh; display: grid; place-items: center; padding-bottom: 16px; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: var(--panel); color: var(--panel-ink);
}
.brand { font: 700 22px/1 var(--cond); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; }
.tabs { display: none; gap: 4px; }
.tabs a {
  padding: 8px 12px; border-radius: 4px; text-decoration: none; color: var(--panel-mute);
  font: 600 15px var(--cond); letter-spacing: 0.08em; text-transform: uppercase;
}
.tabs a:hover { color: var(--panel-ink); }
.tabs a[aria-current] { color: var(--panel-ink); background: var(--panel-line); }
.sync, .session { margin-left: auto; }
.session { display: flex; align-items: center; gap: 10px; font: 600 15px var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: var(--panel-mute); }
.topbar .ghost { color: var(--panel-ink); border-color: var(--panel-line); }
.topbar .ghost:hover:not(:disabled) { background: var(--panel-line); }
[data-syncing] .icon { animation: spin 1s steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.bottomnav {
  position: fixed; inset: auto 0 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a {
  display: grid; justify-items: center; gap: 2px; padding: 8px 0 10px; text-decoration: none; color: var(--mute);
  font: 600 12px var(--cond); letter-spacing: 0.08em; text-transform: uppercase;
}
.bottomnav a[aria-current] { color: var(--ink); box-shadow: inset 0 3px 0 var(--ink); }

@media (min-width: 900px) {
  .tabs { display: flex; }
  .bottomnav { display: none; }
  main { padding: 24px 24px 64px; }
  h1 { font-size: 40px; }
}

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.page-head .meta { margin-top: 4px; }
.pager-nav { display: flex; align-items: center; gap: 6px; }
.subnav { display: flex; gap: 4px; margin: 0 0 16px; padding: 4px; background: var(--sunk); border-radius: var(--r); width: fit-content; max-width: 100%; overflow-x: auto; }
.subnav a {
  padding: 8px 14px; border-radius: 4px; text-decoration: none; white-space: nowrap;
  font: 600 14px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
}
.subnav a[aria-current] { background: var(--card); color: var(--ink); }
.section { margin: 0 0 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.card { background: var(--card); border-radius: var(--r); padding: 16px; margin-bottom: 16px; }
.card > h2 { margin-bottom: 12px; }
.narrow { max-width: 560px; }
.grid-2 { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Controles ---------- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--ink); border-radius: 4px; background: var(--ink); color: #fff; cursor: pointer;
  font: 600 16px var(--cond); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
button:hover:not(:disabled), .btn:hover { background: #33352f; border-color: #33352f; }
button:disabled { opacity: 0.45; cursor: default; }
.secondary { background: transparent; color: var(--ink); }
.secondary:hover:not(:disabled) { background: var(--sunk) !important; border-color: var(--ink) !important; }
.ghost { background: transparent; color: inherit; border-color: transparent; }
.ghost:hover:not(:disabled) { background: var(--sunk) !important; border-color: transparent !important; }
.danger { color: var(--bad); }
.btn.small, button.small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.icon-btn {
  min-height: 40px; min-width: 40px; padding: 0; background: transparent; color: var(--ink); border-color: transparent;
}
.icon-btn:hover:not(:disabled) { background: var(--sunk) !important; border-color: transparent !important; }
.icon-btn.danger { color: var(--bad); }
.text-btn {
  min-height: 40px; padding: 0 4px; background: none; border: 0; color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; font: 600 16px "Barlow", sans-serif; letter-spacing: 0; text-transform: none;
}
.text-btn:hover:not(:disabled) { background: none !important; text-decoration-thickness: 2px; }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.row-actions form { margin: 0; }

input, select {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--card); color: var(--ink); font: 500 16px "Barlow", sans-serif; caret-color: var(--ink);
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input:focus, select:focus { outline: 2px solid var(--l0); outline-offset: 0; border-color: var(--l0); }
input::placeholder { color: #7a7d76; }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--ink); }
label { display: grid; gap: 4px; font-weight: 500; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin: 0; }
legend { padding: 0 6px; font-weight: 600; }
.stack { display: grid; gap: 12px; }
.form { display: grid; gap: 14px; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.check-grid { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
label.check { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 400; }

/* Avisos */
.toast {
  position: fixed; left: 50%; bottom: 84px; z-index: 30; transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 12px 16px; border-radius: var(--r); background: var(--panel); color: var(--panel-ink);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); font-weight: 500;
}
.toast.hide { display: none; }
@media (min-width: 900px) { .toast { bottom: 24px; } }
.notice { padding: 12px 14px; border-radius: var(--r); background: #f7e3df; color: #7a1f12; margin-bottom: 16px; font-weight: 500; }
.tooltip {
  position: fixed; z-index: 40; max-width: 260px; padding: 8px 10px; border-radius: 4px; pointer-events: none;
  background: var(--panel); color: var(--panel-ink); font-size: 14px; white-space: pre-line;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
}
.chart-card .tooltip { position: absolute; }
.t-head { font-weight: 600; margin-bottom: 4px; }
.t-row { display: flex; justify-content: space-between; gap: 16px; }

/* ---------- Marcador (la firma) ---------- */
.board { background: var(--panel); color: var(--panel-ink); border-radius: var(--r); padding: 14px 16px 16px; }
.board .label { color: var(--panel-mute); }
.board a { color: var(--panel-ink); }
.score { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.score > div { border-top: 2px solid var(--panel-line); padding-top: 8px; min-width: 0; }
.digits { display: block; font: 700 52px/1 var(--cond); letter-spacing: 0.005em; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.digits small { font-size: 0.42em; font-weight: 600; margin-left: 2px; color: var(--panel-mute); }
.now-side .digits { color: var(--amber); }
.last-side .digits { color: var(--panel-mute); }
.board .hint { margin-top: 12px; color: var(--panel-ink); }
.board .hint b { color: var(--amber); font-weight: 600; }

/* Fila de marcadores (KPIs de la semana): esta semana contra la anterior */
.scorebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--panel-line); border-radius: var(--r); overflow: hidden; }
.scorebar > div { background: var(--panel); color: var(--panel-ink); padding: 12px 14px; min-width: 0; }
.scorebar .label { color: var(--panel-mute); display: block; }
.scorebar .value { display: block; font: 700 34px/1.05 var(--cond); margin-top: 4px; white-space: nowrap; }
.scorebar .value small { font-size: 0.5em; color: var(--panel-mute); font-weight: 600; }
.scorebar .vs { display: block; font: 500 14px var(--cond); letter-spacing: 0.04em; color: var(--panel-mute); }
.scorebar .vs .up { color: #7fd39b; }
.scorebar .vs .down { color: #ff9a8a; }
.meter { display: block; height: 6px; background: var(--panel-line); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--panel-ink); }
@media (min-width: 600px) { .scorebar { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .scorebar.five { grid-template-columns: repeat(5, 1fr); } .scorebar.four { grid-template-columns: repeat(4, 1fr); } }

/* Chip de día de rutina con su color de línea */
.day-chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 3px; color: #fff;
  font: 600 14px var(--cond); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; background: var(--l0);
}
.line-1 { --line-c: var(--l1); } .line-2 { --line-c: var(--l2); } .line-3 { --line-c: var(--l3); }
.line-4 { --line-c: var(--l4); } .line-5 { --line-c: var(--l5); }
.day-chip[class*="line-"] { background: var(--line-c, var(--l0)); }

/* ---------- Entrenar ---------- */
.plan { display: grid; gap: 10px; }
@media (min-width: 700px) { .plan { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.plan form { margin: 0; }
.day-card {
  display: grid; gap: 6px; width: 100%; min-height: 0; padding: 14px; text-align: left; text-decoration: none;
  background: var(--card); color: var(--ink); border: 0; border-radius: var(--r); text-transform: none; letter-spacing: 0;
  font: 400 15px "Barlow", sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line);
}
.day-card:hover:not(:disabled) { background: var(--card) !important; box-shadow: inset 0 0 0 2px var(--ink); }
.day-card .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.day-card .list { color: var(--mute); }
.day-card .foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.day-card .cta { font: 600 15px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; }
.day-card.st-done { background: var(--sunk); box-shadow: none; }
.day-card.st-done .list { display: none; }
.status-tag { font: 600 13px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; }
.st-done .status-tag { color: var(--good); }
.st-progress .status-tag { color: var(--warn); }
.st-pending .status-tag { color: var(--mute); }
.week-progress { display: flex; gap: 4px; margin: 4px 0 12px; }
.week-progress span { flex: 1; height: 6px; border-radius: 1px; background: var(--line); }
.week-progress .wp-done { background: var(--ink); }
.week-progress .wp-progress { background: repeating-linear-gradient(90deg, var(--ink) 0 6px, var(--line) 6px 10px); }

.presets { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.presets form { margin: 0; }
.preset {
  display: grid; gap: 4px; justify-items: start; justify-content: start; width: 100%; min-height: 64px; padding: 12px 14px; text-align: left;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); text-transform: none; letter-spacing: 0;
  font: 400 14px "Barlow", sans-serif;
}
.preset strong { font: 600 17px var(--cond); }
.preset span { color: var(--mute); }
.preset:hover:not(:disabled) { background: var(--card) !important; border-color: var(--ink) !important; }
.empty { background: var(--card); border-radius: var(--r); padding: 24px 16px; margin-bottom: 16px; display: grid; gap: 12px; }

.muscles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.muscle {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; padding: 10px 12px;
  border-radius: 4px; background: var(--card); position: relative; overflow: hidden;
}
.muscle::before { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; width: var(--fill); background: var(--ink); }
.muscle .name { font-weight: 500; }
.muscle .val { font: 700 24px/1 var(--cond); }
.muscle .avg { grid-column: 1 / -1; font-size: 13px; color: var(--mute); }
.muscle.empty-m .val { color: var(--mute); }
.lagging { margin-top: 12px; padding: 12px 14px; border-radius: var(--r); background: #fbf0d9; color: #5c3b00; }
.lagging ul { margin: 6px 0 0; padding-left: 18px; }

.list { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--r); }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; text-decoration: none; align-items: center; }
.list .meta { grid-column: 1; color: var(--mute); font-size: 14px; }
.list .go { grid-row: 1 / span 2; grid-column: 2; color: var(--mute); }
.pill { display: inline-block; padding: 0 6px; border-radius: 3px; background: #fbf0d9; color: #5c3b00; font-size: 13px; font-weight: 600; }

/* ---------- Entreno ---------- */
.workout-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.workout-head h1 { font-size: 28px; }
.ex { background: var(--card); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; scroll-margin-top: 54px; }
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.ex-head h3 a { text-decoration: none; }
.ex-head h3 a:hover { text-decoration: underline; }
.ex-count {
  min-height: 36px; min-width: 52px; padding: 0 8px; background: var(--sunk); color: var(--ink); border: 0;
  font: 700 17px var(--cond); letter-spacing: 0.02em;
}
.ex-count:hover:not(:disabled) { background: var(--line) !important; }
.ex-count.complete { background: var(--ink); color: #fff; }
.ex-summary { display: none; padding: 0 14px 12px; color: var(--mute); }
.ex .board { display: none; border-radius: 0; }
.ex-info { padding: 0 14px 10px; display: grid; gap: 2px; }
.ex-hint.up { color: var(--good); font-weight: 600; }
.ex.collapsed .sets, .ex.collapsed .ex-info, .ex.collapsed .ex-tools, .ex.collapsed .board { display: none !important; }
.ex.collapsed .ex-summary { display: block; }
.ex.complete .ex-head h3 { color: var(--mute); }
/* El ejercicio en curso se convierte en el marcador */
.ex.active { box-shadow: 0 2px 10px rgb(0 0 0 / 0.08); }
.ex.active .ex-head { background: var(--panel); color: var(--panel-ink); padding-bottom: 0; }
.ex.active .ex-head h3 { font-size: 24px; }
.ex-head .meta { color: var(--mute); }
.ex.active .ex-head .meta { color: var(--panel-mute); }
.ex.active .ex-count { background: var(--panel-line); color: var(--panel-ink); }
.ex.active .board { display: block; padding-top: 4px; }
.ex.active .ex-info { display: none; }
.ex:not(.complete).collapsed .ex-summary { color: var(--ink); }

.set-row { display: grid; grid-template-columns: 36px 1fr 1fr 56px; gap: 8px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--line); }
.set-row.no-weight { grid-template-columns: 36px 1fr 56px; }
.set-row .del { display: none; }
.ex:has(.edit-toggle input:checked) .set-row { grid-template-columns: 36px 1fr 1fr 56px 40px; }
.ex:has(.edit-toggle input:checked) .set-row.no-weight { grid-template-columns: 36px 1fr 56px 40px; }
.ex:has(.edit-toggle input:checked) .set-row .del { display: grid; }
.ex-tools { display: flex; justify-content: space-between; margin: 2px 10px 8px; }
.edit-toggle { display: inline-flex; align-items: center; cursor: pointer; color: var(--mute); }
.ex:has(.edit-toggle input:checked) .edit-toggle { color: var(--bad); }
.edit-toggle:has(input:focus-visible) { outline: 3px solid var(--l0); outline-offset: 2px; }
.set-head { border-top: 0; padding-top: 10px; padding-bottom: 0; }
.set-no {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px;
  font: 700 18px var(--cond); color: var(--mute);
}
.set-row.now .set-no { background: var(--amber); color: var(--panel); }
.set-row input[type="number"] { text-align: right; font: 600 21px var(--cond); padding: 6px 10px; background: var(--wall); border-color: transparent; }
.set-row.done input[type="number"] { color: var(--mute); background: transparent; }
.done-toggle { position: relative; display: block; cursor: pointer; }
.done-toggle input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.done-toggle span {
  display: grid; place-items: center; height: 44px; border: 2px solid var(--ink); border-radius: 4px; color: transparent;
}
.done-toggle input:checked + span { background: var(--ink); color: #fff; }
.done-toggle input:focus-visible + span { outline: 3px solid var(--l0); outline-offset: 2px; }
.set-row.failed .done-toggle span { border-color: var(--bad); }
.set-error { padding: 0 14px 8px; color: var(--bad); font-size: 14px; font-weight: 500; }
.add-ex { padding: 14px; display: grid; gap: 10px; }
.add-ex-row { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.add-ex-row .wide { grid-column: 1 / -1; }
@media (min-width: 700px) { .add-ex-row { grid-template-columns: 1fr 2fr 80px auto; } .add-ex-row .wide { grid-column: auto; } }
.workout-foot { display: flex; align-items: end; gap: 10px; margin: 12px 0; }
.workout-foot label { flex: 1; max-width: 220px; }
.workout-bar {
  position: fixed; inset: auto 0 0; z-index: 25; display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--panel); color: var(--panel-ink);
}
.workout-bar .info { flex: 1; display: grid; gap: 4px; min-width: 0; }
.workout-bar .progress { font: 600 15px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; }
.workout-bar .progress strong { font-size: 22px; letter-spacing: 0.02em; }
.workout-bar .track { height: 4px; background: var(--panel-line); border-radius: 2px; overflow: hidden; }
.workout-bar .track span { display: block; height: 100%; background: var(--panel-ink); }
.workout-bar .save { color: var(--panel-mute); font-size: 13px; min-height: 1.2em; }
.workout-bar button { background: var(--panel-ink); color: var(--panel); border-color: var(--panel-ink); }
.workout-bar button:hover:not(:disabled) { background: #fff !important; border-color: #fff !important; }
.danger-zone { margin: 24px 0 0; }

/* ---------- Semana ---------- */
.vitals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 600px) { .vitals { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .vitals { grid-template-columns: repeat(7, 1fr); } }
.vital { background: var(--card); border-radius: 4px; padding: 10px 12px; }
.vital .v { display: block; font: 700 28px/1.05 var(--cond); }
.vital .v small { font-size: 0.55em; color: var(--mute); font-weight: 600; }
.week-strip { display: grid; gap: 6px; }
@media (min-width: 900px) { .week-strip { grid-template-columns: repeat(7, 1fr); } }
.day { background: var(--card); border-radius: 4px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; }
.day .acts { display: grid; gap: 6px; }
@media (max-width: 899px) { .day { grid-template-columns: 56px 1fr; align-items: start; } }
.day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.day.future { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.day-head { display: flex; gap: 6px; align-items: baseline; }
@media (max-width: 899px) { .day-head { flex-direction: column; gap: 0; } }
.day-head .n { font: 700 24px/1 var(--cond); }
.act { display: grid; gap: 3px; text-decoration: none; }
.act .s { font-weight: 600; }
.act .t { color: var(--mute); font-size: 14px; }
.rest { color: var(--mute); font-size: 14px; }
.zonebar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; gap: 1px; background: var(--sunk); min-width: 60px; }
.zonebar span { min-width: 2px; }
.z1 { background: var(--z1); } .z2 { background: var(--z2); } .z3 { background: var(--z3); } .z4 { background: var(--z4); } .z5 { background: var(--z5); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.zone-rows { display: grid; gap: 8px; }
.zone-row { display: grid; grid-template-columns: 36px 1fr 52px; gap: 10px; align-items: center; }
.zone-row.wide { grid-template-columns: 130px 1fr 80px; }
.zone-name { font: 600 16px var(--cond); }
.zone-track { position: relative; height: 18px; background: var(--sunk); border-radius: 2px; }
.zone-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.zone-fill.load { background: var(--ink); }
.zone-avg { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.target-band { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, #c9ccc4 0 3px, transparent 3px 7px); }
.zone-val { font: 600 17px var(--cond); text-align: right; }
.split { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-weight: 500; }
.split-low { background: var(--z2); } .split-mid { background: var(--z3); } .split-high { background: var(--z5); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }

details.fold { background: var(--card); border-radius: var(--r); margin-bottom: 10px; }
details.fold > summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 16px;
  cursor: pointer; list-style: none; font: 700 20px var(--cond);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; width: 9px; height: 9px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-left: auto; }
details.fold[open] > summary::after { transform: rotate(-135deg); }
details.fold > summary .small { font: 400 14px "Barlow", sans-serif; }
details.fold > :not(summary) { margin: 0 16px 16px; }
.highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.highlights li { display: grid; }
.highlights strong { font: 700 26px/1.1 var(--cond); }
.sleepbar { display: flex; height: 8px; min-width: 70px; border-radius: 2px; overflow: hidden; gap: 1px; }
.s-deep { background: #27407a; } .s-rem { background: #6f8fd6; } .s-light { background: #b9c7e8; }

.chart-card { position: relative; }
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font: 500 12px "Barlow", sans-serif; fill: var(--mute); }
.chart text.strong { fill: var(--ink); font-weight: 600; }
.chart .gridline { stroke: var(--line); stroke-width: 1; }
.chart .highlight { fill: var(--sunk); }
.chart .hit { fill: transparent; }
.chart-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.segmented { display: inline-flex; padding: 3px; background: var(--sunk); border-radius: 4px; gap: 2px; }
.segmented button { min-height: 36px; padding: 0 12px; background: transparent; color: var(--mute); border: 0; font-size: 14px; }
.segmented button:hover:not(:disabled) { background: var(--line) !important; }
.segmented button[aria-pressed="true"] { background: var(--card); color: var(--ink); }

/* Tablas */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
.data th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--ink); white-space: nowrap; font: 600 13px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.data td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data th.num { text-align: right; }
.data tfoot td { font-weight: 600; border-bottom: 0; }
.data .row-today td { background: var(--sunk); }
.data input { min-height: 40px; }
.data input[type="number"] { width: 72px; text-align: right; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
@media (max-width: 699px) {
  /* Tablas de gestión: cada fila es una tarjeta */
  .stack-sm thead { display: none; }
  .stack-sm tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .stack-sm td { padding: 0; border: 0; }
  .stack-sm .c-full { grid-column: 1 / -1; }
  .stack-sm .c-actions { grid-column: 2; grid-row: 1; }
  .stack-sm .num { text-align: left; }
}

/* ---------- Objetivos ---------- */
.goals { display: grid; gap: 10px; }
@media (min-width: 800px) { .goals { grid-template-columns: 1fr 1fr; } }
.goal { background: var(--card); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; align-content: start; scroll-margin-top: 64px; }
.goal-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.status { display: inline-flex; align-items: center; gap: 4px; font: 600 13px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.tone-good .status { color: var(--good); }
.tone-warning .status { color: var(--warn); }
.tone-critical .status { color: var(--bad); }
.goal-numbers { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.goal-numbers .v { font: 700 32px/1 var(--cond); }
.goal-bar { position: relative; height: 10px; background: var(--sunk); border-radius: 2px; }
.goal-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--ink); }
.tone-good .goal-fill { background: var(--good); }
.tone-warning .goal-fill { background: var(--warn); }
.tone-critical .goal-fill { background: var(--bad); }
.goal-expected { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.day-dots { display: flex; gap: 6px; margin: 0; flex-wrap: wrap; }
.dd {
  display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%;
  font: 600 15px var(--cond); letter-spacing: 0; border: 2px solid var(--line); background: var(--card); color: var(--mute);
}
button.dd:hover:not(:disabled) { border-color: var(--ink) !important; background: var(--card) !important; }
.dd-auto { background: var(--good); border-color: var(--good); color: #fff; }
.dd-manual { background: var(--ink) !important; border-color: var(--ink); color: #fff !important; }
.dd-future { border-style: dashed; }
.dd.today { box-shadow: 0 0 0 2px var(--wall), 0 0 0 4px var(--ink); }
.mini-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.md-day { display: grid; gap: 3px; justify-items: center; }
.md { position: relative; width: 100%; height: 34px; background: var(--sunk); border-radius: 2px; }
.md-fill { position: absolute; inset: auto 0 0 0; background: var(--ink); border-radius: 2px; }
.md-day.today .md-label { color: var(--ink); font-weight: 700; }
.md-day.future .md { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.md-label { font: 600 12px var(--cond); color: var(--mute); }

/* ---------- Cuenta ---------- */
.auth-card { width: min(420px, 100%); background: var(--card); border-radius: var(--r); padding: 24px 20px; display: grid; gap: 16px; }
.auth-card .brand { font-size: 30px; }
.account-links { display: grid; gap: 0; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; } }
#workout, .workout-head, .danger-zone { max-width: 720px; margin-inline: auto; }
.card .presets { grid-template-columns: 1fr; gap: 0; }
.card .preset { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 0; min-height: 0; }
.card .preset:hover:not(:disabled) { background: transparent !important; }
.card .preset:hover strong { text-decoration: underline; }
@media (min-width: 700px) { .card .presets { grid-template-columns: 1fr 1fr; column-gap: 24px; } }