#mapContainer {
    height: calc(100%-60px);
    width: 100%;
    position: relative;
    transition: margin-left 0.3s ease-in-out;
}

/* Painel de Filtros */
.filterPanel {
    width: 260px; /* Largura fixa */
    max-height: 85vh; /* Ocupa parte da altura */
    min-height: 85vh;
    background: white;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    /* overflow-y: auto; */
    transition: transform 0.3s ease-in-out;
    position: fixed;
    left: 10px;
    top: 10px;
    border-radius: 8px;
    padding: 10px;
    padding-right: 12px !important;
    z-index: 1000;
}


/* 🔹 Personalizando a barra de rolagem */
#filterPanel::-webkit-scrollbar {
    width: 8px; /* Largura da barra */
    position: absolute;
    right: -50px; /* Move a barra para fora do painel */
    margin-right: -50px;
}

#filterPanel::-webkit-scrollbar-track {
    background: #bbb; /* Cor do fundo da barra */
    border-radius: 10px;
}

#filterPanel::-webkit-scrollbar-thumb {
    background: #535353; /* Cor da barra de rolagem */
    border-radius: 10px;
}

#filterPanel::-webkit-scrollbar-thumb:hover {
    background: #000; /* Cor ao passar o mouse */
}



.leaflet-attribution-flag { display: none !important; }
.leaflet-top.leaflet-left {
    bottom: 10px !important;
    right: 10px !important;
    top: auto !important;
}

/* Removendo qualquer borda preta do pop-up dentro do mapa */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    box-shadow: none !important;
    border: none !important;
}

/* Removendo o foco que cria o retângulo preto ao clicar */
.leaflet-container:focus, .leaflet-interactive:focus {
    outline: none !important;
}

.legend {
    position: absolute;
    width: auto;
    bottom: 10px;
    right: 10px;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 11px;
    display: none; /* Inicialmente oculta */
    z-index: 1001; /* Garante que a legenda fique sobre o mapa */
}
.legend img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.legendAir {
    position: absolute;
    width: auto;
    bottom: 10px;
    right: 10px;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 11px;
    display: none; /* Inicialmente oculta */
    z-index: 1001; /* Garante que a legenda fique sobre o mapa */
}
.legendAir img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.legendHidro {
    position: absolute;
    width: auto;
    bottom: 10px;
    right: 10px;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 11px;
    display: none; /* Inicialmente oculta */
    z-index: 1001; /* Garante que a legenda fique sobre o mapa */
}
.legendHidro img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.filterPanel {
    width: 300px; /* Largura fixa */
    height: auto; /* Altura flexível */
    background: white;
     border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    opacity: 1; /* Mantém visível */
    z-index: 900;
    transition: transform 0.5s ease-in-out;
}

/* 🔹 Estilização do botão de esconder/mostrar */
.toggle-button {
    position: fixed;
    top: 24px;
    left: 72px; /* Ajustado para seguir o menu */
    width: 30px;
    height: 30px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* 🔹 Efeito hover no botão */
.toggle-button:hover {
    background-color: #048042;
}

/* 🔹 Escondendo o painel quando estiver fechado */
.hidden {
    transform: translateX(-280px);
    opacity: 0;
    display: none;
}


.menu-collapsed .toggle-button {
    left: 0px;  /* Move o botão para a borda da tela */
}

 /* Ajuste para o mapa ocupar corretamente o espaço */
 .menu-collapsed #mapContainer {
    margin-left: 0;
} 
 


.iconDivisa {
    width: 16px;  /* Defina um tamanho adequado */
    height: auto; /* Mantém a proporção da imagem */
    transition: transform 0.3s ease-in-out; /* Suaviza a rotação */
}

/* Se precisar rotacionar a seta quando expandir */
.arrow.open .iconDivisa {
    transform: rotate(90deg); /* Ajuste conforme necessário */
}


.h2{
    font-size: 11px !important;
}


/* Define opacidade para o mapa padrão do leaflet */
.leaflet-tile { 
    opacity: 0.5 !important;
}





