:root{
  --bg:#0f1115; --bg2:#161a21; --card:#191e26; --card2:#212836;
  --line:#2a3140; --txt:#e8ecf3; --dim:#95a0b3; --dim2:#6c7789;
  --brand-1:#26c6da; --brand-2:#8bc34a;
  --acc:#8bc34a; --acc-d:#1e2e11; --on-acc:#0d1a04;
  --warn:#ffb020; --bad:#ff5c5c; --blue:#26c6da;
  --r:16px; --r-s:12px; --r-xs:9px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Tipografía del sistema Apple, con alternativas de proporciones parecidas
     para Windows y Android. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
html[data-theme="light"]{
  --bg:#f4f6fa; --bg2:#ffffff; --card:#ffffff; --card2:#eef1f7;
  --line:#dde3ec; --txt:#141922; --dim:#5c6779; --dim2:#8a94a6;
  --acc:#5b8f2b; --acc-d:#eaf5db; --on-acc:#ffffff; --blue:#0f8a9c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font:400 17px/1.47 var(--sans);
  letter-spacing:-.01em;
  /* deja hueco a la barra de pestañas y, si entrena, al cronómetro */
  padding-bottom:calc(78px + var(--safe-b));
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Escala tipográfica de iOS: título grande, título, encabezado, cuerpo, pie. */
h1,h2,h3{margin:0 0 .35em;font-weight:700;letter-spacing:-.022em}
/* Todos los títulos de pantalla miden lo mismo que el «Hola» de Inicio: era
   el único que estaba bien y el resto se le comían. Las pantallas de bienvenida
   sí llevan el título grande, que ahí es lo único que hay. */
h1{font-size:1.35rem;line-height:1.22}
h1.center{font-size:1.94rem;line-height:1.15}
h2{font-size:1.29rem;line-height:1.25}
h3{font-size:1.06rem;line-height:1.3}
p{margin:0 0 .8em}
b,strong{font-weight:600}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:var(--txt);background:var(--card2);
  border:1px solid transparent;border-radius:var(--r-s);padding:.62em .75em;width:100%;
  -webkit-appearance:none;appearance:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
input::placeholder,textarea::placeholder{color:var(--dim2)}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2em}
img{max-width:100%;display:block}
a{color:var(--blue)}

/* ---------- splash ---------- */
.splash{position:fixed;inset:0;background:var(--bg);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .35s}
.splash.hide{opacity:0;pointer-events:none}
.splash-logo{width:86px;height:auto}
.splash-name{font-size:1.2rem}
.splash-msg{color:var(--dim);font-size:.85rem;text-align:center;padding:0 24px}
.spinner{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- layout ---------- */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);padding-top:var(--safe-t)}
.topbar-inner{max-width:900px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;min-height:52px}
.brand{display:flex;align-items:center;gap:9px;cursor:pointer;padding:0;color:var(--txt)}
.brand-logo{width:21px;height:27px;object-fit:contain;flex:none}
.topbar-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.view{max-width:900px;margin:0 auto;padding:16px 16px 24px;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}

.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;
  background:color-mix(in srgb,var(--bg2) 78%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;
  color:var(--dim2);font-size:.63rem;font-weight:500;letter-spacing:0;transition:color .15s}
.tab svg{width:25px;height:25px;fill:currentColor}
.tab.on{color:var(--acc)}
.tab:active{transform:scale(.94)}

/* Logotipo tipográfico: FR pequeño y elevado, al modo de un símbolo de marca */
.wordmark{font-weight:500;font-size:1rem;letter-spacing:.19em;line-height:1;
  white-space:nowrap;display:inline-block}
.wordmark sup{font-size:.5em;font-weight:700;letter-spacing:.08em;
  vertical-align:.72em;margin-left:.34em;color:var(--acc);top:0}

/* ---------- primitives ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px}
.card+.card{margin-top:11px}
/* El hueco de la música en el entrenamiento se queda vacío cuando ya está la
   barra flotante, y sin esto la tarjeta siguiente perdía su separación. */
#wo-musica:empty+.card{margin-top:11px}

/* lista agrupada: filas separadas por una línea de un píxel, como en Ajustes de iOS */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.list-row{display:flex;align-items:center;gap:12px;padding:12px 15px;position:relative}
.list-row+.list-row::before{content:"";position:absolute;top:0;left:15px;right:0;
  height:1px;background:var(--line);transform:scaleY(.5)}
.list-row .grow{min-width:0}
.list-row-title{font-size:1rem;letter-spacing:-.01em}
.list-row-sub{font-size:.8rem;color:var(--dim2);margin-top:1px}
.list-row.tap{cursor:pointer}
.list-row.tap:active{background:var(--card2)}
.list-row .chevron{width:8px;height:14px;flex:none;opacity:.35}
.list-title{font-size:.76rem;font-weight:600;color:var(--dim2);letter-spacing:.04em;
  text-transform:uppercase;margin:22px 4px 8px}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.muted{color:var(--dim);font-size:.94rem;letter-spacing:-.01em}
.tiny{font-size:.78rem;color:var(--dim2);letter-spacing:0}
.stack{display:flex;flex-direction:column;gap:10px}
.list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin:22px 4px 8px}
.list-head .list-title{margin:0}
.list-head .btn{margin-bottom:-3px;flex:none}
.center{text-align:center}
.hr{height:1px;background:var(--line);margin:12px 0;transform:scaleY(.5)}
.nowrap{white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:.62em 1.05em;border-radius:var(--r-s);background:var(--card2);
  border:1px solid transparent;font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  transition:transform .14s cubic-bezier(.2,.9,.3,1),filter .15s,opacity .15s}
.btn:active{transform:scale(.955);filter:brightness(.94)}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--acc);color:var(--on-acc);border-color:transparent}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn.sm{padding:.42em .75em;font-size:.85rem}
.btn.icon{padding:.5em;width:36px;height:36px;flex:none}
.btn.grande{padding:.95em 1.2em;font-size:1.02rem;font-weight:700}
.btn.grande svg{width:20px;height:20px}
.btn[disabled]{opacity:.4;pointer-events:none}

