Bordes y Sombras

Los bordes y las sombras no son un detalle decorativo: estructuran la percepción de profundidad, separan las zonas clicables de las zonas de información y dan identidad a los componentes de un design system. Cuando un border-radius pasa de 12px a 0 en todas las tarjetas de un sitio, toda la identidad visual se desplaza de un universo "moderno y cálido" a un renderizado "rígido" sin que ningún test funcional señale nada. En las interfaces de negocio, una sombra eliminada en un botón de acción principal lo vuelve visualmente plano y menos identificable, lo que se traduce en errores de uso. Las regresiones de esta categoría suelen nacer de un reset CSS introducido para resolver un caso aislado, de una limpieza de hoja de estilos que elimina un box-shadow considerado innecesario, de un cambio en el orden de carga entre staging y producción que altera la cascada, o de un borde añadido sin gestionar el border-collapse en una tabla, lo que crea bordes dobles irregulares. Los outline y los separadores de accesibilidad también se ven afectados por los rediseños globales, con consecuencias directas sobre el focus visible. Delta-QA aborda esta categoría comparando las capturas de referencia con cada nueva versión: el análisis píxel detecta los cambios de radio, la aparición o desaparición de una sombra, las variaciones de grosor de trazo y las modificaciones de color de borde. El diff visual localiza cada tarjeta, cada botón y cada separador cuya apariencia haya cambiado, lo que permite validar un rediseño de tokens de elevación o de radio sin tener que comparar manualmente los componentes uno por uno.