/* ============================================================
   Mapa 2 — Territórios, mosaicos, bacias e paisagens da biodiversidade
   TDR-2114 / TDR-2119 · subrodada 1f
   As cores de dado ficam AQUI como tokens; o módulo lê com getComputedStyle.
   Motivo: sync/conferir-design.mjs bloqueia hex novo dentro de js/modules.
   ============================================================ */

#tab-mapa2{
  /* paleta de camada — uma cor por natureza de recorte */
  --m2-uf:#5b7a6b;
  --m2-mun:#7d8a94;
  --m2-regiao:#7f8fa6;
  --m2-bioma:#6fae7f;
  --m2-recorte:#ffffff;
  /* Regua de presenca de rede (rodada 7) pintando o mapa: conferido · so declarado ·
     sem pesquisa. O cinza NAO quer dizer "vazio de rede", quer dizer "vazio de
     pesquisa" — e a tela diz isso por escrito, porque cor sozinha nao diz. */
  --m2-pres-ok:#2E9E5A;
  --m2-pres-dec:#e0b341;
  --m2-pres-sem:#6b7280;
  --m2-rh:#4a90c4;
  --m2-meso:#e0b341;
  --m2-uc-fed:#2E9E5A;
  --m2-uc-est:#79cf98;
  --m2-uc-mun:#b9e6cb;
  --m2-ti:#d97742;
  --m2-mosaico:#e05c8a;
  --m2-corredor:#3fb98a;
  --m2-biorregiao:#8a7fd4;
  /* Uma cor por TIPO de biorregiao — a paleta veio da pagina Mapa (js/modules/mapa.js),
     que ja separava assim; a Mapa 2 pintava as 39 iguais e jogava o tipo fora. */
  --m2-bio-etno:#E8B93A;
  --m2-bio-mos:#8a7fd4;
  --m2-bio-bacia:#4a90c4;
  --m2-bio-eco:#e0916b;
  --m2-bio-cost:#5fc9d6;
  --m2-bio-corr:#2E9E5A;
  --m2-paisagem:#f0d79a;
  --m2-rppn:#4fc3a1;
  --m2-quilombo:#c9a227;
  --m2-assentamento:#8fa9c9;
  /* Paleta de vizinhanca das paisagens (TDR-2118, 15/ago): paisagem colada na outra
     nunca sai da mesma cor. A coloracao e calculada no motor, aqui so moram os tons. */
  --m2-pais-0:#f0d79a;
  --m2-pais-1:#5fc9d6;
  --m2-pais-2:#e07a5f;
  --m2-pais-3:#9fd356;
  --m2-pais-4:#c58cf0;
  --m2-pais-5:#f2b5d4;
  --m2-pais-6:#7aa5f0;
  --m2-pais-7:#ffd166;
}

/* ---- CABECALHO COMPACTO: tres linhas, nada de caixa em volta ---------------
   Antes eram dois cartoes com borda, titulo, subtitulo, um paragrafo explicando
   a regra dos 2% e uma legenda escrita por extenso — tudo isso antes do mapa
   comecar. Ocupava um terco da tela. Agora cada linha tem um rotulo curto a
   esquerda e o resto e controle. O texto que saiu esta no tooltip e no MANUAL. */
.m2-cab{margin:0 0 8px}
.m2-lin{display:flex;align-items:center;gap:8px;margin-bottom:5px;min-width:0}
.m2-lin:last-child{margin-bottom:0}
.m2-rot{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.9px;
  color:var(--text-muted);width:44px;cursor:help}

.m2-busca-box{position:relative;flex:1 1 auto;min-width:0}
.m2-busca-top{width:100%;padding:5px 11px;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:999px;color:var(--text);font-size:11.5px;line-height:1.35;font-family:inherit}
.m2-busca-top:focus{outline:none;border-color:var(--primary)}
.m2-sug{display:none;position:absolute;z-index:1400;left:0;right:0;top:100%;margin-top:4px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:8px;
  max-height:300px;overflow:auto;box-shadow:0 10px 28px rgba(0,0,0,.4)}