.chip{display:inline-flex;align-items:center;gap:5px;padding:.34em .78em;border-radius:999px;
  background:var(--card2);border:1px solid transparent;font-size:.83rem;font-weight:500;
  color:var(--dim);white-space:nowrap;letter-spacing:-.01em;transition:transform .12s}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--acc-d);border-color:var(--acc);color:var(--acc)}
.chip.solid{background:var(--acc-d);color:var(--acc);border-color:transparent}
/* El músculo que se trabaja, en color: entre el nombre en inglés y la lista de
   músculos todo era del mismo gris y no se distinguía de un vistazo. Es texto y
   no una pastilla: parecían botones y no lo son, no se pulsan. */
/* La fila de ayuda va suelta entre dos tarjetas, así que se separa por su
   cuenta: la separación normal la dan las tarjetas entre sí y aquí no había
   ninguna, con lo que la de abajo se pegaba a los botones. */
.ayuda-fila{margin:11px 0}
.musculos{font-size:.8rem;color:var(--dim2);margin-top:4px;letter-spacing:0}
.musculos b{color:var(--acc);font-weight:600}

.pill-scroll{display:flex;gap:7px;overflow-x:auto;padding:2px 16px 8px;margin:0 -16px;scrollbar-width:none}
.pill-scroll::-webkit-scrollbar{display:none}

.empty{text-align:center;padding:44px 20px;color:var(--dim)}
.empty svg{width:46px;height:46px;stroke:var(--dim2);fill:none;stroke-width:1.6;margin-bottom:10px}

