/* ================================================================ */
/*      TEMA PRETO DIAMANTE (v6.3) - VERSÃO COMPLETA E CORRIGIDA    */
/* ================================================================ */

/* ---------- VARIÁVEIS DE COR DO TEMA ---------- */
html.dark-mode {
    --dark-bg: #000000;          /* CORRIGIDO: de cinza escuro para preto puro */
    --dark-surface: #1a1a1a;      /* CORRIGIDO: um cinza muito escuro para superfícies como cards */
    --dark-hover: #2c2c2c;        /* CORRIGIDO: um cinza um pouco mais claro para efeito hover */
    --dark-border: #333333;       /* CORRIGIDO: borda sutil que se destaca no fundo preto */
    --dark-text: #ffffff;          /* CORRIGIDO: de branco "sujo" para branco puro */
    --dark-text-muted: #bbbbbb;   /* CORRIGIDO: texto secundário mais claro para melhor leitura */
    --dark-success: #28a745;
    --dark-danger: #e74c3c;
    --dark-info: #36b9cc;
    --dark-warning: #f6c23e;
    --dark-secondary: #858796;
    --dark-primary: #4e73df;
}


/* ---------- BASE E CONTAINERS ---------- */
html.dark-mode,
html.dark-mode body,
html.dark-mode #content-wrapper,
html.dark-mode #content,
html.dark-mode .bg-white {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text);
}

html.dark-mode .text-gray-800, html.dark-mode .text-gray-900,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode .h1, html.dark-mode .h2, html.dark-mode .h3, html.dark-mode .h4, html.dark-mode .h5, html.dark-mode .h6,
html.dark-mode footer.sticky-footer, html.dark-mode .modal-content, html.dark-mode .modal-header,
html.dark-mode .card-title { /* ADIÇÃO: Título do card */
    color: var(--dark-text) !important;
}

html.dark-mode .text-gray-600, html.dark-mode .text-muted, html.dark-mode p, html.dark-mode .text-body,
html.dark-mode textarea, html.dark-mode legend,
html.dark-mode .card-text:not([class*="text-"]), /* ADIÇÃO: Texto do card, exceto se já tiver cor */
html.dark-mode .copyright { /* ADIÇÃO: Texto do copyright no footer */
    color: var(--dark-text-muted) !important;
}

html.dark-mode a, html.dark-mode a.small { /* ADIÇÃO: Cobre links .small como "Forgot password?" */
    color: var(--dark-info);
}
html.dark-mode a:hover, html.dark-mode a.small:hover {
    color: #5Dcbd9;
}

/* ---------- NAVBAR SUPERIOR E LATERAL ---------- */
html.dark-mode .navbar, html.dark-mode .topbar {
    background-color: var(--dark-surface);
    border-bottom: 1px solid var(--dark-border);
}
html.dark-mode .bg-gradient-primary {
    background-color: var(--dark-bg);
    background-image: linear-gradient(180deg, var(--dark-surface) 10%, var(--dark-bg) 100%);
}
html.dark-mode .sidebar-dark hr.sidebar-divider,
html.dark-mode .dropdown-divider {
    border-top: 1px solid var(--dark-border);
}

/* Itens do Menu Lateral */
html.dark-mode .sidebar-dark .nav-item .nav-link,
html.dark-mode .sidebar-dark .collapse-inner .collapse-item,
html.dark-mode .sidebar-dark .sidebar-brand-text,
html.dark-mode .sidebar.toggled .sidebar-heading,
html.dark-mode .sidebar-dark .nav-item .nav-link i { /* ADIÇÃO: Ícones do menu */
    color: var(--dark-text-muted) !important;
}
html.dark-mode .sidebar .nav-item > .nav-link:hover,
html.dark-mode .sidebar .nav-item > .nav-link:focus {
    color: var(--dark-text) !important;
}
html.dark-mode .sidebar-dark .nav-item .collapse .collapse-inner {
    background-color: var(--dark-hover);
}

