Dashboard Leads - version limpia para servidor (.env y config de despliegue restaurados)

.gitignore

@@ -0,0 +1,28 @@
+# Dependencias del frontend (se regeneran con npm install en el servidor)
+node_modules/
+frontend/node_modules/
+
+# Build del frontend
+dist/
+frontend/dist/
+
+# Python
+__pycache__/
+*.py[cod]
+*.egg-info/
+.venv/
+venv/
+
+# Logs y temporales
+*.log
+_ELIMINAR/
+
+# Scripts auxiliares de esta migracion (no van al repo)
+SUBIR_A_GIT.bat
+LIMPIAR_PARA_SERVIDOR.bat
+APLICAR_ENV.bat
+_ENV_NUEVOS/
+
+# NOTA: backend/.env SI se versiona a proposito (repo privado interno).
+# Si algun dia el repo deja de ser privado, descomenta la linea siguiente:
+#backend/.env

backend/.env

@@ -0,0 +1,22 @@
+PG_HOST=191.98.134.81
+PG_DATABASE=chatwoot_production
+PG_USER=postgres
+PG_PASSWORD=2165$%sd3%DFG
+PG_PORT=5432
+SQL_SERVER=191.98.134.80
+SQL_DATABASE=BDUS_CK000040_0001
+SQL_USERNAME=ASEBASTIAN
+SQL_PASSWORD=24MY36$z>&Uf
+GITHUB_BASE=https://raw.githubusercontent.com/aron1798/prueba1/main/DASHBOARD_LEADS
+SUPABASE_URL=https://ogzjtkxnfswpbmnbhnjd.supabase.co
+SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9nemp0a3huZnN3cGJtbmJobmpkIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc3NjYzNDk4MywiZXhwIjoyMDkyMjEwOTgzfQ.D7XB6GIs8UvI97lcMdf6Y6-8ON2ENhh0DOaiMro2f9Y
+SUPABASE_TABLA_LEADS=datos_unificados
+SUPABASE_PAUTA_URL=https://uztqscimtsihrzgybsyb.supabase.co
+SUPABASE_PAUTA_KEY=sb_publishable_aJCh5J6UghfKmSz6Swy4iA_orAqeHb7
+SUPABASE_TABLA_PAUTA=basebi_programacion
+CARTERA_URL=https://uztqscimtsihrzgybsyb.supabase.co
+CARTERA_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InV6dHFzY2ltdHNpaHJ6Z3lic3liIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc2MTMyMzQ0MCwiZXhwIjoyMDc2ODk5NDQwfQ.pvqzwJ7fBxggNka3oga7SdhiADIgIVKGEuxGbzHQj0E
+SUPABASE_TABLA_CARTERA=cartera_junta
+SUPABASE_TABLA_ALIAS=alias_normalizacion
+SUPABASE_TABLA_CONJUNTO=conjunto_pauta
+META_CSV_URL=https://docs.google.com/spreadsheets/d/e/2PACX-1vQa5BFEeF-p0-6-FuEXDXT4eb_ZK0fkYgLMxK_Ly3EJJPwQBsYDfNsSW09ppMNrH2LIiwVdAnC5q64C/pub?gid=1241390845&single=true&output=csv

backend/.env.example

@@ -0,0 +1,48 @@
+# ============================================================
+#  DASHBOARD LEADS - Plantilla de variables de entorno (backend)
+#  Copiar como .env y rellenar los valores reales.
+# ============================================================
+
+# ── Base de Datos PostgreSQL (Chatwoot) ──
+PG_HOST=191.98.134.81
+PG_DATABASE=chatwoot_production
+PG_USER=postgres
+PG_PASSWORD=tu_password_postgres_aqui
+PG_PORT=5432
+
+# ── Base de Datos SQL Server (Académico) ──
+SQL_SERVER=191.98.134.80
+SQL_DATABASE=BDUS_CK000040_0001
+SQL_USERNAME=tu_usuario_sql_aqui
+SQL_PASSWORD=tu_password_sql_aqui
+# Driver ODBC. Dejar vacío/comentado para autodetección:
+#   Windows -> SQL Server   |   Linux/Docker -> ODBC Driver 18 for SQL Server
+#SQL_DRIVER=ODBC Driver 18 for SQL Server
+
+# ── Repositorio GitHub (mapa de campañas, opcional) ──
+GITHUB_BASE=https://raw.githubusercontent.com/aron1798/prueba1/main/DASHBOARD_LEADS
+
+# ── Supabase (Leads) ──
+SUPABASE_URL=https://ogzjtkxnfswpbmnbhnjd.supabase.co
+SUPABASE_KEY=tu_supabase_service_role_key_aqui
+SUPABASE_TABLA_LEADS=datos_unificados
+
+# ── Supabase (Pauta) ──
+SUPABASE_PAUTA_URL=https://uztqscimtsihrzgybsyb.supabase.co
+SUPABASE_PAUTA_KEY=tu_supabase_pauta_key_aqui
+SUPABASE_TABLA_PAUTA=basebi_programacion
+SUPABASE_TABLA_PROGRAMA_PAUTAS=programa_pautas
+
+# ── Supabase (Cartera / catálogos) ──
+CARTERA_URL=https://uztqscimtsihrzgybsyb.supabase.co
+CARTERA_KEY=tu_cartera_key_aqui
+SUPABASE_TABLA_CARTERA=cartera_junta
+SUPABASE_TABLA_ALIAS=alias_normalizacion
+SUPABASE_TABLA_CONJUNTO=conjunto_pauta
+SUPABASE_TABLA_CAMPANIAS=campanias
+
+# ── URL Google Sheets Meta CSV ──
+META_CSV_URL=https://docs.google.com/spreadsheets/d/e/.../pub?gid=1241390845&single=true&output=csv
+
+# ── Orígenes CORS permitidos (separados por coma) ──
+CORS_ORIGINS=https://dashboard-leads.escueladerefrigeracion.lat,http://dashboard-leads.escueladerefrigeracion.lat,http://localhost:5174,*

backend/Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.10-slim
+
+# Instalar dependencias del sistema y el Driver Oficial de Microsoft ODBC 18 para SQL Server en Linux
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    curl gnupg2 ca-certificates unixodbc unixodbc-dev gcc g++ \
+    && curl -fsSL https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor -o /usr/share/keyrings/microsoft-prod.gpg \
+    && curl -fsSL https://packages.microsoft.com/config/debian/12/prod.list > /etc/apt/sources.list.d/mssql-release.list \
+    && apt-get update \
+    && ACCEPT_EULA=Y apt-get install -y msodbcsql18 \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 8001
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8001"]

backend/cache_manager.py

@@ -0,0 +1,79 @@
+# backend/cache_manager.py
+"""Caché global en memoria con refresco en segundo plano (igual que el dashboard de ventas)."""
+import time
+import threading
+from typing import Any, Callable, Dict, Tuple
+
+_CACHE: Dict[str, Tuple[float, Any]] = {}
+_LOCK = threading.Lock()
+_DEFAULT_TTL = 900  # 15 min
+
+
+def _make_key(prefix: str, args: tuple) -> str:
+    return prefix + ":" + "|".join(str(a) for a in args)
+
+
+def cache_get_or_set(prefix: str, args: tuple, loader: Callable[[], Any], ttl: int = _DEFAULT_TTL) -> Any:
+    key = _make_key(prefix, args)
+    now = time.time()
+    with _LOCK:
+        hit = _CACHE.get(key)
+        if hit and (now - hit[0] < ttl):
+            return hit[1]
+    value = loader()
+    with _LOCK:
+        _CACHE[key] = (now, value)
+    return value
+
+
+def cache_keys():
+    with _LOCK:
+        return list(_CACHE.keys())
+
+
+def cache_refresh_existing(loader_for_key):
+    for key in cache_keys():
+        try:
+            nuevo = loader_for_key(key)
+            if nuevo is not None:
+                with _LOCK:
+                    _CACHE[key] = (time.time(), nuevo)
+        except Exception as e:
+            print(f"[cache refresh] {key}: {e}")
+
+
+def cache_invalidate(prefix: str = None) -> None:
+    with _LOCK:
+        if prefix is None:
+            _CACHE.clear()
+        else:
+            for k in list(_CACHE.keys()):
+                if k.startswith(prefix + ":"):
+                    del _CACHE[k]
+
+
+def cache_stats() -> dict:
+    with _LOCK:
+        return {"entradas": len(_CACHE), "claves": list(_CACHE.keys())}
+
+
+_background_started = False
+
+
+def start_background_refresh(refresh_fn: Callable[[], None], interval: int = 900):
+    global _background_started
+    if _background_started:
+        return
+    _background_started = True
+
+    def _loop():
+        while True:
+            time.sleep(interval)
+            try:
+                refresh_fn()
+            except Exception as e:
+                print(f"[background refresh] error: {e}")
+
+    t = threading.Thread(target=_loop, daemon=True)
+    t.start()
+    print(f"[cache] refresco en segundo plano cada {interval}s iniciado")

backend/leads_logic.py