/* ---------- exercise grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.ex-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform .12s,border-color .15s;text-align:left;padding:0}
.ex-card:active{transform:scale(.975)}
.ex-thumb{position:relative;aspect-ratio:4/3;background:var(--card2);overflow:hidden}
.ex-thumb img{width:100%;height:100%;object-fit:cover;background:var(--card2)}
.ex-thumb .lvl{position:absolute;top:6px;right:6px;font-size:.62rem;padding:.2em .5em;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-weight:700;backdrop-filter:blur(4px)}
.ex-body{padding:9px 10px 11px}
.ex-name{font-weight:700;font-size:.86rem;line-height:1.25;margin-bottom:3px}
.ex-sub{font-size:.7rem;color:var(--dim2);line-height:1.3}

/* animated demo player */
.demo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card2);aspect-ratio:4/3}
.demo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .18s linear}
.demo img.on{opacity:1}
.demo-ctl{position:absolute;bottom:8px;left:8px;right:8px;display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border-radius:999px;padding:5px 10px}
.demo-ctl button{color:#fff;display:flex}
.demo-ctl svg{width:18px;height:18px;fill:#fff}
.demo-ctl input[type=range]{flex:1;width:auto;padding:0;background:none;border:0;accent-color:var(--acc)}
.demo-ctl span{color:#fff;font-size:.68rem;font-weight:700;min-width:44px;text-align:right}
.frame-dots{position:absolute;top:8px;left:8px;display:flex;gap:4px}
.frame-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.frame-dots i.on{background:var(--acc)}

/* ---------- routine ---------- */
.rt-item{display:flex;gap:10px;align-items:center;padding:9px;background:var(--card2);border-radius:var(--r-s);border:1px solid transparent}
.rt-item img{width:56px;height:44px;object-fit:cover;border-radius:7px;flex:none;background:var(--card2)}
/* un svg suelto dentro de una fila flexible se estira y aplasta el texto hasta
   dejarlo en una letra por línea: se le fija el tamaño */
.rt-item > svg,.rt-item > span > svg{width:17px;height:17px;flex:none;fill:currentColor;color:var(--acc)}
.rt-item .bm-sin{width:56px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:7px;background:var(--card2)}
.rt-item .bm-sin svg{width:18px;height:18px;fill:currentColor;color:var(--dim2)}
/* la fila abre la lista y el botón verde la pone a sonar sin desplegarla */
.lista-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.lista-card .rt-item{grid-column:1;min-width:0}
.lista-play{grid-column:2;width:38px;height:38px;margin-right:9px;border:0;flex:none;
  border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center}
.lista-play svg{width:15px;height:15px;fill:var(--on-acc);color:var(--on-acc)}
.lista-play:active{transform:scale(.94)}
.lista-card .lista-temas{grid-column:1 / -1;min-width:0}
/* las canciones que cuelgan de una lista al desplegarla */
.lista-temas{border-top:1px solid var(--line);background:var(--bg)}
.lista-temas .pista{border-radius:0;background:none;border-bottom:1px solid var(--line);padding:9px 13px}
.lista-temas .pista:last-of-type{border-bottom:0}
.rt-item .grow{min-width:0}
.rt-item .grow > div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-idx{width:22px;height:22px;border-radius:50%;background:var(--acc-d);color:var(--acc);font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.setgrid{display:grid;grid-template-columns:26px 1fr 1fr 40px;gap:7px;align-items:center}
.setgrid .hd{font-size:.68rem;color:var(--dim2);text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.setgrid input{text-align:center;padding:.5em .3em}
.chk{width:34px;height:34px;border-radius:9px;border:1.6px solid var(--line);background:var(--card2);display:flex;align-items:center;justify-content:center}
.chk.on{background:var(--acc);border-color:var(--acc)}
.chk svg{width:17px;height:17px;stroke:var(--on-acc);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.chk.on svg{opacity:1}

/* ---------- stats ---------- */
/* Tarjetas de cifras. Se centran de verdad: la etiqueta larga ("Series
   totales") partía en dos líneas y descolocaba la fila entera, así que todas
   tienen la misma altura y el contenido va centrado en los dos ejes. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:9px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 8px;text-align:center;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;min-height:76px}
.stat b{display:block;font-size:1.3rem;line-height:1.05;font-weight:800;
  font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:.63rem;color:var(--dim2);text-transform:uppercase;
  letter-spacing:.3px;font-weight:700;line-height:1.25;max-width:100%;
  text-wrap:balance;hyphens:auto}
.bars{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:8px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.bars .b i{width:100%;background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 45%,transparent));border-radius:5px 5px 2px 2px;min-height:3px;transition:height .4s}
.bars .b span{font-size:.62rem;color:var(--dim2);font-weight:600}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .d{aspect-ratio:1;border-radius:6px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--dim2)}
.cal .d.on{background:var(--acc);color:var(--on-acc);font-weight:800}
.cal .d.today{outline:2px solid var(--blue)}

/* ---------- workout mode ---------- */
.wo-head{position:sticky;top:53px;z-index:40;background:var(--bg);padding:10px 0;margin-bottom:4px}
.prog{height:5px;background:var(--card2);border-radius:999px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--acc);transition:width .35s}
/* Pila fija sobre la barra de pestañas: cronómetro arriba, descanso debajo.
   Sin puntero salvo en sus hijos, para no tapar la página que hay detrás. */
.hud{position:fixed;left:0;right:0;bottom:calc(80px + var(--safe-b));z-index:55;
  padding:0 16px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.hud>*{pointer-events:auto}
.hud:empty{display:none}
.rest{padding:0}
.rest-in{max-width:900px;margin:0 auto;background:var(--acc);color:var(--on-acc);border-radius:var(--r);padding:11px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 28px rgba(0,0,0,.4);animation:up .3s}
@keyframes up{from{transform:translateY(20px);opacity:0}}
.rest-in svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rest-in b{font-size:1.5rem;font-variant-numeric:tabular-nums;font-weight:800;display:block}
.rest-in button{font-weight:700;background:rgba(0,0,0,.14);padding:.4em .8em;border-radius:8px;font-size:.82rem}

/* ---------- modal / toast ---------- */
.modal{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fade .2s}
.modal-box{background:var(--bg2);border-radius:22px 22px 0 0;width:100%;max-width:560px;
  max-height:90vh;overflow-y:auto;padding:0 17px calc(26px + var(--safe-b));
  animation:up .34s cubic-bezier(.32,.72,0,1)}
@media(min-width:640px){.modal{align-items:center;padding:20px}.modal-box{border-radius:22px}}

/* Cabecera de la hoja: se queda arriba aunque el contenido sea largo, se puede
   arrastrar para cerrar y lleva la X para quien no vaya a adivinar el gesto. */
.modal-cab{position:sticky;top:0;z-index:3;display:flex;align-items:center;
  justify-content:center;margin:0 -17px 12px;padding:13px 17px 11px;
  background:var(--bg2);border-radius:22px 22px 0 0;touch-action:none;cursor:pointer}
.modal-grab{width:38px;height:5px;background:var(--line);border-radius:99px;margin:0}
.modal-x{position:absolute;right:11px;top:7px;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:0;padding:0;
  background:var(--card2);color:var(--dim)}
.modal-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}
.modal-x:active{background:var(--line)}
.toast{position:fixed;bottom:calc(92px + var(--safe-b));left:50%;transform:translate(-50%,20px);
  background:color-mix(in srgb,var(--card2) 92%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line);color:var(--txt);padding:.62em 1.15em;border-radius:999px;
  font-size:.9rem;font-weight:500;z-index:150;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 8px 24px rgba(0,0,0,.35);max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* conmutador iOS */
.sw{width:51px;height:31px;border-radius:999px;background:var(--line);position:relative;
  flex:none;transition:background .22s cubic-bezier(.2,.9,.3,1)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;
  border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.28);
  transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.sw.on{background:var(--acc)}
.sw.on::after{transform:translateX(20px)}

.search-wrap{position:relative}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--dim2);fill:none;stroke-width:2}
.search-wrap input{padding-left:34px}
.instr{counter-reset:s;padding:0;margin:0;list-style:none}
.instr li{counter-increment:s;position:relative;padding-left:30px;margin-bottom:10px;font-size:.9rem;color:var(--dim)}
.instr li::before{content:counter(s);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:var(--card2);color:var(--acc);font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center}

/* ---------- carrusel por músculo ---------- */
.carousel{display:flex;gap:11px;overflow-x:auto;padding:2px 16px 10px;margin:0 -16px;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.carousel>.ex-card{flex:0 0 152px;scroll-snap-align:start}
.ex-card.more{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;background:var(--card2);color:var(--acc);min-height:190px}
.ex-card.more b{font-size:1.3rem;font-weight:800}
.ex-card.more span{font-size:.7rem;color:var(--dim2)}

/* ---------- animación del movimiento ----------
   Con dos fotogramas se logra un recorrido continuo encadenando opacidad y un
   ligero desplazamiento: el ojo lee el movimiento, no dos fotos alternas. */
.demo img{transform:scale(1.05);transition:opacity var(--fade,.42s) ease-in-out,
  transform var(--fade,.42s) ease-in-out}
.demo img.on{opacity:1;transform:scale(1)}
.demo.paused img{transition-duration:.15s}

/* ---------- gráficas animadas ---------- */
.bars .b i{height:0;transition:height .7s cubic-bezier(.2,.8,.3,1)}
.bars .b em{font-size:.62rem;font-style:normal;color:var(--acc);font-weight:700;opacity:0;
  transition:opacity .4s .5s}
.bars .b.in em{opacity:1}
.cal .d{transform:scale(.6);opacity:0;animation:pop .35s forwards}
@keyframes pop{to{transform:scale(1);opacity:1}}
.stat b{animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes rise{from{transform:translateY(8px);opacity:0}}

/* ---------- progreso de descarga sin conexión ---------- */
.dl{height:8px;background:var(--card2);border-radius:999px;overflow:hidden;margin:10px 0 6px}
.dl i{display:block;height:100%;width:0;background:var(--acc);transition:width .25s}

/* ---------- bloque de código (SQL de configuración) ---------- */
pre{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:11px 12px;overflow-x:auto;font-size:.72rem;line-height:1.5;margin:0 0 14px;
  font-family:var(--mono);color:var(--txt);
  white-space:pre;-webkit-overflow-scrolling:touch}
code{font-family:var(--mono);
  background:var(--card2);padding:.15em .4em;border-radius:5px;word-break:break-all}

/* ---------- perfil, objetivos, alertas, nutrición, IA y música ---------- */
.row-icon{width:29px;height:29px;border-radius:8px;background:var(--card2);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--acc)}
.row-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.list-row-val{font-size:.92rem;color:var(--dim2);white-space:nowrap}
.chevron{display:flex;align-items:center;color:var(--dim2)}
.chevron svg{width:9px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;transition:transform .2s}
.chevron.down svg{transform:rotate(90deg)}
.chevron.abierta svg{transform:rotate(90deg)}
.chevron.down.abierto svg{transform:rotate(-90deg)}
.list-row.sel{background:var(--acc-d)}
.meta-ok{border-color:var(--acc)}

.macro-bar{display:flex;height:9px;border-radius:999px;overflow:hidden;margin-top:14px;
  background:var(--card2);gap:2px}
.macro-bar i{display:block;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;
  margin-right:4px}

.meal{background:var(--card2);border-radius:var(--r-s);padding:11px 12px}
.ia-resp p{margin:0 0 .6em;font-size:.95rem}
.ia-resp p:last-child{margin-bottom:0}
.ia-bloque{padding:11px 0;border-top:1px solid var(--line)}
.ia-bloque:first-child{border-top:0;padding-top:2px}
.ia-bloque b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--dim2);margin-bottom:4px}
.ia-bloque p{margin:0;font-size:.95rem}
.ia-bloque.destacado b{color:var(--acc)}

/* el reproductor tiene sus estilos al final del archivo */

/* aviso de alerta pendiente al abrir la app */
.aviso{display:flex;gap:11px;align-items:center;background:var(--acc-d);
  border:1px solid var(--acc);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.aviso .row-icon{background:transparent}
.avisos{max-width:900px;margin:0 auto;padding:12px 16px 0}
.avisos:empty{display:none}

/* ---------- bóveda de claves ---------- */
.guia-tit{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:11px 0 3px;font-size:.9rem;font-weight:600;color:var(--acc)}
.guia-tit svg{width:8px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;transition:transform .2s}
.guia-tit.abierta svg{transform:rotate(90deg)}
.guia{padding-top:8px}
.guia .instr li{font-size:.88rem;margin-bottom:9px}
.guia code{font-size:.78rem}
.copiable{display:flex;align-items:center;gap:8px;background:var(--card2);
  border-radius:var(--r-s);padding:8px 8px 8px 11px}
.copiable code{background:none;padding:0;font-size:.74rem;overflow-x:auto;
  white-space:nowrap;flex:1;min-width:0}

/* ---------- bóveda de claves ---------- */
.guia-tit{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:11px 0 3px;font-size:.9rem;font-weight:600;color:var(--acc)}
.guia-tit svg{width:8px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;transition:transform .2s}
.guia-tit.abierta svg{transform:rotate(90deg)}
.guia{padding-top:8px}
.guia .instr li{font-size:.88rem;margin-bottom:9px}
.guia code{font-size:.78rem}
.copiable{display:flex;align-items:center;gap:8px;background:var(--card2);
  border-radius:var(--r-s);padding:8px 8px 8px 11px}
.copiable code{background:none;padding:0;font-size:.74rem;overflow-x:auto;
  white-space:nowrap;flex:1;min-width:0}

/* ---------- guía de técnica ---------- */
.fase{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;
  backdrop-filter:blur(8px);padding:.28em .7em;border-radius:999px;font-size:.72rem;
  font-weight:600;letter-spacing:-.01em}
.marcos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.marcos figure{margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.marcos img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.marcos figcaption{padding:8px 10px;font-size:.78rem;color:var(--dim);
  display:flex;align-items:center;gap:7px}
.marcos figcaption b{width:19px;height:19px;border-radius:50%;background:var(--acc);
  color:var(--on-acc);font-size:.68rem;display:flex;align-items:center;
  justify-content:center;flex:none}

.guia-bloque+.guia-bloque{margin-top:10px}
.guia-h{display:flex;align-items:center;gap:8px;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--dim2);margin:0 0 11px;font-weight:700}
.guia-h svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--acc)}
.fase-txt{padding:10px 0;border-top:1px solid var(--line)}
.fase-txt:first-of-type{border-top:0;padding-top:0}
.fase-txt b{display:inline-block;font-size:.75rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--acc);margin-bottom:4px}
.fase-txt p{margin:0;font-size:.95rem}
.guia-dato{display:flex;gap:11px;align-items:flex-start;padding:9px 0}
.guia-dato+.guia-dato{border-top:1px solid var(--line)}
.guia-dato b{display:block;font-size:.82rem;margin-bottom:2px}
.guia-dato p{margin:0;font-size:.9rem;color:var(--dim)}
.error-item{padding:10px 0;border-top:1px solid var(--line)}
.error-item:first-of-type{border-top:0;padding-top:0}
.error-item b{display:block;font-size:.92rem;color:var(--bad);margin-bottom:3px}
.error-item p{margin:0;font-size:.9rem;color:var(--dim)}
.destacado-clave{border-color:var(--acc);background:var(--acc-d)}
.destacado-clave p{font-size:.95rem}
.aviso-seguridad{border-color:var(--warn)}
.aviso-seguridad b{color:var(--warn);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
.aviso-seguridad p{font-size:.9rem;color:var(--dim)}

/* ---------- registro simple de series ---------- */
.objetivo{text-align:center;padding:6px 0 14px}
.objetivo b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.objetivo span{font-size:.8rem;color:var(--dim2)}
.serie-simple{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:13px 14px;background:var(--card2);border:1px solid transparent;
  border-radius:var(--r-s);transition:background .15s,border-color .15s,transform .12s}
.serie-simple:active{transform:scale(.985)}
.serie-simple.on{background:var(--acc-d);border-color:var(--acc)}
.serie-simple .grow{font-weight:600;font-size:.95rem}
.serie-simple .chk{width:30px;height:30px}
.list-row.tap[data-reg]{width:100%;text-align:left}

/* ---------- listas de reproducción ---------- */
.pista{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);transition:background .15s,transform .12s}
.pista:active{transform:scale(.985)}
.pista:hover{background:var(--card2)}
.pista svg{width:15px;height:15px;fill:currentColor;color:var(--acc);flex:none}
.pista .grow{min-width:0}

/* ---------- campos de clave ---------- */
.secreto{display:flex;gap:8px;align-items:center;margin-top:5px}
.secreto input{flex:1;min-width:0;font-family:var(--mono);font-size:.82rem;
  letter-spacing:.02em}
.secreto .btn{flex:none;padding:.55em .7em}
.secreto .btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9}
.secreto .btn.on{color:var(--acc);border-color:var(--acc)}

