/*
da error cuando intenta guardar los generos

genericAjax.js?ver=3.0.2.1216093552:940 
 Error al guardar los géneros: undefined
(anónimo)	@	genericAjax.js?ver=3.0.2.1216093552:940

function guardarGenerosUsuario() {
    if (!is_user_logged_in()) {
        wp_send_json_error('Debes iniciar sesión para realizar esta acción.');
    }
    $generos = isset($_POST['generos']) ? $_POST['generos'] : array();

    if (empty($generos) || !is_array($generos)) {
        wp_send_json_error('No se recibieron géneros seleccionados.');
    }

    $generos_sanitizados = array_map('sanitize_text_field', $generos);
    $userId = get_current_user_id();
    update_user_meta($userId, 'usuarioPreferencias', $generos_sanitizados);
    wp_send_json_success('Los géneros han sido guardados.');
}

add_action('wp_ajax_guardarGenerosUsuario', 'guardarGenerosUsuario');

este es el problema 

genericAjax.js?ver=3.0.2.865805307:966  Error al guardar los géneros: No se recibieron géneros seleccionados.

asi se ve el html 

function modalGeneros()
{
$userId = get_current_user_id();
$usuarioPreferencias = get_user_meta($userId, 'usuarioPreferencias', true);

// Si ya existen preferencias, no mostramos nada
if (!empty($usuarioPreferencias)) {
    return '';
}

ob_start();
?>

<div class="modal selectorGeneros" style="display: none;">
    <div class="GNEROBDS">
        <div class="borde">
            <p>Trap</p>
        </div>
        <div class="borde">
            <p>R&B</p>
        </div>
        <div class="borde">
            <p>Pop</p>
        </div>
        <div class="borde">
            <p>Tech House</p>
        </div>
        <div class="borde">
            <p>EDM</p>
        </div>
        <div class="borde">
            <p>Disco</p>
        </div>
        <div class="borde">
            <p>Soul</p>
        </div>
        <div class="borde">
            <p>Techno</p>
        </div>
    </div>
    <button class="botonsecundario">Listo</button>
</div>

<?
return ob_get_clean();
}

asi se ve enviar ajax 

async function enviarAjax(action, data = {}) {
    try {
        const body = new URLSearchParams({
            action: action,
            ...data
        });
        const response = await fetch(ajaxUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: body
        });
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);
        }
        let responseData;
        const responseText = await response.text();
        try {
            responseData = JSON.parse(responseText);
        } catch (jsonError) {
            console.error('No se pudo interpretar la respuesta como JSON:', {
                error: jsonError,
                responseText: responseText,
                action: action,
                requestData: data
            });
            responseData = responseText;
        }
        return responseData;
    } catch (error) {
        console.error('Error en la solicitud AJAX:', {
            error: error,
            action: action,
            requestData: data,
            ajaxUrl: ajaxUrl
        });
        return {success: false, message: error.message};
    }
}
*/

