/* ---------------------------------------------------------------------------
   Filtros do Acompanhamento de Agendas no tema novo.

   Veste os dois cartoes do `acompanhamento_layout` (`layouts/erp/gestao_fidc.py`).
   Campos, checkboxes e botao ja vem vestidos pelo `filtros_solic_v2`
   (`tema_solicitacoes_v2.css`), que os cartoes tambem levam; aqui entram so a moldura, o
   rotulo de secao, a linha que distribui os campos e o segmented control, no mesmo
   desenho do `visao_estoque_v2` (`tema_estoque_v2.css`).

   Nenhuma regra daqui disputa com o `filtros_solic_v2`: as classes sao todas novas.
   Por isso a ordem alfabetica dos assets nao importa para este arquivo.
   --------------------------------------------------------------------------- */

.filtros_acomp_v2 {
    border-color: var(--v-borda-clara);
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 16px;
}

.rotulo_filtros_acomp_v2 {
    margin-bottom: 14px;
    font: 700 12px Manrope, sans-serif;
    letter-spacing: .6px;
    color: var(--v-verde-escuro);
}

/* Campos lado a lado, alinhados pela base: rotulos de uma ou duas palavras e o botao,
   que nao tem rotulo, terminam na mesma linha. */
.linha_filtros_acomp_v2 {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.linha_filtros_acomp_v2 .mantine-DatePickerInput-root {
    width: 190px;
}

.select_acomp_v2 {
    width: 260px;
}

/* O rotulo de quem nao e `InputWrapper` (segmented, grupo de checkboxes), igual ao que o
   `filtros_solic_v2` poe no `label` do Mantine. */
.rotulo_campo_acomp_v2 {
    display: block;
    margin-bottom: 8px;
    font: 700 12px Manrope, sans-serif;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--v-verde-escuro);
}

/* Checkbox numa linha de campos de 42px: centralizado na altura do campo, e nao colado
   na base. */
.check_linha_acomp_v2 {
    display: flex;
    align-items: center;
    min-height: 42px;
}

/* --- segmented control da otica ---------------------------------------- */
.segmentado_acomp_v2 .mantine-SegmentedControl-root {
    background: var(--v-tab-cabecalho);
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    padding: 3px;
}

.segmentado_acomp_v2 .mantine-SegmentedControl-indicator {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(10, 30, 24, .12);
}

.segmentado_acomp_v2 .mantine-SegmentedControl-label {
    padding: 7px 16px;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

.segmentado_acomp_v2 .mantine-SegmentedControl-label[data-active] {
    font-weight: 800;
    color: var(--v-verde-escuro);
}

/* ---- estreito ---- */

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

    .linha_filtros_acomp_v2,
    .linha_filtros_acomp_v2 > *,
    .linha_filtros_acomp_v2 .mantine-DatePickerInput-root,
    .select_acomp_v2,
    .segmentado_acomp_v2 .mantine-SegmentedControl-root {
        width: 100%;
    }

    .linha_filtros_acomp_v2 {
        gap: 14px;
    }
}