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.

web-player/src/routes/(app)/albums/[id]/components/AlbumTrackTable.svelte

@@ -54,7 +54,7 @@
 							update()}
 				>
 					<input type="hidden" name="trackId" value={track.id} />
-					<IconButton type="submit" label="Quitar del álbum" size="sm" revealOnHover>
+					<IconButton type="submit" label="Quitar del álbum" size="xs" revealOnHover>
 						<X class="h-3.5 w-3.5" />
 					</IconButton>
 				</form>

web-player/src/routes/(app)/albums/[id]/components/LibraryPicker.svelte

@@ -55,7 +55,7 @@
 							update()}
 				>
 					<input type="hidden" name="trackId" value={track.id} />
-					<IconButton type="submit" label="Añadir al álbum" size="sm" revealOnHover>
+					<IconButton type="submit" label="Añadir al álbum" size="xs" revealOnHover>
 						<Plus class="h-3.5 w-3.5" />
 					</IconButton>
 				</form>

web-player/src/routes/(app)/explore/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Music from '@lucide/svelte/icons/music';
-	import Play from '@lucide/svelte/icons/play';
 	import { player } from '$lib/player/player.svelte';
 	import { fetchAlbumQueueItems } from '$lib/albums';
 	import { fmtTime, fmtPlays } from '$lib/format';
@@ -11,6 +10,7 @@
 	import InfiniteScroll from '$lib/components/ui/InfiniteScroll.svelte';
 	import Artwork from '$lib/components/ui/Artwork.svelte';
 	import Avatar from '$lib/components/ui/Avatar.svelte';
+	import PlayButton from '$lib/components/ui/PlayButton.svelte';
 	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
 	import SearchResultRow from '$lib/components/ui/SearchResultRow.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
@@ -339,11 +339,7 @@
 					{/if}
 				</div>
 
-				<span
-					class="grid h-11.5 w-11.5 shrink-0 place-items-center rounded-full bg-cta-strong text-ink transition group-hover/top:brightness-110"
-				>
-					<Play class="h-4 w-4" fill="currentColor" strokeWidth={0} />
-				</span>
+				<PlayButton as="span" size="lg" label="Reproducir" class="group-hover/top:brightness-110" />
 			{/snippet}
 
 			{#if topResult.kind === 'track'}

web-player/src/routes/(app)/library/+page.svelte

@@ -84,7 +84,7 @@
 								update()}
 					>
 						<input type="hidden" name="trackId" value={track.id} />
-						<IconButton type="submit" label="Borrar canción" size="sm" revealOnHover>
+						<IconButton type="submit" label="Borrar canción" size="xs" revealOnHover>
 							<X class="h-3.5 w-3.5" />
 						</IconButton>
 					</form>

web-player/src/routes/(app)/liked/+page.svelte

@@ -98,7 +98,7 @@
 					<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
 					<IconButton
 						label="Quitar de Me gusta"
-						size="sm"
+						size="xs"
 						revealOnHover
 						onclick={() => liked.toggle(track)}
 					>

web-player/src/routes/(app)/playlists/[id]/components/PlaylistTrackTable.svelte

@@ -62,7 +62,7 @@
 						update()}
 			>
 				<input type="hidden" name="trackId" value={track.id} />
-				<IconButton type="submit" label="Quitar de la playlist" size="sm" revealOnHover>
+				<IconButton type="submit" label="Quitar de la playlist" size="xs" revealOnHover>
 					<X class="h-3.5 w-3.5" />
 				</IconButton>
 			</form>