01 · Pasos de proceso — .processing-steps

Muestra el progreso de una operación. Estados: step-done (completado), spinner (en proceso), círculo vacío (pendiente).

02 · Tabla clave–valor — .tabla-wrapper

Dos columnas: etiqueta y valor. Ideal para resúmenes de configuración o datos del empleado. Se estiliza con inline styles directamente en el HTML.

03 · Tabla con encabezados — <table>

Tabla HTML con múltiples columnas. Ideal para comparativas, reportes o datos tabulares. Se estiliza con inline styles en cada celda.

04 · Botón de canvas — .btn-canvas-card

Botón para abrir un panel de canvas. Muestra un ícono, el nombre del recurso y el texto "Presiona para visualizar". Soporta atributos data-canvas-id y data-version para controlar qué panel se abre.

Resumen del EmpleadoPresiona para visualizar

05 · Formulario de canvas — .canvas-form-card

Formulario estructurado para edición de datos dentro de un panel canvas. Cada fila usa dos columnas: etiqueta a la izquierda e input a la derecha. Usa .filled en el input para campos con valor preseleccionado. Los errores de validación van con .canvas-form-error.

Modificacion de datos de empleadoPresiona para visualizar

06 · Formulario de alta — .cfa-grid

Formulario de 2 columnas con secciones organizadas por ícono, inputs tipo underline y botones de acción fijos al pie del panel. Tipos de campo: texto, select con chevron, fecha, y búsqueda con lupa.

Formulario de AltaPresiona para visualizar

07 · Botones primario, secundario y cancelar — .option-select

Tres variantes: opt-primary (azul sólido), opt-secondary (outline azul) y opt-escape (outline rojo).

08 · Botones secundarios en grupo — .option-select

Ejemplo con tres botones opt-secondary consecutivos.

09 · Ejemplo de aplicación — Confirmación HITL — tabla-wrapper + option-select

Combinación de tabla sin encabezado y botones HITL para solicitar confirmación antes de ejecutar una acción crítica. El texto introductorio prepara al usuario, la tabla muestra el resumen de datos y los botones presentan las únicas opciones disponibles sin campo de texto libre.

Antes de enviar, confirma que la información sea correcta: