Diseño responsivo

Diseñamos mobile-first y escalamos hacia arriba. El contenido manda: los breakpoints existen para servir a la lectura, no al revés.

Breakpoints del sistema

Token	Ancho	Uso
sm	640px	Móvil grande / apilado a 1 columna
md	768px	Tablet · 2 columnas
lg	1024px	Escritorio · aparece el sidebar
xl	1280px	Escritorio amplio · ancho máximo de lectura

Reglas de responsividad

• Un contenido, un ancho de lectura. El texto largo nunca supera ~68 caracteres por línea.
• Apilar antes que encoger. En móvil, las columnas se apilan; no se comprimen hasta ser ilegibles.
• Targets táctiles de 44px en cualquier viewport con entrada táctil.
• La tabla se desplaza horizontalmente dentro de su contenedor; el layout de página nunca lo hace.

Comportamiento por componente

• Sidebar → se colapsa a iconos en md, se oculta tras un botón en sm (reemplazado por bottom nav).
• Cards → de rejilla multi-columna a una sola columna en sm.
• Modales → centrados en escritorio, hoja inferior (bottom sheet) en móvil.
• Tabs → scroll horizontal cuando no caben, sin truncar etiquetas.