just fixed styles

app/(private)/AsignacionEquipo/asignacion.css

@@ -6,6 +6,7 @@
   width: 100%;
   font-size: 14px;
   margin-bottom: 1rem;
+  max-width: 500px;
 }
 
 .customSelect.disabled {

app/(private)/InformacionEquipo/informacionequipo.css

@@ -25,7 +25,7 @@
 
 .form-container select {
   font-size: 13px;
-  padding: 4px 8px;
+  padding: 8px 12px;
   border: 1px solid #ccc;
   border-radius: 6px;
   outline: none;

app/(private)/Monitor/DSC.tsx

@@ -1,85 +1,144 @@
 'use client';
 
-type EstadoPC = 'libre' | 'ocupada' | 'fallo';
-
-const colores: Record<EstadoPC, string> = {
-  libre: '#22c55e',    // verde
-  ocupada: '#ef4444',  // rojo
-  fallo: '#facc15',    // amarillo
-};
-
-const pcs = [
-  {
-    id: 'PC-01',
-    x: 120,
-    y: 180,
-    width: 40,
-    height: 40,
-    estado: 'libre' as EstadoPC,
-  },
-  {
-    id: 'PC-02',
-    x: 170,
-    y: 180,
-    width: 40,
-    height: 40,
-    estado: 'ocupada' as EstadoPC,
-  },
-  {
-    id: 'PC-03',
-    x: 220,
-    y: 180,
-    width: 40,
-    height: 40,
-    estado: 'fallo' as EstadoPC,
-  },
-];
-
 export default function DSC() {
   return (
-    <svg viewBox="0 0 1500 900" width="100%" height="auto">
+    <svg viewBox="0 0 1600 1000">
 
-      {/* FONDO */}
-      <image
-        href="/plano.svg"
-        width="100%"
-        height="100%"
-        preserveAspectRatio="xMidYMid meet"
-        pointerEvents="none"
+      {/* CONTORNO EXTERIOR */}
+      <rect
+        x="20"
+        y="20"
+        width="1560"
+        height="960"
+        fill="none"
+        stroke="black"
+        strokeWidth="4"
       />
 
-      {/* CAPA INTERACTIVA */}
-      <g>
-        {pcs.map(pc => (
-          <g key={pc.id}>
-            {/* CUADRO */}
-            <rect
-              x={pc.x}
-              y={pc.y}
-              width={pc.width}
-              height={pc.height}
-              fill={colores[pc.estado]}
-              stroke="#bb4242"
-              strokeWidth={1}
-              rx={4}
-              style={{ cursor: 'pointer' }}
-              onClick={() => console.log(pc.id)}
-            />
+      {/* ===== BLOQUE SUPERIOR IZQUIERDO (AULAS Y SALAS) ===== */}
 
-            {/* NÚMERO */}
-            <text
-              x={pc.x + pc.width / 2}
-              y={pc.y + pc.height / 2 + 5}
-              textAnchor="middle"
-              fontSize={12}
-              fill="#000"
-              pointerEvents="none"
-            >
-              {pc.id.replace('PC-', '')}
-            </text>
-          </g>
-        ))}
-      </g>
+      <rect x="40" y="40" width="400" height="180"
+        fill="none" stroke="black" strokeWidth="2" />
+      <text x="240" y="30" textAnchor="middle" fontSize="18" fontWeight="bold">
+        AULA 5
+      </text>
+
+      <rect x="40" y="220" width="400" height="150"
+        fill="none" stroke="black" strokeWidth="2" />
+      <text x="240" y="210" textAnchor="middle" fontSize="16">
+        SALA USOS MÚLTIPLES
+      </text>
+
+      <rect x="40" y="370" width="400" height="150"
+        fill="none" stroke="black" strokeWidth="2" />
+      <text x="240" y="360" textAnchor="middle" fontSize="16">
+        SALA DE ENTRENAMIENTO
+      </text>
+
+      {/* ===== BLOQUE CENTRAL WINDOWS ===== */}
+
+      <rect x="460" y="40" width="700" height="450"
+        fill="none" stroke="black" strokeWidth="3" />
+      <text x="810" y="30" textAnchor="middle" fontSize="22" fontWeight="bold">
+        ÁREA WINDOWS
+      </text>
+
+      {/* División interna Windows */}
+      <line x1="460" y1="260" x2="1160" y2="260"
+        stroke="black" strokeWidth="2" />
+
+      {/* ===== BLOQUE DERECHO MAC ===== */}
+
+      <rect x="1200" y="40" width="350" height="300"
+        fill="none" stroke="black" strokeWidth="3" />
+      <text x="1375" y="30" textAnchor="middle" fontSize="22" fontWeight="bold">
+        ÁREA MAC
+      </text>
+
+      {/* ===== ROBÓTICA ===== */}
+
+      <rect x="1200" y="360" width="350" height="200"
+        fill="none" stroke="black" strokeWidth="3" />
+      <text x="1375" y="350" textAnchor="middle" fontSize="18" fontWeight="bold">
+        ROBÓTICA
+      </text>
+
+      {/* ===== ADMINISTRACIÓN Y OFICINAS ===== */}
+
+      <rect x="460" y="520" width="300" height="150"
+        fill="none" stroke="black" strokeWidth="2" />
+      <text x="610" y="510" textAnchor="middle" fontSize="16">
+        ADMINISTRACIÓN
+      </text>
+
+      <rect x="780" y="520" width="200" height="150"
+        fill="none" stroke="black" strokeWidth="2" />
+      <text x="880" y="510" textAnchor="middle" fontSize="16">
+        ASIGNACIÓN
+      </text>
+
+      <rect x="1000" y="520" width="200" height="150"
+        fill="none" stroke="black" strokeWidth="2" />
+      <text x="1100" y="510" textAnchor="middle" fontSize="16">
+        IMPRESIÓN
+      </text>
+
+      {/* ===== CUBÍCULOS ===== */}
+
+      {Array.from({ length: 8 }).map((_, i) => (
+        <rect
+          key={i}
+          x={460 + i * 90}
+          y={700}
+          width="80"
+          height="120"
+          fill="none"
+          stroke="black"
+          strokeWidth="2"
+        />
+      ))}
+
+      <text x="460" y="690" fontSize="14">
+        CUBÍCULOS 1–8
+      </text>
+
+      {/* ===== SANITARIOS ===== */}
+
+      <rect x="40" y="600" width="200" height="200"
+        fill="none" stroke="black" strokeWidth="2" />
+      <text x="140" y="590" textAnchor="middle" fontSize="16">
+        SANITARIO HOMBRES
+      </text>
+
+      <rect x="260" y="600" width="200" height="200"
+        fill="none" stroke="black" strokeWidth="2" />
+      <text x="360" y="590" textAnchor="middle" fontSize="16">
+        SANITARIO MUJERES
+      </text>
+
+      {/* ===== SALIDA EMERGENCIA ===== */}
+
+      <text
+        x="1530"
+        y="900"
+        transform="rotate(-90 1530,900)"
+        fontSize="16"
+        fontWeight="bold"
+      >
+        SALIDA DE EMERGENCIA
+      </text>
+
+      {/* ===== ENTRADA PRINCIPAL ===== */}
+
+      <text
+        x="800"
+        y="960"
+        textAnchor="middle"
+        fontSize="20"
+        fontWeight="bold"
+      >
+        ENTRADA Y SALIDA PRINCIPAL
+      </text>
 
     </svg>
   );

app/(private)/Monitor/page.tsx

@@ -3,6 +3,7 @@ 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";
 
 export default async function Page(props: {
   searchParams?: Promise<{ numAcount: string; key: string }>;
@@ -18,7 +19,7 @@ export default async function Page(props: {
       <div className={styles.actions}>
         <button className={styles.resetButton}>Actualizar información</button>
       </div>
-      <Toggle
+      <ToggleTable
         defaultView={key}
         options={[
           {

app/Components/BitacoraSanciones/BitacoraEquipo.tsx

@@ -1,6 +1,10 @@
 "use client";
 import SearchDate from "../SearchDate/SearchDate";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+import "../../(private)/AsignacionEquipo/asignacion.css"
+import { envConfig } from "@/app/lib/config";
+import axios from "axios";
 
 interface equipos {
   hora_entrada: string;
@@ -11,22 +15,75 @@ interface equipos {
 
 function BitacoraEquipo() {
   const [equipo, setEquipo] = useState<equipos[]>([]);
-  const [ubicacion_equipo, setUbicacionEquipo] = useState("");
+  const [open, setOpen] = useState(false);
+  const [loadingEquipos, setLoadingEquipos] = useState(false);
+  const [equipoSeleccionado, setEquipoSeleccionado] = useState<any>(null);
+  const [equipos, setEquipos] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoadingEquipos(true);
+      const response = await axios.get(`${envConfig.apiUrl}/equipo`);
+      setEquipos(response.data);
+      setLoadingEquipos(false);
+    };
+
+    fetchData();
+  }, []);
+
   return (
     <>
-      <form className="containerForm">
-        <label className="label">Ubicacion de equipo</label>
+      <label>Seleccione un equipo</label>
 
-        <div className="groupInput">
-          <select
-            value={ubicacion_equipo}
-            onChange={(e) => setUbicacionEquipo(e.target.value)}
+      <div className="groupInput">
+        <div
+          className={`customSelect ${open ? "open" : ""} ${loadingEquipos ? "disabled" : ""}`}
+        >
+          <div
+            className={`selectHeader ${equipoSeleccionado && equipoSeleccionado.plataforma?.nombre?.toUpperCase()}`}
+            onClick={() => !loadingEquipos && setOpen(!open)}
           >
-            <option value="">-- Selecciona un equipo --</option>
-            <option value="255">Equipo 255</option>
-          </select>
+            {equipoSeleccionado ? (
+              <span
+              >
+                {equipoSeleccionado.ubicacion}{" "}
+                {equipoSeleccionado.nombre_equipo}
+              </span>
+            ) : (
+              <span className="placeholder">
+                {loadingEquipos
+                  ? "Cargando equipos..."
+                  : "Seleccione un equipo"}
+              </span>
+            )}
+
+            <span className="arrow">{open ? "▲" : "▼"}</span>
+          </div>
+
+          {open && (
+            <div className="options" style={{ bottom: "auto"}}>
+              {equipos.length === 0 && (
+                <div className="option disabled">
+                  No hay equipos disponibles
+                </div>
+              )}
+
+              {equipos.map((eq) => (
+                <div
+                  key={eq.id_equipo}
+                  className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
+                  onClick={() => {
+                    setEquipoSeleccionado(eq);
+                    setOpen(false);
+                  }}
+                >
+                  {eq.ubicacion} {eq.nombre_equipo}
+                </div>
+              ))}
+            </div>
+          )}
         </div>
-      </form>
+      </div>
       <SearchDate />
       <div>
         <table>

app/Components/QuitarSancion/QuitarSancion.tsx

@@ -38,7 +38,7 @@ function QuitarSancion({ id_cuenta }: { id_cuenta: number }) {
 
   return (
     <section className="containerSection">
-      <TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />
+        <TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />
       {(alumnoSanciones?.length > 0) &&
         <button
           className="button buttonSearch"

app/creadores/page.tsx

@@ -4,12 +4,12 @@ import CreatorCard from "./CreatorCard";
 export default function Page() {
     return (
         <div className="mainContainer">
-            <div className="container" style={{ display: "flex",flexDirection:"row", justifyContent: "center", gap: "4rem" }}>
+            <div className="container" style={{ display: "flex",flexDirection:"row", justifyContent: "center", gap: "3rem", flexWrap:"wrap" }}>
                 <div className="img"></div>
 
                 <CreatorCard title="IO" img="/IO.png" width={150} height={200} />
                 <CreatorCard title="CarloSpak" img="/SPAK.png" width={160} height={100} />
-                <CreatorCard title="Tyrannuss" img="/Tyrannuss.png" width={150} height={150} />
+                <CreatorCard title="Tyrannuss" img="/Tyrannuss.png" width={140} height={140} />
 
             </div>
         </div>