.page-wrapper .container-fluid{
    max-width: none !important;
}
.page-wrapper .page-breadcrumb{
    max-width: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    padding: 0 !important;
}

/*.dropzoneHtml {
    background: white;
    border-radius: 5px;
    border: 2px dashed rgb(0, 135, 247);
    border-image: none;
    /*max-width: 500px;*
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
.centered-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}*/

ul.helper-text {
    display: block;
    margin-top: 15px;
    font-size: 12px;
    line-height: 22px;
    color: #808080;
}

ul.helper-text li.valid {
    color: #1ab23c;
    text-decoration-line: line-through;
}

.valid input {
    border: 2px solid #1fd34a;
}

body[data-theme="dark"] .bg-onetaxB1,
body[data-theme="dark"] .card.bg-onetaxB1,
body[data-theme="dark"] .btn-onetaxB1,
body[data-theme="dark"] .badge-onetaxB1,
body[data-theme="dark"] .round.round-onetaxB1 {
    background-color: rgba(1, 65, 133, 0.5) !important;
    border-color: rgba(1, 65, 133, 0.5) !important;
}

body[data-theme="dark"] .bg-onetaxB2,
body[data-theme="dark"] .card.bg-onetaxB2,
body[data-theme="dark"] .btn-onetaxB2,
body[data-theme="dark"] .badge-onetaxB2,
body[data-theme="dark"] .round.round-onetaxB2 {
    background-color: rgba(180, 225, 255, 0.5) !important;
    border-color: rgba(180, 225, 255, 0.5) !important;
}

body[data-theme="dark"] .bg-onetaxG1,
body[data-theme="dark"] .card.bg-onetaxG1,
body[data-theme="dark"] .btn-onetaxG1,
body[data-theme="dark"] .badge-onetaxG1,
body[data-theme="dark"] .round.round-onetaxG1 {
    background-color: rgba(164, 164, 164, 0.5) !important;
    border-color: rgba(164, 164, 164, 0.5) !important;
}

body[data-theme="dark"] .bg-onetaxG2,
body[data-theme="dark"] .card.bg-onetaxG2,
body[data-theme="dark"] .btn-onetaxG2,
body[data-theme="dark"] .badge-onetaxG2,
body[data-theme="dark"] .round.round-onetaxG2 {
    background-color: rgba(196, 196, 196, 0.5) !important;
    border-color: rgba(196, 196, 196, 0.5) !important;
}

.border-onetaxB1 {
    border-color: #014185 !important;
}

.border-onetaxB2 {
    border-color: #b4e1ff !important;
}

.border-onetaxG1 {
    border-color: #a4a4a4 !important;
}

.border-onetaxG2 {
    border-color: #c4c4c4 !important;
}

.bg-onetaxB1 {
    background-color: #014185 !important;
}

.bg-onetaxB2 {
    background-color: #b4e1ff !important;
}

.bg-onetaxG1 {
    background-color: #a4a4a4 !important;
}

.bg-onetaxG2 {
    background-color: #c4c4c4 !important;
}

.text-onetaxB1 {
    --bs-text-opacity: 1;
    color: #014185 !important;
}

.text-onetaxB2 {
    --bs-text-opacity: 1;
    color: #b4e1ff !important;
}

.text-onetaxG1 {
    --bs-text-opacity: 1;
    color: #a4a4a4 !important;
}

.text-onetaxG2 {
    --bs-text-opacity: 1;
    color: #c4c4c4 !important;
}
.btn-onetaxB1 {
    color: #fff !important;
    background-color: #014185 !important;
    border-color: #014185 !important;
    box-shadow: 0 0.125rem 0.625rem rgba(1, 65, 133, 0.3),
      0 0.0625rem 0.125rem rgba(1, 65, 133, 0.4) !important;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-onetaxB1A {
    color: #fff !important;
    background-color: #014185 !important;
    border-color: #014185 !important;
    transition: all 0.3s;
}

.btn-onetaxB1:hover {
    color: #fff !important;
    background-color: #013771 !important;
    border-color: #01346a !important;
    box-shadow: 0 0.125rem 0.625rem rgba(1, 65, 133, 0.6),
      0 0.0625rem 0.125rem rgba(1, 65, 133, 0.7) !important;
}

.btn-onetaxB1A:hover {
    color: #fff !important;
    background-color: #013771 !important;
    border-color: #01346a !important;
    box-shadow: 0 0.125rem 0.625rem rgba(1, 65, 133, 0.6),
    0 0.0625rem 0.125rem rgba(1, 65, 133, 0.7) !important;
}

.btn-onetaxWhiteB1A {
    color: #6a7a8c !important;
    background-color: #fff !important;
    border-color: #fff !important;
    /*border-color: #6a7a8c !important;*/
    transition: all 0.3s;
}

.btn-onetaxInfoB1A {
    color: #6a7a8c !important;
    background-color: #fff !important;
    border-color: #fff !important;
    /*border-color: #6a7a8c !important;*/
    transition: all 0.3s;
}

.btn-onetaxInfoB1A:hover {
    color: #fff !important;
    background-color: #013771 !important;
    border-color: #01346a !important;
    box-shadow: 0 0.125rem 0.625rem rgba(1, 65, 133, 0.6),
    0 0.0625rem 0.125rem rgba(1, 65, 133, 0.7) !important;
}

.btn-onetaxWhiteB1A:hover {
    color: #fff !important;
    background-color: #013771 !important;
    border-color: #01346a !important;
    box-shadow: 0 0.125rem 0.625rem rgba(1, 65, 133, 0.6),
    0 0.0625rem 0.125rem rgba(1, 65, 133, 0.7) !important;
}

.btn-onetaxB1:focus,
.btn-onetaxB1.focus {
    box-shadow: 0 0 0 0 rgba(1, 65, 133, 0.3) !important;
}

.btn-onetaxB1.disabled,
.btn-onetaxB1:disabled {
    color: #fff !important;
    background-color: #014185 !important; /* Mantener el color original */
    border-color: #014185 !important; /* Mantener el color original */
}

.daterangeDatatable {
    border: none !important;
}

.btn-onetaxB1:not(:disabled):not(.disabled):active,
.btn-onetaxB1:not(:disabled):not(.disabled).active,
.show > .btn-onetaxB1.dropdown-toggle {
    color: #fff !important;
    background-color: #01346a !important;
    border-color: #013164 !important;
}

.btn-onetaxB1:not(:disabled):not(.disabled):active:focus,
.btn-onetaxB1:not(:disabled):not(.disabled).active:focus,
.show > .btn-onetaxB1.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(1, 65, 133, 0.4) !important;
}

