/* ═══════════════════════════════════════════════════════════════
   Padrão das telas de listagem: barra de filtros e cartões de resumo (KPI).
   Carregado no baseLayout. Objetivo: o mesmo tamanho, alinhamento e ritmo
   em todos os módulos, sem depender de utilitários soltos em cada template.
   ═══════════════════════════════════════════════════════════════ */

/* ── Barra de filtros (.filtros-box) ────────────────────────────
   Controles e botões com a MESMA altura (38px, igual ao .lk-sm), alinhados
   pela base da linha: o botão "Filtrar" fica na linha dos campos, não do rótulo. */
.filtros-box { --flt-h: 38px; }
.filtros-box > .row {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
    padding: 1rem !important;
    align-items: flex-end !important;
}
.filtros-box .row > [class*="col-"].p-1 { padding: 0 calc(var(--bs-gutter-x) * .5) !important; }
.filtros-box .form-label {
    margin-bottom: .35rem;
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: .15rem;
}
.filtros-box .form-control,
.filtros-box .form-select,
.filtros-box .form-control-sm,
.filtros-box .form-select-sm {
    height: var(--flt-h);
    min-height: var(--flt-h);
    font-size: .875rem;
}
/* Botões da barra (Filtrar, Limpar, Imprimir…): altura única, conteúdo centralizado.
   Os botões do campo de consulta (.lk-group) têm regra própria em lookup.css. */
.filtros-box :not(.lk-group) > .btn,
.filtros-box .row > [class*="col-"] > .btn {
    height: var(--flt-h);
    min-height: var(--flt-h);
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}
/* "Limpar" (só ícone): quadrado do tamanho do campo */
.filtros-box :not(.lk-group) > .btn.btn-outline-secondary:has(> i:only-child) { width: var(--flt-h); padding: 0; flex: 0 0 var(--flt-h); }
/* coluna de ações: botões lado a lado, sem esticar além do necessário */
.filtros-box .d-flex > .btn.flex-fill { min-width: 0; }

/* Causa dos cartões "exagerados": o .card global tem margin-bottom (custom.css). Com h-100 dentro de uma
   coluna, o cartão se estica para ocupar também essa margem (≈ +24px de altura). Em linhas com gutter
   (g-2/3/4) o espaçamento já vem do gutter, então o cartão de altura total não leva margem. */
.row[class*="g-"] > [class*="col"] > .card.h-100,
.row[class*="gy-"] > [class*="col"] > .card.h-100 { margin-bottom: 0; }

/* ── Cartões de resumo (KPI) ────────────────────────────────────
   <div class="card kpi-card shadow-sm border-0 h-100">
     <div class="card-body kpi-body">
       <div class="kpi-ico" style="background:…"><i class="bi bi-…"></i></div>
       <div><div class="kpi-label">Rótulo</div><div class="kpi-valor" id="…">—</div></div>
     </div></div>
   Compacto: ícone 38px, valor 1.15rem — o mesmo tamanho em todos os cartões da linha. */
.kpi-card .kpi-body {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .95rem !important;
}
.kpi-card .kpi-ico {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
}
.kpi-card .kpi-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.25;
    color: var(--text-secondary);
}
.kpi-card .kpi-valor {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

/* ── Larguras por TIPO de campo nas barras de filtro ────────────
   Em vez de frações da linha (col-md-3/2…), cada campo recebe o tamanho de que precisa:
   o período não rouba espaço do lookup, o botão de ação não vira uma coluna inteira e,
   em tela estreita, os campos quebram de linha em vez de ficarem espremidos.
   Uso (filhos diretos de .row):
     .flt-periodo  campo de período (275px)
     .flt-lookup   Cód. + nome + lupa (cresce de 320px até 460px)
     .flt-select   select curto: status, tipo, filial (180px) · .flt-select-lg para nomes longos (260px)
     .flt-texto    busca livre / descrição (cresce de 240px até 380px)
     .flt-acoes    Filtrar / Limpar / Imprimir (largura do conteúdo) */
.row > .flt-periodo { flex: 0 0 275px; width: 275px; max-width: 100%; }
.row > .flt-lookup  { flex: 1 1 320px; width: auto; min-width: 300px; max-width: 460px; }
.row > .flt-select  { flex: 0 0 180px; width: 180px; max-width: 100%; }
.row > .flt-select-lg { flex: 0 0 260px; width: 260px; max-width: 100%; }
.row > .flt-texto   { flex: 1 1 240px; width: auto; min-width: 200px; max-width: 380px; }
.row > .flt-acoes   { flex: 0 0 auto; width: auto; display: flex; gap: .5rem; align-items: flex-end; }
.row > .flt-acoes > .btn.w-100, .row > .flt-acoes > .btn.flex-fill { width: auto; flex: 0 0 auto; }
.filtros-box > .row > .flt-acoes { padding-bottom: 0; }

@media (max-width: 767.98px) {
    .row > .flt-periodo, .row > .flt-lookup, .row > .flt-select, .row > .flt-select-lg, .row > .flt-texto {
        flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%;
    }
    .row > .flt-acoes { flex: 1 1 100%; }
    .row > .flt-acoes > .btn:not(.btn-outline-secondary) { flex: 1 1 auto; }
}