SmartDefaults

Arranca la web en el tema y el idioma que el visitante ya tiene, sin parpadeo y sin obligarle a buscar un botón.

Cuándo se usa

Al montar el arranque de una web, al añadir selector de tema o idioma, o cuando la página parpadea en claro.

SKILL.md

# SmartDefaults

La web arranca ya en el tema y el idioma que el visitante espera, sin que tenga
que tocar nada.

## Tema: por defecto, sin botón

El tema sigue **siempre** al sistema, en vivo: si el visitante cambia su sistema
de oscuro a claro con la pestaña abierta, la web cambia sola.

- **Nivel A, el que se usa salvo razón de peso:** CSS puro, cero JavaScript, y
  por tanto parpadeo imposible. La paleta va en :root para claro y se redefine
  entera dentro de @media (prefers-color-scheme: dark). El navegador reevalúa la
  media query solo, así que sigue al sistema en vivo gratis.
- **Nivel B, la excepción:** solo cuando el producto necesita de verdad que el
  usuario FIJE un tema distinto al de su sistema. Entonces la elección se guarda
  y la decide un script inline colocado ANTES de la primera hoja de estilos. Si
  se decide después, el navegador ya pintó y el usuario ve el cambio: eso es el
  parpadeo.
- Si un proyecto ya tiene botón manual, propón quitarlo y pasar al nivel A antes
  de darlo por bueno.

Orden de resolución en el nivel B: lo guardado por el usuario manda siempre; si
no hay nada, el tema del sistema; y de último recurso, claro. Mientras no haya
elección explícita, se escucha el cambio del sistema para seguirlo en vivo.

## Idioma: autoseleccionar, nunca forzar

Redirigir automáticamente según el idioma del navegador rompe el botón atrás,
rompe los marcadores y confunde a los rastreadores. Lo dice Google Search Central
sin rodeos. Así que:

1. Si hay una elección guardada, se respeta SIEMPRE.
2. Si no la hay, primera visita: se mira la lista de idiomas del navegador y se
   busca el más cercano entre los que la web soporta.
3. Si ninguno encaja, el idioma nativo de la web.

El autodetect actúa solo en la primera visita. En cuanto el usuario elige, esa
elección manda para siempre y el sitio no vuelve a adivinar. El selector manual
queda siempre visible y alcanzable.

## Detalles baratos que casi nadie pone

- color-scheme: light dark en el CSS, para que las barras de scroll y los
  controles nativos del navegador acompañen al tema.
- El body necesita su propio color de fondo; sin él se ve el del navegador.
- Si el sitio tiene URLs separadas por idioma, añade las etiquetas alternate
  hreflang. Con textos intercambiados en la misma URL no aplican. Ahí acaba esta
  skill y empieza SiteIndex, que es la que se ocupa de que esas versiones existan
  para el buscador.

## Comprobación

Cambia el tema del SISTEMA y recarga: la web debe seguirlo sin un solo fotograma
del tema contrario. Sin nada guardado, el idioma debe autoseleccionarse; con algo
guardado, debe ignorar el idioma del navegador.