/* app.css — camada base compartilhada do dashboard.
   Carregada ANTES do <style> inline de cada página: enquanto a página
   mantiver seus blocos inline, eles vencem (mesma especificidade, ordem
   posterior) — a migração remove os blocos duplicados página a página.
   Regra: só entra aqui o que é ≥95% idêntico entre as páginas. */

/* ── 1. Tokens ────────────────────────────────────────────────────────── */
/* Saíram daqui. Quem declara token é `design-system.css`, carregado ANTES
   deste arquivo em toda página — inclusive os nomes antigos (--brand, --fg1,
   --bg...), traduzidos lá na camada de compatibilidade. Ter dois arquivos
   declarando a mesma cor é o problema que a migração existe para acabar:
   com dois donos, um deles sempre fica para trás. */

/* ── 2. Base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--font);background:var(--bg);color:var(--fg1);
  -webkit-font-smoothing:antialiased;display:flex;min-height:100vh;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* width:100%+min-width:0 — .page é filho de .shell{display:flex;flex-direction:column}
   (sidebar.js); sem os dois, um elemento largo lá dentro (tabela com
   min-width, grid com coluna mínima grande) faz .page crescer pro tamanho do
   conteúdo em vez de ficar no tamanho da tela e deixar o próprio elemento
   rolar internamente — foi assim que /linkedin vazava 800px+ de tabela pra
   fora da viewport no mobile. */
/* §5 — acima de 1600px o conteudo para de esticar e CENTRALIZA em 1720.
   O max-width ja fazia a primeira metade; sem margin auto, a sobra ia
   toda para a direita e a tela ficava torta em monitor largo. */
.page{max-width:1720px;width:100%;min-width:0;margin-inline:auto;
      padding:var(--space-8) var(--space-8) var(--space-12);}

/* ── 3. Componentes de shell (≥95% idênticos entre páginas) ──────────── */
/* topbar */
/* 14px = body-01 (regra 1.1: corpo em 14); era 13. */
.topbar-title{font:700 14px/20px var(--font);color:var(--text-primary);}
.topbar-sub{font-size:11px;color:var(--text-tertiary);}
.topbar-sep{width:1px;height:16px;background:var(--border-subtle);}
.topbar-live{display:flex;align-items:center;gap:var(--space-3);font-size:11px;font-weight:500;
             color:var(--success-600);margin-left:auto;}
.topbar-live::before{content:'';width:6px;height:6px;border-radius:var(--radius-full);
                     background:var(--success-600);animation:pulse 2s infinite;}

/* botão de recarregar / período — cor de destaque via --accent */
.period-bar{display:flex;align-items:center;gap:var(--space-2);}
.period-btn{height:var(--control-sm);padding:0 var(--space-5);font:500 12px var(--font);
            border-radius:var(--radius-md);border:1px solid var(--border-strong);
            background:var(--surface-raised);color:var(--text-secondary);cursor:pointer;
            white-space:nowrap;
            transition:background var(--duration-instant) var(--ease-productive),
                       border-color var(--duration-instant) var(--ease-productive);}
/* Um visual só (revisão de UX de 16/10/2026: eram três — rosa cheio, tinta
   rosa e preto). Selecionado = tinta de seleção + borda e texto de marca,
   o padrão que mais telas já usavam (blog, site, LPs, social, mídia paga). */
.period-btn:hover{border-color:var(--border-interactive);color:var(--text-brand);}
.period-btn.active,.period-btn[aria-pressed="true"]{background:var(--surface-selected);
            border-color:var(--border-interactive);color:var(--text-brand);}
.period-btn:disabled{opacity:.4;cursor:not-allowed;}

/* drawer lateral (#drawer) */
#drawer-overlay{position:fixed;inset:0;background:var(--overlay);z-index:300;opacity:0;
                pointer-events:none;transition:opacity var(--duration-base) var(--ease-exit)}
#drawer-overlay.open{opacity:1;pointer-events:all}
#drawer{position:fixed;top:0;right:0;height:100%;width:var(--drawer-md);max-width:92vw;
        background:var(--surface-raised);z-index:400;box-shadow:var(--elevation-3);
        transform:translateX(100%);
        transition:transform var(--duration-slow) var(--ease-entrance);
        overflow-y:auto;display:flex;flex-direction:column}
#drawer.open{transform:translateX(0)}
.dr-header{padding:var(--space-8) var(--space-8) var(--space-5);
           border-bottom:1px solid var(--border-subtle);display:flex;align-items:flex-start;
           justify-content:space-between;gap:var(--space-5);position:sticky;top:0;
           background:var(--surface-raised);z-index:1}
.dr-title{font:700 16px/22px var(--font);color:var(--text-primary);flex:1}
.dr-close{background:none;border:none;cursor:pointer;width:var(--control-md);height:var(--control-md);
          border-radius:var(--radius-md);color:var(--text-tertiary);font-size:18px;line-height:1;
          flex-shrink:0;display:grid;place-items:center}
.dr-close:hover{color:var(--text-primary);background:var(--action-ghost-hover)}
.dr-body{padding:var(--space-7) var(--space-8);flex:1;display:flex;flex-direction:column;gap:var(--space-6)}
.dr-section{display:flex;flex-direction:column;gap:var(--space-3)}
.dr-section-title{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
                  color:var(--text-tertiary);margin-bottom:var(--space-1)}
.dr-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-5);
        padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle)}
.dr-row:last-child{border-bottom:none}
.dr-label{font-size:12px;color:var(--text-tertiary);white-space:nowrap;flex-shrink:0}
.dr-val{font-size:12px;font-weight:500;color:var(--text-primary);text-align:right;
        word-break:break-word;font-variant-numeric:tabular-nums}
.dr-val.empty{color:var(--text-disabled);font-weight:400}
.dr-hs-link{display:inline-flex;align-items:center;gap:var(--space-3);font:500 13px var(--font);
            color:var(--accent);text-decoration:none;height:var(--control-sm);
            padding:0 var(--space-5);border:1px solid var(--accent);
            border-radius:var(--radius-md);margin-top:var(--space-2);width:fit-content}
.dr-hs-link:hover{background:var(--info-100)}

/* botão de recarregar da topbar — cor de destaque via --accent. Existia
   quase idêntico (só o hover mudava de cor) em pipeline/midia_paga/
   briefing/email/instagram/blog/lps/campanha antes desta consolidação. */
.topbar-refresh{display:inline-flex;align-items:center;gap:var(--space-3);
                height:var(--control-sm);padding:0 var(--space-5);font:500 12px var(--font);
                border-radius:var(--radius-md);border:1px solid var(--border-strong);
                background:transparent;color:var(--text-secondary);cursor:pointer;
                margin-left:var(--space-5);
                transition:border-color var(--duration-instant) var(--ease-productive),
                           color var(--duration-instant) var(--ease-productive);}
.topbar-refresh:hover{border-color:var(--accent);color:var(--accent);}
.topbar-refresh svg{width:var(--icon-sm);height:var(--icon-sm);
                    transition:transform var(--duration-slow) var(--ease-productive);}
.topbar-refresh.spinning svg{animation:spin .7s linear infinite;}

/* ── 4. KPI cards ─────────────────────────────────────────────────────── */
/* grid + card idênticos entre páginas; a página usa .kpi-row (flex) em vez
   de .kpi-grid quando o número de cards é sempre o mesmo.
   §9.8 v2 — o valor é sempre text-primary. As antigas .kpi.blue/.green/
   .purple saíram: azul/roxo num número não significam nada. Cor só na
   variação (.kpi-delta), sempre com seta ↑ ↓ → (regra 14). .warn/.danger
   ficam: são estado (limite estourado), não decoração. */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
          gap:var(--space-6);margin-bottom:var(--space-8);}
.kpi-row{display:flex;gap:var(--space-6);margin-bottom:var(--space-8);}
.kpi-row .kpi{flex:1;}
.kpi-row.sem-margem{margin-bottom:0;}
/* Linha com número variável de cards (8 KPIs do disparo): grade que cabe. */
.kpi-row.auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
/* No celular a faixa flex não quebrava: o 4º cartão saía da tela (/insights
   vazava 50px). Vira grade de 2 — o sidebar.js já manda 2 colunas, mas
   `grid-template-columns` não faz nada num container flex. */
@media(max-width:768px){.kpi-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}}
.kpi{background:var(--surface-raised);border:1px solid var(--border-subtle);
     border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:none;}
.kpi-label{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
           color:var(--text-tertiary);margin-bottom:var(--space-3);}
.kpi-value{font:700 24px/28px var(--font);letter-spacing:-.02em;color:var(--text-primary);
           font-variant-numeric:tabular-nums;}
.kpi-sub{font:400 12px/16px var(--font);color:var(--text-tertiary);margin-top:var(--space-2);}
.kpi.warn .kpi-value{color:var(--warning-600);}
.kpi.danger .kpi-value{color:var(--danger-600);}
.kpi-delta{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);
           padding-top:var(--space-4);border-top:1px solid var(--border-subtle);
           font:400 12px/16px var(--font);color:var(--text-tertiary);font-variant-numeric:tabular-nums;}
