Add catalogue search action to header

e2e/musica.e2e.ts

@@ -1,6 +1,18 @@
 import { expect, test } from '@playwright/test';
 
 test.describe('Página de música', () => {
+	test('la lupa de la cabecera abre y enfoca la búsqueda del catálogo', async ({ page }) => {
+		await page.goto('/');
+		await page.locator('html[data-hidratado]').waitFor();
+
+		const buscar = page.getByRole('link', { name: 'Buscar en Música' });
+		await expect(buscar).toBeVisible();
+		await buscar.click();
+
+		await expect(page).toHaveURL('/musica#buscar-tema');
+		await expect(page.getByRole('searchbox', { name: 'Buscar en el catálogo' })).toBeFocused();
+	});
+
 	test('los estilos están siempre a la vista, con su recuento', async ({ page }) => {
 		await page.goto('/musica');
 

src/lib/components/Cabecera.svelte

@@ -75,6 +75,18 @@
 		return page.url.pathname === href || page.url.pathname.startsWith(`${href}/`);
 	}
 
+	/** Si el catálogo ya está abierto, la lupa lleva el foco al campo sin recargar. */
+	function buscarEnCatalogo(evento: MouseEvent): void {
+		menuAbierto = false;
+		if (page.url.pathname !== '/musica') return;
+
+		const campo = document.querySelector<HTMLInputElement>('#buscar-tema');
+		if (!campo) return;
+		evento.preventDefault();
+		campo.scrollIntoView({ block: 'start', behavior: 'smooth' });
+		campo.focus({ preventScroll: true });
+	}
+
 	const enCarrito = $derived(page.data.cantidadCarrito ?? page.data.carrito?.length ?? 0);
 	const usuario = $derived(page.data.usuario);
 
@@ -115,6 +127,16 @@
 		</nav>
 
 		<div class="cuenta" class:abierto={menuAbierto}>
+			<a
+				class="buscar-catalogo"
+				href="{resolve('/musica')}#buscar-tema"
+				aria-label="Buscar en Música"
+				title="Buscar en Música"
+				onclick={buscarEnCatalogo}
+			>
+				<Icono nombre="buscar" tamano={19} />
+			</a>
+
 			<a
 				class="jukebox"
 				href={resolve('/juke-box')}
@@ -340,6 +362,13 @@
 		gap: var(--sp-2);
 	}
 
+	.buscar-catalogo {
+		display: inline-grid;
+		min-width: 2rem;
+		min-height: 2rem;
+		place-items: center;
+	}
+
 	.contador {
 		display: inline-flex;
 		align-items: center;

src/lib/components/Icono.svelte

@@ -53,6 +53,7 @@
 		},
 		cerrar: { tipo: 'linea', d: ['M6 6l12 12', 'M18 6 6 18'] },
 		menu: { tipo: 'linea', d: ['M4 7h16', 'M4 12h16', 'M4 17h16'] },
+		buscar: { tipo: 'linea', d: ['M21 21l-4.35-4.35', 'M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'] },
 		externo: {
 			tipo: 'linea',
 			d: ['M14 3h7v7', 'M10 14 21 3', 'M19 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h6']

src/routes/(sitio)/musica/+page.svelte

@@ -21,6 +21,14 @@
 	let mostrarEtiquetas = $state(page.url.searchParams.has('etiqueta'));
 	const etiquetas = $derived(etiquetasDelCatalogo());
 
+	/* La lupa de la cabecera llega con este fragmento: enfoca el buscador una vez montado. */
+	$effect(() => {
+		if (page.url.hash !== '#buscar-tema') return;
+		requestAnimationFrame(() => {
+			document.querySelector<HTMLInputElement>('#buscar-tema')?.focus({ preventScroll: true });
+		});
+	});
+
 	/** Un solo catálogo de lanzamientos; los bloques solo transportan su estilo. */
 	const albumes = $derived(
 		data.bloques.flatMap((bloque) =>
@@ -362,6 +370,7 @@
 	input[type='search'] {
 		flex: 1 1 12rem;
 		min-width: 0;
+		scroll-margin-top: calc(var(--altura-cabecera) + var(--sp-3));
 		padding: var(--boton-relleno);
 		border: 0;
 		background: transparent;