/* ============================================================
   Rutina Smart Fit — piel arcade
   Tema único a propósito (sala de máquinas a oscuras): todos los
   colores se pintan explícitos, no dependen del tema del sistema.
   ============================================================ */

:root{
  color-scheme: dark;

  /* fondo y superficies */
  --bg:#12101C;
  --surface:#1D1A30;
  --raised:#282344;
  --sunken:#171428;
  --line:#4A4180;
  --line-soft:#332C5C;

  /* tinta */
  --ink:#F0F0FF;
  --ink-2:#A79FD6;
  --ink-3:#6F67A3;

  /* acentos */
  --accent:#FFC93C;         /* oro de arcade: monedas y acciones */
  --on-accent:#12101C;
  --danger:#FF4D6D;
  --exito:#4AE29A;

  /* patrones de movimiento */
  --p-empuje:#4EA8F5;
  --p-traccion:#FF8A3D;
  --p-pierna:#4AE29A;
  --p-torso:#C77DFF;

  /* sin esquinas redondeadas: todo es píxel */
  --r-s:0px; --r-m:0px; --r-l:0px;

  --sombra:4px 4px 0 rgba(0,0,0,.55);
  --sombra-corta:2px 2px 0 rgba(0,0,0,.55);

  --pixel:"Press Start 2P", "Courier New", monospace;
  --texto:"VT323", "Courier New", monospace;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 50% 0%, #241E45 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  color:var(--ink);
  font-family:var(--texto);
  font-size:19px;
  line-height:1.3;
  -webkit-font-smoothing:none;
  text-rendering:optimizeSpeed;
}

/* rejilla de monitor: sutil, encima de todo, sin capturar clics */
body::after{
  content:"";
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  opacity:.5;
}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea{font:inherit;color:inherit}
a{color:var(--accent)}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* ---------- estructura ---------- */
.app{
  max-width:480px;margin:0 auto;min-height:100vh;
  display:flex;flex-direction:column;
  border-left:2px solid var(--line-soft);
  border-right:2px solid var(--line-soft);
}
@media (max-width:520px){ .app{border:none} }

.topbar{
  position:sticky;top:0;z-index:20;
  background:var(--sunken);
  border-bottom:3px solid var(--line);
  padding:11px 14px;
  display:flex;align-items:center;gap:9px;
}
.brand{
  font-family:var(--pixel);font-size:11px;line-height:1.4;
  text-transform:uppercase;color:var(--ink);
  text-shadow:2px 2px 0 var(--p-empuje);
}
.brand span{display:block;font-size:8px;color:var(--accent);text-shadow:none;margin-top:3px}
.ver{
  font-family:var(--pixel);font-size:7px;color:var(--ink-3);
  border:2px solid var(--line-soft);padding:3px 5px;
}
.spacer{flex:1}

.who{
  display:flex;align-items:center;gap:7px;
  border:2px solid var(--line);background:var(--surface);
  padding:4px 9px 4px 4px;
  font-family:var(--pixel);font-size:8px;
  box-shadow:var(--sombra-corta);
}
.av{
  width:22px;height:22px;flex:none;
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;
  font-family:var(--pixel);font-size:8px;
}
main{flex:1;padding:16px 14px 104px}

/* ---------- navegación ---------- */
.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  max-width:480px;margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:3px;
  background:var(--sunken);
  border-top:3px solid var(--line);
  padding:7px 7px calc(7px + env(safe-area-inset-bottom));
}
.tab{
  padding:9px 2px;border:2px solid transparent;
  font-family:var(--pixel);font-size:7px;line-height:1.3;
  color:var(--ink-3);text-align:center;text-transform:uppercase;
}
.tab[aria-current="page"]{
  background:var(--accent);color:var(--on-accent);
  border-color:var(--ink);box-shadow:var(--sombra-corta);
}

