#map {
    width: 100%;
    height: 100vh;
    background: #f4f4f4;
}

/* --- TOOLBAR (base do mapa, quatro grupos) ---
   Estrutura do ARPB (regulacao/mapa.css .rg-ferramentas): centralizada na
   base do mapa, cada grupo é uma caixa branca com borda, raio --r-md e
   sombra --sh-painel; a divisória entre grupos é o espaço entre as caixas.
   Posicionada contra #mapa-coluna (position: relative), subindo com a
   tabela de atributos. Nunca quebra em duas linhas: o que não couber rola
   (ver as regras de painel aberto e de tela estreita logo abaixo). */
#map-toolbar {
    position: absolute;
    left: 50%;
    bottom: calc(16px + var(--tabela-atributos-altura, 29px));
    transform: translateX(-50%);
    z-index: 1500;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    max-width: calc(100% - 24px);
}

.map-toolbar-grupo {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-painel);
}

.map-toolbar-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--fg);
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

.map-toolbar-btn:hover { background-color: var(--surface-2); }

.map-toolbar-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Ferramenta ativa: fundo da marca, ícone branco. */
.map-toolbar-btn.active {
    background-color: var(--brand);
    color: #fff;
}

/* Rótulo ao passar o mouse: tooltip de CSS a partir do aria-label (o
   title saiu para não duplicar). Só onde há ponteiro que paira. */
.map-toolbar-btn::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    background: var(--fg);
    color: #fff;
    font-family: var(--app-font);
    font-size: var(--fs-xs);
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s;
    z-index: 1;
}

@media (hover: hover) {
    .map-toolbar-btn:hover::after,
    .map-toolbar-btn:focus-visible::after {
        opacity: 1;
        visibility: visible;
    }
}

/* Base do mapa (pedidos do responsável, 2026-10-10). A toolbar fica no
   centro do mapa visível (com o painel direito aberto, 350px fixo sobre o
   mapa, no centro do que sobra à vista).
   - Computador (>= 1024px): escala e coordenadas formam UM cartão de
     240px (canto inferior esquerdo, termina em --cartao-fim = 12px +
     240px) que fica SEMPRE na linha da toolbar. Quando a toolbar
     centralizada encostaria nele, ela desliza para a direita só o
     bastante para ficar a 12px do cartão (ver "Cartão único" adiante).
   - Tablet (768-1023px): os dois cartões sobem para logo acima da
     toolbar (--cartoes-acima), que ali ocupa quase toda a largura.
   - Legenda (canto inferior direito, 280px + 12px): na linha da toolbar
     quando cabe ao lado dela, senão logo acima. Com a toolbar de ~694px
     (fechado) / ~682px (aberto), mapa = tela - 52px do trilho, mapa
     visível = mapa - 350px com o painel aberto:
       (visível - toolbar) / 2 >= 292px + 12px
       -> fechado >= 1360px; aberto >= 1700px.
     No tablet com o painel aberto, legenda e cartões não cabem lado a
     lado: a legenda sobe acima dos cartões (--legenda-acima-dos-cartoes).
     A legenda nunca passa do fim da coluna de controles da direita
     (--coluna-controles-fim). */
#mapa-coluna {
    --cartoes-na-linha: 16px;    /* mesma base da toolbar */
    --cartoes-acima: 68px;       /* 16px + 44px da toolbar + 8px */
    --legenda-acima-dos-cartoes: 120px;  /* 68px + 44px dos cartões + 8px */
    --cartoes-base: var(--cartoes-na-linha);
    --legenda-base: var(--cartoes-na-linha);
    --coluna-controles-fim: 340px;  /* 12px + 316px da coluna + 12px */
}

@media (min-width: 768px) and (max-width: 1359.98px) {
    #mapa-coluna {
        --legenda-base: var(--cartoes-acima);
    }
}

@media (min-width: 768px) and (max-width: 1699.98px) {
    body:has(#sidebar-results.active) #mapa-coluna {
        --legenda-base: var(--cartoes-acima);
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    #mapa-coluna {
        --cartoes-base: var(--cartoes-acima);
    }

    body:has(#sidebar-results.active) #mapa-coluna {
        --legenda-base: var(--legenda-acima-dos-cartoes);
    }
}

/* Painel aberto: a toolbar se centraliza na parte do mapa que sobra à
   vista, aperta os espaços entre grupos e, se ainda não couber, rola. */
@media (min-width: 768px) {
    body:has(#sidebar-results.active) #map-toolbar {
        left: calc(50% - 175px);
        gap: 4px;
        max-width: calc(100% - 350px - 24px);
    }

    body:has(#sidebar-results.active) #map-toolbar .map-toolbar-btn {
        width: 36px;
        height: 36px;
    }
}

