/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE.CSS — Camada de responsividade global
   ───────────────────────────────────────────────────────────────────────────

   POR QUE ESTE ARQUIVO EXISTE

   O painel tem 61 páginas e apenas 5 tinham breakpoint próprio. O restante
   monta o layout com `style="..."` inline direto no JavaScript — e estilo
   inline vence qualquer regra de folha externa, por especificidade. Ou seja:
   as media queries do main.css simplesmente não alcançavam a maior parte da
   interface. No celular, uma grade de duas colunas continuava com duas
   colunas espremidas em 360px de tela.

   Reescrever os 61 arquivos seria caro e arriscado. Em vez disso, este
   arquivo ataca os PADRÕES: mapeei o que o código realmente usa e escrevi
   seletores de atributo que casam com esses valores exatos. Um levantamento
   nas 61 páginas mostrou a distribuição:

       45x  grid-template-columns: 1fr 1fr
        9x  1fr
        5x  2fr 1fr
        3x  repeat(4, 1fr) / repeat(2, 1fr) / 1fr 1fr 1fr / 1.5fr 1fr
        2x  repeat(3, 1fr) / 1fr 1.5fr
        …   além dos repeat(auto-fill, minmax(NNNpx, 1fr))

   O padrão `[style*="..."]` já era usado no main.css (linhas ~3360 e ~4147)
   para corrigir cores em modo claro — então isto não é uma técnica estranha
   ao projeto, é a mesma abordagem aplicada a layout.

   ORDEM DE CARGA: este arquivo tem que vir DEPOIS de todos os outros no
   index.html. Ele usa !important porque compete com estilo inline — não há
   alternativa: é a única forma de sobrepor `style="..."` sem tocar no JS.

   FORA DE ESCOPO: o editor de vídeo (clip-editor / clip-studio). Ele foi
   deixado de fora de propósito — é uma ferramenta de trabalho fino, com
   timeline e arraste de precisão, que não faz sentido no celular. Todos os
   seletores daqui são neutralizados dentro de `#clip-editor-root` e afins,
   ver a última seção.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. FUNDAÇÃO — vale em qualquer largura
   ═══════════════════════════════════════════════════════════════════════════ */

/* Impede o "scroll fantasma" horizontal: basta UM elemento estourar a largura
   para a página inteira ganhar rolagem lateral, e o usuário fica arrastando a
   tela sem entender por quê. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Mídia e blocos de código nunca empurram o layout. */
img, video, canvas, svg, iframe, pre, table {
    max-width: 100%;
}
img, video {
    height: auto;
}

/* Palavras longas sem espaço (URLs, IDs, e-mails, tokens) são a causa mais
   comum de estouro horizontal em card estreito. */
