A I Voice Platform - Copy this React, Tailwind Component to your project

Modifica la sección donde se muestran las tarjetas de voz (Emma, Jaime, Sara, Miguel) para agregar casillas funcionales que permitan al usuario realizar acciones adicionales. Mantén el estilo visual coherente con el diseño actual, pero incorpora los siguientes ajustes: 1. Casillas Seleccionables (Checkboxes) • Añade una casilla o checkbox en cada tarjeta de voz (en la esquina superior izquierda, por ejemplo) para que el usuario pueda seleccionar múltiples voces. • Al marcar la casilla, la tarjeta debe reflejar un ligero cambio de estado (por ejemplo, un borde o sombreado más intenso) indicando que está seleccionada. • Permite que esta selección sea funcional: si el usuario marca varias tarjetas, podría mostrar un botón flotante (o en la parte superior) que diga “Acciones” o “Aplicar a seleccionadas”, abriendo la posibilidad de modificar propiedades o reproducir en conjunto. 2. Controles Avanzados (Opcional) • Integra un conmutador (toggle switch) o checkbox adicional que aplique un “modo grupo” o “modo simultáneo”, de manera que el usuario pueda elegir si desea reproducir todas las voces seleccionadas de forma secuencial o comparar tonos. • Asegura que, al activar estas opciones, aparezca algún feedback visual o un texto breve explicando la funcionalidad. 3. Compatibilidad con Filtros • Ajusta los filtros (Avatares, Idioma, Acento predeterminado, Emoción) para que, al aplicarlos, se mantenga la selección de casillas en caso de que la voz aún coincida con el filtro. • Si una voz deja de coincidir con el filtro, la selección se anula automáticamente para evitar confusiones. 4. Diseño y Usabilidad • Mantén la misma paleta de colores morados y grises claros en las casillas. Un ejemplo sería usar un ícono de check o un fill morado al marcar la casilla. • Conserva los bordes redondeados y el espacio entre los elementos para no sobrecargar la interfaz. • Asegura que al pasar el cursor sobre la casilla aparezca un estado hover ligero, reforzando la interactividad. 5. Retroalimentación y Microinteracciones • Cuando se seleccione una casilla, muestra una pequeña animación de check que refuerce la acción del usuario. • Agrega transiciones suaves para que el cambio de estado de la tarjeta (seleccionada/no seleccionada) resulte fluido.