/* 98-plano-diretor.css — accordion LEI DE USO E OCUPAÇÃO DO SOLO do painel de
   lote (regime da ZOT — PDUS/LUOS). O arquivo e as classes `pd-*` guardam o nome
   antigo da seção, PLANO DIRETOR; só o rótulo mudou.
   Extraído do deploy v11. O NÚMERO no nome é a posição na cascata:
   folha nova entra no FIM da lista do index.html, não no meio. */

    /* ── PLANO DIRETOR do lote fiscal ───────────────────────────────────────
       Reaproveita o desenho do .lf-sub / .lf-row — mesmo raio, mesmo padding,
       mesma tipografia, mesmo peso de valor — trocando a cor pelo ciano-claro
       da seção. Onde divergir do .lf-*, é bug: o accordion está a um clique de
       LICENCIAMENTOS, no mesmo grupo do mesmo painel.

       O #7dd3fc é o que o dashboard já usa em PDUS_C.gratis para o potencial
       construtivo básico: fica na família azul de LICENCIAMENTOS (#60a5fa) e
       LINHA DO TEMPO (#818cf8), seus vizinhos no grupo, sem repetir nenhum dos
       dois nem colidir com OCUPAÇÃO DO SOLO (#c084fc). O --pd-claro é o degrau
       acima, para o segundo nível — mesmo papel do #93c5fd no .lf-sub-2.
       Estas variáveis vivem AQUI porque o build também as leva para o mainline,
       que não tem nada de plano diretor no :root dele. */
    /* --pd e --pd-rgb são o tom da FAMÍLIA da seção, não uma cor própria: o
   accordion vive sob o rótulo "Urbanismo e licenciamento", e neste painel
   quem manda na cor é o grupo (ver _p4dPintaFamilias). Os valores do :root
   abaixo são só a queda para quando a seção é renderizada fora de um grupo. */
