feat: destaca dados mockados e WIP no app

src/components/AppShell.jsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react'
 
 import { BrandLogo } from './Brand.jsx'
+import { FeatureLegend } from './FeatureState.jsx'
 
 const navItems = [
   { href: '/inicio', label: 'Painel', icon: 'pulse', activePaths: ['/inicio', '/home', '/dashboard'] },
@@ -176,6 +177,9 @@ export function AppShell({ children, currentPath, navigate, routeTitle }) {
         </header>
 
         <main className="w-full px-4 py-6 md:px-8 md:py-8" id="app-content">
+          <div className="mb-6">
+            <FeatureLegend />
+          </div>
           <div className="sr-only" aria-live="polite">
             {pageTitle}
           </div>

src/components/FeatureState.jsx

@@ -0,0 +1,39 @@
+import { featureStateStyles } from './featureStateStyles.js'
+
+export function FeatureBadge({ className = '', status = 'partial', text }) {
+  const current = featureStateStyles[status] || featureStateStyles.partial
+
+  return (
+    <span
+      className={`inline-flex items-center rounded-full border px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.14em] ${current.badge} ${className}`}
+    >
+      {text || current.label}
+    </span>
+  )
+}
+
+export function FeatureCallout({ className = '', description, status = 'partial', title }) {
+  const current = featureStateStyles[status] || featureStateStyles.partial
+
+  return (
+    <div className={`rounded-2xl border px-4 py-3 ${current.panel} ${className}`}>
+      <div className="flex flex-wrap items-center gap-3">
+        <FeatureBadge status={status} />
+        {title ? <p className={`text-sm font-semibold ${current.title}`}>{title}</p> : null}
+      </div>
+      {description ? <p className="mt-2 text-sm leading-6 text-[#d4d4d4]">{description}</p> : null}
+    </div>
+  )
+}
+
+export function FeatureLegend() {
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-xl border border-[#404040] bg-[#202020] px-3 py-2">
+      <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[#a3a3a3]">Legenda</span>
+      <FeatureBadge status="live" />
+      <FeatureBadge status="partial" />
+      <FeatureBadge status="mock" />
+      <FeatureBadge status="wip" />
+    </div>
+  )
+}

src/components/featureStateStyles.js

@@ -0,0 +1,31 @@
+export const featureStateStyles = {
+  live: {
+    badge: 'border-emerald-500/40 bg-emerald-500/15 text-emerald-300',
+    panel: 'border-emerald-500/35 bg-emerald-500/8',
+    title: 'text-emerald-300',
+    label: 'Integrado',
+  },
+  partial: {
+    badge: 'border-sky-500/40 bg-sky-500/15 text-sky-300',
+    panel: 'border-sky-500/35 bg-sky-500/8',
+    title: 'text-sky-300',
+    label: 'Parcial',
+  },
+  mock: {
+    badge: 'border-amber-500/40 bg-amber-500/15 text-amber-300',
+    panel: 'border-amber-500/35 bg-amber-500/8',
+    title: 'text-amber-300',
+    label: 'Mockado',
+  },
+  wip: {
+    badge: 'border-rose-500/40 bg-rose-500/15 text-rose-300',
+    panel: 'border-rose-500/35 bg-rose-500/8',
+    title: 'text-rose-300',
+    label: 'WIP',
+  },
+}
+
+export function featurePanelClass(status = 'partial') {
+  const current = featureStateStyles[status] || featureStateStyles.partial
+  return current.panel
+}