:root {
    color-scheme: light;
    /* Page canvas (body / content area) */
    --vc-bg: #dee2e6;
    /* Elevated surfaces: panels, cards, modals */
    --vc-surface: #ffffff;
    --vc-surface-alt: #f2f4f5;
    --vc-surface-muted: #e9ecef;
    --vc-text: #333333;
    --vc-text-muted: #6c757d;
    --vc-border: #e4e7ea;
    --vc-border-strong: #c8ced3;
    --vc-input-bg: #ffffff;
    --vc-input-text: #2d353c;
    --vc-input-border: #d5dbe0;
    /* Top bar — elevated above page canvas (Color Admin: white header) */
    --vc-header-bg: #ffffff;
    --vc-header-text: #2d353c;
    /* Sidebar — distinct navigation chrome (Color Admin: #2d353c) */
    --vc-sidebar-bg: #2d353c;
    --vc-sidebar-text: rgba(255, 255, 255, 0.65);
    --vc-sidebar-text-muted: rgba(255, 255, 255, 0.45);
    --vc-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --vc-sidebar-item-active-bg: #242b30;
    --vc-sidebar-accent: #00acac;
    --vc-sidebar-active-bg: #348fe2;
    --vc-panel-heading-bg: #1a2229;
    --vc-panel-heading-text: #ffffff;
    --vc-row-alt: #f2f4f5;
    --vc-row-hover: #e9ecef;
    --vc-shadow: rgba(0, 0, 0, 0.12);
    --vc-overlay: rgba(255, 255, 255, 0.72);
    --vc-select-focus: rgba(52, 143, 226, 0.22);
}

html[data-theme="dark"] {
    color-scheme: dark;
    /* Page canvas — equivalent to #dee2e6 in light mode */
    --vc-bg: #182334;
    /* Cards/panels sit above the canvas */
    --vc-surface: #213145;
    --vc-surface-alt: #273a52;
    --vc-surface-muted: #2f425c;
    --vc-text: #eef2f7;
    --vc-text-muted: #a8b4c4;
    --vc-border: #3a5068;
    --vc-border-strong: #4a6380;
    --vc-input-bg: #152030;
    --vc-input-text: #eef2f7;
    --vc-input-border: #4a6380;
    /* Header bar — elevated strip, visually separate from sidebar and canvas */
    --vc-header-bg: #1e2d42;
    --vc-header-text: #eef2f7;
    /* Sidebar — darker rail, mirrors light mode where sidebar ≠ page bg */
    --vc-sidebar-bg: #0b1018;
    --vc-sidebar-text: rgba(238, 242, 247, 0.72);
    --vc-sidebar-text-muted: rgba(238, 242, 247, 0.48);
    --vc-sidebar-hover-bg: rgba(255, 255, 255, 0.07);
    --vc-sidebar-item-active-bg: #1a2838;
    --vc-sidebar-accent: #4db8b8;
    --vc-sidebar-active-bg: #2f80d0;
    --vc-panel-heading-bg: #152030;
    --vc-panel-heading-text: #eef2f7;
    --vc-row-alt: #273a52;
    --vc-row-hover: #2f425c;
    --vc-shadow: rgba(0, 0, 0, 0.42);
    --vc-overlay: rgba(8, 12, 18, 0.78);
    --vc-select-focus: rgba(82, 160, 232, 0.35);
}

body,
.page-container,
.content {
    background-color: var(--vc-bg) !important;
    color: var(--vc-text);
}

html[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.navbar-brand):not(.nav-link) {
    color: #7ab7f0;
}

.header.navbar-default,
.navbar-header,
.navbar-default .navbar-nav,
.navbar-default .navbar-brand {
    background-color: var(--vc-header-bg) !important;
    color: var(--vc-header-text) !important;
}

