/*
 * Celular e tablet — mobile-first sobre o Design System Falcon (design-system/falcon/design-system.html).
 * Carregado por último em cada página, depois do tema Falcon e dos CSS próprios. Nada aqui cria um
 * visual novo: são os mesmos tokens do Falcon (--falcon-*: cores, bordas, sombras, fontes), os mesmos
 * componentes (navbar-top/navbar-glass, offcanvas, cards, badges, form-switch) reorganizados para a
 * tela pequena. No desktop (>= 1200px, menu lateral fixo) nada muda.
 *
 * Faixas (as do Bootstrap): celular < 576px · tablet 576–1199px. Abaixo de 1200px o Falcon recolhe o
 * menu lateral (navbar-expand-xl) — é aí que entram a barra superior enxuta, a navegação inferior e o
 * menu em offcanvas (js/layout.js). A tipografia nessa faixa é a escala padrão do Falcon (raiz 16px; o
 * "modo compacto" de 14px de style.css vale só no desktop).
 */

/* Utilitário usado nos componentes abaixo (texto que encurta com "…" dentro de flex) */
.min-w-0 { min-width: 0; }

/* Navegação inferior: só existe abaixo de 1200px */
.bn-nav-inferior { display: none; }

/* =====================================================================================================
   SHELL (< 1200px): barra superior, navegação inferior, menu em offcanvas
   ===================================================================================================== */
