body{

margin:0;

background:#f5f7fb;

font-family:Inter,sans-serif;

display:flex;

}

.sidebar{

width:260px;

height:100vh;

background:#1E0C42;

position:fixed;

left:0;

top:0;

color:#fff;

}

.logo{

padding:25px;

text-align:center;

}

.logo img{

width:170px;

}

.sidebar ul{

margin:0;

padding:0;

list-style:none;

}

.sidebar li{

padding:15px 25px;

cursor:pointer;

display:flex;

gap:12px;

align-items:center;

transition:.2s;

}

.sidebar li:hover{

background:#2B1758;

}

.sidebar i{

font-size:18px;

}

.main-content{

margin-left:260px;

width:100%;

}

.topbar{

height:70px;

background:#fff;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 25px;

box-shadow:0 1px 4px rgba(0,0,0,.08);

}

.topbar i{

font-size:22px;

margin-left:20px;

cursor:pointer;

}


.offcanvas-body{

    overflow-x:hidden;

}

.offcanvas-body .card{

    border-radius:14px;

}

.offcanvas-body img{

    max-width:100%;

}

#mapaDetalle{

    width:100%;

    height:260px;

    border-radius:14px;

}






.sidebar ul{

    margin:0;

    padding:0;

    list-style:none;

}

.sidebar>ul>li{

    color:#fff;

}

.sidebar li{

    cursor:pointer;

}

.sidebar>ul>li:not(.has-submenu){

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 25px;

    transition:.25s;

}

.sidebar>ul>li:not(.has-submenu):hover{

    background:#2B1758;

}

.menu-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 25px;

    transition:.25s;

}

.menu-header:hover{

    background:#2B1758;

}

.menu-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.submenu{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    background:#291456;

}

.has-submenu.open .submenu{

    max-height:400px;

}

.has-submenu.open .flecha{

    transform:rotate(180deg);

}

.flecha{

    transition:.25s;

}

.submenu li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 25px 13px 55px;

    transition:.25s;

    color:#ddd;

}

.submenu li:hover{

    background:#38206D;

    color:#fff;

}


#leyendaMapa{

    position:absolute;

    right:18px;

    bottom:18px;

    width:230px;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(12px);

    border-radius:18px;

    padding:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.18);

    z-index:5;

}

.leyendaTitulo{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:700;

    color:#1E0C42;

    margin-bottom:15px;

    font-size:15px;

}

.leyendaItem{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:10px;

    font-size:14px;

}

.leyendaIcono{

    width:14px;

    height:14px;

    border-radius:50%;

    display:inline-block;

    margin-right:10px;

}

.circulo{

    width:12px;

    height:12px;

    border-radius:50%;

    display:inline-block;

    margin-right:8px;

}

.verde{

    background:#16a34a;

}

.amarillo{

    background:#f59e0b;

}

.rojo{

    background:#dc2626;

}


#panelFiltros .card{

    border-radius:18px;

}

#panelFiltros .form-control,
#panelFiltros .form-select{

    border-radius:12px;

}

#mapa{

    border-radius:18px!important;

}


.card{

    border-radius:18px;

}

.btn{

    border-radius:12px;

}