/* =================================================== ||
    FONTS
|| =================================================== */

@font-face {
    font-family: "Avenir";
    font-weight: 300;
    src: url('/fonts/AvenirLTProLight.otf') format("opentype");
}

@font-face {
    font-family: "Avenir";
    font-weight: 400;
    src: url('/fonts/AvenirLTProBook.otf') format("opentype");
}

@font-face {
    font-family: "Avenir";
    font-weight: 500;
    src: url('/fonts/AvenirLTProRoman.otf') format("opentype");
}

@font-face {
    font-family: "Avenir";
    font-weight: 600;
    src: url('/fonts/AvenirLTProMedium.otf') format("opentype");
}

@font-face {
    font-family: "Avenir";
    font-weight: 700;
    src: url('/fonts/AvenirLTProHeavy.otf') format("opentype");
}

/* =================================================== ||
    BASE & OVERRIDES
|| =================================================== */

:root {
    /* BASE PALETTE */
    --ovex-primary: #6A4595;
    --ovex-primary-accent: #5B338B;
    --ovex-primary-accent-dark: #470D8D;
    --ovex-secondary: #EDEDED;
    --ovex-secondary-accent: #3E3E3E;
    --ovex-tertiary: #212A36;
    /* COLORS */
    --ovex-black: #262626;
    --ovex-white: #F5F5F5;
    --ovex-white-faded: #EDEDED;
    --ovex-gray: #6E6E6E;
    --ovex-gray-faded: #E3E3E3;
    --ovex-lightgray: #C9C9C9;
    --ovex-red: #D40B11;
    --ovex-green: #16AA36;
    --ovex-blue: #135399;
    --ovex-yellow: #D8A406;
    /* OVERRIDES */
    --dt-row-selected: 220, 191, 255;
    --dt-row-selected-text: 0, 0, 0;
}

::-ms-clear {
    display: none !important;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Avenir' !important;
    font-weight: 400;
    line-height: 1.5;
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0 0;
    overflow-x: hidden;
    background-color: transparent !important;
    touch-action: none;
}

body {
    -webkit-user-drag: none;
    user-drag: none;
}

a {
    text-decoration: none;
}

/* =================================================== ||
    UTILITIES
|| =================================================== */

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cursor-pointer {
    cursor: pointer;
}

.h-100 {
    height: 100% !important;
}

.ico-btn-r {
    margin-right: 5px;
}

.uppercase {
    text-transform: uppercase;
}

.bg-white {
    background-color: var(--ovex-white) !important;
}

.red {
    color: var(--ovex-red) !important;
}

.green {
    color: var(--ovex-green) !important;
}

.icon-xxl {
    font-size: 80px;
}

/* =================================================== ||
    GO TOP BUTTON
|| =================================================== */

.go-top-button {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: var(--ovex-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ovex-white);
    font-size: 20px;
    cursor: pointer;
    position: fixed;
    bottom: 15px;
    right: 30px;
    opacity: 0;
    z-index: 8;
    transition: opacity 150ms linear;
    pointer-events: none;
}

    .go-top-button.visible {
        opacity: 1;
        pointer-events: all;
    }

/* =================================================== ||
    TOASTS
|| =================================================== */

.toasts-container-parent > div {
    z-index: 2200;
    right: 0px;
}

.toasts-container-parent .btn-close {
    background-color: var(--ovex-white);
    padding: 6px;
}

.toast-icon {
    font-size: 18px;
    position: relative;
    top: 2px;
    margin-right: 10px;
}

.toast-success .toast-header {
    background-color: var(--ovex-green);
    color: var(--ovex-white);
    text-transform: uppercase;
}

.toast-info .toast-header {
    background-color: var(--ovex-blue);
    color: var(--ovex-white);
    text-transform: uppercase;
}

.toast-warning .toast-header {
    background-color: var(--ovex-yellow);
    color: var(--ovex-white);
    text-transform: uppercase;
}

.toast-error .toast-header {
    background-color: var(--ovex-red);
    color: var(--ovex-white);
    text-transform: uppercase;
}

/* =================================================== ||
    LOADER
|| =================================================== */

.blockOverlay ~ .blockOverlay {
    display: none !important;
}

.blockUI.blockMsg ~ .blockUI.blockMsg {
    display: none !important;
}

.blockUI.blockOverlay {
    opacity: 0.8 !important;
}

.anitamed-loader {
    display: inline-grid;
    justify-items: stretch;
}

    .anitamed-loader span {
        margin-top: 25px;
        font-size: 25px;
    }

    .anitamed-loader img {
        animation: pulseLoader 2s infinite;
        width: 175px;
    }

/* =================================================== ||
    LOGIN SCREEN
|| =================================================== */

.card-dark-custom {
    background-color: var(--ovex-tertiary);
    border-radius: 15px;
    margin: 50px 0px;
}

.login-btn {
    font-size: 18px;
    text-transform: uppercase;
}

.login-logo {
    width: 150px;
    height: 150px;
}

#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* =================================================== ||
    LAYOUT
|| =================================================== */

/* WRAPPERS */
.wrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: stretch;
}

#content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden !important;
    padding: 0px 0px 0px 300px;
    position: absolute;
    left: 0px;
    transition: padding 0.3s ease, left 0.3s ease;
}

    #content #container {
        padding: 0px 25px 25px !important;
    }

    #content .nav-ico {
        font-size: 20px;
        margin-top: 4px;
        margin-right: 20px;
        cursor: pointer;
    }

/* SIDEBAR */

