:root{
  --bg:#f4f5f9;--card:#fff;--tx:#1b2233;--mut:#6b7385;--line:#e3e6ee;--soft:#eef0f6;
  --run:#2563eb;--run-l:#e6efff;--gym:#ea580c;--gym-l:#ffedd5;--on-gym:#fff;
  --ok:#16a34a;--ok-l:#e3f6ea;--warn:#ca8a04;--warn-l:#fef3c7;--race:#dc2f1c;--race-l:#fde8e5;
  --shade:rgba(15,23,42,.45);--shadow:0 1px 2px rgba(20,30,60,.06);
}
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]){
  --bg:#0b0f1a;--card:#151b2b;--tx:#e8ecf6;--mut:#8b94a9;--line:#252d42;--soft:#1c2438;
  --run:#5b93ff;--run-l:#16264d;--gym:#fb923c;--gym-l:#3a2210;--on-gym:#1b1004;
  --ok:#34d399;--ok-l:#0f2b22;--warn:#facc15;--warn-l:#332a08;--race:#f87171;--race-l:#3a1613;
  --shade:rgba(0,0,0,.6);--shadow:none;
}}
:root[data-tema=oscuro]{
  --bg:#0b0f1a;--card:#151b2b;--tx:#e8ecf6;--mut:#8b94a9;--line:#252d42;--soft:#1c2438;
  --run:#5b93ff;--run-l:#16264d;--gym:#fb923c;--gym-l:#3a2210;--on-gym:#1b1004;
  --ok:#34d399;--ok-l:#0f2b22;--warn:#facc15;--warn-l:#332a08;--race:#f87171;--race-l:#3a1613;
  --shade:rgba(0,0,0,.6);--shadow:none;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--tx);font-family:-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
#app{max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative}
.scroll{padding:calc(env(safe-area-inset-top) + 14px) 18px calc(104px + env(safe-area-inset-bottom))}
h1{font-size:26px;font-weight:700;letter-spacing:-.3px;margin:2px 0}
.sub{color:var(--mut);font-size:13px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.icon-btn{background:var(--card);border:none;color:var(--tx);width:38px;height:38px;border-radius:12px;font-size:18px;box-shadow:var(--shadow);flex:none}
.card{background:var(--card);border-radius:16px;padding:14px;margin-top:12px;box-shadow:var(--shadow)}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.lab{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--mut)}
.big{font-size:21px;font-weight:700;letter-spacing:-.2px}
.tag{display:inline-block;font-size:11px;font-weight:700;border-radius:99px;padding:3px 9px;white-space:nowrap}
.tag.run{background:var(--run-l);color:var(--run)}.tag.ok{background:var(--ok-l);color:var(--ok)}
.tag.gym{background:var(--gym-l);color:var(--gym)}.tag.warn{background:var(--warn-l);color:var(--warn)}
.tag.race{background:var(--race-l);color:var(--race)}.tag.mut{background:var(--soft);color:var(--mut)}
.cd{border-radius:14px;padding:11px 12px;color:#fff;border:none;text-align:left;font-family:inherit}
.cd.b{background:linear-gradient(135deg,#2563eb,#1d4ed8)}.cd.r{background:linear-gradient(135deg,#dc2f1c,#b91c1c)}
.cd .n{font-size:30px;font-weight:700;line-height:1}.cd .n small{font-size:13px;font-weight:500;margin-left:3px}
.cd .t{font-size:12px;margin-top:3px;opacity:.95}.cd .g{font-size:11px;opacity:.8;margin-top:1px}
.step{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.step:first-of-type{border-top:none}.step .d{width:9px;height:9px;border-radius:50%;flex:none;background:var(--mut)}
.step b{font-weight:600}.step .r{margin-left:auto;color:var(--mut);font-size:12.5px;text-align:right;max-width:62%}
.btn{display:block;width:100%;text-align:center;border:none;border-radius:12px;padding:12px;font-weight:600;font-size:14.5px;
  margin-top:10px;font-family:inherit;color:#fff}
.btn.p{background:var(--run)}.btn.g{background:var(--gym);color:var(--on-gym)}.btn.o{background:var(--soft);color:var(--tx)}.btn.d{background:var(--race-l);color:var(--race)}
.bar{height:8px;background:var(--soft);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:var(--run);border-radius:99px}
.pill{flex:1;text-align:center;border-radius:12px;padding:8px 2px;border:1.5px solid var(--line);font-size:11px;color:var(--mut);background:transparent;font-family:inherit}
.pill b{display:block;font-size:13px;color:var(--tx);margin-top:2px}
.pill.done{background:var(--ok-l);border-color:transparent}.pill.done b{color:var(--ok)}
.pill.today{border-color:var(--run);background:var(--run-l)}.pill.today b{color:var(--run)}
.pill.miss b{color:var(--warn)}
.g1{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:var(--gym);color:var(--bg);
  font-size:11px;font-weight:700;flex:none}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.cal .h{font-size:11px;color:var(--mut);text-align:center;font-weight:600;padding:2px 0 4px}
.c{height:52px;border-radius:11px;background:var(--card);padding:5px 2px 0;text-align:center;font-size:12px;font-weight:600;
  border:1.5px solid transparent;color:var(--tx);font-family:inherit;box-shadow:var(--shadow)}
.c.off{background:transparent;box-shadow:none}.c.sel{border-color:var(--run);background:var(--run-l)}
.c.hoy{color:var(--run)}.c.race{background:var(--race-l);border-color:var(--race)}
.ind{display:flex;gap:3px;justify-content:center;margin-top:4px;height:17px;align-items:center}
.dot{width:10px;height:10px;border-radius:50%;background:var(--run)}
.dot.pl{background:transparent;border:2px solid var(--run)}.dot.miss{background:transparent;border:2px solid var(--mut);opacity:.55}
.gl{width:14px;height:14px;border-radius:4px;background:var(--gym);color:var(--bg);font-size:9px;line-height:14px;font-weight:700}
.leg{display:flex;gap:12px;font-size:11px;color:var(--mut);margin-top:8px;flex-wrap:wrap;align-items:center}
.leg .dot,.leg .gl{display:inline-block;vertical-align:-2px;margin-right:3px}
.month{display:flex;align-items:center;justify-content:space-between;gap:8px}
.month h1{flex:1;text-align:center;font-size:22px}
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;background:var(--card);
  border-top:1px solid var(--line);display:flex;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:5}
.tab{flex:1;text-align:center;font-size:10.5px;color:var(--mut);background:none;border:none;font-family:inherit}
.tab svg{display:block;margin:0 auto 3px;stroke:currentColor;fill:none;stroke-width:1.8}
.tab.on{color:var(--run);font-weight:600}
.shade{position:fixed;inset:0;background:var(--shade);z-index:10}
.sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;background:var(--card);
  border-radius:24px 24px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));z-index:11;max-height:92vh;overflow:auto}
.grab{width:40px;height:5px;background:var(--line);border-radius:9px;margin:0 auto 14px}
.opt{border:2px solid var(--line);border-radius:16px;padding:14px 8px;text-align:center;font-weight:700;font-size:16px;flex:1;
  background:transparent;color:var(--tx);font-family:inherit}
.opt small{display:block;font-weight:500;font-size:11px;color:var(--mut);margin-top:3px}
.opt.sel{border-color:var(--gym);background:var(--gym-l);color:var(--gym)}
.chip{border:1.5px solid var(--line);border-radius:99px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--mut);
  background:transparent;font-family:inherit}
