/* --- Fondo de toda la pantalla --- */
.fondo-container {
    position: fixed; /* que quede detrás de todo */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/login/login2.jpg) !important;
    background-size: cover; /* ocupa toda la pantalla */
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; /* detrás del contenido */
}

/* --- Capa de opacidad encima de la imagen --- */
.fondo-opacity {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(125, 68, 82, 0.3); /* oscurece o aclara */
    /*    background-color: rgba(200, 205, 170, 0.7)*/
    /* Pregrado verde */
    /*    background-color: rgba(69, 74, 43, 0.6)*/
    background-color: rgba(1, 59, 117, 0.6)
}

.header-login {
    /*    background-color: rgba(125, 68, 82, 0.9);*/
    /*    background-color: rgba(154, 174, 90, 0.9);*/
    /* Pregrado verde */
    /*  background-color: rgb(255, 255, 255);*/
    background-color: rgb(255, 255, 255);
    height: 8%;
    padding: 1rem 2rem; /* mantiene márgenes internos iguales */
    display: flex;
    justify-content: center; /* centra todo el bloque de logos */
    align-items: center;
}

/* Contenedor de los logos */
.logo-img {
    display: flex;
    justify-content: space-between; /* uno a la izquierda y otro a la derecha */
    align-items: center;
    width: 100%;
    max-width: 900px; /* evita que los logos se peguen a los bordes en pantallas grandes */
}

/* Logo izquierdo */
.logo {
    width: 220px;
    height: auto;
}

/* Logo derecho */
.logo2 {
    width: 50px;
    height: auto;
}

/* --- Adaptación Responsive --- */
@media (max-width: 1024px) {
    .logo {
        width: 200px;
    }

    .logo2 {
        width: 40px;
    }
}

@media (max-width: 768px) {
    .logo {
        width: 200px;
    }

    .logo2 {
        width: 80px;
    }
}

@media (max-width: 480px) {
    .logo {
        width: 180px;
    }

    .logo2 {
        width: 40px;
    }
}


.footer-login {
    /*    background-color: rgba(125, 68, 82, 0.9);*/
    /*    background-color: rgba(154, 174, 90, 0.9);*/
    /* Pregrado verde */
    /*    background-color: rgba(20, 20, 20, 0.9);*/
    background-color: rgb(9, 56, 104, 0.9);
    color: rgb(245, 252, 254);
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
    /*    border-top: 2px solid #7d4452;
*/ width: 100%;
}

@media only screen and (max-width: 920px) {
    .header-login,
    .footer-login {
        display: none !important;
    }
}

.button-submit:hover {
    color: white !important;
    background-color: #3B82C4;
}