/* Tarjeta de sesión completa de una zona (pierna, empuje, tren superior…) */
.zona-card{border-color:var(--acc);background:var(--acc-d);margin-bottom:14px}

/* ---------- cronómetro del entrenamiento ---------- */
/* Banner que acompaña al usuario por toda la app mientras entrena. */
.crono{max-width:900px;margin:0 auto;width:100%;display:flex;align-items:center;gap:11px;
  background:var(--acc);color:var(--on-acc);border-radius:var(--r);padding:9px 10px 9px 14px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);animation:up .3s}
.crono-ir{display:flex;align-items:center;gap:11px;flex:1;min-width:0;color:inherit;padding:0;
  text-align:left;background:none}
.crono-pulso{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none;
  animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.crono-txt{min-width:0}
.crono-txt span{display:block;font-size:.64rem;font-weight:800;letter-spacing:.06em;opacity:.75}
.crono-txt b{display:block;font-size:.86rem;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.crono-t{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.crono-fin{flex:none;font-weight:700;font-size:.8rem;background:rgba(0,0,0,.16);color:inherit;
  padding:.5em .85em;border-radius:9px}
.crono-fin:active{transform:scale(.95)}
body.con-crono{padding-bottom:calc(142px + var(--safe-b))}

/* ---------- programa personal ---------- */
/* Cabecera plegable de cada día del programa */
/* El punto verde de un proveedor de IA que ya tiene clave puesta */
.punto-ok{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--acc);vertical-align:middle;margin-left:2px}

/* La versión, al pie de la portada. Callada cuando no hay nada que hacer y
   con cara de botón cuando hay una nueva esperando. */
.pie-version{margin:22px 4px 4px;font-size:.72rem;color:var(--dim2);text-align:center}
.pie-version:empty{display:none}
.pie-version.hay-nueva{display:block;width:100%;text-align:left;padding:12px 14px;
  border:1px solid var(--acc);border-radius:14px;background:var(--acc-d);
  color:var(--txt);cursor:pointer}
.pie-version.hay-nueva b{display:block;font-size:.92rem;color:var(--acc)}
.pie-version.hay-nueva span{display:block;margin-top:3px;font-size:.76rem;color:var(--dim)}

/* La semana de un vistazo en la portada. Cada día es una letra y un punto:
   lleno = entrenado, hueco = había plan y no se hizo, apagado = día libre. */
.semana{display:flex;gap:6px}
.sem-dia{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.sem-dia span{font-size:.68rem;color:var(--dim2);letter-spacing:.03em}
.sem-dia i{display:block;width:100%;height:26px;border-radius:8px;
  background:var(--card2);border:1px solid transparent}
.sem-dia.plan i{border-color:var(--line)}
.sem-dia.toca i{border-color:var(--acc);border-style:dashed}
.sem-dia.fallado i{border:1px dashed var(--dim2);opacity:.65}
.sem-dia.hecho i{background:var(--acc);border-color:var(--acc)}
.sem-dia.es-hoy span{color:var(--txt);font-weight:700}

/* Cabecera de cada día en la lista de rutinas: pliega su grupo. La semana
   entera desplegada obligaba a bajar mucho para llegar al jueves. */
.dia-grupo{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 4px;margin-top:14px;background:none;color:var(--txt);border:0}
.dia-grupo .tiny{color:var(--dim2)}
/* La señal de plegar. Un galoncito de 9 px en la esquina no se veía: no
   quedaba claro que el plan se abriera tocando. Ahora dice lo que hace y la
   flecha apunta abajo cuando hay algo por ver y arriba cuando ya está abierto. */
.dia-grupo .plegador{flex:none;display:flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:999px;background:var(--card2);color:var(--acc)}
.dia-grupo .plegador-txt{font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em}
.dia-grupo .plegador svg{width:9px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(90deg);transition:transform .2s}
.dia-grupo .plegador.abierto svg{transform:rotate(-90deg)}

.dia-cab{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:13px;background:none;color:var(--txt)}
.dia-cab .chevron svg{transition:transform .18s}
.dia-cab .chevron.abierta svg{transform:rotate(90deg)}

/* Los pasos del asistente de plan: el número ancla la lectura */
.paso-plan{padding:14px}
.paso-plan .paso-n{flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--acc-d);color:var(--acc);display:flex;align-items:center;
  justify-content:center;font-size:.76rem;font-weight:700}

/* ---------- la semana del plan ----------
   Cada día es una ficha que se lee sola: qué trabaja, cuánto cuesta, y dentro
   los ejercicios en orden con los básicos marcados. Cerrados salvo el primero,
   que seis días abiertos son cincuenta filas iguales. */
.semana-plan{display:flex;flex-direction:column;gap:10px}

.dia{background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:border-color .18s}
.dia.abierto{border-color:var(--acc)}

.dia-top{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:13px 14px 11px;background:none;color:var(--txt);border:0}

/* el día, en una pastilla cuadrada: ancla la vista sin leer nada */
.dia-ini{flex:none;width:38px;height:38px;border-radius:11px;background:var(--card2);
  color:var(--dim);display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.dia.abierto .dia-ini{background:var(--acc-d);color:var(--acc)}

.dia-nom{display:block;font-weight:700;font-size:.95rem;line-height:1.25}
.dia-mus{display:block;margin-top:2px;font-size:.76rem;color:var(--dim2);
  text-transform:lowercase}

.dia-chev{flex:none;display:flex;align-items:center;color:var(--dim2)}
.dia-chev svg{width:9px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);
  transition:transform .22s cubic-bezier(.32,.72,0,1)}
.dia-chev.abierto svg{transform:rotate(-90deg)}

/* los tres números del día, siempre a la vista aunque esté plegado */
.dia-datos{display:flex;gap:16px;padding:0 14px 13px 63px}
.dia-datos span{font-size:.74rem;color:var(--dim2)}
.dia-datos b{font-size:.9rem;color:var(--txt);font-weight:700;margin-right:3px}

.dia-lista{border-top:1px solid var(--line)}

.ejer{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 14px;background:none;color:var(--txt);border:0;
  border-bottom:1px solid var(--line);position:relative}
.ejer:last-of-type{border-bottom:0}
.ejer:active{background:var(--card2)}
/* los básicos llevan un filo de color: se ven sin leer y sin meter una etiqueta */
.ejer.clave::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--acc)}

