/* 40-painel.css — painel lateral do lote/quadra/EU e seus accordions
   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ê. */
    /* ── PAINEL LATERAL ── */
    #panel {
      position: absolute;
      top: 14px;
      right: 70px;
      bottom: 14px;
      width: 485px;
      background: var(--glass-1);
      border: 1px solid var(--border);
      border-radius: 18px;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      /* Três sombras, três trabalhos: a projetada afasta o painel do mapa, o
         anel de 1px desenha a borda de vidro contra fundo claro (a `border`
         sozinha some sobre imagem de satélite) e o --glass-edge é a aresta
         iluminada do topo. */
      box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.07),
        var(--glass-edge);
      overflow: hidden;
      z-index: 10;
      flex-direction: column;
      display: none;
    }

    /* Duas camadas de luz, atrás de todo o conteúdo:
       · o halo ciano no topo — a luz que entra por uma quina da lâmina;
       · o especular diagonal — o reflexo que corre pela superfície.
       Juntas são o que faz o painel parecer VIDRO e não um retângulo
       semitransparente. `pointer-events:none` porque cobrem a área dos cliques. */
    #panel::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(70% 46% at 50% 0%, rgba(56, 189, 248, 0.17) 0%, rgba(56, 189, 248, 0) 72%),
        var(--glass-sheen);
      pointer-events: none;
      z-index: 0;
    }

    /* O ARO. Truque padrão da borda em gradiente: pinta o gradiente na caixa
       inteira e recorta o miolo com duas máscaras que se excluem, sobrando 1px
       de contorno. Não dá para fazer com `border` — borda aceita uma cor, e o
       que se quer é o vidro acendendo num canto e apagando no outro.
       z-index 2 para ficar acima do corpo: é o aro do vidro, não o fundo. */
    #panel::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: var(--glass-rim);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }

    /* ── Hover nos accordions do painel 4D: realce de cor no cabeçalho,
       mantido enquanto o accordion estiver aberto ── */
    #panel details > summary { transition: background 0.15s ease; }
    #panel details > summary:hover,
    #panel details[open] > summary { background: rgba(255,255,255,0.07); }

    /* Mesma chapa de vidro da barra superior: blur com saturação, o brilho de
       1px na aresta de cima e o fio ciano correndo na borda de baixo. O painel
       e o topbar são as duas superfícies fixas da tela — sem isto, uma era
       vidro e a outra, um retângulo opaco com uma linha embaixo. */
    #panel-header {
      padding: 13px 14px 13px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--glass-1);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      box-shadow: var(--glass-edge), 0 4px 20px rgba(0, 0, 0, 0.28);
      font-family: var(--display);
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.1em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

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

    #panel-tag {
      font-family: var(--display);
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      /* O header é flex e o conteúdo do tag (badge + id + meta) não tem
         tamanho previsível. Sem min-width:0 ele se recusa a encolher e empurra
         os botões da direita para fora do painel. */
      min-width: 0;
      overflow: hidden;
    }

    #panel-tag > span {
      font-weight: 400;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,.68);
      margin-left: 8px;
      font-size: 11px;
    }

    /* O cabeçalho +4D não é um sufixo do tag: é o conteúdo dele. A regra acima
       (legada, para o `showPanel` de duas colunas) empurrava o bloco 8px para
       dentro, e o título do painel nascia desalinhado do corpo logo abaixo —
       27px contra 16px. Precisa do #panel-tag para vencer a especificidade. */
    #panel-tag > .p4d-head {
      margin-left: 0;
      font-size: inherit;
      color: inherit;
      letter-spacing: normal;
      max-width: 100%;
    }

    /* Container principal do header */
    .p4d-head-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      min-width: 0;
    }

    .p4d-head-toprow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      min-width: 0;
    }

    /* Subtítulo de localização do cabeçalho */
    .p4d-head-subloc {
      font-family: var(--display);
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.52);
      letter-spacing: 0.04em;
      margin-top: 2px;
      display: block;
    }

    /* Chips / Pills de Status Rápido no cabeçalho */
    .p4d-status-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
      width: 100%;
    }

    .p4d-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--display);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.03em;
      padding: 3px 8px;
      border-radius: 12px;
      color: var(--pill-c, rgba(255, 255, 255, 0.85));
      background: var(--pill-bg, rgba(255, 255, 255, 0.06));
      border: 1px solid var(--pill-c, rgba(255, 255, 255, 0.12));
      line-height: 1.4;
      white-space: nowrap;
      transition: background 0.15s ease;
    }

    .p4d-status-pill.aerodromo {
      --pill-c: #fbbf24;
      --pill-bg: rgba(251, 191, 36, 0.1);
      border-color: rgba(251, 191, 36, 0.25);
    }

    .p4d-status-pill.tombado {
      --pill-c: #f87171;
      --pill-bg: rgba(248, 113, 113, 0.1);
      border-color: rgba(248, 113, 113, 0.25);
    }

    .p4d-status-pill.patrimonio {
      --pill-c: #38bdf8;
      --pill-bg: rgba(56, 189, 248, 0.1);
      border-color: rgba(56, 189, 248, 0.25);
    }

    .p4d-status-pill.empresas {
      --pill-c: #34d399;
      --pill-bg: rgba(52, 211, 153, 0.1);
      border-color: rgba(52, 211, 153, 0.25);
    }

    .p4d-pill-ic {
      font-size: 11px;
      line-height: 1;
    }

    /* Tab bar minimalista estilo Underline Segmented Control */
    /* GRUDADAS NO TOPO. O painel do lote tem cinco seções e passa de três
       telas com o PLANO DIRETOR aberto; as abas subiam junto com o conteúdo e
       trocar de aba exigia rolar de volta ao começo. Sticky com o vidro da
       casca por trás: as margens negativas fazem a faixa sangrar até a borda
       do painel, senão o conteúdo apareceria pelas laterais ao passar. */
    .p4d-underline-tabs {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 2px 20px 5px;
      margin: -14px -16px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      flex-shrink: 0;
      overflow-x: auto;
      scrollbar-width: none;
      position: sticky;
      top: -14px;
      z-index: 3;
      /* OPACA, e é a única superfície do painel que é. Testado: com 95% de
         alfa o conteúdo ainda atravessava — texto claro em caixa alta sobre
         fundo escuro aparece com 5% de sobra, e o "45 a 46 m" da altura máxima
         cruzava a palavra TRIBUTOS ao rolar. Barra grudada existe para OCULTAR
         o que passa sob ela; translucidez ali não é profundidade, é fantasma.
         `--bg2` é o tom das superfícies glass do sistema — o mesmo da sidebar —,
         então a faixa não destoa do vidro em volta mesmo sendo sólida. */
      background: var(--bg2);
    }
    .p4d-underline-tabs::-webkit-scrollbar { display: none; }

    .p4d-utab-btn {
      font-family: var(--display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 6px 0 8px;
      border: none;
      border-bottom: 2px solid transparent;
      background: transparent;
      cursor: pointer;
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .p4d-utab-btn:hover {
      color: var(--text);
    }

    .p4d-utab-btn.active {
      color: #38bdf8;
      border-bottom-color: #38bdf8;
      /* O brilho sob a aba ativa: no vidro, a linha de 2px sozinha ficava
         fina demais para marcar onde se está. */
      box-shadow: 0 6px 14px -8px var(--glow);
    }

    .p4d-utab-badge {
      font-size: 9px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 9px;
      background: rgba(56, 189, 248, 0.15);
      color: #38bdf8;
    }

    /* Rótulos e divisores de seção destacados e proeminentes */
    .p4d-grupo,
    .p4d-grupo span,
    .p4d-grupo .p4d-grp-title {
      font-family: var(--display);
      font-size: 11.5px;
      font-weight: 800;
      color: #ffffff !important;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* A barra de família era a coisa mais opaca da tela — gradiente forte,
       filete de 4px e sombra dura — e disputava atenção com o título das
       seções que ela apresenta. Sobre vidro isso piora, porque tudo em volta
       ficou leve. Mesma cor, mesma leitura, um degrau abaixo em peso.
       O `border-left-color` NÃO pode sair nem virar `border-image`: é dele que
       _p4dPintaFamilias() lê a cor da família (ver js/20-painel-componentes.js). */
    .p4d-grupo {
      margin: 18px 0 7px;
      padding: 8px 12px;
      background:
        var(--glass-sheen),
        linear-gradient(90deg, rgba(56, 189, 248, 0.15) 0%, rgba(15, 23, 42, 0.34) 100%);
      border: 1px solid rgba(56, 189, 248, 0.22);
      border-left: 3px solid #38bdf8;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--glass-edge);
    }

    /* Cores de acento por família de seção */
    .p4d-restr .p4d-grupo {
      background: linear-gradient(90deg, rgba(251, 191, 36, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
      border-color: rgba(251, 191, 36, 0.25);
      border-left-color: #fbbf24;
    }

    .p4d-grp-caracteristicas {
      background: linear-gradient(90deg, rgba(167, 139, 250, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
      border-color: rgba(167, 139, 250, 0.25);
      border-left-color: #a78bfa;
    }

    .p4d-grp-atividade-econômica {
      background: linear-gradient(90deg, rgba(52, 211, 153, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
      border-color: rgba(52, 211, 153, 0.25);
      border-left-color: #34d399;
    }

    /* Urbanismo e licenciamento — LEI DE USO E OCUPAÇÃO DO SOLO,
       LICENCIAMENTOS e LINHA DO TEMPO. Azul, o tom que P4D_ACC_COLORS já
       reserva para regime urbanístico: as três seções falam da REGRA e do
       PROCESSO sobre o lote, e o púrpura do grupo ao lado ("Ocupação atual",
       classe .p4d-grp-caracteristicas) descreve o que ele É HOJE.
       As duas cores são o que sustenta essa divisão — os dois grupos ficam no
       mesmo painel e na mesma aba, então é pela cor que se lê onde um termina
       e o outro começa. */
    .p4d-grp-urbanismo-e-licenciamento {
      background: linear-gradient(90deg, rgba(96, 165, 250, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
      border-color: rgba(96, 165, 250, 0.25);
      border-left-color: #60a5fa;
    }

    .p4d-grp-tributos {
      background: linear-gradient(90deg, rgba(56, 189, 248, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
      border-color: rgba(56, 189, 248, 0.25);
      border-left-color: #38bdf8;
    }

    /* Acordeões neutros estilo Dark Glass sem bordas multicores pesadas */
    /* Cada seção é uma lâmina pousada sobre a casca: fundo translúcido do
       segundo nível e aresta iluminada no topo.
       SEM `backdrop-filter` aqui, e por dois motivos. O primeiro é que não faz
       nada: o que está atrás da seção é a superfície do próprio painel, já
       desfocada — desfocar de novo um fundo chapado é custo sem efeito. O
       segundo apareceu na tela: `backdrop-filter` promove o elemento a camada
       de composição própria, e as seções passavam a pintar POR CIMA da barra
       de abas grudada no topo, apesar do z-index. O "45 a 46 m" da altura
       máxima atravessava a palavra TRIBUTOS ao rolar. O vidro fica onde ele
       tem o que desfocar: a casca do painel e o cabeçalho, que estão sobre o
       mapa. */
    .p4d-sec-card {
      /* O especular vem ANTES da cor no `background` — é a camada de cima. */
      background: var(--glass-sheen), var(--glass-2);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--glass-edge);
      transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }

    .p4d-sec-card:hover {
      border-color: rgba(255, 255, 255, 0.16);
      background: var(--glass-sheen), var(--glass-3);
    }

    /* Área de Estudo — o painel ganha a faixa violeta do polígono. É o único
       recorte que o usuário desenhou, e a barra é o que diz, de relance, que
       o que está na tela responde por aquele perímetro e não pelo cadastro. */
    #panel.p4d-layer-estudo {
      border-left: 3px solid #a78bfa;
      box-shadow: -6px 0 28px rgba(167, 139, 250, 0.22), 0 16px 48px rgba(0, 0, 0, 0.65);
    }

    /* Estilo distintivo para Lote Público */
    #panel.p4d-layer-lote-proprio {
      border-left: 3px solid #00e5ff;
      box-shadow: -6px 0 28px rgba(0, 229, 255, 0.22), 0 16px 48px rgba(0, 0, 0, 0.65);
    }
    .p4d-card-proprio {
      background: linear-gradient(135deg, rgba(0, 229, 255, 0.09) 0%, rgba(15, 23, 42, 0.75) 100%);
      border: 1px solid rgba(0, 229, 255, 0.28);
      border-left: 4px solid #00e5ff;
      border-radius: 8px;
      padding: 12px 14px;
      margin-bottom: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }
    .p4d-card-proprio .prop-head {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--display);
      font-size: 11.5px;
      font-weight: 800;
      color: #00e5ff;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(0, 229, 255, 0.15);
    }

    /* Aberta, a lâmina sobe um degrau: mesmo fundo do hover mais uma sombra
       projetada curta. Sem ela, seção aberta e fechada tinham a mesma
       espessura e a pilha ficava plana. */
    .p4d-sec-card[open] {
      background: var(--glass-sheen), var(--glass-3);
      border-color: rgba(255, 255, 255, 0.16);
      box-shadow: var(--glass-edge), 0 8px 22px -12px rgba(0, 0, 0, 0.75);
    }

    /* O cabeçalho da seção puxa um fio da cor da família, esmaecendo para a
       direita — o mesmo desenho da barra do grupo logo acima, num tom mais
       fraco. É o que amarra a seção ao conjunto sem transformar a caixa num
       bloco colorido: o dado dentro dela continua sendo o que se lê primeiro. */
    .p4d-sec-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 12px;
      cursor: pointer;
      list-style: none;
      user-select: none;
      transition: background 0.15s ease;
      background: linear-gradient(90deg,
        color-mix(in srgb, var(--sec-c) 9%, transparent) 0%,
        transparent 62%);
    }
    .p4d-sec-card[open] > .p4d-sec-summary {
      border-bottom: 1px solid color-mix(in srgb, var(--sec-c) 18%, transparent);
    }
    .p4d-sec-summary::-webkit-details-marker { display: none; }

    .p4d-sec-titlewrap {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    /* ── A SEÇÃO INTEIRA NA COR DELA ─────────────────────────────────────
       Ícone, nome e chevron leem o mesmo `--sec-c`, que o `_mkSecLF` escreve
       no `details` a partir de P4D_ACC_COLORS. Antes só o ícone era pintado e
       o nome ficava branco: dentro do grupo ATIVIDADE ECONÔMICA, verde, o
       ícone verde de "Economia ativa" convivia com o nome dela em branco, e a
       família se perdia justamente na linha que a nomeia.

       A cor continua sendo a do TEMA do dado, não a do grupo — ITBI é âmbar
       (transação de mercado) e IPTU é rosa (tributo recorrente) mesmo os dois
       morando sob TRIBUTOS. O que muda é que agora a seção é toda de um tom só,
       em vez de meia pintada.

       O fallback existe para quem chame _mkSecLF sem cor: some a cor, o título
       volta ao branco de antes em vez de herdar algo imprevisto. */
    .p4d-sec-card { --sec-c: rgba(255, 255, 255, 0.9); }

    .p4d-sec-ic {
      font-size: 14px;
      line-height: 1;
      flex-shrink: 0;
      color: var(--sec-c);
    }

    .p4d-sec-tit {
      font-size: 11px;
      font-weight: 700;
      color: var(--sec-c);
      letter-spacing: 0.06em;
      font-family: var(--display);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: uppercase;
    }

    /* O chevron acompanha, mas apagado: ele é controle, não conteúdo — no tom
       cheio competiria com o nome da seção logo ao lado. */
    .p4d-sec-card > .p4d-sec-summary .p4d-chev {
      color: var(--sec-c);
      opacity: 0.6;
    }
    .p4d-sec-card[open] > .p4d-sec-summary .p4d-chev { opacity: 0.85; }

    /* Cor vinda de CLASSE não passa pela tinturaria do DOM — ela reescreve
       `style=` inline, e estas regras moram numa folha (90-manual.css). São as
       únicas do conteúdo das seções nesse caso; ficam aqui, presas a --sec-c.
       O #panel-body à frente desempata contra a folha que carrega depois. */
    #panel-body .p4d-sec-card .iptu-evo-btn.active,
    #panel-body .p4d-sec-card .iptu-evo.itbi .iptu-evo-btn.active {
      color: var(--sec-c);
      background: color-mix(in srgb, var(--sec-c) 16%, transparent);
      border-color: color-mix(in srgb, var(--sec-c) 45%, transparent);
    }

    /* O "?" também entra na cor da família. As regras .card-info-btn.k-* vivem
       em 70-explorar.css, que carrega DEPOIS deste arquivo e tem a mesma
       especificidade — daí o #panel-body à frente, que desempata sem precisar
       de !important. Fora do painel (Explorar) o botão segue como estava. */
    #panel-body .p4d-sec-card .card-info-btn {
      color: var(--sec-c);
      background: color-mix(in srgb, var(--sec-c) 15%, transparent);
      border-color: color-mix(in srgb, var(--sec-c) 40%, transparent);
    }
    #panel-body .p4d-sec-card .card-info-btn:hover {
      background: color-mix(in srgb, var(--sec-c) 30%, transparent);
    }

    .p4d-sec-extrawrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .p4d-sec-content {
      padding: 4px 10px 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    /* Barra de Ações Rápidas no Rodapé (ocultada conforme solicitação) */
    .p4d-footer-actions {
      display: none !important;
    }

    .p4d-foot-ic {
      font-size: 13px;
      line-height: 1;
    }

    /* EU picker popup */
    .eu-picker {
      background: rgba(6, 13, 24, 0.97);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 6px;
      min-width: 220px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    }

    .eu-picker-title {
      font-family: var(--display);
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.12em;
      padding: 2px 8px 8px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 4px;
    }

    .eu-picker-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 8px;
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.12s;
    }

    .eu-picker-item:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .eu-picker-dm {
      font-family: var(--display);
      font-size: 11px;
      padding: 3px 7px;
      border-radius: 4px;
      background: rgba(56,189,248, 0.15);
      color: var(--c-setor);
      border: 1px solid rgba(56,189,248, 0.25);
      letter-spacing: 0.05em;
      flex-shrink: 0;
    }

    .eu-picker-eu {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .eu-picker-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 1px;
    }

    /* Botão de ícone do topbar (.tb-icon-btn), em corpo menor: mesma caixa
       quadrada de raio 9, contorno que só aparece no hover. */
    #panel-close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      cursor: pointer;
      color: rgba(255,255,255,.72);
      font-size: 15px;
      line-height: 1;
      padding: 0;
      border-radius: 9px;
      border: 1px solid transparent;
      background: transparent;
      transition: color 0.18s, background 0.18s, border-color 0.18s;
      /* Controle, não conteúdo: não cede espaço para o tag do cabeçalho. */
      flex-shrink: 0;
      margin-left: 10px;
    }

    #panel-close:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.09);
      border-color: rgba(255, 255, 255, 0.12);
    }


    #panel-body {
      padding: 14px 16px 18px;
      font-size: 15px;
      line-height: 1.7;
      overflow-y: auto;
      overflow-x: hidden;
      flex: 1;
      min-height: 0;
      /* Acima do brilho de #panel::before, que é z-index 0. */
      position: relative;
      z-index: 1;
    }

    #panel-body .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      padding: 6px 0;
    }

    #panel-body .row:last-child {
      border-bottom: none;
    }

    #panel-body .label {
      color: rgba(226, 232, 240, 0.78);
      font-size: 13px;
      letter-spacing: 0.01em;
    }

    #panel-body .value {
      color: #ffffff;
      font-weight: 600;
      text-align: right;
      max-width: 240px;
      word-break: break-word;
      font-family: var(--display);
      font-size: 13.5px;
      letter-spacing: 0.02em;
    }

    #panel-body .panel-section-label {
      font-family: var(--display);
      font-size: 11.5px;
      font-weight: 700;
      color: #f1f5f9;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 8px 0 4px;
      display: block;
    }

    #panel-body .panel-section-label:first-child {
      padding-top: 2px;
    }

    .proj-section-title {
      font-family: var(--display);
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--muted);
      margin: 12px 0 6px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }

    .proj-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 9px 11px;
      margin-bottom: 6px;
      font-size: 13px;
    }

    .proj-card .proj-tipo {
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
      font-size: 13px;
    }

    .proj-card .proj-row {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 12px;
    }

    .proj-card .proj-row span {
      color: var(--text);
    }

    .badge-deferido {
      color: #81c784;
    }

    .badge-indeferido {
      color: #ef9a9a;
    }

    .badge-outro {
      color: var(--muted);
    }

    .proj-empty {
      color: var(--muted);
      font-size: 13px;
      font-style: italic;
      margin-top: 8px;
    }

    /* Aba de projetos (details accordion dentro do painel) */
    .proj-details {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 8px;
      overflow: hidden;
    }

    .proj-details summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 14px;
      cursor: pointer;
      user-select: none;
      list-style: none;
      font-size: 13px;
      color: var(--muted);
    }

    .proj-details summary::-webkit-details-marker {
      display: none;
    }

    .proj-details summary .proj-sum-count {
      font-family: var(--display);
      font-size: 20px;
      color: var(--text);
      font-weight: 700;
    }

    .proj-details summary .proj-sum-label {
      font-size: 11px;
      letter-spacing: 0.1em;
      font-family: var(--display);
    }

    .proj-details summary .proj-chevron {
      font-size: 12px;
      transition: transform 0.2s;
    }

    .proj-details[open] summary .proj-chevron {
      transform: rotate(90deg);
    }

    .proj-details-body {
      padding: 0 8px 8px;
    }

    /* ── Sub-accordions dentro do card de empresa (mesmo padrão dos demais) ── */
    .rf-sub { margin-top: 6px; }
    .rf-sub > summary {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 9px; cursor: pointer; user-select: none; list-style: none;
      background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      border-radius: 6px;
    }
    .rf-sub[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .rf-sub > summary::-webkit-details-marker { display: none; }
    .rf-sub > summary .rf-sub-label {
      font-family: var(--display); font-size: 11px; letter-spacing: 0.08em; color: var(--sec-c, #26c6da);
    }
    .rf-sub > summary .rf-sub-chev { font-size: 11px; color: var(--sec-c, #26c6da); transition: transform 0.2s; }
    .rf-sub[open] > summary .rf-sub-chev { transform: rotate(90deg); }
    .rf-sub-body {
      border: 1px solid var(--border); border-top: none;
      border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
      padding: 6px 10px;
    }
    .rf-sub-body .rf-row { font-size: 12px; color: var(--muted); padding: 2px 0; line-height: 1.4; }
    .rf-sub-body .rf-row b { color: var(--text); font-weight: 600; }
    /* ── Escada CNAE (estrutura hierárquica nos moldes do CONCLA/IBGE) ── */
    .rf-esc { margin: 2px 0; }
    .rf-esc > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; list-style: none; padding: 5px 7px; border-radius: 6px; }
    .rf-esc > summary::-webkit-details-marker { display: none; }
    .rf-esc > summary:hover { background: rgba(255,255,255,0.04); }
    .rf-esc-chev { font-size: 10px; color: var(--sec-c, #26c6da); transition: transform 0.2s; flex-shrink: 0; }
    .rf-esc[open] > summary .rf-esc-chev { transform: rotate(90deg); }
    .rf-esc-body { margin-left: 10px; padding-left: 9px; border-left: 1px solid color-mix(in srgb, var(--sec-c, #26c6da) 22%, transparent); }
    .rf-esc-leaf { display: flex; align-items: center; gap: 6px; padding: 4px 7px; }
    .rf-esc-lbl { flex: 1; min-width: 0; font-size: 12px; line-height: 1.35; }
    .rf-esc-code { color: var(--sec-c, #26c6da); font-family: var(--display); font-weight: 700; }
    .rf-esc-name { color: var(--text); }
    .rf-esc-n { flex-shrink: 0; font-family: var(--display); font-size: 11px; color: var(--muted); background: rgba(255,255,255,0.05); border-radius: 9px; padding: 1px 7px; }

    /* ── Accordion por empresa (Lote Fiscal / Quadra / Setor / Distrito) ── */
    .rf-emp { margin-bottom: 6px; background: color-mix(in srgb, var(--sec-c, #26c6da) 4%, transparent); border: 1px solid color-mix(in srgb, var(--sec-c, #26c6da) 18%, transparent); border-radius: 8px; overflow: hidden; }
    /* Summary em coluna: cada linha usa a largura toda. A situação + ano NÃO
       ficam à direita do título — se ficassem, roubariam largura dele na altura
       inteira do bloco e a atividade truncaria muito antes do fim da caixa.
       Elas descem para a linha do selo, encostadas à direita por margin-left:auto
       (que funciona com ou sem selo, ao contrário de justify-content). */
    .rf-emp > summary { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; cursor: pointer; list-style: none; user-select: none; }
    .rf-emp > summary::-webkit-details-marker { display: none; }
    .rf-emp-top { display: flex; align-items: flex-start; gap: 8px; }
    .rf-emp-name { font-size: 12.5px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rf-emp-porte { font-size: 10.5px; color: var(--muted); display: block; }
    .rf-emp-meta { display: flex; align-items: center; gap: 8px; min-height: 16px; }
    .rf-emp-sit { margin-left: auto; font-size: 11px; font-weight: 600; white-space: nowrap; }
    .rf-emp-chev { font-size: 11px; color: var(--sec-c, #26c6da); transition: transform 0.2s; flex-shrink: 0; }
    .rf-emp[open] > summary .rf-emp-chev { transform: rotate(180deg); }
    .rf-emp-body { padding: 0 8px 8px; }

    /* ── Grupos por porte da empresa (Lote Fiscal / Quadra / Setor / Distrito) ── */
    .rf-grp { margin-bottom: 6px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.02); }
    .rf-grp > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; cursor: pointer; list-style: none; user-select: none; }
    .rf-grp > summary::-webkit-details-marker { display: none; }
    .rf-grp-label { font-family: var(--display); font-size: 11px; letter-spacing: 0.06em; color: var(--gc, var(--sec-c, var(--sec-c, #26c6da))); font-weight: 600; }
    .rf-grp-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .rf-grp-n { font-size: 11px; font-family: var(--display); color: var(--gc, var(--sec-c, var(--sec-c, #26c6da))); background: rgba(255,255,255,0.05); border-radius: 10px; padding: 1px 8px; }
    .rf-grp-chev { font-size: 11px; color: var(--gc, var(--sec-c, var(--sec-c, #26c6da))); transition: transform 0.2s; }
    .rf-grp[open] > summary .rf-grp-chev { transform: rotate(180deg); }
    .rf-grp-body { padding: 7px 8px 8px; border-top: 1px solid var(--border); }
    /* Chip do porte: "9 ativas" — o total fica só no title do chip */
    .rf-grp-n .rf-grp-act { color: var(--gc, var(--sec-c, var(--sec-c, #26c6da))); font-weight: 700; }

    /* Rótulo de família dentro do painel (CARACTERÍSTICAS / PROCESSOS / …) */
    .p4d-grupo {
      font-family: var(--body);
      font-size: var(--fs-micro);
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
      margin: 12px 2px 2px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .p4d-grupo:first-child { margin-top: 2px; }
    /* Contagem do que vem abaixo do rótulo. `order:1` a joga para depois do fio
       (o ::after), encostada à direita — é a posição que a meta do item ocupa
       no menu de mapa base do topbar (.tb-base-item .fonte). */
    .p4d-grupo-n {
      order: 1;
      font-family: var(--display);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,.45);
      flex-shrink: 0;
    }

    /* Divisor de natureza na coluna de menus: diz por que as seções acima
       são cianas e as abaixo, neutras. */
    .sb-grupo {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 16px 14px 6px;
      font-family: var(--body);
      /* 8,5px com tracking de 0.26em não se lia como palavra, só como textura.
         11px e um pouco mais de contraste devolvem a função de dividir a barra
         em DADOS e ANÁLISE; o tracking cai junto, senão a palavra se esgarça. */
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.55);
    }
    .sb-grupo::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,.10), transparent);
    }
    .sb-grupo.dados { color: rgba(56,189,248,.85); }
    .sb-grupo.dados::after { background: linear-gradient(90deg, rgba(56,189,248,.22), transparent); }
    .p4d-grupo::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,.12), transparent);
    }

    /* Chevron do accordion gira ao abrir — antes era um ▾ estático e não
       dava para saber, olhando, qual bloco estava aberto. */
    #panel-body details > summary .p4d-chev {
      transition: transform .2s ease;
      display: inline-block;
    }
    #panel-body details[open] > summary .p4d-chev { transform: rotate(180deg); }
    #panel-body details > summary:hover { background: rgba(255,255,255,.04); }

    /* ── Cabeçalho consolidado do accordion EMPRESAS ── */
    .rf-head { margin-bottom: 9px; }
    .rf-head-stats { font-size: 13px; color: var(--text); letter-spacing: 0.01em; }
    .rf-head-stats b { font-family: var(--display); font-weight: 700; }
    .rf-head-stats .rf-head-sep { color: var(--muted); margin: 0 5px; }
    .rf-head-stats .rf-head-act { color: var(--sec-c, #26c6da); }
    .rf-head-stats .rf-head-pct { color: var(--muted); font-size: 11px; }
    .rf-head-aprox { font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; cursor: help; }
    .rf-head-aprox b { color: var(--sec-c, #26c6da); font-weight: 600; }

    /* ── Bloco RISCO (ativas) — barra + legenda sempre visíveis ── */
    .rf-risco { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; margin-bottom: 9px; }
    .rf-risco-head { font-family: var(--display); font-size: 11px; letter-spacing: 0.06em; color: var(--sec-c, #26c6da); font-weight: 600; margin-bottom: 7px; }
    .rf-risco-head .rf-risco-sub { color: var(--muted); font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
    .rf-risco-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; margin-bottom: 8px; background: rgba(255,255,255,0.06); }
    .rf-risco-leg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .rf-risco-leg-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text); }
    .rf-risco-leg-item b { font-family: var(--display); }
    .rf-risco-leg-sep { color: var(--muted); }
    .rf-risco-none { font-size: 10.5px; color: var(--muted); margin-top: 7px; line-height: 1.4; cursor: help; }
    .rf-risco-none b { color: var(--text); font-weight: 600; }

    /* Paginação das empresas (25 por página) */
    .rf-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
    .rf-pg-btn { font-family: var(--display); font-size: 10.5px; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .rf-pg-btn:hover:not([disabled]) { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,0.08); }
    .rf-pg-btn[disabled] { opacity: 0.35; cursor: default; }
    .rf-pg-info { font-size: 10.5px; color: var(--muted); font-family: var(--display); text-align: center; line-height: 1.3; }

    /* Panel tabs (EU / Lote Fiscal) */
    .ptab-bar {
      display: flex;
      gap: 3px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      margin-bottom: 10px;
    }
    .ptab-btn {
      flex: 1;
      padding: 7px 4px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      color: var(--muted);
      font-family: var(--display);
      font-size: 9px;
      cursor: pointer;
      text-align: center;
      transition: all 0.15s;
      letter-spacing: 0.04em;
      line-height: 1.4;
      white-space: nowrap;
    }
    .ptab-btn:hover {
      border-color: rgba(255,255,255,.52);
      color: var(--text);
    }
    .ptab-btn.active {
      border-color: rgba(56,189,248,0.5);
      color: #38bdf8;
      background: rgba(56,189,248,0.08);
    }
    .ptab-content { display: none; }
    .ptab-content.active { display: block; }
    .ptab-address {
      font-family: var(--display);
      font-size: 13px;
      color: var(--text);
      font-weight: 500;
      padding: 4px 0 10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      margin-bottom: 10px;
      letter-spacing: 0.02em;
    }
    .ptab-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 60px;
      font-size: 12px;
      color: var(--muted);
      font-family: var(--display);
      letter-spacing: 0.08em;
    }

    /* Área expansível */
    .area-details {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 8px;
      overflow: hidden;
    }

    .area-details summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 14px;
      cursor: pointer;
      user-select: none;
      list-style: none;
      font-size: 13px;
      color: var(--muted);
    }

    .area-details summary::-webkit-details-marker {
      display: none;
    }

    .area-details summary .area-sum-val {
      font-family: var(--display);
      font-size: 17px;
      color: var(--text);
      font-weight: 700;
    }

    .area-details summary .area-sum-label {
      font-size: 11px;
      letter-spacing: 0.1em;
      font-family: var(--display);
    }

    .area-details summary .area-chevron {
      font-size: 12px;
      transition: transform 0.2s;
    }

    .area-details[open] summary .area-chevron {
      transform: rotate(90deg);
    }

    .area-sub {
      display: flex;
      gap: 8px;
      padding: 0 10px 10px;
    }

    .area-sub-card {
      flex: 1;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 6px;
      padding: 7px 8px;
      text-align: center;
    }

    .area-sub-val {
      font-family: var(--display);
      font-size: 14px;
      font-weight: 700;
    }

    .area-sub-label {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }