Sistema de Diseño Maestro-Detalle

¿Qué hace Sistema de Diseño Maestro-Detalle?

Propósito

El Sistema de Diseño Maestro-Detalle (también conocido como Panel Dividido o UI de Lista-Detalle) proporciona un diseño visual estandarizado y un marco de interacción para navegar por una lista primaria de elementos (el panel "Maestro") mientras se muestran atributos completos, acciones contextuales e historial profundamente anidado para el registro seleccionado actualmente en un espacio de trabajo adyacente y sincronizado (el panel "Detalle").

Los patrones maestro-detalle son fundamentales para aplicaciones web de productividad de alta eficiencia, como clientes de correo electrónico, mesas de ayuda de atención al cliente, visores de ofertas de CRM, plataformas de revisión de código, registros de auditoría y consolas de recursos en la nube.

Diseñar una interfaz Maestro-Detalle efectiva requiere establecer proporciones espaciales precisas, contención vertical independiente (evitando el desplazamiento global de la página), estados de selección visual claros, sincronización perfecta de múltiples paneles y transiciones fluidas de viewport móvil desde la vista dividida lado a lado hasta la navegación de pila única, todo ello cumpliendo estrictamente con las pautas de accesibilidad WCAG 2.1 AA para la gestión del enfoque y la navegación por teclado.

Casos de Uso

• Portales de Mesa de Ayuda y Atención al Cliente: Navegar por una lista de tickets abiertos en el panel maestro mientras se leen conversaciones completas de hilos, historial del cliente y notas internas en el panel detalle.
• CRM Empresarial y Tuberías de Ventas: Escanear contactos o cuentas en un panel maestro mientras se inspecciona el historial de etapas de ofertas, próximas actividades y detalles de contacto en el panel detalle.
• Aplicaciones de Correo Web y Mensajería: Revisar un feed de bandeja de entrada en la columna maestra izquierda mientras se lee, responde o archiva el mensaje activo en el panel detalle derecho.
• Paneles de DevOps e Inspector de Nube: Filtrar instancias de servidor, flujos de registros o tuberías de despliegue en el panel maestro mientras se inspeccionan métricas en tiempo real, trazas de errores y configuraciones YAML en el panel detalle.
• Sistemas de Seguimiento de Solicitudes (ATS) de RRHH: Navegar por solicitudes de candidatos mientras se revisan currículums, calificaciones de entrevistadores y herramientas de programación lado a lado.

Cuándo NO Usar

• Espacios de Trabajo de Datos Tabulares que Requieren Comparaciones de Múltiples Filas: Si los usuarios necesitan comparar docenas de registros simultáneamente en múltiples atributos estructurados, use data-table-ui-system.
• Tableros de Tuberías de Flujo de Trabajo: Para flujos de trabajo de columnas de estado donde las tarjetas se mueven horizontalmente a través de etapas discretas de la tubería, use kanban-board-ui-system.
• Árboles de Documentos Jerárquicos: Para navegación de documentos en estructura de árbol profundamente anidada (por ejemplo, árboles de directorios de sistemas de archivos), use tree-view-navigation-system.
• Asistentes Lineales Paso a Paso: Para formularios secuenciales de múltiples pasos donde cada vista se basa en la anterior, use step-progress-system o multi-step-form-implementation.
• Páginas de Aterrizaje Independientes Simples: Para páginas de aterrizaje de marketing o feeds de artículos lineales simples donde el contenido fluye verticalmente en una sola columna, use article-layout-system o section-composition-system.

Entradas

