/* ==== Estilo personalizado para login con fondo ==== */

/* Fondo con degradado + imagen */
.login-body {
  background: linear-gradient(135deg, rgba(44,110,73,0.9), rgba(15,32,39,0.9)),
              url("../images/fondo-ambiente.jpg") no-repeat center center fixed;
  background-size: cover;
}

/* Tarjeta principal */
.login-card {
  border-radius: 10px;
  overflow: hidden;
  margin: auto;
  max-width: 850px;
  backdrop-filter: blur(6px);
}

/* Cabecera y pie */
.login-card .card-header,
.login-card .card-footer {
  background-color: #2c6e49 !important; /* Verde oscuro */
  border: none;
}

/* Título cabecera */
.login-card .card-header h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

/* Botón */
.login-card .btn-primary {
  background-color: #2c6e49;
  border: none;
  font-weight: 600;
}

.login-card .btn-primary:hover {
  background-color: #24553a;
}

/* Inputs */
.login-card .form-control {
  border-radius: 0.25rem;
  box-shadow: none !important;
}

.input-group-text {
  background-color: #f8f9fa;
  border-right: none;
}

/* Focus */
.form-control:focus {
  border-color: #2c6e49;
  box-shadow: 0 0 0 0.2rem rgba(44, 110, 73, 0.25);
}

/* Mensajes */
.alert-danger {
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
}

/* ==== Bordes personalizados ==== */
.border-green {
  border: 2px solid #2c6e49 !important;  /* Verde oscuro principal */
  border-radius: 10px;
}

/* Animación entrada */
.animate-fadeInDown {
  animation: fadeInDown 0.8s ease;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ajuste ícono ojo */
.toggle-password i {
  font-size: 1rem;
  transition: color 0.2s ease;
}
.toggle-password i:hover {
  color: #2c6e49; /* Verde corporativo */
}