@@ -0,0 +1,894 @@
+# backend/leads_logic.py
+"""
+Lógica del módulo LEADS. Traduce las medidas DAX del PBI a Python.
+Columnas calculadas replicadas:
+  - Cantidad_Veces  -> 1ª aparición de un teléfono = lead único
+  - Ultima_Etiqueta / ESTADO/OBJECION -> limpieza de cached_label_list
+  - Tipo_Programa / Sede -> clasificación por dsc_programa
+Medidas replicadas:
+  - Leads_Totales_Pauta_Unico, Leads_Procesados_Pauta_Unicos,
+    Leads_Procesados_Contactados_Unicos, % Procesados, % Contactados,
+    Total_Matriculas, Cant_inscritos_Mes, Ocupabilidad,
+    Cursos (Inicios / Suspendidos / Ya Iniciados), Matrículas por día,
+    tabla Estado/Objeción.
+"""
+from datetime import datetime, date
+
+# Etiquetas de sistema que se eliminan para hallar el estado/objeción real (igual que el DAX)
+ETIQUETAS_SISTEMA = {
+    "atención_humana", "negociación", "supervisor", "grupo_arequipa",
+    "grupo_trujillo", "sin_respuesta",
+}
+META_POR_TIPO = {
+    "PROGRAMAS TEAC": 22, "PROGRAMAS TERC": 22,
+    "PROVINCIA TEAC": 18, "PROVINCIA TERC": 18,
+    "SEMINARIOS": 15,
+}
+
+
+# ── Helpers de fecha ────────────────────────────────────────────
+def _to_date(v):
+    if v is None:
+        return None
+    if isinstance(v, datetime):
+        return v.date()
+    if isinstance(v, date):
+        return v
+    s = str(v)[:10]
+    for fmt in ("%Y-%m-%d", "%d-%m-%Y", "%d/%m/%Y"):
+        try:
+            return datetime.strptime(s, fmt).date()
+        except Exception:
+            pass
+    return None
+
+
+def _en_periodo(d, ano, mes, dia):
+    """True si la fecha cae en el filtro (ano/mes/dia; 'TODOS' = sin filtrar)."""
+    if d is None:
+        return False
+    if ano not in ("TODOS", None) and d.year != int(ano):
+        return False
+    if mes not in ("TODOS", None) and d.month != int(mes):
+        return False
+    if dia not in ("TODOS", None) and d.day != int(dia):
+        return False
+    return True
+
+
+# ── Clasificadores (igual que columnas calculadas DAX) ──────────
+def clasificar_tipo_programa(dsc_programa):
+    up = str(dsc_programa or "").upper()
+    otros = ["CERTIFICACIÓN", "CERTIFICACION", "CURSO A MEDIDA", "MASTERCLASS",
+             "TALLER DE REFRIGERACIÓN DOM", "GESTIÓN DE VENTA", "GESTION DE VENTA"]
+    for o in otros:
+        if o.upper() in up:
+            return "OTROS"
+    return None  # el tipo PROGRAMAS/PROVINCIA se arma con sede+programa abajo
+
+
+def clasificar_sede(dsc_programa):
+    up = str(dsc_programa or "").upper()
+    if "AREQUIPA" in up: return "AREQUIPA"
+    if "TRUJILLO" in up: return "TRUJILLO"
+    if "PIURA" in up:    return "PIURA"
+    return "LIMA"
+
+
+def sede_por_codigo_map():
+    """{codigo: SEDE} tomado del mapa de campañas (la sede que le corresponde a
+    cada código, SIN reasignar por asesor). Usado por el filtro SEDE de leads,
+    para que coincida con 'sede del código' (no con sede_act)."""
+    from data_manager_v2 import CAMPANIAS
+    out = {}
+    for fila in CAMPANIAS:
+        cod = str(fila[2]).strip()          # índice 2 = codigo
+        sede = str(fila[3]).strip().upper() # índice 3 = sede
+        if cod:
+            out[cod] = sede
+    return out
+
+
+# ── Grupo de PROGRAMA para el filtro: TEAC / TERC / SEMINARIOS / OTROS ──
+def grupo_programa_curso(dsc_programa):
+    """Reduce el tipo detallado a 4 grupos para el filtro PROGRAMA (cursos/matrículas).
+      TEAC = PROGRAMAS TEAC + PROVINCIA TEAC
+      TERC = PROGRAMAS TERC + PROVINCIA TERC
+      SEMINARIOS = SEMINARIOS
+      OTROS = OTROS + CARRERA"""
+    tp = tipo_programa_curso(dsc_programa)
+    if tp in ("PROGRAMAS TEAC", "PROVINCIA TEAC"):
+        return "TEAC"
+    if tp in ("PROGRAMAS TERC", "PROVINCIA TERC"):
+        return "TERC"
+    if tp == "SEMINARIOS":
+        return "SEMINARIOS"
+    return "OTROS"   # OTROS + CARRERA
+
+
+def grupo_programa_lead(cargo):
+    """Grupo de programa para un LEAD, según su 'cargo' (del mapa de campañas).
+      TEAC → TEAC, TERC → TERC, resto (VRF/CO2/DIPLOMADO/etc.) → SEMINARIOS."""
+    c = str(cargo or "").strip().upper()
+    if c == "TEAC":
+        return "TEAC"
+    if c == "TERC":
+        return "TERC"
+    return "SEMINARIOS"
+
+
+def grupo_tipo_cohorte(tp):
+    """Reduce 'PROGRAMAS TEAC'/'PROVINCIA TEAC'/... a los 3 grupos de la tabla por Sede:
+      TEAC = PROGRAMAS/PROVINCIA TEAC, TERC = PROGRAMAS/PROVINCIA TERC, resto = SEMINARIOS."""
+    t = str(tp or "").upper()
+    if "TEAC" in t:
+        return "TEAC"
+    if "TERC" in t:
+        return "TERC"
+    return "SEMINARIOS"
+
+
+# Réplica del DAX Sede_Act: la sede del lead se decide por el ASESOR;
+# si el asesor no está en la lista, usa la sede de la campaña.
+_SEDE_POR_ASESOR = {
+    "almendra peralta": "Arequipa",
+    "juan carlos aguilar": "Piura",
+    "diego lázaro": "Trujillo",
+    "diego lazaro": "Trujillo",
+    "verónica la rosa": "Lima",
+    "veronica la rosa": "Lima",
+    "dayana balabarca": "Lima",
+    "milagros vargas": "Lima",
+    "carmen montoya": "Lima",
+    "diana chávez": "Lima",
+    "diana chavez": "Lima",
+    "copito rivera": "Lima",
+}
+
+
+def sede_act(asesor, sede_campania):
+    return _SEDE_POR_ASESOR.get(str(asesor or "").strip().lower(), sede_campania)
+
+
+def tipo_programa_cohorte(sede, programa_cat):
+    """Igual al DAX 'Tipo Programa': combina sede + (TEAC/TERC) -> categoría."""
+    s = str(sede or "").upper()
+    p = str(programa_cat or "").upper()
+    if s == "LIMA" and p == "TEAC": return "PROGRAMAS TEAC"
+    if s == "LIMA" and p == "TERC": return "PROGRAMAS TERC"
+    if s in ("TRUJILLO", "PIURA", "AREQUIPA") and p == "TEAC": return "PROVINCIA TEAC"
+    if s in ("TRUJILLO", "PIURA", "AREQUIPA") and p == "TERC": return "PROVINCIA TERC"
+    return "SEMINARIOS"
+
+
+def tipo_programa_curso(dsc_programa):
+    """Réplica EXACTA del DAX Tipo_Programa (columna calculada de Fact_SQL_Base_Cursos).
+    Usa CONTAINSSTRING en el mismo ORDEN que el PBI (el orden importa)."""
+    p = str(dsc_programa or "")
+    def has(s):  # CONTAINSSTRING es sensible a may/min en DAX; comparamos tal cual
+        return s in p
+
+    # 1) OTROS
+    if (has("CERTIFICACIÓN") or has("CURSO A MEDIDA") or has("MASTERCLASS")
+            or has("TALLER DE REFRIGERACIÓN DOM")
+            or has("GESTIÓN DE VENTA DE EQUIPOS DE AIRE ACONDICIONADO Y EQUIPOS DE REFRIGERACIÓN")):
+        return "OTROS"
+    if (has("CERTIFICACION FUNDAMENTOS DE CHILLER MODULAR INVERT- LG")
+            or has("PIURA - CERTIFICACIÓN MIDEA: TECNOLOGIA  INVERTER")
+            or has("AREQUIPA - CERTIFICACIÓN MIDEA - TECNOLOGÍA INVERTER")
+            or has("CERTIFICACIÓN: OPERACIÓN Y MANTENIMIENTO DE REFRIGERADORES MIDEA")
+            or has("TRUJILLO - CERTIFICACIÓN MIDEA: TECNOLOGÍA INVERTER")
+            or has("CERTIFICACIÓN MIDEA: AIRE ACOND INVERTER (INTROD., FUNC., INST. Y MANT.)")):
+        return "OTROS"
+    # 2) CARRERA
+    if has("CARRERA TECNICA DE AIRE ACONDICIONADO Y REFRIGERACION"):
+        return "CARRERA"
+    # 3) PROVINCIA TEAC
+    if (has("TRUJILLO - TECNICO ESPECIALISTA EN AIRE ACONDICIONADO")
+            or has("PIURA - TECNICO ESPECIALISTA EN AIRE ACONDICIONADO")
+            or has("AREQUIPA - TECNICO ESPECIALISTA EN AIRE ACONDICIONADO")
+            or has("TRUJILLO - VIRTUAL TECNICO ESPECIALISTA EN AIRE ACONDICIONADO")):
+        return "PROVINCIA TEAC"
+    # 4) PROVINCIA TERC
+    if (has("AREQUIPA - TECNICO ESPECIALISTA EN REFRIGERACION DOMÉSTICA Y COMERCIAL")
+            or has("PIURA - TECNICO ESPECIALISTA EN REFRIGERACION DOMÉSTICA Y COMERCIAL")
+            or has("TRUJILLO - TECNICO ESPECIALISTA EN REFRIGERACION DOMÉSTICA Y COMERCIAL")):
+        return "PROVINCIA TERC"
+    # 5) SEMINARIOS
+    if (has("CO2") or has("CERTIF") or has("SEM:") or has("MASTERCLASS") or has("DISEÑO")
+            or has("DIPLOMADO") or has("SEM.") or has("DUCTOS") or has("SEMINARIO") or has("SEMINARIOS")):
+        return "SEMINARIOS"
+    # 6) PROGRAMAS TEAC (Lima)
+    if (has("MANTENIMIENTO EN AIRE ACONDICIONADO")
+            or has("TECNICO ESPECIALISTA EN AIRE ACONDICIONADO")
+            or has("TALLER - TECNICO ESPECIALISTA EN AIRE ACONDICIONADO")
+            or has("CONTINUIDAD-TECNICO ESPECIALISTA EN AA (4M)")
+            or has("VIRTUAL TECNICO ESPECIALISTA EN AIRE ACONDICIONADO")):
+        return "PROGRAMAS TEAC"
+    # 7) PROGRAMAS TERC (Lima)
+    if (has("INSTALACION EN REFRIGERACION COMERCIAL")
+            or has("MANTENIMIENTO EN REFRIGERACIÓN COMERCIAL")
+            or has("CONTINUIDAD-TECNICO ESPECIALISTA EN REFRIGERACIÓN COMERCIAL (4M)")
+            or has("TECNICO ESPECIALISTA EN REFRIGERACION COMERCIAL")):
+        return "PROGRAMAS TERC"
+    return "SEMINARIOS"
+
+
+def meta_curso(dsc_programa):
+    """Meta por curso según Tipo_Programa (igual que el DAX Meta_Curso):
+    PROGRAMAS TEAC/TERC=22, PROVINCIA TEAC/TERC=18, resto=15."""
+    tp = tipo_programa_curso(dsc_programa)
+    if tp in ("PROGRAMAS TEAC", "PROGRAMAS TERC"):
+        return 22
+    if tp in ("PROVINCIA TEAC", "PROVINCIA TERC"):
+        return 18
+    return 15
+
+
+# ── ESTADO/OBJECION (réplica EXACTA del DAX: cadena de SUBSTITUTE) ──
+# El DAX quita comas y espacios (pega todas las etiquetas), elimina las de
+# sistema, y luego reduce combinaciones concatenadas a un estado final.
+_SUST = [
+    ("atención_humana", ""), ("negociación", ""), ("supervisor", ""),
+    ("grupo_arequipa", ""), ("grupo_trujillo", ""), ("sin_respuesta", ""),
+    ("interesadovendido", "vendido"), ("próximo_inicio", "proxima_fecha"),
+    ("inicio", ""), ("aprobación", ""), ("negociacion", ""), ("no_acepta", ""),
+    ("pendiente", ""),
+    ("revisando_informaciónsólo_consulta", "sólo_consulta"),
+    ("contacto_iniciadovendido", "vendido"),
+    ("revisando_informacióninteresado", "interesado"),
+    ("revisando_informaciónvendido", "vendido"),
+    ("sólo_consultainteresado", "interesado"),
+    ("revisando_informaciónno_califica", "no_califica"),
+    ("interesadopor_pagar", "por_pagar"),
+    ("revisando_informaciónprecio_elevado", "precio_elevado"),
+    ("proxima_fechavendido", "vendido"),
+    ("sólo_consultavendido", "vendido"),
+    ("vendidointeresado", "vendido"),
+    ("revisando_informaciónproxima_fecha", "proxima_fecha"),
+    ("contacto_iniciadosólo_consulta", "sólo_consulta"),
+]
+
+
+def estado_objecion(etiquetas):
+    """Réplica del DAX ESTADO/OBJECION (versión de 28 sustituciones del PBI)."""
+    if etiquetas is None:
+        return "no trabajado"
+    s = str(etiquetas).replace(",", "").replace(" ", "")
+    for buscar, reemplazar in _SUST:
+        s = s.replace(buscar, reemplazar)
+    s = s.strip()
+    return s if s else "no trabajado"
+
+
+# ── Ultima_Etiqueta (réplica EXACTA del DAX, usada para "Total Contactados") ──
+_ULTIMA_NO_TRABAJADO = {
+    "", "(en blanco)", "aprobación", "atencion humana", "atención humana",
+    "grupo arequipa", "grupo trujillo", "importacion masiva", "inicio",
+    "negociacion", "sin respuesta", "pendiente",
+}
+
+
+def ultima_etiqueta(etiquetas):
+    if etiquetas is None or str(etiquetas).strip() == "":
+        return "NO TRABAJADO"
+    partes = str(etiquetas).split(", ")
+    limpia = partes[-1].replace("_", " ").strip()
+    if limpia in _ULTIMA_NO_TRABAJADO:
+        return "NO TRABAJADO"
+    return limpia if limpia else "NO TRABAJADO"
+
+
+# ════════════════════════════════════════════════════════════════
+# PROCESAMIENTO DE LEADS  (calcula Cantidad_Veces y agrupa)
+# ════════════════════════════════════════════════════════════════
+def procesar_leads(filas_chatwoot):
+    """Marca el lead único (1ª vez de cada teléfono) y arma estructura limpia.
+    Ordenamos por fecha para que la 1ª aparición de cada teléfono sea la 'única'."""
+    # Ordenar por fecha ascendente (el query puede venir ordenado por id)
+    filas_chatwoot = sorted(filas_chatwoot, key=lambda f: (_to_date(f.get("fecha_creada")) or date.min))
+    # Teléfonos de prueba a excluir (igual que el PBI: 924374783)
+    EXCLUIR = {"924374783"}
+    vistos = set()
+    out = []
+    for f in filas_chatwoot:
+        tel = str(f.get("telefono") or "").strip()
+        if not tel or tel in EXCLUIR:
+            continue
+        es_unico = tel not in vistos
+        vistos.add(tel)
+        fecha = _to_date(f.get("fecha_creada"))
+        asesor = (f.get("asesor") or "").strip()
+        sede_campania = (f.get("sede") or "").strip() or "SIN SEDE"
+        sede = sede_act(asesor, sede_campania)   # réplica DAX Sede_Act (reasigna por asesor)
+        cargo = (f.get("programa") or "").strip()  # TEAC / TERC / VRF / etc. (del mapa campañas)
+        out.append({
+            "telefono": tel,
+            "asesor": asesor,
+            "fecha": fecha,
+            "estado": estado_objecion(f.get("etiquetas")),
+            "ultima": ultima_etiqueta(f.get("etiquetas")),
+            "sede": sede,
+            "cargo": cargo,                                     # TEAC / TERC / VRF / CO2 / etc.
+            "tipo_programa": tipo_programa_cohorte(sede, cargo),  # PROGRAMAS/PROVINCIA/SEMINARIOS
+            "codigo": (f.get("codigo") or "").strip() or "-",   # código de campaña
+            "es_unico": es_unico,
+        })
+    return out
+
+
+# ════════════════════════════════════════════════════════════════
+# KPIs DEL MÓDULO LEADS
+# ════════════════════════════════════════════════════════════════
+def kpis_leads(leads, cursos, matriculas, ano, mes, dia):
+    # Leads en el periodo (solo únicos = Cantidad_Veces == 1)
+    leads_periodo = [l for l in leads if l["es_unico"] and _en_periodo(l["fecha"], ano, mes, dia)]
+
+    recibidos   = len(leads_periodo)
+    procesados  = sum(1 for l in leads_periodo if l["asesor"])
+    contactados = sum(1 for l in leads_periodo if l["asesor"] and l["ultima"] != "NO TRABAJADO")
+
+    pct_procesados  = (procesados / recibidos) if recibidos > 0 else 0.0
+    pct_contactados = (contactados / procesados) if procesados > 0 else 0.0
+
+    # ── Cursos del periodo (por fecha de inicio) ──
+    cursos_periodo = [c for c in cursos if _en_periodo(_to_date(c.get("fch_inicio")), ano, mes, dia)]
+    cursos_programados = len(cursos_periodo)
+    suspendidos = sum(1 for c in cursos_periodo if str(c.get("cod_estado", "")).strip().upper() == "SUS")
+    hoy = date.today()
+    iniciados = sum(1 for c in cursos_periodo
+                    if str(c.get("cod_estado", "")).strip().upper() != "SUS"
+                    and (_to_date(c.get("fch_inicio")) or hoy) <= hoy)
+
+    # ── Total matriculados (= medida Matriculas_Totales del PBI) ──
+    # Cuenta matrículas ALU/PRE cuya FECHA DE MATRÍCULA cae en el mes,
+    # excluyendo 2 vendedoras. El Calendario del PBI va por fch_matricula.
+    VENDEDORES_EXCLUIDOS = {"CALDERON S. LISSA GENA", "CRUZ G. FIORELLA MELISSA"}
+    total_matriculados = sum(
+        1 for m in matriculas
+        if str(m.get("estado_matricula", "")).strip().upper() in ("ALU", "PRE")
+        and str(m.get("dsc_vendedor", "")).strip() not in VENDEDORES_EXCLUIDOS
+        and _en_periodo(_to_date(m.get("fch_matricula")), ano, mes, dia)
+    )
+    # Ocupabilidad (PBI): SUM(Inscritos) / SUM(Meta).
+    # Excluye cursos suspendidos (SUS) y num_indice excluidos manualmente.
+    # (Ver FUTUROS_CAMBIOS.md: mover esta lista a GitHub/Supabase)
+    CURSOS_EXCLUIDOS = {"1154", "1121"}
+    cursos_ocup = [c for c in cursos_periodo
+                   if str(c.get("cod_estado", "")).strip().upper() != "SUS"
+                   and str(c.get("num_indice", "")).strip() not in CURSOS_EXCLUIDOS]
+    sum_meta = sum(meta_curso(c.get("dsc_programa")) for c in cursos_ocup)
+    sum_inscritos_cursos = sum(int(c.get("Inscritos_Totales", 0) or 0) for c in cursos_ocup)
+
+    # ── Matrículas en los cursos del mes ──
+    # Matrículas ALU/PRE que: (1) se hicieron en el mes (fch_matricula) Y
+    # (2) son de un curso que INICIA en el mes (dsc_promocion = dsc_det_programa
+    #     de los cursos del periodo). Réplica de Cant_inscritos_Mes del PBI.
+    promos_periodo = {str(c.get("dsc_det_programa", "")).strip()
+                      for c in cursos_periodo if str(c.get("dsc_det_programa", "")).strip()}
+    mats_mes = [m for m in matriculas
+                if str(m.get("dsc_promocion", "")).strip() in promos_periodo
+                and str(m.get("estado_matricula", "")).strip().upper() in ("ALU", "PRE")
+                and _en_periodo(_to_date(m.get("fch_matricula")), ano, mes, dia)]
+    matriculas_mes = len({str(m.get("num_matricula")) for m in mats_mes})
+
+    ocupabilidad = (sum_inscritos_cursos / sum_meta) if sum_meta > 0 else 0.0
+
+    return {
+        "leads_recibidos": recibidos,
+        "leads_procesados": procesados,
+        "leads_contactados": contactados,
+        "pct_procesados": round(pct_procesados * 100, 2),
+        "pct_contactados": round(pct_contactados * 100, 2),
+        "total_matriculados": total_matriculados,
+        "matriculas_mes": matriculas_mes,
+        "ocupabilidad": round(ocupabilidad * 100, 2),
+        "cursos_programados": cursos_programados,
+        "cursos_reprogramados": 0,   # requiere SharePoint (fase 2)
+        "cursos_suspendidos": suspendidos,
+        "cursos_iniciados": iniciados,
+    }
+
+
+# ── Tabla Estado/Objeción (agrupa por Ultima_Etiqueta + desglose por asesor) ──
+def tabla_estado_objecion(leads, ano, mes, dia):
+    leads_periodo = [l for l in leads if l["es_unico"]
+                     and l["asesor"] and _en_periodo(l["fecha"], ano, mes, dia)]
+    agg = {}          # estado -> total
+    por_asesor = {}   # estado -> {asesor: cantidad}
+    telefonos = {}    # (estado, asesor) -> [telefonos]
+    for l in leads_periodo:
+        est = l["ultima"] or "NO TRABAJADO"
+        ase = l["asesor"] or "SIN ASESOR"
+        agg[est] = agg.get(est, 0) + 1
+        por_asesor.setdefault(est, {})
+        por_asesor[est][ase] = por_asesor[est].get(ase, 0) + 1
+        telefonos.setdefault((est, ase), []).append(l["telefono"])
+    filas = []
+    for estado in sorted(agg.keys(), key=lambda x: -agg[x]):   # mayor a menor por cantidad
+        asesores = sorted(por_asesor[estado].items(), key=lambda x: -x[1])
+        filas.append({
+            "estado": estado,
+            "cantidad": agg[estado],
+            "asesores": [
+                {"asesor": a, "cantidad": c,
+                 "telefonos": sorted(telefonos.get((estado, a), []))}
+                for a, c in asesores
+            ],
+        })
+    total = sum(agg.values())
+    return {"filas": filas, "total": total}
+
+
+# ── Matrículas por día (gráfico de línea) ──
+# Cuenta TODAS las matrículas del día (misma base que Total Matriculados):
+# estado ALU/PRE, excluyendo las 2 vendedoras, por día de fch_matricula.
+def matriculas_por_dia(matriculas, cursos, ano, mes, dia):
+    VENDEDORES_EXCLUIDOS = {"CALDERON S. LISSA GENA", "CRUZ G. FIORELLA MELISSA"}
+    conteo = {}          # dia -> total
+    por_tipo = {}        # dia -> {tipo_programa: cantidad}
+    for m in matriculas:
+        if str(m.get("estado_matricula", "")).strip().upper() not in ("ALU", "PRE"):
+            continue
+        if str(m.get("dsc_vendedor", "")).strip() in VENDEDORES_EXCLUIDOS:
+            continue
+        d = _to_date(m.get("fch_matricula"))
+        if not _en_periodo(d, ano, mes, dia):
+            continue
+        conteo[d.day] = conteo.get(d.day, 0) + 1
+        tp = tipo_programa_curso(m.get("dsc_programa"))   # TEAC/TERC/PROVINCIA.../SEMINARIOS/OTROS
+        por_tipo.setdefault(d.day, {})
+        por_tipo[d.day][tp] = por_tipo[d.day].get(tp, 0) + 1
+
+    def _detalle(day):
+        items = sorted(por_tipo.get(day, {}).items(), key=lambda x: -x[1])
+        return [{"tipo": t, "cantidad": c} for t, c in items]
+
+    import calendar
+    if mes not in ("TODOS", None) and ano not in ("TODOS", None):
+        ndias = calendar.monthrange(int(ano), int(mes))[1]
+        return [{"dia": d, "cantidad": conteo.get(d, 0), "detalle": _detalle(d)}
+                for d in range(1, ndias + 1)]
+    return [{"dia": d, "cantidad": conteo[d], "detalle": _detalle(d)}
+            for d in sorted(conteo.keys())]
+
+
+# ── Gráfico "Leads por Programa": serie diaria Totales vs Procesados ──
+def leads_por_dia(leads, ano, mes, dia):
+    lp = [l for l in leads if l["es_unico"] and _en_periodo(l["fecha"], ano, mes, dia)]
+    tot = {}   # dia -> totales
+    proc = {}  # dia -> procesados (con asesor)
+    for l in lp:
+        d = l["fecha"].day
+        tot[d] = tot.get(d, 0) + 1
+        if l["asesor"]:
+            proc[d] = proc.get(d, 0) + 1
+    import calendar
+    if mes not in ("TODOS", None) and ano not in ("TODOS", None):
+        ndias = calendar.monthrange(int(ano), int(mes))[1]
+        dias = range(1, ndias + 1)
+    else:
+        dias = sorted(set(list(tot.keys()) + list(proc.keys())))
+    return [{"dia": d, "totales": tot.get(d, 0), "procesados": proc.get(d, 0)} for d in dias]
+
+
+# ── Tabla por Sede_Act -> Tipo_Programa con 4 medidas (cohorte de leads) ──
+def tabla_pauta(leads, matriculas, ano, mes, dia, importe_por_pauta_periodo=None,
+                resultados_por_pauta_periodo=None, campanias_sede_cargo=None):
+    importe_por_pauta_periodo = importe_por_pauta_periodo or {}
+    resultados_por_pauta_periodo = resultados_por_pauta_periodo or {}
+    campanias_sede_cargo = campanias_sede_cargo or {}
+    # 1) Leads únicos del periodo con su teléfono, fecha, sede y tipo
+    lp = [l for l in leads if l["es_unico"] and _en_periodo(l["fecha"], ano, mes, dia)]
+    # mapa teléfono -> fecha del lead (para "matrícula posterior al lead")
+    fecha_lead = {}
+    for l in lp:
+        fecha_lead.setdefault(l["telefono"], l["fecha"])
+
+    # 2) Matrículas que cruzan por teléfono y son POSTERIORES a la fecha del lead
+    #    (réplica de Matriculas_Cohorte_Lead e Inversion_x_Pauta_Cohorte)
+    mat_por_tel = {}   # telefono -> {"mats": set(num_matricula), "inv": float}
+    for m in matriculas:
+        tel = str(m.get("dsc_telefono_1") or "").strip()
+        if tel not in fecha_lead:
+            continue
+        fm = _to_date(m.get("fch_matricula"))
+        fl = fecha_lead[tel]
+        if not fm or not fl or not (fm > fl):
+            continue
+        # INV_NETA_FINAL: si DOL, ×3.34
+        try: inv = float(m.get("INV_NETA", 0) or 0)
+        except: inv = 0.0
+        if str(m.get("cod_moneda", "")).strip().upper() == "DOL":
+            inv *= 3.34
+        e = mat_por_tel.setdefault(tel, {"mats": set(), "inv": 0.0})
+        e["mats"].add(str(m.get("num_matricula")))
+        e["inv"] += inv
+
+    # 3) Agrupar por Sede -> Tipo_Programa -> Código
+    def _nuevo():
+        return {"recibidos": 0, "procesados": 0, "mats": set(), "inv": 0.0}
+    grupos = {}  # sede -> tipo -> codigo -> métricas
+    for l in lp:
+        sede = l["sede"]; tp = grupo_tipo_cohorte(l["tipo_programa"]); cod = l.get("codigo", "-"); tel = l["telefono"]
+        g = grupos.setdefault(sede, {}).setdefault(tp, {}).setdefault(cod, _nuevo())
+        g["recibidos"] += 1
+        if l["asesor"]:
+            g["procesados"] += 1
+        if tel in mat_por_tel:
+            g["mats"] |= mat_por_tel[tel]["mats"]
+            g["inv"] += mat_por_tel[tel]["inv"]
+
+    def _fila(d):
+        return {"recibidos": d["recibidos"], "procesados": d["procesados"],
+                "matriculas": len(d["mats"]), "inversion": round(d["inv"], 0)}
+
+    # IMPORTE y RESULTADOS por PAUTA -> se asignan a su (sede, tipo) de CAMPANIAS,
+    # una sola vez por pauta (no por sede del lead), para NO duplicar.
+    #   imp_st[(sede,tipo)][cod] = importe ;  res_st[(sede,tipo)][cod] = resultados
+    imp_st = {}
+    res_st = {}
+    for cod, imp_val in importe_por_pauta_periodo.items():
+        info = campanias_sede_cargo.get(str(cod).strip())
+        if not info:
+            continue
+        se = str(info.get("sede") or "").upper()
+        tp = grupo_tipo_cohorte(tipo_programa_cohorte(se, info.get("cargo")))
+        imp_st.setdefault((se, tp), {})[str(cod).strip()] = float(imp_val or 0.0)
+    for cod, res_val in resultados_por_pauta_periodo.items():
+        info = campanias_sede_cargo.get(str(cod).strip())
+        if not info:
+            continue
+        se = str(info.get("sede") or "").upper()
+        tp = grupo_tipo_cohorte(tipo_programa_cohorte(se, info.get("cargo")))
+        res_st.setdefault((se, tp), {})[str(cod).strip()] = int(res_val or 0)
+
+    filas = []
+    for sede in sorted(grupos.keys()):
+        subfilas = []
+        s_rec = s_proc = 0; s_mats = set(); s_inv = 0.0; s_imp = 0.0; s_res = 0
+        for tp in sorted(grupos[sede].keys()):
+            cods = grupos[sede][tp]
+            imp_map = imp_st.get((sede.upper(), tp), {})   # importe por pauta de esta sede/tipo
+            res_map = res_st.get((sede.upper(), tp), {})
+            # métricas del tipo (sumando sus códigos)
+            t_rec = t_proc = 0; t_mats = set(); t_inv = 0.0; t_imp = 0.0; t_res = 0
+            codigos = []
+            for cod in sorted(cods.keys()):
+                d = cods[cod]
+                imp_cod = float(imp_map.get(str(cod).strip(), 0.0))
+                res_cod = int(res_map.get(str(cod).strip(), 0))
+                codigos.append({"codigo": cod, **_fila(d), "importe": round(imp_cod, 2),
+                                "resultados": res_cod})
+                t_rec += d["recibidos"]; t_proc += d["procesados"]
+                t_mats |= d["mats"]; t_inv += d["inv"]; t_imp += imp_cod; t_res += res_cod
+            subfilas.append({
+                "tipo": tp, "recibidos": t_rec, "procesados": t_proc,
+                "matriculas": len(t_mats), "inversion": round(t_inv, 0),
+                "importe": round(t_imp, 2), "resultados": t_res, "codigos": codigos,
+            })
+            s_rec += t_rec; s_proc += t_proc; s_mats |= t_mats; s_inv += t_inv; s_imp += t_imp; s_res += t_res
+        filas.append({
+            "sede": sede, "recibidos": s_rec, "procesados": s_proc,
+            "matriculas": len(s_mats), "inversion": round(s_inv, 0),
+            "importe": round(s_imp, 2), "resultados": s_res, "subfilas": subfilas,
+        })
+    # Totales
+    t_rec = sum(f["recibidos"] for f in filas)
+    t_proc = sum(f["procesados"] for f in filas)
+    t_inv = round(sum(f["inversion"] for f in filas), 0)
+    # Total de importe/resultados: suma de TODAS las pautas que estan en campanias
+    # (una vez cada una), aunque no tengan fila con leads. Asi el total no se pierde.
+    t_imp = round(sum(float(v or 0.0) for cod, v in importe_por_pauta_periodo.items()
+                      if str(cod).strip() in campanias_sede_cargo), 2)
+    t_res = sum(int(v or 0) for cod, v in resultados_por_pauta_periodo.items()
+                if str(cod).strip() in campanias_sede_cargo)
+    # matrículas total: unión global
+    all_mats = set()
+    for tel, e in mat_por_tel.items():
+        all_mats |= e["mats"]
+    return {"filas": filas, "total": {"recibidos": t_rec, "procesados": t_proc,
+                                      "matriculas": len(all_mats), "inversion": t_inv,
+                                      "importe": t_imp, "resultados": t_res}}
+
+
+# ── Personalizado: replica la columna Fact_SQL_Base_Cursos[Personalizado] (M) ──
+# Base = dsc_det_programa, limpiando saltos de línea, luego cadena de reemplazos.
+_PERS_REEMPLAZOS = [
+    ("TECNICO ESPECIALISTA EN AIRE ACONDICIONADO", "TEAC"),
+    ("TECNICO ESPECIALISTA EN REFRIGERACION COMERCIAL", "TERC"),
+    ("TECNICO ESPECIALISTA EN REFRIGERACION DOMÉSTICA Y COMERCIAL", "TERC"),
+    ("CARRERA TECNICA DE AIRE ACONDICIONADO Y REFRIGERACION ", "CARRERA"),
+    ("VIRTUAL SEMINARIO SUPERVISION DE OBRAS EN AIRE ACONDICIONADO", "SUPERVISION DE OBRAS"),
+    ("SEMINARIO APLICACIÓN DE VARIADORES DE FRECUENCIA EN SISTEMAS HVAC", "VARIADORES DE FRECUENCIA"),
+    ("VIRTUAL - SISTEMAS DE REFRIGERACION CON CO2 - FASE SUBCRITICA Y TRANSCRITICA", "REFRIGERACION CON CO2"),
+    ("VIRTUAL SEMINARIO DISEÑO DE CAMARAS DE REFRIGERACION CON SISTEMAS CON FREON", "DISEÑO DE CAMARAS"),
+    ("VIRTUAL SEM. DETERMINACIÓN DE CAPACIDAD DE EQUIPOS DE AIRE ACONDICIONADO- CARGAS TÉRMICAS -(A/A)", "CARGAS TERMICAS"),
+    ("VIRTUAL SEMINARIO DIBUJO TECNICO Y DISEÑO ASISTIDO POR COMPUTADORA (CAD) PARA HVAC -(A/A)", "DIBUJO TECNICO (CAD)"),
+    ("VIRTUAL SEMINARIO: SISTEMAS DE REFRIGERACIÓN INDUSTRIAL POR AMONIACO (NH3)", "AMONIACO (NH3)"),
+    ("SEMINARIO VIRTUAL METRADO , COSTEO Y PRESUPUESTOS DE HVAC (AA)", "METRADO, COSTEO Y PRESUPUESTOS"),
+    ("CARRERA TECNICA LIMA GESTION DE EMPRESAS", "GESTION DE EMPRESAS"),
+    ("VIRTUAL SEMINARIO DISEÑO DE CHILLERS PARA PROCESOS INDUSTRIALES DE REFRIGERACIÓN", "DISEÑO DE CHILLERS"),
+    ("VIRTUAL SEMINARIO  PRACTICO  VENTILACION   DE SOTANO  Y PREZURIZACION DE ESCALERA -(A/A)", "VENTILACION DE SOTANO"),
+    ("SEMINARIO USO DE SOFTWARE EN CÁLCULOS DE AIRE ACONDICIONADO", "SOFTWARE EN CALCULOS DE A/A"),
+    ("DISEÑO DE SISTEMAS DE AIRE ACONDICIONADO", "DISEÑO DE SISTEMAS DE A/A"),
+    ("SEMINARIO INSTALACIÓN DE SISTEMAS DE A/A DE VOLUMEN VARIABLE VRV/VRF - SAB", "VOLUMEN VARIABLE VRF"),
+    # Seminarios VRF por sede y CO2 → nombre corto (la frecuencia se conserva al final)
+    ("PIURA - SEMINARIO INSTALACIÓN DE SISTEMAS DE A/A DE VOLUMEN VARIABLE - VRF", "PIURA - VRF"),
+    ("AREQUIPA - SEMINARIO INSTALACIÓN DE SISTEMAS DE A/A DE VOLUMEN VARIABLE - VRF", "AREQUIPA - VRF"),
+    ("TRUJILLO - SEMINARIO INSTALACIÓN DE SISTEMAS DE A/A DE VOLUMEN VARIABLE - VRF", "TRUJILLO - VRF"),
+    ("VIRTUAL - DISEÑO Y OPERACIÓN DE SISTEMAS DE REFRIGERACIÓN CON CO2 EN FASE SUBCRITICA Y TRANSCRITICA", "CO2"),
+    # Reemplazos sobre Nombre_Programa_Detalle (bloque ductos y otros)
+    ("VIRTUAL - DIMENSIONAMIENTO DE", ""),
+    ("METÁLICOS EN AIRE ACONDICIONADO Y VENTILACIÓN", ""),
+    ("MASTERCLASS: PROGRAMACIÓN DE CONTROLADORES PARA REFRIGERACIÓN", "PROGRAMACION DE CONTROLADORES"),
+    ("DIPLOMADO INTERNACIONAL DE AIRE ACONDICIONADO", "DIPLOMADO DE A/A"),
+    # Reemplazos finales (sedes/carreras/masterclass)
+    ("AREQUIPA - CARRERA TÉCNICA DE AIRE ACONDICIONADO Y REFRIGERACIÓN  - TAR", "AREQUIPA - CARRERA  - TARDE"),
+    ("PIURA - CARRERA TÉCNICA DE AIRE ACONDICIONADO Y REFRIGERACIÓN - TAR", "PIURA - CARRERA - TARDE"),
+    ("TRUJILLO - CARRERA TÉCNICA DE AIRE ACONDICIONADO Y REFRIGERACIÓN - TAR", "TRUJILLO - CARRERA - TARDE"),
+    ("AREQUIPA - CARRERA TÉCNICA DE AIRE ACONDICIONADO Y REFRIGERACIÓN  - MAN", "AREQUIPA - CARRERA - MAÑANA"),
+    ("PIURA - CARRERA TÉCNICA DE AIRE ACONDICIONADO Y REFRIGERACIÓN - MAN", "PIURA - CARRERA - MAÑANA"),
+    ("TRUJILLO - CARRERA TÉCNICA DE AIRE ACONDICIONADO Y REFRIGERACIÓN - MAN", "TRUJILLO - CARRERA - MAÑANA"),
+    ("GESTIÓN DE VENTA DE EQUIPOS DE AIRE ACONDICIONADO Y EQUIPOS DE REFRIGERACIÓN - NOC", "GESTIÓN DE VENTA - NOC"),
+    ("MASTERCLASS SELECCIÓN E INSTALACIÓN DE TARJETAS ELECTRÓNICAS UNIVERSALES EN EQUIPOS DE A/A .INVERTER - MAN", "MASTERCLASS TARJETAS UNIVERSALES - MAN"),
+    ("MASTERCLASS: SISTEMAS DE A/A CON VRF - SAB", "MASTERCLASS: A/A CON VRF - SAB"),
+    ("GESTIÓN DE VENTA DE EQUIPOS DE AIRE ACONDICIONADO Y EQUIPOS DE REFRIGERACIÓN - TAR", "GESTIÓN DE VENTA - TAR"),
+]
+
+
+def personalizado_curso(dsc_programa, cod_frecuencia=""):
+    """Replica Fact_SQL_Base_Cursos[Personalizado] del PBI:
+    base = dsc_programa & ' - ' & cod_frecuencia (NO dsc_det_programa)."""
+    s = f"{str(dsc_programa or '')} - {str(cod_frecuencia or '')}"
+    # Text.Clean + reemplazar saltos de línea por espacio, luego Trim
+    s = s.replace("\r", " ").replace("\n", " ")
+    s = "".join(ch for ch in s if ch >= " " or ch == " ")  # Text.Clean (quita control)
+    s = s.strip()
+    for buscar, reemplazo in _PERS_REEMPLAZOS:
+        s = s.replace(buscar, reemplazo)
+    # colapsar espacios múltiples que pudieran quedar de reemplazos vacíos
+    s = " ".join(s.split())
+    return s
+
+
+# ── Matriz por Curso (num_indice): Personalizado + métricas de leads por pauta ──
+# NOTA: las métricas de leads cruzan por el CÓDIGO DE PAUTA del curso, que viene de
+# SharePoint (no disponible aún). Por eso salen en 0 hasta conectar esa fuente.
+# Ver FUTUROS_CAMBIOS.md punto 5. Lo que sí se calcula: Personalizado y Fecha Inicio.
+def matriz_cursos(cursos, leads, ano, mes, dia, pauta_map=None,
+                  campanias_map=None, cartera_all=None, cartera_asig=None,
+                  mat_por_indice=None, cartera_tels=None, cartera_origen=None,
+                  importe_por_pauta=None, importe_por_pauta_periodo=None,
+                  cartera_canal=None, conjunto_por_pauta=None, pautas_por_indice=None):
+    pauta_map = pauta_map or {}
+    pautas_por_indice = pautas_por_indice or {}   # {num_indice: [pautas]} (muchos-a-muchos)
+    campanias_map = campanias_map or {}
+    cartera_all = cartera_all or {}
+    cartera_asig = cartera_asig or {}
+    mat_por_indice = mat_por_indice or {}
+    cartera_tels = cartera_tels or set()
+    cartera_origen = cartera_origen or {}
+    importe_por_pauta = importe_por_pauta or {}
+    importe_por_pauta_periodo = importe_por_pauta_periodo or {}
+    conjunto_por_pauta = conjunto_por_pauta or {}   # {pauta: [conjuntos de anuncios]}
+    # cartera_canal = {"PAUTA": {"all","asig","tels"}, "OTROS": {...}} para el desglose por canal
+    cartera_canal = cartera_canal or {}
+
+    CURSOS_EXCLUIDOS = {"1121", "1154"}
+
+    def _excluir(c):
+        ni = str(c.get("num_indice", ""))
+        if ni in CURSOS_EXCLUIDOS:
+            return True
+        info = pauta_map.get(ni)
+        if not info:
+            return False  # sin info en Supabase → no se excluye
+        # Excluir SUSPENDIDO o contar = NO
+        return info.get("contar") == "NO" or info.get("estado") == "SUSPENDIDO"
+
+    cursos_periodo = [c for c in cursos
+                      if _en_periodo(_to_date(c.get("fch_inicio")), ano, mes, dia)
+                      and not _excluir(c)]
+
+    # Leads únicos agrupados por codigo (= Pauta). Históricos y del mes (filtro fecha).
+    leads_unicos = [l for l in leads if l.get("es_unico")]
+    hist_por_cod = {}      # codigo → set teléfonos
+    hist_ases_cod = {}     # codigo → set teléfonos con asesor
+    mes_por_cod = {}       # codigo → set teléfonos (en periodo filtrado)
+    mes_ases_cod = {}      # codigo → set teléfonos con asesor (en periodo)
+    for l in leads_unicos:
+        cod = l.get("codigo", "-")
+        tel = l["telefono"]
+        hist_por_cod.setdefault(cod, set()).add(tel)
+        if l.get("asesor"):
+            hist_ases_cod.setdefault(cod, set()).add(tel)
+        if _en_periodo(l["fecha"], ano, mes, dia):
+            mes_por_cod.setdefault(cod, set()).add(tel)
+            if l.get("asesor"):
+                mes_ases_cod.setdefault(cod, set()).add(tel)
+
+    # Construir filas con sus medidas
+    pre = []
+    for c in sorted(cursos_periodo, key=lambda x: (_to_date(x.get("fch_inicio")) or date.min)):
+        nombre = personalizado_curso(c.get("dsc_programa"), c.get("cod_frecuencia"))
+        fch = _to_date(c.get("fch_inicio"))
+        ni = str(c.get("num_indice", "")).strip()
+        # LISTA de pautas del num_indice (muchos-a-muchos). Si no hay en la tabla nueva,
+        # usa la de basebi (compatibilidad).
+        cods = pautas_por_indice.get(ni)
+        if not cods:
+            _info = pauta_map.get(ni)
+            cods = [_info.get("pauta")] if _info and _info.get("pauta") else []
+        cods = [str(x).strip() for x in cods if x]
+        # Leads = union de telefonos de TODAS las pautas (sin duplicar)
+        def _union(mapa):
+            s = set()
+            for cd in cods:
+                s |= mapa.get(cd, set())
+            return len(s)
+        nuevos = _union(hist_por_cod)
+        nuevos_a = _union(hist_ases_cod)
+        nuevos_m = _union(mes_por_cod)
+        nuevos_ma = _union(mes_ases_cod)
+        pre.append({
+            "num_indice": ni,
+            "personalizado": nombre,
+            "fch": fch,
+            "pauta": cods[0] if cods else None,   # pauta principal (para mostrar)
+            "pautas": cods,                        # todas las pautas (para sumar)
+            "fecha_inicio": fch.strftime("%d/%m/%Y") if fch else "",
+            "leads_nuevos": nuevos,
+            "leads_nuevos_asesor": nuevos_a,
+            "leads_nuevos_mes": nuevos_m,
+            "leads_nuevos_mes_asesor": nuevos_ma,
+        })
+
+    # Índice HISTÓRICO completo (TODOS los cursos, sin filtro de fecha) por
+    # personalizado → lista de (fecha, leads_nuevos). Para el acumulado.
+    hist_cursos = {}
+    for c in cursos:
+        if _excluir(c):
+            continue
+        nom = personalizado_curso(c.get("dsc_programa"), c.get("cod_frecuencia"))
+        f = _to_date(c.get("fch_inicio"))
+        info = pauta_map.get(str(c.get("num_indice", "")))
+        cd = info.get("pauta") if info else None
+        nv = len(hist_por_cod.get(cd, ())) if cd else 0
+        hist_cursos.setdefault(nom, []).append((f, nv))
+
+    # Leads_Acumulados_Historico: suma de leads_nuevos de TODOS los cursos del
+    # MISMO personalizado con fecha <= la del curso actual (histórico completo).
+    filas = []
+    for r in pre:
+        acum = sum(nv for (f, nv) in hist_cursos.get(r["personalizado"], [])
+                   if f and r["fch"] and f <= r["fch"])
+        # CARTERA TOTAL: teléfonos únicos de cartera_junta con la misma SEDE+PROGRAMA
+        # del curso (según su pauta → campanias) cuya fecha_creada <= fch_inicio del curso.
+        # cartera_total = todos; cartera_total_asig = solo con asesor asignado.
+        cartera_total = 0
+        cartera_total_asig = 0
+        cod = r.get("pauta")
+        cods = r.get("pautas") or ([cod] if cod else [])
+        if cods and r["fch"]:
+            # Cartera = union de telefonos de la sede+programa de TODAS las pautas del num_indice
+            tels_all = {}; tels_asig = {}
+            for cd in cods:
+                sp = campanias_map.get(str(cd).upper())
+                if not sp:
+                    continue
+                for tel, fx in cartera_all.get(sp, {}).items():
+                    if fx and (tel not in tels_all or fx < tels_all[tel]):
+                        tels_all[tel] = fx
+                for tel, fx in cartera_asig.get(sp, {}).items():
+                    if fx and (tel not in tels_asig or fx < tels_asig[tel]):
+                        tels_asig[tel] = fx
+            cartera_total = sum(1 for fx in tels_all.values() if fx <= r["fch"])
+            cartera_total_asig = sum(1 for fx in tels_asig.values() if fx <= r["fch"])
+        # MATRÍCULAS NO IDENTIFICADAS: matrículas de este curso (num_indice) cuyo teléfono
+        # (tel_1, o tel_2 si el 1 está vacío) NO aparece en cartera_junta. Sin filtro de fecha.
+        _ni = r["num_indice"]
+        _ni = _ni[:-2] if _ni.endswith(".0") else _ni
+        _mats = mat_por_indice.get(_ni, [])          # lista de (telefono, fecha_matricula)
+        _tels_no_iden = [ph for (ph, fm) in _mats if ph not in cartera_tels]
+        matriculas_no_iden = len(_tels_no_iden)
+        # MATRICULAS LEADS NUEVOS: matrícula hecha dentro de 45 días DESPUÉS del origen
+        # del lead (registro es_origen=SI de ese teléfono en la cartera).
+        mat_leads_nuevos = 0
+        mat_leads_antiguos = 0
+        _tels_nuevos = []
+        _tels_antiguos = []
+        for (ph, fm) in _mats:
+            if not ph or not fm:
+                continue
+            forig = cartera_origen.get(ph)
+            if forig is None:
+                continue
+            dias = (fm - forig).days
+            if 0 <= dias <= 45:
+                mat_leads_nuevos += 1
+                _tels_nuevos.append(ph)
+            else:
+                # >45 días, o matrícula anterior al origen del lead (dias<0) → Antiguo
+                mat_leads_antiguos += 1
+                _tels_antiguos.append(ph)
+        # IMPORTE PAUTA: gasto de Meta Ads sumando TODAS las pautas del num_indice.
+        importe_pauta = round(sum(float(importe_por_pauta.get(str(cd), 0.0)) for cd in cods), 2)
+        # IMPORTE PAUTA EN EL MES: igual, pero solo del periodo filtrado.
+        importe_pauta_mes = round(sum(float(importe_por_pauta_periodo.get(str(cd), 0.0)) for cd in cods), 2)
+
+        # ── SUBFILAS por CANAL (PAUTA / OTROS) ── mismo criterio que la fila padre
+        # (SEDE+PROGRAMA vía campanias, misma fecha) + filtro de canal desde cartera.
+        def _subfila(clave):
+            cc = cartera_canal.get(clave, {})
+            c_all = cc.get("all", {}); c_asig = cc.get("asig", {}); c_tels = cc.get("tels", set())
+            ct = ct_asig = 0
+            l_rec = l_proc = 0
+            l_rec_mes = l_proc_mes = 0
+            if cod and r["fch"]:
+                sp = campanias_map.get(str(cod).upper())
+                if sp:
+                    fa = c_all.get(sp, {})
+                    fg = c_asig.get(sp, {})
+                    # Cartera Total/Asig del canal: fecha_creada <= inicio del curso (igual que padre)
+                    ct = sum(1 for fx in fa.values() if fx and fx <= r["fch"])
+                    ct_asig = sum(1 for fx in fg.values() if fx and fx <= r["fch"])
+                    # L. Recibidos/Procesados del canal = misma cartera del canal (mismo corte)
+                    l_rec = ct
+                    l_proc = ct_asig
+                    # "del Mes" = fecha_creada en el periodo filtrado
+                    l_rec_mes = sum(1 for fx in fa.values() if _en_periodo(fx, ano, mes, dia))
+                    l_proc_mes = sum(1 for fx in fg.values() if _en_periodo(fx, ano, mes, dia))
+            # Matrículas del curso, clasificadas por canal:
+            #  - NO identificadas (tel NO en cartera) -> todas a OTROS.
+            #  - identificadas -> al canal de su telefono (c_tels), regla 45 dias.
+            mt_noiden = mt_nuevos = mt_antiguos = 0
+            for (ph, fm) in _mats:
+                if not ph:
+                    continue
+                en_cartera = ph in cartera_tels
+                if not en_cartera:
+                    # no identificada: solo cuenta en la subfila OTROS
+                    if clave == "OTROS":
+                        mt_noiden += 1
+                    continue
+                # identificada: solo cuenta si su tel pertenece a ESTE canal
+                if ph not in c_tels:
+                    continue
+                forig = cartera_origen.get(ph)
+                if fm and forig:
+                    d = (fm - forig).days
+                    if 0 <= d <= 45: mt_nuevos += 1
+                    else: mt_antiguos += 1
+            return {"canal": clave, "cartera_total": ct, "cartera_total_asig": ct_asig,
+                    "leads_nuevos": l_rec, "leads_nuevos_asesor": l_proc,
+                    "leads_nuevos_mes": l_rec_mes, "leads_nuevos_mes_asesor": l_proc_mes,
+                    "matriculas_no_iden": mt_noiden, "mat_leads_nuevos": mt_nuevos,
+                    "mat_leads_antiguos": mt_antiguos}
+        subfilas = [_subfila("PAUTA"), _subfila("WEB"), _subfila("OTROS")] if cartera_canal else []
+
+        filas.append({
+            "num_indice": r["num_indice"],
+            "personalizado": r["personalizado"],
+            "fecha_inicio": r["fecha_inicio"],
+            "pauta": r.get("pauta"),
+            "importe_pauta": importe_pauta,
+            "importe_pauta_mes": importe_pauta_mes,
+            "cartera_total": cartera_total,
+            "cartera_total_asig": cartera_total_asig,
+            "matriculas_no_iden": matriculas_no_iden,
+            "matriculas_no_iden_tels": _tels_no_iden,
+            "mat_leads_nuevos": mat_leads_nuevos,
+            "mat_leads_antiguos": mat_leads_antiguos,
+            "mat_leads_nuevos_tels": _tels_nuevos,
+            "mat_leads_antiguos_tels": _tels_antiguos,
+            "leads_acumulados": acum,
+            "leads_nuevos": r["leads_nuevos"],
+            "leads_nuevos_asesor": r["leads_nuevos_asesor"],
+            "leads_nuevos_mes": r["leads_nuevos_mes"],
+            "leads_nuevos_mes_asesor": r["leads_nuevos_mes_asesor"],
+            "subfilas_canal": subfilas,
+            "conjuntos": [cj for cd in cods for cj in conjunto_por_pauta.get(str(cd).strip(), [])],
+            "contar": (pauta_map.get(str(r["num_indice"]).strip()) or {}).get("contar") or "SI",
+        })
+    return {"filas": filas}

