/* =========================================================
   VAZK HUB — CHROME
   ---------------------------------------------------------
   A casca comum dos cinco painéis: cabeçalho, botões que
   levam de um módulo a outro e barra de seções.

   A regra da casa: a interface continua azul, branca e preta.
   A cor entra só no ícone — e não é enfeite, é endereço. Cada
   botão do cabeçalho pinta a pastilha do ícone com a cor do módulo
   para onde ele leva, então o Financeiro é sempre o mesmo verde
   esteja você no Metas, no CRM ou no Marketing. Fundo do botão,
   borda e rótulo seguem brancos/navy como antes.

   Carregado depois do ios-layer.css e do liquid-glass.css nos
   cinco arquivos: é ordem de documento que faz estas regras
   vencerem os empates de especificidade com o <style> local.
   ========================================================= */

/* ---------------------------------------------------------
   0. Tokens da casca (contrato da Onda 2)
   ---------------------------------------------------------
   Declarados uma vez aqui, e é por isso que valem: esta folha
   carrega depois do <style> de cada painel, e `:root` /
   `[data-theme="dark"]` empatam em especificidade com os de lá.

   Texto semântico (*-text) é o que vai em `color:` — passa AA
   4.5:1 sobre as superfícies. Os tons de sempre (#10B981,
   #F59E0B, #EF4444) ficam só em preenchimento (*-fill): barra,
   ponto, borda, fundo. Verde #10B981 como texto sobre branco
   dava 2,5:1. O *-soft é o fundo da pílula, com o *-text por
   cima.
   --------------------------------------------------------- */
:root {
    --ok-text: #047857;
    --warn-text: #B45309;
    --bad-text: #B91C1C;
    --info-text: #1D4ED8;
    --royal-text: #1D4ED8;

    --ok-fill: #10B981;
    --warn-fill: #F59E0B;
    --bad-fill: #EF4444;
    --info-fill: #2563EB;
    --royal-fill: #2563EB;

    --ok-soft: rgba(16, 185, 129, .12);
    --warn-soft: rgba(245, 158, 11, .14);
    --bad-soft: rgba(239, 68, 68, .12);
    --info-soft: rgba(37, 99, 235, .10);

    /* Estrutura. --line opaco: o rgba(226,232,240,.65) dos painéis
       sumia sobre branco. --borda-controle chega a 3:1 em volta de
       campo e select. */
    --line: #E2E8F0;
    --borda-controle: #8492A6;
    --foco: #2563EB;
    --rotulo-min: 11px;
}

[data-theme="dark"] {
    --ok-text: #34D399;
    --warn-text: #FBBF24;
    --bad-text: #F87171;
    --info-text: #93C5FD;
    --royal-text: #60A5FA;

    --ok-fill: #10B981;
    --warn-fill: #F59E0B;
    --bad-fill: #EF4444;
    --info-fill: #3B82F6;
    --royal-fill: #2563EB;

    --ok-soft: rgba(52, 211, 153, .14);
    --warn-soft: rgba(251, 191, 36, .14);
    --bad-soft: rgba(248, 113, 113, .14);
    --info-soft: rgba(147, 197, 253, .14);

    --line: #243049;
    --borda-controle: #51607A;
    --foco: #60A5FA;
    --rotulo-min: 11px;
}

/* ---------------------------------------------------------
   Escala de camadas (z-index)
   ---------------------------------------------------------
   Uma ordem só para os cinco painéis. Quem abre algo novo
   escolhe um degrau daqui, não um número solto:

     50    cabeçalho grudado (ios-layer.css)
     110   fundo da gaveta Opções (.ios-menu-fundo)
     120   gaveta Opções (.ios-menu)
     140   modais (.tar-back, modais do chip do auth.js)
     150   pergunta da casca (VazkIOS.confirmar / pedirTexto), que
           pode nascer de dentro de um modal
     1100  aviso (#vazkAviso), acima de tudo, inclusive modal
     10000 link "Ir para o conteúdo" (.hub-pular), só com foco

   Modal que abre pela gaveta precisa ficar ACIMA dela: foi o
   modal do chip nascendo atrás da gaveta que pediu esta escala.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Foco
   ---------------------------------------------------------
   Um anel só, para tudo que recebe teclado, inclusive <div>
   com tabindex ou role. O :is() pesa pelo argumento mais
   específico ([tabindex]:not(...) = 0,2,0), então a regra fica
   em (0,3,0) e vence os `input:focus { outline: none }` locais
   sem !important. O anel da gaveta (seção 3) empata no peso e
   vem depois, para trocar só a cor.
   --------------------------------------------------------- */
:is(button, a, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role=button], [role=tab]):focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   1. As cores de identidade
   ---------------------------------------------------------
   Uma paleta só, igual no claro e no escuro. Não é economia de
   linha: o Chrome não reavalia um var() dentro de <svg> quando a
   variável muda, então um par claro/escuro ficaria com a cor
   antiga em quem trocasse de tema sem recarregar a página. Um
   valor por módulo também é o que sustenta a promessa daqui de
   cima — o Financeiro é *o mesmo* verde em todo lugar.

   Por isso os tons são de meio caminho: escuros o bastante para
   aparecer sobre o vidro branco, claros o bastante para aparecer
   sobre o vidro escuro. Os dois controles de exibição (Modo TV e
   tema) ficam em tinta neutra de propósito — são ajuste de tela,
   não destino, e uma barra com onze cores viraria vitrine.

   Dois ícones da mesma família (o verde-água do Exportar e o da
   Mídia) nunca aparecem na mesma barra — a lista de botões muda
   de painel para painel.
   --------------------------------------------------------- */
:root {
    /* Módulos */
    --hub-metas: #3B82F6;
    --hub-marketing: #EA580C;
    --hub-financeiro: #059669;
    --hub-tarefas: #8B5CF6;
    --hub-crm: #0891B2;
    --hub-katia: #D946EF;
    --hub-midia: #0D9488;

    /* Ações de documento */
    --hub-pdf: #EF4444;
    --hub-export: #0D9488;
    --hub-import: #6366F1;

    /* Ajuste de exibição, e o âmbar de "cuidado" do chip do usuário */
    --hub-ink: #64748B;
    --hub-amber: #D97706;
}

