/* ---------------------------------------------------------------------------
   Atingimentos (ADM) — handoff `ATINGIMENTOS_PORTAL.md`.

   Cobre o cartao de filtros (linha de campos + linhas rotuladas FUNDOS / OPCOES /
   SPLIT), os dois callouts de status e o rodape de execucoes. A listagem abaixo continua
   vindo do `html_table` com a tipografia de `tema_conteudo_v2.css`.

   Monta em `atingimentos_layout` (`layouts/layout_atingimentos.py`) e nos callbacks
   `load_fundos` / `load_last_ret` / `load_warnings_atingimentos`
   (`callbacks/callbacks_atingimentos.py`).

   Os callouts reusam `cartao_indisp_v2` / `cartao_erro_v2` / `corpo_aviso_v2` do
   `cartao_aviso_v2` — sao os mesmos das Solicitacoes e dos Extratos. Aqui entram so as
   pecas que o handoff acrescenta: o badge de contagem, as pills de erro e o botao "Ver".

   Tokens: os `--v-*` de `tema_conteudo_v2.css`. Os tons de erro do handoff (`#C4553F`,
   `#F0D5D0`, `#FDF6F4`, `#7A3A2C`) estao a um ou dois digitos dos tokens que o portal ja
   usa (`--v-erro-icone`, `--v-erro-borda`, `--v-erro-fundo`, `--v-erro-texto`) e sao
   visualmente os mesmos; ficam os tokens, para a tela nao ganhar um vermelho proprio.
   --------------------------------------------------------------------------- */

/* ============================================================ CARTAO DE FILTROS */

.cartao_filtros_ating_v2.mantine-Card-root {
    padding: 18px 22px;
    border-color: var(--v-borda-clara);
    border-radius: 10px;
    box-shadow: none;
}

/* Periodo mais largo que os outros tres: ele carrega duas datas e o × no mesmo campo, e
   em quatro colunas iguais o intervalo quebrava em duas linhas. */
.grade_filtros_ating_v2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 14px;
}

@media (max-width: 991.98px) {
    .grade_filtros_ating_v2 {
        grid-template-columns: 1fr;
    }
}

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

/* As linhas rotuladas a esquerda, o "Atualizar" encostado embaixo a direita. Antes o
   botao vinha depois dos filtros ocupando a largura do bloco, o que dava a ele o peso de
   um passo obrigatorio — e ele so recarrega o que ja esta na tela. */
.rodape_filtros_ating_v2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.linhas_filtro_ating_v2 {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Os 74px do handoff desta tela: e o que alinha FUNDOS, OPCOES e SPLIT numa coluna so,
   em vez de cada linha comecar conforme o tamanho da palavra. As tres cabem nessa
   largura; por isso a regra e daqui, e nao do `.rotulo_linha_v2` compartilhado. */
.linhas_filtro_ating_v2 .rotulo_linha_v2 {
    width: 74px;
}

.btn_atualizar_ating_v2.mantine-Button-root {
    flex: none;
    align-self: flex-end;
    height: 44px;
    padding: 0 36px;
    border-radius: 10px;
    font: 800 14px Manrope, sans-serif;
}

/* ============================================================ CALLOUTS */

/* Lado a lado, e nao empilhados: sao dois recortes irmaos da mesma leva. O de erro leva
   mais espaco porque carrega as pills; quando nao cabem lado a lado, quebram para duas
   linhas. O `min()` com 100% e o que segura o celular: com o minimo em px puro (380/440)
   o cartao passava da tela de 330px e a pagina ganhava scroll horizontal. */
.callouts_ating_v2 {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.callouts_ating_v2 > .cartao_indisp_v2 {
    flex: 1;
    min-width: min(380px, 100%);
    box-sizing: border-box;
}

.callouts_ating_v2 > .cartao_erro_v2 {
    flex: 1.4;
    min-width: min(440px, 100%);
}

/* Pill com nome de erro comprido ("interoperabilidade") quebra a linha em vez de empurrar
   o cartao — so em ultimo caso, no meio da palavra. */
.callouts_ating_v2 .pill_erro_ating_v2 {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* No celular o "Ver" desce para baixo do texto, alinhado com ele (icone 20px + gap 12px):
   ao lado, ele tomava ~60px de uma linha de ~250px e espremia as pills. */
@media (max-width: 575.98px) {
    .callouts_ating_v2 > .cartao_indisp_v2 {
        flex-wrap: wrap;
    }

    .callouts_ating_v2 > .cartao_indisp_v2 > .corpo_aviso_v2 {
        flex-basis: calc(100% - 32px);
    }

    .callouts_ating_v2 > .cartao_indisp_v2 > .btn_ver_ating_v2 {
        margin-left: 32px;
    }
}

.linha_titulo_ating_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font: 800 13.5px Manrope, sans-serif;
}

/* Tres classes de proposito: `tema_simulador_v2.css` carrega depois desta folha (ordem
   alfabetica) e la o titulo do cartao vermelho e `--v-erro-forte`, quase preto. No
   handoff ele e o proprio tijolo, que e o que separa este callout do ambar ao lado. */
.callouts_ating_v2 .cartao_erro_v2 .titulo_indisp_v2 {
    color: var(--v-erro-icone);
}

/* O corpo do callout e filho do `motivos_indisp_v2` do `cartao_aviso_v2`. A folga do
   titulo mora aqui, e nao no conteudo, para as duas nao se somarem. */
.callouts_ating_v2 .motivos_indisp_v2 {
    margin-top: 4px;
    font-size: 12.5px;
}

.callouts_ating_v2 .cartao_erro_v2 .motivos_indisp_v2 {
    margin-top: 9px;
}

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

/* No callout vermelho o badge inverte: fundo cheio e texto branco. O fundo do cartao ja
   e rosa claro, e um badge rosa sobre rosa nao se destacaria. */
.badge_erro_ating_v2 {
    background: var(--v-erro-icone);
    color: #fff;
}

/* As pills substituem a tabela "Erros" que ficava solta abaixo dos avisos: sao duas ou
   tres contagens curtas, e uma tabela de duas colunas para isso pesava mais que o dado. */
.pills_erro_ating_v2 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pill_erro_ating_v2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--v-erro-borda);
    border-radius: 14px;
    background: #fff;
    font: 600 12px Manrope, sans-serif;
    color: var(--v-erro-texto);
}

