/* html {
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
} */

.table {
    font-size: 0.8rem;
}

.page-item.active .page-link {
    background: transparent;
    background-image: linear-gradient(310deg, #7928ca, #ff0080);
    color: #fff;
    border: none;
    border-radius: 50% !important;
}

.page-link:focus {
    box-shadow: none !important;
}

div.dataTables_wrapper div.dataTables_length select {
    padding-right: 1.8rem;
}

/***diseño del select2 personalizado**/
.select2-dropdown {
    z-index: 99999 !important;
}

.select2-container--default .select2-selection--single {
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
    /* background-color: #fff !important; */
    background-clip: padding-box !important;
    border: 1px solid #d2d6da !important;
    appearance: none !important;
    transition: box-shadow .15s ease, border-color .15s ease;
    height: auto !important;
    min-height: 40px !important;
    display: block !important;
    position: relative !important;
}

.select2-selection--single:focus {
    color: #495057 !important;
    background-color: #fff !important;
    border-color: #e293d3 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px #e9aede !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 8px !important;
    height: 26px !important;
    width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: block !important;
    line-height: 24px !important;
    color: #495057 !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
}

.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #d2d6da !important;
    outline: 0 !important;
    font-size: .875rem !important;
}

.select2-container--default .select2-results__option {
    color: #334155 !important;
    font-size: 0.875rem !important;
    padding: 8px 12px !important;
    text-align: left !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #cb0c9f !important;
    color: #ffffff !important;
    outline: 1px solid #cb0c9f !important;
    outline-offset: -1px;
}

.select2-results__options {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* .select2-hidden-accessible {
    width: 50% !important;
    height: 33px !important;
    font-size: 13px !important;
} */

.select2-container--default .select2-selection--multiple {
    border-radius: 0.5rem !important;
    padding: 0.2rem 0.5rem !important;
    font-size: .875rem;
    font-weight: 400;
    background-clip: padding-box;
    border: 1px solid #d2d6da !important;
    appearance: none;
    transition: box-shadow .15s ease, border-color .15s ease;
    min-height: 40px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #e293d3 !important;
    outline: 0;
    box-shadow: 0 0 0 2px #e9aede !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #fff !important;
    border: 1px solid #d2d6da !important;
    color: #67748e !important;
    border-radius: 0.4rem !important;
    padding: 2px 10px 2px 25px !important;
    font-size: 0.75rem !important;
    margin-top: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    font-weight: 600 !important;
    position: relative !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #cb0c0c !important;
    border: none !important;
    background: transparent !important;
    font-weight: bold !important;
    font-size: 14px !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: rgba(203, 12, 159, 0.1) !important;
    color: #cb0c9f !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
    margin-top: 7px !important;
    line-height: 1.4rem !important;
    color: #495057 !important;
}

/***fin diseño del select2 personalizado**/

.card-primary.card-outline {
    border-top: 3px solid #cb0c9f;
}

.card-primary.card-outline .card-header {
    padding: 0%;
}

.btn.btn-tool {
    font-family: Open Sans;
    color: #344767;
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
}

.btn.btn-tool:hover {
    box-shadow: none !important;
    transform: none !important;
}

.input-group-addon {
    padding: 8px 8px;
    font-weight: 400;
    text-align: center;
    font-size: 13px;
    border: 1px solid #ced4da;
    background-color: #e9ecef;
    color: #495057;
    border-radius: 3px;
    min-width: 36px;
}

.datepicker {
    box-shadow: 0 8px 26px -4px hsla(0, 0%, 8%, .15), 0 8px 9px -5px hsla(0, 0%, 8%, .06) !important;
}

.datepicker-switch {
    color: #cb0c9f !important;
}

.datepicker table tr td.active.active {
    background-color: #cb0c9f !important;
    border-color: #cb0c9f !important;
}

.datepicker table tr td.today {
    background-color: #cb0c9f54 !important;
    border-color: #cb0c9f !important;
}

/*diseño para lo numeros quitando las flechas*/
.cajaNumerico {
    -moz-appearance: textfield;
    appearance: textfield;
}

.cajaNumerico::-webkit-inner-spin-button {
    display: none;
}

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    overflow: hidden;
}

.navbar-vertical.navbar-expand-xs {
    overflow-x: hidden;
}

.style_laboratorio strong {
    text-align: center;
    font-size: 0.9rem;
}

.table-hover tbody tr:hover {
    background-color: #f3d8ed !important;
}

.delete-row,
.update-row,
.delete-row-udt,
.update-row-udt,
.btn-sm {
    padding: 0.5rem 0.8rem;
}

#navbarBlur {
    position: fixed;
    background-color: #e9ecef;
    z-index: 1030;
    right: 0;
    left: 0;
    transition: box-shadow .25s ease-in, background-color .25s ease-in;
}

@media (min-width: 1200px) {
    #navbarBlur {
        margin-left: 17.125rem;
        /* Puedes ajustar el valor según sea necesario */
    }
}

@media (max-width: 1200px) {
    #navbarBlur {
        margin-left: 0;
        /* Puedes ajustar el valor según sea necesario */
    }
}

section.container-fluid {
    padding-top: 5.5rem !important;
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo transparente */
}