/* Estiliza o fundo escuro semi-transparente do botão de informações */
.popup-container {
    display: none; /* Começa escondido */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    /* Adicione uma transição para o efeito de fade, se desejar */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Quando o popup NÃO tem a classe .hidden, ele deve ser visível */
.popup-container:not(.hidden) {
    display: flex; /* Ou block, dependendo da sua necessidade de layout interno */
    opacity: 1;
    visibility: visible;
}

/* Estiliza a caixa do popup */
.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
}



.text-lg  {

    font-size: 0.9rem !important;
    line-height: 1rem;
}

.text.sm {
    font-size: 0.9rem !important;
}

.mr-2{
    color: green;
}

.flex .items-center {
    font-size: 0.8rem;
}




h4.text-xs {
    font-size: 0.8rem;
}





/* 🔹 Estilização para CHECKBOX */
.custom-checkbox {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    cursor: pointer;
    position: relative;
    padding-left: 20px;
    user-select: none;
}

/* Oculta o checkbox padrão */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    
}

/* Criando o quadrado do checkbox */
.custom-checkbox .checkmark {
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: 1.5px solid #000;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

/* Efeito hover */
.custom-checkbox:hover input ~ .checkmark {
    background-color: #e9f3ff;
}

/* Quando o checkbox está marcado */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #000;
    border-color: #000;
}

/* Adicionando o ícone de check */
.custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Exibir o ícone quando estiver marcado */
.custom-checkbox input:checked ~ .checkmark::after {
    display: block;
}

/* 🔹 Estilização para RADIO BUTTON */
.custom-radio {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    cursor: pointer;
    position: relative;
    padding-left: 20px;
    user-select: none;
}

/* Oculta o radio padrão */
.custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    gap: 3px;
}

/* Criando o círculo do radio */
.custom-radio .radiomark {
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: 1.5px solid #000;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
   
}

/* Efeito hover */
.custom-radio:hover input ~ .radiomark {
    background-color: #e9f3ff;
}

/* Quando o radio está marcado */
.custom-radio input:checked ~ .radiomark {
    background-color: #000;
    border-color: #000;
}

/* Adicionando o círculo interno */
.custom-radio .radiomark::after {
    content: "";
    position: absolute;
    display: none;
    left: 3px;
    top: 3px;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
}

/* Exibir o círculo quando estiver marcado */
.custom-radio input:checked ~ .radiomark::after {
    display: block;
}





.info-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: 0.1;
    transition: opacity 0.7s;
}
.info-icon:hover {
    opacity: 0.8;
}

/* 
.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: 000;
    padding: 20px;
    border-radius: 10px;
    z-index: 1000;
    width: 320px;
    height: 400px;
    text-align: center;
    display: none;  Garante que o popup apareça 
    flex-direction: column;
    align-items: center;
}


.popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}
 */
.popup-close {
    font-size: 20px;
    cursor: pointer;
    color: black;
    position: absolute;
    top: 10px;
    right: 15px;
}

.popup-close:hover {
    color: #C2374B;
}

.pb-2{
    padding-bottom: 0.1rem !important;
    padding-left: 0.1rem !important;
}
.pl-2 {
    padding-left: 0.1rem;
    padding-top: 0.8rem;
}
.gap-4{
    gap:0.5rem !important;
}

/* Estilos para o conteúdo do acordeão */


.accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    padding-top: 0.2em;    /* Zera padding vertical para transição */
    padding-bottom: 0.4rem; /* Zera padding vertical para transição */
    margin-top: 0;     /* Zera margem vertical para transição (se houver) */
    margin-bottom: 0;  /* Zera margem vertical para transição (se houver) */
    margin-left: 16px;

    /* Transição Aprimorada: */
    transition: max-height 0.4s ease-in-out, /* Suaviza início/fim do slide */
                opacity 0.6s ease-in-out,    /* Sincroniza e suaviza fade */
                visibility 0s linear 0.4s,   /* Mantém lógica da visibilidade (esconde após fechar) */
                padding 0.4s ease-in-out,   /* Inclui padding na transição */
                margin 0.4s ease-in-out;    /* Inclui margin na transição (se houver) */
}