#sidebar {
    width: 300px;
    min-width: 300px;
    height: 100%;
    background: var(--ovex-tertiary);
    color: var(--ovex-white);
    transition: left 0.3s ease;
    position: fixed;
    left: 0px;
    z-index: 1040;
}

    #sidebar .sidebar-header {
        padding: 16px;
        height: 100px;
        border-bottom: 1.5px solid var(--ovex-white-faded);
    }

        #sidebar .sidebar-header .sidebar-logo {
            height: 67px;
            background: url(/images/site/ovex-ico-w.png);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }

    #sidebar .sidebar-footer {
        height: 65px;
        border-top: 1.5px solid var(--ovex-white-faded);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #sidebar .sidebar-footer a {
            background-color: var(--ovex-primary);
            padding: 5px 50px 2px 50px;
            margin: 10px;
            text-align: center;
            border-radius: 5px;
            font-size: 24px !important;
            cursor: pointer;
        }

    #sidebar .sidebar-menu {
        height: calc(100% - 165px);
        position: relative;
        margin: 0;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

        #sidebar .sidebar-menu ul.components {
            width: 100%;
            margin-bottom: 0px;
            padding: 0px !important;
            list-style: none !important;
        }

        #sidebar .sidebar-menu ul li {
            content: '';
            width: 100%;
            background: var(--ovex-tertiary);
        }

            #sidebar .sidebar-menu ul li a {
                padding: 15px 0px 15px 25px;
                display: block;
                width: 100%;
                color: var(--ovex-white);
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0.15px;
                line-height: 24px;
            }

            #sidebar .sidebar-menu ul li:hover, .menu-active {
                color: var(--ovex-white);
                background: var(--ovex-primary) !important;
            }

    #sidebar .nav-ico-dd {
        width: auto !important;
        position: absolute;
        left: 235px;
    }

    #sidebar .dropdown-toggle::after {
        display: none !important;
    }

    #sidebar .list-submenu {
        border: none !important;
        width: 100%;
    }

        #sidebar .list-submenu a {
            margin-left: 35px !important;
            padding-left: 15px !important;
            border-left: 1.5px solid var(--ovex-white-faded);
        }

    #sidebar .dropdown-toggle::after {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }

    #sidebar .menu-icon {
        height: 20px;
        width: 20px;
        margin-right: 15px;
        position: relative;
        top: 2px;
    }

/* NAVBAR */

#content .navbar {
    background-color: var(--ovex-white) !important;
    box-shadow: unset !important;
    padding: 25px 25px 0px 25px !important;
    border: none;
    border-bottom: 1px solid var(--ovex-secondary-accent);
    padding-bottom: 20px !important;
    position: sticky;
    top: 0;
    z-index: 99;
    width: 100%;
}

    #content .navbar .container-fluid {
        padding: 0;
    }

#navbar-menu-history {
    display: flex;
    align-items: center;
    color: var(--ovex-secondary-accent);
}

    #navbar-menu-history h3 {
        font-weight: 800;
        line-height: 1;
        margin-bottom: 0px;
    }

    #navbar-menu-history svg {
        font-size: 24px;
        margin-top: 3px;
        margin-right: 15px;
        cursor: pointer;
    }

    #navbar-menu-history .home-icon svg {
        margin-top: 0px !important;
    }

#mobile-title {
    border-bottom: 1px solid var(--ovex-secondary-accent);
    display: none;
}

    #mobile-title h2 {
        font-weight: 800;
        line-height: 1;
        margin-bottom: 0px;
        text-align: center;
        padding: 25px 15px;
    }

#sidevar-button {
    color: var(--ovex-white);
    background-color: var(--ovex-tertiary);
    border-radius: 10px;
    padding: 10px;
    height: 32px;
    width: 32px;
    display: none;
}


/* NOTIFICATIONS */

#alert-icon, #alert-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    #alert-icon a {
        margin-right: 30px;
    }

    #alert-icon svg {
        font-size: 30px;
        cursor: pointer;
        color: var(--ovex-secondary-accent);
    }

    #alert-icon.new .badge-notifications {
        animation: pulse 1s ease-out;
        animation-iteration-count: infinite;
    }

.badge-notifications {
    position: absolute;
    top: -5px;
    left: 15px;
    padding: 1px 6px;
    font-size: 18px;
    line-height: 21px;
    height: 22px;
    background: var(--ovex-red);
    color: var(--ovex-white);
    border-radius: 11px;
    white-space: nowrap;
}

/* SITE CONFIG */

#site-config-icon {
    font-size: 30px;
    cursor: pointer;
    margin-right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ovex-secondary-accent);
}

/* =================================================== ||
    HOME SCREEN
|| =================================================== */

.card-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .card-report-header h6 {
        margin-bottom: 0px;
    }

    .card-report-header button {
        width: 35px;
        height: 35px;
        padding: 0px;
    }

        .card-report-header button svg {
            font-size: 21px;
            margin-top: 5px;
        }

#monthly-users-chart {
    width: 100%;
    height: 400px;
}

#monthly-quotes-chart {
    width: 100%;
    height: 400px;
}

#quotes-chart {
    width: 100%;
    height: 450px;
}

#leased-stats-chart {
    width: 100%;
    height: 400px;
}

#parametric-stats-chart {
    width: 100%;
    height: 400px;
}

#leasing-stats-chart {
    width: 100%;
    height: 400px;
}

/* =================================================== ||
    ANIMATIONS
|| =================================================== */

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.15);
    }

    20% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseLoader {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(0.9);
    }
}


.vehicleKmsNotice {
    margin-top: 25px;
    display: inline-block;
}

    .vehicleKmsNotice, .vehicleKmsNotice > span {
        color: var(--ovex-gray);
        font-weight: 600 !important;
    }

#vehicleKms {
    height: 30px;
}

    .progress-bar-ovex {
        background-color: var(--ovex-primary) !important;
    }







