@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------------
   Login + cadastro no tema escuro — handoff `handoff_login_portal/LOGIN_CADASTRO.md`.

   Tudo escopado em `.content_login.tema_escuro`, classe que o `gen_login_layout` so
   aplica quando `LAYOUT_V2` esta ligado e a tela e do portal BDR ou de um whitelabel
   (o consigap fica de fora, tem identidade propria). Sem a classe, nenhuma regra daqui
   casa e o `tema_login.css` — o tema claro — segue mandando sozinho.

   Sobre a ordem dos arquivos: o Dash serve os .css de `assets/` em ordem alfabetica, e
   `login_v2` vem **antes** de `tema_login`. Empate de especificidade daria a vitoria ao
   tema claro, e e por isso que todo seletor daqui carrega a classe `.tema_escuro` a mais.
   --------------------------------------------------------------------------- */

.content_login.tema_escuro {
    --lg-fundo: #08130F;
    --lg-superficie: #0E1E19;
    --lg-superficie-hover: #102B24;
    --lg-borda: #18302A;
    --lg-borda-forte: #2C4740;
    --lg-verde: #4CC3A6;
    --lg-verde-hover: #5FD0B4;
    --lg-verde-escuro: #06231D;
    --lg-texto: #FFFFFF;
    --lg-texto-suave: #DCE9E4;
    --lg-mudo: #7C948D;
    --lg-mudo-forte: #5E7A72;
}

/* ------------------------------------------------------------------ pagina */

.content_login.tema_escuro {
    background-color: var(--lg-fundo);
    background-image: radial-gradient(900px 500px at 50% -10%, #0E241D 0%, #08130F 60%);
    font-family: Manrope, sans-serif;
    align-items: center;
    justify-content: center;
    /* Em janela baixa a pagina rola em vez de cortar o card. */
    overflow-y: auto;
    padding: 32px 16px;
}

/* A coluna central. O `.login_container` era o card do tema claro (branco, sombra); aqui
   ele vira so a coluna, e o cartao passa a ser o `.card_login_v2` de dentro. */
.content_login.tema_escuro .login_container {
    width: 100%;
    max-width: 420px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* -------------------------------------------------------------- logo/card */

.content_login.tema_escuro .logo_login_v2 {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
}

.content_login.tema_escuro .logo_login_v2 .logo_img {
    height: 52px;
    width: auto;
    max-height: none;
}

.content_login.tema_escuro .card_login_v2 {
    border: 1px solid var(--lg-borda);
    background: var(--lg-superficie);
    border-radius: 24px;
    padding: 32px 28px;
}

.content_login.tema_escuro .rodape_login_v2 {
    margin-top: 24px;
    text-align: center;
    font: 500 12px Manrope, sans-serif;
    color: var(--lg-mudo-forte);
}

.content_login.tema_escuro .rodape_login_v2 a {
    color: var(--lg-mudo);
    text-decoration: none;
}

/* O divisor do tema claro nao existe no desenho novo. */
.content_login.tema_escuro hr {
    display: none;
}

/* ------------------------------------------------------------------ titulo */

.content_login.tema_escuro .card_title_portal {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 6px !important;
    justify-content: flex-start;
}

.content_login.tema_escuro .card_title_portal label {
    font: 800 22px Manrope, sans-serif;
    color: var(--lg-texto);
}

/* "Nao possui uma conta? Clique aqui!" / "Ja tem uma conta?" */
.content_login.tema_escuro #container_btn_create_login,
.content_login.tema_escuro #container_back_create_login {
    justify-content: flex-start !important;
    margin-bottom: 22px !important;
    font: 500 13.5px Manrope, sans-serif;
    color: var(--lg-mudo);
}

.content_login.tema_escuro .blue {
    color: var(--lg-verde);
    font-weight: 700;
}

/* ------------------------------------------------------------------ campos */

/* Rotulo acima do campo, em caixa alta.

   O portal usa `dbc.FormFloating`, que rende `<input>` seguido de `<label>` e faz a label
   flutuar por cima. `column-reverse` sobe a label sem trocar a ordem no DOM — assim o
   `FormFloating` continua sendo o componente de sempre e nenhuma marcacao muda. */
.content_login.tema_escuro .form-floating {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
}

.content_login.tema_escuro .form-floating > label {
    position: static;
    height: auto;
    padding: 0;
    border: none;
    transform: none !important;
    opacity: 1 !important;
    font: 700 12px Manrope, sans-serif;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--lg-verde);
    margin-bottom: 8px;
    pointer-events: auto;
}