/* Telas em que a linha inteira (~690px) pode não caber: rolagem horizontal
   em vez de quebra. Só aqui, porque overflow corta os rótulos de hover
   que saem acima dos botões. flex-start: centralizado, o excesso vazaria
   para a esquerda, fora do alcance da rolagem (a caixa já encolhe ao
   conteúdo quando cabe, então nada muda visualmente nesse caso). */
@media (min-width: 768px) and (max-width: 1120px) {
    #map-toolbar,
    body:has(#sidebar-results.active) #map-toolbar {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }
}

/* Cartão único (computador, >= 1024px): a toolbar continua centralizada
   (left 50% ou 50% - 175px com o painel aberto) e só desliza para a
   direita quando o centro a faria encostar no cartão: o deslocamento é o
   maior entre -50% (centralizada) e o que põe a borda esquerda dela a
   12px do fim do cartão. --toolbar-centro é a posição do "left" em px
   (o mapa começa depois do trilho de 52px). A largura máxima garante que,
   deslizada, ela ainda termine 12px antes da borda do mapa visível. */
@media (min-width: 1024px) {
    #mapa-coluna {
        --cartao-fim: 252px;     /* 12px + 240px do cartão */
        --toolbar-centro: calc((100vw - var(--sb-min)) / 2);
    }

    body:has(#sidebar-results.active) #mapa-coluna {
        --toolbar-centro: calc((100vw - var(--sb-min)) / 2 - 175px);
    }

    #map-toolbar {
        transform: translateX(max(-50%, calc(var(--cartao-fim) + 12px - var(--toolbar-centro))));
        max-width: calc(100% - var(--cartao-fim) - 24px);
    }

    body:has(#sidebar-results.active) #map-toolbar {
        max-width: calc(100% - 350px - var(--cartao-fim) - 24px);
    }
}

/* Painel aberto e mapa visível estreito: a toolbar (~682px) não cabe
   entre o cartão e o painel; rola em vez de quebrar. */
@media (min-width: 1024px) and (max-width: 1359.98px) {
    body:has(#sidebar-results.active) #map-toolbar {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }
}

/* Celular: linha única com rolagem horizontal, presa à base da tela,
   botões de 44px, divisórias mantidas (borda à esquerda de cada grupo). */
@media (max-width: 767.98px) {
    #map-toolbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        max-width: none;
        height: var(--toolbar-celular-h);
        box-sizing: border-box;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;
        padding: 4px 8px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #map-toolbar::-webkit-scrollbar { display: none; }

    .map-toolbar-grupo {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .map-toolbar-grupo + .map-toolbar-grupo {
        margin-left: 6px;
        padding-left: 6px;
        border-left: 1px solid var(--border);
    }

    .map-toolbar-btn {
        width: var(--toque);
        height: var(--toque);
        font-size: 17px;
    }

    .map-toolbar-btn::after { display: none; }

    /* O mapa termina acima da toolbar presa à base: nem a escala do
       Leaflet nem a alça da tabela ficam escondidas sob ela. */
    #mapa-coluna {
        box-sizing: border-box;
        padding-bottom: var(--toolbar-celular-h);
        --cartoes-base: 26px;        /* acima da atribuição do Leaflet */
    }
}

/* Ferramenta Selecionar ligada (selecao-caixa.js): o dedo desenha a caixa
   em vez de rolar a página. Duas classes no seletor para vencer
   .leaflet-container.leaflet-touch-zoom (pan-x pan-y) do leaflet.css, que
   é o que sobra quando o arrastar do Leaflet está desligado. */
.leaflet-container.selecao-caixa-ativa {
    touch-action: none;
}

/* Estilo para o Texto inserido no mapa */
.custom-text-label {
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    text-shadow: 2px 2px 0px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    white-space: nowrap;
}


/* Ícone Font Awesome não herda margens do Bootstrap */
#map-toolbar .map-toolbar-btn i {
    margin: 0;
    padding: 0;
    line-height: 1;
    display: inline-block;
    pointer-events: none;   /* o alvo do clique é sempre o <button> */
}

/* Pop-up dos resultados da Consulta de Licenças (sidebar-results.js):
   mesmo esqueleto do Info (.popup-camada-titulo, .popup-table,
   .popup-ficha); a ação é da cor da marca. */