.kpi-delta.up{color:var(--success-600);}
.kpi-delta.down{color:var(--danger-600);}

/* ── 5. Loading / erro / cache ────────────────────────────────────────── */
.loading-state{display:flex;align-items:center;justify-content:center;
               padding:var(--space-12);gap:var(--space-5);color:var(--text-tertiary);font-size:14px;}
.spinner{width:20px;height:20px;border:2px solid var(--border-subtle);
         border-top-color:var(--accent);border-radius:var(--radius-full);
         animation:spin .7s linear infinite;}
.error-box{background:var(--danger-100);border:1px solid var(--danger-200);
           border-left:3px solid var(--danger-600);border-radius:var(--radius-lg);
           padding:var(--space-5) var(--space-6);color:var(--danger-700);font-size:14px;
           margin-bottom:var(--space-7);}
.cache-info{font-size:12px;color:var(--text-tertiary);font-weight:400;}
.cache-info.stale{color:var(--warning-600);font-weight:500;}

/* ── 6. Abas de visão + seção de tabela ───────────────────────────────── */
.view-tabs{display:flex;gap:var(--space-2);margin-bottom:-1px;}
.view-tab{height:var(--control-md);padding:0 var(--space-6);font:500 13px var(--font);
          border-radius:var(--radius-lg) var(--radius-lg) 0 0;
          border:1px solid var(--border-subtle);border-bottom:none;
          background:var(--surface-sunken);color:var(--text-secondary);cursor:pointer;
          transition:background var(--duration-instant) var(--ease-productive);}
.view-tab.active{background:var(--surface-raised);color:var(--text-primary);}
/* Aba que é link entre telas irmãs (abas com href do MH.pagina, lote 3B):
   mesma cara do botão, sem sublinhado. */
a.view-tab{display:inline-flex;align-items:center;text-decoration:none;}
/* No celular as abas rolam na horizontal (não quebram, não vazam), com
   degradê na ponta indicando que dá para arrastar (era cópia no pipeline). */
@media(max-width:768px){
  .view-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;max-width:100%;
    -webkit-mask-image:linear-gradient(to right,var(--neutral-1000) calc(100% - 24px),transparent);
    mask-image:linear-gradient(to right,var(--neutral-1000) calc(100% - 24px),transparent);}
  .view-tabs::-webkit-scrollbar{display:none;}
  .view-tab{flex-shrink:0;}
}
.view-tab-panel{border:1px solid var(--border-subtle);
                border-radius:0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
                overflow:hidden;background:var(--surface-raised);box-shadow:none;}

.table-section{background:var(--surface-raised);border:1px solid var(--border-subtle);
               border-radius:var(--radius-xl);overflow:hidden;box-shadow:none;}
.table-header{display:flex;align-items:center;justify-content:space-between;
              padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-subtle);
              flex-wrap:wrap;gap:var(--space-4);}
.table-header-title{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
                    color:var(--text-tertiary);}

/* O atributo `hidden` do HTML esconde via `display:none` da folha do
   navegador — que perde pra QUALQUER regra de `display` na página. Um
   `.modal{display:flex}` ou `.btn{display:inline-flex}` faz o elemento
   escondido continuar na tela, e no caso do modal ele segue interceptando os
   cliques de tudo que está atrás. Já aconteceu duas vezes (banco.html e
   funil-vendas.html), então a regra mora aqui, para todas as telas. */
[hidden]{display:none !important;}

/* ── 7. Mobile ────────────────────────────────────────────────────────── */
/* sidebar.js injeta seu próprio <style id="sidebar-css"> via JS, a partir de
   um <script> no <body> — como isso roda depois do <head> (onde este
   arquivo e o <style> inline de cada página já foram parseados), o bloco
   dele entra por ÚLTIMO no DOM e vence qualquer empate de especificidade.
   Ele define `.topbar{height:52px}` no desktop e, no mobile,
   `.topbar{padding:0 12px!important;gap:8px!important}` — sem herdar
   `flex-wrap`, então quando o conteúdo da topbar não cabe numa única linha
   de 52px (subtítulo, seletor de período, botão de recarregar, busca...)
   ele vaza da barra em vez de quebrar. Esse exato bloco vivia copiado, com
   pequenas variações, em pipeline/midia_paga/banco/briefing/email/
   instagram/blog/lps/tarefas.css — cada página reimplementando a mesma
   correção. Centralizado aqui, `height:auto` não é anulado pelo
   `!important` do sidebar.js (que só toca `padding`/`gap`) e passa a valer
   para qualquer página que carregue app.css. Cada página continua
   responsável por reordenar/reexibir seus PRÓPRIOS elementos filhos (ids
   específicos, já que sidebar.js esconde `.topbar-sub`/`.topbar-refresh`/
   `.period-bar` por classe com `!important`). */
@media(max-width:768px){
  .topbar{flex-wrap:wrap!important;height:auto!important;padding:8px 14px 10px!important;gap:6px;row-gap:6px;}
}

/* Primeira linha da topbar no celular = menu + título + avatar, sempre.
   Sem isso o avatar (injetado no fim pelo access.js) caía onde sobrasse
   espaço: sozinho numa linha depois do "+ Nova" (/calendario, /tarefas),
   ou na ponta da segunda linha. O `::after` de largura total força a quebra
   logo depois dele; os controles da página seguem nas linhas de baixo, na
   ordem do HTML. Só vale quando o título é filho da topbar (direto ou dentro
   de um wrapper direto) — com outro desenho, reordenar poria o título
   embaixo do menu. Foto, nome e "Sair" moram no rodapé do menu lateral
   (16/10/2026: o chip da topbar saiu). */
@media(max-width:768px){
  .topbar:has(> .topbar-title, > * > .topbar-title) > .sb-toggle{order:-3;}
  .topbar > .topbar-title,
  .topbar > :has(> .topbar-title){order:-2;flex:1 1 0;min-width:0;}
  .topbar:has(> .topbar-title, > * > .topbar-title)::after{content:'';order:-1;flex-basis:100%;height:0;}
  /* O título agora ocupa a linha toda até o avatar: o teto de 140px do
     sidebar.js cortava nomes curtos ("Saúde da Mídia Pa…"). */
  .topbar .topbar-title{max-width:none;}
  /* "Ao vivo" na segunda linha, junto dos controles — com o margin-left:auto
     do desktop ele ficava sozinho na ponta direita de uma linha vazia. */
  .topbar > .topbar-live{margin-left:0;}
}

/* §1.13 — anel de foco visível em todo elemento focável, para todas as
   telas de uma vez. Era o item da checklist mais fácil de esquecer
   componente a componente. */
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:2px;
}

/* §9.2 — campo em foco: borda de marca + halo, em vez do anel. Checkbox,
   radio e range ficam com o anel acima (box-shadow neles é inconsistente
   entre navegadores). */
:where(input:not([type=checkbox],[type=radio],[type=range]),select,textarea):focus-visible{
  outline:none;border-color:var(--border-interactive);box-shadow:var(--focus-halo);
}

