/* GENERAL */

    .nowrap{
    white-space: nowrap;
    }
    
    select:focus option[disabled] { 
    display: none; 
    }

    #modalMiembros{
    z-index: 10001;
    }
    .modal-backdrop.fade.show:nth-of-type(4){
    z-index: 10000;
    }

    .json-format{
    max-height: 400px;
    overflow-y:overlay
    }

    .btn-primary-dark{
    color: white;
    border-color: #141c7e;
    background-color: #141c7e;
    }
    .btn-primary-dark:hover,
    .btn-primary-dark:focus,
    .btn-primary-dark:active{
    color: white;
    border-color: #0e155f;
    background-color: #0e155f;
    }
    .hover:hover{
    background-color: rgba(var(--bs-dark-rgb), 0.05) !important;
    }
    .c-pointer{
    cursor:pointer
    }
    .rounded{
    border-radius: 8px !important;
    }
    .arrow-down{
    margin-left: -6px !important;
    }
    .nav-item{
    padding-left: 10px !important;
    }
    /* SWAL*/
        .swal2-title{
        padding-top: 0;
        }
        .swal2-confirm {
        background-color: rgba(var(--bs-primary-rgb), 1) !important;
        color: rgba(var(--bs-white-rgb), 1) !important;
        }
        .swal2-cancel {
        background-color: rgba(var(--bs-secondary-rgb), 1) !important;
        color: rgba(var(--bs-white-rgb), 1) !important;
        }
        .swal2-footer{
        border: none;
        }
        .swal2-popup.swal2-modal.swal2-loading {
        padding: 30px;
        }
        .swal2-popup.swal2-modal.swal2-loading .swal2-loading {
        margin-top: 0px !important;
        }
        .swal2-popup.swal2-modal.swal2-loading .swal2-loading .swal2-loader{
        height: 40px;
        width: 40px;
        }

    /* MODALES*/
        .modal .nav-item {
        padding: 0 !important;
        }
        .modal .tab-pane-content{
        max-height: 55vh;
        height: 55vh;
        overflow-y: auto;
        }
        .modal .nav-fill .nav-item .nav-link, 
        .modal .nav-justified .nav-item .nav-link {
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        }

    /* MODALES CUSTOM*/
        .modal-custom  .modal-dialog {
        display: flex;
        max-width: 90vw; /* evita que se salga de pantalla */
        margin: auto !important;
        width: auto;
        }
        .modal-custom .modal-content {
        width: auto;
        display: inline-block;
        min-width: 50vw !important;
        }
        .modal-custom {
        display: flex !important;
        justify-content:center;
        align-items:end;
        }
        .modal-custom.fade{
        display: none !important;
        }
        .modal-custom.fade.show{
        display: flex !important;
        }

    .form-control, .btn-group{
    font-weight: 400 !important;
    }
    
    body[data-layout=horizontal] .container-fluid,
    body[data-layout=horizontal] .navbar-header {
    max-width: 100%;
    }

    body[data-layout=horizontal] .page-content {
    margin-top: 0;
    }

    body[data-sidebar-size=sm] {
    min-height: auto;
    }

    td.descripcion {
    max-width: 250px;
    white-space: normal;
    word-wrap: break-word;
    }

    body[data-layout=horizontal] .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: var(--bs-btn-active-bg) !important;
    }

    .form-check-input{
        width: 18px;
        height: 18px;
        margin-top: auto;
    }

    /* Soporte para submenú de varios niveles (si usas .dropdown-submenu) */
        #menu-busqueda .dropdown-submenu { 
        position: relative; 
        }
        #menu-busqueda .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .15rem;
        }

        .page-content{
        margin-top: 100px !important;
        min-height: calc(100vh - 209px);
        }



    #page-topbar{
        border-bottom: 1px solid #CFCFCF !important;
    }

    
    

