/* ============================================================
   Identidade visual AD.SPECT aplicada ao layout de widgets flutuantes
   (rail + painéis tipo card ancorados ao mapa).
   Paleta e tipografia extraídas do guia de marca AD.SPECT:
   Charcoal #1C2023 · Gray #767A7C · Taupe #A4A39A · Cream #DCDCD8 ·
   Poppins (Light para "AD." / ExtraBold para "SPECT")
   Conceito: contraste entre fundo escuro e elementos claros = tecnologia,
   profundidade e ambiente corporativo. Sem cor de destaque saturada —
   a "cor de ação" é o próprio contraste charcoal ⇄ cream.
   ============================================================ */

:root {
  --adspect-black: #1c2023;
  --adspect-black-soft: #2a2e33;
  --adspect-gray: #767a7c;
  --adspect-taupe: #a4a39a;
  --adspect-cream: #dcdcd8;
  --adspect-cream-dark: #c7c6c0;
  --adspect-white: #ffffff;
  --adspect-bg: #f4f3f1;
  --adspect-border: #ddd9d4;
  --adspect-radius: 12px;
  --adspect-radius-sm: 8px;
  --adspect-shadow: 0 6px 20px rgba(28, 32, 35, 0.16);
  --layers-sidebar-width: 300px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--adspect-black);
  font-size: 14px;
}

#topbar {
  height: 56px;
  background: var(--adspect-black);
  color: var(--adspect-cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  gap: 24px;
  border-bottom: 1px solid var(--adspect-black-soft);
  position: relative;
  z-index: 20;
}
#topbar::after {
  /* Reproduz a barra de amostras de cor do guia de marca (charcoal → gray →
     taupe → cream) como assinatura discreta sob a topbar. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--adspect-black) 0%,
    var(--adspect-gray) 33%,
    var(--adspect-taupe) 66%,
    var(--adspect-cream) 100%
  );
}

.brand {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--adspect-cream);
}

/* ---------- Wordmark AD.SPECT ----------
   "AD." em traço fino transmite precisão e sofisticação; ".SPECT" em peso
   forte reforça presença e autoridade — o mesmo conceito do guia de marca,
   recriado em tipografia viva (não imagem) para nitidez em qualquer tela. */
.brand-logo {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  letter-spacing: -0.01em;
}
.brand-logo-thin {
  font-weight: 300;
  font-size: 17px;
  color: var(--adspect-cream);
}
.brand-logo-dot {
  font-weight: 700;
  font-size: 17px;
  color: var(--adspect-taupe);
  margin: 0 1px;
}
.brand-logo-bold {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--adspect-cream);
}

.brand-divider {
  width: 1px;
  height: 18px;
  background: rgba(220, 220, 216, 0.25);
}
.brand-product {
  font-weight: 400;
  color: var(--adspect-taupe);
  font-size: 14px;
}

#search-box {
  flex: 1;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--adspect-black-soft);
  border: 1px solid rgba(220, 220, 216, 0.15);
  border-radius: 20px;
  padding: 6px 8px 6px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#search-box:focus-within {
  border-color: var(--adspect-cream);
  background: var(--adspect-black-soft);
  box-shadow: 0 0 0 3px rgba(220, 220, 216, 0.15);
}
.search-icon { font-size: 13px; opacity: .6; }

#address-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--adspect-cream);
}
#address-input::placeholder { color: rgba(220, 220, 216, 0.45); }

#btn-search-address {
  padding: 7px 18px;
  border: none;
  border-radius: 16px;
  background: var(--adspect-cream);
  color: var(--adspect-black);
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease;
}
#btn-search-address:hover { background: var(--adspect-cream-dark); }

/* Menu do usuário (nome, link de administração e sair) - montado por js/session.js */
#user-menu {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: 12px;
}
#user-menu.hidden { display: none; }
.user-menu-name {
  color: var(--adspect-taupe);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-link { color: var(--adspect-cream); text-decoration: none; }
.user-menu-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.user-menu-link.hidden { display: none; }
.user-menu-btn {
  font-family: inherit;
  font-size: 12px;
  color: var(--adspect-cream);
  background: transparent;
  border: 1px solid rgba(220, 220, 216, 0.25);
  border-radius: 16px;
  padding: 5px 14px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.user-menu-btn:hover { border-color: var(--adspect-cream); }
@media (max-width: 900px) { .user-menu-name { display: none; } }

#map-area {
  position: relative;
  height: calc(100% - 56px);
  width: 100%;
}

#viewDiv {
  width: 100%;
  height: 100%;
}

/* Overlay do OpenLayers usado só pelo Mapa de Kernel (ver kernel.js e o
   comentário do <script> do OpenLayers no index.html) - preenche exatamente
   a mesma área do mapa da HERE (#viewDiv), acima dela (z-index alto o
   bastante pra ficar por cima dos tiles/marcadores, mas abaixo de toda a UI
   fixa: barra de ferramentas/painel (15), sidebar de Camadas (16), avisos
   (10)) e nunca captura clique/arraste - toda a navegação continua sendo
   feita no mapa da HERE embaixo, que fica sincronizado com este overlay via
   App.map "mapviewchange" (kernel.js cuida disso, não este CSS). */
#kernel-heatmap-map {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
#kernel-heatmap-map .ol-viewport,
#kernel-heatmap-map canvas {
  pointer-events: none;
}

/* ---------- Barra de ferramentas horizontal (top-right) ---------- */

#top-overlay {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  max-width: min(92vw, 720px);
  /* O contêiner em si não deve capturar cliques - apenas seus filhos visíveis.
     Sem isso, a área "vazia" bloqueia o mapa por baixo. */
  pointer-events: none;
  transition: right .25s ease;
}
#top-overlay > * { pointer-events: auto; }

#toolbar-horizontal {
  /* No HTML, #tool-panel vem antes de #toolbar-horizontal (útil pra outras
     coisas), mas visualmente a barra de ferramentas deve sempre ficar por
     cima e o painel da ferramenta deve abrir abaixo dela - não o
     contrário. "order" resolve isso sem precisar mudar o HTML/JS. */
  order: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius);
  box-shadow: var(--adspect-shadow);
  padding: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.toolbar-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: #fff;
  border-radius: var(--adspect-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--adspect-black);
  transition: background .12s ease, color .12s ease;
  flex-shrink: 0;
}
.toolbar-btn:hover { background: rgba(164, 163, 154, 0.22); }
.toolbar-btn.active {
  background: var(--adspect-black);
  color: var(--adspect-cream);
}

