/* ✅ Estilos para mensajes visuales en login */

.mensaje-exito,
.mensaje-error,
.mensaje-bloqueado,
.mensaje-restringido {
  display: none;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 15px;
  font-weight: bold;
}

/* 🟢 Éxito */
.mensaje-exito {
  background-color: #e0ffe0;
  color: #006600;
}

/* 🔴 Error de credenciales */
.mensaje-error {
  background-color: #ffe0e0;
  color: #b30000;
}

.mensaje-error a {
  color: #b30000;
  text-decoration: underline;
}

/* 🟠 Usuario bloqueado */
.mensaje-bloqueado {
  background-color: #fff0cc;
  color: #cc6600;
}

.mensaje-bloqueado a {
  color: #cc6600;
  text-decoration: underline;
}

/* 🛑 Modo restringido por vencimiento */
.mensaje-restringido {
  background-color: #990000;
  color: #ffff66;
  -webkit-animation: aparecer 0.5s ease-in-out;
          animation: aparecer 0.5s ease-in-out;
}

/* 🎞️ Animación de entrada */
@-webkit-keyframes aparecer {
  from { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); }
  to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 🧠 Adaptación visual para móviles y pantallas pequeñas */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.login-container {
  min-height: 100vh; /* 🛡️ Ocupa todo el alto visible */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}