/* Itens ATIVOS ou em HOVER do Menu Lateral */
html.dark-mode .sidebar-dark .nav-item.active .nav-link,
html.dark-mode .sidebar-dark .nav-item .nav-link:hover,
html.dark-mode .sidebar-dark .collapse-inner a.collapse-item:hover,
html.dark-mode .sidebar-dark .collapse-inner a.collapse-item.active {
    color: var(--dark-text) !important;
    background-color: var(--dark-hover) !important;
}
html.dark-mode .sidebar-dark .nav-item.active .nav-link i { /* ADIÇÃO: Ícone do item ativo */
    color: var(--dark-text) !important;
}

/* Campos do formulário */
html.dark-mode .form-control,
html.dark-mode .input-group-text,
html.dark-mode .custom-select,
html.dark-mode textarea {
    background-color: var(--dark-surface);  /* cinza muito escuro, suave no fundo */
    border: 1px solid var(--dark-border);
    color: var(--dark-text) !important;
}

html.dark-mode .form-control::placeholder,
html.dark-mode textarea::placeholder {
    color: var(--dark-text-muted);
}

html.dark-mode .form-control:focus,
html.dark-mode .custom-select:focus,
html.dark-mode textarea:focus {
    border-color: var(--dark-primary);  /* azul elegante para foco */
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5); /* sombra azul suave */
    background-color: var(--dark-surface);
}

/* Labels e legendas */
html.dark-mode label,
html.dark-mode legend {
    color: var(--dark-text-muted);
}

html.dark-mode legend {
    color: var(--dark-primary);
    font-weight: 600;
}
/* ---------- TABELAS ---------- */
html.dark-mode .table {
    color: var(--dark-text);
}
html.dark-mode .table thead th {
    background-color: var(--dark-surface);
    border-bottom: 2px solid var(--dark-border);
    color: var(--dark-text);
}
html.dark-mode .table th, html.dark-mode .table td {
    border-top: 1px solid var(--dark-border);
}
html.dark-mode .table-bordered, html.dark-mode .table-bordered td, html.dark-mode .table-bordered th {
    border: 1px solid var(--dark-border);
}
html.dark-mode .table-hover tbody tr:hover {
    color: var(--dark-text);
    background-color: var(--dark-hover);
}
/* INÍCIO DA ADIÇÃO: Estilos para tabelas coloridas */
html.dark-mode .table-primary, html.dark-mode .table-primary > th, html.dark-mode .table-primary > td {
    background-color: #2c3a62;
}
html.dark-mode .table-secondary, html.dark-mode .table-secondary > th, html.dark-mode .table-secondary > td {
    background-color: #41424a;
}
html.dark-mode .table-success, html.dark-mode .table-success > th, html.dark-mode .table-success > td {
    background-color: #1a3c26;
}
html.dark-mode .table-danger, html.dark-mode .table-danger > th, html.dark-mode .table-danger > td {
    background-color: #421814;
}
html.dark-mode .table-warning, html.dark-mode .table-warning > th, html.dark-mode .table-warning > td {
    background-color: #4d3c11;
}
html.dark-mode .table-info, html.dark-mode .table-info > th, html.dark-mode .table-info > td {
    background-color: #103c42;
}
html.dark-mode .table-light, html.dark-mode .table-light > th, html.dark-mode .table-light > td {
    background-color: #3c3c3c;
    color: var(--dark-text);
}
html.dark-mode .table-dark, html.dark-mode .table-dark > th, html.dark-mode .table-dark > td {
    background-color: var(--dark-surface);
}
/* FIM DA ADIÇÃO */