.chip.sel{background:var(--gym);border-color:var(--gym);color:var(--on-gym)}
.lema{display:flex;align-items:center;gap:7px;font-size:13px;font-style:italic;color:var(--mut);margin-top:3px}
.lema svg{border-radius:3px;box-shadow:0 0 0 1px rgba(128,128,128,.35);flex:none}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.field{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;font-size:16px;background:transparent;color:var(--tx);font-family:inherit}
.wk{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);width:100%;background:none;border-left:none;border-right:none;
  border-bottom:none;text-align:left;color:var(--tx);font-family:inherit}
.wk.first{border-top:none}
.wk .ic{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.wk .ic.ok{background:var(--ok);color:var(--bg)}.wk .ic.now{background:var(--run);color:var(--bg)}
.wk .ic.pend{border:2px solid var(--line);color:var(--mut)}.wk .ic.miss{background:var(--warn);color:var(--bg)}
.wk .tt{font-size:13.5px;font-weight:600}.wk .ss{font-size:11.5px;color:var(--mut)}
.wk .km{margin-left:auto;text-align:right;font-size:13px;font-weight:700;flex:none}.wk .km small{display:block;font-weight:500;font-size:11px;color:var(--mut)}
.ses{padding:8px 0 8px 38px;border-top:1px dashed var(--line);display:flex;gap:8px;align-items:center;font-size:13px;width:100%;
  background:none;border-left:none;border-right:none;border-bottom:none;color:var(--tx);text-align:left;font-family:inherit}
.ses .k{margin-left:auto;color:var(--mut);font-size:12px;white-space:nowrap}
.res{display:flex;gap:8px;margin-top:10px}.res>div{flex:1;background:var(--soft);border-radius:12px;padding:9px 4px;text-align:center}
.res b{display:block;font-size:17px;font-weight:700}.res span{font-size:10.5px;color:var(--mut)}
.chart{display:flex;align-items:flex-end;gap:6px;height:140px;margin-top:10px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:10px;color:var(--mut);text-align:center}
.chart .b{width:100%;border-radius:6px 6px 0 0;background:var(--run)}
.chart .b.of{opacity:.3}
.chart .b.pl{background:transparent;border:2px dashed var(--run);border-bottom:none;opacity:.75}
.chart .v{font-size:10px;font-weight:700;color:var(--tx);margin-bottom:2px}
.back{background:none;border:none;color:var(--run);font-size:14px;font-family:inherit;padding:2px 0;font-weight:600}
.note{font-size:11.5px;color:var(--mut);margin-top:6px}
table.km{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
table.km th{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);text-align:right;padding:4px 4px;border-bottom:1.5px solid var(--line)}
table.km th:first-child,table.km th:nth-child(2){text-align:left}
table.km td{padding:5px 4px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.km td:first-child{text-align:left;font-weight:600}table.km td:nth-child(2){text-align:left;color:var(--mut);font-size:11.5px;white-space:normal}
.seg{display:flex;background:var(--soft);border-radius:12px;padding:3px;gap:3px;margin-top:12px}
.seg button{flex:1;border:none;background:transparent;color:var(--mut);border-radius:10px;padding:8px;font-weight:600;font-size:13px;font-family:inherit}
.seg button.on{background:var(--card);color:var(--tx);box-shadow:var(--shadow)}
.err{padding:40px 24px;text-align:center}
.err h1{margin-bottom:10px}

.conbandera{display:flex;align-items:center;gap:9px}.conbandera svg{border-radius:3px;box-shadow:0 0 0 1px rgba(128,128,128,.35);flex:none}

button[data-act]{position:relative}
input.hp{position:absolute;left:50%;top:50%;margin:0;opacity:0;z-index:3}

/* sensación de app: sin zoom, sin selección de texto ni menú al mantener pulsado */
html,body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}