(function() {
    // Inyectar estilos si no existen
    if (!document.getElementById('custom-alert-styles')) {
        const style = document.createElement('style');
        style.id = 'custom-alert-styles';
        style.textContent = `
        .axz_alert {
            padding: 1rem 1.5rem;
            margin-bottom: 1rem;
            border-radius: 0.375rem;
            border: 1px solid transparent;
            font-family: sans-serif;
            font-size: 1rem;
            position: relative;
            transition: opacity 0.3s;
        }
        .axz_alert-primary    { background: #cfe2ff; color: #084298; border-color: #b6d4fe; }
        .axz_alert-secondary  { background: #e2e3e5; color: #41464b; border-color: #d3d6d8; }
        .axz_alert-success    { background: #d1e7dd; color: #0f5132; border-color: #badbcc; }
        .axz_alert-danger     { background: #f8d7da; color: #842029; border-color: #f5c2c7; }
        .axz_alert-warning    { background: #fff3cd; color: #664d03; border-color: #ffecb5; }
        .axz_alert-info       { background: #cff4fc; color: #055160; border-color: #b6effb; }
        .axz_alert-light      { background: #fefefe; color: #636464; border-color: #fdfdfe; }
        .axz_alert-dark       { background: #d3d3d4; color: #141619; border-color: #bcbebf; }
        .axz_alert .axz_close-btn {
            position: absolute;
            top: 0.5rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.2rem;
            color: inherit;
            cursor: pointer;
        }
        #custom-alert-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            pointer-events: none;
        }
        #custom-alert-container .axz_alert {
            margin-top: 1rem;
            pointer-events: auto;
            width: 90%;
        }
        `;
        document.head.appendChild(style);
    }

    // Crear el contenedor si no existe
    if (!document.getElementById('custom-alert-container')) {
        const container = document.createElement('div');
        container.id = 'custom-alert-container';
        document.body.appendChild(container);
    }
})();

const CustomAlert = {
    show: function (type, message, timeout = null) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `axz_alert axz_alert-${type}`;
        alertDiv.innerHTML = `
        ${message}
        <button class="axz_close-btn" onclick="this.parentElement.style.display='none';">&times;</button>
    `;
        document.getElementById('custom-alert-container').appendChild(alertDiv);

        if (timeout) {
            setTimeout(() => {
                alertDiv.style.opacity = 0;
                setTimeout(() => alertDiv.remove(), 300);
            }, timeout);
        }
        return alertDiv;
    },
    hideAll: function () {
        document.querySelectorAll('#custom-alert-container .axz_alert').forEach(a => a.style.display = 'none');
    },
    removeAll: function () {
        document.querySelectorAll('#custom-alert-container .axz_alert').forEach(a => a.remove());
    }
};

// Ejemplo de uso:
// CustomAlert.show('success', '¡Operación exitosa!', 3000);
// CustomAlert.show('danger', 'Ha ocurrido un error.');