body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

/* SELETOR DE INDICADOR */

.layer-switch{
margin-bottom:10px;
padding-bottom:8px;
border-bottom:1px solid #ddd;
font-family:Arial;
font-size:13px;
line-height:1.4;
}

.layer-switch-title{
font-weight:bold;
margin-bottom:6px;
}

.layer-switch label{
display:inline-block;
cursor:pointer;
margin-right:12px;
}



.layer-switch input:checked + span{
font-weight:bold;
}

/* ESTILO DA LEGENDA */

.legend {
position:absolute;
bottom:30px;
right:30px;
background:white;
padding:12px 14px;
font-family:Arial;
font-size:13px;
box-shadow:0 1px 4px rgba(0,0,0,0.3);
border-radius:4px;
min-height:220px;
width:260px;
}

.legend-title{
font-weight:bold;
margin-bottom:6px;
}

.legend-item{
display:flex;
align-items:center;
margin-bottom:4px;
}

.legend-color{
width:18px;
height:12px;
margin-right:8px;
border:1px solid #999;
}



/* ESTILO CRÉDITOS */
.legend-footer{
margin-top:8px;
padding-top:6px;
border-top:1px solid #ddd;
font-size:11px;
color:#555;
line-height:1.35;
max-width:280px;
}


.site-link{
color:#5b9460;
text-decoration:none;
font-weight:bold;
font-size:13px;
}

.site-link:hover{
text-decoration:underline;
}



/* CONTROLE DE ANO */

.year-control{
margin-bottom:10px;
padding-bottom:8px;
border-bottom:1px solid #ddd;
font-family:Arial;
font-size:13px;
}

.year-title{
font-weight:bold;
margin-bottom:4px;
}

#year-value{
font-size:14px;
}


/* botão de fechar popup */

.maplibregl-popup-close-button{

font-size:22px;
width:32px;
height:32px;

right:6px;
top:6px;

line-height:30px;

}


.scale-buttons{
display:flex;
gap:10px;
margin-bottom:12px;
}

.scale-btn{
border:1px solid #ccc;
background:#ffffff;
padding:5px 12px;
font-size:13px;
cursor:pointer;
border-radius:4px;
transition:all 0.15s ease;
}

.scale-btn:hover{
background:#f2f2f2;
}

.scale-btn.active{
background:#5b9460;
color:white;
border-color:#5b9460;
font-weight:600;
}


.timeline-controls{
display:flex;
gap:6px;
margin-top:6px;
}

.timeline-controls button{
padding:4px 8px;
cursor:pointer;
border-radius:4px;
font-size:13px;
}

.timeline-controls button:hover{
background:#f2f2f2;
}

.year-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:4px;
}

.timeline-controls{
display:flex;
gap:8px;
}

.timeline-controls button{
background:none;
border:none;
cursor:pointer;
font-size:14px;
padding:2px 4px;
}

.timeline-controls button:hover{
opacity:0.6;
}