MKClínico v3 Design System

Sistema de diseño unificado para aplicaciones de salud

Bienvenido al Design System

Este es el sistema de diseño oficial de MKClínico v3, una biblioteca de componentes UI consistente y reutilizable diseñada específicamente para aplicaciones del sector salud. Proporciona un lenguaje visual unificado que garantiza coherencia en toda la plataforma.

Todos los componentes están construidos con CSS puro utilizando variables CSS personalizables, sin dependencias de frameworks. Esto permite una integración sencilla en cualquier proyecto web.

Instalación CDN

Agregar el Design System a tu proyecto en segundos

Desarrollo (Normal)

Incluye todos los estilos sin minificar. Ideal para desarrollo y debugging.

Producción (Minificado)

Versión optimizada y comprimida. Recomendado para producción.

Recursos para IA y uso sin CDN

Descargas: contexto completo o **lite**, CSS minificado e integración sin CDN. Con IAs, el CSS **no** sustituye el `.md` (detalle en el lite, **CDN frente a contexto**). Checklist corto en el desplegable de abajo.

Contexto para IA (.md)Contexto IA lite (.md)CSS minificado Uso sin CDN (.md)

Checklist mínimo con IA (4 pasos) y CSS sin CDN

Enlaza el CSS (CDN o archivo descargado arriba).
Adjunta lite o contexto completo al chat (el lite explica CDN frente a contexto).
Copia el prompt base debajo; si el contexto ya va en el hilo, el prompt diario basta.
Pantallas complejas: Recetas o Quickstart.

Sin CDN: <link rel="stylesheet" href="/ruta/mkclinico-ui.min.css">

Prompt base para IA

Pégalo al inicio del chat. Orden: ROL → REGLAS → tu pedido. Recomendado adjuntar mkclinico-ai-context-lite.md o el completo.

ROL
Eres asistente de front-end para MKClinico (MasterKey). Tu salida debe usar solo el Design System documentado en la guía MKClinico.

REGLAS (obligatorias)
- Usa únicamente clases y variables del DS (mkclinico-ui / guía). No inventes tokens ni estilos sueltos.
- El <link> al CDN (o copia local del CSS) solo aplica estilos en el navegador; los nombres de clase y la estructura HTML salen de la guía o del contexto .md adjunto (mkclinico-ai-context-lite.md o completo) — no intentes deducirlos únicamente del .min.css.
- Proyecto solo HTML/CSS: incluye <link rel="stylesheet" href="https://cdnmk3.masterkey.cl/mkclinico-ui.min.css"> y adjunta el contexto .md a la IA; usa markup documentado, sin imports @/app/... de la guía Next.js.
- Monorepo de la guía Next.js: no añadas el link; los estilos ya están cargados. Ahí sí puedes usar componentes React del repo (LayoutPantalla, InputRut, etc.) donde estén documentados.
- Entrega código listo para pegar y, al final, una línea con las clases/componentes DS que usaste.
- Si en el repo existe mkclinico-ai-context.md, úsalo como referencia ampliada; para una primera pasada corta, opcional mkclinico-ai-context-lite.md.
- Ejemplos de texto: dominio clínico/administrativo (pacientes, citas, fichas) cuando toque.

A PARTIR DE AHÍ
Sigue el pedido concreto que te hace la persona (pantalla, formulario, tabla, etc.).

Prompt diario (simplificado)

Solo si el lite o el contexto completo ya van en el hilo; si no, usa el prompt base. Sustituye la línea TAREA por tu pedido.

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.

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.]

Atajos: prompts por tipo de tarea

Esquema fijo: TAREA, DEBE INCLUIR / NO HAGAS, COMPLETA. Abre el desplegable para revisar.

Listado con tabla

Ver vista previa del prompt

TAREA
Generar una pantalla de listado en MKClinico usando el Design System.

DEBE INCLUIR
- LayoutPantalla con título visible y un botón de acción principal (btn-primario).
- Una tabla con tabla-container y tabla del DS; columnas de ejemplo: Nombre, RUT, Estado; mostrar filas de ejemplo y estado vacío.
- Botones secundarios con btn-secundario donde corresponda.

NO HAGAS
- Inventar clases fuera del DS ni ignorar --tabla-cols si la tabla usa grid del sistema.

COMPLETA (borra la línea y escribe tu caso)
Columnas reales y dominio (ej. pacientes, médicos): …

Formulario de alta

Ver vista previa del prompt

TAREA
Generar un formulario de alta en MKClinico dentro de LayoutPantalla.

DEBE INCLUIR
- Campos con input-con-titulo-campo (mínimo: nombre, RUT, teléfono, correo).
- Al menos un control de opción (checkbox, radio o switch) si encaja en el flujo.
- Footer fijo o claro con Guardar (btn-primario) y Cancelar (btn-secundario).

NO HAGAS
- Omitir estados input-error / input-warning del DS si el flujo pide validación visible.

COMPLETA (borra la línea y escribe tu caso)
Campos obligatorios, textos de etiqueta y si hay advertencia o error de ejemplo: …

Modal de confirmación

Ver vista previa del prompt

TAREA
Generar un modal de confirmación en MKClinico (HTML o JSX con clases del DS; ver guía Modales).

DEBE INCLUIR
- Overlay y estructura de modal de confirmación del DS.
- Título, mensaje breve y dos botones: btn-modal-primario y btn-modal-secundario.
- Textos en español, tono clínico/administrativo neutro.

NO HAGAS
- Mezclar con el patrón de modal informativo (con X) si aquí debe ser solo confirmación.

COMPLETA (borra la línea y escribe tu caso)
Título, texto del cuerpo y etiquetas exactas de los dos botones: …

Quickstart IA + persona (~5 minutos)

Guía corta para pedirle a una IA una primera pantalla con el DS, sin leer toda la documentación.

1. Objetivo

Código HTML o JSX usando solo clases del MKClinico, listo para pegar, con textos de ejemplo en tono clínico/administrativo.

2. CSS del DS (si aplica)

¿Tu app ya carga mkclinico-ui? Salta al paso 3. Si no, enlaza el CSS o descarga los archivos desde Recursos para IA.

Tip: la misma URL ya va dentro del prompt del paso 3; este bloque sirve para copiarla rápido al HTML.

Opcional: adjunta mkclinico-ai-context-lite.md (resumen) o mkclinico-ai-context.md (completo).

3. Prompt oficial

Mismo texto que en Recursos para IA. Pégalo como primer mensaje del chat; no hace falta leerlo entero antes de copiar.

Si ya trabajas a menudo con el DS y en cada hilo adjuntas el lite o el contexto completo, puedes usar el prompt diario (simplificado) en Recursos para IA — es más corto y da por fijadas las reglas del archivo.

Ver texto completo del prompt

ROL
Eres asistente de front-end para MKClinico (MasterKey). Tu salida debe usar solo el Design System documentado en la guía MKClinico.

REGLAS (obligatorias)
- Usa únicamente clases y variables del DS (mkclinico-ui / guía). No inventes tokens ni estilos sueltos.
- El <link> al CDN (o copia local del CSS) solo aplica estilos en el navegador; los nombres de clase y la estructura HTML salen de la guía o del contexto .md adjunto (mkclinico-ai-context-lite.md o completo) — no intentes deducirlos únicamente del .min.css.
- Proyecto solo HTML/CSS: incluye <link rel="stylesheet" href="https://cdnmk3.masterkey.cl/mkclinico-ui.min.css"> y adjunta el contexto .md a la IA; usa markup documentado, sin imports @/app/... de la guía Next.js.
- Monorepo de la guía Next.js: no añadas el link; los estilos ya están cargados. Ahí sí puedes usar componentes React del repo (LayoutPantalla, InputRut, etc.) donde estén documentados.
- Entrega código listo para pegar y, al final, una línea con las clases/componentes DS que usaste.
- Si en el repo existe mkclinico-ai-context.md, úsalo como referencia ampliada; para una primera pasada corta, opcional mkclinico-ai-context-lite.md.
- Ejemplos de texto: dominio clínico/administrativo (pacientes, citas, fichas) cuando toque.

A PARTIR DE AHÍ
Sigue el pedido concreto que te hace la persona (pantalla, formulario, tabla, etc.).

4. Tu pedido concreto

En el mismo hilo, envía la TAREA (qué pantalla o componente quieres). Puedes copiar el ejemplo y editarlo.

Ver ejemplo de pedido (listado pacientes)

TAREA
Generar un panel con título "Pacientes" y un botón de acción principal "Nuevo paciente" (btn-primario btn-md). Debajo, una tabla del DS con columnas de ejemplo: Nombre, RUT, Estado; filas de muestra y estado vacío si aplica.

COMPLETA (sustituye por tu caso)
Título real, nombre del botón y columnas que necesitas: …

Más plantillas en Recursos para IA → atajos (tabla, formulario, modal). Guía + demo + snippet en Recetas por tarea.

5. Salida esperada

DS real: clases o componentes documentados (p. ej. btn btn-primario btn-md, panel-principal, LayoutPantalla en este repo).
Sin inventar: nada de utilidades visuales fuera del DS en entregables tipo HTML + CDN.
Cierre: una línea al final listando qué clases o componentes del DS usó la IA.
Textos: ejemplos coherentes con el dominio (pacientes, citas, fichas) si es pantalla de producto.

Recetas por tarea

Atajos para casos frecuentes: enlace al artículo de la guía, demo a pantalla completa cuando exista y un snippet mínimo listo para copiar. Complementa el Quickstart IA + persona y los prompts de Recursos para IA.

Pantalla con shell (layout)

Navbar lateral, barra superior y panel principal con título y botón de acción. En React, preferir el componente LayoutPantalla.

Layout de pantalla (ancla en la guía)Demo LayoutPantalla (nueva pestaña)

Snippet mínimo

import LayoutPantalla from "@/app/components/LayoutPantalla";

<LayoutPantalla
  titulo="Pacientes"
  navItems={menuItems}
  activeItemId="pacientes"
  botonAccion={{ label: "Nuevo paciente", onClick: () => {} }}
  usuario={{ nombre: "Usuario", opciones: [] }}
>
  {/* contenido del panel */}
</LayoutPantalla>

Listado con tabla y acciones

Tabla con columnas alineadas mediante --tabla-cols y celdas de acción (ver, editar, eliminar). La demo de layout muestra el shell; la estructura de tabla está en la guía.

Tablas (ancla en la guía)Demo con shell de pantalla (nueva pestaña)

Snippet mínimo

<div class="tabla-container">
  <div class="tabla" style="--tabla-cols: 40px 1fr 1fr 1fr 88px 88px 88px;">
    <div class="tabla-header">
      <div class="tabla-cell"></div>
      <div class="tabla-cell">Nombre</div>
      <div class="tabla-cell">RUT</div>
      <div class="tabla-cell">Estado</div>
      <div class="tabla-cell" style="justify-content:center">Ver</div>
      <div class="tabla-cell" style="justify-content:center">Editar</div>
      <div class="tabla-cell" style="justify-content:center">Eliminar</div>
    </div>
    <!-- tabla-row, tabla-cell… -->
  </div>
</div>

Formulario con campos y estados
Campos con etiqueta, estados de error y advertencia del DS. La demo a pantalla completa muestra una maqueta de ficha. Pantallas tipo armador (paleta + rejilla): guía Layout → constructor de formulario y demo /demo-constructor-formulario (React en este repo; no confundir con solo HTML+CDN sin contexto .md).
Input con título (ancla en la guía)Demo formulario (nueva pestaña)
Snippet mínimo
```
<div class="input-con-titulo-campo">
  <label class="input-con-titulo-label" for="campo-nombre">Nombre completo</label>
  <input id="campo-nombre" class="input-campo" type="text" placeholder="Ej. Ana Pérez" />
</div>

```

Modal de confirmación

Diálogo sin botón de cierre en X: título, mensaje y dos acciones (btn-modal-primario / btn-modal-secundario). No hay ruta demo dedicada; el artículo incluye vista previa y código.

Modal de confirmación (ancla en la guía)Sin demo en ruta aparte

Snippet mínimo

<div class="modal-overlay modal-overlay--open" role="dialog" aria-modal="true">
  <div class="modal-confirmacion">
    <h2 class="modal-titulo">¿Deseas continuar?</h2>
    <p class="modal-subtitulo">Esta acción no se puede deshacer.</p>
    <div class="modal-footer">
      <button type="button" class="btn-modal-primario">No, continuar</button>
      <button type="button" class="btn-modal-secundario">Sí, salir</button>
    </div>
  </div>
</div>

Lista con paginación
Navegación entre páginas después de un listado o tabla. En la guía Next.js se documenta el componente Paginacion.
Paginación (ancla en la guía)Sin demo en ruta aparte
Snippet mínimo
```
import Paginacion from "@/app/components/Paginacion";

<Paginacion paginaActual={1} totalPaginas={10} onCambioPagina={(p) => {}} />
```

Guía rápida de uso

Haz esto en orden y ya puedes construir con el DS.

¿Primera vez pidiendo una pantalla a una IA? Sigue el flujo guiado en Quickstart IA + persona (~5 minutos).

1. Carga el CSS

2. Copia una clase y úsala

Simplemente agrega las clases a tus elementos HTML. Ejemplo de un botón primario:

<button class="btn btn-primario btn-md">Mi Botón</button>

← Resultado

3. Navega y reutiliza

Usa el menú lateral para navegar por todas las categorías de componentes. Cada componente incluye:

Vista previa en vivo del componente
Clases CSS listas para copiar
Variantes de tamaño y estado

Para Desarrolladores

Información técnica y mejores prácticas

Sin conocimientos de CSS necesarios

Este Design System está diseñado para que cualquier desarrollador pueda construir interfaces consistentes sin necesidad de escribir CSS personalizado.

💡 Tip: Simplemente encuentra el componente que necesitas en el menú, copia la clase CSS, y aplícala a tu HTML. ¡Eso es todo!

Personalización con Variables CSS

Si necesitas personalizar los colores o estilos, puedes sobrescribir las variables CSS en tu propio stylesheet:

:root {
  --color-primario: #118b95;
  --color-texto: #565656;
  /* ... más variables */
}

Estructura de clases

Las clases siguen una nomenclatura consistente:

.btn-primario→ Componente base

.btn-sm→ Modificador de tamaño

.activo→ Modificador de estado

Compatibilidad

Compatible con todos los navegadores modernos:

Chrome 90+

Firefox 88+

Safari 14+

Edge 90+

Fundamentos (Tokens)

Paleta de Colores

Variables CSS del sistema de diseño. Haz clic en el color para copiar su valor hex; haz clic en el chip inferior para copiar var(--nombre) listo para usar en CSS.

✓ AAContraste ≥ 4.5:1 — texto normal sobre blanco△ AA+Contraste ≥ 3:1 — texto grande o UI sobre blanco✗No pasa WCAG AA — usar solo como fondo o decoración

Familia Primaria

Brand Colors

Primario#118b95

var(--color-primario)△ AA+ 4.1:1

Primario Hover#0c6f74

var(--color-primario-hover)✓ AA 5.9:1

Familia de Bordes

Borders

Borde Suave#dcf4f7

var(--color-borde-suave)✗ 1.1:1

Borde Claro#a4e6ea

var(--color-borde-claro)✗ 1.4:1

Borde#639297

var(--color-borde)△ AA+ 3.4:1

Familia de Superficies

Backgrounds

Fondo General#fdfdfd

var(--color-fondo-general)✗ 1.0:1

Fondo Tab#FBFFFF

var(--color-fondo-tab)✗ 1.0:1

Superficie Botón#f5feff

var(--color-superficie-boton)✗ 1.0:1

Superficie#e8fafc

var(--color-superficie)✗ 1.1:1

Fondo Ficha#E3FBFF

var(--color-fondo-ficha)✗ 1.1:1

Familia Amarilla

Accent

Acento amarillo y tinte suave para fondos. En exports Figma suelen aparecer como --amarillo y --Amarillo-16 (alias de --color-amarillo y --color-amarillo-suave). No sustituyen la advertencia naranja (--color-advertencia).

Amarillo#FFCD29

var(--color-amarillo)✗ 1.5:1

Amarillo — fondo suave#FFFDDF

var(--color-amarillo-suave)✗ 1.0:1

Familia de Alertas

Alerts

Éxito Suavergba(3, 152, 85, 0.16)

var(--color-exito-suave)rgba

Éxito#039855

var(--color-exito)△ AA+ 3.7:1

Advertencia Suavergba(234, 109, 0, 0.1)

var(--color-advertencia-suave)rgba

Advertencia#EA6D00

var(--color-advertencia)△ AA+ 3.1:1

Error Suavergba(217, 45, 32, 0.1)

var(--color-error-suave)rgba

Error#D92D20

var(--color-error)✓ AA 4.8:1

Estados de entidad

Status

