/*
    El panel de la izquierda de Login y ForgotPassword, igual en todas las webs.

    Cada web tiene tres imagenes de marca en wwwroot/Images/Site, siempre con el mismo nombre:

        Fondo.jpg       la portada, lo que se ve antes de validar
        Logo.png        esa misma portada en pequeno; es lo unico que lleva este panel
        LogoSmall.png   la esquina de arriba del menu lateral

    La web que no tiene portada (las de gestion interna) pone aqui su logotipo como Logo.png.
    Por eso la imagen va con scale-down: una portada reducida llena el panel sin recortarse y
    un logotipo pequeno se queda en su tamano en vez de estirarse y salir borroso.
*/

.bg-account-image {
    position: relative;
    padding: 0;
    min-height: 360px;
    border-radius: .5rem 0 0 .5rem;
    overflow: hidden;
    /* La fila centra sus columnas; con esto el panel llega arriba y abajo aunque el
       formulario de al lado sea mas alto. */
    align-self: stretch;
}

.bg-account-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

/*
    Lo que alguna web escribe encima del formulario (el reclamo) y debajo (el pie con el
    telefono). Antes iba metido dentro de la imagen del panel, sin poderse traducir.
*/
.login-reclamo {
    font-size: .95rem;
    font-weight: 600;
    color: var(--app-sidebar-background-color, #212529);
    letter-spacing: .02em;
}

.login-pie {
    font-size: .8rem;
    color: #6c757d;
}

.login-pie a {
    color: var(--app-sidebar-background-color, #212529);
    font-weight: 600;
    text-decoration: none;
}

.login-pie a:hover,
.login-pie a:focus {
    text-decoration: underline;
}