/* HEADER */
    #bar-1 { /* BARRA AZUL */
    height:49px !important; 
    }
    #bar-2 { /* BARRA GRIS */
    height:80px !important; 
    }
    .logo-img{
    height: 40px !important;
    }
    .submenu_user{
    margin-left: 40px;
    }
    .accordion-button::after {
    margin-left: -20px;
    position: absolute;
    }
    /* NOTIFICACION */
        #div-notificacion{
        z-index: 2010; 
        margin-top: -10px !important;
        margin-right: -180px !important;
        }
        #cantidad_notificaciones{
        margin-top: 11px;
        margin-right: 95px;
        width: 12px;
        height: 12px;
        position: absolute;
        padding: 0;
        font-size: 10px;
        }

    /* CARRO */
        #cantidad_item_carro{
        width: 20px;
        height: 20px;
        position: absolute;
        margin-top: -21px;
        margin-left: 100px;
        }

    /* BARRA DE BUSQUEDA */
        #tabla_busqueda{
        z-index: 100;
        box-shadow: 0px 5px 25px -5px #0C0B0D0A !important;
        margin-top: -20px;
        }
        #buscarProducto, #buscarProducto_icon{
        z-index: 984;
        }
        #tabla_historial tr:hover td,
        #tabla_mas_buscados tr:hover td #tabla_sugeridos tr:hover td {
        background-color: #f0f0f0;
        }

    /* MENUS */
        #menu-busqueda .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -0.25rem;
        }
        #menu-busqueda .dropdown-submenu:hover>.dropdown-menu,
        #menu-busqueda .nav-item.dropdown:hover>.dropdown-menu {
        display: block;
        position: absolute;
        }
        /* Asegura stacking por encima de la barra */
        .navbar .dropdown-menu { 
        z-index: 1060; }
        #nav-busqueda > ul > li > a.active,
        #nav-izquierda > li > a.active {
        color: rgb(var(--bs-primary-rgb));
        }
        #nav-busqueda ul.dropdown-menu ul.dropdown-menu,
        #nav-busqueda ul.dropdown-menu ul.dropdown-menu,
        #nav-izquierda ul.dropdown-menu ul.dropdown-menu,
        #nav-izquierda ul.dropdown-menu ul.dropdown-menu{
        margin-left: -6px;
        }
        /* Deja que los dropdowns “salgan” del contenedor */
        #topnav-menu-busqueda .navbar-nav,
        #nav-busqueda,
        #nav-izquierda {
        overflow: visible !important;
        max-width: calc(100% - 80px);
        }
        /* #topnav-menu-busqueda { overflow: hidden; } */
        /* Solo cuando está completamente expandido, permite que los dropdowns se vean fuera */
        /* #topnav-menu-busqueda.collapse.show { overflow: visible; } */
        /* Durante la transición (abrir/cerrar) fuerza el ocultamiento */
        #topnav-menu-busqueda.collapsing { overflow: hidden !important; }
        /* Mantén la línea en una sola fila, pero sin recortar menús */
        #topnav-menu-busqueda { min-width: 0; }
        /* #topnav-menu-busqueda .navbar-nav { flex-wrap: nowrap; } */
        /* Asegura stacking por encima de la barra */
        .navbar .dropdown-menu {
        z-index: 1060; /* ya lo tienes, lo reafirmamos */
        }
        /* En el grupo derecho, abre hacia la izquierda para no “salirte” del viewport */
        #nav-izquierda .dropdown-menu {
        left: auto !important;
        right: 0 !important;   /* ancla el borde derecho del menú al trigger */
        transform: none !important;
        }
        /* Submenús del grupo derecho: que se desplieguen hacia la izquierda */
        #menu-busqueda .dropdown-submenu {
        position: relative;
        }
        #nav-izquierda .dropdown-submenu > .dropdown-menu {
        top: 0;
        right: 100% !important;  /* abre hacia la izquierda */
        left: auto !important;
        margin-right: .15rem;
        margin-left: 0;
        }

    /* PANTALLAS CHICAS */

    /* === FIX NAV DERECHA CORTADA === */
    @media (min-width: 992px) {
        /* 1) El contenedor no debe recortar en desktop */
        #topnav-menu-busqueda {
            overflow: visible !important;
        }
    }

    /* pequeño “colchón” para que nunca toque el borde derecho del viewport */
    @media (min-width: 992px) {
        #nav-izquierda .dropdown-menu {
            max-width: calc(100vw - 16px);
        }
    }

    /* Mantén el comportamiento móvil (menús “in-flow”) */
    @media (max-width: 991px) {
        .page-content{
        margin-top: 45px  !important;
        }
        #menu-busqueda .dropdown-submenu:hover>.dropdown-menu, #menu-busqueda .nav-item.dropdown:hover>.dropdown-menu{
        position: initial !important;
        }
        #nav-busqueda ul.dropdown-menu ul.dropdown-menu {
        margin-left: 6px;
        }
        .navbar-header{
            padding: 0px !important;
        }
    }
    
    @media (max-width: 768px) {
        #cantidad_notificaciones{
        margin-right: 0px;
        }
        #cantidad_item_carro{
        margin-right: 66px;
        }
    }

/* LOADER */
    #loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .loader-content {
    text-align: center;
    }

/* CARDS */
    .card-header {
    padding: 0.8rem !important;
    border-top-right-radius: 16px !important;
    border-top-left-radius: 16px !important;
    font-weight: bold;
    }
    .card-footer {
    padding: 1rem !important;
    border-bottom-right-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
    }
    .card {
    border-radius: 16px !important;
    }

/* BOTON E INPUT DE CANTIDAD CUSTOM */
    /* Botones numéricos + */
    .btn-num-plus {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 33px;
    }
    /* Botones numéricos - */
    .btn-num-minus {
    width: 33px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    height: 33px;
    }
    /* input numéricos - */
    .btn-input-num {
    padding-right: .75rem !important;
    background-image: none !important;
    height: 33px;
    }
    .btn-input-num::-webkit-inner-spin-button,
    .btn-input-num::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }
    .btn-input-num {
    -moz-appearance: textfield;
    }

/* TABLAS CUSTOM */
    .buttons-html5.btn-outline-secondary{
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
    background-color: var(--bs-active-color);
    }
    .btn-pagination{
    width: 36px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current.btn-pagination,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current.btn-pagination:hover {
    color: white !important;
    }
    .table-historial-pagos tbody td,
    .table-custom tbody td{
    border:none;
    border-top: 1px solid var(--bs-border-color);
    }
    .table-historial-pagos table,
    .table-custom table{
    border-radius:0;
    border: none;
    box-shadow:none
    }
    .table-historial-pagos thead th,
    .table-custom thead th{
    border:none !important;
    border-left: 1px solid var(--bs-border-color) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    }
    .table-historial-pagos table.table-bordered.dataTable thead tr:first-child th,
    .table-custom table.table-bordered.dataTable thead tr:first-child th{
        background-color:white !important;
    }
    .table-historial-pagos thead th:nth-child(1),
    .table-custom thead th:nth-child(1){
    border-left: none !important;
    }
    .table-historial-pagos .dataTables_wrapper.no-footer .dataTables_scrollBody,
    .table-custom .dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none!important;
    }
    .table-historial-pagos .table-responsive,
    .table-custom .table-responsive{
    border: 2px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 0 10px 10px 10px;
    }
    .table-historial-pagos .sorting:after,
    .table-historial-pagos .sorting:before,
    .table-custom .sorting:after,
    .table-custom .sorting:before{
    content:"" !important;
    }

