:root{--accent:#006b3c;--muted:#6b6b6b}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial;background:#f5f7fb;color:#111}
.topbar{display:flex;align-items:center;gap:12px;padding:12px;background:linear-gradient(90deg,#08321a,#064e31);color:white}
.topbar h1{margin:0;font-size:18px}
.controls{display:flex;gap:8px;align-items:center;margin-left:12px}
.controls input, .controls select{padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.08)}
.controls input[type=number]{width:80px}
.btn{background:var(--accent);color:white;padding:8px 10px;border-radius:8px;border:0;cursor:pointer; transition: background 0.2s;}
.btn.secondary{background:#fff;color:#064e31;border:1px solid #e6e6e6; transition: all 0.2s;}

/* Estilo para botão de filtro ativo */
.btn.secondary.active {
    background: var(--accent); /* Cor principal quando ativo */
    color: white;
    border-color: var(--accent);
}

.layout{display:grid;grid-template-columns:300px 1fr;gap:12px;height:calc(100vh - 64px);padding:12px}
.sidebar{background:white;border-radius:10px;padding:12px;overflow:auto}

/* Ajustes no sidebar */
.sidebar h3 { margin-top: 15px; margin-bottom: 8px;}
#filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;}

.mapwrap{position:relative}
#map{height:100%;border-radius:10px}
.panel{position:absolute;right:12px;top:12px;background:rgba(255,255,255,0.95);padding:10px;border-radius:8px;max-height:60vh;overflow:auto;box-shadow:0 6px 18px rgba(2,6,23,0.12)}
#resultsList{list-style:none;padding:0;margin:0}
#resultsList li{padding:8px;border-bottom:1px solid #eee; cursor: pointer;}
#resultsList li:hover{background: #f7f7f7;}
#resultsList li .meta{font-size:13px;color:var(--muted)}
#favorites{list-style:none;padding:0;margin:0}
#favorites li{padding:6px;border-bottom:1px dashed #eee; cursor: pointer;}
#favorites li:hover{background: #f7f7f7;}


/* Estilos para o marcador customizado do Leaflet */
.custom-marker {
    display: flex;
    justify-content: center;
    align-items: center;
}
.marker-icon {
    width: 14px;
    height: 14px;
    background-color: var(--accent); /* Cor do ponto de interesse */
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Estilo para marcadores favoritos */
.marker-icon.fav {
    background-color: #ff6b00; /* Cor diferente para Favoritos */
    border: 3px solid #ff0000;
}


@media(max-width:900px){.layout{grid-template-columns:1fr} .sidebar{order:2;height:300px}}