Exportar e importar

# Sistema principal



- **Empresa:** 
- **Responsable:** 
- **Versión:** 1.0.0
- **Última actualización:** 8/16/2026, 8:24:24 PM
- **Idioma:** es
- **Prefijo de tokens:** ds

## Fundamentos

### Colores

_Sin tokens definidos._

### Tipografías

_Sin tokens definidos._

### Pesos tipográficos

_Sin tokens definidos._

### Tamaños de fuente

_Sin tokens definidos._

### Interlineado

_Sin tokens definidos._

### Letter spacing

_Sin tokens definidos._

### Espaciados

_Sin tokens definidos._

### Bordes

_Sin tokens definidos._

### Border radius

_Sin tokens definidos._

### Sombras

_Sin tokens definidos._

### Opacidades

_Sin tokens definidos._

### Transiciones

_Sin tokens definidos._

### Animaciones

_Sin tokens definidos._

### Medidas de componentes

_Sin tokens definidos._

### Z-index

_Sin tokens definidos._

### Breakpoints

_Sin tokens definidos._

### Grid

_Sin tokens definidos._

### Densidad

_Sin tokens definidos._

### Iconografía

_Sin tokens definidos._

### Estados visuales

| Token | Valor | Uso | Descripción |
| --- | --- | --- | --- |
| Default | sin modificaciones adicionales | Base para componentes interactivos, campos, listas y paneles | Estado base en reposo, sin modificaciones adicionales. |
| Hover | hover:bg-muted hover:text-foreground | Botones, inputs, tabs, chips, cards clicables y superficies interactivas | Respuesta visual al pasar el cursor o al entrar en una superficie interactiva. |
| Active | active:scale-95 active:brightness-95 | Botones, toggles y acciones de click o tap | Feedback inmediato durante click, tap o presión. |
| Focus | focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 | Inputs, botones, selects, tabs y navegación por teclado | Estado de foco visible para teclado o accesibilidad. |
| Disabled | opacity-40 cursor-not-allowed pointer-events-none | Botones, inputs, selects, tabs y opciones no disponibles | No permite interacción. |
| Read-only | bg-muted cursor-default border-transparent select-none | Inputs y campos que permiten lectura sin edición | Permite lectura, pero no edición. |
| Locked | opacity-70 cursor-not-allowed | Acciones o campos restringidos por permisos o configuración | Restricción por permisos, configuración o bloqueo del sistema. |
| Loading | opacity-70 cursor-wait pointer-events-none | Botones, formularios, paneles y acciones en proceso | Procesando una acción o esperando una respuesta. |
| Skeleton | animate-pulse bg-muted rounded | Cards, tablas, listas y bloques de contenido temporal | Contenido temporal mientras llegan datos reales. |
| Fetching | cursor-progress | Listas, tablas y paneles que actualizan datos en segundo plano | Actualización en segundo plano sin bloquear la UI (cursor de progreso). |
| Error | border-destructive text-destructive bg-destructive/10 | Inputs, formularios, alerts, toasts y mensajes bloqueantes | Error de validación o feedback bloqueante. |
| Success | border-green-500 text-green-600 bg-green-500/10 | Feedback de validación, alertas, toasts y confirmaciones | Confirmación visual de resultado exitoso. |
| Warning | border-amber-500 text-amber-600 bg-amber-500/10 | Alertas preventivas, banners y mensajes de atención | Advertencia relevante pero no necesariamente bloqueante. |
| Info | border-blue-500 text-blue-600 bg-blue-500/10 | Mensajes informativos, toasts, banners y estados contextuales | Información contextual o de soporte. |
| Selected | bg-primary/10 border-primary text-primary | Tabs, chips, cards seleccionables y controles segmentados | Elemento elegido dentro de un conjunto. |
| Unselected | opacity-100 | Opciones aún no elegidas dentro de un conjunto | Elemento aún no seleccionado. |
| Checked | bg-primary text-primary-foreground | Checkbox, radio, switch y opciones marcables | Control seleccionable marcado. |
| Unchecked | bg-background text-foreground | Checkbox, radio, switch y opciones aún no marcadas | Control seleccionable sin marcar. |
| Indeterminate | bg-primary/20 border-primary | Checkboxes jerárquicos o selección parcial | Estado intermedio o mixto en selección. |
| Empty | border-dashed text-muted-foreground | Tablas, listas, grids y contenedores sin contenido | Sin contenido disponible todavía. |
| Expanded | data-[state=open]:block | Accordions, dropdowns, sidebars y paneles abiertos | Contenido desplegado o visible. |
| Collapsed | data-[state=closed]:hidden | Accordions, dropdowns, sidebars y paneles cerrados | Contenido replegado o contraído. |
| Hidden | hidden | Contenido oculto temporalmente por regla de visibilidad | Contenido oculto temporalmente. |
| Visible | block | Contenido visible o desplegado de forma explícita | Contenido mostrado explícitamente. |

### Dispositivos

_Sin tokens definidos._

### Cursores

_Sin tokens definidos._

### Reglas de accesibilidad

_Sin tokens definidos._

## Componentes