Fábrica SaaS

Mundial 2026 Engine

Nombre del Comercio

WhatsApp del Dueño (Activaciones)

Código de país + área + número, sin espacios ni guiones.

WhatsApp de Soporte Técnico (tuyo)

El dueño del local puede contactarte desde el panel con un toque.

Color de Marca

Logo del Negocio (Opcional)

Premios Iniciales (editables luego desde el Admin)

El dueño puede cambiarlos en cualquier momento desde su Panel Admin sin regenerar la app.

Entradas Máximas por Jugador

PIN de Acceso al Panel Admin (opcional)

Si lo dejás vacío el Admin se abre directo sin contraseña.

Plan / Licencia

¿Qué deseas generar ahora?

📋 Actualizar Licencia / Regenerar

Usá el mismo nombre de comercio y logo, modificá lo que necesités y generá. El sistema sobreescribe el archivo automáticamente en su carpeta correspondiente.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="{{theme_hex}}">
    <title>PRODE - {{empresa}}</title>
    <link rel="icon" href="data:image/svg+xml;base64,{{app_icon_base64}}">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
    (function(){
        var m={name:'Prode {{empresa}}',short_name:'Prode {{empresa}}',
            start_url:window.location.href,display:'standalone',
            orientation:'portrait',background_color:'#f1f5f9',theme_color:'{{theme_hex}}',
            icons:[{src:'data:image/svg+xml;base64,{{app_icon_base64}}',sizes:'any',type:'image/svg+xml'}]};
        var b=new Blob([JSON.stringify(m)],{type:'application/manifest+json'});
        var l=document.createElement('link');l.rel='manifest';l.href=URL.createObjectURL(b);
        document.head.appendChild(l);
    })();
    if('serviceWorker' in navigator){
        var sw='self.addEventListener("fetch",function(e){});';
        var b=new Blob([sw],{type:'application/javascript'});
        navigator.serviceWorker.register(URL.createObjectURL(b)).catch(function(){});
    }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;900&display=swap');
        :root { --theme:{{theme_hex}}; }
        body { font-family:'Archivo',sans-serif; background:#f1f5f9; padding-bottom:90px; -webkit-tap-highlight-color:transparent; }
        .app-header { background:var(--theme); color:white; padding:1rem 1.2rem; position:sticky; top:0; z-index:50; }
        .tab-content { display:none; padding:1rem; }
        .tab-content.active { display:block; animation:fadeIn 0.3s ease-in-out; }
        @keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
        .btn-nav { color:#94a3b8; background:none; border:none; display:flex; flex-direction:column; align-items:center; padding:4px 8px; cursor:pointer; }
        .btn-nav.active { color:var(--theme); }
        .btn-pred { border:2px solid #e2e8f0; padding:0.75rem; border-radius:1rem; flex:1; font-weight:900; font-size:11px; color:#94a3b8; transition:all 0.2s; cursor:pointer; background:white; }
        .btn-pred.selected { background:var(--theme); color:white; border-color:var(--theme); }
        .btn-pred:disabled { opacity:0.5; cursor:not-allowed; }
        #splash { background:var(--theme); }
        .entrada-select { background:white; border:2px solid #e2e8f0; border-radius:0.75rem; padding:0.5rem 0.75rem; font-family:'Archivo',sans-serif; font-weight:900; font-size:13px; color:#334155; outline:none; cursor:pointer; width:100%; margin-top:6px; }
        .entrada-select:focus { border-color:var(--theme); }
        .vote-hint { font-size:10px; color:#94a3b8; text-align:center; margin-top:6px; font-style:italic; }
        .premio-item { padding:12px 0; border-bottom:1px solid #f1f5f9; font-weight:700; color:#334155; font-size:15px; }
        .premio-item:last-child { border-bottom:none; }
        .hist-card { background:white; border-radius:1.25rem; padding:14px 16px; margin-bottom:10px; border:1px solid #f1f5f9; }
        .hist-equipos { display:flex; justify-content:space-between; align-items:center; font-weight:900; font-size:13px; color:#334155; margin-bottom:8px; }
        .hist-resultado { font-size:11px; color:#64748b; font-weight:700; }
        .hist-voto { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:900; margin-top:6px; }
        .badge-ok  { background:#d1fae5; color:#065f46; padding:3px 10px; border-radius:999px; font-size:10px; font-weight:900; }
        .badge-err { background:#fee2e2; color:#991b1b; padding:3px 10px; border-radius:999px; font-size:10px; font-weight:900; }
        .badge-pen { background:#f1f5f9; color:#94a3b8; padding:3px 10px; border-radius:999px; font-size:10px; font-weight:900; }
        .section-title { font-size:10px; font-weight:900; color:#94a3b8; text-transform:uppercase; letter-spacing:0.08em; margin:16px 0 8px; padding-left:4px; }
        .ranking-own { background:linear-gradient(135deg,rgba(16,185,129,0.08),rgba(5,150,105,0.04)); border-left:3px solid var(--theme); }
        .btn-compartir { width:100%; background:var(--theme); color:white; font-weight:900; font-size:13px; padding:14px; border-radius:1rem; border:none; cursor:pointer; margin-bottom:16px; display:flex; align-items:center; justify-content:center; gap:8px; }
        .btn-compartir:active { opacity:0.85; }
        .ayuda-card { background:white; border-radius:1.25rem; padding:20px; margin-bottom:12px; border:1px solid #f1f5f9; }
        .ayuda-title { font-size:13px; font-weight:900; color:#0f172a; margin-bottom:10px; }
        .ayuda-row { display:flex; align-items:flex-start; gap:10px; padding:6px 0; border-bottom:1px solid #f8fafc; font-size:13px; color:#475569; }
        .ayuda-row:last-child { border-bottom:none; }
        .ayuda-pts { font-weight:900; font-size:16px; min-width:28px; }
        .ayuda-tc { font-size:11px; color:#94a3b8; line-height:1.6; }
        @keyframes pulse-btn { 0%,100%{opacity:1} 50%{opacity:0.6} }
        .retrying { animation:pulse-btn 1s ease-in-out infinite; }
        .install-banner { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); z-index:100;
            background:#0f172a; color:white; border:1px solid rgba(255,255,255,0.15);
            border-radius:1rem; padding:10px 16px; display:none; align-items:center;
            gap:10px; font-family:'Archivo',sans-serif; font-size:12px; font-weight:700;
            box-shadow:0 8px 32px rgba(0,0,0,0.4); white-space:nowrap; cursor:pointer; }
        .install-banner:active { opacity:0.85; }
        .ios-banner { position:fixed; bottom:80px; left:12px; right:12px; z-index:100;
            background:#0f172a; color:white; border:1px solid rgba(255,255,255,0.15);
            border-radius:1rem; padding:14px 16px; display:none;
            font-family:'Archivo',sans-serif; font-size:11px; line-height:1.6;
            box-shadow:0 8px 32px rgba(0,0,0,0.4); }
        .ios-close { float:right; cursor:pointer; opacity:0.6; font-size:16px; line-height:1; }
    </style>
</head>
<body>

<div id="splash" class="fixed inset-0 z-[9999] flex flex-col items-center justify-center transition-opacity duration-500">
    <div class="text-7xl mb-6 animate-bounce">🏆</div>
    <h1 class="text-white font-black text-2xl uppercase italic tracking-widest text-center px-4">{{empresa}}</h1>
    <div class="mt-8 border-4 border-white border-t-transparent rounded-full w-10 h-10 animate-spin opacity-80"></div>
</div>

<header class="app-header">
    <div id="header-inner"></div>
</header>
<script>
(function(){
    var logo="{{logo_base64}}",pos="{{logo_position}}",hi=document.getElementById('header-inner');
    var imgStyle='width:44px;height:44px;border-radius:50%;object-fit:cover;border:2.5px solid rgba(255,255,255,0.45);flex-shrink:0;';
    if(logo&&logo.length>100){
        if(pos==='left'){
            hi.style.cssText='display:flex;align-items:center;gap:12px;padding:0 4px;';
            hi.innerHTML='<img src="'+logo+'" style="'+imgStyle+'"><span style="font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.1rem;">{{empresa}}</span>';
        } else {
            hi.style.cssText='display:flex;flex-direction:column;align-items:center;gap:4px;';
            hi.innerHTML='<img src="'+logo+'" style="'+imgStyle+'"><span style="font-weight:900;font-style:italic;text-transform:uppercase;font-size:0.85rem;">{{empresa}}</span>';
        }
    } else {
        hi.style.cssText='display:flex;align-items:center;justify-content:center;';
        hi.innerHTML='<h1 style="font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.1rem;">{{empresa}}</h1>';
    }
})();
</script>

<main id="tab-votar" class="tab-content active">
    <div class="bg-white p-4 rounded-2xl shadow-sm mb-4 border border-gray-100">
        <label class="text-[10px] font-black text-slate-400 uppercase tracking-wide">Tu Nombre Completo</label>
        <input type="text" id="user_name" oninput="onNameInput(this.value)"
            class="w-full font-black border-b-2 border-slate-100 py-2 outline-none text-slate-800 text-lg"
            placeholder="Ingresá tu nombre...">
        <div style="margin-top:12px;">
            <label class="text-[10px] font-black text-slate-400 uppercase tracking-wide">Tu WhatsApp (Opcional)</label>
            <input type="tel" id="user_wa" inputmode="numeric"
                style="font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;border:none;border-bottom:2px solid #f1f5f9;padding:8px 0;width:100%;outline:none;color:#475569;background:transparent;"
                placeholder="Ej: 5493512345678 — para que el organizador te contacte">
        </div>
        <div id="entrada-wrap" style="display:{{mostrar_selector_entrada}};margin-top:12px;">
            <label class="text-[10px] font-black text-slate-400 uppercase tracking-wide">Número de Entrada</label>
            <select id="nro_entrada" class="entrada-select" onchange="onEntradaChange()">{{opciones_entrada}}</select>
            <p style="font-size:10px;color:#94a3b8;margin-top:4px;font-style:italic;">Cada entrada es una boleta independiente.</p>
        </div>
    </div>

<div id="panel-bloqueo" class="bg-slate-900 text-white p-8 rounded-[2rem] text-center space-y-4 shadow-2xl">
        <span class="text-5xl">🔒</span>
        <h2 class="font-black text-xl uppercase italic">Falta Activación</h2>
        <p class="text-xs text-slate-400">Ingresá tu nombre, elegí tu entrada y pedile al administrador que te habilite.</p>
        <button onclick="solicitarActivacion()" id="btn_solicitar"
            class="w-full bg-emerald-500 text-white font-black py-4 rounded-xl uppercase text-[10px] shadow-lg shadow-emerald-500/20">
            Solicitar Activación
        </button>
    </div>

<div id="lista-historial" class="hidden">
        <p class="section-title">📋 Mis resultados anteriores</p>
        <div id="historial-cards"></div>
    </div>
</main>

<main id="tab-ranking" class="tab-content">
    <div id="ranking-compartir-wrap" class="hidden">
        <button class="btn-compartir" onclick="compartirRanking()">
            <span>📤</span><span>Compartir mi posición</span>
        </button>
    </div>
    <div id="tabla-ranking" class="bg-white rounded-2xl shadow-sm overflow-hidden"></div>
</main>

<main id="tab-premios" class="tab-content">
    <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-emerald-100">
        <div class="text-center mb-6">
            <span style="font-size:3.5rem;display:block;margin-bottom:0.5rem;">🎁</span>
            <h2 class="font-black text-2xl text-slate-800 uppercase italic">¡Nuestros Premios!</h2>
        </div>
        <div id="premios-container"></div>
        <hr style="border-color:rgba(16,185,129,0.2);margin:20px 0;">
        <p class="text-center text-[10px] text-slate-400 font-black uppercase">Seguí sumando puntos para escalar en el ranking</p>
    </div>
</main>

<main id="tab-ayuda" class="tab-content">
    <div class="ayuda-card">
        <p class="ayuda-title">📊 Sistema de puntos</p>
        <div class="ayuda-row">
            <span class="ayuda-pts" style="color:#10b981;">3</span>
            <span><strong>Acierto</strong> — acertás si gana el local, si empata o si gana el visitante. Son 3 puntos.</span>
        </div>
        <div class="ayuda-row">
            <span class="ayuda-pts" style="color:#94a3b8;">0</span>
            <span><strong>Error</strong> — elegiste el resultado equivocado. 0 puntos.</span>
        </div>
        <div class="ayuda-row" style="padding-top:10px;border-bottom:none;font-size:12px;color:#64748b;">
            Para cada partido elegís una de estas tres opciones: <strong>Local</strong> (gana el equipo de casa), <strong>Empate</strong> o <strong>Visitante</strong> (gana el equipo de afuera).
        </div>
    </div>
    <div class="ayuda-card">
        <p class="ayuda-title">⚽ ¿Cómo funciona el Prode?</p>
        <div class="ayuda-row"><span>1.</span><span>Ingresás tu nombre y solicitás activación al organizador.</span></div>
        <div class="ayuda-row"><span>2.</span><span>Una vez habilitado, podés votar el resultado de cada partido antes de que empiece.</span></div>
        <div class="ayuda-row"><span>3.</span><span>Podés cambiar tu voto tantas veces como quieras mientras el partido no haya comenzado.</span></div>
        <div class="ayuda-row"><span>4.</span><span>Al terminar cada partido, los puntos se suman automáticamente al ranking.</span></div>
        <div class="ayuda-row"><span>5.</span><span>Ganás si terminás primero en el ranking al final del torneo.</span></div>
    </div>
    <div class="ayuda-card" style="border-left:3px solid #10b981;">
        <p class="ayuda-title">🟢 ¿Podés sumarte cuando el Mundial ya empezó?</p>
        <p style="font-size:13px;color:#475569;line-height:1.7;">
            ¡Sí! El sistema bloquea los votos partido por partido, no al inicio del torneo.
            Si te sumás en la mitad, no podés votar los partidos que ya se jugaron,
            pero sí todos los que faltan. Los que arrancaron desde el día uno tienen ventaja
            en puntos, pero todavía hay mucho por jugar.
        </p>
    </div>
    <div class="ayuda-card">
        <p class="ayuda-title">📱 ¿Perdiste tu sesión o cambiaste de celular?</p>
        <p style="font-size:13px;color:#475569;line-height:1.7;">
            Ingresá exactamente el mismo nombre con el que te registraste y el sistema
            te va a reconocer. Tus puntos no se pierden, están guardados en el servidor.
            Si tenés dudas, contactá al organizador del Prode.
        </p>
    </div>
    <div class="ayuda-card" style="background:#f8fafc;">
        <p class="ayuda-title" style="color:#64748b;">🛡️ Bases y condiciones</p>
        <p class="ayuda-tc">
            Este es un concurso de habilidad y pronósticos con premios estrictamente promocionales,
            organizado por <strong>{{empresa}}</strong>. La aplicación es una herramienta tecnológica
            provista por terceros. Los premios son responsabilidad exclusiva del comercio organizador.
            La participación implica la aceptación de estas bases.
        </p>
    </div>
</main>

<button id="btn-instalar" class="install-banner" onclick="instalarApp()" style="display:none">
    <span>📲</span><span>Instalar App</span>
</button>
<div id="ios-banner" class="ios-banner" style="display:none">
    <span class="ios-close" onclick="this.parentElement.style.display='none'">✕</span>
    <strong>📲 Instalar en iPhone:</strong><br>
    Tocá el ícono <strong>compartir</strong> (cuadrado con flecha ↑) en Safari y luego
    <strong>"Agregar a pantalla de inicio"</strong>.
</div>

<nav class="fixed bottom-0 left-0 right-0 mx-auto w-full max-w-lg bg-white h-[75px] flex items-center justify-around border-t border-gray-200 z-50">
    <button onclick="switchTab('votar',this)" class="btn-nav active">
        <span class="text-xl mb-1">📝</span><span class="text-[9px] font-black uppercase">Votar</span>
    </button>
    <button onclick="switchTab('ranking',this)" class="btn-nav">
        <span class="text-xl mb-1">🥇</span><span class="text-[9px] font-black uppercase">Ranking</span>
    </button>
    <button onclick="switchTab('premios',this)" class="btn-nav">
        <span class="text-xl mb-1">🎁</span><span class="text-[9px] font-black uppercase">Premios</span>
    </button>
    <button onclick="switchTab('ayuda',this)" class="btn-nav">
        <span class="text-xl mb-1">❓</span><span class="text-[9px] font-black uppercase">Ayuda</span>
    </button>
</nav>

async function solicitarActivacion(){
    playClick();
    var n=obtenerNombreCompleto();
    if(!n){alert('¡Ingresá tu nombre primero!');return;}
    var btn=document.getElementById('btn_solicitar');
    btn.disabled=true;btn.innerText='REGISTRANDO...';
    try{
        await fetch(API,{
            method:'POST',
            body:JSON.stringify({
                empresa:EMPRESA,
                usuario:n,
                id_partido:0,
                prediccion:'PENDIENTE',
                token:TOKEN_PUB,
                wa_jugador:(document.getElementById('user_wa')?document.getElementById('user_wa').value.replace(/\D/g,''):'')
            })
        });
        window.open('https://wa.me/'+WA_ADMIN+'?text=Hola! Soy '+encodeURIComponent(n)+', quiero activar mi cuenta para el Prode de {{empresa}}.');
        btn.innerText='ESPERANDO ACTIVACIÓN...';
    }catch(e){btn.disabled=false;btn.innerText='REINTENTAR';}
}

async function checkStatus(){
    var n=obtenerNombreCompleto();if(!n)return;
    try{
        var r=await fetch(API+'?empresa='+encodeURIComponent(EMPRESA)+'&token='+TOKEN_PUB+'&_t='+Date.now(), {cache: 'no-store'});
        var d=await r.json();
        _lastRanking=d.ranking||[];
        var user=d.ranking.find(function(u){return u.nombre.toLowerCase()===n.toLowerCase();});
        if(user&&user.puntos!=='PENDIENTE'){
            document.getElementById('panel-bloqueo').classList.add('hidden');
            document.getElementById('lista-votar').classList.remove('hidden');
        } else {
            document.getElementById('panel-bloqueo').classList.remove('hidden');
            document.getElementById('lista-votar').classList.add('hidden');
        }
        renderVotar(d.partidos);
        renderHistorial(d.partidos);
        renderRanking(d.ranking, n);
        if(isFirstLoad){
            setTimeout(function(){var sp=document.getElementById('splash');if(sp){sp.style.opacity='0';playSplash();setTimeout(function(){sp.remove();},500);}},800);
            isFirstLoad=false;
        }
    }catch(e){}
}

function ganadorDeGoles(gl, gv){
    if(gl>gv)return 'Local';
    if(gl<gv)return 'Visitante';
    return 'Empate';
}

async function votar(id,pred,btn){
    playClick();
    var n=obtenerNombreCompleto();if(!n){alert('Ingresá tu nombre primero.');return;}
    var allBtns=document.querySelectorAll('.vote-btn-'+id);
    allBtns.forEach(function(b){b.disabled=true;});
    var prev=btn.innerText;btn.innerText='⏳';

async function intentar(intento){
        if(intento>1)btn.classList.add('retrying');
        try{
            var r=await fetch(API,{
                method:'POST',
                body:JSON.stringify({
                    empresa:EMPRESA,
                    usuario:n,
                    id_partido:id,
                    prediccion:pred,
                    token:TOKEN_PUB
                })
            });
            var d=await r.json();
            btn.classList.remove('retrying');
            if(d.ok){localStorage.setItem(votoKey(id),pred);playSuccess();await checkStatus();}
            else{alert(d.error||'No se pudo registrar el voto');btn.innerText=prev;allBtns.forEach(function(b){b.disabled=false;});}
        }catch(e){
            btn.classList.remove('retrying');
            if(intento<2){btn.innerText='↺';setTimeout(function(){intentar(intento+1);},2000);}
            else{alert('Error de conexión. Intentá de nuevo.');btn.innerText=prev;allBtns.forEach(function(b){b.disabled=false;});}
        }
    }
    intentar(1);
}

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin - {{empresa}}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;900&display=swap');
        body { background:#0f172a; color:white; padding-bottom:90px; font-family:'Archivo',sans-serif; }
        .tab-content { display:none; padding:1.5rem; }
        .tab-content.active { display:block; }
        .btn-nav { color:#475569; }
        .btn-nav.active { color:#34d399; }
        textarea.admin-ta { background:#1e293b; border:1px solid #334155; color:white; border-radius:1rem; padding:1rem; width:100%; font-family:'Archivo',sans-serif; font-size:13px; font-weight:600; resize:vertical; min-height:120px; outline:none; transition:border-color 0.2s; }
        textarea.admin-ta:focus { border-color:#10b981; }
        .btn-sm { font-size:11px; font-weight:900; padding:6px 14px; border-radius:8px; cursor:pointer; transition:all 0.2s; }
        .btn-green { background:#10b981; color:white; }
        .btn-green:hover { background:#059669; }
        .btn-green:disabled { opacity:0.6; cursor:not-allowed; }
        .btn-red { background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.3); }
        .btn-red:hover { background:rgba(239,68,68,0.3); }
        .btn-slate { background:#334155; color:#94a3b8; }
        .btn-slate:hover { background:#475569; color:white; }
        .player-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid #1e293b; }
        .player-row:last-child { border-bottom:none; }
    </style>
</head>
<body class="max-w-lg mx-auto">

<header class="p-4 border-b border-slate-800 flex justify-between items-center sticky top-0 bg-slate-900 z-50">
        <div>
            <h1 class="text-lg font-black text-emerald-400 italic uppercase leading-none">🛡️ Admin</h1>
            <p class="text-[10px] text-slate-500 font-bold uppercase">{{empresa}}</p>
        </div>
        <div class="flex gap-2">
            <button onclick="restaurarOcultos()" class="text-[9px] bg-slate-700 px-2 py-1.5 rounded-lg uppercase font-bold text-slate-300">♻️ Ocultos</button>
            <button onclick="load()" class="text-[9px] bg-emerald-600 px-3 py-1.5 rounded-lg uppercase font-bold text-white shadow-lg shadow-emerald-500/20">Refrescar 🟢</button>
        </div>
    </header>

<div>
                <h2 class="text-[10px] font-black text-amber-400 uppercase tracking-widest mb-3">⏳ Esperando Activación</h2>
                <div id="lista-pendientes"></div>
            </div>

<div>
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-[10px] font-black text-emerald-400 uppercase tracking-widest">✅ Jugadores Habilitados</h2>
                    <span id="contador-activos" class="text-[10px] font-black text-slate-500"></span>
                </div>
                <div id="lista-activos"></div>
            </div>
        </div>
    </main>

<main id="tab-stats" class="tab-content">
        <div class="bg-slate-800 p-5 rounded-3xl border border-slate-700 mb-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Ranking Completo</h2>
                <button onclick="descargarCSV()" class="btn-sm btn-slate rounded-lg">⬇️ Exportar CSV</button>
            </div>
            <div id="ranking" class="space-y-2"></div>
        </div>
        <div class="bg-slate-800/50 border border-slate-700 p-4 rounded-2xl">
            <p class="text-[10px] text-slate-500 font-black uppercase tracking-wide mb-1">📊 Sistema de Puntos</p>
            <p class="text-[10px] text-slate-400 leading-relaxed">
                <strong class="text-emerald-400">3 pts</strong> — Acertás el resultado (Local / Empate / Visitante) ·
                <strong class="text-slate-500">0 pts</strong> — Resultado incorrecto
            </p>
        </div>
    </main>

<main id="tab-premios" class="tab-content">
        <div class="bg-slate-800 p-5 rounded-3xl border border-slate-700">
            <h2 class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">🎁 Configurar Premios</h2>
            <p class="text-[10px] text-slate-500 mb-4 leading-relaxed">
                Escribí los premios (uno por línea). Al guardar, los jugadores verán los cambios en 1-2 minutos <strong class="text-emerald-400">sin necesidad de regenerar la app</strong>.
            </p>
            ##ABRIR_TEXTAREA## class="admin-ta" id="premios-editor" placeholder="🥇 1er Puesto: Un costillar
🥈 2do Puesto: 2 docenas de empanadas
🥉 3er Puesto: Pack de cervezas">##CERRAR_TEXTAREA##
            <button onclick="guardarPremios()" id="btn-guardar-premios" class="btn-sm btn-green rounded-xl w-full py-3 mt-3 text-sm uppercase">
                Guardar y Publicar Premios
            </button>
            <div id="premios-status" class="text-[10px] font-black text-center mt-3 uppercase tracking-wide hidden"></div>
        </div>
    </main>

<main id="tab-ayuda" class="tab-content">
        <div class="bg-slate-800 p-5 rounded-3xl border border-slate-700 space-y-4">
            <h2 class="text-xs font-black text-emerald-400 uppercase tracking-widest border-b border-slate-700 pb-2">📖 Manual del Administrador</h2>
            <div><p class="text-[11px] font-black text-white uppercase mb-1">👥 Pestaña Jugadores</p><p class="text-[11px] text-slate-400 leading-relaxed">Tocá <strong class="text-emerald-400">Activar</strong> para habilitar clientes. El botón 🗑️ oculta entradas erróneas.</p></div>
            <div><p class="text-[11px] font-black text-white uppercase mb-1">📊 Pestaña Ranking</p><p class="text-[11px] text-slate-400 leading-relaxed">Posiciones en tiempo real. 3 puntos por acierto. Exportar CSV descarga nombres, WhatsApps y puntajes.</p></div>
            <div><p class="text-[11px] font-black text-white uppercase mb-1">🎁 Pestaña Premios</p><p class="text-[11px] text-slate-400 leading-relaxed">Editá los premios cuando quieras. Los jugadores los ven en 1-2 minutos sin regenerar la app.</p></div>
            <div class="bg-slate-900 p-4 rounded-xl border border-slate-700 text-center">
                <p class="text-[10px] text-amber-400 font-black uppercase mb-1">⚠️ LINK PARA LOS CLIENTES</p>
                <div class="bg-slate-800 p-2 rounded-lg break-all text-[10px] text-emerald-400 font-black border border-slate-700">{{link_jugador}}</div>
            </div>
        </div>
    </main>
<nav class="fixed bottom-0 left-0 right-0 mx-auto w-full max-w-lg bg-slate-900 h-[75px] flex items-center justify-around border-t border-slate-800 z-50">
        <button onclick="switchTab('jugadores',this)" class="btn-nav active flex flex-col items-center">
            <span class="text-xl">👥</span><span class="text-[9px] font-black uppercase">Jugadores</span>
        </button>
        <button onclick="switchTab('stats',this)" class="btn-nav flex flex-col items-center">
            <span class="text-xl">📊</span><span class="text-[9px] font-black uppercase">Ranking</span>
        </button>
        <button onclick="switchTab('premios',this)" class="btn-nav flex flex-col items-center">
            <span class="text-xl">🎁</span><span class="text-[9px] font-black uppercase">Premios</span>
        </button>
        <button onclick="switchTab('ayuda',this)" class="btn-nav flex flex-col items-center">
            <span class="text-xl">❓</span><span class="text-[9px] font-black uppercase">Ayuda</span>
        </button>
    </nav>

</div>

var GH_TOKEN      = "{{github_token_rev}}".split('').reverse().join('');

var _cachedData   = null;

if (!WA_SOPORTE) document.getElementById('btn-soporte').style.display = 'none';

// ── PIN ──────────────────────────────────────────────────────
function avanzarPin(el, nextId) { if(el.value.length===1 && nextId) document.getElementById(nextId).focus(); }
function retrocederPin(e, el, prevId) { if(e.key==='Backspace' && el.value==='' && prevId) { document.getElementById(prevId).focus(); } }

function mostrarApp() {
    var ps = document.getElementById('pin-screen');
    if(ps) ps.classList.add('hidden');
    var ma = document.getElementById('main-app');
    if(ma) {
        ma.classList.remove('hidden');
        ma.classList.add('block');
    }
    load();
    cargarPremiosActuales();
}

if(!PIN_ADMIN || sessionStorage.getItem('admin_auth_'+EMPRESA)) {
    mostrarApp();
}

// ── Helpers ──────────────────────────────────────────────────
function parsearNombre(nombre){
    var n = nombre || 'Desconocido';
    var m = String(n).match(/^(.+?)\s+$#(\d+)$$/);
    return m ? {base:m[1],entrada:'Entrada #'+m[2]} : {base:String(n),entrada:'Entrada #1'};
}

async function activarB64(b){ return activar(decName(b)); }
function eliminarJugadorB64(b){ return eliminarJugador(decName(b)); }

async function activar(nombre){
    if(!confirm('¿Habilitar a '+nombre+'?'))return;
    try{
        var r=await fetch(API,{
            method:'POST',
            body:JSON.stringify({
                empresa:EMPRESA,
                usuario:nombre,
                id_partido:0,
                prediccion:'ACTIVADO',
                token:TOKEN
            })
        });
        var d=await r.json();
        if(d.ok){load();}
        else alert('Error al activar: '+(d.error||'desconocido'));
    }catch(e){alert('Error de conexión.');}
}

function eliminarJugador(nombre){
    if(!confirm('¿Ocultar a '+nombre+' de tu pantalla?\n\n(Esto no lo borra del Google Sheet)')){return;}
    var key='deleted_'+EMPRESA;
    var deleted=JSON.parse(localStorage.getItem(key)||'[]');
    if(!deleted.includes(nombre)) deleted.push(nombre);
    localStorage.setItem(key,JSON.stringify(deleted));
    load();
}

function getDeleted(){
    return JSON.parse(localStorage.getItem('deleted_'+EMPRESA)||'[]');
}

function restaurarOcultos(){
    if(confirm('¿Volver a mostrar a todos los jugadores que habías ocultado con el tachito?')){
        localStorage.removeItem('deleted_'+EMPRESA);
        load();
    }
}

async function load(){
    try{
        var r=await fetch(API+'?accion=admin_view&empresa='+encodeURIComponent(EMPRESA)+'&token='+TOKEN+'&_t='+Date.now(), {cache: 'no-store'});
        var d=await r.json();
        _cachedData=d;

var pend=[];
        var act=[];
        var pendNames=[];
        var actNames=[];
        var deleted=getDeleted();

var totalRaw=[];
        if(d.solicitudes_pendientes) totalRaw=totalRaw.concat(d.solicitudes_pendientes);
        if(d.usuarios) totalRaw=totalRaw.concat(d.usuarios);
        // Marcar quiénes están ACTIVADOS para prioridad correcta
        var activadosSet={};
        totalRaw.forEach(function(u){
            if(u&&u.nombre&&JSON.stringify(u).toUpperCase().includes('ACTIVADO'))
                activadosSet[u.nombre.trim()]=true;
        });
        if(d.ranking) totalRaw=totalRaw.concat(d.ranking);

// FILTRO ANTI-DUPLICADOS
        totalRaw.forEach(function(u){
            if(!u || !u.nombre) return;
            var n = u.nombre.trim();
            if(deleted.includes(n)) return;

let raw2=JSON.stringify(u).toUpperCase();
            var esPendiente = raw2.includes('PENDIENTE') && !activadosSet[n];

if(esPendiente) {
                if(!pendNames.includes(n)) {
                    pend.push({nombre: n, wa: u.wa_jugador || u.wa || ''});
                    pendNames.push(n);
                }
            } else {
                if(!actNames.includes(n) && !pendNames.includes(n)) {
                    act.push({nombre: n, wa: u.wa_jugador || u.wa || ''});
                    actNames.push(n);
                }
            }
        });

// Limpieza final
        act = act.filter(function(a) { return !pendNames.includes(a.nombre); });

document.getElementById('lista-pendientes').innerHTML=pend.length
            ?pend.map(function(u){
                var p=parsearNombre(u.nombre);
                var sn=encName(u.nombre);
                var baseEsc=escHtml(p.base);
                var waLink=u.wa?'<a href="https://wa.me/'+u.wa+'" target="_blank" class="btn-sm btn-slate rounded-lg" style="text-decoration:none;">💬</a>':'';
                return '<div class="player-row">'+
                       '<div><span class="font-bold text-sm block">'+baseEsc+'</span>'+
                       '<span class="text-[10px] text-amber-400 font-black">'+p.entrada+'</span>'+
                       (u.wa?'<span class="text-[10px] text-slate-500 block">📱 '+u.wa+'</span>':'')+
                       '</div>'+
                       '<div class="flex gap-2">'+
                       waLink+
                       '<button onclick="activarB64(\''+sn+'\')" class="btn-sm btn-green rounded-lg">Activar</button>'+
                       '<button onclick="eliminarJugadorB64(\''+sn+'\')" class="btn-sm btn-red rounded-lg">🗑️</button>'+
                       '</div></div>';
            }).join('')
            :'<p class="text-[10px] text-slate-600 italic text-center py-4">No hay solicitudes nuevas</p>';

document.getElementById('contador-activos').innerText=act.length+' jugadores';
        document.getElementById('lista-activos').innerHTML=act.map(function(u){
            var p=parsearNombre(u.nombre);
            var sn=encName(u.nombre);
            var baseEsc=escHtml(p.base);
            var waAct=u.wa?'<a href="https://wa.me/'+u.wa+'" target="_blank" style="text-decoration:none;font-size:14px;" title="WhatsApp">💬</a>':'';
            return '<div class="player-row">'+
                   '<div><span class="text-sm font-bold text-slate-200">'+baseEsc+'</span>'+
                   '<span class="text-[10px] text-slate-500 ml-2">'+p.entrada+'</span></div>'+
                   '<div class="flex gap-2 items-center">'+waAct+
                   '<button onclick="eliminarJugadorB64(\''+sn+'\')" class="btn-sm btn-red rounded-lg">🗑️</button>'+
                   '</div></div>';
        }).join('');

if(d.ranking) {
            document.getElementById('ranking').innerHTML = d.ranking
                .filter(function(u){ return u.puntos !== 'PENDIENTE' && !deleted.includes(u.nombre.trim()); })
                .map(function(u,i){
                    var p=parsearNombre(u.nombre);
                    var baseEsc=escHtml(p.base);
                    return '<div class="flex justify-between p-3 bg-slate-900 rounded-xl border border-slate-700 mb-1">'+
                           '<div><span class="font-bold text-xs block">#'+(i+1)+' '+baseEsc+'</span>'+
                           '<span class="text-[10px] text-slate-500">'+p.entrada+'</span></div>'+
                           '<span class="font-black text-emerald-400 text-lg self-center">'+u.puntos+' pts</span></div>';
                }).join('');
        }

}catch(e){
        console.error("Error al cargar:", e);
        document.getElementById('lista-pendientes').innerHTML='<p class="text-[10px] text-red-400 font-bold text-center py-4">⚠️ Error al cargar datos. Intentá refrescar o revisá la consola.</p>';
    }
}

var rows=[['Nombre','Entrada','WhatsApp','Puntos','Estado']];
    Object.values(mapUsers).filter(function(u){return !deleted.includes(u.nombre);}).forEach(function(u){
        var p=parsearNombre(u.nombre);
        rows.push([p.base, p.entrada, u.wa, u.pts, u.pend?'Pendiente':'Activo']);
    });

var csv=rows.map(function(r){
        return r.map(function(c){return '"'+String(c).replace(/"/g,'""')+'"';}).join(',');
    }).join('\r\n');

var blob=new Blob(['\uFEFF'+csv],{type:'text/csv;charset=utf-8;'});
    var url=URL.createObjectURL(blob);
    var a=document.createElement('a');
    a.href=url;
    a.download='clientes_'+EMPRESA_SAFE+'_'+new Date().toISOString().split('T')[0]+'.csv';
    a.click();
    URL.revokeObjectURL(url);
}

async function cargarPremiosActuales(){
    try{
        // AHORA EL ADMIN BUSCA LOS PREMIOS EN SU PROPIA CARPETA
        var r=await fetch('https://raw.githubusercontent.com/'+GH_USER+'/'+GH_REPO+'/main/'+EMPRESA_SAFE+'/'+CONFIG_FILE+'?_='+Date.now());
        if(r.ok){
            var d=await r.json();
            if(d.premios) document.getElementById('premios-editor').value=d.premios;
        }
    }catch(e){}
}

async function guardarPremios(){
    var premios=document.getElementById('premios-editor').value.trim();
    var statusEl=document.getElementById('premios-status');
    var btn=document.getElementById('btn-guardar-premios');
    statusEl.classList.remove('hidden');
    statusEl.style.color='#94a3b8';
    statusEl.innerText='⏳ Guardando...';
    btn.disabled=true;

try{
        var configData={premios:premios,empresa:EMPRESA,updated:new Date().toISOString()};
        var content=btoa(unescape(encodeURIComponent(JSON.stringify(configData,null,2))));
        // AHORA EL ADMIN GUARDA LOS PREMIOS EN SU PROPIA CARPETA
        var apiUrl='https://api.github.com/repos/'+GH_USER+'/'+GH_REPO+'/contents/'+EMPRESA_SAFE+'/'+CONFIG_FILE;

var payload={message:'Premios: '+EMPRESA,content:content};
        if(sha) payload.sha=sha;

var res=await fetch(apiUrl,{method:'PUT',headers:{'Authorization':'token '+GH_TOKEN},body:JSON.stringify(payload)});
        if(!res.ok) throw new Error('GitHub error '+res.status);

statusEl.style.color='#34d399';
        statusEl.innerText='✅ Premios publicados — los jugadores verán los cambios en 1-2 minutos';
    }catch(e){
        statusEl.style.color='#f87171';
        statusEl.innerText='❌ Error: '+e.message;
    }finally{
        btn.disabled=false;
    }
}

setInterval(load,30000);
</script>
</body>
</html>