/* PAGINA INICIO */
    /* Contenedor fijo a la izquierda, por encima del contenido */
        #filtro-slide-container {
        position: fixed;
        top: 180px;
        left: -300px;
        max-width: 300px;
        width: 340px;
        height: calc(100% - 110px);
        z-index: 1050;
        padding: 0px;
        transition: left 0.5s ease-in-out 0.1s;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        border-radius: 16px;
        border-bottom-left-radius: 0px !important;
        border-top-left-radius: 0px !important;
        }
        @media (max-width: 768px) {
            #filtro-slide-container {
                top: 128px !important;
            }
        }
        /* Estado abierto */
        #filtro-slide-container.open{
        transition: left 1s;
        left:0px !important;
        }
        /* Panel que se desliza */
        #filtro-slide-container .slide-panel {
        width: 100%;
        max-width: 90vw;
        background: #fff;
        border-right: 1px solid #e5e5e5;
        height: 100%;
        overflow: auto;
        }
        /* Pestaña flotante (el cuadrito con >) */
        #filtro-slide-container .slide-tab {
        position: absolute;
        top: 29px;
        transform: translateY(-50%);
        height: 60px;
        border-left: none;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0;
        left: 287px;
        width: 50px;
        padding-left:10px;
        z-index:1000 !important;
        top: 50px;
        border: 1px solid #CFCFCF !important;
        }
        /* Opcional: cambia el caret según estado con :after */
        #filtro-slide-container .slide-tab::after {
        content: '>>';
        font-weight: 700;
        }
        #filtro-slide-container.open .slide-tab::after {
        content: '<<';
        }
        #filtro-slide-container .card {
        border-bottom-left-radius: 0 !important;
        border-top-left-radius: 0 !important;
        }
        #filtro_busqueda{
        z-index: 1001;
        position: sticky;
        }
        .list-group-item.selectable {
            cursor: pointer;
        }
       
    /* PRICE SLIDER  */ 
        #priceslider {
        height: 8px;
        background: #f1f1f1;
        border-radius: 5px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .noUi-handle {
        width: 12px;
        height: 12px;
        background: white;
        border: 2px solid #ccc;
        border-radius: 50%;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        }
        .noUi-horizontal .noUi-handle {
        width: 16px !important;
        height: 16px !important;
        right: -10px !important;
        }
        #priceslider .noUi-connect {
        background-color: #0d6efd
        }

    /* CARDS PRODUCTOS  */
        .product-name {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Máximo de 2 líneas */
        -webkit-box-orient: vertical;
        overflow: hidden;
        }
        .card.producto_item_body{
        min-height: 470px;
        }
        #lista-productos{
            margin: auto;
        }

    /* CARRUSEL */
    .carousel-control-icon {
    font-size: 60px;
    }
    .carousel-control-prev .carousel-control-icon {
    margin-left: -20px;
    }
    .carousel-control-next .carousel-control-icon {
    margin-right: -20px;
    }

/* PAGINA DETALLE PRODUCTO */
    .main-product-img {
    object-fit: contain;
    }
    .thumb-img {
    width: 85px;
    height: 85px;
    object-fit: cover;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    }
    .thumb-img:hover {
    border-color: #007bff;
    transform: scale(1.05);
    }
    .nav-link.active .thumb-img {
    border-color: #007bff;
    }
    .zoom-container {
    display: inline-block;
    position: relative;
    }
    .thumb-carousel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    gap: 8px;
    padding: 5px 0;
    }
    .thumb-carousel::-webkit-scrollbar {
    height: 6px;
    }
    .thumb-carousel::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
    }
    .thumb-carousel::-webkit-scrollbar-thumb:hover {
    background: #999;
    }
    .thumb-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
    }
    .thumb-img:hover {
    border-color: #007bff;
    transform: scale(1.05);
    }
    .nav-link.active .thumb-img {
    border-color: #007bff;
    }

