# Maristas UI Kit — guía para asistentes de IA

> Archivo generado con `php artisan maristas-ui:ia`. No lo edites a mano: regenéralo al actualizar el paquete.

Eres un asistente que escribe pantallas para un sistema Maristas. Este kit (`maristas/ui-kit`) es el único sistema de diseño permitido: **reutiliza lo que existe, no inventes estilos**.

## Cómo está construido

- Laravel 9–13, Blade, **Bootstrap 5** como base (CSS y JS). Sin Alpine, Livewire ni jQuery obligatorios: el JavaScript del kit (`maristas-ui.js`) es puro.
- Íconos: Remix Icon (`ri-*`). Fuente: Poppins.
- Tokens CSS con prefijo `--maristas-*`; clases propias con prefijo `.mr-*`.
- Componentes Blade anónimos con el prefijo `x-maristas::` (por ejemplo `<x-maristas::button>`).
- Los estilos que cambian el aspecto de Bootstrap solo actúan dentro de un contenedor con la clase `mr-scope`. Envuelve la pantalla en `<div class="mr-scope">…</div>`.
- Carga `vendor/maristas-ui/maristas-ui.css` después de Bootstrap y `maristas-ui.js` al final del `<body>` (se publican con `php artisan vendor:publish --tag=maristas-ui-assets`).

## Reglas obligatorias

1. **Un componente del kit antes que HTML propio.** Si existe un componente `x-maristas::*` para lo que necesitas, úsalo. Si no existe, compón con clases `.mr-*` y Bootstrap; no crees CSS nuevo salvo que el usuario lo pida.
2. **Colores solo con tokens** (`var(--maristas-*)`). Nunca valores hexadecimales sueltos ni clases de color de Bootstrap para decorar (`bg-primary`, `text-danger`…). Los tonos de estado se expresan con `tone="success|warning|danger|info|neutral"`.
3. **Un solo botón principal por vista.** Los demás son secundarios (`variant="secondary"`). El botón deshabilitado es azul claro, nunca gris.
4. **Los estados son etiquetas** (`x-maristas::state`), con un solo mensaje y color semántico. El azul de marca nunca representa un estado.
5. **Las alertas dicen qué pasó y qué hacer**; las confirmaciones temporales van en toast.
6. **Íconos de Remix** (`ri-*`); si un ícono va solo, lleva `aria-label`.
7. **Accesibilidad:** foco visible, `label` en cada campo, contraste suficiente, controles operables con teclado, `aria-current`/`aria-label` en navegación.
8. **Textos en español**, claros y sin jerga. Datos de ejemplo ficticios; nunca datos reales de personas.
9. **No uses clases que no aparezcan en esta guía.** Si dudas de que una clase exista, revisa la sección «Clases disponibles».
10. Entre página y pie deja respiro; no pegues contenido al borde.

## Verifica tu trabajo

Al terminar una vista ejecuta `php artisan maristas-ui:lint <ruta de la vista>` y corrige todos los errores que reporte (clases inventadas, colores sueltos, componentes o propiedades inexistentes, íconos sin `aria-label`). Los avisos son para revisar con criterio.

## Tokens de diseño


**Marca**
- `--maristas-brand`: `#0b3a6f`
- `--maristas-brand-strong`: `#082b54`
- `--maristas-brand-soft`: `#e7eefb`
- `--maristas-accent`: `#2f6fed`

**Neutros con sesgo azul**
- `--maristas-ink`: `#172033`
- `--maristas-ink-soft`: `#3f4a60`
- `--maristas-muted`: `#6a7489`
- `--maristas-line`: `#e6e9f1`
- `--maristas-line-strong`: `#b8c0d0`
- `--maristas-soft`: `#f4f6fb`
- `--maristas-canvas`: `#f4f6fb`
- `--maristas-surface`: `#ffffff`

