# 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 ``). - Los estilos que cambian el aspecto de Bootstrap solo actúan dentro de un contenedor con la clase `mr-scope`. Envuelve la pantalla en `
…
`. - Carga `vendor/maristas-ui/maristas-ui.css` después de Bootstrap y `maristas-ui.js` al final del `` (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 ` 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 `contenido`. 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` (`…`). - 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` (`…`). - 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` (`…`). - 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` (`…`). - 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` → - `mr-pill` → - `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 Cada ejemplo es código listo para copiar. Cambia los datos, no la estructura. ### 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. **Genera la guía en tu proyecto** — La guía no se escribe a mano: sale de los tokens del CSS, las propiedades de los componentes y los ejemplos de esta documentación, así que siempre coincide con la versión instalada. ```blade # Escribe docs/maristas-ui.md y avisa a Claude Code, Cursor y Copilot php artisan maristas-ui:ia --agentes # Solo el resumen, sin ejemplos php artisan maristas-ui:ia --resumen # En otra ruta php artisan maristas-ui:ia --ruta=storage/maristas-ui.md ``` **Qué hace --agentes** — Agrega un bloque entre marcas a CLAUDE.md y AGENTS.md (si no existe ninguno, crea AGENTS.md). Volver a ejecutarlo actualiza ese bloque sin tocar el resto del archivo. ```blade ## Interfaz de usuario Toda pantalla nueva o modificada usa el Maristas UI Kit. Antes de escribir vistas lee `docs/maristas-ui.md` y sigue sus reglas: componentes `x-maristas::*`, clases `.mr-*` y tokens `--maristas-*`; no inventes estilos. ``` **Cómo pedirle una pantalla** — Con la guía en el proyecto basta con describir qué necesitas; no hace falta explicar el diseño. ```blade Crea la pantalla de «Documentos del aspirante»: una tabla con búsqueda y filtro por estado, selección de filas con acción en lote «Solicitar de nuevo» y un botón principal «Agregar documento». Usa el Maristas UI Kit. ``` ### 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. **Enlaces y listas** ```blade

Un enlace dentro de un texto se ve así: revisar el expediente completo.

  • Las listas usan el mismo tamaño que el párrafo.
  • Cada elemento dice una sola cosa.
  1. Las listas numeradas solo se usan si el orden importa.
  2. Por ejemplo, los pasos de un proceso.
``` #### Í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. **Variantes** ```blade Registrar seguimiento Correo Eliminar Aprobar ``` **Sobre fondo oscuro** — Con variant light (principal, blanco) y outline-light (fantasma: transparente, se aclara al pasar el cursor). Úsalos en banners y portadas. ```blade Principal Fantasma ``` **Tamaños** — Pequeño dentro de tarjetas, tablas y barras de herramientas; normal para la acción principal de la página; grande en pantallas táctiles o para una acción única y destacada. ```blade Pequeño Normal Grande Pequeño secundario Grande secundario ``` **Estados** ```blade Publicar nota Deshabilitado Enviando… ``` **Solo ícono** — Siempre con aria-label y title, porque no tiene texto. ```blade ``` **Botón punteado (editar)** — La acción de editar de un bloque: «Editar contacto», «Editar estudiante». Es un botón pequeño con borde punteado azul y lápiz. Bloqueado, aparece con candado y atenuado, y explica el motivo al pasar el cursor. ```blade
``` **Grupo y menú de acciones** ```blade
``` #### 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. **Campos** ```blade
Máximo 500 caracteres.
``` **Campos obligatorios y errores** — Marca los obligatorios con la clase mr-req en la etiqueta: pone el asterisco en rojo sin escribirlo a mano. El error va debajo del campo con is-invalid e invalid-feedback. ```blade @error('nombre')
{{ $message }}
@enderror
…bloque…
``` **Revisión antes de confirmar y acciones al pie** — mr-kv ordena pares dato-valor en columnas que se adaptan al ancho. mr-form-actions separa los botones del paso: «Atrás» a la izquierda y la acción principal a la derecha, una sola. ```blade
Contacto
Nombre
María López Soto
Correo
maria@example.com
``` **Etiqueta con acción** — Cuando la etiqueta lleva un interruptor o un enlace a la derecha, envuélvelos en mr-label-row: el campo queda alineado con sus vecinos. ```blade
``` **Formulario largo en secciones** — Divide un formulario de más de cinco campos en secciones con título y una línea de ayuda. Pon el formulario en una tarjeta de ancho cómodo y las instrucciones en una caja a un lado. ```blade
Datos de la persona

Se toman de SIGEM; revisa que coincidan.

