/* t457 (18-oct-2026): REPASO DE DISENO en las 4 apps (prueba, Plan Libre, Plan Premium y clientes).
   Mismo fichero en las dos apps, cargado el ULTIMO en base.html (despues de t453.css).
   Solo estilo: no cambia funciones, textos de precios ni enlaces.
   Lo que unifica (medido pantalla por pantalla con bin/mide.py, 4 apps x 3 temas):
   1) Una sola letra: Manrope en todo (antes media app salia con la del sistema).
   2) Titulos de pantalla: mismo tamano, peso y sin MAYUSCULAS sueltas.
   3) Iconos: la cajita de la referencia (44 px, radio 14, fondo de color suave) en todas partes.
   4) Flechas: circulo blanco de 36 px con sombra suave (las de navegar, 40 px).
   5) Tarjetas y cajitas sin recuadro: fuera bordes y sombras de caja; las de dentro, un tono por debajo.
   6) Botones: todos en pastilla; los secundarios con fondo suave, sin borde.
   7) Planes y ventana de tarifas con los colores de cada tema.
   8) Fotos de Miguel encuadradas en la persona. */

/* ---------- 1) una sola letra ---------- */
html body, html body :is(h1, h2, h3, h4, .disp, button, input, select, textarea, .btn, label, summary){
  font-family:Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif!important}
html body :is(h1, h2, h3, .disp){word-spacing:normal}

/* ---------- 2) titulos de pantalla ---------- */
html body main :is(h1, .pp-pag h1, .nv-pag h1){font-size:28px!important;line-height:1.12!important;font-weight:800!important;
  letter-spacing:-.02em!important;color:var(--t5-tx)}
html body main .ini-cab h1, html body main .ini-hola h1{font-size:24px!important}
html body main .pf-cab h1, html body main .pf-nombre{font-size:25px!important}
@media (min-width:720px){html body main h1{font-size:32px!important}}
/* los titulos escritos en mayusculas (Mis programas, Plantillas, Mis rutinas, Mi nutricion) los pone en
   minuscula t457.js; mientras carga, que no salten */
html body .t457-frase{text-transform:none!important}
html body .t433-hoja h2{font:800 24px/1.15 Manrope, system-ui, sans-serif!important;letter-spacing:-.02em}

/* ---------- 3) iconos: la misma cajita ---------- */
html body :is(.fx-ico, .fx-ico.chico, .fx-ico.redondo, .n7-ico, .mv-ico, .ru-hero-ico, .r10-accion-ico, .sp-hablar-ico,
  .t433-plan-ico, .r10-kico, .pp-cod, .nv-cod, .t457-ico){
  width:44px!important;height:44px!important;min-width:44px!important;border-radius:14px!important;flex:none;
  display:inline-grid!important;place-items:center;padding:0!important;
  background:var(--t5-ico-f)!important;color:var(--t5-ico)!important;box-shadow:none!important;border:0!important}
html body :is(.fx-ico, .n7-ico, .mv-ico, .ru-hero-ico, .r10-accion-ico, .sp-hablar-ico, .r10-kico, .t457-ico) .ic-m{
  width:22px!important;height:22px!important;background:var(--t5-ico)!important}
html body :is(.n7-ico, .mv-ico, .ru-hero-ico, .r10-accion-ico, .sp-hablar-ico, .t433-plan-ico, .t457-ico) svg{
  width:22px!important;height:22px!important;stroke-width:1.8}