.ejer-n{flex:none;width:19px;font-size:.72rem;color:var(--dim2);font-weight:700;
  text-align:center}
.ejer img{width:46px;height:38px;object-fit:cover;border-radius:9px;flex:none}
.ejer-nom{display:block;font-weight:600;font-size:.87rem;line-height:1.3}
.ejer-meta{display:block;margin-top:2px;font-size:.75rem;color:var(--dim2)}
.ejer-meta i{font-style:normal;opacity:.5;margin:0 2px}
.ejer-nota{display:block;margin-top:3px;font-size:.73rem;color:var(--acc);line-height:1.35}
.ejer-mus{flex:none;font-size:.68rem;color:var(--dim2);text-transform:uppercase;
  letter-spacing:.03em;max-width:72px;text-align:right;line-height:1.2}

.dia-pie{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--line);
  background:var(--bg2)}

/* Plan contra realidad, en Progreso: dos barras sobre el mismo carril */
.pvr{display:flex;flex-direction:column;gap:3px}
.pvr-fila{display:flex;align-items:center;gap:10px;padding:3px 0}
.pvr-nom{flex:none;width:88px;font-size:.76rem;color:var(--dim)}
.pvr-pista{position:relative;flex:1;height:16px}
.pvr-plan{position:absolute;left:0;top:2px;height:12px;border-radius:6px;
  background:var(--line)}
