/**
 * Login com o banner Transitions atrás do cartão.
 *
 * O fundo do banner é um degradê SÓ vertical (toda coluna tem as mesmas cores),
 * então ele é refeito aqui em CSS e a modelo (transitions-modelo.webp, 600x496,
 * logo apagado) e o logo (transitions-logo.png, branco com alpha) viram camadas
 * soltas: a moça encosta na esquerda, o logo ocupa o vão até o cartão e nada
 * emenda torto. As paradas abaixo saem da coluna x=958 do original
 * (assets/img/login/transitions-banner-original.png), erro <= 1 nível por canal.
 *
 * A modelo é ancorada no TOPO porque o cabelo encosta na borda de cima da foto.
 */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: rgb(124 201 218);
}

.login-stage {
    --ls-ar: 1.2097;          /* 600 / 496 */
    --ls-panel: 480px;        /* coluna do cartão (cartão + margens) */
    --ls-brand-min: 340px;    /* vão reservado ao logo antes de cortar a moça */
    --ls-mh: 100%;            /* altura da faixa do banner */
    --ls-mw: clamp(calc(100dvh * .98), calc(100% - var(--ls-panel) - var(--ls-brand-min)), calc(100dvh * var(--ls-ar)));
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-color: rgb(124 201 218);
    background-image: linear-gradient(to bottom,
        rgb(235 192 149) 0%, rgb(235 192 149) 11.52%, rgb(237 185 145) 12.93%, rgb(236 175 141) 14.55%,
        rgb(238 171 139) 15.56%, rgb(237 163 135) 17.17%, rgb(238 152 131) 19.39%, rgb(238 147 128) 20.61%,
        rgb(239 135 123) 23.23%, rgb(240 133 121) 24.24%, rgb(240 127 119) 25.45%, rgb(240 121 117) 27.27%,
        rgb(239 118 117) 28.69%, rgb(233 125 127) 32.53%, rgb(228 129 134) 35.35%, rgb(225 132 138) 37.17%,
        rgb(225 133 141) 37.78%, rgb(222 134 144) 39.19%, rgb(221 134 146) 39.60%, rgb(217 136 151) 41.41%,
        rgb(216 138 154) 42.63%, rgb(211 142 161) 45.45%, rgb(210 142 163) 45.86%, rgb(204 147 172) 49.49%,
        rgb(201 149 176) 50.71%, rgb(200 149 179) 51.52%, rgb(195 152 184) 53.54%, rgb(192 155 186) 55.56%,
        rgb(186 162 190) 59.19%, rgb(182 165 191) 60.81%, rgb(179 167 193) 62.02%, rgb(174 171 196) 64.24%,
        rgb(174 171 196) 64.85%, rgb(172 172 197) 65.25%, rgb(170 174 199) 66.67%, rgb(167 176 201) 67.88%,
        rgb(160 181 203) 70.51%, rgb(156 184 206) 72.12%, rgb(153 186 207) 73.54%, rgb(149 189 208) 74.95%,
        rgb(143 191 211) 77.17%, rgb(141 192 211) 77.98%, rgb(138 193 212) 78.59%, rgb(137 193 213) 78.99%,
        rgb(136 195 213) 79.39%, rgb(130 198 216) 81.41%, rgb(124 201 218) 83.03%, rgb(124 201 218) 100%);
    background-size: 100% var(--ls-mh);
    background-repeat: no-repeat;
}

[data-bs-theme="dark"] .login-stage {
    filter: brightness(.78) saturate(.92);
}

/* A caixa da modelo encolhe pela ESQUERDA (corta cabelo/orelha) para o logo
   caber; o piso de .98 x altura mantém o rosto inteiro (bochecha em x~110). */
.ls-model {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--ls-mh);
    width: var(--ls-mw);
    overflow: hidden;
}

.ls-model svg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 600 / 496;
    display: block;
}

.ls-glare {
    mix-blend-mode: screen;
}

.ls-brand {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ls-mw);
    right: var(--ls-panel);
    container-type: inline-size;
}

.ls-brand img {
    position: absolute;
    left: 50%;
    top: 45%;
    width: min(86cqw, 380px);
    transform: translate(-50%, -50%);
}

@container (max-width: 190px) {
    .ls-brand img { display: none; }
}

/* ---------- conteúdo ---------- */

.login-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.login-topbar {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 12px 16px 0;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(var(--bs-body-bg-rgb), .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.login-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 432px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

.login-card {
    border: 0;
    border-radius: 18px;
    background: rgba(var(--bs-body-bg-rgb), .9);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    box-shadow: 0 30px 70px -30px rgb(84 38 72 / .55);
}

.login-card .card-body {
    padding: 26px 32px 20px;
}

.login-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.login-title img {
    border-radius: 8px;
}

.login-card-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* Desktop: cartão na coluna da direita; a largura bate com --ls-panel. */
@media (min-width: 992px) {
    .login-panel {
        max-width: 400px;
        padding: 12px 0 20px;
        margin: 0 clamp(24px, 4vw, 56px) 0 auto;
    }
}

/* Telas estreitas: o banner vira uma faixa no topo (rosto e óculos à mostra)
   e o cartão sobe por cima do fim dela; a camisa some no teal do fundo. */
@media (max-width: 991.98px) {
    .login-stage {
        --ls-mh: 52vh;
    }

    .ls-model {
        width: 100%;
        -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent);
        mask-image: linear-gradient(to bottom, #000 74%, transparent);
    }

    /* óculos (x~330 de 600) no centro da tela */
    .ls-model svg {
        right: auto;
        left: calc(50% - var(--ls-mh) * .6653);
    }

    .ls-brand {
        display: none;
    }

    .login-panel {
        justify-content: flex-start;
        padding-top: 28vh;
    }
}