/*
 * RECeBa — tema claro/escuro
 *
 * O tema claro é o AdminLTE original (sidebar light). O escuro substitui o cinza
 * padrão do AdminLTE (#454d55/#343a40) por neutros levemente puxados para o verde
 * da marca, para que sidebar, cards e tabelas pareçam do mesmo sistema.
 *
 * Tudo é ativado pela classe `dark-mode` no <body> (ver assets/js/tema.js).
 * Telas com estilo próprio podem usar os tokens abaixo via var(--tema-*).
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

body {
   --tema-fundo: #f4f6f9;
   --tema-superficie: #ffffff;
   --tema-superficie-2: #f8f9fa;
   --tema-superficie-3: #f1f3f4;
   --tema-borda: #dee2e6;
   --tema-borda-forte: #ced4da;
   --tema-texto: #212529;
   --tema-texto-2: #495057;
   --tema-texto-3: #6c757d;
   --tema-destaque: #28a745;
   --tema-destaque-suave: rgba(40, 167, 69, 0.14);
   --tema-link: #1a73e8;
   --tema-grade: rgba(0, 0, 0, 0.06);
   --tema-tooltip: #343a40;
}

body.dark-mode {
   --tema-fundo: #101513;
   --tema-superficie: #171d1a;
   --tema-superficie-2: #1d2420;
   --tema-superficie-3: #252e29;
   --tema-borda: #2b3530;
   --tema-borda-forte: #3a4640;
   --tema-texto: #e3eae6;
   --tema-texto-2: #b3beb8;
   --tema-texto-3: #8b9891;
   --tema-destaque: #3ec06a;
   --tema-destaque-suave: rgba(62, 192, 106, 0.16);
   --tema-link: #8ab4f8;
   --tema-grade: rgba(255, 255, 255, 0.07);
   --tema-tooltip: #2b3530;

   color-scheme: dark;
   background-color: var(--tema-fundo) !important;
   color: var(--tema-texto);
}

/* Transição curta e única ao trocar de tema (adicionada pelo tema.js) */
body.tema-transicao,
body.tema-transicao *,
body.tema-transicao *::before,
body.tema-transicao *::after {
   transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
               border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
               color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
   body.tema-transicao,
   body.tema-transicao * {
      transition: none !important;
   }
}

/* ── Botão de alternância no navbar ─────────────────────────────────────── */

.tema-toggle.nav-link {
   border: 0;
   background: none;
   box-shadow: none;
   text-decoration: none;
   position: relative;
   width: 2.5rem;
}