/* =================================================== ||
    FORM DATEPICKER
|| =================================================== */
.clear-datepicker {
    position: absolute;
    top: 8px;
    right: 14px;
    font-size: 30px;
    cursor: pointer;
    visibility: hidden;
}

/* FLIPPER */

.flip-card {
    background-color: transparent;
    perspective: 2500px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card.show-back .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: var(--ovex-white);
}

.flip-card-back {
    background-color: var(--ovex-white);
    transform: rotateY(180deg);
}

    .flip-card-front img, .flip-card-back img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: translate(-50%, -50%);
    }


/* SEARCH DATATABLES STYLE */

.dt-search input {
    width: 300px !important;
    height: 46px !important;
    background-color: var(--ovex-secondary) !important;
    border: 1px solid var(--ovex-gray-faded) !important;
    border-radius: 10px !important;
    color: var(--ovex-black) !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 18px;
}

/* OTHER STYLES */

.divider {
    display: flex;
    align-items: center;
    margin: 0px 0px 25px 0px;
    color: var(--ovex-gray);
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
    border-block-start: 0 var(--ovex-gray);
}

    .divider::before {
        width: calc(0.05* 100%);
        position: relative;
        border-block-start: 1px solid var(--ovex-white);
        border-block-start-color: inherit;
        border-block-end: 0;
        transform: translateY(50%);
        content: '';
    }

    .divider::after {
        position: relative;
        border-block-start: 1px solid var(--ovex-white);
        border-block-start-color: inherit;
        border-block-end: 0;
        transform: translateY(50%);
        content: '';
        width: calc(0.95* 100%);
    }

    .divider > h6 {
        margin: 0px 15px;
    }

.form-floating label, .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ovex-gray) !important;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--ovex-red) !important;
}

.parsley-type {
    margin-top: 5px !important;
}

.bg-ovex {
    background-color: var(--ovex-tertiary) !important;
}

/*SCROLLBAR MENU*/

.sidebar-menu::-webkit-scrollbar {
    width: 4px;
}

.sidebar-menu::-webkit-scrollbar-track {
    background: transparent !important;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: var(--ovex-gray);
}

    .sidebar-menu::-webkit-scrollbar-thumb:hover {
        background: var(--ovex-gray-faded);
    }

/* TAB STRIPE */

.menu-stripe {
    margin: 0px -25px 0px -25px !important;
    border-bottom: 1px solid var(--ovex-gray-faded);
    border-top: 1px solid var(--ovex-gray-faded);
    background-color: var(--ovex-secondary);
}

    .menu-stripe button {
        padding: 25px 30px;
        cursor: pointer;
        font-weight: 800;
        font-size: 18px;
        transition: all 100ms linear;
        background-color: unset !important;
        border: unset !important;
        color: var(--ovex-blue) !important;
        border-radius: 0 !important;
        box-shadow: unset !important;
        outline: none !important;
    }

        .menu-stripe button.active, .menu-stripe button:hover {
            color: var(--ovex-white) !important;
            background-color: var(--ovex-primary) !important;
        }

/* ACTIONS BAR */

.actions-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
}

    .actions-btns button {
        height: 46px;
    }

/* CUSTOM ICONS */

[aria-expanded="false"].nav-ico-dd .arrow {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrow {
    border: solid var(--ovex-white);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    align-items: end;
    transition: transform 0.3s ease;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* SELECT2 */

.select2-container--default .select2-selection {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.select2-dropdown {
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.select2-selection__rendered {
    padding-left: 12px;
}

.select2-search__field {
    outline: none !important;
}

.select2-container.select2-container--open {
    z-index: 2100 !important;
}

.select2-container .select2-selection--single {
    height: 58px !important;
}

.select2-container .select2-selection--multiple {
    min-height: 58px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 58px !important;
}

.select2-search.select2-search--inline .select2-search__field {
    margin-top: 18px;
    padding-left: 8px;
}

.select2-container--default .select2-selection .select2-selection__arrow {
    display: none !important
}

.select2-selection__clear span {
    font-size: 38px;
    display: block;
    margin-top: -3px !important;
    margin-right: -10px !important;
    font-weight: bold;
}

.select2-selection--multiple .select2-selection__clear span {
    margin-top: -7px !important;
    margin-right: 0px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--ovex-blue) !important;
    outline: 0 !important;
}

.select2-container--open .select2-selection {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--ovex-blue);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.is-invalid ~ .select2-container--open .select2-selection {
    box-shadow: 0 0 0 .25rem rgba(0,0,0,0.50) !important;
}

.select2-dropdown--below {
    box-shadow: -1px 6px 21px -4px rgba(0,0,0,0.50);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 16px;
}

/* FILEPOND */

.filepond {
    margin-bottom: 0px !important;
}

.filepond--credits {
    display: none !important;
}

.filepond-desc {
    color: var(--ovex-gray);
}

/* PARSLEY */

.p-errors p {
    margin-bottom: 0px !important;
    margin-top: 5px;
    margin-left: 3px;
    color: var(--ovex-red);
    font-size: 12px;
    font-weight: 400;
}

.is-invalid ~ .select2-container--default .select2-selection {
    border-color: var(--bs-form-invalid-border-color) !important;
}

/* BUTTONS */

.col-btn {
    display: flex;
    justify-content: flex-end;
}

    .col-btn > button {
        width: 150px;
        height: 58px;
    }

.btn-primary {
    background-color: var(--ovex-primary) !important;
    border-color: var(--ovex-primary) !important;
}

    .btn-primary:hover {
        background-color: var( --ovex-primary-accent) !important;
        border-color: var(--ovex-primary-accent) !important;
    }

/* TABLA HISTORIAL EN MODAL */
#historialTableBody .badge {
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 25px;
    text-align: center;
}

/* LEYENDA DE ESTADOS */
.modal-body .card h6.text-ovex {
    color: var(--bs-ovex) !important;
    border-bottom: 2px solid var(--bs-ovex-light);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* RESPONSIVE PARA TABLA DE HISTORIAL */
@media (max-width: 768px) {
    .modal-dialog.modal-xl {
        max-width: 95%;
        margin: 1rem auto;
    }

    #historialTableBody .badge {
        font-size: 0.7rem;
        min-width: 20px;
    }

    #historialPagosModal .modal-dialog {
        max-width: 95%;
        margin: 0.5rem;
    }

    #historialPagosModal .table {
        font-size: 0.75rem;
    }

        #historialPagosModal .table th,
        #historialPagosModal .table td {
            padding: 0.25rem 0.1rem;
        }

    #historialPagosModal .badge {
        font-size: 0.65rem;
        min-width: 1.2rem;
        padding: 0.125rem 0.25rem;
    }
}