/* ---------------------------------------------------------
   2. Quem é cada botão
   ---------------------------------------------------------
   O data-hub-mod fica no botão e só define uma variável; quem
   pinta é a regra do ícone, mais abaixo. Assim um botão novo
   entra no sistema com um atributo e nada mais.
   --------------------------------------------------------- */
[data-hub-mod="metas"] {
    --hub-tint: var(--hub-metas);
}

[data-hub-mod="marketing"] {
    --hub-tint: var(--hub-marketing);
}

[data-hub-mod="financeiro"] {
    --hub-tint: var(--hub-financeiro);
}

[data-hub-mod="tarefas"] {
    --hub-tint: var(--hub-tarefas);
}

[data-hub-mod="crm"] {
    --hub-tint: var(--hub-crm);
}

[data-hub-mod="katia"] {
    --hub-tint: var(--hub-katia);
}

[data-hub-mod="midia"] {
    --hub-tint: var(--hub-midia);
}

[data-hub-mod="pdf"] {
    --hub-tint: var(--hub-pdf);
}

[data-hub-mod="export"] {
    --hub-tint: var(--hub-export);
}

[data-hub-mod="import"] {
    --hub-tint: var(--hub-import);
}

[data-hub-mod="periodos"] {
    --hub-tint: var(--hub-metas);
}

[data-hub-mod="tv"] {
    --hub-tint: var(--hub-ink);
}

[data-hub-mod="tema"] {
    --hub-tint: var(--hub-ink);
}

/* O selo de sincronização do Marketing não é destino: já tinha
   cor própria — verde ligado, cinza salvando só no navegador — e
   ela continua mandando. Aqui a pastilha só acompanha. */
.header-actions .cloud-tag[data-on="1"]>.ui-icon {
    --hub-tint: var(--hub-financeiro);
}

.header-actions .cloud-tag[data-on="0"]>.ui-icon {
    --hub-tint: var(--hub-ink);
}

/* ---------------------------------------------------------
   3. O ícone e a pastilha
   ---------------------------------------------------------
   Desde 24/09/2026 a pastilha é SÓLIDA, como os ícones dos
   Ajustes do iPhone: o quadrado leva a cor do destino e o
   desenho fica branco. Antes era o contrário — desenho colorido
   sobre a cor a 16% — e o Fabricio escolheu a sólida entre
   quatro variações (preenchido, duotone, sólida, suave).

   A cor agora mora no `background` do próprio <svg>, fora do
   conteúdo do desenho. O `fill` branco é valor literal. O rótulo
   do botão continua navy porque a regra nem encosta nele. Botão
   sem data-hub-mod (a Agenda tem três) pega a cor do mapa da
   seção 7 em vez de cair no cinza.

   O box-sizing: content-box mantém o desenho em 16px e joga o
   respiro para fora: a pastilha fica 24×24 e o botão cresce
   três pixels, compensados no padding logo abaixo.
   --------------------------------------------------------- */
.header-actions .btn-outline-sm>.ui-icon use {
    stroke: #fff;
    fill: #fff;
}

.header-actions .btn-outline-sm>.ui-icon {
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    padding: 4px;
    margin-inline-start: -2px;
    border-radius: 7px;
    stroke: #fff;
    fill: #fff;
    background: var(--hub-tint, var(--hub-ic, var(--hub-ink)));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--hub-tint, var(--hub-ic, var(--hub-ink))) 45%, transparent);
    transition:
        filter var(--motion-fast, 180ms) ease,
        transform var(--motion-fast, 180ms) var(--ease-fluid, ease);
}

.header-actions .btn-outline-sm {
    padding-inline: 12px;
    gap: 8px;
}

/* No hover o botão empresta a cor do próprio destino para a
   borda e para a sombra — em alfa baixo, para o cabeçalho não
   virar vitrine. Vence o `border-color` azul fixo do <style>
   de cada painel por ter uma classe a mais. A pastilha só clareia
   um pouco: `filter` não lê variável, então acende igual em
   qualquer tema sem recarregar. */
.header-actions .btn-outline-sm:hover>.ui-icon {
    filter: brightness(1.08) saturate(1.08);
}

/* Botão com destino fora do .header-actions — a KatIA, que o
   ios-layer.js tira da gaveta e põe ao lado de "Opções" — também
   leva a cor do destino. Sem isto ela caía no cinza do mapa,
   porque o desenho dela é um <path> solto, sem <use> para o mapa
   ler. (0,3,0) vence o mapa, que pesa (0,2,1). */
[data-hub-mod]>.ui-icon.ui-icon {
    --hub-ic: var(--hub-tint, var(--hub-ink));
}

/* No Metas o botão da KatIA vira azul cheio no hover; sobre azul
   a pastilha rosa brigaria com o fundo, então vira vidro branco.
   Só no Metas: nos outros painéis o botão continua branco no
   hover, e vidro branco sobre branco apagaria o desenho. */
body[data-hub="metas"] .btn-katia-trigger:hover>.ui-icon.ui-icon use {
    stroke: #fff;
    fill: #fff;
}

body[data-hub="metas"] .btn-katia-trigger:hover>.ui-icon.ui-icon {
    stroke: #fff;
    fill: #fff;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.header-actions .btn-outline-sm:hover {
    border-color: color-mix(in srgb, var(--hub-tint, var(--hub-metas)) 46%, transparent);
    box-shadow:
        0 6px 18px -8px color-mix(in srgb, var(--hub-tint, var(--hub-metas)) 40%, transparent);
}

[data-theme="dark"] .header-actions .btn-outline-sm:hover {
    box-shadow:
        0 6px 18px -8px color-mix(in srgb, var(--hub-tint, var(--hub-metas)) 34%, transparent);
}

/* Teclado: o anel de foco também sai na cor do destino, então
   quem navega por Tab lê a mesma pista de cor que o mouse. Cor
   cheia e 3px: o color-mix a 72% ficava abaixo de 3:1 sobre o
   botão branco. Sem --hub-tint, cai no --foco da casca. Empata
   em (0,3,0) com o anel global e vence por vir depois. */
.header-actions .btn-outline-sm:focus-visible {
    outline: 3px solid var(--hub-tint, var(--foco));
    outline-offset: 2px;
}

/* No menu do iOS os botões viram lista de largura cheia — é
   exatamente a lista dos Ajustes do iPhone, e ali a pastilha
   é o único marcador da linha: cresce um degrau. */
