Dashboard y navegación

Equipo interno

Cabecera con título funcional en Inter, acción principal neutra y período cuando hay cifras. Navegación estable: resumen, expedientes, tareas, clientes y finanzas. Selección principal neutra, foco índigo. El chrome sigue el tema; data-sidebar="brand" es opt-in, no el defecto.

Priorizar la bandeja por vencimiento, bloqueo y próxima acción. Explicar qué requiere una decisión hoy; cuando no hay trabajo urgente, mostrar una línea de resumen en lugar de múltiples tarjetas con ceros.

Agrupar cifras que contestan la misma pregunta. Total por cobrar y antigüedad pertenecen al mismo bloque. Evitar seis KPIs iguales sin jerarquía.

Portal cliente

Empresa o trámite, próximo paso, responsable, documentos y conversación. Menos herramientas visibles; lenguaje comprensible sin conocimiento de los estados internos. No convertirlo en una landing dentro del login. Inter en toda la tarea y radios compartidos.

Tablas

Cabecera con filtros y resultados, columnas con nombres explícitos, acciones por fila identificables. Orden y filtro son visibles y reversibles. Selección múltiple revela una barra contextual. Datos densos mantienen números alineados y filas sin radios individuales.

Desktop: sidebar cercana a 240 px. Móvil: menú con apertura accesible, o 3–5 destinos si la frecuencia justifica navegación inferior; no imponer ambas simultáneamente. Conservar título, estado activo y regreso. Tabs permiten scroll propio.

Estados operativos

Carga: skeleton con estructura estable. Vacío inicial: explicar qué aparecerá y ofrecer la próxima acción. Vacío filtrado: mostrar filtro y cómo limpiarlo. Error parcial: conservar secciones disponibles y reintentar la afectada. Sin permiso: explicar limitación sin insinuar que no hay datos. No usar éxito para ocultar incertidumbre.

Ejemplo interno · Portal · Finanzas.

Navegación seleccionada

Los enlaces del menú usan .lg-nav-link y aria-current="page". Selección con fondo neutro inverso y texto contrastado; hover discreto, foco índigo. El número y el título heredan el mismo contraste. La guía aplica este mismo componente en sidebar y drawer.

Para los títulos de hasta dos líneas del índice: altura 64 px, línea de 20 px, padding horizontal 34 px y radio pill. El texto comienza después de la curva. No truncar nombres de capítulos. En rutas estáticas .html y rutas limpias, normalizar la ruta antes de comparar para conservar la selección después de recargar.