/* 92-dash-comparativo.css — dashboard comparativo
   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ê. */
      /* Os overlays começam onde o topbar termina. O valor era 50px cravado e o
         topbar tem 74px: o painel cobria os últimos 24px do header do site. */
      .d2-overlay{display:none;position:fixed;inset:var(--topbar-h) 0 0 0;z-index:10001;overflow-y:auto;
        background:radial-gradient(1200px 700px at 18% -8%,rgba(41,98,176,0.22),transparent 60%),
                   radial-gradient(1000px 600px at 100% 0%,rgba(123,82,212,0.14),transparent 55%),
                   linear-gradient(180deg,#070b12 0%,#080d16 55%,#070a11 100%);
        color:var(--text);-webkit-font-smoothing:antialiased;}
      .d2-overlay.open{display:block;animation:d2fade .35s ease both;}
      @keyframes d2fade{from{opacity:0}to{opacity:1}}
      .d2-atmos{position:fixed;inset:var(--topbar-h) 0 0 0;pointer-events:none;z-index:0;opacity:.5;
        background-image:linear-gradient(rgba(120,160,210,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,210,0.045) 1px,transparent 1px);
        background-size:46px 46px;mask-image:radial-gradient(1100px 620px at 30% 8%,#000,transparent 75%);}
      /* DOBRA — o comparativo com a cidade, embutido no rodapé do card do
         Distrito. Recolhido por padrão: é régua, não protagonista. Fica
         separado por um fio e recuado, para não se confundir com o conteúdo
         do card que o hospeda. */
      .d2-dobra{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);}
      .d2-dobra>summary{display:flex;align-items:center;gap:10px;cursor:pointer;
        list-style:none;user-select:none;padding:4px 0;}
      .d2-dobra>summary::-webkit-details-marker{display:none;}
      .d2-dobra-t{font-family:var(--display);font-size:10.5px;letter-spacing:.1em;
        text-transform:uppercase;color:var(--muted);}
      .d2-dobra>summary:hover .d2-dobra-t{color:#cdd9e3;}
      .d2-dobra-chev{margin-left:auto;font-size:11px;color:var(--muted);transition:transform .2s;}
      .d2-dobra[open] .d2-dobra-chev{transform:rotate(180deg);}
      .d2-dobra-corpo{padding-top:10px;}

      /* A caixa do PLOT, que existe só para dar origem aos rótulos de crista.
         Sem ela, a camada absoluta se mediria por .d2-chart-wrap — que tem
         `padding-left:34px` reservado ao eixo Y — e todo rótulo apareceria 34px
         à esquerda do ponto que descreve. Aqui a caixa abraça o SVG, e `left`
         em % passa a valer sobre a largura do gráfico, não sobre a do cartão. */
      .d2-chart-plot{position:relative;}

      /* Camada dos valores de crista. `position:absolute` sobre a área do
         gráfico, sem capturar ponteiro — o gráfico continua clicável por baixo.
         O deslocamento de -50% em X centra o número sobre o ponto; o `top` já
         vem calculado 15px acima dele, para o rótulo não cobrir o marcador. */
      .d2-crista-wrap{position:absolute;inset:0;pointer-events:none;}
      .d2-crista{position:absolute;transform:translateX(-50%);white-space:nowrap;
        font-family:var(--display);font-size:10px;font-weight:700;
        text-shadow:0 1px 3px rgba(4,9,15,.95),0 0 2px rgba(4,9,15,.9);}

      /* SEM TETO DE LARGURA. Os 1560px vinham de quando o dashboard era uma
         coluna de texto com gráficos pequenos; hoje são séries anuais, rankings
         de bairro e barras mensais, e todos ganham em ler mais largo — uma
         série de 9 anos em 560px de traço espreme os anos uns nos outros.
         O padding lateral fica: é ele que impede o gráfico de encostar na
         borda da janela. */
      .d2-inner{position:relative;z-index:1;max-width:none;margin:0 auto;padding:0 36px 56px;}
      .d2-loading{text-align:center;padding:90px 0;color:var(--muted);font-family:var(--display);font-size:12px;letter-spacing:.14em;}
      .d2-loading::after{content:'';display:inline-block;width:0;animation:d2dots 1.4s steps(4,end) infinite;overflow:hidden;vertical-align:bottom;}
      @keyframes d2dots{to{width:1.2em}}

      /* Header territorial */
      .d2-header{position:sticky;top:0;z-index:5;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
        padding:22px 0 16px;margin-bottom:20px;
        background:linear-gradient(180deg,rgba(7,11,18,0.96),rgba(7,11,18,0.82) 70%,transparent);
        backdrop-filter:blur(12px);border-bottom:1px solid rgba(120,160,210,0.12);}
      .d2-breadcrumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-family:var(--display);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:9px;}
      .d2-breadcrumb b{color:#bfe6ff;font-weight:400;}
      .d2-breadcrumb .sep{opacity:.4;}
      .d2-breadcrumb .cur{color:#fff;background:rgba(56,189,248,0.12);border:1px solid rgba(56,189,248,0.3);border-radius:6px;padding:2px 8px;}
      .d2-title-row{display:flex;align-items:center;gap:14px;}
      .d2-title{font-family:var(--body);font-weight:600;font-size:30px;letter-spacing:-0.01em;line-height:1;margin:0;
        background:linear-gradient(180deg,#fff,#bcd6ec);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
      .d2-head-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
      .d2-tabs{display:flex;gap:3px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:11px;padding:3px;}
      .d2-tab{padding:6px 15px;border-radius:8px;border:none;background:transparent;color:var(--muted);
        font-family:var(--display);font-size:11px;letter-spacing:.06em;cursor:pointer;transition:all .16s;white-space:nowrap;}
      .d2-tab:hover{color:#fff;background:rgba(255,255,255,0.06);}
      .d2-tab.active{background:linear-gradient(180deg,#bfe6ff,#8fd0ff);color:#08111c;font-weight:700;box-shadow:0 2px 10px rgba(56,189,248,0.35);}
      .d2-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:10px;letter-spacing:.14em;color:#7fe0a8;}
      .d2-live i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84;animation:d2blink 1.8s ease-in-out infinite;}
      @keyframes d2blink{0%,100%{opacity:1}50%{opacity:.3}}
      .d2-close{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
        color:var(--muted);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
      .d2-close:hover{background:rgba(239,83,80,0.16);border-color:rgba(239,83,80,0.4);color:#fff;}

      /* Section scaffold */
      .d2-section{margin-bottom:22px;}
      .d2-sec-head{display:flex;align-items:center;gap:10px;margin:0 2px 12px;}
      .d2-sec-num{font-family:var(--display);font-size:10px;color:#4a90c9;border:1px solid rgba(74,144,201,0.35);border-radius:6px;padding:2px 6px;letter-spacing:.1em;}
      .d2-sec-title{font-family:var(--display);font-size:12px;letter-spacing:.16em;color:#9fc2dc;text-transform:uppercase;}
      .d2-sec-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(120,160,210,0.22),transparent);}

      /* Hero KPI cards */
      .d2-heroes{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;}
      .d2-heroes.d3-heroes{grid-template-columns:repeat(4,1fr);}
      /* KPI COMPACTO — a escala aqui é relativa, não absoluta.
         Estes quatro cartões vinham a 204px de altura (20% da janela), com o
         número a 37px. Isso fazia sentido quando eles ERAM o topo do
         dashboard; deixaram de ser: o deck de cards passou a ocupar meia tela
         logo abaixo, e dois blocos disputando protagonismo na mesma dobra não
         dão dois protagonistas, dão nenhum.
         Encolher aqui não é tirar importância do indicador — é devolver a
         hierarquia: o KPI diz ONDE VOCÊ ESTÁ, o card diz PARA ONDE IR. Nada
         foi removido; a nota de escala e o sparkline continuam. */
      .d3-heroes .d2-hero{padding:13px 15px 12px;}
      .d3-heroes .d2-hero-val{font-size:27px;}
      .d3-heroes .d2-hero-val small{font-size:14px;}
      .d3-heroes .d2-hero-label{margin-bottom:6px;}
      .d3-heroes .d2-hero-foot{margin-top:7px;}
      .d3-heroes .d2-spark{margin-top:7px;height:20px;}
      /* O halo do canto acompanha: dimensionado para o cartão antigo, ficava
         desproporcional num de 145px. */
      .d3-heroes .d2-hero::after{top:-26px;right:-26px;width:72px;height:72px;}
      /* Big number com dois valores lado a lado (M² Imobiliário: mercado × ITBI) */
      .d2-hero-dual{display:flex;gap:14px;align-items:flex-start;}
      .d2-hero-dual .dv{font-family:var(--body);font-weight:700;font-size:25px;line-height:1;color:#fff;letter-spacing:-0.01em;white-space:nowrap;}
      .d2-hero-dual .dl{font-family:var(--display);font-size:8.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-top:5px;}
      .d2-hero-dual .sep{width:1px;align-self:stretch;background:rgba(255,255,255,0.12);}
      .d2-trend small{font-size:8px;letter-spacing:.04em;margin-left:1px;}
      /* Copilot como accordion */
      .d2-copilot summary{list-style:none;cursor:pointer;outline:none;}
      .d2-copilot summary::-webkit-details-marker{display:none;}
      .d2-copilot .d2-cop-chev{margin-left:auto;color:var(--muted);display:flex;transition:transform .25s ease;flex-shrink:0;}
      .d2-copilot[open] .d2-cop-chev{transform:rotate(180deg);}
      .d2-copilot:not([open]) .d2-cop-head{margin-bottom:0;}
      .d2-hero{position:relative;border-radius:16px;padding:16px 17px 15px;overflow:hidden;
        background:linear-gradient(165deg,rgba(255,255,255,0.055),rgba(255,255,255,0.018));
        border:1px solid rgba(255,255,255,0.09);box-shadow:0 10px 30px rgba(0,0,0,0.35);transition:transform .2s,border-color .2s;}
      .d2-hero:hover{transform:translateY(-3px);border-color:rgba(120,180,230,0.32);}
      .d2-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--d2c,#38bdf8);opacity:.9;}
      .d2-hero::after{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;border-radius:50%;
        background:radial-gradient(circle,var(--d2c,#38bdf8),transparent 70%);opacity:.14;}
      .d2-hero-label{font-family:var(--display);font-size:9.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:9px;display:flex;align-items:center;gap:6px;}
      .d2-hero-ico{color:var(--d2c,#38bdf8);opacity:.85;display:flex;}
      .d2-hero-val{font-family:var(--body);font-weight:700;font-size:27px;line-height:1;color:#fff;letter-spacing:-0.01em;}
      .d2-hero-val small{font-size:14px;color:var(--muted);font-weight:400;margin-left:3px;}
      .d2-hero-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;}
      .d2-hero-unit{font-size:10.5px;color:var(--muted);}
      .d3-heroes .d2-hero-unit{font-size:11px;}
      .d2-trend{font-family:var(--display);font-size:10px;font-weight:700;border-radius:5px;padding:2px 6px;white-space:nowrap;}
      .d2-trend.up{color:#7fe0a8;background:rgba(61,220,132,0.12);}
      .d2-trend.down{color:#ef9a9a;background:rgba(239,83,80,0.12);}
      .d2-trend.flat{color:#9fc2dc;background:rgba(120,160,210,0.1);}
      .d2-spark{margin-top:10px;height:26px;width:100%;display:block;}

      /* Copilot / Insights */
      .d2-copilot{border-radius:18px;padding:18px 20px 20px;position:relative;overflow:hidden;
        background:linear-gradient(160deg,rgba(56,189,248,0.07),rgba(167,139,250,0.05) 60%,rgba(255,255,255,0.015));
        border:1px solid rgba(120,180,230,0.2);box-shadow:0 14px 40px rgba(0,0,0,0.35);}
      .d2-cop-head{display:flex;align-items:center;gap:10px;margin-bottom:15px;}
      .d2-cop-orb{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
        background:linear-gradient(135deg,#38bdf8,#a78bfa);box-shadow:0 0 16px rgba(56,189,248,0.5);color:#08111c;font-size:14px;}
      .d2-cop-title{font-family:var(--display);font-size:12px;letter-spacing:.16em;color:#cfe6f7;text-transform:uppercase;}
      .d2-cop-sub{font-family:var(--display);font-size:10px;color:var(--muted);letter-spacing:.05em;}
      .d2-cop-shimmer{position:relative;overflow:hidden;}
      .d2-cop-shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%);
        background-size:220% 100%;animation:d2shim 3.4s ease-in-out infinite;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
      @keyframes d2shim{0%{background-position:200% 0}100%{background-position:-120% 0}}
      .d2-insights{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:11px;}
      .d2-ins{display:flex;gap:11px;padding:13px 14px;border-radius:12px;background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.07);
        opacity:0;transform:translateY(8px);animation:d2rise .5s ease forwards;}
      @keyframes d2rise{to{opacity:1;transform:none}}
      .d2-ins-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px;}
      .d2-ins.good{border-color:rgba(61,220,132,0.22);} .d2-ins.good .d2-ins-dot{background:#3ddc84;box-shadow:0 0 8px rgba(61,220,132,.6);}
      .d2-ins.warn{border-color:rgba(255,183,77,0.22);} .d2-ins.warn .d2-ins-dot{background:#ffb74d;box-shadow:0 0 8px rgba(255,183,77,.6);}
      .d2-ins.crit{border-color:rgba(239,83,80,0.22);} .d2-ins.crit .d2-ins-dot{background:#ef5350;box-shadow:0 0 8px rgba(239,83,80,.6);}
      .d2-ins-txt{font-size:13px;line-height:1.45;color:#dbe7f1;}
      .d2-ins-txt b{color:#fff;font-weight:700;}
      .d2-ins-txt span{display:block;font-size:11px;color:var(--muted);margin-top:3px;}

      /* Generic cards / grid */
      .d2-grid{display:grid;gap:14px;}
      .d2-grid.c-58{grid-template-columns:1.35fr 1fr;}
      .d2-grid.c-55{grid-template-columns:1.2fr 1fr;}
      .d2-grid.c-2{grid-template-columns:1fr 1fr;}
      .d2-card{border-radius:16px;padding:18px 20px;background:linear-gradient(165deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015));
        border:1px solid rgba(255,255,255,0.08);box-shadow:0 10px 30px rgba(0,0,0,0.28);}
      .d2-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px;}
      .d2-card-t{font-family:var(--display);font-size:11.5px;letter-spacing:.13em;color:#9fc2dc;text-transform:uppercase;}
      .d2-card-tag{font-family:var(--display);font-size:9.5px;color:var(--muted);border:1px solid rgba(255,255,255,0.12);border-radius:6px;padding:2px 7px;}

      /* Anel + ocupação */
      .d2-occ{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;}
      .d2-stack{height:18px;border-radius:9px;overflow:hidden;display:flex;background:rgba(255,255,255,0.05);margin:4px 0 14px;}
      .d2-stack i{height:100%;display:block;}
      .d2-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:6px;}
      .d2-legend span{display:flex;align-items:center;gap:7px;font-size:12px;color:#cdd9e3;}
      .d2-legend b{width:9px;height:9px;border-radius:3px;}

      /* Anel de composição do CA (construído/por direito/via outorga), raio
         proporcional entre os dois territórios — ver comentário em
         `_d2donut3()` no JS. O valor central é a CAPACIDADE DISPONÍVEL, não
         o teto: um teto lido isolado passa mensagem de limite, não de
         oportunidade, e esse número já era o tile de destaque da versão
         anterior. O valor de cada faixa mora do lado, nunca sobre o anel —
         não tem largura de fatia pra respeitar, então não há proporção de
         dado capaz de fazer esse texto colidir com nada. */
      .d4-donut-pair{display:flex;align-items:center;gap:18px;}
      .d4-donut-wrap{position:relative;flex-shrink:0;}
      .d4-donut-wrap svg{display:block;}
      .d4-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
        justify-content:center;padding:0 19%;text-align:center;}
      /* Tamanho da fonte vem inline do JS (proporcional a `donutSize`, igual
         ao raio) — porcentagem em `font-size` herdaria do ancestral, não do
         tamanho do próprio anel, que é o que precisa acompanhar aqui. */
      .d4-donut-center .v{font-family:var(--body);font-weight:800;color:#fff;
        font-variant-numeric:tabular-nums;line-height:1;}
      .d4-donut-center .v small{font-size:.42em;font-weight:600;color:var(--muted);margin-left:3px;}
      .d4-donut-center .l{font-family:var(--display);letter-spacing:.06em;color:#7fe0a8;
        text-transform:uppercase;margin-top:7px;}
      .d4-donut-legend{display:flex;flex-direction:column;gap:9px;text-align:left;}
      .d4-donut-legend div{display:flex;align-items:center;gap:8px;}
      .d4-donut-legend b{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
      .d4-donut-legend .lv{font-family:var(--body);font-weight:700;font-size:13px;color:#fff;
        font-variant-numeric:tabular-nums;white-space:nowrap;}
      @media (max-width:480px){
        .d4-donut-pair{flex-direction:column;}
        .d4-donut-legend{flex-direction:row;flex-wrap:wrap;justify-content:center;}
      }

      .d2-mini{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px;}
      /* As fileiras de KPI declaravam a própria grade em `style=` inline, no
         JS. Inline vence qualquer folha — inclusive media query —, então no
         telefone elas continuavam em 4 e 5 colunas por cima da regra que
         mandava uma, e o texto quebrava letra a letra ("mi / m² / ÁREA / DOS
         / TERRENOS"). Viraram classe para que a folha volte a mandar. */
      .d2-mini.d2-cols-3{grid-template-columns:repeat(3,1fr);}
      .d2-mini.d2-cols-4{grid-template-columns:repeat(4,1fr);}
      .d2-mini.d2-cols-5{grid-template-columns:repeat(5,1fr);}
      .d2-mini-it{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:10px 12px;}
      .d2-mini-it .v{font-family:var(--body);font-weight:700;font-size:18px;color:#fff;}
      .d2-mini-it .l{font-family:var(--display);font-size:9.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-top:2px;}

      /* Ranking bars */
      .d2-rank{display:flex;flex-direction:column;gap:10px;}
      .d2-rank-row{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;}
      /* A largura da coluna de barra era declarada em `style=` inline, no JS —
         e inline vence media query. No telefone a regra que manda a coluna
         encolher nao chegava, e o nome do CNAE ficava com 10px de largura,
         quebrando letra a letra numa tira de 576px de altura. Medido. */
      .d2-rank-row.d2-rank-96{grid-template-columns:18px minmax(0,1fr) 96px;}
      .d2-rank-row.d2-rank-108{grid-template-columns:18px minmax(0,1fr) 108px;}
      .d2-rank-i{font-family:var(--display);font-size:11px;color:var(--muted);text-align:right;}
      .d2-rank-mid .nm{font-size:12.5px;color:#dbe7f1;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      .d2-rank-track{height:7px;border-radius:4px;background:rgba(255,255,255,0.06);overflow:hidden;}
      .d2-rank-fill{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.2,.8,.2,1);}
      .d2-rank-v{font-family:var(--display);font-size:12px;color:#fff;white-space:nowrap;}
      .d2-rank-v small{color:var(--muted);font-size:9.5px;margin-left:4px;}

      /* Stat rows */
      .d2-rows{display:flex;flex-direction:column;}
      .d2-r{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.06);}
      .d2-r:last-child{border-bottom:none;}
      .d2-r .l{font-size:12.5px;color:var(--muted);}
      .d2-r .v{font-family:var(--display);font-size:13.5px;color:#fff;font-weight:600;}

      /* Pipeline */
      .d2-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative;}
      .d2-stage{position:relative;border-radius:14px;padding:15px 14px 14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);}
      .d2-stage::after{content:'→';position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:rgba(120,160,210,0.45);font-size:16px;z-index:2;}
      .d2-stage:last-child::after{display:none;}
      .d2-stage .st-l{font-family:var(--display);font-size:9.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
      .d2-stage .st-dot{width:8px;height:8px;border-radius:50%;}
      .d2-stage .st-v{font-family:var(--body);font-weight:700;font-size:26px;color:#fff;line-height:1;}
      .d2-stage .st-s{font-size:11px;color:var(--muted);margin-top:5px;}
      .d2-stage .st-bar{height:4px;border-radius:2px;margin-top:11px;background:rgba(255,255,255,0.06);overflow:hidden;}
      .d2-stage .st-bar i{display:block;height:100%;border-radius:2px;}
      .d2-pot{margin-top:14px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:12px;}
      .d2-pot .pcard{border-radius:12px;padding:13px 15px;border:1px solid rgba(129,199,132,0.22);background:linear-gradient(135deg,rgba(129,199,132,0.1),rgba(129,199,132,0.02));}
      .d2-pot .pcard .pl{font-family:var(--display);font-size:9.5px;letter-spacing:.1em;color:#a5d6a7;text-transform:uppercase;margin-bottom:7px;}
      .d2-pot .pcard .pv{font-family:var(--body);font-weight:700;font-size:21px;color:#c8e6c9;}
      .d2-pot .pcard .ps{font-size:12.5px;color:rgba(165,214,167,0.75);margin-top:5px;}

      /* Market chart */
      .d2-mkt{display:grid;grid-template-columns:1fr;gap:12px;}
      .d2-chart-wrap{position:relative;}
      .d2-chart-x{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--display);font-size:9.5px;color:var(--muted);}
      .d2-chart-y{position:absolute;left:0;top:0;width:30px;height:156px;pointer-events:none;}
      .d2-chart-y span{position:absolute;right:5px;transform:translateY(-50%);font-family:var(--display);font-size:9.5px;color:var(--muted);white-space:nowrap;}

      /* Análise Empresarial */
      .d2-big{font-family:var(--body);font-weight:700;font-size:34px;color:#fff;line-height:1;}
      .d2-big small{font-size:13px;color:var(--muted);font-weight:400;margin-left:7px;}
      .d2-seg{height:16px;border-radius:8px;overflow:hidden;display:flex;background:rgba(255,255,255,0.05);margin:13px 0 0;}
      .d2-seg i{height:100%;display:block;transition:width .6s cubic-bezier(.2,.8,.2,1);}
      .d2-seg-leg{display:flex;flex-wrap:wrap;gap:13px;margin-top:11px;}
      .d2-seg-leg span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#cdd9e3;}
      .d2-seg-leg b{width:8px;height:8px;border-radius:2px;flex-shrink:0;}
      .d2-seg-leg em{color:var(--muted);font-style:normal;font-family:var(--display);font-size:11px;}
      .d2-cov{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px;}
      /* 4 colunas era inline no JS antes — vencia sempre a regra de mobile
         de `.d2-cov` (inline bate qualquer seletor de folha), então o card
         nunca caía pra 2 colunas abaixo de 1000px e o texto do rótulo mais
         longo ("Em toda POA em 2026") estourava a caixa. Como classe, a
         media query de `#dash4-overlay .d2-cov` volta a valer. */
      .d2-cov-4{grid-template-columns:repeat(4,1fr);}
      .d2-cov .chip{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:11px;padding:11px 13px;}
      .d2-cov .chip .cv{font-family:var(--body);font-weight:700;font-size:19px;color:#fff;}
      .d2-cov .chip .cl{font-family:var(--display);font-size:9px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-top:3px;}
      .d2-cov .chip .cp{font-size:10.5px;margin-top:3px;}
      .d2-split{display:flex;height:30px;border-radius:9px;overflow:hidden;margin-top:6px;}
      .d2-split i{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:11px;color:#08131e;font-weight:700;}
      .d2-hist{display:flex;align-items:flex-end;gap:5px;height:78px;margin-top:8px;}
      .d2-hist .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
      .d2-hist .bar{width:100%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#a78bfa,#7c4dff);min-height:3px;transition:height .5s ease;}
      .d2-hist .bar.top{background:linear-gradient(180deg,#7fe0a8,#3ddc84);box-shadow:0 0 10px rgba(61,220,132,.5);}
      .d2-hist .xl{font-family:var(--display);font-size:8px;color:var(--muted);}
      .d2-cnae-code{font-family:var(--display);font-size:9px;color:#26c6da;background:rgba(38,198,218,0.1);border:1px solid rgba(38,198,218,0.22);border-radius:5px;padding:1px 6px;margin-left:7px;}
      .d2-donut-wrap{display:flex;align-items:center;gap:16px;margin-top:4px;}
      .d2-dl{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
      .d2-dl-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center;}
      .d2-dl-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
      .d2-dl-nm{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      .d2-dl-v{font-family:var(--display);font-size:12px;color:var(--text);font-weight:700;text-align:right;white-space:nowrap;}
      .d2-dl-v small{display:block;font-size:9px;color:var(--muted);font-weight:400;}
      @media (max-width:560px){.d2-donut-wrap{flex-direction:column;align-items:stretch;}}
      .d2-mini-toggle{display:flex;gap:3px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:2px;flex-shrink:0;}
      .d2-mini-toggle button{font-family:var(--display);font-size:9.5px;letter-spacing:.03em;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:6px;padding:4px 9px;cursor:pointer;transition:all .15s;white-space:nowrap;}
      .d2-mini-toggle button:hover{color:#fff;}
      .d2-mini-toggle button.on{background:rgba(38,198,218,0.16);color:#26c6da;border-color:rgba(38,198,218,0.32);}
      /* Opção sem dado na fonte selecionada: visível (mostra o que existe), mas inerte */
      .d2-mini-toggle button:disabled,
      .d2-mini-toggle button:disabled:hover{color:var(--muted);background:transparent;border-color:transparent;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px;}
      /* Demografia empresarial — aberturas × baixas */
      .d2-tl{display:flex;align-items:flex-end;gap:5px;height:128px;margin-top:10px;}
      .d2-tl .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end;}
      .d2-tl .pair{display:flex;align-items:flex-end;gap:2px;height:100%;width:100%;justify-content:center;position:relative;}
      .d2-tl .b{width:44%;border-radius:3px 3px 0 0;min-height:2px;transition:height .5s ease;}
      .d2-tl .b.ab{background:linear-gradient(180deg,#7fe0a8,#3ddc84);}
      .d2-tl .b.bx{background:linear-gradient(180deg,#ef9a9a,#ef5350);}
      /* Valor de crista: UM rótulo por par (não um por barra — ver comentário
         no JS), sempre no topo do PAR, não da barra mais alta: com
         `bottom:100%` sobre `.pair` (altura 100% da coluna) o rótulo não
         precisa saber qual das duas é mais alta. */
      .d2-tl .tlv{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
        display:flex;gap:4px;margin-bottom:3px;white-space:nowrap;pointer-events:none;
        font-family:var(--display);font-size:8px;font-weight:700;
        text-shadow:0 1px 3px rgba(4,9,15,.95),0 0 2px rgba(4,9,15,.9);}
      .d2-tl .tlv .ab{color:#3ddc84;}
      .d2-tl .tlv .bx{color:#ef5350;}
      .d2-tl .xl{font-family:var(--display);font-size:8px;color:var(--muted);}
      .d2-tl .col.now .xl{color:#bfe6ff;}

      @media (max-width:1200px){
        .d2-heroes{grid-template-columns:repeat(3,1fr);}
        .d2-heroes.d3-heroes{grid-template-columns:repeat(2,1fr);}
        .d2-grid.c-58,.d2-grid.c-55,.d2-grid.c-2{grid-template-columns:1fr;}
        .d2-pipe{grid-template-columns:repeat(2,1fr);} .d2-stage::after{display:none;}
        .d2-pot{grid-template-columns:1fr 1fr;}
        .d2-cov{grid-template-columns:1fr 1fr;}
      }
      @media (max-width:680px){
        .d2-inner{padding:0 16px 40px;}
        .d2-heroes{grid-template-columns:1fr 1fr;}
        .d2-title{font-size:23px;}
        .d2-header{flex-direction:column;align-items:flex-start;gap:12px;}
        .d2-occ{grid-template-columns:1fr;}
        .d2-pipe{grid-template-columns:1fr;}
        .d2-pot{grid-template-columns:1fr;}
      }
    

      /* Botão de saída para ferramenta oficial externa (card do regramento
         SMAMUS). Ele existe porque o embed é recusado pelo servidor da
         prefeitura via `frame-ancestors`; o porquê está comentado junto de
         _d4regramentoCard em 48-dashboards.js. Herda a paleta azul da linha
         de participação para não competir com o verde das aberturas. */
      .d4-ext{display:inline-flex;align-items:center;gap:8px;margin-top:6px;
        padding:10px 16px;border-radius:8px;text-decoration:none;
        font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.04em;
        color:#04212e;background:linear-gradient(180deg,#7fd4f7,#29b6f6);
        border:1px solid rgba(255,255,255,.18);
        transition:filter .18s ease,transform .18s ease;}
      .d4-ext:hover{filter:brightness(1.08);transform:translateY(-1px);}
      .d4-ext:focus-visible{outline:2px solid #bfe6ff;outline-offset:2px;}

      /* Faixa da plataforma de regramento. Deixou de ser um card entre iguais
         porque ela é a saída para o dado oficial por lote: o dashboard mede o
         território, e essa consulta responde o caso a caso. Fundo em azul de
         acento e o botão à direita, para ler como chamada e não como mais um
         quadro de números. */
      .d4-reg{background:linear-gradient(135deg,rgba(41,182,246,.14),rgba(41,182,246,.035));
        border:1px solid rgba(41,182,246,.30);}
      .d4-reg-in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;}
      .d4-reg-txt{flex:1 1 380px;min-width:0;}
      .d4-reg-t{font-family:var(--display);font-size:17px;font-weight:800;color:#eaf6ff;
        letter-spacing:.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
      .d4-reg-tag{font-size:9px;letter-spacing:.1em;font-weight:700;color:#9fd8f5;
        border:1px solid rgba(41,182,246,.42);border-radius:999px;padding:3px 9px;}
      .d4-reg-d{font-size:13px;color:#cdd9e3;line-height:1.55;margin-top:8px;max-width:78ch;}
      .d4-reg .d4-ext{flex-shrink:0;font-size:13px;padding:13px 22px;}