.ios-menu .header-actions .btn-outline-sm>.ui-icon {
    margin-inline-start: 0;
    padding: 5px;
    border-radius: 8px;
}

/* ---------------------------------------------------------
   4. A barra de seções
   ---------------------------------------------------------
   Aqui a cor não é destino, é assinatura: as abas de dentro de
   um módulo usam a cor dele, então dá para saber onde se está
   de relance. A aba ativa continua a pílula azul de sempre, e
   sobre azul o ícone volta a ser branco.
   --------------------------------------------------------- */
body[data-hub="metas"] {
    --hub-here: var(--hub-metas);
}

body[data-hub="marketing"] {
    --hub-here: var(--hub-marketing);
}

body[data-hub="financeiro"] {
    --hub-here: var(--hub-financeiro);
}

body[data-hub="tarefas"] {
    --hub-here: var(--hub-tarefas);
}

body[data-hub="crm"] {
    --hub-here: var(--hub-crm);
}

/* Pastilha sólida também aqui (ver seção 3). O `.ui-icon`
   repetido no `nav` sobe o peso para (0,2,2) e vence o mapa da
   seção 7, que pesa (0,2,1) por causa do :has(). Na aba ativa a
   pílula já é azul cheio: a pastilha vira vidro branco, senão
   seria um quadrado colorido sobre outro. */
.tabs .tab>.ui-icon use,
nav>button>.ui-icon.ui-icon use {
    stroke: #fff;
    fill: #fff;
}

.tabs .tab>.ui-icon,
nav>button>.ui-icon.ui-icon {
    box-sizing: content-box;
    padding: 4px;
    border-radius: 7px;
    stroke: #fff;
    fill: #fff;
    background: var(--hub-here, var(--hub-metas));
    opacity: 1;
}

.tabs .tab.active>.ui-icon,
nav>button.on>.ui-icon.ui-icon {
    background: rgba(255, 255, 255, 0.22);
}

/* ---------------------------------------------------------
   5. O chip do usuário
   ---------------------------------------------------------
   As quatro ações ao lado do nome vinham todas em cinza e todas
   acendendo em vermelho no hover — o que fazia "trocar senha"
   parecer tão destrutivo quanto "sair". Agora só a saída é
   vermelha; senha, aparelhos e histórico acendem na cor do que
   fazem. O seletor repete a classe para vencer o CSS que o
   auth.js injeta em <head> depois deste arquivo, e a cor vai no
   `stroke` do desenho pelo mesmo motivo da seção 3. O foco de
   teclado acende igual ao hover: quem navega com Tab vê a mesma
   cor que quem aponta com o mouse. */
.vazk-user-chip .vazk-logout-btn.vazk-logout-btn:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--hub-metas) 14%, transparent);
}

.vazk-user-chip .vazk-logout-btn.vazk-logout-btn:is(:hover, :focus-visible) svg use,
.vazk-user-chip .vazk-logout-btn.vazk-logout-btn:is(:hover, :focus-visible) svg {
    stroke: var(--hub-metas);
    fill: var(--hub-metas);
}

.vazk-user-chip .vazk-logout-btn.vazk-logout-btn[data-vazk-senha]:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--hub-amber) 16%, transparent);
}

.vazk-user-chip .vazk-logout-btn.vazk-logout-btn[data-vazk-senha]:is(:hover, :focus-visible) svg {
    stroke: var(--hub-amber);
    fill: var(--hub-amber);
}

.vazk-user-chip .vazk-logout-btn.vazk-logout-btn[data-vazk-historico]:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--hub-import) 14%, transparent);
}

.vazk-user-chip .vazk-logout-btn.vazk-logout-btn[data-vazk-historico]:is(:hover, :focus-visible) svg {
    stroke: var(--hub-import);
    fill: var(--hub-import);
}

.vazk-user-chip .vazk-logout-btn.vazk-logout-btn[data-vazk-logout]:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--hub-pdf) 16%, transparent);
}

.vazk-user-chip .vazk-logout-btn.vazk-logout-btn[data-vazk-logout]:is(:hover, :focus-visible) svg {
    stroke: var(--hub-pdf);
    fill: var(--hub-pdf);
}

/* ---------------------------------------------------------
   6. Telas e preferências
   --------------------------------------------------------- */

/* Sem cor: a pastilha vira contorno e o desenho volta à cor do
   texto — branco sobre fundo nenhum sumiria. */
@media (forced-colors: active) {

    html body svg.ui-icon.ui-icon {
        background: none;
        border: 1px solid CanvasText;
    }

    html body svg.ui-icon.ui-icon,
    html body svg.ui-icon.ui-icon use {
        fill: CanvasText;
        stroke: CanvasText;
    }
}

@media (prefers-reduced-motion: reduce) {

    .header-actions .btn-outline-sm>.ui-icon {
        transition: none;
    }
}

/* Em tela estreita o cabeçalho já rola na horizontal; encolher
   a pastilha devolve alguns pixels por botão. */
@media (max-width: 680px) {

    .header-actions .btn-outline-sm>.ui-icon {
        padding: 3px;
        border-radius: 6px;
    }

    .header-actions .btn-outline-sm {
        padding-inline: 11px;
    }
}

/* Impressão: o relatório sai em preto e branco, e o cabeçalho
   inteiro já é escondido pelos painéis. Nada de pastilha — um
   quadrado cheio gastaria tinta e o desenho branco sumiria. */
@media print {

    html body svg.ui-icon.ui-icon {
        background: none;
        box-shadow: none;
    }

    html body svg.ui-icon.ui-icon,
    html body svg.ui-icon.ui-icon use {
        stroke: #000;
        fill: #000;
    }
}