/* ---------- Ícones da barra de ferramentas ----------
   Símbolos de linha (estilo Esri/Calcite) em PNG, um par por ferramenta:
   traço charcoal no estado normal e traço cream quando o botão fica
   ativo (background escuro) - a mesma lógica de contraste da marca. */
.toolbar-icon {
  width: 20px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.toolbar-btn[data-tool="radius"] .toolbar-icon { background-image: url("../assets/icons/radius.png"); }
.toolbar-btn.active[data-tool="radius"] .toolbar-icon { background-image: url("../assets/icons/radius-on.png"); }

.toolbar-btn[data-tool="isochrone"] .toolbar-icon { background-image: url("../assets/icons/isochrone.png"); }
.toolbar-btn.active[data-tool="isochrone"] .toolbar-icon { background-image: url("../assets/icons/isochrone-on.png"); }

.toolbar-btn[data-tool="route"] .toolbar-icon { background-image: url("../assets/icons/route.png"); }
.toolbar-btn.active[data-tool="route"] .toolbar-icon { background-image: url("../assets/icons/route-on.png"); }

.toolbar-btn[data-tool="kernel"] .toolbar-icon { background-image: url("../assets/icons/kernel.png"); }
.toolbar-btn.active[data-tool="kernel"] .toolbar-icon { background-image: url("../assets/icons/kernel-on.png"); }

.toolbar-btn[data-tool="poi"] .toolbar-icon { background-image: url("../assets/icons/poi.png"); }
.toolbar-btn.active[data-tool="poi"] .toolbar-icon { background-image: url("../assets/icons/poi-on.png"); }

.toolbar-btn[data-tool="choropleth"] .toolbar-icon { background-image: url("../assets/icons/choropleth.png"); }
.toolbar-btn.active[data-tool="choropleth"] .toolbar-icon { background-image: url("../assets/icons/choropleth-on.png"); }
.toolbar-btn[data-tool="filter"] .toolbar-icon { background-image: url("../assets/icons/filter.png"); }
.toolbar-btn.active[data-tool="filter"] .toolbar-icon { background-image: url("../assets/icons/filter-on.png"); }
.toolbar-btn[data-tool="pointAnalysis"] .toolbar-icon { background-image: url("../assets/icons/pointanalysis.png"); }
.toolbar-btn.active[data-tool="pointAnalysis"] .toolbar-icon { background-image: url("../assets/icons/pointanalysis-on.png"); }

.toolbar-btn[data-tool="measure"] .toolbar-icon { background-image: url("../assets/icons/measure.png"); }
.toolbar-btn.active[data-tool="measure"] .toolbar-icon { background-image: url("../assets/icons/measure-on.png"); }

.toolbar-btn[data-tool="draw"] .toolbar-icon { background-image: url("../assets/icons/draw.png"); }
.toolbar-btn.active[data-tool="draw"] .toolbar-icon { background-image: url("../assets/icons/draw-on.png"); }

.toolbar-btn[data-tool="kml"] .toolbar-icon { background-image: url("../assets/icons/kml.png"); }
.toolbar-btn.active[data-tool="kml"] .toolbar-icon { background-image: url("../assets/icons/kml-on.png"); }

.toolbar-btn[data-tool="excel"] .toolbar-icon { background-image: url("../assets/icons/excel.png"); }
.toolbar-btn.active[data-tool="excel"] .toolbar-icon { background-image: url("../assets/icons/excel-on.png"); }

#layers-toggle-btn .toolbar-icon { background-image: url("../assets/icons/layers.png"); }
#layers-toggle-btn.active .toolbar-icon { background-image: url("../assets/icons/layers-on.png"); }

.toolbar-separator {
  width: 1px;
  align-self: stretch;
  background: var(--adspect-border);
  margin: 2px 4px;
  flex-shrink: 0;
}

.widget-panel {
  order: 2; /* abre abaixo da barra de ferramentas - ver #toolbar-horizontal */
  width: 300px;
  max-height: min(60vh, 520px);
  background: #fff;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius);
  box-shadow: var(--adspect-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.widget-panel.hidden { display: none; }

.widget-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--adspect-black);
  color: var(--adspect-cream);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.widget-panel-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--adspect-taupe);
  width: 22px;
  height: 22px;
  border-radius: var(--adspect-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-panel-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--adspect-cream); }

.widget-panel-body {
  padding: 14px;
  overflow-y: auto;
}

.widget-panel-body h4 { margin: 0 0 4px 0; font-size: 13px; font-weight: 600; }

.widget-panel-body label {
  display: block;
  font-size: 12px;
  color: var(--adspect-gray);
  margin-bottom: 4px;
  margin-top: 10px;
  font-weight: 500;
}

.widget-panel-body input[type="number"],
.widget-panel-body input[type="text"],
.widget-panel-body select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--adspect-black);
}
.widget-panel-body input:focus,
.widget-panel-body select:focus {
  outline: none;
  border-color: var(--adspect-black);
  box-shadow: 0 0 0 3px rgba(28, 32, 35, 0.12);
}

.widget-panel-body .hint {
  font-size: 12px;
  color: var(--adspect-gray);
  margin-top: 8px;
  line-height: 1.4;
}

