/* Estilos personalizados para el modal tipo offcanvas */
        .modal.offcanvas-like .modal-dialog {
            position: fixed;
            margin: 0;
            width: 320px; /* Ancho de tu offcanvas */
            max-width: 100%;
            height: 100%;
            transform: translate3d(100%, 0, 0); /* Posición inicial fuera de pantalla a la derecha */
            transition: transform .3s ease-out; /* Transición para el deslizamiento */
        }

        .modal.offcanvas-like.show .modal-dialog {
            transform: translate3d(0, 0, 0); /* Desliza a la vista */
        }

        .modal.offcanvas-like .modal-content {
            height: 100%;
            border-radius: 0;
            border: none;
        }

        /* Posicionar el modal a la derecha */
        .modal.offcanvas-like.modal-right .modal-dialog {
            right: 0;
        }

        /* Opcional: Estilos para el contenido del menú */
        .offcanvas-menu .nav-link {
            display: flex;
            align-items: center;
            gap: 10px; /* Espacio entre el icono y el texto */
            padding: 15px 20px;
            font-size: 1.1rem;
            color: #343a40;
        }
        .offcanvas-menu .nav-link:hover {
            background-color: #e9ecef;
            color: #007bff; /* Color primario de Bootstrap 4 */
        }
        .offcanvas-menu .fa { /* Para Font Awesome */
            font-size: 1.5rem;
        }

.add-button {    
    justify-content: center; 
    /*align-items: center;    
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 16px;
    z-index: 1000;
    */
    }