1. Arquitectura de la Información y Esquema del Elemento: Atributos para renderizar en la tarjeta del elemento Maestro (por ejemplo, Insignia de Estado, Título/Asunto, Metadatos Primarios, Marca de Tiempo) versus el espacio de trabajo Detalle (Cuerpo Completo del Registro, Historial de Actividad, Registros Relacionados, Barras de Acción Contextual).
2. Contexto del Contenedor del Viewport: Límites de diseño proporcionados por el contenedor de la aplicación externa (dashboard-layout-system o sidebar-navigation-system).
3. Preferencias de Proporción de Ancho del Panel: Requisitos de tamaño de columna (por ejemplo, Ancho Maestro Fijo 360px + Detalle Fluido flex: 1, o División Porcentual 35% / 65%).
4. Tokens de Diseño: Elevaciones de superficie, bordes neutros, indicadores de anillo de enfoque y escalas tipográficas (accessible-color-system, elevation-and-depth-system, fluid-spacing-system).

Salidas

1. Especificación de Diseño de Panel Dividido: Definiciones espaciales de CSS Grid / Flexbox para proporciones de panel fijas vs. fluidas, contenedores de desplazamiento vertical independientes (overflow-y: auto) y divisores visuales.
2. Plano de Selección y Estado Activo del Elemento Maestro: Especificaciones visuales para estados no leído, hover, enfocado, seleccionado (aria-selected="true") y casillas de verificación de selección múltiple dentro de la lista.
3. Jerarquía del Espacio de Trabajo Detalle y Anatomía del Encabezado: Diseño espacial para la barra de acciones de la vista detalle (encabezado pegajoso, botón de retroceso, controles de estado, disparadores de acción primaria/secundaria) y pestañas/secciones de contenido.
4. Modelo de Adaptación de Viewport Responsivo: Reglas de transición de diseño paso a paso que cambian de la vista dividida de doble panel en desktop/laptop a la navegación de pila única con diapositivas de panel animadas en pantallas de tablet/móvil.
5. Modelo de Interacción de Teclado y ARIA Accesible: Captura de enfoque, tabindex móvil o enrutamiento de enfoque de Listbox APG, hitos ARIA (role="region", aria-controls) y notificaciones de estado del lector de pantalla a través de aria-live="polite".

---

Flujo de Trabajo

1. Establecer el Contenedor del Lienzo de Doble Panel

Construir el envoltorio externo maestro-detalle dentro del contenedor de la aplicación (dashboard-layout-system):

• Bloqueo del Viewport del Contenedor: Configurar el envoltorio externo a display: flex; height: 100vh; max-height: 100vh; overflow: hidden; (o ajustarlo dentro del área de contenido del dashboard padre) para bloquear la altura general del diseño y eliminar el desplazamiento de la ventana a nivel de navegador.
• Cuadrícula de Columnas de Proporción de División: Definir la proporción del panel dividido usando CSS Grid o Flexbox:
  • Patrón Maestro Fijo (Recomendado para Bandejas de Entrada/CRMs): grid-template-columns: minmax(300px, 380px) 1fr; (El panel Maestro se mantiene en un ancho de escaneo cómodo entre 300px y 380px; el panel Detalle consume todo el espacio horizontal restante).
  • Patrón de División Proporcional: grid-template-columns: 35% 65%; o 40% 60% para herramientas de inspección densas.
• Separador Visual de Paneles: Insertar un borde sólido de 1px (border-right: 1px solid var(--border-subtle)) o una barra de división redimensionable accesible (accessible-split-pane-implementation) entre los paneles.

2. Diseñar la Estructura del Panel de Lista Maestra

El panel Maestro sirve como el índice de escaneo rápido para la colección de registros:

• Región de Encabezado Pegajoso: Posicionar una barra de control de búsqueda y filtro fija en la parte superior del panel Maestro (flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card)). Incluir un campo de búsqueda rápida (search-interface-system), chips de filtro y disparadores de acción masiva.
• Lista de Elementos Desplazable Independiente: Envolver los elementos de la lista en un contenedor con flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; (role="list" o role="listbox").
• Anatomía de la Tarjeta de Elemento Maestro:
  1. Fila Superior: Identificador/Autor Principal (font-weight: 600; font-size: 0.875rem; color: var(--text-primary)), Píldora/Insignia de Estado y Marca de Tiempo (font-size: 0.75rem; color: var(--text-muted)).
  2. Fila Media: Asunto o Título del Elemento (font-weight: 500; font-size: 0.875rem; color: var(--text-primary); text-truncate: 1 line).
  3. Fila Inferior: Fragmento o Texto de Vista Previa (font-size: 0.8125rem; color: var(--text-secondary); line-clamp: 2), Etiquetas/Categoría y Avatar del Asignado (user-avatar-system).
