/* =========================================================
   VAZK HUB — BARRA DE NAVEGAÇÃO
   ---------------------------------------------------------
   Par do hub-nav.js. Uma barra só, com duas apresentações:

   - TRILHA (tela larga e mouse): ícones à esquerda que abrem com
     os rótulos quando o mouse chega, como a do Instagram Web, e
     POR CIMA da página — a página só reserva a largura da trilha
     fechada. Abrir empurrando o conteúdo faria o Kanban do CRM
     refluir a cada passada de mouse.

   - BARRA DE BAIXO (todo o resto: celular, tablet, janela
     estreita): abas fixas embaixo, até quatro módulos e o
     "Mais". A faixa de links do topo quebrava em duas ou três
     linhas no celular e empurrava o conteúdo para baixo da dobra;
     o polegar também não alcança o topo.

   As duas consultas são complementares — a segunda é `not all and`
   a primeira —, então não há largura sem nenhuma delas nem com as
   duas. É a MESMA constante do hub-nav.js e do ios-layer.js; um
   teste confere as três.

   Duas garantias, de propósito:

   1. Tudo o que mexe no cabeçalho, na faixa de módulos, na gaveta
      ou na página depende de `html.hub-nav-on` (classe que o
      hub-nav.js põe DEPOIS de montar a barra) E fica dentro de uma
      consulta. Se o JavaScript não rodar, ou se esta folha ficar
      em versão nova ao lado de um script velho no cache, nada é
      escondido: o cabeçalho antigo segue inteiro. Esconder o botão
      "Opções" sem que a barra exista deixaria a gaveta, e com ela a
      saída do Hub, sem porta.

   2. As camadas. A barra fica em 45: acima da barra de abas grudada
      (30) e dos cartões; ABAIXO dos modais dos painéis antigos
      (Agenda, Contágio e Monitor usam 50, Jornadas 60), do
      cabeçalho grudado (50), da gaveta (110/120) e da KatIA (1000).
      Numa camada mais alta a barra ficava por cima do fundo escuro
      de um modal, clicável e sem escurecer.

   Carregada depois do hub-chrome.css: é ordem de documento que
   faz estas regras vencerem os empates com o <style> de cada
   painel.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   0. Tokens
   ---------------------------------------------------------
   Uma barra só, igual nos nove painéis: os valores moram aqui,
   e não em `var(--navy)` de cada painel, porque cada um redefine
   o seu no próprio <style>. Os tons de módulo vêm da seção 1 do
   hub-chrome.css; Agenda, Jornadas, Contágio, Monitor e
   Comercial não tinham cor lá e ganham a delas aqui.
   --------------------------------------------------------- */
:root {
    --hub-nav-w: 76px;
    --hub-nav-w-aberta: 248px;

    --hn-fundo: #FFFFFF;
    --hn-tela: #EEF3FA;
    --hn-fio: #D7E0EC;
    --hn-tx: #0B132B;
    --hn-mudo: #55637A;
    --hn-hover: rgba(15, 23, 42, .06);
    --hn-marca: #FFFFFF;
    --hn-sombra: 14px 0 44px -20px rgba(15, 23, 42, .4);
    --hn-ativo: 13%;
}

[data-theme="dark"] {
    --hn-fundo: #10182B;
    --hn-tela: #080E1C;
    --hn-fio: #26324A;
    --hn-tx: #F1F5FB;
    --hn-mudo: #A3B2C7;
    --hn-hover: rgba(255, 255, 255, .07);
    --hn-marca: #17213A;
    --hn-sombra: 14px 0 44px -16px rgba(0, 0, 0, .8);
    --hn-ativo: 24%;
}

/* Sem a classe, a barra nem existe para o layout. A seção que lista os
   painéis dentro da gaveta só aparece na barra de baixo (na trilha todos os
   módulos já estão à vista). */
.hub-nav,
.hub-nav-mais {
    display: none;
}

/* ---------------------------------------------------------
   1. O que as duas apresentações compartilham
   ---------------------------------------------------------
   Só desenho da própria barra: reset do botão, pastilha, cor de
   cada módulo, selo de avisos. Geometria, rótulo e tudo o que
   toca no resto da página são de cada consulta, mais abaixo.

   O reset do <button> é inteiro porque os painéis estilizam
   `button` solto (borda, fundo, sombra, altura mínima).
   --------------------------------------------------------- */
html.hub-nav-on .hub-nav {
    --hn-item: 46px;
    --hn-tile: 34px;
    position: fixed;
    z-index: 45;
    display: flex;
    overflow: hidden;
    background: var(--hn-fundo);
    color: var(--hn-tx);
    font-family: inherit;
}

html.hub-nav-on .hub-nav[hidden] {
    display: none;
}

html.hub-nav-on .hub-nav .hub-nav-item {
    appearance: none;
    display: flex;
    flex: none;
    align-items: center;
    min-height: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--hn-tx);
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transform: none;
    -webkit-tap-highlight-color: transparent;
}

html.hub-nav-on .hub-nav .hub-nav-item[hidden] {
    display: none;
}

