Align library styles with the design system

Use type recipes and Button danger variant, add danger tint, dropzone and cover-fill tokens, give SearchInput a size prop so the top bar keeps its larger search, show queue details inline on mobile, derive upload limits from constants and document the card hover style.

web-player/src/lib/data/uploadQueue.test.ts

@@ -4,6 +4,7 @@ import {
 	titleFromFileName,
 	toQueuedUpload,
 	uploadError,
+	uploadLimitsLabel,
 	UPLOAD_MAX_BYTES
 } from '$lib/data/uploadQueue';
 
@@ -43,3 +44,11 @@ describe('summarizeQueue', () => {
 		expect(summarizeQueue(items)).toEqual({ ready: 2, failed: 1 });
 	});
 });
+
+describe('uploadLimitsLabel', () => {
+	it('lists the formats and the size limit', () => {
+		expect(uploadLimitsLabel()).toBe(
+			'WAV, FLAC, AIFF o MP3 · hasta 500 MB por archivo · puedes soltar carpetas enteras'
+		);
+	});
+});

web-player/src/lib/data/uploadQueue.ts

@@ -1,6 +1,14 @@
 export const UPLOAD_MAX_BYTES = 500 * 1024 * 1024;
 export const UPLOAD_FORMATS = ['wav', 'flac', 'aiff', 'aif', 'mp3'];
 
+const UPLOAD_MAX_MB = Math.round(UPLOAD_MAX_BYTES / (1024 * 1024));
+
+export function uploadLimitsLabel(): string {
+	const names = UPLOAD_FORMATS.filter((ext) => ext !== 'aif').map((ext) => ext.toUpperCase());
+	const list = `${names.slice(0, -1).join(', ')} o ${names[names.length - 1]}`;
+	return `${list} · hasta ${UPLOAD_MAX_MB} MB por archivo · puedes soltar carpetas enteras`;
+}
+
 export type Visibility = 'private' | 'public';
 
 export interface QueuedUpload {
@@ -30,7 +38,7 @@ export function titleFromFileName(name: string): string {
 
 export function uploadError(file: File): string | null {
 	if (!UPLOAD_FORMATS.includes(fileExtension(file.name))) return 'Formato no compatible';
-	if (file.size > UPLOAD_MAX_BYTES) return 'Supera 500 MB';
+	if (file.size > UPLOAD_MAX_BYTES) return `Supera ${UPLOAD_MAX_MB} MB`;
 	if (file.size === 0) return 'Archivo vacío';
 	return null;
 }