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 configurás un PIN, el panel pedirá este código al abrirse.

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.

<!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>
    <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; }
    </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 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>

<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>

<nav class="fixed bottom-0 w-full 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>

// ── Premios dinámicos ────────────────────────────────────────
(function(){
    var defaultHtml = "{{premios_html}}";
    var cont = document.getElementById('premios-container');
    function renderPremios(html){
        var lineas = html.split('<br>').map(function(l){return l.trim();}).filter(Boolean);
        cont.innerHTML = lineas.length
            ? lineas.map(function(l){return '<div class="premio-item">'+l+'</div>';}).join('')
            : '<p style="color:#64748b;font-weight:700;font-size:15px;text-align:center;font-style:italic;">'+html+'</p>';
    }
    renderPremios(defaultHtml);
    fetch(CONFIG_RAW+'?_='+Date.now())
        .then(function(r){return r.ok?r.json():null;})
        .then(function(d){if(d&&d.premios)renderPremios(d.premios.replace(/\n/g,'<br>'));})
        .catch(function(){});
})();

// ── AudioContext lazy ────────────────────────────────────────
var _audioCtx = null;
function getAudio(){
    if(!_audioCtx){try{_audioCtx=new(window.AudioContext||window.webkitAudioContext)();}catch(e){}}
    return _audioCtx;
}
function playTone(freq,type,dur,vol){
    var ctx=getAudio();if(!ctx)return;
    if(ctx.state==='suspended')ctx.resume();
    try{
        var o=ctx.createOscillator(),g=ctx.createGain();
        o.type=type;o.frequency.setValueAtTime(freq,ctx.currentTime);
        g.gain.setValueAtTime(vol,ctx.currentTime);g.gain.exponentialRampToValueAtTime(0.01,ctx.currentTime+dur);
        o.connect(g);g.connect(ctx.destination);o.start();o.stop(ctx.currentTime+dur);
    }catch(e){}
}
function playClick(){playTone(600,'sine',0.1,0.05);}
function playSuccess(){playTone(440,'sine',0.1,0.05);setTimeout(function(){playTone(660,'sine',0.2,0.1);},100);}
function playSplash(){playTone(300,'triangle',0.4,0.05);setTimeout(function(){playTone(600,'triangle',0.6,0.05);},300);}

// ── Identidad ────────────────────────────────────────────────
function obtenerNombreCompleto(){
    var n=(document.getElementById('user_name').value||'').trim();
    var sel=document.getElementById('nro_entrada');
    var e=sel?sel.value:'1';
    if(!n)return '';
    return e==='1'?n:n+' (#'+e+')';
}
function votoKey(id){
    var sel=document.getElementById('nro_entrada');
    var e=sel?sel.value:'1';
    return 'voto_e'+e+'_'+id;
}
var _nameDebounce=null;
function onNameInput(val){localStorage.setItem('prode_user',val.trim());clearTimeout(_nameDebounce);_nameDebounce=setTimeout(checkStatus,600);}
function onEntradaChange(){playClick();checkStatus();}

// ── Activación ───────────────────────────────────────────────
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'})});
        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';}
}

// ── Check de estado ──────────────────────────────────────────
async function checkStatus(){
    var n=obtenerNombreCompleto();if(!n)return;
    try{
        var r=await fetch(API+'?empresa='+encodeURIComponent(EMPRESA));
        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);
    }catch(e){}
}

// ── Render: partidos pendientes (3 botones L/E/V) ────────────
function renderVotar(ps){
    var pend=ps.filter(function(p){return p.estado==='Pendiente';});
    document.getElementById('lista-votar').innerHTML=pend.map(function(p){
        var vk=votoKey(p.id),v=localStorage.getItem(vk);
        var opts=['Local','Empate','Visitante'].map(function(o){
            return '<button onclick="votar('+p.id+',\''+o+'\',this)"'+
                   ' class="btn-pred vote-btn-'+p.id+(v===o?' selected':'')+'">'+ o+'</button>';
        }).join('');
        return '<div class="bg-white p-5 rounded-2xl shadow-sm mb-4 border border-slate-100">'+
               '<p class="text-[10px] font-black text-slate-400 mb-4 uppercase bg-slate-50 p-2 rounded-lg text-center">'+
               (p.grupo?p.grupo+' | ':'')+p.fecha_str+'</p>'+
               '<div class="flex justify-between items-center mb-5 font-bold text-sm">'+
               '<span class="flex-1 text-center">'+p.local+'</span>'+
               '<span class="mx-2 text-slate-300">VS</span>'+
               '<span class="flex-1 text-center">'+p.visitante+'</span></div>'+
               '<div class="flex gap-2">'+opts+'</div>'+
               (v?'<p class="vote-hint">Voto actual: '+v+' — podés cambiarlo antes del inicio</p>':'')+
               '</div>';
    }).join('');
}

// ── Render: historial con ✅/❌ ────────────────────────────────
function ganadorDeGoles(gl, gv){
    if(gl>gv)return 'Local';
    if(gl<gv)return 'Visitante';
    return 'Empate';
}