/* §7 — prefers-reduced-motion zera a duração sem remover o feedback. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}

/* ── 8. Componentes compartilhados (DESIGN_SYSTEM.md §9, v2) ─────────── */
/* Fora de @layer de propósito. Já estiveram numa camada (para qualquer
   regra da página vencer), mas estilo fora de camada vence o de dentro
   independentemente de especificidade — e isso inclui o reset
   `*{margin:0;padding:0}` que o próprio app.css e quase toda página
   declaram: o `.btn`/`.chip` ficava sem padding. Fora da camada, a classe
   (0,1,0) vence o `*` (0,0,0), e a página que redeclara `.btn` continua
   mandando por vir depois. */

  /* §9.1 botão — raio 6px sempre; pílula é chip de filtro, não ação. */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
       height:var(--control-md);padding:0 14px;font:500 13px/16px var(--font);
       border-radius:var(--radius-md);border:1px solid var(--border-strong);
       background:var(--surface-raised);color:var(--text-primary);cursor:pointer;
       white-space:nowrap;text-decoration:none;
       transition:background var(--duration-instant) var(--ease-productive),
                  border-color var(--duration-instant) var(--ease-productive);}
  .btn:hover{background:var(--surface-sunken);}
  .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
  .btn svg{width:var(--icon-sm);height:var(--icon-sm);flex-shrink:0;}
  .btn.primary{background:var(--action-primary-bg);border-color:var(--action-primary-bg);color:var(--neutral-0);}
  .btn.primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);}
  .btn.primary:active{background:var(--action-primary-active);}
  .btn.primary:disabled{background:var(--action-primary-disabled);border-color:var(--action-primary-disabled);opacity:1;}
  .btn.secondary{background:var(--surface-raised);border-color:var(--border-strong);color:var(--text-primary);}
  .btn.neutral{background:var(--action-neutral-bg);border-color:var(--action-neutral-bg);color:var(--neutral-0);}
  .btn.neutral:hover{background:var(--neutral-900);}
  .btn.ghost{background:transparent;border-color:transparent;color:var(--text-secondary);}
  .btn.ghost:hover{background:var(--action-ghost-hover);color:var(--text-primary);}
  .btn.danger{background:var(--action-danger-bg);border-color:var(--action-danger-bg);color:var(--neutral-0);}
  .btn.danger:hover{background:var(--danger-700);border-color:var(--danger-700);}
  /* Destrutivo secundário — a ÚNICA variante de perigo fora de modal
     (excluir/remover/arquivar num formulário, cartão ou linha). Contorno e
     texto vermelhos sobre fundo claro. As páginas não redefinem `.btn.danger`:
     a cópia local trocava só a cor do texto e herdava o fundo vermelho daqui
     (texto vermelho sobre vermelho, botão invisível). Barrado em
     tests/test_ux_botao_perigo.py. */
  .btn.danger-outline{background:var(--surface-raised);border-color:var(--danger-200);color:var(--danger-700);}
  .btn.danger-outline:hover{background:var(--danger-100);border-color:var(--danger-600);color:var(--danger-700);}
  .btn.xs{height:var(--control-xs);padding:0 9px;font-size:12px;}
  .btn.sm{height:var(--control-sm);padding:0 12px;font-size:12px;}
  .btn.lg{height:var(--control-lg);padding:0 18px;font-size:14px;}
  /* botão só de ícone: quadrado na altura do controle (pede aria-label) */
  .btn.icone{width:var(--control-md);padding:0;}
  .btn.icone.sm{width:var(--control-sm);}
  .btn.icone.xs{width:var(--control-xs);}

  /* §9.5 chip de filtro — pílula; ativo em preto (seleção de visão, não
     ação primária). */
  .chip{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--chip-height);
        padding:0 10px;font:500 12px/16px var(--font);border-radius:var(--radius-full);
        border:1px solid var(--border-strong);background:var(--surface-raised);
        color:var(--text-secondary);cursor:pointer;white-space:nowrap;
        transition:background var(--duration-instant) var(--ease-productive);}
  .chip:hover{background:var(--surface-sunken);color:var(--text-primary);}
  .chip.active,.chip[aria-pressed="true"]{background:var(--surface-inverse);border-color:var(--surface-inverse);color:var(--text-on-inverse);}

  /* §9.5 tag de categoria/status — retângulo de 4px, par 100/700. */
  .tag{display:inline-flex;align-items:center;gap:var(--space-1);height:20px;padding:0 var(--space-4);
       font:500 12px/16px var(--font);border-radius:var(--radius-sm);white-space:nowrap;
       background:var(--neutral-100);color:var(--neutral-700);}
  .tag.neutral{background:var(--neutral-100);color:var(--neutral-700);}
  /* tag de texto longo (resposta de formulário): quebra linha em vez de cortar */
  .tag.quebra{white-space:normal;height:auto;min-height:20px;}
  .tag.brand{background:var(--brand-50);color:var(--brand-600);}
  .tag.success{background:var(--success-100);color:var(--success-700);}
  .tag.warning{background:var(--warning-100);color:var(--warning-700);}
  .tag.danger{background:var(--danger-100);color:var(--danger-700);}
  .tag.info{background:var(--info-100);color:var(--info-700);}

  /* §9.6 tabela — cabeçalho em overline-01; número à direita e tabular. */
  .table-th{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
            color:var(--text-tertiary);}
  /* !important de propósito: vence o `.tabela th{text-align:left}` que
     quase toda página declara com especificidade maior — sem isso cada tela
     teria de repetir `.x th.num{text-align:right}`. Número à direita não
     tem exceção (regra 7). */
  td.num,th.num{text-align:right !important;font-variant-numeric:tabular-nums;}

  /* §9.9 sobreposições — só estas larguras. */
  .drawer{width:var(--drawer-md);max-width:92vw;}
  .drawer.lg{width:var(--drawer-lg);}
  .modal.sm{width:100%;max-width:var(--modal-sm);}
  .modal.md{width:100%;max-width:var(--modal-md);}
  .modal.lg{width:100%;max-width:var(--modal-lg);}

  /* §9.19 barra de ação em massa (veio de admin.html). */
  .bulkbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--space-4);
           flex-wrap:wrap;min-height:var(--control-lg);background:var(--surface-inverse);
           color:var(--text-on-inverse);border-radius:var(--radius-lg);
           padding:var(--space-3) var(--space-5);margin-bottom:var(--space-5);
           box-shadow:var(--elevation-2);}
  .bulkbar .bcount{font:700 13px/16px var(--font);margin-right:var(--space-1);}
  .bulkbar select,.bulkbar .bbtn{font:500 12px/16px var(--font);border-radius:var(--radius-md);
           height:var(--control-sm);padding:0 var(--space-4);cursor:pointer;
           border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:var(--text-on-inverse);}
  .bulkbar select option{color:var(--text-primary);}
  .bulkbar .bbtn:hover{background:rgba(255,255,255,.2);}
  .bulkbar .bbtn.danger{border-color:rgba(244,194,189,.5);color:var(--danger-200);}
  .bulkbar .bbtn.danger:hover{background:rgba(180,35,24,.22);}
  .bulkbar .spacer{margin-left:auto;}

/* ── 9. Feedback e componentes de UX (utils.js: MH.*) ─────────────────── */
/* Contrato em DESIGN_SYSTEM.md §9.10. O JS monta o DOM; aqui só a forma.
   Só tokens — nenhuma cor crua. */

/* toasts — um container só (#mh-toasts, aria-live=polite), inferior direita */
.mh-toasts{position:fixed;right:var(--space-8);bottom:var(--space-8);z-index:1200;
           display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-4);
           pointer-events:none;max-width:calc(100vw - 2 * var(--space-6));}
.mh-toast{pointer-events:auto;display:flex;align-items:center;gap:var(--space-5);
          width:360px;max-width:100%;min-height:var(--control-lg);
          padding:var(--space-4) var(--space-4) var(--space-4) var(--space-6);
          background:var(--surface-inverse);color:var(--text-on-inverse);
          border-left:3px solid var(--info-600);border-radius:var(--radius-lg);
          box-shadow:var(--elevation-3);font:400 14px/20px var(--font);
          animation:mh-entra var(--duration-slow) var(--ease-entrance);}
.mh-toast--ok{border-left-color:var(--success-600);}
.mh-toast--erro{border-left-color:var(--danger-600);}
.mh-toast--saindo{opacity:0;transition:opacity var(--duration-base) var(--ease-exit);}
.mh-toast-texto{flex:1;min-width:0;overflow-wrap:anywhere;}
.mh-toast-acao,.mh-toast-fechar{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
          height:var(--control-sm);padding:0 var(--space-4);border:none;border-radius:var(--radius-md);
          background:transparent;color:inherit;font:700 13px/16px var(--font);cursor:pointer;}
.mh-toast-acao{text-decoration:underline;text-underline-offset:3px;}
.mh-toast-fechar{width:var(--control-sm);padding:0;font-size:18px;font-weight:400;opacity:.8;}
.mh-toast-acao:hover,.mh-toast-fechar:hover{background:var(--nav-hover);opacity:1;}
.mh-toast :focus-visible{outline-color:currentColor;}
@keyframes mh-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .mh-toasts{left:var(--space-6);right:var(--space-6);bottom:var(--space-6);align-items:stretch;}
  .mh-toast{width:auto;}
}

/* modal de confirmação/pergunta (MH.confirmar / MH.perguntar) */
.mh-veu{position:fixed;inset:0;z-index:1100;background:var(--overlay);display:grid;place-items:center;
        padding:var(--space-6);animation:mh-veu-entra var(--duration-base) var(--ease-entrance);}
@keyframes mh-veu-entra{from{opacity:0}to{opacity:1}}
.mh-modal{width:100%;max-width:var(--modal-sm);max-height:80vh;overflow:auto;
          background:var(--surface-raised);color:var(--text-body);border-radius:var(--radius-xl);
          box-shadow:var(--elevation-3);padding:var(--space-7);
          display:flex;flex-direction:column;gap:var(--space-5);}
.mh-modal-titulo{font:700 16px/22px var(--font);color:var(--text-primary);}
.mh-modal-texto{font:400 14px/20px var(--font);color:var(--text-secondary);}
.mh-modal-aviso{font:500 13px/18px var(--font);color:var(--danger-700);}
.mh-modal-form{display:flex;flex-direction:column;gap:var(--space-5);}
.mh-modal-acoes{display:flex;justify-content:flex-end;gap:var(--space-4);margin-top:var(--space-2);
                flex-wrap:wrap;}
.mh-campo{display:flex;flex-direction:column;gap:var(--space-3);}
.mh-campo-rotulo{font:500 13px/18px var(--font);color:var(--text-secondary);}
.mh-campo-rotulo strong{font-family:var(--mono);color:var(--text-primary);}
.mh-campo-input{min-height:var(--control-md);padding:var(--space-3) var(--space-5);
                font:400 14px/20px var(--font);color:var(--text-primary);
                background:var(--surface-raised);border:1px solid var(--border-strong);
                border-radius:var(--radius-md);width:100%;}
textarea.mh-campo-input{min-height:96px;resize:vertical;}
.mh-campo-input::placeholder{color:var(--text-placeholder);}
.mh-campo-input[aria-invalid="true"]{border-color:var(--danger-600);}
.mh-campo-erro{font:400 12px/16px var(--font);color:var(--danger-700);}