/* TABLES */

table.dataTable {
    border-bottom: 1px solid var(--ovex-gray-faded) !important;
}

table td, table th {
    background-color: var(--ovex-white) !important;
}

table thead tr, table th {
    background-color: var(--ovex-primary) !important;
    color: var(--ovex-white) !important;
    border: none !important;
}

table.dataTable th {
    text-align: left !important;
}

.dt-container > div:first-child {
    margin-top: 0 !important;
}

div.dt-container .dt-paging li {
    margin-right: 3px;
}

    div.dt-container .dt-paging li:last-of-type {
        margin-right: 0px !important;
    }

div.dt-container .dt-paging .dt-paging-button a {
    background: none !important;
    background-color: var(--ovex-white);
    color: var(--ovex-tertiary);
    border: none !important;
    border-radius: 100% !important;
    box-shadow: none !important;
    width: 40px;
    height: 40px;
    text-align: center;
    padding: 8px 0px 0px 0px;
}

    div.dt-container .dt-paging .dt-paging-button a:hover {
        background-color: var(--ovex-gray) !important;
        color: var(--ovex-white) !important;
    }

div.dt-container .dt-paging .dt-paging-button.active a {
    background-color: var(--ovex-tertiary) !important;
    color: var(--ovex-white) !important;
}

div.dt-container .dt-paging .dt-paging-button.disabled {
    cursor: not-allowed !important;
}

    div.dt-container .dt-paging .dt-paging-button.disabled a {
        color: var(--ovex-gray) !important;
    }

.dt-buttons {
    height: 100%;
}

    .dt-buttons button {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

table.table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.4)
}

.dt-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none !important;
    appearance: none !important;
}

.disable-buttons .buttons-excel, .disable-buttons .buttons-pdf {
    display: none !important;
}

.disable-buttons .buttons-select-none {
    border-top-right-radius: var(--bs-btn-border-radius) !important;
    border-bottom-right-radius: var(--bs-btn-border-radius) !important;
}

.button-col {
    text-align: center;
    vertical-align: middle;
}

    .button-col > div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        height: 100%;
    }

    .button-col button {
        width: 50px;
        padding: 0px 15px !important;
        font-size: 18px;
    }

/* OTROS */

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
}

    a.link,
    a.link:hover,
    a.link:focus {
        color: var(--ovex-blue) !important;
        text-decoration: none;
        cursor: pointer;
    }

.img-box {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 10px;
}

    .img-box.medium {
        width: 80px;
        height: 80px;
    }

    .img-box.profile-client {
        width: 80px;
        height: 80px;
    }

    .img-box.full {
        width: 100%;
        height: 100%;
    }

/* OTHER DATA FORM ELEMENTS */

input:not(.rangepicker)[readonly] {
    background-color: var(--ovex-white) !important;
    color: var(--ovex-gray) !important;
    cursor: not-allowed;
    border: 1px solid var(--ovex-gray-faded);
}

    input:not(.rangepicker)[readonly] ~ label::after {
        background-color: var(--ovex-white) !important;
        color: var(--ovex-gray) !important;
    }

.radio-selectors > div:nth-child(1) {
    padding-right: 0px;
}

    .radio-selectors > div:nth-child(1) label {
        width: 100%;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

.radio-selectors > div:nth-child(2) {
    padding-left: 0px;
}

    .radio-selectors > div:nth-child(2) label {
        width: 100%;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }

input[type=checkbox] {
    opacity: 1;
    border: 2px solid var(--ovex-black);
    width: 20px;
    height: 20px;
}

.form-check-label {
    margin-top: 3px;
    margin-left: 5px;
}

.tree-form {
    list-style-type: none;
    padding-left: 0;
}

    .tree-form li {
        list-style-type: none;
        position: relative;
    }

        .tree-form li::before {
            content: "";
            position: absolute;
            left: -23px;
            top: 0;
            height: 100%;
            width: 2px;
            background-color: var(--ovex-black);
        }

    .tree-form > li::before {
        background: none !important;
    }

/* CUSTOM CSS */

.text-bg-ovex {
    color: var(--ovex-white) !important;
    background-color: var(--ovex-tertiary) !important;
}

.rotating-icon {
    display: inline-block;
    animation: rotate 2s linear infinite;
}


/* LEASING PACKAGES */

.card.has-error .card-header {
    background-color: var(--ovex-white);
    border-color: var(--ovex-red);
    color: var(--ovex-white);
}

    .card.has-error .card-header svg {
        color: var(--ovex-white);
    }

/* CARTYPE SCREEN */

#cartypes {
    padding-top: 25px;
}

/* LEASING SCREEN */

