
<!-- ===== PERFIL ===== -->
<!-- ===== VIDEOS PARA REDES SOCIALES ===== -->
<div class="page" id="page-videos">
  <div class="ph"><div><div class="pt">Videos para Redes Sociales</div><div class="ps">TikTok · Instagram Reels · YouTube Shorts · Scripts con IA</div></div></div>

  <!-- CONTEXTO -->
  <div class="ctx-block">
    <div class="ctx-hd">
      <div class="ctx-icon">🎬</div>
      <div>
        <div class="ctx-title">Contexto de marca para videos</div>
        <div class="ctx-sub">Describe el tono, estilo, productos y objetivo de los videos del cliente</div>
      </div>
    </div>
    <textarea class="ctx-ta" id="videos-ctx" placeholder="Ej: Clínica dental, tono cercano y profesional, videos educativos de 15-30s para TikTok e Instagram Reels, objetivo: agendar citas..."></textarea>
    <div style="display:flex;align-items:center;gap:10px">
      <button class="ctx-save" data-click="saveCtx|videos">Guardar contexto</button>
      <button class="ctx-save" data-click="clearCtx|videos" style="background:var(--bg3);border:1px solid var(--br2);color:var(--m)">Limpiar</button>
      <span class="ctx-saved" id="ctx-saved-videos">✓ Guardado</span>
    </div>
  </div>

  <!-- TABS -->
  <div style="display:flex;gap:0;border-bottom:1px solid var(--br);margin-bottom:4px;overflow-x:auto;-webkit-overflow-scrolling:touch">
    <button class="vid-tab active" data-click="switchVidTab|scripts|__el" style="padding:9px 16px;font-size:12px;color:var(--t);background:none;border:none;border-bottom:2px solid var(--red);cursor:pointer;font-family:var(--fb)">Scripts</button>
    <button class="vid-tab" data-click="switchVidTab|hooks|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb)">Hooks</button>
    <button class="vid-tab" data-click="switchVidTab|herramientas|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb)">Herramientas IA</button>
    <button class="vid-tab" data-click="switchVidTab|estrategia|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb)">Estrategia</button>
    <button class="vid-tab" data-click="switchVidTab|calendario|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb)">📅 Calendario</button>
  </div>

  <!-- TAB: SCRIPTS -->
  <div class="vid-panel active" id="vpanel-scripts">

    <!-- SELECTOR DE MODO -->
    <div style="display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap">
      <button id="vid-modo-cero" data-click="switchVidModo|cero" style="flex:1;min-width:160px;padding:12px;border-radius:9px;font-size:13px;font-family:var(--fb);cursor:pointer;background:var(--red);border:2px solid var(--red);color:#fff;transition:all .2s">
        ✦ Crear desde cero
      </button>
      <button id="vid-modo-tomas" data-click="switchVidModo|tomas" style="flex:1;min-width:160px;padding:12px;border-radius:9px;font-size:13px;font-family:var(--fb);cursor:pointer;background:var(--bg3);border:2px solid var(--br2);color:var(--m);transition:all .2s">
        🎥 Potenciar mis tomas
      </button>
      <button id="vid-modo-ref" data-click="switchVidModo|ref" style="flex:1;min-width:160px;padding:12px;border-radius:9px;font-size:13px;font-family:var(--fb);cursor:pointer;background:var(--bg3);border:2px solid var(--br2);color:var(--m);transition:all .2s">
        🔗 Replicar referencia
      </button>
    </div>

    <!-- MODO: CREAR DESDE CERO -->
    <div id="vid-form-cero" class="card">
      <div class="chd"><div class="ctit">✦ Crear video desde cero con IA</div><div style="font-size:11px;color:var(--m)">AVI genera el script + prompt para la herramienta IA</div></div>

      <div class="g2" style="margin-bottom:12px">
        <div class="mf">
          <label>Plataforma</label>
          <select id="vid-plataforma" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
            <option value="tiktok">TikTok</option>
            <option value="reels">Instagram Reels</option>
            <option value="shorts">YouTube Shorts</option>
            <option value="facebook">Facebook Video</option>
            <option value="linkedin">LinkedIn Video</option>
          </select>
        </div>
        <div class="mf">
          <label>Duración objetivo</label>
          <select id="vid-duracion" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
            <option value="15">15 segundos</option>
            <option value="30" selected>30 segundos</option>
            <option value="60">60 segundos</option>
            <option value="90">90 segundos</option>
          </select>
        </div>
      </div>

      <div class="mf" style="margin-bottom:12px">
        <label>Tipo de contenido</label>
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:5px">
          <div class="stag" data-click="_scToggleClass|__el|active">Tutorial</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Testimonial</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Educativo</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Producto</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Antes/Después</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Trending</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Humor</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Behind the scenes</div>
          <div class="stag" data-click="_scToggleClass|__el|active">UGC Style</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Loop viral</div>
        </div>
      </div>

      <div class="mf" style="margin-bottom:14px">
        <label>Idea del video</label>
        <textarea id="vid-idea" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;resize:vertical;min-height:72px;width:100%" placeholder="Ej: Mostrar el proceso de blanqueamiento dental paso a paso, desde que el paciente llega hasta el resultado final..."></textarea>
      </div>

      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px">
        <button data-click="generateVidScript" style="padding:8px 20px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">✦ Generar script</button>
        <button data-click="quickVidScript|gancho" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Solo el gancho</button>
        <button data-click="quickVidScript|cta" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Solo el CTA</button>
        <button data-click="quickVidScript|completo_ads" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Video para Ads</button>
        <button data-click="quickVidScript|variantes" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">3 variantes</button>
      </div>

      <div class="avi-resp" id="avi-resp-videos" style="display:none"></div>
      <div id="vid-script-copy-wrap" style="display:none;margin-top:8px;gap:8px;align-items:center">
        <button data-click="copyVidScript" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">📋 Copiar script</button>
        <span id="vid-script-copy-confirm" style="font-size:11px;color:var(--g);display:none">✓ Copiado</span>
      </div>

      <!-- BOTONES DE HERRAMIENTA — aparecen despues de generar el script -->
      <div id="vid-tool-btns" style="display:none;margin-top:14px;border-top:1px solid var(--br);padding-top:14px">
        <div style="font-size:11px;color:var(--m);margin-bottom:8px">Generar prompt optimizado para cada herramienta →</div>
        <div style="display:flex;gap:6px;flex-wrap:wrap">
          <button data-click="generateToolPrompt|runway" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Runway Gen-4</button>
          <button data-click="generateToolPrompt|kling" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Kling AI</button>
          <button data-click="generateToolPrompt|hailuo" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Hailuo AI</button>
          <button data-click="generateToolPrompt|veo3" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Veo 3</button>
          <button data-click="generateToolPrompt|seedance" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Seedance</button>
          <button data-click="generateToolPrompt|heygen" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">HeyGen</button>
          <button data-click="generateToolPrompt|pika" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Pika 2.0</button>
          <button data-click="generateToolPrompt|sora" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Sora</button>
          <button data-click="generateToolPrompt|luma" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Luma</button>
        </div>
        <div class="avi-resp" id="avi-resp-tool-prompt" style="display:none;margin-top:10px"></div>
        <div id="vid-tool-copy-wrap" style="display:none;margin-top:8px;gap:8px;align-items:center">
          <button id="vid-copy-btn" data-click="copyToolPrompt" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--green);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Copiar prompt</button>
          <span id="vid-copy-confirm" style="font-size:11px;color:var(--g);display:none">✓ Copiado</span>
        </div>
      </div>
    </div>

    <!-- MODO: POTENCIAR TOMAS PROPIAS -->
    <div id="vid-form-tomas" class="card" style="display:none">
      <div class="chd"><div class="ctit">🎥 Potenciar tomas propias</div><div style="font-size:11px;color:var(--m)">Describe tu footage y AVI genera el prompt para animarlo o mejorarlo</div></div>

      <div class="g2" style="margin-bottom:12px">
        <div class="mf">
          <label>Plataforma destino</label>
          <select id="vid-tomas-plataforma" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
            <option value="tiktok">TikTok</option>
            <option value="reels">Instagram Reels</option>
            <option value="shorts">YouTube Shorts</option>
            <option value="facebook">Facebook Video</option>
            <option value="linkedin">LinkedIn Video</option>
          </select>
        </div>
        <div class="mf">
          <label>Objetivo de las tomas</label>
          <select id="vid-tomas-objetivo" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
            <option value="animar">Animar / dar movimiento</option>
            <option value="mejorar">Mejorar calidad visual</option>
            <option value="transformar">Transformar estilo</option>
            <option value="ensamblar">Ensamblar en secuencia</option>
            <option value="efectos">Agregar efectos cinematicos</option>
          </select>
        </div>
      </div>

      <!-- SUBIR FRAMES / IMAGENES -->
      <div class="mf" style="margin-bottom:12px">
        <label>Sube frames o capturas de tus tomas <span style="color:var(--m);font-weight:400">(JPG, PNG — AVI las analiza con vision)</span></label>
        <div id="vid-tomas-dropzone" data-click="_scTrigger|vid-tomas-files" style="border:2px dashed var(--br2);border-radius:9px;padding:18px;text-align:center;cursor:pointer;margin-top:6px;transition:border-color .2s" onmouseover="this.style.borderColor='var(--red)'" onmouseout="this.style.borderColor='var(--br2)'">
          <div style="font-size:22px;margin-bottom:4px">🖼</div>
          <div style="font-size:12px;color:var(--m)">Click para seleccionar imagenes</div>
          <div id="vid-tomas-filenames" style="font-size:11px;color:var(--g);margin-top:6px"></div>
        </div>
        <input type="file" id="vid-tomas-files" multiple accept="image/*" style="display:none" data-change="onTomasFilesChange|__el">
      </div>

      <!-- SUBIR VIDEO -->
      <div class="mf" style="margin-bottom:12px">
        <label>O sube el video completo <span style="color:var(--m);font-weight:400">(MP4, MOV — max 100MB)</span></label>
        <div style="display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;margin-top:6px">
          <label for="vid-tomas-video" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--red);color:#fff;cursor:pointer;font-family:var(--fb);white-space:nowrap">📎 Seleccionar video</label>
          <input type="file" id="vid-tomas-video" accept="video/mp4,video/quicktime,video/webm" style="display:none" data-change="onTomasVideoChange|__el">
          <span id="vid-tomas-videoname" style="font-size:12px;color:var(--m)">Sin archivo</span>
          <span id="vid-tomas-upload-status" style="font-size:11px;color:var(--g)"></span>
        </div>
      </div>

      <div class="mf" style="margin-bottom:12px">
        <label>Describe tus tomas <span style="color:var(--m);font-weight:400">(o complementa las imagenes subidas)</span></label>
        <textarea id="vid-tomas-desc" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;resize:vertical;min-height:80px;width:100%" placeholder="Ej: Toma 1: doctor en consultorio. Toma 2: close-up del procedimiento. Toma 3: paciente sonriendo..."></textarea>
      </div>

      <div class="mf" style="margin-bottom:14px">
        <label>Estilo visual deseado</label>
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:5px">
          <div class="stag" data-click="_scToggleClass|__el|active">Cinematico</div>
          <div class="stag" data-click="_scToggleClass|__el|active">UGC natural</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Vibrante / colorido</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Minimalista</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Oscuro / misterioso</div>
          <div class="stag" data-click="_scToggleClass|__el|active">Energetico / rapido</div>
        </div>
      </div>

      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px">
        <button data-click="generateTomasScript" style="padding:8px 20px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">✦ Analizar y generar script</button>
        <button data-click="quickTomasPrompt|runway" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Prompt directo Runway</button>
        <button data-click="quickTomasPrompt|kling" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Prompt directo Kling</button>
      </div>

      <div class="avi-resp" id="avi-resp-tomas" style="display:none"></div>
      <div id="vid-tomas-script-copy-wrap" style="display:none;margin-top:8px;gap:8px;align-items:center">
        <button data-click="copyTomasScript" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">📋 Copiar plan de edición</button>
        <span id="vid-tomas-script-copy-confirm" style="font-size:11px;color:var(--g);display:none">✓ Copiado</span>
      </div>

      <div id="vid-tomas-tool-btns" style="display:none;margin-top:14px;border-top:1px solid var(--br);padding-top:14px">
        <div style="font-size:11px;color:var(--m);margin-bottom:8px">Optimizar prompt para herramienta →</div>
        <div style="display:flex;gap:6px;flex-wrap:wrap">
          <button data-click="generateTomasToolPrompt|runway" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Runway Gen-4</button>
          <button data-click="generateTomasToolPrompt|kling" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Kling AI</button>
          <button data-click="generateTomasToolPrompt|hailuo" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Hailuo AI</button>
          <button data-click="generateTomasToolPrompt|veo3" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Veo 3</button>
          <button data-click="generateTomasToolPrompt|wan" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Wan 2.1</button>
          <button data-click="generateTomasToolPrompt|capcut" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">CapCut IA</button>
          <button data-click="generateTomasToolPrompt|descript" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Descript</button>
        </div>
        <div class="avi-resp" id="avi-resp-tomas-tool" style="display:none;margin-top:10px"></div>
        <div id="vid-tomas-copy-wrap" style="display:none;margin-top:8px;gap:8px;align-items:center">
          <button data-click="copyTomasPrompt" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--green);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Copiar prompt</button>
          <span id="vid-tomas-copy-confirm" style="font-size:11px;color:var(--g);display:none">✓ Copiado</span>
        </div>
      </div>
    </div>

    <!-- MODO: REPLICAR REFERENCIA -->
    <div id="vid-form-ref" class="card" style="display:none">
      <div class="chd"><div class="ctit">🔗 Replicar video de referencia</div><div style="font-size:11px;color:var(--m)">AVI deconstruye el video y adapta la formula al negocio del cliente</div></div>

      <div class="mf" style="margin-bottom:12px">
        <label>Link del video de referencia</label>
        <input type="text" id="vid-ref-link" placeholder="https://www.tiktok.com/@usuario/video/... o YouTube, Instagram, Facebook" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
        <div style="font-size:11px;color:var(--m);margin-top:4px">Soporta: TikTok · Instagram · YouTube · Facebook · LinkedIn</div>
      </div>

      <div class="mf" style="margin-bottom:12px">
        <label>Describe que pasa en el video y que te gusta de el</label>
        <textarea id="vid-ref-desc" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;resize:vertical;min-height:90px;width:100%" placeholder="Ej: Un dentista empieza diciendo 'esto arruinó mi sonrisa por 10 años' y muestra el antes. El gancho es brutal. En 20s ya está mostrando el resultado. Tiene musica de suspenso y subtitulos en rojo. Quiero replicar ese mismo nivel de urgencia para mi clinica..."></textarea>
      </div>

      <!-- SUBIR VIDEO DE REFERENCIA COMPLETO -->
      <div class="mf" style="margin-bottom:12px">
        <label>Sube el video de referencia <span style="color:var(--m);font-weight:400">(MP4, MOV — recomendado)</span></label>
        <div style="display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;margin-top:6px">
          <label for="vid-ref-video" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--red);color:#fff;cursor:pointer;font-family:var(--fb);white-space:nowrap">📎 Subir video</label>
          <input type="file" id="vid-ref-video" accept="video/mp4,video/quicktime,video/webm" style="display:none" data-change="_scVidRefUpload">
          <span id="vid-ref-videoname" style="font-size:12px;color:var(--m)">Sin archivo</span>
          <span id="vid-ref-upload-status" style="font-size:11px;color:var(--g)"></span>
        </div>
        <div style="font-size:11px;color:var(--m);margin-top:4px">El servidor extrae los frames automaticamente y AVI analiza el video completo</div>
      </div>

      <!-- O SUBIR CAPTURAS DEL VIDEO DE REFERENCIA -->
      <div class="mf" style="margin-bottom:12px">
        <label>O sube capturas del video <span style="color:var(--m);font-weight:400">(opcional — si no tienes el archivo)</span></label>
        <div id="vid-ref-dropzone" data-click="_scTrigger|vid-ref-files" style="border:2px dashed var(--br2);border-radius:9px;padding:14px;text-align:center;cursor:pointer;margin-top:6px;transition:border-color .2s" onmouseover="this.style.borderColor='var(--red)'" onmouseout="this.style.borderColor='var(--br2)'">
          <div style="font-size:20px;margin-bottom:3px">📸</div>
          <div style="font-size:12px;color:var(--m)">Capturas de pantalla del video (JPG, PNG)</div>
          <div id="vid-ref-filenames" style="font-size:11px;color:var(--g);margin-top:4px"></div>
        </div>
        <input type="file" id="vid-ref-files" multiple accept="image/*" style="display:none" data-change="onRefFilesChange|__el">
      </div>

      <div class="g2" style="margin-bottom:14px">
        <div class="mf">
          <label>Plataforma destino del nuevo video</label>
          <select id="vid-ref-plataforma" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
            <option value="tiktok">TikTok</option>
            <option value="reels">Instagram Reels</option>
            <option value="shorts">YouTube Shorts</option>
            <option value="facebook">Facebook Video</option>
            <option value="linkedin">LinkedIn Video</option>
          </select>
        </div>
        <div class="mf">
          <label>Duracion objetivo</label>
          <select id="vid-ref-duracion" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
            <option value="15">15 segundos</option>
            <option value="30" selected>30 segundos</option>
            <option value="60">60 segundos</option>
          </select>
        </div>
      </div>

      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px">
        <button data-click="analyzeReference" style="padding:8px 20px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">✦ Deconstruir y adaptar</button>
        <button data-click="analyzeReference|solo_hooks" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Solo replicar el gancho</button>
        <button data-click="analyzeReference|formula" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Solo la formula</button>
      </div>

      <div class="avi-resp" id="avi-resp-ref" style="display:none"></div>
      <div id="vid-ref-script-copy-wrap" style="display:none;margin-top:8px;gap:8px;align-items:center">
        <button data-click="copyRefScript" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">📋 Copiar análisis</button>
        <span id="vid-ref-script-copy-confirm" style="font-size:11px;color:var(--g);display:none">✓ Copiado</span>
      </div>

      <div id="vid-ref-tool-btns" style="display:none;margin-top:14px;border-top:1px solid var(--br);padding-top:14px">
        <div style="font-size:11px;color:var(--m);margin-bottom:8px">Generar prompt para herramienta →</div>
        <div style="display:flex;gap:6px;flex-wrap:wrap">
          <button data-click="generateRefToolPrompt|runway" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Runway Gen-4</button>
          <button data-click="generateRefToolPrompt|kling" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Kling AI</button>
          <button data-click="generateRefToolPrompt|hailuo" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Hailuo AI</button>
          <button data-click="generateRefToolPrompt|veo3" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Veo 3</button>
          <button data-click="generateRefToolPrompt|seedance" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Seedance</button>
          <button data-click="generateRefToolPrompt|heygen" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">HeyGen</button>
          <button data-click="generateRefToolPrompt|pika" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Pika 2.0</button>
        </div>
        <div class="avi-resp" id="avi-resp-ref-tool" style="display:none;margin-top:10px"></div>
        <div style="margin-top:8px;display:flex;gap:8px;align-items:center">
          <button data-click="copyRefPrompt" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--green);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Copiar prompt</button>
          <span id="vid-ref-copy-confirm" style="font-size:11px;color:var(--g);display:none">✓ Copiado</span>
        </div>
      </div>
    </div>

  </div>

  <!-- TAB: HOOKS -->
  <div class="vid-panel" id="vpanel-hooks" style="display:none">
    <div class="card">
      <div class="chd"><div class="ctit">Investigador de Hooks</div></div>

      <div class="g2" style="margin-bottom:12px">
        <div class="mf">
          <label>Nicho / Industria</label>
          <input type="text" id="vid-hook-nicho" placeholder="Ej: odontología, fitness, restaurante..." style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
        </div>
        <div class="mf">
          <label>Emoción objetivo</label>
          <select id="vid-hook-emocion" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
            <option value="curiosidad">Curiosidad</option>
            <option value="fomo">Miedo a perder (FOMO)</option>
            <option value="sorpresa">Sorpresa</option>
            <option value="identificacion">Identificación / Empatía</option>
            <option value="autoridad">Autoridad / Confianza</option>
            <option value="urgencia">Urgencia</option>
          </select>
        </div>
      </div>

      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px">
        <button data-click="generateHooks" style="padding:8px 20px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">✦ Generar 10 hooks</button>
        <button data-click="generateHooks|tendencias" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Hooks trending</button>
        <button data-click="generateHooks|preguntas" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Formato pregunta</button>
        <button data-click="generateHooks|datos" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Con datos/estadísticas</button>
      </div>

      <div class="avi-resp" id="avi-resp-hooks" style="display:none"></div>
      <div id="vid-hooks-copy-wrap" style="display:none;margin-top:8px;gap:8px;align-items:center">
        <button data-click="copyHooksResult" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">📋 Copiar hooks</button>
        <span id="vid-hooks-copy-confirm" style="font-size:11px;color:var(--g);display:none">✓ Copiado</span>
      </div>
    </div>

    <!-- Fórmulas rápidas -->
    <div class="card">
      <div class="chd"><div class="ctit">Fórmulas de hooks probadas</div></div>
      <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px" id="hooks-formulas">
        <?php
        $formulas=[
          ['Lo que nadie te dice sobre [tema]...','curiosidad'],
          ['Cometimos este error y nos costó [X]...','fomo'],
          ['Si tienes [problema], para. Mira esto.','identificacion'],
          ['En [X días] logramos [resultado]...','sorpresa'],
          ['El 90% de la gente hace esto mal...','autoridad'],
          ['Esto cambiará la forma en que ves [tema]...','curiosidad'],
          ['La razón por la que [resultado negativo]...','identificacion'],
          ['Nadie habla de esto y es increíble...','curiosidad'],
        ];
        foreach($formulas as [$txt,$tipo]):
        ?>
        <div data-click="usarFormula|__el" data-formula="<?= htmlspecialchars($txt) ?>" style="padding:10px 12px;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;font-size:12px;color:var(--t);cursor:pointer;transition:border-color .15s" onmouseover="this.style.borderColor='var(--red)'" onmouseout="this.style.borderColor='var(--br2)'">
          <div style="font-size:11px;color:var(--m);margin-bottom:3px"><?= $tipo ?></div>
          <?= htmlspecialchars($txt) ?>
        </div>
        <?php endforeach ?>
      </div>
    </div>
  </div>

  <!-- TAB: HERRAMIENTAS IA -->
  <div class="vid-panel" id="vpanel-herramientas" style="display:none">
    <div class="metrics">
      <div class="metric"><div class="ml"><div class="md" style="background:var(--red)"></div>Fotorrealismo extremo</div><div class="mv">Hailuo AI</div><div class="mdelta">MiniMax · Top 2026</div></div>
      <div class="metric"><div class="ml"><div class="md" style="background:var(--b)"></div>Video + Audio IA</div><div class="mv">Veo 3</div><div class="mdelta">Google · Sonido nativo</div></div>
      <div class="metric"><div class="ml"><div class="md" style="background:var(--g)"></div>Personajes TikTok</div><div class="mv">Seedance</div><div class="mdelta">ByteDance · Coherencia</div></div>
      <div class="metric"><div class="ml"><div class="md" style="background:var(--purple)"></div>Video cinematico</div><div class="mv">Runway Gen-4</div><div class="mdelta">Premium · Pro</div></div>
    </div>

    <div class="card">
      <div class="chd"><div class="ctit">¿Qué herramienta usar?</div></div>
      <div style="overflow-x:auto">
        <table class="tbl">
          <thead><tr><th>Herramienta</th><th>Mejor para</th><th>Fortaleza</th><th>Precio</th></tr></thead>
          <tbody>
            <tr><td><b>Hailuo AI</b></td><td>Fotorrealismo, personas, redes sociales</td><td>Top calidad 2026 — MiniMax</td><td>Freemium</td></tr>
            <tr><td><b>Veo 3</b></td><td>Video con audio nativo generado por IA</td><td>Único: sonido + imagen sincronizados</td><td>Google One AI</td></tr>
            <tr><td><b>Seedance</b></td><td>Personajes consistentes, TikTok-nativo</td><td>Coherencia facial — ByteDance</td><td>Freemium</td></tr>
            <tr><td><b>Wan 2.1</b></td><td>Imagen a video, productos animados</td><td>Open source, gratuito — Alibaba</td><td>Gratis</td></tr>
            <tr><td><b>Runway Gen-4</b></td><td>Videos cinematicos, transiciones</td><td>Calidad visual premium</td><td>$12/mes+</td></tr>
            <tr><td><b>Kling AI v2</b></td><td>Movimiento realista, personas</td><td>Fluidez de movimiento</td><td>$8/mes+</td></tr>
            <tr><td><b>Sora (OpenAI)</b></td><td>Escenas complejas, narrativa</td><td>Coherencia temporal</td><td>ChatGPT Pro</td></tr>
            <tr><td><b>HeyGen</b></td><td>Avatares, presentadores IA</td><td>Portavoces realistas</td><td>$24/mes+</td></tr>
            <tr><td><b>Pika 2.0</b></td><td>Animaciones rápidas, loops</td><td>Velocidad de producción</td><td>$8/mes+</td></tr>
            <tr><td><b>Luma Dream Machine</b></td><td>Videos 3D, productos</td><td>Renderizado de objetos</td><td>$30/mes+</td></tr>
            <tr><td><b>CapCut + IA</b></td><td>Edición rápida, subtítulos auto</td><td>Integración con TikTok</td><td>Gratis / Pro</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="card">
      <div class="chd"><div class="ctit">✦ AVI recomienda la herramienta ideal</div></div>
      <div class="mf" style="margin-bottom:10px">
        <label>Describe el video que necesitas</label>
        <input type="text" id="vid-tool-q" placeholder="Ej: Video con presentador explicando servicio, tono profesional, 30s para Reels..." style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%"
          onkeydown="if(event.key==='Enter')askAVI('vid-tool')">
      </div>
      <button data-click="askAVI|vid-tool" style="padding:8px 20px;border-radius:7px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Recomendar herramienta →</button>
      <div class="avi-resp" id="avi-resp-vid-tool" style="display:none"></div>
      <div id="vid-herr-tool-btns" style="display:none;margin-top:14px;border-top:1px solid var(--br);padding-top:14px">
        <div style="font-size:11px;color:var(--m);margin-bottom:8px">Generar prompt optimizado para:</div>
        <div style="display:flex;flex-wrap:wrap;gap:6px">
          <button data-click="generateToolPromptFromHerr|runway" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Runway Gen-4</button>
          <button data-click="generateToolPromptFromHerr|kling" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Kling AI</button>
          <button data-click="generateToolPromptFromHerr|hailuo" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Hailuo AI</button>
          <button data-click="generateToolPromptFromHerr|veo3" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Veo 3</button>
          <button data-click="generateToolPromptFromHerr|seedance" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Seedance</button>
          <button data-click="generateToolPromptFromHerr|heygen" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">HeyGen</button>
          <button data-click="generateToolPromptFromHerr|pika" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Pika 2.0</button>
          <button data-click="generateToolPromptFromHerr|sora" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Sora</button>
          <button data-click="generateToolPromptFromHerr|luma" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Luma</button>
          <button data-click="generateToolPromptFromHerr|wan" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Wan 2.1</button>
        </div>
        <div class="avi-resp" id="avi-resp-herr-tool" style="display:none;margin-top:10px"></div>
        <div id="vid-herr-copy-wrap" style="display:none;margin-top:8px;gap:8px;align-items:center">
          <button data-click="copyHerrPrompt" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Copiar prompt</button>
          <span id="vid-herr-copy-confirm" style="display:none;font-size:12px;color:var(--g)">✓ Copiado</span>
        </div>
      </div>
    </div>
  </div>

  <!-- TAB: CALENDARIO -->
  <div class="vid-panel" id="vpanel-calendario" style="display:none">
    <div class="card">
      <div class="chd">
        <div class="ctit">✦ Planificador de contenido en video</div>
        <div style="font-size:11px;color:var(--m)">AVI genera calendarios, frecuencias óptimas y estrategia de publicación</div>
      </div>

      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px">
        <button data-click="quickVidCalendar|mes" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">📅 Plan mensual</button>
        <button data-click="quickVidCalendar|frecuencia" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">⏱ Frecuencia óptima</button>
        <button data-click="quickVidCalendar|tendencias" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">🔥 Tendencias del nicho</button>
        <button data-click="quickVidCalendar|horarios" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">🕐 Mejores horarios</button>
        <button data-click="quickVidCalendar|pilares" style="padding:8px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">🏛 Pilares de contenido</button>
      </div>

      <div class="mf" style="margin-bottom:10px">
        <label>Pregunta personalizada</label>
        <div style="display:flex;gap:8px;margin-top:5px">
          <input type="text" id="vid-cal-q" placeholder="Ej: crea un plan de contenido para el mes con 3 videos/semana en TikTok e Instagram Reels..." style="flex:1;background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none" onkeydown="if(event.key==='Enter')quickVidCalendar('custom')">
          <button data-click="quickVidCalendar|custom" style="padding:8px 18px;border-radius:7px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb);white-space:nowrap">✦ Generar</button>
        </div>
      </div>

      <div class="avi-resp" id="avi-resp-vid-cal" style="display:none"></div>
      <div id="vid-cal-copy-wrap" style="display:none;margin-top:8px;gap:8px;align-items:center">
        <button data-click="copyVidCalResult" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">📋 Copiar calendario</button>
        <span id="vid-cal-copy-confirm" style="font-size:11px;color:var(--g);display:none">✓ Copiado</span>
      </div>
    </div>

    <div class="card">
      <div class="chd"><div class="ctit">Frecuencia recomendada por plataforma</div></div>
      <div style="overflow-x:auto">
        <table class="tbl">
          <thead><tr><th>Plataforma</th><th>Mínimo</th><th>Óptimo</th><th>Mejor día/hora (LATAM)</th></tr></thead>
          <tbody>
            <tr><td><b>TikTok</b></td><td>3× semana</td><td>5-7× semana</td><td>Mar, Jue, Vie · 18-21h</td></tr>
            <tr><td><b>Instagram Reels</b></td><td>2× semana</td><td>4-5× semana</td><td>Mar, Mié · 11h, 19h</td></tr>
            <tr><td><b>YouTube Shorts</b></td><td>2× semana</td><td>3-4× semana</td><td>Vie, Sáb · 15-18h</td></tr>
            <tr><td><b>Facebook Video</b></td><td>2× semana</td><td>3× semana</td><td>Mié, Jue · 12-14h</td></tr>
            <tr><td><b>LinkedIn Video</b></td><td>1× semana</td><td>2-3× semana</td><td>Mar, Jue · 8-10h</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- TAB: ESTRATEGIA -->
  <div class="vid-panel" id="vpanel-estrategia" style="display:none">
    <div class="avi">
      <div class="avi-hd"><div class="avi-orb">✦</div><div><div class="avi-name">AVI · Estrategia de video</div><div class="avi-sub">Calendario, frecuencia, formatos y KPIs recomendados para el cliente</div></div></div>
      <div class="avi-row">
        <input class="avi-in" id="vid-strat-q" placeholder="Ej: crea un plan de contenido en video para el mes para una clínica dental..." onkeydown="if(event.key==='Enter')askAVI('vid-strat')">
        <button class="avi-send" data-click="askAVI|vid-strat">Enviar</button>
      </div>
      <div class="avi-resp" id="avi-resp-vid-strat"></div>
    </div>

    <div class="card">
      <div class="chd"><div class="ctit">Formatos y métricas por plataforma</div></div>
      <div style="overflow-x:auto">
        <table class="tbl">
          <thead><tr><th>Plataforma</th><th>Formato</th><th>Duración óptima</th><th>KPI principal</th></tr></thead>
          <tbody>
            <tr><td><b>TikTok</b></td><td>9:16 vertical</td><td>15-60 seg</td><td>Watch time, shares</td></tr>
            <tr><td><b>Instagram Reels</b></td><td>9:16 vertical</td><td>15-30 seg</td><td>Saves, reach</td></tr>
            <tr><td><b>YouTube Shorts</b></td><td>9:16 vertical</td><td>30-60 seg</td><td>Views, subscribers</td></tr>
            <tr><td><b>LinkedIn Video</b></td><td>16:9 o 1:1</td><td>30-90 seg</td><td>Views, engagement</td></tr>
            <tr><td><b>Facebook Video</b></td><td>1:1 o 16:9</td><td>60-180 seg</td><td>Views, reach</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<script>
