:root{
  --brand-bg:#0b0f1a;
  --brand-surface:#0f1524;
  --brand-border:#1f2937;
  --brand-light:#e5e7eb;
  --brand-secondary:#9ca3af;
  --brand-accent:#10e8e0;
  --brand-accent-ink:#0b0f1a;
}

/* Contenedor y tarjetas */
.page{ padding:2rem 0; }
.card{ background:var(--brand-bg); border:1px solid var(--brand-border); border-radius:16px; padding:1.5rem; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.35); }

/* Stepper visual */
.tab-indicators{ display:flex; justify-content:space-between; margin-bottom:1.5rem; }
.tab-indicators span{ padding:.5rem 1rem; border-radius:9999px; background:var(--brand-border); color:var(--brand-secondary); font-size:.875rem; cursor:pointer; transition:background .2s, color .2s; }
.tab-indicators span.active{ background:var(--brand-accent); color:var(--brand-accent-ink); font-weight:700; }

/* Pasos con scroll oculto y animación de entrada */
.form-step{ display:none; max-height:65vh; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
.form-step::-webkit-scrollbar{ display:none; }
.form-step.active{ display:block; animation:pageIn .25s ease both; }

@keyframes pageIn{
  from{ opacity:0; transform:translateX(6px); }
  to{ opacity:1; transform:translateX(0); }
}

/* Controles */
.form-actions{ margin-top:1rem; display:flex; justify-content:space-between; gap:1rem; }
.btn{ transition:transform .15s ease, box-shadow .15s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* Inputs */
.form-control{ background:var(--brand-surface); border:1px solid var(--brand-border); border-radius:10px; color:var(--brand-light); padding:.625rem .75rem; transition:border-color .2s ease, box-shadow .2s ease; }
.form-control:focus{ box-shadow:0 0 0 3px rgba(16,232,224,.15); border-color:var(--brand-accent); outline:0; }
.form-label{ color:var(--brand-light); }
.help{ color:var(--brand-secondary); font-size:.9rem; }

/* Modal coherente */
body.modal-open{ overflow:hidden; }
#legal-modal{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; justify-content:center; align-items:center; z-index:1000; opacity:0; pointer-events:none; transition:opacity .2s ease; }
#legal-modal.active{ opacity:1; pointer-events:auto; }
#legal-modal .modal-container{ background:var(--brand-bg); width:min(720px,92vw); border-radius:16px; border:1px solid var(--brand-border); box-shadow:0 20px 50px rgba(0,0,0,.5); transform:translateY(10px) scale(.98); opacity:0; transition:transform .2s ease, opacity .2s ease; }
#legal-modal.active .modal-container{ transform:translateY(0) scale(1); opacity:1; }
#legal-modal .modal-body{ max-height:60vh; overflow:auto; }
#legal-modal .modal-body::-webkit-scrollbar{ width:10px; }
#legal-modal .modal-body::-webkit-scrollbar-track{ background:var(--brand-bg); }
#legal-modal .modal-body::-webkit-scrollbar-thumb{ background:var(--brand-border); border-radius:8px; border:2px solid var(--brand-bg); }

/* Responsivo */
@media (max-width:480px){
  .card{ padding:1rem; border-radius:14px; }
  #legal-modal .modal-container{ width:94vw; }
  #legal-modal .modal-body{ max-height:66vh; }
  .tab-indicators span{ padding:.5rem .75rem; font-size:.8rem; }
}