.content_login.tema_escuro .form-control,
.content_login.tema_escuro .form-floating > .form-control {
    height: 52px;
    min-height: 52px;
    border-radius: 14px;
    border: 1px solid var(--lg-borda);
    background: var(--lg-fundo);
    color: var(--lg-texto);
    font: 600 14px Manrope, sans-serif;
    padding: 0 16px;
    line-height: 52px;
}

.content_login.tema_escuro .form-control:focus {
    border-color: var(--lg-verde);
    box-shadow: none;
    background: var(--lg-fundo);
    color: var(--lg-texto);
}

.content_login.tema_escuro .form-control::placeholder {
    color: var(--lg-mudo-forte);
}

/* O Bootstrap desenha um bloco branco no `label::after` para mascarar a borda por tras da
   label flutuante, e so o mostra com o campo preenchido. Com o rotulo acima ele nao
   mascara nada — vira uma faixa branca solta em cima do campo, e aparece justamente
   quando o Chrome preenche sozinho. */
.content_login.tema_escuro .form-floating > label::after {
    display: none;
}

/* Preenchimento automatico do Chrome.

   O `background-color` nao vence o do navegador; a sombra interna gigante e o jeito
   conhecido de cobrir a area toda. `-webkit-text-fill-color` porque o `color` tambem e
   sobrescrito, e a transicao absurda porque o Chrome reaplica o proprio fundo depois de
   um instante — adiar por 100000s faz a sombra continuar valendo. */
.content_login.tema_escuro .form-control:-webkit-autofill,
.content_login.tema_escuro .form-control:-webkit-autofill:hover,
.content_login.tema_escuro .form-control:-webkit-autofill:focus,
.content_login.tema_escuro .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--lg-fundo) inset;
    box-shadow: 0 0 0 1000px var(--lg-fundo) inset;
    -webkit-text-fill-color: var(--lg-texto);
    caret-color: var(--lg-texto);
    border: 1px solid var(--lg-borda);
    transition: background-color 100000s ease-in-out 0s;
}

.content_login.tema_escuro .form-control:-webkit-autofill:focus {
    border-color: var(--lg-verde);
}

/* O `is-valid`/`is-invalid` do Bootstrap desenha um icone dentro do campo que, com
   `padding: 0 16px`, encosta no texto. So a borda basta. */
.content_login.tema_escuro .form-control.is-valid,
.content_login.tema_escuro .form-control.is-invalid {
    background-image: none;
    padding-right: 16px;
}

.content_login.tema_escuro .form-control.is-valid {
    border-color: var(--lg-verde);
}

/* ------------------------------------------------------- mostrar/ocultar */

.content_login.tema_escuro .campo_senha_login {
    position: relative;
}

.content_login.tema_escuro .btn_olho_login {
    position: absolute;
    right: 6px;
    /* 6px a partir da base do campo de 52px, que fica embaixo por causa do
       `column-reverse`. */
    bottom: 6px;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lg-mudo);
    cursor: pointer;
}

.content_login.tema_escuro .btn_olho_login:hover {
    background: var(--lg-superficie-hover);
}

/* No tema claro o botao existe no DOM (o callback precisa do Output) mas nao aparece. */
.content_login:not(.tema_escuro) .btn_olho_login {
    display: none;
}

/* ------------------------------------------------------------------ botoes */

.content_login.tema_escuro .btn-primary {
    --bs-btn-bg: var(--lg-verde);
    --bs-btn-border-color: var(--lg-verde);
    --bs-btn-color: var(--lg-verde-escuro);
    --bs-btn-hover-bg: var(--lg-verde-hover);
    --bs-btn-hover-border-color: var(--lg-verde-hover);
    --bs-btn-hover-color: var(--lg-verde-escuro);
    --bs-btn-active-bg: var(--lg-verde-hover);
    --bs-btn-active-color: var(--lg-verde-escuro);
    --bs-btn-disabled-bg: var(--lg-borda-forte);
    --bs-btn-disabled-border-color: var(--lg-borda-forte);
    --bs-btn-disabled-color: var(--lg-mudo);
    height: 56px;
    border-radius: 16px;
    font: 800 16px Manrope, sans-serif;
}

.content_login.tema_escuro .mantine-Button-root {
    height: 56px;
    border-radius: 16px;
    font: 800 16px Manrope, sans-serif;
    color: var(--lg-verde-escuro);
}

