Merge branch 'develop' into feature/ajustes-visuais

susconecta/app/(main-routes)/doutores/page.tsx

@@ -326,10 +326,11 @@ export default function DoutoresPage() {
                 onKeyDown={handleSearchKeyDown}
               />
             </div>
-            <Button 
+            <Button
-              variant="outline" 
+              variant="secondary"
-              onClick={handleClickBuscar}
+              onClick={handleBuscarServidor}
-              disabled={loading || !search.trim()}
+              disabled={loading}
+              className="hover:bg-primary hover:text-white"
             >
               Buscar
             </Button>

susconecta/app/(main-routes)/pacientes/page.tsx

@@ -204,7 +204,7 @@ export default function PacientesPage() {
               onKeyDown={(e) => e.key === "Enter" && handleBuscarServidor()}
             />
           </div>
-          <Button variant="secondary" onClick={handleBuscarServidor}>Buscar</Button>
+          <Button variant="secondary" onClick={handleBuscarServidor} className="hover:bg-primary hover:text-white">Buscar</Button>
           <Button onClick={handleAdd}>
             <Plus className="mr-2 h-4 w-4" />
             Novo paciente

susconecta/app/agenda/appointment-form.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-export default function AppointmentForm() {
-  return (
-    <form className="p-4 border rounded space-y-4">
-      <div>
-        <label className="block text-sm font-medium">Paciente</label>
-        <input type="text" className="mt-1 w-full border p-2 rounded" />
-      </div>
-      <div>
-        <label className="block text-sm font-medium">Data</label>
-        <input type="date" className="mt-1 w-full border p-2 rounded" />
-      </div>
-      <button
-        type="submit"
-        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-      >
-        Salvar
-      </button>
-    </form>
-  )
-}

susconecta/app/agenda/page.tsx

@@ -4,18 +4,46 @@ import { useRouter } from "next/navigation";
 import { CalendarRegistrationForm } from "@/components/forms/calendar-registration-form";
 import HeaderAgenda from "@/components/agenda/HeaderAgenda";
 import FooterAgenda from "@/components/agenda/FooterAgenda";
+import { useState } from "react";
+
+interface FormData {
+  patientName?: string;
+  cpf?: string;
+  rg?: string;
+  birthDate?: string;
+  phoneCode?: string;
+  phoneNumber?: string;
+  email?: string;
+  convenio?: string;
+  matricula?: string;
+  validade?: string;
+  documentos?: string;
+  professionalName?: string;
+  unit?: string;
+  appointmentDate?: string;
+  startTime?: string;
+  endTime?: string;
+  requestingProfessional?: string;
+  appointmentType?: string;
+  notes?: string;
+}
 
 export default function NovoAgendamentoPage() {
   const router = useRouter();
+  const [formData, setFormData] = useState<FormData>({});
 
-  const handleSave = (data: any) => {
+  const handleFormChange = (data: FormData) => {
-    console.log("Salvando novo agendamento...", data);
+    setFormData(data);
+  };
+
+  const handleSave = () => {
+    console.log("Salvando novo agendamento...", formData);
     alert("Novo agendamento salvo (simulado)!");
     router.push("/consultas"); 
   };
 
   const handleCancel = () => {
-    router.back(); 
+    router.push("/calendar");
   };
 
   return (
@@ -23,12 +51,11 @@ export default function NovoAgendamentoPage() {
       <HeaderAgenda />
       <main className="flex-1 mx-auto w-full max-w-7xl px-8 py-8">
         <CalendarRegistrationForm 
-            onSave={handleSave} 
+            formData={formData} 
-            onCancel={handleCancel} 
+            onFormChange={handleFormChange} 
-            initialData={{}} 
         />
       </main>
-      <FooterAgenda />
+      <FooterAgenda onSave={handleSave} onCancel={handleCancel} />
     </div>
   );
 }

susconecta/app/financeiro/page.tsx

@@ -21,6 +21,15 @@ export default function FinanceiroPage() {
   const isPr = pathname?.startsWith("/procedimento");
   const isFi = pathname?.startsWith("/financeiro");
 
+  const handleSave = () => {
+    // Lógica de salvar será implementada
+    console.log("Salvando informações financeiras...");
+  };
+
+  const handleCancel = () => {
+    router.push("/calendar");
+  };
+
   return (
     <div className="w-full min-h-screen flex flex-col bg-background">
       {/* HEADER */}
@@ -53,7 +62,7 @@ export default function FinanceiroPage() {
                   <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                   <Input
                     placeholder="R$ 0,00"
-                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                    className="h-10 w-full rounded-md pl-8 pr-4 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
                   />
                 </div>
               </div>
@@ -63,7 +72,7 @@ export default function FinanceiroPage() {
                   <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                   <Input
                     placeholder="R$ 0,00"
-                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                    className="h-10 w-full rounded-md pl-8 pr-4 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
                   />
                 </div>
               </div>
@@ -81,7 +90,7 @@ export default function FinanceiroPage() {
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
               <div className="space-y-2">
                 <Label className="text-xs text-muted-foreground">Tipo</Label>
-                <select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none">
+                <select className="h-10 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400">
                   <option value="">Selecionar</option>
                   <option value="dinheiro">Dinheiro</option>
                   <option value="cartao">Cartão</option>
@@ -91,7 +100,7 @@ export default function FinanceiroPage() {
               </div>
               <div className="space-y-2">
                 <Label className="text-xs text-muted-foreground">Parcelas</Label>
-                <select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none">
+                <select className="h-10 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400">
                   <option value="1">1x</option>
                   <option value="2">2x</option>
                   <option value="3">3x</option>
@@ -106,7 +115,7 @@ export default function FinanceiroPage() {
                   <Calculator className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                   <Input
                     placeholder="0%"
-                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                    className="h-10 w-full rounded-md pl-8 pr-4 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
                   />
                 </div>
               </div>
@@ -142,7 +151,7 @@ export default function FinanceiroPage() {
       </main>
 
       {/* RODAPÉ FIXO */}
-      <FooterAgenda />
+      <FooterAgenda onSave={handleSave} onCancel={handleCancel} />
     </div>
   );
 }

susconecta/app/procedimento/page.tsx

@@ -20,6 +20,16 @@ export default function ProcedimentoPage() {
   const isAg = pathname?.startsWith("/agendamento");
   const isPr = pathname?.startsWith("/procedimento");
   const isFi = pathname?.startsWith("/financeiro");
+  
+  const handleSave = () => {
+    // Lógica de salvar será implementada
+    console.log("Salvando procedimentos...");
+  };
+
+  const handleCancel = () => {
+    router.push("/calendar");
+  };
+
   const tab = (active: boolean, extra = "") =>
     `px-4 py-1.5 text-[13px] border ${
       active
@@ -83,7 +93,7 @@ export default function ProcedimentoPage() {
       </main>
 
       {/* RODAPÉ FIXO */}
-      <FooterAgenda />
+      <FooterAgenda onSave={handleSave} onCancel={handleCancel} />
     </div>
   );
 }

susconecta/components/agenda/FooterAgenda.tsx

@@ -5,9 +5,13 @@ import { Button } from "../ui/button";
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
 import { useState } from "react";
-import Link from "next/link";
 
-export default function FooterAgenda() {
+interface FooterAgendaProps {
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export default function FooterAgenda({ onSave, onCancel }: FooterAgendaProps) {
   const [bloqueio, setBloqueio] = useState(false);
   
   return (
@@ -18,15 +22,8 @@ export default function FooterAgenda() {
           <Label className="text-sm text-foreground">Bloqueio de Agenda</Label>
         </div>
         <div className="flex gap-2">
-          <Link href={"/calendar"}>
+          <Button variant="ghost" onClick={onCancel}>Cancelar</Button>
-            <Button variant="ghost" className="hover:bg-muted hover:text-foreground">Cancelar</Button>
+          <Button onClick={onSave}>Salvar</Button>
-          </Link>
-          <Link href={"/calendar"}>
-            <Button>
-              <Save className="mr-2 h-4 w-4" />
-              Salvar as alterações
-            </Button>
-          </Link>
         </div>
       </div>
     </div>

susconecta/components/agenda/HeaderAgenda.tsx

@@ -8,17 +8,10 @@ export default function HeaderAgenda() {
   const pathname = usePathname();
   const router = useRouter();
 
-  const isAg = pathname?.startsWith("/agendamento");
+  const isAg = pathname?.startsWith("/agenda");
   const isPr = pathname?.startsWith("/procedimento");
   const isFi = pathname?.startsWith("/financeiro");
 
-  const tabCls = (active: boolean, extra = "") =>
-    `px-4 py-1.5 text-[13px] border ${
-      active
-        ? "border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium"
-        : "text-muted-foreground hover:bg-muted border-border"
-    } ${extra}`;
-
   return (
     <header className="border-b bg-background border-border">
       <div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between">
@@ -33,24 +26,33 @@ export default function HeaderAgenda() {
             <Link
               href="/agenda"
               role="tab"
-              aria-selected={isAg}
+              className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
-              className={tabCls(Boolean(isAg)) + " rounded-md"}
+                isAg 
+                  ? "bg-primary text-white border-primary dark:bg-primary dark:text-white" 
+                  : "text-foreground hover:bg-muted border-input"
+              }`}
             >
               Agendamento
             </Link>
             <Link
               href="/procedimento"
               role="tab"
-              aria-selected={isPr}
+              className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
-              className={tabCls(Boolean(isPr)) + " rounded-md"}
+                isPr 
+                  ? "bg-primary text-white border-primary dark:bg-primary dark:text-white" 
+                  : "text-foreground hover:bg-muted border-input"
+              }`}
             >
               Procedimento
             </Link>
             <Link
               href="/financeiro"
               role="tab"
-              aria-selected={isFi}
+              className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
-              className={tabCls(Boolean(isFi)) + " rounded-md"}
+                isFi 
+                  ? "bg-primary text-white border-primary dark:bg-primary dark:text-white" 
+                  : "text-foreground hover:bg-muted border-input"
+              }`}
             >
               Financeiro
             </Link>
@@ -58,9 +60,9 @@ export default function HeaderAgenda() {
 
           <button
             type="button"
-            aria-label="Histórico"
+            aria-label="Voltar para Calendário"
-            onClick={() => router.back()}
+            onClick={() => router.push("/calendar")}
-            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-muted"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-primary hover:text-white hover:border-primary transition-colors"
           >
             <RotateCcw className="h-4 w-4" />
           </button>

susconecta/components/dashboard/header.tsx

@@ -35,7 +35,7 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
         <SidebarTrigger />
         <div className="flex items-start flex-col justify-center py-2">
           <h1 className="text-lg font-semibold text-foreground">{title}</h1>
-          <p className="text-gray-600">{subtitle}</p>
+          <p className="text-muted-foreground">{subtitle}</p>
         </div>
       </div>
 
@@ -49,42 +49,42 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
         <div className="relative" ref={dropdownRef}>
           <Button 
             variant="ghost" 
-            className="relative h-8 w-8 rounded-full border-2 border-gray-300 hover:border-blue-500"
+            className="relative h-8 w-8 rounded-full border-2 border-border hover:border-primary"
             onClick={() => setDropdownOpen(!dropdownOpen)}
           >
             <Avatar className="h-8 w-8">
               <AvatarImage src="/avatars/01.png" alt="@usuario" />
-              <AvatarFallback className="bg-blue-500 text-white font-semibold">RA</AvatarFallback>
+              <AvatarFallback className="bg-primary text-primary-foreground font-semibold">RA</AvatarFallback>
             </Avatar>
           </Button>
 
           {/* Dropdown Content */}
           {dropdownOpen && (
-            <div className="absolute right-0 mt-2 w-80 bg-white border border-gray-200 rounded-md shadow-lg z-50">
+            <div className="absolute right-0 mt-2 w-80 bg-popover border border-border rounded-md shadow-lg z-50 text-popover-foreground">
-              <div className="p-4 border-b border-gray-100">
+              <div className="p-4 border-b border-border">
                 <div className="flex flex-col space-y-1">
                   <p className="text-sm font-semibold leading-none">
                     {user?.userType === 'administrador' ? 'Administrador da Clínica' : 'Usuário do Sistema'}
                   </p>
                   {user?.email ? (
-                    <p className="text-xs leading-none text-gray-600">{user.email}</p>
+                    <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
                   ) : (
-                    <p className="text-xs leading-none text-gray-600">Email não disponível</p>
+                    <p className="text-xs leading-none text-muted-foreground">Email não disponível</p>
                   )}
-                  <p className="text-xs leading-none text-blue-600 font-medium">
+                  <p className="text-xs leading-none text-primary font-medium">
                     Tipo: {user?.userType === 'administrador' ? 'Administrador' : user?.userType || 'Não definido'}
                   </p>
                 </div>
               </div>
               
               <div className="py-1">
-                <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 cursor-pointer">
+                <button className="w-full text-left px-4 py-2 text-sm hover:bg-accent cursor-pointer">
                   👤 Perfil
                 </button>
-                <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 cursor-pointer">
+                <button className="w-full text-left px-4 py-2 text-sm hover:bg-accent cursor-pointer">
                   ⚙️ Configurações
                 </button>
-                <div className="border-t border-gray-100 my-1"></div>
+                <div className="border-t border-border my-1"></div>
                 <button 
                   onClick={(e) => {
                     e.preventDefault();
@@ -93,7 +93,7 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
                     // Usar sempre o logout do hook useAuth (ele já redireciona corretamente)
                     logout();
                   }}
-                  className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 cursor-pointer"
+                  className="w-full text-left px-4 py-2 text-sm text-destructive hover:bg-destructive/10 cursor-pointer"
                 >
                   🚪 Sair
                 </button>

susconecta/components/forms/appointment-form.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/agenda/appointment-form';

susconecta/components/forms/calendar-registration-form.tsx

@@ -1,136 +1,247 @@
+
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Calendar, Search, ChevronDown, Upload, FileDown, Tag } from "lucide-react";
+import { Calendar, Search, ChevronDown } from "lucide-react";
 
-export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any) {
+interface FormData {
-  const [formData, setFormData] = useState(initialData || {});
+  patientName?: string;
+  cpf?: string;
+  rg?: string;
+  birthDate?: string;
+  phoneCode?: string;
+  phoneNumber?: string;
+  email?: string;
+  convenio?: string;
+  matricula?: string;
+  validade?: string;
+  documentos?: string;
+  professionalName?: string;
+  unit?: string;
+  appointmentDate?: string;
+  startTime?: string;
+  endTime?: string;
+  requestingProfessional?: string;
+  appointmentType?: string;
+  notes?: string;
+}
 
-  useEffect(() => {
+interface CalendarRegistrationFormProperties {
-    setFormData(initialData || {});
+  formData: FormData;
-  }, [initialData]);
+  onFormChange: (data: FormData) => void;
+}
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+const formatValidityDate = (value: string) => {
-    const { name, value } = e.target;
+  const cleaned = value.replaceAll(/\D/g, "");
-    setFormData((prev: any) => ({ ...prev, [name]: value }));
+  if (cleaned.length > 4) {
-  };
+    return `${cleaned.slice(0, 2)}/${cleaned.slice(2, 4)}/${cleaned.slice(4, 8)}`;
+  }
+  if (cleaned.length > 2) {
+    return `${cleaned.slice(0, 2)}/${cleaned.slice(2, 4)}`;
+  }
+  return cleaned;
+};
 
-  const handleSubmit = (e: React.FormEvent) => {
+export function CalendarRegistrationForm({ formData, onFormChange }: CalendarRegistrationFormProperties) {
-    e.preventDefault();
+  const [isAdditionalInfoOpen, setIsAdditionalInfoOpen] = useState(false);
-    onSave(formData);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = event.target;
+
+    if (name === 'validade') {
+        const formattedValue = formatValidityDate(value);
+        onFormChange({ ...formData, [name]: formattedValue });
+    } else {
+        onFormChange({ ...formData, [name]: value });
+    }
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-8">
+    <form className="space-y-8">
       <div className="border border-border rounded-md p-6 space-y-4 bg-card">
         <h2 className="font-medium text-foreground">Informações do paciente</h2>
         <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
-            <div className="md:col-span-6">
+            <div className="md:col-span-6 space-y-2">
-              <Label>Nome *</Label>
+              <Label className="text-[13px]">Nome *</Label>
               <div className="relative">
                 <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                   name="patientName" 
                   placeholder="Digite o nome do paciente"
-                  className="h-10 pl-8"
+                  className="h-11 pl-8 rounded-md transition-colors hover:bg-muted/30"
                   value={formData.patientName || ''}
                   onChange={handleChange}
                 />
               </div>
             </div>
-            <div className="md:col-span-3">
+            <div className="md:col-span-3 space-y-2">
-              <Label>CPF do paciente</Label>
+              <Label className="text-[13px]">CPF do paciente</Label>
-              <Input name="cpf" placeholder="Número do CPF" className="h-10" value={formData.cpf || ''} onChange={handleChange} />
+              <Input name="cpf" placeholder="Número do CPF" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.cpf || ''} onChange={handleChange} />
             </div>
-            <div className="md:col-span-3">
+            <div className="md:col-span-3 space-y-2">
-              <Label>RG</Label>
+              <Label className="text-[13px]">RG</Label>
-              <Input name="rg" placeholder="Número do RG" className="h-10" value={formData.rg || ''} onChange={handleChange} />
+              <Input name="rg" placeholder="Número do RG" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.rg || ''} onChange={handleChange} />
             </div>
-            <div className="md:col-span-3">
+            <div className="md:col-span-3 space-y-2">
-              <Label>Data de nascimento *</Label>
+              <Label className="text-[13px]">Data de nascimento *</Label>
-              <Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} />
+              <Input name="birthDate" type="date" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.birthDate || ''} onChange={handleChange} />
             </div>
-            <div className="md:col-span-3">
+            <div className="md:col-span-3 space-y-2">
-              <Label>Telefone</Label>
+              <Label className="text-[13px]">Telefone</Label>
               <div className="flex gap-2">
-                <select name="phoneCode" className="h-10 w-20 rounded-md border border-input bg-background text-foreground px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}>
+                <select name="phoneCode" className="h-11 w-20 rounded-md border border-gray-300 dark:border-input bg-background text-foreground px-2 text-[13px] transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.phoneCode || '+55'} onChange={handleChange}>
                   <option value="+55">+55</option>
                   <option value="+351">+351</option>
                   <option value="+1">+1</option>
                 </select>
-                <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10 flex-1" value={formData.phoneNumber || ''} onChange={handleChange} />
+                <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-11 flex-1 rounded-md transition-colors hover:bg-muted/30" value={formData.phoneNumber || ''} onChange={handleChange} />
               </div>
             </div>
-            <div className="md:col-span-6">
+            <div className="md:col-span-6 space-y-2">
-              <Label>E-mail</Label>
+              <Label className="text-[13px]">E-mail</Label>
-              <Input name="email" type="email" placeholder="email@exemplo.com" className="h-10" value={formData.email || ''} onChange={handleChange} />
+              <Input name="email" type="email" placeholder="email@exemplo.com" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.email || ''} onChange={handleChange} />
+            </div>
+            <div className="md:col-span-6 space-y-2">
+              <Label className="text-[13px]">Convênio</Label>
+              <div className="relative">
+                <select name="convenio" className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.convenio || ''} onChange={handleChange}>
+                    <option value="" disabled>Selecione um convênio</option>
+                    <option value="sulamerica">Sulamérica</option>
+                    <option value="bradesco">Bradesco Saúde</option>
+                    <option value="amil">Amil</option>
+                    <option value="unimed">Unimed</option>
+                </select>
+                <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              </div>
+            </div>
+            <div className="md:col-span-6 space-y-2">
+                <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-2">
+                        <Label className="text-[13px]">Matrícula</Label>
+                        <Input name="matricula" placeholder="000000000" maxLength={9} className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.matricula || ''} onChange={handleChange} />
+                    </div>
+                    <div className="space-y-2">
+                        <Label className="text-[13px]">Validade</Label>
+                        <Input name="validade" placeholder="00/00/0000" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.validade || ''} onChange={handleChange} />
+                    </div>
+                </div>
+            </div>
+            <div className="md:col-span-12 space-y-2">
+        <div 
+          className="flex items-center justify-between cursor-pointer"
+          onClick={() => setIsAdditionalInfoOpen(!isAdditionalInfoOpen)}
+        >
+          <div className="flex items-center gap-2">
+            <Label className="text-sm font-medium cursor-pointer text-primary m-0">Informações adicionais</Label>
+            <ChevronDown className={`h-4 w-4 text-primary transition-transform duration-200 ${isAdditionalInfoOpen ? 'rotate-180' : ''}`} />
+          </div>
+        </div>
+        {isAdditionalInfoOpen && (
+          <div className="space-y-2">
+            <div className="relative">
+              <select
+                name="documentos"
+                className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400"
+                value={formData.documentos || ''}
+                onChange={handleChange}
+              >
+                <option value="" disabled>
+                  Documentos e anexos
+                </option>
+                <option value="identidade">Identidade / CPF</option>
+                <option value="comprovante_residencia">Comprovante de residência</option>
+                <option value="guias">Guias / Encaminhamentos</option>
+                <option value="outros">Outros</option>
+              </select>
+              <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-primary" />
+            </div>
+          </div>
+        )}
             </div>
         </div>
       </div>
 
-      {}
       <div className="border border-border rounded-md p-6 space-y-4 bg-card">
         <h2 className="font-medium text-foreground">Informações do atendimento</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="space-y-4">
-                <div>
+                <div className="space-y-2">
                     <Label className="text-[13px]">Nome do profissional *</Label>
                     <div className="relative">
                         <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                        <Input name="professionalName" className="h-10 w-full rounded-full border border-input pl-8 pr-12 text-[13px]" value={formData.professionalName || ''} onChange={handleChange} />
+                        <Input name="professionalName" className="h-11 w-full rounded-md pl-8 pr-12 text-[13px] transition-colors hover:bg-muted/30" value={formData.professionalName || ''} onChange={handleChange} />
                     </div>
                 </div>
                 <div className="grid grid-cols-2 gap-3">
-                    <div>
+                    <div className="space-y-2">
                         <Label className="text-[13px]">Unidade *</Label>
-                        <select name="unit" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}>
+                        <select name="unit" className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.unit || 'nei'} onChange={handleChange}>
                             <option value="nei">Núcleo de Especialidades Integradas</option>
                             <option value="cc">Clínica Central</option>
                         </select>
                     </div>
-                    <div>
+                    <div className="space-y-2">
                         <Label className="text-[13px]">Data *</Label>
                         <div className="relative">
                             <Calendar className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                            <Input name="appointmentDate" type="date" className="h-10 w-full rounded-md border border-input pl-8 pr-3 text-[13px]" value={formData.appointmentDate || ''} onChange={handleChange} />
+                            <Input name="appointmentDate" type="date" className="h-11 w-full rounded-md pl-8 pr-3 text-[13px] transition-colors hover:bg-muted/30" value={formData.appointmentDate || ''} onChange={handleChange} />
                         </div>
                     </div>
                 </div>
-                <div className="grid grid-cols-2 gap-3">
+                <div className="grid grid-cols-3 gap-3">
-                    <div>
+                    <div className="space-y-2">
                         <Label className="text-[13px]">Início *</Label>
-                        <Input name="startTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.startTime || ''} onChange={handleChange} />
+                        <Input name="startTime" type="time" className="h-11 w-full rounded-md px-3 text-[13px] transition-colors hover:bg-muted/30" value={formData.startTime || ''} onChange={handleChange} />
                     </div>
-                    <div>
+                    <div className="space-y-2">
                         <Label className="text-[13px]">Término *</Label>
-                        <Input name="endTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.endTime || ''} onChange={handleChange} />
+                        <Input name="endTime" type="time" className="h-11 w-full rounded-md px-3 text-[13px] transition-colors hover:bg-muted/30" value={formData.endTime || ''} onChange={handleChange} />
+                    </div>
+                    <div className="space-y-2">
+                        <Label className="text-[13px]">Profissional solicitante</Label>
+                        <div className="relative">
+                            <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                            <select name="requestingProfessional" className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-8 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.requestingProfessional || ''} onChange={handleChange}>
+                                <option value="" disabled>Selecione solicitante</option>
+                                <option value="dr-a">Dr. A</option>
+                                <option value="dr-b">Dr. B</option>
+                            </select>
+                            <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                        </div>
                     </div>
                 </div>
             </div>
             <div className="space-y-4">
