Nova

<?php

function melate_generator_shortcode() {

ob_start(); ?>

Generador Melate Supremo (Feb 2026)

    <div class="melate-options">
        <button id="random-option" class="option-btn active" aria-pressed="true">Aleatorio</button>
        <button id="hot-option" class="option-btn" aria-pressed="false">Calientes</button>
        <button id="cold-option" class="option-btn" aria-pressed="false">Fríos</button>
        <button id="balanced-option" class="option-btn" aria-pressed="false">Equilibrado</button>
        <button id="hybrid-option" class="option-btn" aria-pressed="false">Híbrido</button>
    </div>

    <div class="melate-results">
        <h4>Tus números generados:</h4>
        <div id="melate-numbers" class="numbers-display" aria-live="polite"></div>
        <button id="generate-btn" aria-label="Generar nuevos números">Generar Nuevos</button>
        <button id="copy-btn" disabled aria-label="Copiar números">Copiar</button>
        <p id="generation-count">Generaciones: 0/100</p>
        <p id="motivational-msg" class="hidden">¡Estos tienen la misma chance que cualquier otro! 🍀</p>
    </div>
</div>

<style>
    .melate-generator { font-family: 'Helvetica', Arial, sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; }
    .melate-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; justify-content: center; }
    .option-btn { flex: 1 0 100px; padding: 12px; border: none; background: #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background 0.3s; }
    .option-btn.active { background: #28a745; color: white; }
    .option-btn:hover:not(.active) { background: #d0d0d0; }
    .numbers-display { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; justify-content: center; min-height: 50px; }
    .number { width: 44px; height: 44px; border-radius: 50%; background: #007bff; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; transition: transform 0.3s; }
    .number.additional { background: #dc3545; }
    .number:hover { transform: scale(1.1); }
    #generate-btn, #copy-btn { padding: 12px 24px; margin: 10px 5px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background 0.3s; }
    #generate-btn { background: #007bff; color: white; }
    #generate-btn:hover { background: #0056b3; }
    #copy-btn { background: #6c757d; color: white; }
    #copy-btn:not(:disabled):hover { background: #5a6268; }
    #copy-btn:disabled { background: #ccc; cursor: not-allowed; }
    #generation-count { font-size: 14px; color: #666; margin-top: 10px; }
    .error-message { color: #dc3545; font-size: 14px; margin: 10px 0; }
    #motivational-msg { font-size: 14px; color: #28a745; margin-top: 10px; }
    .hidden { display: none; }
    @media (max-width: 480px) { .melate-generator { padding: 15px; } .number { width: 38px; height: 38px; font-size: 14px; } }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const buttons = {
            random: document.getElementById('random-option'),
            hot: document.getElementById('hot-option'),
            cold: document.getElementById('cold-option'),
            balanced: document.getElementById('balanced-option'),
            hybrid: document.getElementById('hybrid-option')
        };
        const generateBtn = document.getElementById('generate-btn');
        const copyBtn = document.getElementById('copy-btn');
        const numbersDisplay = document.getElementById('melate-numbers');
        const countDisplay = document.getElementById('generation-count');
        const msgDisplay = document.getElementById('motivational-msg');

        let currentOption = 'random';
        let generationCount = 0;
        const maxGenerations = 100;

        // Datos 2026: Calientes (más frecuentes históricos + recientes)
        const hotNumbers = [1, 4, 11, 13, 14, 15, 18, 32, 38, 41, 44, 45, 54];
        // Fríos (menos frecuentes)
        const coldNumbers = [53, 55, 51, 52, 56, 10, 37, 5, 9, 17, 23, 47];
        // Rangos
        const lowRange = Array.from({length: 19}, (_, i) => i + 1); // 1-19
        const midRange = Array.from({length: 19}, (_, i) => i + 20); // 20-38
        const highRange = Array.from({length: 18}, (_, i) => i + 39); // 39-56
        // Patrones equilibrados
        const patterns = [[2,2