Colores que indican el estado de un registro (activo / inactivo). Se usan en badges, switches y botones deshabilitados.

Estado Activo#43f80c

var(--color-estado-activo)✗ 1.4:1

Estado Inactivo#dddedd

var(--color-estado-inactivo)✗ 1.3:1

Escala de valoración — riesgo medio

Visualización

Lima/amarillo para filas de resumen con riesgo medio (card escala de valoración). Ver Visualización → Estados.

Riesgo medio — borde#D6E164

var(--color-riesgo-medio-borde)✗ 1.4:1

Riesgo medio — fondo#F9FDD0

var(--color-riesgo-medio-fondo)✗ 1.1:1

Colores de Texto

Typography

Texto Oscuro#333333

var(--color-texto-oscuro)✓ AA 12.6:1

Texto Regular#565656

var(--color-texto)✓ AA 7.3:1

Placeholder#b2b2b2

var(--color-placeholder)✗ 2.1:1

Texto Resaltado#0d5e65

var(--color-texto-resaltado)✓ AA 7.5:1

Uso en código

Tipografía

Sistema de texto con diferentes tamaños y estilos

Los tamaños del sistema usan rem en CSS para que escalen con las preferencias del usuario y mejoren responsividad y accesibilidad. Ver también la nota en Radio de borde sobre dónde usar px vs rem.

Título Principal

Título Principal (36px/Semibold)

Subtítulos

Subtítulo Medium (24px/Medium)

Subtítulo Semibold (20px/Semibold)

Subtítulo (20px/Medium)

Subtítulo Volver (20px/Medium/Underline)

Subtítulo Small Bold (18px/Semibold)

Subtítulo Small (18px/Medium)

Subtítulo Small Regular (18px/Regular)

Texto Body

Texto Body Medium (16px/Medium)

Texto Body (16px/Regular)

Texto Body Link (16px/Medium/Underline)

Texto Mínimo

Texto Mínimo Medium (14px/Medium)

Texto Mínimo (14px/Regular)

Texto Mínimo Link (14px/Medium/Underline)

Colores de Texto