.p4d-sec-card{ --pd:var(--sec-c,#7dd3fc); --pd-rgb:var(--sec-rgb,125,211,252);
               --pd-claro:color-mix(in srgb, var(--sec-c, #7dd3fc) 55%, #fff); }
:root{ --pd:#7dd3fc; --pd-rgb:125,211,252; --pd-claro:#bae6fd; --pd-outorga:#8b7cf6;
      /* Os três acentos SEMÂNTICOS do accordion — o que se pode por direito, o
         que diverge entre as fontes e o que é proibido. Eles não podem ser
         --emerald/--amber/--rose: esses três hexes são, ao mesmo tempo, as
         cores de FAMÍLIA de ECONOMIA ATIVA, ITBI e IPTU, e a regra do painel é
         que nenhuma seção use a cor de família de outra (ver _p4dTinge e o
         teste "CORES · a seção inteira no tom da sua família").
         Ficam matizes vizinhos, fora da paleta reservada — a mesma saída que o
         --pd-outorga acima já usava para o violeta. O significado é idêntico;
         o que muda é que agora dá para distinguir semântica de família. */
      --pd-direito:#7dd88f;  --pd-direito-rgb:125,216,143;
      --pd-alerta:#f0a92c;   --pd-alerta-rgb:240,169,44;
      --pd-proibido:#f2617a; --pd-proibido-rgb:242,97,122; }
    /* ── TIPOGRAFIA ───────────────────────────────────────────────────────────
       O card M² IMOBILIÁRIO é a referência de MÉTODO, não de corpo. Dele vêm
       duas decisões, e só elas:

       1. DUAS famílias, por papel. Rótulo e valor em var(--display); o texto
          explicativo NÃO declara família e cai no var(--body) do painel. O
          pd-* usava --display em tudo, inclusive na prosa legal — e display
          em caixa alta, com tracking, lê menor e mais apertado do que é.
       2. Tracking curto: .07em nos rótulos, não .1em.

       O CORPO é deliberadamente MAIOR que o do M². Lá o rótulo é 9.5px e o
       valor 15px, dimensionados para quatro cards de uma linha só de texto.
       Aqui o valor carrega unidade, prefixo ("até ≈") e linha de apoio, e a
       9.5px o rótulo em caixa alta com tracking perdia legibilidade. Quem
       comparar os dois cards lado a lado vai ver a diferença: ela é intencional.

       Escala aplicada (a mesma em todo o accordion, sem exceção por bloco):
         rótulo/título ........ 12px  · display · .07em · caixa alta
         valor principal ...... 20px  · display · 700
         texto explicativo .... 13px  · body   — prosa das linhas e sub-blocos
         observação/auxiliar .. 11px  · body   — legenda colada a um número
       A linha de apoio dos cards do resumo (`.pd-kpi .s`) é do segundo tipo, e
       ficou em 11px: a 13px ela saía MAIOR que o rótulo de 12px que a encima —
       "Teto do aeródromo · LUOS 130 m · cota da faixa mais próxima" ocupava três
       linhas e pesava mais que o número que explica. */
    /* ── pd-* do accordion ────────────────────────────────────────────────────── */
    .pd-sub{background:rgba(var(--pd-rgb),.04);border:1px solid rgba(var(--pd-rgb),.18);border-radius:8px;overflow:hidden;margin-bottom:6px}
    .pd-sub>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;cursor:pointer;list-style:none;user-select:none}
    .pd-sub>summary::-webkit-details-marker{display:none}
    /* Segundo nível — os quatro blocos dentro de REGIME VOLUMÉTRICO. Mesma
       família um degrau abaixo: SEM preenchimento, senão o .04 do filho soma
       com o .04 da mãe e a caixa de dentro fica mais clara que a de fora, que
       é o inverso da hierarquia. Mesma solução do .lf-sub-2. */
    .pd-sub .pd-sub{background:transparent;border-color:rgba(var(--pd-rgb),.16)}
    .pd-sub .pd-sub>summary .pd-sub-label,
    .pd-sub .pd-sub>summary .pd-sub-badge{color:var(--pd-claro)}
    .pd-sub>summary .pd-sub-label{font-family:var(--display);font-size:12px;letter-spacing:.07em;color:var(--pd)}
    .pd-sub>summary .pd-sub-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
    .pd-sub>summary .pd-sub-badge{font-family:var(--display);font-size:13px;font-weight:700;color:var(--pd)}
    .pd-sub>summary .pd-sub-chev{font-size:12px;color:var(--muted);transition:transform .2s}
    .pd-sub[open]>summary .pd-sub-chev{transform:rotate(180deg)}
    .pd-sub-body{padding:4px 11px 8px}
    .pd-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--body);color:var(--pd);font-size:13px;line-height:1.5;padding:2px 0}
    .pd-row>span:first-child{font-family:var(--display);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--pd);min-width:0;overflow-wrap:anywhere}
    /* max-width: garante 35% da linha para o rótulo. Sem ele "PADRÃO DE
       PARCELAMENTO" era espremido pelo valor. Peso 400, como no .lf-row: o
       valor aqui é quase sempre texto, e o negrito não estava separando nada
       que a cor branca contra o rótulo ciano já não separasse. */
    .pd-row>span:last-child{color:var(--text);text-align:right;max-width:65%;overflow-wrap:anywhere}
    .pd-row .na{color:var(--t3);font-weight:400}
    .pd-txt{font-family:var(--body);font-size:13px;color:var(--text);line-height:1.5;padding:2px 0 4px}
    .pd-txt>span{display:block;font-family:var(--display);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--pd);margin-bottom:2px}
    .pd-big{display:flex;gap:8px;margin:6px 0 2px}
    .pd-big>div{flex:1;background:rgba(var(--pd-rgb),.08);border:1px solid rgba(var(--pd-rgb),.22);border-radius:10px;padding:8px 10px;min-width:0}
    .pd-big .k{font-family:var(--display);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--pd);line-height:1.3}
    .pd-big .v{font-family:var(--display);font-size:20px;font-weight:700;color:var(--text);line-height:1.2;margin-top:2px}
    .pd-big .v small{font-size:11px;font-weight:500;color:var(--t2);margin-left:2px}
    .pd-big.outorga>div{background:rgba(139,124,246,.07);border-color:rgba(139,124,246,.25)}
    .pd-big.outorga .k{color:var(--pd-outorga)}
    .pd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:2px 0 6px;align-items:stretch}
    /* Fundo, borda e raio são os do card do OCUPAÇÃO DO SOLO — o card colorido
       do mesmo painel, e o vizinho mais próximo em natureza. O padding NÃO é:
       são três cards numa faixa de ~410px, e os 4px a mais de cada lado
       reabririam o corte de "PERMEABILIDADE" que a nota abaixo descreve. */
    .pd-kpi{background:rgba(var(--pd-rgb),.08);border:1px solid rgba(var(--pd-rgb),.22);border-radius:10px;padding:8px 10px;min-width:0}
    .pd-kpi.hero{margin-bottom:6px}
    /* Rótulo 12px e valor 20px/700 — a escala do accordion (ver TIPOGRAFIA no
       topo), acima dos 9.5/15 do M² IMOBILIÁRIO e por isso mais alta.
       flex-wrap + overflow-wrap: numa coluna de ~112px úteis "PERMEABILIDADE" é
       uma palavra só e mais larga que o card — sem isto ela vaza e o E some. */
    .pd-kpi .k{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;font-family:var(--display);font-size:12px;
      letter-spacing:.07em;text-transform:uppercase;color:var(--pd);line-height:1.25;min-width:0;overflow-wrap:anywhere}
    .pd-kpi .v{font-family:var(--display);font-size:20px;font-weight:700;color:var(--text);line-height:1.2;margin-top:4px;overflow-wrap:break-word}
    .pd-kpi .v .pre{font-size:11px;font-weight:500;color:var(--text)}
    .pd-kpi .v small{font-size:11px;font-weight:500;color:var(--text);margin-left:2px}
    .pd-kpi .v .n{white-space:nowrap}
    /* Mesma regra do card grande: os três cards são o mesmo resumo, e a linha
       de apoio deles ("Teto do aeródromo · LUOS 130 m") era o texto mais
       apagado da seção inteira. */
    .pd-kpi .s{font-family:var(--body);font-size:11px;color:var(--text);line-height:1.45;margin-top:3px}
    /* Os três cards do resumo lado a lado: "ALTURA MÁXIMA" cabe em uma linha,
       "RECUO BASE DA ZOT" e "TAXA DE PERMEABILIDADE" ocupam duas — e os números
       saíam em três alturas diferentes, cada um ancorado no fim do seu próprio
       rótulo. Reservar duas linhas para todo rótulo põe os três valores na mesma
       linha de leitura. Só nos três da grade: o card grande tem rótulo único e
       ganharia um vão. */
    .pd-kpis .pd-kpi{display:flex;flex-direction:column}
    .pd-kpis .pd-kpi .k{min-height:2.5em}
    .pd-legal{font-size:10.5px;line-height:1.45;margin:0 0 7px;padding:8px 10px;border-radius:8px;
      border:1px solid rgba(var(--pd-alerta-rgb),.3);background:rgba(var(--pd-alerta-rgb),.07);color:var(--t2)}
    .pd-legal.vigente{border-color:rgba(var(--pd-direito-rgb),.3);background:rgba(var(--pd-direito-rgb),.07)}
    .pd-legal>div+div{margin-top:3px}
    .pd-legal-tag{font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.1em;
      color:var(--pd-alerta);text-transform:uppercase}
    .pd-legal.vigente .pd-legal-tag{color:var(--pd-direito)}
    /* ── COR SÓ PARA SIGNIFICADO, HIERARQUIA POR CORPO E PESO ───────────────
       O resumo tinha quatro níveis de cinza sobre o azul do card: valor em
       branco, unidade e prefixo em --t2, rótulo e observação em --t3. Empilhados
       num card translúcido, os dois últimos ficavam no limite do legível — e o
       degrau de cinza não estava dizendo nada que o corpo da fonte já não
       dissesse (20px/700 contra 11px/500).
       Agora todo texto deste bloco é --text. Cor aqui passou a ter UM emprego
       só, e ele é semântico: VERDE é o que se constrói por direito, VIOLETA é o
       que depende de outorga onerosa ou TDC. Onde não há verde nem violeta,
       não há o que a cor precise dizer. */
    .pd-trilha-v .aprox{font-size:11px;font-weight:500;color:var(--text)}

    /* ETIQUETA DO CA — duas tarjas coladas: o prefixo e o par de números,
       divididas por um fio. Uma pílula de fundo único ainda lia como "texto
       destacado"; a divisão é o que faz a forma dizer ETIQUETA antes de
       qualquer palavra ser lida — cabeçalho à esquerda, valor à direita, como
       numa plaqueta. Cantos de 7px, e não 999px: a plaqueta é retangular; a
       pílula pertence aos chips de status, que são outra coisa no painel. */
    .pd-ca{display:inline-flex;align-items:stretch;flex-shrink:0;
      border-radius:7px;overflow:hidden;
      background:rgba(var(--pd-rgb),.10);border:1px solid rgba(var(--pd-rgb),.34);
      font-family:var(--display);line-height:1;white-space:nowrap;
      text-transform:none;color:var(--pd)}
    .pd-ca i{display:flex;align-items:center;font-style:normal;
      font-size:9px;font-weight:700;letter-spacing:.14em;
      padding:5px 6px 5px 7px;background:rgba(var(--pd-rgb),.17);
      border-right:1px solid rgba(var(--pd-rgb),.3)}
    .pd-ca .vv{display:flex;align-items:center;gap:3px;padding:5px 8px 5px 7px;
      font-size:12.5px;font-weight:700;letter-spacing:.01em}
    .pd-ca em{font-style:normal;font-weight:400;opacity:.6}

    /* Trilhas do card grande — duas trilhas de dois degraus, não uma escada.
       Cada uma vira um cartão RECUADO (fundo mais escuro que o do card que as
       contém): antes as duas eram separadas só por espaço, e com quatro números,
       dois rótulos e duas linhas de observação em cada uma, ler onde terminava
       o regime padrão e começava o +4D dependia de contar as linhas. Recuado, e
       não realçado, porque o card grande já é a superfície colorida — mais uma
       camada clara por cima achataria a hierarquia. */
    .pd-trilha{padding:9px 10px 8px;border-radius:9px;
      background:rgba(0,0,0,.16);border:1px solid rgba(var(--pd-rgb),.14)}
    .pd-trilha + .pd-trilha{margin-top:6px}
    /* A trilha principal é a que vale HOJE, sem condição nenhuma. Ganha a borda
       um degrau mais firme; o cenário +4D depende de pontuação e deferimento, e
       fica um passo atrás. */
    .pd-trilha.pri{border-color:rgba(var(--pd-rgb),.26)}
    .pd-trilha-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
    .pd-trilha-h .nm{font-family:var(--display);font-size:12px;letter-spacing:.07em;
      text-transform:uppercase;color:var(--pd);min-width:0;overflow-wrap:anywhere}
    .pd-trilha-v{display:flex;align-items:baseline;gap:8px;margin-top:7px}
    .pd-trilha-v .d,.pd-trilha-v .t{min-width:0}
    .pd-trilha-v .seta{color:var(--text);font-size:13px;flex-shrink:0}
    /* UM tamanho para os quatro números do card, e é o mesmo 14px/700 dos
       outros três cards do resumo e do card do OCUPAÇÃO DO SOLO. Antes a
       trilha principal ia a 17px e a condicionada a 13,5px: o MESMO campo
       ("teto estimado") saía em dois tamanhos, um em cima do outro. A
       hierarquia entre as trilhas fica na cor e no rótulo do CA, não no corpo
       da fonte. */
    .pd-trilha-v .val{font-family:var(--display);font-size:20px;font-weight:700;color:var(--text);line-height:1.2;white-space:nowrap}
    .pd-trilha-v .val small{font-size:11px;font-weight:500;color:var(--text);margin-left:2px}
    .pd-trilha-v .val .pre{font-size:11px;font-weight:500;color:var(--text)}
    .pd-trilha-v .lb{font-family:var(--display);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text);line-height:1.3;margin-top:1px}
    /* DUAS cores, e as mesmas nas duas trilhas: verde é o que se constrói POR
       DIREITO, apagado é o TETO — que só se alcança comprando potencial. Antes o
       teto do regime padrão saía em branco cheio e o do +4D em cinza, então o
       mesmo campo tinha dois pesos, e o número mais condicionado da tela era o
       mais berrante. Com a regra igual nos dois, dá para ver de relance que o
       teto do padrão (6.472,50) é exatamente o direito do +4D. */
    .pd-trilha-v .d .val{color:var(--pd-direito)}
    .pd-trilha-v .d .lb{color:var(--pd-direito)}
    /* O teto volta ao branco cheio: é um número principal como o outro, e o que
       distingue os dois é o verde de quem tem direito, não o apagamento de quem
       não tem. Continua dando para ler que o teto do padrão é o direito do +4D —
       o que mudou é que agora dá para LER o número. */
    .pd-trilha-v .t .val{color:var(--text)}
    /* A linha da outorga é a diferença entre os dois números acima — fica presa
       a eles por uma régua, não solta como um terceiro dado da trilha. */
    .pd-trilha-o{font-family:var(--body);font-size:11px;color:var(--pd-outorga);line-height:1.4;
      margin-top:7px;padding-top:6px;border-top:1px dotted rgba(var(--pd-rgb),.16)}
    .pd-trilha-o + .pd-trilha-o{margin-top:3px;padding-top:0;border-top:none}
    .pd-trilha-o.obs{color:var(--text)}

    .pd-nota{font-family:var(--body);font-size:13px;color:var(--t3);line-height:1.5;margin-top:6px}
    .pd-nota b{color:var(--t2)}
    .pd-aviso{font-family:var(--body);font-size:13px;line-height:1.5;margin:6px 0;padding:7px 9px;border-radius:7px;
      background:rgba(var(--pd-alerta-rgb),.07);border:1px solid rgba(var(--pd-alerta-rgb),.25);color:var(--t2)}
    .pd-aviso b{color:var(--pd-alerta)}
    .pd-mtx{width:100%;border-collapse:collapse;font-family:var(--body);font-size:12px;margin-top:4px}
    .pd-mtx th{color:var(--pd);font-family:var(--display);font-size:11px;letter-spacing:.05em;text-transform:uppercase;text-align:right;padding:3px 4px;font-weight:600}
    .pd-mtx th:first-child{text-align:left}
    .pd-mtx td{color:var(--text);text-align:right;padding:3px 4px;border-top:1px solid rgba(var(--pd-rgb),.1)}
    .pd-mtx td:first-child{text-align:left;color:var(--t2)}
    .pd-mtx td.na{color:var(--t3)}
    .pd-mtx td.pro{color:var(--pd-proibido)}
    .pd-mtx td.sl{color:var(--pd-direito)}
    .pd-mtx tr.direito td{background:rgba(var(--pd-direito-rgb),.07)}
    .pd-mtx tr.direito td:first-child{color:var(--pd-direito)}

    .pd-badge{display:inline-block;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.05em;
      text-transform:uppercase;padding:1.5px 5px;border-radius:4px;vertical-align:middle;margin-left:4px}
    .pd-badge.div{background:rgba(var(--pd-alerta-rgb),.14);border:1px solid rgba(var(--pd-alerta-rgb),.4);color:var(--pd-alerta)}
    .pd-badge.dir{background:rgba(var(--pd-direito-rgb),.14);border:1px solid rgba(var(--pd-direito-rgb),.4);color:var(--pd-direito)}
    .pd-badge.prov{background:rgba(125,211,252,.12);border:1px solid rgba(125,211,252,.35);color:var(--pd)}
    .pd-badge.pend{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--t3)}
    /* Fonte legal: a marca de que o número tem origem. Sem entrada no dicionário,
       não se renderiza nada — a ausência é o que o critério 8 procura. */
    .pd-fonte{border-bottom:1px dotted rgba(var(--pd-rgb),.45);cursor:help;outline:none}
    .pd-fonte:focus{border-radius:2px;box-shadow:0 0 0 2px rgba(var(--pd-rgb),.3)}
    .pd-tr{border-top:1px solid rgba(var(--pd-rgb),.12);margin:7px 0 5px;padding-top:6px}
    .pd-h{font-family:var(--display);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--pd);margin-bottom:3px}
    .pd-li{font-family:var(--body);font-size:13px;color:var(--t2);line-height:1.5;padding-left:11px;position:relative;margin-bottom:1px}
    .pd-li:before{content:'·';position:absolute;left:3px;color:var(--pd)}
    .pd-li.off{color:var(--t3)}
    .pd-inp{background:var(--bg3);border:1px solid rgba(var(--pd-rgb),.3);border-radius:6px;color:var(--t1);
      font-family:var(--display);font-size:13px;padding:4px 7px;width:66px;outline:none}
    .pd-inp:focus{border-color:rgba(var(--pd-rgb),.6)}