…campos…
…
…
…instrucciones…
``` **Contraseña y pantalla de acceso** — mr-password agrega el botón para mostrar u ocultar. Las pantallas de acceso usan mr-auth (fondo), mr-auth-card con has-brand (dos paneles), mr-auth-brand y mr-auth-form. El botón con data-loading-text muestra «Ingresando…» al enviar. ```blade

Sistema de Información para la Gestión Marista.

Módulo CRM

Inicia sesión con tu correo y contraseña.

``` **Tamaños de campos** — Pequeño en filtros y celdas de tabla, normal en formularios, grande en pantallas táctiles. Se piden con form-control-sm, form-control-lg, form-select-sm y form-select-lg. ```blade
``` **Estados del campo** ```blade
Correo válido.
Escribe los 10 dígitos del celular.
Lo asigna el sistema.
``` **Grupo de entrada y búsqueda** ```blade
+52
``` **Casillas, opciones e interruptor** ```blade
``` **Tamaños de casillas y opciones** — Con form-check-sm y form-check-lg en el contenedor. El tamaño grande es el recomendado en pantallas táctiles. ```blade
``` **Interruptores** — Para opciones que se activan o desactivan al instante. Tres tamaños: pequeño dentro de tablas y barras, normal en formularios, grande en pantallas táctiles. ```blade
``` #### Selectores y etiquetas (`seleccion`) Para elegir entre muchas opciones o capturar varias etiquetas sin salir del formulario. **Autocompletar** — Un campo de texto con sugerencias nativas (datalist): rápido de escribir y accesible por teclado. ```blade
``` **Etiquetas** — Escribe y presiona Enter o coma para agregar; cada etiqueta se quita con su ×. Se activa con data-mr-tags. ```blade
Deportes Música
Máximo 8 etiquetas.
``` **Selección múltiple** — Un menú con casillas que no se cierra al elegir; el botón resume cuántas hay marcadas. ```blade
@foreach (['Preescolar', 'Primaria', 'Secundaria', 'Bachillerato'] as $grado) @endforeach
``` **Selección múltiple con buscador y etiquetas** — Para listas largas: busca dentro del menú y muestra lo elegido como etiquetas que se quitan con su ×. Las casillas se envían con el formulario. ```blade ``` #### 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. **Fecha y hora** — Controles nativos: en celular abren el selector del sistema y en escritorio el del navegador. ```blade
``` **Rango de fechas** ```blade
a
``` **Rango (deslizador)** — Con data-mr-range-output el valor se muestra al lado y se actualiza al mover. ```blade
``` #### Carga de archivos (`archivos`) Una zona para arrastrar o elegir archivos y una lista que muestra el avance de cada uno. **Zona de carga** — Arrastra archivos o haz clic para elegirlos. Se activa con data-mr-dropzone y muestra la lista debajo. ```blade
    ``` **Lista de archivos** — Cada archivo muestra su nombre, tamaño y estado: avance, listo o error. ```blade
    • acta-de-nacimiento.pdf1.2 MB
      Listo
    • comprobante-domicilio.jpg3.8 MB
      60%
    • boleta-anterior.pdf8.4 MB
      Pesa más de 5 MB. Comprímelo e inténtalo de nuevo.
      Error
    ``` ### Datos #### Acordeón y listas (`disclosure`) Para ocultar detalle secundario sin perderlo, y para mostrar elementos que se escanean uno tras otro. **Acordeón** ```blade

    Ana Sofía Pérez López · 5º Primaria

    Sin inscripciones anteriores.
    ``` **Lista de elementos** ```blade
    • Plantilla: Recordatorio de documentos
    • Plantilla: Bienvenida al ciclo escolar
    • Plantilla: Recordatorio de cita
    ``` #### Avatares (`avatares`) Iniciales sobre un fondo de marca. Tres tamaños y una versión suave para filas de tabla. **Tamaños y variantes** ```blade ``` **Iniciales exactas** — Con nombre y apellido por separado, pasa initials. Sin él, con tres o más palabras se usa la primera y la penúltima (se asume nombre + dos apellidos). ```blade ``` #### 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. **Etiquetas de estado** ```blade Enviado Respuesta nueva Enviando… Bloqueado Sin asignar ``` **Chips** — Dato corto y clicable (teléfono, correo), en gris. Un chip muestra un dato; la acción de editar es un botón (ver Botones). ```blade
    55 1234 5678 maria.lopez@ejemplo.mx
    ``` **Propiedad con etiqueta** — Etiqueta pequeña en gris y valor debajo. Se usa en las pestañas de detalle. ```blade
    maria.lopez@ejemplo.mx Facebook
    ``` **Distribución por estado** — Una barra segmentada con una leyenda que dice el nombre, el porcentaje y, si lo necesitas, lleva al listado filtrado. Los colores son de los tonos del kit, no de Bootstrap. ```blade ``` #### 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ú. **Lista de registros** ```blade
    FolioNombreGradoEstadoResponsableAcciones
    REG-14958
    María López
    		 5º Primaria Completo Laura Ramírez
    REG-14960
    Jorge Hernández
    		 1º Primaria Nuevo Sin asignar
    REG-05318
    Carlos Rivas
    		 Bachillerato En revisión Laura Ramírez
    ``` **Enlace principal de la fila** — El enlace que abre el registro lleva mr-link-id (semibold, un solo por fila). Si va en una celda de encabezado de fila (th scope="row") se alinea con su encabezado igual que un td; los demás enlaces de la tabla usan mr-link. ```blade
    FolioNombreEstado
    REG-15037 Lisbeth Alarcón Ver contacto Contactado
    REG-14967 Eduardo Juárez Ver contacto Nuevo
    ``` **Paginación** ```blade ``` #### 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. **Tabla de datos completa** — Escribe en el buscador, filtra por estado, haz clic en un encabezado para ordenar, marca filas para ver las acciones en lote y cambia de página. ```blade
    Folio
    REG-14958
      ``` **Con filtros avanzados y paginación del servidor** — Para listas grandes (Livewire, controlador): la misma pieza, pero buscar, filtrar y paginar lo hace el servidor. Los filtros menos usados van en un panel que se despliega bajo la barra. Lo urgente (por ejemplo, registros sin atención) va como chip con mr-filter-danger o mr-filter-warning: lleva el color del tono desde el inicio para que se vea que se puede pulsar. ```blade
      …acciones de la pantalla (una sola primaria)…
      …selects con form-label…
      …
      1502 resultados
      …filas por página… {{ $items->links() }}
      ``` **Fila con conflicto y barra de acciones fija** — mr-row-danger resalta una fila con un error. mr-action-bar queda pegada al pie mientras haya algo seleccionado: así no hay que bajar hasta el final para confirmar. ```blade …
      3 cambios seleccionados
      ``` **Tabla compacta** — Con la clase table-sm: menos relleno vertical para pantallas con muchas filas. ```blade
      ConceptoMontoSaldo
      Inscripción$15,310.00$0.00
      Colegiatura agosto$4,200.00$4,200.00
      Beca académica−$1,200.00−$1,200.00
      ``` **Cargando y vacía** ```blade
      @for ($i = 0; $i < 3; $i++) @endfor
      FolioNombreEstado
      ``` #### 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. **Indicadores** ```blade
      ``` **Indicadores con ícono y nota** — Con icon aparece un cuadro de color a la izquierda; hint agrega una nota corta debajo del valor. El valor es una cifra (un conteo o un total); una fecha o un folio va en una lista de datos, no en un indicador. ```blade ``` **Variantes de tarjeta** ```blade
      Con sombra

      La predeterminada. Para el contenido principal de la página.

      Plana con borde

      Para contenido secundario o anidado dentro de otra tarjeta.

      Con acento

      Marca una tarjeta que requiere atención. Úsala una vez por vista.

      ``` **Tarjeta con portada** — Para catálogos y listados con imagen: etiquetas sobre la portada, datos con ícono y acciones al pie. Sin imagen muestra un ícono. ```blade Aprobado
      29 dic 2026, 09:00

      Descripción corta…

      Ver detalles       ``` ### 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. **Alertas** — Cuatro tonos; puede llevar un botón de cerrar. ```blade
      El mensaje se enviará desde el buzón de la escuela. Responsable actualizado correctamente. En Confirmación: los datos del estudiante no pueden modificarse. Este registro fue rechazado en la revisión y no puede avanzar.
      ``` **Aviso temporal (toast)** ```blade Mostrar aviso
      Nota publicada.
      ``` **Aviso temporal desde JavaScript** — Para respuestas de acciones (guardado, error). MaristasUI.toast(tono, mensaje) crea el aviso, lo muestra cinco segundos y lo quita. Tonos: success, danger, warning, info. ```blade MaristasUI.toast('success', 'Los cambios se guardaron.'); // Desde Livewire, con el evento que ya escucha el layout: $this->dispatch('alert', status: 'success', message: 'Guardado'); ``` #### 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. **Barras de progreso** ```blade
      Documentos entregados3 de 5
      Pago de colegiatura100%
      Adeudo vencido25%
      ``` **Indicador giratorio y esqueleto de carga** ```blade
      Abriendo correo…
      ``` **Estado vacío** ```blade
      Los mensajes que envíes y las respuestas que recibas aparecerán aquí.
      Redactar mensaje
      ``` ### 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. **Barra completa** — Abre los menús para ver el selector de institución, el panel de notificaciones y el menú de perfil. En pantallas angostas la navegación se oculta detrás del botón de hamburguesa y los grupos se despliegan en lista. ```blade Maristas Instituto México Primaria Colegio Champagnat Te mencionó en una nota Ver todas Mi perfil Inicio Registros Responsables ``` #### 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. **Pestañas con subrayado** ```blade ``` **Píldoras y filtros** ```blade
      ``` **Ruta de migas** ```blade ``` **Título de pantalla con migas de pan** — El último elemento es la página actual y no lleva enlace. ```blade ``` **Banner de encabezado** — Para la cabecera de una pantalla con título, texto de apoyo y acciones. Los botones llevan variant light (principal, blanco) y outline-light (secundario, fantasma sobre fondo oscuro). ```blade Categorías Nuevo evento ``` **Pie de página y botón para volver arriba** — Incluye el botón una sola vez en el diseño: aparece al bajar y vuelve al inicio con desplazamiento suave. ```blade Maristas | {{ now()->year }} ``` #### 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. **Menú de acciones** — Un botón secundario que abre una lista corta. Cada opción lleva un ícono y un verbo. ```blade
      Ver detalle Editar Duplicar
      ``` **Con secciones y acción destructiva** — Separa con encabezado y línea; la acción que borra va al final, en rojo. ```blade
      Registro
      Editar Reasignar
      Zona de riesgo
      Eliminar
      ``` **Botón dividido** — La acción más común queda a un clic y las demás detrás de la flecha. ```blade
      Programar envío Guardar borrador
      ``` **Alineación** — dropdown-menu-end alinea el menú al borde derecho del botón; úsalo en elementos pegados al borde de la pantalla. ```blade
      Opción
      Opción
      Opción
      ``` #### Pasos (`pasos`) Indica en qué punto de un proceso largo está la persona y qué falta. **Pasos horizontales** — Para formularios largos o procesos con orden. Completado, actual y pendiente se distinguen por forma y color, no solo por color. ```blade
      1. Datos del estudiante
      2. 2Tutor
      3. 3Documentos
      4. 4Confirmación
      ``` **Pasos en los que se puede hacer clic** — Para volver a un paso ya completado, envuelve el punto y la etiqueta en un botón mr-stepper-link. El paso pendiente va deshabilitado. ```blade
      ``` **Pasos verticales con descripción** — Cuando cada paso necesita una explicación o una fecha. ```blade
      1. Solicitud enviada16 de julio, 11:47 a. m.
      2. 2Revisión de documentosResponsable: Laura Ramírez
      3. 3EntrevistaPendiente de agendar
      4. 4Resultado
      ``` ### 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. **Modal, panel lateral, ayuda y popover** ```blade Abrir modal Abrir panel lateral Ayuda corta Popover ``` ### 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. **Cabecera de perfil** — Nombre como protagonista, relación en una línea, contacto como chips clicables y una sola acción principal. ```blade
      ``` **Progreso por etapas** — Cuatro etapas; la actual en azul de marca, las anteriores en azul claro. Si el resultado es negativo, agrega is-danger. ```blade
      1. Solicitud
      2. Revisión
      3. Confirmación
      4. Cierre
      ``` **Datos clave en una fila** — Columnas con divisores finos, sin cajas. En pantallas angostas se apilan. ```blade
      Estudiante
      Ana Sofía Pérez López
      Matrícula 20260145
      Grado
      5º Primaria
      Ciclo escolar 2026 - 2027
      Responsable
      Laura Ramírez
      ``` **Acción de editar** — Botón punteado en azul con lápiz y el nombre de lo que edita: «Editar contacto», «Editar estudiante», «Editar grado». Va al final del bloque. Si no se puede editar en ese momento, el mismo botón aparece con candado, atenuado, y explica el motivo al pasar el cursor. ```blade
      ``` **Pestañas y filtros** ```blade
      ``` **Línea de tiempo por día** — Un encabezado por día y tres tipos de entrada: las notas y actividades llevan avatar del autor y una burbuja con el texto; los cambios de estado son una sola línea con etiquetas «antes → después»; el autor siempre se muestra: en las notas va en negrita y en los demás eventos junto a la hora. Si un comentario se repite en eventos seguidos, se escribe una sola vez. ```blade
      Hoy
      1. En revisiónAprobado· pasa a ConfirmaciónLaura Ramírez · 11:57 a. m.
      2. Laura Ramírezagregó una nota11:49 a. m.
        Entregó la documentación completa.
      3. Laura RamírezregistróCita11:40 a. m.
        Visita al plantel y entrega de documentos.
      Ayer
      1. Respuesta recibidaMaría López · 4:12 p. m.
        Gracias, adjunto el acta de nacimiento que faltaba.
      ``` **Fila de bandeja de mensajes** — Flecha de dirección, remitente, asunto en negrita si no se ha leído, extracto de una línea y estado. ```blade
      ```