:root {
            --primary-green: #16a34a;
            --primary-green-dark: #15803d;
            --primary-green-light: #22c55e;
            --success-green: #10b981;
            --teal: #14b8a6;
            --emerald-light: #d1fae5;
            --sidebar-width: 15.5rem;
        }
        
            /* Hide hamburger menu on seleccion-servicio page */
            [data-page*="seleccion-servicio"] #toggle-sidebar {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
                width: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            
            /* Ensure full page scrollability */
            .fi-main {
                min-height: 100vh !important;
                display: flex !important;
                flex-direction: column !important;
            }
            
            .fi-main > div {
                flex: 1 0 auto !important;
                min-height: 0 !important;
            }
            
            .fi-main > .max-w-7xl {
                width: 100% !important;
                max-width: 100% !important;
                padding: 1.5rem !important;
            }
            
            /* Fix for mobile viewport height */
            @media (max-width: 768px) {
                html, body {
                    height: 100% !important;
                    overflow: auto !important;
                    -webkit-overflow-scrolling: touch !important;
                }
                
                .fi-main {
                    min-height: -webkit-fill-available !important;
                    min-height: 100% !important;
                }
                
                .service-selection-container {
                    min-height: 100% !important;
                    display: flex !important;
                    flex-direction: column !important;
                }
            }
            
            :root {
                --primary-green: #16a34a;
                --primary-green-dark: #15803d;
                --primary-green-light: #22c55e;
                --success-green: #10b981;
                --teal: #14b8a6;
                --emerald-light: #d1fae5;
                --sidebar-width: 18rem;
            }

        /* ── Item destacado "Guía del Usuario" — premium banner con
              badge NUEVO INLINE (no position:absolute, así no se solapa
              con el label cuando el sidebar está colapsado o estrecho). */
        .fi-sidebar a[href*="/admin/guia-usuario"],
        .fi-topbar a[href*="/admin/guia-usuario"] {
            position: relative;
            border-radius: 0.7rem !important;
            border: 1px solid rgba(201, 162, 77, 0.32) !important;
            background:
                radial-gradient(circle at 100% 0%, rgba(201, 162, 77, 0.18) 0%, transparent 40%),
                linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(20, 48, 79, 0.98) 100%) !important;
            color: #f8fafc !important;
            box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.25),
                        inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        /* Badge "NUEVO" inyectado tras el label vía ::after, pero
           con display:inline-block dentro del flujo (NO absolute) —
           se mantiene siempre a la derecha del label sin solapar. */
        .fi-sidebar a[href*="/admin/guia-usuario"]::after,
        .fi-topbar a[href*="/admin/guia-usuario"]::after {
            content: 'NUEVO';
            display: inline-flex;
            align-items: center;
            margin-left: auto;
            padding: 0.18rem 0.5rem;
            border-radius: 999px;
            background: linear-gradient(135deg, #C9A24D 0%, #b88a3a 100%);
            color: #0E1A24;
            font-size: 0.6rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            box-shadow: 0 2px 6px rgba(201, 162, 77, 0.45);
            flex-shrink: 0;
        }

        .fi-sidebar a[href*="/admin/guia-usuario"] .fi-sidebar-item-label,
        .fi-topbar a[href*="/admin/guia-usuario"] .fi-topbar-item-label,
        .fi-topbar a[href*="/admin/guia-usuario"] span {
            color: #f8fafc !important;
            font-weight: 700 !important;
            letter-spacing: 0.01em;
        }

        .fi-sidebar a[href*="/admin/guia-usuario"] svg,
        .fi-topbar a[href*="/admin/guia-usuario"] svg {
            color: #f3d289 !important;
        }

        .fi-sidebar a[href*="/admin/guia-usuario"]:hover,
        .fi-topbar a[href*="/admin/guia-usuario"]:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px -4px rgba(15, 23, 42, 0.35),
                        0 0 0 1px rgba(201, 162, 77, 0.4),
                        inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        /* En sidebar colapsado (rail) ocultamos el badge NUEVO */
        aside.fi-sidebar:not(.fi-sidebar-is-open) a[href*="/admin/guia-usuario"]::after,
        html.sidebar-hidden a[href*="/admin/guia-usuario"]::after {
            display: none;
        }


        /* Animaciones globales */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideDown {
            from {
                transform: translateY(-10px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes shimmer {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
        }

        /* Ocultar título predeterminado "Dashboard" */
        .fi-header-heading { 
            display: none; 
        }

        /* === ESTILOS DE USUARIO EN TOPBAR === */
        .fi-user-name {
            color: #C9A24D;
            font-weight: 600;
            font-size: 0.9rem;
            letter-spacing: 0.01em;
            transition: all 0.25s ease;
        }
        
        .fi-user-name:hover {
            color: #E5C06D;
        }

        .fi-user-role {
            color: #E5C06D;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.7rem;
            opacity: 0.9;
            transition: all 0.25s ease;
        }
        
        .fi-user-role:hover {
            opacity: 1;
            color: #F5D89D;
        }

        /* === MODO OSCURO - Usuario === */
        html.dark .fi-user-name {
            color: #C9A24D;
            text-shadow: 0 0 8px rgba(201, 162, 77, 0.2);
        }
        
        html.dark .fi-user-name:hover {
            color: #E5C06D;
            text-shadow: 0 0 12px rgba(201, 162, 77, 0.35);
        }

        html.dark .fi-user-role {
            color: #E5C06D;
            text-shadow: 0 0 6px rgba(229, 192, 109, 0.15);
        }
        
        html.dark .fi-user-role:hover {
            color: #F5D89D;
            text-shadow: 0 0 10px rgba(229, 192, 109, 0.25);
        }

        .toggle-sidebar-btn {
            transition: background-color 0.2s ease, 
                        border-color 0.2s ease, 
                        box-shadow 0.2s ease, 
                        color 0.2s ease,
                        transform 0.2s ease,
                        left 0.25s ease,
                        top 0.25s ease;
            position: relative;
            z-index: 40;
        }

        .crm-topbar-start {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-width: 0;
        }

        .crm-sidebar-mobile-brand {
            display: none;
        }

        .crm-sidebar-mobile-brand__link {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            text-decoration: none;
        }

        /* Estilos para el círculo de fondo de la flecha */
        .toggle-sidebar-btn:hover {
            background-color: rgba(201, 162, 77, 0.15);
        }

        html.dark .toggle-sidebar-btn:hover {
            background-color: rgba(201, 162, 77, 0.2);
        }

        /* Eliminar el círculo azul del focus y reemplazarlo con verde */
        .toggle-sidebar-btn:focus,
        .toggle-sidebar-btn:focus-visible {
            outline: none !important;
            box-shadow: 0 0 0 3px rgba(225, 195, 106, 0.3) !important;
            background-color: rgba(201, 162, 77, 0.2);
        }

        html.dark .toggle-sidebar-btn:focus,
        html.dark .toggle-sidebar-btn:focus-visible {
            outline: none !important;
            box-shadow: 0 0 0 3px rgba(225, 195, 106, 0.3) !important;
            background-color: rgba(201, 162, 77, 0.2);
        }

        .toggle-sidebar-btn .hamburger {
            position: relative;
            width: 1.35rem;
            height: 0.9rem;
        }

        .toggle-sidebar-btn .hamburger-line {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: white;
            border-radius: 9999px;
            transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                        opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .toggle-sidebar-btn .line-top {
            top: 0;
        }

        .toggle-sidebar-btn .line-middle {
            top: 50%;
            transform: translateY(-50%);
        }

        .toggle-sidebar-btn .line-bottom {
            bottom: 0;
        }

        .toggle-sidebar-btn.is-open {
            background-color: rgba(201, 162, 77, 0.12);
            border-color: rgba(201, 162, 77, 0.45);
            color: #C9A24D;
        }

        .toggle-sidebar-btn.is-open .line-top {
            transform: translateY(2px);
        }

        .toggle-sidebar-btn.is-open .line-middle {
            transform: scaleX(0.9);
        }

        .toggle-sidebar-btn.is-open .line-bottom {
            transform: translateY(-2px);
        }

        /* Ocultar el botón hamburguesa por defecto de Filament en móvil (hasta 1024px) */
        @media (max-width: 1024px) {
            /* Selectores comunes del botón hamburguesa de Filament */
            button[data-sidebar-toggle]:not(#toggle-sidebar),
            .fi-sidebar-open-button:not(#toggle-sidebar),
            button[aria-label*="sidebar" i]:not(#toggle-sidebar),
            .fi-topbar-close-sidebar-btn,
            .fi-topbar > div:first-child button:not(#toggle-sidebar) {
                display: none !important;
            }

            #toggle-sidebar {
                position: relative !important;
                z-index: 90 !important;
                display: inline-flex !important;
                flex-shrink: 0;
            }

            html:not(.sidebar-hidden) #toggle-sidebar {
                position: relative !important;
                z-index: 90 !important;
                box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(201, 162, 77, 0.18) !important;
            }

            html:not(.sidebar-hidden) #toggle-sidebar .line-top {
                transform: translateY(0.38rem) rotate(45deg);
            }

            html:not(.sidebar-hidden) #toggle-sidebar .line-middle {
                opacity: 0;
                transform: scaleX(0.4);
            }

            html:not(.sidebar-hidden) #toggle-sidebar .line-bottom {
                transform: translateY(-0.38rem) rotate(-45deg);
            }
        }

        /* === CORRECCIÓN DE BOTONES HAMBURGUESA Y FLECHA === */

        /* Ocultar el botón hamburguesa predeterminado de Filament en todos los modos */
        /* Pero nos aseguramos de no ocultar el menú de usuario si usa alguno de estos títulos */
        .fi-topbar-open-sidebar-btn,
        button[data-sidebar-toggle]:not(#toggle-sidebar),
        button[aria-label*="sidebar" i]:not(#toggle-sidebar),
        button[title*="sidebar" i],
        button[title*="Expandir" i]:not(.fi-user-menu *),
        button[title*="expandir" i]:not(.fi-user-menu *) {
            display: none !important;
        }

        /* Mostrar la hamburguesa solo en móvil */
        .hamburger {
            display: inline-flex;
        }

        /* Mostrar flecha solo en escritorio (mayor a 1024px) */
        @media (min-width: 1025px) {
            .hamburger {
                display: none !important;
            }

            .arrow-icon {
                display: inline-flex !important;
            }
        }
        /* === TOPBAR ROJA === */
        .fi-topbar > nav {
            background-color: #0E1A24 !important;
            background-image: none !important;
        }

        /* ════════════════════════════════════════════════════════════
           SIDEBAR ÉPICO — Filament 3
           Estructura respetada (NO se tocan rutas/roles/items):
             <aside class="fi-sidebar">
               <header> brand </header>
               <nav class="fi-sidebar-nav">
                 <ul>
                   <li class="fi-sidebar-group">
                     <header class="fi-sidebar-group-button"><span>GRUPO</span></header>
                     <ul>
                       <li class="fi-sidebar-item">
                         <a class="fi-sidebar-item-button">icon · label · badge</a>
                       </li>
                     </ul>
                   </li>
                 </ul>
               </nav>
             </aside>
           ════════════════════════════════════════════════════════════ */

        /* —— Fondo del aside: gradiente sutil + borde dorado + transición suave —— */
        aside.fi-sidebar {
            background:
                radial-gradient(circle at 100% 0%, rgba(201, 162, 77, 0.08) 0%, transparent 45%),
                radial-gradient(circle at 0% 100%, rgba(20, 184, 166, 0.05) 0%, transparent 40%),
                linear-gradient(180deg, #0E1A24 0%, #0a1520 100%) !important;
            border-right: 1px solid rgba(201, 162, 77, 0.18) !important;
            box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02),
                        4px 0 24px -8px rgba(0, 0, 0, 0.4) !important;
            transition: transform 0.35s cubic-bezier(0.32, 0.72, 0.24, 1),
                        width 0.35s cubic-bezier(0.32, 0.72, 0.24, 1),
                        box-shadow 0.25s ease,
                        opacity 0.25s ease !important;
        }

        /* —— Animación suave de plegado/desplegado de grupos colapsables ——
           Filament usa x-collapse.duration.200ms de Alpine. Lo reforzamos
           con transition CSS sobre el ul de items por si Alpine collapse
           no anima en algún caso edge (Livewire morphdom, etc). */
        aside.fi-sidebar .fi-sidebar-group-items {
            transition: max-height 0.3s cubic-bezier(0.32, 0.72, 0.24, 1),
                        opacity 0.25s ease;
        }
        /* Chevron del grupo con rotación suave (Filament aplica .-rotate-180
           nativamente; aquí solo aseguramos la transición) */
        aside.fi-sidebar .fi-sidebar-group-collapse-button svg {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* —— Backdrop overlay con fade suave en mobile/tablet —— */
        .fi-sidebar-close-overlay,
        #sidebar-overlay {
            transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0.24, 1) !important;
        }

        /* —— Cabecera del sidebar (brand) — solo estilo, NO tocamos h-16
           porque Filament lo necesita para el flex del nav. —— */
        aside.fi-sidebar .fi-sidebar-header {
            background: linear-gradient(180deg, rgba(201, 162, 77, 0.08) 0%, transparent 100%) !important;
            border-bottom: 1px solid rgba(201, 162, 77, 0.12) !important;
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }
        aside.fi-sidebar .fi-sidebar-header img,
        aside.fi-sidebar .fi-sidebar-header .fi-logo {
            max-height: 2.25rem !important;
        }

        /* —— Scrollbar del nav, fino y dorado. Reducimos py-8 nativo
           (que es 2rem arriba y abajo y deja mucho espacio muerto). —— */
        aside.fi-sidebar .fi-sidebar-nav {
            padding-top: 0.5rem !important;
            padding-bottom: 0.75rem !important;
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
            scrollbar-width: thin;
            scrollbar-color: rgba(201, 162, 77, 0.35) transparent;
            gap: 0.25rem !important;  /* Filament tiene gap-y-7 (1.75rem) — demasiado */
        }
        aside.fi-sidebar .fi-sidebar-nav-groups {
            gap: 0.15rem !important;  /* mismo motivo: gap-y-7 nativo demasiado */
        }
        aside.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar {
            width: 6px;
        }
        aside.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-track {
            background: transparent;
        }
        aside.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(201, 162, 77, 0.4) 0%, rgba(201, 162, 77, 0.2) 100%);
            border-radius: 999px;
        }
        aside.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
            background: rgba(201, 162, 77, 0.6);
        }

        /* —— Grupos del nav: compactos con línea sutil —— */
        aside.fi-sidebar .fi-sidebar-group {
            margin-bottom: 0.15rem;
            padding: 0.1rem 0;
            border-radius: 0.5rem;
            position: relative;
        }

        aside.fi-sidebar .fi-sidebar-group + .fi-sidebar-group {
            margin-top: 0.2rem;
            padding-top: 0.3rem;
            border-top: 1px solid rgba(201, 162, 77, 0.08);
        }

        /* —— Header de grupo (COMERCIAL, TRÁMITES, …) — compacto y clickeable —— */
        aside.fi-sidebar .fi-sidebar-group-button {
            padding: 0.3rem 0.5rem !important;
            display: flex !important;
            align-items: center !important;
            gap: 0.4rem !important;
            user-select: none;
            cursor: pointer;
            border-radius: 0.4rem;
            transition: background-color 0.18s ease;
            min-height: 2rem;
        }

        aside.fi-sidebar .fi-sidebar-group-label {
            color: rgba(201, 162, 77, 0.7) !important;
            font-size: 0.6rem !important;
            font-weight: 800 !important;
            letter-spacing: 0.14em !important;
            text-transform: uppercase !important;
            line-height: 1 !important;
            transition: color 0.2s ease;
        }

        aside.fi-sidebar .fi-sidebar-group-button:hover {
            background-color: rgba(201, 162, 77, 0.06);
        }
        aside.fi-sidebar .fi-sidebar-group-button:hover .fi-sidebar-group-label {
            color: rgba(229, 192, 109, 0.95) !important;
        }

        /* Asegurar que el <ul> de items expandibles no tenga overflow
           ni height residual que oculte items al expandir vía x-collapse. */
        aside.fi-sidebar .fi-sidebar-group-items {
            overflow: visible;
        }

        /* Chevron del grupo — Filament ya rota con .-rotate-180 nativo,
           solo añadimos opacity + transición suave. NO tocamos transform. */
        aside.fi-sidebar .fi-sidebar-group-collapse-button {
            opacity: 0.7;
            transition: opacity 0.2s ease;
            color: rgba(201, 162, 77, 0.85) !important;
        }
        aside.fi-sidebar .fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button {
            opacity: 1;
        }
        aside.fi-sidebar .fi-sidebar-group-collapse-button svg {
            color: rgba(201, 162, 77, 0.9) !important;
            width: 1rem !important;
            height: 1rem !important;
        }

        /* —— Items del nav: compactos + transiciones —— */
        aside.fi-sidebar .fi-sidebar-item-button,
        aside.fi-sidebar a.fi-sidebar-item-button {
            display: flex !important;
            align-items: center !important;
            gap: 0.6rem !important;
            column-gap: 0.6rem !important;
            position: relative;
            padding: 0.38rem 0.6rem !important;
            margin: 0.04rem 0.1rem !important;
            border-radius: 0.45rem !important;
            color: rgba(248, 250, 252, 0.78) !important;
            font-size: 0.82rem !important;
            font-weight: 500 !important;
            line-height: 1.2 !important;
            transition: background-color 0.18s ease,
                        color 0.18s ease,
                        transform 0.18s ease,
                        box-shadow 0.18s ease,
                        padding-left 0.18s ease;
            overflow: hidden;
        }

        /* Barra lateral oro a la izquierda (aparece en hover/activo) */
        aside.fi-sidebar .fi-sidebar-item-button::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 3px;
            height: 0;
            background: linear-gradient(180deg, #E5C06D 0%, #C9A24D 100%);
            border-radius: 0 3px 3px 0;
            transform: translateY(-50%);
            transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.25s ease;
            opacity: 0;
        }

        aside.fi-sidebar .fi-sidebar-item-button:hover {
            background-color: rgba(201, 162, 77, 0.08) !important;
            color: #f5d89d !important;
            padding-left: 0.8rem !important;
        }
        aside.fi-sidebar .fi-sidebar-item-button:hover::before {
            height: 60%;
            opacity: 1;
        }

        /* Icono del item — compacto */
        aside.fi-sidebar .fi-sidebar-item-button > svg,
        aside.fi-sidebar .fi-sidebar-item-button .fi-icon {
            color: rgba(201, 162, 77, 0.7) !important;
            flex-shrink: 0;
            width: 1.05rem;
            height: 1.05rem;
            transition: color 0.18s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        aside.fi-sidebar .fi-sidebar-item-button:hover > svg,
        aside.fi-sidebar .fi-sidebar-item-button:hover .fi-icon {
            color: #E5C06D !important;
            transform: scale(1.08);
        }

        /* Label */
        aside.fi-sidebar .fi-sidebar-item-button .fi-sidebar-item-label {
            flex: 1 1 auto !important;
            min-width: 0 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            font-size: 0.82rem !important;
            line-height: 1.2 !important;
            color: inherit !important;
        }

        /* —— Item ACTIVO: glow oro intenso —— */
        aside.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button,
        aside.fi-sidebar .fi-sidebar-item-button.fi-active,
        aside.fi-sidebar a.fi-sidebar-item-button[aria-current="page"],
        aside.fi-sidebar .fi-sidebar-item-active > .fi-sidebar-item-button {
            background:
                linear-gradient(135deg, rgba(201, 162, 77, 0.18) 0%, rgba(201, 162, 77, 0.06) 100%) !important;
            color: #f8fafc !important;
            font-weight: 600 !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 2px 8px -2px rgba(201, 162, 77, 0.25) !important;
            padding-left: 0.8rem !important;
        }
        aside.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button::before,
        aside.fi-sidebar .fi-sidebar-item-button.fi-active::before,
        aside.fi-sidebar a.fi-sidebar-item-button[aria-current="page"]::before,
        aside.fi-sidebar .fi-sidebar-item-active > .fi-sidebar-item-button::before {
            height: 70%;
            opacity: 1;
            box-shadow: 0 0 12px rgba(201, 162, 77, 0.55);
        }
        aside.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button > svg,
        aside.fi-sidebar .fi-sidebar-item-button.fi-active > svg,
        aside.fi-sidebar a.fi-sidebar-item-button[aria-current="page"] > svg {
            color: #E5C06D !important;
            filter: drop-shadow(0 0 4px rgba(201, 162, 77, 0.5));
        }

        /* —— Badges (NUEVO, contadores) — cápsula premium dorada —— */
        aside.fi-sidebar .fi-sidebar-item-button > span:last-child:not(.fi-sidebar-item-label),
        aside.fi-sidebar .fi-sidebar-item-button .fi-badge {
            margin-left: auto !important;
            flex-shrink: 0 !important;
        }
        aside.fi-sidebar .fi-sidebar-item-button .fi-badge {
            font-size: 0.58rem !important;
            font-weight: 800 !important;
            line-height: 1 !important;
            padding: 0.18rem 0.42rem !important;
            border-radius: 999px !important;
            letter-spacing: 0.04em !important;
            text-transform: uppercase;
            white-space: nowrap;
            background: linear-gradient(135deg, rgba(201, 162, 77, 0.22) 0%, rgba(201, 162, 77, 0.12) 100%) !important;
            color: #f3d289 !important;
            border: 1px solid rgba(201, 162, 77, 0.32) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        /* —— DESKTOP: sidebar oculto = se reduce a width:0 con animación
           para que .fi-main-ctn (flex-1) recupere el ancho suavemente.
           NO usamos display:none porque rompe la transición. —— */
        @media (min-width: 1025px) {
            html.sidebar-hidden aside.fi-sidebar {
                width: 0 !important;
                min-width: 0 !important;
                overflow: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
                border-right-width: 0 !important;
            }
        }

        /* —— RAIL COLAPSADO nativo de Filament (poco usado aquí, pero
           lo dejamos por compatibilidad si Filament colapsa el sidebar
           sin pasar por nuestro toggle) —— */
        aside.fi-sidebar.fi-sidebar-collapsed,
        aside.fi-sidebar[data-collapsed="true"] {
            width: 4.25rem !important;
        }
        aside.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-item-label,
        aside.fi-sidebar[data-collapsed="true"] .fi-sidebar-item-label,
        aside.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-group-button span,
        aside.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-group-label,
        aside.fi-sidebar.fi-sidebar-collapsed .fi-badge,
        aside.fi-sidebar[data-collapsed="true"] .fi-badge {
            display: none !important;
        }
        aside.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-item-button,
        aside.fi-sidebar[data-collapsed="true"] .fi-sidebar-item-button {
            justify-content: center !important;
            padding: 0.7rem 0.5rem !important;
        }
        aside.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-item-button:hover,
        aside.fi-sidebar[data-collapsed="true"] .fi-sidebar-item-button:hover {
            padding-left: 0.5rem !important;
        }

        /* —— MÓVIL / TABLET (≤ 1024px) ——
           Filament ya gestiona position:fixed + transform via x-bind:class
           sobre $store.sidebar.isOpen. Nosotros solo añadimos:
             - sombra premium del drawer abierto
             - blur al overlay clickeable
             - que el .fi-main-ctn ocupe el 100% (no margin/padding lateral)
           NO duplicamos display/flex/transform/height del aside: Filament
           ya lo hace y nuestros !important entran en conflicto rompiendo el
           toggle, el scroll interno y los desplegables. */
        @media (max-width: 1024px) {
            aside.fi-sidebar {
                box-shadow: 12px 0 40px -10px rgba(0, 0, 0, 0.55),
                            0 0 0 1px rgba(201, 162, 77, 0.15) !important;
            }
            /* Overlay nativo de Filament (.fi-sidebar-close-overlay) + el
               legacy (#sidebar-overlay) reciben el mismo backdrop premium. */
            .fi-sidebar-close-overlay,
            #sidebar-overlay {
                background: rgba(10, 21, 32, 0.55) !important;
                backdrop-filter: blur(4px) !important;
                -webkit-backdrop-filter: blur(4px) !important;
            }
            /* El main ocupa el viewport completo (sidebar es fixed, no roba
               espacio al flex, pero Filament aplica clases lg: que en mobile
               no se aplican — por si acaso forzamos 0). */
            .fi-main-ctn {
                margin-left: 0 !important;
                padding-left: 0 !important;
            }
        }

        /* —— MÓVIL ≤ 768px: items un pelín más cómodos al tacto, sin exagerar —— */
        @media (max-width: 768px) {
            aside.fi-sidebar {
                width: min(86vw, 18rem) !important;
            }
            aside.fi-sidebar .fi-sidebar-item-button {
                gap: 0.7rem !important;
                column-gap: 0.7rem !important;
                padding: 0.5rem 0.7rem !important;
                font-size: 0.86rem !important;
            }
            aside.fi-sidebar .fi-sidebar-item-button .fi-sidebar-item-label {
                font-size: 0.86rem !important;
            }
            aside.fi-sidebar .fi-sidebar-item-button > svg {
                width: 1.15rem;
                height: 1.15rem;
            }
            aside.fi-sidebar .fi-sidebar-group-button {
                padding: 0.55rem 0.7rem !important;
                min-height: 2.5rem;
            }
            aside.fi-sidebar .fi-sidebar-group-label {
                font-size: 0.65rem !important;
            }
            aside.fi-sidebar .fi-sidebar-group-collapse-button {
                padding: 0.4rem !important;
            }
            aside.fi-sidebar .fi-sidebar-group-collapse-button svg {
                width: 1.15rem !important;
                height: 1.15rem !important;
            }
        }

        /* Sin animación stagger por item — interfería con los grupos
           colapsables: al expandir/colapsar, los items quedaban en
           opacity:0 esperando el delay. El slide-in del aside ya da
           suficiente sensación de entrada. */