# AGENTS.md - Directrices para el Agente

## Preferencias de Comportamiento

- **Idioma**: Responder siempre en español.
- **Commits**: Redactar en inglés, usando `feat:`, `fix:`, `docs:`, `style:`, `refactor:`, `test:`, `chore:`
- **Seguridad**: Nunca modificar archivos sin confirmación previa
- **Proactividad**: Sugerir mejoras durante análisis del código

## Stack Tecnológico Habitual (Backend)

- 
- HTML
- CSS
- JS
- 

## Flujo de Trabajo Típico

1. Ignorar la carptea assets. El contenido es de imagenes e iconos.
2. Análisis (leer y entender contexto)
3. Planificación (proposición paso a paso si es complejo)
4. Implementación (siguiendo PEP 8/ESLint)
5. Documentación (actualizar README.md si hay nuevos commandos)
6. Control de versiones (commits atómicos, ramas `feature/` o `fix/`)

## Instrucciones Específicas para este Repositorio

### Arquitectura General

- **Estructura**: Sitio web estático con HTML/CSS/JS puro (sin frameworks ni build tools)

- **Componentes Modulares**: Header y footer cargados dinámicamente via `fetch()` (js/main.js:25-60)
  
  - **Header**: Incluye botón 'HABLEMOS' y toggle de tema (includes/header.html)
  - **Footer**: Información de contacto e identificación fiscal (includes/footer.html)

- **Temas**: Dark/light mode con persistencia usando localStorage (js/main.js:143-183)
  
  - Variables CSS en `css/styles.css`:
    
    ```css
    --bg-primary
    --text-body
    --ide-primary
    --ide-dark
    ```
  
  - Toggle actualiza atributo `data-theme` y cambia íconos de logo (js/main.js:150-183)

### Implementación Clave

**Theme Switcher (js/main.js)**:

```javascript
// Inicialización (ejecutado al cargar DOM)
function initTheme() {
  const savedTheme = localStorage.getItem('ide_theme') || 'light';
  document.documentElement.setAttribute('data-theme', savedTheme);
  updateThemeIcon(savedTheme);
  toggleLogoTheme(savedTheme);
}

// Toggle (event handler)
function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('ide_theme', newTheme);
  updateThemeIcon(newTheme);
  toggleLogoTheme(newTheme);
}
```

**Navegación Móvil**: sistema de drawer con:

- Botón hamburguesa (abre)
- Overlay (cierra al hacer clic)
- Cierre con ESC
- Enlaces que cierran automáticamente
- Atributos ARIA para accesibilidad (js/main.js:94-133)

**Cursos Dinámicos**:

- cargados desde `/data/cursos.json`
- Fallback con datos mock en `getFallbackCourses()` (js/main.js:608-625)
- Modales dinámicos para detalles de cursos

### Estructura de directorios clave

```
project/
├── includes/
│   ├── header.html        # Header modular
│   └── footer.html        # Footer modular
├── css/
│   └── styles.css        # Estilos principales (variables `--ide-primary`, `--ide-dark`)
├── js/
│   └── main.js           # JavaScript principal (890 líneas)
├── images/               # Imágenes y logos
└── data/
    └── cursos.json       # Datos de cursos
```

### Páginas principales

- `index.html` - Página inicial con hero y Brújula IDE
- `soluciones.html` - Soluciones con filtrado dinámico (js/main.js:630-654)
- `academy.html` - Cursos y formación
- `desafios.html` - Quiz interactivo (JS embedded)
- `contacto.html` - Formulario de contacto con AJAX (js/main.js:798-841)

### Funcionalidades destacadas

1. **Sistema de modales**: Pop-ups con cierre por clic externo y tecla ESC (js/main.js:188-243)
2. **Formularios AJAX**: envío a `/php/send-mail.php` con mensajería de suceso/falla (js/main.js:798-890)
3. **Feed Insights**: WordPress REST API + fallback de artículos (js/main.js:659-754)

### Notes importantes para el desarrollo

1. **Path corregido**: Usar & y Desarrollo (no Development) en todos los paths
2. **Sin frameworks**: No hay React, Vue, ni herramientas de build - todo es Vanilla JS
3. **Fallbacks implementados**: Siempre verificar fallbacks para API y datos remotos
4. **Persistencia**: El tema se guarda en localStorage (`ide_theme`)
5. **Testing visual**: Revisar temas dark/light en navegadores moderno