/* ---------------------------------------------------------------------------
   Topo do Historico — handoff `HISTORICO_PORTAL.md`.

   Cobre o que vem antes da tabela: o callout ambar, a linha de filtros e o cartao
   Resumo. A tabela em si e do `html_table` e ja tem a sua folha (`tema_conteudo_v2.css`,
   secao `corpo_html_table`) — nada aqui a alcanca.

   Monta em `gen_historico_cessoes` (`layouts/erp/antecipacoes.py`) e, no caso do Resumo,
   em `load_div_hist_cessoes` (`callbacks/erp/callbacks_antecipacoes.py`).

   Os tokens sao os `--v-*` de `tema_conteudo_v2.css`; nao ha cor crua aqui. Os cartoes
   do Resumo reusam `.cartao_indicador_v2` / `.rotulo_indicador_v2` / `.valor_indicador_v2`
   do `tema_simulador_v2.css` — sao o mesmo objeto (rotulo em caixa alta + numero), e o
   `indicador_interno_v2` de la ja e a marcacao de "so o adm ve" que o handoff pede para
   Taxa Media (DC) e Spread Medio.

   Este arquivo carrega **antes** de `tema_simulador_v2.css` (o Dash serve os assets em
   ordem alfabetica, e h < s): as classes daqui sao novas de proposito, nenhuma tenta
   sobrescrever as de la, porque perderia.
   --------------------------------------------------------------------------- */

/* ============================================================ AVISO */

/* O corpo so precisa esticar quando ha um controle no canto (o × que fecha) — senao o
   × colaria no fim da ultima linha de texto em vez de ir para a margem. */
.corpo_aviso_v2 {
    flex: 1;
    min-width: 0;
}

.fechar_aviso_v2 {
    flex: none;
    line-height: 1;
    font: 600 15px Manrope, sans-serif;
    color: #B99B5C;
    cursor: pointer;
}

.fechar_aviso_v2:hover {
    color: var(--v-aviso-forte);
}

/* ============================================================ FILTROS */

/* Painel cinza claro (handoff `hist2`), com a mesma largura e o mesmo radius do cartao
   Resumo logo abaixo, a 14px dele. Alinhamento pelo rodape: o que precisa ficar na mesma
   linha sao os controles, nao os rotulos. */
.filtros_hist_v2 {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 22px;
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
    background: var(--v-tab-hover);
    margin-bottom: 14px;
}

/* "Periodo customizado" / "Periodos padrao": ponta direita, centrado na altura dos
   campos (42px). */
.link_periodo_hist_v2 {
    display: inline-flex;
    align-items: center;
    height: 42px;
    margin-left: auto;
}

.link_periodo_hist_v2 .link {
    margin: 0;
    font: 600 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    text-decoration: underline;
}

.campo_filtro_v2 {
    display: flex;
    flex-direction: column;
}

/* Campos que o callback esconde trocando a `className` do filho (cedente antes de
   carregar, ticket sempre): sem isto o rotulo ficaria orfao e o `gap` da linha abriria
   um buraco onde nao ha campo. */
.campo_oculto_v2:has(> .hidden) {
    display: none;
}

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

/* 42px em todos os controles da linha. O Mantine dimensiona pelo `--input-height`, entao
   nao basta o `height` — a altura tambem entra no calculo interno do padding das pills e
   do chevron. */
