# Uso del Design System MKClinico sin CDN
**Nota:** Este documento es temporal. Cuando el consumo del DS se estandarice por CDN, esta guía dejará de ser necesaria y puede eliminarse.
El CSS, el contexto para IA (`mkclinico-ai-context.md`), la versión **lite** (`mkclinico-ai-context-lite.md`, primera pasada + checklist) y este documento también se pueden **descargar desde la guía del Design System**: [https://designsystem.masterkey.cl/](https://designsystem.masterkey.cl/) → **Inicio → Recursos para IA y uso sin CDN** (botones de descarga para cada archivo).
---
## Si tu proyecto no está conectado al CDN
Para que las clases y tokens del Design System se apliquen correctamente en tu aplicación, necesitas el CSS del DS en tu proyecto. Tienes dos opciones:
### 1. Usar el CDN (recomendado cuando esté disponible)
En el layout raíz de tu aplicación (o en el `` del HTML), añade:
```html
```
### 2. Copia local del CSS
Si el CDN no está disponible o tu proyecto aún no está conectado:
1. Obtén una copia de `mkclinico-ui.min.css` (o `mkclinico-ui.css`) desde el repositorio del Design System (se genera con `npm run build:css`).
2. Colócala en tu proyecto (por ejemplo en `public/`, `assets/` o `styles/`).
3. Enlázala en el layout o en tu CSS principal, por ejemplo:
```html
```
O en Next.js/React, importándola en el layout o en un CSS global.
Sin el CSS cargado (por CDN o por copia local), las clases documentadas en `mkclinico-ai-context.md` no tendrán efecto visual en tu aplicación.
### Viewports y responsive
El CSS del DS ya trae reglas que varían con el ancho de pantalla (espaciado global, paneles, modales, cabecera con buscador flexible y tablas con scroll horizontal en contenedor estrecho; por debajo de ~640px hay un bloque extra documentado en el contexto IA). No sustituye definir en tu app un **layout fluido** (`width: 100%`, y a veces `min-width: 0` en hijos de flex/grid). Resumen: `mkclinico-ai-context-lite.md` → **Responsive (viewports)**.
---
## Asistencia de IA
Enlazar solo el CSS **no** basta para que un modelo produzca markup alineado al DS: adjunta **`mkclinico-ai-context-lite.md`** (o `mkclinico-ai-context.md`). El detalle está en el lite, sección **CDN frente a contexto**.
---
## Archivos para uso sin CDN
| Archivo | Descripción |
|---------|-------------|
| `mkclinico-ui.min.css` (o `mkclinico-ui.css`) | Estilos del Design System. Obligatorio para que las clases tengan efecto. |
| `mkclinico-ai-context.md` | Contexto para IAs: tokens, señales visuales, layout. Usar junto con el CSS. |
| `mkclinico-ai-context-lite.md` | Resumen: reglas duras, piezas frecuentes, trampas y checklist. Primera pasada; luego el contexto completo. |
| `uso-ds-sin-cdn.md` | Este documento: instrucciones de integración sin CDN. |
Los archivos de la tabla se pueden descargar desde la guía del DS ([https://designsystem.masterkey.cl/](https://designsystem.masterkey.cl/) → Inicio → Recursos para IA y uso sin CDN) o copiar desde el repositorio tras ejecutar `npm run build:css`.