/* 16-oct (t333): entreno
   Pantalla de registrar (templates/entrenamiento_registro.html): cardio, la
   serie en curso con su anillo y la pantalla de «¡Entrenamiento completado!».
   Todo va con clases t333-* o colgado de .t333-cardio / #t333Hecho, que solo
   existen en esa pantalla. El JS que lo mueve esta en static/js/t333.js.
   Para quitarlo: vaciar este fichero (las plantillas siguen funcionando). */

:root{--t333-grad:var(--t330-grad,linear-gradient(135deg,#3B63FF 0%,#004BE2 60%,#0a2fae 100%));
  --t333-borde:var(--t330-borde,rgba(59,99,255,.24));--t333-web:#3B63FF;
  --t333-caja:linear-gradient(160deg,rgba(59,99,255,.13),rgba(0,75,226,.04) 60%,rgba(255,255,255,0));
  --t333-curva:cubic-bezier(.2,.8,.2,1)}

/* ---- 0. Los botones heredan la letra de la app (salian en Arial) ----
   Solo en la pantalla de registrar: es la unica que lleva #t333Hecho. */
body:has(#t333Hecho) :is(button,input,select,textarea,.btn){font-family:inherit}

/* ---- 1. CARDIO ---- */
.t333-ico{color:var(--azul-txt,#8FB6EA)}
.t333-ico svg{width:20px;height:20px}
.t333-cardio .cardio-tipos{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px!important;margin-bottom:16px}
.t333-cardio .cardio-t{display:block;min-width:0}
.t333-cardio .cardio-t span{display:flex!important;width:100%;box-sizing:border-box;height:44px;padding:0 4px!important;
  font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(255,255,255,.03);color:var(--texto-2,#BACAE0)}
.t333-cardio .cardio-t input:checked + span{box-shadow:0 6px 16px -6px rgba(0,75,226,.8)}
.t333-cardio .cardio-t input:focus-visible + span{outline:2px solid var(--t333-web);outline-offset:2px}
.t333-min{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.t333-min > label{margin:0}
.t333-min > label > span{margin:0!important}
.t333-paso{display:flex;align-items:center;gap:8px}
.t333-paso-b{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--t333-borde);
  background:rgba(59,99,255,.10);color:#fff;font-size:22px;font-weight:600;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s var(--t333-curva),transform .15s var(--t333-curva)}
.t333-paso-b:active{transform:scale(.92);background:rgba(59,99,255,.22)}
.t333-paso-c{position:relative;display:block;width:96px}
.t333-cardio .t333-paso-c input{margin:0!important;height:44px;width:100%;box-sizing:border-box;padding:0 38px 0 14px!important;
  text-align:center;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;border-radius:14px}
.t333-ud{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12.5px;font-weight:700;
  color:var(--texto-3,#8E8E93);pointer-events:none}
.t333-cardio .btn{min-height:50px;border-radius:999px}

/* ---- 2. EJERCICIO EN CURSO ---- */
/* el nombre, grande, cuando el ejercicio esta abierto */
.ej.abierto .ej-tit b{font-size:18px;letter-spacing:-.01em}

/* el boton «Ver el vídeo» como reproductor: foto de fondo y play grande */
.ej-ficha.t333-player{position:relative;display:flex!important;align-items:center;justify-content:center;flex-direction:column;
  width:100%;aspect-ratio:16/9;max-height:240px;margin:2px 0 14px!important;padding:0!important;box-sizing:border-box;
  border-radius:18px!important;overflow:hidden;border:1px solid var(--t333-borde)!important;
  background:radial-gradient(120% 90% at 50% 30%,rgba(59,99,255,.28),rgba(6,30,122,.35) 55%,#0a1424)!important;
  color:#fff!important;text-decoration:none;font-size:13px!important;font-weight:700}
.ej-ficha.t333-player::before{content:none!important;display:none!important}
.ej-ficha.t333-player::after{content:""!important;position:absolute;inset:0!important;z-index:1;
  background:linear-gradient(180deg,rgba(5,12,28,.05) 30%,rgba(5,12,28,.72))}
.t333-player-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78}
.t333-play{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--t333-grad);box-shadow:0 0 0 6px rgba(59,99,255,.22),0 12px 28px -8px rgba(0,40,160,.9);
  transition:transform .2s var(--t333-curva)}
.t333-play svg{width:28px;height:28px;fill:#fff;margin-left:3px}
.ej-ficha.t333-player:active .t333-play{transform:scale(.93)}
.t333-player-t{position:absolute;z-index:2;left:14px;bottom:11px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.92)}

/* la linea «3 × 8-10 · RIR 2 · Descanso 90 s» */
.t333-ht{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:4px}
.t333-ht .ht-desc{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--texto-2,#BACAE0)}
.t333-ht .ht-pt{color:var(--texto-3,#8E8E93)}

/* la tarjeta «Serie 1 de 3» con el anillo */
.t333-curso{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 10px;padding:16px 16px 16px 18px;
  border-radius:20px;border:1px solid var(--t333-borde);background:var(--t333-caja),rgba(10,22,44,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 26px -16px rgba(0,40,140,.7)}
.t333-curso.sin-desc{padding:12px 16px 12px 18px}
.t333-curso-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.t333-curso-rot{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--azul-txt,#8FB6EA)}
.t333-curso-t{font-size:34px;line-height:1.05;font-weight:800;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.t333-curso-q{font-size:12.5px;color:var(--texto-2,#BACAE0)}
.t333-aro{position:relative;flex:none;width:76px;height:76px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;
  color:#fff;-webkit-tap-highlight-color:transparent}
.t333-aro > svg:first-child{width:100%;height:100%;transform:rotate(-90deg)}
.t333-aro circle{fill:none;stroke-width:6}
.t333-aro .p{stroke:rgba(59,99,255,.18)}
.t333-aro .l{stroke:var(--t333-web);stroke-linecap:round;stroke-dasharray:169.65;stroke-dashoffset:0;
  filter:drop-shadow(0 0 6px rgba(59,99,255,.55));transition:stroke-dashoffset .5s linear}
.t333-aro-ic{position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);color:#cfe0ff}
.t333-curso.corriendo .t333-aro-ic{opacity:.9}
.t333-curso.corriendo .t333-curso-t{color:#dfe8ff}
.t333-curso-acc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.t333-curso-acc > form{margin:0;display:block}
.t333-curso-acc > :only-child{grid-column:1/-1}
.t333-pill{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;box-sizing:border-box;padding:0 14px;
  border-radius:999px;border:1px solid var(--t333-borde);background:rgba(255,255,255,.04);color:#fff;
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .15s var(--t333-curva),background-color .2s var(--t333-curva)}
.t333-pill:active{transform:scale(.97)}
.t333-pill svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.t333-pill svg .lleno{fill:currentColor;stroke:none}
.t333-pill.pri{background:var(--t333-grad);border-color:transparent;box-shadow:0 8px 20px -8px rgba(0,75,226,.85)}

/* ---- 3. ¡ENTRENAMIENTO COMPLETADO! ---- */
body.t333-con-hecho{overflow:hidden}
.t333-hecho{position:fixed;inset:0;z-index:2000;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(120% 60% at 50% 0%,rgba(59,99,255,.30),rgba(6,30,122,.18) 45%,rgba(5,11,24,0) 75%),#07101f;
  color:var(--texto,#F1F5FB)}
.t333-hecho[hidden]{display:none}
.t333-hecho-in{position:relative;z-index:1;max-width:440px;margin:0 auto;box-sizing:border-box;
  padding:calc(34px + env(safe-area-inset-top,0px)) 20px calc(26px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center}
.t333-check{width:132px;height:132px;margin:6px auto 4px}
.t333-check svg{width:100%;height:100%;overflow:visible}
.t333-check circle{fill:none;stroke-width:7}
.t333-check .p{stroke:rgba(59,99,255,.16);fill:rgba(59,99,255,.08)}
.t333-check .l{stroke:var(--t333-web);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0;
  transform:rotate(-90deg);transform-origin:60px 60px;filter:drop-shadow(0 0 10px rgba(59,99,255,.65))}
.t333-check .c{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:0}
.t333-hecho-t{margin:4px 0 0;font-size:25px;line-height:1.15;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.t333-hecho-sub{margin:0 0 6px;color:var(--texto-2,#BACAE0);font-size:14.5px}
.t333-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.t333-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:12px 6px;
  box-sizing:border-box;border-radius:18px;border:1px solid var(--t333-borde);background:var(--t333-caja),rgba(12,26,52,.6)}
.t333-stat span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-txt,#8FB6EA)}
.t333-stat b{font-size:20px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.t333-stat b small{font-size:12px;font-weight:700;color:var(--texto-2,#BACAE0)}
.t333-sentir{padding:14px 14px 10px;border-radius:20px;border:1px solid var(--t333-borde);background:var(--t333-caja),rgba(12,26,52,.6)}
.t333-sentir-t{display:block;margin-bottom:10px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--azul-txt,#8FB6EA)}
.t333-caras{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.t333-caras button{height:46px;border-radius:14px;border:1px solid var(--t333-borde);background:rgba(255,255,255,.03);
  color:var(--texto-2,#BACAE0);font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;
  transition:background-color .2s var(--t333-curva),color .2s,transform .15s var(--t333-curva)}
.t333-caras button:active{transform:scale(.94)}
.t333-caras button[aria-checked="true"]{background:var(--t333-grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px rgba(0,75,226,.85)}
.t333-caras-pie{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;color:var(--texto-3,#8E8E93)}
.t333-hecho-aviso{margin:0;font-size:13px;color:var(--azul-txt,#8FB6EA)}
.t333-hecho .btn{min-height:52px;border-radius:999px;margin:0}
.t333-guardar{background:var(--t333-grad)!important;box-shadow:0 12px 26px -10px rgba(0,75,226,.95)!important;font-size:16px}
.t333-seguir{margin:2px auto 0;padding:10px 12px;border:0;background:none;color:var(--texto-3,#8E8E93);font-family:inherit;font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* confeti: 18 papelitos con CSS, sin librerias */
.t333-confeti{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.t333-confeti i{position:absolute;top:-16px;left:50%;width:8px;height:14px;border-radius:2px;background:#3B63FF;opacity:0}
.t333-confeti i:nth-child(3n+1){background:#8FB6EA;width:6px;height:10px}
.t333-confeti i:nth-child(3n+2){background:#fff;width:7px;height:7px;border-radius:50%}
.t333-confeti i:nth-child(4n){background:#004BE2}
.t333-confeti i:nth-child(1){left:6%}  .t333-confeti i:nth-child(2){left:13%} .t333-confeti i:nth-child(3){left:19%}
.t333-confeti i:nth-child(4){left:25%} .t333-confeti i:nth-child(5){left:31%} .t333-confeti i:nth-child(6){left:37%}
.t333-confeti i:nth-child(7){left:43%} .t333-confeti i:nth-child(8){left:49%} .t333-confeti i:nth-child(9){left:54%}
.t333-confeti i:nth-child(10){left:60%} .t333-confeti i:nth-child(11){left:66%} .t333-confeti i:nth-child(12){left:71%}
.t333-confeti i:nth-child(13){left:77%} .t333-confeti i:nth-child(14){left:82%} .t333-confeti i:nth-child(15){left:87%}
.t333-confeti i:nth-child(16){left:92%} .t333-confeti i:nth-child(17){left:96%} .t333-confeti i:nth-child(18){left:3%}

@media (prefers-reduced-motion: no-preference){
  .t333-hecho.va .t333-check .l{animation:t333-aro 1s var(--t333-curva) both}
  .t333-hecho.va .t333-check .c{animation:t333-tic .45s .75s var(--t333-curva) both}
  .t333-hecho.va .t333-check{animation:t333-pop .5s var(--t333-curva) both}
  .t333-hecho.va .t333-hecho-in > :not(.t333-check){animation:t333-sube .5s .25s var(--t333-curva) both}
  .t333-hecho.va .t333-confeti i{animation:t333-cae 2.6s cubic-bezier(.25,.6,.4,1) both}
  .t333-confeti i:nth-child(2n){animation-delay:.15s!important;animation-duration:3s!important}
  .t333-confeti i:nth-child(3n){animation-delay:.3s!important;animation-duration:2.3s!important}
  .t333-confeti i:nth-child(5n){animation-delay:.5s!important;animation-duration:2.8s!important}
  .t333-confeti i:nth-child(odd){--t333-gira:-540deg}
  .t333-curso .t333-aro:active{transform:scale(.95)}
}
@keyframes t333-aro{from{stroke-dashoffset:326.7}to{stroke-dashoffset:0}}
@keyframes t333-tic{from{stroke-dashoffset:70}to{stroke-dashoffset:0}}
@keyframes t333-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
@keyframes t333-sube{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes t333-cae{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  10%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--t333-x,20px),105vh,0) rotate(var(--t333-gira,540deg))}}
.t333-confeti i:nth-child(odd){--t333-x:-30px}
.t333-confeti i:nth-child(4n+1){--t333-x:40px}
/* con «reducir movimiento» no cae nada: el anillo y el tic salen ya hechos */
@media (prefers-reduced-motion: reduce){.t333-confeti{display:none}}

/* ---- 4. Ordenador: que no se estire todo ---- */
@media (min-width: 900px){
  .ej-ficha.t333-player{max-height:280px}
  .t333-hecho-in{padding-top:64px}
}

/* ---- t366 (16-oct): «Pausar» / «Quitar la pausa» en tema claro ----
   La pastilla llevaba letra blanca fija y en claro quedaba blanco sobre blanco
   (1,05:1). En claro va como el «Pausar» de arriba (.ses-accion): azul marino
   sobre blanco con borde visible. El tema oscuro no cambia. */
:root[data-tema="claro"] .t333-curso-acc .t333-pill:not(.pri){color:var(--texto,#0E1729);background:#fff;
  border-color:rgba(14,23,41,.22);box-shadow:0 1px 2px rgba(14,23,41,.06)}