-                <div>
+                <div className="space-y-2">
-                    <Label className="text-[13px]">Tipo de atendimento *</Label>
+                    <div className="flex items-center justify-between">
+                        <Label className="text-[13px]">Tipo de atendimento *</Label>
+                        <div className="flex items-center space-x-2">
+                            <Input type="checkbox" id="reembolso" className="h-4 w-4" />
+                            <Label htmlFor="reembolso" className="text-[13px] font-medium">Pagamento via Reembolso</Label>
+                        </div>
+                    </div>
                     <div className="relative mt-1">
                         <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                        <Input name="appointmentType" placeholder="Pesquisar" className="h-10 w-full rounded-md border border-input pl-8 pr-8 text-[13px]" value={formData.appointmentType || ''} onChange={handleChange} />
+                        <Input name="appointmentType" placeholder="Pesquisar" className="h-11 w-full rounded-md pl-8 pr-8 text-[13px] transition-colors hover:bg-muted/30" value={formData.appointmentType || ''} onChange={handleChange} />
                     </div>
                 </div>
-                <div>
+                <div className="space-y-2">
-                    <Label className="text-[13px]">Observações</Label>
+                    <div className="flex items-center justify-between">
-                    <Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none" value={formData.notes || ''} onChange={handleChange} />
+                        <Label className="text-[13px]">Observações</Label>
+                        <div className="flex items-center space-x-2">
+                            <Input type="checkbox" id="imprimir" className="h-4 w-4" />
+                            <Label htmlFor="imprimir" className="text-[13px] font-medium">Imprimir na Etiqueta / Pulseira</Label>
+                        </div>
+                    </div>
+                    <Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none rounded-md transition-colors hover:bg-muted/30" value={formData.notes || ''} onChange={handleChange} />
                 </div>
             </div>
         </div>
       </div>
 