.header.navbar-default {
    border-bottom: 1px solid var(--vc-border);
    box-shadow: 0 1px 0 var(--vc-shadow);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > button.nav-link,
.navbar-user > a {
    color: var(--vc-header-text) !important;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--vc-header-text) !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > button.nav-link:hover,
.navbar-default .navbar-brand:hover,
.navbar-user > a:hover {
    background-color: var(--vc-surface-alt) !important;
    color: var(--vc-header-text) !important;
}

.navbar-user .dropdown-menu {
    border-color: var(--vc-border-strong) !important;
    box-shadow: 0 8px 24px var(--vc-shadow);
}

.theme-toggle {
    align-items: center;
    border: 1px solid var(--vc-border) !important;
    border-radius: 999px;
    color: var(--vc-header-text) !important;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    margin: 9px 8px 0 0;
    padding: 0;
    width: 32px;
}

.theme-toggle:hover,
.theme-toggle:focus {
    background-color: var(--vc-surface-alt) !important;
    box-shadow: 0 0 0 0.2rem var(--vc-select-focus);
    text-decoration: none;
}

.sidebar,
.sidebar-bg {
    background-color: var(--vc-sidebar-bg) !important;
    border-right: 1px solid var(--vc-border-strong);
}

.sidebar .nav,
.sidebar .sub-menu,
.sidebar .sidebar-submenu {
    background-color: transparent !important;
}

.sidebar .nav > li > a,
.sidebar .nav-header,
.sidebar-minify-btn {
    color: var(--vc-sidebar-text) !important;
}

.sidebar .nav .sub-menu > li > a {
    color: var(--vc-sidebar-text-muted) !important;
}

.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus,
.sidebar .nav .sub-menu > li > a:hover,
.sidebar .nav .sub-menu > li > a:focus,
.sidebar-minify-btn:hover,
.sidebar-minify-btn:focus {
    background-color: var(--vc-sidebar-hover-bg) !important;
    color: #ffffff !important;
}

.sidebar .nav > li.active > a,
.sidebar .nav > li.active > a:hover,
.sidebar .nav > li.active > a:focus,
.sidebar .nav .sub-menu > li.active > a,
.sidebar .nav .sub-menu > li.active > a:hover,
.sidebar .nav .sub-menu > li.active > a:focus {
    background-color: var(--vc-sidebar-item-active-bg) !important;
    color: #ffffff !important;
}

.sidebar .nav > li.active > a i,
.sidebar .nav .sub-menu > li.active > a i {
    color: var(--vc-sidebar-accent) !important;
}

.sidebar .nav > li.nav-header {
    color: var(--vc-sidebar-text-muted) !important;
}

.panel,
.card,
.tablas-card,
.modal-content,
.dropdown-menu,
.popover,
.tooltipster-base,
.list-group-item {
    background-color: var(--vc-surface) !important;
    border-color: var(--vc-border) !important;
    color: var(--vc-text) !important;
}

.panel-body,
.card-body,
.modal-body,
.modal-footer,
.dropdown-item,
.popover-body {
    background-color: var(--vc-surface) !important;
    color: var(--vc-text) !important;
}

.panel-inverse > .panel-heading,
.panel-heading,
.modal-header,
.dialog-header {
    background-color: var(--vc-panel-heading-bg) !important;
    border-color: var(--vc-border) !important;
    color: var(--vc-panel-heading-text) !important;
}

.panel-title,
.modal-title,
.close,
.dialog-title {
    color: inherit !important;
}

.close {
    text-shadow: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--vc-row-hover) !important;
    color: var(--vc-text) !important;
}

.dropdown-divider,
hr {
    border-color: var(--vc-border) !important;
}

.table,
.tablas-table,
table {
    background-color: var(--vc-surface) !important;
    color: var(--vc-text) !important;
}

.table th,
.table td,
.tablas-table th,
.tablas-table td,
th,
td {
    border-color: var(--vc-border) !important;
}

.table thead th,
.tablas-table thead th {
    background-color: var(--vc-surface-alt) !important;
    color: var(--vc-text) !important;
}

/* No pisar filas con color inline (ej. Total Entrada/Salida/Neto en libro caja) */
.table-striped tbody tr:nth-of-type(odd):not([style*="background-color"]),
.tablas-table tbody tr:nth-of-type(odd):not([style*="background-color"]),
tbody tr:nth-of-type(odd):not([style*="background-color"]) {
    background-color: var(--vc-row-alt) !important;
}

