:root {
            --app-sb-width: 270px;
            --app-sb-mini: 88px;
            --app-header-h: 70px;
            --app-footer-h: 65px;
            --app-radius: 12px;
            --app-anim: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        [data-bs-theme="light"] {
            --app-bg-body: #f8fafc;
            --app-bg-surface: #ffffff;
            --app-text-main: #1e293b;
            --app-text-sub: #64748b;
            --app-border: #e2e8f0;
            --app-accent: #2f6fed;
            --app-accent-hover: #e7eefc;
            --app-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        [data-bs-theme="dark"] {
            --app-bg-body: #0f172a;
            --app-bg-surface: #1e293b;
            --app-text-main: #f8fafc;
            --app-text-sub: #94a3b8;
            --app-border: #334155;
            --app-accent: #6d9bff;
            --app-accent-hover: rgba(109, 155, 255, 0.18);
            --app-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--app-bg-body);
            color: var(--app-text-main);
            transition: background-color 0.3s, color 0.3s;
            overflow-x: hidden;
            /* Padding bottom en móvil para que el footer no tape contenido */
            padding-bottom: var(--app-footer-h); 
        }
        @media (min-width: 992px) { body { padding-bottom: 0; } }

        /* =========================================
           COMPONENTES
           ========================================= */
        .btn-toggle-theme {
            width: 38px; height: 38px;
            border-radius: 50%;
            display: grid; place-items: center;
            border: 1px solid var(--app-border);
            color: var(--app-text-main);
            background: var(--app-bg-surface);
            transition: all 0.2s;
            flex-shrink: 0; /* Evita que se aplaste en móvil */
        }
        .btn-toggle-theme:hover { background: var(--app-accent-hover); color: var(--app-accent); }

        .app-card {
            background: var(--app-bg-surface);
            border: 1px solid var(--app-border);
            border-radius: 16px;
            box-shadow: var(--app-shadow);
        }

        /* --- BUSCADOR RESPONSIVE (FIX) --- */
        .search-wrapper {
            position: relative;
            flex-grow: 1; /* Ocupa el espacio disponible */
            margin: 0 10px; /* Separación de los botones */
            max-width: 400px; /* Límite en desktop */
        }
        
        .search-clean {
            border: 1px solid var(--app-border);
            background: var(--app-bg-surface);
            color: var(--app-text-main);
            padding: 0.5rem 1rem 0.5rem 2.2rem; /* Padding izq para icono */
            border-radius: 99px;
            width: 100%; /* Ancho completo del contenedor */
            font-size: 0.9rem;
            transition: all 0.2s;
            height: 40px;
        }
        .search-clean:focus { 
            outline: none; border-color: var(--app-accent); 
        }
        
        .search-icon { 
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%); 
            color: var(--app-text-sub); pointer-events: none; font-size: 0.9rem;
        }

        /* =========================================
           SIDEBAR
           ========================================= */
        .app-sidebar {
            position: fixed; top: 0; left: 0;
            height: 100vh; width: var(--app-sb-width);
            background: var(--app-bg-surface);
            border-right: 1px solid var(--app-border);
            z-index: 1040;
            display: flex; flex-direction: column;
            transition: width var(--app-anim), transform var(--app-anim);
            box-shadow: var(--app-shadow);
        }

        .app-brand { height: var(--app-header-h); display: flex; align-items: center; padding: 0 1.5rem; color: var(--app-text-main); }

        .app-menu-link {
            display: flex; align-items: center; padding: 0.8rem 1rem;
            color: var(--app-text-sub); text-decoration: none;
            border-radius: var(--app-radius); margin: 0 0.8rem;
            transition: all 0.2s; font-weight: 500; white-space: nowrap;
        }
        .app-menu-link:hover { background-color: var(--app-bg-body); color: var(--app-text-main); }
        .app-menu-link.active { background-color: var(--app-accent-hover); color: var(--app-accent); }
        
        .app-menu-icon { font-size: 1.25rem; min-width: 2.25rem; display: flex; justify-content: center; }
        .app-menu-text { flex-grow: 1; transition: opacity 0.2s; }
        .app-menu-arrow { font-size: 0.8rem; transition: transform 0.3s; }
        .app-menu-link[aria-expanded="true"] .app-menu-arrow { transform: rotate(90deg); color: var(--app-accent); }

        .app-submenu { list-style: none; padding-left: 0; margin: 0; background: rgba(0,0,0,0.02); border-radius: 8px; margin: 0 10px; overflow: hidden; }
        .app-submenu .app-menu-link { margin: 0; padding-left: 3.5rem; border-radius: 0; font-size: 0.85rem; }

        /* Estados Sidebar */
        body.state-compact .app-sidebar { width: var(--app-sb-mini); }
        body.state-compact .app-menu-text, 
        body.state-compact .app-menu-arrow,
        body.state-compact .app-brand-text { display: none; }
        body.state-compact .app-brand { justify-content: center; padding: 0; }
        body.state-compact .app-submenu { display: none !important; }
        
        body.state-hidden .app-sidebar { transform: translateX(-100%); }

        /* =========================================
           HEADER & MAIN
           ========================================= */
        .app-main {
            margin-left: var(--app-sb-width);
            min-height: 100vh;
            transition: margin-left var(--app-anim);
        }
        body.state-compact .app-main { margin-left: var(--app-sb-mini); }
        body.state-hidden .app-main { margin-left: 0; }

        /* HEADER UNIFICADO (Móvil y Desktop) */
        .app-header {
            height: var(--app-header-h);
            padding: 0 1rem; /* Padding reducido para móvil */
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(10px);
            position: sticky; top: 0; z-index: 1020;
            border-bottom: 1px solid var(--app-border);
            display: flex; 
            align-items: center;
            justify-content: space-between; /* Distribuye espacio */
        }
        [data-bs-theme="dark"] .app-header { background: rgba(30, 41, 59, 0.9); }
        
        @media (min-width: 992px) {
            .app-header { padding: 0 2rem; }
        }

        /* =========================================
           MOBILE NAV (Footer)
           ========================================= */
        .app-mobile-nav {
            height: var(--app-footer-h);
            background: var(--app-bg-surface);
            border-top: 1px solid var(--app-border);
            z-index: 1030;
        }
        .app-mobile-link {
            color: var(--app-text-sub); display: flex; flex-direction: column; align-items: center; text-decoration: none; font-size: 0.65rem;
        }
        .app-mobile-link.active { color: var(--app-accent); }
        
        /* Media Queries */
        @media (max-width: 991px) {
            .app-sidebar { transform: translateX(-100%); width: var(--app-sb-width) !important; }
            body.mobile-open .app-sidebar { transform: translateX(0); }
            .app-main { margin-left: 0 !important; }
            .desktop-only { display: none !important; }
        }
        @media (min-width: 992px) {
            .mobile-only { display: none !important; }
        }
        
        .app-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 1035;
            opacity: 0; visibility: hidden; transition: 0.3s;
        }
        body.mobile-open .app-overlay { opacity: 1; visibility: visible; }

        /* Ajuste Avatar */
        .user-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }