/* registrov2.css (compacto) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

/* ✅ Usa el sistema de diseño (tus variables globales) */
:root {
  --brand-navy: var(--color-secondary-500);
  --brand-lime: var(--color-tertiary-500);
  --muted: rgba(var(--bs-secondary-rgb), 0.88);

  /* Azules del fondo */
  --bg-1: var(--color-primary-500);
  --bg-2: var(--color-primary-300);
  --bg-3: var(--bs-primary);
}

/* Base */
#registroPrueba{
  font-family: "Poppins", sans-serif;
  position: relative;

  /* ✅ Reusa variables del sistema (menos hardcode) */
  background:
    radial-gradient(900px 520px at 18% 38%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(780px 420px at 82% 22%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(100deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
}

/* Columna izquierda (texto) */
#registroPrueba .row.align-items-center > .col-md-6:first-child{
  text-align: left;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}

#registroPrueba .register-title{
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px;
  line-height: 1.05;
  font-size: clamp(30px, 3.2vw, 46px);
  margin: 0 0 16px 0;
}

#registroPrueba .register-accent{
  color: var(--brand-lime) !important;
}

#registroPrueba .row.align-items-center > .col-md-6:first-child > span{
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 1.65;
  max-width: 60ch;
}

/* Card */
#registroPrueba .register-card{
  width: 100% !important;
  max-width: 560px; /* base */
  border-radius: 18px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;
  background: #fff !important;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

@media (min-width: 1200px){
  #registroPrueba .register-card{
    max-width: 660px; /* desktop grande */
  }
}

@media (hover: hover) and (pointer: fine){
  #registroPrueba .register-card:hover{
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 22px 50px rgba(0,0,0,.20) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  #registroPrueba .register-card{
    transition: none !important;
  }
  #registroPrueba .register-card:hover{
    transform: none !important;
  }
}

/* Encabezado centrado dentro de card */
#registroPrueba .register-card .text-center{
  text-align: center !important;
}

#registroPrueba .wizard-title{
  margin: 0;
  font-weight: 700;
  color: #111827;
  font-size: 22px;
}

#registroPrueba .wizard-subtitle{
  margin: 8px 0 0 0;
  color: rgba(0,0,0,.55);
  font-size: 12.5px;
  line-height: 1.35;
}

/* Stepper */
#registroPrueba .wizard-steps{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 14px 0 18px 0;
  padding: 10px 8px 0 8px;
}

#registroPrueba .wizard-steps::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 2px;
  background: rgba(0,0,0,.12);
}

#registroPrueba .wizard-step{
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

#registroPrueba .wizard-circle{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid rgba(0,0,0,.18);
  color: rgba(0,0,0,.55);
  font-weight: 800;
  font-size: 12px;
  z-index: 1;
}

#registroPrueba .wizard-label{
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(0,0,0,.55);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#registroPrueba .wizard-step.is-active .wizard-circle{
  border-color: var(--brand-navy);
  color: var(--brand-navy);
}

#registroPrueba .wizard-step.is-active .wizard-label{
  color: rgba(0,0,0,.88);
}

#registroPrueba .wizard-step.is-done .wizard-circle{
  border-color: var(--brand-lime);
  background: var(--brand-lime);
  color: #fff;
}

#registroPrueba .wizard-step.is-done .wizard-label{
  color: rgba(0,0,0,.72);
}

/* Vuetify 2 compact: quita huecos de mensajes/contador */
#registroPrueba .v-application .v-messages,
#registroPrueba .v-application .v-messages__wrapper{
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ✅ Deja UNA sola regla del contador */
#registroPrueba .v-application .v-counter{
  min-height: 0 !important;
  line-height: 1.1 !important;
  margin-top: 0 !important;
}

/* Evita que tu CSS global meta “doble borde” a inputs internos */
#registroPrueba .v-application input,
#registroPrueba .v-application textarea,
#registroPrueba .v-application select{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Focus lima (outlined Vuetify 2) */
#registroPrueba .v-application .v-text-field--outlined.v-input--is-focused fieldset,
#registroPrueba .v-application .v-select.v-input--is-focused .v-input__slot fieldset{
  border-color: var(--brand-lime) !important;
}

/* ✅ Inputs más compactos (sin tocar el ancho) */
#registroPrueba .v-application .v-text-field--outlined .v-input__slot,
#registroPrueba .v-application .v-select.v-text-field--outlined .v-input__slot{
  min-height: 40px !important;  /* default suele ser ~56px */
}

#registroPrueba .v-application .v-text-field--outlined input{
  padding: 8px 12px !important; /* reduce alto del input */
  font-size: 14px;
  line-height: 1.2;
}

/* Textarea compacto */
#registroPrueba .v-application .v-textarea.v-text-field--outlined textarea{
  padding: 8px 12px !important;
  font-size: 14px;
  line-height: 1.35;
}

/* ✅ Agrupa: botones (puedes ELIMINAR las 2 reglas viejas .btn-next/.btn-back que solo ponen color) */
#registroPrueba .btn-next,
#registroPrueba .btn-back{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  border: 1px solid transparent;
}
#registroPrueba .btn-next{
  background: var(--bg-3) !important;
  border-color: var(--bg-3) !important;
  color: #fff !important;
}
#registroPrueba .btn-back{
  background: #fff !important;
  border-color: rgba(0,0,0,.14) !important;
  color: rgba(0,0,0,.82) !important;
}
#registroPrueba .btn-next *,
#registroPrueba .btn-back *{ color: inherit !important; }

/* Asterisco requerido */
#registroPrueba .required-asterisk{
  color: #d32f2f !important;
  font-weight: 800;
}

/* ✅ Quita la “capa blanca” que pone Vuetify encima del fondo */
#registroPrueba .v-application,
#registroPrueba .v-application .v-application--wrap,
#registroPrueba .v-app,
#registroPrueba .v-main{
  background: transparent !important;
}

/* (opcional) si el bootstrap container trae fondo por algún css global */
#registroPrueba .container{
  background: transparent !important;
}

.main-footer{
  margin-top: 0 !important;
}

#registroPrueba .v-application .mb-3{
  margin-bottom: -10px !important; /* ajusta 4–10 según te guste */
}

/* Responsive */
@media (max-width: 991.98px){
  #registroPrueba .row.align-items-center > .col-md-6:first-child{
    text-align: center;
  }
  #registroPrueba .row.align-items-center > .col-md-6:first-child > span{
    margin-left: auto;
    margin-right: auto;
  }
  #registroPrueba .register-card{
    max-width: 100%;
    margin-bottom: 24px;
  }
  #registroPrueba{
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}