/* PAGINA INTEGRACIONES */
    .json-viewer {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    }
    .json-k    { color: #6b6b6b; }         /* key */
    .json-str  { color: #2aa198; }         /* string */
    .json-num  { color: #268bd2; }         /* number */
    .json-bool { color: #cb4b16; }         /* boolean */
    .json-null { color: #859900; }         /* null */
    .json-type { color: #999; font-style: italic; margin-left: .25rem; }
    .json-branch { margin-left: 1rem; border-left: 1px dashed #e5e5e5; padding-left: .75rem; }
    .json-leaf   { margin-left: 1rem; }
    .json-summary {
    cursor: pointer;
    list-style: none;
    }
    details > summary::-webkit-details-marker { display: none; }
    .caret { display:inline-block; width:.8em; text-align:center; }
    details[open] > summary .caret::before { content: "▾"; }
    details:not([open]) > summary .caret::before { content: "▸"; }
    /* Botonera opcional */
    .json-toolbar { display:flex; gap:.5rem; margin-bottom:.5rem; }
    .json-toolbar button { border-radius:6px; padding:.25rem .5rem; cursor:pointer; border: none;}

/* PAGINA REPORTES*/
    .btn-barra.btn-outline-secondary,
    .btn-barra.btn-outline-secondary:focus,
    .btn-barra.btn-outline-secondary:active,
    .btn-barra.btn-outline-secondary:focus{
    background-color: transparent !important;
    border-color: rgba(var(--bs-secondary-rgb), 1);
    color: rgba(var(--bs-secondary-rgb), 1);
    }
    .btn-barra.active,
    .btn-barra.btn-outline-secondary:hover{
    border-color: rgba(var(--bs-primary-rgb), 1) !important;
    color: rgba(var(--bs-primary-rgb), 1) !important;
    }
    #chartProductos,
    #chartUsuarios,
    #chartMisProductos {
    position: relative;
    height: 240px;
    width: 100% !important;
    }
    #chartProductos canvas,
    #chartUsuarios canvas,
    #chartMisProductos canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    }

/*PAGINA PAGO EXITO*/
    /* estados de estrella */
    .mdi.mdi-star, .mdi.mdi-star-outline, .mdi.mdi-star-half-full { transition: transform .05s ease-in; }
    .rating-stars .mdi:hover { transform: scale(1.08); }

/*INICIO*/
    #listaPrecio_top{
    min-width: 200px;
    }
    #btn-cargar-mas .label-icon{
    background-color: transparent !important;
    }
    #icon-hamburguesa .navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    filter: invert(0.4);
    }

    .input-group{
    flex-wrap: nowrap;
    }

    @media (min-width: 992px) {

        /* El wrapper queda inline dentro de la barra */
        .menu-jerarquico-desktop{
        position: relative;  /* referencia para el flyout */
        min-width: 0;
        }

        /* Barra nivel 1 (inline) */
        .menu-jerarquico-desktop .menu-topbar{
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        align-items: center;
        white-space: normal;
        overflow-x: visible;
        padding: 6px 4px;
        position: relative;
        z-index: 1;
        overflow-x: auto;        /* sigue scrolleando */
        overflow-y: hidden;
        scrollbar-width: none;   /* Firefox: oculta scrollbar */
        -ms-overflow-style: none;/* IE/Edge viejo */
        margin: 0 40px;
        }
        .menu-jerarquico-desktop .menu-topbar::-webkit-scrollbar{
        display: none;           /* Chrome/Safari */
        }

        .menu-jerarquico-desktop .top-item{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 10px;
        min-width: fit-content;
        }

        .menu-jerarquico-desktop .top-item:hover{
        background-color: rgba(var(--bs-dark-rgb), 0.05) !important;
        }
        .menu-jerarquico-desktop .top-item.active{
        background-color: rgba(var(--bs-primary-rgb), 0.10);
        }

        .menu-jerarquico-desktop .top-text{
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        }

        .menu-jerarquico-desktop .top-arrow{
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        }

        /* PANEL FLOTANTE: NO ocupa espacio en la barra */
        .menu-jerarquico-desktop .menu-flyout{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3000;
        display: none; /* cerrado */
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        padding: 10px;
        max-width: min(1100px, calc(100vw - 24px));
        }

        .menu-jerarquico-desktop .menu-flyout.open{
        display: block;
        }

        /* columnas horizontales dentro del flyout */
        .menu-jerarquico-desktop .menu-columns{
        display: flex;
        gap: 10px;
        align-items: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        scroll-behavior: smooth;
        }

        .menu-jerarquico-desktop .menu-col{
        width: fit-content;
        min-width: fit-content;
        flex: 0 0 fit-content;
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        background: #fff;
        }

        .menu-jerarquico-desktop .menu-col-list{
        padding: 6px;
        }

        .menu-jerarquico-desktop .menu-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 8px;
        }

        .menu-jerarquico-desktop .menu-row:hover{
        background-color: rgba(var(--bs-dark-rgb), 0.05) !important;
        }

        .menu-jerarquico-desktop .menu-row.active{
        background-color: rgba(var(--bs-primary-rgb), 0.10);
        }

        .menu-jerarquico-desktop .menu-row .menu-text{
        flex: 1;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        line-height: 1.2;
        }

        .menu-jerarquico-desktop .menu-row .menu-arrow{
        flex: 0 0 auto;
        cursor: pointer;
        padding-left: 6px;
        }

        /* contenedor que permite superponer los "…" */
        .menu-jerarquico-desktop .menu-topbar-wrap{
            position: relative;
            display: block;
        }

        /* "…" laterales (tapitas) */
        .menu-jerarquico-desktop .topbar-fade{
            position: absolute;
            top: 0;
            bottom: 0;
            width: 44px;
            z-index: 5;
            border: 0;
            padding: 0;
            cursor: default;
            font-weight: 700;
            font-size: 18px;
            line-height: 1;
            display: none;           /* se activa con JS */
            align-items: center;
            justify-content: center;
            pointer-events: none;    /* no bloquea hover/click de items */
            color: rgba(var(--bs-body-color-rgb, 25,25,26), 0.7);
        }

        .menu-jerarquico-desktop .topbar-left{
            left: 0;
            background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
        }

        .menu-jerarquico-desktop .topbar-right{
            right: 0;
            background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
        }

        /* si estás en dark mode, ajusta el fondo del degradado */
        :root[data-bs-theme="dark"] .menu-jerarquico-desktop .topbar-left{
            background: linear-gradient(to right, var(--bs-secondary-bg), rgba(0,0,0,0));
        }
        :root[data-bs-theme="dark"] .menu-jerarquico-desktop .topbar-right{
            background: linear-gradient(to left, var(--bs-secondary-bg), rgba(0,0,0,0));
        }

        /* clases que el JS va a poner/quitar */
        .menu-jerarquico-desktop .menu-topbar-wrap.has-left  .topbar-left{ display: flex; }
        .menu-jerarquico-desktop .menu-topbar-wrap.has-right .topbar-right{ display: flex; }
    
        .menu-jerarquico-desktop .topbar-fade{
        pointer-events: auto;
        cursor: pointer;
        }
    }

    @media (max-width: 991px) {
        #listaPrecio_top{
        min-width: 100px;
        }
        
        #topnav-menu-busqueda .dropdown-menu{
        display: none !important;
        }
        #topnav-menu-busqueda .dropdown-menu.open {
        display: block !important;
        }
        
        #nav-busqueda > ul > li > ul,
        #nav-izquierda > li > ul  {
        position: initial !important;
        }
        /* El panel completo scrollea */
        #topnav-menu-busqueda {
        height: calc(100vh - 129px); /* 49 + 80 */
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        }
        /* Los dropdowns viven dentro del flujo */
        #menu-busqueda .dropdown-menu {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        float: none;
        box-shadow: none;
        border: 0;
        }
        /* Permite crecimiento vertical */
        #topnav-menu-busqueda .navbar-nav {
        flex-direction: column;
        flex-wrap: wrap !important;
        }
        #topnav-menu-busqueda .arrow-down{
        font-size:18px !important;
        margin-left: 5px !important;
        border: 1px solid #CCC;
        border-radius: 100%;
        text-align: center;
        padding: 0px 0px;
        height: 30px;
        width: 30px;
        }
        #topnav-menu-busqueda .arrow-down:after{
        margin: 0px;
        }
    }