.loading-image {
    width: 10%;
    z-index: 10000;
}

.dataTables_filter {
    display: none;
}

.icon {
    color: #344767 !important;
}

/*inicio: estilo excel*/
.btn-excel,
.btn-excel:hover {
    color: #fff;
    background-color: green;
    border-color: green;
}

.btn-outline-excel {
    color: green;
    background-color: #fff;
    border-color: green;
}

.btn-outline-excel:hover {
    color: green;
    border-color: green;
    background-color: transparent;
    opacity: .75;
}

/*fin: estilo excel*/

/*inicio: pagina scroll*/

/* ::-webkit-scrollbar {
    width: 10px;
} */

::-webkit-scrollbar-thumb {
    background-color: #777;
    border-radius: 50rem;
    border-left: 2px solid #f5f5f5;
}

/*fin: pagina scroll*/

/*ini: diseño responsive dataTable*/


div.dt-container div.dt-length select {
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {

    height: 1em;
    width: 1em;
    margin-top: 2px;
    display: inline-block;
    color: white;
    border: .15em solid white;
    border-radius: 1em;
    box-shadow: 0 0 .2em #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: "Courier New", Courier, monospace;
    line-height: 1em;
    content: "+";
    background-color: #31b131;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>td.dtr-control:before {

    height: 1em;
    width: 1em;
    margin-top: 2px;
    display: inline-block;
    color: white;
    border: .15em solid white;
    border-radius: 1em;
    box-shadow: 0 0 .2em #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: "Courier New", Courier, monospace;
    line-height: 1em;
    content: "-";
    background-color: #d33333;
}

.page-link.first,
.page-link.last {
    display: none;
}

div.table-responsive>div.dt-container>div.row {
    font-size: small;
}

/*fin: diseño responsive dataTable*/

.btn-outline-blue {
    color: #007BFF;
    border-color: #007BFF;
}

.btn-outline-blue:hover {
    color: #007BFF;
    border-color: #007BFF;
    background-color: transparent;
    opacity: .75;
    box-shadow: none;
}

/*diseño de (?)*/
.help-icon {
    position: relative;
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    color: white;
    background-color: #3498db;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 16px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
    transition: box-shadow 0.3s ease;
    margin: auto 0 0.3rem 0.2rem;
}

.help-icon:hover {
    box-shadow: 0 0 40px rgba(52, 152, 219, 1);
}

#permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Espacio entre los checkboxes */
}

.permission-label {
    width: calc(50% - 10px);
    /* Dos columnas, con un pequeño espacio entre ellas */
    font-size: 16px;
    /* Tamaño de la fuente */
    display: flex;
    align-items: center;
    /* Alinea el checkbox y el texto en el centro verticalmente */
}

.permission-checkbox {
    margin-right: 10px;
    /* Espacio entre el checkbox y el texto */
    vertical-align: middle;
    /* Alineación del checkbox */
}

/*inicio:estilo alert propio*/
.alert-propio-info {
    color: #0e748b;
    background-color: #d1f3fa;
    border-color: #b9ecf8;
    font-size: 0.8rem;
}

.alert-propio-info>i {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/*fin:estilo alert propio*/

.btn-outline-broom {
    color: #8B4513;
    border-color: #8B4513;
}

.btn-outline-broom:hover {
    color: #8B4513;
    border-color: #8B4513;
    background-color: transparent;
    opacity: .75;
    box-shadow: none;
}

.btn-outline-edit {
    color: #11aeca;
    border-color: #11aeca;
}

.btn-outline-edit:hover {
    color: #11aeca;
    border-color: #11aeca;
    background-color: transparent;
    opacity: .75;
    box-shadow: none;
}

.btn-outline-massive {
    color: #ca7c15;
    border-color: #ca7c15;
}

.btn-outline-massive:hover {
    color: #ca7c15;
    border-color: #ca7c15;
    background-color: transparent;
    opacity: .75;
    box-shadow: none;
}

.btn-outline-soft-danger {
    color: #dd3131;
    border-color: #dd3131;
}

.btn-outline-soft-danger:hover {
    color: #dd3131;
    border-color: #dd3131;
    background-color: transparent;
    opacity: .75;
    box-shadow: none;
}

.btn-outline-purple {
    color: #b239ca;
    border-color: #b239ca;
}

.btn-outline-purple:hover {
    color: #b239ca;
    border-color: #b239ca;
    background-color: transparent;
    opacity: .75;
    box-shadow: none;
}

/* Checkboxes personalizados para modal de Mermas */
.merma-checkbox {
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
    border: 2px solid #b239ca !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-block !important;
    position: relative !important;
    vertical-align: middle !important;
    transition: all 0.2s ease-in-out !important;
}

.merma-checkbox:checked {
    background-color: #b239ca !important;
    border-color: #b239ca !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.merma-checkbox:hover {
    border-color: #7928ca !important;
    box-shadow: 0 0 0 3px rgba(178, 57, 202, 0.25) !important;
}

.merma-checkbox:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(178, 57, 202, 0.35) !important;
}

.text-soft-danger {
    color: #dd3131 !important;
}

.text-edit {
    color: #11aeca !important;
}

.dt-info {
    font-size: small !important;
}