.popup-valor--vencida { color: #b02a37; font-weight: 600; }
.popup-valor--numero { font-variant-numeric: tabular-nums; }

.popup-ficha a.btn-popup-detalhes {
    display: block;
    padding: 8px 12px;
    border-radius: 4px;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.popup-ficha a.btn-popup-detalhes:hover,
.popup-ficha a.btn-popup-detalhes:focus-visible {
    background: var(--brand-2);
    color: #fff;
}

.popup-ficha a.btn-popup-detalhes:focus-visible {
    outline: 2px solid var(--brand-2);
    outline-offset: 2px;
}

/* --- LEGENDA (padrão ARPB: regulacao/mapa.css .rg-legenda__* e
   .rg-painel__bloco) ---
   Bloco com --surface, borda --border, raio --r-md, sombra --sh-painel.
   Canto INFERIOR DIREITO de #mapa-coluna (pedido do responsável,
   2026-10-10): na linha da toolbar ou logo acima dela (--legenda-base,
   ver "Base do mapa" no começo deste arquivo), subindo com a tabela de
   atributos; com o painel direito aberto desliza para a esquerda dele.
   Cresce para cima e para antes do fim da coluna de controles
   (--coluna-controles-fim); o corpo rola por dentro. Fechada por padrão (só o cabeçalho);
   .expanded mostra corpo e nota. As classes .legenda__* valem também
   para #legend-content, no painel (celular). */
#floating-legend {
    position: absolute;
    right: 12px;
    bottom: calc(var(--legenda-base) + var(--tabela-atributos-altura, 29px));
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(280px, calc(100% - 24px));
    max-height: max(46px, calc(100% - var(--tabela-atributos-altura, 29px) - var(--legenda-base) - var(--coluna-controles-fim)));
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-painel);
    font-family: var(--app-font);
    transition: right .2s ease, bottom .2s ease;
}

@media (min-width: 768px) {
    body:has(#sidebar-results.active) #floating-legend {
        right: calc(350px + 12px);
    }
}

#floating-legend:not(.expanded) .legend-body,
#floating-legend:not(.expanded) .legenda__nota {
    display: none;
}

.legenda a,
.legenda a:hover {
    text-decoration: none;
}

.legenda__titulo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fg);
    font-family: var(--app-font);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.legenda__titulo:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.legenda__seta {
    margin-left: auto;
    color: var(--muted);
    transition: transform 0.18s;
}

#floating-legend.expanded .legenda__seta { transform: rotate(180deg); }

#floating-legend .legend-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--border);
}

.legenda__item {
    padding: 10px 0;
    font-size: var(--fs-sm);
    color: var(--fg);
}

.legenda__item + .legenda__item { border-top: 1px solid var(--border); }

.legenda__camada {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--fg);
}

.legenda__item img {
    display: block;
    max-width: 100%;
    height: auto;
}

.legenda__linha {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.legenda__linha .legenda__camada { margin-bottom: 0; }

.legenda__amostra {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 14px;
    border: 1px solid var(--border);
    border-radius: 2px;
}

.legenda__nota {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 0 10px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--muted);
}

.legenda__vazia {
    margin: 0;
    padding: 10px 0;
    font-size: var(--fs-sm);
    color: var(--muted);
    text-align: center;
}

/* A legenda das licenças (licencas-legenda.js) entra num .legenda__item
   com a marcação própria dela: o espaçamento do Bootstrap que ela carrega
   (mb-2, border-bottom, pb-1) é neutralizado e o título dela ganha a cara
   de .legenda__camada. */
.legenda__item > .legenda-licencas {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.legenda__item > .legenda-licencas > .fw-bold {
    margin-bottom: 6px !important;
    font-size: var(--fs-sm);
    font-weight: 600 !important;
    color: var(--fg);
}

/* Painel (celular): sem bloco próprio, a seção já é o contêiner. */
.legenda--painel .legenda__item:first-child { padding-top: 0; }

/* Celular: a legenda vai para o painel (toggleLegend); nada flutua. */
@media (max-width: 767.98px) {
    #floating-legend { display: none; }
}


/* --- ESTILO GERAL DO POPUP --- */

/* Aumenta a largura máxima do popup */
.leaflet-popup-content {
    min-width: 300px !important;
    /* Largura mínima garantida */
    max-width: 450px !important;
    /* Largura máxima expandida */
    width: auto !important;
    margin: 40px 15px 15px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Fonte mais limpa */
    font-size: 13px;
    line-height: 1.5;
}

/* Arredonda mais as bordas e dá uma sombra suave */
.leaflet-popup-content-wrapper {
    border-radius: 8px !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Estiliza o botão de fechar (X) */
.leaflet-popup-close-button {
    top: 8px !important;
    right: 8px !important;
    font-size: 25px !important;
    color: #555 !important;
    font-weight: bold;
}

.leaflet-popup-close-button:hover {
    color: #d9534f !important;
    /* Vermelho ao passar o mouse */
}

/* Título do Popup (se houver um h3 ou h4 dentro) */
.leaflet-popup-content h3,
.leaflet-popup-content h4 {
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #007bff;
    /* Linha azul embaixo do título */
    color: #333;
    font-size: 16px;
    font-weight: 600;
}


/* --- ESTILO DA TABELA DENTRO DO POPUP --- */

.leaflet-popup-content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
    background-color: #fff;
}

/* Cabeçalho da tabela (se houver <th>) */
.leaflet-popup-content table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    text-align: left;
    padding: 8px;
    border-bottom: 2px solid #dee2e6;
}