function quickVidCalendar(type) {
  const ctx = (document.getElementById('videos-ctx')||{}).value || '';
  const q   = (document.getElementById('vid-cal-q')||{}).value || '';
  const prompts = {
    mes:        'Crea un plan de contenido en video completo para el próximo mes. Incluye: cuántos videos por semana, tipos de video (educativo, testimonial, trending, behind the scenes), temas específicos para el negocio del cliente, orden de publicación por plataforma, y KPIs a medir. Organiza en formato tabla semanal.',
    frecuencia: 'Recomienda la frecuencia óptima de publicación de videos por plataforma (TikTok, Instagram Reels, YouTube Shorts, Facebook) para este negocio específico. Justifica por qué esa frecuencia funciona para el nicho y qué puede pasar si se publica de más o de menos.',
    tendencias: 'Lista las 5-7 tendencias de formato de video que están funcionando ahora mismo en TikTok e Instagram Reels para este tipo de negocio. Para cada tendencia: nombre, descripción, cómo adaptarla al negocio, y ejemplo concreto de idea de video.',
    horarios:   'Cuáles son los mejores días y horarios para publicar videos para este negocio en cada plataforma (TikTok, Reels, Shorts, Facebook). Usa horario Colombia/Latinoamérica (UTC-5). Explica por qué esos horarios funcionan mejor para la audiencia objetivo.',
    pilares:    'Define los 4-5 pilares de contenido en video para este negocio. Para cada pilar: nombre del pilar, objetivo, tipos de video que incluye, frecuencia recomendada y 3 ejemplos concretos de ideas de video.',
    custom:     q || 'Crea un plan de contenido en video para el próximo mes',
  };
  const prompt = prompts[type] || prompts.custom;
  const respEl = document.getElementById('avi-resp-vid-cal');
  const cpWrap = document.getElementById('vid-cal-copy-wrap');
  if (respEl) respEl.style.display = 'none';
  if (cpWrap) cpWrap.style.display = 'none';
  callAVI(prompt, ctx, 'avi-resp-vid-cal', 'Planificando contenido...', 'videos', () => {
    if (cpWrap) cpWrap.style.display = 'flex';
  });
}
function copyVidCalResult() {
  const el = document.getElementById('avi-resp-vid-cal');
  if (!el) return;
  navigator.clipboard.writeText(el.innerText || el.textContent || '').then(() => {
    const c = document.getElementById('vid-cal-copy-confirm');
    if (c) { c.style.display = 'inline'; setTimeout(() => c.style.display = 'none', 2000); }
  });
}
</script>
