/* ---------------------------------------------------------------------------
   Download de Agendas — handoff `DOWNLOAD_AGENDAS_PORTAL.md`.

   So o que e desta tela: o cartao, a linha do cliente, a grade de quatro campos e os
   botoes de acao. Os chips de Bandeiras/Agrupamento, a linha "ROTULO -> controles" e a
   tipografia dos campos Mantine vem de `tema_conteudo_v2.css` (`.chips_v2`,
   `.linha_filtro_v2`, `.form_v2`) — sao os mesmos dos Atingimentos.

   Monta em `download_agendas_layout` (`layouts/erp/agendas.py`).
   --------------------------------------------------------------------------- */

/* Sem a largura maxima de 1080px do handoff: a previa desenha abaixo do cartao e ocupa a
   tela inteira, e um cartao mais estreito que a tabela que ele filtra fica desalinhado. */
.cartao_dl_v2.mantine-Card-root {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 22px;
    border-color: var(--v-borda-clara);
    border-radius: 10px;
    box-shadow: none;
}

/* ============================================================ CLIENTE */

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

.campo_cliente_dl_v2 {
    width: 400px;
    max-width: 100%;
}

/* Quadrado do tamanho do campo ao lado, sem texto: e a mesma acao do select (recarregar a
   lista), e um botao rotulado ali competiria com o "Baixar Excel" la embaixo. */
.btn_refresh_dl_v2.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--v-verde-escuro);
    color: #fff;
}

.btn_refresh_dl_v2.btn:hover,
.btn_refresh_dl_v2.btn:focus {
    background: var(--v-marca-hover);
}

.btn_refresh_dl_v2.btn img,
.btn_refresh_dl_v2.btn svg {
    width: 17px;
    height: 17px;
}

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

/* Quatro colunas iguais, ao contrario dos Atingimentos: aqui nenhum dos campos carrega
   dois valores, entao nao ha um que precise de mais espaco que os outros. */
.grade_filtros_dl_v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

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

/* Data de comparacao e o unico campo com um controle colado: o × que limpa. O
   `align-items: flex-end` alinha o × pela base do input, e nao pela do rotulo. */
.campo_comp_dl_v2 {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.campo_comp_dl_v2 > *:first-child {
    flex: 1;
    min-width: 0;
}

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

/* ============================================================ ACOES */

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

.btn_acao_dl_v2.mantine-Button-root {
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font: 800 13.5px Manrope, sans-serif;
}

/* "Previa" e contorno porque nao e a acao principal: ela mostra na tela o que o outro
   botao entrega em arquivo. */
.btn_acao_dl_v2.mantine-Button-root[data-variant="outline"] {
    border-width: 1.5px;
    font-weight: 700;
}