/* Células da tabela */
.leaflet-popup-content table td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    color: #555;
    vertical-align: top;
    /* Alinha texto ao topo se for longo */
}

/* Efeito Zebra (linhas alternadas) para facilitar leitura */
.leaflet-popup-content table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Efeito Hover na linha (destaca onde o mouse está) */
.leaflet-popup-content table tr:hover {
    background-color: #f1f1f1;
}

/* Coluna da esquerda (Rótulos/Chaves) em negrito suave */
.leaflet-popup-content table td:first-child {
    font-weight: 600;
    color: #333;
    width: 40%;
    /* Define uma largura fixa para os rótulos */
    background-color: #fafafa;
    /* Leve destaque na coluna de chaves */
}

/* --- POP-UP DE IDENTIFICAÇÃO: ABAS POR CAMADA --- */

/* A barra de abas rola na horizontal; o pop-up não cresce além da largura
   já fixada em .leaflet-popup-content (min 300px / max 450px). */
.popup-abas-nav {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 6px;
}

.popup-abas-nav .nav-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.popup-abas-nav .nav-link {
    font-size: 0.8rem;
    padding: 4px 8px;
}

.popup-abas-nav .popup-aba-contagem,
.popup-camada-titulo .popup-aba-contagem {
    font-size: 0.65rem;
    vertical-align: middle;
}