• Reglas de Estilo de Estado:
  • Estado No Leído / Sin Procesar: Título del texto en negrita con una sutil señal visual (por ejemplo, un punto de acento primario de 8x8px a la izquierda).
  • Estado Hover: Resaltado de fondo (background: var(--surface-hover); cursor: pointer).
  • Estado Activo / Seleccionado: Fondo de superficie activa distinto (background: var(--surface-active-subtle)), una tira indicadora de acento primario sólida de 3px en el borde izquierdo (border-left: 3px solid var(--brand-primary)) y aria-selected="true".
  • Estado de Enfoque Visible: Contorno de enfoque altamente visible (outline: 2px solid var(--focus-ring); outline-offset: -2px).

3. Construir la Estructura del Panel del Espacio de Trabajo Detalle

El panel Detalle renderiza el contexto completo y el espacio de trabajo del registro activo:

• Visualización de Estado Vacío: Cuando no hay ningún registro seleccionado en el panel maestro, mostrar un estado vacío accesible (empty-state-system) en el panel detalle con un ícono sutil, un título claro ("Ningún registro seleccionado") y una sugerencia útil ("Selecciona un elemento de la lista para ver los detalles").
• Barra de Acciones de Detalle Pegajosa: Renderizar una barra de encabezado superior persistente dentro del panel detalle (position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card)):
  • Disparador de Retroceso Móvil: Incluir un botón oculto en desktop "Volver a la Lista" (<button class="mobile-back-btn">← Volver</button>).
  • Identificación del Registro: Resumen del ID/Título del Registro (font-weight: 600; font-size: 1rem).
  • Controles de Acción: Botones de acción primarios (por ejemplo, "Responder", "Editar", "Asignar", "Eliminar") estilizados usando button-and-action-system.
• Región de Desplazamiento de Contenido Independiente: Envolver el cuerpo del contenido principal del detalle en un contenedor de desplazamiento (flex: 1; overflow-y: auto; padding: 24px).
• Diseño del Contenido del Detalle:
  • Sección de Encabezado: Título del Registro H1, Insignia de Estado, Cuadrícula de Metadatos (Fecha de Creación, Autor, Prioridad, Asignado).
  • Área del Cuerpo Principal: Descripción completa, mensaje de hilo HTML o bloque de código de configuración.
  • Subsecciones con Pestañas: Usar pestañas (tab-ui-system) para separar "Historial de Actividad", "Archivos Adjuntos", "Registros de Auditoría" y "Registros Relacionados".

4. Implementar la Navegación de Pila de Retroceso Responsiva para Móvil y Tablet

En pantallas más estrechas que 768px (o 1024px para aplicaciones densas), mostrar paneles lado a lado resulta en texto ilegible y abarrotado y botones apretados. Transformar el diseño en un modelo de pila de retroceso de un solo panel:

• Vista de Panel Único Móvil: Renderizar solo un panel a la vez con ancho completo del viewport (width: 100%).
• Máquina de Estados de Navegación:
  • Estado A (Maestro Activo): El panel de lista Maestro ocupa el 100% del ancho. El panel Detalle está oculto visualmente (display: none o desplazado fuera de pantalla con transform: translateX(100%)).
  • Estado B (Detalle Activo): Cuando el usuario toca un elemento maestro, cambiar de viewport. El panel Detalle ocupa el 100% del ancho y el panel Maestro está oculto.
• Botón de Retroceso Móvil: En el Estado B, el panel Detalle muestra un botón prominente en la parte superior izquierda "Volver a la Lista". Tocarlo reinicia la máquina de estados al Estado A y devuelve el enfoque del teclado al elemento de la lista maestro previamente seleccionado.
• Animación del Viewport: Usar transiciones de vista deslizantes suaves (view-transitions-implementation o transformaciones CSS horizontales transform 0.25s ease-in-out) para reforzar la orientación direccional (deslizar a la izquierda hacia el detalle, deslizar a la derecha de vuelta a la lista maestra).