// ── Render: ranking ───────────────────────────────────────────
function renderRanking(rk, miNombre){
    var activos=rk.filter(function(r){return r.puntos!=='PENDIENTE';});
    var miPos=activos.findIndex(function(r){return r.nombre.toLowerCase()===(miNombre||'').toLowerCase();});
    document.getElementById('ranking-compartir-wrap').classList.toggle('hidden', miPos<0);
    document.getElementById('tabla-ranking').innerHTML=activos.map(function(r,i){
        var esYo=r.nombre.toLowerCase()===(miNombre||'').toLowerCase();
        return '<div class="flex items-center p-4 border-b border-slate-100 last:border-0'+(esYo?' ranking-own':'')+'">'+
               '<span class="w-8 font-black '+(esYo?'text-emerald-600':'text-slate-400')+'">#'+(i+1)+'</span>'+
               '<span class="flex-1 font-black '+(esYo?'text-emerald-800':'text-slate-700')+' ml-2">'+
               r.nombre+(esYo?' 👈':'')+
               '</span>'+
               '<span class="font-black text-lg '+(esYo?'text-emerald-600':'text-emerald-500')+'">'+r.puntos+' pts</span></div>';
    }).join('');
}

// ── Compartir ranking ────────────────────────────────────────
function compartirRanking(){
    playClick();
    var n=obtenerNombreCompleto();
    var activos=_lastRanking.filter(function(r){return r.puntos!=='PENDIENTE';});
    var pos=activos.findIndex(function(r){return r.nombre.toLowerCase()===n.toLowerCase();});
    var pts=pos>=0?activos[pos].puntos:0;
    var total=activos.length;
    var msg='🔥 ¡Voy '+(pos>=0?'puesto #'+(pos+1):'en el ranking')+' de '+total+' en el Prode de {{empresa}}!'+
            '\n💪 Llevo '+pts+' puntos acumulados.'+
            '\n¿Te animás a ganarme?'+
            '\n👉 Anotate acá: '+LINK_APP;
    window.open('https://wa.me/?text='+encodeURIComponent(msg));
}

// ── Votar con retry automático ───────────────────────────────
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})});
            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);
}

// ── Tabs ─────────────────────────────────────────────────────
function switchTab(id,btn){
    playClick();
    document.querySelectorAll('.tab-content').forEach(function(t){t.classList.remove('active');});
    document.querySelectorAll('.btn-nav').forEach(function(b){b.classList.remove('active');});
    document.getElementById('tab-'+id).classList.add('active');
    btn.classList.add('active');
}

document.getElementById('user_name').value=localStorage.getItem('prode_user')||'';
checkStatus();
setInterval(checkStatus,20000);

// --- CORRECCIÓN PANTALLA DE CARGA INFINITA ---
setTimeout(function(){
    var sp=document.getElementById('splash');
    if(sp){
        sp.style.opacity='0';
        playSplash();
        setTimeout(function(){sp.remove();},500);
    }
}, 1500);

</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; }
        .pin-digit { width:52px; height:64px; background:#1e293b; border:2px solid #334155; border-radius:1rem; font-size:28px; font-weight:900; text-align:center; color:white; outline:none; transition:all 0.2s; -webkit-text-security:disc; }
        .pin-digit:focus { border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,0.2); }
        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">

<div id="pin-screen" class="min-h-screen flex flex-col items-center justify-center p-8">
    <div class="text-center mb-10">
        <span style="font-size:4rem;">🛡️</span>
        <h1 class="text-2xl font-black italic uppercase text-white mt-4">Panel Admin</h1>
        <p class="text-slate-400 text-sm mt-2 font-bold">{{empresa}}</p>
    </div>
    <div class="bg-slate-800 p-8 rounded-[2rem] border border-slate-700 w-full max-w-sm">
        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 text-center">Ingresá el PIN de acceso</p>
        <div class="flex justify-center gap-3 mb-6">
            <input type="tel" class="pin-digit" id="p1" maxlength="1" oninput="avanzarPin(this,'p2')" onkeyup="avanzarPin(this,'p2')" onkeydown="retrocederPin(event,this,'')">
            <input type="tel" class="pin-digit" id="p2" maxlength="1" oninput="avanzarPin(this,'p3')" onkeyup="avanzarPin(this,'p3')" onkeydown="retrocederPin(event,this,'p1')">
            <input type="tel" class="pin-digit" id="p3" maxlength="1" oninput="avanzarPin(this,'p4')" onkeyup="avanzarPin(this,'p4')" onkeydown="retrocederPin(event,this,'p2')">
            <input type="tel" class="pin-digit" id="p4" maxlength="1" oninput="verificarPin()" onkeyup="verificarPin()" onkeydown="retrocederPin(event,this,'p3')">
        </div>
        <div id="pin-error" class="hidden text-center text-red-400 text-xs font-black uppercase mb-4">PIN incorrecto, intentá de nuevo</div>
        <button onclick="verificarPin()" class="w-full btn-green btn-sm py-3 rounded-xl text-sm uppercase">Entrar</button>
    </div>
</div>

<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>
        <button onclick="load()" class="text-[9px] bg-slate-800 px-3 py-1.5 rounded-lg uppercase font-bold">Refrescar 🟢</button>
    </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>
            <textarea class="admin-ta" id="premios-editor"
                placeholder="🥇 1er Puesto: Un costillar
🥈 2do Puesto: 2 docenas de empanadas
🥉 3er Puesto: Pack de cervezas">

💬