/* ---------------------------------------------------------------------------
   Solicitacoes / Antecipacoes ADM — handoff `SOLICITACOES_PORTAL.md`.

   Cobre a coluna de filtros, o alerta de atingimentos, o cartao de remessas, o Resumo,
   o indicador de atingimento dentro da tabela e os botoes do modal de acoes. A tabela em
   si continua vindo do `html_table` com a tipografia de `tema_conteudo_v2.css`.

   Monta em `gen_solicitacoes_layout` (`layouts/erp/antecipacoes.py`) e nos callbacks
   `load_warnings_antecipacao` / `load_div_sol_antecip`
   (`callbacks/erp/callbacks_antecipacoes.py`).

   Os tokens sao os `--v-*` de `tema_conteudo_v2.css`. O callout ambar reusa
   `cartao_indisp_v2` / `corpo_aviso_v2` / `fechar_aviso_v2`, que ja existiam — aqui so
   entram as pecas que o handoff acrescenta (titulo, badge e botao).
   --------------------------------------------------------------------------- */

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

/* Cartao, como os outros blocos da tela — e nao a coluna solta do handoff. A borda a
   direita e a sombra pesada do `filter_column` (`mobile.css`) saem: aquela moldura era de
   outra epoca do portal e nao conversa com os cartoes ao lado.

   `.filtros_solic_v2.filter_column` para vencer o `div.filter_column` de la, que tambem
   crava `padding-top: 0`. */
.filtros_solic_v2.filter_column {
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    box-shadow: none;
    background: #fff;
    padding: 18px;
    align-self: flex-start;
}

/* Os rotulos continuam vindo da prop `label` do Mantine — sao ~7 campos com ids ja
   ligados a callbacks, e mover cada um para um `<div>` proprio seria mexer em muita
   coisa por tipografia. Aqui a folha alcanca todos de uma vez.

   O conteudo de remessas Fromtis (`conteudo_remessas_v2`) pega as mesmas regras: sao os
   mesmos controles, e a tela deve se ler como parte das Solicitacoes. */