**Estados (independientes de la marca)**
- `--maristas-success`: `#12805c`
- `--maristas-success-soft`: `#e3f5ee`
- `--maristas-warning`: `#a96a00`
- `--maristas-warning-soft`: `#fdf1d8`
- `--maristas-danger`: `#c93a3a`
- `--maristas-danger-soft`: `#fce8e8`
- `--maristas-info`: `#1f6aa8`
- `--maristas-info-soft`: `#e3f0fb`

**Tipografía**
- `--maristas-font`: `'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif`
- `--maristas-text-2xs`: `.7rem`
- `--maristas-text-xs`: `.75rem`
- `--maristas-text-sm`: `.8125rem`
- `--maristas-text-base`: `.875rem`
- `--maristas-text-md`: `1rem`
- `--maristas-text-lg`: `1.25rem`
- `--maristas-text-xl`: `1.6rem`

**Forma**
- `--maristas-radius-xs`: `6px`
- `--maristas-radius-sm`: `8px`
- `--maristas-radius-md`: `10px`
- `--maristas-radius-lg`: `16px`
- `--maristas-shadow-sm`: `0 1px 3px rgba(23, 32, 51, .12)`
- `--maristas-shadow-card`: `0 1px 2px rgba(23, 32, 51, .04), 0 6px 20px rgba(23, 32, 51, .05)`
- `--maristas-shadow-float`: `0 12px 32px rgba(23, 32, 51, .14)`
- `--maristas-shadow-modal`: `0 20px 50px rgba(23, 32, 51, .2)`
- `--maristas-shadow-up`: `0 -4px 18px rgba(23, 32, 51, .1)`
- `--maristas-overlay`: `rgba(23, 32, 51, .45)`

**Espaciado (múltiplos de 4px)**
- `--maristas-space-1`: `.25rem`
- `--maristas-space-2`: `.5rem`
- `--maristas-space-3`: `.75rem`
- `--maristas-space-4`: `1rem`
- `--maristas-space-5`: `1.5rem`
- `--maristas-space-6`: `2rem`

**Separación entre ícono y texto: una sola medida para botones, menús, navegación y avisos; -sm para pastillas**
- `--maristas-icon-gap`: `.5rem`
- `--maristas-icon-gap-sm`: `.35rem`

**Controles: botón, campo y selector del mismo tamaño miden lo mismo y usan la misma letra**
- `--maristas-control-h-sm`: `2rem`
- `--maristas-control-h`: `2.5rem`
- `--maristas-control-h-lg`: `3rem`
- `--maristas-control-text-sm`: `var(--maristas-text-sm)`
- `--maristas-control-text`: `var(--maristas-text-base)`
- `--maristas-control-text-lg`: `var(--maristas-text-md)`
- `--maristas-label-text`: `var(--maristas-text-sm)`

**Estados de interacción: uno solo para todo el kit**
- `--maristas-hover`: `var(--maristas-soft)`
- `--maristas-focus-ring`: `0 0 0 3px rgba(47, 111, 237, .15)`
- `--maristas-disabled-opacity`: `.5`

**Margen lateral de la página (crece con la ventana; cada sistema puede redefinirlo en su :root)**
- `--maristas-gutter`: `clamp(2rem, 7vw, 9rem)`

## Componentes Blade

Se usan como `<x-maristas::nombre propiedad="…">contenido</x-maristas::nombre>`. Las propiedades sin valor por defecto son obligatorias.