.widget-panel-body .btn-primary,
.widget-panel-body .btn-secondary,
.widget-panel-body .file-label {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: var(--adspect-radius-sm);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.widget-panel-body .btn-primary { background: var(--adspect-black); color: var(--adspect-cream); width: 100%; }
.widget-panel-body .btn-primary:hover { background: var(--adspect-black-soft); }
.widget-panel-body .btn-secondary { background: var(--adspect-bg); color: var(--adspect-black); width: 100%; border: 1px solid var(--adspect-border); }
.widget-panel-body .btn-secondary:hover { background: var(--adspect-border); }
.widget-panel-body .file-label { background: rgba(164, 163, 154, 0.15); color: var(--adspect-black); border: 1px dashed var(--adspect-gray); width: 100%; }
.widget-panel-body input[type="file"] { display: none; }

.widget-panel-body .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.widget-panel-body .checkbox-row input { width: auto; }
.widget-panel-body .checkbox-row label { margin: 0; }

.filter-status {
  font-size: 12px;
  color: var(--adspect-black);
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.4;
}

#filter-range-area.hidden,
#filter-controls.hidden,
#filter-empty-hint.hidden { display: none; }

/* Desabilitado enquanto busca campos/faixa de valores via WFS numa
   camada de Referência/Sociodemográfica (ver js/tools/filter.js). */
#filter-range-area.range-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Mínimo/Máximo da ferramenta de Filtro por Campo: duas caixas lado a
   lado, cada uma com seu rótulo bem visível em cima - a pedido do
   usuário, SEM slider (só digitar o valor, nada de arrastar) e deixando
   claro que são dois campos distintos (ver js/tools/filter.js). Os
   próprios <input type="number"> usam o estilo padrão de qualquer campo
   do painel (.widget-panel-body input[type="number"], mais acima) - só
   a disposição em duas colunas é específica daqui. */
.filter-range-fields {
  display: flex;
  gap: 10px;
}
.filter-range-field {
  flex: 1;
  min-width: 0;
}
.filter-range-field input[type="number"] {
  text-align: center;
  font-weight: 700;
}

/* ---------- Sliders (Raio/Blur/Opacidade do Mapa de Kernel) ----------
   Pedido do usuário: esses 3 campos numéricos (antes <input type="number">)
   devem aparecer como slider deslizante, no mesmo espírito do slider de
   opacidade de camada que já existe (.layer-opacity-slider, mais acima
   neste arquivo) - mesmo accent-color, mesma altura de "trilho". Como um
   <input type="range"> sozinho não mostra o valor numérico atual, cada
   slider tem um "balão" (.kernel-slider-value) ao lado do label, atualizado
   em tempo real via JS (ver kernel.js, evento "input" no slider). */
.widget-panel-body .kernel-slider-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kernel-slider-value {
  flex-shrink: 0;
  min-width: 30px;
  padding: 1px 7px;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius-sm);
  background: var(--adspect-bg);
  color: var(--adspect-black);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.widget-panel-body input[type="range"].kernel-slider {
  width: 100%;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  accent-color: var(--adspect-black);
  cursor: pointer;
}
.widget-panel-body input[type="range"].kernel-slider:focus {
  outline: none;
  box-shadow: none;
}

/* ---------- Chips de categoria (POI, Medição) ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--adspect-border);
  background: #fff;
  color: var(--adspect-black);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip:hover { background: rgba(164, 163, 154, 0.18); }
.chip.active {
  background: var(--adspect-black);
  border-color: var(--adspect-black);
  color: var(--adspect-cream);
  font-weight: 600;
}
/* Ícone (SVG, mesmo estilo monocromático - stroke/fill em currentColor -
   usado no seletor de modo de Desenho, ver #draw-mode-row abaixo) em vez de
   emoji dentro de um chip de texto (ex.: Medição: Distância/Área) - mantém
   o texto, só troca o glifo colorido/inconsistente do emoji por um ícone de
   linha que acompanha a cor do chip (preto no estado normal, creme quando
   ativo, via currentColor - sem precisar de uma imagem por estado). */
.chip svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: block;
}

/* Modo de desenho: barra segmentada só com ícone (SVG), no estilo de
   toolbars de desenho de mapa comuns (pino / linha / polígono / círculo
   lado a lado, sem texto) - ao invés dos chips de texto padrão acima. */
#draw-mode-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius-sm);
  overflow: hidden;
  background: #fff;
}
#draw-mode-row .chip {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 0;
  border: none;
  border-right: 1px solid var(--adspect-border);
  border-radius: 0;
  background: #fff;
  color: var(--adspect-gray);
}
#draw-mode-row .chip:last-child { border-right: none; }
#draw-mode-row .chip svg { width: 19px; height: 19px; display: block; }
#draw-mode-row .chip:hover { background: rgba(164, 163, 154, 0.18); color: var(--adspect-black); }
#draw-mode-row .chip.active {
  background: var(--adspect-black);
  border-color: var(--adspect-black);
  color: var(--adspect-cream);
}

/* Rota A -> B: seletor de modal (um ícone circular por modal, seleção
   única) e bloco de origem/destino no estilo "Google Maps directions"
   (linha pontilhada ligando os 2 campos + botão de trocar). */
.route-modes-row {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  padding-bottom: 10px;
  margin-top: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--adspect-border);
}
.route-mode-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--adspect-gray);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.route-mode-btn svg { width: 20px; height: 20px; display: block; }
.route-mode-btn:hover { background: rgba(164, 163, 154, 0.18); color: var(--adspect-black); }
.route-mode-btn.active { background: var(--mode-color, var(--adspect-black)); color: #fff; }
.route-mode-btn:disabled { opacity: .4; cursor: not-allowed; }

.route-points-block {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 4px 0 2px;
}
.route-points-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 14px;
  flex-shrink: 0;
  padding: 13px 0 11px;
}
.route-dot-origin {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--adspect-black);
  background: #fff;
  flex-shrink: 0;
}
.route-dots {
  flex: 1;
  width: 0;
  border-left: 2px dotted var(--adspect-taupe);
  margin: 3px 0;
}
.route-pin-dest {
  width: 14px;
  height: 14px;
  color: var(--adspect-black);
  flex-shrink: 0;
}
.route-pin-dest svg { width: 100%; height: 100%; display: block; }

.route-points-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.route-field-row { position: relative; display: flex; align-items: center; }
.route-field-row input[type="text"] { padding-right: 32px; margin: 0; }
.route-field-icon-btn {
  position: absolute;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--adspect-gray);
  cursor: pointer;
  padding: 0;
}
.route-field-icon-btn:hover { color: var(--adspect-black); }
.route-field-icon-btn svg { width: 16px; height: 16px; }

.route-swap-btn {
  align-self: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--adspect-border);
  border-radius: 50%;
  background: #fff;
  color: var(--adspect-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.route-swap-btn:hover { background: rgba(164, 163, 154, 0.18); color: var(--adspect-black); }
.route-swap-btn:disabled { opacity: .4; cursor: not-allowed; }
.route-swap-btn svg { width: 15px; height: 15px; }

/* ---------- Resultados de busca de POI ---------- */
.poi-result-list {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.poi-result-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius-sm);
  margin-bottom: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s ease;
}
.poi-result-list li:hover { background: rgba(164, 163, 154, 0.15); }
.poi-result-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.poi-result-dist {
  flex-shrink: 0;
  color: var(--adspect-gray);
  font-weight: 600;
}