/* Corpo mantém a rolagem vertical que o acordeão antigo tinha. */
.popup-abas-corpo {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Uma camada só: sem abas, o nome vem como título simples. */
.popup-camada-titulo {
    font-size: 0.9rem;
    font-weight: bold;
    color: #0056b3;
    margin-bottom: 4px;
}

.popup-feicao-sep {
    margin: 6px 0;
}

.popup-ficha {
    padding: 12px;
    text-align: center;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
}

/* --- PAINEL DE SELEÇÃO (Shift+clique): cartões .resultado-item
   (sidebar-results.css); a lista cresce com o painel. --- */

/* --- LICENÇAS ESTADUAIS: PINS POR VIGÊNCIA E BALÕES DE AGRUPAMENTO --- */
/* Cores da spec §5: verde #2e7d32, âmbar #f9a825, vermelho #c62828, cinza #9e9e9e.
   Círculo com contorno branco para ler sobre satélite e sobre mapa claro. */
.licenca-pin {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    background: #9e9e9e;
}

.licenca-pin--vigente { background: #2e7d32; }
.licenca-pin--a_vencer { background: #f9a825; }
.licenca-pin--vencida { background: #c62828; }
.licenca-pin--sem_vencimento { background: #9e9e9e; }

/* Balão: contagem no centro, cor pela fração de vencidas (spec §6). */
.licenca-balao {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
    color: #fff;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.licenca-balao > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.licenca-balao--verde { background: rgba(46, 125, 50, 0.9); }
.licenca-balao--ambar { background: rgba(249, 168, 37, 0.92); color: #222; }
.licenca-balao--vermelho { background: rgba(198, 40, 40, 0.9); }

/* Tamanhos casam com TAMANHOS_BALAO em licencas-vigencia.js (30/40/50 px). */
.licenca-balao--p { width: 30px; height: 30px; font-size: 11px; }
.licenca-balao--m { width: 40px; height: 40px; font-size: 12px; }
.licenca-balao--g { width: 50px; height: 50px; font-size: 13px; }

/* --- LEGENDA HTML DAS LICENÇAS (licencas-legenda.js) --- */
.legenda-licencas-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.legenda-licencas-pin {
    display: inline-block;
    margin-right: 8px;
    flex: none;
}

.legenda-licencas-balao {
    width: 22px;
    height: 22px;
    font-size: 9px;
    margin-right: 8px;
    flex: none;
    border-width: 2px;
}

.legenda-licencas-tamanhos {
    font-size: 10px;
}

.legenda-licencas-tamanho + .legenda-licencas-tamanho::before {
    content: ' · ';
}

/* --- PAINEL DE FILTRO DAS LICENÇAS (licencas-filtro-painel.js) --- */
.filtro-licencas-lista {
    max-height: 40vh;
    overflow-y: auto;
}

.filtro-licencas-lista .form-check-label {
    word-break: break-word;
}

/* --- PIN DO RESULTADO DE BUSCA (sidebar-results.js) --- */
/* Azul para não se confundir com os quatro estados de vigência. */
.busca-pin {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0d6efd;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}

/* --- TABELA DE ATRIBUTOS (painel inferior do mapa) --- */

/* Coluna flex: mapa em cima, painel embaixo. Abrir o painel encolhe o
   mapa; ele nunca é coberto. A altura do painel é escrita em style.height
   por tabela-atributos.js; o mapa toma o resto.
   A coluna ocupa a janela abaixo do cabeçalho fixo (--mh-h) e à direita
   do trilho (--sb-min, mapa-shell.css); o trilho expandido passa POR CIMA
   (o mapa não encolhe). No celular não há trilho e a altura usa dvh, para
   o mapa não ficar sob a barra de endereço. position: relative porque a
   toolbar e a legenda (fatias 2 e 3) são posicionadas contra a coluna. */
#mapa-coluna {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: var(--mh-h);
    margin-left: var(--sb-min);
    height: calc(100vh - var(--mh-h));
}

@media (max-width: 767.98px) {
    #mapa-coluna {
        margin-left: 0;
        height: calc(100dvh - var(--mh-h));
    }
}

#mapa-coluna #map {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.tabela-atributos {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1100; /* acima da legenda (1000), abaixo da sidebar (2000) */
}

/* Alça: sempre visível; arrasta só com o painel aberto. */
.tabela-atributos-alca {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    cursor: ns-resize;
    touch-action: none;
}

.tabela-atributos:not(.aberto) .tabela-atributos-alca {
    cursor: default;
    border-bottom: 0;
}

.tabela-atributos-toggle {
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #0056b3;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.tabela-atributos-toggle:hover {
    background: #e9ecef;
}

.tabela-atributos-toggle i {
    margin: 0 4px;
}

body.tabela-atributos-arrastando {
    cursor: ns-resize;
    user-select: none;
}

.tabela-atributos-corpo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Barra: seletor de origem à esquerda, abas por camada à direita. */
.tabela-atributos-barra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    border-bottom: 1px solid #dee2e6;
}

/* Abas por camada: mesmo padrão do pop-up (.popup-abas-nav). */
.tabela-atributos-abas-nav {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.tabela-atributos-abas-nav .nav-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
    border-bottom: 0;
}

.tabela-atributos-abas-nav .nav-link {
    font-size: 0.8rem;
    padding: 4px 8px;
}

.tabela-atributos-abas-nav .popup-aba-contagem {
    font-size: 0.65rem;
    vertical-align: middle;
}

/* Área rolável da tabela; o cabeçalho fica fixo no topo da rolagem. */
.tabela-atributos-rolagem {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.tabela-atributos-tabela {
    font-size: 0.78rem;
    margin-bottom: 0;
    white-space: nowrap;
}

.tabela-atributos-tabela th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8f9fa;
    cursor: pointer;
    user-select: none;
}

.tabela-atributos-tabela th.ativa {
    color: #0056b3;
}

.tabela-atributos-tabela td {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabela-atributos-tabela .js-tabela-linha {
    cursor: pointer;
}

/* Linha marcada: mesmo laranja que tabela-atributos.js usa para o destaque
   no mapa (COR_LINHA, #FF6A00) — não o ciano do pop-up (destaque.js, cor
   padrão) nem o amarelo da seleção múltipla (COR_SELECAO em
   selecao-painel.js): o plano escolheu laranja de propósito para que os
   três coexistam sem se confundir, e a linha marcada precisa ler como a
   mesma cor do ponto que ela acende no mapa. Fundo direto nas células, não
   a variável --bs-table-bg-state do Bootstrap: verificado no navegador que
   essa variável, setada por uma regra de folha de estilo (em vez de
   inline), não chega a colorir a célula aqui — só funciona quando o
   Bootstrap mesmo a define (.table-active), e não foi possível confirmar
   por quê a tempo desta tarefa. Escopado pelo id da tabela para vencer,
   sem !important, a regra do Bootstrap que define o fundo das células
   (.table > :not(caption) > * > *, também uma classe + um seletor de tipo
   de especificidade). */
#tabela-atributos-tabela .tabela-atributos-linha-marcada > td {
    background-color: rgba(255, 106, 0, 0.25);
}

/* A linha marcada também carrega a classe table-primary do Bootstrap (não
   por causa do fundo — este é ignorado pela regra acima — mas porque é
   ela quem dá cor de texto e de borda ao estado "marcado": medido no
   navegador, table-primary muda a célula de color: rgb(33, 37, 41) para
   rgb(0, 0, 0) e border-bottom-color de rgb(222, 226, 230) para
   rgb(186, 203, 230); sem a classe, a linha marcada perderia esse
   contraste). O problema é que table-hover do Bootstrap 5 NÃO muda
   background-color no :hover — ele só redefine a variável
   --bs-table-accent-bg, lida por uma regra própria do Bootstrap
   (.table > :not(caption) > * > *) com
   "box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)", uma sombra
   interna que é pintada por cima do background-color. E table-primary
   redefine --bs-table-hover-bg para #bfd1ec (azul, opaco) — medido: ao
   passar o cursor, a célula ficava com box-shadow
   "rgb(191, 209, 236) 0px 0px 0px 9999px inset" cobrindo por completo o
   laranja de background-color, que continuava correto e invisível por
   baixo. Por isso a correção não pode mexer em background-color (já
   estava certo) — tem que sobrescrever a variável que o Bootstrap lê no
   hover, na família laranja, escopada à linha marcada para vencer, em
   especificidade (id + classe vs. uma classe), a atribuição de
   table-primary à mesma variável. */
#tabela-atributos-tabela .tabela-atributos-linha-marcada {
    --bs-table-hover-bg: rgba(255, 106, 0, 0.35);
}

.tabela-atributos-col-acao {
    width: 32px;
}

.tabela-atributos-rodape {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    border-top: 1px solid #dee2e6;
    font-size: 0.78rem;
    color: #6c757d;
}


/* --- CONTROLES DO MAPA (spec 2026-10-10, padrão do MapBiomas) ---
   Coluna no canto direito (webgis.js, seção 5): busca, início, tela
   cheia, informação, norte e a cápsula do zoom. Círculos de 36px brancos
   com contorno de 1px, sem sombra, ícone de traço; 44px em tela de toque.
   Prefixo #map para vencer as regras de .leaflet-bar do leaflet.css. */
.leaflet-top.leaflet-right {
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 12px 0 0;
    transition: right .2s ease;
}

#map .leaflet-top.leaflet-right .leaflet-control {
    float: none;
    clear: none;
    margin: 0;
}

/* Com o painel direito aberto no computador, a coluna desliza para a
   esquerda dele. No celular o painel é a folha de baixo: a coluna fica. */
@media (min-width: 768px) {
    body:has(#sidebar-results.active) .leaflet-top.leaflet-right {
        right: 350px;
    }
}

#map .leaflet-right .controle-coluna,
#map .leaflet-right .leaflet-control-geocoder {
    border: 0;
    border-radius: 100px;
    background: transparent;
    box-shadow: none;
}