/* botão em andamento (MH.acao) — spinner antes do texto */
.mh-ocupado{cursor:progress !important;}
.mh-ocupado::before{content:'';width:12px;height:12px;flex-shrink:0;border-radius:var(--radius-full);
                    border:2px solid currentColor;border-right-color:transparent;
                    animation:spin .7s linear infinite;}

/* estados de área (MH.estado) */
.mh-estado{display:flex;flex-direction:column;align-items:center;justify-content:center;
           text-align:center;gap:var(--space-4);padding:var(--space-11) var(--space-8);
           color:var(--text-secondary);}
.mh-estado-icone,.mh-estado svg{width:var(--icon-xl);height:var(--icon-xl);color:var(--text-tertiary);
           stroke-width:1.2;}
.mh-estado-titulo{font:500 16px/22px var(--font);color:var(--text-primary);}
.mh-estado-texto{font:400 14px/20px var(--font);color:var(--text-secondary);max-width:48ch;}
.mh-estado .btn{margin-top:var(--space-4);}
.mh-estado--carregando{flex-direction:row;gap:var(--space-5);padding:var(--space-10) var(--space-8);}
.mh-estado--carregando .mh-estado-titulo{font-weight:400;font-size:14px;color:var(--text-tertiary);}
.mh-estado--erro .mh-estado-titulo{color:var(--danger-700);}
.mh-estado--erro svg{color:var(--danger-600);}

/* gráfico com plano B (MH.graficoOuTabela): a biblioteca do gráfico não
   carregou e a área mostra os mesmos números em tabela. Cores de página
   (a página pode ter fundo escuro no gráfico): só tokens. */
.mh-com-tabela{height:auto !important;max-height:none !important;}
.mh-grafico-tabela{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;width:100%;}
.mh-grafico-aviso{font:400 13px/18px var(--font);color:var(--text-secondary);}
.mh-grafico-rolagem{overflow-x:auto;max-width:100%;border:1px solid var(--border-subtle);
                    border-radius:var(--radius-md);background:var(--surface-raised);}
.mh-grafico-legenda{caption-side:top;text-align:left;padding:var(--space-4) var(--space-5) 0;
                    font:500 13px/18px var(--font);color:var(--text-primary);}
.mh-tabela{width:100%;border-collapse:collapse;font:400 13px/18px var(--font);color:var(--text-primary);}
.mh-tabela th,.mh-tabela td{padding:var(--space-3) var(--space-5);text-align:left;white-space:nowrap;
                            border-bottom:1px solid var(--border-subtle);}
.mh-tabela thead th{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
                    color:var(--text-tertiary);}
.mh-tabela tbody th{font-weight:500;}
.mh-tabela tbody tr:last-child > *{border-bottom:0;}
.mh-estado--sem-acesso svg{color:var(--text-secondary);}

/* frescor (MH.frescor): faixa âmbar quando a fonte caiu e o cache serviu
   o último dado; texto discreto no caso normal */
.mh-stale{display:flex;align-items:center;gap:var(--space-4);
          background:var(--warning-100);border:1px solid var(--warning-200);
          border-left:3px solid var(--warning-600);border-radius:var(--radius-lg);
          padding:var(--space-4) var(--space-6);margin-bottom:var(--space-6);
          font:500 13px/18px var(--font);color:var(--warning-700);}
.mh-frescor{font:400 12px/16px var(--font);color:var(--text-tertiary);font-variant-numeric:tabular-nums;}

/* cabeçalho de agente (MH.agente, 17/10/2026): o que o agente faz, quando
   rodou e quando roda de novo. Alerta em linha (§9.10): fundo 100, borda
   200, barra esquerda de 3 px na cor 600, título em 700; o estado vai
   escrito, a cor só reforça. Neutro para sob demanda / sem registro. */
.mh-agente{display:flex;align-items:flex-start;gap:var(--space-5);
           padding:var(--space-5) var(--space-6);margin-bottom:var(--space-6);
           background:var(--surface-sunken);border:1px solid var(--border-subtle);
           border-left:3px solid var(--text-tertiary);border-radius:var(--radius-lg);
           font:400 13px/18px var(--font);color:var(--text-secondary);}
.mh-agente-icone{flex-shrink:0;width:var(--icon-md);height:var(--icon-md);margin-top:2px;
                 color:var(--text-tertiary);}
.mh-agente-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);overflow-wrap:anywhere;}
.mh-agente-nome{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
                color:var(--text-tertiary);}
.mh-agente-titulo{font:700 14px/20px var(--font);color:var(--text-primary);}
.mh-agente-faz,.mh-agente-quando{font:400 13px/18px var(--font);color:var(--text-secondary);}
.mh-agente .btn{flex-shrink:0;align-self:center;}
.mh-agente--em-dia{background:var(--success-100);border-color:var(--success-200);border-left-color:var(--success-600);}
.mh-agente--em-dia .mh-agente-icone,.mh-agente--em-dia .mh-agente-titulo{color:var(--success-700);}
.mh-agente--atrasado{background:var(--warning-100);border-color:var(--warning-200);border-left-color:var(--warning-600);}
.mh-agente--atrasado .mh-agente-icone,.mh-agente--atrasado .mh-agente-titulo{color:var(--warning-700);}
.mh-agente--parado{background:var(--danger-100);border-color:var(--danger-200);border-left-color:var(--danger-600);}
.mh-agente--parado .mh-agente-icone,.mh-agente--parado .mh-agente-titulo{color:var(--danger-700);}
@media(max-width:640px){
  /* o texto fica com a primeira linha inteira (ao lado do ícone) e o botão
     desce para baixo dele, alinhado ao texto — sem espremer o título */
  .mh-agente{flex-wrap:wrap;}
  .mh-agente-texto{flex:1 1 calc(100% - var(--icon-md) - var(--space-5));}
  .mh-agente .btn{align-self:flex-start;margin-left:calc(var(--icon-md) + var(--space-5));}
}

/* trilha das cadeias (MH.trilha): Captação e E-mail. Passos em linha,
   separados por "›", o atual em text-primary 700 com indicador de 2 px
   brand-500 (§9.14); pendência em pílula âmbar. */
.mh-trilha{margin:0 0 var(--space-6);min-width:0;max-width:100%;}
.mh-trilha-lista{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);
                 list-style:none;margin:0;padding:0;}
.mh-trilha-passo{display:flex;align-items:center;gap:var(--space-3);min-width:0;}
.mh-trilha-passo + .mh-trilha-passo::before{content:"›";color:var(--text-tertiary);font:400 14px/1 var(--font);}
.mh-trilha-link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:28px;
                padding:var(--space-1) var(--space-2);border-bottom:2px solid transparent;
                font:500 13px/18px var(--font);color:var(--text-secondary);text-decoration:none;}
.mh-trilha-link:hover{color:var(--text-primary);}
.mh-trilha-passo--atual .mh-trilha-link{color:var(--text-primary);font-weight:700;border-bottom-color:var(--brand-500);}
.mh-trilha-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
               border-radius:var(--radius-full);background:var(--surface-sunken);color:var(--text-tertiary);
               font:600 11px/1 var(--font);font-variant-numeric:tabular-nums;}
.mh-trilha-passo--atual .mh-trilha-num{background:var(--brand-500);color:var(--text-on-inverse);}
.mh-trilha-pend{display:inline-flex;align-items:center;padding:1px var(--space-2);border-radius:var(--radius-full);
                background:var(--warning-100);color:var(--warning-700);font:500 11px/16px var(--font);white-space:nowrap;}
