Alinha paleta dos gráficos aos tons do sistema

src/app/pages/relatorios/relatorios.scss

@@ -2,6 +2,18 @@
   display: block;
   width: 100%;
   overflow-x: hidden;
+  --brand-primary: #E33DCF;
+  --brand-blue: #030FAA;
+  --brand-deep: #B832A8;
+  --brand-violet: #6A55FF;
+  --brand-soft: rgba(227, 61, 207, 0.2);
+  --brand-blue-soft: rgba(3, 15, 170, 0.2);
+  --chart-pink: var(--brand-primary);
+  --chart-pink-dark: var(--brand-deep);
+  --chart-pink-soft: #F3B0E8;
+  --chart-blue: var(--brand-blue);
+  --chart-blue-soft: var(--brand-blue-soft);
+  --chart-violet: var(--brand-violet);
 }
 
 /* ✅ remove footer nessa página */
@@ -239,7 +251,7 @@
 
 /* se quiser tirar o rosa do total, troque aqui */
 .metric.total .meta .v {
-  color: #ff2d95;
+  color: var(--chart-pink);
 }
 
 .dot {
@@ -250,12 +262,12 @@
 }
 
 /* ✅ DOTS COM CORES "PADRÃO DE DASHBOARD" */
-.dot.d1 { background: #ff2d95; } /* total (mantém rosa no card de total, se você quiser) */
+.dot.d1 { background: var(--chart-pink); }
-.dot.d2 { background: #2E7D32; } /* Ativos - verde */
+.dot.d2 { background: var(--chart-blue); }
-.dot.d3 { background: #D32F2F; } /* Perda/Roubo - vermelho */
+.dot.d3 { background: var(--chart-pink-dark); }
-.dot.d4 { background: #F57C00; } /* 120 dias - laranja */
+.dot.d4 { background: var(--chart-violet); }
-.dot.d5 { background: #1976D2; } /* Reservas - azul */
+.dot.d5 { background: var(--chart-pink-soft); }
-.dot.d6 { background: #607D8B; } /* Outros - cinza */
+.dot.d6 { background: var(--chart-blue-soft); }
 
 .meta .k {
   font-weight: 900;

src/app/pages/relatorios/relatorios.ts

@@ -164,26 +164,10 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
 
   private readonly baseApi: string;
 
-  // ✅ Paletas "padrão de dashboard" (fácil de entender)
-  private readonly STATUS_COLORS = {
-    ativos: '#2E7D32',       // verde
-    perdaRoubo: '#D32F2F',   // vermelho
-    bloq120: '#F57C00',      // laranja
-    reservas: '#1976D2',     // azul
-    outros: '#607D8B',       // cinza
-  };
-
-  private readonly VIG_COLORS = {
-    vencidos: '#D32F2F',     // vermelho
-    d0a30: '#F57C00',        // laranja
-    d31a60: '#FBC02D',       // amarelo
-    d61a90: '#1976D2',       // azul
-    acima90: '#2E7D32',      // verde
-  };
-
   constructor(
     private http: HttpClient,
-    @Inject(PLATFORM_ID) private platformId: object
+    @Inject(PLATFORM_ID) private platformId: object,
+    private hostRef: ElementRef<HTMLElement>
   ) {
     const raw = (environment.apiUrl || 'https://localhost:7205').replace(/\/+$/, '');
     this.baseApi = raw.toLowerCase().endsWith('/api') ? raw : `${raw}/api`;
@@ -299,7 +283,9 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
 
     this.destroyCharts();
 
-    // ✅ Status das linhas (paleta padrão)
+    const palette = this.getPalette();
+
+    // ✅ Status das linhas (paleta do sistema)
     const cP = this.chartStatusPie?.nativeElement;
     if (cP) {
       this.chartPie = new Chart(cP, {
@@ -322,11 +308,11 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
             ],
             borderWidth: 1,
             backgroundColor: [
-              this.STATUS_COLORS.ativos,
+              palette.status.ativos,
-              this.STATUS_COLORS.perdaRoubo,
+              palette.status.perdaRoubo,
-              this.STATUS_COLORS.bloq120,
+              palette.status.bloq120,
-              this.STATUS_COLORS.reservas,
+              palette.status.reservas,
-              this.STATUS_COLORS.outros,
+              palette.status.outros,
             ],
           }],
         },
@@ -355,7 +341,7 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
             label: 'Encerramentos',
             data: this.vigenciaValues,
             borderWidth: 0,
-            backgroundColor: '#1976D2', // azul padrão
+            backgroundColor: palette.series.vigencia,
             borderRadius: 10,
           }],
         },
@@ -388,11 +374,11 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
             ],
             borderWidth: 1,
             backgroundColor: [
-              this.VIG_COLORS.vencidos,
+              palette.vigencia.vencidos,
-              this.VIG_COLORS.d0a30,
+              palette.vigencia.d0a30,
-              this.VIG_COLORS.d31a60,
+              palette.vigencia.d31a60,
-              this.VIG_COLORS.d61a90,
+              palette.vigencia.d61a90,
-              this.VIG_COLORS.acima90,
+              palette.vigencia.acima90,
             ],
           }],
         },
@@ -421,7 +407,7 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
             label: 'MUREG',
             data: this.muregValues,
             borderWidth: 0,
-            backgroundColor: '#6A1B9A', // roxo (bem comum em dashboards)
+            backgroundColor: palette.series.mureg,
             borderRadius: 10,
           }],
         },
@@ -448,7 +434,7 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
             label: 'Troca',
             data: this.trocaValues,
             borderWidth: 0,
-            backgroundColor: '#00897B', // teal (bem comum)
+            backgroundColor: palette.series.troca,
             borderRadius: 10,
           }],
         },
@@ -482,4 +468,35 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
   private formatInt(v: number) {
     return (v || 0).toLocaleString('pt-BR');
   }
+
+  private getPalette() {
+    return {
+      status: {
+        ativos: this.readCssVar('--chart-blue', '#030FAA'),
+        perdaRoubo: this.readCssVar('--chart-pink-dark', '#B832A8'),
+        bloq120: this.readCssVar('--chart-violet', '#6A55FF'),
+        reservas: this.readCssVar('--chart-pink-soft', '#F3B0E8'),
+        outros: this.readCssVar('--chart-blue-soft', 'rgba(3, 15, 170, 0.2)'),
+      },
+      vigencia: {
+        vencidos: this.readCssVar('--chart-pink', '#E33DCF'),
+        d0a30: this.readCssVar('--chart-violet', '#6A55FF'),
+        d31a60: this.readCssVar('--chart-blue', '#030FAA'),
+        d61a90: this.readCssVar('--chart-pink-dark', '#B832A8'),
+        acima90: this.readCssVar('--chart-pink-soft', '#F3B0E8'),
+      },
+      series: {
+        vigencia: this.readCssVar('--chart-blue', '#030FAA'),
+        mureg: this.readCssVar('--chart-pink', '#E33DCF'),
+        troca: this.readCssVar('--chart-violet', '#6A55FF'),
+      },
+    };
+  }
+
+  private readCssVar(name: string, fallback: string) {
+    if (!isPlatformBrowser(this.platformId)) return fallback;
+    const styles = getComputedStyle(this.hostRef.nativeElement);
+    const value = styles.getPropertyValue(name).trim();
+    return value || fallback;
+  }
 }