/* POWERFIT — app de Luis Daniel Pernía. Hoja de estilo única.
   ===========================================================================
   POR QUÉ SE VE ASÍ Y NO COMO LAS DEMÁS APPS DE GIMNASIO:
   Las apps del montón (Gym WP y compañía) usan fondo marrón oscuro, naranja y
   un cuestionario de doce pantallas. Se parecen todas entre sí y ninguna se
   parece a su entrenador. Aquí la apuesta es la contraria:
     · blanco hueso y negro, con UN solo color de la marca (el lima de la
       camiseta de Luis). Menos color = más caro.
     · tipografía enorme y apretada, de revista, no de formulario.
     · la cara de Luis en blanco y negro: él es el producto, no el software.
     · cuatro preguntas en vez de doce. Cada pregunta que quitas es gente que
       llega al final.
   No se carga ninguna fuente de Google ni ninguna librería de fuera: todo
   viene del propio servidor o del teléfono. Si mañana Google cambia algo,
   esta app ni se entera.
   =========================================================================== */

:root{
  --negro:#0B0B0B;
  --negro-suave:#171714;
  --hueso:#F4F2ED;
  --hueso-hondo:#E8E5DD;
  --lima:#D4E84F;
  --lima-hondo:#B8CC32;
  --gris:#8C8C84;
  --gris-claro:#C9C7C0;
  --rojo:#D9593D;
  --borde:rgba(11,11,11,.12);
  --radio:18px;
  --paso:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--hueso);
  color:var(--negro);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.45;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- pantallas: una visible, las demás esperando a un lado ---------- */
.pantalla{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:var(--hueso);
  opacity:0;visibility:hidden;
  transform:translateX(24px);
  transition:opacity .34s var(--paso),transform .34s var(--paso),visibility .34s;
  overflow:hidden;
}
.pantalla.activa{opacity:1;visibility:visible;transform:none;z-index:2}
.pantalla.saliendo{transform:translateX(-18px);opacity:0}
.fondo-negro{background:var(--negro);color:var(--hueso)}