#map .leaflet-right .controle-redondo {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--surface);
    background-image: none;
    color: var(--fg);
    box-shadow: none;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
}

#map .leaflet-right .controle-redondo:hover {
    background-color: var(--surface-2);
    color: var(--fg);
}

#map .leaflet-right .controle-redondo:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

#map .leaflet-right .controle-redondo svg { pointer-events: none; }

/* Busca em andamento: o plugin põe .leaflet-control-geocoder-throbber no
   contêiner (o GIF dele some sob background-image: none); a lupa gira e
   esmaece no lugar. */
#map .leaflet-right .leaflet-control-geocoder-throbber .controle-redondo svg {
    opacity: .55;
    animation: controle-busca-gira 1s linear infinite;
}

@keyframes controle-busca-gira {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #map .leaflet-right .leaflet-control-geocoder-throbber .controle-redondo svg { animation: none; }
}

/* Identificar ligado (classe sincronizada por webgis_utils.js). */
#map .leaflet-right .controle-redondo.btn-info-active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Norte: só indica (o Leaflet não gira o mapa). Primeiro da coluna, afastado dos demais por baixo. */
#map .leaflet-top.leaflet-right .controle-norte {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
    border-radius: 100px;
    background: #252526;
}

#map .leaflet-right .controle-norte svg { display: block; }

/* Zoom: + e − numa cápsula vertical só (36 x 72px). */
#map .leaflet-right .leaflet-control-zoom {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 36px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--surface);
    box-shadow: none;
    overflow: hidden;
}

#map .leaflet-right .leaflet-control-zoom a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 35px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--fg);
    line-height: 1;
    text-decoration: none;
}

#map .leaflet-right .leaflet-control-zoom a:hover { background-color: var(--surface-2); }

#map .leaflet-right .leaflet-control-zoom a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -3px;
}

#map .leaflet-right .leaflet-control-zoom a.leaflet-disabled {
    color: var(--muted);
    opacity: .45;
    background: transparent;
}

#map .leaflet-right .leaflet-control-zoom svg { pointer-events: none; }

/* Busca (geocoder): botão redondo; o campo abre para a esquerda numa
   pílula com o mesmo contorno; resultados num cartão logo abaixo. */
#map .leaflet-right .leaflet-control-geocoder {
    position: relative;
    z-index: 801;                /* resultados por cima dos botões abaixo (800) */
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    min-width: 0;
    min-height: 0;
}

