.navbar-custom, .logo-box {
    background: radial-gradient(ellipse at 15% 25%, rgba(77, 159, 219, .15) 0%, transparent 55%), 
                radial-gradient(ellipse at 85% 80%, rgba(114, 199, 65, .10) 0%, transparent 55%), 
                linear-gradient(160deg, #0e1520 0%, #0b0f14 60%, #0c1318 100%);
    box-shadow: 0 2px 15px rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar-custom {
    padding: 0 20px 0 0;
}

/* --- Mejoras de Contraste y Estética Premium --- */

/* Botones con efecto de cristal (Glassmorphism) */
.btn-glass {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e5e5e5 !important;
    transition: all 0.3s ease !important;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(111, 189, 248, 0.2);
    transform: translateY(-1px);
}

.btn-glass.active {
    background: rgba(111, 189, 248, 0.25) !important;
    border-color: #6fbdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(111, 189, 248, 0.4);
}

/* Brillos sutiles para los iconos principales */
.navbar-custom i.fas, 
.navbar-custom i.far, 
.navbar-custom i.fa-solid,
.navbar-custom i.bi {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* Icono de campana (Notificaciones) con brillo azulado */
#notificacion, .mdi-bell-ring, .mdi-bell {
    color: #6fbdf8 !important;
    text-shadow: 0 0 12px rgba(111, 189, 248, 0.5) !important;
}

/* Icono de Órdenes con brillo dorado */
#orden-pendiente, .mdi-file-document-outline {
    color: #ffbb00 !important;
    text-shadow: 0 0 12px rgba(255, 187, 0, 0.4) !important;
}

/* Icono de Bloqueo/Cierre sesión con brillo rojizo */
.fa-lock, .mdi-lock-outline {
    color: #ff7676 !important;
    text-shadow: 0 0 12px rgba(255, 118, 118, 0.4) !important;
}

/* Texto de Sucursal y Usuario */
.sucursal-text, .user-name-text, .pro-user-name {
    color: #ffffff !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.date-time-text {
    color: rgba(255,255,255,0.7) !important;
}

/* Ajuste específico para badges de notificación */
.noti-icon-badge {
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
}

/* --- Fin de mejoras --- */

.input-group-append .btn {
    padding: 0 15px;
}

html,body {
    background-color: #E5E5E5;
}

.wrapper {
    padding: 10px 12px 0 12px;
    background-color: #E5E5E5;
}

.page-title-box {
    background-color: transparent;
    margin: 0px -0 30px;
    padding: 0;
    -webkit-box-shadow: 0 1px 1px rgb(50 58 70 / 10%);
    box-shadow: 0 2px 0px rgb(50 58 70 / 10%);
}

.titles {
    color:#242A61;
    font-size: 28px;
    font-family: 'Oxygen', sans-serif;
}

.subtitle {
    font-size: 22px;
    color: #242A61;
    font-family: 'Oxygen', sans-serif;
}

.text,.btn {
    font-size: 16px;
    font-family: 'Rubik', sans-serif;
}

.smallText {
    font-size: 14px;
}

.oxygen {
    font-family: 'Oxygen', sans-serif;
}

.rubyk {
    font-family: 'Rubik', sans-serif;
}

.darkGray {
    color:#2E2E35;
}

.lightGray {
    color: #6B7A81;
}

.imageGray {
    color:#92A2AA;
}

.imageGray2 {
    color:#5E6067;
}

.form-control,.form-control-sm {
    border: 2px solid #CED4DA;
    border-radius: 5px;
}

.form-control-sm {
    display: block;
    width: 100%;
    height: calc(1.5em + .9rem + 2px);
    padding: .45rem .9rem;
    font-size: .9rem;
    line-height: 1.5;
}

.login {
    background-color: white;
    padding:0;
    height:100vh;
    overflow: hidden;
}

.login .titles {
    margin: 10px 0 30px 0;
}

.login .subtitle {
    margin-bottom: 12px;
}

.login .wrapper {
    padding:0;
}

.login .form-group,.login .btn-wrapper,.login .form-check {
    margin-top: 20px;
}

.login .btn-wrapper .btn-primary {
    background-color: #0B3370;
    color:white;
    border-radius: 5px;
    border: #0B3370
}

.btn-primary {
    background-color: #0B3370;
    color:white;
    border-radius: 5px;
    border: #0B3370
}

.login .info-wrapper{
    display: flex;
    padding: 0 30px;
    flex-direction: column;
    justify-content: center;
}

.login .icon-login {
    width: 210px;
    height: 60px;
}

.login .image-text {
    position:absolute;
    left:60px;
    bottom:25%;
}

div.dataTables_wrapper div.dataTables_length select {
    border: 2px solid #D5D5D5;
    margin: 0 20px;
}

div.dataTables_wrapper div.dataTables_info {
    display:none;
}

table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after {
    color: #0068F3!important;
    opacity:1;
    font-size: 9px;
    right: 1em;
}

table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:before {
    content: "\25BC";
    bottom: 25%;
}

table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc:after {
    content: "\25b2";
    top: 25%;
}

.page-link {
    color:#9B9B9B!important;
}

.page-item.active .page-link {
    color: white !important;
}

.page-item.disabled .page-link,
.page-item.page-link,.mdi-chevron-right {
    color: #0068F3!important;
}

.display-flex {
    display: flex;
}

.justi-evenly {
    justify-content: space-evenly;
}

.logo-box {
    display: inline-block;
}

#elementosNav {
    /*display: block;
    clear: inherit;
    position: relative;
    display: flex;
    justify-content: center;
    justify-content: space-evenly;*/
    display: inline-block;
    float: right;
    width: calc(100% - 350px)!important;
}