.contenido{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:22px 22px calc(34px + env(safe-area-inset-bottom));
}
.contenido.estrecho{max-width:460px;width:100%;margin:0 auto}
.contenido.con-barra{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

/* =================== 1. PORTADA =================== */
[data-p="portada"]{background:var(--negro);color:var(--hueso)}
.portada-foto{position:absolute;inset:0;overflow:hidden}
.portada-foto img{
  width:100%;height:100%;object-fit:cover;object-position:52% 18%;
  /* Las fotos salen de capturas de Instagram. En blanco y negro con contraste
     alto, la poca calidad deja de notarse y gana intención: parece una
     decisión de diseño, que es exactamente lo que es. */
  filter:grayscale(1) contrast(1.22) brightness(.72);
}
.portada-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.30) 0%,rgba(11,11,11,.55) 42%,rgba(11,11,11,.96) 78%,var(--negro) 100%);
}
.portada-texto{
  position:relative;z-index:2;margin-top:auto;
  padding:0 22px calc(34px + env(safe-area-inset-bottom));
  animation:sube .7s var(--paso) both;
}
@keyframes sube{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.marca{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.marca-nombre{
  font-size:15px;font-weight:800;letter-spacing:.22em;color:var(--hueso);
}
.marca-linea{flex:0 0 26px;height:2px;background:var(--lima)}
.marca-lema{font-size:10px;letter-spacing:.2em;color:var(--lima);font-weight:700}

.titular{
  font-size:clamp(40px,12.5vw,56px);
  line-height:.96;font-weight:800;letter-spacing:-.035em;
  margin-bottom:16px;
}
.titular em{
  font-style:italic;font-weight:500;color:var(--lima);
  /* la cursiva es lo único que cambia de voz en toda la pantalla */
}
.entradilla{color:var(--gris-claro);font-size:16.5px;line-height:1.5;max-width:30em;margin-bottom:28px}

.acciones{display:flex;flex-direction:column;gap:11px}

/* =================== BOTONES =================== */
.btn{
  font:inherit;font-weight:700;font-size:16.5px;
  border:none;border-radius:999px;padding:17px 26px;
  cursor:pointer;transition:transform .14s var(--paso),opacity .18s,background .18s;
}
.btn:active{transform:scale(.975)}
.btn-fuerte{background:var(--lima);color:var(--negro)}
.btn-fuerte:active{background:var(--lima-hondo)}
/* DOS BOTONES PLANOS, NO UNO QUE ADIVINA. La primera versión tenía un solo
   `.btn-plano` y una regla con `:not(.fondo-negro):not([data-p="portada"])` que
   lo pintaba de oscuro "en las pantallas claras". Pero dentro de una pantalla
   clara hay cajas oscuras — la tarjeta de hoy, por ejemplo — y ahí el botón
   salía NEGRO SOBRE NEGRO: existía, ocupaba sus 59 píxeles y era invisible.
   El botón "Entrenar igual" estuvo así hasta que lo medí.
   Una regla que adivina el fondo por la pantalla se equivoca en cuanto hay dos
   fondos en la misma pantalla. Ahora se dice explícitamente cuál va en cada
   sitio y no hay nada que adivinar. */
.btn-plano{background:transparent;color:var(--negro);border:1.5px solid var(--borde)}
.btn-claro{background:transparent;color:var(--hueso);border:1.5px solid rgba(244,242,237,.3)}
.btn.ancho{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

.enlace{
  background:none;border:none;font:inherit;font-weight:700;
  color:var(--negro);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;
}

/* =================== CABECERA =================== */
.cabecera{
  display:flex;align-items:center;gap:14px;
  padding:calc(14px + env(safe-area-inset-top)) 20px 12px;
  flex:0 0 auto;
}
.volver{
  background:none;border:none;font-size:22px;line-height:1;cursor:pointer;
  color:inherit;width:36px;height:36px;display:grid;place-items:center;
  margin-left:-8px;border-radius:50%;
}
.volver:active{background:rgba(140,140,132,.16)}
.paso-texto{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.reloj{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;font-size:17px;color:var(--lima)}

.barra-avance{flex:1;height:3px;background:var(--hueso-hondo);border-radius:2px;overflow:hidden}
.barra-relleno{height:100%;width:25%;background:var(--negro);border-radius:2px;transition:width .4s var(--paso)}

/* =================== TÍTULOS =================== */
.titulo-grande{
  font-size:clamp(31px,8.6vw,40px);
  line-height:1.03;font-weight:800;letter-spacing:-.032em;
  margin-bottom:14px;
}
.subtitulo{
  font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);margin:30px 0 12px;
}

/* =================== FORMULARIO =================== */
.formulario{display:flex;flex-direction:column;gap:15px;margin-top:26px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo span{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.campo input{
  font:inherit;font-size:17px;
  background:#fff;border:1.5px solid var(--borde);border-radius:14px;
  padding:16px 17px;color:var(--negro);
  transition:border-color .18s,box-shadow .18s;
}
.campo input::placeholder{color:var(--gris-claro)}
.campo input:focus{
  outline:none;border-color:var(--negro);
  box-shadow:0 0 0 3.5px rgba(212,232,79,.42);
}
.aviso{
  background:rgba(217,89,61,.1);color:#9E3A22;
  border-radius:12px;padding:12px 14px;font-size:14.5px;font-weight:600;
}
.pie-formulario{margin-top:22px;font-size:15px;color:var(--gris);text-align:center}

/* =================== PREGUNTAS =================== */
.pregunta-titulo{
  font-size:clamp(27px,7.4vw,34px);line-height:1.08;font-weight:800;
  letter-spacing:-.03em;margin-bottom:6px;
}
.pregunta-pie{color:var(--gris);font-size:15.5px;margin-bottom:24px}
.opciones{display:flex;flex-direction:column;gap:10px}
.opcion{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:#fff;border:1.5px solid var(--borde);border-radius:var(--radio);
  padding:17px 18px;cursor:pointer;font:inherit;color:var(--negro);
  transition:border-color .16s,transform .14s var(--paso),background .16s;
  animation:asoma .4s var(--paso) both;
}
.opcion:nth-child(1){animation-delay:.02s}.opcion:nth-child(2){animation-delay:.06s}
.opcion:nth-child(3){animation-delay:.1s}.opcion:nth-child(4){animation-delay:.14s}
.opcion:nth-child(5){animation-delay:.18s}.opcion:nth-child(6){animation-delay:.22s}
@keyframes asoma{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.opcion:active{transform:scale(.985)}
.opcion.elegida{border-color:var(--negro);background:var(--negro);color:var(--hueso)}
.opcion.elegida .opcion-pie{color:var(--gris-claro)}
.opcion-cuerpo{flex:1;min-width:0}
.opcion-nombre{font-weight:700;font-size:17px;letter-spacing:-.012em}
.opcion-pie{font-size:14px;color:var(--gris);margin-top:2px;line-height:1.35}
.opcion-marca{
  flex:0 0 22px;height:22px;border-radius:50%;border:2px solid var(--gris-claro);
  display:grid;place-items:center;transition:all .16s;
}
.opcion.elegida .opcion-marca{border-color:var(--lima);background:var(--lima)}
.opcion.elegida .opcion-marca::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--negro)}

/* opciones en rejilla, para los días */
.opciones.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opciones.rejilla .opcion{flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:20px 8px;text-align:center}
.opciones.rejilla .opcion-marca{display:none}
.opciones.rejilla .opcion-nombre{font-size:26px;font-weight:800;letter-spacing:-.04em}
.opciones.rejilla .opcion-pie{font-size:12px;margin-top:0}

/* =================== PLAN =================== */
.plan-cabecera{display:flex;align-items:center;gap:13px;margin:6px 0 26px}
.retrato{
  width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:52% 22%;
  filter:grayscale(1) contrast(1.15);border:2px solid var(--lima);
}
.plan-firma{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);font-weight:700}
.plan-nombre{font-size:16px;font-weight:800;letter-spacing:-.015em}

.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0}
.cifra{background:#fff;border:1.5px solid var(--borde);border-radius:var(--radio);padding:16px 17px}
.cifra-numero{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1}
.cifra-que{font-size:12.5px;color:var(--gris);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:5px}

.semana{display:flex;flex-direction:column;gap:8px;margin:22px 0 26px}
.semana-dia{
  display:flex;align-items:center;gap:13px;
  background:#fff;border:1.5px solid var(--borde);border-radius:14px;padding:14px 16px;
}
.semana-dia.descanso{background:transparent;border-style:dashed}
.semana-letra{
  flex:0 0 34px;height:34px;border-radius:10px;background:var(--negro);color:var(--lima);
  display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.02em;
}
.semana-dia.descanso .semana-letra{background:var(--hueso-hondo);color:var(--gris)}
.semana-nombre{font-weight:700;font-size:16px;letter-spacing:-.01em}
.semana-detalle{font-size:13.5px;color:var(--gris)}

/* =================== INICIO =================== */
.saludo{margin:8px 0 22px}
.saludo-dia{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}

.tarjeta-hoy{
  position:relative;overflow:hidden;
  background:var(--negro);color:var(--hueso);
  border-radius:26px;padding:26px 24px 24px;
  animation:asoma .5s var(--paso) both;
}
.tarjeta-hoy::before{
  content:"";position:absolute;right:-56px;top:-56px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(212,232,79,.22) 0%,transparent 68%);
}
.hoy-etiqueta{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lima);margin-bottom:9px}
.hoy-nombre{font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1.04;margin-bottom:7px}
.hoy-detalle{color:var(--gris-claro);font-size:15px;margin-bottom:20px}
.hoy-lista{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.hoy-chip{
  font-size:13px;font-weight:600;background:rgba(244,242,237,.1);
  border:1px solid rgba(244,242,237,.17);border-radius:999px;padding:6px 12px;
}
.hoy-descanso{text-align:center;padding:14px 0 6px}
.hoy-descanso .hoy-nombre{color:var(--lima)}

.racha-fila{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.consejo{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--hueso-hondo);border-radius:var(--radio);padding:16px 17px;margin-top:14px;
}
.consejo-barra{flex:0 0 3px;align-self:stretch;background:var(--lima);border-radius:2px}
.consejo-texto{font-size:15px;line-height:1.48}
.consejo-firma{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);margin-top:7px}

/* =================== BARRA DE ABAJO =================== */
.barra-abajo{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;background:rgba(244,242,237,.93);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--borde);
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));
}
.nav-btn{
  flex:1;background:none;border:none;font:inherit;cursor:pointer;
  padding:9px 4px;border-radius:12px;color:var(--gris);
  font-size:13.5px;font-weight:700;letter-spacing:.01em;
  transition:color .16s,background .16s;
}
.nav-btn.activa{color:var(--negro);background:var(--hueso-hondo)}

