/* ============ 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% do que sobra do flex */
.map-page > .main-content{
  position:relative;
  flex:1;
  padding:0;
  margin:0;
  display: flex; /* NOVO: Transforma o container em flex */
  flex-direction: column; /* NOVO */
  height: 100%; /* NOVO */
}

/* O mapa deve preencher o flex pai, sem absolute no desktop */
.map-page #map{
  flex: 1; /* NOVO: Ocupa todo o espaço disponível */
  width:100%;
  position: relative; /* NOVO: Substitui o absolute */
  z-index:0;
}

/* Garante que o html e body não tenham scroll lateral */
html, body {
  overflow-x: hidden;
}

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

/* Padronização de Títulos da Sidebar (Azul FNP Escuro) */
body .map-page .sidebar h1, 
body .map-page .sidebar h2, 
body .map-page .sidebar h3, 
body .map-page .sidebar h4, 
body .map-page .sidebar h5, 
body .map-page .sidebar h6 {
    color: #103758;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

/* Padronização das Labels dos Filtros (Faixa Populacional, Região, etc) */
body .map-page .sidebar .form-label,
body .map-page .sidebar label {
    display: block;
    margin: 0 0 0.5rem 0;
    color: #103758;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
}

/* 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 ---------- */

/* 1. Removemos o spacer que empurrava o botão para baixo */
.map-page .sidebar .sidebar-spacer { 
    display: none !important; 
}

/* 2. Ajustamos a margem para ficar igual ao espaço entre os botões de cima */
.map-page .sidebar .btn-download {
    margin-top: 0.5rem !important; /* Equivale ao 'gap-2' do Bootstrap */
    color: #fff;
    box-shadow: 0 2px 6px rgba(25,70,133,.10);
}

.map-page .sidebar .btn-download svg { 
    display: inline-block; 
    line-height: 0; 
}
.map-page .sidebar .btn-download svg{ display:inline-block; line-height:0; }

/* ---------- Responsivo (Ajuste Raiz de Enquadramento) ---------- */
@media (max-width: 991.98px) {
  .map-page { flex-direction: column; }
  
  /* 2. COMPACTAÇÃO MÁXIMA DO POPUP */
  body .map-page .mapboxgl-popup {
    max-width: 92% !important; /* Exceção técnica: sobrepor estilo inline do Mapbox */
    min-width: 280px;
  }

  body .map-page .ifem-premium-popup .mapboxgl-popup-content {
    padding: 10px 14px; /* Respiro lateral reduzido */
    border-radius: 14px;
  }

  /* 3. CABEÇALHO MAIS BAIXO */
  body .map-page .popup-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
    gap: 10px;
  }

  body .map-page .popup-icon-box {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  body .map-page .popup-title {
    font-size: 15px;
    max-width: 140px; /* Impede que o nome da cidade empurre o quintil */
  }

  /* 4. DADOS MAIS JUNTOS (Ganhando área vertical) */
  body .map-page .popup-data-grid { gap: 2px; } /* Quase colados */
  body .map-page .popup-data-row { gap: 8px; }
  body .map-page .popup-label { font-size: 11px; }
  body .map-page .popup-value { font-size: 12px; }
  
  /* Receita per capita em destaque mas sem margens gigantes */
  body .map-page .popup-value[style*="font-size:18px"] {
    font-size: 16px !important;
  }

  /* 5. RESUMO E BOTÃO */
  body .map-page .popup-badge-summary {
    margin-top: 6px;
    padding: 8px;
    font-size: 11px;
    line-height: 1.2;
  }

  body .map-page .popup-btn-details {
    margin-top: 6px;
    padding: 10px;
    font-size: 13px;
    font-weight: 900;
  }
}

/* ============ LIMPEZA DE !IMPORTANT (RESOLVIDO NA ESPECIFICIDADE) ============ */

/* Bordas de Status */
body .map-page .border-status-superior { border-left: 4px solid #10b981; } 
body .map-page .border-status-inferior { border-left: 4px solid #e11d48; } 

/* Cores do Texto Strong */
body .map-page .popup-badge-summary.text-status-superior strong { color: #059669; }
body .map-page .popup-badge-summary.text-status-inferior strong { color: #dc2626; }

/* ---------- 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;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* ---------- 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;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* REGRA UNIFICADA: Esconde legendas sempre que houver um popup ativo */
body .map-page.popup-active .map-overlay-container {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 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;
}

/* ============ PADRONIZAÇÃO DE BOTÕES E BUSCA ============ */

/* 1. Botão "Limpar Pesquisa" (Ação principal - Mantém AZUL) */
#btn-limpar-filtros {
    background-color: var(--fnp-blue, #194685) !important;
    border-color: var(--fnp-blue, #194685) !important;
    color: #fff !important;
    width: 100%;
    margin-top: 1rem;
}

/* Botões de Ação: Print e Baixar Dados (ALTERADO PARA CINZA) */
.map-page .sidebar .btn-download,
.map-page .sidebar .btn-secondary {
    background-color: #6c757d !important; /* Cinza padrão */
    border-color: #6c757d !important;
    color: #fff !important;
}

/* Botões de Busca / Lupas (Fundo BRANCO com Ícone Azul) */
.map-page .sidebar .input-group > .btn {
    background-color: #ffffff !important;
    border: 1px solid #194685 !important;
    color: #194685 !important;
    
    /* Centralização e z-index */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* Garante que o ícone (SVG ou i) dentro da lupa seja azul */
.map-page .sidebar .input-group > .btn svg,
.map-page .sidebar .input-group > .btn i {
    fill: #194685 !important;
    color: #194685 !important;
}

/* --- ESTADOS DE HOVER (Interação) --- */

/* Hover do Botão LIMPAR (Fica azul escuro) */
#btn-limpar-filtros:hover {
    background-color: #123361 !important;
    border-color: #123361 !important;
}

/* Hover dos Botões CINZA (Fica cinza escuro) */
.map-page .sidebar .btn-download:hover,
.map-page .sidebar .btn-secondary:hover {
    background-color: #5c636a !important;
    border-color: #565e64 !important;
}

/* Hover das Lupas Brancas (Fica azul bem clarinho) */
.map-page .sidebar .input-group > .btn:hover {
    background-color: #f0f8ff !important;
    color: #143a6e !important;
    border-color: #143a6e !important;
}

.map-page .sidebar .input-group > .btn:hover svg,
.map-page .sidebar .input-group > .btn:hover i {
    fill: #143a6e !important;
    color: #143a6e !important;
}

/* Ajuste para o Card de Resumo com Badge */
#summary-card {
    transition: all 0.3s ease; /* Suaviza a expansão quando a imagem aparece */
    max-height: 500px;
}

/* Garante que o fundo da imagem no resumo lateral seja transparente */
#municipio-badge-img {
    background-color: transparent !important;
    mix-blend-mode: multiply; 
}

#municipio-badge-container {
    background: none !important;
}

/* Garante que o container de overlays não suba demais no mobile */
@media (max-width: 767.98px) {
    .map-overlay-container {
        bottom: 10px;
        right: 10px;
        scale: 0.9; 
    }
}

/* Pop-up */
.ifem-premium-popup .mapboxgl-popup-content {
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -6px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    font-family: 'Inter', sans-serif;
}

.popup-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f5f9;
}

.popup-icon-box {
    background: #103758;
    color: white;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.popup-title {
    margin: 0;
    font-size: 18px; 
    font-weight: 900;
    color: #103758;
    line-height: 1.1;
}

.popup-data-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.popup-data-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.popup-data-row svg {
    width: 18px;
    height: 18px;
    color: #64748b;
    flex-shrink: 0;
}

.popup-info-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: baseline;
}

.popup-label {
    color: #64748b;
    font-weight: 600;
    font-size: 14px; 
}

.popup-value {
    color: #1e293b;
    font-weight: 800;
    font-size: 15px;
}

/* Destaque para a frase de síntese */
.popup-badge-summary {
    margin-top: 20px;
    padding: 16px;
    border-left: 4px solid #103758;
    border-radius: 8px;
    font-size: 14px; 
    line-height: 1.5;
    font-weight: 500;
    transition: all 0.2s ease;
}

.popup-btn-details {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #103758;
    color: white !important;
    font-weight: 800;
    font-size: 14px;
    padding: 14px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.popup-btn-details:hover {
    background: #1e40af;
    transform: scale(1.02);
}

.border-status-superior { border-left: 4px solid #10b981 !important; } /* Verde Emerald */
.border-status-inferior { border-left: 4px solid #e11d48 !important; } /* Vermelho Rose */

.popup-badge-summary strong {
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* Garante que o STRONG dentro do box também herde a cor correta */
.popup-badge-summary.text-status-superior strong { color: #059669 !important; }
.popup-badge-summary.text-status-inferior strong { color: #dc2626 !important; }

.popup-badge-quintil {
    font-size: 11px;
    font-weight: 900;
    padding: 6px 12px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #ffffff; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    white-space: nowrap;
}