# 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. ![Inicio de Estudio](assets/correcciones-visuales-2026-09-14/estudio-inicio-escritorio.jpg) ![Editor de Estudio](assets/correcciones-visuales-2026-09-14/estudio-editor-escritorio.jpg) ![Catálogo móvil](assets/correcciones-visuales-2026-09-14/catalogo-tablas-movil.jpg) 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.