@media(max-width:639.98px){
  /* No celular a trilha vira uma faixa que rola sozinha (como a .period-bar),
     com o passo atual trazido para a vista; a página não rola de lado. */
  /* contain: a largura da faixa não empurra a área de conteúdo (main em flex/grid). */
  .mh-trilha{overflow:hidden;contain:inline-size;}
  .mh-trilha-lista{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .mh-trilha-lista::-webkit-scrollbar{display:none;}
  .mh-trilha-passo{flex-shrink:0;}
}

/* ── 11. Barra de período no celular ──────────────────────────────────── */
/* Em vez de sumir, vira uma faixa de rolagem horizontal compacta: os
   chips não quebram linha e a página não ganha rolagem lateral. */
@media(max-width:639.98px){
  .period-bar{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
              max-width:100%;min-width:0;flex:1 1 100%;order:10;
              scrollbar-width:none;-webkit-overflow-scrolling:touch;
              padding-bottom:var(--space-1);}
  .period-bar::-webkit-scrollbar{display:none;}
  .period-btn{flex-shrink:0;}
}

/* ── 12. Alvos de toque (§1 — 40px no dedo) ───────────────────────────── */
/* Só em ponteiro grosso: no mouse a densidade de 28–32px continua. */
@media(pointer:coarse){
  .btn,.period-btn,.topbar-refresh,.dr-close,.view-tab,.segmentado-btn,
  .topbar a,.topbar button,.mh-toast-acao,.mh-toast-fechar{min-height:var(--control-lg);}
  .btn,.period-btn,.topbar-refresh,.dr-close,
  .topbar a,.topbar button,.mh-toast-fechar{min-width:var(--control-lg);}
  .mh-campo-input{min-height:var(--control-lg);}
  .mh-trilha-link{min-height:var(--control-lg);}
}

/* Alvos de toque por COMPONENTE (revisão de UX de 16/10/2026: Home, Tarefas,
   Calendário, Envios, Banco de imagens, Mapa de captação e Campanhas por LP
   tinham botões de 7 a 30px no celular). O prefixo `:root` vence a cópia
   local da página, que é carregada depois deste arquivo com a mesma
   especificidade. Só `min-*` (e padding em link): no mouse nada muda.
   Componente novo com botão pequeno entra numa destas listas, não na tela. */
@media(pointer:coarse){
  /* Botão de ícone (×, +, ↻, setas) e todo botão "Fechar…/Remover…": 40×40.
     O seletor pelo nome acessível pega gavetas, chips e linhas de todas as
     telas sem listar classe por classe. */
  :root :is(button[aria-label^="Fechar"],button[aria-label^="Remover"],button[aria-label^="Tirar"],
    .dr-close,.icon-btn,.ed-drawer-close,.drawer-icon-btn,.widget-card-remove,.kanban-add-btn,.rte-btn,.refresh,
    .lpc-psi-refazer){
    min-width:var(--control-lg);min-height:var(--control-lg);
  }
  /* Botão de texto pequeno (filtro, aba, "+ Adicionar", período): 40 de altura. */
  :root :is(.toggle-btn,.link-btn,.subtab,.widgets-add-btn,.attach-add-btn,.today-btn,.btn-nova,
    .lpc-periodo-btn,.lpc-filtro-btn,.lpc-psi,.empty-col button,.list-empty-add,.shortcut,.abrir,.aba,
    .btn-cancel,.btn-save,.btn-comment,.pj-data-add-btn,.subtask-add-btn,.sb-skip,summary){
    min-height:var(--control-lg);
  }
  /* Link com cara de botão: sem isto o texto ficava no topo da caixa de 40. */
  :root :is(a.link-btn,a.toggle-btn,a.btn-nova){display:inline-flex;align-items:center;}
  :root .lpc-psi{align-items:center;}
  /* Campo de texto e seletor: 40 de altura (barra de filtros, filtro de coluna). */
  :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden]),select){
    min-height:var(--control-lg);
  }
  /* Caixa de seleção legível; o rótulo que a envolve é o alvo de 40. */
  :where(input[type=checkbox],input[type=radio]){min-width:20px;min-height:20px;}
  :where(label:has(> input[type=checkbox],> input[type=radio])){min-height:var(--control-lg);}
  /* Link de texto em tabela ou frase: a área de toque cresce na vertical sem
     empurrar a linha (padding em elemento inline não muda a altura da linha;
     no .lpc-lp-url, que é bloco com reticências, o padding vira altura). */
  :root :is(a.link,.empty a,.ed-drawer-link,.lpc-lp-url){padding-block:calc((var(--control-lg) - 1lh) / 2);}
}

/* §1.13 — anel de foco no "×" de fechar/remover das gavetas, modais e chips.
   A regra geral acima é :where() (especificidade zero) e uma cópia local
   como `.fechar:focus{outline:none}` a apagava — foi o que a revisão achou no
   "×" do construtor de formulários. Aqui o anel tem especificidade de
   classe+atributo e fica DENTRO do botão (offset negativo), para não ser
   cortado por painel com overflow:hidden. */
:is(button[aria-label^="Fechar"],button[aria-label^="Remover"],button[aria-label^="Tirar"],
  .dr-close,.mh-toast-fechar,.ed-drawer-close,.icon-btn):focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:-2px;
}
.mh-toast .mh-toast-fechar:focus-visible{outline-color:currentColor;}

/* Corte da HubSpot: texto que só vale com ela ligada (.com-hubspot) ou
   desligada (.sem-hubspot). access.js põe data-hubspot no <html>. */
.sem-hubspot { display: none; }
html[data-hubspot="desligada"] .com-hubspot { display: none; }
html[data-hubspot="desligada"] .sem-hubspot { display: inline; }

/* ── Tema escuro ─────────────────────────────────────────────────────────
   A barra de ação em massa é escura de propósito (§9.19): no escuro o
   --surface-inverse clareia, e os botões em branco translúcido por cima
   sumiriam. Fica num cinza elevado, com o texto branco de sempre. */
:root[data-theme="dark"] .bulkbar{background:var(--neutral-300);color:var(--neutral-0);}
:root[data-theme="dark"] .bulkbar select,:root[data-theme="dark"] .bulkbar .bbtn{color:var(--neutral-0);}
/* Botão neutro: no escuro o --neutral-900 do hover clareia demais e some o
   texto branco; fica um cinza elevado (era cópia local do certificados). */
:root[data-theme="dark"] .btn.neutral:hover{background:var(--neutral-400);border-color:var(--neutral-400);}

/* Corpo de nota formatado por MH.notaHtml (reunião do MeetRox gravada pelo
   hub): o texto segue em pre-wrap; só título, seções e rótulos ganham peso. */
.nota-corpo .nota-titulo{font-weight:700;color:var(--fg1);}
.nota-corpo .nota-secao{font-weight:700;color:var(--fg1);}
.nota-corpo .nota-rotulo{font-weight:600;color:var(--fg1);}
.nota-corpo .nota-sub{color:var(--fg2);}
.nota-corpo a{color:var(--brand);text-decoration:none;overflow-wrap:anywhere;}
.nota-corpo a:hover{text-decoration:underline;}

/* ── 13. Componentes de tela (DESIGN_SYSTEM.md §9.22–9.28) ──────────── */
/* Revisão de UX de 16/10/2026: 44 páginas redefiniam o próprio botão, 29 o
   próprio painel e o período tinha três aparências. Estes são os oficiais,
   definidos a partir do padrão mais usado. A tela migrada não copia nenhum
   deles no <style> dela (tests/test_ux_design_system.py, com a lista das
   que ainda faltam — catraca). Só tokens. */

/* Variáveis de aplicação que as telas recriavam (mapa de 17/10/2026, B11).
   --surface-escura: painel escuro de destaque nos dois temas (no claro o
   preto; no escuro, que já é preto, o painel clareia um pouco a cor do
   menu para se destacar dos cards) — era --pp-painel do propostas.
   --linkedin: o azul da marca LinkedIn nas telas que medem o LinkedIn
   (a marca da tela é a fonte, não o Distrito); sai do azul do DS e
   acompanha o tema — era --li do linkedin. Só se derivam de tokens. */
:root{--surface-escura:var(--neutral-1000);--linkedin:var(--info-600);}
:root[data-theme="dark"]{--surface-escura:color-mix(in srgb,var(--nav-text-active) 10%,var(--surface-nav));}

/* §9.22 cabeçalho de página. A .topbar (sidebar.js) leva título,
   separador, subtítulo e, à direita, o grupo de ações. Tela com título no
   conteúdo usa .page-head (H1 de 24 px). */
.topbar-acoes{display:flex;align-items:center;gap:var(--space-3);margin-left:auto;min-width:0;}
.topbar-acoes .topbar-refresh{margin-left:0;}
/* No celular as ações descem para uma linha própria (a 1ª é menu + título
   + avatar, §7); a .period-bar dentro dela rola de lado (§11). */
@media(max-width:639.98px){
  .topbar > .topbar-acoes{margin-left:0;flex:1 1 100%;order:10;flex-wrap:wrap;}
}
/* Topbar cheia (abas + período + ações) quebra linha em vez de vazar.
   `.topbar.quebra-linha` vence o `.topbar{height}` que o sidebar.js injeta
   por último. Era cópia idêntica em mídia paga e social. */
.topbar.quebra-linha{flex-wrap:wrap;height:auto;min-height:var(--topbar-height);
                     row-gap:var(--space-2);padding-block:var(--space-3);}
.topbar.quebra-linha > *{min-width:0;}
/* "Ao vivo" só quando a fonte respondeu agora; sem fonte fica cinza. */
.topbar-live.is-off{color:var(--text-tertiary);}
.topbar-live.is-off::before{background:var(--neutral-400);animation:none;}
/* Dado de export manual (MH.pagina aoVivo + tela.aoVivo('importado')): âmbar, sem pulsar. */
.topbar-live.importado{color:var(--warning-700);}
.topbar-live.importado::before{background:var(--warning-600);animation:none;}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);
           flex-wrap:wrap;margin-bottom:var(--space-6);}
