Actualizar dominios a dashboardapi y dashboardv1

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/IndicadorActualizacion.jsx

@@ -1,97 +0,0 @@
-// src/components/IndicadorActualizacion.jsx
-// Indicador (arriba-derecha) con la hora de la última actualización + botón de
-// recarga. Al pulsar: re-lee las bases para la vista actual y recachea el resto.
-import { useState, useEffect, useCallback } from "react";
-import { api } from "../lib/api";
-import { getVistaActual, emitirRefresco } from "../lib/vistaActual";
-
-function formatearHora(iso) {
-  if (!iso) return "—";
-  try {
-    const d = new Date(iso);
-    return d.toLocaleString("es-PE", {
-      day: "2-digit", month: "2-digit",
-      hour: "2-digit", minute: "2-digit",
-    });
-  } catch {
-    return "—";
-  }
-}
-
-export default function IndicadorActualizacion() {
-  const [hora, setHora] = useState(null);
-  const [cargando, setCargando] = useState(false);
-
-  const consultar = useCallback(async () => {
-    try {
-      const r = await api.ultimaActualizacion();
-      setHora(r?.hora || null);
-    } catch { /* silencioso */ }
-  }, []);
-
-  useEffect(() => {
-    consultar();
-    const id = setInterval(consultar, 60000);
-    return () => clearInterval(id);
-  }, [consultar]);
-
-  async function recargar() {
-    if (cargando) return;
-    setCargando(true);
-    try {
-      const r = await api.cacheRefreshManual(getVistaActual());
-      setHora(r?.hora || null);
-      emitirRefresco();
-    } catch { /* silencioso */ }
-    finally { setCargando(false); }
-  }
-
-  return (
-    <>
-      <style>{`
-        @keyframes spin-actualiza { to { transform: rotate(360deg); } }
-        .ind-actualiza-btn { transition: color .15s, transform .15s; }
-        .ind-actualiza-btn:hover:not(:disabled) { color:#7dd3fc; transform: scale(1.15); }
-        .ind-actualiza-spin { animation: spin-actualiza .9s linear infinite; }
-      `}</style>
-      <div
-        style={{
-          position: "fixed", right: 16, top: 14, zIndex: 60,
-          display: "flex", alignItems: "center", gap: 8,
-          background: "rgba(15,23,42,0.9)",
-          color: cargando ? "#7dd3fc" : "#cbd5e1",
-          border: "1px solid " + (cargando ? "#0ea5e9" : "#334155"),
-          borderRadius: 20, padding: "6px 12px",
-          fontSize: 12, lineHeight: 1, fontWeight: 500,
-          boxShadow: "0 2px 8px rgba(0,0,0,0.28)",
-          backdropFilter: "blur(4px)",
-          userSelect: "none",
-        }}
-        title="Última actualización de las bases de datos"
-      >
-        <span style={{ opacity: cargando ? 1 : 0.85 }}>
-          {cargando ? "Actualizando…" : formatearHora(hora)}
-        </span>
-        <button
-          onClick={recargar}
-          disabled={cargando}
-          className={"ind-actualiza-btn" + (cargando ? " ind-actualiza-spin" : "")}
-          title={cargando ? "Actualizando datos…" : "Actualizar ahora"}
-          style={{
-            background: "transparent", border: "none",
-            cursor: cargando ? "default" : "pointer",
-            color: "#38bdf8", fontSize: 15, padding: 0, lineHeight: 1,
-            display: "flex", alignItems: "center",
-          }}
-        >
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
-               stroke="currentColor" strokeWidth="2.4"
-               strokeLinecap="round" strokeLinejoin="round">
-            <path d="M21 12a9 9 0 1 1-2.64-6.36" />
-            <path d="M21 3v6h-6" />
-          </svg>
-        </button>
-      </div>
-    </>
-  );
-}

frontend/src/components/Modal.jsx

