/* ===== Estilos para autocompletado de usuario ===== */

/* Indicador de carga en el campo de teléfono - Solo spinner, sin overlay */
#telefono.loading {
  /* Sobrescribir estilos globales de .loading */
  position: relative !important;
  width: auto !important;
  height: auto !important;
  background-color: transparent !important;
  display: inline-block !important;
  justify-content: normal !important;
  align-items: normal !important;
  z-index: auto !important;
  top: auto !important;
  left: auto !important;

  /* Spinner discreto solo en el input */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="%23ff6604" stroke-width="2.5" fill="none" opacity="0.3"/><path d="M12 2 A10 10 0 0 1 22 12" stroke="%23ff6604" stroke-width="2.5" fill="none" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.8s" repeatCount="indefinite"/></path></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 22px 22px !important;
  padding-right: 45px !important;
  transition: all 0.3s ease;
}

/* Inputs bloqueados durante búsqueda - Efecto discreto */
.form-control.searching {
  opacity: 0.6;
  pointer-events: none;
  background-color: rgba(128, 128, 128, 0.05);
  transition:
    opacity 0.3s ease,
    background-color 0.3s ease;
}

/* Campos autocompletados - Estilo mejorado y más sutil */
.form-control.autocompleted {
  background: linear-gradient(
    90deg,
    rgba(0, 255, 100, 0.04) 0%,
    transparent 100%
  );
  border-left: 3px solid #00ff64;
  box-shadow: 0 0 8px rgba(0, 255, 100, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.form-control.autocompleted:focus {
  background: rgba(0, 255, 100, 0.02);
  border-left: 3px solid #00ff64;
  box-shadow: 0 0 12px rgba(0, 255, 100, 0.25);
}

/* Efecto de brillo sutil al autocompletar */
.form-control.autocompleted::before {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 3px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 255, 100, 0.8) 50%,
    transparent 100%
  );
  animation: slideDown 0.6s ease-out;
}

/* Animación suave para campos autocompletados */
@keyframes fadeInField {
  0% {
    opacity: 0;
    transform: translateX(-8px);
  }
  60% {
    opacity: 1;
    transform: translateX(2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDown {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 100%;
    opacity: 1;
  }
}

.form-control.autocompleted {
  animation: fadeInField 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efecto hover mejorado */
.form-control.autocompleted:hover {
  box-shadow: 0 0 16px rgba(0, 255, 100, 0.2);
  border-left-color: #00ff80;
}

/* ===== Estilos para campos enmascarados ===== */
.form-control.masked {
  background: linear-gradient(
    90deg,
    rgba(255, 165, 0, 0.05) 0%,
    transparent 100%
  );
  border-left: 3px solid #ffa500;
  color: #333 !important;
  font-style: italic;
  transition: all 0.3s ease;
}

.form-control.masked:hover {
  background: linear-gradient(
    90deg,
    rgba(255, 165, 0, 0.08) 0%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(255, 165, 0, 0.15);
}

/* Texto visible al seleccionar */
.form-control.masked::selection {
  background: #ffa500 !important;
  color: #fff !important;
}

.form-control.masked::-moz-selection {
  background: #ffa500 !important;
  color: #fff !important;
}

/* Al hacer focus, cambiar estilo */
.form-control.masked:focus {
  border-left-color: #4caf50;
  background: linear-gradient(
    90deg,
    rgba(76, 175, 80, 0.05) 0%,
    transparent 100%
  );
  font-style: normal;
  color: #000 !important;
}

/* Asegurar que el parent del input tenga position relative */
.form-group {
  position: relative !important;
}

/* Transición suave al remover la clase */
.form-control {
  transition:
    border 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    opacity 0.3s ease;
}

/* Responsive: Ajustar en móviles */
@media (max-width: 768px) {
  #instagram_user.loading {
    background-size: 20px 20px !important;
    background-position: right 10px center !important;
    padding-right: 40px !important;
  }

  .form-control.autocompleted {
    border-left-width: 2px;
  }
}