document.addEventListener("DOMContentLoaded", function () {
    console.log("El DOM está listo. Ejecutando script...");
});
function showToast(message, type = 'success') {
    const toastContainer = document.getElementById('toast-container');
    const toastId = `toast-${Date.now()}`;
    
    const toastHTML = `
        <div id="${toastId}" 
             class="toast align-items-center text-bg-${type} border-0" 
             role="alert" aria-live="assertive" aria-atomic="true" 
             data-bs-autohide="true">
            <div class="d-flex">
                <div class="toast-body">${message}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    `;
    
    toastContainer.insertAdjacentHTML('beforeend', toastHTML);
    const toastElement = document.getElementById(toastId);
    const toast = new bootstrap.Toast(toastElement);
    toast.show();

    // Elimina el toast del DOM cuando se oculta
    toastElement.addEventListener('hidden.bs.toast', () => {
        toastElement.remove();
    });
}