/* Filas con fondo inline claro (lightgreen/salmon/orange): texto oscuro
   también en dark mode, donde el texto de tabla por defecto es claro. */
html[data-theme="dark"] tbody tr[style*="background-color"] td,
html[data-theme="dark"] tbody tr[style*="background-color"] td h6 {
    color: #1f2933 !important;
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
    background-color: var(--vc-row-hover) !important;
    color: var(--vc-text) !important;
}

.table-primary,
.table-primary > td,
.table-primary > th {
    background-color: #cfe6ff !important;
    color: #0f3557 !important;
}

html[data-theme="dark"] .table-primary,
html[data-theme="dark"] .table-primary > td,
html[data-theme="dark"] .table-primary > th {
    background-color: #235b86 !important;
    color: #f3f6fb !important;
}

.table > tfoot > tr > td,
.table>tfoot>tr>td {
    background-color: var(--vc-surface-muted) !important;
    color: var(--vc-text) !important;
}

.widget-stats,
.widget.widget-stats {
    color: #ffffff !important;
}

.widget-stats .stats-info h4,
.widget.widget-stats .stats-info h4 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.widget-stats .stats-info small,
.widget.widget-stats .stats-info small {
    color: #ffffff !important;
}

.widget-stats .stats-link a,
.widget.widget-stats .stats-link a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.widget-stats .stats-link a:hover,
.widget-stats .stats-link a:focus,
.widget.widget-stats .stats-link a:hover,
.widget.widget-stats .stats-link a:focus {
    color: #ffffff !important;
}

/* Excluir .btn: muchos botones de acción usan form-control + btn-* y no deben
   heredar el reset de inputs (rompería colores de Buscar, Generar recibo, etc.). */
.form-control:not(.btn),
.custom-select,
.tablas-form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.bootstrap-select > .dropdown-toggle,
input:not(.btn),
select,
textarea {
    background-color: var(--vc-input-bg) !important;
    border-color: var(--vc-input-border) !important;
    color: var(--vc-input-text) !important;
}

.form-control:not(.btn):focus,
.custom-select:focus,
.tablas-form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
input:not(.btn):focus,
select:focus,
textarea:focus {
    background-color: var(--vc-input-bg) !important;
    border-color: #52a0e8 !important;
    box-shadow: 0 0 0 0.2rem var(--vc-select-focus) !important;
    color: var(--vc-input-text) !important;
}

.form-control:not(.btn):disabled,
.form-control:not(.btn)[readonly],
input:not(.btn):disabled,
select:disabled,
textarea:disabled {
    background-color: var(--vc-surface-muted) !important;
    color: var(--vc-text-muted) !important;
}

.form-control:not(.btn)::placeholder,
input:not(.btn)::placeholder,
textarea::placeholder {
    color: var(--vc-text-muted) !important;
    opacity: 1;
}

