@keyframes slideInFromLeft {
        0% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(0);
        }
    }

    .slide-in {
        animation-name: slideInFromLeft;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }


    .menu-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color:#3B82F6;
        /* Ajusta el color y la opacidad según tus preferencias */
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .menu-background.menu-background-active {
        opacity: 10;
    }