/* =================== ENTRENANDO =================== */
.ejercicio-numero{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lima);margin-bottom:10px}
.ejercicio-nombre{font-size:clamp(29px,8vw,37px);font-weight:800;letter-spacing:-.035em;line-height:1.03;margin-bottom:10px}
.ejercicio-dato{color:var(--gris-claro);font-size:16px;margin-bottom:26px}
.series{display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.serie{
  display:flex;align-items:center;gap:14px;
  background:rgba(244,242,237,.06);border:1.5px solid rgba(244,242,237,.14);
  border-radius:14px;padding:15px 17px;cursor:pointer;
  font:inherit;color:var(--hueso);text-align:left;
  transition:background .16s,border-color .16s,transform .14s var(--paso);
}
.serie:active{transform:scale(.985)}
.serie.hecha{background:rgba(212,232,79,.14);border-color:var(--lima)}
.serie-marca{
  flex:0 0 24px;height:24px;border-radius:7px;border:2px solid rgba(244,242,237,.3);
  display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--gris-claro);
}
.serie.hecha .serie-marca{background:var(--lima);border-color:var(--lima);color:var(--negro)}
.serie-texto{flex:1;font-weight:700;font-size:16px}
.serie-reps{color:var(--gris-claro);font-weight:600;font-size:15px}
.serie.hecha .serie-reps{color:var(--lima)}