/* ---------- Readout da ferramenta de Medição ---------- */
.measure-readout {
  margin-top: 10px;
  padding: 12px;
  background: var(--adspect-black);
  color: var(--adspect-cream);
  border-radius: var(--adspect-radius-sm);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

/* ---------- Painel de Camadas fixo (left-side, recolhível) ---------- */

#layers-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--layers-sidebar-width);
  z-index: 16;
  pointer-events: none; /* só os filhos visíveis (handle + inner) capturam clique */
  transition: transform .25s ease;
}
#layers-sidebar.collapsed {
  transform: translateX(-100%);
}

.layers-sidebar-inner {
  position: absolute;
  inset: 0;
  background: #fff;
  border-right: 1px solid var(--adspect-border);
  border-top-right-radius: var(--adspect-radius);
  border-bottom-right-radius: var(--adspect-radius);
  box-shadow: var(--adspect-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

.layers-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  background: var(--adspect-black);
  color: var(--adspect-cream);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
#layers-sidebar-collapse-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--adspect-taupe);
  width: 24px;
  height: 24px;
  border-radius: var(--adspect-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
#layers-sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--adspect-cream); }

.layers-sidebar-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.layers-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--adspect-gray);
  margin-bottom: 8px;
}
.layers-section-label-spaced { margin-top: 22px; }

/* Botão discreto (aba/handle) sempre visível na borda esquerda da tela,
   independentemente do painel estar aberto ou recolhido - abre/fecha.
   Fica "grudado" na borda direita do painel e viaja junto com ele
   (é filho de #layers-sidebar, então o transform do pai já o desloca). */
#layers-sidebar-handle {
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  width: 28px;
  height: 56px;
  border: 1px solid var(--adspect-border);
  border-left: none;
  background: #fff;
  border-radius: 0 var(--adspect-radius-sm) var(--adspect-radius-sm) 0;
  box-shadow: var(--adspect-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--adspect-black);
  pointer-events: auto;
  transition: background .12s ease;
}
#layers-sidebar-handle:hover { background: rgba(164, 163, 154, 0.22); }
.handle-chevron {
  font-size: 16px;
  font-weight: 700;
  transition: transform .25s ease;
  display: inline-block;
  transform: rotate(180deg); /* estado aberto: aponta para a esquerda (recolher) */
}
/* Recolhido: painel some para fora da tela à esquerda, seta aponta para a
   direita (indica "puxar"/mostrar o painel novamente). */
#layers-sidebar.collapsed .handle-chevron { transform: rotate(0deg); }

#layers-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
#layers-list li {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius-sm);
  margin-bottom: 6px;
}

/* Linha principal: reordenar + título + ações + remover */
.layer-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ▲/▼ pra mover a camada na pilha (topo da lista = topo do mapa) */
.layer-item-reorder {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  line-height: 1;
}
.layer-reorder-btn {
  border: none;
  background: transparent;
  color: var(--adspect-gray);
  cursor: pointer;
  font-size: 8px;
  padding: 1px 2px;
}
.layer-reorder-btn:hover:not(:disabled) { color: var(--adspect-black); }
.layer-reorder-btn:disabled { color: var(--adspect-border); cursor: default; }

.layer-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.layer-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Ação extra opcional por camada (ex.: checkbox 🔥 Heatmap no KML) */
.layer-action-checkbox {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--adspect-gray);
  cursor: pointer;
  white-space: nowrap;
}
.layer-action-checkbox input {
  width: auto;
  cursor: pointer;
  accent-color: var(--adspect-black);
}
.layer-action-checkbox:has(input:checked) {
  color: var(--adspect-black);
  font-weight: 600;
}

/* Checkbox de ativar/desativar uma camada em "Camadas ativas" - usado tanto
   pelas camadas normais (App.addManagedLayer, na frente das setas de
   reordenar) quanto pelas camadas "externas" sem H.map.Group por trás
   (ex.: Mapa de Kernel/OpenLayers - ver App.addExternalManagedLayer, que
   não tem setas de reordenar pra colocar o checkbox ao lado). */
.layer-item-visibility-toggle {
  flex-shrink: 0;
}

.layer-table-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--adspect-gray);
  font-size: 14px;
  flex-shrink: 0;
}
.layer-table-btn:hover { color: var(--adspect-black); }

.layer-remove-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #c0392b;
  font-size: 14px;
  flex-shrink: 0;
}

/* Linha de transparência (ícone + slider + box numérico "nn%") - abaixo
   do título. Reformulado a pedido do usuário no estilo do controle
   "Picture Transparency" do PowerPoint/Office: trilho fino + marcador
   redondo (em vez do accent-color padrão do navegador, que em alguns
   casos pintava a trilha inteira de preto sólido) e um box ao lado onde
   dá pra ver/editar o percentual diretamente (clique seleciona o número
   pra digitar por cima, com as setinhas nativas do <input type="number">
   pra incrementar/decrementar) - ver _buildOpacityControl em js/app.js,
   compartilhado entre "Camadas ativas" e "Camadas Sociodemográficas". */
.layer-item-opacity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.layer-opacity-slider {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  height: 14px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.layer-opacity-slider:focus { outline: none; }

/* Trilho: fino e neutro (cinza claro), sem indicar preenchimento - igual
   ao visual do slider de transparência do PowerPoint. */
.layer-opacity-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--adspect-border);
}
.layer-opacity-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--adspect-border);
}

/* Marcador: círculo pequeno com sombra sutil (não mais o quadrado/pílula
   preto "cheio" do accent-color padrão). */
.layer-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px; /* centraliza no trilho de 4px: (4 - 14) / 2 */
  border-radius: 50%;
  background: var(--adspect-black);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(28, 32, 35, 0.35);
}
.layer-opacity-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--adspect-black);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(28, 32, 35, 0.35);
}
.layer-opacity-slider:hover::-webkit-slider-thumb,
.layer-opacity-slider:focus::-webkit-slider-thumb { background: var(--adspect-black-soft); }
.layer-opacity-slider:hover::-moz-range-thumb,
.layer-opacity-slider:focus::-moz-range-thumb { background: var(--adspect-black-soft); }

