/* ==========================================================================
   RUTINAS.CSS — el módulo en sí
   --------------------------------------------------------------------------
   Todo lo de aquí lleva clase propia, así que no toca nada de tu página. Es
   el constructor de rutinas, el modo entrenamiento, el visor de fotos y la
   vista de progresión.

   Depende de las variables de color de base.css (`--azul` es el dorado,
   `--fondo`, `--superficie`, `--texto`…). Si prefieres no cargar base.css,
   define esas variables en tu propio `:root` y este archivo funciona igual.
   ========================================================================== */

/* El logo cede espacio antes que los controles: si la pantalla es muy
   angosta, se recorta el logo, no el botón de salir. Con `flex:0 0 auto` el
   logo no cedía nunca y empujaba el botón fuera de la pantalla. */
.marca{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:74px}
.marca-logo{
  width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--azul);border-radius:10px;
}
.marca-logo svg{width:30px;height:30px}
.marca-logo svg .disco{fill:#fff}
.marca-logo svg .barra{fill:var(--sobre-acento)}
.marca-texto{display:flex;flex-direction:column;line-height:1}
.marca-texto small{
  font-family:var(--cuerpo);font-size:12px;font-weight:800;letter-spacing:2.4px;
  color:#9a9a9a;text-transform:uppercase;margin-bottom:2px;
}
.marca-texto b{
  font-family:var(--titulo);font-size:19px;font-weight:700;letter-spacing:.5px;
  color:#fff;text-transform:uppercase;
}
.marca-texto b.azul{color:var(--azul);margin-top:-3px}
.cabecera-der .btn.fantasma{color:#d4d4d4;flex:0 0 auto}
#btn-salir{flex:0 0 auto}
.cabecera-der .btn.fantasma:hover{background:var(--carbon2);color:#fff}
.ticker b{font-weight:700}
.ticker .punto{opacity:.55;margin:0 12px}
/* ------------------------------ Contenedor ------------------------------ */
.contenido{padding:18px var(--pad-lat) 24px;max-width:1240px;margin:0 auto}
.titulo-vista{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.titulo-vista h2{font-size:26px;letter-spacing:.2px}
.titulo-vista .cuenta{
  color:var(--texto3);font-size:12px;font-weight:800;font-family:var(--cuerpo);
  text-transform:uppercase;letter-spacing:1.4px;
}
.titulo-vista .acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
/* -------------------------------- Botones ------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--superficie);border:1.5px solid var(--borde2);color:var(--texto);
  padding:10px 20px;border-radius:var(--pill);cursor:pointer;
  font-family:var(--cuerpo);font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:1px;
  transition:.16s;min-height:42px;white-space:nowrap;
}
.btn:hover{border-color:var(--azul);color:var(--azul)}
.btn:active{transform:scale(.97)}
.btn.principal{background:var(--azul);border-color:var(--azul);color:var(--sobre-acento);font-weight:600}
.btn.principal:hover{background:var(--azul-osc);border-color:var(--azul-osc);color:#fff}
.btn.peligro{background:var(--peligro);border-color:var(--peligro);color:#fff}
.btn.peligro:hover{filter:brightness(1.08);color:#fff}
.btn.fantasma{background:transparent;border-color:transparent;color:var(--texto2)}
.btn.fantasma:hover{background:var(--superficie3);color:var(--texto)}
.btn.chico{padding:6px 14px;min-height:34px;font-size:12.5px;letter-spacing:.8px}
.btn.icono{padding:0;width:38px;min-height:38px;flex:0 0 auto;font-size:15px}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* -------------------------------- Tarjetas ------------------------------ */
.tarjeta{
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--r);padding:20px;margin-bottom:14px;box-shadow:var(--sombra);
}
.tarjeta strong{font-family:var(--titulo);font-weight:600;letter-spacing:.3px;font-size:17px}
.tarjeta.clicable{cursor:pointer;transition:.18s}
.tarjeta.clicable:hover{border-color:var(--azul);transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.rejilla{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){

.rejilla{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1050px){

.rejilla{grid-template-columns:repeat(3,1fr)}
}
.vacio{
  text-align:center;padding:52px 24px;color:var(--texto2);
  background:var(--superficie);border:2px dashed var(--borde2);border-radius:var(--r);
}
.vacio .icono{font-size:38px;display:block;margin-bottom:12px;opacity:.45;filter:grayscale(1)}
.vacio p{margin-bottom:18px}
/* --------------------------------- Campos ------------------------------- */
.campo{display:block;margin-bottom:14px}
.campo-etq{
  display:block;font-family:var(--cuerpo);font-size:12px;font-weight:800;
  color:var(--texto2);margin-bottom:6px;text-transform:uppercase;letter-spacing:1.2px;
}
.campo-ayuda{display:block;font-size:12px;color:var(--texto3);margin-top:5px;line-height:1.5}
.fila{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.fila-3{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media(max-width:520px){

.fila-3{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){

.fila{grid-template-columns:1fr}
}
/* -------------------------------- Etiquetas ----------------------------- */
.etq{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--superficie3);border:1px solid var(--borde);
  padding:3px 11px;border-radius:var(--pill);
  font-family:var(--cuerpo);font-size:12px;font-weight:800;color:var(--texto2);
  text-transform:uppercase;letter-spacing:.9px;white-space:nowrap;
}
/* Cada grupo muscular tenía su color (rosa, azul, verde…). Ahora van todos
   en dorado sobre el gris de la superficie: el nombre del músculo ya dice
   cuál es, el color no aportaba nada y rompía la identidad. */
.etq[class*="g-"]{background:var(--superficie3);color:var(--azul);border-color:var(--borde2)}
/* --------------------------------- Tabla -------------------------------- */
.tabla-envoltura{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
}
table.tabla{width:100%;border-collapse:collapse;font-size:13.5px;min-width:780px;background:var(--superficie)}
table.tabla th{
  background:var(--superficie2);text-align:left;padding:11px 12px;
  font-family:var(--cuerpo);font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.3px;color:var(--texto2);
  border-bottom:2px solid var(--borde2);white-space:nowrap;
}
table.tabla td{padding:11px 12px;border-bottom:1px solid var(--borde);vertical-align:middle}
table.tabla tr:last-child td{border-bottom:none}
table.tabla tbody tr:hover{background:var(--azul-suave)}
table.tabla .num{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tabla .ejercicio{font-weight:600;min-width:190px}
.obs{color:var(--texto3);font-size:12.5px;font-style:italic;max-width:210px}
table.tabla th.acciones-fila,table.tabla td.acciones-fila{
  position:sticky;right:0;white-space:nowrap;
  background:var(--superficie);box-shadow:-10px 0 14px -10px rgba(0,0,0,.35);
}
table.tabla th.acciones-fila{background:var(--superficie2)}
table.tabla tbody tr:hover td.acciones-fila{background:var(--superficie2)}
.registros-bloque{padding:0 16px}
.registros-bloque:empty{display:none}
/* --------------------------------- Bloque ------------------------------- */
.bloque{
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--r);margin-bottom:16px;overflow:hidden;box-shadow:var(--sombra);
}
.bloque-cab{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--carbon);color:#fff;flex-wrap:wrap;
}
.bloque-tipo{
  display:inline-flex;align-items:center;gap:6px;background:var(--azul);color:var(--sobre-acento);
  padding:4px 13px;border-radius:var(--pill);
  font-family:var(--cuerpo);font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.4px;
}
.bloque-nombre{font-family:var(--titulo);font-weight:600;font-size:17px;text-transform:uppercase;letter-spacing:.5px}
.bloque-datos{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-left:auto}
.dato{
  font-family:var(--cuerpo);font-size:12px;color:#d4d4d4;background:var(--carbon2);
  border:1px solid #333333;padding:3px 11px;border-radius:var(--pill);
  text-transform:uppercase;letter-spacing:.9px;font-weight:800;}
.bloque-cuerpo{padding:16px}
.bloque-pie{padding:12px 16px;border-top:1px solid var(--borde);display:flex;gap:8px;flex-wrap:wrap;background:var(--superficie2)}
.nota-bloque{
  padding:11px 16px;background:var(--azul-suave);
  border-top:1px solid var(--borde);font-size:13px;color:var(--texto2);
}
.nota-bloque b{color:var(--azul);font-family:var(--titulo);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
/* ------------------------- Panel de registro ---------------------------- */
.registro{
  background:var(--superficie);border:2px solid var(--azul);
  border-radius:var(--r);padding:18px;margin:14px 0 18px;box-shadow:var(--sombra);
}
.registro-cab{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.registro-cab h4{font-size:19px}
.conmutador button{
  background:transparent;border:none;padding:7px 18px;border-radius:var(--pill);
  cursor:pointer;font-family:var(--cuerpo);font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.2px;color:var(--texto2);transition:.16s;
}
.conmutador button.activo{background:var(--azul);color:var(--sobre-acento)}
.disco b{font-family:var(--cuerpo);font-size:13px;font-weight:800;letter-spacing:.5px}
.disco .contador button{
  width:26px;height:26px;border-radius:8px;border:1.5px solid var(--borde2);
  background:var(--superficie);cursor:pointer;font-weight:700;line-height:1;color:var(--texto2);
}
.disco .contador button:hover{border-color:var(--azul);color:var(--azul)}
.disco.activo{border-color:var(--azul);background:var(--azul-suave)}
.disco.activo b{color:var(--azul)}
.total-peso{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  background:var(--carbon);color:#fff;
  border-radius:var(--r-s);padding:14px 16px;margin:12px 0;
}
.total-peso .valor{
  font-family:var(--titulo);font-size:34px;font-weight:700;color:var(--azul);
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;white-space:nowrap;line-height:1;
}
.total-peso .etiqueta{
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;
  letter-spacing:1.8px;color:#9a9a9a;font-weight:800;display:block;margin-bottom:4px;
}
.total-peso .detalle{margin-left:auto;font-size:12px;color:#d4d4d4;text-align:right}
.total-peso input{background:var(--carbon2);border-color:#333333;color:#fff}
@media(max-width:560px){

.total-peso .detalle{margin-left:0;width:100%;text-align:left}
}
.series-lista{display:flex;flex-direction:column;gap:8px;max-width:660px}
.serie{
  display:grid;grid-template-columns:38px 1fr 1fr 78px 46px;gap:8px;align-items:center;
  background:var(--superficie2);border:1.5px solid var(--borde);border-radius:14px;padding:8px;
}
.serie.hecha{border-color:var(--azul);background:var(--azul-suave)}
.serie .n{
  width:32px;height:32px;border-radius:9px;background:var(--superficie3);
  display:grid;place-items:center;font-family:var(--cuerpo);font-weight:800;font-size:13px;color:var(--texto2);
}
.serie.hecha .n{background:var(--ok);color:#fff}
.serie input{min-height:42px;padding:7px 8px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;background:var(--superficie)}
.serie .chk{
  width:40px;height:40px;border-radius:11px;border:1.5px solid var(--borde2);background:var(--superficie);
  cursor:pointer;display:grid;place-items:center;font-size:16px;color:var(--texto3);
}
.serie.hecha .chk{background:var(--ok);border-color:var(--ok);color:#fff}
.encabezado-series{display:grid;grid-template-columns:38px 1fr 1fr 78px 46px;gap:8px;padding:0 8px;margin-bottom:6px;max-width:660px}
.encabezado-series span{
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;letter-spacing:1.3px;
  color:var(--texto3);font-weight:800;text-align:center;
}
.encabezado-series span:first-child{text-align:left}
.resumen-serie{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--borde)}
.metrica{display:flex;flex-direction:column}
.metrica b{font-family:var(--titulo);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.metrica span{
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;letter-spacing:1.3px;
  color:var(--texto3);font-weight:800;margin-top:3px;
}
.metrica.destacada b{color:var(--azul)}
/* ---------------------------- Volumen (semáforo) ------------------------ */
.volumen{display:flex;flex-direction:column;gap:9px}
.vol-fila{display:grid;grid-template-columns:126px 1fr 50px;gap:12px;align-items:center;font-size:13px}
.vol-barra{height:10px;background:var(--superficie3);border-radius:var(--pill);overflow:hidden}
.vol-barra i{display:block;height:100%;border-radius:var(--pill);transition:width .35s}
.vol-fila b{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--titulo);font-weight:600;font-size:16px}
/* --------------------------------- Buscador ----------------------------- */
.buscador{position:relative;margin-bottom:14px}
.buscador input{padding-left:42px;border-radius:var(--pill)}
.buscador::before{content:'\f002';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--texto3);font-size:14px}
.filtros{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.filtros button{
  background:var(--superficie);border:1.5px solid var(--borde2);color:var(--texto2);
  padding:7px 16px;border-radius:var(--pill);cursor:pointer;white-space:nowrap;
  font-family:var(--cuerpo);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;
}
.filtros button:hover{border-color:var(--azul);color:var(--azul)}
.filtros button.activo{background:var(--azul);border-color:var(--azul);color:var(--sobre-acento);font-weight:600}
.lista-ej{display:flex;flex-direction:column;gap:8px}
.item-ej{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--superficie);border:1.5px solid var(--borde);border-radius:14px;cursor:pointer;transition:.14s;
}
.item-ej:hover{border-color:var(--azul);box-shadow:var(--sombra)}
.item-ej.seleccionado{border-color:var(--azul);background:var(--azul-suave)}
.item-ej .info{flex:1;min-width:0}
.item-ej .nom{font-family:var(--titulo);font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:.3px}
.item-ej .sub{font-size:12px;color:var(--texto3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav button{
  flex:1;background:none;border:none;padding:10px 4px 11px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#9a9a9a;font-family:var(--cuerpo);font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.2px;transition:.16s;
}
.nav button .ico{font-size:19px;line-height:1;filter:grayscale(1) opacity(.7)}
.nav button:hover{color:#fff}
.nav button.activo{color:var(--azul)}
.nav button.activo .ico{filter:grayscale(1) brightness(1.9);opacity:1}
/* --------------------------------- Modal -------------------------------- */
/* Va en 140 y no en 100 porque el modo entrenamiento (120) y su temporizador
   (130) son pantallas fijas: con un z-index menor, la ficha del ejercicio y el
   diálogo de la foto se abrían DETRÁS y parecía que el botón no hacía nada.
   Sigue por debajo del visor (150) y de los avisos (200). */
.modal{
  position:fixed;inset:0;z-index:140;display:none;
  background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  align-items:flex-end;justify-content:center;
}
.modal.visible{display:flex}
.modal-caja{
  background:var(--superficie);border-radius:22px 22px 0 0;width:100%;max-width:560px;max-height:92vh;
  display:flex;flex-direction:column;box-shadow:var(--sombra-alta);animation:sube .24s ease;
}
@media(min-width:640px){

.modal{align-items:center}

.modal-caja{border-radius:22px}
}
.modal-cab{display:flex;align-items:center;padding:16px 20px;background:var(--carbon);border-radius:22px 22px 0 0}
.modal-cab h3{font-size:19px;color:#fff}
.modal-cab button{margin-left:auto;background:none;border:none;color:#9a9a9a;font-size:24px;cursor:pointer;line-height:1}
.modal-cab button:hover{color:#fff}
.modal-cuerpo{padding:20px;overflow-y:auto;flex:1}
.modal-pie{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--borde);flex-wrap:wrap;background:var(--superficie2);border-radius:0 0 22px 22px}
.parrafo{color:var(--texto2);line-height:1.65}
/* --------------------------------- Avisos ------------------------------- */
#avisos{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:9px;width:calc(100% - 32px);max-width:440px}
.aviso{
  background:var(--carbon);color:#fff;border:1px solid var(--ok);
  padding:13px 17px;border-radius:12px;box-shadow:var(--sombra-alta);
  font-size:13.5px;font-weight:500;animation:sube .22s ease;
}
.aviso.error{border-left-color:var(--peligro)}
.aviso.info{border-left-color:var(--azul)}
.aviso.sale{opacity:0;transform:translateY(-10px);transition:.3s}
/* --------------------------------- Varios ------------------------------- */
.sep{height:1px;background:var(--borde);margin:16px 0}
.pista{font-size:13px;color:var(--texto3);line-height:1.65}
.pila{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.derecha{margin-left:auto}
.chip-fecha{
  background:var(--superficie2);border:1px solid var(--borde);border-radius:var(--pill);
  padding:5px 14px;font-family:var(--cuerpo);font-size:12.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1px;color:var(--texto2);
}
.pr{color:var(--aviso);font-weight:700}
/* ==========================================================================
   MARCA — logo y paletas
   ========================================================================== */
.marca-logo.con-imagen{
  background:rgba(255,255,255,.07);border-radius:10px;overflow:hidden;padding:2px;
}
.marca-logo img{width:100%;height:100%;object-fit:contain;display:block}
.logo-vista img{width:100%;height:100%;object-fit:contain}
/* El selector de paletas se quitó: la marca es negra y dorada, sin
   alternativas. Sus estilos ya no hacen falta. */

.barra-comparar b{font-family:var(--titulo);text-transform:uppercase;letter-spacing:.8px;color:var(--azul)}
.foto-img img{width:100%;height:100%;object-fit:cover;display:block}
.foto figcaption{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.foto figcaption b{font-family:var(--cuerpo);font-size:13px;letter-spacing:.4px;text-transform:uppercase;font-weight:800}
.foto figcaption span{font-size:12.5px;color:var(--texto3)}
.foto figcaption .nota{font-style:italic}
.comparador figure{background:var(--superficie2);border-radius:14px;overflow:hidden;border:1px solid var(--borde)}
.comparador img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.comparador figcaption{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.comparador figcaption b{font-family:var(--cuerpo);font-size:13px;text-transform:uppercase;letter-spacing:.5px;font-weight:800}
.comparador figcaption span{font-size:12.5px;color:var(--texto3)}
/* Si alguna vez va dentro de una tarjeta, no debe salirse de ella */
.tarjeta .pestanas{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.pestanas button{
  background:var(--superficie);border:1.5px solid var(--borde2);color:var(--texto2);
  padding:9px 18px;border-radius:var(--pill);cursor:pointer;white-space:nowrap;
  font-family:var(--cuerpo);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  transition:.15s;min-height:40px;
}
.pestanas button:hover{border-color:var(--azul);color:var(--azul)}
.pestanas button.activa{background:var(--azul);border-color:var(--azul);color:var(--sobre-acento);font-weight:600}
/* --------------------------------- Gráfica ------------------------------ */
.grafica-cab{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.grafica-etq{
  display:block;font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;
  letter-spacing:1.4px;color:var(--texto3);font-weight:800;
}
.grafica-valor{font-family:var(--titulo);font-size:30px;font-weight:700;line-height:1.1;color:var(--azul)}
.grafica-valor small{font-size:14px;color:var(--texto3);font-weight:500}
.grafica-delta{
  margin-left:auto;text-align:right;font-family:var(--titulo);font-size:15px;font-weight:600;
  letter-spacing:.4px;
}
.grafica-delta.sube{color:var(--ok)}
.grafica-delta.baja{color:var(--peligro)}
.grafica-delta small{display:block;font-family:var(--cuerpo);font-size:12.5px;font-weight:500;color:var(--texto3)}
.grafica-envoltura{width:100%;overflow:hidden}
svg.grafica{width:100%;height:auto;display:block;max-height:340px}
svg.grafica .rejilla{stroke:var(--borde);stroke-width:1;stroke-dasharray:3 4}
svg.grafica .area{fill:var(--azul-suave);stroke:none}
svg.grafica .linea{fill:none;stroke:var(--azul);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
svg.grafica .punto{fill:var(--superficie);stroke:var(--azul);stroke-width:2.5}
svg.grafica .punto.record{fill:var(--aviso);stroke:var(--aviso)}
svg.grafica .eje-y{fill:var(--texto3);font-size:12px;text-anchor:end;font-family:var(--cuerpo)}
svg.grafica .eje-x{fill:var(--texto3);font-size:12px;font-family:var(--cuerpo)}
svg.grafica .eje-x.fin{text-anchor:end}
.grafica-vacia{
  padding:34px 20px;text-align:center;color:var(--texto3);
  border:2px dashed var(--borde2);border-radius:var(--r-s);font-size:13.5px;
}
/* --------------------------------- Récords ------------------------------ */
.records{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.record-item{
  background:var(--superficie2);border:1.5px solid var(--borde);border-radius:16px;
  padding:14px;cursor:pointer;transition:.15s;
}
.record-item:hover{border-color:var(--azul);transform:translateY(-2px)}
.record-nom{font-family:var(--cuerpo);font-size:14px;text-transform:uppercase;letter-spacing:.4px;margin:8px 0 4px;line-height:1.2;font-weight:800}
.record-cifra{font-family:var(--titulo);font-size:26px;font-weight:700;color:var(--azul);line-height:1.1}
.record-cifra small{font-size:15px;color:var(--texto2);font-weight:500}
.record-pie{font-size:12.5px;color:var(--texto3);margin-top:5px}
.record-pie b{color:var(--texto2)}
/* ---------------------------- Volumen semanal --------------------------- */
.leyenda{display:inline-flex;align-items:center;gap:5px;margin-left:12px;font-size:12.5px}
.leyenda i{display:inline-block;width:12px;height:8px;border-radius:3px}
.vol-barra.con-marcas{position:relative}
.vol-barra.con-marcas::before,.vol-barra.con-marcas::after{
  content:'';position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--texto3);opacity:.5;
}
.vol-barra.con-marcas::before{left:var(--mev)}
.vol-barra.con-marcas::after{left:var(--mrv)}
/* -------------------------------- Temporizador -------------------------- */
.temporizador{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--nav-alto) + env(safe-area-inset-bottom) + 12px);
  z-index:90;width:calc(100% - 28px);max-width:420px;
  background:var(--carbon);border-radius:16px;overflow:hidden;
  box-shadow:var(--sombra-alta);animation:sube .22s ease;
}
.temporizador.listo{animation:latido .6s ease infinite}
.temp-barra{height:5px;background:rgba(255,255,255,.14)}
.temp-barra i{display:block;height:100%;background:var(--azul);transition:width 1s linear}
.temporizador.listo .temp-barra i{background:var(--ok)}
.temp-cuerpo{display:flex;align-items:center;gap:14px;padding:12px 16px}
.temp-info{display:flex;flex-direction:column;min-width:0;flex:1}
.temp-etq{
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;letter-spacing:1.4px;
  color:#9a9a9a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;}
.temp-reloj{font-family:var(--titulo);font-size:30px;font-weight:700;color:#fff;line-height:1.05;font-variant-numeric:tabular-nums}
.temporizador.listo .temp-reloj{color:var(--ok)}
.temp-botones{display:flex;gap:7px;flex:0 0 auto}
.temp-botones button{
  background:rgba(255,255,255,.1);border:none;color:#fff;border-radius:10px;
  padding:9px 12px;cursor:pointer;font-family:var(--cuerpo);font-size:12.5px;font-weight:800;
  letter-spacing:.6px;min-height:40px;
}
.temp-botones button:hover{background:rgba(255,255,255,.2)}
.temp-botones .cerrar{background:transparent;color:#9a9a9a;padding:9px 10px}
@media print{

.temporizador,.pestanas{display:none!important}
}
/* ------------------------- Logotipo vectorial --------------------------- */
.marca.solo-logo .marca-texto{display:none}
.marca-logo.logotipo{
  width:auto;height:44px;background:transparent;padding:0;border-radius:0;
  display:flex;align-items:center;flex:0 1 auto;min-width:0;
}
.marca-logo.logotipo svg{width:auto;height:44px;display:block}
.logo-vista svg.logo-nene{width:100%;height:auto;padding:8px}
.acceso-caja h1{font-size:24px;margin-bottom:6px;text-align:center}
.btn.ancho{width:100%;margin-top:6px}
#aviso-conexion{
  position:fixed;left:0;right:0;bottom:calc(var(--nav-alto) + env(safe-area-inset-bottom));
  z-index:95;background:var(--aviso);color:#fff;
  padding:9px 16px;font-size:12.5px;font-weight:700;
  align-items:center;justify-content:center;gap:8px;
}
.acceso-fila .sub{font-size:12.5px;color:var(--texto3);margin-top:2px}
.clave-nueva b{
  display:block;font-family:var(--titulo);font-size:32px;letter-spacing:3px;
  color:var(--azul);margin:8px 0;user-select:all;
}
/* Flechas para reordenar ejercicios dentro del bloque */
.mover{display:inline-flex;gap:2px}
.mover .btn.chico{padding:4px 7px;min-height:30px;font-size:13px}
.semana-cab b{font-family:var(--titulo);font-size:15px;text-transform:uppercase;letter-spacing:1px}
.dia b{font-size:13.5px;line-height:1.25;font-weight:600}
.dia.con-rutina{border-color:var(--azul)}
.dia.con-rutina b{color:var(--azul)}
.dia.descanso b{color:var(--texto2)}
.dia.vacio{background:var(--superficie)}
.miga{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin-bottom:10px;
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;letter-spacing:1px;
  color:var(--texto3);font-weight:800;}
.miga:hover{color:var(--azul)}
.mini-dia{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:var(--superficie2);border:1.5px solid var(--borde);border-radius:9px;
  padding:6px 10px;font-family:var(--cuerpo);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.7px;min-width:62px;font-weight:800;}
.mini-dia input{width:auto;min-height:auto;margin:0}
.mini-dia.origen{border-color:var(--azul);color:var(--azul);opacity:.6}
svg.silueta{width:100%;height:auto;display:block}
svg.silueta .cuerpo{fill:var(--superficie3);stroke:var(--borde2);stroke-width:1.5}
.pto-medida.con-valor i{background:var(--azul);border-color:var(--azul)}
.pto-medida span b{display:block;font-size:13px;color:var(--texto);letter-spacing:0}
.pto-medida.con-valor span b{color:var(--azul)}
.indice b{display:block;font-family:var(--titulo);font-size:22px;margin-top:2px}
.energia-fila b{font-family:var(--titulo);font-size:18px;color:var(--texto)}
.energia-fila.destacada{border-top:1px solid var(--borde);margin-top:6px;padding-top:12px}
.energia-fila.destacada b{font-size:26px;color:var(--azul)}
.macro-cab b{font-family:var(--titulo);font-size:16px}
.rejilla-medidas{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-bottom:14px}
@media(min-width:560px){

.rejilla-medidas{grid-template-columns:repeat(3,1fr)}
}
.obj-fila b{text-align:right;font-family:var(--titulo);font-size:15px;font-variant-numeric:tabular-nums}
.obj-fila b.fuera{color:var(--aviso)}
.obj-fila b i{font-style:normal;font-size:12px;color:var(--texto3);font-family:var(--cuerpo)}
.comida-cab .pista{display:block;margin-top:2px}
.alimento-fila .info{flex:1;min-width:0}
.alimento-fila .nom{font-weight:600;font-size:13.5px}
.alimento-fila .sub{font-size:12px;color:var(--texto3);margin-top:1px}
svg.plato{width:100%;max-width:340px;height:auto;display:block}
svg.plato .plato-base{fill:#f4f1ea;stroke:#d8d2c4;stroke-width:2}
svg.plato .plato-aro{fill:none;stroke:#e6e0d2;stroke-width:1.5}
svg.plato .plato-comida-borde{fill:none;stroke:rgba(0,0,0,.18);stroke-width:1.5}
svg.plato .corte{fill:none;stroke:#f4f1ea;stroke-width:2.5;stroke-linejoin:round}
svg.plato .porcion{cursor:default}
svg.plato .plato-vacio{
  fill:var(--texto3);font-size:13px;text-anchor:middle;font-family:var(--cuerpo);
}
svg.plato .montoncito{cursor:default}
.plato-item b{font-weight:600;flex:1}
.punto-color{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
/* Fotos reales de alimentos */
.emoji-alimento.con-foto{background:var(--superficie3);overflow:hidden;padding:0}
.emoji-alimento.con-foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto-alimento img{width:100%;height:100%;object-fit:cover;display:block}
.plato-foto img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.comida-foto img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;transition:.2s}
.comida-foto:hover img{transform:scale(1.02)}
.foto-portada img{width:100%;height:100%;object-fit:cover;display:block}
.trans-editor{display:flex;flex-direction:column;gap:9px}
.trans-fila{
  display:flex;align-items:center;gap:12px;padding:10px;
  background:var(--superficie2);border:1px solid var(--borde);border-radius:12px;
}
.trans-fila .info{flex:1;min-width:0}
.trans-fila .nom{font-family:var(--cuerpo);font-size:14px;letter-spacing:.3px;font-weight:800}
.trans-fila .sub{font-size:12.5px;color:var(--texto3)}
.trans-mini{display:flex;gap:3px;flex:0 0 auto}
.trans-mini img,.trans-mini span{
  width:38px;height:50px;border-radius:7px;object-fit:cover;display:grid;place-items:center;
  background:var(--superficie3);color:var(--texto3);font-size:11px;text-align:center;
}
.trans-subir{
  height:150px;border-radius:12px;overflow:hidden;background:var(--superficie2);
  border:2px dashed var(--borde2);display:grid;place-items:center;color:var(--texto3);font-size:12px;
}
.trans-subir img{width:100%;height:100%;object-fit:cover}
.trans-subir.alta{height:220px}
/* En el teléfono es más natural tocar la foto que buscar el botón */
.trans-subir.tocable{cursor:pointer;text-align:center;padding:8px;line-height:1.4}
.trans-subir.tocable:hover{border-color:var(--azul);color:var(--azul)}
.entrenar{
  position:fixed;inset:0;z-index:120;background:var(--fondo);
  display:flex;flex-direction:column;
}
.ent-cab{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--carbon);border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto;
}
.ent-reloj{
  font-family:var(--titulo);font-size:19px;font-weight:600;color:var(--azul);
  font-variant-numeric:tabular-nums;min-width:56px;
}
.ent-titulo{
  flex:1;text-align:center;color:#fff;font-family:var(--titulo);font-size:14px;
  text-transform:uppercase;letter-spacing:1px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.ent-cerrar{
  background:none;border:none;color:#9a9a9a;font-size:24px;cursor:pointer;
  line-height:1;padding:0 4px;
}
.ent-cerrar:hover{color:#fff}
/* El índice de bloques: uno por bloque, numerado y tocable.

   Antes eran barritas de 6 píxeles sin número. Se podían tocar para saltar de
   bloque, pero nadie lo adivinaba: parecían una barra de progreso. Ahora se
   ven como lo que son —botones— y dicen cuál va, cuál está hecho y en cuál
   estoy parado. Sirve para adelantarse cuando la máquina del bloque 1 está
   ocupada y uno quiere hacer el 3 mientras se desocupa. */
.ent-pasos{
  display:flex;gap:8px;padding:12px 16px 6px;background:var(--carbon);
  flex:0 0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.ent-pasos .paso{
  flex:1 0 auto;min-width:46px;height:38px;border-radius:12px;cursor:pointer;padding:0 10px;
  background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.72);font-family:var(--cuerpo);font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:5px;transition:.18s;
}
.ent-pasos .paso:hover{border-color:rgba(255,255,255,.4);color:#fff}
.ent-pasos .paso .tic{font-size:12px}
.ent-pasos .paso.hecho{
  background:var(--azul-suave);border-color:var(--ok);color:var(--ok);
}
.ent-pasos .paso.actual{
  background:var(--azul);border-color:var(--azul);color:var(--sobre-acento);
}
/* El de ahora, si además está hecho, se ve lleno pero con el tic */
.ent-pasos .paso.actual.hecho{background:var(--azul);color:var(--sobre-acento)}

/* El cierre de la sesión, al final del bloque */
.ent-finalizar{
  display:block;width:100%;margin-top:10px;padding:16px;cursor:pointer;
  background:var(--azul);border:none;border-radius:var(--r);
  color:var(--sobre-acento);font-family:var(--titulo);font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:1.2px;transition:.15s;
}
.ent-finalizar[disabled]{
  background:transparent;border:2px dashed var(--borde2);color:var(--texto3);
  cursor:not-allowed;letter-spacing:.6px;font-size:13px;text-transform:none;
}
.ent-cuerpo{
  flex:1;overflow-y:auto;padding:22px 16px 24px;-webkit-overflow-scrolling:touch;
}
.ent-bloque{
  text-align:center;font-size:20px;letter-spacing:.6px;margin-bottom:4px;
}
.ent-subtitulo{
  text-align:center;color:var(--texto2);font-size:14px;margin-bottom:10px;
}
.ent-datos{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;
}
.ent-datos span{
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;letter-spacing:1px;
  color:var(--texto3);background:var(--superficie2);border:1px solid var(--borde);
  padding:4px 11px;border-radius:999px;font-weight:800;}
.ent-datos .destacado{color:var(--azul);border-color:var(--azul)}
.ent-nota{
  background:var(--azul-suave);border-radius:12px;padding:11px 14px;
  font-size:13px;color:var(--texto2);margin-bottom:16px;
}
.ent-ejercicio{
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--r);padding:14px;margin-bottom:14px;box-shadow:var(--sombra);
}
.ent-ej-cab{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.ent-ej-cab h3{
  flex:1;font-size:16px;line-height:1.25;letter-spacing:.3px;
}
.ent-ej-cab h3 small{font-size:12px;color:var(--texto3);font-weight:400}
.ent-mas{
  background:none;border:none;color:var(--texto3);font-size:20px;cursor:pointer;
  line-height:1;padding:0 4px;flex:0 0 auto;
}
.ent-mas:hover{color:var(--azul)}
.ent-ej-cuerpo{display:flex;gap:12px;align-items:flex-start}
.ent-foto{
  width:88px;flex:0 0 auto;border-radius:12px;overflow:hidden;
  background:var(--superficie2);display:grid;place-items:center;
  aspect-ratio:3/4;padding:6px;text-align:center;
}
.ent-foto img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.ent-series{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
/* Encabezado y filas comparten la misma rejilla para que todo quede alineado.
   Sin los rótulos, nadie sabía si el primer campo eran kilos o repeticiones. */
.ent-series-cab,.ent-serie{
  display:grid;grid-template-columns:34px 1fr 1fr 46px;gap:7px;align-items:center;
}
.ent-series-cab:has(~ .ent-serie .rir),.ent-serie:has(.rir){
  grid-template-columns:34px 1fr 1fr 52px 46px;
}
.ent-series-cab{margin-bottom:2px}
.ent-series-cab span{
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;
  letter-spacing:1px;color:var(--texto3);text-align:center;line-height:1.2;font-weight:800;}
.ent-series-cab .ent-n{text-align:left}
.ent-n{
  font-family:var(--cuerpo);font-size:12px;color:var(--texto3);
  text-align:center;font-variant-numeric:tabular-nums;font-weight:800;}
.ent-serie.hecha .ent-n{color:var(--ok)}
.ent-serie input{
  min-height:44px;padding:8px 6px;text-align:center;font-weight:700;font-size:16px;
  font-variant-numeric:tabular-nums;background:var(--superficie2);border-radius:11px;
}
.ent-serie.hecha input{background:var(--azul-suave);border-color:var(--azul)}
.ent-chk{
  width:46px;height:44px;border-radius:11px;cursor:pointer;font-size:17px;
  background:var(--superficie2);border:1.5px solid var(--borde2);color:var(--texto3);
  display:grid;place-items:center;transition:.14s;
}
.ent-serie.hecha .ent-chk{background:var(--ok);border-color:var(--ok);color:#fff}
.ent-completar{
  display:block;width:100%;margin-top:6px;padding:15px;cursor:pointer;
  background:transparent;border:2px dashed var(--borde2);border-radius:var(--r);
  color:var(--texto2);font-family:var(--cuerpo);font-size:14px;
  text-transform:uppercase;letter-spacing:1.2px;transition:.15s;font-weight:800;}
.ent-completar:hover{border-color:var(--azul);color:var(--azul)}
.ent-pie{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--carbon);border-top:1px solid rgba(255,255,255,.08);flex:0 0 auto;
}
.ent-pie .btn{flex:1}
.ent-cuenta{
  font-family:var(--cuerpo);font-size:12px;color:#9a9a9a;
  text-transform:uppercase;letter-spacing:1.2px;white-space:nowrap;font-weight:800;}
.foto-ejercicio img{width:100%;height:100%;object-fit:cover;display:block}
.mini-ejercicio{
  width:44px;height:44px;flex:0 0 auto;border-radius:10px;overflow:hidden;
  background:var(--superficie3);
}
.mini-ejercicio img{width:100%;height:100%;object-fit:cover;display:block}
.mini-ejercicio.tocable{cursor:zoom-in}
/* Hueco de foto en la rutina: se toca y se ponen las dos */
.mini-ejercicio.sin-foto{
  display:grid;place-items:center;cursor:pointer;font-size:17px;
  border:1.5px dashed var(--borde2);background:transparent;
}
.mini-ejercicio.sin-foto:hover{border-color:var(--azul)}
/* ==========================================================================
   EJERCICIOS DEL BLOQUE — tabla en pantalla ancha, tarjetas en el celular
   La tabla obligaba a desplazarse de lado en el teléfono y dejaba la mitad
   de los datos escondidos. Con tarjetas se ve todo de una.
   ========================================================================== */

.items-tarjetas{display:none;flex-direction:column;gap:9px;padding:12px 13px}
@media(max-width:820px){

.bloque .tabla-envoltura{display:none}

.items-tarjetas{display:flex}
}
.item-tarjeta{position:relative;
  display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap;
  background:var(--superficie2);border:1px solid var(--borde);
  border-radius:14px;padding:11px 12px;
}
.item-tarjeta .it-num{
  width:24px;height:24px;flex:0 0 auto;border-radius:7px;
  background:var(--superficie3);display:grid;place-items:center;
  font-family:var(--cuerpo);font-size:12px;color:var(--texto3);font-weight:800;}
.item-tarjeta .mini-ejercicio{width:52px;height:52px;border-radius:10px}
.item-tarjeta .it-info{flex:1;min-width:0}
.item-tarjeta .it-info > b{
  display:block;font-size:14.5px;line-height:1.3;letter-spacing:.2px;margin-bottom:6px;
}
.item-tarjeta .it-info > b small{font-size:12px;color:var(--texto3);font-weight:400}
.it-datos{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.it-datos > span:not(.etq){
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--texto3);background:var(--superficie3);padding:2px 8px;border-radius:999px;font-weight:800;}
.it-obs{font-size:12px;color:var(--texto3);font-style:italic;margin-top:6px;line-height:1.45}
/* En el teléfono los botones bajan a su propia línea: así el nombre del
   ejercicio dispone de todo el ancho y no se parte en tres renglones. */
.it-acciones{
  display:flex;align-items:center;gap:6px;flex:1 1 100%;
  justify-content:flex-end;margin-top:2px;
}
.it-acciones .solo-entrenador{display:flex;gap:2px;margin-right:auto;order:-1}
@media(min-width:560px){

.it-acciones{flex:0 0 auto;flex-direction:column;align-items:flex-end;margin-top:0}

.it-acciones .solo-entrenador{margin-right:0;order:0}
}
/* Objetivo del ejercicio, junto al nombre, en el modo entrenamiento */
.ent-ej-titulo{flex:1;min-width:0}
.ent-objetivo{
  font-family:var(--cuerpo);font-size:12.5px;letter-spacing:.6px;
  color:var(--texto2);margin-top:3px;text-transform:uppercase;font-weight:800;}
.ent-objetivo b{color:var(--azul);font-weight:600}
.ent-foto{position:relative;cursor:pointer}
.ent-play{
  position:absolute;inset:auto 6px 6px auto;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:11.5px;
}
.demo{width:100%;border-radius:14px;margin-bottom:14px;display:block;background:#000}
/* --------------- Las dos fases del movimiento: inicio y final ----------- */
.ent-fases{
  width:96px;flex:0 0 auto;display:flex;flex-direction:column;gap:5px;
  cursor:pointer;position:relative;
}
.ent-fases figure{margin:0;position:relative;border-radius:10px;overflow:hidden;background:var(--superficie2)}
.ent-fases img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ent-fases .vacia{display:block;width:100%;aspect-ratio:4/3;background:var(--superficie3)}
.ent-fases figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2px 5px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:800;}
.ent-sin-foto{
  width:100%;aspect-ratio:3/4;border-radius:10px;background:var(--superficie2);
  border:1.5px dashed var(--borde2);display:grid;place-items:center;text-align:center;
}
.ent-sin-foto span{
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;
  letter-spacing:1px;color:var(--texto3);line-height:1.3;font-weight:800;}
.fases-grande{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.fases-grande figure{margin:0;border-radius:14px;overflow:hidden;background:var(--superficie2);position:relative}
.fases-grande img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.fases-grande .vacia{display:block;width:100%;aspect-ratio:3/4;background:var(--superficie3)}
.fases-grande figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:6px 9px;
  background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;letter-spacing:1.2px;font-weight:800;}
.fases-editor{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
#hoja-impresion,
#hoja-impresion *{
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.h-nombre b{
  display:block;font-family:var(--titulo);
  font-size:16pt;font-weight:700;letter-spacing:.4pt;text-transform:uppercase;line-height:1;
}
.h-nombre b i{font-style:normal;color:var(--azul)}
.h-nombre small{
  display:block;font-size:7.5pt;letter-spacing:1.4pt;
  text-transform:uppercase;color:#666;margin-top:1mm;
}
.h-para b{
  display:block;font-family:var(--titulo);
  font-size:12pt;font-weight:600;text-transform:uppercase;letter-spacing:.5pt;line-height:1.15;
}
.h-para small{display:block;font-size:8pt;color:#666;margin-top:.6mm}
.h-titulo h1{
  font-family:var(--titulo);
  font-size:19pt;font-weight:700;letter-spacing:-.2pt;line-height:1.08;margin:0;
}
.h-tabla thead{display:table-header-group}
.h-tabla th{
  font-family:var(--titulo);font-size:7.5pt;font-weight:600;
  text-transform:uppercase;letter-spacing:.7pt;color:#444;text-align:left;
  background:#f0f0f0;padding:1.4mm 2mm;border-bottom:.6pt solid #bbb;
}
.h-tabla td{padding:1.6mm 2mm;border-bottom:.4pt solid #ddd;vertical-align:middle}
.h-tabla tr{break-inside:avoid}
.h-tabla th.h-n{text-align:center}
.h-foto img{width:15mm;height:12mm;object-fit:cover;border-radius:1mm;display:block;filter:grayscale(1) contrast(1.05)}
.h-ej b{font-weight:600}
.h-calendario td{font-size:7.5pt;text-align:center}
.h-calendario th{text-align:center}
.h-calendario td i{color:#888;font-style:normal}
.op-imprimir input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--azul)}
/* ==========================================================================
   LA ÚLTIMA VEZ — con cuánto peso se hizo este mismo ejercicio la vez pasada
   --------------------------------------------------------------------------
   Es la pregunta que se hace el entrenador al programar y la persona al
   levantar la barra. Va pegada al ejercicio en la rutina, en el modo
   entrenamiento y encima del campo donde se anota el peso.
   ========================================================================== */
.ultima-vez{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:8px;padding:7px 11px;border-radius:10px;
  background:var(--superficie3);border:1px solid var(--borde2);
}
.ultima-vez .uv-etq{
  font-family:var(--cuerpo);font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:1px;color:var(--texto3);
}
.ultima-vez .uv-peso{
  font-family:var(--titulo);font-size:16px;font-weight:700;color:var(--azul);
  letter-spacing:.3px;
}
.ultima-vez .uv-series{
  font-size:12.5px;color:var(--texto2);font-variant-numeric:tabular-nums;
  margin-left:auto;letter-spacing:.3px;
}
.ultima-vez.nueva{
  background:var(--superficie2);border-left-color:var(--borde2);
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;
  letter-spacing:1px;color:var(--texto3);font-weight:800;}
@media(max-width:520px){

.ultima-vez .uv-series{margin-left:0;flex:1 1 100%}
}
/* La ficha del formulario, tal como la llenó la persona */
.ficha h4{
  font-family:var(--cuerpo);font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:1.4px;color:var(--azul);margin:18px 0 8px;
  padding-bottom:5px;border-bottom:1px solid var(--borde);
}
.ficha h4:first-child{margin-top:0}
.ficha-linea b{flex:1;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--texto)}
/* Aviso de mensualidad por vencer, dentro de la app */
.aviso-membresia{
  margin:0 0 16px;padding:12px 16px;border-radius:12px;
  background:var(--superficie3);border:1px solid var(--borde2);
  font-size:13.5px;line-height:1.5;color:var(--texto);
}
.aviso-membresia b{color:var(--aviso)}
/* ==========================================================================
   EMOJI EN GRIS
   --------------------------------------------------------------------------
   Los pinta el sistema operativo a todo color y son la única fuente de color
   que queda fuera del negro y el dorado. Se les quita la saturación allí donde
   van solos; los que van dentro de un texto llevan la clase .ico-mono.
   ========================================================================== */
.pestanas button,
.item-tarjeta .it-num,
.ico-mono{filter:grayscale(1)}
.pestanas button.activa{filter:grayscale(1) brightness(1.05)}
/* Distintivo del dueño de la plataforma en la lista de entrenadores */
.etq-dueno{
  display:inline-block;margin-left:8px;padding:2px 9px;border-radius:var(--pill);
  background:var(--azul);color:var(--sobre-acento);
  font-family:var(--cuerpo);font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:1px;vertical-align:middle;
}
/* ==========================================================================
   MENSUALIDADES POR COBRAR — aviso para el entrenador al entrar
   ========================================================================== */
.aviso-cobros{
  margin:0 0 16px;padding:14px 16px;border-radius:14px;
  background:var(--superficie);border:1.5px solid var(--azul);
}
.cobros-cab b{
  font-family:var(--cuerpo);font-size:14px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--azul);font-weight:800;}
.aviso-cobros .pista{margin-bottom:10px}
.cobros-lista .cobro b{font-size:13.5px;font-weight:600;color:var(--texto)}
.merc-dia input{width:56px;text-align:center;min-height:38px;padding:6px}
.merc-dia small{
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--texto3);font-weight:800;}
.merc-grupo h4{
  font-family:var(--cuerpo);font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:1.3px;color:var(--azul);
  margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--borde);
}
.int-base b{display:block;font-size:15px;margin-bottom:2px}
.int-base .pista{font-size:12px}
/* ==========================================================================
   EL VISOR — las fotos del ejercicio a pantalla completa
   --------------------------------------------------------------------------
   En las miniaturas la foto se recorta (`cover`), que ahí está bien. Aquí se
   ajusta (`contain`) y se ve entera: es el sitio al que se llega justamente
   cuando no se sabe qué ejercicio toca, y una foto recortada no lo resuelve.
   Va por encima de los diálogos (140) y del modo entrenamiento (120), pero
   por debajo de los avisos (200), que tienen que seguir viéndose.
   ========================================================================== */

#visor{
  position:fixed;inset:0;z-index:150;display:none;
  flex-direction:column;background:#000;
  padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
}
#visor.visible{display:flex}
.visor-marco{
  flex:1 1 auto;min-height:0;display:grid;place-items:center;overflow:hidden;
}
#visor-img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  border-radius:10px;cursor:zoom-in;
}
/* Ampliada: la foto pasa a su tamaño mayor y el marco se vuelve arrastrable */
#visor.ampliada .visor-marco{overflow:auto;place-items:start center;cursor:grab}
#visor.ampliada #visor-img{
  max-width:none;max-height:none;width:200%;height:auto;
  border-radius:0;cursor:zoom-out;
}
.visor-pie{
  flex:0 0 auto;text-align:center;padding:12px 6px 4px;color:#fff;
}
.visor-pie b{
  display:block;font-family:var(--titulo);font-size:15px;
  text-transform:uppercase;letter-spacing:2px;color:var(--azul);
}
.visor-pie span{display:block;font-size:13.5px;color:#ececec;margin-top:3px}
.visor-pie small{display:block;font-size:12px;color:#9a9a9a;margin-top:7px}
.visor-cerrar,.visor-ir{
  position:absolute;z-index:2;background:rgba(0,0,0,.55);color:#fff;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  width:44px;height:44px;font-size:26px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.visor-cerrar{top:max(10px,env(safe-area-inset-top));right:10px;font-size:30px}
.visor-ir{top:50%;transform:translateY(-50%);font-size:30px}
.visor-ir.atras{left:10px}
.visor-ir.adelante{right:10px}
.visor-cerrar:hover,.visor-ir:hover{background:rgba(0,0,0,.85)}
/* Las fotos de la ficha se abren en el visor: que se note que son tocables */
.fases-grande figure{cursor:zoom-in}
.fases-grande figure:hover img{opacity:.86}
.fases-grande .lupa{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:12px;
}
/* Hueco de foto que el entrenador puede llenar de un toque */
.fases-grande .poner{
  display:grid;place-items:center;width:100%;aspect-ratio:3/4;
  background:var(--superficie2);border:1.5px dashed var(--borde2);
  color:var(--texto3);font-family:var(--cuerpo);font-size:12px;
  text-transform:uppercase;letter-spacing:1px;text-align:center;cursor:pointer;font-weight:800;}
.fases-grande .poner:hover{border-color:var(--azul);color:var(--azul)}
/* ==========================================================================
   FOTOS QUE FALTAN — el aviso de la rutina y la marca de cada fila
   --------------------------------------------------------------------------
   La rutina se arma en el escritorio y se entrena en el teléfono, sola, en el
   gimnasio. Si un ejercicio va sin fotos, allí ya no hay a quién preguntarle.
   Por eso el hueco se ve aquí, y se llena desde aquí.
   ========================================================================== */

.aviso-fotos{
  border:1.5px solid var(--aviso);border-radius:16px;
  background:var(--azul-suave);padding:14px 16px;margin-bottom:14px;
}
.af-texto b{display:block;font-family:var(--titulo);font-size:14.5px;
  text-transform:uppercase;letter-spacing:.8px;color:var(--aviso)}
.af-texto span{display:block;font-size:12.5px;color:var(--texto2);margin-top:4px;line-height:1.45}
.af-lista{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.af-lista .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La marca dentro de la fila del ejercicio */
.marca-foto{
  display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
  margin-left:7px;padding:1px 7px;border-radius:20px;cursor:pointer;
  font-size:12px;font-family:var(--cuerpo);text-transform:uppercase;letter-spacing:.7px;
  border:1px solid transparent;line-height:1.7;font-weight:800;}
.marca-foto.lista{background:var(--superficie3);color:var(--texto3);font-size:12px;padding:1px 6px}
.marca-foto.lista:hover{color:var(--azul)}
.marca-foto.falta{border-color:var(--aviso);color:var(--aviso);background:transparent}
.marca-foto.falta:hover{background:var(--azul-suave)}
/* ==========================================================================
   CÓMO VAS — la progresión de un ejercicio, semana a semana
   --------------------------------------------------------------------------
   La pregunta de la semana 3 es "¿voy subiendo?". Se responde con lo que le
   pidieron al lado de lo que hizo, en el orden del plan, y no con una tabla de
   fechas sueltas.
   ========================================================================== */

.ultima-vez.tocable{cursor:pointer}
.ultima-vez.tocable:hover{background:var(--superficie3)}
.ultima-vez .uv-mas{
  width:100%;font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;
  letter-spacing:1px;color:var(--azul);margin-top:2px;font-weight:800;}
.marca-progreso{
  display:inline-flex;align-items:center;gap:3px;vertical-align:middle;
  margin-left:5px;padding:1px 6px;border-radius:20px;cursor:pointer;
  font-size:12px;font-family:var(--cuerpo);letter-spacing:.5px;
  background:var(--superficie3);color:var(--texto3);line-height:1.7;font-weight:800;}
.marca-progreso:hover{color:var(--azul)}
.pv-frase{
  font-size:14px;line-height:1.55;color:var(--texto2);
  margin-bottom:14px;padding:11px 13px;border-radius:12px;
  background:var(--superficie3);border:1px solid var(--borde2);
}
.pv-frase b{color:var(--texto)}
.pv-lista{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.pv-fila{
  border:1px solid var(--borde);border-radius:12px;padding:10px 12px;
  background:var(--superficie);
}
.pv-fila.record{border-color:var(--azul)}
.pv-cab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pv-cab b{
  font-family:var(--cuerpo);font-size:13.5px;text-transform:uppercase;
  letter-spacing:.9px;color:var(--texto);font-weight:800;}
.pv-fecha{font-size:12px;color:var(--texto3)}
.pv-cambio{
  margin-left:auto;font-family:var(--cuerpo);font-size:12px;
  text-transform:uppercase;letter-spacing:.8px;padding:1px 8px;border-radius:20px;
  border:1px solid var(--borde2);color:var(--texto3);font-weight:800;}
.pv-cambio.sube{border-color:var(--azul);color:var(--azul)}
.pv-cambio.baja{border-color:var(--borde2);color:var(--texto2)}
.pv-obj{font-size:12px;color:var(--texto3);margin-top:6px}
.pv-obj b{color:var(--texto2)}
.pv-hizo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:5px}
.pv-etq{
  font-family:var(--cuerpo);font-size:12px;text-transform:uppercase;
  letter-spacing:1px;color:var(--texto3);font-weight:800;}
.pv-series{
  font-size:14px;color:var(--texto);font-variant-numeric:tabular-nums;
  letter-spacing:.4px;
}
.pv-pr{font-size:12px;color:var(--azul)}
/* ==========================================================================
   AGREGADO PARA SUPLEMENTOS DZ
   ========================================================================== */

/* Aviso de "esto es del catálogo, se ve pero no se toca" */
.aviso-lectura{
  background:var(--azul-suave);border:1px solid var(--azul);
  color:var(--texto);border-radius:var(--r-s);
  padding:10px 13px;font-size:12.5px;line-height:1.55;margin-bottom:14px;
}

/* La caja donde se ve y se sube la foto del ejercicio */
.foto-editor{
  width:100%;aspect-ratio:4/3;background:var(--superficie2);
  border:1.5px dashed var(--borde2);border-radius:var(--r-s);
  display:grid;place-items:center;overflow:hidden;
  color:var(--texto3);font-size:12px;text-align:center;padding:6px;
  cursor:pointer;
}
.foto-editor img{width:100%;height:100%;object-fit:contain;display:block}

/* La serie más floja del día. No es un regaño: es para ver de un vistazo
   dónde se cayó el rendimiento sin tener que comparar los números uno por uno. */
.chk.peor{
  background:rgba(180,83,9,.10) !important;
  border-color:var(--aviso) !important;
  color:var(--aviso) !important;
}
.ent-chk.peor{
  background:rgba(180,83,9,.12) !important;
  border-color:var(--aviso) !important;
  color:var(--aviso) !important;
}

/* ==========================================================================
   SUSTITUIR UN EJERCICIO
   --------------------------------------------------------------------------
   Cada opción dice POR QUÉ sirve —mismo patrón, otro aparato— y no solo su
   nombre. Sin ese porqué hay que conocerse el catálogo de memoria para elegir,
   que es justo lo que esta pantalla viene a evitar.
   ========================================================================== */
.sust-ej{display:grid;gap:8px}
.sust-ej-op{
  display:grid;gap:2px;text-align:left;cursor:pointer;width:100%;
  padding:11px 13px;border:1px solid var(--borde);border-radius:var(--r-s);
  background:var(--superficie2);color:var(--texto);font:inherit;
}
.sust-ej-op:hover{border-color:var(--azul);background:var(--azul-suave)}
.sust-ej-op .nom{font-weight:700;font-size:14.5px}
.sust-ej-op .por{font-size:12px;color:var(--texto2)}
.sust-ej-op .eq{font-size:12px;color:var(--texto3);text-transform:uppercase;letter-spacing:.06em}

/* La foto de referencia del entrenador, arriba de la lista de ejercicios. */
.ref-barra{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 14px;margin-bottom:14px;
  border:1px dashed var(--borde2);border-radius:var(--r-s);background:var(--superficie2);
}
.ref-foto{
  width:68px;height:68px;flex:none;border-radius:10px;overflow:hidden;
  background:var(--superficie3);display:grid;place-items:center;
  font-size:12px;color:var(--texto3);text-align:center;
}
.ref-foto img{width:100%;height:100%;object-fit:cover}
.ref-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px}
.ref-txt strong{font-size:14px}
.ref-txt span{font-size:12px;color:var(--texto2);line-height:1.45}
.ref-acciones{display:flex;gap:7px;flex-wrap:wrap}

/* ==========================================================================
   POLISH DZ (octubre 2026)
   Los botones y las etiquetas hablan como la tienda: Instrument Sans 800 en
   mayúsculas. Anton se queda para títulos y números grandes.
   ========================================================================== */
.btn{font-family:var(--cuerpo);font-weight:800;letter-spacing:.4px}
.btn.principal{font-weight:800}
.btn:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.etq{font-family:var(--cuerpo);font-weight:700;letter-spacing:.4px}

/* Lo que hay que hacer es lo protagonista; el músculo, un dato de apoyo.
   Antes "CUÁDRICEPS" en rojo gritaba más que "5 × 10". */
.it-datos > span:not(.etq){
  font-family:var(--cuerpo);font-weight:800;font-size:13px;letter-spacing:.3px;
  color:var(--texto);background:#fff;border:1px solid var(--borde2);
  padding:4px 10px;font-variant-numeric:tabular-nums;
}
.etq[class*="g-"],
html[data-tema="oscuro"] .etq[class*="g-"]{background:transparent;color:var(--texto2);border-color:var(--borde2)}

/* El tipo de bloque en Negro Ring: una franja roja por bloque era demasiado rojo */
.bloque-tipo{background:var(--carbon);color:#fff;font-family:var(--cuerpo);font-weight:800;letter-spacing:.6px}

/* Los botones de la tarjeta bajan de línea antes que salirse de ella */
.it-acciones{flex-wrap:wrap}
.it-acciones .btn.chico.fantasma{min-width:40px;min-height:40px}
.btn.chico{min-height:40px}

/* ==========================================================================
   HARDEN (octubre 2026): el estado no va en el rojo de la marca
   ========================================================================== */
/* Hecho = verde. Antes una serie terminada se pintaba de rojo */
.serie.hecha{border-color:var(--ok);background:rgba(21,128,61,.07)}
.ent-serie.hecha input{background:rgba(21,128,61,.08);border-color:var(--ok)}
.ent-pasos .paso.hecho{background:rgba(21,128,61,.10);border-color:var(--ok);color:var(--ok)}
.pv-cambio.sube{border-color:var(--ok);color:var(--ok)}
/* Lo elegido (filtros, pestañas, conmutadores) en Negro Ring, como en la tienda */
.conmutador button.activo,
.filtros button.activo{background:var(--carbon);border-color:var(--carbon);color:#fff}
/* Avisos: cada tipo con su color, no todos con borde verde */
.aviso{border-color:rgba(255,255,255,.14)}
.aviso.error{border:1.5px solid var(--peligro);background:#fff1f3;color:#9f1239;box-shadow:var(--sombra-alta)}
.aviso.info{border-color:var(--info)}
/* Salir del modo entrenamiento y el menú ⋯: 44 px para el dedo */
.ent-cerrar,.ent-mas{min-width:44px;min-height:44px;display:inline-grid;place-items:center}

/* ==========================================================================
   MODO ENTRENAMIENTO: lo que se lee con el teléfono en la mano (oct 2026)
   ========================================================================== */
/* La receta, grande y en Anton: los números son lo que se mira entre series */
.ent-objetivo{
  font-size:18px;letter-spacing:.4px;line-height:1.25;color:var(--texto);margin-top:4px;
}
.ent-objetivo b{color:var(--azul);font-weight:400;font-variant-numeric:tabular-nums}
/* La indicación del entrenador, a la vista: antes vivía detrás del "⋯" y
   cambia cómo se cuenta la serie ("10 derecha + 10 izquierda = 1 serie") */
.ent-indicacion{
  margin-top:8px;font-family:var(--cuerpo);font-size:14px;line-height:1.45;
  color:var(--texto2);display:flex;gap:7px;align-items:flex-start;
}
.ent-indicacion i{color:var(--texto3);margin-top:3px;flex:0 0 auto}
/* Encabezados de las series: Instrument Sans 800, nunca bajo 12 px */
.ent-series-cab span,.ent-n{font-family:var(--cuerpo);font-weight:800;font-size:12px;letter-spacing:.4px}
.ent-fases figcaption,.ent-sin-foto span{font-size:12px}
/* En el celular la foto va arriba y las series usan todo el ancho
   (antes la cuadrícula quedaba en 205 px al lado de la foto) */
@media (max-width:520px){
  .ent-ej-cuerpo{flex-direction:column;gap:10px}
  .ent-fases{width:100%;flex-direction:row}
  .ent-fases figure,.ent-fases .ent-sin-foto{flex:1 1 0;max-width:180px}
  .ent-series{width:100%}
}
/* La foto en el celular: a todo el ancho y sin recortar la pose (la imagen
   trae INICIO | FINAL lado a lado, en 3:2). Antes quedaba en 180 px de
   ancho con la mitad derecha vacía y el inicio cortado. */
@media (max-width:520px){
  .ent-fases figure,.ent-fases .ent-sin-foto{max-width:none;flex:1 1 100%}
  .ent-fases img{aspect-ratio:3/2;object-fit:contain;background:var(--superficie2);max-height:200px}
}
/* Foco visible en todo lo que se alcanza con el teclado (antes solo en .btn) */
:where(a,button,input,select,textarea,summary,[role="button"][tabindex]):focus-visible{
  outline:2px solid var(--azul);outline-offset:3px;
}
.ent-chk:focus-visible,.paso:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ==========================================================================
   PULIDO FINAL (octubre 2026): detalle de rutina, modo entrenamiento, estados
   ========================================================================== */
/* Detalle: volver arriba, el nombre, la acción principal y luego lo del coach */
.dz-volver-fila{margin:0 0 10px}
.tarjeta-rutina{margin-bottom:12px}
.rutina-nombre{font-family:var(--titulo);font-weight:400;font-synthesis-weight:none;font-size:26px;
  line-height:1.1;text-transform:uppercase;letter-spacing:.4px;margin:0 0 6px;overflow-wrap:anywhere}
.dz-entrenar-fila{margin:0 0 12px}
.dz-entrenar-fila .btn.principal{min-height:52px;font-size:16px;padding:14px 28px}
@media (max-width:620px){.dz-entrenar-fila .btn.principal{width:100%;justify-content:center}}
.dz-barra-rutina{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.dz-barra-rutina:empty{display:none}
/* Botones y tarjetas: el hover es tinta, el rojo queda para la acción */
.btn:hover{border-color:var(--texto);color:var(--texto)}
.btn.principal:hover{color:var(--sobre-acento)}
.tarjeta.clicable:hover{border-color:var(--texto)}
/* Pestañas: la elegida en Negro Ring, igual que filtros y conmutadores */
.pestanas button:hover{border-color:var(--texto);color:var(--texto)}
.pestanas button.activa{background:var(--carbon);border-color:var(--carbon);color:#fff;filter:none}
/* Récords: ámbar de aviso, no el rojo de la marca */
.pv-pr,.pr{color:var(--aviso)}
.pv-fila.record{border-color:var(--aviso);background:rgba(180,83,9,.05)}
/* Modo entrenamiento: el reloj en blanco y el bloque actual en blanco/tinta */
.ent-reloj{color:#fff;font-weight:400;font-synthesis-weight:none}
.ent-pasos .paso{font-family:var(--cuerpo);font-weight:800}
.ent-pasos .paso.actual,.ent-pasos .paso.actual.hecho{background:#fff;border-color:#fff;color:var(--texto)}
/* "Marcar hechas…" es secundaria: píldora sólida, sin borde punteado */
.ent-completar{border:1.5px solid var(--borde2);border-radius:var(--pill);background:var(--superficie);
  color:var(--texto);font-family:var(--cuerpo);font-weight:800;font-size:13px;letter-spacing:.6px;min-height:48px}
.ent-completar:hover{border-color:var(--texto);color:var(--texto)}
/* Lo que falta para finalizar, como frase y no como botón apagado */
.ent-faltan{margin:12px 0 0;font-family:var(--cuerpo);font-size:14px;line-height:1.5;color:var(--texto2);text-align:center}
.ent-faltan b{color:var(--texto);font-weight:800;font-variant-numeric:tabular-nums}
/* Íconos en línea con el texto */
.pista i,.parrafo i,.pr i,.pv-pr i{margin-right:4px}
.buscador input::placeholder{font-weight:400}
.buscador input{font-weight:500}
/* Tabla del editor en escritorio: las observaciones no se aprietan */
@media (min-width:900px){
  .tabla{table-layout:auto}
  .tabla td.obs{min-width:170px;white-space:normal;overflow-wrap:anywhere}
  /* Encabezados de dos palabras bajan de línea en vez de ensanchar la tabla */
  table.tabla thead th{white-space:normal;line-height:1.25}
  table.tabla th,table.tabla td{padding-left:8px;padding-right:8px}
  /* Registrar arriba y mover/editar debajo: la columna pasa de 244 a ~130 px */
  .tabla td.acciones-fila{white-space:normal;width:1%}
  .tabla td.acciones-fila .mover{display:flex;gap:4px;margin-top:6px;justify-content:flex-end}
}

/* ==========================================================================
   CRÍTICA 4 OCT (noche): el rojo solo para actuar, tamaños para el dedo
   ========================================================================== */
/* Cifras y títulos de datos en tinta: el rojo queda para los botones */
.ent-objetivo b,.ultima-vez .uv-peso,.total-peso .valor,.grafica-valor,.record-cifra,
.visor-pie b,.ficha h4,.merc-grupo h4,.cobros-cab b{color:var(--texto)}
/* Notas y avisos informativos: gris neutro, no rojo de marca */
.nota-bloque,.ent-nota,.aviso-lectura{background:var(--superficie2);border-color:var(--borde)}
.nota-bloque b{color:var(--texto)}              /* "Drop set": antes 3,9:1 rojo sobre rojo */
.aviso-fotos{background:rgba(180,83,9,.07);border-color:rgba(180,83,9,.35)}
.marca-foto.falta:hover,.sust-ej-op:hover,table.tabla tbody tr:hover{background:rgba(10,10,10,.04)}
/* Lo elegido en Negro Ring */
.item-ej.seleccionado{border-color:var(--carbon);background:rgba(10,10,10,.05)}
.disco.activo{border-color:var(--carbon);background:var(--carbon);color:#fff}
.ent-datos .destacado{background:var(--carbon);border-color:var(--carbon);color:#fff}
.etq-dueno{background:var(--carbon);color:#fff;border-color:var(--carbon)}
.aviso-cobros{border-color:var(--carbon)}
/* Finalizar: píldora con etiqueta en Instrument Sans, como el resto de botones */
.ent-finalizar{border-radius:var(--pill);font-family:var(--cuerpo);font-weight:800;font-size:15px;min-height:52px}
.fin-icono{font-size:40px;line-height:1;margin-bottom:12px;color:var(--texto)}
/* Avisos: cada uno con su borde de estado (antes el borde era blanco e invisible) */
.aviso{border:1.5px solid var(--borde)}
.aviso.ok{border-color:var(--ok)}
.aviso.info{border-color:var(--info)}
/* En el modo entrenamiento los avisos salen abajo, sobre la barra, y no
   tapan el reloj ni los bloques */
body.entrenando #avisos{top:auto;bottom:calc(84px + env(safe-area-inset-bottom))}
/* Blancos para el dedo: 40-44 px */
.mover .btn.chico{min-height:40px;min-width:40px}
.disco .contador button{min-width:40px;min-height:40px}
.modal-cab button{min-width:44px;min-height:44px;display:inline-grid;place-items:center;color:var(--texto3)}
.modal-cab button:hover{color:var(--texto)}
.modal-caja{max-height:92dvh}
/* El objetivo en el campo es una pista, no un dato ya escrito */
.ent-serie input::placeholder{font-weight:400;color:#9a9a9a}
/* Esta página no tiene barra inferior: sin el hueco de 66 px al final */
body{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
/* En el escritorio el entrenamiento no se estira a todo el ancho */
@media (min-width:900px){.ent-cuerpo > *{max-width:760px;margin-left:auto;margin-right:auto}}
/* Las animaciones que se nombraban y no existían */
@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes latido{50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Re-crítica 4 oct: contraste */
.ent-pasos .paso.hecho{background:var(--ok);border-color:var(--ok);color:#fff}
.ent-serie input::placeholder{color:#707070}
.btn.oscuro{background:var(--carbon);border-color:var(--carbon);color:#fff}
.btn.oscuro:hover{background:#000;color:#fff;border-color:#000}

/* ==========================================================================
   MODO ARMAR Y SERIES DE UN TOQUE (4 oct, noche)
   ========================================================================== */
/* Sin "Editar ejercicios" activo, la rutina se lee limpia: sin herramientas */
body:not(.armando) .dz-barra-rutina .herramienta,
body:not(.armando) .bloque-pie,
body:not(.armando) .it-acciones .solo-entrenador,
body:not(.armando) .acciones-fila .mover,
body:not(.armando) .mini-ejercicio.sin-foto,
body:not(.armando) .dz-fin-rutina{display:none!important}
#btn-armar[aria-pressed="true"]{background:var(--carbon);border-color:var(--carbon);color:#fff}
.dz-barra-rutina{border-bottom:0;padding-bottom:0}
body.armando .dz-barra-rutina{padding-bottom:14px;border-bottom:1px solid var(--borde)}
/* Foto pequeña en cuanto el ejercicio tiene una serie hecha: ya se vio, y
   así las series quedan arriba (antes la serie 1 caía a 690 px) */
.ent-compacta .ent-fases img{max-height:84px}
.ent-compacta .ent-fases figure,.ent-compacta .ent-fases .ent-sin-foto{max-width:150px}
@media (max-width:520px){
  .ent-compacta .ent-fases figure,.ent-compacta .ent-fases .ent-sin-foto{flex:0 0 auto;max-width:150px}
  .ent-compacta .ent-fases img{max-height:84px}
}
/* "Primera vez con este ejercicio": un dato, no una casilla */
.ultima-vez.nueva{background:none;border:0;padding:0;font-size:13px;color:var(--texto3);font-weight:600}

/* ==========================================================================
   MESOCICLOS Y COPIAR / PEGAR (6 oct)
   ========================================================================== */
.meso-lista{display:grid;gap:14px;margin-bottom:22px}
.meso-tarjeta{border-left:0;border-top:4px solid var(--carbon)}
.meso-etq{font-family:var(--cuerpo);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto3);margin-bottom:4px}
.meso-nombre{font-family:var(--titulo);font-weight:400;font-synthesis-weight:none;font-size:22px;text-transform:uppercase;letter-spacing:.3px}
.meso-dias-mini{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;counter-reset:dia}
.meso-dias-mini li{counter-increment:dia;font-size:13px;font-weight:700;background:var(--superficie2);border:1px solid var(--borde);border-radius:999px;padding:5px 12px}
.meso-dias-mini li::before{content:counter(dia) '. ';color:var(--texto3)}
.sub-lista{font-family:var(--cuerpo);font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto3);margin:8px 0 10px}
.pegar-fila{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;padding:12px;border:1.5px dashed var(--borde2);border-radius:16px;background:var(--superficie)}
.meso-barra{margin-top:4px}
body:not(.armando) .meso-barra{border-bottom:0;padding-bottom:0}
.meso-dias{display:grid;gap:10px}
.meso-dia{display:flex;align-items:center;gap:10px;padding:10px 12px}
.meso-dia-abrir{flex:1;min-width:0;display:flex;align-items:center;gap:14px;background:none;border:0;padding:6px 0;text-align:left;cursor:pointer;color:var(--texto);font:inherit}
.meso-num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--carbon);color:#fff;display:grid;place-items:center;font-family:var(--titulo);font-size:18px}
.meso-dia-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.meso-dia-txt strong{font-family:var(--titulo);font-weight:400;font-size:18px;text-transform:uppercase;letter-spacing:.3px;overflow-wrap:anywhere}
.meso-dia-acc{display:flex;gap:4px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.meso-dia-acc .btn.chico{min-width:40px;min-height:40px}
.miga{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;margin-bottom:6px;cursor:pointer;
  font-family:var(--cuerpo);font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto2)}
.miga:hover{color:var(--texto)}
@media (max-width:520px){
  .meso-dia{flex-wrap:wrap}
  .meso-dia-acc{width:100%;justify-content:flex-start;padding-left:52px}
}

/* ==========================================================================
   CAMBIAR UN EJERCICIO SOLO POR HOY (11 oct)
   ========================================================================== */
.cambiar-hoy{margin-top:8px;align-self:flex-start}
.cambio-hoy{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 0;
  padding:7px 10px;border-radius:var(--r-s);
  background:var(--superficie2);border-left:3px solid var(--aviso);
  font-size:12.5px;line-height:1.4;color:var(--texto2);
}
.cambio-hoy i{color:var(--aviso)}
.cambio-hoy b{color:var(--texto)}
.cambio-hoy span{flex:1 1 180px}
.motivos-cambio{display:grid;gap:8px}
.motivo-op{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:12px 14px;border:1px solid var(--borde);border-radius:var(--r-s);
  background:var(--superficie2);font-weight:600;
}
.motivo-op input{width:auto;min-height:auto;margin:0;accent-color:var(--marca)}
.motivo-op:has(input:checked){border-color:var(--marca);background:var(--superficie)}
.cambio-error{margin:12px 0 0;color:var(--peligro);font-weight:700;font-size:13px}
/* WhatsApp con su verde, como en el resto del sitio */
.btn-whatsapp,.btn-whatsapp:visited{background:#25d366;border-color:#25d366;color:#fff;text-decoration:none}
.btn-whatsapp:hover{background:#1da851;border-color:#1da851;color:#fff}