.filtros_solic_v2 .mantine-InputWrapper-label,
.conteudo_remessas_v2 .mantine-InputWrapper-label {
    margin-bottom: 8px;
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.filtros_solic_v2 .mantine-InputWrapper-description,
.conteudo_remessas_v2 .mantine-InputWrapper-description {
    margin-bottom: 6px;
    font: 500 11.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

.filtros_solic_v2 .mantine-Input-input,
.conteudo_remessas_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_solic_v2 .mantine-Input-input:focus,
.filtros_solic_v2 .mantine-Input-input:focus-within,
.conteudo_remessas_v2 .mantine-Input-input:focus,
.conteudo_remessas_v2 .mantine-Input-input:focus-within {
    border-color: var(--v-verde-escuro);
}

/* 17px e radius 5, do handoff. O Mantine dimensiona a caixa e o desenho do check pelo
   mesmo `--checkbox-size`, entao mexer so no `width` deixaria o traco fora de escala. */
.filtros_solic_v2 .mantine-Checkbox-input,
.conteudo_remessas_v2 .mantine-Checkbox-input {
    --checkbox-size: 17px;
    --checkbox-radius: 5px;
    border-width: 1.5px;
    border-color: var(--v-borda-controle);
}

.filtros_solic_v2 .mantine-Checkbox-label,
.conteudo_remessas_v2 .mantine-Checkbox-label {
    padding-left: 9px;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.filtros_solic_v2 .mantine-Checkbox-root:has(.mantine-Checkbox-input:not(:checked)) .mantine-Checkbox-label,
.conteudo_remessas_v2 .mantine-Checkbox-root:has(.mantine-Checkbox-input:not(:checked)) .mantine-Checkbox-label {
    color: var(--v-texto-inativo);
}

.filtros_solic_v2 .mantine-Button-root,
.conteudo_remessas_v2 .mantine-Button-root {
    height: 42px;
    border-radius: 10px;
    font: 800 13.5px Manrope, sans-serif;
}

/* ============================================================ ALERTA */

/* Linha 1 do callout: nome do grupo e, ao lado, quantos itens ele tem. */
.linha_titulo_alerta_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.titulo_alerta_v2 {
    margin: 0;
    font: 800 13.5px Manrope, sans-serif;
    color: var(--v-aviso-forte);
}

.badge_alerta_v2 {
    padding: 3px 9px;
    border-radius: 14px;
    background: #F5E6C4;
    font: 700 11px Manrope, sans-serif;
    color: var(--v-aviso-forte);
}

.texto_alerta_v2 {
    margin-top: 4px;
    font: 500 13px/1.6 Manrope, sans-serif;
    color: var(--v-aviso-texto);
}

.texto_alerta_v2 b {
    color: var(--v-aviso-forte);
}

/* O `load_warnings_antecipacao` monta as linhas dos avisos como `html.Label` sem classe —
   sao mais de dez pontos espalhados pelo callback, e o Bootstrap entrega todas em 16px
   system-ui: fora da familia do tema e maiores que o proprio titulo do grupo (13.5px).
   Padroniza aqui, no mesmo desenho do `.texto_alerta_v2`, em vez de carimbar a classe em
   cada `Label`. As duas excecoes: o "Transferencias", que tambem e um Label mas e titulo
   de grupo, e o que estiver dentro dos modais de "Visualizar", que os mesmos ids
   carregam junto. */
.corpo_aviso_v2 label:not(.titulo_alerta_v2, .modal label) {
    margin: 0;
    font: 500 13px/1.6 Manrope, sans-serif;
    color: var(--v-aviso-texto);
}

/* Contorno ambar, e nao o verde do tema: o botao pertence ao callout e herda a cor dele.
   Verde aqui competiria com o "Consultar remessas" logo abaixo, que e a acao principal
   da tela. */
.btn_alerta_v2.btn,
.btn_alerta_v2.mantine-Button-root {
    height: 36px;
    padding: 0 16px;
    border: 1.5px solid var(--v-aviso-icone);
    border-radius: 10px;
    background: transparent;
    font: 700 12.5px Manrope, sans-serif;
    color: #8A6B1F;
}

.btn_alerta_v2.btn:hover,
.btn_alerta_v2.btn:focus,
.btn_alerta_v2.mantine-Button-root:hover {
    border-color: var(--v-aviso-icone);
    background: #F5E6C4;
    color: var(--v-aviso-forte);
}

/* Cada grupo de aviso (automatica, atingimentos, transferencias) e um bloco; a divisoria
   entre eles vem do `<hr>` que o callback ja insere. */
.grupo_alerta_v2 + .grupo_alerta_v2 {
    margin-top: 14px;
}

/* ============================================================ REMESSAS */

.cartao_remessas_v2.mantine-Card-root {
    padding: 16px 22px;
    border-color: var(--v-borda-clara);
    border-radius: 10px;
}

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

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

/* No Historico o "RESUMO" divide a linha com o periodo exibido, e a folga vem do
   `cabecalho_resumo_v2`. Aqui ele esta sozinho, como filho direto do cartao — o `>` e o
   que impede esta regra de alcancar o outro. */
.cartao_resumo_v2 > .titulo_resumo_v2 {
    margin-bottom: 14px;
}

/* ============================================================ ATINGIMENTO (tabela) */

/* Sem pill, ao contrario dos status do Resumo: aqui e uma marca de estado dentro de uma
   celula que ja tem o status em cima. Uma caixa em volta somaria peso a uma informacao
   secundaria. */
.linha_html_table .ating_v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font: 700 11px Manrope, sans-serif;
}

.linha_html_table .ating_v2 .icone_check_tabela {
    width: 11px;
    height: 11px;
}

.linha_html_table .ating_ok_v2 {
    color: var(--v-verde-escuro);
}

.linha_html_table .ating_alerta_v2 {
    color: #8A6B1F;
}

.linha_html_table .ating_erro_v2 {
    color: #C4553F;
}

/* ============================================================ MODAL DE ACOES */

/* Mesma geometria do "Aplicar filtros" e do "Consultar remessas": os botoes do modal
   vinham com o arredondado e a fonte default do dmc e destoavam da tela que os abre.

   So geometria e tipografia — cor e variante continuam vindo do `color`/`variant` de
   cada botao, que e o que separa autorizar de cancelar. */
.btn_acoes_v2.mantine-Button-root {
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    font: 800 13.5px Manrope, sans-serif;
}

/* O download do termo fica dentro de uma aba, entre tabelas, e nao numa linha de acoes:
   os 42px cravados o deixavam alto demais ali. A altura passa a sair do conteudo, com o
   padding vertical que o `height` fixo dispensava; radius e fonte seguem os mesmos. */
.btn_acoes_v2.btn_acoes_auto_v2.mantine-Button-root {
    height: auto;
    padding: 8px 20px;
}

/* ============================================================ FILTROS NO MOBILE */

/* Handoff "Solicitacoes — filtros no mobile (opcao 2a)". Os campos sao os mesmos do
   desktop: a `gaveta_filtros_solic` envolve tudo menos o Periodo e, abaixo de 768px, vira
   um bottom sheet. No desktop ela e so mais um bloco da coluna, e o que e exclusivo do
   mobile (`so_mobile_solic`: veu, cabecalho e rodape da gaveta, botao Filtros, resumo)
   some. O abre/fecha e a classe `aberta`, posta pelo callback `gaveta_filtros_solic`. */

.linha_botoes_filtros_solic {
    display: flex;
    gap: 10px;
}

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

/* So o icone: quadrado da altura do Atualizar, que fica com o resto da linha. */
/* Carregando do Atualizar: a unica animacao e a do loader. O Mantine faz o texto sair e o
   loader entrar com fade/deslize (transicao inline do `Transition`, dai o `!important`);
   aqui o texto some e volta de uma vez. */
#ok_sol_antecip_gestao_fidc,
#ok_sol_antecip_gestao_fidc::before,
#ok_sol_antecip_gestao_fidc .mantine-Button-inner,
#ok_sol_antecip_gestao_fidc .mantine-Button-label,
#ok_sol_antecip_gestao_fidc .mantine-Button-loader {
    transition: none !important;
}

.btn_abrir_filtros_solic.mantine-Button-root {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    padding: 0;
    overflow: visible;
    border-color: var(--v-verde-escuro);
    color: var(--v-verde-escuro);
}

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

.btn_abrir_filtros_solic .mantine-Button-inner,
.btn_abrir_filtros_solic .mantine-Button-label {
    overflow: visible;
}

/* Contador no canto do icone, com a borda branca separando-o do contorno do botao. */
.badge_filtros_solic {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    padding: 1px 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    text-align: center;
    line-height: 14px;
    background: var(--v-verde-escuro);
    font: 800 11px Manrope, sans-serif;
    color: #fff;
}

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

/* O x da gaveta (mobile) e do modal de remessas (qualquer largura). */
.fechar_gaveta_solic {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--v-tint);
    color: var(--v-verde-escuro);
}