.btn-onetaxB2 {
    color: #fff !important;
    background-color: #b4e1ff !important;
    border-color: #b4e1ff !important;
    box-shadow: 0 0.125rem 0.625rem rgba(180, 225, 255, 0.3),
      0 0.0625rem 0.125rem rgba(180, 225, 255, 0.4) !important;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-onetaxB2A {
    color: #fff !important;
    background-color: #b4e1ff !important;
    border-color: #b4e1ff !important;
    transition: all 0.3s;
}

.btn-onetaxB2:hover {
    color: #fff !important;
    background-color: #b4e1ff !important;
    border-color: #b4e1ff !important;
    box-shadow: 0 0.125rem 0.625rem rgba(180, 225, 255, 0.6),
      0 0.0625rem 0.125rem rgba(180, 225, 255, 0.7) !important;
}

.btn-onetaxB2A:hover {
    color: #fff !important;
    background-color: #b4e1ff !important;
    border-color: #b4e1ff !important;
    box-shadow: 0 0.125rem 0.625rem rgba(180, 225, 255, 0.6),
    0 0.0625rem 0.125rem rgba(180, 225, 255, 0.7) !important;
}

.btn-onetaxB2:focus,
.btn-onetaxB2.focus {
    box-shadow: 0 0 0 0 rgba(180, 225, 255, 0.3) !important;
}

.btn-onetaxB2.disabled,
.btn-onetaxB2:disabled {
    color: #fff !important;
    background-color: #b4e1ff !important; /* Mantener el color original */
    border-color: #b4e1ff !important; /* Mantener el color original */
}

.btn-onetaxB2:not(:disabled):not(.disabled):active,
.btn-onetaxB2:not(:disabled):not(.disabled).active,
.show > .btn-onetaxB2.dropdown-toggle {
    color: #fff !important;
    background-color: #79ccff !important;
    border-color: #79ccff !important;
}

.btn-onetaxB2:not(:disabled):not(.disabled):active:focus,
.btn-onetaxB2:not(:disabled):not(.disabled).active:focus,
.show > .btn-onetaxB2.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(180, 225, 255, 0.4) !important;
}
.btn-onetaxG1 {
    color: #fff !important;
    background-color: #a4a4a4 !important;
    border-color: #a4a4a4 !important;
    box-shadow: 0 0.125rem 0.625rem rgba(164, 164, 164, 0.3),
      0 0.0625rem 0.125rem rgba(164, 164, 164, 0.4) !important;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-onetaxG1:hover {
    color: #fff !important;
    background-color: #888888 !important;
    border-color: #888888 !important;
    box-shadow: 0 0.125rem 0.625rem rgba(164, 164, 164, 0.6),
      0 0.0625rem 0.125rem rgba(164, 164, 164, 0.7) !important;
}

.btn-onetaxG1:focus,
.btn-onetaxG1.focus {
    box-shadow: 0 0 0 0 rgba(164, 164, 164, 0.3) !important;
}

.btn-onetaxG1.disabled,
.btn-onetaxG1:disabled {
    color: #fff !important;
    background-color: #a4a4a4 !important; /* Mantener el color original */
    border-color: #a4a4a4 !important; /* Mantener el color original */
}

.btn-onetaxG1:not(:disabled):not(.disabled):active,
.btn-onetaxG1:not(:disabled):not(.disabled).active,
.show > .btn-onetaxG1.dropdown-toggle {
    color: #fff !important;
    background-color: #888888 !important;
    border-color: #888888 !important;
}

.btn-onetaxG1:not(:disabled):not(.disabled):active:focus,
.btn-onetaxG1:not(:disabled):not(.disabled).active:focus,
.show > .btn-onetaxG1.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(164, 164, 164, 0.4) !important;
}

