* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background-color: #030F27;
}

img {
    display: block;
}
.img-container {
    display: flex;
    align-items: center; /* Alinea verticalmente */
    justify-content: space-between; /* Separa la primera imagen del resto */
    width: 100%;
}

.img-container img:first-child {
    height: auto;
    max-height: 100px;
}

.img-group {
    display: flex;
    /* gap: 10px; Espacio entre las dos últimas imágenes */
    margin-left: auto; /* Empuja el grupo de imágenes a la derecha */
}

.img-group img {
    height: 73px;
    object-fit: contain;
}



.login {
    width: 100%;
    height: 90vh;
    background-image: url('../../../public/assets/images/fondo.png');
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: end;
}


.container {
    color: #fff;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly; /* Distribuye los 3 elementos con el mismo espacio */
    align-items: center; /* Alinea verticalmente los elementos */
    gap: 1rem;
    padding: 2rem;
    border-radius: 10px;
}

.container .grupo {
    display: flex;
    /* flex-direction: column; */
    gap: 1rem;
}

.container input {
    padding: 18px 12px;
    border-radius: 10px;
    outline: none;
    border: none;
    background-color: #414247;
    color: white;
    transition: box-shadow 0.3s ease;
}

.container input:focus {
    box-shadow: 0 0 8px 1px #DA4167;
}

.container input::placeholder {
    color: #F9F9F9;
}

.btn {
    border: none;
    padding: 18px 12px;
    border-radius: 10px;
    background-color: #DA4167;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.btn:hover {
    background-color: #c63b5e;
}

.alert {
    background-color: #c63b5e;
    padding: 10px;
    border-radius: 10px;
    color: #f4bcca;
    font-size: 14px;
}

.ocultar {
    display: none;
}

/* Estilo para pantallas pequeñas (móviles) */
@media (max-width: 576px) {
    .img-container {
        display: block
    }
    #logo1-1{
        display: none;
    }
    #logo1-2{
        display: none;
    }
    #logo1-3{
        display: none;
    }
    .container{
       
        flex-direction: column;
    }
    .login{
        align-items: center;
    }
    .container .grupo {
        flex-direction: column;
    }
}