.m2-sug.aberta{display:block}
.m2-sug-i{display:flex;gap:8px;align-items:center;padding:5px 10px;font-size:11.5px;
  cursor:pointer;line-height:1.3}
.m2-sug-i:hover{background:var(--bg-hover)}
.m2-sug-i .m2-sub{display:block;color:var(--text-muted);font-size:9.5px}

.m2-recbar{flex:0 0 auto;font-size:10.5px;color:var(--text-muted);white-space:nowrap;cursor:help}
.m2-recbar:empty{display:none}
.m2-recbar b{color:var(--accent)}
.m2-tot{flex:0 0 auto;font-size:9px;white-space:nowrap;font-weight:400;
  text-transform:none;letter-spacing:0;overflow:hidden;text-overflow:ellipsis}
.m2-cont{color:var(--text-muted);font-size:10.5px}
.m2-aviso-txt{color:var(--accent)}

/* ---- PILULAS DE FILTRO — o padrao .subtab-pill do dashboard ----------------
   Vênus: caixa de marcar dentro de pilula e dois controles no lugar de um, e a
   marca some no meio do texto. O dashboard ja resolve isso: ligado = borda e
   texto na cor de destaque. Uma linha so, com rolagem horizontal em vez de
   quebra, porque fileira dupla de pilula empurra o mapa para fora da tela. */
.m2-barra{display:flex;gap:5px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:visible;
  padding-bottom:1px;scrollbar-width:thin}
.m2-barra::-webkit-scrollbar{height:4px}
.m2-barra::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.m2-chip{position:relative;flex:0 0 auto}

.m2-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 10px;
  border-radius:999px;background:var(--bg-surface);color:var(--text-secondary);
  border:1px solid var(--border);font-size:11px;font-weight:500;cursor:pointer;
  font-family:inherit;line-height:1.4;white-space:nowrap;transition:all var(--transition)}
.m2-pill:hover{color:var(--text);border-color:var(--text-muted)}
.m2-pill.on{background:var(--primary-dim);color:var(--primary);
  border-color:var(--primary);font-weight:600}
.m2-pill-onde.on{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
.m2-pill-modo,.m2-pill-x,.m2-pill-ajuda{flex:0 0 auto}
.m2-pill-ajuda{cursor:help;padding:3px 9px;color:var(--text-muted)}
.m2-pill .m2-sw{width:7px;height:7px;border-radius:2px;flex:0 0 auto}
.m2-badge{background:rgba(255,255,255,.10);color:inherit;font-size:9px;font-weight:700;
  padding:0 5px;border-radius:10px;min-width:15px;text-align:center;
  font-variant-numeric:tabular-nums}
.m2-pill.on .m2-badge{background:var(--primary);color:var(--bg-base)}
.m2-pill-onde.on .m2-badge{background:var(--accent);color:var(--bg-base)}
.m2-caret{font-size:8px;opacity:.5;padding:0 1px}
.m2-caret:hover{opacity:1}
.m2-pill-sub{padding:2px 8px;font-size:10.5px}

/* A lista e `fixed` e recebe as coordenadas do JS. O porque esta por extenso em
   gaia_mapa2.js > posicionar(): a barra de pilulas rola na horizontal e o CSS nao
   deixa um eixo rolar e o outro vazar, entao a lista abria dentro de uma faixa de
   30px e sumia. Fora do fluxo, nenhum overflow de ancestral a corta. */
.m2-drop{display:none;position:fixed;z-index:2200;background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);overflow:auto}
.m2-chip.aberta .m2-drop{display:block}
.m2-lista{max-height:min(46vh,340px);overflow:auto;margin:0 -4px;padding:0 4px}
.m2-corte{padding-top:6px;margin-top:5px;border-top:1px solid var(--border)}
.m2-subs{display:flex;gap:5px;flex-wrap:wrap;padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid var(--border)}
.m2-esc-q{width:100%;margin-bottom:7px;padding:5px 9px;background:var(--bg-page);
  border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:11.5px;
  font-family:inherit}