.btn-onetaxG2 {
    color: #fff !important;
    background-color: #c4c4c4 !important;
    border-color: #c4c4c4 !important;
    box-shadow: 0 0.125rem 0.625rem rgba(196, 196, 196, 0.3),
      0 0.0625rem 0.125rem rgba(196, 196, 196, 0.4) !important;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-onetaxG2:hover {
    color: #fff !important;
    background-color: #999999 !important;
    border-color: #999999 !important;
    box-shadow: 0 0.125rem 0.625rem rgba(196, 196, 196, 0.6),
      0 0.0625rem 0.125rem rgba(196, 196, 196, 0.7) !important;
}

.btn-onetaxG2:focus,
.btn-onetaxG2.focus {
    box-shadow: 0 0 0 0 rgba(196, 196, 196, 0.3) !important;
}

.btn-onetaxG2.disabled,
.btn-onetaxG2:disabled {
    color: #fff !important;
    background-color: #c4c4c4 !important; /* Mantener el color original */
    border-color: #c4c4c4 !important; /* Mantener el color original */
}

.btn-onetaxG2:not(:disabled):not(.disabled):active,
.btn-onetaxG2:not(:disabled):not(.disabled).active,
.show > .btn-onetaxG2.dropdown-toggle {
    color: #fff !important;
    background-color: #999999 !important;
    border-color: #999999 !important;
}

.btn-onetaxG2:not(:disabled):not(.disabled):active:focus,
.btn-onetaxG2:not(:disabled):not(.disabled).active:focus,
.show > .btn-onetaxG2.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(196, 196, 196, 0.4) !important;
}
#main-wrapper[data-layout="vertical"]
    .topbar
    .top-navbar
    .navbar-header[data-logobg="skin7"],
#main-wrapper[data-layout="horizontal"]
    .topbar
    .top-navbar
    .navbar-header[data-logobg="skin7"] {
    background: #014185;
}
#main-wrapper[data-layout="vertical"]
    .topbar
    .navbar-collapse[data-navbarbg="skin7"],
#main-wrapper[data-layout="vertical"] .topbar[data-navbarbg="skin7"],
#main-wrapper[data-layout="horizontal"]
    .topbar
    .navbar-collapse[data-navbarbg="skin7"],
#main-wrapper[data-layout="horizontal"] .topbar[data-navbarbg="skin7"] {
    background: #014185;
}
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin7"],
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin7"] ul,
#main-wrapper[data-layout="horizontal"] .left-sidebar[data-sidebarbg="skin7"],
#main-wrapper[data-layout="horizontal"]
    .left-sidebar[data-sidebarbg="skin7"]
    ul {
    background: #014185;
}
.theme-color .theme-item .theme-link[data-logobg="skin7"],
.theme-color .theme-item .theme-link[data-navbarbg="skin7"],
.theme-color .theme-item .theme-link[data-sidebarbg="skin7"] {
    background: #014185;
}
@media (min-width: 992px) {
    #main-wrapper[data-layout="horizontal"]
      .topbar
      .navbar-collapse[data-navbarbg="skin7"],
    #main-wrapper[data-layout="horizontal"]
      .topbar
      .navbar-collapse[data-navbarbg="skin2"],
    #main-wrapper[data-layout="horizontal"]
      .topbar
      .navbar-collapse[data-navbarbg="skin3"],
    #main-wrapper[data-layout="horizontal"]
      .topbar
      .navbar-collapse[data-navbarbg="skin4"],
    #main-wrapper[data-layout="horizontal"]
      .topbar
      .navbar-collapse[data-navbarbg="skin5"],
    #main-wrapper[data-layout="horizontal"]
      .topbar
      .navbar-collapse[data-navbarbg="skin6"] {
      background: transparent;
    }
}
#main-wrapper[data-layout="vertical"]
    .topbar
    .top-navbar
    .navbar-header[data-logobg="skin7"],
#main-wrapper[data-layout="horizontal"]
    .topbar
    .top-navbar
    .navbar-header[data-logobg="skin7"] {
    background: #014185;
}

/* Cambia el color de fondo y el texto de los botones de paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item.active .page-link {
    background-color: #014185; /* Fondo azul oscuro */
    color: white; /* Texto blanco */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.page-item.previous .page-link {
    background-color: #014185; /* Fondo azul oscuro */
    color: white; /* Texto blanco */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.page-item.next .page-link {
    background-color: #014185; /* Fondo azul oscuro */
    color: white; /* Texto blanco */
}


/* Botón activo */
.nav-pills .nav-link.active {
    background-color: #012a5c; /* Color del fondo activo */
    color: white; /* Color del texto activo */
}

/* Hover en los botones */
.nav-pills .nav-link:hover {
    background-color: #013970; /* Un tono intermedio para hover */
    color: white; /* Color del texto en hover */
}

.dropzone {
    background-color: #f9f9f9 !important; /* Fondo claro */
    border: 2px dashed #014185 !important; /* Borde azul oscuro */
    border-radius: 12px !important; /* Bordes redondeados */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important; /* Animaciones */
}

.dropzone:hover {
    background-color: #e9ecef !important; /* Fondo más claro al pasar el cursor */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Sombra suave */
}

.dropzone i {
    font-size: 48px !important; /* Ícono más grande */
    color: #014185 !important; /* Ícono azul oscuro */
}

.dropzone h5 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.dropzone p {
    font-size: 14px !important;
    color: #6c757d !important; /* Texto secundario gris */
}

.cardOneTax {
    min-height: 100% !important; /* Hace que todas las tarjetas tengan la misma altura */
}

.labelOnetax {
    font-weight: bold !important;
    color: #014185 !important; /* Usa un color del tema */
}

#dropzoneFacturasCanceladas {
    background-color: #f9f9f9;
    border: 2px dashed #014185;
    border-radius: 10px;
    max-height: 300px; /* Limita la altura */
    overflow-y: auto; /* Agrega scroll vertical */
    padding: 20px;
    transition: background-color 0.3s ease;
}

