/* 10-topbar.css — barra superior: marca, busca, navegação, mapa base
   Extraído de index.html por split_css.py.
   O NÚMERO no nome é a posição na cascata: os arquivos são
   carregados em ordem alfabética de nome, e é essa ordem que
   decide quem ganha o desempate entre regras de mesma
   especificidade. Não renumere sem conferir o que passa a
   sobrescrever o quê. */
    /* ════════════════════════════════════════════
       TOPBAR GLOBAL — +4D Urban Intelligence
    ════════════════════════════════════════════ */
    #topbar {
      height: var(--topbar-h);
      flex-shrink: 0;
      background: var(--glass);
      backdrop-filter: blur(28px) saturate(160%);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      border-bottom: 1px solid var(--border);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 20px rgba(0, 0, 0, 0.35);
      display: flex;
      align-items: center;
      padding: 0;
      z-index: 30;
      position: relative;
    }

    #topbar::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(56,189,248,0.08) 50%, transparent 100%);
      pointer-events: none;
    }

    /* Logo — largura mínima alinhada com sidebar */
    .tb-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 16px 0 6px;   /* a seta de saída, à esquerda, já traz o respiro */
      min-width: 0;
      height: 100%;
      text-decoration: none;
      border-right: 1px solid rgba(255, 255, 255, 0.05);
      flex-shrink: 0;
      cursor: pointer;
      background: transparent;
      border-top: none; border-bottom: none; border-left: none;
      transition: background 0.18s;
      position: relative;
      font-family: inherit;
      color: inherit;
    }
    .tb-logo:hover { background: rgba(56,189,248, 0.04); }
    .tb-logo:hover .tb-logo-prefix { color: rgba(200, 220, 240, 0.9); }
    .tb-logo:hover .tb-logo-badge { filter: brightness(1.08); }
    .tb-logo:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(56,189,248, 0.35);
    }
    .tb-logo:active { background: rgba(56,189,248, 0.08); }
    .tb-logo .tb-logo-prefix,
    .tb-logo .tb-logo-title,
    .tb-logo .tb-logo-badge,
    .tb-logo svg { transition: color 0.18s, filter 0.18s; }

    /* UMA LINHA. Empilhados, os dois textos definiam a altura do header
       inteiro — 74px para caber duas linhas de 10,5 e 14,5px com respiro. O
       filete entre eles faz o trabalho que a quebra de linha fazia: separar o
       programa do produto. */
    .tb-logo-texts {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 9px;
      line-height: 1;
      min-width: 0;
    }
    .tb-logo-sep {
      width: 1px;
      height: 13px;
      background: rgba(255, 255, 255, 0.16);
      flex-shrink: 0;
    }

    /* Eyebrow no padrão .t-lbl do sistema: Inter 800, 10px, tracking 4px, ciano */
    .tb-logo-prefix {
      font-family: var(--body);
      font-weight: 800;
      font-size: 9.5px;
      color: var(--cyan);
      letter-spacing: 0.24em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* "+4D" dentro do hexágono. Branco puro, não o gradiente do contorno: a
       34px o texto tem ~13px de caixa, e gradiente nesse corpo vira mancha
       cinza. O contorno fica com o gradiente, o miolo com o contraste. */
    .tb-mark-txt {
      font-family: var(--display);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: -0.5px;
      fill: #eaf6fe;
    }
    .tb-logo:hover .tb-mark-txt { fill: #ffffff; }

    /* Wordmark "+DADOS": gradiente de dados (ciano → esmeralda).
       Era "+4D" a 28px. Seis letras no lugar de três dobrariam a largura do
       bloco da marca, então o corpo cai para 21px — a MANCHA de tinta fica
       equivalente, que é o que faz o wordmark pesar igual ao lado do hexágono.
       O tracking sai de -0.02em para 0: caixa-alta em Space Grotesk fecha
       demais com tracking negativo, e "DADOS" tem dois D e um A que colavam. */
    .tb-logo-badge {
      font-family: var(--display);
      font-weight: 800;
      /* 17px deixava o nome do produto MENOR que os ícones utilitários ao
         lado (17px de desenho numa caixa de 30). O wordmark é a única coisa
         no topo que diz o que é isto — ele não pode ser o menor elemento da
         faixa. 23px o põe acima de tudo o mais, que é onde ele pertence. */
      font-size: 23px;
      background: var(--grad-dados);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 0;
      line-height: 1;
      /* `margin-left:auto` empurrava o +DADOS para a ponta do bloco da marca,
         para ficar depois do "Dados Urbanos". Sem aquele texto, ele passa a ser
         o terceiro item da própria linha e segue o `gap` dela. */
      align-self: center;
      white-space: nowrap;
    }

    /* Assinatura institucional: fica ao lado da marca, e não dentro dela.
       Isso preserva a leitura "Distrito da Inovação · +DADOS" como nome do
       produto e dá à Secretaria o peso de autoria que ela precisa. */
    .tb-institution {
      display: flex;
      flex-direction: column;
      gap: 3px;
      width: 286px;
      min-width: 0;
      padding: 0 18px;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--t2);
      line-height: 1.15;
      flex-shrink: 0;
    }
    .tb-institution-city {
      color: var(--cyan);
      font-family: var(--body);
      font-size: 8.5px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .tb-institution-name {
      font-family: var(--body);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    /* ── ETIQUETA DE ATUALIZAÇÃO ────────────────────────
       Fica entre a marca e a busca, e não no canto das ações: ali ela é
       legenda do produto ("esta publicação, desta data"), enquanto entre os
       botões seria lida como mais um controle — e ela não clica em nada.

       9px, --t3, sem fundo e sem moldura. É informação de procedência: tem
       de estar ao alcance de quem procura, sem disputar atenção com quem
       não procura. Pílula com borda pesaria mais que o nome do produto ao
       lado, que é exatamente o que não pode acontecer. */
    .tb-updated {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      padding-left: 14px;
      font-family: var(--body);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--t3);
      white-space: nowrap;
      cursor: default;
    }
    /* A data em --t2, meio tom acima do rótulo: dentro de uma linha só de
       texto miúdo, é o número que a pessoa veio buscar. Tabular porque a
       etiqueta troca de data a cada publicação e a largura não deve dançar. */
    .tb-updated-date {
      color: var(--t2);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
    }

    /* O ponto verde é o que faz a linha ser lida como estado ("no ar, desta
       data") em vez de mais uma linha de texto institucional. Sem pulsar: o
       dado é estático até a próxima publicação, e animação permanente no
       topo é ruído que não se desliga. */
    .tb-updated-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--emerald);
      box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.14);
      flex-shrink: 0;
    }

    /* Nome do produto: Space Grotesk, como todo título do sistema */
    /* `.tb-logo-title` ("Dados Urbanos") saiu do markup — ver a nota no
       index.html. A regra fica, sem uso, porque o seletor aparece na lista de
       hover do .tb-logo logo abaixo; quem for removê-la de vez tira dos dois
       lugares. */
    .tb-logo-title {
      font-family: var(--display);
      font-size: 12.5px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* Seta de saída da plataforma — alvo de clique próprio, à esquerda da
       marca. Discreta de propósito: não compete com o logo, que agora é o
       botão de voltar ao Mapa. */
    .tb-back {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 4px 0 14px;
      text-decoration: none;
      font-family: var(--display);
      font-size: 18px;
      line-height: 1;
      color: rgba(255,255,255,.72);
      flex-shrink: 0;
      transition: color .18s, transform .18s;
    }
    .tb-back:hover { color: var(--cyan); transform: translateX(-2px); }
    .tb-back:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(56,189,248, 0.35);
    }

    /* Busca Global */
    /* 560px sobravam: o campo terminava em vazio muito depois do fim do
       texto do placeholder, e a largura extra saía da folga entre a marca e a
       navegação. 460 cabe a frase inteira ("…lote e mz/ueu/qtr") com respiro,
       e devolve 100px ao topo. */
    .tb-search-wrap {
      flex: 1;
      max-width: 430px;
      margin: 0 18px;
      position: relative;
    }

    .tb-search-row {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 10px;
      transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
    }

    .tb-search-wrap:focus-within .tb-search-row {
      background: rgba(255, 255, 255, 0.055);
      border-color: rgba(255, 255, 255, 0.13);
      box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
    }

    .tb-search-icon {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.55);
      padding: 0 9px 0 13px;
      flex-shrink: 0;
      pointer-events: none;
      line-height: 1;
      transition: color 0.22s;
    }

    .tb-search-wrap:focus-within .tb-search-icon { color: #ffffff; }

    .tb-search-input {
      flex: 1;
      background: transparent;
      border: none;
      color: #ffffff;
      font-family: var(--body);
      font-size: 13px;
      padding: 8px 13px 8px 0;
      outline: none;
    }

    .tb-search-input::placeholder {
      color: rgba(255,255,255,.7);
      font-size: 12.5px;
      letter-spacing: 0.01em;
    }

    .tb-search-wrap .sb-dropdown {
      min-width: 420px;
      top: calc(100% + 5px);
      left: 0;
      right: auto;
    }

    /* Navegação Principal */
    /* A navegação era uma fileira de botões soltos sobre o vidro do topo: o
       ativo desenhava uma caixa e os outros não desenhavam nada, então não se
       lia como um GRUPO de opções — lia-se como um botão aceso e três textos.
       Agora é um segmentado: uma cápsula de vidro contém as opções, e a
       seleção é uma pastilha que se move dentro dela. É a mesma peça das abas
       do painel do lote, na escala do topo. */
    /* `margin-left:auto` AQUI e em .tb-actions — são os dois que resolvem a
       sobra da faixa.
       A busca tem `flex:1` com teto de 430px. Passado o teto ela para de
       crescer, e a folga que sobra não vai para ninguém: com o
       `justify-content:flex-start` do #topbar, ela se acumula inteira DEPOIS
       do último item. Numa tela de 1920 isso eram ~350px de vazio colados na
       borda direita, com todo o conteúdo empurrado para a esquerda.
       Dois `auto` repartem essa folga em duas frestas iguais, e a faixa passa
       a ler como TRÊS grupos: marca e busca à esquerda, navegação no meio,
       ações na borda direita. Em tela estreita os dois colapsam para zero e
       tudo volta a se encostar, sem regra de media query. */
    .tb-nav {
      display: flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
      margin-left: auto;
      margin-right: 10px;
      padding: 3px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: var(--glass-edge);
    }

    .tb-nav-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 13px;
      border-radius: 9px;
      border: 1px solid transparent;
      background: transparent;
      /* Inativo em --t2, não em branco puro: com todos em #fff o item ativo
         só se distinguia pela caixa atrás dele, e a fileira inteira pesava
         igual. O contraste do texto secundário continua acima de 7:1. */
      color: var(--t2);
      font-family: var(--body);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
      white-space: nowrap;
      letter-spacing: 0.01em;
    }

    .tb-nav-btn:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.07);
    }

    /* Explorar — ação primária em destaque */
    /* `tb-primary` (o Mapa, que é a casa) e `.active` (o módulo aberto) são o
       MESMO estado para quem lê: "é aqui que você está". Tinham duas
       aparências — 12%/30% contra 10%/22% e pesos diferentes —, e a diferença
       não significava nada. Uma pastilha só. */
    .tb-nav-btn.tb-primary,
    .tb-nav-btn.active {
      color: var(--cyan);
      background:
        var(--glass-sheen),
        linear-gradient(180deg, rgba(56,189,248,.20), rgba(56,189,248,.10));
      border-color: rgba(56,189,248, 0.34);
      font-weight: 700;
      box-shadow: var(--glass-edge), 0 4px 12px -6px var(--glow);
    }

    .tb-nav-btn.tb-primary:hover {
      color: rgba(100, 210, 255, 0.98);
      background: rgba(56,189,248, 0.15);
      border-color: rgba(56,189,248, 0.28);
    }

    .tb-nav-btn.active {
      color: var(--cyan);
      background: rgba(56,189,248, 0.10);
      border-color: rgba(56,189,248, 0.22);
    }

    /* "Em breve": tem que ler como desabilitado, então fica de propósito
       abaixo dos demais — foi poupado da varredura que clareou os cinzas. */
    /* "Insights" ainda não existe. Cinza e sem cursor ele lia como botão
       QUEBRADO — a mesma forma dos vizinhos, sem responder ao mouse. O selo
       diz o que está acontecendo, e o item deixa de parecer defeito. */
    .tb-nav-btn.tb-nav-soon {
      color: var(--t3);
      cursor: default;
      pointer-events: none;
      font-weight: 500;
    }
    .tb-nav-btn.tb-nav-soon::after {
      content: 'em breve';
      font-family: var(--display);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--t3);
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 5px;
      padding: 2px 5px;
      line-height: 1;
    }

    /* Dentro da cápsula o filete precisa de mais respiro do que tinha e de
       menos altura: colado nos botões ele parecia borda de um deles. */
    .tb-nav-divider {
      width: 1px;
      height: 18px;
      background: rgba(255, 255, 255, 0.09);
      margin: 0 7px;
      flex-shrink: 0;
    }

    /* ── Mapa base: gatilho + popover ────────────────────────────────────
       O gatilho é um .tb-icon-btn como os outros do topo; só ganha a seta e
       o ícone do estilo em uso, para dizer o estado atual sem abrir. */
    .tb-base {
      position: relative;
      flex-shrink: 0;
    }

    /* O único do grupo que não é círculo: ele carrega o chevron do menu.
       Pílula, para pertencer à cápsula sem fingir que é um ícone só. */
    .tb-base-btn {
      width: auto;
      min-width: 40px;
      gap: 2px;
      padding: 0 6px 0 8px;
      border-radius: 999px;
    }

    /* 23 px, não 18: os vizinhos deste botão são emojis (🔔 📖) renderizados a
       font-size 18, e o glifo de um emoji ocupa bem mais que a caixa nominal.
       Um SVG de 18 px de traço fino ao lado deles parece miúdo — a comparação
       é óptica, não numérica. `flex-shrink: 0` porque o ícone é item de flex e
       não deve ceder espaço para a seta. */
    .tb-base-btn svg {
      width: 23px;
      height: 23px;
      display: block;
      flex-shrink: 0;
    }

    /* Mapa base diferente do padrão: o botão fica aceso. Com ícone fixo, é o
       que resta para indicar estado sem abrir o menu. */
    .tb-base-btn.alterado {
      color: var(--cyan);
      border-color: rgba(56, 189, 248, 0.28);
      background: rgba(56, 189, 248, 0.10);
    }

    .tb-base-chev {
      font-size: 11px;
      line-height: 1;
      color: rgba(200, 220, 240, 0.7);
      transition: transform 0.18s;
      flex-shrink: 0;
    }

    .tb-base-btn[aria-expanded="true"] {
      color: var(--cyan);
      background: rgba(56,189,248, 0.12);
      border-color: rgba(56,189,248, 0.28);
    }

    .tb-base-btn[aria-expanded="true"] .tb-base-chev { transform: rotate(180deg); }

    .tb-base-menu {
      position: absolute;
      top: calc(100% + 7px);
      right: 0;
      z-index: 60;
      /* 186px cabiam quando todo rótulo tinha uma palavra e toda fonte era
         "Esri" ou "CARTO". "Satélite híbrido" com "Esri · CARTO" ao lado não
         cabe: o rótulo quebrava em duas linhas e só aquele item ficava 15px
         mais alto — no meio de uma lista, um item mais alto lê como destaque.
         Alargar resolve sem encurtar nem o nome nem a atribuição. */
      min-width: 228px;
      padding: 5px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      border-radius: 12px;
      background: rgba(10, 20, 34, 0.97);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(14px);
    }

    .tb-base-menu[hidden] { display: none; }

    .tb-base-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 10px;
      border: 1px solid transparent;
      border-radius: 9px;
      background: transparent;
      color: rgba(228, 238, 250, 0.9);
      font-family: inherit;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .tb-base-item .ico { font-size: 16px; line-height: 1; flex-shrink: 0; }

    .tb-base-item .rot { line-height: 1.2; }

    /* Nota do item (ex.: "imagem + vias"): distingue duas opções parecidas sem
       alongar o rótulo principal. */
    .tb-base-item .rot small {
      display: block;
      font-size: 9.5px;
      color: rgba(160, 185, 210, 0.6);
      margin-top: 1px;
    }

    .tb-base-item .fonte {
      margin-left: auto;
      font-family: var(--display);
      font-size: 9px;
      letter-spacing: 0.08em;
      color: rgba(160, 185, 210, 0.6);
      /* Não quebra. A coluna da fonte é estreita e "Esri · CARTO" — duas
         origens, no híbrido — caía para duas linhas, deixando aquele item
         15px mais alto que os outros quatro. Um item mais alto no meio de
         uma lista lê como destaque, e não havia destaque nenhum a comunicar. */
      white-space: nowrap;
      flex-shrink: 0;
    }

    .tb-base-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

    .tb-base-item[aria-checked="true"] {
      color: var(--cyan);
      background: rgba(56,189,248, 0.12);
      border-color: rgba(56,189,248, 0.28);
    }

    /* Ações e ícones utilitários */
    .tb-actions {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 0 16px 0 8px;
      flex-shrink: 0;
      margin-left: auto;
    }

    /* ── CÁPSULA DE FERRAMENTAS ──────────────────────────────────────────
       Mapa base, notificações e manual. Estavam em três pontos diferentes da
       faixa — o mapa base antes de um filete, os outros dois depois do
       LIMPAR —, e nada dizia que eram do mesmo tipo. São: os três abrem uma
       coisa, nenhum altera o que está na tela. Mesma cápsula da navegação, e
       dentro dela os botões são REDONDOS: círculo é a forma que se lê como
       "utilitário" sem precisar de rótulo, e distingue o grupo dos botões de
       texto ao lado sem gastar outra cor. */
    .tb-tools {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: var(--glass-edge);
      flex-shrink: 0;
    }

    /* Os três botões de ícone do topo (mapa base, sino, manual) passam a ter
       a MESMA caixa e o mesmo traço. Antes o de mapa base era SVG e os outros
       dois eram emoji em 18px: três desenhos, três pesos, três cores.
       34px em vez de 38: com os ícones em traço fino a caixa de 38 sobrava em
       volta do desenho e os botões pareciam mais pesados que o "Limpar" ao
       lado, que é a ação de verdade ali. */
    .tb-icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid transparent;
      background: transparent;
      color: var(--t2);
      cursor: pointer;
      transition: color 0.18s, background 0.18s, border-color 0.18s;
      flex-shrink: 0;
    }
    /* Um tamanho de ícone para os três. O de mapa base não declarava largura e
       herdava o padrão de 100% do SVG dentro de um flex — ficava maior que os
       vizinhos por acidente. */
    .tb-icon-btn > svg {
      width: 16px;
      height: 16px;
      display: block;
    }

    .tb-icon-btn:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.09);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .tb-clear-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 13px;
      border-radius: 999px;
      border: 1px solid rgba(239, 68, 68, 0.35);
      background: rgba(239, 68, 68, 0.10);
      color: #fecaca;
      font-family: var(--body);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.18s, border-color 0.18s, background 0.18s;
      letter-spacing: 0.01em;
    }

    .tb-clear-btn:hover {
      border-color: rgba(239, 68, 68, 0.55);
      background: rgba(239, 68, 68, 0.18);
      color: rgba(254, 202, 202, 0.96);
    }

    .tb-clear-icon { font-size: 15px; line-height: 1; }

    .tb-actions-divider {
      width: 1px;
      height: 22px;
      background: rgba(255, 255, 255, 0.05);
      margin: 0 4px;
      flex-shrink: 0;
    }

    /* Microinterações nav */
    .tb-nav-btn svg {
      opacity: 0.9;
      transition: opacity 0.18s;
      flex-shrink: 0;
    }
    .tb-nav-btn:hover svg { opacity: 0.85; }
    .tb-nav-btn.tb-primary svg { opacity: 0.9; }
    .tb-nav-btn.active svg { opacity: 1; }

    .tb-nav-btn.active {
      position: relative;
    }
    .tb-nav-btn.active::after {
      content: '';
      position: absolute;
      bottom: 3px; left: 50%;
      transform: translateX(-50%);
      width: 16px; height: 1px;
      background: rgba(56,189,248, 0.35);
      border-radius: 1px;
    }