filtros

src/components/Header/Header.css

@@ -1,33 +1,31 @@
-/* src/components/Header/Header.css */
 .header-container {
     width: 100%;
-    position: absolute; /* Permite posicionamento livre sobre o conteúdo */
+    position: absolute;
     top: 0;
     left: 0;
     display: flex;
-    justify-content: flex-end; /* Alinha os elementos do container à direita */
+    justify-content: flex-end;
     padding: 10px 20px;
     box-sizing: border-box;
-    z-index: 1000; /* Garante que fique acima de outros elementos */
+    z-index: 1000;
 }
 
 .right-corner-elements {
     display: flex;
     align-items: center;
-    gap: 20px; /* Espaço entre o telefone e a seção de perfil */
+    gap: 20px;
 }
 
-/* --- ÍCONE DE TELEFONE --- */
 .phone-icon-container {
     font-size: 24px;
     cursor: pointer;
-    padding: 5px; /* Área clicável um pouco maior */
+    padding: 5px;
-}
+}
-.phone-icon {
+
-    display: block; /* Garante que o emoji fique bem centralizado */
+.phone-icon {
+    display: block;
 }
 
-/* --- SEÇÃO DE PERFIL --- */
 .profile-section {
     position: relative;
     display: flex;
@@ -37,19 +35,18 @@
 .profile-picture-container {
     width: 40px; 
     height: 40px;
-    border-radius: 50%; /* Círculo */
+    border-radius: 50%;
     overflow: hidden;
     cursor: pointer;
-    border: 2px solid #ccc; /* Borda simples */
+    border: 2px solid #ccc;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
 .profile-placeholder {
     width: 100%;
     height: 100%;
-    background-color: #A9A9A9; /* Cor cinza escura para o fundo */
+    background-color: #A9A9A9;
     border-radius: 50%;
-    /* Adicionando um ícone simples de pessoa em branco para simular o ícone */
     position: relative;
 }
 
@@ -64,13 +61,12 @@
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23FFFFFF" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3c0 16.7 13.5 30.2 30.2 30.2h387.6c16.7 0 30.2-13.5 30.2-30.2 0-98.5-79.8-178.3-178.3-178.3h-45.7z"/></svg>');
     background-size: contain;
     background-repeat: no-repeat;
-    opacity: 0.8; /* Suaviza um pouco o ícone */
+    opacity: 0.8;
 }
 
-/* --- DROPDOWN (MENU) --- */
 .profile-dropdown {
     position: absolute;
-    top: 50px; /* Posição abaixo da foto de perfil (40px + 10px de espaço) */
+    top: 50px;
     right: 0;
     background-color: white;
     border: 1px solid #ddd;
@@ -78,9 +74,9 @@
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     display: flex;
     flex-direction: column;
-    z-index: 10;
+    z-index: 1000;
     min-width: 150px;
-    overflow: hidden; /* Garante que bordas fiquem visíveis */
+    overflow: hidden;
 }
 
 .dropdown-button {
@@ -99,9 +95,311 @@
 }
 
 .logout-button {
-    color: #cc0000; /* Cor vermelha para o botão de logout */
+    color: #cc0000;
 }
 
 .logout-button:hover {
     background-color: #ffe0e0;
+}
+
+.suporte-card-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    z-index: 2000;
+}
+
+.suporte-card-container {
+    position: relative;
+    z-index: 2001;
+    margin-top: 80px;
+    margin-right: 20px;
+}
+
+.suporte-card {
+    background-color: white;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    padding: 2rem;
+    max-width: 400px;
+    width: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.suporte-titulo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 0.5rem;
+}
+
+.suporte-subtitulo {
+    color: #666;
+    margin-bottom: 1.5rem;
+    line-height: 1.4;
+}
+
+.contato-item {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    border-radius: 8px;
+    background-color: #f8f9fa;
+    transition: background-color 0.2s;
+}
+
+.contato-item:hover {
+    background-color: #e9ecef;
+}
+
+.contato-item.clickable {
+    cursor: pointer;
+    background-color: #e3f2fd;
+}
+
+.contato-item.clickable:hover {
+    background-color: #bbdefb;
+}
+
+.contato-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.contato-nome {
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+}
+
+.contato-descricao {
+    color: #666;
+    font-size: 0.95rem;
+}
+
+.contato-item:last-child {
+    margin-bottom: 0;
+}
+
+.chat-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    z-index: 3000;
+}
+
+.chat-container {
+    position: relative;
+    z-index: 3001;
+    margin-top: 80px;
+    margin-right: 20px;
+}
+
+.chat-online {
+    background-color: white;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    width: 350px;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.chat-header {
+    background-color: #1e3a8a;
+    color: white;
+    padding: 1rem;
+    border-radius: 12px 12px 0 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.chat-titulo {
+    color: white;
+    margin: 0;
+    font-size: 1.1rem;
+}
+
+.fechar-chat {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.fechar-chat:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+}
+
+.chat-mensagens {
+    flex: 1;
+    padding: 1rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.mensagem {
+    max-width: 80%;
+    padding: 0.75rem;
+    border-radius: 12px;
+    position: relative;
+}
+
+.mensagem.usuario {
+    align-self: flex-end;
+    background-color: #e3f2fd;
+    border-bottom-right-radius: 4px;
+}
+
+.mensagem.suporte {
+    align-self: flex-start;
+    background-color: #f5f5f5;
+    border-bottom-left-radius: 4px;
+}
+
+.mensagem-texto {
+    margin-bottom: 0.25rem;
+    word-wrap: break-word;
+}
+
+.mensagem-hora {
+    font-size: 0.7rem;
+    color: #666;
+    text-align: right;
+}
+
+.mensagem.suporte .mensagem-hora {
+    text-align: left;
+}
+
+.chat-input {
+    display: flex;
+    padding: 1rem;
+    border-top: 1px solid #e0e0e0;
+    gap: 0.5rem;
+    background-color: white;
+    border-radius: 0 0 12px 12px;
+}
+
+.chat-campo {
+    flex: 1;
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    outline: none;
+    font-size: 0.9rem;
+    background-color: white;
+}
+
+.chat-campo:focus {
+    border-color: #1e3a8a;
+}
+
+.chat-enviar {
+    background-color: #1e3a8a;
+    color: white;
+    border: none;
+    padding: 0.75rem 1rem;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.chat-enviar:hover {
+    background-color: #1e40af;
+}
+/* Modal de Logout */
+.logout-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.logout-modal-content {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    max-width: 400px;
+    width: 90%;
+    text-align: center;
+}
+
+.logout-modal-content h3 {
+    margin-bottom: 1rem;
+    color: #333;
+    font-size: 1.25rem;
+}
+
+.logout-modal-content p {
+    margin-bottom: 2rem;
+    color: #666;
+    line-height: 1.4;
+}
+
+.logout-modal-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+
+.logout-cancel-button {
+    padding: 0.75rem 1.5rem;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: transparent;
+    color: #333;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.2s;
+}
+
+.logout-cancel-button:hover {
+    background-color: #f0f0f0;
+}
+
+.logout-confirm-button {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 8px;
+    background-color: #dc3545;
+    color: white;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.2s;
+}
+
+.logout-confirm-button:hover {
+    background-color: #c82333;
 }

src/components/Header/Header.jsx

@@ -1,58 +1,290 @@
-// src/components/Header/Header.jsx
+import React, { useState, useRef, useEffect } from 'react';
-import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './Header.css';
 
 const Header = () => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isSuporteCardOpen, setIsSuporteCardOpen] = useState(false);
+  const [isChatOpen, setIsChatOpen] = useState(false);
+  const [mensagem, setMensagem] = useState('');
+  const [mensagens, setMensagens] = useState([]);
+  const [showLogoutModal, setShowLogoutModal] = useState(false);
   const navigate = useNavigate();
+  const chatInputRef = useRef(null);
+  const mensagensContainerRef = useRef(null);
+
+  useEffect(() => {
+    if (isChatOpen && chatInputRef.current) {
+      chatInputRef.current.focus();
+    }
+  }, [isChatOpen]);
+
+  useEffect(() => {
+    if (mensagensContainerRef.current) {
+      mensagensContainerRef.current.scrollTop = mensagensContainerRef.current.scrollHeight;
+    }
+  }, [mensagens]);
+
+  // Funções de Logout (do seu código)
+  const handleLogoutClick = () => {
+    setShowLogoutModal(true);
+    setIsDropdownOpen(false);
+  };
+
+  const handleLogoutConfirm = async () => {
+    try {
+      const token =
+        localStorage.getItem("token") ||
+        localStorage.getItem("authToken") ||
+        localStorage.getItem("userToken") ||
+        localStorage.getItem("access_token") ||
+        sessionStorage.getItem("token") ||
+        sessionStorage.getItem("authToken");
+
+      if (token) {
+        const response = await fetch(
+          "https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        );
+
+        if (response.status === 204) console.log("Logout realizado com sucesso");
+        else if (response.status === 401) console.log("Token inválido ou expirado");
+        else {
+          try {
+            const errorData = await response.json();
+            console.error("Erro no logout:", errorData);
+          } catch {
+            console.error("Erro no logout - status:", response.status);
+          }
+        }
+      }
+
+      clearAuthData();
+      navigate("/login");
+    } catch (error) {
+      console.error("Erro durante logout:", error);
+      clearAuthData();
+      navigate("/login");
+    } finally {
+      setShowLogoutModal(false);
+    }
+  };
+
+  const clearAuthData = () => {
+    ["token","authToken","userToken","access_token","user","auth","userData"].forEach(key => {
+      localStorage.removeItem(key);
+      sessionStorage.removeItem(key);
+    });
+
+    if (window.caches) {
+      caches.keys().then(names => {
+        names.forEach(name => {
+          if (name.includes("auth") || name.includes("api")) caches.delete(name);
+        });
+      });
+    }
+  };
+
+  const handleLogoutCancel = () => setShowLogoutModal(false);
 
   const handleProfileClick = () => {
     setIsDropdownOpen(!isDropdownOpen);
+    if (isSuporteCardOpen) setIsSuporteCardOpen(false);
+    if (isChatOpen) setIsChatOpen(false);
   };
 
   const handleViewProfile = () => {
-    // Redireciona para uma página de perfil (Rota que adicionaremos no App.js)
     navigate('/perfil'); 
     setIsDropdownOpen(false);
   };
 
-  const handleLogout = () => {
+  const handleSuporteClick = () => {
-    // Ação de Logout: Exibe um alerta e redireciona para a tela de Login
+    setIsSuporteCardOpen(!isSuporteCardOpen);
-    alert('Você foi desconectado. Executando ação de logout...');
+    if (isDropdownOpen) setIsDropdownOpen(false);
-    setIsDropdownOpen(false);
+    if (isChatOpen) setIsChatOpen(false);
-    navigate('/login'); 
   };
 
-  const handleSupportClick = () => {
+  const handleCloseSuporteCard = () => {
-    // Funcionalidade de suporte (futuramente implementada em TelefoneSuporte)
+    setIsSuporteCardOpen(false);
-    alert('Função de Suporte de Telefone em desenvolvimento.');
   };
 
+  const handleChatClick = () => {
+    setIsChatOpen(true);
+    setIsSuporteCardOpen(false);
+    setMensagens([
+      {
+        id: 1,
+        texto: 'Olá! Bem-vindo ao suporte Mediconnect. Como podemos ajudar você hoje?',
+        remetente: 'suporte',
+        hora: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
+      }
+    ]);
+  };
+
+  const handleCloseChat = () => {
+    setIsChatOpen(false);
+    setMensagem('');
+  };
+
+  const handleEnviarMensagem = (e) => {
+    e.preventDefault();
+    if (mensagem.trim() === '') return;
+
+    const novaMensagemUsuario = {
+      id: Date.now(),
+      texto: mensagem,
+      remetente: 'usuario',
+      hora: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
+    };
+
+    setMensagens(prev => [...prev, novaMensagemUsuario]);
+    setMensagem('');
+
+    setTimeout(() => {
+      if (chatInputRef.current) {
+        chatInputRef.current.focus();
+      }
+    }, 0);
+
+    setTimeout(() => {
+      const respostas = [
+        'Entendi sua dúvida. Vou verificar isso para você.',
+        'Obrigado pela informação. Estou analisando seu caso.',
+        'Pode me dar mais detalhes sobre o problema?',
+        'Já encaminhei sua solicitação para nossa equipe técnica.',
+        'Vou ajudar você a resolver isso!'
+      ];
+      
+      const respostaSuporte = {
+        id: Date.now() + 1,
+        texto: respostas[Math.floor(Math.random() * respostas.length)],
+        remetente: 'suporte',
+        hora: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
+      };
+
+      setMensagens(prev => [...prev, respostaSuporte]);
+    }, 1000);
+  };
+
+  const SuporteCard = () => (
+    <div className="suporte-card">
+      <h2 className="suporte-titulo">Suporte</h2>
+      <p className="suporte-subtitulo">Entre em contato conosco através dos canais abaixo</p>
+      
+      <div className="contato-item">
+        <div className="contato-info">
+          <div className="contato-nome">Email</div>
+          <div className="contato-descricao">suporte@mediconnect.com</div>
+        </div>
+      </div>
+      
+      <div className="contato-item">
+        <div className="contato-info">
+          <div className="contato-nome">Telefone</div>
+          <div className="contato-descricao">(11) 3333-4444</div>
+        </div>
+      </div>
+      
+      <div className="contato-item clickable" onClick={handleChatClick}>
+        <div className="contato-info">
+          <div className="contato-nome">Chat Online</div>
+          <div className="contato-descricao">Disponível 24/7</div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const ChatOnline = () => (
+    <div className="chat-online">
+      <div className="chat-header">
+        <h3 className="chat-titulo">Chat de Suporte</h3>
+        <button type="button" className="fechar-chat" onClick={handleCloseChat}>×</button>
+      </div>
+      
+      <div className="chat-mensagens" ref={mensagensContainerRef}>
+        {mensagens.map((msg) => (
+          <div key={msg.id} className={`mensagem ${msg.remetente}`}>
+            <div className="mensagem-texto">{msg.texto}</div>
+            <div className="mensagem-hora">{msg.hora}</div>
+          </div>
+        ))}
+      </div>
+      
+      <form className="chat-input" onSubmit={handleEnviarMensagem}>
+        <input
+          ref={chatInputRef}
+          type="text"
+          value={mensagem}
+          onChange={(e) => setMensagem(e.target.value)}
+          placeholder="Digite sua mensagem..."
+          className="chat-campo"
+          autoFocus
+        />
+        <button type="submit" className="chat-enviar">Enviar</button>
+      </form>
+    </div>
+  );
+
   return (
     <div className="header-container">
       <div className="right-corner-elements">
-        
+        <div className="phone-icon-container" onClick={handleSuporteClick}>
-        {/* Ícone de Telefone */}
-        <div className="phone-icon-container" onClick={handleSupportClick}>
           <span className="phone-icon" role="img" aria-label="telefone">📞</span>
         </div>
 
-        {/* Seção de Perfil com Dropdown */}
         <div className="profile-section">
           <div className="profile-picture-container" onClick={handleProfileClick}>
-            {/* O div "profile-placeholder" simula a foto de perfil circular colorida */}
             <div className="profile-placeholder"></div> 
           </div>
 
           {isDropdownOpen && (
             <div className="profile-dropdown">
-              <button onClick={handleViewProfile} className="dropdown-button">Ver Perfil</button>
+              <button type="button" onClick={handleViewProfile} className="dropdown-button">Ver Perfil</button>
-              <button onClick={handleLogout} className="dropdown-button logout-button">Sair (Logout)</button>
+              <button type="button" onClick={handleLogoutClick} className="dropdown-button logout-button">Sair (Logout)</button>
             </div>
           )}
         </div>
       </div>
+
+      {/* Modal de Logout */}
+      {showLogoutModal && (
+        <div className="logout-modal-overlay">
+          <div className="logout-modal-content">
+            <h3>Confirmar Logout</h3>
+            <p>Tem certeza que deseja encerrar a sessão?</p>
+            <div className="logout-modal-buttons">
+              <button onClick={handleLogoutCancel} className="logout-cancel-button">
+                Cancelar
+              </button>
+              <button onClick={handleLogoutConfirm} className="logout-confirm-button">
+                Sair
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {isSuporteCardOpen && (
+        <div className="suporte-card-overlay" onClick={handleCloseSuporteCard}>
+          <div className="suporte-card-container" onClick={(e) => e.stopPropagation()}>
+            <SuporteCard />
+          </div>
+        </div>
+      )}
+
+      {isChatOpen && (
+        <div className="chat-overlay">
+          <div className="chat-container">
+            <ChatOnline />
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/components/doctors/DoctorForm.css

@@ -0,0 +1,201 @@
+.doctor-form-container {
+  padding: 1rem;
+}
+
+.doctor-form-title {
+  margin-bottom: 1.5rem;
+  text-align: center;
+  font-size: 2.5rem;
+}
+
+.form-section {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.section-header {
+  margin-bottom: 1rem;
+  font-size: 1.8rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.section-toggle {
+  font-size: 1.25rem;
+}
+
+.form-label {
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.form-control-custom {
+  font-size: 1.1rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.avatar-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3.5rem;
+  color: #9e9e9e;
+}
+
+.file-input-label {
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+}
+
+.actions-container {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.btn-submit {
+  font-size: 1.2rem;
+  padding: 0.75rem 1.5rem;
+  margin-right: 1rem;
+}
+
+.btn-cancel {
+  font-size: 1.2rem;
+  padding: 0.75rem 1.5rem;
+}
+
+
+.modal-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+.modal-content {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.modal-header {
+  background-color: #1e3a8a;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-title {
+  color: #fff;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.modal-close-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 25px 20px;
+}
+
+.modal-message {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0 0 15px 0;
+  font-weight: bold;
+}
+
+.modal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-left: 10px;
+}
+
+.modal-list-item {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 600;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 20px;
+  border-top: 1px solid #ddd;
+}
+
+.modal-confirm-btn {
+  background-color: #1e3a8a;
+  color: #fff;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .doctor-form-title {
+    font-size: 2rem;
+  }
+  
+  .section-header {
+    font-size: 1.5rem;
+  }
+  
+  .form-section {
+    padding: 1rem;
+  }
+  
+  .avatar-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .btn-submit,
+  .btn-cancel {
+    font-size: 1.1rem;
+    padding: 0.6rem 1.2rem;
+  }
+}

src/components/doctors/DoctorForm.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
+import './DoctorForm.css';
 
 function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const navigate = useNavigate();
@@ -22,16 +23,13 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
   };
 
- 
   const validarCPF = (cpf) => {
     const cpfLimpo = cpf.replace(/\D/g, '');
  
     if (cpfLimpo.length !== 11) return false;
     
-
     if (/^(\d)\1+$/.test(cpfLimpo)) return false;
     
-    
     let soma = 0;
     for (let i = 0; i < 9; i++) {
       soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
@@ -39,7 +37,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     let resto = 11 - (soma % 11);
     let digito1 = resto === 10 || resto === 11 ? 0 : resto;
     
-
     soma = 0;
     for (let i = 0; i < 10; i++) {
       soma += parseInt(cpfLimpo.charAt(i)) * (11 - i);
@@ -47,7 +44,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     resto = 11 - (soma % 11);
     let digito2 = resto === 10 || resto === 11 ? 0 : resto;
     
-  
     return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
   };
 
@@ -79,12 +75,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const handleChange = (e) => {
     const { name, value, type, checked, files } = e.target;
 
-   
     if (value && emptyFields.includes(name)) {
       setEmptyFields(prev => prev.filter(field => field !== name));
     }
 
-   
     if (name === 'cpf' && cpfError) {
       setCpfError('');
     }
@@ -108,7 +102,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       let cpfFormatado = FormatCPF(value);
       setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
 
-      
       const cpfLimpo = cpfFormatado.replace(/\D/g, '');
       if (cpfLimpo.length === 11) {
         if (!validarCPF(cpfFormatado)) {
@@ -150,7 +143,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
   };
 
- 
   const scrollToEmptyField = (fieldName) => {
     let fieldRef = null;
     
@@ -183,7 +175,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         return;
     }
 
-
     setTimeout(() => {
       if (fieldRef.current) {
         fieldRef.current.scrollIntoView({ 
@@ -192,11 +183,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         });
         fieldRef.current.focus();
         
-  
         fieldRef.current.style.border = '2px solid #dc3545';
         fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
         
-   
         setTimeout(() => {
           if (fieldRef.current) {
             fieldRef.current.style.border = '';
@@ -208,7 +197,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   };
 
   const handleSubmit = async () => {
-
     const missingFields = [];
     if (!formData.full_name) missingFields.push('full_name');
     if (!formData.cpf) missingFields.push('cpf');
@@ -221,7 +209,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       setEmptyFields(missingFields);
       setShowRequiredModal(true);
       
-  
       setTimeout(() => {
         if (missingFields.length > 0) {
           scrollToEmptyField(missingFields[0]);
@@ -230,7 +217,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       return;
     }
 
-   
     const cpfLimpo = formData.cpf.replace(/\D/g, '');
     if (cpfLimpo.length !== 11) {
       setShowRequiredModal(true);
@@ -240,7 +226,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       return;
     }
 
-   
     if (!validarCPF(formData.cpf)) {
       setShowRequiredModal(true);
       setEmptyFields(['cpf']);
@@ -249,12 +234,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       return;
     }
 
-  
     try {
       await onSave({ ...formData });
-
     } catch (error) {
-    
       throw error;
     }
   };
@@ -265,96 +247,43 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
 
   return (
     <>
- 
       {showRequiredModal && (
-        <div
+        <div className="modal-overlay">
-          style={{
+          <div className="modal-content">
-            display: "flex",
+            <div className="modal-header">
-            justifyContent: "center",
+              <h5 className="modal-title">Atenção</h5>
-            alignItems: "center",
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            backgroundColor: "rgba(0,0,0,0.5)",
-            zIndex: 9999,
-          }}
-        >
-          <div
-            style={{
-              backgroundColor: "#fff",
-              borderRadius: "10px",
-              width: "400px",
-              maxWidth: "90%",
-              boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
-              overflow: "hidden",
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: "#1e3a8a",
-                padding: "15px 20px",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
               <button
                 onClick={handleModalClose}
-                style={{
+                className="modal-close-btn"
-                  background: "none",
-                  border: "none",
-                  fontSize: "20px",
-                  color: "#fff",
-                  cursor: "pointer",
-                }}
               >
                 ×
               </button>
             </div>
 
-            <div style={{ padding: "25px 20px" }}>
+            <div className="modal-body">
-              <p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
+              <p className="modal-message">
                 {cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
               </p>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
+              <div className="modal-list">
                 {cpfError ? (
-                  <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
+                  <p className="modal-list-item">{cpfError}</p>
                 ) : (
                   <>
-                    {!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
+                    {!formData.full_name && <p className="modal-list-item">- Nome</p>}
-                    {!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
+                    {!formData.cpf && <p className="modal-list-item">- CPF</p>}
-                    {!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
+                    {!formData.email && <p className="modal-list-item">- Email</p>}
-                    {!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
+                    {!formData.phone_mobile && <p className="modal-list-item">- Telefone</p>}
-                    {!formData.crm_uf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Estado do CRM</p>}
+                    {!formData.crm_uf && <p className="modal-list-item">- Estado do CRM</p>}
-                    {!formData.crm && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CRM</p>}
+                    {!formData.crm && <p className="modal-list-item">- CRM</p>}
                   </>
                 )}
               </div>
             </div>
 
-            <div
+            <div className="modal-footer">
-              style={{
-                display: "flex",
-                justifyContent: "flex-end",
-                padding: "15px 20px",
-                borderTop: "1px solid #ddd",
-              }}
-            >
               <button
                 onClick={handleModalClose}
-                style={{
+                className="modal-confirm-btn"
-                  backgroundColor: "#1e3a8a",
-                  color: "#fff",
-                  border: "none",
-                  padding: "8px 20px",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontSize: "1rem",
-                  fontWeight: "bold",
-                }}
               >
                 Fechar
               </button>
@@ -363,48 +292,35 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         </div>
       )}
 
-      <div className="card p-3 shadow-sm">
+      <div className="card doctor-form-container shadow-sm">
-        <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
+        <h3 className="doctor-form-title">MediConnect</h3>
 
-        <div className="mb-5 p-4 border rounded shadow-sm">
+        {/* DADOS PESSOAIS */}
-          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
+        <div className="form-section">
-            onClick={() => handleToggleCollapse('dadosPessoais')}
+          <h4 className="section-header" onClick={() => handleToggleCollapse('dadosPessoais')}>
-            style={{ fontSize: '1.8rem' }}>
             Dados Pessoais
-            <span className="fs-5">
+            <span className="section-toggle">
               {collapsedSections.dadosPessoais ? '▲' : '▼'}
             </span>
           </h4>
           <div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
             <div className="row mt-3">
-              <div className="col-md-6 mb-3 d-flex align-items-center">
+              <div className="col-md-6 mb-3 avatar-container">
                 <div className="me-3">
                   {avatarUrl ? (
                     <img
                       src={avatarUrl}
                       alt="Avatar do Médico"
-                      style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
+                      className="avatar-image"
                     />
                   ) : (
-                    <div
+                    <div className="avatar-placeholder">
-                      style={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '50%',
-                        backgroundColor: '#e0e0e0',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        fontSize: '3.5rem',
-                        color: '#9e9e9e'
-                      }}
-                    >
                       &#x2624;
                     </div>
                   )}
                 </div>
                 <div>
-                  <label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
+                  <label htmlFor="foto-input" className="btn btn-primary file-input-label">Carregar Foto</label>
                   <input
                     type="file"
                     className="form-control d-none"
@@ -413,31 +329,31 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                     onChange={handleChange}
                     accept="image/*"
                   />
-                  {formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
+                  {formData.foto && <span className="ms-2 form-label">{formData.foto.name}</span>}
                 </div>
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
+                <label className="form-label">Nome: *</label>
                 <input 
                   ref={nomeRef}
                   type="text" 
-                  className="form-control" 
+                  className="form-control form-control-custom" 
                   name="full_name" 
                   value={formData.full_name || ''} 
                   onChange={handleChange} 
                 />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
+                <label className="form-label">Data de nascimento:</label>
-                <input type="date" className="form-control" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
+                <input type="date" className="form-control form-control-custom" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>CPF: *</label>
+                <label className="form-label">CPF: *</label>
                 <input 
                   ref={cpfRef}
                   type="text" 
-                  className={`form-control ${cpfError ? 'is-invalid' : ''}`}
+                  className={`form-control form-control-custom ${cpfError ? 'is-invalid' : ''}`}
                   name="cpf" 
                   value={formData.cpf || ''} 
                   onChange={handleChange} 
@@ -450,10 +366,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Estado do CRM: *</label>
+                <label className="form-label">Estado do CRM: *</label>
                 <select 
                   ref={crmUfRef}
-                  className="form-control" 
+                  className="form-control form-control-custom" 
                   name="crm_uf" 
                   value={formData.crm_uf || ''} 
                   onChange={handleChange}
@@ -489,11 +405,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>CRM: *</label>
+                <label className="form-label">CRM: *</label>
                 <input 
                   ref={crmRef}
                   type="text" 
-                  className="form-control" 
+                  className="form-control form-control-custom" 
                   name="crm" 
                   value={formData.crm || ''} 
                   onChange={handleChange} 
@@ -501,8 +417,8 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Especialização:</label>
+                <label className="form-label">Especialização:</label>
-                <select className="form-control" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
+                <select className="form-control form-control-custom" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
                   <option value="">Selecione</option>
                   <option value="Clínica Geral">Clínica médica (clínico geral)</option>
                   <option value="Pediatria">Pediatria</option>
@@ -523,105 +439,100 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
           </div>
         </div>
 
-        <div className="mb-5 p-4 border rounded shadow-sm">
+        {/* CONTATO */}
-          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
+        <div className="form-section">
-            onClick={() => handleToggleCollapse('contato')}
+          <h4 className="section-header" onClick={() => handleToggleCollapse('contato')}>
-            style={{ fontSize: '1.8rem' }}>
             Contato
-            <span className="fs-5">
+            <span className="section-toggle">
               {collapsedSections.contato ? '▲' : '▼'}
             </span>
           </h4>
           <div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
             <div className="row mt-3">
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Email: *</label>
+                <label className="form-label">Email: *</label>
                 <input 
                   ref={emailRef}
                   type="email" 
-                  className="form-control" 
+                  className="form-control form-control-custom" 
                   name="email" 
                   value={formData.email || ''} 
                   onChange={handleChange} 
                 />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
+                <label className="form-label">Telefone: *</label>
                 <input 
                   ref={telefoneRef}
                   type="text" 
-                  className="form-control" 
+                  className="form-control form-control-custom" 
                   name="phone_mobile" 
                   value={formData.phone_mobile || ''} 
                   onChange={handleChange} 
                 />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
+                <label className="form-label">Telefone 2:</label>
-                <input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
+                <input type="text" className="form-control form-control-custom" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
               </div>
             </div>
           </div>
         </div>
 
-        <div className="mb-5 p-4 border rounded shadow-sm">
+        {/* ENDEREÇO */}
-          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
+        <div className="form-section">
-            onClick={() => handleToggleCollapse('endereco')}
+          <h4 className="section-header" onClick={() => handleToggleCollapse('endereco')}>
-            style={{ fontSize: '1.8rem' }}>
             Endereço
-            <span className="fs-5">
+            <span className="section-toggle">
               {collapsedSections.endereco ? '▲' : '▼'}
             </span>
           </h4>
           <div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
             <div className="row mt-3">
               <div className="col-md-4 mb-3">
-                <label>CEP:</label>
+                <label className="form-label">CEP:</label>
-                <input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
+                <input type="text" className="form-control form-control-custom" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
               </div>
               <div className="col-md-8 mb-3">
-                <label>Rua:</label>
+                <label className="form-label">Rua:</label>
-                <input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} />
+                <input type="text" className="form-control form-control-custom" name="street" value={formData.street || ''} onChange={handleChange} />
               </div>
               <div className="col-md-6 mb-3">
-                <label>Bairro:</label>
+                <label className="form-label">Bairro:</label>
-                <input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
+                <input type="text" className="form-control form-control-custom" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
               </div>
               <div className="col-md-4 mb-3">
-                <label>Cidade:</label>
+                <label className="form-label">Cidade:</label>
-                <input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} />
+                <input type="text" className="form-control form-control-custom" name="city" value={formData.city || ''} onChange={handleChange} />
               </div>
               <div className="col-md-2 mb-3">
-                <label>Estado:</label>
+                <label className="form-label">Estado:</label>
-                <input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} />
+                <input type="text" className="form-control form-control-custom" name="state" value={formData.state || ''} onChange={handleChange} />
               </div>
               <div className="col-md-4 mb-3">
-                <label>Número:</label>
+                <label className="form-label">Número:</label>
-                <input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} />
+                <input type="text" className="form-control form-control-custom" name="number" value={formData.number || ''} onChange={handleChange} />
               </div>
               <div className="col-md-8 mb-3">
-                <label>Complemento:</label>
+                <label className="form-label">Complemento:</label>
-                <input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} />
+                <input type="text" className="form-control form-control-custom" name="complement" value={formData.complement || ''} onChange={handleChange} />
               </div>
             </div>
           </div>
         </div>
 
-        <div className="mt-3 text-center">
+        {/* BOTÕES DE AÇÃO */}
+        <div className="actions-container">
           <button
-            className="btn btn-success me-3"
+            className="btn btn-success btn-submit"
             onClick={handleSubmit}
             disabled={isLoading}
-            style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
           >
             {isLoading ? 'Salvando...' : 'Salvar Médico'}
           </button>
           
           <Link to={`/${location.pathname.split("/")[1]}/medicos`}>
-            <button 
+            <button className="btn btn-light btn-cancel">
-              className="btn btn-light" 
-              style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
-            >
               Cancelar
             </button>
           </Link>

src/components/patients/PatientForm.css

@@ -0,0 +1,215 @@
+.patient-form-container {
+  padding: 1rem;
+}
+
+.patient-form-title {
+  margin-bottom: 1.5rem;
+  text-align: center;
+  font-size: 2.5rem;
+}
+
+.form-section {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.section-header {
+  margin-bottom: 1rem;
+  font-size: 1.8rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.section-toggle {
+  font-size: 1.25rem;
+}
+
+.form-label {
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.form-control-custom {
+  font-size: 1.1rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.avatar-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3.5rem;
+  color: #9e9e9e;
+}
+
+.file-input-label {
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+}
+
+.checkbox-custom {
+  transform: scale(1.2);
+}
+
+.checkbox-label {
+  font-size: 1.1rem;
+  margin-left: 0.5rem;
+}
+
+.textarea-custom {
+  font-size: 1.1rem;
+  min-height: 100px;
+}
+
+.actions-container {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.btn-submit {
+  font-size: 1.2rem;
+  padding: 0.75rem 1.5rem;
+  margin-right: 1rem;
+}
+
+.btn-cancel {
+  font-size: 1.2rem;
+  padding: 0.75rem 1.5rem;
+}
+
+
+.modal-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+.modal-content {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.modal-header {
+  background-color: #1e3a8a;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-title {
+  color: #fff;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.modal-close-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 25px 20px;
+}
+
+.modal-message {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0 0 15px 0;
+  font-weight: bold;
+}
+
+.modal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-left: 10px;
+}
+
+.modal-list-item {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 600;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 20px;
+  border-top: 1px solid #ddd;
+}
+
+.modal-confirm-btn {
+  background-color: #1e3a8a;
+  color: #fff;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .patient-form-title {
+    font-size: 2rem;
+  }
+  
+  .section-header {
+    font-size: 1.5rem;
+  }
+  
+  .form-section {
+    padding: 1rem;
+  }
+  
+  .avatar-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .btn-submit,
+  .btn-cancel {
+    font-size: 1.1rem;
+    padding: 0.6rem 1.2rem;
+  }
+}

src/components/patients/PatientForm.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { FormatTelefones, FormatPeso, FormatCPF } from '../utils/Formatar/Format';
+import './PatientForm.css';
 
 function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const [avatarUrl, setAvatarUrl] = useState(null);
@@ -20,17 +21,13 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const emailRef = useRef(null);
   const telefoneRef = useRef(null);
 
-
   const validarCPF = (cpf) => {
     const cpfLimpo = cpf.replace(/\D/g, '');
 
-
     if (cpfLimpo.length !== 11) return false;
 
-
     if (/^(\d)\1+$/.test(cpfLimpo)) return false;
 
-
     let soma = 0;
     for (let i = 0; i < 9; i++) {
       soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
@@ -38,7 +35,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     let resto = 11 - (soma % 11);
     let digito1 = resto === 10 || resto === 11 ? 0 : resto;
 
-
     soma = 0;
     for (let i = 0; i < 10; i++) {
       soma += parseInt(cpfLimpo.charAt(i)) * (11 - i);
@@ -46,7 +42,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     resto = 11 - (soma % 11);
     let digito2 = resto === 10 || resto === 11 ? 0 : resto;
 
-
     return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
   };
 
@@ -71,12 +66,10 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const handleChange = (e) => {
     const { name, value, type, checked, files } = e.target;
 
-
     if (value && emptyFields.includes(name)) {
       setEmptyFields(prev => prev.filter(field => field !== name));
     }
 
-
     if (name === 'cpf' && cpfError) {
       setCpfError('');
     }
@@ -120,7 +113,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     switch (fieldName) {
       case 'full_name':
         fieldRef = nomeRef;
- 
         setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
         break;
       case 'cpf':
@@ -139,7 +131,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         return;
     }
 
- 
     setTimeout(() => {
       if (fieldRef.current) {
         fieldRef.current.scrollIntoView({
@@ -148,11 +139,9 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         });
         fieldRef.current.focus();
 
-      
         fieldRef.current.style.border = '2px solid #dc3545';
         fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
 
-
         setTimeout(() => {
           if (fieldRef.current) {
             fieldRef.current.style.border = '';
@@ -164,7 +153,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   };
 
   const handleSubmit = async () => {
-
     const missingFields = [];
     if (!formData.full_name) missingFields.push('full_name');
     if (!formData.cpf) missingFields.push('cpf');
@@ -175,17 +163,14 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       setEmptyFields(missingFields);
       setShowRequiredModal(true);
 
-     
       setTimeout(() => {
         if (missingFields.length > 0) {
           scrollToEmptyField(missingFields[0]);
         }
-      }, 500); 
+      }, 500);
-
       return;
     }
 
- 
     const cpfLimpo = formData.cpf.replace(/\D/g, '');
     if (cpfLimpo.length !== 11) {
       setShowRequiredModal(true);
@@ -195,7 +180,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       return;
     }
 
-   
     if (!validarCPF(formData.cpf)) {
       setShowRequiredModal(true);
       setEmptyFields(['cpf']);
@@ -205,8 +189,10 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
 
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(formData.email)) {
+      throw new Error('Email inválido. Por favor, verifique o email digitado.');
+    }
 
-   
     await onSave({ ...formData, bmi: parseFloat(formData.bmi) || null });
   };
 
@@ -215,48 +201,36 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   };
 
   return (
-    <div className="card p-3">
+    <div className="card patient-form-container">
-      <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
+      <h3 className="patient-form-title">MediConnect</h3>
 
       {/* DADOS PESSOAIS */}
-      <div className="mb-5 p-4 border rounded shadow-sm">
+      <div className="form-section">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}>
+        <h4 className="section-header" onClick={() => handleToggleCollapse('dadosPessoais')}>
           Dados Pessoais
-          <span className="fs-5">
+          <span className="section-toggle">
             {collapsedSections.dadosPessoais ? '▲' : '▼'}
           </span>
         </h4>
         <div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
           <div className="row mt-3">
             {/* AVATAR E INPUT DE FOTO */}
-            <div className="col-md-6 mb-3 d-flex align-items-center">
+            <div className="col-md-6 mb-3 avatar-container">
               <div className="me-3">
                 {avatarUrl ? (
                   <img
                     src={avatarUrl}
                     alt="Avatar do Paciente"
-                    style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
+                    className="avatar-image"
                   />
                 ) : (
-                  <div
+                  <div className="avatar-placeholder">
-                    style={{
-                      width: '100px',
-                      height: '100px',
-                      borderRadius: '50%',
-                      backgroundColor: '#e0e0e0',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      fontSize: '3.5rem',
-                      color: '#9e9e9e'
-                    }}
-                  >
                     &#x2624;
                   </div>
                 )}
               </div>
               <div>
-                <label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
+                <label htmlFor="foto-input" className="btn btn-primary file-input-label">Carregar Foto</label>
                 <input
                   type="file"
                   className="form-control d-none"
@@ -265,48 +239,45 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onChange={handleChange}
                   accept="image/*"
                 />
-                {formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
+                {formData.foto && <span className="ms-2 form-label">{formData.foto.name}</span>}
               </div>
             </div>
 
             {/* CAMPOS OBRIGATÓRIOS */}
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
+              <label className="form-label">Nome: *</label>
               <input
                 ref={nomeRef}
                 type="text"
-                className="form-control"
+                className="form-control form-control-custom"
                 name="full_name"
                 value={formData.full_name || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
                 required
               />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome social:</label>
+              <label className="form-label">Nome social:</label>
-              <input type="text" className="form-control" name="social_name" value={formData.social_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="social_name" value={formData.social_name || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
+              <label className="form-label">Data de nascimento:</label>
               <input
                 type="date"
-                className="form-control"
+                className="form-control form-control-custom"
                 name="birth_date"
                 value={formData.birth_date || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
                 min="1900-01-01" max="2025-09-24"
               />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Gênero:</label>
+              <label className="form-label">Gênero:</label>
               <select
-                className="form-control"
+                className="form-control form-control-custom"
                 name="sex"
                 value={formData.sex || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
               >
                 <option value="">Selecione</option>
                 <option value="Masculino">Masculino</option>
@@ -315,15 +286,14 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>CPF: *</label>
+              <label className="form-label">CPF: *</label>
               <input
                 ref={cpfRef}
                 type="text"
-                className={`form-control ${cpfError ? 'is-invalid' : ''}`}
+                className={`form-control form-control-custom ${cpfError ? 'is-invalid' : ''}`}
                 name="cpf"
                 value={formData.cpf || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
                 required
               />
               {cpfError && (
@@ -333,12 +303,12 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               )}
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>RG:</label>
+              <label className="form-label">RG:</label>
-              <input type="text" className="form-control" name="rg" value={formData.rg || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="rg" value={formData.rg || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Outros documentos:</label>
+              <label className="form-label">Outros documentos:</label>
-              <select className="form-control" name="document_type" value={formData.document_type || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <select className="form-control form-control-custom" name="document_type" value={formData.document_type || ''} onChange={handleChange}>
                 <option value="">Selecione</option>
                 <option value="CNH">CNH</option>
                 <option value="Passaporte">Passaporte</option>
@@ -346,12 +316,12 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Número do documento:</label>
+              <label className="form-label">Número do documento:</label>
-              <input type="text" className="form-control" name="document_number" value={formData.document_number || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="document_number" value={formData.document_number || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label>
+              <label className="form-label">Etnia e Raça:</label>
-              <select className="form-control" name="race" value={formData.race || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <select className="form-control form-control-custom" name="race" value={formData.race || ''} onChange={handleChange}>
                 <option value="">Selecione</option>
                 <option value="Branca">Branca</option>
                 <option value="Preta">Preta</option>
@@ -361,20 +331,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Naturalidade:</label>
+              <label className="form-label">Naturalidade:</label>
-              <input type="text" className="form-control" name="naturality" value={formData.naturalidade || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="naturality" value={formData.naturalidade || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nacionalidade:</label>
+              <label className="form-label">Nacionalidade:</label>
-              <input type="text" className="form-control" name="nationality" value={formData.nationality || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="nationality" value={formData.nationality || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Profissão:</label>
+              <label className="form-label">Profissão:</label>
-              <input type="text" className="form-control" name="profession" value={formData.profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="profession" value={formData.profession || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
+              <label className="form-label">Estado civil:</label>
-              <select className="form-control" name="marital_status" value={formData.marital_status || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <select className="form-control form-control-custom" name="marital_status" value={formData.marital_status || ''} onChange={handleChange}>
                 <option value="" disabled>Selecione</option>
                 <option value="Solteiro">Solteiro(a)</option>
                 <option value="Casado">Casado(a)</option>
@@ -383,37 +353,37 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome da Mãe:</label>
+              <label className="form-label">Nome da Mãe:</label>
-              <input type="text" className="form-control" name="mother_name" value={formData.mother_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="mother_name" value={formData.mother_name || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Profissão da mãe:</label>
+              <label className="form-label">Profissão da mãe:</label>
-              <input type="text" className="form-control" name="mother_profession" value={formData.mother_profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="mother_profession" value={formData.mother_profession || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome do Pai:</label>
+              <label className="form-label">Nome do Pai:</label>
-              <input type="text" className="form-control" name="father_name" value={formData.father_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="father_name" value={formData.father_name || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Profissão do pai:</label>
+              <label className="form-label">Profissão do pai:</label>
-              <input type="text" className="form-control" name="father_profession" value={formData.father_profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="father_profession" value={formData.father_profession || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome do responsável:</label>
+              <label className="form-label">Nome do responsável:</label>
-              <input type="text" className="form-control" name="guardian_name" value={formData.guardian_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="guardian_name" value={formData.guardian_name || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>CPF do responsável:</label>
+              <label className="form-label">CPF do responsável:</label>
-              <input type="text" className="form-control" name="guardian_cpf" value={formData.guardian_cpf || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="guardian_cpf" value={formData.guardian_cpf || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Identificador de outro sistema:</label>
+              <label className="form-label">Identificador de outro sistema:</label>
-              <input type="text" className="form-control" name="legacy_code" value={formData.legacy_code || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="legacy_code" value={formData.legacy_code || ''} onChange={handleChange} />
             </div>
             <div className="col-md-12 mb-3">
               <div className="form-check">
-                <input className="form-check-input" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance || false} onChange={handleChange} id="rn_in_insurance" style={{ transform: 'scale(1.2)' }} />
+                <input className="form-check-input checkbox-custom" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance || false} onChange={handleChange} id="rn_in_insurance" />
-                <label className="form-check-label ms-2" htmlFor="rn_in_insurance" style={{ fontSize: '1.1rem' }}>
+                <label className="form-check-label checkbox-label" htmlFor="rn_in_insurance">
                   RN na Guia do convênio
                 </label>
               </div>
@@ -421,35 +391,34 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
 
             {/* CAMPOS ADICIONAIS */}
             <div className="col-md-12 mb-3 mt-3">
-              <label style={{ fontSize: '1.1rem' }}>Observações:</label>
+              <label className="form-label">Observações:</label>
-              <textarea className="form-control" name="notes" value={formData.notes || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
+              <textarea className="form-control textarea-custom" name="notes" value={formData.notes || ''} onChange={handleChange} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
             </div>
             <div className="col-md-12 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
+              <label className="form-label">Anexos do Paciente:</label>
               <div>
-                <label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem' }}>Escolher arquivo</label>
+                <label htmlFor="anexos-input" className="btn btn-secondary file-input-label">Escolher arquivo</label>
                 <input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
-                <span className="ms-2" style={{ fontSize: '1.1rem' }}>{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
+                <span className="ms-2 form-label">{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
               </div>
             </div>
-
           </div>
         </div>
       </div>
 
       {/* INFORMAÇÕES MÉDICAS */}
-      <div className="mb-5 p-4 border rounded shadow-sm">
+      <div className="form-section">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoMedicas')} style={{ fontSize: '1.8rem' }}>
+        <h4 className="section-header" onClick={() => handleToggleCollapse('infoMedicas')}>
           Informações Médicas
-          <span className="fs-5">
+          <span className="section-toggle">
             {collapsedSections.infoMedicas ? '▲' : '▼'}
           </span>
         </h4>
         <div className={`collapse${collapsedSections.infoMedicas ? ' show' : ''}`}>
           <div className="row mt-3">
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Tipo Sanguíneo:</label>
+              <label className="form-label">Tipo Sanguíneo:</label>
-              <select className="form-control" name="blood_type" value={formData.blood_type || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <select className="form-control form-control-custom" name="blood_type" value={formData.blood_type || ''} onChange={handleChange}>
                 <option value="">Selecione</option>
                 <option value="A+">A+</option>
                 <option value="A-">A-</option>
@@ -462,35 +431,34 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-2 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Peso (kg):</label>
+              <label className="form-label">Peso (kg):</label>
-              <input type="text" step="0.1" className="form-control" name="weight_kg" value={formData.weight_kg || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" step="0.1" className="form-control form-control-custom" name="weight_kg" value={formData.weight_kg || ''} onChange={handleChange} />
             </div>
             <div className="col-md-2 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Altura (m):</label>
+              <label className="form-label">Altura (m):</label>
-              <input type="text" step="0.01" className="form-control" name="height_m" value={formData.height_m || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" step="0.01" className="form-control form-control-custom" name="height_m" value={formData.height_m || ''} onChange={handleChange} />
             </div>
             <div className="col-md-2 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>IMC (kg/m²):</label>
+              <label className="form-label">IMC (kg/m²):</label>
-              <input type="text" className="form-control" name="bmi" value={formData.bmi || ''} readOnly disabled style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="bmi" value={formData.bmi || ''} readOnly disabled />
             </div>
-
           </div>
         </div>
       </div>
 
       {/* INFORMAÇÕES DE CONVÊNIO */}
-      <div className="mb-5 p-4 border rounded shadow-sm">
+      <div className="form-section">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoConvenio')} style={{ fontSize: '1.8rem' }}>
+        <h4 className="section-header" onClick={() => handleToggleCollapse('infoConvenio')}>
           Informações de convênio
-          <span className="fs-5">
+          <span className="section-toggle">
             {collapsedSections.infoConvenio ? '▲' : '▼'}
           </span>
         </h4>
         <div className={`collapse${collapsedSections.infoConvenio ? ' show' : ''}`}>
           <div className="row mt-3">
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Convênio:</label>
+              <label className="form-label">Convênio:</label>
-              <select className="form-control" name="convenio" value={formData.convenio || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <select className="form-control form-control-custom" name="convenio" value={formData.convenio || ''} onChange={handleChange}>
                 <option value="">Selecione</option>
                 <option value="Amil">Amil</option>
                 <option value="Bradesco Saúde">Bradesco Saúde</option>
@@ -499,21 +467,21 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Plano:</label>
+              <label className="form-label">Plano:</label>
-              <input type="text" className="form-control" name="plano" value={formData.plano || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="plano" value={formData.plano || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nº de matrícula:</label>
+              <label className="form-label">Nº de matrícula:</label>
-              <input type="text" className="form-control" name="numeroMatricula" value={formData.numeroMatricula || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="numeroMatricula" value={formData.numeroMatricula || ''} onChange={handleChange} />
             </div>
             <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Validade da Carteira:</label>
+              <label className="form-label">Validade da Carteira:</label>
-              <input type="date" className="form-control" name="validadeCarteira" value={formData.validadeCarteira || ''} onChange={handleChange} disabled={formData.validadeIndeterminada} style={{ fontSize: '1.1rem' }} />
+              <input type="date" className="form-control form-control-custom" name="validadeCarteira" value={formData.validadeCarteira || ''} onChange={handleChange} disabled={formData.validadeIndeterminada} />
             </div>
             <div className="col-md-2 d-flex align-items-end mb-3">
               <div className="form-check">
-                <input className="form-check-input" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada || false} onChange={handleChange} id="validadeIndeterminada" style={{ transform: 'scale(1.2)' }} />
+                <input className="form-check-input checkbox-custom" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada || false} onChange={handleChange} id="validadeIndeterminada" />
-                <label className="form-check-label ms-2" htmlFor="validadeIndeterminada" style={{ fontSize: '1.1rem' }}>
+                <label className="form-check-label checkbox-label" htmlFor="validadeIndeterminada">
                   Validade indeterminada
                 </label>
               </div>
@@ -521,8 +489,8 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
             {/* PACIENTE VIP */}
             <div className="col-md-12 mb-3 mt-3">
               <div className="form-check">
-                <input className="form-check-input" type="checkbox" name="vip" checked={formData.vip || false} onChange={handleChange} id="vip" style={{ transform: 'scale(1.2)' }} />
+                <input className="form-check-input checkbox-custom" type="checkbox" name="vip" checked={formData.vip || false} onChange={handleChange} id="vip" />
-                <label className="form-check-label ms-2" htmlFor="vip" style={{ fontSize: '1.1rem' }}>
+                <label className="form-check-label checkbox-label" htmlFor="vip">
                   Paciente VIP
                 </label>
               </div>
@@ -532,185 +500,129 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       </div>
 
       {/* ENDEREÇO */}
-      <div className="mb-5 p-4 border rounded shadow-sm">
+      <div className="form-section">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}>
+        <h4 className="section-header" onClick={() => handleToggleCollapse('endereco')}>
           Endereço
-          <span className="fs-5">
+          <span className="section-toggle">
             {collapsedSections.endereco ? '▲' : '▼'}
           </span>
         </h4>
         <div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
           <div className="row mt-3">
             <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>CEP:</label>
+              <label className="form-label">CEP:</label>
-              <input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="cep" value={formData.cep || ''} onChange={handleChange} />
             </div>
             <div className="col-md-8 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Rua:</label>
+              <label className="form-label">Rua:</label>
-              <input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="street" value={formData.street || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Bairro:</label>
+              <label className="form-label">Bairro:</label>
-              <input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
             </div>
             <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Cidade:</label>
+              <label className="form-label">Cidade:</label>
-              <input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="city" value={formData.city || ''} onChange={handleChange} />
             </div>
             <div className="col-md-2 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Estado:</label>
+              <label className="form-label">Estado:</label>
-              <input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="state" value={formData.state || ''} onChange={handleChange} />
             </div>
             <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Número:</label>
+              <label className="form-label">Número:</label>
-              <input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="number" value={formData.number || ''} onChange={handleChange} />
             </div>
             <div className="col-md-8 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Complemento:</label>
+              <label className="form-label">Complemento:</label>
-              <input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="complement" value={formData.complement || ''} onChange={handleChange} />
             </div>
           </div>
         </div>
       </div>
 
-      <div className="mb-5 p-4 border rounded shadow-sm">
+      {/* CONTATO */}
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}>
+      <div className="form-section">
+        <h4 className="section-header" onClick={() => handleToggleCollapse('contato')}>
           Contato
-          <span className="fs-5">
+          <span className="section-toggle">
             {collapsedSections.contato ? '▲' : '▼'}
           </span>
         </h4>
         <div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
           <div className="row mt-3">
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Email: *</label>
+              <label className="form-label">Email: *</label>
               <input
                 ref={emailRef}
                 type="email"
-                className="form-control"
+                className="form-control form-control-custom"
                 name="email"
                 value={formData.email || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
                 required
               />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
+              <label className="form-label">Telefone: *</label>
               <input
                 ref={telefoneRef}
                 type="text"
-                className="form-control"
+                className="form-control form-control-custom"
                 name="phone_mobile"
                 value={formData.phone_mobile || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
                 required
               />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
+              <label className="form-label">Telefone 2:</label>
-              <input type="text" className="form-control" name="phone1" value={formData.phone1 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="phone1" value={formData.phone1 || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Telefone 3:</label>
+              <label className="form-label">Telefone 3:</label>
-              <input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control form-control-custom" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
             </div>
           </div>
         </div>
       </div>
 
-  
+      {/* MODAL DE VALIDAÇÃO */}
       {showRequiredModal && (
-        <div
+        <div className="modal-overlay">
-          style={{
+          <div className="modal-content">
-            display: "flex",
+            <div className="modal-header">
-            justifyContent: "center",
+              <h5 className="modal-title">Atenção</h5>
-            alignItems: "center",
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            backgroundColor: "rgba(0,0,0,0.5)",
-            zIndex: 9999,
-          }}
-        >
-          <div
-            style={{
-              backgroundColor: "#fff",
-              borderRadius: "10px",
-              width: "400px",
-              maxWidth: "90%",
-              boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
-              overflow: "hidden",
-            }}
-          >
- 
-            <div
-              style={{
-                backgroundColor: "#1e3a8a",
-                padding: "15px 20px",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
               <button
                 onClick={handleModalClose}
-                style={{
+                className="modal-close-btn"
-                  background: "none",
-                  border: "none",
-                  fontSize: "20px",
-                  color: "#fff",
-                  cursor: "pointer",
-                }}
               >
                 ×
               </button>
             </div>
 
-    
+            <div className="modal-body">
-            <div style={{ padding: "25px 20px" }}>
+              <p className="modal-message">
-              <p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
                 {cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
               </p>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
+              <div className="modal-list">
                 {cpfError ? (
-                  <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
+                  <p className="modal-list-item">{cpfError}</p>
                 ) : (
                   <>
-                    {!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
+                    {!formData.full_name && <p className="modal-list-item">- Nome</p>}
-                    {!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
+                    {!formData.cpf && <p className="modal-list-item">- CPF</p>}
-                    {!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
+                    {!formData.email && <p className="modal-list-item">- Email</p>}
-                    {!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
+                    {!formData.phone_mobile && <p className="modal-list-item">- Telefone</p>}
                   </>
                 )}
               </div>
             </div>
 
-      
+            <div className="modal-footer">
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "flex-end",
-                padding: "15px 20px",
-                borderTop: "1px solid #ddd",
-              }}
-            >
               <button
                 onClick={handleModalClose}
-                style={{
+                className="modal-confirm-btn"
-                  backgroundColor: "#1e3a8a",
-                  color: "#fff",
-                  border: "none",
-                  padding: "8px 20px",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontSize: "1rem",
-                  fontWeight: "bold",
-                }}
               >
                 Fechar
               </button>
@@ -719,13 +631,13 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         </div>
       )}
 
-
+      {/* BOTÕES DE AÇÃO */}
-      <div className="mt-3 text-center">
+      <div className="actions-container">
-        <button className="btn btn-success me-3" onClick={handleSubmit} disabled={isLoading} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
+        <button className="btn btn-success btn-submit" onClick={handleSubmit} disabled={isLoading}>
           {isLoading ? 'Salvando...' : 'Salvar Paciente'}
         </button>
         <Link to='/secretaria/pacientes'>
-          <button className="btn btn-light" style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
+          <button className="btn btn-light btn-cancel">
             Cancelar
           </button>
         </Link>

src/pages/DoctorCadastroManager.jsx

@@ -3,6 +3,7 @@ import { useAuth } from '../components/utils/AuthProvider';
 import DoctorForm from '../components/doctors/DoctorForm';
 import API_KEY from '../components/utils/apiKeys';
 import { useNavigate, useLocation } from 'react-router-dom';
+import './style/DoctorCadastroManager.css';
 
 function DoctorCadastroManager() {
   const [doctorData, setDoctorData] = useState({});
@@ -65,7 +66,6 @@ function DoctorCadastroManager() {
       if (!response.ok) {
         let errorMessage = `Erro ao salvar médico (${response.status})`;
         
-   
         const responseText = await response.text();
         console.log("Conteúdo da resposta:", responseText);
         
@@ -75,7 +75,6 @@ function DoctorCadastroManager() {
             console.error("Erro detalhado:", errorData);
             errorMessage = errorData.message || errorData.details || errorMessage;
           } catch (jsonError) {
-      
             errorMessage = responseText || errorMessage;
           }
         } else {
@@ -101,7 +100,6 @@ function DoctorCadastroManager() {
         result = { success: true, status: response.status };
       }
 
-  
       setShowSuccessModal(true);
 
     } catch (error) {
@@ -110,7 +108,7 @@ function DoctorCadastroManager() {
       let userFriendlyMessage = error.message;
       
       if (error.message.includes('doctors_cpf_key') || error.message.includes('duplicate key')) {
-        userFriendlyMessage = 'Já existe um médico cadastrado com este CPF. Verifique os dados ou edite o médico existente.';
+        userFriendlyMessage = 'Já existe um médico cadastrado com este CPF.';
       } else if (error.message.includes('Unexpected end of JSON input')) {
         userFriendlyMessage = 'Erro de comunicação com o servidor. Tente novamente.';
       }
@@ -124,7 +122,6 @@ function DoctorCadastroManager() {
 
   const handleCloseSuccessModal = () => {
     setShowSuccessModal(false);
- 
     const prefixo = location.pathname.split("/")[1];
     navigate(`/${prefixo}/medicos`);
   };
@@ -135,83 +132,35 @@ function DoctorCadastroManager() {
 
   return (
     <>
+      {isLoading && (
+        <div className="loading-overlay">
+          <div className="loading-spinner"></div>
+        </div>
+      )}
 
       {showSuccessModal && (
-        <div
+        <div className="modal-overlay">
-          style={{
+          <div className="modal-container">
-            display: "flex",
+            <div className="modal-header modal-header-success">
-            justifyContent: "center",
+              <h5 className="modal-title">Sucesso</h5>
-            alignItems: "center",
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            backgroundColor: "rgba(0,0,0,0.5)",
-            zIndex: 9999,
-          }}
-        >
-          <div
-            style={{
-              backgroundColor: "#fff",
-              borderRadius: "10px",
-              width: "400px",
-              maxWidth: "90%",
-              boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
-              overflow: "hidden",
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: "#28a745",
-                padding: "15px 20px",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Sucesso</h5>
               <button
                 onClick={handleCloseSuccessModal}
-                style={{
+                className="modal-close-button"
-                  background: "none",
-                  border: "none",
-                  fontSize: "20px",
-                  color: "#fff",
-                  cursor: "pointer",
-                  fontWeight: "bold",
-                }}
               >
                 ×
               </button>
             </div>
 
-            <div style={{ padding: "25px 20px" }}>
+            <div className="modal-body">
-              <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
+              <p className="modal-message">
                 Médico cadastrado com sucesso!
               </p>
             </div>
 
-            <div
+            <div className="modal-footer">
-              style={{
-                display: "flex",
-                justifyContent: "flex-end",
-                padding: "15px 20px",
-                borderTop: "1px solid #ddd",
-              }}
-            >
               <button
                 onClick={handleCloseSuccessModal}
-                style={{
+                className="modal-button modal-button-success"
-                  backgroundColor: "#28a745",
-                  color: "#fff",
-                  border: "none",
-                  padding: "8px 20px",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontSize: "1rem",
-                  fontWeight: "bold",
-                }}
               >
                 Fechar
               </button>
@@ -220,82 +169,29 @@ function DoctorCadastroManager() {
         </div>
       )}
 
-  
       {showErrorModal && (
-        <div
+        <div className="modal-overlay">
-          style={{
+          <div className="modal-container">
-            display: "flex",
+            <div className="modal-header modal-header-error">
-            justifyContent: "center",
+              <h5 className="modal-title">Erro</h5>
-            alignItems: "center",
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            backgroundColor: "rgba(0,0,0,0.5)",
-            zIndex: 9999,
-          }}
-        >
-          <div
-            style={{
-              backgroundColor: "#fff",
-              borderRadius: "10px",
-              width: "400px",
-              maxWidth: "90%",
-              boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
-              overflow: "hidden",
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: "#dc3545",
-                padding: "15px 20px",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Erro</h5>
               <button
                 onClick={handleCloseErrorModal}
-                style={{
+                className="modal-close-button"
-                  background: "none",
-                  border: "none",
-                  fontSize: "20px",
-                  color: "#fff",
-                  cursor: "pointer",
-                }}
               >
                 ×
               </button>
             </div>
 
-            <div style={{ padding: "25px 20px" }}>
+            <div className="modal-body">
-              <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
+              <p className="modal-message">
                 {errorMessage}
               </p>
             </div>
 
-            <div
+            <div className="modal-footer">
-              style={{
-                display: "flex",
-                justifyContent: "flex-end",
-                padding: "15px 20px",
-                borderTop: "1px solid #ddd",
-              }}
-            >
               <button
                 onClick={handleCloseErrorModal}
-                style={{
+                className="modal-button modal-button-error"
-                  backgroundColor: "#dc3545",
-                  color: "#fff",
-                  border: "none",
-                  padding: "8px 20px",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontSize: "1rem",
-                  fontWeight: "bold",
-                }}
               >
                 Fechar
               </button>

src/pages/DoctorTable.jsx

@@ -2,30 +2,40 @@ import React, { useState, useEffect } from "react";
 import API_KEY from "../components/utils/apiKeys";
 import { useAuth } from "../components/utils/AuthProvider";
 import { Link } from "react-router-dom";
+import "./style/TableDoctor.css";
 
 function TableDoctor() {
   const { getAuthorizationHeader, isAuthenticated } = useAuth();
 
   const [medicos, setMedicos] = useState([]);
   const [search, setSearch] = useState("");
+  const [filtroEspecialidade, setFiltroEspecialidade] = useState("Todos");
+  // REMOVIDO: const [filtroVIP, setFiltroVIP] = useState(false);
   const [filtroAniversariante, setFiltroAniversariante] = useState(false);
 
-  //   estados do modal
+  // Estados para filtros avançados
+  const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
+  const [filtroCidade, setFiltroCidade] = useState("");
+  const [filtroEstado, setFiltroEstado] = useState("");
+  const [idadeMinima, setIdadeMinima] = useState("");
+  const [idadeMaxima, setIdadeMaxima] = useState("");
+  const [dataInicial, setDataInicial] = useState("");
+  const [dataFinal, setDataFinal] = useState("");
+
+  // estados do modal
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDoctorId, setSelectedDoctorId] = useState(null);
 
   // Função para excluir médicos
   const deleteDoctor = async (id) => {
-      
     const authHeader = getAuthorizationHeader()
     console.log(id, 'teu id')
-    
+
     var myHeaders = new Headers();
-      myHeaders.append('apikey', API_KEY);
+    myHeaders.append('apikey', API_KEY);
-      myHeaders.append("Authorization", authHeader)
+    myHeaders.append("Authorization", authHeader)
-    
+
-    
+    var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };
-    var requestOptions = { method: "DELETE", redirect: "follow", headers:myHeaders };
 
     try {
       const result = await fetch(
@@ -53,90 +63,331 @@ function TableDoctor() {
     );
   };
 
-  // Buscar médicos da API
+  // Função para calcular idade a partir da data de nascimento
-  useEffect(() => {
+  const calcularIdade = (dataNascimento) => {
+    if (!dataNascimento) return 0;
+    const hoje = new Date();
+    const nascimento = new Date(dataNascimento);
+    let idade = hoje.getFullYear() - nascimento.getFullYear();
+    const mes = hoje.getMonth() - nascimento.getMonth();
 
-      const authHeader = getAuthorizationHeader()
+    if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
-
+      idade--;
-      console.log(authHeader, 'aqui autorização')
+    }
-
+    return idade;
-    var myHeaders = new Headers();
-  myHeaders.append("apikey", API_KEY);
-  myHeaders.append("Authorization", `${authHeader}`);
-  var requestOptions = {
-    method: 'GET',
-    headers: myHeaders,
-    redirect: 'follow'
   };
 
+<<<<<<< HEAD
+  // Função para limpar todos os filtros
+  const limparFiltros = () => {
+    setSearch("");
+    setFiltroEspecialidade("Todos");
+    // REMOVIDO: setFiltroVIP(false);
+    setFiltroAniversariante(false);
+    setShowFiltrosAvancados(false); // Adicionado para fechar os avançados
+    setFiltroCidade("");
+    setFiltroEstado("");
+    setIdadeMinima("");
+    setIdadeMaxima("");
+    setDataInicial("");
+    setDataFinal("");
+  };
+=======
   fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
     .then(response => response.json())
     .then(result => {setMedicos(result); console.log(result)})
     .catch(error => console.log('error', error));
   }, []);
+>>>>>>> main
 
-  // ✨ CORREÇÃO AQUI: Verificamos se 'medicos' é um array antes de filtrar.
+  // Buscar médicos da API
-  const medicosFiltrados = Array.isArray(medicos) ? medicos.filter(
+  useEffect(() => {
-    (medico) =>
+    const authHeader = getAuthorizationHeader()
-      `${medico.nome} ${medico.cpf} ${medico.email} ${medico.telefone}`
+    console.log(authHeader, 'aqui autorização')
-        .toLowerCase()
+
-        .includes(search.toLowerCase()) &&
+    var myHeaders = new Headers();
-      (filtroAniversariante ? ehAniversariante(medico.data_nascimento) : true)
+    myHeaders.append("apikey", API_KEY);
-  ) : []; // Se não for um array, usamos um array vazio como fallback.
+    myHeaders.append("Authorization", `${authHeader}`);
+    var requestOptions = {
+      method: 'GET',
+      headers: myHeaders,
+      redirect: 'follow'
+    };
+
+    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
+      .then(response => response.json())
+      .then(result => setMedicos(result))
+      .catch(error => console.log('error', error));
+  }, [isAuthenticated, getAuthorizationHeader]);
+
+  // ✨ FILTRO CORRIGIDO - Baseado na estrutura real dos dados
+  const medicosFiltrados = Array.isArray(medicos) ? medicos.filter((medico) => {
+    // Filtro por nome OU CPF - usando campos reais da API
+    const buscaNome = medico.full_name?.toLowerCase().includes(search.toLowerCase());
+    const buscaCPF = medico.cpf?.toLowerCase().includes(search.toLowerCase());
+    const buscaEmail = medico.email?.toLowerCase().includes(search.toLowerCase());
+    const passaBusca = search === "" || buscaNome || buscaCPF || buscaEmail;
+
+    // Filtro por especialidade - ajustando para campo real
+    const passaEspecialidade = filtroEspecialidade === "Todos" || medico.specialty === filtroEspecialidade;
+
+    // REMOVIDO: Filtro VIP - Não é mais utilizado
+    // const passaVIP = filtroVIP ? medico.vip === true : true; 
+
+    // Filtro aniversariante
+    const passaAniversario = filtroAniversariante
+      ? ehAniversariante(medico.birth_date)
+      : true;
+
+    // Filtros avançados - ajustando para campos reais
+    const passaCidade = filtroCidade ?
+      medico.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
+
+    const passaEstado = filtroEstado ?
+      medico.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
+
+    // Filtro por idade - usando birth_date
+    const idade = calcularIdade(medico.birth_date);
+    const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
+    const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
+
+    // Filtro por data de cadastro - usando created_at ou similar
+    const passaDataInicial = dataInicial ?
+      medico.created_at && new Date(medico.created_at) >= new Date(dataInicial) : true;
+
+    const passaDataFinal = dataFinal ?
+      medico.created_at && new Date(medico.created_at) <= new Date(dataFinal) : true;
+
+    // Combinação de todos os filtros (passaVIP removido)
+    const resultado = passaBusca && passaEspecialidade && passaAniversario &&
+      passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
+      passaDataInicial && passaDataFinal;
+
+    return resultado;
+  }) : [];
+
+  // Contador de médicos filtrados
+  useEffect(() => {
+    console.log(` Médicos totais: ${medicos.length}, Filtrados: ${medicosFiltrados.length}`);
+  }, [medicos, medicosFiltrados, search]);
 
   return (
     <>
       <div className="page-heading">
         <h3>Lista de Médicos</h3>
       </div>
-      <div className="page-content">
+      <div className="page-content table-doctor-container">
         <section className="row">
           <div className="col-12">
-            <div className="card">
+            <div className="card table-doctor-card">
-              <div className="card-header d-flex justify-content-between align-items-center">
+              <div className="card-header">
                 <h4 className="card-title mb-0">Médicos Cadastrados</h4>
-               <Link to={'cadastro'}>
+                <Link to={'cadastro'}>
-                  <button
+                  <button className="btn btn-primary">
-                    className="btn btn-primary"
-                    
-                  >
                     <i className="bi bi-plus-circle"></i> Adicionar Médico
                   </button>
                 </Link>
               </div>
 
               <div className="card-body">
-                <div className="d-flex gap-2 mb-3">
+                {/* Seção de Filtros */}
-                  <input
+                <div className="card p-3 mb-3 table-doctor-filters">
-                    type="text"
+                  <h5 className="mb-3">
-                    placeholder="Pesquisar médico..."
+                    <i className="bi bi-funnel-fill me-2 text-primary"></i>{" "}
-                    value={search}
+                    Filtros
-                    onChange={(e) => setSearch(e.target.value)}
+                  </h5>
-                    className="form-control"
-                    style={{ maxWidth: "300px" }}
-                  />
 
-                  <button
+                  {/* Busca por nome OU CPF ou email */}
-                    className={`btn ${
+                  <div className="mb-3">
-                      filtroAniversariante
+                    <input
-                        ? "btn-primary"
+                      type="text"
-                        : "btn-outline-primary"
+                      className="form-control"
-                    }`}
+                      placeholder="Buscar por nome ou CPF..."
-                    onClick={() => setFiltroAniversariante(!filtroAniversariante)}
+                      value={search}
-                  >
+                      onChange={(e) => setSearch(e.target.value)}
-                    <i className="bi bi-calendar me-1"></i> Aniversariantes
+                    />
-                  </button>
+                    <small className="text-muted">
+                      Digite o nome completo ou número do CPF
+                    </small>
+                  </div>
+
+                  {/* Filtros Básicos - LADO A LADO */}
+                  <div className="filtros-basicos">
+                    <select
+                      className="form-select filter-especialidade"
+                      value={filtroEspecialidade}
+                      onChange={(e) => setFiltroEspecialidade(e.target.value)}
+                    >
+                      <option value="Todos">Todas as Especialidades</option>
+                      <option value="Clínica Geral">Clínica médica (clínico geral)</option>
+                      <option value="Pediatria">Pediatria</option>
+                      <option value="Ginecologia">Ginecologia e obstetrícia</option>
+                      <option value="Cardiologia">Cardiologia</option>
+                      <option value="Ortopedia">Ortopedia e traumatologia</option>
+                      <option value="Oftalmologia">Oftalmologia</option>
+                      <option value="Otorrinolaringologia">Otorrinolaringologia</option>
+                      <option value="Dermatologia">Dermatologia</option>
+                      <option value="Neurologia">Neurologia</option>
+                      <option value="Psiquiatria">Psiquiatria</option>
+                      <option value="Endocrinologia">Endocrinologia</option>
+                      <option value="Gastroenterologia">Gastroenterologia</option>
+                      <option value="Urologia">Urologia</option>
+                    </select>
+
+                    <div className="filter-buttons-container">
+                      {/* REMOVIDO: Botão VIP
+                      <button
+                        className={`btn filter-btn ${filtroVIP ? "btn-primary" : "btn-outline-primary"
+                          }`}
+                        onClick={() => setFiltroVIP(!filtroVIP)}
+                      >
+                        <i className="bi bi-award me-1"></i> VIP
+                      </button> */}
+
+                      <button
+                        className={`btn filter-btn ${filtroAniversariante
+                          ? "btn-primary"
+                          : "btn-outline-primary"
+                          }`}
+                        onClick={() => setFiltroAniversariante(!filtroAniversariante)}
+                      >
+                        <i className="bi bi-calendar me-1"></i> Aniversariantes
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Botão para mostrar/ocultar filtros avançados */}
+                  <div className="d-flex justify-content-between align-items-center mt-3"> {/* Adicionado mt-3 para separar do anterior */}
+                    <button
+                      className="btn btn-link p-0 text-decoration-none"
+                      onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
+                    >
+                      <i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
+                      Filtros Avançados
+                    </button>
+
+                    <button
+                      className="btn btn-outline-secondary btn-sm"
+                      onClick={limparFiltros}
+                    >
+                      <i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
+                    </button>
+                  </div>
+
+                  {/* Filtros Avançados */}
+                  {showFiltrosAvancados && (
+                    <div className="mt-3 p-3 border rounded advanced-filters">
+                      <h6 className="mb-3">Filtros Avançados</h6>
+
+                      <div className="row g-3">
+                        {/* Localização */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Cidade</label>
+                          <input
+                            type="text"
+                            className="form-control"
+                            placeholder="Digite a cidade..."
+                            value={filtroCidade}
+                            onChange={(e) => setFiltroCidade(e.target.value)}
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Estado</label>
+                          <input
+                            type="text"
+                            className="form-control"
+                            placeholder="Ex: Minas Gerais"
+                            value={filtroEstado}
+                            onChange={(e) => setFiltroEstado(e.target.value)}
+                          />
+                        </div>
+
+                        {/* Intervalo de Idade */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Idade mínima</label>
+                          <input
+                            type="number"
+                            className="form-control"
+                            placeholder="Ex: 25"
+                            value={idadeMinima}
+                            onChange={(e) => setIdadeMinima(e.target.value)}
+                            min="0"
+                            max="150"
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Idade máxima</label>
+                          <input
+                            type="number"
+                            className="form-control"
+                            placeholder="Ex: 70"
+                            value={idadeMaxima}
+                            onChange={(e) => setIdadeMaxima(e.target.value)}
+                            min="0"
+                            max="150"
+                          />
+                        </div>
+
+                        {/* Data de Cadastro */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Data inicial</label>
+                          <input
+                            type="date"
+                            className="form-control"
+                            value={dataInicial}
+                            onChange={(e) => setDataInicial(e.target.value)}
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Data final</label>
+                          <input
+                            type="date"
+                            className="form-control"
+                            value={dataFinal}
+                            onChange={(e) => setDataFinal(e.target.value)}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </div>
 
+                {/* Informações dos filtros ativos */}
+                {(search || filtroEspecialidade !== "Todos" || filtroAniversariante || // filtroVIP removido
+                  filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
+                    <div className="alert alert-info mb-3 filters-active">
+                      <strong>Filtros ativos:</strong>
+                      <div className="mt-1">
+                        {search && <span className="badge bg-primary me-2">Busca: "{search}"</span>}
+                        {filtroEspecialidade !== "Todos" && <span className="badge bg-primary me-2">Especialidade: {filtroEspecialidade}</span>}
+                        {/* REMOVIDO: {filtroVIP && <span className="badge bg-primary me-2">VIP</span>} */}
+                        {filtroAniversariante && <span className="badge bg-primary me-2">Aniversariantes</span>}
+                        {filtroCidade && <span className="badge bg-primary me-2">Cidade: {filtroCidade}</span>}
+                        {filtroEstado && <span className="badge bg-primary me-2">Estado: {filtroEstado}</span>}
+                        {idadeMinima && <span className="badge bg-primary me-2">Idade mín: {idadeMinima}</span>}
+                        {idadeMaxima && <span className="badge bg-primary me-2">Idade máx: {idadeMaxima}</span>}
+                        {dataInicial && <span className="badge bg-primary me-2">Data inicial: {dataInicial}</span>}
+                        {dataFinal && <span className="badge bg-primary me-2">Data final: {dataFinal}</span>}
+                      </div>
+                    </div>
+                  )}
+
+                {/* Contador de resultados */}
+                <div className="mb-3">
+                  <span className="badge results-badge">
+                    {medicosFiltrados.length} de {medicos.length} médicos encontrados
+                  </span>
+                </div>
+
+                {/* Tabela de Médicos */}
                 <div className="table-responsive">
-                  <table className="table table-striped table-hover">
+                  <table className="table table-striped table-hover table-doctor-table">
                     <thead>
                       <tr>
                         <th>Nome</th>
                         <th>CPF</th>
+                        <th>Especialidade</th>
                         <th>Email</th>
-                        <th>Telefone</th>
-                        <th></th>
                         <th>Ações</th>
                       </tr>
                     </thead>
@@ -144,66 +395,45 @@ function TableDoctor() {
                       {medicosFiltrados.length > 0 ? (
                         medicosFiltrados.map((medico) => (
                           <tr key={medico.id}>
-                            <td>{medico.full_name}</td>
-                            <td>{medico.cpf}</td>
-                            <td>{medico.email}</td>
-                            <td>{medico.telefone}</td>
                             <td>
-                              <span
+                              <div className="d-flex align-items-center">
-                                className={`badge ${
+                                {medico.full_name}
-                                  medico.ativo === "ativo"
+                                {ehAniversariante(medico.birth_date) && (
-                                    ? "bg-success"
+                                  <span className="badge anniversary-badge ms-2" title="Aniversariante do dia">
-                                    : "bg-danger"
+                                    <i className="bi bi-gift"></i>
-                                }`}
+                                  </span>
-                              >
+                                )}
-                                {medico.ativo}
+                                {/* REMOVIDO: Badge VIP
+                                {medico.vip && (
+                                  <span className="badge vip-badge ms-2" title="Médico VIP">
+                                    VIP
+                                  </span>
+                                )} */}
+                              </div>
+                            </td>
+                            <td>{medico.cpf}</td>
+                            <td>
+                              <span className="badge specialty-badge">
+                                {medico.specialty || 'Não informado'}
                               </span>
                             </td>
-
+                            <td>{medico.email || 'Não informado'}</td>
                             <td>
                               <div className="d-flex gap-2">
-                                {/* Ver Detalhes */}
                                 <Link to={`${medico.id}`}>
-                                  <button
+                                  <button className="btn btn-sm btn-view">
-                                    className="btn btn-sm"
+                                    <i className="bi bi-eye me-1"></i> Ver Detalhes
-                                    style={{
-                                      backgroundColor: "#E6F2FF",
-                                      color: "#004085",
-                                    }}
-                                    onClick={() => {
-                                    console.log('editar')
-                                      
-                                    }}
-                                  >
-                                    <i className="bi bi-eye me-1"></i> Ver
-                                    Detalhes
                                   </button>
                                 </Link>
 
-                                {/* Editar */}
                                 <Link to={`${medico.id}/edit`}>
-                                    <button
+                                  <button className="btn btn-sm btn-edit">
-                                      className="btn btn-sm"
+                                    <i className="bi bi-pencil me-1"></i> Editar
-                                      style={{
+                                  </button>
-                                        backgroundColor: "#FFF3CD",
-                                        color: "#856404",
-                                      }}
-                                      onClick={() => {
-                                        
-                                        console.log('Editar')
-                                      }}
-                                    >
-                                      <i className="bi bi-pencil me-1"></i> Editar
-                                    </button>
                                 </Link>
 
-                                
                                 <button
-                                  className="btn btn-sm"
+                                  className="btn btn-sm btn-delete"
-                                  style={{
-                                    backgroundColor: "#F8D7DA",
-                                    color: "#721C24",
-                                  }}
                                   onClick={() => {
                                     setSelectedDoctorId(medico.id);
                                     setShowDeleteModal(true);
@@ -217,7 +447,7 @@ function TableDoctor() {
                         ))
                       ) : (
                         <tr>
-                          <td colSpan="6" className="text-center">
+                          <td colSpan="5" className="empty-state">
                             Nenhum médico encontrado.
                           </td>
                         </tr>
@@ -231,10 +461,10 @@ function TableDoctor() {
         </section>
       </div>
 
-      {/* Modal de confirmação de exclusão */}
+      {/* Modal de confirmação */}
       {showDeleteModal && (
         <div
-          className="modal fade show"
+          className="modal fade show delete-modal"
           style={{
             display: "block",
             backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -246,19 +476,23 @@ function TableDoctor() {
         >
           <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
-              <div className="modal-header" style={{ backgroundColor: '#b91c1c' }}>
+              <div className="modal-header">
-                <h5 className="modal-title text-dark"> Confirmação de Exclusão</h5>
+                <h5 className="modal-title">
+                  Confirmação de Exclusão
+                </h5>
                 <button
                   type="button"
                   className="btn-close"
                   onClick={() => setShowDeleteModal(false)}
                 ></button>
               </div>
+
               <div className="modal-body">
-                <p className="mb-0 fs-5" style={{ color: '#111' }}>
+                <p className="mb-0 fs-5">
                   Tem certeza que deseja excluir este médico?
                 </p>
               </div>
+
               <div className="modal-footer">
                 <button
                   type="button"
@@ -267,6 +501,7 @@ function TableDoctor() {
                 >
                   Cancelar
                 </button>
+
                 <button
                   type="button"
                   className="btn btn-danger"
@@ -283,4 +518,4 @@ function TableDoctor() {
   );
 }
 
-export default TableDoctor;
+export default TableDoctor;

src/pages/PatientCadastroManager.jsx

@@ -1,70 +1,64 @@
-import {useState} from 'react';
+import { useState } from 'react';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import PatientForm from '../components/patients/PatientForm';
 import API_KEY from '../components/utils/apiKeys';
 import { useAuth } from '../components/utils/AuthProvider';
+import './style/PatientCadastroManager.css';
 
-function PatientCadastroManager( {setCurrentPage} ) {
+function PatientCadastroManager({ setCurrentPage }) {
   const navigate = useNavigate()
   const [showModal, setShowModal] = useState(false);
-  const [infosModal, setInfosModal] = useState({title:'', message:''});
+  const [infosModal, setInfosModal] = useState({ title: '', message: '' });
   const [isLoading, setIsLoading] = useState(false);
 
   const { getAuthorizationHeader, isAuthenticated } = useAuth();
   const [formData, setFormData] = useState({})
 
-
   const validarCPF = (cpf) => {
     cpf = cpf.replace(/\D/g, '');
-    
+
     if (cpf.length !== 11) return false;
-    
+
-   
     if (/^(\d)\1+$/.test(cpf)) return false;
 
     let soma = 0;
     let resto;
-    
+
     for (let i = 1; i <= 9; i++) {
-      soma = soma + parseInt(cpf.substring(i-1, i)) * (11 - i);
+      soma = soma + parseInt(cpf.substring(i - 1, i)) * (11 - i);
     }
-    
+
     resto = (soma * 10) % 11;
     if ((resto === 10) || (resto === 11)) resto = 0;
     if (resto !== parseInt(cpf.substring(9, 10))) return false;
-    
+
     soma = 0;
     for (let i = 1; i <= 10; i++) {
-      soma = soma + parseInt(cpf.substring(i-1, i)) * (12 - i);
+      soma = soma + parseInt(cpf.substring(i - 1, i)) * (12 - i);
     }
-    
+
     resto = (soma * 10) % 11;
     if ((resto === 10) || (resto === 11)) resto = 0;
     if (resto !== parseInt(cpf.substring(10, 11))) return false;
-    
+
     return true;
   }
- 
+
   const handleSavePatient = async (patientData) => {
-    console.log(' Iniciando salvamento do paciente:', patientData);
     setIsLoading(true);
 
     try {
-
-      console.log(' Verificando autenticação...');
       if (!isAuthenticated) {
         throw new Error('Usuário não autenticado');
       }
 
       const authHeader = getAuthorizationHeader();
-      console.log(' Header de autorização:', authHeader ? 'Presente' : 'Faltando');
+
-      
       if (!authHeader) {
         throw new Error('Header de autorização não encontrado');
       }
 
-
       const cpfLimpo = patientData.cpf.replace(/\D/g, '');
       if (!validarCPF(cpfLimpo)) {
         throw new Error('CPF inválido. Por favor, verifique o número digitado.');
@@ -76,23 +70,15 @@ function PatientCadastroManager( {setCurrentPage} ) {
       myHeaders.append("Authorization", authHeader);
       myHeaders.append("Prefer", "return=representation");
 
-      console.log(' Headers configurados:', {
-        'Content-Type': 'application/json',
-        'apikey': API_KEY ? 'Presente' : 'Faltando',
-        'Authorization': authHeader ? 'Presente' : 'Faltando',
-        'Prefer': 'return=representation'
-      });
-
       const cleanedData = {
         full_name: patientData.full_name,
         cpf: cpfLimpo,
         email: patientData.email,
         phone_mobile: patientData.phone_mobile,
-   
         birth_date: patientData.birth_date || null,
-        sex: patientData.sex === 'Masculino' ? 'M' : 
+        sex: patientData.sex === 'Masculino' ? 'M' :
-             patientData.sex === 'Feminino' ? 'F' : 
+          patientData.sex === 'Feminino' ? 'F' :
-             patientData.sex || null,
+            patientData.sex || null,
         social_name: patientData.social_name || null,
         rg: patientData.rg || null,
         blood_type: patientData.blood_type || null,
@@ -100,16 +86,31 @@ function PatientCadastroManager( {setCurrentPage} ) {
         height_m: patientData.height_m ? parseFloat(patientData.height_m) : null,
         bmi: patientData.bmi ? parseFloat(patientData.bmi) : null,
         notes: patientData.notes || null,
+        mother_name: patientData.mother_name || null,
+        father_name: patientData.father_name || null,
+        guardian_name: patientData.guardian_name || null,
+        guardian_cpf: patientData.guardian_cpf ? patientData.guardian_cpf.replace(/\D/g, '') : null,
+        marital_status: patientData.marital_status || null,
+        profession: patientData.profession || null,
+        naturality: patientData.naturality || null,
+        nationality: patientData.nationality || null,
+        race: patientData.race || null,
+        cep: patientData.cep || null,
+        street: patientData.street || null,
+        number: patientData.number || null,
+        complement: patientData.complement || null,
+        neighborhood: patientData.neighborhood || null,
+        city: patientData.city || null,
+        state: patientData.state || null,
+        phone1: patientData.phone1 || null,
+        phone2: patientData.phone2 || null
       };
 
-      console.log(' Dados limpos para envio:', cleanedData);
-
       if (!cleanedData.full_name || !cleanedData.cpf || !cleanedData.email || !cleanedData.phone_mobile) {
         throw new Error('Dados obrigatórios faltando: nome, CPF, email e telefone são necessários');
       }
 
       var raw = JSON.stringify(cleanedData);
-      console.log(' Payload JSON:', raw);
 
       var requestOptions = {
         method: 'POST',
@@ -118,37 +119,24 @@ function PatientCadastroManager( {setCurrentPage} ) {
         redirect: 'follow'
       };
 
-      console.log(' Fazendo requisição para API...');
       const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
-      
-      console.log(' Status da resposta:', response.status);
-      console.log(' Response ok:', response.ok);
 
       let responseData;
       try {
         responseData = await response.json();
-        console.log(' Corpo da resposta:', responseData);
       } catch (jsonError) {
-        console.log(' Não foi possível parsear JSON da resposta:', jsonError);
         responseData = { error: 'Resposta inválida da API' };
       }
 
-    
       if (!response.ok) {
-        console.error(' Erro da API - Detalhes:', {
-          status: response.status,
-          statusText: response.statusText,
-          data: responseData
-        });
-        
         let errorMessage = 'Erro ao salvar paciente';
-        
+
         if (response.status === 401) {
           errorMessage = 'Não autorizado. Verifique suas credenciais.';
         } else if (response.status === 403) {
           errorMessage = 'Acesso proibido. Verifique suas permissões.';
         } else if (response.status === 409) {
-          errorMessage = 'Paciente com este CPF já existe.';
+          errorMessage = 'Já existe um paciente cadastrado com este CPF.';
         } else if (response.status === 400) {
           errorMessage = `Dados inválidos: ${responseData.details || responseData.message || 'Verifique os campos'}`;
         } else if (response.status === 422) {
@@ -158,26 +146,26 @@ function PatientCadastroManager( {setCurrentPage} ) {
         } else {
           errorMessage = `Erro ${response.status}: ${responseData.message || responseData.error || 'Erro desconhecido'}`;
         }
-        
+
         throw new Error(errorMessage);
       }
 
-      console.log(' Paciente salvo com sucesso:', responseData);
-      
-    
       setInfosModal({
         title: 'Sucesso',
         message: 'O cadastro do paciente foi realizado com sucesso.'
       });
       setShowModal(true);
+<<<<<<< HEAD
+
+=======
       
+>>>>>>> main
       setTimeout(() => {
         setShowModal(false);
         navigate('/secretaria/pacientes');
       }, 2000);
-      
+
     } catch (error) {
-      console.error(' Erro completo ao salvar paciente:', error);
       setInfosModal({
         title: 'Erro',
         message: error.message || 'Não foi possível conectar ao servidor. Verifique sua internet e tente novamente.'
@@ -191,76 +179,30 @@ function PatientCadastroManager( {setCurrentPage} ) {
   return (
     <>
       <div className="page-heading">
-        {showModal &&(
+        {showModal && (
-          <div
+          <div className="modal-overlay fade-in">
-            style={{
+            <div className="modal-content slide-in">
-              display: "flex",
+              <div className={`modal-header ${infosModal.title === 'Sucesso' ? 'success' : 'error'}`}>
-              justifyContent: "center",
+                <h5>{infosModal.title}</h5>
-              alignItems: "center",
-              position: "fixed",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: "100%",
-              backgroundColor: "rgba(0,0,0,0.5)",
-              zIndex: 9999,
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: "#fff",
-                borderRadius: "10px",
-                width: "400px",
-                maxWidth: "90%",
-                boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
-                overflow: "hidden",
-              }}
-            >
-
-              <div
-                style={{
-                  backgroundColor: infosModal.title === 'Sucesso' ? "#28a745" : "#dc3545",
-                  padding: "15px 20px",
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                }}
-              >
-                <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>{infosModal.title}</h5>
                 <button
                   onClick={() => setShowModal(false)}
-                  style={{
+                  className="modal-close-button"
-                    background: "none",
-                    border: "none",
-                    fontSize: "20px",
-                    color: "#fff",
-                    cursor: "pointer",
-                  }}
                 >
                   ×
                 </button>
               </div>
 
-
+              <div className="modal-body">
-              <div style={{ padding: "25px 20px" }}>
+                <p className="modal-message">
-                <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
                   {infosModal.message}
                 </p>
                 {infosModal.title === 'Erro' && (
-                  <p style={{ color: "#666", fontSize: "0.9rem", margin: "10px 0 0 0" }}>
+                  <p className="modal-submessage">
                   </p>
                 )}
               </div>
 
-   
+              <div className="modal-footer">
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "flex-end",
-                  padding: "15px 20px",
-                  borderTop: "1px solid #ddd",
-                }}
-              >
                 <button
                   onClick={() => {
                     setShowModal(false);
@@ -268,16 +210,7 @@ function PatientCadastroManager( {setCurrentPage} ) {
                       navigate('/secretaria/pacientes');
                     }
                   }}
-                  style={{
+                  className={`modal-confirm-button ${infosModal.title === 'Sucesso' ? 'success' : 'error'}`}
-                    backgroundColor: "#1e3a8a",
-                    color: "#fff",
-                    border: "none",
-                    padding: "8px 20px",
-                    borderRadius: "6px",
-                    cursor: "pointer",
-                    fontSize: "1rem",
-                    fontWeight: "bold",
-                  }}
                 >
                   Fechar
                 </button>

src/pages/TablePaciente.jsx

@@ -2,12 +2,11 @@ import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import API_KEY from "../components/utils/apiKeys";
 import { useAuth } from "../components/utils/AuthProvider";
-
+import "./style/TablePaciente.css"; // Import do CSS
-
 
 function TablePaciente({ setCurrentPage, setPatientID }) {
-  
+
-  const {getAuthorizationHeader, isAuthenticated} = useAuth();
+  const { getAuthorizationHeader, isAuthenticated } = useAuth();
 
   const [pacientes, setPacientes] = useState([]);
   const [search, setSearch] = useState("");
@@ -15,12 +14,19 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   const [filtroVIP, setFiltroVIP] = useState(false);
   const [filtroAniversariante, setFiltroAniversariante] = useState(false);
 
-  //   estados do modal
+  // Estados para filtros avançados
+  const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
+  const [filtroCidade, setFiltroCidade] = useState("");
+  const [filtroEstado, setFiltroEstado] = useState("");
+  const [idadeMinima, setIdadeMinima] = useState("");
+  const [idadeMaxima, setIdadeMaxima] = useState("");
+  const [dataInicial, setDataInicial] = useState("");
+  const [dataFinal, setDataFinal] = useState("");
+
+  // estados do modal
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedPatientId, setSelectedPatientId] = useState(null);
 
-  
-
   const GetAnexos = async (id) => {
     var myHeaders = new Headers();
     myHeaders.append("Authorization", "Bearer <token>");
@@ -73,15 +79,15 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
   // função de exclusão atualizada
   const deletePatient = async (id) => {
-    
+
     const authHeader = getAuthorizationHeader()
     console.log(id)
     var myHeaders = new Headers();
     myHeaders.append('apikey', API_KEY);
     myHeaders.append("Authorization", authHeader)
-    
+
-    
+
-    var requestOptions = { method: "DELETE", redirect: "follow", headers:myHeaders };
+    var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };
 
     try {
       const result = await fetch(
@@ -100,23 +106,34 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   // Requisição inicial para buscar pacientes
   useEffect(() => {
 
-      const authHeader = getAuthorizationHeader()
+    const authHeader = getAuthorizationHeader()
 
+<<<<<<< HEAD
+    console.log(authHeader, 'aqui autorização')
+=======
       console.log(authHeader)
+>>>>>>> main
 
     var myHeaders = new Headers();
-  myHeaders.append("apikey", API_KEY);
+    myHeaders.append("apikey", API_KEY);
-  myHeaders.append("Authorization", `${authHeader}`);
+    myHeaders.append("Authorization", `${authHeader}`);
-  var requestOptions = {
+    var requestOptions = {
-    method: 'GET',
+      method: 'GET',
-    headers: myHeaders,
+      headers: myHeaders,
-    redirect: 'follow'
+      redirect: 'follow'
-  };
+    };
 
+<<<<<<< HEAD
+    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
+      .then(response => response.json())
+      .then(result => setPacientes(result))
+      .catch(error => console.log('error', error));
+=======
   fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
     .then(response => response.json())
     .then(result => {setPacientes(result); console.log(result)})
     .catch(error => console.log('error', error));
+>>>>>>> main
   }, [isAuthenticated, getAuthorizationHeader]);
 
   // Função para verificar se hoje é aniversário do paciente
@@ -131,116 +148,286 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
     );
   };
 
-// ✨ CORREÇÃO AQUI: Verificamos se 'pacientes' é um array antes de filtrar.
+  // Função para calcular idade a partir da data de nascimento
-const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente) => {
+  const calcularIdade = (dataNascimento) => {
-  const textoCompletoPaciente = `${paciente.nome} ${paciente.cpf} ${paciente.email} ${paciente.telefone}`.toLowerCase();
+    if (!dataNascimento) return 0;
-  const passaBusca = textoCompletoPaciente.includes(search.toLowerCase());
+    const hoje = new Date();
-  const passaVIP = filtroVIP ? paciente.vip === true : true;
+    const nascimento = new Date(dataNascimento);
-  const passaConvenio = filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
+    let idade = hoje.getFullYear() - nascimento.getFullYear();
-  const passaAniversario = filtroAniversariante
+    const mes = hoje.getMonth() - nascimento.getMonth();
-    ? ehAniversariante(paciente.data_nascimento)
-    : true;
 
-  return passaBusca && passaVIP && passaConvenio && passaAniversario;
+    if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
-}) : []; // Se não for um array, usamos um array vazio como fallback.
+      idade--;
+    }
+    return idade;
+  };
+
+  // Função para limpar todos os filtros
+  const limparFiltros = () => {
+    setSearch("");
+    setFiltroConvenio("Todos");
+    setFiltroVIP(false);
+    setFiltroAniversariante(false);
+    setFiltroCidade("");
+    setFiltroEstado("");
+    setIdadeMinima("");
+    setIdadeMaxima("");
+    setDataInicial("");
+    setDataFinal("");
+  };
+
+  //  FILTRO CORRIGIDO - Baseado na estrutura real dos dados
+  const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente) => {
+    // Filtro por nome OU CPF - usando campos reais da API
+    const buscaNome = paciente.full_name?.toLowerCase().includes(search.toLowerCase());
+    const buscaCPF = paciente.cpf?.toLowerCase().includes(search.toLowerCase());
+    const passaBusca = search === "" || buscaNome || buscaCPF;
+
+    // Filtro por convênio - ajustando para campo real
+    const passaConvenio = filtroConvenio === "Todos" || paciente.insurance_plan === filtroConvenio;
+
+    // Outros filtros
+    const passaVIP = filtroVIP ? paciente.vip === true : true;
+    const passaAniversario = filtroAniversariante
+      ? ehAniversariante(paciente.birth_date)
+      : true;
+
+    // Filtros avançados - ajustando para campos reais
+    const passaCidade = filtroCidade ?
+      paciente.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
+
+    const passaEstado = filtroEstado ?
+      paciente.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
+
+    // Filtro por idade - usando birth_date
+    const idade = calcularIdade(paciente.birth_date);
+    const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
+    const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
+
+    // Filtro por data do último atendimento - usando last_appointment
+    const passaDataInicial = dataInicial ?
+      paciente.last_appointment && new Date(paciente.last_appointment) >= new Date(dataInicial) : true;
+
+    const passaDataFinal = dataFinal ?
+      paciente.last_appointment && new Date(paciente.last_appointment) <= new Date(dataFinal) : true;
+
+    // Combinação: (Nome OU CPF) E Convênio E outros filtros
+    const resultado = passaBusca && passaConvenio && passaVIP && passaAniversario &&
+      passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
+      passaDataInicial && passaDataFinal;
+
+    return resultado;
+  }) : [];
+
+  // Contador de pacientes filtrados
+  useEffect(() => {
+    console.log(`📈 Pacientes totais: ${pacientes.length}, Filtrados: ${pacientesFiltrados.length}`);
+  }, [pacientes, pacientesFiltrados, search]);
 
- 
   return (
     <>
       <div className="page-heading">
         <h3>Lista de Pacientes</h3>
       </div>
-      <div className="page-content">
+      <div className="page-content table-paciente-container">
         <section className="row">
           <div className="col-12">
-            <div className="card">
+            <div className="card table-paciente-card">
-              <div className="card-header d-flex justify-content-between align-items-center">
+              <div className="card-header">
                 <h4 className="card-title mb-0">Pacientes Cadastrados</h4>
                 <Link to={'cadastro'}>
-                  <button
+                  <button className="btn btn-primary">
-                    className="btn btn-primary"
-                  >
                     <i className="bi bi-plus-circle"></i> Adicionar Paciente
                   </button>
                 </Link>
               </div>
 
               <div className="card-body">
-                <div className="card p-3 mb-3">
+                {/* Seção de Filtros */}
+                <div className="card p-3 mb-3 table-paciente-filters">
                   <h5 className="mb-3">
                     <i className="bi bi-funnel-fill me-2 text-primary"></i>{" "}
                     Filtros
                   </h5>
 
-                  <div
+                  {/* Busca por nome ou CPF */}
-                    className="d-flex flex-nowrap align-items-center gap-2"
+                  <div className="mb-3">
-                    style={{ overflowX: "auto", paddingBottom: "6px" }}
-                  >
                     <input
                       type="text"
                       className="form-control"
-                      placeholder="Buscar por nome..."
+                      placeholder="Buscar por nome ou CPF..."
                       value={search}
                       onChange={(e) => setSearch(e.target.value)}
-                      style={{
-                        minWidth: 250,
-                        maxWidth: 300,
-                        width: 260,
-                        flex: "0 0 auto",
-                      }}
                     />
+                    <small className="text-muted">
+                      Digite o nome completo ou número do CPF
+                    </small>
+                  </div>
 
+                  {/* Filtros Básicos */}
+                  <div className="d-flex flex-wrap align-items-center gap-2 mb-3">
                     <select
-                      className="form-select"
+                      className="form-select compact-select"
                       value={filtroConvenio}
                       onChange={(e) => setFiltroConvenio(e.target.value)}
-                      style={{
+                      style={{ minWidth: "150px", maxWidth: "200px" }} // Diminuído
-                        minWidth: 200,
-                        width: 180,
-                        flex: "0 0 auto",
-                      }}
                     >
-                      <option>Todos os Convênios</option>
+                      <option value="Todos">Todos os Convênios</option>
-                      <option>Bradesco Saúde</option>
+                      <option value="Bradesco Saúde">Bradesco Saúde</option>
-                      <option>Hapvida</option>
+                      <option value="Hapvida">Hapvida</option>
-                      <option>Unimed</option>
+                      <option value="Unimed">Unimed</option>
                     </select>
 
                     <button
-                      className={`btn ${
+                      className={`btn btn-sm ${filtroVIP ? "btn-primary" : "btn-outline-primary"}`} // Adicionado btn-sm
-                        filtroVIP ? "btn-primary" : "btn-outline-primary"
-                      }`}
                       onClick={() => setFiltroVIP(!filtroVIP)}
-                      style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
+                      style={{ padding: "0.25rem 0.5rem" }} // Padding reduzido
                     >
                       <i className="bi bi-award me-1"></i> VIP
                     </button>
 
                     <button
-                      className={`btn ${
+                      className={`btn btn-sm ${filtroAniversariante ? "btn-primary" : "btn-outline-primary"
-                        filtroAniversariante
+                        }`} // Adicionado btn-sm
-                          ? "btn-primary"
+                      onClick={() => setFiltroAniversariante(!filtroAniversariante)}
-                          : "btn-outline-primary"
+                      style={{ padding: "0.25rem 0.5rem" }} // Padding reduzido
-                      }`}
-                      onClick={() =>
-                        setFiltroAniversariante(!filtroAniversariante)
-                      }
-                      style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
                     >
                       <i className="bi bi-calendar me-1"></i> Aniversariantes
                     </button>
                   </div>
+
+                  {/* Botão para mostrar/ocultar filtros avançados */}
+                  <div className="d-flex justify-content-between align-items-center">
+                    <button
+                      className="btn btn-link p-0 text-decoration-none"
+                      onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
+                    >
+                      <i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
+                      Filtros Avançados
+                    </button>
+
+                    <button
+                      className="btn btn-outline-secondary btn-sm"
+                      onClick={limparFiltros}
+                    >
+                      <i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
+                    </button>
+                  </div>
+
+                  {/* Filtros Avançados */}
+                  {showFiltrosAvancados && (
+                    <div className="mt-3 p-3 border rounded advanced-filters">
+                      <h6 className="mb-3">Filtros Avançados</h6>
+
+                      <div className="row g-3">
+                        {/* Localização */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Cidade</label>
+                          <input
+                            type="text"
+                            className="form-control"
+                            placeholder="Digite a cidade..."
+                            value={filtroCidade}
+                            onChange={(e) => setFiltroCidade(e.target.value)}
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Estado</label>
+                          <input
+                            type="text"
+                            className="form-control"
+                            placeholder="Ex: Minas Gerais"
+                            value={filtroEstado}
+                            onChange={(e) => setFiltroEstado(e.target.value)}
+                          />
+                        </div>
+
+                        {/* Intervalo de Idade */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Idade mínima</label>
+                          <input
+                            type="number"
+                            className="form-control"
+                            placeholder="Ex: 18"
+                            value={idadeMinima}
+                            onChange={(e) => setIdadeMinima(e.target.value)}
+                            min="0"
+                            max="150"
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Idade máxima</label>
+                          <input
+                            type="number"
+                            className="form-control"
+                            placeholder="Ex: 65"
+                            value={idadeMaxima}
+                            onChange={(e) => setIdadeMaxima(e.target.value)}
+                            min="0"
+                            max="150"
+                          />
+                        </div>
+
+                        {/* Data do Último Atendimento */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Data inicial</label>
+                          <input
+                            type="date"
+                            className="form-control"
+                            value={dataInicial}
+                            onChange={(e) => setDataInicial(e.target.value)}
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Data final</label>
+                          <input
+                            type="date"
+                            className="form-control"
+                            value={dataFinal}
+                            onChange={(e) => setDataFinal(e.target.value)}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </div>
 
+                {/* Informações dos filtros ativos */}
+                {(search || filtroConvenio !== "Todos" || filtroVIP || filtroAniversariante ||
+                  filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
+                    <div className="alert alert-info mb-3 filters-active">
+                      <strong>Filtros ativos:</strong>
+                      <div className="mt-1">
+                        {search && <span className="badge bg-primary me-2">Busca: "{search}"</span>}
+                        {filtroConvenio !== "Todos" && <span className="badge bg-primary me-2">Convênio: {filtroConvenio}</span>}
+                        {filtroVIP && <span className="badge bg-primary me-2">VIP</span>}
+                        {filtroAniversariante && <span className="badge bg-primary me-2">Aniversariantes</span>}
+                        {filtroCidade && <span className="badge bg-primary me-2">Cidade: {filtroCidade}</span>}
+                        {filtroEstado && <span className="badge bg-primary me-2">Estado: {filtroEstado}</span>}
+                        {idadeMinima && <span className="badge bg-primary me-2">Idade mín: {idadeMinima}</span>}
+                        {idadeMaxima && <span className="badge bg-primary me-2">Idade máx: {idadeMaxima}</span>}
+                        {dataInicial && <span className="badge bg-primary me-2">Data inicial: {dataInicial}</span>}
+                        {dataFinal && <span className="badge bg-primary me-2">Data final: {dataFinal}</span>}
+                      </div>
+                    </div>
+                  )}
+
+                {/* Contador de resultados */}
+                <div className="mb-3">
+                  <span className="badge results-badge">
+                    {pacientesFiltrados.length} de {pacientes.length} pacientes encontrados
+                  </span>
+                </div>
+
+                {/* Tabela de Pacientes */}
                 <div className="table-responsive">
-                  <table className="table table-striped table-hover">
+                  <table className="table table-striped table-hover table-paciente-table">
                     <thead>
                       <tr>
                         <th>Nome</th>
                         <th>CPF</th>
+                        <th>Convênio</th>
                         <th>Email</th>
-                        <th>Telefone</th>
-                        <th></th>
                         <th>Ações</th>
                       </tr>
                     </thead>
@@ -248,62 +435,46 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
                       {pacientesFiltrados.length > 0 ? (
                         pacientesFiltrados.map((paciente) => (
                           <tr key={paciente.id}>
-                            <td>{paciente.full_name}</td>
-                            <td>{paciente.cpf}</td>
-                            <td>{paciente.email}</td>
-                            <td>{paciente.telefone}</td>
                             <td>
-                              <span
+                              <div className="d-flex align-items-center patient-name-container">
-                                className={`badge ${
+                                {paciente.full_name}
-                                  paciente.ativo === "ativo"
+                                <div className="d-flex patient-badges">
-                                    ? "bg-success"
+                                  {ehAniversariante(paciente.birth_date) && (
-                                    : "bg-danger"
+                                    <span className="badge anniversary-badge ms-2" title="Aniversariante do dia">
-                                }`}
+                                      <i className="bi bi-gift"></i>
-                              >
+                                    </span>
-                                {paciente.ativo}
+                                  )}
+                                  {paciente.vip && (
+                                    <span className="badge vip-badge ms-2" title="Paciente VIP">
+                                      VIP
+                                    </span>
+                                  )}
+                                </div>
+                              </div>
+                            </td>
+                            <td>{paciente.cpf}</td>
+                            <td>
+                              <span className="badge insurance-badge">
+                                {paciente.insurance_plan || 'Não informado'}
                               </span>
                             </td>
+                            <td>{paciente.email || 'Não informado'}</td>
                             <td>
                               <div className="d-flex gap-2">
                                 <Link to={`${paciente.id}`}>
-                                  <button
+                                  <button className="btn btn-sm btn-view">
-                                    className="btn btn-sm"
-                                    style={{
-                                      backgroundColor: "#E6F2FF",
-                                      color: "#004085",
-                                    }}
-                                    onClick={() => {
-                                      
-                                      console.log(paciente.id);
-                                    }}
-                                  >
                                     <i className="bi bi-eye me-1"></i> Ver Detalhes
                                   </button>
                                 </Link>
 
                                 <Link to={`${paciente.id}/edit`}>
-                                  <button
+                                  <button className="btn btn-sm btn-edit">
-                                    className="btn btn-sm"
-                                    style={{
-                                      backgroundColor: "#FFF3CD",
-                                      color: "#856404",
-                                    }}
-                                    onClick={() => {console.log(paciente.id)
-                                      
-                                      
-                                    }}
-                                  >
                                     <i className="bi bi-pencil me-1"></i> Editar
                                   </button>
                                 </Link>
 
-                                {/* Botão que abre o modal */}
                                 <button
-                                  className="btn btn-sm"
+                                  className="btn btn-sm btn-delete"
-                                  style={{
-                                    backgroundColor: "#F8D7DA",
-                                    color: "#721C24",
-                                  }}
                                   onClick={() => {
                                     setSelectedPatientId(paciente.id);
                                     setShowDeleteModal(true);
@@ -317,7 +488,7 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
                         ))
                       ) : (
                         <tr>
-                          <td colSpan="8" className="text-center">
+                          <td colSpan="5" className="empty-state">
                             Nenhum paciente encontrado.
                           </td>
                         </tr>
@@ -334,7 +505,7 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
       {/* Modal de confirmação */}
       {showDeleteModal && (
         <div
-          className="modal fade show"
+          className="modal fade show delete-modal"
           style={{
             display: "block",
             backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -346,9 +517,8 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
         >
           <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
-            
+              <div className="modal-header">
-              <div className="modal-header bg-danger bg-opacity-25">
+                <h5 className="modal-title">
-                <h5 className="modal-title text-danger">
                   Confirmação de Exclusão
                 </h5>
                 <button
@@ -360,12 +530,11 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
 
               <div className="modal-body">
                 <p className="mb-0 fs-5">
-                  Tem certeza que deseja excluir este paciente? 
+                  Tem certeza que deseja excluir este paciente?
                 </p>
               </div>
 
               <div className="modal-footer">
-              
                 <button
                   type="button"
                   className="btn btn-primary"
@@ -374,7 +543,6 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
                   Cancelar
                 </button>
 
-              
                 <button
                   type="button"
                   className="btn btn-danger"
@@ -391,4 +559,4 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
   );
 }
 
-export default TablePaciente;
+export default TablePaciente;

src/pages/style/DoctorCadastroManager.css

@@ -0,0 +1,281 @@
+/* Estilos do modal */
+.modal-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+.modal-container {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  animation: modal-appear 0.3s ease-out;
+}
+
+@keyframes modal-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.modal-header {
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header-success {
+  background-color: #28a745 !important;
+}
+
+.modal-header-error {
+  background-color: #dc3545 !important;
+}
+
+.modal-title {
+  color: #fff;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.modal-close-button {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+  font-weight: bold;
+  transition: opacity 0.2s ease;
+}
+
+.modal-close-button:hover {
+  opacity: 0.8;
+}
+
+.modal-body {
+  padding: 25px 20px;
+}
+
+.modal-message {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 20px;
+  border-top: 1px solid #ddd;
+}
+
+.modal-button {
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: all 0.2s ease;
+}
+
+.modal-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.modal-button-success {
+  background-color: #28a745;
+  color: #fff;
+}
+
+.modal-button-success:hover {
+  background-color: #218838;
+}
+
+.modal-button-error {
+  background-color: #dc3545;
+  color: #fff;
+}
+
+.modal-button-error:hover {
+  background-color: #c82333;
+}
+
+.page-heading {
+  margin-bottom: 2rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid #eaeaea;
+}
+
+.page-heading h3 {
+  color: #333;
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.page-content {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  margin-bottom: 2rem;
+}
+
+.page-content section {
+  margin: 0;
+}
+
+.page-content .row {
+  margin: 0;
+}
+
+.page-content .col-12 {
+  padding: 0;
+}
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9998;
+}
+
+.loading-spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.modal-close-button:focus,
+.modal-button:focus {
+  outline: 2px solid #0056b3;
+  outline-offset: 2px;
+}
+
+/* Garantir que as cores dos cabeçalhos sejam aplicadas */
+.modal-overlay .modal-container .modal-header.modal-header-success {
+  background-color: #28a745 !important;
+}
+
+.modal-overlay .modal-container .modal-header.modal-header-error {
+  background-color: #dc3545 !important;
+}
+
+@media (max-width: 768px) {
+  .modal-container {
+    width: 95%;
+    margin: 1rem;
+  }
+  
+  .modal-body {
+    padding: 20px 15px;
+  }
+  
+  .modal-message {
+    font-size: 1rem;
+  }
+  
+  .page-heading h3 {
+    font-size: 1.5rem;
+  }
+  
+  .page-content {
+    padding: 1.5rem;
+    margin: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .modal-header {
+    padding: 12px 15px;
+  }
+  
+  .modal-title {
+    font-size: 1.1rem;
+  }
+  
+  .modal-body {
+    padding: 15px;
+  }
+  
+  .modal-footer {
+    padding: 12px 15px;
+  }
+  
+  .page-content {
+    padding: 1rem;
+    margin: 0.5rem;
+  }
+  
+  .page-heading {
+    margin-bottom: 1.5rem;
+    padding: 0.75rem 0;
+  }
+  
+  .page-heading h3 {
+    font-size: 1.35rem;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .modal-container {
+    border: 2px solid #000;
+  }
+  
+  .modal-header-success {
+    background-color: #006400 !important;
+  }
+  
+  .modal-header-error {
+    background-color: #8b0000 !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-container {
+    animation: none;
+  }
+  
+  .modal-button:hover {
+    transform: none;
+  }
+  
+  .loading-spinner {
+    animation-duration: 2s;
+  }
+}

src/pages/style/PatientCadastroManager.css

@@ -0,0 +1,278 @@
+.page-heading {
+  margin-bottom: 2rem;
+}
+
+.page-heading h3 {
+  color: #1e3a8a;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.page-content {
+  padding: 1rem 0;
+}
+
+.alert-info {
+  background-color: #d1ecf1;
+  border-color: #bee5eb;
+  color: #0c5460;
+  padding: 0.75rem 1.25rem;
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+}
+
+.spinner-border-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.15em;
+}
+
+.section {
+  margin-bottom: 2rem;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -0.75rem;
+  margin-left: -0.75rem;
+}
+
+.col-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+}
+
+/* Estilos do modal */
+.modal-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+.modal-content {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  animation: modal-appear 0.3s ease-out;
+}
+
+@keyframes modal-appear {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.modal-header {
+  background-color: #1e3a8a;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header.success {
+  background-color: #28a745 !important;
+}
+
+.modal-header.error {
+  background-color: #dc3545 !important;
+}
+
+.modal-header h5 {
+  color: #fff;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.modal-close-button {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.modal-close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.modal-body {
+  padding: 25px 20px;
+}
+
+.modal-message {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.modal-submessage {
+  color: #666;
+  font-size: 0.9rem;
+  margin: 10px 0 0 0;
+  line-height: 1.4;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 20px;
+  border-top: 1px solid #ddd;
+}
+
+.modal-confirm-button {
+  background-color: #1e3a8a;
+  color: #fff;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: background-color 0.2s;
+}
+
+.modal-confirm-button:hover {
+  background-color: #1e40a5;
+}
+
+.modal-confirm-button.success {
+  background-color: #28a745 !important;
+}
+
+.modal-confirm-button.success:hover {
+  background-color: #218838 !important;
+}
+
+.modal-confirm-button.error {
+  background-color: #dc3545 !important;
+}
+
+.modal-confirm-button.error:hover {
+  background-color: #c82333 !important;
+}
+
+@media (max-width: 768px) {
+  .page-heading {
+    margin-bottom: 1.5rem;
+  }
+  
+  .page-heading h3 {
+    font-size: 1.5rem;
+  }
+  
+  .modal-content {
+    width: 95%;
+    margin: 1rem;
+  }
+  
+  .modal-body {
+    padding: 20px 15px;
+  }
+  
+  .modal-message {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .page-heading h3 {
+    font-size: 1.3rem;
+  }
+  
+  .modal-header {
+    padding: 12px 15px;
+  }
+  
+  .modal-header h5 {
+    font-size: 1.1rem;
+  }
+  
+  .modal-body {
+    padding: 15px;
+  }
+  
+  .modal-footer {
+    padding: 12px 15px;
+  }
+  
+  .modal-confirm-button {
+    padding: 6px 16px;
+    font-size: 0.9rem;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.loading-state {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.loading-state::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 10;
+}

src/pages/style/TableDoctor.css

@@ -0,0 +1,237 @@
+/* TableDoctor.css */
+.table-doctor-container {
+  line-height: 2.5;
+}
+
+.table-doctor-card {
+  border: none;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.table-doctor-card .card-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 1rem 1.25rem;
+}
+
+.table-doctor-filters {
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+}
+
+.table-doctor-filters h5 {
+  color: #495057;
+  font-weight: 600;
+}
+
+.table-doctor-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-doctor-table th {
+  background-color: #f8f9fa;
+  color: #495057;
+  font-weight: 600;
+  padding: 15px 8px;
+  border-bottom: 2px solid #dee2e6;
+  vertical-align: middle;
+}
+
+.table-doctor-table td {
+  padding: 15px 8px;
+  vertical-align: middle;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.table-doctor-table tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.025);
+}
+
+/* Badges */
+.specialty-badge {
+  background-color: #1e3a8a !important;
+  color: white !important;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+  font-weight: 500;
+}
+
+/* REMOVIDO: .vip-badge */
+
+.results-badge {
+  background-color: #1e3a8a;
+  color: white;
+  padding: 0.5em 0.75em;
+  font-size: 0.875em;
+  font-weight: 500;
+}
+
+.anniversary-badge {
+  background-color: #ffc107;
+  color: #000;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+}
+
+/* Botões de ação */
+.btn-view {
+  background-color: #E6F2FF !important;
+  color: #004085 !important;
+  border: 1px solid #B8D4F0;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-view:hover {
+  background-color: #D1E7FF !important;
+  border-color: #9EC5FE;
+}
+
+.btn-edit {
+  background-color: #FFF3CD !important;
+  color: #856404 !important;
+  border: 1px solid #FFEAA7;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-edit:hover {
+  background-color: #FFEEBA !important;
+  border-color: #FFE087;
+}
+
+.btn-delete {
+  background-color: #F8D7DA !important;
+  color: #721C24 !important;
+  border: 1px solid #F5C6CB;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-delete:hover {
+  background-color: #F1B0B7 !important;
+  border-color: #ED969E;
+}
+
+/* Filtros avançados */
+.advanced-filters {
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  background-color: white;
+}
+
+.advanced-filters h6 {
+  color: #495057;
+  font-weight: 600;
+}
+
+.form-label.fw-bold {
+  color: #495057;
+  font-size: 0.875rem;
+}
+
+/* Modal */
+.delete-modal .modal-header {
+  background-color: rgba(220, 53, 69, 0.1);
+  border-bottom: 1px solid rgba(220, 53, 69, 0.2);
+}
+
+.delete-modal .modal-title {
+  color: #dc3545;
+  font-weight: 600;
+}
+
+/* Controles de tamanho para filtros */
+.filter-especialidade {
+  min-width: 180px !important;
+  max-width: 200px;
+}
+
+.filter-buttons-container {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.filter-btn {
+  white-space: nowrap;
+  padding: 0.375rem 0.75rem;
+}
+
+/* Ajustes específicos para os filtros básicos */
+.filtros-basicos {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+  .table-doctor-table {
+    font-size: 0.875rem;
+  }
+
+  .table-doctor-table th,
+  .table-doctor-table td {
+    padding: 10px 6px;
+  }
+
+  .btn-view,
+  .btn-edit,
+  .btn-delete {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  .filtros-basicos {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .filter-especialidade {
+    min-width: 100% !important;
+    max-width: 100%;
+  }
+
+  .filter-buttons-container {
+    justify-content: stretch;
+  }
+
+  .filter-btn {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+/* Estados vazios */
+.empty-state {
+  padding: 2rem;
+  text-align: center;
+  color: #6c757d;
+}
+
+.empty-state td {
+  border-bottom: none;
+  padding: 2rem !important;
+}
+
+/* Alertas de filtros ativos */
+.filters-active .badge {
+  font-size: 0.75em;
+  padding: 0.4em 0.65em;
+}
+
+/* Animações suaves */
+.table-doctor-table tbody tr {
+  transition: background-color 0.15s ease-in-out;
+}
+
+.btn-view,
+.btn-edit,
+.btn-delete {
+  transition: all 0.15s ease-in-out;
+}

src/pages/style/TablePaciente.css

@@ -0,0 +1,237 @@
+/* TablePaciente.css */
+.table-paciente-container {
+  line-height: 2.5;
+}
+
+.table-paciente-card {
+  border: none;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.table-paciente-card .card-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 1rem 1.25rem;
+}
+
+.table-paciente-filters {
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+}
+
+.table-paciente-filters h5 {
+  color: #495057;
+  font-weight: 600;
+}
+
+.table-paciente-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-paciente-table th {
+  background-color: #f8f9fa;
+  color: #495057;
+  font-weight: 600;
+  padding: 15px 8px;
+  border-bottom: 2px solid #dee2e6;
+  vertical-align: middle;
+}
+
+.table-paciente-table td {
+  padding: 15px 8px;
+  vertical-align: middle;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.table-paciente-table tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.025);
+}
+
+/* Badges */
+.insurance-badge {
+  background-color: #6c757d !important;
+  color: white !important;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+  font-weight: 500;
+}
+
+.vip-badge {
+  background-color: #1e3a8a !important;
+  color: white !important;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+  font-weight: 500;
+}
+
+.results-badge {
+  background-color: #1e3a8a;
+  color: white;
+  padding: 0.5em 0.75em;
+  font-size: 0.875em;
+  font-weight: 500;
+}
+
+.anniversary-badge {
+  background-color: #ffc107;
+  color: #000;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+}
+
+/* Botões de ação */
+.btn-view {
+  background-color: #E6F2FF !important;
+  color: #004085 !important;
+  border: 1px solid #B8D4F0;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-view:hover {
+  background-color: #D1E7FF !important;
+  border-color: #9EC5FE;
+}
+
+.btn-edit {
+  background-color: #FFF3CD !important;
+  color: #856404 !important;
+  border: 1px solid #FFEAA7;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-edit:hover {
+  background-color: #FFEEBA !important;
+  border-color: #FFE087;
+}
+
+.btn-delete {
+  background-color: #F8D7DA !important;
+  color: #721C24 !important;
+  border: 1px solid #F5C6CB;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-delete:hover {
+  background-color: #F1B0B7 !important;
+  border-color: #ED969E;
+}
+
+/* Filtros avançados */
+.advanced-filters {
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  background-color: white;
+}
+
+.advanced-filters h6 {
+  color: #495057;
+  font-weight: 600;
+}
+
+.form-label.fw-bold {
+  color: #495057;
+  font-size: 0.875rem;
+}
+
+/* Modal */
+.delete-modal .modal-header {
+  background-color: rgba(220, 53, 69, 0.1);
+  border-bottom: 1px solid rgba(220, 53, 69, 0.2);
+}
+
+.delete-modal .modal-title {
+  color: #dc3545;
+  font-weight: 600;
+}
+
+/* Estados vazios */
+.empty-state {
+  padding: 2rem;
+  text-align: center;
+  color: #6c757d;
+}
+
+.empty-state td {
+  border-bottom: none;
+  padding: 2rem !important;
+}
+
+/* Alertas de filtros ativos */
+.filters-active .badge {
+  font-size: 0.75em;
+  padding: 0.4em 0.65em;
+}
+
+/* Animações suaves */
+.table-paciente-table tbody tr {
+  transition: background-color 0.15s ease-in-out;
+}
+
+.btn-view,
+.btn-edit,
+.btn-delete {
+  transition: all 0.15s ease-in-out;
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+  .table-paciente-table {
+    font-size: 0.875rem;
+  }
+  
+  .table-paciente-table th,
+  .table-paciente-table td {
+    padding: 10px 6px;
+  }
+  
+  .btn-view,
+  .btn-edit,
+  .btn-delete {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+  }
+  
+  .table-paciente-filters .d-flex {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .table-paciente-filters .form-select {
+    min-width: 100% !important;
+  }
+  
+  .patient-name-container {
+    flex-direction: column;
+    align-items: flex-start !important;
+    gap: 0.25rem;
+  }
+  
+  .patient-badges {
+    margin-left: 0 !important;
+  }
+}/* Estilos para componentes compactos */
+.compact-select {
+  font-size: 1.0rem;
+  padding: 0.45rem 0.5rem;
+}
+
+.compact-select option {
+  font-size: 0.875rem;
+}
+
+/* Ajuste adicional para os botões de filtro */
+.table-paciente-filters .btn-sm {
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
+/* Garantir que os botões fiquem alinhados */
+.table-paciente-filters .d-flex {
+  align-items: center;
+  gap: 8px;
+}