/* ---------------------------------------------------------------------------
   Simulador de antecipacao no tema novo — handoff `SIMULADOR_PORTAL.md`.

   Veste o que o `_layout_antecipacao_v2` (`layouts/erp/antecipacoes.py`) monta. Todas as
   classes daqui nascem naquele ramo, que so roda com a `LAYOUT_V2` ligada — por isso este
   arquivo **nao** precisa do `:root:has(#sidebar.sidebar_v2)` que prefixa o
   `tema_conteudo_v2.css`: la o alvo sao classes antigas, que existem nos dois temas; aqui
   nao ha o que desambiguar.

   Nome com o prefixo `tema_` de proposito: o Dash carrega os assets em ordem alfabetica, e
   `tema_simulador_v2.css` vem depois de `tema_conteudo_v2.css`, `mobile.css`, `style.css`
   e `custom1.css`. E o que permite vencer empates de especificidade com todos eles.

   Tres amarras com o Python, que nao dao para ler daqui:

   1. `div_credenciadora_...` e `div_bandeira_...` tem o `className` **reescrito** pelo
      `load_options_simulador` (vira `small_margin_bottom` ou `hidden`). Nenhuma regra
      pendura estilo neles: as classes vivem nos filhos, e o divisor entre secoes e
      posicional (`> div ~ div`), nao por classe.
   2. Varios blocos recebem o atributo `hidden` por callback. Todo bloco que este arquivo
      transforma em `flex` precisa do seu `[hidden] { display: none }` — senao o `display`
      vence a regra do navegador para `[hidden]` e o bloco reaparece.
   3. O painel de juros esta na coluna da direita, mas some junto com o
      `div_automatico_...`, que esta na da esquerda. Quem costura isso e a regra `:has()`
      la embaixo.

   O verde aqui e o `--v-verde-escuro` (#2E8B6F) do `tema_conteudo_v2.css`, o mesmo da
   tabela e das abas. Os botoes `dmc` ficam de fora: eles puxam o verde do
   `MantineProvider` (#2E8B76), visualmente o mesmo, e mexer neles por CSS quebraria os
   estados (hover, disabled) que o Mantine gera sozinho.
   --------------------------------------------------------------------------- */

/* ============================================================ ESQUELETO */

.titulo_simulador_v2 {
    display: block;
    font: 800 20px Manrope, sans-serif;
    color: var(--v-tab-texto);
    letter-spacing: -.3px;
}

.wrap_simulador_v2 {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.coluna_simulador_v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
    /* Versao cliente: a coluna e a unica coisa na tela, e linha de formulario larga demais
       cansa de ler. Com o painel de juros do lado o teto sai (regra seguinte). */
    max-width: 760px;
}

/* O painel de juros so existe para adm — para o cliente ele vem com `hidden` e nao casa
   aqui, que e como a mesma tela serve as duas versoes sem o Python saber de largura. */
.wrap_simulador_v2:has(.painel_juros_v2) .coluna_simulador_v2 {
    max-width: none;
    min-width: 460px;
}

.cartao_v2 {
    background: #fff;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    padding: 20px 22px;
}

.grupo_automatico_v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.grupo_automatico_v2[hidden] {
    display: none;
}

/* ============================================================ SECAO E ROTULO */