/* Estilo quando o acordeão está aberto (classe .open adicionada via JS) */
.accordion-content.open {
    max-height: 1500px; /* Um valor grande o suficiente para caber qualquer conteúdo */
                        /* Ajuste se tiver seções MUITO grandes */
    opacity: 1; /* Torna visível */
    visibility: visible; /* Torna visível */
    transition-delay: 0s, 0s, 0s, 0s; /* Remove delay da visibilidade ao abrir */
    /* Restaura padding vertical se havia algum (ex: pl-4 já cuida do padding esquerdo) */
     /* Exemplo: padding-top: 0.5rem; */
     /* Exemplo: padding-bottom: 0.5rem; */
     /* Restaura margens se necessário */
}

/* Opcional: Estilo para a seta de toggle (já deve ter transition no seu CSS) */
.toggle-header .arrow {
     transition: transform 0.3s ease-in-out; /* Garante transição suave da seta */
     display: inline-block; /* Necessário para transform funcionar corretamente */
}

.toggle-header .arrow.open {
    transform: rotate(90deg); /* Gira a seta quando aberto */
}



/* Estilo para os ícones (IMG) das categorias principais do menu */
.menu-category-icon {
    width: 16px;       /* Defina a largura desejada */
    height: 16px;      /* Defina a altura desejada (ou use 'auto' se quiser manter a proporção da largura) */
    margin-right: 0px; /* Espaço entre o ícone e o texto H3 */
    object-fit: contain; /* Garante que a imagem inteira caiba dentro das dimensões sem distorcer */
    vertical-align: middle; /* Tenta alinhar verticalmente com o texto (pode não ser necessário com flexbox 'items-center') */
    flex-shrink: 0;    /* Impede que o ícone encolha */
}


/* Em styles.css */
.toggle-header {
    display: flex;
    align-items: center;
    /* REMOVER justify-content: space-between; (se estiver vindo do CSS)
       Se vier do Tailwind, remova a classe 'justify-between' do HTML */
    cursor: pointer;
    border-bottom-width: 1px; /* Exemplo */
    padding-bottom: 0.5rem; /* Exemplo */
}

.menu-category-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px; /* << Defina o espaçamento POSITIVO desejado */
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

.toggle-header h3 {
     flex-grow: 1; /* Continua importante */
     margin-left: 0;
     /* Certifique-se que não há padding-left aqui */
}

.toggle-header .arrow {
    margin-left: auto; /* ESSENCIAL para empurrar para a direita */
    flex-shrink: 0;
}


/* styles.css ou <style> em maps.html */
.leaflet-control-custom a {
    background-color: white;
    opacity: 0.7;
    
    border-radius: 180px !important;
    width: 24px !important;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2em; /* Ajuste o tamanho do ícone/texto */
    text-decoration: none;
    
    background-clip: padding-box;
}

.leaflet-control-custom a:hover {
    background-color: #f4f4f4;
    opacity: 1;
}

/* Estilo específico para ícones (exemplo usando Font Awesome, ajuste se usar imagens ou texto) */
.leaflet-control-custom .fa {
    line-height: 30px; /* Para centralizar verticalmente ícones de fonte */
}

/* Ou, se usar texto/emoji */
.leaflet-control-custom span {
    line-height: 3px;
}

/* Posicionamento dos controles (Exemplo) */
.leaflet-top.leaflet-left .leaflet-control-custom:first-child {
    margin-top: 10px; /* Adiciona espaço se for o primeiro controle customizado */
}
.leaflet-top.leaflet-left .leaflet-control-custom {
    margin-left: 10px;
    margin-bottom: 0px; /* Espaço entre botões customizados */
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: 0px !important;
    background-clip: padding-box;}



/* Classe para acessibilidade para esconder labels visualmente mas manter para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Adicione ao seu arquivo CSS principal (ex: styles.css) */

#citySearchContainer {
    position: relative; /* Necessário para posicionar o 'x' absoluto */
    margin-left: 16px; 
    padding-right: 16px; 
}

#citySearchInput {
    /* Adicione padding à direita para não sobrepor o texto ao 'x' */
    padding-right: 24px; /* Ajuste o valor conforme necessário */
    box-sizing: border-box; /* Garante que o padding não aumente a largura total */
}

