# MKClinico UI — Contexto IA (versión corta / lite)

**Para qué sirve:** primera pasada rápida para modelos y personas — reglas duras, piezas mínimas y trampas frecuentes. **No sustituye** el archivo completo `mkclinico-ai-context.md` (tokens, tablas, modales, HTML largo, props de React).

**CDN (CSS):** `https://cdnmk3.masterkey.cl/mkclinico-ui.min.css`  
**Contexto completo (mismo CDN, si aplica):** `https://cdnmk3.masterkey.cl/mkclinico-ai-context.md`  
**Dominio de datos de ejemplo:** clínico/administrativo (pacientes, citas, médicos, fichas).

**Sin CDN:** descarga desde la guía del DS → *Inicio → Recursos para IA y uso sin CDN* (`mkclinico-ui.min.css` + `mkclinico-ai-context.md` + opcional este `mkclinico-ai-context-lite.md`).

---

## CDN frente a contexto (evitar malentendidos con IAs)

| Qué | Rol |
|-----|-----|
| **CSS del DS** (`mkclinico-ui.min.css` vía CDN o copia local) | En el **navegador**: aplica estilos a elementos que ya lleven las **clases correctas**. |
| **Este archivo o `mkclinico-ai-context.md`** | Para **generar código** con un modelo: nombres de clase, jerarquías, variantes y piezas documentadas. |

- El `.min.css` **no** sustituye al contexto: no es práctico inferir todas las clases desde el archivo minificado; **no** adivines nombres solo porque el proyecto enlaza el CDN.
- **HTML + CDN** (cualquier proyecto que no sea el monorepo de la guía): usa **markup y clases** de la guía o de estos `.md`. **No** uses imports tipo `@/app/components/...` de este repositorio.
- **React en el monorepo de la guía Next.js** (`LayoutPantalla`, `InputRut`, constructor de formulario, etc.): válido **aquí**; en otro stack, traduce a HTML/CSS del contexto o a los componentes que vuestra app exponga.

Si tienes la **guía interactiva** abierta: Inicio → *Recursos para IA* → desplegable **Checklist mínimo con IA** (`#recursos-ia-minimo-ia`, bajo las descargas).

## Demos de la guía (composición — humanos e IAs)

Las rutas **`/demo-*`** (p. ej. **`/demo-formulario`**, **`/demo-nuevo-formulario-herramientas`**, **`/demo-contenedor-plantillas`**, **`/demo-layout`**) son la **referencia oficial de composición**: orden de paneles, rails, pestañas y bloques usando el DS.

| Audiencia | Uso |
|-----------|-----|
| **Personas** | Parte del demo más cercano a tu pantalla; sustituye datos y acopla la lógica en tu app. Evita rediseñar el layout desde cero salvo brief. |
| **IAs** | Usa el demo como **mapa de jerarquía HTML y clases** del DS. **No** copies estado, hooks ni rutas Next del monorepo si el destino es otro stack: solo **markup + clases** y, en HTML suelto, el `<link>` al CDN. |

### UX y comportamiento vs. implementación (comunicar al usuario cuando aplique)

Pueden usar el demo como **referencia de UX y de comportamiento** (qué debería ocurrir en pantalla), pero **la implementación** —eventos, estado, llamadas, framework— la escribe **cada proyecto en su propio lenguaje o stack**; **no** están obligados a copiar el código React de esta guía.

**IAs:** Si la persona pide **más funcionalidad** después de una primera entrega solo visual (agregar/quitar ítems, pestañas dinámicas, scroll programático, etc.), **explícale en una frase** que el demo sigue siendo referencia de UX y que la lógica debe ir en **su** código; genera entonces la solución en el stack que indique o en pseudocódigo mínimo, **manteniendo clases y tokens del DS** en cada estado.

Muchas clases **`demo-*`** / **`demo-pantalla-*`** son solo de esta guía; en **producto** traduce a piezas exportables (`LayoutPantalla`, contenedores documentados) sin depender de prefijos `demo-` en código definitivo.

**Índice de rutas** en la guía interactiva: **Layout y pantallas** → *Demos a pantalla completa* (`#demos-pantalla-completa`). En **Inicio** → *Para desarrolladores*: *Demos como referencia de composición* (`#inicio-demos-composicion`).

