/* ═══════════════════════════════════════════════════════════
   YouPlanFit · Design System V2 — Grupo C: resultados
   ═══════════════════════════════════════════════════════════
   Requiere design-v2-tokens.css cargado antes. Escopado a #perfil,
   #cuerpo y #nutricion — las tres pantallas que entregan el resultado
   del diagnóstico (resumen, somatotipo/métricas corporales, macros).
   #rutina (programa de 12 semanas, PDF) es Grupo D y no se toca aquí.

   Cero cambios de HTML/JS: todo lo que sigue reestiliza el DOM real que
   ya pintan app.js (renderResultado, pintarNutricion) y perfil.js. Los
   valores (soma.imc, nutri.basal, m.v, etc.) siguen siendo exactamente
   los mismos — esta hoja no lee ni calcula nada, solo presenta.
   ═══════════════════════════════════════════════════════════ */

#perfil,
#cuerpo,
#nutricion{
  position:relative;padding:70px 0;overflow:hidden;
  background:
    radial-gradient(circle at 85% 0%,rgba(19,185,231,.07),transparent 32%),
    linear-gradient(180deg,var(--v2-bg),var(--v2-bg2) 65%,var(--v2-bg));
  color:var(--v2-text);
}
#perfil .shead .tag,
#cuerpo .shead .tag,
#nutricion .shead .tag{
  display:inline-block;color:#81dff8;font-size:.68rem;letter-spacing:.2em;
  font-weight:700;text-transform:uppercase;margin:0 0 14px;
}
#perfil .shead h2,
#cuerpo .shead h2,
#nutricion .shead h2{
  font-family:var(--v2-display);color:var(--v2-text);
  letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.9rem,4vw,2.8rem);
  margin:0 0 14px;
}
#perfil .shead p,
#cuerpo .shead p,
#nutricion .shead p{color:var(--v2-muted)}

/* ── Tarjetas base (glass) ── */
#perfil .card,
#cuerpo .card,
#nutricion .card,
#cuerpo .result__main,
#cuerpo .metric,
#nutricion .food{
  background:linear-gradient(180deg,rgba(18,39,52,.93),rgba(8,23,32,.95));
  border:1px solid rgba(90,184,222,.24);border-radius:20px;
  box-shadow:var(--v2-sombra-sm),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}

/* ══ #perfil — Resumen personal ══ */
#perfil .ficha__lista dt,
#perfil .ficha__lista dd{border-color:var(--v2-line);color:var(--v2-text)}
#perfil .ficha__lista dt{color:var(--v2-muted)}
#perfil .ficha__pie{background:rgba(10,25,33,.6)}
#perfil .ficha__cierre{color:var(--v2-muted)}
#perfil .btn{
  border:0;border-radius:14px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));
  box-shadow:0 8px 30px rgba(13,147,176,.25);
}
#perfil .btn:hover{transform:translateY(-2px)}
#perfil .btn--ghost{
  background:rgba(8,22,31,.72);color:var(--v2-text);
  border:1px solid var(--v2-line);box-shadow:none;
}

/* Elección de plan (FREE/PRO) dentro de #perfil — mismo gating de pro.js,
   solo se restylea el envoltorio. */
#perfil .eleccion__op{
  background:rgba(10,25,33,.6);border:1px solid var(--v2-line);border-radius:18px;
}
#perfil .eleccion__op--pro{border-color:var(--v2-cyan);box-shadow:0 0 0 1px rgba(19,185,231,.2)}
#perfil .eleccion__sello{
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));color:#fff;
}
#perfil .eleccion__op h3{color:var(--v2-text)}
#perfil .eleccion__precio{color:var(--v2-muted)}
#perfil .eleccion__precio b{color:var(--v2-text)}
#perfil .eleccion__op li{color:var(--v2-muted)}
#perfil .eleccion__nota{color:var(--v2-muted)}
#perfil .eleccion__motivo{color:var(--v2-amber)}
#perfil .eleccion__op .btn{
  background:rgba(8,22,31,.72);color:var(--v2-text);border:1px solid var(--v2-line);box-shadow:none;
}
#perfil .eleccion__op--pro .btn{
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));color:#fff;border:0;
  box-shadow:0 8px 30px rgba(13,147,176,.25);
}

/* ══ #cuerpo — somatotipo + métricas ══ */
#cuerpo .result{align-items:start}
#cuerpo .badge{
  background:rgba(19,185,231,.12);color:var(--v2-cyan2);
  border:1px solid rgba(19,185,231,.3);
}
#cuerpo #somaTitulo{color:var(--v2-text);font-family:var(--v2-display);text-transform:none;letter-spacing:-.01em}
#cuerpo #somaDesc{color:var(--v2-muted)}
#cuerpo .bar__track{background:rgba(255,255,255,.08)}
#cuerpo .bar span:not(.bar__track):not(.bar__val){color:var(--v2-muted)}
#cuerpo .bar__val{color:var(--v2-text)}
/* .bar__fill trae su color inline (soma.mezcla), a propósito: es un dato,
   no una decoración — no se sobrescribe. */