/* Box numérico "nn%" - mesma ideia do spinner de percentual do Office. */
.layer-opacity-box {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius-sm);
  background: #fff;
}
.layer-opacity-input {
  width: 42px; /* as setinhas nativas do spinner ocupam espaço DENTRO dessa largura (Chrome) - precisa sobrar o suficiente pra "100" (3 dígitos) não ficar cortado */
  flex-shrink: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--adspect-black);
  text-align: right;
  padding: 0;
  -moz-appearance: textfield;
}
.layer-opacity-input::-webkit-inner-spin-button,
.layer-opacity-input::-webkit-outer-spin-button {
  opacity: 1;
  margin-left: 2px;
}
.layer-opacity-percent {
  font-size: 11px;
  color: var(--adspect-gray);
}

/* Botão (ícone) que abre/fecha o popover de transparência - a pedido do
   usuário, só este botão aparece na linha do item por padrão; o slider +
   box "nn%" (acima) só aparecem dentro do popover, ao clicar - ver
   _buildOpacityToggle em js/app.js. */
.layer-opacity-toggle-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
}
.layer-opacity-toggle-btn {
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: var(--adspect-radius-sm);
  background: transparent;
  color: var(--adspect-gray);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.layer-opacity-toggle-btn:hover { background: rgba(164, 163, 154, 0.18); color: var(--adspect-black); }
.layer-opacity-toggle-btn.active {
  background: var(--adspect-black);
  border-color: var(--adspect-black);
  color: var(--adspect-cream);
}

/* position:fixed (não mais absolute/ancorado no botão): o popover é
   anexado direto em <body> (ver _buildOpacityToggle em js/app.js) pra
   escapar do overflow:hidden/auto da sidebar de Camadas - senão ficaria
   cortado ou sobreporia a lista de camadas logo abaixo, em vez de abrir
   do lado, sobre o mapa. left/top vêm de JS (getBoundingClientRect do
   botão), calculados a cada abertura. */
.layer-opacity-popover {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 170px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius);
  box-shadow: 0 6px 20px rgba(28, 32, 35, 0.18);
  cursor: default; /* não herda o "grab" da linha arrastável por trás */
}
.layer-opacity-popover-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--adspect-black);
}

/* ---------- Tabela de atributos (modal) ---------- */
.attr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 32, 35, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.attr-modal {
  background: #fff;
  border-radius: var(--adspect-radius);
  width: min(720px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.attr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--adspect-black);
  color: var(--adspect-cream);
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.attr-modal-close {
  border: none;
  background: transparent;
  color: var(--adspect-cream);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
.attr-modal-close:hover { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
.attr-modal-body {
  padding: 14px 16px;
  overflow: auto;
}
.attr-modal-empty {
  color: var(--adspect-gray);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}
.attr-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  white-space: nowrap;
}
.attr-table th,
.attr-table td {
  border: 1px solid var(--adspect-border);
  padding: 6px 10px;
  text-align: left;
}
.attr-table th {
  background: var(--adspect-bg);
  color: var(--adspect-black);
  font-weight: 600;
  position: sticky;
  top: 0;
}
.attr-table tr:nth-child(even) td { background: rgba(164, 163, 154, 0.08); }

/* ---------- Dashboard "infográfico" da Análise de Ponto (ver
   js/tools/pointAnalysis.js) - usa SOMENTE a camada censitária
   AL_setores_CD2022_selecao (CONFIG.CENSUS_SECTORS_LAYER), com os mesmos
   títulos temáticos das camadas WMS já publicadas (População, Média de
   moradores, Renda do responsável, Domicílios ocupados, Concentração de
   casas/apartamentos/casas em condomínio-vila - ver o mapeamento de
   campos no topo de pointAnalysis.js, confirmado contra o SLD de cada
   camada publicada). Reaproveita a identidade visual do modal de Tabela
   de Atributos (.attr-modal-overlay/.attr-modal-header), só com um corpo
   (.infographic-body) desenhado como infográfico: um número-herói, um
   grid de cartões KPI e uma composição em barra empilhada (3 cores fixas,
   validadas contra daltonismo via scripts/validate_palette.js do skill de
   dataviz) - em vez de tabelas de estatística cruas. Os detalhes por
   setor continuam disponíveis, só que recolhidos (<details>), como o
   "table view" de apoio exigido pelo skill quando uma cor da composição
   fica abaixo de 3:1 de contraste (ver comentário em
   _buildComposition). */
.attr-modal.infographic-modal {
  width: min(880px, 94vw);
}
.infographic-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.infographic-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--adspect-radius);
  background: linear-gradient(135deg, var(--adspect-black) 0%, var(--adspect-black-soft) 100%);
  color: var(--adspect-cream);
}
.infographic-hero-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.infographic-hero-main { min-width: 0; }
.infographic-hero-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}
.infographic-hero-label {
  font-size: 13px;
  color: var(--adspect-cream-dark);
  margin-top: 2px;
}
.infographic-hero-meta {
  font-size: 11.5px;
  color: rgba(220, 220, 216, 0.7);
  margin-top: 8px;
}

.infographic-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.infographic-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius-sm);
  background: var(--adspect-bg);
}
.infographic-kpi-icon { font-size: 22px; }
.infographic-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--adspect-black);
  line-height: 1.15;
}
.infographic-kpi-label {
  font-size: 11.5px;
  color: var(--adspect-gray);
}

.infographic-section-empty {
  font-size: 12px;
  color: var(--adspect-gray);
}
.infographic-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--adspect-black);
  margin-bottom: 10px;
}
.infographic-stackbar {
  display: flex;
  width: 100%;
  height: 22px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--adspect-border);
  margin-bottom: 10px;
}
.infographic-stackbar-seg {
  height: 100%;
  min-width: 2px;
}
.infographic-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.infographic-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.infographic-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.infographic-legend-text { color: var(--adspect-black); font-weight: 500; }
.infographic-legend-value { color: var(--adspect-gray); }

.infographic-details {
  border-top: 1px solid var(--adspect-border);
  padding-top: 12px;
}
.infographic-details summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--adspect-black);
  list-style: none;
}
.infographic-details summary::-webkit-details-marker { display: none; }
.infographic-details summary::before {
  content: "▸ ";
  color: var(--adspect-gray);
}
.infographic-details[open] summary::before { content: "▾ "; }
.infographic-details-table-wrap {
  margin-top: 10px;
  max-height: 280px;
  overflow: auto;
}