### `x-maristas::alert`
- Propiedades: `tone = 'info'`, `icon = null`, `dismissible = false`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::avatar`
- Propiedades: `name (obligatoria)`, `size = 'md'`, `soft = false`, `initials = null`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::back-to-top`
- Sin propiedades propias (solo contenido y atributos HTML).
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::banner`
- Propiedades: `title (obligatoria)`, `eyebrow = null`, `description = null`, `icon = null`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::button`
- Propiedades: `variant = 'primary'`, `size = null`, `icon = null`, `href = null`, `type = 'button'`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::cover-card`
- Propiedades: `title (obligatoria)`, `image = null`, `position = 'center'`, `subtitle = null`, `icon = 'ri-image-line'`, `fill = true`
- Slots con nombre: `tags`, `meta`, `actions` (`<x-slot:nombre>…</x-slot:nombre>`).
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::edit-link`
- Propiedades: `target (obligatoria)`, `locked = false`, `label = 'Editar'`, `lockedLabel = 'Bloqueado'`, `title = null`, `lockedTitle = 'No se puede editar en esta etapa'`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::empty-state`
- Propiedades: `icon = 'ri-inbox-line'`, `title (obligatoria)`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::footer`
- Propiedades: `product = 'SIGEM'`, `version = null`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::institution-menu`
- Propiedades: `current (obligatoria)`, `searchable = false`, `title = 'Institución activa'`, `hint = 'Cambia a otra para ver sus datos'`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::menu-item`
- Propiedades: `href = null`, `icon = null`, `active = false`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::multiselect`
- Propiedades: `name (obligatoria)`, `options = []`, `selected = []`, `placeholder = 'Selecciona opciones'`, `searchPlaceholder = 'Buscar…'`, `emptyText = 'No se encontraron resultados'`, `invalid = false`
- Slots con nombre: `value`, `label` (`<x-slot:nombre>…</x-slot:nombre>`).
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::nav-group`
- Propiedades: `label (obligatoria)`, `icon = null`, `active = false`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::nav-link`
- Propiedades: `href = '#'`, `icon = null`, `active = false`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::notification-menu`
- Propiedades: `count = 0`, `title = 'Notificaciones'`
- Slots con nombre: `actions`, `footer` (`<x-slot:nombre>…</x-slot:nombre>`).
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::notification`
- Propiedades: `name = null`, `icon = null`, `tone = 'info'`, `time = null`, `new = false`, `href = null`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::page-bar`
- Propiedades: `title (obligatoria)`, `items = []`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::stat`
- Propiedades: `label (obligatoria)`, `value (obligatoria)`, `delta = null`, `trend = 'up'`, `icon = null`, `hint = null`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::state`
- Propiedades: `tone = 'neutral'`, `icon = null`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::topbar`
- Propiedades: `id = 'mr-topbar'`, `label = 'Navegación principal'`
- Slots con nombre: `brand`, `tools` (`<x-slot:nombre>…</x-slot:nombre>`).
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

### `x-maristas::user-menu`
- Propiedades: `name (obligatoria)`, `role = null`
- Acepta atributos HTML adicionales (`class`, `id`, `data-*`, `wire:*`, `x-*`).

## Clases disponibles

Estas son todas las clases `.mr-*` que existen, agrupadas por familia. Usa solo estas.

- **action**: `mr-action-bar`
- **actions**: `mr-actions`
- **auth**: `mr-auth`, `mr-auth-badge`, `mr-auth-brand`, `mr-auth-card`, `mr-auth-crest`, `mr-auth-doc`, `mr-auth-form`, `mr-auth-lead`, `mr-auth-logo`, `mr-auth-title`
- **av**: `mr-av`, `mr-av-lg`, `mr-av-md`, `mr-av-sm`, `mr-av-soft`, `mr-av-stack`
- **backtop**: `mr-backtop`
- **banner**: `mr-banner`, `mr-banner-actions`, `mr-banner-eyebrow`, `mr-banner-icon`, `mr-banner-lead`, `mr-banner-main`, `mr-banner-title`
- **block**: `mr-block-head`
- **blueprint**: `mr-blueprint`, `mr-blueprint-figure`, `mr-blueprint-label`, `mr-blueprint-logo`, `mr-blueprint-marks`, `mr-blueprint-title`
- **body**: `mr-body`
- **box**: `mr-box`, `mr-box-sm`
- **breadcrumb**: `mr-breadcrumb`
- **btn**: `mr-btn-dashed`, `mr-btn-ghost`, `mr-btn-icon`, `mr-btn-main`
- **caption**: `mr-caption`
- **card**: `mr-card-accent`, `mr-card-flat`
- **chip**: `mr-chip`
- **chips**: `mr-chips`
- **copy**: `mr-copy`
- **cover**: `mr-cover`, `mr-cover-actions`, `mr-cover-body`, `mr-cover-card`, `mr-cover-empty`, `mr-cover-meta`, `mr-cover-subtitle`, `mr-cover-tags`, `mr-cover-text`, `mr-cover-title`
- **crumbs**: `mr-crumbs`
- **day**: `mr-day`
- **dim**: `mr-dim`, `mr-dim-h`, `mr-dim-v`
- **doc**: `mr-doc-nav`, `mr-doc-section`
- **docbar**: `mr-docbar`, `mr-docbar-brand`, `mr-docbar-menu`, `mr-docbar-search`, `mr-docbar-tag`, `mr-docbar-version`
- **doclayout**: `mr-doclayout`
- **docmain**: `mr-docmain`
- **docnav**: `mr-docnav`, `mr-docnav-group`
- **docs**: `mr-docs`
- **docside**: `mr-docside`
- **doctoc**: `mr-doctoc`, `mr-doctoc-inner`
- **dot**: `mr-dot`
- **dropzone**: `mr-dropzone`
- **dt**: `mr-dt`, `mr-dt-bulk`, `mr-dt-filter`, `mr-dt-footer`, `mr-dt-panel`, `mr-dt-search`, `mr-dt-toolbar`, `mr-dt-toolbar-end`
- **empty**: `mr-empty`, `mr-empty-title`
- **example**: `mr-example`, `mr-example-code`, `mr-example-codebox`, `mr-example-head`, `mr-example-preview`, `mr-example-tabs`, `mr-example-title`
- **eyebrow**: `mr-eyebrow`
- **fact**: `mr-fact`, `mr-fact-inline`, `mr-fact-sub`, `mr-fact-value`
- **facts**: `mr-facts`
- **file**: `mr-file`
- **files**: `mr-files`
- **filter**: `mr-filter`, `mr-filter-count`, `mr-filter-danger`, `mr-filter-warning`
- **filters**: `mr-filters`
- **footer**: `mr-footer`, `mr-footer-full`
- **form**: `mr-form-actions`, `mr-form-section`, `mr-form-section-hint`, `mr-form-section-title`
- **h1**: `mr-h1`
- **h2**: `mr-h2`
- **h3**: `mr-h3`
- **hero**: `mr-hero`, `mr-hero-top`
- **icon**: `mr-icon-tile`
- **icons**: `mr-icons`
- **inbox**: `mr-inbox`, `mr-inbox-bar`
- **kv**: `mr-kv`
- **label**: `mr-label-row`
- **legend**: `mr-legend`, `mr-legend-value`
- **link**: `mr-link`, `mr-link-id`
- **mail**: `mr-mail`, `mr-mail-date`, `mr-mail-dir`, `mr-mail-list`, `mr-mail-main`, `mr-mail-row`, `mr-mail-snippet`, `mr-mail-subject`, `mr-mail-who`
- **menu**: `mr-menu-head`
- **modal**: `mr-modal-close`, `mr-modal-open`
- **multi**: `mr-multi`, `mr-multi-chips`, `mr-multi-options`
- **name**: `mr-name`
- **notif**: `mr-notif`, `mr-notif-dot`, `mr-notif-icon`, `mr-notif-info`, `mr-notif-neutral`, `mr-notif-success`, `mr-notif-time`
- **page**: `mr-page`
- **pagebar**: `mr-pagebar`, `mr-pagebar-title`
- **pagehead**: `mr-pagehead`
- **pagelead**: `mr-pagelead`
- **pager**: `mr-pager`, `mr-pager-link`
- **pagetitle**: `mr-pagetitle`
- **palette**: `mr-palette`, `mr-palette-body`, `mr-palette-box`, `mr-palette-empty`, `mr-palette-foot`, `mr-palette-group`, `mr-palette-head`, `mr-palette-item`, `mr-palette-list`, `mr-palette-open`, `mr-palette-sub`
- **password**: `mr-password`, `mr-password-toggle`
- **person**: `mr-person`
- **progress**: `mr-progress`, `mr-progress-head`
- **prop**: `mr-prop`, `mr-prop-label`
- **reader**: `mr-reader`, `mr-reader-body`, `mr-reader-empty`, `mr-reader-foot`, `mr-reader-head`
- **relation**: `mr-relation`
- **req**: `mr-req`
- **row**: `mr-row-danger`
- **rule**: `mr-rule`, `mr-rule-do`, `mr-rule-dont`
- **scope**: `mr-scope`
- **scroll**: `mr-scroll`, `mr-scroll-menu`
- **seg**: `mr-seg`
- **skeleton**: `mr-skeleton`
- **small**: `mr-small`
- **spin**: `mr-spin`
- **stat**: `mr-stat`, `mr-stat-body`, `mr-stat-delta`, `mr-stat-hint`, `mr-stat-label`, `mr-stat-value`, `mr-stat-with-icon`
- **state**: `mr-state`, `mr-state-danger`, `mr-state-info`, `mr-state-neutral`, `mr-state-success`, `mr-state-warning`
- **step**: `mr-step`, `mr-step-bar`, `mr-step-label`
- **stepper**: `mr-stepper`, `mr-stepper-dot`, `mr-stepper-item`, `mr-stepper-label`, `mr-stepper-link`, `mr-stepper-vertical`
- **steps**: `mr-steps`
- **swatch**: `mr-swatch`, `mr-swatch-color`, `mr-swatch-meta`
- **swatches**: `mr-swatches`
- **table**: `mr-table-wrap`
- **tabs**: `mr-tabs`
- **tag**: `mr-tag`
- **tags**: `mr-tags`
- **tile**: `mr-tile`, `mr-tile-icon`
- **tl**: `mr-tl`, `mr-tl-author`, `mr-tl-dot`, `mr-tl-item`, `mr-tl-line`, `mr-tl-main`, `mr-tl-note`, `mr-tl-quote`, `mr-tl-time`
- **toast**: `mr-toast-danger`, `mr-toast-info`, `mr-toast-success`, `mr-toast-warning`
- **tone**: `mr-tone-brand`, `mr-tone-danger`, `mr-tone-info`, `mr-tone-muted`, `mr-tone-success`, `mr-tone-warning`
- **topbar**: `mr-topbar`, `mr-topbar-brand`, `mr-topbar-btn`, `mr-topbar-count`, `mr-topbar-full`, `mr-topbar-inst`, `mr-topbar-inst-label`, `mr-topbar-link`, `mr-topbar-main`, `mr-topbar-nav`, `mr-topbar-panel`, `mr-topbar-toggler`, `mr-topbar-tools`, `mr-topbar-user-name`
- **type**: `mr-type-row`

Obsoletas (funcionan en la serie 1.x, se retiran en la 2.0; no las uses en código nuevo):
- `mr-avatar` → <x-maristas::avatar size="lg">
- `mr-pill` → <x-maristas::state>
- `mr-events` → la línea de tiempo `.mr-tl`
- `mr-event` → la línea de tiempo `.mr-tl`
- `mr-chip-action` → un botón `btn mr-btn-dashed`

## Catálogo de componentes y patrones

### Empezar

#### Cómo usarlo (`uso`)

Tres pasos para una pantalla nueva o una que se migre.

#### Para asistentes de IA (`ia`)

Una guía en Markdown generada desde este mismo kit, para que Claude, Copilot o Cursor escriban pantallas que respeten el sistema de diseño.

### Fundamentos

#### Colores (`colores`)

La marca es el azul institucional. Los estados (éxito, atención, error, información) son independientes de la marca y nunca se usan como acento decorativo.

#### Tipografía (`tipografia`)

Una sola familia, Poppins, en pesos 400, 500, 600 y 700. La jerarquía se logra con tamaño y peso, no con mayúsculas ni con color.

#### Íconos (`iconos`)

Usamos Remix Icon (`ri-*`), en estilo de línea. Haz clic en un ícono para copiar su clase. Un ícono acompaña al texto; si va solo, necesita `aria-label`.

#### Forma y espacio (`forma`)

Cuatro radios según el tamaño del elemento, sombras por nivel de elevación, alturas de los controles, espaciado en múltiplos de 4px y un margen de página compartido.

#### Accesibilidad (`accesibilidad`)

Mínimos que todo componente del kit cumple y que toda pantalla debe respetar.

### Entradas

#### Botones (`botones`)

Un botón principal por vista. Los demás son secundarios. Todos comparten alto, radio, tipografía y estados; el deshabilitado es azul claro, nunca gris.

#### Formularios (`formularios`)

Etiqueta pequeña arriba, campo con radio medio y un anillo azul al enfocar. El mismo estilo para campos, selectores y áreas de texto. Los errores dicen qué pasó y cómo corregirlo.

#### Selectores y etiquetas (`seleccion`)

Para elegir entre muchas opciones o capturar varias etiquetas sin salir del formulario.

#### Fecha, hora y rango (`fecha`)

Fechas, horas y rangos con los controles nativos del navegador, con el mismo aspecto que el resto de los campos.

#### Carga de archivos (`archivos`)

Una zona para arrastrar o elegir archivos y una lista que muestra el avance de cada uno.

### Datos

#### Acordeón y listas (`disclosure`)

Para ocultar detalle secundario sin perderlo, y para mostrar elementos que se escanean uno tras otro.

#### Avatares (`avatares`)

Iniciales sobre un fondo de marca. Tres tamaños y una versión suave para filas de tabla.

#### Estados y chips (`estados`)

Una etiqueta de estado dice una cosa y usa un color semántico. Nunca se usa el color de marca para un estado.

#### Tablas (`tablas`)

Encabezado en gris sobre fondo suave, filas con separadores finos y resaltado al pasar el cursor. Los estados van como etiquetas y las acciones de fila en un menú.

#### Tablas de datos (`tablas-datos`)

Tabla con búsqueda, filtros, orden por columna, selección de filas y paginación. Funciona con un script ligero de JavaScript puro; no necesita Alpine, Livewire ni jQuery.

#### Tarjetas y cifras (`tarjetas`)

La tarjeta agrupa una idea. Solo la cifra que es el punto de la pantalla se destaca como indicador; no todo número merece una tarjeta.

### Retroalimentación

#### Alertas y avisos (`alertas`)

Una alerta explica qué pasó y qué hacer. Se queda en la página hasta que se resuelve. Un aviso temporal (toast) confirma una acción y desaparece solo.

#### Progreso y carga (`feedback`)

Mientras algo carga se muestra la forma de lo que vendrá; si no se puede saber cuánto falta, un indicador giratorio.

### Navegación

#### Barra principal (`barra`)

Una barra con dos niveles: arriba la marca y las herramientas de la persona (institución, notificaciones, perfil); abajo la navegación. Lo de uso diario va suelto y lo demás se agrupa en menús desplegables.

#### Pestañas y migas (`navegacion`)

Pestañas para cambiar de contenido dentro de una misma página; filtros en píldora para acotar una lista; ruta de migas para ubicarse.

#### Menús desplegables (`menus`)

Un menú agrupa acciones relacionadas detrás de un solo botón. Úsalo cuando la pantalla no tiene espacio para todas.

#### Pasos (`pasos`)

Indica en qué punto de un proceso largo está la persona y qué falta.

### Superposiciones

#### Ventanas y capas (`overlays`)

Modal para decidir o capturar algo sin salir de la página (un editor largo, como redactar un mensaje, va en modal grande con scroll y sin cerrarse al hacer clic fuera); panel lateral para tareas más largas; globos de ayuda para aclarar sin ocupar espacio.

### Patrones

#### Patrones de página (`patrones`)

Composiciones completas hechas con los componentes del kit y pensadas para cualquier sistema Maristas. Se copian tal cual y se cambian los datos. Los textos de estos ejemplos son ficticios.