.filtros_hist_v2 .mantine-Input-input {
    --input-height: 42px;
    min-height: 42px;
    border-radius: 10px;
    border-color: var(--v-borda-input);
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

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

.filtros_hist_v2 .mantine-Input-input::placeholder,
.filtros_hist_v2 .mantine-PillsInputField-field::placeholder {
    color: #93A6A0;
}

.campo_periodo_v2 .mantine-Input-input,
.campo_periodo_v2 .mantine-Select-input {
    min-width: 11rem;
}

/* Largura cravada, e nao `min-width`: o `MultiSelect` do Mantine quer 100% do pai, e
   num item de flex de largura automatica isso vira "o maximo que couber" — a Ocorrencia
   engolia a sobra da linha e jogava o "Atualizar" na outra ponta. Os 220px sao os do
   handoff. */
/* Sem largura fixa: os 220px do handoff viram piso, e o campo cresce com as tags que a
   pessoa escolheu. Fixa, a segunda ocorrencia quebrava a caixa em duas linhas e tirava o
   campo da altura dos vizinhos; larga o bastante para caber duas, sobrava um vazio enorme
   quando so havia uma.

   `flex: 0 0 auto` (e nao o `0 1 auto` padrao) para o campo nao encolher e reintroduzir a
   quebra quando a linha fica apertada — nesse caso ele desce inteiro, que e o
   comportamento do `flex-wrap` da linha. */
.campo_cedente_v2,
.campo_ocorrencia_v2 {
    flex: 0 0 auto;
    width: auto;
    min-width: 220px;
}

.campo_cedente_v2 .mantine-InputWrapper-root,
.campo_ocorrencia_v2 .mantine-InputWrapper-root {
    width: 100%;
}

/* O div do cedente leva `flex_mobile` do callback, e essa classe e o oposto do que o nome
   sugere: `mobile.css` a declara como `flex-direction: row` no caso base e so vira
   `column` dentro do `@media (min-width: 768px)`. Em linha, o `dcc.Loading` de dentro vira
   item de flex dimensionado pelo conteudo, e abaixo de 768px o campo parava de acompanhar
   a largura da coluna — no desktop ninguem via, porque la ja e coluna.

   Sempre coluna: a caixa e uma so, nao ha nada para ficar ao lado. */
.campo_cedente_v2 > .flex_mobile {
    flex-direction: column;
}

/* Tags da ocorrencia e do cedente: pill tintada, do mesmo verde do resto.

   26px de altura e o que faz a caixa fechar nos 42px: a tag mora dentro do input, com
   5.5px de folga em cima e embaixo. Na altura automatica ela dava 32px e empurrava o
   campo para 45px. */
.filtros_hist_v2 .mantine-Pill-root {
    height: 26px;
    padding: 0 10px;
    line-height: 1;
    border: 1px solid var(--v-borda-tint);
    border-radius: 14px;
    background: var(--v-tint);
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
}

/* O campo de busca ao lado das tags pede 100px por padrao, e era isso que jogava a busca
   para a segunda linha assim que havia uma tag. Encolhe ate 60px quando divide a linha, e
   cresce para ocupar a caixa quando esta sozinho — senao o "Selecione o cedente..." do
   campo vazio sairia cortado. */
.filtros_hist_v2 .mantine-PillsInputField-field {
    width: 60px;
    min-width: 60px;
    flex: 1 1 60px;
}

.filtros_hist_v2 .mantine-Pill-remove {
    color: #6B9C8B;
}

.btn_atualizar_hist_v2.mantine-Button-root {
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    font: 800 13.5px Manrope, sans-serif;
}

/* Botao dos filtros avancados: quadrado neutro, nao verde. Ele abre e fecha um painel,
   nao executa a busca — o unico verde da linha e o "Atualizar". */
.btn_filtros_v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--v-tab-cabecalho);
    color: var(--v-texto-inativo);
    cursor: pointer;
}

.btn_filtros_v2:hover,
.btn_filtros_v2:focus {
    background: var(--v-tint);
    color: var(--v-verde-escuro);
}

/* ============================================================ RESUMO */

.cartao_resumo_v2 {
    padding: 18px 22px;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
}

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

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

.periodo_resumo_v2 {
    font: 500 12px Manrope, sans-serif;
    color: #93A6A0;
}

/* Numero de colunas cravado, e nao `auto-fit`: com `minmax` a grade fecharia sete
   cartoes numa fila so nas telas largas, e o handoff quebra em duas justamente para o
   bloco nao virar uma regua de numeros. */
.grade_resumo_v2 {
    display: grid;
    gap: 14px;
}

