/* ═══════════════════════════════════════════════════════════
   ATLAS · el estilo

   De la web de referencia que eligió Daniel se toma solo la forma
   (nada de su contenido, su marca ni sus colores): mucho blanco,
   titulares gruesos y apretados, texto ligero, botones de píldora
   y antetítulos en mayúsculas espaciadas.

   Solo móvil. En una pantalla grande se queda una columna de móvil
   centrada, porque no está pensada para el ordenador.

   ⚠️ La CSP prohíbe estilos en línea (style="…"). Lo que dependa de
   un dato (anchos de barras, colores de un músculo) se pasa con
   variables CSS desde JS (el.style.setProperty), que sí se permite.
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family: 'Inter'; src: url('tipos/inter.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('tipos/inter-tight.woff2') format('woff2'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('tipos/archivo.woff2') format('woff2'); font-weight: 500 600; font-stretch: 112% 125%; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('tipos/cinzel.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }

/* ═══════════════════════════════════════════════════════════
   (paleta) Ni verde ni oro, lo pidió Daniel el 10/10/2026. De la
   web de referencia se queda la forma: blanco, titulares gruesos,
   texto ligero, píldoras. El color es otro: negro para la acción
   principal y azul cobalto como único acento (casa con el fondo
   azul claro de los dibujos de RepDB). El naranja «calor» vive solo
   en la pantalla de entrenar, para los tramos de esfuerzo.
   ═══════════════════════════════════════════════════════════ */
