Final estilização do form de agendamento

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -98,6 +98,7 @@ const FormNovaConsulta = ({ onCancel }) => {
             <div className='campo-de-input'>
               <label>Unidade *</label>
               <select name="unidade">
+                <option value="" disabled invisible>Selecione sua unidade</option>
                 <option value="centro">Núcleo de Especialidades Integradas</option>
                 <option value="leste">Unidade Leste</option>
               </select>

src/components/AgendarConsulta/style/formagendamentos.css

@@ -123,7 +123,8 @@
   margin-top: 10px;
   display: flex;
   flex-direction: row;
-  gap: rem;
+  gap: 4rem;
+
 }
 
 textarea{
@@ -132,14 +133,30 @@ textarea{
   
 }
 
-#informacoes-atendimento-segunda-linha-esquerda input{
+.campos-informacoes-paciente,
-  width: 200px;
+.campo-informacoes-atendimento {
+  display: flex;
+  gap: 16px;              /* espaço entre campos */
 }
 
-input[type='text']{
+.campo-de-input {
-  width: 600px;
+  flex: 1;                /* todos os filhos ocupam mesmo espaço */
+  display: flex;
+  flex-direction: column; /* mantém label em cima do input */
 }
 
-select[name='solicitante']{
+#informacoes-atendimento-segunda-linha-esquerda select[name="unidade"]{
   width: 300px;
 }
+
+input[type="time"]{
+  width: 150px;
+}
+
+select[name=solicitante]{
+  width: 190px;
+}
+
+.campo-de-input{
+  width:120%
+}

src/pages/Agendamento.jsx

@@ -10,6 +10,11 @@ import "./style/Agendamento.css";
 
 const Agendamento = () => {
 
+  const [FiladeEspera, setFiladeEspera] = useState(false)
+  const [tabela, setTabela] = useState('diario')
+  const [PageNovaConsulta, setPageConsulta] = useState(false)
+
+
   
     const ListarDiasdoMes = (ano, mes) => {
       let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
@@ -54,8 +59,6 @@ const Agendamento = () => {
       return ListaDiasDatas
       }
 
-  const [tabela, setTabela] = useState('diario')
-  const [PageNovaConsulta, setPageConsulta] = useState(false)
 
   const handleClickAgendamento = (agendamento) => {
   
@@ -76,6 +79,7 @@ const Agendamento = () => {
   <div>
     <h1>Agendar nova consulta</h1>
 
+
   {!PageNovaConsulta? (
     
     <div className='atendimento-eprocura'>
@@ -106,25 +110,36 @@ const Agendamento = () => {
         </select>
 
         <input type="text" placeholder='Selecionar profissional' />
-
       </div>
 
-    <div className='diadia'>
-      <div>
-        <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
  
-        onClick={() => setTabela("diario")}>
+    <div className='diadia'>
-          <i className="fa-solid fa-calendar-day"></i>
+      
-          Dia
+      
-        </button>
+      
-        <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
+      <div>
-          <i className="fa-solid fa-calendar-day"></i>
+        <section className='botões-container'>
-          Semana
+       
-        </button>
+        <div>
-        <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
+          <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
-          <i className="fa-solid fa-calendar-day"></i>
+          
-          Mês
+          onClick={() => setTabela("diario")}>
-        </button>
+            <i className="fa-solid fa-calendar-day"></i>
+            Dia
+          </button>
+          <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Semana
+          </button>
+          <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Mês
+          </button>
+        </div>
+         <div className='botão-fila-espera'>
+         <button onClick={ () => setFiladeEspera(true)}>Abrir fila de espera</button>
+        </div>
+        </section>
 
         <div className='legenda-tabela'>
           <div className='legenda-item-realizado'>
@@ -143,6 +158,8 @@ const Agendamento = () => {
           </div>
         </div>
       
+
+
         {tabela === "diario" && (
           <TabelaAgendamentoDia
             handleClickAgendamento={handleClickAgendamento}

src/pages/style/Agendamento.css

@@ -89,8 +89,8 @@
 
 .legenda-tabela{
   display: flex;
-  justify-content: flex-end;
+  
-  margin-top: 10px;
+  margin-top: 30px;
   margin-bottom: 10px;
   gap: 15px;
 }
@@ -142,3 +142,10 @@
   font-weight: bold;
   border-radius: 10px;
 }
+
+.botões-container{
+  
+  display: flex;
+
+  justify-content: space-between;
+}