# 🎨 ADMIN COMPONENTS - DESIGN SYSTEM (MODULARIZADO)

**Manual de Diseño para Componentes de Administración**
Versión 1.0 | APU México

---

## 📑 ÍNDICE DE DOCUMENTACIÓN

Este design system ha sido modularizado en archivos independientes para facilitar su consulta y mantenimiento.

### 📐 FUNDAMENTOS DEL SISTEMA

- [**01-ESPECIFICACIONES-DEL-SISTEMA.md**](01-ESPECIFICACIONES-DEL-SISTEMA.md)
  - Requerimientos generales
  - Stack tecnológico
  - Estructura de archivos

- [**02-FILOSOFIA-DE-DISENO.md**](02-FILOSOFIA-DE-DISENO.md)
  - Principios clave
  - Características comunes

### 🎨 SISTEMA DE DISEÑO VISUAL

- [**03-PALETA-DE-COLORES.md**](03-PALETA-DE-COLORES.md)
  - Colores principales (Navy, Orange, Neutral)
  - Uso de colores por elemento

- [**04-TIPOGRAFIA.md**](04-TIPOGRAFIA.md)
  - Font stack (Poppins)
  - Pesos y tamaños
  - Jerarquía visual

- [**05-SISTEMA-GRID-ESPACIADO.md**](05-SISTEMA-GRID-ESPACIADO.md)
  - Grid de Bootstrap
  - Breakpoints responsive
  - Sistema de espaciado (margin/padding)

### 🏗️ ESTRUCTURA Y COMPONENTES

- [**06-ESTRUCTURA-LAYOUT.md**](06-ESTRUCTURA-LAYOUT.md)
  - Container principal
  - Header del tab (obligatorio)
  - Sistema de grid 2 columnas

- [**07-COMPONENTES-REUTILIZABLES.md**](07-COMPONENTES-REUTILIZABLES.md)
  - Botones (primario, secundario, reset)
  - Inputs (text, color, textarea, select)
  - Cards (estándar, vista previa)

- [**08-PATRONES-FORMULARIOS.md**](08-PATRONES-FORMULARIOS.md)
  - Form switches
  - Color pickers
  - Text inputs con contador
  - Badges y links de ayuda

### 🔄 FUNCIONALIDAD Y COMPORTAMIENTO

- [**09-VISTA-PREVIA-TIEMPO-REAL.md**](09-VISTA-PREVIA-TIEMPO-REAL.md)
  - Estructura HTML del preview
  - Reglas críticas
  - CSS para vista previa

- [**10-RESPONSIVE-DESIGN.md**](10-RESPONSIVE-DESIGN.md)
  - Breakpoints
  - Patrones responsive
  - Media queries

- [**11-JAVASCRIPT-PATTERNS.md**](11-JAVASCRIPT-PATTERNS.md)
  - Inicialización
  - Event listeners
  - updatePreview()
  - Guardar/cargar configuración

- [**12-PERSISTENCIA-JSON.md**](12-PERSISTENCIA-JSON.md)
  - Estructura del config.json
  - Funciones de persistencia
  - Sistema de notificaciones

### 🎛️ PANEL Y ADMINISTRACIÓN

- [**13-PANEL-ADMINISTRACION.md**](13-PANEL-ADMINISTRACION.md)
  - Estructura del panel principal
  - Grid de componentes
  - Patrón para nuevos componentes

- [**14-CONFLICTOS-WORDPRESS.md**](14-CONFLICTOS-WORDPRESS.md)
  - Conflicto con .card
  - Conflicto con form switches
  - Conflicto con alineación vertical
  - Checklist anti-conflictos

### 📚 RECURSOS Y EJEMPLOS

- [**15-EJEMPLOS-COMPLETOS.md**](15-EJEMPLOS-COMPLETOS.md)
  - Ejemplos de campos completos
  - Template básico
  - Checklist de implementación
  - Troubleshooting

### 🎨 TOKENS DE DISEÑO

- [**design-tokens-apus-admin.scss**](design-tokens-apus-admin.scss)
  - Variables SCSS para colores
  - Espaciado
  - Tipografía
  - Sombras y bordes

---

## 🚀 QUICK START

1. **Lee primero:** [01-ESPECIFICACIONES-DEL-SISTEMA.md](01-ESPECIFICACIONES-DEL-SISTEMA.md)
2. **Consulta el diseño:** [03-PALETA-DE-COLORES.md](03-PALETA-DE-COLORES.md) y [04-TIPOGRAFIA.md](04-TIPOGRAFIA.md)
3. **Usa los componentes:** [07-COMPONENTES-REUTILIZABLES.md](07-COMPONENTES-REUTILIZABLES.md)
4. **Implementa JavaScript:** [11-JAVASCRIPT-PATTERNS.md](11-JAVASCRIPT-PATTERNS.md)
5. **Resuelve conflictos WP:** [14-CONFLICTOS-WORDPRESS.md](14-CONFLICTOS-WORDPRESS.md)

---

## 📝 NOTAS IMPORTANTES

1. ✅ **Usar la librería de componentes HTML como referencia** (`../componentes-html-bootstrap/`)
2. ❌ **NUNCA modificar el HTML del front-end desde el admin panel**
3. ✅ **La vista previa debe ser 100% idéntica al componente real**
4. ✅ **Guardar configuración en archivos JSON (NO localStorage)**
5. ✅ **Responsive es obligatorio, no opcional**
6. ✅ **Todos los iconos deben ser orange (#FF8600)**
7. ✅ **Todos los títulos de card deben ser navy (#1e3a5f)**

---

**Documento creado:** 2025
**Versión:** 1.0
**Proyecto:** APU México - Sistema de Administración
**Autor:** Design System Team