:root {
  --acento: #2350e6;
  --acento-osc: #1a3cb0;
  --acento-claro: #4c74ff;
  --acento-suave: #ecf0fe;
  --grad-acento: linear-gradient(45deg, #1c44d2, #4470ff);
  --noche: #121a2e;
  --grad-noche: linear-gradient(45deg, #0e1424, #22325a);
  --calor: #f2622e;
  --rojo: #c93a2e;

  --tinta: #131416;
  --tinta-2: #5e6166;
  --tinta-3: #8e9196;
  --linea: #d9dadc;
  --linea-2: #ecedee;
  --fondo: #ffffff;
  --fondo-2: #f6f6f7;
  --fondo-3: #eeeff1;
  --tarjeta: #ffffff;
  --velo: rgba(14, 16, 20, 0.45);
  --sombra: 0 10px 30px rgba(14, 18, 30, 0.10);

  --f-texto: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-titulo: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-rotulo: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-marca: 'Cinzel', 'Times New Roman', serif;

  --r-chico: 10px;
  --r: 16px;
  --r-grande: 24px;
  --barra-abajo: calc(64px + env(safe-area-inset-bottom, 0px));
  --margen: 20px;

  color-scheme: light;
}

/* Tema oscuro: por sistema o elegido en Ajustes */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --acento: #6688ff; --acento-osc: #4c6ff0; --acento-claro: #8aa4ff; --acento-suave: #141c33;
    --grad-acento: linear-gradient(45deg, #3a62f0, #6e8fff); --noche: #1a2440; --rojo: #e2725e;
    --tinta: #f3f4f6; --tinta-2: #a3a7ae; --tinta-3: #767a81; --linea: #2c2f35; --linea-2: #202226;
    --fondo: #0b0c0e; --fondo-2: #141518; --fondo-3: #1c1e22; --tarjeta: #121316;
    --velo: rgba(0, 0, 0, 0.6); --sombra: 0 10px 30px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --acento: #6688ff; --acento-osc: #4c6ff0; --acento-claro: #8aa4ff; --acento-suave: #141c33;
  --grad-acento: linear-gradient(45deg, #3a62f0, #6e8fff); --noche: #1a2440; --rojo: #e2725e;
  --tinta: #f3f4f6; --tinta-2: #a3a7ae; --tinta-3: #767a81; --linea: #2c2f35; --linea-2: #202226;
  --fondo: #0b0c0e; --fondo-2: #141518; --fondo-3: #1c1e22; --tarjeta: #121316;
  --velo: rgba(0, 0, 0, 0.6); --sombra: 0 10px 30px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font: 300 16px/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Solo los enlaces dentro de un texto llevan subrayado; los demás son
   tarjetas, filas o botones y ya se ven tocables por su forma. */
p a, .mini a, .chico a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
::selection { background: var(--acento-suave); }

/* ── La columna de móvil ─────────────────────────────────── */
#app { max-width: 520px; margin: 0 auto; min-height: 100%; position: relative; background: var(--fondo); }
@media (min-width: 560px) {
  body { background: var(--fondo-3); }
  #app { box-shadow: 0 0 0 1px var(--linea-2), var(--sombra); }
}

.pantalla { padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--margen) calc(var(--barra-abajo) + 28px); display: flex; flex-direction: column; gap: 28px; }
.pantalla.sin-barra { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px); }

/* ── Tipografía ──────────────────────────────────────────── */
.rotulo { font: 500 11px/1.4 var(--f-rotulo); font-stretch: 125%; letter-spacing: .125em; text-transform: uppercase; color: var(--tinta-2); }
.rotulo.acento { color: var(--acento); }
.titulo { font: 700 34px/1.02 var(--f-titulo); letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.titulo.xl { font-size: 42px; }
.titulo.m { font-size: 26px; line-height: 1.08; }
.titulo.s { font-size: 20px; line-height: 1.15; letter-spacing: -.005em; }
.subtitulo { font: 600 17px/1.3 var(--f-titulo); margin: 0; }
.entradilla { font-size: 17px; line-height: 1.55; color: var(--tinta-2); margin: 0; }
.entradilla b, .entradilla strong { color: var(--tinta); font-weight: 600; }
.texto-2 { color: var(--tinta-2); }
.texto-3 { color: var(--tinta-3); }
.chico { font-size: 13.5px; line-height: 1.45; }
.mini { font-size: 12px; line-height: 1.4; }
.num { font-family: var(--f-titulo); font-variant-numeric: tabular-nums; }
.centro { text-align: center; }
.cabeza { display: flex; flex-direction: column; gap: 8px; }
.cabeza.centro { align-items: center; }
.cabeza .entradilla { max-width: 34em; }

/* ── Barra de arriba ─────────────────────────────────────── */
.arriba {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  margin: calc(-8px - env(safe-area-inset-top, 0px)) calc(var(--margen) * -1) 0;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 6px;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.arriba.con-borde { border-bottom-color: var(--linea-2); }
.arriba .centro-marca { justify-self: center; }
.arriba .titulo-barra { justify-self: center; font: 600 16px/1.2 var(--f-titulo); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); text-decoration: none; }
.marca svg { width: 22px; height: 22px; }
.marca span { font: 700 17px/1 var(--f-marca); letter-spacing: .16em; color: var(--tinta); }
.marca.grande { flex-direction: column; gap: 14px; }
.marca.grande svg { width: 54px; height: 54px; }
.marca.grande span { font-size: 34px; letter-spacing: .2em; }

.boton-icono {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent;
  display: inline-grid; place-items: center; color: var(--tinta);
}
.boton-icono:active { background: var(--fondo-3); }
.boton-icono svg { width: 22px; height: 22px; }
.boton-icono.relleno { background: var(--fondo-2); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tinta); color: var(--fondo); font: 600 14px/1 var(--f-titulo); letter-spacing: .02em;
  border: 0;
}
.avatar.grande { width: 76px; height: 76px; font-size: 28px; }

/* ── Botones ─────────────────────────────────────────────── */
.boton {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 15.5px/1 var(--f-texto); letter-spacing: .01em; text-decoration: none;
  transition: transform .12s ease, opacity .12s ease, background-color .2s;
  user-select: none;
}
.boton:active { transform: scale(.98); }
.boton[disabled] { opacity: .45; pointer-events: none; }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton.principal { background: var(--tinta); color: var(--fondo); box-shadow: 0 6px 18px rgba(19, 20, 22, .22); }
.boton.secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton.suave { background: var(--fondo-2); color: var(--tinta); }
.boton.acento { background: var(--grad-acento); color: #fff; box-shadow: 0 6px 18px rgba(35, 80, 230, .28); }
.boton.peligro { background: transparent; color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 45%, transparent); }
.boton.ancho { width: 100%; }
.boton.chico { min-height: 40px; padding: 0 18px; font-size: 14px; }
.enlace { background: none; border: 0; padding: 6px 0; color: var(--acento); font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.enlace svg { width: 16px; height: 16px; }
.botones { display: flex; gap: 10px; flex-wrap: wrap; }
.botones > .boton { flex: 1 1 140px; }
.botones.pila { flex-direction: column; }
.botones.pila > .boton { flex: none; }

/* ── Tarjetas y listas ───────────────────────────────────── */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea-2); border-radius: var(--r-grande); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.tarjeta.gris { background: var(--fondo-2); border-color: transparent; }
.tarjeta.plana { padding: 0; overflow: hidden; }
.tarjeta.noche { background: var(--grad-noche); color: #fff; border-color: transparent; }
.tarjeta.noche .rotulo { color: #c3cce0; }
.tarjeta.noche .texto-2 { color: #c9d1e3; }
.tarjeta.acento { background: var(--acento-suave); border-color: transparent; }
.tarjeta-cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.seccion { display: flex; flex-direction: column; gap: 14px; }
.explorador { display: flex; flex-direction: column; gap: 22px; }
.seccion-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.separador { height: 1px; background: var(--linea-2); border: 0; margin: 0; }

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fila {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--linea-2);
  background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; width: 100%; color: inherit; text-decoration: none;
}
.fila:last-child { border-bottom: 0; }
.fila .icono-fila { width: 40px; height: 40px; border-radius: 12px; background: var(--fondo-2); display: grid; place-items: center; color: var(--acento); }
.fila .icono-fila svg { width: 20px; height: 20px; }
.fila .fila-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila .fila-titulo { font-weight: 500; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; }
.fila .fila-nota { font-size: 13px; color: var(--tinta-2); }
.chevron { color: var(--tinta-3); width: 18px; height: 18px; flex: none; }
.fila.sin-icono { grid-template-columns: 1fr auto; }

/* ── Chips ───────────────────────────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips.desliza { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--margen) * -1); padding: 2px var(--margen); scroll-padding: 0 var(--margen); }
.chips.desliza::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta);
  font: 500 13.5px/1 var(--f-texto); white-space: nowrap;
}
.chip svg { width: 15px; height: 15px; }
.chip .cuenta { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.chip.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.chip.activo .cuenta { color: #c3cce0; }
.chip.etiqueta { min-height: 26px; padding: 0 10px; font-size: 12px; border-color: transparent; background: var(--fondo-2); color: var(--tinta-2); }
.chip.etiqueta.acento { background: var(--acento-suave); color: var(--acento); }

/* ── Formularios ─────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo > label, .etiqueta-campo { font: 500 11px/1.3 var(--f-rotulo); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.entrada {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--linea); background: var(--fondo); font-size: 16.5px; font-weight: 400;
  transition: border-color .15s, box-shadow .15s;
}
textarea.entrada { padding: 14px 16px; min-height: 96px; resize: vertical; line-height: 1.5; }
.entrada:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 14%, transparent); }
.entrada.mal { border-color: var(--rojo); }
select.entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.ayuda { font-size: 13px; color: var(--tinta-2); }
.error-campo { font-size: 13px; color: var(--rojo); }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tres-columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.formulario { display: flex; flex-direction: column; gap: 16px; }
.buscador { position: relative; }
.buscador svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--tinta-3); pointer-events: none; }
.buscador .entrada { padding-left: 46px; background: var(--fondo-2); border-color: transparent; }
.buscador .entrada:focus { background: var(--fondo); }

.interruptor { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--linea-2); }
.interruptor:last-child { border-bottom: 0; }
.interruptor input { appearance: none; width: 50px; height: 30px; border-radius: 999px; background: var(--linea); position: relative; transition: background .2s; margin: 0; flex: none; }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: translate .2s; }
.interruptor input:checked { background: var(--acento); }
.interruptor input:checked::after { translate: 20px 0; }

.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--fondo-2); border-radius: 999px; padding: 4px; gap: 4px; }
.segmentos button { border: 0; background: transparent; border-radius: 999px; min-height: 38px; font-size: 14px; font-weight: 500; color: var(--tinta-2); padding: 0 10px; }
.segmentos button.activo { background: var(--fondo); color: var(--tinta); box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 600; }

.paso-numero { display: inline-grid; grid-template-columns: 44px 1fr 44px; align-items: center; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: var(--fondo); }
.paso-numero button { border: 0; background: var(--fondo-2); height: 48px; font-size: 22px; font-weight: 300; color: var(--tinta); }
.paso-numero input { border: 0; text-align: center; height: 48px; width: 100%; font: 600 18px/1 var(--f-titulo); font-variant-numeric: tabular-nums; background: transparent; min-width: 0; }
.paso-numero input:focus { outline: none; background: var(--acento-suave); }

/* ── Navegación de abajo ─────────────────────────────────── */
.navegacion {
  position: fixed; left: 50%; translate: -50% 0; bottom: 0; z-index: 40;
  width: 100%; max-width: 520px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 6px);
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--linea-2);
}
.navegacion a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 52px; color: var(--tinta-3); text-decoration: none; position: relative;
  font: 500 9.5px/1 var(--f-rotulo); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase;
}
.navegacion a svg { width: 23px; height: 23px; }
.navegacion a.activa { color: var(--tinta); }
.navegacion a.activa::before { content: ''; position: absolute; top: 0; width: 18px; height: 2px; border-radius: 2px; background: var(--acento); }

/* ── Hojas que suben desde abajo ─────────────────────────── */
.velo { position: fixed; inset: 0; background: var(--velo); z-index: 80; opacity: 0; transition: opacity .25s; }
.velo.visible { opacity: 1; }
.hoja {
  position: fixed; left: 50%; bottom: 0; z-index: 90; translate: -50% 100%;
  width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh;
  background: var(--fondo); border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column;
  transition: translate .32s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
}
.hoja.visible { translate: -50% 0; }
.hoja.completa { height: 96vh; height: 96dvh; max-height: none; }
.hoja-asa { width: 40px; height: 5px; border-radius: 3px; background: var(--linea); margin: 10px auto 2px; flex: none; }
.hoja-cab { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 4px 8px 6px; flex: none; }
.hoja-cab h2 { margin: 0; text-align: center; font: 600 17px/1.2 var(--f-titulo); }
.hoja-cuerpo { overflow-y: auto; padding: 8px var(--margen) calc(env(safe-area-inset-bottom, 0px) + 24px); display: flex; flex-direction: column; gap: 18px; overscroll-behavior: contain; }
.hoja-pie { padding: 12px var(--margen) calc(env(safe-area-inset-bottom, 0px) + 14px); border-top: 1px solid var(--linea-2); flex: none; display: flex; gap: 10px; background: var(--fondo); }
.hoja-pie .boton { flex: 1; }

/* ── Avisos ──────────────────────────────────────────────── */
.avisos { position: fixed; left: 50%; translate: -50% 0; bottom: calc(var(--barra-abajo) + 14px); z-index: 120; width: calc(100% - 32px); max-width: 488px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.aviso {
  background: #1c201d; color: #fff; border-radius: 14px; padding: 14px 16px;
  font-size: 14.5px; line-height: 1.4; display: flex; gap: 10px; align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: aparece .25s ease; pointer-events: auto;
}
.aviso svg { width: 20px; height: 20px; flex: none; color: #8aa4ff; }
.aviso.mal svg { color: #ff9a85; }
.aviso.oro svg { color: #8aa4ff; }
@keyframes aparece { from { opacity: 0; translate: 0 10px; } }

.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 30px 10px; color: var(--tinta-2); }
.vacio svg { width: 40px; height: 40px; color: var(--acento); }
.vacio .subtitulo { color: var(--tinta); }

.cargando { display: grid; place-items: center; min-height: 40vh; }
.rueda { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--linea); border-top-color: var(--acento); animation: gira .8s linear infinite; }
@keyframes gira { to { rotate: 360deg; } }
.mini-rueda { width: 18px; height: 18px; border-width: 2px; display: inline-block; }
[data-estado][data-e="error"] { color: var(--rojo); }

/* ── Imágenes de ejercicios ──────────────────────────────── */
.foto { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: #e9eff5; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto.anima img + img { animation: alterna 2.4s steps(1, end) infinite; }
@keyframes alterna { 0% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .foto.anima img + img { animation: none; opacity: 0; } }
.foto.ciudad { background: var(--grad-noche); display: grid; place-items: center; color: #a9bcff; }
.foto.ciudad svg { width: 58%; height: 58%; }
.foto.propio { background: var(--fondo-3); display: grid; place-items: center; color: var(--tinta-3); }
.foto.propio svg { width: 40%; height: 40%; }
/* Hasta cuatro dibujos en fila: con dos filas las tarjetas quedaban
   altísimas en el móvil. */
.collage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border-radius: var(--r-grande) var(--r-grande) 0 0; overflow: hidden; }
.collage .foto { border-radius: 0; }
.collage.n1 { grid-template-columns: 1fr; }
.collage.n1 .foto { aspect-ratio: 16 / 9; }
.collage.n2 { grid-template-columns: 1fr 1fr; }
.collage.n2 .foto { aspect-ratio: 4 / 3; }
.collage.n3 { grid-template-columns: repeat(3, 1fr); }

/* ── Muñeco (mapa del cuerpo) ────────────────────────────── */
.cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
.cuerpo svg { width: 100%; height: auto; display: block; }
.cuerpo .silueta { fill: var(--fondo-3); stroke: var(--linea); stroke-width: 1; }
.cuerpo .zona { fill: color-mix(in srgb, var(--tinta) 9%, var(--fondo)); stroke: var(--fondo); stroke-width: 1.2; transition: fill .2s; }
.cuerpo .zona.secundaria { fill: color-mix(in srgb, var(--acento) 32%, var(--fondo)); }
.cuerpo .zona.principal { fill: var(--acento); }
.cuerpo .zona.elegida { fill: var(--tinta); }
.cuerpo.tocable .zona { cursor: pointer; }
.cuerpo .cara { font: 500 9px/1 var(--f-rotulo); letter-spacing: .14em; fill: var(--tinta-3); text-anchor: middle; }
.cuerpo.calor .zona { fill: var(--relleno, color-mix(in srgb, var(--tinta) 9%, var(--fondo))); }
.cuerpo.chico { max-width: 180px; margin: 0 auto; }

/* ── Semana (L M X J V S D) ──────────────────────────────── */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--tinta-2); }
.dia .letra { font: 500 10.5px/1 var(--f-rotulo); letter-spacing: .1em; }
.dia .bola { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--f-titulo); font-variant-numeric: tabular-nums; color: var(--tinta); border: 1.5px solid transparent; }
.dia.previsto .bola { border-color: var(--tinta-3); border-style: dashed; }
.dia.hecho .bola { background: var(--acento); color: #fff; border-color: var(--acento); }
.dia.hoy .letra { color: var(--acento); font-weight: 600; }
.dia.hoy .bola { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); }
.dia .bola svg { width: 18px; height: 18px; }

/* ── Cifras ──────────────────────────────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linea-2); border: 1px solid var(--linea-2); border-radius: var(--r); overflow: hidden; }
.cifras.tres { grid-template-columns: repeat(3, 1fr); }
.cifra { background: var(--tarjeta); padding: 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.cifra b { font: 700 26px/1.05 var(--f-titulo); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cifra b small { font-size: 14px; font-weight: 600; color: var(--tinta-2); margin-left: 2px; }
.cifra span { font-size: 12.5px; color: var(--tinta-2); line-height: 1.3; }
.cifra.acento b { color: var(--acento); }

.barra-progreso { height: 6px; border-radius: 3px; background: var(--linea-2); overflow: hidden; }
.barra-progreso i { display: block; height: 100%; width: var(--ancho, 0%); background: var(--grad-acento); border-radius: 3px; transition: width .4s; }
.barra-progreso.calor i { background: var(--calor); }

/* ── Rejilla de ejercicios ───────────────────────────────── */
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.ficha { display: flex; flex-direction: column; gap: 8px; background: none; border: 0; padding: 0; text-align: left; color: inherit; text-decoration: none; position: relative; }
.ficha .ficha-nombre { font-weight: 500; font-size: 14.5px; line-height: 1.3; }
.ficha .ficha-meta { font-size: 12px; color: var(--tinta-2); margin-top: -4px; }
.ficha .estrella { position: absolute; top: 8px; right: 8px; color: var(--acento); width: 20px; height: 20px; }
.ficha.elegida .foto { outline: 3px solid var(--acento); outline-offset: -3px; }
.ficha.elegida::after { content: ''; position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--acento) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5 9-10"/></svg>') center / 16px no-repeat; }

.grupos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grupo {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px;
  min-height: 74px; padding: 14px; border-radius: var(--r); border: 1px solid var(--linea-2); background: var(--fondo-2);
  text-align: left; color: inherit;
}
.grupo b { font: 600 15.5px/1.2 var(--f-titulo); }
.grupo svg { width: 22px; height: 22px; color: var(--tinta-2); }
.grupo span { font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.grupo.ciudad { grid-column: 1 / -1; background: var(--grad-noche); color: #fff; border: 0; min-height: 112px; grid-template-columns: 1fr auto; align-items: center; padding: 18px 20px; }
.grupo.ciudad span { color: #c3cce0; }
.grupo.ciudad svg { width: 64px; height: 64px; color: #a9bcff; }
.grupo.ciudad .rotulo { color: #a9bcff; }

/* ── Detalle de ejercicio ────────────────────────────────── */
.hero-foto { margin: 0 calc(var(--margen) * -1); position: relative; }
.hero-foto .foto { border-radius: 0; aspect-ratio: 1 / .9; }
.hero-foto .alternar { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; }
.pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 16px; line-height: 1.55; }
.pasos li::before { content: counter(paso); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--tinta); color: var(--tinta); display: grid; place-items: center; font: 600 13px/1 var(--f-titulo); }
.consejos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.consejos li { padding-left: 18px; position: relative; font-size: 15.5px; color: var(--tinta-2); }
.consejos li::before { content: ''; position: absolute; left: 2px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.ejemplos { display: flex; flex-direction: column; gap: 10px; }
.ejemplo { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--fondo-2); }
.ejemplo b { font: 500 11px/1.4 var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--acento); padding-top: 2px; }

/* ── Rutinas ─────────────────────────────────────────────── */
.rutina { display: flex; flex-direction: column; border-radius: var(--r-grande); overflow: hidden; border: 1px solid var(--linea-2); background: var(--tarjeta); text-align: left; color: inherit; padding: 0; text-decoration: none; }
.rutina .collage { border-radius: 0; }
.rutina .rutina-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.rutina .rutina-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-2); }
.rutina .rutina-meta span { display: inline-flex; align-items: center; gap: 5px; }
.rutina .rutina-meta svg { width: 15px; height: 15px; color: var(--tinta-3); }
.rutina.activa { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.color-plan { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; background: var(--c-plan, var(--acento)); }
.c-cobalto { --c-plan: #2350e6; } .c-noche { --c-plan: #1e2a44; } .c-acero { --c-plan: #6f7d86; }
.c-grafito { --c-plan: #3a3d42; } .c-granate { --c-plan: #8c2f39; } .c-cielo { --c-plan: #3d8fe0; }
.plantilla-portada { aspect-ratio: 16 / 7; background: linear-gradient(45deg, #1c44d2, #4470ff); display: grid; place-items: center; color: #ffffff; position: relative; }
.plantilla-portada.c-noche { background: linear-gradient(45deg, #0e1424, #22325a); }
.plantilla-portada.c-acero { background: linear-gradient(45deg, #3e4a52, #6f7d86); }
.plantilla-portada.c-grafito { background: linear-gradient(45deg, #17181b, #3a3d42); }
.plantilla-portada.c-granate { background: linear-gradient(45deg, #561c23, #8c2f39); }
.plantilla-portada.c-cielo { background: linear-gradient(45deg, #1f5fa8, #4aa3f0); }
.plantilla-portada svg { width: 64px; height: 64px; opacity: .92; }

/* ── Editor de rutinas ───────────────────────────────────── */
.pestanas { display: flex; gap: 22px; border-bottom: 1px solid var(--linea-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--margen) * -1); padding: 0 var(--margen); }
.pestanas button { border: 0; background: none; padding: 12px 0; font: 500 11px/1 var(--f-rotulo); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas button.activo { color: var(--tinta); border-bottom-color: var(--tinta); }
.bloque { border: 1px solid var(--linea-2); border-radius: var(--r); background: var(--tarjeta); overflow: hidden; }
.bloque-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--fondo-2); }
.bloque-cab .rotulo { flex: 1; }
.bloque-cab .boton-icono { width: 36px; height: 36px; }
.bloque-cab .boton-icono svg { width: 18px; height: 18px; }
.ej-plan { padding: 14px; border-top: 1px solid var(--linea-2); display: flex; flex-direction: column; gap: 12px; }
.ej-plan:first-of-type { border-top: 0; }
.ej-plan-cab { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.ej-plan-cab .foto { width: 52px; border-radius: 12px; }
.tabla-series { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-series th { font: 500 9.5px/1.2 var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); text-align: left; padding: 4px 4px 8px; }
.tabla-series td { padding: 3px 4px; vertical-align: middle; }
.tabla-series .num-serie { width: 26px; font: 600 13px/1 var(--f-titulo); color: var(--tinta-2); }
.celda { width: 100%; min-height: 40px; border: 1px solid var(--linea-2); border-radius: 10px; background: var(--fondo-2); padding: 0 8px; font-size: 14.5px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.celda:focus { outline: none; border-color: var(--acento); background: var(--fondo); }
select.celda { text-align-last: center; appearance: none; }
.volumen-musculo { display: grid; grid-template-columns: 110px 1fr 42px; gap: 10px; align-items: center; font-size: 13.5px; }
.volumen-musculo .pista { position: relative; height: 10px; border-radius: 5px; background: var(--fondo-3); overflow: hidden; }
.volumen-musculo .pista::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--zona-ini, 33%); width: var(--zona-ancho, 33%); background: color-mix(in srgb, var(--acento) 14%, transparent); }
.volumen-musculo .pista i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--ancho, 0%); border-radius: 5px; background: var(--grad-acento); }
.volumen-musculo .pista.bien i { background: var(--grad-acento); }
.volumen-musculo b { font: 600 13px/1 var(--f-titulo); text-align: right; font-variant-numeric: tabular-nums; }

.calendario-semanas { display: grid; grid-template-columns: 40px repeat(7, 1fr); gap: 4px; font-size: 12px; }
.calendario-semanas .cab { font: 500 10px/1 var(--f-rotulo); letter-spacing: .1em; color: var(--tinta-3); text-align: center; padding: 4px 0; }
.calendario-semanas .sem { font: 600 12px/1 var(--f-titulo); color: var(--tinta-2); display: grid; place-items: center; }
.casilla { display: grid; place-items: center; text-align: center; min-height: 44px; border-radius: 10px; border: 1px dashed var(--linea); background: none; font: 600 11.5px/1.1 var(--f-titulo); padding: 2px; color: var(--tinta-3); overflow: hidden; }
.casilla.llena { border: 0; background: var(--acento-suave); color: var(--acento); }
.casilla.llena.descarga { background: var(--fondo-3); color: var(--tinta-2); }

/* ── Calendario ──────────────────────────────────────────── */
.mes-cab { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.mes-cab h2 { margin: 0; text-align: center; font: 700 22px/1.1 var(--f-titulo); text-transform: capitalize; }
.mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mes .cab { font: 500 10px/1 var(--f-rotulo); letter-spacing: .1em; color: var(--tinta-3); text-align: center; padding: 6px 0 10px; }
.celda-dia { aspect-ratio: 1 / 1.08; border: 0; border-radius: 12px; background: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding-top: 7px; color: var(--tinta); font: 500 14px/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.celda-dia.fuera { color: var(--tinta-3); opacity: .4; }
.celda-dia.hoy { background: var(--fondo-2); box-shadow: inset 0 0 0 1.5px var(--acento); }
.celda-dia.elegido { background: var(--acento); color: #fff; }
.celda-dia .puntos { display: flex; gap: 3px; }
.celda-dia .punto { width: 7px; height: 7px; border-radius: 50%; }
.punto { display: inline-block; flex: none; }
.punto.previsto { border: 1.5px solid var(--tinta-3); }
.punto.hecho { background: var(--acento); }
.punto.perdido { background: var(--linea); }
.punto.libre { background: var(--acento-claro); }
.celda-dia.elegido .punto.hecho { background: #fff; }
.celda-dia.elegido .punto { display: inline-block; flex: none; }
.punto.previsto { border-color: #fff; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Gráficas ────────────────────────────────────────────── */
.grafica { width: 100%; height: auto; display: block; overflow: visible; }
.grafica .rejilla-g { stroke: var(--linea-2); stroke-width: 1; }
.grafica .eje { font: 400 10px/1 var(--f-texto); fill: var(--tinta-3); }
.grafica .linea { fill: none; stroke: var(--acento); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.grafica .linea.oro { stroke: var(--acento); }
.grafica .area { fill: url(#grad-area); opacity: .9; }
.grafica .parada { stop-color: var(--acento); }
.grafica .punto-g { fill: var(--fondo); stroke: var(--acento); stroke-width: 2; }
.grafica .punto-g.final { fill: var(--acento); }
.grafica .barra-g { fill: var(--acento); }
.grafica .barra-g.suave { fill: color-mix(in srgb, var(--acento) 30%, var(--fondo)); }
.grafica .valor { font: 600 11px/1 var(--f-titulo); fill: var(--tinta); text-anchor: middle; }
.grafica .media { fill: none; stroke: var(--acento); stroke-width: 1.5; stroke-dasharray: 4 4; }
.calor-anio { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.calor-anio i { width: 11px; height: 11px; border-radius: 3px; background: var(--fondo-3); }
.calor-anio i.n1 { background: color-mix(in srgb, var(--acento) 45%, var(--fondo)); }
.calor-anio i.n2 { background: var(--acento); }
.calor-anio i.futuro { background: transparent; }

.anillo { position: relative; width: 120px; height: 120px; }
.anillo svg { width: 100%; height: 100%; rotate: -90deg; }
.anillo .fondo-anillo { fill: none; stroke: var(--linea-2); stroke-width: 10; }
.anillo .valor-anillo { fill: none; stroke: url(#grad-anillo); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.anillo .dentro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.anillo .dentro b { font: 700 28px/1 var(--f-titulo); font-variant-numeric: tabular-nums; }

.record { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea-2); }
.record:last-child { border-bottom: 0; }
.medalla { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-acento); color: #fff; display: grid; place-items: center; }
.medalla svg { width: 20px; height: 20px; }

/* ── Entrar ──────────────────────────────────────────────── */
.portada {
  min-height: 100vh; min-height: 100dvh; background: var(--grad-noche); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) var(--margen) calc(env(safe-area-inset-bottom, 0px) + 28px);
}
.portada .marca span { color: #ffffff; }
.portada .marca svg { color: #a9bcff; }
.portada .lema { font: 300 17px/1.5 var(--f-texto); color: #c9d1e3; text-align: center; max-width: 22em; margin: 0 auto; }
.portada .tarjeta { background: var(--fondo); color: var(--tinta); border: 0; box-shadow: 0 20px 50px rgba(0,0,0,.3); padding: 24px 22px; gap: 18px; }
.portada .pie-portada { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.portada .pie-portada .enlace { color: #a9bcff; }
.fuerza-clave { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fuerza-clave i { height: 4px; border-radius: 2px; background: var(--linea-2); }
.fuerza-clave.n1 i:nth-child(-n+1) { background: var(--rojo); }
.fuerza-clave.n2 i:nth-child(-n+2) { background: var(--acento); }
.fuerza-clave.n3 i:nth-child(-n+3) { background: var(--acento-claro); }
.fuerza-clave.n4 i { background: var(--acento); }
.codigo-grande { font: 600 26px/1.2 var(--f-titulo); letter-spacing: .12em; text-align: center; padding: 18px; border-radius: 14px; background: var(--fondo-2); font-variant-numeric: tabular-nums; user-select: all; word-break: break-all; }
.codigo-grande.secreto { font-size: 17px; letter-spacing: .06em; }
.codigos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font: 600 15px/1 var(--f-titulo); letter-spacing: .08em; }
.codigos span { background: var(--fondo-2); border-radius: 10px; padding: 12px; text-align: center; user-select: all; }

/* ── Banda de entreno empezado ───────────────────────────── */
.en-curso { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 25; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: var(--tinta); color: var(--fondo); border-radius: 16px; padding: 12px 14px; border: 0; text-align: left; box-shadow: var(--sombra); }
.en-curso .latido { width: 10px; height: 10px; border-radius: 50%; background: #6e8fff; box-shadow: 0 0 0 0 rgba(110, 143, 255, .6); animation: latido 1.6s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(110, 143, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(110, 143, 255, 0); } }
.en-curso b { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   MODO ENTRENO · siempre oscuro: negro, blanco, azul para lo
   hecho y naranja para el esfuerzo. Se lee con sudor en los ojos.
   ═══════════════════════════════════════════════════════════ */
.entreno {
  --e-fondo: #0a0b0d; --e-fondo-2: #14161a; --e-fondo-3: #1e2026; --e-linea: #2b2e35;
  --e-tinta: #f4f5f7; --e-tinta-2: #a2a6ae; --e-acento: #6e8fff; --e-calor: #ff7a45;
  min-height: 100vh; min-height: 100dvh; background: var(--e-fondo); color: var(--e-tinta);
  display: flex; flex-direction: column; color-scheme: dark;
}
.entreno .rotulo { color: var(--e-tinta-2); }
.entreno .rotulo.acento { color: var(--e-acento); }
.entreno .rotulo.calor { color: var(--e-calor); }
.entreno-arriba { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 8px; background: color-mix(in srgb, var(--e-fondo) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.entreno-arriba .boton-icono { color: var(--e-tinta); }
.entreno-arriba .boton-icono:active { background: var(--e-fondo-3); }
.entreno-arriba .nombre { font: 600 15px/1.2 var(--f-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.cronografo { font: 600 17px/1 var(--f-titulo); font-variant-numeric: tabular-nums; color: var(--e-acento); padding: 0 8px; letter-spacing: .02em; }
.tramos { display: flex; gap: 3px; padding: 0 16px; }
.tramos i { flex: 1; height: 3px; border-radius: 2px; background: var(--e-linea); }
.tramos i.hecho { background: var(--e-acento); }
.tramos i.actual { background: var(--e-acento); }
.entreno-cuerpo { flex: 1; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 120px); display: flex; flex-direction: column; gap: 18px; }
.entreno .foto { background: #e9eef1; border-radius: 22px; }
.entreno .foto.ciudad { background: linear-gradient(45deg, #0e1424, #22325a); }
.entreno-ej { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.entreno-ej .titulo { font-size: 24px; line-height: 1.1; }
.entreno-ej > button { background: none; border: 0; padding: 0; display: block; }
.entreno .chip.etiqueta { background: var(--e-fondo-3); color: var(--e-tinta-2); }
.entreno .chip.etiqueta.acento { background: rgba(110, 143, 255, .14); color: var(--e-acento); }
.ultima { font-size: 14px; color: var(--e-tinta-2); }
.ultima b { color: var(--e-tinta); font-weight: 600; }
.motivo { font-size: 13.5px; color: var(--e-acento); display: flex; gap: 6px; align-items: center; }
.motivo svg { width: 16px; height: 16px; }

.series-vivas { display: flex; flex-direction: column; gap: 8px; }
.serie-viva {
  display: grid; grid-template-columns: 34px 1fr 1fr 54px; gap: 8px; align-items: center;
  padding: 8px; border-radius: 18px; background: var(--e-fondo-2); border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.serie-viva.actual { border-color: color-mix(in srgb, var(--e-acento) 60%, transparent); background: #171a21; }
.serie-viva.hecha { background: rgba(110, 143, 255, .1); }
.serie-viva .n { font: 700 15px/1 var(--f-titulo); color: var(--e-tinta-2); text-align: center; }
.serie-viva .n.cal { color: var(--e-acento); font-size: 12px; letter-spacing: .06em; }
.serie-viva .valor-vivo { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--e-fondo-3); border-radius: 12px; border: 0; padding: 8px 4px; color: var(--e-tinta); min-height: 56px; justify-content: center; }
.serie-viva .valor-vivo b { font: 700 22px/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.serie-viva .valor-vivo svg { width: 24px; height: 24px; color: var(--e-acento); }
.serie-viva .valor-vivo span { font: 500 9.5px/1 var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--e-tinta-2); }
.serie-viva .valor-vivo.vacio-v b { color: #6b7079; }
.serie-viva .hecho-boton { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--e-linea); background: transparent; color: var(--e-tinta-2); display: grid; place-items: center; }
.serie-viva .hecho-boton svg { width: 26px; height: 26px; }
.serie-viva.hecha .hecho-boton { background: var(--e-acento); border-color: var(--e-acento); color: #fff; }
.serie-viva .objetivo { grid-column: 2 / 4; font-size: 12px; color: var(--e-tinta-2); text-align: center; margin-top: -2px; }

.entreno .boton.principal { background: var(--e-tinta); color: var(--e-fondo); box-shadow: none; }
.entreno .boton.suave { background: var(--e-fondo-3); color: var(--e-tinta); }
.entreno .boton.secundario { color: var(--e-tinta); border-color: var(--e-linea); }
.herramientas { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; }
.herramienta { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 16px; background: var(--e-fondo-2); border: 0; color: var(--e-tinta); font: 500 9.5px/1.2 var(--f-rotulo); letter-spacing: .08em; text-transform: uppercase; }
.herramienta svg { width: 22px; height: 22px; color: var(--e-acento); }

.entreno-pie { position: fixed; left: 50%; translate: -50% 0; bottom: 0; width: 100%; max-width: 520px; z-index: 30; display: grid; grid-template-columns: 56px 1fr 56px; gap: 10px; align-items: center; padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px); background: linear-gradient(to top, var(--e-fondo) 70%, transparent); }
.entreno-pie .boton-icono { width: 56px; height: 56px; background: var(--e-fondo-2); color: var(--e-tinta); }

/* El bisel: el reloj del descanso */
.bisel-hoja { position: fixed; inset: 0; z-index: 100; background: rgba(6, 7, 9, .93); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; color: #f4f5f7; animation: aparece .2s; }
.bisel { position: relative; width: min(78vw, 330px); aspect-ratio: 1; }
.bisel svg { width: 100%; height: 100%; }
.bisel .marcas line { stroke: #5d626b; stroke-width: 1.4; }
.bisel .marcas line.gorda { stroke: #f4f5f7; stroke-width: 3; }
.bisel .aro-fondo { fill: none; stroke: #22252b; stroke-width: 14; }
.bisel .aro { fill: none; stroke: url(#grad-bisel); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.bisel .triangulo { fill: #6e8fff; }
.bisel .dentro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.bisel .dentro b { font: 700 72px/1 var(--f-titulo); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bisel .dentro span { font: 500 11px/1 var(--f-rotulo); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: #a2a6ae; }
.bisel.trabajo .aro { stroke: url(#grad-trabajo); }
.bisel-botones { display: flex; gap: 14px; align-items: center; }
.bisel-botones .boton-icono { width: 60px; height: 60px; background: #1e2026; color: #f4f5f7; font: 600 15px/1 var(--f-titulo); }
.siguiente-serie { text-align: center; color: #a2a6ae; font-size: 15px; }
.siguiente-serie b { color: #f4f5f7; font-weight: 600; }

/* Discos en la barra */
.barra-discos { width: 100%; height: auto; }
.barra-discos .eje-barra { fill: #9aa0a6; }
.barra-discos .disco { stroke: rgba(0,0,0,.25); stroke-width: 1; }
.d25 { fill: #c0392b; } .d20 { fill: #2471a3; } .d15 { fill: #d4ac0d; } .d10 { fill: #229954; }
.d5 { fill: #ecf0f1; } .d2 { fill: #212121; } .d1 { fill: #b3b6b7; }
.barra-discos text { font: 600 10px/1 var(--f-titulo); fill: #f4f5f7; text-anchor: middle; }

/* Cardio en la calle */
.cardio-vivo { display: flex; flex-direction: column; gap: 14px; }
.cardio-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cardio-cifras div { background: var(--e-fondo-2); border-radius: 16px; padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cardio-cifras b { font: 700 24px/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.cardio-cifras span { font: 500 9.5px/1 var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--e-tinta-2); }
.reloj-grande { font: 700 64px/1 var(--f-titulo); font-variant-numeric: tabular-nums; text-align: center; letter-spacing: -.02em; }
.fase { text-align: center; font: 600 13px/1 var(--f-rotulo); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--e-calor); }
.fase.descanso { color: var(--e-acento); }
.ruta-svg { width: 100%; aspect-ratio: 1.4; background: var(--e-fondo-2); border-radius: 18px; }
.ruta-svg path { fill: none; stroke: var(--e-calor); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ruta-svg circle { fill: var(--e-acento); }
.ruta-svg text { font: 500 11px/1 var(--f-texto); fill: #6b7079; }

/* Resumen al terminar */
.resumen-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; }
.resumen-hero .medalla { width: 72px; height: 72px; }
.resumen-hero .medalla svg { width: 34px; height: 34px; }
.sensaciones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sensaciones button { border: 1px solid var(--linea); background: var(--fondo); border-radius: 14px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; color: var(--tinta-2); }
.sensaciones button b { font: 700 20px/1 var(--f-titulo); color: var(--tinta); }
.sensaciones button.activo { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.sensaciones button.activo b { color: var(--acento); }

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