feat: Design System completo + propuestas branding + social media

- tokens.css: CSS custom properties para Tema A (Industrial) y Tema B (Moderno)
- design-system/index.html: 20 componentes con theme switcher
- social-media/: 3 propuestas de look & feel para redes sociales
- branding/: opciones de branding y look & feel aprobadas
- Brief del proyecto incluido

nexus-autoparts-design-brief.md

@@ -0,0 +1,117 @@
+# Brief: Design System - Nexus Autoparts
+
+**Fecha:** 2026-03-31
+**Cliente:** Iván Alcaraz Salazar
+**Proyecto:** Nexus Autoparts - Sistema POS para refaccionarias
+
+---
+
+## Objetivo
+
+Crear el **Design System completo** para Nexus Autoparts con **selector de 2 temas** (Tema A y Tema B). El design system será la base para las 10 pantallas de la aplicación POS.
+
+---
+
+## Tema A — Industrial Robusto (Dark)
+
+- **Fondo principal:** `#0d0d0d` / `#1a1a1a` / `#252525`
+- **Color accent:** `#F5A623` (amber/dorado)
+- **Texto primario:** `#FFFFFF`
+- **Texto secundario:** `#888888` / `#CCCCCC`
+- **Bordes:** `#333333`
+- **Tipografía títulos:** Barlow Condensed (800, 600)
+- **Tipografía body:** Barlow (400, 700)
+- **Estilo:** Industrial, robusto, dark mode, formas con clip-path diagonal
+- **Botón primario:** Fondo `#F5A623`, texto `#000`
+- **Botón secundario:** Borde `#F5A623`, texto `#F5A623`, fondo transparente
+- **Referencia visual:** `/root/.openclaw/workspace-hugo/nexus-branding/opciones-branding.html` (sección option-a)
+
+## Tema B — Técnico Moderno (Light)
+
+- **Fondo principal:** `#FFFFFF` / `#F8F9FF`
+- **Color accent:** `#FF6B35` (naranja)
+- **Texto primario:** `#1a1a2e`
+- **Tipografía:** Poppins (300, 400, 600, 700)
+- **Estilo:** Limpio, moderno, light mode, puntos grid sutiles como patrón
+- **Referencia visual:** `/root/.openclaw/workspace-hugo/nexus-branding/opciones-branding.html` (sección option-b)
+
+## Implementación de temas
+
+- Usar **CSS custom properties** con `data-theme="industrial"` y `data-theme="modern"`
+- Selector de tema en la pantalla de Configuración
+- Persistir preferencia del usuario
+
+---
+
+## Entregables del Design System
+
+### 1. Tokens de diseño (ambos temas)
+- Paleta de colores completa (primary, secondary, accent, success, warning, error, neutral)
+- Escala tipográfica (h1-h6, body, caption, label, monospace para precios)
+- Espaciado (4px base grid)
+- Bordes y radios
+- Sombras/elevación
+- Breakpoints responsive
+
+### 2. Componentes reutilizables (20 componentes)
+- Botones (primary, secondary, danger, ghost, icon-button)
+- Inputs (text, number, search, select, checkbox, radio, toggle)
+- Cards (producto, cliente, resumen)
+- Tablas (con sorting, paginación)
+- Modales y dialogs
+- Tabs y navegación
+- Badges y tags
+- Toasts/notificaciones
+- Sidebar y header
+- Barras de búsqueda
+- PIN Pad
+- Numpad para cantidades/precios
+- Listas de items (carrito, inventario)
+- Avatares/iniciales
+- Breadcrumbs
+- Dropdowns
+- Tooltips
+- Progress bars
+- Empty states
+- Loading states/skeletons
+
+### 3. Iconografía
+- Set de iconos consistente para POS (carrito, producto, cliente, factura, inventario, dashboard, config)
+
+---
+
+## Pantallas a diseñar (después del design system)
+
+| # | Pantalla | Descripción |
+|---|----------|-------------|
+| 1 | Login (PIN Pad) | Acceso rápido por PIN numérico |
+| 2 | Catálogo | Búsqueda y navegación de productos |
+| 3 | Punto de Venta (POS) | Pantalla principal de venta |
+| 4 | Inventario (7 tabs) | Gestión completa de inventario |
+| 5 | Clientes | CRUD de clientes |
+| 6 | Facturación CFDI | Emisión de facturas SAT |
+| 7 | Contabilidad (7 tabs) | Módulo contable |
+| 8 | Dashboard Dueño | Mobile-first, métricas clave |
+| 9 | Configuración | Incluye selector de tema |
+| 10 | Reportes | Reportes y analytics |
+
+**Referencia completa de pantallas:** `https://git.consultoria-as.com/consultoria-as/Autoparts-DB/src/branch/main/docs/design/pantallas-pos.md`
+
+---
+
+## Asignación de equipo
+
+1. **Milo (UX):** Definir la estructura del design system, tokens, spacing, grid system
+2. **Iris (UI):** Diseño visual de cada componente en ambos temas, paleta completa
+3. **Zara (Frontend):** Implementar CSS variables y componentes base
+4. **Enzo (Content):** Microcopy para estados vacíos, tooltips, labels
+5. **Vera (QA):** Validar consistencia entre temas, accesibilidad (WCAG AA)
+
+## Fase actual: DESIGN SYSTEM (no pantallas aún)
+
+Arrancamos con el design system. Las pantallas se diseñarán una por una después, sin prioridad específica.
+
+---
+
+**Aprobado por:** Iván Alcaraz Salazar
+**Coordinado por:** Lucy (Secretaria Personal)