#map .leaflet-right .leaflet-control-geocoder-expanded {
    border: 1px solid var(--border);
    background: var(--surface);
}

#map .leaflet-right .leaflet-control-geocoder-expanded .controle-redondo {
    width: 34px;
    height: 34px;
    border: 0;
    background-color: transparent;
}

#map .leaflet-right .leaflet-control-geocoder-form input {
    width: 220px;
    height: 34px;
    padding: 0 4px 0 14px;
    font-family: var(--app-font);
    font-size: 13px;
    color: var(--fg);
}

#map .leaflet-right .leaflet-control-geocoder-alternatives,
#map .leaflet-right .leaflet-control-geocoder-error {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    box-sizing: border-box;
    width: 270px;
    margin: 0;
    padding: 6px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: var(--app-font);
    font-size: var(--fs-sm);
    color: var(--fg);
    list-style: none;
}

#map .leaflet-right .leaflet-control-geocoder-error { padding: 10px 14px; }

#map .leaflet-right .leaflet-control-geocoder-alternatives-minimized { display: none; }

#map .leaflet-right .leaflet-control-geocoder-alternatives a {
    display: block;
    width: auto;
    height: auto;
    padding: 6px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--fg);
    line-height: 1.35;
    text-align: left;
    white-space: normal;
}

#map .leaflet-right .leaflet-control-geocoder-alternatives a:hover,
#map .leaflet-right .leaflet-control-geocoder-selected a {
    background: var(--surface-2);
}

/* Tela de toque: alvo de 44px. */
@media (pointer: coarse) {
    #map .leaflet-right .controle-redondo,
    #map .leaflet-top.leaflet-right .controle-norte {
        width: var(--toque);
        height: var(--toque);
    }

    #map .leaflet-right .leaflet-control-geocoder-expanded .controle-redondo {
        width: calc(var(--toque) - 2px);
        height: calc(var(--toque) - 2px);
    }

    #map .leaflet-right .leaflet-control-zoom { width: var(--toque); }

    #map .leaflet-right .leaflet-control-zoom a {
        width: calc(var(--toque) - 2px);
        height: calc(var(--toque) - 1px);
    }
}

/* Atribuição do Leaflet (canto inferior direito): no máximo 14px de
   altura, abaixo da base de 16px da toolbar, da legenda e dos cartões. */
#map .leaflet-control-attribution {
    font-size: 11px;
    line-height: 14px;
}

/* --- ESCALA E COORDENADAS: cartões na base do mapa, à esquerda ---
   Lado a lado (escala, depois coordenadas). --cartoes-base os põe na
   linha da toolbar ou acima dela (ver o começo deste arquivo). */
.leaflet-bottom.leaflet-left {
    left: 12px;
    bottom: var(--cartoes-base);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    transition: bottom .2s ease;
}

#map .leaflet-bottom.leaflet-left .leaflet-control {
    float: none;
    clear: none;
    margin: 0;
}

.cartao-mapa {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: none;
    font-family: var(--app-font);
    color: var(--fg);
    line-height: 1.2;
}

#map .leaflet-bottom .cartao-escala {
    order: 1;
    width: 124px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

.cartao-escala__valor {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Linha fina com marcas nas pontas (borda de baixo + laterais). */
.cartao-escala__linha {
    display: block;
    box-sizing: border-box;
    height: 6px;
    border: 1px solid var(--fg);
    border-top: 0;
    max-width: 100%;             /* nunca estoura o cartão */
    transition: width .15s;
}

#map .leaflet-bottom .cartao-coordenadas {
    order: 2;
    width: 212px;
    gap: 10px;
}

.cartao-coordenadas svg { flex: 0 0 auto; }

.cartao-coordenadas__grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    flex: 1 1 auto;
}

.cartao-coordenadas__rotulo {
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.1;
    color: var(--muted);
}

.cartao-coordenadas__valor {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Computador (>= 1024px): escala e coordenadas viram UM cartão de 240px
   (escala | divisória fina | mira e lat/lon empilhados), sempre na linha
   da toolbar. Os dois controles continuam separados no DOM; aqui eles se
   encostam e dividem o contorno. */
@media (min-width: 1024px) {
    .leaflet-bottom.leaflet-left { gap: 0; }

    #map .leaflet-bottom .cartao-escala {
        width: 84px;
        padding: 0 10px 0 14px;
        border-right: 0;
        border-radius: 16px 0 0 16px;
    }

    #map .leaflet-bottom .cartao-coordenadas {
        width: 156px;
        gap: 8px;
        padding: 0 14px 0 10px;
        border-left: 0;
        border-radius: 0 16px 16px 0;
    }

    #map .leaflet-bottom .cartao-coordenadas::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background: var(--border);
    }

    .cartao-coordenadas svg { width: 18px; height: 18px; }

    .cartao-coordenadas__grade {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        column-gap: 6px;
        align-items: baseline;
    }

    .cartao-coordenadas__rotulo { font-size: 10.5px; }

    .cartao-coordenadas__valor { font-size: 11.5px; line-height: 1.25; }
}