### Pedido vago («copia el demo», «hazlo igual que el demo»…)

Suele ser la mayoría de los casos. **Interpretación por defecto** (IAs y personas que orienten a la IA):

1. **No** significa volcar el repositorio Next ni el estado de la maqueta.
2. **Sí** significa: misma **composición** (orden de regiones y bloques) y **clases del DS** que documenta el contexto `.md`; datos de ejemplo neutros; **un** `<link>` al CDN si el destino es HTML fuera del monorepo.
3. Si **no** dicen qué pantalla: **una sola aclaración** — «¿Qué ruta: `/demo-formulario`, `/demo-nuevo-formulario-herramientas`, `/demo-contenedor-plantillas`, `/demo-layout`, …?» — y actuar según la respuesta (o la ruta ya citada en el hilo).
4. Clases **`demo-*` / `demo-pantalla-*`**: tratarlas como **maqueta de guía**; en código de producto, sustituir por los patrones equivalentes sin prefijo `demo-` cuando el contexto lo describa.

**Receta copiable** (prompt listo): Inicio → *Recetas por tarea* → **«Pedido vago: replicar un demo»**.

---

## Responsive (viewports)

El **CSS del DS** (`mkclinico-ui.min.css`) ya contempla varios anchos: no es un layout fijo solo desktop.

| Pieza | Comportamiento |
|-------|----------------|
| **Espaciado global** | El token **`--espaciado-area-principal`** es **1rem** en móvil y sube en **`@media (min-width: 40rem)`** y **`64rem`** (tablet / desktop). Lo usan el área principal y el panel. |
| **Paneles** | **`.panel-principal`:** más padding en **≥64rem**; en **≤640px** padding más **compacto** (mismo bloque `@media` que cabecera/modales). |
| **Tablas** | **`.tabla-container`** tiene **`overflow-x: auto`** y ancho **100%**: en móvil suele haber **scroll horizontal**; el grid de columnas **no** se repliega solo — es intencional para no mezclar columnas. |
| **Modales** | **≤640px:** padding más compacto; confirmación con botones en **columna** y ancho completo. |
| **Cabecera** | **≤640px:** **`.header-buscador`** **flexible** (`min-width: 0`), menos padding en **`.header-navegacion`**. |
| **Layout pantalla** | **`.layout-pantalla-body`** / **`.layout-pantalla-panel-fill`** con **`min-width: 0`**; **≤640px** fila título+CTA en **columna** (solo CTA sigue alineado a la derecha). |
| **Tipografía** | **≤640px:** **`.titulo-principal`** y **`.subtitulo-md`** algo más pequeños (jerarquía legible). |
| **Nav vertical / rail** | **≤640px:** menos aire en **`.nav-vertical-container`**; rail **`.navbar-vertical-v3`** expandido acotado con **`min(300px, 100vw)`**. |
| **Demos guía** | **≤640px:** dropdowns / cards / sidebar-nav de demos con **ancho 100%**; marco navbar con **scroll-x** si hace falta. |
| **Demos / constructor** | Clases **`.demo-constructor-*`** y maquetas de guía pueden tener reglas extra solo en este repo. |

**Tu aplicación** debe usar contenedores **fluidos** (`width: 100%`, **`min-width: 0`** en hijos de flex/grid cuando el contenido desborda). La **guía Next.js** añade utilidades responsive (Tailwind) en layout; **HTML + CDN** depende del contenedor que definas tú.

---

## Reglas obligatorias (no negociables)