.pvr-real{position:absolute;left:0;top:5px;height:6px;border-radius:3px;
  background:var(--acc);transition:width .45s cubic-bezier(.2,.9,.3,1)}
.pvr-num{flex:none;width:56px;text-align:right;font-size:.8rem;font-weight:700;color:var(--dim)}
.pvr-hecho{display:block;font-size:.72rem;font-weight:700;color:var(--acc)}
.pvr-leyenda{display:flex;gap:14px;justify-content:center;margin-top:10px}
.pvr-leyenda span{font-size:.7rem;color:var(--dim2);display:flex;align-items:center;gap:5px}
.pvr-leyenda .pt{width:9px;height:9px;border-radius:3px;display:inline-block}
.pvr-leyenda .pt.plan{background:var(--line)}
.pvr-leyenda .pt.real{background:var(--acc)}

/* La frase del día, donde antes había un hueco */
.pildora-hueco{min-height:0}
.pildora{display:flex;align-items:flex-start;gap:11px;margin-top:14px;
  border-color:color-mix(in srgb,var(--acc) 30%,var(--line));
  background:color-mix(in srgb,var(--acc) 6%,var(--card))}
.pildora .grow{font-size:.9rem;line-height:1.45}
.pildora-ico{flex:none;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--acc-d);color:var(--acc)}
.pildora-ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* Composición del plan: qué zonas y en qué proporción */
.comp{display:flex;flex-direction:column;gap:3px}
.comp-fila{display:flex;align-items:center;gap:10px;padding:4px 0}
.comp-nom{flex:none;width:88px;font-size:.79rem;color:var(--txt)}
.comp-pista{flex:1;height:10px;border-radius:5px;background:var(--card2);overflow:hidden}
.comp-pista i{display:block;height:100%;border-radius:5px;background:var(--acc);
  transition:width .45s cubic-bezier(.2,.9,.3,1)}
.comp-num{flex:none;width:62px;text-align:right;font-size:.82rem;font-weight:700}
.comp-pct{display:block;font-size:.68rem;font-weight:600;color:var(--dim2)}

/* ---------- reparto de la semana ----------
   El objetivo es el centro y cada barra sale de ahí: a la derecha lo que sobra,
   a la izquierda lo que falta. Once barras iguales no dicen nada; una barra que
   se va hacia un lado se lee sin pensar. */
.vol2{display:flex;flex-direction:column;gap:2px}
.vol2-fila{display:flex;align-items:center;gap:9px;padding:3px 0}
.vol2-nom{flex:none;width:92px;font-size:.76rem;color:var(--dim)}
.vol2-pista{position:relative;flex:1;height:16px}
/* el carril, con su marca central */
.vol2-pista::before{content:'';position:absolute;left:0;right:0;top:7px;height:2px;
  border-radius:2px;background:var(--line)}
.vol2-meta{position:absolute;left:50%;top:0;width:2px;height:16px;margin-left:-1px;
  background:var(--dim2);opacity:.7}
.vol2-barra{position:absolute;top:4px;height:8px;border-radius:4px;
  transition:width .4s cubic-bezier(.2,.9,.3,1)}
.vol2-barra.bien{background:var(--acc)}
.vol2-barra.pasa{background:var(--warn)}
.vol2-barra.corto{background:var(--bad)}
.vol2-num{flex:none;width:58px;text-align:right;font-size:.8rem;font-weight:700}
.vol2-num.bien{color:var(--txt)}
.vol2-num.pasa{color:var(--warn)}
.vol2-num.corto{color:var(--bad)}
.vol2-real{display:block;font-size:.66rem;font-weight:600;color:var(--brand-1)}

.vol2-leyenda{display:flex;gap:14px;justify-content:center;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line)}
.vol2-leyenda span{font-size:.7rem;color:var(--dim2);display:flex;align-items:center;gap:5px}
.vol2-leyenda .pt{width:8px;height:8px;border-radius:50%;display:inline-block}
.vol2-leyenda .pt.bien{background:var(--acc)}
.vol2-leyenda .pt.pasa{background:var(--warn)}
.vol2-leyenda .pt.corto{background:var(--bad)}

/* Series por semana y músculo, con la marca del objetivo */
.vol-fila{display:flex;align-items:center;gap:10px;padding:7px 0}
.vol-nom{flex:none;width:104px;font-size:.78rem;color:var(--dim)}
.vol-barra{position:relative;flex:1;height:9px;border-radius:5px;background:var(--line)}
.vol-barra i{display:block;height:100%;border-radius:5px;background:var(--acc);
  transition:width .45s cubic-bezier(.2,.9,.3,1)}
/* marca del objetivo semanal, sobresaliendo por arriba y por abajo de la barra */
.vol-barra u{position:absolute;top:-4px;width:2px;height:17px;background:var(--txt);opacity:.5}
/* La barra fina de debajo es lo que ha entrenado de verdad. El plan sin esto
   era una foto de lo que debería pasar, no de lo que pasa. */
