/* Para Chrome, Safari, Edge (basados en WebKit/Blink) */
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-clear-button,
input[type="password"]::-webkit-inner-spin-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Para Firefox */
input[type="password"]::-moz-focus-inner {
  border: 0;
}

/* Para Edge antiguo */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* Override site.css styles for login page */
.login-container {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.login-card {
  background: white !important;
  padding: 2.5rem !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 1rem !important;
  border: none !important;
}

.login-card form {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  max-height: none !important;
}

.login-header {
  text-align: center !important;
  margin-bottom: 2rem !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  animation: none !important;
}

.login-header h2 {
  color: #4aaec4 !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  font-size: 1.75rem !important;
  text-shadow: none !important;
}

.login-header p {
  color: #6c757d !important;
  font-size: 1rem !important;
}

.form-group {
  margin-bottom: 1.5rem !important;
  position: relative !important;
  margin-top: 0 !important;
  display: block !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.form-control {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border: 2px solid #e9ecef !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  font-size: 1rem !important;
  height: auto !important;
  background-color: white !important;
}

.form-control:focus {
  border-color: #4aaec4 !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 174, 196, 0.25) !important;
  outline: none !important;
}

.form-control.is-invalid {
  border-color: #dc3545 !important;
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.invalid-feedback {
  display: none !important;
  color: #dc3545 !important;
  font-size: 0.875rem !important;
  margin-top: 0.25rem !important;
}

.form-control.is-invalid ~ .invalid-feedback {
  display: block !important;
}

.btn-login {
  width: 100% !important;
  padding: 0.75rem !important;
  background-color: #4aaec4 !important;
  border: none !important;
  border-radius: 8px !important;
  color: white !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  height: auto !important;
}

.btn-login:hover {
  background-color: #3d8fa3 !important;
  transform: translateY(-2px) !important;
}

.btn-login:active {
  transform: translateY(0) !important;
}

.input-with-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.input-with-icon i {
  position: absolute !important;
  left: 1rem !important;
  color: #6c757d !important;
  font-size: 1.1rem !important;
  transition: color 0.3s ease !important;
  z-index: 1 !important;
}

.input-with-icon .form-control {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
  width: 100% !important;
}

.input-with-icon .form-control:focus + i {
  color: #4aaec4 !important;
}

.input-with-icon .form-control.is-invalid + i {
  color: #dc3545 !important;
}

.password-toggle {
  position: absolute !important;
  right: 1rem !important;
  top: 28% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: #6c757d !important;
  cursor: pointer !important;
  padding: 0 !important;
  height: auto !important;
  z-index: 2 !important;
  width: 30px;
  min-width: 30px;
}

.password-toggle:hover i {
  color: #4aaec4 !important;
  drop-shadow: 0 0 5px #4aaec4 !important;
}

/* Animation for form elements */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-group {
  animation: fadeIn 0.5s ease forwards !important;
}

.form-group:nth-child(2) {
  animation-delay: 0.1s !important;
}

.btn-login {
  animation: fadeIn 0.5s ease forwards !important;
  animation-delay: 0.2s !important;
}