/* ---------- BOTÕES ---------- */
html.dark-mode .btn-primary {
    color: var(--dark-text) !important;
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}
html.dark-mode .btn-primary:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-border) !important;
}
html.dark-mode .btn-secondary {
    color: #fff !important;
    background-color: var(--dark-secondary) !important;
    border-color: var(--dark-secondary) !important;
}
html.dark-mode .btn-secondary:hover {
    background-color: #717384 !important;
    border-color: #6b6d7d !important;
}
html.dark-mode .btn-success {
    color: #fff !important;
    background-color: var(--dark-success);
    border-color: var(--dark-success);
}
html.dark-mode .btn-success:hover {
    background-color: #218838;
}
html.dark-mode .btn-danger {
    color: #fff !important;
    background-color: var(--dark-danger);
    border-color: var(--dark-danger);
}
html.dark-mode .btn-danger:hover {
    background-color: #c82333;
}
html.dark-mode .btn-info {
    color: #fff !important;
    background-color: var(--dark-info);
    border-color: var(--dark-info);
}
html.dark-mode .btn-info:hover {
    background-color: #2a96a5;
}
html.dark-mode .btn-warning {
    color: #fff !important;
    background-color: var(--dark-warning);
    border-color: var(--dark-warning);
}
html.dark-mode .btn-warning:hover {
    background-color: #e0a800;
}
html.dark-mode .btn-light {
    background-color: #3c3c3c;
    border-color: #444;
    color: var(--dark-text);
} /* ADIÇÃO */
html.dark-mode .btn-dark {
    background-color: #1e1e1e;
    border-color: #3c3c3c;
    color: var(--dark-text);
} /* ADIÇÃO */

/* Botões de Contorno (Outline) */
html.dark-mode .btn-outline-primary {
    color: var(--dark-primary);
    border-color: var(--dark-primary);
}
html.dark-mode .btn-outline-primary:hover {
    color: #fff;
    background-color: var(--dark-primary);
    border-color: var(--dark-primary);
}
html.dark-mode .btn-outline-secondary {
    color: var(--dark-secondary);
    border-color: var(--dark-secondary);
}
html.dark-mode .btn-outline-secondary:hover {
    color: #fff;
    background-color: var(--dark-secondary);
    border-color: var(--dark-secondary);
}
html.dark-mode .btn-outline-success {
    color: var(--dark-success);
    border-color: var(--dark-success);
}
html.dark-mode .btn-outline-success:hover {
    color: #fff;
    background-color: var(--dark-success);
    border-color: var(--dark-success);
}
html.dark-mode .btn-outline-danger {
    color: var(--dark-danger);
    border-color: var(--dark-danger);
}
html.dark-mode .btn-outline-danger:hover {
    color: #fff;
    background-color: var(--dark-danger);
    border-color: var(--dark-danger);
}
html.dark-mode .btn-outline-info {
    color: var(--dark-info);
    border-color: var(--dark-info);
}
html.dark-mode .btn-outline-info:hover {
    color: #fff;
    background-color: var(--dark-info);
    border-color: var(--dark-info);
}
html.dark-mode .btn-outline-warning {
    color: var(--dark-warning);
    border-color: var(--dark-warning);
}
html.dark-mode .btn-outline-warning:hover {
    color: #fff;
    background-color: var(--dark-warning);
    border-color: var(--dark-warning);
}

/* ---------- COMPONENTES DIVERSOS ---------- */
html.dark-mode .card {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
}
html.dark-mode .card-header {
    background-color: var(--dark-bg);
    border-bottom: 1px solid var(--dark-border);
}
html.dark-mode .card-footer {
    background-color: var(--dark-bg);
    border-top: 1px solid var(--dark-border);
}
html.dark-mode .breadcrumb {
    background-color: transparent;
}
html.dark-mode .dropdown-menu {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}
html.dark-mode .dropdown-item {
    color: var(--dark-text-muted);
}
html.dark-mode .dropdown-item:hover, html.dark-mode .dropdown-item:focus {
    color: var(--dark-text);
    background-color: var(--dark-hover);
}
html.dark-mode .close {
    color: white !important;
    opacity: 0.8;
}
html.dark-mode fieldset {
    border-color: var(--dark-border) !important;
}

