/* Paleta base */
:root {
  --amarillo-claro: #F6D772;
  --azul-oscuro: #013A4A;
  --amarillo: #E5B902;
  --miel: #BF9056;
  --gris-azul: #282F3A;
  --blanco-suave: #f8f9fa;
}

/* Fondo general */
body {
  background: linear-gradient(135deg, var(--amarillo-claro) 0%, var(--miel) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
}

/* Contenedor */
.login-card {
  background-color: var(--blanco-suave);
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  transition: all 0.3s ease-in-out;
}
.login-card:hover {
  transform: translateY(-5px);
}

/* Logo */
.login-logo {
  width: 90px;
  filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.1));
}

/* Marca */
.brand {
  color: var(--azul-oscuro);
}

/* Inputs */
.form-control {
  border: 1.5px solid var(--gris-azul);
  border-radius: 10px;
  padding: 10px 14px;
}
.form-control:focus {
  border-color: var(--amarillo);
  box-shadow: 0 0 0 0.2rem rgba(229, 185, 2, 0.25);
}

/* Botón login */
.btn-login {
  background-color: var(--azul-oscuro);
  color: #fff;
  border: none;
  border-radius: 12px;
  transition: background-color 0.3s ease;
}
.btn-login:hover {
  background-color: var(--gris-azul);
}

/* Enlaces */
.link-accent {
  color: var(--azul-oscuro);
  font-weight: 500;
  text-decoration: none;
}
.link-accent:hover {
  text-decoration: underline;
}

/* Responsivo */
@media (max-width: 500px) {
  .login-card {
    margin: 0 15px;
    padding: 25px;
  }
}