/* Estilo para el hover de los elementos de la lista */
.nav-pills .nav-link:hover {
    color: black!important; /* Color de texto al pasar el ratón */
    background-color: #cbdeec; /* Color de fondo al pasar el ratón */
    margin-top: 3px;
  }

.nav-pills .nav-link {
margin-top: 3px;
color: white!important;
--bs-nav-pills-link-active-bg: #cbdeec;
}

.nav-pills .nav-link.active {
background-color: #cbdeec;
color: black!important;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    display: flex;
    min-height: 100vh;
}

aside {
    width: 220px; /* Ancho original del aside */
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #253f56;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 20px;
    z-index: 2;
}

.main-color {
    background-color: #253f56;
}



/* Estilo para el contenido principal (ajusta según tu diseño) */
main {
    margin-left: 220px; /* Margen izquierdo original del main */
    transition: margin-left 0.5s;
    padding: 12px;
    width: 100%;
    flex-grow: 1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='5120' height='2880' preserveAspectRatio='none' viewBox='0 0 5120 2880'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1006%26quot%3b)' fill='none'%3e%3crect width='5120' height='2880' x='0' y='0' fill='rgba(154%2c 180%2c 211%2c 1)'%3e%3c/rect%3e%3cpath d='M181 2880L3061 0L3946 0L1066 2880z' fill='url(%26quot%3b%23SvgjsLinearGradient1007%26quot%3b)'%3e%3c/path%3e%3cpath d='M1829.6000000000001 2880L4709.6 0L6277.1 0L3397.1000000000004 2880z' fill='url(%26quot%3b%23SvgjsLinearGradient1007%26quot%3b)'%3e%3c/path%3e%3cpath d='M5015 2880L2135 0L426.5 0L3306.5 2880z' fill='url(%26quot%3b%23SvgjsLinearGradient1008%26quot%3b)'%3e%3c/path%3e%3cpath d='M3250.3999999999996 2880L370.39999999999964 0L-1806.1000000000004 0L1073.8999999999996 2880z' fill='url(%26quot%3b%23SvgjsLinearGradient1008%26quot%3b)'%3e%3c/path%3e%3cpath d='M2726.4656873053896 2880L5120 486.46568730538957L5120 2880z' fill='url(%26quot%3b%23SvgjsLinearGradient1007%26quot%3b)'%3e%3c/path%3e%3cpath d='M0 2880L2393.5343126946104 2880L 0 486.46568730538957z' fill='url(%26quot%3b%23SvgjsLinearGradient1008%26quot%3b)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1006'%3e%3crect width='5120' height='2880' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1007'%3e%3cstop stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1008'%3e%3cstop stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
}

/* Estilo para el botón de abrir sidebar en pantallas pequeñas */
.open-btn {
    font-size: 20px;
    cursor: pointer;
    background-color: #333;
    color: white;
    border: none;
    z-index: 2;
    overflow-x: hidden;
    transition: 0.5s!important;
}

.open-btn:hover {
    background-color: #444;
}

@media screen and (max-width: 852px) {
    aside {
        left: -270px; /* Ancho original del aside negativo para ocultarlo */
    }

    main {
        margin-left: 0; /* Margen izquierdo a cero en pantallas pequeñas */
    }

    .open-btn {
        display: flex!important;
    }
}