html.hub-nav-on .hub-nav .hub-nav-item:focus-visible {
    outline: 2px solid var(--foco, #2563EB);
    outline-offset: -2px;
}

/* A pastilha: quadrado arredondado onde mora o desenho. A cor de fundo é
   de cada apresentação — na trilha todo módulo é colorido; embaixo, só o
   da aba ativa. */
html.hub-nav-on .hub-nav .hub-nav-ic {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: var(--hn-tile);
    height: var(--hn-tile);
    border-radius: 10px;
    color: var(--hn-tx);
}

html.hub-nav-on .hub-nav .hub-nav-ic svg {
    fill: currentColor;
    stroke: none;
}

/* O avatar do perfil já é redondo e traz o próprio fundo. O tamanho dele
   vem de um `style` inline do auth.js (avatarHtml), e só !important numa
   folha vence inline: sem isto, em janela baixa o avatar de 34px
   transbordaria a pastilha de 30. */
html.hub-nav-on .hub-nav .hub-nav-ic-avatar {
    border-radius: 50%;
}

html.hub-nav-on .hub-nav .hub-nav-ic-avatar .vazk-quick-avatar {
    width: 100% !important;
    height: 100% !important;
    font-weight: 700;
    color: #fff;
}

html.hub-nav-on .hub-nav .hub-nav-perfil .hub-nav-tx {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

html.hub-nav-on .hub-nav .hub-nav-perfil .hub-nav-tx b {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
}

html.hub-nav-on .hub-nav .hub-nav-perfil .hub-nav-tx small {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--hn-mudo);
}

/* O número de avisos, no canto do ícone, como o do Instagram. */
html.hub-nav-on .hub-nav .hub-nav-n {
    position: absolute;
    top: -4px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #DC2626;
    box-shadow: 0 0 0 2px var(--hn-fundo);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

html.hub-nav-on .hub-nav .hub-nav-n[hidden] {
    display: none;
}

/* Cor de cada módulo — na barra, na lista da gaveta e na caixa de busca. */
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="hoje"] { --hn-tint: var(--hub-hoje, #0284C7); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="metas"] { --hn-tint: var(--hub-metas, #3B82F6); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="crm"] { --hn-tint: var(--hub-crm, #0891B2); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="tarefas"] { --hn-tint: var(--hub-tarefas, #8B5CF6); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="agenda"] { --hn-tint: var(--hub-import, #6366F1); }
/* Rosa: o único tom que nenhum outro módulo usa. O vermelho do número de
   avisos (#DC2626) é outro e fica num círculo pequeno, sem leito. */
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="comercial"] { --hn-tint: var(--hub-comercial, #E11D48); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="marketing"] { --hn-tint: var(--hub-marketing, #EA580C); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="financeiro"] { --hn-tint: var(--hub-financeiro, #059669); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="jornadas"] { --hn-tint: var(--hub-midia, #0D9488); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="contagio"] { --hn-tint: var(--hub-amber, #D97706); }
/* Vazk Club em dourado e Transmissão em verde-limão: os tons que sobravam.
   O dourado é vizinho do âmbar do Contágio (e fica logo abaixo dele na
   barra); quem separa os dois é o ícone, ingresso contra play. O verde do
   Financeiro é esmeralda, mais frio que o limão. */
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="vazkclub"] { --hn-tint: var(--hub-vazkclub, #CA8A04); }
/* Participantes em rosa (29/10/2026): o tom livre entre o carmim do
   Comercial e o magenta da KatIA, longe dos dois na barra. */
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="participantes"] { --hn-tint: var(--hub-participantes, #DB2777); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="transmissao"] { --hn-tint: var(--hub-transmissao, #65A30D); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="monitor"] { --hn-tint: var(--hub-ink, #64748B); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="config"] { --hn-tint: var(--hub-ink, #475569); }
html.hub-nav-on :is(.hub-nav, .hub-nav-mais, .hub-nav-busca) [data-nav-mod="katia"] { --hn-tint: var(--hub-katia, #D946EF); }

/* =========================================================
   2. A TRILHA — tela larga e mouse
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) {

    /* ---------------------------------------------------------
       2.1 A trilha
       ---------------------------------------------------------
       `fixed` e de altura cheia. O `overflow: hidden` é o que
       recorta os rótulos no estado fechado (eles existem no DOM,
       só não cabem — leitor de tela continua lendo).

       O divisor direito é uma sombra interna, não `border`: com
       borda a caixa útil sairia 75px e o ícone deixaria de ficar
       centrado na trilha.
       --------------------------------------------------------- */
    html.hub-nav-on .hub-nav {
        inset: 0 auto 0 0;
        flex-direction: column;
        width: var(--hub-nav-w);
        padding: 12px 8px;
        box-shadow: inset -1px 0 0 var(--hn-fio);
        transition:
            width .2s cubic-bezier(.22, 1, .36, 1),
            box-shadow .2s ease;
    }

    html.hub-nav-on body {
        padding-left: var(--hub-nav-w);
    }

    /* Aberta: mouse em cima, teclado dentro (`:focus-visible`, não
       `:focus-within` — clicar num botão com o mouse deixa o foco nele, e
       a barra ficaria aberta depois de o mouse ir embora), ou a gaveta
       "Mais" aberta, que nasce em cima da barra e precisa dela por perto.
       O pequeno atraso ao abrir cancela a abertura de quem só raspou na
       borda da tela; fechar é na hora. */
    html.hub-nav-on .hub-nav:is(:hover, :has(:focus-visible)),
    html.hub-nav-on.ios-menu-aberto .hub-nav {
        width: var(--hub-nav-w-aberta);
        box-shadow: inset -1px 0 0 var(--hn-fio), var(--hn-sombra);
        transition-delay: 70ms;
    }

    /* ---------------------------------------------------------
       2.2 A marca
       --------------------------------------------------------- */
    html.hub-nav-on .hub-nav-marca {
        display: flex;
        flex: none;
        align-items: center;
        gap: 12px;
        height: 56px;
        padding: 0 calc((var(--hub-nav-w) - 16px - var(--hn-tile)) / 2);
        border-radius: 12px;
        color: inherit;
        text-decoration: none;
    }

    html.hub-nav-on .hub-nav-logo {
        display: grid;
        flex: none;
        place-items: center;
        width: var(--hn-tile);
        height: var(--hn-tile);
        border-radius: 10px;
        background: var(--hn-marca);
        box-shadow: inset 0 0 0 1px var(--hn-fio);
    }

    /* logo.png é traço preto sobre transparência: no escuro some sobre o
       azul-marinho da caixa. `brightness(0) invert(1)` força o traço a branco
       puro sem depender do cinza de origem (mesma regra do cabeçalho do
       Metas, que só existia lá). */
    html.hub-nav-on .hub-nav-logo img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    html.hub-nav-on[data-theme="dark"] .hub-nav-logo img {
        filter: brightness(0) invert(1);
    }

    html.hub-nav-on .hub-nav-marca-tx {
        display: flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.1;
    }

    html.hub-nav-on .hub-nav-marca-tx b {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .01em;
    }

    html.hub-nav-on .hub-nav-marca-tx small {
        font-size: 12px;
        font-weight: 500;
        color: var(--hn-mudo);
    }

    /* ---------------------------------------------------------
       2.3 A lista de módulos
       ---------------------------------------------------------
       É ela que encolhe (e rola, sem barra) quando a janela é
       baixa: marca e ações ficam sempre à vista.
       --------------------------------------------------------- */
    html.hub-nav-on .hub-nav-lista {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 2px;
        min-height: 0;
        overflow: hidden auto;
        scrollbar-width: none;
    }

    html.hub-nav-on .hub-nav-lista::-webkit-scrollbar {
        display: none;
    }

    /* Grupo: fechada, um fio; aberta, o nome. Os dois ocupam a mesma faixa,
       para nada se mexer de lugar quando a barra abre. */
    html.hub-nav-on .hub-nav-grupo {
        position: relative;
        flex: none;
        height: 26px;
    }

    html.hub-nav-on .hub-nav-grupo::before {
        content: "";
        position: absolute;
        inset: 50% 14px auto;
        height: 1px;
        background: var(--hn-fio);
        transition: opacity .12s ease;
    }

    html.hub-nav-on .hub-nav-grupo>span {
        position: absolute;
        left: 12px;
        bottom: 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--hn-mudo);
        opacity: 0;
        transition: opacity .12s ease;
    }

    html.hub-nav-on .hub-nav-fim {
        display: flex;
        flex: none;
        flex-direction: column;
        gap: 2px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--hn-fio);
    }

    /* Na trilha, Configurações fica só no rodapé (que não rola): a cópia da
       lista, a última de todas, caía abaixo da dobra no notebook. */
    html.hub-nav-on .hub-nav-lista [data-nav-mod="config"] {
        display: none;
    }

    /* ---------------------------------------------------------
       2.4 O item
       ---------------------------------------------------------
       Todo item é [ícone][rótulo] e o ícone NÃO se mexe quando a
       barra abre: o padding esquerdo é (trilha − respiro − ícone)
       / 2, o que o põe no centro da trilha fechada. É o detalhe
       que faz a barra do Instagram parecer uma coisa só que
       cresce, e não duas trocando de lugar.
       --------------------------------------------------------- */
    html.hub-nav-on .hub-nav .hub-nav-item {
        gap: 12px;
        width: 100%;
        height: var(--hn-item);
        padding: 0 calc((var(--hub-nav-w) - 16px - var(--hn-tile)) / 2);
        border-radius: 12px;
        font-size: 15px;
        transition: background-color .12s ease;
    }

    html.hub-nav-on .hub-nav .hub-nav-item:hover {
        background: var(--hn-hover);
    }

    /* A página em que se está: rótulo em negrito e um leito na cor do módulo,
       o que na trilha fechada vira um quadrado em volta do ícone. O
       Instagram marca o item ativo só com negrito e ícone cheio; aqui todo
       ícone já é cheio (a pastilha sólida de 24/09), então o negrito sozinho
       não distinguiria nada. */
    html.hub-nav-on .hub-nav .hub-nav-item[aria-current="page"] {
        background: color-mix(in srgb, var(--hn-tint, var(--hn-tx)) var(--hn-ativo), transparent);
        font-weight: 700;
    }

    /* Na trilha todo módulo é um quadrado colorido, desenho branco. */
    html.hub-nav-on .hub-nav .hub-nav-ic {
        background: var(--hn-tint, transparent);
    }

    html.hub-nav-on .hub-nav .hub-nav-ic svg {
        width: 56%;
        height: 56%;
        fill: #fff;
    }

    /* Sem cor de módulo (Avisos, Mais): o desenho solto, como no Instagram —
       maior, na cor do texto, sem quadrado. */
    html.hub-nav-on .hub-nav .hub-nav-item:not([data-nav-mod]) .hub-nav-ic svg {
        width: 70%;
        height: 70%;
        fill: currentColor;
    }

    html.hub-nav-on .hub-nav .hub-nav-ic-avatar {
        background: transparent;
    }

    /* O rótulo: o que a barra fechada esconde. Ao fechar ele some quase de
       uma vez (.05s) enquanto a largura ainda recolhe em .2s: com o fade
       mais lento, o texto ficava visível numa caixa que já encolhia e saía
       truncado ("M…", "C…") por alguns quadros. É também por isso que o corte
       é `clip` e não `ellipsis` — reticências no meio do recolhimento são
       pior que texto cortado seco. (Os textos que precisam de reticências
       de verdade, como o cargo do perfil, declaram a sua.) */
    html.hub-nav-on .hub-nav .hub-nav-tx {
        min-width: 0;
        overflow: hidden;
        text-overflow: clip;
        opacity: 0;
        transition: opacity .05s ease;
    }

    /* Aberta (mesma lista de gatilhos de 2.1): rótulos e nomes de grupo
       entram um instante depois de a largura começar a crescer, para o texto
       não aparecer espremido numa caixa ainda estreita. */
    html.hub-nav-on .hub-nav:is(:hover, :has(:focus-visible)) .hub-nav-tx,
    html.hub-nav-on.ios-menu-aberto .hub-nav .hub-nav-tx {
        opacity: 1;
        transition: opacity .16s ease .08s;
    }

    html.hub-nav-on .hub-nav:is(:hover, :has(:focus-visible)) .hub-nav-grupo>span,
    html.hub-nav-on.ios-menu-aberto .hub-nav .hub-nav-grupo>span {
        opacity: 1;
        transition-delay: .08s;
    }

    html.hub-nav-on .hub-nav:is(:hover, :has(:focus-visible)) .hub-nav-grupo::before,
    html.hub-nav-on.ios-menu-aberto .hub-nav .hub-nav-grupo::before {
        opacity: 0;
    }

    /* Janela baixa (notebook de 768px, com a barra do navegador): a trilha
       fica mais compacta em vez de cortar a lista. */
    @media (max-height: 820px) {
        html.hub-nav-on .hub-nav {
            --hn-item: 42px;
            --hn-tile: 30px;
        }

        html.hub-nav-on .hub-nav-marca {
            height: 48px;
        }

        html.hub-nav-on .hub-nav-grupo {
            height: 22px;
        }
    }

    @media (max-height: 680px) {
        html.hub-nav-on .hub-nav {
            --hn-item: 38px;
            --hn-tile: 28px;
        }

        html.hub-nav-on .hub-nav-grupo {
            height: 18px;
        }
    }

    /* ---------------------------------------------------------
       2.5 O cabeçalho, sem o que a trilha levou
       ---------------------------------------------------------
       Marca, sino, KatIA, "Opções" e a faixa de módulos moram na
       trilha. Escondidos, não removidos: o ios-layer.js, o auth.js e
       a KatIA seguem achando os ids de sempre (ver hub-nav.js).

       Sobra o título da página, e um título não precisa de cartão:
       sem fundo, sem borda, sem sombra e sem grudar. Quem gruda
       agora é a barra de abas de cada painel, logo abaixo — o
       ios-layer.css a punha 10px + a altura do cabeçalho abaixo do
       topo, e sem cabeçalho grudado essa altura vira um buraco.
       --------------------------------------------------------- */
    html.hub-nav-on header .logo-box,
    html.hub-nav-on header .brand-kicker,
    html.hub-nav-on header .hub-sino,
    html.hub-nav-on header .ios-menu-botao,
    html.hub-nav-on .hub-paineis {
        display: none;
    }

    /* A KatIA é a exceção: o katia.js injeta no <head>, em runtime,
       `.btn-katia-trigger { display: inline-flex !important }`, e um
       !important de folha só perde para outro !important. */
    html.hub-nav-on header .hub-katia {
        display: none !important;
    }

    /* O segundo seletor é o cabeçalho "curto" do ios-layer.css
       (:root.ios-topo-curto header, peso 0,2,1): a classe some na primeira
       rolagem, mas até lá ele venceria o primeiro. */
    html.hub-nav-on header,
    html.hub-nav-on.ios-topo-curto header {
        position: static;
        padding: 4px 2px 0;
        margin-bottom: 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    html.hub-nav-on .tabs,
    html.hub-nav-on nav {
        top: 10px;
    }

    html.hub-nav-on .hub-periodo {
        margin-top: 0;
    }

    /* ---------------------------------------------------------
       2.6 O cabeçalho da página, igual nos painéis
       ---------------------------------------------------------
       Metas, CRM e Marketing montavam o topo em ordens diferentes
       (título > filtros > abas; título > abas > filtros; título >
       mês > abas), com duas famílias de aba (cartão com pílula azul
       cheia e cartão com pílula cinza) e uma caixa de vidro para
       cada faixa. Agora é uma receita só:

           título + apoio            controles do contexto (à direita)
           ── aba ── aba ── aba ───────────────────────────────────
           conteúdo

       - Os controles que valem para a PÁGINA INTEIRA (período, meta,
         mês, dias úteis) sobem para a linha do título, sem caixa. O
         que depende da aba (busca do funil, filtros da lista) segue
         dentro do conteúdo.
       - As abas perdem o cartão: largura natural, alinhadas à
         esquerda, fio fino embaixo e traço na cor do módulo na ativa.
         Uma caixa a menos por painel.

       Só CSS, só na trilha: o `#hubPeriodo` continua sendo montado
       pelo ios-layer.js depois do cabeçalho; a grade abaixo é que o
       põe ao lado do título. No celular e no tablet nada disto vale.
       --------------------------------------------------------- */
    html.hub-nav-on :is(#painelWrap, #app):has(> #hubPeriodo) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 24px;
        align-items: end;
    }

    html.hub-nav-on :is(#painelWrap, #app):has(> #hubPeriodo) > * {
        grid-column: 1 / -1;
    }

    html.hub-nav-on :is(#painelWrap, #app):has(> #hubPeriodo) > header {
        grid-column: 1;
        grid-row: 1;
    }

    html.hub-nav-on :is(#painelWrap, #app):has(> #hubPeriodo) > #hubPeriodo {
        grid-column: 2;
        grid-row: 1;
    }

    html.hub-nav-on body #hubPeriodo {
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 12px;
        margin: 0 0 14px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    html.hub-nav-on body #hubPeriodo::before,
    html.hub-nav-on body #hubPeriodo::after {
        display: none;
    }

    html.hub-nav-on body #hubPeriodo label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: none;
        color: var(--hn-mudo);
    }

    html.hub-nav-on body #hubPeriodo :is(input, select) {
        min-height: 36px;
        font-size: 13px;
    }

    /* O mês do Marketing vinha dentro de uma pílula própria (rótulo +
       campo); aqui é só mais um campo da faixa. */
    html.hub-nav-on body #hubPeriodo .mes-pill {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    html.hub-nav-on body #hubPeriodo .day-pill {
        min-height: 36px;
    }

    /* A barra de abas. `.tabs` (Metas), `nav#nav` (Marketing, Financeiro,
       Monitor) e `.crm-navegacao` (CRM, onde o fio corre por baixo das abas
       E do menu de Gestão, que mora ao lado). */
    html.hub-nav-on body :is(.tabs, nav#nav, .jor-abas),
    html.hub-nav-on body .crm-navegacao {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 2px;
        width: auto;
        max-width: none;
        margin: 0 0 20px;
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--hn-fio);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    html.hub-nav-on body :is(.tabs, nav#nav, .jor-abas)::-webkit-scrollbar,
    html.hub-nav-on body .crm-navegacao .abas::-webkit-scrollbar {
        display: none;
    }

    /* Sem o brilho passando: era a pílula de vidro que ele iluminava. */
    html.hub-nav-on body :is(.tabs, nav#nav, .jor-abas)::before,
    html.hub-nav-on body :is(.tabs, nav#nav, .jor-abas)::after,
    html.hub-nav-on body .crm-navegacao .abas::before,
    html.hub-nav-on body .crm-navegacao .abas::after {
        display: none;
    }

    /* Grudada, a barra precisa de fundo: sem cartão, o conteúdo passaria
       por baixo dela. Fosco, na cor da tela: mais claro que ela, a barra
       voltaria a parecer um cartão. */
    html.hub-nav-on body :is(.tabs, nav#nav) {
        background: color-mix(in srgb, var(--hn-tela) 86%, transparent);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        padding: 0 8px;
        margin-left: -8px;
        margin-right: -8px;
    }

    html.hub-nav-on body .crm-navegacao .abas {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 2px;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow-x: auto;
        scrollbar-width: none;
    }

    html.hub-nav-on body :is(.tabs .tab, nav#nav > button, .crm-navegacao .aba, .jor-abas .jor-aba) {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 44px;
        min-height: 44px;
        margin: 0 0 -1px;
        padding: 0 12px;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 10px 10px 0 0;
        background: transparent;
        box-shadow: none;
        color: var(--hn-mudo);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0;
        white-space: nowrap;
        text-shadow: none;
        transition: color .15s ease, background-color .15s ease, border-color .15s ease;
    }

    html.hub-nav-on body :is(.tabs .tab, nav#nav > button, .crm-navegacao .aba, .jor-abas .jor-aba):hover {
        background: var(--hn-hover);
        color: var(--hn-tx);
        transform: none;
    }

    html.hub-nav-on body :is(.tabs .tab.active, nav#nav > button.on, .crm-navegacao .aba.on, .jor-abas .jor-aba[aria-current="page"]) {
        background: transparent;
        border-bottom-color: var(--hn-aba, var(--hub-here, var(--hub-metas, #2f6df6)));
        color: var(--hn-tx);
        font-weight: 700;
        box-shadow: none;
    }

    /* Dez abas não cabem em 1220px (o Marketing tem dez). A rolagem já
       existia, mas sem barra ninguém sabia que havia mais: nas bordas por
       onde ainda dá para rolar, a barra esmaece. Só onde a linha de tempo de
       rolagem existe e só quando ela transborda; sem transbordo o
       temporizador fica inativo e as variáveis ficam em 0. */
    @property --hub-nav-borda-e {
        syntax: "<length>";
        inherits: false;
        initial-value: 0px;
    }

    @property --hub-nav-borda-d {
        syntax: "<length>";
        inherits: false;
        initial-value: 0px;
    }

    @keyframes hub-nav-borda-abas {
        0%   { --hub-nav-borda-e: 0px;  --hub-nav-borda-d: 32px; }
        4%   { --hub-nav-borda-e: 32px; --hub-nav-borda-d: 32px; }
        96%  { --hub-nav-borda-e: 32px; --hub-nav-borda-d: 32px; }
        100% { --hub-nav-borda-e: 32px; --hub-nav-borda-d: 0px; }
    }

    @supports (animation-timeline: scroll()) {
        html.hub-nav-on body :is(.tabs, nav#nav, .jor-abas),
        html.hub-nav-on body .crm-navegacao .abas {
            animation: hub-nav-borda-abas linear both;
            animation-timeline: scroll(self inline);
            -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hub-nav-borda-e), #000 calc(100% - var(--hub-nav-borda-d)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--hub-nav-borda-e), #000 calc(100% - var(--hub-nav-borda-d)), transparent 100%);
        }
    }

    /* A pastilha do ícone voltou à cor do módulo: na pílula azul cheia ela
       virava vidro branco (o hub-chrome.css, seção 4), e aqui não há pílula. */
    html.hub-nav-on body :is(.tabs .tab.active, nav#nav > button.on) > .ui-icon.ui-icon {
        background: var(--hub-here, var(--hub-metas));
    }

    /* Jornadas, Monitor e Comercial não têm cor de módulo no hub-chrome.css (a
       `--hub-here` é o que pinta a pastilha dos ícones, e ela não deve mudar
       aqui): o traço da aba ativa ganha a cor que a trilha já dá a eles. */
    html.hub-nav-on body[data-hub="jornadas"] { --hn-aba: var(--hub-midia, #0D9488); }
    html.hub-nav-on body[data-hub="monitor"] { --hn-aba: var(--hub-ink, #64748B); }
    html.hub-nav-on body[data-hub="comercial"] { --hn-aba: var(--hub-comercial, #E11D48); }
    html.hub-nav-on body[data-hub="vazkclub"] { --hn-aba: var(--hub-vazkclub, #CA8A04); }
    html.hub-nav-on body[data-hub="participantes"] { --hn-aba: var(--hub-participantes, #DB2777); }
    html.hub-nav-on body[data-hub="transmissao"] { --hn-aba: var(--hub-transmissao, #65A30D); }

    /* A etiqueta de contagem da aba (Jornadas) era branca sobre a pílula
       cheia; sem a pílula, volta à cor própria dela. */
    html.hub-nav-on body .jor-abas .jor-aba[aria-current="page"] .selo {
        background: var(--espera-bg);
        color: var(--espera);
    }

    /* O CRM repete o nome da aba num título de seção logo abaixo. Com a
       aba sublinhada dizendo onde a pessoa está, é a mesma coisa duas
       vezes. */
    html.hub-nav-on body .crm-contexto {
        display: none;
    }

    /* ---------------------------------------------------------
       2.6 A gaveta "Mais"
       ---------------------------------------------------------
       O item "Mais" da trilha aciona o botão Opções, e a gaveta
       que ele abre deixa de ser uma folha lateral e vira um balão
       ancorado embaixo, à esquerda, acima do próprio "Mais" — o
       menu do Instagram. Dentro é a mesma gaveta de sempre: tema,
       Modo TV, ações do painel e o chip com a saída.

       O fundo continua existindo (é ele que recebe o clique de
       fora e fecha), só não escurece mais nada.
       --------------------------------------------------------- */
    html.hub-nav-on .ios-menu-fundo {
        background: transparent;
    }

    /* `bottom: 66px`: acima do próprio item "Mais" (12px de respiro da
       trilha + 46px do item + 8px de folga), como o balão do Instagram. */
    html.hub-nav-on .ios-menu {
        inset: auto auto 66px 12px;
        width: 340px;
        max-height: calc(100vh - 78px);
        border: 1px solid var(--hn-fio);
        border-radius: 18px;
        box-shadow: 0 28px 64px -24px rgba(15, 23, 42, .55);
        opacity: 0;
        transform: translateY(10px) scale(.98);
        transform-origin: 0 100%;
        transition:
            transform .22s cubic-bezier(.22, 1, .36, 1),
            opacity .16s ease,
            visibility .22s ease;
    }

    html.hub-nav-on.ios-menu-aberto .ios-menu {
        opacity: 1;
        transform: none;
    }

    /* ---------------------------------------------------------
       2.7 Telão, arrasto e impressão
       ---------------------------------------------------------
       Arrastando um cartão (Tarefas e CRM, que dividem o mesmo
       código de arrastar e põem `arrastando` no <body>), a trilha
       não abre: levar o cartão até a coluna da esquerda passaria o
       mouse por cima dela, e ela abriria justo em cima da coluna
       de destino. Sem pointer-events ela não recebe o :hover.
       --------------------------------------------------------- */
    html.hub-nav-on body.tv-mode {
        padding-left: 0;
    }

    html.hub-nav-on body.tv-mode .hub-nav {
        display: none;
    }

    html.hub-nav-on body.arrastando .hub-nav {
        pointer-events: none;
    }
}

/* =========================================================
   3. A BARRA DE BAIXO — o complemento exato da trilha
   ========================================================= */
@media not all and (min-width: 1024px) and (hover: hover) {

    /* ---------------------------------------------------------
       3.1 A barra
       ---------------------------------------------------------
       Fixa na base, com a folga do iPhone (a linha de início)
       dentro dela, e a página ganha o mesmo tanto de espaço no fim:
       sem isso o último cartão ficava atrás da barra.
       --------------------------------------------------------- */
    html.hub-nav-on {
        --hub-nav-h: 64px;
    }

    html.hub-nav-on .hub-nav {
        --hn-tile: 30px;
        inset: auto 0 0 0;
        flex-direction: row;
        align-items: stretch;
        height: calc(var(--hub-nav-h) + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        box-shadow: inset 0 1px 0 var(--hn-fio);
        transition: transform .2s ease;
    }

    html.hub-nav-on body {
        padding-bottom: calc(var(--hub-nav-h) + env(safe-area-inset-bottom, 0px));
    }

    /* Só cabem as abas e o "Mais". A marca, os nomes de grupo, os módulos
       que foram para a gaveta e as ações que já vivem no cabeçalho (KatIA e
       sino) ou dentro dela (perfil) ficam de fora. */
    html.hub-nav-on .hub-nav-marca,
    html.hub-nav-on .hub-nav-grupo,
    html.hub-nav-on .hub-nav .hub-nav-item[data-nav-extra],
    html.hub-nav-on .hub-nav .hub-nav-fim .hub-nav-item:not([data-nav-acao="mais"]) {
        display: none;
    }

    /* Os dois blocos deixam de ser caixas: os itens viram filhos diretos da
       barra e a dividem em partes iguais, seja qual for o número de abas. */
    html.hub-nav-on .hub-nav-lista,
    html.hub-nav-on .hub-nav-fim {
        display: contents;
    }

    /* ---------------------------------------------------------
       3.2 A aba
       ---------------------------------------------------------
       [ícone] em cima, rótulo embaixo. Só a aba ativa leva a
       pastilha colorida e o rótulo em negrito; as outras são o
       desenho solto, apagado — o mesmo peso visual da barra do
       Instagram, e é o que o desenho de referência mostra.
       --------------------------------------------------------- */
    html.hub-nav-on .hub-nav .hub-nav-item {
        flex: 1 1 0;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        height: auto;
        padding: 6px 2px;
        border-radius: 0;
        color: var(--hn-mudo);
        font-size: 12px;
        font-weight: 600;
    }

    html.hub-nav-on .hub-nav .hub-nav-item:active {
        opacity: .7;
    }

    html.hub-nav-on .hub-nav .hub-nav-ic {
        background: transparent;
        color: var(--hn-mudo);
    }

    html.hub-nav-on .hub-nav .hub-nav-ic svg {
        width: 24px;
        height: 24px;
    }

    html.hub-nav-on .hub-nav .hub-nav-item:is([aria-current="page"], [data-nav-atual]) {
        color: var(--hn-tx);
        font-weight: 700;
    }

    /* O "Mais" aceso (o painel de agora mora na gaveta) não tem cor de
       módulo: leva o cinza-ardósia do Monitor e do tema. */
    html.hub-nav-on .hub-nav [data-nav-acao="mais"][data-nav-atual] {
        --hn-tint: var(--hub-ink, #64748B);
    }

    html.hub-nav-on .hub-nav .hub-nav-item:is([aria-current="page"], [data-nav-atual]) .hub-nav-ic {
        background: var(--hn-tint, var(--hn-tx));
        color: #fff;
    }

    html.hub-nav-on .hub-nav .hub-nav-item:is([aria-current="page"], [data-nav-atual]) .hub-nav-ic svg {
        width: 17px;
        height: 17px;
        fill: #fff;
    }

    /* Aqui o rótulo é o que se lê, e cabe: nada de sumir nem de cortar seco. */
    html.hub-nav-on .hub-nav .hub-nav-tx {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Teclado do celular aberto: a barra só tiraria espaço (no Android ela
       sobe junto com o teclado e come metade da tela). O hub-nav.js põe a
       classe enquanto um campo de texto tem o foco. */
    html.hub-nav-on.hub-nav-teclado .hub-nav {
        transform: translateY(100%);
        pointer-events: none;
    }

    html.hub-nav-on.hub-nav-teclado body {
        padding-bottom: 0;
    }

    /* Celular deitado: 64px de barra numa tela de ~390 de altura é demais.
       Ícone e rótulo lado a lado, e a barra encolhe. */
    @media (orientation: landscape) and (max-height: 480px) {
        html.hub-nav-on {
            --hub-nav-h: 46px;
        }

        html.hub-nav-on .hub-nav {
            --hn-tile: 26px;
        }

        html.hub-nav-on .hub-nav .hub-nav-item {
            flex-direction: row;
            gap: 8px;
            padding: 4px;
        }

        html.hub-nav-on .hub-nav .hub-nav-ic svg {
            width: 22px;
            height: 22px;
        }

        html.hub-nav-on .hub-nav .hub-nav-item:is([aria-current="page"], [data-nav-atual]) .hub-nav-ic svg {
            width: 15px;
            height: 15px;
        }
    }

    /* ---------------------------------------------------------
       3.3 O cabeçalho, uma linha só
       ---------------------------------------------------------
       Sem a faixa de módulos e sem o botão "Opções", o cabeçalho
       que gastava um cartão alto (marca, título, subtítulo e uma
       linha de botões que quebrava) cabe em UMA linha: logo, título
       e os dois atalhos — sino e KatIA, esta só com o ícone. O
       subtítulo sai: é o que já sumia na primeira rolagem.
       --------------------------------------------------------- */
    html.hub-nav-on .hub-paineis,
    html.hub-nav-on header .ios-menu-botao,
    html.hub-nav-on header .sub {
        display: none;
    }

    html.hub-nav-on header {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 12px 14px;
    }

    html.hub-nav-on header .header-brand-wrap {
        flex: 1 1 0;
        gap: 12px;
        min-width: 0;
    }

    html.hub-nav-on header .logo-box {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 13px;
    }

    html.hub-nav-on header h1 {
        font-size: 20px;
        line-height: 1.15;
    }

    /* A KatIA, quadrada como o sino. O rótulo continua no DOM só para o
       leitor de tela — sem ele o botão ficaria sem nome. */
    html.hub-nav-on header .hub-katia {
        justify-content: center;
        gap: 0;
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
    }

    html.hub-nav-on header .hub-katia>span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* ---------------------------------------------------------
       3.4 A gaveta "Mais", como folha de baixo
       ---------------------------------------------------------
       O "Mais" aciona o botão Opções, e a gaveta que ele abre deixa
       de ser uma folha lateral: sobe da base, por cima da barra. No
       topo, os módulos que não couberam nas abas; embaixo, o de
       sempre — ações do painel, tema, Modo TV e o chip com a saída.
       --------------------------------------------------------- */
    html.hub-nav-on .ios-menu {
        inset: auto 0 0 0;
        width: auto;
        max-width: none;
        max-height: 86vh;
        max-height: 86dvh;
        padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
        border: 0;
        border-top: 1px solid var(--hn-fio);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -24px 60px -28px rgba(15, 23, 42, .6);
        transform: translateY(101%);
    }

    html.hub-nav-on.ios-menu-aberto .ios-menu {
        transform: none;
        animation: hub-nav-folha .26s cubic-bezier(.22, 1, .36, 1);
    }

    @keyframes hub-nav-folha {
        from {
            opacity: 0;
            transform: translateY(36px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    html.hub-nav-on .hub-nav-mais {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    html.hub-nav-on .hub-nav-mais-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 52px;
        padding: 8px 12px 8px 10px;
        border: 1px solid var(--hn-fio);
        border-radius: 16px;
        color: var(--hn-tx);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    html.hub-nav-on .hub-nav-mais-item[aria-current="page"] {
        border-color: color-mix(in srgb, var(--hn-tint, var(--hn-tx)) 55%, transparent);
        background: color-mix(in srgb, var(--hn-tint, var(--hn-tx)) var(--hn-ativo), transparent);
        font-weight: 700;
    }

    html.hub-nav-on .hub-nav-mais-item .hub-nav-ic {
        display: grid;
        flex: none;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--hn-tint, transparent);
    }

    html.hub-nav-on .hub-nav-mais-item .hub-nav-ic svg {
        width: 56%;
        height: 56%;
        fill: #fff;
    }

    /* ---------------------------------------------------------
       3.5 O que fica na base da tela
       ---------------------------------------------------------
       Avisos e toasts nascem a 14–26px do fundo, e a barra ocupa os
       primeiros 64: sairiam por cima dela, escondendo as abas. Sobem
       para logo acima. Os ids são os que os painéis usam (#toast,
       #status) e o da casca (#vazkAviso); o peso de um id vence o
       `bottom` de qualquer regra de classe.
       --------------------------------------------------------- */
    html.hub-nav-on #toast,
    html.hub-nav-on #status,
    html.hub-nav-on #vazkAviso {
        bottom: calc(var(--hub-nav-h) + env(safe-area-inset-bottom, 0px) + 14px);
    }

    html.hub-nav-on body.tv-mode {
        padding-bottom: 0;
    }

    html.hub-nav-on body.tv-mode .hub-nav {
        display: none;
    }

    html.hub-nav-on body.arrastando .hub-nav {
        pointer-events: none;
    }
}

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

    html.hub-nav-on .hub-nav,
    html.hub-nav-on .hub-nav .hub-nav-tx,
    html.hub-nav-on .hub-nav-grupo::before,
    html.hub-nav-on .hub-nav-grupo>span,
    html.hub-nav-on .ios-menu {
        transition: none;
        animation: none;
    }
}

@media print {

    .hub-nav {
        display: none;
    }

    html.hub-nav-on body {
        padding-left: 0;
        padding-bottom: 0;
    }
}

/* =========================================================
   4. A BUSCA GLOBAL (Ctrl+K)
   ---------------------------------------------------------
   Par da seção "BUSCA GLOBAL" do hub-nav.js. Uma caixa central
   sobre um fundo escurecido, igual nos nove painéis e nas duas
   apresentações da barra.

   - z-index 1100: acima de tudo o que já existe (modais 50/60,
     gaveta 110/120, KatIA 1000). A caixa é chamada de dentro de
     qualquer tela, inclusive com um modal aberto por baixo.
   - Todo seletor começa em `html.hub-nav-on`: a caixa só existe
     depois da barra, e a folha continua sem tocar em nada que
     não seja dela.
   - O <input> e os <button> levam reset inteiro: os painéis
     estilizam `input` e `button` soltos (borda, fundo, altura).
   - 16px no campo é de propósito: abaixo disso o iPhone dá zoom
     na página inteira ao focar.
   --------------------------------------------------------- */
html.hub-nav-on .hub-nav-busca {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: rgba(8, 14, 28, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

html.hub-nav-on .hub-nav-busca[hidden] {
    display: none;
}

html.hub-nav-on .hub-nav-busca-caixa {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: min(560px, 76vh);
    max-height: min(560px, 76dvh);
    overflow: hidden;
    border: 1px solid var(--hn-fio);
    border-radius: 16px;
    background: var(--hn-fundo);
    box-shadow: 0 24px 64px -16px rgba(8, 14, 28, .6);
    color: var(--hn-tx);
    font-family: inherit;
}

html.hub-nav-on .hub-nav-busca-caixa:focus {
    outline: none;
}

html.hub-nav-on .hub-nav-busca-titulo,
html.hub-nav-on .hub-nav-busca-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

html.hub-nav-on .hub-nav-busca-campo {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--hn-fio);
}

html.hub-nav-on .hub-nav-busca-campo:focus-within {
    box-shadow: inset 0 -2px 0 var(--foco, #2563EB);
}

html.hub-nav-on .hub-nav-busca-lupa {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--hn-mudo);
}

html.hub-nav-on .hub-nav-busca-lupa svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

html.hub-nav-on .hub-nav-busca-caixa .hub-nav-busca-input {
    appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--hn-tx);
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    outline: none;
}

html.hub-nav-on .hub-nav-busca-caixa .hub-nav-busca-input::placeholder {
    color: var(--hn-mudo);
    opacity: 1;
}

html.hub-nav-on .hub-nav-busca-esc,
html.hub-nav-on .hub-nav-busca-rodape kbd {
    display: inline-block;
    min-width: 22px;
    padding: 2px 6px;
    border: 1px solid var(--hn-fio);
    border-radius: 6px;
    background: var(--hn-hover);
    color: var(--hn-mudo);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

html.hub-nav-on .hub-nav-busca-lista {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 8px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

html.hub-nav-on .hub-nav-busca-tit {
    padding: 12px 10px 4px;
    color: var(--hn-mudo);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.hub-nav-on .hub-nav-busca-aviso,
html.hub-nav-on .hub-nav-busca-vazio {
    padding: 10px;
    color: var(--hn-mudo);
    font-size: 14px;
}

html.hub-nav-on .hub-nav-busca-vazio {
    padding: 28px 10px;
    text-align: center;
}

html.hub-nav-on .hub-nav-busca-caixa .hub-nav-busca-op {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--hn-tx);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transform: none;
    -webkit-tap-highlight-color: transparent;
}

html.hub-nav-on .hub-nav-busca-caixa .hub-nav-busca-op.hub-nav-busca-ativo {
    background: var(--hn-hover);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    html.hub-nav-on .hub-nav-busca-caixa .hub-nav-busca-op.hub-nav-busca-ativo {
        background: color-mix(in srgb, var(--hn-tint, var(--hn-tx)) var(--hn-ativo), transparent);
    }
}

html.hub-nav-on .hub-nav-busca-caixa .hub-nav-busca-op:focus-visible {
    outline: 2px solid var(--foco, #2563EB);
    outline-offset: -2px;
}

/* A pastilha do ícone: a cor do módulo, como na trilha. */
html.hub-nav-on .hub-nav-busca-ic {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--hn-tint, var(--hub-ink, #64748B));
    color: #fff;
}

html.hub-nav-on .hub-nav-busca-ic svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
}

html.hub-nav-on .hub-nav-busca-tx {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

html.hub-nav-on .hub-nav-busca-tx b,
html.hub-nav-on .hub-nav-busca-tx small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.hub-nav-on .hub-nav-busca-tx b {
    font-weight: 600;
}

html.hub-nav-on .hub-nav-busca-tx small {
    color: var(--hn-mudo);
    font-size: 12px;
    font-weight: 500;
}

html.hub-nav-on .hub-nav-busca-tipo {
    flex: none;
    color: var(--hn-mudo);
    font-size: 12px;
    font-weight: 600;
}

html.hub-nav-on .hub-nav-busca-rodape {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--hn-fio);
    color: var(--hn-mudo);
    font-size: 12px;
}

html.hub-nav-on .hub-nav-busca-rodape span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* A linha do topo da gaveta do "Mais": só na barra de baixo (abaixo). */
html.hub-nav-on .hub-nav-busca-gaveta {
    display: none;
}

/* Sem mouse não há tecla para dizer: o rodapé de atalhos e o "Esc" saem. */
@media (hover: none) {

    html.hub-nav-on .hub-nav-busca-rodape,
    html.hub-nav-on .hub-nav-busca-esc {
        display: none;
    }
}

/* No celular a caixa sobe para perto do topo: o teclado ocupa a metade de
   baixo, e uma caixa a 12% do alto ficava com os resultados por trás dele. */
@media (max-width: 640px) {

    html.hub-nav-on .hub-nav-busca {
        padding: 8px 8px 0;
    }

    html.hub-nav-on .hub-nav-busca-caixa {
        max-height: 70vh;
        max-height: 70dvh;
    }
}

@media not all and (min-width: 1024px) and (hover: hover) {

    html.hub-nav-on .hub-nav-busca-gaveta {
        appearance: none;
        display: flex;
        align-items: center;
        gap: 12px;
        width: calc(100% - 24px);
        min-height: 48px;
        margin: 4px 12px 0;
        padding: 6px 10px;
        border: 1px solid var(--hn-fio);
        border-radius: 12px;
        background: var(--hn-hover);
        box-shadow: none;
        color: var(--hn-tx);
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

    html.hub-nav-on .hub-nav-busca-gaveta:focus-visible {
        outline: 2px solid var(--foco, #2563EB);
        outline-offset: 2px;
    }

    html.hub-nav-on .hub-nav-busca-gaveta .hub-nav-busca-ic {
        background: transparent;
        color: var(--hn-mudo);
    }
}

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

    html.hub-nav-on .hub-nav-busca {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media print {

    .hub-nav-busca {
        display: none;
    }
}