.badge-factura {
    color: #fff;
    background-color: #0047cc;
}

.badge-boleta {
    color: #fff;
    background-color: #15bfc0;
}

.badge-purple {
    color: #fff;
    background-color: #b239ca;
}

.badge.bg-finish {
    color: #fff;
    background-color: #17ad37;
}

#liveToast .toast-body {
    background-color: #f5f5f5;
}

.clic-download {
    font-size: large;
    border: 3px solid red;
    padding: 0.6rem;
    color: red;
    border-radius: 50%;
}

.clic-download:hover {
    box-shadow: 0px 0px 6px 4px #e74a3b96;
    cursor: pointer;
}

#chartdiv,
#chartdiv2 {
    width: 100%;
    height: 500px;
}

.titulo-principal {
    font-size: 2rem;
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 10px;
}

.titulo-secundario {
    font-size: 2.5rem;
    color: #1abc9c;
    font-weight: 700;
    margin-top: 0;
    letter-spacing: 1px;
}

#listadosedes .vacio {
    top: 50%;
    left: 50%;
    font-size: 4rem;
    color: rgb(0 0 0 / 24%);
    text-align: center;
    font-weight: bold;
    pointer-events: none;
}


/* Sidebar collapsed state: Hide text */
.g-sidenav-hidden .sidenav .nav-link-text {
    display: none !important;
}

/* Hide collapse icon if present */
.g-sidenav-hidden .sidenav .collapse-arrow {
    display: none !important;
}

/* Transform section headers into separators when collapsed */
/* This targets the h6 elements used for section titles */
.g-sidenav-hidden .sidenav h6 {
    color: transparent !important;
    height: 1px;
    background-color: transparent;
    border-top: 1px solid #dee2e6;
    /* Separator line color */
    margin: 1rem 1rem !important;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

/* Lock main content margin when sidebar is collapsed to prevent JS hover expansion */
.g-sidenav-hidden .main-content {
    margin-left: 7.5rem !important;
    /* Matches the collapsed state margin in efectos.js */
}

/* Ensure header also stays put if it's separate */
.g-sidenav-hidden #navbarBlur {
    margin-left: 7.5rem !important;
}

/* Hide Spektro 360 logo text when sidebar is collapsed */
.g-sidenav-hidden .sidenav .navbar-brand span {
    display: none !important;
}

/* Lock sidebar width on hover when collapsed to prevent expansion */
/* This overrides the default theme behavior */
.g-sidenav-hidden .sidenav:hover {
    max-width: 5.5rem !important;
    /* Adjust if necessary to match collapsed width */
}

/* Hide collapse arrow (pseudo-element) when collapsed */
.g-sidenav-hidden .sidenav .nav-link[data-bs-toggle="collapse"]::after {
    display: none !important;
    content: none !important;
}

/* Center icons in collapsed sidebar */
.g-sidenav-hidden .sidenav .nav-link {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove icon wrapper margin to ensure true centering */
.g-sidenav-hidden .sidenav .nav-link .icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Custom height for Product Select in 'Agregar Item' Modal */
.custom-product-select-height .select2-container .select2-selection--single {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
}

.custom-product-select-height .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 50px !important;
    padding-left: 10px !important;
}

.custom-product-select-height .select2-container .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
}

/* Botón de descuento activo (orden anulada seleccionada) */
@keyframes descuento-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 183, 3, 0.75);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 183, 3, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 183, 3, 0);
    }
}

