/* =====================================================================
   CAJAS MAS PREMIUM, TODO ALINEADO (16-oct-2026, tarea 330)
   Miguel: "recuadros mas premium y modernos, coherentes con los colores del
   logo (azules), efectos y movimiento suave"; "cuadrar y alinear textos y
   recuadros"; "peso: el recuadro de dentro sobresale un poco por abajo";
   "reloj de descanso con Minimizar"; "ticks y numeros: el numero parpadea y el
   aplicado va en azul SIN tic, con el numero centrado".
   Va en un fichero aparte, cargado el ULTIMO desde base.html: para volver a
   como estaba basta con quitar esa linea. Lo usan la app de clientes y la de
   la semana de prueba, igual.
   Azules del logo: #004BE2 (la M) y #3B63FF (la web).
   ===================================================================== */
:root{--t330-logo:#004BE2;--t330-web:#3B63FF;--t330-hondo:#061E7A;
  --t330-grad:linear-gradient(135deg,#3B63FF 0%,#004BE2 60%,#0a2fae 100%);
  --t330-borde:rgba(59,99,255,.24);--t330-curva:cubic-bezier(.2,.8,.2,1)}

/* ---- 1. Cajas: borde azul fino con brillo arriba, sombra suave, se mueven
   un poco al tocar (solo las que se pueden tocar) ---- */
.card,.ej{border-color:var(--t330-borde);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 28px -14px rgba(0,40,140,.55);
  transition:border-color .25s var(--t330-curva),box-shadow .25s var(--t330-curva),transform .25s var(--t330-curva)}
a.card:hover,.ej:hover{border-color:rgba(59,99,255,.42)}
a.card:active{transform:scale(.985)}
.ej.abierto{border-color:rgba(59,99,255,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 16px 38px -16px rgba(0,75,226,.6)}

/* ---- 2. Cabecera de cada ejercicio: numero, foto, nombre, puntos y flecha
   en la MISMA linea, centrados en vertical ---- */
.ej-cab{align-items:center!important;gap:0;min-height:76px}
.ej-marca{flex:none;align-self:center;display:flex;align-items:center;justify-content:center;
  width:52px;min-height:64px;padding:0 0 0 12px;background:none;border:0}
.ej-orden{position:relative;display:flex!important;align-items:center;justify-content:center;
  width:34px!important;height:34px!important;min-width:34px;border-radius:50%!important;
  font:800 15px/1 Manrope,system-ui,sans-serif;font-variant-numeric:tabular-nums;
  transition:background-color .25s var(--t330-curva),color .25s var(--t330-curva),box-shadow .25s var(--t330-curva)}
.ej-orden .ej-tic,.ej.marcado .ej-orden .ej-tic{display:none!important}
.ej-orden-n,.ej.marcado .ej-orden-n{display:block!important;margin:0;line-height:1}
/* hecho / abierto / listo: azul de la marca, el numero en el centro, sin tic */
.ej.marcado .ej-orden,.ej.listo .ej-orden,.ej.abierto .ej-orden{background:var(--t330-grad)!important;color:#fff!important;
  box-shadow:0 0 0 3px rgba(59,99,255,.18),0 6px 14px -4px rgba(0,75,226,.7)}
.ej-mini-enl{flex:none;align-self:center;position:relative;display:block;width:54px;height:54px;margin:0 2px 0 6px;
  border-radius:14px;overflow:visible}
.ej-mini-enl .ej-mini,.ej-mini{width:54px!important;height:54px!important;border-radius:14px!important;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 14px -6px rgba(0,0,0,.6)}
.ej-mini-enl .ej-mini-lupa{right:-4px!important;bottom:-4px!important;top:auto!important;left:auto!important}
.ej-mini-sin{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;
  background:linear-gradient(160deg,rgba(59,99,255,.22),rgba(0,75,226,.08));color:#9fb6ff;
  box-shadow:0 0 0 1px rgba(59,99,255,.25)}
.ej-mini-sin svg{width:24px;height:24px}
.ej-cab .ej-tapa{display:flex!important;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px;padding-left:10px}
.ej-cab > .ej-mini-enl + .ej-tapa{padding-left:10px}
.ej-tit b{line-height:1.22}
.ej-tit small{margin-top:4px;font-variant-numeric:tabular-nums}
.ej-puntos{align-self:center}
.ej-chevron{align-self:center;flex:none}
.ej-mover{top:38px!important;transform:translateY(-50%);bottom:auto!important}
.ej-tit b{white-space:normal!important;overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3!important;text-overflow:clip!important}
.ej-cab .ej-tapa{gap:8px!important}
/* abierto (el que estas apuntando) = aro azul; hecho = relleno azul */
.ej.abierto:not(.marcado):not(.listo) .ej-orden{background:rgba(59,99,255,.16)!important;color:#fff!important;box-shadow:0 0 0 2px var(--t330-web) inset,0 0 0 4px rgba(59,99,255,.16)!important}
.ej.listo .ej-puntos i.on{background:var(--t330-web)!important}

/* ---- 3. Peso y reps: el hueco de escribir queda DENTRO de la caja,
   redondeado y sin sobresalir por abajo ---- */
.serie-campos > div{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:10px 12px 10px;border-radius:18px;overflow:hidden;box-sizing:border-box;min-height:78px;
  transition:border-color .2s ease,box-shadow .2s ease}
.serie-campos > div:focus-within{border-color:var(--t330-web)!important;
  box-shadow:0 0 0 3px rgba(59,99,255,.22),0 10px 22px -12px rgba(0,75,226,.7)}
.serie-campos label{margin:0!important;line-height:1}
.serie-campos input{display:block;width:100%;box-sizing:border-box;min-height:44px!important;height:44px;margin:0!important;
  padding:0 10px!important;border:0!important;border-radius:12px!important;background:rgba(0,0,0,.18)!important;
  text-align:center;font-variant-numeric:tabular-nums;box-shadow:none!important}
.serie-campos input:focus{background:rgba(59,99,255,.12)!important}

/* ---- 4. Izquierda / derecha en los unilaterales: dos botones claros ---- */
.serie-cab{flex-wrap:wrap}
.lado-bolas{order:5;flex:1 1 100%;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 2px!important}
.lado-bolas.junto-a-b{margin:0 0 10px!important}
.lado-bola{display:block}
.lado-bola span{display:flex!important;align-items:center;justify-content:center;gap:8px;width:auto!important;height:44px!important;
  min-width:0;padding:0 12px;border-radius:14px!important;border:1px solid var(--t330-borde)!important;
  font:700 14px/1 Manrope,system-ui,sans-serif;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.lado-bola span b{position:static!important;display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;font-size:12px;transform:none!important}
.lado-bola input:checked + span{background:var(--t330-grad)!important;color:#fff!important;border-color:transparent!important}
.lado-bola input:checked + span b{background:rgba(255,255,255,.22)!important;color:#fff!important}

/* ---- 5. Numeros que se marcan (valoracion 1-5): numero centrado, sin
   circulito de radio, aplicado en azul ---- */
.scale{display:grid!important;grid-template-columns:repeat(5,1fr);gap:8px}
.scale label{position:relative;display:block;margin:0;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
.scale input{position:absolute;opacity:0;width:0;height:0;margin:0}
.scale input::before{content:none!important}
.scale span{display:flex!important;align-items:center;justify-content:center;height:48px;border-radius:14px;
  border:1px solid var(--t330-borde);font:800 17px/1 Manrope,system-ui,sans-serif;font-variant-numeric:tabular-nums;
  cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.scale input:checked + span{background:var(--t330-grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 14px -6px rgba(0,75,226,.8)}
.scale input:focus-visible + span{outline:2px solid var(--t330-web);outline-offset:2px}
/* al tocar, el numero parpadea un poco */
@keyframes t330-parpadeo{0%{transform:scale(1);opacity:1}30%{transform:scale(1.14);opacity:.55}
  60%{transform:scale(.96);opacity:1}100%{transform:scale(1)}}
.t330-parpadea{animation:t330-parpadeo .45s var(--t330-curva)}

/* ---- 6. Pie del ejercicio: descanso y siguiente ejercicio en la misma
   linea y a la misma altura; cambiar ejercicio debajo, entero ---- */
.ej-pie{display:grid!important;grid-template-columns:auto 1fr;gap:8px;align-items:stretch}
.ej-pie > *{margin:0!important;min-height:46px;box-sizing:border-box;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;white-space:nowrap}
.ej-pie > .sig-ej{order:2;background:var(--t330-grad)!important;color:#fff!important;border-color:transparent!important}
.ej-pie > .chip-trabajo,.ej-pie > .chip-reloj{order:1}
.ej-pie > .btn:not(.sig-ej){order:3;grid-column:1 / -1}
.ej-pie > .sig-ej::after{content:"→";font-weight:800}
.ej-pie > :only-child,.ej-pie > .sig-ej:first-child{grid-column:1 / -1}

/* ---- 7. Reloj de descanso: boton Minimizar que se lee, margenes iguales;
   minimizado = bola que late, con sombra blanca suave (se puede arrastrar) ---- */
.descanso{border-color:rgba(59,99,255,.5)!important;
  box-shadow:0 20px 50px -18px rgba(0,30,120,.85),0 0 0 1px rgba(255,255,255,.04) inset!important}
.descanso .d-mover{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:0 2px 6px}
.descanso .d-grip{flex:none;margin:0 auto 0 0}
.descanso .d-min{position:static!important;display:inline-flex!important;align-items:center;gap:6px;width:auto!important;
  height:34px!important;padding:0 12px!important;border-radius:999px!important;border:1px solid rgba(59,99,255,.45)!important;
  background:rgba(59,99,255,.14)!important;color:#dbe4ff!important;font:700 13px/1 Manrope,system-ui,sans-serif!important;cursor:pointer}
.descanso .d-min svg{width:14px;height:14px}
.descanso:not(.mini) .d-fila{gap:12px!important;align-items:center}
.descanso:not(.mini) .d-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.descanso:not(.mini) .d-mandos:not([hidden]){display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.descanso .d-mandos .btn:not([hidden]),.descanso #dFin:not([hidden]){min-height:44px;margin:0!important;display:inline-flex;align-items:center;justify-content:center}
.descanso.mini .d-min,.descanso.mini .d-mover{display:none!important}
.descanso.mini .d-mandos,.descanso.mini #dFin,.descanso.mini .d-mios{display:none!important}
@keyframes t330-late{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45),0 10px 26px -6px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 0 10px rgba(255,255,255,0),0 0 22px 6px rgba(255,255,255,.28)}}
.descanso.mini{animation:t330-late 1.8s ease-in-out infinite;cursor:grab;touch-action:none}
.descanso.mini::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:2px dashed rgba(255,255,255,.35);
  pointer-events:none;animation:t330-gira 9s linear infinite}
@keyframes t330-gira{to{transform:rotate(360deg)}}
.descanso.mini.moviendo{animation:none}

/* ---- 8. Cardio: tipos alineados, misma altura, como el resto ---- */
.cardio-tipos{display:flex!important;flex-wrap:wrap;gap:8px!important;align-items:center}
.cardio-t{display:block;margin:0!important}
.cardio-t span{display:inline-flex!important;align-items:center;justify-content:center;height:44px;padding:0 18px!important;
  margin:0!important;border-radius:999px;border:1px solid var(--t330-borde);transform:none!important;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.cardio-t input:checked + span{background:var(--t330-grad)!important;color:#fff!important;border-color:transparent!important}

/* ---- 9. La caja nueva de Salud: movilidad, foam roller y estiramientos ---- */
.sl-movilidad{display:flex;align-items:center;gap:14px;text-decoration:none!important;color:inherit!important}
.sl-movilidad .sl-mv-ico{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;
  background:var(--t330-grad);color:#fff;box-shadow:0 8px 18px -8px rgba(0,75,226,.8)}
.sl-movilidad .sl-mv-ico svg{width:28px;height:28px}
.sl-movilidad .sl-mv-txt{flex:1;min-width:0}
.sl-movilidad .sl-mv-txt b{display:block;font:800 17px/1.2 Manrope,system-ui,sans-serif}
.sl-movilidad .sl-mv-txt small{display:block;margin-top:4px;color:var(--texto-3,#8A93A4);font-size:13.5px;line-height:1.35}
.sl-movilidad .sl-mv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sl-movilidad .sl-mv-chips span{padding:4px 9px;border-radius:999px;background:rgba(59,99,255,.14);color:#c8d5ff;
  font:700 11.5px/1.2 Manrope,system-ui,sans-serif}
.sl-movilidad .sl-mv-fl{flex:none;font-size:22px;opacity:.6}

@media (prefers-reduced-motion:reduce){
  .t330-parpadea,.descanso.mini,.descanso.mini::after{animation:none!important}
  .card,.ej{transition:none}
}

/* ---- tema claro: lo mismo con fondos claros ---- */
[data-tema="claro"] .card,[data-tema="claro"] .ej{box-shadow:0 10px 26px -16px rgba(0,40,140,.35)}
[data-tema="claro"] .serie-campos input{background:rgba(0,75,226,.06)!important}
[data-tema="claro"] .descanso .d-min{color:var(--t330-hondo)!important;background:rgba(59,99,255,.1)!important}
[data-tema="claro"] .sl-movilidad .sl-mv-chips span{color:var(--t330-hondo)}
[data-tema="claro"] .ej-mini-sin{color:var(--t330-logo)}
[data-tema="claro"] .descanso.mini{animation-name:t330-late-claro}
@keyframes t330-late-claro{0%,100%{box-shadow:0 0 0 0 rgba(0,75,226,.35),0 10px 26px -8px rgba(0,0,0,.25)}
  50%{box-shadow:0 0 0 10px rgba(0,75,226,0),0 0 22px 6px rgba(255,255,255,.9)}}