/* Variables para el tema oscuro */
[data-theme="dark"] {
    /* Colores base */
    --mg-white-000: #1E2332;
    --mg-white: #1E2332;
    --mg-white-100: #171B27;
    --mg-white-150: #333333;
    --mg-white-200: #171B27;
    
    /* Colores de texto */
    --mg-grey: #f4f5f6;
    --mg-grey-100: #e6e6e6;
    --mg-grey-200: rgba(255, 255, 255, 0.25);
    
    /* Colores de acento */
    --mg-primary: #ff4d6d;
    --mg-primary-hover: #ff6b8b;
    --mg-primary-light: #2d1e22;
    
    /* Colores secundarios */
    --mg-secondary: #a0a0a0;
    --mg-lavanda-200: #b3b9d3;
    --mg-lavanda-500: #8086a0;
    
    /* Sombras y bordes */
    --box-shadow: 6px 2px 25px -10px rgba(0,0,0,0.3);
    
    /* Editor */
    --mg-editor-dark: #0c0e14;

    --bs-secondary-color: #8086a0;
}

/* Ajustes específicos para elementos en modo oscuro */

[data-theme="dark"] body {
    background: var(--mg-white-100);
    color: var(--mg-grey);
}

[data-theme="dark"] p { 
    color: var(--mg-grey-100);  
}   

[data-theme="dark"] .card {
    background: var(--mg-white);
    border-color: var(--mg-white-200);
}

[data-theme="dark"] .modal-content {
    background: var(--mg-white);
}

[data-theme="dark"] .dropdown-menu {
    background: var(--mg-white);
    border-color: var(--mg-white-200);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--mg-white-100);
    border-color: var(--mg-white-200);
    color: var(--mg-grey);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--mg-white-100);
    border-color: var(--mg-primary);
    color: var(--mg-grey);
}

[data-theme="dark"] .table {
    color: var(--mg-grey);
}

[data-theme="dark"] .table thead {
    background: var(--mg-white-100);
}

[data-theme="dark"] .table tbody {
    background: var(--mg-white);
}

[data-theme="dark"] .nav-toolbar {
    background: var(--mg-white-100);
    border-color: var(--mg-white-200);
}

[data-theme="dark"] .nav-toolbar a {
    color: var(--mg-grey);
}

[data-theme="dark"] .nav-toolbar a:hover,
[data-theme="dark"] .nav-toolbar a.active {
    background: var(--mg-primary);
    color: var(--mg-white) !important;
}
[data-theme="dark"] .app-toolbar {
    background: linear-gradient(90deg, #1e2332 20%, #171b27 80%);
}
[data-theme="dark"] .app-content {
    background: #1e2332;
}

[data-theme="dark"] .stats-card-mini {
    background: linear-gradient(90deg, #1e2332 20%, var(--mg-white) 80%);
}
[data-theme="dark"] .stats-card-mini .stats-card-value {
    color: #f1f1f1;
}
[data-theme="dark"] .dashboard-card {
    background: #1e2332;
}
[data-theme="dark"] svg {
    color: var(--mg-lavanda-200);
} 
[data-theme="dark"] .mG_logo img {
    filter: brightness(0) invert(1);
}   
[data-theme="dark"] .dashboard-card h3 {
    color: var(--mg-grey);
}
[data-theme="dark"] .bar-tooltip {
    background: var(--mg-grey-200);
}
[data-theme="dark"] .bar-tooltip::after {
    border-color: var(--mg-grey-200) transparent transparent transparent;
}
[data-theme="dark"] .revenue-amount {
    color: var(--mg-grey-200);
}
[data-theme="dark"] .bar-group.active .bar-label {
    color: #fff;
}

[data-theme="dark"] .invoices-title {
    color: var(--mg-grey-200);
}
[data-theme="dark"] .invoices-table td {
    color: var(--mg-grey);
}
[data-theme="dark"] .activities-title {
    color: var(--mg-grey-200);
}
[data-theme="dark"] .activity-user {
    color: var(--mg-grey);
}
[data-theme="dark"] .activity-invoice.bold {
    color: var(--mg-grey);
}
[data-theme="dark"] .app-toolbar button, [data-theme="dark"] .app-toolbar .btn {
    background: var(--mg-white);
}
[data-theme="dark"] .app-toolbar button:hover, [data-theme="dark"] .app-toolbar .btn:hover {
    background: var(--mg-primary);
    color: var(--mg-white);
}
[data-theme="dark"] .offcanvas, [data-theme="dark"] .offcanvas-lg, [data-theme="dark"] .offcanvas-md, [data-theme="dark"] .offcanvas-sm, [data-theme="dark"] .offcanvas-xl, [data-theme="dark"] .offcanvas-xxl {
    --bs-offcanvas-color: var(--mg-grey-100);
}
[data-theme="dark"] .offcanvas-header {
    border-bottom: 1px solid var(--mg-white-200);
}
[data-theme="dark"] .offcanvas-body {
    border-top: 1px solid var(--mg-white-200);
}
[data-theme="dark"] #nav-browser .nav-browser-static-content li a:hover, [data-theme="dark"] #nav-browser .nav-browser-static-content li a.active {
    background: var(--mg-white);
    color: var(--mg-lavanda-200) !important;
}
[data-theme="dark"] .bg-mg-white-100 {
    background-color: #1e2332 !important;
}
[data-theme="dark"] .document-header {
    background: var(--mg-white-200);
    border: 0.5px solid #353434;
}   
[data-theme="dark"] .form h6 {
    color: var(--mg-grey-100);
}
[data-theme="dark"] .form label {
    color: var(--mg-grey-100);
}
[data-theme="dark"] .form .form-control {
    background: var(--mg-white-100);
}
[data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled {
    background-color: #2c3140 !important;
}
[data-theme="dark"] .select2-container .selection {

    background-color: var(--mg-white-100);
}
[data-theme="dark"] .form-control:disabled::placeholder, [data-theme="dark"] .form-select:disabled::placeholder {
    color: var(--mg-grey-100) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--mg-grey-100);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    color: var(--mg-grey-100);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--mg-grey-100) transparent transparent transparent;
}
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--mg-white);
}
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border: 0px solid #aaa !important;
    background: var(--mg-white);
}
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
    border: 0px solid #aaa !important;
    background: var(--mg-white);
}
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
    border: 0px solid #aaa !important;
    background: var(--mg-white);
}
[data-theme="dark"] .select2-container--default .select2-results>.select2-results__options {
    color: var(--mg-grey-100);
    background: var(--mg-white);
    border: 2px solid #495057;
}
[data-theme="dark"] .total-item {
    color: var(--mg-grey-100);
}
[data-theme="dark"] .total-item.total {
    color: var(--mg-grey);
}
[data-theme="dark"] .app-content .form .card {
    border-color: var(--mg-grey-200);
}
[data-theme="dark"] .nav-controls {
    background: var(--mg-white);
}
[data-theme="dark"] .nav-controls ul li button picture {
    background: var(--mg-white-200);
}
[data-theme="dark"] #editor-tabs i {
    color: var(--mg-grey-200);
}
[data-theme="dark"] .nav-controls ul li.active button picture {
    background: var(--mg-primary) !important;
}
[data-theme="dark"] .nav-controls ul li.active button i {
    color: var(--mg-white-200) !important;
}
[data-theme="dark"] .fas, [data-theme="dark"] .fa-solid {
    color: var(--mg-grey-100);
}   
[data-theme="dark"] .dropdown-item-text {
    color: var(--mg-grey);
}
[data-theme="dark"] div:where(.swal2-container) div:where(.swal2-popup) {
    background: var(--mg-white);
    color: var(--mg-grey-100);
}
[data-theme="dark"] .stepper {
    background: #1e2332;
}
[data-theme="dark"] .info-card {
    background: #1e2332;
}