/* ---------- Modal de texto genérico (substitui window.prompt - ver
   App.promptText, usado hoje só pelo nome do Mapa de Kernel ao gerar) -
   reaproveita a MESMA identidade visual da Tabela de Atributos acima
   (.attr-modal-overlay/.attr-modal-header/.attr-modal-close: overlay
   escurecido centralizado na tela, header preto/creme com "✕" pra
   cancelar), só numa caixa menor (formulário de 1 campo, não uma tabela) -
   ver .prompt-modal abaixo, que só sobrescreve a largura do .attr-modal
   compartilhado. window.prompt() nativo do Chrome aparece ancorado no TOPO
   da janela, fora da identidade visual do app - esta é a substituição. */
.attr-modal.prompt-modal {
  width: min(420px, 92vw);
}
.prompt-modal-body {
  padding: 16px;
}
.prompt-modal-message {
  font-size: 13px;
  color: var(--adspect-gray);
  margin: 0 0 10px 0;
}
.prompt-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--adspect-black);
}
.prompt-modal-input:focus {
  outline: none;
  border-color: var(--adspect-black);
}
.prompt-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.prompt-modal-btn {
  padding: 8px 16px;
  border-radius: var(--adspect-radius-sm);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}
.prompt-modal-cancel-btn {
  background: var(--adspect-bg);
  color: var(--adspect-black);
  border: 1px solid var(--adspect-border);
}
.prompt-modal-cancel-btn:hover { background: var(--adspect-border); }
.prompt-modal-confirm-btn {
  background: var(--adspect-black);
  color: var(--adspect-cream);
}
.prompt-modal-confirm-btn:hover { background: var(--adspect-black-soft); }

.reference-layers-list {
  list-style: none;
  padding: 6px 10px;
  margin: 0 0 4px 0;
  font-size: 13px;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius-sm);
  background: var(--adspect-white);
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
}
.reference-layers-list li { padding: 4px 0; min-width: 0; }
.reference-layers-list li:not(:last-child) {
  border-bottom: 1px solid rgba(164, 163, 154, 0.25);
}
.reference-layers-list:empty {
  padding: 7px 9px;
}
.reference-layers-list:empty::before {
  content: "Nenhuma camada disponível ainda.";
  color: var(--adspect-gray);
  font-size: 12px;
}

/* ---------- Lista "Camadas de pontos disponíveis" expansível/recolhível
   (Mapa de Kernel) - a pedido do usuário, pra ocupar menos espaço no
   painel quando não estiver em uso. O cabeçalho (título clicável + botão
   de atualizar) substitui o antigo <label>; o <ul id="kernel-layer-list">
   (.reference-layers-list, estilos acima) simplesmente ganha display:none
   quando recolhido - ver toggle em kernel.js. ---------- */
.kernel-layer-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 10px;
  margin-bottom: 4px;
}
.kernel-layer-list-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--adspect-gray);
  cursor: pointer;
  text-align: left;
}
.kernel-layer-list-toggle-btn:hover { color: var(--adspect-black); }
.kernel-layer-list-toggle-btn span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kernel-layer-list-chevron {
  flex-shrink: 0;
  display: inline-block;
  font-size: 10px;
  transition: transform 0.2s ease;
}
.kernel-layer-list-chevron-collapsed { transform: rotate(-90deg); }

#kernel-layer-list.kernel-layer-list-collapsed { display: none; }

.reference-layer-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  cursor: pointer;
  color: var(--adspect-black);
}
/* Causa raiz real de "cada item vira 2 linhas + barra de rolagem horizontal"
   na lista de camadas do Mapa de Kernel: ".widget-panel-body label" (regra
   genérica lá em cima, "display:block; margin-top:10px") tem especificidade
   MAIOR que ".reference-layer-item" sozinho (elemento+classe vence 1 classe
   só), e sempre que a lista aparece DENTRO de um painel de ferramenta
   (.widget-panel-body - caso do Mapa de Kernel, diferente da sidebar de
   Camadas/Referência, que fica fora do .widget-panel-body e por isso nunca
   teve esse problema), essa regra genérica vencia e desfazia o
   "display:flex" - o checkbox virava um bloco sozinho, o texto virava outro
   bloco cheio embaixo dele, sem conseguir aplicar o corte com reticências.
   Aqui a regra é reescrita com 2 classes (.widget-panel-body +
   .reference-layer-item) pra ganhar da genérica com certeza, e zera a
   margem que só faz sentido pros outros <label> "de verdade" do painel. */
.widget-panel-body .reference-layer-item {
  display: flex;
  margin: 0;
}
.reference-layer-item input {
  width: auto;
  cursor: pointer;
  accent-color: var(--adspect-black);
  flex-shrink: 0;
}
.reference-layer-item span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botão pequeno de atualizar (usado no cabeçalho da lista de camadas de
   pontos do Mapa de Kernel, ver .kernel-layer-list-header) - fica ao lado
   do título/toggle, alinhado à direita pelo próprio flex (justify-content:
   space-between do container pai, não mais float). */
.kernel-layer-refresh-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  line-height: 18px;
  padding: 0;
  font-size: 13px;
  text-align: center;
  border: 1px solid var(--adspect-border);
  border-radius: 50%;
  background: var(--adspect-white);
  color: var(--adspect-black);
  cursor: pointer;
}
.kernel-layer-refresh-btn:hover { background: var(--adspect-bg); }

.sociodemo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 14px;
  background: var(--adspect-bg);
  border: 1.5px dashed var(--adspect-border);
  border-radius: var(--adspect-radius);
  color: var(--adspect-gray);
}
.sociodemo-placeholder.hidden { display: none; }
.sociodemo-icon { font-size: 22px; opacity: .7; }
.sociodemo-text { font-size: 12px; line-height: 1.4; }

/* ---------- Camadas Sociodemográficas: lista completa (sem scroll
   interno - a pedido do usuário, diferente da lista de camadas de pontos
   do Mapa de Kernel, que também usa .reference-layers-list mas continua
   limitada/com scroll dentro do painel da ferramenta), reordenável por
   arrastar-e-soltar e com transparência por camada - ver _bindWmsLayerList
   em js/app.js. ---------- */
#sociodemo-layers-list {
  max-height: none;
  overflow: visible;
}

.sociodemo-layer-item.dragging { opacity: .4; }
.sociodemo-layer-item.drag-over { border-top: 2px solid var(--adspect-black); }

.layer-drag-handle {
  cursor: grab;
  color: var(--adspect-gray);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  touch-action: none;
}
.layer-drag-handle:active { cursor: grabbing; }

.sociodemo-layer-label { flex: 1; min-width: 0; }