/* "Voltar" e "Reenviar codigo" — o `color='secondary'` do dbc. */
.content_login.tema_escuro .btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--lg-borda-forte);
    --bs-btn-color: var(--lg-texto-suave);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--lg-verde);
    --bs-btn-hover-color: var(--lg-texto-suave);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--lg-borda);
    --bs-btn-disabled-color: var(--lg-mudo-forte);
    height: 52px;
    border-width: 1.5px;
    border-radius: 16px;
    font: 800 15px Manrope, sans-serif;
}

/* "Esqueceu sua senha?" */
.content_login.tema_escuro .link,
.content_login.tema_escuro #btn_forgot_pass {
    display: block;
    text-align: center;
    margin-top: 16px;
    font: 600 13px Manrope, sans-serif;
    color: var(--lg-verde);
    text-decoration: none;
}

/* ------------------------------------------------------- pips do cadastro */

.content_login.tema_escuro .pips_cadastro {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}

.content_login.tema_escuro .pip_cadastro {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--lg-borda);
}

.content_login.tema_escuro .pip_cadastro.cheio {
    background: var(--lg-verde);
}

/* No tema claro a contagem fica so no texto do `passo_create_login`. */
.content_login:not(.tema_escuro) .pips_cadastro {
    display: none;
}

.content_login.tema_escuro #passo_create_login {
    font: 700 12px Manrope, sans-serif;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-style: normal;
    color: var(--lg-mudo-forte);
    text-align: right;
    margin-bottom: 10px !important;
}

/* --------------------------------------------------- checklist de senha */

.content_login.tema_escuro #regras_senha_create_login {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 18px;
}

.content_login.tema_escuro .regra_senha {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 12px Manrope, sans-serif;
    color: var(--lg-mudo-forte);
}

.content_login.tema_escuro .regra_senha.cumprida {
    color: var(--lg-texto-suave);
}

.content_login.tema_escuro .bolinha_regra {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--lg-borda-forte);
    display: flex;
    align-items: center;
    justify-content: center;
}

.content_login.tema_escuro .bolinha_regra.cumprida {
    background: var(--lg-verde);
    border-color: var(--lg-verde);
    color: var(--lg-verde-escuro);
}

.content_login.tema_escuro .regra_senha label {
    margin: 0;
    font-size: 12px;
}

/* Marcacao compartilhada com o tema claro: la a bolinha vira so um ponto discreto. */
.content_login:not(.tema_escuro) .regra_senha {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #818080;
}

.content_login:not(.tema_escuro) .regra_senha.cumprida {
    color: #54bbab;
}

.content_login:not(.tema_escuro) .bolinha_regra {
    width: 13px;
    height: 13px;
    flex: none;
    border-radius: 50%;
    border: 1px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content_login:not(.tema_escuro) .bolinha_regra.cumprida {
    background: currentColor;
    color: #fff;
}

/* Nota do SHA-256 */
.content_login.tema_escuro .italic.smaller {
    font: 500 12px Manrope, sans-serif;
    font-style: normal;
    color: var(--lg-mudo);
}

/* --------------------------------------------------------------- dropzones */

.content_login.tema_escuro .upload_import {
    border: 1.5px dashed var(--lg-borda-forte);
    background: var(--lg-fundo);
    border-radius: 16px;
    padding: 22px 16px;
    color: var(--lg-texto-suave);
    font: 700 13.5px Manrope, sans-serif;
    cursor: pointer;
}

.content_login.tema_escuro .upload_import:hover {
    border-color: var(--lg-verde);
}

.content_login.tema_escuro .upload_import svg,
.content_login.tema_escuro .upload_import .iconify {
    color: var(--lg-verde);
}

/* -------------------------------------------------------- etapa do codigo */

.content_login.tema_escuro .mantine-PinInput-input {
    background: var(--lg-fundo);
    border-color: var(--lg-borda);
    color: var(--lg-texto);
    font: 700 16px Manrope, sans-serif;
}

.content_login.tema_escuro .mantine-PinInput-input:focus {
    border-color: var(--lg-verde);
}

/* ------------------------------------------------------------------ textos */

.content_login.tema_escuro,
.content_login.tema_escuro label,
.content_login.tema_escuro .block {
    color: var(--lg-texto-suave);
}

.content_login.tema_escuro .bold.block {
    color: var(--lg-texto);
    font: 800 22px Manrope, sans-serif;
}

.content_login.tema_escuro .firebrick {
    color: #E8705F !important;
}