5. Asegurar la Interacción Accesible de Enfoque y Lector de Pantalla

• Roles de Hito y Región ARIA: Asignar role="region" aria-label="Lista de Elementos" al contenedor del panel Maestro y role="region" aria-label="Espacio de Trabajo de Detalle del Elemento" al contenedor del panel Detalle.
• Marcado de Listbox / Selección: Si la lista maestra se comporta como un widget de selección única, aplicar role="listbox" aria-label="..." a la lista y role="option" aria-selected="true|false" a los elementos de la lista. Alternativamente, usar un <nav> estándar con aria-current="page" o aria-current="true".
• Gestión de Enfoque en la Selección de Registros: Cuando un usuario selecciona un elemento maestro usando un teclado o puntero:
  • Mantener el enfoque del teclado dentro de la lista maestra si el usuario está escaneando rápidamente con teclas de flecha (Arriba / Abajo).
  • Actualizar el DOM del panel Detalle de forma asíncrona y anunciar la carga del registro a través de una región de estado aria-live="polite": "Cargado ticket #1042: Error de procesamiento de pago".
  • Cuando el usuario presione Enter o Tab desde un elemento de lista seleccionado, mover sin problemas el enfoque a la acción principal del panel Detalle o al encabezado H1 (tabindex="-1").
• Captura y Restauración de Enfoque en Viewport Móvil: Al cambiar a la vista Detalle en móvil, mover automáticamente el enfoque al Botón de Retroceso Móvil o al Encabezado de Detalle. Al regresar a la vista Maestro, restaurar el enfoque al elemento maestro que estaba activo previamente.

---

Reglas de Decisión

Diseño de Panel y Estrategia de División

Ancho del Viewport	Patrón de Diseño Recomendado	Ancho del Panel Maestro	Ancho del Panel Detalle
Desktop Amplio (>1280px)	Vista de Panel Dividido Doble (o 3 Paneles con Barra Lateral)	Fijo 360px - 400px	Fluido flex: 1 (min-width: 600px)
Desktop Estándar (1024px - 1279px)	Vista de Panel Dividido Doble	Fijo 320px - 350px	Fluido flex: 1 (min-width: 480px)
Tablet (768px - 1023px)	Panel Dividido Estrecho O Pila de un Solo Panel	Fijo 280px - 300px (o Plegable)	Fluido flex: 1
Móvil (<768px)	Vista de Pila de Retroceso de un Solo Panel	100% (Estado A)	100% (Estado B)

Modelo de Selección vs. Enfoque de la Lista Maestra

• Selección Automática al Enfocar (Escaneo Rápido): Presionar las teclas de flecha Arriba o Abajo cambia inmediatamente la selección activa y actualiza el panel Detalle en tiempo real. Recomendado para lectura de correo electrónico, auditoría de registros y revisión de tickets de alto volumen.
• Selección Explícita al Accionar (Presionar Enter / Hacer Clic): Navegar por los elementos maestros con teclas de flecha mueve un anillo de enfoque visual sin actualizar el panel Detalle. El panel Detalle se actualiza solo cuando el usuario presiona explícitamente Enter, Espacio o hace clic. Recomendado cuando cargar registros de detalle implica solicitudes de API de red pesadas o ediciones de estado de formulario.

---

Restricciones