.descuento-activo {
    background: linear-gradient(135deg, #e01e5a 0%, #ffb703 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: bold;
    animation: descuento-pulse 1.6s infinite;
}

.btn-descuento-disponible {
    color: #e01e5a !important;
    border: 1px solid #e01e5a !important;
    background-color: transparent !important;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.btn-descuento-disponible:hover {
    background-color: #e01e5a !important;
    color: #ffffff !important;
}

/* Active Menu Icon Style overrides */
.sidenav .nav-item .nav-link.active .icon i {
    color: #fff !important;
    opacity: 1 !important;
    /* Force fully opaque white */
}

.sidenav .nav-item .nav-link.active .icon {
    background-image: linear-gradient(310deg, #cb0c9f 0%, #cb0c9f 100%);
}

.row-selected {
    background-color: #ffd6f6 !important;
}

/* Fix diagonal gap and right edge white space on login page */
.oblique {
    transform: none !important;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%) !important;
    width: 100% !important;
    margin-right: 0 !important;
    right: 0 !important;
}
.oblique .oblique-image {
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* Estilos premium para zonas de arrastrar y soltar Excel (Importación Masiva) */
.upload-drop-zone {
    position: relative;
    border: 2px dashed #b0bec5 !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
    background-color: #f8f9fa;
}
.upload-drop-zone:hover {
    border-color: #3b71ca !important;
    background-color: #f0f4f8 !important;
}
.upload-drop-zone:hover .upload-icon-container {
    background-color: #d2e3fc !important;
    transform: scale(1.05);
}
.upload-icon-container {
    transition: all 0.2s ease-in-out;
}
.upload-drop-zone .excel-file-input {
    cursor: pointer;
    z-index: 2;
}

/* --- Estilos de Laboratorio --- */
#titulo {
    display: flex;
    flex-direction: column; /* Esto asegura que los elementos <h5> y <h6> se alineen verticalmente */
    justify-content: center; /* Alinea los elementos en el centro verticalmente */
    align-items: center; /* Alinea los elementos en el centro horizontalmente */
    height: 100%; /* Asegura que el contenedor tenga altura suficiente para centrar el contenido */
}

/* Estilos para imágenes */
.logo {
    width: 60px; /* Ajusta el tamaño deseado */
    height: auto; /* Mantiene la proporción de la imagen */
}

.barcode {
    width: 200px;
    height: auto;
}

.graficoImg {
    max-width: 100%;
    height: auto;
}

/* Gráfico */
.trapecio {
    width: 100px;
    height: 50px;  /* La altura de la base del trapecio */
    border-top: solid 0px transparent;
    border-right: solid 25px transparent;
    border-bottom: solid 50px rgba(116, 116, 110, 0.7); /* La base del trapecio */
    border-left: solid 25px transparent;
    position: relative; /* Cambiar a relative para que no se desplace fuera del contenedor */
    margin: 0 auto;  /* Centrado horizontalmente */
    top: 50%; /* Esto mueve la base del trapecio a la mitad del contenedor */
    transform: translateY(-50%); /* Ajusta la posición para que la base esté alineada con el centro */
}

.trapecio p {
    text-align: center;
    color: #000;
    font-size: 1.4rem;
    margin: 0;
}

.grafico {
    height: 200px;
    margin: 1rem auto;
    position: relative;
    width: 200px;
}

.recorte {
    border-radius: 50%;
    clip: rect(0px, 200px, 200px, 100px);
    height: 100%;
    position: absolute;
    width: 100%;
}

.quesito {
    border-radius: 50%;
    clip: rect(0px, 100px, 200px, 0px);
    height: 100%;
    position: absolute;
    width: 100%;
    font-family: monospace;
    font-size: 1.5rem;
}

.sombra {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3);
    border: 3px solid #000;
    height: 100%;
    position: absolute;
    width: 100%;
}

#porcion1 { transform: rotate(0deg); }
#porcion2 { transform: rotate(90deg); }
#porcion3 { transform: rotate(135deg); }
#porcion4 { transform: rotate(180deg); }
#porcion5 { transform: rotate(270deg); }
#porcion6 { transform: rotate(315deg); }

/* Colores alternos de porciones */
#porcion1 .quesito,
#porcion3 .quesito,
#porcion5 .quesito {
    background-color: rgba(255, 255, 255, 0.7);
}

#porcion2 .quesito,
#porcion4 .quesito,
#porcion6 .quesito {
    background-color: rgba(116, 116, 110, 0.7);
}

/* Rotación específica de quesitos */
#porcion1 .quesito { transform: rotate(90deg); }
#porcion2 .quesito { transform: rotate(45deg); }
#porcion3 .quesito { transform: rotate(45deg); }
#porcion4 .quesito { transform: rotate(90deg); }
#porcion5 .quesito { transform: rotate(45deg); }
#porcion6 .quesito { transform: rotate(45deg); }

/* Contenido y propiedades comunes de pseudoelementos ::after */
#porcion1 .quesito::after,
#porcion2 .quesito::after,
#porcion6 .quesito::after {
    content: attr(data-rel);
    position: absolute;
    top: 0;
    color: #000;
}

#porcion1 .quesito::after {
    left: 38%;
    line-height: 2;
    transform: rotate(-90deg);
}

#porcion2 .quesito::after {
    left: 42%;
    line-height: 1.2;
    transform: rotate(-135deg);
}

#porcion6 .quesito::after {
    left: 40%;
    transform: rotate(0deg);
}

/* Compact Circular Pagination Design */
.pagination-compact-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 0;
}

.pagination-circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    border: 1px solid #d2d6da;
    background-color: #ffffff;
    color: #495057;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.pagination-circle-btn:hover:not(:disabled):not(.active) {
    background-color: #f8f9fa;
    border-color: #cb0c9f;
    color: #cb0c9f;
}

.pagination-circle-btn.active {
    background-image: linear-gradient(310deg, #7928ca, #ff0080) !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(121, 40, 202, 0.35) !important;
}

.pagination-circle-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #e9ecef;
    color: #adb5bd;
}

.pagination-circle-dots {
    width: 28px;
    text-align: center;
    color: #6c757d;
    font-weight: bold;
    user-select: none;
}

#textObservaciones {
    height: auto !important;
}

