/* Menu Format Styles - 15 Different Options */

/* Base menu format styles - Asegurar posición correcta para todos los estilos */
/* El menú debe aparecer justo debajo del user-status-box, 8px más abajo */
/* Regla general para TODOS los estilos cuando están visibles */
body .menu-format-default .dropdown.show .dropdown-menu,
body .menu-format-default .dropdown:hover .dropdown-menu,
body .menu-format-plastic-rough .dropdown.show .dropdown-menu,
body .menu-format-plastic-rough .dropdown:hover .dropdown-menu,
body .menu-format-frosted-glass .dropdown.show .dropdown-menu,
body .menu-format-frosted-glass .dropdown:hover .dropdown-menu,
body .menu-format-metal-brushed .dropdown.show .dropdown-menu,
body .menu-format-metal-brushed .dropdown:hover .dropdown-menu,
body .menu-format-neon-glow .dropdown.show .dropdown-menu,
body .menu-format-neon-glow .dropdown:hover .dropdown-menu,
body .menu-format-wood-textured .dropdown.show .dropdown-menu,
body .menu-format-wood-textured .dropdown:hover .dropdown-menu,
body .menu-format-holographic .dropdown.show .dropdown-menu,
body .menu-format-holographic .dropdown:hover .dropdown-menu,
body .menu-format-leather .dropdown.show .dropdown-menu,
body .menu-format-leather .dropdown:hover .dropdown-menu,
body .menu-format-marble .dropdown.show .dropdown-menu,
body .menu-format-marble .dropdown:hover .dropdown-menu,
body .menu-format-circuit .dropdown.show .dropdown-menu,
body .menu-format-circuit .dropdown:hover .dropdown-menu,
body .menu-format-crumpled-paper .dropdown.show .dropdown-menu,
body .menu-format-crumpled-paper .dropdown:hover .dropdown-menu,
body .menu-format-mirror-glass .dropdown.show .dropdown-menu,
body .menu-format-mirror-glass .dropdown:hover .dropdown-menu,
body .menu-format-satin-fabric .dropdown.show .dropdown-menu,
body .menu-format-satin-fabric .dropdown:hover .dropdown-menu,
body .menu-format-concrete .dropdown.show .dropdown-menu,
body .menu-format-concrete .dropdown:hover .dropdown-menu,
body .menu-format-plasma .dropdown.show .dropdown-menu,
body .menu-format-plasma .dropdown:hover .dropdown-menu,
body .menu-format-carbon-fiber .dropdown.show .dropdown-menu,
body .menu-format-carbon-fiber .dropdown:hover .dropdown-menu,
body .menu-format-rainbow-border .dropdown.show .dropdown-menu,
body .menu-format-rainbow-border .dropdown:hover .dropdown-menu,
body .menu-format-elastic-wave .dropdown.show .dropdown-menu,
body .menu-format-elastic-wave .dropdown:hover .dropdown-menu,
body .menu-format-floating-particles .dropdown.show .dropdown-menu,
body .menu-format-floating-particles .dropdown:hover .dropdown-menu,
body .menu-format-spiral-rotate .dropdown.show .dropdown-menu,
body .menu-format-spiral-rotate .dropdown:hover .dropdown-menu,
body .menu-format-energy-pulse .dropdown.show .dropdown-menu,
body .menu-format-energy-pulse .dropdown:hover .dropdown-menu,
body .menu-format-3d-gradient .dropdown.show .dropdown-menu,
body .menu-format-3d-gradient .dropdown:hover .dropdown-menu,
body .menu-format-shockwave .dropdown.show .dropdown-menu,
body .menu-format-shockwave .dropdown:hover .dropdown-menu,
body .menu-format-cosmic-nebula .dropdown.show .dropdown-menu,
body .menu-format-cosmic-nebula .dropdown:hover .dropdown-menu,
body .menu-format-liquid-flow .dropdown.show .dropdown-menu,
body .menu-format-liquid-flow .dropdown:hover .dropdown-menu,
body .menu-format-kaleidoscope .dropdown.show .dropdown-menu,
body .menu-format-kaleidoscope .dropdown:hover .dropdown-menu,
body .menu-format-magnetic-resonance .dropdown.show .dropdown-menu,
body .menu-format-magnetic-resonance .dropdown:hover .dropdown-menu,
body .menu-format-vortex-spiral .dropdown.show .dropdown-menu,
body .menu-format-vortex-spiral .dropdown:hover .dropdown-menu,
body .menu-format-fractal-crystal .dropdown.show .dropdown-menu,
body .menu-format-fractal-crystal .dropdown:hover .dropdown-menu,
body .menu-format-quantum-interference .dropdown.show .dropdown-menu,
body .menu-format-quantum-interference .dropdown:hover .dropdown-menu,
body .menu-format-relativistic-tensor .dropdown.show .dropdown-menu,
body .menu-format-relativistic-tensor .dropdown:hover .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
}