.residual-card {
    max-height: 415px !important;
}

    .residual-card .card-body {
        padding: 0 !important;
        overflow-y: scroll;
    }

    .residual-card .add-button {
        font-size: 30px;
        position: absolute;
        right: 7px;
        top: 5px;
        color: var(--ovex-primary);
        cursor: pointer;
    }

    .residual-card .remove-button {
        position: absolute;
        top: 16px;
        right: 12px;
        font-size: 40px;
        color: var(--ovex-red);
        cursor: pointer;
        display: none;
    }

    .residual-card .input-residual {
        padding-right: 44px;
    }

    .residual-card .input-list li:last-child .remove-button {
        display: inline-block;
    }

#months-leasing, #months-example {
    padding: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--ovex-gray-faded);
}

.example-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vehicle-span {
    width: 600px;
    padding-left: 15px;
}


/* QUOTES */

.carousel-vehicles, .carousel-vehicles .carousel-inner {
    height: 400px;
    border-bottom: 1px solid var(--ovex-gray-faded);
}

    .carousel-vehicles .carousel-inner {
        background-color: var(--ovex-secondary);
    }

    .carousel-vehicles .carousel-item {
        height: 100%;
    }

        .carousel-vehicles .carousel-item img {
            height: 100%;
            width: auto;
            object-fit: contain;
            display: block;
            margin: auto;
        }

    .carousel-vehicles svg {
        background-color: black;
        color: white;
        border-radius: 100%;
        width: 50px;
        height: 50px;
        padding: 8px;
    }

    .carousel-vehicles .carousel-control-prev {
        left: 0px;
    }

    .carousel-vehicles .carousel-control-after {
        right: 0px;
    }

/* VEHICLE DETAIL */

.vehicle-description hr {
    border-top-color: var(--ovex-gray-faded);
    border-top-width: 1px;
    opacity: 1;
}

.vehicle-description .title {
    font-weight: 800;
    margin-bottom: 0px;
}

.vehicle-description .sub-title {
    font-weight: 400 !important;
    margin-bottom: 0px;
}

#map {
    height: 600px;
    z-index: 1;
}

.awesome-marker svg {
    font-size: 18px;
    margin-top: 8px;
}

.badge-insurance {
    position: absolute;
    right: 15px !important;
    left: auto !important;
    top: -15px !important;
    padding: 8px 14px !important;
    height: 30px !important;
}

.badge-payment {
    position: absolute;
    top: -5px;
    left: 15px;
    padding: 1px 5px;
    font-size: 16px;
    line-height: 22px;
    height: 22px;
    color: var(--ovex-white);
    border-radius: 11px;
    white-space: nowrap;
}

.amount-row .badge {
    top: -2px;
    left: 0px;
}

.amount-title {
    font-weight: bold;
    position: relative;
    margin-top: 15px;
}

    .amount-title::after {
        content: "";
        width: 50px;
        height: 3px;
        display: block;
        position: absolute;
        top: -17px;
        left: 50%;
        margin-left: -25px;
        background-color: var(--ovex-primary);
    }

/* CLIENTS DETAIL */

.menu-navs {
    margin: 0px -25px 0px -25px !important;
    border-top: 1px solid var(--ovex-gray);
    border-bottom: 1px solid var(--ovex-gray);
    background-color: var(--ovex-white);
}

    .menu-navs button {
        padding: 25px 30px;
        cursor: pointer;
        font-weight: 800;
        font-size: 18px;
        transition: all 100ms linear;
        background-color: unset !important;
        border: unset !important;
        color: var(--ovex-blue) !important;
        border-radius: 0 !important;
        box-shadow: unset !important;
        outline: none !important;
    }

        .menu-navs button.active, .menu-navs button:hover {
            color: var(--ovex-white) !important;
            background-color: var(--ovex-primary) !important;
        }

.nav-tabs-modal {
    margin: 0px !important;
}

.client-description hr {
    border-top-color: var(--ovex-gray-faded);
    border-top-width: 1px;
    opacity: 1;
}

.client-description .title {
    font-weight: 800;
    margin-bottom: 0px;
}

.client-description .sub-title {
    font-weight: 400 !important;
    margin-bottom: 0px;
}

.card-device {
    border: 1px solid var(--ovex-gray-faded);
    border-radius: 10px;
}

    .card-device .card-img-top {
        border-bottom: 1px solid var(--ovex-gray-faded);
    }

        .card-device .card-img-top svg {
            font-size: 80px;
            padding: 25px;
        }

.ine-card {
    width: 700px;
    height: 443px;
}

.table-ine {
    margin-bottom: 0px;
    margin-top: 15px;
}

    .table-ine tbody {
        border-top: 1px solid var(--ovex-gray);
        border-bottom: 1px solid var(--ovex-gray);
    }

    .table-ine th {
        white-space: nowrap;
        width: 20%;
    }

/* CLIENT DETAIL PARAMETRIC */

.wrapper_parametrico {
    display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
}

    .wrapper_parametrico > section {
        margin-bottom: 25px
    }

    .wrapper_parametrico > div {
        margin-bottom: 50px
    }

        .wrapper_parametrico > div:last-of-type {
            margin-bottom: 0px
        }

.accesos_rapidos {
    display: flex;
    grid-gap: 30px;
    flex-wrap: wrap;
    padding: 30px 0px 15px 5px;
    position: sticky;
    top: 99px;
    z-index: 4;
    margin: 0px -4px;
    background-color: var(--ovex-white);
    box-shadow: 0 3px 1px -2px gray;
}

.accesos_rapidos__wrpp {
    display: flex;
    align-items: center;
    grid-gap: 5px;
    font-size: 16px;
    cursor: pointer;
}

