body {
    background: linear-gradient(to right, #ffffff  , #ffffff  , #ffffff  ); /* Degradado de verde a amarillo a anaranjado */
    height: 100vh; /* Asegura que el body ocupe toda la altura de la ventana */
    display: flex; /* Utiliza flexbox para centrar el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    margin: 0; /* Elimina el margen por defecto del body */
}
.login-container {
    max-width: 800px; /* Ancho máximo del contenedor */
    width: 90%; /* Ancho del contenedor en dispositivos móviles */
    padding: 20px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); /* Sombra más pronunciada */
}
.logo {
    display: block;
    margin: 0 auto; /* Centra la imagen */
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}
.form-group {
    position: relative; /* Para posicionar el ícono */
}
.form-group i {
    position: absolute;
    left: 10px; /* Espacio desde la izquierda */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajusta la posición vertical */
    color: #6c757d; /* Color del ícono */
}
.form-control {
    padding-left: 30px; /* Espacio para el ícono */
}