/* MODO CLARO */
    :root[data-bs-theme="light"] {
    --bs-primary-rgb: 49, 62, 219;
    --bs-danger-rgb: 252, 86, 86;
    --bs-body-color: rgb(25, 25, 26);
    }
    :root[data-bs-theme="light"] .btn-soft-primary:active,
    :root[data-bs-theme="light"] .btn-soft-primary:focus,
    :root[data-bs-theme="light"] .btn-soft-primary:hover,
    :root[data-bs-theme="light"] .btn-soft-primary,
    :root[data-bs-theme="light"] .bg-soft-primary,
    :root[data-bs-theme="light"] .table-soft-primary th {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    color: rgba(var(--bs-primary-rgb), 1) !important;
    }
    :root[data-bs-theme="light"] .btn-soft-warning:active,
    :root[data-bs-theme="light"] .btn-soft-warning:focus,
    :root[data-bs-theme="light"] .btn-soft-warning:hover,
    :root[data-bs-theme="light"] .btn-soft-warning,
    :root[data-bs-theme="light"] .bg-soft-warning,
    :root[data-bs-theme="light"] .table-soft-warning th {
    background-color: rgba(var(--bs-warning-rgb), 0.35) !important;
    color: #d9a229  !important;
    }
    :root[data-bs-theme="light"] .btn-soft-danger:active,
    :root[data-bs-theme="light"] .btn-soft-danger:focus,
    :root[data-bs-theme="light"] .btn-soft-danger:hover,
    :root[data-bs-theme="light"] .btn-soft-danger {
    background-color: rgba(var(--bs-danger-rgb), 0.15) !important;
    color: rgba(var(--bs-danger-rgb), 1) !important;
    }
    :root[data-bs-theme="light"]  body{
    background-color: rgb(255,255,255) !important;
    }
    :root[data-bs-theme="light"]  footer{
    background-color: var(--bs-body-color) !important;
    }
    :root[data-bs-theme="light"]  #page-topbar{
    background-color: #F3F6FC !important;
    }
    :root[data-bs-theme="light"] .card-header,
    :root[data-bs-theme="light"] .bg-light-primary {
    background-color: #F3F6FC !important;
    }
    :root[data-bs-theme="light"] .card {
    border: 1px solid #CFCFCF !important;
    box-shadow: 0px 5px 25px -5px #0C0B0D0A !important;
    }

/* MODO OSCURO */
    :root[data-bs-theme="dark"] #filtro-slide-container .slide-tab {
    background-color: var(--bs-secondary-bg) !important;
    border: 1px solid #eaebe4 !important;
    }
    :root[data-bs-theme="dark"] #filtro-slide-container .card{
    background-color: var(--bs-secondary-bg) !important;
    border: 1px solid #eaebe4 !important;
    border-left: none !important;
    }
    :root[data-bs-theme="dark"] #menu-busqueda,
    :root[data-bs-theme="dark"] #divBuscarProducto,
    :root[data-bs-theme="dark"] .submenu{
    background-color: var(--bs-secondary-bg) !important;
    border:none !important;
    }
    :root[data-bs-theme="dark"] .table-historial-pagos table.table-bordered.dataTable thead tr:first-child th, 
    :root[data-bs-theme="dark"] .table-custom table.table-bordered.dataTable thead tr:first-child th{
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary-text) !important;
    }
    :root[data-bs-theme="dark"] .bg-white{
    background-color: var(--bs-secondary-bg) !important;
    }
    :root[data-bs-theme="dark"] .swal2-toast{
    background-color: var(--bs-secondary-bg) !important;
    border: 1px solid #eaebe4 !important;
    }