-      <div className="flex justify-end gap-2">
-        <Button type="button" variant="outline" onClick={onCancel}>Cancelar</Button>
-        <Button type="submit">Salvar</Button>
-      </div>
     </form>
   );
 }

susconecta/components/forms/doctor-registration-form.tsx

@@ -132,6 +132,8 @@ const initial: FormData = {
 
 
 
+// AgendaEditor removido - restaurando o textarea original abaixo
+
 export function DoctorRegistrationForm({
   open = true,
   onOpenChange,
@@ -466,10 +468,10 @@ if (missingFields.length > 0) {
                     )}
                   </div>
                   <div className="space-y-2">
-                    <Label htmlFor="photo" className="cursor-pointer">
+                    <Label htmlFor="photo" className="cursor-pointer rounded-md transition-colors">
-                      <Button type="button" variant="outline" asChild>
+                      <Button type="button" variant="ghost" asChild className="bg-primary text-primary-foreground border-transparent hover:bg-primary">
                         <span>
-                          <Upload className="mr-2 h-4 w-4" /> Carregar Foto
+                          <Upload className="mr-2 h-4 w-4 text-primary-foreground" /> Carregar Foto
                         </span>
                       </Button>
                     </Label>
@@ -522,27 +524,27 @@ if (missingFields.length > 0) {
 </div>
 
 
-                <div className="space-y-2">
+        <div className="space-y-2">
-                    <Label>Currículo</Label>
+          <Label>Currículo</Label>
-                    <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2">
-                        <Label htmlFor="curriculo-input" className="cursor-pointer">
+            <Label htmlFor="curriculo-input" className="cursor-pointer">
-                            <Button type="button" variant="outline" asChild>
+              <Button type="button" variant="ghost" asChild className="bg-primary text-primary-foreground border-transparent hover:bg-primary">
-                                <span>
+                <span>
-                                    <Upload className="mr-2 h-4 w-4" />
+                  <Upload className="mr-2 h-4 w-4 text-primary-foreground" />
-                                    Anexar PDF ou DOC
+                  Anexar PDF ou DOC
-                                </span>
+                </span>
-                            </Button>
+              </Button>
-                        </Label>
+            </Label>
-                        <Input
+            <Input
-                            id="curriculo-input"
+              id="curriculo-input"
-                            type="file"
+              type="file"
-                            className="hidden"
+              className="hidden"
-                            onChange={(e) => setField("curriculo", e.target.files?.[0] || null)}
+              onChange={(e) => setField("curriculo", e.target.files?.[0] || null)}
-                            accept=".pdf,.doc,.docx"
+              accept=".pdf,.doc,.docx"
-                        />
+            />
-                        {form.curriculo && <span className="text-sm text-muted-foreground">{form.curriculo.name}</span>}
+            {form.curriculo && <span className="text-sm text-primary-foreground">{form.curriculo.name}</span>}
-                    </div>
+          </div>
-                </div>
+        </div>
 
                 <div className="grid grid-cols-2 gap-4">
                   <div className="space-y-2">
@@ -644,7 +646,7 @@ if (missingFields.length > 0) {
                     </Button>
                   </div>
                 ))}
-                <Button type="button" variant="outline" onClick={addFormacao}>
+                <Button type="button" onClick={addFormacao}>
                   Adicionar Formação
                 </Button>
               </CardContent>
@@ -752,17 +754,7 @@ if (missingFields.length > 0) {
                   </div>
                 </div>
 
-                <div className="space-y-2">
+                {/* Agenda/Horário removido conforme solicitado */}
-                  <Label>Agenda/Horário</Label>
-                  // Dentro do form, apenas exiba o campo se precisar dele visualmente, mas não envie
-<textarea
-  value={form.agenda_horario}
-  onChange={(e) => setField("agenda_horario", e.target.value)}
-  placeholder="Descreva os dias e horários de atendimento"
-  disabled={true}  // Torne o campo apenas visual, sem enviar
-/>
-
-                </div>
 
                 <div className="space-y-4">
                   <Label>Dados Bancários</Label>
@@ -902,10 +894,10 @@ if (missingFields.length > 0) {
                 <div className="space-y-2">
                   <Label>Adicionar anexos</Label>
                   <div className="border-2 border-dashed rounded-lg p-4">
-                    <Label htmlFor="anexos" className="cursor-pointer block w-full">
+                    <Label htmlFor="anexos" className="cursor-pointer block w-full rounded-md p-4 bg-primary text-primary-foreground">
                       <div className="flex flex-col items-center justify-center text-center">
-                        <Upload className="h-7 w-7 mb-2" />
+                        <Upload className="h-7 w-7 mb-2 text-primary-foreground" />
-                        <p className="text-sm text-muted-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
+                        <p className="text-sm text-primary-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
                       </div>
                     </Label>
                     <Input id="anexos" type="file" multiple className="hidden" onChange={addLocalAnexos} />

susconecta/components/forms/patient-registration-form.tsx

@@ -359,10 +359,10 @@ export function PatientRegistrationForm({
                     )}
                   </div>
                   <div className="space-y-2">
-                    <Label htmlFor="photo" className="cursor-pointer">
+                    <Label htmlFor="photo" className="cursor-pointer rounded-md transition-colors">
-                      <Button type="button" variant="outline" asChild>
+                      <Button type="button" variant="ghost" asChild className="bg-primary text-primary-foreground border-transparent hover:bg-primary">
                         <span>
-                          <Upload className="mr-2 h-4 w-4" /> Carregar Foto
+                          <Upload className="mr-2 h-4 w-4 text-primary-foreground" /> Carregar Foto
                         </span>
                       </Button>
                     </Label>
@@ -550,10 +550,10 @@ export function PatientRegistrationForm({
                 <div className="space-y-2">
                   <Label>Adicionar anexos</Label>
                   <div className="border-2 border-dashed rounded-lg p-4">
-                    <Label htmlFor="anexos" className="cursor-pointer block w-full">
+                    <Label htmlFor="anexos" className="cursor-pointer block w-full rounded-md p-4 bg-primary text-primary-foreground">
                       <div className="flex flex-col items-center justify-center text-center">
-                        <Upload className="h-7 w-7 mb-2" />
+                        <Upload className="h-7 w-7 mb-2 text-primary-foreground" />
-                        <p className="text-sm text-muted-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
+                        <p className="text-sm text-primary-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
                       </div>
                     </Label>
                     <Input id="anexos" type="file" multiple className="hidden" onChange={addLocalAnexos} />

susconecta/components/ui/input.tsx

@@ -9,10 +9,10 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       data-slot="input"
       className={cn(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "border border-gray-200/60 dark:border-gray-600/40",
+        "border border-gray-300 dark:border-input",
-        "focus-visible:border-primary focus-visible:ring-primary/15 focus-visible:ring-1",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
-        "hover:border-gray-300/70 dark:hover:border-gray-500/50",
+        "hover:border-gray-400 dark:hover:border-gray-500",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
       {...props}

susconecta/components/ui/textarea.tsx

@@ -8,10 +8,10 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       data-slot="textarea"
       className={cn(
         "placeholder:text-muted-foreground dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "border border-gray-200/60 dark:border-gray-600/40",
+        "border border-gray-300 dark:border-input",
-        "focus-visible:border-primary focus-visible:ring-primary/15 focus-visible:ring-1",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
-        "hover:border-gray-300/70 dark:hover:border-gray-500/50",
+        "hover:border-gray-400 dark:hover:border-gray-500",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
       {...props}