agendamento de consulta do medico e paciente

src/PagesMedico/DoctorAgendamentoManager.jsx

@@ -15,6 +15,7 @@ import {
   Edit,
   Trash2,
   CheckCircle,
+  FileText,
 } from "lucide-react";
 import "../pages/style/Agendamento.css";
 import "../pages/style/FilaEspera.css";
@@ -295,6 +296,18 @@ const Agendamento = () => {
     setPageConsulta(true);
   };
 
+  const handleCreateReport = (appointment) => {
+    navigate("/medico/novo-relatorio", {
+      state: {
+        appointment,
+        patient_id: appointment.patient_id,
+        doctor_id: appointment.doctor_id,
+        paciente_nome: appointment.paciente_nome,
+        medico_nome: appointment.medico_nome,
+      },
+    });
+  };
+
   const handleSearchMedicos = (term) => {
     setSearchTermDoctor(term);
     if (term.trim()) {
@@ -609,6 +622,16 @@ const filtrarPorPaciente = (appointments) => {
               <Edit size={16} />
             </button>
           )}
+          {app.status !== "cancelled" && (
+            <button
+              className="btn-action btn-report-blue"
+              onClick={() => handleCreateReport(app)}
+              title="Criar Relatório / Laudo"
+              aria-label={`Criar relatório para ${app.paciente_nome}`}
+            >
+              <FileText size={16} />
+            </button>
+          )}
           {app.status !== "cancelled" && (
             <button
               className="btn-action btn-delete"

src/PagesMedico/FormNovoRelatorio.jsx

@@ -1,5 +1,6 @@
+// src/PagesMedico/FormNovoRelatorio.jsx
 import React, { useEffect, useState, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import API_KEY from '../components/utils/apiKeys';
 import { useAuth } from '../components/utils/AuthProvider';
 import TiptapEditor from './TiptapEditor';
@@ -12,6 +13,7 @@ const FormNovoRelatorio = () => {
   const { getAuthorizationHeader } = useAuth();
   const authHeader = getAuthorizationHeader();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const [patients, setPatients] = useState([]);
   const [doctors, setDoctors] = useState([]);
@@ -33,6 +35,7 @@ const FormNovoRelatorio = () => {
   const [showDoctorDropdown, setShowDoctorDropdown] = useState(false);
   const patientRef = useRef();
   const doctorRef = useRef();
+  const [lockedFromAppointment, setLockedFromAppointment] = useState(false);
 
   useEffect(() => {
     let mounted = true;
@@ -129,7 +132,24 @@ const FormNovoRelatorio = () => {
 
   const handleEditorChange = (html) => setForm(prev => ({ ...prev, contentHtml: html }));
 
-  // 🔹 Agora com created_by sendo o ID do usuário logado
+  useEffect(() => {
+    if (location && location.state && location.state.appointment) {
+      const appt = location.state.appointment;
+      const paciente_nome = location.state.paciente_nome || appt.paciente_nome || '';
+      const medico_nome = location.state.medico_nome || appt.medico_nome || '';
+      setForm(prev => ({
+        ...prev,
+        patient_id: appt.patient_id || prev.patient_id,
+        patient_name: paciente_nome || prev.patient_name,
+        patient_birth: prev.patient_birth || '',
+        doctor_id: appt.doctor_id || prev.doctor_id,
+        doctor_name: medico_nome || prev.doctor_name,
+        contentHtml: generateTemplate(paciente_nome, prev.patient_birth || '', medico_nome)
+      }));
+      setLockedFromAppointment(true);
+    }
+  }, [location]);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!form.patient_id) return alert('Selecione o paciente (clicando no item) antes de salvar.');
@@ -149,7 +169,6 @@ const FormNovoRelatorio = () => {
         requested_by: form.doctor_name || ''
       };
 
-      // Busca o id do usuário logado (via token)
       let userId = null;
       try {
         const token = authHeader?.replace(/^Bearer\s+/i, '') || '';
@@ -189,8 +208,6 @@ const FormNovoRelatorio = () => {
       }
 
       const created = await res.json();
-      console.log('Relatório criado:', created);
-
       window.dispatchEvent(new Event('reports:refresh'));
       alert('Relatório criado com sucesso!');
       navigate('/medico/relatorios');
@@ -211,11 +228,12 @@ const FormNovoRelatorio = () => {
             <input
               className="form-control"
               placeholder="Comece a digitar (ex.: m para pacientes que começam com m)"
-              value={patientQuery}
+              value={lockedFromAppointment ? form.patient_name : patientQuery}
-              onChange={(e) => { setPatientQuery(e.target.value); setShowPatientDropdown(true); }}
+              onChange={(e) => { if (!lockedFromAppointment) { setPatientQuery(e.target.value); setShowPatientDropdown(true); } }}
-              onFocus={() => setShowPatientDropdown(true)}
+              onFocus={() => { if (!lockedFromAppointment) setShowPatientDropdown(true); }}
+              disabled={lockedFromAppointment}
             />
-            {showPatientDropdown && patientQuery && (
+            {!lockedFromAppointment && showPatientDropdown && patientQuery && (
               <ul className="list-group position-absolute" style={{ zIndex: 50, maxHeight: 220, overflowY: 'auto', width: '100%' }}>
                 {filteredPatients.length > 0 ? filteredPatients.map(p => (
                   <li key={p.id} className="list-group-item list-group-item-action" onClick={() => choosePatient(p)}>
@@ -232,11 +250,12 @@ const FormNovoRelatorio = () => {
             <input
               className="form-control"
               placeholder="Comece a digitar o nome do médico"
-              value={doctorQuery}
+              value={lockedFromAppointment ? form.doctor_name : doctorQuery}
-              onChange={(e) => { setDoctorQuery(e.target.value); setShowDoctorDropdown(true); }}
+              onChange={(e) => { if (!lockedFromAppointment) { setDoctorQuery(e.target.value); setShowDoctorDropdown(true); } }}
-              onFocus={() => setShowDoctorDropdown(true)}
+              onFocus={() => { if (!lockedFromAppointment) setShowDoctorDropdown(true); }}
+              disabled={lockedFromAppointment}
             />
-            {showDoctorDropdown && doctorQuery && (
+            {!lockedFromAppointment && showDoctorDropdown && doctorQuery && (
               <ul className="list-group position-absolute" style={{ zIndex: 50, maxHeight: 220, overflowY: 'auto', width: '100%' }}>
                 {filteredDoctors.length > 0 ? filteredDoctors.map(d => (
                   <li key={d.id} className="list-group-item list-group-item-action" onClick={() => chooseDoctor(d)}>

src/pages/Agendamento.jsx

@@ -1,43 +1,50 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect } from "react";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import API_KEY from '../components/utils/apiKeys.js';
+import API_KEY from "../components/utils/apiKeys.js";
-import AgendamentoCadastroManager from './AgendamentoCadastroManager.jsx';
+import AgendamentoCadastroManager from "./AgendamentoCadastroManager.jsx";
-import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient.js';
+import { GetPatientByID } from "../components/utils/Functions-Endpoints/Patient.js";
-import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
+import TabelaAgendamentoDia from "../components/AgendarConsulta/TabelaAgendamentoDia";
-import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
+import TabelaAgendamentoSemana from "../components/AgendarConsulta/TabelaAgendamentoSemana";
-import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
+import TabelaAgendamentoMes from "../components/AgendarConsulta/TabelaAgendamentoMes";
-import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
+import FormNovaConsulta from "../components/AgendarConsulta/FormNovaConsulta";
-import { GetAllDoctors, GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor.js';
+import {
-import { useAuth } from '../components/utils/AuthProvider.js';
+  GetAllDoctors,
-import dayjs from 'dayjs';
+  GetDoctorByID,
-import 'dayjs/locale/pt-br';
+} from "../components/utils/Functions-Endpoints/Doctor.js";
-import isBetween from 'dayjs/plugin/isBetween';
+import { useAuth } from "../components/utils/AuthProvider.js";
-import localeData from 'dayjs/plugin/localeData';
+import dayjs from "dayjs";
-import { ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
+import "dayjs/locale/pt-br";
-import CalendarComponent from '../components/AgendarConsulta/CalendarComponent.jsx';
+import isBetween from "dayjs/plugin/isBetween";
+import localeData from "dayjs/plugin/localeData";
+import { ChevronLeft, ChevronRight, Edit, Trash2 } from "lucide-react";
+import CalendarComponent from "../components/AgendarConsulta/CalendarComponent.jsx";
 import "./style/Agendamento.css";
-import './style/FilaEspera.css';
+import "./style/FilaEspera.css";
-import Spinner from '../components/Spinner.jsx';
+import Spinner from "../components/Spinner.jsx";
 
-dayjs.locale('pt-br');
+dayjs.locale("pt-br");
 dayjs.extend(isBetween);
 dayjs.extend(localeData);
 
-const Agendamento = ({ setDictInfo }) => {
+// Offset de horário para bater com o que o paciente marca (ajuste se precisar)
+const HORARIO_OFFSET = 3; // se a diferença for 2h, troca para 2
 
+const Agendamento = ({ setDictInfo }) => {
   const navigate = useNavigate();
   const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([]);
-  const [selectedID, setSelectedId] = useState('0');
+  const [selectedID, setSelectedId] = useState("0");
   const [filaEsperaData, setFilaEsperaData] = useState([]);
   const [FiladeEspera, setFiladeEspera] = useState(false);
   const [PageNovaConsulta, setPageConsulta] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const { getAuthorizationHeader } = useAuth();
-  const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({});
+  const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState(
+    {}
+  );
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [ListaDeMedicos, setListaDeMedicos] = useState([]);
   const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([]);
-  const [searchTermDoctor, setSearchTermDoctor] = useState('');
+  const [searchTermDoctor, setSearchTermDoctor] = useState("");
   const [doctorDropdownOpen, setDoctorDropdownOpen] = useState(false);
   const [MedicoFiltrado, setMedicoFiltrado] = useState({ id: "vazio" });
   const [cacheAgendamentos, setCacheAgendamentos] = useState([]);
@@ -45,9 +52,9 @@ const Agendamento = ({ setDictInfo }) => {
   const [showConfirmModal, setShowConfirmModal] = useState(false);
   const [motivoCancelamento, setMotivoCancelamento] = useState("");
   const [showSpinner, setShowSpinner] = useState(true);
-  const [waitlistSearch, setWaitlistSearch] = useState('');
+  const [waitlistSearch, setWaitlistSearch] = useState("");
   const [waitSortKey, setWaitSortKey] = useState(null);
-  const [waitSortDir, setWaitSortDir] = useState('asc');
+  const [waitSortDir, setWaitSortDir] = useState("asc");
   const [waitPage, setWaitPage] = useState(1);
   const [waitPerPage, setWaitPerPage] = useState(10);
   const authHeader = getAuthorizationHeader();
@@ -59,22 +66,27 @@ const Agendamento = ({ setDictInfo }) => {
 
   const [quickJump, setQuickJump] = useState({
     month: currentDate.month(),
-    year: currentDate.year()
+    year: currentDate.year(),
   });
 
   const fetchAppointments = async () => {
     const myHeaders = new Headers();
     myHeaders.append("Authorization", authHeader);
     myHeaders.append("apikey", API_KEY);
-    const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
+    const requestOptions = {
+      method: "GET",
+      headers: myHeaders,
+      redirect: "follow",
+    };
     try {
-      const res = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*",
+      const res = await fetch(
+        "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*",
         requestOptions
       );
       const data = await res.json();
       setListaTodosAgendamentos(data);
     } catch (err) {
-      console.error('Erro ao buscar agendamentos', err);
+      console.error("Erro ao buscar agendamentos", err);
     }
   };
 
@@ -84,7 +96,11 @@ const Agendamento = ({ setDictInfo }) => {
     myHeaders.append("apikey", API_KEY);
     myHeaders.append("Content-Type", "application/json");
     myHeaders.append("Prefer", "return=representation");
-    const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };
+    const requestOptions = {
+      method: "PATCH",
+      headers: myHeaders,
+      body: JSON.stringify(updates),
+    };
 
     try {
       const response = await fetch(
@@ -95,11 +111,11 @@ const Agendamento = ({ setDictInfo }) => {
         await fetchAppointments();
         return true;
       } else {
-        console.error('Erro ao atualizar agendamento:', await response.text());
+        console.error("Erro ao atualizar agendamento:", await response.text());
         return false;
       }
     } catch (error) {
-      console.error('Erro de rede/servidor:', error);
+      console.error("Erro de rede/servidor:", error);
       return false;
     }
   };
@@ -109,13 +125,13 @@ const Agendamento = ({ setDictInfo }) => {
     const success = await updateAppointmentStatus(id, {
       status: "cancelled",
       cancellation_reason: motivoCancelamento,
-      updated_at: new Date().toISOString()
+      updated_at: new Date().toISOString(),
     });
     setShowSpinner(false);
     if (success) {
       setShowDeleteModal(false);
       setMotivoCancelamento("");
-      setSelectedId('0');
+      setSelectedId("0");
     } else {
       alert("Falha ao cancelar a consulta.");
     }
@@ -126,25 +142,25 @@ const Agendamento = ({ setDictInfo }) => {
     const success = await updateAppointmentStatus(id, {
       status: "agendado",
       cancellation_reason: null,
-      updated_at: new Date().toISOString()
+      updated_at: new Date().toISOString(),
     });
     setShowSpinner(false);
     if (success) {
       setShowConfirmModal(false);
-      setSelectedId('0');
+      setSelectedId("0");
     } else {
       alert("Falha ao reverter o cancelamento.");
     }
   };
 
   const handleQuickJumpChange = (type, value) => {
-    setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
+    setQuickJump((prev) => ({ ...prev, [type]: Number(value) }));
   };
 
   useEffect(() => {
     setQuickJump({
       month: currentDate.month(),
-      year: currentDate.year()
+      year: currentDate.year(),
     });
   }, [currentDate]);
 
@@ -155,7 +171,10 @@ const Agendamento = ({ setDictInfo }) => {
   };
 
   useEffect(() => {
-    if (!listaTodosAgendamentos.length) { setShowSpinner(false); return; }
+    if (!listaTodosAgendamentos.length) {
+      setShowSpinner(false);
+      return;
+    }
     setShowSpinner(true);
     const fetchDados = async () => {
       const newDict = {};
@@ -163,12 +182,14 @@ const Agendamento = ({ setDictInfo }) => {
       for (const agendamento of listaTodosAgendamentos) {
         if (!agendamento.doctor_id || !agendamento.patient_id) continue;
         if (!cacheMedicos[agendamento.doctor_id]) {
-          cacheMedicos[agendamento.doctor_id] =
+          cacheMedicos[agendamento.doctor_id] = (
-            (await GetDoctorByID(agendamento.doctor_id, authHeader))[0];
+            await GetDoctorByID(agendamento.doctor_id, authHeader)
+          )[0];
         }
         if (!cachePacientes[agendamento.patient_id]) {
-          cachePacientes[agendamento.patient_id] =
+          cachePacientes[agendamento.patient_id] = (
-            (await GetPatientByID(agendamento.patient_id, authHeader))[0];
+            await GetPatientByID(agendamento.patient_id, authHeader)
+          )[0];
         }
         const medico = cacheMedicos[agendamento.doctor_id];
         const paciente = cachePacientes[agendamento.patient_id];
@@ -177,13 +198,18 @@ const Agendamento = ({ setDictInfo }) => {
           ...agendamento,
           medico_nome: medico?.full_name,
           paciente_nome: paciente?.full_name,
-          paciente_cpf: paciente?.cpf
+          paciente_cpf: paciente?.cpf,
         };
 
         if (agendamento.status === "requested") {
-          newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
+          newFila.push({
+            agendamento: agendamentoMelhorado,
+            Infos: agendamentoMelhorado,
+          });
         } else {
-          const DiaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
+          const DiaAgendamento = dayjs(agendamento.scheduled_at).format(
+            "YYYY-MM-DD"
+          );
           if (newDict[DiaAgendamento]) {
             newDict[DiaAgendamento].push(agendamentoMelhorado);
           } else {
@@ -192,7 +218,9 @@ const Agendamento = ({ setDictInfo }) => {
         }
       }
       for (const key in newDict) {
-        newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
+        newDict[key].sort((a, b) =>
+          a.scheduled_at.localeCompare(b.scheduled_at)
+        );
       }
       setAgendamentosOrganizados(newDict);
       setFilaEsperaData(newFila);
@@ -203,48 +231,59 @@ const Agendamento = ({ setDictInfo }) => {
 
   useEffect(() => {
     fetchAppointments();
-    GetAllDoctors(authHeader).then(docs =>
+    GetAllDoctors(authHeader).then((docs) =>
-      setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id })))
+      setListaDeMedicos(
+        docs.map((d) => ({ nomeMedico: d.full_name, idMedico: d.id }))
+      )
     );
   }, [authHeader]);
 
-  const handleSearchMedicos = (term) => { };
+  const handleSearchMedicos = (term) => {};
 
   const filaEsperaFiltrada = useMemo(() => {
     if (!waitlistSearch.trim()) return filaEsperaData;
     const term = waitlistSearch.toLowerCase();
-    return filaEsperaData.filter(item =>
+    return filaEsperaData.filter(
-      (item?.Infos?.paciente_nome?.toLowerCase() || '').includes(term) ||
+      (item) =>
-      (item?.Infos?.paciente_cpf?.toLowerCase() || '').includes(term) ||
+        (item?.Infos?.paciente_nome?.toLowerCase() || "").includes(term) ||
-      (item?.Infos?.nome_medico?.toLowerCase() || '').includes(term)
+        (item?.Infos?.paciente_cpf?.toLowerCase() || "").includes(term) ||
+        (item?.Infos?.nome_medico?.toLowerCase() || "").includes(term)
     );
   }, [waitlistSearch, filaEsperaData]);
 
   const applySortingWaitlist = (arr) => {
     if (!Array.isArray(arr) || !waitSortKey) return arr;
     const copy = [...arr];
-    if (waitSortKey === 'paciente') {
+    if (waitSortKey === "paciente") {
       copy.sort((a, b) =>
-        (a?.Infos?.paciente_nome || '').localeCompare((b?.Infos?.paciente_nome || ''))
+        (a?.Infos?.paciente_nome || "").localeCompare(
+          b?.Infos?.paciente_nome || ""
+        )
       );
-    } else if (waitSortKey === 'medico') {
+    } else if (waitSortKey === "medico") {
       copy.sort((a, b) =>
-        (a?.Infos?.nome_medico || '').localeCompare((b?.Infos?.nome_medico || ''))
+        (a?.Infos?.nome_medico || "").localeCompare(b?.Infos?.nome_medico || "")
       );
-    } else if (waitSortKey === 'data') {
+    } else if (waitSortKey === "data") {
-      copy.sort((a, b) =>
+      copy.sort(
-        new Date(a?.agendamento?.scheduled_at || 0) - new Date(b?.agendamento?.scheduled_at || 0)
+        (a, b) =>
+          new Date(a?.agendamento?.scheduled_at || 0) -
+          new Date(b?.agendamento?.scheduled_at || 0)
       );
     }
-    if (waitSortDir === 'desc') copy.reverse();
+    if (waitSortDir === "desc") copy.reverse();
     return copy;
   };
 
   const filaEsperaOrdenada = applySortingWaitlist(filaEsperaFiltrada);
-  const waitTotalPages = Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
+  const waitTotalPages =
+    Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
   const waitIndiceInicial = (waitPage - 1) * waitPerPage;
   const waitIndiceFinal = waitIndiceInicial + waitPerPage;
-  const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);
+  const filaEsperaPaginada = filaEsperaOrdenada.slice(
+    waitIndiceInicial,
+    waitIndiceFinal
+  );
 
   const gerarNumerosWaitPages = () => {
     const paginas = [];
@@ -252,37 +291,47 @@ const Agendamento = ({ setDictInfo }) => {
     let inicio = Math.max(1, waitPage - Math.floor(paginasParaMostrar / 2));
     let fim = Math.min(waitTotalPages, inicio + paginasParaMostrar - 1);
     inicio = Math.max(1, fim - paginasParaMostrar + 1);
-    for (let i = inicio; i <= fim; i++) { paginas.push(i); }
+    for (let i = inicio; i <= fim; i++) {
+      paginas.push(i);
+    }
     return paginas;
   };
 
-  useEffect(() => { setWaitPage(1); }, [waitlistSearch, waitSortKey, waitSortDir]);
+  useEffect(() => {
+    setWaitPage(1);
+  }, [waitlistSearch, waitSortKey, waitSortDir]);
 
   const generateDateGrid = () => {
     const grid = [];
-    const startOfMonth = currentDate.startOf('month');
+    const startOfMonth = currentDate.startOf("month");
-    let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
+    let currentDay = startOfMonth.subtract(startOfMonth.day(), "day");
     for (let i = 0; i < 42; i++) {
       grid.push(currentDay);
-      currentDay = currentDay.add(1, 'day');
+      currentDay = currentDay.add(1, "day");
     }
     return grid;
   };
 
   const dateGrid = useMemo(() => generateDateGrid(), [currentDate]);
-  const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
+  const weekDays = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
   const handleDateClick = (day) => setSelectedDay(day);
 
   const DeleteModal = () => (
-    <div className="modal fade show"
+    <div
+      className="modal fade show"
       style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}
       tabIndex="-1"
     >
       <div className="modal-dialog modal-dialog-centered">
         <div className="modal-content">
-          <div className="modal-header" style={{ backgroundColor: '#f8d7da', color: '#721c24' }}>
+          <div
+            className="modal-header"
+            style={{ backgroundColor: "#f8d7da", color: "#721c24" }}
+          >
             <h5 className="modal-title">Confirmação de Cancelamento</h5>
-            <button type="button" className="btn-close"
+            <button
+              type="button"
+              className="btn-close"
               onClick={() => setShowDeleteModal(false)}
             ></button>
           </div>
@@ -299,7 +348,10 @@ const Agendamento = ({ setDictInfo }) => {
             <button
               type="button"
               className="btn btn-secondary"
-              onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}
+              onClick={() => {
+                setShowDeleteModal(false);
+                setMotivoCancelamento("");
+              }}
             >
               Cancelar
             </button>
@@ -317,21 +369,29 @@ const Agendamento = ({ setDictInfo }) => {
   );
 
   const ConfirmEditModal = () => (
-    <div className="modal fade show"
+    <div
+      className="modal fade show"
       style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}
       tabIndex="-1"
     >
       <div className="modal-dialog modal-dialog-centered">
         <div className="modal-content">
-          <div className="modal-header" style={{ backgroundColor: '#d4edda', color: '#155724' }}>
+          <div
+            className="modal-header"
+            style={{ backgroundColor: "#d4edda", color: "#155724" }}
+          >
             <h5 className="modal-title">Confirmação de edição</h5>
-            <button type="button" className="btn-close"
+            <button
+              type="button"
+              className="btn-close"
               onClick={() => setShowConfirmModal(false)}
             ></button>
           </div>
           <div className="modal-body">
             <p>Tem certeza que deseja retirar o cancelamento?</p>
-            <small className="text-muted">Isso reverterá o status do agendamento para Agendado.</small>
+            <small className="text-muted">
+              Isso reverterá o status do agendamento para Agendado.
+            </small>
           </div>
           <div className="modal-footer justify-content-center">
             <button
@@ -346,7 +406,12 @@ const Agendamento = ({ setDictInfo }) => {
               className="btn btn-success"
               onClick={() => confirmConsulta(selectedID)}
             >
-              <Trash2 size={16} className="me-1" style={{ transform: 'rotate(45deg)' }} /> Confirmar
+              <Trash2
+                size={16}
+                className="me-1"
+                style={{ transform: "rotate(45deg)" }}
+              />{" "}
+              Confirmar
             </button>
           </div>
         </div>
@@ -359,18 +424,28 @@ const Agendamento = ({ setDictInfo }) => {
       <h1>Agendar nova consulta</h1>
 
       {!PageNovaConsulta ? (
-        <div className='atendimento-eprocura'>
+        <div className="atendimento-eprocura">
-          <div className='container-btns-agenda-fila_esepera'>
+          <div className="container-btns-agenda-fila_esepera">
             <div className="tabs-agenda-fila">
               <button
-                className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`}
+                className={`btn-agenda ${
-                onClick={() => { setFiladeEspera(false); setSearchTerm(''); }}
+                  !FiladeEspera ? "opc-agenda-ativo" : ""
+                }`}
+                onClick={() => {
+                  setFiladeEspera(false);
+                  setSearchTerm("");
+                }}
               >
                 Agenda
               </button>
               <button
-                className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`}
+                className={`btn-fila-espera ${
-                onClick={() => { setFiladeEspera(true); setSearchTerm(''); }}
+                  FiladeEspera ? "opc-filaespera-ativo" : ""
+                }`}
+                onClick={() => {
+                  setFiladeEspera(true);
+                  setSearchTerm("");
+                }}
               >
                 Fila de espera
               </button>
@@ -394,65 +469,87 @@ const Agendamento = ({ setDictInfo }) => {
                 <i className="bi bi-gear-fill me-1"></i> Gerenciar Exceções
               </button>
               <button
-                className='manage-button btn'
+                className="manage-button btn"
-                onClick={() => navigate('/secretaria/disponibilidade')}
+                onClick={() => navigate("/secretaria/disponibilidade")}
               >
                 <i className="bi bi-gear-fill me-1"></i> Mudar Disponibilidade
               </button>
             </div>
           </div>
 
-          <section className='calendario-ou-filaespera'>
+          <section className="calendario-ou-filaespera">
             {FiladeEspera === false ? (
               <div className="calendar-wrapper">
                 <div className="calendar-info-panel">
                   <div className="info-date-display">
-                    <span>{selectedDay.format('MMM')}</span>
+                    <span>{selectedDay.format("MMM")}</span>
-                    <strong>{selectedDay.format('DD')}</strong>
+                    <strong>{selectedDay.format("DD")}</strong>
                   </div>
                   <div className="info-details">
-                    <h3>{selectedDay.format('dddd')}</h3>
+                    <h3>{selectedDay.format("dddd")}</h3>
-                    <p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p>
+                    <p>{selectedDay.format("D [de] MMMM [de] YYYY")}</p>
 
                     <div className="calendar-legend">
-    <div className="legend-item" data-status="completed">Realizado</div>
+                      <div className="legend-item" data-status="completed">
-    <div className="legend-item" data-status="confirmed">Confirmado</div>
+                        Realizado
-    <div className="legend-item" data-status="agendado">Agendado</div>
+                      </div>
-    <div className="legend-item" data-status="cancelled">Cancelado</div>
+                      <div className="legend-item" data-status="confirmed">
+                        Confirmado
+                      </div>
+                      <div className="legend-item" data-status="agendado">
+                        Agendado
+                      </div>
+                      <div className="legend-item" data-status="cancelled">
+                        Cancelado
+                      </div>
                     </div>
 
                     <h4 className="subtitle-consultas">
-                      Consultas para {selectedDay.format('DD/MM')}
+                      Consultas para {selectedDay.format("DD/MM")}
                     </h4>
                   </div>
                   <div className="appointments-list">
                     {showSpinner ? (
                       <Spinner />
-                    ) : (() => {
+                    ) : (
+                      (() => {
                         const allApps =
-                        DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')] || [];
+                          DictAgendamentosOrganizados[
+                            selectedDay.format("YYYY-MM-DD")
+                          ] || [];
                         const termDoc = searchTermDoctor.toLowerCase();
-const filtered = allApps.filter(app =>
+                        const filtered = allApps.filter((app) =>
                           !termDoc
                             ? true
-    : (app.medico_nome || '').toLowerCase().startsWith(termDoc)
+                            : (app.medico_nome || "")
-);
+                                .toLowerCase()
+                                .startsWith(termDoc)
+                        );
 
                         return filtered.length > 0 ? (
-                        filtered.map(app => (
+                          filtered.map((app) => (
-                          <div key={app.id} className="appointment-item" data-status={app.status}>
+                            <div
+                              key={app.id}
+                              className="appointment-item"
+                              data-status={app.status}
+                            >
                               <div className="item-time">
-                                 {dayjs(app.scheduled_at).add(3, 'hour').format('HH:mm')}
+                                {dayjs(app.scheduled_at)
+                                  .add(HORARIO_OFFSET, "hour")
+                                  .format("HH:mm")}
                               </div>
                               <div className="item-details">
                                 <span>{app.paciente_nome}</span>
                                 <small>Dr(a). {app.medico_nome}</small>
                               </div>
                               <div className="appointment-actions">
-                              {app.status === 'cancelled' ? (
+                                {app.status === "cancelled" ? (
                                   <button
                                     className="btn-action btn-edit"
-                                  onClick={() => { setSelectedId(app.id); setShowConfirmModal(true); }}
+                                    onClick={() => {
+                                      setSelectedId(app.id);
+                                      setShowConfirmModal(true);
+                                    }}
                                   >
                                     <Edit size={16} />
                                   </button>
@@ -470,7 +567,10 @@ const filtered = allApps.filter(app =>
                                     </button>
                                     <button
                                       className="btn-action btn-delete"
-                                    onClick={() => { setSelectedId(app.id); setShowDeleteModal(true); }}
+                                      onClick={() => {
+                                        setSelectedId(app.id);
+                                        setShowDeleteModal(true);
+                                      }}
                                     >
                                       <Trash2 size={16} />
                                     </button>
@@ -484,11 +584,11 @@ const filtered = allApps.filter(app =>
                             <p>Nenhuma consulta agendada.</p>
                           </div>
                         );
-                    })()}
+                      })()
+                    )}
                   </div>
                 </div>
                 <div className="calendar-main">
-  {/* SUBSTITUIR POR ESTE BLOCO 👇 */}
                   <div className="calendar-header-filter">
                     <div className="position-relative">
                       <input
@@ -501,7 +601,8 @@ const filtered = allApps.filter(app =>
                           setDoctorDropdownOpen(true);
                         }}
                         onFocus={() => {
-          if (searchTermDoctor.trim()) setDoctorDropdownOpen(true);
+                          if (searchTermDoctor.trim())
+                            setDoctorDropdownOpen(true);
                         }}
                       />
 
@@ -521,8 +622,7 @@ const filtered = allApps.filter(app =>
                             overflowY: "auto",
                           }}
                         >
-          {ListaDeMedicos
+                          {ListaDeMedicos.filter((m) => {
-            .filter((m) => {
                             const nome = (m.nomeMedico || "").toLowerCase();
                             const term = searchTermDoctor.toLowerCase();
                             return nome.startsWith(term);
@@ -551,16 +651,22 @@ const filtered = allApps.filter(app =>
                     </div>
                   </div>
 
-                        
                   <div className="calendar-controls">
                     <div className="date-indicator">
-                      <h2>{currentDate.format('MMMM [de] YYYY')}</h2>
+                      <h2>{currentDate.format("MMMM [de] YYYY")}</h2>
-                      <div className="quick-jump-controls"
+                      <div
-                        style={{ display: 'flex', gap: '5px', marginTop: '10px' }}
+                        className="quick-jump-controls"
+                        style={{
+                          display: "flex",
+                          gap: "5px",
+                          marginTop: "10px",
+                        }}
                       >
                         <select
                           value={quickJump.month}
-                          onChange={(e) => handleQuickJumpChange('month', e.target.value)}
+                          onChange={(e) =>
+                            handleQuickJumpChange("month", e.target.value)
+                          }
                           className="form-select form-select-sm w-auto"
                         >
                           {dayjs.months().map((month, index) => (
@@ -571,11 +677,18 @@ const filtered = allApps.filter(app =>
                         </select>
                         <select
                           value={quickJump.year}
-                          onChange={(e) => handleQuickJumpChange('year', e.target.value)}
+                          onChange={(e) =>
+                            handleQuickJumpChange("year", e.target.value)
+                          }
                           className="form-select form-select-sm w-auto"
                         >
-                          {Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (
+                          {Array.from(
-                            <option key={year} value={year}>{year}</option>
+                            { length: 11 },
+                            (_, i) => dayjs().year() - 5 + i
+                          ).map((year) => (
+                            <option key={year} value={year}>
+                              {year}
+                            </option>
                           ))}
                         </select>
                         <button
@@ -592,47 +705,63 @@ const filtered = allApps.filter(app =>
                     </div>
 
                     <div className="nav-buttons">
-                      <button onClick={() => {
+                      <button
-                        const newDate = currentDate.subtract(1, 'month');
+                        onClick={() => {
+                          const newDate = currentDate.subtract(1, "month");
                           setCurrentDate(newDate);
                           setSelectedDay(newDate);
-                      }}>
+                        }}
+                      >
                         <ChevronLeft size={20} />
                       </button>
-                      <button onClick={() => {
+                      <button
+                        onClick={() => {
                           const today = dayjs();
                           setCurrentDate(today);
                           setSelectedDay(today);
-                      }}>
+                        }}
+                      >
                         Hoje
                       </button>
-                      <button onClick={() => {
+                      <button
-                        const newDate = currentDate.add(1, 'month');
+                        onClick={() => {
+                          const newDate = currentDate.add(1, "month");
                           setCurrentDate(newDate);
                           setSelectedDay(newDate);
-                      }}>
+                        }}
+                      >
                         <ChevronRight size={20} />
                       </button>
                     </div>
                   </div>
 
+                  <div className="calendar-grid-scroll-wrapper">
+                    <div className="calendar-grid-scrollable">
                       <div className="calendar-grid">
-                    {weekDays.map(day => (
+                        {weekDays.map((day) => (
-                      <div key={day} className="day-header">{day}</div>
+                          <div key={day} className="day-header">
+                            {day}
+                          </div>
                         ))}
                         {dateGrid.map((day, index) => {
-                      const dayKey = day.format('YYYY-MM-DD');
+                          const dayKey = day.format("YYYY-MM-DD");
-                      const appointmentsOnDay = DictAgendamentosOrganizados[dayKey] || [];
+                          const appointmentsOnDay =
+                            DictAgendamentosOrganizados[dayKey] || [];
                           const termDoc = searchTermDoctor.toLowerCase();
-const filteredAppointments = appointmentsOnDay.filter(app =>
+                          const filteredAppointments =
+                            appointmentsOnDay.filter((app) =>
                               !termDoc
                                 ? true
-    : (app.medico_nome || '').toLowerCase().startsWith(termDoc)
+                                : (app.medico_nome || "")
-);
+                                    .toLowerCase()
+                                    .startsWith(termDoc)
+                            );
                           const cellClasses = `day-cell ${
-                        day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'
+                            day.isSame(currentDate, "month")
-                      } ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${
+                              ? "current-month"
-                        day.isSame(selectedDay, 'day') ? 'selected' : ''
+                              : "other-month"
+                          } ${day.isSame(dayjs(), "day") ? "today" : ""} ${
+                            day.isSame(selectedDay, "day") ? "selected" : ""
                           }`;
                           return (
                             <div
@@ -640,7 +769,7 @@ const filteredAppointments = appointmentsOnDay.filter(app =>
                               className={cellClasses}
                               onClick={() => handleDateClick(day)}
                             >
-                          <span>{day.format('D')}</span>
+                              <span>{day.format("D")}</span>
                               {filteredAppointments.length > 0 && (
                                 <div className="appointments-indicator">
                                   {filteredAppointments.length}
@@ -652,6 +781,13 @@ const filteredAppointments = appointmentsOnDay.filter(app =>
                       </div>
                     </div>
                   </div>
+
+                  <div className="d-md-none scroll-hint">
+                    <i className="bi bi-arrow-left-right"></i>
+                    <span>Arraste para ver mais dias</span>
+                  </div>
+                </div>
+              </div>
             ) : (
               <div className="page-content table-paciente-container">
                 <section className="row">
@@ -661,7 +797,184 @@ const filteredAppointments = appointmentsOnDay.filter(app =>
                         <h4 className="card-title mb-0">Fila de Espera</h4>
                       </div>
                       <div className="card-body">
-                        {/* ... resto da fila de espera igual ao seu código ... */}
+  <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 className="mb-3">
+      <input
+        type="text"
+        className="form-control"
+        placeholder="Buscar por paciente, CPF ou médico..."
+        value={waitlistSearch}
+        onChange={(e) => setWaitlistSearch(e.target.value)}
+      />
+      <small className="text-muted">
+        Digite o nome do paciente, CPF ou nome do médico
+      </small>
+    </div>
+
+    <div className="d-flex flex-wrap align-items-center gap-2 mb-3">
+      <div className="d-flex align-items-center gap-2">
+        <span className="me-2 text-muted small">Ordenar por:</span>
+        <select
+          className="form-select compact-select sort-select w-auto"
+          value={waitSortKey ? `${waitSortKey}-${waitSortDir}` : ""}
+          onChange={(e) => {
+            const v = e.target.value;
+            if (!v) {
+              setWaitSortKey(null);
+              setWaitSortDir("asc");
+              return;
+            }
+            const [k, d] = v.split("-");
+            setWaitSortKey(k);
+            setWaitSortDir(d);
+          }}
+        >
+          <option value="">Sem ordenação</option>
+          <option value="paciente-asc">Paciente (A-Z)</option>
+          <option value="paciente-desc">Paciente (Z-A)</option>
+          <option value="medico-asc">Médico (A-Z)</option>
+          <option value="medico-desc">Médico (Z-A)</option>
+          <option value="data-asc">Data (mais antiga)</option>
+          <option value="data-desc">Data (mais recente)</option>
+        </select>
+      </div>
+    </div>
+
+    <div className="mt-3">
+      <div className="contador-pacientes">
+        {filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
+      </div>
+    </div>
+  </div>
+
+  <div className="table-responsive">
+    <table className="table table-striped table-hover table-paciente-table">
+      <thead>
+        <tr>
+          <th>Nome do Paciente</th>
+          <th>CPF</th>
+          <th>Médico Solicitado</th>
+          <th>Data da Solicitação</th>
+          <th>Ações</th>
+        </tr>
+      </thead>
+      <tbody>
+        {filaEsperaPaginada.length > 0 ? (
+          filaEsperaPaginada.map((item, index) => (
+            <tr key={index}>
+              <td>{item?.Infos?.paciente_nome}</td>
+              <td>{item?.Infos?.paciente_cpf}</td>
+              <td>{item?.Infos?.medico_nome}</td>
+              <td>
+                {dayjs(item.agendamento.scheduled_at).format("DD/MM/YYYY")}
+              </td>
+              <td>
+                <button
+                  className="btn btn-sm btn-delete"
+                  onClick={() => {
+                    setSelectedId(item.agendamento.id);
+                    setShowDeleteModal(true);
+                  }}
+                >
+                  <i className="bi bi-trash me-1"></i> Excluir
+                </button>
+              </td>
+            </tr>
+          ))
+        ) : (
+          <tr>
+            <td colSpan="5" className="text-center py-4">
+              <div className="text-muted">
+                {showSpinner ? (
+                  <Spinner />
+                ) : (
+                  <>
+                    <i className="bi bi-inbox display-4"></i>
+                    <p className="mt-2">Nenhuma solicitação encontrada.</p>
+                  </>
+                )}
+              </div>
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+
+    {filaEsperaFiltrada.length > 0 && (
+      <div className="d-flex justify-content-between align-items-center mt-3">
+        <div className="d-flex align-items-center">
+          <span className="me-2 text-muted">Itens por página:</span>
+          <select
+            className="form-select form-select-sm w-auto"
+            value={waitPerPage}
+            onChange={(e) => {
+              setWaitPerPage(Number(e.target.value));
+              setWaitPage(1);
+            }}
+          >
+            <option value={5}>5</option>
+            <option value={10}>10</option>
+            <option value={25}>25</option>
+            <option value={50}>50</option>
+          </select>
+        </div>
+
+        <div className="d-flex align-items-center">
+          <span className="me-3 text-muted">
+            Página {waitPage} de {waitTotalPages} • Mostrando{" "}
+            {waitIndiceInicial + 1}-
+            {Math.min(waitIndiceFinal, filaEsperaFiltrada.length)} de{" "}
+            {filaEsperaFiltrada.length}
+          </span>
+          <nav>
+            <ul className="pagination pagination-sm mb-0">
+              <li className={`page-item ${waitPage === 1 ? "disabled" : ""}`}>
+                <button
+                  className="page-link"
+                  onClick={() => setWaitPage((p) => Math.max(1, p - 1))}
+                >
+                  <i className="bi bi-chevron-left"></i>
+                </button>
+              </li>
+              {gerarNumerosWaitPages().map((pagina) => (
+                <li
+                  key={pagina}
+                  className={`page-item ${
+                    pagina === waitPage ? "active" : ""
+                  }`}
+                >
+                  <button
+                    className="page-link"
+                    onClick={() => setWaitPage(pagina)}
+                  >
+                    {pagina}
+                  </button>
+                </li>
+              ))}
+              <li
+                className={`page-item ${
+                  waitPage === waitTotalPages ? "disabled" : ""
+                }`}
+              >
+                <button
+                  className="page-link"
+                  onClick={() =>
+                    setWaitPage((p) => Math.min(waitTotalPages, p + 1))
+                  }
+                >
+                  <i className="bi bi-chevron-right"></i>
+                </button>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    )}
+  </div>
                       </div>
                     </div>
                   </div>
@@ -688,4 +1001,3 @@ const filteredAppointments = appointmentsOnDay.filter(app =>
 };
 
 export default Agendamento;
-

src/pages/style/Agendamento.css

@@ -43,33 +43,6 @@
   margin-left: 0;
 }
 
-@media (max-width: 576px) {
-  .busca-atendimento {
-    flex-direction: column;
-    gap: 10px;
-  }
-  
-.container-btns-agenda-fila_esepera {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
-  flex-wrap: wrap; /* Adicionado para permitir quebra de linha nos botões */
-}
-
-.btns-gerenciamento-e-consulta {
-  width: 100%;
-  justify-content: space-between;
-  flex-wrap: wrap; /* Adicionado para permitir quebra de linha nos botões */
-}
-
-.btn-adicionar-consulta {
-  padding: 8px 12px; /* Reduzido o padding */
-  font-size: 0.8rem; /* Reduzido o tamanho da fonte */
-  white-space: normal; /* Permite quebra de linha no texto do botão */
-  text-align: center;
-}
-}
-
 .container-btns-agenda-fila_esepera {
   margin-top: 20px;
   margin-left: 0;
@@ -84,7 +57,7 @@
   background-color: transparent;
   border: 0;
   border-bottom: 2px solid transparent;
-  padding: 10px 12px; /* Reduzido o padding */
+  padding: 10px 12px;
   border-radius: 0;
   font-weight: 600;
   color: #718096;
@@ -136,22 +109,8 @@
   margin-top: 20px;
 }
 
-@media (max-width: 768px) {
-  .calendar-wrapper {
-    flex-direction: column;
-    padding: 16px;
-  }
-}
 .calendar-info-panel { flex: 0 0 300px; border-right: 1px solid #E2E8F0; padding-right: 24px; display: flex; flex-direction: column; }
 
-@media (max-width: 768px) {
-  .calendar-info-panel {
-    border-right: none;
-    border-bottom: 1px solid #E2E8F0;
-    padding-right: 0;
-    padding-bottom: 16px;
-  }
-}
 .info-date-display { background-color: #EDF2F7; border-radius: 8px; padding: 12px; text-align: center; margin-bottom: 16px; }
 .info-date-display span { font-weight: 600; color: #718096; text-transform: uppercase; font-size: 0.9rem; }
 .info-date-display strong { display: block; font-size: 2.5rem; font-weight: 700; color: #2D3748; }
@@ -179,13 +138,6 @@
 .nav-buttons button:hover { background-color: #EDF2F7; }
 .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
 
-@media (max-width: 1200px) {
-  .calendar-grid { grid-template-columns: repeat(4, 1fr); }
-}
-
-@media (max-width: 768px) {
-  .calendar-grid { grid-template-columns: repeat(2, 1fr); }
-}
 .day-header { font-weight: 600; color: #718096; text-align: center; padding: 8px 0; font-size: 0.875rem; }
 .day-cell { min-height: 110px; border-radius: 8px; border: 1px solid #E2E8F0; padding: 8px; transition: background-color 0.2s, border-color 0.2s; cursor: pointer; position: relative; }
 .day-cell span { font-weight: 600; color: #4A5568; }
@@ -232,7 +184,6 @@
     color: #C53030;
 }
 
-
 .appointment-item {
     display: flex;
     align-items: center;
@@ -275,87 +226,104 @@
   background-color: #C53030;
 }
 
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 600px; 
+}
+
 @media (max-width: 768px) {
-  .unidade-selecionarprofissional { flex-direction: column; align-items: stretch; gap: 12px; }
+  .busca-atendimento {
-  .calendar-wrapper { flex-direction: column; padding: 16px; }
+    flex-direction: column;
-  .calendar-info-panel { flex: 0 0 auto; border-right: none; border-bottom: 1px solid #E2E8F0; padding-right: 0; padding-bottom: 16px; }
+    gap: 10px;
+  }
+  
+  .container-btns-agenda-fila_esepera {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .btns-gerenciamento-e-consulta {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .btn-adicionar-consulta {
+    padding: 8px 12px;
+    font-size: 0.8rem;
+    white-space: normal;
+    text-align: center;
+  }
+  
+  .unidade-selecionarprofissional { 
+    flex-direction: column; 
+    align-items: stretch; 
+    gap: 12px; 
+  }
+  
+  .calendar-wrapper {
+    flex-direction: column;
+    padding: 16px;
+  }
+  
+  .calendar-info-panel {
+    border-right: none;
+    border-bottom: 1px solid #E2E8F0;
+    padding-right: 0;
+    padding-bottom: 16px;
+  }
+  
   .calendar-grid { grid-template-columns: repeat(4, 1fr); }
   .calendar-controls { flex-direction: column; align-items: flex-start; gap: 8px; }
 }
-
 @media (max-width: 576px) {
-  .calendar-grid { grid-template-columns: 1fr; } /* 1 coluna em telas muito pequenas */
+  .calendar-grid { grid-template-columns: 1fr; } 
   .date-indicator h2 { font-size: 1.25rem; }
   .legend-item { font-size: 0.75rem; padding: 4px 8px; }
   .appointment-item { flex-direction: column; align-items: stretch; gap: 8px; }
   .appointment-actions { width: 100%; }
   .btn-action { width: 100%; }
 }
-.btn-adicionar-consulta {
+
-  background-color: #2a67e2;
+@media (max-width: 425px) {
-  color: #fff;
+  .calendar-main {
-  padding: 10px 24px;
+    overflow-x: auto;
+  }
+  .calendar-grid {
+    min-width: 400px;
+    grid-template-columns: repeat(7, 1fr); 
+  }
+  .day-cell {
+    min-height: 80px; 
+  }
+  
+  
+  .table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    border: 1px solid #E2E8F0;
     border-radius: 8px;
-  border: none;
+    margin-bottom: 16px;
-  font-weight: 600;
+  }
-  font-size: 1rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-.btn-adicionar-consulta:hover {
-  background-color: #1d4ed8;
-}
-.btn-adicionar-consulta i {
-  font-size: 1.2em;
-  vertical-align: middle;
-}
-.btn-adicionar-consulta i {
-  font-size: 1.2em;        
-  vertical-align: middle;  
-  display: flex;           
-  align-items: center;
-  justify-content: center;
-}
-.container-btns-agenda-fila_esepera {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 15px 0 20px;
-  color: #fff;
-}
   
-.tabs-agenda-fila {
+  table {
-  display: flex;
+    min-width: 600px; 
-  gap: 10px;
+    font-size: 0.875rem; 
-}
+  }
   
-.btns-gerenciamento-e-consulta {
+  table th,
-  display: flex;
+  table td {
-  gap: 10px;
+    padding: 8px; 
-  flex-wrap: wrap; /* Permite quebra de linha */
+    white-space: nowrap; 
 }
-.container-btns-agenda-fila_esepera {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 0 0 8px;   
-}
-
-
-.calendario-ou-filaespera {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-
-.calendar-wrapper {
-  margin-top: 0;
-}
-.calendar-legend {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;   /* afasta dos filtros acima */
 }