@font-face{font-family:Playfair;src:url(/fonts/playfair-display-latin-900-normal.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:Lato;src:url(/fonts/lato-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url(/fonts/lato-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --noche:#1A1A2E; --capa:#24243C; --capa2:#2c2c46; --texto:#EFE4D6; --suave:#b9b0a6;
  --terra:#B5462A; --terra-claro:#E8845E; --oro:#C8882A; --error:#ffb4a2;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--noche);color:var(--texto);font:400 16px/1.45 Lato,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#app{min-height:100%;min-height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 10px) 18px calc(env(safe-area-inset-bottom) + 12px)}
#app:has(nav.tabs){padding-bottom:calc(env(safe-area-inset-bottom) + 74px)}
h1,h2,.display{font-family:Playfair,Georgia,serif;font-weight:900;line-height:1.1}
h1{font-size:30px;margin:6px 0 4px}
h2{font-size:22px;margin:22px 0 10px}
p{margin:8px 0}
a{color:var(--terra-claro)}
.mini{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.suave{color:var(--suave);font-size:14px}
.error{color:var(--error);font-size:14px;min-height:20px}

/* botones y formularios */
button,.btn{font:700 16px Lato,sans-serif;border:0;border-radius:14px;padding:15px 18px;cursor:pointer;
  background:var(--terra);color:#fff;width:100%;text-align:center;text-decoration:none;display:block}
button.sec{background:var(--capa);color:var(--texto)}
button.oro{background:var(--oro);color:var(--noche)}
button:disabled{opacity:.5}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--terra-claro);outline-offset:2px}
label{display:block;font-size:14px;color:var(--suave);margin:14px 0 6px}
input[type=email],input[type=password],input[type=text],input[type=number]{
  width:100%;font:400 17px Lato,sans-serif;padding:13px 14px;border-radius:12px;border:1px solid var(--capa2);
  background:var(--capa);color:var(--texto)}
select.selector{width:100%;font:400 17px Lato,sans-serif;padding:13px 14px;border-radius:12px;border:1px solid var(--capa2);background:var(--capa);color:var(--texto)}
input.codigo{font-size:28px;letter-spacing:.35em;text-align:center}
.fila{display:flex;gap:10px}
.fila>*{flex:1}
.pila{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:20px}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{flex:1 1 auto;min-width:64px;padding:12px;border-radius:12px;background:var(--capa);color:var(--texto);font-weight:700;width:auto}
.opciones.siete{flex-wrap:nowrap;gap:6px}
.opciones.siete .opcion{min-width:0;padding:12px 0}
.opcion[aria-pressed=true]{background:var(--terra);color:#fff}

/* portada */
.portada{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.portada img{width:150px;margin:14vh auto 22px}
.portada .marca{font-size:44px;color:var(--oro)}
.portada .pila{width:100%}
.portada button{background:var(--oro);color:var(--noche)}

/* tarjetas y listas */
.tarjeta{border-radius:18px;padding:16px;margin:12px 0;background:linear-gradient(135deg,#B8482A,#9E3D24);color:#fff}
.tarjeta .grande{font-size:22px;font-weight:700;margin-top:4px}
.lista{display:flex;flex-direction:column;gap:8px}
.ej{display:flex;align-items:center;gap:12px;background:var(--capa);border-radius:14px;padding:10px;color:var(--texto);text-decoration:none}
.ej img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;background:var(--capa2)}
.ej b{display:block;font-size:15px}
.ej span{font-size:13px;color:var(--suave)}
.bloque{margin-top:16px}
.aviso{background:var(--capa);border-left:4px solid var(--oro);padding:12px 14px;border-radius:10px;font-size:14px;margin:12px 0}

/* barra inferior: fija, con iconos */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:space-around;max-width:520px;margin:0 auto;
  padding:6px 4px calc(env(safe-area-inset-bottom) + 6px);background:#1A1A2Ef2;border-top:1px solid #ffffff14;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
nav.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--suave);text-decoration:none;font-size:11px;padding:4px 0}
nav.tabs .icono{width:24px;height:24px}
nav.tabs a[aria-current=page]{color:var(--terra-claro);font-weight:700}
/* PAR-Q */
.pregunta{background:var(--capa);border-radius:14px;padding:14px;margin:10px 0}
.pregunta p{margin:0 0 10px}

/* ficha */
.fotos{display:flex;gap:8px;margin:10px 0}
.fotos img{width:50%;border-radius:12px}
ol,ul{padding-left:20px}
li{margin:6px 0}

/* entreno */
.entreno{flex:1;display:flex;flex-direction:column}
.anillo{position:relative;width:min(70vw,260px);aspect-ratio:1;margin:18px auto 8px}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo circle{fill:none;stroke-width:10}
.anillo .fondo{stroke:var(--capa2)}
.anillo .barra{stroke:var(--terra-claro);stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.anillo .cifra{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.anillo .n{font-family:Playfair,serif;font-weight:900;font-size:clamp(56px,18vw,84px);line-height:1}
.entreno.descanso .anillo .barra{stroke:var(--oro)}
.entreno .foto{width:100%;max-height:28vh;object-fit:contain;border-radius:14px;background:#fff;margin-top:8px}
.ctrl{display:flex;justify-content:center;gap:18px;margin:14px 0}
.ctrl button{width:64px;height:64px;border-radius:50%;padding:0;font-size:20px;background:var(--capa)}
.ctrl button.pp{background:var(--terra)}
.siguiente{background:var(--capa);border-radius:14px;padding:12px 14px;font-size:14px;margin-top:auto}
.consejo{text-align:center;color:var(--suave);font-size:15px;padding:0 10px}
.oculto{display:none!important}

/* revisión agy */
.ej{position:relative;padding-right:30px}
.ej::after{content:'›';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--suave)}
a.tarjeta{display:block;text-decoration:none}
.tarjeta .play{margin-top:12px;display:inline-block;background:#ffffff26;border-radius:999px;padding:8px 14px;font-weight:700}
button.atras{width:auto;background:none;color:var(--terra-claro);padding:6px 0;text-align:left;font-size:16px}
button.salir{background:none;border:1px solid #ffb4a266;color:var(--error);margin-top:28px}
.anillo .n{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.ctrl{gap:34px;margin:18px 0}
.ctrl button{width:72px;height:72px;font-size:22px}
.ctrl button.pp{width:92px;height:92px;font-size:28px}
.siguiente{display:flex;align-items:center;gap:12px;font-size:17px;padding:12px}
.siguiente img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:#fff;flex:none}
.entreno>button.sec{margin-top:18px;background:none;border:1px solid var(--capa2)}

/* ---------- it. 11: pantallas que caben, anillos y medallas ---------- */
.cabeza{margin-bottom:6px}
.cabeza h1{font-size:clamp(24px,7vw,30px);margin:2px 0 0}
.nota{color:var(--suave);font-size:13px;margin:6px 0}
.visual-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a.btn.sec{background:var(--capa);color:var(--texto);margin-top:12px}
.claro{color:#ffffffcc}
.mini.claro{color:#ffffffb3}

/* anillos */
.panel-anillos{display:flex;align-items:center;gap:18px;margin:10px 0 4px}
.anillos{width:clamp(128px,42vw,172px);height:auto;flex:none}
.anillos .pista{fill:none;opacity:.2}
.anillos .trazo{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.8,.3,1)}
.a-sesiones circle{stroke:#FF7A55}
.a-minutos circle{stroke:#F2B544}
.a-energia circle{stroke:#EAD7B0}
.leyenda{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;margin:0}
.leyenda li{margin:0;line-height:1.15}
.leyenda b{display:block;font-size:22px;font-variant-numeric:lining-nums tabular-nums}
.leyenda small{font-size:13px;font-weight:400;color:var(--suave)}
.l-sesiones b{color:#FF7A55}.l-minutos b{color:#F2B544}.l-energia b{color:#EAD7B0}
@media (prefers-reduced-motion:reduce){.anillos .trazo{transition:none}}

/* tarjeta de hoy */
.tarjeta{margin:10px 0}
.fila-t{display:flex;align-items:center;gap:12px}
.fila-t>div{flex:1}
.tarjeta .grande{font-size:21px;margin:2px 0}
.tarjeta .play{flex:none;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--terra);display:flex;align-items:center;justify-content:center;
  font-size:22px;padding:0 0 0 4px;margin:0}
.tira-cab{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.tira-cab a{font-size:14px;text-decoration:none}
.tira{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:8px}
.tira a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--texto);min-width:0}
.tira img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#fff}
.tira span{font-size:11px;line-height:1.2;color:var(--suave);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* semana */
.dia{display:flex;align-items:center;gap:14px;background:var(--capa);border-radius:14px;padding:12px 14px;color:var(--texto);text-decoration:none;position:relative;padding-right:30px}
.dia::after{content:'›';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--suave)}
.dia .num{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--terra-claro);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--terra-claro)}
.dia.hecha{opacity:1}
.dia.hecha .num{background:#FF7A55;border-color:#FF7A55;color:var(--noche)}
.dia b{display:block;font-size:16px}
.dia span{font-size:13px;color:var(--suave)}

/* logros */
.totales{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 14px}
.totales div{background:var(--capa);border-radius:14px;padding:10px;text-align:center}
.totales b{display:block;font-family:Playfair,Georgia,serif;font-size:24px;font-variant-numeric:lining-nums tabular-nums}
.totales span{font-size:12px;color:var(--suave)}
.medallas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px}
.medallas .m{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;padding:0;color:var(--suave);font-size:11px;font-weight:400;border-radius:12px}
.medallas .m.hecha{color:var(--texto);font-weight:700}
.medalla{width:min(17vw,68px);height:auto}
.medalla .glifo{font:900 19px Playfair,Georgia,serif;fill:var(--suave)}
.medalla .glifo.largo{font-size:15px}
.medalla .unidad{font:700 8px Lato,sans-serif;letter-spacing:.08em;fill:var(--suave);text-transform:uppercase}
.medalla.hecha .glifo,.medalla.hecha .unidad{fill:#2a1a05}
.detalle-medalla{background:var(--capa);border-radius:12px;padding:10px 12px;font-size:14px;margin-top:14px;min-height:42px}
.nuevas{margin:10px 0}
.nuevas .medallas{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}

/* perfil compacto */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dos .opciones{flex-wrap:nowrap;gap:4px}
.dos .opcion{min-width:0;padding:11px 0}
.tres label,.dos label,#app>label{margin:10px 0 5px;font-size:13px}
.tres input{text-align:center;padding:12px 6px}
.opcion{padding:10px 8px}
button.guardar{margin-top:14px}
.enlaces{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.enlaces a{text-decoration:none;font-weight:700}
button.enlace{width:auto;background:none;color:var(--error);padding:6px 0;font-weight:400;font-size:14px}
.error:empty{min-height:0;margin:0}
.compacta .bloque{margin-top:8px}
.compacta .lista{gap:5px}
.compacta .ej{padding:5px 30px 5px 6px;gap:10px}
.compacta .ej img{width:40px;height:40px;border-radius:8px}
.compacta .ej b{font-size:14px}
.compacta .ej span{font-size:12px}
.chips{display:flex;gap:6px;overflow-x:auto;margin:6px -18px 10px;padding:0 18px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips .opcion{flex:none;min-width:0;padding:8px 14px;font-size:14px;border-radius:999px}
.pildoras{display:flex;flex-wrap:wrap;gap:6px}
.pildoras a{background:var(--capa);border-radius:999px;padding:7px 12px;font-size:13px;color:var(--texto);text-decoration:none}
.pildoras small{color:var(--suave)}
.fotos img{aspect-ratio:4/3;object-fit:cover;background:#fff;max-height:30vh}
.fotos img:only-child{width:100%;object-fit:contain}
.pestanas{flex-wrap:nowrap;gap:4px;margin:8px 0}
.pestanas .opcion{min-width:0;flex:1;padding:9px 0;font-size:14px}
.cuerpo-ficha{font-size:15px}
.cuerpo-ficha li{margin:5px 0}
/* pantallas bajas (iPhone SE y similares) */
@media (max-height:700px){
  .cabeza h1{font-size:23px}
  .anillos{width:118px}
  .leyenda{gap:4px}.leyenda b{font-size:19px}
  .tarjeta{padding:12px}.tarjeta .play{width:48px;height:48px}
  .tira span{display:none}
  .compacta .ej{padding-top:3px;padding-bottom:3px}
  .compacta .ej img{width:32px;height:32px}
  .compacta .ej span{display:none}
  .chips{margin-bottom:6px}
  nav.tabs a span{font-size:10px}
}
/* entreno: todo dentro de la pantalla, se adapta a la altura */
.entreno h1{font-size:clamp(22px,6.5vw,28px)}
.entreno .anillo{width:min(62vw,30dvh);margin:8px auto 4px}
.entreno .anillo .n{font-size:clamp(44px,9dvh,80px)}
.entreno .foto{max-height:22dvh;margin-top:4px}
.entreno .consejo{font-size:14px;margin:6px 0}
.entreno .ctrl{margin:6px 0 10px}
.entreno .siguiente{padding:8px 12px;font-size:15px}
.entreno .siguiente img{width:44px;height:44px}
.entreno>button.sec{margin-top:8px;padding:10px}
@media (max-height:700px){.entreno .ctrl button{width:60px;height:60px}.entreno .ctrl button.pp{width:76px;height:76px}}

/* it.12: revisión agy */
.semana-anillos{margin-top:4px}
.semana-anillos>.mini{margin:0}
.medalla:not(.hecha) .disco{fill:var(--capa);stroke:var(--capa2)}
.medalla.hecha .disco{stroke:#F6D58E}
.medalla .bisel{stroke:#ffffff59}
.medalla .barra-fondo{fill:var(--capa2)}
.medalla .barra-progreso{fill:#9C7A45}
.medalla:not(.hecha) .glifo,.medalla:not(.hecha) .unidad{fill:#8d8697}
.medallas .m{color:#c9c1b8}
.detalle-medalla{background:none;border:1px dashed var(--capa2);color:var(--suave)}
.opciones.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:8px}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sumado{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin:10px 0 4px}
.sumado div{background:var(--capa);border-radius:14px;padding:12px 8px;text-align:center}
.sumado b{display:block;font-family:Playfair,Georgia,serif;font-size:26px;font-variant-numeric:lining-nums tabular-nums}
.sumado span{font-size:12px;color:var(--suave)}
.l-sesiones b{color:#FF7A55}
@media (max-height:700px){
  .tarjeta .claro:not(.mini){display:none}
  .compacta .lista{gap:4px}
  .cabeza{margin-bottom:2px}
}
/* movimiento: fundido entre posición inicial y final */
.mov{position:relative;border-radius:14px;overflow:hidden;background:#fff;cursor:pointer;aspect-ratio:3/2;margin:10px 0}
.mov img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mov .final{animation:alterna 2.6s ease-in-out infinite}
.mov .clip{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none}
.mov.con-video .clip{display:block}
.mov.con-video img:not(.fondo){display:none}
.mov.una .final{display:none}
.mov.pausa .final{animation-play-state:paused}
.mov.grande{max-height:34vh;width:100%}
.entreno .mov.foto{height:22dvh;width:100%;aspect-ratio:auto;margin:4px 0}
@keyframes alterna{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mov .final{animation:none;opacity:0}}
.centro{text-align:center}
.mov{background:var(--capa)}
@media (max-height:700px){
  .mov.grande{max-height:27vh}
  .mov.grande+.nota{display:none}
  .entreno .mov.foto{height:17dvh}
  .entreno .anillo{width:min(56vw,27dvh)}
  .entreno .consejo{font-size:13px;margin:3px 0}
}
/* historial */
.fila-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
a.boton-chico{flex:none;background:var(--capa);color:var(--texto);text-decoration:none;font-weight:700;font-size:14px;padding:9px 14px;border-radius:999px;margin-bottom:4px}
.mes-nav{display:flex;align-items:center;justify-content:space-between;margin:6px 0 8px}
.mes-nav b{text-transform:capitalize;font-size:17px}
button.flecha{width:44px;height:44px;padding:0;border-radius:50%;background:var(--capa);color:var(--texto);font-size:24px;line-height:1}
.calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;margin-bottom:14px}
.calendario .cab{font-size:11px;color:var(--suave);font-weight:700}
.dia-c{aspect-ratio:1;max-height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;
  font-variant-numeric:lining-nums tabular-nums;color:var(--texto);margin:0 auto;width:100%;max-width:44px}
.dia-c.fuera{color:#ffffff40}
.dia-c.hecho{background:#FF7A55;color:var(--noche);font-weight:700}
.dia-c.doble{box-shadow:0 0 0 3px var(--noche),0 0 0 5px #F2B544}
.dia-c.hoy:not(.hecho){outline:2px solid var(--terra-claro);outline-offset:-2px}
.semanas-mini{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:8px}
.semanas-mini div{display:flex;flex-direction:column;align-items:center;gap:4px}
.semanas-mini .anillos{width:100%;max-width:50px}
.semanas-mini span{font-size:11px;color:var(--suave)}
.semanas-mini .cerrada span{color:#FF7A55;font-weight:700}
@media (max-height:700px){.calendario{gap:3px}.dia-c{max-height:36px;max-width:36px}}
/* reto del equipo */
.equipo{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#2a2440,#24243C);border:1px solid #F2B54433;border-radius:16px;padding:12px 14px;margin-top:auto}
.equipo .anillos{width:76px;flex:none}
.a-equipo circle{stroke:#F2B544}
.equipo .mini{margin:0 0 2px}
.equipo b{display:block;font-size:22px;color:#F2B544;font-variant-numeric:lining-nums tabular-nums}
.equipo small{font-size:13px;font-weight:400;color:var(--suave)}
.equipo span{font-size:13px;color:var(--suave)}
.dia b::first-letter,.cabeza h1::first-letter{text-transform:uppercase}
/* it.17: entreno a pantalla casi completa */
.mov .fondo{object-fit:cover;filter:blur(16px) brightness(.55);transform:scale(1.15)}
.entreno{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.cab-entreno{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cab-entreno h1{margin:0}
.cab-entreno .mini{margin:0}
button.cerrar{flex:none;width:40px;height:40px;padding:0;border-radius:50%;background:var(--capa);color:var(--texto);font-size:17px}
.escena{position:relative;flex:1;min-height:220px;border-radius:20px;overflow:hidden;background:var(--capa)}
.entreno .escena .mov.foto{position:absolute;inset:0;height:auto;width:auto;margin:0;border-radius:0;aspect-ratio:auto;max-height:none}
.entreno .escena .anillo{position:absolute;margin:0;z-index:2;transition:all .35s ease}
/* trabajando: reloj pequeño en la esquina */
.entreno:not(.descanso) .escena .anillo{top:10px;right:10px;width:104px;background:#1A1A2Ed9;border-radius:50%}
.entreno:not(.descanso) .anillo .n{font-size:34px}
.entreno:not(.descanso) .anillo .suave{font-size:10px}
.entreno:not(.descanso) .anillo circle{stroke-width:9}
/* descanso y preparación: reloj grande en el centro y el siguiente ejercicio apagado detrás */
.entreno.descanso .escena .anillo{top:50%;left:50%;transform:translate(-50%,-50%);width:min(64vw,34dvh)}
.entreno.descanso .escena .mov{opacity:.35}
.entreno .consejo{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:28px 14px 12px;
  background:linear-gradient(transparent,#1A1A2Ef2);color:var(--texto);font-size:15px;text-align:left}
.entreno .consejo:empty{display:none}
.entreno .ctrl{margin:0}
.entreno .siguiente{margin:0}
@media (max-height:700px){
  .entreno:not(.descanso) .escena .anillo{width:84px}
  .entreno:not(.descanso) .anillo .n{font-size:27px}
  .entreno .siguiente img{width:36px;height:36px}
}
.entreno.descanso .siguiente{display:none}
/* propuesta de ajuste */
.propuesta{border-radius:16px;padding:14px;margin-top:8px;background:var(--capa);border:1px solid #F2B54455}
.propuesta.subir{background:linear-gradient(135deg,#3a2c1a,#24243C)}
.propuesta p{margin:0 0 10px}
.propuesta .mini{color:#F2B544;margin-bottom:4px}
.propuesta .fila button{padding:12px 8px}

/* ---------- it.19: logotipo, aviso de salud y tema claro ---------- */
.con-logo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.con-logo>div{min-width:0}
.logo-mini{flex:none;height:42px;width:auto;margin-top:0}
.logo-entreno{height:64px;width:auto;align-self:center;margin:3vh auto 10px}
.aviso-lista{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;margin:10px 0}
.aviso-lista li{background:var(--capa);border-radius:12px;padding:12px 14px;margin:0;font-size:15px;border-left:4px solid var(--oro)}
.fila-tema{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.fila-tema .mini{margin:0}
.opciones.chico{flex-wrap:nowrap;gap:4px;flex:none}
.opciones.chico .opcion{min-width:0;padding:7px 12px;font-size:13px;flex:none}
.enlaces{flex-wrap:wrap;gap:6px 14px}
@media (max-height:700px){.logo-mini{height:24px}.fila-tema{margin-top:8px}}

html[data-tema=claro]{
  --noche:#F6F1E9; --capa:#FFFFFF; --capa2:#E4DACB; --texto:#1F1B2E; --suave:#665E6C;
  --terra-claro:#B5462A; --oro:#A86A1C; --error:#B3261E; color-scheme:light;
}
html[data-tema=claro] nav.tabs{background:#F6F1E9f2;border-top-color:#1F1B2E14}
html[data-tema=claro] .ej,html[data-tema=claro] .dia,html[data-tema=claro] .totales div,html[data-tema=claro] .sumado div,
html[data-tema=claro] .aviso,html[data-tema=claro] .siguiente,html[data-tema=claro] .detalle-medalla{box-shadow:0 1px 2px #1F1B2E14}
html[data-tema=claro] .a-minutos circle,html[data-tema=claro] .a-equipo circle{stroke:#E39D16}
html[data-tema=claro] .l-minutos b,html[data-tema=claro] .equipo b{color:#A86A0C}
html[data-tema=claro] .a-energia circle{stroke:#8E6A3C}
html[data-tema=claro] .l-energia b{color:#7A5A30}
html[data-tema=claro] .l-sesiones b{color:#C9502E}
html[data-tema=claro] .equipo{background:linear-gradient(135deg,#FFF4E0,#FFFFFF);border-color:#E39D1655}
html[data-tema=claro] .propuesta.subir{background:linear-gradient(135deg,#FFF0D6,#FFFFFF)}
html[data-tema=claro] .propuesta .mini{color:#A86A0C}
html[data-tema=claro] .medallas .m{color:var(--suave)}
html[data-tema=claro] .medalla:not(.hecha) .glifo,html[data-tema=claro] .medalla:not(.hecha) .unidad{fill:#8a8290}
html[data-tema=claro] .dia-c.fuera{color:#1F1B2E40}
html[data-tema=claro] .dia-c.hecho,html[data-tema=claro] .dia.hecha .num{color:#fff}
html[data-tema=claro] .dia-c.doble{box-shadow:0 0 0 3px var(--noche),0 0 0 5px #E39D16}
html[data-tema=claro] .ctrl button:not(.pp),html[data-tema=claro] button.flecha,html[data-tema=claro] button.cerrar{color:var(--texto);box-shadow:0 1px 3px #1F1B2E26}
html[data-tema=claro] .entreno:not(.descanso) .escena .anillo{background:#FFFFFFe6}
html[data-tema=claro] .entreno .consejo{background:linear-gradient(transparent,#F6F1E9f2)}
html[data-tema=claro] .entreno.descanso .escena .mov{opacity:.25}
html[data-tema=claro] .mov .fondo{filter:blur(16px) brightness(1.05) saturate(.7)}
html[data-tema=claro] .anillos .pista{opacity:.18}
html[data-tema=claro] button.salir{border-color:#B3261E55}
.diag{font-size:12px;color:var(--suave);margin-top:10px;opacity:.8}
.error:not(:empty){background:#B3261E22;border:1px solid #B3261E66;border-radius:10px;padding:10px 12px;color:var(--error);font-size:14px}
@media (max-height:700px){
  .tres+.nota{display:none}
  .aviso-lista{gap:6px}.aviso-lista li{font-size:13.5px;padding:9px 12px}
  button.guardar{margin-top:10px}
}
/* it.20: compartir, pausa activa, esfuerzo y fuerza del hábito */
button.compartir{background:var(--oro);color:#1A1A2E}
.acciones-fin{gap:10px;margin-top:10px}
.acciones-fin>*{flex:1}
.acciones-fin .btn{margin:0;padding:15px 8px}
.zona-compartir:empty{display:none}
.zona-compartir{flex-basis:100%}
.vista-tarjeta{width:100%;max-height:40vh;object-fit:contain;border-radius:12px;margin-top:10px}
.compartir-medalla{margin-top:10px}
.pausa-btn{display:flex;align-items:baseline;gap:10px;background:var(--capa);border:1px solid #F2B54444;border-radius:14px;padding:11px 14px;text-decoration:none;color:var(--texto);margin-top:-2px}
.pausa-btn b{color:#F2B544;white-space:nowrap}
.pausa-btn span{font-size:13px;color:var(--suave)}
html[data-tema=claro] .pausa-btn b{color:#A86A0C}
.esfuerzo{margin-top:10px}
.esfuerzo .mini{margin:0 0 6px}
.esfuerzo .opciones{flex-wrap:nowrap}
.fuerza{display:flex;align-items:center;gap:10px;margin:2px 0 6px}
.fuerza .mini{margin:0;white-space:nowrap}
.fuerza .barra{flex:1;height:8px;border-radius:4px;background:var(--capa2);overflow:hidden}
.fuerza .barra i{display:block;height:100%;background:linear-gradient(90deg,#FF7A55,#F2B544);border-radius:4px}
.fuerza b{font-variant-numeric:lining-nums tabular-nums;min-width:44px;text-align:right}
.fuerza .f0{width:2%}.fuerza .f1{width:10%}.fuerza .f2{width:20%}.fuerza .f3{width:30%}.fuerza .f4{width:40%}.fuerza .f5{width:50%}
.fuerza .f6{width:60%}.fuerza .f7{width:70%}.fuerza .f8{width:80%}.fuerza .f9{width:90%}.fuerza .f10{width:100%}
@media (max-height:700px){.pausa-btn span{display:none}.pausa-btn{padding:8px 12px}}
.acciones-fin{align-items:stretch}.acciones-fin>button,.acciones-fin>.btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 8px}
/* it.21: funcionales y mapa de músculos */
.vida-diaria{font-size:14px;background:#6FD3A814;border-left:4px solid #6FD3A8;border-radius:10px;padding:9px 12px;margin:8px 0}
.vida-diaria b{color:#6FD3A8}
html[data-tema=claro] .vida-diaria{background:#2E8B6A14;border-left-color:#2E8B6A}
html[data-tema=claro] .vida-diaria b{color:#2E8B6A}
.panel-musculos{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px}
.chips-musculos{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.chips-musculos span{font-size:12px;border-radius:999px;padding:4px 10px;background:var(--capa);color:var(--suave)}
.chips-musculos .n3{background:#FF7A55;color:#1A1A2E;font-weight:700}
.chips-musculos .n2{background:#FF7A5555;color:var(--texto)}
.panel-musculos .nota{text-align:center;margin:2px 0 0}
.pestanas .opcion{font-size:13px}
.cuerpo-ficha .panel-musculos .nota{display:none}
.cuerpo-ficha .chips-musculos span{font-size:11px;padding:3px 8px}

/* it.22: siluetas anatómicas */
.cuerpo{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px;width:100%}
.cuerpo .vista{margin:0;display:flex;flex-direction:column;align-items:center}
.silueta-anat{height:34dvh;width:auto;display:block}
.silueta-anat .contorno{fill:none;stroke:var(--suave);stroke-opacity:.35;stroke-width:3}
.silueta-anat .resto path,.silueta-anat .zona.n0 path{fill:var(--capa2)}
.silueta-anat .zona path{stroke:var(--noche);stroke-width:1.5;transition:fill .4s}
.silueta-anat .zona.n1 path{fill:#FF7A5566}
.silueta-anat .zona.n2 path{fill:#FF7A55b3}
.silueta-anat .zona.n3 path{fill:#FF7A55}
html[data-tema=claro] .silueta-anat .resto path,html[data-tema=claro] .silueta-anat .zona.n0 path{fill:#DDD3C4}
.cuerpo figcaption{font:700 11px Lato,sans-serif;color:var(--suave);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
button.cambiar-silueta{flex-basis:100%;width:auto;background:none;color:var(--terra-claro);font-size:13px;font-weight:400;padding:4px 0 0}
.cuerpo-ficha .silueta-anat{height:24dvh}
.cuerpo-ficha .panel-musculos .nota{display:none}
@media (max-height:700px){.silueta-anat{height:28dvh}.cuerpo-ficha .silueta-anat{height:19dvh}.mov.grande{max-height:24vh}}
@media (min-height:760px){.silueta-anat{height:42dvh}}
.cuerpo-ficha .silueta-anat{height:21dvh}
@media (max-height:700px){.cuerpo-ficha .silueta-anat{height:16dvh}}
/* dos columnas fijas: la silueta se adapta al ancho y al alto disponibles */
.cuerpo{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;max-width:360px;margin:0 auto}
.cuerpo .vista{min-width:0}
.silueta-anat{width:100%;height:auto;max-height:34dvh}
@media (min-height:760px){.silueta-anat{height:auto;max-height:40dvh}}
.cuerpo-ficha .silueta-anat{height:auto;max-height:21dvh}
@media (max-height:700px){.silueta-anat{max-height:28dvh}.cuerpo-ficha .silueta-anat{max-height:16dvh}}
button.cambiar-silueta{grid-column:1/-1;justify-self:center}
.cuerpo{align-items:end}
/* it.23: voz, recuperación, privacidad, sin conexión, panel del equipo, reto del mes y letra grande */
.botones-cab{display:flex;gap:8px;flex:none}
.sin-red{font-size:13px;background:#6FA8D31a;border-left:4px solid #6FA8D3;border-radius:10px;padding:8px 12px;margin:6px 0}
html[data-tema=claro] .sin-red{background:#2E6A8B14;border-left-color:#2E6A8B}
.reto-mes{margin-top:6px}
.reto-mes span{display:block;font-size:12.5px;color:var(--suave)}
.reto-mes small{font-size:12px}
.reto-mes .barra{height:5px;border-radius:3px;background:#ffffff1a;overflow:hidden;margin-top:3px}
.reto-mes .barra i{display:block;height:100%;background:#F2B544;border-radius:3px}
.reto-mes .f0{width:2%}.reto-mes .f1{width:10%}.reto-mes .f2{width:20%}.reto-mes .f3{width:30%}.reto-mes .f4{width:40%}.reto-mes .f5{width:50%}
.reto-mes .f6{width:60%}.reto-mes .f7{width:70%}.reto-mes .f8{width:80%}.reto-mes .f9{width:90%}.reto-mes .f10{width:100%}
.reto-mes.cerrado span{color:#F2B544;font-weight:700}
html[data-tema=claro] .reto-mes .barra{background:#1F1B2E14}
html[data-tema=claro] .reto-mes .barra i{background:#E39D16}
.pista-recup{display:flex;justify-content:space-between;font-size:13px;text-decoration:none;color:var(--suave);background:var(--capa);border-radius:12px;padding:9px 12px;margin:2px 0 8px}
.pista-recup b{color:var(--texto)}
/* recuperación: rojo reciente → verde listo */
.cuerpo.recuperacion .zona.n3 path{fill:#FF6B5B}
.cuerpo.recuperacion .zona.n2 path{fill:#F2B544}
.cuerpo.recuperacion .zona.n1 path{fill:#5CC48F}
.chips-musculos.recup .r3{background:#FF6B5B;color:#1A1A2E;font-weight:700}
.chips-musculos.recup .r2{background:#F2B544;color:#1A1A2E;font-weight:700}
.chips-musculos.recup .r1{background:#5CC48F;color:#1A1A2E;font-weight:700}
.sugerencia{width:100%;background:var(--capa);border-radius:14px;padding:10px 12px;font-size:14px}
.sugerencia p{margin:0 0 8px}
.sugerencia .btn{margin:0;padding:11px 6px;font-size:14px}
.aviso-lista.datos li{font-size:13.5px}
.aviso.peligro{border-left-color:var(--error)}
.cuentas{list-style:none;display:flex;flex-direction:column;gap:6px;margin:4px 0 12px}
.cuentas li{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--capa);border-radius:12px;padding:9px 12px}
.cuentas li b{display:block;font-size:15px}
.cuentas li span{font-size:12.5px;color:var(--suave)}
.cuentas .estado{flex:none;text-align:right;max-width:45%}
.cuentas .estado.activa{color:#5CC48F}
.cuentas .estado.caducada{color:var(--error)}
input.enlace-inv{font-size:13px;margin:6px 0}
.medallas-equipo{margin-top:12px}
.medallas-equipo .mini{margin:0 0 6px}
.fila-tema+.fila-tema{margin-top:6px}
/* letra grande: todo un 15 % mayor (el texto puede pedir deslizar) */
html[data-letra=grande] #app{zoom:1.15}
.fila.acciones-fin>.btn{margin:0}
.cuentas{padding:0}.cuentas li{margin:0}
/* it.24: gestión de cuentas */
.cuentas li{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
button.cab-cuenta{display:flex;justify-content:space-between;align-items:center;gap:8px;background:none;color:var(--texto);padding:9px 12px;border-radius:12px;font-weight:400;text-align:left}
button.cab-cuenta:disabled{cursor:default;opacity:1}
.cab-cuenta>div{min-width:0}
.cab-cuenta b{display:block;font-size:15px}
.cuentas .estado.bloqueada{color:var(--error)}
.acciones-cuenta{padding:0 12px 12px}
.rejilla-acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rejilla-acciones button{padding:11px 6px;font-size:14px;margin:0}
.acciones-cuenta input{margin:6px 0}
.rejilla-acciones button.sec{background:var(--capa2)}.rejilla-acciones button.salir{background:none}
/* it.25: dificultad y variantes con foto */
.dificultad{letter-spacing:.05em;color:#F2B544;white-space:nowrap}
.mini .dificultad{letter-spacing:.08em}
.ej small.dificultad{font-size:11px;font-weight:400;letter-spacing:1px;margin-left:2px}
html[data-tema=claro] .dificultad{color:#A86A0C}
.variante{margin:0 0 10px;font-size:15px}
.variante.con-foto{display:flex;gap:12px;align-items:center}
.variante .mov.variante{flex:none;width:38%;aspect-ratio:4/3;border-radius:12px;max-height:none}
a.ver-variante{display:block;margin-top:4px;font-size:14px;font-weight:700;text-decoration:none}
/* it.26: mapa de músculos legible en oscuro — tarjeta propia, cuerpo más claro, músculos con brillo */
.cuerpo{background:radial-gradient(120% 90% at 50% 35%,#34325a 0%,#26253f 60%,#202036 100%);border:1px solid #ffffff12;border-radius:18px;padding:12px 10px 6px;max-width:380px}
.silueta-anat .contorno{stroke:#c9c2e0;stroke-opacity:.55;stroke-width:4}
.silueta-anat .resto path,.silueta-anat .zona.n0 path{fill:#55527a}
.silueta-anat .zona path{stroke:#26253f;stroke-width:1.2}
.silueta-anat .zona.n1 path{fill:#F7A58C}
.silueta-anat .zona.n2 path{fill:#FF8560}
.silueta-anat .zona.n3 path{fill:#FF5E3A}
.silueta-anat .zona.n2,.silueta-anat .zona.n3{filter:drop-shadow(0 0 3px #FF5E3A88)}
.cuerpo.recuperacion .zona.n3 path{fill:#FF5E4D}
.cuerpo.recuperacion .zona.n2 path{fill:#F5B83D}
.cuerpo.recuperacion .zona.n1 path{fill:#4FD08F}
.cuerpo.recuperacion .zona.n2,.cuerpo.recuperacion .zona.n1{filter:none}
.chips-musculos .n1{background:#F7A58C33;color:var(--texto)}
.chips-musculos .n2{background:#FF856066;color:var(--texto)}
.chips-musculos .n3{background:#FF5E3A;color:#1A1A2E}
.cuerpo-ficha .silueta-anat{max-height:25dvh}
@media (max-height:700px){.cuerpo-ficha .silueta-anat{max-height:19dvh}}
/* claro: tarjeta crema, cuerpo gris cálido */
html[data-tema=claro] .cuerpo{background:radial-gradient(120% 90% at 50% 35%,#FFFFFF 0%,#F1EADF 100%);border-color:#1F1B2E14}
html[data-tema=claro] .silueta-anat .contorno{stroke:#8a8290;stroke-opacity:.5}
html[data-tema=claro] .silueta-anat .resto path,html[data-tema=claro] .silueta-anat .zona.n0 path{fill:#D9CFC1}
html[data-tema=claro] .silueta-anat .zona path{stroke:#F6F1E9}
html[data-tema=claro] .silueta-anat .zona.n2,html[data-tema=claro] .silueta-anat .zona.n3{filter:none}
html[data-tema=claro] .chips-musculos .n1{background:#F7A58C55}
.cuerpo-ficha .cuerpo{padding:8px 8px 2px}
.cuerpo-ficha .silueta-anat{max-height:22dvh}
@media (max-height:700px){.cuerpo-ficha .silueta-anat{max-height:16dvh}}
/* medición del piloto (panel del equipo) */
.piloto{list-style:none;padding:0;margin:6px 0 4px;display:grid;gap:8px}
.pl-fila{background:var(--capa);border-radius:14px;padding:10px 12px;display:grid;gap:6px}
.pl-fila.en-curso{outline:1px dashed #ffffff26}
.pl-fila.oculta{display:flex;justify-content:space-between;gap:8px;align-items:center;opacity:.7}
.pl-cab{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:14px}
.pl-cab span,.pl-cifras span,.pl-esf span{font-size:12.5px;color:var(--suave)}
.pl-cifras{display:grid;gap:4px}
.pl-barra{width:100%;height:8px;display:block}
.pl-barra .fondo{fill:var(--capa2)}
.pl-barra .hecho{fill:var(--terra-claro)}
.pl-esf{display:grid;gap:3px}
.pl-esf svg{width:100%;height:5px;display:block;border-radius:3px;overflow:hidden}
.pl-esf .f{fill:#7FB7A4}.pl-esf .b{fill:#F2B544}.pl-esf .d{fill:#E8845E}
.pl-esf.vacio{font-size:12px;color:var(--suave)}
html[data-tema=claro] .pl-fila{background:#fff}
html[data-tema=claro] .pl-fila.en-curso{outline-color:#1F1B2E26}
.pila-fija{display:flex;flex-direction:column;gap:10px;padding-top:12px}

/* it.32: menú del perfil (grupos con icono, valor y flecha) */
.tarjeta-yo{display:flex;align-items:center;gap:14px;background:var(--capa);border-radius:18px;padding:16px;margin:10px 0 6px;color:var(--texto);text-decoration:none}
.avatar{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--terra),var(--oro));color:#fff;font:900 22px Playfair,Georgia,serif;letter-spacing:.02em}
.quien{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.quien strong{font:900 20px/1.15 Playfair,Georgia,serif}
.quien .suave{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarjeta-yo .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;overflow:visible}
.tarjeta-yo .chips span{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--capa2);color:var(--texto)}
.grupo-menu{margin-top:18px}
.grupo-menu h2.mini{font-family:Lato,system-ui,sans-serif;font-weight:700;margin:0 4px 6px}
.caja-menu{background:var(--capa);border-radius:16px;overflow:hidden}
.fila-menu{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px;background:none;border:0;border-radius:0;color:var(--texto);text-decoration:none;font:400 16px Lato,system-ui,sans-serif;text-align:left}
.fila-menu+.fila-menu{border-top:1px solid var(--capa2)}
a.fila-menu:active,button.fila-menu:active{background:var(--capa2)}
.ic-menu{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--capa2);color:var(--terra-claro)}
.ic-menu .icono{width:19px;height:19px}
.txt-menu{flex:1;min-width:0}
.valor-menu{color:var(--suave);font-size:14px;white-space:nowrap}
.flecha-menu{flex:none;color:var(--suave);display:grid}
.flecha-menu .icono{width:18px;height:18px}
.fila-menu.ajuste{flex-wrap:wrap}
.fila-menu.ajuste .opciones{flex:0 1 auto;margin:0}
.fila-menu.ajuste .opcion{min-width:0;padding:8px 12px}
.fila-menu.peligro{color:var(--error);font-weight:700}
.fila-menu.peligro .ic-menu{color:var(--error)}
.pie-menu{text-align:center;margin:18px 0 6px;font-size:12px}
html[data-tema=claro] .ic-menu{background:#F3ECE2}
html[data-tema=claro] .tarjeta-yo .chips span{background:#F3ECE2}
.fila-menu.ajuste .txt-menu{flex:1 0 auto}
.fila-menu.ajuste .opciones{margin-left:auto}