.consejo-oscuro{
  background:rgba(244,242,237,.06);border-radius:var(--radio);
  padding:15px 17px;margin-bottom:26px;font-size:15px;line-height:1.48;color:var(--gris-claro);
}
.consejo-oscuro strong{color:var(--lima);font-weight:800;display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}

/* EL CRONÓMETRO DE DESCANSO SE VE AUNQUE NADA SE ANIME. Costó tres intentos.
     1) requestAnimationFrame para enseñarla  → el navegador no da fotogramas
        cuando la página no está a la vista, así que nunca se enseñaba.
     2) una transición de CSS                 → las transiciones también se
        congelan, y se quedaba clavada en el punto de partida.
     3) una animación que ENTRABA desde abajo → peor aún: una animación
        congelada se queda en su PRIMER fotograma, y el primero era
        "fuera de la pantalla". Medido las tres veces: píxel 814 de 812.
   La lección no era "cambiar de herramienta" sino dejar de mover lo esencial.
   Ahora la caja está SIEMPRE en su sitio y lo único que se anima es un cambio
   de tamaño mínimo: congelada en su primer fotograma se ve igual de bien.
   Una animación puede adornar; nunca puede ser lo que decide si algo se ve. */
.descanso-caja{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--lima);color:var(--negro);
  padding:22px 24px calc(26px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;
  display:flex;align-items:center;gap:18px;
  transform-origin:50% 100%;
  animation:entra-descanso .3s var(--paso);
}
@keyframes entra-descanso{from{transform:scale(.96)}to{transform:none}}
.descanso-numero{font-size:42px;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1}
.descanso-que{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.descanso-saltar{
  margin-left:auto;background:var(--negro);color:var(--lima);
  border:none;border-radius:999px;padding:13px 20px;font:inherit;font-weight:700;cursor:pointer;
}

/* =================== PROGRESO =================== */
.mapa-semanas{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 6px}
.cuadro{
  width:calc((100% - 6px * 9) / 10);aspect-ratio:1;
  border-radius:5px;background:var(--hueso-hondo);
}
.cuadro.hecho{background:var(--negro)}
.cuadro.hoy{box-shadow:0 0 0 2px var(--lima)}
.mapa-pie{font-size:13px;color:var(--gris);margin-top:10px}

.historial{display:flex;flex-direction:column;gap:9px}
.hist{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1.5px solid var(--borde);border-radius:14px;padding:14px 16px;
}
.hist-fecha{
  flex:0 0 42px;text-align:center;
}
.hist-dia{font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1}
.hist-mes{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.hist-cuerpo{flex:1;min-width:0}
.hist-nombre{font-weight:700;font-size:16px;letter-spacing:-.01em}
.hist-detalle{font-size:13.5px;color:var(--gris)}
.vacio{color:var(--gris);font-size:15.5px;background:var(--hueso-hondo);border-radius:var(--radio);padding:20px;text-align:center}

/* =================== PERFIL =================== */
.ficha{display:flex;flex-direction:column;gap:1px;background:var(--borde);border-radius:var(--radio);overflow:hidden;margin:18px 0 24px}
.ficha-fila{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;padding:15px 17px}
.ficha-que{font-size:14.5px;color:var(--gris);font-weight:600}
.ficha-valor{font-size:15.5px;font-weight:700;text-align:right;letter-spacing:-.01em}
.equipo-luis{border-radius:var(--radio);overflow:hidden;margin-bottom:22px;position:relative}
.equipo-luis img{width:100%;display:block;filter:grayscale(1) contrast(1.12) brightness(.9)}
.equipo-luis p{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(11,11,11,.85));
  color:var(--hueso);padding:30px 16px 14px;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
[data-p="perfil"] .btn-plano{margin-bottom:10px}

/* =================== CARGANDO =================== */
.cargando[hidden]{display:none}
.cargando{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(244,242,237,.72);backdrop-filter:blur(3px)}
.pulso{width:42px;height:42px;border-radius:50%;border:3px solid var(--hueso-hondo);border-top-color:var(--negro);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* Pantallas grandes: la app sigue siendo de teléfono, centrada y sin estirarse. */
@media (min-width:620px){
  .contenido{max-width:520px;width:100%;margin:0 auto}
  .portada-texto{max-width:560px;margin-left:auto;margin-right:auto}
  .barra-abajo{max-width:520px;margin:0 auto;border-radius:20px 20px 0 0;border:1px solid var(--borde);border-bottom:none}
}

/* Quien pide menos movimiento, menos movimiento tiene. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}