Texto oscuro (#333333)

Texto con color estándar (#565656)

Texto placeholder (#b2b2b2)

Texto resaltado (#0d5e65)

Familia tipográfica

El sistema usa Inter como fuente principal, cargada desde Google Fonts vía next/font/google. La variable CSS --font-inter está disponible globalmente en todos los componentes.

app/layout.tsx — Cómo está configurada

HTML

import { Inter } from 'next/font/google';
const inter = Inter({
  variable: '--font-inter',
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
});
// Aplicar en el <body>:
<body className={inter.variable + " antialiased"}>

styles/componentes.css — Cómo se usa en CSS

HTML

/* Usar la variable en cualquier componente */
font-family: var(--font-inter), sans-serif;

¿Quieres cambiar la fuente?

En app/layout.tsx, reemplaza Inter por la nueva fuente de Google Fonts.
Mantén el mismo nombre de variable --font-inter para no tocar el CSS, o renómbrala y actualiza todas las ocurrencias en componentes.css.
Ajusta los weight que necesites según los pesos disponibles de la nueva fuente.

Radio de borde (Border radius)

Tokens de border-radius del sistema. Usar var(--radius-*) en CSS para mantener consistencia. La variable --radio-grande se mantiene por compatibilidad (14px).

Unidades (px vs rem)

En border-radius y otros valores puramente decorativos (bordes finos, sombras, iconos de tamaño fijo) no es crítico usar rem; px es aceptable y el sistema mezcla ambos. Donde sí se recomienda rem o medidas relativas es en tipografía, espaciado (padding, margin) y tamaños de contenedores que deban escalar con el usuario o con el viewport para una mejor responsividad y accesibilidad.

Variable CSS	Valor	Uso típico
	4px	Alertas, breadcrumb, etiquetas, botón eliminar
	6px	Inputs, cards pequeñas, botones sm, dropdown
	8px	Cards, botones, tabs, tabla, etiqueta removible
	10px	Botones primarios, inputs con título, contenedores
	12px	Panel principal
	0.875rem (14px)	Contenedores / áreas grandes (compatibilidad)
	1.25rem (20px)	Modal contenido, paneles
	2.5rem (40px)	Modal overlay, contenedores principales
	100px	Pills, badges redondeados, paginación
50%	50%	Círculos (avatar, indicadores)

Acciones (Buttons)

Botones Principales

Botones primarios, secundarios y terciarios para diferentes jerarquías de acciones

Botón Primario

Clase base: .btn-primario

Estados interactivos: Hover (fondo más oscuro), Active/Press (sombra interna que simula presión), Focus (borde de enfoque), Disabled (apariencia desactivada), Loading (spinner animado con cursor wait)

Botón Secundario

Clase base: .btn-secundario

Botón Terciario

Clase base: .btn-terciario

Botón estilo texto con subrayado permanente. Cambia de color en hover (primario-hover) y press (primario-oscuro). Usa .btn-terciario-sm para versión de 14px. Ideal para acciones terciarias o links dentro de la interfaz.

Variantes de Tamaño

Botones small (32px), de ancho completo y botones para modales

Cómo se construye un botón

Los botones combinan un tipo con un modificador de dimensión. El tipo define el color y estilo visual; el modificador define el tamaño. Nunca usar un modificador solo — siempre acompañado del tipo.

Modificador	Dimensión resultante	Ejemplo de uso
`btn-sm`	32px alto; ancho según texto (padding horizontal)	`btn-primario btn-sm`
`btn-md`	40px alto	`btn-primario btn-md`
`btn-full`	50px alto × 560px ancho fijo	`btn-primario btn-full`
`btn-icono-sm`	75×32px fijo (compacto; texto corto o solo ícono)	`btn-secundario btn-icono-sm`
sin modificador	btn-primario = 50px / btn-secundario = 40px	`btn-primario`

Botones Small (32px)

A la misma altura (32px) corresponden dos modificadores distintos: btn-sm cuando el botón debe crecer con el texto, y btn-icono-sm cuando necesitas un bloque fijo 75×32px (etiqueta muy corta o solo ícono). No son intercambiables al buscar la clase en el catálogo.

1. Ancho según texto — btn-sm

Tablas, formularios o acciones con etiqueta larga: el ancho sigue al contenido (mismo alto 32px).

Copiar modificador:

2. Tamaño fijo 75×32px — btn-icono-sm

Misma altura que btn-sm, pero caja de 75px de ancho (texto breve o botón solo con ícono en celdas o barras compactas).

Copiar modificador:

Resumen: .btn-sm + .btn-primario / .btn-secundario para altura 32px y ancho fluido; .btn-icono-sm para el compacto 75×32px.

Botones Medium (40px)

Usa .btn-md para botones de 40px de altura con border-radius de 10px. El botón secundario tiene 40px por defecto. Combínalo con .btn-primario para reducir su altura de 50px a 40px. El primario medium usa el mismo hover (--color-primario-hover) y active que el primario estándar.

Botones Full (560x50px)

Usa .btn-full para botones de ancho fijo de 560px (35rem) con 50px (3.125rem) de altura. Combínalo con .btn-primario.

Botones Especiales

Botones de filtro, retroceso y con íconos

Botón Filtro

Default

Activo

Usa .activo para estado seleccionado. El contador se agrega con .btn-filtro-count

Botón Volver

Normal

Placeholder (inactivo)

Botones de Ícono

Editar

Editar activo

Ver

Ver activo

Eliminar

Clase CSS	Para qué sirve
	Botón cuadrado 40×40px para íconos SVG (editar, ver, etc.)
	Estado resaltado — fondo suave teal con borde
	Variante destructiva — hover con borde y texto rojo

Todos los botones de ícono usan .btn-icono. Agrega .activo para el estado resaltado. Usa .btn-icono-eliminar para acciones destructivas.

Botones eliminar

Cuatro variantes para acciones de eliminar. Sin padding el ícono se ve más grande; con padding (btn-eliminar-suave) el ícono queda más pequeño dentro del recuadro. Todas usan íconos del catálogo (eliminar-md / eliminar-sm).

Cuadrado (sin padding)

Default

Hover

Cuadrado con padding

Default

Hover

Circular 32px

Default

Hover

Circular XS 20px

Default

Hover

Clase CSS	Para qué sirve
	Cuadrado sin padding 28×28 — ícono más grande, hover con borde rojo sutil
	Estado hover/activo del cuadrado sin padding
	Cuadrado con padding 40×40 — ícono eliminar-lg 16×17, borde rojo sutil y hover con borde #D92D20
	Estado hover/activo del cuadrado con padding
	Cuadrado — borde suave, hover con fondo rojo claro
	Estado hover/activo del cuadrado
	Circular 32px — mismo comportamiento que cuadrado
	Estado hover/activo del circular
	Circular XS 20px — para espacios reducidos
	Estado hover/activo del XS

Botón punteado

Acción principal en zonas vacías (ej. "Agregar formulario"). Borde punteado teal, fondo blanco, tipografía semibold 20px.

Default

Padding: 40×60px. Font-size: 20px semibold. El borde punteado es un SVG con stroke-dasharray="12 8" y stroke-linecap="round".

Botón pestaña formulario

Ítem seleccionable tipo tab para listas de formularios o secciones. Borde suave por defecto, borde teal más oscuro en hover.

Default

Hover

Ancho: 526px (min. 240px). Alto: 40px. Tipografía: 18px medium.

Botón ícono suave

Para acciones de archivo como descargar e importar. Borde suave por defecto, fondo teal claro en hover/activo.

Default

Activo

Default

Activo

Tamaño: 31×30px. El estado .activo también se activa con :hover.

Botón Agregar Pestaña

Default

Activo

Usa .activo para estado seleccionado

Botón Agregar

Ícono circular con símbolo +. Usar para acciones de creación rápida.

Botones para Modales

Botones específicos para ventanas modales y diálogos (280×50px, 24px medium)

Botón Opciones

Botón cuadrado con ícono de tres puntos verticales (⋮). Abre un menú de opciones contextuales. Disponible en tres tamaños.

Tamaños

50×50 (default)

32×32 (sm)

24×24 (xs)

Clase CSS	Para qué sirve
	Cuadrado 50×50px — tamaño por defecto
	Tamaño reducido 32×32px
	Tamaño compacto 24×24px

El estado hover reduce el borde a 1px y agrega sombra inset. Usa .btn-opciones--activo para activarlo programáticamente.

Entradas (Forms)

Cómo elegir el input correcto

Componente	Cuándo usarlo	Cómo pedirlo
`InputBasico`	Campo simple sin label, en línea o espacios reducidos	`<InputBasico />`
`Input`	Campo con validación y manejo de estados (warning/error) desde el componente	`<Input />`
`input-con-titulo`	Campo con etiqueta encima — la variante más común en formularios clínicos	`input-con-titulo`
`InputRut`	RUT chileno — formatea automáticamente (ej. 12.345.678-9)	`<InputRut />`
`InputTelefonoPrefijo`	Teléfono con selector de código de país	`<InputTelefonoPrefijo />`
`InputCalendario`	Selector de fecha con calendario desplegable	`<InputCalendario />`
`filtro-rango-fecha-*`	Filtro por rango (disparador + panel en la app; HTML/CSS en el DS)	`.filtro-rango-fecha-disparador`

Sistema de estados y tamaños (clases CSS)

Las clases de tamaño (input-campo--m, input-campo--l) se combinan con input-campo. En cambio, input-warning e input-error son clases independientes que reemplazan a input-campo, no se combinan con ella.

Clase	Qué hace	Ejemplo correcto
`input-campo`	Base — campo por defecto	`class="input-campo"`
`input-warning`	Borde naranja (advertencia)	`class="input-warning"`
`input-error`	Borde rojo (error)	`class="input-error"`
`input-campo--m`	Tamaño medium (288×40px)	`class="input-campo input-campo--m"`
`input-campo--l`	Tamaño large (384×40px)	`class="input-campo input-campo--l"`

Inputs Básicos

Campos de entrada estándar con variantes de tamaño: default (30px), cantidad (60×30), alto M/L (40px). InputBasico, <Input /> o clases CSS.

1. Componente InputBasico

Variantes: default (100% × 30px), cantidad (60×30px, texto centrado; suele usarse con type="number"), m (288×40px), l (384×40px). Warning/error con icono fuera a la derecha.

Default (100% × 30px)

Variante cantidad (60px × 30px)

Variante M (288px × 40px)

Variante M con warning

Variante M con error

Variante L (384px × 40px)

Variante L con warning

Variante L con error

Deshabilitado

Con disabled el contenedor usa .input-deshabilitado: borde --color-texto, fondo --color-estado-inactivo, texto y placeholder --color-placeholder, border-radius: 8px. Tipografía: default y cantidad 14px medium; M y L 18px medium (maqueta Figma).

Default deshabilitado

Cantidad deshabilitada

M y L deshabilitados

Warning deshabilitado (prioriza estilo inactivo)

Props (InputBasico)

Prop	Tipo	Descripción
`placeholder`	string	Texto cuando el campo está vacío
`variant`	"default" \| "cantidad" \| "m" \| "l"	Tamaño: 100%×30, cantidad 60×30 centrado, m 288×40, l 384×40 (no mezclar cantidad con m/l; con cantidad, status error se ignora)
`status`	"default" \| "warning" \| "error"	Estado visual (borde normal, naranja o rojo)
`value`	string	Valor controlado
`onChange`	(value: string) => void	Callback al cambiar el valor
`disabled`	boolean	Deshabilita el campo; añade `.input-deshabilitado` (borde `--color-texto`, fondo `--color-estado-inactivo`, texto/placeholder `--color-placeholder`; 14px en fila 30px, 18px en M/L). No expone `aria-invalid` aunque `status="error"`.
`type`	string	Tipo HTML del input (text, password, etc.)

2. Componente Input

Props (Input)

Prop	Tipo	Descripción
`placeholder`	string	Texto cuando el campo está vacío
`state`	"default" \| "warning" \| "error"	Estado visual (borde normal, naranja o rojo)
`onChange`	(value: string) => void	Callback al cambiar el valor
`disabled`	boolean	Deshabilita el campo
`value`	string	Valor controlado

3. Clases CSS

Default (30px altura, 100% ancho)

Placeholder

Variante cantidad (60px × 30px)

Variante M (288px × 40px)

Placeholder

Variante L (384px × 40px, texto 16px normal)

Placeholder

Input Warning

Input Error

Clase CSS	Para qué sirve
	Campo base — 30px altura, 100% ancho
	Cantidad — 60×30px, padding 0 12px, texto centrado, placeholder --color-placeholder; no combinar con --m/--l; sin estado error (advertencia sí con input-warning).
	Variante M — 288px × 40px
	Variante L — 384px × 40px, texto 16px
	Estado advertencia — borde naranja
	Estado error — borde rojo
	Deshabilitado — sobre input-campo / input-warning / input-error + input[disabled] dentro; borde --color-texto, fondo --color-estado-inactivo, texto/placeholder --color-placeholder, radio 8px. Tipografía 14px medium (default/cantidad) o 18px medium (M/L).

Combinar tipo base con modificadores de tamaño. InputBasico con disabled aplica .input-deshabilitado automáticamente; en HTML puro, clase en el contenedor + disabled en el input (o solo :has(.input-campo-input:disabled)).

Input con Título

Campo con etiqueta arriba. Orden por tamaño: 62px; 208×64; 288×64; 384×64. Deshabilitado al final (mismo cromado que InputBasico con .input-deshabilitado en el contenedor o disabled en el input).

Input con título (62px)

Default

Título sección

Input con título 208×64 (campo 192px)

Default

Subtitulo Medium 18

Input con título 288×64 (campo 288px)

Default

Subtitulo Medium 18

Input con título 384×64 (campo 384px)

Default

Subtitulo Medium 18

Deshabilitado

Contenedor .input-deshabilitado o disabled en el input; warning/error pasan al cromado inactivo. Campo 30px: 14px medium; campo 40px: 18px medium.

62px — default / warning + ícono

Título sección

208×64

Subtitulo Medium 18

288×64

Subtitulo Medium 18

384×64

Subtitulo Medium 18

Clase CSS	Para qué sirve
	Contenedor: título arriba y campo abajo. Altura 62px. El ancho lo define el padre.
	Texto que va encima del campo.
	Área donde el usuario escribe.
	Mismo campo con borde naranja.
	Mismo campo con borde rojo.
	Variante estrecha: 208px de ancho (campo 192px), altura 64px.
	Título de la variante 208px.
	Campo de texto de la variante 208px.
	Borde naranja.
	Borde rojo.
	Variante mediana: 288px de ancho, altura 64px.
	Título de la variante 288px.
	Campo de texto de la variante 288px.
	Borde naranja.
	Borde rojo.
	Variante más ancha: 384px de ancho, altura 64px. La clase usa «alto» = ancho del bloque.
	Título de la variante 384px.
	Campo de texto de la variante 384px.
	Borde naranja.
	Borde rojo.
	En el contenedor raíz (.input-con-titulo, .input-con-titulo-208, etc.) junto con disabled en el input; o solo disabled (aplica :has). Mismos tokens que inputs básicos.

Hay cuatro tamaños: estándar (62px alto), 208px ancho, 288px ancho y 384px ancho (clase .input-con-titulo-alto). En cada uno se usa el prefijo correspondiente y se añade -label, -campo y, si aplica, -campo-warning o -campo-error. Deshabilitado: clase input-deshabilitado en ese mismo contenedor raíz + disabled en el input (en 208/288/alto el input va dentro del -campo).

Input con Título y Botón Editar

Campo de entrada con etiqueta superior y botón de editar interno (altura total 62px). Deshabilitado: clase input-deshabilitado en el contenedor + disabled en el input (cromado alineado a inputs básicos; ícono editar atenuado).

Default

Título sección

Deshabilitado

Título sección

Clase CSS	Para qué sirve
	Contenedor principal — 62px, flex space-between, gap 20px
	Label 16px font-weight 500
	Campo de texto 30px altura
	Botón editar 40×40px, ícono 16×16px centrado
	Opcional en el contenedor input-con-titulo-editar + input disabled; ícono atenuado y sin pointer-events.

El campo usa justify-content: space-between con gap de 20px.

Input con Título Horizontal

Variante de input con el título al lado izquierdo en lugar de arriba. El layout horizontal usa flex con gap de 16px y el input tiene un ancho fijo de 340px.

Título sección

Clase CSS	Para qué sirve
	Contenedor — flex, gap 16px
	Label 16px font-weight 500
	Campo default — 340px × 30px, borde #639297
	Estado advertencia — borde naranja 1px
	Estado error — borde rojo 1px

Layout horizontal con flex, gap 16px. Input padding 6px 12px.

Título horizontal + cantidad (60×30)

Modificador input-titulo-horizontal--cantidad: el texto a la izquierda y el campo .input-campo--cantidad (en React, InputBasico variant="cantidad") justo después del título, con el mismo gap 16px que el input horizontal estándar (sin repartir el ancho al máximo). Altura de fila 30px. Útil para listas de ítems con cantidad.

Título

Clase CSS	Para qué sirve
	Modificador en el mismo contenedor que .input-titulo-horizontal: título y cantidad contiguos (gap 16px); label con ellipsis si el texto es largo
	Opcional: flex, align-items center, gap 8px, shrink 0 — cantidad + ícono de estado a la derecha

Input teléfono con prefijo de país

Campo de teléfono con selector de país (bandera + código + desplegable) a la izquierda y placeholder para el número.

Default (288px)

Variante L (384px, área número 288px)

Clase CSS	Para qué sirve
	Contenedor principal — 288px por defecto
	Bloque selector de país (bandera + código + flecha)
	Área bandera
	Código de país (+56, etc.)
	Ícono desplegable
	Contenedor del input de número
	Input de número
	Wrapper interno
	Lista desplegable de países
	Opción de país
	Variante ancha — 384px, área número 288px

Props: placeholder, onChange(value) (dialCode, number, full), variant ("default" | "l"). Componente funcional con desplegable de países (Chile, Argentina, México, etc.). Clases en styles/componentes.css y mkclinico-ui.css. Props: placeholder, onChange(value) (value.dialCode, value.number, value.full), variant ("default" 288px, "l" 384px con área número 288px).

Input RUT

Campo para RUT chileno con bloque a la izquierda (etiqueta RUT + flecha o selector RUT/PASS) y formato automático 00.000.000-0 cuando el tipo es RUT.

Default (288px)

RUT

Variante L (384px)

RUT

RUT o pasaporte (`permitePasaporte`)

Clase CSS	Para qué sirve
	Contenedor principal — 288px × 40px por defecto
	Bloque izquierdo 80px (etiqueta RUT + flecha)
	Texto etiqueta RUT
	Ícono flecha
	Campo de texto con formato 00.000.000-0
	Variante ancha — contenedor 384px
	Contenedor con selector RUT/PASS integrado (`permitePasaporte`)
	Prefijo con `<select>` nativo estilizado
	Select de tipo de documento (apariencia DS, flecha SVG)
	Valor de solo lectura; el selector sigue activo (`valorSoloLectura` + `permitePasaporte`)

Props: variant ("default" | "l"), permitePasaporte, valorSoloLectura, documentoTipo / onDocumentoTipoChange, onChange(valor, raw).

Input Calendario

Campo de fecha con icono de calendario a la izquierda. Usa input type="date" nativo.

Variante S (192px)

Default (288px)

Variante L (384px)

Clase CSS	Para qué sirve
	Contenedor principal — 288px × 40px por defecto
	Bloque izquierdo 56px con el ícono de calendario
	Área de texto de fecha (input type="date" nativo)
	Modificador pequeño — contenedor 192px
	Modificador grande — contenedor 384px, área fecha 320px

Filtro rango de fechas (disparador)

Patrón aparte de Input Calendario (una sola fecha nativa). Clic en el disparador (ícono o texto) abre el panel 442×290px (exterior; columnas 140+300); clic fuera o Esc lo cierra (solo en esta demo de la guía).

Demo: abrir y cerrar panel

Envuelve disparador + panel en .filtro-rango-fecha-ancla y posiciona el panel con .filtro-rango-fecha-panel-pos (absolute, margin-top: -2px; ancla inline-flex — borde superior continuo en acceso + principal; el disparador sin borde inferior al abrir (:has), como la maqueta de referencia).

Variantes del texto del disparador (cerrado)

Vacío (placeholder)

Una fecha seleccionada

Rango parcial (inicio + placeholder fin)

Clase CSS	Para qué sirve
	Envoltorio con position relative e inline-block: ancla el panel bajo el disparador (max-width 100%).
	Posición: absolute, right 0, top 100%, margin-top -2px, z-index 1060. Ancla: inline-flex columna (sin hueco bajo el disparador). Envoltorio panel sin border-top; columnas con border-top. :has quita border-bottom del disparador.
	Contenedor del trigger cerrado: inline-flex, 30px alto, borde --color-borde, radius-xs, min-width ~280px. Puede ser <button> (clic en ícono + texto a la vez).
	Rail 48px, fondo --color-superficie, separador 1px a la derecha; ícono calendario centrado.
	Área de texto: 16px regular --color-texto, liga off; ellipsis. Si el disparador es <button> padre, usar <span> con esta clase.
	Panel al abrir: 442×290px exterior (token), flex row, padding 0. Hijos: acceso 140px + principal 300px. Borde suave exterior, sombra contenedor.
	Columna Acceso rápido: 140px; flex columna; título + marco lista blanco; bordes 1px --color-borde (T continua con principal; :has en ancla).
	Título «Acceso rápido»: 14px medium --peso-medio, --color-primario (equiv. Figma Títulos-y-botones), var(--font-inter), liga 0.
	Caja blanca (--color-fondo-general) con borde --color-borde-suave y --radius-md; flex 1; overflow visible (sin scroll interno en el panel 442×290).
	Lista ul sin viñetas: columna, gap 2px; va dentro del marco de acceso.
	Botón opción: 14px regular --color-texto, var(--font-inter), liga 0; white-space nowrap (ej. «Últimos 7 días» / «Últimos 30 días» en una línea); padding 6×8; hover/activa como antes.
	Estado seleccionado (equivale a aria-current="true" en el botón).
	Columna derecha 300px: flex columna stretch, gap 10px; cabecera mes + marco calendario + pie Aplicar; border-left none.
	Fila flechas ‹ › y título mes centrado (flex space-between).
	Botón 24×24 aprox., teal, sin borde; hover fondo --color-superficie.
	Mes/año: 14px --peso-medio, --color-primario, liga 0; flex 1, texto centrado en la cabecera.
	Área rejilla: flex 1; sin borde lateral; líneas 277×1px --color-borde-claro arriba/abajo (::before/::after); token --filtro-rango-fecha-calendario-linea-ancho; semana + malla.
	Cabecera 7 columnas (LUN…DOM): grid 7×1; tipografía en .filtro-rango-fecha-calendario-semana-dia.
	Etiqueta día semana: 14px regular --color-texto-oscuro (equiv. Figma Negro), var(--font-inter), liga 0.
	Grid 7 columnas; column-gap 0; row-gap 0.125rem; align-items center; role="grid" en la app.
	Celda día base 14px --color-texto; --vacío / --fuera. Hover, focus-visible y .--activo: 20px alto, fondo --color-superficie, 3px radius, width 100% (ref. maqueta 108px). Rango en bloque: .filtro-rango-fecha-calendario-rango-track.
	155px ancho; padding-inline 0; alto calc(2px + fila-util); rejilla interna align-items stretch; align-self center en la malla; overflow hidden; tabular-nums.
	height 100% + aspect-ratio 1; first/last justify-self start/end; fondo --color-borde-suave (coincide con el arco del borde).
	Días entre extremos: flex 1, --color-texto, --peso-regular.
	Pie columna derecha: flex justify-end; botón Aplicar con .btn .btn-secundario .btn-sm + .filtro-rango-fecha-btn-aplicar.
	Modificador sobre secundario sm: 32px alto, padding 12×16, gap 12px, borde --color-borde, fondo --color-fondo-general, sombra teal 10% (maqueta).

Input con Búsqueda

Campo de búsqueda con ícono integrado

Campo con lupa (HTML + CSS del DS)

Misma lógica que el buscador inteligente: con texto aparece la X roja (--color-error) para borrar; vacío, la lupa a la derecha. En esta guía se usa el componente InputBusquedaIcono (clases del CDN). Variantes: size sm | md | ancho400 | lg | 50 | 60 (ancho400 = 400×40px ref., resto alturas con tope 300px).

Variante ancha (400px)

Clase CSS	Para qué sirve
	Contenedor flex del buscador con lupa (por defecto max 300×40 ref.; variantes altura -sm … -60; :focus-within teal)
	Suma max-width 25rem (400px); combinar con .input-busqueda-icono-md (o base) para 400×40 ref. En React: size="ancho400"
	Campo dentro del contenedor (sin borde; placeholder --color-placeholder; hereda tipografía del contenedor)
	Lupa a la derecha cuando el campo está vacío (p. ej. 16×16 vía CSS)
	Botón borrar cuando hay texto (X 12×12 fill --color-error); mismo criterio que .buscador-inteligente-limpiar

Buscador Inteligente

Misma caja visual que el campo con lupa (40px, texto 14px, lupa teal, X roja al escribir). Dropdown de resultados debajo. Ancho amplio: prop className="buscador-inteligente-container--ancho-400".

Variante ancha (400px)

Estado Warning

Clase CSS	Para qué sirve
	Envoltorio posicionado; max 300px (o --ancho-400 + lista al mismo ancho)
	Modificador: max-width 25rem (400px) en contenedor, campo y resultados
	Caja flex del campo (40px ref., padding horizontal 20px, lupa o limpiar)
	Input; hereda tipografía 14px del contenedor
	Botón X roja (--color-error) cuando hay texto
	Lista desplegable bajo el campo (abierto)

Zona de carga de archivos

Área clic y arrastrar para adjuntar archivos (no es variante de botón) y fila de previsualización del archivo ya cargado. Ícono dropzone: subir-archivo-nube; previsualización: archivo-hoja-calculo vía iconoDataUrl.

Default (maqueta ~460×40 px)

Haz clic o suelta los archivos aquí

Previsualización de archivo cargado

Fila ~280 px de ancho (responsive: max-width: 100%), fondo --color-superficie, nombre como enlace subrayado en teal. El tamaño del archivo usa 14 px (mínimo legible del DS; el mock en Figma proponía 13 px). Quitar archivo: .btn-eliminar-xs + eliminar.

Archivo cargado

800 KB

Clases CSS

Clase CSS	Para qué sirve
	Contenedor flex (~460×40, max-width 100%); borde dashed --color-borde; fondo --color-archivo-dropzone-fondo; texto placeholder 16px.
	Estado al arrastrar archivos sobre la zona: borde teal y fondo --color-superficie.
	Input file a pantalla completa dentro del label (opacidad 0) para mantener el clic accesible.
	Ícono nube 23×19; pointer-events none.
	Texto de ayuda; pointer-events none.
	Fila previsualización (~280px, max-width 100%); flex space-between; padding 10px 6px 10px 12px; fondo --color-superficie; radio --radius-xs.
	Grupo ícono + nombre + tamaño: flex, gap 8px, min-width 0 para ellipsis en el nombre.
	Ícono documento/rejilla 13×16 (catálogo archivo-hoja-calculo).
	Enlace o botón con apariencia de enlace: 14px medium, subrayado, color --color-primario; texto largo con ellipsis.
	Tamaño del archivo: 14px regular, --color-texto-oscuro, sin encoger (nowrap).

Input Editar con Ícono

Campo editable con ícono de lápiz. Tres tamaños: SM (32px), 40px y 50px.

SM (32px)

Texto de ejemplo

Default (40px)

Texto de ejemplo

Grande (50px)

Texto de ejemplo

Clase CSS	Para qué sirve
	Contenedor del campo editable (requiere modificador de tamaño)
	Elemento interno con el texto editable
	Ícono lápiz 16×16 — `iconoDataUrl('editar')` + img
	Tamaño SM — 32px de alto
	Tamaño default — 40px de alto
	Tamaño grande — 50px de alto

Controles de Formulario

Switches, Checkboxes y Radio Buttons

Switch

Switch (40px)

Switch SM (32px)

Switch Vista (tarjeta / lista)

Control para alternar entre vista de tarjetas y vista de lista/tabla. El botón activo muestra borde y sombra; el inactivo es transparente.

Tarjeta activa

Lista activa

Clase CSS	Para qué sirve
	Contenedor del toggle de vista (grupo de botones)
	Botón individual de vista (tarjeta o lista)
	Botón de vista activo — fondo teal y borde destacado

Item herramienta

Fila de lista arrastrable con handle y toggle. Estado activo con sombra teal y borde más prominente. Usar dentro de listas configurables donde el usuario puede reordenar y activar/desactivar herramientas o secciones.

Por defecto

Nombre herramienta

Activo / seleccionado

Nombre herramienta

Ancho: 100% (339px en Figma, pero se adapta al contenedor). Alto: 40px. El modificador .item-herramienta--activo aplica borde teal y sombra de selección.

Drag & Drop

Clases preparatorias para implementar reordenamiento con cualquier librería de drag & drop (dnd-kit, react-beautiful-dnd, etc.). El CSS maneja los estados visuales; la lógica de reorden queda en el JS.

Clase CSS	Para qué sirve
	Cursor grab — indica que el ítem es arrastrable
	Ítem original mientras se arrastra — opacidad 0.4
	Clon que sigue al cursor — sombra + rotación 2°
	Indicador de drop — línea teal en el borde superior
	Indicador de drop — línea teal en el borde inferior
	Aplicar al contenedor durante el drag — bloquea selección de texto

Selector de acciones rápidas

Control para agregar y gestionar atajos de acción. Tiene tres estados: vacío, con un ítem y con múltiples ítems (carrusel con flechas).

Vacío

Acciones rápidas

Con un ítem

Acciones rápidas

Carrusel (múltiples ítems)

Clase CSS	Para qué sirve
	Contenedor principal — 322px × 60px
	Texto "Acciones rápidas" cuando no hay ítems
	Botón + para agregar una nueva acción
	Ítem de acción individual con ícono
	Botón de eliminar posicionado sobre el ítem (usa btn-eliminar-xs)
	Botones de navegación anterior/siguiente cuando hay muchos ítems

Ancho fijo: 322px. Alto: 60px. El badge de eliminar usa .btn-eliminar-xs posicionado con .selector-acciones-item-badge.

Checkbox

Checkbox (20px)

Checkbox deshabilitado

Checkbox Small (16px)

Checkbox Small deshabilitado

Radio Button

RadioButton Small (16px)

RadioButton Small seleccionado

RadioButton Small deshabilitado

RadioButton (20px)

RadioButton deshabilitado

Icono

Card interactivo con checkbox interno - 50px de altura

Usa componente Checkbox interno. Clases: checkbox-interno vector-icon. Usa .activo para resaltar

Grupo con Checkbox

Grupo de opciones con título, checkboxes y celda eliminable. Incluye variante warning (borde naranja) y enlace opcional "Agregar opción".

Esto es un título

Opción 1

Opción 2

Opción 3

Opción 1

Clase CSS	Para qué sirve
	Contenedor principal del grupo (488px max, 20px padding)
	Título del grupo
	Fila que agrupa checkbox + celda
	Checkbox a la izquierda
	Estado marcado del checkbox
	Celda derecha con texto + botón eliminar (384px)
	Variante warning — borde outline naranja
	Ícono de advertencia fuera del input (SVG 23×20)
	Botón eliminar dentro de la celda
	Estado visible del botón (solo cuando fila está marcada)
	Contenedor del enlace 'Agregar opción'

Grupo con Radio

Grupo de opciones con título, radio buttons y celda eliminable. Incluye variante warning (borde naranja) y enlace opcional "Agregar opción".

Esto es un título

Opción 1

Opción 2

Opción 3

Opción 1

Clase CSS	Para qué sirve
	Contenedor principal del grupo (488px max, 20px padding)
	Título del grupo
	Fila que agrupa radio button + celda
	Radio button en estado no seleccionado
	Radio button en estado seleccionado
	Celda derecha con texto + botón eliminar (384px)
	Variante warning — borde outline naranja
	Ícono de advertencia fuera del input (SVG 23×20)
	Botón eliminar dentro de la celda
	Estado visible del botón (solo cuando fila está marcada)
	Contenedor del enlace 'Agregar opción' (alineado a la derecha)

Fila con etiqueta y opciones radio

Una sola fila: texto a la izquierda y dos o más radios con .control-label a la derecha. Ancho máximo de referencia 505px. En la maqueta, la fila 2 es el estado por defecto (borde suave); la fila 1 es cómo debe verse al hacer hover (borde --color-borde + sombra exterior --transparencia-foto). En producto solo hace falta :hover; aquí la primera fila usa .guia-fila-control-radio-preview-hover para fijar esa vista en la guía. Sin hover: foco por teclado o .fila-control-radio--resaltada pueden mostrar sombra interior teal.

1 — aspecto al hover (vista previa estática; en app: :hover)

1. Texto texto texto

Sí

No generar

2 — por defecto

2. Texto texto texto

Sí

No generar

Clase CSS	Para qué sirve
	Contenedor flex; max-width 505px; borde suave 1px; radius 8px; padding 10×12px; :hover → borde --color-borde + sombra exterior --transparencia-foto
	Segunda clase solo en la guía: congela el aspecto de :hover para capturas; en apps usar solo :hover
	Opcional: sombra interior + borde fuerte sin :hover (p. ej. fila activa en lista); con :hover gana la sombra exterior
	Texto izquierdo — 16px medium, color texto oscuro
	Grupo de opciones a la derecha (flex, gap 16px / 24px)

Fila control radio — bloque ancho (antecedentes)

Contenedor en columna (referencia 686px: width: 100% + max-width: 686px), padding 16px, gap 10px, border-radius 8px, para cabecera tipo «Quirúrgico» + contenido debajo. Reutiliza .fila-control-radio-etiqueta y .fila-control-radio-opciones dentro de .fila-control-radio-bloque-cabecera. Por defecto (sin :hover): borde 1px --color-borde-suave (#DCF4F7), fondo --color-fondo-general (#FDFDFD) — también con el bloque desplegado (--si-activo). Con «No refiere» activo, añade .fila-control-radio-bloque--no-refiere: en :hover borde 2px --color-borde y sombra --transparencia-foto. Sin --no-refiere (colapsado o con --si-activo), :hover = borde 1px --color-borde + misma sombra exterior. Con Sí y contenido visible, añade .fila-control-radio-bloque--si-activo en app (marca estado); la caja sigue el mismo ciclo reposo / hover.

1 — Por defecto (maqueta: sin hover ni clases guía)

Quirúrgico

SíNo refiere

2 — Vista fija: hover con «No refiere» (solo guía, guia-fila-control-radio-bloque-preview-hover-no)

Quirúrgico

SíNo refiere

3 — «Sí» activo (producto: fila-control-radio-bloque--si-activo; guía opcional: guia-fila-control-radio-bloque-preview-hover-si = misma apariencia)

Quirúrgico

SíNo refiere

Hernioplastía inguinal izquierdaInfancia

4 — Interactivo — con «Sí» se muestra el contenido y --si-activo; reposo = borde suave, :hover = borde + sombra (igual que colapsado). Con «No refiere» + --no-refiere, hover = 2px

Quirúrgico

Sí

No refiere

Clase CSS	Para qué sirve
	Default maqueta: flex columna; width 100% + max-width 686px; padding 16px; gap 10px; radius 8px (--radius-md); borde 1px --color-borde-suave; fondo --color-fondo-general
	Fila interna: etiqueta + radiogroup (space-between, ancho completo)
	Buscador bajo cabecera (Sí activo): 300×30px ref., max-width 100%; padding 0 20px; gap 10px; radius 6px (--radius-sm); borde 1px --color-borde; fondo --color-fondo-general
	Input dentro de .fila-control-radio-bloque-busqueda (14px medium, placeholder --color-placeholder)
	Lupa 17×17 en el buscador del bloque (SVG maqueta, fill/stroke #639297)
	Envuelve marca teal + recuadro; flex fila, gap 10px, max-width 652px (2+10+640 ref.)
	Línea teal FUERA del recuadro, a la izquierda: 2×48px, border-radius pill (--radius-full), --color-borde-claro (#A4E6EA, equiv. linea-divisoria)
	Recuadro de opción bajo el buscador: 640×46px ref., max-width 100%; padding 8px 12px; radius 4px (--radius-xs); borde 1px --color-borde; fondo --color-fondo-general
	Contenedor flex (texto + acciones) dentro del recuadro; space-between, gap 10px
	Fila flex, justify-content flex-start: segmentos + \| agrupados a la izquierda; flex 1 deja el aire entre el texto y el botón eliminar
	Segmento: flex 0 1 auto (ancho al contenido, no crece), ellipsis si falta espacio
	Separador \|: 14px regular, --color-placeholder (#B2B2B2), margin 0 10px (10px a izq. y der. del pipe)
	Con «No refiere» (u opción negativa): :hover → borde 2px --color-borde + sombra --transparencia-foto
	Con «Sí» y contenido visible: marca estado en app; caja = 1px suave en reposo y :hover 1px + sombra (igual que bloque sin desplegar)
	Opcional: sombra interior sin hover; no pisa previews guía hover-no / hover-si
	Solo guía: aspecto hover con --no-refiere
	Solo guía: congela :hover 1px + sombra (bloque sin --no-refiere; usar con --si-activo si es desplegado)

Dropdown Multi-select

Tres variantes por tipo, dos tamaños cada una (sm: 200px / md: 300px). El pie Agregar nuevo es opcional: usa showAddButton={false} cuando la lista esté cerrada y solo debas elegir entre opciones existentes; con showAddButton={true} (valor por defecto del componente) y onAdd cuando el flujo permita crear o añadir ítems.

Con checkboxes y pie «Agregar nuevo»

sm — 200px

md — 300px

lg — 400px

Con checkboxes, sin botón agregar (lista cerrada)

Misma interacción multi-select; el panel termina en la última fila (sin .dropdown-footer).

sm — 200px

md — 300px

lg — 400px

Sin checkboxes

sm — 200px

md — 300px

lg — 400px

Con buscador

sm — 200px

md — 300px

lg — 400px

Clase CSS	Para qué sirve
	Contenedor base — 200px por defecto (variante sm)
	Tamaño medium — 300px de ancho
	Tamaño large — 400px de ancho
	Botón que abre/cierra la lista
	Panel desplegable con las opciones
	Fila de opción individual dentro de la lista
	Pie de lista — enlace 'Agregar nuevo'
	Campo de búsqueda interno (variante con buscador)

Props React: size ("sm" | "md" | "lg"), showCheckboxes, showSearch, showAddButton, onChange, onAdd.

Dropdown con título

Variante del dropdown de 62px con label superior, siguiendo el patrón de input-con-titulo. Se activa pasando la prop title al componente Dropdown.

Default

Warning

Clase CSS	Para qué sirve
	Contenedor con label superior (62px de alto total)
	Label superior del dropdown
	Variante con borde/estado advertencia

Dropdown sin título

Mismos estilos que el dropdown con título pero sin label superior. Se activa con la prop sinTitulo.

Clase CSS	Para qué sirve
	Dropdown sin label superior (mismo ancho que con título)

Dropdown editable (sin título)

Igual a la variante con título pero sin label superior. Se activa pasando onDelete sin la prop title. Usa sinTitulo para la clase dropdown--sin-titulo. Por defecto el ícono por fila es la papelera (itemAccionIcono="eliminar"); con itemAccionIcono="editar" se muestra el lápiz.

Clase CSS	Para qué sirve
	Contenedor base
	Con onDelete: acción por fila + pie «Agregar»
	Sin label superior (prop sinTitulo)
	Papelera roja — default del Dropdown si no pasas itemAccionIcono

DropdownListadoPanel — listado en panel o card

Por defecto aplica sinTitulo, ancho y itemAccionIcono="editar". El lápiz por fila solo se muestra al pasar el cursor por la opción (o con foco de teclado en la fila o en el botón). La callback sigue siendo onDelete. Ver también Feedback → Card de herramienta desplegable.

Clase CSS	Para qué sirve
	Envoltorio del componente (estilos de fila solo aquí)
	Maqueta ancha colapsada — default de DropdownListadoPanel
	Lápiz por fila — visible solo en hover/foco de fila (solo bajo .dropdown-listado-panel)

Dropdown con título — opciones añadidas

Variante editable: cada opción lleva a la derecha el lápiz compacto (itemAccionIcono="editar"); con itemAccionIcono="eliminar" se muestra la papelera. Al pie aparece "Agregar opción". Se activa con onDelete y showAddButton.

Clase CSS	Para qué sirve
	Contenedor con label superior
	Botón por ítem si hay onDelete (siempre visible)
	Lápiz 12×12 teal — itemAccionIcono="editar" (esta demo)
	Papelera roja — itemAccionIcono="eliminar" (default del Dropdown compacto sin prop)

Input de Código de Verificación

Celda de un solo dígito para ingresar códigos OTP o de verificación. Se usan en fila, una celda por dígito.

Default (sin foco)

Activo / con foco

Clase CSS	Para qué sirve
	Celda de un dígito — cuadrado, borde, centrado
	Estado con foco — borde/sombra resaltada

Íconos SVG

Catálogo de íconos

Haz clic en cualquier parte de la tarjeta del ícono para copiar su código SVG al portapapeles.

Navegación (menú)6 íconos

Cerrar / Cancelar5 íconos

CRUD (Crear, Editar, Eliminar)13 íconos

Estado / Feedback7 íconos

Dirección / Flechas8 íconos

Vista / Búsqueda8 íconos

Archivo / Datos7 íconos

Usuario2 íconos

Controles12 íconos

Elementos visuales CSS

No son SVG — se construyen con HTML + CSS del design system.

n°

N° de paso40 × 40 · CSS

Visualización (Data Display)

Estados

Indicadores de estado: .estado-activo, .estado-inactivo, .badge-activo, .badge-inactivo, .badge-advertencia, .etiqueta-datos, .etiqueta-datos-default

Estados con punto indicador

Estado Activo

Estado Inactivo

Badges de estado

Activo

Inactivo

Pendiente

Etiquetas de datos

Etiquetas de filtro. La clase base etiqueta-datos es el estado por defecto. Agregar etiqueta-datos--activo para el estado seleccionado.

Por defectoEtiqueta000

ActivoEtiqueta000

Etiqueta removible

Chip con fondo azul claro e ícono de cerrar. Usar para mostrar filtros o selecciones activas que el usuario puede eliminar.

DefaultEtiqueta

DeshabilitadaEtiqueta

Card resumen de paciente

Card compacta con nombre, etiqueta de habitación, datos clave y chevron para expandir contenido adicional. Usar el componente React CardPacienteResumen para mantener la lógica de expansión.

Nombre Apellido ApellidoHAB103A

Edad26|Admisión/Cargo caja18135|PrevisiónFonasa

Card resumen de paciente — vertical

Mismos estilos que la variante horizontal pero con datos apilados verticalmente. Usar layout="vertical" en el componente. Para el nombre en dos líneas, incluir \n en la cadena de la prop nombre.

Nombre Nombre Apellido ApellidoHAB103A

Edad26Admisión/Cargo caja18135PrevisiónFonasa

Card escala de valoración (cabecera + contenedor)

Resumen de escalas o riesgos: barra con título y acciones, y cuerpo con filas (ej. variante éxito / bajo riesgo con borde y fondo --color-exito). Estilos en styles/partials/10-contenedores.css. Cada fila es un grid tres columnas (min(100%, 9.5rem) · 1fr · auto): columna de nombre de ancho fijo (token --escala-valoracion-etiqueta-ancho), riesgo al inicio de la columna central (misma X en todas las filas), puntuación a la derecha. Encerrar cabecera y cuerpo en .escala-valoracion-card (sin gap entre hermanos) para que no aparezca una franja entre la barra y el cuerpo. Modificadores de color de fila: .escala-valoracion-fila--exito (éxito / bajo riesgo), .escala-valoracion-fila--advertencia (riesgo alto), .escala-valoracion-fila--error (muy alto riesgo; borde --color-error), .escala-valoracion-fila--riesgo-medio (riesgo medio; --color-riesgo-medio-borde, --color-riesgo-medio-fondo).

Escala de valoración

BRADEN

Bajo riesgo15

J.H Downtown

Riesgo alto9

E.T.E

Muy alto riesgo11

Cudyr

Riesgo medio11

Clase CSS	Para qué sirve
	Envoltorio de la card — flex columna, gap 0, max 460px; envuelve cabecera + contenedor sin separación entre ambos
	Barra superior — flex flex-start, align-items center; acciones margin-left auto; padding 6 vert. / 16 izq. / 20 der. (fila más baja que 10+40+10 con btn global); width min(100%,460px); bordes sup/L/R 2px --color-borde-suave; fondo --color-superficie; radio sup. --radius-md
	Título — 16px medium, line-height 1.2, flex + align-items center, --color-texto-resaltado, font-feature-settings liga off
	Zona de íconos — inline-flex, gap 6px; .btn-icono compacto 32×32, padding 4px, radio --radius-sm; hover sin borde/fondo (solo opacidad img/svg)
	Cuerpo — flex columna, gap 8px, padding 16px, min-height 200px, fondo --color-fondo-general, bordes L/R/B 2px --color-borde-suave, radio inf. 8px
	Fila — grid 3 cols min(100%, --escala-valoracion-etiqueta-ancho) \| 1fr \| auto; column-gap --escala-valoracion-fila-gap-tras-riesgo; misma X de inicio del riesgo entre filas
	Columna izquierda — solo el nombre (.escala-valoracion-fila-etiqueta); ancho del grid; width 100% para ellipsis
	Variante bajo riesgo / éxito — radio --radius-xs, borde 1px --color-exito, fondo --color-exito-suave
	Variante riesgo alto / advertencia — misma estructura que --exito; radio --radius-xs, borde 1px --color-advertencia (#EA6D00), fondo --color-advertencia-suave
	Variante muy alto riesgo / error — misma estructura; radio --radius-xs, borde 1px --color-error (#D92D20), fondo rgba(217,45,32,0.16) equiv. Figma Error-16
	Variante riesgo medio — radio --radius-xs, borde 1px --color-riesgo-medio-borde (#D6E164), fondo --color-riesgo-medio-fondo (#F9FDD0)
	Nombre de la escala — 14px medium, --color-texto-oscuro, ellipsis si supera la columna (--escala-valoracion-etiqueta-ancho en :root); gap 10px (ícono + texto)
	Nivel de riesgo — columna central 1fr; 14px regular, --color-texto, alineado al inicio (text-align left) para alinear entre filas
	Puntuación — tercera columna; 14px medium, --color-texto, text-align right

Etiqueta de Habitación

HAB103A

Ejemplos de uso:

•HAB 103A
•BOX 15

Tablas

Componentes de tabla modulares para visualización de datos estructurados

La tabla es CSS-first

Todo el estilo visual está en mkclinico-ui.css. Para replicarla solo se necesita HTML + las clases del DS - no hace falta ningún framework ni componente React. El único comportamiento que requiere JavaScript es el despliegue/colapso de filas hijas.

Componentes React disponibles

Para proyectos Next.js/React, el repositorio incluye envoltorios en app/components/tabla/: TablaContainer, TablaHeader, TablaRow, TablaRowChild y TablaActions. Generan la misma estructura HTML y clases que se muestran en esta sección.

Clase CSS	Para qué sirve
	Envoltorio exterior - fondo teal claro, border-radius 20px, padding 12x16px y scroll horizontal; el padding evita que sombras/bordes de filas se recorten. Siempre obligatorio.
	Grid flex-column. Define columnas con --tabla-cols. Acepta modificadores: tabla--con-switch / tabla--con-badge / tabla--acciones-menu / tabla--filas-ordenables / tabla--solo-texto / tabla--compacta-codigo / tabla--compacta-linea / tabla--diagnostico-checks / tabla--diagnostico-lista / tabla--diagnostico-lista-examenes (listados en panel inferior; patrón visual aparte de la tabla tarjeta estándar).
	Fila de encabezado. Hereda el grid de .tabla. La primera celda va vacía (columna del chevron).
	Fila de datos. Hereda el grid. Añadir .fila-activa para el estado expandido.
	Celda individual (div o button). Una por cada columna definida en --tabla-cols.
	Filas hijas tras fila-activa - sin borde superior; padding vertical compacto.
	Fila hija individual. Usa --tabla-cols-hijo (mismo grid sin columna del chevron).

Variante con switch

Columna 1

Columna 2

Columna 3

Ver

Editar

Estado

Eliminar

Título columna 1

Esto es un nombre usuario 2

00/00/0000

Título columna 1

Esto es un nombre usuario 2

00/00/0000

Título columna 1

Esto es un nombre usuario 2

00/00/0000

Título columna 1

Esto es un nombre usuario 2

00/00/0000

Haz clic en el chevron para desplegar/colapsar las filas hijas

Variante con badge

Columna 1

Columna 2

Columna 3

Ver

Estado

Editar

Eliminar

Título columna 1

Esto es un nombre usuario 2

00/00/0000

Inactivo

Título columna 1

Esto es un nombre usuario 2

00/00/0000

Activo

Título columna 1

Esto es un nombre usuario 2

00/00/0000

Inactivo

Título columna 1

Esto es un nombre usuario 2

00/00/0000

Activo

Haz clic en el chevron para desplegar/colapsar las filas hijas

Variante con menú de acciones (⋮)

Una sola columna de acciones al final: btn-opciones btn-opciones--sm con el ícono opciones-sm del catálogo. En la tabla usa la clase tabla--acciones-menu (chevron + tres columnas 1fr + 88px). Si necesitas más columnas de texto, define --tabla-cols y --tabla-cols-hijo en el mismo .tabla (en React: TablaContainer con variant="acciones-menu" y props cols / colsHijo).

El menú contextual (editar, eliminar, etc.) lo implementa la aplicación; el disparador queda accesible con aria-haspopup="menu".

Variante con filas reordenables (asa de arrastre)

Cada tabla-row es la tarjeta de la maqueta: 56px de alto (3.5rem, box-sizing: border-box), padding: 0 24px 0 0 (sin padding vertical en la fila para que el asa llegue arriba y abajo), border-radius: 8px, borde 1px --color-borde-suave y fondo --color-fondo-general. Las celdas de texto llevan 8px arriba/abajo; el layout por columnas es grid; celdas de texto: flex-direction: column, justify-content: center, gap: 10px. Área del asa: tabla-dnd-asa-area (alto completo de la fila; ancho fijo 29px border-box; línea vertical a la derecha; fondo --color-superficie-boton; esquinas izquierdas 8px) + tabla-asa-arrastre + ícono arrastrar. Tabla tabla--filas-ordenables: grid 29px 1fr 1fr 1fr 88px — títulos y celdas alineados a la izquierda bajo cada columna; cabecera 16px medium --color-texto-oscuro, font-feature-settings: "liga" 0, line-height: normal. Columna Estado en 1fr con badge al inicio y +12px entre «Tipo criterio» y «Estado». En el tabla-header, el tabla-dnd-asa-area vacío solo alinea columnas: transparente y sin borde. Resaltado de fila: tabla-row--orden-seleccionada (no fila-activa). El reordenamiento lo resuelve JavaScript (p. ej. dnd-kit).

Nombre de regla

Tipo criterio

Estado

Editar

Urgencias

Profesional, zona

Activo

Urgencias

Profesional, zona

Activo

Urgencias

Profesional, zona

Inactivo

Urgencias

Profesional, zona

Activo

Urgencias

Profesional, zona

Inactivo

Tabla solo texto (sin chevron ni acciones)

Para listados de solo lectura con varias columnas de texto (p. ej. historial de diagnósticos), usa la misma estructura tabla-container / tabla / tabla-header / tabla-row / tabla-cell. Define --tabla-cols con un ancho por cada celda (sin celda vacía inicial si no hay chevron). La clase tabla--solo-texto ajusta el hover para listados no clicables: cursor por defecto y sin subir el peso de la segunda columna (en la tabla estándar esa celda suele ser el título cuando existe chevron). En React: TablaContainer variant="solo-texto" + cols con la grilla deseada; el markup HTML sigue siendo la referencia si no usas TablaRow prefabricado.

Fecha

Diagnóstico

Tipo

Profesional

Especialidad

15/03/2026

Hipertensión arterial esencial

Principal

Dra. Ana Morales

Medicina interna

02/02/2026

Control postoperatorio

Seguimiento

Dr. Luis Paredes

Cirugía general

18/01/2026

Dermatitis de contacto

Principal

Dra. Carla Núñez

Dermatología

Clase CSS	Para qué sirve
	Fila de datos. Hereda el grid de .tabla. Estado hover automático por CSS.
	Estado expandido - borde teal en L invertida; borde inferior transparente encaja con .tabla-row-hijos (margin-top negativo cancela el gap del .tabla).
	Tras fila-activa: solo bordes izq/der/abajo (sin border-top, evita línea que cruza el marco). Padding 6px; overflow visible.
	Fila hija individual. Usa --tabla-cols-hijo (mismo grid sin la columna del chevron).
	Una columna de acción final 88px con menú ⋮ (.btn-opciones--sm + ícono opciones-sm). Por defecto tres columnas de datos 1fr; añade más 1fr y actualiza --tabla-cols / --tabla-cols-hijo (o cols / colsHijo en TablaContainer).
	Orden manual: grid 29px 1fr 1fr 1fr 88px; DnD + asa; cabecera y filas alineadas a la izquierda; Estado en 1fr; +12px entre Tipo criterio y Estado.
	Solo columnas de datos (sin chevron/acciones): definir --tabla-cols con un valor por celda. Hover con cursor por defecto y sin refuerzo de peso en la 2.ª columna.
	Panel de listados compactos: max-width 1020px, padding 10×12px, gap 12px, border 2px solid --color-borde-suave, border-radius 8px, fondo --color-fondo-general. Con tabla--compacta-codigo (variant compacta-codigo), tabla--compacta-linea (variant compacta-linea), tabla--diagnostico-checks (variant diagnostico-checks), tabla--diagnostico-lista (variant diagnostico-lista) o tabla--diagnostico-lista-examenes (variant diagnostico-lista-examenes).
	Listado jerárquico: fondo --color-fondo-general; cuerpo 16px (--tamano-h4) regular --color-texto, font-feature-settings 'liga' 0; cabecera --tamano-texto-min semibold teal; filas ~28px min.; hovers y guía anidada ver bloques siguientes.
	Mismo panel y tipografía que compacta-codigo, sin chevron: dos columnas de texto (minmax 0 1fr) + 40px acción. Hover fila --color-superficie + radio xs. Botón .tabla-accion-linea-boton en la última celda: ícono opcional al hover/foco (puntero fino).
	Botón ícono compacto (32×28) en tabla--compacta-linea y tabla--diagnostico-lista; color primario; hover --color-superficie-boton; foco visible teal; en puntero fino puede ir opacity 0 hasta hover/fila.
	Cabecera como listado jerárquico (títulos teal --peso-medio 500, --tamano-texto-min); dos columnas datos + GES/ENO/Quirúrgico centrados; grid minmax(0,1fr) minmax(0,1.5fr) + tres minmax(4.5rem,1fr); column-gap --tabla-diagnostico-col-gap (1rem); celdas min-width 0 para wrap; gap vertical 10px; inset 6px.
	Misma cabecera/cuerpo/hover/resaltado que tabla--diagnostico-checks; grid cuatro columnas: Fecha \| Diagnóstico \| Especialidad \| 40px acción (.tabla-accion-linea-boton). --tabla-cols por defecto minmax(0,6.5rem) minmax(0,1fr) minmax(0,1fr) 40px.
	Misma cabecera/cuerpo/hover/resaltado que tabla--diagnostico-lista, sin columna de acción; grid cuatro columnas texto: Fecha \| Tipos de exámenes-áreas \| Nombre del profesional \| Especialidad. --tabla-cols por defecto minmax(0,6.5rem) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr).
	SVG 16×16, un <path> (check en círculo); fill: var(--color-primario). Criterio negativo: .tabla-diagnostico-marca-guion.
	Guión horizontal 10×2px, --color-primario, centrado en celda criterio (sustituto visual del check).
	Modificador en tabla--diagnostico-checks, tabla--diagnostico-lista y tabla--diagnostico-lista-examenes: fondo --color-superficie-boton y radio xs (fila seleccionada / ejemplo).
	Subfila sin chevron: primera celda vacía (40px); Código/Nombre/Grupo alineados al grid como el padre (--tabla-compacta-row-inset-izq en cabecera y filas).
	Modificador de .tabla-row-hijos en tabla--compacta-codigo: grilla alineada al padre; interior .tabla-anidada-bajo-nombre con barra ::before (cápsula junto a nombres de examen).
	Lista (ul) columna Nombre (3 / 4); padding-left calc(1.823px + 9px); ::before cápsula; li: mismo cuerpo que filas (16px, --color-texto, liga off); li hover --color-superficie-boton.
	Bloque visual del asa (29px de ancho border-box; alto 100% de la fila; en ordenables solo borde derecho; fondo superficie-boton; radio 8px 0 0 8px).
	Botón dentro del área DnD; grab/grabbing; foco visible teal; aria-label por fila.
	Borde y sombra tipo hover persistente — foco o fila elegida antes de arrastrar. No usar para expandir hijos (eso es fila-activa).

Estructura HTML base (fila sin hijos)

Filas expandibles (con hijos)

Añadir fila-activa al tabla-row activa el estado expandido. El contenedor tabla-row-hijos debe colocarse inmediatamente después. Solo JavaScript necesita gestionar la clase y mostrar/ocultar el contenedor.

¿Cómo agregar o quitar columnas?

La tabla usa una variable CSS (--tabla-cols) que define cuántas columnas hay y qué tan anchas son. Para cambiar el número de columnas hay que hacer dos cosas al mismo tiempo: actualizar esa variable y agregar o quitar la celda correspondiente en el header y en cada fila.

Regla de oro: el número de valores en --tabla-cols debe ser exactamente igual al número de celdas (tabla-cell) en el encabezado y en cada fila. Si no coinciden, las columnas se desalinean.

Referencia de anchos por tipo de columna

40px- Chevron (siempre la primera, no tocar)

1fr- Columna de texto (se reparte el espacio)

88px- Ícono de acción (ver, editar, eliminar)

90px- Switch (toggle on/off)

128px- Badge de estado (ej. "Activo")

Pasos para agregar una columna nueva

1En el elemento .tabla, agrega el ancho de la nueva columna a --tabla-cols en la posición correcta.
2Agrega un <div class="tabla-cell"> en el tabla-header con el título de la columna.
3Agrega un <div class="tabla-cell"> en la misma posición en cada fila (tabla-row).

¿Vas a pedírselo a una IA? Usa este prompt

Copia el recuadro blanco y pégalo junto con el código de tu tabla. Recuerda:

--tabla-cols y el número de tabla-cell deben coincidir siempre.
El primer ancho (40px) es el chevron y no se cambia.
En MI PEDIDO CONCRETO indica cuántas columnas y qué tipo va cada una; en PEGAR AQUÍ MI TABLA ACTUAL pega tu código.

TAREA
Agregar una o varias columnas nuevas a la tabla MKClinico que te paso abajo (HTML o JSX con clases del DS). Si pido más de una, aplica el mismo procedimiento por cada columna (en el orden que indique).

REGLAS DEL DS
1) La grilla usa la variable --tabla-cols: hay un valor por cada tabla-cell; la cantidad debe coincidir en tabla-header y en cada tabla-row (y en filas hijas si existen).
2) Anchos típicos: 1fr (texto); 88px (acción con ícono); 90px (switch); 128px (badge de estado). Con chevron o fila expandible, el primer valor suele ser 40px (columna del chevron); con asa DnD, 29px (filas ordenables). En tablas solo texto sin chevron ni asa, no hace falta esa columna: cada valor en --tabla-cols corresponde a una columna de datos — el número debe coincidir con las celdas de cada fila.
3) Por cada columna nueva: añade un ancho en --tabla-cols en la posición acordada; una tabla-cell nueva en el header; la misma celda en cada fila de datos (y en filas hijas si aplica).
4) Varias columnas: actualiza --tabla-cols con todos los anchos nuevos de una vez (o en el orden lógico) y mantén siempre el mismo número de celdas en todas las filas.

MI PEDIDO CONCRETO (reemplaza desde aquí)
- Cantidad de columnas: … (número)
- Para cada una: tipo (texto 1fr / acción 88px / switch 90px / badge 128px), título en cabecera y posición (ej. "después de Fecha", "antes de Eliminar").
Ej. dos columnas: (1) texto "Diagnóstico" después de "Fecha"; (2) acción "Ver informe" antes de "Eliminar".

PEGAR AQUÍ MI TABLA ACTUAL
(Copia el bloque completo: .tabla-container → …)

Tras copiar el prompt, pega tu tabla en «PEGAR AQUÍ MI TABLA ACTUAL». Para varias columnas, escribe en MI PEDIDO CONCRETO el número y el detalle de cada una.

Ejemplo: agregar una 4ª columna de texto y un badge

HTML

<!-- 4 columnas de texto + ícono ver + badge + ícono editar + ícono eliminar -->
<div class="tabla" style="--tabla-cols: 40px 1fr 1fr 1fr 1fr 88px 128px 88px 88px;">
  <div class="tabla-header">
    <div class="tabla-cell"></div>           <!-- 40px  : chevron, siempre vacío -->
    <div class="tabla-cell">Nombre</div>     <!-- 1fr   : texto flexible -->
    <div class="tabla-cell">Apellido</div>   <!-- 1fr   : texto flexible -->
    <div class="tabla-cell">Fecha</div>      <!-- 1fr   : texto flexible -->
    <div class="tabla-cell">Diagnóstico</div><!-- 1fr   : texto flexible (nueva) -->
    <div class="tabla-cell">Ver</div>        <!-- 88px  : ícono acción -->
    <div class="tabla-cell">Estado</div>     <!-- 128px : badge -->
    <div class="tabla-cell">Editar</div>     <!-- 88px  : ícono acción -->
    <div class="tabla-cell">Eliminar</div>   <!-- 88px  : ícono acción -->
  </div>
  <div class="tabla-row">
    <div class="tabla-cell"><!-- chevron --></div>
    <div class="tabla-cell">Juan</div>
    <div class="tabla-cell">Pérez</div>
    <div class="tabla-cell">01/01/2025</div>
    <div class="tabla-cell">Hipertensión</div><!-- nueva celda -->
    <div class="tabla-cell"><!-- ícono ver --></div>
    <div class="tabla-cell"><!-- badge --></div>
    <div class="tabla-cell"><!-- ícono editar --></div>
    <div class="tabla-cell"><!-- ícono eliminar --></div>
  </div>
</div>

Listado jerárquico (código, nombre, grupo)

Patrón aparte de la tabla estándar del DS: el cuerpo del listado va sobre --color-fondo-general (#FDFDFD) para que resalten el hover teal y la guía de exámenes. La fila desplegada no lleva barra lateral; solo tabla-anidada-bajo-nombre añade la barra cápsula (::before) junto a los nombres de examen. Incluye filas padre con chevron, subfilas con tabla-row--compacta-hija (sin chevron; el código en la misma columna que el padre) y detalle bajo Nombre con tabla-row-hijos--detalle-nombre + tabla-anidada-bajo-nombre. Panel: tabla-container--panel-inferior (border: 2px solid var(--color-borde-suave), border-radius: 8px). React: TablaContainer variant="compacta-codigo".

Código

Nombre

Grupo

LAB-204

Perfil lipídico

Laboratorio

LAB-204-A

Hemograma completo

Laboratorio

IMG-118

Radiografía de tórax

Imagenología

Listado compacto (dos columnas y acción)

Mismo marco y criterio visual que el listado jerárquico (código, nombre, grupo) tabla-container--panel-inferior + tipografía de cabecera y cuerpo, pero sin chevron ni filas anidadas: dos columnas de texto y una tercera de 40px para una acción con ícono (p. ej. imprimir). El hover de fila usa --color-superficie como en el listado compacto. En escritorio con puntero fino, el ícono puede mostrarse solo al pasar el ratón o al tener foco en la fila; en táctil permanece visible. React: TablaContainer variant="compacta-linea". Grid por defecto: minmax(0, 1fr) minmax(0, 1fr) 40px (--tabla-cols).

Receta

Tipo

N° 64538

Medicamento

N° 406521

Magistral

N° 123543

Medicamento

Diagnóstico con marcas (panel inferior)

Mismo marco que el listado jerárquico: tabla-container--panel-inferior + tabla--diagnostico-checks. La cabecera sigue el mismo criterio que el listado jerárquico (sin banda de color, solo línea inferior y títulos teal a peso medio 500): Código, Nombre del diagnóstico, GES, ENO, Quirúrgico (las tres últimas centradas). Entre columnas usa column-gap (--tabla-diagnostico-col-gap, 1rem) y las celdas de texto llevan min-width: 0 para que el nombre haga salto de línea y se reduzca el scroll horizontal. En el cuerpo, cada criterio lleva el check 16×16 (tabla-diagnostico-check-marca) o un guión teal (tabla-diagnostico-marca-guion). Fila de ejemplo resaltada: tabla-row--diagnostico-resaltada. React: TablaContainer variant="diagnostico-checks".

Código

Nombre del diagnóstico

GES

ENO

Quirúrgico

Código diagnóstico

Diagnóstico

Código diagnóstico

Diagnóstico

Código diagnóstico

Diagnóstico

Código diagnóstico

Diagnóstico

Código diagnóstico

Diagnóstico

Código diagnóstico

Diagnóstico

Código diagnóstico

Diagnóstico

Código diagnóstico

Diagnóstico

Diagnóstico — listado con acción (panel inferior)

Mismo marco y criterios tipográficos que Diagnóstico con marcas: tabla-container--panel-inferior + tabla--diagnostico-lista. Cuatro columnas: Fecha, Diagnóstico, Especialidad y una columna fija de acción (40px) con .tabla-accion-linea-boton (ícono imprimir del catálogo). Hover de fila: fondo --color-superficie y border-radius: var(--radius-xs), igual que la variante con marcas. React: TablaContainer variant="diagnostico-lista".

Fecha

Diagnóstico

Especialidad

00/00/0000

Diagnóstico

Especialidad

00/00/0000

Diagnóstico

Especialidad

00/00/0000

Diagnóstico

Especialidad

Listado: fecha, tipos de examen, profesional y especialidad (panel inferior)

Misma base que Diagnóstico — listado con acción (panel, cabecera teal, hover de fila), pero sin columna de acción ni botón de imprimir. Cuatro columnas de texto: Fecha, Tipos de exámenes-áreas, Nombre del profesional y Especialidad. Clases: tabla-container--panel-inferior + tabla--diagnostico-lista-examenes. React: TablaContainer variant="diagnostico-lista-examenes".

Fecha

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

00/00/0000

Tipos de exámenes-áreas

Nombre del profesional

Especialidad

Estado vacío

Se usa cuando la tabla no tiene filas que mostrar. Reemplaza las filas dentro de tabla-container.

Columna 1

Columna 2

Columna 3

Ver

Editar

Estado

Eliminar

No hay datos para mostrar

Lista de Datos con Columnas

Componente de lista con filas de 30px y múltiples columnas de datos. Incluye headers posicionados en la parte superior.

Columna1

Columna2

Columna3

Texto largo columna 1

Texto

Texto Col3

Texto largo columna 1

Texto

Texto Col3

Texto largo columna 1

Texto

Texto Col3

Texto largo columna 1

Texto

Texto Col3

Clase CSS	Para qué sirve
	Contenedor principal — 169px alto; headers 18.34% y filas 81.66%
	Fila de encabezados posicionados en la parte superior
	Cada celda de encabezado — 16px, font-weight 500, #565656
	Contenedor de las filas de datos
	Fila de datos — 30px altura, borde #639297, padding 8px, gap 20px
	Base para celdas de columna (combinar con lista-datos-col-1/2/3)
	Columna 1 — ancho fijo 138px; texto 14px #b2b2b2
	Columna 2 — ancho fijo 40px
	Columna 3 — ancho fijo 64px
	Ícono de acción (ej. eliminar) — 10×11px, color #D92D20

Contenedor de 169px con headers (18.34%) y filas (81.66%). Cada fila tiene 30px de altura con borde #639297, padding 8px y gap 20px. Columnas con anchos fijos: col-1 (138px), col-2 (40px), col-3 (64px). El icono de eliminar tiene 10px × 11px en color rojo #D92D20. Los textos son de 14px en #b2b2b2 y los headers de 16px con font-weight 500 en #565656.

Fila de listado (texto + acción)

Fila compacta (alto mínimo ~38px, padding vertical 9px) con dos textos (inicio y centro) y zona opcional para ícono o botón a la derecha. Referencia de ancho 718px; en pantallas estrechas usa width: 100% con max-width: 44.875rem.

Min Regular 14Min Regular 14

Fila anterior: clase listado-fila--activa (borde 2px, mismo criterio que :hover / :focus-within).

Min Regular 14Min Regular 14

Clase CSS	Para qué sirve
	Contenedor — flex, space-between, min-height 38px, padding 9×16×9×8, radius 4px, borde 1px --color-borde, fondo --color-fondo-general, 14px regular, line-height 1.25, color --color-texto
	Opcional: color --color-placeholder (maqueta Figma; revisar contraste en producción)
	Borde 2px --color-borde (equiv. :hover y :focus-within en la fila)
	Segmento izquierdo — ellipsis si no cabe
	Segmento central — flex 1, texto centrado, ellipsis
	Columna derecha fija 24px — ícono o vacío para alinear filas
	Botón transparente para acción no destructiva (p. ej. imprimir); hover --color-superficie

Árbol (Tree)

Componente de estructura en árbol para zonas, categorías o jerarquías, con estilos del Design System.

Clases del DS: .tree, .tree-nodo, .tree-nodo-contenido, .tree-nodo-hijos, .input-campo, .btn-primario / .btn-secundario.

Corporativo Global

URGENCIAS

Foco, scroll y portabilidad: el componente React enfoca el primer nodo al montar. Para que un contenedor con scroll (por ejemplo un main con overflow-y-auto) no desplace la vista al cargar la página, el código usa focus({ preventScroll: true }) en el primer foco y scrollIntoView({ block: 'nearest' }) en los siguientes (navegación con teclado). Si copias el árbol a otra aplicación, conviene mantener ese comportamiento; el detalle está documentado en el JSDoc de app/components/Tree.tsx.

Clase CSS	Para qué sirve
	Contenedor principal del árbol; layout en columna con gap entre nodos.
	Elemento base de cada nodo; estructura, foco y hover del ítem.
	Variante visual para nodos raíz (estilo tipo pill del DS).
	Fila interna del nodo con texto, icono/chevron y acciones.
	Contenedor de descendientes con guía vertical e indentación.
	Botón para crear nodo raíz en la cabecera del árbol.

Paginación

Componente para navegar entre múltiples páginas de contenido

Playground Interactivo

Página actual: 1 de 10

Ejemplo: 3 páginas

Props:

paginaActual→ Página actual (1-indexed)

totalPaginas→ Total de páginas disponibles

onCambioPagina→ Callback cuando se selecciona una página

maxBotones→ Número máximo de botones a mostrar (default: 5)

Retroalimentación (Feedback)

Alertas

Componentes de alerta para mostrar mensajes de error, advertencia, éxito e información

Prompt corto para IA (alerta + toast)

Toast en app: .alerta-ancla-superior-derecha — fijo arriba a la derecha, ~20px del borde derecho y ~20px por debajo del header del DS (no pegada al header). Dentro del panel: solo .alerta. Rellena COMPLETA en el prompt; opcional contexto mkclinico-ai-context-lite.md.

Fuente: promptBaseIa.ts → PROMPT_IA_ALERTA_MENSAJE

TAREA
Barra de alerta MKClinico (.alerta + una variante). En producto suele ir como toast arriba a la derecha: envoltorio .alerta-ancla-superior-derecha (fijo, ~20px del borde derecho y ~20px bajo el header DS de 4.375rem).

VARIANTE (una)
.alerta--error | .alerta--advertencia | .alerta--exito | .alerta--info

TOAST (recomendado)
<div class="alerta-ancla-superior-derecha" role="status" aria-live="polite">
  <div class="alerta alerta--…">
    <div class="alerta-cuerpo"><span class="texto-body-md">…</span></div>
    <div class="alerta-acciones"><button type="button" class="alerta-boton-cerrar" aria-label="Cerrar">…</button></div>
  </div>
</div>

EN PANEL (sin toast): solo .alerta; queda a la derecha del contenedor (margin-inline-start: auto).

TOKENS
--alerta-ancho-max, --alerta-alto, --alerta-toast-separacion (20px), --alerta-toast-top (por defecto bajo header). Sin header en la vista: definir --alerta-toast-top: var(--alerta-toast-separacion).

REGLAS
Solo clases DS; .texto-body-md; cerrar type="button" + aria-label.

COMPLETA
variante | mensaje | toast sí/no | cerrar sí/no

Alerta de Error

Alerta de error

Ejemplos de mensajes:

•Los datos ingresados ya existen
•Las contraseñas no coinciden

Alerta de Advertencia

Alerta de advertencia

Ejemplos de mensajes:

•¡Faltan datos!

Alerta de Éxito

Alerta de éxito

Ejemplos de mensajes:

•Actualizado
•Guardado
•Enlace de verificación enviado a tu correo
•Archivo cargado exitosamente

Sombras de Alerta

Estilos de sombra para diferentes tipos de alertas

Sombra Error

Sombra Advertencia

Sombra Éxito

Sombra Info

Sombras de Contenedores

Sombras para paneles, menús y contenedores del sistema

Sombra Contenedor

Contenedores

Paneles y cards del sistema

Panel Principal

Contenedor principal con borde y sombra

Uso dentro del layout: panel-principal no define altura ni espaciado exterior. Siempre debe ir envuelto en area-principal, que aplica el espaciado responsivo del sistema (16px → 24px → 40px).

Contenedor de la vista previa

Contenedor con título teal y área de contenido blanca con sombra. Uso típico: preview de plantillas o formularios.

Esto es un titulo

Clase CSS	Para qué sirve
	Contenedor principal con título teal y área de contenido
	Barra de título en teal con texto centrado
	Área blanca con sombra para mostrar la preview

Vista previa de herramienta (cuestionario)

Patrón de secciones, preguntas y opciones con radio (y columna opcional Observación) para mostrar dentro de contenedor-vista-previa-contenido. No sustituye al contenedor shell: puedes seguir usando el marco vacío para otras previews.

Vista previa de la herramienta

Sección 1

Pregunta 1

Observación:

Pregunta 2

Observación:

Pregunta 3

Sección 2

Pregunta 1

Pregunta 2

Observación:

Clase CSS	Para qué sirve
	Raíz del patrón dentro del área blanca — padding 24px (1.5rem); flex columna; overflow y radio --radius-md
	Envuelve todas las .seccion (flex columna); sin bordes propios — L/R/B del bloque los pintan título y cuerpo + ::before entre secciones
	Agrupa una sección; :not(:first-of-type)::before — franja 2px con border-left/right 1px --color-borde y fondo --color-fondo-general (aire tras el cuerpo anterior, trazo lateral continuo)
	Cabecera — border 1px solid --color-borde (Stroke #639297); fondo --color-primario; 1.ª sección radio sup. 8px; 2.ª+ sin radio
	Contenedor de preguntas — border-radius 0 0 4px (--radius-xs); border-left/right/bottom 1px --color-borde; sin border-top; :not(:last-of-type) → border-radius 0; overflow hidden
	Cabecera de pregunta — fondo superficie; border-top 1px --color-borde-suave; margin-bottom 2px antes de .opciones; separación con la pregunta anterior: margin-bottom 2px de la última .fila de .opciones; texto --color-texto-resaltado, 14px, peso 500, line-height normal
	Lista de filas — cada .fila lleva margin-bottom 2px tras su border-bottom (aire antes del siguiente bloque)
	Fila 24px (content-box) + border-bottom 1px Stroke-inputs + margin-bottom 2px (no pega con la fila o sección de abajo)
	Modificador: opción + observación; separador vertical en observación (::before 24px alto, border-left 0.6px --color-borde). En columna apilada, border-bottom suave en main
	Celda texto + control — height 24px, padding 0×16px, line-height 1; `RadioButton` / `Checkbox` en `sm`; el borde inferior de la fila va a los 24px + margin 2px debajo
	Celda «Observación» — --color-texto-oscuro, 14px, 300, italic; con fila--con-observacion, ::before trazo izq. 24px × 0.6px --color-borde (Stroke)

Vista previa de herramienta (cuestionario con checkbox)

Misma estructura y clases CSS que la variante con radio: cada pregunta agrupa las opciones con CheckboxGroup (role="group" + aria-label) y Checkbox en size="sm". La tipografía de la etiqueta sigue aplicando .vista-previa-cuestionario .control-label span.text-sm.

Vista previa de la herramienta

Sección 1

Pregunta 1

Observación:

Pregunta 2

Observación:

Pregunta 3

Sección 2

Pregunta 1

Pregunta 2

Observación:

Clase CSS	Para qué sirve
	Exportado desde Checkbox.tsx — envoltorio con role="group" y aria-label (análogo a RadioGroup + radiogroup)
	Mismas clases vista-previa-cuestionario* que la demo con radio — marco, sección, cuerpo, filas, observación

Marco de configuración

Contenedor con borde punteado y título externo. Mismo aspecto que la referencia 1035×691px en pantallas amplias (max-width: 1035px); si el ancho disponible es menor, el marco se encoge al 100% del contenedor manteniendo la proporción del viewBox (borde teal, stroke-dasharray: 10 10, rx: 7.5).

Marco de configuración

Clase CSS	Para qué sirve
	Flex columna; width 100%; max-width 1035px (referencia maqueta); min-width 0 para flex
	Etiqueta de texto externo sobre el borde del marco
	SVG viewBox 0 0 1035 691, width 100% height auto — mismo trazo que antes, escala en móvil

Card de Herramienta

Clases: card-herramienta card-herramienta-contenido card-herramienta-titulo card-herramienta-descripcion card-herramienta-boton

Súper herramienta

Combina múltiples campos y módulos complejos en una sola pieza funcional.

Card de Herramienta (lg — altura mínima ~196px)

Variante de mayor altura. Agregar card-herramienta-lg junto a card-herramienta para min-height: 196px. Opcional card-herramienta--plana para mantener borde 1px sin sombra al hover (como maqueta). Cabecera: card-herramienta-cabecera, fila título + menú card-herramienta-cabecera-fila-titulo, card-herramienta-menu, card-herramienta-menu--abierto, card-herramienta-menu-caja, disparador btn-opciones btn-opciones--sm (borde 1.5px en contexto card), card-herramienta-menu-panel, ítems card-herramienta-menu-item / card-herramienta-menu-item--peligro. Cuerpo: textarea.input-campo.card-herramienta-textarea. Ícono ⋮: opciones / iconoDataUrl('opciones').

Cuadro de texto

Título

Card de Herramienta Editable

Variante editable: agregar card-herramienta-editable junto a card-herramienta y, para la misma referencia que «Cuadro de texto» (ancho 530px, padding 16px 24px, altura mínima ~196px), card-herramienta-lg. Cabecera como la card «Cuadro de texto»: card-herramienta-cabecera, card-herramienta-cabecera-fila-titulo, menú ⋮ (card-herramienta-menu, btn-opciones btn-opciones--sm, iconoDataUrl('opciones-sm')); la descripción va debajo del título dentro de la cabecera. Opcional card-herramienta--plana. La clase card-herramienta-editable-acciones sigue en el DS por si se documenta el patrón anterior (editar / eliminar en fila).

Titulo de la herramienta

Descripción de la herramienta que le asignó el usuario

Card de Herramienta Radio

Variante con selección única. Combinar card-herramienta + card-herramienta-lg + card-herramienta-radio.

Selección única

Selecciona una opción

Card de Herramienta Checkbox

Variante con selección múltiple. Combinar card-herramienta + card-herramienta-lg + card-herramienta-checkbox.

Selección múltiple

Selecciona una o más opciones

Card de Herramienta Desplegable

Variante con listado desplegable en panel. Usar el componente DropdownListadoPanel (distinto del Dropdown compacto de formularios). Combinar card-herramienta + card-herramienta-lg + card-herramienta-dropdown. La lista se despliega dentro del flujo de la card.

Card de Persona

Clases: card-persona card-persona-avatar card-persona-info card-persona-nombre card-persona-estado card-persona-estado-indicador

Nombre
Apellido Apellido

Activo

Divisor

Líneas divisoras para separar contenido

Utilidades

Clases auxiliares para funcionalidades comunes

Scrollbar Personalizado

Contenido con scroll personalizado

Línea 2

Línea 3

Línea 4

Línea 5

Línea 6

Línea 7

Línea 8

Ocultar Scrollbar

Contenido con scroll oculto

Línea 2

Línea 3

Línea 4

Línea 5

Línea 6

Línea 7

Navegación

Navbar Vertical

Menú de navegación lateral con estado compacto y extendido al hacer hover

Demo Interactiva

Pasa el mouse sobre el navbar para ver la expansión. Click en items con submenú para expandir/colapsar.

Uso Básico

Props

Prop	Tipo	Descripción
`items`	NavItem[]	Array de items del menú
`activeItemId`	string?	ID del item activo
`activeSubItemId`	string?	ID del subitem activo
`onItemClick`	(itemId: string) => void	Callback al hacer click en item
`onSubItemClick`	(itemId, subItemId) => void	Callback al hacer click en subitem

Iconos Incluidos

IconoInicio

IconoUsuarios

IconoConfiguracion

Clases CSS

Clase CSS	Para qué sirve
	Contenedor del menú lateral (flex column)
	Ítem de navegación — incluye ícono y texto
	Estado activo — fondo teal claro, borde izquierdo primario
	Contenedor del ícono SVG del ítem
	Texto del ítem — visible en estado extendido

Header de Navegación

Barra superior con campo de búsqueda y menú desplegable de usuario

Vista Previa

LROSSIG

Clases CSS

Clase CSS	Para qué sirve
	Contenedor principal del header (height: 4.375rem); position relative — contexto del menú usuario (right: 9px, top bajo la barra)
	Campo de búsqueda con foco
	Input de texto del buscador
	Ícono de búsqueda (1rem × 1rem)
	Contenedor del menú de usuario (añadir .activo cuando dropdown esté abierto); sin position — el menú se ancla a .header-navegacion
	Wrapper del avatar + dropdown (DOM)
	Avatar SVG circular (2.5rem) con estados visual activo/inactivo
	Contenedor del nombre de usuario
	Texto del nombre (una línea; ellipsis solo si falta espacio) y cambio de color en estado activo
	Menú desplegable (usar con clase .activo); absolute respecto a .header-navegacion
	Item del menú desplegable con hover

Características

Header de altura fija (4.375rem / 70px) con diseño responsivo
Campo de búsqueda con efecto focus (borde y sombra primarios)
Menú de usuario con avatar SVG circular que incluye icono de usuario y cambia visualmente al activarse
Avatar con dos estados: inactivo (círculo #F5FEFF/#DCF4F7, icono #118B95) y activo (círculo #E8FAFC/#0D5E65, icono #0D5E65)
Nombre de usuario cambia de color primario a primario oscuro cuando el dropdown está activo
Dropdown posicionado absolutamente con animación de entrada
Items del dropdown con efectos hover (fondo superficie, color oscuro y sombra)
Transiciones suaves en todos los estados (150ms)
Nombre en una línea con el ancho disponible; ellipsis solo en pantallas muy estrechas
Compatible con imágenes de avatar o placeholders de color

Principios de diseño

Altura del header

4.375rem (70px) proporciona espacio cómodo para elementos sin ocupar demasiado espacio vertical en aplicaciones médicas donde el contenido principal es prioritario.

Campo de búsqueda interactivo

El buscador muestra feedback visual inmediato al recibir foco con borde color primario y sombra sutil (box-shadow con 3px de difusión). Ancho fijo de 19.125rem (306px) optimizado para búsquedas de módulos.

Menú de usuario

Avatar circular de 2.5rem (40px) proporciona buena visibilidad sin ser intrusivo. Los cambios visuales del avatar y nombre de usuario están coordinados: ambos cambian a color primario oscuro cuando el dropdown se activa, creando una retroalimentación visual consistente del estado activo.

Animación del dropdown

El menú desplegable usa transform, opacity y visibility para crear una animación suave de entrada/salida. Border solo en 3 lados (right, bottom, left) y border-radius solo inferior para crear efecto de continuidad con el header. Los items muestran feedback visual consistente en hover con fondo superficie, color primario oscuro y sombra sutil.

Casos de uso recomendados

Barra superior de aplicaciones médicas tipo SPA
Navegación principal con búsqueda rápida de módulos/secciones
Perfil de usuario con opciones de configuración y cierre de sesión
Compatible con sistemas de autenticación (mostrar nombre de clínica/usuario)

Variables CSS utilizadas

--color-fondo-general

Fondo del header

--color-superficie

Border bottom del header y hover

--color-borde-suave

Borde del buscador

--color-borde

Borde del dropdown

--color-fondo-general

Fondo del buscador y dropdown

--color-primario

Color del nombre de usuario

--color-primario-oscuro

Color del texto en item seleccionado y hover

--color-texto

Color del texto e íconos

--color-placeholder

Placeholder del input

--color-fondo-general

Fondo items normales del dropdown

Navegación herramientas

Lista de navegación vertical con scroll, íconos drag, estados activos y efectos hover

Vista Previa

Normal

Titulo herramienta

Con advertencia

Titulo herramienta

Clases CSS

Clase CSS	Para qué sirve
	Contenedor con scroll (max-height: 25rem) y scrollbar personalizada
	Contenedor con scroll y borde de advertencia (naranja #EA6D00)
	Contenedor interno para los ítems (flex column con gap)
	Ítem de navegación en estado normal
	Ítem de navegación en estado activo (con sombras internas)
	Ícono dentro del ítem (10px de ancho)
	Texto del ítem de navegación
	Ítem arrastrable — cursor: grab
	Estado mientras el ítem se arrastra (opacidad reducida)
	Preview del ítem que sigue al cursor durante drag
	Indicador visual de zona de drop válida

Código HTML

Características

Scroll automático cuando el contenido supera los 25rem (400px) de altura
Scrollbar personalizada (8px ancho) con colores del design system
Estado activo con sombras internas y fondo destacado
Efecto hover con transición suave de fondo
Íconos drag indicator de 10px de ancho
Espaciado consistente de 4px entre items (gap optimizado para scroll)
Usa variables CSS del design system (colores, fondos, sombras)
Bordes redondeados (8px contenedor principal, 6px item activo, 8px items normales)
Variante con borde de advertencia (naranja #EA6D00) para indicar estados de alerta o acciones requeridas
Incluye clases preparatorias para drag & drop (draggable, dragging, drag-preview, drop-target)

Principios de diseño

Altura del scroll

Dimensionada para mostrar 5-6 items sin scroll, pero limitada para no dominar la pantalla (actualmente 25rem / 400px, ajustable según necesidades del contexto). El scroll se activa automáticamente cuando el contenido supera el viewport.

Scrollbar personalizada

Diseño delgado y discreto (6px) con bordes completamente redondeados (100px). Los colores se integran con el sistema de diseño: track en gris claro (#dddedd), thumb en gris medio (#b2b2b2), hover en gris oscuro (#9a9a9a).

Sistema de colores semántico

Variante normal: Borde suave (low emphasis) para navegación estándar de herramientas médicas.

Variante warning: Borde de advertencia naranja (attention) para indicar items incompletos, acciones requeridas, datos faltantes o formularios pendientes.

Estados interactivos

Hover suave en items normales, estado activo con sombras internas para indicar la herramienta actual. Transiciones de 150ms para feedback visual inmediato sin ser distractivo.

Casos de uso recomendados

Normal: Navegación estándar de herramientas clínicas (signos vitales, análisis, recetas)
Warning: Secciones con información incompleta o que requieren atención inmediata
Ideal para sidebars de aplicaciones médicas con múltiples herramientas
Adaptable a diferentes contextos ajustando max-height según densidad de información

Soporte para Drag & Drop

Incluye clases CSS preparatorias para implementar drag & drop con librerías como dnd-kit, react-beautiful-dnd o SortableJS:

nav-herramientas-item-draggable - Cursor grab en items arrastrables
nav-herramientas-item-dragging - Opacidad reducida durante arrastre
nav-herramientas-item-drag-preview - Estilo del preview que sigue al cursor
nav-herramientas-item-drop-target - Indicador visual de zona de drop

Variables CSS Utilizadas

--color-fondo-general

Fondo del contenedor e items

--color-superficie

Fondo item activo, hover y scrollbar track

--color-primario

Color del scrollbar thumb y hover

--color-borde-suave

Borde del contenedor (normal)

--color-advertencia

Borde del contenedor (advertencia)

--sombra-activo

Sombras del contenedor

--color-texto-oscuro

Color del texto

Tab Item

Pestaña horizontal de navegación con estado activo/inactivo y nombre editable al hacer doble clic. Forma parte de un sistema de tabs; el conector inferior se funde visualmente con el panel de contenido.

Vista Previa

Haz clic para cambiar el tab activo. Doble clic sobre la etiqueta para editar el nombre. El botón de papelera elimina el tab.

UI element nivel1 con nombre largo

Segundo elemento

Tercer elemento

Contenido del tab: UI element nivel1 con nombre largo

Pestañas compactas (ficha)

Variante para contenido en fichas: ancho de pestaña mín. 120px, width: auto para que el texto no se corte con puntos suspensivos. Activa: --color-primario-oscuro, 16px semibold; sin borde inferior y franja ::after que oculta la línea del panel. Inactiva: --color-texto, 14px regular. En el panel, lista-lead (“Texto:”) en #333 (--color-texto-oscuro), 16px medium; lista-cola en 14px regular.

Texto: Min Regular 14
Texto: Min Regular 14

Clase CSS	Para qué sirve
	Envoltorio; max-width 405px; font-family con --font-geist-sans (contraste 400/600)
	Fila de pestañas; align-items flex-end; gap 6px entre pestañas
	Base (botón); min-width 120px, width auto; sin ellipsis en etiqueta
	Sin border-bottom; ::after tapa el top-border del panel; texto 16px semibold teal
	Borde --color-borde-suave; texto 14px regular --color-texto
	Etiqueta; ellipsis si no cabe
	Contador teal; position absolute esquina superior derecha (top/right -6px)
	Panel; min-height 107px; border-radius 0 4px 4px 4px; borde --color-borde
	Lista; viñetas (::marker) --color-texto-oscuro (#333)
	Prefijo tipo “Texto:” — 16px medium, --color-texto-oscuro (#333)
	Cuerpo de línea — 14px regular, --color-texto

Estados

Activo

UI element nivel1

Inactivo

UI element nivel1

Clases CSS

Clase CSS	Para qué sirve
	Contenedor principal (85px alto, position: relative)
	Modificador: borde superior 7px teal, fondo #f5feff, sombra
	Modificador: bordes laterales sutiles, drop-shadow leve
	Cuerpo visible del tab (75px, flex, padding 20px 16px)
	Etiqueta de texto (18px semibold, truncada si es larga)
	Input de edición inline (mismo tamaño que la etiqueta)
	Botón eliminar con icono de papelera
	Botón de sub-pestaña debajo del cuerpo del tab (visible solo cuando se pasa onAddSubTab)
	Rectángulo inferior que funde el tab activo con el panel
	Botón + al final de la fila de tabs (misma fila que TabItem)

Código de uso (React)

Props

Prop	Tipo	Descripción
`label`	string	Texto de la etiqueta del tab
`active`	boolean?	Si el tab está seleccionado (default: false)
`onClick`	() => void?	Callback al hacer clic en el tab
`onLabelChange`	(label: string) => void?	Callback al guardar un nuevo nombre. Si se omite, la edición queda deshabilitada.
`onDelete`	() => void?	Callback al hacer clic en el botón eliminar. Si se omite, el botón no se muestra.
`onAddSubTab`	() => void?	Callback del botón de sub-pestaña. Si se omite, el botón no se muestra.
`subTabLabel`	string?	Texto del botón de sub-pestaña (default: "Agregar sub-pestaña").

Sidebar Nav

Navegación vertical con ítems editables, submenús, estado activo y botón para agregar ítems.

Vista Previa

SidebarNavFormato2

Clases CSS

Clase CSS	Para qué sirve
	Contenedor principal (flex column, gap 4px)
	Ítem de fila — `<button type="button">` cuando no hay papelera ni edición inline; `<div>` con teclado + `aria-current`/`aria-label` si hay `sidebar-nav-item-delete` o input (mismo criterio que demos y componente `SidebarNav`)
	Modificador: fondo teal claro, borde izquierdo 4px primario
	Modificador: estilos de edición inline cuando el ítem activo está en modo renombrar
	Texto del ítem (16px medium, truncado)
	Input de edición inline
	Botón eliminar con papelera
	Sub-ítem debajo del ítem padre
	Botón + para agregar nuevos ítems
	Formato 2 — contenedor externo (fondo superficie, borde, border-radius)
	Formato 2 — ítem con layout de dos líneas (título + descripción)
	Formato 2 — estado activo (borde izquierdo teal, fondo teal suave)
	Formato 2 — hover visible en ítems inactivos
	Formato 2 — área expandible de sub-ítems debajo del ítem padre

Props

Prop	Tipo	Descripción
`items`	SidebarNavItemData[]	Lista de ítems a mostrar
`activeId`	string?	ID del ítem activo
`onItemClick`	(id: string) => void?	Callback al hacer clic en un ítem
`onItemDelete`	(id: string) => void?	Callback al eliminar un ítem
`onItemRename`	(id, label) => void?	Callback al renombrar. Si se omite, edición deshabilitada.
`onAddItem`	() => void?	Callback del botón +. Si se omite, el botón no se muestra.

Layout y pantallas

Plantillas de estructura completa (contenedores, shell, áreas de contenido). Cada variación se documenta como un artículo con demo y código copiable. El consumo en otros proyectos sigue siendo el CSS del DS; los layouts en React sirven como referencia de composición.

Demos a pantalla completa

Rutas internas de la guía que abren maquetas a altura completa o casi. Útiles para revisar el shell antes de portar a otro proyecto.

LayoutPantalla con botón de acción
100vh, navbar + header + panel con CTA.
/demo-layout
Abrir en pestaña nueva
LayoutPantalla sin botón (con Volver)
100vh, variante con volver en la franja superior.
/demo-layout/sin-boton
Abrir en pestaña nueva
Constructor de formularios (interactivo)
Paleta, vista previa en rejilla 12 cols, dnd-kit; clases .demo-constructor-*.
/demo-constructor-formulario
Abrir en pestaña nueva
Modal doble contenedor (asignar diagnóstico)
Modal ancho modal--doble-contenedor: búsqueda + tabla--diagnostico-checks y panel lateral con resumen; ver también Modales → #modal-doble-contenedor-demo.
/demo-modal-doble-contenedor
Abrir en pestaña nueva

Layout de Pantalla

Layout estándar de pantalla MKClinico. Combina NavbarVertical + Header + panel-principal en un solo componente reutilizable.

Layout de Pantalla es la base del proyecto. Define la estructura completa: sidebar, header y área de contenido. Es el punto de partida cuando se construye una pantalla desde cero.

La jerarquía de clases es:

LayoutPantalla ← estructura completa (sidebar + header + área)

└ .area-principal ← espaciado responsivo alrededor del panel

└ .panel-principal ← contenedor visual del contenido

El espaciado de .area-principal es responsivo mediante la variable --espaciado-area-principal: 16px en mobile, 24px en tablet, 40px en desktop. Si un proyecto necesita ajustarlo, sobreescribe solo la variable.

Si copias solo panel-principal sin el layout, asegúrate de envolverlo en un elemento con clase area-principal para respetar los espaciados del sistema.

¿Vas a pedírselo a una IA? Usa este prompt

Copia el texto del recuadro blanco. Antes de pegar, conviene tener claro:

Qué plantilla quieres (con botón, con volver, sin usuario, etc.).
Qué vas a escribir en el bloque COMPLETA del final.
Si aplica, la ancla o URL de demo (ej. #layout-pantalla).

TAREA
Generar una pantalla MKClinico con el componente LayoutPantalla (Next.js + Design System).

ELIGE PLANTILLA (indica cuál usas en la respuesta)
A) Acción principal en el panel → botonAccion={{ label: "…", onClick: () => {} }}. Demo: /demo-layout
B) Sin acción + botón Volver sobre el panel → sin botonAccion; volver={{ onClick: () => … }}. Demo: /demo-layout/sin-boton
C) Sin bloque de usuario en el header → omitir prop usuario
D) Usuario visible pero sin menú al clic → usuario sin opciones o opciones: []
E) Acción con ícono → botonAccion con icono además de label y onClick

REQUISITOS TÉCNICOS
- Importar LayoutPantalla desde @/app/components/LayoutPantalla; NavbarVertical + navItems según la guía (IconoInicio, IconoUsuarios, etc.).
- props: titulo (título del panel); children = contenido principal.
- usuario.opcional: si existe, opciones puede ser [] o lista de { label, onClick } para el menú al hacer clic.
- fullScreen: true por defecto; false solo si va dentro de preview/iframe con altura fija.
- No duplicar a mano .area-principal / .panel-principal ni inventar clases fuera del DS.

COMPLETA (sustituye este bloque por tu caso real)
- Título del panel: …
- Ítems del menú lateral (nombres): …
- Usuario: sí/no; si sí, ¿menú al clic? …
- Plantilla A–E: …
- Descripción breve del contenido dentro del panel: …
- Si aplica, ancla guía o demo: #layout-pantalla, /demo-layout, etc.

Sustituye el bloque COMPLETA por tu caso real. Más detalle: #layouts → #layout-pantalla.

Vista Previa

Pasa el mouse sobre el navbar para expandirlo. El botón de acción y el bloque de usuario son opcionales. Con usuario.opciones, un clic en el nombre o avatar abre el menú (mismo comportamiento que HeaderNavegacion).

Pantalla completa — con botón

/demo-layout (100vh, nueva pestaña).

LROSSIG

Título de la pantalla

El contenido de la pantalla va aquí: tablas, formularios, etc.

Vista previa — sin botón de acción

Sin botonAccion; con volver en la franja layout-pantalla-cabecera-margin (altura --espaciado-area-principal): el panel arranca a la misma altura que sin volver, con el enlace al pie de esa franja.

Pantalla completa — sin botón

/demo-layout/sin-boton (100vh, nueva pestaña).

LROSSIG

Título de la pantalla

El contenido de la pantalla va aquí: tablas, formularios, etc.

Props

Prop	Tipo	Requerida	Descripción
`titulo`	string?	No	Título en el panel (`h1.titulo-principal`). Si se omite o queda vacío y no hay `botonAccion`, no se muestra la cabecera del panel
`fullScreen`	boolean?	No	true (default): height 100vh, layout de página completa. false: height 100%, para embeber en un contenedor con altura definida.
`navItems`	NavItem[]	Sí	Items del menú lateral (mismo tipo que NavbarVertical)
`children`	ReactNode	Sí	Contenido del panel principal
`activeItemId`	string?	No	ID del item activo en el navbar
`activeSubItemId`	string?	No	ID del sub-item activo en el navbar
`onItemClick`	(id: string) => void?	No	Callback al hacer clic en un item del navbar
`onSubItemClick`	(id, subId) => void?	No	Callback al hacer clic en un sub-item del navbar
`botonAccion`	{ label, onClick, icono? }?	No	Botón primario arriba a la derecha del panel
`volver`	{ label?, onClick }?	No	«Volver» (.btn-volver) en layout-pantalla-cabecera-margin; borde superior del panel alineado con pantallas sin volver. Modificador area-principal--con-volver.
`usuario`	{ nombre, opciones? }?	No	Avatar y nombre en el header. Si `opciones` es un array no vacío (`{ label, onClick }[]`), al hacer clic se abre el menú desplegable.
`buscadorPlaceholder`	string?	No	Placeholder del buscador (default: "Buscar módulos")
`onBuscar`	(valor: string) => void?	No	Callback al escribir en el buscador del header

Clases CSS

Clase CSS	Para qué sirve
	Espaciado responsivo exterior del panel (16px → 24px → 40px según viewport)
	Espaciado responsivo exterior del panel (16px → 24px → 40px según viewport)
	Variable CSS — sobreescribir para ajustar el espaciado en proyectos específicos
	main sin padding-top; lateral e inferior = --espaciado-area-principal — LayoutPantalla con volver
	Franja min-height --espaciado-area-principal; .btn-volver al pie, sobre el panel — LayoutPantalla
	Cabecera del panel: margen bajo la fila título/CTA — LayoutPantalla
	Fila título + botonAccion dentro del panel — LayoutPantalla
	Modificador: solo `botonAccion` sin título — CTA alineado a la derecha — LayoutPantalla

Variantes

Sin botón

Omitir botonAccion. Opcional volver (pantalla secundaria). Demo: /demo-layout/sin-boton.

Sin título en el panel

Omitir titulo (o cadena vacía): no se renderiza la fila de cabecera del panel si tampoco hay botonAccion. Ejemplo: /demo-constructor-formulario.

Sin usuario

Omitir la prop usuario para ocultar el área de usuario en el header.

Usuario sin menú

Pasar solo nombre (sin opciones o con array vacío): se muestra avatar y nombre, pero no aparece lista al hacer clic.

Botón con ícono

Pasar botonAccion={{ label: "Nuevo", icono: <svg/>, onClick }} para mostrar ícono antes del texto.

Constructor Formulario - Paleta (izquierda)

Paleta izquierda del constructor: listado vertical de campos con asa, etiqueta y metadatos de estado (obligatorio/autocompletado), siguiendo el patrón base de Navegación herramientas.

Estructura principal: aside.demo-constructor-paleta.nav-herramientas-scroll + .nav-herramientas-items.demo-constructor-paleta-items-scroll. Cada fila usa .nav-herramientas-item, .nav-herramientas-item-draggable y estado .nav-herramientas-item-dragging (overlay: .nav-herramientas-item-drag-preview).

El botón «Agregar sección» reutiliza el patrón de *Botones especiales* (.btn-agregar-pestana, .btn-agregar-pestana-text, .btn-agregar-pestana-icon). La integración controlada con el lienzo usa estadoPaletaPorCatalogo, onToggleObligatorioCatalog, onToggleAutocompletadoCatalog y opcional itemsEnModoArrastre.

Vista previa

Esta vista replica el flujo real: agregar desde la paleta, reordenar y mover campos entre paleta/lienzo. Implementación con SortableContext, DragOverlay y useDroppable. El comportamiento completo está en /demo-constructor-formulario.

Flujo: primero lleva un campo desde la paleta (izquierda) a la derecha: suelta en la zona punteada o directamente sobre una etiqueta. El orden vertical de la paleta y el de las etiquetas a la derecha están sincronizados: puedes reordenar con el mango en la paleta, volviendo a arrastrar desde la paleta, o con el mango de cada etiqueta. Cada tipo de campo aparece una sola vez en la lista derecha.

Suelta aquí: campo nuevo desde la paleta, o una etiqueta de la lista para dejarla al final

Clases CSS

Para replicar el HTML con el CSS del DS: combina las clases de Navegación herramientas (nav-herramientas-*) con el prefijo demo-constructor-paleta-* y el CTA de Botones especiales. El detalle de nav-herramientas-scroll-warning y estados genéricos de ítem está en el artículo Navegación herramientas.

Clase CSS	Para qué sirve
	Marco opcional de la guía (preview): borde, radio, fondo y sombra alrededor de la paleta; la paleta dentro no duplica cromado.
	Contenedor principal (`aside`) de la paleta; debe usarse junto con `nav-herramientas-scroll`. En CSS, `.demo-constructor-paleta.nav-herramientas-scroll` ajusta columna, scroll interno y sombra exterior.
	Shell de panel con borde y sombra (compartido con Navegación herramientas). En la paleta se combina con `demo-constructor-paleta`.
	Bloque con `overflow-y: auto` entre la lista de campos y el CTA; mantiene el scroll solo en la lista.
	Contenedor flex en columna de las filas (gap entre ítems). Igual que en Navegación herramientas.
	Opcional en el contenedor de ítems mientras hay arrastre desde la paleta (bloquea selección de texto).
	Utilidad de scrollbar fina (compartida con otros listados del DS).
	Zona de soltar (borde discontinuo); en la guía se usa con `useDroppable` en la vista previa interactiva. En `/demo-constructor-formulario` va al pie de la rejilla.
	Estado cuando el puntero con un arrastre válido está sobre la zona de soltar.
	Modificador de fila: ancho completo y alineación con el patrón de herramientas; va con `nav-herramientas-item` y `nav-herramientas-item-draggable`.
	Estilo base de cada fila (fondo, radio, padding). Ver Navegación herramientas.
	Cursor `grab` en la fila arrastrable. Ver Navegación herramientas.
	Estado de la fila origen mientras se arrastra (opacidad reducida). Ver Navegación herramientas.
	Estilo del clon en `DragOverlay` (sombra, ligera rotación). En la demo se combina con `demo-constructor-paleta-fila` y `demo-constructor-paleta-item--overlay`.
	Modificador de la fila dentro del overlay de arrastre (demo / `DragOverlay`).
	Zona de arrastre dentro del preview del overlay (demo).
	Zona mango + etiqueta que recibe los listeners de arrastre (dnd-kit); el resto de la fila queda para clics en iconos.
	Contenedor del ícono de asa (10×16). Ver Navegación herramientas.
	Tipografía del nombre del campo (16px, peso 500). Ver Navegación herramientas.
	Contenedor flex de asterisco, destellos y candado a la derecha de la fila.
	Botón sin borde para alternar obligatorio / autocompletado (focus visible accesible).
	Display inline de los SVG de estado en botones de la meta.
	Alineación y tamaño de los iconos de estado en la meta.
	CTA «Agregar sección» (patrón Agregar pestaña en Botones especiales). La paleta usa `.demo-constructor-paleta > .btn-agregar-pestana` solo para margen superior.
	Texto del CTA Agregar pestaña.
	Ícono + del CTA Agregar pestaña.

Constructor Formulario - Vista previa (derecha)

Componente reutilizable para la columna derecha: cabecera de vista previa, modo ampliado y rejilla de campos del formulario.

Este componente requiere un DndContext padre (colisión en constructorFormulario/collisionDetection) y la lista colocados. En la demo completa, la paleta aporta arrastres desde palette-*; aquí solo se muestra el lienzo con el estado inicial CANVAS_INICIAL. Flujo completo: /demo-constructor-formulario.

Vista previa

Misma apariencia que el producto de referencia: texto de ayuda bajo el título, tarjetas blancas, mango vertical a la derecha, sección Datos cuenta y Ampliar. En la demo completa también aplica arrastre desde la paleta y la franja inferior.

Vista previa

Arrastra desde cualquier parte del campo para reordenar. Arrastra el borde derecho para ajustar el ancho.

Sin sección

RUT/PASS

Nombre(s)

Primer apellido

Segundo apellido

Fecha de nacimiento

Dirección

Teléfono

Previsión

Convenio

Datos cuenta

Definido en Zonas (solo visualización)

Motivo

Clases CSS (guía)

El resto del aspecto usa el prefijo demo-constructor-* compartido con la demo y la paleta.

Clase CSS	Para qué sirve
	Marco de la guía alrededor de la vista previa: borde, radio, sombra y tope de altura del shell de rejilla (scroll interno).
	Columna derecha del constructor: fondo superficie, cabecera «Vista previa» y shell del lienzo.
	Contenedor con scroll del lienzo (rejilla + franja de soltar + sección Datos cuenta).
	Modificador de `InputRut` con `permitePasaporte`: selector RUT/PASS en el prefijo (5.25rem, mismo criterio visual que el bloque RUT clásico 80px).
	Indicador visual del mango de ancho (barra redondeada, más visible al hover/focus).
	Modificador de «Datos cuenta»: opacidad y sin puntero, como bloque definido en Zonas.

Modales

Cuándo usar cada tipo de modal

Tipo	Contenido	Botones	Cuándo usarlo
Modal informativo	Texto largo, listas, definiciones	Solo cierre (X)	Mostrar información de referencia que no requiere decisión del usuario
Modal de confirmación	Ícono de advertencia + pregunta corta	`btn-modal-primario` + `btn-modal-secundario`	Acciones destructivas o irreversibles (eliminar, salir sin guardar)
Modal con formulario	Inputs, selects u otros controles	Guardar + Cancelar	Captura de datos breve sin salir del contexto actual

Componente React: <Modal isOpen={...} onClose={...} title="...">...</Modal>

¿Vas a pedírselo a una IA? Usa este prompt

Copia el recuadro blanco. Borra el bloque TIPO A o TIPO B que no vayas a usar y rellena COMPLETA.

Solo clases del DS (mkclinico-ui.css); no inventar clases.
Overlay: modal-overlay + modal-overlay--open para mostrar.
No sobrescribir anchos del DS; si el contenido es largo, el cuerpo debe poder hacer scroll.

TAREA
Generar UN modal MKClinico. Elige un solo tipo y borra la descripción del otro.

TIPO A — Modal informativo (texto largo, solo cierre)
- Estructura: modal-overlay + modal-overlay--open para mostrar; dentro, modal con modal-titulo (h2), modal-cuerpo (y modal-cuerpo-subtitulo si hay secciones), botón modal-cerrar (X). Footer opcional con botones.

TIPO B — Modal de confirmación (decisión sí/no, acción delicada)
- Estructura: modal-overlay + modal-overlay--open; modal-confirmacion (sin X), modal-titulo, modal-subtitulo, modal-footer con btn-modal-primario y btn-modal-secundario.

REGLAS
- Solo clases del DS (mkclinico-ui.css). No inventar nombres de clase.
- No sobrescribir anchos/paddings del DS. Si hay mucho texto, el cuerpo debe poder hacer scroll (no bloquear altura).

COMPLETA (reemplaza este bloque)
- Tipo elegido: A o B
- Título: …
- Texto del cuerpo (o subtítulo en B): …
- Textos de los botones (si aplica): …

Borra la descripción del tipo que no uses (A o B) y completa título, textos y botones.

Modal informativo

Modal de solo lectura con contenido informativo. Sin botones de acción.

Vista previa

Clase CSS	Para qué sirve
	Contenedor del contenido del modal — max-width 926px, fondo blanco, sombra
	Título principal del modal (h2) — tipografía teal
	Área de contenido desplazable (texto, listas, formularios)
	Subtítulos de sección dentro del cuerpo (p o span)
	Botón de cierre (X) — esquina superior derecha
	Pie del modal — botones de acción (opcional en informativo)

Demo interactivo

Modal extendido

Modal informativo con más secciones de contenido.

Vista previa

Clase CSS	Para qué sirve
	Contenedor del contenido del modal — max-width 926px, fondo blanco, sombra
	Título principal del modal (h2) — tipografía teal
	Área de contenido desplazable (texto, listas, formularios)
	Subtítulos de sección dentro del cuerpo (p o span)

Demo interactivo

Modal de confirmación

Modal con ícono, mensaje centrado y dos botones de acción. Sin botón de cierre.

Vista previa

Clase CSS	Para qué sirve
	Contenedor del modal de confirmación — centrado, max-width 715px, sin botón X
	Título del modal (h2) — pregunta o advertencia
	Subtítulo o mensaje secundario (p) — texto centrado
	Pie con los dos botones de acción
	Botón principal (ej. No, continuar) — 280×50px, teal
	Botón secundario (ej. Sí, salir) — 280×50px, borde teal

Demo interactivo

Modal de eliminación

Modal de advertencia para confirmar acciones destructivas. Sin botón de cierre.

Vista previa

Clase CSS	Para qué sirve
	Contenedor del modal de confirmación — centrado, max-width 715px, sin botón X
	Título del modal (h2) — pregunta o advertencia
	Subtítulo o mensaje secundario (p) — texto centrado
	Pie con los dos botones de acción
	Botón principal (ej. No, cancelar) — 280×50px, teal
	Botón secundario (ej. Sí, eliminar) — 280×50px, borde teal

MKClínico v3 Design System

Bienvenido al Design System

Desarrollo (Normal)

Producción (Minificado)

Recursos para IA y uso sin CDN

Atajos: prompts por tipo de tarea

1. Objetivo

2. CSS del DS (si aplica)

3. Prompt oficial

4. Tu pedido concreto

5. Salida esperada

Pantalla con shell (layout)

Listado con tabla y acciones

Formulario con campos y estados

Modal de confirmación

Lista con paginación

1. Carga el CSS

2. Copia una clase y úsala

3. Navega y reutiliza

Sin conocimientos de CSS necesarios

Personalización con Variables CSS

Estructura de clases

Compatibilidad

Fundamentos (Tokens)

Familia Primaria

Familia de Bordes

Familia de Superficies

Familia Amarilla

Familia de Alertas

Estados de entidad

Escala de valoración — riesgo medio

Colores de Texto

Título Principal

Título Principal (36px/Semibold)

Subtítulos

Subtítulo Medium (24px/Medium)

Subtítulo Semibold (20px/Semibold)

Subtítulo (20px/Medium)

Subtítulo Volver (20px/Medium/Underline)

Subtítulo Small Bold (18px/Semibold)

Subtítulo Small (18px/Medium)

Subtítulo Small Regular (18px/Regular)

Texto Body

Texto Mínimo

Colores de Texto

Familia tipográfica

Acciones (Buttons)

Botón Primario

Botón Secundario

Botón Terciario

Botones Small (32px)

1. Ancho según texto — btn-sm

2. Tamaño fijo 75×32px — btn-icono-sm

Botones Medium (40px)

Botones Full (560x50px)

Botón Filtro

Botón Volver

Botones de Ícono

Botones eliminar

Tooltip de acción

Botón punteado

Botón pestaña formulario

Botón ícono suave

Botón Agregar Pestaña

Botón Agregar

Botones para Modales

Tamaños

Entradas (Forms)

1. Componente InputBasico

2. Componente Input

3. Clases CSS

Input con título (62px)

Input con título 208×64 (campo 192px)

Input con título 288×64 (campo 288px)

Input con título 384×64 (campo 384px)

Deshabilitado

Título horizontal + cantidad (60×30)

Demo: abrir y cerrar panel

Variantes del texto del disparador (cerrado)

Campo con lupa (HTML + CSS del DS)