body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex; /* Para posicionar sidebar e mapa lado a lado */
}

#sidebar {
    width: 300px; /* Largura do painel lateral */
    padding: 20px;
    background-color: #f8f8f8;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto; /* Para permitir scroll se o conteúdo for grande */
    max-height: 100vh; /* Ocupa a altura total da viewport */
    box-sizing: border-box; /* Inclui padding e borda na largura total */
}

#mapid {
    flex-grow: 1; /* Ocupa o restante do espaço disponível */
    height: 100vh; /* Altura total da viewport */
    z-index: 1; /* Garante que o mapa esteja atrás do sidebar se houver sobreposição */
}

/* Estilos para o logo */
.logo-container {
    text-align: center; /* Centraliza o logo */
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee; /* Linha separadora */
}

.company-logo {
    max-width: 80%; /* Garante que o logo não seja muito grande */
    height: auto; /* Mantém a proporção */
    display: block; /* Remove espaço extra abaixo da imagem */
    margin: 0 auto; /* Centraliza a imagem dentro do container */
}


h1 {
    color: #333;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 20px;
}

.search-section {
    margin-bottom: 20px;
    display: flex; /* Para alinhar input e botão */
    gap: 10px; /* Espaço entre input e botão */
}

#searchInput {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#searchButton {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#searchButton:hover {
    background-color: #0056b3;
}

#clearSearchButton {
    padding: 8px 15px;
    background-color: #dc3545; /* Vermelho para "limpar" */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#clearSearchButton:hover {
    background-color: #c82333;
}

.filter-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.filter-section label {
    display: block; /* Cada label em uma nova linha */
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 0.95em;
}

.filter-section select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px; /* Espaço entre os selects */
    background-color: white;
    cursor: pointer;
    font-size: 0.95em;
}

/* Estilos para a busca por coordenada */
.coordinate-search-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem linha se a tela for pequena */
    gap: 10px; /* Espaçamento entre os itens */
    align-items: center;
}

.coordinate-search-section label {
    font-weight: bold;
    color: #333;
    font-size: 0.95em;
    flex-basis: 100%; /* Faz a label ocupar la linha toda para inputs */
    margin-bottom: -5px; /* Ajuste para espaçamento */
}

.coordinate-search-section input[type="text"] {
    flex-grow: 1; /* Inputs crescem para preencher espaço */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
    min-width: 100px; /* Garante um tamanho mínimo */
}

.coordinate-search-section button {
    width: 100%; /* Botão ocupa toda a largura */
    padding: 8px 15px;
    background-color: #28a745; /* Uma cor verde para destacar */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 5px; /* Espaço acima do botão */
}

.coordinate-search-section button:hover {
    background-color: #218838;
}

/* Estilos para o controle do mapa de calor */
.heatmap-control {
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.heatmap-control label {
    display: flex;
    align-items: center;
    font-size: 0.95em;
    color: #333;
    cursor: pointer;
}

.heatmap-control input {
    margin-right: 8px;
}

/* Estilos para a seção de exportação */
.export-section {
    margin-top: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.export-button {
    padding: 10px 15px;
    background-color: #17a2b8; /* Azul claro para exportar */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s;
    font-size: 1em;
}

.export-button:hover {
    background-color: #138496;
}


#results { /* Esta div é um contêiner pai para as seções de resultados - ajustado no JS agora */
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* Novas classes para as seções da barra lateral */
.sidebar-section {
    display: none; /* Por padrão, escondido */
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.sidebar-section.active {
    display: block; /* Visível quando ativo */
}

.results-content {
    /* Estilos para o conteúdo dos resultados, se necessário */
}

.sidebar-message {
    padding: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    font-style: italic;
    color: #666;
}

.antenna-item {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    cursor: pointer;
}

.antenna-item:last-child {
    border-bottom: none;
}

.antenna-item:hover {
    background-color: #e9e9e9;
}

.antenna-item h3 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    color: #007bff;
}

.antenna-item p {
    margin: 0;
    font-size: 0.9em;
    color: #555;
    line-height: 1.4;
}

/* Estilos para a seção de Análise de Distância */
.analysis-results {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background-color: #eaf6ff; /* Um fundo azul claro para destacar */
}

.analysis-results h2 {
    font-size: 1.3em;
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #b3d9ff;
    padding-bottom: 5px;
}

.analysis-results h3 {
    font-size: 1.1em;
    color: #333;
    margin-top: 15px;
    margin-bottom: 8px;
}

.analysis-results p {
    margin: 0;
    font-size: 0.9em;
    color: #555;
    line-height: 1.4;
}

.analysis-results strong {
    color: #007bff;
}

/* Estilos para a Legenda */
.legend {
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    margin-bottom: 10px; /* Espaço entre a legenda e a busca/mapa */
}

.legend h4 {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.1em;
    color: #333;
}

.legend div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.legend i {
    width: 24px; /* Tamanho do quadrado de cor/ícone */
    height: 24px;
    margin-right: 8px;
    opacity: 0.8;
    background-size: contain; /* Para ícones */
    background-repeat: no-repeat;
    background-position: center;
}

.legend span {
    font-size: 0.9em;
    color: #555;
}

/* Estilos para os Popups */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.leaflet-popup-content {
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    line-height: 1.5;
    color: #333;
}

.leaflet-popup-content b {
    color: #007bff;
}

.leaflet-popup-content h4 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.1em;
    color: #0056b3;
}

/* Estilo para botões de limpeza (opcional, pode ser reutilizado) */
.clear-button {
    padding: 8px 15px;
    background-color: #6c757d; /* Cinza para "limpar" */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 15px; /* Espaçamento acima */
    width: 100%; /* Ocupa a largura total */
    box-sizing: border-box;
}

.clear-button:hover {
    background-color: #5a6268;
}


/* --- Otimizações para Responsividade (Media Queries) --- */

/* Para telas menores que 768px (geralmente tablets em retrato e celulares) */
@media (max-width: 768px) {
    body {
        flex-direction: column; /* Coloca a barra lateral e o mapa em coluna */
    }

    #sidebar {
        width: 100%; /* A barra lateral ocupa 100% da largura */
        max-height: 50vh; /* Limita a altura da barra lateral para não esmagar o mapa */
        padding: 15px; /* Ajusta o padding para telas menores */
    }

    #mapid {
        height: 50vh; /* O mapa ocupa a outra metade da altura da viewport */
        flex-grow: 0; /* Remove o crescimento flexível para ter altura fixa */
    }

    /* Ajustes internos da barra lateral para telas menores */
    h1 {
        font-size: 1.3em;
        text-align: center;
    }

    .search-section,
    .filter-section,
    .coordinate-search-section,
    .heatmap-control,
    .export-section { /* Removido .kml-upload-section */
        flex-direction: column; /* Botões e inputs em coluna */
        gap: 8px; /* Espaçamento menor */
        margin-bottom: 15px; /* Reduz margens */
        padding-bottom: 10px;
        align-items: stretch; /* Estica os itens para preencher la largura */
    }

    .search-section input,
    .search-section button,
    .filter-section select,
    .coordinate-search-section input,
    .coordinate-search-section button,
    .clear-button,
    .export-button { /* Removido input file e botão de upload */
        width: 100%; /* Todos os controles ocupam a largura total */
        box-sizing: border-box; /* Inclui padding e borda na largura */
    }

    .coordinate-search-section label {
        margin-bottom: 0px; /* Ajuste fino do espaçamento */
    }

    .heatmap-control label {
        justify-content: center; /* Centraliza o checkbox */
    }
}

/* Para telas muito pequenas (celulares em retrato) */
@media (max-width: 480px) {
    #sidebar {
        padding: 10px;
    }

    h1 {
        font-size: 1.2em;
    }

    .search-section,
    .filter-section,
    .coordinate-search-section,
    .heatmap-control,
    .export-section { /* Removido .kml-upload-section */
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .filter-section select,
    .search-section input,
    .coordinate-search-section input { /* Removido input file */
        font-size: 0.9em;
        padding: 6px;
    }
}