/* ---------------------------------------------------------
   7. O mapa de todos os ícones
   ---------------------------------------------------------
   Fora do cabeçalho a cor deixa de ser endereço e passa a ser
   significado: verde é o que deu certo e o que entra de dinheiro,
   vermelho é o que apaga ou se perde, âmbar é prazo. Assim o mesmo
   desenho tem a mesma cor nos cinco painéis, e quem lê a tela
   aprende a paleta uma vez só.

   Desde 24/09/2026 a cor vai para a PASTILHA, não para o desenho:
   todo .ui-icon vira um quadradinho da cor do significado com o
   desenho branco por cima (a variação C, ver seção 3). O gancho
   continua sendo o <use href="#simbolo">, agora lido pelo :has()
   do <svg> em volta — que é quem tem fundo. Continua pintando
   tudo sem tocar em uma linha de HTML, inclusive os ícones cujo
   href é montado em JS, que são a maioria no Tarefas e no CRM.

   O :has() pesa (0,2,1). As seções 3 e 4 (cabeçalho e abas) pesam
   mais e mandam no próprio fundo; aqui só se define --hub-ic.

   Os papéis de SIGNIFICADO têm cor própria, não emprestada de um
   módulo: quando "deu certo" era o verde do Financeiro, mudar a
   identidade de um módulo recoloria o significado nos cinco
   painéis. Os tons são um degrau mais escuros que os de sempre, e
   isso agora conta a favor: o desenho branco passa de 3:1 sobre
   todos eles (o âmbar #D97706 e o azul #3B82F6 ficavam abaixo).
   Os papéis de assunto (gente, conversa, doc, sistema, meta)
   continuam apontando para a seção 1.
   --------------------------------------------------------- */
:root {
    --hub-ok: #059669;
    --hub-erro: #DC2626;
    --hub-atencao: #B45309;
    --hub-info: #2563EB;
    --hub-gente: var(--hub-tarefas);
    --hub-conversa: var(--hub-crm);
    --hub-doc: var(--hub-export);
    --hub-sistema: var(--hub-import);
    --hub-meta: var(--hub-marketing);

    /* Canal tem a cor da marca dele, não a do Hub. O verde oficial
       #25D366 dava ~1,9:1 sobre branco; #1DA851 é o mesmo verde um
       degrau abaixo e passa de 3:1. */
    --hub-whats: #1DA851;
    --hub-instagram: #E1306C;
}

/* A pastilha. Todo ícone do sprite nasce nela, em cinza-ardósia;
   o mapa logo abaixo troca só a cor. content-box joga o respiro
   para fora, então o desenho mantém o tamanho que cada painel deu.

   O respiro é em `em`, não em px: o Hub tem ícone de 11px no pé do
   cartão e de 19px no topo do modal, e o tamanho do texto em volta
   é a melhor pista de quanto cabe — 3,6px ao lado de texto de 14px,
   3px num rótulo de 12px.

   --hub-ic NÃO nasce aqui com valor: fica vazio até o mapa dizer
   alguma coisa, e cada uso traz o próprio reserva. A pastilha cai no
   cinza; o glifo solto (mais abaixo) cai no currentColor, que é o
   que ele mostrava antes da pastilha existir. */
svg.ui-icon {
    box-sizing: content-box;
    padding: 0.26em;
    border-radius: 0.45em;
    background: var(--hub-ic, var(--hub-ink));
    stroke: #fff;
    fill: #fff;
}

.ui-icon>use {
    stroke: #fff;
    fill: #fff;
}

/* concluído, dinheiro que entra, crescimento */
.ui-icon:has(> use:is(
    [href="#icon-check-circle"], [href="#icon-trending-up"], [href="#icon-wallet"],
    [href="#i-check"], [href="#i-check-c"], [href="#i-lista-check"], [href="#i-ok"],
    [href="#i-grafico"], [href="#i-dinheiro"], [href="#i-cashback"])) {
    --hub-ic: var(--hub-ok);
}

/* apagar, perder, dar errado */
.ui-icon:has(> use:is(
    [href="#icon-alert-circle"], [href="#i-lixo"], [href="#i-perdido"],
    [href="#i-divida"], [href="#i-nao"])) {
    --hub-ic: var(--hub-erro);
}

/* prazo, pendência, aviso, destaque */
.ui-icon:has(> use:is(
    [href="#i-alerta"], [href="#i-aviso"], [href="#i-relogio"], [href="#i-fila"],
    [href="#i-estrela"], [href="#i-trofeu"])) {
    --hub-ic: var(--hub-atencao);
}

/* navegar, buscar, criar, editar, ligar */
.ui-icon:has(> use:is(
    [href="#icon-layout-dashboard"], [href="#icon-arrow-left"], [href="#icon-info"],
    [href="#icon-external"], [href="#icon-building"], [href="#icon-cloud"],
    [href="#i-dash"], [href="#i-quadro"], [href="#i-voltar"], [href="#i-voltar-tar"],
    [href="#i-lupa"], [href="#i-busca"], [href="#i-mais"], [href="#i-lapis"],
    [href="#i-texto"], [href="#i-lista"], [href="#i-atualizar"], [href="#i-repete"],
    [href="#i-copiar"], [href="#i-compartilhar"], [href="#i-elo"], [href="#i-externo"],
    [href="#i-olho"], [href="#i-google"])) {
    --hub-ic: var(--hub-info);
}

/* pessoas, times, encontros */
.ui-icon:has(> use:is(
    [href="#icon-user"], [href="#i-pessoa"], [href="#i-pessoas"],
    [href="#i-reuniao"], [href="#i-etiqueta"])) {
    --hub-ic: var(--hub-gente);
}

/* mensagem, ligação, funil, mapa */
.ui-icon:has(> use:is(
    [href="#icon-message"], [href="#icon-send"], [href="#i-balao"], [href="#i-canais"],
    [href="#i-fone"], [href="#i-funil"], [href="#i-globo"], [href="#i-mapa"],
    [href="#i-local"])) {
    --hub-ic: var(--hub-conversa);
}

/* arquivo, anexo, mídia, entrar e sair de dados */
.ui-icon:has(> use:is(
    [href="#icon-file-text"], [href="#icon-download"], [href="#icon-upload"],
    [href="#icon-receipt"], [href="#i-baixar"], [href="#i-upload"], [href="#i-importar"],
    [href="#i-clipe"], [href="#i-caixa"], [href="#i-proposta"], [href="#i-video"],
    [href="#i-play"], [href="#i-pausa"])) {
    --hub-ic: var(--hub-doc);
}

/* ajuste, segurança, etapa, agenda, máquina */
.ui-icon:has(> use:is(
    [href="#icon-moon"], [href="#i-moon"], [href="#icon-calendar"], [href="#i-conf"],
    [href="#i-ajustes"], [href="#i-engrenagem"], [href="#i-cadeado"], [href="#i-escudo"],
    [href="#i-sistema"], [href="#i-etapa"], [href="#i-cal"], [href="#i-servidor"],
    [href="#i-pulso"])) {
    --hub-ic: var(--hub-sistema);
}