.m2-esc-q:focus{outline:none;border-color:var(--primary)}

/* ---- conteudo do dropdown ---- */
.m2-drop .m2-acoes{display:flex;gap:6px;align-items:center;padding-bottom:6px;margin-bottom:6px;
  border-bottom:1px solid var(--border)}
.m2-drop .m2-acoes button{font-size:10px;padding:2px 9px;border:1px solid var(--border);
  border-radius:14px;background:transparent;color:var(--text-muted);cursor:pointer;
  font-family:inherit;line-height:1.4;white-space:nowrap}
.m2-drop .m2-acoes button:hover{color:var(--primary);border-color:var(--primary)}
.m2-drop .m2-acoes .m2-cont{margin-left:auto;white-space:nowrap}
.m2-item{display:flex;gap:8px;align-items:flex-start;padding:3px 5px;font-size:11.5px;
  line-height:1.35;cursor:pointer;border-radius:6px}
.m2-item:hover{background:var(--bg-hover)}
.m2-item input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--primary)}
.m2-item span{flex:1;min-width:0;overflow-wrap:anywhere}

/* PALCO EM TRÊS COLUNAS — camadas à esquerda, mapa no meio, territórios à direita,
   as duas laterais com a MESMA largura. É a arrumação do QGIS, e resolve dois
   problemas de uma vez: a barra de camadas não cabia em uma linha horizontal, e a
   tabela embaixo do mapa obrigava a rolar para conferir o que estava desenhado. */
.m2-palco{display:flex;gap:10px;align-items:stretch}
/* A coluna de camadas ficou mais estreita que a de territorios (Alexandre,
   18/ago): com RPPN, quilombo e assentamento separados, o nome mais longo encolheu
   e a largura sobrava. O mapa ganha o espaco. */
.m2-lado{flex:0 0 19%;max-width:19%;min-width:0;height:calc(100vh - 195px);min-height:420px;
  display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;
  overflow:hidden;background:var(--bg-card)}
.m2-lado .m2-h{padding:7px 9px;font-size:9px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);
  line-height:1.4;display:flex;gap:6px;align-items:baseline;justify-content:space-between}
.m2-lado-rol{flex:1 1 auto;min-height:0;overflow:auto;padding:7px}
.m2-lado-esq{flex:0 0 13%;max-width:13%}
/* Fonte 15% maior no bloco de camadas: 11px -> 12,6px. */
.m2-barra-vert .m2-pill{font-size:12.6px;padding:6px 8px}
.m2-lado-esq .m2-h{font-size:10px}
/* De pé, a pílula ocupa a largura toda da coluna e o nome não é mais cortado. */
.m2-barra-vert{flex-direction:column;overflow:visible;gap:4px}
.m2-barra-vert .m2-chip{width:100%}
.m2-barra-vert .m2-pill{width:100%;justify-content:flex-start;white-space:normal;
  text-align:left;line-height:1.35;padding:5px 8px}
.m2-barra-vert .m2-caret{margin-left:auto;flex:0 0 auto}
.m2-mapa{flex:1 1 auto;min-width:0;height:calc(100vh - 195px);min-height:420px;
  border:1px solid var(--border);border-radius:10px;overflow:hidden}
/* A mesma altura do mapa, escrita: sem isso a lista de 400 linhas estica o palco
   e a tabela fica mais alta que o desenho que ela espelha. `flex:1 1 auto` na
   rolagem interna e quem faz a lista rolar dentro em vez de crescer para fora. */
.m2-tabrol{padding:0}
.m2-selo{display:inline-block;padding:1px 6px;border-radius:5px;font-size:9.5px;font-weight:700;
  border:1px solid var(--border);color:var(--text-muted)}