.grade_resumo_5_v2 {
    grid-template-columns: repeat(5, 1fr);
}

.grade_resumo_4_v2 {
    grid-template-columns: repeat(4, 1fr);
}

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

/* O Δ de exposicao chega como `html.Label` colorido; herda o tamanho do cartao mas
   guarda a propria cor, que e o que ela diz. */
.valor_indicador_v2 label {
    font: inherit;
    margin: 0;
}

/* -------- resumo em grupos (handoff `resumo_hist`): um cartao, numeros em grupos

   Monta em `cartao_resumo_grupos_v2` (`utils/erp/utils_agendas.py`), que serve o Resumo
   do Historico e o da antecipacao gerencial. O que muda o desenho e o **tipo** do grupo,
   e nao o nome dele:

   - `grupo_lista_`: valores em reais. Nao quebram linha e, no celular, viram lista.
   - `grupo_grade_`: indicadores e quantidades. No celular, grade 2x2.

   `corpo_N_` diz quantos grupos ha lado a lado, e com isso a proporcao das colunas. */

.resumo_hist_v2 {
    background: #fff;
}

.resumo_hist_v2 .cabecalho_resumo_v2 {
    margin-bottom: 16px;
}

.corpo_resumo_hist_v2 {
    display: grid;
    gap: 28px;
}

.corpo_1_resumo_hist_v2 { grid-template-columns: minmax(0, 1fr); }

/* Os 3fr/4fr do handoff: Valores e Indicadores. */
.corpo_2_resumo_hist_v2 { grid-template-columns: 3fr 4fr; }

/* Tres grupos (gerencial: Quantidades, Valores, Indicadores): as pontas ficam do tamanho
   do que tem dentro, e o do meio, que e o dos reais, leva o resto. Com `fr` nas tres, os
   quatro valores do meio nao cabiam a 18px sem quebrar. */
.corpo_3_resumo_hist_v2 { grid-template-columns: max-content minmax(0, 1fr) max-content; }

/* Segunda faixa (Liquidacoes, so adm): mesma grade da de cima, entao cai na coluna dos
   Valores, com os reais alinhados uns sob os outros. */
.faixa_liq_resumo_hist_v2 {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--v-tab-divisoria);
}

.grupo_resumo_hist_v2 + .grupo_resumo_hist_v2 {
    padding-left: 28px;
    border-left: 1px solid var(--v-tab-divisoria);
}

