/* Telas de acesso (login, esqueci minha senha, dois fatores).
   Telas grandes: card à esquerda, foto ocupando a metade direita.
   Telas menores: a foto vira fundo, coberta por um véu na cor do tema -
   assim a logo certa do tema (clara/escura) e o texto de rodapé continuam
   legíveis sobre ela. */
html, body {
    height: 100%;
    overflow: hidden;
}

body {
    /* Acompanha o tema escolhido. */
    background-color: var(--cx-bg);
}

.login-shell {
    position: relative;
    height: 100%;
}

.login-pane {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
}

.login-photo {
    position: fixed;
    inset: 0;
    background: url('../img/atend1-login-sm.jpg?v=2') 72% 30% / cover no-repeat;
}

.login-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--cx-bg) 80%, transparent);
}

.login-card {
    width: 100%;
    max-width: 380px;
    margin: auto;
}

@media (min-width: 992px) {
    .login-shell {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .login-photo {
        position: relative;
        inset: auto;
        /* Puxado para a direita da foto: sobra o balcão como respiro
           até a borda sem cortar o celular na mão dela. */
        background-position: 88% 30%;
        background-image: url('../img/atend1-login.jpg?v=2');
    }

    .login-photo::after {
        content: none;
    }
}