#cuerpo .soma__cols{border-top-color:var(--v2-line)}
#cuerpo .soma__cols h4{color:var(--v2-text)}
#cuerpo .soma__cols ul{color:var(--v2-muted)}

#cuerpo .metrics{gap:14px}
#cuerpo .metric{padding:20px}
#cuerpo .metric__lbl{color:var(--v2-muted);font-family:var(--v2-body);letter-spacing:.09em}
#cuerpo .metric__val{
  font-family:var(--v2-display);font-weight:700;color:var(--v2-text);
}
#cuerpo .metric__hint{color:var(--v2-muted)}
/* Estado semántico: mismas clases (metric--ok/--warn/--bad) que ya decide
   app.js vía clasificarIMC/clasificarGrasa/clasificarICC — solo cambia la
   paleta a la de V2. */
#cuerpo .metric--ok{background:linear-gradient(180deg,rgba(58,211,122,.12),rgba(8,23,32,.95))}
#cuerpo .metric--ok .metric__val{color:var(--v2-green)}
#cuerpo .metric--warn{background:linear-gradient(180deg,rgba(247,184,68,.12),rgba(8,23,32,.95))}
#cuerpo .metric--warn .metric__val{color:var(--v2-amber)}
#cuerpo .metric--bad{background:linear-gradient(180deg,rgba(255,95,134,.12),rgba(8,23,32,.95))}
#cuerpo .metric--bad .metric__val{color:var(--v2-pink)}

/* ══ #nutricion — macros y comidas ══ */
#nutricion .kcal b{color:var(--v2-cyan2);font-family:var(--v2-display)}
#nutricion .kcal span{color:var(--v2-muted)}
#nutricion .macro{border-bottom-color:var(--v2-line)}
#nutricion .macro__cifra{color:var(--v2-text);font-family:var(--v2-display)}
#nutricion .macro__cifra i{color:var(--v2-muted)}
#nutricion .macro__para{color:var(--v2-muted)}
#nutricion .nutri__nota,
#nutricion .note{color:var(--v2-muted)}
#nutricion .nutri__pista{color:var(--v2-muted)}
#nutricion .nutri__subtit{color:var(--v2-text);font-family:var(--v2-display)}
#nutricion .meal{border-bottom-color:var(--v2-line)}
#nutricion .meal b{color:var(--v2-text)}
#nutricion .meal p{color:var(--v2-muted)}
#nutricion .meal .num{color:var(--v2-cyan2)}
#nutricion .food h4{background:rgba(19,185,231,.15);color:var(--v2-cyan2)}
#nutricion .food ul{color:var(--v2-muted)}

/* Avisos (avisos.js): info neutra vs. aviso para menores de 18 — mismo
   contenido, mismo condicional (edad < 18), solo color/superficie V2. */
#cuerpo .avi,
#nutricion .avi{
  background:rgba(10,25,33,.6);border:1px solid var(--v2-line);border-radius:16px;
  color:var(--v2-muted);
}
#cuerpo .avi__ico,
#nutricion .avi__ico{color:var(--v2-cyan2)}
/* Turquesa de marca a propósito, no ámbar/rojo: el original evita leerse
   como una alerta de error (styles.css, comentario junto a .avi--menor) —
   es información para menores de 18, no un aviso de riesgo. */
#cuerpo .avi--menor,
#nutricion .avi--menor{
  background:rgba(19,185,231,.1);border-color:rgba(19,185,231,.35);
}
#cuerpo .avi--menor .avi__ico,
#nutricion .avi--menor .avi__ico{color:var(--v2-cyan2)}
#cuerpo .avi__tit,
#nutricion .avi__tit{color:var(--v2-text)}
#nutricion .nutri__aviso{color:var(--v2-muted)}

/* ── Motion: solo presentacional, respeta reduced-motion ── */
@media (prefers-reduced-motion:reduce){
  #cuerpo .bar__fill{transition:none}
}

/* ── Responsive ── */
@media (max-width:900px){
  #cuerpo .result{grid-template-columns:1fr}
  #nutricion .nutri{grid-template-columns:1fr}
}
@media (max-width:720px){
  #perfil,#cuerpo,#nutricion{padding:50px 0}
  #cuerpo .metrics{grid-template-columns:1fr 1fr}
  #nutricion .foods{grid-template-columns:1fr}
}
@media (max-width:480px){
  #cuerpo .metrics{grid-template-columns:1fr}
}