/* alvo, alcance, evento */
.ui-icon:has(> use:is(
    [href="#icon-target"], [href="#icon-megaphone"], [href="#i-bandeira"],
    [href="#i-ticket"])) {
    --hub-ic: var(--hub-meta);
}

/* a KatIA e os robôs */
.ui-icon:has(> use:is([href="#icon-sparkles"], [href="#i-robo"])) {
    --hub-ic: var(--hub-katia);
}

/* WhatsApp, no verde da marca */
.ui-icon:has(> use[href="#i-whats"]) {
    --hub-ic: var(--hub-whats);
}

/* Instagram, no rosa da marca */
.ui-icon:has(> use[href="#i-instagram"]) {
    --hub-ic: var(--hub-instagram);
}

/* Glifo solto, sem pastilha: fechar, desfazer, pular, as setas de
   página e o desenho de "nada aqui". São controle, não conteúdo —
   um × dentro de um quadrado cinza leria como mais um item da
   lista, e seta de paginação ao lado de um número vira ruído. */
svg.ui-icon:has(> use:is(
    [href="#icon-x"], [href="#i-x"], [href="#i-desfazer"], [href="#i-pular"],
    [href="#i-vazio"], [href="#i-esq"], [href="#i-dir"], [href="#i-subir"])) {
    padding: 0;
    background: none;
    stroke: var(--hub-ink);
    fill: var(--hub-ink);
}

svg.ui-icon:has(> use:is(
    [href="#icon-x"], [href="#i-x"], [href="#i-desfazer"], [href="#i-pular"],
    [href="#i-vazio"], [href="#i-esq"], [href="#i-dir"], [href="#i-subir"]))>use {
    stroke: var(--hub-ink);
    fill: var(--hub-ink);
}

/* Glifo colorido, sem pastilha, onde o quadrado não cabe ou mente:
   - a lupa DENTRO do campo de busca (position: absolute sobre o
     texto — a pastilha cobriria as primeiras letras);
   - o check desenhado dentro de caixa de marcar (cartão do Tarefas,
     registro das Jornadas): a caixa já é a moldura;
   - ícone de 10 a 13px em linha de metadado (pé do cartão, dias do
     negócio, canal da conversa, telefone): quadrado ali vira confete;
   - controle de mídia e de navegação da conversa, e os desenhos
     grandes de "nada aqui", que são ilustração, não ação.
   O desenho segue o mapa (--hub-ic) e, sem mapa, a cor do texto,
   como era antes de 24/09. (0,3,1) com :where(): empata com o fundo
   cheio lá embaixo, que vem depois e manda. */
:where(.busca, .filtro-caixa, .cartao-check, .registro .caixa, .cartao-pe, .selo-visib,
    .neg-dias, .neg-fone, .cx-canal, .cx-topo small, .dg-fone, .c-fone, .msg-midia,
    .aud-play, .cx-voltar, .cx-expandir, .btn-menu, .cartao-menu, .agenda-chip,
    .det-linha, .aviso-inline, .vazio, .vazio-msg, .col-vazia, .empty-state, .solta)
svg.ui-icon.ui-icon.ui-icon {
    padding: 0;
    background: none;
    box-shadow: none;
    stroke: var(--hub-ic, currentColor);
    fill: var(--hub-ic, currentColor);
}

:where(.busca, .filtro-caixa, .cartao-check, .registro .caixa, .cartao-pe, .selo-visib,
    .neg-dias, .neg-fone, .cx-canal, .cx-topo small, .dg-fone, .c-fone, .msg-midia,
    .aud-play, .cx-voltar, .cx-expandir, .btn-menu, .cartao-menu, .agenda-chip,
    .det-linha, .aviso-inline, .vazio, .vazio-msg, .col-vazia, .empty-state, .solta)
svg.ui-icon.ui-icon.ui-icon>use {
    stroke: var(--hub-ic, currentColor);
    fill: var(--hub-ic, currentColor);
}

/* Onde o painel já desenha uma moldura em volta do ícone, a
   moldura cede e a pastilha ocupa o lugar dela — senão sairia um
   quadrado colorido dentro de outro. Mesma medida de antes: 34px
   no KPI do Metas, 64px no selo da Agenda. */
:root body .kpi-metric-icon.kpi-metric-icon.kpi-metric-icon,
:root body .convite .selo.selo {
    border-color: transparent;
    background: none;
    box-shadow: none;
}

.kpi-metric-icon svg.ui-icon.ui-icon {
    padding: 8.5px;
    border-radius: 11px;
}

.convite .selo svg.ui-icon.ui-icon {
    padding: 17px;
    border-radius: 18px;
}

/* Sobre fundo cheio não há pastilha: dentro de um botão azul, do
   envio da KatIA ou do toast — que já pinta o próprio ícone pelo
   tipo da mensagem — um quadrado colorido brigaria com o fundo em
   vez de informar. O desenho volta a seguir a cor do texto. Peso
   (0,3,1) para vencer o glifo solto de cima, que pesa (0,2,2). */
.btn svg.ui-icon.ui-icon,
.btn-primary svg.ui-icon.ui-icon,
.btn-cheio svg.ui-icon.ui-icon,
.katia-send-btn svg.ui-icon.ui-icon,
.toast svg.ui-icon.ui-icon,
.status svg.ui-icon.ui-icon,
#vazkAviso svg.ui-icon.ui-icon {
    padding: 0;
    background: none;
    box-shadow: none;
    stroke: currentColor;
    fill: currentColor;
}

.btn svg.ui-icon.ui-icon use,
.btn-primary svg.ui-icon.ui-icon use,
.btn-cheio svg.ui-icon.ui-icon use,
.katia-send-btn svg.ui-icon.ui-icon use,
.toast svg.ui-icon.ui-icon use,
.status svg.ui-icon.ui-icon use,
#vazkAviso svg.ui-icon.ui-icon use,
.btn use,
.btn-primary use,
.btn-cheio use,
.katia-send-btn use,
.toast use,
#vazkAviso use {
    stroke: currentColor;
    fill: currentColor;
}

