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