.accesos_rapidos__wrpp__icon {
    color: var(--ovex-primary);
}

.accesos_rapidos__wrpp__p {
    margin: 0px;
    font-weight: bold;
}

.parametric-error svg {
    font-size: 80px;
}

.parametric-error span {
    display: block;
    font-weight: 600;
    font-size: 20px;
}

#flujo-efectivo-chart {
    width: 100%;
    height: 600px;
}

#ventas-chart {
    width: 100%;
    height: 600px;
}

.dot-table-cascade {
    margin-bottom: 2px;
    margin-right: 10px;
    font-size: 10px;
    color: var(--ovex-gray);
}

.arrow-table-cascade {
    margin-right: 10px;
    font-size: 18px;
    color: var(--ovex-gray);
}

/* BLUEBOOK SCREEN */

#months {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: var(--ovex-white);
    padding: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--ovex-gray-faded);
}

.card-leasing > div {
    transition: all 0.3s linear;
    cursor: pointer;
}

.card-leasing:hover div, .card-leasing.active div {
    background-color: var(--ovex-primary) !important;
    color: var(--ovex-white) !important;
}

#packages .card-header {
    display: flex;
    justify-content: space-between;
}

#packages > div {
    margin-bottom: 15px;
}

    #packages > div:last-of-type {
        margin-bottom: 0px;
    }

/* =================================================== ||
    DARK MODE
|| =================================================== */

/* OVERRIDES */

html.dark-mode:root {
    --dt-row-selected: 120, 120, 120;
    --dt-row-selected-text: 255, 255, 255;
}

html.dark-mode .table {
    --bs-emphasis-color: var(--ovex-black) !important;
    --bs-table-border-color: var(--ovex-gray) !important;
}

html.dark-mode .card {
    --bs-card-bg: var(--ovex-black) !important;
}

/* LOGIN */

html.dark-mode body {
    background-color: var(--ovex-black) !important;
}

html.dark-mode .card-dark-custom {
    background-color: var(--ovex-lightgray) !important;
}

    html.dark-mode .card-dark-custom p, html.dark-mode .card-dark-custom a {
        color: var(--ovex-black) !important;
    }

html.dark-mode .login-logo {
    filter: brightness(0) !important;
}

html.dark-mode .form-floating label {
    color: var(--ovex-gray-faded) !important;
}

/* LAYOUT */

html.dark-mode #content .navbar {
    background-color: var(--ovex-secondary-accent) !important;
    border-color: var(--ovex-gray-faded) !important;
}

html.dark-mode #navbar-menu-history, html.dark-mode #alert-icon svg, html.dark-mode #site-config-icon {
    color: var(--ovex-white);
}

/* MENUS */

html.dark-mode .menu-navs {
    background-color: var(--ovex-lightgray) !important;
}

/* TABLES */

html.dark-mode table {
    border-bottom-color: var(--ovex-gray) !important;
}

    html.dark-mode table tbody td, html.dark-mode table tbody th {
        background-color: var(--ovex-lightgray) !important;
    }

table.dataTable.table-bordered th:last-child, table.dataTable.table-bordered td:last-child {
    border-right: 1px solid var(--ovex-gray);
}

html.dark-mode div.dt-container .dt-paging .dt-paging-button a {
    color: var(--ovex-lightgray);
}

html.dark-mode div.dt-container .dt-paging .dt-paging-button.active a {
    color: var(--ovex-black) !important;
    background-color: var(--ovex-lightgray) !important;
}

/* CARDS */

html.dark-mode .home .card-body {
    background-color: var(--ovex-lightgray) !important;
}

/* TOASTS */

html.dark-mode .toast-header {
    border-bottom-color: var(--ovex-gray-faded) !important;
}

html.dark-mode .toast {
    color: var(--ovex-black) !important;
    background-color: var(--ovex-gray-faded) !important;
}

/* INPUTS */

html.dark-mode input:not(.rangepicker)[readonly] ~ label::after {
    background-color: #76787b !important;
}

html.dark-mode input[readonly] {
    opacity: 0.4;
}

html.dark-mode input.rangepicker {
    opacity: 1;
}

html.dark-mode input[type=checkbox] {
    border: 2px solid var(--ovex-lightgray);
}

html.dark-mode .filepond--panel-root {
    background-color: var(--ovex-lightgray);
}

html.dark-mode .dt-search input, html.dark-mode .select2-selection, html.dark-mode .select2-dropdown {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-body-bg) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder, html.dark-mode .select2-selection__rendered {
    color: var(--ovex-gray-faded) !important;
}

html.dark-mode .select2-container--default .select2-results__option--selected {
    color: var(--ovex-black) !important;
    background-color: var(--bs-body-bg) !important;
}

html.dark-mode .select2-selection__clear span {
    color: var(--ovex-lightgray) !important;
}

html.dark-mode .select2-selection__choice__display {
    color: var(--ovex-black) !important;
}

html.dark-mode .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--ovex-lightgray) !important;
}

/* BUTTONS */

html.dark-mode .card-dark-custom button {
    color: var(--ovex-black) !important;
    border-color: var(--ovex-black) !important;
}

    html.dark-mode .card-dark-custom button:hover, html.dark-mode .card-dark-custom button:active {
        background-color: var(--ovex-black) !important;
        color: var(--ovex-white) !important;
    }

html.dark-mode .home .btn-outline-secondary {
    color: var(--ovex-white) !important;
    border-color: var(--ovex-white) !important;
}

    html.dark-mode .home .btn-outline-secondary:hover, html.dark-mode .home .btn-outline-secondary:active {
        background-color: var(--ovex-white) !important;
        color: var(--ovex-black) !important;
    }

