<!DOCTYPE html>
<html lang="es" class="h-full bg-slate-950">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Taller TÃ©cnico: ImplementaciÃ³n y ConfiguraciÃ³n de Agentes Inteligentes para la ElaboraciÃ³n de DocumentaciÃ³n AcadÃ©mica</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
            display: ['"Space Grotesk"', 'sans-serif'],
          },
          colors: {
            brand: {
              50: '#f0fdfa',
              100: '#ccfbf1',
              200: '#99f6e4',
              300: '#5eead4',
              400: '#2dd4bf',
              500: '#14b8a6',
              600: '#0d9488',
              700: '#0f766e',
              800: '#115e59',
              900: '#134e4a',
            },
            accent: {
              400: '#38bdf8',
              500: '#0ea5e9',
              600: '#0284c7',
            }
          },
          boxShadow: {
            'glow-cyan': '0 0 35px -5px rgba(14, 165, 233, 0.25)',
            'glow-teal': '0 0 35px -5px rgba(20, 184, 166, 0.3)',
          }
        }
      }
    }
  </script>
  <style>
    /* Fondo con Mesh Gradient de Alta DefiniciÃ³n */
    .bg-mesh-dark {
      background-color: #070a12;
      background-image: 
        radial-gradient(at 15% 15%, rgba(14, 165, 233, 0.12) 0px, transparent 45%),
        radial-gradient(at 85% 20%, rgba(20, 184, 166, 0.10) 0px, transparent 40%),
        radial-gradient(at 50% 80%, rgba(99, 102, 241, 0.08) 0px, transparent 50%);
      background-attachment: fixed;
    }
    /* Scrollbar profesional */
    .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 9999px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }
  </style>