#dropzoneFacturasCanceladas:hover {
    background-color: #eaf3fb;
}

.dataTable tbody tr {
    border-bottom: 1px solid #e0e0e0 !important;
}

.dataTable thead {
    background-color: #ffffff !important;
    color: grey !important;
}

/*@media (max-width: 768px) {
    #dropzoneFacturasCanceladas {
        max-height: 100px; !* Reduce la altura en pantallas más pequeñas *!
    }
}*/
/* Estilos para Select2 */
/* Estilos generales del Select2 */
.select2-container {
    width: 100% !important;
}

#empresaSearch + .select2-container--default .select2-selection--single {
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0.375rem !important;
    border: 1px solid #d1d5db !important;
}

/* Estilos para la tabla */
div.dt-buttons {
    /*padding-bottom: 5px !important;*/
    padding-bottom: 0.7% !important;
}

.table {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.table thead {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    font-weight: bold !important;
}

.table td, .table th {
    padding: 1rem !important;
    border-color: #e5e7eb !important;
}

.table {
    --bs-table-accent-bg: unset !important;
    --bs-table-bg: #ffffff !important; /* Fondo blanco */
    --bs-table-border-color: #d1d5db !important; /* Color del borde */
    --bs-table-hover-bg: #f1f5f9 !important; /* Fondo al pasar el cursor */
}

.table thead {
    border-bottom: 2px solid #d1d5db !important; /* Línea inferior */
    color: unset !important; /* Color del texto */
}

.thead-light th {
}

/*.dataTables_scrollBody table .thead-light {
    display: none !important;
}*/
/*.dataTables_scrollBody table .thead-light {
    opacity: 0 !important; !* Lo hace completamente transparente *!
    height: 0 !important; !* Elimina visualmente el espacio *!
    overflow: hidden !important; !* Evita cualquier contenido desbordado *!
    pointer-events: none !important; !* Deshabilita la interacción *!
}*/
/*.dataTables_scrollBody table thead .thead-light tr {
    height: 0 !important;
    background-color: red !important;
}*/
/*th-light*/
/*.dataTables_scrollBody table thead tr { height:0px; }*/

/* Estilo general del scrollbar */
.dataTables_scrollBody::-webkit-scrollbar {
    width: 8px; /* Ancho del scroll */
    height: 8px; /* Alto del scroll horizontal */
}

/* Color del fondo del scrollbar */
.dataTables_scrollBody::-webkit-scrollbar-track {
    background: #f1f5f9; /* Color del track */
    border-radius: 4px; /* Bordes redondeados */
}

/* Color de la barra */
.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background-color: #6b7280; /* Color del thumb (scroll) */
    border-radius: 4px; /* Bordes redondeados */
    border: 2px solid #f1f5f9; /* Espacio alrededor del thumb */
}

/* Cambiar color al pasar el mouse */
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background-color: #374151; /* Color más oscuro al hover */
}

/* Estilo del scrollbar para otros navegadores */
.dataTables_scrollBody {
    scrollbar-width: thin; /* Grosor en Firefox */
    scrollbar-color: #6b7280 #f1f5f9; /* Color thumb y track */
}

/*.dataTables_scrollBody table .thead-light {
    display: none !important;
}*/
.dataTables_scrollBody > table > thead > tr {
    visibility: collapse;
    height: 0px !important;
}

.div_empresas::-webkit-scrollbar {
    width: 8px; /* Ancho del scroll */
    height: 8px; /* Alto del scroll horizontal */
}

/* Color del fondo del scrollbar */
.div_empresas::-webkit-scrollbar-track {
    background: #f1f5f9; /* Color del track */
    border-radius: 4px; /* Bordes redondeados */
}

/* Color de la barra */
.div_empresas::-webkit-scrollbar-thumb {
    background-color: #6b7280; /* Color del thumb (scroll) */
    border-radius: 4px; /* Bordes redondeados */
    border: 2px solid #f1f5f9; /* Espacio alrededor del thumb */
}

/* Cambiar color al pasar el mouse */
.div_empresas::-webkit-scrollbar-thumb:hover {
    background-color: #374151; /* Color más oscuro al hover */
}

/* Asegúrate de que el mensaje de carga se centre correctamente */
.dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /*transform: translate(-50%, -50%) !important;*/
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    color: #374151; /* Texto oscuro */
    z-index: 1050; /* Asegúrate de que esté sobre otros elementos */
}

/*@media (max-width: 768px) {
    .dataTables_processing {
        transform: none !important;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }
}*/