#clearCitySearch {
    position: absolute;
    right: 0px;  /* Distância da borda direita */
    top: 45%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    cursor: pointer;
    color: #6b7280; /* Cinza (text-gray-500) */
    font-size: 1.0rem; /* Tamanho do 'x' */
    line-height: 1; /* Garante que não afete altura */
    display: none; /* Começa escondido */
}

#clearCitySearch:hover {
    color: #1f2937; /* Cinza mais escuro (hover:text-gray-800) */
}

.suggestion-highlight {
    background-color: #bebebe; 
    font-weight: 600; 
}

/* Em styles.css (opcional) */
.custom-cluster-projetos {
    /* Exemplo: adicionar uma transição suave */
    transition: background-color 0.3s ease;
}

.custom-cluster-projetos:hover {
    /* Exemplo: mudar a cor de fundo no hover */
    /* background-color: #357ABD !important; */ /* Pode precisar de !important dependendo da especificidade */
}

/* styles.css - Adicione ou confirme estas classes */

/* Container da Legenda (pode ser ajustado para o contexto do popup) */
.legend-container {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-top: 10px; /* Pequena margem superior dentro do popup */
    width: fit-content;
}


.legend-container h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.8em;
    font-weight: bold;
}

.legend-container p {
    font-size: 0.8em;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.8em;
}
.legend-item:last-child { margin-bottom: 0; }

.legend-color-box {
    --slant-amount: 10px;
    width: 24px;
    height: 20px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
    clip-path: polygon(
        0% 0%,                                  /* P1: Canto superior esquerdo (0,0) */
        calc(100% - var(--slant-amount)) 0%,  /* P2: Canto superior direito (largura total - recuo, 0) */
        100% 100%,                              /* P3: Canto inferior direito (largura total, altura total) */
        0% 100%                                 /* P4: Canto inferior esquerdo (0, altura total) */
    );
}

.legend-color-box-alternative-slant {
    clip-path: polygon(0% 0%, calc(100% - var(--slant-amount)) 0%, 100% 100%, 0% 100%);
}

.legend-text {
    text-align: left;
}

#popupTitle {
    font-size: 0.8em;
    font-weight: bold;
}

#popup.text{
    font-size: 0.7em;
}

img.legendaIcon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}








.info.legend.legend-rodovias {
    padding: 8px;
    background: white;
    background: rgba(255,255,255,0.9); /* Fundo semi-transparente */
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    line-height: 1.8; /* Espaçamento entre itens da legenda */
    color: #333; /* Cor do texto */
}
.legend-rodovias h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #000; /* Cor do título da legenda */
    text-align: center;
}
.legend-rodovias hr {
    margin-top: 2px;
    margin-bottom: 6px;
    border: 0;
    border-top: 1px solid #ccc;
}
.legend-rodovias i { /* Estilo para o quadradinho de cor na legenda */
    display: inline-block; /* Permite que float funcione e se alinhe corretamente */
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.9; /* Consistente com a opacidade da linha */
    border: 1px solid #555; /* Borda sutil para cores claras */
}


.agriculturars-legend { /* Use a classe específica da sua legenda */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative; /* Garante que não seja absolute e vá para um lugar estranho sem top/left */
    border: 2px solid black !important; /* Uma cor bem diferente e chamativa */
    background-color: white !important; /* Outra cor chamativa */
    z-index: 20000 !important; /* Extremamente alto */
    color: black !important; /* Garante que o texto seja visível */
    min-width: 150px; /* Para garantir que tenha alguma largura */
    min-height: 50px; /* Para garantir que tenha alguma altura */
    padding: 10px;
}




/* ==========================================================================
   CSS para a Legenda do Mapa Coroplético de Educação
   ========================================================================== */

/*
 * Esta é a regra principal para o contentor da legenda.
 * Usamos a classe específica `.educacaors-legend` que você definiu no JS
 * para garantir que não afetamos outras partes do mapa.
 * As regras `!important` são uma medida de força para garantir que
 * estes estilos não sejam sobrepostos por outros ficheiros CSS.
 */
 .educacaors-legend {
    /* Garantias de Visibilidade */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* Estilos Visuais (retirados dos seus estilos inline para centralizar) */
    background-color: rgba(255, 255, 255, 0.95);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    max-width: 300px;
    font-size: 12px;
    line-height: 1.5;
    
    /* Garante que a legenda fique acima das camadas do mapa */
    z-index: 10000; 
}

