diff --git a/app/src/components/WindFlowGrid2D.tsx b/app/src/components/WindFlowGrid2D.tsx
index 8e07ccb..d5baa64 100644
--- a/app/src/components/WindFlowGrid2D.tsx
+++ b/app/src/components/WindFlowGrid2D.tsx
@@ -28,7 +28,7 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         opacity: 0.85;
       }
       .wind-line-fast {
-        stroke: #0ea5e9;
+        stroke: #a855f7;
         stroke-width: 2.2;
         stroke-dasharray: 6 12;
         animation: windFlow 0.9s linear infinite;
@@ -76,8 +76,8 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
 
   // Define quais itens de legenda devem ser exibidos para cada tipo de módulo
   const getVisibleLegendItems = () => {
-    const hasCpi = ['warehouse', 'vault', 'dome', 'cylinder'].includes(type);
-    const hasVortex = ['cylinder', 'dynamics', 'sign', 'tower'].includes(type);
+    const hasCpi = ['warehouse'].includes(type);
+    const hasVortex = ['isolated-roof', 'bar', 'tower', 'vault', 'cylinder', 'sign', 'dynamics'].includes(type);
     const hasLift = ['bridge', 'isolated-roof'].includes(type);
 
     return {
@@ -134,9 +134,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         return (
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             {/* Caso 1 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-sky-400">Caso A: Vento Frontal Horizontal (0°)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <path d="M -20,20 L 320,20" className="wind-line-slow" />
@@ -150,9 +150,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 2 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-emerald-400">Caso B: Vento Ascendente (+5°)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   {legendDef}
@@ -172,9 +172,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 3 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-rose-400">Caso C: Vento Descendente (-5°)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   {legendDef}
@@ -199,9 +199,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         return (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Caso 1 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-sky-400">Caso A: Escoamento Livre por Baixo</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
@@ -221,9 +221,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 2 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-rose-400">Caso B: Efeito de Sucção no Bordo de Ataque</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
@@ -250,9 +250,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         return (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Caso 1 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-sky-400">Caso A: Fluxo Frontal (0°)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <path d="M -20,20 L 320,20" className="wind-line-slow" />
@@ -272,9 +272,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 2 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-rose-400">Caso B: Escoamento Oblíquo (45°)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <path d="M -20,20 L 320,20" className="wind-line-slow" />
@@ -298,9 +298,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         return (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Caso 1 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-sky-400">Caso A: Vento Frontal a 0°</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <path d="M -20,20 L 320,20" className="wind-line-slow" />
@@ -322,9 +322,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 2 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-rose-400">Caso B: Vento Diagonal a 45°</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <path d="M -20,15 L 320,15" className="wind-line-slow" />
@@ -350,9 +350,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         return (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Caso 1 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-sky-400">Caso A: Regime de Baixa Turbulência</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
@@ -370,9 +370,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 2 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-rose-400">Caso B: Regime Turbulento (Série 51/52)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
@@ -396,9 +396,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         return (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Caso 1 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-sky-400">Caso A: Cúpula Apoiada no Solo</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
@@ -416,9 +416,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 2 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-rose-400">Caso B: Elevada sobre Parede Cilíndrica</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
@@ -442,9 +442,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         return (
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             {/* Caso 1 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-sky-400">Caso A: Pressões de Vento Externas</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
@@ -460,9 +460,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 2 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-orange-400">Caso B: Efeito de Pressão Interna (+Cpi)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   {legendDef}
@@ -479,9 +479,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 3 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-blue-400">Caso C: Efeito de Sucção Interna (-Cpi)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   {legendDef}
@@ -503,9 +503,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         return (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Caso 1 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-sky-400">Caso A: Escoamento Subcrítico (Superfície Lisa)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <path d="M -20,20 L 320,20" className="wind-line-slow" />
@@ -527,9 +527,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 2 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-emerald-400">Caso B: Escoamento Supercrítico (Superfície Rugosa)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <path d="M -20,20 L 320,20" className="wind-line-slow" />
@@ -556,9 +556,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         return (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Caso 1 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-sky-400">Caso A: Muro sem Abas Laterais</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
@@ -578,9 +578,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 2 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-rose-400">Caso B: Com Abas de Extremidade (End Plates)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
@@ -608,9 +608,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
         return (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Caso 1 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-sky-400">Caso A: Abaixo da Velocidade Crítica (Sem Vibração)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <path d="M -20,20 L 320,20" className="wind-line-slow" />
@@ -631,9 +631,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
             </div>
 
             {/* Caso 2 */}
-            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
               <span className="text-xs font-bold text-rose-400">Caso B: Velocidade Crítica (Ressonância / Lock-in)</span>
-              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
                   <path d="M -20,20 L 320,20" className="wind-line-slow" />
@@ -662,7 +662,7 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
       default:
         // Caso padrão dinâmico geral (Módulos dinâmicos simples)
         return (
-          <div className="bg-slate-950 border border-border/60 p-4 rounded-lg flex items-center justify-center min-h-[160px]">
+          <div className="bg-white dark:bg-slate-950 border border-border/60 p-4 rounded-lg flex items-center justify-center min-h-[160px]">
             <svg viewBox="0 0 400 150" className="w-full max-w-[320px]">
               {styleBlock}
               <path d="M -20,30 L 420,30" className="wind-line-slow" />
@@ -678,13 +678,13 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
   const legendItems = getVisibleLegendItems();
 
   return (
-    <div className="flex flex-col gap-4 my-6 bg-slate-900/40 p-4 border border-border/60 rounded-xl">
+    <div className="flex flex-col gap-4 my-6 bg-slate-50 dark:bg-slate-900/40 p-4 border border-border/60 rounded-xl">
       <div className="flex justify-between items-center border-b border-border/40 pb-2">
         <div>
           <h3 className="text-sm font-semibold text-foreground">Esquemas e Fluxos Comparativos NBR 6123</h3>
-          <span className="text-[10px] text-sky-400 font-medium font-mono">{getViewLabel()}</span>
+          <span className="text-[10px] text-sky-600 dark:text-sky-400 font-medium font-mono">{getViewLabel()}</span>
         </div>
-        <span className="text-[9px] bg-sky-500/10 text-sky-400 font-bold border border-sky-500/20 px-2 py-0.5 rounded-full">SVG Animado</span>
+        <span className="text-[9px] bg-sky-500/10 text-sky-600 dark:text-sky-400 font-bold border border-sky-500/20 px-2 py-0.5 rounded-full">SVG Animado</span>
       </div>
 
       {/* Renderiza o grid comparativo */}
@@ -693,7 +693,7 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
       </div>
 
       {/* Caixa de Legenda Didática Inteligente (Filtra itens não utilizados no módulo ativo) */}
-      <div className="bg-slate-950/60 p-3 rounded-lg border border-border/40 text-[11px] text-muted-foreground flex flex-col gap-2">
+      <div className="bg-white dark:bg-slate-950/60 p-3 rounded-lg border border-border/40 text-[11px] text-muted-foreground flex flex-col gap-2">
         <span className="font-bold text-xs text-foreground uppercase tracking-wider">Legenda do Escoamento:</span>
         <div className="grid grid-cols-2 gap-x-4 gap-y-2">
           {legendItems.wind && (
@@ -704,7 +704,7 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
           )}
           {legendItems.fast && (
             <div className="flex items-center gap-2">
-              <span className="w-6 h-0.5 bg-sky-400 inline-block" />
+              <span className="w-6 h-0.5 bg-purple-500 inline-block" />
               <span>Fluxo Acelerado (Alta Vel. / Sucção)</span>
             </div>
           )}