Fix: fondo negro en modales del widget de pretalx (#217)

## 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.

```diff
- 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](https://github.com/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.

Author: francescarpi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "2026.es.pycon.org",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,10 +19,10 @@
     "@astrojs/sitemap": "3.7.3",
     "@fontsource-variable/jetbrains-mono": "5.2.8",
     "@fontsource-variable/outfit": "5.2.8",
-    "@lucide/astro": "1.23.0",
+    "@lucide/astro": "1.24.0",
     "@tailwindcss/vite": "4.3.2",
     "animejs": "4.5.0",
-    "astro": "7.0.6",
+    "astro": "7.0.7",
     "tailwindcss": "4.3.2"
   },
   "devDependencies": {
@@ -31,7 +31,7 @@
     "@commitlint/config-conventional": "21.2.0",
     "husky": "9.1.7",
     "lint-staged": "17.0.8",
-    "prettier": "3.9.4",
+    "prettier": "3.9.5",
     "prettier-plugin-astro": "0.14.1",
     "typescript": "6.0.3"
   },

pnpm-lock.yaml

@@ -18,7 +18,7 @@ const menuT = menuTexts[lang as keyof typeof menuTexts]
     event-url="https://pretalx.com/pycones-2026/"
     locale={t.locale}
     format="grid"
-    style="--pretalx-clr-primary: #03004b"></pretalx-schedule>
+    style="--pretalx-clr-primary: #03004b; color-scheme: light"></pretalx-schedule>
 
   <noscript>
     <div class="pretalx-widget">

src/components/ProgramaPage.astro

@@ -16,27 +16,4 @@ const t = programaTexts[(lang || 'es') as keyof typeof programaTexts]
     <ProgramaPage lang={lang || 'es'} />
   </div>
   <script is:inline src="https://pretalx.com/pycones-2026/widgets/schedule.js"></script>
-  <script is:inline>
-    function injectPretalxDialogStyles() {
-      const schedule = document.querySelector('pretalx-schedule')
-      if (!schedule?.shadowRoot) return
-      if (schedule.shadowRoot.querySelector('#pycones-dialog-fix')) return
-      const style = document.createElement('style')
-      style.id = 'pycones-dialog-fix'
-      style.textContent = `
-        #filter-bottom-sheet-dialog,
-        #filter-bottom-sheet-dialog .dialog-inner {
-          background: #fff !important;
-          color: #0d0f10 !important;
-        }
-      `
-      schedule.shadowRoot.appendChild(style)
-    }
-    customElements.whenDefined('pretalx-schedule').then(injectPretalxDialogStyles)
-    new MutationObserver(injectPretalxDialogStyles).observe(document.body, {
-      childList: true,
-      subtree: true,
-    })
-    document.addEventListener('astro:page-load', injectPretalxDialogStyles)
-  </script>
 </Layout>