• Accesibilidad (WCAG 2.1 AA):
  • SC 2.1.1 Teclado: Los usuarios deben poder desplazarse por los elementos maestros, seleccionar registros, navegar al espacio de trabajo de detalle, accionar acciones y regresar a la lista maestra usando solo controles de teclado.
  • SC 2.4.7 Enfoque Visible: Los elementos maestros activos y enfocados deben contar con un anillo de enfoque sin recortar que cumpla con una relación de contraste mínima de 3:1 contra el fondo.
  • SC 4.1.2 Nombre, Rol, Valor: Los elementos maestros deben comunicar explícitamente su estado activo/seleccionado a la tecnología de asistencia a través de aria-selected="true" o aria-current="true".
  • SC 2.5.8 Tamaño del Objetivo: Los objetivos táctiles en los elementos de la lista maestra y los botones de acción del detalle deben proporcionar un área objetivo mínima de 24x24px (44x44px preferido en pantallas táctiles móviles).
• Contención del Diseño y CLS (Cumulative Layout Shift): El diseño maestro-detalle debe mantener una altura fija del viewport sin causar cambios inesperados en el diseño. Todo el contenido desplazable debe estar contenido dentro de regiones de desplazamiento independientes.
• Soporte de Navegador: El diseño debe ser probado y compatible con los dos últimos lanzamientos importantes de Chrome, Firefox, Safari y Edge para funcionalidad de cuadrícula CSS y flexbox.
• Rendimiento: El panel Detalle debe cargarse de forma perezosa (lazy loading) diferido o bajo demanda cuando se selecciona un elemento para evitar renderizar contenido detallado innecesario para toda la colección. Implementar desbordamiento virtual (por ejemplo, react-virtualized o @tanstack/react-virtual) para listas maestras que superen los 500 elementos.

---

Ejemplos

Ejemplo 1: Bandeja de Entrada de Correo Electrónico con Diseño Maestro-Detalle

Contexto: Interfaz de cliente de correo electrónico web con una lista de mensajes a la izquierda y un panel de lectura a la derecha.

Configuración:

• Proporción del Panel Maestro: minmax(300px, 380px) fijo con una lista de elementos de correo desplazable.
• Anatomía del Elemento Maestro: Fila superior (Remitente, Píldora "No Leído", Marca de Tiempo), Fila media (Asunto), Fila inferior (Fragmento de Vista Previa).
• Panel Detalle: Barra de acciones pegajosa (Responder, Reenviar, Archivar, Eliminar, Mover a), área de contenido de mensaje desplazable con hilo completo.
• Responsividad Móvil: A <768px, lista de mensajes ocupa pantalla completa; al tocar un mensaje, se desliza la vista de detalle con botón "Volver" en la parte superior izquierda.

Ejemplo 2: Visor de Tickets de Mesa de Ayuda

Contexto: Panel de agente de soporte que muestra una cola de tickets.

Configuración:

• Panel Maestro: Filtros de búsqueda y estado en la parte superior, elementos de ticket con ID de ticket, nombre del cliente, prioridad, estado y última fecha de actualización.
• Panel Detalle: Secciones con pestañas para Conversación, Detalles del Cliente, Registros de Auditoría y Archivos Adjuntos. Botones de acción (Responder, Cambiar Estado, Asignar, Escalar).
• Patrón de Selección: Selección automática al enfocar usando teclas de flecha para un triaje rápido.

Ejemplo 3: Inspector de Recursos en la Nube

Contexto: Consola de DevOps que enumera instancias de servidor.

Configuración:

• Panel Maestro: Lista de instancias con nombre, IP, región, tipo de instancia, estado (Ejecutándose/Detenida/Error).
• Panel Detalle: Panel de Detalles (Especificaciones, Etiquetas), Pestaña de Métricas en Vivo (CPU, Memoria, Red), Pestaña de Registros (flujo de registros en vivo), Pestaña de Configuración (YAML JSON). Respuestas de la API de carga bajo demanda para evitar retrasos en el renderizado inicial.

---

Referencias

• WCAG 2.1 AA - Pauta 2.1 Accesible por Teclado
• WCAG 2.1 AA - Enfoque Visible
• Patrón de Práctica de Autoría ARIA: Patrón de Listbox
• Definición de Rol de Región ARIA
• Artículo de Patrón de Diseño Maestro-Detalle de NN Group
• Guía de Escritorio de Material Design 3: Lista-Detalle