/* Estilo para o título da legenda */
.educacaors-legend h4 {
    margin: 0 0 8px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    font-size: 13px; /* Um pouco maior para destaque */
}

/* Estilo para os subtítulos e unidades dentro do título */
.educacaors-legend h4 span {
    font-size: 0.9em;
    color: #555;
    font-weight: normal;
}

/* * Estilo para cada linha/item da legenda.
 * Usamos `display: flex` para alinhar facilmente a caixa de cor e o texto.
 */
.educacaors-legend .legend-item {
    display: flex;
    align-items: center; /* Alinha verticalmente o ícone e o texto */
    margin-bottom: 4px;
    line-height: 17px;
    clear: left;
}

/*
 * Estilo para a pequena caixa de cor (o elemento <i>).
 */
.educacaors-legend i {
    width: 15px;
    height: 15px;
    float: left; /* Mantido para compatibilidade com o seu JS original */
    margin-right: 8px;
    border: 1px solid #666;
    opacity: 0.8;
    flex-shrink: 0; /* Impede que a caixa encolha */
}

/* Garante que o texto da legenda ocupe o espaço restante */
.educacaors-legend .legend-item span {
    flex-grow: 1;
}

/* Estilo para a linha final de "Sem dados" */
.educacaors-legend .legend-no-data-item {
    margin-top: 8px;
    padding-top: 5px;
    border-top: 1px solid #eee;
}

/* ==========================================================================
   CSS para a Legenda do Mapa Coroplético de Demografia
   ========================================================================== */

   .demografia-legend {
    /* Garantias de Visibilidade */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* Estilos Visuais */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 12px;
    border-radius: 5px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
    font-size: 13px;
    line-height: 1.6;
}

/* Estilo para o título da legenda */
.demografia-legend h4 {
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* Estilo para cada linha/item da legenda */
.demografia-legend .legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* Estilo para a pequena caixa de cor (o elemento <i>) */
.demografia-legend .legend-item i {
    width: 18px;
    height: 18px;
    border: 1px solid #999;
    margin-right: 8px;
    flex-shrink: 0; /* Impede que a caixa encolha */
}

/* Estilo para o texto da legenda */
.demografia-legend .legend-item span {
    color: #444;
}

/**
 * =========================================================================
 * Solução Responsiva para Controles do Leaflet em Telas Menores
 * =========================================================================
 *
 * Em telas com largura de 768 pixels ou menos, os controles do mapa
 * que estão no canto superior direito (`.leaflet-top.leaflet-right`)
 * são movidos para o canto inferior direito para evitar sobreposição
 * com o menu lateral esquerdo.
 */
 @media (max-width: 768px) {
    .leaflet-top.leaflet-right {
      top: auto;      /* Remove o posicionamento fixo no topo */
      bottom: 10px;   /* Posiciona o cluster de controles na parte inferior */
    }
  }


  /* ============================================== */
/* Regra para Forçar a Visibilidade da Legenda    */
/* ============================================== */



.info.legend {
    padding: 6px 8px;
    display: block;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info.legend h4 {
    margin: 0 0 5px;
    color: #777;
}
.info.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.8;
}

/* Estilo para o seletor de idioma ativo */
#language-selector img.active-lang {
    background-color: #2E8B57; /* Um tom de verde (SeaGreen) */
    border-radius: 8px;
    padding: 2px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
  }
  /* Estilo para o item de menu ativo */
#sidebar #menu-items a.active-menu {
    background-color: #2E8B57; /* Mesmo verde da bandeira para consistência */
    color: #ffffff; /* Texto branco para melhor leitura */
    border-radius: 2px; /* Bordas arredondadas */
    font-weight: 600; /* Deixa a fonte um pouco mais forte */
    padding-right: 4px;
  }
  
  /* Opcional: Deixa o ícone do menu ativo branco também */
#sidebar #menu-items a.active-menu .menu-icon img {
    filter: brightness(0) invert(1);
}