/* Contenedor principal del logo en el login */
body.login-page .login-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
}

/* Ajuste específico para la imagen del logo 
body.login-page .login-logo img {
    width: 600px !important;      /* Tamaño base para escritorio */
    max-width: 100% !important;    /* Asegura que no se desborde en móviles 
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Ajuste responsivo para celulares */
@media (max-width: 576px) {
    body.login-page .login-logo img {
        width: 500px !important; /* Más compacto en el celular */
    }
}
/* Ocultar el logo oscuro si no es necesario */
body.login-page .login-logo img.logo-dark {
    display: none !important;
}

/* 1. Reducimos el espacio debajo del logo */
body.login-page .login-logo {
    margin-bottom: -30px !important; /* Estaba en 25px, esto los acerca mucho más */
}

/* 2. Opcional: Si el recuadro de login tiene mucho margen arriba, lo subimos */
body.login-page .login-box {
    margin-top: -80px !important; /* Ajusta esto si aún queda mucho espacio */
    padding-top: 0 !important;
}


body.login-page .login-logo {
    display: flex !important;
    flex-direction: column !important; /* Mantiene la columna si hubiera más elementos */
    justify-content: center !important; /* Centrado vertical si el contenedor tuviera altura definida */
    align-items: center !important;    /* Centrado horizontal (asegurado) */
    min-height: 150px !important;      /* Dale una altura mínima para ver el efecto */
}

/* Ajuste de tamaño compacto */
body.login-page .login-logo img {
    width: 100% !important;        
    max-width: 800px !important;   /* BAJÁ ESTE NÚMERO para achicarlo (ej. 150px, 180px) */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}