/* Estilo de la cabecera del modal */
.modal-header {
    background-color: #014185 !important;
    color: white; /* Asegúrate de que el texto sea visible */
}

.modal .rounded-top-4 {
    /*quito el border top*/
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/*
.custom-background {
    background-size: cover; !* Escalar la imagen para que cubra todo el div *!
    background-position: center; !* Centrar la imagen *!
    background-repeat: no-repeat; !* Evitar que la imagen se repita *!
    transition: background-image 1s ease-in-out;
    overflow: hidden; !* Asegura que el contenido no se desborde *!
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; !* Asegura que el video cubra el contenedor *!
    z-index: -1; !* Envía el video detrás del contenido principal *!
    pointer-events: none; !* Evita que el video bloquee clics o interacciones *!
}
*/
.custom-background {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 1s ease-in-out, background-image 1s ease-in-out; /* Transición suave */
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video cubra el contenedor */
    z-index: -1; /* Envía el video detrás del contenido principal */
    pointer-events: none; /* Evita que el video bloquee clics o interacciones */
    opacity: 0; /* Inicia invisible */
    transition: opacity 1s ease-in-out; /* Transición suave para el video */
}

/* Estilos para el contenedor con scroll */
.table-scroll-container {
    overflow-x: auto; /* Habilita scroll horizontal */
    overflow-y: auto; /* Habilita scroll vertical si es necesario */
    max-height: 500px; /* Ajusta el máximo alto según tu diseño */
    border: 1px solid #dee2e6; /* Opcional: borde para distinguir el área */
    border-radius: 5px; /* Opcional: bordes redondeados */
    padding: 10px; /* Opcional: espacio interno */
}

/* Estilo adicional para mejorar la experiencia */
.table-scroll-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-scroll-container::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 10px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #a0aec0;
}

.table-scroll-container::-webkit-scrollbar-track {
    background-color: #f7fafc;
}

.dataTables_scrollBody table .thead-light-add-after-load {
    display: none !important;
}