html.dark-mode table .btn-outline-secondary {
    color: var(--ovex-black) !important;
    border-color: var(--ovex-black) !important;
}

    html.dark-mode table .btn-outline-secondary:hover, html.dark-mode table .btn-outline-secondary:active {
        background-color: var(--ovex-black) !important;
        color: var(--ovex-white) !important;
    }

html.dark-mode .btn-outline-dark {
    color: var(--ovex-white) !important;
    border-color: var(--ovex-gray) !important;
}

    html.dark-mode .btn-outline-dark:hover, html.dark-mode table .btn-outline-dark:active {
        background-color: var(--ovex-gray) !important;
        color: var(--ovex-white) !important;
    }

/* FIXES */

html.dark-mode #grid-masonry h3, html.dark-mode #grid-masonry h4 {
    color: var(--ovex-black) !important;
}

html.dark-mode #months, html.dark-mode .accesos_rapidos {
    background-color: var(--ovex-black) !important;
}

html.dark-mode .card .anitamed-loader img {
    filter: invert(1) !important;
}

/* =================================================== ||
    MEDIAQUERIES
|| =================================================== */
@media only screen and (min-width: 1200px) {
    /*SCROLLBAR*/

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: var(--ovex-gray-faded);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--ovex-gray);
    }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--ovex-gray-faded);
        }
}

@media only screen and (max-width: 1366px) {
    #sidebar {
        position: fixed;
        left: -300px;
    }

    #content {
        padding: 0px;
    }

    #navbar-menu-history {
        display: none;
    }

    #mobile-title {
        display: block;
    }

    #sidevar-button {
        display: block;
    }

    .wrapper.open #sidebar {
        left: 0px !important;
    }

    .wrapper.open #content {
        left: 285px !important;
    }
}

@media only screen and (max-width: 1199px) {
    .residual-card {
        max-height: unset !important;
    }

    .img-box.profile-client {
        width: 100px;
        height: 100px;
    }
}

@media only screen and (max-width: 992px) {
    .carousel-vehicles .carousel-control-prev {
        left: 10px;
    }

    .carousel-vehicles .carousel-control-after {
        right: 10px;
    }

    .carousel-vehicles svg {
        background-color: unset !important;
        color: var(--ovex-black) !important;
    }
}

@media only screen and (max-width: 768px) {
    .actions-btns button {
        height: 58px;
        width: 100%;
    }

    .disable-buttons .buttons-select-all {
        margin-right: 0px;
    }

    .vehicle-span {
        width: 400px;
        padding-left: 15px;
    }

    .dt-buttons button {
        height: 58px;
    }

    .dt-search input {
        height: 58px !important;
    }

    .dt-buttons {
        padding-bottom: 15px;
    }

    .img-box.profile-client {
        width: 160px;
        height: 160px;
    }

    .accesos_rapidos {
        position: initial !important;
    }
}

@media only screen and (max-width: 576px) {
    #sidebar {
        position: fixed;
        left: -250px;
        width: 250px;
        min-width: 250px;
    }

    .wrapper.open #content {
        left: 250px !important;
    }

    #sidebar .nav-ico-dd {
        left: 190px;
    }

    .dt-buttons button {
        border-radius: var(--bs-btn-border-radius) !important;
        width: 100%;
        height: 58px;
    }

        .dt-buttons button:first-of-type {
            margin-bottom: 10px;
        }

    .card-leasing {
        font-size: 12px;
    }

        .card-leasing .card-body, .card-leasing .card-footer {
            padding: 5px !important;
        }

    .example-header {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .vehicle-span {
        width: 100%;
        padding-left: 0px;
        margin-top: 15px;
    }

    .menu-navs li {
        width: 100%;
        padding: 0px 25px;
    }

        .menu-navs li button {
            width: 100%;
        }

    .ine-card {
        height: 300px;
    }

    .divider {
        margin: 25px 0px;
    }

        .divider::before {
            width: 0px;
            margin: 25px 0px !important;
        }

        .divider > h6 {
            margin: 0px 15px 0px 0px;
        }
}

/* =================================================== ||
    BURÓ DE CRÉDITO
|| =================================================== */

/* Custom Ovex color utility classes for credit bureau */
.border-ovex-primary {
    border-color: var(--ovex-primary) !important;
}

.border-ovex-secondary {
    border-color: var(--ovex-secondary) !important;
}

.border-ovex-gray {
    border-color: var(--ovex-gray-faded) !important;
}

.border-ovex-red {
    border-color: var(--ovex-red) !important;
}

.border-ovex-green {
    border-color: var(--ovex-green) !important;
}

.border-ovex-blue {
    border-color: var(--ovex-blue) !important;
}

.border-ovex-yellow {
    border-color: var(--ovex-yellow) !important;
}

.bg-ovex-blue {
    background-color: rgba(19, 83, 153, 0.7) !important;
}

.bg-ovex-primary-light {
    background-color: rgba(106, 69, 149, 0.1) !important;
}

.bg-ovex-secondary-light {
    background-color: rgba(237, 237, 237, 0.5) !important;
}

.bg-ovex-red-light {
    background-color: rgba(212, 11, 17, 0.1) !important;
}

.bg-ovex-green-light {
    background-color: rgba(22, 170, 54, 0.1) !important;
}

.bg-ovex-blue-light {
    background-color: rgba(19, 83, 153, 0.1) !important;
}

.bg-ovex-yellow-light {
    background-color: rgba(216, 164, 6, 0.1) !important;
}

.text-ovex-primary {
    color: var(--ovex-primary) !important;
}

.text-ovex-secondary {
    color: var(--ovex-secondary-accent) !important;
}