.fechar_gaveta_solic:hover {
    background: var(--v-borda-tint);
}

@media (min-width: 768px) {
    .so_mobile_solic {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .filtros_solic_v2.filter_column {
        padding: 18px 18px 16px;
    }

    .hr_filtros_solic {
        display: none;
    }

    .linha_botoes_filtros_solic {
        margin-top: 14px;
    }

    .linha_botoes_filtros_solic .mantine-Button-root {
        margin-bottom: 0;
    }

    /* -------- a gaveta */

    /* Entre a barra do topo (1030/1050) e o modal do bootstrap (1055). Os dropdowns do
       Cedentes e do Ordenar por abrem acima dela pelo z-index padrao do tema
       (`TEMA_MANTINE_BASE`, `layouts/tema_v2.py`). */
    .gaveta_filtros_solic {
        position: fixed;
        inset: 0;
        z-index: 1052;
        visibility: hidden;
        transition: visibility 0s linear 250ms;
    }

    .gaveta_filtros_solic.aberta {
        visibility: visible;
        transition-delay: 0s;
    }

    body:has(.gaveta_filtros_solic.aberta) {
        overflow: hidden;
    }

    .veu_gaveta_solic {
        position: absolute;
        inset: 0;
        background: rgba(8, 19, 15, .45);
        opacity: 0;
        transition: opacity 200ms;
    }

    .aberta .veu_gaveta_solic {
        opacity: 1;
    }

    .painel_gaveta_solic {
        position: absolute;
        top: 40px;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        border-radius: 18px 18px 0 0;
        background: #fff;
        transform: translateY(100%);
        transition: transform 250ms ease-out;
    }

    .aberta .painel_gaveta_solic {
        transform: none;
    }

    .cabecalho_gaveta_solic {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px;
        border-bottom: 1px solid var(--v-tab-divisoria);
    }

    .titulo_gaveta_solic {
        margin: 0;
        font: 800 16px Manrope, sans-serif;
        color: var(--v-verde-escuro);
    }

    /* `!important` para vencer o `gap` inline do `dmc.Stack`, que no desktop continua. */
    .corpo_gaveta_solic {
        flex: 1;
        overflow-y: auto;
        padding: 18px;
        gap: 18px !important;
        overscroll-behavior: contain;
    }

    .corpo_gaveta_solic .mantine-Checkbox-input {
        --checkbox-size: 20px;
    }

    .corpo_gaveta_solic .mantine-Checkbox-label {
        font-size: 14px;
        font-weight: 500;
    }

    .corpo_gaveta_solic .mantine-Input-input {
        --input-height: 46px;
        min-height: 46px;
        font-size: 14px;
    }

    .rodape_gaveta_solic {
        display: flex;
        gap: 10px;
        padding: 12px 18px 18px;
        border-top: 1px solid var(--v-tab-divisoria);
    }

    .btn_limpar_gaveta_solic.mantine-Button-root {
        flex: 1;
        border-color: var(--v-verde-escuro);
        color: var(--v-verde-escuro);
    }

    .btn_aplicar_gaveta_solic.mantine-Button-root {
        flex: 2;
    }

    /* -------- remessas: titulo em cima, botao embaixo (antes cortava na horizontal) */

    .cartao_remessas_v2 .space_between {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .cartao_remessas_v2.mantine-Card-root {
        padding: 14px 16px;
    }
}

/* ============================================================ REMESSAS FROMTIS (modal) */

/* O conteudo (`gen_remessas_fromtis_content`) aparece no modal do card acima e direto
   na aba Fromtis; as regras abaixo valem nos dois. Rotulos, campos, checkboxes e botoes
   vem das regras da coluna de filtros, estendidas para `conteudo_remessas_v2`. */

.painel_modal_remessas_v2 {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(10, 30, 24, .25);
    font-family: Manrope, sans-serif;
}

.cabecalho_modal_remessas_v2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--v-tab-divisoria);
}

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

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