/* Celular: cartões menores, logo acima da toolbar presa à base (a folha,
   quando abre, os cobre). Coluna da direita mais junta. */
@media (max-width: 767.98px) {
    .leaflet-top.leaflet-right {
        gap: 6px;
        padding: 8px 8px 0 0;
    }

    #map .leaflet-top.leaflet-right .controle-norte { margin-bottom: 10px; }

    .leaflet-bottom.leaflet-left {
        left: 8px;
        gap: 6px;
    }

    .cartao-mapa {
        height: 38px;
        padding: 0 10px;
        border-radius: 12px;
    }

    #map .leaflet-bottom .cartao-escala { width: 92px; }

    #map .leaflet-bottom .cartao-coordenadas {
        width: auto;
        gap: 8px;
    }

    .cartao-coordenadas svg { width: 16px; height: 16px; }

    .cartao-escala__valor,
    .cartao-coordenadas__valor { font-size: 11px; }

    .cartao-coordenadas__rotulo { font-size: 10px; }
}

/* ============================================================
   MODAL CARREGAR CAMADA (#uploadModal, webgis.html; lógica em
   webgis_utils.js initUploadTool). O <input type=file> fica
   visualmente escondido mas focável; o rótulo faz o papel de botão e
   o nome do arquivo aparece inteiro ou cortado com reticências (nome
   completo no title). Erro em #upload-error (role=alert), andamento em
   #upload-status (role=status), que some quando está vazio.
   .modal-mapa (Exportar mapa, sidebar-results.html) usa a mesma moldura;
   a ação principal dele é .painel-acao (sidebar-results.css).
   ============================================================ */
.upload-camada .modal-content,
.modal-mapa .modal-content {
    font-family: var(--app-font);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-painel);
}

.upload-camada .modal-header,
.modal-mapa .modal-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.upload-camada .modal-title,
.modal-mapa .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--brand);
    text-wrap: balance;
}

.upload-camada .modal-body,
.modal-mapa .modal-body {
    padding: 16px;
}

.upload-camada__rotulo {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.upload-camada__seletor {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--toque);
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.upload-camada__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.upload-camada__seletor:focus-within {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, .25);
}

.upload-camada__botao {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--brand);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.upload-camada__botao:hover {
    background: rgba(0, 53, 135, .06);
}

/* Durante a leitura a escolha de arquivo fica travada (initUploadTool). */
.upload-camada__input:disabled + .upload-camada__botao {
    opacity: .55;
    cursor: not-allowed;
}

.upload-camada__nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--muted);
}

.upload-camada__nome.tem-arquivo {
    color: var(--fg);
    font-weight: 500;
}

.upload-camada__formatos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 14px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.upload-camada__formatos dt {
    font-weight: 600;
}

.upload-camada__formatos dd {
    margin: 0;
    color: var(--muted);
}

.upload-camada__status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--fg);
}

.upload-camada__status:empty {
    display: none;
}

.upload-camada__status.is-processando::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--brand);
    border-right-color: transparent;
    border-radius: 50%;
    animation: controle-busca-gira .75s linear infinite;
}

.upload-camada__erro {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #f1aeb5;
    border-radius: var(--r-sm);
    background: #f8d7da;
    color: #842029;
    font-size: 13px;
    line-height: 1.4;
}

.upload-camada__erro[hidden] {
    display: none;
}

.upload-camada .modal-footer,
.modal-mapa .modal-footer {
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

.upload-camada .modal-footer > .btn,
.modal-mapa .modal-footer > .btn {
    margin: 0;
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 500;
}

.upload-camada__cancelar,
.modal-mapa__cancelar {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--fg);
}

.upload-camada__cancelar:hover,
.modal-mapa__cancelar:hover {
    background: var(--surface-2);
}

.upload-camada__confirmar {
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
}

.upload-camada__confirmar:hover,
.upload-camada__confirmar:focus-visible {
    border-color: var(--brand-2);
    background: var(--brand-2);
    color: #fff;
}

.upload-camada__confirmar:disabled {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--muted);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .upload-camada__status.is-processando::before { animation-duration: 2s; }
}

@media (max-width: 767.98px) {
    .upload-camada .modal-footer > .btn,
    .modal-mapa .modal-footer > .btn {
        flex: 1 1 0;
        min-height: var(--toque);
        padding: 0 8px;
        white-space: nowrap;
    }

    .upload-camada__formatos {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .upload-camada__formatos dd + dt {
        margin-top: 6px;
    }
}