/* ---------- Mapa Coroplético ---------- */

#choropleth-config.hidden,
#choropleth-wms-empty-hint.hidden { display: none; }

#choropleth-wms-select { margin-top: 8px; }
#choropleth-wms-load-btn { margin-top: 8px; }

/* Seletor de rampa de cores (Coroplético) - cada botão mostra o
   gradiente de verdade (App.sampleColorRamp), pra escolha visual em vez
   de só o nome da rampa - mesmo espírito do chip-row de método acima,
   mas com um preview em vez de texto. */
.ramp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.ramp-swatch {
  width: 44px;
  height: 22px;
  border-radius: var(--adspect-radius-sm);
  border: 1.5px solid var(--adspect-border);
  cursor: pointer;
  padding: 0;
  transition: border-color .12s ease, transform .12s ease;
}
.ramp-swatch:hover { border-color: var(--adspect-gray); }
.ramp-swatch.active {
  border-color: var(--adspect-black);
  transform: scale(1.06);
}

.choropleth-legend-title {
  font-size: 12px;
  font-weight: 600;
  margin-top: 14px;
  margin-bottom: 6px;
  color: var(--adspect-black);
}
.choropleth-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--adspect-gray);
  margin-bottom: 4px;
}
.choropleth-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--adspect-border);
  flex-shrink: 0;
}

/* ---------- Popup de Placemark do KML ---------- */

.kml-popup { font-size: 12px; color: var(--adspect-black); max-width: 240px; }
.kml-popup-desc { margin-top: 4px; color: var(--adspect-gray); }
.kml-popup-table { margin-top: 6px; border-collapse: collapse; width: 100%; }
.kml-popup-table td {
  padding: 2px 6px 2px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--adspect-border);
  font-size: 11px;
}
.kml-popup-table td:first-child { color: var(--adspect-gray); font-weight: 600; white-space: nowrap; }
.kml-popup-table tr:last-child td { border-bottom: none; }

/* ---------- Isócrona ---------- */

.iso-legend-title {
  font-size: 12px;
  font-weight: 600;
  margin-top: 14px;
  margin-bottom: 6px;
  color: var(--adspect-black);
}
.iso-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--adspect-gray);
  margin-bottom: 4px;
}
.iso-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--adspect-border);
  flex-shrink: 0;
}

/* ---------- Painel de Legenda flutuante (bottom-left do mapa) ----------
   Mostra o que cada cor/símbolo das camadas ativas significa - inspirado
   no exemplo oficial "WMS GetLegendGraphic" do OpenLayers, só que reunindo
   TODAS as camadas com legenda (não só WMS) num único painel fixo sobre o
   mapa, fora da lista de "Camadas ativas" (ver App._renderLegendPanel em
   app.js). Reaproveita a mesma linguagem visual das legendas que já
   existiam dentro dos painéis do Coroplético/Isócrona (classes
   .layer-legend-* abaixo). */
#legend-panel {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 14;
  width: 240px;
  max-height: 42vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--adspect-border);
  border-radius: var(--adspect-radius);
  box-shadow: var(--adspect-shadow);
  overflow: hidden;
  transition: left .25s ease;
}
#legend-panel.hidden { display: none; }
/* O painel de Camadas fica à esquerda: quando aberto, a Legenda recua
   para não ficar por baixo dele (mesmo recurso já usado pelo aviso de
   API key, ver #api-key-warning). */
#map-area.layers-open #legend-panel {
  left: calc(var(--layers-sidebar-width) + 16px);
}

.legend-panel-header {
  padding: 9px 14px;
  background: var(--adspect-black);
  color: var(--adspect-cream);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.legend-panel-body {
  padding: 12px 14px;
  overflow-y: auto;
}

.legend-panel-section { margin-bottom: 14px; }
.legend-panel-section:last-child { margin-bottom: 0; }
.legend-panel-section-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--adspect-black);
  margin-bottom: 4px;
}

.layer-legend-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--adspect-gray);
  margin-bottom: 6px;
}

.layer-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.layer-legend-row:last-child { margin-bottom: 0; }

.layer-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--adspect-border);
  flex-shrink: 0;
  display: inline-block;
}
.layer-legend-swatch-circle { border-radius: 50%; }
.layer-legend-swatch-line {
  width: 18px;
  height: 0;
  border: none;
  border-top: 3px solid var(--adspect-gray);
  border-radius: 0;
}

/* Barra de gradiente contínuo (ex.: densidade do Mapa de Kernel), com
   rótulos min/max embaixo - alternativa à lista de swatches discretos,
   usada quando a simbologia é um degradê e não classes fechadas. */
.layer-legend-gradient-bar {
  height: 12px;
  border-radius: 6px;
  border: 1px solid var(--adspect-border);
}
.layer-legend-gradient-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10.5px;
}

/* Legenda "pronta" vinda de fora (ex.: GetLegendGraphic de um WMS) */
.layer-legend-image {
  max-width: 100%;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--adspect-border);
  background: #fff;
}

.layer-legend-unavailable {
  font-size: 11px;
  font-style: italic;
  color: var(--adspect-gray);
}

/* ---------- Status / avisos ---------- */

#status-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--adspect-black);
  color: var(--adspect-cream);
  padding: 9px 18px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 500;
  z-index: 10;
  box-shadow: var(--adspect-shadow);
}
#status-bar.hidden { display: none; }

#api-key-warning {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff3cd;
  border: 1px solid #ffe69c;
  color: #664d03;
  padding: 9px 14px;
  border-radius: var(--adspect-radius-sm);
  font-size: 12px;
  max-width: 380px;
  z-index: 10;
  box-shadow: var(--adspect-shadow);
  transition: left .25s ease;
}
/* O painel de Camadas agora fica à esquerda: quando aberto, o aviso de
   API key recua para não ficar por baixo dele. */
#map-area.layers-open #api-key-warning {
  left: calc(var(--layers-sidebar-width) + 16px);
}
#api-key-warning.hidden { display: none; }
#api-key-warning code {
  background: rgba(0,0,0,.08);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ---------- Ferramenta: Estudo de Terreno (js/tools/terrainStudy.js) ---------- */