/* Regla adicional para mayor especificidad - TODOS los estilos */
.navbar-professional .menu-format-default .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-default .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-plastic-rough .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-plastic-rough .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-frosted-glass .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-frosted-glass .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-metal-brushed .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-metal-brushed .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-neon-glow .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-neon-glow .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-wood-textured .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-wood-textured .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-holographic .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-holographic .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-leather .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-leather .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-marble .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-marble .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-circuit .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-circuit .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-crumpled-paper .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-crumpled-paper .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-mirror-glass .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-mirror-glass .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-satin-fabric .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-satin-fabric .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-concrete .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-concrete .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-plasma .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-plasma .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-carbon-fiber .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-carbon-fiber .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-rainbow-border .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-rainbow-border .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-elastic-wave .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-elastic-wave .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-floating-particles .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-floating-particles .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-spiral-rotate .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-spiral-rotate .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-energy-pulse .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-energy-pulse .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-3d-gradient .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-3d-gradient .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-shockwave .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-shockwave .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-cosmic-nebula .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-cosmic-nebula .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-liquid-flow .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-liquid-flow .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-kaleidoscope .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-kaleidoscope .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-magnetic-resonance .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-magnetic-resonance .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-vortex-spiral .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-vortex-spiral .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-fractal-crystal .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-fractal-crystal .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-quantum-interference .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-quantum-interference .dropdown:hover .dropdown-menu,
.navbar-professional .menu-format-relativistic-tensor .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-relativistic-tensor .dropdown:hover .dropdown-menu,
.nav .menu-format-default .dropdown.show .dropdown-menu,
.nav .menu-format-default .dropdown:hover .dropdown-menu,
.nav .menu-format-plastic-rough .dropdown.show .dropdown-menu,
.nav .menu-format-plastic-rough .dropdown:hover .dropdown-menu,
.nav .menu-format-frosted-glass .dropdown.show .dropdown-menu,
.nav .menu-format-frosted-glass .dropdown:hover .dropdown-menu,
.nav .menu-format-metal-brushed .dropdown.show .dropdown-menu,
.nav .menu-format-metal-brushed .dropdown:hover .dropdown-menu,
.nav .menu-format-neon-glow .dropdown.show .dropdown-menu,
.nav .menu-format-neon-glow .dropdown:hover .dropdown-menu,
.nav .menu-format-wood-textured .dropdown.show .dropdown-menu,
.nav .menu-format-wood-textured .dropdown:hover .dropdown-menu,
.nav .menu-format-holographic .dropdown.show .dropdown-menu,
.nav .menu-format-holographic .dropdown:hover .dropdown-menu,
.nav .menu-format-leather .dropdown.show .dropdown-menu,
.nav .menu-format-leather .dropdown:hover .dropdown-menu,
.nav .menu-format-marble .dropdown.show .dropdown-menu,
.nav .menu-format-marble .dropdown:hover .dropdown-menu,
.nav .menu-format-circuit .dropdown.show .dropdown-menu,
.nav .menu-format-circuit .dropdown:hover .dropdown-menu,
.nav .menu-format-crumpled-paper .dropdown.show .dropdown-menu,
.nav .menu-format-crumpled-paper .dropdown:hover .dropdown-menu,
.nav .menu-format-mirror-glass .dropdown.show .dropdown-menu,
.nav .menu-format-mirror-glass .dropdown:hover .dropdown-menu,
.nav .menu-format-satin-fabric .dropdown.show .dropdown-menu,
.nav .menu-format-satin-fabric .dropdown:hover .dropdown-menu,
.nav .menu-format-concrete .dropdown.show .dropdown-menu,
.nav .menu-format-concrete .dropdown:hover .dropdown-menu,
.nav .menu-format-plasma .dropdown.show .dropdown-menu,
.nav .menu-format-plasma .dropdown:hover .dropdown-menu,
.nav .menu-format-carbon-fiber .dropdown.show .dropdown-menu,
.nav .menu-format-carbon-fiber .dropdown:hover .dropdown-menu,
.nav .menu-format-rainbow-border .dropdown.show .dropdown-menu,
.nav .menu-format-rainbow-border .dropdown:hover .dropdown-menu,
.nav .menu-format-elastic-wave .dropdown.show .dropdown-menu,
.nav .menu-format-elastic-wave .dropdown:hover .dropdown-menu,
.nav .menu-format-floating-particles .dropdown.show .dropdown-menu,
.nav .menu-format-floating-particles .dropdown:hover .dropdown-menu,
.nav .menu-format-spiral-rotate .dropdown.show .dropdown-menu,
.nav .menu-format-spiral-rotate .dropdown:hover .dropdown-menu,
.nav .menu-format-energy-pulse .dropdown.show .dropdown-menu,
.nav .menu-format-energy-pulse .dropdown:hover .dropdown-menu,
.nav .menu-format-3d-gradient .dropdown.show .dropdown-menu,
.nav .menu-format-3d-gradient .dropdown:hover .dropdown-menu,
.nav .menu-format-shockwave .dropdown.show .dropdown-menu,
.nav .menu-format-shockwave .dropdown:hover .dropdown-menu,
.nav .menu-format-cosmic-nebula .dropdown.show .dropdown-menu,
.nav .menu-format-cosmic-nebula .dropdown:hover .dropdown-menu,
.nav .menu-format-liquid-flow .dropdown.show .dropdown-menu,
.nav .menu-format-liquid-flow .dropdown:hover .dropdown-menu,
.nav .menu-format-kaleidoscope .dropdown.show .dropdown-menu,
.nav .menu-format-kaleidoscope .dropdown:hover .dropdown-menu,
.nav .menu-format-magnetic-resonance .dropdown.show .dropdown-menu,
.nav .menu-format-magnetic-resonance .dropdown:hover .dropdown-menu,
.nav .menu-format-vortex-spiral .dropdown.show .dropdown-menu,
.nav .menu-format-vortex-spiral .dropdown:hover .dropdown-menu,
.nav .menu-format-fractal-crystal .dropdown.show .dropdown-menu,
.nav .menu-format-fractal-crystal .dropdown:hover .dropdown-menu,
.nav .menu-format-quantum-interference .dropdown.show .dropdown-menu,
.nav .menu-format-quantum-interference .dropdown:hover .dropdown-menu,
.nav .menu-format-relativistic-tensor .dropdown.show .dropdown-menu,
.nav .menu-format-relativistic-tensor .dropdown:hover .dropdown-menu,
.menu-format-default .dropdown.show .dropdown-menu,
.menu-format-default .dropdown:hover .dropdown-menu,
.menu-format-plastic-rough .dropdown.show .dropdown-menu,
.menu-format-plastic-rough .dropdown:hover .dropdown-menu,
.menu-format-frosted-glass .dropdown.show .dropdown-menu,
.menu-format-frosted-glass .dropdown:hover .dropdown-menu,
.menu-format-metal-brushed .dropdown.show .dropdown-menu,
.menu-format-metal-brushed .dropdown:hover .dropdown-menu,
.menu-format-neon-glow .dropdown.show .dropdown-menu,
.menu-format-neon-glow .dropdown:hover .dropdown-menu,
.menu-format-wood-textured .dropdown.show .dropdown-menu,
.menu-format-wood-textured .dropdown:hover .dropdown-menu,
.menu-format-holographic .dropdown.show .dropdown-menu,
.menu-format-holographic .dropdown:hover .dropdown-menu,
.menu-format-leather .dropdown.show .dropdown-menu,
.menu-format-leather .dropdown:hover .dropdown-menu,
.menu-format-marble .dropdown.show .dropdown-menu,
.menu-format-marble .dropdown:hover .dropdown-menu,
.menu-format-circuit .dropdown.show .dropdown-menu,
.menu-format-circuit .dropdown:hover .dropdown-menu,
.menu-format-crumpled-paper .dropdown.show .dropdown-menu,
.menu-format-crumpled-paper .dropdown:hover .dropdown-menu,
.menu-format-mirror-glass .dropdown.show .dropdown-menu,
.menu-format-mirror-glass .dropdown:hover .dropdown-menu,
.menu-format-satin-fabric .dropdown.show .dropdown-menu,
.menu-format-satin-fabric .dropdown:hover .dropdown-menu,
.menu-format-concrete .dropdown.show .dropdown-menu,
.menu-format-concrete .dropdown:hover .dropdown-menu,
.menu-format-plasma .dropdown.show .dropdown-menu,
.menu-format-plasma .dropdown:hover .dropdown-menu,
.menu-format-carbon-fiber .dropdown.show .dropdown-menu,
.menu-format-carbon-fiber .dropdown:hover .dropdown-menu,
.menu-format-rainbow-border .dropdown.show .dropdown-menu,
.menu-format-rainbow-border .dropdown:hover .dropdown-menu,
.menu-format-elastic-wave .dropdown.show .dropdown-menu,
.menu-format-elastic-wave .dropdown:hover .dropdown-menu,
.menu-format-floating-particles .dropdown.show .dropdown-menu,
.menu-format-floating-particles .dropdown:hover .dropdown-menu,
.menu-format-spiral-rotate .dropdown.show .dropdown-menu,
.menu-format-spiral-rotate .dropdown:hover .dropdown-menu,
.menu-format-energy-pulse .dropdown.show .dropdown-menu,
.menu-format-energy-pulse .dropdown:hover .dropdown-menu,
.menu-format-3d-gradient .dropdown.show .dropdown-menu,
.menu-format-3d-gradient .dropdown:hover .dropdown-menu,
.menu-format-shockwave .dropdown.show .dropdown-menu,
.menu-format-shockwave .dropdown:hover .dropdown-menu,
.menu-format-cosmic-nebula .dropdown.show .dropdown-menu,
.menu-format-cosmic-nebula .dropdown:hover .dropdown-menu,
.menu-format-liquid-flow .dropdown.show .dropdown-menu,
.menu-format-liquid-flow .dropdown:hover .dropdown-menu,
.menu-format-kaleidoscope .dropdown.show .dropdown-menu,
.menu-format-kaleidoscope .dropdown:hover .dropdown-menu,
.menu-format-magnetic-resonance .dropdown.show .dropdown-menu,
.menu-format-magnetic-resonance .dropdown:hover .dropdown-menu,
.menu-format-vortex-spiral .dropdown.show .dropdown-menu,
.menu-format-vortex-spiral .dropdown:hover .dropdown-menu,
.menu-format-fractal-crystal .dropdown.show .dropdown-menu,
.menu-format-fractal-crystal .dropdown:hover .dropdown-menu,
.menu-format-quantum-interference .dropdown.show .dropdown-menu,
.menu-format-quantum-interference .dropdown:hover .dropdown-menu,
.menu-format-relativistic-tensor .dropdown.show .dropdown-menu,
.menu-format-relativistic-tensor .dropdown:hover .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
}

/* Estilo predeterminado - aplicar siempre */
.menu-format-default .dropdown-menu {
    background: rgba(15, 23, 42, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* 1. Plástico Negro Rugoso con Iluminación - Hexágono */
.menu-format-plastic-rough .dropdown-menu {
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 1px,
            rgba(0, 0, 0, 0.4) 1px,
            rgba(0, 0, 0, 0.4) 2px
        ),
        repeating-linear-gradient(
            60deg,
            transparent 0px,
            transparent 1px,
            rgba(0, 0, 0, 0.3) 1px,
            rgba(0, 0, 0, 0.3) 2px
        ),
        repeating-linear-gradient(
            120deg,
            transparent 0px,
            transparent 1px,
            rgba(0, 0, 0, 0.2) 1px,
            rgba(0, 0, 0, 0.2) 2px
        ),
        linear-gradient(135deg, rgba(10, 10, 15, 0.98) 0%, rgba(20, 20, 25, 0.98) 50%, rgba(10, 10, 15, 0.98) 100%) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 200% 200% !important;
    border: 3px solid rgba(40, 40, 50, 0.9) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.8),
        /* Efecto de relieve con sombras internas múltiples */
        inset 0 3px 6px rgba(255, 255, 255, 0.1),
        inset 0 -3px 6px rgba(0, 0, 0, 0.7),
        inset 0 1px 2px rgba(255, 255, 255, 0.08),
        inset 0 -1px 2px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(102, 126, 234, 0.4),
        inset 0 0 60px rgba(102, 126, 234, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    transform-style: preserve-3d !important;
}

/* Asegurar que el menú plástico rugoso esté 8px más abajo dentro del nav */
.navbar-professional .menu-format-plastic-rough .dropdown.show .dropdown-menu,
.navbar-professional .menu-format-plastic-rough .dropdown:hover .dropdown-menu,
.nav .menu-format-plastic-rough .dropdown.show .dropdown-menu,
.nav .menu-format-plastic-rough .dropdown:hover .dropdown-menu,
.menu-format-plastic-rough .dropdown.show .dropdown-menu,
.menu-format-plastic-rough .dropdown:hover .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
}

