# Sitio HTML — Síntesis Pilotaje FTL

Versión interactiva del documento de síntesis pilotaje, con navegación, búsqueda y tema claro/oscuro.

## 📁 Estructura

```
html/
├── index.html      (Dashboard principal)
├── styles.css      (Estilos responsive + temas)
├── script.js       (Funcionalidades: búsqueda, tema, navegación)
└── README.md       (Este archivo)
```

## 🚀 Uso

**Abrir directamente**:
1. Navega a `html/index.html`
2. Abre en navegador (Firefox, Chrome, Safari, Edge)
3. Sin servidor web requerido (funciona local)

## ✨ Características

### 📑 Navegación
- **Tabla de contenidos interactiva** en sidebar
- Links a todas las secciones principales
- Smooth scroll automático
- Breadcrumbs

### 🔍 Búsqueda
- **Búsqueda en-página** (Ctrl+F / Cmd+F)
- Índice de términos clave: CP1-CP9, bloqueadores, action items
- Resultados en tiempo real
- Click para navegar a sección

### 🎨 Temas
- **Tema claro** (default)
- **Tema oscuro** (Alt+D o botón)
- Preferencia guardada en navegador (localStorage)
- Transiciones suaves

### 📱 Responsive
- **Desktop**: Layout con sidebar + contenido
- **Tablet (1024px)**: Sidebar full-width
- **Mobile (768px)**: Botón flotante para índice, optimizado para lectura
- Scrollbar personalizado

### ⌨️ Atajos de Teclado
- `Ctrl+F` / `Cmd+F` → Enfocar búsqueda
- `Alt+D` → Cambiar tema (oscuro/claro)
- `Escape` → Cerrar búsqueda
- Tabla de contenidos clickeable

### ♿ Accesibilidad
- Skip link ("Ir al contenido principal")
- HTML semántico
- Contraste suficiente
- Focus visible en todos los elementos
- Respeta `prefers-reduced-motion`

## 📊 Contenido Incluido

**Cards/Secciones**:
1. **Resumen Ejecutivo** — 6 stats clave
2. **Estado Actual** — CP1-CP9 readiness
3. **Bloqueadores Críticos** — Tabla de 7 bloqueadores
4. **Documentos Disponibles** — 8 doc cards con links
5. **Action Items** — Franco (F1-F6), Denis (D1-D4), Próximas reuniones
6. **Timeline Estimado** — 10-20 días según bloqueadores
7. **Cambios vs Histórico** — Clarificaciones, evoluciones, omisiones
8. **Conclusión** — Status aprobado

## 🔗 Links Externos

Todos los documentos Markdown están en `../`:
- `INDICE.md`
- `README.md`
- `mapeo_archivos_por_cp.md`
- `estimacion_puntos_carga.md`
- `resumen_reunion_2026_06_08.md`
- `VALIDACION_EJECUTIVA.md`
- `VALIDACION_CRUZADA_2026_06_05_vs_08.md`

Los links abren en nueva pestaña para referencia mientras navegas.

## 🎯 Flujos de Lectura

### Ejecutivo (5 min)
1. Resumen Ejecutivo (stats)
2. Bloqueadores Críticos (tabla)
3. Conclusión

### Operativo (20 min)
1. Estado Actual (CP readiness)
2. Bloqueadores Críticos
3. Action Items
4. Timeline Estimado
5. Abrir `mapeo_archivos_por_cp.md` para detalles

### Auditoría (30 min)
1. Resumen Ejecutivo
2. Cambios vs Histórico
3. Abrir `VALIDACION_EJECUTIVA.md`
4. Abrir `VALIDACION_CRUZADA_2026_06_05_vs_08.md`

## 🛠️ Técnica

### Tecnologías
- HTML5 semántico
- CSS3 (Grid, Flexbox, Custom properties)
- Vanilla JavaScript (sin dependencias)
- LocalStorage para preferencias de tema

### Navegadores Soportados
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers modernos

### Performance
- No requiere compilación
- Tamaño: ~40 KB (HTML + CSS + JS)
- Carga instant
- Responde en < 50ms

### Modo Offline
- Funciona completamente sin internet
- Solo requiere navegador
- Links a Markdown requieren archivos locales (../*)

## 📝 Notas

- **Tema por defecto**: Detecta automáticamente preferencia del SO (light/dark)
- **Búsqueda**: Es case-insensitive
- **Links**: Se abren en nueva pestaña para mantener contexto
- **Print**: Oculta sidebar automáticamente al imprimir
- **Acceso rápido**: Usa Ctrl+F/Cmd+F o barra de búsqueda en sidebar

## 🔧 Personalización

Para modificar:
- **Colores**: Editar variables CSS en `styles.css` `:root`
- **Contenido**: Editar secciones en `index.html`
- **Búsqueda**: Agregar términos a `searchIndex` en `script.js`
- **Atajos**: Modificar evento `keydown` en `script.js`

## 📞 Audiencia

Diseñado para:
- Franco Cedillo (coordinación)
- Denis Vivas (operaciones)
- Rosa María Orellana (gestión)
- Jemima Romero (Trento)
- Jenny Llanos (QLEVER)
- Equipo operativo

## ✅ Validación

- **Status**: ✅ APROBADO PARA PILOTAJE
- **Consistencia**: 98% vs histórico 2026-06-05
- **Contradicciones**: 0
- **Documentos**: 9
- **Bloqueadores**: 6-7

---

**Generado**: 2026-06-08  
**Última actualización**: 2026-06-08  
**Versión**: 1.0