/* login.css */

/* Fondo con overlay rosado */
body, html {
  height: 100%;
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.login-hero-section {
  position: relative;
  height: 100vh;
  background: url("https://images.unsplash.com/photo-1617450365226-7b804fa38bd5") repeat;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #f8dce3, #fbeec1);
  z-index: 1;
}

.login-container {
  position: relative;
  z-index: 10;
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(209, 108, 155, 0.3);
  max-width: 400px;
  width: 90%;
}

.login-container h3 {
  color: #d16c9b;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
}

label.form-label {
  font-weight: 600;
  color: #444;
}

.form-control {
  border-radius: 0.5rem;
  box-shadow: none;
  border: 1.5px solid #d16c9b;
  transition: border-color 0.3s ease;
}

.form-control:focus {
  border-color: #ec407a;
  box-shadow: 0 0 8px #ec407a66;
}

.btn-primary {
  background-color: #d16c9b;
  border: none;
  font-weight: 600;
  padding: 0.7rem 1.5rem;
  border-radius: 2rem;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #ec407a;
}

/* Mensajes de alerta */
.alert {
  border-radius: 0.7rem;
  font-weight: 600;
}