web-player: P4 — botones (Button, IconButton, PlayButton)

Button: variantes subtle (primary/secondary, se mantienen iguales por
decisión del usuario), glass (antes secondaryOnGlow, con font-normal
propio), accent, strong (cta-strong/ink, sustituye los overrides `!`
del hero de Inicio), danger. Usa los tokens --color-btn* de P1 en vez
de bg-[var(--mf-btn-...)]. Radio unificado a rounded-control.

IconButton: añade shape (square/round), size (xs/sm/md/lg), tone
(muted/subtle/plain), pressed (aria-pressed + text-accent), href/reload
(enlaces), surface (fondo permanente + hover a surface-hover en vez del
alias `hover` genérico, que coincide con surface-2 y no daba contraste).

PlayButton nuevo: un solo sitio para los SVG de play/pausa, variantes
strong/glass, as="span" para overlays no interactivos. Sustituye el
botón principal de TransportControls, el overlay de MixTile y el
círculo de "Mejor resultado" en Explorar.

Migra a IconButton: cerrar cola, "Crear playlist" (Sidebar), Me gusta
(TrackInfo, con pressed), cola (PlayerExtras), atrás (TopBar), login
(MobileHeader) y las acciones de fila en tablas (quitar/añadir,
size xs). BackLink usa size-icon-sm y quita un hover duplicado.

Decisión (sin bloquear): se elimina el botón "adelante" decorativo de
TopBar y el icono AlignJustify decorativo de PlayerExtras (código
muerto visual). Los botones de TransportControls (shuffle/prev/next/
repeat) se dejan sin migrar a propósito: hoy no tienen fondo ni
hit-box propios y IconButton siempre aplica una caja de tamaño fijo —
migrarlos habría añadido una píldora de hover visible no verificable
sin Docker en esta sesión.

Verificado con npm run check/build.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web-player/src/lib/components/TopBar.svelte

@@ -6,9 +6,10 @@
 	import Search from '@lucide/svelte/icons/search';
 	import X from '@lucide/svelte/icons/x';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
-	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import AccountMenu from './ui/AccountMenu.svelte';
 	import Avatar from './ui/Avatar.svelte';
+	import IconButton from './ui/IconButton.svelte';
+	import Button from './ui/Button.svelte';
 
 	interface Props {
 		user: SessionUser | null;
@@ -56,24 +57,18 @@
 </script>
 
 <header class="hidden items-center gap-3.5 px-6.5 pt-4 pb-3 sm:flex">
-	<div class="flex shrink-0 gap-1.5">
-		<button
-			type="button"
-			onclick={() => history.back()}
-			aria-label="Atrás"
-			class="grid h-7.5 w-7.5 place-items-center rounded-full bg-surface-2 text-fg-2 transition-colors hover:bg-surface-hover hover:text-fg"
-		>
-			<ChevronLeft class="h-3.75 w-3.75" strokeWidth={1.9} />
-		</button>
-		<span
-			aria-hidden="true"
-			class="grid h-7.5 w-7.5 place-items-center rounded-full bg-surface-2 text-muted"
-		>
-			<ChevronRight class="h-3.75 w-3.75" strokeWidth={1.9} />
-		</span>
-	</div>
+	<IconButton
+		label="Atrás"
+		shape="round"
+		tone="subtle"
+		surface
+		size="xs"
+		onclick={() => history.back()}
+	>
+		<ChevronLeft class="size-icon-sm" strokeWidth={1.9} />
+	</IconButton>
 
-	<form onsubmit={onSubmit} class="max-w-120 min-w-0 flex-1">
+	<form onsubmit={onSubmit} class="max-w-search min-w-0 flex-1">
 		<label
 			class="flex h-9.5 w-full items-center gap-2.5 rounded-control bg-surface-2 px-3.5 transition focus-within:bg-surface-hover"
 		>
@@ -126,13 +121,9 @@
 				{/snippet}
 			</AccountMenu>
 		{:else}
-			<a
-				href="/auth/login"
-				data-sveltekit-reload
-				class="shrink-0 rounded-full bg-accent-soft px-4 py-2 text-sm font-semibold text-ink transition hover:brightness-110"
+			<Button href="/auth/login" reload variant="accent" size="sm" class="shrink-0"
+				>Iniciar sesión</Button
 			>
-				Iniciar sesión
-			</a>
 		{/if}
 	</div>
 </header>