.page-head-texto{flex:1 1 320px;min-width:0;}
.page-title{font:700 24px/30px var(--font);letter-spacing:-.02em;color:var(--text-primary);}
/* selo ao lado do título (MH.pagina({selo}) — "Protótipo"): a pílula no centro do H1 */
.page-title-linha{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;min-width:0;}
.page-title-linha > .page-selo{flex-shrink:0;}
.page-sub{font:400 12px/16px var(--font);color:var(--text-tertiary);margin-top:var(--space-2);max-width:96ch;}
.page-acoes{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
/* ação do cabeçalho "ligada" (MH.pagina: {ligada} + tela.acao(id).ligada(true)):
   a tinta de seleção, a mesma do período selecionado (era .cp-editando). */
.page-acoes > .btn[aria-pressed="true"]{background:var(--surface-selected);border-color:var(--border-interactive);
                                       color:var(--text-brand);}

/* Shell de página (shell.js, MH.pagina — item 22 da auditoria de 17/10/2026).
   Três larguras só, no lugar das 19 que as telas inventavam: cheia (1720,
   a .page de sempre), média (1200: listas e painéis) e leitura (880: texto,
   formulário). Os controles do cabeçalho (segmentado, período, filtros)
   ocupam uma linha inteira abaixo do título; as abas fecham o cabeçalho e
   ficam coladas no conteúdo (a linha de baixo é o chão das abas). */
.page.media{max-width:1200px;}
.page.leitura{max-width:880px;}
.page-controles{flex:1 1 100%;display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;min-width:0;}
.page-abas{flex:1 1 100%;min-width:0;border-bottom:1px solid var(--border-subtle);}
.page-abas .view-tabs{max-width:100%;}
/* espaço entre a faixa de abas e o conteúdo: é do shell (16 px, o mesmo do
   cabeçalho sem abas) — a tela não soma margem própria (era .mv-abas-espaco) */
.page-head.com-abas{margin-bottom:var(--space-6);}
.view-tab-n{margin-left:var(--space-2);font:500 11px/16px var(--font);color:var(--text-tertiary);font-variant-numeric:tabular-nums;}
.view-tab.active .view-tab-n,.view-tab[aria-pressed="true"] .view-tab-n{color:var(--text-secondary);}
/* contador que pede atenção ("3 sem arquivo"): tela.abas.contador + classe aviso */
.view-tab-n.aviso,.view-tab.active .view-tab-n.aviso{color:var(--warning-700);font-weight:600;}
/* linha de controles sem nada visível (todos escondidos pela tela) não ocupa espaço */
.page-controles:not(:has(> :not([hidden]))){display:none;}
/* aviso de página (tela congelada — access.js): faixa âmbar no topo do conteúdo */
.page-aviso{margin:0 0 var(--space-6);padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);
            background:var(--warning-100);color:var(--warning-700);font:500 13px/18px var(--font);}
/* o que não vai para o papel (cabeçalho da tela ao imprimir um briefing) */
@media print{.sem-impressao{display:none!important;}}
/* frescor dentro da topbar: a faixa âmbar vira uma etiqueta compacta */
.topbar-acoes .mh-stale{margin:0;padding:var(--space-1) var(--space-4);font:500 12px/16px var(--font);}
/* Celular: as faixas rolam de lado com degradê na ponta (nunca somem, a
   página nunca rola na horizontal) e o "Atualizar" desce com as ações — o
   sidebar.js esconde `.topbar-refresh` solto, não o que está no grupo. */
@media(max-width:768px){
  .topbar > .topbar-acoes > .topbar-refresh{display:inline-flex!important;}
}
@media(max-width:639.98px){
  .page-controles > .period-bar,.page-controles > .chip-bar,.page-controles > .segmentado{
    flex:1 1 100%;display:flex;
    -webkit-mask-image:linear-gradient(to right,var(--neutral-1000) calc(100% - 24px),transparent);
    mask-image:linear-gradient(to right,var(--neutral-1000) calc(100% - 24px),transparent);}
}

/* §9.23 painel — superfície elevada com borda (sem sombra), cabeçalho com
   divisória e corpo com padding. Padrão de ~20 telas (captação, eventos,
   notícias, regras…). `.panel-title` é o nome do painel (heading-05);
   `.panel-overline` é o rótulo curto em caixa alta (até três palavras). */
.panel{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);min-width:0;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
            min-height:46px;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border-subtle);}
.panel-head-texto{flex:1 1 240px;min-width:0;}
.panel-title{font:700 14px/20px var(--font);color:var(--text-primary);}
.panel-overline{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);}
.panel-sub{font:400 12px/16px var(--font);color:var(--text-tertiary);margin-top:var(--space-1);}
.panel-acoes{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-left:auto;}
.panel-body{padding:var(--space-6);min-width:0;}
/* painel que recorta o conteúdo nas bordas arredondadas (tabela, imagem) */
.panel.recorta{overflow:hidden;}
/* tabela encostada nas bordas do painel */
.panel-body.flush{padding:0;}
/* espaço entre painéis empilhados: quem cuida é o contêiner (gap) ou
   .pilha, que dá o gap padrão de 24 px aos filhos. */
.pilha{display:flex;flex-direction:column;gap:var(--space-8);min-width:0;}
/* Painéis empilhados com o respiro padrão de 16 px (Mapa de captação, Histórico das LPs). */
.pilha.justa{gap:var(--space-4);}

/* §9.24 pílula de status — "em que ponto do fluxo está". Mesma forma da
   tag (retângulo de 4 px, par 100/700), nome semântico fixo; o estado vai
   escrito, nunca só na cor (regra 14). Rosa não entra em status. */
.pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-4);
      font:500 12px/16px var(--font);border-radius:var(--radius-sm);white-space:nowrap;
      background:var(--neutral-100);color:var(--neutral-700);}
.pill.neutro{background:var(--neutral-100);color:var(--neutral-700);}
.pill.ok{background:var(--success-100);color:var(--success-700);}
.pill.aviso{background:var(--warning-100);color:var(--warning-700);}
.pill.erro{background:var(--danger-100);color:var(--danger-700);}
.pill.info{background:var(--info-100);color:var(--info-700);}
/* Cor de categoria vinda de dado (grupo do time, origem): o elemento leva
   data-cor (token ou cor) e o utils.js (MH.cores) põe a variável --cor;
   a tinta é 10% da cor e o texto puxa para o texto primário (contraste
   nos dois temas). Sem --cor, fica a tag neutra. */
.tag.cor,.pill.cor{background:color-mix(in srgb,var(--cor,var(--neutral-500)) 10%,transparent);
                   color:color-mix(in srgb,var(--cor,var(--neutral-700)) 85%,var(--text-primary));}

/* §9.25 tabela de dados. `table.tabela` (o `.tabela` de /listas é uma
   lista em div e não casa). Cabeçalho overline em fundo rebaixado, número
   à direita e tabular (td.num/th.num, §8), hover em surface-hover, sem
   zebra. Linha especial por classe no <tr>; coluna `.col-opcional` some
   abaixo de 640 px. */
.tabela-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;}
table.tabela{width:100%;border-collapse:collapse;font:400 13px/18px var(--font);color:var(--text-body);}
.tabela th{padding:var(--space-4) var(--space-5);text-align:left;vertical-align:middle;white-space:nowrap;
           font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);
           background:var(--surface-sunken);border-bottom:1px solid var(--border-subtle);}
.tabela td{padding:var(--space-4) var(--space-5);vertical-align:middle;border-bottom:1px solid var(--border-subtle);}
.tabela tbody tr:last-child > td{border-bottom:none;}
.tabela tbody tr:hover > td{background:var(--surface-hover);}
.tabela th.ordenavel{cursor:pointer;user-select:none;}
.tabela th.ordenavel:hover,.tabela th.sorted,.tabela th[aria-sort="ascending"],
.tabela th[aria-sort="descending"]{color:var(--text-primary);}
.tabela tr.clicavel{cursor:pointer;}
.tabela tr.selecionada > td{background:var(--surface-selected);}
.tabela tr.destaque > td{font-weight:700;color:var(--text-primary);}
.tabela tr.total > td,.tabela tfoot td{background:var(--surface-sunken);font-weight:700;color:var(--text-primary);}
.tabela tr.sub > td{background:var(--surface-sunken);color:var(--text-secondary);}
.tabela tr.sub > td:first-child{padding-left:var(--space-8);}
.tabela tr.secao > td{background:var(--surface-sunken);font:500 11px/14px var(--font);letter-spacing:.08em;
                      text-transform:uppercase;color:var(--text-tertiary);}
.tabela tr.aviso > td{background:var(--warning-100);}
.tabela tr.perigo > td{background:var(--danger-100);}
.tabela td.fraco{color:var(--text-tertiary);}
.tabela td.forte{font-weight:700;color:var(--text-primary);}
/* célula com várias linhas (cabeçalho rico, lista na célula): alinha no topo */
.tabela.alinha-topo th,.tabela.alinha-topo td{vertical-align:top;}
/* densa: monitoramento, heatmap */
.tabela.compacta{font-size:12px;line-height:16px;}
.tabela.compacta th,.tabela.compacta td{padding:var(--space-2) var(--space-3);}
/* §5 — primeira coluna fixa na rolagem horizontal
   (só a 1ª linha do cabeçalho: na 2ª, com rowspan, o 1º <th> já é outra
   coluna e grudaria por cima da etapa — o caso do funil por origem). */
.tabela.fixa-primeira thead tr:first-child > th:first-child,
.tabela.fixa-primeira tbody > tr > :first-child{position:sticky;left:0;z-index:1;
          background:var(--surface-raised);box-shadow:1px 0 0 var(--border-subtle);}
