Fix: fondo negro en modales del widget de pretalx

[francescarpi]

Resumen

Reemplaza el hack de inyección de estilos en el shadow DOM del widget de pretalx-schedule por una única declaración CSS (color-scheme: light) en el host. Resuelve el fondo negro que aparecía en los modales internos (filter bottom sheet y diálogo de detalle de sesión) cuando el navegador está en dark mode.

Problema

Al cargar la página /programa, los modales internos del widget de Pretalx se veían con fondo negro y texto casi ilegible — incluso con el hack previo, el modal de detalle de sesión ("Taller Django Girls", etc.) seguía mostrándose en negro.

Causa raíz

• pretalx-schedule renderiza sus modales (SessionModal, FilterBottomSheet) con un <dialog> nativo sin background-color declarado.
• Sin color explícito, el navegador le aplica el system color Canvas, que es negro en dark mode.
• El hack anterior (<script is:inline> con MutationObserver que inyectaba un <style> dentro del shadow root) solo atacaba #filter-bottom-sheet-dialog con un selector hardcoded — frágil y silenciosamente incompleto para el modal de detalle.
• Además, pretalx-schedule no expone ::part(), ni slots, ni variables CSS para el fondo de modales. La única palanca real de theming "externa" es el set de custom properties --pretalx-clr-* que ya se venían usando para el color de marca.

Solución

color-scheme es una propiedad CSS heredable que cruza la frontera del shadow DOM sin necesidad de JavaScript. Aplicada al host <pretalx-schedule>, fuerza al navegador a usar los UA defaults del esquema light (Canvas blanco, CanvasText negro, ::backdrop semi-transparente estándar) en todo el subárbol, incluidos los <dialog> internos.

- style="--pretalx-clr-primary: #03004b"
+ style="--pretalx-clr-primary: #03004b; color-scheme: light"

Y se elimina el bloque <script is:inline> completo de src/pages/[lang]/programa.astro (la función injectPretalxDialogStyles, el MutationObserver observando document.body con subtree: true, el listener de customElements.whenDefined y el de astro:page-load).

Por qué es mejor que el hack anterior

• Menos código: 1 atributo CSS vs 23 líneas de JS.
• Sin tocar shadow DOM: respetamos el encapsulamiento que el componente promete.
• Inmune a cambios upstream: los IDs internos de Pretalx pueden cambiar entre versiones sin afectarnos.
• Cero overhead en runtime: nos deshacemos del MutationObserver con subtree: true que observaba todo el document.body (anti-patrón de performance, se disparaba en cada mutación del DOM).

Verificación

Probado en browser con dark mode activo:

• ✅ Modal de detalle de sesión ("Taller Django Girls"): fondo blanco, texto negro, links legibles
• ✅ Filter bottom sheet: sigue funcionando con su overlay oscuro
• ✅ Tabla principal del schedule: sin cambios visuales
• ✅ pnpm astro check y prettier --check pasan sin errores

Trabajo futuro (opcional)

Abrir issue en pretalx/pretalx pidiendo que SessionModal.vue y FilterBottomSheet.vue expongan --pretalx-clr-modal-bg, --pretalx-clr-modal-text y --pretalx-clr-backdrop en :host para que los consumidores podamos tematizar los modales sin depender de UA color-scheme. Sería un cambio de ~5 líneas en el source del componente.