/* ---------- tipografía ---------- */
h1,h2,h3{margin:0;text-wrap:balance}
.eyebrow{
  font-family:var(--pixel);font-size:7.5px;line-height:1.7;
  letter-spacing:.02em;text-transform:uppercase;color:var(--accent);
}
.display{
  font-family:var(--pixel);text-transform:uppercase;
  line-height:1.35;font-weight:400;
  text-shadow:3px 3px 0 var(--p-empuje);
}
.mono{font-family:var(--texto);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}

/* ---------- patrones ---------- */
.pat-empuje{--pat:var(--p-empuje)}
.pat-traccion{--pat:var(--p-traccion)}
.pat-pierna{--pat:var(--p-pierna)}
.pat-torso{--pat:var(--p-torso)}
.patlabel{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--pixel);font-size:7px;text-transform:uppercase;color:var(--ink-2);
}
.patdot{width:10px;height:10px;background:var(--pat);flex:none}

/* ---------- portada ---------- */
.hero{padding:20px 0 6px}
.hero h1{font-size:23px}
.hero .lede{margin-top:16px;color:var(--ink-2);max-width:42ch;font-size:18px}
.rule{height:3px;background:var(--line-soft);margin:22px 0}

.tagline{
  display:inline-block;margin-top:16px;
  font-family:var(--pixel);font-size:8px;line-height:1.6;
  background:var(--accent);color:var(--on-accent);
  padding:7px 10px;box-shadow:var(--sombra);
}
.parpadeo{animation:parpadeo 1.1s steps(1,end) infinite}
@keyframes parpadeo{0%,50%{opacity:1}50.01%,100%{opacity:.25}}

.daylist{display:flex;flex-direction:column;gap:4px}
.dayrow{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;
  background:var(--surface);border:2px solid var(--line-soft);
  padding:10px 11px;width:100%;text-align:left;
}
.daynum{
  font-family:var(--pixel);font-size:10px;
  width:28px;height:28px;display:grid;place-items:center;
  background:var(--pat);color:var(--bg);
}
.dayrow h3{font-size:19px;font-weight:400;line-height:1.15}
.dayrow .sub{font-family:var(--pixel);font-size:6.5px;color:var(--ink-3);margin-top:5px;text-transform:uppercase}
.dayrow .cnt{font-size:16px;color:var(--ink-3)}

/* ---------- controles ---------- */
.field{
  width:100%;background:var(--sunken);border:2px solid var(--line);
  padding:11px 12px;font-size:19px;
}
.field::placeholder{color:var(--ink-3)}
.field:focus{border-color:var(--accent);outline:none}