.menu-format-plastic-rough .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Textura granular con puntos para efecto rugoso */
    background: 
        radial-gradient(circle at 15% 25%, rgba(50, 50, 55, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 85% 75%, rgba(50, 50, 55, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(50, 50, 55, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 30% 70%, rgba(50, 50, 55, 0.35) 1px, transparent 1px),
        radial-gradient(circle at 70% 30%, rgba(50, 50, 55, 0.35) 1px, transparent 1px);
    background-size: 6px 6px, 8px 8px, 10px 10px, 7px 7px, 9px 9px;
    border-radius: 16px;
    pointer-events: none;
    opacity: 0.7;
    /* Efecto de iluminación superior */
    background-blend-mode: overlay;
}

.menu-format-plastic-rough .dropdown-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(102, 126, 234, 0.15) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 16px 16px 0 0;
}

.menu-format-plastic-rough .dropdown-item:hover {
    background: rgba(102, 126, 234, 0.2);
    box-shadow: inset 0 0 20px rgba(102, 126, 234, 0.3);
}

/* 2. Cristal Esmerilado - Textura realista con relieve */
.menu-format-frosted-glass .dropdown-menu {
    background: 
        /* Textura de esmerilado con puntos */
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        rgba(255, 255, 255, 0.15) !important;
    background-size: 3px 3px, 4px 4px, 5px 5px, 3.5px 3.5px, 4.5px 4.5px, 100% 100% !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        /* Efecto de relieve en cristal */
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
}

.menu-format-frosted-glass .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Patrón de esmerilado más denso */
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.1) 0px,
            transparent 1px,
            transparent 2px,
            rgba(255, 255, 255, 0.1) 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1) 0px,
            transparent 1px,
            transparent 2px,
            rgba(255, 255, 255, 0.1) 3px
        );
    background-size: 4px 4px, 4px 4px;
    border-radius: 16px;
    pointer-events: none;
    opacity: 0.5;
}

/* 3. Metal Brushed - Textura de metal cepillado con relieve */
.menu-format-metal-brushed .dropdown-menu {
    background: 
        /* Líneas horizontales de brushed */
        repeating-linear-gradient(
            0deg,
            rgba(120, 120, 130, 0.4) 0px,
            rgba(120, 120, 130, 0.4) 1px,
            rgba(80, 80, 90, 0.4) 1px,
            rgba(80, 80, 90, 0.4) 2px,
            rgba(100, 100, 110, 0.4) 2px,
            rgba(100, 100, 110, 0.4) 3px
        ),
        linear-gradient(
            135deg,
            rgba(60, 60, 70, 0.98) 0%,
            rgba(40, 40, 50, 0.98) 50%,
            rgba(60, 60, 70, 0.98) 100%
        ) !important;
    background-size: 100% 4px, 200% 200% !important;
    animation: metalShine 3s ease-in-out infinite !important;
    border: 1px solid rgba(150, 150, 160, 0.3) !important;
    border-radius: 10px !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.5),
        /* Efecto de relieve metálico */
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
    position: relative !important;
}

.menu-format-metal-brushed .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Variación de brillo para efecto brushed */
    background: linear-gradient(
        0deg,
        rgba(150, 150, 160, 0.2) 0%,
        transparent 20%,
        transparent 40%,
        rgba(150, 150, 160, 0.15) 50%,
        transparent 60%,
        transparent 80%,
        rgba(150, 150, 160, 0.2) 100%
    );
    border-radius: 10px;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes metalShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 4. Neón Glow - Octágono */
.menu-format-neon-glow .dropdown-menu {
    background: rgba(10, 10, 20, 0.95) !important;
    border: 3px solid rgba(102, 126, 234, 0.8) !important;
    border-radius: 18px !important;
    box-shadow: 
        0 0 30px rgba(102, 126, 234, 0.7),
        0 0 60px rgba(118, 75, 162, 0.5),
        0 0 90px rgba(234, 102, 126, 0.3),
        inset 0 0 30px rgba(102, 126, 234, 0.2),
        0 12px 48px rgba(0, 0, 0, 0.8) !important;
    position: relative !important;
    overflow: visible !important;
    animation: neonPulse 2s ease-in-out infinite !important;
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow: 
            0 0 30px rgba(102, 126, 234, 0.7),
            0 0 60px rgba(118, 75, 162, 0.5),
            0 0 90px rgba(234, 102, 126, 0.3),
            inset 0 0 30px rgba(102, 126, 234, 0.2),
            0 12px 48px rgba(0, 0, 0, 0.8);
    }
    50% {
        box-shadow: 
            0 0 50px rgba(102, 126, 234, 1),
            0 0 100px rgba(118, 75, 162, 0.7),
            0 0 150px rgba(234, 102, 126, 0.5),
            inset 0 0 50px rgba(102, 126, 234, 0.4),
            0 12px 48px rgba(0, 0, 0, 0.8);
    }
}

.menu-format-neon-glow .dropdown-item:hover {
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.8);
}

/* 5. Madera Texturizada */
.menu-format-wood-textured .dropdown-menu {
    background: 
        /* Vetas de madera horizontales */
        repeating-linear-gradient(
            0deg,
            rgba(100, 65, 40, 0.6) 0px,
            rgba(100, 65, 40, 0.6) 2px,
            rgba(45, 30, 20, 0.8) 2px,
            rgba(45, 30, 20, 0.8) 4px,
            rgba(80, 50, 30, 0.7) 4px,
            rgba(80, 50, 30, 0.7) 6px,
            rgba(60, 40, 25, 0.75) 6px,
            rgba(60, 40, 25, 0.75) 8px
        ),
        /* Variación de color para profundidad */
        radial-gradient(ellipse at 50% 30%, rgba(100, 65, 40, 0.4) 0%, transparent 60%),
        linear-gradient(135deg, rgba(45, 30, 20, 0.98) 0%, rgba(60, 40, 25, 0.98) 100%) !important;
    background-size: 100% 20px, 200% 200%, 200% 200% !important;
    border: 2px solid rgba(80, 50, 30, 0.8) !important;
    border-radius: 8px !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.6),
        /* Efecto de relieve en madera */
        inset 0 2px 4px rgba(100, 65, 40, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(120, 80, 50, 0.2) !important;
    position: relative !important;
}

