/* ============ MAPA ============ */

/* Wrapper */
.map-page{
  display:flex;
  flex:1;
  overflow:hidden;
}

/* Sidebar (largura fixa, acima do mapa) */
.map-page > .sidebar{
  flex:0 0 280px;
  box-sizing:border-box;
  padding:1.5rem;
  background:#fff;
  border-right:1px solid var(--bs-border-color);
  box-shadow:2px 0 5px rgba(25,70,133,.12);
  position:relative;
  z-index:2;

  /* coluna para “colar” o botão de download no rodapé */
  display:flex;
  flex-direction:column;
}

/* Conteúdo do mapa ocupa 100% e sem folgas */
.map-page > .main-content{
  position:relative;
  flex:1;
  padding:0;
  margin:0;
}

/* Mapa sempre por trás da sidebar */
.map-page #map{
  position:absolute;
  inset:0;
  width:100%;
  z-index:0;
}

/* ---------- Filtros (layout geral) ---------- */
.map-page .sidebar .filter-group{ margin:0 0 1.25rem 0; }

.map-page .sidebar .form-label{
  display:block;
  margin:0 0 .5rem .125rem;
  color:#194685;
  font-weight:500;
}

/* Inputs padrão da sidebar */
.map-page .sidebar .form-select,
.map-page .sidebar select,
.map-page .sidebar .form-control{
  width:100%;
  box-sizing:border-box;
  height:calc(1.8125rem + 2px);
  padding:.25rem .5rem;
  font-size:.875rem;
  margin:0;
}

/* ---------- Lupa ao lado do <select> ---------- */
.map-page .sidebar .input-group{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
}

/* Dentro do input-group, o select não ocupa 100% */
.map-page .sidebar .input-group .form-select,
.map-page .sidebar .input-group select{
  flex:1 1 0;
  width:auto !important;
  min-width:0;
}

/* Botão da lupa colado ao select */
.map-page .sidebar .input-group > .btn{
  flex:0 0 auto;
  padding:.25rem .5rem;           /* casa com input-group-sm */
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  white-space:nowrap;
  line-height:1;
}

/* Mantém width:100% apenas para selects fora do input-group */
.map-page .sidebar .filter-group > .form-select,
.map-page .sidebar .filter-group > select,
.map-page .sidebar .filter-group > .form-control{
  width:100%;
}

/* Botão “Limpar” full-width */
.map-page #btn-limpar-filtros{ width:100%; }

/* ---------- Bloco de download ---------- */
.map-page .sidebar .sidebar-spacer{ margin-top:auto; }
.map-page .sidebar .btn-download{
  margin-top:.75rem;
  color:#fff;
  box-shadow:0 2px 6px rgba(25,70,133,.10);
}
.map-page .sidebar .btn-download svg{ display:inline-block; line-height:0; }

/* ---------- Responsivo ---------- */
@media (max-width: 767.98px){
  .map-page{ flex-direction:column; }
  .map-page > .sidebar{
    width:100%;
    max-height:50vh;
    border-right:none;
    border-bottom:1px solid var(--bs-border-color);
  }
}

/* ---------- Overlays (Resumo + Legenda) ---------- */
.map-overlay-container{
  position:absolute;
  bottom:30px;
  right:10px;
  display:flex;
  flex-direction:column;
  gap:15px;
  align-items:flex-end;
  z-index:1;
}

/* Card de Resumo */
#summary-card{
  background:rgba(255,255,255,.9);
  padding:15px;
  border-radius:8px;
  width:250px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
#summary-card h5{
  margin:0 0 10px;
  border-bottom:1px solid #ccc;
  padding-bottom:5px;
  font-size:1.1rem;
}
#summary-card p{ margin:5px 0; font-size:.9rem; }

/* ---------- LEGENDA ---------- */
#legend{
  background:rgba(255,255,255,.9);
  width:250px;
  padding:15px;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* Título principal com linha */
#legend h5{
  margin:0 0 .5rem;
  color:var(--fnp-blue,#194685);
  font-weight:700;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:.5rem;
}

/* Subtítulo “Faixa Populacional” com linha (igual ao h5) */
#legend .legend-subtitle{
  margin:.5rem 0 .5rem;
  color:var(--fnp-blue,#194685);
  font-weight:700;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:.5rem;
}

/* bloco de cores (quintil/decil/natural) */
#legend .legend-container{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.5rem;
  row-gap:.35rem;
  align-items:start;
  margin-bottom:.25rem;           /* sem “barriga” no fim */
}
#legend .legend-colors{ display:flex; flex-direction:column; gap:.35rem; }
#legend .legend-labels{ display:flex; flex-direction:column; gap:.35rem; }
#legend .legend-labels span{ font-size:.9rem; color:#374151; }
#legend .legend-key{
  width:16px;
  height:14px;
  border-radius:3px;
  border:1px solid rgba(0,0,0,.15); /* garante visibilidade em cores extremas */
}

/* Escala de tamanhos (Faixa Populacional) */
#legend .size-legend{ margin-top:.35rem; }  /* sem espaço extra no final */
#legend .size-legend svg{ width:230px; height:110px; display:block; margin:0 auto; }
#legend .size-legend text{ font-size:12px; fill:#374151; }
#legend .size-legend .guide{ stroke:#666; stroke-dasharray:3 5; stroke-width:1; }
#legend .size-legend .bubble{ fill:#fff; stroke:#111827; stroke-width:1; opacity:.95; }

/* ---------- Popup do Mapbox ---------- */
.mapboxgl-popup-content{
  font-size:1rem;
  min-width:350px;
  border-radius:12px !important;
  box-shadow:0 5px 15px rgba(0,0,0,.2);
  padding:15px;
}
.mapboxgl-popup-content i{
  color:#194685;
  margin-right:7px;
  font-size:14px;
}
.popup-details p{
  margin-bottom:6px;
  line-height:1.5;
}

/* ---------- Botão/ícone “i” (tooltips bootstrap) ---------- */
.btn-info-tooltip{
  background:none !important;
  border:none !important;
  padding:0 !important;
  line-height:1 !important;
  box-shadow:none !important;
  outline:none !important;
}
.btn-info-tooltip:focus,
.btn-info-tooltip:focus-visible,
.btn-info-tooltip:hover,
.btn-info-tooltip:active{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}