.pill_erro_ating_v2 b {
    font-weight: 700;
    color: var(--v-erro-icone);
}

/* Contorno na cor do proprio callout, e nao o verde do tema: o botao pertence ao aviso.
   Verde aqui competiria com o "Atualizar" logo acima, que e a acao principal da tela. */
.btn_ver_ating_v2.mantine-Button-root,
.btn_ver_ating_v2.btn {
    flex: none;
    height: 34px;
    padding: 0 14px;
    border: 1.5px solid var(--v-aviso-icone);
    border-radius: 10px;
    background: transparent;
    font: 700 12px Manrope, sans-serif;
    color: #8A6B1F;
}

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

.btn_ver_erro_ating_v2.mantine-Button-root,
.btn_ver_erro_ating_v2.btn {
    border-color: var(--v-erro-icone);
    color: var(--v-erro-icone);
}

.btn_ver_erro_ating_v2.mantine-Button-root:hover,
.btn_ver_erro_ating_v2.btn:hover {
    background: #F8E3DE;
    color: var(--v-erro-icone);
}

/* ============================================================ RODAPE DE EXECUCOES */

/* Duas datas de servico, nao um aviso: cinza mudo, com so o horario em destaque — e ele
   o que alguem vem conferir aqui. Antes eram duas linhas em italico, que na tela lia como
   ressalva. */
.rodape_exec_ating_v2 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

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

.linha_exec_ating_v2 b {
    font-weight: 700;
    color: var(--v-texto-inativo);
}

/* ============================================================ COLLAPSE DO TICKET */

/* Detalhe que abre ao clicar num ticket da listagem: `modal_ticket_atingimentos`
   (`layouts/layout_atingimentos.py`), um modal so para a pagina. Secoes separadas pelo
   divisor do tema (`.cartao_v2 > div ~ div > .cabecalho_secao_v2`). O painel e o
   cabecalho sao os dos outros modais v2 (`painel_modal_remessas_v2`). */
.collapse_ticket_ating_v2 {
    padding: 16px 20px;
}

/* O corpo do modal e o cinza do `painel_modal_remessas_v2`; o detalhe e um cartao branco
   so, por cima dele. */

/* Tres acoes numa linha so, separadas por fio vertical e nao por card. */
.grade_acoes_ating_v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
    background: var(--v-tab-hover);
}

.acao_ating_v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    min-width: 0;
}

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

@media (max-width: 991.98px) {
    .acao_ating_v2 + .acao_ating_v2 {
        border-left: none;
        border-top: 1px solid var(--v-tab-divisoria);
    }
}

.linha_acao_ating_v2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

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

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

/* Botao das acoes e do cabecalho das secoes: os 42px do `btn_acoes_v2` pesam demais numa
   linha de texto de 13px. Tres classes para vencer `.btn_acoes_v2.mantine-Button-root`. */
.btn_acoes_v2.btn_compacto_ating_v2.mantine-Button-root {
    flex: none;
    height: 34px;
    padding: 0 14px;
    font-size: 12.5px;
}

.retorno_acao_ating_v2 {
    padding: 8px 12px;
    font-size: 12.5px;
}

/* "Apenas erros" no cabecalho do resumo, alinhado com o "Atualizar". */
.switch_ating_v2 {
    display: flex;
    align-items: center;
    margin: 0;
    font: 600 12.5px Manrope, sans-serif;
    color: var(--v-texto-inativo);
}

.switch_ating_v2 .form-check {
    margin: 0;
}

.collapse_ticket_ating_v2 .acoes_secao_v2 {
    align-items: center;
}

