# ⚙️ ESPECIFICACIONES DEL SISTEMA

## Requerimientos Generales

- **Persistencia de Datos**: Archivos JSON (NO localStorage, NO base de datos)
- **Vista Previa**: TODAS las pestañas DEBEN tener vista previa en tiempo real
- **Panel Principal**: Existe un panel de administración que lista todas las pestañas disponibles
- **Arquitectura**: Componentes independientes pero con diseño consistente
- **Navegación**: Sistema de pestañas/tabs para alternar entre componentes

---

## Stack Tecnológico

### CDN y Librerías

```html
<!-- Bootstrap 5.3.2 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/Css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap Icons 1.11.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/Font/bootstrap-icons.min.css">

<!-- Google Fonts: Poppins -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- CSS del proyecto -->
<link rel="stylesheet" href="../../Css/style.css">
```

### JavaScript

```html
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/Js/bootstrap.bundle.min.js"></script>
```

---

## Estructura de Archivos

**Arquitectura modular:** Cada componente tiene sus propios archivos separados (PHP, CSS, JS).

```
wp-content/themes/apus-theme/
└── admin-panel/
    └── Admin/
        ├── Components/
        │   ├── component-[name].php
        │   ├── component-[name]-2.php
        │   └── component-[name]-3.php
        ├── Assets/
        │   ├── Css/
        │   │   ├── component-[name].css
        │   │   ├── component-[name]-2.css
        │   │   └── component-[name]-3.css
        │   └── Js/
        │       ├── component-[name].js
        │       ├── component-[name]-2.js
        │       └── component-[name]-3.js
        └── Config/
            ├── [name]-config.json
            ├── [name]-2-config.json
            └── [name]-3-config.json
```

**Ejemplo con un componente específico:**
```
admin-panel/Admin/
├── Components/
│   └── component-notification-bar.php
├── Assets/
│   ├── Css/
│   │   └── component-notification-bar.css
│   └── Js/
│       └── component-notification-bar.js
└── Config/
    └── notification-bar-config.json
```

---

## Convenciones de Nombrado

### Archivos PHP (Componentes)

- Patrón: `component-[nombre].php`
- Ubicación: `admin-panel/Admin/Components/`
- Ejemplo: `component-notification-bar.php`, `component-site-footer.php`

### Archivos CSS

- Patrón: `component-[nombre].css`
- Ubicación: `admin-panel/Admin/Assets/Css/`
- Mismo nombre base que el componente PHP correspondiente

### Archivos JavaScript

- Patrón: `component-[nombre].js`
- Ubicación: `admin-panel/Admin/Assets/Js/`
- Mismo nombre base que el componente PHP correspondiente

### Archivos de Configuración JSON

- Patrón: `[nombre]-config.json`
- Ubicación: `admin-panel/Admin/Config/`
- Ejemplo: `notification-bar-config.json`

---

## Dependencias del Proyecto

| Dependencia | Versión | Propósito |
|-------------|---------|-----------|
| Bootstrap | 5.3.2 | Framework CSS y componentes UI |
| Bootstrap Icons | 1.11.3 | Sistema de iconos |
| Poppins Font | Google Fonts | Tipografía principal |
| style.css | Custom | Estilos específicos del proyecto |

---

## Requerimientos del Navegador

- **Navegadores modernos**: Chrome, Firefox, Safari, Edge (últimas 2 versiones)
- **JavaScript**: Habilitado
- **CSS Grid**: Soporte requerido
- **Flexbox**: Soporte requerido
- **CSS Custom Properties**: Soporte requerido

---

## Estructura de un Componente

Cada componente debe tener:

1. ✅ **Archivo PHP** (`component-[name].php`)
   - Formulario de configuración
   - Vista previa en tiempo real
   - Integración con WordPress

2. ✅ **Archivo CSS** (`component-[name].css`)
   - Estilos específicos del componente admin
   - Estilos para vista previa

3. ✅ **Archivo JavaScript** (`component-[name].js`)
   - Funcionalidad del componente
   - Event listeners
   - Funciones de actualización de preview
   - Persistencia de configuración

4. ✅ **Configuración JSON** (`[name]-config.json`)
   - Valores por defecto
   - Metadata del componente
   - Timestamp de última modificación

---

## Reglas de Integración

### ❌ NO Permitido

- localStorage para persistencia (usar config.json)
- Base de datos directa
- Inline styles que sobreescriban CSS del front-end
- Modificar HTML del front-end desde admin

### ✅ Permitido

- Archivos JSON para configuración
- Inline styles SOLO en el admin panel (si no afecta preview)
- CSS con `!important` SOLO si es necesario para override de WordPress

---

## Volver al Índice

[← Volver al README](README.md)