.toolbar-btn[data-tool="terrainStudy"] .toolbar-icon { background-image: url("../assets/icons/terrain.png"); }
.toolbar-btn.active[data-tool="terrainStudy"] .toolbar-icon { background-image: url("../assets/icons/terrain-on.png"); }
.te-sum { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.te-sum th { text-align: right; color: var(--adspect-gray); font-weight: 600; padding: 4px 6px; border-bottom: 2px solid var(--adspect-black); }
.te-sum th:first-child, .te-sum td:first-child { text-align: left; }
.te-sum td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--adspect-border); font-variant-numeric: tabular-nums; }
.te-sum td:first-child { font-weight: 600; }
.te-overlay { position: fixed; inset: 0; background: rgba(28, 32, 35, 0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.te-modal { background: #fff; border-radius: var(--adspect-radius); width: min(1380px, 96vw); height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.te-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--adspect-black); color: var(--adspect-cream); padding: 10px 16px; font-weight: 600; font-size: 14px; flex: none; }
.te-modal-actions { display: flex; gap: 8px; align-items: center; }
.te-btn { border: 1px solid rgba(220, 220, 216, 0.35); background: transparent; color: var(--adspect-cream); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.te-btn:hover { background: rgba(255, 255, 255, 0.12); }
.te-btn-main { background: var(--adspect-cream); color: var(--adspect-black); border-color: var(--adspect-cream); }
.te-btn-main:hover { background: #fff; }
.te-x { padding: 6px 9px; }
.te-frame { flex: 1; width: 100%; border: 0; background: #8a8d8f; }
.te-modal-foot { flex: none; padding: 8px 16px; font-size: 12px; color: var(--adspect-gray); border-top: 1px solid var(--adspect-border); background: var(--adspect-bg); }
.widget-panel-body [hidden] { display: none !important; }
/* ---------- Ferramenta: Análise de Ponto — dashboard (js/tools/pointAnalysisDashboard.js) ---------- */
.pd-modal { background: var(--adspect-bg); border-radius: var(--adspect-radius); width: min(1440px, 97vw); height: 93vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.pd-modal .te-modal-head small { font-weight: 400; color: var(--adspect-taupe); margin-left: 8px; }
.pd-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
.pd-wrap { max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.pd-ctx { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; color: var(--adspect-black); }
.pd-ctx span { display: inline-flex; flex-direction: column; }
.pd-ctx i { font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--adspect-gray); font-weight: 600; }
.pd-warn { background: #fff7e6; border: 1px solid #ecd9a6; color: #6b5314; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; }
.pd-kpis { display: grid; grid-template-columns: 1.7fr repeat(6, 1fr); gap: 12px; }
.pd-kpi { background: #fff; border: 1px solid var(--adspect-border); border-radius: 14px; padding: 14px 14px; display: flex; flex-direction: column; min-width: 0; }
.pd-kpi small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--adspect-gray); }
.pd-kpi b { white-space: nowrap; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.pd-kpi span { font-size: 11.5px; color: var(--adspect-gray); }
.pd-kpi.hero { background: var(--adspect-black); border-color: var(--adspect-black); color: var(--adspect-cream); }
.pd-kpi.hero small, .pd-kpi.hero span { color: var(--adspect-taupe); }
.pd-kpi.hero b { font-size: 40px; color: #fff; }
.pd-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: stretch; }
.pd-grid > .span5 { grid-column: span 5; } .pd-grid > .span6 { grid-column: span 6; } .pd-grid > .span7 { grid-column: span 7; }
.pd-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pd-stack > .pd-card:last-child { flex: 1; }
.pd-card { background: #fff; border: 1px solid var(--adspect-border); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.pd-card h3 { margin: 0 0 2px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--adspect-black); font-weight: 700; }
.pd-sub { margin: 0 0 10px; font-size: 12px; color: var(--adspect-gray); }
.pd-card h3 + .pd-tb, .pd-card h3 + .pd-big { margin-top: 10px; }
.pd-tb { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.pd-tb th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--adspect-gray); padding: 7px 8px; border-bottom: 2px solid var(--adspect-black); white-space: nowrap; }
.pd-tb td { padding: 7px 8px; border-bottom: 1px solid var(--adspect-border); }
.pd-tb tbody tr:last-child td { border-bottom: 0; }
.pd-tb .l { text-align: left; } .pd-tb .r { text-align: right; font-weight: 600; } .pd-tb th.r { text-align: right; } .pd-tb th.pc { text-align: left; }
.pd-tb td.l { color: var(--adspect-black-soft); }
.pd-tb tr.strong td { background: var(--adspect-bg); font-weight: 700; }
.pd-pcw { display: flex; align-items: center; gap: 10px; }
.pd-pv { flex: none; width: 52px; text-align: right; font-weight: 600; }
.pd-bar { flex: 1; height: 13px; min-width: 70px; background: var(--adspect-bg); border-radius: 3px; overflow: hidden; }
.pd-fill { display: block; height: 100%; border-radius: 0 3px 3px 0; }
.pd-ins { margin: 12px 0 0; padding: 10px 14px; list-style: none; background: var(--adspect-bg); border-radius: 10px; }
.pd-ins li { position: relative; padding: 0 0 5px 14px; font-size: 12.5px; line-height: 1.45; color: var(--adspect-black-soft); }
.pd-ins li:last-child { padding-bottom: 0; }
.pd-ins li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 2px; background: var(--adspect-black); }
.pd-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--adspect-gray); }
.pd-big { display: flex; flex-direction: column; margin-bottom: 8px; }
.pd-big b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.pd-big span { font-size: 12px; color: var(--adspect-gray); }
.pd-det > summary { cursor: pointer; font-weight: 700; font-size: 13px; letter-spacing: .04em; list-style: none; }
.pd-det > summary::-webkit-details-marker { display: none; }
.pd-det > summary::before { content: "▸"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.pd-det[open] > summary::before { transform: rotate(90deg); }
.pd-det > summary em { font-style: normal; font-weight: 400; color: var(--adspect-gray); letter-spacing: 0; }
.pd-det .pd-scroll { margin-top: 10px; }
.pd-scroll { overflow-x: auto; }
@media (max-width: 1200px) { .pd-kpis { grid-template-columns: repeat(4, 1fr); } .pd-kpi.hero { grid-column: span 4; } }
@media (max-width: 980px) { .pd-grid > .span5, .pd-grid > .span6, .pd-grid > .span7 { grid-column: span 12; } .pd-kpis { grid-template-columns: repeat(2, 1fr); } .pd-kpi.hero { grid-column: span 2; } .pd-modal { width: 100vw; height: 100vh; border-radius: 0; } }