/* ============================================================
   ATLAS RS — consulta.css
   Verificador de área (upload de SHP/KML/KMZ ou coordenada).
   ============================================================ */

.consulta-shell{ padding: 34px 0 70px; }

.upload-zone{
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  background: var(--paper-2);
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.upload-zone.dragover{ border-color: var(--brand-green); background: rgba(47,107,79,.05); }
.upload-zone svg{ width: 36px; height: 36px; color: var(--brand-green); margin: 0 auto 12px; }
.upload-zone h3{ font-family: var(--font-body); font-size: 1rem; margin-bottom: 6px; }
.upload-zone p{ font-size: .84rem; color: var(--ink-muted); }
.upload-zone input[type="file"]{ display: none; }
.upload-formats{ font-family: var(--font-mono); font-size: .7rem; color: var(--ink-muted); margin-top: 10px; }

.consulta-divisor{
  display: flex; align-items: center; gap: 14px; margin: 26px 0;
  color: var(--ink-muted); font-size: .8rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
}
.consulta-divisor::before, .consulta-divisor::after{ content: ""; flex: 1; height: 1px; background: var(--line); }

.coord-form{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.coord-field{ display: flex; flex-direction: column; gap: 4px; }
.coord-field label{ font-size: .74rem; color: var(--ink-muted); font-family: var(--font-mono); }
.coord-field input{ padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid var(--line); font-size: .9rem; width: 160px; }

#consultaStatus{ margin-top: 20px; font-size: .88rem; }
#consultaStatus.erro{ color: #8a1f1f; }
#consultaStatus.carregando{ color: var(--ink-muted); }

.resultado-wrap{ display: none; margin-top: 34px; }
.resultado-wrap.show{ display: block; }

.resultado-header{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.resultado-header h2{ font-size: 1.3rem; }
.resultado-header .municipios-tocados{ font-size: .84rem; color: var(--ink-muted); margin-top: 4px; }

.resultado-cols{ display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; }
.resultado-mapa{ position: sticky; top: 20px; }
.resultado-mapa svg{ width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.resultado-mapa .muni-path{ fill: #e4e0d2; stroke: #fff; stroke-width: .6; }
.resultado-mapa .muni-path.match{ fill: #cfe0d3; stroke: var(--brand-green); stroke-width: 2; }
.resultado-mapa .area-analisada circle{
  fill: #c1432f; fill-opacity: .85; stroke: #fff; stroke-width: 1.4;
}
.resultado-mapa .area-analisada path{
  fill: #c1432f; fill-opacity: .35; stroke: #c1432f; stroke-width: 2;
  stroke-dasharray: 4 3;
}
/* Camadas do CAR (Cadastro Ambiental Rural) sobre o mini-mapa — desenhadas
   por baixo do contorno da área analisada acima, pra ele continuar visível.
   Cores reaproveitadas do restante do Atlas (mesmo verde de UC estadual pra
   Reserva Legal, mesmo azul de UC federal pra APP) por consistência visual. */
.resultado-mapa .car-imovel path{
  fill: none; stroke: #8a6c3a; stroke-width: 1.2; stroke-dasharray: 2 2;
}
.resultado-mapa .car-rl path{
  fill: #2f6b4f; fill-opacity: .3; stroke: #2f6b4f; stroke-width: 1;
}
.resultado-mapa .car-app path{
  fill: #1f6f8b; fill-opacity: .3; stroke: #1f6f8b; stroke-width: 1;
}

.car-legenda-item{ white-space: nowrap; font-weight: 600; }
.car-legenda-cor{
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 4px; vertical-align: middle;
}
.car-legenda-imovel{ background: none; border: 1.5px dashed #8a6c3a; }
.car-legenda-rl{ background: #2f6b4f; }
.car-legenda-app{ background: #1f6f8b; }

/* Uso e cobertura do solo (MapBiomas 10m, beta) — imagem raster desenhada
   por baixo das camadas de CAR/área analisada, então pixelated (sem
   suavizar) pra ficar fiel ao pixel de 10m original, igual ao PDF do
   Gerador de Relatório. */
.resultado-mapa .uso-solo-raster image{
  image-rendering: pixelated;
  opacity: .82;
}

.usosolo-controle{ margin-top: 10px; }
.usosolo-controle .btn{ width: 100%; text-align: center; font-size: .82rem; padding: 9px 12px; white-space: normal; line-height: 1.3; }
.usosolo-controle .btn:disabled{ opacity: .6; cursor: default; }
#usoSoloStatus{ font-size: .78rem; color: var(--ink-muted); margin-top: 6px; min-height: 1em; }
#usoSoloStatus.erro{ color: #8a1f1f; }
#usoSoloLegenda{ display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.uso-solo-legenda-item{ display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--ink-muted); }
.uso-solo-legenda-cor{ display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }

.privacidade-nota{
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(47,107,79,.06); border: 1px solid rgba(47,107,79,.2);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 24px;
  font-size: .82rem; color: #2f5233; line-height: 1.55;
}
.privacidade-nota svg{ width: 18px; height: 18px; flex: none; margin-top: 1px; }

.aviso-camadas-futuras{
  background: rgba(185,118,47,.08); border: 1px solid rgba(185,118,47,.3);
  border-radius: var(--radius-md); padding: 14px 18px; font-size: .82rem;
  color: #6b4a1f; line-height: 1.6; margin-top: 24px;
}

@media (max-width: 800px){
  .resultado-cols{ grid-template-columns: 1fr; }
  .resultado-mapa{ position: static; max-width: 320px; margin: 0 auto; }
}

.interf-chip{
  display: inline-flex; align-items: baseline; gap: 5px;
  background: #f7e8e4; color: #8a3a2a; border: 1px solid #e3c3b8;
  border-radius: 999px; padding: 5px 11px; font-size: .8rem; margin: 3px 5px 3px 0;
}
.interf-chip b{ font-weight: 700; }
.interf-empty{ font-size: .82rem; color: var(--ink-muted); }
.interf-caveat{ font-size: .78rem; color: var(--ink-muted); line-height: 1.5; }
.interf-caveat a{ color: var(--brand-green); font-weight: 600; }

/* Botao secundario sobre fundo claro (resultado da consulta): o .btn-ghost padrao
   foi feito para fundo escuro (texto claro) e ficava ilegivel aqui. 19/10/2026 */
.resultado-header .btn-ghost{ color: var(--brand-green); border-color: var(--brand-green); background: transparent; }
.resultado-header .btn-ghost:hover{ background: var(--brand-green); color: #fff; }