/* COLORES GENERAL */
    #bar-1{
    background-color: #020202 !important;
    }
    #bar-1 select{
    background-color: #020202 !important;
    color: white !important;
    border-color: #c2c0c0 !important;
    }
    #bar-1 .dropdown-menu,
    #bar-2 .dropdown-menu,
    #nav-izquierda .dropdown-menu{
    border: 1px solid #c2c0c0 !important;
    box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.05) !important;
    }
    #bar-1 .dropdown-divider,
    #bar-2 .dropdown-divider{
    border-top: 1px solid #c2c0c0 !important;
    }
    #bar-1 .dropdown-menu .menu-item,
    #bar-2 .dropdown-menu .menu-item{
    color: #020202 !important;
    }
    #bar-1 .dropdown-menu .menu-item:hover,
    #bar-2 .dropdown-menu .menu-item:hover,
    #menuJerarquicoFlyout.open .menu-row:hover{
    background-color: #efefef !important;
    }
    #bar-2 .dropdown-menu .menu-item:hover .dropdown-menu{
    margin-left: 5px;
    top: 10px;
    }
    #bar-1 .dropdown-menu{
    border-start-start-radius: 0px !important;
    border-start-end-radius: 0px !important;
    border-top: 0px !important;
    margin-top: -11px !important;
    }
    #bar-2 .dropdown-menu{
    margin-top: -11px !important;
    }
    #bar-1 .dropdown-menu a:hover,
    #bar-2 .dropdown-menu a:hover,
    #menuJerarquicoFlyout .dropdown-menu a:hover,
    #nav-izquierda  .dropdown-menu a:hover,
    #menuJerarquicoFlyout.open .menu-row.active,
    #menuJerarquicoTopbar .top-item.active{
    background-color: #efefef !important;
    }
    #menuJerarquicoFlyout{
    scrollbar-width: thin;
    scrollbar-color: #c2c0c0 white; /* Thumb color: red, Track color: green */
    }
    #bar-2{
    background-color: white !important;
    }
    #bar-2 .header-item span, 
    #bar-2 .header-item i {
    color: #020202 !important;
    }
    #bar-2 .header-item #cantidad_item_carro span {
    color: white !important;
    font-weight: bolder;
    }
    #cantidad_notificaciones{
    background-color: #d7931d !important;
    right: 0px !important;
    }
    #cantidad_item_carro{
    border: none !important;
    background-color: #d7931d !important;
    }
    #divBuscarProducto{
    border: 1px solid #c2c0c0 !important;
    background-color: white !important;
    }
    #buscarProducto_icon{
    color: white !important;
    background-color: #c2c0c0 !important;
    border: none !important;
    }
    ::placeholder {
    color: #c2c0c0 !important;
    }
    #tabla_busqueda{
    background-color: white !important;
    border: 1px solid #c2c0c0 !important;
    border-top: 0px !important;
    border-end-start-radius: 18px;
    border-end-end-radius: 18px;
    box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.05) !important;
    }
    #topnav-menu-busqueda{
    background-color: white !important;
    color: #020202 !important;
    text-transform:uppercase
    }
    .form-check-input:checked{
    background-color: #020202 !important;
    border-color: #020202 !important;
    }
    #topnav-dashboard{
    background-color: white !important;
    color: #020202 !important;
    }
    #topnav-dashboard:hover,
    #menuJerarquicoTopbar .top-item:hover{
    background-color: #efefef !important;
    }
    .menu-jerarquico-desktop .topbar-left,
    .menu-jerarquico-desktop .topbar-right{
    color: #c2c0c0 !important;
    }
    .arrow-down{
    color: #020202 !important;
    }
    #nav-izquierda span{
    color: #020202 !important;
    }
    body{
    padding-right: 0px !important;
    }
    .footer{
    background-color: #020202 !important;
    }

    .swal2-cancel{
    background-color: white !important;
    border: #c2c0c0 1px solid !important;
    color: #020202 !important;
    }
    .swal2-cancel:hover,
    .swal2-cancel:focus,
    .swal2-cancel:acrive{
    background-color: #efefef !important;
    color: #020202 !important;
    }
    .swal2-confirm{
    background-color: #020202 !important;
    border: #020202 1px solid !important;
    color: white !important;
    }
    .swal2-confirm:hover,
    .swal2-confirm:focus,
    .swal2-confirm:active{
    background-color: #020202cd !important;
    color: white !important;
    }

    .accordion .accordion-item > .bg-light-primary{
    border: none !important;
    background-color: #020202 !important;
    }
    .accordion .accordion-item > .bg-light-primary .accordion-button{
    background-color: transparent !important;
    }
    .accordion .accordion-item > .bg-light-primary .accordion-button,
    .card-header{
    color: white !important;
    }    

    #div_medio_pago .btn-group label{
    color: #020202 !important;
    border: none !important;
    }

    :root[data-bs-theme="light"] .card .btn-soft-primary,
    :root[data-bs-theme="light"] .div_canitdad_compra .btn-soft-primary,
    :root[data-bs-theme="light"] #btn_comprar_ahora_detalle,
    :root[data-bs-theme="light"] #div_medio_pago .btn-group{
    background-color: white !important;
    border: #c2c0c0 1px solid !important;
    color: #020202 !important;
    }
    :root[data-bs-theme="light"] .card .btn-soft-primary:hover,
    :root[data-bs-theme="light"] .card .btn-soft-primary:active,
    :root[data-bs-theme="light"] .card .btn-soft-primary:focus,
    :root[data-bs-theme="light"] .div_canitdad_compra .btn-soft-primary:hover,
    :root[data-bs-theme="light"] .div_canitdad_compra .btn-soft-primary:active,
    :root[data-bs-theme="light"] .div_canitdad_compra .btn-soft-primary:focus,
    :root[data-bs-theme="light"] #btn_comprar_ahora_detalle:hover,
    :root[data-bs-theme="light"] #btn_comprar_ahora_detalle:active,
    :root[data-bs-theme="light"] #btn_comprar_ahora_detalle:focus,
    :root[data-bs-theme="light"] #div_medio_pago .btn-group:hover,
    :root[data-bs-theme="light"] #div_medio_pago .btn-group:active,
    :root[data-bs-theme="light"] #div_medio_pago .btn-group:focus{
    background-color: #efefef !important;
    color: #020202 !important;
    }
    :root[data-bs-theme="light"] .btn-primary,
    :root[data-bs-theme="light"] .card .btn-primary,
    :root[data-bs-theme="light"] .div_canitdad_compra .btn-primary,
    :root[data-bs-theme="light"] #btn_add_carro_detalle,
    :root[data-bs-theme="light"] #btnPagar{
    background-color: #020202 !important;
    border: #020202 1px solid !important;
    color: white !important;
    }
    :root[data-bs-theme="light"] .btn-primary:hover,
    :root[data-bs-theme="light"] .btn-primary:active,
    :root[data-bs-theme="light"] .btn-primary:focus,
    :root[data-bs-theme="light"] .card .btn-primary:hover,
    :root[data-bs-theme="light"] .card .btn-primary:active,
    :root[data-bs-theme="light"] .card .btn-primary:focus,
    :root[data-bs-theme="light"] .div_canitdad_compra .btn-primary:hover,
    :root[data-bs-theme="light"] .div_canitdad_compra .btn-primary:active,
    :root[data-bs-theme="light"] .div_canitdad_compra .btn-primary:focus,
    :root[data-bs-theme="light"] #btn_add_carro_detalle:hover,
    :root[data-bs-theme="light"] #btn_add_carro_detalle:active,
    :root[data-bs-theme="light"] #btn_add_carro_detalle:focus,
    :root[data-bs-theme="light"] #btnPagar:hover,
    :root[data-bs-theme="light"] #btnPagar:active,
    :root[data-bs-theme="light"] #btnPagar:focus{
    background-color: #020202cd !important;
    color: white !important;
    }
    :root[data-bs-theme="light"] .text-primary{
    color: #d7931d !important;
    }

    :root[data-bs-theme="light"] #caja_comentarios a{
    color: #d7931d !important;
    }
    :root[data-bs-theme="light"] #div-comentarios .btn-success{
    background-color: #020202 !important;
    border: #020202 1px solid !important;
    color: white !important;
    }
    :root[data-bs-theme="light"] #div-comentarios .btn-success:hover,
    :root[data-bs-theme="light"] #div-comentarios .btn-success:active,
    :root[data-bs-theme="light"] #div-comentarios .btn-success:focus{
    background-color: #020202cd !important;
    color: white !important;
    }
    
    :root[data-bs-theme="light"] .card-header{
    background-color: #020202 !important;
    text-transform: uppercase;
    }
    :root[data-bs-theme="light"] .card-header .text-primary{
    color: #020202 !important;
    }

    :root[data-bs-theme="light"] #modalDetalleCompra .bg-primary{
    background-color: #020202 !important;
    }
    :root[data-bs-theme="light"] #divDetalle .table-soft-primary th{
    background-color: #020202 !important;
    color: white !important;
    }

    :root[data-bs-theme="light"] .btn-outline-primary{
    border: #020202 1px solid !important;
    color:#020202 !important;
    }
    :root[data-bs-theme="light"] .btn-outline-primary:hover,
    :root[data-bs-theme="light"] .btn-outline-primary:active,
    :root[data-bs-theme="light"] .btn-outline-primary:focus{
    background-color: #020202 !important;
    border: #020202 1px solid !important;
    color: white !important;
    }

