Style Guide — Webservise

Colores

Variables en tokens.css + themes.css. Rampa neutra --gray-0…--gray-11 (oscuro y claro) + aliases semánticos. Nunca hardcodear hex en páginas.

Escala de grises

Mismo índice = mismo rol en ambos temas (0 canvas → 11 más elevado / contraste). Para matices finos usá la rampa; en componentes preferí aliases (--color-shell, --color-input…).

0

1

2

3

4

5

6

7

8

9

10

11

Aliases semánticos

Accent (marca)

--color-accent ← --color-primary

Content (lienzo)

--color-content → gray-1

Shell (sidebar + header)

--color-shell

Rail

--color-rail

Surface sunken

--color-surface-sunken

Surface (cards)

--color-surface

Surface raised

--color-surface-raised

Surface elevated

--color-surface-elevated

Input / buscador

--color-input

Surface hover

--color-surface-hover

Border subtle

--color-border-subtle

Border

--color-border

Border strong

--color-border-strong

Text primary

--color-text

Text secondary

--color-text-secondary

Text muted

--color-text-muted

Success

--color-success

Info

--color-info

Warning

--color-warning

Purple

--color-purple

Temas y color principal

Modo claro/oscuro en themes.css (data-theme en <html>). Color principal configurable vía WebserviseTheme.setPrimary('#hex') — persiste en localStorage. En componentes usar siempre --color-accent, nunca --color-primary directo.

12 Texto accent

Tipografía

Familia: Inter (--font-family).

Heading 2xl — 28px bold

Heading xl — 24px semibold

Heading lg — 18px semibold

Body md — 16px regular

Body base — 14px regular

Body sm secondary — 13px

Caption xs muted — 11px

Label caps — secciones sidebar

Radius y bordes

Usar tokens de radius. Bordes: --color-border-subtle, --color-border o --color-border-strong.

Token	Valor	Uso
`--radius-sm`	6px	Badges internos, shortcuts
`--radius-md`	8px	Botones, inputs, nav items
`--radius-lg`	12px	Cards, paneles
`--radius-xl`	16px	Modales (futuro)
`--radius-full`	9999px	Avatares, badges circulares

Iconos

Librería Lucide (estilo Linear: trazo fino, sin relleno). Uso: <i data-lucide="nombre"></i>. Ver catálogo en lucide.dev. Stroke: 1.5. Tamaños vía .icon--sm (16px), .icon--md (18px), .icon--lg (24px).

Contexto	Tamaño	Clase contenedora
App rail	20px	`.app-rail__icon`
Sidebar nav	16px	`.sidebar__icon`
Botones	14px	`.btn`
Botón icon-only	18px	`.btn--icon`
Stat card KPI	18px	`.stat-card__icon`
Empty state	32px	`.empty-state__icon`
Input búsqueda	16px	`.input-group__icon`

Regla: nunca emojis en la UI. Siempre iconos Lucide.

App rail

Barra de sistema a la izquierda (.app-rail, fondo --color-rail) para cambiar entre las grandes secciones del Admin (Trabajo, Equipo, Mail, Chat…). Se mantiene oscura en ambos temas, el ítem activo usa un recuadro accent y las etiquetas van en mayúsculas. El menú contextual (.sidebar) cambia según la sección activa.

Tareas / Proyecto

Sección tipo proyecto (inspiración Asana). Estilos en assets/css/tareas.css. Una sola lista de tareas en assets/js/tareas.js alimenta las vistas list, board, calendar y panel. Las pestañas se pueden reordenar (drag); la primera es la vista predeterminada. Tags: .task-tag + modificador de color.

Flota ART Alto Caución Medio Bajo

Contactos de compañías

Agenda del productor agrupada por compañía. Estilos en assets/css/contactos.css. Exportación lista: .vcf (iPhone, Android, Apple, Google) y CSV de Google Contacts. Sync nativo Google (People API) y Apple (CardDAV) queda documentado como próximo: Apple no ofrece API web pública comparable.

Botones

Clase base .btn + modificador.

Inputs

Clase .input. Para búsqueda con icono: .input-group.

⌘K

Cards

Clase .card. Header opcional con título y link.

Disponible próximamente

Sin vencimientos en los próximos 60 días

Stat cards (KPIs)

Clase .stat-card con icono semántico.

0

Pólizas vigentes

0

Clientes captados

0

Siniestros pendientes

0

Tareas pendientes

Badges

Notificaciones en sidebar y contadores.

12 4 8 1 Draft

Empty states

Clase .empty-state para cuando no hay datos.

Sin movimientos en las últimas 48 horas

La actividad reciente aparecerá acá cuando haya novedades.

Agenda / Calendario

Componentes de la sección Agenda. Estilos extra en assets/css/agenda.css.

Mini stat cards

Eventos hoy

0

programados

Esta semana

1

lun a dom

Dropdown tipo de calendario

Esquina superior derecha del calendario — .calendar-dropdown. Filtra: Todos, Vencimientos, Cobranzas, Refacturaciones, Tickets, Cumpleaños.

Modal

.modal — diálogo centrado con backdrop. Cerrar con Escape, backdrop o botón ×.

Drawer

Creación de tareas inline (composer en lista, tablero o día) y panel .tasks-day-panel (tareas del día). No usar overlay a pantalla completa para estos flujos.

Panel lateral (Agenda)

Por defecto muestra las tareas de hoy en .calendar-panel__day (solo en vistas Mes y Lista). Al seleccionar otro día en el calendario, lista sus eventos.

Segmented control

Breadcrumbs

FAB Asesor IA

Reglas de uso

Todo componente nuevo se agrega primero acá en el style guide.
Usar siempre variables CSS — nunca colores sueltos. Accent: --color-accent*. Grises: rampa --gray-0…--gray-11 o aliases (--color-shell, --color-surface-sunken, --color-input…).
Tema claro/oscuro: data-theme en <html>. Color principal: --color-primary (solo vía WebserviseTheme).
Las páginas del admin importan los CSS + icons.css y usan clases existentes.
Iconos: siempre Lucide con data-lucide — nunca emojis.
App rail (.app-rail): nav general del Admin, fondo --color-rail (siempre oscuro). Sidebar (.sidebar): navegación contextual de la sección activa.
Sidebar activo: .sidebar__link--active con fondo accent-muted.
Secciones del sidebar: .label-caps en .sidebar__section-label.
Links de acción en cards: .card__link en color accent.