.menu-format-wood-textured .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Nudos y variaciones de madera */
    background: 
        radial-gradient(ellipse at 20% 40%, rgba(40, 25, 15, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 60%, rgba(40, 25, 15, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, rgba(50, 30, 20, 0.4) 0%, transparent 35%);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0.7;
}

/* 6. Holográfico - Estrella */
.menu-format-holographic .dropdown-menu {
    background: 
        repeating-linear-gradient(
            45deg,
            rgba(102, 126, 234, 0.3) 0%,
            rgba(118, 75, 162, 0.3) 12.5%,
            rgba(234, 102, 126, 0.3) 25%,
            rgba(126, 234, 102, 0.3) 37.5%,
            rgba(102, 126, 234, 0.3) 50%
        ),
        linear-gradient(
            135deg,
            rgba(102, 126, 234, 0.25) 0%,
            rgba(118, 75, 162, 0.25) 25%,
            rgba(234, 102, 126, 0.25) 50%,
            rgba(126, 234, 102, 0.25) 75%,
            rgba(102, 126, 234, 0.25) 100%
        ) !important;
    background-size: 200% 200%, 400% 400% !important;
    animation: holographicShift 3s ease infinite !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(102, 126, 234, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.1) !important;
    transform-style: preserve-3d !important;
}

@keyframes holographicShift {
    0%, 100% { 
        background-position: 0% 50%, 0% 50%;
        filter: hue-rotate(0deg);
    }
    25% {
        background-position: 50% 0%, 25% 50%;
        filter: hue-rotate(90deg);
    }
    50% { 
        background-position: 100% 50%, 50% 50%;
        filter: hue-rotate(180deg);
    }
    75% {
        background-position: 50% 100%, 75% 50%;
        filter: hue-rotate(270deg);
    }
}

/* 7. Cuero */
.menu-format-leather .dropdown-menu {
    background: 
        /* Poros de cuero */
        radial-gradient(circle at 15% 25%, rgba(60, 45, 35, 0.6) 1px, transparent 1px),
        radial-gradient(circle at 85% 75%, rgba(60, 45, 35, 0.6) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(60, 45, 35, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 30% 70%, rgba(60, 45, 35, 0.55) 1px, transparent 1px),
        radial-gradient(circle at 70% 30%, rgba(60, 45, 35, 0.55) 1px, transparent 1px),
        radial-gradient(circle at 20% 80%, rgba(60, 45, 35, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, rgba(60, 45, 35, 0.5) 1px, transparent 1px),
        /* Patrón de textura de cuero */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 5px,
            rgba(0, 0, 0, 0.1) 5px,
            rgba(0, 0, 0, 0.1) 6px
        ),
        radial-gradient(ellipse at top, rgba(30, 20, 15, 0.98) 0%, rgba(20, 15, 10, 0.98) 100%) !important;
    background-size: 8px 8px, 10px 10px, 12px 12px, 9px 9px, 11px 11px, 7px 7px, 13px 13px, 10px 10px, 100% 100% !important;
    border: 2px solid rgba(60, 40, 25, 0.8) !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.6),
        /* Efecto de relieve en cuero */
        inset 0 2px 4px rgba(80, 60, 45, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(90, 70, 55, 0.2) !important;
    position: relative !important;
}

.menu-format-leather .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Variaciones de color para textura de cuero */
    background: 
        radial-gradient(ellipse at 25% 35%, rgba(40, 30, 20, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 65%, rgba(40, 30, 20, 0.4) 0%, transparent 50%);
    border-radius: 12px;
    pointer-events: none;
    opacity: 0.6;
}
    border-radius: 10px !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* 8. Mármol - Ovalado */
.menu-format-marble .dropdown-menu {
    background: 
        /* Vetas de mármol con variaciones */
        repeating-linear-gradient(
            45deg,
            rgba(120, 120, 130, 0.3) 0px,
            rgba(120, 120, 130, 0.3) 2px,
            rgba(80, 80, 90, 0.4) 2px,
            rgba(80, 80, 90, 0.4) 4px,
            rgba(100, 100, 110, 0.35) 4px,
            rgba(100, 100, 110, 0.35) 6px,
            transparent 6px,
            transparent 20px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(110, 110, 120, 0.25) 0px,
            rgba(110, 110, 120, 0.25) 1px,
            transparent 1px,
            transparent 15px
        ),
        radial-gradient(ellipse at 20% 30%, rgba(90, 90, 100, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 60%, rgba(70, 70, 80, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 20%, rgba(85, 85, 95, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 80%, rgba(75, 75, 85, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, rgba(40, 40, 45, 0.98) 0%, rgba(50, 50, 55, 0.98) 50%, rgba(45, 45, 50, 0.98) 100%) !important;
    background-size: 30px 30px, 25px 25px, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200% !important;
    border: 2px solid rgba(100, 100, 110, 0.5) !important;
    border-radius: 18px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        /* Efecto de relieve en mármol */
        inset 0 2px 4px rgba(150, 150, 160, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(170, 170, 180, 0.15) !important;
    position: relative !important;
}

.menu-format-marble .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Brillo de mármol pulido */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 30%,
        transparent 70%,
        rgba(255, 255, 255, 0.08) 100%
    );
    border-radius: 18px;
    pointer-events: none;
    opacity: 0.5;
}
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 9. Circuito Digital - Rectángulo con esquinas cortadas */
.menu-format-circuit .dropdown-menu {
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 19px,
            rgba(0, 255, 150, 0.1) 19px,
            rgba(0, 255, 150, 0.1) 20px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 19px,
            rgba(0, 255, 150, 0.1) 19px,
            rgba(0, 255, 150, 0.1) 20px
        ),
        rgba(5, 10, 20, 0.98) !important;
    border: 3px solid rgba(0, 255, 150, 0.6) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 0 30px rgba(0, 255, 150, 0.5),
        inset 0 0 30px rgba(0, 255, 150, 0.15),
        0 12px 48px rgba(0, 0, 0, 0.8) !important;
    position: relative !important;
    overflow: hidden !important;
}

.menu-format-circuit .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 150, 0.8), transparent);
    animation: circuitPulse 2s ease-in-out infinite;
}

@keyframes circuitPulse {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 10. Papel Arrugado - Forma irregular */
.menu-format-crumpled-paper .dropdown-menu {
    background: 
        radial-gradient(circle at 15% 25%, rgba(0, 0, 0, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(0, 0, 0, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.08) 0%, transparent 50%),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.06) 2px,
            rgba(0, 0, 0, 0.06) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.04) 2px,
            rgba(0, 0, 0, 0.04) 3px
        ),
        linear-gradient(135deg, rgba(45, 40, 35, 0.98) 0%, rgba(55, 50, 45, 0.98) 50%, rgba(50, 45, 40, 0.98) 100%) !important;
    border: 2px solid rgba(70, 65, 60, 0.7) !important;
    border-radius: 8px 16px 12px 20px !important;
    box-shadow: 
        0 12px 36px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

/* 11. Vidrio Espejado - Diamante */
.menu-format-mirror-glass .dropdown-menu {
    background: 
        linear-gradient(
            135deg,
            rgba(120, 120, 140, 0.4) 0%,
            rgba(100, 100, 120, 0.35) 25%,
            rgba(120, 120, 140, 0.4) 50%,
            rgba(100, 100, 120, 0.35) 75%,
            rgba(120, 120, 140, 0.4) 100%
        ),
        radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%) !important;
    background-size: 200% 200%, 100% 100% !important;
    animation: mirrorShine 3s ease-in-out infinite !important;
    backdrop-filter: blur(30px) brightness(1.3) contrast(1.1) !important;
    -webkit-backdrop-filter: blur(30px) brightness(1.3) contrast(1.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.2) !important;
    transform-style: preserve-3d !important;
}

@keyframes mirrorShine {
    0%, 100% { background-position: 0% 50%, 0% 0%; }
    50% { background-position: 100% 50%, 0% 0%; }
}