.m2-selo-real{color:var(--primary);border-color:var(--primary)}
.m2-selo-aprox{color:var(--accent);border-color:var(--accent)}

.m2-tab{width:100%;border-collapse:collapse;font-size:10.5px;table-layout:fixed}
.m2-tab th,.m2-tab td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--border);
  vertical-align:top;overflow-wrap:anywhere}
/* Numa coluna de 20% nao cabem cinco colunas de tabela. Camada, detalhe e area
   viram uma segunda linha cinza dentro da mesma celula (ver tabela() no JS). */
.m2-tab tr{cursor:pointer}
.m2-tab tbody tr:hover{background:var(--bg-hover)}
.m2-tl-sub{display:block;color:var(--text-muted);font-size:9.5px;margin-top:1px;line-height:1.35}
.m2-tab th{color:var(--text-muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.5px}
.m2-tab td.n,.m2-tab th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Contorno em varios pedacos e sinal de alerta na leitura do dado, entao ele fica
   visivel na tabela em vez de so no balao. */
.m2-partes{color:var(--accent);font-weight:700}
.m2-pres{display:inline-block;padding:1px 7px;border-radius:5px;font-size:10px;font-weight:700}
.m2-pres-ok{background:var(--m2-pres-ok);color:var(--bg-page)}
.m2-pres-dec{background:var(--m2-pres-dec);color:var(--bg-page)}
.m2-pres-sem{background:var(--m2-pres-sem);color:var(--bg-page)}

#tab-mapa2 .leaflet-popup-content-wrapper{background:var(--bg-card);color:var(--text);border-radius:8px}
#tab-mapa2 .leaflet-popup-tip{background:var(--bg-card)}
#tab-mapa2 .leaflet-popup-content{margin:9px 12px;font-size:12px;line-height:1.45}
.m2-lbl{background:var(--bg-card);border:1px solid var(--border);color:var(--text);
  font-size:10px;padding:1px 5px;border-radius:4px;white-space:nowrap}

@media(max-width:1100px){
  /* 19% de 400px nao e coluna: no estreito o palco vira empilhamento, com as
     camadas em cima (que e o que se mexe primeiro) e a lista embaixo. */
  .m2-palco{flex-direction:column}
  .m2-mapa{height:440px;min-height:440px;order:2}
  .m2-lado-esq{order:1}
  .m2-tabbox{order:3}
  .m2-lado{flex:1 1 auto;max-width:none;height:auto;min-height:0}
  .m2-lado-rol{max-height:260px}
  .m2-barra-vert{flex-direction:row;flex-wrap:wrap;overflow:visible}
  .m2-barra-vert .m2-chip,.m2-barra-vert .m2-pill{width:auto}
}
@media(max-width:900px){
  .m2-rot{width:36px;font-size:8.5px}
  .m2-recbar,.m2-tot,.m2-pill-modo{display:none}
  .m2-lin:first-child{margin-bottom:6px}
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTROLES DENTRO DO MAPA — Vênus, 17/ago (TDR-2179)
   Os três controles que ficam por cima do desenho (base, zoom e crédito)
   vinham com a cara padrão do Leaflet: caixa branca, borda cinza clara, fonte
   do sistema. Num dashboard escuro isso aparece como remendo. Aqui eles passam
   a usar os mesmos tokens do resto — mesma borda, mesmo raio, mesma cor de
   destaque — e ganham o desfoque de fundo, que é o que faz um controle
   flutuante parecer que está POR CIMA do mapa em vez de colado nele.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- seletor de base: um controle segmentado, não três botões soltos ---- */
.m2-bases{display:inline-flex;padding:3px;gap:2px;border-radius:999px;
  background:color-mix(in srgb, var(--bg-card) 82%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.45)}
.m2-base-b{border:0;background:transparent;color:var(--text-secondary);
  font-family:inherit;font-size:10.5px;font-weight:600;line-height:1;
  padding:5px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:color var(--transition), background var(--transition)}
.m2-base-b:hover{color:var(--text)}
/* Ativo = pastilha preenchida. Numa barra segmentada a borda sozinha não
   separa o escolhido do vizinho: os dois viram retângulos com contorno. */
.m2-base-b.on{background:var(--primary);color:var(--bg-base)}

/* ---- zoom: dois botões redondos, no lugar da caixinha branca padrão ---- */
#tab-mapa2 .leaflet-control-zoom{border:0;box-shadow:none;display:flex;
  flex-direction:column;gap:5px}
#tab-mapa2 .leaflet-control-zoom a{width:30px;height:30px;line-height:28px;
  border-radius:50%;border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg-card) 82%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text-secondary);font-size:17px;font-weight:400;
  box-shadow:0 4px 16px rgba(0,0,0,.45);transition:all var(--transition)}
