/* Modern styles for auth flows: forgot-password modal and reset-password page */
:root{
  --sj-primary:#0d6efd;
  --sj-primary-2:#0aa2ff;
  --sj-bg:#f5f7fb;
  --sj-card:#ffffff;
  --sj-muted:#6c757d;
  --sj-danger:#dc3545;
}

/* ===== ARREGLO ROBUSTO: Etiquetas flotantes - Compatibilidad cross-browser ===== */
/* Asegura que la etiqueta se mantenga arriba cuando el input tiene valor */
.input100.has-val {
  height: 48px !important;
}

.input100.has-val + .focus-input100 + .label-input100 {
  top: 14px !important;
  font-size: 13px !important;
  color: #999999 !important;
}

/* Soporte para autofill del navegador */
.input100:-webkit-autofill,
.input100:-webkit-autofill:hover,
.input100:-webkit-autofill:focus,
.input100:-webkit-autofill:active {
  height: 48px !important;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

.input100:-webkit-autofill + .focus-input100 + .label-input100 {
  top: 14px !important;
  font-size: 13px !important;
  color: #999999 !important;
}

/* Soporte para Firefox */
.input100:-moz-autofill,
.input100:-moz-autofill:hover,
.input100:-moz-autofill:focus {
  height: 48px !important;
}

.input100:-moz-autofill + .focus-input100 + .label-input100 {
  top: 14px !important;
  font-size: 13px !important;
  color: #999999 !important;
}

/* Asegurar que cuando el input tiene foco Y valor, la etiqueta permanezca arriba */
.input100:focus.has-val + .focus-input100 + .label-input100 {
  top: 14px !important;
  font-size: 13px !important;
}

/* Prevenir que la etiqueta baje durante el blur si hay valor */
.input100:not(:focus).has-val + .focus-input100 + .label-input100 {
  top: 14px !important;
  font-size: 13px !important;
}

/* Transiciones suaves para todos los estados */
.label-input100 {
  transition: all 0.3s ease-in-out !important;
  -webkit-transition: all 0.3s ease-in-out !important;
  -moz-transition: all 0.3s ease-in-out !important;
  -o-transition: all 0.3s ease-in-out !important;
}

.input100 {
  transition: height 0.3s ease-in-out !important;
  -webkit-transition: height 0.3s ease-in-out !important;
  -moz-transition: height 0.3s ease-in-out !important;
  -o-transition: height 0.3s ease-in-out !important;
}

/* Forgot Password Modal */
#forgotPasswordModal .modal-dialog{ max-width: 520px; }
#forgotPasswordModal .modal-content.modal-modern{
  border: none;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
#forgotPasswordModal .modal-header{ border-bottom: none; }
#forgotPasswordModal .modal-title{ font-weight:600; }
#forgotPasswordModal .modal-body p{ color: var(--sj-muted); }
#forgotPasswordModal .form-control{
  border-radius: .75rem;
  border: 1px solid #e5e7eb;
  padding: .75rem 1rem;
}
#forgotPasswordModal .form-control:focus{
  border-color: var(--sj-primary);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
#forgotPasswordModal .btn-primary{
  background: linear-gradient(135deg, var(--sj-primary), var(--sj-primary-2));
  border: none;
  border-radius: .75rem;
  padding: .75rem 1rem;
  font-weight:600;
}
#forgotPasswordModal .btn-primary:hover{ filter: brightness(.97); }

/* Reset Password Page */
.auth-wrapper{ min-height: 100vh; background: var(--sj-bg); display:flex; align-items:center; }
.auth-card{
  border: none;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.auth-title{ font-weight:700; letter-spacing:.3px; }
.brand-logo{ max-width: 160px; }
.form-modern .form-control{
  border-radius: .75rem;
  border: 1px solid #e5e7eb;
  padding: .75rem 1rem;
}
.form-modern .form-control:focus{
  border-color: var(--sj-primary);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
.btn-gradient{
  background: linear-gradient(135deg, var(--sj-primary), var(--sj-primary-2));
  border: none;
  border-radius: .75rem;
  padding: .8rem 1rem;
  font-weight:600;
}
.btn-gradient:hover{ filter: brightness(.97); }
.alert{ border-radius: .75rem; }