/* ═══════════════════════════════════════════════════════════
   YouPlanFit · Design System V2 — Grupo B: diagnóstico
   ═══════════════════════════════════════════════════════════
   Requiere design-v2-tokens.css cargado antes. Escopado ÍNTEGRO a
   `#diagnostico`: es la única sección de esta hoja que puede tocar
   `.field`/`.btn`/`.card`/`.opcion` etc. — el resto de app.html (rutina,
   nutrición, progreso, PRO...) sigue con styles.css tal cual hasta su
   propio grupo de migración.

   Nada aquí cambia HTML, ids, name, value, ni JS. Todos los selectores son
   puramente visuales sobre el DOM real que ya pintan pasos.js y app.js.
   ═══════════════════════════════════════════════════════════ */

#diagnostico{
  position:relative;padding:90px 0;overflow:hidden;
  background:
    radial-gradient(circle at 15% 10%,rgba(19,185,231,.08),transparent 32%),
    linear-gradient(180deg,var(--v2-bg),var(--v2-bg2) 65%,var(--v2-bg));
  color:var(--v2-text);
}
#diagnostico .wrap{position:relative;z-index:1}

/* ── Cabecera de sección ── */
#diagnostico .shead .tag{
  display:inline-block;color:#81dff8;font-size:.68rem;letter-spacing:.2em;
  font-weight:700;text-transform:uppercase;margin:0 0 14px;
}
#diagnostico .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;
}
#diagnostico .shead p{color:var(--v2-muted)}

/* ── Tarjeta del formulario ── */
#diagnostico .card{
  background:linear-gradient(180deg,rgba(18,39,52,.93),rgba(8,23,32,.95));
  border:1px solid rgba(90,184,222,.24);border-radius:22px;
  box-shadow:var(--v2-sombra),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}

/* ── Progreso ── */
#diagnostico .pasos__cuenta{
  font-family:var(--v2-body);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--v2-muted);
}
#diagnostico .pasos__barra{background:rgba(255,255,255,.08)}
#diagnostico .pasos__fill{background:linear-gradient(90deg,var(--v2-blue),var(--v2-cyan))}
#diagnostico .pasos__fijo{color:var(--v2-muted)}
#diagnostico .pasos__fijo b{color:var(--v2-text)}

/* ── Paso activo ── */
#diagnostico .paso__tit{
  font-family:var(--v2-display);color:var(--v2-text);font-weight:600;
  letter-spacing:-.01em;line-height:1.15;
}
#diagnostico .paso__ayuda{color:var(--v2-muted)}

/* ── Campos sueltos (edad, altura, peso, medidas) ── */
#diagnostico .field label{
  font-family:var(--v2-body);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:var(--v2-muted);
}
#diagnostico .field input{
  background:#0a1921;border:1px solid var(--v2-line);border-radius:12px;
  padding:13px 14px;color:var(--v2-text);font:inherit;font-size:1rem;
  transition:border-color var(--v2-dur) var(--v2-curva),background var(--v2-dur) var(--v2-curva);
}
#diagnostico .field input::placeholder{color:#4c6470}
#diagnostico .field input:hover{background:#0d202a}
#diagnostico .field input:focus{
  outline:none;border-color:var(--v2-cyan);box-shadow:0 0 0 3px rgba(19,185,231,.18);
}
#diagnostico .field input.err{border-color:var(--v2-pink);background:rgba(255,95,134,.08)}
#diagnostico .field small{color:var(--v2-muted);font-size:.77rem}

/* ── Tarjetas de opción (pasos.js las dibuja desde los <select data-cards>) ── */
#diagnostico .opcion{
  border:1.5px solid var(--v2-line);border-radius:16px;
  background:rgba(10,25,33,.6);
  transition:border-color var(--v2-dur) var(--v2-curva),background var(--v2-dur) var(--v2-curva),transform var(--v2-dur) var(--v2-curva);
}
#diagnostico .opcion:hover{border-color:var(--v2-cyan);transform:translateY(-2px);background:rgba(13,32,42,.8)}
#diagnostico .opcion .opcion__radio{
  border:2px solid var(--v2-line);background:#0a1921;
}
#diagnostico .opcion .opcion__radio:hover{background:#0d202a}
#diagnostico .opcion .opcion__radio:checked{
  border-color:var(--v2-cyan);box-shadow:inset 0 0 0 5px var(--v2-cyan);
}
#diagnostico .opcion:has(.opcion__radio:checked){
  border-color:var(--v2-cyan);background:rgba(19,185,231,.08);
}
#diagnostico .opcion:has(.opcion__radio:focus-visible){outline:2.5px solid var(--v2-cyan);outline-offset:3px}
#diagnostico .opcion__tit{color:var(--v2-text)}
#diagnostico .opcion__nota{color:var(--v2-muted)}
#diagnostico .opcion--pro .opcion__tit::after{
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));color:#fff;
}
#diagnostico .opcion--pro .opcion__nota{color:var(--v2-muted)}

/* ── Medidas (paso 8) ── */
#diagnostico .medidas__guia{border:1px solid var(--v2-line);border-radius:16px}
#diagnostico .medidas__guia figcaption{color:var(--v2-muted);background:rgba(10,25,33,.6)}

/* ── Consentimiento del diagnóstico — SOLO visual: obligatoriedad, validación,
   texto legal y bloqueo de envío siguen siendo los de app.js, intactos. ── */
#diagnostico .consent-diag{
  background:rgba(10,25,33,.6);border:1px solid var(--v2-line);border-radius:16px;
}
#diagnostico .consent-diag__label{color:var(--v2-text)}
#diagnostico .consent-diag__label input{accent-color:var(--v2-cyan)}
#diagnostico .consent-diag__label input:focus-visible{outline:2.5px solid var(--v2-cyan);outline-offset:2px}
#diagnostico .consent-diag__pie{color:var(--v2-muted)}
#diagnostico .consent-diag__pie a{color:var(--v2-cyan2)}
#diagnostico .consent-diag__error{color:var(--v2-pink)}
#diagnostico .consent-diag--falta{border-color:var(--v2-pink)}

/* ── Navegación de pasos y botones ── */
#diagnostico .pasos__nav{border-top:1px solid var(--v2-line)}
#diagnostico .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);
  transition:transform var(--v2-dur) var(--v2-curva),box-shadow var(--v2-dur) var(--v2-curva);
}
#diagnostico .btn:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(19,185,231,.2)}
#diagnostico .btn--ghost{
  background:rgba(8,22,31,.72);color:var(--v2-text);
  border:1px solid var(--v2-line);box-shadow:none;
}
#diagnostico .btn--ghost:hover{
  background:rgba(13,32,42,.9);border-color:var(--v2-cyan);
  transform:translateY(-2px);box-shadow:none;
}

/* ── Error general del formulario ── */
#diagnostico .form__foot{background:transparent}
#diagnostico .form__err{color:var(--v2-pink)}

/* ── Transiciones: presentacionales, respetan reduced-motion ── */
@media (prefers-reduced-motion:reduce){
  #diagnostico .pasos--activo .paso--activo{animation:none}
  #diagnostico .pasos__fill{transition:none}
  #diagnostico .opcion{transition:none}
}

/* ── Responsive ── */
@media (max-width:720px){
  #diagnostico{padding:60px 0}
  #diagnostico .grid--2{grid-template-columns:1fr}
}