body {
    overflow-wrap: break-word;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. CAMPOS DE FORMULÁRIO — o zoom automático do iOS
   ───────────────────────────────────────────────────────────────────────────
   O Safari no iPhone dá zoom na página sempre que o usuário toca num campo
   com fonte menor que 16px. E ele NÃO desfaz o zoom depois — a pessoa fica
   com o layout deslocado e precisa fazer pinça pra voltar.

   Os campos do projeto estão em 0.88rem (~14px), então isso acontece em todo
   formulário do painel. A correção é usar 16px na fonte do campo em telas de
   toque. O tamanho visual continua controlado pelo padding.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. ALVOS DE TOQUE
   ───────────────────────────────────────────────────────────────────────────
   Referência de acessibilidade (WCAG 2.5.8 / Apple HIG): área tocável de no
   mínimo 44x44px. Os botões do painel estão em ~34px de altura (padding
   9px 18px + fonte 0.82rem), o que gera toque errado com frequência.

   Uso `min-height` em vez de `height` pra não achatar botão com duas linhas.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .btn,
    button:not(.sc-port):not(.no-touch-target),
    input[type="submit"],
    input[type="button"],
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
        min-height: 44px !important;
    }

    /* Botão só de ícone: garante largura junto com a altura. */
    .btn-icon,
    .sc-icon-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Checkbox e radio são pequenos demais por padrão do navegador. */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px !important;
        min-height: 20px !important;
        transform: scale(1.15);
        transform-origin: left center;
    }

    /* Itens de lista/menu clicáveis ganham respiro vertical. */
    .nav-item,
    .dropdown-item,
    .menu-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. GRADES INLINE → COLUNA ÚNICA
   ───────────────────────────────────────────────────────────────────────────
   O coração deste arquivo. Casa com os valores exatos que o JS escreve, nas
   duas grafias que existem no código (com e sem espaço depois dos dois-pontos
   — conferi: 89 ocorrências com espaço, 26 sem).

   Só colapso o que REALMENTE não cabe. Grades de 2 colunas com conteúdo curto
   (pares rótulo/valor de métrica) continuam em 2 colunas até 480px, porque
   empilhar tudo deixaria a tela longa demais e pioraria a leitura.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Duas colunas assimétricas: sempre empilham. São layouts de
       "conteúdo + painel lateral", que não funcionam lado a lado no celular. */
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 1fr 2fr"],
    [style*="grid-template-columns:1fr 2fr"],
    [style*="grid-template-columns: 1.5fr 1fr"],
    [style*="grid-template-columns:1.5fr 1fr"],
    [style*="grid-template-columns: 1fr 1.5fr"],
    [style*="grid-template-columns:1fr 1.5fr"],
    [style*="grid-template-columns: 3fr 1fr"],
    [style*="grid-template-columns:3fr 1fr"],
    [style*="grid-template-columns: 1fr 3fr"],
    [style*="grid-template-columns:1fr 3fr"],
    /* achado testando no celular de verdade (analytics do WhatsApp): "1.6fr
       1fr" não batia em nenhum seletor acima — ficava lado a lado, espremido */
    [style*="grid-template-columns: 1.6fr 1fr"],
    [style*="grid-template-columns:1.6fr 1fr"],
    [style*="grid-template-columns: 1fr 1.6fr"],
    [style*="grid-template-columns:1fr 1.6fr"],
    [style*="grid-template-columns: 1.2fr 1fr"],
    [style*="grid-template-columns:1.2fr 1fr"],
    [style*="grid-template-columns: 1fr 1.2fr"],
    [style*="grid-template-columns:1fr 1.2fr"],
    /* v2 */
    [style*="grid-template-columns: 1fr 1.4fr"],
    [style*="grid-template-columns:1fr 1.4fr"],
    [style*="grid-template-columns: 1.4fr 1fr"],
    [style*="grid-template-columns:1.4fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Três ou mais colunas: viram duas. Ir direto pra uma coluna deixaria
       painéis de métrica com scroll interminável. */
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1.2fr 1fr 1fr"],
    [style*="grid-template-columns:1.2fr 1fr 1fr"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: repeat(6"],
    [style*="grid-template-columns:repeat(6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ── Colunas de largura fixa em px: o caso mais destrutivo. Um
       `280px 1fr` numa tela de 360px não deixa espaço para a segunda coluna.
       O prefixo "1" (120px, 150px, 180px — avatar de agente IA, follow-up
       builder etc.) entrou depois dos outros dois porque "1fr 1fr" também
       começa com "1"; sem exigir "px " junto, ia colapsar grade que não devia.
       Com as duas condições juntas fica seguro: só bate em quem realmente
       tem valor fixo em pixel. */
    [style*="grid-template-columns: 1"][style*="px "],
    [style*="grid-template-columns: 2"][style*="px "],
    [style*="grid-template-columns: 3"][style*="px "],
    [style*="grid-template-columns:1"][style*="px "],
    [style*="grid-template-columns:2"][style*="px "],
    [style*="grid-template-columns:3"][style*="px "] {
        grid-template-columns: 1fr !important;
    }

    /* ── O mesmo caso, só que com o valor fixo em px vindo DEPOIS do fr
       (`1fr 340px`, achado na tela de busca de leads — "Motor de Busca" +
       painel "Como funciona" ao lado). A regra acima só olhava pro início
       do valor; esta cobre a ordem invertida. */
    [style*="grid-template-columns: 1fr "][style*="px"],
    [style*="grid-template-columns:1fr "][style*="px"],
    [style*="grid-template-columns: 2fr "][style*="px"],
    [style*="grid-template-columns:2fr "][style*="px"] {
        grid-template-columns: 1fr !important;
    }

    /* ── `minmax(NNNpx, 1fr)` com mínimo alto estoura em tela estreita:
       o `auto-fill` reduz para uma coluna, mas essa coluna mantém o mínimo
       de 320px e ultrapassa a viewport. Aqui o mínimo é anulado. */
    [style*="minmax(260px"], [style*="minmax(260px"],
    [style*="minmax(280px"], [style*="minmax(280px"],
    [style*="minmax(300px"], [style*="minmax(300px"],
    [style*="minmax(320px"], [style*="minmax(320px"],
    [style*="minmax(340px"], [style*="minmax(340px"],
    [style*="minmax(350px"], [style*="minmax(350px"],
    [style*="minmax(360px"], [style*="minmax(400px"],
    /* v2: faltavam estes dois (Spy/AI Agents) */
    [style*="minmax(380px"], [style*="minmax(440px"] {
        /* v2: era `repeat(auto-fill, minmax(0, 1fr))` — com mínimo 0 o
           auto-fill cria DEZENAS de colunas de ~1px, e o conteúdo virava
           uma coluna de letras em pé (ex.: Metas Estratégicas). `min(100%,
           240px)` dá 1 coluna no celular e 2+ no tablet. */
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
    }

    /* Grade nenhuma pode ter coluna com mínimo maior que o container.
       `minmax(0, …)` desarma o `min-width: auto` implícito do CSS Grid, que é
       a causa silenciosa de metade dos estouros horizontais em grid. */
    [style*="display: grid"],
    [style*="display:grid"] {
        min-width: 0 !important;
    }
}

/* ── Celular estreito: aí sim, tudo em uma coluna só. ── */
@media (max-width: 480px) {
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    /* repeat(4) saiu daqui na v2 — ver regra de KPIs logo abaixo */
    /* v2: 3 colunas assimétricas (formulário de novo lead do CRM) */
    [style*="grid-template-columns: 1.2fr 1fr 1fr"],
    [style*="grid-template-columns:1.2fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* v2: grades de cartões pequenos (auto-fit/auto-fill com mínimo entre
       140 e 210px) são quase sempre KPIs. Com uma coluna só, seis KPIs viravam
       seis cartões de largura total, um embaixo do outro. Duas colunas. */
    [style*="minmax(140px"], [style*="minmax(150px"], [style*="minmax(160px"],
    [style*="minmax(168px"], [style*="minmax(180px"], [style*="minmax(190px"],
    [style*="minmax(200px"], [style*="minmax(210px"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    /* KPI de 4+ colunas: duas por linha (antes caíam para uma). */
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: repeat(6"],
    [style*="grid-template-columns:repeat(6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Exceção deliberada: grades de métrica curta (números grandes, rótulo
       de uma palavra) ficam MELHOR em duas colunas mesmo no celular —
       empilhar oito cartões vira uma coluna infinita de rolagem. */
    .kpi-grid,
    .crm-stats-grid,
    .gam-stats-grid,
    .sc-node-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. BARRAS DE AÇÃO EM FLEX
   ───────────────────────────────────────────────────────────────────────────
   Há 535 usos de `display:flex` inline sem `flex-wrap`. O padrão típico é
   "título à esquerda, botões à direita" com `justify-content: space-between`.
   Em 360px isso comprime tudo até o texto virar uma coluna de letras.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    [style*="justify-content: space-between"],
    [style*="justify-content:space-between"] {
        flex-wrap: wrap !important;
        gap: 10px;
    }

    /* Cabeçalhos de página e de card empilham título e ações. */
    .page-header,
    .card-header,
    .org-header-container,
    .section-header {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Filho de flex encolhe abaixo do conteúdo — sem isto o `min-width: auto`
       implícito do flexbox impede o encolhimento e gera estouro. */
    [style*="display: flex"] > *,
    [style*="display:flex"] > * {
        min-width: 0;
    }

    /* Grupos de botão ocupam a linha inteira e dividem o espaço. */
    .btn-group,
    .actions,
    .toolbar-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    .btn-group > .btn,
    .actions > .btn {
        flex: 1 1 auto;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. TABELAS
   ───────────────────────────────────────────────────────────────────────────
   O main.css já tinha uma regra que faz `table { display: block; overflow-x:
   auto }` em 768px. Ela evita o estouro, mas tem um efeito colateral: ao
   trocar o `display` de `table` para `block`, as colunas perdem o alinhamento
   entre cabeçalho e corpo, porque o algoritmo de tabela deixa de rodar.

   A abordagem aqui é outra: a tabela CONTINUA sendo tabela (alinhamento
   preservado) e quem rola é um contêiner ao redor dela. Como nem toda tabela
   do projeto tem contêiner próprio, uso `display: block` no elemento-pai
   direto quando ele é um card.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Anula a regra antiga do main.css — a tabela volta a ser tabela. */
    table, .table {
        display: table !important;
        width: 100% !important;
        overflow-x: visible !important;
        border-collapse: collapse;
    }

    /* Quem rola é o contêiner. `.table-wrap` é a classe nova; as demais são
       os contêineres que já existem no projeto. */
    .table-wrap,
    .table-responsive,
    .sc-contacts-wrap,
    .card-body:has(> table),
    .card:has(> table) {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Largura mínima para as colunas não se esmagarem: melhor rolar de lado
       do que ler uma coluna de 3 caracteres. */
    .table-wrap > table,
    .table-responsive > table,
    .sc-contacts-wrap > table {
        min-width: 560px;
    }

    /* Células mais compactas — cabe mais coluna na tela. */
    table th, table td {
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
        white-space: nowrap;
    }

    /* Cabeçalho fixo ao rolar a tabela na horizontal ajuda a não se perder. */
    table thead th {
        position: sticky;
        top: 0;
        background: var(--bg-card);
        z-index: 2;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. MODAIS
   ───────────────────────────────────────────────────────────────────────────
   Existem larguras fixas de 500px, 600px, 640px e 768px espalhadas pelos
   modais. Qualquer uma delas estoura num celular.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .modal-content,
    .modal-card,
    .sc-modal-card,
    /* v2: o pai precisa ser o contêiner/overlay do modal — antes casava também
       com .modal-body e afins, e qualquer div `width:100%` dentro do corpo do
       modal virava 100vw-24px (maior que o próprio modal → rolagem lateral). */
    [class*="modal"]:not(.modal-body):not(.modal-header):not(.modal-footer):not(.modal-content):not([class*="modal-body"]) > [style*="width:"],
    [class*="modal"]:not(.modal-body):not(.modal-header):not(.modal-footer):not(.modal-content):not([class*="modal-body"]) > [style*="width: "] {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 80px) !important;
        max-height: calc(100dvh - 64px) !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
    }

    .modal-overlay,
    #modal-overlay {
        padding: 12px !important;
        align-items: flex-start !important;
        padding-top: 40px !important;
    }

    /* Rodapé de modal: botões em largura total, empilhados, o principal em
       cima — no celular o polegar alcança primeiro a parte de baixo, então o
       botão de confirmar fica por último na ordem visual e mais acessível. */
    .modal-footer,
    .modal-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }
    .modal-footer > .btn,
    .modal-actions > .btn {
        width: 100% !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. ESTRUTURA DA PÁGINA
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Barra do topo acompanha a rolagem: o botão do menu fica sempre
       alcançável, sem precisar voltar ao topo da página. */
    #topbar {
        position: sticky !important;
        top: 0;
        z-index: 900;
        background: var(--bg-topbar, var(--bg-card));
        border-bottom: 1px solid var(--border);
    }

    /* Área útil ganha respiro sem desperdiçar largura. */
    #app {
        padding: 14px 12px !important;
    }

    /* Título longo de página não empurra o resto da barra. */
    #page-title {
        font-size: 1.05rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* Cards e seções encostam menos nas bordas. */
    .card, .section-card, .kpi-card {
        border-radius: 14px !important;
    }

    /* Abas viram faixa rolável em vez de quebrar em várias linhas. */
    .tabs, .tab-list, .nav-tabs, .sc-tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
        padding-bottom: 4px;
    }
    .tabs::-webkit-scrollbar,
    .tab-list::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar,
    .sc-tabs::-webkit-scrollbar { display: none; }

    .tabs > *, .tab-list > *, .nav-tabs > *, .sc-tabs > * {
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    /* Gráficos precisam de altura declarada — o Chart.js colapsa para zero
       quando o contêiner não tem altura própria. */
    canvas {
        max-height: 260px;
    }

    /* ── Bolha flutuante do chat de IA ──────────────────────────────────────
       Ela tem 64x64 e `position: fixed` no canto. No desktop sobra espaço e
       ninguém nota. No celular ela cobre conteúdo: medido no navegador, na
       tela do editor de automação ela ficava por cima do inspetor, escondendo
       o texto e o campo embaixo dela.

       Duas correções: encolhe um pouco, e o conteúdo da página ganha um
       espaço reservado no rodapé para nada terminar debaixo dela.

       Os valores de `bottom` sobem mais um pouco (12px → 82px, 74px → 146px)
       porque agora existe a navbar mobile fixa no rodapé (~64px de altura) —
       ver seção 10 — e nada pode ficar por baixo dela. */
    #ai-chat-trigger {
        width: 52px !important;
        height: 52px !important;
        right: 12px !important;
        bottom: 82px !important;
        opacity: 0.92;
    }

    #app {
        padding-bottom: 92px !important;
    }

    /* Janela do chat aberta ocupa a tela toda — em 384px de largura não faz
       sentido ser um cartãozinho no canto. */
    #ai-chat-window,
    #ai-chat-panel {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100vh - 160px) !important;
        right: 8px !important;
        bottom: 146px !important;
    }

    /* Dropdown de notificações — tinha `width:380px` fixo no HTML, que estoura
       em qualquer celular abaixo de ~400px de largura. */
    #notifications-dropdown {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
        top: 66px !important;
        max-height: 65vh !important;
    }
}

@media (max-width: 480px) {
    /* O atalho `padding` zera o padding-bottom definido acima (a folga para a
       bolha do chat + navbar), então ele é repetido aqui. Foi assim que o bug
       apareceu no teste: a regra existia, mas este bloco a desfazia. */
    #app { padding: 12px 10px 92px !important; }

    /* Números grandes de KPI ficam desproporcionais em tela pequena. */
    .kpi-value { font-size: 1.35rem !important; }
    .kpi-card  { padding: 14px !important; }

    h1 { font-size: 1.3rem !important; }
    h2 { font-size: 1.15rem !important; }
    h3 { font-size: 1rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. EXCEÇÃO — EDITOR DE VÍDEO
   ───────────────────────────────────────────────────────────────────────────
   O Cortes Inteligentes / Clip Studio ficou FORA deste trabalho por decisão
   de escopo: é uma ferramenta de edição fina, com timeline, arraste de
   precisão e pré-visualização — não é tarefa de celular.

   Sem esta seção, as regras acima (principalmente as de grade e de tabela)
   entrariam no editor e bagunçariam um layout que hoje funciona no desktop.
   Aqui elas são explicitamente desligadas.


   As páginas do editor não criam nenhum container com id próprio, então não
   havia como mirá-las pelo CSS. A solução foi o router passar a marcar o #app
   com `data-module` e `data-page` a cada navegação (ver js/core/router.js) —
   o que também deixa qualquer regra futura por página possível.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    #app[data-page="clip-editor"] [style*="grid-template-columns"],
    #app[data-page="clip-studio"] [style*="grid-template-columns"] {
        grid-template-columns: revert !important;
    }

    #app[data-page="clip-editor"] [style*="justify-content: space-between"],
    #app[data-page="clip-editor"] [style*="justify-content:space-between"],
    #app[data-page="clip-studio"] [style*="justify-content: space-between"],
    #app[data-page="clip-studio"] [style*="justify-content:space-between"] {
        flex-wrap: nowrap !important;
    }

    #app[data-page="clip-editor"] table,
    #app[data-page="clip-studio"] table {
        display: revert !important;
    }

    /* O editor trabalha numa área maior que a tela por natureza — em vez de
       tentar encaixar, deixa rolar de lado dentro da própria área. */
    #app[data-page="clip-editor"],
    #app[data-page="clip-studio"] {
        overflow-x: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. NAVBAR MOBILE INFERIOR (ver js/core/mobile-navbar.js)
   ───────────────────────────────────────────────────────────────────────────
   Fica escondida no desktop por padrão (display:none) e só aparece dentro do
   breakpoint de 768px — mesma quebra usada em todo este arquivo. Barra fixa,
   flutuante, com 5 botões (Início / Atalhos / "+" / Notificações / Perfil) e
   dois "bottom sheets" (Atalhos e Ações Rápidas) que sobem por cima dela.
   ═══════════════════════════════════════════════════════════════════════════ */

