/* 94-dash-territorio.css — dashboard do território
   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ê. */
      /* Header congelado no topo (mantém o filtro Distrito Inovação / 4º Distrito sempre visível ao rolar) */
      #dash4-overlay .d2-header.d3-head{position:sticky;top:0;z-index:8;margin-bottom:0;padding:14px 0 12px;
        background:linear-gradient(180deg,rgba(7,11,18,0.98),rgba(7,11,18,0.92) 82%,rgba(7,11,18,0.72));
        backdrop-filter:blur(12px);border-bottom:none;}
      /* O DECK NAO E STICKY, e isso conserta um tremor de tela.
         Enquanto ele era uma fita de ~30px, grudar no topo e condensar ao rolar
         custava ~36px de altura — invisivel. Como deck de meia tela, a mesma
         condensacao tira 428px, e ai vira um LACO: passa do limiar, o deck
         encolhe, a altura do conteudo cai 459px, o navegador reajusta o
         scrollTop para dentro do novo limite, o scrollTop cai abaixo do limiar,
         o deck volta a crescer, o scrollTop sobe de novo. Media do que foi:
         uma troca de estado a cada 16ms, indefinidamente.
         Sem sticky nao ha mudanca de layout dirigida por rolagem, e o laco
         deixa de existir por construcao. O deck e a tela de entrada: rola e sai
         de cena; o "topo" do cabecalho da secao traz de volta. */
      #dash4-overlay .d3-nav{position:static;display:flex;flex-direction:column;
        gap:9px;padding:0;margin-bottom:22px;background:none;border-bottom:none;}
      /* Barra "novo PDUS" — realce sutil no cabeçalho */
      #dash4-overlay .d4-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:20px;
        font-family:var(--display);font-size:9.5px;letter-spacing:.06em;color:#8ff0c6;
        background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.28);}
      /* Comparação simples (barras distrito × cidade) */
      #dash4-overlay .d4-cmp-row{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:center;margin-bottom:11px;}
      #dash4-overlay .d4-cmp-lbl{font-size:11.5px;color:var(--muted);}
      #dash4-overlay .d4-cmp-track{position:relative;height:8px;border-radius:5px;background:rgba(255,255,255,0.06);overflow:hidden;}
      #dash4-overlay .d4-cmp-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;}
      #dash4-overlay .d4-cmp-v{font-family:var(--display);font-size:11px;color:#fff;min-width:52px;text-align:right;}
      /* Tooltip (?) dentro da legenda: .d2-legend span{display:flex} força o box a
         aparecer inline — reescondê-lo (o conteúdo é copiado para #tip-float no hover). */
      #dash4-overlay .d2-legend .vgv-tip-box,#dash4-overlay .d2-legend .hero-tip-box{display:none;}
      #dash4-overlay .d2-legend .vgv-tip{gap:0;}
      /* Pipeline (Desenvolvimento Urbano) com as mesmas fontes dos big numbers do topo do dash4 */
      #dash4-overlay .d2-stage .st-v{font-size:27px;letter-spacing:-0.01em;}
      #dash4-overlay .d2-stage .st-s{font-size:12.5px;}
      /* Navegação por seções — INTERRUPTOR, e o desenho dela mora inteiro em
         css/93-dash-nav.css (o deck de cards). O bloco que estava aqui era do
         desenho anterior, em que a barra era ÂNCORA e "todas as seções ficam
         visíveis": botão de 11px de padding centralizado, fundo azul sólido no
         selecionado e um traço de 2px em `.d3-nav-btn.on::after`.
         Foi removido, e não só por estar obsoleto: este arquivo carrega DEPOIS
         do 93 e usa `#dash4-overlay`, então cada uma daquelas regras ganhava o
         desempate. A do `::after` era a pior — o card usa esse pseudo-elemento
         como VÉU que mantém o título legível sobre a foto, e o traço azul o
         substituía justamente no card seleccionado.
         Só a caixa (sticky, fundo sangrado, condensação) segue aqui embaixo. */
      #dash4-overlay .d3-nav{flex-direction:column;align-items:stretch;gap:9px;}
      @media(max-width:860px){ #dash4-overlay .d3-nav-btns{grid-template-columns:1fr 1fr;} }

      /* ── Barra fixa: header + navegação como UM bloco ──────────────────────
         Header e nav são sticky separados, mas se comportam como uma peça só:
         um fundo, uma borda inferior, uma sombra marcando o conteúdo que rola
         por baixo. Duas correções moram aqui.

         (1) O fundo sangra até a borda da tela. Header e nav vivem dentro de
         .d2-inner (max-width 1560 + 36px de padding), então um background
         aplicado neles desenhava um retângulo do tamanho da coluna — e as
         bordas desse retângulo denunciavam a margem da página. O fundo passou
         para um pseudo-elemento de 100vw centrado, atrás do conteúdo da barra.

         (2) O fundo só existe quando serve para alguma coisa (ver abaixo). */
      #dash4-overlay{overflow-x:hidden;}
      #dash4-overlay .d2-header.d3-head{background:none;backdrop-filter:none;
        border-bottom:none;box-shadow:none;}
      /* Em repouso a barra não pinta nada: header e nav ficam sobre o mesmo
         gradiente do overlay e o topo se lê como uma superfície só. A laje
         quase-preta encostada no topbar parecia uma segunda barra empilhada —
         ela só faz sentido a partir do momento em que há conteúdo passando por
         baixo, e é exatamente aí (.d4-scrolled) que ela entra. */
      #dash4-overlay .d2-header.d3-head::before{content:'';position:absolute;z-index:-1;
        box-sizing:border-box;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
        background:transparent;border-bottom:1px solid transparent;
        transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;}
      /* So o header: o deck perdeu o ::before junto com o sticky (ver acima), e
         estas regras ficariam apontando para um pseudo-elemento sem content. */
      #dash4-overlay.d4-fundo .d2-header.d3-head::before{background:rgba(8,12,20,0.985);
        backdrop-filter:blur(14px);border-bottom-color:rgba(120,160,210,0.16);
        box-shadow:0 10px 24px -14px rgba(0,0,0,0.9);}

      /* Estado condensado: passados os primeiros pixels de rolagem, o header
         encolhe e o breadcrumb sai. São 168px de barra fixa num viewport de
         900 — quase 20% da tela presa. Condensado, sobra leitura. */
      #dash4-overlay.d4-scrolled .d2-header.d3-head{padding:8px 0 7px;}
      #dash4-overlay.d4-scrolled .d2-breadcrumb{display:none;}
      #dash4-overlay.d4-scrolled .d2-title{font-size:19px;}
      /* O rótulo "ir para" só serve na primeira leitura; depois que o usuário
         está rolando, ele já entendeu a barra e o espaço vale mais. */
      /* Nao ha estado condensado para o deck: ver a nota de `position:static`
         acima. Condensar dirigido por rolagem foi exatamente o que produziu o
         tremor, e o remedio nao e ajustar o limiar — e nao mexer no layout
         durante a rolagem. O header continua condensando: a variacao dele e de
         ~36px, que e o que o limiar de 24px sempre pressupos. */
      /* Sem transição de propósito: header e nav são sticky e ocupam espaço no
         fluxo, então animar a altura deles arrasta todo o conteúdo junto e a
         âncora, que mede antes, erra pela diferença. A troca é instantânea e a
         geometria vira determinística. */

      /* Garantia no nível do CSS de que a âncora nunca para atrás da barra fixa.
         O valor é reescrito em runtime por _d4SyncSticky() com a altura real. */
      #dash4-overlay .d3-sec{scroll-margin-top:190px;}

      /* Título de seção: ganha respiro acima para separar visualmente um bloco
         do outro, já que agora as quatro seções convivem na mesma rolagem. */
      #dash4-overlay .d3-sec{padding-top:6px;}
      #dash4-overlay .d3-sec + .d3-sec{margin-top:34px;}
      #dash4-overlay .d2-sec-head{margin-bottom:14px;}

      /* Frase-síntese que abre cada seção. É o que dá didática ao painel: diz em
         uma linha o que os cards abaixo mostram, antes de o leitor encarar os
         números. Corpo de leitura (15px), não de rótulo. */
      #dash4-overlay .d4-lead{display:flex;gap:13px;align-items:flex-start;
        margin:0 2px 16px;padding:14px 17px;border-radius:12px;
        background:linear-gradient(100deg,rgba(56,189,248,0.07),rgba(56,189,248,0.02));
        border:1px solid rgba(120,160,210,0.16);border-left:3px solid rgba(56,189,248,0.55);}
      #dash4-overlay .d4-lead-txt{font-size:15px;line-height:1.62;color:#d7e6f5;}
      #dash4-overlay .d4-lead-txt b{color:#fff;font-family:var(--display);font-weight:700;
        font-size:1.03em;letter-spacing:-0.01em;}
      #dash4-overlay .d4-lead-txt em{font-style:normal;color:#8fd0ff;}
      @media(max-width:640px){ #dash4-overlay .d4-lead-txt{font-size:14px;} }

      /* Âncora de escala do big number: "5,6× o já construído" faz o valor
         significar alguma coisa; o número sozinho, não. */
      #dash4-overlay .d2-hero-ref{margin-top:6px;padding-top:6px;font-size:10.5px;line-height:1.35;
        color:#9fc2dc;border-top:1px dashed rgba(120,160,210,0.22);}

      /* Nota de metodologia. Estava em 9,5px solto no rodapé dos cards — é o
         material que explica de onde vem o número, então ganhou corpo legível e
         uma régua à esquerda que a separa do dado sem competir com ele. */
      #dash4-overlay .d4-note{font-size:11.5px;line-height:1.55;color:var(--muted);
        margin-top:13px;padding:9px 0 1px 11px;border-left:2px solid rgba(120,160,210,0.2);}
      #dash4-overlay .d4-note b{color:#b8cee2;font-weight:600;}