{% load static %}
{% load lb_tags %}
<!DOCTYPE html>
<html lang="es" data-theme="labb-light" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title|default:"Acceso Campus Virtual | Lo Justo LMS" }}</title>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="{% static 'courses/img/labb/favicon/favicon.svg' %}">
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'courses/img/labb/favicon/favicon-32x32.png' %}">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'courses/img/labb/favicon/favicon-16x16.png' %}">
    <link rel="shortcut icon" href="{% static 'courses/img/labb/favicon/favicon.ico' %}">
    <link rel="manifest" href="{% static 'courses/img/labb/favicon/site.webmanifest' %}">

    <!-- HTMX 2.0 CDN para SPA-like routing y AJAX -->
    <script src="https://unpkg.com/htmx.org@2.0.2"></script>

    <c-lb.m.dependencies />
    <!-- Force CSS Cache Busting -->
    <link rel="stylesheet" href="{% static 'css/output.css' %}?v=2.0.1">
</head>
<body class="min-h-screen bg-zinc-100 text-zinc-900 antialiased flex flex-col justify-between selection:bg-emerald-500 selection:text-white">
    {% csrf_token %}
    
    <!-- CABECERA LIMPIA Y AISLADA PARA AUTENTICACIÓN -->
    <header class="bg-white border-b border-zinc-200/80 h-16 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">
            <!-- Volver a Inicio -->
            <a href="{% url 'core:landing' %}" class="inline-flex items-center space-x-2 text-xs font-bold text-zinc-600 hover:text-emerald-700 transition-colors uppercase tracking-wider group">
                <c-lbi.rmx.arrow-left w="1.1rem" h="1.1rem" class="text-zinc-400 group-hover:text-emerald-600 transition-transform group-hover:-translate-x-1 shrink-0" />
                <span>Volver a Inicio</span>
            </a>

            <!-- Logo Institucional -->
            <a href="{% url 'core:landing' %}" class="flex items-center decoration-0 shrink-0">
                <img src="{% static 'img/logo.png' %}" alt="Lo Justo LMS" class="h-9 w-auto object-contain" />
            </a>
        </div>
    </header>
    
    <!-- CONTENIDO CENTRAL DE AUTENTICACIÓN -->
    <main class="flex-grow flex items-center justify-center">
        {{ slot }}
    </main>

    <!-- FOOTER LIMPIO DE AUTENTICACIÓN -->
    <footer class="bg-white border-t border-zinc-200/80 py-6 text-zinc-500 text-xs text-center">
        <div class="max-w-7xl mx-auto px-4 flex justify-center">
            <div class="font-medium">
                © 2026 <span class="font-black text-zinc-800">Lo Justo LMS</span> • Todos los derechos reservados.
            </div>
        </div>
    </footer>
</body>
</html>