#wrapper .app-search{
    width: 100%;
    max-width: 100%;
}

#wrapper .app-search .form-control{
    border-radius: 5px 0 0 5px;
}

#wrapper .app-search .btn {
    border-radius: 0 5px 5px 0;
}

.wrapper-search {
    margin-left:10%;
    width:50%;
}

.f-right {
    float:right!important;
}

.compDocs .blueLine:after {
    position: absolute;
    content: "";
    height: 2px;
    background-color: #B0BED4;
    width: 70%;
    margin-left: 15px;
    top: 50%;
}

.compDocs .accordionsOwn h5,.compDocs i {
    display: inline-block;
}

.compDocs .accordionsOwn .card-header i {
    float: right;
    font-size: 18px;
}

.compDocs .accordionsOwn .card-header,.compDocs .accordionsOwn .card {
    border:none;
    background:transparent;
}

.compDocs .accordionsOwn .inline-block {
    display:inline-block;
}

.compDocs .accordionsOwn .notificationDay {
    text-align: center;
    background: #DE5A48;
    color: white;
    margin-left: 5px;
    border-radius: 10px;
    padding: 12px 30px;
    height: fit-content;
}

.compDocs .accordionsOwn p{
    margin:0;
    font-size:18px;
}

.compDocs .accordionsOwn h4{
    margin-bottom: 1.5rem;
}

.compDocs .accordionsOwn .notificationDay small {
    font-size: 12px;
}

.compDocs .notificationDay {
    text-align: center;
    background: #DE5A48;
    color: white;
    margin-left: 5px;
    border-radius: 10px;
    padding: 12px 30px;
    height: fit-content;
}

.cardGray {
    border:2px solid #CCCCE0;
    background: #F3F3F6;
    height:100%;
    display:flex;
}

.cardGray .card-body {
    display:flex;
    align-items:center;
    justify-content: center;
}

.cardGray .card-body p{
    margin:0;
    font-size:18px;
}

.cardGray .card-body .inline-block {
    display:inline-block;
}

.inline-block {
    display:inline-block;
}

#modComparativaDocumentos .modal-header {
    padding: 5px 1rem;
    border:none;
}

#modComparativaDocumentos .modal-body,#modComparativaDocumentos .modal-footer{
    border:none;
}

#modComparativaDocumentos p {
    margin: 0;
}

#modComparativaDocumentos .border-rig {
    border-right: 1px solid #dee2e6;
}

#modComparativaDocumentos .modal-dialog {
    max-width:80%;
}

#modComparativaDocumentos .border-bot {
    border-bottom: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
}

.centerer {
    display: flex;
    align-items: center;
}

.documentos-wrapper {
    margin:40px 0;
    border-radius: 5px;
    background-color: #E3EBF9;
    padding: 15px;
    display: flex;
}

.documentos-wrapper p,.documentos-wrapper label {
    margin-bottom:0;
    margin-left: 15px;
}

.documentos-wrapper p {
    font-size: 11px;
}

.alternative {
    background-color: #4A90E2;
    font-size: 11px;
    width: 100%;
}

.cards-types .card {
    border:1px solid #D8D8D8;
    position:relative;
}

