.login-centrado{
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    min-height: 100vh; /* Asegura que el body ocupe toda la altura de la ventana */
    margin-top: 15%;
}
.login-body{
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center;   /* Centra verticalmente */
  min-height: 70vh;     /* Asegura que el contenedor ocupe al menos toda la altura de la ventana */
  margin: 0;             /* Quita márgenes por defecto del body */
  
}
/* Contenedor principal del login */
.login-container {
  /*background-color: #ffffff; /* Fondo blanco para el cuadro */
  padding: 30px 40px;
  border-radius: 8px; /* Bordes redondeados */
  border: 1px solid;
  border-color: #ccc;
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
  width: 100%;
  max-width: 500px; /* Ancho máximo del cuadro */
  box-sizing: border-box; /* Asegura que padding no aumente el tamaño total */
}

/* Título del formulario */
.login-container h2 {
  text-align: center;
  color: #333;
  margin-top: 0;
  margin-bottom: 25px;
}

/* Grupos de input (label + input) */
.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block; /* Hace que la etiqueta ocupe su propia línea */
  margin-bottom: 8px;
  color: #555;
  font-weight: bold;
}

.input-group input[type="text"],
.input-group input[type="password"] {
  width: 418px; /* Ocupa todo el ancho disponible */
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* Importante para que el padding no afecte el ancho total */
  font-size: 16px;
}

.input-group input[type="text"]:focus,
.input-group input[type="password"]:focus {
  border-color: #007bff; /* Cambia el color del borde al enfocar */
  outline: none; /* Quita el outline por defecto */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra sutil al enfocar */
}

/* Botón de login */
.btn-login {
  width: 100%;
  padding: 12px 15px;
  background-color: #007bff; /* Color azul primario */
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer; /* Cambia el cursor a una mano */
  transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
}

.btn-login:hover {
  background-color: #0056b3; /* Un azul más oscuro al pasar el mouse */
}

/* Contenedor de enlaces adicionales */
.links {
  text-align: center;
  margin-top: 20px;
}

.links a {
  color: #007bff;
  text-decoration: none; /* Quita el subrayado */
  font-size: 14px;
  margin: 0 10px; /* Espacio entre los enlaces */
  display: block; /* Hace que cada enlace ocupe una línea */
  margin-top: 8px; /* Espacio sobre cada enlace */
}

.links a:hover {
  text-decoration: underline; /* Subraya al pasar el mouse */
}

/* Estilos responsivos opcionales */
@media (max-width: 480px) {
  .login-container {
      padding: 20px;
      max-width: 90%;
  }
}