Novedad de catálogo
Nuevas tarifas indexadas de Factor Energía
Tres tarifas con indexación a OMIP-D+1, descuento del 4% sobre potencia y permanencia anual.
EnergyDesk · 2026
Sistema de diseño para asesorías energéticas.
Tokens, componentes y pautas de uso para construir un CRM claro y profesional. Verde corporativo como acento, neutros como cimiento, datos siempre legibles.
01 · Fundamento
Marca
El identificador es un cuadrado verde corporativo con la letra N y la tipografía Manrope a 700. Funciona en claro y sobre fondo verde oscuro. Reserva mínima: la altura del cuadrado a cada lado.
N
Natur
Consulting
Consulting
N
EnergyDesk
N
Natur
Consulting
Consulting
Tamaños recomendados: 28px (sidebar colapsado), 36px (sidebar), 44px (header), 64+px (login y onboarding). Usa el cuadrado solo en versiones de UI; los cierres de presentación llevan también el wordmark.
02 · Fundamento
Tipografía
Manrope para toda la interfaz: alto contraste de pesos y formas humanistas que se leen muy bien en tablas. JetBrains Mono para datos técnicos (CUPS, kWh, IDs). Una sola familia + monospace de apoyo: menos decisiones, más coherencia.
Manrope · Variable
Aa
400500600700800
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 €kWh@
abcdefghijklmnopqrstuvwxyz
0123456789 €kWh@
JetBrains Mono
01
400500600
ES0031400000001001AA
0,118 €/kWh · 24/06/2026
0,118 €/kWh · 24/06/2026
Escala
Displaydisplay
Asesoría energética
Heading 1h1
Clientes
Heading 2h2
Nueva comparativa
Heading 3h3
Base de cálculo
Body largebody-lg
Ahorro real conectado al catálogo de energía actualizado a diario.
Bodybody
Selecciona al menos una comercializadora. Si quieres, afina también por tarifas según el CUPS del suministro.
Body smallbody-sm
Industria alimentaria · Apartamentos turísticos
Captioncaption
Última actualización 15/08/2026 a las 09:14
Overlineoverline
Ahorro total acumulado
Monomono
ES0031400000001001AA · 0,118 €/kWh
Reglas de uso
Color de texto
Sigue esta jerarquía estricta:
- #000000 · titulares (H1, H2)
- #0D0D0D · valores destacados y H3
- #525252 · cuerpo de texto, descripciones
- #767676 · texto secundario, captions
- #9A9A9A · placeholders
No
- No uses pesos < 400 en interfaz.
- No mezcles Manrope con otra sans.
- No pongas mono en titulares; reserva para datos.
- No bajes el cuerpo por debajo de 12px.
- No uses cursivas para énfasis; usa peso 700.
03 · Fundamento
Color
Paleta corporativa basada en dos verdes y un eje neutro. El verde se usa con mesura: marca, acentos y refuerzo de KPIs positivos. El resto de la interfaz vive en blancos y grises para que los datos respiren.
Corporativos
Neutros · ink
1000#000000
900#0D0D0D
700#2A2A2A
600#525252
500#767676
400#9A9A9A
300#C9C9C9
200#E4E4E4
150#ECECEC
100#F2F2F2
50#F7F7F7
bg#FFFFFF
Tintes de marca
Semánticos
Contraste AA — combinaciones validadas
| Combinación | Muestra | Ratio | Uso | AA |
|---|---|---|---|---|
| #525252 sobre #FFFFFF | Texto | 7.6 : 1 | Cuerpo de texto | AAA |
| #000000 sobre #FFFFFF | Título | 21 : 1 | Titulares | AAA |
| #FFFFFF sobre #214D00 | Botón | 10.8 : 1 | Botón primario | AAA |
| #FFFFFF sobre #1F6B00 (Bajo) | Bajo | 6.7 : 1 | Badge éxito | AAA |
| #FFFFFF sobre #B45309 (Medio) | Medio | 5.9 : 1 | Badge advertencia | AA |
| #FFFFFF sobre #C42018 (Alto) | Alto | 6.0 : 1 | Badge crítico | AAA |
| #C42018 sobre #FCE7E5 (notif) | 2 en foco | 5.4 : 1 | Banner alerta | AA |
| #357A00 sobre #FFFFFF | 847€ | 5.0 : 1 | Datos de ahorro | AA |
Cualquier nueva combinación debe verificarse antes de entrar al sistema. El verde 700 sobre blanco roza el límite AA (4.5) — úsalo siempre en peso 600+ para datos numéricos.
Reparto recomendado en pantalla
El verde debe ocupar un máximo del 10% de la superficie. Si una pantalla pide más, replantéala — probablemente el énfasis está mal distribuido.
04 · Fundamento
Espaciado, radios y sombras
Sistema en base 4: previsible, divisible por 2 y 8, fácil de aplicar en cualquier rejilla. Las sombras son discretas — usadas casi solo en flotantes (toasts, modales, menús).
Escala de espaciado · base 4
--s-14px
--s-28px
--s-312px
--s-416px
--s-520px
--s-624px
--s-832px
--s-1248px
Radios
--r-xs4px · checkboxes
--r-sm6px · badges, page
--r-md8px · botones, inputs
--r-lg10px · cards, tablas
--r-xl14px · modales
--r-pillfull · filtros, pasos
Sombras
--sh-1Discreta · hover de fila
--sh-2Media · toasts, dropdowns
--sh-3Alta · modales, overlays
05 · Fundamento
Iconografía
Set Lucide a trazo 1.75. Tamaños: 14, 16, 18, 20, 24. En interfaz, los iconos llevan el color del texto que acompañan. En estados (toasts, badges), heredan el color semántico.
store
file-text
calendar
sliders
bell
clock
users
search
zap
wave
repeat
euro
grid
arrow-right
arrow-left
alert
El sidebar usa los iconos a 18px; los headers de tabla a 14px; los KPIs prescinden de icono — el dato manda. Los iconos no deben llevar color verde corporativo salvo en estados de éxito explícito.
06 · Componente
Botones
5 variantes y 3 tamaños. Primary (verde 900) para acciones definitivas; secondary (verde 700) para confirmaciones secundarias; outline y ghost para el día a día; danger para destrucciones.
primary
secondary
outline
ghost
danger
tamaños
Un único botón primary por sección. El verde claro (700) se reserva para acciones de creación. Botones con icono: el icono va a la izquierda en acciones de creación; a la derecha en navegación (Siguiente, Continuar).
07 · Componente
Inputs y formularios
Altura unificada en 40px. Foco con halo verde (--sh-focus) para mantener accesibilidad de teclado. El buscador usa fondo gris claro y bordes redondos para distinguirse de los inputs de formulario.
Razón social tal como figura en el contrato.
8 caracteres alfanuméricos.
Introduce un email válido.
Filtros y buscador
Controles
Adjuntar archivo
Seleccionar archivo
Adjunta una factura o CUPS para afinar la comparativa. Compatibles: PDF, JPG, PNG, Excel, Word.
08 · Componente
Badges y chips
Tres niveles de riesgo (Alto, Medio, Bajo) más estado y categoría. Versión solid para tablas — alto contraste con texto blanco y AA garantizado. Versión soft para zonas con mucha densidad de información.
Riesgo · solid
Alto
Medio
Bajo
Riesgo · soft
Alto
Medio
Bajo
Estado · neutral
Lead
Cualificado
Propuesta
Contratado
Pend. Firma
En Gestión
Esp. Respu.
Chips de categoría
Renovación · Luz
Nueva alta · Gas
Cambio comercializadora
Ahorro confirmado · 847€
Ancho mínimo del badge: 44px. Solo texto, sin iconos en los de riesgo. Si necesitas un icono usa el patrón
soft + punto del mismo color.09 · Componente
Avatares
Las empresas usan avatar cuadrado redondeado con iniciales (diferencia clara frente a personas). Las personas usan avatar circular con foto o iniciales. Color de fondo siempre neutro: las empresas no llevan color de marca.
Empresas (cuadrado redondeado)
AC
SN
CV
ML
HD
AA
+12
Personas (círculo)
MS
JP
LR
CD
Tamaños
SN
SN
SN
SN
Para grupos solapados, separación de -8px y borde de 2px del color del fondo. Las iniciales se generan en mayúscula con las primeras letras del nombre comercial; si una palabra es "SL/SA/SLU" se ignora.
10 · Componente
KPI cards
Tres variantes: default blanco para datos neutros; accent verde claro para destacar el dato hero de la pantalla (un único accent por vista); dark para resúmenes ejecutivos. Etiqueta superior en overline, valor a 32px, delta opcional.
Comparativas realizadas
24
↑ 18%
Este mes · vs. abril
Ahorro total acumulado
4.820 €
Datos contractuales firmados
Media de ahorro
201 €
↑ 7%
por comparativa
Cartera total
128
clientes activos · 312 suministros
Variante tarjeta de proceso
Trámites activos
16
Incidencias
2
Esperando respuesta
1
Vence pronto
2
próximos 7 días
La etiqueta es siempre overline (11px, 700, 0.08em, mayúsculas). El delta hacia arriba en éxito; hacia abajo en danger — nunca al revés (un ahorro que baja sigue siendo ahorro, pero en la cartera "bajar" indica problema).
11 · Componente
Tablas
Patrón único para todas las pantallas de listado. Cabeceras 12px en bold con icono de orden. Filas a 13px con avatar de empresa, nombre principal y subtítulo de sector. Fechas en color semántico según urgencia.
| Cliente ↕ | Estado ↕ | Riesgo ↕ | Trámites ↕ | Suministros ↕ | Vencimiento ↕ | Portal ↕ |
|---|---|---|---|---|---|---|
|
AC
Almazara Campos del Segura SL Agroalimentario |
Propuesta | Alto | 0 | 2 | 31/05/2026 | Activa |
|
SN
Sierra Norte Frío Industrial SL Industria alimentaria |
Lead | Bajo | 1 | 1 | 15/08/2026 | Sin activar |
|
CV
Costa Viva Apartments SL Apartamentos turísticos |
Cualificado | Medio | 1 | 1 | 02/06/2026 | Activa |
|
ML
Molina Logística de Flotas SL Logística |
Contratado | Medio | 1 | 1 | 24/06/2026 | Sin activar |
|
AA
Aurora Artesana Obrador Panadería artesana |
Contratado | Bajo | 2 | 1 | 16/09/2026 | Sin activar |
Variante con datos monetarios
| Cliente | Comercializadora / Tarifa | CUPS | Fecha | Ahorro estimado |
|---|---|---|---|---|
|
SN
Sierra Norte Frío Industrial SL Industria alimentaria |
Enérgya VM · 0,124 €/kWh | ES0031400000001001AA | 15/08/2026 | 847 € |
|
HD
Helios Dental Studio SL Clínica dental |
Repsol · 0,114 €/kWh | ES0031400000001001AA | 26/06/2026 | 570 € |
|
AA
Aurora Artesana Obrador Panadería artesana |
Naturgy · 0,128 €/kWh | ES0031400000001001AA | 16/09/2026 | 1.023 € |
Reglas: alineación a la derecha para datos monetarios y porcentajes; números con tabular-nums para que las columnas no bailen; hover en fila con
--ink-50; click en fila lleva al detalle.12 · Componente
Paginación
Centrada bajo la tabla. Página activa en negro 100% con texto blanco; el resto en texto gris. Sin bordes para no competir con la tabla.
Para tablas largas, complementa con un selector "filas por página" alineado a la derecha (20 · 50 · 100). Cuando hay < 2 páginas, la paginación se oculta.
13 · Componente
Acordeón con selección múltiple
Patrón para filtros jerárquicos: comercializadora → tarifas, sector → subsectores. Tres estados encadenados — cerrado, abierto sin selección y abierto con selección parcial. Las filas seleccionadas se elevan en blanco sobre el gris del contenedor para distinguirse a golpe de vista.
Cerrado
Enérgya VM 5 tarifas
Factor Energía 4 tarifas
Gana Energía 2 tarifas
Abierto, sin selección
Enérgya VM 5 tarifas
Enérgya VM · A tu medida 12m Baleares
Luz 2.0TD
Enérgya VM · A tu medida 12m Canarias
Luz 2.0TD
Enérgya VM · A tu medida 12m Barcelona
Luz 2.0TD
Enérgya VM · A tu medida 12m Madrid
Luz 2.0TD
Enérgya VM · A tu medida 12m Valencia
Luz 2.0TD
Abierto, con selección parcial
Enérgya VM 5 tarifas
Enérgya VM · A tu medida 12m Baleares
Luz 2.0TD
Enérgya VM · A tu medida 12m Canarias
Luz 2.0TD
Enérgya VM · A tu medida 12m Barcelona
Luz 2.0TD
Enérgya VM · A tu medida 12m Madrid
Luz 2.0TD
Enérgya VM · A tu medida 12m Valencia
Luz 2.0TD
Reglas: marcar el padre sin hijos significa “aplicar la regla por defecto” (todas las visibles); al seleccionar hijos, el padre se autoselecciona y muestra el contador (
N Seleccionadas). El click sobre toda la fila marca/desmarca — no solo el checkbox — para mejorar la accesibilidad a clic.15 · Componente
Modales y stepper
Los procesos multipaso (nueva comparativa, alta de trámite…) usan modal centrado con stepper en píldoras. Paso activo en verde 900; pasos anteriores en gris oscuro. La barra entre pasos refuerza el progreso lineal.
Nueva comparativa
Paso 1
Paso 2
Paso 3
Acota el mercado
Selecciona al menos una comercializadora. Si quieres, afina también por tarifas.
Compañías
Enérgya VM 5 tarifas
Enérgya VM · A tu medida 12m Baleares
Luz 2.0TD
Enérgya VM · A tu medida 12m Canarias
Luz 2.0TD
Enérgya VM · A tu medida 12m Barcelona
Luz 2.0TD
Enérgya VM · A tu medida 12m Madrid
Luz 2.0TD
Enérgya VM · A tu medida 12m Valencia
Luz 2.0TD
Factor Energía 4 tarifas
Gana Energía 2 tarifas
Ignis 4 tarifas
Logos 3 tarifas
Resumen base activa
EnergíaLuz
Tarifa2.0TD
ModoSemi-automática
16 · Componente
Toasts y notificaciones
Cuatro variantes según severidad. Aparecen abajo-derecha apilados con 8px de separación, con sombra --sh-2. Auto-dismiss a 6s salvo en danger, que pide acción del usuario.
Comparativa guardada
Sierra Norte Frío · ahorro estimado 847€/año.
2 clientes con contrato a vencer
Revisa Almazara Campos del Segura y Costa Viva en los próximos 7 días.
Distribuidora ha rechazado el alta
Trámite ES0031… requiere corrección de potencia contratada antes del 02/06.
Catálogo de tarifas actualizado
112 tarifas activas · base recalculada hace 4 min.
Banner inline (en header)
El banner inline en el header está pensado para alertas que requieren atención pero no bloquean. Texto siempre positivo (qué pasa, no qué falla): "2 clientes en foco alto", no "Error: clientes con riesgo".
17 · Fundamento
Elevación · 5 niveles
Ampliación de las sombras documentadas. Cada nivel tiene un uso claro — no las mezcles dentro de un mismo componente. La elevación es información: indica jerarquía e interactividad.
elev-0--sh-0 · borde
Cards estáticas, tablas, inputs.
elev-1--sh-1 · sutil
Hover de fila, KPI elevado.
elev-2--sh-2 · media
Dropdowns, popovers, toasts.
elev-3--sh-3 · alta
Modales, drawers, overlays.
elev-4scrim + sombra
Modales sobre fondo oscuro.
Regla de oro: a más elevación, más temporal. Un modal está más alto que un dropdown porque desaparece más rápido y bloquea más. La elevación nunca debe usarse decorativamente.
18 · Fundamento
Imágenes y media
Placeholders para fotos reales del cliente, logos de comercializadoras, miniaturas de facturas y vídeos formativos. Los placeholders rayados sirven en mockups; en producción se reemplazan por imagen real o iniciales.
Ratios estándar
16 · 9 · hero
4 · 3 · card
1 · 1 · thumb
Imagen con overlay y caption
Almazara Campos del Segura SL · Línea de envasado nueva
Vídeo embed
Cómo lanzar una comparativa semi-automática · 2:14
Logos de comercializadoras
EV
Enérgya VM
FE
Factor Energía
GE
Gana Energía
IG
Ignis
LG
Logos
Adjuntos / miniaturas
PDF
Factura junio 2026
2,4 MB · 02/06/2026
XLS
Histórico consumo
128 KB · 15/05/2026
Contador trifásico.jpg
880 KB · hoy
Los logos reales de comercializadoras siempre van encapsulados en este componente (24×24 mark + nombre); nunca sueltos. Esto previene problemas de identidad visual de terceros y mantiene la cuadrícula.
19 · Componente
Cards
Cuatro variantes según el tipo de información: solo texto, texto + imagen, hero ilustrado y card de feature/recurso. Los KPI cards (sección 10) son una variante distinta — usa el tipo correcto para cada caso.
Solo texto
Aviso normativo
Subida del peaje de acceso 2.0TD
La CNMC publica la nueva propuesta. Estimación de impacto en cartera disponible mañana.
Soporte
Cómo cerrar liquidaciones de fin de mes
Checklist en 6 pasos para asegurar que ninguna comisión queda fuera del cierre.
Imagen + texto
Caso de éxito
Sierra Norte ahorra 8.460 € en un año con cambio a Enérgya VM
El cambio a una tarifa indexada con discriminación horaria redujo la factura un 19% interanual, manteniendo la potencia contratada.
Vídeo · 2:14
Lanza tu primera comparativa semi-automática
De la subida de la factura al PDF de propuesta firmado, en 6 pasos.
Card hero (resumen)
Foco de la semana
5 clientes con contrato a vencer en julio
Tienes 32 días para preparar propuesta, comparativa y firma. Empieza por Almazara Campos del Segura, ahorro potencial estimado 1.240€.
Reglas: una sola card hero por pantalla; las cards de imagen+texto piden mínimo 240px de ancho; el eyebrow es siempre overline con color de marca cuando indica categoría.
20 · Componente
Dropdowns y menús
Tres patrones: selector simple, selector con búsqueda y menú de acciones. Aparecen anclados al disparador, con elevación 2, y se pueden cerrar con Esc o click fuera.
Selector simple · "Estado"
Estado del cliente
Lead42
Cualificado28
Propuesta17
Contratado41
Multi-select con búsqueda
Menú de acciones · fila
Ver detalle
Editar
Nueva comparativa
Añadir trámite
Exportar ficha
Archivar cliente
Animación de apertura: 80ms ease-out, opacidad 0→1 + translateY(4px→0). El item activo lleva fondo
--ink-50, no verde — el verde solo aparece al marcarse en multi-select.21 · Componente
Tooltips
Para explicar abreviaturas (CUPS, kWh), acciones de icono y atajos de teclado. Dos variantes: oscuro (por defecto, alto contraste) y claro (cuando va sobre fondo oscuro). Aparecen a 8px del trigger; tarda 300ms en aparecer al hacer hover.
CUPS de 22 dígitos
CUPS
Nuevo cliente N
2 comparativas activas · ahorro total 1.420€
Comparativas
No uses tooltip para información esencial (debe estar visible en pantalla). Reserva para: definiciones técnicas, atajos de teclado, descripciones largas de un dato truncado.
22 · Componente
Tabs
Dos variantes: tabs subrayadas para navegación interna de una ficha (Detalle, Suministros, Trámites…) y pill tabs para alternar vista de datos (Tabla / Tarjetas / Mapa) sin cambiar de página.
Subrayadas · ficha de cliente
Pill · alternar vista
Las tabs subrayadas pueden tener contador; las pill no. Si tienes más de 8 tabs, considera convertir las menos usadas en un menú "Más ▾".
23 · Componente
Empty states
Aparecen cuando una vista está vacía por estado natural (sin trámites) o por filtros aplicados. Siempre con: icono neutral, título corto, mensaje explicativo, y CTA opcional. Tono: positivo, nunca culpabilizante.
Aún no hay trámites
Cuando crees una propuesta o un cambio de comercializadora, aparecerá aquí con su estado y próximos pasos.
Ningún resultado para "almazara"
Prueba con otra búsqueda o limpia los filtros de Estado y Riesgo.
Sin contratos próximos a vencer
Todos los suministros activos tienen vencimiento a más de 90 días. Volveremos a avisar cuando alguno entre en ventana.
Todo al día
No tienes incidencias abiertas ni trámites bloqueados. Buen momento para preparar la próxima comparativa.
24 · Componente
Loading states
Spinners para cargas <1s, skeletons para listados >1s, barras de progreso cuando conocemos el avance (carga de factura, cálculo de comparativa, generación de PDF).
Spinner
Calculando ahorro…
Barra de progreso
Subiendo factura.pdf64%
Generando comparativaen curso
Conexión con distribuidoratimeout
Skeleton · tabla cargando
Regla: nunca uses spinner para esperas >3s sin contexto — usa skeleton o barra de progreso. El skeleton debe respetar la silueta del contenido real (mismas columnas, mismos espacios) para que la transición sea continua.
25 · Componente
Date picker
Calendario inline con selección simple o de rango. Día actual con anillo, días seleccionados en negro (simple) o verde con relleno (rango). Domingos y festivos heredan el color de texto base — no decoramos por defecto.
Selección simple
Junio 2026
L
M
X
J
V
S
D
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
Rango
Junio 2026
L
M
X
J
V
S
D
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
Rangos rápidos
26 · Componente
Validación de formularios
Tres niveles de mensaje: error, éxito e info. Siempre con icono, color semántico y texto explicativo (qué pasa + cómo arreglarlo). La validación es siempre inline bajo el campo — nunca solo con borde rojo.
Formato inválido. El CIF tiene 8 caracteres alfanuméricos sin guiones.
Email verificado en el portal de cliente.
SIPS consultado · suministro activo en Endesa desde 2022.
Está por encima del consumo medio (38 kW). Considera ajustar antes de la comparativa.
Validación en cabecera de formulario
El formulario tiene 2 errores
Revisa el CIF y la potencia P1. El resto de campos están correctos.
Reglas: el mensaje aparece después de salir del campo (blur), no al teclear. Excepto en validaciones críticas (CUPS, CIF) donde sí validamos en vivo cuando el formato está completo.
27 · Componente
Drawer · panel lateral
Vista de detalle rápida que se abre desde la derecha sin sacar al usuario del listado. Ideal para inspeccionar un cliente o trámite y volver. Acciones primarias en el footer; cerrar con Esc o click fuera.
Almazara Campos del Segura SL
Agroalimentario · 2 suministros · cliente desde 2022
Riesgo alto
Propuesta
Portal activo
Suministros
Luz · 2.0TD · 65 kW
ES0031400000001001AA
Gas · RL.3
ES0031400000002001BB
Próxima acción
Enviar propuesta firmada antes del 26/05/2026. Cliente prefiere comunicación por email.
Anchos disponibles: sm (380px) para confirmaciones, md (460px) para detalle rápido (default), lg (640px) para edición. Por encima de eso usa modal o página completa.
28 · Componente
Modales · tamaños y confirmación
Cuatro tamaños según contenido y un patrón especial para confirmaciones destructivas. Los modales grandes (lg, xl) son para procesos guiados; el de confirmación es siempre pequeño y centrado.
Confirmación destructiva
¿Archivar este cliente?
Almazara Campos del Segura SL pasará a la carpeta de archivados. Sus comparativas y trámites quedarán visibles solo en modo lectura. Puedes restaurarlo en cualquier momento.
Modal pequeño · sm (420px)
Asignar a un compañero
Este trámite pasará a su bandeja con notificación inmediata.
Tamaños disponibles
sm420 · 28pad
Confirmación, asignar.
md560 · 32pad
Formularios cortos.
lg800 · 40pad
Stepper de comparativa.
xl1080 · 40pad
Edición masiva, tablas.
Reglas: el botón destructivo siempre va a la derecha, el ghost de cancelar a la izquierda. En confirmaciones, el icono lleva el color semántico (danger / warning) sobre tinte suave. El scrim del fondo es negro al 45% de opacidad.
29 · Patrón
Filtros activos, bulk actions y toolbar
Tres elementos que viven encima de las tablas: el resumen de filtros aplicados, la barra que aparece al seleccionar varias filas, y la toolbar permanente con acciones de vista.
Filter chips activos
Filtros
Estado: Contratado
Riesgo: Alto
Vencimiento: 10/06 – 17/06
Comercializadora: 2 seleccionadas
12 resultados
Bulk action bar (al seleccionar filas)
Toolbar de tabla
El orden de aparición es: toolbar (siempre) → filter chips (si hay filtros) → bulk bar (si hay selección). La bulk bar se superpone in-page con animación slide-up; no es modal — el usuario sigue viendo la tabla por detrás.
30 · Patrón
Breadcrumbs y header de página
Patrón de encabezado de página: breadcrumbs opcionales para detalles anidados, título H1, subtítulo, espacio para alerta global, y la zona derecha con campana y avatar.
Breadcrumbs
Header de página con alerta
Almazara Campos del Segura SL
Agroalimentario · CIF A12345678 · cliente desde marzo 2022
MS
Header simple (listado)
Trámites
Expedientes, prioridades y fechas clave
31 · Componente
Stepper avanzado · con iconos y estados
Variante del stepper para procesos largos (tramitación con la distribuidora) donde cada paso puede acabar en completado, en curso, pendiente o error. Más informativo que el stepper de pasos numerados de un modal.
Proceso lineal · Alta de suministro
Comparativa14/05/2026
Propuesta firmada17/05/2026
3
Enviado a distribuidoraEsperando confirmación
4
Activación—
Con paso en error
Comparativa14/05/2026
Propuesta firmada17/05/2026
Rechazo de distribuidoraPotencia P1 fuera de rango
4
Activación—
Un paso en error siempre debe ofrecer acción de resolución en el detalle del trámite. El error rompe la barra (no se rellena hasta resolverlo) y el último paso queda pendiente. Cuando se reintenta, el paso vuelve a estado "en curso".
32 · Componente
Avatares apilados
Cuando un trámite o cliente tiene varias personas asignadas. Solapamiento de -10px con borde 2px del color del fondo. Más de 4 → resumen "+N" en gris oscuro.
Equipo asignado al trámite
MS
JP
LR
MS
JP
LR
CD
+8
MS
JP
+4
Para empresas con varios contactos comerciales, usa avatares cuadrados redondeados apilados (no círculos) para que se distingan de personas internas del equipo.
33 · Componente
Gráficos
Cuatro tipos cubren el 95% de los datos del CRM: line para evolución temporal (ahorro acumulado), bar para volúmenes mensuales (suministros, comparativas), donut para reparto categórico (cartera por sector) y sparkline embebido en KPIs y tablas.
Ahorro acumulado
4.820 €
Últimos 6 meses
↑ 18% vs. periodo anterior
Comparativas por mes
24
Mes en curso
Cartera por sector
128
Clientes activos
Agroalimentario · 40%
Industria · 26%
Hostelería · 18%
Otros · 16%
Sparklines en KPI
en línea con valor
Versión compacta para tablas y cards
Ahorro mensual
847 €
Trámites cerrados
16
Incidencias abiertas
2
Paleta de gráficos: verde 900 (primaria), verde 700 (secundaria), ink-600 (gris medio), ink-300 (gris claro). En donuts hasta 4 segmentos; si hay más, agrupa el resto en "Otros". Para datos negativos usa danger sin gradiente.
34 · Patrón
Detalle 2 columnas y definition list
Layout de ficha: a la izquierda los datos clave en listado clave-valor, a la derecha el contexto (estado, asignados, próxima acción). Permite escanear ficha completa sin scroll en pantallas medianas.
Datos contractuales
- Razón social
- Almazara Campos del Segura SL
- CIF
- A12345678
- Sector
- Agroalimentario
- Dirección
- Ctra. Murcia-Cartagena km 14, 30156 Lobosillo
- Contacto comercial
- Pilar Campos · pilar@almazaracampos.com
- Comercializadora actual
- Endesa · 0,128 €/kWh
- Tarifa
- 2.0TD · luz · 65 kW P1
- CUPS
- ES0031400000001001AA
- Vencimiento
- 31/05/2026 · en 8 días
- Cliente desde
- Marzo 2022
Estado
Riesgo alto
Propuesta
Portal activo
Equipo asignado
MS
JP
María Soler
+ Javier Pérez (soporte)
Próxima acción
Enviar propuesta firmada antes del 26/05/2026.
35 · Patrón
Timeline de actividad
Historial cronológico de un cliente o trámite. Cada entrada lleva quién, qué, cuándo, y opcionalmente la referencia al elemento afectado (comparativa, documento). Las acciones del sistema y las personas usan el mismo formato; varía solo el icono.
María Soler
Firmó la propuesta y la envió a distribuidora.
Hoy · 14:22
Propuesta_AlmazaraCampos_v3.pdf
Javier Pérez
Generó comparativa con 5 comercializadoras · ahorro estimado 847€/año.
Ayer · 17:08
Sistema
Distribuidora rechazó alta de gas · potencia P1 fuera de rango.
17/05/2026 · 09:14
Ver respuesta de distribuidora
María Soler
Asignó este cliente al equipo "Cuentas estratégicas".
14/05/2026 · 10:42
Sistema
Importó factura de mayo · CUPS reconocido automáticamente.
10/05/2026 · 03:00
El icono del dot indica el tipo de evento (firma, comparativa, documento, asignación, error). Los eventos del Sistema llevan icono pero no avatar; las personas se referencian por nombre — el avatar real va en el detalle si se necesita.