Interacción

El ojo humano no percibe el centro geométrico como centro visual, especialmente con formas asimetricas (play, flechas). Ajustar padding/margin visualmente. No hay propiedad CSS automática, requiere juicio visual.

Los íconos tienen formas rellenas que pesan más visualmente que el texto por píxel. Si el texto es #333, poner el ícono a opacity: 0.6 o un fill más claro como #777.

Cada elemento interactivo necesita: default, hover y active. Hover: cambio de background/color sutil. Active: transform: scale(0.96-0.97) para feedback tactil. Focus-visible: outline: 2px solid con outline-offset: 2px.

Las esquinas de pantalla son targets infinitos (el cursor no puede sobrepasarlas). Posicionar controles frecuentes en esquinas. Min touch target: 20px, recomendado 36px para icon buttons. border-radius: 9999px maximiza hit área en pills.

Cuando el cursor se mueve de un item de menú padre hacia un submenu hijo, crear un "corredor" invisible que permita al cursor cruzar sin que el submenu se cierre prematuramente.

La apertura debe ser inmediata (el usuario ya decidio). El cierre puede tener un breve fade-out que da oportunidad de cancelar la salida accidental.

Si el usuario navega fuera de un formulario, guardar el estado. Si la conexión se cae en un chat, copiar el texto no enviado. Si un modal se cierra accidentalmente, preservar el contenido del draft.

El anillo de foco con outline a veces se corta en bordes redondeados o queda pegado al borde del elemento. La alternativa elegante es usar box-shadow en dos capas: primero un ring del color de fondo para crear separación, luego el ring de acento.

En lugar de concatenar classNames condicionalmente, usar data-variant o data-state como atributo y targetearlo en CSS con [data-variant='primary']. El HTML resulta más legible, el CSS más explicito y los estilos no dependen de la lógica de strings del componente.

Los media queries responden al viewport, no al contenedor del componente. Un widget en un sidebar angosto necesita un layout diferente al mismo widget en el área principal, aunque el viewport sea el mismo. container-type: inline-size hace el componente verdaderamente portable.