.left-sidebar {
    position: fixed;
    top: 125px;
    left: 0;
    bottom: 50px;
    width: 210px;
    background-color: #B6B3B3;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
}

    .left-sidebar nav ul > li > a#gafas {
        font-weight: bold;
        font-size: 1.6em;
        color: black;
    }

    .left-sidebar nav ul > li > ul > li:hover,
    .left-sidebar nav ul > li > ul > li:hover a {
        background-color: black;
        color: white;
    }

.right-sidebar {
    position: fixed;
    top: 125px;
    right: 0;
    bottom: 50px;
    width: 200px;
    background-color: #B6B3B3;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
}

/* RESPONSIVE: Oculta sidebars en pantallas pequeñas */
@media (max-width: 768px) {
    .left-sidebar,
    .right-sidebar {
        position: static;
        width: 100%;
        height: auto;
        top: auto;
        bottom: auto;
        padding: 10px;
        background-color: #e0e0e0; /* Más claro para móvil si quieres */
    }

        .left-sidebar nav ul,
        .right-sidebar nav ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

            .left-sidebar nav ul > li,
            .right-sidebar nav ul > li {
                list-style: none;
            }
}