﻿/* 91-lotes-filtros.css — filtros de tamanho de lote, etiqueta de contagem e
   os temas de cor por seção do menu (DADOS / ANÁLISE / URBANO)
   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ê.

   O nome anterior era "91-temas-secoes" e mentia: os temas de cor são 5 regras
   no topo, e as outras 149 são o bloco de filtros do lote fiscal (.lf-flt,
   .lf-stat), o overlay de contagem e as linhas de transmissão. Mesmo defeito
   que os nomes do JS tinham — corte feito na bandeira de comentário, que marca
   onde alguém escreveu um título, não onde um assunto começa. */
/* DADOS — camadas que aparecem no mapa */
      .theme-cam{--sec:#38bdf8;--sec-bg:rgba(56,189,248,0.14);}
      .theme-cam .ind-sec-ico{background:var(--sec-bg);color:var(--sec);}
      .theme-cam .ind-sec-ico svg{width:15px;height:15px;}

      .theme-lotes{--sec:#38bdf8;--sec-bg:rgba(56,189,248,0.14);}
      .theme-lotes .ind-sec-ico{background:var(--sec-bg);color:var(--sec);}
      .theme-lotes .ind-sec-ico svg{width:15px;height:15px;}

      /* Filtros do lote fiscal — ancorados ao item Lotes Fiscais, logo acima.
         Viviam na seção FILTROS, colapsada e distante: eram três cliques de
         navegação antes de tocar num valor, com as duas seções nunca cabendo
         juntas na tela. Aqui ficam sempre abertos, sem acordeão. */
      .lf-flt{margin:0 12px 10px 34px;padding:10px 12px 11px;border-radius:0 12px 12px 12px;
        background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);
        border-left:2px solid rgba(56,189,248,0.35);}
      .lf-flt.collapsed{display:none;}
      /* Botão de ajustes na linha de Lotes Fiscais — abre o bloco acima */
      .lf-flt-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
        width:24px;height:24px;margin-right:2px;padding:0;border-radius:7px;cursor:pointer;
        background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--muted);
        transition:color .15s,border-color .15s,background .15s;}
      .lf-flt-btn svg{width:14px;height:14px;display:block;}
      .lf-flt-btn:hover{color:#fff;border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.06);}
      .lf-flt-btn.aberto{color:var(--sec);border-color:rgba(56,189,248,0.45);background:rgba(56,189,248,0.12);}
      /* Filtro restringindo: o botão acende mesmo com o painel fechado */
      .lf-flt-btn.on{color:var(--sec);border-color:var(--sec);background:var(--sec-bg);
        box-shadow:0 0 0 2px rgba(56,189,248,0.14);}
      /* A régua acende em AMARELO, a cor dos rótulos que ela liga no mapa. O
         azul da seção aqui significa "filtro restringindo" — dois estados
         diferentes não podem ter a mesma cor no mesmo cabeçalho. */
      #btn-lt-dims.on{color:#ffcc33;border-color:rgba(255,204,51,0.55);
        background:rgba(255,204,51,0.14);box-shadow:none;}
      .lf-flt-top{display:flex;align-items:center;margin-bottom:8px;}
      .lf-flt-title{flex:1;font-family:var(--display);font-size:9.5px;letter-spacing:.14em;
        text-transform:uppercase;color:var(--muted);}
      .lf-flt-lbl{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text);
        margin:2px 0 6px;transition:color .15s;}
      .lf-flt + .lf-flt{margin-top:12px;}
      .lf-flt-un{color:var(--muted);font-size:10.5px;}
      /* Um card por medida. O estado ativo pinta o card inteiro, não só o dot:
         de relance dá para ver QUAL das duas está restringindo sem ler valor
         nenhum. Fundo e borda em passos discretos — o card aceso não pode
         competir com a etiqueta de contagem no mapa. */
      .lf-flt-grupo{padding:9px 10px 3px;border-radius:9px;
        background:rgba(255,255,255,0.022);border:1px solid rgba(255,255,255,0.055);
        transition:background .15s,border-color .15s;}
      .lf-flt-grupo + .lf-flt-grupo{margin-top:8px;}
      .lf-flt-grupo.on{background:rgba(56,189,248,0.07);border-color:rgba(56,189,248,0.28);}
      .lf-flt-grupo.on .lf-flt-lbl{color:var(--sec);}
      .flt-ate{font-family:var(--display);font-size:9px;letter-spacing:.13em;
        text-transform:uppercase;color:var(--muted);flex-shrink:0;}
      /* Sem filtro ativo não há o que limpar */
      .flt-clear[disabled]{opacity:.3;cursor:default;}
      .flt-clear[disabled]:hover{color:var(--muted);}
      /* Etiqueta de contagem ao vivo — stat tile + medidor.
         Um número solto não dizia se 174 era muito ou pouco; a barra dá a
         proporção sem precisar ler os dois números. O trilho é um passo claro
         da PRÓPRIA cor (ciano sobre ciano), não cinza: assim o estado se lê ao
         longo da barra inteira, e não só na parte preenchida. */
      .lf-flt-count{margin-top:11px;padding:10px 11px 11px;border-radius:10px;
        background:rgba(56,189,248,0.06);border:1px solid rgba(56,189,248,0.18);}
      .lf-stat-top{display:flex;align-items:baseline;gap:7px;}
      /* Figuras proporcionais (sem tabular-nums): num corpo grande, tabular
         abre buracos entre dígitos estreitos como o 1. */
      .lf-stat-val{font-family:var(--display);font-size:25px;font-weight:700;line-height:1;
        color:var(--sec);letter-spacing:-0.01em;}
      .lf-stat-of{font-size:11px;color:var(--muted);line-height:1.2;}
      .lf-stat-of b{font-family:var(--display);font-weight:600;color:rgba(255,255,255,.72);}
      .lf-stat-meter{margin-top:9px;height:4px;border-radius:2px;overflow:hidden;
        background:rgba(56,189,248,0.18);}
      .lf-stat-meter i{display:block;height:100%;border-radius:2px;background:var(--sec);
        transition:width .18s ease;}
      .lf-stat-lbl{margin-top:8px;font-family:var(--display);font-size:9px;letter-spacing:.13em;
        text-transform:uppercase;color:var(--muted);}
      /* Estados sem número: mesma caixa, tom recuado, sem medidor */
      .lf-flt-count.vazio{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.07);
        font-size:11px;color:var(--muted);line-height:1.4;font-style:italic;}
      .lf-flt .flt-vals{margin-bottom:8px;}
      .lf-flt .flt-num{width:7ch;font-size:12px;padding:4px 8px;}
      .lf-flt .flt-hint{margin-top:8px;}

      /* O filtro passou a valer para a seção LOTES inteira, então mora no
         cabeçalho dela e não mais pendurado no item Lotes Fiscais. Sem o recuo
         de 34px que o alinhava ao item. */
      .lf-flt.lf-flt-secao{margin:0 12px 10px;border-radius:12px;}
      /* Detalhamento por camada, quando há mais de uma ligada: o número grande
         é o total, e estas linhas dizem de onde ele vem. */
      .lf-stat-rows{margin-top:9px;padding-top:8px;border-top:1px solid rgba(56,189,248,0.16);
        display:flex;flex-direction:column;gap:4px;}
      .lf-stat-row{display:flex;align-items:baseline;gap:6px;font-size:11px;color:var(--muted);}
      .lf-stat-row span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
      .lf-stat-row b{font-family:var(--display);font-weight:600;color:rgba(255,255,255,.82);}
      .lf-stat-row i{color:var(--sec);font-style:normal;}
      .lf-stat-row-of{opacity:.7;}
      .lf-stat-aviso{margin-top:8px;font-size:10.5px;line-height:1.45;color:var(--muted);font-style:italic;}

      /* ── A MESMA etiqueta, agora como overlay do mapa ──────────────────
         Ela vivia dentro do painel de filtros da seção LOTES, onde custava um
         bloco alto de menu e só existia com a seção aberta. O número fala do
         que está DESENHADO no enquadramento, então passou a morar sobre o
         desenho, no topo da pilha de legendas (#legends-wrap). O markup e as
         classes internas (.lf-stat-*) são os mesmos — muda só a moldura: vidro
         escuro para se ler sobre imagem de satélite, e --sec declarado aqui
         porque fora da barra lateral não há .theme-lotes para herdar. */
      #lote-count-badge{--sec:#38bdf8;margin:0;padding:9px 13px 10px;border-radius:11px;
        min-width:158px;max-width:250px;pointer-events:none;
        background:rgba(6,13,24,0.90);border:1px solid rgba(56,189,248,0.30);
        backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
        box-shadow:0 8px 26px rgba(0,0,0,0.5);}
      #lote-count-badge .lf-stat-val{font-size:22px;}
      #lote-count-badge .lf-stat-meter{margin-top:7px;height:3px;}
      #lote-count-badge .lf-stat-lbl{margin-top:6px;font-size:8.5px;}
      #lote-count-badge .lf-stat-rows{margin-top:7px;padding-top:6px;}
      /* Estados sem número: some do mapa em vez de ocupar espaço com um
         aviso — no menu a caixa vazia servia de âncora, aqui seria só ruído.
         A única exceção é o "aproxime o mapa", que explica por que não há
         número; ela vem como .vazio e o JS decide quando exibir. */
      #lote-count-badge.vazio{min-width:0;max-width:230px;padding:8px 12px;
        background:rgba(6,13,24,0.86);border-color:rgba(255,255,255,0.12);}

      /* Relatório — painel irmão do de filtros: mesmo desenho, mesma largura,
         mesma origem (um ícone no cabeçalho da seção). São as duas ferramentas
         da seção LOTES, e parecer a mesma coisa é o ponto. */
      .lt-rel{margin:0 12px 10px;padding:10px 12px 12px;border-radius:12px;
        background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);
        border-left:2px solid rgba(56,189,248,0.35);}
      .lt-rel.collapsed{display:none;}
      .lt-rel-camadas{display:flex;flex-direction:column;gap:2px;margin-bottom:9px;}
      /* Uma linha por camada ligada: mesmo ritmo visual dos sub-itens do menu */
      .lt-rel-item{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:7px;
        cursor:pointer;font-size:11.5px;color:var(--text);transition:background .12s;}
      .lt-rel-item:hover{background:rgba(255,255,255,0.05);}
      .lt-rel-item input{width:13px;height:13px;accent-color:var(--sec);cursor:pointer;flex-shrink:0;margin:0;}
      .lt-rel-nome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
      .lt-rel-n{font-family:var(--display);font-size:11px;font-weight:600;color:var(--sec);}
      /* Camada ligada mas sem nada no enquadramento: continua na lista (some
         seria pior — o usuário procuraria por ela), só que recuada. */
      .lt-rel-item.vazia{opacity:.45;}
      .lt-rel-item.vazia .lt-rel-n{color:var(--muted);}
      .lt-rel-vazio{font-size:11px;color:var(--muted);font-style:italic;line-height:1.45;
        padding:2px 0 4px;}
      .lt-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;
        padding:9px 10px;border-radius:9px;cursor:pointer;font-family:var(--display);
        font-size:10px;letter-spacing:.12em;text-transform:uppercase;
        background:rgba(56,189,248,0.10);border:1px solid rgba(56,189,248,0.28);color:var(--sec);
        transition:background .15s,border-color .15s,color .15s;}
      .lt-btn svg{width:14px;height:14px;flex-shrink:0;}
      .lt-btn:hover:not([disabled]){background:rgba(56,189,248,0.18);border-color:var(--sec);color:#fff;}
      .lt-btn[disabled]{opacity:.4;cursor:not-allowed;}
      .lt-rel .flt-hint{margin-top:8px;}
    

      .theme-interv{--sec:#38bdf8;--sec-bg:rgba(56,189,248,0.14);}
      .theme-interv .ind-sec-ico{background:var(--sec-bg);color:var(--sec);}
      .theme-interv .ind-sec-ico svg{width:15px;height:15px;}
      /* Camada com ressalva de escopo (hoje só Caminhos Sustentáveis): o
         pontilhado é o que diz "há mais a ler aqui" sem gastar uma linha da
         coluna. O texto vem no `title`, montado por buildIntervMenu(). */
      .iv-name.com-nota{text-decoration:underline dotted rgba(255,255,255,.35);
        text-underline-offset:3px;cursor:help;}

      /* Lista de camadas: o símbolo à esquerda repete EXATAMENTE como a camada
         aparece no mapa — quadrado = área, barra = linha, círculo = ponto. */
      .iv-list{padding:2px 10px 8px 12px;display:flex;flex-direction:column;gap:3px;}
      .iv-row{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;
        background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);
        transition:background .15s,border-color .15s;cursor:pointer;}
      .iv-row:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);}
      .iv-row.on{background:rgba(255,255,255,0.07);}
      .iv-row.on .iv-name{color:var(--text);}
      /* Símbolo 16×16, centralizado, com o glow da própria cor */
      .iv-sym{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
      .iv-sym i{display:block;}
      .iv-sym .area{width:14px;height:12px;border-radius:3px;
        background:rgba(var(--crgb),0.3);border:2px solid var(--c);}
      .iv-sym .linha{width:16px;height:4px;border-radius:2px;background:var(--c);
        box-shadow:0 0 6px var(--c);}
      .iv-sym .linha.tracejada{background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 7px);
        box-shadow:none;}
      .iv-sym .ponto{width:11px;height:11px;border-radius:50%;background:var(--c);
        border:2px solid rgba(255,255,255,.9);box-shadow:0 0 7px var(--c);}
      .iv-name{flex:1;min-width:0;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.88);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      .iv-n{font-family:var(--display);font-size:9.5px;color:rgba(255,255,255,.55);flex-shrink:0;}
      /* Toggle mais estreito que o padrão, para caber o nome inteiro */
      .iv-row .sw{width:30px;height:17px;}
      .iv-row .sw .sw-track::after{top:2.5px;left:2.5px;width:12px;height:12px;}
      .iv-row .sw input:checked + .sw-track::after{transform:translateX(13px);}
    

      /* ANÁLISE — ferramentas sobre o que está no mapa */
      .theme-filt{--sec:#b6c2d2;--sec-bg:rgba(182,194,210,0.12);}
      .theme-filt .ind-sec-ico{background:var(--sec-bg);color:var(--sec);}
      .theme-filt .ind-sec-ico svg{width:15px;height:15px;}
      /* Linha de interruptor da seção */
      .flt-toggle{display:flex;align-items:center;gap:10px;margin:4px 12px 10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);}
      .flt-toggle-label{flex:1;font-size:13px;color:var(--text);letter-spacing:.01em;line-height:1.25;}
      .flt-toggle-sub{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.3;}
      /* Accordion de filtro dentro da seção FILTROS */
      /* Os acordeões .flt-acc saíram junto com os filtros de lote, que hoje
         moram abertos dentro da seção LOTES (ver .lf-flt). O que ficou aqui é
         compartilhado: campos, sliders e o marcador de filtro ativo. */
      .flt-clear{font-family:var(--display);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;padding:2px 4px;transition:color .15s;}
      .flt-clear:hover{color:var(--text);}
      .flt-vals{display:flex;justify-content:space-between;align-items:center;margin:0 0 11px;gap:8px;}
      .flt-num{font-family:var(--display);font-size:13px;font-weight:500;color:var(--text);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:7px;padding:5px 10px;width:9ch;box-sizing:content-box;outline:none;cursor:text;transition:border-color .15s,background .15s,box-shadow .15s;}
      .flt-num::placeholder{color:var(--muted);}
      .flt-num:hover{border-color:rgba(120,160,220,0.55);background:rgba(255,255,255,0.07);}
      .flt-num:focus{border-color:var(--sec);background:rgba(120,160,220,0.12);box-shadow:0 0 0 3px rgba(120,160,220,0.16);}
      .flt-num-r{text-align:right;}
      .flt-max-wrap{display:inline-flex;align-items:center;}
      .flt-plus{font-family:var(--display);font-size:13px;font-weight:500;color:var(--text);margin-left:1px;}
      .flt-vals .unit{color:var(--muted);font-size:11px;margin-left:4px;}
      .rng{position:relative;height:24px;}
      .rng-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;border-radius:2px;background:rgba(255,255,255,0.10);}
      .rng-fill{position:absolute;top:50%;transform:translateY(-50%);height:4px;border-radius:2px;background:var(--sec);left:0;right:0;}
      .rng input[type=range]{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;}
      .rng input[type=range]::-webkit-slider-runnable-track{background:none;border:none;}
      .rng input[type=range]::-moz-range-track{background:none;border:none;}
      .rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--sec);border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.45);cursor:pointer;transition:transform .1s;}
      .rng input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);}
      .rng input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--sec);border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.45);cursor:pointer;}
      .flt-hint{margin-top:9px;font-family:var(--body);font-size:10.5px;line-height:1.4;color:var(--muted);}
      /* Filtro de ANO dos indicadores (ITBI, IPTU, Projetos, Habite-se).
         Mesma mecânica do slider de faixa dos FILTROS, em versão compacta e
         herdando o --sec da seção (roxo no URBANISMO, verde no ECONÔMICO). */
      .yr-flt{margin:2px 0 8px;padding:8px 10px 10px;border-radius:9px;
        background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);}
      .yr-flt-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
      .yr-flt-lbl{font-family:var(--display);font-size:9px;letter-spacing:.14em;color:var(--muted);}
      .yr-flt-val{flex:1;font-family:var(--display);font-size:11.5px;font-weight:700;color:var(--text);}
      .yr-flt .rng{margin:0;}
      .yr-vals{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 9px;}
      .yr-num{width:4ch;font-size:12.5px;padding:4px 9px;text-align:center;}
      .yr-num.flt-num-r{text-align:center;}
      .yr-flt.is-on{border-color:var(--sec);background:var(--sec-bg);}
      .yr-flt.is-on .yr-flt-val{color:var(--sec);}

      /* Marcador de estado dos filtros: anel vazio = no padrão; sólido = restringindo. */
      .flt-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:transparent;
        border:1.5px solid rgba(255,255,255,0.22);box-sizing:border-box;transition:background .15s,border-color .15s,box-shadow .15s;}
      .flt-dot.on{background:var(--sec);border-color:var(--sec);box-shadow:0 0 0 3px var(--sec-bg);}
    

      .theme-urb{--sec:#b6c2d2;--sec-bg:rgba(182,194,210,0.12);}
      .theme-eco{--sec:#b6c2d2;--sec-bg:rgba(182,194,210,0.12);}
      .theme-urb .sw,.theme-eco .sw{--accent-sw:var(--sec);}
      .ind-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;margin:1px 0;}
      .ind-head{cursor:pointer;}
      .ind-head:hover{background:rgba(255,255,255,0.035);}
      .ind-ico{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--sec-bg);color:var(--sec);}
      .ind-ico svg{width:16px;height:16px;display:block;}
      .ind-label{flex:1;font-size:13.5px;color:var(--text);letter-spacing:0.01em;}
      .ind-chev{color:var(--muted);font-size:12px;transition:transform .2s;display:inline-block;transform:rotate(-90deg);margin-right:2px;}
      .ind-sub{position:relative;display:none;flex-direction:column;margin:1px 0 3px 24px;padding-left:16px;}
      .ind-sub::before{content:"";position:absolute;left:0;top:-2px;bottom:16px;width:1.5px;background:rgba(255,255,255,0.10);border-radius:1px;}
      .ind-leaf{position:relative;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;}
      .ind-leaf:hover{background:rgba(255,255,255,0.03);}
      .ind-leaf::before{content:"";position:absolute;left:-16px;top:50%;width:13px;height:1.5px;background:rgba(255,255,255,0.10);}
      .ind-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--sec);box-shadow:0 0 0 3px var(--sec-bg);}
      .ind-leaf-label{flex:1;font-size:12.5px;color:var(--text);}
      .ind-leaf.is-grp{cursor:pointer;}
      /* Chips de PORTE (multi-seleção) dos indicadores de Empresas */
      .emp-porte-chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0 6px;}
      .emp-porte-chips button{font-family:var(--display);font-size:9.5px;letter-spacing:.02em;color:var(--muted);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:4px 8px;cursor:pointer;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;}
      .emp-porte-chips button:hover{color:#fff;}
      .emp-porte-chips button.on{background:rgba(38,198,218,0.16);color:#26c6da;border-color:rgba(38,198,218,0.32);}
      .emp-porte-chips button .pdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;}
      .ind-sec-ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:8px;}
      .theme-urb .ind-sec-ico,.theme-eco .ind-sec-ico{background:var(--sec-bg);color:var(--sec);}
      .ind-sec-ico svg{width:15px;height:15px;}
    