/* ---------------------------------------------------------
   8. A largura do Hub
   ---------------------------------------------------------
   Ate aqui o teto do conteudo estava escrito a mao em cinco
   lugares — 1180px no Metas, no Marketing, no Tarefas e no CRM,
   1240px no Financeiro, 1780px no funil — e nao havia um unico
   min-width em nenhuma das tres folhas compartilhadas. Numa tela
   de 2560px sobravam 690px de faixa vazia de cada lado; numa de
   3440px, 1130px: o painel ocupava um terco do monitor.

   Agora o teto e um degrau so, aqui. Ele cresce com a tela em vez
   de parar, e como quase toda grade do Hub e repeat(auto-fit,
   minmax(...)), largura a mais vira COLUNA a mais sozinha — que e
   o que faltava. O funil do CRM ja nascia mais largo; o max()
   garante que ele nunca encolhe por causa deste degrau.
   --------------------------------------------------------- */
:root {
    --hub-largura: 1240px;
}

/* ---------------------------------------------------------
   Esquema de cor do navegador
   ---------------------------------------------------------
   Sem color-scheme, o navegador desenhava trilho de rolagem,
   select aberto e campo de data no claro mesmo com o painel no
   escuro. O data-theme vive no <html>, então é ali que o esquema
   vale. A cor da barra desce também para os filhos: o Metas
   pinta scrollbar-color em `*`, e herança não vence regra
   explícita — sem o `*` aqui, só a rolagem da página escurecia.
   --------------------------------------------------------- */
:root {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"],
[data-theme="dark"] * {
    scrollbar-color: #2A3650 #0D1526;
}

@media (min-width: 1500px) {
    :root {
        --hub-largura: 1440px;
    }
}

@media (min-width: 1800px) {
    :root {
        --hub-largura: 1720px;
    }
}

@media (min-width: 2200px) {
    :root {
        --hub-largura: 2080px;
    }
}

@media (min-width: 2700px) {
    :root {
        --hub-largura: 2480px;
    }
}

#app,
.wrap {
    max-width: var(--hub-largura);
}

.wrap.largo {
    max-width: max(1780px, var(--hub-largura));
}

/* Largura a mais so ajuda quem e grade ou tabela. Texto corrido
   piora: a 2480px um paragrafo daria 300 caracteres por linha, e a
   leitura quebra bem antes disso. Estes sao os blocos de prosa do
   Hub, presos na medida que o olho aguenta. */
header .sub,
.hint,
.dica,
.empty-state,
.vazio-msg,
.col-vazia,
.fila-atalho,
.katia-disclaimer,
.aviso-inline {
    max-width: 78ch;
}

/* Nenhum teto na faixa das grades, de proposito. Um max-width por
   cartao parecia prudente e media o contrario do pedido: com
   minmax(220px, 360px) os oito KPIs do Metas caiam de oito colunas
   para cinco a 2560px — cartao maior, menos informacao na tela.
   Com 1fr, largura a mais vira coluna a mais, que era o ponto. */

/* ---------------------------------------------------------
   9. O Hub no celular
   ---------------------------------------------------------
   O ios-layer.css faz o cabecalho encolhido. Alvo de dedo e campo
   de 16px moram no bloco "Alvos de toque", logo abaixo.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Alvos de toque
   ---------------------------------------------------------
   O ÚNICO bloco de `pointer: coarse` da casca. Antes eram dois,
   um aqui e outro no ios-layer.css, com listas que não se
   conheciam; os painéis não precisam repetir nada disto.

   Medidos no navegador com as fontes reais do Hub: .aba 29px, .btn-mini 31,
   .btn-cheio 33, o × de excluir 27x22, o botão de texto vermelho 22 de altura,
   o alternador de etiqueta 38x8. Todos abaixo dos ~44px que o dedo acerta com
   folga, e vários deles destrutivos.

   Só no toque. No mouse o ponteiro tem a precisão de um pixel e engordar tudo
   ali seria perder densidade de graça — por isso `pointer: coarse`, que é o
   que descreve o dedo, e não uma largura de tela.

   Dois remédios, porque os casos são diferentes:

   1. Controle que fica sozinho cresce de verdade. Botão maior no telefone não
      é defeito, é o certo.

   2. Controle que mora dentro de uma linha de tabela não pode crescer: ele
      empurraria a linha. Esse ganha uma área invisível por cima, que recebe o
      toque sem mexer no desenho.

   E a área invisível tem teto medido, não de catálogo: as linhas do Marketing
   andam de 40 em 40, com 18px de vão entre um × e o de baixo. Uma área de 44
   de altura passaria 4px para dentro da linha vizinha — e num botão que apaga
   registro, o dedo acertaria a linha errada. Por isso 38: cresce 73% sobre os
   22 originais e ainda sobra vão. Na largura não há esse aperto, então 44.

   Campo com fonte abaixo de 16px faz o Safari do iPhone ampliar a
   página ao receber foco, e não desfaz o zoom depois. Fica de fora
   checkbox, radio e range: o tamanho deles segue a fonte em vários
   navegadores; eles ganham 22px por medida própria.
   --------------------------------------------------------- */
@media (pointer: coarse) {

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .katia-input,
    .vazk-login-input {
        /* !important porque o Financeiro escreve font-size:13px no atributo
           style do seletor de mes, e inline vence folha. */
        font-size: 16px !important;
    }

    html body input[type="checkbox"],
    html body input[type="radio"] {
        min-width: 22px;
        min-height: 22px;
    }

    /* Botões de ícone (fechar, remover, ações do chip). `html body` na
       frente porque o auth.js injeta `.vazk-logout-btn { width: 29px }`
       no <head> DEPOIS desta folha. */
    html body :is(.tar-fechar, .modal-x, .btn-icone, .ck-x, .etq-x, .anexo-x, .vazk-logout-btn) {
        min-width: 44px;
        min-height: 44px;
    }

    /* 1. os que crescem */
    .aba,
    .btn-mini,
    .btn-cheio,
    .btn-outline-sm,
    .ios-menu-fechar {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* O .btn-mini de um glifo só — os ‹ › que viram página na lista de
       contatos — fechava 33px de largura mesmo com a altura já em 44. Como
       min-width só age em quem é estreito, o botão com texto ("editar",
       "duplicar") não muda de tamanho. */
    .btn-mini,
    .ios-menu-fechar {
        min-width: 44px;
    }

    /* 2. os que ganham área sem crescer */
    .del,
    .btn-danger-text,
    .etq {
        position: relative;
    }

    .del::after,
    .btn-danger-text::after,
    .etq::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: max(100%, 44px);
        height: max(100%, 38px);
        /* Não pinta nada: existe só para receber o dedo. */
    }

    /* A barra de etiqueta é o caso que NÃO chega aos 44px, e é honesto dizer
       por quê: o cartão inteiro é clicável e abre a tarefa, então toda área
       que a barra ganhasse seria tomada dele — quem fosse abrir a tarefa
       acabaria trocando o modo das etiquetas. O que dá para tomar é a faixa
       das próprias etiquetas, que não abre nada por si.
       A barra engorda de 8 para 12, a faixa ganha respiro, e a área invisível
       para na altura da faixa: 8px viram 26. O resto é decisão de desenho e
       não de CSS — um botão próprio para "mostrar nomes" resolveria de vez. */
    .cartao-etiquetas.barras {
        padding: 7px 0;
        margin-bottom: 0;
    }

    .cartao-etiquetas.barras .etq {
        height: 12px;
        /* O `overflow: hidden` do .etq existe para cortar nome comprido no
           modo pílula. Em barra o font-size é 0 e não há texto para cortar —
           sobrava só o recorte, que impedia a área invisível de existir. */
        overflow: visible;
    }

    .cartao-etiquetas.barras .etq::after {
        height: 26px;
    }


    /* A classe repetida em .btn-primary e .btn-cheio nao e enfeite.
       O ios-layer.css fixa 38px em
       `html body :is(.btn-mini,.btn-outline-sm,.btn-cheio,.btn-primary,.subtabs button)`,
       e :is() assume a especificidade do argumento MAIS especifico
       que carrega — aqui `.subtabs button`, que e (0,1,1). Com o
       `html body` na frente a regra toda vale (0,1,3), e um
       `html body .btn-primary` (0,1,2) perde por especificidade, nao
       por ordem. Medido: ficava em 38px. Repetir a classe leva a
       (0,2,2) e resolve sem !important. */
    html body .tab,
    html body .btn,
    html body .btn-primary.btn-primary,
    html body .btn-cheio.btn-cheio,
    html body #nav button,
    html body .subtabs button {
        min-height: 44px;
    }

    /* Os mesmos botões com os nomes que Agenda, Contágio e Jornadas deram
       (.btn-primario, .btn-perigo) e o .btn-ghost do Marketing ficavam fora
       da lista acima: no celular fechavam 34-38px. Também a barra entre
       painéis (36px) e os botões da gaveta de avisos ("Marcar tudo" dava
       26px; o do rodapé tinha padding 0). */
    html body .btn-primario.btn-primario,
    html body .btn-perigo.btn-perigo,
    html body .btn-ghost.btn-ghost,
    html body .hub-paineis a,
    html body .hub-avisos-tudo,
    html body .hub-avisos-pe button {
        min-height: 44px;
    }

    html body .hub-avisos-pe button {
        padding: 0 8px;
    }
}

/* Tabela larga em tela estreita: rolar na horizontal DENTRO da
   tabela e aceitavel; empurrar a pagina inteira para o lado nao e.
   O .table-responsive ja existe em alguns painies; aqui ele passa a
   valer em todos, e o contain evita que o gesto de rolar a tabela
   arraste a pagina junto no fim do curso. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

/* Aqui havia um `overflow-x: hidden` no html e no body abaixo de
   900px, como rede de seguranca. Saiu por dois motivos. Primeiro,
   ele nao conserta: esconde. Na propria verificacao desta folha ele
   mascarou o estouro do calendario do Financeiro — o documento
   tinha 1188px numa viewport de 820px e a medicao dizia 820px.
   Segundo, o Hub depende de position: sticky na barra de abas e no
   #nav, e overflow no ancestral e justamente o que desliga sticky.
   Estouro se corrige na origem, e os tres conhecidos estao logo
   abaixo. */

/* ---------------------------------------------------------
   10. Os tres estouros de largura
   ---------------------------------------------------------
   Rolar de lado DENTRO de uma tabela e aceitavel. Empurrar a
   pagina inteira nao e — e era o que estes tres faziam.
   --------------------------------------------------------- */

/* Calendario de contas a pagar (Financeiro). `repeat(7, 1fr)` parece
   seguro e nao e: 1fr equivale a minmax(auto, 1fr), e esse `auto`
   tem como piso o max-content da celula. Como a .cal-pill e
   white-space: nowrap, o nome do fornecedor vira largura minima e
   as sete colunas juntas estouram o container, levando a PAGINA
   junto. minmax(0, 1fr) tira o piso e devolve o controle a grade. */
.cal-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-dia {
    min-width: 0;
}

/* A barra de secoes com nove abas. O ios-layer.css troca, abaixo de
   640px, a rolagem horizontal por flex-wrap — e nove abas viram
   cinco linhas: 301px de barra grudada no topo, 40% da tela de um
   telefone de 360px so para navegar. Aqui a rolagem volta, que era
   o que os paineis tinham projetado. Repete `html body` porque e
   assim que a regra que ela precisa vencer esta escrita. */
@media (max-width: 640px) {

    html body #nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    html body #nav::-webkit-scrollbar {
        display: none;
    }

    html body #nav button {
        flex: 0 0 auto;
    }
}