/* ══════════════ ESTILOS DEL STEPPER INTERACTIVO (ALTO CONTRASTE) ══════════════ */
#registrar-pagos-previos-modal .previo-step-circle {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem; font-weight: 800; color: #fff;
    transition: all 0.4s ease; position: relative;
}
/* Pendiente (Gris Oscuro de Alto Contraste) */
#registrar-pagos-previos-modal .previo-step-circle.step-pending {
    background: #475569; box-shadow: none; color: #ffffff;
}
/* Activo (Naranja brillante con pulso) */
#registrar-pagos-previos-modal .previo-step-circle.step-active {
    background: linear-gradient(135deg, #d97706, #ea580c);
    box-shadow: 0 0 0 6px rgba(234,88,12,0.3), 0 0 20px rgba(234,88,12,0.5);
    animation: previoStepPulse 1.8s ease-in-out infinite;
    color: #ffffff;
}
/* Completado (Verde con check) */
#registrar-pagos-previos-modal .previo-step-circle.step-completed {
    background: linear-gradient(135deg, #15803d, #16a34a);
    box-shadow: 0 0 0 4px rgba(22,163,74,0.25);
    color: #ffffff;
}
@keyframes previoStepPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(234,88,12,0.3), 0 0 20px rgba(234,88,12,0.5); transform: scale(1); }
    50% { box-shadow: 0 0 0 10px rgba(234,88,12,0.2), 0 0 30px rgba(234,88,12,0.6); transform: scale(1.08); }
}
/* Texto del paso (Alto Contraste) */
#registrar-pagos-previos-modal .previo-step-label {
    font-size: 0.82rem; font-weight: 700; transition: color 0.3s ease; margin-top: 4px;
}
#registrar-pagos-previos-modal .previo-step-label.label-pending { color: #334155; }
#registrar-pagos-previos-modal .previo-step-label.label-active { color: #c2410c; font-weight: 800; }
#registrar-pagos-previos-modal .previo-step-label.label-completed { color: #15803d; }
/* Línea de progreso */
#registrar-pagos-previos-modal .previo-step-line-fill {
    height: 100%; transition: width 0.6s ease; border-radius: 3px;
    background: linear-gradient(90deg, #15803d, #16a34a);
}

/* Modal Approval Unified Ticket Preview */
@media (max-width: 991.98px) {
    .modal-approval-unified .ticket-preview-wrapper {
        min-height: auto !important;
        height: 220px !important;
        max-height: 240px !important;
    }

    .modal-approval-unified .ticket-preview-wrapper iframe {
        min-height: auto !important;
        height: 220px !important;
    }
}

@media (min-width: 992px) {
    .modal-approval-unified .ticket-preview-wrapper {
        min-height: 580px;
        height: 100%;
    }

    .modal-approval-unified .ticket-preview-wrapper iframe {
        min-height: 580px;
        height: 100%;
    }
}

/* Evitar acumulación de padding-right residual al cerrar modales */
body:not(.modal-open):not(.swal2-shown) {
    padding-right: 0px !important;
}

/* ==========================================================================
   ESTILOS PREMIUM: DETALLE INFO PAGO Y SUB-MODALES
   ========================================================================== */
#info-pago-modal .card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#info-pago-modal .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.bg-danger-subtle {
    background-color: #fee2e2 !important;
}

.bg-info-subtle {
    background-color: #e0f2fe !important;
}

.bg-success-subtle {
    background-color: #dcfce7 !important;
}

.bg-warning-subtle {
    background-color: #fef9c3 !important;
}

.bg-secondary-subtle {
    background-color: #f1f5f9 !important;
}

.bg-primary-subtle {
    background-color: #dbeafe !important;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 0.25rem;
}

#modalDetalleCliente .table td, 
#modalDetalleCliente .table th,
#modalEditarDescuentoOT .table td, 
#modalEditarDescuentoOT .table th {
    padding: 8px 10px;
    font-size: 0.84rem;
}

/* PDI Pre-Cierre Tab Buttons */
#pdiTab .pdi-tab-btn {
    background-color: #ffffff;
    color: #334155 !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06) !important;
    cursor: pointer !important;
}

#pdiTab .pdi-tab-btn:hover {
    background-color: #f8fafc !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.15) !important;
}

#pdiTab .pdi-tab-btn.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
    transform: translateY(-1px);
}

#pdiTab .pdi-tab-btn.active i {
    color: #ffffff !important;
}

/* ──────── ANIMACIÓN ÍCONO DE ALERTA PARPADEANTE ──────── */
@keyframes beaconBlinkAlert {
    0% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 2px rgba(234, 88, 12, 0.4)); color: #ea580c; }
    50% { transform: scale(1.22); opacity: 0.78; filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.85)); color: #dc2626; }
    100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 2px rgba(234, 88, 12, 0.4)); color: #ea580c; }
}
.beacon-blink-icon {
    animation: beaconBlinkAlert 1.2s infinite ease-in-out;
    display: inline-block;
}
.beacon-circle-wrapper {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fef3c7;
    border: 1px solid #fde68a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}
/* ==========================================================================
   ANIMACIÓN POP-UP Y RESALTADO DE COMPROBANTE CON INCONVENIENTE
   ========================================================================== */
@keyframes rowPulsePop {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.7);
        background-color: rgba(255, 235, 238, 0.95) !important;
    }
    20% {
        transform: scale(1.015);
        box-shadow: 0 6px 22px 0 rgba(233, 30, 99, 0.45);
        background-color: rgba(255, 205, 210, 1) !important;
    }
    45% {
        transform: scale(1);
        box-shadow: 0 0 16px 3px rgba(233, 30, 99, 0.35);
        background-color: rgba(255, 235, 238, 0.85) !important;
    }
    70% {
        transform: scale(1.008);
        box-shadow: 0 3px 12px 0 rgba(233, 30, 99, 0.25);
        background-color: rgba(255, 240, 243, 0.7) !important;
    }
    100% {
        transform: scale(1);
        box-shadow: none;
        background-color: transparent !important;
    }
}