backend/main.py

@@ -0,0 +1,289 @@
+# backend/main.py
+"""API REST del Dashboard de LEADS (FastAPI)."""
+from fastapi import FastAPI, Query, HTTPException, Body
+from fastapi.middleware.cors import CORSMiddleware
+from datetime import datetime
+import uvicorn
+
+import os
+from dotenv import load_dotenv
+
+# Cargar variables de entorno desde .env
+load_dotenv()
+
+import services
+from cache_manager import start_background_refresh, cache_stats
+
+app = FastAPI(title="Dashboard Leads API", version="1.0")
+
+
+# Orígenes CORS configurables (por defecto permite todo o el dominio configurado)
+cors_env = os.getenv("CORS_ORIGINS", "*")
+origins = [o.strip() for o in cors_env.split(",") if o.strip()] if cors_env != "*" else ["*"]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins if origins else ["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+@app.on_event("startup")
+def _startup():
+    # Precarga en SEGUNDO PLANO (hilo aparte) para no bloquear el arranque del server.
+    import threading
+    def _precarga_bg():
+        print("[startup] Precargando datos de Leads (2do plano)...")
+        try:
+            services.precargar_todo()
+            print("[startup] Precarga completa.")
+        except Exception as e:
+            print(f"[startup] Precarga falló: {e}")
+    threading.Thread(target=_precarga_bg, daemon=True).start()
+    # Otros General en un hilo aparte (sus consultas son mas pesadas)
+    def _precarga_otros_bg():
+        try:
+            services.precargar_otros_general()
+        except Exception as e:
+            print(f"[startup] Precarga Otros falló: {e}")
+    threading.Thread(target=_precarga_otros_bg, daemon=True).start()
+    start_background_refresh(services.refrescar_todo, interval=900)
+
+
+@app.get("/api/health")
+def health():
+    return {"status": "ok", "hora": datetime.now().isoformat()}
+
+
+@app.get("/api/cache/stats")
+def stats():
+    return cache_stats()
+
+
+@app.post("/api/cache/refresh")
+def refresh():
+    services.refrescar_todo()
+    return {"status": "refrescado"}
+
+
+@app.get("/api/leads/filtros")
+def get_filtros():
+    try:
+        return services.opciones_filtros()
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/leads")
+def get_leads(
+    ano: str = Query("TODOS"),
+    mes: str = Query("TODOS"),
+    dia: str = Query("TODOS"),
+    programa: str = Query("TODOS"),
+    sede: str = Query("TODOS"),
+):
+    try:
+        return services.leads_dashboard(ano, mes, dia, programa, sede)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/vendedores")
+def get_vendedores(
+    ano: str = Query("TODOS"),
+    mes: str = Query("TODOS"),
+    dia: str = Query("TODOS"),
+):
+    try:
+        return services.vendedores_dashboard(ano, mes, dia)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/roas")
+def get_roas(
+    ano: str = Query("TODOS"),
+    mes: str = Query("TODOS"),
+    dia: str = Query("TODOS"),
+):
+    try:
+        return services.roas_dashboard(ano, mes, dia)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/conjuntos-sin-sede")
+def get_conjuntos_sin_sede():
+    try:
+        return services.conjuntos_sin_sede()
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/conjuntos-sin-sede/guardar")
+def post_conjunto_sede(body: dict = Body(...)):
+    try:
+        cambios = body.get("cambios") or []
+        return services.guardar_conjunto_sede(cambios)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/conjuntos-sin-sede/borrar")
+def post_borrar_conjunto_sede(body: dict = Body(...)):
+    try:
+        return services.borrar_conjunto_sede(body.get("conjunto") or "")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/otros-general")
+def get_otros_general(
+    ano: str = Query("TODOS"),
+    mes: str = Query("TODOS"),
+    dia: str = Query("TODOS"),
+):
+    try:
+        return services.otros_general(ano, mes, dia)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/conjuntos-sin-pauta")
+def get_conjuntos_sin_pauta():
+    try:
+        return {"conjuntos": services.conjuntos_sin_pauta()}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/programas-ocultos")
+def get_programas_ocultos():
+    try:
+        return services.programas_ocultos()
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/programas-ocultos/encender")
+def post_encender_programas(body: dict = Body(...)):
+    try:
+        nis = body.get("num_indices") or []
+        return services.encender_programas(nis)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/programas-disponibles")
+def get_programas_disponibles():
+    try:
+        return services.programas_disponibles()
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/leyenda-anuncios")
+def get_leyenda():
+    try:
+        return services.leyenda_anuncios()
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/leyenda-anuncios/guardar")
+def post_leyenda(body: dict = Body(...)):
+    try:
+        cambios = body.get("cambios") or []
+        return services.guardar_leyenda(cambios)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+# ── LEYENDA (campanias de Supabase): listar / agregar / borrar ──
+@app.get("/api/campanias")
+def get_campanias():
+    try:
+        return {"filas": services.campanias_listar()}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/campanias/agregar")
+def post_campania(body: dict = Body(...)):
+    try:
+        return services.campania_agregar(body or {})
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/campanias/editar")
+def post_editar_campania(body: dict = Body(...)):
+    try:
+        cid = body.get("id")
+        return services.campania_editar(cid, body or {})
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/campanias/borrar")
+def post_borrar_campania(body: dict = Body(...)):
+    try:
+        return services.campania_borrar(body.get("id"))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/pauta/uso")
+def get_uso_pauta(pauta: str = Query(...), excluir: str = Query("")):
+    try:
+        return services.uso_de_pauta(pauta, excluir)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/curso/guardar-pauta")
+def post_guardar_pauta(body: dict = Body(...)):
+    try:
+        ni = str(body.get("num_indice", "")).strip()
+        pa = str(body.get("pauta", "")).strip()
+        cj = body.get("conjunto") or None
+        contar = body.get("contar")   # "SI" / "NO" / None
+        if not ni:
+            raise HTTPException(status_code=400, detail="num_indice es obligatorio")
+        return services.guardar_edicion_curso(ni, pa, cj, contar)
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/ultima-actualizacion")
+def get_ultima_actualizacion():
+    try:
+        return services.ultima_actualizacion()
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/leads/alertas")
+def get_alertas():
+    """Valores de programa/sede en cartera_junta que NO están en el diccionario."""
+    try:
+        return services.alertas()
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/debug/cursos")
+def debug_cursos(ano: str = "2026", mes: str = "1"):
+    """Diagnóstico: lista cursos del periodo con inscritos, tipo y meta."""
+    try:
+        return services.debug_cursos(ano, mes)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+if __name__ == "__main__":
+    uvicorn.run("main:app", host="0.0.0.0", port=8001, reload=False)

backend/requirements.txt

@@ -0,0 +1,6 @@
+fastapi
+uvicorn
+python-dotenv
+pyodbc
+psycopg2-binary
+requests

frontend/.env.example

@@ -0,0 +1,4 @@
+# URL base del backend FastAPI que consume el frontend.
+# Local:      http://localhost:8001
+# Despliegue: https://api-leads.escueladerefrigeracion.lat
+VITE_API_URL=http://localhost:8001

frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard Leads — Escuela Refrigeración</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "dashboard-leads",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recharts": "^2.12.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.0.0"
+  }
+}

frontend/public/50x.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Error</title>
+<style>
+html { color-scheme: light dark; }
+body { width: 35em; margin: 0 auto;
+font-family: Tahoma, Verdana, Arial, sans-serif; }
+</style>
+</head>
+<body>
+<h1>An error occurred.</h1>
+<p>Sorry, the page you are looking for is currently unavailable.<br/>
+Please try again later.</p>
+<p>If you are the system administrator of this resource then you should check
+the error log for details.</p>
+<p><em>Faithfully yours, nginx.</em></p>
+</body>
+</html>

frontend/src/App.jsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import Sidebar from "./components/Sidebar";
+import Leads from "./pages/Leads";
+import OtrosGeneral from "./pages/OtrosGeneral";
+import Vendedores from "./pages/Vendedores";
+import Roas from "./pages/Roas";
+import CampanitaAlertas from "./components/CampanitaAlertas";
+import ConfigModal from "./components/ConfigModal";
+import ErrorBoundary from "./components/ErrorBoundary";
+
+export default function App() {
+  const [pagina, setPagina] = useState("leads");
+  const [config, setConfig] = useState(false);
+
+  function render() {
+    switch (pagina) {
+      case "leads": return <Leads />;
+      case "otros": return <OtrosGeneral />;
+      case "vendedores": return <Vendedores />;
+      case "roas": return <Roas />;
+      default: return null;
+    }
+  }
+
+  return (
+    <div className="app">
+      <Sidebar active={pagina} onChange={setPagina} onConfig={() => setConfig(true)} />
+      <main className="main">
+        <ErrorBoundary key={pagina}>{render()}</ErrorBoundary>
+      </main>
+      <CampanitaAlertas />
+      {config && <ConfigModal onClose={() => setConfig(false)} />}
+    </div>
+  );
+}

frontend/src/components/CampanitaAlertas.jsx