.cards-types label, .cards-types p {
    margin-bottom:0;
}

.cards-types p {
    font-size:10px;
}

.cards-types img{
    display:flex;
}

.primaryAlt {
    border: 2px solid #0B3370;
    color: #0B3370;
    background-color: white;
}

.btnsGroup .btn-primary{
    border: 2px solid #0B3370;
    width:150px;
}

.left-side-menu {
    padding:5px 0;
}

.left-side-menu hr {
    border-top: 1px solid #CED4DA;
}

.bootstrap-select .dropdown-menu {
    min-width: 100%!important;
}


.enlarged .left-side-menu #sidebar-menu > ul > li:hover > ul a {
    white-space: normal;
    white-space: -moz-normal;
    white-space: -normal; /* Opera 4-6 */
    white-space: -o-normal; /* Opera 7 */
    word-wrap: break-word;
}


#basic-datatable {
    width: 100%;
}

    #basic-datatable table.dataTable.nowrap td {
        display: table-cell !important;
    }

    #basic-datatable table.dataTable > tbody > tr.child {
        display: none;
    }

    #basic-datatable table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
        display: none;
    }

    #basic-datatable table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child {
        padding: .85rem;
    }



/*Zoom*/





* {
    box-sizing: border-box;
}

.img-zoom-container {
    position: relative;
}

.img-zoom-lens {
    position: absolute;
    border: 1px solid #99b34d;
    border-radius: 5px;
    /*set the size of the lens:*/
    width: 280px;
    height: 125px;
}



/*ZOOM LEVELS----------------*/



.img-zoomUp1-lens {
    border-radius: 5px;
    border: 1px solid #99b34d;
    width: 150px;
    height: 75px;
    position: absolute;
}

.img-zoomUp1-lens2 {
    border-radius: 5px;
    border: 1px solid #99b34d;
    width: 150px;
    height: 75px;
    position: absolute;
}







.img-zoomUp2-lens {
    border-radius: 5px;
    border: 1px solid #99b34d;
    width: 100px;
    height: 50px;
    position: absolute;
}


.img-zoomUp2-lens2 {
    border-radius: 5px;
    border: 1px solid #99b34d;
    width: 100px;
    height: 50px;
    position: absolute;
}




/*-------------------------*/




.img-zoom-lensDos {
    position: absolute;
    border: 1px solid #99b34d;
    border-radius: 5px;
    /*set the size of the lens:*/
    width: 280px;
    height: 125px;
}


.img-zoom-result {
    border: 2px solid #e31ce0;
    border-radius: 5px;
    /*set the size of the result div:*/
    width: 100%;
    height: 200px;
}

#imagen1 {
    position: absolute;
}

#imagen2 {
    position: absolute;
    margin-bottom: 0.7px;
}





/*--------------------------------------------------------------------------------*/







#zoomContainer {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-flow: wrap;
}

#msjUsoZoom {
    color: red;
}

#modComparativaDocumentos .modal-body {
    height: 100%;
}

#modComparativaDocumentos .modal-content, #original, #comparar {
    height: auto;
}

#myimage, #myimageDos {
    width: 100%;
}

.img-container {
    height: 60%;
}

@media screen and (min-width: 767px) {
    #myimage, #myimageDos {
        height: 100%;
        max-width: 100%;
    }

    .img-container {
        height: 45%;
    } 
    
    .img-zoom-result {
        height: 50%;
        width: 100%;
    }

    #modComparativaDocumentos .modal-dialog {
        height: 90%;
        max-width: 90%;
    }

    #modComparativaDocumentos .modal-content {
        height: 100%;
    }
}

@media screen and (min-width: 1000px) {
    #modComparativaDocumentos .modal-dialog {
        max-width: 70%;
        height: 90%;
    }
}

@media screen and (min-width: 1240px) {
    .img-zoom-result {
        height: 30%;
        width: 100%;
    }

    #myimage, #myimageDos {
        height: 100%;
        width: auto;
    }

    .img-container {
        height: 60%;
    }    

    #zoomContainer {
        height: 80%;
    }

    #modComparativaDocumentos .modal-dialog {
        max-width: 70%;
        height: 90%;
    }

    #modComparativaDocumentos .modal-body {
        height: 80%;
    }

    #modComparativaDocumentos .modal-content, #original, #comparar {
        height: 100%;
    }
}

.datatable-filter_label {
    position: absolute;
    left: 15px;
    top: 8px;
}