/* Progreso: el circulo azul relleno pasa a la cajita, como el resto */
html body .pg-kpi .r10-kico{margin:0 0 10px!important}
/* el codigo de cada entreno (P1, TS1...) en la cajita, con su color de tema */
html body :is(.pp-cod, .nv-cod){font:800 13px/1 Manrope, system-ui, sans-serif!important;color:var(--t5-acc-tx)!important}
/* dentro de la tarjeta azul del Plan Premium el icono va en blanco */
html body .t433-plan.prem .t433-plan-ico{background:rgba(255,255,255,.18)!important;color:#fff!important}
/* medidas: los dibujos del cuerpo con el mismo radio */
html body .md-ico{border-radius:14px!important;border:0!important;box-shadow:none!important}

/* ---------- 4) flechas: circulo blanco ---------- */
html body :is(.fx-chev, .mg-flecha, .t441-fl){width:36px!important;height:36px!important;border-radius:50%!important;
  display:inline-grid!important;place-items:center;background:var(--t5-flecha-f)!important;color:var(--t5-flecha)!important;
  box-shadow:0 4px 14px -6px rgba(11,27,77,.35)!important;border:0!important;flex:none}
html body .fx-chev .ic-m, html body .mg-flecha .ic-m{background:var(--t5-flecha)!important}
html body .t441-fl{margin-top:-18px}
html body .t441-grande .t441-fl{margin-top:0}
/* la flecha de dentro de la tarjeta azul de «Te toca» se queda blanca translucida */
html body .mg-accion .mg-flecha, html body .r10-te-toca .mg-flecha{background:rgba(255,255,255,.2)!important;color:#fff!important;box-shadow:none!important}
html body .mg-accion .mg-flecha .ic-m{background:#fff!important}
/* flechas de navegar (semana, mes del ciclo) */
html body :is(.sc-flecha, .cl-flecha, .mn-nav){width:40px!important;height:40px!important;border-radius:50%!important;border:0!important;
  background:var(--t5-card)!important;color:var(--t5-acc-tx)!important;box-shadow:0 4px 14px -8px rgba(11,27,77,.35)!important}
html body .card :is(.sc-flecha, .cl-flecha, .mn-nav){background:var(--t5-card2)!important;box-shadow:none!important}
html body .cl-flecha.apagada{opacity:.4}

/* ---------- 5) tarjetas y cajitas sin recuadro ---------- */
/* tarjetas de primer nivel: color de tarjeta, radio 24, sin borde ni sombra */
html body :is(.pp-card, .pp-ind, .pp-act, .nv-pl, .t433-pl12, .t433-1a1, .cal-b, .md-foto, .mg-wa, .ru-mapa, .sp-hablar,
  .n7-tarj, .n7-bloque, .n7-idea){
  border:0!important;box-shadow:none!important}
html body :is(.pp-card, .pp-ind, .nv-pl, .cal-b, .mg-wa){background:var(--t5-card)!important;border-radius:24px!important}
html body .pp-card.suyo, html body .pp-act{background:var(--t5-card)!important;outline:2px solid var(--t5-acc);outline-offset:-2px}
/* cajitas de dentro de una tarjeta: un tono por debajo, radio 18 */
html body :is(.n7-tarj, .n7-bloque, .n7-idea, .nv-ej, .pr-dato, .ic-item, .md-foto, .pp-reparto li, .pp-sig, .t433-pl12, .t433-1a1,
  .ini-num, .cic-b, .ener-b, .pf-rir-op, .pf-tema, .pl-com, .n7-op, .sc-dia, .pf-fila-info){
  border:0!important;box-shadow:none!important}
html body :is(.n7-tarj, .n7-bloque, .n7-idea, .nv-ej, .pr-dato, .ic-item, .md-foto, .pp-sig, .t433-pl12, .t433-1a1, .pf-fila-info){
  background:var(--t5-card2)!important;border-radius:18px!important}
html body :is(.n7-op, .pf-rir-op, .pf-tema, .ener-b, .cic-b, .pl-com, .ini-num, .pp-reparto li){background:var(--t5-card2)!important}
html body :is(.n7-op, .pf-rir-op, .pf-tema, .ener-b, .cic-b, .pl-com){border-radius:16px!important}
html body .nv-ej{margin-bottom:8px}
/* lo elegido se marca con el color, no con una raya */
html body :is(.n7-op, .pf-rir-op, .pf-tema, .ener-b, .cic-b):is(.on, .sel, .elegido, [aria-pressed="true"], :has(input:checked)){
  background:var(--t5-acc-soft)!important;outline:2px solid var(--t5-acc);outline-offset:-2px}
html body .pf-tema.on, html body .pf-tema[aria-pressed="true"]{background:var(--t5-btn)!important;color:#fff!important;outline:0}
/* errores tipicos: el «antes» en rojo suave y la «mejora» en verde suave, sin caja */
html body .n7-error{background:var(--t5-card2)!important}
/* hoy en la tira de la semana: sin borde, solo el color */
html body .sc-dia.hoy{outline:2px solid var(--t5-acc);outline-offset:-2px}
/* la tabla de comparar planes, sin rejilla de rayas */
html body .t433-tabla{border:0!important;border-collapse:separate;border-spacing:0;background:var(--t5-card2);border-radius:18px;overflow:hidden}
html body .t433-tabla :is(td, th){border-color:var(--t5-linea)!important}
/* filas de lista (Calentar, habitos, nutricion) sin canto */
html body :is(.fx-fila, .rx-fila, .mv-fila, .hb-item){border:0!important;box-shadow:none!important}

/* ---------- 6) botones ---------- */
html body :is(.btn, .pp-bt, .t433-cta, .r10-hero-btn, .vv-btn){border-radius:999px!important}
html body :is(.btn-primary, .pp-bt.azul, summary.pp-bt:not(.sec), button.pp-bt:not(.sec)){
  background:var(--t5-btn)!important;color:#fff!important;border:0!important;
  box-shadow:0 10px 22px -12px var(--t5-acc)!important;letter-spacing:0!important;text-transform:none!important;font-weight:800!important}
html body :is(.btn-ghost, .btn-outline, .pp-bt.sec, .t433-cta.t433-tuyo, .vv-btn, .subir-boton){
  background:var(--t5-acc-soft)!important;color:var(--t5-acc-tx)!important;border:0!important;box-shadow:none!important}
html body .btn-ghost.btn-peligro{background:rgba(229,72,77,.10)!important;color:#C7263C!important}
:root:not([data-tema="claro"]) body .btn-ghost.btn-peligro{color:#FF8A9A!important}
html body .pp-bt{min-height:48px!important;font-size:15px!important}
html body .pp-guia-a{text-transform:none!important;letter-spacing:0!important;color:var(--t5-acc-tx)!important;font-weight:800}
/* chapas y pestanas (Todos/Habitos..., 7 dias/30 dias..., Tren superior...) */
html body :is(.rx-chapa, .n7-tab, .mv-filtro, .pg-r, .nt-tab){border:0!important;box-shadow:none!important;background:var(--t5-card)!important;color:var(--t5-tx2)!important}
html body .card :is(.rx-chapa, .n7-tab, .mv-filtro, .pg-r){background:var(--t5-card2)!important}
html body :is(.rx-chapa, .n7-tab, .mv-filtro, .pg-r, .nt-tab):is(.on, .activa, .activo, [aria-selected="true"], [aria-current]){
  background:var(--t5-btn)!important;color:#fff!important}

/* ---------- 7) planes y tarifas con los colores del tema ---------- */
html body .t433-hoja{background:var(--t5-card)!important;color:var(--t5-tx)!important;box-shadow:0 -20px 50px -24px rgba(0,0,0,.45)!important}
html body .t433-hoja :is(.t433-sub, .t433-seguro){color:var(--t5-tx2)!important}
html body .t433-eyebrow{color:var(--t5-acc-tx)!important}
html body .t433-x{background:var(--t5-card2)!important;color:var(--t5-tx)!important}
html body .t433-per{background:var(--t5-card2)!important;border:0!important}
html body .t433-per button[aria-pressed="true"]{background:var(--t5-btn)!important;box-shadow:none!important}
html body .t433-per em{background:var(--t5-acc-soft)!important;color:var(--t5-acc-tx)!important}
html body .t433-plan{border:0!important;box-shadow:none!important;background:var(--t5-card2)!important;color:var(--t5-tx)!important;border-radius:24px!important}
html body .t433-plan.prem{background:var(--t5-btn)!important;color:#fff!important}
html body .t433-plan:not(.prem) .t433-plan-ico{background:var(--t5-ico-f)!important;color:var(--t5-ico)!important}
html body .t433-plan:not(.prem) .t433-ok svg{background:var(--t5-acc-soft)!important;color:var(--t5-acc-tx)!important}
html body .t433-plan:not(.prem) .t433-cta:not(.t433-tuyo){background:var(--t5-btn)!important;box-shadow:none!important}
html body .t433-plan.prem .t433-cta{box-shadow:none!important}
html body .t433-plan.prem .t433-cta:not(.t433-tuyo){color:var(--t5-flecha)!important}
html body .t433-sello{box-shadow:none!important;color:var(--t5-acc-tx)!important;background:var(--t5-card)!important}
html body .t433-plan.mio{outline-color:var(--t5-acc)}
/* el boton flotante «Planes» */
html body .t433-fab{background:var(--t5-btn)!important}
/* Mis programas / Plantillas / Mis rutinas: textos y acentos del tema */
html body :is(.pp-eyebrow, .pp-cat, .pp-dn em, .nv-cat, .nv-dia){color:var(--t5-acc-tx)!important}
html body :is(.pp-sub, .pp-datos, .pp-nota, .pp-ind-t small){color:var(--t5-tx2)!important}
html body :is(.pp-card p, .pp-ind-t b, .pp-dn){color:var(--t5-tx)!important}
html body .pp-reparto li{color:var(--t5-tx2)!important;border-radius:14px!important}
html body .pp-reparto li b{color:var(--t5-tx)!important}
html body .pp-chk span{border:0!important;background:var(--t5-card2)!important;color:var(--t5-tx)!important}
html body .pp-chk input:checked+span{background:var(--t5-btn)!important;color:#fff!important}

/* ---------- 8) fotos de Miguel encuadradas en la persona ----------
   La foto entra por la derecha y se recorta en apaisado: se sube el encuadre hasta la cara.
   Medido en cada foto (la cara: movilidad 35 %, plan 25 %, medidas 40 %, habitos 20 %, pasos 30 %...). */
html body .t441-foto[style*="/movilidad"]{background-position:40% 28%!important}
html body .t441-foto[style*="/plan-c"]{background-position:45% 12%!important}
html body .t441-foto[style*="/plan."],html body .t441-foto[style*="/plan-g"]{background-position:60% 12%!important}
html body .t441-foto[style*="/medidas-m"]{background-position:50% 32%!important}
html body .t441-foto[style*="/habitos-m"]{background-position:48% 10%!important}
html body .t441-foto[style*="/pasos"]{background-position:50% 18%!important}
html body .t441-foto[style*="/correr"]{background-position:78% 22%!important}
html body .t441-foto[style*="/fuerza"]{background-position:28% 22%!important}
html body .t441-foto[style*="/luz-c"]{background-position:55% 34%!important}
html body .t441-foto[style*="/luz."],html body .t441-foto[style*="/luz-g"]{background-position:72% 45%!important}
/* titulos de las tarjetas de foto: que no partan «Peso y / medidas» en dos lineas sin necesidad */
html body .t441-ancha .t441-txt{padding-right:34%}
html body .t441-ancha .t441-txt b{font-size:17px}
@media (min-width:720px){html body .t441-ancha .t441-txt{padding-right:42%}}

/* ---------- etiqueta IA ---------- */
.t457-ia{position:absolute;right:12px;top:10px;z-index:3;padding:3px 8px;border-radius:999px;background:rgba(14,21,48,.62);
  color:#fff;font:800 10.5px/1.2 Manrope,system-ui,sans-serif;letter-spacing:.08em;pointer-events:none}

/* ---------- Mi ciclo: la tarjeta de hoy con la cabecera de la referencia ---------- */
html body .ciclo-hoy .t457-cab{display:flex;align-items:center;gap:12px;margin:0 0 8px}
html body .ciclo-hoy .t457-cab .ciclo-dia{margin:0}

/* ---------- el aviso de instalar y la barra de la prueba: sin canto ---------- */
html body :is(.inst-tira, .t433-barra, .sp-barra){border:0!important;box-shadow:none!important}

@media (prefers-reduced-motion:reduce){html body .t441-t, html body .t453-t{transition:none}}
/* la flechita de dentro del boton «Ver guia completa» se queda pequena */
html body .rx-boton .fx-chev{width:24px!important;height:24px!important;box-shadow:none!important;background:rgba(255,255,255,.22)!important;color:#fff!important}

/* ---------- ajustes tras la primera prueba ---------- */
/* en las filas con foto la flecha es la del circulo blanco de la foto: la otra no se ve */
html body :is(.fx-fila.t441-fila, a.rx-fila.t453-rxf)>.fx-chev{display:none!important}
/* titulo de la ventana de tarifas con el color del tema (en noche no se leia) */
html body .t433-hoja h2{color:var(--t5-tx)!important}
/* saludo de Inicio en una linea */
html body main .ini-cab h1, html body main .ini-hola h1{font-size:22px!important}
/* numero de cada plantilla (1, 2, 3...) en la cajita */
html body .nv-acc-n{width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:14px!important;
  background:var(--t5-ico-f)!important;color:var(--t5-acc-tx)!important;font:800 16px/1 Manrope,system-ui,sans-serif!important}
html body .nv-acc-pl, html body .t433-acc-pl{border:0!important;box-shadow:none!important;background:var(--t5-card)!important;color:var(--t5-tx)!important}
html body .nv-pl{background:var(--t5-card)!important;border:0!important}
/* pestanas de Progreso y boton de la tarjeta de Salud con el color del tema */
html body .pg-tabs a{border:0!important;box-shadow:none!important;background:var(--t5-card)!important;color:var(--t5-tx2)!important}
html body .pg-tabs a.on{background:var(--t5-btn)!important;color:#fff!important}
html body .r10-hero-btn{background:var(--t5-btn)!important;color:#fff!important;box-shadow:none!important}
/* ultimas rayas que salieron en la medicion */
html body :is(.ru-hero-chips a, .pg-cifras li, .t433-pl12 li, .hoy-apunta, .apunta-arriba, .ini-campana, .rx-lupa, .btn-quitar){
  border:0!important;box-shadow:none!important}
html body :is(.pg-cifras li, .t433-pl12 li){background:var(--t5-card)!important;border-radius:14px!important}
html body :is(.ru-hero-chips a, .hoy-apunta, .apunta-arriba){background:var(--t5-acc-soft)!important;color:var(--t5-acc-tx)!important}
html body :is(.ini-campana, .rx-lupa){background:var(--t5-card)!important}
html body .card :is(.ini-campana, .rx-lupa){background:var(--t5-card2)!important}
/* ventana de tarifas: «Tu plan actual» dentro de la tarjeta Premium, blanco sobre azul */
html body .t433-plan.prem .t433-cta.t433-tuyo{background:#fff!important;color:var(--t5-flecha)!important}
/* la ventana y todo lo de dentro de las pantallas, tambien en Manrope (la ventana traia la del sistema) */
html body :is(.sp-modal, .sp-modal *, .sp-caja, main *):not(svg):not(path):not(code):not(pre){
  font-family:Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif!important}
/* precios de la ventana en ordenador: el «€/mes» no salta de linea */
@media (min-width:600px){html body .t433-precio{white-space:nowrap}html body .t433-precio b{font-size:32px}}