/**
 * Estilos del menú vertical/móvil.
 * Extraído del CSS inline de merto_child_vertical_menu_styles() (refactor 2026).
 */
        /* Quitar formato de mayúsculas del menú vertical */
        .vertical-menu-heading span,
        .menu-sticky-heading span,
        #vertical-menu span {
            text-transform: none !important;
        }

        /* Sobrescribir el border-radius del formulario para el select de categorías */
        .ts-search-by-category select.select-category {
            border-radius: 0 !important;
        }

        /* En móvil, quitar el border-radius del form pero mantenerlo en el input */
        @media (max-width: 768px) {
            #ts-search-sidebar .ts-search-by-category form {
                border-radius: 0 !important;
            }

            /* Mantener border-radius solo en el campo de búsqueda */
            #ts-search-sidebar .ts-search-by-category .search-content,
            #ts-search-sidebar .ts-search-by-category .search-field {
                border-radius: 50px !important;
            }
        }

        /* Ocultar iconos originales del menú móvil */
        #group-icon-header .tab-mobile-menu li#main-menu:before,
        #group-icon-header .tab-mobile-menu li#vertical-menu > span:after {
            display: none !important;
        }

        /* Hacer que ambos botones tengan el mismo tamaño */
        #group-icon-header .tab-mobile-menu li#main-menu,
        #group-icon-header .tab-mobile-menu li#vertical-menu {
            flex: 1 !important;
            width: 50% !important;
        }

        /* Color de fondo azul para el botón activo */
        #group-icon-header .tab-mobile-menu li.active {
            background: #125BC9 !important;
            color: #ffffff !important;
        }

        /* Asegurar que el texto y los iconos hereden el color blanco cuando está activo */
        #group-icon-header .tab-mobile-menu li.active span,
        #group-icon-header .tab-mobile-menu li.active svg {
            color: #ffffff !important;
        }

        /* Estilos para los nuevos iconos SVG */
        #group-icon-header .tab-mobile-menu li span {
            display: flex !important;
            align-items: center;
            justify-content: center !important;
            gap: 6px;
            width: 100%;
        }

        #group-icon-header .tab-mobile-menu li svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        /* Ajustar el texto cuando hay iconos */
        #group-icon-header .ts-sidebar-content:not(.no-tab) .tab-mobile-menu li#main-menu > span {
            display: flex !important; /* Sobrescribir el display: none del tema */
        }

        /* Hover para los botones no activos */
        #group-icon-header .tab-mobile-menu li:not(.active):hover {
            background: rgba(18, 91, 201, 0.1) !important;
        }