/* ==========================================================================
   Guía 507 — tema oscuro para los formularios de autenticación/registro.
   Solo CSS: no toca HTML ni JS (swiper, intl-tel-input, uploads intactos).
   ========================================================================== */
:root{
  --ga-bg:#030712; --ga-soft:#070D1C; --ga-card:#0C1424; --ga-card2:#111B2E;
  --ga-border:rgba(148,163,184,.16); --ga-border-hi:rgba(0,180,216,.45);
  --ga-text:#F9FAFB; --ga-muted:#94A3B8; --ga-cyan:#00B4D8; --ga-cyan2:#22D3EE;
  --ga-blue:#2563EB; --ga-coral:#FF6F59;
}

body{background:var(--ga-bg)!important;color:var(--ga-text)!important}

/* contenedores / tarjetas */
.auth-wrapper,.auth-card,.card,.auth-right,.auth-content,.register-card,
.bg-white,.bg-light,main,.main-content,section,.container-fluid > .row > div{
  background-color:transparent!important;
}
.card,.auth-card,.register-card,.box,.panel{
  background:var(--ga-card)!important;border:1px solid var(--ga-border)!important;
  border-radius:20px!important;box-shadow:none!important;
}

/* tipografía */
h1,h2,h3,h4,h5,h6,.title,legend{color:var(--ga-text)!important}
p,span,small,li,.text-muted,.form-text,.help-text{color:var(--ga-muted)!important}
a{color:var(--ga-cyan2)!important}
.text-dark{color:var(--ga-text)!important}
hr,.border-bottom,.border-top{border-color:var(--ga-border)!important}

/* etiquetas y campos */
label,.form-label{color:var(--ga-text)!important;font-weight:600!important}
label .text-danger,.required,span.text-danger{color:var(--ga-coral)!important}
.form-control,.form-select,select,textarea,
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=search],input[type=url],input[type=date]{
  background:var(--ga-soft)!important;border:1px solid var(--ga-border)!important;
  color:var(--ga-text)!important;border-radius:12px!important;
}
.form-control::placeholder,textarea::placeholder,input::placeholder{color:#64748B!important;opacity:1!important}
.form-control:focus,.form-select:focus,select:focus,textarea:focus,input:focus{
  background:var(--ga-soft)!important;border-color:var(--ga-cyan)!important;
  box-shadow:0 0 0 3px rgba(0,180,216,.16)!important;color:var(--ga-text)!important;
}
.input-group-text,.input-group .btn{
  background:var(--ga-card2)!important;border-color:var(--ga-border)!important;color:var(--ga-muted)!important;
}
/* autofill del navegador */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ga-text)!important;
  -webkit-box-shadow:0 0 0 1000px var(--ga-soft) inset!important;
  caret-color:var(--ga-text)!important;
}

/* selects nativos: opciones legibles */
select option{background:var(--ga-card)!important;color:var(--ga-text)!important}

/* botones */
.btn--base,.btn-primary,button[type=submit],.btn-next,.btn-submit{
  background:linear-gradient(135deg,var(--ga-cyan),var(--ga-blue))!important;
  border:0!important;color:#fff!important;font-weight:700!important;border-radius:999px!important;
}
.btn-outline-primary,.btn-secondary,.btn-prev{
  background:transparent!important;border:1px solid var(--ga-border-hi)!important;color:var(--ga-cyan2)!important;
  border-radius:999px!important;
}
.btn-outline-primary:hover,.btn-secondary:hover{background:rgba(0,180,216,.12)!important}

/* stepper vertical */
.step-item,.steps li,[class*="vertical-steps"] li,[class*="vertical-steps"] a{color:var(--ga-muted)!important}
.step-item.active,.steps li.active,[class*="vertical-steps"] .active{color:var(--ga-cyan2)!important}
.bs-stepper-circle,[class*="step"] .circle,.step-number{
  background:var(--ga-card2)!important;color:var(--ga-muted)!important;border:1px solid var(--ga-border)!important;
}
.active .bs-stepper-circle,.active .step-number,.active .circle{
  background:linear-gradient(135deg,var(--ga-cyan),var(--ga-blue))!important;color:#fff!important;border-color:transparent!important;
}
.bs-stepper-line,.step-line,[class*="step"] .line{background:var(--ga-border)!important}