1. **Solo clases y variables del DS** documentadas en la guía / `mkclinico-ai-context.md`. No inventar clases ni tokens.
2. **Color de marca = teal** (`#118b95`, `--color-primario`). **No** usar azul como primario.
3. **Botones:** siempre incluir **`btn`** + variante + tamaño cuando aplique: p. ej. `btn btn-primario btn-md`, `btn btn-secundario btn-md`.
4. **Texto legible:** no usar `font-size` menor a **14px** en UI exportable (`var(--tamano-texto-min)`).
5. **Proyecto solo HTML/CSS:** incluir el `<link>` al CSS del DS. **Monorepo de la guía Next.js:** no añadir el link; los estilos ya están globales.
6. **Tablas:** el número de valores en **`--tabla-cols`** debe coincidir **exactamente** con el número de **`tabla-cell`** por fila (header y filas). Vacío/carga/error **en una sola fila** de **`tabla-row`**: una **`tabla-cell`** con **`tabla-cell--span-todas`** (**`grid-column: 1 / -1`**; no sustituye **`col-span-full`** de Tailwind en este grid). Con **`tabla--filas-ordenables`**, esa fila puede ser más alta que 56px si el mensaje lo necesita.
7. **Bloques informativos de guía** (`bloque-informativo`, prompts): usar **`btn-guia-informativo`** / **`btn-guia-recurso-descarga`** — **no** `btn-primario` como si fuera CTA de producto dentro de un tip.
8. **Chips de código en la guía** (nombres de clase, props, fragmentos en prose): usar **`.guia-inline-code`** (+ **`guia-inline-code--narrow`**, **`--comfortable`**, **`--spacious`** según padding) o **`.code-ds`**; colores vía tokens **`--guia-informativo-control-*`** y **`--guia-informativo-disclosure-chevron-hover`**. **No** reintroducir utilidades Tailwind con hex (`bg-[#F1F5F9]`, etc.) para ese mismo patrón. **Árbol (`Tree`, React):** sangría por nivel con el token **`--tree-indent-step`** (p. ej. `calc(profundidad * var(--tree-indent-step))`). Tabla y HTML de ejemplo: **`mkclinico-ai-context.md`** (bloques informativos + sección Visualización / árbol).

---

## Prompt diario (simplificado)

Cuando **ya adjuntas este archivo** (o el contexto completo) y el modelo conoce el vocabulario del DS, puedes abrir cada conversación con un recordatorio corto en lugar del **prompt base** largo (ROL + REGLAS). No sustituye las reglas: las da por aplicadas porque el contexto va en el hilo.

**Misma cadena en la guía:** Inicio → *Recursos para IA* → bloque *Prompt diario* (`#recursos-ia-prompt-diario`), fuente TypeScript `PROMPT_DIARIO_IA` en `app/sections/_data/promptBaseIa.ts`. Si editas el texto, mantén ambos sitios alineados.

```
MKClinico (MasterKey) — front con el Design System documentado en la guía.

Las reglas obligatorias (solo clases y tokens del DS, teal como primario, btn + variante + tamaño, tablas con --tabla-cols alineado con las celdas, etc.) están en mkclinico-ai-context-lite.md o en mkclinico-ai-context.md. Si adjuntas uno de esos archivos (o ya van en el hilo), no hace falta repetir el bloque ROL/REGLAS completo en cada mensaje: aplícalas en cada respuesta. Los demos /demo-* de la guía son referencia de **composición**; no copies su lógica Next si el destino es otro stack (solo estructura + clases). Si el usuario solo dice «copia el demo» sin ruta: pide qué /demo-* (una pregunta corta) salvo que ya quede claro en el hilo. Si después pide funcionalidad extra: el demo puede servir de referencia de UX/comportamiento, pero la implementación la escribe su proyecto en su stack; comunícalo en una frase y mantén clases DS.

Entrega código listo para pegar y, al final, una línea con las clases o componentes del DS que usaste.
- Proyecto solo HTML/CSS: incluye <link rel="stylesheet" href="https://cdnmk3.masterkey.cl/mkclinico-ui.min.css">.
- Monorepo de la guía Next.js: no añadas el link.

TAREA
[Describe aquí la pantalla o el componente.]
```

---

## Diez piezas que cubren la mayoría de pantallas