document.addEventListener('DOMContentLoaded', function () {
    // Verificar si existe el modalTipoUsuario en la página
    const modalTipoUsuario = document.querySelector('.selectorModalUsuario');
    const modalGeneros = document.querySelector('.selectorGeneros');

    let darkBackgroundTipoUsuario; // Para almacenar el fondo oscuro del modalTipoUsuario
    let darkBackgroundGeneros; // Para almacenar el fondo oscuro del modalGeneros

    if (modalTipoUsuario) {
        // Mover el modalTipoUsuario al body si no es hijo directo
        if (modalTipoUsuario.parentNode !== document.body) {
            document.body.appendChild(modalTipoUsuario);
        }

        // Establecer el z-index del modal por encima del fondo oscuro
        modalTipoUsuario.style.zIndex = '999';

        // Mostrar el modalTipoUsuario
        modalTipoUsuario.style.display = 'flex';

        // Crear el fondo oscuro detrás del modalTipoUsuario
        darkBackgroundTipoUsuario = createDarkBackground();

        // Obtener elementos
        const fanDiv = document.getElementById('fanDiv');
        const artistaDiv = document.getElementById('artistaDiv');
        const botonSiguiente = modalTipoUsuario.querySelector('.botonsecundario');

        let tipoUsuarioSeleccionado = '';

        // Eventos para la selección de fan y artista
        fanDiv.addEventListener('click', function () {
            tipoUsuarioSeleccionado = 'Fan';
            fanDiv.classList.add('seleccionado');
            artistaDiv.classList.remove('seleccionado');
            botonSiguiente.style.display = 'flex';
        });

        artistaDiv.addEventListener('click', function () {
            tipoUsuarioSeleccionado = 'Artista';
            artistaDiv.classList.add('seleccionado');
            fanDiv.classList.remove('seleccionado');
            botonSiguiente.style.display = 'flex';
        });

        // Evento para el botón "Siguiente"
        botonSiguiente.addEventListener('click', async function () {
            if (tipoUsuarioSeleccionado) {
                // Guardar el tipo de usuario mediante AJAX
                const response = await enviarAjax('guardarTipoUsuario', {tipoUsuario: tipoUsuarioSeleccionado});
                if (response.success) {
                    // Ocultar modalTipoUsuario
                    modalTipoUsuario.style.display = 'none';

                    // Remover el fondo oscuro del modalTipoUsuario
                    removeDarkBackground(darkBackgroundTipoUsuario);

                    if (modalGeneros) {
                        // Mover el modalGeneros al body si no es hijo directo
                        if (modalGeneros.parentNode !== document.body) {
                            document.body.appendChild(modalGeneros);
                        }

                        // Establecer el z-index del modal por encima del fondo oscuro
                        modalGeneros.style.zIndex = '999';

                        // Mostrar modalGeneros
                        modalGeneros.style.display = 'flex';

                        // Crear el fondo oscuro detrás del modalGeneros
                        darkBackgroundGeneros = createDarkBackground();

                        iniciarModalGeneros();
                    }
                } else {
                    console.error('Error al guardar el tipo de usuario:', response.message);
                }
            }
        });
    } else if (modalGeneros) {
        // Mover el modalGeneros al body si no es hijo directo
        if (modalGeneros.parentNode !== document.body) {
            document.body.appendChild(modalGeneros);
        }

        // Establecer el z-index del modal por encima del fondo oscuro
        modalGeneros.style.zIndex = '999';

        // Mostrar modalGeneros
        modalGeneros.style.display = 'flex';

        // Crear el fondo oscuro detrás del modalGeneros
        darkBackgroundGeneros = createDarkBackground();

        iniciarModalGeneros();
    }

    function iniciarModalGeneros() {
        // Obtener elementos
        const generosDiv = modalGeneros.querySelector('.GNEROBDS');
        const generoItems = generosDiv.querySelectorAll('.borde');
        const botonListo = modalGeneros.querySelector('.botonsecundario');

        let generosSeleccionados = [];

        // Evento para la selección de géneros
        generoItems.forEach(function (item) {
            item.addEventListener('click', function () {
                const genero = item.textContent.trim();
                if (item.classList.contains('seleccionado')) {
                    item.classList.remove('seleccionado');
                    generosSeleccionados = generosSeleccionados.filter(g => g !== genero);
                } else {
                    item.classList.add('seleccionado');
                    generosSeleccionados.push(genero);
                }
            });
        });

        // Evento para el botón "Listo"
        botonListo.addEventListener('click', async function () {
            if (generosSeleccionados.length > 0) {
                // Enviar géneros seleccionados mediante AJAX
                const response = await enviarAjax('guardarGenerosUsuario', {generos: generosSeleccionados});
                if (response.success) {
                    // Ocultar modalGeneros
                    modalGeneros.style.display = 'none';

                    // Remover el fondo oscuro del modalGeneros
                    removeDarkBackground(darkBackgroundGeneros);
                } else {
                    // Cambiar response.message por response.data
                    console.error('Error al guardar los géneros:', response.data);
                }
            } else {
                alert('Por favor, selecciona al menos un género.');
            }
        });
    }

    // Funciones para crear y remover el fondo oscuro
    function createDarkBackground() {
        const darkBackground = document.createElement('div');
        darkBackground.style.position = 'fixed';
        darkBackground.style.top = '0';
        darkBackground.style.left = '0';
        darkBackground.style.width = '100%';
        darkBackground.style.height = '100%';
        darkBackground.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        darkBackground.style.zIndex = '998'; // Debe ser menor que el z-index del modal
        darkBackground.style.pointerEvents = 'auto';

        document.body.appendChild(darkBackground);

        return darkBackground;
    }

    function removeDarkBackground(darkBackground) {
        if (darkBackground && darkBackground.parentNode) {
            darkBackground.parentNode.removeChild(darkBackground);
        }
    }
});