.row-highlight-pulse {
    animation: rowPulsePop 3.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    position: relative;
    z-index: 10;
    outline: 2.5px solid #e91e63 !important;
    outline-offset: -1px;
    border-radius: 6px !important;
}

.row-highlight-pulse td {
    background-color: inherit !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   ANIMACIÓN PULSE PARA EL BOTÓN DE OBSERVACIÓN / DETALLE SUNAT
   ========================================================================== */
@keyframes pulseInfoRadar {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.7);
    }
    40% {
        transform: scale(1.15);
        box-shadow: 0 0 0 7px rgba(233, 30, 99, 0);
    }
    80% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
    }
}

.btn-pulse-info {
    animation: pulseInfoRadar 1.8s infinite ease-in-out;
    border-color: #e91e63 !important;
    color: #e91e63 !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.btn-pulse-info:hover {
    background-color: #e91e63 !important;
    color: #ffffff !important;
    transform: scale(1.22) !important;
    box-shadow: 0 0 10px rgba(233, 30, 99, 0.6) !important;
}

.btn-pulse-info i {
    font-size: 0.75rem !important;
    margin: 0 !important;
    line-height: 1;
}

/* ==========================================================
   POWER BI ANALYTICS DASHBOARD - ESTILOS PROFESIONALES
   ========================================================== */
.pbi-section-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pbi-slicer-btn {
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.pbi-slicer-btn:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.pbi-slicer-btn.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35);
}

.pbi-slicer-btn-sm {
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 14px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    line-height: 1.3;
}