.painel_modal_remessas_v2 .modal-body {
    padding: 20px 24px 24px;
    background: #F6F9F8;
    border-radius: 0 0 14px 14px;
}

/* Mesmo painel, corpo branco: o modal de acoes da solicitacao (`modal_actions_sol_antecip`)
   tem blocos soltos, sem cartao proprio, que sumiriam no cinza. */
.painel_modal_remessas_v2.painel_modal_branco_v2 .modal-body {
    background: #fff;
}

.conteudo_remessas_v2 {
    font-family: Manrope, sans-serif;
}

/* Cartoes brancos sobre o fundo cinza do modal, como os blocos da tela. */
.bloco_remessas_v2 {
    margin-bottom: 14px;
}

.conteudo_remessas_v2 .cartao_resumo_v2,
.conteudo_remessas_v2 .filtros_remessas_v2 {
    background: #fff;
}

.titulos_remessas_v2 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

/* Uma cor por situacao no resumo: fundo, borda e texto do mesmo tom, e o numero no
   mesmo tom em 800. Verde e ambar sao os do tema (`--v-tint`, `--v-aviso-*`). */
.pill_cor_0_remessas_v2 { background: var(--v-tint); border-color: var(--v-borda-tint); color: #25765D; }
.pill_cor_1_remessas_v2 { background: var(--v-aviso-fundo); border-color: var(--v-aviso-borda); color: #8A6B1F; }
.pill_cor_2_remessas_v2 { background: #EEF4FB; border-color: #C9DBF0; color: #2F5F93; }
.pill_cor_3_remessas_v2 { background: #F4F0FA; border-color: #DCD0EE; color: #6A4C93; }
.pill_cor_4_remessas_v2 { background: #EAF6F7; border-color: #BFE0E3; color: #23717A; }
.pill_cor_5_remessas_v2 { background: #FBF0F3; border-color: #EFCFD8; color: #9C3F5C; }

.pills_status_v2 [class*='pill_cor_'] b {
    color: inherit;
    font-weight: 800;
}

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

.total_resumo_remessas_v2 b {
    color: var(--v-tab-texto);
}

/* Situacao, Fundo e o botao numa linha so, alinhados pela base do campo. */
.filtros_remessas_v2 {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 22px;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
}

.campo_situacao_remessas_v2 {
    flex: 1 1 320px;
}

.campo_fundo_remessas_v2 {
    flex: 1 1 240px;
}

.titulo_lista_remessas_v2 {
    margin: 6px 0 10px;
}

.titulo_lista_remessas_v2:empty {
    display: none;
}

.ops_remessas_v2 {
    margin-top: 16px;
    padding: 18px 22px;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    background: #fff;
}

.checks_remessas_v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

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

.lista_confirmacao_remessas_v2 {
    max-width: 420px;
    margin-top: 8px;
}

.linha_confirmacao_remessas_v2 {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
}

.erro_remessas_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--v-erro-borda);
    border-radius: 10px;
    background: var(--v-erro-fundo);
    font: 600 13px Manrope, sans-serif;
    color: var(--v-erro-texto);
}

.erro_remessas_v2 svg {
    flex: none;
    color: var(--v-erro-icone);
}

/* -------- detalhe */

.conteudo_remessas_v2 .btn_voltar_remessas_v2.mantine-Button-root {
    height: 34px;
    margin-bottom: 12px;
    padding: 0 10px;
    color: var(--v-verde-escuro);
}

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

.cedente_detalhe_remessas_v2 {
    margin-top: 6px;
    font: 700 18px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.valores_detalhe_remessas_v2 {
    display: flex;
    gap: 40px;
    margin-top: 16px;
}

.grade_detalhe_remessas_v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 28px;
}

.valor_campo_remessas_v2 {
    margin-top: 4px;
    font: 600 13.5px Manrope, sans-serif;
    color: var(--v-tab-texto);
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .cabecalho_modal_remessas_v2 {
        padding: 16px 18px 14px;
    }

    .painel_modal_remessas_v2 .modal-body {
        padding: 14px;
    }

    .filtros_remessas_v2,
    .ops_remessas_v2 {
        padding: 16px;
    }

    /* O `cabecalho_resumo_v2` empilha no celular (Historico); aqui o recarregar fica
       no canto, ao lado do titulo. */
    .bloco_remessas_v2 .cabecalho_resumo_v2 {
        flex-direction: row;
        align-items: flex-start;
    }

    .filtros_remessas_v2 > *,
    .acoes_remessas_v2 > * {
        flex: 1 1 100%;
    }

    .grade_detalhe_remessas_v2 {
        grid-template-columns: repeat(2, 1fr);
    }
}