/* Seccion cfdis */
.card-metric {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.card-metric .icon {
    font-size: 2.5rem;
}

.lottie-container {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lottie-container-egresos {
    max-height: 200px; /* Tamaño máximo de la animación */
    width: auto; /* Ajusta el ancho automáticamente */
    display: flex;
    justify-content: center;
    align-items: center;
}

.lottie-container-cancelaciones {
    width: auto;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
}

.div_imagen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50vh; /* 50% de la altura de la pantalla */
    max-height: 500px; /* Limita el tamaño máximo */
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.div_imagen p {
    margin-top: 15px;
    font-size: 1rem;
    color: #6c757d; /* Gris neutro */
}

.modal-body .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Habilita scroll suave en dispositivos móviles */
}

.nav-pills {
    white-space: nowrap; /* Asegura que los elementos no se ajusten a nuevas líneas */
    overflow-x: auto; /* Habilita el scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Suaviza el desplazamiento en dispositivos táctiles */
}

.nav-pills .nav-link {
    flex-shrink: 0; /* Evita que los elementos se reduzcan */
    margin-right: 0.5rem; /* Agrega espacio entre las pestañas */
}

.table-responsive {
    overflow-x: auto !important; /* Asegura que el scroll horizontal esté habilitado */
    -webkit-overflow-scrolling: touch; /* Suaviza el desplazamiento en dispositivos táctiles */
}



/* Estilos media querys */

@media (max-width: 768px) {
    .table {
        white-space: normal; /* Wrap para pantallas pequeñas */
    }

    .dataTables_processing {
        transform: none !important;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }

    .div_imagen {
        height: auto; /* Permite que se adapte al contenido en dispositivos pequeños */
        padding: 10px;
    }

    .lottie-container-egresos {
        max-height: 150px; /* Reduce el tamaño de la animación */
    }

    .btn-full-width {
        width: 100%;
        display: block;
    }

    /* Ajustes para dispositivos móviles modal datatable */
    /*div.dt-button-collection.fixed {
        top: 35%; !* Ajusta la posición vertical *!
        left: 30%; !* Centra horizontalmente *!
    }*/
    /*.dt-button-collection > [role="menu"] {
        grid-template-columns: unset !important; !* Mantén columnas dinámicas *!
        gap: 6px !important;
        padding: 10px !important;
        max-height: 400px !important; !* Altura máxima del menú *!
        overflow-y: auto !important; !* Scroll si el contenido excede la altura *!
        border-bottom: 1px solid #ddd !important; !* Separador visual *!
    }*/

}

@media (min-width: 769px) {
    .table {
        white-space: nowrap; /* No wrap para pantallas grandes */
    }

}

@media (max-width: 1024px) {
    /* Ajustes para tabletas, incluidas las iPads */
    .dataTables_processing {
        transform: none !important;
        margin: 0 auto;
        width: 90%; /* Ajusta el ancho para dispositivos más pequeños */
        text-align: center;
    }
}

/* Botón por defecto */
.btn-filtro-cancelaciones {
    font-weight: normal;
    opacity: 0.8;
    border-width: 2px;
}

/* Botón seleccionado (activo) */
.btn-filtro-cancelaciones.active {
    font-weight: bold;
    opacity: 1;
    border-color: #014185; /* Color de borde diferente */
    background-color: #014185; /* Cambia el color del fondo */
    color: white; /* Cambia el color del texto */
}

/* dt-button-collection */
.dt-button-collection {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

div.dt-button-collection-title {
    padding-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.dt-button-collection .headerDataTable {
    padding: 0.2rem 1rem !important;
    color: white;
}

.dt-button-collection .btn-close {
    color: white;
    /*le quito --bs-btn-close-opacity: 0.5;*/
    opacity: unset;
}

/*
.dt-button-collection > [role="menu"] {
    display: grid; !* Cambiamos de flex a grid para un mejor control de columnas *!
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); !* Mantén columnas dinámicas *!
    gap: 6px;
    padding: 10px;
    max-height: 400px; !* Altura máxima del menú *!
    overflow-y: auto; !* Scroll si el contenido excede la altura *!
    border-bottom: 1px solid #ddd; !* Separador visual *!
}

.dt-button-collection.columns > .modal-footer {
    padding: 1rem 1rem !important;
}

*/


.table-responsive-cobranza {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .table-responsive-cobranza {
        display: block;
        width: 100%;
    }

    .table-responsive-cobranza table {
        width: 100%;
        min-width: 1000px; /* Ajusta según columnas */
    }
}


/* Archivo CSS personalizado o etiqueta <style> en tu HTML */

.auth-wrapper {
    /* Asegúrate de que el wrapper permita que el contenido fluya */
    /* Puede que no necesites cambios aquí si el scroll es del body */
}

.bg-sidebar-edit {
    position: -webkit-sticky; /* Para compatibilidad con Safari */
    position: sticky;
    top: 0; /* Pégalo en la parte superior cuando hagas scroll */
    align-self: flex-start; /* Importante en un flex container (row) para que no se estire */
    height: 100vh; /* Haz que ocupe toda la altura de la ventana */
    overflow-y: auto; /* Permite scroll DENTRO de la barra si su contenido es muy largo */
}

/* Opcional: Asegúrate que html y body tengan altura si el scroll no funciona */
/* html, body {
    height: 100%;
   } */

/* Ajustes para pantallas pequeñas donde quizás no quieras la barra fija */
@media (max-width: 991.98px) {
    /* breakpoint lg de Bootstrap */
    .bg-sidebar-edit {
        position: static; /* Vuelve al comportamiento normal */
        height: auto; /* Altura automática */
        overflow-y: visible;
    }
}

.document-scroll-container {
    max-height: 300px; /* Ajusta a la altura deseada */
    overflow-y: auto;
    padding-right: 10px; /* Para evitar ocultar scroll detrás del contenido */
}


/* --- ESTILOS PARA EL VISOR DE ARCHIVOS EN MODAL --- */

/* Forzamos al cuerpo del modal a tener una altura significativa
  y eliminamos el padding para que el iframe ocupe todo el espacio.
*/
#visorArchivoModal .modal-body {
    height: 85vh; /* 85% de la altura de la ventana */
    padding: 0 !important; /* Importante para anular otros estilos */
    /*overflow: hidden; !* Evitamos dobles barras de scroll *!*/
}

/*
  Hacemos que el iframe dentro del cuerpo del modal se expanda
  para llenar completamente a su padre (.modal-body).
*/
#visorArchivoModal .modal-body {
    text-align: center;
}
#visorArchivoModal .modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}


.filtersDashboard {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filtersDashboard-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filtersDashboard-label {
    font-size: 0.85rem;
    color: var(--gray);
}

.colorTextDashboard {
    color: #333333 !important; /* Color azul oscuro */
}


.kpi__border {
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.2); /* sombra solo abajo */
    border-radius: 8px; /* opcional */
}

/*#kpi_facturacion_total {
    border-bottom: 3px solid #007bff; !* azul Bootstrap *!
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border-radius: 8px;
}*/
#barChartContainer {
    height: 280px; /* ajusta el alto */
}

.chart-container {
    height: 280px; /* ajusta el alto */
}

.chart-container_v2 {
    height: 380px; /* ajusta el alto */
}


.supplier-table {
    table-layout: fixed;
    width: 100%;
}

.supplier-table {
    table-layout: fixed;
    width: 100%;
}

/* respeta anchos */
.supplier-table col.prov {
    width: 45%;
}

/* ajusta a tu gusto */
.supplier-table col.cfdis {
    width: 15%;
}

.supplier-table col.total {
    width: 20%;
}

.supplier-table td.prov, .supplier-table th.prov {
    white-space: nowrap;
}

.supplier-table td.prov {
    overflow: hidden;
    text-overflow: ellipsis; /* muestra … si se pasa */
}

/* ====== Tema ICSOE (estilo cliente) SOLO en #page-upload-icsoe ====== */

#page-upload-icsoe {
    /* Colores base (ajústalos si tu primario es otro) */
    --icsoe-border: #2b6df3; /* azul del borde punteado */
    --icsoe-bg: #eaf2ff; /* azul MUY claro del fondo del drop */
    --icsoe-spec: rgba(43, 109, 243, .10); /* panel especificación */
    --icsoe-text-mute: #7b8aa0;
}

/* Card más “suave” y redondeada */
#page-upload-icsoe .card.shadow.rounded-4 {
    border: 0;
    box-shadow: 0 8px 32px rgba(16, 24, 40, .06);
    border-radius: 18px !important;
}

#page-upload-icsoe .card .card-body {
    padding: 1.75rem 1.75rem 2rem;
}

/* Título con icono como en el mock */
#page-upload-icsoe .card-title.h5 {
    font-weight: 700;
    color: #1d2b4e;
}

#page-upload-icsoe .card-title .fa-cloud-upload-alt {
    color: var(--icsoe-border);
}

/* ======= Dropzone ======= */
#page-upload-icsoe #dropzone {
    min-height: 420px;
    background: var(--icsoe-bg) !important;
    border-color: var(--icsoe-border) !important;
    border-style: dashed !important;
    border-width: 2px !important;
    border-radius: 18px !important;
    transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

#page-upload-icsoe #dropzone .pointer-events-none {
    pointer-events: none;
}

/* Icono grande centrado */
#page-upload-icsoe #dropzone .fa-file-excel {
    display: block;
    margin: 0 auto 1rem auto;
    font-size: 4rem;
    color: #6a5cff;
}

/* Tipografía y enlaces */
#page-upload-icsoe #dropzone p {
    margin-bottom: .35rem;
    font-weight: 600;
    color: #2f3b59;
}

#page-upload-icsoe #dropzone small.text-muted {
    color: var(--icsoe-text-mute) !important;
}

#page-upload-icsoe #browseLink {
    text-decoration: underline;
}

/* Panel de estructura requerida */
#page-upload-icsoe #dropzone .text-start.mx-auto {
    max-width: 720px !important;
    background: var(--icsoe-spec) !important;
    border-radius: 14px !important;
}

#page-upload-icsoe #dropzone .text-start small strong {
    color: #2f3b59;
}

/* Aviso */
#page-upload-icsoe #dropzone .text-warning {
    color: #f59f00 !important;
}

/* Estado al arrastrar */
#page-upload-icsoe #dropzone.dragover {
    background: rgba(43, 109, 243, .08) !important;
    border-color: var(--icsoe-border) !important;
    box-shadow: 0 0 0 4px rgba(43, 109, 243, .10);
}

/* ===== Progreso y resultados ===== */
#page-upload-icsoe #progressBar {
    border-radius: 10px;
    font-weight: 600;
}

#page-upload-icsoe #uploadResults .bg-light {
    background: #f7f9fc !important;
    border-radius: 14px !important;
}

#page-upload-icsoe #uploadResults {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

#page-upload-icsoe .upload-results-panel {
    width: 100%;
    max-width: none;
    padding: 1.4rem 1.4rem 1.25rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e7edf5;
    box-shadow: 0 16px 42px rgba(16, 24, 40, .06);
    text-align: left;
}

#page-upload-icsoe .upload-results-header {
    display: grid;
    gap: 1rem;
}

#page-upload-icsoe .upload-results-header-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#page-upload-icsoe .upload-results-copy {
    flex: 1;
    min-width: 0;
}

#page-upload-icsoe .upload-results-copy #resultsDetail {
    max-width: none;
}

#page-upload-icsoe .upload-results-stats {
    margin-top: 0 !important;
}

#page-upload-icsoe .upload-results-stats .col-md-3 {
    min-width: 170px;
}

#page-upload-icsoe #uploadStatusIconWrap {
    width: 76px;
    height: 76px;
    margin: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eaf7ef;
    flex: 0 0 76px;
}

#page-upload-icsoe #uploadStatusIconWrap.is-success {
    background: #eaf7ef;
}

#page-upload-icsoe #uploadStatusIconWrap.is-partial {
    background: #fff4db;
}

#page-upload-icsoe #uploadStatusIconWrap.is-error {
    background: #fdebec;
}

#page-upload-icsoe #uploadStatusIcon {
    margin-bottom: 0 !important;
}

#page-upload-icsoe #resultsMessage.status-success {
    color: #1f7a3f;
}

#page-upload-icsoe #resultsMessage.status-partial {
    color: #b26a00;
}

#page-upload-icsoe #resultsMessage.status-error {
    color: #c23b3b;
}

#page-upload-icsoe .result-stat-card {
    height: 100%;
    padding: .9rem .75rem;
    border-radius: 14px;
    background: #f7f9fc;
    border: 1px solid #e7edf5;
}

#page-upload-icsoe .result-stat-card small {
    display: block;
    color: #7b8aa0;
    margin-bottom: .2rem;
}

#page-upload-icsoe .result-stat-card strong {
    display: block;
    font-size: 1.35rem;
    line-height: 1.2;
    color: #22304a;
}

#page-upload-icsoe .result-stat-card-success {
    background: #eefaf2;
    border-color: #ccebd7;
}

#page-upload-icsoe .result-stat-card-warning {
    background: #fff8e8;
    border-color: #f7df9f;
}

#page-upload-icsoe .result-stat-card-danger {
    background: #fff1f1;
    border-color: #f2caca;
}

#page-upload-icsoe .upload-issue-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    border-radius: 999px;
    border: 1px solid #d7e2ef;
    background: #f8fbff;
    color: #29405e;
    font-size: .92rem;
}

#page-upload-icsoe .upload-issue-pill.is-warning {
    background: #fff8e8;
    border-color: #f7df9f;
    color: #9a6500;
}

