Version: 1.0 · Fecha: 2026-04-20
Referencia: Manual de identidad visual Nebula ERP 1.4.pdf (30 páginas, 2026-03-08)
Documentar qué elementos del Manual de Identidad Visual Nebula v1.4 se aplican automáticamente en los wireframes que genera el pipeline. Esta página es la traducción operativa del manual corporativo a reglas de CSS, componentes HTML y tokens reutilizables.
Todos los wireframes producidos por 05_render_wireframe.py cumplen este estándar.
| Token | Hex | Uso |
|---|---|---|
--nebula-primary |
#0E58A9 |
Tech Blue. Header de tabla, botones primarios, breadcrumb activo, sidebar item activo, bordes focus |
--nebula-primary-dark |
#163A73 |
Regal Navy. Hover del primario |
--nebula-accent |
#2ABBE2 |
Sky Surge. Enfoque secundario |
--nebula-accent-light |
#6ED3F5 |
Sky Blue |
--nebula-accent-deep |
#0284C7 |
Ocean Blue |
| Token | Hex | Uso |
|---|---|---|
--nebula-ink |
#0D1B2A |
Fondo sidebar |
--nebula-carbon |
#1C1C1C |
Texto principal, bordes de input |
--nebula-iron |
#464646 |
Carbon 80%. Texto secundario |
--nebula-grey |
#868686 |
Carbon 50%. Placeholder, metadatos |
--nebula-silver |
#B0B0B0 |
Carbon 30%. Bordes sutiles, statusbar |
--nebula-platinum |
#F0F0F0 |
Gris claro base. Fondo workspace |
| Token | Hex | Uso | Badge type |
|---|---|---|---|
--nebula-success |
#2E7D32 |
Verde Green. Estados APPROVED, ACTIVE |
success |
--nebula-error |
#D32F2F |
Tomato Jam. Estados REJECTED, errores |
error |
--nebula-warning |
#E6A017 |
Amber Honey. Estados PENDING, advertencias |
warning |
--nebula-info |
#2ABBE2 |
Sky Surge. Informativos | info |
| Token | Valor | Uso |
|---|---|---|
--nebula-primary-15 |
rgba(14, 88, 169, 0.15) |
Fondo filas pares de tabla (zebra) |
--nebula-primary-20 |
rgba(14, 88, 169, 0.20) |
Hover de items |
--nebula-primary-50 |
rgba(14, 88, 169, 0.50) |
Hover de filas completas |
--nebula-carbon-05 |
rgba(28, 28, 28, 0.05) |
Fondo botón secundario |
--nebula-carbon-15 |
rgba(28, 28, 28, 0.15) |
Fondo input deshabilitado |
--nebula-carbon-50 |
rgba(28, 28, 28, 0.50) |
Texto input deshabilitado |
Fuente del CSS: scripts/templates/nebula.css.
Open Sans. Fallback Helvetica Neue, Arial, sans-serif.| Estilo | Clase | Tamaño | Peso | Color |
|---|---|---|---|---|
| Título módulo | .module-title |
36–40pt | 700 | --nebula-carbon |
| Título sección | .section-title |
28–32pt | 600 | --nebula-carbon |
| Encabezado formulario | .form-heading |
24pt | 600 | --nebula-carbon |
| Elemento | .element-label |
18–20pt | 400 | --nebula-iron |
| Cuerpo / labels | body, label |
14–16px | 400 | --nebula-carbon |
| Botones | .btn |
14px | 600 | según variante |
| Meta / auxiliar | .meta-text |
12–13px | 400 | --nebula-grey |
Los 16 iconos usados están precargados en scripts/icons/lucide_icons.py:
search, plus, edit, trash, eye, calendar, x, check, filter, arrow-right, chevron-down, download, upload, home, alert-triangle, info.
Para agregar uno nuevo, copiar su SVG desde lucide.dev y añadirlo al diccionario.
Toda pantalla interactiva sigue la misma estructura global:
┌────────────────────────────────────────────────────────────────┐
│ TOPBAR (80px) · Logo + Búsqueda global + Perfil │
├──────────┬─────────────────────────────────────────────────────┤
│ SIDEBAR │ │
│ (240px) │ WORKSPACE (altura variable) │
│ │ · Breadcrumbs │
│ Inicio │ · Título de sección │
│ ▸ Cont. │ · Contenido (formulario / tabla / dashboard) │
│ Tesor. │ │
│ Presup. │ │
├──────────┴─────────────────────────────────────────────────────┤
│ STATUSBAR (64px) · Conexión + Versión + Usuario + Empresa │
└────────────────────────────────────────────────────────────────┘
Tokens del layout:
| Elemento | Medida | Fondo | Texto |
|---|---|---|---|
| Topbar | alto 80 px | #FFFFFF |
#1C1C1C |
| Sidebar | ancho 240 px (colapsado 96 px) | --nebula-ink #0D1B2A |
--nebula-platinum #F0F0F0 |
| Sidebar item activo | — | --nebula-primary #0E58A9 |
#FFFFFF |
| Workspace | flex | --nebula-platinum #F0F0F0 |
--nebula-carbon |
| Statusbar | alto 64 px | --nebula-silver #B0B0B0 |
--nebula-iron #464646 |
┌──────────────────────────────────┐
│ Valor del campo │ ← fondo #FFFFFF, borde 2px carbon, radius 8px, padding 10-14
└──────────────────────────────────┘
Estados:
--nebula-carbon 2 px.--nebula-primary 4 px + sombra --nebula-accent 30%.--nebula-carbon-15, texto --nebula-carbon-50, borde --nebula-silver.--nebula-error 2 px + mensaje 12 px --nebula-error.┌────────────────────┐
│ ✓ Guardar │ ← fondo #0E58A9, texto #FFF, radius 12px
└────────────────────┘
┌────────────────────┐
│ × Cancelar │ ← fondo carbon-05, borde 2px #0E58A9, texto #0E58A9
└────────────────────┘
╔════════════════════════════════════════════════════════╗
║ Header1 │ Header2 │ Header3 ║ ← fondo #0E58A9, texto blanco
╠════════════════════════════════════════════════════════╣
│ Valor │ Valor │ Valor │ ← fila impar #FFFFFF
├──────────────────────────────────────────────────────────┤
│ Valor │ Valor │ Valor │ ← fila par primary-15
├──────────────────────────────────────────────────────────┤
│ Valor │ Valor │ Valor │ ← fila impar
└──────────────────────────────────────────────────────────┘
--nebula-primary, texto blanco, peso SemiBold.--nebula-primary-15.--nebula-primary-50 (en producto real; en wireframe estático no aplica). ┌──────────────────────────────────┐
│ ⓘ Título del Modal │
├──────────────────────────────────┤
│ │
│ Campo 1 ___________ │
│ │
│ Campo 2 ___________ │
│ │
├──────────────────────────────────┤
│ [Cancelar] [Aceptar] │
└──────────────────────────────────┘
#FFFFFF, radius 12 px, padding 24 px, sombra --nebula-primary 25%.rgba(13, 27, 42, 0.4).alert-triangle (error/warning), info (info), check (success).[Aprobado] ← fondo rgba(46, 125, 50, 0.15), texto #2E7D32
[Rechazado] ← fondo rgba(211, 47, 47, 0.15), texto #D32F2F
[Por Aprobar] ← fondo rgba(230, 160, 23, 0.15), texto #E6A017
[Anulado] ← fondo silver, texto iron
🏠 Inicio › Contabilidad › [Causación de Cuentas - Listado]
└── pill fondo #D9E3F9, texto #0E58A9
Mostrando 1-10 de 45 [‹] [1] [2] [3] [›]
↑
página activa
fondo #0E58A9
[+ Nueva Causación]
↑
fondo #0E58A9, radius 12px,
icono lucide plus 2px
El pipeline soporta 5 tipos (layout.type):
list_viewPantalla de listado con tabla + filtros + acciones + FAB.
Elementos: cabecera workspace (breadcrumbs + título + FAB), filtros (búsqueda + rango fechas), tabla de datos, paginación.
Cuándo usarlo: pantallas principales de consulta (ej. "Listado de Causaciones").
actions_by_state)Cuando las reglas de negocio definen que ciertas acciones solo aplican en ciertos estados (p. ej. "Editar solo si estado = Pendiente"), el wireframe debe reflejarlo visualmente. El renderizador acepta tres niveles de configuración en el YAML de la HU, en orden de prioridad:
| Nivel | Clave YAML | Ámbito | Cuándo usar |
|---|---|---|---|
| 1 | row.enabled_actions: [view, edit] |
Fila específica | Casos puntuales (excepciones manuales) |
| 2 | layout.actions_by_state: {Pendiente: [...], Finalizado: [view]} |
Todas las filas según el texto del badge de estado | Patrón estándar — debe usarse siempre que las RNs enumeran habilitación por estado |
| 3 | layout.actions_per_row: [view, edit, delete] |
Todas las filas sin distinción | Default cuando no hay lógica condicional |
Regla obligatoria: si existe una RN del tipo "El botón X solo se habilita cuando el estado es Y", la HU debe declarar actions_by_state en el layout. De lo contrario el wireframe está divergiendo de las RN y QA puede rechazarlo.
Representación visual: los iconos no habilitados se renderizan con opacity: 0.4, borde silver y cursor not-allowed. El title del icono incluye automáticamente el sufijo "· no aplica en estado <Estado>" para que el lector entienda por qué está gris.
Ejemplo (extracto de HU-TES-001 Crear Diferidos):
layout:
type: list_view
actions_per_row: [view, edit, delete]
actions_by_state:
Pendiente: [view, edit, delete] # permite todo (RN-ALC1-08/09/10)
En proceso: [view, edit] # no permite eliminar
Finalizado: [view] # solo lectura (RN-ALC2-13)
Inactivo: [view]
Detección del estado: el template toma el texto de la primera celda con badge: true de cada fila. Las claves del mapping deben coincidir literalmente con el text del badge (case y acentos sensibles).
Excepción: listados con checkbox de selección múltiple + botón global (patrón de HU-CON-013/014/018 Aprobación/Anulación) no usan actions_by_state. En ese patrón la habilitación vive en el botón global ("Anular" activo si ≥1 fila seleccionada) y actions_per_row queda como [view] estático.
formFormulario con tarjetas agrupadas + tabla embebida opcional + botones.
Elementos: cabecera, form-card por sección con field-group de campos, tabla de detalle opcional con totales, fila de botones.
Cuándo usarlo: pantallas de creación/edición con campos agrupados (ej. "Datos de la Factura").
modalVentana emergente centrada con campos + tabla opcional + botones.
Elementos: header con icono semántico + título, body de texto opcional, groups con campos en grid 2-cols, table opcional, fila de botones.
Cuándo usarlo: ventanas de configuración o búsqueda (ej. "Formato Contable", "Diferido", "Maestro Terceros").
detailVista de solo lectura en grid label-valor.
Elementos: cabecera, form-card con detail-grid (3 columnas de label + valor).
Cuándo usarlo: pantallas de consulta con datos no editables.
wizardFormulario multi-paso con indicador de progreso.
Elementos: steps horizontales con círculos numerados, contenido del paso actual (form-card + fields), navegación (Cancelar / Anterior / Siguiente).
Cuándo usarlo: procesos lineales de 3-5 pasos (ej. "Crear Formato Contable").
Al revisar un wireframe generado, confirma:
nebulaerp y avatar del usuario.#0E58A9 + texto blanco + radius 12 px.carbon-05 + borde 2 px primario + texto primario.list_view con RNs de habilitación por estado: actions_by_state declarado en el YAML y los iconos inaplicables en cada fila visualmente en gris (opacidad 0.4).El manual describe el modo oscuro pero aún no está implementado en el pipeline v1.0. Está previsto para v1.2.
Cuando se implemente, el renderizador aceptará ?mode=dark y aplicará la paleta oscura del manual §21.
El manual §Material You enfatiza accesibilidad. El pipeline respeta:
title.Accesibilidad WCAG AA se valida manualmente al entregar el PDF final; la validación automática está fuera del alcance del pipeline v1.0.
| Version | Fecha | Autor | Descripcion |
|---|---|---|---|
| 1.0.0 | 2026-04-20 | Carlos Torres | Estandar visual documentado |
| 1.1.0 | 2026-04-21 | Carlos Torres | Patrón actions_by_state para listados con habilitación de acciones por estado de fila. Piloto HU-TES-001. CSS icon-btn.disabled con opacity 0.4. Checklist actualizado. |