/* ================================
   MENU LATERAL
   ================================ */

.side-menu {
    position: fixed;
    top: var(--altura-topbar);
    left: 0;
    width: 320px; /* um pouco mais largo */
    min-width: 300px;
    height: calc(100% - var(--altura-topbar));
    background: white;
    border-right: 2px solid #ccc;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    padding: 20px;
    transition: left 0.3s ease;
    overflow-y: auto;
    z-index: 10000;
}

/* Estados aberto/fechado */
.side-menu.open { left: 0; }
.side-menu.closed { left: -320px; transform: translateX(-100%); }

/* Ajuste no corpo para deslocar o mapa quando o menu está aberto */
@media (min-width: 769px) {
    body.menu-open #map {
        margin-left: 270px;
    }
}

/* Botão hambúrguer */
.hamburger-btn {
    background: var(--cor-primaria);
    color: white;
    font-size: 1.5em;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}

details {
    margin-bottom: 8px; /* Espaço inferior entre camadas */
    display: block;     /* Garante que cada label fique em bloco separado */
    padding: 4px 8px;   /* Um pouco de espaçamento interno para conforto visual */
    border-radius: 5px; /* Bordas arredondadas para um visual melhor */
    cursor: pointer;    /* Cursor pointer para melhor usabilidade */
    /*transition: background-color 0.2s ease;*/
}

/*details:hover {*/
/*    background-color: #505050; !* Hover suave para melhor feedback visual *!*/
/*    color:#fff;*/
/*}*/

details summary {
    font-weight: bold;
    margin-top: 8px;
    cursor: pointer;
}

#camadasContainer label {
    display: block;
    margin: 4px 0;
    padding: 3px;
    background: #f8f8f8;
    border-radius: 4px;
}

.btn-small {
    font-size: 0.8em;
    padding: 4px 8px;
    margin: 4px 0 8px 0;
    cursor: pointer;
}