/* ===== Test Longevity360 — UI ===== */

/* Paleta (usa la misma idea que tu style.css) */
:root{
  --test-ink:#0f172a;
  --test-ink-2:#334155;
  --test-muted:#6b7280;
  --test-line:#e5e7eb;
  --test-bg:#ffffff;
  --test-card:#ffffff;
  --test-soft:#f8fafc;
  --test-cta:#1C69D4;
  --test-cta-2:#3573E3;
  --test-ok:#10b981;
  --test-warn:#f59e0b;
  --test-bad:#ef4444;
  --shadow-md:0 6px 20px rgba(17,24,39,.08);
}

/* Contenedor del paso */
.section .card{
  border:1px solid var(--test-line);
  background:var(--test-card);
  border-radius:16px;
  box-shadow:var(--shadow-md);
  padding:18px;
}

/* Progreso superior */
.test-progress{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.test-progress > span{
  font-weight:800; color:var(--test-ink-2); white-space:nowrap;
}
.test-progress .bar{
  flex:1; height:10px; background:#eef2ff; border-radius:999px; position:relative; overflow:hidden;
  border:1px solid #e2e8f0;
}
.test-progress .bar > i{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--test-cta), var(--test-cta-2));
  border-radius:999px;
  transition:width .25s ease;
}

/* Grupo de pregunta (fieldset) */
form fieldset{
  border:1px solid var(--test-line);
  background:#fff;
  border-radius:14px;
  padding:14px;
}
form fieldset legend{
  font-weight:800; color:var(--test-ink); padding:0 6px; margin-left:2px;
}

/* Radios bonitos */
form label{
  display:flex; align-items:center; gap:10px;
  color:var(--test-ink-2); padding:8px 6px; border-radius:10px; cursor:pointer;
}
form input[type="radio"]{
  appearance:none; width:18px; height:18px; border-radius:999px;
  border:2px solid #94a3b8; display:inline-block; position:relative;
  outline:none; transition:border .15s ease, box-shadow .15s ease;
}
form input[type="radio"]:checked{
  border-color:var(--test-cta);
  box-shadow:0 0 0 3px rgba(28,105,212,.18);
}
form input[type="radio"]:checked::after{
  content:""; position:absolute; inset:3px; border-radius:999px;
  background:var(--test-cta);
}

/* Nota interior */
.card.note{
  background:var(--test-soft);
  border-color:#e2e8f0;
  color:var(--test-ink-2);
}

/* Acciones */
.test-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;
}
.test-actions .btn{
  background:linear-gradient(135deg, var(--test-cta), var(--test-cta-2));
  color:#fff; border:1px solid transparent; font-weight:800; border-radius:12px; padding:12px 18px;
  box-shadow:0 10px 24px rgba(28,105,212,.20); transition:transform .12s ease, opacity .12s ease;
}
.test-actions .btn:hover{ transform:translateY(-1px); opacity:.96; }
.test-actions .btn.gpt{
  background:#ffffff; color:var(--test-ink-2); border:1px solid var(--test-line); box-shadow:none;
}
.test-actions .btn.gpt:hover{ background:#f9fafb; }

/* Responsive */
@media (max-width:820px){
  form fieldset{ padding:12px; }
  form label{ padding:8px 4px; }
  .test-progress > span{ font-size:14px; }
}