.cabecalho_secao_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.rotulo_secao_v2 {
    margin: 0;
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.acoes_secao_v2 {
    display: flex;
    gap: 12px;
}

.acao_secao_v2 {
    margin: 0;
    font: 600 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    cursor: pointer;
}

.acao_secao_v2:hover {
    text-decoration: underline;
}

.acao_secundaria_v2 {
    color: var(--v-tab-texto-sub);
}

/* Divisor entre secoes vizinhas — no cabecalho da segunda, e nao um `<hr>` proprio, porque
   as secoes de credenciadora e bandeira somem sozinhas quando so ha uma opcao e um `<hr>`
   solto sobreviveria a elas. O `:not(.hidden)` dos dois lados e o que garante que a linha
   so aparece entre duas secoes de fato visiveis. */
.cartao_v2 > div:not(.hidden) ~ div:not(.hidden) > .cabecalho_secao_v2,
.painel_juros_v2 > div:not(.hidden) ~ div:not(.hidden) > .cabecalho_secao_v2 {
    border-top: 1px solid var(--v-tab-divisoria);
    margin-top: 16px;
    padding-top: 16px;
}

/* ============================================================ RADIOS E CHIPS

   Todos saem de `dbc.RadioItems` / `dbc.Checklist`, que rendem a marcacao do Bootstrap:

       div.form-check.form-check-inline
         input.form-check-input
         label.form-check-label

   O Bootstrap posiciona o input com `float: left` + `margin-left: -1.5em` dentro de um
   `padding-left: 1.5em`. Tudo aqui zera isso e usa flex, que e o que permite o input ficar
   ao lado de um rotulo de duas linhas (o cartao de modo) sem calculo de recuo. */

.radios_v2 .form-check,
.chips_v2 .form-check {
    padding-left: 0;
    margin: 0;
}

.radios_v2 .form-check-input,
.chips_v2 .form-check-input {
    float: none;
    margin: 0;
    cursor: pointer;
}

.radios_v2 .form-check-label,
.chips_v2 .form-check-label {
    margin: 0;
    cursor: pointer;
}

/* ---- originador ---- */

.radios_originador_v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
}

.radios_originador_v2 .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radios_originador_v2 .form-check-input[type=radio] {
    width: 19px;
    height: 19px;
    flex: none;
    border: 1.5px solid var(--v-borda-controle);
}

/* O Bootstrap marca o radio pintando o fundo inteiro e desenhando um ponto branco por
   cima. O tema quer o contrario: anel verde, miolo verde, fundo branco. Dai o gradiente no
   lugar do `--bs-form-check-bg-image`.

   O `:root:has(...)` aqui e nas outras duas regras de radio marcado nao e para prender a
   flag — as classes ja fazem isso. E so especificidade: o `tema_conteudo_v2.css` pinta
   `.form-check-input:checked` de verde a partir de `:root:has(#sidebar.sidebar_v2)`, e um
   `:has()` vale o que vale o seletor mais especifico de dentro dele — o `#sidebar` conta
   como id. Sem o mesmo prefixo, o fundo verde de la vence o branco daqui e o miolo verde
   desaparece dentro dele. */
:root:has(#sidebar.sidebar_v2) .radios_originador_v2 .form-check-input:checked[type=radio] {
    border-color: var(--v-verde-escuro);
    background-color: #fff;
    background-image: radial-gradient(circle, var(--v-verde-escuro) 0 4.5px, transparent 4.5px);
}