</head>
<body class="bg-mesh-dark text-slate-100 font-sans antialiased min-h-screen flex flex-col justify-between selection:bg-brand-500 selection:text-slate-950">
  <script>
    const CONFIG = {
      adminUser: 'admin',
      adminPass: 'academico2026',
      targetQuota: 15,
      storageKey: 'preinscripciones_agentes_academicos_v4'
    };
  </script>
  <header class="border-b border-slate-800/80 bg-slate-950/70 backdrop-blur-xl sticky top-0 z-40">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 h-16 flex justify-between items-center">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-xl bg-gradient-to-tr from-brand-600 via-teal-500 to-accent-400 p-[1px] shadow-glow-teal flex items-center justify-center">
          <div class="h-full w-full bg-slate-950 rounded-[11px] flex items-center justify-center">
            <svg class="w-5 h-5 text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
          </div>
        </div>
        <div>
          <div class="flex items-center gap-2">
            <span class="text-sm font-extrabold text-white tracking-tight font-display">Agentes AcadÃ©micos IA</span>
            <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-brand-500/15 text-brand-300 border border-brand-500/30 uppercase tracking-wider font-display">100% PrÃ¡ctico</span>
          </div>
          <span class="text-[11px] text-slate-400 block -mt-0.5">GestiÃ³n y AutomatizaciÃ³n Curricular</span>
        </div>
      </div>
      <button onclick="toggleAdminModal(true)" class="inline-flex items-center gap-2 text-xs font-semibold text-slate-300 hover:text-white bg-slate-900/80 hover:bg-slate-800 border border-slate-800 hover:border-slate-700 px-3.5 py-1.5 rounded-xl transition duration-200">
        <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
        </svg>
        <span class="hidden sm:inline">Panel Organizador</span>
      </button>
    </div>
  </header>
  <main class="max-w-5xl mx-auto px-4 sm:px-6 py-8 sm:py-12 flex-grow space-y-8">
    <section class="relative bg-slate-900/60 border border-slate-800/90 rounded-3xl p-6 sm:p-9 backdrop-blur-xl shadow-2xl overflow-hidden">
      <div class="absolute -right-20 -top-20 w-72 h-72 bg-gradient-to-br from-brand-500/15 to-accent-500/10 rounded-full blur-3xl pointer-events-none"></div>
      <div class="flex flex-wrap items-center gap-2.5 mb-5">
        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-extrabold uppercase tracking-wider bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 font-display shadow-sm">
          <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
          100% PRÃCTICO
        </span>
        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-extrabold uppercase tracking-wider bg-cyan-500/20 text-cyan-300 border border-cyan-500/40 font-display shadow-sm">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
          CULMINACIÃ“N CON PRODUCTO TERMINADO
        </span>
        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider bg-amber-500/20 text-amber-300 border border-amber-500/40 font-display">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
          Requisito: Computadora PortÃ¡til
        </span>
      </div>
      <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-white tracking-tight leading-tight mb-4 font-display">
        ImplementaciÃ³n y configuraciÃ³n de agentes inteligentes para la elaboraciÃ³n de documentaciÃ³n acadÃ©mica
      </h1>
      <p class="text-slate-300 text-sm sm:text-base leading-relaxed mb-6">
        Aprende a formular flujos estructurados y parametrizar agentes de inteligencia artificial orientados a la producciÃ³n estandarizada de estructuras curriculares, secuencias didÃ¡cticas y reportes institucionales, <strong class="text-white font-semibold">concluyendo las sesiones con un producto tangible terminado y listo para su aplicaciÃ³n</strong>.
      </p>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5 p-4 sm:p-5 rounded-2xl bg-slate-950/70 border border-slate-800/90 text-sm mb-6">
        <div class="flex items-center gap-3.5">
          <div class="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center shrink-0 border border-slate-800 text-brand-400">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
          </div>
          <div>
            <span class="block text-[10px] font-bold text-slate-400 uppercase tracking-wider">Fechas de ejecuciÃ³n</span>
            <span class="text-white font-semibold text-xs sm:text-sm">Lunes 9 y Martes 10 de Noviembre</span>
          </div>
        </div>
        <div class="flex items-center gap-3.5">
          <div class="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center shrink-0 border border-slate-800 text-accent-400">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
          </div>
          <div>
            <span class="block text-[10px] font-bold text-slate-400 uppercase tracking-wider">Horario de conexiÃ³n</span>
            <span class="text-white font-semibold text-xs sm:text-sm">19:00 a 21:00 (Hora Bolivia) â€¢ 4h prÃ¡cticas</span>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-3.5 mb-6">
        <div class="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 p-4 text-xs text-emerald-200 flex flex-col justify-between">
          <div>
            <div class="flex items-center gap-2 mb-1.5">
              <div class="p-1.5 rounded-lg bg-emerald-500/20 text-emerald-300">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
              </div>
              <span class="font-extrabold text-white text-xs uppercase tracking-wide font-display">100% PRÃCTICO</span>
            </div>
            <p class="text-emerald-200/90 leading-relaxed text-[11px]">
              InmersiÃ³n tÃ©cnica aplicada desde el inicio: parametrizaciÃ³n de prompts, flujos de automatizaciÃ³n y configuraciÃ³n paso a paso en vivo.
            </p>
          </div>
        </div>
        <div class="rounded-2xl border border-cyan-500/30 bg-cyan-500/10 p-4 text-xs text-cyan-200 flex flex-col justify-between">
          <div>
            <div class="flex items-center gap-2 mb-1.5">
              <div class="p-1.5 rounded-lg bg-cyan-500/20 text-cyan-300">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
              </div>
              <span class="font-extrabold text-white text-xs uppercase tracking-wide font-display">PRODUCTO TERMINADO</span>
            </div>
            <p class="text-cyan-200/90 leading-relaxed text-[11px]">
              MetodologÃ­a basada en proyectos tangibles: culminarÃ¡s el taller con tu propia documentaciÃ³n acadÃ©mica elaborada y lista.
            </p>
          </div>
        </div>
        <div class="rounded-2xl border border-amber-500/30 bg-amber-500/10 p-4 text-xs text-amber-200 flex flex-col justify-between">
          <div>
            <div class="flex items-center gap-2 mb-1.5">
              <div class="p-1.5 rounded-lg bg-amber-500/20 text-amber-300">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
              </div>
              <span class="font-extrabold text-white text-xs uppercase tracking-wide font-display">COMPUTADORA PORTÃTIL</span>
            </div>
            <p class="text-amber-200/90 leading-relaxed text-[11px]">
              <strong class="text-white">Requisito indispensable:</strong> contar con computadora portÃ¡til (laptop) con conexiÃ³n estable para ejecutar las prÃ¡cticas.
            </p>
          </div>
        </div>
      </div>
      <div class="pt-4 border-t border-slate-800/80">
        <div class="flex justify-between items-center text-xs mb-2.5">
          <span class="text-slate-300 font-medium flex items-center gap-2">
            <span class="relative flex h-2.5 w-2.5">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
              <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-brand-500"></span>
            </span>
            Cupo mÃ­nimo para confirmaciÃ³n de grupo
          </span>
          <span class="font-bold text-brand-300 font-display text-sm" id="progress-status">0 / 15 registrados</span>
        </div>
        <div class="w-full bg-slate-950 h-3 rounded-full overflow-hidden p-0.5 border border-slate-800">
          <div id="progress-fill" class="bg-gradient-to-r from-brand-500 via-teal-400 to-accent-400 h-full rounded-full transition-all duration-700 shadow-glow-teal" style="width: 0%"></div>
        </div>
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-2.5 text-[11px] text-slate-400 gap-1">
          <span>* La preinscripciÃ³n es libre y no involucra pago anticipado.</span>
          <span id="seats-left-text" class="text-brand-400 font-semibold">15 cupos requeridos</span>
        </div>
      </div>
    </section>
    <form id="enrollment-form" onsubmit="submitForm(event)" class="bg-slate-900/60 border border-slate-800/90 rounded-3xl p-6 sm:p-9 backdrop-blur-xl shadow-2xl space-y-8">
      <div>
        <div class="mb-3">
          <span class="text-xs font-extrabold uppercase tracking-widest text-indigo-400 font-display block">TALLER PRÃCTICO ESPECIALIZADO</span>
          <span class="text-sm font-bold text-slate-200">Docentes & Gestores AcadÃ©micos</span>
        </div>
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between pb-3 mb-4 border-b border-slate-800 gap-1">
          <div class="flex items-center gap-2">
            <svg class="w-5 h-5 text-indigo-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
            </svg>
            <h3 class="text-sm sm:text-base font-bold text-white font-display tracking-tight">
              2. SELECCIONA TU PAQUETE DE INTERÃ‰S <span class="text-rose-400">*</span>
            </h3>
          </div>
          <span class="text-xs font-semibold text-indigo-400">Precios en Bolivianos (Bs)</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-5 pt-3">
          <label class="package-card relative flex flex-col justify-between p-5 lg:p-6 rounded-3xl border border-slate-800 bg-slate-950/70 hover:border-slate-700 cursor-pointer transition-all duration-200 has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-500/10 has-[:checked]:shadow-lg">
            <input type="radio" name="plan" value="Solo Curso en Vivo (200 Bs)" required class="sr-only" onchange="updateCardSelection()">
            <div>
              <div class="flex justify-between items-center mb-3">
                <span class="text-xs font-extrabold uppercase tracking-wider text-slate-400 font-display">OPCIÃ“N A</span>
                <div class="radio-indicator w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center transition">
                  <div class="w-2.5 h-2.5 rounded-full bg-transparent transition"></div>
                </div>
              </div>
              <div class="mb-3">
                <div class="flex items-baseline gap-1">
                  <span class="text-3xl sm:text-4xl font-extrabold text-white font-display">200</span>
                  <span class="text-sm font-bold text-slate-400">Bs</span>
                </div>
                <h4 class="text-sm font-bold text-slate-100 mt-1">Solo Curso PrÃ¡ctico</h4>
              </div>
              <div class="border-t border-slate-800/80 my-4"></div>
              <ul class="space-y-3 text-xs text-slate-300">
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                  <span>4 Horas de clases en vivo</span>
                </li>
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                  <span>Plantillas y Prompts listos</span>
                </li>
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                  <span>100% PrÃ¡ctico aplicado</span>
                </li>
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                  <span>CulminaciÃ³n con Producto Terminado</span>
                </li>
              </ul>
            </div>
            <div class="mt-5 pt-3 border-t border-slate-800/60 text-[11px] text-slate-500 font-medium text-center">
              Acceso a 2 sesiones sincrÃ³nicas
            </div>
          </label>
          <label class="package-card relative flex flex-col justify-between p-5 lg:p-6 rounded-3xl border-2 border-indigo-500 bg-gradient-to-b from-indigo-500/15 via-slate-950/80 to-slate-950 cursor-pointer transition-all duration-200 shadow-xl has-[:checked]:border-indigo-400 has-[:checked]:ring-2 has-[:checked]:ring-indigo-500/40">
            <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 whitespace-nowrap px-3.5 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-wider bg-gradient-to-r from-indigo-600 via-indigo-500 to-purple-600 text-white shadow-lg font-display border border-indigo-300/30">
              RECOMENDADO Â· MEJOR AHORRO
            </div>
            <input type="radio" name="plan" value="Curso + SuscripciÃ³n Anual Gemini Plus (250 Bs)" checked required class="sr-only" onchange="updateCardSelection()">
            <div>
              <div class="flex justify-between items-center mb-3 pt-1">
                <span class="text-xs font-extrabold uppercase tracking-wider text-indigo-400 font-display">OPCIÃ“N B</span>
                <div class="radio-indicator w-5 h-5 rounded-full border-2 border-indigo-400 flex items-center justify-center transition">
                  <div class="w-2.5 h-2.5 rounded-full bg-indigo-400 transition"></div>
                </div>
              </div>
              <div class="mb-3">
                <div class="flex items-baseline gap-1">
                  <span class="text-3xl sm:text-4xl font-extrabold text-white font-display">250</span>
                  <span class="text-sm font-bold text-indigo-300">Bs</span>
                </div>
                <h4 class="text-sm font-bold text-white mt-1">Curso + Gemini Plus (1 AÃ±o)</h4>
              </div>
              <div class="border-t border-indigo-500/30 my-4"></div>
              <ul class="space-y-3 text-xs text-slate-200">
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="9" stroke-width="2"/>
                    <path d="M8.5 12l2.5 2.5L15.5 9.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span class="font-medium text-white">Todo lo incluido en el curso</span>
                </li>
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-amber-400 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                  </svg>
                  <span class="font-bold text-amber-300">1 AÃ±o completo de Gemini Plus</span>
                </li>
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="9" stroke-width="2"/>
                    <path d="M8.5 12l2.5 2.5L15.5 9.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span>CulminaciÃ³n con Producto Terminado</span>
                </li>
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="9" stroke-width="2"/>
                    <path d="M8.5 12l2.5 2.5L15.5 9.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span>Soporte de configuraciÃ³n</span>
                </li>
              </ul>
            </div>
            <div class="mt-5 pt-3 border-t border-indigo-500/30 text-[11px] text-emerald-400 font-semibold text-center">
              Acceso completo al taller + IA por 12 meses
            </div>
          </label>
          <label class="package-card relative flex flex-col justify-between p-5 lg:p-6 rounded-3xl border border-slate-800 bg-slate-950/70 hover:border-slate-700 cursor-pointer transition-all duration-200 has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-500/10 has-[:checked]:shadow-lg">
            <input type="radio" name="plan" value="Solo SuscripciÃ³n Gemini Plus 1 AÃ±o (50 Bs)" required class="sr-only" onchange="updateCardSelection()">
            <div>
              <div class="flex justify-between items-center mb-3">
                <span class="text-xs font-extrabold uppercase tracking-wider text-slate-400 font-display">OPCIÃ“N C</span>
                <div class="radio-indicator w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center transition">
                  <div class="w-2.5 h-2.5 rounded-full bg-transparent transition"></div>
                </div>
              </div>
              <div class="mb-3">
                <div class="flex items-baseline gap-1">
                  <span class="text-3xl sm:text-4xl font-extrabold text-white font-display">50</span>
                  <span class="text-sm font-bold text-slate-400">Bs</span>
                </div>
                <h4 class="text-sm font-bold text-slate-100 mt-1">Solo SuscripciÃ³n Gemini Plus</h4>
              </div>
              <div class="border-t border-slate-800/80 my-4"></div>
              <ul class="space-y-3 text-xs text-slate-300">
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                  <span>Acceso por 12 meses</span>
                </li>
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-slate-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                  <span class="text-slate-400">Sin acceso al taller en vivo</span>
                </li>
                <li class="flex items-start gap-2.5">
                  <svg class="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                  <span>GuÃ­a rÃ¡pida de activaciÃ³n</span>
                </li>
              </ul>
            </div>
            <div class="mt-5 pt-3 border-t border-slate-800/60 text-[11px] text-slate-500 font-medium text-center">
              12 meses de herramienta IA
            </div>
          </label>
        </div>
      </div>
      <div>
        <label class="text-base font-bold text-white font-display flex items-center gap-2 mb-4">
          <span class="w-6 h-6 rounded-lg bg-brand-500/20 text-brand-400 border border-brand-500/30 flex items-center justify-center text-xs">2</span>
          Datos de contacto del participante
        </label>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="sm:col-span-2">
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Nombre y Apellidos completos *</label>
            <input type="text" id="fullname" required placeholder="Ej: Lic. Marco Antonio Torrico" class="w-full px-4 py-3 rounded-xl bg-slate-950/80 border border-slate-800 text-slate-100 text-sm focus:border-brand-500 focus:ring-1 focus:ring-brand-500 outline-none transition placeholder:text-slate-600">
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">TelÃ©fono celular de contacto *</label>
            <div class="relative">
              <input type="tel" id="phone" required placeholder="Ej: 71234567" class="w-full pl-4 pr-10 py-3 rounded-xl bg-slate-950/80 border border-slate-800 text-slate-100 text-sm focus:border-brand-500 focus:ring-1 focus:ring-brand-500 outline-none transition placeholder:text-slate-600">
              <div class="absolute right-3 top-3 text-slate-500 pointer-events-none">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
              </div>
            </div>
            <span class="text-[10px] text-slate-500 mt-1 block">Para informarte oportunamente al consolidar el cupo</span>
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">
              Correo ElectrÃ³nico Personal (Gmail) <span class="text-rose-400">*</span>
            </label>
            <div class="relative">
              <input type="email" id="email" required placeholder="ejemplo.personal@gmail.com" class="w-full pl-4 pr-10 py-3 rounded-xl bg-slate-950/80 border border-slate-800 text-slate-100 text-sm focus:border-brand-500 focus:ring-1 focus:ring-brand-500 outline-none transition placeholder:text-slate-600">
              <div class="absolute right-3 top-3 text-slate-500 pointer-events-none">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/></svg>
              </div>
            </div>
            <div class="mt-1.5 flex items-start gap-1.5 text-[11px] text-amber-300/95 leading-tight">
              <svg class="w-3.5 h-3.5 text-amber-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
              <span><strong>Cuenta personal de Gmail:</strong> No usar correos corporativos ni institucionales (indispensable para activaciÃ³n de herramientas IA).</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <label class="text-base font-bold text-white font-display flex items-center gap-2 mb-1">
          <span class="w-6 h-6 rounded-lg bg-brand-500/20 text-brand-400 border border-brand-500/30 flex items-center justify-center text-xs">3</span>
          DocumentaciÃ³n acadÃ©mica que requieres automatizar
        </label>
        <p class="text-xs text-slate-400 mb-3.5">Marca los documentos que necesitas generar para orientar las actividades prÃ¡cticas de tu producto final:</p>
        <div class="space-y-2.5 bg-slate-950/60 border border-slate-800/80 p-4 sm:p-5 rounded-2xl">
          <label class="flex items-start gap-3 text-xs sm:text-sm text-slate-200 hover:text-white cursor-pointer py-1 transition">
            <input type="checkbox" name="interest" value="DocumentaciÃ³n acadÃ©mica (programas analÃ­ticos, planes de clase)" class="mt-0.5 rounded-md bg-slate-900 border-slate-700 text-brand-500 focus:ring-brand-500 w-4 h-4">
            <span>DocumentaciÃ³n acadÃ©mica (programas analÃ­ticos, planes de clase y asignaturas)</span>
          </label>
          <label class="flex items-start gap-3 text-xs sm:text-sm text-slate-200 hover:text-white cursor-pointer py-1 transition">
            <input type="checkbox" name="interest" value="Cronogramas teÃ³rico-prÃ¡cticos" class="mt-0.5 rounded-md bg-slate-900 border-slate-700 text-brand-500 focus:ring-brand-500 w-4 h-4">
            <span>Cronogramas teÃ³rico-prÃ¡cticos y calendarios de avance temÃ¡tico</span>
          </label>
          <label class="flex items-start gap-3 text-xs sm:text-sm text-slate-200 hover:text-white cursor-pointer py-1 transition">
            <input type="checkbox" name="interest" value="RedacciÃ³n correcta de competencias" class="mt-0.5 rounded-md bg-slate-900 border-slate-700 text-brand-500 focus:ring-brand-500 w-4 h-4">
            <span>RedacciÃ³n y formulaciÃ³n rigurosa de competencias y resultados de aprendizaje</span>
          </label>
          <label class="flex items-start gap-3 text-xs sm:text-sm text-slate-200 hover:text-white cursor-pointer py-1 transition">
            <input type="checkbox" name="interest" value="Informes de gestiÃ³n" class="mt-0.5 rounded-md bg-slate-900 border-slate-700 text-brand-500 focus:ring-brand-500 w-4 h-4">
            <span>Informes de gestiÃ³n acadÃ©mica, acreditaciÃ³n y balances de periodo</span>
          </label>
          <div class="pt-1.5 border-t border-slate-800/80">
            <label class="flex items-start gap-3 text-xs sm:text-sm text-slate-200 hover:text-white cursor-pointer py-1">
              <input type="checkbox" id="check-other" onchange="handleOtherToggle(this)" class="mt-0.5 rounded-md bg-slate-900 border-slate-700 text-brand-500 focus:ring-brand-500 w-4 h-4">
              <span class="font-medium text-brand-400">Otros (especifique su requerimiento particular)</span>
            </label>
            <div id="other-field" class="hidden mt-2.5 ml-7">
              <input type="text" id="other-detail" placeholder="Â¿QuÃ© otro documento acadÃ©mico necesitas automatizar?" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-slate-200 text-xs focus:border-brand-500 outline-none">
            </div>
          </div>
        </div>
      </div>
      <div class="border-t border-slate-800 pt-6 space-y-5">
        <label class="flex items-start gap-3 cursor-pointer">
          <input type="checkbox" required class="mt-1 rounded-md bg-slate-900 border-slate-700 text-brand-500 focus:ring-brand-500 w-4 h-4">
          <span class="text-xs text-slate-300 leading-relaxed">
            Confirmo el cumplimiento del requisito indispensable de <strong>contar con computadora portÃ¡til</strong>, entiendo el enfoque <strong>100% PRÃCTICO</strong> orientado a la <strong>CULMINACIÃ“N CON PRODUCTO TERMINADO</strong>, y acepto que la confirmaciÃ³n del grupo estÃ¡ condicionada al cupo mÃ­nimo de <strong>15 participantes</strong> (sin compromiso de pago anticipado).
          </span>
        </label>
        <button type="submit" class="w-full py-4 px-6 rounded-2xl font-bold text-slate-950 bg-gradient-to-r from-brand-400 via-teal-300 to-accent-300 hover:from-brand-300 hover:to-accent-200 active:scale-[0.99] transition-all duration-200 shadow-glow-teal flex items-center justify-center gap-2.5 font-display text-sm sm:text-base">
          <span>Registrar mi PreinscripciÃ³n Oficial</span>
          <svg class="w-5 h-5 text-slate-950" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
          </svg>
        </button>
        <p class="text-center text-[11px] text-slate-500">
          Tus datos se procesan con total confidencialidad para fines exclusivos de coordinaciÃ³n y acceso a este taller.
        </p>
      </div>
    </form>
  </main>
  <div id="modal-success" class="fixed inset-0 bg-slate-950/85 backdrop-blur-md z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-md w-full p-6 sm:p-8 text-center shadow-2xl relative overflow-hidden">
      <div class="w-14 h-14 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-glow-teal">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
        </svg>
      </div>
      <h3 class="text-xl font-bold text-white mb-2 font-display">Â¡PreinscripciÃ³n Registrada con Ã‰xito!</h3>
      <p class="text-xs sm:text-sm text-slate-300 mb-5 leading-relaxed">
        Tu solicitud ha sido incorporada a la lista oficial preliminar. Al alcanzar los <strong class="text-white">15 participantes</strong> mÃ­nimos requeridos, nos comunicaremos contigo oportunamente para coordinar el inicio y acceso al aula en vivo.
      </p>
      <div class="p-3.5 rounded-xl bg-slate-950/80 border border-slate-800 text-left text-xs mb-5 space-y-1.5">
        <div class="text-slate-400">Plan reservado: <strong class="text-brand-300" id="modal-summary-plan">-</strong></div>
        <div class="text-slate-400">Participante: <strong class="text-white" id="modal-summary-name">-</strong></div>
      </div>
      <div class="p-3 rounded-xl bg-brand-500/10 border border-brand-500/20 text-brand-300 text-left text-[11px] mb-6 flex items-start gap-2.5">
        <svg class="w-4 h-4 shrink-0 mt-0.5 text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <span><strong>Recordatorio:</strong> Taller 100% PRÃCTICO con CULMINACIÃ“N CON PRODUCTO TERMINADO. Recuerda disponer de computadora portÃ¡til (laptop) para las sesiones en vivo.</span>
      </div>
      <div>
        <button onclick="document.getElementById('modal-success').classList.add('hidden')" class="w-full py-3.5 rounded-xl bg-gradient-to-r from-brand-500 to-accent-500 text-slate-950 font-bold text-xs sm:text-sm tracking-wide transition shadow-md hover:opacity-95 font-display">
          Aceptar y Finalizar
        </button>
      </div>
    </div>
  </div>
  <div id="modal-admin" class="fixed inset-0 bg-slate-950/90 backdrop-blur-md z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-4xl w-full p-6 sm:p-7 shadow-2xl flex flex-col max-h-[90vh]">
      <div id="admin-auth-panel" class="max-w-xs mx-auto w-full py-8 text-center">
        <div class="h-12 w-12 rounded-2xl bg-slate-800 text-brand-400 border border-slate-700 flex items-center justify-center mx-auto mb-4">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
          </svg>
        </div>
        <h3 class="text-lg font-bold text-white mb-1 font-display">Acceso Organizador</h3>
        <p class="text-xs text-slate-400 mb-6">Consulta la nÃ³mina de preinscritos en tiempo real</p>
        <form onsubmit="handleAdminLogin(event)" class="space-y-3.5">
          <div>
            <input type="text" id="admin-user-input" required placeholder="Usuario (admin)" class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-slate-100 text-xs outline-none focus:border-brand-500 text-center">
          </div>
          <div>
            <input type="password" id="admin-pass-input" required placeholder="ContraseÃ±a (academico2026)" class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-slate-100 text-xs outline-none focus:border-brand-500 text-center">
          </div>
          <button type="submit" class="w-full py-2.5 rounded-xl bg-gradient-to-r from-brand-500 to-accent-500 text-slate-950 text-xs font-bold font-display hover:opacity-95 transition">Ingresar al MÃ³dulo</button>
          <button type="button" onclick="toggleAdminModal(false)" class="text-xs text-slate-500 hover:text-slate-400 block mx-auto pt-1">Cancelar</button>
        </form>
      </div>
      <div id="admin-content-panel" class="hidden flex flex-col h-full">
        <div class="flex flex-wrap justify-between items-center pb-4 border-b border-slate-800 gap-3">
          <div>
            <div class="flex items-center gap-2.5">
              <h3 class="text-base font-bold text-white font-display">NÃ³mina de Preinscritos</h3>
              <span class="text-xs font-bold px-2.5 py-0.5 rounded-full bg-brand-500/15 text-brand-300 border border-brand-500/30" id="admin-total-counter">0 participantes</span>
            </div>
            <span class="text-xs text-slate-400" id="admin-revenue-estimate">EstimaciÃ³n potencial: 0 Bs</span>
          </div>
          <div class="flex items-center gap-2">
            <button onclick="downloadCSV()" class="px-3.5 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl text-xs font-semibold flex items-center gap-1.5 transition shadow-sm">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
              <span>Exportar Excel (CSV)</span>
            </button>
            <button onclick="toggleAdminModal(false)" class="text-slate-400 hover:text-white p-1 rounded-lg">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
          </div>
        </div>
        <div class="overflow-y-auto custom-scrollbar flex-grow py-3 space-y-2.5" id="admin-table-container">
        </div>
        <div class="pt-3.5 border-t border-slate-800 flex justify-between items-center text-xs">
          <button onclick="purgeData()" class="text-rose-400 hover:text-rose-300 text-[11px] underline">Restablecer registros de prueba</button>
          <button onclick="toggleAdminModal(false)" class="px-4 py-1.5 bg-slate-800 text-slate-300 rounded-xl text-xs hover:bg-slate-700">Cerrar</button>
        </div>
      </div>
    </div>
  </div>
  <footer class="border-t border-slate-800/80 bg-slate-950/80 py-6 text-center text-xs text-slate-500">
    <div class="max-w-4xl mx-auto px-4">
      ImplementaciÃ³n y configuraciÃ³n de agentes inteligentes para la elaboraciÃ³n de documentaciÃ³n acadÃ©mica â€¢ 100% PrÃ¡ctico con CulminaciÃ³n con Producto Terminado â€¢ Lunes 9 y Martes 10 de Noviembre
    </div>
  </footer>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      refreshProgressBar();
      updateCardSelection();
    });
    function updateCardSelection() {
      document.querySelectorAll('input[name="plan"]').forEach(input => {
        const card = input.closest('label');
        const dot = card?.querySelector('.radio-indicator div');
        const ring = card?.querySelector('.radio-indicator');
        if (input.checked) {
          if (dot) dot.className = 'w-2.5 h-2.5 rounded-full bg-indigo-400 transition';
          if (ring) ring.className = 'radio-indicator w-5 h-5 rounded-full border-2 border-indigo-400 flex items-center justify-center transition';
        } else {
          if (dot) dot.className = 'w-2.5 h-2.5 rounded-full bg-transparent transition';
          if (ring) ring.className = 'radio-indicator w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center transition';
        }
      });
    }
    function getStore() {
      return JSON.parse(localStorage.getItem(CONFIG.storageKey) || '[]');
    }
    function setStore(data) {
      localStorage.setItem(CONFIG.storageKey, JSON.stringify(data));
      refreshProgressBar();
    }
    function refreshProgressBar() {
      const records = getStore();
      const count = records.length;
      const pct = Math.min(Math.round((count / CONFIG.targetQuota) * 100), 100);
      const fill = document.getElementById('progress-fill');
      const status = document.getElementById('progress-status');
      const seatsText = document.getElementById('seats-left-text');
      if (fill) fill.style.width = pct + '%';
      if (status) status.innerText = `${count} / ${CONFIG.targetQuota} registrados`;
      if (seatsText) {
        const remaining = CONFIG.targetQuota - count;
        if (remaining > 0) {
          seatsText.innerText = `Faltan ${remaining} registros para confirmar el grupo`;
          seatsText.className = 'text-brand-400 font-semibold';
        } else {
          seatsText.innerText = 'Â¡Meta alcanzada! El grupo se encuentra confirmado para apertura.';
          seatsText.className = 'text-emerald-400 font-bold';
        }
      }
    }
    function handleOtherToggle(chk) {
      const container = document.getElementById('other-field');
      const input = document.getElementById('other-detail');
      if (chk.checked) {
        container.classList.remove('hidden');
        input.focus();
      } else {
        container.classList.add('hidden');
        input.value = '';
      }
    }
    function submitForm(e) {
      e.preventDefault();
      const selectedPlan = document.querySelector('input[name="plan"]:checked')?.value || '';
      const name = document.getElementById('fullname').value.trim();
      const phone = document.getElementById('phone').value.trim();
      const email = document.getElementById('email').value.trim();
      // ValidaciÃ³n estricta: solo cuentas personales de Gmail
      if (!email.toLowerCase().endsWith('@gmail.com') && !email.toLowerCase().endsWith('@googlemail.com')) {
        alert('AtenciÃ³n: El correo electrÃ³nico debe ser una cuenta personal @gmail.com (no institucional ni corporativa) para asegurar la activaciÃ³n de las herramientas de IA.');
        document.getElementById('email').focus();
        return;
      }
      const interests = Array.from(document.querySelectorAll('input[name="interest"]:checked')).map(el => el.value);
      const isOtherChecked = document.getElementById('check-other').checked;
      const otherVal = document.getElementById('other-detail').value.trim();
      if (isOtherChecked && otherVal) {
        interests.push(`Otro: ${otherVal}`);
      }
      const entry = {
        id: Date.now(),
        timestamp: new Date().toLocaleString('es-BO'),
        name,
        phone,
        email,
        plan: selectedPlan,
        interests: interests.length > 0 ? interests.join('; ') : 'General'
      };
      const data = getStore();
      data.push(entry);
      setStore(data);
      // Mostrar resumen en el modal
      document.getElementById('modal-summary-plan').innerText = selectedPlan;
      document.getElementById('modal-summary-name').innerText = name;
      // Apertura limpia del modal sin redirecciones externas
      document.getElementById('modal-success').classList.remove('hidden');
      // Limpieza de campos
      document.getElementById('enrollment-form').reset();
      handleOtherToggle(document.getElementById('check-other'));
    }
    // Modal de AdministraciÃ³n y AutenticaciÃ³n
    function toggleAdminModal(show) {
      const modal = document.getElementById('modal-admin');
      if (show) {
        document.getElementById('admin-auth-panel').classList.remove('hidden');
        document.getElementById('admin-content-panel').classList.add('hidden');
        document.getElementById('admin-user-input').value = '';
        document.getElementById('admin-pass-input').value = '';
        modal.classList.remove('hidden');
      } else {
        modal.classList.add('hidden');
      }
    }
    function handleAdminLogin(e) {
      e.preventDefault();
      const u = document.getElementById('admin-user-input').value.trim();
      const p = document.getElementById('admin-pass-input').value.trim();
      if (u === CONFIG.adminUser && p === CONFIG.adminPass) {
        document.getElementById('admin-auth-panel').classList.add('hidden');
        document.getElementById('admin-content-panel').classList.remove('hidden');
        renderAdminRecords();
      } else {
        alert('Credenciales incorrectas');
      }
    }
    function renderAdminRecords() {
      const list = getStore();
      const container = document.getElementById('admin-table-container');
      const counterEl = document.getElementById('admin-total-counter');
      const revenueEl = document.getElementById('admin-revenue-estimate');
      counterEl.innerText = `${list.length} registrados`;
      // Calcular monto estimado
      let totalBs = 0;
      list.forEach(item => {
        if (item.plan.includes('250')) totalBs += 250;
        else if (item.plan.includes('220')) totalBs += 220;
        else if (item.plan.includes('200')) totalBs += 200;
        else if (item.plan.includes('50')) totalBs += 50;
      });
      revenueEl.innerText = `Ingreso potencial proyectado: ${totalBs} Bs (${list.length} solicitudes)`;
      if (list.length === 0) {
        container.innerHTML = `<div class="p-8 text-center text-xs text-slate-500">No existen registros almacenados en este navegador todavÃ­a.</div>`;
        return;
      }
      container.innerHTML = list.map(item => `
        <div class="p-3.5 bg-slate-950/70 border border-slate-800 rounded-2xl text-xs space-y-2">
          <div class="flex justify-between items-start gap-2">
            <div>
              <span class="font-bold text-white text-sm block">${item.name}</span>
              ${item.institution && item.institution !== 'No consignada' ? `<span class="text-slate-400 text-[11px]">${item.institution}</span>` : ''}
            </div>
            <span class="text-[10px] font-bold px-2.5 py-1 rounded-lg bg-brand-500/15 text-brand-300 border border-brand-500/30 font-display">${item.plan}</span>
          </div>
          <div class="text-slate-300 flex flex-wrap gap-x-4 gap-y-1 text-[11px]">
            <span><strong>Celular:</strong> ${item.phone}</span>
            <span><strong>Gmail Personal:</strong> ${item.email}</span>
          </div>
          <div class="text-slate-400 text-[11px] bg-slate-900/60 p-2 rounded-lg border border-slate-800/60">
            <strong class="text-slate-300">Intereses:</strong> ${item.interests}
          </div>
          <div class="text-right text-[10px] text-slate-500">${item.timestamp}</div>
        </div>
      `).reverse().join('');
    }
    function downloadCSV() {
      const list = getStore();
      if (!list.length) {
        alert('No existen registros para exportar');
        return;
      }
      const headers = ['Fecha Registro', 'Nombre Completo', 'TelÃ©fono / Celular', 'Email Personal (Gmail)', 'Plan Seleccionado', 'Intereses Documentales'];
      const rows = list.map(e => [
        `"${e.timestamp}"`,
        `"${e.name}"`,
        `"${e.phone}"`,
        `"${e.email}"`,
        `"${e.plan}"`,
        `"${e.interests.replace(/"/g, '""')}"`
      ]);
      // Incluye \uFEFF para que Microsoft Excel lo abra correctamente en UTF-8 con acentos
      const csvData = 'data:text/csv;charset=utf-8,\uFEFF' + [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
      const uri = encodeURI(csvData);
      const link = document.createElement('a');
      link.href = uri;
      link.download = `preinscritos_agentes_academicos_${new Date().toISOString().slice(0, 10)}.csv`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
    function purgeData() {
      if (confirm('Â¿Desea limpiar los registros de prueba almacenados? Esta acciÃ³n es irreversible.')) {
        localStorage.removeItem(CONFIG.storageKey);
        renderAdminRecords();
        refreshProgressBar();
      }
    }
  </script>
</body>
</html>
