feat: destaca dados mockados e WIP no app

src/pages/MessagesPage.jsx

@@ -1,5 +1,7 @@
 import { useMemo, useState } from 'react'
 
+import { FeatureCallout } from '../components/FeatureState.jsx'
+import { featurePanelClass } from '../components/featureStateStyles.js'
 import { communicationRepository } from '../repositories/communicationRepository.js'
 
 const channels = {
@@ -155,6 +157,12 @@ export function MessagesPage() {
 
   return (
     <div className="mx-auto max-w-7xl space-y-6">
+      <FeatureCallout
+        description="Envio de SMS usa API. Histórico, templates e campanhas ainda são dados locais de demonstração."
+        status="partial"
+        title="Mensageria híbrida"
+      />
+
       <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
         <div>
           <h1 className="text-2xl font-bold tracking-tight text-[#f5f5f5]">Comunicação</h1>
@@ -210,7 +218,7 @@ export function MessagesPage() {
       </div>
 
       {activeTab === 'historico' ? (
-        <section className={`${cardClass} p-5 md:p-6`} aria-label="Histórico de comunicação">
+        <section className={`${cardClass} ${featurePanelClass('mock')} p-5 md:p-6`} aria-label="Histórico de comunicação">
           <div className="mb-6 flex flex-col gap-3 md:flex-row">
             <label className="relative flex-1">
               <span className="sr-only">Buscar comunicação</span>
@@ -279,7 +287,7 @@ export function MessagesPage() {
       ) : null}
 
       {activeTab === 'templates' ? (
-        <section className="space-y-4" aria-label="Templates de comunicação">
+        <section className={`space-y-4 rounded-2xl p-4 ${featurePanelClass('mock')}`} aria-label="Templates de comunicação">
           <div className="flex justify-end">
             <button
               className="inline-flex h-10 items-center gap-2 rounded-sm bg-[#3b82f6] px-4 text-sm font-semibold text-white transition hover:bg-[#2563eb]"
@@ -300,7 +308,7 @@ export function MessagesPage() {
       ) : null}
 
       {activeTab === 'campanha' ? (
-        <section className={`${cardClass} p-6`} aria-label="Campanhas inteligentes">
+        <section className={`${cardClass} ${featurePanelClass('mock')} p-6`} aria-label="Campanhas inteligentes">
           <div className="py-8 text-center">
             <div className="mx-auto mb-4 grid size-16 place-items-center rounded-full bg-[#303030]">
               <CommIcon className="size-8 text-[#51a2ff]" name="send" />