.vol-barra b.vol-real{position:absolute;left:0;bottom:-6px;height:3px;border-radius:2px;
  background:var(--blue);display:block}
.vol-hecho{display:block;font-size:.68rem;font-weight:600;color:var(--blue);line-height:1.1}
.vol-num{flex:none;width:34px;text-align:right;font-size:.8rem;font-weight:700;
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* Cada motivo del plan, numerado */
.razon{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.razon p{margin:0;font-size:.87rem;line-height:1.45}
.razon .rt-idx{margin-top:1px}

.tiny-chip{font-size:.6rem;padding:.15em .5em;margin-left:5px;vertical-align:middle}

/* ---------- rutinas: orden manual y la de hoy ---------- */
/* La rutina que toca hoy se distingue sin gritar */
.card-hoy{border-color:var(--acc)}
/* Flechas para colocar las rutinas a mano */
.mover{display:flex;flex-direction:column;gap:5px;flex:none;margin-right:11px}
.mover .btn{width:34px;height:30px;padding:0}
.mover .btn svg{width:15px;height:15px}

/* ---------- saludo al abrir la app ---------- */
.saludo{border-color:var(--acc);background:var(--acc-d);animation:up .35s cubic-bezier(.2,.9,.3,1)}
.saludo p{color:var(--txt);opacity:.9;line-height:1.45}
.saludo .btn.icon{margin:-4px -4px 0 6px;border-color:transparent;opacity:.5}

/* El saludo entra en dos tiempos: primero el nombre, después el mensaje.
   Con prefers-reduced-motion se queda quieto, que para algunas personas el
   movimiento marea. */
.saludo-tit{font-size:1.18rem;font-weight:700;letter-spacing:-.02em;margin:0 0 3px;
  line-height:1.25}
.saludo-tit .nombre{color:var(--acc)}
.entra{opacity:0;animation:entra .5s cubic-bezier(.2,.9,.3,1) forwards}
.entra-2{animation-delay:.13s}
@keyframes entra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .entra{animation:none;opacity:1}
  .saludo{animation:none}
}

/* El "Hola, Fabián" de la portada, más contenido que un titular */
.hola{font-size:1.35rem;font-weight:700;letter-spacing:-.022em;margin:0 0 2px}
.hola .nombre{color:var(--acc)}

/* Punto de estado de la sincronización */
.punto-sync{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
#sync-estado .btn{flex:none;white-space:nowrap}

/* ---------- modo invitado y paso a paso ---------- */
/* Franja que recuerda dónde viven los datos, sin dar la lata */
.franja-invitado{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  margin-top:14px;border-style:dashed;color:var(--txt)}
.franja-invitado .row-icon{color:var(--warn)}

/* Las dos formas de empezar */
.modo-op{padding:15px;align-items:flex-start}
.modo-op .row-icon{margin-top:2px}

/* Cada paso de la guía, numerado */
.paso-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--acc);
  color:var(--on-acc);font-weight:800;font-size:.82rem;display:flex;
  align-items:center;justify-content:center}
.paso .instr li{margin-bottom:6px}
.paso pre{margin:0}

/* ---------- tarjeta de rutina ---------- */
/* Lo que uno busca es el día y qué se trabaja; el nombre va debajo y pequeño */
.rt-titulo{font-weight:700;font-size:1.02rem;letter-spacing:-.015em}
.rt-nombre{font-size:.82rem;color:var(--dim);margin-top:1px}
.rt-detalle{border-top:1px solid var(--line);animation:fade .2s ease}
.rt-detalle .rt-item{border:0;border-bottom:1px solid var(--line);border-radius:0}
.rt-detalle .rt-item:last-of-type{border-bottom:0}
.tiny-chip svg{width:11px;height:11px;vertical-align:-1px}

/* ---------- reproductor ---------- */
.player{background:linear-gradient(160deg,var(--bg2),color-mix(in srgb,var(--acc) 9%,var(--bg2)));
  border:1px solid var(--line);border-radius:var(--r);padding:18px;text-align:center}
.player-art{width:158px;height:158px;object-fit:cover;border-radius:14px;margin:0 auto 14px;
  display:block;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.player-art.vacia{display:flex;align-items:center;justify-content:center;background:var(--bg3, var(--line))}
.player-art.vacia svg{width:52px;height:52px;fill:none;stroke:var(--dim2);stroke-width:1.6}
.player.sonando .player-art{animation:latir 4s ease-in-out infinite}
@keyframes latir{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
.player-t{font-weight:700;font-size:1.02rem;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-a{font-size:.85rem;color:var(--dim);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-barra{height:4px;border-radius:2px;background:var(--line);margin:14px 0 5px;overflow:hidden}
.player-barra i{display:block;height:100%;background:var(--acc);border-radius:2px;
  transition:width 1s linear}
.player-tiempos{display:flex;justify-content:space-between;font-size:.7rem;color:var(--dim2);
  font-variant-numeric:tabular-nums}
.player-mandos{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.player-b{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:none;color:var(--txt);padding:0}
.player-b svg{width:26px;height:26px}
.player-b svg.lleno{fill:currentColor;stroke:none}
.player-b:active{transform:scale(.9)}
.player-b.grande{width:62px;height:62px;background:var(--acc);color:var(--on-acc);
  box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 40%,transparent)}
.player-b.grande svg{width:30px;height:30px}
/* De qué lista sale lo que suena: sonaba y no había forma de saber qué era. */
.player-de{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:7px;
  font-size:.78rem;color:var(--acc);min-width:0}
.player-de svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.player-de span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-donde{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;
  font-size:.75rem;color:var(--dim2)}
.player-donde svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- barra de música en toda la app ---------- */
.barra-musica{max-width:900px;margin:0 auto;width:100%;display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--bg2) 92%,var(--acc));border:1px solid var(--line);
  border-radius:var(--r);padding:7px 9px;box-shadow:0 8px 24px rgba(0,0,0,.3);animation:up .3s}
.bm-ir{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0;background:none;
  color:var(--txt);text-align:left}
.bm-ir img,.bm-sin{width:38px;height:38px;border-radius:8px;flex:none;object-fit:cover}
.bm-sin{display:flex;align-items:center;justify-content:center;background:var(--line)}
.bm-sin svg{width:19px;height:19px;fill:none;stroke:var(--dim2);stroke-width:1.8}
.bm-txt{min-width:0;display:block}
.bm-txt b{display:block;font-size:.83rem;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.bm-txt span{display:block;font-size:.72rem;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bm-b{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:none;color:var(--txt);padding:0}
.bm-b svg{width:21px;height:21px;fill:currentColor;stroke:none}
.bm-b:active{transform:scale(.9)}
body.con-musica{padding-bottom:calc(140px + var(--safe-b))}
body.con-musica.con-crono{padding-bottom:calc(200px + var(--safe-b))}
/* Aleatorio y corazón: más pequeños, que son secundarios */
.player-b.chico{width:38px;height:38px;color:var(--dim2)}
.player-b.chico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.player-b.chico.on{color:var(--acc)}
.player-b.chico.fav{color:var(--bad)}
.player-b.chico.fav svg{fill:currentColor}
/* Sin el corazón la fila queda coja y el play deja de caer en el centro de la
   pantalla, que es donde se busca con el pulgar. Este hueco lo compensa. */
.player-b.chico.hueco{visibility:hidden;pointer-events:none}
/* El chevron del plegable mira abajo cuando está abierto y a la derecha cuando
   está cerrado, como el resto de desplegables de la app. */
.btn.plegar svg{width:15px;height:15px;transition:transform .18s ease}
.btn.plegar.abierta svg{transform:rotate(90deg)}
/* Volumen del reproductor propio */
.player-vol{display:flex;align-items:center;gap:10px;margin-top:14px}
.player-vol svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--dim2);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.player-vol input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:22px;
  background:none;margin:0}
/* la pista se pinta a mano: la de serie sale gris y con bordes que desentonan */
.player-vol input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;
  background:linear-gradient(to right,var(--acc) var(--pct,60%),var(--line) var(--pct,60%))}
.player-vol input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:var(--line)}
.player-vol input[type=range]::-moz-range-progress{height:5px;border-radius:99px;background:var(--acc)}
.player-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--txt);margin-top:-5px;
  box-shadow:0 1px 4px rgba(0,0,0,.45)}
