@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

.login-wrapper {
  padding: 1.5rem;
  background: linear-gradient(135deg, #DCF4D2 0%, #C3EAB4 100%);
}

.login-card {
  width: 100%;
  max-width: 900px;
  background-color: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
}

.login-brand {
  /* Reemplaza la imagen a continuación por la que prefieras */
  background-image: linear-gradient(160deg, rgba(62, 102, 23, 0.75) 0%, rgba(37, 61, 14, 0.85) 100%),
                     url('../imagenes/login_bg.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100%;
}

.login-brand-logo {
  max-width: 140px;
}

.login-logo-mobile {
  max-width: 110px;
}

.login-form-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.form-floating > .form-control {
  border-radius: 0.75rem;
  border: 1px solid #dee2e6;
}

.form-floating > .form-control:focus {
  border-color: #3E6617;
  box-shadow: 0 0 0 0.2rem rgba(62, 102, 23, 0.15);
}

.toggle-password {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  color: #6c757d;
  border: none;
  background: transparent;
}

.toggle-password:hover {
  color: #3E6617;
}

.btn-personal {
  background-color: #3E6617;
  color: #ffffff;
  border-radius: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.btn-personal:hover {
  background-color: #345514;
  color: #ffffff;
  transform: translateY(-1px);
}

.parsley-errors-list {
  color: #dc3545;
  font-size: 0.8rem;
  text-align: left;
  list-style: none;
  padding-left: 0;
  margin-top: 0.25rem;
}

input.parsley-error {
  border-color: #dc3545 !important;
  background-color: #fff5f5;
}

input.parsley-success {
  border-color: #49dc35 !important;
  background-color: #f3fff0;
}

@media (max-width: 991.98px) {
  .login-card {
    max-width: 420px;
  }
}