|
|
# Correcciones visuales — 14 de septiembre de 2026
|
|
|
|
|
|
Implementación local de los problemas encontrados en la [auditoría visual](auditoria-visual-2026-09-14.md). 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](assets/correcciones-visuales-2026-09-14/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.
|
