:root {
    --theme-toggle-bg: rgba(255, 255, 255, .16);
    --theme-toggle-border: rgba(255, 255, 255, .28);
}

.theme-mode-toggle {
    align-items: center;
    background: var(--theme-toggle-bg);
    border: 1px solid var(--theme-toggle-border);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 600;
    gap: .4rem;
    justify-content: center;
    margin-right: .65rem;
    height: 38px;
    min-width: 38px;
    padding: 0;
    width: 38px;
    transition: background .2s ease, transform .2s ease;
}

.theme-mode-toggle:hover,
.theme-mode-toggle:focus {
    background: rgba(255, 255, 255, .27);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.theme-mode-toggle i {
    font-size: 1.05rem;
}

html[data-theme="dark"] {
    --dark-bg: #0b1120;
    --dark-surface: #111827;
    --dark-surface-2: #172033;
    --dark-surface-3: #1e293b;
    --dark-border: #334155;
    --dark-text: #e5edf7;
    --dark-muted: #9aa9bd;
    --dark-primary: #60a5fa;
    --dark-input: #0f172a;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .container-scroller,
html[data-theme="dark"] .page-body-wrapper,
html[data-theme="dark"] .row-offcanvas,
html[data-theme="dark"] .content-wrapper {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text);
}

html[data-theme="dark"] .content-wrapper h1,
html[data-theme="dark"] .content-wrapper h2,
html[data-theme="dark"] .content-wrapper h3,
html[data-theme="dark"] .content-wrapper h4,
html[data-theme="dark"] .content-wrapper h5,
html[data-theme="dark"] .content-wrapper h6,
html[data-theme="dark"] .content-wrapper label,
html[data-theme="dark"] .content-wrapper p,
html[data-theme="dark"] .modal-title {
    color: var(--dark-text);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .invoice-list-card,
html[data-theme="dark"] .invoice-form-section,
html[data-theme="dark"] .search-index-table {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] hr {
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .footer {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .select2-container .select2-selection--single,
html[data-theme="dark"] .select2-container .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-search__field {
    background-color: var(--dark-input) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] .select2-container--focus .select2-selection {
    border-color: var(--dark-primary) !important;
    box-shadow: 0 0 0 .15rem rgba(96, 165, 250, .18) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .select2-search__field::placeholder {
    color: #6f8097 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-results__option,
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #1d4ed8 !important;
    color: #fff !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .jsgrid .jsgrid-table {
    color: var(--dark-text);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .jsgrid .jsgrid-table th,
html[data-theme="dark"] .jsgrid .jsgrid-table td {
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] .invoice-list-table tbody tr {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .invoice-list-table tbody tr:hover {
    background-color: var(--dark-surface-2) !important;
}

html[data-theme="dark"] .table:not(.invoice-list-table) thead th:not(.bg-primary):not(.bg-info):not(.bg-success):not(.bg-danger):not(.bg-warning) {
    background-color: var(--dark-surface-3) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .dropdown-item {
    color: var(--dark-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-item.active {
    background-color: var(--dark-surface-3);
    color: #fff;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .page-link {
    background-color: var(--dark-surface-3) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--dark-surface) !important;
    color: #64748b !important;
}

html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .nav-tabs .nav-link {
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--dark-surface-3) !important;
    color: #fff !important;
}

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

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .form-text {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--dark-surface-2) !important;
}

html[data-theme="dark"] .swal2-popup,
html[data-theme="dark"] .swal2-modal,
html[data-theme="dark"] .sweet-alert {
    background: var(--dark-surface) !important;
	border: 1px solid var(--dark-border) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .55) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-content,
html[data-theme="dark"] .sweet-alert h2,
html[data-theme="dark"] .sweet-alert p {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .swal2-container.swal2-shown {
	background-color: rgba(2, 6, 23, .72) !important;
}

html[data-theme="dark"] .swal2-modal .swal2-close {
	color: var(--dark-muted) !important;
}

html[data-theme="dark"] .swal2-modal .swal2-close:hover {
	color: #fca5a5 !important;
}

html[data-theme="dark"] .swal2-modal .swal2-input,
html[data-theme="dark"] .swal2-modal .swal2-file,
html[data-theme="dark"] .swal2-modal .swal2-select,
html[data-theme="dark"] .swal2-modal .swal2-textarea {
	background: var(--dark-input) !important;
	border-color: var(--dark-border) !important;
	color: var(--dark-text) !important;
}

html[data-theme="dark"] .swal2-modal .swal2-validationerror {
	background: var(--dark-surface-2) !important;
	color: var(--dark-text) !important;
}

html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-circular-line-left,
html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-circular-line-right,
html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix {
	background-color: var(--dark-surface) !important;
}

html[data-theme="dark"] body.bglogin,
html[data-theme="dark"] .bglogin .auth {
	min-height: 100vh;
	background: radial-gradient(circle at top, #172554 0, var(--dark-bg) 48%, #060b16 100%) !important;
	color: var(--dark-text);
}

html[data-theme="dark"] .bglogin #contenidoform {
	background: rgba(17, 24, 39, .96) !important;
	border-color: var(--dark-border) !important;
	box-shadow: 0 24px 65px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .bglogin #contenidoform h1,
html[data-theme="dark"] .bglogin #contenidoform h2,
html[data-theme="dark"] .bglogin #contenidoform h3,
html[data-theme="dark"] .bglogin #contenidoform h4,
html[data-theme="dark"] .bglogin #contenidoform label,
html[data-theme="dark"] .bglogin #contenidoform p,
html[data-theme="dark"] .bglogin #contenidoform .font-weight-light {
	color: var(--dark-text) !important;
}

html[data-theme="dark"] .bglogin #contenidoform .text-center.mt-4 {
	color: var(--dark-muted) !important;
}

html[data-theme="dark"] .bglogin #contenidoform .form-check.form-check-flat label .input-helper::before,
html[data-theme="dark"] .bglogin #contenidoform .form-check-label .input-helper::before {
	border-color: #64748b !important;
	background: var(--dark-input) !important;
}

html[data-theme="dark"] .close {
    color: #fff;
    text-shadow: none;
}

html[data-theme="dark"] .invoice-list-page {
    --invoice-primary: #60a5fa;
    --invoice-primary-dark: #2563eb;
    --invoice-border: var(--dark-border);
    --invoice-muted: var(--dark-muted);
}

html[data-theme="dark"] .invoice-list-title,
html[data-theme="dark"] .invoice-search-heading,
html[data-theme="dark"] .package-print-question,
html[data-theme="dark"] .package-current-invoice .package-invoice-total {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .package-continuous-summary,
html[data-theme="dark"] .package-current-invoice {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .package-mode-card {
    color: var(--dark-text);
}

html[data-theme="dark"] .package-mode-card--continuous {
    background: rgba(22, 163, 74, .14);
    border-color: rgba(74, 222, 128, .45);
}

html[data-theme="dark"] .package-mode-card--continuous:hover,
html[data-theme="dark"] .package-mode-card--continuous.active {
    background: rgba(22, 163, 74, .25);
    border-color: #4ade80;
}

html[data-theme="dark"] .package-mode-card--individual {
    background: rgba(124, 58, 237, .15);
    border-color: rgba(167, 139, 250, .45);
}

html[data-theme="dark"] .package-mode-card--individual:hover,
html[data-theme="dark"] .package-mode-card--individual.active {
    background: rgba(124, 58, 237, .27);
    border-color: #a78bfa;
}

html[data-theme="dark"] .package-progress-track {
    background: var(--dark-border);
}

html[data-theme="dark"] .invoice-account-summary > div,
html[data-theme="dark"] .invoice-empty-state,
html[data-theme="dark"] .invoice-line-total,
html[data-theme="dark"] .invoice-detail-table tbody tr.invoice-display-row {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .invoice-detail-table tbody tr:hover {
    background: var(--dark-surface-3) !important;
}

html[data-theme="dark"] .invoice-row-code,
html[data-theme="dark"] .invoice-section-number {
    background: rgba(59, 130, 246, .2) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .invoice-line-modal .invoice-catalog-description {
    background: #202b3d !important;
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] .invoice-detail-table tbody td,
html[data-theme="dark"] .invoice-detail-table .invoice-row-value,
html[data-theme="dark"] .invoice-detail-table .invoice-row-quantity,
html[data-theme="dark"] .invoice-detail-table .invoice-row-price,
html[data-theme="dark"] .invoice-detail-table .invoice-row-discount {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .invoice-detail-table .invoice-row-name {
    color: #f8fafc !important;
}

html[data-theme="dark"] .invoice-detail-table .invoice-row-total {
    color: #2dd4bf !important;
}

html[data-theme="dark"] .invoice-detail-table .invoice-row-code {
    background: #19365d !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .invoice-list-page {
    --invoice-surface: #111827;
    --invoice-surface-alt: #131c2b;
    --invoice-surface-hover: #17233b;
    --invoice-border: #2c3a4f;
    --invoice-text: #e5edf7;
    --invoice-muted: #9aa9bd;
    --invoice-chip: #19365d;
}

html[data-theme="dark"] .invoice-list-table thead {
    background: linear-gradient(135deg, #142b4d, #1e4f84) !important;
}

html[data-theme="dark"] .invoice-list-table thead th {
    background: transparent !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .invoice-list-table tbody td {
    background: var(--invoice-surface) !important;
    border-color: var(--invoice-border) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .invoice-list-table tbody tr:nth-child(even) td {
    background: var(--invoice-surface-alt) !important;
}

html[data-theme="dark"] .invoice-list-table tbody tr:hover td {
    background: var(--invoice-surface-hover) !important;
}

html[data-theme="dark"] .invoice-list-table .invoice-client,
html[data-theme="dark"] .invoice-list-table .invoice-total {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .invoice-list-table .invoice-number,
html[data-theme="dark"] .invoice-list-table .invoice-icon-button {
    background: var(--invoice-chip) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .invoice-list-table .invoice-items-count {
    background: #263448 !important;
    color: #dbeafe !important;
}

html[data-theme="dark"] .invoice-table-container .dt-buttons .btn-dt {
    background: #1d2a3d !important;
    border-color: #36465e !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] .invoice-table-container .dataTables_filter input {
    background: #0f172a !important;
    border-color: #3b4a60 !important;
    color: #e5edf7 !important;
}

@media (max-width: 767.98px) {
    .theme-mode-toggle {
        margin-right: .25rem;
        padding: .4rem;
    }
}