Checkpoint web-player design-system refactor and backend track genre tagging

Advances the ongoing token/componentization cleanup (anchored player dock,
border-based panels instead of floating shadows, corrected light-mode
accent/gradient tokens) alongside in-progress backend support for track
genre tags.

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

web-player/src/lib/format.ts

@@ -9,7 +9,7 @@ export function fmtDurationLong(seconds: number): string {
 	const total = Math.max(0, Math.floor(seconds || 0));
 	const hours = Math.floor(total / 3600);
 	const minutes = Math.floor((total % 3600) / 60);
-	return hours > 0 ? `${hours} h ${minutes} min` : `${minutes} min`;
+	return hours > 0 ? `${hours} H ${minutes} Min` : `${minutes} Min`;
 }
 
 const dateFormatter = new Intl.DateTimeFormat('es', { dateStyle: 'medium' });
@@ -17,3 +17,8 @@ const dateFormatter = new Intl.DateTimeFormat('es', { dateStyle: 'medium' });
 export function fmtDate(value: string | number | Date): string {
 	return dateFormatter.format(new Date(value));
 }
+
+export function fmtPlays(count: number | string | undefined): string {
+	const value = Math.max(0, Math.floor(Number(count ?? 0)));
+	return `${value} ${value === 1 ? 'Reproducción' : 'Reproducciones'}`;
+}