.text-ovex-red {
    color: var(--ovex-red) !important;
}

.text-ovex-green {
    color: var(--ovex-green) !important;
}

.text-ovex-blue {
    color: var(--ovex-blue) !important;
}

.text-ovex-yellow {
    color: var(--ovex-yellow) !important;
}

.text-bg-ovex-red {
    color: var(--ovex-white) !important;
    background-color: var(--ovex-red) !important;
}

.text-bg-ovex-green {
    color: var(--ovex-white) !important;
    background-color: var(--ovex-green) !important;
}

.text-bg-ovex-blue {
    color: var(--ovex-white) !important;
    background-color: var(--ovex-blue) !important;
}

.text-bg-ovex-yellow {
    color: var(--ovex-black) !important;
    background-color: var(--ovex-yellow) !important;
}

.alert-ovex-primary {
    color: var(--ovex-primary);
    background-color: rgba(106, 69, 149, 0.1);
    border-color: rgba(106, 69, 149, 0.2);
}

.alert-ovex-red {
    color: var(--ovex-red);
    background-color: rgba(212, 11, 17, 0.1);
    border-color: rgba(212, 11, 17, 0.2);
}

.alert-ovex-green {
    color: var(--ovex-green);
    background-color: rgba(22, 170, 54, 0.1);
    border-color: rgba(22, 170, 54, 0.2);
}

.alert-ovex-blue {
    color: var(--ovex-blue);
    background-color: rgba(19, 83, 153, 0.1);
    border-color: rgba(19, 83, 153, 0.2);
}

.alert-ovex-yellow {
    color: var(--ovex-yellow);
    background-color: rgba(216, 164, 6, 0.1);
    border-color: rgba(216, 164, 6, 0.2);
}

/* CARDS DE RESUMEN */
.bg-success-light {
    background-color: rgba(25, 135, 84, 0.1) !important;
}

.bg-danger-light {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

.bg-warning-light {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

/* CARDS DE RESUMEN ADICIONALES */
.bg-info-light {
    background-color: rgba(13, 202, 240, 0.1) !important;
}

.bg-secondary-light {
    background-color: rgba(108, 117, 125, 0.1) !important;
}

/* TABLA DE RESUMEN MOP */
.table-sm th,
.table-sm td {
    padding: 0.5rem;
    font-size: 0.875rem;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid rgba(var(--bs-ovex-rgb), 0.2);
}

/* SECCIONES DE RESUMEN */
.card-body h6.text-ovex {
    border-bottom: 2px solid var(--bs-ovex-light);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* CONSULTAS */
.table .fw-semibold {
    color: var(--bs-ovex-dark);
}

/* MÉTRICAS */
.card-body .text-center h4,
.card-body .text-center h5 {
    margin-bottom: 0.5rem;
}

.card-body .small {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =================================================== ||
    HISTORIAL DE PAGOS MODAL STYLES
|| =================================================== */

/* Modal del historial de pagos */
#historialPagosModal .modal-dialog {
    max-width: 90%;
}

#historialPagosModal .table {
    font-size: 0.85rem;
}

    #historialPagosModal .table th {
        background-color: var(--ovex-primary);
        color: white;
        border: none;
        font-weight: 600;
        padding: 0.75rem 0.5rem;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    #historialPagosModal .table td {
        padding: 0.5rem 0.25rem;
        border: 1px solid #dee2e6;
        vertical-align: middle;
    }

/* Badges del historial de pagos */
#historialPagosModal .badge {
    min-width: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    cursor: help;
    transition: transform 0.2s ease-in-out;
}

/* Estados específicos del historial según códigos oficiales del buró */
.historial-cuenta-corriente {
    background-color: #28a745 !important; /* Verde - Cuenta al corriente */
    color: white;
}

.historial-atraso-1-29 {
    background-color: #ffc107 !important; /* Amarillo - 1-29 días */
    color: #212529;
}

.historial-atraso-30-59 {
    background-color: #fd7e14 !important; /* Naranja - 30-59 días */
    color: white;
}

.historial-atraso-60-89 {
    background-color: #dc3545 !important; /* Rojo - 60-89 días */
    color: white;
}

.historial-atraso-90-119 {
    background-color: #6f1119 !important; /* Rojo oscuro - 90-119 días */
    color: white;
}

.historial-atraso-120-149 {
    background-color: #721c24 !important; /* Rojo muy oscuro - 120-149 días */
    color: white;
}

.historial-atraso-150-12m {
    background-color: #8b0000 !important; /* Rojo sangre - 150 días a 12 meses */
    color: white;
}

.historial-mas-12-meses {
    background-color: #000000 !important; /* Negro - Más de 12 meses */
    color: white;
}

.historial-deuda-parcial {
    background-color: #6c757d !important; /* Gris - Deuda parcial/fraude */
    color: white;
}

.historial-muy-reciente {
    background-color: #17a2b8 !important; /* Azul claro - Muy reciente */
    color: white;
}

.historial-sin-informacion {
    background-color: #6c757d !important; /* Gris - Sin información */
    color: white;
}

/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
}

/* Scroll horizontal para la tabla en dispositivos pequeños */
#historialPagosModal .table-responsive {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/* Año en la primera columna con fondo destacado */
#historialPagosModal .table td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    min-width: 80px;
}

/* Mejoras adicionales para la tabla del historial */
#historialPagosModal .table tbody tr:hover {
    background-color: rgba(106, 69, 149, 0.05);
}

/* Animar los badges al hacer hover */
#historialPagosModal .badge:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Estilo para la leyenda del modal */
#historialPagosModal .bg-light {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef;
}

    #historialPagosModal .bg-light .badge {
        min-width: 1.8rem;
        font-weight: 600;
    }