<!DOCTYPE html>
<html lang="es" class="{{ 'dark' if tema == 1 else '' }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UTRAU - Centro de Mando</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script>
        tailwind.config = { darkMode: 'class', theme: { extend: {} } }
    </script>
</head>
<body class="bg-slate-100 dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors duration-300 min-h-screen">
    
    <nav class="bg-slate-900 border-b border-slate-800 p-4 flex justify-between items-center shadow-md text-white">
        <div class="flex items-center space-x-3">
            <span class="font-black text-red-500">UTRAU <span class="text-slate-400 font-bold"> | MANDO</span></span>
        </div>
        <div class="flex items-center space-x-4">
            <a href="{{ url_for('index') }}" class="text-xs font-bold uppercase text-blue-400 hover:text-blue-300 transition">Volver al Inicio</a>
            <span class="text-xs font-bold uppercase border-l border-slate-700 pl-4">{{ user_nom }}</span>
        </div>
    </nav>

    <div class="max-w-6xl mx-auto px-6 mt-4">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    {% if category == 'success' %}
                        <div class="bg-emerald-100 dark:bg-emerald-900/30 border border-emerald-500 text-emerald-700 dark:text-emerald-400 px-4 py-3 rounded-xl flex items-center mb-4 shadow-sm animate-fade-in-down">
                            <i class="fa-solid fa-circle-check mr-3 text-lg"></i><span class="text-sm font-bold tracking-wide">{{ message }}</span>
                        </div>
                    {% elif category == 'error' %}
                        <div class="bg-red-100 dark:bg-red-900/30 border border-red-500 text-red-700 dark:text-red-400 px-4 py-3 rounded-xl flex items-center mb-4 shadow-sm animate-fade-in-down">
                            <i class="fa-solid fa-triangle-exclamation mr-3 text-lg"></i><span class="text-sm font-bold tracking-wide">{{ message }}</span>
                        </div>
                    {% elif category == 'warning' %}
                        <div class="bg-yellow-100 dark:bg-yellow-900/30 border border-yellow-500 text-yellow-700 dark:text-yellow-400 px-4 py-3 rounded-xl flex items-center mb-4 shadow-sm animate-fade-in-down">
                            <i class="fa-solid fa-circle-exclamation mr-3 text-lg"></i><span class="text-sm font-bold tracking-wide">{{ message }}</span>
                        </div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endwith %}
    </div>

    <main class="p-6 max-w-6xl mx-auto">
        <h1 class="text-3xl font-black mb-2 uppercase tracking-tight">Centro de Configuración</h1>
        <p class="text-sm text-slate-500 dark:text-slate-400 mb-8 font-bold uppercase tracking-widest">Acceso exclusivo: Ejecutivo y Administración</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
            
            <a href="{{ url_for('config.terminales') }}" class="bg-white dark:bg-slate-900 p-8 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:border-blue-500 transition group flex flex-col items-center text-center cursor-pointer">
                <i class="fa-solid fa-mobile-screen text-4xl mb-4 text-blue-500 group-hover:scale-110 transition"></i>
                <h3 class="text-lg font-black uppercase tracking-wide mb-1">Terminales</h3>
                <p class="text-[10px] text-slate-500 font-bold uppercase">Aprobar dispositivos</p>
            </a>

            <a href="{{ url_for('config.usuarios') }}" class="bg-white dark:bg-slate-900 p-8 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:border-emerald-500 transition group flex flex-col items-center text-center cursor-pointer">
                <i class="fa-solid fa-users text-4xl mb-4 text-emerald-500 group-hover:scale-110 transition"></i>
                <h3 class="text-lg font-black uppercase tracking-wide mb-1">Compañeros</h3>
                <p class="text-[10px] text-slate-500 font-bold uppercase">Gestión de Usuarios</p>
            </a>

            <!-- NUEVO MÓDULO: ESTRUCTURA DE GRUPOS -->
            <a href="{{ url_for('grupos.index') }}" class="bg-white dark:bg-slate-900 p-8 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:border-indigo-500 transition group flex flex-col items-center text-center cursor-pointer">
                <i class="fa-solid fa-network-wired text-4xl mb-4 text-indigo-500 group-hover:scale-110 transition"></i>
                <h3 class="text-lg font-black uppercase tracking-wide mb-1">Estructura</h3>
                <p class="text-[10px] text-slate-500 font-bold uppercase">Grupos y Regiones</p>
            </a>

            <a href="{{ url_for('config.cargos') }}" class="bg-white dark:bg-slate-900 p-8 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:border-purple-500 transition group flex flex-col items-center text-center cursor-pointer">
                <i class="fa-solid fa-sitemap text-4xl mb-4 text-purple-500 group-hover:scale-110 transition"></i>
                <h3 class="text-lg font-black uppercase tracking-wide mb-1">Cargos</h3>
                <p class="text-[10px] text-slate-500 font-bold uppercase">Definición Estatutaria</p>
            </a>

            <a href="{{ url_for('config.asignaciones') }}" class="bg-white dark:bg-slate-900 p-8 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:border-amber-500 transition group flex flex-col items-center text-center cursor-pointer">
                <i class="fa-solid fa-id-card-clip text-4xl mb-4 text-amber-500 group-hover:scale-110 transition"></i>
                <h3 class="text-lg font-black uppercase tracking-wide mb-1">Asignaciones</h3>
                <p class="text-[10px] text-slate-500 font-bold uppercase">Directiva y Ejecutivo</p>
            </a>

            <a href="{{ url_for('config.empresas') }}" class="bg-white dark:bg-slate-900 p-8 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:border-sky-500 transition group flex flex-col items-center text-center cursor-pointer">
                <i class="fa-solid fa-building-user text-4xl mb-4 text-sky-500 group-hover:scale-110 transition"></i>
                <h3 class="text-lg font-black uppercase tracking-wide mb-1">Entidades</h3>
                <p class="text-[10px] text-slate-500 font-bold uppercase">Empresas y MTSS</p>
            </a>

        </div>
    </main>
</body>
</html>