.gestemas-main-footer {
            padding: 12px var(--gst-page-padding-desktop, 40px);
            border-top: 1px solid var(--gestemas-gray-100);
            background: transparent; /* Changed to transparent to blend cleanly and avoid massive white blocks if HTML stretches */
            flex-shrink: 0;
            margin-top: auto; /* Force to bottom exactly at the edge */
            width: 100%;
        }

        .footer-content {
            padding: 0 var(--gst-page-padding-desktop, 40px);
            max-width: none;
            margin: 0;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            color: var(--gestemas-gray-500);
            min-height: 30px;
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: var(--gestemas-gray-700);
        }

        .footer-brand .version {
            font-size: 11px;
            background: var(--gestemas-gray-200);
            padding: 2px 6px;
            border-radius: 4px;
            color: var(--gestemas-gray-600);
        }

        .footer-links {
            display: flex;
            gap: 12px;
            align-items: center;
            font-size: 13px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .footer-links a {
            color: var(--gestemas-gray-500);
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-links a:hover {
            color: var(--gestemas-primary);
            text-decoration: underline;
        }

        .footer-links .separator {
            color: var(--gestemas-gray-300);
        }

        .footer-copyright {
            font-size: 12px;
            color: var(--gestemas-gray-400);
        }

        @media (max-width: 768px) {
            .gestemas-main-footer {
                padding: 8px var(--page-padding-mobile);
            }

            .footer-content {
                flex-direction: column;
                gap: 4px;
            }
        }

        /* ========================================
   GESTEMAS LAYOUT SYSTEM - MOBILE-FIRST
   Premium Responsive Design System
   ======================================== */

        /* Reset & Base */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ========================================
    STANDARDIZED SPACING UTILITIES
    ======================================== */
        .g-p-block {
            padding: 32px 40px;
        }

        .g-p-block-t {
            padding-top: var(--block-padding);
        }

        .g-p-block-b {
            padding-bottom: var(--block-padding);
        }

        .g-p-block-x {
            padding-left: var(--block-padding);
            padding-right: var(--block-padding);
        }

        .g-p-block-y {
            padding-top: var(--block-padding);
            padding-bottom: var(--block-padding);
        }

        .g-p-page {
            padding: var(--page-padding-desktop);
        }

        .g-p-page-x {
            padding-left: var(--page-padding-desktop);
            padding-right: var(--page-padding-desktop);
        }

        .g-m-block {
            margin: var(--block-gap);
        }

        .g-m-block-t {
            margin-top: var(--block-gap);
        }

        .g-m-block-b {
            margin-bottom: var(--block-gap);
        }

        .g-m-block-x {
            margin-left: var(--block-gap);
            margin-right: var(--block-gap);
        }

        .g-gap-block {
            gap: var(--block-gap);
        }

        .g-gap-grid {
            gap: var(--grid-gap);
        }

        /* Essential Fix for Mobile Scroll Lock */
        html.gst-no-scroll,
        body.gst-no-scroll {
            overflow: hidden !important;
            height: 100% !important;
            width: 100% !important;
            position: fixed !important;
        }

        @media (max-width: 1024px) {
            .g-p-block {
                padding: 24px 40px;
            }

            .g-p-page {
                padding: var(--page-padding-tablet);
            }

            .g-p-page-x {
                padding-left: var(--page-padding-tablet);
                padding-right: var(--page-padding-tablet);
            }
        }

        @media (max-width: 768px) {
            .g-p-block {
                padding: var(--block-padding-mobile);
            }

            .g-p-page {
                padding: var(--page-padding-mobile);
            }

            .g-p-page-x {
                padding-left: var(--page-padding-mobile);
                padding-right: var(--page-padding-mobile);
            }
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* ========================================
   LAYOUT STRUCTURE
   ======================================== */
        .gestemas-app-layout {
            display: flex;
            min-height: 100vh;
            min-height: 100dvh;
            /* Dynamic viewport height */
            background: var(--gestemas-bg);
            width: 100vw;
            max-width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            overflow-x: clip; /* Fix for double scrollbar: clip allows y to be truly visible */
            overflow-y: visible; /* Prevent internal vertical scroll */
        }

        /* ========================================
   GLOBAL FAB SYSTEM (Silicon Valley Premium)
   ======================================== */
        .gestemas-fab-container {
            position: fixed;
            bottom: var(--fab-bottom, 32px);
            right: var(--fab-right, 32px);
            left: auto !important;
            z-index: var(--z-fixed-header, 4000);
            display: none;
            /* JS (fab.js) controla la visibilidad según la vista activa */
            flex-direction: column;
            align-items: flex-end; /* Aligned right now */
            gap: 15px;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        /* Estado visible — aplicado por JS cuando la vista está permitida */
        .gestemas-fab-container.fab-visible {
            display: flex;
            opacity: 1;
            visibility: visible;
        }

        /* If positioned left, align options left */
        .gestemas-fab-container[style*="--fab-left: 30px"] {
            align-items: flex-start;
        }

        .gestemas-fab-main {
            width: var(--fab-main-size, 60px);
            height: var(--fab-main-size, 60px);
            border-radius: 50%;
            background: var(--fab-color, var(--gestemas-primary));
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(99, 102, 241, 0);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 2;
            pointer-events: auto;
        }

        .gestemas-fab-main:hover {
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .gestemas-fab-main.is-active {
            background: #ef4444 !important;
            transform: rotate(45deg);
            box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
        }

        .gestemas-fab-main i {
            width: var(--fab-main-icon-size, 28px);
            height: var(--fab-main-icon-size, 28px);
            stroke-width: 2.5px;
        }

        .gestemas-fab-options {
            display: flex;
            flex-direction: column;
            gap: var(--block-gap);
            opacity: 0;
            pointer-events: none;
            transform: translateY(20px) scale(0.8);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        .gestemas-fab-container.is-active .gestemas-fab-options {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0) scale(1);
        }
        .gestemas-fab-container.is-active {
            pointer-events: auto;
        }

        .fab-option-wrapper {
            display: flex;
            align-items: center;
            gap: var(--block-gap);
            justify-content: flex-end;
        }

        .gestemas-fab-container[style*="--fab-left: 30px"] .fab-option-wrapper {
            flex-direction: row-reverse;
        }

        .fab-label {
            background: var(--fab-label-bg, rgba(15, 23, 42, 0.8));
            backdrop-filter: blur(4px);
            color: var(--fab-label-text, white);
            padding: 6px 12px;
            border-radius: 8px;
            font-size: var(--fab-label-size, 13px);
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(10px);
            transition: all 0.2s;
            pointer-events: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: var(--fab-labels-display, flex);
        }

        .gestemas-fab-container.is-active .fab-label {
            opacity: 1;
            transform: translateX(0);
        }

        .fab-option {
            width: var(--fab-option-size, 44px);
            height: var(--fab-option-size, 44px);
            border-radius: 50%;
            background: white;
            border: 1px solid var(--gestemas-gray-200);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.2s;
            color: var(--gestemas-gray-700);
        }

        .fab-option:hover {
            background: var(--gestemas-gray-50);
            transform: scale(1.1);
            color: var(--gestemas-primary);
        }

        .fab-option i {
            width: var(--fab-option-icon-size, 20px);
            height: var(--fab-option-icon-size, 20px);
        }


        /* ========================================
   SIDEBAR (Desktop Default - Hidden Mobile)
   ======================================== */
        .gestemas-sidebar {
            width: var(--gestemas-sidebar-width);
            background: white;
            border-right: 1px solid var(--gestemas-gray-200);
            border-left: none !important;
            display: none;
            /* Mobile-first: hidden by default */
            flex-direction: column;
            position: fixed;
            height: 100vh;
            height: 100dvh;
            left: 0 !important;
            right: auto !important;
            top: 0;
            z-index: var(--z-sidebar, 900);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        @media (min-width: 1025px) {
            .gestemas-sidebar {
                display: flex !important;
                transform: none !important;
            }
        }

        /* Mobile Sidebar Overlay Mode */
        @media (max-width: 1024px) {
            .gestemas-sidebar {
                display: flex;
                left: auto !important;
                right: 0 !important;
                transform: translateX(110%);
                border-left: 1px solid var(--gestemas-gray-200);
                border-right: none !important;
                box-shadow: none;
                visibility: hidden;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch;
            }

            .gestemas-sidebar.is-open,
            .gestemas-sidebar.is-active {
                transform: translateX(0) !important;
                visibility: visible;
                overflow-y: auto !important; /* Permitir scroll interno vertical pleno */
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch;
                z-index: 10001;
                box-shadow: -20px 0 50px rgba(15, 23, 42, 0.25);
            }
            
            /* Scroll Lock for body */
            body.sidebar-open {
                overflow: hidden !important;
                touch-action: none !important; /* Estabiliza en iOS Safari */
            }

            /* Avoid visual conflict: hide floating quick actions while sidebar drawer is open */
            body.sidebar-open .gestemas-fab-container {
                opacity: 0 !important;
                visibility: hidden !important;
                pointer-events: none !important;
            }

            body.sidebar-open .gestemas-sos-standalone {
                opacity: 0 !important;
                visibility: hidden !important;
                pointer-events: none !important;
            }
        }

        .gestemas-sidebar__brand {
            padding-top: 32px;
            padding-bottom: 32px;
            padding-left: 24px !important;
            padding-right: 24px !important;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid var(--gestemas-gray-100);
            flex-shrink: 0;
        }

        .brand-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--gestemas-primary) 0%, var(--gestemas-secondary) 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .gestemas-sidebar-close {
            display: none;
            background: none;
            border: none;
            color: var(--gestemas-gray-600);
            cursor: pointer;
            padding: 8px;
            margin-left: auto;
            border-radius: 50%;
            transition: background 0.2s;
        }

        @media (max-width: 1024px) {
            .gestemas-sidebar-close {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .gestemas-sidebar-close:active {
                background: var(--gestemas-gray-100);
            }
            .gestemas-sidebar-close i {
                width: 24px;
                height: 24px;
            }
        }

        .brand-name {
            font-size: 20px;
            font-weight: 700;
            color: var(--gestemas-gray-900);
        }

        .gestemas-sidebar__nav {
            flex: 1;
            padding-top: 24px;
            padding-bottom: 24px;
            padding-left: 24px !important;
            padding-right: 24px !important;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .nav-section-label {
            font-size: 11px;
            text-transform: uppercase;
            color: var(--gestemas-gray-400);
            font-weight: 700;
            margin: 20px 0 8px 12px;
            letter-spacing: 0.5px;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: var(--block-padding-mobile);
            border-radius: 12px;
            color: var(--gestemas-gray-600);
            text-decoration: none;
            font-size: calc(14px * var(--a11y-font-scale, 1));
            font-weight: 500;
            margin-bottom: 4px;
            transition: all 0.2s;
            -webkit-tap-highlight-color: transparent;
        }
        
        .nav-item * {
            pointer-events: none;
        }

        .nav-item:hover {
            background: var(--gestemas-gray-50);
            color: var(--gestemas-gray-900);
        }

        .nav-item.is-active {
            background: rgba(14, 165, 233, 0.08);
            color: var(--gestemas-primary);
            font-weight: 600;
        }

        .nav-item i {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        .gestemas-sidebar__footer {
            padding-top: 24px;
            padding-bottom: 24px;
            padding-left: 24px !important;
            padding-right: 24px !important;
            border-top: 1px solid var(--gestemas-gray-100);
            flex-shrink: 0;
        }

        /* Legal links visibility management — already defined above, no override needed */

        .user-mini-profile {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: var(--block-padding-mobile);
            border-radius: 12px;
            background: var(--gestemas-gray-50);
        }

        .avatar-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--gestemas-secondary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .user-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .user-info .name {
            font-size: 13px;
            font-weight: 600;
            color: var(--gestemas-gray-900);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-info .role {
            font-size: 11px;
            color: var(--gestemas-gray-500);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .logout-btn {
            background: transparent;
            border: none;
            color: var(--gestemas-gray-400);
            cursor: pointer;
            padding: var(--block-padding-mobile);
            border-radius: 8px;
            transition: 0.2s;
        }

        .logout-btn:hover {
            color: var(--gestemas-error);
            background: var(--gestemas-error-light);
        }

        /* ========================================
   ACCESSIBILITY MENU (A11y Premium)
   ======================================== */
        .gestemas-a11y-menu {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
            padding: 8px;
            background: var(--gestemas-gray-50);
            border-radius: 10px;
            justify-content: center;
        }

        .a11y-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border: 1px solid var(--gestemas-gray-200);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            color: var(--gestemas-gray-600);
        }

        .a11y-btn:hover {
            background: var(--gestemas-primary-light);
            border-color: var(--gestemas-primary);
            color: var(--gestemas-primary);
            transform: translateY(-1px);
        }

        .a11y-btn.is-active {
            background: var(--gestemas-primary);
            color: white;
            border-color: var(--gestemas-primary);
        }

        /* ========================================
   SIDEBAR OVERLAY (Mobile)
   ======================================== */
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(15, 20, 25, 0.4);
            backdrop-filter: blur(4px);
            z-index: 10000; /* Just below the mobile sidebar (10001) */
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .sidebar-overlay.active {
            display: block;
            opacity: 1;
        }

        /* Notifications overlay specific z-index */
        #notifications-overlay {
            z-index: calc(var(--z-notification) - 1);
        }

        /* ========================================
   MAIN CONTENT + STICKY HEADER
   ======================================== */
        .gestemas-main-content {
            flex: 1;
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            overflow-x: clip; /* Fix for double scrollable areas (computed auto) */
            overflow-y: visible !important; /* Ensure content flows to body scroll */
            height: auto !important;
        }

        /* FIXED HEADER - Master Positioning */
        .gestemas-top-header {
            position: fixed !important;
            top: 0;
            left: 0;
            right: 0;
            height: var(--gestemas-mobile-header-height, 64px);
            z-index: var(--z-fixed-header, 1100);
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid var(--gestemas-gray-200);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .gestemas-top-header.is-scrolled {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            border-bottom-color: transparent;
        }

        /* Compensate for WP Admin Bar */
        .admin-bar .gestemas-top-header {
            top: 32px;
        }

        @media (max-width: 782px) {
            .admin-bar .gestemas-top-header {
                top: 46px;
            }

            /* Only hide if explicitly blocked by a structural element that replaces it */
            body.hide-fab .gestemas-fab-container {
                display: none !important;
            }
        }

        /* Desktop Sidebar Compensation */
        @media (min-width: 1025px) {
            .gestemas-top-header {
                left: var(--gestemas-sidebar-width) !important;
                right: 0 !important;
                width: calc(100% - var(--gestemas-sidebar-width)) !important;
                /* Smart Padding: Uses dynamic variable for full-width support */
                padding: var(--gestemas-header-padding, 0 var(--gst-page-padding-desktop, 40px));
                height: 70px;
            }

            .gestemas-page-header {
                padding: 0 var(--gst-page-padding-desktop, 40px);
                max-width: none !important;
                margin: 0;
            }

            .gestemas-main-content {
                margin-left: var(--gestemas-sidebar-width) !important;
                margin-right: 0 !important;
                width: calc(100% - var(--gestemas-sidebar-width));
                padding-top: 100px !important;
            }
            
            .gestemas-sidebar {
                display: flex !important;
                transform: none !important;
            }
        }

        /* Page Content Base Padding & Responsive Reset */
        @media (max-width: 1024px) {
            .gestemas-main-content {
                padding-top: var(--gestemas-mobile-header-height, 64px);
                margin-left: 0 !important;
                margin-right: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
            }
        }

        .gestemas-content-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0 var(--gst-page-padding-desktop, 40px);
            max-width: none;
            margin: 0;
            width: 100%;
            animation: fadeIn 0.4s ease-out;
            overflow-x: visible !important;
        }

        /* Fullwidth override — garantiza layout estable al recargar en campus/recursos */
        body.gestemas-campus-fullwidth-view .gestemas-content-wrapper {
            padding-left: 0 !important;
            padding-right: 0 !important;
            max-width: none !important;
            margin: 0 !important;
        }

        @media (max-width: 768px) {
            .gestemas-content-wrapper {
                padding: var(--page-padding-mobile, 16px);
                padding-bottom: 100px;
            }
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .header-brand {
            display: flex;
            /* Visible on mobile */
            align-items: center;
            gap: 8px;
            font-size: 18px;
            font-weight: 700;
            color: var(--gestemas-gray-900);
        }

        .header-brand i {
            color: var(--gestemas-primary);
            width: 24px;
            height: 24px;
        }

        @media (min-width: 1025px) {
            .header-brand {
                display: none;
            }

            /* Hide on desktop - sidebar shows logo */
        }

        .mobile-menu-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            /* Give it a light background to contrast against anything */
            border: 1px solid var(--gestemas-gray-200);
            cursor: pointer;
            padding: 8px;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            color: var(--gestemas-primary) !important;
            box-shadow: var(--gestemas-shadow-sm);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            -webkit-tap-highlight-color: transparent;
            z-index: 1001;
        }

        .mobile-menu-toggle i {
            width: 24px !important;
            height: 24px !important;
            color: var(--gestemas-primary) !important;
            stroke-width: 2.5px !important;
            /* Make it thicker */
        }

        .mobile-menu-toggle:hover {
            background: var(--gestemas-primary-light);
            border-color: var(--gestemas-primary);
            transform: translateY(-2px);
        }

        .mobile-menu-toggle:active {
            transform: scale(0.95);
        }

        /* Ensure icons in header-right also don't disappear */
        .header-right .icon-btn-ghost {
            color: var(--gestemas-gray-700) !important;
        }

        .header-right .icon-btn-ghost i {
            stroke-width: 2px !important;
        }

        @media (min-width: 1025px) {
            .mobile-menu-toggle {
                display: none;
            }
        }

        /* ========================================
   SEARCH - MOBILE FLOATING / DESKTOP INLINE
   ======================================== */
        .header-search {
            flex: 1;
            max-width: 100%;
            position: relative;
        }

        /* Mobile: Search as floating icon button */
        @media (max-width: 1024px) {
            .header-search {
                flex: initial;
                max-width: none;
            }

            .header-search .search-input-wrapper {
                width: 44px;
                height: 44px;
                background: var(--gestemas-gray-100);
                border: 1px solid var(--gestemas-gray-200);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s ease;
                padding: 0;
            }

            .header-search .search-input-wrapper input {
                display: none;
                /* Hidden until active */
            }

            .header-search .search-shortcut {
                display: none;
            }

            .header-search .mobile-search-close {
                display: none !important;
            }

            /* Active: Full-screen search - Glassmorphism V3 Pro */
            .header-search.is-active {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
                height: 100vh !important;
                height: 100dvh !important;
                z-index: 100000 !important;
                /* Glassmorphism V3 Pro Base */
                background: rgba(255, 255, 255, 0.75) !important;
                backdrop-filter: blur(28px) saturate(200%) !important;
                -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
                display: flex !important;
                flex-direction: column;
                padding: 24px;
                padding-top: calc(var(--safe-area-top, 0px) + 24px);
                animation: searchSlideDown 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            }

            @keyframes searchSlideDown {
                from {
                    opacity: 0;
                    transform: translateY(-20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .header-search.is-active .search-input-wrapper {
                width: 100%;
                height: 60px;
                background: rgba(255, 255, 255, 0.9);
                border: 1px solid rgba(0, 0, 0, 0.06);
                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
                border-radius: 20px;
                padding: 0 20px;
                display: flex;
                align-items: center;
                transition: all 0.3s ease;
                flex-shrink: 0;
            }

            .header-search.is-active .search-input-wrapper:focus-within {
                background: #ffffff;
                box-shadow: 0 16px 40px rgba(99, 102, 241, 0.12);
                border-color: rgba(99, 102, 241, 0.3);
            }

            .header-search.is-active .search-input-wrapper input {
                display: block;
                width: 100%;
                padding: 12px 0 12px 0;
                /* Clear desktop padding, let wrapper handle it */
                background: transparent;
                border: none;
                /* Wrapper provides border */
                font-size: 16px;
                /* Better for mobile typing */
                box-shadow: none;
                /* Remove focus ring inside wrapper */
            }

            .header-search.is-active .search-input-wrapper input:focus {
                box-shadow: none;
                border: none;
            }

            .header-search.is-active .search-input-wrapper .search-icon {
                position: relative;
                left: 0;
                margin-right: 12px;
                pointer-events: none;
            }

            .header-search.is-active .mobile-search-close {
                display: flex;
                position: absolute;
                top: calc(var(--safe-area-top, 0px) + 20px);
                left: 20px; /* Move search close to left since menu is right */
                right: auto !important;
                width: 44px;
                height: 44px;
                align-items: center;
                justify-content: center;
                background: rgba(255, 255, 255, 0.25);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.4);
                box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
                border-radius: 50%;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                z-index: 1001;
                color: #6366f1;
                animation: nexus-close-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            @keyframes nexus-close-pop {
                0% {
                    transform: scale(0) rotate(-90deg);
                    opacity: 0;
                }

                100% {
                    transform: scale(1) rotate(0deg);
                    opacity: 1;
                }
            }

            .header-search.is-active .mobile-search-close:hover {
                transform: scale(1.1) rotate(90deg);
                background: rgba(255, 255, 255, 0.4);
                color: #4f46e5;
                box-shadow: 0 12px 40px rgba(99, 102, 241, 0.25);
            }

            .header-search.is-active .mobile-search-close i {
                width: 24px;
                height: 24px;
            }

            /* Fix Search Results absolute container when mobile overlay is active */
            .header-search.is-active .gestemas-search-results {
                position: relative;
                top: 16px;
                width: 100%;
                max-height: calc(100vh - 120px);
                /* Leave room for input wrapper */
                background: rgba(255, 255, 255, 0.6);
                border: 1px solid rgba(255, 255, 255, 0.6);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
                backdrop-filter: blur(12px) !important;
                -webkit-backdrop-filter: blur(12px) !important;
                animation: scaleInResults 0.3s ease-out;
            }

            @keyframes scaleInResults {
                from {
                    opacity: 0;
                    transform: scale(0.98);
                }

                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }
        }

        /* Desktop: Inline search */
        @media (min-width: 1025px) {
            .header-search {
                max-width: 550px;
            }

            .mobile-search-close {
                display: none !important;
            }
        }

        .search-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .search-input-wrapper .search-icon {
            position: absolute;
            left: 16px;
            color: var(--gestemas-gray-600);
            width: 18px;
            height: 18px;
            pointer-events: auto;
            cursor: pointer;
            z-index: 20;
            flex-shrink: 0;
        }

        @media (max-width: 1024px) {
            .search-input-wrapper .search-icon {
                position: relative;
                left: 0;
                cursor: pointer;
                pointer-events: auto;
            }
        }

        .search-input-wrapper input {
            width: 100%;
            padding: 12px 100px 12px 52px !important;
            /* Precise padding to avoid icon overlap (16px left + 18px icon + 18px gap = 52px) */
            border: 1px solid var(--gestemas-gray-200);
            border-radius: 12px;
            background: var(--gestemas-gray-50);
            font-size: 14px;
            transition: all 0.2s;
            color: var(--gestemas-gray-900);
        }

        .search-input-wrapper input::placeholder {
            color: var(--gestemas-gray-400);
        }

        .search-input-wrapper input:focus {
            outline: none;
            border-color: var(--gestemas-primary);
            background: white;
            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
        }

        .search-shortcut {
            font-size: 11px;
            background: var(--gestemas-gray-200);
            padding: 4px 8px;
            border-radius: 6px;
            color: var(--gestemas-gray-500);
            font-weight: 600;
        }

        /* SEARCH RESULTS - FLOATING PANEL - PREMIUM UX */
        .gestemas-search-results {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            width: 100%;
            background: white;
            border-radius: var(--gestemas-radius-lg);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid var(--gestemas-gray-200);
            z-index: var(--z-modal);
            max-height: 450px;
            overflow-y: auto;
            transform-origin: top center;
        }

        .gestemas-search-results.is-visible {
            display: block;
            animation: searchSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Mobile specific: results inside the fullscreen modal with fixed overlay */
        @media (max-width: 1024px) {
            .header-search.is-active .gestemas-search-results {
                position: absolute;
                top: 100px;
                left: 20px;
                right: 20px;
                bottom: 20px;
                width: auto;
                max-height: none;
                box-shadow: none;
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
                z-index: 10000;
            }
        }

        @keyframes searchSlideIn {
            from {
                opacity: 0;
                transform: translateY(-8px) scale(0.96);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Search Category Headers */
        .search-category {
            border-bottom: 1px solid var(--gestemas-gray-100);
        }

        .search-category:last-child {
            border-bottom: none;
        }

        .search-category-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: var(--block-padding-mobile) var(--block-padding-tablet) var(--block-gap);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--gestemas-gray-500);
            background: var(--gestemas-gray-50);
        }

        .search-category-header i {
            width: 14px;
            height: 14px;
        }

        /* Search Items - Enhanced */
        .search-item {
            display: flex;
            align-items: center;
            padding: var(--block-padding-mobile) var(--block-padding-tablet);
            cursor: pointer;
            transition: all 0.15s ease;
            border-bottom: 1px solid var(--gestemas-gray-50);
            position: relative;
        }

        .search-item:last-child {
            border-bottom: none;
        }

        .search-item:hover,
        .search-item.is-focused {
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(59, 130, 246, 0.08) 100%);
        }

        .search-item.is-focused {
            box-shadow: inset 3px 0 0 var(--gestemas-primary);
        }

        .search-item:active {
            transform: scale(0.99);
        }

        .search-item-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
            font-size: 16px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .search-item:hover .search-item-icon {
            transform: scale(1.05);
        }

        /* Icon Colors - Premium Gradients */
        .search-item-icon.student {
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
            color: var(--gestemas-primary);
        }

        .search-item-icon.intervention {
            background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
            color: var(--gestemas-secondary);
        }

        .search-item-icon.task {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            color: var(--gestemas-success);
        }

        .search-item-icon.default {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            color: var(--gestemas-gray-600);
        }

        .search-item-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .search-item-title {
            font-weight: 600;
            color: var(--gestemas-gray-900);
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .search-item-title mark {
            background: rgba(14, 165, 233, 0.2);
            color: inherit;
            padding: 0 2px;
            border-radius: 2px;
        }

        .search-item-subtitle {
            font-size: 12px;
            color: var(--gestemas-gray-500);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .search-item-arrow {
            width: 16px;
            height: 16px;
            color: var(--gestemas-gray-300);
            transition: transform 0.2s ease;
        }

        .search-item:hover .search-item-arrow {
            transform: translateX(3px);
            color: var(--gestemas-primary);
        }

        /* Loading State - Skeleton */
        .search-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--block-gap);
            padding: 32px 40px;
            color: var(--gestemas-gray-500);
            font-size: 14px;
        }

        .search-skeleton {
            padding: var(--block-padding-mobile) var(--block-padding-tablet);
        }

        .search-skeleton-item {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 12px;
        }

        .search-skeleton-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        .search-skeleton-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .search-skeleton-line {
            height: 12px;
            border-radius: 4px;
            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        .search-skeleton-line.short {
            width: 60%;
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* Empty State */
        .search-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--page-padding-desktop) var(--page-padding-mobile);
            text-align: center;
            color: var(--gestemas-gray-500);
        }

        .search-empty i {
            width: 48px;
            height: 48px;
            margin-bottom: var(--block-gap);
            color: var(--gestemas-gray-300);
        }

        .search-empty p {
            font-size: 14px;
            margin: 0;
        }

        /* Keyboard Shortcut Badge */
        .search-shortcut-badge {
            position: absolute;
            right: var(--block-padding-mobile);
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 4px;
            padding: var(--block-padding-mobile);
            background: var(--gestemas-gray-100);
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            color: var(--gestemas-gray-500);
            pointer-events: none;
        }

        @media (max-width: 1024px) {
            .search-shortcut-badge {
                display: none;
            }
        }

        /* Recent Searches */
        .search-recent-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--block-padding-mobile) var(--block-padding-mobile) var(--block-gap);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--gestemas-gray-500);
            background: var(--gestemas-gray-50);
        }

        .search-recent-clear {
            font-size: 11px;
            font-weight: 500;
            color: var(--gestemas-primary);
            cursor: pointer;
            text-transform: none;
            letter-spacing: 0;
        }

        .search-recent-clear:hover {
            text-decoration: underline;
        }

        .search-recent-item {
            display: flex;
            align-items: center;
            gap: var(--block-gap);
            padding: var(--block-padding-mobile) var(--block-padding-tablet);
            cursor: pointer;
            transition: background 0.15s;
            font-size: 14px;
            color: var(--gestemas-gray-700);
        }

        .search-recent-item:hover {
            background: var(--gestemas-gray-50);
        }

        .search-recent-item i {
            width: 16px;
            height: 16px;
            color: var(--gestemas-gray-400);
        }

        /* MOBILE SEARCH RESULTS OVERRIDE */
        @media (max-width: 1024px) {
            .header-search.is-active .gestemas-search-results {
                position: fixed !important;
                top: calc(var(--safe-area-top, 0px) + 88px) !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100% !important;
                max-height: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                border: none !important;
                border-top: 1px solid var(--gestemas-gray-200) !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                animation: none !important;
                background: white !important;
                z-index: 100001 !important;
                /* Above parent */
            }
        }

        /* ========================================
   HEADER RIGHT - NOTIFICATIONS & AVATAR
   ======================================== */
        .header-right {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        @media (min-width: 1025px) {
            .header-right {
                gap: 12px;
            }
        }

        .icon-btn-ghost {
            position: relative;
            width: 44px;
            height: 44px;
            border: none;
            background: transparent;
            border-radius: 12px;
            cursor: pointer;
            color: var(--gestemas-gray-600);
            transition: 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
        }

        .icon-btn-ghost:hover {
            background: var(--gestemas-gray-100);
        }

        /* Redundant styles removed - now handled in gestemas.css */

        .avatar-circle-sm {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--gestemas-secondary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.2s;
            flex-shrink: 0;
        }

        .avatar-circle-sm:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

        /* ========================================
   NOTIFICATIONS PANEL - SLIDE IN
   ======================================== */
        .gestemas-notifications-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            /* Default to full width for mobile safety */
            max-width: 380px;
            /* Limit on larger screens */
            height: 100%;
            height: 100dvh;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(28px) saturate(200%);
            -webkit-backdrop-filter: blur(28px) saturate(200%);
            border-left: 1px solid var(--gestemas-gray-200);
            box-shadow: -15px 0 45px rgba(0, 0, 0, 0.1);
            z-index: var(--z-notification, 3000);
            transform: translateX(100%);
            opacity: 0;
            visibility: hidden;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s, visibility 0.4s;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }

        /* Adjust for Admin Bar */
        .admin-bar .gestemas-notifications-panel {
            top: 32px;
            height: calc(100vh - 32px);
            height: calc(100dvh - 32px);
        }

        @media (max-width: 782px) {
            .admin-bar .gestemas-notifications-panel {
                top: 46px;
                height: calc(100vh - 46px);
                height: calc(100dvh - 46px);
            }
        }

        .gestemas-notifications-panel.active {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
            box-shadow: -20px 0 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
        }

        @media (max-width: 480px) {
            .gestemas-notifications-panel {
                width: 100%;
                box-sizing: border-box !important;
            }
        }

        /* ========================================
   GLOBAL CLOSE BUTTONS VISIBILITY (FIX)
   Ensuring all "X" icons are legible and visible
   ======================================== */
        .modal-close-premium-hero,
        .btn-close-modal,
        .close-assign-modal,
        .close-btn,
        .close-import-modal,
        .close-modal,
        .close-modal-task,
        .icon-btn-close,
        .legal-modal-close,
        .modal-close-premium,
        .nexus-modal-close,
        [data-close-modal] {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            opacity: 1 !important;
            visibility: visible !important;
            cursor: pointer !important;
            min-width: 44px;
            min-height: 44px;
            z-index: 10100 !important;
            /* Above almost everything else */
            background: var(--gestemas-gray-100) !important;
            border-radius: 50% !important;
            border: 1px solid var(--gestemas-gray-200) !important;
            color: var(--gestemas-gray-700) !important;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
            pointer-events: auto !important;
        }

        .modal-close-premium-hero {
            background: rgba(239, 68, 68, 0.1) !important;
            border-color: rgba(239, 68, 68, 0.2) !important;
            color: #ef4444 !important;
        }

        .btn-close-modal:hover,
        .close-btn:hover,
        .close-modal:hover,
        .icon-btn-close:hover,
        .legal-modal-close:hover,
        .modal-close-premium:hover,
        .nexus-modal-close:hover,
        [data-close-modal]:not(.gestemas-btn):hover {
            background: var(--gestemas-gray-200) !important;
            transform: rotate(90deg);
        }

        /* Ensure icon color and size within these buttons */
        .modal-close-premium-hero i,
        .modal-close-premium-hero svg,
        .modal-close-premium i,
        .modal-close-premium svg,
        .nexus-modal-close i,
        .nexus-modal-close svg,
        .legal-modal-close i,
        .legal-modal-close svg,
        .close-btn i,
        .close-btn svg,
        .icon-btn-close i,
        .icon-btn-close svg,
        .close-modal i,
        .close-modal svg,
        .btn-close-modal i,
        .btn-close-modal svg,
        [data-close-modal] i,
        [data-close-modal] svg {
            width: 20px !important;
            height: 20px !important;
            display: block !important;
            stroke-width: 2.5px !important;
            color: inherit;
            /* Fallback */
        }

        /* Color Overrides for Visibility */
        .modal-close-premium-hero {
            color: #ef4444 !important;
            background: rgba(239, 68, 68, 0.1) !important;
        }

        .modal-close-premium,
        .nexus-modal-close,
        .legal-modal-close,
        .mobile-search-close,
        .btn-close-modal {
            color: var(--gestemas-gray-600) !important;
        }

        .modal-close-premium:hover,
        .nexus-modal-close:hover,
        .legal-modal-close:hover,
        .mobile-search-close:hover {
            color: var(--gestemas-primary) !important;
            background: var(--gestemas-gray-100) !important;
        }

        /* Panel Header */
        .notif-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 32px 40px;
            padding-top: var(--block-padding);
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            flex-shrink: 0;
            background: transparent;
            /* Allow glassmorphism to show through */
        }

        /* ========================================
           NOTIFICATION PANEL ENHANCEMENTS (v3)
           Glassmorphism · Compact · Responsive
           ======================================== */

        /* Filter Bar Container (Glass v3) */
        /* SUPER PRO NOTIFICATION PANEL UI (Glassmorphism v3 Premium) */
        .gestemas-app .gestemas-notifications-panel {
            all: unset !important;
            display: flex !important;
            flex-direction: column !important;
            position: fixed !important;
            top: 20px !important;
            right: 20px !important;
            width: 420px !important;
            max-width: calc(100% - 40px) !important;
            height: calc(100vh - 40px) !important;
            background: rgba(255, 255, 255, 0.75) !important;
            backdrop-filter: blur(30px) saturate(1.8) !important;
            -webkit-backdrop-filter: blur(30px) saturate(1.8) !important;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2) !important;
            z-index: 9999 !important;
            border: 1px solid rgba(255, 255, 255, 0.4) !important;
            border-radius: 28px !important;
            box-sizing: border-box !important;
            font-family: var(--gestemas-font-main) !important;
            overflow: hidden !important;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        /* ============================================================
           NOTIFICATIONS & COMMUNICATIONS HUB - GLASS PRO v3 (UNIFIED)
           ============================================================ */

        /* 1. Main Slide-in Panel */
        #gestemas-notifications-panel {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            width: 480px !important;
            max-width: 100vw !important;
            height: 100vh !important;
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(40px) saturate(200%) !important;
            -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
            border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
            box-shadow: -20px 0 80px rgba(0, 0, 0, 0.15) !important;
            z-index: 10001 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        #gestemas-notifications-panel::before {
            content: '' !important;
            position: absolute !important;
            top: -10% !important;
            left: -10% !important;
            width: 120% !important;
            height: 120% !important;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 60%) !important;
            z-index: -1 !important;
            pointer-events: none !important;
        }

        /* 2. Intelligent Search & Filter Architecture */
        .notif-filter-bar,
        .hub-filter-bar {
            padding: 14px 18px !important;
            background: rgba(255, 255, 255, 0.3) !important;
            margin: 10px 20px !important;
            border-radius: 22px !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
        }

        .notif-chips-row,
        .hub-chips-row {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            width: 100% !important;
            overflow: hidden !important;
        }

        .type-filters-scroll,
        .hub-chips {
            display: flex !important;
            gap: 10px !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            flex: 1 !important;
            padding: 5px 0 !important;
        }

        .type-filters-scroll::-webkit-scrollbar,
        .hub-chips::-webkit-scrollbar {
            display: none !important;
        }

        /* Essential Chips Logic */
        .type-chip {
            all: unset !important;
            padding: 10px 22px !important;
            border-radius: 14px !important;
            font-size: 13px !important;
            font-weight: 750 !important;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
            /* Critical: Prevent squashing */
            background: rgba(255, 255, 255, 0.6) !important;
            border: 1px solid rgba(255, 255, 255, 0.8) !important;
            color: var(--gestemas-gray-600) !important;
            cursor: pointer !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
            backdrop-filter: blur(10px) !important;
        }

        .type-chip:hover {
            transform: translateY(-2px) !important;
            background: rgba(255, 255, 255, 0.95) !important;
            color: var(--gestemas-primary) !important;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
        }

        .type-chip.active {
            background: linear-gradient(135deg, var(--gestemas-primary) 0%, #4f46e5 100%) !important;
            color: white !important;
            border-color: transparent !important;
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3) !important;
        }

        .type-chip.active[data-type="gestia"] {
            background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
        }

        .type-chip.active[data-type="merito"] {
            background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
        }

        .notif-chips-row {
            display: flex !important;
            overflow-x: auto !important;
            flex-wrap: nowrap !important;
            gap: 10px !important;
            padding: 15px 20px !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
            background: rgba(255, 255, 255, 0.2) !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
        }

        .notif-chips-row::-webkit-scrollbar {
            display: none !important;
        }

        .type-chip {
            padding: 6px 14px !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            border-radius: 12px !important;
            white-space: nowrap !important;
        }

        .notif-header-title {
            display: flex !important;
            align-items: center !important;
            gap: 14px !important;
        }

        .notif-header-title h4 {
            all: unset !important;
            font-family: 'Outfit', sans-serif !important;
            font-size: 1.35rem !important;
            font-weight: 850 !important;
            color: var(--gestemas-gray-900) !important;
            letter-spacing: -0.04em !important;
        }

        .notif-panel-body {
            flex: 1 !important;
            overflow-y: auto !important;
            padding: 15px 25px !important;
            scrollbar-width: thin !important;
        }

        .notif-panel-footer {
            padding: 8px 24px !important;
            border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
            background: rgba(255, 255, 255, 0.4) !important;
        }

        .btn-ghost-full {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            padding: 8px 16px !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            color: var(--gestemas-gray-500) !important;
            cursor: pointer !important;
            transition: all 0.2s !important;
            margin: 0 auto !important;
            opacity: 0.7 !important;
        }

        .btn-ghost-full:hover {
            color: var(--gestemas-primary) !important;
            opacity: 1 !important;
        }

        .notif-panel-load-more {
            padding: 10px 0 !important;
            text-align: center !important;
        }

        .btn-load-more {
            all: unset !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            padding: 6px 16px !important;
            background: rgba(var(--gestemas-primary-rgb), 0.05) !important;
            color: var(--gestemas-primary) !important;
            border-radius: 20px !important;
            font-size: 11px !important;
            font-weight: 800 !important;
            cursor: pointer !important;
            transition: all 0.2s !important;
        }

        .btn-load-more:hover {
            background: var(--gestemas-primary) !important;
            color: white !important;
            transform: scale(1.02) !important;
        }

        /* 4. Notification Items (Extreme Pro Look) */
        .notif-item {
            all: unset !important;
            display: flex !important;
            position: relative !important;
            gap: 16px !important;
            padding: 20px !important;
            margin-bottom: 12px !important;
            border-radius: 20px !important;
            background: white !important;
            border: 1.5px solid #f1f5f9 !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
            cursor: pointer !important;
            box-sizing: border-box !important;
            width: 100% !important;
            opacity: 0;
            transform: translateY(15px);
            animation: notifEntrance 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
            --notif-accent: var(--gestemas-primary);
        }

        @keyframes notifEntrance {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .notif-item:hover {
            background: rgba(255, 255, 255, 0.85) !important;
            transform: scale(1.02) translateY(-2px) !important;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07) !important;
            border-color: #ffffff !important;
        }

        .notif-item.unread {
            background: #fdf2f2 !important;
            border-color: #fee2e2 !important;
            border-left: 5px solid var(--gestemas-primary) !important;
        }

        .notif-item.unread::after {
            content: '' !important;
            position: absolute !important;
            top: 14px !important;
            right: 14px !important;
            width: 8px !important;
            height: 8px !important;
            background: var(--gestemas-primary) !important;
            border-radius: 50% !important;
            box-shadow: 0 0 12px var(--gestemas-primary) !important;
        }

        .notif-icon {
            width: 44px !important;
            height: 44px !important;
            border-radius: 14px !important;
            background: color-mix(in srgb, var(--notif-accent) 12%, #ffffff) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04) !important;
            color: var(--notif-accent) !important;
        }

        .notif-content {
            flex: 1 !important;
            min-width: 0 !important;
        }

        .notif-item-header {
            display: flex !important;
            justify-content: space-between !important;
            align-items: flex-start !important;
            gap: 8px !important;
            margin-bottom: 6px !important;
        }

        .notif-badges {
            display: flex !important;
            gap: 6px !important;
            flex-wrap: wrap !important;
        }

        .notif-badge {
            font-size: 10px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.4px !important;
            padding: 3px 8px !important;
            border-radius: 999px !important;
            background: rgba(15, 23, 42, 0.06) !important;
            color: var(--gestemas-gray-600) !important;
        }

        .notif-badge.is-type {
            background: color-mix(in srgb, var(--notif-accent) 18%, #ffffff) !important;
            color: var(--notif-accent) !important;
            border: 1px solid color-mix(in srgb, var(--notif-accent) 35%, #ffffff) !important;
        }

        .notif-badge.is-unread {
            background: rgba(239, 68, 68, 0.12) !important;
            color: #ef4444 !important;
        }

        .notif-badge.is-read {
            background: rgba(16, 185, 129, 0.12) !important;
            color: #10b981 !important;
        }

        .notif-protagonist {
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            margin-top: 8px !important;
            padding: 6px 10px !important;
            background: rgba(255, 255, 255, 0.6) !important;
            border-radius: 10px !important;
            border: 1px solid rgba(0, 0, 0, 0.04) !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            color: var(--gestemas-gray-700) !important;
        }

        .notif-meta-row {
            margin-top: 8px !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            color: var(--gestemas-gray-500) !important;
        }

        .notif-cta {
            margin-top: 12px !important;
        }

        .notif-action-btn {
            width: 100% !important;
            justify-content: space-between !important;
            padding: 8px 12px !important;
            font-size: 11px !important;
            border-radius: 10px !important;
            background: rgba(99, 102, 241, 0.05) !important;
            border: 1px solid rgba(99, 102, 241, 0.1) !important;
            color: var(--gestemas-primary) !important;
            font-weight: 700 !important;
        }

        .notif-content strong {
            display: block !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            color: var(--gestemas-gray-900) !important;
            margin-bottom: 3px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .notif-content p {
            font-size: 13px !important;
            line-height: 1.5 !important;
            color: var(--gestemas-gray-600) !important;
            margin: 0 !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            line-clamp: 2 !important;
            /* Lint Fix */
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }

        .notif-content small {
            display: block !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            color: var(--gestemas-gray-400) !important;
            margin-top: 8px !important;
        }

        /* 5. Generic Pro Elements */
        .icon-btn-close {
            all: unset !important;
            width: 36px !important;
            height: 36px !important;
            border-radius: 50% !important;
            background: rgba(0, 0, 0, 0.05) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            transition: all 0.3s ease !important;
        }

        .icon-btn-close:not(.gestemas-btn):hover {
            background: #ef4444 !important;
            color: white !important;
            transform: rotate(90deg) !important;
        }

        .btn-load-more {
            all: unset !important;
            width: 100% !important;
            box-sizing: border-box !important;
            padding: 10px !important;
            height: 40px !important;
            border-radius: 14px !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            color: var(--gestemas-gray-700) !important;
            background: rgba(255, 255, 255, 0.6) !important;
            border: 1px solid rgba(255, 255, 255, 0.8) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
            cursor: pointer !important;
            transition: all 0.3s ease !important;
        }

        .btn-load-more:hover {
            background: white !important;
            color: var(--gestemas-primary) !important;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
        }

        .btn-link-premium {
            all: unset !important;
            padding: 8px 18px !important;
            border-radius: 12px !important;
            font-size: 11px !important;
            font-weight: 800 !important;
            color: var(--gestemas-primary) !important;
            background: rgba(99, 102, 241, 0.1) !important;
            cursor: pointer !important;
            transition: 0.3s !important;
        }

        .btn-link-premium:hover {
            background: var(--gestemas-primary) !important;
            color: white !important;
        }

        /* 6. Empty & Loading States */
        .notif-loading,
        .notif-empty {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 80px 20px !important;
            text-align: center !important;
        }

        .notif-empty-icon {
            width: 64px !important;
            height: 64px !important;
            background: rgba(255, 255, 255, 0.6) !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin-bottom: 20px !important;
            color: var(--gestemas-gray-300) !important;
        }

        /* 7. Mobile Perfection */
        @media (max-width: 768px) {
            #gestemas-notifications-panel {
                width: 100% !important;
            }

            .notif-chips-row {
                flex-wrap: nowrap !important;
                gap: 8px !important;
            }

            .hub-chips-row {
                overflow-x: auto !important;
            }

            .notif-search-wrapper:focus-within {
                width: 100% !important;
            }
        }


        .notif-empty h5 {
            margin: 0 0 4px 0;
            color: var(--gestemas-gray-900);
            font-size: 16px;
        }

        .notif-empty p {
            margin: 0;
            color: var(--gestemas-gray-500);
            font-size: 13px;
        }

        /* Animación de la campanita */
        @keyframes bell-ring {

            0%,
            100% {
                transform: rotate(0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: rotate(10deg);
            }

            20%,
            40%,
            60%,
            80% {
                transform: rotate(-10deg);
            }
        }

        /* Redundant styles removed - animations moved to gestemas.css */

        /* ========================================
   SEARCH RESULTS DROPDOWN
   ======================================== */
        .gestemas-search-results {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
            z-index: var(--z-dropdown);
            padding: 16px;
            max-height: 400px;
            overflow-y: auto;
        }

        @media (max-width: 1024px) {
            .gestemas-search-results {
                position: fixed;
                top: 75px;
                left: 10px;
                right: 10px;
                max-height: calc(100vh - 100px);
                z-index: 9999 !important;
                /* Forces search above all headers and panels */
            }
        }

        /* CONTENT WRAPPER: definición única en línea 772. Bloque duplicado eliminado
           (provocaba cascada inestable al recargar con max-width 1400px conflictivo) */

        /* ========================================
   MOBILE BOTTOM NAVIGATION - DEPRECATED
   Componente removido en v2.5 en favor de navegación unificada
   ======================================== */
        /* CSS anterior para .gestemas-mobile-nav eliminado */

        /* ========================================
   GLASSMORPHISM V3 - FORM SYSTEM
   Standardized premium design for all inputs
   ======================================== */
        :root {
            /* Form Glass Tokens */
            --g-form-bg: rgba(255, 255, 255, 0.7);
            --g-form-blur: 16px;
            --g-form-border: rgba(255, 255, 255, 0.4);
            --g-form-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

            /* Input Specific Tokens */
            --g-input-bg: rgba(255, 255, 255, 0.5);
            --g-input-border: rgba(226, 232, 240, 0.8);
            --g-input-focus-border: var(--gestemas-primary);
            --g-input-focus-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);

            /* Title Scaling */
            --g-title-xl: clamp(24px, 5vw, 32px);
            --g-title-lg: clamp(20px, 4vw, 26px);
            --g-title-md: clamp(16px, 3vw, 20px);

            /* Grid Gaps */
            --g-gap-lg: 24px;
            --g-gap-md: 16px;
            --g-gap-sm: 12px;
        }

        /* Grid System Utilities */
        .g-grid {
            display: grid;
            gap: var(--g-gap-lg);
            width: 100%;
        }

        .g-grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .g-grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .g-grid-gap-md {
            gap: var(--g-gap-md);
        }

        .g-grid-gap-sm {
            gap: var(--g-gap-sm);
        }

        @media (max-width: 768px) {

            .g-grid-2,
            .g-grid-3 {
                grid-template-columns: 1fr;
                gap: var(--g-gap-md);
            }
        }

        /* Base Glass Container */
        .g-form-card {
            background: var(--g-form-bg);
            backdrop-filter: blur(var(--g-form-blur));
            -webkit-backdrop-filter: blur(var(--g-form-blur));
            border: 1px solid var(--g-form-border);
            box-shadow: var(--g-form-shadow);
            border-radius: var(--block-radius, 24px);
            padding: var(--block-padding, 24px);
            transition: all 0.3s ease;
        }

        .g-form-card:hover {
            box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.12);
        }

        /* Standardized Input Styles */
        .g-input {
            width: 100%;
            padding: 14px 16px;
            background: white !important;
            /* Force white background for high contrast */
            border: 1.5px solid var(--gestemas-gray-300);
            border-radius: 14px;
            font-size: 15px;
            color: var(--gestemas-gray-900) !important;
            /* Force dark text */
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            outline: none;
            appearance: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) inset;
        }

        .g-input:focus {
            background: white;
            border-color: var(--g-input-focus-border);
            box-shadow: var(--g-input-focus-shadow);
            transform: translateY(-1px);
        }

        .g-input::placeholder {
            color: var(--gestemas-gray-400);
            opacity: 1;
        }

        /* Floating Label Group */
        .g-floating-group {
            position: relative;
            margin-bottom: 20px;
        }

        .g-floating-group label {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gestemas-gray-500);
            font-size: 15px;
            pointer-events: none;
            transition: all 0.2s ease;
            background: transparent;
            padding: 0 4px;
        }

        .g-floating-group input:focus~label,
        .g-floating-group input:not(:placeholder-shown)~label,
        .g-floating-group textarea:focus~label,
        .g-floating-group textarea:not(:placeholder-shown)~label,
        .g-floating-group select:focus~label,
        .g-floating-group select:not([value=""]):not(:focus)~label,
        .g-floating-group select:valid~label {
            top: 0;
            font-size: 12px;
            font-weight: 700;
            color: var(--gestemas-primary);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(4px);
            transform: translateY(-50%) scale(0.9);
            padding: 0 8px;
            border-radius: 4px;
        }

        /* Date input specific fix */
        .g-floating-group input[type="date"]~label {
            top: 0;
            font-size: 12px;
            font-weight: 700;
            background: rgba(255, 255, 255, 0.9);
            transform: translateY(-50%) scale(0.9);
        }

        /* Textarea specific */
        .g-floating-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .g-floating-group textarea~label {
            top: 20px;
            transform: none;
        }

        .g-floating-group textarea:focus~label,
        .g-floating-group textarea:not(:placeholder-shown)~label {
            top: 0;
            transform: translateY(-50%) scale(0.9);
        }

        /* Select specific */
        .g-input-select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 18px;
            padding-right: 40px;
        }

        /* Form Titles */
        .g-form-title {
            font-size: var(--g-title-lg);
            font-weight: 800;
            color: var(--gestemas-gray-900);
            letter-spacing: -0.025em;
            margin-bottom: 8px;
            font-family: var(--gestemas-font-outfit, 'Outfit', sans-serif);
        }

        .g-form-subtitle {
            font-size: 14px;
            color: var(--gestemas-gray-500);
            margin-bottom: 24px;
        }

        /* Modal Body Scroll Fix */
        .gestemas-modal-body-premium {
            flex: 1;
            overflow-y: auto;
            min-height: 0;
            /* Important for flex child scrolling */
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            overscroll-behavior: contain;
        }

        /* Handle titles inside modal headers */
        .gestemas-modal-header .g-form-title,
        .gestemas-modal-header-premium .g-form-title {
            margin-bottom: 0;
        }

        /* Premium Buttons */
        .g-btn-premium {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px 24px;
            background: linear-gradient(135deg, var(--gestemas-primary) 0%, var(--gestemas-secondary) 100%);
            color: white;
            border: none;
            border-radius: 14px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }

        .g-btn-premium:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
        }

        .g-btn-premium:active {
            transform: scale(0.98);
        }

        .g-btn-premium i {
            width: 20px;
            height: 20px;
        }

        /* ========================================
   UTILITY CLASSES
   ======================================== */
        .gestemas-loader-center {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
        }

        .gestemas-spinner-lg {
            width: 32px;
            height: 32px;
            border: 3px solid rgba(14, 165, 233, 0.2);
            border-top-color: var(--gestemas-primary);
            border-radius: 50%;
            animation: spinner 0.8s linear infinite;
        }

        @keyframes spinner {
            to {
                transform: rotate(360deg);
            }
        }

        /* ========================================
   ANIMATIONS
   ======================================== */
        @keyframes slideInRight {
            from {
                transform: translateX(100%);
            }

            to {
                transform: translateX(0);
            }
        }

        @keyframes slideInLeft {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* Touch device optimizations */
        @media (hover: none) {

            .nav-item:hover,
            .icon-btn-ghost:hover,
            .mobile-menu-toggle:hover {
                background: transparent;
            }

            .nav-item:active,
            .icon-btn-ghost:active,
            .mobile-menu-toggle:active {
                background: var(--gestemas-gray-100);
            }
        }

        /* ========================================
   PREMIUM DATA MODULES (Silicon Valley Std)
   ======================================== */
        .gestemas-premium-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: var(--block-gap-mobile, 20px);
            flex-wrap: wrap;
            gap: 16px;
        }

        @media (min-width: 1025px) {
            .gestemas-premium-header {
                margin-bottom: var(--block-gap, 20px);
            }
        }

        .gestemas-heading-xl {
            font-size: 28px;
            margin-bottom: 4px;
            background: linear-gradient(135deg, var(--gestemas-gray-900) 0%, var(--gestemas-gray-600) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.02em;
        }

        .gestemas-text-muted {
            font-size: 14px;
            color: var(--gestemas-gray-500);
            margin: 0;
        }

        /* Control Bar (Toolbar) */
        .gestemas-control-bar {
            background: white;
            padding: 12px 16px;
            border-radius: 16px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 16px;
            margin-bottom: var(--block-gap-mobile, 20px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
            border: 1px solid var(--gestemas-gray-200);
        }

        @media (min-width: 1025px) {
            .gestemas-control-bar {
                margin-bottom: var(--block-gap, 20px);
            }
        }

        .control-search {
            flex: 1;
            min-width: 200px;
            position: relative;
            display: flex;
            align-items: center;
        }

        .control-search i {
            position: absolute;
            left: 12px;
            color: var(--gestemas-gray-400);
            width: 18px;
            height: 18px;
        }

        .control-search-input {
            width: 100%;
            padding: 10px 10px 10px 40px;
            border: 1px solid var(--gestemas-gray-200);
            border-radius: 10px;
            background: var(--gestemas-gray-50);
            font-size: 14px;
            transition: all 0.2s;
        }

        .control-search-input:focus {
            background: white;
            border-color: var(--gestemas-primary);
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
            outline: none;
        }

        .control-filters {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 4px;
            /* Scrollbar space */
        }

        .premium-select {
            padding: 8px 32px 8px 12px;
            border-radius: 10px;
            border: 1px solid var(--gestemas-gray-200);
            background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
            font-size: 13px;
            font-weight: 500;
            color: var(--gestemas-gray-700);
            appearance: none;
            cursor: pointer;
            min-width: 140px;
        }

        .premium-select:focus {
            border-color: var(--gestemas-primary);
            outline: none;
        }

        .view-toggle {
            display: flex;
            background: var(--gestemas-gray-100);
            padding: 3px;
            border-radius: 10px;
            gap: 2px;
        }

        .toggle-btn {
            border: none;
            background: transparent;
            padding: 6px 10px;
            border-radius: 8px;
            color: var(--gestemas-gray-500);
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: all 0.2s;
        }

        .toggle-btn.active {
            background: white;
            color: var(--gestemas-gray-900);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .toggle-btn i {
            width: 18px;
            height: 18px;
        }

        /* Data Views */
        .view-mode-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
            animation: fadeInUp 0.4s ease;
        }

        .view-mode-list {
            display: block;
            animation: fadeIn 0.4s ease;
        }

        /* Premium Table */
        .premium-table-container {
            background: white;
            border-radius: 20px;
            border: 1px solid var(--gestemas-gray-200);
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01);
        }

        .premium-table {
            width: 100%;
            border-collapse: collapse;
        }

        .premium-table th {
            background: var(--gestemas-gray-50);
            padding: 16px;
            text-align: left;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--gestemas-gray-500);
            border-bottom: 1px solid var(--gestemas-gray-200);
        }

        .premium-table td {
            padding: 16px;
            border-bottom: 1px solid var(--gestemas-gray-100);
            font-size: 14px;
            color: var(--gestemas-gray-700);
            vertical-align: middle;
        }

        .premium-table tr:last-child td {
            border-bottom: none;
        }

        .premium-table tr:hover {
            background: var(--gestemas-gray-50);
        }

        /* Responsive Table Utility (Stacked Cards on Mobile) */
        @media (max-width: 768px) {
            .nexus-responsive-table thead {
                display: none;
            }

            .nexus-responsive-table,
            .nexus-responsive-table tbody,
            .nexus-responsive-table tr,
            .nexus-responsive-table td {
                display: block;
                width: 100%;
            }

            .nexus-responsive-table tr {
                background: white;
                margin-bottom: 12px;
                border: 1px solid var(--gestemas-gray-200);
                border-radius: 16px;
                padding: 12px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
            }

            .nexus-responsive-table td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-align: right;
                padding: 8px 4px;
                border-bottom: 1px solid var(--gestemas-gray-50);
                font-size: 13px;
            }

            .nexus-responsive-table td:last-child {
                border-bottom: none;
            }

            .nexus-responsive-table td::before {
                content: attr(data-label);
                font-weight: 700;
                text-transform: uppercase;
                font-size: 10px;
                color: var(--gestemas-gray-400);
                text-align: left;
                margin-right: 12px;
            }
        }

        /* Unified Card (Grid) */
        .premium-card {
            background: white;
            border-radius: 24px;
            border: 1px solid rgba(0, 0, 0, 0.04);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
            transition: transform 0.2s, box-shadow 0.2s;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .premium-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        }

        /* Pagination */
        .premium-pagination {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 32px;
        }

        .page-btn {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid var(--gestemas-gray-200);
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 13px;
            color: var(--gestemas-gray-600);
            transition: 0.2s;
        }

        .page-btn:hover {
            background: var(--gestemas-gray-50);
        }

        .page-btn.active {
            background: var(--gestemas-primary);
            color: white;
            border-color: var(--gestemas-primary);
        }

        /* Tooltip Indicator (Mobile & UX) */
        [data-gestemas-tooltip] {
            text-decoration: underline dotted rgba(99, 102, 241, 0.4);
            text-underline-offset: 4px;
            cursor: help;
            transition: all 0.2s;
        }

        [data-gestemas-tooltip]:hover {
            text-decoration-color: var(--gestemas-primary);
        }

        .gestemas-tooltip-container {
            position: absolute;
            z-index: 100000;
            padding: 12px 18px;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(12px) saturate(180%);
            -webkit-backdrop-filter: blur(12px) saturate(180%);
            color: #ffffff;
            border-radius: 14px;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.5;
            pointer-events: none;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.15);
            max-width: min(280px, calc(100vw - 40px));
            white-space: normal;
            overflow-wrap: break-word;
            word-break: break-word;
            text-align: center;
        }

        .gestemas-tooltip-container.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Mobile Responsive Tabs (Profile) */
        @media (max-width: 768px) {
            .gestemas-profile-tabs {
                display: flex;
                overflow-x: auto;
                white-space: nowrap;
                padding-bottom: 8px;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                margin: 0 -16px 20px -16px;
                padding: 0 16px;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
            }

            .gestemas-profile-tabs::-webkit-scrollbar {
                display: none;
            }

            .gestemas-profile-tabs .tab-btn {
                flex: 0 0 auto;
                padding: 10px 16px;
                font-size: 13px;
            }

            .gestemas-profile-tabs .tab-btn i {
                width: 16px;
                height: 16px;
            }

            .gestemas-profile-tabs .tab-text {
                display: inline-block;
            }
        }

        /* Re-engineering for 100vh on mobile */
        body,
        .gestemas-app-layout {
            min-height: calc(var(--vh, 1vh) * 100);
        }

        /* ============================================
   SILICON VALLEY PRO - MOBILE RESPONSIVE
   Shared Components for all Views
   ============================================ */

        /* Premium Header */
        @media (max-width: 768px) {
            .gestemas-premium-header {
                flex-direction: column;
                align-items: stretch;
                gap: 16px;
            }

            .gestemas-premium-header>div:first-child {
                text-align: center;
            }

            .gestemas-premium-header .gestemas-btn {
                width: 100%;
                justify-content: center;
            }

            .gestemas-heading-xl {
                font-size: 22px !important;
            }
        }

        /* Control Bar (Toolbar) */
        @media (max-width: 768px) {
            .gestemas-control-bar {
                flex-direction: column;
                padding: 12px;
                gap: 12px;
            }

            .control-search {
                width: 100%;
                min-width: 100%;
            }

            .control-filters {
                width: 100%;
                justify-content: flex-start;
                -webkit-overflow-scrolling: touch;
            }

            .premium-select {
                min-width: auto;
                flex-shrink: 0;
                font-size: 12px;
                padding: 8px 28px 8px 10px;
            }

            .view-toggle {
                align-self: flex-end;
            }
        }

        /* Card Grids */
        @media (max-width: 768px) {
            .view-mode-grid {
                grid-template-columns: 1fr !important;
                gap: 16px;
            }

            .premium-card {
                border-radius: 16px;
            }

            .gestemas-card-header,
            .gestemas-card-body,
            .gestemas-card-footer {
                padding: 14px 16px;
            }
        }

        /* Tables - Horizontal Scroll */
        @media (max-width: 768px) {
            .premium-table-container {
                border-radius: 12px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .premium-table {
                min-width: 600px;
                /* Force horizontal scroll */
            }

            .premium-table th,
            .premium-table td {
                padding: 12px 14px;
                white-space: nowrap;
            }
        }

        /* Pagination */
        @media (max-width: 480px) {
            .premium-pagination {
                flex-wrap: wrap;
            }

            .page-btn {
                width: 32px;
                height: 32px;
                font-size: 12px;
            }
        }

        /* Avatar Mini */
        .avatar-mini {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--gestemas-primary-light, #e0f2fe);
            color: var(--gestemas-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 11px;
            flex-shrink: 0;
        }

        /* Dimension Tag */
        .dimension-tag {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        /* Student Badge */
        .student-badge {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .student-name {
            font-weight: 600;
            font-size: 13px;
            color: var(--gestemas-gray-800);
        }

        /* Date Badge */
        .date-badge {
            background: var(--gestemas-gray-100);
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            color: var(--gestemas-gray-600);
        }

        /* Intervention Card Elements */
        .intervention-excerpt {
            font-size: 13px;
            color: var(--gestemas-gray-600);
            line-height: 1.5;
            margin: 8px 0 0;
        }

        .btn-view-details {
            background: transparent;
            border: none;
            color: var(--gestemas-primary);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 0;
            transition: gap 0.2s ease;
        }

        .btn-view-details:hover {
            gap: 10px;
        }

        .btn-view-details i {
            width: 14px;
            height: 14px;
        }

        /* Icon Button Ghost */
        .icon-btn-ghost {
            background: transparent;
            border: 1px solid var(--gestemas-gray-200);
            border-radius: 8px;
            color: var(--gestemas-gray-500);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .icon-btn-ghost:hover {
            background: var(--gestemas-gray-50);
            border-color: var(--gestemas-primary);
            color: var(--gestemas-primary);
        }

        .icon-btn-ghost i {
            width: 16px;
            height: 16px;
        }

        /* Tooltip Engine Styles (Duplicated entry fix) */
        /* Removed to avoid duplication and use the one defined in line 2840 */

        /* Global Fix for Leaking Blocks */
        .gestemas-card,
        .gestemas-glass,
        .smart-card,
        .pulse-section {
            max-width: 100%;
            overflow-wrap: break-word;
        }

        @media (max-width: 600px) {
            .gestemas-form-layout {
                display: flex !important;
                flex-direction: column !important;
                gap: 16px !important;
            }
        }

        /* ========================================
   MANUAL DRAWER (Super Glassmorphism v3)
   ======================================== */
        .drawer-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.3);
            backdrop-filter: blur(8px);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .drawer-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Legacy Help Drawer removed - Now direct navigation */

        .d-sidebar {
            width: 280px;
            background: rgba(248, 250, 252, 0.6);
            border-right: 1px solid rgba(0, 0, 0, 0.04);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }

        .d-header {
            padding: 30px 24px 20px;
        }

        .d-header h3 {
            margin: 0;
            font-size: 20px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--gestemas-primary) 0%, var(--gestemas-secondary) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .d-nav {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
        }

        .d-nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            margin-bottom: 4px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--gestemas-gray-600);
            font-size: 14px;
            font-weight: 500;
        }

        .d-nav-item:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateX(4px);
        }

        .d-nav-item.active {
            background: white;
            color: var(--gestemas-primary);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            font-weight: 600;
        }

        .d-nav-icon {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: inherit;
        }

        .d-nav-item.active .d-nav-icon {
            background: var(--gestemas-primary-light);
            color: var(--gestemas-primary);
        }

        .d-content {
            flex: 1;
            padding: 40px;
            overflow-y: auto;
            background: rgba(255, 255, 255, 0.4);
            position: relative;
            scroll-behavior: smooth;
        }

        .manual-chapter h1 {
            font-size: 32px;
            margin-bottom: 16px;
            color: var(--gestemas-gray-900);
        }

        .manual-meta {
            display: flex;
            gap: 12px;
            margin-bottom: 32px;
            font-size: 12px;
            color: var(--gestemas-gray-500);
            align-items: center;
        }

        .manual-body {
            font-size: 16px;
            line-height: 1.7;
            color: var(--gestemas-gray-700);
        }

        /* Animations */
        .fade-in {
            animation: fadeIn 0.4s ease;
        }

        @media (max-width: 768px) {
            .drawer {
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                max-width: 100%;
                border-radius: 0;
                flex-direction: column;
            }

            .d-sidebar {
                width: 100%;
                height: auto;
                max-height: 40vh;
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            }

            .d-content {
                padding: 24px;
            }
        }

        /* ========================================
   LEGAL MODAL (Floating)
   ======================================== */
        .legal-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(4px);
            z-index: 1090;
            animation: fadeIn 0.3s ease;
        }

        .legal-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(0, 0, 0, 0.05);
            z-index: 1091;
            display: flex;
            flex-direction: column;
            max-height: 85vh;
            width: 90%;
            max-width: 600px;
            animation: slideUp 0.4s ease;
        }

        .legal-modal.active {
            transform: translate(-50%, -50%) scale(1);
        }

        .legal-modal-header {
            padding: 24px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        .legal-modal-header h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: var(--gestemas-gray-900);
        }

        .legal-modal-close {
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            transition: all 0.2s;
            color: var(--gestemas-gray-500);
        }

        .legal-modal-close:hover {
            background: rgba(0, 0, 0, 0.06);
            color: var(--gestemas-gray-900);
        }

        .legal-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
            font-size: 14px;
            line-height: 1.6;
            color: var(--gestemas-gray-700);
        }

        .legal-modal-body h3 {
            font-size: 16px;
            font-weight: 700;
            color: var(--gestemas-gray-900);
            margin-top: 16px;
            margin-bottom: 8px;
        }

        .legal-modal-body h3:first-child {
            margin-top: 0;
        }

        .legal-modal-body p {
            margin-bottom: 12px;
        }

        .legal-modal-body ul,
        .legal-modal-body ol {
            margin-bottom: 12px;
            margin-left: 20px;
        }

        .legal-modal-body li {
            margin-bottom: 6px;
        }

        .legal-modal-footer {
            padding: 16px 24px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            flex-shrink: 0;
        }

        .legal-modal-btn-primary {
            background: var(--gestemas-primary, #6366f1);
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
        }

        .legal-modal-btn-primary:hover {
            background: var(--gestemas-secondary, #ec4899);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

        @media (max-width: 768px) {
            .legal-modal {
                width: 95%;
                max-width: 100%;
                max-height: 90vh;
                border-radius: 16px;
            }

            .legal-modal-header {
                padding: 16px;
            }

            .legal-modal-body {
                padding: 16px;
                font-size: 13px;
            }

            .legal-modal-footer {
                padding: 12px 16px;
            }
        }

        /* Cookie consent banner - centered, compact and responsive */
        .gestemas-cookie-banner {
            position: fixed;
            left: 50%;
            bottom: 16px;
            transform: translate(-50%, 120%);
            width: min(920px, calc(100vw - 32px));
            padding: 16px 20px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(226, 232, 240, 0.95);
            box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            z-index: 9998;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.32s ease, transform 0.32s ease;
            box-sizing: border-box;
        }

        .gestemas-cookie-banner.active {
            transform: translate(-50%, 0);
            opacity: 1;
            pointer-events: auto;
        }

        .cookie-banner-content {
            flex: 1;
            min-width: 0;
        }

        .cookie-banner-content p {
            margin: 0;
            font-size: 0.92rem;
            line-height: 1.5;
            color: var(--gestemas-gray-700);
        }

        .cookie-banner-content a {
            color: var(--gestemas-primary, #6366f1);
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 2px;
            white-space: nowrap;
        }

        .cookie-banner-actions {
            flex-shrink: 0;
        }

        .btn-cookie-accept {
            min-height: 44px;
            padding: 10px 18px;
            border: none;
            border-radius: 12px;
            background: var(--gestemas-primary, #6366f1);
            color: white;
            font-weight: 800;
            font-size: 0.9rem;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(99, 102, 241, 0.22);
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        .btn-cookie-accept:hover {
            background: var(--gestemas-primary-dark, #4f46e5);
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(99, 102, 241, 0.28);
        }

        @media (max-width: 768px) {
            .gestemas-cookie-banner {
                width: calc(100vw - 16px);
                left: 8px;
                transform: translateY(120%);
                right: 8px;
                bottom: 8px;
                padding: 14px 16px;
                border-radius: 18px;
                flex-direction: column;
                align-items: stretch;
            }

            .gestemas-cookie-banner.active {
                transform: translateY(0);
            }

            .cookie-banner-actions {
                width: 100%;
            }

            .btn-cookie-accept {
                width: 100%;
            }

            .cookie-banner-content p {
                font-size: 0.88rem;
            }

            .cookie-banner-content a {
                white-space: normal;
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translate(-50%, calc(-50% + 20px));
            }

            to {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* ============================================================
   GLOBAL MOBILE HARDWARE ACCELERATION OPTIMIZATION
   ============================================================ */
        @media (max-width: 768px) {

            /* Disable heavy backdrop-filters on non-critical UI to save GPU & Battery */
            .gestemas-card,
            .glass-v3-card,
            .dashboard-panel-smart,
            .gestemas-profile-360,
            .gestemas-search-results,
            .gestemas-notifications-panel,
            .gestemas-sidebar,
            .user-menu-dropdown,
            .context-menu-premium,
            .widget,
            .card,
            .glass-card,
            .smart-metric-card,
            .glass-v3-panel,
            .nexus-student-block,
            .dashboard-header-glass-v3,
            .gestemas-header-premium,
            .metric-card {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                /* Increase opacity to compensate for lost blur */
                background-color: rgba(255, 255, 255, 0.95) !important;
            }

            /* Ensure modal overlays still look decent */
            .modal-overlay,
            .gestemas-modal-overlay,
            .nexus-modal-overlay,
            .legal-modal-overlay {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background-color: rgba(0, 0, 0, 0.7) !important;
            }
        }