/* 12. Tela Satinada - Hexágono suavizado */
.menu-format-satin-fabric .dropdown-menu {
    background: 
        repeating-linear-gradient(
            45deg,
            rgba(50, 45, 60, 0.3) 0px,
            rgba(50, 45, 60, 0.3) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(
            135deg,
            rgba(30, 25, 40, 0.98) 0%,
            rgba(40, 35, 50, 0.98) 25%,
            rgba(35, 30, 45, 0.98) 50%,
            rgba(40, 35, 50, 0.98) 75%,
            rgba(30, 25, 40, 0.98) 100%
        ) !important;
    background-size: 8px 8px, 300% 300% !important;
    animation: satinShimmer 4s ease-in-out infinite !important;
    border: 2px solid rgba(150, 140, 160, 0.4) !important;
    border-radius: 18px !important;
    box-shadow: 
        0 12px 36px rgba(0, 0, 0, 0.6),
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
}

@keyframes satinShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 13. Concreto */
.menu-format-concrete .dropdown-menu {
    background: 
        /* Grano de concreto con puntos */
        radial-gradient(circle at 10% 20%, rgba(80, 80, 85, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 90% 80%, rgba(80, 80, 85, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(80, 80, 85, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 30% 70%, rgba(80, 80, 85, 0.45) 1px, transparent 1px),
        radial-gradient(circle at 70% 30%, rgba(80, 80, 85, 0.45) 1px, transparent 1px),
        /* Patrón de grano */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.15) 2px,
            rgba(0, 0, 0, 0.15) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 3px
        ) !important;
    border: 2px solid rgba(60, 60, 65, 0.8) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

/* 14. Plasma - Círculo */
.menu-format-plasma .dropdown-menu {
    background: 
        radial-gradient(ellipse at top left, rgba(102, 126, 234, 0.4) 0%, transparent 40%),
        radial-gradient(ellipse at bottom right, rgba(118, 75, 162, 0.4) 0%, transparent 40%),
        radial-gradient(ellipse at top right, rgba(234, 102, 126, 0.3) 0%, transparent 40%),
        radial-gradient(ellipse at bottom left, rgba(126, 234, 102, 0.3) 0%, transparent 40%),
        rgba(15, 15, 25, 0.95) !important;
    border: 2px solid rgba(102, 126, 234, 0.5) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(102, 126, 234, 0.5),
        0 0 80px rgba(118, 75, 162, 0.3),
        inset 0 0 40px rgba(102, 126, 234, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    transform-style: preserve-3d !important;
    animation: plasmaPulse 3s ease-in-out infinite !important;
}

.menu-format-plasma .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%);
    animation: plasmaPulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes plasmaPulse {
    0%, 100% { 
        background-position: 0% 0%, 100% 100%, 100% 0%, 0% 100%, 0% 0%;
        filter: hue-rotate(0deg);
    }
    25% {
        background-position: 25% 25%, 75% 75%, 75% 25%, 25% 75%, 0% 0%;
        filter: hue-rotate(90deg);
    }
    50% { 
        background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0% 0%;
        filter: hue-rotate(180deg);
    }
    75% {
        background-position: 75% 75%, 25% 25%, 25% 75%, 75% 25%, 0% 0%;
        filter: hue-rotate(270deg);
    }
}

/* 15. Carbon Fiber - Trapezoidal */
.menu-format-carbon-fiber .dropdown-menu {
    background: 
        /* Patrón de tejido de carbono más denso */
        repeating-linear-gradient(
            0deg,
            rgba(10, 10, 15, 0.98) 0px,
            rgba(10, 10, 15, 0.98) 1px,
            rgba(25, 25, 30, 0.98) 1px,
            rgba(25, 25, 30, 0.98) 2px,
            rgba(15, 15, 20, 0.98) 2px,
            rgba(15, 15, 20, 0.98) 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(10, 10, 15, 0.98) 0px,
            rgba(10, 10, 15, 0.98) 1px,
            rgba(25, 25, 30, 0.98) 1px,
            rgba(25, 25, 30, 0.98) 2px,
            rgba(15, 15, 20, 0.98) 2px,
            rgba(15, 15, 20, 0.98) 3px
        ),
        /* Patrón diagonal para efecto de tejido */
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 3px,
            rgba(30, 30, 35, 0.3) 3px,
            rgba(30, 30, 35, 0.3) 4px
        ),
        repeating-linear-gradient(
            45deg,
            rgba(15, 15, 20, 0.3) 0px,
            rgba(15, 15, 20, 0.3) 1px,
            transparent 1px,
            transparent 3px
        ) !important;
    background-size: 4px 4px, 4px 4px, 8px 8px, 200% 200% !important;
    border: 2px solid rgba(40, 40, 50, 0.9) !important;
    border-radius: 18px !important;
    box-shadow: 
        0 12px 36px rgba(0, 0, 0, 0.8),
        /* Efecto de relieve en fibra de carbono */
        inset 0 2px 4px rgba(50, 50, 55, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(60, 60, 65, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(50, 50, 60, 0.5) !important;
    position: relative !important;
}

.menu-format-carbon-fiber .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Brillo sutil en fibra de carbono */
    background: linear-gradient(
        135deg,
        rgba(60, 60, 65, 0.1) 0%,
        transparent 30%,
        transparent 70%,
        rgba(60, 60, 65, 0.08) 100%
    );
    border-radius: 18px;
    pointer-events: none;
    opacity: 0.5;
}
    position: relative !important;
}

/* ============================================
   ANIMACIONES DE ENTRADA PARA CADA ESTILO
   ============================================ */

/* Animación base predeterminada */
.menu-format-default .dropdown.show .dropdown-menu,
.menu-format-default .dropdown:hover .dropdown-menu {
    animation: menuSlideInDefault 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes menuSlideInDefault {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 1. Plástico Rugoso - Hexágono */
.menu-format-plastic-rough .dropdown.show .dropdown-menu,
.menu-format-plastic-rough .dropdown:hover .dropdown-menu {
    animation: menuSlideInHexagon 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuSlideInHexagon {
    0% {
        opacity: 0;
        transform: translateY(-40px) rotateX(-90deg) scale(0.3);
    }
    60% {
        transform: translateY(5px) rotateX(10deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg) scale(1);
    }
}

/* 2. Cristal Esmerilado - Blur dinámico */
.menu-format-frosted-glass .dropdown.show .dropdown-menu,
.menu-format-frosted-glass .dropdown:hover .dropdown-menu {
    animation: menuSlideInFrosted 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes menuSlideInFrosted {
    0% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
        filter: blur(20px);
    }
    50% {
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

/* 3. Metal Brushed - Deslizamiento lateral */
.menu-format-metal-brushed .dropdown.show .dropdown-menu,
.menu-format-metal-brushed .dropdown:hover .dropdown-menu {
    animation: menuSlideInMetal 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

@keyframes menuSlideInMetal {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotateY(-45deg) scale(0.7);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg) scale(1);
    }
}

/* 4. Neón Glow - Expansión radial */
.menu-format-neon-glow .dropdown.show .dropdown-menu,
.menu-format-neon-glow .dropdown:hover .dropdown-menu {
    animation: menuSlideInNeon 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuSlideInNeon {
    0% {
        opacity: 0;
        transform: scale(0) rotate(180deg);
        filter: blur(10px);
    }
    60% {
        transform: scale(1.1) rotate(-10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}

/* 5. Madera - Desde abajo */
.menu-format-wood-textured .dropdown.show .dropdown-menu,
.menu-format-wood-textured .dropdown:hover .dropdown-menu {
    animation: menuSlideInWood 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes menuSlideInWood {
    0% {
        opacity: 0;
        transform: translateY(60px) rotateX(15deg) scale(0.8);
    }
    60% {
        transform: translateY(-8px) rotateX(-5deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg) scale(1);
    }
}

/* 6. Holográfico - Rotación 3D */
.menu-format-holographic .dropdown.show .dropdown-menu,
.menu-format-holographic .dropdown:hover .dropdown-menu {
    animation: menuSlideInHolographic 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuSlideInHolographic {
    0% {
        opacity: 0;
        transform: rotateY(-90deg) rotateX(45deg) scale(0.5);
        filter: blur(15px) hue-rotate(180deg);
    }
    50% {
        transform: rotateY(10deg) rotateX(-5deg) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg) rotateX(0deg) scale(1);
        filter: blur(0px) hue-rotate(0deg);
    }
}

/* 7. Cuero - Suave */
.menu-format-leather .dropdown.show .dropdown-menu,
.menu-format-leather .dropdown:hover .dropdown-menu {
    animation: menuSlideInLeather 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes menuSlideInLeather {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9) rotateZ(-2deg);
    }
    60% {
        transform: translateY(-5px) scale(1.02) rotateZ(1deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateZ(0deg);
    }
}

/* 8. Mármol - Expansión suave */
.menu-format-marble .dropdown.show .dropdown-menu,
.menu-format-marble .dropdown:hover .dropdown-menu {
    animation: menuSlideInMarble 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes menuSlideInMarble {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(45deg);
        filter: blur(10px);
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}

/* 9. Circuito - Desde izquierda */
.menu-format-circuit .dropdown.show .dropdown-menu,
.menu-format-circuit .dropdown:hover .dropdown-menu {
    animation: menuSlideInCircuit 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

@keyframes menuSlideInCircuit {
    0% {
        opacity: 0;
        transform: translateX(-100%) skewX(-15deg);
        filter: blur(10px);
    }
    60% {
        transform: translateX(5px) skewX(2deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) skewX(0deg);
        filter: blur(0px);
    }
}

/* 10. Papel - Efecto papel */
.menu-format-crumpled-paper .dropdown.show .dropdown-menu,
.menu-format-crumpled-paper .dropdown:hover .dropdown-menu {
    animation: menuSlideInPaper 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes menuSlideInPaper {
    0% {
        opacity: 0;
        transform: translateY(30px) rotateZ(5deg) scale(0.85);
        filter: blur(5px);
    }
    60% {
        transform: translateY(-5px) rotateZ(-2deg) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateZ(0deg) scale(1);
        filter: blur(0px);
    }
}

/* 11. Vidrio Espejado - Reflexión */
.menu-format-mirror-glass .dropdown.show .dropdown-menu,
.menu-format-mirror-glass .dropdown:hover .dropdown-menu {
    animation: menuSlideInMirror 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes menuSlideInMirror {
    0% {
        opacity: 0;
        transform: translateY(-50px) rotateX(60deg) scale(0.6);
        filter: blur(15px) brightness(0.5);
    }
    50% {
        transform: translateY(-10px) rotateX(-10deg) scale(1.05);
        filter: blur(5px) brightness(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg) scale(1);
        filter: blur(0px) brightness(1);
    }
}

/* 12. Tela Satinada - Deslizamiento suave */
.menu-format-satin-fabric .dropdown.show .dropdown-menu,
.menu-format-satin-fabric .dropdown:hover .dropdown-menu {
    animation: menuSlideInSatin 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes menuSlideInSatin {
    0% {
        opacity: 0;
        transform: translateY(50px) scaleY(0.3);
        filter: blur(8px);
    }
    60% {
        transform: translateY(-8px) scaleY(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        filter: blur(0px);
    }
}

/* 13. Concreto - Pesado */
.menu-format-concrete .dropdown.show .dropdown-menu,
.menu-format-concrete .dropdown:hover .dropdown-menu {
    animation: menuSlideInConcrete 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes menuSlideInConcrete {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.7);
        filter: blur(12px);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

/* 14. Plasma - Expansión radial */
.menu-format-plasma .dropdown.show .dropdown-menu,
.menu-format-plasma .dropdown:hover .dropdown-menu {
    animation: menuSlideInPlasma 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuSlideInPlasma {
    0% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
        filter: blur(20px) hue-rotate(180deg);
    }
    50% {
        transform: scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px) hue-rotate(0deg);
    }
}

/* 15. Carbon Fiber - Rápido */
.menu-format-carbon-fiber .dropdown.show .dropdown-menu,
.menu-format-carbon-fiber .dropdown:hover .dropdown-menu {
    animation: menuSlideInCarbon 0.4s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

@keyframes menuSlideInCarbon {
    0% {
        opacity: 0;
        transform: translateX(100%) skewX(20deg) scale(0.8);
        filter: blur(8px);
    }
    60% {
        transform: translateX(-5px) skewX(-2deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) skewX(0deg) scale(1);
        filter: blur(0px);
    }
}

/* ============================================
   NUEVOS 10 ESTILOS AVANZADOS CON MATEMÁTICAS PURAS
   Todos con esquinas redondeadas y efectos innovadores
   ============================================ */

/* 16. Borde Rotativo Arcoíris - Colores rotando con efecto de profundidad */
.menu-format-rainbow-border .dropdown-menu {
    background: rgba(15, 23, 42, 0.98) !important;
    border: 4px solid transparent !important;
    border-radius: 16px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 8px 0 !important;
}

.menu-format-rainbow-border .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(
        45deg,
        #ff0000 0%,
        #ff7f00 14.28%,
        #ffff00 28.56%,
        #00ff00 42.84%,
        #0000ff 57.12%,
        #4b0082 71.4%,
        #9400d3 85.68%,
        #ff0000 100%
    );
    background-size: 400% 400%;
    border-radius: 16px;
    z-index: -1;
    animation: rainbowRotate 3s linear infinite !important;
    filter: blur(2px);
}

.menu-format-rainbow-border .dropdown-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.98);
    border-radius: 12px;
    z-index: -1;
}

@keyframes rainbowRotate {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.menu-format-rainbow-border .dropdown.show .dropdown-menu,
.menu-format-rainbow-border .dropdown:hover .dropdown-menu {
    animation: menuBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuBounceIn {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.5);
    }
    50% {
        transform: translateY(10px) scale(1.1);
    }
    70% {
        transform: translateY(-5px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.menu-format-rainbow-border .dropdown-item:hover {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2)) !important;
    transform: translateX(5px) scale(1.02);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 17. Onda Elástica - Efecto de empuje con ondas */
.menu-format-elastic-wave .dropdown-menu {
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(102, 126, 234, 0.15) 0%, transparent 70%),
        rgba(15, 23, 42, 0.98) !important;
    border: 3px solid rgba(102, 126, 234, 0.6) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(102, 126, 234, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.menu-format-elastic-wave .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(102, 126, 234, 0.1) 20px,
            rgba(102, 126, 234, 0.1) 22px
        );
    animation: elasticWave 2s ease-in-out infinite !important;
    pointer-events: none;
}

@keyframes elasticWave {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) scale(1.1);
        opacity: 0.6;
    }
}

.menu-format-elastic-wave .dropdown.show .dropdown-menu,
.menu-format-elastic-wave .dropdown:hover .dropdown-menu {
    animation: menuElasticPush 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuElasticPush {
    0% {
        opacity: 0;
        transform: translateY(-50px) scaleY(0.2);
    }
    40% {
        transform: translateY(15px) scaleY(1.15);
    }
    60% {
        transform: translateY(-8px) scaleY(0.9);
    }
    80% {
        transform: translateY(4px) scaleY(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

.menu-format-elastic-wave .dropdown-item:hover {
    background: rgba(102, 126, 234, 0.25) !important;
    transform: translateX(8px) scale(1.03);
    box-shadow: -5px 0 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 18. Partículas Flotantes - Efecto de profundidad con partículas */
.menu-format-floating-particles .dropdown-menu {
    background: 
        radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(234, 102, 126, 0.08) 0%, transparent 60%),
        rgba(15, 23, 42, 0.98) !important;
    border: 2px solid rgba(102, 126, 234, 0.5) !important;
    border-radius: 18px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(102, 126, 234, 0.3),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.menu-format-floating-particles .dropdown-menu::before,
.menu-format-floating-particles .dropdown-menu::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.8), transparent);
    border-radius: 50%;
    pointer-events: none;
    animation: floatParticle 4s ease-in-out infinite;
}

.menu-format-floating-particles .dropdown-menu::before {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.menu-format-floating-particles .dropdown-menu::after {
    top: 60%;
    right: 20%;
    animation-delay: 2s;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(118, 75, 162, 0.8), transparent);
}

@keyframes floatParticle {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translate(15px, -20px) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translate(-10px, -35px) scale(0.8);
        opacity: 0.8;
    }
    75% {
        transform: translate(20px, -15px) scale(1.1);
        opacity: 0.9;
    }
}

.menu-format-floating-particles .dropdown.show .dropdown-menu,
.menu-format-floating-particles .dropdown:hover .dropdown-menu {
    animation: menuFloatIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes menuFloatIn {
    0% {
        opacity: 0;
        transform: translateY(-40px) rotateZ(-5deg) scale(0.7);
        filter: blur(10px);
    }
    50% {
        transform: translateY(8px) rotateZ(2deg) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateZ(0deg) scale(1);
        filter: blur(0px);
    }
}

.menu-format-floating-particles .dropdown-item:hover {
    background: rgba(102, 126, 234, 0.2) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

/* 19. Espiral Rotativa - Borde con espiral matemática */
.menu-format-spiral-rotate .dropdown-menu {
    background: rgba(15, 23, 42, 0.98) !important;
    border: 3px solid transparent !important;
    border-radius: 20px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.menu-format-spiral-rotate .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: conic-gradient(
        from 0deg,
        #667eea 0deg,
        #764ba2 60deg,
        #f093fb 120deg,
        #4facfe 180deg,
        #00f2fe 240deg,
        #43e97b 300deg,
        #667eea 360deg
    );
    border-radius: 20px;
    z-index: -1;
    animation: spiralRotate 3s linear infinite !important;
}

.menu-format-spiral-rotate .dropdown-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.98);
    border-radius: 17px;
    z-index: -1;
}

@keyframes spiralRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.menu-format-spiral-rotate .dropdown.show .dropdown-menu,
.menu-format-spiral-rotate .dropdown:hover .dropdown-menu {
    animation: menuSpiralIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuSpiralIn {
    0% {
        opacity: 0;
        transform: rotate(-180deg) scale(0.3);
    }
    60% {
        transform: rotate(10deg) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.menu-format-spiral-rotate .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3)) !important;
    transform: rotate(2deg) scale(1.03);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 20. Pulso Energético - Borde pulsante con energía */
.menu-format-energy-pulse .dropdown-menu {
    background: rgba(5, 10, 20, 0.98) !important;
    border: 3px solid rgba(0, 255, 150, 0.6) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 255, 150, 0.5),
        inset 0 0 30px rgba(0, 255, 150, 0.1) !important;
    position: relative !important;
    overflow: visible !important;
}

.menu-format-energy-pulse .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 3px solid rgba(0, 255, 150, 0.8);
    border-radius: 19px;
    z-index: -1;
    animation: energyPulse 2s ease-in-out infinite !important;
}

@keyframes energyPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 20px rgba(0, 255, 150, 0.6);
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
        box-shadow: 0 0 40px rgba(0, 255, 150, 1);
    }
}

.menu-format-energy-pulse .dropdown.show .dropdown-menu,
.menu-format-energy-pulse .dropdown:hover .dropdown-menu {
    animation: menuEnergyBurst 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuEnergyBurst {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
        filter: brightness(0) blur(20px);
    }
    50% {
        transform: scale(1.3) rotate(180deg);
        filter: brightness(2) blur(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(360deg);
        filter: brightness(1) blur(0px);
    }
}

.menu-format-energy-pulse .dropdown-item:hover {
    background: rgba(0, 255, 150, 0.2) !important;
    box-shadow: 
        0 0 20px rgba(0, 255, 150, 0.6),
        inset 0 0 15px rgba(0, 255, 150, 0.3) !important;
    transform: scale(1.05) translateX(5px);
    transition: all 0.3s ease;
}

/* 21. Gradiente Dinámico 3D - Profundidad matemática */
.menu-format-3d-gradient .dropdown-menu {
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 50%, rgba(234, 102, 126, 0.2) 100%),
        linear-gradient(225deg, rgba(126, 234, 102, 0.15) 0%, rgba(102, 126, 234, 0.15) 100%),
        rgba(15, 23, 42, 0.98) !important;
    background-size: 200% 200%, 150% 150%, 100% 100% !important;
    border: 3px solid rgba(102, 126, 234, 0.5) !important;
    border-radius: 18px !important;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(102, 126, 234, 0.4),
        inset 0 3px 10px rgba(255, 255, 255, 0.15),
        inset 0 -3px 10px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    transform-style: preserve-3d !important;
    animation: gradient3DShift 5s ease-in-out infinite !important;
}

@keyframes gradient3DShift {
    0%, 100% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    }
    25% {
        background-position: 50% 25%, 25% 50%, 0% 0%;
        transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
    }
    50% {
        background-position: 100% 50%, 50% 100%, 0% 0%;
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    }
    75% {
        background-position: 50% 75%, 75% 50%, 0% 0%;
        transform: perspective(1000px) rotateX(-2deg) rotateY(2deg);
    }
}

.menu-format-3d-gradient .dropdown.show .dropdown-menu,
.menu-format-3d-gradient .dropdown:hover .dropdown-menu {
    animation: 
        gradient3DShift 5s ease-in-out infinite,
        menu3DPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes menu3DPop {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(-90deg) translateZ(-100px) scale(0.5);
    }
    60% {
        transform: perspective(1000px) rotateX(10deg) translateZ(20px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg) translateZ(0px) scale(1);
    }
}

.menu-format-3d-gradient .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3)) !important;
    transform: perspective(500px) translateZ(10px) scale(1.03);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 22. Onda de Choque - Efecto de empuje con ondas concéntricas */
.menu-format-shockwave .dropdown-menu {
    background: rgba(15, 23, 42, 0.98) !important;
    border: 3px solid rgba(102, 126, 234, 0.6) !important;
    border-radius: 22px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 35px rgba(102, 126, 234, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: visible !important;
}

.menu-format-shockwave .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border: 2px solid rgba(102, 126, 234, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: shockwave 2s ease-out infinite !important;
    pointer-events: none;
}

@keyframes shockwave {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
        border-width: 1px;
    }
}

.menu-format-shockwave .dropdown.show .dropdown-menu,
.menu-format-shockwave .dropdown:hover .dropdown-menu {
    animation: menuShockwaveIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuShockwaveIn {
    0% {
        opacity: 0;
        transform: scale(0.2);
        filter: blur(15px);
    }
    40% {
        transform: scale(1.2);
    }
    60% {
        transform: scale(0.9);
    }
    80% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
}

.menu-format-shockwave .dropdown-item:hover {
    background: rgba(102, 126, 234, 0.25) !important;
    transform: scale(1.05) translateX(6px);
    box-shadow: 0 0 25px rgba(102, 126, 234, 0.5);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 23. Nebulosa Cósmica - Efecto de profundidad espacial */
.menu-format-cosmic-nebula .dropdown-menu {
    background: 
        radial-gradient(ellipse at 30% 40%, rgba(102, 126, 234, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(118, 75, 162, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 20%, rgba(234, 102, 126, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(126, 234, 102, 0.15) 0%, transparent 50%),
        rgba(5, 5, 15, 0.98) !important;
    border: 2px solid rgba(102, 126, 234, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(102, 126, 234, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    animation: cosmicDrift 8s ease-in-out infinite !important;
}

@keyframes cosmicDrift {
    0%, 100% {
        background-position: 0% 0%, 100% 100%, 50% 0%, 0% 100%, 0% 0%;
        filter: hue-rotate(0deg);
    }
    25% {
        background-position: 25% 25%, 75% 75%, 75% 25%, 25% 75%, 0% 0%;
        filter: hue-rotate(90deg);
    }
    50% {
        background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0% 0%;
        filter: hue-rotate(180deg);
    }
    75% {
        background-position: 75% 75%, 25% 25%, 25% 75%, 75% 25%, 0% 0%;
        filter: hue-rotate(270deg);
    }
}

.menu-format-cosmic-nebula .dropdown.show .dropdown-menu,
.menu-format-cosmic-nebula .dropdown:hover .dropdown-menu {
    animation: 
        cosmicDrift 8s ease-in-out infinite,
        menuCosmicExpand 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes menuCosmicExpand {
    0% {
        opacity: 0;
        transform: scale(0) rotate(180deg);
        filter: blur(20px) brightness(0);
    }
    50% {
        transform: scale(1.3) rotate(90deg);
        filter: blur(5px) brightness(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px) brightness(1);
    }
}

.menu-format-cosmic-nebula .dropdown-item:hover {
    background: radial-gradient(ellipse, rgba(102, 126, 234, 0.3), transparent) !important;
    transform: scale(1.04) translateZ(5px);
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.6);
    transition: all 0.3s ease;
}

/* 24. Líquido Animado - Efecto de fluido con matemáticas */
.menu-format-liquid-flow .dropdown-menu {
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%),
        rgba(15, 23, 42, 0.98) !important;
    border: 3px solid rgba(102, 126, 234, 0.5) !important;
    border-radius: 24px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 35px rgba(102, 126, 234, 0.3),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.menu-format-liquid-flow .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%);
    animation: liquidFlow 4s ease-in-out infinite !important;
    pointer-events: none;
}

@keyframes liquidFlow {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.4;
    }
    25% {
        transform: translate(30px, -30px) scale(1.2) rotate(90deg);
        opacity: 0.6;
    }
    50% {
        transform: translate(-20px, 20px) scale(0.8) rotate(180deg);
        opacity: 0.5;
    }
    75% {
        transform: translate(20px, 30px) scale(1.1) rotate(270deg);
        opacity: 0.7;
    }
}

.menu-format-liquid-flow .dropdown.show .dropdown-menu,
.menu-format-liquid-flow .dropdown:hover .dropdown-menu {
    animation: menuLiquidPour 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes menuLiquidPour {
    0% {
        opacity: 0;
        transform: translateY(-60px) scaleY(0.1) rotateX(-45deg);
        filter: blur(12px);
    }
    40% {
        transform: translateY(10px) scaleY(1.15) rotateX(5deg);
    }
    60% {
        transform: translateY(-5px) scaleY(0.95) rotateX(-2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1) rotateX(0deg);
        filter: blur(0px);
    }
}

.menu-format-liquid-flow .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3)) !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

/* 25. Caleidoscopio - Patrones rotativos matemáticos */
.menu-format-kaleidoscope .dropdown-menu {
    background: 
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            rgba(102, 126, 234, 0.2) 0deg,
            rgba(118, 75, 162, 0.2) 30deg,
            rgba(234, 102, 126, 0.2) 60deg,
            rgba(126, 234, 102, 0.2) 90deg,
            rgba(102, 126, 234, 0.2) 120deg
        ),
        rgba(15, 23, 42, 0.98) !important;
    background-size: 200% 200%, 100% 100% !important;
    border: 3px solid rgba(102, 126, 234, 0.5) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(102, 126, 234, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    animation: kaleidoscopeRotate 6s linear infinite !important;
}

@keyframes kaleidoscopeRotate {
    0% {
        background-position: 0% 0%, 0% 0%;
        filter: hue-rotate(0deg);
    }
    100% {
        background-position: 100% 100%, 0% 0%;
        filter: hue-rotate(360deg);
    }
}

.menu-format-kaleidoscope .dropdown.show .dropdown-menu,
.menu-format-kaleidoscope .dropdown:hover .dropdown-menu {
    animation: 
        kaleidoscopeRotate 6s linear infinite,
        menuKaleidoscopeIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuKaleidoscopeIn {
    0% {
        opacity: 0;
        transform: rotate(-360deg) scale(0.3);
        filter: blur(15px) hue-rotate(180deg);
    }
    50% {
        transform: rotate(180deg) scale(1.2);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
        filter: blur(0px) hue-rotate(0deg);
    }
}

.menu-format-kaleidoscope .dropdown-item:hover {
    background: conic-gradient(from 45deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3), rgba(234, 102, 126, 0.3)) !important;
    transform: rotate(5deg) scale(1.03);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 26. Resonancia Magnética - Ondas de frecuencia */
.menu-format-magnetic-resonance .dropdown-menu {
    background: rgba(15, 23, 42, 0.98) !important;
    border: 3px solid rgba(102, 126, 234, 0.6) !important;
    border-radius: 18px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 35px rgba(102, 126, 234, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: visible !important;
}

.menu-format-magnetic-resonance .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(102, 126, 234, 0.8),
        rgba(118, 75, 162, 0.8),
        rgba(102, 126, 234, 0.8),
        transparent
    );
    transform: translate(-50%, -50%) rotate(0deg);
    animation: magneticWave 2s ease-in-out infinite !important;
    pointer-events: none;
}

.menu-format-magnetic-resonance .dropdown-menu::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, 
        transparent,
        rgba(102, 126, 234, 0.8),
        rgba(118, 75, 162, 0.8),
        rgba(102, 126, 234, 0.8),
        transparent
    );
    transform: translate(-50%, -50%) rotate(0deg);
    animation: magneticWaveVertical 2s ease-in-out infinite 0.5s !important;
    pointer-events: none;
}

@keyframes magneticWave {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg) scaleX(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scaleX(1.2);
        opacity: 1;
    }
}

@keyframes magneticWaveVertical {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg) scaleY(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scaleY(1.2);
        opacity: 1;
    }
}

.menu-format-magnetic-resonance .dropdown.show .dropdown-menu,
.menu-format-magnetic-resonance .dropdown:hover .dropdown-menu {
    animation: menuMagneticPulse 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuMagneticPulse {
    0% {
        opacity: 0;
        transform: scale(0.5);
        filter: blur(10px) brightness(0.5);
    }
    50% {
        transform: scale(1.15);
        filter: blur(3px) brightness(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
}

.menu-format-magnetic-resonance .dropdown-item:hover {
    background: rgba(102, 126, 234, 0.25) !important;
    box-shadow: 
        0 0 25px rgba(102, 126, 234, 0.6),
        inset 0 0 20px rgba(102, 126, 234, 0.2) !important;
    transform: scale(1.04);
    transition: all 0.3s ease;
}

/* 27. Vórtice Matemático - Espiral de profundidad */
.menu-format-vortex-spiral .dropdown-menu {
    background: 
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            rgba(102, 126, 234, 0.15) 0deg,
            transparent 5deg,
            rgba(118, 75, 162, 0.15) 10deg,
            transparent 15deg,
            rgba(234, 102, 126, 0.15) 20deg,
            transparent 25deg
        ),
        rgba(15, 23, 42, 0.98) !important;
    border: 3px solid rgba(102, 126, 234, 0.5) !important;
    border-radius: 22px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(102, 126, 234, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    animation: vortexSpin 4s linear infinite !important;
}

@keyframes vortexSpin {
    0% {
        background-position: 0% 0%;
        filter: hue-rotate(0deg);
    }
    100% {
        background-position: 100% 100%;
        filter: hue-rotate(360deg);
    }
}

.menu-format-vortex-spiral .dropdown.show .dropdown-menu,
.menu-format-vortex-spiral .dropdown:hover .dropdown-menu {
    animation: 
        vortexSpin 4s linear infinite,
        menuVortexIn 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuVortexIn {
    0% {
        opacity: 0;
        transform: rotate(-720deg) scale(0.2);
        filter: blur(20px);
    }
    60% {
        transform: rotate(90deg) scale(1.2);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
        filter: blur(0px);
    }
}

.menu-format-vortex-spiral .dropdown-item:hover {
    background: conic-gradient(from 0deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3), rgba(234, 102, 126, 0.3), rgba(102, 126, 234, 0.3)) !important;
    transform: rotate(3deg) scale(1.03);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 28. Cristal Fractal - Patrones matemáticos recursivos */
.menu-format-fractal-crystal .dropdown-menu {
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(102, 126, 234, 0.1) 8px,
            rgba(102, 126, 234, 0.1) 9px
        ),
        repeating-linear-gradient(
            60deg,
            transparent 0px,
            transparent 8px,
            rgba(118, 75, 162, 0.08) 8px,
            rgba(118, 75, 162, 0.08) 9px
        ),
        repeating-linear-gradient(
            120deg,
            transparent 0px,
            transparent 8px,
            rgba(234, 102, 126, 0.06) 8px,
            rgba(234, 102, 126, 0.06) 9px
        ),
        rgba(15, 23, 42, 0.98) !important;
    border: 3px solid rgba(102, 126, 234, 0.5) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 35px rgba(102, 126, 234, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.15),
        inset 0 -2px 8px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.menu-format-fractal-crystal .dropdown.show .dropdown-menu,
.menu-format-fractal-crystal .dropdown:hover .dropdown-menu {
    animation: menuFractalGrow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes menuFractalGrow {
    0% {
        opacity: 0;
        transform: scale(0.1) rotate(45deg);
        filter: blur(15px) brightness(0.3);
    }
    40% {
        transform: scale(1.3) rotate(-10deg);
        filter: blur(5px) brightness(1.2);
    }
    60% {
        transform: scale(0.9) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px) brightness(1);
    }
}

.menu-format-fractal-crystal .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(118, 75, 162, 0.25)) !important;
    transform: translateX(5px) scale(1.02);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

/* 29. Interferencia Cuántica - Patrones de onda */
.menu-format-quantum-interference .dropdown-menu {
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(102, 126, 234, 0.1) 0px,
            rgba(102, 126, 234, 0.1) 2px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(118, 75, 162, 0.08) 0px,
            rgba(118, 75, 162, 0.08) 2px,
            transparent 2px,
            transparent 4px
        ),
        radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.15) 0%, transparent 70%),
        rgba(15, 23, 42, 0.98) !important;
    border: 3px solid rgba(102, 126, 234, 0.5) !important;
    border-radius: 18px !important;
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(102, 126, 234, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    animation: quantumInterference 3s ease-in-out infinite !important;
}

@keyframes quantumInterference {
    0%, 100% {
        background-position: 0% 0%, 0% 0%, 50% 50%;
        filter: hue-rotate(0deg);
    }
    50% {
        background-position: 100% 100%, 100% 100%, 50% 50%;
        filter: hue-rotate(180deg);
    }
}

.menu-format-quantum-interference .dropdown.show .dropdown-menu,
.menu-format-quantum-interference .dropdown:hover .dropdown-menu {
    animation: 
        quantumInterference 3s ease-in-out infinite,
        menuQuantumCollapse 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

@keyframes menuQuantumCollapse {
    0% {
        opacity: 0;
        transform: scale(0) rotate(180deg);
        filter: blur(20px) brightness(0);
    }
    50% {
        transform: scale(1.4) rotate(90deg);
        filter: blur(5px) brightness(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px) brightness(1);
    }
}

.menu-format-quantum-interference .dropdown-item:hover {
    background: 
        repeating-linear-gradient(
            45deg,
            rgba(102, 126, 234, 0.2) 0px,
            rgba(102, 126, 234, 0.2) 4px,
            rgba(118, 75, 162, 0.2) 4px,
            rgba(118, 75, 162, 0.2) 8px
        ) !important;
    transform: scale(1.03) translateX(4px);
    box-shadow: 0 0 25px rgba(102, 126, 234, 0.5);
    transition: all 0.3s ease;
}

/* 30. Tensor Relativista - Efecto de espacio-tiempo */
.menu-format-relativistic-tensor .dropdown-menu {
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 50%, rgba(234, 102, 126, 0.2) 100%),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 10px,
            rgba(102, 126, 234, 0.05) 10px,
            rgba(102, 126, 234, 0.05) 11px
        ),
        rgba(15, 23, 42, 0.98) !important;
    background-size: 300% 300%, 20px 20px, 100% 100% !important;
    border: 3px solid rgba(102, 126, 234, 0.5) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.7),
        0 0 45px rgba(102, 126, 234, 0.5),
        inset 0 3px 10px rgba(255, 255, 255, 0.15),
        inset 0 -3px 10px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    transform-style: preserve-3d !important;
    animation: tensorWarp 5s ease-in-out infinite !important;
}

@keyframes tensorWarp {
    0%, 100% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
    }
    25% {
        background-position: 25% 25%, 5px 5px, 0% 0%;
        transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) scale(1.02);
    }
    50% {
        background-position: 50% 50%, 10px 10px, 0% 0%;
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
    }
    75% {
        background-position: 75% 75%, 5px 5px, 0% 0%;
        transform: perspective(1000px) rotateX(-3deg) rotateY(3deg) scale(1.02);
    }
}

.menu-format-relativistic-tensor .dropdown.show .dropdown-menu,
.menu-format-relativistic-tensor .dropdown:hover .dropdown-menu {
    animation: 
        tensorWarp 5s ease-in-out infinite,
        menuTensorExpand 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes menuTensorExpand {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(-90deg) rotateY(-90deg) translateZ(-200px) scale(0.3);
        filter: blur(20px) brightness(0);
    }
    50% {
        transform: perspective(1000px) rotateX(10deg) rotateY(10deg) translateZ(30px) scale(1.2);
        filter: blur(5px) brightness(1.3);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0px) scale(1);
        filter: blur(0px) brightness(1);
    }
}

.menu-format-relativistic-tensor .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3)) !important;
    transform: perspective(500px) translateZ(15px) scale(1.04) rotateX(2deg);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}