/* GENERAL */

    .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 > li > ul,
        #nav-izquierda > li > ul  {
        position:fixed !important;
        }
        #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;
        }
        #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; }
        /* No fuerces los dropdowns a fixed: deja absolute (comportamiento Bootstrap) */
        #nav-busqueda > ul > li > ul,
        #nav-izquierda > li > ul {
        position: absolute !important; /* antes lo tenías en fixed */
        }
        /* 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) {
        #nav-busqueda > ul > li > ul,
        #nav-izquierda > li > ul  {
            position: initial !important;
        }
    }

    @media (max-width: 991px) {
        .page-content{
        margin-top: 45px  !important;
        }
        #nav-busqueda > ul > li > ul,
        #nav-izquierda > li > ul  {
        position: initial !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{
        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); }

/* 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-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;
    }