/* COLORES MODO OSCURO */
    :root[data-bs-theme="dark"] #divBuscarProducto{
    background-color: white !important;
    border: 1px solid #c2c0c0 !important;
    }
    :root[data-bs-theme="dark"] #divBuscarProducto input{
    background-color: white !important;
    color: #020202 !important;
    }
    :root[data-bs-theme="dark"] #tabla_busqueda{
    background-color: white !important;
    border: 1px solid #c2c0c0 !important;
    border-top: 0px !important;
    color: #020202 !important;
    }
    :root[data-bs-theme="dark"] .menu-jerarquico-desktop .topbar-left,
    :root[data-bs-theme="dark"] .menu-jerarquico-desktop .topbar-right {
    background: none;
    }
    :root[data-bs-theme="dark"] #bar-1 .dropdown-menu,
    :root[data-bs-theme="dark"] #bar-2 .dropdown-menu,
    :root[data-bs-theme="dark"] #nav-izquierda .dropdown-menu{
    background: white !important;
    }
    :root[data-bs-theme="dark"] #bar-1 .dropdown-menu a,
    :root[data-bs-theme="dark"] #bar-2 .dropdown-menu a,
    :root[data-bs-theme="dark"] #nav-izquierda .dropdown-menu a{
    color: #020202 !important;
    }
    :root[data-bs-theme="dark"] .footer{
    background-color: #020202 !important;
    }
    :root[data-bs-theme="dark"] .card .btn-soft-primary,
    :root[data-bs-theme="dark"] .div_canitdad_compra .btn-soft-primary,
    :root[data-bs-theme="dark"] #btn_comprar_ahora_detalle,
    :root[data-bs-theme="dark"] #div_medio_pago .btn-group{
    background-color: white !important;
    border: #c2c0c0 1px solid !important;
    color: #020202 !important;
    }
    :root[data-bs-theme="dark"] .card .btn-soft-primary:hover,
    :root[data-bs-theme="dark"] .card .btn-soft-primary:active,
    :root[data-bs-theme="dark"] .card .btn-soft-primary:focus,
    :root[data-bs-theme="dark"] .div_canitdad_compra .btn-soft-primary:hover,
    :root[data-bs-theme="dark"] .div_canitdad_compra .btn-soft-primary:active,
    :root[data-bs-theme="dark"] .div_canitdad_compra .btn-soft-primary:focus,
    :root[data-bs-theme="dark"] #btn_comprar_ahora_detalle:hover,
    :root[data-bs-theme="dark"] #btn_comprar_ahora_detalle:active,
    :root[data-bs-theme="dark"] #btn_comprar_ahora_detalle:focus,
    :root[data-bs-theme="dark"] #div_medio_pago .btn-group:hover,
    :root[data-bs-theme="dark"] #div_medio_pago .btn-group:active,
    :root[data-bs-theme="dark"] #div_medio_pago .btn-group:focus{
    background-color: #efefef !important;
    color: #020202 !important;
    }
    :root[data-bs-theme="dark"] .btn-primary,
    :root[data-bs-theme="dark"] .card .btn-primary,
    :root[data-bs-theme="dark"] .div_canitdad_compra .btn-primary,
    :root[data-bs-theme="dark"] #btn_add_carro_detalle,
    :root[data-bs-theme="dark"] #btnPagar{
    background-color: #020202 !important;
    border: #020202 1px solid !important;
    color: white !important;
    }

    :root[data-bs-theme="dark"] .btn-outline-primary{
    border: #020202 1px solid !important;
    color:#020202 !important;
    }
    :root[data-bs-theme="dark"] .btn-outline-primary:hover,
    :root[data-bs-theme="dark"] .btn-outline-primary:active,
    :root[data-bs-theme="dark"] .btn-outline-primary:focus{
    background-color: #020202 !important;
    border: #020202 1px solid !important;
    color: white !important;
    }

    :root[data-bs-theme="dark"] .btn-primary:hover,
    :root[data-bs-theme="dark"] .btn-primary:active,
    :root[data-bs-theme="dark"] .btn-primary:focus,
    :root[data-bs-theme="dark"] .card .btn-primary:hover,
    :root[data-bs-theme="dark"] .card .btn-primary:active,
    :root[data-bs-theme="dark"] .card .btn-primary:focus,
    :root[data-bs-theme="dark"] .div_canitdad_compra .btn-primary:hover,
    :root[data-bs-theme="dark"] .div_canitdad_compra .btn-primary:active,
    :root[data-bs-theme="dark"] .div_canitdad_compra .btn-primary:focus,
    :root[data-bs-theme="dark"] #btn_add_carro_detalle:hover,
    :root[data-bs-theme="dark"] #btn_add_carro_detalle:active,
    :root[data-bs-theme="dark"] #btn_add_carro_detalle:focus,
    :root[data-bs-theme="dark"] #btnPagar:hover,
    :root[data-bs-theme="dark"] #btnPagar:active,
    :root[data-bs-theme="dark"] #btnPagar:focus{
    background-color: #020202cd !important;
    color: white !important;
    }
    :root[data-bs-theme="dark"] .text-primary{
    color: #d7931d !important;
    }
    :root[data-bs-theme="dark"] #caja_comentarios a{
    color: #d7931d !important;
    }
    :root[data-bs-theme="dark"] #div-comentarios .btn-success{
    background-color: #020202 !important;
    border: #020202 1px solid !important;
    color: white !important;
    }
    :root[data-bs-theme="dark"] #div-comentarios .btn-success:hover,
    :root[data-bs-theme="dark"] #div-comentarios .btn-success:active,
    :root[data-bs-theme="dark"] #div-comentarios .btn-success:focus{
    background-color: #020202cd !important;
    color: white !important;
    }
    :root[data-bs-theme="dark"] #modalDetalleCompra .bg-primary{
    background-color: #020202 !important;
    }
    :root[data-bs-theme="dark"] #divDetalle .table-soft-primary th{
    background-color: #020202 !important;
    color: white !important;
    }