.mobile-navbar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        height: 64px;
        padding: 0 6px;
        background: rgba(13, 13, 26, 0.92);
        border: 1px solid rgba(139, 92, 246, 0.25);
        border-radius: 22px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 4990; /* acima do conteúdo e da bolha do chat, abaixo da drawer da sidebar (#sidebar.active usa 5000) — abrir o menu lateral cobre a navbar, de propósito */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* `main.css` tem uma regra global (`button:not(.btn-secondary):not(...)`)
       que pinta QUALQUER `<button>` sem uma dessas classes de roxo sólido, com
       `!important` e especificidade alta (tem um #id dentro do :not()). Pra
       escapar dela sem tocar numa regra usada o app inteiro, os botões da
       navbar recebem também a classe `.btn-icon` (já é uma das exceções da
       lista) — e aqui tudo é redeclarado com `!important` pra não sobrar
       nenhum resquício de nenhuma das duas regras de base. */
    .mnav-item {
        flex: 1 1 0;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: auto !important;
        height: auto !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: rgba(255, 255, 255, 0.55) !important;
        font-size: 0.64rem;
        font-weight: 600;
        padding: 6px 2px !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s;
    }
    .mnav-item:hover {
        background: none !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    .mnav-item i {
        font-size: 1.15rem;
    }
    .mnav-item-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 30px;
        border-radius: 10px;
        transition: background 0.15s;
    }
    /* Item ativo: só o ícone ganha um realce discreto (fundo roxo bem fraco)
       — igual à referência que você mandou, sem virar um "botão" cheio. */
    .mnav-item.active {
        color: var(--accent, #8b5cf6) !important;
    }
    .mnav-item.active .mnav-item-icon-wrap {
        background: rgba(139, 92, 246, 0.16);
    }
    .mnav-notif-badge {
        position: absolute;
        top: -1px;
        right: 0px;
        min-width: 15px;
        height: 15px;
        padding: 0 3px;
        border-radius: 8px;
        background: var(--accent, #8b5cf6);
        border: 2px solid rgba(13, 13, 26, 0.92);
        font-size: 0.55rem;
        line-height: 11px;
        font-weight: 800;
        color: #fff;
        text-align: center;
    }

    /* Botão central "+" — o único que fica realmente roxo e sólido, um
       degrau acima da barra, como destaque. */
    .mnav-fab {
        flex: 0 0 auto;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px;
        margin-top: -24px;
        border-radius: 50% !important;
        border: 3px solid rgba(13, 13, 26, 0.92) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: var(--grad-accent, linear-gradient(135deg, #8b5cf6, #3b82f6)) !important;
        color: #fff !important;
        font-size: 1.3rem;
        padding: 0 !important;
        box-shadow: 0 6px 18px rgba(139, 92, 246, 0.5);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mnav-fab:hover {
        background: var(--grad-accent, linear-gradient(135deg, #8b5cf6, #3b82f6)) !important;
    }
    .mnav-fab:active {
        transform: scale(0.94);
    }

    /* ── Overlay + bottom sheets (Atalhos / Ações rápidas) ─────────────── */
    .mnav-sheet-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 5600;
    }
    .mnav-sheet-overlay.open {
        display: block;
    }

    .mnav-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-surface, #13132b);
        border: 1px solid var(--border, rgba(255,255,255,0.08));
        border-bottom: none;
        border-radius: 22px 22px 0 0;
        padding: 10px 18px calc(24px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 5700;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    }
    .mnav-sheet.open {
        transform: translateY(0);
    }
    .mnav-sheet-handle {
        width: 36px;
        height: 4px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.15);
        margin: 4px auto 12px;
    }
    .mnav-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
    }
    .mnav-sheet-head h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
    }
    /* `.btn-icon` (usado aqui só pra escapar da regra global de botão roxo —
       ver comentário grande lá em cima, perto de `.mnav-item`) tem seu
       próprio `width/height/border/border-radius` de base; por isso todo
       tamanho e cor aqui vem com `!important` também. */
    .mnav-sheet-edit,
    .mnav-sheet-save {
        display: flex !important;
        align-items: center;
        gap: 6px;
        width: auto !important;
        height: auto !important;
        background: rgba(139, 92, 246, 0.14) !important;
        border: 1px solid rgba(139, 92, 246, 0.3) !important;
        color: var(--accent, #8b5cf6) !important;
        border-radius: 10px !important;
        padding: 6px 12px !important;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
    }

    .mnav-sheet-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        padding-bottom: 6px;
    }
    .mnav-sheet-tile {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: auto !important;
        height: auto !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
        border-radius: 16px !important;
        padding: 14px 6px !important;
        cursor: pointer;
    }
    .mnav-sheet-tile-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(139, 92, 246, 0.16) !important;
        color: var(--accent, #8b5cf6) !important;
        font-size: 1.05rem;
    }
    .mnav-sheet-tile-label {
        font-size: 0.68rem;
        text-align: center;
        color: var(--text-secondary, #c7c7de);
        line-height: 1.2;
    }
    .mnav-sheet-empty {
        color: var(--text-muted, #8b8ba7);
        font-size: 0.85rem;
        text-align: center;
        padding: 20px 10px 10px;
    }

    .mnav-sheet-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 6px;
    }
    .mnav-sheet-check-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 10px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.02);
        font-size: 0.88rem;
        cursor: pointer;
    }
    .mnav-sheet-check-row input {
        width: 18px;
        height: 18px;
        accent-color: var(--accent, #8b5cf6);
    }
    .mnav-sheet-check-row i {
        width: 20px;
        text-align: center;
        color: var(--accent, #8b5cf6);
    }

    .mnav-sheet-action-row {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: 100% !important;
        height: auto !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
        border-radius: 14px !important;
        padding: 14px !important;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text, #fff) !important;
        cursor: pointer;
        text-align: left;
    }
    .mnav-sheet-action-row i:first-child {
        width: 20px;
        text-align: center;
        color: var(--accent, #8b5cf6);
        font-size: 1rem;
    }
    .mnav-sheet-action-arrow {
        margin-left: auto;
        color: var(--text-muted, #8b8ba7);
        font-size: 0.8rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. REVISÃO MOBILE v2 — CASCA DO APP (topbar, gaveta, navbar, suporte)
   ───────────────────────────────────────────────────────────────────────────
   Problema relatado: o botão flutuante do suporte (Orion) ficava POR CIMA da
   navbar inferior, em cima do botão "Perfil", e também por cima das gavetas
   (Atalhos, menu lateral). No celular ele sai; o acesso ao suporte virou um
   botão da própria navbar (ver js/core/mobile-navbar.js).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Suporte: sem botão flutuante no celular ─────────────────────────── */
    #orion-support-root #orion-support-launcher {
        display: none !important;
    }
    /* Janela do suporte em tela cheia em qualquer largura de celular/tablet
       pequeno (antes só abaixo de 480px — entre 481 e 768 ela abria como
       cartão de 392px no canto, colado na navbar). */
    #orion-support-root #orion-support-widget {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        border: 0 !important;
    }
    /* Na Central de Atendimento o widget fica escondido no desktop (a equipe
       atende pela página). No celular ele só abre quando a pessoa toca em
       Suporte na navbar, então pode aparecer normalmente. */
    body.osw-on-helpdesk #orion-support-root #orion-support-widget {
        display: flex !important;
    }

    /* ── Navbar inferior ─────────────────────────────────────────────────── */
    .mobile-navbar {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding-bottom: 0;
    }
    .mnav-item {
        min-height: 56px !important;
        font-size: 0.66rem !important;
        letter-spacing: 0.1px;
    }
    .mnav-item > span:last-child {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mnav-fab {
        min-height: 52px !important;
    }
    /* A sidebar aberta cobre a navbar (z 5000 > 4990) — de propósito. */

    /* Folga do conteúdo para a navbar (64px + 10px de margem + respiro). */
    #app,
    #main-content #app {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Gaveta "Atalhos": botão para abrir o menu completo */
    .mnav-sheet-allmods {
        margin-top: 14px;
    }

    /* ── Topbar ──────────────────────────────────────────────────────────── */
    #topbar {
        height: 58px !important;
        gap: 8px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    #topbar > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
        gap: 8px !important;
    }
    #sidebar-toggle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        flex-shrink: 0;
    }
    #topbar .topbar-right {
        gap: 4px !important;
        flex-shrink: 0;
    }
    /* Sino e tema: alvos de 40px (antes ~22px de altura) */
    #topbar #notification-bell,
    #topbar #theme-toggle-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0 !important;
        margin: 0 !important;
        border-right: none !important;
        justify-content: center;
        border-radius: 12px;
        position: relative;
    }
    /* Bolinha do sino vira contador (data-count é escrito pelo mobile-navbar.js) */
    #notification-badge[data-count]:not([data-count=""]) {
        width: auto !important;
        min-width: 17px;
        height: 17px !important;
        padding: 0 4px;
        top: 3px !important;
        right: 2px !important;
        border-radius: 9px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        font-weight: 800;
        line-height: 1;
        color: #fff;
        font-family: var(--font-body, 'Inter', sans-serif);
    }
    #notification-badge[data-count]:not([data-count=""])::after {
        content: attr(data-count);
    }

    /* Dropdown de notificações logo abaixo da topbar e com altura que não
       passa por baixo da navbar. */
    #notifications-dropdown {
        top: 64px !important;
        max-height: calc(100dvh - 64px - 96px) !important;
    }

    /* ── Gaveta lateral ──────────────────────────────────────────────────── */
    #sidebar {
        width: min(300px, 86vw) !important;
        min-width: 0 !important;
        left: calc(-1 * min(300px, 86vw) - 20px) !important;
        padding: 18px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #sidebar.active {
        left: 0 !important;
    }
    #sidebar .sidebar-brand {
        margin-bottom: 20px !important;
    }
    #sidebar .nav-group-header {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    #sidebar .nav-item {
        min-height: 46px !important;
    }
    #sidebar .sub-nav-item {
        min-height: 42px;
        display: flex;
        align-items: center;
    }
    #sidebar .nav-spacer {
        min-height: 16px;
        flex: 0 0 16px !important;
    }
    /* Gaveta fechada ainda reservava 16px (o padding do miolo) — somado ao
       cabeçalho, deixava um vão enorme entre as categorias no celular. */
    #sidebar .nav-group:not(.active) .nav-group-content-inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    #sidebar .nav-group {
        margin-bottom: 2px !important;
    }

    /* Campo do suporte: o anel de foco roxo do main.css aparecia como uma
       "segunda borda" dentro da caixa de pergunta. */
    #orion-support-root textarea:focus,
    #orion-support-root input:focus {
        box-shadow: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. PAINEL PRINCIPAL (#pp-root — css/modules/painel-principal.css)
   ───────────────────────────────────────────────────────────────────────────
   O painel escapa de propósito da regra global de 44px (`.orion-pp`), então
   os alvos de toque dele são ajustados aqui, um a um.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Filho de grid com tabela dentro esticava o card para 620px e o conteúdo
       ficava cortado na borda da tela (min-width:auto implícito do grid). */
    #pp-root .pp-grid > *,
    #pp-root .pp-card { min-width: 0; }
    #pp-root .pp-card:has(> .pp-tbl) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #pp-root .pp-tbl th, #pp-root .pp-tbl td { white-space: normal !important; padding: 9px 6px !important; font-size: 12.5px !important; }
    #pp-root .pp-tbl th:first-child, #pp-root .pp-tbl td:first-child { padding-left: 0 !important; }
    #pp-root .pp-tbl td.mut { word-break: break-all; }
    #pp-root .pp-tbl thead th { position: static; background: none; }

    /* Controles de período e ordenação: altura de toque decente */
    #pp-root .pp-hero-ctrl { width: 100%; }
    #pp-root .pp-seg { flex: 1 1 auto; }
    #pp-root .pp-seg button { height: 38px !important; flex: 1 1 0; padding: 0 10px; }
    #pp-root .pp-btn { height: 40px !important; }
    #pp-root .pp-card-h { flex-wrap: wrap; gap: 8px; }
    #pp-root .pp-seg.sm { width: 100%; display: flex; }
    #pp-root .pp-seg.sm button { height: 34px !important; white-space: nowrap; }
    #pp-root .pp-todo-go { height: 36px !important; padding: 0 12px; }
    #pp-root .pp-link { display: inline-flex; align-items: center; min-height: 36px; }
    #pp-root .pp-goal-edit { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; margin-left: 2px; vertical-align: middle; }
    #pp-root .pp-tg { min-width: 44px; }
    #pp-root .pp-chips button { min-height: 36px !important; }
    #pp-root .pp-radar-search kbd { display: none; }
    #pp-root .pp-todo-tx { min-width: 0; }

    /* Radar: 5 cartões empilhados viravam uma coluna enorme. No celular vira
       carrossel com "espiada" do próximo cartão e encaixe (scroll-snap). */
    #pp-root .pp-spy {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        margin: 0 -18px;
        padding: 0 18px 6px;
        scroll-padding: 0 18px;
        scrollbar-width: none;
    }
    #pp-root .pp-spy::-webkit-scrollbar { display: none; }
    #pp-root .pp-spy > .pp-spy-c { flex: 0 0 64%; scroll-snap-align: start; min-width: 0; }

    /* "Quando você performa melhor": 7 barras com valor em R$ não cabiam —
       o domingo saía cortado na borda do card. */
    #pp-root .pp-perf-bars { gap: 3px !important; }
    #pp-root .pp-pb { min-width: 0; }
    #pp-root .pp-pb b { font-size: 9.5px !important; letter-spacing: -.02em; white-space: nowrap; }
    #pp-root .pp-kpi-s { flex-wrap: wrap; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. PADRÕES GLOBAIS v2 (valem para qualquer módulo)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Toast: no canto inferior direito ele ficava por cima da navbar e,
       com texto longo, saía pela direita da tela. Vira faixa de largura
       total logo acima da navbar. */
    .toast, .ig-massa__toasts {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: none !important;
        width: auto !important;
        z-index: 100000 !important;
    }
    .toast-container, #toast-container {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
        top: auto !important;
        max-width: none !important;
        width: auto !important;
    }

    /* Chips de filtro: o main.css pinta todo <button> de roxo sólido com
       !important, e com os 44px de altura mínima os chips viravam quatro
       "botões gigantes". Aqui voltam a parecer chips — só o ativo é roxo —
       e ficam numa faixa com rolagem lateral. */
    .filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 100%;
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    button.filter-chip {
        flex: 0 0 auto;
        min-height: 38px !important;
        padding: 0 14px !important;
        white-space: nowrap;
        background: transparent !important;
        color: var(--text-muted) !important;
        border: 1px solid var(--border) !important;
        box-shadow: none !important;
        font-size: 0.78rem !important;
        transform: none !important;
    }
    /* Botões "fantasma" (ícone de fechar, editar, excluir) que o JS escreve com
       `background:none` inline: a regra global roxa do main.css ganha deles por
       especificidade (tem dois #id dentro do :not()), e no celular viravam
       quadrados roxos de 44px — um "×" de excluir roxo em cada card do CRM é
       convite a toque acidental. Os :not(#_) só elevam a especificidade. */
    #main-content #app:not([data-page="clip-studio"]):not([data-page="clip-editor"]) button[style*="background:none"]:not(#_a):not(#_b),
    #main-content #app:not([data-page="clip-studio"]):not([data-page="clip-editor"]) button[style*="background: none"]:not(#_a):not(#_b),
    #main-content #app:not([data-page="clip-studio"]):not([data-page="clip-editor"]) button[style*="background:transparent"]:not(#_a):not(#_b),
    #main-content #app:not([data-page="clip-studio"]):not([data-page="clip-editor"]) button[style*="background: transparent"]:not(#_a):not(#_b),
    #main-content #app:not([data-page="clip-studio"]):not([data-page="clip-editor"]) button.btn-ghost:not(#_a):not(#_b) {
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
    #main-content #app:not([data-page="clip-studio"]):not([data-page="clip-editor"]) button.btn-ghost:not(#_a):not(#_b) {
        color: var(--text-secondary) !important;
    }

    /* Links com classe de botão "fantasma" (ex.: "Gerenciar →", "Ver todos →")
       ficavam no azul padrão de link, quase invisível no fundo escuro. */
    #app:not([data-page="clip-studio"]):not([data-page="clip-editor"]) a.btn-ghost { color: var(--accent) !important; }

    button.filter-chip.active {
        background: rgba(139, 92, 246, 0.14) !important;
        color: var(--accent) !important;
        border-color: var(--accent) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. SISTEMA & METAS — Minha Organização (#/system/organization)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Abas: numa linha só, com rolagem lateral (antes a 3ª aba caía sozinha
       numa segunda linha). */
    #app .org-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 6px !important;
        margin-bottom: 16px !important;
        max-width: 100%;
        min-width: 0;
    }
    #app .org-header-container { min-width: 0; max-width: 100%; }
    #app .org-header-container > * { min-width: 0; max-width: 100%; }
    #app .org-nav::-webkit-scrollbar { display: none; }
    #app .org-nav-item {
        flex: 0 0 auto !important;
        white-space: nowrap;
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 14px !important;
    }

    /* Score do dia: bloco em linha (texto | nível) espremia o número "82"
       em dois dígitos empilhados. */
    #app[data-page="organization"] .org-card[style*="justify-content:space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 20px !important;
    }
    #app[data-page="organization"] .org-card[style*="justify-content:space-between"] > div[style*="text-align:right"] {
        text-align: left !important;
    }
    #app[data-page="organization"] .org-card[style*="justify-content:space-between"] .project-progress {
        width: 100% !important;
    }
    #app[data-page="organization"] .org-card h2 {
        font-size: 1.5rem !important;
    }
    #app[data-page="organization"] .score-badge-main {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Mapa de consistência (120 dias): tinha min-width de 600px e 28px por
       quadrado — metade saía cortada. 18 semanas cabem em 340px com 3px de
       vão. */
    #app .heatmap-grid {
        min-width: 0 !important;
        gap: 3px !important;
    }
    #app .heatmap-col { gap: 3px !important; }
    #app .heatmap-grid .heatmap-day {
        width: auto !important;
        min-height: 0 !important;
        border-radius: 3px !important;
    }
    #app .heatmap-container {
        padding: 14px !important;
        overflow: hidden;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. GOOGLE MAPS LEADS (#/leads/*)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* O "modal" de leads da lista (Histórico) não tinha estilo de sobreposição
       — abria como um bloco solto no fim da página, fora da vista. */
    #app .modal[style*="display: flex"],
    #app .modal[style*="display:flex"] {
        position: fixed !important;
        inset: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        align-items: flex-start;
        justify-content: center;
        padding: 24px 10px;
        overflow-y: auto;
    }
    #app .modal .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }
    #app .modal .close-modal {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        flex-shrink: 0;
        cursor: pointer;
    }
    #app .modal .modal-body { overflow-x: auto; }

    /* Barra de controles da lista de leads */
    #app .crm-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }
    #app .crm-controls > div[style*="display:flex"] {
        flex-wrap: wrap;
        gap: 8px !important;
    }
    #app .crm-controls .btn { flex: 1 1 auto; }
    #app .crm-controls .topbar-badge { align-self: flex-start; }

    /* Pipeline de leads: colunas lado a lado com arraste lateral (igual ao
       CRM), em vez de três colunas vazias de 500px empilhadas. */
    #app[data-module="leads"] .kanban-board {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        min-height: 0 !important;
        gap: 12px !important;
        padding-bottom: 8px;
    }
    #app[data-module="leads"] .kanban-column {
        flex: 0 0 84%;
        min-height: 240px !important;
        scroll-snap-align: start;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. CRM DE SITES (#/crm/overview)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #app[data-module="crm"] .page-header h1 { font-size: 1.35rem !important; }
    #app[data-module="crm"] .header-right { width: 100%; gap: 8px !important; }

    /* Filtro de datas: os quatro atalhos (Hoje/7D/30D/Tudo) tinham 26–34px de
       largura e os campos de data cortavam em "mm/d". Vira uma faixa segmentada
       de largura total com as datas embaixo, meio a meio. */
    #app[data-module="crm"] .header-right > div:first-child {
        width: 100%;
        margin-right: 0 !important;
        flex-wrap: wrap !important;
        padding: 6px !important;
        gap: 6px !important;
    }
    #app[data-module="crm"] .header-right > div:first-child > .btn {
        flex: 1 1 0;
        min-height: 38px !important;
        font-size: 0.78rem !important;
    }
    #app[data-module="crm"] .header-right > div:first-child > div[style*="width:1px"] {
        flex-basis: 100%;
        height: 0 !important;
        margin: 0 !important;
    }
    #app[data-module="crm"] .header-right > div:first-child > input[type="date"] {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px;
        padding: 0 8px;
        min-height: 40px !important;
    }
    #app[data-module="crm"] .header-right > .btn { flex: 1 1 auto; }

    /* Colunas do pipeline: 320px fixos quase cobriam a tela; 84% deixa ver a
       ponta da próxima coluna (sinal de que dá pra arrastar pro lado). */
    #app[data-module="crm"] .kanban-board {
        scroll-snap-type: x mandatory;
    }
    #app[data-module="crm"] .kanban-column {
        min-width: 84% !important;
        max-width: 84%;
        scroll-snap-align: start;
    }
    /* "×" de excluir do card: discreto (não é ação principal) mas visível. */
    #app[data-module="crm"] .kanban-column button[onclick*="deleteClient"],
    #app[data-module="crm"] button[onclick*="deleteClient"][style*="position:absolute"] {
        color: var(--text-muted) !important;
        top: 4px !important;
        right: 4px !important;
    }
}