@media (max-width: 1199.98px) {
    /* O conteúdo do menu lateral foi para o offcanvas (layout.js): o menu lateral some */
    .navbar-vertical.navbar-expand-xl { display: none !important; }

    /* ---------- Barra superior: navbar-top + navbar-glass do Falcon, de ponta a ponta ---------- */
    .content > .navbar-top {
        position: sticky;
        top: 0;
        z-index: 1020;
        min-height: 3.75rem;
        margin: 0 -1rem 1rem;
        padding: 0.5rem 1rem;
        border-radius: 0;
        background-color: var(--falcon-bg-navbar-glass);
        box-shadow: 0 1px 0 var(--falcon-border-color);
        gap: 0.5rem;
    }
    /* o ☰ do topo abria o menu lateral; agora o menu é o "Menu" da navegação inferior */
    .navbar-top .navbar-toggler-humburger-icon { display: none !important; }
    .navbar-top .topbar-spacer { display: none; }
    .navbar-top .bn-topo-marca { flex-shrink: 0; padding: 0; }
    .navbar-top .bn-topo-marca .bn-navbar-wordmark { font-size: 1.125rem; }
    /* com o seletor de empresa, a marca sai: o espaço fica para o nome da empresa (a marca segue no menu) */
    .navbar-top:has(#empresa-global-nav-item:not(.hidden)) .bn-topo-marca { display: none !important; }
    /* tema e tela cheia vão para o menu da conta (switch "Tema escuro"); pendências, para a navegação inferior */
    .navbar-top #theme-toggle,
    .navbar-top #tela-cheia-toggle,
    .navbar-top .nav-item:has(> #topo-sino) { display: none !important; }
    .navbar-top .navbar-nav-icons .nav-item { margin-right: 0 !important; }

    /* ---------- Seletor de empresa: ocupa o meio da barra, com o nome da empresa sempre à vista ---------- */
    .navbar-top > .navbar-nav:has(#empresa-global-nav-item) { flex: 1 1 auto; min-width: 0; }
    #empresa-global-nav-item { flex: 1 1 auto; min-width: 0; position: static !important; }
    #empresa-global-toggle {
        width: 100%;
        min-height: 2.75rem;
        padding: 0.25rem 0.75rem;
        text-align: left;
    }
    #empresa-global-toggle .bn-empresa-texto { flex: 1 1 auto; min-width: 0; }
    #empresa-global-nome { max-width: 100%; font-size: 0.875rem; }
    #empresa-global-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    /* o painel de troca abre logo abaixo da barra, na largura da tela (antes passava da borda) */
    #empresa-global-painel {
        position: absolute;
        top: calc(100% + 0.25rem) !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none;
        transform: none !important;
    }
    #empresa-global-painel::before,
    #empresa-global-painel::after { display: none; }
    #empresa-global-sugestoes { max-height: min(50dvh, 22rem) !important; }
    #empresa-global-sugestoes .dropdown-item { padding-top: 0.625rem; padding-bottom: 0.625rem; white-space: normal; }

    /* ---------- Consolidação (ao lado da empresa): só o ícone, para o nome da empresa seguir à vista ----------
       (o critério escolhido aparece no selo "Consolidação" do card de filtro e no painel, que abre na largura da tela) */
    #consolidacao-nav-item { flex: 0 0 auto; position: static !important; margin-left: 0.5rem !important; }
    #consolidacao-toggle { min-height: 2.75rem; padding: 0.25rem 0.75rem; }
    /* !important: o texto tem a classe d-flex do Bootstrap (que também é !important) */
    #consolidacao-toggle .bn-empresa-texto,
    #consolidacao-toggle .fa-chevron-down { display: none !important; }
    #consolidacao-painel {
        position: absolute;
        top: calc(100% + 0.25rem) !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none;
        transform: none !important;
    }
    #consolidacao-painel::before,
    #consolidacao-painel::after { display: none; }

    /* ---------- Conta: menu da conta não passa da tela ---------- */
    .bn-usuario-menu { width: min(18rem, calc(100vw - 1.5rem)); }

    /* ---------- Rodapé fixo do desktop: no celular o fundo da tela é da navegação inferior ---------- */
    .bn-rodape { display: none !important; }

    /* ---------- Navegação inferior (layout.js): ao alcance do polegar ---------- */
    .bn-nav-inferior {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        justify-content: center;
        padding: 0 0.25rem env(safe-area-inset-bottom);
        background-color: var(--falcon-bg-navbar-glass);
        border-top: 1px solid var(--falcon-border-color);
        box-shadow: 0 -0.125rem 0.75rem rgba(0, 0, 0, 0.05);
    }
    .bn-nav-inferior__item {
        flex: 1 1 0;
        max-width: 7.5rem;
        min-height: 3.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.375rem 0.125rem;
        border: 0;
        background: none;
        color: var(--falcon-navbar-vertical-default-link-color);
        font-family: var(--falcon-font-sans-serif);
        font-size: 0.6944444444rem; /* fs-11 do Falcon */
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s ease-in-out;
    }
    .bn-nav-inferior__item:hover,
    .bn-nav-inferior__item:focus-visible { color: var(--falcon-navbar-vertical-default-link-hover-color); }
    .bn-nav-inferior__item:focus-visible { outline: 2px solid var(--falcon-primary); outline-offset: -4px; border-radius: 0.5rem; }
    .bn-nav-inferior__item.active { color: var(--falcon-primary); font-weight: 600; }
    .bn-nav-inferior__icone { position: relative; font-size: 1.125rem; line-height: 1; }
    .bn-nav-inferior__rotulo { white-space: nowrap; }
    .bn-nav-inferior__selo {
        position: absolute;
        top: -0.45rem;
        left: 0.85rem;
        min-width: 1.1rem;
        padding: 0.2rem 0.3rem;
        font-size: 0.625rem;
        box-shadow: 0 0 0 2px var(--falcon-card-bg);
    }
    .bn-nav-inferior__selo[hidden] { display: none; }
    /* o conteúdo termina acima da navegação inferior */
    html.bn-com-nav-inferior .content { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
    .modo-espectador .bn-nav-inferior { display: none; }

    /* ---------- Menu completo (offcanvas-start do Falcon, aberto pelo "Menu") ---------- */
    .bn-menu-movel { --falcon-offcanvas-width: min(20rem, 86vw); }
    .bn-menu-movel .offcanvas-header { min-height: 3.75rem; padding: 0.5rem 1rem; }
    .bn-menu-movel .offcanvas-body { padding-bottom: env(safe-area-inset-bottom) !important; overflow-x: hidden; }
    /* o .navbar-vertical do Falcon tem margem negativa no celular (para o menu "hambúrguer" antigo) */
    .bn-menu-movel__nav.navbar-vertical {
        position: static;
        display: block;
        width: auto;
        max-width: none;
        margin: 0 !important;
        padding: 0.25rem 1.25rem 1.5rem;
        z-index: auto;
    }
    .bn-menu-movel .navbar-vertical-content {
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        background: none !important;
    }
    .bn-menu-movel .navbar-nav { font-size: 0.9375rem; }
    .bn-menu-movel .navbar-nav .nav-link { padding: 0.625rem 0; }
    .bn-menu-movel .navbar-nav .nav .nav-item .nav-link { padding: 0.5rem 0 0.5rem 1.75rem; }
    .bn-menu-movel .navbar-nav .nav-link-icon { width: 1.75rem; min-width: 1.75rem; font-size: 1rem; }
    .bn-menu-movel .navbar-vertical-label-wrapper { margin-top: 1rem !important; }

    /* ---------- Páginas: título da tela na escala do Falcon (o maior título é o h4) ---------- */
    .content > .mb-4:has(> div > h2) { margin-bottom: 1rem !important; align-items: center !important; }
    .content h2.mb-0,
    .content > h2,
    .content > .d-flex > h2 { font-size: 1.44rem; }

    /* Avisos do topo (BETA, sem empresa, sessão): compactos */
    .content > .alert { padding: 0.625rem 0.875rem; font-size: 0.8333333333rem; }
    .content > .alert .btn-close { padding: 0.5rem; margin: -0.375rem -0.375rem -0.375rem 0; }
    .bn-aviso-beta__texto { display: none; }

    /* Nada estoura para o lado: o que é largo (tabelas) rola dentro do próprio contêiner */
    .content { min-width: 0; }
    .card, .card-body { min-width: 0; }
    .content table:not(.table-responsive table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* células numa linha só (a tabela rola para o lado) em vez de colunas espremidas */
    .table-responsive .table th:not(.text-wrap):not(.text-break),
    .table-responsive .table td:not(.text-wrap):not(.text-break) { white-space: nowrap; }

    /* Modais grandes (lg/xl) usam a largura da tela */
    .modal-lg, .modal-xl { max-width: calc(100vw - 2rem); }

    /* Cabeçalhos de card com muitos botões quebram em linhas */
    .card-header { flex-wrap: wrap; row-gap: 0.5rem; }
    .card-header > .d-flex { flex-wrap: wrap; }

    /* Abas e listas de botões que não cabem rolam para o lado, sem barra de rolagem aparente */
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link,
    .nav-pills .nav-link { white-space: nowrap; }
}

/* =====================================================================================================
   FILTROS DO PAINEL (dashboard/shared.js: filtrosResponsivos) — resumo + bottom sheet
   ===================================================================================================== */
.bn-filtros-resumo__seta,
.bn-filtros-resumo__botao {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bn-filtros-resumo__botao { position: relative; }
.bn-filtros-resumo__selo {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    font-size: 0.625rem;
    box-shadow: 0 0 0 2px var(--falcon-card-bg);
}
.bn-filtros-offcanvas.offcanvas-bottom {
    height: auto;
    max-height: 88dvh;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
.bn-filtros-offcanvas .offcanvas-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important; }
/* dentro do bottom sheet: um filtro por linha, na largura toda */
.bn-filtros-offcanvas .filtros {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
}
.bn-filtros-offcanvas .filtros > * { width: 100%; min-width: 0; padding-right: 0 !important; border-right: 0 !important; }
/* entre os filtros padrão e os próprios da tela (um por linha aqui): uma linha divisória */
/* faixas de datas (Análise Detalhada): um botão por linha, alinhado à esquerda */
.bn-filtros-offcanvas .filtro-faixa { flex: 1 1 100%; justify-content: flex-start; }
.bn-filtros-offcanvas .filtros > .filtros__quebra { flex-basis: auto; height: 0; border-top: 1px solid var(--falcon-border-color) !important; }
.bn-filtros-offcanvas .filtros select,
.bn-filtros-offcanvas .filtros input:not([type='checkbox']):not([type='radio']) { width: 100% !important; max-width: none !important; }
.bn-filtros-offcanvas .filtros .form-select,
.bn-filtros-offcanvas .filtros .form-control { min-height: 2.75rem; font-size: 1rem; }
.bn-filtros-offcanvas .filtros .btn { min-height: 2.75rem; }
.bn-filtros-offcanvas .filtro-nao-aplicavel { display: flex; }
.bn-filtros-offcanvas .filtro-nao-aplicavel > * { flex: 1 1 100%; min-width: 0; }
.bn-filtros-offcanvas .filtros-crm__data { width: 100%; }
/* Período: o tipo (Mês/Trimestre/…) numa linha e o grupo escolhido na de baixo */
.bn-filtros-offcanvas .filtro-periodo { flex-direction: column; align-items: stretch !important; }
.bn-filtros-offcanvas .filtro-periodo > * { width: 100%; min-width: 0; }
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-dia,
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-mes,
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-trimestre,
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-personalizado { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-dia > .form-control,
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-mes > .form-control,
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-trimestre > .form-select { flex: 1 1 0; width: auto !important; }
.bn-filtros-offcanvas .filtro-periodo :is(.filtro-periodo-dia, .filtro-periodo-mes) > .btn { flex: 0 0 2.75rem; }
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-personalizado > .form-control { flex: 1 1 0; width: auto !important; }
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-personalizado > .btn { flex: 1 1 100%; }
.bn-filtros-offcanvas .form-check { min-height: 2.75rem; display: flex; align-items: center; gap: 0.5rem; }

/* =====================================================================================================
   CELULAR E TABLET EM PÉ (< 768px)
   ===================================================================================================== */
@media (max-width: 767.98px) {
    /* "KPI counter row" do Falcon na Análise Detalhada (.kpi-linha-falcon): 2 por linha, número em cima e
       rótulo embaixo, na escala de KPI do Falcon (h5) — cabe mais na tela sem perder a leitura */
    .kpi-linha-falcon .fs-8 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
        font-size: 1.2rem !important;
        overflow-wrap: anywhere;
    }
    .kpi-linha-falcon .fs-8 > span { margin: 0 !important; }
    .kpi-linha-falcon .fs-8 { font-size: 0.9375rem !important; }
    .kpi-linha-falcon .fs-10 { font-size: 0.6944444444rem !important; }

    /* Dropdowns (autocomplete, menus) nunca mais largos que a tela */
    .dropdown-menu { max-width: calc(100vw - 1.5rem); }
}

/* =====================================================================================================
   CELULAR (< 576px)
   ===================================================================================================== */
@media (max-width: 575.98px) {
    /* Campos de filtro com largura mínima fixa (inline, ex.: min-width: 380px) ocupam a linha toda */
    .form-control[style*="min-width"],
    .form-select[style*="min-width"],
    .form-control.w-auto,
    .form-select.w-auto {
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 100%;
    }
    .input-group > .form-control[style*="min-width"] { width: 1% !important; flex: 1 1 auto; }

    /* Botões de barras de ação dividem a linha (fácil de tocar) */
    .card-header .btn, .card-body > .d-flex > .btn { flex: 1 1 auto; }
    .card-body.d-flex.flex-wrap > .btn { flex: 1 1 auto; }
    .card-body.d-flex.flex-wrap > span.ms-auto { flex: 1 1 100%; margin-left: 0 !important; }

    /* Barra de filtros fora do Painel (telas com .filtros próprios): um filtro por linha */
    .content .filtros { gap: 0.5rem; padding: 0.75rem; margin-bottom: 1rem; }
    .content .filtros > * { flex: 1 1 100%; min-width: 0; }
    .content .filtros > *:not(:last-child) { padding-right: 0; border-right: 0; }
    .content .filtros > select,
    .content .filtros > input:not([type='checkbox']):not([type='radio']) { width: 100%; }

    /* Modais em tela cheia (padrão modal-fullscreen-sm-down do Bootstrap/Falcon) */
    .modal-dialog,
    .modal-lg, .modal-xl {
        max-width: none;
        width: 100%;
        margin: 0;
        min-height: 100%;
    }
    .modal-dialog-centered { align-items: stretch; }
    .modal-content {
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .modal-dialog-scrollable { height: 100dvh; }
    .modal-dialog-scrollable .modal-content { max-height: 100dvh; }
    .modal-header { position: sticky; top: 0; z-index: 2; background-color: var(--falcon-modal-bg, var(--falcon-card-bg)); }
    .modal-footer { flex-wrap: wrap; gap: 0.5rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
    .modal-footer > .btn { flex: 1 1 auto; min-height: 2.75rem; }
    .modal-footer > span, .modal-footer > .me-auto { flex: 1 1 100%; margin: 0 !important; }

    /* Campos com 16px: o iPhone não dá zoom ao focar */
    .form-control:not(table .form-control),
    .form-select:not(table .form-select),
    textarea.form-control:not(table textarea) { font-size: 1rem; }

    /* Pendências: títulos de grupo ("Importação"/"Conta Azul") à esquerda, visíveis sem rolar */
    .tabela-pendencias thead tr:first-child th { text-align: left !important; }

    /* Árvores (Categoria Genérica etc.): a linha quebra — botões de ação descem para a direita */
    .arvore-linha { flex-wrap: wrap; row-gap: 0.25rem; }
    .arvore-linha > span { min-width: 0; overflow-wrap: anywhere; }
    .arvore-linha > .flex-grow-1 { flex: 1 1 0; min-width: 0; }
    .arvore-linha > .d-flex.gap-1 { margin-left: auto; }
}

/* =====================================================================================================
   TELAS DE TOQUE (celular/tablet): alvos de toque confortáveis (~44px)
   ===================================================================================================== */
@media (pointer: coarse) {
    .btn { min-height: 2.75rem; }
    .btn-sm, .btn-group-sm > .btn { min-height: 2.5rem; }
    .btn-close { padding: 0.75rem; }
    .form-control-sm, .form-select-sm { min-height: 2.5rem; }
    .form-control, .form-select { min-height: 2.75rem; }
    .form-check-input { width: 1.25em; height: 1.25em; }
    .form-switch .form-check-input { width: 2.25em; }
    .dropdown-item { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .nav-tabs .nav-link, .nav-pills .nav-link { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .page-link { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
    /* links de ação dentro de tabelas (ícones) com área maior */
    td .btn-link.btn-sm { min-width: 2.5rem; min-height: 2.5rem; }
    /* botões só de ícone ou "link" dentro de texto não esticam */
    .btn-link.p-0, .btn.p-0 { min-height: 0; }
    /* "Expandir o card" (util/expandir-cards.js): o ícone é pequeno; a área de toque fica em 44px, centrada no
       mesmo lugar (o botão é absoluto no cabeçalho — css/dashboard.css) */
    .card-expandir-cabecalho { padding-right: 3rem !important; }
    .card-expandir {
        right: 0.25rem;
        width: 2.75rem;
        height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* o mesmo para o "Expandir o gráfico" da Visão Geral (.vg__expandir, inline no cabeçalho do card): a
       margem negativa mantém o ícone no lugar e a área de toque cresce em volta dele */
    .vg__expandir {
        width: 2.5rem;
        height: 2.5rem;
        margin: -0.5rem -0.5rem -0.5rem 0.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* =====================================================================================================
   AJUSTES POR ÁREA (redesign para celular/tablet, 2026-10-28). O shell (barra superior, navegação
   inferior, offcanvas, filtros do Painel, alvos de toque) fica nas seções acima; aqui entra o que é de
   uma tela ou de um grupo de telas, cada grupo no seu bloco.
   ===================================================================================================== */

/* ---------- ÁREA A: Painel Executivo — Visão Geral/Detalhada, Receitas, Despesas, Fluxo de Caixa,
   Clientes e Fornecedores, Serviços e Contratos, Categorias Padrões, IA-NEXO, Pendências, Regras,
   Compartilhar/Apresentação ---------- */

/* ----- Tablet (768–1199px): aproveitar a largura em vez de empilhar como no celular ----- */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* Visão Geral: "Receitas/Despesas vencidas em aberto" lado a lado (o fluxo segue na largura toda) —
       um embaixo do outro cada um ficava com metade do card vazia */
    .vg__linha--principal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vg__linha--principal > .vg__fluxo { grid-column: 1 / -1; }
}
/* Serviços e Contratos: os 4 indicadores em 2 × 2 (em 3 + 1 o último ficava sozinho na linha) */
@media (min-width: 641px) and (max-width: 991.98px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pendências (tablet): os títulos de grupo da tabela ("Importação"/"Conta Azul") à esquerda, visíveis
   sem rolar a tabela para o lado (no celular a seção CELULAR já faz isso) */
@media (max-width: 1199.98px) {
    .tabela-pendencias thead tr:first-child th { text-align: left !important; }
}

/* ----- Celular e tablet em pé (< 768px) ----- */
@media (max-width: 767.98px) {
    /* Tabelas de lançamentos (criarTabelaExemplo — Receitas/Despesas, Clientes/Fornecedores, extratos):
       o rodapé em duas linhas — "1 a 10 de N — Ver todos" numa, Anterior/Próximo dividindo a outra
       (num card estreito o "Ver todos" quebrava em três linhas ao lado dos botões) */
    [data-tabela="rodape"] > .col { flex: 1 1 100%; width: 100%; }
    [data-tabela="rodape"] > .col-auto { width: 100%; gap: 0.5rem; }
    [data-tabela="rodape"] > .col-auto > .btn { flex: 1 1 0; margin-left: 0 !important; }
    [data-tabela="rodape"] [data-list-info] { display: inline-block !important; }
    /* Paginador "« Anterior · Página 1 de N · Próxima » · Itens por página" (criarPaginador — Pendências,
       Serviços e Contratos, Regras): os botões dividem a 1ª linha, a página e o tamanho vão para baixo */
    .bn-paginador { row-gap: 0.75rem; }
    .bn-paginador__botao { flex: 1 1 0; order: 1; }
    .bn-paginador__info { flex: 1 1 100%; order: 2; text-align: center; }
    .bn-paginador__rotulo { order: 3; margin-left: 0 !important; flex: 1 1 auto; }
    .bn-paginador__tamanho { order: 4; flex: 0 0 auto; }
    /* Categorias Padrões: a 1ª coluna (o tipo de operação) fica fixa enquanto a tabela rola para o lado */
    .tabela-categorias-padrao th:first-child,
    .tabela-categorias-padrao td:first-child { position: sticky; left: 0; z-index: 1; background: var(--falcon-card-bg); }
    .tabela-categorias-padrao thead th:first-child { background: var(--falcon-tertiary-bg, var(--falcon-card-bg)); z-index: 2; }
    /* "Top clientes/fornecedores": o botão Repetir numa linha só */
    [data-corrida="repetir"] { white-space: nowrap; }
}

/* ----- Celular (< 576px) ----- */
@media (max-width: 575.98px) {
    /* Receitas/Despesas: a página é comprida — gráficos mais baixos sem perder leitura */
    .crm-leads__rosca { min-height: 13rem; }                   /* "Juros, multa e desconto": a rosca */
    .estados-mapa .estados-mapa__grafico { height: 360px; }   /* o mapa do Brasil */
    .crm-anos__grafico { min-height: 380px; }                 /* "por mês · comparativo por ano" */
    /* Abas "Receita total · A vencer · Recebido · Vencido": mais juntas (cabem três e meia; a lista rola) */
    .crm-abas .crm-abas__aba { padding: 0.75rem 0.8rem; font-size: 0.9rem; gap: 0.4rem; }
    /* "<Valor> por estado": cabeçalho em três linhas — título; busca + filtro na largura toda; ◀ ▶ à direita */
    .card-estados .card-header > .d-flex { gap: 0.5rem; }
    .card-estados .card-header > .d-flex > h5 { flex: 1 1 100%; }
    .card-estados .card-header > .d-flex > .ms-xl-4 { flex: 1 1 100%; }
    .card-estados .card-header > .d-flex > .ms-xl-4 .card-estados__busca { flex: 1 1 auto; width: auto; }
    .card-estados .card-header > .d-flex > .ms-auto { flex: 1 1 100%; justify-content: flex-end; }
    .card-estados .card-header > .d-flex > .ms-auto > .btn,
    .card-estados .card-header .dropdown > .btn { flex: 0 0 auto; min-width: 2.75rem; }
    /* "Top clientes/fornecedores": a semana e o "Repetir" numa linha própria embaixo do título (lado a
       lado com o título o botão saía cortado pela borda do card) */
    .card-header .row:has([data-corrida="repetir"]) > .col-auto.ms-auto { flex: 1 1 100%; justify-content: space-between; margin-top: 0.25rem; }
    .card-header [data-corrida="repetir"] { flex: 0 0 auto; }
    /* Visão Geral: "Receitas/Despesas vencidas em aberto" só com a altura do conteúdo (a altura fixa de
       25rem, feita para os cards lado a lado no desktop, deixava um vazio embaixo da lista) */
    .vg__despesas [data-categoria-corpo] { height: auto; max-height: 25rem; }
    /* Análise Detalhada — barra da tabela: a busca na largura toda; "Grade" e "Grupos" lado a lado (em vez
       de uma caixa por linha); os botões dividem as linhas (regra geral de .card-header .btn acima) */
    .card-header .busca-categoria { width: 100% !important; }
    .card-header .caixa-separar-centro { width: auto; flex: 0 0 auto; margin-right: 0.5rem; }
    .card-header .controle-zoom { margin-left: auto; }
    /* Compartilhar — "O que mostrar": cada tela numa linha do tamanho do dedo, a linha inteira marca */
    .compartilhar-itens { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0.25rem 0.75rem; }
    .compartilhar-itens .form-check { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding-left: 0; }
    .compartilhar-itens .form-check + .form-check { border-top: 1px solid var(--falcon-border-color); }
    .compartilhar-itens .form-check-input { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin: 0; }
    .compartilhar-itens .form-check-label { flex: 1 1 auto; padding: 0.5rem 0; white-space: normal; }
    /* Pendências — caixa "Listar apenas contas pendentes": do tamanho do dedo, a linha inteira marca */
    .form-check:has(> #pend-so-pendentes) { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding-left: 0; }
    #pend-so-pendentes { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin: 0; }
}

/* ----- Telas de toque: alvos pequenos próprios do Painel ----- */
@media (pointer: coarse) {
    /* filtros por coluna das tabelas (a linha "Filtrar" embaixo dos títulos): altura de toque, sem alargar a tabela */
    table thead input.form-control-sm,
    table thead select.form-select-sm { min-height: 2.5rem; }
    /* a ordenação pelo título da coluna (th.sort) e os títulos das colunas: área maior */
    .table thead th.sort { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    /* os botões de zoom do mapa dos estados */
    .estados-mapa__controles button { width: 2.5rem; height: 2.5rem; }
    /* controle de zoom da tabela (Análise Detalhada) */
    .controle-zoom > .btn { min-width: 2.5rem; }
    /* medido em 07/11/2026: os alvos que ainda ficavam abaixo de 30px no celular */
    .vg__periodos button { min-height: 2.5rem; }
    .crm-legenda-filtro__item { min-height: 2.25rem; }
    .bn-zap-grupo { min-height: 2.25rem; }
    /* as caixas de marcar com 24px em qualquer tamanho de letra (em tabela fs-10, 1.25em dava 17px), e o rótulo sem encostar nelas */
    .form-check-input { width: 1.5rem; height: 1.5rem; }
    .form-switch .form-check-input { width: 2.5rem; height: 1.5rem; }
    .form-check { padding-left: 2rem; min-height: 1.5rem; }
    .form-check .form-check-input { margin-left: -2rem; }
    .form-switch { padding-left: 3rem; }
    .form-switch .form-check-input { margin-left: -3rem; }
    .form-check.form-check-inline { padding-left: 0; }
    .form-check.form-check-inline .form-check-input { margin-left: 0; }
}

/* ---------- FIM ÁREA A ---------- */

/* ---------- ÁREA B: Painel ASAAS e ZAP-NEXO ---------- */

/* Tabelas do Painel ASAAS (asaas/comum.js: criarTabela) e de ZAP-NEXO · Contas a Pagar: no celular e no tablet
   em pé a tabela rola para o lado dentro do card e a 1ª coluna (situação, data, a caixa de marcar) fica parada,
   para a linha não perder a referência. O fundo é o do card (a célula do Falcon é transparente) e a listra do
   table-striped continua vindo pelo box-shadow interno, como no tema; a linha vertical à direita marca a borda
   da coluna parada (a borda do table-bordered não acompanha a célula sticky). */
@media (max-width: 767.98px) {
    .bn-tabela-fixa table > :is(thead, tbody) > tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: var(--falcon-card-bg);
        box-shadow: inset 0 0 0 9999px var(--falcon-table-bg-state, var(--falcon-table-bg-type, var(--falcon-table-accent-bg))), inset -1px 0 0 var(--falcon-border-color);
    }
    .bn-tabela-fixa thead > tr > :first-child { z-index: 2; background-color: var(--falcon-200); }
    /* linha em vermelho (documento repetido no ZAP-NEXO): a 1ª célula com o fundo da linha */
    .bn-tabela-fixa .table-danger > :first-child { background-color: var(--falcon-table-bg); }
    /* ZAP-NEXO: o "Total dos N pagamento(s) selecionado(s)" do rodapé fica na parte à vista da tabela, quebrando
       a linha se precisar (a célula dele atravessa várias colunas e o texto saía cortado na borda) */
    .bn-tabela-fixa .bn-soma-rotulo {
        position: sticky;
        left: 0.75rem;
        display: inline-block;
        max-width: calc(100vw - 5.5rem);
        white-space: normal;
    }

}

@media (max-width: 575.98px) {
    /* Painel ASAAS — barra de filtros do cabeçalho (asaas/comum.js: montarCabecalho): cada campo na largura toda
       (o form-select tinha o teto de 17rem de dashboard.css e o campo de cliente uma largura fixa — ficavam mais
       estreitos que as datas) */
    .bn-painel-filtros .filtros .form-select,
    .bn-painel-filtros .filtros .form-control { max-width: none; }
    /* o período (criarFiltroPeriodo, o do Painel Executivo): o mesmo arranjo que ele tem no bottom sheet das
       telas do Painel — o tipo na linha toda; o mês com as setas, as datas do personalizado lado a lado */
    .bn-painel-filtros .filtro-periodo { flex: 1 1 100%; flex-direction: column; align-items: stretch !important; }
    .bn-painel-filtros .filtro-periodo > * { width: 100%; min-width: 0; }
    .bn-painel-filtros .filtro-periodo :is(.filtro-periodo-dia, .filtro-periodo-mes, .filtro-periodo-trimestre, .filtro-periodo-personalizado) { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .bn-painel-filtros .filtro-periodo .filtro-periodo-dia > .form-control,
    .bn-painel-filtros .filtro-periodo .filtro-periodo-mes > .form-control,
    .bn-painel-filtros .filtro-periodo .filtro-periodo-trimestre > .form-select,
    .bn-painel-filtros .filtro-periodo .filtro-periodo-personalizado > .form-control { flex: 1 1 0; width: auto !important; }
    .bn-painel-filtros .filtro-periodo :is(.filtro-periodo-dia, .filtro-periodo-mes) > .btn { flex: 0 0 2.75rem; }
    .bn-painel-filtros .filtro-periodo .filtro-periodo-personalizado > .btn { flex: 1 1 100%; }
    /* as abas em destaque do card (Informações financeiras): no celular quebram a linha em vez de rolar — a
       última ficava escondida à direita */
    .bn-abas-card { flex-wrap: wrap; overflow: visible; width: 100%; }

    /* ZAP-NEXO · Contas a Pagar — barra de controles (#controles-da-barra): "Uma empresa | Várias empresas" na
       largura toda (o Atualizar saiu da barra: fica no cabeçalho de cada tabela) */
    #controles-da-barra .filtros-crm__corpo > .d-flex { width: 100%; }
    #controles-da-barra .btn-group { width: 100%; }
    #controles-da-barra .btn-group > .btn { flex: 1 1 auto; white-space: nowrap; }
}

@media (pointer: coarse) {
    /* "Agendar pagamento" — caixa "Usar a data de vencimento": do tamanho do dedo, a linha inteira marca */
    .form-check:has(> #ag-usar-vencimento) { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding-left: 0; }
    #ag-usar-vencimento { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin: 0; }
}

/* ---------- FIM ÁREA B ---------- */

/* ---------- ÁREA C: Clientes e Usuários, Ferramentas BPO, Extra (Links, Prompts, API, Detalhe de
   acesso, Categorias), páginas de entrada (login, senha, compartilhado, câmera) ---------- */

/* ===== Comum à área (celular e tablet) ===== */
@media (max-width: 1199.98px) {
    /* Links, Prompts: as 4 ações da linha (ver/editar/desativar/excluir) numa linha só — a célula é flex
       com quebra e empilhava os botões, deixando cada linha com 3 alturas */
    td.actions-cell { flex-wrap: nowrap; }

    /* Parágrafos de descrição encurtados com "…" (cards da importação em Baixar Contas): no celular o
       card ocupa a linha inteira e o texto cabe quebrando a linha */
    #conciliacao-importacao-root .card-body > p.text-truncate { white-space: normal; overflow: visible; }
    /* "Modelo GPT": o select com largura automática passava da borda do card no tablet */
    #concModeloGpt { flex: 1 1 10rem; min-width: 0; max-width: 100%; }
}

@media (pointer: coarse) {
    /* Botões "seta" que abrem/fecham uma seção (Detalhe de acesso, Integração, "Usuários vinculados"):
       área de toque da altura de um botão, sem mudar o visual */
    .btn.seta-secao { min-height: 2.5rem; display: inline-flex; align-items: center; }
    /* Caixas de marcar das tabelas e dos filtros desta área (Sync, Saldos, Padrão de nomes, Criar
       parcelas): maiores, mas sem virar um quadrado de 44px no meio do texto */
    #clientes-tbody .form-check-input,
    #chk-selecionar-todos,
    .sd-filtros__opcao .form-check-input,
    #sdAutoVerificar,
    #sdEmpresasLista .form-check-input,
    #pnTabela .form-check-input,
    #cpCardTabela .form-check-input,
    #previaConciliacao .form-check-input,
    #listagemFinanceiro .form-check-input { width: 1.5rem; height: 1.5rem; }
    /* Login/recuperar/redefinir: o botão de tema (só um ícone) ganha largura de toque */
    .bponexo-auth #theme-toggle { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
}

/* ===== Clientes e Usuários ===== */
@media (max-width: 1199.98px) {
    /* a linha "Usuários vinculados (n) · Novo usuário" quebra em vez de espremer os dois botões em
       duas linhas cada */
    .bloco-cliente .card-body > .d-flex { flex-wrap: wrap; row-gap: 0.5rem; }
    .bloco-cliente .card-body > .d-flex > h6 { flex: 1 1 auto; min-width: 0; }
    .bloco-cliente [data-usuario-novo] { white-space: nowrap; margin-left: auto; }
    /* tabela de usuários (1100px de largura mínima, rola dentro do card): o nome fica parado */
    .tabela-usuarios > :not(caption) > * > :first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: var(--falcon-card-bg);
        box-shadow: inset -1px 0 0 var(--falcon-border-color);
    }
    .tabela-usuarios > thead > * > :first-child { background-color: var(--falcon-gray-100); }
    .tabela-usuarios .col-nome { width: 12rem; }
    .cabecalho-cliente .cc-acoes .btn-ativo-inativo { min-width: 0; }
}
@media (max-width: 575.98px) {
    /* os 4 cards de indicador do topo (kpi-mini): 2 por linha — um por linha deixava a lista de
       clientes a 1.500px do topo */
    #stats .kpi-mini-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    #stats .kpi-mini .card-body { padding: 0.75rem; }
    #stats .kpi-mini__valor { font-size: 1.44rem; }
    #stats .kpi-mini__grafico { height: 84px; }
    /* "Novo cliente" à direita, na largura de um botão */
    #master-view > .d-flex > #btn-novo-cliente { flex: 0 0 auto; }
    /* cabeçalho do card do cliente: as ações dividem a linha */
    .cabecalho-cliente .cc-acoes .d-flex > .btn { flex: 1 1 auto; }
}

/* ===== Detalhe de acesso (como-funciona-permissoes): 4 tabelas Menu | MASTER | ADMIN | VISUALIZADOR ===== */
@media (min-width: 576px) and (max-width: 1199.98px) {
    /* tablet: a tabela tem largura própria e rola dentro do card; a coluna "Menu" fica parada e o
       texto dela quebra a linha (com table-layout fixed e 100% as colunas ficavam espremidas e as
       badges saíam da célula) */
    .tabela-permissoes { table-layout: fixed; width: 46rem; min-width: 46rem; }
    .tabela-permissoes col:first-child { width: 22rem; }
    .tabela-permissoes col:not(:first-child) { width: 8rem; }
    /* (seletor longo: vence o "nowrap" geral das tabelas roláveis do shell) */
    .table-responsive .table.tabela-permissoes td:not(.text-wrap):not(.text-break),
    .table-responsive .table.tabela-permissoes th:not(.text-wrap):not(.text-break) { white-space: normal; }
    .tabela-permissoes > :not(caption) > * > :first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: var(--falcon-card-bg);
        box-shadow: inset -1px 0 0 var(--falcon-border-color);
    }
    .tabela-permissoes > thead > * > :first-child { background-color: var(--falcon-gray-100); }
}
@media (max-width: 575.98px) {
    /* celular: cada linha vira um bloco — o nome da tela em cima e, embaixo, os 3 acessos alinhados
       com o cabeçalho MASTER | ADMINISTRADOR | VISUALIZADOR (sem rolagem horizontal) */
    .tabela-permissoes,
    .tabela-permissoes thead,
    .tabela-permissoes tbody { display: block; width: 100%; }
    .tabela-permissoes colgroup { display: none; }
    .tabela-permissoes tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0.25rem;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--falcon-border-color);
    }
    .tabela-permissoes thead tr { padding-top: 0.375rem; padding-bottom: 0.375rem; }
    .table-responsive .table.tabela-permissoes td:not(.text-wrap):not(.text-break),
    .table-responsive .table.tabela-permissoes th:not(.text-wrap):not(.text-break) { padding: 0.125rem 0; border: 0; white-space: normal; background: none; box-shadow: none; }
    .tabela-permissoes td:first-child,
    .tabela-permissoes th:first-child { grid-column: 1 / -1; padding-bottom: 0.375rem; }
    .tabela-permissoes thead th:first-child { display: none; }
    .tabela-permissoes thead th { font-size: 0.6944444444rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--falcon-gray-600); }
    .tabela-permissoes td .badge { font-size: 0.6944444444rem; white-space: normal; }
    /* o recuo dos subitens: menor, para sobrar largura ao texto */
    .tabela-permissoes td.ps-4 { padding-left: 0.75rem !important; }
    .tabela-permissoes td.ps-5 { padding-left: 1.5rem !important; }
}

/* ===== Regras CA ===== */
@media (max-width: 575.98px) {
    /* (tamanhos do título e dos itens no celular: em regras-ca.css, que carrega depois deste arquivo) */
    /* o rodapé do card: "Criar regra" com os 4 ícones ao lado (com os ícones de 44px do toque, abaixo,
       a linha só cabe inteira com o respiro lateral menor; em tela mais estreita que 390px os ícones
       descem para a linha de baixo, à direita) */
    .regra-ca-card .card-footer { flex-wrap: wrap; row-gap: 0.5rem; padding-inline: 1rem; }
}
@media (pointer: coarse) {
    /* os 4 ícones do rodapé do card (Ver registros, Editar, Copiar regra, Descartar) e o "remover
       condição" do editor: 44px — eram de 36 a 40px de largura (o btn-sm só com o ícone). Os ícones de
       copiar e as chaves ficam em regras-ca.css, que carrega depois deste arquivo. */
    .regra-ca-card .card-footer .ms-auto > .btn,
    .regra-ca__condicao > .btn { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
    .regra-ca-card .card-footer > .btn { min-height: 2.75rem; }
}

/* ===== Categoria Genérica / Específica (árvore do plano de contas: comum/plano-contas.js) ===== */
@media (max-width: 1199.98px) {
    /* a descrição ocupa o que sobra e quebra dentro do próprio espaço; o espaçador vazio sai, e as
       ações ficam encostadas à direita */
    .arvore-categoria-generica .arvore-linha > .flex-grow-1 { display: none; }
    .arvore-categoria-generica .arvore-descricao { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
    .arvore-categoria-generica .arvore-acoes { margin-left: auto; }
    .arvore-categoria-generica .arvore-contador { white-space: nowrap; }
}
@media (pointer: coarse) {
    /* a setinha "Recolher/Expandir" tinha 20px e os botões de ação (+, renomear, excluir) 36px: agora
       todos com 44px, como o "Expandir o card". A setinha avança 0.25rem sobre o respiro de cada lado
       (o "gap" da linha e o padding): o toque pega os 44px, mas a árvore só anda o mesmo que antes para a
       direita. As linhas ficam com menos padding em cima e embaixo — quem dá a altura é o botão. */
    .arvore-categoria-generica .arvore-toggle.btn {
        width: 2.75rem;
        flex: 0 0 2.75rem;
        min-height: 2.75rem;
        margin-inline: -0.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .arvore-categoria-generica .arvore-acoes .btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.25rem 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .arvore-categoria-generica .arvore-linha,
    .arvore-categoria-generica .nivel-1 > .arvore-linha,
    .arvore-categoria-generica .nivel-4 > .arvore-linha { padding: 0.125rem 0.25rem; }
}
@media (max-width: 575.98px) {
    /* a linha quebra (regra geral do shell): a descrição vai na primeira linha com o código; selo,
       contagem e ações descem para a segunda, à direita */
    .arvore-categoria-generica .arvore-linha { row-gap: 0.125rem; }
    .arvore-categoria-generica .arvore-descricao { flex-basis: 9rem; }
    .arvore-categoria-generica .arvore-codigo { font-size: 0.6875rem; }
    .arvore-categoria-generica .arvore-filhos { margin-left: 0.4rem; padding-left: 0.35rem; }
    /* os cards Grupos / Subgrupos / Contas: 3 na mesma linha */
    #cg-stats > [class*='col-'] { flex: 1 1 0; width: auto; min-width: 0; }
    #cg-stats .card-body { padding: 0.75rem; }
}

/* ===== Sync Completo (sincronizar-lote) ===== */
@media (max-width: 1199.98px) {
    /* a tabela de clientes rola para o lado: a caixa e o nome ficam parados; o nome quebra a linha */
    #passo-1 .table > :not(caption) > * > :first-child,
    #passo-1 .table > :not(caption) > * > :nth-child(4) {
        position: sticky;
        z-index: 1;
        background-color: var(--falcon-card-bg);
    }
    #passo-1 .table > thead > * > :first-child,
    #passo-1 .table > thead > * > :nth-child(4) { background-color: var(--falcon-gray-100); }
    #passo-1 .table > :not(caption) > * > :first-child { left: 0; }
    #passo-1 .table > :not(caption) > * > :nth-child(4) { left: 3rem; min-width: 11rem; max-width: 14rem; white-space: normal; box-shadow: inset -1px 0 0 var(--falcon-border-color); }
    #passo-1 .table th:first-child { width: 3rem; }
    /* uma linha inteira é o alvo (sincronizar-lote.js marca a caixa ao tocar na linha) */
    #clientes-tbody tr:not(.text-body-tertiary) { cursor: pointer; }
    /* passo 2: as datas e o "Por ano" um embaixo do outro */
    #passo-2 .row > .col-auto { flex: 1 1 100%; width: 100%; }
    #passo-2 .row > .col-auto .form-control { width: 100%; }
    #passo-2 .atalhos-anos { flex-direction: column; align-items: stretch !important; }
    #passo-2 .atalhos-anos .btn-group { flex-wrap: wrap; }
    #passo-2 .atalhos-anos .btn-group > .btn { flex: 1 1 auto; }
    /* passo 4: a execução rola dentro do card (sem apertar as colunas) */
    #passo-4 .table { min-width: 36rem; }
}
@media (max-width: 575.98px) {
    #passo-1 .card-header > .search-box { flex: 1 1 100%; width: 100%; }
    #passo-1 .card-header > .search-box .search-input { width: 100%; }
    #passo-1 .card-header > .form-select { flex: 1 1 100%; width: 100% !important; }
    #passo-2 .row > .col-auto { flex: 1 1 100%; width: 100%; }
    #passo-2 .row > .col-auto .form-control { width: 100%; }
    #passo-2 .atalhos-anos { flex-direction: column; align-items: stretch !important; }
    #passo-2 .atalhos-anos .btn-group { flex-wrap: wrap; }
    #passo-2 .atalhos-anos .btn-group > .btn { flex: 1 1 auto; }
    #passo-3 dl.row dd { margin-bottom: 0.75rem; }
    /* Voltar / Próximo: dividem a linha */
    #conteudo > .d-flex.justify-content-between { gap: 0.5rem; }
    #conteudo > .d-flex.justify-content-between > .btn { flex: 1 1 0; }
}

/* ===== Saldos e Fechamento ===== */
@media (max-width: 1199.98px) {
    /* cabeçalho: modo (Uma/Várias empresas), "Atualizar a cada 1 min" e "Buscar saldos" numa barra */
    .sd-filtros__busca { flex: 1 1 100%; min-width: 0; }
    .sd-filtros .form-select-sm { min-width: 0; }
    .sd-filtros__resumo { white-space: normal; }
}
@media (max-width: 767.98px) {
    /* o quadro (kanban) em colunas de 300px rolando para o lado vira uma coluna embaixo da outra, cada
       uma com a sua altura; a coluna minimizada fica só com o cabeçalho (sem título em pé) */
    .sd-kanban:not(.sd-kanban--grupos) { flex-direction: column; overflow: visible; }
    .sd-kanban__coluna { flex: 0 0 auto; min-width: 0; width: 100%; max-height: none; }
    .sd-kanban__itens { max-height: 70vh; }
    .sd-kanban__coluna.minimizada { flex: 0 0 auto; min-width: 0; }
    .sd-kanban__coluna.minimizada .sd-kanban__cabecalho { flex-direction: row; justify-content: flex-start; margin: 0 1rem; padding: 0.75rem 0; border-top: 0; border-bottom: 3px solid var(--sd-cor); }
    .sd-kanban__coluna.minimizada .sd-kanban__titulo { writing-mode: horizontal-tb; }
    .sd-kanban__coluna.minimizada .sd-kanban__contagem { margin-left: 0.5rem; margin-top: 0; }
    .sd-kanban__coluna.minimizada .sd-kanban__minimizar { margin-left: auto; }
}
@media (max-width: 575.98px) {
    .sd-filtros__opcao { flex: 1 1 100%; height: auto; }
    .sd-filtros .form-select-sm { flex: 1 1 100%; }
    .sd-filtros .btn-sm { flex: 1 1 auto; }
}

/* ===== Baixar Contas (importação, conciliação, Criar parcelas) ===== */
@media (max-width: 1199.98px) {
    /* tabela da criação de contas (muitas colunas editáveis): rola dentro do card sem espremer */
    #cpCardTabela .table { min-width: 60rem; }
}
@media (pointer: coarse) {
    /* no toque não há "arrastar" (HTML5 drag and drop): a alça ⠿ some, e a coluna "Buscar" (lupa) é o
       caminho para ligar um documento a uma parcela */
    .conciliacao__arrastar { display: none; }
}
@media (max-width: 575.98px) {
    /* filtros do financeiro (Vencimento de/até, atalhos de período) um por linha */
    [data-etapa-painel='financeiro'] .card-body > .input-group,
    #cpAreaRevisao .card-body .input-group.w-auto { width: 100% !important; flex-wrap: nowrap; }
    [data-etapa-painel='financeiro'] .card-body > .btn-group,
    #periodoAtalhos { flex-wrap: wrap; width: 100%; }
    #periodoAtalhos > .btn { flex: 1 1 auto; }
    #barraFinanceiroPaginacao { flex-wrap: wrap; }
}

/* ---------- FIM ÁREA C ---------- */

/* Celular de 320px (medido em 07/11/2026): "Uma empresa / Várias empresas" do ZAP-NEXO passava da tela */
@media (max-width: 359.98px) {
    /* o pai se ajusta ao conteúdo: sem a largura nele, os 100% do par não limitavam nada */
    .filtros-crm__corpo > :has(> #modo-empresas) { width: 100%; min-width: 0; }
    #modo-empresas { display: flex; width: 100%; }
    /* .btn-group no seletor: é o peso da regra de #controles-da-barra (acima), que prende o texto em uma linha */
    #modo-empresas.btn-group > .btn { flex: 1 1 0; min-width: 0; white-space: normal; }
}