/* ---------------------------------------------------------------------------
   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; abaixo de 440px eles quebram para duas linhas. */
.callouts_ating_v2 {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.callouts_ating_v2 > .cartao_indisp_v2 {
    flex: 1;
    min-width: 380px;
    box-sizing: border-box;
}

.callouts_ating_v2 > .cartao_erro_v2 {
    flex: 1.4;
    min-width: 440px;
}

.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);
}