@@ -1,34 +0,0 @@
-// src/components/Modal.jsx
-export default function Modal({ title, onClose, children, width = 900 }) {
-  return (
-    <div
-      onClick={onClose}
-      style={{
-        position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)",
-        display: "flex", alignItems: "center", justifyContent: "center",
-        zIndex: 1000, padding: 20,
-      }}
-    >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          background: "#fff", borderRadius: 16, width: "100%", maxWidth: width,
-          maxHeight: "90vh", overflow: "auto", boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
-        }}
-      >
-        <div style={{
-          display: "flex", justifyContent: "space-between", alignItems: "center",
-          padding: "16px 22px", borderBottom: "1px solid #e2e8f0", position: "sticky",
-          top: 0, background: "#fff", zIndex: 2,
-        }}>
-          <h3 style={{ fontSize: 16, fontWeight: 700, color: "#1e40af" }}>{title}</h3>
-          <button onClick={onClose} style={{
-            border: "none", background: "#f1f5f9", borderRadius: 8, width: 32, height: 32,
-            cursor: "pointer", fontSize: 18, color: "#475569",
-          }}>×</button>
-        </div>
-        <div style={{ padding: 22 }}>{children}</div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/Sidebar.jsx

@@ -1,26 +1,48 @@
-// src/components/Sidebar.jsx
-import { useAuth } from "../lib/auth";
+import { useState, useEffect } from "react";
+import { api } from "../lib/api";
 
 const MENU = [
-  { id: "ocupabilidad",    ico: "📊", label: "Ocupabilidad" },
-  { id: "ventas",          ico: "💰", label: "Ventas" },
-  { id: "comisiones",      ico: "🧮", label: "Comisiones" },
-  { id: "cobranza",        ico: "📋", label: "Cobranza" },
-  { id: "rentabilidad",    ico: "📈", label: "Rentabilidad" },
-  { id: "asesores",        ico: "👥", label: "Asesores" },
-  { id: "usuarios",        ico: "🔐", label: "Usuarios" },
+  { 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 }) {
-  const { perfil, permisos, logout } = useAuth();
-  const visibles = MENU.filter((m) => permisos.includes(m.id));
+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 }}>
-        {visibles.map((m) => (
+        {MENU.map((m) => (
           <button
             key={m.id}
             className={`nav-item ${active === m.id ? "active" : ""}`}
@@ -31,22 +53,59 @@ export default function Sidebar({ active, onChange }) {
         ))}
       </nav>
 
-      <div style={{ padding: 14, borderTop: "1px solid rgba(255,255,255,0.08)" }}>
-        <div style={{ fontSize: 12, color: "#94a3b8", marginBottom: 2 }}>
-          {perfil?.nombre || "Usuario"}
-        </div>
-        <div style={{ fontSize: 11, color: "#60a5fa", fontWeight: 600, marginBottom: 10 }}>
-          {perfil?.rol || ""}
-        </div>
-        <button
-          onClick={logout}
-          style={{
-            width: "100%", padding: "8px", border: "1px solid rgba(255,255,255,0.15)",
-            borderRadius: 8, background: "transparent", color: "#cbd5e1", fontSize: 12,
-            cursor: "pointer", fontWeight: 500,
-          }}
-        >
-          🚪 Cerrar sesión
+      {/* 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

@@ -1,4 +1,3 @@
-// src/components/UI.jsx
 export function Loader({ text = "Cargando..." }) {
   return (
     <div className="loader-wrap">
@@ -12,34 +11,15 @@ export function ErrorBox({ msg }) {
   return <div className="error-box">⚠️ {msg}</div>;
 }
 
-export function colorSemaforo(pct) {
-  if (pct >= 80) return { bg: "#d1fae5", fg: "#065f46", fill: "#10b981" };
-  if (pct >= 60) return { bg: "#fef9c3", fg: "#854d0e", fill: "#f59e0b" };
-  return { bg: "#fee2e2", fg: "#991b1b", fill: "#ef4444" };
-}
-
-export function ProgressBar({ pct }) {
-  const c = colorSemaforo(pct);
-  const w = Math.min(Math.max(pct, 0), 100);
-  return (
-    <div className="pbar">
-      <span className="pct" style={{ color: c.fg }}>{pct.toFixed(1)}%</span>
-      <div className="track">
-        <div className="fill" style={{ width: `${w}%`, background: c.fill }} />
-      </div>
-    </div>
-  );
-}
-
 export function Filters({ children }) {
   return <div className="filters">{children}</div>;
 }
 
-export function Select({ label, value, options, onChange, width }) {
+export function Select({ label, value, options, onChange }) {
   return (
-    <div className="filter-group" style={width ? { width } : undefined}>
+    <div className="filter-group">
       {label && <label>{label}</label>}
-      <select value={value} onChange={(e) => onChange(e.target.value)} style={width ? { width: "100%" } : undefined}>
+      <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;