/* subida de imágenes */
.global-image-upload,.image-upload-box,.upload-box,[class*="image-upload"]{
  background:var(--ga-soft)!important;border:1.5px dashed var(--ga-border)!important;
  border-radius:14px!important;color:var(--ga-muted)!important;
}
.global-image-upload:hover,[class*="image-upload"]:hover{border-color:var(--ga-border-hi)!important}
.global-image-upload i,[class*="image-upload"] i,[class*="image-upload"] svg{color:var(--ga-cyan)!important}

/* intl-tel-input */
.iti__flag-container,.iti--separate-dial-code .iti__selected-flag{
  background:var(--ga-card2)!important;border-radius:12px 0 0 12px!important;
}
.iti__country-list{
  background:var(--ga-card)!important;border:1px solid var(--ga-border)!important;
  color:var(--ga-text)!important;border-radius:12px!important;
}
.iti__country{color:var(--ga-text)!important}
.iti__country.iti__highlight,.iti__country:hover{background:rgba(0,180,216,.14)!important}
.iti__dial-code{color:var(--ga-muted)!important}
.iti__divider{border-color:var(--ga-border)!important}

/* planes / paquetes */
.package-option,.plan-card,.subscription-card{
  background:var(--ga-card)!important;border:1px solid var(--ga-border)!important;
  border-radius:16px!important;color:var(--ga-text)!important;
}
.package-option.active,.plan-card.active{
  border-color:var(--ga-cyan)!important;box-shadow:0 0 0 3px rgba(0,180,216,.16)!important;
}

/* checkbox / radio */
.form-check-input{background-color:var(--ga-soft)!important;border-color:var(--ga-border)!important}
.form-check-input:checked{background-color:var(--ga-cyan)!important;border-color:var(--ga-cyan)!important}
.form-check-label{color:var(--ga-muted)!important}

