.card-header {
    padding: 1rem 1rem !important;
}

/* Use the soft-primary treatment on primary internal card headers. */
.card-header.border-bottom {
    background-color: rgba(55, 125, 255, .1) !important;
}

/* Keep table headers consistent across the internal views. */
.table>thead th,
.table>thead td {
    color: #fff !important;
}

/* Use the same soft-primary treatment for every hoverable table row. */
.table-hover>tbody>tr:hover>* {
    background-color: rgba(55, 125, 255, .1) !important;
}

/* Keep secondary client columns hidden until the layout has enough width. */
.clients-wide-column {
    display: none !important;
}

@media (min-width: 1200px) {
    .clients-wide-column {
        display: table-cell !important;
    }
}

/* Keep every table inside cards and modals usable on narrow screens. */
.card-body:has(table),
.modal-body:has(table) {
    overflow-x: auto;
}

.card-body:has(table)>table,
.modal-body:has(table) table {
    min-width: max-content;
}

/* Keep the colored internal modal header and footer compact and consistent. */
.modal-header.bg-info,
.modal-footer.bg-soft-dark {
    padding: 1rem !important;
}

/* Dedicated feedback for the external recharge process. */
.external-recharge-loader .modal-body {
    background-color: #fff;
    border-radius: .75rem;
}

.external-recharge-stages {
    list-style: none;
    padding-left: 0;
}

.external-recharge-stages li {
    color: #677788;
    font-size: .875rem;
    margin-bottom: .5rem;
}

.external-recharge-stages li::before {
    content: '○';
    display: inline-block;
    margin-right: .5rem;
    width: 1rem;
}

.external-recharge-stages li.active {
    color: #377dff;
    font-weight: 600;
}

.external-recharge-stages li.active::before {
    content: '●';
}

.external-recharge-stages li.completed {
    color: #00c9a7;
}

.external-recharge-stages li.completed::before {
    content: '✓';
}

/* Keep DataTables controls and modal field labels readable and consistent. */
.dt-search label,
.dt-length label,
.dataTables_filter label,
.dataTables_length label,
.form-label,
.modal label {
    font-weight: 800 !important;
}

/* Highlight the complete selected or hovered option in the side menu. */
#sidebarNav .nav-vertical.nav-tabs .nav-link.active,
#sidebarNav .nav-vertical.nav-tabs .nav-link:hover {
    background-color: rgba(55, 125, 255, .1) !important;
    border-left-color: #377dff !important;
}

/* Give the user form more horizontal space and reduce its vertical length. */
@media (min-width: 768px) {
    #mModal:has(#plantilla) .modal-dialog {
        width: calc(100% - 2rem);
        max-width: 900px;
    }

}

/* DataTables toolbar alignment (global, non-invasive):
   search on the left and buttons on the right */
.dt-container>.dt-search {
    float: left;
    text-align: left;
    margin-bottom: .5rem;
}

.dt-container>.dt-buttons {
    float: right;
    margin-bottom: .5rem;
}

.dt-container>.dataTable {
    clear: both;
    width: 100% !important;
}

.dt-container>.dt-info {
    float: left;
}

.dt-container>.dt-paging {
    float: right;
}

.dt-container::after {
    content: "";
    display: block;
    clear: both;
}

/* Legacy DataTables wrappers fallback */
.dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: left;
}

.dataTables_wrapper .dt-buttons {
    float: right;
}

/* Keep the status comparator inside the main content column. */
.number-status-comparator,
.number-status-comparator .card,
.number-status-comparator .dt-container,
.number-status-comparator .dt-layout-row,
.number-status-comparator .dt-layout-cell {
    max-width: 100%;
    min-width: 0;
}

.number-status-comparator .table-responsive,
.number-status-comparator .dt-scroll,
.number-status-comparator .dt-scroll-body {
    max-width: 100%;
    overflow-x: auto !important;
}

.number-status-comparator .min-w-0 {
    min-width: 0;
}