<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Portal del Empleado - PapaIA</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <script src="https://unpkg.com/lucide@latest"></script>

    <style>

        body { background-color: #f8fafc; }

        .gradient-text {

            background: linear-gradient(to right, #ec4899, #f97316);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

        }

    </style>

</head>

<body class="min-h-screen flex flex-col">


    <nav class="bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center shadow-sm">

        <div class="flex items-center gap-2">

            <div class="bg-gradient-to-br from-pink-500 to-orange-500 text-white p-2 rounded-lg font-bold text-xl">P</div>

            <span class="font-bold text-xl text-slate-800 tracking-tight">PapaIA <span class="text-xs text-orange-500 bg-orange-100 px-2 py-1 rounded-full ml-1">Portal</span></span>

        </div>

        <div class="flex items-center gap-4 text-sm font-medium text-slate-500">

            <span>Hola, Talento 👋</span>

        </div>

    </nav>


    <main class="flex-1 max-w-6xl mx-auto w-full p-8">

        

        <div class="text-center mb-12 mt-8">

            <h1 class="text-4xl md:text-5xl font-extrabold mb-4 text-slate-900">Bienvenido al <span class="gradient-text">Hub Digital</span></h1>

            <p class="text-slate-500 text-lg max-w-2xl mx-auto">Tu centro de operaciones. Aquí encontrarás todas las herramientas necesarias para tu día a día en PapaIA.</p>

        </div>


        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">


            <a href="juego_onboarding.html" class="group bg-white p-6 rounded-2xl shadow-sm border border-slate-200 hover:shadow-xl hover:border-orange-300 transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">

                <div class="absolute top-0 right-0 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">NUEVO</div>

                <div class="mb-4 bg-orange-100 w-12 h-12 rounded-xl flex items-center justify-center text-orange-600 group-hover:scale-110 transition">

                    <i data-lucide="map" class="w-6 h-6"></i>

                </div>

                <h3 class="text-xl font-bold text-slate-800 mb-2">Misión: Onboarding</h3>

                <p class="text-slate-500 text-sm mb-4">Tu aventura comienza aquí. Descubre la cultura, el equipo y gana tu certificado.</p>

                <div class="flex items-center text-orange-600 font-bold text-sm group-hover:underline">

                    Jugar ahora <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i>

                </div>

            </a>


            <div class="bg-slate-50 p-6 rounded-2xl border border-dashed border-slate-300 relative opacity-70">

                <div class="mb-4 bg-slate-200 w-12 h-12 rounded-xl flex items-center justify-center text-slate-400">

                    <i data-lucide="calculator" class="w-6 h-6"></i>

                </div>

                <h3 class="text-xl font-bold text-slate-400 mb-2">Calculadora Salarial</h3>

                <p class="text-slate-400 text-sm mb-4">Simula tu nómina neta y retenciones. Próximamente.</p>

                <span class="text-xs bg-slate-200 text-slate-500 px-2 py-1 rounded">En construcción 🚧</span>

            </div>


            <div class="bg-slate-50 p-6 rounded-2xl border border-dashed border-slate-300 relative opacity-70">

                <div class="mb-4 bg-slate-200 w-12 h-12 rounded-xl flex items-center justify-center text-slate-400">

                    <i data-lucide="calendar" class="w-6 h-6"></i>

                </div>

                <h3 class="text-xl font-bold text-slate-400 mb-2">Mis Vacaciones</h3>

                <p class="text-slate-400 text-sm mb-4">Gestor de días libres y ausencias. Próximamente.</p>

                <span class="text-xs bg-slate-200 text-slate-500 px-2 py-1 rounded">En construcción 🚧</span>

            </div>


        </div>

    </main>


    <footer class="bg-white border-t border-gray-200 py-8 text-center text-slate-400 text-sm">

        <p>© 2025 PapaIA. Más que código, somos una Colla.</p>

    </footer>


    <script>

        lucide.createIcons();

    </script>

</body>

</html>