.pbi-slicer-btn-sm:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.pbi-slicer-btn-sm.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.pbi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pbi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.pbi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.pbi-card-facturas::before { background: linear-gradient(90deg, #0ea5e9, #0284c7); }
.pbi-card-boletas::before { background: linear-gradient(90deg, #10b981, #059669); }
.pbi-card-odt::before { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.pbi-card-neto::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
.pbi-card-recaudacion::before { background: linear-gradient(90deg, #6366f1, #4f46e5); }
.pbi-card-efectivo::before { background: linear-gradient(90deg, #10b981, #059669); }
.pbi-card-transferencia::before { background: linear-gradient(90deg, #0ea5e9, #0284c7); }
.pbi-card-digitales::before { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.pbi-card-cajachica::before { background: linear-gradient(90deg, #f43f5e, #e11d48); }

/* Laboratorio KPI Card Accents */
.pbi-card-lab-pendientes::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
.pbi-card-lab-proceso::before { background: linear-gradient(90deg, #0ea5e9, #0284c7); }
.pbi-card-lab-terminados::before { background: linear-gradient(90deg, #10b981, #059669); }
.pbi-card-lab-cancelados::before { background: linear-gradient(90deg, #ef4444, #dc2626); }
.pbi-card-lab-total::before { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.pbi-card-lab-mermas::before { background: linear-gradient(90deg, #f43f5e, #e11d48); }

.pbi-kpi-title {
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
    margin-bottom: 5px;
    display: inline-block;
}

.pbi-kpi-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 3px;
}

.pbi-card-neto .pbi-kpi-value {
    color: #d97706 !important;
}

.pbi-card-recaudacion .pbi-kpi-value {
    color: #4f46e5 !important;
}

.pbi-card-cajachica .pbi-kpi-value {
    color: #e11d48 !important;
}

.pbi-kpi-subtext {
    font-size: 0.92rem;
    font-weight: 600;
    color: #334155;
}

.pbi-kpi-subtext strong {
    font-weight: 800;
    color: #0f172a;
}

.pbi-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pbi-chart-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    padding: 18px 20px;
    margin-bottom: 20px;
    height: 100%;
}

.pbi-chart-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pbi-metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.84rem;
    font-weight: 700;
}

.pbi-pill-primary { background: #eff6ff; color: #1d4ed8; }
.pbi-pill-success { background: #ecfdf5; color: #047857; }
.pbi-pill-warning { background: #fffbeb; color: #b45309; }
.pbi-pill-danger  { background: #fef2f2; color: #b91c1c; }

/* Badges con tono Soft UI / Power BI */
.pbi-badge-soft-primary {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(99, 102, 241, 0.22) !important;
    font-weight: 700 !important;
}

.pbi-badge-soft-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    font-weight: 700 !important;
}

.pbi-badge-soft-warning {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.24) !important;
    font-weight: 700 !important;
}

.pbi-badge-soft-info {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #0284c7 !important;
    border: 1px solid rgba(14, 165, 233, 0.22) !important;
    font-weight: 700 !important;
}

.pbi-badge-soft-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
    font-weight: 700 !important;
}

.pbi-badge-soft-secondary {
    background: rgba(100, 116, 139, 0.12) !important;
    color: #475569 !important;
    border: 1px solid rgba(100, 116, 139, 0.22) !important;
    font-weight: 700 !important;
}

.pbi-badge-soft-purple {
    background: rgba(139, 92, 246, 0.12) !important;
    color: #7c3aed !important;
    border: 1px solid rgba(139, 92, 246, 0.22) !important;
    font-weight: 700 !important;
}

/* ==========================================================
   MEJORA DE LEGIBILIDAD PARA TEXTOS PEQUEÑOS EN DASHBOARD
   ========================================================== */
#section-pagos .text-xxs,
#section-ventas-analytics .text-xxs,
#section-trabajos-dia .text-xxs,
#section-almacen-indicadores .text-xxs,
#section-contactos .text-xxs,
.pbi-card .text-xxs,
.pbi-chart-card .text-xxs,
.modal .text-xxs {
    font-size: 0.82rem !important;
    line-height: 1.35;
}

#section-pagos .text-xs,
#section-ventas-analytics .text-xs,
#section-trabajos-dia .text-xs,
#section-almacen-indicadores .text-xs,
#section-contactos .text-xs,
.pbi-card .text-xs,
.pbi-chart-card .text-xs,
.modal .text-xs {
    font-size: 0.88rem !important;
    line-height: 1.4;
}

#section-pagos .text-secondary,
#section-ventas-analytics .text-secondary,
#section-trabajos-dia .text-secondary,
.pbi-card .text-secondary,
.pbi-chart-card .text-secondary {
    color: #475569 !important;
}

#section-pagos .text-muted,
#section-ventas-analytics .text-muted,
#section-trabajos-dia .text-muted,
.pbi-card .text-muted,
.pbi-chart-card .text-muted {
    color: #64748b !important;
}

.pbi-section-header p.text-xs {
    font-size: 0.92rem !important;
    color: #475569 !important;
    font-weight: 500;
}

.pbi-section-header .badge {
    font-size: 0.78rem !important;
    font-weight: 800;
    padding: 5px 12px;
    letter-spacing: 0.5px;
}

.pbi-card .border-top span {
    font-size: 0.86rem !important;
    font-weight: 600;
}

.pbi-card .border-top span strong {
    font-weight: 800;
    color: #0f172a !important;
}

.card-trabajos-breakdown {
    font-size: 0.86rem !important;
    font-weight: 600;
    color: #334155 !important;
}

.card-trabajos-breakdown strong {
    font-weight: 800;
    color: #0f172a !important;
}

.pbi-chart-card thead th {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: #334155 !important;
    opacity: 1 !important;
    letter-spacing: 0.5px;
}

.pbi-chart-card tbody td {
    font-size: 0.88rem !important;
    color: #1e293b;
}

#kpiStatusTotalCount,
#kpiStatusRealizadosCount,
#kpiStatusPendientesCount {
    font-size: 0.84rem !important;
    font-weight: 700;
}

#kpiStatusTotalMonto,
#kpiStatusRealizadosMonto,
#kpiStatusPendientesMonto {
    font-size: 1rem !important;
    font-weight: 800;
}

.pbi-chart-card .border.rounded-3 {
    padding: 9px 8px !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.pbi-chart-card .border.rounded-3 span {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}

.pbi-chart-card .border.rounded-3 h6 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
}


/* PBI Dynamic Ranking in Modal */
.pbi-ranking-item {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.pbi-ranking-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateX(2px);
}

.pbi-rank-badge {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}

.pbi-rank-1 { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.pbi-rank-2 { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.pbi-rank-3 { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.pbi-rank-default { background: #f8fafc; color: #64748b; border: 1px solid #f1f5f9; }

.pbi-progress-bar-bg {
    height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.pbi-progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Estilos de Inventario y KPI de Productos Stock (Óptica) */
.card-kpi {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0,0,0,0.05);
}
.card-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}
.card-kpi.border-primary {
    border: 2px solid #5e72e4 !important;
    background-color: #f8f9fe;
}
.btnPresetMatriz {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    transition: all 0.2s ease;
}
.btnPresetMatriz:hover {
    transform: scale(1.03);
}

.group-header-row td {
    background: #f1f5f9 !important;
    border-top: 2px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}
#tblListAlmacenProductosStock tbody tr:not(.group-header-row):hover {
    background-color: #f8fafc !important;
}

/* ==========================================================================
   MODAL NAV PILLS - SEGMENTED CONTROL RESPONSIVO
   Elimina el descuadre de .moving-tab de Soft UI cuando el modal se reduce
   ========================================================================== */
.modal-nav-pills .moving-tab,
.modal .modal-nav-pills .moving-tab,
.modal .nav-pills .moving-tab {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.modal-nav-pills {
    position: relative !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 4px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
}

.modal-nav-pills .nav-item {
    flex: 1 1 200px !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: unset !important;
}

.modal-nav-pills .nav-link {
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
}

.modal-nav-pills .nav-link:hover:not(.active) {
    color: #1e293b !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
}

.modal-nav-pills .nav-link.active {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

.modal form[id*="Ingreso"] .modal-nav-pills .nav-link.active {
    color: #0f5132 !important;
}

.modal form[id*="Salida"] .modal-nav-pills .nav-link.active {
    color: #842029 !important;
}

@media (max-width: 575.98px) {
    .modal-nav-pills {
        flex-direction: column !important;
        gap: 4px !important;
    }
    .modal-nav-pills .nav-item {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Espaciado responsivo para botones de plantilla e importar Excel en cabecera de matriz */
.matrix-excel-actions {
    margin-top: 0.75rem !important;
    padding-top: 0.25rem !important;
}
@media (min-width: 768px) {
    .matrix-excel-actions {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Nitidez y eliminación de ruido/desenfoque en el menú de notificaciones */
#notification-list,
#notification-list.show {
    transform: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    perspective: none !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: optimizeLegibility !important;
    top: 100% !important;
    margin-top: 10px !important;
}

/* ========================================================
   MODAL PDI: CIERRES Y LIQUIDACIONES DE CAJA (ESTILOS)
   ======================================================== */

/* PDI Top-Level Segmented Tabs con alto contraste */
#pdiMainTabs {
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 6px !important;
}
#pdiMainTabs .nav-link {
    background: #ffffff !important;
    color: #475569 !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    padding: 10px 18px !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    cursor: pointer;
    opacity: 0.85;
}
#pdiMainTabs .nav-link:hover:not(.active) {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}
#pdiMainTabs #pdi-tab-diario.active {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    border: 2px solid #14532d !important;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.45) !important;
    opacity: 1 !important;
    transform: translateY(-1px);
}
#pdiMainTabs #pdi-tab-diario.active i,
#pdiMainTabs #pdi-tab-diario.active span {
    color: #ffffff !important;
}
#pdiMainTabs #pdi-tab-semanal.active {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: 2px solid #1e3a8a !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.45) !important;
    opacity: 1 !important;
    transform: translateY(-1px);
}
#pdiMainTabs #pdi-tab-semanal.active i,
#pdiMainTabs #pdi-tab-semanal.active span {
    color: #ffffff !important;
}

/* PDI KPI Interactive Filter Cards */
.pdi-kpi-filter-card {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
    border-radius: 10px;
}
.pdi-kpi-filter-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.09) !important;
}
.pdi-kpi-filter-card.active-filter {
    outline: 2.5px solid var(--kpi-theme-color, #2563eb) !important;
    outline-offset: 1px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
    background-color: var(--kpi-theme-bg, #f8fafc) !important;
}
.pdi-kpi-filter-card .kpi-filter-indicator {
    display: none;
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--kpi-theme-color, #2563eb);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.pdi-kpi-filter-card.active-filter .kpi-filter-indicator {
    display: inline-block;
}

/* ══════════════════════════════════════════════════════════ */
/* MODAL: CIERRE DE CAJA Y AUDITORÍA DE ABONOS (RESPONSIVE)   */
/* ══════════════════════════════════════════════════════════ */
#modalAuditoriaAbonos .modal-dialog {
    max-width: 95vw;
    height: 92vh;
    margin: 1.5rem auto;
}
#modalAuditoriaAbonos .modal-content {
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
    max-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#modalAuditoriaAbonos .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}
#modalAuditoriaAbonos .pdi-kpi-filter-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
#modalAuditoriaAbonos .pdi-kpi-filter-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
#modalAuditoriaAbonos .pdi-kpi-filter-card.active-filter {
    box-shadow: 0 0 0 2px var(--kpi-theme-color, #0ea5e9), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    background: var(--kpi-theme-bg, #f0f9ff) !important;
}
#modalAuditoriaAbonos .pdi-kpi-filter-card .kpi-filter-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--kpi-theme-color, #0ea5e9);
    color: #fff;
    display: none;
    z-index: 2;
    line-height: 1.2;
}
#modalAuditoriaAbonos .pdi-kpi-filter-card.active-filter .kpi-filter-indicator {
    display: inline-block;
}

/* Bloquear y ocultar scroll del body mientras los modales están en estado de carga */
#modalPdiCuadreSemanal.is-loading .modal-body,
#modalAuditoriaAbonos.is-loading .modal-body {
    overflow: hidden !important;
}

/* Reglas Responsive para Celulares y Tablets */
@media (max-width: 991.98px) {
    #modalAuditoriaAbonos .modal-dialog {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }
    #modalAuditoriaAbonos .modal-content {
        border-radius: 0 !important;
        height: 100% !important;
    }
    #modalAuditoriaAbonos .modal-body {
        padding: 0.75rem !important;
    }
}
@media (max-width: 575.98px) {
    #modalAuditoriaAbonos .audit-kpi-title {
        font-size: 0.68rem !important;
        max-width: 75px;
    }
    #modalAuditoriaAbonos .audit-kpi-badge {
        font-size: 0.58rem !important;
        padding: 1px 4px !important;
    }
    #modalAuditoriaAbonos .audit-kpi-value {
        font-size: 1.05rem !important;
    }
    #modalAuditoriaAbonos .audit-mass-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    #modalAuditoriaAbonos .audit-mass-actions .btn {
        flex: 1 1 auto;
        font-size: 0.72rem !important;
        padding: 0.35rem 0.45rem !important;
    }
}

/* Badge Ámbar Suave - En Proceso (Estilo Soft UI) */
.badge-amber,
.badge-en-proceso,
.badge-proceso {
    color: #b45309 !important;
    background-color: #fef3c7 !important;
}

.badge-amber[href]:focus,
.badge-amber[href]:hover,
.badge-en-proceso[href]:focus,
.badge-en-proceso[href]:hover {
    color: #78350f !important;
    text-decoration: none;
    background-color: #fde68a !important;
}