From fb3f94e5a35b5817967449eb4ede546dcaa11a41 Mon Sep 17 00:00:00 2001
From: LucasScopel <lucas.c.scopel@gmail.com>
Date: Wed, 12 Aug 2026 23:22:02 -0300
Subject: [PATCH] =?UTF-8?q?Padroniza=C3=A7=C3=A3o=20de=20Responsividade=20?=
 =?UTF-8?q?(#379)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/App.css                        |   7 +-
 src/assets/css/FormEnterSystem.css            |   5 +
 src/assets/css/Map.css                        |   2 +-
 src/assets/css/antd-theme.css                 | 434 ++++++++++++++----
 src/components/ComparativeAreaChart.jsx       |  25 +-
 .../TombosPorIntervaloTempo.component.tsx     |   4 +-
 src/features/login/LoginLayout.tsx            |  15 +-
 .../leaflet-plugins/leaflet.navbar.css        |  15 +
 8 files changed, 379 insertions(+), 128 deletions(-)

diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index e948fcad..955079a5 100644
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -70,7 +70,7 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.botao-gerar-codigo {
+.botao-gerar-codigo { 
     display: inline-flex;
     align-items: center;
 
@@ -80,8 +80,9 @@
 
     &:hover,
     &:focus {
-        color: #009944;
-        border-color: #009944;
+        color: #00B300 !important;
+        border-color: #00B300 !important;
+        box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
     }
 }
 
diff --git a/src/assets/css/FormEnterSystem.css b/src/assets/css/FormEnterSystem.css
index f2c00624..00d16581 100644
--- a/src/assets/css/FormEnterSystem.css
+++ b/src/assets/css/FormEnterSystem.css
@@ -8,6 +8,11 @@
 
 .login-form-forgot {
   float: right;
+  color: #007A33; 
+}
+
+.login-form-forgot:hover {
+  color: #009E4A; 
 }
 
 .login-form-button {
diff --git a/src/assets/css/Map.css b/src/assets/css/Map.css
index ab72e1ca..f8608469 100644
--- a/src/assets/css/Map.css
+++ b/src/assets/css/Map.css
@@ -13,7 +13,7 @@
 
 .spinner {
     border: 8px solid #f3f3f3;
-    border-top: 8px solid #3498db; 
+    border-top: 8px solid #00994A; 
     border-radius: 50%;
     width: 60px;
     height: 60px;
diff --git a/src/assets/css/antd-theme.css b/src/assets/css/antd-theme.css
index 7fd5bf84..6c199257 100644
--- a/src/assets/css/antd-theme.css
+++ b/src/assets/css/antd-theme.css
@@ -1,26 +1,69 @@
 /* Tema personalizado para Ant Design v4 */
 /* Cores principais: Verde #007A33, Amarelo #FFD53D */
 
-/* Cores primárias */
+/* Paleta de Cores */
+:root {
+    --primary-green: #007A33;
+    --primary-yellow: #B8860B;
+}
+
+/* Botão primário (aquele com o fundo verde de adicionar, pesquisar, entre outros) */
 .ant-btn-primary {
-  background-color: #007A33 !important;
-  border-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
+  border-color: var(--primary-green) !important;
 }
 
-.ant-btn-primary:hover,
-.ant-btn-primary:focus {
+/* Efeitos visuais ao interagir com o botão primário */
+.ant-btn-primary:not(:disabled):is(:hover, :focus, :active) {
   background-color: #00994A !important;
-  border-color: #00994A !important;
+  border-color: transparent !important;
+}
+
+/* Botão secundário (usado apenas em um botão de sair/cancelar na tela de adicionar tombo) */
+.ant-btn-secondary a{
+  color: black !important; 
+}
+
+/* Efeitos visuais no botão secundário ao interagir com ele */
+.ant-btn-secondary:not(:disabled):is(:hover, :focus, :active) {
+  color: var(--primary-green) !important;
+  border-color: var(--primary-green) !important;
 }
 
-.ant-btn-primary:active {
-  background-color: #00662A !important;
-  border-color: #00662A !important;
+/* Efeitos visuais no texto do botão secundário ao intereagir com o botão */
+.ant-btn-secondary:not(:disabled):is(:hover, :focus, :active) a {
+  color: var(--primary-green) !important;
+}
+
+/* Efietos visuais ao interagir com o botão padrão (aquele com o fundo transparente, de limpar e adicionar filtro, por exemplo)  */
+.ant-btn-default:not(:disabled):is(:hover, :focus, :active) {
+  border-color: var(--primary-green) !important; 
+  color: var(--primary-green) !important; 
+  box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
+}
+
+/* Transição nas características do botão marcado como dangerous, que é aquele vermelho */
+.ant-btn-dangerous {
+  transition: color 0.5s, text-shadow 0.5s, border-color 0.5s, box-shadow 0.5s; 
+}
+
+/* Transição nos ícones dentro do botão marcado dangerous */
+.ant-btn-dangerous .anticon {
+  transition: filter 0.5s; 
+}
+
+/* Efeito de hover no botão dangerous */
+.ant-btn-dangerous:not(:disabled):hover {
+  background-color: transparent !important; 
+  border-color: red !important;  
+  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2) !important;
+  color: red !important;
+  
 }
 
 /* Links */
 .ant-typography a {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 .ant-typography a:hover {
@@ -29,59 +72,178 @@
 
 /* Checkbox */
 .ant-checkbox-checked .ant-checkbox-inner {
-  background-color: #007A33 !important;
-  border-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
+  border-color: transparent !important;
+}
+
+/* Efeitos ao interagir com o checkbox */
+.ant-checkbox-wrapper:is(:hover, :focus-within, :active-within) .ant-checkbox-inner {
+  border-color: var(--primary-green) !important;
+  box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
 }
 
-.ant-checkbox-wrapper:hover .ant-checkbox-inner {
-  border-color: #007A33 !important;
+/* Precisei fazer essa alteração no ::after pois é onde consegui remover uma borda azul que ficava ao redor */
+.ant-checkbox-checked::after {
+  border: 1px solid var(--primary-green) !important;
 }
 
-/* Radio */
+/* Bolinha no interior do radio verde quando marcado */
+.ant-radio-checked .ant-radio-inner::after {
+  background-color: var(--primary-green) !important; 
+}
+
+/* Borda do radio quando marcado */
 .ant-radio-checked .ant-radio-inner {
-  background-color: #007A33 !important;
-  border-color: #007A33 !important;
+  border-color: var(--primary-green) !important; 
 }
 
+/* Efeito de hover no radio */
 .ant-radio-wrapper:hover .ant-radio-inner {
-  border-color: #007A33 !important;
+  border-color: var(--primary-green) !important;
+  box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
 }
 
-/* Select */
-.ant-select-focused .ant-select-selector {
-  border-color: #007A33 !important;
+/* Mantém a borda e box-shadow verde quando clica no radio  */
+.ant-radio-input:focus + .ant-radio-inner {
+  border-color: var(--primary-green) !important;
   box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
 }
 
-.ant-select-item-option-selected {
-  background-color: #007A33 !important;
+/* Inicia a bolinha interna do radio já verde, no processo de animação quando clicado */
+.ant-radio-inner::after {
+  background-color: var(--primary-green) !important;
 }
 
-.ant-select-item-option:hover {
+/* Inicia a borda do radio já verde, no processo de animação quando clicado */
+.ant-radio::after {
+  border-color: var(--primary-green) !important;
+}
+
+/* Efeitos visuais no select quando não está desativado */
+.ant-select:not(.ant-select-disabled):is(:hover, :focus, .ant-select-focused, :active) .ant-select-selector  { 
+  border-color: var(--primary-green) !important;
+  box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
+}
+
+/* Mesmos efeitos visuais do select aplicados àquela seta no seu interior */
+.ant-select:not(.ant-select-disabled):is(:hover, :focus, .ant-select-focused, :active) .ant-select-arrow .ant-select-suffix {
+  color: var(--primary-green) !important; 
+}
+
+/* Efeito de hover nas opções não selecionadas */
+.ant-select-item-option:not(.ant-select-item-option-selected):hover {
   background-color: rgba(0, 122, 51, 0.1) !important;
 }
 
-/* Input */
+/* Cores da opção selecionada */
+.ant-select-item-option-selected {
+  background-color: var(--primary-green) !important;
+  color: white !important; 
+}
+
+/* Efeito de hover e active na opção selecionada */
+.ant-select-item-option-selected:hover,
+.ant-select-item-active {
+  background-color: #00994A !important;
+}
+
+/* Efeito de hover quando a caixa de seleção está vazia */
+.ant-select-item-empty:hover {
+  background-color: rgba(0, 122, 51, 0.05) !important;
+}
+
+/* Efeitos visuais no input */
+.ant-input:not(.ant-input-disabled):hover,
 .ant-input:focus,
 .ant-input-focused {
-  border-color: #007A33 !important;
+  border-color: var(--primary-green) !important;
   box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
 }
 
-/* InputNumber */
-.ant-input-number:focus,
+/* Efeitos visuais no input number */
+.ant-input-number:is(:focus, :hover),
 .ant-input-number-focused {
-  border-color: #007A33 !important;
+  border-color: var(--primary-green) !important;
   box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
 }
 
-/* DatePicker */
-.ant-picker:focus,
+/* Efeitos visuais naquela setinha que avança ou no input number */
+.ant-input-number .ant-input-number-handler-up:is(:hover, :focus, :active) .ant-input-number-handler-up-inner {
+  color: var(--primary-green) !important;
+}
+
+/* Efeitos visuais naquela setinha que regrede no input number */
+.ant-input-number .ant-input-number-handler-down:is(:hover, :focus, :active) .ant-input-number-handler-down-inner {
+  color: var(--primary-green) !important;
+}
+
+/* Efeitos visuais em um row */
+.ant-form-item-row:is(:focus-within, :hover) .ant-input-affix-wrapper {
+  border-color: var(--primary-green) !important;
+  box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important; 
+}
+
+/* Tira os efeitos visuais no input dentro de um row (tela de login, por exemplo) */
+.ant-form-item-row:is(:focus-within, :hover) .ant-input-affix-wrapper .ant-input {
+  border-color: transparent !important; 
+  box-shadow: none !important;  
+}
+
+/* Tira o background no ícone ao fim do row, tipo o olho, na tela de login*/
+.ant-form-item-row .ant-input-affix-wrapper .ant-input-suffix .ant-btn-icon-only {
+  background-color: transparent !important;  
+}
+
+/* Cores padrões nesses ícones, que geralmente ficam dentro de inputs ou similares */
+.anticon-mail, 
+.anticon-lock,
+.anticon-eye {
+  color: rgba(0, 0, 0, 0.25) !important; 
+}
+
+/* Efeitos no ícone de olho */
+.anticon-eye:is(:hover, :focus) {
+  color: var(--primary-green) !important;  
+  filter: drop-shadow(0px 0px 2px rgba(0, 122, 51, 0.6)) !important;  
+}
+
+/* Cor no ícone de olho invisível */
+.anticon-eye-invisible {
+  color: var(--primary-green) !important;  
+}
+
+/* Efeitos no ícone de olho invisível */
+.anticon-eye-invisible:is(:hover, :focus) {
+  filter: drop-shadow(0px 0px 2px rgba(0, 122, 51, 0.6)) !important;
+}
+
+/* Efeitos nos ícones de impressoras e lápis de edição */
+.ant-table-cell :is(.anticon-printer, .anticon-edit):is(:hover, :focus) {
+  filter: drop-shadow(0px 0px 1px currentColor) !important; 
+}
+
+/* Efeitos no ícone de lupa, apenas quando está em uma ant-table-cell, assim como as impressoras  */
+.ant-table-cell .anticon-search:is(:hover, :focus) {
+  filter: drop-shadow(0px 0px 1px currentColor) !important;
+}
+
+/* Efeitos no datepicker */
+.ant-picker:is(:hover, :focus, :active),
 .ant-picker-focused {
-  border-color: #007A33 !important;
+  border-color: var(--primary-green) !important;
   box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
 }
 
+/* Coloração do ícone de calendário ao no datepicker */
+:is(.ant-picker:is(:hover, :focus, :active), .ant-picker-focused) .ant-picker-suffix {
+  color: var(--primary-green) !important;
+}
+
+/* Cor verde na barar do datepicker */
+.ant-picker .ant-picker-active-bar {
+  background-color: var(--primary-green) !important; 
+}
+
 /* Table */
 .ant-table-thead > tr > th {
   background-color: #f5f5f5 !important;
@@ -92,22 +254,48 @@
   background-color: rgba(0, 122, 51, 0.05) !important;
 }
 
-/* Pagination */
+/* Efeito visual no item de pagination (aqueles quadrados, como abaixo das listas) */
+.ant-pagination-item:hover {
+  border-color: var(--primary-green) !important;
+}
+
+/* Efeito no texto interno do item de pagination quando não é o selecionado */
+.ant-pagination-item:not(.ant-pagination-item-active):hover a {
+  color: var(--primary-green) !important;
+}
+
+/* Coloração do pagination ativo */
 .ant-pagination-item-active {
-  background-color: #007A33 !important;
-  border-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
+  border-color: var(--primary-green) !important;
 }
 
+/* Cor do texto no pagination ativo */
 .ant-pagination-item-active a {
   color: #ffffff !important;
 }
 
-.ant-pagination-item:hover {
-  border-color: #007A33 !important;
+/* Efeitos no pagination ativo */
+.ant-pagination-item-active:hover {
+  background-color: #00994A !important; 
+  border-color: transparent !important; 
 }
 
-.ant-pagination-item:hover a {
-  color: #007A33 !important;
+/* Efeitos no pagination de ir para próxima página, quando não está desativado */
+.ant-pagination-next:not(.ant-pagination-disabled) .ant-pagination-item-link:hover {
+  border-color: var(--primary-green) !important;
+  color: var(--primary-green) !important;
+}
+
+/* Efeitos no pagination de voltar para página anterior, quando não está desativado */
+.ant-pagination-prev:not(.ant-pagination-disabled) .ant-pagination-item-link:hover {
+  border-color: var(--primary-green) !important;
+  color: var(--primary-green) !important;
+}
+
+/* Aquelas setinhas que aprecem ao passar o mouse sobre os três pontinhos, quando tem muitos itens no pagination */
+.ant-pagination-jump-next-custom-icon .ant-pagination-item-link-icon {
+  color: var(--primary-green) !important; 
 }
 
 /* Modal */
@@ -132,26 +320,26 @@
 
 /* Tabs */
 .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 .ant-tabs-ink-bar {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 .ant-tabs-tab:hover {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 /* Steps */
 .ant-steps-item-process .ant-steps-item-icon {
-  background-color: #007A33 !important;
-  border-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
+  border-color: var(--primary-green) !important;
 }
 
 .ant-steps-item-finish .ant-steps-item-icon {
-  background-color: #007A33 !important;
-  border-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
+  border-color: var(--primary-green) !important;
 }
 
 .ant-steps-item-finish .ant-steps-item-icon > .anticon {
@@ -160,7 +348,7 @@
 
 /* Progress */
 .ant-progress-bg {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 /* Alert */
@@ -170,21 +358,21 @@
 }
 
 .ant-alert-success .ant-alert-icon {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 /* Badge */
 .ant-badge-count {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 /* Menu */
 .ant-menu-item-selected {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 .ant-menu-item:hover {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 /* Dropdown */
@@ -194,11 +382,11 @@
 
 /* Tooltip */
 .ant-tooltip-inner {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 .ant-tooltip-arrow::before {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 /* Popover */
@@ -206,6 +394,14 @@
   background-color: #ffffff !important;
 }
 
+/* Efeitos visuais no botão de cancelar nesse elemento de pop up  */
+.ant-popconfirm .ant-btn-default:is(:hover, :focus, :active) {
+  color: red !important; 
+  border-color: red !important; 
+  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.2) !important;
+}
+
+
 /* Cores de aviso (warning) */
 .ant-alert-warning {
   background-color: #fffbe6 !important;
@@ -213,7 +409,7 @@
 }
 
 .ant-alert-warning .ant-alert-icon {
-  color: #FFD53D !important;
+  color: var(--primary-yellow) !important;
 }
 
 /* Cores de erro (mantém padrão do antd) */
@@ -233,31 +429,31 @@
 
 /* Cores de sucesso */
 .ant-result-success .ant-result-icon > .anticon {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 /* Upload */
 .ant-upload-list-item-done .ant-upload-list-item-name {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 /* Form */
 .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 /* Switch */
 .ant-switch-checked {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 /* Slider */
 .ant-slider-track {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 .ant-slider-handle {
-  border-color: #007A33 !important;
+  border-color: var(--primary-green) !important;
 }
 
 .ant-slider-handle:focus {
@@ -267,7 +463,7 @@
 /* Rate */
 .ant-rate-star.ant-rate-star-full .ant-rate-star-first,
 .ant-rate-star.ant-rate-star-full .ant-rate-star-second {
-  color: #FFD53D !important;
+  color: var(--primary-yellow) !important;
 }
 
 /* Tag */
@@ -278,13 +474,13 @@
 .ant-tag-success {
   background-color: #f6ffed !important;
   border-color: #b7eb8f !important;
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 .ant-tag-warning {
   background-color: #fffbe6 !important;
   border-color: #ffe58f !important;
-  color: #FFD53D !important;
+  color: var(--primary-yellow) !important;
 }
 
 /* Divider */
@@ -302,13 +498,48 @@
   color: #000000 !important;
 }
 
+/* Cor do ícone de recarregar */
+.ant-card .anticon-reload {
+  color: rgba(0, 0, 0, 0.25) !important; 
+}
+
+/* Efeito no ícone de recarregar */
+.ant-card .anticon-reload:is(:hover, :focus) {
+  color: var(--primary-green) !important; 
+}
+
 /* Collapse */
 .ant-collapse-header {
   color: #000000 !important;
 }
 
+/* Efeito de hover no texto do collapse */
+.ant-collapse-header:hover {
+  color: var(--primary-green) !important;
+  text-shadow: 0px 0px 1px rgba(0, 122, 51, 0.6) !important;
+}
+
+/* Mudanças visuais no texto quando o collapse está ativo */
 .ant-collapse-item-active > .ant-collapse-header {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
+  text-shadow: 0px 0px 1px rgba(0, 122, 51, 0.6) !important;
+}
+
+/* Efeito visual no hover do ícone de seta do collapse */
+.ant-collapse-header:hover .ant-collapse-expand-icon .ant-collapse-arrow {
+  color: var(--primary-green) !important;
+  filter: drop-shadow(0px 0px 1px rgba(0, 122, 51, 0.5)); 
+}
+
+/* Mudanças visuais no ícone de seta quando o collapse está ativo */
+.ant-collapse-item-active > .ant-collapse-header .ant-collapse-expand-icon .ant-collapse-arrow {
+  color: var(--primary-green) !important;
+  filter: drop-shadow(0px 0px 1px rgba(0, 122, 51, 0.5)); 
+}
+
+/* Tira a borda do botão de remover, elemento presente na tela de filtros avançados */
+.ant-collapse-item .ant-collapse-header .ant-collapse-extra .ant-btn-dangerous:hover {
+  border-color: transparent !important; 
 }
 
 /* Tree */
@@ -317,7 +548,7 @@
 }
 
 .ant-tree .ant-tree-node-selected {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 .ant-tree .ant-tree-node-selected .ant-tree-title {
@@ -335,7 +566,7 @@
 }
 
 .ant-transfer-list-item-checked {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 .ant-transfer-list-item-checked .ant-transfer-list-item-content {
@@ -344,8 +575,8 @@
 
 /* Timeline */
 .ant-timeline-item-head {
-  background-color: #007A33 !important;
-  border-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
+  border-color: var(--primary-green) !important;
 }
 
 /* Anchor */
@@ -354,16 +585,16 @@
 }
 
 .ant-anchor-link-active > .ant-anchor-link-title {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 .ant-anchor-link:hover .ant-anchor-link-title {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 /* BackTop */
 .ant-back-top {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 .ant-back-top:hover {
@@ -377,7 +608,7 @@
 
 /* Breadcrumb */
 .ant-breadcrumb a {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 .ant-breadcrumb a:hover {
@@ -386,42 +617,42 @@
 
 /* Carousel */
 .ant-carousel .ant-carousel-dot-active > .ant-carousel-dot {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 /* Cascader */
 .ant-cascader-picker:focus .ant-cascader-input {
-  border-color: #007A33 !important;
+  border-color: var(--primary-green) !important;
   box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
 }
 
 /* Mentions */
 .ant-mentions:focus {
-  border-color: #007A33 !important;
+  border-color: var(--primary-green) !important;
   box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
 }
 
 /* Notification */
 .ant-notification-notice-success .ant-notification-notice-icon {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 .ant-notification-notice-warning .ant-notification-notice-icon {
-  color: #FFD53D !important;
+  color: var(--primary-yellow) !important;
 }
 
 /* Message */
 .ant-message-success .anticon {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 .ant-message-warning .anticon {
-  color: #FFD53D !important;
+  color: var(--primary-yellow) !important;
 }
 
 /* Spin */
 .ant-spin-dot-item {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 /* Skeleton */
@@ -473,7 +704,7 @@
 
 /* Avatar */
 .ant-avatar {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 /* Comment */
@@ -487,17 +718,17 @@
 
 /* Calendar */
 .ant-picker-calendar-date-today .ant-picker-calendar-date-value {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 .ant-picker-calendar-date-selected .ant-picker-calendar-date-value {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
   color: #ffffff !important;
 }
 
 /* TimePicker */
 .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 /* ColorPicker */
@@ -506,7 +737,7 @@
 }
 
 .ant-color-picker-trigger:hover {
-  border-color: #007A33 !important;
+  border-color: var(--primary-green) !important;
 }
 
 /* Image */
@@ -516,12 +747,12 @@
 
 /* Segmented */
 .ant-segmented-item-selected {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
   color: #ffffff !important;
 }
 
 .ant-segmented-item:hover {
-  color: #007A33 !important;
+  color: var(--primary-green) !important;
 }
 
 /* QRCode */
@@ -545,7 +776,7 @@
 
 /* FloatButton */
 .ant-float-btn-primary {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 .ant-float-btn-primary:hover {
@@ -562,21 +793,22 @@
   color: #000000 !important;
 }
 
-/* Botão Pesquisar - Cor Secundária Escura */
+/* Botão Pesquisar */
 .ant-btn-pesquisar {
-  background-color: #B8860B !important;
-  border-color: #B8860B !important;
+  background-color: var(--primary-yellow) !important;
+  border-color: var(--primary-yellow) !important;
   color: #FFFFFF !important;
 }
 
-.ant-btn-pesquisar:hover,
-.ant-btn-pesquisar:focus {
+/* Efeitos no botão pesquisar, quando não está desativado */
+.ant-btn-pesquisar:not(:disabled):is(:hover, :focus) {
   background-color: #DAA520 !important;
   border-color: #DAA520 !important;
   color: #FFFFFF !important;
 }
 
-.ant-btn-pesquisar:active {
+/* Efeito no active do botão pesquisar, quando não está desativado */
+.ant-btn-pesquisar:not(:disabled):active {
   background-color: #9A7209 !important;
   border-color: #9A7209 !important;
   color: #FFFFFF !important;
@@ -584,16 +816,16 @@
 
 /* Sider - Tema Dark */
 .ant-layout-sider-dark {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 .ant-layout-sider-dark .ant-layout-sider-children {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 /* Menu - Tema Dark */
 .ant-menu-dark {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
 }
 
 .ant-menu-dark .ant-menu-item {
@@ -711,7 +943,7 @@
 }
 
 .ant-menu-dark .ant-menu-submenu-popup .ant-menu-item:hover {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
   color: #ffffff !important;
 }
 
@@ -724,7 +956,7 @@
 }
 
 .ant-menu-dark .ant-menu-submenu-popup .ant-menu-item-selected {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
   color: #ffffff !important;
 }
 
@@ -755,7 +987,7 @@
 }
 
 .ant-menu-dark .ant-menu-submenu-inline .ant-menu-item:hover {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
   color: #ffffff !important;
 }
 
@@ -768,7 +1000,7 @@
 }
 
 .ant-menu-dark .ant-menu-submenu-inline .ant-menu-item-selected {
-  background-color: #007A33 !important;
+  background-color: var(--primary-green) !important;
   color: #ffffff !important;
 }
 
diff --git a/src/components/ComparativeAreaChart.jsx b/src/components/ComparativeAreaChart.jsx
index ecd727df..ca734956 100644
--- a/src/components/ComparativeAreaChart.jsx
+++ b/src/components/ComparativeAreaChart.jsx
@@ -1,12 +1,14 @@
 import React from 'react'
+
 import { Card, Statistic, Spin, Button, Space, Typography } from 'antd'
-import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
 import { withTranslation } from 'react-i18next'
 import {
     ResponsiveContainer, AreaChart, Area, XAxis, YAxis,
     CartesianGrid, Tooltip as RechartsTooltip, Legend
 } from 'recharts'
 
+import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
+
 const { Title } = Typography
 
 const ComparativeAreaChart = ({
@@ -58,18 +60,19 @@ const ComparativeAreaChart = ({
                         position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
                         backgroundColor: 'rgba(255,255,255,0.7)', zIndex: 10,
                         display: 'flex', justifyContent: 'center', alignItems: 'center'
-                    }}>
+                    }}
+                    >
                         <Spin size="large" />
                     </div>
                 )}
-                
+
                 {!loading && data && data.length > 0 && (
                     <ResponsiveContainer width="100%" height="100%">
                         <AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
                             <defs>
                                 <linearGradient id="colorAtual" x1="0" y1="0" x2="0" y2="1">
-                                    <stop offset="5%" stopColor="#1890ff" stopOpacity={0.8} />
-                                    <stop offset="95%" stopColor="#1890ff" stopOpacity={0} />
+                                    <stop offset="5%" stopColor="#007A33" stopOpacity={0.8} />
+                                    <stop offset="95%" stopColor="#007A33" stopOpacity={0} />
                                 </linearGradient>
                                 <linearGradient id="colorAnterior" x1="0" y1="0" x2="0" y2="1">
                                     <stop offset="5%" stopColor="#d9d9d9" stopOpacity={0.5} />
@@ -81,18 +84,24 @@ const ComparativeAreaChart = ({
                             <YAxis axisLine={false} tickLine={false} tick={{ fill: '#8c8c8c' }} />
                             <RechartsTooltip contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }} />
                             <Legend verticalAlign="top" height={36} />
-                            
+
                             <Area
                                 name={labelPassado}
                                 type="monotone"
                                 dataKey={dataKeyPassado}
-                                stroke="#bfbfbf" fillOpacity={1} fill="url(#colorAnterior)"
+                                stroke="#bfbfbf"
+                                fillOpacity={1}
+                                fill="url(#colorAnterior)"
                             />
                             <Area
                                 name={labelAtual}
                                 type="monotone"
                                 dataKey={dataKeyAtual}
-                                stroke="#1890ff" strokeWidth={2} fillOpacity={1} fill="url(#colorAtual)" activeDot={{ r: 6 }}
+                                stroke="#007A33"
+                                strokeWidth={2}
+                                fillOpacity={1}
+                                fill="url(#colorAtual)"
+                                activeDot={{ r: 6 }}
                             />
                         </AreaChart>
                     </ResponsiveContainer>
diff --git a/src/components/Relatorios/RelatoriosTombosPorPeriodo/TombosPorIntervaloTempo.component.tsx b/src/components/Relatorios/RelatoriosTombosPorPeriodo/TombosPorIntervaloTempo.component.tsx
index 2fb62bc1..8f3c566a 100644
--- a/src/components/Relatorios/RelatoriosTombosPorPeriodo/TombosPorIntervaloTempo.component.tsx
+++ b/src/components/Relatorios/RelatoriosTombosPorPeriodo/TombosPorIntervaloTempo.component.tsx
@@ -225,13 +225,13 @@ const TombosPorIntervaloTempoComponent: React.FC<TombosPorIntervaloTempoProps> =
                   boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                   padding: '12px'
                 }}
-                cursor={{ fill: 'rgba(24, 144, 255, 0.05)' }}
+                cursor={{ fill: 'rgba(0, 122, 51, 0.05)' }}
                 formatter={value => [`${String(value)} ${t('relatorioPorPeriodo:tombos')}`, t('relatorioPorPeriodo:quantidade')]}
               />
               <Legend wrapperStyle={{ paddingTop: '20px' }} />
               <Bar
                 dataKey="quantidade"
-                fill="#1890ff"
+                fill="#007A33"
                 name={t('relatorioPorPeriodo:quantidadeTombos')}
                 radius={[
                   6,
diff --git a/src/features/login/LoginLayout.tsx b/src/features/login/LoginLayout.tsx
index 418c35f8..dcd30c2c 100644
--- a/src/features/login/LoginLayout.tsx
+++ b/src/features/login/LoginLayout.tsx
@@ -28,16 +28,6 @@ const LoginLayout: React.FC<LoginLayoutProps> = props => {
     marginTop: '15px'
   }
 
-  const inputPrefixStyle = {
-    color: 'rgba(0, 0, 0, 0.25)'
-  }
-
-  const eyeButtonStyle = {
-    border: 'none',
-    boxShadow: 'none',
-    color: 'rgba(0, 0, 0, 0.25)'
-  }
-
   return (
 
     <Row justify="center" align="middle">
@@ -69,7 +59,7 @@ const LoginLayout: React.FC<LoginLayoutProps> = props => {
             >
               <Form.Item style={formItemStyle}>
                 <Input
-                  prefix={<MailOutlined style={inputPrefixStyle} />}
+                  prefix={<MailOutlined />}
                   placeholder={t('loginLayout:email')}
                   size="large"
                   value={formViewModel.email}
@@ -81,13 +71,12 @@ const LoginLayout: React.FC<LoginLayoutProps> = props => {
                   size="large"
                   type={formViewModel.senhaVisivel ? 'text' : 'password'}
                   placeholder={t('loginLayout:senha')}
-                  prefix={<LockOutlined style={inputPrefixStyle} />}
+                  prefix={<LockOutlined />}
                   suffix={(
                     <Button
                       type="text"
                       icon={formViewModel.senhaVisivel ? <EyeInvisibleOutlined /> : <EyeOutlined />}
                       onClick={formViewModel.toggleSenhaVisivel}
-                      style={eyeButtonStyle}
                     />
                   )}
                   value={formViewModel.senha}
diff --git a/src/helpers/leaflet-plugins/leaflet.navbar.css b/src/helpers/leaflet-plugins/leaflet.navbar.css
index 3d83744a..d958eeed 100644
--- a/src/helpers/leaflet-plugins/leaflet.navbar.css
+++ b/src/helpers/leaflet-plugins/leaflet.navbar.css
@@ -26,3 +26,18 @@ background-image: url("img/arrow-left_bbbbbb_14.png");
 .leaflet-control-navbar-home-disabled {
 background-image: url("img/home_bbbbbb_14.png");
 }
+
+/* Cor verde no seletor de camadas do mapa */
+.leaflet-control-layers .leaflet-control-layers-selector {
+accent-color: #007A33 !important; 
+}
+
+/* Efeito visual no hover do outline do círuclo e do ícone de "+" que leva para a tela de detalhes do tombo */
+.leaflet-popup-content-wrapper .custom-popup:hover .anticon-plus-circle svg path:is(:nth-of-type(1), :nth-of-type(3)) {
+  fill: #00B300 !important;
+}
+
+/* Efeito visual no hover do espaço interno círuclo com ícone de "+" que leva para a tela de detalhes do tombo */
+.leaflet-popup-content-wrapper .custom-popup:hover .anticon-plus-circle svg path:nth-of-type(2) {
+  fill: #CFCFCF !important;
+}