/* INÍCIO DA ADIÇÃO: Estilos para componentes que faltavam */
html.dark-mode .progress {
    background-color: var(--dark-bg);
}
html.dark-mode .bg-gray-100 {
    background-color: var(--dark-bg) !important;
}
html.dark-mode .bg-gray-200 {
    background-color: var(--dark-surface) !important;
}
html.dark-mode .bg-gray-300 {
    background-color: var(--dark-hover) !important;
}
html.dark-mode .bg-gray-400, html.dark-mode .bg-light {
    background-color: var(--dark-border) !important;
}

html.dark-mode .border-left-primary {
    border-left-color: var(--dark-primary) !important;
}
html.dark-mode .border-left-secondary {
    border-left-color: var(--dark-secondary) !important;
}
html.dark-mode .border-left-success {
    border-left-color: var(--dark-success) !important;
}
html.dark-mode .border-left-info {
    border-left-color: var(--dark-info) !important;
}
html.dark-mode .border-left-warning {
    border-left-color: var(--dark-warning) !important;
}
html.dark-mode .border-left-danger {
    border-left-color: var(--dark-danger) !important;
}

html.dark-mode .text-primary {
    color: var(--dark-primary) !important;
}
html.dark-mode .text-secondary {
    color: var(--dark-secondary) !important;
}
html.dark-mode .text-success {
    color: var(--dark-success) !important;
}
html.dark-mode .text-info {
    color: var(--dark-info) !important;
}
html.dark-mode .text-warning {
    color: var(--dark-warning) !important;
}
html.dark-mode .text-danger {
    color: var(--dark-danger) !important;
}
html.dark-mode .text-light {
    color: #f8f9fc !important;
}
html.dark-mode .text-dark {
    color: #ffffff !important;
} /* CORRIGIDO: de #f1f1f1 para #ffffff */
html.dark-mode .text-gray-300 {
    color: #6c757d !important;
}
html.dark-mode .text-gray-500 {
    color: #a0a0a0 !important;
}
html.dark-mode .text-gray-700 {
    color: #adb5bd !important;
}

html.dark-mode .badge-primary {
    background-color: var(--dark-primary);
}
html.dark-mode .badge-secondary {
    background-color: var(--dark-secondary);
}
html.dark-mode .badge-success {
    background-color: var(--dark-success);
}
html.dark-mode .badge-info {
    background-color: var(--dark-info);
}
html.dark-mode .badge-warning {
    background-color: var(--dark-warning);
    color: #1e1e1e !important;
}
html.dark-mode .badge-danger {
    background-color: var(--dark-danger);
}
html.dark-mode .badge-light {
    background-color: #444;
    color: var(--dark-text);
}
html.dark-mode .badge-dark {
    background-color: #1e1e1e;
    color: var(--dark-text-muted);
    border: 1px solid var(--dark-border);
}

html.dark-mode .dropdown-list-image .status-indicator {
    border-color: var(--dark-surface) !important;
}
html.dark-mode .icon-circle {
    color: white;
}
html.dark-mode .bg-login-image, html.dark-mode .bg-register-image, html.dark-mode .bg-password-image {
    filter: brightness(0.7);
}
/* FIM DA ADIÇÃO */


/* ---------- ALERTAS ---------- */
html.dark-mode .alert-success {
    background-color: #1a3c26;
    color: #a7d7b8;
    border-color: #2a6845;
}
html.dark-mode .alert-danger {
    background-color: #421814;
    color: #f5c6cb;
    border-color: #8c2f26;
}
html.dark-mode .alert-warning {
    background-color: #4d3c11;
    color: #ffeeba;
    border-color: #997a22;
}
html.dark-mode .alert-info {
    background-color: #103c42;
    color: #bee5eb;
    border-color: #207a86;
}
html.dark-mode .alert-secondary {
    background-color: var(--dark-surface);
    color: var(--dark-text-muted);
    border-color: var(--dark-border);
}
html.dark-mode .alert-primary {
    background-color: #2c3a62;
    color: #cdd8f6;
    border-color: #4e73df;
} /* ADIÇÃO */
html.dark-mode .alert-light {
    background-color: #3c3c3c;
    color: var(--dark-text);
    border-color: #444;
} /* ADIÇÃO */
html.dark-mode .alert-dark {
    background-color: #1e1e1e;
    color: var(--dark-text);
    border-color: #3c3c3c;
} /* ADIÇÃO */