/* Formulários grandes dentro de modal (CRM "Novo Lead", etc.): cartões de
   seção aninhados comiam 60px de largura só em padding. */
@media (max-width: 768px) {
    .modal-content .crm-form { padding: 0 !important; }
    .modal-content .section-card { padding: 16px 14px !important; border-radius: 14px !important; }
    .modal-content .modal-header h2 { padding-right: 52px; font-size: 1.1rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. TABELA → CARTÕES (js/core/responsive.js marca com .rt-cards)
   ───────────────────────────────────────────────────────────────────────────
   Só tabelas que não cabiam na tela. Cada linha vira um cartão; a primeira
   célula é o título do cartão; as demais mostram "Coluna ........ valor".
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    #app table.rt-cards,
    #app .table-wrap > table.rt-cards {
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0;
    }
    #app table.rt-cards > thead { display: none !important; }
    #app table.rt-cards,
    #app table.rt-cards > tbody { display: block !important; }
    #app table.rt-cards > tbody > tr {
        display: block !important;
        margin: 0 0 10px !important;
        padding: 10px 14px !important;
        border: 1px solid var(--border) !important;
        border-radius: 14px !important;
        background: var(--bg-elevated, rgba(255, 255, 255, 0.02));
        height: auto !important;
    }
    #app table.rt-cards > tbody > tr > td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: auto !important;
        max-width: none !important;
        padding: 7px 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        text-align: right !important;
        white-space: normal !important;
        word-break: break-word;
        min-height: 0;
        font-size: 0.84rem !important;
    }
    #app table.rt-cards > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    #app table.rt-cards > tbody > tr > td[data-label=""]::before { display: none; }
    #app table.rt-cards > tbody > tr > td > * { max-width: 100%; }
    /* 1ª célula = título do cartão (sem rótulo, alinhada à esquerda) */
    #app table.rt-cards > tbody > tr > td:first-child {
        border-top: none !important;
        justify-content: flex-start;
        text-align: left !important;
        font-weight: 700;
        font-size: 0.92rem !important;
        padding-top: 2px !important;
    }
    #app table.rt-cards > tbody > tr > td:first-child::before { display: none; }
    /* Linha de "vazio"/"carregando" com colspan: centralizada, sem cartão */
    #app table.rt-cards > tbody > tr > td[colspan] {
        justify-content: center;
        text-align: center !important;
    }
    #app table.rt-cards > tbody > tr:has(> td[colspan]:only-child) {
        border-style: dashed !important;
        background: transparent;
    }
    /* Célula de ações (só botões/links): ocupa a largura, botões à direita */
    #app table.rt-cards > tbody > tr > td:last-child:has(button, a.btn) {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    #app table.rt-cards > tbody > tr > td:last-child:has(button, a.btn)::before { margin-right: auto; }
    html[data-theme="light"] #app table.rt-cards > tbody > tr { background: #fff; }
    html[data-theme="light"] #app table.rt-cards > tbody > tr > td { border-top-color: #eef0f4 !important; }
    /* O contêiner que rolava de lado não precisa mais */
    #app .table-wrap:has(> table.rt-cards),
    #app .card-body:has(> table.rt-cards),
    #app .card:has(> table.rt-cards) { overflow-x: visible !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. WHATSAPP HUB (#/whatsapp/*)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Análise da Automação: cabeçalho (voltar + título + filtro de datas +
       atalhos + reset) numa linha só espremia o título em 3 linhas e o
       "DE:/ATÉ:" virava letra por letra. Empilha. */
    #app .wad-header {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding-top: 4px !important;
    }
    #app .wad-header > div:nth-child(2) { flex: 1 1 0; min-width: 0; }
    #app .wad-header #wad-title { font-size: 1.3rem !important; }
    #app .wad-filters {
        order: 5;
        margin-left: 0 !important;
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
    }
    #app .wad-dates { flex-wrap: wrap; padding: 8px 10px !important; }
    #app .wad-dates > div[style*="display:flex"] { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: stretch !important; gap: 2px !important; }
    #app .wad-dates label { white-space: nowrap; }
    #app .wad-dates > .btn { align-self: flex-end; }
    #app .wad-dates input[type="date"] { min-width: 0; width: 100%; }
    #app .wad-dates > div[style*="width:1px"] { display: none; }
    #app .wad-ranges > .btn { flex: 1 1 0; min-height: 38px !important; font-size: 0.78rem !important; }
    #app .wad-header > button:last-child { order: 4; margin-left: auto; }
    #app .wad-tab-btn { flex: 1 1 auto; white-space: nowrap; }
    #app .wad-tab-btn { min-height: 44px; }

    /* Agentes IA: "Testar Agente" dividia a linha com 4 ícones e ficava com
       ~70px (ícone por cima do texto). Vai para uma linha própria. */
    #app[data-page="agents"] div:has(> button[onclick*="openChatModal"]) {
        flex-wrap: wrap !important;
    }
    #app[data-page="agents"] button[onclick*="openChatModal"] {
        flex: 1 1 100% !important;
        white-space: nowrap;
    }
    #app[data-page="agents"] div:has(> button[onclick*="openChatModal"]) > button:not([onclick*="openChatModal"]) {
        flex: 1 1 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. AI AGENTS (#/ai-agents/* — .modulo-ai-agents)
   ───────────────────────────────────────────────────────────────────────────
   O módulo desenha abas "sublinhadas" (.aia-aba), chips de período/subaba
   (.aia-camp) e o botão vermelho vazado "Parar tudo" (.aia-parar). A regra
   global roxa do main.css atropela os três, então no celular todas as abas
   ficavam roxas iguais (não dava pra saber qual estava ativa) e as subabas do
   Vendedor Cakto/LP espremiam o texto até virar letra por letra. Aqui volta o
   desenho original do módulo, em faixas com rolagem lateral.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #main-content .modulo-ai-agents .aia-abas:not(#_a) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
    }
    #main-content .modulo-ai-agents .aia-abas::-webkit-scrollbar { display: none; }
    #main-content #app .modulo-ai-agents button.aia-aba:not(#_a):not(#_b) {
        flex: 0 0 auto;
        white-space: nowrap;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        color: var(--text-muted) !important;
        padding: 0 14px !important;
    }
    #main-content #app .modulo-ai-agents button.aia-aba.ativa:not(#_a):not(#_b) {
        color: var(--nexus-ciano, #22d3ee) !important;
        border-bottom-color: var(--nexus-ciano, #22d3ee) !important;
    }

    #main-content #app .modulo-ai-agents button.aia-camp:not(#_a):not(#_b) {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        border: 1px solid var(--border) !important;
        border-radius: 99px !important;
        color: var(--text-secondary) !important;
        min-height: 40px !important;
        padding: 0 14px !important;
    }
    #main-content #app .modulo-ai-agents button.aia-camp.ativa:not(#_a):not(#_b) {
        border-color: var(--nexus-ciano, #22d3ee) !important;
        color: var(--nexus-ciano, #22d3ee) !important;
        background: rgba(34, 211, 238, 0.08) !important;
    }
    /* contêiner das chips (período e subabas): uma linha, rolagem lateral */
    #app .modulo-ai-agents div:has(> button.aia-camp) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #app .modulo-ai-agents div:has(> button.aia-camp)::-webkit-scrollbar { display: none; }

    #main-content #app .modulo-ai-agents button.aia-parar:not(#_a):not(#_b) {
        background: transparent !important;
        box-shadow: none !important;
        border: 1px solid rgba(239, 68, 68, .5) !important;
        color: var(--danger, #ef4444) !important;
        border-radius: 99px !important;
    }
    #app .modulo-ai-agents .aia-grade { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. AUTOMAÇÃO IG & TIKTOK (#/social/* — css/modules/social.css)
   ═══════════════════════════════════════════════════════════════════════════ */
.sc-inbox-back { display: none !important; }
@media (max-width: 768px) {
    /* Caixa de entrada no padrão de app de mensagens: primeiro a lista; ao
       tocar numa conversa, ela ocupa a tela com botão de voltar. Antes a lista
       ficava espremida em 38% da tela e a conversa embaixo, fora da vista. */
    #app .sc-inbox {
        display: block !important;
        height: auto !important;
        border-radius: 14px;
    }
    #app .sc-inbox .sc-inbox-list {
        max-height: none !important;
        border-bottom: none !important;
    }
    #app .sc-inbox:not(.is-chat) .sc-inbox-chat { display: none !important; }
    #app .sc-inbox.is-chat .sc-inbox-list { display: none !important; }
    #app .sc-inbox.is-chat .sc-inbox-chat {
        display: flex !important;
        height: calc(100dvh - 360px);
        min-height: 360px !important;
    }
    #app .sc-inbox-back {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 10px !important;
        background: transparent !important;
        border: 1px solid var(--border) !important;
        color: var(--text) !important;
        padding: 0 !important;
    }
    #app .sc-inbox .sc-chat-input { display: flex; gap: 8px; }
    #app .sc-inbox .sc-chat-input input { flex: 1 1 auto; min-width: 0; }

    /* Lista de automações: o checkbox (absoluto no canto) ficava por cima do
       selo ACTIVE/DRAFT. */
    #app .sc-flow-card .sc-flow-top { padding-left: 30px; }

    /* Configurações > Tags: cor + nome + "Criar" estourava a largura. */
    #app .sc-tag-create { flex-wrap: wrap; }
    #app .sc-tag-create > input[type="text"] { flex: 1 1 60%; min-width: 0; }
    #app .sc-tag-create > .btn { flex: 1 1 100%; }
    #app .sc-tag-item { flex-wrap: wrap; gap: 8px; }

    /* Editor de automação (canvas) em tela cheia: o social.css (<=560px)
       voltou a pôr `height:55vh` no .sc-canvas-wrap — que inclui a barra de
       ferramentas — e sobravam ~170px de área de trabalho. A altura fica no
       canvas. A navbar inferior sai durante a edição (tem "Voltar" no topo)
       para não cobrir o inspetor. */
    body.sc-fullscreen #app .sc-canvas-wrap { height: auto !important; min-height: 0 !important; }
    body.sc-fullscreen #app .sc-canvas { min-height: 52vh !important; }
    body.sc-fullscreen .mobile-navbar { display: none !important; }
    body.sc-fullscreen #app .sc-inspector { padding-bottom: 24px !important; max-height: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   21. ABAS "PÍLULA" DOS MÓDULOS (Postagem em Massa, Pandora…)
   ───────────────────────────────────────────────────────────────────────────
   Cada módulo tem sua barra de abas (.post-nav, .md-nav…), todas
   em flex sem quebra: a 3ª aba saía pela direita da tela ou o texto quebrava
   no meio da palavra. Viram faixas roláveis.
   Clip Studio / editor de vídeo ficam de fora (pedido do Bruno, 24/09).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #app .post-nav, #app .md-nav,
    #app div:has(> .md-nav-item), #app div:has(> .post-nav-item) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 6px !important;
        max-width: 100%;
        min-width: 0;
    }
    #app .post-nav::-webkit-scrollbar, #app .md-nav::-webkit-scrollbar { display: none; }
    #app .post-nav-item, #app .md-nav-item {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center;
        gap: 6px;
        min-height: 42px;
        padding: 0 14px !important;
        font-size: 0.74rem !important;
        width: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   22. POSTAGEM EM MASSA
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Calendário de agendamentos: tinha min-width de 640px e só mostrava
       dom–qua; o resto da semana ficava escondido à direita. Cabe inteiro:
       7 colunas estreitas, posts viram pílulas compactas. */
    #app .cal-weekday-row, #app .cal-grid { min-width: 0 !important; gap: 3px !important; }
    #app .cal-day-cell { min-height: 58px !important; padding: 4px 3px !important; border-radius: 8px !important; gap: 2px !important; }
    #app .cal-day-num { font-size: 0.66rem !important; }
    #app .cal-day-posts > * {
        font-size: 0.55rem !important;
        padding: 1px 3px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 0 !important;
    }
    #app .cal-weekday-row > * { font-size: 0.6rem !important; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   23. INSTAGRAM EM MASSA (#/instagram-massa/* — .ig-massa)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Abas sublinhadas (desenho original do módulo): a regra roxa global
       deixava as três iguais, sem indicar a ativa, e a terceira caía de linha. */
    #app .ig-massa__abas {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 0 !important;
        margin-bottom: 16px !important;
    }
    #app .ig-massa__abas::-webkit-scrollbar { display: none; }
    #main-content #app button.ig-massa__aba:not(#_a):not(#_b) {
        flex: 0 0 auto;
        white-space: nowrap;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        border: 0 !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        color: var(--im-texto-fraco, var(--text-muted)) !important;
        padding: 0 14px !important;
    }
    #main-content #app button.ig-massa__aba[aria-selected="true"]:not(#_a):not(#_b) {
        color: var(--im-acento-texto, var(--accent)) !important;
        border-bottom-color: var(--im-acento, var(--accent)) !important;
    }
    #main-content #app button.ig-massa__btn--fantasma:not(#_a):not(#_b) {
        background: transparent !important;
        box-shadow: none !important;
        border: 1px solid var(--im-borda, var(--border)) !important;
        color: var(--im-texto, var(--text)) !important;
    }
    /* Linhas de campo + botões (Radar: @perfil | Adicionar | Atualizar) */
    #app .ig-massa__linha { flex-wrap: wrap !important; gap: 10px !important; }
    #app .ig-massa__linha > .ig-massa__campo { flex: 1 1 100% !important; min-width: 0; }
    #app .ig-massa__campo[style*="align-items:flex-end"] > .ig-massa__btn { flex: 1 1 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   25. FACEBOOK ADS + FILTRO DE DATAS (padrão repetido em vários módulos)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Barra "Hoje | 7D | 30D | Tudo | data / data" (Facebook Ads, detalhe de
       campanha…): os atalhos tinham ~30px de largura e as datas cortavam em
       "mm/d". Mesma solução do CRM: atalhos em faixa segmentada de largura
       total, datas embaixo, meio a meio. */
    #app div:has(> input[type="date"]):has(> .btn-xs) {
        width: 100%;
        flex-wrap: wrap !important;
        margin-right: 0 !important;
        padding: 6px !important;
        gap: 6px !important;
    }
    #app div:has(> input[type="date"]):has(> .btn-xs) > .btn-xs {
        flex: 1 1 0;
        min-height: 38px !important;
        font-size: 0.78rem !important;
    }
    #app div:has(> input[type="date"]):has(> .btn-xs) > div[style*="width:1px"] {
        flex-basis: 100%;
        height: 0 !important;
        margin: 0 !important;
    }
    #app div:has(> input[type="date"]):has(> .btn-xs) > input[type="date"] {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px;
        padding: 0 8px;
        min-height: 40px !important;
    }
    #app div:has(> input[type="date"]):has(> .btn-xs) > span { display: none; }

    /* Chips de filtro do Facebook Ads (Destaques, Ativos/Parados): voltam ao
       desenho de pílula do módulo e ficam numa faixa com rolagem lateral, em
       vez de dez botões roxos iguais empilhados em cinco linhas. */
    #app .fb-filtros {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    #app .fb-filtros::-webkit-scrollbar { display: none; }
    #main-content #app button.fb-chip:not(#_a):not(#_b) {
        flex: 0 0 auto;
        white-space: nowrap;
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        color: var(--text-muted) !important;
        box-shadow: none !important;
        transform: none !important;
        border-radius: 999px !important;
        min-height: 38px !important;
    }
    #main-content #app button.fb-chip.active:not(#_a):not(#_b) {
        background: var(--accent) !important;
        border-color: var(--accent) !important;
        color: #fff !important;
    }
    #app .fb-nav-item { min-height: 40px; display: inline-flex; align-items: center; }

    /* Detalhe da campanha: filtro em outro formato (.calendar-filter) */
    #app .calendar-filter {
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
        padding: 6px !important;
        gap: 6px !important;
    }
    #app .calendar-filter .range-btns {
        border-right: none !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    #app .calendar-filter .range-btns > button { flex: 1 1 0; min-height: 38px !important; }
    #main-content #app .calendar-filter .range-btns > button:not(.active):not(#_a):not(#_b) {
        background: transparent !important;
        box-shadow: none !important;
        color: var(--text-secondary) !important;
    }
    #app .calendar-filter > div:last-child > input[type="date"] { flex: 1 1 0; min-width: 0; width: auto !important; }
    #app .calendar-filter > div:last-child > span { white-space: nowrap; }
    #app[data-page="campaign-detail"] .header-right { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   26. INTELIGÊNCIA & ESPIONAGEM (#/spy-trends/*) + faixas roláveis em geral
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Qualquer faixa flex com rolagem lateral declarada no próprio HTML: os
       filhos não podem encolher, senão os rótulos se sobrepõem (Radar: as
       abas de nicho viravam texto encavalado "os os Winners Receitas…"). */
    #app [style*="display:flex"][style*="overflow-x:auto"] > *,
    #app [style*="display: flex"][style*="overflow-x: auto"] > *,
    #app [style*="display:flex"][style*="overflow-x: auto"] > *,
    #app [style*="display: flex"][style*="overflow-x:auto"] > * {
        flex-shrink: 0 !important;
        white-space: nowrap;
    }
    #app .spy-nicho-tabs { scrollbar-width: none; }
    #app .spy-nicho-tabs::-webkit-scrollbar { display: none; }
    /* Campo de busca com lupa: o texto começava por baixo do ícone */
    #app .spy-busca-campo input { padding-left: 38px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   27. ADMINISTRAÇÃO, CONFIGURAÇÕES E CENTRAL DE ATENDIMENTOS
   ═══════════════════════════════════════════════════════════════════════════ */