.input-group-text,
.select2-dropdown,
.select2-results__option,
.select2-search__field,
.bootstrap-select .dropdown-menu {
    background-color: var(--vc-surface) !important;
    border-color: var(--vc-border) !important;
    color: var(--vc-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--vc-input-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: var(--vc-text-muted) !important;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus {
    color: var(--vc-text-muted) !important;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    color: inherit !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active {
    background-color: var(--vc-sidebar-active-bg) !important;
    color: #ffffff !important;
}

.btn-light,
.btn-default {
    background-color: var(--vc-surface-alt) !important;
    border-color: var(--vc-border) !important;
    color: var(--vc-text) !important;
}

.btn-light:hover,
.btn-default:hover {
    background-color: var(--vc-row-hover) !important;
    color: var(--vc-text) !important;
}

/* Botones semánticos Color Admin — preservar color en light y dark
   (evita que overrides de tema / form-control los dejen neutros). */
.btn-primary,
.btn-success,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success {
    background-color: #00acac !important;
    border-color: #00acac !important;
    color: #ffffff !important;
}

.btn-primary:hover:not(:disabled),
.btn-success:hover:not(:disabled),
.btn-primary:focus:not(:disabled),
.btn-success:focus:not(:disabled),
html[data-theme="dark"] .btn-primary:hover:not(:disabled),
html[data-theme="dark"] .btn-success:hover:not(:disabled),
html[data-theme="dark"] .btn-primary:focus:not(:disabled),
html[data-theme="dark"] .btn-success:focus:not(:disabled) {
    background-color: #008686 !important;
    border-color: #007979 !important;
    color: #ffffff !important;
}

/* btn-info: fondo celeste fijo en light y dark → texto siempre blanco */
.btn-info,
html[data-theme="dark"] .btn-info {
    background-color: #49b6d6 !important;
    border-color: #49b6d6 !important;
    color: #ffffff !important;
}

.btn-info:hover:not(:disabled),
.btn-info:focus:not(:disabled),
html[data-theme="dark"] .btn-info:hover:not(:disabled),
html[data-theme="dark"] .btn-info:focus:not(:disabled) {
    background-color: #2ea7cb !important;
    border-color: #2b9fc1 !important;
    color: #ffffff !important;
}

/* Tablas: botón Nuevo (add_btn) — azul fijo light + dark.
   Specificity > `.commands > .confirm-button` (tablas injecta padding 0.15rem
   después de este archivo y achicaba el botón en light).
   El ícono blanco va scoped a .add_btn (tablas trae fill negro). */
.commands .add_btn.confirm-button,
.add_btn.add_btn,
html[data-theme="dark"] .commands .add_btn.confirm-button,
html[data-theme="dark"] .add_btn.add_btn {
    color: #ffffff !important;
    background-color: #348fe2 !important;
    border-color: #348fe2 !important;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
}

.commands .add_btn.confirm-button:hover:not(:disabled),
.add_btn.add_btn:hover:not(:disabled),
.commands .add_btn.confirm-button:focus:not(:disabled),
.add_btn.add_btn:focus:not(:disabled),
html[data-theme="dark"] .commands .add_btn.confirm-button:hover:not(:disabled),
html[data-theme="dark"] .add_btn.add_btn:hover:not(:disabled),
html[data-theme="dark"] .commands .add_btn.confirm-button:focus:not(:disabled),
html[data-theme="dark"] .add_btn.add_btn:focus:not(:disabled) {
    background-color: #2a7bc7 !important;
    border-color: #2a7bc7 !important;
    color: #ffffff !important;
}

/* Ícono + blanco sobre el fondo azul — ganarle al CSS inyectado por tablas.js */
.commands .add_btn .ic-add::before,
.add_btn .ic-add::before,
html[data-theme="dark"] .commands .add_btn .ic-add::before,
html[data-theme="dark"] .add_btn .ic-add::before {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23fff'%3e%3cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM232 344V280H168c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H280v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3e%3c/svg%3e") !important;
    height: 18px !important;
    width: 18px !important;
    display: inline-block !important;
    vertical-align: text-bottom;
    filter: none !important;
}

.btn-approve,
html[data-theme="dark"] .btn-approve {
    background-color: #FF9C00 !important;
    border-color: #E68C00 !important;
    color: #ffffff !important;
}

.btn-approve:hover:not(:disabled),
.btn-approve:focus:not(:disabled),
html[data-theme="dark"] .btn-approve:hover:not(:disabled),
html[data-theme="dark"] .btn-approve:focus:not(:disabled) {
    background-color: #E68C00 !important;
    border-color: #D07D00 !important;
    color: #ffffff !important;
}

.btn-approve:active:not(:disabled),
.btn-approve.active:not(:disabled),
html[data-theme="dark"] .btn-approve:active:not(:disabled),
html[data-theme="dark"] .btn-approve.active:not(:disabled) {
    background-color: #D07D00 !important;
    border-color: #C07300 !important;
    color: #ffffff !important;
}

.btn-approve:disabled,
.btn-approve.disabled,
html[data-theme="dark"] .btn-approve:disabled,
html[data-theme="dark"] .btn-approve.disabled {
    background-color: #FF9C00 !important;
    border-color: #E68C00 !important;
    color: #ffffff !important;
    opacity: 0.55;
}

.alert,
.note,
.well {
    border-color: var(--vc-border) !important;
    color: var(--vc-text) !important;
}

.swal-modal,
.swal-title,
.swal-text,
dialog {
    background-color: var(--vc-surface) !important;
    color: var(--vc-text) !important;
}

.login.login-v2,
.login .login-header,
.login .login-content {
    color: #ffffff;
}

html[data-theme="light"] .login.login-v2,
html[data-theme="light"] .login .login-header,
html[data-theme="light"] .login .login-content {
    color: #ffffff;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-grey,
html[data-theme="dark"] .text-grey-darker,
html[data-theme="dark"] small,
html[data-theme="dark"] label {
    color: var(--vc-text-muted) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black {
    color: var(--vc-text) !important;
}

/* Beat runtime-injected Tablas bundle styles */
.tablas-table,
.tablas-form,
.tablas-card,
.tablas-card .card-body,
.label-field {
    color: var(--vc-text) !important;
}

.tablas-table thead th,
.tablas-table .column-filter,
.tablas-table .filters th {
    background-color: var(--vc-surface-alt) !important;
    color: var(--vc-text) !important;
}

.tablas-table .column-filter input,
.tablas-table .column-filter select,
.tablas-table .column-filter .select2-container--default .select2-selection--single,
.tablas-table .column-filter .select2-container--default .select2-selection--multiple,
.tablas-table .tablas-form-control,
.tablas-form .tablas-form-control {
    background-color: var(--vc-input-bg) !important;
    border-color: var(--vc-input-border) !important;
    color: var(--vc-input-text) !important;
}

.tablas-table .column-filter .select2-selection__rendered,
.tablas-table .select2-selection__rendered {
    color: var(--vc-input-text) !important;
}

/* Solo botones "fantasma" (fondo transparente) de Tablas — no add_btn / btn-r2. */
.confirm-button:not(.btn-r2):not(.add_btn),
.cancel-button:not(.btn_cancel) {
    color: var(--vc-text) !important;
}

/* Los botones de acción con fondo sólido (Submit/Cancel del formulario Tablas)
   deben mantener texto blanco: la regla genérica de arriba está pensada para los
   confirm-button "fantasma" (fondo transparente) de las tablas, no para estos. */
.confirm-button.btn-r2,
.cancel-button.btn_cancel,
.add_btn.confirm-button {
    color: #ffffff !important;
}

.pagination .page-link,
.pagination a.page {
    background-color: var(--vc-surface) !important;
    border-color: var(--vc-border) !important;
    color: var(--vc-text) !important;
}

.pagination .page-item.active .page-link,
.pagination li.active a.page,
.pagination li.active .page-link {
    background-color: var(--vc-sidebar-active-bg) !important;
    border-color: var(--vc-sidebar-active-bg) !important;
    color: #ffffff !important;
}

.pagination .page-link:hover,
.pagination a.page:hover {
    background-color: var(--vc-row-hover) !important;
    color: var(--vc-text) !important;
}

.pagination-prev,
.pagination-next,
.pagination-buttons .btn,
.pagination-indicator {
    color: var(--vc-text) !important;
}

html[data-theme="dark"] .label.label-danger,
html[data-theme="dark"] .label.label-warning,
html[data-theme="dark"] .label.label-success,
html[data-theme="dark"] .label.label-primary,
html[data-theme="dark"] .label.label-info,
html[data-theme="dark"] .label.label-indigo,
html[data-theme="dark"] .label.label-inverse {
    color: #ffffff !important;
}

html[data-theme="dark"] .label.label-default {
    background-color: var(--vc-surface-muted) !important;
    color: var(--vc-text) !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    background-color: var(--vc-surface) !important;
    color: var(--vc-text) !important;
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    color: var(--vc-text) !important;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
    background-color: var(--vc-row-hover) !important;
    color: var(--vc-text) !important;
}

.login .login-content a,
.login.login-v2 a {
    color: #9ec8f5 !important;
}

.login .login-content a:hover,
.login.login-v2 a:hover {
    color: #cfe4ff !important;
}

/* Wizard stepper (NavWizard / nav-wizards-2) */
.nav.nav-wizards-2 .nav-item .nav-link {
    background: var(--vc-surface-muted) !important;
    color: var(--vc-text) !important;
}

.nav.nav-wizards-2 .nav-item .nav-link:before,
.nav.nav-wizards-2 .nav-item .nav-link:after {
    background-color: var(--vc-border) !important;
}

.nav.nav-wizards-2 .nav-item .nav-link.disabled {
    background: var(--vc-surface-alt) !important;
    color: var(--vc-text-muted) !important;
}

.nav.nav-wizards-2 .nav-item .nav-link.active,
.nav.nav-wizards-2 .nav-item .nav-link.completed {
    background: var(--vc-sidebar-active-bg) !important;
    color: #ffffff !important;
}

.nav.nav-wizards-2 .nav-item .nav-link.active .nav-text,
.nav.nav-wizards-2 .nav-item .nav-link.completed .nav-text {
    color: #ffffff !important;
}

/* Row action buttons — createTableV2 (.command-column) + Tablas (.commands).
   Excluir .add_btn (Nuevo) para que conserve el azul #348fe2 en dark mode. */
html[data-theme="dark"] .table td.command-column .btn.btn-sm,
html[data-theme="dark"] .table td.with-btn .btn.btn-sm,
html[data-theme="dark"] .tablas-table td.commands .btn-sm,
html[data-theme="dark"] .tablas-table .commands .btn-sm,
html[data-theme="dark"] .tablas-table td.commands .confirm-button:not(.add_btn),
html[data-theme="dark"] .tablas-table .commands .confirm-button:not(.add_btn) {
    background-color: var(--vc-surface-alt) !important;
    border: 1px solid var(--vc-border) !important;
    color: var(--vc-text) !important;
}

html[data-theme="dark"] .table td.command-column .btn.btn-sm i:not([style*="color"]),
html[data-theme="dark"] .table td.with-btn .btn.btn-sm i:not([style*="color"]),
html[data-theme="dark"] .tablas-table td.commands .btn-sm i:not([style*="color"]),
html[data-theme="dark"] .tablas-table .commands .btn-sm i:not([style*="color"]),
html[data-theme="dark"] .tablas-table td.commands .confirm-button:not(.add_btn) i:not([style*="color"]),
html[data-theme="dark"] .tablas-table .commands .confirm-button:not(.add_btn) i:not([style*="color"]) {
    color: var(--vc-text) !important;
}

html[data-theme="dark"] .table td.command-column .btn.btn-sm:hover,
html[data-theme="dark"] .table td.with-btn .btn.btn-sm:hover,
html[data-theme="dark"] .tablas-table td.commands .btn-sm:hover,
html[data-theme="dark"] .tablas-table .commands .btn-sm:hover,
html[data-theme="dark"] .tablas-table td.commands .confirm-button:not(.add_btn):hover,
html[data-theme="dark"] .tablas-table .commands .confirm-button:not(.add_btn):hover {
    background-color: var(--vc-row-hover) !important;
    color: var(--vc-text) !important;
    border-color: var(--vc-border-strong) !important;
}

html[data-theme="dark"] .table td.command-column .btn.fa_red,
html[data-theme="dark"] .table td.with-btn .btn.fa_red,
html[data-theme="dark"] .table td.command-column .fa_red,
html[data-theme="dark"] .table td.with-btn .fa_red {
    color: #f87171 !important;
}

html[data-theme="dark"] .table td.command-column .btn.fa_red i,
html[data-theme="dark"] .table td.with-btn .btn.fa_red i {
    color: #f87171 !important;
}

/* Tablas (v1): ic-edit / ic-show son SVG embebidos — color CSS no aplica */
html[data-theme="dark"] .tablas-table td.commands .confirm-button:not(.add_btn) i[class^="ic-"]:not(.ic-trash)::before,
html[data-theme="dark"] .tablas-table .commands .confirm-button:not(.add_btn) i[class^="ic-"]:not(.ic-trash)::before {
    filter: brightness(0) invert(1);
}

#root .form-group label,
#root label {
    color: var(--vc-text) !important;
}

#modalOverlay {
    background: var(--vc-overlay) !important;
}

.wizard-steps {
    display: none;
}

.form-budget-group {
    margin-bottom: 1em;
    text-align: left;
}

.process_section {
    margin-bottom: 40px;
}

.polished_edge_straight_inputs {
    margin-bottom: 20px;
}

.polished_edge_straight_input_containers {
    display: inline-flex;
}

.switcher input:disabled+label {
    cursor: not-allowed;
}

.b-r-10 {
    border-radius: 10px !important;
}

.card-item {
    background-color: var(--vc-surface) !important;
    border: 1px solid var(--vc-border);
    padding: 10px;
    box-shadow: 1px 1px 3px 0px var(--vc-shadow);
    border-radius: 10px;
    height: 60px;
}

.content-no-sidebar {
    margin-left: 0 !important;
}

/* Progreso de upload */
.file {
    position: relative;
    background: linear-gradient(to right, #9dd8f2 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 1s ease;
}

.file.done {
    background: #91d988;
}

.file a {
    display: block;
    position: relative;
    padding: 5px;
    color: var(--vc-text);
    border: 1px solid var(--vc-border);
    margin: 5px 0px;
}

.thumbnail {
    padding: 5px;
    background-color: var(--vc-surface);
    border: 1px solid var(--vc-border);
    border-radius: 5px;
    box-shadow: 5px 4px 6px var(--vc-shadow);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

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

#infoModal>.modal-dialog>.modal-content>.modal-body {
    font-size: 1.2em;
}

.good_items {
    margin-bottom: 6px;
    align-items: center;
}

.server-side-sort {
    cursor: pointer;
}

.text-super-center.text-super-center {
    text-align: center !important;
}

.server-side-sort.desc:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #787B7D;
    content: "";
    position: relative;
    top: 10px;
    left: 10px;
}

.server-side-sort.asc:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #787B7D;
    content: "";
    position: relative;
    top: -10px;
    left: 10px;
}

.filter_input {
    width: 100%;
    height: 29px;
    -webkit-appearance: auto;
    padding-left: 5px;
}

.addButton {
    width: 100px;
}

.imagePreviewModal {
    z-index: 1100;
}

.check-green {
    color: var(--green);
}

button:focus {
    outline: none;
}

.number_center.number_center {
    text-align: center !important;
}

.select2.select2-container.select2-container--default.select2.select2-container.select2-container--default {
    border: none;
    padding: 0;
}

.select2-dropdown--below.select2-dropdown--below {
    top: 0;
}

.custom-width {
    width: 5%;
}

/* Highcharts — fondo transparente en dark mode para integrar con el panel */
html[data-theme="dark"] .highcharts-background,
html[data-theme="dark"] .highcharts-plot-background {
    fill: transparent !important;
}

html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-title,
html[data-theme="dark"] .highcharts-subtitle,
html[data-theme="dark"] .highcharts-credits text {
    fill: var(--vc-text-muted) !important;
}

html[data-theme="dark"] .highcharts-grid-line {
    stroke: var(--vc-border) !important;
}

html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-tick {
    stroke: var(--vc-border) !important;
}

html[data-theme="dark"] .highcharts-data-label text,
html[data-theme="dark"] text.highcharts-data-label,
html[data-theme="dark"] .highcharts-data-label tspan {
    fill: #ffffff !important;
    stroke: none !important;
    stroke-width: 0 !important;
}

html[data-theme="dark"] .highcharts-data-label-connector {
    stroke: var(--vc-text-muted) !important;
}