Actualizar frontend/src/components/ConfigModal.jsx

frontend/src/components/ConfigModal.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { api } from "../lib/api";
+import Plantillas from "../pages/Plantillas";
 
 // Desplegable con búsqueda (estilo Claude).
 function ProgramaSelect({ valor, opciones = [], onSelect }) {
@@ -870,9 +871,16 @@ export default function ConfigModal({ onClose }) {
           <button onClick={() => setSeccion("leyendas")}
             style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
                      border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, whiteSpace: "nowrap",
+                     marginBottom: 4,
                      background: seccion === "leyendas" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
             Leyenda
           </button>
+          <button onClick={() => setSeccion("plantillas")}
+            style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
+                     border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, whiteSpace: "nowrap",
+                     background: seccion === "plantillas" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
+            Plantillas
+          </button>
         </div>
         {/* Contenido */}
         <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
@@ -882,13 +890,18 @@ export default function ConfigModal({ onClose }) {
               {seccion === "leyenda" ? "Leyenda de Anuncios"
                : seccion === "programas" ? "Programas"
                : seccion === "leyendas" ? "Leyenda"
+               : seccion === "plantillas" ? "Plantillas"
                : "Sedes de Anuncios"}
             </div>
             <button onClick={onClose}
               style={{ background: "transparent", border: "none", fontSize: 24, cursor: "pointer", color: "#64748b" }}>×</button>
           </div>
 
-          {seccion === "leyendas" ? (
+          {seccion === "plantillas" ? (
+            <div style={{ flex: 1, overflow: "auto", padding: "16px 22px 24px" }}>
+              <Plantillas ocultarTitulo />
+            </div>
+          ) : seccion === "leyendas" ? (
             <LeyendaCampanias />
           ) : seccion === "sedes" ? (
             <SedesAnuncios />