.player-vol input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;
  background:var(--txt);box-shadow:0 1px 4px rgba(0,0,0,.45)}

/* ---------- progreso: gráficos ---------- */
.graf-caja{overflow:hidden}
.graf-dato{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.graf{width:100%;height:120px;display:block;overflow:visible}
.graf-linea{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.graf-p{fill:var(--bg2);stroke:var(--acc);stroke-width:1.6;vector-effect:non-scaling-stroke}
.graf-ultimo{fill:var(--acc);stroke:var(--bg2);stroke-width:2;vector-effect:non-scaling-stroke}
.graf-ejes{display:flex;justify-content:space-between;margin-top:6px}
.graf-ejes span{flex:1;text-align:center;font-size:.6rem;color:var(--dim2);font-weight:600;
  white-space:nowrap;overflow:visible}

/* Mapa de calor: 12 columnas de 7 días */
.calor-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* con 52 columnas hay que dar aire: si no, cada día mide cuatro píxeles y las
   etiquetas de mes se parten letra a letra */
.calor-scroll.ancho .calor-caja{min-width:calc(var(--cols,12) * 11px)}
.calor-caja{min-width:100%}
.calor{display:grid;grid-auto-flow:column;gap:3px}
.calor i{aspect-ratio:1;border-radius:3px;background:var(--card2);
  transform:scale(.5);opacity:0;animation:pop .3s forwards}
.calor i.n1{background:color-mix(in srgb,var(--acc) 28%,var(--card2))}
.calor i.n2{background:color-mix(in srgb,var(--acc) 50%,var(--card2))}
.calor i.n3{background:color-mix(in srgb,var(--acc) 74%,var(--card2))}
.calor i.n4{background:var(--acc)}
.calor i.hoy{outline:2px solid var(--blue);outline-offset:1px}
.calor-meses{display:grid;grid-template-columns:repeat(var(--cols,12),1fr);gap:3px;
  margin-bottom:5px}
.calor-meses span{font-size:.58rem;color:var(--dim2);font-weight:600;
  white-space:nowrap;overflow:visible;line-height:1}
.calor-pie{display:flex;align-items:center;gap:4px;margin-top:9px;justify-content:flex-end}
.calor-pie span{font-size:.6rem;color:var(--dim2)}
.calor-pie i{width:10px;height:10px;border-radius:2px;background:var(--card2)}
.calor-pie i.n1{background:color-mix(in srgb,var(--acc) 28%,var(--card2))}
.calor-pie i.n2{background:color-mix(in srgb,var(--acc) 50%,var(--card2))}
.calor-pie i.n3{background:color-mix(in srgb,var(--acc) 74%,var(--card2))}
.calor-pie i.n4{background:var(--acc)}

/* Reparto por zona */
.zona-fila{display:flex;align-items:center;gap:10px;padding:5px 0}
.zona-nom{flex:none;width:74px;font-size:.78rem;color:var(--dim)}
.zona-barra{flex:1;height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.zona-barra i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 60%,var(--blue)),var(--acc));
  transition:width .6s cubic-bezier(.2,.9,.3,1)}
.zona-num{flex:none;width:34px;text-align:right;font-size:.78rem;font-weight:700;
  font-variant-numeric:tabular-nums}

/* ---------- metas en progreso ---------- */
.meta{display:flex;align-items:center;gap:13px}
.meta.lograda{border-color:var(--acc);background:var(--acc-d)}
.meta-t{font-weight:700;font-size:.92rem;line-height:1.2}
.anillo{width:52px;height:52px;flex:none}
.anillo circle{fill:none;stroke-width:4.5;transform:rotate(-90deg);transform-origin:50% 50%}
.anillo-fondo{stroke:var(--line)}
.anillo-arco{stroke:var(--acc);stroke-linecap:round}
.anillo.ok .anillo-arco{stroke:var(--acc)}
.anillo-txt{fill:var(--txt);font-size:13px;font-weight:800;text-anchor:middle;
  dominant-baseline:central;font-variant-numeric:tabular-nums}
.anillo-pc{font-size:8px;font-weight:700;fill:var(--dim2)}