/* ---------------------------------------------------------
   11. O Modo TV
   ---------------------------------------------------------
   O Modo TV existe para a tela grande da sala — e era onde os
   numeros paravam de crescer primeiro. `clamp(56px, 7vw, 112px)`
   bate no teto assim que a viewport chega a 1600px: da 1600px para
   cima, uma TV de 3440px mostra o mesmo numero de 112px que um
   notebook. O teto sobe junto com a tela.
   --------------------------------------------------------- */
@media (min-width: 1800px) {

    .tv-mode .kpi-feature-value {
        font-size: clamp(56px, 6.6vw, 200px);
    }
}

/* ---------------------------------------------------------
   12. O aviso (VazkIOS.aviso)
   ---------------------------------------------------------
   Um elemento só, #vazkAviso, criado pelo ios-layer.js sob
   demanda. Fica embaixo, centrado, largo só o quanto o texto
   pede e nunca colado na borda (16px de cada lado, mais a área
   segura do iPhone). Acima de modal: z-index 1100 da escala.

   O tipo chega por `data-tipo="ok|erro|info"` (ou pela classe
   de mesmo nome). A faixa de cor à esquerda e o ícone mudam; o
   texto continua navy, porque mensagem inteira em vermelho é
   mais difícil de ler, não mais urgente.

   Entrada por animação (roda quando o elemento aparece). Saída
   com a classe `.saindo` / `[data-saindo]`, se o JS quiser
   esperar o fim antes de esconder. Sem blur atrás.
   --------------------------------------------------------- */