@@ -0,0 +1,92 @@
+// Campanita de alertas: avisa de programas/sedes NO identificados en cartera_junta
+// (valores que no están en el diccionario alias_normalizacion).
+import { useState, useEffect } from "react";
+import { api } from "../lib/api";
+
+export default function CampanitaAlertas() {
+  const [data, setData] = useState({ programa: [], sede: [] });
+  const [abierto, setAbierto] = useState(false);
+
+  useEffect(() => {
+    let activo = true;
+    api.alertas()
+      .then((r) => { if (activo) setData({ programa: r.programa || [], sede: r.sede || [] }); })
+      .catch(() => { if (activo) setData({ programa: [], sede: [] }); });
+    return () => { activo = false; };
+  }, []);
+
+  const total = (data.programa?.length || 0) + (data.sede?.length || 0);
+  const hay = total > 0;
+
+  return (
+    <div style={{ position: "fixed", right: 18, top: 14, zIndex: 80 }}>
+      <button
+        onClick={() => setAbierto((v) => !v)}
+        title={hay ? `${total} valor(es) sin identificar` : "Sin alertas"}
+        style={{
+          position: "relative", width: 38, height: 38, borderRadius: 10,
+          border: "1px solid " + (hay ? "#f59e0b" : "#334155"),
+          background: hay ? "#78350f" : "rgba(15,23,42,0.9)",
+          color: hay ? "#fde68a" : "#94a3b8",
+          cursor: "pointer", fontSize: 18, lineHeight: 1,
+          display: "flex", alignItems: "center", justifyContent: "center",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
+        }}
+      >
+        🔔
+        {hay && (
+          <span style={{
+            position: "absolute", top: -6, right: -6, minWidth: 18, height: 18,
+            padding: "0 4px", borderRadius: 999, background: "#dc2626", color: "#fff",
+            fontSize: 11, fontWeight: 700, display: "flex", alignItems: "center",
+            justifyContent: "center", border: "1px solid #fff",
+          }}>{total}</span>
+        )}
+      </button>
+
+      {abierto && (
+        <div style={{
+          position: "absolute", right: 0, top: 46, width: 320, maxHeight: 420,
+          overflowY: "auto", background: "#fff", color: "#0f172a",
+          border: "1px solid #e2e8f0", borderRadius: 12,
+          boxShadow: "0 8px 24px rgba(0,0,0,0.18)", padding: 14, fontSize: 13,
+        }}>
+          <div style={{ fontWeight: 700, marginBottom: 8 }}>🔔 Alertas de normalización</div>
+          {!hay ? (
+            <div style={{ color: "#059669", fontWeight: 600 }}>✓ Todo identificado, nada por revisar.</div>
+          ) : (
+            <>
+              {(data.programa?.length > 0) && (
+                <div style={{ marginBottom: 10 }}>
+                  <div style={{ fontWeight: 600, color: "#b45309", marginBottom: 4 }}>
+                    Nuevo programa no identificado:
+                  </div>
+                  {data.programa.map((p, i) => (
+                    <div key={i} style={{ padding: "3px 0", borderBottom: "1px solid #f1f5f9" }}>
+                      <b>{p.valor || "(vacío)"}</b> <span style={{ color: "#94a3b8" }}>· {p.veces}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {(data.sede?.length > 0) && (
+                <div>
+                  <div style={{ fontWeight: 600, color: "#b45309", marginBottom: 4 }}>
+                    Nueva sede no identificada:
+                  </div>
+                  {data.sede.map((s, i) => (
+                    <div key={i} style={{ padding: "3px 0", borderBottom: "1px solid #f1f5f9" }}>
+                      <b>{s.valor || "(vacío)"}</b> <span style={{ color: "#94a3b8" }}>· {s.veces}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+              <div style={{ marginTop: 10, color: "#64748b", fontSize: 12 }}>
+                Agrégalos al diccionario (alias_normalizacion) para clasificarlos.
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/ConfigModal.jsx

@@ -0,0 +1,969 @@
+import { useState, useEffect, useRef } from "react";
+import { api } from "../lib/api";
+
+// Desplegable con búsqueda (estilo Claude).
+function ProgramaSelect({ valor, opciones = [], onSelect }) {
+  const [abierto, setAbierto] = useState(false);
+  const [q, setQ] = useState("");
+  const ref = useRef(null);
+
+  useEffect(() => {
+    function fuera(e) { if (ref.current && !ref.current.contains(e.target)) setAbierto(false); }
+    document.addEventListener("mousedown", fuera);
+    return () => document.removeEventListener("mousedown", fuera);
+  }, []);
+
+  const filtradas = opciones.filter((o) => o.label.toLowerCase().includes(q.toLowerCase()));
+
+  return (
+    <div ref={ref} style={{ position: "relative", width: "100%" }}>
+      <button onClick={() => setAbierto((v) => !v)}
+        style={{ width: "100%", textAlign: "left", padding: "7px 10px", border: "1px solid #cbd5e1",
+                 borderRadius: 8, fontSize: 13, background: "#fff", cursor: "pointer",
+                 color: valor ? "#334155" : "#94a3b8", fontFamily: "inherit",
+                 display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+          {valor || "Seleccionar programa..."}
+        </span>
+        <span style={{ color: "#94a3b8", marginLeft: 6 }}>⌄</span>
+      </button>
+      {abierto && (
+        <div style={{ position: "absolute", top: "calc(100% + 6px)", left: 0, right: 0, background: "#fff",
+                      border: "1px solid #e2e8f0", borderRadius: 12, boxShadow: "0 12px 34px rgba(0,0,0,0.18)",
+                      zIndex: 100, overflow: "hidden" }}>
+          <div style={{ padding: 10, borderBottom: "1px solid #f1f5f9" }}>
+            <input autoFocus value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar..."
+              style={{ width: "100%", padding: "8px 11px", border: "1px solid #cbd5e1", borderRadius: 8,
+                       fontSize: 13, fontFamily: "inherit", outline: "none" }} />
+          </div>
+          <div style={{ maxHeight: 220, overflow: "auto" }}>
+            {filtradas.length === 0 ? (
+              <div style={{ padding: "12px 14px", fontSize: 13, color: "#94a3b8" }}>Sin opciones</div>
+            ) : filtradas.map((o) => (
+              <div key={o.num_indice} style={{ padding: "9px 14px", fontSize: 13, color: "#334155", cursor: "pointer" }}
+                onMouseEnter={(e) => e.currentTarget.style.background = "#f1f5f9"}
+                onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => { onSelect && onSelect(o); setAbierto(false); setQ(""); }}>
+                {o.label}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Apartado "Sedes de Anuncios": conjuntos del CSV sin sede -> asignar sede manual.
+// FASE 1: solo vista (dropdown de sede por fila). El guardar se agrega despues.
+function SedesAnuncios() {
+  const [filas, setFilas] = useState([]);
+  const [cargando, setCargando] = useState(true);
+  const [sel, setSel] = useState({});       // conjunto -> sede elegida (decorativo por ahora)
+  const [selProg, setSelProg] = useState({}); // conjunto -> programa elegido (decorativo)
+  const [busca, setBusca] = useState("");
+  // Opciones fijas (no se pueden borrar) y opciones ampliables con "Agregar".
+  const SEDES_FIJAS = ["LIMA", "PIURA", "AREQUIPA", "TRUJILLO"];
+  const PROGS_FIJOS = ["TEAC", "TERC", "SEMINARIOS", "OTROS"];
+  const [sedes, setSedes] = useState(SEDES_FIJAS);
+  const [programas, setProgramas] = useState(PROGS_FIJOS);
+  const SEDES = sedes;
+  const PROGRAMAS = programas;
+
+  // Quita una opción creada (no fija): la saca del dropdown y de cualquier
+  // conjunto que la tenga asignada (se aplica al Guardar).
+  function quitarOpcion(tipo, val) {
+    if (tipo === "TIPO") {
+      if (SEDES_FIJAS.includes(val)) return;
+      setSedes((s) => s.filter((x) => x !== val));
+      setSel((cur) => {
+        const n = { ...cur };
+        Object.keys(n).forEach((k) => { if (n[k] === val) n[k] = ""; });
+        return n;
+      });
+    } else {
+      if (PROGS_FIJOS.includes(val)) return;
+      setProgramas((p) => p.filter((x) => x !== val));
+      setSelProg((cur) => {
+        const n = { ...cur };
+        Object.keys(n).forEach((k) => { if (n[k] === val) n[k] = ""; });
+        return n;
+      });
+    }
+  }
+  // Pop-up "Agregar"
+  const [popup, setPopup] = useState(false);
+  const [nvTipo, setNvTipo] = useState("TIPO");   // "TIPO" o "PROGRAMA"
+  const [nvValor, setNvValor] = useState("");
+
+  function agregar() {
+    const val = nvValor.trim().toUpperCase();
+    if (!val) return;
+    if (nvTipo === "TIPO") {
+      if (!sedes.includes(val)) setSedes((s) => [...s, val]);
+    } else {
+      if (!programas.includes(val)) setProgramas((p) => [...p, val]);
+    }
+    setNvValor(""); setPopup(false);
+  }
+
+  const [guardando, setGuardando] = useState(false);
+  const [msg, setMsg] = useState("");
+
+  useEffect(() => {
+    api.conjuntosSinSede()
+      .then((r) => {
+        const rows = r || [];
+        setFilas(rows);
+        // precargar sede/programa ya asignados + ampliar opciones si hay valores nuevos
+        const s0 = {}, p0 = {}; const sExtra = new Set(), pExtra = new Set();
+        rows.forEach((f) => {
+          if (f.sede) { s0[f.conjunto] = f.sede; sExtra.add(f.sede); }
+          if (f.programa) { p0[f.conjunto] = f.programa; pExtra.add(f.programa); }
+        });
+        setSel(s0); setSelProg(p0);
+        setSedes((cur) => [...cur, ...[...sExtra].filter((x) => !cur.includes(x))]);
+        // Carga los programas ya asignados (incluye los nuevos que crees, ej.
+        // BRANDING). El dashboard ahora SÍ reconoce cualquier programa asignado.
+        setProgramas((cur) => [...cur, ...[...pExtra].filter((x) => !cur.includes(x))]);
+        setCargando(false);
+      })
+      .catch(() => setCargando(false));
+  }, []);
+
+  async function guardar() {
+    setGuardando(true); setMsg("");
+    try {
+      const cambios = filas
+        .filter((f) => sel[f.conjunto] || selProg[f.conjunto])
+        .map((f) => ({ conjunto: f.conjunto, sede: sel[f.conjunto] || "", programa: selProg[f.conjunto] || "" }));
+      await api.guardarConjuntoSede(cambios);
+      setMsg("✓ Guardado. Se reflejará en ROAS.");
+      window.dispatchEvent(new Event("roas-actualizar"));   // avisa al ROAS que recargue
+      window.dispatchEvent(new Event("datos-actualizar"));  // avisa a TODOS los apartados
+    } catch (e) {
+      setMsg("Error al guardar");
+    }
+    setGuardando(false);
+  }
+
+  async function borrar(conjunto) {
+    // limpia la seleccion en pantalla y borra la asignacion en Supabase
+    setSel((s) => { const n = { ...s }; delete n[conjunto]; return n; });
+    setSelProg((s) => { const n = { ...s }; delete n[conjunto]; return n; });
+    try {
+      await api.borrarConjuntoSede(conjunto);
+      setMsg("✓ Asignación borrada.");
+      window.dispatchEvent(new Event("roas-actualizar"));   // avisa al ROAS que recargue
+      window.dispatchEvent(new Event("datos-actualizar"));  // avisa a TODOS los apartados
+    } catch (e) {
+      setMsg("Error al borrar");
+    }
+  }
+
+  const vis = filas.filter((f) => f.conjunto.toLowerCase().includes(busca.toLowerCase()));
+
+  return (
+    <>
+      <div style={{ padding: "14px 22px 8px" }}>
+        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+          <input value={busca} onChange={(e) => setBusca(e.target.value)}
+            placeholder="Buscar conjunto de anuncio..."
+            style={{ flex: 1, padding: "9px 12px", border: "1px solid #cbd5e1",
+                     borderRadius: 9, fontSize: 13 }} />
+          <button onClick={() => setPopup(true)}
+            style={{ padding: "9px 16px", border: "none", background: "#1e3a5f", color: "#fff",
+                     borderRadius: 9, fontSize: 13, fontWeight: 700, cursor: "pointer", whiteSpace: "nowrap" }}>
+            + Agregar
+          </button>
+        </div>
+        <div style={{ fontSize: 12, color: "#64748b", marginTop: 8 }}>
+          Conjuntos de anuncios sin sede asignada. Elige la sede y el programa de cada uno.
+        </div>
+      </div>
+
+      {/* Pop-up Agregar nueva opción (Tipo o Programa) */}
+      {popup && (
+        <div onClick={() => setPopup(false)}
+          style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.4)", zIndex: 60,
+                   display: "flex", alignItems: "center", justifyContent: "center" }}>
+          <div onClick={(e) => e.stopPropagation()}
+            style={{ background: "#fff", borderRadius: 14, width: 360, padding: 22,
+                     boxShadow: "0 20px 50px rgba(0,0,0,0.3)" }}>
+            <div style={{ fontSize: 16, fontWeight: 700, color: "#0f172a", marginBottom: 16 }}>
+              Agregar nueva opción
+            </div>
+            <label style={{ fontSize: 12, fontWeight: 600, color: "#64748b" }}>Clasificación</label>
+            <select value={nvTipo} onChange={(e) => setNvTipo(e.target.value)}
+              style={{ width: "100%", padding: "9px 10px", border: "1px solid #cbd5e1",
+                       borderRadius: 8, fontSize: 14, marginTop: 5, marginBottom: 14 }}>
+              <option value="TIPO">Tipo (Sede)</option>
+              <option value="PROGRAMA">Programa</option>
+            </select>
+            <label style={{ fontSize: 12, fontWeight: 600, color: "#64748b" }}>Nombre</label>
+            <input value={nvValor} onChange={(e) => setNvValor(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && agregar()}
+              placeholder="Ej: CHICLAYO"
+              style={{ width: "100%", padding: "9px 10px", border: "1px solid #cbd5e1",
+                       borderRadius: 8, fontSize: 14, marginTop: 5, marginBottom: 14 }} />
+
+            {/* Lista de opciones CREADAS (no fijas) para poder borrarlas */}
+            {(() => {
+              const esSede = nvTipo === "TIPO";
+              const lista = (esSede ? sedes : programas)
+                .filter((x) => !(esSede ? SEDES_FIJAS : PROGS_FIJOS).includes(x));
+              if (lista.length === 0) return null;
+              return (
+                <div style={{ marginBottom: 16 }}>
+                  <div style={{ fontSize: 12, fontWeight: 600, color: "#64748b", marginBottom: 6 }}>
+                    {esSede ? "Sedes creadas" : "Programas creados"} (clic en × para borrar)
+                  </div>
+                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
+                    {lista.map((x) => (
+                      <span key={x} style={{ display: "inline-flex", alignItems: "center", gap: 6,
+                                             background: "#f1f5f9", border: "1px solid #e2e8f0",
+                                             borderRadius: 999, padding: "4px 6px 4px 11px", fontSize: 12.5,
+                                             fontWeight: 600, color: "#334155" }}>
+                        {x}
+                        <button onClick={() => quitarOpcion(nvTipo, x)} title="Borrar"
+                          style={{ width: 18, height: 18, borderRadius: "50%", border: "none",
+                                   background: "#fee2e2", color: "#ef4444", cursor: "pointer",
+                                   fontSize: 13, lineHeight: 1, display: "inline-flex",
+                                   alignItems: "center", justifyContent: "center" }}>×</button>
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              );
+            })()}
+
+            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
+              <button onClick={() => setPopup(false)}
+                style={{ padding: "8px 16px", border: "1px solid #cbd5e1", background: "#fff",
+                         color: "#64748b", borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer" }}>
+                Cancelar
+              </button>
+              <button onClick={agregar}
+                style={{ padding: "8px 18px", border: "none", background: "#1e3a5f", color: "#fff",
+                         borderRadius: 8, fontSize: 13, fontWeight: 700, cursor: "pointer" }}>
+                Guardar
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+      <div style={{ flex: 1, overflow: "hidden", padding: "0 22px 4px" }}>
+        {cargando ? (
+          <div style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Cargando...</div>
+        ) : (
+          <div style={{ height: "100%", border: "1px solid #e2e8f0", borderRadius: 12, overflow: "auto" }}>
+            <table style={{ width: "100%", borderCollapse: "separate", borderSpacing: 0, tableLayout: "fixed" }}>
+              <thead>
+                <tr>
+                  <th style={{ textAlign: "center", padding: "11px 14px", position: "sticky", top: 0,
+                               background: "#1e3a5f", color: "#fff", fontSize: 12.5, fontWeight: 700,
+                               borderRight: "1px solid rgba(255,255,255,0.12)" }}>Conjunto de Anuncio</th>
+                  <th style={{ textAlign: "center", padding: "11px 14px", position: "sticky", top: 0,
+                               background: "#1e3a5f", color: "#fff", fontSize: 12.5, fontWeight: 700, width: 150,
+                               borderRight: "1px solid rgba(255,255,255,0.12)" }}>Tipo</th>
+                  <th style={{ textAlign: "center", padding: "11px 14px", position: "sticky", top: 0,
+                               background: "#1e3a5f", color: "#fff", fontSize: 12.5, fontWeight: 700, width: 150,
+                               borderRight: "1px solid rgba(255,255,255,0.12)" }}>Programa</th>
+                  <th style={{ padding: "11px 8px", position: "sticky", top: 0,
+                               background: "#1e3a5f", color: "#fff", fontSize: 12.5, fontWeight: 700, width: 48 }}></th>
+                </tr>
+              </thead>
+              <tbody>
+                {vis.map((f, i) => (
+                  <tr key={f.conjunto} style={{ background: i % 2 ? "#f8fafc" : "#fff" }}>
+                    <td style={{ padding: "10px 14px", fontSize: 13, color: "#1e293b",
+                                 whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
+                                 borderRight: "1px solid #eef2f7" }}>{f.conjunto}</td>
+                    <td style={{ padding: "10px 14px", borderRight: "1px solid #eef2f7" }}>
+                      <select value={sel[f.conjunto] || ""}
+                        onChange={(e) => setSel((s) => ({ ...s, [f.conjunto]: e.target.value }))}
+                        style={{ width: "100%", padding: "6px 8px", border: "1px solid #cbd5e1",
+                                 borderRadius: 7, fontSize: 13 }}>
+                        <option value="">— Sin asignar —</option>
+                        {SEDES.map((s) => <option key={s} value={s}>{s}</option>)}
+                      </select>
+                    </td>
+                    <td style={{ padding: "10px 14px", borderRight: "1px solid #eef2f7" }}>
+                      <select value={selProg[f.conjunto] || ""}
+                        onChange={(e) => setSelProg((s) => ({ ...s, [f.conjunto]: e.target.value }))}
+                        style={{ width: "100%", padding: "6px 8px", border: "1px solid #cbd5e1",
+                                 borderRadius: 7, fontSize: 13 }}>
+                        <option value="">— Sin asignar —</option>
+                        {PROGRAMAS.map((p) => <option key={p} value={p}>{p}</option>)}
+                      </select>
+                    </td>
+                    <td style={{ padding: "10px 8px", textAlign: "center" }}>
+                      {(sel[f.conjunto] || selProg[f.conjunto]) && (
+                        <button onClick={() => borrar(f.conjunto)} title="Borrar asignación"
+                          style={{ border: "none", background: "transparent", color: "#dc2626",
+                                   cursor: "pointer", fontSize: 16, fontWeight: 700, lineHeight: 1 }}>
+                          ×
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+                {vis.length === 0 && (
+                  <tr><td colSpan={4} style={{ padding: 30, textAlign: "center", color: "#94a3b8", fontSize: 13 }}>
+                    No hay conjuntos sin sede.</td></tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
+                    padding: "14px 22px", borderTop: "1px solid #e2e8f0" }}>
+        <span style={{ fontSize: 13, color: msg.startsWith("✓") ? "#047857" : (msg ? "#b91c1c" : "#94a3b8") }}>
+          {msg || `${vis.length} conjuntos sin sede`}
+        </span>
+        <button onClick={guardar} disabled={guardando}
+          style={{ padding: "9px 22px", border: "none", background: "#1e3a5f", color: "#fff",
+                   borderRadius: 9, fontSize: 14, fontWeight: 700, cursor: guardando ? "wait" : "pointer" }}>
+          {guardando ? "Guardando..." : "Guardar"}
+        </button>
+      </div>
+    </>
+  );
+}
+
+// Apartado "Programas": lista de programas con contar=NO (ocultos), con switch para reactivar.
+function ProgramasOcultos() {
+  const [filas, setFilas] = useState([]);
+  const [cargando, setCargando] = useState(true);
+  const [enc, setEnc] = useState({});   // num_indice -> true si se va a encender
+  const [guardando, setGuardando] = useState(false);
+  const [msg, setMsg] = useState("");
+
+  useEffect(() => {
+    api.programasOcultos()
+      .then((r) => { setFilas(r.filas || []); setCargando(false); })
+      .catch(() => setCargando(false));
+  }, []);
+
+  async function guardar() {
+    const nis = Object.entries(enc).filter(([, v]) => v).map(([ni]) => ni);
+    if (nis.length === 0) { setMsg("No hay programas para activar."); return; }
+    setGuardando(true); setMsg("");
+    try {
+      await api.encenderProgramas(nis);
+      setMsg("✓ Activados. Ya aparecen en la matriz.");
+      const r = await api.programasOcultos();
+      setFilas(r.filas || []); setEnc({});
+      window.dispatchEvent(new Event("datos-actualizar"));  // avisa a TODOS los apartados
+    } catch (e) { setMsg("Error: " + e.message); }
+    finally { setGuardando(false); }
+  }
+
+  return (
+    <>
+      <div style={{ padding: "16px 22px 6px" }}>
+        <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
+          Aquí están los programas ocultos del <b>Detalle por Curso</b>. Enciende el interruptor
+          y guarda para que vuelvan a aparecer en la tabla del dashboard.
+        </div>
+      </div>
+      <div style={{ flex: 1, overflow: "auto", padding: "8px 22px" }}>
+        {cargando ? (
+          <div style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Cargando...</div>
+        ) : filas.length === 0 ? (
+          <div style={{ padding: 30, textAlign: "center", color: "#94a3b8", fontSize: 13 }}>
+            No hay programas ocultos.
+          </div>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            {filas.map((f) => {
+              const on = !!enc[f.num_indice];
+              return (
+                <div key={f.num_indice} style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
+                       padding: "12px 14px", border: "1px solid #e2e8f0", borderRadius: 10, background: "#fff" }}>
+                  <div style={{ minWidth: 0 }}>
+                    <div style={{ fontSize: 13.5, fontWeight: 600, color: "#0f172a" }}>{f.dsc_det_programa}</div>
+                    <div style={{ fontSize: 12, color: "#94a3b8" }}>
+                      Índice {f.num_indice}{f.fch_inicio ? ` · ${f.fch_inicio}` : ""}{f.pauta ? ` · Pauta ${f.pauta}` : ""}
+                    </div>
+                  </div>
+                  <div onClick={() => setEnc((p) => ({ ...p, [f.num_indice]: !p[f.num_indice] }))}
+                    style={{ width: 46, height: 26, borderRadius: 999, cursor: "pointer", flexShrink: 0,
+                             background: on ? "#2563eb" : "#cbd5e1", position: "relative", transition: "background .15s" }}>
+                    <div style={{ width: 20, height: 20, borderRadius: "50%", background: "#fff",
+                                  position: "absolute", top: 3, left: on ? 23 : 3, transition: "left .15s",
+                                  boxShadow: "0 1px 3px rgba(0,0,0,0.3)" }} />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
+                    padding: "14px 22px", borderTop: "1px solid #e2e8f0" }}>
+        <span style={{ fontSize: 13, color: msg.startsWith("✓") ? "#047857" : "#b91c1c" }}>{msg}</span>
+        <button onClick={guardar} disabled={guardando}
+          style={{ padding: "9px 22px", border: "none", background: "#1e3a5f", color: "#fff",
+                   borderRadius: 9, fontSize: 14, fontWeight: 700, cursor: guardando ? "wait" : "pointer" }}>
+          {guardando ? "Guardando..." : "Guardar"}
+        </button>
+      </div>
+    </>
+  );
+}
+
+// ── Mini-apartado LEYENDA: tabla de campanias + Agregar (popup) + eliminar (visual) ──
+function LeyendaCampanias() {
+  const CARGOS = ["TEAC", "TERC", "VRF", "CO2", "Seminarios", "Diseño de Chillers", "Diplomado REF", "CAD", "Amoniaco", "Cámaras", "Diseño de Sistemas", "Metrado y Costeo"];
+  const SEDES = ["Lima", "Piura", "Arequipa", "Trujillo"];
+  const ORIGENES = ["Pauta_wsp", "Web_Whatsapp"];
+  const DIAS = ["Domingo", "Sábado", "Semipresencial", "-"];
+
+  const [filas, setFilas] = useState([]);
+  const [cargando, setCargando] = useState(true);
+  const [busca, setBusca] = useState("");
+  const [popup, setPopup] = useState(false);
+  const [editandoId, setEditandoId] = useState(null); // id de la fila en edicion, o null = agregar
+  const [confirmar, setConfirmar] = useState(null);   // fila a eliminar, o null
+  const [choques, setChoques] = useState(null);       // [filas que chocan] o null (popup de aviso)
+  const [guardando, setGuardando] = useState(false);
+  const [msg, setMsg] = useState("");
+  const nuevaVacia = { frase_busqueda: "", cargo: "TEAC", codigo: "", sede: "Lima", dia: "-", origen: "Pauta_wsp", fecha_inicio: "", fecha_fin: "" };
+  const [nueva, setNueva] = useState(nuevaVacia);
+
+  function recargar() {
+    setCargando(true);
+    api.campanias().then((r) => { setFilas(r.filas || []); setCargando(false); })
+      .catch(() => setCargando(false));
+  }
+  useEffect(() => { recargar(); }, []);
+
+  const vis = filas.filter((f) =>
+    !busca || ((f.frase_busqueda || "") + (f.cargo || "") + (f.codigo || "") + (f.sede || "")).toLowerCase().includes(busca.toLowerCase()));
+
+  // Extrae los emojis de un texto (pictográficos). Devuelve un Set de emojis.
+  function emojisDe(txt) {
+    const s = new Set();
+    for (const ch of String(txt || "")) {
+      const cp = ch.codePointAt(0);
+      // rangos de emojis/pictogramas comunes
+      if ((cp >= 0x1F000 && cp <= 0x1FAFF) || (cp >= 0x2600 && cp <= 0x27BF) ||
+          (cp >= 0x2B00 && cp <= 0x2BFF) || cp === 0x2764 || (cp >= 0x2190 && cp <= 0x21FF)) {
+        s.add(ch);
+      }
+    }
+    return s;
+  }
+  // ¿los rangos [i1,f1] y [i2,f2] se solapan? (fechas en texto YYYY-MM-DD)
+  function fechasSolapan(i1, f1, i2, f2) {
+    if (!i1 || !f1 || !i2 || !f2) return false;
+    return i1 <= f2 && i2 <= f1;
+  }
+  // Devuelve las campañas existentes que chocan con "nueva":
+  // mismo emoji compartido Y fechas solapadas.
+  function detectarChoques() {
+    const emN = emojisDe(nueva.frase_busqueda);
+    if (emN.size === 0) return [];
+    const iN = (nueva.fecha_inicio || "").slice(0, 10);
+    const fN = (nueva.fecha_fin || "").slice(0, 10);
+    return filas.filter((f) => {
+      if (editandoId != null && f.id === editandoId) return false;  // no chocar contra si misma
+      const emE = emojisDe(f.frase_busqueda);
+      const comparte = [...emN].some((e) => emE.has(e));   // ¿comparten algún emoji?
+      if (!comparte) return false;
+      return fechasSolapan(iN, fN, (f.fecha_inicio || "").slice(0, 10), (f.fecha_fin || "").slice(0, 10));
+    });
+  }
+
+  function abrirAgregar() {
+    setEditandoId(null); setNueva(nuevaVacia); setMsg(""); setPopup(true);
+  }
+  function abrirEditar(f) {
+    setEditandoId(f.id);
+    setNueva({
+      frase_busqueda: f.frase_busqueda || "", cargo: f.cargo || "TEAC",
+      codigo: f.codigo || "", sede: f.sede || "Lima", dia: f.dia || "-",
+      origen: f.origen || "Pauta_wsp",
+      fecha_inicio: (f.fecha_inicio || "").slice(0, 10),
+      fecha_fin: (f.fecha_fin || "").slice(0, 10),
+    });
+    setMsg(""); setPopup(true);
+  }
+
+  async function agregar() {
+    if (!nueva.frase_busqueda.trim()) { setMsg("Escribe la frase de búsqueda."); return; }
+    // Aviso de choque: mismo emoji + fechas solapadas. Si las fechas NO chocan, no avisa.
+    const ch = detectarChoques();
+    if (ch.length > 0) { setChoques(ch); return; }
+    await guardarCampania();
+  }
+
+  async function guardarCampania() {
+    setChoques(null);
+    setGuardando(true); setMsg("");
+    try {
+      if (editandoId != null) await api.editarCampania(editandoId, nueva);
+      else await api.agregarCampania(nueva);
+      setPopup(false); setNueva(nuevaVacia); setEditandoId(null);
+      recargar();
+      window.dispatchEvent(new Event("datos-actualizar"));
+    } catch (e) { setMsg("Error al guardar: " + e.message); }
+    finally { setGuardando(false); }
+  }
+  async function borrarConfirmado() {
+    const f = confirmar;
+    setConfirmar(null);
+    try {
+      await api.borrarCampania(f.id);
+      recargar();
+      window.dispatchEvent(new Event("datos-actualizar"));
+    } catch (e) { setMsg("Error al borrar: " + e.message); }
+  }
+
+  const inp = { width: "100%", height: 38, border: "1px solid #e2e8f0", borderRadius: 8,
+                padding: "0 11px", fontSize: 13, boxSizing: "border-box" };
+  const lab = { fontSize: 12.5, fontWeight: 600, color: "#475569", display: "block", marginBottom: 5 };
+
+  return (
+    <>
+      <div style={{ padding: "14px 22px 8px", display: "flex", gap: 10 }}>
+        <input value={busca} onChange={(e) => setBusca(e.target.value)}
+          placeholder="Buscar frase, cargo, código o sede..."
+          style={{ flex: 1, padding: "9px 12px", border: "1px solid #cbd5e1", borderRadius: 9, fontSize: 13 }} />
+        <button onClick={abrirAgregar}
+          style={{ padding: "0 16px", background: "#1e3a8a", color: "#fff", border: "none",
+                   borderRadius: 9, fontSize: 13, fontWeight: 700, cursor: "pointer", whiteSpace: "nowrap" }}>
+          + Agregar leyenda
+        </button>
+      </div>
+
+      <div style={{ flex: 1, overflow: "hidden", padding: "0 22px 12px" }}>
+        <div style={{ height: "100%", border: "1px solid #e2e8f0", borderRadius: 12, overflow: "auto" }}>
+          <table style={{ minWidth: 920, width: "100%", borderCollapse: "separate", borderSpacing: 0, fontSize: 12.5 }}>
+            <thead>
+              <tr>
+                {["Frase de búsqueda", "Cargo", "Código", "Sede", "Día", "Origen", "Inicio", "Fin", ""].map((h, i, arr) => (
+                  <th key={i} style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
+                                       padding: "10px 12px", fontWeight: 600, textAlign: "center", whiteSpace: "nowrap",
+                                       borderRight: i < arr.length - 1 ? "1px solid rgba(255,255,255,0.12)" : "none" }}>{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {cargando && (
+                <tr><td colSpan={9} style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Cargando...</td></tr>
+              )}
+              {!cargando && vis.length === 0 && (
+                <tr><td colSpan={9} style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Sin leyendas.</td></tr>
+              )}
+              {!cargando && vis.map((f) => (
+                <tr key={f.id}>
+                  <td style={{ padding: "9px 12px", minWidth: 220, textAlign: "left", borderRight: "1px solid #eef2f7" }}>{f.frase_busqueda}</td>
+                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.cargo}</td>
+                  <td style={{ padding: "9px 12px", fontWeight: 600, whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.codigo}</td>
+                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.sede}</td>
+                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.dia}</td>
+                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.origen}</td>
+                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.fecha_inicio}</td>
+                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.fecha_fin}</td>
+                  <td style={{ padding: "9px 12px", textAlign: "center", whiteSpace: "nowrap" }}>
+                    <div style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
+                      <button onClick={() => abrirEditar(f)} title="Editar leyenda"
+                        onMouseEnter={(e) => { e.currentTarget.style.background = "#2563eb"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#2563eb"; }}
+                        onMouseLeave={(e) => { e.currentTarget.style.background = "#eff6ff"; e.currentTarget.style.color = "#2563eb"; e.currentTarget.style.borderColor = "#bfdbfe"; }}
+                        style={{ width: 28, height: 28, borderRadius: 8, background: "#eff6ff",
+                                 border: "1px solid #bfdbfe", color: "#2563eb", cursor: "pointer",
+                                 fontSize: 14, lineHeight: 1, display: "inline-flex",
+                                 alignItems: "center", justifyContent: "center",
+                                 transition: "all 0.15s ease" }}>✎</button>
+                      <button onClick={() => setConfirmar(f)} title="Eliminar leyenda"
+                        onMouseEnter={(e) => { e.currentTarget.style.background = "#ef4444"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#ef4444"; }}
+                        onMouseLeave={(e) => { e.currentTarget.style.background = "#fef2f2"; e.currentTarget.style.color = "#ef4444"; e.currentTarget.style.borderColor = "#fecaca"; }}
+                        style={{ width: 28, height: 28, borderRadius: 8, background: "#fef2f2",
+                                 border: "1px solid #fecaca", color: "#ef4444", cursor: "pointer",
+                                 fontSize: 16, fontWeight: 700, lineHeight: 1, display: "inline-flex",
+                                 alignItems: "center", justifyContent: "center",
+                                 transition: "all 0.15s ease" }}>×</button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Popup Agregar leyenda */}
+      {popup && (
+        <div onClick={() => setPopup(false)}
+          style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.45)",
+                   display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1300 }}>
+          <div onClick={(e) => e.stopPropagation()}
+            style={{ background: "#fff", borderRadius: 14, width: 520, maxWidth: "94vw",
+                     boxShadow: "0 20px 50px rgba(0,0,0,.25)", overflow: "hidden" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
+                          padding: "16px 20px", borderBottom: "1px solid #eef2f7" }}>
+              <div style={{ fontSize: 16, fontWeight: 700, color: "#0f172a" }}>{editandoId != null ? "Editar leyenda" : "Agregar leyenda"}</div>
+              <button onClick={() => setPopup(false)}
+                style={{ background: "transparent", border: "none", fontSize: 20, color: "#94a3b8", cursor: "pointer" }}>×</button>
+            </div>
+            <div style={{ padding: "18px 20px", display: "flex", flexDirection: "column", gap: 14 }}>
+              <div>
+                <label style={lab}>Frase de búsqueda</label>
+                <input style={inp} value={nueva.frase_busqueda} placeholder="Ej. 🖥️ Estoy interesado en sus Seminarios"
+                  onChange={(e) => setNueva({ ...nueva, frase_busqueda: e.target.value })} />
+              </div>
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+                <div>
+                  <label style={lab}>Cargo / programa</label>
+                  <select style={{ ...inp, padding: "0 8px", background: "#fff" }} value={nueva.cargo}
+                    onChange={(e) => setNueva({ ...nueva, cargo: e.target.value })}>
+                    {CARGOS.map((c) => <option key={c}>{c}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label style={lab}>Código</label>
+                  <input style={inp} value={nueva.codigo} placeholder="Ej. 74a"
+                    onChange={(e) => setNueva({ ...nueva, codigo: e.target.value })} />
+                </div>
+              </div>
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+                <div>
+                  <label style={lab}>Sede</label>
+                  <select style={{ ...inp, padding: "0 8px", background: "#fff" }} value={nueva.sede}
+                    onChange={(e) => setNueva({ ...nueva, sede: e.target.value })}>
+                    {SEDES.map((s) => <option key={s}>{s}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label style={lab}>Origen</label>
+                  <select style={{ ...inp, padding: "0 8px", background: "#fff" }} value={nueva.origen}
+                    onChange={(e) => setNueva({ ...nueva, origen: e.target.value })}>
+                    {ORIGENES.map((o) => <option key={o}>{o}</option>)}
+                  </select>
+                </div>
+              </div>
+              <div>
+                <label style={lab}>Día / frecuencia</label>
+                <select style={{ ...inp, padding: "0 8px", background: "#fff" }} value={nueva.dia}
+                  onChange={(e) => setNueva({ ...nueva, dia: e.target.value })}>
+                  {DIAS.map((d) => <option key={d}>{d}</option>)}
+                </select>
+              </div>
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+                <div>
+                  <label style={lab}>Fecha inicio</label>
+                  <input type="date" style={inp} value={nueva.fecha_inicio}
+                    onChange={(e) => setNueva({ ...nueva, fecha_inicio: e.target.value })} />
+                </div>
+                <div>
+                  <label style={lab}>Fecha fin</label>
+                  <input type="date" style={inp} value={nueva.fecha_fin}
+                    onChange={(e) => setNueva({ ...nueva, fecha_fin: e.target.value })} />
+                </div>
+              </div>
+            </div>
+            <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, padding: "14px 20px",
+                          borderTop: "1px solid #eef2f7", background: "#f8fafc" }}>
+              <button onClick={() => setPopup(false)}
+                style={{ height: 38, padding: "0 16px", border: "1px solid #cbd5e1", background: "#fff",
+                         borderRadius: 8, fontSize: 13, fontWeight: 600, color: "#475569", cursor: "pointer" }}>Cancelar</button>
+              <button onClick={agregar} disabled={guardando}
+                style={{ height: 38, padding: "0 18px", border: "none", background: "#1e3a8a",
+                         borderRadius: 8, fontSize: 13, fontWeight: 700, color: "#fff",
+                         cursor: guardando ? "default" : "pointer", opacity: guardando ? 0.6 : 1 }}>
+                {guardando ? "Guardando..." : (editandoId != null ? "Guardar cambios" : "Guardar leyenda")}
+              </button>
+            </div>
+            {msg && <div style={{ padding: "0 20px 14px", fontSize: 12.5,
+                                  color: msg.startsWith("Error") ? "#ef4444" : "#0f766e" }}>{msg}</div>}
+          </div>
+        </div>
+      )}
+
+      {/* Popup de confirmación de eliminación */}
+      {confirmar !== null && (
+        <div onClick={() => setConfirmar(null)}
+          style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.45)",
+                   display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1400 }}>
+          <div onClick={(e) => e.stopPropagation()}
+            style={{ background: "#fff", borderRadius: 14, width: 400, maxWidth: "92vw",
+                     boxShadow: "0 20px 50px rgba(0,0,0,.25)", overflow: "hidden", textAlign: "center" }}>
+            <div style={{ padding: "26px 24px 8px" }}>
+              <div style={{ width: 52, height: 52, borderRadius: "50%", background: "#fef2f2",
+                            display: "flex", alignItems: "center", justifyContent: "center",
+                            margin: "0 auto 14px", fontSize: 26, color: "#ef4444" }}>🗑️</div>
+              <div style={{ fontSize: 16, fontWeight: 700, color: "#0f172a", marginBottom: 6 }}>
+                ¿Eliminar esta leyenda?
+              </div>
+              <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
+                {confirmar && (
+                  <>Se eliminará la pauta <b style={{ color: "#0f172a" }}>{confirmar.codigo}</b>
+                    {" "}({confirmar.cargo} — {confirmar.sede}). Esta acción no se puede deshacer.</>
+                )}
+              </div>
+            </div>
+            <div style={{ display: "flex", gap: 10, padding: "18px 24px 22px" }}>
+              <button onClick={() => setConfirmar(null)}
+                style={{ flex: 1, height: 40, border: "1px solid #cbd5e1", background: "#fff",
+                         borderRadius: 9, fontSize: 13.5, fontWeight: 600, color: "#475569", cursor: "pointer" }}>Cancelar</button>
+              <button onClick={borrarConfirmado}
+                style={{ flex: 1, height: 40, border: "none", background: "#ef4444",
+                         borderRadius: 9, fontSize: 13.5, fontWeight: 700, color: "#fff", cursor: "pointer" }}>Sí, eliminar</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Popup de ADVERTENCIA de choque: mismo emoji + fechas solapadas */}
+      {choques !== null && (
+        <div onClick={() => setChoques(null)}
+          style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.45)",
+                   display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1500 }}>
+          <div onClick={(e) => e.stopPropagation()}
+            style={{ background: "#fff", borderRadius: 14, width: 460, maxWidth: "94vw",
+                     boxShadow: "0 20px 50px rgba(0,0,0,.25)", overflow: "hidden" }}>
+            <div style={{ padding: "24px 24px 6px", textAlign: "center" }}>
+              <div style={{ width: 52, height: 52, borderRadius: "50%", background: "#fff7ed",
+                            display: "flex", alignItems: "center", justifyContent: "center",
+                            margin: "0 auto 14px", fontSize: 26 }}>⚠️</div>
+              <div style={{ fontSize: 16, fontWeight: 700, color: "#0f172a", marginBottom: 6 }}>
+                Esta leyenda podría duplicar leads
+              </div>
+              <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
+                La frase que vas a crear comparte emoji y fechas con {choques.length === 1 ? "esta pauta existente" : `estas ${choques.length} pautas existentes`}.
+                Un mismo mensaje podría contarse dos veces.
+              </div>
+            </div>
+            <div style={{ padding: "12px 20px", display: "flex", flexDirection: "column", gap: 8, maxHeight: 240, overflowY: "auto" }}>
+              {choques.map((c) => (
+                <div key={c.id} style={{ border: "1px solid #fed7aa", background: "#fffbeb",
+                                         borderRadius: 10, padding: "10px 12px" }}>
+                  <div style={{ fontSize: 13, fontWeight: 700, color: "#0f172a", marginBottom: 3 }}>
+                    Pauta {c.codigo} <span style={{ fontWeight: 500, color: "#92400e" }}>({c.cargo} — {c.sede})</span>
+                  </div>
+                  <div style={{ fontSize: 12.5, color: "#475569", marginBottom: 4 }}>“{c.frase_busqueda}”</div>
+                  <div style={{ fontSize: 12, color: "#b45309", fontWeight: 600 }}>
+                    Vigente: {c.fecha_inicio} → {c.fecha_fin}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div style={{ display: "flex", gap: 10, padding: "12px 24px 20px" }}>
+              <button onClick={() => setChoques(null)}
+                style={{ flex: 1, height: 40, border: "1px solid #cbd5e1", background: "#fff",
+                         borderRadius: 9, fontSize: 13.5, fontWeight: 600, color: "#475569", cursor: "pointer" }}>Cancelar</button>
+              <button onClick={guardarCampania} disabled={guardando}
+                style={{ flex: 1, height: 40, border: "none", background: "#ea580c",
+                         borderRadius: 9, fontSize: 13.5, fontWeight: 700, color: "#fff",
+                         cursor: guardando ? "default" : "pointer", opacity: guardando ? 0.6 : 1 }}>
+                {guardando ? "Guardando..." : "Crear de todos modos"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default function ConfigModal({ onClose }) {
+  const [seccion, setSeccion] = useState("leyenda");
+  const [filas, setFilas] = useState([]);
+  const [cargando, setCargando] = useState(true);
+  const [guardando, setGuardando] = useState(false);
+  const [msg, setMsg] = useState("");
+  const [busca, setBusca] = useState("");
+  const [edit, setEdit] = useState({});      // conjunto -> pauta editada
+  const [editProg, setEditProg] = useState({}); // conjunto -> {num_indice, label} programa elegido
+  const [progOpc, setProgOpc] = useState([]);  // opciones del desplegable de Programa
+
+  useEffect(() => {
+    api.leyendaAnuncios()
+      .then((r) => { setFilas(r.filas || []); setCargando(false); })
+      .catch(() => setCargando(false));
+    api.programasDisponibles()
+      .then((r) => setProgOpc(r.programas || []))
+      .catch(() => setProgOpc([]));
+  }, []);
+
+  const setPauta = (conjunto, val) => setEdit((p) => ({ ...p, [conjunto]: val }));
+  const valorPauta = (f) => (edit[f.conjunto] !== undefined ? edit[f.conjunto] : (f.pauta || ""));
+  // Programa mostrado: el elegido si hay, si no el que ya trae la fila
+  const valorPrograma = (f) => (editProg[f.conjunto] !== undefined ? editProg[f.conjunto].label : (f.programa || ""));
+
+  async function guardar() {
+    // Un cambio por conjunto que tenga pauta editada o programa elegido
+    const conjuntos = new Set([...Object.keys(edit), ...Object.keys(editProg)]);
+    const cambios = [];
+    for (const conjunto of conjuntos) {
+      const f = filas.find((x) => x.conjunto === conjunto) || {};
+      const pauta = (edit[conjunto] !== undefined ? edit[conjunto] : (f.pauta || "")).trim();
+      const prog = editProg[conjunto];   // {num_indice, label} o undefined
+      cambios.push({ conjunto, pauta, num_indice: prog ? prog.num_indice : null });
+    }
+    if (cambios.length === 0) { setMsg("No hay cambios."); return; }
+    setGuardando(true); setMsg("");
+    try {
+      await api.guardarLeyenda(cambios);
+      setMsg("✓ Guardado correctamente.");
+      const r = await api.leyendaAnuncios();
+      setFilas(r.filas || []); setEdit({}); setEditProg({});
+      window.dispatchEvent(new Event("datos-actualizar"));  // avisa a TODOS los apartados
+    } catch (e) { setMsg("Error: " + e.message); }
+    finally { setGuardando(false); }
+  }
+
+  // Orden: 1) pauta Y programa, 2) pauta sin programa, 3) programa sin pauta, 4) nada
+  const _rango = (f) => {
+    const p = valorPauta(f).trim() !== "";
+    const g = (f.programa || "").trim() !== "";
+    if (p && g) return 0;
+    if (p && !g) return 1;
+    if (!p && g) return 2;
+    return 3;
+  };
+  const filtradas = filas
+    .filter((f) =>
+      !busca || f.conjunto.toLowerCase().includes(busca.toLowerCase())
+      || String(f.pauta).includes(busca)
+      || (f.programa || "").toLowerCase().includes(busca.toLowerCase()))
+    .sort((a, b) => (_rango(a) - _rango(b)) || a.conjunto.localeCompare(b.conjunto));
+
+  return (
+    <div onClick={onClose}
+      style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)",
+               display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1200 }}>
+      <div onClick={(e) => e.stopPropagation()}
+        style={{ background: "#fff", borderRadius: 16, width: 1320, maxWidth: "96vw",
+                 height: 680, maxHeight: "92vh", display: "flex", overflow: "hidden",
+                 boxShadow: "0 24px 70px rgba(0,0,0,0.4)",
+                 fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif" }}>
+        {/* Sidebar del modal */}
+        <div style={{ width: 240, flexShrink: 0, background: "#f8fafc", borderRight: "1px solid #e2e8f0", padding: "18px 12px" }}>
+          <div style={{ fontSize: 12, fontWeight: 700, color: "#94a3b8", textTransform: "uppercase",
+                        padding: "0 10px 10px" }}>Configuración</div>
+          <button onClick={() => setSeccion("leyenda")}
+            style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
+                     border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, marginBottom: 4,
+                     whiteSpace: "nowrap",
+                     background: seccion === "leyenda" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
+            Leyenda de Anuncios
+          </button>
+          <button onClick={() => setSeccion("programas")}
+            style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
+                     border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, marginBottom: 4,
+                     whiteSpace: "nowrap",
+                     background: seccion === "programas" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
+            Programas
+          </button>
+          <button onClick={() => setSeccion("sedes")}
+            style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
+                     border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, marginBottom: 4,
+                     whiteSpace: "nowrap",
+                     background: seccion === "sedes" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
+            Sedes de Anuncios
+          </button>
+          <button onClick={() => setSeccion("leyendas")}
+            style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
+                     border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, whiteSpace: "nowrap",
+                     background: seccion === "leyendas" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
+            Leyenda
+          </button>
+        </div>
+        {/* Contenido */}
+        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
+                        padding: "16px 22px", borderBottom: "1px solid #e2e8f0" }}>
+            <div style={{ fontSize: 17, fontWeight: 700, color: "#0f172a" }}>
+              {seccion === "leyenda" ? "Leyenda de Anuncios"
+               : seccion === "programas" ? "Programas"
+               : seccion === "leyendas" ? "Leyenda"
+               : "Sedes de Anuncios"}
+            </div>
+            <button onClick={onClose}
+              style={{ background: "transparent", border: "none", fontSize: 24, cursor: "pointer", color: "#64748b" }}>×</button>
+          </div>
+
+          {seccion === "leyendas" ? (
+            <LeyendaCampanias />
+          ) : seccion === "sedes" ? (
+            <SedesAnuncios />
+          ) : seccion === "programas" ? (
+            <ProgramasOcultos />
+          ) : (
+          <>
+          <div style={{ padding: "14px 22px 8px" }}>
+            <input value={busca} onChange={(e) => setBusca(e.target.value)}
+              placeholder="Buscar conjunto, pauta o programa..."
+              style={{ width: "100%", padding: "9px 12px", border: "1px solid #cbd5e1",
+                       borderRadius: 9, fontSize: 13 }} />
+          </div>
+
+          <div style={{ flex: 1, overflow: "hidden", padding: "0 22px 4px" }}>
+            {cargando ? (
+              <div style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Cargando...</div>
+            ) : (
+              <div style={{ height: "100%", border: "1px solid #e2e8f0", borderRadius: 12,
+                            overflow: "auto" }}>
+                <table style={{ width: "100%", borderCollapse: "separate", borderSpacing: 0,
+                                tableLayout: "fixed" }}>
+                  <colgroup>
+                    <col style={{ width: "38%" }} />
+                    <col style={{ width: 100 }} />
+                    <col style={{ width: "auto" }} />
+                  </colgroup>
+                  <thead>
+                    <tr>
+                      <th style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
+                                   padding: "11px 14px", fontSize: 13, fontWeight: 600, textAlign: "left",
+                                   borderTopLeftRadius: 12 }}>Conjunto de Anuncios</th>
+                      <th style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
+                                   padding: "11px 14px", fontSize: 13, fontWeight: 600, width: 110, textAlign: "left" }}>Pauta</th>
+                      <th style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
+                                   padding: "11px 14px", fontSize: 13, fontWeight: 600, textAlign: "left", width: 340,
+                                   borderTopRightRadius: 12 }}>Programa</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {filtradas.map((f) => (
+                      <tr key={f.conjunto}>
+                        <td style={{ padding: "8px 14px", fontSize: 13, color: "#334155", textAlign: "left",
+                                     borderRight: "1px solid #eef2f7", wordBreak: "break-word" }}>{f.conjunto}</td>
+                        <td style={{ padding: "8px 14px", borderRight: "1px solid #eef2f7", textAlign: "center" }}>
+                          <input value={valorPauta(f)} onChange={(e) => setPauta(f.conjunto, e.target.value)}
+                            style={{ width: 90, padding: "6px 8px", border: "1px solid #cbd5e1",
+                                     borderRadius: 6, fontSize: 13, textAlign: "left", fontFamily: "inherit",
+                                     background: edit[f.conjunto] !== undefined ? "#fffbeb" : "#fff" }} />
+                        </td>
+                        <td style={{ padding: "8px 14px", maxWidth: 0, position: "relative" }}>
+                          <ProgramaSelect valor={valorPrograma(f)} opciones={progOpc}
+                            onSelect={(o) => setEditProg((p) => ({ ...p, [f.conjunto]: o }))} />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
+                        padding: "14px 22px", borderTop: "1px solid #e2e8f0" }}>
+            <span style={{ fontSize: 13, color: msg.startsWith("✓") ? "#047857" : "#b91c1c" }}>{msg}</span>
+            <button onClick={guardar} disabled={guardando}
+              style={{ padding: "9px 22px", border: "none", background: "#1e3a5f", color: "#fff",
+                       borderRadius: 9, fontSize: 14, fontWeight: 700, cursor: guardando ? "wait" : "pointer" }}>
+              {guardando ? "Guardando..." : "Guardar"}
+            </button>
+          </div>
+          </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ErrorBoundary.jsx

@@ -0,0 +1,41 @@
+import { Component } from "react";
+
+// Captura errores de render de sus hijos y muestra un mensaje en vez de
+// dejar la pantalla en blanco. Botón para reintentar (re-monta el contenido).
+export default class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    // Log para diagnóstico en consola del navegador
+    console.error("[ErrorBoundary]", error, info);
+  }
+  reintentar = () => this.setState({ error: null });
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: 40, display: "flex", flexDirection: "column",
+                      alignItems: "center", justifyContent: "center", height: "100%",
+                      textAlign: "center", color: "#475569" }}>
+          <div style={{ fontSize: 40, marginBottom: 12 }}>⚠️</div>
+          <div style={{ fontSize: 17, fontWeight: 700, color: "#0f172a", marginBottom: 6 }}>
+            Ocurrió un problema al mostrar esta sección
+          </div>
+          <div style={{ fontSize: 13.5, marginBottom: 18, maxWidth: 420, lineHeight: 1.5 }}>
+            El resto del dashboard sigue funcionando. Puedes reintentar o cambiar de apartado.
+          </div>
+          <button onClick={this.reintentar}
+            style={{ height: 40, padding: "0 20px", border: "none", background: "#2563eb",
+                     borderRadius: 9, fontSize: 14, fontWeight: 700, color: "#fff", cursor: "pointer" }}>
+            Reintentar
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,113 @@
+import { useState, useEffect } from "react";
+import { api } from "../lib/api";
+
+const MENU = [
+  { id: "leads", ico: "🎯", label: "Leads" },
+  { id: "otros", ico: "📊", label: "Otros General" },
+  { id: "vendedores", ico: "🧑‍💼", label: "Vendedores" },
+  { id: "roas", ico: "📈", label: "ROAS" },
+];
+
+export default function Sidebar({ active, onChange, onConfig }) {
+  const [menuUser, setMenuUser] = useState(false);
+  const [ultima, setUltima] = useState("");
+  const [actualizando, setActualizando] = useState(false);
+
+  const cargarHora = () => api.ultimaActualizacion()
+    .then((r) => setUltima(r.hora || "")).catch(() => {});
+
+  useEffect(() => {
+    cargarHora();
+    const id = setInterval(cargarHora, 60 * 1000);   // refresca la hora cada minuto
+    return () => clearInterval(id);
+  }, []);
+
+  // Actualiza TODO manualmente (como si pasaran los 15 min, pero al instante).
+  async function actualizarTodo() {
+    if (actualizando) return;
+    setActualizando(true);
+    try {
+      const r = await api.refrescarTodo();
+      if (r && r.hora) setUltima(r.hora);   // hora del refresco manual recien hecho
+      else await cargarHora();
+      window.dispatchEvent(new Event("datos-actualizar"));  // recarga el apartado abierto
+    } catch (e) {
+      // silencioso: no romper la UI si falla
+    } finally {
+      setActualizando(false);
+    }
+  }
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-logo">Escuela <span>Refrigeración</span></div>
+      <nav className="nav" style={{ flex: 1 }}>
+        {MENU.map((m) => (
+          <button
+            key={m.id}
+            className={`nav-item ${active === m.id ? "active" : ""}`}
+            onClick={() => onChange(m.id)}
+          >
+            <span className="ico">{m.ico}</span> {m.label}
+          </button>
+        ))}
+      </nav>
+
+      {/* Botón de actualizar manual + hora de última actualización */}
+      <div style={{ padding: "0 12px 8px" }}>
+        <button onClick={actualizarTodo} disabled={actualizando}
+          title="Actualizar todos los datos ahora (sin esperar los 15 min)"
+          style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center",
+                   gap: 8, padding: "9px 12px", background: actualizando ? "#1e293b" : "#2563eb",
+                   border: "none", borderRadius: 9, color: "#fff", fontSize: 12.5, fontWeight: 600,
+                   cursor: actualizando ? "default" : "pointer", opacity: actualizando ? 0.75 : 1,
+                   transition: "all .15s ease" }}>
+          <span style={{ display: "inline-block",
+                         animation: actualizando ? "spin 1s linear infinite" : "none" }}>🔄</span>
+          {actualizando ? "Actualizando..." : "Actualizar ahora"}
+        </button>
+        {actualizando ? (
+          <div style={{ marginTop: 6, fontSize: 10, color: "#93c5fd", textAlign: "center" }}>
+            Actualizando en segundo plano...
+          </div>
+        ) : ultima ? (
+          <div style={{ marginTop: 6, fontSize: 10, color: "#64748b", textAlign: "center" }}>
+            Actualizado: {ultima}
+          </div>
+        ) : null}
+      </div>
+      <div style={{ position: "relative", borderTop: "1px solid rgba(255,255,255,0.08)", padding: 12 }}>
+        {menuUser && (
+          <div style={{ position: "absolute", bottom: 64, left: 12, right: 12, background: "#1e293b",
+                        border: "1px solid rgba(255,255,255,0.12)", borderRadius: 10, overflow: "hidden",
+                        boxShadow: "0 8px 24px rgba(0,0,0,0.4)" }}>
+            <button onClick={() => { setMenuUser(false); onConfig && onConfig(); }}
+              style={{ width: "100%", textAlign: "left", padding: "11px 14px", background: "transparent",
+                       border: "none", color: "#e2e8f0", cursor: "pointer", fontSize: 13,
+                       display: "flex", alignItems: "center", gap: 9 }}>
+              ⚙️ Configuración
+            </button>
+            <button onClick={() => setMenuUser(false)}
+              style={{ width: "100%", textAlign: "left", padding: "11px 14px", background: "transparent",
+                       border: "none", borderTop: "1px solid rgba(255,255,255,0.08)", color: "#f87171",
+                       cursor: "pointer", fontSize: 13, display: "flex", alignItems: "center", gap: 9 }}>
+              ⎋ Cerrar sesión
+            </button>
+          </div>
+        )}
+        <button onClick={() => setMenuUser((v) => !v)}
+          style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, background: "transparent",
+                   border: "none", cursor: "pointer", padding: "6px 4px", color: "#e2e8f0" }}>
+          <div style={{ width: 34, height: 34, borderRadius: "50%", background: "#2563eb", color: "#fff",
+                        display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700,
+                        fontSize: 13, flexShrink: 0 }}>AS</div>
+          <div style={{ flex: 1, textAlign: "left", lineHeight: 1.2 }}>
+            <div style={{ fontSize: 13, fontWeight: 600 }}>Aron</div>
+            <div style={{ fontSize: 11, color: "#94a3b8" }}>RP ERP</div>
+          </div>
+          <span style={{ fontSize: 11, color: "#94a3b8" }}>{menuUser ? "▲" : "▼"}</span>
+        </button>
+      </div>
+    </aside>
+  );
+}

frontend/src/components/UI.jsx

@@ -0,0 +1,31 @@
+export function Loader({ text = "Cargando..." }) {
+  return (
+    <div className="loader-wrap">
+      <div className="spinner" />
+      <div className="loader-text">{text}</div>
+    </div>
+  );
+}
+
+export function ErrorBox({ msg }) {
+  return <div className="error-box">⚠️ {msg}</div>;
+}
+
+export function Filters({ children }) {
+  return <div className="filters">{children}</div>;
+}
+
+export function Select({ label, value, options, onChange }) {
+  return (
+    <div className="filter-group">
+      {label && <label>{label}</label>}
+      <select value={value} onChange={(e) => onChange(e.target.value)}>
+        {options.map((o) => {
+          const val = typeof o === "object" ? o.value : o;
+          const txt = typeof o === "object" ? o.label : o;
+          return <option key={val} value={val}>{txt}</option>;
+        })}
+      </select>
+    </div>
+  );
+}

frontend/src/lib/api.js

@@ -0,0 +1,148 @@
+// Cliente del backend FastAPI de Leads.
+// 1) Si existe VITE_API_URL (archivo .env del frontend), se usa esa.
+// 2) Si no, se decide por el host desde el que se abrió la página:
+//      localhost      -> backend local  http://localhost:8001
+//      cualquier otro -> API publicada del servidor
+// Así funciona en desarrollo y en el servidor sin necesitar ningún .env.
+const API_LOCAL = "http://localhost:8001";
+const API_SERVIDOR = "https://api-leads.escueladerefrigeracion.lat";
+
+function _baseUrlPorDefecto() {
+  if (typeof window === "undefined") return API_LOCAL;
+  const h = window.location.hostname;
+  return h === "localhost" || h === "127.0.0.1" || h === "::1"
+    ? API_LOCAL
+    : API_SERVIDOR;
+}
+
+const BASE_URL = (
+  import.meta.env.VITE_API_URL || _baseUrlPorDefecto()
+).replace(/\/+$/, "");
+
+// ── Cache en memoria (frontend) con TTL 15 min y "stale-while-revalidate" ──
+// Guarda la respuesta de cada GET (por path+params). Al volver a pedir:
+//   - si hay dato vigente (< 15 min) -> lo devuelve al instante, SIN fetch.
+//   - si venció -> devuelve el viejo al instante Y refresca en 2º plano.
+// Así, al cambiar de apartado y volver, NO se recarga; y a los 15 min se
+// actualiza solo sin mostrar loader. Los POST invalidan el cache.
+const TTL = 15 * 60 * 1000;                 // 15 minutos
+const _cache = new Map();                   // key -> { ts, data }
+const _enVuelo = new Map();                 // key -> Promise (evita fetch duplicado)
+
+function _key(path, params) {
+  return path + "?" + new URLSearchParams(params).toString();
+}
+
+async function _fetch(path, params) {
+  const qs = new URLSearchParams(params).toString();
+  const r = await fetch(`${BASE_URL}${path}${qs ? "?" + qs : ""}`);
+  if (!r.ok) throw new Error(`Error ${r.status} en ${path}`);
+  return r.json();
+}
+
+// GET con cache. Devuelve SIEMPRE una promesa que resuelve rápido si hay cache.
+function get(path, params = {}) {
+  const key = _key(path, params);
+  const hit = _cache.get(key);
+  const now = Date.now();
+
+  if (hit) {
+    // Hay algo cacheado -> devolverlo YA.
+    if (now - hit.ts >= TTL && !_enVuelo.has(key)) {
+      // Venció: refrescar en 2º plano (no bloquea, no muestra loader).
+      const p = _fetch(path, params)
+        .then((data) => { _cache.set(key, { ts: Date.now(), data }); return data; })
+        .finally(() => _enVuelo.delete(key));
+      _enVuelo.set(key, p);
+    }
+    return Promise.resolve(hit.data);
+  }
+
+  // No hay cache: si ya hay una petición en vuelo para esta key, reusarla.
+  if (_enVuelo.has(key)) return _enVuelo.get(key);
+
+  const p = _fetch(path, params)
+    .then((data) => { _cache.set(key, { ts: Date.now(), data }); return data; })
+    .finally(() => _enVuelo.delete(key));
+  _enVuelo.set(key, p);
+  return p;
+}
+
+// Invalida entradas del cache cuyo path empiece con alguno de los prefijos dados.
+function invalidar(...prefijos) {
+  for (const k of _cache.keys()) {
+    if (prefijos.some((p) => k.startsWith(p))) _cache.delete(k);
+  }
+}
+
+// POST helper: hace el POST y luego invalida los caches afectados.
+async function post(path, body, invalidarPrefijos = []) {
+  const r = await fetch(`${BASE_URL}${path}`, {
+    method: "POST", headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!r.ok) throw new Error(`Error al guardar en ${path}`);
+  const data = await r.json();
+  if (invalidarPrefijos.length) invalidar(...invalidarPrefijos);
+  return data;
+}
+
+export const api = {
+  leadsFiltros: () => get("/api/leads/filtros"),
+  leads: (ano = "TODOS", mes = "TODOS", dia = "TODOS", programa = "TODOS", sede = "TODOS") =>
+    get("/api/leads", { ano, mes, dia, programa, sede }),
+  otrosGeneral: (ano = "TODOS", mes = "TODOS", dia = "TODOS") =>
+    get("/api/otros-general", { ano, mes, dia }),
+  vendedores: (ano = "TODOS", mes = "TODOS", dia = "TODOS") =>
+    get("/api/vendedores", { ano, mes, dia }),
+  roas: (ano = "TODOS", mes = "TODOS", dia = "TODOS") =>
+    get("/api/roas", { ano, mes, dia }),
+  conjuntosSinSede: () => get("/api/conjuntos-sin-sede"),
+  guardarConjuntoSede: (cambios) =>
+    post("/api/conjuntos-sin-sede/guardar", { cambios }, ["/api/conjuntos-sin-sede", "/api/roas"]),
+  borrarConjuntoSede: (conjunto) =>
+    post("/api/conjuntos-sin-sede/borrar", { conjunto }, ["/api/conjuntos-sin-sede", "/api/roas"]),
+  ultimaActualizacion: () => get("/api/ultima-actualizacion"),
+  // Actualiza TODO manualmente (como si pasaran los 15 min), pero EN SEGUNDO
+  // PLANO: NO se toca el cache del cliente mientras el backend trabaja, así el
+  // usuario sigue viendo los datos viejos sin pantallas de carga durante los
+  // ~29s. Recien cuando el backend responde OK se limpia el cache del cliente,
+  // para que a partir de ahi todo muestre los datos nuevos de inmediato.
+  refrescarTodo: async () => {
+    const r = await fetch(`${BASE_URL}/api/cache/refresh`, { method: "POST" });
+    if (!r.ok) throw new Error("Error al actualizar");
+    await r.json();               // espera a que el backend TERMINE de rehacer todo
+    _cache.clear();               // solo AHORA se invalida el cache del cliente
+    // Trae la hora de actualizacion FRESCA (sin cache) y la deja cacheada, para
+    // que el sidebar muestre la hora del refresco manual recien hecho.
+    const hr = await _fetch("/api/ultima-actualizacion", {});
+    _cache.set(_key("/api/ultima-actualizacion", {}), { ts: Date.now(), data: hr });
+    return hr;                     // { hora: "..." }
+  },
+  conjuntosSinPauta: () => get("/api/conjuntos-sin-pauta"),
+  usoPauta: (pauta, excluir) => get("/api/pauta/uso", { pauta, excluir: excluir || "" }),
+  leyendaAnuncios: () => get("/api/leyenda-anuncios"),
+  programasDisponibles: () => get("/api/programas-disponibles"),
+  programasOcultos: () => get("/api/programas-ocultos"),
+  encenderProgramas: (num_indices) =>
+    post("/api/programas-ocultos/encender", { num_indices },
+         ["/api/programas-ocultos", "/api/programas-disponibles", "/api/leads"]),
+  guardarLeyenda: (cambios) =>
+    post("/api/leyenda-anuncios/guardar", { cambios }, ["/api/leyenda-anuncios", "/api/roas"]),
+  guardarPauta: (num_indice, pauta, conjunto, contar) =>
+    post("/api/curso/guardar-pauta", { num_indice, pauta, conjunto, contar },
+         ["/api/leads", "/api/conjuntos-sin-pauta", "/api/roas"]),
+  alertas: () => get("/api/leads/alertas"),
+  // Leyenda (campanias de Supabase). Al agregar/borrar, invalida TODOS los
+  // apartados que dependen de las leyendas para que el cambio se vea al instante.
+  campanias: () => get("/api/campanias"),
+  agregarCampania: (datos) =>
+    post("/api/campanias/agregar", datos,
+         ["/api/campanias", "/api/leads", "/api/vendedores", "/api/roas", "/api/otros-general"]),
+  editarCampania: (id, datos) =>
+    post("/api/campanias/editar", { id, ...datos },
+         ["/api/campanias", "/api/leads", "/api/vendedores", "/api/roas", "/api/otros-general"]),
+  borrarCampania: (id) =>
+    post("/api/campanias/borrar", { id },
+         ["/api/campanias", "/api/leads", "/api/vendedores", "/api/roas", "/api/otros-general"]),
+};

frontend/src/lib/useColumnasAjustables.jsx

@@ -0,0 +1,56 @@
+// src/lib/useColumnasAjustables.jsx
+// Hook para columnas redimensionables (arrastrar el borde, estilo Excel).
+import { useState, useEffect } from "react";
+
+export function useColumnasAjustables(anchosIniciales) {
+  const [anchos, setAnchos] = useState(anchosIniciales);
+
+  useEffect(() => {
+    if (anchos.length !== anchosIniciales.length) {
+      setAnchos(anchosIniciales);
+    }
+  }, [anchosIniciales.length]);
+
+  function iniciarResize(e, i) {
+    e.preventDefault();
+    e.stopPropagation();
+    const xInicial = e.clientX;
+    const anchoInicial = anchos[i];
+    function onMove(ev) {
+      const nuevo = Math.max(50, anchoInicial + (ev.clientX - xInicial));
+      setAnchos((prev) => { const c = [...prev]; c[i] = nuevo; return c; });
+    }
+    function onUp() {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    }
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }
+
+  function ColGroup() {
+    return (
+      <colgroup>
+        {anchos.map((w, i) => <col key={i} style={{ width: w, minWidth: w }} />)}
+      </colgroup>
+    );
+  }
+
+  function Resizer({ index }) {
+    return (
+      <span
+        onMouseDown={(e) => iniciarResize(e, index)}
+        className="col-resizer"
+        style={{ position: "absolute", top: 0, right: 0, width: 8, height: "100%",
+          cursor: "col-resize", userSelect: "none", zIndex: 5 }}
+      />
+    );
+  }
+
+  const anchoTotal = anchos.reduce((a, b) => a + b, 0);
+  const tableProps = {
+    style: { tableLayout: "fixed", width: "100%", minWidth: anchoTotal },
+  };
+
+  return { anchos, ColGroup, Resizer, anchoTotal, tableProps };
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/src/pages/Leads.jsx

@@ -0,0 +1,764 @@
+import { useState, useEffect, useMemo, Fragment } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox, Filters, Select } from "../components/UI";
+import { useColumnasAjustables } from "../lib/useColumnasAjustables";
+import {
+  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LabelList,
+  AreaChart, Area, Legend, ComposedChart,
+} from "recharts";
+
+const MESES = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];
+
+export default function Leads() {
+  const hoy = new Date();
+  const [ano, setAno] = useState(String(hoy.getFullYear()));
+  const [mes, setMes] = useState(String(hoy.getMonth() + 1));
+  const [dia, setDia] = useState("TODOS");
+  const [tipoProg, setTipoProg] = useState("TODOS");
+  const [sede, setSede] = useState("TODOS");
+
+  const [filtros, setFiltros] = useState({ anos: [2026], tipos: [] });
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [expandido, setExpandido] = useState({});       // estado -> abierto
+  const [expAsesor, setExpAsesor] = useState({});       // "estado|asesor" -> abierto
+  const [expSede, setExpSede] = useState({});           // sede -> abierto (tabla pauta)
+  const [expTipo, setExpTipo] = useState({});           // "sede|tipo" -> abierto (códigos)
+  const [expMat, setExpMat] = useState({});             // num_indice -> abierto (subfilas canal)
+  const [modalCurso, setModalCurso] = useState(null);   // curso seleccionado para el pop-up "Ver"
+  const [editando, setEditando] = useState(false);      // modo edición del pop-up
+  const [editPauta, setEditPauta] = useState("");       // valor pauta en edición
+  const [editConj, setEditConj] = useState("");         // conjunto elegido
+  const [editContar, setEditContar] = useState("SI");   // switch contar SI/NO
+  const [avisoContar, setAvisoContar] = useState(false);// mostró la alerta al cambiar a NO
+  const [conjOpc, setConjOpc] = useState([]);           // conjuntos sin pauta (desplegable)
+  const [guardando, setGuardando] = useState(false);
+  const [msgGuardar, setMsgGuardar] = useState("");
+  const [reload, setReload] = useState(0);
+  const [avisoUso, setAvisoUso] = useState(null);       // {cursos, conjuntos} si la pauta ya se usa
+  // Vista de columnas de la matriz: TOTAL y/o ASIGNADO. Si ninguno → ambos (todo).
+  const [verTotal, setVerTotal] = useState(true);
+  const [verAsig, setVerAsig] = useState(true);
+
+  // Definición de columnas de la matriz. modo: "fija" | "total" | "asig".
+  // key = campo en la fila; label = encabezado; w = ancho; render opcional.
+  const _fmtMoney = (v) => v ? `$${Number(v).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—";
+  const COLS_MAT = [
+    { key: "personalizado", label: "Programa", w: 340, modo: "fija", prog: true },
+    { key: "fecha_inicio", label: "Fecha Inicio", w: 110, modo: "fija" },
+    { key: "importe_pauta", label: "Importe Pauta", w: 120, modo: "fija", bold: true, render: (c) => _fmtMoney(c.importe_pauta) },
+    { key: "importe_pauta_mes", label: "Importe Pauta en el Mes", w: 150, modo: "fija", bold: true, render: (c) => _fmtMoney(c.importe_pauta_mes) },
+    { key: "cartera_total", label: "Cartera Total", w: 110, modo: "total" },
+    { key: "cartera_total_asig", label: "Cartera Total Asig.", w: 130, modo: "asig", bold: true },
+    { key: "leads_nuevos", label: "L. Recibidos", w: 120, modo: "total" },
+    { key: "leads_nuevos_asesor", label: "L. Procesados", w: 130, modo: "asig" },
+    { key: "leads_nuevos_mes", label: "L. Recibidos del Mes", w: 150, modo: "total" },
+    { key: "leads_nuevos_mes_asesor", label: "L. Procesados del Mes", w: 160, modo: "asig" },
+    { key: "matriculas_no_iden", label: "Matriculas no iden.", w: 140, modo: "fija", bold: true },
+    { key: "mat_leads_nuevos", label: "Matriculas Leads Nuevos", w: 160, modo: "fija", bold: true },
+    { key: "mat_leads_antiguos", label: "Matriculas Leads Antiguos", w: 170, modo: "fija", bold: true },
+    { key: "__ver", label: "", w: 70, modo: "fija", ver: true },
+  ];
+  // Si desmarcan ambos → mostrar todo (como si ambos activos)
+  const _t = verTotal || (!verTotal && !verAsig);
+  const _a = verAsig || (!verTotal && !verAsig);
+  const colsVisibles = COLS_MAT.filter(
+    (c) => c.modo === "fija" || (c.modo === "total" && _t) || (c.modo === "asig" && _a)
+  );
+  // Columnas redimensionables de la matriz (según columnas visibles)
+  const colsMat = useColumnasAjustables(colsVisibles.map((c) => c.w));
+
+  // Cargar opciones de filtros una vez
+  useEffect(() => {
+    api.leadsFiltros().then(setFiltros).catch(() => {});
+  }, []);
+
+  // Auto-refresco: cada 15 min vuelve a pedir datos frescos (sin que el usuario haga F5)
+  // y al recibir "datos-actualizar" (tras guardar en Config) recarga al instante.
+  useEffect(() => {
+    const id = setInterval(() => setReload((n) => n + 1), 15 * 60 * 1000);
+    const onActualizar = () => setReload((n) => n + 1);
+    window.addEventListener("datos-actualizar", onActualizar);
+    return () => { clearInterval(id); window.removeEventListener("datos-actualizar", onActualizar); };
+  }, []);
+
+  // Cargar dashboard cuando cambian los filtros (igual que el PBI)
+  useEffect(() => {
+    let activo = true;
+    // Mostrar spinner solo si aún no hay datos (primera carga). En recargas/auto-
+    // refresco, actualiza en silencio para no tapar la tabla.
+    if (!data) setLoading(true);
+    setError(null);
+    api.leads(ano, mes, dia, tipoProg, sede)
+      .then((res) => { if (activo) { setData(res); setLoading(false); } })
+      .catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
+    return () => { activo = false; };
+  }, [ano, mes, dia, tipoProg, sede, reload]);
+
+  const k = data?.kpis;
+  const fmtPct = (v) => `${Number(v ?? 0).toFixed(2)} %`;
+
+  // Cierra el pop-up y resetea el modo edición (para que reabra limpio)
+  function cerrarModal() {
+    setModalCurso(null); setEditando(false); setAvisoUso(null);
+    setAvisoContar(false); setMsgGuardar("");
+  }
+
+  // Guarda la pauta/conjunto (llamado tras confirmar o si la pauta no está en uso)
+  async function hacerGuardado() {
+    setGuardando(true); setMsgGuardar(""); setAvisoUso(null);
+    try {
+      await api.guardarPauta(modalCurso.num_indice, editPauta.trim(), editConj || null, editContar);
+      setMsgGuardar("✓ Guardado. Refrescando datos...");
+      setTimeout(() => { setModalCurso(null); setEditando(false); setReload((n) => n + 1); }, 800);
+    } catch (e) {
+      setMsgGuardar("Error al guardar: " + e.message);
+    } finally { setGuardando(false); }
+  }
+
+  // opciones de filtros
+  const optAnos = useMemo(() => (filtros.anos || []).map(String), [filtros]);
+  const optMes  = useMemo(() => [{ value: "TODOS", label: "TODOS" },
+                                 ...MESES.map((m,i)=>({ value: String(i+1), label: m }))], []);
+  const optDia  = useMemo(() => ["TODOS", ...Array.from({length:31}, (_,i)=>String(i+1))], []);
+  const optTipo = useMemo(() => ["TODOS", "TEAC", "TERC", "SEMINARIOS", "OTROS"], []);
+  const optSede = useMemo(() => ["TODOS", "LIMA", "AREQUIPA", "TRUJILLO", "PIURA"], []);
+
+  return (
+    <div>
+      <h1 className="page-title">🎯 Leads</h1>
+
+      <Filters>
+        <Select label="Programa" value={tipoProg} options={optTipo} onChange={setTipoProg} />
+        <Select label="Sede" value={sede} options={optSede} onChange={setSede} />
+        <Select label="Año" value={ano} options={optAnos} onChange={setAno} />
+        <Select label="Mes" value={mes} options={optMes} onChange={setMes} />
+        <Select label="Día" value={dia} options={optDia} onChange={setDia} />
+      </Filters>
+
+      {loading ? <Loader text="Cargando leads..." /> :
+       error ? <ErrorBox msg={error} /> :
+       !k ? <ErrorBox msg="Sin datos" /> :
+       <>
+         {/* ── FILA DE KPIs (4 tarjetas compuestas, como el PBI) ── */}
+         <div className="kpis">
+           {/* Tarjeta 1: Leads Recibidos / Procesados / % */}
+           <div className="kpi-multi">
+             <KpiRow ico="🧲" label="Leads Recibidos" value={k.leads_recibidos} />
+             <KpiRow ico="🛠️" label="Leads Procesados" value={k.leads_procesados} />
+             <KpiRow ico="↻"  label="% Porcentaje Procesados" value={fmtPct(k.pct_procesados)} />
+           </div>
+
+           {/* Tarjeta 2: Procesados / Contactados / % */}
+           <div className="kpi-multi">
+             <KpiRow ico="🔧" label="Leads Procesados" value={k.leads_procesados} />
+             <KpiRow ico="📞" label="Total Contactados" value={k.leads_contactados} />
+             <KpiRow ico="↻"  label="% Contactabilidad" value={fmtPct(k.pct_contactados)} />
+           </div>
+
+           {/* Tarjeta 3: Matriculados / Matrículas mes / Ocupabilidad */}
+           <div className="kpi-multi">
+             <KpiRow ico="🎓" label="Total matriculados" value={k.total_matriculados} />
+             <KpiRow ico="📅" label="Matrículas en los Cursos del Mes" value={k.matriculas_mes} />
+             <KpiRow ico="💱" label="Ocupabilidad en los Cursos del Mes" value={fmtPct(k.ocupabilidad)} />
+           </div>
+
+           {/* Tarjeta 4: Cursos programados / reprog / susp / iniciados */}
+           <div className="kpi-multi">
+             <KpiRow ico="📚" label="Cursos Programados" value={k.cursos_programados} />
+             <KpiRow ico="🔁" label="Cursos Reprogramados" value={k.cursos_reprogramados} />
+             <KpiRow ico="⛔" label="Cursos Suspendidos" value={k.cursos_suspendidos} />
+             <KpiRow ico="🚀" label="Cursos Iniciados" value={k.cursos_iniciados} />
+           </div>
+         </div>
+
+         {/* ── FILA INFERIOR: gráfico + tabla ── */}
+         <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginTop: 16 }}>
+           <div className="card">
+             <div className="card-title">Matrículas por Día</div>
+             <ResponsiveContainer width="100%" height={320}>
+               <ComposedChart data={data.matriculas_por_dia} margin={{ top: 24, right: 24, left: -6, bottom: 8 }}>
+                 <defs>
+                   <linearGradient id="gradMat" x1="0" y1="0" x2="0" y2="1">
+                     <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.25} />
+                     <stop offset="100%" stopColor="#3b82f6" stopOpacity={0} />
+                   </linearGradient>
+                 </defs>
+                 <CartesianGrid strokeDasharray="3 3" stroke="#eef2f7" vertical={false} />
+                 <XAxis dataKey="dia" tick={{ fontSize: 10, fill: "#94a3b8" }} interval={0}
+                        axisLine={{ stroke: "#e2e8f0" }} tickLine={false} />
+                 <YAxis tick={{ fontSize: 11, fill: "#94a3b8" }} allowDecimals={false}
+                        axisLine={false} tickLine={false} width={32} />
+                 <Tooltip content={<TooltipMatriculas />} cursor={{ stroke: "#cbd5e1", strokeDasharray: "4 4" }} />
+                 <Area type="monotone" dataKey="cantidad" stroke="none" fill="url(#gradMat)" />
+                 <Line type="monotone" dataKey="cantidad" stroke="#2563eb" strokeWidth={2.5}
+                       dot={{ r: 3, fill: "#fff", stroke: "#2563eb", strokeWidth: 2 }}
+                       activeDot={{ r: 5, fill: "#2563eb", stroke: "#fff", strokeWidth: 2 }}>
+                   <LabelList dataKey="cantidad" position="top" fontSize={10} fill="#64748b"
+                     formatter={(v) => (v > 0 ? v : "")} />
+                 </Line>
+               </ComposedChart>
+             </ResponsiveContainer>
+           </div>
+
+           <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+             <div className="table-wrap" style={{ border: "none", maxHeight: 360, overflowY: "auto" }}>
+               <table>
+                 <thead>
+                   <tr>
+                     <th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2 }}>Estado/Objeción</th>
+                     <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Leads Procesados</th>
+                   </tr>
+                 </thead>
+                 <tbody>
+                   {(data.estado_objecion?.filas || []).map((f) => {
+                     const abierto = !!expandido[f.estado];
+                     const tieneAsesores = (f.asesores || []).length > 0;
+                     return (
+                       <Fragment key={f.estado}>
+                         <tr>
+                           <td className="col-name">
+                             {tieneAsesores && (
+                               <button
+                                 onClick={() => setExpandido((p) => ({ ...p, [f.estado]: !p[f.estado] }))}
+                                 style={{ border: "none", background: "transparent", cursor: "pointer",
+                                          fontWeight: 700, marginRight: 6, color: "#2563eb", fontSize: 14 }}>
+                                 {abierto ? "−" : "+"}
+                               </button>
+                             )}
+                             {f.estado}
+                           </td>
+                           <td>{f.cantidad}</td>
+                         </tr>
+                         {abierto && (f.asesores || []).map((a) => {
+                           const keyA = f.estado + "|" + a.asesor;
+                           const abiertoA = !!expAsesor[keyA];
+                           const tieneTel = (a.telefonos || []).length > 0;
+                           return (
+                             <Fragment key={keyA}>
+                               <tr style={{ background: "#f8fafc" }}>
+                                 <td className="col-name" style={{ paddingLeft: 30, color: "#475569", fontSize: 12 }}>
+                                   {tieneTel && (
+                                     <button
+                                       onClick={() => setExpAsesor((p) => ({ ...p, [keyA]: !p[keyA] }))}
+                                       style={{ border: "none", background: "transparent", cursor: "pointer",
+                                                fontWeight: 700, marginRight: 6, color: "#7c3aed", fontSize: 13 }}>
+                                       {abiertoA ? "−" : "+"}
+                                     </button>
+                                   )}
+                                   {a.asesor}
+                                 </td>
+                                 <td style={{ color: "#475569", fontSize: 12 }}>{a.cantidad}</td>
+                               </tr>
+                               {abiertoA && (a.telefonos || []).map((t, i) => (
+                                 <tr key={keyA + "-" + t + "-" + i} style={{ background: "#fcfdff" }}>
+                                   <td className="col-name" style={{ paddingLeft: 60, color: "#94a3b8", fontSize: 11 }}>📞 {t}</td>
+                                   <td></td>
+                                 </tr>
+                               ))}
+                             </Fragment>
+                           );
+                         })}
+                       </Fragment>
+                     );
+                   })}
+                   <tr className="total-row">
+                     <td className="col-name">Total</td>
+                     <td>{data.estado_objecion.total}</td>
+                   </tr>
+                 </tbody>
+               </table>
+             </div>
+           </div>
+         </div>
+
+         {/* ── FILA 2: Leads por Programa (área) + Tabla por Sede ── */}
+         <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginTop: 16 }}>
+           <div className="card">
+             <div className="card-title">Leads por Programa</div>
+             <ResponsiveContainer width="100%" height={320}>
+               <AreaChart data={data.leads_por_dia} margin={{ top: 10, right: 24, left: -6, bottom: 8 }}>
+                 <defs>
+                   <linearGradient id="gradTot" x1="0" y1="0" x2="0" y2="1">
+                     <stop offset="0%" stopColor="#60a5fa" stopOpacity={0.55} />
+                     <stop offset="100%" stopColor="#60a5fa" stopOpacity={0.05} />
+                   </linearGradient>
+                   <linearGradient id="gradProc" x1="0" y1="0" x2="0" y2="1">
+                     <stop offset="0%" stopColor="#1e40af" stopOpacity={0.6} />
+                     <stop offset="100%" stopColor="#1e40af" stopOpacity={0.1} />
+                   </linearGradient>
+                 </defs>
+                 <CartesianGrid strokeDasharray="3 3" stroke="#eef2f7" vertical={false} />
+                 <XAxis dataKey="dia" tick={{ fontSize: 10, fill: "#94a3b8" }} interval={0}
+                        axisLine={{ stroke: "#e2e8f0" }} tickLine={false} />
+                 <YAxis tick={{ fontSize: 11, fill: "#94a3b8" }} allowDecimals={false}
+                        axisLine={false} tickLine={false} width={32} />
+                 <Tooltip contentStyle={{ borderRadius: 10, border: "1px solid #e2e8f0",
+                          boxShadow: "0 6px 20px rgba(0,0,0,0.1)", fontSize: 12 }} />
+                 <Legend iconType="circle" wrapperStyle={{ fontSize: 12, paddingTop: 4 }} />
+                 <Area type="linear" dataKey="totales" name="Leads Totales" stroke="#60a5fa"
+                       fill="url(#gradTot)" strokeWidth={2.5}
+                       dot={{ r: 2.5, fill: "#60a5fa", stroke: "#fff", strokeWidth: 1 }}
+                       activeDot={{ r: 5 }} />
+                 <Area type="linear" dataKey="procesados" name="Leads Procesados" stroke="#1e40af"
+                       fill="url(#gradProc)" strokeWidth={2.5}
+                       dot={{ r: 2.5, fill: "#1e40af", stroke: "#fff", strokeWidth: 1 }}
+                       activeDot={{ r: 5 }} />
+               </AreaChart>
+             </ResponsiveContainer>
+           </div>
+
+           <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+             <div className="table-wrap" style={{ border: "none", maxHeight: 360, overflowY: "auto" }}>
+               <table>
+                 <thead>
+                   <tr>
+                     <th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 150 }}>Sede</th>
+                     <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Importe Gastado</th>
+                     <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Resultados</th>
+                     <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Recibidos</th>
+                     <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Procesados</th>
+                     <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Matr.</th>
+                     <th style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 130, whiteSpace: "nowrap" }}>Valor Venta</th>
+                   </tr>
+                 </thead>
+                 <tbody>
+                   {(data.tabla_pauta?.filas || []).map((f) => {
+                     const abierto = !!expSede[f.sede];
+                     return (
+                       <Fragment key={f.sede}>
+                         <tr>
+                           <td className="col-name">
+                             <button onClick={() => setExpSede((p) => ({ ...p, [f.sede]: !p[f.sede] }))}
+                               style={{ border: "none", background: "transparent", cursor: "pointer",
+                                        fontWeight: 700, marginRight: 6, color: "#2563eb", fontSize: 14 }}>
+                               {abierto ? "−" : "+"}
+                             </button>
+                             {f.sede}
+                           </td>
+                           <td style={{ fontWeight: 600 }}>{f.importe ? `$${Number(f.importe).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—"}</td>
+                           <td>{f.resultados}</td>
+                           <td>{f.recibidos}</td>
+                           <td>{f.procesados}</td>
+                           <td>{f.matriculas}</td>
+                           <td>S/ {Number(f.inversion || 0).toLocaleString("es-PE")}</td>
+                         </tr>
+                         {abierto && (f.subfilas || []).map((s) => {
+                           const keyT = f.sede + "|" + s.tipo;
+                           const abiertoT = !!expTipo[keyT];
+                           const tieneCod = (s.codigos || []).length > 0;
+                           return (
+                             <Fragment key={keyT}>
+                               <tr style={{ background: "#f8fafc" }}>
+                                 <td className="col-name" style={{ paddingLeft: 30, color: "#475569", fontSize: 12 }}>
+                                   {tieneCod && (
+                                     <button onClick={() => setExpTipo((p) => ({ ...p, [keyT]: !p[keyT] }))}
+                                       style={{ border: "none", background: "transparent", cursor: "pointer",
+                                                fontWeight: 700, marginRight: 6, color: "#7c3aed", fontSize: 13 }}>
+                                       {abiertoT ? "−" : "+"}
+                                     </button>
+                                   )}
+                                   {s.tipo}
+                                 </td>
+                                 <td style={{ color: "#475569", fontSize: 12, fontWeight: 600 }}>{s.importe ? `$${Number(s.importe).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—"}</td>
+                                 <td style={{ color: "#475569", fontSize: 12 }}>{s.resultados}</td>
+                                 <td style={{ color: "#475569", fontSize: 12 }}>{s.recibidos}</td>
+                                 <td style={{ color: "#475569", fontSize: 12 }}>{s.procesados}</td>
+                                 <td style={{ color: "#475569", fontSize: 12 }}>{s.matriculas}</td>
+                                 <td style={{ color: "#475569", fontSize: 12 }}>S/ {Number(s.inversion || 0).toLocaleString("es-PE")}</td>
+                               </tr>
+                               {abiertoT && (s.codigos || []).map((cd) => (
+                                 <tr key={keyT + "-" + cd.codigo} style={{ background: "#fcfdff" }}>
+                                   <td className="col-name" style={{ paddingLeft: 56, color: "#94a3b8", fontSize: 11 }}>cód. {cd.codigo}</td>
+                                   <td style={{ color: "#94a3b8", fontSize: 11 }}>{cd.importe ? `$${Number(cd.importe).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—"}</td>
+                                   <td style={{ color: "#94a3b8", fontSize: 11 }}>{cd.resultados ? cd.resultados : "—"}</td>
+                                   <td style={{ color: "#94a3b8", fontSize: 11 }}>{cd.recibidos}</td>
+                                   <td style={{ color: "#94a3b8", fontSize: 11 }}>{cd.procesados}</td>
+                                   <td style={{ color: "#94a3b8", fontSize: 11 }}>{cd.matriculas}</td>
+                                   <td style={{ color: "#94a3b8", fontSize: 11 }}>S/ {Number(cd.inversion || 0).toLocaleString("es-PE")}</td>
+                                 </tr>
+                               ))}
+                             </Fragment>
+                           );
+                         })}
+                       </Fragment>
+                     );
+                   })}
+                   <tr className="total-row">
+                     <td className="col-name">Total</td>
+                     <td>{`$${Number(data.tabla_pauta.total.importe || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}</td>
+                     <td>{data.tabla_pauta.total.resultados}</td>
+                     <td>{data.tabla_pauta.total.recibidos}</td>
+                     <td>{data.tabla_pauta.total.procesados}</td>
+                     <td>{data.tabla_pauta.total.matriculas}</td>
+                     <td>S/ {Number(data.tabla_pauta.total.inversion).toLocaleString("es-PE")}</td>
+                   </tr>
+                 </tbody>
+               </table>
+             </div>
+           </div>
+         </div>
+
+         {/* ── FILA 3: Matriz por Curso (num_indice) ── */}
+         <div className="card" style={{ marginTop: 16, padding: 0, overflow: "hidden" }}>
+           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
+                         padding: "14px 16px 6px", gap: 12, flexWrap: "wrap" }}>
+             <div className="card-title" style={{ padding: 0 }}>Detalle por Curso</div>
+             <div style={{ display: "flex", alignItems: "center", gap: 8,
+                           background: "#f8fafc", border: "1px solid #e2e8f0",
+                           borderRadius: 10, padding: "5px 8px" }}>
+               <span style={{ fontSize: 10, fontWeight: 700, color: "#94a3b8",
+                              textTransform: "uppercase", letterSpacing: ".5px", marginRight: 2 }}>
+                 Ver
+               </span>
+               {[["TOTAL", verTotal, setVerTotal], ["ASIGNADO", verAsig, setVerAsig]].map(([txt, val, set]) => (
+                 <label key={txt} onClick={() => set((v) => !v)}
+                   style={{
+                     display: "flex", alignItems: "center", gap: 7, cursor: "pointer",
+                     padding: "5px 12px", borderRadius: 8, userSelect: "none",
+                     fontSize: 12, fontWeight: 700, letterSpacing: ".3px",
+                     border: val ? "1px solid #1e3a5f" : "1px solid #e2e8f0",
+                     background: val ? "#eef2f9" : "#fff",
+                     color: val ? "#1e3a5f" : "#64748b",
+                     transition: "all .12s ease",
+                   }}>
+                   <span style={{
+                     width: 16, height: 16, borderRadius: 5, flexShrink: 0,
+                     display: "flex", alignItems: "center", justifyContent: "center",
+                     border: val ? "none" : "1.5px solid #cbd5e1",
+                     background: val ? "#1e3a5f" : "#fff",
+                   }}>
+                     {val && (
+                       <svg width="10" height="10" viewBox="0 0 24 24" fill="none"
+                            stroke="#fff" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round">
+                         <polyline points="20 6 9 17 4 12" />
+                       </svg>
+                     )}
+                   </span>
+                   {txt}
+                 </label>
+               ))}
+             </div>
+           </div>
+           <div className="table-wrap" style={{ border: "none", maxHeight: 420, overflow: "auto" }}>
+             <table className="matriz-grid" {...colsMat.tableProps}>
+               <colsMat.ColGroup />
+               <thead>
+                 <tr>
+                   {colsVisibles.map((col, i) => (
+                     <th key={col.key} style={{ position: "sticky", top: 0, zIndex: 2,
+                          textAlign: i === 0 ? "left" : "center" }}>{col.label}<colsMat.Resizer index={i} /></th>
+                   ))}
+                 </tr>
+               </thead>
+               <tbody>
+                 {(data.matriz_cursos?.filas || []).map((c) => {
+                   const abierto = !!expMat[c.num_indice];
+                   return (
+                   <Fragment key={c.num_indice}>
+                   <tr>
+                     {colsVisibles.map((col) => col.prog ? (
+                       <td key={col.key} className="col-name" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                         {(c.subfilas_canal && c.subfilas_canal.length > 0) && (
+                           <span
+                             onClick={() => setExpMat((p) => ({ ...p, [c.num_indice]: !p[c.num_indice] }))}
+                             style={{ cursor: "pointer", fontWeight: 700, color: "#2563eb",
+                                      marginRight: 6, userSelect: "none", display: "inline-block", width: 14 }}
+                             title="Ver por canal (Pauta / Web / Otros)">
+                             {abierto ? "−" : "+"}
+                           </span>
+                         )}
+                         {c.personalizado}
+                       </td>
+                     ) : col.ver ? (
+                       <td key={col.key} style={{ textAlign: "center" }}>
+                         <button onClick={() => setModalCurso(c)}
+                           style={{ border: "1px solid #1e3a5f", background: "#eef2f9", color: "#1e3a5f",
+                                    borderRadius: 7, padding: "3px 12px", fontSize: 12, fontWeight: 700,
+                                    cursor: "pointer" }}>
+                           Ver
+                         </button>
+                       </td>
+                     ) : (
+                       <td key={col.key} style={col.bold ? { fontWeight: 600 } : undefined}>
+                         {col.render ? col.render(c) : c[col.key]}
+                       </td>
+                     ))}
+                   </tr>
+                   {abierto && (c.subfilas_canal || []).map((sf) => (
+                     <tr key={c.num_indice + sf.canal} style={{ background: "#f8fafc" }}>
+                       {colsVisibles.map((col) => {
+                         if (col.prog) return (
+                           <td key={col.key} className="col-name" style={{ paddingLeft: 30, color: "#475569", fontSize: 12 }}>{sf.canal}</td>
+                         );
+                         if (col.ver) return <td key={col.key}></td>;
+                         // Estas columnas -> "-" en subfilas (Importe y Leads Recibidos/Procesados)
+                         const GUION = ["importe_pauta", "importe_pauta_mes",
+                                        "leads_nuevos", "leads_nuevos_asesor",
+                                        "leads_nuevos_mes", "leads_nuevos_mes_asesor"];
+                         if (GUION.includes(col.key)) return (
+                           <td key={col.key} style={{ color: "#94a3b8", fontSize: 12 }}>—</td>
+                         );
+                         const val = sf[col.key];
+                         return (
+                           <td key={col.key} style={{ color: "#475569", fontSize: 12 }}>{val === undefined ? "—" : val}</td>
+                         );
+                       })}
+                     </tr>
+                   ))}
+                   </Fragment>
+                   );
+                 })}
+               </tbody>
+             </table>
+           </div>
+         </div>
+
+       </>}
+
+      {/* ── Pop-up "Ver": num_indice, pauta y conjuntos de anuncios ── */}
+      {modalCurso && (
+        <div onClick={cerrarModal}
+          style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)",
+                   display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 }}>
+          <div onClick={(e) => e.stopPropagation()}
+            style={{ background: "#fff", borderRadius: 16, width: 560, maxWidth: "94vw",
+                     maxHeight: "86vh", overflow: "auto", boxShadow: "0 24px 70px rgba(0,0,0,0.4)",
+                     fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif" }}>
+            <div style={{ background: "#1e3a5f", color: "#fff", padding: "16px 22px",
+                          borderTopLeftRadius: 14, borderTopRightRadius: 14,
+                          display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+              <div style={{ fontWeight: 700, fontSize: 15 }}>{modalCurso.personalizado}</div>
+              <button onClick={cerrarModal}
+                style={{ background: "transparent", border: "none", color: "#fff", fontSize: 22,
+                         cursor: "pointer", lineHeight: 1 }}>×</button>
+            </div>
+            <div style={{ padding: "18px 22px" }}>
+              <div style={{ display: "flex", gap: 24, marginBottom: 18, alignItems: "flex-start" }}>
+                <div>
+                  <div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase" }}>Num Índice</div>
+                  <div style={{ fontSize: 18, fontWeight: 700, color: "#0f172a" }}>{modalCurso.num_indice || "—"}</div>
+                </div>
+                <div style={{ flex: 1 }}>
+                  <div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase" }}>Pauta</div>
+                  {editando ? (
+                    <input value={editPauta} onChange={(e) => setEditPauta(e.target.value)}
+                      placeholder="Código de pauta"
+                      style={{ marginTop: 4, padding: "7px 10px", border: "1px solid #cbd5e1",
+                               borderRadius: 8, fontSize: 14, width: "100%" }} />
+                  ) : (
+                    <div style={{ fontSize: 18, fontWeight: 700, color: "#1e40af" }}>{modalCurso.pauta || "—"}</div>
+                  )}
+                </div>
+              </div>
+
+              {editando ? (
+                <>
+                  <div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase", marginBottom: 6 }}>
+                    Vincular Conjunto de Anuncio (opcional)
+                  </div>
+                  <select value={editConj} onChange={(e) => setEditConj(e.target.value)}
+                    style={{ padding: "8px 10px", border: "1px solid #cbd5e1", borderRadius: 8,
+                             fontSize: 13, width: "100%", background: "#fff" }}>
+                    <option value="">— Ninguno —</option>
+                    {conjOpc.map((cj) => <option key={cj} value={cj}>{cj}</option>)}
+                  </select>
+
+                  {/* Switch: contar SI/NO */}
+                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
+                                marginTop: 18, padding: "12px 14px", background: "#f8fafc",
+                                border: "1px solid #e2e8f0", borderRadius: 10 }}>
+                    <div>
+                      <div style={{ fontSize: 13, fontWeight: 600, color: "#0f172a" }}>Mostrar en la lista</div>
+                      <div style={{ fontSize: 12, color: "#64748b" }}>
+                        {editContar === "SI" ? "Este programa aparece en el Detalle por Curso" : "Este programa quedará oculto"}
+                      </div>
+                    </div>
+                    <div onClick={() => {
+                        const nuevo = editContar === "SI" ? "NO" : "SI";
+                        setEditContar(nuevo);
+                        if (nuevo === "NO") setAvisoContar(true);
+                      }}
+                      style={{ width: 46, height: 26, borderRadius: 999, cursor: "pointer",
+                               background: editContar === "SI" ? "#2563eb" : "#cbd5e1",
+                               position: "relative", transition: "background .15s", flexShrink: 0 }}>
+                      <div style={{ width: 20, height: 20, borderRadius: "50%", background: "#fff",
+                                    position: "absolute", top: 3, left: editContar === "SI" ? 23 : 3,
+                                    transition: "left .15s", boxShadow: "0 1px 3px rgba(0,0,0,0.3)" }} />
+                    </div>
+                  </div>
+                  {avisoContar && editContar === "NO" && (
+                    <div style={{ marginTop: 10, padding: "10px 12px", background: "#fffbeb",
+                                  border: "1px solid #fde68a", borderRadius: 8, fontSize: 12.5, color: "#92400e" }}>
+                      ⚠️ Al poner <b>NO</b> y guardar, este programa ya no aparecerá en la lista.
+                      Solo podrás volver a añadirlo desde Configuración.
+                    </div>
+                  )}
+
+                  {msgGuardar && <div style={{ marginTop: 10, fontSize: 13, color: msgGuardar.startsWith("✓") ? "#047857" : "#b91c1c" }}>{msgGuardar}</div>}
+                  <div style={{ display: "flex", gap: 8, marginTop: 16, justifyContent: "flex-end" }}>
+                    <button onClick={() => { setEditando(false); setMsgGuardar(""); setAvisoContar(false); }}
+                      style={{ padding: "8px 16px", border: "1px solid #cbd5e1", background: "#fff",
+                               borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer" }}>
+                      Cancelar
+                    </button>
+                    {(() => {
+                      const cambioContar = editContar !== (modalCurso.contar || "SI");
+                      const puedeGuardar = editPauta.trim() || cambioContar;
+                      return (
+                    <button disabled={guardando || !puedeGuardar}
+                      onClick={async () => {
+                        setMsgGuardar("");
+                        try {
+                          // Verificar uso solo si se ingresó pauta
+                          if (editPauta.trim()) {
+                            const uso = await api.usoPauta(editPauta.trim(), modalCurso.num_indice);
+                            if (uso.en_uso) { setAvisoUso(uso); return; }
+                          }
+                          await hacerGuardado();
+                        } catch (e) { setMsgGuardar("Error: " + e.message); }
+                      }}
+                      style={{ padding: "8px 18px", border: "none", background: "#1e3a5f", color: "#fff",
+                               borderRadius: 8, fontSize: 13, fontWeight: 700,
+                               cursor: guardando ? "wait" : "pointer", opacity: (!puedeGuardar || guardando) ? 0.6 : 1 }}>
+                      {guardando ? "Guardando..." : "Guardar"}
+                    </button>
+                      );
+                    })()}
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase", marginBottom: 8 }}>
+                    Conjuntos de Anuncios ({(modalCurso.conjuntos || []).length})
+                  </div>
+                  {(modalCurso.conjuntos || []).length === 0 ? (
+                    <div style={{ color: "#94a3b8", fontSize: 13 }}>Sin conjuntos vinculados a esta pauta.</div>
+                  ) : (
+                    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                      {modalCurso.conjuntos.map((cj, i) => (
+                        <div key={i} style={{ background: "#f8fafc", border: "1px solid #e2e8f0",
+                               borderRadius: 8, padding: "8px 12px", fontSize: 13, color: "#334155" }}>
+                          {cj}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 16 }}>
+                    <button onClick={() => {
+                        setEditando(true); setEditPauta(modalCurso.pauta || ""); setEditConj("");
+                        setEditContar(modalCurso.contar || "SI"); setAvisoContar(false); setMsgGuardar("");
+                        api.conjuntosSinPauta().then((r) => setConjOpc(r.conjuntos || [])).catch(() => setConjOpc([]));
+                      }}
+                      style={{ padding: "8px 18px", border: "1px solid #1e3a5f", background: "#eef2f9",
+                               color: "#1e3a5f", borderRadius: 8, fontSize: 13, fontWeight: 700, cursor: "pointer" }}>
+                      Editar
+                    </button>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Advertencia: la pauta ya está en uso ── */}
+      {avisoUso && (
+        <div style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.6)",
+                      display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1100 }}>
+          <div style={{ background: "#fff", borderRadius: 14, width: 440, maxWidth: "92vw",
+                        maxHeight: "82vh", overflow: "auto", boxShadow: "0 20px 60px rgba(0,0,0,0.4)" }}>
+            <div style={{ background: "#b45309", color: "#fff", padding: "14px 20px",
+                          borderTopLeftRadius: 14, borderTopRightRadius: 14, fontWeight: 700, fontSize: 15 }}>
+              ⚠️ Esta pauta ya está en uso
+            </div>
+            <div style={{ padding: "18px 22px" }}>
+              <div style={{ fontSize: 13, color: "#334155", marginBottom: 12 }}>
+                La pauta <b>{editPauta}</b> ya está asignada a:
+              </div>
+              {(avisoUso.cursos || []).length > 0 && (
+                <div style={{ marginBottom: 12 }}>
+                  <div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase", marginBottom: 4 }}>Programas</div>
+                  {avisoUso.cursos.map((cu, i) => (
+                    <div key={i} style={{ background: "#fffbeb", border: "1px solid #fde68a",
+                           borderRadius: 8, padding: "6px 10px", fontSize: 12, color: "#92400e", marginBottom: 4 }}>
+                      {cu.dsc_det_programa || "(sin nombre)"} <span style={{ color: "#b45309" }}>· índice {cu.num_indice}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {(avisoUso.conjuntos || []).length > 0 && (
+                <div style={{ marginBottom: 12 }}>
+                  <div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase", marginBottom: 4 }}>Conjuntos de anuncios</div>
+                  {avisoUso.conjuntos.map((cj, i) => (
+                    <div key={i} style={{ background: "#f8fafc", border: "1px solid #e2e8f0",
+                           borderRadius: 8, padding: "6px 10px", fontSize: 12, color: "#334155", marginBottom: 4 }}>
+                      {cj}
+                    </div>
+                  ))}
+                </div>
+              )}
+              <div style={{ fontSize: 13, color: "#0f172a", fontWeight: 600, marginTop: 10 }}>
+                ¿Estás seguro de continuar?
+              </div>
+              <div style={{ display: "flex", gap: 8, marginTop: 16, justifyContent: "flex-end" }}>
+                <button onClick={() => setAvisoUso(null)}
+                  style={{ padding: "8px 18px", border: "1px solid #cbd5e1", background: "#fff",
+                           borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer" }}>
+                  No
+                </button>
+                <button onClick={hacerGuardado}
+                  style={{ padding: "8px 20px", border: "none", background: "#b45309", color: "#fff",
+                           borderRadius: 8, fontSize: 13, fontWeight: 700, cursor: "pointer" }}>
+                  Sí, guardar
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Tooltip personalizado: mini-gráfico de barras horizontales por tipo de programa
+function TooltipMatriculas({ active, payload, label }) {
+  if (!active || !payload || !payload.length) return null;
+  const p = payload[0].payload;
+  const detalle = p.detalle || [];
+  const max = Math.max(1, ...detalle.map((d) => d.cantidad));
+  return (
+    <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 10,
+                  padding: "10px 12px", boxShadow: "0 6px 20px rgba(0,0,0,0.12)", minWidth: 220 }}>
+      <div style={{ fontWeight: 700, fontSize: 12, color: "#1e293b", marginBottom: 2 }}>
+        Día {label} — {p.cantidad} matrícula(s)
+      </div>
+      {detalle.length === 0 ? (
+        <div style={{ fontSize: 11, color: "#94a3b8" }}>Sin matrículas</div>
+      ) : detalle.map((d) => (
+        <div key={d.tipo} style={{ display: "flex", alignItems: "center", gap: 6, margin: "4px 0" }}>
+          <span style={{ fontSize: 10, color: "#475569", width: 90, textAlign: "right",
+                         whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.tipo}</span>
+          <div style={{ flex: 1, background: "#eff6ff", borderRadius: 3, height: 14, position: "relative" }}>
+            <div style={{ width: `${(d.cantidad / max) * 100}%`, background: "#60a5fa",
+                          height: "100%", borderRadius: 3 }} />
+          </div>
+          <span style={{ fontSize: 11, fontWeight: 700, color: "#1e40af", width: 18 }}>{d.cantidad}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function KpiRow({ ico, label, value }) {
+  return (
+    <div className="kpi-row">
+      <span className="ico">{ico}</span>
+      <div className="txt">
+        <div className="label">{label}</div>
+        <div className="value">{value}</div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/OtrosGeneral.jsx

@@ -0,0 +1,334 @@
+import { useState, useEffect, useMemo, Fragment } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox, Filters, Select } from "../components/UI";
+
+const MESES = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];
+
+export default function OtrosGeneral() {
+  const hoy = new Date();
+  const [ano, setAno] = useState(String(hoy.getFullYear()));
+  const [mes, setMes] = useState(String(hoy.getMonth() + 1));
+  const [dia, setDia] = useState("TODOS");
+
+  const [filtros, setFiltros] = useState({ anos: [2026] });
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [expAlways, setExpAlways] = useState({});
+  const [expAlwaysProg, setExpAlwaysProg] = useState({});
+  const [expWeb, setExpWeb] = useState({});
+  const [expAsig, setExpAsig] = useState({});
+  const [reload, setReload] = useState(0);
+
+  useEffect(() => {
+    api.leadsFiltros().then(setFiltros).catch(() => {});
+  }, []);
+
+  // Auto-refresco cada 15 min (sin F5) + recarga al guardar en Config
+  useEffect(() => {
+    const id = setInterval(() => setReload((n) => n + 1), 15 * 60 * 1000);
+    const onActualizar = () => setReload((n) => n + 1);
+    window.addEventListener("datos-actualizar", onActualizar);
+    return () => { clearInterval(id); window.removeEventListener("datos-actualizar", onActualizar); };
+  }, []);
+
+  useEffect(() => {
+    let activo = true;
+    if (!data) setLoading(true);   // spinner solo en la primera carga
+    setError(null);
+    api.otrosGeneral(ano, mes, dia)
+      .then((res) => { if (activo) { setData(res); setLoading(false); } })
+      .catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
+    return () => { activo = false; };
+  }, [ano, mes, dia, reload]);
+
+  const optAnos = useMemo(() => (filtros.anos || []).map(String), [filtros]);
+  const optMes  = useMemo(() => [{ value: "TODOS", label: "TODOS" },
+                                 ...MESES.map((m,i)=>({ value: String(i+1), label: m }))], []);
+  const optDia  = useMemo(() => ["TODOS", ...Array.from({length:31}, (_,i)=>String(i+1))], []);
+
+  const money = (v) => `$${Number(v || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  const sol = (v) => `S/ ${Number(v || 0).toLocaleString("en-US", { maximumFractionDigits: 0 })}`;
+
+  return (
+    <div>
+      <h1 className="page-title">📊 Otros General</h1>
+
+      <Filters>
+        <Select label="Año" value={ano} options={optAnos} onChange={setAno} />
+        <Select label="Mes" value={mes} options={optMes} onChange={setMes} />
+        <Select label="Día" value={dia} options={optDia} onChange={setDia} />
+      </Filters>
+
+      {loading ? <Loader text="Cargando..." /> :
+       error ? <ErrorBox msg={error} /> :
+       !data ? <ErrorBox msg="Sin datos" /> :
+       <>
+         {/* ── Inversión Publicitaria por Sede (Always On) ── */}
+         {data.matriz_always && data.matriz_always.filas && (
+         <div className="card" style={{ marginTop: 4, padding: 0, overflow: "hidden" }}>
+           <div className="card-title" style={{ padding: "14px 16px 6px" }}>Inversión Publicitaria por Sede (Always On)</div>
+           <div className="table-wrap" style={{ border: "none", maxHeight: 420, overflow: "auto" }}>
+             <table>
+               <thead>
+                 <tr>
+                   <th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2 }}>Sede</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Importe Gastado</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Resultados</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Leads Recibidos</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Leads Procesados</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Matrículas</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Valor Venta</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {data.matriz_always.filas.map((f) => {
+                   const abierto = !!expAlways[f.sede];
+                   return (
+                   <Fragment key={f.sede}>
+                     <tr>
+                       <td className="col-name">
+                         <span
+                           onClick={() => setExpAlways((p) => ({ ...p, [f.sede]: !p[f.sede] }))}
+                           style={{ cursor: "pointer", fontWeight: 700, color: "#2563eb",
+                                    marginRight: 6, userSelect: "none", display: "inline-block", width: 14 }}
+                           title="Ver por programa">
+                           {abierto ? "−" : "+"}
+                         </span>
+                         {f.sede}
+                       </td>
+                       <td style={{ fontWeight: 600 }}>{money(f.importe)}</td>
+                       <td>{f.resultados}</td>
+                       <td>{f.nuevos}</td>
+                       <td>{f.nuevos_asig}</td>
+                       <td style={{ fontWeight: 600 }}>{f.matriculas}</td>
+                       <td style={{ fontWeight: 600 }}>{sol(f.venta)}</td>
+                     </tr>
+                     {abierto && (f.subfilas || []).map((s) => {
+                       const kProg = f.sede + "|" + s.programa;
+                       const abiertoP = !!expAlwaysProg[kProg];
+                       return (
+                       <Fragment key={kProg}>
+                       <tr style={{ background: "#f8fafc" }}>
+                         <td className="col-name" style={{ paddingLeft: 28, color: "#475569" }}>
+                           <span
+                             onClick={() => setExpAlwaysProg((p) => ({ ...p, [kProg]: !p[kProg] }))}
+                             style={{ cursor: "pointer", fontWeight: 700, color: "#2563eb",
+                                      marginRight: 6, userSelect: "none", display: "inline-block", width: 14 }}
+                             title="Ver por pauta">
+                             {abiertoP ? "−" : "+"}
+                           </span>
+                           {s.programa}
+                         </td>
+                         <td style={{ color: "#475569", fontWeight: 600 }}>{money(s.importe)}</td>
+                         <td style={{ color: "#475569" }}>{s.resultados}</td>
+                         <td style={{ color: "#475569" }}>{s.nuevos}</td>
+                         <td style={{ color: "#475569" }}>{s.nuevos_asig}</td>
+                         <td style={{ color: "#475569", fontWeight: 600 }}>{s.matriculas}</td>
+                         <td style={{ color: "#475569", fontWeight: 600 }}>{sol(s.venta)}</td>
+                       </tr>
+                       {abiertoP && (s.pautas || []).map((pt) => (
+                         <tr key={kProg + pt.pauta} style={{ background: "#eef2f7" }}>
+                           <td className="col-name" style={{ paddingLeft: 56, color: "#64748b", fontSize: 12 }}>Pauta {pt.pauta}</td>
+                           <td style={{ color: "#64748b", fontSize: 12 }}>{money(pt.importe)}</td>
+                           <td style={{ color: "#64748b", fontSize: 12 }}>{pt.resultados}</td>
+                           <td style={{ color: "#64748b", fontSize: 12 }}>{pt.nuevos}</td>
+                           <td style={{ color: "#64748b", fontSize: 12 }}>{pt.nuevos_asig}</td>
+                           <td style={{ color: "#64748b", fontSize: 12 }}>{pt.matriculas}</td>
+                           <td style={{ color: "#64748b", fontSize: 12 }}>{sol(pt.venta)}</td>
+                         </tr>
+                       ))}
+                       </Fragment>
+                       );
+                     })}
+                   </Fragment>
+                   );
+                 })}
+                 {data.matriz_always.total && (
+                   <tr className="total-row">
+                     <td className="col-name">Total</td>
+                     <td>{money(data.matriz_always.total.importe)}</td>
+                     <td>{data.matriz_always.total.resultados}</td>
+                     <td>{data.matriz_always.total.nuevos}</td>
+                     <td>{data.matriz_always.total.nuevos_asig}</td>
+                     <td>{data.matriz_always.total.matriculas}</td>
+                     <td>{sol(data.matriz_always.total.venta)}</td>
+                   </tr>
+                 )}
+               </tbody>
+             </table>
+           </div>
+         </div>
+         )}
+
+         {/* ── Leads Web Formulario por Sede ── */}
+         {data.matriz_webform && data.matriz_webform.filas && (
+         <div className="card" style={{ marginTop: 16, padding: 0, overflow: "hidden" }}>
+           <div className="card-title" style={{ padding: "14px 16px 6px" }}>Leads Web Formulario por Sede</div>
+           <div className="table-wrap" style={{ border: "none", maxHeight: 420, overflow: "auto" }}>
+             <table>
+               <thead>
+                 <tr>
+                   <th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 150 }}>Sede</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Leads Recibidos</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Leads Procesados</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Matrículas</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 130, whiteSpace: "nowrap" }}>Valor Venta</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {data.matriz_webform.filas.map((f) => {
+                   const abierto = !!expWeb[f.sede];
+                   return (
+                   <Fragment key={f.sede}>
+                     <tr>
+                       <td className="col-name">
+                         <button onClick={() => setExpWeb((p) => ({ ...p, [f.sede]: !p[f.sede] }))}
+                           style={{ border: "none", background: "transparent", cursor: "pointer",
+                                    fontWeight: 700, marginRight: 6, color: "#2563eb", fontSize: 14 }}>
+                           {abierto ? "−" : "+"}
+                         </button>
+                         {f.sede}
+                       </td>
+                       <td>{f.recibidos}</td>
+                       <td>{f.procesados}</td>
+                       <td style={{ fontWeight: 600 }}>{f.matriculas}</td>
+                       <td style={{ fontWeight: 600 }}>{sol(f.venta)}</td>
+                     </tr>
+                     {abierto && (f.subfilas || []).map((s) => (
+                       <tr key={f.sede + s.programa} style={{ background: "#f8fafc" }}>
+                         <td className="col-name" style={{ paddingLeft: 30, color: "#475569", fontSize: 12 }}>{s.programa}</td>
+                         <td style={{ color: "#475569", fontSize: 12 }}>{s.recibidos}</td>
+                         <td style={{ color: "#475569", fontSize: 12 }}>{s.procesados}</td>
+                         <td style={{ color: "#475569", fontSize: 12 }}>{s.matriculas}</td>
+                         <td style={{ color: "#475569", fontSize: 12 }}>{sol(s.venta)}</td>
+                       </tr>
+                     ))}
+                   </Fragment>
+                   );
+                 })}
+                 {data.matriz_webform.total && (
+                   <tr className="total-row">
+                     <td className="col-name">Total</td>
+                     <td>{data.matriz_webform.total.recibidos}</td>
+                     <td>{data.matriz_webform.total.procesados}</td>
+                     <td>{data.matriz_webform.total.matriculas}</td>
+                     <td>{sol(data.matriz_webform.total.venta)}</td>
+                   </tr>
+                 )}
+               </tbody>
+             </table>
+           </div>
+         </div>
+         )}
+
+         {/* ── Leads Asignados por Asesor y Día (pivot) ── */}
+         {data.matriz_asignados && data.matriz_asignados.filas && (
+         <div className="card" style={{ marginTop: 16, padding: 0, overflow: "hidden" }}>
+           <div className="card-title" style={{ padding: "14px 16px 6px" }}>Leads Asignados por Asesor y Día</div>
+           <div className="table-wrap" style={{ border: "none", maxHeight: 460, overflow: "auto" }}>
+             <table>
+               <thead>
+                 <tr>
+                   <th className="col-name" style={{ position: "sticky", top: 0, left: 0, zIndex: 3, minWidth: 180, background: "#1e3a5f" }}>Asesor</th>
+                   {data.matriz_asignados.dias.map((d) => (
+                     <th key={d} style={{ position: "sticky", top: 0, zIndex: 2 }}>{d}</th>
+                   ))}
+                   <th style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 70 }}>Total</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {data.matriz_asignados.filas.map((f) => {
+                   const abierto = !!expAsig[f.asesor];
+                   return (
+                   <Fragment key={f.asesor}>
+                     <tr>
+                       <td className="col-name">
+                         <button onClick={() => setExpAsig((p) => ({ ...p, [f.asesor]: !p[f.asesor] }))}
+                           style={{ border: "none", background: "transparent", cursor: "pointer",
+                                    fontWeight: 700, marginRight: 6, color: "#2563eb", fontSize: 14 }}>
+                           {abierto ? "−" : "+"}
+                         </button>
+                         {f.asesor}
+                       </td>
+                       {data.matriz_asignados.dias.map((d) => (
+                         <td key={d} style={{ color: f.por_dia[d] ? "#0f172a" : "#cbd5e1" }}>{f.por_dia[d] || ""}</td>
+                       ))}
+                       <td style={{ fontWeight: 700 }}>{f.total}</td>
+                     </tr>
+                     {abierto && (
+                       <tr>
+                         <td colSpan={data.matriz_asignados.dias.length + 2} style={{ background: "#f8fafc", padding: "8px 14px" }}>
+                           {Object.keys(f.tels_dia || {}).length === 0
+                             ? <span style={{ color: "#94a3b8" }}>—</span>
+                             : Object.entries(f.tels_dia || {}).map(([d, tels]) => (
+                               <div key={d} style={{ marginBottom: 6 }}>
+                                 <span style={{ fontSize: 12, fontWeight: 600, color: "#475569" }}>Día {d} ({(tels || []).length}): </span>
+                                 <span style={{ fontSize: 12, color: "#64748b" }}>{(tels || []).join(", ")}</span>
+                               </div>
+                             ))}
+                         </td>
+                       </tr>
+                     )}
+                   </Fragment>
+                   );
+                 })}
+                 <tr className="total-row">
+                   <td className="col-name">Total</td>
+                   {data.matriz_asignados.dias.map((d) => (
+                     <td key={d}>{data.matriz_asignados.total_por_dia[d] || ""}</td>
+                   ))}
+                   <td>{data.matriz_asignados.total}</td>
+                 </tr>
+               </tbody>
+             </table>
+           </div>
+         </div>
+         )}
+
+         {/* ── Plantillas WhatsApp (cobradas) por Plantilla ── */}
+         {data.matriz_plantillas && data.matriz_plantillas.filas && (
+         <div className="card" style={{ marginTop: 16, padding: 0, overflow: "hidden" }}>
+           <div className="card-title" style={{ padding: "14px 16px 6px" }}>Plantillas WhatsApp (cobradas)</div>
+           <div className="table-wrap" style={{ border: "none", maxHeight: 460, overflow: "auto" }}>
+             <table>
+               <thead>
+                 <tr>
+                   <th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 220 }}>Plantilla</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Enviadas</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Respondidas</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Asignadas</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Matrículas</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 130, whiteSpace: "nowrap" }}>Valor Venta</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {data.matriz_plantillas.filas.map((f) => (
+                   <tr key={f.plantilla}>
+                     <td className="col-name">{f.plantilla}</td>
+                     <td style={{ fontWeight: 600 }}>{f.enviadas}</td>
+                     <td>{f.respondidas}</td>
+                     <td>{f.asignadas}</td>
+                     <td style={{ fontWeight: 600 }}>{f.matriculas}</td>
+                     <td style={{ fontWeight: 600 }}>{sol(f.venta)}</td>
+                   </tr>
+                 ))}
+                 {data.matriz_plantillas.total && (
+                   <tr className="total-row">
+                     <td className="col-name">Total</td>
+                     <td>{data.matriz_plantillas.total.enviadas}</td>
+                     <td>{data.matriz_plantillas.total.respondidas}</td>
+                     <td>{data.matriz_plantillas.total.asignadas}</td>
+                     <td>{data.matriz_plantillas.total.matriculas}</td>
+                     <td>{sol(data.matriz_plantillas.total.venta)}</td>
+                   </tr>
+                 )}
+               </tbody>
+             </table>
+           </div>
+         </div>
+         )}
+       </>}
+    </div>
+  );
+}

frontend/src/pages/Roas.jsx

@@ -0,0 +1,138 @@
+import { useState, useEffect, useMemo, Fragment } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox, Filters, Select } from "../components/UI";
+
+const MESES = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];
+
+export default function Roas() {
+  const hoy = new Date();
+  const [ano, setAno] = useState(String(hoy.getFullYear()));
+  const [mes, setMes] = useState(String(hoy.getMonth() + 1));
+
+  const [filtros, setFiltros] = useState({ anos: [2026] });
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [expand, setExpand] = useState({});     // sede -> abierto/cerrado
+  const [expandP, setExpandP] = useState({});   // "sede|prog" -> abierto/cerrado
+  const [reload, setReload] = useState(0);
+
+  useEffect(() => { api.leadsFiltros().then(setFiltros).catch(() => {}); }, []);
+  useEffect(() => {
+    const id = setInterval(() => setReload((n) => n + 1), 15 * 60 * 1000);
+    const onActualizar = () => setReload((n) => n + 1);   // recarga al guardar en Config
+    window.addEventListener("roas-actualizar", onActualizar);
+    window.addEventListener("datos-actualizar", onActualizar);
+    return () => { clearInterval(id);
+      window.removeEventListener("roas-actualizar", onActualizar);
+      window.removeEventListener("datos-actualizar", onActualizar); };
+  }, []);
+
+  useEffect(() => {
+    let activo = true;
+    if (!data) setLoading(true);
+    setError(null);
+    api.roas(ano, mes, "TODOS")
+      .then((res) => { if (activo) { setData(res); setLoading(false); } })
+      .catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
+    return () => { activo = false; };
+  }, [ano, mes, reload]);
+
+  const optAnos = useMemo(() => (filtros.anos || []).map(String), [filtros]);
+  const optMes  = useMemo(() => [{ value: "TODOS", label: "TODOS" },
+                                 ...MESES.map((m,i)=>({ value: String(i+1), label: m }))], []);
+
+  const soles = (v) => "$" + Number(v || 0).toLocaleString("es-PE", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  const num = (v) => Number(v || 0).toLocaleString("es-PE");
+
+  return (
+    <div>
+      <h1 className="page-title">📈 ROAS</h1>
+
+      <Filters>
+        <Select label="Año" value={ano} options={optAnos} onChange={setAno} />
+        <Select label="Mes" value={mes} options={optMes} onChange={setMes} />
+      </Filters>
+
+      {loading ? <Loader text="Cargando ROAS..." /> :
+       error ? <ErrorBox msg={error} /> :
+       !data ? <ErrorBox msg="Sin datos" /> :
+       <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+         <div className="card-title" style={{ padding: "14px 16px 6px" }}>Inversión por Sede</div>
+         <div className="table-wrap" style={{ border: "none", maxHeight: 460, overflow: "auto" }}>
+           <table>
+             <thead>
+               <tr>
+                 <th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 160 }}>Sede</th>
+                 <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Importe Gastado</th>
+                 <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Resultados</th>
+               </tr>
+             </thead>
+             <tbody>
+               {(data.filas || []).map((f) => {
+                 const subs = f.programas || [];
+                 const abierto = !!expand[f.sede];
+                 return (
+                   <Fragment key={f.sede}>
+                     <tr>
+                       <td className="col-name">
+                         {subs.length > 0 && (
+                           <button onClick={() => setExpand((e) => ({ ...e, [f.sede]: !e[f.sede] }))}
+                             style={{ border: "none", background: "transparent", cursor: "pointer",
+                                      color: "#2563eb", fontWeight: 700, fontSize: 15, marginRight: 8, width: 16 }}>
+                             {abierto ? "−" : "+"}
+                           </button>
+                         )}
+                         {f.sede}
+                       </td>
+                       <td style={{ fontWeight: 600 }}>{soles(f.importe)}</td>
+                       <td>{num(f.resultados)}</td>
+                     </tr>
+                     {abierto && subs.map((p) => {
+                       const claveP = f.sede + "|" + p.programa;
+                       const abiertoP = !!expandP[claveP];
+                       const conjs = p.conjuntos || [];
+                       return (
+                         <Fragment key={claveP}>
+                           <tr style={{ background: "#f8fafc" }}>
+                             <td className="col-name" style={{ paddingLeft: 24, color: "#475569", fontSize: 13 }}>
+                               {conjs.length > 0 && (
+                                 <button onClick={() => setExpandP((e) => ({ ...e, [claveP]: !e[claveP] }))}
+                                   style={{ border: "none", background: "transparent", cursor: "pointer",
+                                            color: "#2563eb", fontWeight: 700, fontSize: 14, marginRight: 8, width: 14 }}>
+                                   {abiertoP ? "−" : "+"}
+                                 </button>
+                               )}
+                               {p.programa}
+                             </td>
+                             <td style={{ color: "#475569" }}>{soles(p.importe)}</td>
+                             <td style={{ color: "#475569" }}>{num(p.resultados)}</td>
+                           </tr>
+                           {abiertoP && conjs.map((c) => (
+                             <tr key={claveP + "-" + c.conjunto} style={{ background: "#eef2f7" }}>
+                               <td className="col-name" title={c.conjunto} style={{ paddingLeft: 60, color: "#94a3b8", fontSize: 12.5,
+                                          whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 280 }}>{c.conjunto}</td>
+                               <td style={{ color: "#94a3b8", fontSize: 12.5 }}>{soles(c.importe)}</td>
+                               <td style={{ color: "#94a3b8", fontSize: 12.5 }}>{num(c.resultados)}</td>
+                             </tr>
+                           ))}
+                         </Fragment>
+                       );
+                     })}
+                   </Fragment>
+                 );
+               })}
+               {data.total && (
+                 <tr className="total-row">
+                   <td className="col-name">Total</td>
+                   <td>{soles(data.total.importe)}</td>
+                   <td>{num(data.total.resultados)}</td>
+                 </tr>
+               )}
+             </tbody>
+           </table>
+         </div>
+       </div>}
+    </div>
+  );
+}

frontend/src/pages/Vendedores.jsx

@@ -0,0 +1,423 @@
+import { useState, useEffect, useMemo } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox, Filters, Select } from "../components/UI";
+import {
+  AreaChart, Area, BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
+} from "recharts";
+
+const MESES = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];
+
+export default function Vendedores() {
+  const _hoy = new Date();
+  const [vend, setVend] = useState("TODOS");
+  const [ano, setAno] = useState(String(_hoy.getFullYear()));   // año actual
+  const [mes, setMes] = useState(String(_hoy.getMonth() + 1));  // mes actual
+  const [dia, setDia] = useState("TODOS");
+  const [modoTR, setModoTR] = useState("asig");   // "asig" | "resp" para el grafico de tiempo
+
+  const [filtros, setFiltros] = useState({ anos: [2026] });
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [recargando, setRecargando] = useState(false);
+  const [error, setError] = useState(null);
+  const [reload, setReload] = useState(0);
+
+  useEffect(() => { api.leadsFiltros().then(setFiltros).catch(() => {}); }, []);
+  useEffect(() => {
+    const id = setInterval(() => setReload((n) => n + 1), 15 * 60 * 1000);
+    const onActualizar = () => setReload((n) => n + 1);   // recarga al guardar en Config
+    window.addEventListener("datos-actualizar", onActualizar);
+    return () => { clearInterval(id); window.removeEventListener("datos-actualizar", onActualizar); };
+  }, []);
+
+  useEffect(() => {
+    let activo = true;
+    if (!data) setLoading(true);
+    setRecargando(true);       // atenuar contenido mientras se recalcula
+    setError(null);
+    api.vendedores(ano, mes, dia)
+      .then((res) => { if (activo) { setData(res); setLoading(false); setRecargando(false); } })
+      .catch((e) => { if (activo) { setError(e.message); setLoading(false); setRecargando(false); } });
+    return () => { activo = false; };
+  }, [ano, mes, dia, reload]);
+
+  const optVend = useMemo(() => ["TODOS", ...((data && data.vendedores) || [])], [data]);
+  const optAnos = useMemo(() => {
+    const anos = (filtros.anos || []).map(String);
+    const actual = String(_hoy.getFullYear());
+    if (!anos.includes(actual)) anos.push(actual);   // asegura que el año actual sea opcion
+    return ["TODOS", ...anos];
+  }, [filtros]);
+  const optMes  = useMemo(() => [{ value: "TODOS", label: "TODOS" },
+                                 ...MESES.map((m,i)=>({ value: String(i+1), label: m }))], []);
+  const optDia  = useMemo(() => ["TODOS", ...Array.from({length:31}, (_,i)=>String(i+1))], []);
+
+  // Filas visibles: si hay vendedor filtrado, solo esa; si no, todas
+  const filas = useMemo(() => {
+    if (!data) return [];
+    if (vend === "TODOS") return data.filas;
+    return data.filas.filter((f) => f.vendedor === vend);
+  }, [data, vend]);
+
+  const num = (v) => Number(v || 0).toLocaleString("es-PE");
+
+  // Resumen para las tarjetas: si hay 1 vendedor filtrado -> esa fila; si TODOS -> el total
+  const resumen = useMemo(() => {
+    if (!data) return null;
+    if (vend !== "TODOS") return data.filas.find((f) => f.vendedor === vend) || null;
+    return data.total || null;
+  }, [data, vend]);
+
+  // Matriz por programa: si hay 1 vendedor -> la suya; si TODOS -> el total
+  const matrizProg = useMemo(() => {
+    if (!data) return [];
+    if (vend !== "TODOS") return (data.matriz_prog && data.matriz_prog[vend]) || [];
+    return data.matriz_prog_total || [];
+  }, [data, vend]);
+
+  // Matriz Estado/Objeción (Ultima_Etiqueta): por vendedor o total
+  const matrizEtiq = useMemo(() => {
+    if (!data) return [];
+    if (vend !== "TODOS") return (data.matriz_etiq && data.matriz_etiq[vend]) || [];
+    return data.matriz_etiq_total || [];
+  }, [data, vend]);
+
+  // Serie diaria (asignados + matriculas): por vendedor o total
+  const serieDia = useMemo(() => {
+    if (!data) return [];
+    if (vend !== "TODOS") return (data.serie_dia && data.serie_dia[vend]) || [];
+    return data.serie_dia_total || [];
+  }, [data, vend]);
+
+  // Serie tiempo de respuesta (promedio min por dia de asignacion)
+  const serieTR = useMemo(() => {
+    if (!data) return [];
+    if (vend !== "TODOS") return (data.tiempo_resp && data.tiempo_resp[vend]) || [];
+    return data.tiempo_resp_total || [];
+  }, [data, vend]);
+
+  // Serie tiempo de respuesta (promedio min por dia de RESPUESTA)
+  const serieTRr = useMemo(() => {
+    if (!data) return [];
+    if (vend !== "TODOS") return (data.tiempo_resp_r && data.tiempo_resp_r[vend]) || [];
+    return data.tiempo_resp_r_total || [];
+  }, [data, vend]);
+
+  return (
+    <div>
+      <h1 className="page-title">🧑‍💼 Vendedores</h1>
+
+      <Filters>
+        <Select label="Vendedor" value={vend} options={optVend} onChange={setVend} />
+        <Select label="Año" value={ano} options={optAnos} onChange={setAno} />
+        <Select label="Mes" value={mes} options={optMes} onChange={setMes} />
+        <Select label="Día" value={dia} options={optDia} onChange={setDia} />
+      </Filters>
+
+      {loading ? <Loader text="Cargando vendedores..." /> :
+       error ? <ErrorBox msg={error} /> :
+       !data ? <ErrorBox msg="Sin datos" /> :
+       <div style={{ opacity: recargando ? 0.45 : 1,
+                     filter: recargando ? "grayscale(0.2)" : "none",
+                     pointerEvents: recargando ? "none" : "auto",
+                     transition: "opacity 0.25s ease, filter 0.25s ease" }}>
+       {resumen && <ResumenTarjetas r={resumen} num={num} />}
+
+       {/* Gráfico día a día + Estado/Objeción lado a lado */}
+       <div style={{ display: "grid", gridTemplateColumns: "minmax(380px, 2fr) minmax(300px, 1fr)",
+                     gap: 16, marginTop: 16 }}>
+
+         {/* Gráfico día a día: Leads Procesados vs Matrículas */}
+         <div className="card">
+           <div className="card-title">
+             Leads Asignados y Matrículas por Día{vend !== "TODOS" ? ` — ${vend}` : ""}
+           </div>
+           <ResponsiveContainer width="100%" height={360}>
+             <AreaChart data={serieDia} margin={{ top: 10, right: 24, left: -6, bottom: 8 }}>
+               <defs>
+                 <linearGradient id="gradProcV" x1="0" y1="0" x2="0" y2="1">
+                   <stop offset="0%" stopColor="#60a5fa" stopOpacity={0.55} />
+                   <stop offset="100%" stopColor="#60a5fa" stopOpacity={0.05} />
+                 </linearGradient>
+                 <linearGradient id="gradMatV" x1="0" y1="0" x2="0" y2="1">
+                   <stop offset="0%" stopColor="#0f766e" stopOpacity={0.55} />
+                   <stop offset="100%" stopColor="#0f766e" stopOpacity={0.08} />
+                 </linearGradient>
+               </defs>
+               <CartesianGrid strokeDasharray="3 3" stroke="#eef2f7" vertical={false} />
+               <XAxis dataKey="dia" tick={{ fontSize: 10, fill: "#94a3b8" }} interval={0}
+                      axisLine={{ stroke: "#e2e8f0" }} tickLine={false} />
+               <YAxis tick={{ fontSize: 11, fill: "#94a3b8" }} allowDecimals={false}
+                      axisLine={false} tickLine={false} width={32} />
+               <Tooltip contentStyle={{ borderRadius: 10, border: "1px solid #e2e8f0",
+                        boxShadow: "0 6px 20px rgba(0,0,0,0.1)", fontSize: 12 }} />
+               <Legend iconType="circle" wrapperStyle={{ fontSize: 12, paddingTop: 4 }} />
+               <Area type="linear" dataKey="asignados" name="Leads Asignados" stroke="#60a5fa"
+                     fill="url(#gradProcV)" strokeWidth={2.5}
+                     dot={{ r: 2.5, fill: "#60a5fa", stroke: "#fff", strokeWidth: 1 }}
+                     activeDot={{ r: 5 }} />
+               <Area type="linear" dataKey="matriculas" name="Matrículas" stroke="#0f766e"
+                     fill="url(#gradMatV)" strokeWidth={2.5}
+                     dot={{ r: 2.5, fill: "#0f766e", stroke: "#fff", strokeWidth: 1 }}
+                     activeDot={{ r: 5 }} />
+             </AreaChart>
+           </ResponsiveContainer>
+         </div>
+
+         {/* Matriz Estado/Objeción (Ultima_Etiqueta) — al costado del gráfico */}
+         <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+           <div className="card-title" style={{ padding: "14px 16px 6px" }}>
+             Estado/Objeción{vend !== "TODOS" ? ` — ${vend}` : ""}
+           </div>
+           <div className="table-wrap" style={{ border: "none", maxHeight: 360, overflow: "auto" }}>
+             <table>
+               <thead>
+                 <tr>
+                   <th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 160 }}>Estado/Objeción</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Leads Asignados</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {matrizEtiq.map((e) => (
+                   <tr key={e.estado}>
+                     <td className="col-name">{e.estado}</td>
+                     <td>{num(e.cantidad)}</td>
+                   </tr>
+                 ))}
+                 {matrizEtiq.length > 0 && (
+                   <tr className="total-row">
+                     <td className="col-name">Total</td>
+                     <td>{num(matrizEtiq.reduce((s, e) => s + (e.cantidad || 0), 0))}</td>
+                   </tr>
+                 )}
+               </tbody>
+             </table>
+           </div>
+         </div>
+       </div>
+
+
+       {/* Tiempo de respuesta + Sin responder, lado a lado */}
+       <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16, marginTop: 16 }}>
+       {(() => {
+         const esResp = modoTR === "resp";
+         const serie = esResp ? serieTRr : serieTR;
+         const color = esResp ? "#2563eb" : "#f59e0b";
+         const colorSoft = esResp ? "#3b82f6" : "#fbbf24";
+         return (
+       <div>
+         <div className="card" style={{ display: "flex", flexDirection: "column", height: 400 }}>
+           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
+                         height: 40, marginBottom: 8, gap: 8 }}>
+             <div style={{ fontSize: 15, fontWeight: 700, color: "#0f172a" }}>
+               Tiempo de Respuesta por Día (min){vend !== "TODOS" ? ` — ${vend}` : ""}
+             </div>
+             <select value={modoTR} onChange={(e) => setModoTR(e.target.value)}
+                     style={{ fontSize: 12.5, padding: "6px 10px", borderRadius: 8,
+                              border: "1px solid #e2e8f0", background: "#f8fafc",
+                              color: "#334155", fontWeight: 600, cursor: "pointer" }}>
+               <option value="asig">📌 Según Asignación</option>
+               <option value="resp">✅ Según Respuesta</option>
+             </select>
+           </div>
+           <div style={{ flex: 1 }}>
+           <ResponsiveContainer width="100%" height="100%">
+             <LineChart data={serie} margin={{ top: 12, right: 24, left: -6, bottom: 8 }}>
+               <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" vertical={false} />
+               <XAxis dataKey="dia" tick={{ fontSize: 10, fill: "#94a3b8" }} interval={0}
+                      axisLine={{ stroke: "#e2e8f0" }} tickLine={false} />
+               <YAxis tick={{ fontSize: 11, fill: "#94a3b8" }} allowDecimals={false}
+                      axisLine={false} tickLine={false} width={38} />
+               <Tooltip content={({ active, payload, label }) => {
+                          if (!active || !payload || !payload.length) return null;
+                          const d = payload[0].payload || {};
+                          return (
+                            <div style={{ background: "#fff", borderRadius: 10, border: "1px solid #e2e8f0",
+                                          boxShadow: "0 8px 24px rgba(0,0,0,0.12)", fontSize: 12,
+                                          padding: "10px 13px", lineHeight: 1.7 }}>
+                              <div style={{ fontWeight: 700, color: "#0f172a", marginBottom: 4 }}>Día {label}</div>
+                              <div style={{ color, fontWeight: 700 }}>Promedio: {d.promedio_min || 0} min</div>
+                              <div style={{ color: "#0f766e" }}>Respondidos{esResp ? " ese día" : ""}: {d.respondidos || 0}</div>
+                              {esResp
+                                ? <div style={{ color: "#94a3b8", fontSize: 11.5 }}>⚠ Respuesta tardía (+2 días): {d.tardios || 0}</div>
+                                : <div style={{ color: "#b91c1c" }}>Sin responder: {d.no_respondidos || 0}</div>}
+                            </div>
+                          );
+                        }} />
+               <Line type="linear" dataKey="promedio_min" name="Promedio (min)" stroke={color}
+                     strokeWidth={2.5}
+                     dot={{ r: 3, fill: color, stroke: "#fff", strokeWidth: 1.5 }}
+                     activeDot={{ r: 6, fill: colorSoft, stroke: "#fff", strokeWidth: 2 }} />
+             </LineChart>
+           </ResponsiveContainer>
+           </div>
+         </div>
+       </div>
+         );
+       })()}
+
+       {/* Leads SIN responder por día (fecha de asignación) — barras */}
+       <div>
+         <div className="card" style={{ display: "flex", flexDirection: "column", height: 400 }}>
+           <div className="card-title" style={{ display: "flex", alignItems: "center", gap: 6, height: 40, marginBottom: 8 }}>
+             <span style={{ width: 10, height: 10, borderRadius: 3, background: "#f43f5e", display: "inline-block" }} />
+             Leads Sin Responder por Día{vend !== "TODOS" ? ` — ${vend}` : ""}
+           </div>
+           <div style={{ flex: 1 }}>
+           {(() => {
+             const datosNR = serieTR.filter((d) => (d.no_respondidos || 0) >= 1);
+             if (datosNR.length === 0) {
+               return (
+                 <div style={{ height: "100%", display: "flex", flexDirection: "column",
+                               alignItems: "center", justifyContent: "center", color: "#94a3b8", gap: 8 }}>
+                   <div style={{ fontSize: 34 }}>✅</div>
+                   <div style={{ fontSize: 13.5, fontWeight: 600, color: "#0f766e" }}>Sin leads pendientes</div>
+                   <div style={{ fontSize: 12 }}>Todos los leads del periodo fueron respondidos.</div>
+                 </div>
+               );
+             }
+             return (
+           <ResponsiveContainer width="100%" height="100%">
+             <BarChart data={datosNR} margin={{ top: 12, right: 24, left: -6, bottom: 8 }}>
+               <defs>
+                 <linearGradient id="gradNoResp" x1="0" y1="0" x2="0" y2="1">
+                   <stop offset="0%" stopColor="#fb7185" stopOpacity={1} />
+                   <stop offset="100%" stopColor="#f43f5e" stopOpacity={0.85} />
+                 </linearGradient>
+               </defs>
+               <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" vertical={false} />
+               <XAxis dataKey="dia" tick={{ fontSize: 10, fill: "#94a3b8" }} interval={0}
+                      axisLine={{ stroke: "#e2e8f0" }} tickLine={false} />
+               <YAxis tick={{ fontSize: 11, fill: "#94a3b8" }} allowDecimals={false}
+                      axisLine={false} tickLine={false} width={32} />
+               <Tooltip cursor={{ fill: "#fef2f2" }} content={({ active, payload, label }) => {
+                          if (!active || !payload || !payload.length) return null;
+                          const d = payload[0].payload || {};
+                          return (
+                            <div style={{ background: "#fff", borderRadius: 10, border: "1px solid #e2e8f0",
+                                          boxShadow: "0 8px 24px rgba(0,0,0,0.12)", fontSize: 12,
+                                          padding: "10px 13px", lineHeight: 1.7 }}>
+                              <div style={{ fontWeight: 700, color: "#0f172a", marginBottom: 4 }}>Día {label}</div>
+                              <div style={{ color: "#e11d48", fontWeight: 700 }}>Sin responder: {d.no_respondidos || 0}</div>
+                              <div style={{ color: "#0f766e" }}>Respondidos: {d.respondidos || 0}</div>
+                            </div>
+                          );
+                        }} />
+               <Bar dataKey="no_respondidos" name="Sin responder" fill="url(#gradNoResp)" radius={[4, 4, 0, 0]} maxBarSize={26} />
+             </BarChart>
+           </ResponsiveContainer>
+             );
+           })()}
+           </div>
+         </div>
+       </div>
+       </div>
+
+       {/* Matriz por tipo de programa (al final) */}
+       <div style={{ marginTop: 16 }}>
+         <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+           <div className="card-title" style={{ padding: "14px 16px 6px" }}>
+             Matrículas por Tipo de Programa{vend !== "TODOS" ? ` — ${vend}` : ""}
+           </div>
+           <div className="table-wrap" style={{ border: "none", maxHeight: 420, overflow: "auto" }}>
+             <table>
+               <thead>
+                 <tr>
+                   <th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 150 }}>Tipo de Programa</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Total Matrículas</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Retiradas</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>% Retirados</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {matrizProg.map((p) => (
+                   <tr key={p.programa}>
+                     <td className="col-name">{p.programa}</td>
+                     <td style={{ fontWeight: 600 }}>{num(p.total)}</td>
+                     <td>{num(p.retiradas)}</td>
+                     <td>{Number(p.pct_retiradas || 0).toLocaleString("es-PE")}%</td>
+                   </tr>
+                 ))}
+                 {matrizProg.length > 0 && (
+                   <tr className="total-row">
+                     <td className="col-name">Total</td>
+                     <td>{num(matrizProg.reduce((s, p) => s + (p.total || 0), 0))}</td>
+                     <td>{num(matrizProg.reduce((s, p) => s + (p.retiradas || 0), 0))}</td>
+                     <td>{(() => {
+                       const t = matrizProg.reduce((s, p) => s + (p.total || 0), 0);
+                       const r = matrizProg.reduce((s, p) => s + (p.retiradas || 0), 0);
+                       return `${(t ? Math.round(r / t * 1000) / 10 : 0).toLocaleString("es-PE")}%`;
+                     })()}</td>
+                   </tr>
+                 )}
+               </tbody>
+             </table>
+           </div>
+         </div>
+       </div>
+
+       </div>}
+    </div>
+  );
+}
+
+// ── Tarjetas de resumen: 3 grupos (Cartera / Matrículas / Leads) en lista ─────
+function ResumenTarjetas({ r, num }) {
+  const pct = Number(r.pct_retiradas || 0);
+  const pctCont = Number(r.pct_contactados || 0);
+  const grupos = [
+    {
+      titulo: "Cartera", acento: "#2563eb",
+      filas: [
+        { label: "Total",  valor: num(r.cartera_total) },
+        { label: "Copito", valor: num(r.cartera_copito) },
+        { label: "Otros",  valor: num(r.cartera_otros) },
+      ],
+    },
+    {
+      titulo: "Matrículas", acento: "#0f766e",
+      filas: [
+        { label: "Total",        valor: num(r.mat_total) },
+        { label: "Retiradas",    valor: num(r.mat_retiradas) },
+        { label: "% Retirados",  valor: `${pct.toLocaleString("es-PE")}%`, alerta: true },
+      ],
+    },
+    {
+      titulo: "Leads", acento: "#7c3aed",
+      filas: [
+        { label: "Asignados",     valor: num(r.leads_asignados) },
+        { label: "Contactados",   valor: num(r.leads_contactados) },
+        { label: "% Contactados", valor: `${pctCont.toLocaleString("es-PE")}%`, resalta: "#7c3aed" },
+      ],
+    },
+  ];
+
+  return (
+    <div style={{ display: "grid",
+                  gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+                  gap: 12, marginBottom: 18 }}>
+      {grupos.map((g) => (
+        <div key={g.titulo} style={{
+          background: "#fff", border: "1px solid #e8ecf3", borderRadius: 12,
+          padding: "14px 16px", boxShadow: "0 1px 3px rgba(16,24,40,0.05)" }}>
+          <div style={{ fontSize: 11, fontWeight: 700, color: g.acento,
+                        textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 10 }}>
+            {g.titulo}
+          </div>
+          {g.filas.map((f, i) => (
+            <div key={f.label} style={{
+              display: "flex", justifyContent: "space-between", alignItems: "center",
+              padding: "6px 0",
+              borderBottom: i < g.filas.length - 1 ? "1px solid #f1f5f9" : "none" }}>
+              <span style={{ fontSize: 12.5, color: "#64748b" }}>{f.label}</span>
+              <span style={{ fontSize: 15, fontWeight: 700,
+                             color: f.alerta ? "#b91c1c" : (f.resalta || "#0f172a") }}>
+                {f.valor}
+              </span>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/styles.css

@@ -0,0 +1,74 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f1f5f9; color: #0f172a; }
+
+.app { display: flex; height: 100vh; overflow: hidden; }
+
+/* ── Sidebar fija ── */
+.sidebar {
+  width: 240px; background: #0f172a; color: #e2e8f0;
+  display: flex; flex-direction: column; flex-shrink: 0;
+  height: 100vh; position: sticky; top: 0;
+}
+.sidebar-logo { padding: 22px 18px; font-size: 18px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.08); }
+.sidebar-logo span { color: #60a5fa; }
+.nav { padding: 12px 8px; }
+.nav-item {
+  width: 100%; text-align: left; padding: 11px 14px; margin-bottom: 4px;
+  background: transparent; border: none; color: #cbd5e1; border-radius: 8px;
+  cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 10px;
+}
+.nav-item:hover { background: rgba(255,255,255,0.06); }
+.nav-item.active { background: #2563eb; color: #fff; font-weight: 600; }
+
+.main { flex: 1; padding: 24px 28px; overflow-y: auto; height: 100vh; }
+.page-title { font-size: 24px; font-weight: 700; margin-bottom: 18px; color: #0f172a; }
+
+/* ── Filtros ── */
+.filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
+.filter-group { display: flex; flex-direction: column; gap: 4px; }
+.filter-group label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .3px; }
+.filter-group select {
+  padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px;
+  background: #fff; min-width: 130px; cursor: pointer;
+}
+
+/* ── KPIs ── */
+.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
+.kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; }
+.kpi .ico { font-size: 22px; margin-bottom: 6px; }
+.kpi .label { font-size: 13px; font-weight: 600; color: #475569; }
+.kpi .value { font-size: 26px; font-weight: 800; color: #0f172a; margin: 4px 0; }
+.kpi .sub { font-size: 11px; color: #94a3b8; }
+
+/* tarjeta compuesta (varios sub-kpis) */
+.kpi-multi { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
+.kpi-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
+.kpi-row + .kpi-row { border-top: 1px solid #f1f5f9; }
+.kpi-row .ico { font-size: 24px; width: 34px; text-align: center; flex-shrink: 0; }
+.kpi-row .txt { line-height: 1.25; }
+.kpi-row .txt .label { font-size: 12px; font-weight: 600; color: #64748b; }
+.kpi-row .txt .value { font-size: 21px; font-weight: 800; color: #0f172a; }
+
+/* ── Tablas ── */
+.table-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: auto; }
+table { width: 100%; border-collapse: collapse; }
+th { background: #1e3a5f; color: #f1f5f9; padding: 10px 12px; font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; border-right: 1px solid rgba(255,255,255,0.12); }
+td { padding: 9px 12px; font-size: 13px; border-right: 1px solid #eef2f7; text-align: center; }
+th:last-child, td:last-child { border-right: none; }
+.total-row td { background: #eff6ff; font-weight: 700; }
+.col-name { text-align: left !important; }
+
+/* ── Loader / error ── */
+.loader-wrap { display: flex; flex-direction: column; align-items: center; padding: 50px; color: #64748b; }
+.spinner { width: 36px; height: 36px; border: 4px solid #e2e8f0; border-top-color: #2563eb; border-radius: 50%; animation: spin 1s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.loader-text { margin-top: 12px; font-size: 14px; }
+.error-box { background: #fee2e2; color: #991b1b; padding: 14px 18px; border-radius: 10px; font-size: 14px; }
+
+.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }
+.card-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 12px; }
+
+/* Matriz "Detalle por Curso": líneas verticales suaves entre columnas (solo cuerpo) */
+.matriz-grid tbody td { border-right: 1px solid #eef2f7; }
+.matriz-grid tbody td:last-child { border-right: none; }

frontend/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5174 },
+});