fixed error mesa

app/(private)/ActivosMantenimiento/page.tsx

@@ -2,6 +2,11 @@ import Areas from "@/app/Components/ActivosMantenimiento/Areas";
 import MesasDisponibles from "@/app/Components/ActivosMantenimiento/MesasDisponibles";
 import TableEquipos from "@/app/Components/Equipos/tableequipos";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "ActivosMantenimiento",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/AgregarTiempo/addTime.css

@@ -63,10 +63,15 @@
   background-repeat: no-repeat;
 }
 
-@media(max-height:550px) {
+@media(max-height:800px) {
   .addTime {
     margin-top: 0.5rem;
     padding: 0.5rem;
+    max-width: 320px;
+  }
+
+  .firstPartInformationTime {
+    max-width: 320px;
   }
 }
 

app/(private)/AgregarTiempo/page.tsx

@@ -8,9 +8,14 @@ import AddTime from "./Addtime";
 import Table from "@/app/Components/Global/table";
 
 import "./addTime.css";
+import { Metadata } from "next";
 
 const headers = ["Inscrito", "Tiempo", "Confirmó"];
 
+export const metadata: Metadata = {
+  title: "AgregarTiempo",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{ numAcount: string }>;
 }) {

app/(private)/Alta/page.tsx

@@ -1,6 +1,11 @@
 import RegisterAlta from "@/app/Components/Alta/registerAlta";
 
 import "./style.css";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Alta",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/AsignacionEquipo/page.tsx

@@ -10,9 +10,14 @@ import { GetRegisterStudent } from "@/app/lib/getRegisterStudent";
 import PlaticaGate from "./PlaticaGate";
 import "@/app/globals.css";
 import { GetRegisterStudentSancion } from "@/app/lib/GetRegisterStudentSancion";
+import { Metadata } from "next";
 
 const headers = ["Inscrito", "Tiempo", "Confirmó"];
 
+export const metadata: Metadata = {
+  title: "AsignacionEquipo",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;

app/(private)/AsignacionMesas/TableMesas.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import styles from "../Monitor/Page.module.css";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+type Mesa = {
+  id_mesa: number;
+  ocupado: number;
+};
+
+export default function TableMesas() {
+  const [mesas, setMesas] = useState<Mesa[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const token = Cookies.get("token");
+  const headers = { Authorization: `Bearer ${token}` };
+
+  const fetchMesas = async () => {
+    try {
+      const res = await axios.get(
+        `${process.env.NEXT_PUBLIC_API_URL}/mesa/usoWhitout`,
+        { headers },
+      );
+
+      setMesas(res.data);
+    } catch (error) {
+      console.error("Error cargando mesas:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchMesas();
+  }, []);
+
+  if (loading) {
+    return <div className={styles.tableContainer}>
+      <table className={styles.machineTable}>
+        <thead>
+          <tr>
+            <th>Cargando mesas...</th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  }
+
+  return (
+    <div className={styles.tableContainer}>
+      <table className={styles.machineTable}>
+        <thead>
+          <tr>
+            <th>ID Mesa</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {mesas.map((mesa) => (
+            <tr key={mesa.id_mesa} className={!mesa.ocupado ? '' : styles.ocupado}>
+              <td>{mesa.id_mesa}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

app/(private)/AsignacionMesas/page.tsx

@@ -4,18 +4,23 @@ import Information from "@/app/Components/Global/Information/information";
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import ShowError from "@/app/Components/Global/ShowError";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
+import TableMesas from "./TableMesas";
 
 import { GetRegisterStudent } from "@/app/lib/getRegisterStudent";
 import { GetRegisterStudentSancion } from "@/app/lib/GetRegisterStudentSancion";
-import TableTable from "../Monitor/TableTable";
+import { Metadata } from "next";
 
 import './asignacion.css'
 
+export const metadata: Metadata = {
+  title: "AsignacionMesas",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;
     numAcount?: string;
-    table?: number
+    table?: string
   }>;
 }) {
   const params = await props.searchParams;
@@ -95,7 +100,7 @@ export default async function Page(props: {
           ]}
         />
         <div className="tableTable">
-          <TableTable />
+          <TableMesas key={Date.now()}/>
         </div>
       </div>
     </section>

app/(private)/BitacoraSanciones/page.tsx

@@ -8,6 +8,11 @@ import ShowError from "@/app/Components/Global/ShowError";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import QuitarSancion from "@/app/Components/QuitarSancion/QuitarSancion";
 import { GetStudentWhitoutSancion } from "@/app/lib/getStudentWhitoutSancion";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "BitacoraSanciones",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/CambiarPass/page.tsx

@@ -1,4 +1,9 @@
 import ChangePassword from "@/app/Components/auth/ChangePassword/changePassword";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "CambiarPass",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/Impresiones/page.tsx

@@ -10,6 +10,11 @@ import { getCost } from "@/app/lib/getCost";
 import { GetStudentWhitoutSancion } from "@/app/lib/getStudentWhitoutSancion";
 
 import "@/app/globals.css";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Impresiones",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/InformacionEquipo/page.tsx

@@ -1,7 +1,12 @@
+import { Metadata } from "next";
 import InformacionEquipo from "./InformacionEquipo";
 
 import "./informacionequipo.css";
 
+export const metadata: Metadata = {
+  title: "InformacionEquipo",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;

app/(private)/Inscripcion/inscripcion.css

@@ -3,7 +3,7 @@
   top: 0;
   background-color: #ffffff;
   width: 100%;
-  max-width: 700px;
+  max-width: 600px;
   border-radius: 4px;
   padding: 1rem;
   margin-top: 1rem;
@@ -28,8 +28,13 @@
   height: fit-content;
 }
 
-@media(max-height:550px) {
+@media(max-height:800px) {
+  .firstPartInformation {
+    max-width: 320px;
+  }
+
   .inscripcion {
+    max-width: 400px;
     padding: 0.5rem;
     margin-top: 0.5rem;
   }

app/(private)/Inscripcion/page.tsx

@@ -9,9 +9,14 @@ import { GetRegisterStudent } from "@/app/lib/getRegisterStudent";
 import { GetStudentWhitoutSancion } from "@/app/lib/getStudentWhitoutSancion";
 
 import "./inscripcion.css";
+import { Metadata } from "next";
 
 const headers = ["Inscrito", "Tiempo", "Confirmó"];
 
+export const metadata: Metadata = {
+  title: "Inscripcion",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     numAcount: string;

app/(private)/Inscritos/page.tsx

@@ -1,5 +1,10 @@
+import { Metadata } from "next";
 import Inscripciones from "./Inscripciones";
 
+export const metadata: Metadata = {
+  title: "Inscritos",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     period: string;

app/(private)/Mensajes/page.tsx

@@ -1,6 +1,11 @@
 import EnviarMensaje from "@/app/Components/EviarMensaje/EnviarMensaje";
 import EnviarMensajeSala from "@/app/Components/EviarMensaje/EnviarMensajeSala";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Mensajes",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/Monitor/page.tsx

@@ -1,10 +1,13 @@
-import Toggle from "@/app/Components/Global/Toggle/Toggle";
-import MachineTable from "./MachineTable";
 import styles from "./Page.module.css";
 import MachineTableActive from "./MachineTableActive";
 import DSC from "./DSC";
 import ToggleTable from "@/app/Components/Global/Toggle/ToggleTable";
 import TableTable from "./TableTable";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Monitor",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{ numAcount: string; key: string }>;

app/(private)/Periodo-Graficas/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { envConfig } from "@/app/lib/config";
+import axios from "axios";
+import Cookies from "js-cookie";
+import { Metadata } from "next";
+
+interface TotalServicioPeriodo {
+  nombre_servicio: string;
+  periodo: string;
+  monto_total: number;
+}
+
+interface Servicio {
+  id_servicio: number;
+  servicio: string;
+}
+
+interface Periodo {
+  id_periodo: number;
+  semestre: string;
+}
+
+export default function ReporteTotalesPage() {
+  const [totales, setTotales] = useState<TotalServicioPeriodo[]>([]);
+  const [servicios, setServicios] = useState<Servicio[]>([]);
+  const [periodos, setPeriodos] = useState<Periodo[]>([]);
+  const [cargando, setCargando] = useState(true);
+
+  const [periodoInicio, setPeriodoInicio] = useState<string>("");
+  const [periodoFin, setPeriodoFin] = useState<string>("");
+  const [servicioId, setServicioId] = useState<string>("");
+
+  const token = Cookies.get("token");
+  const headers = { Authorization: `Bearer ${token}` };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [serviciosRes, periodosRes] = await Promise.all([
+          axios.get(`${envConfig.apiUrl}/servicio`, { headers }),
+          axios.get(`${envConfig.apiUrl}/periodo`, { headers }),
+        ]);
+        setServicios(serviciosRes.data);
+        setPeriodos(periodosRes.data);
+      } catch (error) {
+        console.error("Error al cargar servicios o periodos", error);
+      }
+    };
+    fetchData();
+  }, []);
+
+  const obtenerTotales = async () => {
+    setCargando(true);
+    try {
+      // Construir query params
+      const params = new URLSearchParams();
+      if (periodoInicio) params.append("periodoInicio", periodoInicio);
+      if (periodoFin) params.append("periodoFin", periodoFin);
+      if (servicioId) params.append("servicioId", servicioId);
+
+      const url = `${envConfig.apiUrl}/detalle-servicio/totales-por-periodo?${params.toString()}`;
+      const res = await axios.get(url, { headers });
+      setTotales(res.data);
+    } catch (error) {
+      console.error("Error al obtener totales", error);
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  const aplicarFiltros = () => {
+    obtenerTotales();
+  };
+
+  return (
+    <div>
+      <h1 style={{ color: "rgb(3, 1, 72)" }}>REPORTE DE TOTALES POR SERVICIO Y PERIODO</h1>
+
+      <div style={{ marginBottom: "20px", display: "flex", gap: "10px", flexWrap: "wrap" }}>
+        <select
+          value={periodoInicio}
+          onChange={(e) => setPeriodoInicio(e.target.value)}
+        >
+          <option value="">Periodo inicio (todos)</option>
+          {periodos.map((p) => (
+            <option key={p.id_periodo} value={p.id_periodo}>
+              {p.semestre}
+            </option>
+          ))}
+        </select>
+
+        <select
+          value={periodoFin}
+          onChange={(e) => setPeriodoFin(e.target.value)}
+        >
+          <option value="">Periodo fin (todos)</option>
+          {periodos.map((p) => (
+            <option key={p.id_periodo} value={p.id_periodo}>
+              {p.semestre}
+            </option>
+          ))}
+        </select>
+
+        <select
+          value={servicioId}
+          onChange={(e) => setServicioId(e.target.value)}
+        >
+          <option value="">Todos los servicios</option>
+          {servicios.map((s) => (
+            <option key={s.id_servicio} value={s.id_servicio}>
+              {s.servicio}
+            </option>
+          ))}
+        </select>
+
+        <button onClick={aplicarFiltros}>Filtrar</button>
+      </div>
+
+      {cargando ? (
+        <p>Cargando...</p>
+      ) : (
+        <div style={{ overflow: "auto", maxHeight: "500px" }}>
+          <table>
+            <thead>
+              <tr>
+                <th>Servicio</th>
+                <th>Periodo</th>
+                <th>Monto Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              {totales.map((item, index) => (
+                <tr key={index}>
+                  <td>{item.nombre_servicio}</td>
+                  <td>{item.periodo}</td>
+                  <td>${item.monto_total.toFixed(2)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

app/(private)/Periodo/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { envConfig } from "@/app/lib/config";
 import axios from "axios";
 import Cookies from "js-cookie";
+import { Metadata } from "next";
 
 interface Periodo {
   id_periodo: number;
@@ -15,6 +16,7 @@ interface Periodo {
     data: number[];
   };
 }
+
 export default function PeriodoPage() {
 
   const [periodos, setPeriodos] = useState<Periodo[]>([]);
@@ -208,4 +210,5 @@ export default function PeriodoPage() {
       </div>
     </div>
   );
-}
+}
+//IO

app/(private)/Programas/page.tsx

@@ -6,6 +6,7 @@ import styleprograms from "./programas.module.css";
 import axios from "axios";
 import Swal from "sweetalert2";
 import Cookies from "js-cookie";
+import { Metadata } from "next";
 
 interface Programa {
   id_programa: number;

app/(private)/QuitarSancion/page.tsx

@@ -1,5 +1,10 @@
 import ShowError from "@/app/Components/Global/ShowError";
 import { GetSancionByStudent } from "@/app/lib/getSancionByStudent";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "QuitarSancion",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/Reportes/page.tsx

@@ -1,5 +1,10 @@
+import { Metadata } from 'next';
 import ReportesClient from './ReportesClient';
 
+export const metadata: Metadata = {
+  title: "Reportes",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     key: string;

app/Components/AsignacionMesas.tsx

@@ -4,10 +4,11 @@ import { useEffect, useState } from "react";
 import { envConfig } from "@/app/lib/config";
 import { getEquipoByCount } from "../lib/getEquipoByCount";
 import { getMesaByCount } from "../lib/getMesaByCount";
+import { useRouter } from "next/navigation";
+
 import Swal from "sweetalert2";
 import axios from "axios";
 import Cookies from "js-cookie";
-import { useRouter } from "next/navigation";
 
 type Props = {
   inscripcion: any[];
@@ -130,6 +131,7 @@ export default function AsignacionMesas({ idCuenta, inscripcion }: Props) {
 
       setBitacora([]);
       router.refresh();
+      setError("Mesa")
       Swal.fire({
         title: "Mesa asignada correctamente!",
         icon: "success",

app/Components/CheckBoxEquipo.tsx

@@ -37,7 +37,7 @@ interface Props {
 }
 
 export default function CheckBoxEquipo({ numAcount, machine }: Props) {
-  const [modo, setModo] = useState<"Equipo" | "Cuenta">("Cuenta");
+  const [modo, setModo] = useState<"Equipo" | "Cuenta">("Equipo");
 
   const [bitacoraCuenta, setBitacoraCuenta] = useState<any>(null);
   const [bitacoraEquipo, setBitacoraEquipo] = useState<any>(null);

app/Components/CheckBoxMesa.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { getTableByCount } from "../lib/getTableByCount";
 import { envConfig } from "../lib/config";
 import { getMesaByCount } from "../lib/getMesaByCount";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import SearchUser from "./Global/SearchUser/searchUser";
 import Information from "./Global/Information/information";
@@ -15,11 +15,11 @@ import Cookies from "js-cookie";
 
 interface props {
   numAcount: string | null;
-  table: number | null;
+  table: string | null;
 }
 
 export default function CheckBoxMesa({ numAcount, table }: props) {
-  const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>("Cuenta");
+  const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>("Mesa");
   const [bitacoraMesa, setBitacoraMesa] = useState<any>(null);
   const [bitacoraCuenta, setBitacoraCuenta] = useState<any>(null);
   const [tiempoRestante, setTiempoRestante] = useState<string>("");
@@ -31,6 +31,9 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
   const bitacora = modo === "Cuenta" ? bitacoraCuenta : bitacoraMesa;
 
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const params = new URLSearchParams(searchParams.toString());
 
   const fetchByCuenta = async (idCuenta: number) => {
     const result = await getMesaByCount(idCuenta);
@@ -62,13 +65,15 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
     if (isNaN(idCuenta)) return;
 
     fetchByCuenta(idCuenta);
-  }, [numAcount]);
+  }, [numAcount, modo]);
 
   useEffect(() => {
+    setBitacoraMesa(null);
+    params.delete("numAcount");
+    router.push(`${pathname}?${params.toString()}`);
     if (modo !== "Mesa" || !table) return;
-    const idEquipo = table;
+    const idEquipo = parseInt(table);
     if (isNaN(idEquipo)) return;
-
     fetchByMesa(idEquipo);
   }, [table]);
 
@@ -132,15 +137,22 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
 
       if (modo === "Cuenta" && numAcount) {
         fetchByCuenta(parseInt(numAcount));
+        params.delete("numAcount");
+        router.push(`${pathname}?${params.toString()}`);
       }
 
       if (modo === "Mesa" && table) {
-        fetchByMesa(table);
+        fetchByMesa(parseInt(table));
+        params.delete("table");
+        router.push(`${pathname}?${params.toString()}`);
       }
 
       router.refresh();
+
       setBitacoraMesa(null);
       setBitacoraCuenta(null);
+      setErrorMesa('Alumno sin mesa');
+
     } catch (error) {
       Swal.fire({
         title: "Error al cancelar tiempo",
@@ -202,9 +214,10 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
           )}
         </>
       }
+
       {modo === "Mesa" &&
         <>
-          <SearchMesa />
+          <SearchMesa value={table ?? null} />
           <h2 style={{ marginTop: "10px" }}>{errorMesa}</h2>
 
           {bitacoraMesa && tiempoRestante !== "agotado" && (

app/Components/Global/Information/information.tsx

@@ -15,7 +15,7 @@ export default function Information(props: InformationProps) {
         {entries.map(([key, value]) => (
           <li key={key} className="informationItem">
             <span className="informationKey">{key}</span>
-            <span className="informationValue">{value}</span>
+            <span className={`informationValue ${key}`}>{value}</span>
           </li>
         ))}
       </ul>

app/Components/Global/table.module.css

@@ -44,9 +44,11 @@
   margin-right: 6px;
   vertical-align: middle;
 }
-@media(max-height:550px) {
+
+@media(max-height:800px) {
   .tableContainer {
     margin-top: 1.5rem;
+    max-width: 320px;
   }
 }
 

app/Components/SearchMesa.tsx

@@ -1,15 +1,28 @@
 "use client";
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
+interface urlProp {
+  value: string | null;
+}
 
-export default function SearchMesa() {
+export default function SearchMesa(props: urlProp) {
   const [inputValue, setInputValue] = useState("");
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+    useEffect(() => {
+      if (props.value) {
+        setInputValue(props.value);
+      }
+  
+      if(props.value===null){
+        setInputValue("")
+      }
+    }, [props.value]);
+
   const buscar = (e: React.FormEvent) => {
     e.preventDefault();
     const params = new URLSearchParams(searchParams.toString());

app/Components/auth/Login/Login.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { useState } from "react";
 import { loginUser } from "@/app/lib/login";
 import { useRouter } from "next/navigation";
@@ -47,12 +48,9 @@ export default function Login() {
       const token = data.access_token;
       const payload = JSON.parse(atob(token.split(".")[1]));
       const usuario = payload.usuario;
-      const role = payload.role;
 
       document.cookie = `token=${token}; path=/; SameSite=Strict`;
       document.cookie = `user=${usuario}; path=/; SameSite=Strict`;
-      document.cookie = `role=${role}; path=/; SameSite=Strict`;
-
 
       Swal.fire({
         title: "Inicio de sesión exitoso!",

app/Components/auth/Logout/Logout.css

@@ -24,6 +24,7 @@
   border-radius: 6px;
   padding: 6px 12px;
   z-index: 1;
+  outline: 1px solid #cfcfcf;
 }
 
 @media(max-height: 800px) {

app/Components/layout/BarNavigation/BarNavigation.css

@@ -172,6 +172,7 @@ tbody {
     position: absolute;
     top: 76px;
     left: 0;
+    top: 100%;
     width: 100%;
     background-color: #fff;
     flex-direction: column;

app/globals.css

@@ -362,8 +362,13 @@ a {
 }
 
 .informationValue {
-  color: #555;
-  font-size: 1.25rem;
+  color: #000000;
+  font-size: 1.5rem;
+}
+
+.Credito {
+  font-weight: bold;
+  font-size: 2rem;
 }
 
 .title {
@@ -399,7 +404,7 @@ form {
 .toggleSection {
   width: 100%;
   max-width: fit-content;
-  min-width: 750px;
+  min-width: 600px;
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -496,7 +501,7 @@ thead tr {
   background-color: #2563eb;
   position: relative;
   z-index: 1;
-}  
+}
 
 tbody tr {
   transition: transform 0.3s ease, opacity 0.3s ease;
@@ -677,7 +682,7 @@ table td:last-child {
   }
 
   .informationValue {
-    font-size: 1rem;
+    font-size: 1.01rem;
   }
 
   .informationItem {
@@ -687,7 +692,6 @@ table td:last-child {
   input,
   select {
     padding: 0.5rem;
-    font-size: 1.3rem;
     height: 3rem;
   }
 
@@ -727,6 +731,27 @@ table td:last-child {
     height: 30px;
   }
 
+  .information {
+    max-width: 320px;
+
+  }
+
+  .containerForm {
+    max-width: 320px;
+  }
+
+  .Credito {
+    font-size: 1.5rem;
+  }
+
+  table th,
+  table td {
+    padding: 0.65rem 1rem;
+  }
+
+  .toggleSection {
+    min-width: 570px;
+  }
 }
 
 @media (max-height: 960px) {

app/layout.tsx

@@ -9,11 +9,14 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"], weight: ["400", "700"] });
 
 export const metadata: Metadata = {
-  title: "Servicio AT",
+  title: {
+    default: "Servicio AT",
+    template: "Servicio AT | %s",
+  },
   description: "Servicio de administracion de la FES Acatlan",
   authors: [{ name: "FES Acatlán" }],
   creator: "Lino,Carlos,Axel",
-    icons: {
+  icons: {
     icon: "/icon.svg",
   },
 };
@@ -26,9 +29,9 @@ export default function RootLayout({
   return (
     <html lang="es">
       <body className={inter.className} suppressHydrationWarning>
-          <Header />
-          <main>{children}</main>
-          <Footer />
+        <Header />
+        <main>{children}</main>
+        <Footer />
       </body>
     </html>
   );