/* Carregado depois de app.css. As imagens devem ter fundo transparente. */
.brand img {
    width:76px;
    height:76px;
    flex-shrink:0;
    object-fit:contain;
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
}
.login-shell {
    min-height:100vh;
    min-height:100dvh;
    padding:16px;
}
.login-card {
    width:100%;
    max-width:430px;
    padding:clamp(14px, 2.5vh, 28px) 28px;
}
.login-logo-pair {
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
}
.login-card .login-logo {
    width:clamp(96px, 23vh, 180px);
    height:clamp(96px, 23vh, 180px);
    max-width:100%;
    object-fit:contain;
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    margin:0;
}
.logo-on-dark {display:none;}
[data-bs-theme="dark"] .logo-on-light {display:none;}
[data-bs-theme="dark"] .logo-on-dark {display:block;}
.login-card h1 {font-size:clamp(21px, 4vh, 26px);}
.login-card > .muted {margin-bottom:0;}
.login-card form {margin-top:clamp(12px, 2.5vh, 22px);}
.login-card label {margin-bottom:5px;}
.login-card input {margin-bottom:clamp(10px, 2vh, 16px);}
.login-footnote {margin-top:clamp(10px, 2vh, 18px);}
.login-theme {position:fixed;top:12px;right:12px;z-index:10;}
@media (max-width:900px) {
    .app-header {height:84px;}
    .brand img {width:64px;height:64px;}
}
@media (max-width:560px) {
    .login-card {padding-left:22px;padding-right:22px;}
}
@media (max-height:600px) {
    .login-card {padding-top:14px;padding-bottom:14px;}
    .login-card .login-logo {width:112px;height:112px;}
    .login-logo-pair {margin-bottom:8px;}
    .login-card form {margin-top:12px;}
    .login-footnote {margin-top:10px;}
}