# PROPUESTA_EVOLUCION_OFICINA_PIXELS_HTML_V2

## Clasificación
- Frente: #soinsa #midas #oficina_pixels #ui #tablero_vivo
- Estado: propuesta operativa lista para implementación
- Fecha: 2026-06-20

## Objetivo
Definir cómo debe evolucionar `MIDAS_STAGING/oficina_pixels.html` desde su V1 actual hacia una V2 visual-operativa más bonita, más clara y más alineada con la Oficina de los Píxeles definida para SOINSA.

## Base observada actual
La V1 ya tiene una estructura funcional válida:
- barra superior
- bloque hero
- KPIs rápidos
- tarjetas de agentes
- clientes críticos
- próximos contactos
- logs recientes

La V1 funciona como tablero ejecutivo de datos.
La V2 debe convertirlo en una **oficina viva** sin perder legibilidad.

## Principio de evolución
No rehacer desde cero.
Evolucionar sobre la estructura existente en 3 capas:
1. **mejorar lenguaje visual**
2. **reordenar la interfaz por zonas de oficina**
3. **sumar lectura operativa por agente y por área**

## Problemas de la V1 actual
1. se ve más como dashboard oscuro tradicional que como oficina viva
2. los agentes aparecen como tarjetas aisladas, no como parte de un espacio
3. no hay agrupación por zonas
4. el avatar aún no refleja la nueva definición visual de MIDAS como frenchi
5. los estados existen, pero no cuentan historia visual suficiente
6. la prioridad operativa se lee bien por datos, pero no por contexto espacial

## Objetivo visual de la V2
La V2 debe hacer sentir que:
- MIDAS trabaja dentro de una oficina
- cada área ocupa un lugar
- cada zona respira una función
- los clientes críticos y bloqueos “viven” en el espacio
- la estética es cálida, ejecutiva y más bonita

## Estructura propuesta V2

### 1. Header superior refinado
Mantener:
- nombre oficina
- botón volver a MIDAS
- actualizar
- salir

Agregar:
- estado global de oficina
- contador de alertas altas
- versión visible como badge discreto

### 2. Panel ejecutivo superior
Reemplazar el hero actual por un bloque más limpio con:
- resumen de estado general
- KPIs clave priorizados
- frase operativa del día
- “zona en foco” o “prioridad actual”

### 3. Plano central de oficina
Nueva pieza principal de la página.
Debe mostrar la oficina como layout vivo dividido en zonas:
- Recepción
- MIDAS / Comercial
- Contratos
- EDP
- Auditoría
- Dirección

Cada zona debe tener:
- título
- color propio
- agente principal visible
- 1 a 3 indicadores vivos
- estado de la zona

### 4. Panel lateral o inferior de clientes críticos
Mantener esta información, pero convertirla en:
- tarjetas más limpias
- prioridad visual por color
- accesos rápidos a ficha
- lectura rápida de responsable y próximo contacto

### 5. Panel de próximos contactos
Mantenerlo como bloque separado, idealmente junto a Comercial.
Debe sentirse como agenda operativa del área MIDAS.

### 6. Logs recientes
Mantenerlos, pero bajarlos de jerarquía visual.
La V2 debe priorizar oficina y operación antes que tabla técnica.

## Layout sugerido V2

### Fila 1
- header superior
- resumen ejecutivo

### Fila 2
- oficina central completa en ancho amplio

### Fila 3
- clientes críticos
- próximos contactos
- alertas / bloqueos

### Fila 4
- logs recientes
- notas operativas / cambios recientes

## Propuesta por zonas

### Zona Recepción
Mostrar:
- ingresos nuevos
- casos por clasificar
- estado de bandeja

### Zona MIDAS / Comercial
Mostrar:
- MIDAS como frenchi principal
- cotizaciones
- clientes activos
- seguimientos pendientes
- próximos contactos

### Zona Contratos
Mostrar:
- contratos activos
- revisiones pendientes
- observaciones

### Zona EDP
Mostrar:
- EDP borrador
- EDP pendientes
- ciclos abiertos

### Zona Auditoría
Mostrar:
- alertas altas
- bloqueos
- consistencia
- observaciones recientes

### Zona Dirección
Mostrar:
- foco actual
- prioridad ejecutiva
- decisiones pendientes
- lectura rápida general

## Componentes nuevos recomendados

### Componente 1 — tarjeta de zona
Cada zona de oficina debe tener:
- color base
- mini título
- personaje/agente principal
- badge de estado
- 2 o 3 contadores clave
- mini frase operativa

### Componente 2 — ficha rápida de agente
Al pasar o abrir un agente:
- nombre
- rol
- estado
- tarea actual
- siguiente paso
- skill activa
- versión

### Componente 3 — estado visual por zona
- normal
- activa
- cargada
- bloqueada
- crítica
- lista

## Paleta sugerida V2
Sustituir el oscuro dominante por una base más cuidada:
- fondo general: azul noche suave / grafito elegante
- paneles: gris azulado cálido
- acentos: miel, petróleo, turquesa, musgo, violeta grisáceo, burdeo suave

## Cambio obligatorio de identidad
MIDAS debe dejar de verse/documentarse como:
- zorro comercial

y pasar a:
- **frenchi comercial**

## Reglas de implementación
1. no romper consumo actual de `api/oficina_pixels.php`
2. reaprovechar métricas ya disponibles
3. introducir layout por zonas desde frontend primero
4. recién después evaluar nuevos campos API si hacen falta
5. evitar sobrecargar la vista con exceso de widgets

## Secuencia de implementación recomendada
### Fase V2-A — rediseño visual sin tocar API
- rehacer CSS
- reorganizar HTML
- agrupar agentes por zona
- cambiar avatar/concepto MIDAS a frenchi

### Fase V2-B — lectura operativa por zona
- mostrar KPIs dentro de zonas
- crear estado de zona
- sumar panel de alertas

### Fase V2-C — detalle por agente
- ficha visual por agente
- tooltip o modal liviano
- siguiente paso más claro

### Fase V2-D — personalización fina
- fotos reales de mascotas
- accesorios
- rasgos propios

## Qué NO hacer todavía
- no cambiar API estructuralmente sin necesidad
- no tocar autenticación
- no mezclar con integraciones externas
- no meter animaciones pesadas
- no rehacer MIDAS completo por una mejora visual

## Resultado esperado
Al completar esta evolución, `oficina_pixels.html` dejará de ser solo un panel de datos y pasará a sentirse como una oficina visual-operativa viva, con MIDAS como frenchi central y con zonas legibles para comercial, contratos, EDP, auditoría y dirección.