.titulo_grupo_resumo_hist_v2 {
    margin-bottom: 10px;
    font: 700 11px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.itens_resumo_hist_v2 {
    display: grid;
    gap: 18px;
}

.colunas_1_resumo_hist_v2 { grid-template-columns: minmax(0, 1fr); }
.colunas_2_resumo_hist_v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.colunas_3_resumo_hist_v2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.colunas_4_resumo_hist_v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.label_item_resumo_hist_v2 {
    font: 600 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

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

/* So os reais nao quebram: "R$ 510.247,34" partido em duas linhas le como dois numeros. */
.grupo_lista_resumo_hist_v2 .valor_item_resumo_hist_v2 {
    white-space: nowrap;
}

.valor_item_resumo_hist_v2.custo_resumo_hist_v2 {
    color: var(--v-destrutivo);
}

.valor_item_resumo_hist_v2 label {
    margin: 0;
    font: inherit;
}

/* Fora do handoff (que so desenha >= 700 e < 700): na faixa intermediaria a coluna dos
   reais nao comporta os valores a 18px sem quebrar, entao os grupos empilham e cada um
   ganha a largura toda. Com tres grupos o aperto comeca mais cedo, por isso o teto
   maior. */
@media (min-width: 700px) and (max-width: 1199.98px) {
    .corpo_2_resumo_hist_v2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .corpo_2_resumo_hist_v2 > .grupo_resumo_hist_v2 + .grupo_resumo_hist_v2 {
        padding-left: 0;
        padding-top: 16px;
        border-left: 0;
        border-top: 1px solid var(--v-tab-divisoria);
    }
}

@media (min-width: 700px) and (max-width: 1399.98px) {
    .corpo_3_resumo_hist_v2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .corpo_3_resumo_hist_v2 > .grupo_resumo_hist_v2 + .grupo_resumo_hist_v2 {
        padding-left: 0;
        padding-top: 16px;
        border-left: 0;
        border-top: 1px solid var(--v-tab-divisoria);
    }
}

@media (max-width: 699.98px) {
    .resumo_hist_v2 .cabecalho_resumo_v2 {
        margin-bottom: 14px;
        gap: 3px;
    }

    .prefixo_periodo_resumo_hist_v2 {
        display: none;
    }

    .corpo_resumo_hist_v2 {
        display: block;
    }

    .grupo_resumo_hist_v2 + .grupo_resumo_hist_v2 {
        padding-left: 0;
        border-left: 0;
    }

    .titulo_grupo_resumo_hist_v2 {
        margin-bottom: 8px;
    }

    .grupo_resumo_hist_v2 + .grupo_resumo_hist_v2 .titulo_grupo_resumo_hist_v2 {
        margin-top: 18px;
    }

    /* Reais viram lista: rotulo a esquerda, numero a direita. */
    .grupo_lista_resumo_hist_v2 .itens_resumo_hist_v2 {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .grupo_lista_resumo_hist_v2 .item_resumo_hist_v2 {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 9px 0;
        border-top: 1px solid var(--v-tab-divisoria);
    }

    .grupo_lista_resumo_hist_v2 .label_item_resumo_hist_v2 {
        font-size: 13px;
    }

    .grupo_lista_resumo_hist_v2 .valor_item_resumo_hist_v2 {
        margin-top: 0;
        font-size: 15px;
    }

    /* Indicadores e quantidades: grade 2x2 sob uma divisoria. */
    .grupo_grade_resumo_hist_v2 .itens_resumo_hist_v2 {
        grid-template-columns: 1fr 1fr;
        gap: 14px 16px;
        padding-top: 12px;
        border-top: 1px solid var(--v-tab-divisoria);
    }

    .grupo_grade_resumo_hist_v2 .valor_item_resumo_hist_v2 {
        margin-top: 3px;
        font-size: 16px;
    }

    .faixa_liq_resumo_hist_v2 {
        margin-top: 18px;
        padding-top: 0;
        border-top: 0;
    }
}

/* ============================================================ ACOES DA TABELA */

/* Download embaixo da tabela: primario, com a forma do "Atualizar"
   (`btn_atualizar_hist_v2`). E `dbc.Button`; a cor ja vem do `.btn-primary` do tema
   (`tema_conteudo_v2.css`), aqui entra so a forma. */
.btn_acao_hist_v2.btn {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    font: 800 13.5px Manrope, sans-serif;
}

/* "Gerar relatorio" no cabecalho "Operacoes": secundario, 38px para casar com o
   quadrado dos filtros ao lado. */
.acoes_cabecalho_hist_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn_gerar_relatorio_hist_v2.mantine-Button-root {
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--v-borda-tint);
    border-radius: 10px;
    background: #fff;
    color: var(--v-verde-escuro);
    font: 800 13px Manrope, sans-serif;
}

.btn_gerar_relatorio_hist_v2.mantine-Button-root:hover {
    background: var(--v-tint);
}

.btn_gerar_relatorio_hist_v2 .mantine-Button-section[data-position="left"] {
    margin-inline-end: 8px;
}

/* ============================================================ MODAL DO RELATORIO */

/* Handoff `handoff_relatorio_historico`. Monta em `gen_modal_relatorio_hist`
   (`layouts/erp/antecipacoes.py`); as etapas (formulario, gerando, resultado) trocam por
   `hidden` nos callbacks do relatorio (`callbacks/erp/callbacks_antecipacoes.py`).

   O modal e do bootstrap e renderiza fora do `#main-content`, entao nada aqui pode
   depender de ancestral da tela. */

.fundo_modal_relatorio_v2.show {
    background: rgba(18, 42, 35, .45);
    opacity: 1;
}

.dialogo_modal_relatorio_v2 {
    max-width: 560px;
    padding: 0 24px;
}

.painel_modal_relatorio_v2 {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(18, 42, 35, .25);
    font-family: Manrope, sans-serif;
    overflow: hidden;
}

/* As etapas e os botoes do resultado trocam por `hidden`, e varias dessas pecas tem
   `display` proprio (flex, inline-flex) que venceria o `.hidden` generico. */
.painel_modal_relatorio_v2 .hidden {
    display: none !important;
}

.cabecalho_modal_relatorio_v2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 0;
}

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

.apoio_modal_relatorio_v2 {
    margin-top: 4px;
    font: 500 13px/1.55 Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

.fechar_modal_relatorio_v2 {
    flex: none;
    line-height: 1;
    font: 600 20px Manrope, sans-serif;
    color: #93A6A0;
}

.fechar_modal_relatorio_v2:hover {
    color: var(--v-texto-inativo);
}

/* ---- formulario ---- */

.corpo_form_relatorio_v2 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 24px 0;
}

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

/* Chips (periodo e ocorrencia). O `ChipGroup` do Mantine nao gera elemento no DOM: os
   chips sao filhos diretos deste div. */
.chips_relatorio_v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip_relatorio_v2 .mantine-Chip-label {
    height: auto;
    padding: 6px 12px;
    border: 1px solid var(--v-borda-input);
    border-radius: 14px;
    background: #fff;
    color: var(--v-texto-inativo);
    font: 700 12px Manrope, sans-serif;
    line-height: 1.2;
    gap: 6px;
}

.chip_relatorio_v2 .mantine-Chip-label:hover {
    border-color: var(--v-verde-escuro);
}

.chip_relatorio_v2 .mantine-Chip-label[data-checked] {
    padding: 6px 12px;
    border-color: var(--v-borda-tint);
    background: var(--v-tint);
    color: var(--v-verde-escuro);
}

.chip_relatorio_v2 .mantine-Chip-iconWrapper {
    width: 11px;
    max-width: 11px;
    margin: 0;
    color: var(--v-verde-escuro);
}

.chip_relatorio_v2 .mantine-Chip-checkIcon {
    width: 11px;
    height: 11px;
}

/* No periodo a escolha e unica e o fundo verde ja diz qual e: sem o check. */
.chip_sem_check_v2 .mantine-Chip-iconWrapper {
    display: none;
}

.datas_relatorio_v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.data_relatorio_v2 .mantine-DatePickerInput-input,
.campo_relatorio_v2 .mantine-Select-input {
    height: 42px;
    border: 1px solid var(--v-borda-input);
    border-radius: 10px;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.data_relatorio_v2 .mantine-DatePickerInput-input:focus,
.campo_relatorio_v2 .mantine-Select-input:focus {
    border-color: var(--v-verde-escuro);
}

.campo_relatorio_v2 .mantine-Select-input::placeholder {
    color: #93A6A0;
}

.prefixo_data_relatorio_v2 {
    font: 600 11px Manrope, sans-serif;
    color: #93A6A0;
}

.erro_form_relatorio_v2 {
    font: 600 12.5px Manrope, sans-serif;
    color: var(--v-destrutivo);
}

/* ---- rodapes e botoes ---- */

.rodape_modal_relatorio_v2,
.rodape_resultado_relatorio_v2 {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.rodape_modal_relatorio_v2 {
    padding: 22px 24px 24px;
}

.rodape_resultado_relatorio_v2 {
    margin-top: 20px;
}

.btn_secundario_relatorio_v2.mantine-Button-root {
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--v-borda-input);
    border-radius: 10px;
    background: #fff;
    color: var(--v-texto-inativo);
    font: 800 13.5px Manrope, sans-serif;
}

.btn_secundario_relatorio_v2.mantine-Button-root:hover {
    background: var(--v-tab-cabecalho);
}

/* O "Baixar" e um `html.A` (link direto para o S3), por isso a regra sem o
   `.mantine-Button-root`: a mesma pele vale para o botao e para o link. */
.btn_primario_relatorio_v2.mantine-Button-root,
.link_baixar_relatorio_v2 {
    height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--v-verde-escuro);
    color: #fff;
    font: 800 13.5px Manrope, sans-serif;
}

.btn_primario_relatorio_v2.mantine-Button-root:hover,
.link_baixar_relatorio_v2:hover {
    background: #25765D;
    color: #fff;
}

.link_baixar_relatorio_v2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* ---- gerando ---- */

.etapa_gerando_relatorio_v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 44px;
    text-align: center;
}