/* Ajustes para el editor de código */

[data-theme="dark"] .monaco-editor, [data-theme="dark"] .monaco-diff-editor, [data-theme="dark"] .monaco-component {
    --vscode-editor-background: #0c0e14;
    --vscode-editorGutter-background: #0c0e14;
}

[data-theme="dark"] .tabs-code > ul li button {
    background: var(--mg-white-100);
    color: var(--mg-grey);
    border-color: var(--mg-white-200);
}

[data-theme="dark"] .tabs-code > ul li.active button {
    background: var(--mg-editor-dark);
    color: var(--mg-grey);
}

/* Ajustes para tooltips y popovers */
[data-theme="dark"] .tooltip {
    --bs-tooltip-bg: var(--mg-white);
    --bs-tooltip-color: var(--mg-grey);
}

/* Ajustes para scrollbars */
/* [data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--mg-white-100);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--mg-white-200);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--mg-primary);
} 

[data-theme="dark"] #nav-browser .nav-browser-section.selection .nav-browser-section-header h4 {
    color: var(--mg-grey);
} */

[data-theme="dark"] .mG_panel > nav,
[data-theme="dark"] .mG_panel > nav .nav-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}
[data-theme="dark"] .mG_panel > nav::-webkit-scrollbar,
[data-theme="dark"] .mG_panel > nav .nav-inner::-webkit-scrollbar {
    width: 6px;
}
[data-theme="dark"] .mG_panel > nav .nav-inner::-webkit-scrollbar-track {
    background: transparent;
}
[data-theme="dark"] .mG_panel > nav .nav-inner::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(255,255,255,.2);
}
[data-theme="dark"] .mG_panel > nav .nav-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.35);
}

[data-theme="dark"] #nav-browser .nav-browser-section.selection .nav-browser-section-header:before {
    background: #282f42;
}
[data-theme="dark"] #nav-browser .nav-browser-section.selection .nav-browser-section-header h4 {
    color: var(--mg-primary);
}
[data-theme="dark"] #nav-browser .nav-browser-pag.selected-page .nav-browser-pag-header {
    background: #282f43;
}
[data-theme="dark"] .modal-header {
    background: var(--mg-white-100);
}
[data-theme="dark"] .btn-close {
    --bs-btn-close-color: #ffffff;
}
[data-theme="dark"] .btn-close:hover {
    background: var(--mg-primary);
}
[data-theme="dark"] .btn-close:focus {
    background: var(--mg-primary);
}
[data-theme="dark"] .btn-close:focus-visible {
    background: var(--mg-primary);
}