<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'SISER') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet" />

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <!-- Alpine.js Core -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <!-- Alpine Plugins -->
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>

    @if(($moduloActivo ?? 'tecnologia') === 'mantenimiento')
    <style>
        :root {
            /* Mantenimiento Theme: Slate/Gray dynamic overrides */
            --color-green-50: 248 250 252;
            --color-green-100: 241 245 249;
            --color-green-200: 226 232 240;
            --color-green-300: 203 213 225;
            --color-green-400: 148 163 184;
            --color-green-500: 100 116 139;
            --color-green-600: 71 85 105;
            --color-green-700: 51 65 85;
            --color-green-800: 30 41 59;
            --color-green-900: 15 23 42;

            --color-emerald-50: 248 250 252;
            --color-emerald-100: 241 245 249;
            --color-emerald-200: 226 232 240;
            --color-emerald-300: 203 213 225;
            --color-emerald-400: 148 163 184;
            --color-emerald-500: 100 116 139;
            --color-emerald-600: 71 85 105;
            --color-emerald-700: 51 65 85;
            --color-emerald-800: 30 41 59;
            --color-emerald-900: 15 23 42;
        }
    </style>
    @endif
</head>

<body class="font-sans antialiased text-gray-900 bg-gray-50">
    <div x-data="{ sidebarOpen: false }" class="flex h-screen overflow-hidden">

        <!-- Sidebar -->
        @include('layouts.sidebar')

        <div class="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">

            <!-- Navbar -->
            @include('layouts.navbar')

            <!-- Page Content -->
            <main class="w-full">
                <div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">

                    <!-- Page Heading -->
                    @isset($header)
                        <div class="sm:flex sm:justify-between sm:items-center mb-8">
                            <div class="mb-4 sm:mb-0">
                                <h1 class="text-2xl md:text-3xl text-slate-800 font-bold">{{ $header }}</h1>
                            </div>
                            <div class="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                                {{ $actions ?? '' }}
                            </div>
                        </div>
                    @endisset

                    {{ $slot }}
                </div>
            </main>

        </div>
    </div>
</body>

</html>