.btn{
  display:block;background:var(--accent);color:var(--on-accent);
  border:2px solid var(--ink);
  padding:12px 14px;
  font-family:var(--pixel);font-size:9px;line-height:1.5;text-transform:uppercase;
  box-shadow:var(--sombra);
}
.btn:active{transform:translate(2px,2px);box-shadow:var(--sombra-corta)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-wide{width:100%;text-align:center}

.mini{
  font-family:var(--pixel);font-size:7px;line-height:1.6;
  border:2px solid var(--line);padding:6px 8px;color:var(--ink-2);
  background:var(--surface);text-transform:uppercase;
}
.mini:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- día de hoy ---------- */
.dayhead{padding:14px 0 12px}
.dayhead h1{font-size:16px;margin-top:9px}
.dayhead .bar{height:6px;width:64px;background:var(--pat);margin:14px 0 11px}
.cyclepick{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:15px 0 4px}
.pick{
  border:2px solid var(--line);background:var(--surface);
  padding:10px 0;font-family:var(--pixel);font-size:9px;color:var(--ink-3);
}
.pick[aria-pressed="true"]{
  background:var(--pat);border-color:var(--ink);color:var(--bg);
  box-shadow:var(--sombra-corta);
}

.exlist{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.ex{background:var(--surface);border:2px solid var(--line-soft)}
.ex.on{border-color:var(--line);box-shadow:var(--sombra)}
.ex.full{border-left:6px solid var(--pat)}
.exhead{
  display:grid;grid-template-columns:1fr auto;gap:11px;align-items:start;
  padding:11px 12px;width:100%;text-align:left;
}
.exname{font-size:19px;line-height:1.2}
.exsub{font-size:15px;color:var(--ink-3);margin-top:2px}
.exnote{font-size:16px;color:var(--p-torso);margin-top:6px}
.target{font-family:var(--pixel);font-size:8px;color:var(--ink-2);white-space:nowrap}
.pips{display:flex;gap:3px;margin-top:8px;justify-content:flex-end}
.pip{width:9px;height:9px;background:var(--line-soft)}
.pip.on{background:var(--pat)}

.exbody{border-top:2px solid var(--line-soft);padding:12px;display:flex;flex-direction:column;gap:11px}
.last{
  font-size:16px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;
}
.last b{color:var(--ink-2)}
.setrow{display:grid;grid-template-columns:20px 1fr 1fr 42px;gap:7px;align-items:center}
.setno{font-family:var(--pixel);font-size:8px;color:var(--ink-3);text-align:center}
.stepper{display:flex;align-items:center;border:2px solid var(--line);background:var(--sunken)}
.stepper button{width:32px;padding:9px 0;color:var(--accent);font-size:20px;line-height:1;flex:none}
.stepper button:active{background:var(--accent);color:var(--on-accent)}
.stepper input{
  width:100%;min-width:0;border:none;background:transparent;text-align:center;
  font-size:22px;padding:8px 0;font-variant-numeric:tabular-nums;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper .unit{font-family:var(--pixel);font-size:6px;color:var(--ink-3);padding-right:7px}
.ok{
  border:2px solid var(--line);height:40px;display:grid;place-items:center;
  color:var(--ink-3);font-size:20px;background:var(--sunken);
}
.ok[aria-pressed="true"]{background:var(--exito);border-color:var(--ink);color:var(--bg)}
.exactions{display:flex;gap:6px;flex-wrap:wrap}

.prpill{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--pixel);font-size:7px;padding:4px 6px;
}

.finish{margin-top:20px}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:12px}
.stat{background:var(--surface);border:2px solid var(--line-soft);padding:10px 9px}
.stat .k{font-family:var(--pixel);font-size:6.5px;color:var(--ink-3);text-transform:uppercase;line-height:1.5}
.stat .v{font-size:26px;margin-top:5px;font-variant-numeric:tabular-nums;line-height:1}
.stat .v small{font-size:15px;color:var(--ink-3)}

/* ---------- media de ejercicios ---------- */
.demo{
  display:block;width:180px;height:180px;margin:0 auto;
  border:2px solid var(--line);background:#fff;
  image-rendering:auto;
}
.demowrap{display:flex;flex-direction:column;align-items:center;gap:7px}
.demowrap figcaption{font-family:var(--pixel);font-size:6px;color:var(--ink-3);text-align:center;line-height:1.6}
.nodemo{
  font-size:16px;color:var(--ink-3);text-align:center;
  border:2px dashed var(--line);padding:16px 12px;
}

/* ---------- secciones y listas ---------- */
.section{margin-bottom:26px}
.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.sectionhead h2{font-family:var(--pixel);font-size:10px;line-height:1.5;text-transform:uppercase}

.rows{display:flex;flex-direction:column;gap:4px}
.row{
  background:var(--surface);border:2px solid var(--line-soft);padding:10px 11px;
  display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
}
.row .t{font-size:19px;line-height:1.2}
.row .s{font-size:15px;color:var(--ink-3);margin-top:3px}
.row .n{font-size:20px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.row .n small{display:block;font-family:var(--pixel);font-size:6px;color:var(--ink-3);margin-top:3px}
.datechip{
  border:2px solid var(--line);padding:5px 6px;text-align:center;line-height:1.1;min-width:44px;
  background:var(--sunken);
}
.datechip b{display:block;font-size:20px;font-weight:400;color:var(--ink)}
.datechip{font-family:var(--pixel);font-size:6px;color:var(--ink-3)}
.datechip b{font-family:var(--texto)}

.empty{
  border:2px dashed var(--line);padding:26px 18px;text-align:center;
  color:var(--ink-3);font-size:17px;
}
.notice{
  display:flex;gap:10px;align-items:flex-start;
  border:2px solid var(--line);border-left:6px solid var(--accent);
  background:var(--surface);padding:11px 12px;font-size:17px;color:var(--ink-2);
  margin-bottom:14px;
}
.card{background:var(--surface);border:2px solid var(--line-soft);padding:13px}
.card p{margin:0 0 11px;font-size:17px;color:var(--ink-2)}

.coderow{display:flex;flex-direction:column;gap:9px}
.coderow .btns{display:flex;gap:8px}
.coderow .btns .btn{flex:1}
.codebox{
  width:100%;min-height:80px;resize:vertical;
  background:var(--sunken);border:2px solid var(--line);padding:10px;
  font-size:15px;line-height:1.5;word-break:break-all;
}

/* ---------- gráfico ---------- */
.chartcard{position:relative;background:var(--surface);border:2px solid var(--line-soft);padding:13px 11px 9px}
.chartcard .cap{font-size:16px;color:var(--ink-3);margin-bottom:11px}
.chartwrap{position:relative;overflow-x:auto}
.tip{
  position:absolute;pointer-events:none;z-index:5;
  background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);
  padding:6px 8px;font-family:var(--pixel);font-size:7px;line-height:1.7;
  white-space:nowrap;transform:translate(-50%,-100%);
  opacity:0;transition:opacity .1s;
}
.tip.show{opacity:1}

/* ---------- monedas ---------- */
.coin{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--pixel);font-size:8px;color:var(--accent);
  border:2px solid var(--accent);padding:4px 7px;background:var(--sunken);
}
.coin::before{
  content:"";width:11px;height:11px;flex:none;background:var(--accent);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.saldo{
  background:var(--sunken);border:3px solid var(--accent);
  padding:16px 14px;text-align:center;box-shadow:var(--sombra);margin-bottom:16px;
}
.saldo .k{font-family:var(--pixel);font-size:7px;color:var(--ink-3);text-transform:uppercase}
.saldo .v{
  font-family:var(--pixel);font-size:26px;color:var(--accent);
  margin-top:12px;line-height:1.2;text-shadow:3px 3px 0 rgba(0,0,0,.5);
}
.saldo .d{font-size:16px;color:var(--ink-3);margin-top:10px}

.tiendagrid{display:flex;flex-direction:column;gap:8px}
.item{
  background:var(--surface);border:2px solid var(--line-soft);padding:11px 12px;
  display:grid;grid-template-columns:1fr auto;gap:11px;align-items:center;
}
.item.alcanza{border-color:var(--accent)}
.item .t{font-size:19px;line-height:1.2}
.item .d{font-size:15px;color:var(--ink-3);margin-top:3px}
.item .precio{
  font-family:var(--pixel);font-size:9px;color:var(--accent);
  text-align:right;white-space:nowrap;margin-bottom:7px;
}
.item .lado{display:flex;flex-direction:column;align-items:flex-end}
.etq{
  font-family:var(--pixel);font-size:6px;padding:3px 5px;border:2px solid var(--line);
  color:var(--ink-3);text-transform:uppercase;margin-left:6px;vertical-align:3px;
}
.etq.pendiente{border-color:var(--accent);color:var(--accent)}
.etq.entregado{border-color:var(--exito);color:var(--exito)}
.rivaltag{
  font-family:var(--pixel);font-size:6px;padding:3px 5px;border:2px solid var(--line);
  color:var(--ink-3);text-transform:uppercase;margin-left:6px;vertical-align:3px;
}

/* ---------- avisos ---------- */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);
  background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);
  padding:11px 15px;font-family:var(--pixel);font-size:8px;line-height:1.6;
  box-shadow:var(--sombra);opacity:0;pointer-events:none;transition:opacity .15s;
  z-index:50;max-width:88vw;text-align:center;
}
.toast.show{opacity:1}
.skel{height:40px;background:var(--raised);width:130px}