/* ---------- PAGINAÇÃO ---------- */
html.dark-mode .page-link {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}
html.dark-mode .page-link:hover {
    background-color: var(--dark-hover);
}
html.dark-mode .page-item.active .page-link {
    background-color: var(--dark-info);
    border-color: var(--dark-info);
    color: var(--dark-text);
}
html.dark-mode .page-item.disabled .page-link {
    background-color: var(--dark-surface);
    color: #666;
}

/* ---------- MODAIS E SWEETALERT ---------- */
html.dark-mode .swal2-popup, html.dark-mode .modal-content {
    background: var(--dark-surface) !important;
}
html.dark-mode .modal-header {
    background-color: var(--dark-bg) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}
html.dark-mode .modal-footer {
    background-color: var(--dark-bg) !important;
    border-top: 1px solid var(--dark-border) !important;
}

/* ---------- SCROLLBAR ---------- */
html.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-bg);
}
html.dark-mode ::-webkit-scrollbar-thumb {
    background-color: var(--dark-border);
    border-radius: 5px;
}
html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: var(--dark-hover);
}

/* ---------- BANNER 000WEBHOST ---------- */
html.dark-mode img[src*="000webhost"] {
    display: none;
}

/* ============================================== */
/*      FIX DEFINITIVO PARA DATATABLES            */
/* ============================================== */

/* 1. Corrige a paginação azul */
html.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* 2. Corrige os ícones que somem */
html.dark-mode table.dataTable > thead .sorting_asc:before,
html.dark-mode table.dataTable > thead .sorting_desc:after {
    opacity: 1 !important;
    color: var(--dark-text) !important;
}
html.dark-mode table.dataTable > thead .sorting:before,
html.dark-mode table.dataTable > thead .sorting:after {
    opacity: 0.4 !important;
    color: var(--dark-text) !important;
}

/* Correção para List Group no Tema Escuro */
.dark-mode .list-group-item {
    background-color: transparent; /* Ou a cor de fundo do seu card, ex: #2a2b33 */
    border-color: rgba(255, 255, 255, 0.125); /* Uma cor de borda sutil para o modo escuro */
}

/* Correção para a LINHA do Stepper no Tema Escuro */
.dark-mode .stepper-line {
    background-color: var(--dark-border); /* Usando sua variável de cor de borda */
}

/* ================================================================ */
/* ✅ SOLUÇÃO DEFINITIVA PARA WIZARD / STEPPER                       */
/* Usando classes que garantem a maior especificidade possível.      */
/* ================================================================ */

/* LINHA DIVISÓRIA (Para escurecer a linha vertical/horizontal clara) */
html.dark-mode div.card-body div.stepper-wrapper div.stepper-line {
    background-color: var(--dark-border) !important;
}

/* CÍRCULO INATIVO (O contador dos passos que não estão ativos) */
html.dark-mode div.card-body div.stepper-wrapper div.stepper-counter {
    background-color: var(--dark-border) !important;
    color: var(--dark-text-muted) !important;
    border: 1px solid var(--dark-border) !important;
}

/* CÍRCULO ATIVO (O contador do passo atual - que está azul/branco) */
html.dark-mode div.card-body div.stepper-wrapper div.stepper-item.active div.stepper-counter {
    background-color: var(--dark-primary) !important; /* Cor do círculo ativo (azul) */
    color: var(--dark-text) !important; /* Número interno branco */
    border: 1px solid var(--dark-primary) !important;
}

/* Texto do passo ATIVO */
html.dark-mode div.card-body div.stepper-wrapper div.stepper-item.active {
    color: var(--dark-primary) !important;
}