/* Tabela de erros: duas colunas, nao precisa da largura toda. */
.tabela_curta_ating_v2 {
    max-width: 520px;
}

.rodape_tabela_ating_v2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Detalhe da UR dentro do modal do ticket (`detalhe_ur_modal_ticket`): "Voltar" a
   esquerda do titulo, no lugar do segundo modal em tela cheia que abria por cima. */
.cabecalho_detalhe_ur_ating_v2 {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--v-tab-divisoria);
}

/* Modal do ticket mais largo que o `xl` (1140px): a tabela do resumo tem 11 colunas e a
   ultima, "Detalhes", ficava escondida no scroll horizontal. Ate 1600px, sempre com 24px
   de folga de cada lado. O `--bs-modal-width` e redefinido no proprio `.modal-dialog`
   porque o `.modal-xl` do bootstrap o fixa ali. */
@media (min-width: 576px) {
    .modal_ticket_ating_v2 .modal-dialog {
        --bs-modal-width: min(1600px, calc(100vw - 48px));
        max-width: min(1600px, calc(100vw - 48px));
    }
}

/* No celular (abaixo de 576px) fica a largura do bootstrap: tela inteira menos 8px de
   cada lado. A regra acima valendo ali tirava 48px so da direita — o `.modal-dialog` do
   celular nao centraliza com `margin: auto`. */

/* Cabecalhos de secao com acoes (Resumo: "Apenas erros" + "Atualizar") quebram para a
   linha de baixo em vez de cortar o botao. */
.collapse_ticket_ating_v2 .cabecalho_secao_v2 {
    flex-wrap: wrap;
}

/* Titulo do detalhe e a ref externa, ~45 caracteres sem espaco: sem `min-width: 0` e
   quebra em qualquer ponto ela empurrava o cartao para fora do modal no celular. */
.cabecalho_detalhe_ur_ating_v2 {
    flex-wrap: wrap;
}

.cabecalho_detalhe_ur_ating_v2 > div {
    min-width: 0;
}

.cabecalho_detalhe_ur_ating_v2 .titulo_acao_ating_v2 {
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .painel_modal_remessas_v2.painel_modal_ticket_ating_v2 .modal-body {
        padding: 10px;
    }

    .painel_modal_ticket_ating_v2 .collapse_ticket_ating_v2 {
        padding: 14px 12px;
    }

    /* Os cartoes de valor do detalhe (`get_row_resumo`) vem com `width` inline de 1/6:
       no celular, um por linha — dois ja quebravam "Constituido" no meio da palavra.
       `!important` so por causa do inline. */
    .painel_modal_ticket_ating_v2 .card_consulta {
        width: 100% !important;
        min-width: 0;
        margin-right: 0 !important;
    }
}

/* Primeira linha do modal: Acoes a esquerda e Detalhamento de erros a direita. Os erros
   somem (`hidden`) quando o ticket nao tem erro, e ai as Acoes ocupam a linha toda. */
.linha_topo_ating_v2 {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.linha_topo_ating_v2 > .secao_acoes_ating_v2 {
    flex: 1.4 1 0;
    min-width: 0;
}

.linha_topo_ating_v2 > #outerDiv_erros_atingimentos {
    flex: 1 1 0;
    min-width: 0;
}

/* Ao lado das acoes a tabela usa a coluna inteira, sem o teto de 520px. */
.linha_topo_ating_v2 .tabela_curta_ating_v2 {
    max-width: none;
}

/* Com os erros ao lado, as tres acoes empilham: cada uma vira uma linha (texto + botao),
   separadas por fio horizontal. Lado a lado na meia largura, Termo e Retry limbo sobravam
   vazios embaixo enquanto o Retry crescia com as pills. */
.linha_topo_ating_v2:has(> #outerDiv_erros_atingimentos:not(.hidden)) .grade_acoes_ating_v2 {
    grid-template-columns: 1fr;
}

.linha_topo_ating_v2:has(> #outerDiv_erros_atingimentos:not(.hidden)) .acao_ating_v2 + .acao_ating_v2 {
    border-left: none;
    border-top: 1px solid var(--v-tab-divisoria);
}

.linha_topo_ating_v2:has(> #outerDiv_erros_atingimentos:not(.hidden)) .acao_ating_v2 {
    padding: 12px 16px;
}

/* Abaixo de 992px nao cabe lado a lado: os erros descem, com o mesmo divisor das outras
   secoes do cartao. */
@media (max-width: 991.98px) {
    .linha_topo_ating_v2 {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .linha_topo_ating_v2 > .secao_acoes_ating_v2,
    .linha_topo_ating_v2 > #outerDiv_erros_atingimentos {
        flex: none;
    }

    .linha_topo_ating_v2 > #outerDiv_erros_atingimentos:not(.hidden) > .cabecalho_secao_v2 {
        border-top: 1px solid var(--v-tab-divisoria);
        margin-top: 16px;
        padding-top: 16px;
    }
}