#vazkAviso {
    --aviso-cor: var(--info-fill, #2563EB);
    --aviso-icone: var(--info-text, #1D4ED8);
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: fit-content;
    max-width: min(560px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 12px 16px 12px 14px;
    box-sizing: border-box;
    border: 1px solid var(--line, #E2E8F0);
    border-left: 4px solid var(--aviso-cor);
    border-radius: 14px;
    background: var(--vidro-corpo-alto, #FFFFFF);
    color: var(--navy, #0B132B);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* backwards, não both: o estado natural é visível. Se a animação não
       rodar (aba em segundo plano, animações desligadas), o aviso aparece
       mesmo assim em vez de ficar parado no quadro "from", invisível. */
    animation: vazkAvisoEntra 220ms cubic-bezier(.16, 1, .3, 1) backwards;
}

#vazkAviso[hidden] {
    display: none;
}

#vazkAviso:is([data-tipo="ok"], .ok) {
    --aviso-cor: var(--ok-fill, #10B981);
    --aviso-icone: var(--ok-text, #047857);
}

#vazkAviso:is([data-tipo="erro"], .erro) {
    --aviso-cor: var(--bad-fill, #EF4444);
    --aviso-icone: var(--bad-text, #B91C1C);
}

#vazkAviso:is([data-tipo="info"], .info) {
    --aviso-cor: var(--info-fill, #2563EB);
    --aviso-icone: var(--info-text, #1D4ED8);
}

#vazkAviso :is(svg, .ui-icon) {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--aviso-icone);
    stroke: var(--aviso-icone);
    fill: var(--aviso-icone);
}

[data-theme="dark"] #vazkAviso {
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
}

#vazkAviso:is(.saindo, [data-saindo]) {
    animation: vazkAvisoSai 160ms ease-in both;
}

@keyframes vazkAvisoEntra {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes vazkAvisoSai {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(8px); }
}

/* Quem pediu menos movimento vê só o esmaecer, sem deslocamento. */
@media (prefers-reduced-motion: reduce) {

    #vazkAviso {
        animation: vazkAvisoAparece 1ms linear backwards;
    }

    #vazkAviso:is(.saindo, [data-saindo]) {
        animation: none;
        opacity: 0;
    }
}

@keyframes vazkAvisoAparece {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media print {
    #vazkAviso {
        display: none;
    }
}

/* ---------------------------------------------------------
   13. Carga que falhou
   ---------------------------------------------------------
   Aqui morava o .vazk-erro-carga, que se dizia o desenho do
   VazkAuth.montarErro -- mas o montarErro gera .vazk-erro-card,
   com o CSS injetado pelo próprio auth.js. Nenhum código criava
   a classe; saiu em 27/09/2026 (captura antes/depois idêntica).
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   14. Estados ocupado e desabilitado
   ---------------------------------------------------------
   Enquanto a sessão é conferida, o #authGate fica com
   aria-busy e o texto "Conferindo sua sessão…": aqui ele ganha
   um giro discreto antes do texto, em vez de tela em branco.
   Sem mexer em `display` — quem mostra e esconde o gate é o
   auth.js.

   Botão desabilitado ou ocupado precisa PARECER parado: antes
   o :disabled não tinha estilo e o clique sumia sem resposta.
   --------------------------------------------------------- */
#authGate[aria-busy="true"] {
    min-height: 40vh;
    padding: 48px 16px;
    text-align: center;
    color: var(--muted, #55637A);
    font-size: 14px;
    font-weight: 600;
    cursor: progress;
}

#authGate[aria-busy="true"]::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto 12px;
    border: 2px solid var(--line, #E2E8F0);
    border-top-color: var(--foco, #2563EB);
    border-radius: 50%;
    animation: vazkGira 800ms linear infinite;
}

@keyframes vazkGira {
    to { transform: rotate(360deg); }
}

:is(button, .btn, .btn-primary, .btn-primario, .btn-perigo, .btn-ghost, .btn-cheio, .btn-mini, .btn-outline-sm):disabled,
:is(button, .btn, .btn-primary, .btn-primario, .btn-perigo, .btn-ghost, .btn-cheio, .btn-mini, .btn-outline-sm)[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

:is(button, .btn, .btn-primary, .btn-primario, .btn-perigo, .btn-ghost, .btn-cheio, .btn-mini, .btn-outline-sm)[aria-busy="true"] {
    cursor: progress;
    opacity: .8;
}

@media (prefers-reduced-motion: reduce) {

    #authGate[aria-busy="true"]::before {
        animation: none;
        border-top-color: var(--line, #E2E8F0);
    }
}

/* ---------------------------------------------------------
   15. O botão principal
   ---------------------------------------------------------
   Até 27/09/2026 o mesmo botão tinha quatro nomes e três
   desenhos: pílula no CRM e no Tarefas (.btn-cheio), canto de
   14px na Agenda, no Contágio e nas Jornadas (.btn-primario),
   canto de 12px e azul mais escuro no Marketing (.btn) e no
   Hub/Financeiro (.btn-primary). Ficou a pílula do CRM, que é
   da mesma família dos secundários (.btn-mini, .btn-outline-sm,
   KatIA). Os valores são os do CRM de propósito: lá e no
   Tarefas a captura antes/depois sai idêntica.

   O .btn solto só existe no Marketing (22 usos, todos botão
   principal); no Hub ele vem sempre com .btn-primary. Daí o
   escopo pelo data-hub.
   --------------------------------------------------------- */
.btn-primary,
.btn-primario,
.btn-cheio,
body[data-hub="marketing"] .btn {
    min-height: 38px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--royal, #2563EB), var(--royal-dark, #022686));
    color: #FFFFFF;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 8px 18px -12px rgba(37, 99, 235, .8);
}

.btn-primary:hover,
.btn-primario:hover,
.btn-cheio:hover,
body[data-hub="marketing"] .btn:hover {
    background: linear-gradient(135deg, var(--royal, #2563EB), var(--royal-dark, #022686));
    box-shadow: 0 12px 24px -12px rgba(37, 99, 235, .9);
}