/* ================================================================ */
/* ✅ CORREÇÃO FORÇADA PARA SELECT2 (TODOS OS ESTADOS)              */
/* Sobrescreve fundos, bordas e cores de texto em campos e dropdowns */
/* ================================================================ */

/* 1. SELEÇÃO PRINCIPAL (O CAMPO VISÍVEL) */
html.dark-mode .select2-container--default .select2-selection--single {
    /* Fundo branco e borda clara */
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

/* 2. TEXTO E PLACEHOLDER NO CAMPO */
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dark-text) !important;
}
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--dark-text-muted) !important;
}

/* 3. SETA (O triângulo para baixo) */
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
    /* Mudar a cor da seta para branco ou cinza claro */
    border-color: var(--dark-text-muted) transparent transparent transparent !important;
}

/* 4. DROPDOWN (A lista de opções que abre) */
html.dark-mode .select2-dropdown {
    /* Fundo branco e borda clara do dropdown */
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

/* 5. OPÇÕES GERAIS (O texto dos itens da lista) */
html.dark-mode .select2-results__option {
    color: var(--dark-text) !important;
}

/* 6. OPÇÃO SELECIONADA (Fundo #ddd) */
html.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text) !important;
}

/* 7. OPÇÃO DESTACADA/HOVER (Fundo azul #5897fb) */
html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dark-primary) !important; /* Seu azul primário */
    color: var(--dark-text) !important; /* Texto branco */
}

/* 8. CAMPO DE PESQUISA DENTRO DO DROPDOWN */
html.dark-mode .select2-search--dropdown .select2-search__field {
    /* O campo de input de texto para pesquisa */
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* 9. SELECT2 MÚLTIPLO (se estiver usando) */
html.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}
/* Tags selecionadas (múltiplas) */
html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* ================================================================ */
/* ✅ CORREÇÃO PARA AUTOCOMPLETE (jQuery UI)                        */
/* Garante cores escuras para o dropdown de sugestões e bordas.    */
/* ================================================================ */

/* 1. FUNDO E BORDA PRINCIPAL DO DROPDOWN DE SUGESTÕES */
html.dark-mode .ui-autocomplete {
    /* Sobrescreve background:#FFF e border:#CCC solid 1px; */
    background: var(--dark-surface) !important;
    border: 1px solid var(--dark-border) !important;
}

/* 2. TEXTO DAS OPÇÕES */
html.dark-mode .ui-menu .ui-menu-item a {
    /* Cor do texto para ser legível */
    color: var(--dark-text) !important;
    /* Sobrescreve a borda divisória (#e3e6f0) */
    border-bottom: 1px solid var(--dark-border) !important;
}

/* 3. OPÇÃO DESTACADA/HOVER (Cor padrão do jQuery UI é importante aqui) */
html.dark-mode .ui-menu .ui-menu-item a.ui-state-focus,
html.dark-mode .ui-menu .ui-menu-item a:hover {
    /* Usa a cor primária ou hover do seu tema Dark */
    background: var(--dark-hover) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-hover) !important; /* Remove a borda divisória na opção focada */
}

/* 4. ÍCONE DE CARREGAMENTO (IMPORTANTE) */
html.dark-mode .ui-autocomplete-loading {
    /* Sobrescreve o fundo branco do loading. Não podemos mudar a imagem, mas sim o fundo */
    background-color: var(--dark-surface) !important;
    /* Se você tiver uma imagem 'ajax-loader-dark.gif', substitua aqui */
    /* Exemplo: background: var(--dark-surface) url('../img/ajax-loader-dark.gif') right center no-repeat !important; */
}

html.dark-mode hr {
    /* Sobrescreve a regra padrão 'border-top: 1px solid rgba(0,0,0,.1);' */
    border-top: 1px solid var(--dark-border) !important;
    /* Garante que o HR use a cor #333333, que é visível no preto. */
}