| Pieza | Clases / componente | Nota mínima |
|--------|---------------------|-------------|
| **Shell de pantalla** | `LayoutPantalla` (React; opcional **`omitirPanelPrincipal`** = sin **`.panel-principal`**, p. ej. lienzo plantillas) o `panel-principal` + `titulo-principal` en layout manual | Título visible salvo que el flujo diga lo contrario. Con **`volver`**: **`--layout-pantalla-volver-margin-top`** (10px ref. bajo el header) y **11px fijos** hasta el contenedor inferior (**`gap`** en **`area-principal--con-volver`**, **`--layout-pantalla-volver-margin-panel`**) |
| **Botón principal** | `btn btn-primario` + `btn-sm` \| `btn-md` \| (50px default sin md en primario) | Si el usuario no indica tamaño, **preguntar** o documentar elección |
| **Botón secundario** | `btn btn-secundario` + tamaño | Cancelar, volver a flujo secundario |
| **Volver** | `btn btn-volver` | Coherente con el patrón MKClinico |
| **Cuerpo de texto** | `texto-body`, `texto-body-md`, `texto-body--panel` | Panel: gris medio según DS |
| **Campo simple** | Contenedor `input-campo` + `input-campo-input` dentro | Estados en el contenedor: `input-warning`, `input-error`, `input-deshabilitado` + `disabled` en el input |
| **Campo con etiqueta** | Contenedor `input-con-titulo` (+ `-label`, `-campo`; variantes 208/288/alto/editar en la guía) | Deshabilitado: `input-deshabilitado` en el contenedor raíz + `disabled` en el input |
| **Tabla de datos** | `tabla-container` > `tabla` + `tabla-header` / `tabla-row` / `tabla-cell` | Definir `--tabla-cols` en `.tabla`; variantes `tabla--con-switch`, `tabla--con-badge`, `tabla--acciones-menu` (menú ⋮), `tabla--filas-ordenables` (`.tabla-dnd-asa-area` + `arrastrar` + `.tabla-asa-arrastre`; Estado en `1fr`), `tabla--solo-texto` (solo datos: sin chevron; un valor en `--tabla-cols` por celda), `tabla-container--panel-inferior` + `tabla--compacta-codigo` (jerárquico: fondo `--color-fondo-general`; cabecera/chevron teal; hover colapsada/hija `--color-superficie`; `fila-activa` reposo sin barra lateral; guía en `tabla-anidada-bajo-nombre` (`::before` cápsula, columna Nombre `3 / 4`); `tabla-row--compacta-hija`) o + **`tabla--compacta-linea`** (dos columnas texto + 40px acción; hover fila `--color-superficie`; **`tabla-accion-linea-boton`**; sin jerarquía) o + `tabla--diagnostico-checks` (cabecera como compacta-codigo, títulos teal **`--peso-medio`**; GES/ENO/Quirúrgico con **`column-gap`** **`--tabla-diagnostico-col-gap`**; celdas **`min-width: 0`**; check 16×16 o `tabla-diagnostico-marca-guion`; `tabla-row--diagnostico-resaltada`; sin hover tarjeta) o + **`tabla--diagnostico-lista`** (misma cabecera/cuerpo/hover que checks; Fecha | Diagnóstico | Especialidad | 40px acción con **`tabla-accion-linea-boton`**) o + **`tabla--diagnostico-lista-examenes`** (misma cabecera/cuerpo/hover; cuatro columnas texto sin acción: Fecha | Tipos de exámenes-áreas | Nombre del profesional | Especialidad); en viewport estrecho, **scroll horizontal** solo si el contenido no cabe (`.tabla-container`) |
| **Modal (confirmación)** | Estructura de la guía Modales + `btn-modal-primario` / `btn-modal-secundario` | No mezclar con modal informativo si el flujo es solo confirmar |
| **Modal doble contenedor** | `modal--doble-contenedor` + layout + lateral `contenedor-vista-previa`; marco blanco sin hover; `fila-control-radio-bloque-item-fila` + marca + ítem; **`modal-doble-contenedor-asignado-item-cabecera`** (#E8FAFC, sin borde oscuro) + **`modal-doble-contenedor-asignado-etiqueta-criterio`** (GES); demo `/demo-modal-doble-contenedor`; guía `#modal-doble-contenedor-demo` | Listado + panel lateral; `Modal` con `dialogClassName` |
| **Lista + paginación** | Tabla o `lista-datos` según guía + componente **`Paginacion`** (React) o clases documentadas | Revisar artículo Visualización |
| **Jerarquía (árbol)** | Componente **`Tree`** + clases **`.tree-*`** | Sangría por profundidad: token **`--tree-indent-step`**; foco/teclado y portar: contexto completo § árbol |

### Alertas (barra de mensaje / toast)

- **Misma barra visual** (**`.alerta`** + variante); cambia el **contenedor**: flujo vs toast.
- **Alerta en flujo** (solo **`.alerta`** en el panel): mensaje **ligado al contexto** de la vista (validación, bloque o formulario). El usuario lo lee **junto al contenido** a corregir.
- **Toast** (**`.alerta-ancla-superior-derecha`** + **`.alerta`** dentro): aviso **breve y global** tras una acción; **fijo** arriba-derecha; no desplaza el layout. Tokens: **`--alerta-toast-separacion`**, **`--alerta-toast-top`**, **`--alerta-toast-right`**. Guía: **`#alertas-alerta-vs-toast`**.
- **Alineación en flujo:** **`margin-inline-start: auto`** hasta **`--alerta-ancho-max`**. Prompt: **`PROMPT_IA_ALERTA_MENSAJE`** / **`#alertas-prompt-ia`**. Detalle: **`mkclinico-ai-context.md`** § 4.13.

### Alertas (barra de mensaje / toast)

- **Misma barra visual** (**`.alerta`** + variante); cambia el **contenedor**: flujo vs toast.
- **Alerta en flujo** (solo **`.alerta`** en el panel): mensaje **ligado al contexto** de la vista (validación, bloque o formulario). El usuario lo lee **junto al contenido** a corregir.
- **Toast** (**`.alerta-ancla-superior-derecha`** + **`.alerta`** dentro): aviso **breve y global** tras una acción; **fijo** arriba-derecha; no desplaza el layout. Tokens: **`--alerta-toast-separacion`**, **`--alerta-toast-top`**, **`--alerta-toast-right`**. Guía: **`#alertas-alerta-vs-toast`**.
- **Alineación en flujo:** **`margin-inline-start: auto`** hasta **`--alerta-ancho-max`**. Prompt: **`PROMPT_IA_ALERTA_MENSAJE`** / **`#alertas-prompt-ia`**. Detalle: **`mkclinico-ai-context.md`** § 4.13.

---

## Cinco trampas típicas

1. **`btn-primario` sin `btn`** → estilos incompletos o inconsistentes.
2. **Columnas de tabla desalineadas** → `--tabla-cols` con más o menos valores que celdas por fila.
3. **“Primary blue”** en mocks o código → en MKClinico es **teal**.
4. **Tailwind o estilos sueltos** para lo que ya existe como clase DS → rompe portabilidad y CDN.
5. **CTA teal dentro de bloques de ayuda / prompts** → confunde con acción real; en guía usar **`btn-guia-informativo`**.
6. **Solo el `<link>` al CSS para la IA, sin adjuntar lite o contexto completo** → el modelo inventa o simplifica clases. Usar siempre **CSS + contexto**; ver arriba **CDN frente a contexto**.

---

## Checklist de validación rápida (antes de dar por bueno el código)

Marca mentalmente (o en PR):

- [ ] ¿Está cargado **`mkclinico-ui.min.css`** (o el proyecto es la guía con `componentes.css`)?
- [ ] ¿Quién use una IA tiene **lite o contexto completo** en el hilo, no solo la URL del CSS? (Ver **CDN frente a contexto**.)
- [ ] ¿Todas las clases usadas existen en la guía o en **`mkclinico-ai-context.md`**?
- [ ] ¿Los chips de código en documentación usan **`.guia-inline-code`** / **`.code-ds`** (no utilidades Tailwind con hex para ese patrón)?
- [ ] ¿Cada **botón** con intención DS tiene **`btn`** + variante + tamaño acordado?
- [ ] ¿La **tabla** tiene **`--tabla-cols`** alineado con el número de **`tabla-cell`**?
- [ ] ¿Mensaje vacío/carga/error en **una fila**? → **`tabla-cell--span-todas`** en esa celda.
- [ ] ¿Colores de acción / marca son **teal**, no azul arbitrario?
- [ ] ¿Texto visible ≥ **14px** donde aplique el DS?
- [ ] ¿Ejemplos de copy en contexto **clínico** cuando sea una pantalla de producto?
- [ ] ¿Probado en **viewport estrecho** (padding del panel, **scroll** de tabla si hay muchas columnas)?

Si algo requiere detalle (modales largos, árbol, dropdown, constructor, íconos del catálogo), pasar a **`mkclinico-ai-context.md`** completo.

---

## Historial y cambios del DS

En el repositorio de la guía: **`CHANGELOG.md`** (raíz). Para consumo estable de tokens/clases nuevas, preferir el contexto completo actualizado.