:root {
  --app-theme-toggle-hover: rgba(105, 108, 255, 0.08);
  --app-theme-toggle-active: rgba(105, 108, 255, 0.14);
}

.app-theme-toggle {
  align-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--bs-body-color);
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
  width: 2.25rem;
}

.app-theme-toggle:hover,
.app-theme-toggle:focus {
  background-color: var(--app-theme-toggle-hover);
  color: var(--bs-primary);
}

.app-theme-toggle:active {
  background-color: var(--app-theme-toggle-active);
}

.app-theme-toggle i {
  line-height: 1;
}

html.dark-style {
  color-scheme: dark;
  --app-dark-surface: #2b2c40;
  --app-dark-surface-soft: #303149;
  --app-dark-surface-muted: #35364f;
  --app-dark-bg: #232333;
  --app-dark-border: #444564;
  --app-dark-text: #cbcbe2;
  --app-dark-body: #a3a4cc;
  --app-dark-muted: #8b8cbc;
}

html.dark-style .app-theme-toggle {
  color: var(--app-dark-text);
}

html.dark-style .app-theme-toggle:hover,
html.dark-style .app-theme-toggle:focus {
  background-color: rgba(105, 108, 255, 0.16);
  color: #fff;
}

html.dark-style .navbar-page-breadcrumb,
html.dark-style .navbar-page-breadcrumb h4,
html.dark-style .navbar-page-breadcrumb .navbar-page-breadcrumb-title {
  color: var(--app-dark-text);
}

html.dark-style .navbar-page-breadcrumb .text-muted,
html.dark-style .text-muted {
  color: var(--app-dark-muted) !important;
}

html.dark-style .mention-dropdown,
html.dark-style .ui-autocomplete,
html.dark-style .ui-widget-content {
  background-color: var(--app-dark-surface);
  border-color: var(--app-dark-border);
  color: var(--app-dark-text);
}

html.dark-style .mention-dropdown li:hover,
html.dark-style .ui-menu .ui-menu-item-wrapper.ui-state-active,
html.dark-style .ui-menu .ui-menu-item-wrapper:hover {
  background-color: rgba(105, 108, 255, 0.18);
  border-color: transparent;
  color: #fff;
}

html.dark-style .dataTables_wrapper .datatable-toolbar,
html.dark-style .dataTables_wrapper .datatable-footer,
html.dark-style .productos-datatable-toolbar,
html.dark-style .productos-table-wrap .datatable-footer {
  background: var(--app-dark-surface);
}

html.dark-style .dataTables_wrapper .datatable-footer {
  border-top-color: var(--app-dark-border);
}

html.dark-style .dataTables_wrapper .datatable-toolbar .dataTables_filter label,
html.dark-style .dataTables_wrapper .datatable-footer .dataTables_length label,
html.dark-style .dataTables_wrapper .datatable-footer .dataTables_info,
html.dark-style .dataTables_wrapper .dataTables_info,
html.dark-style .dataTables_wrapper .dataTables_length label,
html.dark-style .dataTables_wrapper .dataTables_filter label {
  color: var(--app-dark-body);
}

html.dark-style .dataTables_wrapper .dataTables_filter input,
html.dark-style .dataTables_wrapper .dataTables_length select {
  background-color: var(--app-dark-bg);
  border-color: var(--app-dark-border);
  color: var(--app-dark-text);
}

html.dark-style .dataTables_wrapper .dataTables_filter input::placeholder {
  color: var(--app-dark-muted);
}

html.dark-style .page-link,
html.dark-style .pagination .page-link {
  background-color: var(--app-dark-surface);
  border-color: var(--app-dark-border);
  color: var(--app-dark-body);
}

html.dark-style .page-link:hover,
html.dark-style .pagination .page-link:hover {
  background-color: var(--app-dark-surface-muted);
  color: #fff;
}

html.dark-style .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

html.dark-style .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--app-dark-border);
  --bs-table-color: var(--app-dark-text);
  --bs-table-hover-bg: rgba(105, 108, 255, 0.12);
  --bs-table-hover-color: #fff;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
  --bs-table-striped-color: var(--app-dark-text);
}

html.dark-style .table-primary {
  --bs-table-bg: rgba(105, 108, 255, 0.22);
  --bs-table-border-color: rgba(105, 108, 255, 0.32);
  --bs-table-color: #f1f1ff;
}

html.dark-style .table-light {
  --bs-table-bg: var(--app-dark-surface-muted);
  --bs-table-border-color: var(--app-dark-border);
  --bs-table-color: var(--app-dark-text);
}

html.dark-style .table-active {
  --bs-table-bg: rgba(105, 108, 255, 0.18);
  --bs-table-color: #fff;
}

html.dark-style .form-control::placeholder {
  color: var(--app-dark-muted);
}

html.dark-style .select2-container--default .select2-selection--single,
html.dark-style .select2-container--default .select2-selection--multiple {
  background-color: var(--app-dark-bg);
  border-color: var(--app-dark-border);
  color: var(--app-dark-text);
}

html.dark-style .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-style .select2-container--default .select2-selection--multiple .select2-selection__choice,
html.dark-style .select2-container--default .select2-search--dropdown .select2-search__field {
  color: var(--app-dark-text);
}

html.dark-style .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(105, 108, 255, 0.18);
  border-color: rgba(105, 108, 255, 0.28);
}

html.dark-style .select2-dropdown,
html.dark-style .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--app-dark-surface);
  border-color: var(--app-dark-border);
}

html.dark-style .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-primary);
  color: #fff;
}

html.dark-style .select2-container--default .select2-results__option[aria-selected='true'] {
  background-color: rgba(105, 108, 255, 0.18);
  color: #fff;
}

html.dark-style div:where(.swal2-popup) {
  background: var(--app-dark-surface);
  color: var(--app-dark-text);
}

html.dark-style div:where(.swal2-title),
html.dark-style div:where(.swal2-html-container) {
  color: var(--app-dark-text);
}

html.dark-style .bg-light {
  background-color: var(--app-dark-surface-muted) !important;
  color: var(--app-dark-text);
}

html.dark-style .border,
html.dark-style .border-top,
html.dark-style .border-bottom,
html.dark-style .border-start,
html.dark-style .border-end {
  border-color: var(--app-dark-border) !important;
}

html.dark-style .bg-label-pink {
  background-color: rgba(233, 30, 99, 0.22) !important;
  color: #ff8ab5 !important;
}

html.dark-style .bg-label-pink-2 {
  background-color: rgba(240, 98, 146, 0.28) !important;
  color: #ffc1d7 !important;
}