# 🧩 COMPONENTES REUTILIZABLES

## ¿Qué es esto?

Una **librería de 28 componentes HTML** listos para copiar y pegar, construidos con Bootstrap 5.3.2 y alineados al design system de APU.

Cada componente incluye:
- ✅ HTML completo y funcional
- ✅ Múltiples ejemplos de uso
- ✅ Comentarios explicativos inline
- ✅ Fixes para conflictos con WordPress

---

## 📂 Documentación Completa

**Ir a:** [`../componentes-html-bootstrap/README.md`](../componentes-html-bootstrap/README.md)

Ahí encontrarás:
- Índice completo de los 28 componentes
- Categorías organizadas (formularios, botones, layouts, navegación, etc.)
- Instrucciones de uso y personalización
- Dependencias requeridas (CDN links)
- Fixes CSS para WordPress
- Componentes que requieren JavaScript

---

## 📋 Categorías de Componentes

### 🎨 Layout y Estructura
Headers con gradiente, Cards (estándar y vista previa), Grids especializados

### 📝 Formularios
Switches, Color pickers, Text inputs, Textareas, Selects, Radio buttons, Checkboxes, Range sliders, File uploads

### 🔘 Botones
Botones simples, Button groups (Desktop/Mobile), Botones con dropdowns

### 🎯 Componentes Visuales
Badges, Links externos, Progress bars, Alerts, Spinners, Dividers, Tooltips

### 📱 Navegación y Organización
Tabs, Accordions, Sortable lists

### 💻 Desarrollo y Utilidades
Image previews, Code blocks

---

## 🚀 Cómo Usar

1. Abre el README de componentes: [`../componentes-html-bootstrap/README.md`](../componentes-html-bootstrap/README.md)
2. Encuentra el componente que necesitas
3. Abre el archivo HTML correspondiente (ej: `05-COLOR-PICKER.html`)
4. Copia el HTML del ejemplo que te sirva
5. Pega en tu proyecto y personaliza IDs/textos

---

## 🎨 Principios de Uso

### Colores
- **Iconos:** Siempre orange (`#FF8600`)
- **Títulos de card:** Siempre navy (`#1e3a5f`)
- **Border-left cards:** Navy para estándar, Orange para previews
- **Botones primarios:** Orange

### Tamaños
- **Form controls:** Usar `.form-control-sm` (tamaño compacto)
- **Botones en header:** Usar `.btn-sm`
- **Labels:** Clase `.small` + `fw-semibold`

### Patrones
- **Header de tab:** Gradiente navy + border-left orange + botón reset derecha
- **Vista previa:** Card con border-left orange + título "Vista Previa en Tiempo Real"
- **Iconos en labels:** `<i class="bi bi-[icon] me-1" style="color: #FF8600;"></i>`

---

## 📝 Notas Importantes

1. Los componentes HTML son la **fuente de verdad** - siempre usa el código de ahí
2. Todos los componentes están probados en WordPress
3. No mezclar inline styles con clases de Bootstrap (solo usa inline styles para colores de marca)
4. Siempre mantener accesibilidad (ARIA attributes incluidos)

---

## Volver al Índice

[← Volver al README](README.md)