.hd-back { display: none !important; }
/* Helpdesk em bloco próprio até 820px (antes só ≤768: entre 769 e 820 a
   página caía no layout dividido 40/60 do módulo, com a fila espremida e sem
   o botão de voltar). */
@media (max-width: 820px) {
    /* Central de Atendimentos: fila e conversa dividiam a tela (40/60) e a
       fila ficava com os nomes encavalados. Agora é uma de cada vez: fila →
       toca no chamado → conversa em tela cheia com botão de voltar. */
    #app .hd-root {
        display: block !important;
        height: calc(100dvh - 58px - 130px) !important;
        min-height: 440px !important;
        border-radius: 14px !important;
    }
    #app .hd-root > .hd-queue { height: 100%; border-bottom: 0 !important; }
    #app .hd-root:not(.is-chat) > .hd-chat,
    #app .hd-root:not(.is-chat) > .hd-info { display: none !important; }
    #app .hd-root.is-chat > .hd-queue,
    #app .hd-root.is-chat > .hd-info { display: none !important; }
    #app .hd-root.is-chat > .hd-chat { display: flex !important; height: 100%; }
    #app .hd-back {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 10px !important;
        border: 1px solid var(--hd-line2, var(--border)) !important;
        color: var(--hd-tx, var(--text)) !important;
    }
    #app .hd-chat-hd { gap: 10px; align-items: center; }
    #app .hd-chat-who { flex: 1 1 0; min-width: 0; }
    #app .hd-chat-actions { flex: 1 1 100%; justify-content: space-between; }
    #app .hd-seg button, #app .hd-btn { min-height: 38px !important; }
    #app .hd-q-item, #app .hd-ticket { min-height: 56px; }
}
@media (max-width: 768px) {

    /* Configurações do Sistema: colunas do grid com min-width automático
       esticavam para 612px (tabelas de chaves) e cortavam na borda. */
    #app .settings-grid > * { min-width: 0; }

    /* Logs do sistema: abas numa faixa rolável */
    #app .logs-tabs-bar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
    #app .logs-tabs-bar > * { flex: 0 0 auto !important; white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   28. MODO CLARO (celular)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Navbar inferior: era sempre escura, destoando no modo claro. */
    html[data-theme="light"] .mobile-navbar {
        background: rgba(255, 255, 255, 0.94);
        border-color: rgba(99, 102, 241, 0.18);
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    html[data-theme="light"] .mnav-item { color: #64748b !important; }
    html[data-theme="light"] .mnav-item:hover { color: #334155 !important; }
    html[data-theme="light"] .mnav-item.active { color: var(--accent, #6366f1) !important; }
    html[data-theme="light"] .mnav-fab { border-color: #fff !important; }
    html[data-theme="light"] .mnav-notif-badge { border-color: #fff; }
    html[data-theme="light"] .mnav-sheet-handle { background: rgba(15, 23, 42, 0.15); }
    html[data-theme="light"] .mnav-sheet-tile,
    html[data-theme="light"] .mnav-sheet-action-row { background: #f8fafc !important; }
    html[data-theme="light"] .mnav-sheet-action-row { color: #0f172a !important; }
    html[data-theme="light"] .mnav-sheet-tile-label { color: #334155; }

    /* Cartões de tabela: células com `color:#fff` fixo no JS (ex.: data do
       agendamento) sumiam no fundo branco. */
    html[data-theme="light"] #app table.rt-cards td[style*="color:#fff"],
    html[data-theme="light"] #app table.rt-cards td[style*="color: #fff"],
    html[data-theme="light"] #app table.rt-cards td[style*="color:#ffffff"],
    html[data-theme="light"] #app table.rt-cards td[style*="color: white"] {
        color: var(--text) !important;
    }
    html[data-theme="light"] #app .pp-spy::-webkit-scrollbar { display: none; }
}

/* Tablet em pé (601–768px): carrosséis e colunas de arraste mostram mais de
   um item por vez. */
@media (min-width: 601px) and (max-width: 768px) {
    #pp-root .pp-spy > .pp-spy-c { flex-basis: 38% !important; }
    #app[data-module="crm"] .kanban-column,
    #app[data-module="leads"] .kanban-column { min-width: 48% !important; max-width: 48% !important; flex-basis: 48% !important; }
}