# Layout Usa layout para dar orden, ritmo y claridad a cada vista. ## 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-center` en 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. ## Tokens Espaciado horizontal/vertical, breakpoints responsive y dimensiones canónicas del contenedor de página. | Token | Valor | Uso | | --- | --- | --- | | `--spacingHorizontalNone` | `0` | Sin padding/gap. | | `--spacingHorizontalXXS` | `2px` | Espaciado entre icono y texto pegado. | | `--spacingHorizontalXS` | `4px` | Gap más pequeño usable. | | `--spacingHorizontalSNudge` | `6px` | Subajuste para alineaciones precisas. | | `--spacingHorizontalS` | `8px` | Gap entre tags, chips, ítems compactos. | | `--spacingHorizontalMNudge` | `10px` | Subajuste medio. | | `--spacingHorizontalM` | `12px` | Padding interno de inputs/buttons. | | `--spacingHorizontalL` | `16px` | Padding de cards y filas de tabla. | | `--spacingHorizontalXL` | `20px` | Padding de modal y drawer. | | `--spacingHorizontalXXL` | `24px` | Separación entre secciones inline. | | `--spacingHorizontalXXXL` | `32px` | Separación entre regiones principales. | | `--spacingVerticalS` | `8px` | Stack denso de elementos relacionados. | | `--spacingVerticalM` | `12px` | Stack medio en formularios. | | `--spacingVerticalL` | `16px` | Separación entre filas de contenido. | | `--spacingVerticalXL` | `20px` | Stack amplio entre bloques. | | `--spacingVerticalXXL` | `24px` | Entre secciones de página. | | `--spacingVerticalXXXL` | `32px` | Entre regiones principales de página. | | `breakpoint.sm` | `640px` | Tablet pequeña en adelante. | | `breakpoint.md` | `768px` | Tablet grande / contenido principal. | | `breakpoint.lg` | `1024px` | Laptop / desktop. | | `breakpoint.xl` | `1280px` | Desktop ancho. | | `breakpoint.2xl` | `1440px` | Activa columna TOC (table of contents). | | `container.max-width` | `1200px` | .content-container — ancho máximo de página. | | `container.page-padding` | `20px → 32px (lg+)` | Padding lateral del .page-layout. |