.tema-toggle i {
   font-size: 1.05rem;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   transition: opacity 0.2s ease-out, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tema-toggle .tema-toggle-sol {
   opacity: 0;
   transform: translate(-50%, -50%) rotate(-90deg) scale(0.6);
}

body.dark-mode .tema-toggle .tema-toggle-lua {
   opacity: 0;
   transform: translate(-50%, -50%) rotate(90deg) scale(0.6);
}

body.dark-mode .tema-toggle .tema-toggle-sol {
   opacity: 1;
   transform: translate(-50%, -50%) rotate(0) scale(1);
   color: #f5c451;
}

.tema-toggle:focus {
   outline: none;
}

.tema-toggle:focus-visible {
   outline: 2px solid var(--tema-destaque);
   outline-offset: -4px;
   border-radius: 6px;
}

/* ── Logo: subtítulo escuro no claro, branco no escuro ──────────────────── */

.brand-link .logo-tema-escuro,
body.dark-mode .brand-link .logo-tema-claro {
   display: none;
}

body.dark-mode .brand-link .logo-tema-escuro {
   display: inline-block;
}

/* ── Navegador: seleção e scrollbars ────────────────────────────────────── */

::selection {
   background: var(--tema-destaque-suave);
   color: inherit;
}

body.dark-mode ::selection {
   background: rgba(62, 192, 106, 0.32);
}

body.dark-mode * {
   scrollbar-color: var(--tema-borda-forte) transparent;
}

/* ── Verde da marca ─────────────────────────────────────────────────────────
   O dark do AdminLTE troca "success" por verde-água (#00bc8c). O RECeBa mantém
   o mesmo verde nos dois temas: botões, sidebar, cards e badges. */

body.dark-mode .btn-success,
body.dark-mode .bg-success,
body.dark-mode .badge-success,
body.dark-mode .sidebar-light-success .nav-sidebar > .nav-item > .nav-link.active,
body.dark-mode .card-success:not(.card-outline) > .card-header {
   background-color: #28a745 !important;
   border-color: #28a745;
   color: #fff !important;
}

body.dark-mode .btn-success:hover,
body.dark-mode .btn-success:focus,
body.dark-mode .btn-success:not(:disabled):not(.disabled):active {
   background-color: #218838 !important;
   border-color: #1e7e34;
}

body.dark-mode .card-success.card-outline {
   border-top-color: #28a745;
}

body.dark-mode .btn-outline-success {
   border-color: var(--tema-destaque);
   color: var(--tema-destaque);
}

body.dark-mode .btn-outline-success:hover {
   background-color: #28a745;
   color: #fff;
}

body.dark-mode .text-success {
   color: var(--tema-destaque) !important;
}

/* ── Estrutura: navbar, sidebar, conteúdo, rodapé ───────────────────────── */

body.dark-mode .content-wrapper,
body.dark-mode .content-wrapper .content-header {
   background-color: var(--tema-fundo);
   color: var(--tema-texto);
}

body.dark-mode .main-header,
body.dark-mode .main-header.navbar-white {
   background-color: var(--tema-superficie);
   border-bottom-color: var(--tema-borda);
}

body.dark-mode .main-header .nav-link,
body.dark-mode .navbar-light .navbar-nav .nav-link {
   color: var(--tema-texto-2);
}

body.dark-mode .main-header .nav-link:hover,
body.dark-mode .navbar-light .navbar-nav .nav-link:hover,
body.dark-mode .navbar-light .navbar-nav .show > .nav-link {
   color: var(--tema-texto);
}

body.dark-mode .main-sidebar[class*="sidebar-light-"],
body.dark-mode .main-sidebar[class*="sidebar-light-"]::before {
   background-color: var(--tema-superficie);
}

body.dark-mode .main-sidebar[class*="sidebar-light-"] {
   border-right: 1px solid var(--tema-borda);
   box-shadow: none !important;
}

body.dark-mode [class*="sidebar-light-"] .brand-link {
   border-bottom-color: var(--tema-borda);
   color: var(--tema-texto);
}

body.dark-mode [class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link,
body.dark-mode [class*="sidebar-light-"] .nav-header {
   color: var(--tema-texto-2);
}

body.dark-mode [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link {
   color: var(--tema-texto-3);
}

body.dark-mode [class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link:hover,
body.dark-mode [class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link:focus,
body.dark-mode [class*="sidebar-light-"] .nav-sidebar > .nav-item.menu-open > .nav-link,
body.dark-mode [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link:hover,
body.dark-mode [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link:focus {
   background-color: var(--tema-superficie-3);
   color: var(--tema-texto);
}

body.dark-mode [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link.active,
body.dark-mode [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link.active:hover {
   background-color: var(--tema-destaque-suave);
   color: var(--tema-destaque);
}

body.dark-mode [class*="sidebar-light-"] .user-panel {
   border-bottom-color: var(--tema-borda);
}

body.dark-mode .main-footer {
   background-color: var(--tema-superficie);
   border-top-color: var(--tema-borda);
   color: var(--tema-texto-2);
}

body.dark-mode .control-sidebar,
body.dark-mode .control-sidebar::before {
   background-color: var(--tema-superficie);
}

/* ── Tipografia e utilitários do Bootstrap ──────────────────────────────── */

body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.small-box-footer):not(.page-link):not(.badge):not(.brand-link) {
   color: var(--tema-link);
}

body.dark-mode .text-muted {
   color: var(--tema-texto-3) !important;
}

/* Texto escuro sobre o fundo escuro some: vira texto principal.
   Badges e botões com fundo claro (ex.: cor da sigla do parceiro) mantêm o escuro. */
body.dark-mode .text-dark:not(.badge):not(.btn):not(.btn-warning):not(.bg-warning):not(.bg-light) {
   color: var(--tema-texto) !important;
}

body.dark-mode .badge.text-dark,
body.dark-mode .bg-warning,
body.dark-mode .bg-warning .text-dark {
   color: #1f2d3d !important;
}

body.dark-mode .bg-white {
   background-color: var(--tema-superficie) !important;
}

body.dark-mode .bg-light {
   background-color: var(--tema-superficie-2) !important;
   color: var(--tema-texto) !important;
}

body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-left,
body.dark-mode .border-right {
   border-color: var(--tema-borda) !important;
}

body.dark-mode hr {
   border-top-color: var(--tema-borda);
}

body.dark-mode code {
   color: #ff8fb1;
}

body.dark-mode .close,
body.dark-mode .close:hover {
   color: var(--tema-texto);
   text-shadow: none;
}

/* ── Cards, boxes, timeline ─────────────────────────────────────────────── */

body.dark-mode .card {
   background-color: var(--tema-superficie);
   color: var(--tema-texto);
   box-shadow: 0 0 0 1px var(--tema-borda), 0 1px 3px rgba(0, 0, 0, 0.35);
}

body.dark-mode .card-header {
   border-bottom-color: var(--tema-borda);
}

body.dark-mode .card:not([class*="card-"]) > .card-header,
body.dark-mode .card.card-outline > .card-header {
   background-color: transparent;
   color: var(--tema-texto);
}

body.dark-mode .card-footer {
   background-color: var(--tema-superficie-2);
   border-top-color: var(--tema-borda);
}

body.dark-mode .card-header .btn-tool {
   color: var(--tema-texto-3);
}

body.dark-mode .card-header .btn-tool:hover {
   color: var(--tema-texto);
}

body.dark-mode .info-box,
body.dark-mode .callout {
   background-color: var(--tema-superficie);
   color: var(--tema-texto);
   box-shadow: 0 0 0 1px var(--tema-borda);
}

body.dark-mode .small-box {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.dark-mode .small-box .icon > i {
   color: rgba(0, 0, 0, 0.22);
}

body.dark-mode .timeline::before {
   background-color: var(--tema-borda);
}

body.dark-mode .timeline > div > .timeline-item {
   background-color: var(--tema-superficie-2);
   color: var(--tema-texto);
   border-color: var(--tema-borda) !important;
}

body.dark-mode .timeline > div > .timeline-item > .timeline-header {
   border-bottom-color: var(--tema-borda);
   color: var(--tema-texto);
}

body.dark-mode .timeline > div > .timeline-item > .time {
   color: var(--tema-texto-3);
}

body.dark-mode .timeline > .time-label > span {
   background-color: var(--tema-superficie-3);
   color: var(--tema-texto);
}

body.dark-mode .list-group-item {
   background-color: var(--tema-superficie);
   border-color: var(--tema-borda);
   color: var(--tema-texto);
}

body.dark-mode .list-group-item-action:hover,
body.dark-mode .list-group-item-action:focus {
   background-color: var(--tema-superficie-3);
}

/* ── Tabelas ────────────────────────────────────────────────────────────── */

body.dark-mode .table {
   color: var(--tema-texto);
   background-color: transparent;
}

body.dark-mode .table th,
body.dark-mode .table td,
body.dark-mode .table thead th,
body.dark-mode .table tbody + tbody,
body.dark-mode .table-bordered,
body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td {
   border-color: var(--tema-borda);
}

body.dark-mode .table thead th,
body.dark-mode .table .thead-light th {
   background-color: var(--tema-superficie-2);
   color: var(--tema-texto-2);
   border-color: var(--tema-borda);
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
   background-color: rgba(255, 255, 255, 0.025);
}

body.dark-mode .table-hover tbody tr:hover {
   background-color: var(--tema-superficie-3);
   color: var(--tema-texto);
}

body.dark-mode .table-light,
body.dark-mode .table-light > th,
body.dark-mode .table-light > td {
   background-color: var(--tema-superficie-2);
}

/* Linhas com fundo fixo (#f8f9fa) nos relatórios */
body.dark-mode tr[style*="background-color: #f8f9fa"] {
   background-color: var(--tema-superficie-2) !important;
}

/* ── Formulários ────────────────────────────────────────────────────────── */

body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode .custom-file-label {
   background-color: var(--tema-superficie-2);
   border-color: var(--tema-borda-forte);
   color: var(--tema-texto);
}

body.dark-mode .form-control:focus,
body.dark-mode .custom-select:focus {
   background-color: var(--tema-superficie-2);
   border-color: var(--tema-destaque);
   color: var(--tema-texto);
   box-shadow: 0 0 0 0.2rem var(--tema-destaque-suave);
}

body.dark-mode .form-control::placeholder {
   color: var(--tema-texto-3);
   opacity: 1;
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
   background-color: var(--tema-superficie-3);
   color: var(--tema-texto-2);
}

body.dark-mode .form-control.is-invalid,
body.dark-mode .was-validated .form-control:invalid {
   border-color: #e35d6a;
}

body.dark-mode .invalid-feedback {
   color: #f08a94;
}

body.dark-mode .input-group-text {
   background-color: var(--tema-superficie-3);
   border-color: var(--tema-borda-forte);
   color: var(--tema-texto-2);
}

body.dark-mode select.form-control option {
   background-color: var(--tema-superficie-2);
   color: var(--tema-texto);
}

body.dark-mode .custom-control-label::before {
   background-color: var(--tema-superficie-2);
   border-color: var(--tema-borda-forte);
}

body.dark-mode .custom-control-input:checked ~ .custom-control-label::before {
   background-color: var(--tema-destaque);
   border-color: var(--tema-destaque);
}

body.dark-mode .custom-switch .custom-control-label::after {
   background-color: var(--tema-texto-3);
}

body.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
   background-color: #fff;
}

body.dark-mode label,
body.dark-mode .col-form-label {
   color: var(--tema-texto);
}

/* ── Botões ─────────────────────────────────────────────────────────────── */

body.dark-mode .btn-default,
body.dark-mode .btn-light {
   background-color: var(--tema-superficie-3);
   border-color: var(--tema-borda-forte);
   color: var(--tema-texto);
}

body.dark-mode .btn-default:hover,
body.dark-mode .btn-light:hover {
   background-color: var(--tema-borda-forte);
   color: var(--tema-texto);
}

body.dark-mode .btn-outline-secondary {
   border-color: var(--tema-borda-forte);
   color: var(--tema-texto-2);
}

body.dark-mode .btn-outline-secondary:hover {
   background-color: var(--tema-superficie-3);
   color: var(--tema-texto);
}

body.dark-mode .btn-outline-dark {
   border-color: var(--tema-texto-3);
   color: var(--tema-texto);
}

body.dark-mode .btn-link {
   color: var(--tema-link);
}

/* ── Dropdowns, modais, abas, paginação ─────────────────────────────────── */

body.dark-mode .dropdown-menu {
   background-color: var(--tema-superficie-2);
   border-color: var(--tema-borda);
   color: var(--tema-texto);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

body.dark-mode .dropdown-item {
   color: var(--tema-texto);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
   background-color: var(--tema-superficie-3);
   color: var(--tema-texto);
}

body.dark-mode .dropdown-divider {
   border-top-color: var(--tema-borda);
}

body.dark-mode .dropdown-header {
   color: var(--tema-texto-3);
}

body.dark-mode .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
   background-color: var(--tema-superficie-2);
}

body.dark-mode .modal-content {
   background-color: var(--tema-superficie);
   color: var(--tema-texto);
   border-color: var(--tema-borda);
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
   border-color: var(--tema-borda);
}

body.dark-mode .modal-backdrop.show {
   opacity: 0.7;
}

body.dark-mode .nav-tabs {
   border-bottom-color: var(--tema-borda);
}

body.dark-mode .nav-tabs .nav-link {
   color: var(--tema-texto-2);
}

body.dark-mode .nav-tabs .nav-link:hover,
body.dark-mode .nav-tabs .nav-link:focus {
   border-color: var(--tema-borda) var(--tema-borda) transparent;
   color: var(--tema-texto);
}

body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .nav-tabs .nav-item.show .nav-link {
   background-color: var(--tema-superficie);
   border-color: var(--tema-borda) var(--tema-borda) var(--tema-superficie);
   color: var(--tema-texto);
}

body.dark-mode .nav-pills .nav-link:not(.active) {
   color: var(--tema-texto-2);
}

body.dark-mode .nav-pills .nav-link:not(.active):hover {
   color: var(--tema-texto);
}

body.dark-mode .page-link,
body.dark-mode .page-item:not(.active) .page-link {
   background-color: var(--tema-superficie);
   border-color: var(--tema-borda);
   color: var(--tema-texto-2);
}

body.dark-mode .page-link:hover {
   background-color: var(--tema-superficie-3);
   border-color: var(--tema-borda);
   color: var(--tema-texto);
}

body.dark-mode .page-item.active .page-link {
   background-color: var(--tema-destaque);
   border-color: var(--tema-destaque);
   color: #0d1a12;
}

body.dark-mode .page-item.disabled .page-link {
   background-color: var(--tema-superficie);
   border-color: var(--tema-borda);
   color: var(--tema-texto-3);
}

body.dark-mode .progress {
   background-color: var(--tema-superficie-3);
}

/* ── Notificações do navbar ─────────────────────────────────────────────── */

.notif-cabecalho {
   background: #1a73e8;
}

body.dark-mode .notif-cabecalho {
   background: #1d4f99;
}

.notif-lista {
   background: var(--tema-superficie);
}

.notif-item {
   color: inherit;
   text-decoration: none;
   transition: background-color 0.15s;
}

.notif-item:hover,
.notif-item:focus {
   background: var(--tema-superficie-3);
   color: inherit;
   text-decoration: none;
}

.notif-titulo {
   color: var(--tema-texto);
}

.notif-rodape {
   background: var(--tema-superficie-2);
}

.notif-link,
.notif-link:hover {
   color: var(--tema-link);
   text-decoration: none;
}

/* ── Login / cadastro ───────────────────────────────────────────────────── */

body.dark-mode.login-page,
body.dark-mode.register-page {
   background-color: var(--tema-fundo) !important;
}

body.dark-mode .login-card-body,
body.dark-mode .register-card-body {
   background-color: var(--tema-superficie);
   color: var(--tema-texto);
}

body.dark-mode .login-logo a,
body.dark-mode .register-logo a {
   color: var(--tema-texto);
}

/* ── Plugins: Select2 ───────────────────────────────────────────────────── */

body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
   background-color: var(--tema-superficie-2);
   border-color: var(--tema-borda-forte);
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__rendered {
   color: var(--tema-texto);
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
   color: var(--tema-texto-3);
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
   border-top-color: var(--tema-texto-3);
}

body.dark-mode .select2-container--default.select2-container--focus .select2-selection--single,
body.dark-mode .select2-container--default.select2-container--open .select2-selection--single,
body.dark-mode .select2-container--default.select2-container--focus .select2-selection--multiple {
   border-color: var(--tema-destaque);
   box-shadow: 0 0 0 0.2rem var(--tema-destaque-suave);
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: var(--tema-superficie-3);
   border-color: var(--tema-borda-forte);
   color: var(--tema-texto);
}

body.dark-mode .select2-dropdown {
   background-color: var(--tema-superficie-2);
   border-color: var(--tema-borda-forte);
   color: var(--tema-texto);
}

body.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field,
body.dark-mode .select2-container--default .select2-search--inline .select2-search__field {
   background-color: var(--tema-superficie);
   border-color: var(--tema-borda-forte);
   color: var(--tema-texto);
}

body.dark-mode .select2-container--default .select2-results__option[aria-selected="true"],
body.dark-mode .select2-container--default .select2-results__option--selected {
   background-color: var(--tema-superficie-3);
}

body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
   background-color: #1f7a3c;
   color: #fff;
}

/* ── Plugins: SweetAlert2 ───────────────────────────────────────────────── */

body.dark-mode .swal2-popup {
   background-color: var(--tema-superficie);
   color: var(--tema-texto);
   box-shadow: 0 0 0 1px var(--tema-borda), 0 24px 64px rgba(0, 0, 0, 0.55);
}

body.dark-mode .swal2-title,
body.dark-mode .swal2-html-container {
   color: var(--tema-texto);
}

body.dark-mode .swal2-input,
body.dark-mode .swal2-textarea,
body.dark-mode .swal2-select {
   background-color: var(--tema-superficie-2);
   border-color: var(--tema-borda-forte);
   color: var(--tema-texto);
}

body.dark-mode .swal2-icon.swal2-success .swal2-success-circular-line-left,
body.dark-mode .swal2-icon.swal2-success .swal2-success-circular-line-right,
body.dark-mode .swal2-icon.swal2-success .swal2-success-fix {
   background-color: var(--tema-superficie) !important;
}

body.dark-mode .swal2-validation-message {
   background-color: var(--tema-superficie-2);
   color: var(--tema-texto-2);
}

body.dark-mode .swal2-timer-progress-bar {
   background: var(--tema-borda-forte);
}

/* ── Plugins: Leaflet (mapas) ───────────────────────────────────────────── */

/* Inverte só as imagens do mapa; as cores das vias voltam ao matiz original. */
body.dark-mode .leaflet-tile-pane {
   filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7);
}

body.dark-mode .leaflet-container {
   background-color: #1a1f1d;
}

body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip {
   background-color: var(--tema-superficie-2);
   color: var(--tema-texto);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

body.dark-mode .leaflet-container a.leaflet-popup-close-button {
   color: var(--tema-texto-3);
}

body.dark-mode .leaflet-bar a,
body.dark-mode .leaflet-bar a:hover {
   background-color: var(--tema-superficie-2);
   border-bottom-color: var(--tema-borda);
   color: var(--tema-texto);
}

body.dark-mode .leaflet-control-attribution {
   background-color: rgba(23, 29, 26, 0.8) !important;
   color: var(--tema-texto-3);
}