.progress_presupuesto {
    background-color: white;
    border-radius: 9px;
    height: 1.25rem;
}

.progress_meta {
    border-radius: 9px;
    height: 15px;
}

.progress_meta .progress-bar {
    background-color: #4D5985;
    border-radius: 9px;
}

.progress_presupuesto .progress-bar {
    border-radius: 9px;
    background: linear-gradient(180deg, #FFDB73 0%, #E49118 100%);
}

.row-integracion {
    background-color: #E2E6EF;
    border-radius: 15px;
}

.col-integracion {
    background-color: #E2E6EF;
    border-radius: 15px;
    background-color: #F3F3F3;
}

.card-integracion {
    background: none;
    border-radius: 15px;
    padding: 1rem;
}

.btn-encontrado {
    height: 39px;
    width: 37px;
    border-radius: 4px;
    position: absolute;
    bottom: 5px;
    font-size: 14px;
}

.btn-no {
    border: 1px solid #474747;
    background-color: #FFFFFF;
    color: #474747;
}

.btn-si {
    border: 1px solid #2B85EA;
    background-color: #2B85EA;
    color: white;
}

.btn-no-productos {
    right: 60px;
}

.btn-si-productos {
    right: 10px;
}

.btn-no-proveedor {
    right: 60px;
    bottom: 12px;
}

.btn-si-proveedor {
    right: 12px;
    bottom: 12px;
}

.font-12 {
    font-size: 12px;
}

.btn-anadir {
    position: absolute;
    right: 10px;
}

.btn-facturas {
    height: 38px;
    width: 38px;
    border-radius: 5px;
    border: 1px solid #2B85EA;
    background-color: #2B85EA;
    color: white;
}

.btn-cargar {
    background-color: #2B85EA;
}

.btn-cargar-icon {
    font-size: 19px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.btn-buscar-icon {
    color: #2B85EA;
    font-size: 19px;
    position: absolute;
    right: 24px;
    top: 8px;
}

.grayLine:after {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #D3D3D3;
    width: 85%;
    margin-left: 15px;
    top: 50%;
}

#lista .grayLine:after {
    width: 70%;
}

#rango .grayLine:after {
    width: 78%;
}

#archivo .grayLine:after, .archivo .grayLine:after {
    width: 72%;
}

.generales .grayLine:after {
    width: 91%;
}

.beneficios .grayLine:after {
    width: 76%;
}

.meta .grayLine:after {
    width: 58%;
}

.venta .grayLine:after {
    width: 63%;
}

.btn-descargar {
    bottom: 0;
    left: 25%;
    position: absolute;
    margin-bottom: 30px;
    width: 50%;
}

.btn-subir {
    bottom: 0;
    position: absolute;
    margin-bottom: 30px;
    width: 70%;
}

.btn_filtro {
    border: 2px solid;
    border-radius: 12px;
    color: white;
    padding: 5px 10px;
}

.btn_filtro-equipos {
    background-color: #F5A623;
}

.btn_filtro-accesorios {
    background-color: #4A90E2;
}

.btn_filtro-samsung {
    background-color: #DE5A48;
}

.btn_filtro-gama_alta {
    background-color: #42B79D;
}

.process_bar-icon {
    background-color: blue;
    border-radius: 50px;
    color: white;
    font-size: 10px;
    height: 20px;
    padding: 2px;
    position: absolute;
    text-align: center;
    top: 5px;
    width: 42px;
}

.process_bar-icon:before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid blue;
    content: "";
    left: 35%;
    height: 0px;
    position: absolute;
    transform: rotate(120deg);
    top: 15px;
    width: 0px;
}

.select2-container .selection .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    float: right;
    margin-left: 5px;
    color: white !important;
}

.select2-container .selection .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: #3bafda;
    border-radius: 9px !important;
}

.custom_col {
    width: 44%;
    display: inline-block;
}

.custom_col-margin {
    margin-right: 3%;
}

@media (min-width: 992px) {
    .custom_col {
        width: 11%;
        display: inline-block;
    }
}

li.paginate_button > a.page-link {
    border-radius: 50%;
    border: none;
}

#proveedor ~ span.select2-container span.select2-selection__arrow {
    display: none;
}

#proveedor ~ span.select2-container span.select2-selection--single {
    border: 2px solid #CED4DA;
    border-radius: 5px;
    height: 38px;
    padding: 5px;
}