#tab-mapa2 .leaflet-control-zoom a:hover{color:var(--primary);
  border-color:var(--primary);background:var(--bg-card)}
#tab-mapa2 .leaflet-control-zoom a:first-child,
#tab-mapa2 .leaflet-control-zoom a:last-child{border-radius:50%}
#tab-mapa2 .leaflet-control-zoom a.leaflet-disabled{opacity:.35}

/* ---- crédito: a faixa vira um "i" que só abre no mouse ----
   O Alexandre pediu para tirar a faixa, e ela some da tela — mas o crédito NÃO
   pode simplesmente sumir do código: o OpenStreetMap é ODbL e o Esri e o CARTO
   pedem atribuição para uso gratuito. Tirar de vez seria usar mapa de graça sem
   cumprir a licença. Então ele encolhe para um círculo discreto no canto e o
   texto aparece ao passar o mouse: a faixa deixa de existir, o crédito continua. */
#tab-mapa2 .leaflet-control-attribution{background:transparent;box-shadow:none;
  padding:0;margin:0 6px 6px 0;font-size:9px;line-height:1}
#tab-mapa2 .leaflet-control-attribution a{color:var(--text-muted)}
#tab-mapa2 .leaflet-control-attribution .m2-cred{display:inline-flex;
  align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  border:1px solid var(--border);color:var(--text-muted);cursor:help;
  background:color-mix(in srgb, var(--bg-card) 78%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:9.5px;font-style:italic;font-weight:700}
#tab-mapa2 .leaflet-control-attribution .m2-cred-txt{display:none;
  color:var(--text-muted);background:color-mix(in srgb, var(--bg-card) 90%, transparent);
  border:1px solid var(--border);border-radius:6px;padding:3px 7px;margin-right:5px}
#tab-mapa2 .leaflet-control-attribution:hover .m2-cred-txt{display:inline-block}
#tab-mapa2 .leaflet-control-attribution:hover .m2-cred{display:none}

@media(max-width:900px){
  .m2-base-b{padding:5px 10px;font-size:10px}
}

/* A moldura (UF e região) troca de cor conforme a base do mapa — divisa verde
   sobre satélite é ilegível, porque o verde da linha é o verde da floresta.
   Sobre imagem, branco; sobre mapa claro, grafite. É o que o Google faz. */
#tab-mapa2{
  --m2-moldura-clara:rgba(255,255,255,.85);
  --m2-moldura-escura:#46525c;
}

/* ---- CARD DO TERRITÓRIO no balão (Alexandre, 17/ago) ----
   O balão dizia pouco e misturava assuntos: município e área protegida na mesma
   linha, vizinha contada em vez de nomeada. Agora é ficha: rótulo à esquerda,
   valor à direita, e cada lista no seu bloco, com "+" para abrir o resto. */
#tab-mapa2 .leaflet-popup-content{margin:10px 13px;font-size:12px;line-height:1.45;
  max-height:52vh;overflow:auto}
