<!DOCTYPE html>
<html lang="es" class="h-full bg-slate-950">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo isset($pageTitle) ? $pageTitle : 'ASISMA CRM'; ?></title>
    <link rel="icon" type="image/png" href="<?php echo APP_URL; ?>/public/assets/img/favicon.png">

    <!-- Tema: claro por defecto; 'dark' si el usuario lo eligió (se aplica antes de pintar) -->
    <script>
        (function () {
            var tema = null;
            try { tema = localStorage.getItem('crm_theme'); } catch (e) {}
            if (tema !== 'dark') document.documentElement.classList.add('light');
            // Sidebar oculto (persistente) — se aplica antes de pintar para evitar el salto
            var barra = null;
            try { barra = localStorage.getItem('crm_sidebar'); } catch (e) {}
            if (barra === 'oculto') document.documentElement.classList.add('sidebar-oculto');
        })();
    </script>
    <style>
        /* Sidebar ocultable en escritorio: más espacio horizontal para el contenido */
        html.sidebar-oculto #sidebar { transform: translateX(-100%) !important; }
        html.sidebar-oculto #contenedor-principal { padding-left: 0 !important; }
        #contenedor-principal { transition: padding-left .3s ease; }
    </style>
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        // Tono intermedio usado en bordes/separadores de tablas
                        // (bg-slate-850, divide-slate-850, border-b-slate-850)
                        slate: {
                            850: '#172033'
                        },
                        brand: {
                            50: '#f0f7ff',
                            100: '#e0effe',
                            200: '#bae0fd',
                            300: '#7cc7fb',
                            400: '#38a8f8',
                            500: '#0e8ceb',
                            600: '#026fc6',
                            700: '#03589f',
                            800: '#074b83',
                            900: '#0b3f6d',
                            950: '#081e36',
                        }
                    }
                }
            }
        }
    </script>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    
    <!-- Custom Application CSS -->
    <link rel="stylesheet" href="<?php echo APP_URL; ?>/public/assets/css/app.css">
    <link rel="stylesheet" href="<?php echo APP_URL; ?>/public/assets/css/light.css?v=4">
    <!-- Densidad global: tablas compactas, cebra, columna Item y filtros compactos -->
    <link rel="stylesheet" href="<?php echo APP_URL; ?>/public/assets/css/densidad.css?v=1">
    
    <style>
        body {
            font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
        }
    </style>
</head>
