Dashboard y navegación

El producto Legalty se organiza alrededor de expedientes. La navegación debe ser estable, predecible y dejar el máximo espacio al contenido.

Escritorio — Sidebar con submenús

Una barra lateral fija a la izquierda agrupa las áreas principales (Expedientes, Documentos, Facturación, Ajustes). Los submenús se expanden en su sección, nunca en overlays.

• Ancho estable (~240px), colapsable a iconos en pantallas medianas.
• Un único nivel de submenú; más profundidad indica que la IA de la información falla.
• El estado activo usa la superficie invertida: negro pleno en claro, blanco en oscuro. Estuvo en --lg-accent-soft, y en una barra de treinta entradas un violeta al 6% no dice dónde estás: hay que buscarlo. El negro se ve de un vistazo y no compite con los tonos de aviso del contenido, porque no es ninguno de ellos.

El negro es lo que pesa, no el lienzo

Conviene decirlo explícito porque es la confusión fácil: el chrome sigue el tema. En modo claro la barra tiene fondo claro; en oscuro, oscuro. Lo que va en negro es la entrada seleccionada —y, fuera de la barra, el botón secundario de peso—.

Un chrome negro permanente sobre una aplicación clara convierte el marco en el protagonista y deja al negro sin nada que señalar: si todo el marco es negro, que la entrada activa también lo sea deja de significar algo. El negro rinde cuando es escaso.

Para quien quiera aun así un chrome de marca oscuro en los dos temas, el sistema lo expone como data-sidebar="brand". La aplicación de Legalty no lo usa.

Móvil — Bottom navigation

En móvil, 3–5 destinos principales viven en una barra inferior con targets de 44px. Las acciones secundarias se mueven a un menú "Más". El contenido ocupa todo el ancho.

Composición de una vista de expediente

Una vista típica combina cabecera con título y acción primaria, una fila de estado con chips, tabs para las secciones y una tabla de documentos:

La sección «Ahora»

Es la primera del inicio y responde a una sola pregunta: ¿qué espera una decisión hoy? Eso obliga a que la sección se vea distinta según haya trabajo o no.

• Las tarjetas se ordenan por urgencia, no por el orden en que se escribieron: primero lo que está mal, luego lo que conviene mirar, luego el resto.
• La primera ocupa el doble de ancho y lleva la cifra grande; el resto van compactas. Así «1 flujo devuelto» deja de leerse igual que «16 por iniciar», que no es un problema sino un dato.
• Si nada requiere decisión, no salen cuatro tarjetas con ceros: sale una línea de resumen en un panel soft. Cuatro ceros ocupando el mismo espacio que cuatro problemas es lo contrario de lo que la sección existe para hacer.
• El subtítulo —«41 con retraso»— no compite con la cifra: va a 12px y en el tono del estado.

Avisos y banners

Jerarquía, de menos a más intrusivo: toast → aviso en línea → banner de página. El banner es el último recurso y va con altura controlada.

• Como mucho un banner por pantalla. Dos apilados son dos interrupciones antes de que se vea para qué se entró.
• Una fila, no una tarjeta: título y explicación en la misma línea, y el formulario solo cuando se pulsa.
• La regla lateral de un banner informativo no va en el acento: el violeta se reserva para la acción que lo resuelve.

Cifras que responden a la misma pregunta van juntas

«Por cobrar» y «Antigüedad de la deuda» vivían en dos bloques separados por media pantalla y respondían a lo mismo: cuánto se debe y desde cuándo. Ahora el total es la cabecera de la antigüedad y la barra lo explica —primero el número que decide, luego el reparto—.

Es la regla general: si dos bloques contestan la misma pregunta, son un bloque.

Espaciado

Escala de 4px, sin medios pasos:

Entre	Cuánto
Secciones grandes	32px (--lg-density-section-gap)
Bloques dentro de una sección	16px
Tarjetas de una misma rejilla	16px
Padding interno de tarjeta	20px (--lg-density-card-p), 14px en compacto
Título y su contenido	12px