.tabela.fixa-primeira thead tr:first-child > th:first-child{background:var(--surface-sunken);z-index:2;}
.tabela.fixa-primeira tr.sub > td:first-child,.tabela.fixa-primeira tr.secao > td:first-child{background:var(--surface-sunken);}
.tabela.cabecalho-fixo thead th{position:sticky;top:0;z-index:2;}
.tabela.cabecalho-fixo thead th:first-child{z-index:3;}
@media(max-width:639.98px){.tabela .col-opcional{display:none;}}
/* Tabela que vira cartão no celular (≤ 760 px): cada linha é um bloco e
   cada célula uma linha com o rótulo da coluna (td[data-rotulo]) por cima;
   `.rotulo-na-linha` põe "Rótulo: valor" na mesma linha. O cabeçalho some.
   Era cópia em novas_vendas, lps-historico, eventos_pos_evento e
   parceria_notion, com dois breakpoints e três paddings. */
@media(max-width:760px){
  table.tabela.vira-cartao,.tabela.vira-cartao > tbody{display:block;width:100%;min-width:0;}
  .tabela.vira-cartao > thead{display:none;}
  .tabela.vira-cartao > tbody > tr{display:block;width:100%;padding:var(--space-5);border-bottom:1px solid var(--border-subtle);}
  .tabela.vira-cartao > tbody > tr > td{display:block;width:100%;padding:var(--space-1) 0;border:0;white-space:normal;text-align:left;}
  .tabela.vira-cartao > tbody > tr > td.num{text-align:left!important;}
  .tabela.vira-cartao td[data-rotulo]::before{content:attr(data-rotulo);display:block;font:500 11px/14px var(--font);
                letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--space-1);}
  .tabela.vira-cartao.rotulo-na-linha td[data-rotulo]::before{content:attr(data-rotulo) ": ";display:inline;
                font:inherit;letter-spacing:normal;text-transform:none;margin:0;}
}

/* Barra de progresso (proporção, preenchimento, ranking): trilho rebaixado
   e preenchimento na cor de gráfico, sem raio (é barra de gráfico). A
   largura vem de data-pct no filho, aplicada pelo utils.js (MH.barras),
   nunca de style="" no HTML. Estado no trilho ou no filho: ok/aviso/erro.
   Altura: .fina 4 px, padrão 6 px, .grossa 8 px; .sem-trilho só a barra.
   Não é `.barra`: esse nome já é barra de ferramentas em três telas. */
.barra-progresso{display:block;position:relative;height:6px;min-width:0;background:var(--surface-sunken);overflow:hidden;}
.barra-progresso.fina{height:4px;}
.barra-progresso.grossa{height:8px;}
.barra-progresso.sem-trilho{background:transparent;}
.barra-progresso > [data-pct]{display:block;width:0;height:100%;background:var(--chart-01);
                              transition:width var(--duration-slow) var(--ease-productive);}
.barra-progresso.ok > [data-pct],.barra-progresso > [data-pct].ok{background:var(--success-600);}
.barra-progresso.aviso > [data-pct],.barra-progresso > [data-pct].aviso{background:var(--warning-600);}
.barra-progresso.erro > [data-pct],.barra-progresso > [data-pct].erro{background:var(--danger-600);}

/* §9.26 abas. Seções/visões ligadas a um painel: .view-tabs/.view-tab/
   .view-tab-panel (§6 acima). Alternar a forma de ver os mesmos dados numa
   barra compacta (métrica do gráfico, sub-telas de Social, canal): o
   segmentado (§9.3) — trilho neutro, opção ativa em superfície elevada. */
.segmentado{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);
            background:var(--neutral-100);border-radius:var(--radius-full);max-width:100%;min-width:0;}
.segmentado-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
                height:24px;padding:0 var(--space-5);border:none;border-radius:var(--radius-full);
                background:transparent;color:var(--text-secondary);font:500 12px/16px var(--font);
                cursor:pointer;white-space:nowrap;text-decoration:none;flex-shrink:0;
                transition:background var(--duration-instant) var(--ease-productive);}
.segmentado-btn:hover{color:var(--text-primary);}
.segmentado-btn.active,.segmentado-btn[aria-pressed="true"],.segmentado-btn[aria-selected="true"]{
                background:var(--surface-raised);color:var(--text-primary);box-shadow:var(--elevation-1);}
.segmentado-btn svg{width:var(--icon-xs);height:var(--icon-xs);}
.segmentado-sep{align-self:stretch;width:1px;margin:var(--space-2);background:var(--border-strong);flex-shrink:0;}
.segmentado-grupo{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
                  color:var(--text-tertiary);padding:0 var(--space-2);flex-shrink:0;}
@media(max-width:639.98px){
  .segmentado{overflow-x:auto;scrollbar-width:none;}
  .segmentado::-webkit-scrollbar{display:none;}
  .segmentado-grupo{display:none;}
}

/* §9.27 barra de período — seletor único: botões .period-btn (§3 acima),
   intervalo personalizado (.period-custom; o JS mostra com display:flex) e
   o <select> compacto (.period-select), que assume quando a topbar aperta
   (.period-bar.recolhe, abaixo de 1500 px). Período é só período: canal e
   métrica são filtro (.chip) ou segmentado. */
.period-rotulo{font:400 12px/16px var(--font);color:var(--text-tertiary);margin-right:var(--space-1);flex-shrink:0;}
.period-btn.icone{display:inline-flex;align-items:center;justify-content:center;
                  width:var(--control-sm);min-width:var(--control-sm);padding:0;}
.period-select{display:none;height:var(--control-sm);padding:0 var(--space-4);font:500 12px var(--font);
               border:1px solid var(--border-strong);border-radius:var(--radius-md);
               background:var(--surface-raised);color:var(--text-secondary);}
.period-custom{display:none;align-items:center;gap:var(--space-3);}
.period-custom input[type=date]{height:var(--control-sm);padding:0 var(--space-4);font:400 12px var(--font);
               border:1px solid var(--border-strong);border-radius:var(--radius-md);
               background:var(--surface-raised);color:var(--text-primary);}
.period-custom-sep{font-size:12px;color:var(--text-tertiary);}
/* MH.periodo({quebra: true}): muitos botões longos ("Últimos 30 dias")
   quebram linha em vez de rolar de lado (era .lpc-periodo). */
.period-bar.quebra{flex-wrap:wrap;}
@media(max-width:1500px){
  .period-bar.recolhe .period-btn{display:none;}
  .period-bar.recolhe .period-select{display:inline-block;}
}
/* barra de chips de filtro (canal, origem, etapa) — rola de lado no celular */
.chip-bar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;min-width:0;}
@media(max-width:639.98px){
  .chip-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;}
  .chip-bar::-webkit-scrollbar{display:none;}
  .chip-bar > *{flex-shrink:0;}
}

/* §9.28 lista + detalhe — a lista ocupa o espaço; o detalhe abre ao lado
   (≥ 900 px) ou embaixo. */
.lista-detalhe{display:block;}
.lista-detalhe.com-detalhe{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);
                           gap:var(--space-6);align-items:start;}
.lista-detalhe-painel{display:none;}
.lista-detalhe.com-detalhe .lista-detalhe-painel{display:block;}
@media(max-width:900px){
  .lista-detalhe.com-detalhe{display:block;}
  .lista-detalhe.com-detalhe .lista-detalhe-painel{margin-top:var(--space-6);}
}

/* Barra fixa abaixo da topbar (assistente, módulos): gruda embaixo da
   topbar ao rolar, no lugar do cabeçalho da página enquanto o fluxo está
   aberto. No celular a topbar cresce, então a barra volta ao fluxo normal.
   Era a .modbar do certificados. */
.barra-fixa{position:sticky;top:var(--topbar-height,56px);z-index:80;background:var(--surface-page);
            border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-2);}
@media(max-width:768px){.barra-fixa{position:static;}}

/* Fonte externa fora do ar: mensagem humana + caminhos alternativos, no
   lugar dos KPIs zerados (era cópia em mídia paga e social). */
.fonte-off{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-raised);
           padding:var(--space-7);margin-bottom:var(--space-6);}
.fonte-off h2{font:700 16px/24px var(--font);color:var(--text-primary);margin:0 0 var(--space-2);}
.fonte-off p{font-size:14px;color:var(--text-secondary);margin:0 0 var(--space-5);}
.fonte-off .acoes{display:flex;flex-wrap:wrap;gap:var(--space-4);}

/* MH.combo — lista com busca por cima do <select> (que fica escondido e
   continua sendo a fonte do valor). O gatilho herda as classes do select,
   então o estilo da página (altura, borda, largura) vence este, que vem
   antes. A lista vai no <body> (position:fixed) para não ser cortada por
   modal/gaveta com overflow. No celular abre como gaveta de baixo. */
.mh-combo-nativo{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;
                 padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
                 opacity:0!important;pointer-events:none!important;white-space:nowrap!important;}
.mh-combo-gatilho{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);max-width:100%;min-width:0;
                  vertical-align:middle;min-height:var(--control-md);padding:var(--space-1) var(--space-4);
                  border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-raised);
                  color:var(--text-primary);font:500 13px/18px var(--font);text-align:left;cursor:pointer;}