#page-upload-icsoe .upload-issue-pill.is-error {
    background: #fff1f1;
    border-color: #f2caca;
    color: #b63737;
}

#page-upload-icsoe .upload-report-table-wrap,
#page-upload-icsoe .upload-notify-card {
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e7edf5;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .05);
}

#page-upload-icsoe #errorsBox,
#page-upload-icsoe #uploadIssueSummaryBox,
#page-upload-icsoe #uploadReportActions,
#page-upload-icsoe #uploadReportTableBox,
#page-upload-icsoe #uploadNotifyBox {
    max-width: none !important;
}

#page-upload-icsoe .upload-report-table {
    min-width: 1120px;
}

#page-upload-icsoe .upload-report-table thead th {
    background: #f8fafc;
    color: #52627a;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #dbe4f0;
}

#page-upload-icsoe .upload-report-table td {
    vertical-align: top;
    color: #24364f;
}

#page-upload-icsoe .upload-report-table-wrap {
    max-height: 360px;
    overflow: auto;
}

#page-upload-icsoe .upload-report-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

#page-upload-icsoe .upload-status-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}

#page-upload-icsoe .upload-status-badge.is-ok {
    background: #eefaf2;
    color: #1f7a3f;
}

#page-upload-icsoe .upload-status-badge.is-warning {
    background: #fff8e8;
    color: #a15d00;
}

#page-upload-icsoe .upload-status-badge.is-error {
    background: #fff1f1;
    color: #b63737;
}

#page-upload-icsoe .upload-notify-card textarea {
    resize: vertical;
}

#page-upload-icsoe #uploadNotifyRecipients {
    resize: vertical;
    min-height: 72px;
}

@media (max-width: 767.98px) {
    #page-upload-icsoe .upload-results-panel {
        padding: 1rem;
    }

    #page-upload-icsoe .upload-results-header-main {
        align-items: flex-start;
    }

    #page-upload-icsoe #uploadStatusIconWrap {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    #page-upload-icsoe .upload-results-stats .col-md-3 {
        min-width: 0;
    }

    #page-upload-icsoe .upload-report-table-wrap {
        max-height: 300px;
    }
}


/* dashboard icsoe */
#icsoe-dashboard .nav-tabs .nav-link {
    border: 0;
    color: #8a94a6;
    font-weight: 600;
}

#icsoe-dashboard .nav-tabs .nav-link.active {
    color: #2251ff;
    position: relative;
}

#icsoe-dashboard .nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -8px;
    height: 3px;
    background: #2251ff;
    border-radius: 2px;
}

#icsoe-dashboard .quarter-tabs .nav-link {
    background: transparent;
    color: #6b778c;
    font-weight: 600;
}

#icsoe-dashboard .quarter-tabs .nav-link.active {
    color: #2251ff;
    background: transparent;
    border-bottom: 3px solid #2251ff;
    border-radius: 0;
}

#icsoe-dashboard .stat-card {
    border: 0;
    border-radius: 14px;
}

#icsoe-dashboard .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 20px;
}

#icsoe-dashboard .stat-value {
    font-weight: 700;
    letter-spacing: .2px;
}

#icsoe-dashboard .stat-label {
    font-size: .95rem;
}


#invoiceDetailModal .detail-group {
    border: 1px solid #e9ecef;
    border-radius: .375rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

#invoiceDetailModal .detail-group h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #0d6efd; /* Color primario de Bootstrap */
}

#invoiceDetailModal .detail-row {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px solid #f8f9fa;
}

#invoiceDetailModal .detail-row:last-child {
    border-bottom: none;
}

#invoiceDetailModal .detail-label {
    font-weight: 500;
    color: #6c757d; /* Color de texto muted */
}

#invoiceDetailModal .detail-value {
    font-weight: 600;
    color: #212529;
    word-break: break-all;
}

#invoiceDetailModal .table {
    margin-bottom: 0;
}


/* --- Estilos para el Modal de Notificaciones --- */

/* Hace que las tarjetas de plantilla sean clickables y con efectos suaves */
.template-option {
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    position: relative; /* Necesario para el checkmark */
}

/* Efecto al pasar el mouse por encima */
.template-option:not(.active):hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #ddd;
}

/* Estilo para la plantilla ACTIVA/SELECCIONADA */
.template-option.active {
    border-color: var(--bs-primary); /* Usa el color primario de tu Bootstrap */
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.2);
}

/* Checkmark (palomita) para la plantilla activa */
.template-option.active::after {
    content: '\f00c'; /* Código del ícono de check de Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 12px;
    color: var(--bs-primary);
    font-size: 1rem;
}

/* Estilo para la vista previa del mensaje */
.template-preview {
    font-size: 0.9rem;
    max-height: 200px;
    overflow-y: auto;
}

.template-preview strong {
    color: #333;
}

.trabajador.trabajador-asignado {
    opacity: 0.5;
    background-color: #e9ecef;
    pointer-events: none; /* Evita que se pueda hacer clic */
}

.trabajador.trabajador-asignado .btn-agregar {
    display: none; /* Oculta el botón de agregar */
}

#lista-asignados .btn-quitar {
    background-color: #dc3545;
    color: white;
}