.login-container {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* background-size: 100% 100% (no cover, no contain) - estira ambos ejes
   independiente para llenar el contenedor exacto, sin recortar nada y sin
   dejar franjas de ningun color. El trade-off es que la imagen se deforma
   (se "aplasta"/"estira") cuando la proporcion del contenedor no coincide
   con la de la imagen - aceptado a proposito en vez de recortar el texto
   "Crecer en HOC" (cover) o dejar franjas (contain). */
.login-bg-panel {
    min-height: 100vh;
    background-color: #1c1c1c;
    background-image: url(../img/login_background.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.login-panel-background {
    min-height: 100vh;
    background: white !important;
    box-shadow: -1px -1px 11px 0px #b1b1b1;
    position: relative;
}

.text-center {
    text-align: center;
}

.login-panel {
    position: relative;
    top: 48%;
    transform: translateY(-50%)
}

/* Debajo del breakpoint "lg" de Bootstrap (992px), .col-lg-8/.col-lg-4 dejan
   de ir lado a lado y se apilan verticalmente. Sin este ajuste, el panel de
   la imagen (vacio, con min-height:100vh) quedaba arriba ocupando toda la
   pantalla y empujaba el formulario de login fuera de vista, sin adaptarse
   al tamaño de pantalla. Se oculta la imagen en pantallas chicas para que el
   formulario se vea directo, sin necesidad de hacer scroll. */
@media (max-width: 991px) {
    .login-bg-panel {
        display: none;
    }
}