Layout

Espaciado

La unidad base es 4 px. Todos los valores de margen, padding y gap son múltiplos de 4, lo que crea un ritmo consistente y facilita la implementación en cualquier plataforma —px en web, pt en iOS, dp en Android.

Rampa de espaciado

Los valores en uso en el producto son 4, 8, 12, 16, 20, 24, 40, 48, 60 y 64 px. Los saltos pequeños (4–24) organizan el interior de los componentes y las relaciones entre elementos adyacentes. Los saltos grandes (40–64) separan secciones, crean respiración entre bloques de contenido y delimitan regiones de la interfaz.

Los valores 12 y 20 se salen ligeramente de la grilla de 8 px que usan algunos frameworks, pero encajan en la de 4 px de Lexy. Sirven para afinar padding de iconos y alinearlos ópticamente con texto circundante.

Proximidad como jerarquía

Los elementos cercanos se leen como relacionados. Cuanto mayor es el espacio entre ellos, más débil es la relación percibida. En Lexy esto se traduce en una regla práctica: el gap interno de un componente (8–16 px) debe ser siempre menor que el gap entre componentes del mismo bloque (20–24 px), que a su vez debe ser menor que la separación entre secciones (40–64 px).

En el portal del cliente —donde la familiaridad con la interfaz no se puede dar por hecha— se prefieren layouts más aireados (valores altos de la rampa) para reducir carga cognitiva. La vista interna del abogado puede ser más densa, pero nunca por debajo de 8 px entre elementos interactivos.

Grilla y regiones

Una grilla no es una regla rígida sino un acuerdo invisible entre diseño e implementación. Definir columnas, márgenes y medianiles antes de componer una pantalla garantiza coherencia entre vistas y facilita la colaboración en equipos mixtos.

Anatomía de la grilla

Toda grilla se compone de tres elementos: las columnas son los bloques donde se ubica el contenido; los medianiles son los espacios negativos entre columnas, múltiplos de la unidad base de 4 px; y los márgenes son el espacio fuera de las columnas, fijo o porcentual según el ancho de pantalla. Las regiones agrupan columnas o filas para formar bloques compositivos mayores.

Regiones de la interfaz

Cualquier interfaz de Lexy se divide en regiones con roles distintos. Las regiones del shell —navegación global, barra de acciones, panel lateral— son fijas o sticky: permanecen visibles y consumen espacio antes de que el contenido pueda usarlo. La región de contenido es fluida y ocupa el espacio restante; su ancho efectivo depende de cuánto espacio han tomado las regiones del shell.

Establecer estos límites explícitamente evita que el contenido compita con la navegación por espacio visual. En pantallas anchas puede aparecer una tercera región —índice lateral, panel de detalle, barra de filtros— que coexiste con el contenido sin desplazarlo.

Ancho máximo de contenido

La legibilidad del texto decae cuando las líneas superan los 75–80 caracteres. Por eso las vistas editoriales y de detalle limitan el ancho de la columna de contenido, dejando que el espacio sobrante actúe como margen. Vistas densas con tablas o tableros de datos pueden crecer más, pero siempre con un tope que evite que los ojos recorran distancias excesivas entre inicio y fin de línea.

Breakpoints

El producto usa los breakpoints estándar de Tailwind más un breakpoint personalizado para el TOC. No cubren cada dispositivo posible; ofrecen rangos donde el layout cambia de forma significativa.

Puntos de corte en uso

sm (640 px) — primer punto donde los layouts de una columna empiezan a abrirse a dos. Las demos de iconos y temas pasan de columna única a grilla de dos columnas. md (768 px) — coincide con el ancho máximo del contenido; se usa para habilitar layouts horizontales en componentes como la grilla de categorías de iconos, que pasa de apilado a nombre izquierda + swatches derecha. min-[1440px] — breakpoint personalizado donde aparece la columna del TOC. Por debajo de este ancho, el TOC está oculto.

Diseño mobile-first

Todas las reglas de layout se escriben primero para pantalla pequeña y se amplían con prefijos de breakpoint. El layout base —una columna, padding mínimo, sin TOC— es siempre funcional y legible. Los breakpoints añaden capacidad, no la corrigen.

Alineación

La alineación establece orden y jerarquía visual. En Lexy el punto de partida es siempre alineación a la izquierda para texto e interfaces en español, reservando la alineación central para momentos puntuales y la derecha para valores numéricos en tablas.

Alineación de texto

Todo el texto editorial —títulos, párrafos, etiquetas— va alineado a la izquierda. La alineación justificada está prohibida: introduce espaciado irregular entre palabras y dificulta la lectura en pantalla, especialmente en anchos de columna variables.

Icono con texto

Cuando un icono acompaña texto, ambos se alinean al centro del eje transversal (items-centeren flex). El icono no lleva margen superior o inferior propio; el espaciado lo gestiona el gap del contenedor.

Alineación central

Se reserva para elementos de foco: demos en sección de documentación, estados vacíos, modales de confirmación. En el flujo principal del expediente nunca se usa alineación central para contenido textual.

Composición responsiva

El mismo contenido se adapta a distintos anchos de pantalla mediante cuatro técnicas que se combinan según la complejidad de la vista. El objetivo es siempre que la información esencial sea accesible sin scroll horizontal ni zoom.

Reposicionar

Elementos apilados verticalmente en móvil pasan a distribución horizontal en anchos mayores. Ejemplo: el nombre de categoría de iconos y su grilla de swatches se apilan en móvil y se colocan en dos columnas desde md.

Redimensionar

Elementos cambian de tamaño en función del ancho disponible. Los heros animados tienen alturas mínimas diferenciadas por breakpoint (280 px base, 360 px en sm+). Los gaps entre columnas aumentan al crecer la pantalla (24 px en móvil, 40–56 px en desktop).

Mostrar y ocultar

El TOC lateral aparece solo en pantallas de 1440 px o más (hidden min-[1440px]:block). En anchos menores, la navegación de secciones no se muestra; el usuario navega por scroll. Este patrón evita sobrecargar la interfaz en pantallas estrechas.

Reflujo

Las grillas de iconos cambian el número de columnas según el ancho: 6 columnas base, 10 columnas en sm+. El contenido no se trunca ni colapsa; simplemente ocupa más o menos filas. En el listado de expedientes, una columna en móvil se convierte en tabla con columnas visibles en desktop.