.radios_originador_v2 .form-check-label {
    font: 700 14px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.id_originador_v2 {
    font-weight: 500;
    color: var(--v-tab-texto-sub);
}

/* ---- modo de simulacao (cartoes) ---- */

.cartoes_modo_v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cartoes_modo_v2 .form-check {
    flex: 1 1 220px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid var(--v-borda-input);
    background: #fff;
    border-radius: 12px;
    padding: 13px 15px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

/* Marcado a borda engorda meio pixel; o padding devolve os mesmos 0.5px para o cartao nao
   pular de tamanho ao trocar de modo. */
.cartoes_modo_v2 .form-check:has(.form-check-input:checked) {
    border: 1.5px solid var(--v-verde-escuro);
    background: var(--v-tint);
    padding: 12.5px 14.5px;
}

.cartoes_modo_v2 .form-check-input[type=radio] {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: 1px;
    border: 1.5px solid var(--v-borda-controle);
}

:root:has(#sidebar.sidebar_v2) .cartoes_modo_v2 .form-check-input:checked[type=radio] {
    border-color: var(--v-verde-escuro);
    background-color: #fff;
    background-image: radial-gradient(circle, var(--v-verde-escuro) 0 4px, transparent 4px);
}

.cartoes_modo_v2 .form-check-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.titulo_modo_v2 {
    font: 700 13.5px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.desc_modo_v2 {
    font: 500 12px/1.5 Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* ---- credenciadora e bandeiras (chips) ---- */

.chips_v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Um pouco menores que os 8x14 do handoff (com o rotulo em 12.5 e o quadradinho em 14):
   sao filtros, e no desenho original disputavam presenca com os cartoes de modo, que sao a
   escolha de fato. No estreito eles voltam a crescer — ver o fim do arquivo. */
.chips_v2 .form-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--v-borda-input);
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.chips_v2 .form-check:has(.form-check-input:checked) {
    border: 1.5px solid var(--v-verde-escuro);
    background: var(--v-tint);
    padding: 5.5px 11.5px;
}

.chips_v2 .form-check:has(.form-check-input:disabled) {
    opacity: .6;
    cursor: default;
}

.chips_v2 .form-check-input[type=checkbox] {
    width: 14px;
    height: 14px;
    flex: none;
    border: 1.5px solid var(--v-borda-controle);
    border-radius: 4px;
}

/* O tique em si continua sendo o SVG branco do Bootstrap; so o fundo muda. */
.chips_v2 .form-check-input:checked[type=checkbox] {
    background-color: var(--v-verde-escuro);
    border-color: var(--v-verde-escuro);
}

.chips_v2 .form-check-label {
    font: 600 12.5px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

/* ============================================================ VALOR SOLICITADO */

.linha_valor_v2 {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.input_valor_v2 {
    flex: 1;
    min-width: 180px;
}

.input_valor_v2 input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--v-borda-input);
    border-radius: 12px;
    font: 700 15px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.input_valor_v2 input:focus,
.input_valor_v2 input:focus-within {
    border-color: var(--v-verde-escuro);
}

.btn_valor_total_v2 {
    flex: none;
    height: 46px;
    border-radius: 12px;
    border-width: 1.5px;
    font: 700 13.5px Manrope, sans-serif;
}

/* Substitui o aviso em vermelho italico da versao antiga: a frase e informativa, nao um
   erro, e vermelho num formulario que ainda nao foi enviado le como problema. */
.nota_v2 {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
}

.ponto_nota_v2 {
    width: 6px;
    height: 6px;
    flex: none;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--v-verde-escuro);
}

.nota_v2 label {
    margin: 0;
    font: 500 12.5px/1.4 Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* ============================================================ ESCOLHER URS */

.cartao_urs_v2 {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.cartao_urs_v2[hidden] {
    display: none;
}

.btn_escolher_ur_v2 {
    height: 46px;
    border-radius: 12px;
    border-width: 1.5px;
    font: 700 13.5px Manrope, sans-serif;
}

.cartao_urs_v2 .input-group {
    width: auto;
    max-width: 20rem;
}

/* ============================================================ CONTA */

.linha_conta_v2 {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.dados_conta_v2 {
    flex: 1;
    min-width: 0;
}

/* Icone real do banco (`assets/img/bancos_img/{codigo}.svg`), e nao o monograma do mock:
   e a unica coisa na linha que o usuario reconhece de relance. A altura vem inline do
   `get_img_banco`, que e onde a imagem e montada; aqui so entra o que ele nao sabe. */
.dados_conta_v2 .icone_banco_conta {
    width: 46px;
    border-radius: 14px;
    object-fit: contain;
}

/* As classes saem do `gen_conta_layout` (`utils/erp/utils_agendas.py`). O escopo em
   `.dados_conta_v2` e de proposito: aquela funcao serve outras sete telas, e a mudanca de
   estrutura (duas linhas em vez de tres) vale para todas, mas a tipografia do handoff so
   vale aqui. */
.dados_conta_v2 .linha_banco_conta {
    margin: 0;
    font: 500 14px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

.dados_conta_v2 .nome_banco_conta {
    font-weight: 700;
    color: var(--v-tab-texto);
}

.dados_conta_v2 .titular_conta {
    margin: 3px 0 0;
    font: 500 12.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* Continua sendo um `<label>` com `n_clicks`, e nao um botao: trocar o componente trocaria
   a prop que o `toggle_collapse` escuta. */
.btn_alterar_conta_v2 {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 38px;
    padding: 0 16px;
    margin: 0;
    border: 1.5px solid var(--v-borda-input);
    border-radius: 10px;
    background: transparent;
    font: 700 12.5px Manrope, sans-serif;
    color: var(--v-tab-texto);
    cursor: pointer;
    transition: border-color .15s;
}

.btn_alterar_conta_v2:hover {
    border-color: var(--v-verde-escuro);
}

/* O `load_options_simulador` esconde este botao quando so ha uma conta cadastrada. Sem
   esta linha o `inline-flex` acima venceria o `[hidden]` do navegador. */
.btn_alterar_conta_v2[hidden] {
    display: none;
}

.linha_trocar_conta_v2.collapse.show,
.linha_trocar_conta_v2.collapsing {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.select_conta_v2 {
    flex: 1;
    min-width: 220px;
    height: 46px;
    border: 1px solid var(--v-borda-input);
    border-radius: 12px;
}

.select_conta_v2:focus {
    border-color: var(--v-verde-escuro);
    box-shadow: none;
}

/* ============================================================ PAINEL DE JUROS

   So adm: para o cliente o Python manda `className='hidden'` no lugar de
   `painel_juros_v2`. E a mesma tela nas duas versoes. */

.painel_juros_v2 {
    width: 280px;
    flex: none;
    box-sizing: border-box;
    background: var(--v-tab-hover);
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    padding: 20px 22px;
}

/* O painel esta na coluna da direita, mas pertence ao modo "Padrão": quando o modo vira
   "Escolher URs" o callback poe `hidden` no `div_automatico_...`, la na coluna da
   esquerda, e o painel tem de sumir junto. Era o que acontecia sozinho no layout antigo,
   em que ele vivia dentro daquele div. */
.wrap_simulador_v2:has(.grupo_automatico_v2[hidden]) .painel_juros_v2 {
    display: none;
}

.grupo_juros_v2 input.form-control {
    height: 46px;
    border: 1px solid var(--v-borda-input);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    font: 700 15px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.grupo_juros_v2 input.form-control:focus {
    border-color: var(--v-verde-escuro);
    box-shadow: none;
}

.grupo_juros_v2 .input-group-text {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--v-borda-input);
    border-radius: 0 12px 12px 0;
    background: var(--v-tab-cabecalho);
    color: var(--v-texto-inativo);
    font: 700 13px Manrope, sans-serif;
}

.check_custom_v2.form-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 0;
    margin: 16px 0 0;
}

.check_custom_v2 .form-check-input {
    float: none;
    margin: 0;
    width: 17px;
    height: 17px;
    flex: none;
    border: 1.5px solid var(--v-borda-controle);
    border-radius: 5px;
    cursor: pointer;
}

.check_custom_v2 .form-check-input:checked {
    background-color: var(--v-verde-escuro);
    border-color: var(--v-verde-escuro);
}

.check_custom_v2 .form-check-label {
    margin: 0;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
    cursor: pointer;
}

/* DC / DU como segmentado: o radio some e quem veste o estado e o proprio rotulo, que
   assim ocupa o botao inteiro como area de clique. */
.segmentado_v2 {
    display: flex;
    gap: 8px;
}

.segmentado_v2 .form-check {
    flex: 1;
    position: relative;
    padding: 0;
    margin: 0;
}

.segmentado_v2 .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmentado_v2 .form-check-label {
    display: block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    border: 1px solid var(--v-borda-input);
    border-radius: 10px;
    background: #fff;
    color: var(--v-texto-inativo);
    font: 600 13px Manrope, sans-serif;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.segmentado_v2 .form-check:has(.form-check-input:checked) .form-check-label {
    background: var(--v-verde-escuro);
    border-color: var(--v-verde-escuro);
    color: #fff;
    font-weight: 800;
}

.legenda_v2 {
    display: block;
    margin-top: 14px;
    font: 500 12px/1.5 Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* ============================================================ ACOES DA TELA

   Ficam fora do `_layout_antecipacao_v2` (moram no `gen_div_solicitacao`), porque o botao
   e um so para todas as antecipacoes que o adm empilhar na tela. */

.acoes_simular_v2 {
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 760px;
}

/* Mesmo teto da coluna de cartoes, e some pelo mesmo motivo — so que o painel de juros
   nao e irmao daqui, entao o `:has()` sobe ate o container da tela. */
#container_simular_disp_agendas:has(.painel_juros_v2) .acoes_simular_v2 {
    max-width: none;
}

.acoes_simular_v2 #ok_simular_disp_agendas {
    height: 52px;
    border-radius: 14px;
    font: 800 15px Manrope, sans-serif;
}

.btn_add_new_v2 {
    flex: none;
}

/* ============================================================ ESTREITO */

@media (max-width: 900px) {
    /* Na versao adm o painel desce para baixo da coluna em vez de espremer as duas. */
    .wrap_simulador_v2:has(.painel_juros_v2) .coluna_simulador_v2 {
        min-width: 0;
    }

    .painel_juros_v2 {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .cartao_v2,
    .painel_juros_v2 {
        padding: 16px;
    }

    /* Empilhado, cada cartao de modo ocupa a linha inteira em vez de virar uma tira. */
    .cartoes_modo_v2 .form-check {
        flex-basis: 100%;
    }

    .btn_valor_total_v2,
    .input_valor_v2 {
        width: 100%;
        flex: none;
    }

    /* No desktop o chip encolheu para nao competir com os cartoes de modo; no toque isso
       nao vale, porque a pilula inteira e o alvo do dedo. Volta a ~38px de altura. */
    .chips_v2 .form-check {
        padding: 10px 13px;
    }

    .chips_v2 .form-check:has(.form-check-input:checked) {
        padding: 9.5px 12.5px;
    }
}

/* ============================================================ RESULTADO / CHECKOUT

   Handoff `RESULTADO_SIMULACAO.md`. Veste o `_layout_resultado_v2`
   (`utils/erp/utils_agendas.py`) e o cartao de pagamento, que vem do callback
   `load_div_conta` (`callbacks/erp/callbacks_disp_agendas.py`).

   A tela vive dentro de um `dbc.Modal` com `fullscreen=True`, entao nao ha sidebar aqui —
   por isso o cabecalho escuro proprio, que no resto do portal seria redundante. */

.pagina_checkout_v2 {
    background: #fff;
    min-height: 100%;
    font-family: Manrope, sans-serif;
}

.header_checkout_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    background: #08130F;
}

.titulo_checkout_v2 {
    font: 800 16px Manrope, sans-serif;
    color: #fff;
    letter-spacing: -.2px;
}

.acoes_checkout_v2 {
    display: flex;
    align-items: center;
    gap: 18px;
}

.logo_checkout_v2 {
    height: 24px;
    width: auto;
}

.coluna_checkout_v2 {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 28px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.titulo_resultado_v2 {
    font: 800 20px Manrope, sans-serif;
    color: var(--v-tab-texto);
    letter-spacing: -.3px;
}

/* ---- interruptor "ver como cliente" ----

   `dbc.Switch`, e nao um `dmc.Switch`: o callback `toggle_resumos` le a prop `value`, que
   e do Bootstrap; o do Mantine usa `checked` e quebraria a ligacao. */

.switch_cliente_v2.form-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 0;
    margin: 0;
    cursor: pointer;
}

.switch_cliente_v2 .form-check-input {
    float: none;
    margin: 0;
    width: 30px;
    height: 18px;
    flex: none;
    border: 0;
    border-radius: 12px;
    background-color: #2C4740;
    cursor: pointer;
    transition: background-color .15s;
}

/* A bolinha do Bootstrap e um SVG em `--bs-form-switch-bg`, cinza no estado desligado.
   Aqui ela e branca nos dois estados: o que muda e o trilho. */
.switch_cliente_v2 .form-check-input,
.switch_cliente_v2 .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-image: var(--bs-form-switch-bg);
}

.switch_cliente_v2 .form-check-input:checked {
    background-color: #4CC3A6;
}

.switch_cliente_v2 .form-check-input:focus {
    box-shadow: none;
}

.switch_cliente_v2 .form-check-label {
    margin: 0;
    font: 700 12.5px Manrope, sans-serif;
    color: #7C948D;
    cursor: pointer;
}

/* ---- hero ---- */

.hero_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 20px;
    margin-bottom: 14px;
    background: var(--v-tint);
    border: 1px solid var(--v-borda-tint);
    border-radius: 10px;
}

.hero_direita_v2 {
    text-align: right;
}

.rotulo_hero_v2 {
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.valor_hero_v2 {
    margin-top: 4px;
    font: 800 30px Manrope, sans-serif;
    color: var(--v-tab-texto);
    letter-spacing: -.8px;
}

.valor_hero_sec_v2 {
    margin-top: 4px;
    font: 800 18px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.custo_hero_v2 {
    margin-top: 2px;
    font: 500 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* ---- grade de indicadores ---- */

.grade_indicadores_v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.grade_indicadores_v2 + .grade_indicadores_v2 {
    margin-top: 14px;
}

.grade_indicadores_v2[hidden] {
    display: none;
}

.cartao_indicador_v2 {
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
    padding: 14px 16px;
}

/* Tintado = so o adm ve. E o unico aviso na tela de que aquele numero nao vai para o
   cliente, entao o contraste com o cartao branco ao lado precisa ser visivel. */
.indicador_interno_v2 {
    border-color: var(--v-borda-tint);
    background: var(--v-tab-hover);
}

.rotulo_indicador_v2 {
    font: 700 11.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.indicador_interno_v2 .rotulo_indicador_v2 {
    color: var(--v-verde-escuro);
}

.valor_indicador_v2 {
    margin-top: 4px;
    font: 800 17px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

/* ---- divisoria e links ---- */

.divisoria_v2 {
    border-top: 1px solid var(--v-tab-divisoria);
    margin: 18px 0 14px;
}

.links_resultado_v2 {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.link_resultado_v2 {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    font: 700 13px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    cursor: pointer;
}

.link_resultado_v2:hover {
    color: var(--v-marca-hover);
}

.icone_link_v2 {
    flex: none;
}

/* ---- quebra por credenciadora ----

   So aparece com mais de uma. Cada credenciadora e um bloco com o nome em cima e os
   numeros como pares rotulo/valor — o mesmo idioma da lista de indicadores no estreito, e
   nao uma tabela dentro de um cartao.

   `auto-fit` com `minmax` no lugar de colunas fixas: com cinco numeros e um cartao de
   860px eles cabem lado a lado; num cartao mais estreito, ou com nome de credenciadora
   longo, a grade quebra sozinha em vez de transbordar — que era o defeito da tabela. */

.lista_creds_v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cartao_cred_v2 {
    padding: 12px 14px;
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
}

.nome_cred_v2 {
    font: 700 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.valores_cred_v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px 14px;
    margin-top: 10px;
}

.rotulo_cred_v2 {
    font: 700 10.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.valor_cred_v2 {
    margin-top: 2px;
    font: 700 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

/* ---- pagamento (montado no `load_div_conta`) ---- */

.linha_pgto_v2 {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.icone_banco_pgto_v2 {
    flex: none;
}

.icone_banco_pgto_v2 img {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    object-fit: contain;
}

.dados_pgto_v2 {
    flex: 1;
    min-width: 220px;
}

.titular_pgto_v2 {
    font: 700 14px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.detalhe_pgto_v2 {
    margin-top: 3px;
    font: 500 12.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

.bloco_valor_pgto_v2 {
    text-align: right;
}

.rotulo_valor_pgto_v2 {
    font: 700 11.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.valor_pgto_v2 {
    margin-top: 2px;
    font: 800 18px Manrope, sans-serif;
    color: var(--v-verde-escuro);
}

/* Ambar, e nao vermelho: a pessoa precisa reconhecer esses nomes no extrato depois. E um
   aviso para guardar, nao um erro para corrigir. Os tons sao os `--v-aviso-*`, os mesmos
   do cartao de indisponibilidade la embaixo. */
.aviso_pgto_v2 {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 16px;
    background: var(--v-aviso-fundo);
    border: 1px solid var(--v-aviso-borda);
    border-radius: 10px;
}

.icone_aviso_v2 {
    flex: none;
    margin-top: 1px;
    color: var(--v-aviso-icone);
}

.texto_aviso_v2,
.texto_aviso_v2 p {
    margin: 0;
    font: 500 13px/1.55 Manrope, sans-serif;
    color: var(--v-aviso-texto);
}

.texto_aviso_v2 strong {
    color: var(--v-aviso-forte);
}

.nota_pgto_v2 {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

.nota_pgto_v2 label {
    margin: 0;
    font: 700 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

/* ---- termos ---- */

.cartao_termos_v2 .check_v2.form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-left: 0;
    margin: 0;
}

/* Duas classes no seletor de proposito: o reset acima zera a margem com a mesma
   especificidade, e sem o `.check_v2` aqui ele venceria por vir depois. */
.cartao_termos_v2 .check_v2.check_notificacao_v2 {
    margin-bottom: 16px;
}

.cartao_termos_v2 .check_v2 .form-check-input {
    float: none;
    margin: 1px 0 0;
    width: 19px;
    height: 19px;
    flex: none;
    border: 1.5px solid var(--v-borda-controle);
    border-radius: 6px;
    cursor: pointer;
}

.cartao_termos_v2 .check_v2 .form-check-input:checked {
    background-color: var(--v-verde-escuro);
    border-color: var(--v-verde-escuro);
}

.cartao_termos_v2 .check_v2 .form-check-label {
    margin: 0;
    font: 700 14px Manrope, sans-serif;
    color: var(--v-tab-texto);
    cursor: pointer;
}

/* Alinhada com o rotulo do checkbox, nao com a borda do cartao: 19px da caixa + 12px do
   vao. */
.desc_termos_v2 {
    margin-top: 4px;
    padding-left: 31px;
    font: 500 13px/1.55 Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* `inline` para o link seguir no fim do paragrafo, e nao numa linha propria: o
   `html.Label` do portal e block por padrao. */
.desc_termos_v2 label {
    display: inline;
    margin: 0;
    font: inherit;
    color: inherit;
}

.link_termos_v2 {
    margin-left: 4px;
    font-weight: 700;
    color: var(--v-verde-escuro);
    text-decoration: none;
    cursor: pointer;
}

/* ---- acoes ---- */

.acoes_resultado_v2 {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn_voltar_v2,
.btn_confirmar_v2 {
    height: 48px;
    border-radius: 12px;
    font: 800 14.5px Manrope, sans-serif;
}

.btn_voltar_v2 {
    border-width: 1.5px;
    font-weight: 700;
}

/* O desabilitado do Mantine e cinza neutro; o handoff pede o cinza esverdeado, que na
   coluna inteira le como "ainda nao" e nao como "quebrado". O `[data-disabled]` e o que o
   `dmc.Button` marca; o `:disabled` cobre o caso de virar um `<button>` nativo. */
.btn_confirmar_v2:disabled,
.btn_confirmar_v2[data-disabled] {
    background: var(--v-tab-divisoria);
    color: #93A6A0;
}

/* ---- estreito ---- */

@media (max-width: 767.98px) {
    .header_checkout_v2 {
        padding: 12px 16px;
    }

    .coluna_checkout_v2 {
        padding: 18px 16px 32px;
    }

    /* Grade de tres colunas nao cabe em 375px, e cartao encolhido nao le. Vira lista:
       rotulo a esquerda, valor a direita, uma linha por indicador. */
    .grade_indicadores_v2 {
        display: block;
        border: 1px solid var(--v-tab-divisoria);
        border-radius: 10px;
        padding: 0 14px;
    }

    .grade_indicadores_v2 .cartao_indicador_v2 {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        border-radius: 0;
        padding: 10px 0;
        background: none;
    }

    .grade_indicadores_v2 .cartao_indicador_v2 + .cartao_indicador_v2 {
        border-top: 1px solid var(--v-tab-divisoria);
    }

    .rotulo_indicador_v2 {
        text-transform: none;
    }

    .valor_indicador_v2 {
        margin-top: 0;
        font-size: 14px;
        white-space: nowrap;
    }

    .valor_hero_v2 {
        font-size: 28px;
    }

    /* Empilhado, o valor cedido e o custo passam a viver abaixo do valor pago em vez de
       ao lado; a divisoria e o que impede que os dois numeros se leiam como um so. */
    .hero_direita_v2 {
        width: 100%;
        text-align: left;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--v-borda-tint);
    }

    .bloco_valor_pgto_v2 {
        flex: 1;
        text-align: left;
        padding: 10px 14px;
        background: var(--v-tint);
        border-radius: 10px;
    }

    .acoes_resultado_v2 {
        flex-direction: column-reverse;
    }

    .acoes_resultado_v2 > *,
    .acoes_resultado_v2 .btn_voltar_v2,
    .acoes_resultado_v2 .btn_confirmar_v2 {
        width: 100%;
    }
}

/* ============================================================ SEM DISPONIBILIDADE

   Ocupa o lugar dos cartoes do simulador quando nao ha agenda para antecipar. Mesma pele
   do aviso do checkout — e a mesma natureza de mensagem — mas com titulo proprio, porque
   aqui ela e a tela inteira e nao uma nota dentro de um cartao.

   Monta no `add_div_antecipacoes` (`callbacks/erp/callbacks_disp_agendas.py`). */

.cartao_indisp_v2 {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    background: var(--v-aviso-fundo);
    border: 1px solid var(--v-aviso-borda);
    border-radius: 10px;
}

.titulo_indisp_v2 {
    font: 700 14px Manrope, sans-serif;
    color: var(--v-aviso-forte);
}

/* Variante de bloqueio. Mesma caixa, mesma estrutura — so a matiz muda, o que deixa os
   dois legiveis como uma escala: ambar avisa, vermelho impede.

   O que separa os dois na tela: o ambar comenta o que esta acima dele (o limite da agenda,
   o nome no extrato) e a pessoa segue; o vermelho ocupa o lugar do que ela veio fazer. */
.cartao_erro_v2 {
    background: var(--v-erro-fundo);
    border-color: var(--v-erro-borda);
}

.cartao_erro_v2 .icone_aviso_v2 {
    color: var(--v-erro-icone);
}

.cartao_erro_v2 .titulo_indisp_v2 {
    color: var(--v-erro-forte);
}

.cartao_erro_v2 .motivos_indisp_v2 {
    color: var(--v-erro-texto);
}

/* Terceira variante da mesma caixa: confirmacao. Verde do tema, sem tokens proprios — ele
   ja existe e nao ha estado intermediario a distinguir aqui. */
.cartao_sucesso_v2 {
    background: var(--v-tint);
    border-color: var(--v-borda-tint);
}

.cartao_sucesso_v2 .icone_aviso_v2 {
    color: var(--v-verde-escuro);
}

.cartao_sucesso_v2 .titulo_indisp_v2,
.cartao_sucesso_v2 .motivos_indisp_v2 {
    color: var(--v-tab-texto);
}

.motivos_indisp_v2 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: 500 13px/1.5 Manrope, sans-serif;
    color: var(--v-aviso-texto);
}

/* Sem titulo em cima nao ha o que separar. */
.titulo_indisp_v2 + .motivos_indisp_v2 {
    margin-top: 6px;
}