/* tablas y alertas */
table,.table{color:var(--ga-text)!important}
.table > :not(caption) > * > *{background-color:transparent!important;border-color:var(--ga-border)!important}
.alert{border-radius:12px!important}
.alert-success{background:rgba(34,197,94,.12)!important;border:1px solid rgba(34,197,94,.3)!important;color:#4ADE80!important}
.alert-danger,.invalid-feedback,.text-danger{color:#FF9B8A!important}

/* panel lateral promocional */
.auth-left,.auth-banner,[class*="auth-side"]{
  background:linear-gradient(160deg,#04121C 0%,#063346 45%,#0A5A72 100%)!important;
}

/* scrollbar coherente */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--ga-soft)}
*::-webkit-scrollbar-thumb{background:#1E293B;border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:#334155}

/* contenedor principal del registro: gradiente claro -> oscuro */
.register-wrap,.register-wrap.style__two{
  background-image:linear-gradient(135deg,#030712 0%,#070D1C 55%,#0C1424 100%)!important;
  background-color:#030712!important;
}
.register-right,.register-form-wrap,.register-body{background:transparent!important}
/* velo blanco del panel izquierdo */
.tf-box{background-image:linear-gradient(rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 100%)!important}
/* contador de caracteres y ayudas */
.char-count,.text-end small,small.text-muted{color:#64748B!important}

/* campos del registro (ff-field*): selectores de alta especificidad */
.ff-field input.ff-field__input.form-control,
.ff-field--has-icon input.ff-field__input.form-control,
.ff-field--has-icon.ff-field--has-prefix input.ff-field__input.form-control,
.ff-field--has-suffix input.ff-field__input.form-control,
.ff-field textarea.ff-field__input,
.ff-field select.ff-field__input,
.register-wrap input.form-control,
.register-wrap textarea.form-control,
.register-wrap select.form-select{
  background:#070D1C!important;background-color:#070D1C!important;
  border:1px solid rgba(148,163,184,.16)!important;color:#F9FAFB!important;
}
.ff-field input.ff-field__input.form-control:focus,
.register-wrap input.form-control:focus,
.register-wrap textarea.form-control:focus,
.register-wrap select.form-select:focus{
  background:#070D1C!important;border-color:#00B4D8!important;
  box-shadow:0 0 0 3px rgba(0,180,216,.16)!important;color:#F9FAFB!important;
}
.ff-field__label,.ff-field label,.register-wrap label{color:#F9FAFB!important}
.ff-field__icon,.ff-field i,.ff-field svg,.register-wrap .ff-field__prefix{color:#94A3B8!important}
.ff-field input::placeholder,.register-wrap input::placeholder,.register-wrap textarea::placeholder{color:#64748B!important}
/* prefijo de teléfono */
.register-wrap .iti--separate-dial-code .iti__selected-flag{background:#111B2E!important}
.register-wrap .iti__selected-dial-code{color:#F9FAFB!important}

/* títulos de sección del formulario (venían en gris-oscuro fijo) */
.register-wrap h3,.register-wrap h4,.register-wrap h5,
.register-wrap .border-bottom,
.register-wrap h3.border-bottom,.register-wrap h5.border-bottom{
  color:#F9FAFB!important;border-color:rgba(148,163,184,.18)!important;
}
/* barra inferior de acciones (era blanca) */
.actions,.actions.clearfix,.register-wrap .actions{
  background:rgba(7,13,28,.92)!important;backdrop-filter:blur(10px);
  border-top:1px solid rgba(148,163,184,.16)!important;
}
.actions a,.actions li a{color:#F9FAFB!important}
/* stepper: números y líneas */
.register-wrap .steps .step,.register-wrap .steps a,.register-wrap [class*="steps"] li{color:#94A3B8!important}
.register-wrap .steps .current a,.register-wrap .current{color:#22D3EE!important}

/* === refuerzo global (este archivo solo se carga en el registro) === */
h1,h2,h3,h4,h5,h6,
h3.border-bottom,h5.border-bottom,
.border-bottom,.pb-2,.mb-4{color:#F9FAFB!important}
.border-bottom{border-color:rgba(148,163,184,.18)!important}
/* cualquier texto que venga en gris-carbón fijo */
[style*="color: #0F172A"],[style*="color:#0F172A"],
[style*="color: rgb(15, 23, 42)"],.text-body,.text-secondary{color:#F9FAFB!important}
small,.small,.form-text{color:#94A3B8!important}

/* Panel promocional: cerrar el degradado en azul profundo (evita el tono verdoso
   del turquesa oscuro al comprimirse) y fundir con el fondo de la página. */
.register-left,.auth-left,.auth-banner,[class*="auth-side"]{
  background-image:linear-gradient(155deg,#0A2540 0%,#0E7490 38%,#00B4D8 72%,#0A2540 100%)!important;
}

/* === Compactar el formulario: menos aire vertical sin perder legibilidad === */
.ff-field{margin-bottom:10px!important}
.ff-field__label,.register-wrap label{margin-bottom:5px!important;font-size:.875rem!important;line-height:1.3!important}
.ff-field input.ff-field__input.form-control,
.register-wrap input.form-control,
.register-wrap select.form-select{
  padding-top:11px!important;padding-bottom:11px!important;min-height:44px!important;font-size:.95rem!important;
}
.register-wrap textarea.form-control{min-height:90px!important}
/* contador de caracteres: pequeño y pegado al campo */
.char-count,.ff-field__count,.register-wrap .text-end small,.register-wrap .form-text{
  font-size:.72rem!important;margin-top:2px!important;line-height:1.2!important;opacity:.7;
}
/* títulos de sección más ajustados */
.register-wrap h3,.register-wrap h5{margin-bottom:14px!important;padding-bottom:8px!important;font-size:1.02rem!important}
.register-wrap h3.border-bottom{font-size:1.14rem!important}
.register-wrap .mb-4{margin-bottom:14px!important}
.register-wrap .mb-3{margin-bottom:10px!important}
.register-wrap .mt-4{margin-top:16px!important}
/* subida de imagen: caja más baja */
.global-image-upload,[class*="image-upload"]{min-height:auto!important}
.register-wrap .row{--bs-gutter-y:.4rem}

/* Contadores de caracteres: ruido visual permanente -> solo al enfocar el campo */
.char-count,.ff-field__count,.register-wrap .text-end small{
  opacity:0;transition:opacity .2s;height:0!important;margin:0!important;display:block;
}
.ff-field:focus-within .char-count,
.ff-field:focus-within .ff-field__count,
.ff-field:focus-within .text-end small{opacity:.75;height:auto!important;margin-top:3px!important}

/* ===== MÓVIL: el primer campo estaba a 838px (casi una pantalla). Compactar el camino. ===== */
@media (max-width:991px){
  /* 1) panel promocional: de 344px a ~180px */
  .register-left{min-height:auto!important;padding:18px 14px!important}
  .register-left .tf-box{
    padding:18px 16px!important;margin:0 auto!important;height:auto!important;
    max-width:520px;gap:.5rem!important;
  }
  .register-left .login-img,.register-left .login-logo{max-height:44px!important;margin-bottom:6px!important}
  .register-left h2{font-size:1.06rem!important;line-height:1.35!important;margin:0!important}
  .register-left .px-xl-5{padding-inline:0!important}

  /* 2) encabezado del formulario, sin huecos muertos */
  .register-right,.register-wrap .register-right{padding-top:14px!important}
  .register-wrap h1,.register-wrap .form-title{margin-bottom:4px!important}
  .register-wrap .text-center p,.register-wrap .subtitle{margin-bottom:10px!important}

  /* 3) stepper compacto y horizontal, sin aire alrededor */
  .steps,[class*="vertical-steps"],.wizard > .steps{margin:10px 0!important;padding:0!important}
  .wizard > .steps > ul{margin:0!important;padding:0!important}
  .wizard > .steps > ul > li > a,.steps li a{padding:8px 6px!important;min-height:auto!important}
  .steps .number,.bs-stepper-circle{width:30px!important;height:30px!important;line-height:30px!important;font-size:.85rem!important}
  .steps li a p,.steps li a span{font-size:.72rem!important;margin:3px 0 0!important}

  /* 4) títulos de sección pegados a su contenido */
  .register-wrap h3,.register-wrap h5{margin:12px 0 8px!important;padding-bottom:6px!important}
  .register-wrap .content,.wizard > .content{margin-top:6px!important;padding-top:0!important}
  .register-wrap section,.wizard .body{padding-top:0!important}
}
@media (max-width:520px){
  .register-left .tf-box{padding:14px 12px!important}
  .register-left h2{font-size:1rem!important}
  .register-left .login-img,.register-left .login-logo{max-height:38px!important}
}

/* Contador de caracteres: la clase real es ff-field__counter (no __count).
   Se oculta y solo aparece al escribir en el campo. */
.ff-field__counter{
  opacity:0!important;height:0!important;margin:0!important;padding:0!important;
  overflow:hidden;transition:opacity .2s;font-size:.72rem!important;
}
.ff-field:focus-within .ff-field__counter{opacity:.7!important;height:auto!important;margin-top:3px!important}

/* Hueco muerto de 74px entre el subtítulo y el stepper */
@media (max-width:991px){
  .wizard,.register-wrap .wizard{margin-top:0!important;padding-top:0!important}
  .wizard > .steps{margin-top:0!important}
  .register-wrap .text-center{margin-bottom:0!important}
  .register-wrap form{margin-top:0!important}
  .steps{margin-top:6px!important}
}

/* ===== AUTOFILL de Chrome/Android =====
   Chrome pinta los campos autocompletados con su propio fondo claro y no respeta
   `background-color`. La única vía es un box-shadow interior + text-fill-color.
   Se usan valores LITERALES: las variables CSS no siempre resuelven en este estado. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:focus,
.ff-field input.ff-field__input:-webkit-autofill,
.ff-field input.ff-field__input:-webkit-autofill:focus,
.register-wrap input:-webkit-autofill,
.register-wrap input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #070D1C inset!important;
          box-shadow:0 0 0 1000px #070D1C inset!important;
  -webkit-text-fill-color:#F9FAFB!important;
  caret-color:#F9FAFB!important;
  background-color:#070D1C!important;
  background-image:none!important;
  color:#F9FAFB!important;
  transition:background-color 9999s ease-out 0s!important;  /* congela el repintado de Chrome */
}
/* mientras se escribe (por si el navegador aplica otro estado) */
.ff-field input.ff-field__input:focus,
.register-wrap input:focus,
.register-wrap textarea:focus{
  -webkit-text-fill-color:#F9FAFB!important;
  caret-color:#00B4D8!important;
}
/* la lista de sugerencias del datalist/autocompletado */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button{
  filter:invert(1) brightness(1.6);
}