.m2-card{min-width:250px;max-width:330px}
.m2-card-tit{display:block;font-size:13px;color:var(--text);line-height:1.3}
.m2-card-sub{font-size:10px;color:var(--text-muted);margin:1px 0 8px;
  padding-bottom:7px;border-bottom:1px solid var(--border)}
.m2-kv{display:flex;gap:10px;align-items:baseline;padding:2px 0;font-size:11.5px}
.m2-kv > span{flex:0 0 82px;color:var(--text-muted);font-size:10px;
  text-transform:uppercase;letter-spacing:.4px}
.m2-kv > b{flex:1;min-width:0;color:var(--text);font-weight:500;overflow-wrap:anywhere}
.m2-bl{margin-top:9px;padding-top:8px;border-top:1px solid var(--border)}
.m2-bl > b{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.m2-ul{margin:5px 0 0;padding:0;list-style:none}
.m2-ul li{padding:2px 0 2px 11px;position:relative;font-size:11.5px;line-height:1.4;
  color:var(--text);overflow-wrap:anywhere}
.m2-ul li::before{content:'';position:absolute;left:0;top:9px;width:4px;height:4px;
  border-radius:50%;background:var(--text-muted)}
.m2-mais{margin-top:5px;border:1px solid var(--border);background:transparent;
  color:var(--text-muted);font-family:inherit;font-size:10px;padding:2px 9px;
  border-radius:12px;cursor:pointer}
.m2-mais:hover{color:var(--primary);border-color:var(--primary)}

/* ---- arrastar para reordenar a camada (padrao QGIS) ---- */
.m2-barra-vert .m2-chip{display:flex;align-items:center;gap:4px}
.m2-pega{flex:0 0 auto;color:var(--text-muted);font-size:11px;cursor:grab;
  padding:0 1px;line-height:1;user-select:none;opacity:.5}
.m2-barra-vert .m2-chip:hover .m2-pega{opacity:1}
.m2-chip.arrastando{opacity:.45}
/* A linha marca ONDE vai cair. Sem ela o arrastar vira adivinhacao. */
.m2-chip.alvo{box-shadow:0 -2px 0 0 var(--accent)}
.m2-barra-vert .m2-pill{flex:1 1 auto;min-width:0}

/* ---- paleta de cor por camada (padrao QGIS) ----
   O botao global "cores por vizinhanca" saiu: ele valia so para paisagens e fazia
   exatamente isto. Agora cada camada escolhe — padrao, cor unica, ou colorida. */
#tab-mapa2{
  --m2-pal-0:#2E9E5A;  --m2-pal-1:#4a90c4;  --m2-pal-2:#e05c8a;  --m2-pal-3:#e0b341;
  --m2-pal-4:#8a7fd4;  --m2-pal-5:#5fc9d6;  --m2-pal-6:#e07a5f;  --m2-pal-7:#9fd356;
  --m2-pal-8:#c58cf0;  --m2-pal-9:#f2b5d4;  --m2-pal-10:#7aa5f0; --m2-pal-11:#ffd166;
}
.m2-cor-box{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.m2-cor-lin{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.m2-pal{margin-top:7px;gap:4px}
.m2-pal-b{width:19px;height:19px;border-radius:5px;border:2px solid transparent;
  cursor:pointer;padding:0;flex:0 0 auto}
.m2-pal-b:hover{border-color:var(--text-muted)}
.m2-pal-b.on{border-color:var(--text);box-shadow:0 0 0 2px var(--bg-card) inset}

/* Selo de procedência no fim do card do território (TDR-2269): o dado tem de dizer
   de onde veio sem competir com o conteúdo — daí menor, mais apagado e separado por
   uma linha, no lugar onde nota de rodapé mora. */
.m2-card-fonte{margin-top:8px;padding-top:7px;border-top:1px solid var(--border);
  font-size:11px;line-height:1.4}