.spinner_relatorio_v2 {
    width: 36px;
    height: 36px;
    border: 3px solid var(--v-tint);
    border-top-color: var(--v-verde-escuro);
    border-radius: 50%;
    animation: girar_relatorio_v2 .9s linear infinite;
}

@keyframes girar_relatorio_v2 {
    to {
        transform: rotate(360deg);
    }
}

.titulo_gerando_relatorio_v2 {
    margin-top: 16px;
    font: 800 15px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.resumo_gerando_relatorio_v2 {
    margin-top: 4px;
    font: 500 13px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* ---- resultado (pronto / erro) ---- */

.etapa_resultado_relatorio_v2 {
    padding: 22px 24px 24px;
}

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

.icone_callout_relatorio_v2 {
    flex: none;
    margin-top: 1px;
    color: var(--v-verde-escuro);
}

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

.texto_callout_relatorio_v2 {
    margin-top: 3px;
    font: 500 12.5px/1.5 Manrope, sans-serif;
    color: var(--v-texto-inativo);
    overflow-wrap: anywhere;
}

.callout_erro_relatorio_v2 {
    border-color: var(--v-destrutivo-borda);
    background: var(--v-destrutivo-tint);
}

.callout_erro_relatorio_v2 .icone_callout_relatorio_v2 {
    color: var(--v-destrutivo);
}

@media (max-width: 1199.98px) {
    .grade_resumo_5_v2,
    .grade_resumo_4_v2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .grade_resumo_v2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cartao_resumo_v2 {
        padding: 16px;
    }

    .cabecalho_resumo_v2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Uma coluna so, e nao Periodo e Ocorrencia lado a lado como no handoff `hist2` 1b:
       na meia largura a pill da Ocorrencia nao cabe ao lado do x e do chevron, quebra, e
       o campo fica mais alto que o Periodo. Ordem: Periodo, o link logo abaixo dele,
       Ocorrencia, Cedente e o Atualizar. Grade com `order`, e nao wrappers novos: os
       campos continuam irmaos no markup, igual ao desktop. */
    .filtros_hist_v2 {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }

    /* O piso de 220px dos campos de tag sai do caminho: no celular quem manda e a
       largura da coluna. */
    .filtros_hist_v2 > * {
        width: 100%;
        min-width: 0;
    }

    .filtros_hist_v2 > .campo_periodo_v2 { order: 1; }

    /* Colado no select, como era antes do painel: o `gap` da grade vale para todos, entao
       o link desconta parte dele e deixa de ter a altura de 42px da linha do desktop. */
    .filtros_hist_v2 > .link_periodo_hist_v2 {
        order: 2;
        width: auto;
        height: auto;
        margin: -6px 0 0;
        justify-self: start;
    }

    .filtros_hist_v2 > .campo_ocorrencia_v2 { order: 3; }
    .filtros_hist_v2 > .campo_cedente_v2 { order: 4; }
    .filtros_hist_v2 > .btn_atualizar_hist_v2 { order: 5; }

    .campo_periodo_v2 .mantine-Input-input,
    .campo_periodo_v2 .mantine-Select-input {
        min-width: 0;
    }
}