Espaciado y grilla

Sistema de espaciado basado en múltiplos de 4 px y grilla responsive por breakpoint.

Sistema de espaciado

El espaciado se basa en múltiplos de 4 px (escala de 4). Todos los márgenes, paddings y separaciones deben ser múltiplos de esta base para garantizar consistencia visual entre sistemas.

Token	Valor	px equivalente	Uso típico
`--space-xs`	0.25 rem	4 px	Separación mínima entre íconos y texto
`--space-sm`	0.5 rem	8 px	Padding interno de chips y badges
`--space-md`	1 rem	16 px	Padding de tarjetas, separación de campos
`--space-lg`	1.5 rem	24 px	Separación entre secciones de formulario
`--space-xl`	2 rem	32 px	Margen entre bloques de contenido principales
`--space-2xl`	3 rem	48 px	Separación de secciones de página
`--space-3xl`	4 rem	64 px	Separación de bloques mayores en landing
`--space-4xl`	6 rem	96 px	Espaciado de respiro entre grandes secciones

Escala visual a tamaño real (cada barra mide exactamente su valor en px):

--space-xs4 px · 0.25 rem

--space-sm8 px · 0.5 rem

--space-md16 px · 1 rem

--space-lg24 px · 1.5 rem

--space-xl32 px · 2 rem

--space-2xl48 px · 3 rem

--space-3xl64 px · 4 rem

--space-4xl96 px · 6 rem

Radios de esquina

Los bordes redondeados se rigen por una escala de tokens. El valor por defecto para tarjetas, campos y botones es --radius-md (8 px). Usar --radius-pill solo en chips, badges y botones tipo pill.

Token	Valor	Uso típico
`--radius-none`	0	Tablas a sangre, divisores
`--radius-xs`	2 px	Elementos densos, indicadores
`--radius-sm`	4 px	Inputs compactos, tags
`--radius-md`	8 px	Default — tarjetas, campos, botones
`--radius-lg`	12 px	Tarjetas destacadas, modales
`--radius-xl`	16 px	Contenedores grandes, hero
`--radius-pill`	∞	Chips, badges, botones pill

--radius-none0

--radius-xs2 px

--radius-sm4 px

--radius-md8 px · default

--radius-lg12 px

--radius-xl16 px

--radius-pill∞

Elevación

La elevación comunica jerarquía mediante sombras suaves. No combinar sombras manuales: usar los tokens. El nivel por defecto para tarjetas es --shadow-md.

Token	Uso
`--shadow-sm`	Realce sutil — inputs, hover de filas
`--shadow-md`	Default — tarjetas y paneles
`--shadow-lg`	Menús, popovers, dropdowns
`--shadow-xl`	Modales y sheets

--shadow-smrealce sutil

--shadow-mdtarjetas · default

--shadow-lgmenús · popovers

--shadow-xlmodal · sheet

Sistema de grilla

La grilla del sistema es responsive y se adapta al ancho del dispositivo. Se utilizan las siguientes configuraciones:

Nombre	Breakpoint	Columnas	Comportamiento
Desktop	1024–1279 px	3 col	Layout completo, sidebar visible
Desktop L	≥ 1280 px	4 col	Contenido centrado con margen lateral, max-width 1440 px