/* a seta e o × ficam à direita: esse respiro vence o padding da página */
.mh-combo-gatilho.mh-combo-gatilho{padding-right:var(--space-10);}
.mh-combo-gatilho.mh-combo--limpar{padding-right:calc(var(--space-10) + 22px);}
.mh-combo-gatilho.mh-combo--cheio{display:flex;width:100%;}
.mh-combo-gatilho::after{content:"";position:absolute;right:var(--space-5);top:50%;width:7px;height:7px;margin-top:-5px;
                         border-right:1.5px solid var(--text-tertiary);border-bottom:1.5px solid var(--text-tertiary);
                         transform:rotate(45deg);pointer-events:none;}
.mh-combo-gatilho:hover{border-color:var(--text-tertiary);}
.mh-combo-gatilho:focus-visible,.mh-combo-gatilho.mh-combo--aberto{outline:none;border-color:var(--border-interactive);
                  box-shadow:var(--focus-halo);}
.mh-combo-gatilho:disabled{cursor:not-allowed;color:var(--text-disabled);background:var(--surface-sunken);}
.mh-combo-valor{display:flex;align-items:center;gap:var(--space-2);min-width:0;overflow:hidden;
                white-space:nowrap;text-overflow:ellipsis;}
.mh-combo-vazio{color:var(--text-placeholder);font-weight:400;overflow:hidden;text-overflow:ellipsis;}
.mh-combo-etiqueta{flex:none;max-width:12em;overflow:hidden;text-overflow:ellipsis;padding:2px var(--space-3);
                   border-radius:var(--radius-full);background:var(--surface-selected);color:var(--text-brand);
                   font:700 12px/16px var(--font);}
.mh-combo-etiqueta--mais{background:var(--surface-sunken);color:var(--text-secondary);}
.mh-combo-limpar{position:absolute;right:calc(var(--space-5) + 14px);top:50%;transform:translateY(-50%);
                 width:22px;height:22px;display:grid;place-items:center;border-radius:var(--radius-sm);
                 color:var(--text-tertiary);font:500 16px/1 var(--font);}
.mh-combo-limpar:hover{background:var(--surface-hover);color:var(--text-primary);}
.mh-combo-pop{position:fixed;z-index:1150;display:flex;flex-direction:column;overflow:hidden;
              background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-lg);
              box-shadow:var(--elevation-3);}
.mh-combo-busca{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);}
/* dupla classe: vence o `input:focus` / `input{}` genérico das páginas */
.mh-combo-campo.mh-combo-campo,.mh-combo-campo.mh-combo-campo:focus{width:100%;height:auto;min-height:0;margin:0;
                border:0;border-radius:0;background:none;outline:none;box-shadow:none;color:var(--text-primary);
                font:500 14px/20px var(--font);padding:var(--space-1) 0;}
.mh-combo-campo::placeholder{color:var(--text-placeholder);font-weight:400;}
.mh-combo-lista{list-style:none;margin:0;padding:var(--space-2);overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;}
.mh-combo-grupo{padding:var(--space-4) var(--space-3) var(--space-2);color:var(--text-tertiary);
                font:700 11px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;}
.mh-combo-opcao{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);
                color:var(--text-primary);font:400 13px/18px var(--font);cursor:pointer;}
.mh-combo-opcao--ativa{background:var(--surface-hover);box-shadow:inset 2px 0 0 var(--border-interactive);}
.mh-combo-opcao[aria-selected="true"]{color:var(--text-brand);font-weight:700;}
.mh-combo-opcao--desligada{color:var(--text-disabled);cursor:not-allowed;}
.mh-combo-marca{flex:none;width:14px;height:14px;border-radius:var(--radius-sm);}
.mh-combo-opcao[aria-selected="true"] .mh-combo-marca::before{content:"";display:block;width:4px;height:8px;margin:1px 0 0 5px;
                border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);}
.mh-combo-lista[aria-multiselectable="true"] .mh-combo-marca{border:1.5px solid var(--border-strong);}
.mh-combo-lista[aria-multiselectable="true"] .mh-combo-opcao[aria-selected="true"] .mh-combo-marca{background:var(--border-interactive);
                border-color:var(--border-interactive);color:var(--surface-raised);}
.mh-combo-lista[aria-multiselectable="true"] .mh-combo-opcao[aria-selected="true"] .mh-combo-marca::before{margin:0 0 0 4px;}
.mh-combo-texto{display:flex;flex-direction:column;min-width:0;flex:1;}
.mh-combo-principal,.mh-combo-sub{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.mh-combo-sub{color:var(--text-tertiary);font:400 12px/16px var(--font);}
.mh-combo-grupo-tag{flex:none;color:var(--text-tertiary);font:400 11px/16px var(--font);}
.mh-combo-opcao mark{background:var(--brand-100);color:inherit;border-radius:2px;}
.mh-combo-aviso{padding:var(--space-6) var(--space-4);text-align:center;color:var(--text-secondary);font:400 13px/18px var(--font);}
.mh-combo-spinner{display:inline-block;width:14px;height:14px;margin-right:var(--space-3);vertical-align:-2px;}
.mh-combo-rodape{padding:var(--space-2) var(--space-4);border-top:1px solid var(--border-subtle);
                 color:var(--text-tertiary);font:400 12px/16px var(--font);font-variant-numeric:tabular-nums;}
.mh-combo-rodape:empty{display:none;}
.mh-combo-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
               padding:var(--space-5) var(--space-6) var(--space-2);color:var(--text-primary);font:700 15px/20px var(--font);}
.mh-combo-pronto{border:0;background:none;color:var(--text-brand);font:700 14px/20px var(--font);cursor:pointer;
                 min-height:var(--control-lg);padding:0 var(--space-3);}
.mh-combo-veu{position:fixed;inset:0;z-index:1140;background:var(--overlay);}
.mh-combo-pop--gaveta{left:0;right:0;bottom:0;top:auto;max-height:75vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;
                      padding-bottom:env(safe-area-inset-bottom,0px);}
.mh-combo-pop--gaveta .mh-combo-opcao{min-height:var(--control-lg);font-size:15px;}
.mh-combo-pop--gaveta .mh-combo-campo.mh-combo-campo{font-size:16px;}

/* MH.copiar: textarea do caminho antigo de cópia, fora da tela. */
.mh-copiar-oculto{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;}
/* data-moeda / data-numero: aviso sob o campo quando o texto não vira número. */
.mh-campo-numero-erro{display:block;margin-top:var(--space-1);color:var(--danger-600);font:400 12px/16px var(--font);}
input[data-moeda],input[data-numero]{font-variant-numeric:tabular-nums;}
input[data-moeda][aria-invalid="true"],input[data-numero][aria-invalid="true"]{border-color:var(--danger-600);}
/* Texto que pode não caber: uma linha com reticências. O texto inteiro
   aparece ao passar o mouse ou focar (utils.js põe o title sozinho em todo
   corte com reticências, não só nesta classe). */
.trunca{display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/* MH.tabela (<table data-tabela>): cabeçalho que ordena é um botão de
   verdade; a seta diz a ordem atual (aria-sort no th). */
.mh-tabela-ordem{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--space-1);
                 cursor:pointer;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;
                 border-radius:var(--radius-sm);max-width:100%;}
.mh-tabela-ordem::after{content:"";width:10px;flex:none;text-align:center;color:var(--text-tertiary);font-size:11px;line-height:1;}
.mh-tabela-ordem:hover::after{content:"\2195";}
th[aria-sort="ascending"] > .mh-tabela-ordem::after{content:"\2191";color:var(--text-brand);}
th[aria-sort="descending"] > .mh-tabela-ordem::after{content:"\2193";color:var(--text-brand);}
th[aria-sort="ascending"],th[aria-sort="descending"]{color:var(--text-primary);}
.mh-tabela-ordem:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
.mh-tabela-contagem{color:var(--text-tertiary);font:400 12px/16px var(--font);font-variant-numeric:tabular-nums;}
/* Barra acima de uma tabela padrão: busca, contagem e exportar. */
.mh-tabela-ferramentas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin:var(--space-4) 0;}
.mh-tabela-ferramentas input[type="search"]{flex:1 1 220px;max-width:360px;min-width:0;height:var(--control-md);
     padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-md);
     background:var(--surface-raised);color:var(--text-primary);font:400 13px/18px var(--font);}
.mh-tabela-ferramentas input[type="search"]::placeholder{color:var(--text-placeholder);}
.mh-tabela-ferramentas input[type="search"]:focus-visible{outline:none;border-color:var(--border-interactive);box-shadow:var(--focus-halo);}
.mh-tabela-ferramentas .btn{margin-left:auto;}

/* MH.periodo: o personalizado (duas datas + Aplicar) logo depois da barra. */
.mh-periodo-custom{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:var(--space-3);flex-wrap:wrap;}
.mh-periodo-custom[hidden]{display:none;}
.mh-periodo-custom input[type="date"]{height:var(--control-sm);padding:0 var(--space-3);border:1px solid var(--border-strong);
     border-radius:var(--radius-md);background:var(--surface-raised);color:var(--text-primary);font:400 12px/16px var(--font);}
.mh-periodo-sep{color:var(--text-tertiary);font:400 12px/16px var(--font);}