senzapaura_es/docs/correcciones-visuales-2026-09-14.md

Correcciones visuales — 14 de septiembre de 2026

Implementación local de los problemas encontrados en la auditoría visual. No se ha desplegado ni publicado contenido. Estudio se ha revisado con su esquema de pruebas existente.

Cambios

Hallazgos	Implementación
V01	PortadaReproducible compartida por las tablas de canciones y álbumes. Una sola celda de portada/reproducción, con Play/Pausa, foco, estado activo y alternativa sin imagen.
V02, V03, V07	controles.css define la geometría y tipografía de acciones públicas, musicales y administrativas. Las variantes de formulario se declaran explícitamente; su color no depende del ancestro. Incluye carrito, favoritos, cola, listas y herramientas del editor.
V04–V06	Roles completos de título, sección, panel, etiqueta, metadato y valor. Estudio usa Archivo 28/33,6–600 para página, 20/26–600 para sección y 18/24,3–600 para panel. Los campos tienen peso 400 y las etiquetas 500. También se normalizan los campos públicos de acceso, búsqueda y contacto.
V08	Cabecera más corta; un único estado de edición, con explicación desplegable. La ayuda de guardado y el aviso de entorno también se pueden desplegar. Se conservan mensajes de operación, errores y revisión previa a publicar.
V09, V10	Acciones alineadas al pie de los tres accesos de inicio. Navegación a 14 px, con altura de interacción independiente de la letra.
V11	Publicado verde, borrador azul y retirado neutro, conservando texto y marcador. Las acciones de administración usan azul; la reproducción musical conserva oro.
V12	Etiquetas visibles y patrón de campos común en listados, búsqueda, operaciones y medios. Medios identifica expresamente su filtrado al escribir. Los otros filtros conservan su envío GET.
V13	Vista previa de medios con estado «Archivo no disponible». El audio mantiene controles nativos en un contenedor definido.
V14	Introducción de Música más corta y sin referencias a «la izquierda»; título móvil a 34 px.
V15	SVG del catálogo de iconos en cabecera, listados, creación, relaciones y herramientas de secciones.
V16	Los títulos de tarjetas de álbum y canción comparten Newsreader 19/20,9–400; metadatos de ambas a 13 px.
V17	Galería local en /__diseno en la web y Estudio. Incluye variantes, etiquetas largas, foco, campos y estados; permite comprobar estilos calculados y desbordamientos. Responde 404 fuera de desarrollo.

Evidencia del resultado

Comprobación	Antes	Después medido
Escuchar / carrito en ficha	44 / 50,75 px; interlíneas diferentes	Ambos 44 px, Archivo 14/20–500
Botón normal / compacto de Estudio	50 / 42 px	44 / 36 px
Buscar en cabecera de Estudio	52 px y glifo tipográfico	44 px y SVG de 20 px
Valor de campo dentro de etiqueta	Peso 600 heredado	Archivo 16 px, peso 400
Secciones H2 de Estudio	24/36–700	20/26–600
Portadas de ambas tablas	Celda de Play independiente en álbumes	Una portada con un control; 80 × 80 en escritorio, 56 × 56 en móvil
Primer campo del editor móvil	Quedaba fuera de la primera pantalla	Empieza en y=605 a 390 × 844, sin desbordamiento de la página
Acciones de los accesos de inicio	Distinta colocación	Las tres filas de acciones comparten la misma coordenada vertical

El compacto crece a 44 px para punteros táctiles mediante CSS. Las alturas son mínimas y las etiquetas multilínea pueden crecer; no se recorta el texto para conservar una medida rígida.

Más capturas y mediciones JSON en docs/assets/correcciones-visuales-2026-09-14/.

Verificación y límites

• Web: tarjetas y tablas del catálogo en escritorio y móvil; reproducción y pausa desde portada de álbum; ficha de canción en temas claro y oscuro; foco de teclado; campos de contacto; galería con etiquetas largas y controles deshabilitados.
• Estudio: inicio, filtros del listado con resultado y vacío, editor a 390, 768 y 1280 px, diálogo de revisión de publicación, biblioteca y archivo dañado. Los formularios de guardado y publicación no se enviaron.
• Comprobador de la galería sin desviaciones en la web y Estudio; Estudio comprobado a 390, 768 y 1280 px. Las mediciones de viewport no equivalen a una prueba en dispositivo físico táctil.
• npm run check: web, panel anterior y Estudio, sin errores ni advertencias de Svelte. Repetidos los checks afectados después de las últimas modificaciones. ESLint de los archivos modificados, Prettier y audit:styles -- --strict correctos.

Esto acredita las superficies y estados indicados, no una aprobación estética global. No se ha repetido la matriz completa de todos los contenidos, todos los anchos y todos los estados autenticados de compras/Jukebox, ni una revisión visual autenticada del panel anterior. La auditoría estática sigue siendo complementaria: no sustituye las capturas ni los estilos calculados.