From 6585e25c3264b106ff99967d88c80765023bafe0 Mon Sep 17 00:00:00 2001
From: Cuenta Generica <confluence@clevercloud.mx>
Date: Fri, 14 Nov 2025 17:33:19 -0600
Subject: [PATCH 1/4] Edit Application v1

---
 .../components/EditApplicationModal.jsx       | 254 +++++++++++++++
 .../features/projects/components/archivo.md   |  52 ----
 .../projects/hooks/useApplicationDetails.js   |  69 +++--
 .../projects/hooks/useEditApplication.js      | 233 ++++++++++++++
 .../projects/pages/ApplicationDetails.jsx     | 290 ++++++++++--------
 .../src/features/projects/projectsService.js  |  82 ++++-
 6 files changed, 758 insertions(+), 222 deletions(-)
 create mode 100644 apps/web/src/features/projects/components/EditApplicationModal.jsx
 delete mode 100644 apps/web/src/features/projects/components/archivo.md
 create mode 100644 apps/web/src/features/projects/hooks/useEditApplication.js

diff --git a/apps/web/src/features/projects/components/EditApplicationModal.jsx b/apps/web/src/features/projects/components/EditApplicationModal.jsx
new file mode 100644
index 00000000..35659c93
--- /dev/null
+++ b/apps/web/src/features/projects/components/EditApplicationModal.jsx
@@ -0,0 +1,254 @@
+import { useEffect } from 'react';
+import useEditApplication from '../hooks/useEditApplication';
+import useFormProjectMetadata from '../hooks/useFormProjectMetadata';
+
+/**
+ * Modal para editar metadata y aprobar una Application
+ * @param {boolean} isOpen - Si el modal está abierto
+ * @param {Function} onClose - Callback al cerrar el modal
+ * @param {string} uuid - UUID de la aplicación
+ * @param {Object} application - Datos de la aplicación actual
+ * @param {Function} onSuccess - Callback al aprobar exitosamente
+ */
+export default function EditApplicationModal({ isOpen, onClose, uuid, application, onSuccess }) {
+  const { form, fieldErrors, isLoading, handleChange, handleSubmit, initializeForm } = 
+    useEditApplication(uuid, (projectUuid) => {
+      // ✅ Cerrar modal antes de llamar a onSuccess
+      onClose();
+      
+      // ✅ Pasar UUID del proyecto al componente padre
+      onSuccess(projectUuid);
+    });
+
+  const { faculties, projectTypes, problemTypes } = useFormProjectMetadata();
+
+  // Inicializar formulario cuando se abre el modal
+  useEffect(() => {
+    if (isOpen && application) {
+      initializeForm(application);
+    }
+  }, [isOpen, application]);
+
+  if (!isOpen) return null;
+
+  const extendedProblemTypes = [...problemTypes, { problem_type_id: "otro", name: "Otro" }];
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between rounded-t-2xl z-10">
+          <h2 className="text-2xl font-bold text-gray-800">
+            Editar y <span className="text-lime-600">Aprobar Proyecto</span>
+          </h2>
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="text-gray-400 hover:text-gray-600 transition disabled:opacity-50"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Body */}
+        <form onSubmit={(e) => handleSubmit(e, application)} className="p-6 space-y-6">
+          {/* Información del proyecto actual */}
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <div className="flex items-start gap-3">
+              <svg className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+              </svg>
+              <div className="flex-1">
+                <p className="text-sm font-semibold text-blue-800 mb-1">Proyecto: {application?.title}</p>
+                <p className="text-xs text-blue-700">
+                  Edita la metadata del proyecto si es necesario. Al guardar, el proyecto será aprobado automáticamente.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Tipo de proyecto */}
+          <div>
+            <label className="block mb-2 font-semibold text-gray-700">
+              Tipo de proyecto *
+            </label>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {projectTypes.map(({ project_type_id, name }) => (
+                <label key={project_type_id} className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    name="projectType"
+                    value={project_type_id}
+                    checked={form.projectType.includes(Number(project_type_id))}
+                    onChange={handleChange}
+                    className="w-4 h-4 text-lime-600 border-gray-300 rounded focus:ring-lime-500"
+                  />
+                  <span className="text-gray-700 text-sm">{name}</span>
+                </label>
+              ))}
+            </div>
+            {fieldErrors?.projectType && (
+              <p className="mt-1 text-sm text-red-600">{fieldErrors.projectType}</p>
+            )}
+          </div>
+
+          {/* Facultades */}
+          <div>
+            <label className="block mb-2 font-semibold text-gray-700">
+              Facultades sugeridas *
+            </label>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {faculties.map(({ faculty_id, name }) => (
+                <label key={faculty_id} className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    name="faculty"
+                    value={faculty_id}
+                    checked={form.faculty.includes(Number(faculty_id))}
+                    onChange={handleChange}
+                    className="w-4 h-4 text-lime-600 border-gray-300 rounded focus:ring-lime-500"
+                  />
+                  <span className="text-gray-700 text-sm">{name}</span>
+                </label>
+              ))}
+            </div>
+            {fieldErrors?.faculty && (
+              <p className="mt-1 text-sm text-red-600">{fieldErrors.faculty}</p>
+            )}
+          </div>
+
+          {/* Tipo de problemática */}
+          <div>
+            <label className="block mb-2 font-semibold text-gray-700">
+              Tipo de problemática *
+            </label>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {extendedProblemTypes.map(({ problem_type_id, name }) => (
+                <label key={problem_type_id} className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    name="problemType"
+                    value={problem_type_id}
+                    checked={form.problemType.includes(
+                      problem_type_id === "otro" ? "otro" : Number(problem_type_id)
+                    )}
+                    onChange={handleChange}
+                    className="w-4 h-4 text-lime-600 border-gray-300 rounded focus:ring-lime-500"
+                  />
+                  <span className="text-gray-700 text-sm">{name}</span>
+                </label>
+              ))}
+            </div>
+            {fieldErrors?.problemType && (
+              <p className="mt-1 text-sm text-red-600">{fieldErrors.problemType}</p>
+            )}
+
+            {/* Campo "Otro" */}
+{form.problemType.includes('otro') && (
+  <div className="mt-3">
+    <label className="block mb-2 text-sm font-medium text-gray-700">
+      Describe la problemática: *
+    </label>
+    <input
+      name="problemTypeOther"
+      value={form.problemTypeOther}
+      onChange={handleChange}
+      placeholder="Ej: Problemática educativa rural"
+      className={`w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-lime-500 ${
+        fieldErrors?.problemTypeOther ? 'border-red-500' : 'border-gray-300'
+      }`}
+    />
+    {fieldErrors?.problemTypeOther && (
+      <p className="mt-1 text-sm text-red-600">{fieldErrors.problemTypeOther}</p>
+    )}
+  </div>
+)}
+
+          </div>
+
+          {/* Vigencia */}
+          <div>
+            <label className="block mb-2 font-semibold text-gray-700">
+              Vigencia (fecha límite) *
+            </label>
+            <input
+              name="deadline"
+              value={form.deadline}
+              onChange={handleChange}
+              type="date"
+              className={`w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-lime-500 ${
+                fieldErrors?.deadline ? 'border-red-500' : 'border-gray-300'
+              }`}
+            />
+            {fieldErrors?.deadline && (
+              <p className="mt-1 text-sm text-red-600">{fieldErrors.deadline}</p>
+            )}
+          </div>
+
+          {/* TODO: Razón de edición (placeholder) */}
+          <div>
+            <label className="block mb-2 font-semibold text-gray-700">
+              Razón de la edición
+              <span className="ml-2 text-xs text-gray-500 font-normal">(Próximamente)</span>
+            </label>
+            <textarea
+              name="editReason"
+              value={form.editReason}
+              onChange={handleChange}
+              placeholder="Este campo estará disponible próximamente..."
+              className="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-lime-500 bg-gray-50"
+              rows={3}
+              disabled
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              🚧 Esta funcionalidad se implementará después de la revisión con los asesores.
+            </p>
+          </div>
+
+          {/* Advertencia */}
+          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+            <div className="flex items-start gap-3">
+              <svg className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+              <div className="flex-1">
+                <p className="text-sm font-semibold text-yellow-800 mb-1">⚠️ Importante</p>
+                <p className="text-xs text-yellow-700">
+                  Al hacer clic en "Guardar y Aprobar", el proyecto será aprobado inmediatamente con los cambios realizados y 
+                  quedará disponible en "Mis Proyectos". Esta acción no se puede deshacer.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Botones */}
+          <div className="flex justify-end gap-3 pt-4 border-t border-gray-200">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isLoading}
+              className="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition disabled:opacity-50"
+            >
+              Cancelar
+            </button>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="px-6 py-2 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+            >
+              {isLoading && (
+                <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+              )}
+              {isLoading ? 'Aprobando...' : 'Guardar y Aprobar Proyecto'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/features/projects/components/archivo.md b/apps/web/src/features/projects/components/archivo.md
deleted file mode 100644
index 87ac4cf9..00000000
--- a/apps/web/src/features/projects/components/archivo.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# Documentación de cambios — imágenes del formulario y serving de assets
-
-## Resumen ejecutivo
-
-Se corrigió el **frontend** para manejar previews de archivos locales, selección de banners predeterminados y keys en listas; y el **backend** para servir archivos estáticos con `Content-Length` correcto (evitando `ERR_CONTENT_LENGTH_MISMATCH`).
-
----
-
-## 1. Archivos modificados
-
-- `apps/web/src/features/.../RequestProjectForm.jsx`
-- `apps/api/routes/file/handlers.js`
-- `getMetadata.js` *(se mantiene igual, ya generaba `banner.url`)*
-
----
-
-## 2. Cambios en el frontend (`RequestProjectForm.jsx`)
-
-### Problemas antes
-- `key={index}` en `map` → warnings en consola.  
-- URLs de preview locales no se revocaban → riesgo de memory leaks.  
-- Inconsistencia entre `selectedDefaultImage` y `banner.uuid/url`.  
-- `getFileIcon` intentaba usar una ref inexistente.
-
-### Cambios después
-- Se creó estado `selectedFilePreview` para manejar previews de archivos locales (`URL.createObjectURL`).  
-- Se revoca el object URL anterior en cada cambio y en `useEffect` cleanup.  
-- `handleFileInputChange` y `handleDefaultImageSelect` limpian estados para evitar mezclas entre archivo local y banner predeterminado.  
-- `getFileIcon` ahora devuelve la preview cuando es imagen.  
-- En `defaultBanners.map` se usa `key={banner.uuid}` en lugar de `index`.  
-
-### Nota
-Ahora se recomienda guardar en `selectedDefaultImage` el `banner.uuid` y setear en el form el `banner.url`. Así se comparan ids únicos y se renderiza sin inconsistencias.
-
----
-
-## 3. Cambios en el backend (`getPublicAssetHandler`)
-
-### Problema antes
-- Se usaba `assetFile.fileSize` (DB) como `Content-Length`, pero podía diferir del tamaño real en disco → `ERR_CONTENT_LENGTH_MISMATCH`.
-
-### Solución
-- Se usa `fs.statSync(assetFile.storedPath).size` para el header `Content-Length`.  
-- `fs.createReadStream` ahora maneja errores explícitamente.  
-- Alternativa válida: `res.sendFile(assetFile.storedPath)` para que Express maneje headers.
-
----
-
-## 4. Impacto de los cambios
-
-- **Frontend:** previews correctas, sin fugas de memoria, sin warnings de React, selección consistente entre imágenes locales y predeterminadas.  
-- **Backend:** `Content-Length` correcto → imágenes cargan completas, sin errores en navegador.
diff --git a/apps/web/src/features/projects/hooks/useApplicationDetails.js b/apps/web/src/features/projects/hooks/useApplicationDetails.js
index 00d37942..96db53b4 100644
--- a/apps/web/src/features/projects/hooks/useApplicationDetails.js
+++ b/apps/web/src/features/projects/hooks/useApplicationDetails.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { getApplicationDetails } from "../projectsService";
 import { Alerts } from "@/shared/alerts";
 import { getDisplayMessage, AuthenticationError, NotFoundError } from "@/utils/errorHandler";
@@ -10,45 +10,50 @@ export default function useApplicationDetails(uuid) {
   const [error, setError] = useState(null);
   const navigate = useNavigate();
 
-  useEffect(() => {
+  const fetchDetails = useCallback(async () => {
     if (!uuid) {
       setError("UUID de aplicación no proporcionado");
       setIsLoading(false);
       return;
     }
 
-    const fetchDetails = async () => {
-      setIsLoading(true);
-      setError(null);
-
-      try {
-        const data = await getApplicationDetails(uuid);
-        setApplication(data);
-      } catch (err) {
-        console.error("Error fetching application details:", err);
-
-        if (err instanceof AuthenticationError) {
-          Alerts.warning("Tu sesión ha expirado. Por favor, inicia sesión nuevamente.");
-          setTimeout(() => navigate("/login"), 2000);
-          return;
-        }
-
-        if (err instanceof NotFoundError) {
-          Alerts.error("Proyecto no encontrado");
-          setTimeout(() => navigate("/explore-projects"), 2000);
-          return;
-        }
-
-        const errorMessage = getDisplayMessage(err);
-        setError(errorMessage);
-        Alerts.error(errorMessage);
-      } finally {
-        setIsLoading(false);
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const data = await getApplicationDetails(uuid);
+      setApplication(data);
+    } catch (err) {
+      console.error("Error fetching application details:", err);
+
+      if (err instanceof AuthenticationError) {
+        Alerts.warning("Tu sesión ha expirado. Por favor, inicia sesión nuevamente.");
+        setTimeout(() => navigate("/login"), 2000);
+        return;
       }
-    };
 
-    fetchDetails();
+      if (err instanceof NotFoundError) {
+        Alerts.error("Proyecto no encontrado");
+        setTimeout(() => navigate("/explore-projects"), 2000);
+        return;
+      }
+
+      const errorMessage = getDisplayMessage(err);
+      setError(errorMessage);
+      Alerts.error(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
   }, [uuid, navigate]);
 
-  return { application, isLoading, error };
+  useEffect(() => {
+    fetchDetails();
+  }, [fetchDetails]);
+
+  return { 
+    application, 
+    isLoading, 
+    error,
+    refetch: fetchDetails // ✅ Exponer función para refrescar
+  };
 }
\ No newline at end of file
diff --git a/apps/web/src/features/projects/hooks/useEditApplication.js b/apps/web/src/features/projects/hooks/useEditApplication.js
new file mode 100644
index 00000000..25902b70
--- /dev/null
+++ b/apps/web/src/features/projects/hooks/useEditApplication.js
@@ -0,0 +1,233 @@
+import { useState } from "react";
+import { approveApplication } from "../projectsService";
+import { Alerts } from "@/shared/alerts";
+import { ValidationError, getDisplayMessage, processFieldErrors } from "@/utils/errorHandler";
+
+/**
+ * Hook para editar metadata y aprobar una aplicación
+ * @param {string} uuid - UUID de la aplicación
+ * @param {Function} onSuccess - Callback al aprobar exitosamente
+ * @returns {Object} - { form, fieldErrors, isLoading, handleChange, handleSubmit, resetForm, initializeForm }
+ */
+export default function useEditApplication(uuid, onSuccess) {
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [form, setForm] = useState({
+    projectType: [],
+    faculty: [],
+    problemType: [],
+    problemTypeOther: "",
+    deadline: "",
+    editReason: "", // TODO: Campo placeholder (no funcional aún)
+  });
+
+  /**
+   * Inicializa el formulario con datos existentes de la aplicación
+   * @param {Object} application - Datos de la aplicación
+   */
+  const initializeForm = (application) => {
+    setForm({
+      projectType: application.projectTypeIds || [],
+      faculty: application.facultyIds || [],
+      problemType: application.problemTypeIds || [],
+      problemTypeOther: "",
+      deadline: application.dueDate?.split('T')[0] || "",
+      editReason: "",
+    });
+  };
+
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+
+    // Limpiar error del campo
+    if (fieldErrors[name]) {
+      setFieldErrors(prev => {
+        const newErrors = { ...prev };
+        delete newErrors[name];
+        return newErrors;
+      });
+    }
+
+    // Manejo de checkboxes
+    if (type === "checkbox") {
+      if (name === "projectType" || name === "faculty" || name === "problemType") {
+        setForm(prevForm => {
+          const currentArray = prevForm[name] || [];
+          
+          // Manejar "otro" como string, resto como números
+          const parsedValue = value === "otro" ? "otro" : Number(value);
+          
+          if (checked) {
+            return {
+              ...prevForm,
+              [name]: [...currentArray, parsedValue]
+            };
+          } else {
+            // ✅ Si se desmarca "otro", limpiar problemTypeOther
+            const newArray = currentArray.filter(item => item !== parsedValue);
+            
+            if (name === "problemType" && parsedValue === "otro") {
+              return {
+                ...prevForm,
+                [name]: newArray,
+                problemTypeOther: "", // ✅ Limpiar campo de texto
+              };
+            }
+            
+            return {
+              ...prevForm,
+              [name]: newArray
+            };
+          }
+        });
+        return;
+      }
+    }
+
+    // Campos de texto normales
+    setForm({
+      ...form,
+      [name]: value,
+    });
+  };
+
+  const validateForm = () => {
+    const errors = {};
+
+    if (form.projectType.length === 0) {
+      errors.projectType = "Selecciona al menos un tipo de proyecto";
+    }
+
+    if (form.faculty.length === 0) {
+      errors.faculty = "Selecciona al menos una facultad";
+    }
+
+    if (form.problemType.length === 0) {
+      errors.problemType = "Selecciona al menos un tipo de problemática";
+    }
+
+    // ✅ Validar que si "otro" está marcado, debe tener texto
+    if (form.problemType.includes("otro") && !form.problemTypeOther?.trim()) {
+      errors.problemTypeOther = "Por favor describe la problemática personalizada";
+    }
+
+    if (!form.deadline) {
+      errors.deadline = "La vigencia es requerida";
+    }
+
+    // TODO: Validación de editReason desactivada temporalmente
+    // if (!form.editReason?.trim()) {
+    //   errors.editReason = "Por favor explica la razón de la edición";
+    // }
+
+    return errors;
+  };
+
+// Línea 127-195: REEMPLAZAR handleSubmit
+
+const handleSubmit = async (e, applicationData) => {
+  e.preventDefault();
+
+  // Validar formulario
+  const errors = validateForm();
+  
+  if (Object.keys(errors).length > 0) {
+    setFieldErrors(errors);
+    Alerts.warning("Por favor completa todos los campos requeridos");
+    return;
+  }
+
+  setIsLoading(true);
+  setFieldErrors({});
+
+  try {
+    // ✅ Filtrar "otro" de problemType antes de enviar
+    const finalProblemTypes = form.problemType.filter(pt => pt !== "otro");
+
+    // ✅ Preparar problemTypeOther correctamente
+    let finalProblemTypeOther = undefined;
+    if (form.problemType.includes("otro")) {
+      const trimmed = form.problemTypeOther?.trim();
+      if (trimmed) {
+        finalProblemTypeOther = trimmed;
+      }
+    }
+
+    // ✅ Usar datos del formulario (editados)
+    const projectData = {
+      title: applicationData.title,
+      shortDescription: applicationData.shortDescription,
+      description: applicationData.detailedDescription,
+      estimatedDate: form.deadline,           // ✅ Dato editado
+      projectType: form.projectType,          // ✅ IDs editados
+      faculty: form.faculty,                  // ✅ IDs editados
+      problemType: finalProblemTypes,         // ✅ IDs editados (sin "otro")
+    };
+
+    // ✅ Solo agregar problemTypeOther si tiene valor
+    if (finalProblemTypeOther !== undefined) {
+      projectData.problemTypeOther = finalProblemTypeOther;
+    }
+
+    console.log("📤 Enviando proyecto con datos EDITADOS:", projectData);
+
+    // ✅ CORRECCIÓN: Capturar respuesta del backend
+    const response = await approveApplication(uuid, projectData);
+    
+    console.log("✅ Respuesta del backend:", response);
+
+    // ✅ Extraer UUID del proyecto creado
+    const projectUuid = response?.project?.uuid_project;
+
+    if (!projectUuid) {
+      console.error("❌ Backend no retornó uuid_project:", response);
+      throw new Error("No se pudo obtener el UUID del proyecto creado");
+    }
+
+    // ✅ Pasar UUID al callback de éxito
+    if (onSuccess) {
+      onSuccess(projectUuid); // ✅ Pasar UUID del proyecto
+    }
+
+  } catch (error) {
+    console.error("Error al aprobar proyecto:", error);
+
+    if (error instanceof ValidationError) {
+      if (error.details && error.details.length > 0) {
+        const processedErrors = processFieldErrors(error.details);
+        setFieldErrors(processedErrors);
+        Alerts.error("Por favor revisa los campos marcados");
+      } else {
+        Alerts.error(getDisplayMessage(error));
+      }
+    } else {
+      Alerts.error(getDisplayMessage(error));
+    }
+  } finally {
+    setIsLoading(false);
+  }
+};
+
+  const resetForm = () => {
+    setForm({
+      projectType: [],
+      faculty: [],
+      problemType: [],
+      problemTypeOther: "",
+      deadline: "",
+      editReason: "",
+    });
+    setFieldErrors({});
+  };
+
+  return {
+    form,
+    fieldErrors,
+    isLoading,
+    handleChange,
+    handleSubmit,
+    resetForm,
+    initializeForm,
+  };
+}
\ No newline at end of file
diff --git a/apps/web/src/features/projects/pages/ApplicationDetails.jsx b/apps/web/src/features/projects/pages/ApplicationDetails.jsx
index 13d281d5..792c1186 100644
--- a/apps/web/src/features/projects/pages/ApplicationDetails.jsx
+++ b/apps/web/src/features/projects/pages/ApplicationDetails.jsx
@@ -4,6 +4,7 @@ import ProjectImage from '../components/ProjectImage';
 import ProjectSummary from '../components/ProjectSummary';
 import ProjectInfoCard from '../components/ProjectInfoCard';
 import AttachmentCard from '../components/AttachmentCard';
+import EditApplicationModal from '../components/EditApplicationModal';
 import useApplicationDetails from '../hooks/useApplicationDetails';
 import { downloadAllAttachments, approveApplication } from '../projectsService';
 import { Alerts } from '@/shared/alerts';
@@ -11,10 +12,31 @@ import { Alerts } from '@/shared/alerts';
 export default function ApplicationDetails() {
   const { uuid } = useParams();
   const navigate = useNavigate();
-  const { application, isLoading, error } = useApplicationDetails(uuid);
+  const { application, isLoading, error, refetch } = useApplicationDetails(uuid);
   const [isDownloadingAll, setIsDownloadingAll] = useState(false);
   const [downloadError, setDownloadError] = useState(null);
   const [isApproving, setIsApproving] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+
+  // Handler para abrir modal de edición
+  const handleEditClick = () => {
+    setIsEditModalOpen(true);
+  };
+
+  // Handler cuando se aprueba exitosamente desde el modal
+// Línea 27-36: REEMPLAZAR handleApproveSuccess
+
+// ✅ Handler cuando se aprueba exitosamente desde el modal
+const handleApproveSuccess = (projectUuid) => {
+  console.log("✅ Proyecto aprobado con UUID:", projectUuid);
+  
+  Alerts.success('¡Proyecto aprobado exitosamente!');
+  
+  setTimeout(() => {
+    // ✅ Redirigir a los detalles del proyecto creado
+    navigate(`/my-projects/${projectUuid}`);
+  }, 1500);
+};
 
   // Formatear fechas
   const formatDate = (dateString) => {
@@ -52,91 +74,105 @@ export default function ApplicationDetails() {
     }
   }; 
 
-  const handleApprove = async () => {
-    const result = await Alerts.confirm({
-      title: '¿Aprobar este proyecto?',
-      text: 'Esta acción creará un nuevo proyecto activo basado en esta solicitud. El proyecto quedará disponible en "Mis Proyectos".',
-      confirmText: 'Sí, aprobar',
-      cancelText: 'Cancelar',
-    });
+  // ✅ Handler para aprobar directamente (SIN editar)
+// Línea 84-130: Actualizar función handleApprove
+
+// Línea 84-140: Actualizar handleApprove
+
+// Línea 84-140: REEMPLAZAR función handleApprove completa
+
+// Línea 84-145: REEMPLAZAR handleApprove
+
+const handleApprove = async () => {
+  const result = await Alerts.confirm({
+    title: '¿Aprobar este proyecto?',
+    text: 'Esta acción creará un nuevo proyecto activo basado en esta solicitud SIN modificaciones. El proyecto quedará disponible en "Mis Proyectos".',
+    confirmText: 'Sí, aprobar',
+    cancelText: 'Cancelar',
+  });
 
-    // Si el usuario cancela, salir
-    if (!result.isConfirmed) {
+  if (!result.isConfirmed) {
+    return;
+  }
+
+  setIsApproving(true);
+  
+  try {
+    // Extraer IDs directamente del backend
+    const projectTypeIds = application.projectTypes.map(pt => pt.id);
+    const facultyIds = application.faculties.map(f => f.id);
+    const problemTypeIds = application.problemTypes.map(pt => pt.id);
+
+    // Validaciones
+    if (projectTypeIds.length === 0) {
+      Alerts.warning('El proyecto debe tener al menos un tipo de proyecto');
+      setIsApproving(false);
+      return;
+    }
+    if (facultyIds.length === 0) {
+      Alerts.warning('El proyecto debe tener al menos una facultad');
+      setIsApproving(false);
+      return;
+    }
+    if (problemTypeIds.length === 0) {
+      Alerts.warning('El proyecto debe tener al menos un tipo de problemática');
+      setIsApproving(false);
       return;
     }
 
-    setIsApproving(true);
-    
+    const projectData = {
+      title: application.title,
+      shortDescription: application.shortDescription,
+      description: application.detailedDescription,
+      estimatedDate: application.dueDate?.split('T')[0] || null,
+      projectType: projectTypeIds,
+      faculty: facultyIds,
+      problemType: problemTypeIds,
+    };
+
+    console.log("📤 Aprobando proyecto directo:", projectData);
+
+    const loadingAlert = Alerts.loading('Aprobando proyecto...');
+
     try {
-      // Extraer IDs directamente del backend
-      const projectTypeIds = application.projectTypes.map(pt => pt.id);
-      const facultyIds = application.faculties.map(f => f.id);
-      const problemTypeIds = application.problemTypes.map(pt => pt.id);
-
-      // Validaciones
-      if (projectTypeIds.length === 0) {
-        Alerts.warning('El proyecto debe tener al menos un tipo de proyecto');
-        setIsApproving(false);
-        return;
-      }
-      if (facultyIds.length === 0) {
-        Alerts.warning('El proyecto debe tener al menos una facultad');
-        setIsApproving(false);
-        return;
-      }
-      if (problemTypeIds.length === 0) {
-        Alerts.warning('El proyecto debe tener al menos un tipo de problemática');
-        setIsApproving(false);
-        return;
-      }
+      const response = await approveApplication(uuid, projectData);
+      
+      loadingAlert.close();
 
-      const projectData = {
-        title: application.title,
-        shortDescription: application.shortDescription,
-        description: application.detailedDescription,
-        estimatedDate: application.dueDate?.split('T')[0] || null,
-        projectType: projectTypeIds,
-        faculty: facultyIds,
-        problemType: problemTypeIds,
-      };
-
-      // Mostrar loading mientras se aprueba
-      const loadingAlert = Alerts.loading('Aprobando proyecto...');
-
-      try {
-        const response = await approveApplication(uuid, projectData);
-        
-        // Cerrar loading
-        loadingAlert.close();
+      console.log('✅ Proyecto aprobado:', response);
 
-        console.log('Proyecto aprobado:', response);
+      // ✅ Extraer UUID del proyecto creado
+      const projectUuid = response?.project?.uuid_project;
 
-        // Mostrar éxito
-        Alerts.success('¡Proyecto aprobado exitosamente!');
-        
-        // Redirigir después de 1.5 segundos
-        setTimeout(() => {
-          navigate('/my-projects');
-        }, 1500);
-        
-      } catch (error) {
-        // Cerrar loading en caso de error
-        loadingAlert.close();
-        throw error; // Re-lanzar para el catch externo
+      if (!projectUuid) {
+        console.error("❌ Backend no retornó uuid_project:", response);
+        throw new Error("No se pudo obtener el UUID del proyecto creado");
       }
+
+      Alerts.success('¡Proyecto aprobado exitosamente!');
       
-    } catch (error) {
-      console.error('Error al aprobar proyecto:', error);
+      setTimeout(() => {
+        // ✅ Redirigir a los detalles del proyecto creado
+        navigate(`/my-projects/${projectUuid}`);
+      }, 1500);
       
-      if (error.message) {
-        Alerts.error(error.message);
-      } else {
-        Alerts.error('No se pudo aprobar el proyecto. Por favor, intenta nuevamente.');
-      }
-    } finally {
-      setIsApproving(false);
+    } catch (error) {
+      loadingAlert.close();
+      throw error;
     }
-  };
+    
+  } catch (error) {
+    console.error('❌ Error al aprobar proyecto:', error);
+    
+    if (error.message) {
+      Alerts.error(error.message);
+    } else {
+      Alerts.error('No se pudo aprobar el proyecto. Por favor, intenta nuevamente.');
+    }
+  } finally {
+    setIsApproving(false);
+  }
+};
 
   // Loading state
   if (isLoading) {
@@ -262,12 +298,11 @@ export default function ApplicationDetails() {
     ]),
   ];
 
-  // Preparar información del proyecto
   const projectInfo = [
     { 
       label: 'Tipo de proyecto', 
       value: projectTypes.length > 0 
-        ? projectTypes.map(pt => pt.name).join(', ')  // Extraer .name
+        ? projectTypes.map(pt => pt.name).join(', ')
         : 'No especificado' 
     },
     { 
@@ -300,14 +335,6 @@ export default function ApplicationDetails() {
     },
   ];
 
-  const handleContact = () => {
-    if (authorEmail) {
-      window.location.href = `mailto:${authorEmail}?subject=Interés en el proyecto: ${title}`;
-    } else {
-      alert('No hay correo de contacto disponible para este proyecto');
-    }
-  };
-
   const isAlreadyApproved = application?.status === 'approved';
   
   return (
@@ -330,19 +357,16 @@ export default function ApplicationDetails() {
       <div className='flex mt-10 gap-6'>
         {/* Columna izquierda: Imagen, descripción y archivos adjuntos */}
         <div className="w-5/12">
-          {/* Banner */}
           <ProjectImage 
             src={bannerUrl} 
             alt={title} 
           />
           
-          {/* Resumen del proyecto */}
           <ProjectSummary
             title={title}
             description={detailedDescription}
           />
 
-          {/* Archivos adjuntos */}
           {attachments.length > 0 && (
             <div className="mt-6">
               <h2 className="text-3xl font-bold mb-3">
@@ -374,8 +398,26 @@ export default function ApplicationDetails() {
 
           {/* Botones de acción */}
           <div className="flex flex-col gap-3 pt-4 w-11/12">
+            {/* Primera fila: Editar + Aceptar */}
             <div className='flex gap-5'>
-              {/* Botón Aceptar Proyecto */}
+              {/* ✅ Botón Editar proyecto */}
+              <button 
+                onClick={handleEditClick}
+                disabled={isApproving || isAlreadyApproved}
+                className={`px-4 py-2 rounded-lg font-semibold w-6/12 transition flex items-center justify-center gap-2 ${
+                  isAlreadyApproved
+                    ? 'bg-gray-300 cursor-not-allowed text-gray-500'
+                    : 'border-2 border-lime-600 text-lime-700 hover:bg-lime-50'
+                } disabled:opacity-50 disabled:cursor-not-allowed`}
+                title={isAlreadyApproved ? 'No se puede editar un proyecto aprobado' : 'Editar metadata y aprobar proyecto'}
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+                {isAlreadyApproved ? 'Ya aprobado' : 'Editar proyecto'}
+              </button>
+
+              {/* ✅ Botón Aceptar Proyecto (directo, sin editar) */}
               <button 
                 onClick={handleApprove}
                 disabled={isApproving || isAlreadyApproved}
@@ -384,7 +426,7 @@ export default function ApplicationDetails() {
                     ? 'bg-gray-400 cursor-not-allowed text-white'
                     : 'bg-lime-600 text-white hover:bg-lime-700'
                 } disabled:opacity-50 disabled:cursor-not-allowed`}
-                title={isAlreadyApproved ? 'Este proyecto ya fue aprobado' : 'Aprobar proyecto y crear nuevo proyecto activo'}
+                title={isAlreadyApproved ? 'Este proyecto ya fue aprobado' : 'Aprobar proyecto sin modificaciones'}
               >
                 {isApproving ? (
                   <>
@@ -410,32 +452,32 @@ export default function ApplicationDetails() {
                   </>
                 )}
               </button>
-              
-              {/* Botón Descargar Todos los Archivos */}
-              <button 
-                onClick={handleDownloadAll}
-                disabled={isDownloadingAll || attachments.length === 0}
-                className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 font-semibold w-6/12 transition disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-                title={attachments.length === 0 ? 'No hay archivos para descargar' : 'Descargar todos los documentos'}
-              >
-                {isDownloadingAll ? (
-                  <>
-                    <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    Descargando...
-                  </>
-                ) : (
-                  <>
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                    </svg>
-                    Descargar todos ({attachments.length})
-                  </>
-                )}
-              </button>
             </div>
+            
+            {/* Segunda fila: Descargar todos */}
+            <button 
+              onClick={handleDownloadAll}
+              disabled={isDownloadingAll || attachments.length === 0}
+              className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 font-semibold transition disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              title={attachments.length === 0 ? 'No hay archivos para descargar' : 'Descargar todos los documentos'}
+            >
+              {isDownloadingAll ? (
+                <>
+                  <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Descargando...
+                </>
+              ) : (
+                <>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                  </svg>
+                  Descargar todos ({attachments.length})
+                </>
+              )}
+            </button>
 
             {/* Mensaje de error si ocurrió */}
             {downloadError && (
@@ -443,17 +485,8 @@ export default function ApplicationDetails() {
                 {downloadError}
               </div>
             )}
-            
-            {/* Botón Ponerse en Contacto */}
-            <button 
-              onClick={handleContact}
-              disabled={!authorEmail}
-              className="px-4 py-2 border-2 border-lime-600 text-lime-700 font-semibold rounded-lg hover:bg-lime-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
-              title={!authorEmail ? 'No hay correo de contacto disponible' : `Contactar a ${authorFullName}`}
-            >
-              Ponerse en contacto
-            </button>
 
+            {/* Mensaje informativo si ya está aprobado */}
             {isAlreadyApproved && (
               <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-700 flex items-start gap-2">
                 <svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
@@ -471,6 +504,15 @@ export default function ApplicationDetails() {
           </div>
         </div>
       </div>
+
+      {/* Modal de edición y aprobación */}
+      <EditApplicationModal
+        isOpen={isEditModalOpen}
+        onClose={() => setIsEditModalOpen(false)}
+        uuid={uuid}
+        application={application}
+        onSuccess={handleApproveSuccess}
+      />
     </section>
   );
 }
\ No newline at end of file
diff --git a/apps/web/src/features/projects/projectsService.js b/apps/web/src/features/projects/projectsService.js
index 160e377a..f1b12f68 100644
--- a/apps/web/src/features/projects/projectsService.js
+++ b/apps/web/src/features/projects/projectsService.js
@@ -151,6 +151,8 @@ export async function getApplicationDetails(uuid) {
   const app = response.data.application;
 
   return {
+
+    uuid_application: uuid,
     // Información básica del proyecto
     title: app.details?.title || 'Sin título',
     shortDescription: app.details?.shortDescription || 'Sin descripción corta',
@@ -314,16 +316,42 @@ export async function downloadAllAttachments(attachments) {
   return { successful, failed, errors };
 }
 
+// Línea 277-330: REEMPLAZAR función approveApplication
+
 /**
  * Aprueba una Application y crea un Project
  * @param {string} uuid_application - UUID de la Application a aprobar
- * @param {object} projectData - Datos opcionales del proyecto (título, descripción, etc.)
+ * @param {object} projectData - Datos del proyecto
  * @returns {Promise<object>} Project creado
  * @throws {ValidationError|ApplicationError}
  */
 export async function approveApplication(uuid_application, projectData = {}) {
   const csrfToken = await getCSRFToken();
 
+  // ✅ Construir payload solo con campos que tengan valor
+  const payload = {
+    uuidApplication: uuid_application,
+    title: projectData.title,
+    shortDescription: projectData.shortDescription,
+    description: projectData.description,
+    estimatedDate: projectData.estimatedDate,
+    projectType: projectData.projectType,
+    faculty: projectData.faculty,
+    problemType: projectData.problemType,
+  };
+
+  // ✅ Solo agregar problemTypeOther si existe
+  if (projectData.problemTypeOther !== undefined && projectData.problemTypeOther !== null) {
+    payload.problemTypeOther = projectData.problemTypeOther;
+  }
+
+  // ✅ Solo agregar estimatedEffortHours si existe
+  if (projectData.estimatedEffortHours !== undefined) {
+    payload.estimatedEffortHours = projectData.estimatedEffortHours;
+  }
+
+  console.log("📤 [projectsService] Payload final:", payload);
+
   const response = await fetchWithAuthAndAutoRefresh(
     `${API_URL}/project/create`,
     {
@@ -332,19 +360,7 @@ export async function approveApplication(uuid_application, projectData = {}) {
         "Content-Type": "application/json",
         "csrf-token": csrfToken,
       },
-      body: JSON.stringify({
-        uuidApplication: uuid_application,
-        // Heredar datos de la Application o usar valores modificados
-        title: projectData.title,
-        shortDescription: projectData.shortDescription,
-        description: projectData.description,
-        estimatedEffortHours: projectData.estimatedEffortHours,
-        estimatedDate: projectData.estimatedDate,
-        projectType: projectData.projectType,
-        faculty: projectData.faculty,
-        problemType: projectData.problemType,
-        problemTypeOther: projectData.problemTypeOther,
-      }),
+      body: JSON.stringify(payload),
     }
   );
 
@@ -480,4 +496,42 @@ export async function getProjectDetails(uuid) {
     estimatedDate: app.details?.deadline,
     status: app.status || 'approved', // Projects son applications aprobadas
   };
+}
+
+/**
+ * Edita una Application existente (solo metadata)
+ * @param {string} uuid - UUID de la Application
+ * @param {object} editData - Datos a editar
+ * @param {Array<number>} editData.projectType - IDs de tipos de proyecto
+ * @param {Array<number>} editData.faculty - IDs de facultades
+ * @param {Array<number>} editData.problemType - IDs de tipos de problemática
+ * @param {string|null} editData.problemTypeOther - Descripción si "Otro" está seleccionado
+ * @param {string} editData.deadline - Nueva fecha límite (YYYY-MM-DD)
+ * @param {string} editData.editReason - Razón de la edición
+ * @returns {Promise<object>} Application actualizada
+ * @throws {ValidationError|ApplicationError}
+ */
+export async function editApplication(uuid, editData) {
+  const csrfToken = await getCSRFToken();
+
+  const response = await fetchWithAuthAndAutoRefresh(
+    `${API_URL}/application/${uuid}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        "csrf-token": csrfToken,
+      },
+      body: JSON.stringify({
+        projectType: editData.projectType,
+        faculty: editData.faculty,
+        problemType: editData.problemType,
+        problemTypeOther: editData.problemTypeOther,
+        deadline: editData.deadline,
+        editReason: editData.editReason,
+      }),
+    }
+  );
+
+  return response.data;
 }
\ No newline at end of file

From c0a723d0101938c309462497ff86e72417516b71 Mon Sep 17 00:00:00 2001
From: Cuenta Generica <confluence@clevercloud.mx>
Date: Wed, 19 Nov 2025 23:45:30 -0600
Subject: [PATCH 2/4] incomplete edit project

---
 .../components/EditApplicationModal.jsx       |   2 +
 .../projects/components/MyProjectsList.jsx    |  28 +--
 .../projects/hooks/useEditApplication.js      |  10 +-
 .../projects/pages/ApplicationDetails.jsx     |   8 +-
 .../projects/pages/ProjectDetails.jsx         | 203 +++++++++++-------
 .../src/features/projects/projectsService.js  | 124 +++++++----
 6 files changed, 234 insertions(+), 141 deletions(-)

diff --git a/apps/web/src/features/projects/components/EditApplicationModal.jsx b/apps/web/src/features/projects/components/EditApplicationModal.jsx
index 35659c93..bed8beb8 100644
--- a/apps/web/src/features/projects/components/EditApplicationModal.jsx
+++ b/apps/web/src/features/projects/components/EditApplicationModal.jsx
@@ -13,6 +13,8 @@ import useFormProjectMetadata from '../hooks/useFormProjectMetadata';
 export default function EditApplicationModal({ isOpen, onClose, uuid, application, onSuccess }) {
   const { form, fieldErrors, isLoading, handleChange, handleSubmit, initializeForm } = 
     useEditApplication(uuid, (projectUuid) => {
+      console.log("✅ [EditApplicationModal] Proyecto creado con UUID:", projectUuid);
+      
       // ✅ Cerrar modal antes de llamar a onSuccess
       onClose();
       
diff --git a/apps/web/src/features/projects/components/MyProjectsList.jsx b/apps/web/src/features/projects/components/MyProjectsList.jsx
index e6ff5a18..f1099572 100644
--- a/apps/web/src/features/projects/components/MyProjectsList.jsx
+++ b/apps/web/src/features/projects/components/MyProjectsList.jsx
@@ -18,9 +18,11 @@ const MyProjectsList = () => {
     );
   });
 
-  const handleProjectClick = (uuid, uuidApplication) => {
-    navigate(`/my-projects/${uuidApplication}`);
-  };
+const handleProjectClick = (uuid) => {
+  // ✅ Navegar con el UUID del proyecto, NO con uuidApplication
+  console.log("🔍 Navegando a proyecto:", uuid);
+  navigate(`/my-projects/${uuid}`);
+};
 
   // NUEVA FUNCIÓN: Navegar a la página de equipo
   const handleTeamClick = (uuid) => {
@@ -106,16 +108,16 @@ const MyProjectsList = () => {
         <>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-11/12 mb-10">
             {filteredProjects.map((proj) => (
-              <ProjectCard
-                key={proj.uuid_project}
-                uuid={proj.uuid_project}
-                image={proj.bannerUrl}
-                title={proj.title}
-                description={proj.shortDescription}
-                onDetailsClick={() => handleProjectClick(proj.uuid_project, proj.uuidApplication)}
-                showTeamButton={true} // ACTIVAR botón de equipo
-                onTeamClick={handleTeamClick} // FUNCIÓN para navegar
-              />
+<ProjectCard
+  key={proj.uuid_project}
+  uuid={proj.uuid_project}  // ✅ Pasar uuid_project
+  image={proj.bannerUrl}
+  title={proj.title}
+  description={proj.shortDescription}
+  onDetailsClick={() => handleProjectClick(proj.uuid_project, proj.uuidApplication)}
+  showTeamButton={true}
+  onTeamClick={handleTeamClick}
+/>
             ))}
           </div>
 
diff --git a/apps/web/src/features/projects/hooks/useEditApplication.js b/apps/web/src/features/projects/hooks/useEditApplication.js
index 25902b70..8896921d 100644
--- a/apps/web/src/features/projects/hooks/useEditApplication.js
+++ b/apps/web/src/features/projects/hooks/useEditApplication.js
@@ -124,7 +124,7 @@ export default function useEditApplication(uuid, onSuccess) {
     return errors;
   };
 
-// Línea 127-195: REEMPLAZAR handleSubmit
+// Línea 165-195: REEMPLAZAR handleSubmit
 
 const handleSubmit = async (e, applicationData) => {
   e.preventDefault();
@@ -172,10 +172,10 @@ const handleSubmit = async (e, applicationData) => {
 
     console.log("📤 Enviando proyecto con datos EDITADOS:", projectData);
 
-    // ✅ CORRECCIÓN: Capturar respuesta del backend
+    // ✅ Llamar al endpoint de aprobación (POST /project/create)
     const response = await approveApplication(uuid, projectData);
     
-    console.log("✅ Respuesta del backend:", response);
+    console.log("✅ Respuesta del servicio:", response);
 
     // ✅ Extraer UUID del proyecto creado
     const projectUuid = response?.project?.uuid_project;
@@ -185,9 +185,11 @@ const handleSubmit = async (e, applicationData) => {
       throw new Error("No se pudo obtener el UUID del proyecto creado");
     }
 
+    console.log("✅ UUID del proyecto creado:", projectUuid);
+
     // ✅ Pasar UUID al callback de éxito
     if (onSuccess) {
-      onSuccess(projectUuid); // ✅ Pasar UUID del proyecto
+      onSuccess(projectUuid);
     }
 
   } catch (error) {
diff --git a/apps/web/src/features/projects/pages/ApplicationDetails.jsx b/apps/web/src/features/projects/pages/ApplicationDetails.jsx
index 792c1186..470138a1 100644
--- a/apps/web/src/features/projects/pages/ApplicationDetails.jsx
+++ b/apps/web/src/features/projects/pages/ApplicationDetails.jsx
@@ -83,10 +83,12 @@ const handleApproveSuccess = (projectUuid) => {
 
 // Línea 84-145: REEMPLAZAR handleApprove
 
+// Línea 84-145: REEMPLAZAR handleApprove
+
 const handleApprove = async () => {
   const result = await Alerts.confirm({
     title: '¿Aprobar este proyecto?',
-    text: 'Esta acción creará un nuevo proyecto activo basado en esta solicitud SIN modificaciones. El proyecto quedará disponible en "Mis Proyectos".',
+    text: 'Esta acción creará un nuevo proyecto activo basado en esta solicitud SIN modificaciones.',
     confirmText: 'Sí, aprobar',
     cancelText: 'Cancelar',
   });
@@ -98,7 +100,7 @@ const handleApprove = async () => {
   setIsApproving(true);
   
   try {
-    // Extraer IDs directamente del backend
+    // Extraer IDs de los arrays
     const projectTypeIds = application.projectTypes.map(pt => pt.id);
     const facultyIds = application.faculties.map(f => f.id);
     const problemTypeIds = application.problemTypes.map(pt => pt.id);
@@ -139,7 +141,7 @@ const handleApprove = async () => {
       
       loadingAlert.close();
 
-      console.log('✅ Proyecto aprobado:', response);
+      console.log('✅ Respuesta del backend:', response);
 
       // ✅ Extraer UUID del proyecto creado
       const projectUuid = response?.project?.uuid_project;
diff --git a/apps/web/src/features/projects/pages/ProjectDetails.jsx b/apps/web/src/features/projects/pages/ProjectDetails.jsx
index 690b11ff..ae1574b1 100644
--- a/apps/web/src/features/projects/pages/ProjectDetails.jsx
+++ b/apps/web/src/features/projects/pages/ProjectDetails.jsx
@@ -115,21 +115,34 @@ export default function ProjectDetails() {
     );
   }
 
-  // Extraer datos del proyecto
-  const {
-    title,
-    description,
-    shortDescription,
-    bannerUrl,
-    faculties = [],
-    author,
-    projectTypes = [],
-    problemTypes = [],
-    status,
-    createdAt,
-    estimatedDate,
-    attachments = [],
-  } = project;
+const {
+  title,
+  description,
+  shortDescription,
+  bannerUrl,
+  faculties = [],
+  author,
+  projectTypes = [],
+  problemTypes = [],
+  status,
+  statusDescription,
+  createdAt,
+  estimatedDate,
+  estimatedEffortHours,
+  teamMembers = [],
+  attachments = [],
+} = project;
+
+console.log("📊 [ProjectDetails] Datos del proyecto:", {
+  title,
+  projectTypes,
+  faculties,
+  problemTypes,
+  estimatedDate,
+  createdAt,
+  status,
+  teamMembers
+});
 
   // Obtener datos del autor
   const authorFirstName = author?.firstName || 'No especificado';
@@ -148,78 +161,100 @@ export default function ProjectDetails() {
   const authorRole = isOutsider ? 'Outsider' : 'Profesor';
 
   // Información del autor
-  const authorInfo = [
-    { 
-      label: 'Nombre', 
-      value: authorFullName
-    },
-    { 
-      label: 'Tipo de usuario', 
-      value: authorRole
-    },
-    ...(isOutsider ? [
-      { 
-        label: 'Organización', 
-        value: organizationName
-      },
-      { 
-        label: 'Teléfono de contacto', 
-        value: phoneNumber
-      },
-      { 
-        label: 'Ubicación', 
-        value: location
-      },
-    ] : [
-      {
-        label: 'Información',
-        value: 'Proyecto creado por un profesor'
-      }
-    ]),
-  ];
+// Línea 120-130: ACTUALIZAR authorInfo
 
-  // Información del proyecto
-  const projectInfo = [
+const authorInfo = [
+  { 
+    label: 'Nombre', 
+    value: author?.fullName || 'No especificado' 
+  },
+  { 
+    label: 'Correo', 
+    value: author?.email || 'No especificado' 
+  },
+  { 
+    label: 'Matrícula', 
+    value: author?.universityId || 'No especificada' 
+  },
+  { 
+    label: 'Tipo de usuario', 
+    value: author?.roleName === 'professor' ? 'Profesor' :
+           author?.roleName === 'student' ? 'Estudiante' :
+           author?.roleName === 'outsider' ? 'Externo' :
+           author?.roleName || 'No especificado'
+  },
+  ...(author?.outsider ? [
     { 
-      label: 'Tipo de proyecto', 
-      value: projectTypes.length > 0 
-        ? projectTypes
-            .map(pt => typeof pt === 'object' ? pt.name : pt)  // Soporte para ambos
-            .join(', ')
-        : 'No especificado' 
+      label: 'Organización', 
+      value: author.outsider.organizationName 
     },
     { 
-      label: 'Facultades', 
-      value: faculties.length > 0 
-        ? faculties
-            .map(f => typeof f === 'object' ? f.name : f)
-            .join(', ')
-        : 'No especificada' 
+      label: 'Teléfono', 
+      value: author.outsider.phoneNumber 
     },
     { 
-      label: 'Tipo de problemática', 
-      value: problemTypes.length > 0 
-        ? problemTypes
-            .map(pt => typeof pt === 'object' ? pt.name : pt)
-            .join(', ')
-        : 'No especificado' 
+      label: 'Ubicación', 
+      value: author.outsider.location 
     },
+  ] : [
     { 
-      label: 'Fecha estimada', 
-      value: formatDate(estimatedDate) 
-    },
-    { 
-      label: 'Fecha de creación', 
-      value: formatDate(createdAt) 
-    },
-    { 
-      label: 'Estado', 
-      value: status === 'in_progress' ? 'En Progreso' : 
-             status === 'completed' ? 'Completado' : 
-             status === 'approved' ? 'Aprobado' : 
-             status === 'pending' ? 'Pendiente' : status
-    },
-  ];
+      label: 'Información', 
+      value: author?.roleName === 'professor' 
+        ? 'Proyecto creado por un profesor' 
+        : author?.roleName === 'student'
+        ? 'Proyecto creado por un estudiante'
+        : 'Proyecto creado por un usuario externo'
+    }
+  ])
+];
+
+  // Información del proyecto
+// Línea 80-110: ACTUALIZAR projectInfo
+
+const projectInfo = [
+  { 
+    label: 'Tipo de proyecto', 
+    value: projectTypes.length > 0 
+      ? projectTypes.map(pt => pt.name).join(', ')
+      : 'No especificado' 
+  },
+  { 
+    label: 'Facultades', 
+    value: faculties.length > 0 
+      ? faculties.map(f => f.name).join(', ')
+      : 'No especificada' 
+  },
+  { 
+    label: 'Tipo de problemática', 
+    value: problemTypes.length > 0 
+      ? problemTypes.map(pt => pt.name).join(', ')
+      : 'No especificado' 
+  },
+  { 
+    label: 'Fecha estimada', 
+    value: estimatedDate ? formatDate(estimatedDate) : 'No especificada'
+  },
+  { 
+    label: 'Horas estimadas', 
+    value: estimatedEffortHours ? `${estimatedEffortHours} horas` : 'No especificadas'
+  },
+  { 
+    label: 'Fecha de creación', 
+    value: createdAt ? formatDate(createdAt) : 'No especificada'
+  },
+  { 
+    label: 'Estado', 
+    value: status || 'Aprobado'
+  },
+];
+
+// Línea 140-160: ACTUALIZAR teamInfo
+
+// ✅ Información del equipo
+const teamInfo = teamMembers.map(member => ({
+  label: member.role || 'Miembro',
+  value: `${member.fullName || 'Sin nombre'} (${member.email}) - ${member.universityId || 'Sin matrícula'}`
+}));
 
   // Función para contactar
   const handleContact = () => {
@@ -292,6 +327,16 @@ export default function ProjectDetails() {
           </h2>
           <ProjectInfoCard items={projectInfo} />
 
+          {/* ✅ Sección de Equipo (si hay miembros) */}
+{project.teamMembers && project.teamMembers.length > 0 && (
+  <>
+    <h2 className="text-3xl font-bold mb-3 mt-8">
+      Equipo del <span className="text-lime-700">proyecto</span>
+    </h2>
+    <ProjectInfoCard items={teamInfo} />
+  </>
+)}
+
           {/* Botones de acción */}
           <div className="flex flex-col gap-3 pt-6 w-11/12">
             {/* Botón Descargar Todos los Archivos */}
diff --git a/apps/web/src/features/projects/projectsService.js b/apps/web/src/features/projects/projectsService.js
index 533d5a46..6b0bc850 100644
--- a/apps/web/src/features/projects/projectsService.js
+++ b/apps/web/src/features/projects/projectsService.js
@@ -321,8 +321,6 @@ export async function downloadAllAttachments(attachments) {
   return { successful, failed, errors };
 }
 
-// Línea 277-330: REEMPLAZAR función approveApplication
-
 /**
  * Aprueba una Application y crea un Project
  * @param {string} uuid_application - UUID de la Application a aprobar
@@ -333,21 +331,29 @@ export async function downloadAllAttachments(attachments) {
 export async function approveApplication(uuid_application, projectData = {}) {
   const csrfToken = await getCSRFToken();
 
-  // ✅ CORRECCIÓN: El backend espera estos nombres de campos
+  // ✅ Construir payload solo con campos que tengan valor
   const payload = {
     uuidApplication: uuid_application,
     title: projectData.title,
     shortDescription: projectData.shortDescription,
     description: projectData.description,
     estimatedDate: projectData.estimatedDate,
-    
-    // ✅ CAMBIOS CRÍTICOS:
-    projectTypeId: projectData.projectType?.[0] || null,  // ← Tomar el primer elemento (singular)
-    facultyIds: projectData.faculty || [],                 // ← Renombrar a facultyIds (plural)
-    problemTypeIds: projectData.problemType || [],         // ← Renombrar a problemTypeIds (plural)
+    projectTypeId: projectData.projectType?.[0] || null, // ✅ Solo el primer tipo
+    facultyIds: projectData.faculty || [],
+    problemTypeIds: projectData.problemType || [],
   };
 
-  console.log("📤 Payload enviado a /project/create:", payload);
+  // ✅ Solo agregar problemTypeOther si existe
+  if (projectData.problemTypeOther !== undefined && projectData.problemTypeOther !== null) {
+    payload.problemTypeOther = projectData.problemTypeOther;
+  }
+
+  // ✅ Solo agregar estimatedEffortHours si existe
+  if (projectData.estimatedEffortHours !== undefined) {
+    payload.estimatedEffortHours = projectData.estimatedEffortHours;
+  }
+
+  console.log("📤 [projectsService] Payload final:", payload);
 
   const response = await fetchWithAuthAndAutoRefresh(
     `${API_URL}/project/create`,
@@ -361,6 +367,9 @@ export async function approveApplication(uuid_application, projectData = {}) {
     }
   );
 
+  console.log("✅ [projectsService] Respuesta completa del backend:", response);
+
+  // ✅ Retornar response.data (contiene { project: {...} })
   return response.data;
 }
 
@@ -428,6 +437,9 @@ export async function getMyProjects(page = 1, limit = 9) {
     pagination: paginationData,
   };
 }
+
+// Línea 416-490: REEMPLAZAR función getProjectDetails
+
 /**
  * Obtiene los detalles completos de un proyecto específico
  * @param {string} uuid - UUID del proyecto
@@ -435,33 +447,39 @@ export async function getMyProjects(page = 1, limit = 9) {
  * @throws {ApplicationError}
  */
 export async function getProjectDetails(uuid) {
-  // Hice uso del endpoint de Application porque Project hereda sus datos
-  // El backend aún no tiene GET /project/:uuid implementado
-  
   const response = await fetchWithAuthAndAutoRefresh(
-    `${API_URL}/application/${uuid}`,
+    `${API_URL}/project/${uuid}`,
     {
       method: "GET",
       headers: { "Content-Type": "application/json" },
     }
   );
 
-  const app = response.data.application;
+  const proj = response.data.project;
+
+  console.log("✅ [getProjectDetails] Respuesta del backend:", proj);
+
+  // ✅ Extraer datos correctamente según la estructura real del backend
+  const details = proj.details || {};
+  const author = proj.author || {};
 
-  // Normalizar estructura para ProjectDetails.jsx
   return {
-    uuid_project: app.uuid_application,
-    title: app.details?.title || 'Sin título',
-    description: app.details?.description || app.details?.shortDescription || 'Sin descripción',
-    shortDescription: app.details?.shortDescription || 'Sin descripción corta',
+    // IDs
+    uuid_project: proj.uuid_project,
+    uuidApplication: proj.uuidApplication,
+
+    // Información básica del proyecto
+    title: details.title || 'Sin título',
+    description: details.description || 'Sin descripción',
+    shortDescription: details.shortDescription || 'Sin descripción corta',
     
-    // Banner
-    bannerUrl: app.bannerUrl?.startsWith('http')
-      ? app.bannerUrl
-      : app.bannerUrl ? `${API_URL}${app.bannerUrl}` : null,
+    // Banner con URL absoluta
+    bannerUrl: proj.bannerUrl?.startsWith('http')
+      ? proj.bannerUrl
+      : proj.bannerUrl ? `${API_URL}${proj.bannerUrl}` : null,
     
-    // Attachments
-    attachments: (app.attachments || []).map(att => ({
+    // Attachments con URLs absolutas
+    attachments: (proj.appAttachments || []).map(att => ({
       downloadUrl: att.downloadUrl?.startsWith('http') 
         ? att.downloadUrl 
         : `${API_URL}${att.downloadUrl}`,
@@ -472,29 +490,51 @@ export async function getProjectDetails(uuid) {
     
     // Autor
     author: {
-      uuid_user: app.author?.uuid_user,
-      firstName: app.author?.fullName?.split(' ')[0] || 'No especificado',
-      lastName: app.author?.fullName?.split(' ').slice(1).join(' ') || '',
-      email: app.author?.email,
-      outsider: app.author?.outsider ? {
-        organizationName: app.author.outsider.organizationName,
-        phoneNumber: app.author.outsider.phoneNumber,
-        location: app.author.outsider.location,
+      uuid_user: author.uuid_user,
+      firstName: author.fullName?.split(' ')[0] || 'No especificado',
+      lastName: author.fullName?.split(' ').slice(1).join(' ') || '',
+      fullName: author.fullName || 'No especificado',
+      email: author.email,
+      universityId: author.universityId,
+      roleName: author.roleName,
+      outsider: author.outsider ? {
+        organizationName: author.outsider.organizationName,
+        phoneNumber: author.outsider.phoneNumber,
+        location: author.outsider.location,
       } : null,
     },
     
-    // Metadata
-    faculties: app.details?.faculties || [],
-    projectTypes: app.details?.projectTypes || [],
-    problemTypes: app.details?.problemTypes || [],
+    // ✅ Metadata del proyecto (extraído de details)
+    projectTypes: details.projectType ? [{
+      name: details.projectType.name,
+      minEstimatedMonths: details.projectType.minEstimatedMonths,
+      maxEstimatedMonths: details.projectType.maxEstimatedMonths,
+      requiredHours: details.projectType.requiredHours,
+    }] : [],
     
-    // Fechas y estado
-    createdAt: app.createdAt,
-    estimatedDate: app.details?.deadline,
-    status: app.status || 'approved', // Projects son applications aprobadas
+    faculties: details.faculties || [],
+    
+    problemTypes: details.problemTypes || [],
+    
+    // ✅ Team members (extraído de details.teamMembers)
+    teamMembers: (details.teamMembers || []).map(member => ({
+      uuid_user: member.uuid_user,
+      fullName: member.fullName,
+      email: member.email,
+      universityId: member.universityId,
+      role: member.role,
+    })),
+    
+    // Estado del proyecto
+    status: details.status?.name || 'approved',
+    statusDescription: details.status?.description,
+    
+    // Fechas
+    createdAt: details.createdAt,
+    estimatedDate: details.estimatedDate,
+    estimatedEffortHours: details.estimatedEffortHours,
   };
 }
-
 /**
  * Edita una Application existente (solo metadata)
  * @param {string} uuid - UUID de la Application

From d080b2d1ab6b3cbf76f8b767c71e2e8292c643fb Mon Sep 17 00:00:00 2001
From: Cuenta Generica <confluence@clevercloud.mx>
Date: Sun, 23 Nov 2025 01:17:38 -0600
Subject: [PATCH 3/4] edit application v1

---
 apps/web/src/components/Sidebar.jsx           |  20 +-
 apps/web/src/config/sidebarConfig.js          |  40 +-
 .../components/EditApplicationModal.jsx       | 429 ++++++----
 .../components/RequestProjectForm.jsx         | 772 +++++++++++-------
 .../projects/hooks/useEditApplication.js      | 385 ++++++---
 .../projects/hooks/useRequestProject.js       | 236 ++++--
 .../projects/pages/ApplicationDetails.jsx     | 212 +++--
 .../projects/pages/MyApplicationDetails.jsx   |  35 +-
 .../projects/pages/ProjectDetails.jsx         | 247 +++---
 .../projects/pages/RequestProject.jsx         |  14 +-
 .../src/features/projects/projectsService.js  | 175 ++--
 apps/web/src/utils/dateUtils.js               |  53 ++
 12 files changed, 1575 insertions(+), 1043 deletions(-)
 create mode 100644 apps/web/src/utils/dateUtils.js

diff --git a/apps/web/src/components/Sidebar.jsx b/apps/web/src/components/Sidebar.jsx
index aa025acd..14d3a023 100644
--- a/apps/web/src/components/Sidebar.jsx
+++ b/apps/web/src/components/Sidebar.jsx
@@ -46,16 +46,16 @@ const SidebarIcon = ({ icon, isDark }) => {
         <path fill="currentColor" d="M7 12v1c0 1.886 0 2.828.586 3.414S9.114 17 11 17h1v1c0 1.886 0 2.828-.586 3.414S9.886 22 8 22H6c-1.886 0-2.828 0-3.414-.586S2 19.886 2 18v-2c0-1.886 0-2.828.586-3.414S4.114 12 6 12z" opacity=".4"/>
       </svg>
     ),
-    favorites: (
-      <svg className={iconClass} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-        <path fill="currentColor" d="M17.562 21.56a1 1 0 0 1-.465-.115L12 18.765l-5.097 2.68a1 1 0 0 1-1.451-1.054l.973-5.676l-4.123-4.02a1 1 0 0 1 .554-1.705l5.699-.828l2.548-5.164a1.042 1.042 0 0 1 1.794 0l2.548 5.164l5.699.828a1 1 0 0 1 .554 1.706l-4.123 4.019l.973 5.676a1 1 0 0 1-.986 1.169"/>
-      </svg>
-    ),
-    members: (
-      <svg className={iconClass} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-        <path fill="currentColor" fillRule="evenodd" d="M8 4a4 4 0 1 0 0 8a4 4 0 0 0 0-8m-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4zm7.25-2.095c.478-.86.75-1.85.75-2.905a6 6 0 0 0-.75-2.906a4 4 0 1 1 0 5.811M15.466 20c.34-.588.535-1.271.535-2v-1a5.98 5.98 0 0 0-1.528-4H18a4 4 0 0 1 4 4v1a2 2 0 0 1-2 2z" clipRule="evenodd"/>
-      </svg>
-    ),
+    // favorites: (
+    //   <svg className={iconClass} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    //     <path fill="currentColor" d="M17.562 21.56a1 1 0 0 1-.465-.115L12 18.765l-5.097 2.68a1 1 0 0 1-1.451-1.054l.973-5.676l-4.123-4.02a1 1 0 0 1 .554-1.705l5.699-.828l2.548-5.164a1.042 1.042 0 0 1 1.794 0l2.548 5.164l5.699.828a1 1 0 0 1 .554 1.706l-4.123 4.019l.973 5.676a1 1 0 0 1-.986 1.169"/>
+    //   </svg>
+    // ),
+    // members: (
+    //   <svg className={iconClass} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    //     <path fill="currentColor" fillRule="evenodd" d="M8 4a4 4 0 1 0 0 8a4 4 0 0 0 0-8m-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4zm7.25-2.095c.478-.86.75-1.85.75-2.905a6 6 0 0 0-.75-2.906a4 4 0 1 1 0 5.811M15.466 20c.34-.588.535-1.271.535-2v-1a5.98 5.98 0 0 0-1.528-4H18a4 4 0 0 1 4 4v1a2 2 0 0 1-2 2z" clipRule="evenodd"/>
+    //   </svg>
+    // ),
     admin: (
       <svg className={iconClass} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
         <path fill="currentColor" d="m9.25 22l-.4-3.2q-.325-.125-.612-.3t-.563-.375L4.7 19.375l-2.75-4.75l2.575-1.95Q4.5 12.5 4.5 12.338v-.675q0-.163.025-.338L1.95 9.375l2.75-4.75l2.975 1.25q.275-.2.575-.375t.6-.3l.4-3.2h5.5l.4 3.2q.325.125.613.3t.562.375l2.975-1.25l2.75 4.75l-2.575 1.95q.025.175.025.338v.674q0 .163-.05.338l2.575 1.95l-2.75 4.75l-2.95-1.25q-.275.2-.575.375t-.6.3l-.4 3.2zm2.8-6.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12t1.013 2.475T12.05 15.5"/>
diff --git a/apps/web/src/config/sidebarConfig.js b/apps/web/src/config/sidebarConfig.js
index 15c9a100..d7952c85 100644
--- a/apps/web/src/config/sidebarConfig.js
+++ b/apps/web/src/config/sidebarConfig.js
@@ -25,11 +25,11 @@ export const SIDEBAR_ITEMS = {
       label: 'Mis proyectos',
       icon: 'myProjects'
     },
-    {
-      path: '/favorite-projects',
-      label: 'Mis favoritos',
-      icon: 'favorites'
-    }
+    // {
+    //   path: '/favorite-projects',
+    //   label: 'Mis favoritos',
+    //   icon: 'favorites'
+    // }
   ],
   
   // STUDENT - Puede explorar y aplicar a proyectos
@@ -54,11 +54,11 @@ export const SIDEBAR_ITEMS = {
       label: 'Mis proyectos',
       icon: 'myProjects'
     },
-    {
-      path: '/favorite-projects',
-      label: 'Mis favoritos',
-      icon: 'favorites'
-    }
+    // {
+    //   path: '/favorite-projects',
+    //   label: 'Mis favoritos',
+    //   icon: 'favorites'
+    // }
   ],
   
   // PROFESSOR - Puede explorar, solicitar y gestionar proyectos
@@ -88,16 +88,16 @@ export const SIDEBAR_ITEMS = {
       label: 'Mis proyectos',
       icon: 'myProjects'
     },
-    {
-      path: '/favorite-projects',
-      label: 'Mis favoritos',
-      icon: 'favorites'
-    },
-    {
-      path: '/members',
-      label: 'Miembros',
-      icon: 'members'
-    }
+    // {
+    //   path: '/favorite-projects',
+    //   label: 'Mis favoritos',
+    //   icon: 'favorites'
+    // },
+    // {
+    //   path: '/members',
+    //   label: 'Miembros',
+    //   icon: 'members'
+    // }
   ],
   
   // ADMIN - Acceso completo + panel de administración
diff --git a/apps/web/src/features/projects/components/EditApplicationModal.jsx b/apps/web/src/features/projects/components/EditApplicationModal.jsx
index bed8beb8..ebe3b542 100644
--- a/apps/web/src/features/projects/components/EditApplicationModal.jsx
+++ b/apps/web/src/features/projects/components/EditApplicationModal.jsx
@@ -1,29 +1,64 @@
 import { useEffect } from 'react';
 import useEditApplication from '../hooks/useEditApplication';
 import useFormProjectMetadata from '../hooks/useFormProjectMetadata';
+import { formatDateStringSpanish } from '@/utils/dateUtils';
 
-/**
- * Modal para editar metadata y aprobar una Application
- * @param {boolean} isOpen - Si el modal está abierto
- * @param {Function} onClose - Callback al cerrar el modal
- * @param {string} uuid - UUID de la aplicación
- * @param {Object} application - Datos de la aplicación actual
- * @param {Function} onSuccess - Callback al aprobar exitosamente
- */
-export default function EditApplicationModal({ isOpen, onClose, uuid, application, onSuccess }) {
-  const { form, fieldErrors, isLoading, handleChange, handleSubmit, initializeForm } = 
-    useEditApplication(uuid, (projectUuid) => {
-      console.log("✅ [EditApplicationModal] Proyecto creado con UUID:", projectUuid);
-      
-      // ✅ Cerrar modal antes de llamar a onSuccess
-      onClose();
-      
-      // ✅ Pasar UUID del proyecto al componente padre
-      onSuccess(projectUuid);
-    });
-
+export default function EditApplicationModal({ 
+  isOpen, 
+  onClose, 
+  uuid, 
+  application, 
+  onEditSuccess,
+  onApproveSuccess 
+}) {
   const { faculties, projectTypes, problemTypes } = useFormProjectMetadata();
 
+  // Buscar la fecha de creación en múltiples ubicaciones posibles
+  const getApplicationCreatedAt = () => {
+    if (!application) return undefined;
+
+    return (
+      application.createdAt ||
+      application.created_at ||
+      application.requestedAt ||
+      application.requested_at ||
+      application.requestDate ||
+      application.request_date ||
+      application.createdDate ||
+      application.created_date ||
+      application.dueDate
+    );
+  };
+
+  const applicationCreatedAt = getApplicationCreatedAt();
+
+  const { 
+    form, 
+    fieldErrors, 
+    isLoading, 
+    handleChange, 
+    handleSaveOnly,
+    handleSaveAndApprove,
+    initializeForm,
+    deadlineConstraints
+  } = useEditApplication(
+    uuid,
+    () => {
+      onClose();
+      if (onEditSuccess) {
+        onEditSuccess();
+      }
+    },
+    (projectUuid) => {
+      onClose();
+      if (onApproveSuccess) {
+        onApproveSuccess(projectUuid);
+      }
+    },
+    projectTypes,
+    applicationCreatedAt
+  );
+
   // Inicializar formulario cuando se abre el modal
   useEffect(() => {
     if (isOpen && application) {
@@ -33,15 +68,28 @@ export default function EditApplicationModal({ isOpen, onClose, uuid, applicatio
 
   if (!isOpen) return null;
 
+  // Agregar opción "Otro" a los tipos de problemática
   const extendedProblemTypes = [...problemTypes, { problem_type_id: "otro", name: "Otro" }];
 
+  const handleFacultyChange = (facultyId) => {
+    handleChange({
+      target: {
+        name: 'faculty',
+        value: facultyId,
+        type: 'radio',
+        checked: true
+      }
+    });
+  };
+
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+        
         {/* Header */}
-        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between rounded-t-2xl z-10">
-          <h2 className="text-2xl font-bold text-gray-800">
-            Editar y <span className="text-lime-600">Aprobar Proyecto</span>
+        <div className="sticky top-0 bg-white border-b border-gray-200 px-8 py-6 flex items-center justify-between rounded-t-2xl">
+          <h2 className="text-3xl font-bold">
+            Editar <span className="text-lime-700">proyecto</span>
           </h2>
           <button
             onClick={onClose}
@@ -55,202 +103,263 @@ export default function EditApplicationModal({ isOpen, onClose, uuid, applicatio
         </div>
 
         {/* Body */}
-        <form onSubmit={(e) => handleSubmit(e, application)} className="p-6 space-y-6">
-          {/* Información del proyecto actual */}
-          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-            <div className="flex items-start gap-3">
-              <svg className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
-              </svg>
-              <div className="flex-1">
-                <p className="text-sm font-semibold text-blue-800 mb-1">Proyecto: {application?.title}</p>
-                <p className="text-xs text-blue-700">
-                  Edita la metadata del proyecto si es necesario. Al guardar, el proyecto será aprobado automáticamente.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          {/* Tipo de proyecto */}
+        <form className="px-8 py-6 space-y-6">
+          
+          {/* Tipo de Proyecto */}
           <div>
-            <label className="block mb-2 font-semibold text-gray-700">
-              Tipo de proyecto *
+            <label className="block text-lg font-semibold mb-3">
+              Tipo de proyecto <span className="text-lime-700">*</span>
             </label>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-              {projectTypes.map(({ project_type_id, name }) => (
-                <label key={project_type_id} className="flex items-center gap-2 cursor-pointer">
+            <div className="grid grid-cols-2 gap-3">
+              {projectTypes.map((type) => (
+                <label
+                  key={type.project_type_id}
+                  className={`flex items-center gap-3 p-4 border-2 rounded-lg cursor-pointer transition ${
+                    form.projectType.includes(type.project_type_id)
+                      ? 'border-lime-600 bg-lime-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
                   <input
-                    type="checkbox"
+                    type="radio"
                     name="projectType"
-                    value={project_type_id}
-                    checked={form.projectType.includes(Number(project_type_id))}
+                    value={type.project_type_id}
+                    checked={form.projectType.includes(type.project_type_id)}
                     onChange={handleChange}
-                    className="w-4 h-4 text-lime-600 border-gray-300 rounded focus:ring-lime-500"
+                    className="w-5 h-5 text-lime-600 rounded focus:ring-lime-500 border-gray-300"
+                    style={{ accentColor: '#65a30d' }}
                   />
-                  <span className="text-gray-700 text-sm">{name}</span>
+                  <div className="flex-1">
+                    <span className="text-sm font-medium block">{type.name}</span>
+                    {type.name !== 'Proyectos de investigación' ? (
+                      <span className="text-xs text-gray-500">
+                      {type.minEstimatedMonths} meses
+                    </span>
+                    ) : (
+                      <span className="text-xs text-gray-500">
+                      De {type.minEstimatedMonths} a {type.maxEstimatedMonths} meses
+                    </span>
+                    )}
+                  </div>
                 </label>
               ))}
             </div>
-            {fieldErrors?.projectType && (
-              <p className="mt-1 text-sm text-red-600">{fieldErrors.projectType}</p>
+            {fieldErrors.projectType && (
+              <p className="text-red-500 text-sm mt-2">{fieldErrors.projectType}</p>
             )}
           </div>
 
-          {/* Facultades */}
+          {/* Facultad */}
           <div>
-            <label className="block mb-2 font-semibold text-gray-700">
-              Facultades sugeridas *
+            <label className="block text-lg font-semibold mb-3">
+              Facultad <span className="text-lime-700">*</span>
             </label>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-              {faculties.map(({ faculty_id, name }) => (
-                <label key={faculty_id} className="flex items-center gap-2 cursor-pointer">
+            <div className="grid grid-cols-2 gap-3">
+              {faculties.map((faculty) => (
+                <label
+                  key={faculty.faculty_id}
+                  className={`flex items-center gap-3 p-4 border-2 rounded-lg cursor-pointer transition ${
+                    form.faculty.includes(faculty.faculty_id)
+                      ? 'border-lime-600 bg-lime-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
                   <input
-                    type="checkbox"
+                    type="radio"
                     name="faculty"
-                    value={faculty_id}
-                    checked={form.faculty.includes(Number(faculty_id))}
-                    onChange={handleChange}
-                    className="w-4 h-4 text-lime-600 border-gray-300 rounded focus:ring-lime-500"
+                    value={faculty.faculty_id}
+                    checked={form.faculty.includes(faculty.faculty_id)}
+                    onChange={() => handleFacultyChange(faculty.faculty_id)}
+                    className="w-5 h-5 text-lime-600 focus:ring-lime-500 border-gray-300"
+                    style={{ accentColor: '#65a30d' }}
                   />
-                  <span className="text-gray-700 text-sm">{name}</span>
+                  <span className="text-sm font-medium">{faculty.name}</span>
                 </label>
               ))}
             </div>
-            {fieldErrors?.faculty && (
-              <p className="mt-1 text-sm text-red-600">{fieldErrors.faculty}</p>
+            {fieldErrors.faculty && (
+              <p className="text-red-500 text-sm mt-2">{fieldErrors.faculty}</p>
             )}
           </div>
 
-          {/* Tipo de problemática */}
+          {/* Tipo de Problemática */}
           <div>
-            <label className="block mb-2 font-semibold text-gray-700">
-              Tipo de problemática *
+            <label className="block text-lg font-semibold mb-3">
+              Tipo de problemática <span className="text-lime-700">*</span>
             </label>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-              {extendedProblemTypes.map(({ problem_type_id, name }) => (
-                <label key={problem_type_id} className="flex items-center gap-2 cursor-pointer">
+            <div className="grid grid-cols-2 gap-3">
+              {extendedProblemTypes.map((type) => (
+                <label
+                  key={type.problem_type_id}
+                  className={`flex items-center gap-3 p-4 border-2 rounded-lg cursor-pointer transition ${
+                    form.problemType.includes(type.problem_type_id) ||
+                    form.problemType.includes("otro")
+                      ? 'border-lime-600 bg-lime-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
                   <input
                     type="checkbox"
                     name="problemType"
-                    value={problem_type_id}
-                    checked={form.problemType.includes(
-                      problem_type_id === "otro" ? "otro" : Number(problem_type_id)
-                    )}
+                    value={type.problem_type_id}
+                    checked={form.problemType.includes(type.problem_type_id) ||
+                             (type.problem_type_id === "otro" && form.problemType.includes("otro"))}
                     onChange={handleChange}
-                    className="w-4 h-4 text-lime-600 border-gray-300 rounded focus:ring-lime-500"
+                    className="w-5 h-5 text-lime-600 rounded focus:ring-lime-500 border-gray-300"
+                    style={{ accentColor: '#65a30d' }}
                   />
-                  <span className="text-gray-700 text-sm">{name}</span>
+                  <span className="text-sm font-medium">{type.name}</span>
                 </label>
               ))}
             </div>
-            {fieldErrors?.problemType && (
-              <p className="mt-1 text-sm text-red-600">{fieldErrors.problemType}</p>
+            {fieldErrors.problemType && (
+              <p className="text-red-500 text-sm mt-2">{fieldErrors.problemType}</p>
             )}
-
-            {/* Campo "Otro" */}
-{form.problemType.includes('otro') && (
-  <div className="mt-3">
-    <label className="block mb-2 text-sm font-medium text-gray-700">
-      Describe la problemática: *
-    </label>
-    <input
-      name="problemTypeOther"
-      value={form.problemTypeOther}
-      onChange={handleChange}
-      placeholder="Ej: Problemática educativa rural"
-      className={`w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-lime-500 ${
-        fieldErrors?.problemTypeOther ? 'border-red-500' : 'border-gray-300'
-      }`}
-    />
-    {fieldErrors?.problemTypeOther && (
-      <p className="mt-1 text-sm text-red-600">{fieldErrors.problemTypeOther}</p>
-    )}
-  </div>
-)}
-
           </div>
 
-          {/* Vigencia */}
+          {/* Campo "Otro" - Descripción personalizada */}
+          {form.problemType.includes("otro") && (
+            <div>
+              <label className="block text-lg font-semibold mb-2">
+                Describe la problemática <span className="text-lime-700">*</span>
+              </label>
+              <textarea
+                name="problemTypeOther"
+                value={form.problemTypeOther}
+                onChange={handleChange}
+                placeholder="Describe la problemática personalizada..."
+                rows="3"
+                className={`w-full px-4 py-3 border-2 rounded-lg focus:outline-none focus:ring-2 ${
+                  fieldErrors.problemTypeOther
+                    ? 'border-red-500 focus:ring-red-500'
+                    : 'border-gray-300 focus:ring-lime-500'
+                }`}
+              />
+              {fieldErrors.problemTypeOther && (
+                <p className="text-red-500 text-sm mt-2">{fieldErrors.problemTypeOther}</p>
+              )}
+            </div>
+          )}
+
+          {/* Vigencia - Fecha límite del proyecto */}
           <div>
-            <label className="block mb-2 font-semibold text-gray-700">
-              Vigencia (fecha límite) *
+            <label className="block text-lg font-semibold mb-2">
+              Vigencia <span className="text-lime-700">*</span>
             </label>
+            
+            {/* Información del rango de fechas permitidas */}
+            {deadlineConstraints.projectTypeName && deadlineConstraints.applicationDate ? (
+              <div className="mb-3 p-4 bg-gradient-to-r from-lime-50 to-lime-100 border-l-4 border-lime-500 rounded-lg shadow-sm">
+                <div className="flex items-start gap-3">
+                  <svg className="w-6 h-6 text-lime-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                  <div className="flex-1">
+                    <p className="text-sm font-bold text-lime-900 mb-2">
+                      {deadlineConstraints.projectTypeName}
+                    </p>
+                    <div className="space-y-2 text-xs text-lime-800">
+                      <p className="bg-lime-600 p-2 rounded text-white w-fit">
+                        <span className="font-semibold">Fecha de solicitud:</span>{' '}
+                        {formatDateStringSpanish(deadlineConstraints.applicationDate)}
+                      </p>
+                      <p>
+                        <span className="font-semibold">Fecha mínima:</span>{' '}
+                        {formatDateStringSpanish(deadlineConstraints.min)}
+                      </p>
+                      <p>
+                        <span className="font-semibold">Fecha máxima:</span>{' '}
+                        {formatDateStringSpanish(deadlineConstraints.max)}
+                      </p>
+                      <p className="text-white font-semibold mt-2 bg-lime-800 p-2 rounded w-fit">
+                        Duración del proyecto: {deadlineConstraints.minMonths} a {deadlineConstraints.maxMonths} meses desde la fecha de solicitud
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="mb-3 p-3 bg-yellow-50 border-l-4 border-yellow-400 rounded">
+                <p className="text-sm text-yellow-800">
+                  Selecciona un tipo de proyecto para ver el rango de fechas permitidas
+                </p>
+              </div>
+            )}
+
+            {/* Input de fecha */}
             <input
+              type="date"
               name="deadline"
               value={form.deadline}
               onChange={handleChange}
-              type="date"
-              className={`w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-lime-500 ${
-                fieldErrors?.deadline ? 'border-red-500' : 'border-gray-300'
+              min={deadlineConstraints.min || undefined}
+              max={deadlineConstraints.max || undefined}
+              disabled={!deadlineConstraints.min}
+              className={`w-full px-4 py-3 border-2 rounded-lg focus:outline-none focus:ring-2 transition ${
+                fieldErrors.deadline
+                  ? 'border-red-500 focus:ring-red-500 bg-red-50'
+                  : !deadlineConstraints.min
+                  ? 'border-gray-200 bg-gray-100 cursor-not-allowed'
+                  : 'border-gray-300 focus:ring-lime-500 hover:border-gray-400'
               }`}
             />
-            {fieldErrors?.deadline && (
-              <p className="mt-1 text-sm text-red-600">{fieldErrors.deadline}</p>
+            
+            {/* Mensaje de error */}
+            {fieldErrors.deadline && (
+              <div className="mt-2 p-3 bg-red-50 border-l-4 border-red-500 rounded flex items-start gap-2">
+                <svg className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                </svg>
+                <p className="text-red-700 text-sm font-semibold flex-1">
+                  {fieldErrors.deadline}
+                </p>
+              </div>
             )}
-          </div>
 
-          {/* TODO: Razón de edición (placeholder) */}
-          <div>
-            <label className="block mb-2 font-semibold text-gray-700">
-              Razón de la edición
-              <span className="ml-2 text-xs text-gray-500 font-normal">(Próximamente)</span>
-            </label>
-            <textarea
-              name="editReason"
-              value={form.editReason}
-              onChange={handleChange}
-              placeholder="Este campo estará disponible próximamente..."
-              className="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-lime-500 bg-gray-50"
-              rows={3}
-              disabled
-            />
-            <p className="mt-1 text-xs text-gray-500">
-              🚧 Esta funcionalidad se implementará después de la revisión con los asesores.
-            </p>
-          </div>
-
-          {/* Advertencia */}
-          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-            <div className="flex items-start gap-3">
-              <svg className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-              </svg>
-              <div className="flex-1">
-                <p className="text-sm font-semibold text-yellow-800 mb-1">⚠️ Importante</p>
-                <p className="text-xs text-yellow-700">
-                  Al hacer clic en "Guardar y Aprobar", el proyecto será aprobado inmediatamente con los cambios realizados y 
-                  quedará disponible en "Mis Proyectos". Esta acción no se puede deshacer.
+            {/* Mensaje de éxito */}
+            {!fieldErrors.deadline && form.deadline && deadlineConstraints.min && (
+              <div className="mt-2 p-3 bg-lime-50 border-l-4 border-lime-500 rounded flex items-start gap-2">
+                <svg className="w-5 h-5 text-lime-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+                <p className="text-lime-700 text-sm font-semibold">
+                  Fecha válida seleccionada
                 </p>
               </div>
-            </div>
+            )}
           </div>
 
-          {/* Botones */}
-          <div className="flex justify-end gap-3 pt-4 border-t border-gray-200">
+          {/* Botones de acción */}
+          <div className="flex gap-4 pt-4">
             <button
               type="button"
-              onClick={onClose}
+              onClick={(e) => handleSaveOnly(e, application)}
               disabled={isLoading}
-              className="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition disabled:opacity-50"
+              className="flex-1 bg-gray-600 text-white py-3 rounded-lg font-semibold hover:bg-gray-700 transition disabled:bg-gray-400 disabled:cursor-not-allowed"
             >
-              Cancelar
+              {isLoading ? 'Guardando...' : 'Guardar cambios'}
             </button>
+
             <button
-              type="submit"
-              disabled={isLoading}
-              className="px-6 py-2 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+              type="button"
+              onClick={(e) => handleSaveAndApprove(e, application)}
+              disabled={isLoading || !deadlineConstraints.min}
+              className="flex-1 bg-lime-600 text-white py-3 rounded-lg font-semibold hover:bg-lime-700 transition disabled:bg-lime-400 disabled:cursor-not-allowed"
             >
-              {isLoading && (
-                <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
-              )}
-              {isLoading ? 'Aprobando...' : 'Guardar y Aprobar Proyecto'}
+              {isLoading ? 'Aprobando...' : 'Guardar y aprobar proyecto'}
             </button>
           </div>
+
+          {/* Información importante */}
+          <div className="p-4 bg-gray-200 border border-gray-300 rounded-lg text-sm text-gray-700">
+            <p className="font-semibold mb-1">Información importante:</p>
+            <ul className="list-disc list-inside space-y-1 text-xs">
+              <li><strong>"Guardar cambios":</strong> Solo actualiza la información, la solicitud permanece pendiente</li>
+              <li><strong>"Guardar y aprobar proyecto":</strong> Actualiza la información y crea el proyecto inmediatamente</li>
+            </ul>
+          </div>
         </form>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/features/projects/components/RequestProjectForm.jsx b/apps/web/src/features/projects/components/RequestProjectForm.jsx
index 88057a56..c1765c4c 100644
--- a/apps/web/src/features/projects/components/RequestProjectForm.jsx
+++ b/apps/web/src/features/projects/components/RequestProjectForm.jsx
@@ -2,14 +2,15 @@ import React, { useState, useRef, useEffect } from 'react'
 import pdfIcon from '@/assets/icons/pdf.svg'
 import docIcon from '@/assets/icons/doc.svg'
 import zipIcon from '@/assets/icons/zip.svg'
-import excelIcon from '@/assets/icons/excel.svg'           
-import powerpointIcon from '@/assets/icons/powerpoint.svg' 
-import imageIcon from '@/assets/icons/image.svg'           
-import videoIcon from '@/assets/icons/video.svg'           
-import audioIcon from '@/assets/icons/audio.svg'           
-import textIcon from '@/assets/icons/text.svg'             
-import fileIcon from '@/assets/icons/file.svg'           
+import excelIcon from '@/assets/icons/excel.svg'
+import powerpointIcon from '@/assets/icons/powerpoint.svg'
+import imageIcon from '@/assets/icons/image.svg'
+import videoIcon from '@/assets/icons/video.svg'
+import audioIcon from '@/assets/icons/audio.svg'
+import textIcon from '@/assets/icons/text.svg'
+import fileIcon from '@/assets/icons/file.svg'
 import useFormProjectMetadata from "../hooks/useFormProjectMetadata"
+import { formatDateStringSpanish } from '@/utils/dateUtils'
 
 export default function RequestProjectForm({ 
   form, 
@@ -18,7 +19,8 @@ export default function RequestProjectForm({
   handleChange, 
   handleBannerSelection,
   handleRemoveAttachment,
-  handleSubmit 
+  handleSubmit,
+  deadlineConstraints
 }) {
   const [showInfo, setShowInfo] = useState(false)
   const bannerInputRef = useRef(null)
@@ -27,17 +29,12 @@ export default function RequestProjectForm({
   const { faculties, projectTypes, problemTypes, defaultBanners } = useFormProjectMetadata()
   const extendedProblemTypes = [...problemTypes, { problem_type_id: "otro", name: "Otro" }]
 
-  // Usar el estado del hook padre (form.customBannerFile, form.attachments)
   const customBannerPreview = form.customBannerFile 
     ? URL.createObjectURL(form.customBannerFile) 
     : null;
 
-  // ========== BANNER HANDLERS ==========
   const handleDefaultBannerSelect = (banner) => {
-    // Limpiar banner custom
     if (bannerInputRef.current) bannerInputRef.current.value = ""
-    
-    // Usar handleBannerSelection del hook
     handleBannerSelection(banner.uuid)
   }
 
@@ -45,14 +42,12 @@ export default function RequestProjectForm({
     if (e.target.files && e.target.files.length > 0) {
       const file = e.target.files[0]
 
-      // Validar tipo (solo imágenes)
       if (!file.type.startsWith('image/')) {
         alert('Solo se permiten imágenes para el banner (JPEG, PNG, WebP)')
         e.target.value = ''
         return
       }
 
-      // Pasar al hook usando handleChange
       handleChange({
         target: { 
           name: "customBannerFile", 
@@ -63,80 +58,50 @@ export default function RequestProjectForm({
     }
   }
 
-  // ========== ATTACHMENTS HANDLERS ==========
   const handleAttachmentsChange = (e) => {
     if (e.target.files) {
       const newFiles = Array.from(e.target.files)
       const currentFiles = form.attachments || []
-      
-      // Combinar archivos existentes con nuevos
       const combinedFiles = [...currentFiles, ...newFiles]
       
-      // Validar cantidad total (máx 5)
       if (combinedFiles.length > 5) {
         alert(`Solo puedes adjuntar máximo 5 archivos. Actualmente tienes ${currentFiles.length} archivo(s). Puedes agregar ${5 - currentFiles.length} más.`)
         e.target.value = ''
         return
       }
 
-      // Pasar al hook usando handleChange
       handleChange({
         target: {
           name: "attachments",
-          files: combinedFiles, // ← Enviar archivos combinados
+          files: combinedFiles,
           type: "file"
         }
       })
       
-      // Limpiar el input para permitir seleccionar los mismos archivos de nuevo
       e.target.value = ''
     }
   }
 
   const removeAttachment = (index) => {
-    // Usar handleRemoveAttachment del hook
     handleRemoveAttachment(index)
-    
-    // Limpiar el input file después de remover
     if (attachmentsInputRef.current) {
       attachmentsInputRef.current.value = ''
     }
   }
 
-  // ========== HELPERS ==========
-const getFileIcon = (file) => {
-  const mimeType = file.type
-  
-  // Imágenes (mostrar preview)
-  if (mimeType.startsWith('image/')) return URL.createObjectURL(file)
-  
-  // PDF
-  if (mimeType === 'application/pdf') return pdfIcon
-  
-  // Word
-  if (mimeType.includes('word') || mimeType.includes('document')) return docIcon
-  
-  // Excel
-  if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return excelIcon
-  
-  // PowerPoint
-  if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return powerpointIcon
-  
-  // ZIP/RAR
-  if (mimeType.includes('zip') || mimeType.includes('rar') || mimeType.includes('compressed')) return zipIcon
-  
-  // Video
-  if (mimeType.startsWith('video/')) return videoIcon
-  
-  // Audio
-  if (mimeType.startsWith('audio/')) return audioIcon
-  
-  // Texto
-  if (mimeType.startsWith('text/')) return textIcon
-  
-  // Por defecto
-  return fileIcon
-}
+  const getFileIcon = (file) => {
+    const mimeType = file.type
+    if (mimeType.startsWith('image/')) return URL.createObjectURL(file)
+    if (mimeType === 'application/pdf') return pdfIcon
+    if (mimeType.includes('word') || mimeType.includes('document')) return docIcon
+    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return excelIcon
+    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return powerpointIcon
+    if (mimeType.includes('zip') || mimeType.includes('rar') || mimeType.includes('compressed')) return zipIcon
+    if (mimeType.startsWith('video/')) return videoIcon
+    if (mimeType.startsWith('audio/')) return audioIcon
+    if (mimeType.startsWith('text/')) return textIcon
+    return fileIcon
+  }
 
   const getShortFileName = (file) => {
     if (file.name.length <= 25) return file.name
@@ -151,7 +116,6 @@ const getFileIcon = (file) => {
     return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
   }
 
-  // Limpiar previews en unmount
   useEffect(() => {
     return () => {
       if (customBannerPreview) URL.revokeObjectURL(customBannerPreview)
@@ -167,191 +131,359 @@ const getFileIcon = (file) => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="w-full max-w-4xl flex flex-col gap-8 bg-gray-50 p-10 rounded-xl shadow-lg"
+      className="w-full max-w-5xl mx-auto"
     >
-      {/* 1. Detalles del proyecto */}
-      <fieldset className="flex flex-col gap-6">
-        <div>
-          <label className="block mb-2 font-semibold text-gray-700">
-            Título del proyecto *
-          </label>
-          <input
-            name="title"
-            value={form.title}
-            onChange={handleChange}
-            placeholder="Título atractivo y claro"
-            className={`w-full border rounded-lg px-4 py-3 focus:ring-2 focus:ring-lime-500 ${
-              fieldErrors?.title ? 'border-red-500' : 'border-gray-300'
-            }`}
-            required
-          />
-          {fieldErrors?.title && (
-            <p className="mt-1 text-sm text-red-600">{fieldErrors.title}</p>
-          )}
+      {/* Información Básica */}
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-10 h-10 bg-lime-100 rounded-xl flex items-center justify-center">
+            <svg className="w-6 h-6 text-lime-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+          </div>
+          <div>
+            <h3 className="text-xl font-bold text-gray-900">Información Básica</h3>
+            <p className="text-sm text-gray-500">Describe tu proyecto de manera clara y concisa</p>
+          </div>
         </div>
 
-        <div>
-          <label className="block mb-2 font-semibold text-gray-700">
-            Descripción corta *
-          </label>
-          <input
-            name="shortDescription"
-            value={form.shortDescription}
-            onChange={handleChange}
-            placeholder="Resumen breve (para tarjeta)"
-            className={`w-full border rounded-lg px-4 py-3 focus:ring-2 focus:ring-lime-500 ${
-              fieldErrors?.shortDescription ? 'border-red-500' : 'border-gray-300'
-            }`}
-            required
-          />
-          {fieldErrors?.shortDescription && (
-            <p className="mt-1 text-sm text-red-600">{fieldErrors.shortDescription}</p>
-          )}
-        </div>
+        <div className="space-y-5">
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              Título del proyecto <span className="text-red-500">*</span>
+            </label>
+            <input
+              name="title"
+              value={form.title}
+              onChange={handleChange}
+              placeholder="Ej: Sistema de gestión de inventario"
+              className={`w-full border-2 rounded-xl px-4 py-3 text-gray-900 placeholder-gray-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-transparent ${
+                fieldErrors?.title ? 'border-red-300 bg-red-50' : 'border-gray-200 hover:border-gray-300'
+              }`}
+              required
+            />
+            {fieldErrors?.title && (
+              <p className="mt-2 text-sm text-red-600 flex items-center gap-1">
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                </svg>
+                {fieldErrors.title}
+              </p>
+            )}
+          </div>
 
-        <div>
-          <label className="block mb-2 font-semibold text-gray-700">
-            Descripción detallada *
-          </label>
-          <textarea
-            name="description"
-            value={form.description}
-            onChange={handleChange}
-            placeholder="Describe el proyecto que necesitas"
-            className={`w-full border rounded-lg px-4 py-3 focus:ring-2 focus:ring-lime-500 ${
-              fieldErrors?.description ? 'border-red-500' : 'border-gray-300'
-            }`}
-            rows={5}
-            required
-          />
-          {fieldErrors?.description && (
-            <p className="mt-1 text-sm text-red-600">{fieldErrors.description}</p>
-          )}
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              Descripción corta <span className="text-red-500">*</span>
+            </label>
+            <input
+              name="shortDescription"
+              value={form.shortDescription}
+              onChange={handleChange}
+              placeholder="Resumen en una línea para la tarjeta del proyecto"
+              className={`w-full border-2 rounded-xl px-4 py-3 text-gray-900 placeholder-gray-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-transparent ${
+                fieldErrors?.shortDescription ? 'border-red-300 bg-red-50' : 'border-gray-200 hover:border-gray-300'
+              }`}
+              required
+            />
+            {fieldErrors?.shortDescription && (
+              <p className="mt-2 text-sm text-red-600 flex items-center gap-1">
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                </svg>
+                {fieldErrors.shortDescription}
+              </p>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              Descripción detallada <span className="text-red-500">*</span>
+            </label>
+            <textarea
+              name="description"
+              value={form.description}
+              onChange={handleChange}
+              placeholder="Describe el problema a resolver, objetivos, alcance y cualquier detalle relevante..."
+              className={`w-full border-2 rounded-xl px-4 py-3 text-gray-900 placeholder-gray-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-transparent resize-none ${
+                fieldErrors?.description ? 'border-red-300 bg-red-50' : 'border-gray-200 hover:border-gray-300'
+              }`}
+              rows={6}
+              required
+            />
+            {fieldErrors?.description && (
+              <p className="mt-2 text-sm text-red-600 flex items-center gap-1">
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                </svg>
+                {fieldErrors.description}
+              </p>
+            )}
+          </div>
         </div>
-      </fieldset>
-
-      {/* 2. Selecciones */}
-      <fieldset className="flex flex-col gap-6">
-        {/* Tipo de proyecto */}
-        <div>
-          <label className="mb-2 font-semibold text-gray-700 flex items-center gap-2">
-            Tipo de proyecto <span className="text-sm text-gray-500">(opcional)</span>
-            <button
-              type="button"
-              onClick={() => setShowInfo((s) => !s)}
-              className="text-blue-600 hover:text-blue-800"
-            >
-              <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#4E4E4E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
-                <circle cx="12" cy="12" r="10" />
-                <path d="M12 16v-4m0-4h.01" />
-              </svg>
-            </button>
-          </label>
-          {showInfo && (
-            <div className="mb-2 p-3 bg-green-100 border border-green-300 text-green-800 rounded text-sm">
-              Selecciona la modalidad académica a la que aplica tu proyecto.
-            </div>
-          )}
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            {projectTypes.map(({ project_type_id, name }) => (
-              <label key={project_type_id} className="inline-flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  name="projectType"
-                  value={project_type_id}
-                  checked={form.projectType.includes(String(project_type_id))}
-                  onChange={handleChange}
-                />
-                <span className="text-gray-700">{name}</span>
-              </label>
-            ))}
+      </div>
+
+      {/* Clasificación del Proyecto */}
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
+            <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+            </svg>
+          </div>
+          <div>
+            <h3 className="text-xl font-bold text-gray-900">Clasificación</h3>
+            <p className="text-sm text-gray-500">Categoriza tu proyecto (opcional)</p>
           </div>
         </div>
 
-        {/* Facultad sugerida */}
-        <div>
-          <label className="block mb-2 font-semibold text-gray-700">
-            Facultad sugerida <span className="text-sm text-gray-500">(opcional)</span>
-          </label>
-          <div className="flex flex-wrap gap-4">
-            {faculties.map(({ faculty_id, name }) => (
-              <label key={faculty_id} className="inline-flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  name="faculty"
-                  value={faculty_id}
-                  checked={form.faculty.includes(String(faculty_id))}
-                  onChange={handleChange}
-                />
-                <span className="text-gray-700">{name}</span>
+        <div className="space-y-6">
+          {/* Tipo de proyecto */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <label className="text-sm font-semibold text-gray-700">
+                Tipo de proyecto
               </label>
-            ))}
+              <button
+                type="button"
+                onClick={() => setShowInfo((s) => !s)}
+                className="text-gray-400 hover:text-blue-600 transition-colors"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </button>
+            </div>
+            
+            {showInfo && (
+              <div className="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-xl">
+                <p className="text-sm text-blue-800">
+                  Selecciona la modalidad académica a la que aplica tu proyecto.
+                </p>
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {projectTypes.map(({ project_type_id, name }) => (
+                <label 
+                  key={project_type_id} 
+                  className="relative flex items-center gap-3 p-4 border-2 rounded-xl cursor-pointer transition-all duration-200 hover:shadow-md group"
+                  style={{
+                    borderColor: form.projectType.includes(String(project_type_id)) ? '#65a30d' : '#e5e7eb',
+                    backgroundColor: form.projectType.includes(String(project_type_id)) ? '#f7fee7' : 'white'
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    name="projectType"
+                    value={project_type_id}
+                    checked={form.projectType.includes(String(project_type_id))}
+                    onChange={handleChange}
+                    className="w-5 h-5 text-lime-600 rounded border-gray-300 focus:ring-lime-500"
+                    style={{ accentColor: '#65a30d' }}
+                  />
+                  <span className="text-sm font-medium text-gray-700">{name}</span>
+                  {form.projectType.includes(String(project_type_id)) && (
+                    <svg className="w-5 h-5 text-lime-600 ml-auto" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                  )}
+                </label>
+              ))}
+            </div>
+          </div>
+
+          {/* Facultad */}
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-3">
+              Facultad sugerida
+            </label>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {faculties.map(({ faculty_id, name }) => (
+                <label 
+                  key={faculty_id} 
+                  className="relative flex items-center gap-3 p-4 border-2 rounded-xl cursor-pointer transition-all duration-200 hover:shadow-md"
+                  style={{
+                    borderColor: form.faculty.includes(String(faculty_id)) ? '#65a30d' : '#e5e7eb',
+                    backgroundColor: form.faculty.includes(String(faculty_id)) ? '#f7fee7' : 'white'
+                  }}
+                >
+                  <input
+                    type="radio"
+                    name="faculty"
+                    value={faculty_id}
+                    checked={form.faculty.includes(String(faculty_id))}
+                    onChange={handleChange}
+                    className="w-5 h-5 text-lime-600 border-gray-300 focus:ring-lime-500"
+                    style={{ accentColor: '#65a30d' }}
+                  />
+                  <span className="text-sm font-medium text-gray-700">{name}</span>
+                  {form.faculty.includes(String(faculty_id)) && (
+                    <svg className="w-5 h-5 text-lime-600 ml-auto" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                  )}
+                </label>
+              ))}
+            </div>
           </div>
-        </div>
 
-        <div>
-          <label className="block mb-2 font-semibold text-gray-700">
-            Tipo de problemática <span className="text-sm text-gray-500">(opcional)</span>
-          </label>
-          <div className="flex flex-wrap gap-4">
-            {extendedProblemTypes.map(({ problem_type_id, name }) => (
-              <label key={problem_type_id} className="inline-flex items-center gap-2">
+          {/* Tipo de problemática */}
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-3">
+              Tipo de problemática
+            </label>
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+              {extendedProblemTypes.map(({ problem_type_id, name }) => (
+                <label 
+                  key={problem_type_id}
+                  className="relative flex items-center gap-2 p-3 border-2 rounded-xl cursor-pointer transition-all duration-200 hover:shadow-md"
+                  style={{
+                    borderColor: form.problemType.includes(String(problem_type_id)) ? '#65a30d' : '#e5e7eb',
+                    backgroundColor: form.problemType.includes(String(problem_type_id)) ? '#f7fee7' : 'white'
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    name="problemType"
+                    value={problem_type_id}
+                    checked={form.problemType.includes(String(problem_type_id))}
+                    onChange={handleChange}
+                    className="w-4 h-4 text-lime-600 rounded border-gray-300 focus:ring-lime-500"
+                    style={{ accentColor: '#65a30d' }}
+                  />
+                  <span className="text-sm font-medium text-gray-700">{name}</span>
+                </label>
+              ))}
+            </div>
+            
+            {form.problemType.includes('otro') && (
+              <div className="mt-4">
                 <input
-                  type="checkbox"
-                  name="problemType"
-                  value={problem_type_id}
-                  checked={form.problemType.includes(String(problem_type_id))}
+                  name="problemTypeOther"
+                  value={form.problemTypeOther}
                   onChange={handleChange}
+                  placeholder="Describe tu problemática..."
+                  className="w-full border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-transparent"
                 />
-                <span className="text-gray-700">{name}</span>
-              </label>
-            ))}
+              </div>
+            )}
           </div>
-          {form.problemType.includes('otro') && (
-            <div className="mt-3">
-              <label className="block mb-2 font-semibold text-gray-700">¿Cuál?</label>
-              <input
-                name="problemTypeOther"
-                value={form.problemTypeOther}
-                onChange={handleChange}
-                placeholder="Describe tu problemática"
-                className="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-lime-500"
-              />
-            </div>
-          )}
         </div>
-      </fieldset>
-
-      {/* 3. Vigencia */}
-      <fieldset className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div className="md:col-span-2">
-          <label className="block mb-2 font-semibold text-gray-700">Vigencia *</label>
-          <input
-            name="deadline"
-            value={form.deadline}
-            onChange={handleChange}
-            type="date"
-            className={`w-full border rounded-lg px-4 py-3 focus:ring-2 focus:ring-lime-500 ${
-              fieldErrors?.deadline ? 'border-red-500' : 'border-gray-300'
-            }`}
-            required
-          />
-          {fieldErrors?.deadline && (
-            <p className="mt-1 text-sm text-red-600">{fieldErrors.deadline}</p>
-          )}
+      </div>
+
+      {/* Vigencia */}
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
+            <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </div>
+          <div>
+            <h3 className="text-xl font-bold text-gray-900">Fecha Límite</h3>
+            <p className="text-sm text-gray-500">¿Cuándo necesitas completar el proyecto?</p>
+          </div>
         </div>
-      </fieldset>
 
-      {/* 4. Banner (custom o default) */}
-      <fieldset className="flex flex-col gap-4">
-        <label className="block font-semibold text-gray-700">
-          Banner del proyecto <span className="text-sm text-gray-500">(Selecciona uno predeterminado o sube una imagen)</span>
-        </label>
+        {deadlineConstraints.projectTypeName ? (
+          <div className="mb-4 p-5 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-xl">
+            <div className="flex gap-4">
+              <div className="flex-shrink-0">
+                <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
+                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+              </div>
+              <div className="flex-1">
+                <h4 className="font-bold text-blue-900 mb-2">{deadlineConstraints.projectTypeName}</h4>
+                <div className="space-y-1.5 text-sm text-blue-800">
+                  <div className="flex items-center gap-2">
+                    <svg className="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                    <span><strong>Inicio:</strong> {formatDateStringSpanish(deadlineConstraints.min)}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <svg className="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
+                    </svg>
+                    <span><strong>Límite:</strong> {formatDateStringSpanish(deadlineConstraints.max)}</span>
+                  </div>
+                  <div className="mt-2 pt-2 border-t border-blue-200">
+                    <span className="text-xs font-semibold">Duración: {deadlineConstraints.minMonths} a {deadlineConstraints.maxMonths} meses</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="mb-4 p-4 bg-amber-50 border border-amber-200 rounded-xl flex items-start gap-3">
+            <svg className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+            </svg>
+            <p className="text-sm text-amber-800">
+              Selecciona un tipo de proyecto para ver el rango de fechas permitidas
+            </p>
+          </div>
+        )}
+
+        <input
+          name="deadline"
+          value={form.deadline}
+          onChange={handleChange}
+          type="date"
+          min={deadlineConstraints.min || undefined}
+          max={deadlineConstraints.max || undefined}
+          disabled={!deadlineConstraints.min}
+          className={`w-full border-2 rounded-xl px-4 py-3 text-gray-900 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-transparent ${
+            fieldErrors?.deadline
+              ? 'border-red-300 bg-red-50'
+              : !deadlineConstraints.min
+              ? 'border-gray-200 bg-gray-100 cursor-not-allowed'
+              : 'border-gray-200 hover:border-gray-300'
+          }`}
+          required
+        />
+
+        {fieldErrors?.deadline && (
+          <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-xl flex items-start gap-2">
+            <svg className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+            </svg>
+            <p className="text-sm text-red-700 font-medium">{fieldErrors.deadline}</p>
+          </div>
+        )}
+
+        {!fieldErrors?.deadline && form.deadline && deadlineConstraints.min && (
+          <div className="mt-3 p-3 bg-green-50 border border-green-200 rounded-xl flex items-center gap-2">
+            <svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+            </svg>
+            <p className="text-sm text-green-700 font-medium">Fecha válida seleccionada</p>
+          </div>
+        )}
+      </div>
+
+      {/* Banner */}
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-10 h-10 bg-pink-100 rounded-xl flex items-center justify-center">
+            <svg className="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </div>
+          <div>
+            <h3 className="text-xl font-bold text-gray-900">Banner del Proyecto</h3>
+            <p className="text-sm text-gray-500">Imagen principal que representará tu proyecto</p>
+          </div>
+        </div>
 
-        {/* Preview del banner custom */}
         {form.customBannerFile && customBannerPreview && (
-          <div className="relative w-full h-40 border-2 border-lime-600 rounded-lg overflow-hidden">
-            <img src={customBannerPreview} alt="Banner custom" className="w-full h-full object-cover" />
+          <div className="relative w-full h-56 mb-4 rounded-xl overflow-hidden border-2 border-lime-500 shadow-lg group">
+            <img src={customBannerPreview} alt="Banner" className="w-full h-full object-cover" />
+            <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-200"></div>
             <button
               type="button"
               onClick={() => {
@@ -360,106 +492,122 @@ const getFileIcon = (file) => {
                   target: { name: "customBannerFile", value: null, type: "file" }
                 })
               }}
-              className="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600"
+              className="absolute top-3 right-3 bg-red-500 text-white rounded-full p-2 hover:bg-red-600 transition-all duration-200 shadow-lg opacity-0 group-hover:opacity-100"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
               </svg>
             </button>
           </div>
         )}
 
-        {/* Input de banner custom */}
-        <input
-          ref={bannerInputRef}
-          name="customBannerFile"
-          onChange={handleCustomBannerChange}
-          type="file"
-          accept="image/jpeg,image/png,image/webp"
-          className={`w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-lime-500 ${
-            fieldErrors?.banner ? 'border-red-500' : 'border-gray-300'
-          }`}
-        />
-        {fieldErrors?.banner && (
-          <p className="text-sm text-red-600">{fieldErrors.banner}</p>
-        )}
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              Subir imagen personalizada
+            </label>
+            <input
+              ref={bannerInputRef}
+              name="customBannerFile"
+              onChange={handleCustomBannerChange}
+              type="file"
+              accept="image/jpeg,image/png,image/webp"
+              className="w-full border-2 border-dashed border-gray-300 rounded-xl px-4 py-8 text-center hover:border-lime-500 transition-colors cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-lime-50 file:text-lime-700 hover:file:bg-lime-100"
+            />
+            {fieldErrors?.banner && (
+              <p className="mt-2 text-sm text-red-600">{fieldErrors.banner}</p>
+            )}
+          </div>
 
-        {/* Banners predeterminados */}
-        <div className="mt-2">
-          <p className="text-gray-700 text-sm mb-2">O selecciona un banner predeterminado:</p>
-          <div className="flex gap-4 flex-wrap">
-            {defaultBanners.map((banner) => (
-              <div key={banner.uuid} className="flex flex-col items-center">
-                <img
-                  src={banner.url}
-                  alt={banner.name}
+          <div>
+            <p className="text-sm font-semibold text-gray-700 mb-3">O selecciona un banner predeterminado:</p>
+            <div className="grid grid-cols-3 sm:grid-cols-5 gap-3">
+              {defaultBanners.map((banner) => (
+                <div
+                  key={banner.uuid}
                   onClick={() => handleDefaultBannerSelect(banner)}
-                  className={`w-24 h-16 object-cover cursor-pointer rounded-lg border-2 transition-all ${
-                    form.selectedBannerUuid === banner.uuid 
-                      ? 'border-lime-600 shadow-md' 
-                      : 'border-transparent hover:border-gray-300'
+                  className={`relative aspect-video rounded-lg overflow-hidden cursor-pointer transition-all duration-200 border-2 ${
+                    form.selectedBannerUuid === banner.uuid
+                      ? 'border-lime-500 shadow-lg scale-105'
+                      : 'border-gray-200 hover:border-lime-300 hover:shadow-md'
                   }`}
-                />
-                <span className="text-xs mt-1 text-gray-500">
-                  {form.selectedBannerUuid === banner.uuid ? '✓ Seleccionado' : banner.name}
-                </span>
-              </div>
-            ))}
+                >
+                  <img
+                    src={banner.url}
+                    alt={banner.name}
+                    className="w-full h-full object-cover"
+                  />
+                  {form.selectedBannerUuid === banner.uuid && (
+                    <div className="absolute inset-0 bg-lime-500 bg-opacity-20 flex items-center justify-center">
+                      <div className="bg-white rounded-full p-1">
+                        <svg className="w-6 h-6 text-lime-600" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                        </svg>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
           </div>
         </div>
-      </fieldset>
-
-      {/* 5. Archivos adjuntos (múltiples) */}
-      <fieldset className="flex flex-col gap-4">
-        <label className="block font-semibold text-gray-700">
-          Archivos adjuntos <span className="text-sm text-gray-500">(Opcional, máximo 5 archivos)</span>
-        </label>
-
-        {/* Indicador de archivos adjuntados */}
-        <div className="flex items-center justify-between bg-gray-100 p-3 rounded-lg">
-          <span className="text-sm text-gray-700">
-            Archivos adjuntados: <strong>{form.attachments?.length || 0} / 5</strong>
-          </span>
-          {form.attachments && form.attachments.length > 0 && (
-            <span className="text-xs text-lime-600 font-medium">
-              Puedes agregar {5 - form.attachments.length} más
+      </div>
+
+      {/* Archivos Adjuntos */}
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center">
+              <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+              </svg>
+            </div>
+            <div>
+              <h3 className="text-xl font-bold text-gray-900">Archivos Adjuntos</h3>
+              <p className="text-sm text-gray-500">Documentos de apoyo (máximo 5 archivos)</p>
+            </div>
+          </div>
+          <div className="px-4 py-2 bg-gray-100 rounded-lg">
+            <span className="text-sm font-bold text-gray-700">
+              {form.attachments?.length || 0} / 5
             </span>
-          )}
+          </div>
         </div>
 
-        {/* Lista de attachments */}
         {form.attachments && form.attachments.length > 0 && (
-          <div className="space-y-2">
+          <div className="space-y-3 mb-4">
             {form.attachments.map((file, index) => (
-              <div key={index} className="flex items-center p-2 bg-gray-50 rounded-lg border border-gray-200">
-                <div className="flex-shrink-0 h-12 w-12 flex items-center justify-center bg-gray-100 rounded">
+              <div
+                key={index}
+                className="flex items-center gap-4 p-4 bg-gray-50 border border-gray-200 rounded-xl hover:shadow-md transition-all duration-200 group"
+              >
+                <div className="flex-shrink-0 w-12 h-12 bg-white rounded-lg flex items-center justify-center border border-gray-200">
                   {(() => {
                     const icon = getFileIcon(file);
                     const isImage = file.type.startsWith('image/');
-                    
                     return icon ? (
                       <img 
                         src={icon} 
                         alt={file.name}
-                        className={isImage ? 'h-full w-full object-cover rounded' : 'h-8 w-8 object-contain'}
+                        className={isImage ? 'w-full h-full object-cover rounded-lg' : 'w-8 h-8 object-contain'}
                       />
                     ) : (
-                      <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                       </svg>
                     );
                   })()}
                 </div>
-                <div className="ml-3 flex-1">
-                  <p className="text-sm font-medium text-gray-700">{getShortFileName(file)}</p>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-900 truncate">{getShortFileName(file)}</p>
                   <p className="text-xs text-gray-500">{formatFileSize(file.size)}</p>
                 </div>
-                <button 
-                  type="button" 
+                <button
+                  type="button"
                   onClick={() => removeAttachment(index)}
-                  className="ml-auto text-gray-400 hover:text-red-500"
+                  className="flex-shrink-0 text-gray-400 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100"
                 >
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
                   </svg>
                 </button>
@@ -468,7 +616,6 @@ const getFileIcon = (file) => {
           </div>
         )}
 
-        {/* Input de attachments */}
         <input
           ref={attachmentsInputRef}
           name="attachments"
@@ -476,44 +623,53 @@ const getFileIcon = (file) => {
           type="file"
           multiple
           accept="image/jpeg,image/png,image/webp,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/zip,text/plain,video/*,audio/*"
-          className={`w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-lime-500 ${
-            fieldErrors?.attachments ? 'border-red-500' : 'border-gray-300'
-          }`}
-            disabled={form.attachments?.length >= 5} // Deshabilitar si ya hay 5 archivos
+          className="w-full border-2 border-dashed border-gray-300 rounded-xl px-4 py-8 text-center hover:border-lime-500 transition-colors cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-lime-50 file:text-lime-700 hover:file:bg-lime-100 disabled:opacity-50 disabled:cursor-not-allowed"
+          disabled={form.attachments?.length >= 5}
         />
-        <p className="text-sm text-gray-500">
-          Formatos permitidos: Imágenes, PDF, Word, PowerPoint, Excel, ZIP, TXT
+        <p className="mt-3 text-xs text-center text-gray-500">
+          PDF, Word, Excel, PowerPoint, Imágenes, ZIP, Texto
         </p>
         {fieldErrors?.attachments && (
-          <p className="text-sm text-red-600">{fieldErrors.attachments}</p>
+          <p className="mt-2 text-sm text-red-600 text-center">{fieldErrors.attachments}</p>
         )}
-      </fieldset>
+      </div>
 
-      {/* Botones */}
-      <div className="flex justify-end gap-4 pt-6">
+      {/* Botones de Acción */}
+      <div className="flex items-center justify-end gap-4 pt-4">
         <button
           type="reset"
           disabled={isLoading}
-          className="px-6 py-3 rounded-lg bg-gray-200 hover:bg-gray-300 transition disabled:opacity-50"
           onClick={() => {
-            // Limpiar inputs
             if (bannerInputRef.current) bannerInputRef.current.value = ''
             if (attachmentsInputRef.current) attachmentsInputRef.current.value = ''
           }}
+          className="px-8 py-3 rounded-xl font-semibold text-gray-700 bg-gray-100 hover:bg-gray-200 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
         >
           Limpiar
         </button>
         <button
           type="submit"
           disabled={isLoading}
-          className="px-6 py-3 rounded-lg bg-lime-600 hover:bg-lime-700 text-white transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+          className="px-8 py-3 rounded-xl font-semibold text-white bg-gradient-to-r from-lime-600 to-lime-700 hover:from-lime-700 hover:to-lime-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 shadow-lg hover:shadow-xl"
         >
-          {isLoading && (
-            <span className="inline-block h-4 w-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+          {isLoading ? (
+            <>
+              <svg className="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              <span>Enviando...</span>
+            </>
+          ) : (
+            <>
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+              </svg>
+              <span>Enviar Solicitud</span>
+            </>
           )}
-          {isLoading ? 'Enviando...' : 'Enviar solicitud'}
         </button>
       </div>
     </form>
   )
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/features/projects/hooks/useEditApplication.js b/apps/web/src/features/projects/hooks/useEditApplication.js
index 8896921d..fc91d997 100644
--- a/apps/web/src/features/projects/hooks/useEditApplication.js
+++ b/apps/web/src/features/projects/hooks/useEditApplication.js
@@ -1,15 +1,9 @@
-import { useState } from "react";
-import { approveApplication } from "../projectsService";
+import { useState, useEffect } from "react";
+import { updateApplication, approveApplication } from "../projectsService";
 import { Alerts } from "@/shared/alerts";
 import { ValidationError, getDisplayMessage, processFieldErrors } from "@/utils/errorHandler";
 
-/**
- * Hook para editar metadata y aprobar una aplicación
- * @param {string} uuid - UUID de la aplicación
- * @param {Function} onSuccess - Callback al aprobar exitosamente
- * @returns {Object} - { form, fieldErrors, isLoading, handleChange, handleSubmit, resetForm, initializeForm }
- */
-export default function useEditApplication(uuid, onSuccess) {
+export default function useEditApplication(uuid, onEditSuccess, onApproveSuccess, projectTypes = [], applicationCreatedAt) {
   const [fieldErrors, setFieldErrors] = useState({});
   const [isLoading, setIsLoading] = useState(false);
 
@@ -19,28 +13,88 @@ export default function useEditApplication(uuid, onSuccess) {
     problemType: [],
     problemTypeOther: "",
     deadline: "",
-    editReason: "", // TODO: Campo placeholder (no funcional aún)
   });
 
-  /**
-   * Inicializa el formulario con datos existentes de la aplicación
-   * @param {Object} application - Datos de la aplicación
-   */
+  const [deadlineConstraints, setDeadlineConstraints] = useState({
+    min: null,
+    max: null,
+    projectTypeName: null,
+    minMonths: 0,
+    maxMonths: 0,
+    applicationDate: null,
+  });
+
+  // Helper para formatear fecha local sin zona horaria
+  const formatDateLocal = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  // Calcular constraints basados en la fecha de vigencia original
+  useEffect(() => {
+    if (form.projectType.length > 0 && projectTypes.length > 0 && applicationCreatedAt && form.deadline) {
+      const selectedTypeId = form.projectType[0];
+      const projectType = projectTypes.find(pt => pt.project_type_id === selectedTypeId);
+      
+      if (projectType) {
+        // Fecha de solicitud (cuando se creó la Application)
+        const appDateStr = applicationCreatedAt.split('T')[0];
+        const [appYear, appMonth, appDay] = appDateStr.split('-').map(Number);
+        const applicationDate = new Date(appYear, appMonth - 1, appDay);
+        
+        // Fecha mínima = fecha de vigencia original (la que seleccionó el usuario)
+        const [deadlineYear, deadlineMonth, deadlineDay] = form.deadline.split('-').map(Number);
+        const originalDeadline = new Date(deadlineYear, deadlineMonth - 1, deadlineDay);
+        
+        // Fecha máxima = fecha mínima + 1 mes de buffer
+        const maxDate = new Date(originalDeadline);
+        maxDate.setMonth(maxDate.getMonth() + 1);
+        
+        // Calcular meses entre solicitud y fecha mínima
+        const minMonths = Math.round(
+          (originalDeadline.getFullYear() - applicationDate.getFullYear()) * 12 +
+          (originalDeadline.getMonth() - applicationDate.getMonth())
+        );
+        
+        setDeadlineConstraints({
+          min: formatDateLocal(originalDeadline),
+          max: formatDateLocal(maxDate),
+          projectTypeName: projectType.name,
+          minMonths,
+          maxMonths: minMonths + 1,
+          applicationDate: formatDateLocal(applicationDate)
+        });
+      }
+    } else {
+      setDeadlineConstraints({ 
+        min: null, 
+        max: null, 
+        projectTypeName: null,
+        minMonths: 0,
+        maxMonths: 0,
+        applicationDate: null
+      });
+    }
+  }, [form.projectType, form.deadline, projectTypes, applicationCreatedAt]);
+
+  // Inicializar formulario con datos de la aplicación
   const initializeForm = (application) => {
     setForm({
       projectType: application.projectTypeIds || [],
       faculty: application.facultyIds || [],
       problemType: application.problemTypeIds || [],
-      problemTypeOther: "",
+      problemTypeOther: application.problemTypeOther || "",
       deadline: application.dueDate?.split('T')[0] || "",
-      editReason: "",
     });
   };
 
+  // Manejar cambios en los campos del formulario
   const handleChange = (e) => {
     const { name, value, type, checked } = e.target;
 
-    // Limpiar error del campo
+    // Limpiar error del campo cuando el usuario empieza a escribir
     if (fieldErrors[name]) {
       setFieldErrors(prev => {
         const newErrors = { ...prev };
@@ -49,13 +103,20 @@ export default function useEditApplication(uuid, onSuccess) {
       });
     }
 
-    // Manejo de checkboxes
+    // Radio button para faculty
+    if (type === "radio" && name === "faculty") {
+      setForm(prevForm => ({
+        ...prevForm,
+        faculty: [Number(value)]
+      }));
+      return;
+    }
+
+    // Checkboxes (projectType, faculty, problemType)
     if (type === "checkbox") {
       if (name === "projectType" || name === "faculty" || name === "problemType") {
         setForm(prevForm => {
           const currentArray = prevForm[name] || [];
-          
-          // Manejar "otro" como string, resto como números
           const parsedValue = value === "otro" ? "otro" : Number(value);
           
           if (checked) {
@@ -64,14 +125,14 @@ export default function useEditApplication(uuid, onSuccess) {
               [name]: [...currentArray, parsedValue]
             };
           } else {
-            // ✅ Si se desmarca "otro", limpiar problemTypeOther
             const newArray = currentArray.filter(item => item !== parsedValue);
             
+            // Limpiar problemTypeOther si se deselecciona "otro"
             if (name === "problemType" && parsedValue === "otro") {
               return {
                 ...prevForm,
                 [name]: newArray,
-                problemTypeOther: "", // ✅ Limpiar campo de texto
+                problemTypeOther: "",
               };
             }
             
@@ -85,13 +146,46 @@ export default function useEditApplication(uuid, onSuccess) {
       }
     }
 
-    // Campos de texto normales
+    // Validar fecha en tiempo real
+    if (name === "deadline" && value && deadlineConstraints.min) {
+      const [year, month, day] = value.split('-').map(Number);
+      const selectedDate = new Date(year, month - 1, day);
+      
+      const [minYear, minMonth, minDay] = deadlineConstraints.min.split('-').map(Number);
+      const minDate = new Date(minYear, minMonth - 1, minDay);
+      
+      const [maxYear, maxMonth, maxDay] = deadlineConstraints.max.split('-').map(Number);
+      const maxDate = new Date(maxYear, maxMonth - 1, maxDay);
+
+      if (selectedDate < minDate) {
+        Alerts.warning(
+          `Fecha demasiado pronto. La fecha mínima es ${minDate.toLocaleDateString('es-MX', { 
+            day: 'numeric',
+            month: 'long', 
+            year: 'numeric' 
+          })}`
+        );
+      } else if (selectedDate > maxDate) {
+        Alerts.warning(
+          `Fecha demasiado lejana. La fecha máxima es ${maxDate.toLocaleDateString('es-MX', { 
+            day: 'numeric',
+            month: 'long', 
+            year: 'numeric' 
+          })}`
+        );
+      } else {
+        Alerts.success('Fecha válida seleccionada');
+      }
+    }
+
+    // Actualizar campo en el estado
     setForm({
       ...form,
       [name]: value,
     });
   };
 
+  // Validar formulario antes de enviar
   const validateForm = () => {
     const errors = {};
 
@@ -100,117 +194,203 @@ export default function useEditApplication(uuid, onSuccess) {
     }
 
     if (form.faculty.length === 0) {
-      errors.faculty = "Selecciona al menos una facultad";
+      errors.faculty = "Selecciona una facultad";
     }
 
     if (form.problemType.length === 0) {
       errors.problemType = "Selecciona al menos un tipo de problemática";
     }
 
-    // ✅ Validar que si "otro" está marcado, debe tener texto
     if (form.problemType.includes("otro") && !form.problemTypeOther?.trim()) {
       errors.problemTypeOther = "Por favor describe la problemática personalizada";
     }
 
     if (!form.deadline) {
-      errors.deadline = "La vigencia es requerida";
+      errors.deadline = "La fecha de vigencia es obligatoria";
+    } else if (deadlineConstraints.min && deadlineConstraints.max) {
+      const [year, month, day] = form.deadline.split('-').map(Number);
+      const selectedDate = new Date(year, month - 1, day);
+      
+      const [minYear, minMonth, minDay] = deadlineConstraints.min.split('-').map(Number);
+      const minDate = new Date(minYear, minMonth - 1, minDay);
+      
+      const [maxYear, maxMonth, maxDay] = deadlineConstraints.max.split('-').map(Number);
+      const maxDate = new Date(maxYear, maxMonth - 1, maxDay);
+
+      if (selectedDate < minDate) {
+        errors.deadline = `Fecha demasiado pronto. La fecha mínima es ${minDate.toLocaleDateString('es-MX', { 
+          day: 'numeric',
+          month: 'long', 
+          year: 'numeric' 
+        })}`;
+      } else if (selectedDate > maxDate) {
+        errors.deadline = `Fecha demasiado lejana. La fecha máxima es ${maxDate.toLocaleDateString('es-MX', { 
+          day: 'numeric',
+          month: 'long', 
+          year: 'numeric' 
+        })} (1 mes de margen desde la fecha original)`;
+      }
     }
 
-    // TODO: Validación de editReason desactivada temporalmente
-    // if (!form.editReason?.trim()) {
-    //   errors.editReason = "Por favor explica la razón de la edición";
-    // }
-
     return errors;
   };
 
-// Línea 165-195: REEMPLAZAR handleSubmit
-
-const handleSubmit = async (e, applicationData) => {
-  e.preventDefault();
-
-  // Validar formulario
-  const errors = validateForm();
-  
-  if (Object.keys(errors).length > 0) {
-    setFieldErrors(errors);
-    Alerts.warning("Por favor completa todos los campos requeridos");
-    return;
-  }
-
-  setIsLoading(true);
-  setFieldErrors({});
-
-  try {
-    // ✅ Filtrar "otro" de problemType antes de enviar
-    const finalProblemTypes = form.problemType.filter(pt => pt !== "otro");
-
-    // ✅ Preparar problemTypeOther correctamente
-    let finalProblemTypeOther = undefined;
-    if (form.problemType.includes("otro")) {
-      const trimmed = form.problemTypeOther?.trim();
-      if (trimmed) {
-        finalProblemTypeOther = trimmed;
+  // Guardar cambios sin aprobar (solo actualizar metadata)
+  const handleSaveOnly = async (e, applicationData) => {
+    e.preventDefault();
+
+    const errors = validateForm();
+    
+    if (Object.keys(errors).length > 0) {
+      setFieldErrors(errors);
+      Alerts.warning("Por favor completa todos los campos requeridos");
+      return;
+    }
+
+    setIsLoading(true);
+    setFieldErrors({});
+
+    try {
+      const finalProblemTypes = form.problemType.filter(pt => pt !== "otro");
+
+      let finalProblemTypeOther = undefined;
+      if (form.problemType.includes("otro")) {
+        const trimmed = form.problemTypeOther?.trim();
+        if (trimmed) {
+          finalProblemTypeOther = trimmed;
+        }
+      }
+
+      const updateData = {
+        title: applicationData.title,
+        shortDescription: applicationData.shortDescription,
+        description: applicationData.detailedDescription,
+        deadline: form.deadline,
+        projectType: form.projectType,
+        faculty: form.faculty,
+        problemType: finalProblemTypes,
+      };
+
+      if (finalProblemTypeOther !== undefined) {
+        updateData.problemTypeOther = finalProblemTypeOther;
+      }
+
+      await updateApplication(uuid, updateData);
+
+      Alerts.success("Cambios guardados exitosamente");
+
+      if (onEditSuccess) {
+        onEditSuccess();
+      }
+
+    } catch (error) {
+      if (error instanceof ValidationError) {
+        if (error.details && error.details.length > 0) {
+          const processedErrors = processFieldErrors(error.details);
+          setFieldErrors(processedErrors);
+          Alerts.error("Por favor revisa los campos marcados");
+        } else {
+          Alerts.error(getDisplayMessage(error));
+        }
+      } else {
+        Alerts.error(getDisplayMessage(error));
       }
+    } finally {
+      setIsLoading(false);
     }
+  };
 
-    // ✅ Usar datos del formulario (editados)
-    const projectData = {
-      title: applicationData.title,
-      shortDescription: applicationData.shortDescription,
-      description: applicationData.detailedDescription,
-      estimatedDate: form.deadline,           // ✅ Dato editado
-      projectType: form.projectType,          // ✅ IDs editados
-      faculty: form.faculty,                  // ✅ IDs editados
-      problemType: finalProblemTypes,         // ✅ IDs editados (sin "otro")
-    };
+  // Guardar cambios y aprobar (crear proyecto)
+  const handleSaveAndApprove = async (e, applicationData) => {
+    e.preventDefault();
 
-    // ✅ Solo agregar problemTypeOther si tiene valor
-    if (finalProblemTypeOther !== undefined) {
-      projectData.problemTypeOther = finalProblemTypeOther;
+    if (form.projectType.length === 0) {
+      Alerts.error("Debes seleccionar un tipo de proyecto antes de aprobar");
+      setFieldErrors(prev => ({
+        ...prev,
+        projectType: "Selecciona un tipo de proyecto"
+      }));
+      return;
     }
 
-    console.log("📤 Enviando proyecto con datos EDITADOS:", projectData);
+    if (!deadlineConstraints.min) {
+      Alerts.error("Espera a que se calculen las fechas permitidas. Si el problema persiste, recarga la página.");
+      return;
+    }
 
-    // ✅ Llamar al endpoint de aprobación (POST /project/create)
-    const response = await approveApplication(uuid, projectData);
+    const errors = validateForm();
     
-    console.log("✅ Respuesta del servicio:", response);
+    if (Object.keys(errors).length > 0) {
+      setFieldErrors(errors);
+      
+      if (errors.deadline) {
+        Alerts.error(`Fecha inválida: ${errors.deadline}`);
+      } else {
+        Alerts.warning("Por favor completa todos los campos requeridos");
+      }
+      return;
+    }
 
-    // ✅ Extraer UUID del proyecto creado
-    const projectUuid = response?.project?.uuid_project;
+    setIsLoading(true);
+    setFieldErrors({});
 
-    if (!projectUuid) {
-      console.error("❌ Backend no retornó uuid_project:", response);
-      throw new Error("No se pudo obtener el UUID del proyecto creado");
-    }
+    try {
+      const finalProblemTypes = form.problemType.filter(pt => pt !== "otro");
 
-    console.log("✅ UUID del proyecto creado:", projectUuid);
+      let finalProblemTypeOther = undefined;
+      if (form.problemType.includes("otro")) {
+        const trimmed = form.problemTypeOther?.trim();
+        if (trimmed) {
+          finalProblemTypeOther = trimmed;
+        }
+      }
 
-    // ✅ Pasar UUID al callback de éxito
-    if (onSuccess) {
-      onSuccess(projectUuid);
-    }
+      const projectData = {
+        title: applicationData.title,
+        shortDescription: applicationData.shortDescription,
+        description: applicationData.detailedDescription,
+        deadline: form.deadline,
+        projectType: form.projectType,
+        faculty: form.faculty,
+        problemType: finalProblemTypes,
+      };
+
+      if (finalProblemTypeOther !== undefined) {
+        projectData.problemTypeOther = finalProblemTypeOther;
+      }
+
+      const response = await approveApplication(uuid, projectData);
 
-  } catch (error) {
-    console.error("Error al aprobar proyecto:", error);
+      const projectUuid = response?.project?.uuid_project;
 
-    if (error instanceof ValidationError) {
-      if (error.details && error.details.length > 0) {
-        const processedErrors = processFieldErrors(error.details);
-        setFieldErrors(processedErrors);
-        Alerts.error("Por favor revisa los campos marcados");
+      if (!projectUuid) {
+        throw new Error("No se pudo obtener el UUID del proyecto creado");
+      }
+
+      Alerts.success("Proyecto aprobado exitosamente");
+
+      if (onApproveSuccess) {
+        onApproveSuccess(projectUuid);
+      }
+
+    } catch (error) {
+      if (error instanceof ValidationError) {
+        if (error.details && error.details.length > 0) {
+          const processedErrors = processFieldErrors(error.details);
+          setFieldErrors(processedErrors);
+          Alerts.error("Por favor revisa los campos marcados");
+        } else {
+          Alerts.error(getDisplayMessage(error));
+        }
       } else {
         Alerts.error(getDisplayMessage(error));
       }
-    } else {
-      Alerts.error(getDisplayMessage(error));
+    } finally {
+      setIsLoading(false);
     }
-  } finally {
-    setIsLoading(false);
-  }
-};
+  };
 
+  // Resetear formulario a estado inicial
   const resetForm = () => {
     setForm({
       projectType: [],
@@ -218,7 +398,6 @@ const handleSubmit = async (e, applicationData) => {
       problemType: [],
       problemTypeOther: "",
       deadline: "",
-      editReason: "",
     });
     setFieldErrors({});
   };
@@ -228,8 +407,10 @@ const handleSubmit = async (e, applicationData) => {
     fieldErrors,
     isLoading,
     handleChange,
-    handleSubmit,
+    handleSaveOnly,
+    handleSaveAndApprove,
     resetForm,
     initializeForm,
+    deadlineConstraints,
   };
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/features/projects/hooks/useRequestProject.js b/apps/web/src/features/projects/hooks/useRequestProject.js
index 2fcbb58c..ebeb2015 100644
--- a/apps/web/src/features/projects/hooks/useRequestProject.js
+++ b/apps/web/src/features/projects/hooks/useRequestProject.js
@@ -1,11 +1,13 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { createApplication } from "../projectsService.js";
 import { ValidationError, processFieldErrors, getDisplayMessage } from "@/utils/errorHandler";
 import { Alerts } from "@/shared/alerts";
+import useFormProjectMetadata from "./useFormProjectMetadata.js";
 
 export default function useRequestProject() {
   const navigate = useNavigate();
+  const { projectTypes } = useFormProjectMetadata();
   const [fieldErrors, setFieldErrors] = useState({});
   const [isLoading, setIsLoading] = useState(false);
 
@@ -24,6 +26,64 @@ export default function useRequestProject() {
     attachments: [],
   });
 
+  const [deadlineConstraints, setDeadlineConstraints] = useState({
+    min: null,
+    max: null,
+    projectTypeName: null,
+    minMonths: 0,
+    maxMonths: 0,
+  });
+
+  // Helper para formatear fecha local sin zona horaria
+  const formatDateLocal = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  // Calcular constraints de fecha cuando cambie el tipo de proyecto
+  useEffect(() => {
+    if (form.projectType.length > 0 && projectTypes.length > 0) {
+      const selectedTypeId = Number(form.projectType[0]);
+      const projectType = projectTypes.find(pt => pt.project_type_id === selectedTypeId);
+      
+      if (projectType) {
+        // Fecha actual en zona horaria local
+        const today = new Date();
+        const todayLocal = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+        
+        const minMonths = projectType.minEstimatedMonths || 0;
+        const maxMonths = projectType.maxEstimatedMonths || 24;
+        
+        // Calcular fecha mínima (hoy + minMonths)
+        const minDate = new Date(todayLocal);
+        minDate.setMonth(minDate.getMonth() + minMonths);
+        
+        // Calcular fecha máxima (hoy + maxMonths + 1 mes de buffer)
+        const maxDate = new Date(todayLocal);
+        maxDate.setMonth(maxDate.getMonth() + maxMonths + 1);
+        
+        setDeadlineConstraints({
+          min: formatDateLocal(minDate),
+          max: formatDateLocal(maxDate),
+          projectTypeName: projectType.name,
+          minMonths,
+          maxMonths: maxMonths + 1
+        });
+      }
+    } else {
+      setDeadlineConstraints({ 
+        min: null, 
+        max: null, 
+        projectTypeName: null,
+        minMonths: 0,
+        maxMonths: 0
+      });
+    }
+  }, [form.projectType, projectTypes]);
+
+  // Manejar cambios en los campos del formulario
   const handleChange = (e) => {
     const { name, value, type, checked, files } = e.target;
 
@@ -36,27 +96,34 @@ export default function useRequestProject() {
       });
     }
 
-    // MANEJO DE CHECKBOXES (projectType, faculty, problemType)
+    // Manejo de radio button para faculty
+    if (type === "radio" && name === "faculty") {
+      setForm(prevForm => ({
+        ...prevForm,
+        faculty: [String(value)]
+      }));
+      return;
+    }
+
+    // Manejo de checkboxes (projectType, problemType)
     if (type === "checkbox") {
-      if (name === "projectType" || name === "faculty" || name === "problemType") {
+      if (name === "projectType" || name === "problemType") {
         setForm(prevForm => {
           const currentArray = prevForm[name] || [];
           
           if (checked) {
-            // Agregar valor si está checkeado
             return {
               ...prevForm,
               [name]: [...currentArray, value]
             };
           } else {
-            // Remover valor si está desmarcado
             return {
               ...prevForm,
               [name]: currentArray.filter(item => item !== value)
             };
           }
         });
-        return; // salir de la función aquí
+        return;
       }
     }
 
@@ -66,7 +133,7 @@ export default function useRequestProject() {
         ...form,
         customBannerFile: files[0],
         customBannerName: files[0].name,
-        selectedBannerUuid: "", // Limpiar UUID si se sube archivo
+        selectedBannerUuid: "",
       });
       return;
     } 
@@ -78,7 +145,43 @@ export default function useRequestProject() {
         attachments: Array.from(files),
       });
       return;
-    } 
+    }
+
+    // Validar fecha en tiempo real
+    if (name === "deadline" && value && deadlineConstraints.min) {
+      const [year, month, day] = value.split('-').map(Number);
+      const selectedDate = new Date(year, month - 1, day);
+      
+      const [minYear, minMonth, minDay] = deadlineConstraints.min.split('-').map(Number);
+      const minDate = new Date(minYear, minMonth - 1, minDay);
+      
+      const [maxYear, maxMonth, maxDay] = deadlineConstraints.max.split('-').map(Number);
+      const maxDate = new Date(maxYear, maxMonth - 1, maxDay);
+
+      const today = new Date();
+      const todayLocal = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+
+      // Calcular meses desde hoy
+      const monthsDiff = Math.round(
+        (selectedDate.getFullYear() - todayLocal.getFullYear()) * 12 +
+        (selectedDate.getMonth() - todayLocal.getMonth()) +
+        (selectedDate.getDate() - todayLocal.getDate()) / 30
+      );
+
+      if (selectedDate < minDate) {
+        Alerts.warning(
+          `Fecha demasiado pronto. El proyecto debe durar al menos ${deadlineConstraints.minMonths} meses desde hoy`
+        );
+      } else if (selectedDate > maxDate) {
+        Alerts.warning(
+          `Fecha demasiado lejana. No puede superar ${deadlineConstraints.maxMonths} meses desde hoy`
+        );
+      } else {
+        Alerts.success(
+          `Fecha válida: ${monthsDiff} meses desde hoy`
+        );
+      }
+    }
     
     // Campos de texto normales
     setForm({
@@ -87,34 +190,7 @@ export default function useRequestProject() {
     });
   };
 
-  // Manejo de banner predefinido (llamado desde RequestProjectForm)
-  const handleBannerSelection = (uuid) => {
-    setForm({
-      ...form,
-      selectedBannerUuid: uuid,
-      customBannerFile: null,
-      customBannerName: "",
-    });
-
-    // Limpiar error de banner
-    if (fieldErrors.banner) {
-      setFieldErrors(prev => {
-        const newErrors = { ...prev };
-        delete newErrors.banner;
-        return newErrors;
-      });
-    }
-  };
-
-  // Remover archivo adjunto (llamado desde RequestProjectForm)
-  const handleRemoveAttachment = (index) => {
-    setForm(prevForm => ({
-      ...prevForm,
-      attachments: prevForm.attachments.filter((_, i) => i !== index),
-    }));
-  };
-
-  // Validación del formulario
+  // Validar formulario antes de enviar
   const validateForm = () => {
     const errors = {};
 
@@ -131,23 +207,78 @@ export default function useRequestProject() {
     }
 
     if (!form.deadline) {
-      errors.deadline = "La fecha límite es requerida";
+      errors.deadline = "La fecha de vigencia es obligatoria";
+    } else if (deadlineConstraints.min && deadlineConstraints.max) {
+      const [year, month, day] = form.deadline.split('-').map(Number);
+      const selectedDate = new Date(year, month - 1, day);
+      
+      const [minYear, minMonth, minDay] = deadlineConstraints.min.split('-').map(Number);
+      const minDate = new Date(minYear, minMonth - 1, minDay);
+      
+      const [maxYear, maxMonth, maxDay] = deadlineConstraints.max.split('-').map(Number);
+      const maxDate = new Date(maxYear, maxMonth - 1, maxDay);
+
+      const today = new Date();
+      const todayLocal = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+
+      const monthsDiff = Math.round(
+        (selectedDate.getFullYear() - todayLocal.getFullYear()) * 12 +
+        (selectedDate.getMonth() - todayLocal.getMonth()) +
+        (selectedDate.getDate() - todayLocal.getDate()) / 30
+      );
+
+      if (selectedDate < minDate) {
+        errors.deadline = `Fecha demasiado pronto. El proyecto debe durar al menos ${deadlineConstraints.minMonths} meses desde hoy. Fecha mínima: ${minDate.toLocaleDateString('es-MX', { 
+          day: 'numeric',
+          month: 'long', 
+          year: 'numeric' 
+        })}`;
+      } else if (selectedDate > maxDate) {
+        errors.deadline = `Fecha demasiado lejana. No puede superar ${deadlineConstraints.maxMonths} meses desde hoy (incluyendo 1 mes de margen). Fecha máxima: ${maxDate.toLocaleDateString('es-MX', { 
+          day: 'numeric',
+          month: 'long', 
+          year: 'numeric' 
+        })}`;
+      }
     }
 
     if (!form.selectedBannerUuid && !form.customBannerFile) {
       errors.banner = "Debes seleccionar o subir un banner";
     }
 
-    // Validar que los arrays tengan al menos un elemento (si son requeridos)
-    // Según el formulario, estos son opcionales, así que no validamos
-
     return errors;
   };
 
+  // Seleccionar banner predeterminado
+  const handleBannerSelection = (uuid) => {
+    setForm({
+      ...form,
+      selectedBannerUuid: uuid,
+      customBannerFile: null,
+      customBannerName: "",
+    });
+
+    if (fieldErrors.banner) {
+      setFieldErrors(prev => {
+        const newErrors = { ...prev };
+        delete newErrors.banner;
+        return newErrors;
+      });
+    }
+  };
+
+  // Remover archivo adjunto por índice
+  const handleRemoveAttachment = (index) => {
+    setForm(prevForm => ({
+      ...prevForm,
+      attachments: prevForm.attachments.filter((_, i) => i !== index),
+    }));
+  };
+
+  // Enviar formulario de solicitud
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    // Validar formulario
     const errors = validateForm();
     
     if (Object.keys(errors).length > 0) {
@@ -160,24 +291,19 @@ export default function useRequestProject() {
     setFieldErrors({});
 
     try {
-      // Construir FormData
       const formData = new FormData();
 
-      // Campos básicos
       formData.append("title", form.title);
       formData.append("shortDescription", form.shortDescription);
       formData.append("description", form.description);
       formData.append("deadline", form.deadline);
 
-      // Banner (UUID o archivo, exclusivo)
       if (form.selectedBannerUuid) {
         formData.append("selectedBannerUuid", form.selectedBannerUuid);
       } else if (form.customBannerFile) {
         formData.append("customBannerFile", form.customBannerFile);
       }
 
-      // Enviar cada ID individualmente con []
-      // Solo enviar si hay elementos
       if (form.projectType && form.projectType.length > 0) {
         form.projectType.forEach(id => {
           formData.append("projectType[]", id);
@@ -196,24 +322,17 @@ export default function useRequestProject() {
         });
       }
 
-      // Tipo de problemática "Otro"
       if (form.problemTypeOther?.trim()) {
         formData.append("problemTypeOther", form.problemTypeOther);
       }
 
-      // Archivos adjuntos
       if (form.attachments && form.attachments.length > 0) {
         form.attachments.forEach((file) => {
           formData.append("attachments", file);
         });
       }
 
-      for (let [key, value] of formData.entries()) {
-        console.log(`  ${key}:`, value instanceof File ? `File: ${value.name}` : value);
-      }
-
-      // Enviar al backend
-      const response = await createApplication(formData);
+      await createApplication(formData);
 
       Alerts.success("¡Tu proyecto ha sido enviado correctamente!");
       
@@ -222,8 +341,6 @@ export default function useRequestProject() {
       }, 2000);
 
     } catch (error) {
-
-      // Manejo de errores de validación
       if (error instanceof ValidationError) {
         if (error.details && error.details.length > 0) {
           const processedErrors = processFieldErrors(error.details);
@@ -233,9 +350,7 @@ export default function useRequestProject() {
         } else {
           Alerts.error(getDisplayMessage(error));
         }
-      } 
-      // Otros errores
-      else {
+      } else {
         Alerts.error(getDisplayMessage(error));
       }
     } finally {
@@ -251,5 +366,6 @@ export default function useRequestProject() {
     handleBannerSelection,
     handleRemoveAttachment,
     handleSubmit,
+    deadlineConstraints,
   };
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/features/projects/pages/ApplicationDetails.jsx b/apps/web/src/features/projects/pages/ApplicationDetails.jsx
index 470138a1..4b744cd3 100644
--- a/apps/web/src/features/projects/pages/ApplicationDetails.jsx
+++ b/apps/web/src/features/projects/pages/ApplicationDetails.jsx
@@ -8,6 +8,7 @@ import EditApplicationModal from '../components/EditApplicationModal';
 import useApplicationDetails from '../hooks/useApplicationDetails';
 import { downloadAllAttachments, approveApplication } from '../projectsService';
 import { Alerts } from '@/shared/alerts';
+import { formatDateStringSpanish } from '@/utils/dateUtils';
 
 export default function ApplicationDetails() {
   const { uuid } = useParams();
@@ -18,37 +19,23 @@ export default function ApplicationDetails() {
   const [isApproving, setIsApproving] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
-  // Handler para abrir modal de edición
   const handleEditClick = () => {
     setIsEditModalOpen(true);
   };
 
-  // Handler cuando se aprueba exitosamente desde el modal
-// Línea 27-36: REEMPLAZAR handleApproveSuccess
+  const handleEditSuccess = () => {
+    refetch();
+    Alerts.success("Cambios guardados exitosamente");
+  };
 
-// ✅ Handler cuando se aprueba exitosamente desde el modal
-const handleApproveSuccess = (projectUuid) => {
-  console.log("✅ Proyecto aprobado con UUID:", projectUuid);
-  
-  Alerts.success('¡Proyecto aprobado exitosamente!');
-  
-  setTimeout(() => {
-    // ✅ Redirigir a los detalles del proyecto creado
-    navigate(`/my-projects/${projectUuid}`);
-  }, 1500);
-};
-
-  // Formatear fechas
-  const formatDate = (dateString) => {
-    if (!dateString) return 'No especificada';
-    return new Date(dateString).toLocaleDateString('es-MX', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    });
+  const handleApproveSuccess = (projectUuid) => {
+    Alerts.success('¡Proyecto aprobado exitosamente!');
+    setTimeout(() => {
+      navigate(`/my-projects/${projectUuid}`);
+    }, 1500);
   };
 
-  // Función para descargar todos los archivos
+  // Descargar todos los archivos adjuntos
   const handleDownloadAll = async () => {
     if (!application?.attachments || application.attachments.length === 0) {
       alert('No hay archivos para descargar');
@@ -72,109 +59,88 @@ const handleApproveSuccess = (projectUuid) => {
     } finally {
       setIsDownloadingAll(false);
     }
-  }; 
-
-  // ✅ Handler para aprobar directamente (SIN editar)
-// Línea 84-130: Actualizar función handleApprove
-
-// Línea 84-140: Actualizar handleApprove
-
-// Línea 84-140: REEMPLAZAR función handleApprove completa
-
-// Línea 84-145: REEMPLAZAR handleApprove
-
-// Línea 84-145: REEMPLAZAR handleApprove
-
-const handleApprove = async () => {
-  const result = await Alerts.confirm({
-    title: '¿Aprobar este proyecto?',
-    text: 'Esta acción creará un nuevo proyecto activo basado en esta solicitud SIN modificaciones.',
-    confirmText: 'Sí, aprobar',
-    cancelText: 'Cancelar',
-  });
+  };
 
-  if (!result.isConfirmed) {
-    return;
-  }
+  // Aprobar proyecto sin modificaciones
+  const handleApprove = async () => {
+    const result = await Alerts.confirm({
+      title: '¿Aprobar este proyecto?',
+      text: 'Esta acción creará un nuevo proyecto activo basado en esta solicitud SIN modificaciones.',
+      confirmText: 'Sí, aprobar',
+      cancelText: 'Cancelar',
+    });
 
-  setIsApproving(true);
-  
-  try {
-    // Extraer IDs de los arrays
-    const projectTypeIds = application.projectTypes.map(pt => pt.id);
-    const facultyIds = application.faculties.map(f => f.id);
-    const problemTypeIds = application.problemTypes.map(pt => pt.id);
-
-    // Validaciones
-    if (projectTypeIds.length === 0) {
-      Alerts.warning('El proyecto debe tener al menos un tipo de proyecto');
-      setIsApproving(false);
-      return;
-    }
-    if (facultyIds.length === 0) {
-      Alerts.warning('El proyecto debe tener al menos una facultad');
-      setIsApproving(false);
-      return;
-    }
-    if (problemTypeIds.length === 0) {
-      Alerts.warning('El proyecto debe tener al menos un tipo de problemática');
-      setIsApproving(false);
+    if (!result.isConfirmed) {
       return;
     }
 
-    const projectData = {
-      title: application.title,
-      shortDescription: application.shortDescription,
-      description: application.detailedDescription,
-      estimatedDate: application.dueDate?.split('T')[0] || null,
-      projectType: projectTypeIds,
-      faculty: facultyIds,
-      problemType: problemTypeIds,
-    };
+    setIsApproving(true);
+    
+    try {
+      const projectTypeIds = application.projectTypes.map(pt => pt.id);
+      const facultyIds = application.faculties.map(f => f.id);
+      const problemTypeIds = application.problemTypes.map(pt => pt.id);
+
+      if (projectTypeIds.length === 0) {
+        Alerts.warning('El proyecto debe tener al menos un tipo de proyecto');
+        setIsApproving(false);
+        return;
+      }
+      if (facultyIds.length === 0) {
+        Alerts.warning('El proyecto debe tener al menos una facultad');
+        setIsApproving(false);
+        return;
+      }
+      if (problemTypeIds.length === 0) {
+        Alerts.warning('El proyecto debe tener al menos un tipo de problemática');
+        setIsApproving(false);
+        return;
+      }
 
-    console.log("📤 Aprobando proyecto directo:", projectData);
+      const projectData = {
+        title: application.title,
+        shortDescription: application.shortDescription,
+        description: application.detailedDescription,
+        estimatedDate: application.dueDate?.split('T')[0] || null,
+        projectType: projectTypeIds,
+        faculty: facultyIds,
+        problemType: problemTypeIds,
+      };
 
-    const loadingAlert = Alerts.loading('Aprobando proyecto...');
+      const loadingAlert = Alerts.loading('Aprobando proyecto...');
 
-    try {
-      const response = await approveApplication(uuid, projectData);
-      
-      loadingAlert.close();
+      try {
+        const response = await approveApplication(uuid, projectData);
+        
+        loadingAlert.close();
 
-      console.log('✅ Respuesta del backend:', response);
+        const projectUuid = response?.project?.uuid_project;
 
-      // ✅ Extraer UUID del proyecto creado
-      const projectUuid = response?.project?.uuid_project;
+        if (!projectUuid) {
+          throw new Error("No se pudo obtener el UUID del proyecto creado");
+        }
 
-      if (!projectUuid) {
-        console.error("❌ Backend no retornó uuid_project:", response);
-        throw new Error("No se pudo obtener el UUID del proyecto creado");
+        Alerts.success('¡Proyecto aprobado exitosamente!');
+        
+        setTimeout(() => {
+          navigate(`/my-projects/${projectUuid}`);
+        }, 1500);
+        
+      } catch (error) {
+        loadingAlert.close();
+        throw error;
       }
-
-      Alerts.success('¡Proyecto aprobado exitosamente!');
-      
-      setTimeout(() => {
-        // ✅ Redirigir a los detalles del proyecto creado
-        navigate(`/my-projects/${projectUuid}`);
-      }, 1500);
       
     } catch (error) {
-      loadingAlert.close();
-      throw error;
-    }
-    
-  } catch (error) {
-    console.error('❌ Error al aprobar proyecto:', error);
-    
-    if (error.message) {
-      Alerts.error(error.message);
-    } else {
-      Alerts.error('No se pudo aprobar el proyecto. Por favor, intenta nuevamente.');
+      if (error.message) {
+        Alerts.error(error.message);
+      } else {
+        Alerts.error('No se pudo aprobar el proyecto. Por favor, intenta nuevamente.');
+      }
+    } finally {
+      setIsApproving(false);
     }
-  } finally {
-    setIsApproving(false);
-  }
-};
+  };
 
   // Loading state
   if (isLoading) {
@@ -241,6 +207,7 @@ const handleApprove = async () => {
     );
   }
 
+  // Extraer datos de la aplicación
   const {
     title,
     shortDescription,
@@ -270,6 +237,7 @@ const handleApprove = async () => {
   const isOutsider = !!outsiderData;
   const authorRole = isOutsider ? 'Outsider' : 'Profesor';
 
+  // Información del solicitante
   const applicantInfo = [
     { 
       label: 'Nombre del solicitante', 
@@ -300,6 +268,7 @@ const handleApprove = async () => {
     ]),
   ];
 
+  // Información del proyecto
   const projectInfo = [
     { 
       label: 'Tipo de proyecto', 
@@ -321,11 +290,15 @@ const handleApprove = async () => {
     },
     { 
       label: 'Fecha límite', 
-      value: formatDate(dueDate) 
+      value: dueDate 
+        ? formatDateStringSpanish(dueDate.split('T')[0])
+        : 'No especificada'
     },
     { 
       label: 'Fecha de creación', 
-      value: formatDate(createdAt) 
+      value: createdAt 
+        ? formatDateStringSpanish(createdAt.split('T')[0])
+        : 'No especificada'
     },
     { 
       label: 'Estado', 
@@ -384,7 +357,7 @@ const handleApprove = async () => {
           )}
         </div>
 
-        {/* Columna derecha: Información */}
+        {/* Columna derecha: Información y acciones */}
         <div className="w-7/12">
           {/* Información del solicitante */}
           <h2 className="text-3xl font-bold mb-3">
@@ -402,7 +375,7 @@ const handleApprove = async () => {
           <div className="flex flex-col gap-3 pt-4 w-11/12">
             {/* Primera fila: Editar + Aceptar */}
             <div className='flex gap-5'>
-              {/* ✅ Botón Editar proyecto */}
+              {/* Botón Editar proyecto */}
               <button 
                 onClick={handleEditClick}
                 disabled={isApproving || isAlreadyApproved}
@@ -419,7 +392,7 @@ const handleApprove = async () => {
                 {isAlreadyApproved ? 'Ya aprobado' : 'Editar proyecto'}
               </button>
 
-              {/* ✅ Botón Aceptar Proyecto (directo, sin editar) */}
+              {/* Botón Aceptar Proyecto (directo, sin editar) */}
               <button 
                 onClick={handleApprove}
                 disabled={isApproving || isAlreadyApproved}
@@ -513,8 +486,9 @@ const handleApprove = async () => {
         onClose={() => setIsEditModalOpen(false)}
         uuid={uuid}
         application={application}
-        onSuccess={handleApproveSuccess}
+        onEditSuccess={handleEditSuccess}
+        onApproveSuccess={handleApproveSuccess}
       />
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/features/projects/pages/MyApplicationDetails.jsx b/apps/web/src/features/projects/pages/MyApplicationDetails.jsx
index 9a09351e..f1cd2a5e 100644
--- a/apps/web/src/features/projects/pages/MyApplicationDetails.jsx
+++ b/apps/web/src/features/projects/pages/MyApplicationDetails.jsx
@@ -6,6 +6,7 @@ import ProjectInfoCard from '../components/ProjectInfoCard';
 import AttachmentCard from '../components/AttachmentCard';
 import useApplicationDetails from '../hooks/useApplicationDetails';
 import { downloadAllAttachments } from '../projectsService';
+import { formatDateStringSpanish } from '@/utils/dateUtils';
 
 export default function MyApplicationDetails() {
   const { uuid } = useParams();
@@ -14,17 +15,7 @@ export default function MyApplicationDetails() {
   const [isDownloadingAll, setIsDownloadingAll] = useState(false);
   const [downloadError, setDownloadError] = useState(null);
 
-  // Formatear fechas
-  const formatDate = (dateString) => {
-    if (!dateString) return 'No especificada';
-    return new Date(dateString).toLocaleDateString('es-MX', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    });
-  };
-
-  // Función para descargar todos los archivos
+  // Descargar todos los archivos adjuntos
   const handleDownloadAll = async () => {
     if (!application?.attachments || application.attachments.length === 0) {
       alert('No hay archivos para descargar');
@@ -131,7 +122,7 @@ export default function MyApplicationDetails() {
     project,
   } = application;
 
-  // Determinar el estado visual
+  // Configuración de estados visuales
   const statusConfig = {
     pending: {
       label: 'Pendiente de revisión',
@@ -164,12 +155,12 @@ export default function MyApplicationDetails() {
 
   const currentStatus = statusConfig[status] || statusConfig.pending;
 
-  // Preparar información del proyecto
+  // Información del proyecto
   const projectInfo = [
     { 
       label: 'Tipo de proyecto', 
       value: projectTypes.length > 0 
-        ? projectTypes.map(pt => pt.name).join(', ')  // Extraer .name
+        ? projectTypes.map(pt => pt.name).join(', ')
         : 'No especificado' 
     },
     { 
@@ -186,15 +177,19 @@ export default function MyApplicationDetails() {
     },
     { 
       label: 'Fecha límite', 
-      value: formatDate(dueDate) 
+      value: dueDate 
+        ? formatDateStringSpanish(dueDate.split('T')[0])
+        : 'No especificada'
     },
     { 
       label: 'Fecha de creación', 
-      value: formatDate(createdAt) 
+      value: createdAt 
+        ? formatDateStringSpanish(createdAt.split('T')[0])
+        : 'No especificada'
     },
   ];
 
-  // Función para manejar contacto
+  // Manejar contacto con soporte
   const handleContact = () => {
     if (outsider?.email) {
       window.location.href = `mailto:${outsider.email}?subject=Consulta sobre solicitud: ${title}`;
@@ -259,7 +254,7 @@ export default function MyApplicationDetails() {
           )}
         </div>
 
-        {/* Columna derecha: Información */}
+        {/* Columna derecha: Información y acciones */}
         <div className="w-7/12">
           {/* Información del proyecto */}
           <h2 className="text-3xl font-bold mb-3">
@@ -279,7 +274,7 @@ export default function MyApplicationDetails() {
                     ¡Tu solicitud fue aprobada!
                   </h3>
                   <p className="text-sm text-green-700 mb-3">
-                    Esta solicitud se convirtió en un proyecto activo el {formatDate(project.createdAt)}
+                    Esta solicitud se convirtió en un proyecto activo el {formatDateStringSpanish(project.createdAt.split('T')[0])}
                   </p>
                   <button
                     onClick={() => navigate(`/project/${project.uuid_project}`)}
@@ -370,4 +365,4 @@ export default function MyApplicationDetails() {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/features/projects/pages/ProjectDetails.jsx b/apps/web/src/features/projects/pages/ProjectDetails.jsx
index ae1574b1..f542cdd3 100644
--- a/apps/web/src/features/projects/pages/ProjectDetails.jsx
+++ b/apps/web/src/features/projects/pages/ProjectDetails.jsx
@@ -6,6 +6,7 @@ import ProjectInfoCard from '../components/ProjectInfoCard';
 import AttachmentCard from '../components/AttachmentCard';
 import useProjectDetails from '../hooks/useProjectDetails';
 import { downloadAllAttachments } from '../projectsService';
+import { formatDateStringSpanish } from '@/utils/dateUtils';
 
 export default function ProjectDetails() {
   const { uuid } = useParams();
@@ -14,17 +15,7 @@ export default function ProjectDetails() {
   const [isDownloadingAll, setIsDownloadingAll] = useState(false);
   const [downloadError, setDownloadError] = useState(null);
 
-  // Formatear fechas
-  const formatDate = (dateString) => {
-    if (!dateString) return 'No especificada';
-    return new Date(dateString).toLocaleDateString('es-MX', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    });
-  };
-
-  // Función para descargar todos los archivos
+  // Descargar todos los archivos adjuntos
   const handleDownloadAll = async () => {
     if (!project?.attachments || project.attachments.length === 0) {
       alert('No hay archivos para descargar');
@@ -115,34 +106,24 @@ export default function ProjectDetails() {
     );
   }
 
-const {
-  title,
-  description,
-  shortDescription,
-  bannerUrl,
-  faculties = [],
-  author,
-  projectTypes = [],
-  problemTypes = [],
-  status,
-  statusDescription,
-  createdAt,
-  estimatedDate,
-  estimatedEffortHours,
-  teamMembers = [],
-  attachments = [],
-} = project;
-
-console.log("📊 [ProjectDetails] Datos del proyecto:", {
-  title,
-  projectTypes,
-  faculties,
-  problemTypes,
-  estimatedDate,
-  createdAt,
-  status,
-  teamMembers
-});
+  // Extraer datos del proyecto
+  const {
+    title,
+    description,
+    shortDescription,
+    bannerUrl,
+    faculties = [],
+    author,
+    projectTypes = [],
+    problemTypes = [],
+    status,
+    statusDescription,
+    createdAt,
+    estimatedDate,
+    estimatedEffortHours,
+    teamMembers = [],
+    attachments = [],
+  } = project;
 
   // Obtener datos del autor
   const authorFirstName = author?.firstName || 'No especificado';
@@ -161,102 +142,96 @@ console.log("📊 [ProjectDetails] Datos del proyecto:", {
   const authorRole = isOutsider ? 'Outsider' : 'Profesor';
 
   // Información del autor
-// Línea 120-130: ACTUALIZAR authorInfo
-
-const authorInfo = [
-  { 
-    label: 'Nombre', 
-    value: author?.fullName || 'No especificado' 
-  },
-  { 
-    label: 'Correo', 
-    value: author?.email || 'No especificado' 
-  },
-  { 
-    label: 'Matrícula', 
-    value: author?.universityId || 'No especificada' 
-  },
-  { 
-    label: 'Tipo de usuario', 
-    value: author?.roleName === 'professor' ? 'Profesor' :
-           author?.roleName === 'student' ? 'Estudiante' :
-           author?.roleName === 'outsider' ? 'Externo' :
-           author?.roleName || 'No especificado'
-  },
-  ...(author?.outsider ? [
+  const authorInfo = [
     { 
-      label: 'Organización', 
-      value: author.outsider.organizationName 
+      label: 'Nombre', 
+      value: author?.fullName || 'No especificado' 
     },
     { 
-      label: 'Teléfono', 
-      value: author.outsider.phoneNumber 
+      label: 'Correo', 
+      value: author?.email || 'No especificado' 
     },
     { 
-      label: 'Ubicación', 
-      value: author.outsider.location 
+      label: 'Matrícula', 
+      value: author?.universityId || 'No especificada' 
     },
-  ] : [
     { 
-      label: 'Información', 
-      value: author?.roleName === 'professor' 
-        ? 'Proyecto creado por un profesor' 
-        : author?.roleName === 'student'
-        ? 'Proyecto creado por un estudiante'
-        : 'Proyecto creado por un usuario externo'
-    }
-  ])
-];
+      label: 'Tipo de usuario', 
+      value: author?.roleName === 'professor' ? 'Profesor' :
+             author?.roleName === 'student' ? 'Estudiante' :
+             author?.roleName === 'outsider' ? 'Externo' :
+             author?.roleName || 'No especificado'
+    },
+    ...(author?.outsider ? [
+      { 
+        label: 'Organización', 
+        value: author.outsider.organizationName 
+      },
+      { 
+        label: 'Teléfono', 
+        value: author.outsider.phoneNumber 
+      },
+      { 
+        label: 'Ubicación', 
+        value: author.outsider.location 
+      },
+    ] : [
+      { 
+        label: 'Información', 
+        value: author?.roleName === 'professor' 
+          ? 'Proyecto creado por un profesor' 
+          : author?.roleName === 'student'
+          ? 'Proyecto creado por un estudiante'
+          : 'Proyecto creado por un usuario externo'
+      }
+    ])
+  ];
 
   // Información del proyecto
-// Línea 80-110: ACTUALIZAR projectInfo
-
-const projectInfo = [
-  { 
-    label: 'Tipo de proyecto', 
-    value: projectTypes.length > 0 
-      ? projectTypes.map(pt => pt.name).join(', ')
-      : 'No especificado' 
-  },
-  { 
-    label: 'Facultades', 
-    value: faculties.length > 0 
-      ? faculties.map(f => f.name).join(', ')
-      : 'No especificada' 
-  },
-  { 
-    label: 'Tipo de problemática', 
-    value: problemTypes.length > 0 
-      ? problemTypes.map(pt => pt.name).join(', ')
-      : 'No especificado' 
-  },
-  { 
-    label: 'Fecha estimada', 
-    value: estimatedDate ? formatDate(estimatedDate) : 'No especificada'
-  },
-  { 
-    label: 'Horas estimadas', 
-    value: estimatedEffortHours ? `${estimatedEffortHours} horas` : 'No especificadas'
-  },
-  { 
-    label: 'Fecha de creación', 
-    value: createdAt ? formatDate(createdAt) : 'No especificada'
-  },
-  { 
-    label: 'Estado', 
-    value: status || 'Aprobado'
-  },
-];
-
-// Línea 140-160: ACTUALIZAR teamInfo
+  const projectInfo = [
+    { 
+      label: 'Tipo de proyecto', 
+      value: projectTypes.length > 0 
+        ? projectTypes.map(pt => pt.name).join(', ')
+        : 'No especificado' 
+    },
+    { 
+      label: 'Facultades', 
+      value: faculties.length > 0 
+        ? faculties.map(f => f.name).join(', ')
+        : 'No especificada' 
+    },
+    { 
+      label: 'Tipo de problemática', 
+      value: problemTypes.length > 0 
+        ? problemTypes.map(pt => pt.name).join(', ')
+        : 'No especificado' 
+    },
+    { 
+      label: 'Fecha límite', 
+      value: estimatedDate 
+        ? formatDateStringSpanish(estimatedDate.split('T')[0])
+        : 'No especificada'
+    },
+    { 
+      label: 'Fecha de creación', 
+      value: createdAt 
+        ? formatDateStringSpanish(createdAt.split('T')[0])
+        : 'No especificada'
+    },
+    { 
+      label: 'Estado', 
+      value: status || 'Aprobado'
+    },
+  ];
 
-// ✅ Información del equipo
-const teamInfo = teamMembers.map(member => ({
-  label: member.role || 'Miembro',
-  value: `${member.fullName || 'Sin nombre'} (${member.email}) - ${member.universityId || 'Sin matrícula'}`
-}));
+  // Información del equipo
+  const teamInfo = teamMembers.map(member => ({
+    label: member.role || 'Miembro',
+    value: `${member.fullName || 'Sin nombre'} (${member.email}) - ${member.universityId || 'Sin matrícula'}`
+  }));
 
-  // Función para contactar
+  // Manejar contacto con el autor
   const handleContact = () => {
     if (authorEmail) {
       window.location.href = `mailto:${authorEmail}?subject=Consulta sobre proyecto: ${title}`;
@@ -313,7 +288,7 @@ const teamInfo = teamMembers.map(member => ({
           )}
         </div>
 
-        {/* Columna derecha: Información */}
+        {/* Columna derecha: Información y acciones */}
         <div className="w-7/12">
           {/* Información del autor */}
           <h2 className="text-3xl font-bold mb-3">
@@ -327,15 +302,15 @@ const teamInfo = teamMembers.map(member => ({
           </h2>
           <ProjectInfoCard items={projectInfo} />
 
-          {/* ✅ Sección de Equipo (si hay miembros) */}
-{project.teamMembers && project.teamMembers.length > 0 && (
-  <>
-    <h2 className="text-3xl font-bold mb-3 mt-8">
-      Equipo del <span className="text-lime-700">proyecto</span>
-    </h2>
-    <ProjectInfoCard items={teamInfo} />
-  </>
-)}
+          {/* Sección de Equipo (si hay miembros) */}
+          {project.teamMembers && project.teamMembers.length > 0 && (
+            <>
+              <h2 className="text-3xl font-bold mb-3 mt-8">
+                Equipo del <span className="text-lime-700">proyecto</span>
+              </h2>
+              <ProjectInfoCard items={teamInfo} />
+            </>
+          )}
 
           {/* Botones de acción */}
           <div className="flex flex-col gap-3 pt-6 w-11/12">
@@ -389,7 +364,7 @@ const teamInfo = teamMembers.map(member => ({
               <div>
                 <p className="font-semibold mb-1">Proyecto aprobado</p>
                 <p className="text-xs">
-                  Este proyecto fue aprobado el {formatDate(createdAt)}. Puedes gestionar su progreso desde esta página.
+                  Este proyecto fue aprobado el {formatDateStringSpanish(createdAt.split('T')[0])}. Puedes gestionar su progreso desde esta página.
                 </p>
               </div>
             </div>
@@ -398,4 +373,4 @@ const teamInfo = teamMembers.map(member => ({
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/features/projects/pages/RequestProject.jsx b/apps/web/src/features/projects/pages/RequestProject.jsx
index 62e3ccf9..bd3a369d 100644
--- a/apps/web/src/features/projects/pages/RequestProject.jsx
+++ b/apps/web/src/features/projects/pages/RequestProject.jsx
@@ -12,21 +12,22 @@ const RequestProject = () => {
     handleChange, 
     handleBannerSelection,
     handleRemoveAttachment,
-    handleSubmit 
+    handleSubmit,
+    deadlineConstraints,
   } = useRequestProject();
 
   const { isComplete, isLoading: profileLoading } = useProfileStatus();
   const [showHelp, setShowHelp] = useState(false);
   const [showModal, setShowModal] = useState(false);
 
+  // Mostrar modal si el perfil está incompleto
   useEffect(() => {
-    // Mostrar modal si el perfil está incompleto
     if (!profileLoading && !isComplete) {
       setShowModal(true);
     }
   }, [profileLoading, isComplete]);
 
-  // Mostrar loading mientras se verifica el perfil
+  // Loading state mientras se verifica el perfil
   if (profileLoading) {
     return (
       <div className="flex justify-center items-center min-h-screen">
@@ -43,7 +44,7 @@ const RequestProject = () => {
       <ProfileIncompleteModal 
         isOpen={showModal} 
         onClose={() => setShowModal(false)}
-        showCloseButton={false} // No permitir cerrar sin completar perfil
+        showCloseButton={false}
       />
       
       <section className="flex flex-col items-center justify-start w-full min-h-screen p-10">
@@ -66,6 +67,7 @@ const RequestProject = () => {
           </button>
         </div>
 
+        {/* Panel de ayuda con recomendaciones */}
         {showHelp && (
           <div className="max-w-4xl w-full bg-lime-100 border border-lime-300 text-sm text-lime-800 p-4 rounded mb-8">
             <p className="mb-2 font-semibold">Recomendaciones para llenar el formulario:</p>
@@ -83,6 +85,7 @@ const RequestProject = () => {
           </div>
         )}
 
+        {/* Formulario de solicitud */}
         <RequestProjectForm
           form={form}
           fieldErrors={fieldErrors}
@@ -91,10 +94,11 @@ const RequestProject = () => {
           handleBannerSelection={handleBannerSelection}
           handleRemoveAttachment={handleRemoveAttachment}
           handleSubmit={handleSubmit}
+          deadlineConstraints={deadlineConstraints}
         />
       </section>
     </>
   );
 };
 
-export default RequestProject;
\ No newline at end of file
+export default RequestProject;
diff --git a/apps/web/src/features/projects/projectsService.js b/apps/web/src/features/projects/projectsService.js
index df591a51..9b85fe99 100644
--- a/apps/web/src/features/projects/projectsService.js
+++ b/apps/web/src/features/projects/projectsService.js
@@ -8,14 +8,11 @@ export async function getCSRFToken() {
   });
 
   const { csrfToken } = await res.json();
-
   return csrfToken;
 }
 
 /**
  * Obtiene metadata para explorar aplicaciones (facultades disponibles)
- * @returns {Promise<object>} Metadata con facultades
- * @throws {ApplicationError}
  */
 export async function getExploreApplicationsMetadata() {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -31,11 +28,6 @@ export async function getExploreApplicationsMetadata() {
 
 /**
  * Explora aplicaciones con filtros opcionales
- * @param {string|null} facultyName - Nombre/abreviación de facultad para filtrar (ej: "FIE")
- * @param {number} page - Número de página (empieza en 1)
- * @param {number} limit - Items por página
- * @returns {Promise<{applications: Array, pagination: object}>}
- * @throws {ApplicationError}
  */
 export async function exploreApplications(facultyName = null, page = 1, limit = 9) {
   // Construir URL base
@@ -72,8 +64,6 @@ export async function exploreApplications(facultyName = null, page = 1, limit =
 
 /**
  * Obtiene metadata para crear una aplicación
- * @returns {Promise<object>} Metadata con facultades, tipos de proyecto, etc.
- * @throws {ApplicationError}
  */
 export async function getCreateMetadata() {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -100,9 +90,6 @@ export async function getCreateMetadata() {
 
 /**
  * Crea una nueva aplicación
- * @param {FormData} formData - Datos del formulario
- * @returns {Promise<object>} Aplicación creada
- * @throws {ValidationError|ApplicationError}
  */
 export async function createApplication(formData) {
   const csrfToken = await getCSRFToken();
@@ -123,8 +110,6 @@ export async function createApplication(formData) {
 
 /**
  * Obtiene el estado del perfil del usuario
- * @returns {Promise<{status: {isComplete: boolean}}>}
- * @throws {AuthenticationError|ApplicationError}
  */
 export async function getProfileStatus() {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -140,9 +125,6 @@ export async function getProfileStatus() {
 
 /**
  * Obtiene los detalles de una aplicación específica
- * @param {string} uuid - UUID de la aplicación
- * @returns {Promise<object>} Detalles completos de la aplicación
- * @throws {NotFoundError|ApplicationError}
  */
 export async function getApplicationDetails(uuid) {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -156,8 +138,8 @@ export async function getApplicationDetails(uuid) {
   const app = response.data.application;
 
   return {
-
     uuid_application: uuid,
+    
     // Información básica del proyecto
     title: app.details?.title || 'Sin título',
     shortDescription: app.details?.shortDescription || 'Sin descripción corta',
@@ -165,7 +147,8 @@ export async function getApplicationDetails(uuid) {
     
     // Fechas
     dueDate: app.details?.deadline,
-    createdAt: app.createdAt,
+    createdAt: app.details?.createdAt,
+    
     status: app.status || 'pending',
     
     // Banner con verificación de URL absoluta
@@ -196,15 +179,17 @@ export async function getApplicationDetails(uuid) {
       } : null,
     },
 
+    // Metadata (arrays de objetos con id y name)
     faculties: app.details?.faculties || [],  
     projectTypes: app.details?.projectTypes || [],
     problemTypes: app.details?.problemTypes || [],
     
+    // Arrays de IDs (para el modal de edición)
     facultyIds: (app.details?.faculties || []).map(f => f.id),
     projectTypeIds: (app.details?.projectTypes || []).map(pt => pt.id),
     problemTypeIds: (app.details?.problemTypes || []).map(pt => pt.id),
     
-    
+    // Outsider (legacy, para compatibilidad)
     outsider: {
       firstName: app.author?.fullName?.split(' ')[0] || 'No especificado',
       lastName: app.author?.fullName?.split(' ').slice(1).join(' ') || '',
@@ -214,7 +199,7 @@ export async function getApplicationDetails(uuid) {
       location: app.author?.outsider?.location || 'No especificado',
     },
     
-    // Facultad (legacy)
+    // Facultad (legacy, para compatibilidad)
     faculty: app.details?.faculties?.length > 0 
       ? { 
           name: app.details.faculties[0].name, 
@@ -226,19 +211,12 @@ export async function getApplicationDetails(uuid) {
 
 /**
  * Descarga un archivo individual y lo abre en nueva pestaña o descarga según el tipo
- * @param {string} downloadUrl - URL del archivo con ticket
- * @param {string} fileName - Nombre del archivo
- * @param {string} mimeType - Tipo MIME del archivo
- * @param {boolean} forceDownload - Si es true, fuerza la descarga en lugar de abrir
- * @returns {Promise<void>}
  */
 export async function downloadFile(downloadUrl, fileName, mimeType, forceDownload = false) {
   try {
-    
-    // Agregar credentials: 'include' para enviar cookies de sesión
     const response = await fetch(downloadUrl, {
       method: 'GET',
-      credentials: 'include', // Envía cookies de autenticación
+      credentials: 'include',
     });
 
     if (!response.ok) {
@@ -257,7 +235,6 @@ export async function downloadFile(downloadUrl, fileName, mimeType, forceDownloa
         throw new Error('No se pudo abrir la ventana. Verifica que tu navegador permita ventanas emergentes.');
       }
       
-      // Limpiar después de un tiempo para liberar memoria
       setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
       return;
     }
@@ -273,7 +250,6 @@ export async function downloadFile(downloadUrl, fileName, mimeType, forceDownloa
     document.body.appendChild(link);
     link.click();
     
-    // Limpiar
     setTimeout(() => {
       document.body.removeChild(link);
       URL.revokeObjectURL(objectUrl);
@@ -286,8 +262,6 @@ export async function downloadFile(downloadUrl, fileName, mimeType, forceDownloa
 
 /**
  * Descarga todos los archivos adjuntos de un proyecto
- * @param {Array} attachments - Array de objetos con downloadUrl, name, type
- * @returns {Promise<{successful: number, failed: number, errors: Array}>}
  */
 export async function downloadAllAttachments(attachments) {
   if (!attachments || attachments.length === 0) {
@@ -303,13 +277,12 @@ export async function downloadAllAttachments(attachments) {
     const file = attachments[i];
     
     try {
-      
       await downloadFile(file.downloadUrl, file.name, file.type, true);
       successful++;
       
       // Delay entre descargas para evitar bloqueo del navegador
       if (i < attachments.length - 1) {
-        await new Promise(resolve => setTimeout(resolve, 800)); // 800ms de delay
+        await new Promise(resolve => setTimeout(resolve, 800));
       }
     } catch (error) {
       failed++;
@@ -323,39 +296,27 @@ export async function downloadAllAttachments(attachments) {
 
 /**
  * Aprueba una Application y crea un Project
- * @param {string} uuid_application - UUID de la Application a aprobar
- * @param {object} projectData - Datos del proyecto
- * @returns {Promise<object>} Project creado
- * @throws {ValidationError|ApplicationError}
  */
 export async function approveApplication(uuid_application, projectData = {}) {
   const csrfToken = await getCSRFToken();
 
-  // ✅ Construir payload solo con campos que tengan valor
   const payload = {
     uuidApplication: uuid_application,
     title: projectData.title,
     shortDescription: projectData.shortDescription,
     description: projectData.description,
-    estimatedDate: projectData.estimatedDate,
-    
-    projectTypeId: projectData.projectType?.[0] || null,  
-    facultyIds: projectData.faculty || [],                
-    problemTypeIds: projectData.problemType || [],
+    deadline: projectData.deadline || projectData.estimatedDate,
+    projectType: Array.isArray(projectData.projectType) 
+      ? projectData.projectType[0]
+      : projectData.projectType,
+    problemType: projectData.problemType || [],
+    faculty: projectData.faculty,
   };
 
-  // ✅ Solo agregar problemTypeOther si existe
   if (projectData.problemTypeOther !== undefined && projectData.problemTypeOther !== null) {
     payload.problemTypeOther = projectData.problemTypeOther;
   }
 
-  // ✅ Solo agregar estimatedEffortHours si existe
-  if (projectData.estimatedEffortHours !== undefined) {
-    payload.estimatedEffortHours = projectData.estimatedEffortHours;
-  }
-
-  console.log("📤 [projectsService] Payload final:", payload);
-
   const response = await fetchWithAuthAndAutoRefresh(
     `${API_URL}/project/create`,
     {
@@ -368,18 +329,11 @@ export async function approveApplication(uuid_application, projectData = {}) {
     }
   );
 
-  console.log("✅ [projectsService] Respuesta completa del backend:", response);
-
-  // ✅ Retornar response.data (contiene { project: {...} })
   return response.data;
 }
 
 /**
  * Obtiene todas las applications del usuario autenticado
- * @param {number} page - Número de página
- * @param {number} limit - Items por página
- * @returns {Promise<{applications: Array, pagination: object}>}
- * @throws {ApplicationError}
  */
 export async function getMyApplications(page = 1, limit = 9) {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -408,10 +362,6 @@ export async function getMyApplications(page = 1, limit = 9) {
 
 /**
  * Obtiene todos los proyectos aprobados del usuario autenticado
- * @param {number} page - Número de página
- * @param {number} limit - Items por página
- * @returns {Promise<{projects: Array, pagination: object}>}
- * @throws {ApplicationError}
  */
 export async function getMyProjects(page = 1, limit = 9) {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -425,7 +375,6 @@ export async function getMyProjects(page = 1, limit = 9) {
   const records = response.data.projects.records;
   const paginationData = response.data.projects.metadata.pagination;
 
-  // Convertir URLs relativas a absolutas
   const projects = records.map((proj) => ({
     ...proj,
     bannerUrl: proj.bannerUrl?.startsWith('http') 
@@ -439,13 +388,8 @@ export async function getMyProjects(page = 1, limit = 9) {
   };
 }
 
-// Línea 416-490: REEMPLAZAR función getProjectDetails
-
 /**
  * Obtiene los detalles completos de un proyecto específico
- * @param {string} uuid - UUID del proyecto
- * @returns {Promise<Object>} Detalles del proyecto
- * @throws {ApplicationError}
  */
 export async function getProjectDetails(uuid) {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -457,29 +401,24 @@ export async function getProjectDetails(uuid) {
   );
 
   const proj = response.data.project;
-
-  console.log("✅ [getProjectDetails] Respuesta del backend:", proj);
-
-  // ✅ Extraer datos correctamente según la estructura real del backend
   const details = proj.details || {};
   const author = proj.author || {};
 
   return {
-    // IDs
     uuid_project: proj.uuid_project,
     uuidApplication: proj.uuidApplication,
 
-    // Información básica del proyecto
+    // Información básica
     title: details.title || 'Sin título',
     description: details.description || 'Sin descripción',
     shortDescription: details.shortDescription || 'Sin descripción corta',
     
-    // Banner con URL absoluta
+    // Banner
     bannerUrl: proj.bannerUrl?.startsWith('http')
       ? proj.bannerUrl
       : proj.bannerUrl ? `${API_URL}${proj.bannerUrl}` : null,
     
-    // Attachments con URLs absolutas
+    // Attachments
     attachments: (proj.appAttachments || []).map(att => ({
       downloadUrl: att.downloadUrl?.startsWith('http') 
         ? att.downloadUrl 
@@ -505,19 +444,12 @@ export async function getProjectDetails(uuid) {
       } : null,
     },
     
-    // ✅ Metadata del proyecto (extraído de details)
-    projectTypes: details.projectType ? [{
-      name: details.projectType.name,
-      minEstimatedMonths: details.projectType.minEstimatedMonths,
-      maxEstimatedMonths: details.projectType.maxEstimatedMonths,
-      requiredHours: details.projectType.requiredHours,
-    }] : [],
-    
+    // Metadata del proyecto
+    projectTypes: details.projectTypes || [],
     faculties: details.faculties || [],
-    
     problemTypes: details.problemTypes || [],
     
-    // ✅ Team members (extraído de details.teamMembers)
+    // Team members
     teamMembers: (details.teamMembers || []).map(member => ({
       uuid_user: member.uuid_user,
       fullName: member.fullName,
@@ -526,28 +458,19 @@ export async function getProjectDetails(uuid) {
       role: member.role,
     })),
     
-    // Estado del proyecto
+    // Estado
     status: details.status?.name || 'approved',
     statusDescription: details.status?.description,
     
     // Fechas
     createdAt: details.createdAt,
-    estimatedDate: details.estimatedDate,
-    estimatedEffortHours: details.estimatedEffortHours,
+    estimatedDate: details.deadline,
+    estimatedEffortHours: details.estimatedEffortHours || null,
   };
 }
+
 /**
  * Edita una Application existente (solo metadata)
- * @param {string} uuid - UUID de la Application
- * @param {object} editData - Datos a editar
- * @param {Array<number>} editData.projectType - IDs de tipos de proyecto
- * @param {Array<number>} editData.faculty - IDs de facultades
- * @param {Array<number>} editData.problemType - IDs de tipos de problemática
- * @param {string|null} editData.problemTypeOther - Descripción si "Otro" está seleccionado
- * @param {string} editData.deadline - Nueva fecha límite (YYYY-MM-DD)
- * @param {string} editData.editReason - Razón de la edición
- * @returns {Promise<object>} Application actualizada
- * @throws {ValidationError|ApplicationError}
  */
 export async function editApplication(uuid, editData) {
   const csrfToken = await getCSRFToken();
@@ -572,4 +495,50 @@ export async function editApplication(uuid, editData) {
   );
 
   return response.data;
-}
\ No newline at end of file
+}
+
+/**
+ * Actualiza una Application existente (solo metadata)
+ */
+export async function updateApplication(uuid, editData) {
+  const csrfToken = await getCSRFToken();
+
+  const payload = {
+    title: editData.title,
+    shortDescription: editData.shortDescription,
+    description: editData.description,
+    deadline: editData.deadline,
+  };
+
+  if (editData.projectType !== undefined) {
+    payload.projectType = Array.isArray(editData.projectType) 
+      ? editData.projectType[0]
+      : editData.projectType;
+  }
+
+  if (editData.faculty !== undefined) {
+    payload.faculty = editData.faculty;
+  }
+
+  if (editData.problemType !== undefined) {
+    payload.problemType = editData.problemType;
+  }
+
+  if (editData.problemTypeOther !== undefined && editData.problemTypeOther !== null) {
+    payload.problemTypeOther = editData.problemTypeOther;
+  }
+
+  const response = await fetchWithAuthAndAutoRefresh(
+    `${API_URL}/application/${uuid}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        "csrf-token": csrfToken,
+      },
+      body: JSON.stringify(payload),
+    }
+  );
+
+  return response.data;
+}
diff --git a/apps/web/src/utils/dateUtils.js b/apps/web/src/utils/dateUtils.js
new file mode 100644
index 00000000..129af145
--- /dev/null
+++ b/apps/web/src/utils/dateUtils.js
@@ -0,0 +1,53 @@
+/**
+ * Convierte un string de fecha YYYY-MM-DD a Date en zona horaria local
+ * Evita problemas de zona horaria con new Date(string)
+ */
+export const parseDateLocal = (dateString) => {
+  if (!dateString) return null;
+  
+  const [year, month, day] = dateString.split('-').map(Number);
+  return new Date(year, month - 1, day);
+};
+
+/**
+ * Formatea una fecha local a string legible en español SIN día de la semana
+ */
+export const formatDateSpanish = (date) => {
+  if (!date) return '';
+  
+  return date.toLocaleDateString('es-MX', { 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  });
+};
+
+/**
+ * Formatea un string de fecha YYYY-MM-DD a español SIN día de la semana
+ */
+export const formatDateStringSpanish = (dateString) => {
+  const date = parseDateLocal(dateString);
+  return date ? formatDateSpanish(date) : '';
+};
+
+/**
+ * Formatea una fecha local a string legible en español CON día de la semana
+ */
+export const formatDateSpanishWithWeekday = (date) => {
+  if (!date) return '';
+  
+  return date.toLocaleDateString('es-MX', { 
+    weekday: 'long',
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  });
+};
+
+/**
+ * Formatea un string de fecha YYYY-MM-DD a español CON día de la semana
+ */
+export const formatDateStringSpanishWithWeekday = (dateString) => {
+  const date = parseDateLocal(dateString);
+  return date ? formatDateSpanishWithWeekday(date) : '';
+};
\ No newline at end of file

From b5821a047de3a4a7d80a3ae480e9a0b0e5ad84d7 Mon Sep 17 00:00:00 2001
From: Cuenta Generica <confluence@clevercloud.mx>
Date: Sun, 23 Nov 2025 16:32:53 -0600
Subject: [PATCH 4/4] status and project actions

---
 .../src/features/auth/hooks/useCurrentUser.js |  66 ++-
 .../projects/components/MyProjectsList.jsx    |  31 +-
 .../projects/components/ProjectCard.jsx       |  82 ++--
 .../components/ProjectStatusBadge.jsx         |  30 ++
 .../components/RequestProjectForm.jsx         |  65 ++-
 .../components/RollbackProjectModal.jsx       | 125 +++++
 .../projects/components/StartProjectModal.jsx | 138 ++++++
 .../components/UpdateDeadlineModal.jsx        | 217 +++++++++
 .../projects/hooks/useProjectActions.js       |  91 ++++
 .../projects/hooks/useProjectDetails.js       |  58 +--
 .../projects/hooks/useProjectValidation.js    | 116 +++++
 .../projects/pages/ApplicationDetails.jsx     | 124 ++++-
 .../projects/pages/MyApplicationDetails.jsx   |  44 +-
 .../projects/pages/MyApplications.jsx         |   1 +
 .../projects/pages/ProjectDetails.jsx         | 440 +++++++++++-------
 .../projects/pages/RequestProject.jsx         |   2 +-
 .../src/features/projects/projectsService.js  | 121 ++++-
 .../teams/components/TeamMembersList.jsx      | 137 +++---
 .../features/teams/hooks/useTeamManagement.js |  21 +-
 .../web/src/features/teams/pages/TeamPage.jsx | 222 +++++++--
 apps/web/src/utils/statusUtils.js             |  71 +++
 estructura.txt                                |  49 --
 22 files changed, 1732 insertions(+), 519 deletions(-)
 create mode 100644 apps/web/src/features/projects/components/ProjectStatusBadge.jsx
 create mode 100644 apps/web/src/features/projects/components/RollbackProjectModal.jsx
 create mode 100644 apps/web/src/features/projects/components/StartProjectModal.jsx
 create mode 100644 apps/web/src/features/projects/components/UpdateDeadlineModal.jsx
 create mode 100644 apps/web/src/features/projects/hooks/useProjectActions.js
 create mode 100644 apps/web/src/features/projects/hooks/useProjectValidation.js
 create mode 100644 apps/web/src/utils/statusUtils.js
 delete mode 100644 estructura.txt

diff --git a/apps/web/src/features/auth/hooks/useCurrentUser.js b/apps/web/src/features/auth/hooks/useCurrentUser.js
index dbb694c3..77371b87 100644
--- a/apps/web/src/features/auth/hooks/useCurrentUser.js
+++ b/apps/web/src/features/auth/hooks/useCurrentUser.js
@@ -7,21 +7,71 @@ const API_URL = import.meta.env.VITE_API_URL;
  * Hook para obtener la sesión actual del usuario autenticado
  * @returns {Object} { user, role, isLoading, error }
  */
+// Variables globales para caché y deduplicación
+let cachedUser = null;
+let cachedRole = null;
+let fetchPromise = null;
+let lastFetchTime = 0;
+const CACHE_DURATION = 60000; // 1 minuto de caché
+
+/**
+ * Hook para obtener la sesión actual del usuario autenticado
+ * Implementa caché y deduplicación para evitar errores 429
+ * @returns {Object} { user, role, isLoading, error }
+ */
 export default function useCurrentUser() {
-  const [user, setUser] = useState(null);
-  const [role, setRole] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [user, setUser] = useState(cachedUser);
+  const [role, setRole] = useState(cachedRole);
+  const [isLoading, setIsLoading] = useState(!cachedUser);
   const [error, setError] = useState(null);
 
   useEffect(() => {
     const fetchCurrentUser = async () => {
+      // Si tenemos datos en caché y son recientes, no hacer nada
+      const now = Date.now();
+      if (cachedUser && (now - lastFetchTime < CACHE_DURATION)) {
+        setUser(cachedUser);
+        setRole(cachedRole);
+        setIsLoading(false);
+        return;
+      }
+
+      // Si ya hay una petición en curso, esperar a que termine
+      if (fetchPromise) {
+        try {
+          const data = await fetchPromise;
+          setUser(data.user);
+          setRole(data.role);
+        } catch (err) {
+          setError(err.message);
+        } finally {
+          setIsLoading(false);
+        }
+        return;
+      }
+
+      // Inicia una nueva petición
+      setIsLoading(true);
+      fetchPromise = fetchWithAuth(`${API_URL}/auth/me`)
+        .then(response => {
+          cachedUser = response.data.user;
+          cachedRole = response.data.role;
+          lastFetchTime = Date.now();
+          return { user: cachedUser, role: cachedRole };
+        })
+        .catch(err => {
+          console.error("Error fetching current user:", err);
+          throw err;
+        })
+        .finally(() => {
+          fetchPromise = null; // Limpia la promesa al terminar
+        });
+
       try {
-        const response = await fetchWithAuth(`${API_URL}/auth/me`);
-        
-        setUser(response.data.user);
-        setRole(response.data.role);
+        const data = await fetchPromise;
+        setUser(data.user);
+        setRole(data.role);
       } catch (err) {
-        console.error("Error fetching current user:", err);
         setError(err.message);
       } finally {
         setIsLoading(false);
diff --git a/apps/web/src/features/projects/components/MyProjectsList.jsx b/apps/web/src/features/projects/components/MyProjectsList.jsx
index f1099572..2b21cdb7 100644
--- a/apps/web/src/features/projects/components/MyProjectsList.jsx
+++ b/apps/web/src/features/projects/components/MyProjectsList.jsx
@@ -18,13 +18,11 @@ const MyProjectsList = () => {
     );
   });
 
-const handleProjectClick = (uuid) => {
-  // ✅ Navegar con el UUID del proyecto, NO con uuidApplication
-  console.log("🔍 Navegando a proyecto:", uuid);
-  navigate(`/my-projects/${uuid}`);
-};
+  const handleProjectClick = (uuid) => {
+    console.log("🔍 Navegando a proyecto:", uuid);
+    navigate(`/my-projects/${uuid}`);
+  };
 
-  // NUEVA FUNCIÓN: Navegar a la página de equipo
   const handleTeamClick = (uuid) => {
     navigate(`/my-projects/${uuid}/team`);
   };
@@ -108,16 +106,17 @@ const handleProjectClick = (uuid) => {
         <>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-11/12 mb-10">
             {filteredProjects.map((proj) => (
-<ProjectCard
-  key={proj.uuid_project}
-  uuid={proj.uuid_project}  // ✅ Pasar uuid_project
-  image={proj.bannerUrl}
-  title={proj.title}
-  description={proj.shortDescription}
-  onDetailsClick={() => handleProjectClick(proj.uuid_project, proj.uuidApplication)}
-  showTeamButton={true}
-  onTeamClick={handleTeamClick}
-/>
+            <ProjectCard
+              key={proj.uuid_project}
+              uuid={proj.uuid_project}
+              image={proj.bannerUrl}
+              title={proj.title}
+              description={proj.shortDescription}
+              onDetailsClick={() => handleProjectClick(proj.uuid_project)}
+              showTeamButton={true}
+              status={proj.status}
+              onTeamClick={handleTeamClick}
+            />
             ))}
           </div>
 
diff --git a/apps/web/src/features/projects/components/ProjectCard.jsx b/apps/web/src/features/projects/components/ProjectCard.jsx
index 110d91b5..608f9060 100644
--- a/apps/web/src/features/projects/components/ProjectCard.jsx
+++ b/apps/web/src/features/projects/components/ProjectCard.jsx
@@ -1,28 +1,17 @@
-import React, { useState } from 'react';
+import React from 'react';
 import projectImage from '@/assets/project2.webp';
+import ProjectStatusBadge from './ProjectStatusBadge';
 
 const ProjectCard = ({ 
   uuid, 
   title, 
   description, 
   image, 
-  isFavorite = false, 
-  onFavoriteToggle, 
+  status,
   onDetailsClick,
-  showTeamButton = false, // NUEVA PROP
-  onTeamClick // NUEVA PROP
+  showTeamButton = false,
+  onTeamClick
 }) => {
-  const [favorite, setFavorite] = useState(isFavorite);
-
-  const handleFavoriteClick = () => {
-    const newFavoriteState = !favorite;
-    setFavorite(newFavoriteState);
-    
-    if (onFavoriteToggle) {
-      onFavoriteToggle(newFavoriteState, uuid);
-    }
-  };
-
   const handleDetailsClick = () => {
     if (onDetailsClick) {
       onDetailsClick(uuid);
@@ -36,52 +25,41 @@ const ProjectCard = ({
   };
 
   return (
-    <div className="bg-white rounded-3xl shadow-md p-2 w-full relative hover:shadow-xl transition-shadow duration-300">
-      <button
-        onClick={handleFavoriteClick}
-        className="absolute top-4 right-4 z-10 p-2 rounded-full bg-white/80 backdrop-blur-sm shadow-lg hover:bg-white transition-all duration-200 hover:scale-110"
-        aria-label={favorite ? "Quitar de favoritos" : "Agregar a favoritos"}
-      >
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          className={`transition-colors duration-200 ${
-            favorite ? 'fill-yellow-400 stroke-yellow-400' : 'fill-none stroke-gray-400'
-          }`}
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
-        </svg>
-      </button>
-
-      <img
-        src={image || projectImage}
-        alt={title}
-        className="w-full h-52 object-cover rounded-xl mb-4"
-        onError={(e) => {
-          e.target.src = projectImage;
-        }}
-      />
+    <div className="bg-white rounded-3xl shadow-md p-2 w-full relative hover:shadow-xl transition-shadow duration-300 flex flex-col h-full">
+      {/* Contenedor de imagen con overlay y badge */}
+      <div className="relative w-full h-52 mb-4 group">
+        <img
+          src={image || projectImage}
+          alt={title}
+          className="w-full h-full object-cover rounded-xl"
+          onError={(e) => {
+            e.target.src = projectImage;
+          }}
+        />
+        <div className="absolute inset-0 bg-black/15 rounded-xl pointer-events-none" />
+        
+        {/* Badge de estado */}
+        {status && (
+          <div className="absolute top-3 right-3 z-10">
+            <ProjectStatusBadge status={status} size="sm" />
+          </div>
+        )}
+      </div>
       
-      <div className='p-3'>
-        <h3 className="font-bold text-xl mb-1 line-clamp-2">{title}</h3>
-        <p className="text-md text-gray-700 mb-4 line-clamp-3">{description}</p>
+      <div className='p-3 flex flex-col flex-grow'>
+        <h3 className="font-bold text-xl mb-2 line-clamp-2">{title}</h3>
+        <p className="text-md text-gray-700 mb-6 line-clamp-3 flex-grow">{description}</p>
         
-        {/* BOTONES: Ver detalles y Ver equipo (condicional) */}
-        <div className={`flex gap-3 ${showTeamButton ? 'flex-row' : ''}`}>
+        <div className={`flex gap-3 mt-auto ${showTeamButton ? 'flex-row' : ''}`}>
           <button
             onClick={handleDetailsClick}
             className={`inline-block bg-lime-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-lime-700 transition ${
               showTeamButton ? 'flex-1' : 'w-full'
             }`}
           >
-            Ver detalles
+            Detalles
           </button>
 
-          {/* NUEVO BOTÓN: Ver Equipo (solo si showTeamButton es true) */}
           {showTeamButton && (
             <button
               onClick={handleTeamClick}
diff --git a/apps/web/src/features/projects/components/ProjectStatusBadge.jsx b/apps/web/src/features/projects/components/ProjectStatusBadge.jsx
new file mode 100644
index 00000000..bd4d81b9
--- /dev/null
+++ b/apps/web/src/features/projects/components/ProjectStatusBadge.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { getStatusName, getStatusConfig } from '@/utils/statusUtils';
+
+export default function ProjectStatusBadge({ status, size = 'md', className = '' }) {
+  if (!status) return null;
+
+  const slug = typeof status === 'string' ? status : status.slug;
+  const name = typeof status === 'object' && status.name ? status.name : getStatusName(slug);
+  const config = getStatusConfig(slug);
+
+  const sizeClasses = {
+    sm: 'px-2 py-1 text-xs',
+    md: 'px-3 py-1.5 text-sm',
+    lg: 'px-4 py-2 text-base'
+  };
+
+  return (
+    <span
+      className={`
+        inline-flex items-center gap-1 rounded-xl font-semibold border-2
+        ${config.bg} ${config.text} ${config.border}
+        ${sizeClasses[size]}
+        ${className}
+      `}
+    >
+      <span className="w-2 h-2 rounded-full bg-current"></span>
+      {name}
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/features/projects/components/RequestProjectForm.jsx b/apps/web/src/features/projects/components/RequestProjectForm.jsx
index c1765c4c..b8861970 100644
--- a/apps/web/src/features/projects/components/RequestProjectForm.jsx
+++ b/apps/web/src/features/projects/components/RequestProjectForm.jsx
@@ -136,13 +136,13 @@ export default function RequestProjectForm({
       {/* Información Básica */}
       <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
         <div className="flex items-center gap-3 mb-6">
-          <div className="w-10 h-10 bg-lime-100 rounded-xl flex items-center justify-center">
-            <svg className="w-6 h-6 text-lime-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div className="w-10 h-10 bg-lime-50 rounded-xl flex items-center justify-center">
+            <svg className="w-6 h-6 text-lime-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
             </svg>
           </div>
           <div>
-            <h3 className="text-xl font-bold text-gray-900">Información Básica</h3>
+            <h3 className="text-xl font-bold text-gray-900">Información <span className='text-lime-700'>Básica</span></h3>
             <p className="text-sm text-gray-500">Describe tu proyecto de manera clara y concisa</p>
           </div>
         </div>
@@ -226,14 +226,14 @@ export default function RequestProjectForm({
       {/* Clasificación del Proyecto */}
       <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
         <div className="flex items-center gap-3 mb-6">
-          <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
-            <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div className="w-10 h-10 bg-lime-50 rounded-xl flex items-center justify-center">
+            <svg className="w-6 h-6 text-lime-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
             </svg>
           </div>
           <div>
             <h3 className="text-xl font-bold text-gray-900">Clasificación</h3>
-            <p className="text-sm text-gray-500">Categoriza tu proyecto (opcional)</p>
+            <p className="text-sm text-gray-500">Categoriza tu proyecto <span className="text-lime-600">(opcional)</span></p>
           </div>
         </div>
 
@@ -256,8 +256,8 @@ export default function RequestProjectForm({
             </div>
             
             {showInfo && (
-              <div className="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-xl">
-                <p className="text-sm text-blue-800">
+              <div className="mb-4 p-4 bg-lime-50 border border-lime-200 rounded-xl">
+                <p className="text-sm text-lime-800">
                   Selecciona la modalidad académica a la que aplica tu proyecto.
                 </p>
               </div>
@@ -375,43 +375,43 @@ export default function RequestProjectForm({
       {/* Vigencia */}
       <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
         <div className="flex items-center gap-3 mb-6">
-          <div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
-            <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div className="w-10 h-10 bg-lime-50 rounded-xl flex items-center justify-center">
+            <svg className="w-6 h-6 text-lime-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
             </svg>
           </div>
           <div>
-            <h3 className="text-xl font-bold text-gray-900">Fecha Límite</h3>
+            <h3 className="text-xl font-bold text-gray-900">Fecha<span className="text-lime-700"> Límite</span></h3>
             <p className="text-sm text-gray-500">¿Cuándo necesitas completar el proyecto?</p>
           </div>
         </div>
 
         {deadlineConstraints.projectTypeName ? (
-          <div className="mb-4 p-5 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-xl">
+          <div className="mb-4 p-5 bg-gradient-to-br from-lime-50 to-lime-50 border border-lime-200 rounded-xl">
             <div className="flex gap-4">
               <div className="flex-shrink-0">
-                <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
+                <div className="w-10 h-10 bg-lime-600 rounded-lg flex items-center justify-center">
                   <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                   </svg>
                 </div>
               </div>
               <div className="flex-1">
-                <h4 className="font-bold text-blue-900 mb-2">{deadlineConstraints.projectTypeName}</h4>
-                <div className="space-y-1.5 text-sm text-blue-800">
+                <h4 className="font-bold text-lime-700 mb-2">{deadlineConstraints.projectTypeName}</h4>
+                <div className="space-y-1.5 text-sm text-lime-800">
                   <div className="flex items-center gap-2">
-                    <svg className="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                    <svg className="w-4 h-4 text-lime-600" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                     </svg>
                     <span><strong>Inicio:</strong> {formatDateStringSpanish(deadlineConstraints.min)}</span>
                   </div>
                   <div className="flex items-center gap-2">
-                    <svg className="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                    <svg className="w-4 h-4 text-lime-600" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                     </svg>
                     <span><strong>Límite:</strong> {formatDateStringSpanish(deadlineConstraints.max)}</span>
                   </div>
-                  <div className="mt-2 pt-2 border-t border-blue-200">
+                  <div className="mt-2 pt-2 border-t border-lime-200">
                     <span className="text-xs font-semibold">Duración: {deadlineConstraints.minMonths} a {deadlineConstraints.maxMonths} meses</span>
                   </div>
                 </div>
@@ -419,11 +419,11 @@ export default function RequestProjectForm({
             </div>
           </div>
         ) : (
-          <div className="mb-4 p-4 bg-amber-50 border border-amber-200 rounded-xl flex items-start gap-3">
-            <svg className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+          <div className="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-xl flex items-start gap-3">
+            <svg className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
               <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
             </svg>
-            <p className="text-sm text-amber-800">
+            <p className="text-sm text-yellow-800">
               Selecciona un tipo de proyecto para ver el rango de fechas permitidas
             </p>
           </div>
@@ -457,11 +457,11 @@ export default function RequestProjectForm({
         )}
 
         {!fieldErrors?.deadline && form.deadline && deadlineConstraints.min && (
-          <div className="mt-3 p-3 bg-green-50 border border-green-200 rounded-xl flex items-center gap-2">
-            <svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+          <div className="mt-3 p-3 bg-lime-50 border border-lime-200 rounded-xl flex items-center gap-2">
+            <svg className="w-5 h-5 text-lime-600" fill="currentColor" viewBox="0 0 20 20">
               <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
             </svg>
-            <p className="text-sm text-green-700 font-medium">Fecha válida seleccionada</p>
+            <p className="text-sm text-lime-700 font-medium">Fecha válida seleccionada</p>
           </div>
         )}
       </div>
@@ -469,13 +469,13 @@ export default function RequestProjectForm({
       {/* Banner */}
       <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
         <div className="flex items-center gap-3 mb-6">
-          <div className="w-10 h-10 bg-pink-100 rounded-xl flex items-center justify-center">
-            <svg className="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div className="w-10 h-10 bg-lime-50 rounded-xl flex items-center justify-center">
+            <svg className="w-6 h-6 text-lime-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
             </svg>
           </div>
           <div>
-            <h3 className="text-xl font-bold text-gray-900">Banner del Proyecto</h3>
+            <h3 className="text-xl font-bold text-gray-900">Banner del <span className="font-semibold text-lime-700">Proyecto</span></h3>
             <p className="text-sm text-gray-500">Imagen principal que representará tu proyecto</p>
           </div>
         </div>
@@ -557,14 +557,14 @@ export default function RequestProjectForm({
       <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center">
-              <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div className="w-10 h-10 bg-lime-50 rounded-xl flex items-center justify-center">
+              <svg className="w-6 h-6 text-lime-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
               </svg>
             </div>
             <div>
-              <h3 className="text-xl font-bold text-gray-900">Archivos Adjuntos</h3>
-              <p className="text-sm text-gray-500">Documentos de apoyo (máximo 5 archivos)</p>
+              <h3 className="text-xl font-bold text-gray-900">Archivos <span className="font-semibold text-lime-700">Adjuntos</span></h3>
+              <p className="text-sm text-gray-500">Documentos de apoyo <span className="font-semibold text-lime-600">(máximo 5 archivos)</span></p>
             </div>
           </div>
           <div className="px-4 py-2 bg-gray-100 rounded-lg">
@@ -662,9 +662,6 @@ export default function RequestProjectForm({
             </>
           ) : (
             <>
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-              </svg>
               <span>Enviar Solicitud</span>
             </>
           )}
diff --git a/apps/web/src/features/projects/components/RollbackProjectModal.jsx b/apps/web/src/features/projects/components/RollbackProjectModal.jsx
new file mode 100644
index 00000000..9f8dcb61
--- /dev/null
+++ b/apps/web/src/features/projects/components/RollbackProjectModal.jsx
@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+
+export default function RollbackProjectModal({ 
+  isOpen, 
+  onClose, 
+  project, 
+  onConfirm, 
+  isLoading 
+}) {
+  const [confirmText, setConfirmText] = useState('');
+  const isConfirmValid = confirmText.trim().toUpperCase() === 'CONFIRMAR';
+
+  if (!isOpen) return null;
+
+  const handleConfirm = () => {
+    if (isConfirmValid && !isLoading) {
+      onConfirm();
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-lg w-full mx-4 p-6">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200">
+            Revertir Proyecto
+          </h2>
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="space-y-4">
+          {/* Advertencia principal */}
+          <div className="p-4 bg-red-50 dark:bg-red-900/20 border-2 border-red-300 dark:border-red-700 rounded-lg">
+            <div className="flex items-start gap-3">
+              <svg className="w-6 h-6 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              <div>
+                <p className="text-sm font-bold text-red-800 dark:text-red-300 mb-2">
+                  ADVERTENCIA: Esta acción es destructiva e irreversible
+                </p>
+                <ul className="text-sm text-red-700 dark:text-red-400 space-y-1 list-disc list-inside">
+                  <li>El proyecto será eliminado permanentemente</li>
+                  <li>La solicitud volverá al estado "En Revisión"</li>
+                  <li>Estará disponible para que otro profesor la apruebe</li>
+                  <li>Todo el progreso del proyecto se perderá</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Información del proyecto */}
+          <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+              <span className="font-semibold">Proyecto:</span> {project?.title || 'Sin título'}
+            </p>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              <span className="font-semibold">Estado actual:</span> {project?.status?.name || 'Desconocido'}
+            </p>
+          </div>
+
+          {/* Campo de confirmación */}
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+              Para confirmar, escribe <span className="text-red-600 dark:text-red-400">CONFIRMAR</span> en mayúsculas:
+            </label>
+            <input
+              type="text"
+              value={confirmText}
+              onChange={(e) => setConfirmText(e.target.value)}
+              disabled={isLoading}
+              placeholder="Escribe CONFIRMAR"
+              className="w-full px-4 py-2 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-red-500 dark:focus:border-red-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+            />
+          </div>
+
+          {/* Mensaje de validación */}
+          {confirmText && !isConfirmValid && (
+            <p className="text-sm text-red-600 dark:text-red-400">
+              El texto no coincide. Debe ser exactamente "CONFIRMAR" en mayúsculas.
+            </p>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-3 mt-6">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="flex-1 px-4 py-2 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition disabled:opacity-50"
+          >
+            Cancelar
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={!isConfirmValid || isLoading}
+            className="flex-1 px-4 py-2 bg-red-700 text-white rounded-lg hover:bg-red-800 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+          >
+            {isLoading ? (
+              <>
+                <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <span>Revirtiendo...</span>
+              </>
+            ) : (
+              'Revertir Proyecto'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/features/projects/components/StartProjectModal.jsx b/apps/web/src/features/projects/components/StartProjectModal.jsx
new file mode 100644
index 00000000..cef54252
--- /dev/null
+++ b/apps/web/src/features/projects/components/StartProjectModal.jsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import useProjectValidation from '../hooks/useProjectValidation';
+
+export default function StartProjectModal({ 
+  isOpen, 
+  onClose, 
+  project, 
+  onConfirm, 
+  isLoading 
+}) {
+  const validation = useProjectValidation(project);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-lg w-full mx-4 p-6">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200">
+            Iniciar Proyecto
+          </h2>
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="space-y-4">
+          {/* Validaciones */}
+          <div className="space-y-2">
+            <div className={`flex items-center gap-2 ${validation.teamValid ? 'text-lime-600' : 'text-red-600'}`}>
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {validation.teamValid ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                )}
+              </svg>
+              <span>Equipo completo</span>
+            </div>
+
+            <div className={`flex items-center gap-2 ${validation.deadlineValid ? 'text-lime-600' : 'text-red-600'}`}>
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {validation.deadlineValid ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                )}
+              </svg>
+              <span>Fecha límite válida</span>
+            </div>
+          </div>
+
+          {/* Errores */}
+          {validation.errors.length > 0 && (
+            <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+              <p className="text-sm text-red-800 dark:text-red-300 font-semibold mb-2">
+                No se puede iniciar el proyecto:
+              </p>
+              <ul className="text-sm text-red-700 dark:text-red-400 list-disc list-inside space-y-1">
+                {validation.errors.map((error, idx) => (
+                  <li key={idx}>{error}</li>
+                ))}
+              </ul>
+              
+              {/* Mostrar detalles de roles faltantes */}
+              {validation.missingRoles && validation.missingRoles.length > 0 && (
+                <div className="mt-3 pt-3 border-t border-red-200 dark:border-red-800">
+                  <p className="text-sm text-red-800 dark:text-red-300 font-semibold mb-2">
+                    Miembros faltantes por rol:
+                  </p>
+                  <ul className="text-sm text-red-700 dark:text-red-400 space-y-1">
+                    {validation.missingRoles.map((roleInfo, idx) => (
+                      <li key={idx} className="flex items-start gap-2">
+                        <svg className="w-4 h-4 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                        </svg>
+                        <span>
+                          <strong>{roleInfo.role}</strong>: Tienes {roleInfo.current}, necesitas mínimo {roleInfo.min}
+                          {roleInfo.max !== '∞' && ` (máximo ${roleInfo.max})`}
+                          {' '}- <span className="font-semibold">Faltan {roleInfo.needed}</span>
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Advertencia */}
+          {validation.canStart && (
+            <div className="p-4 bg-lime-50 dark:bg-lime-900/20 border border-lime-200 dark:border-lime-800 rounded-lg">
+              <p className="text-sm text-lime-800 dark:text-lime-300">
+                Una vez iniciado, no podrás modificar el equipo del proyecto.
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-3 mt-6">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="flex-1 px-4 py-2 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition disabled:opacity-50"
+          >
+            Cancelar
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={!validation.canStart || isLoading}
+            className="flex-1 px-4 py-2 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+          >
+            {isLoading ? (
+              <>
+                <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <span>Iniciando...</span>
+              </>
+            ) : (
+              'Iniciar Proyecto'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/features/projects/components/UpdateDeadlineModal.jsx b/apps/web/src/features/projects/components/UpdateDeadlineModal.jsx
new file mode 100644
index 00000000..9c058c05
--- /dev/null
+++ b/apps/web/src/features/projects/components/UpdateDeadlineModal.jsx
@@ -0,0 +1,217 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { parseDateLocal, formatDateSpanish } from '@/utils/dateUtils';
+
+export default function UpdateDeadlineModal({ 
+  isOpen, 
+  onClose, 
+  project, 
+  onConfirm, 
+  isLoading 
+}) {
+  const [newDeadline, setNewDeadline] = useState('');
+  const [validationError, setValidationError] = useState('');
+
+  // Calcular fechas mínimas y máximas basadas en el tipo de proyecto
+  const dateConstraints = useMemo(() => {
+    if (!project?.createdAt || !project?.projectTypes?.[0]) {
+      return null;
+    }
+
+    const projectType = project.projectTypes[0];
+    const createdDate = parseDateLocal(project.createdAt.split('T')[0]);
+    
+    const minMonths = projectType.minEstimatedMonths || 0;
+    // Calcular fechas mínima y máxima permitidas
+    // Mínimo: Fecha de creación + meses mínimos del tipo de proyecto
+    const minDate = new Date(createdDate);
+    minDate.setMonth(minDate.getMonth() + minMonths);
+
+    // Máximo: Regla de negocio específica -> 1 mes después de la fecha mínima
+    const maxDate = new Date(minDate);
+    maxDate.setMonth(maxDate.getMonth() + 1);
+
+    return {
+      minDate,
+      maxDate,
+      minDateString: minDate.toISOString().split('T')[0],
+      maxDateString: maxDate.toISOString().split('T')[0],
+      minMonths,
+      maxMonths: minMonths + 1 // Ajustamos visualmente para reflejar la regla
+    };
+  }, [project]);
+
+  // Inicializar con la fecha actual del proyecto o la mínima permitida
+  useEffect(() => {
+    if (isOpen && project?.estimatedDate && dateConstraints) {
+      const currentDeadline = project.estimatedDate.split('T')[0];
+      
+      // Si la fecha actual es menor a la mínima permitida se usa la mínima
+      if (new Date(currentDeadline) < dateConstraints.minDate) {
+        setNewDeadline(dateConstraints.minDateString);
+      } else {
+        setNewDeadline(currentDeadline);
+      }
+      setValidationError('');
+    }
+  }, [isOpen, project, dateConstraints]);
+
+  // Valida la fecha en tiempo real
+  useEffect(() => {
+    if (!newDeadline || !dateConstraints) {
+      setValidationError('');
+      return;
+    }
+
+    const selectedDate = parseDateLocal(newDeadline);
+    
+    // Normalizar a medianoche para comparar solo fechas sin horas
+    const selectedTime = new Date(selectedDate).setHours(0, 0, 0, 0);
+    const minTime = new Date(dateConstraints.minDate).setHours(0, 0, 0, 0);
+    const maxTime = new Date(dateConstraints.maxDate).setHours(0, 0, 0, 0);
+    
+    if (selectedTime < minTime) {
+      setValidationError(
+        `La fecha seleccionada (${formatDateSpanish(selectedDate)}) es anterior al mínimo permitido: ${formatDateSpanish(dateConstraints.minDate)}`
+      );
+    } else if (selectedTime > maxTime) {
+      setValidationError(
+        `La fecha seleccionada (${formatDateSpanish(selectedDate)}) excede el límite permitido: ${formatDateSpanish(dateConstraints.maxDate)}`
+      );
+    } else {
+      setValidationError('');
+    }
+  }, [newDeadline, dateConstraints]);
+
+  if (!isOpen) return null;
+
+  const handleConfirm = () => {
+    if (!validationError && newDeadline && !isLoading) {
+      // formato YYYY-MM-DD
+      onConfirm(newDeadline);
+    }
+  };
+
+  const isValid = !validationError && newDeadline;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-lg w-full mx-4 p-6">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200">
+            Actualizar Fecha Límite
+          </h2>
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="space-y-4">
+          {/* Información del proyecto */}
+          <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+              <span className="font-semibold">Proyecto:</span> {project?.title || 'Sin título'}
+            </p>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              <span className="font-semibold">Tipo:</span> {dateConstraints?.projectTypeName || 'No especificado'}
+            </p>
+          </div>
+
+          {/* Restricciones */}
+          {dateConstraints && (
+            <div className="p-4 bg-lime-50 dark:bg-lime-900/20 border border-lime-200 dark:border-lime-800 rounded-lg">
+              <p className="text-sm font-semibold text-lime-800 dark:text-lime-300 mb-2">
+                Restricciones del tipo de proyecto:
+              </p>
+              <ul className="text-sm text-lime-700 dark:text-lime-400 space-y-1">
+                <li>
+                  <span className="font-semibold">Mínimo:</span> {formatDateSpanish(dateConstraints.minDate)} 
+                  <span className="text-xs ml-1">({dateConstraints.minMonths} meses)</span>
+                </li>
+                <li>
+                  <span className="font-semibold">Máximo:</span> {formatDateSpanish(dateConstraints.maxDate)}
+                  <span className="text-xs ml-1">({dateConstraints.maxMonths} meses)</span>
+                </li>
+              </ul>
+            </div>
+          )}
+
+          {/* Campo de fecha */}
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+              Nueva Fecha Límite
+            </label>
+            <input
+              type="date"
+              value={newDeadline}
+              onChange={(e) => setNewDeadline(e.target.value)}
+              disabled={isLoading}
+              className="w-full px-4 py-2 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-lime-500 dark:focus:border-lime-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+            />
+          </div>
+
+          {/* Error de validación */}
+          {validationError && (
+            <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+              <p className="text-sm text-red-700 dark:text-red-400 flex items-start gap-2">
+                <svg className="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <span>{validationError}</span>
+              </p>
+            </div>
+          )}
+
+          {/* Vista previa */}
+          {isValid && (
+            <div className="p-3 bg-lime-50 dark:bg-lime-900/20 border border-lime-200 dark:border-lime-800 rounded-lg">
+              <p className="text-sm text-lime-700 dark:text-lime-400 flex items-center gap-2">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                <span>
+                  Nueva fecha límite: <span className="font-semibold">{formatDateSpanish(parseDateLocal(newDeadline))}</span>
+                </span>
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-3 mt-6">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="flex-1 px-4 py-2 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition disabled:opacity-50"
+          >
+            Cancelar
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={!isValid || isLoading}
+            className="flex-1 px-4 py-2 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+          >
+            {isLoading ? (
+              <>
+                <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <span>Actualizando...</span>
+              </>
+            ) : (
+              'Actualizar Fecha'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/features/projects/hooks/useProjectActions.js b/apps/web/src/features/projects/hooks/useProjectActions.js
new file mode 100644
index 00000000..4fe9764d
--- /dev/null
+++ b/apps/web/src/features/projects/hooks/useProjectActions.js
@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { startProject, rollbackProject, updateProjectDeadline } from '../projectsService';
+import { Alerts } from '@/shared/alerts';
+import { getDisplayMessage } from '@/utils/errorHandler';
+
+/**
+ * Hook para acciones del proyecto: start, rollback, updateDeadline
+ */
+export default function useProjectActions(projectUuid) {
+  const [isStarting, setIsStarting] = useState(false);
+  const [isRollingBack, setIsRollingBack] = useState(false);
+  const [isUpdatingDeadline, setIsUpdatingDeadline] = useState(false);
+
+  /**
+   * Inicia el proyecto
+   */
+  const handleStart = async () => {
+    setIsStarting(true);
+    try {
+      await startProject(projectUuid);
+      Alerts.success('Proyecto iniciado exitosamente');
+      return true;
+    } catch (err) {
+      console.error('Error starting project:', err);
+      const errorMessage = getDisplayMessage(err);
+      Alerts.error(errorMessage);
+      return false;
+    } finally {
+      setIsStarting(false);
+    }
+  };
+
+  /**
+   * Hace rollback del proyecto
+   */
+  const handleRollback = async () => {
+    setIsRollingBack(true);
+    try {
+      await rollbackProject(projectUuid);
+      Alerts.success('Proyecto revertido exitosamente');
+      return true;
+    } catch (err) {
+      console.error('Error rolling back project:', err);
+      const errorMessage = getDisplayMessage(err);
+      
+      // Diferenciar error 403 de "no eres el creador" vs "no tienes rol"
+      if (err.statusCode === 403) {
+        if (errorMessage.toLowerCase().includes('creator') || 
+            errorMessage.toLowerCase().includes('creador')) {
+          Alerts.error('Solo el profesor que aprobó este proyecto puede revertirlo');
+        } else {
+          Alerts.error(errorMessage);
+        }
+      } else {
+        Alerts.error(errorMessage);
+      }
+      
+      return false;
+    } finally {
+      setIsRollingBack(false);
+    }
+  };
+
+  /**
+   * Actualiza el deadline del proyecto
+   */
+  const handleUpdateDeadline = async (newDeadline) => {
+    setIsUpdatingDeadline(true);
+    try {
+      await updateProjectDeadline(projectUuid, newDeadline);
+      Alerts.success('Fecha límite actualizada exitosamente');
+      return true;
+    } catch (err) {
+      console.error('Error updating deadline:', err);
+      const errorMessage = getDisplayMessage(err);
+      Alerts.error(errorMessage);
+      return false;
+    } finally {
+      setIsUpdatingDeadline(false);
+    }
+  };
+
+  return {
+    isStarting,
+    isRollingBack,
+    isUpdatingDeadline,
+    handleStart,
+    handleRollback,
+    handleUpdateDeadline
+  };
+}
\ No newline at end of file
diff --git a/apps/web/src/features/projects/hooks/useProjectDetails.js b/apps/web/src/features/projects/hooks/useProjectDetails.js
index 8bfc656d..adb26875 100644
--- a/apps/web/src/features/projects/hooks/useProjectDetails.js
+++ b/apps/web/src/features/projects/hooks/useProjectDetails.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { getProjectDetails } from "../projectsService";
 import { Alerts } from "@/shared/alerts";
 import { getDisplayMessage, AuthenticationError } from "@/utils/errorHandler";
@@ -6,48 +6,48 @@ import { getDisplayMessage, AuthenticationError } from "@/utils/errorHandler";
 /**
  * Hook para obtener los detalles de un proyecto específico
  * @param {string} uuid - UUID del proyecto
- * @returns {Object} { project, isLoading, error }
+ * @returns {Object} { project, isLoading, error, refetch }
  */
 export default function useProjectDetails(uuid) {
   const [project, setProject] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
 
-  useEffect(() => {
+  const fetchProjectDetails = useCallback(async () => {
     if (!uuid) {
       setError("UUID del proyecto no proporcionado");
       setIsLoading(false);
       return;
     }
 
-    const fetchProjectDetails = async () => {
-      setIsLoading(true);
-      setError(null);
-
-      try {
-        const data = await getProjectDetails(uuid);
-        setProject(data);
-      } catch (err) {
-        console.error("Error fetching project details:", err);
-
-        if (err instanceof AuthenticationError) {
-          Alerts.error("Sesión expirada. Redirigiendo al login...");
-          setTimeout(() => {
-            window.location.href = "/login";
-          }, 1500);
-          return;
-        }
-
-        const errorMessage = getDisplayMessage(err);
-        setError(errorMessage);
-        Alerts.error(errorMessage);
-      } finally {
-        setIsLoading(false);
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const data = await getProjectDetails(uuid);
+      setProject(data);
+    } catch (err) {
+      console.error("Error fetching project details:", err);
+
+      if (err instanceof AuthenticationError) {
+        Alerts.error("Sesión expirada. Redirigiendo al login...");
+        setTimeout(() => {
+          window.location.href = "/login";
+        }, 1500);
+        return;
       }
-    };
 
-    fetchProjectDetails();
+      const errorMessage = getDisplayMessage(err);
+      setError(errorMessage);
+      Alerts.error(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
   }, [uuid]);
 
-  return { project, isLoading, error };
+  useEffect(() => {
+    fetchProjectDetails();
+  }, [fetchProjectDetails]);
+
+  return { project, isLoading, error, refetch: fetchProjectDetails };
 }
\ No newline at end of file
diff --git a/apps/web/src/features/projects/hooks/useProjectValidation.js b/apps/web/src/features/projects/hooks/useProjectValidation.js
new file mode 100644
index 00000000..43b48ad5
--- /dev/null
+++ b/apps/web/src/features/projects/hooks/useProjectValidation.js
@@ -0,0 +1,116 @@
+import { useMemo } from 'react';
+import { parseDateLocal } from '@/utils/dateUtils';
+
+/**
+ * Hook para validar si un proyecto puede ser iniciado
+ * Verifica:
+ * 1. Equipo completo según restricciones del tipo de proyecto
+ * 2. Deadline dentro del rango válido
+ */
+export default function useProjectValidation(project, constraints = {}, teamMembers = null) {
+  
+  const validation = useMemo(() => {
+    if (!project) {
+      return {
+        canStart: false,
+        teamValid: false,
+        deadlineValid: false,
+        errors: [],
+        missingRoles: []
+      };
+    }
+
+    const errors = [];
+    const missingRoles = [];
+    const projectType = project.projectTypes?.[0];
+    // Usar teamMembers pasados o los del proyecto
+    const members = teamMembers || project.teamMembers || [];
+    const createdAt = project.createdAt;
+    const deadline = project.estimatedDate;
+
+    // VALIDACIÓN DE EQUIPO 
+    let teamValid = false;
+    
+    // Si tenemos restricciones, validamos contra ellas
+    if (Object.keys(constraints).length > 0) {
+      // Contar miembros por rol
+      const roleCounts = {};
+      members.forEach(member => {
+        const roleName = member.roleName || member.role; // Soporta ambos formatos
+        roleCounts[roleName] = (roleCounts[roleName] || 0) + 1;
+      });
+
+      let allConstraintsMet = true;
+
+      // Verificar cada restricción
+      for (const [roleName, constraint] of Object.entries(constraints)) {
+        const count = roleCounts[roleName] || 0;
+        const min = constraint.min;
+        const max = constraint.max;
+
+        // Verificar mínimo
+        if (min > 0 && count < min) {
+          allConstraintsMet = false;
+          const needed = min - count;
+          missingRoles.push({
+            role: roleName,
+            current: count,
+            min: min,
+            max: max === Infinity ? '∞' : max,
+            needed: needed,
+            message: `Faltan ${needed} ${roleName}(s) (mínimo: ${min})`
+          });
+        }
+
+        // Verificar máximo
+        if (max !== Infinity && count > max) {
+          allConstraintsMet = false;
+          errors.push(`Demasiados ${roleName}s (máximo: ${max}, actual: ${count})`);
+        }
+      }
+
+      teamValid = allConstraintsMet;
+      
+      if (!teamValid && missingRoles.length > 0) {
+        errors.push('El equipo no cumple con las restricciones del tipo de proyecto');
+      }
+    } else {
+      // Si no hay restricciones, solo verificamos que haya al menos un miembro
+      teamValid = members.length > 0;
+      if (!teamValid) {
+        errors.push('El equipo debe tener al menos un miembro');
+      }
+    }
+
+    // VALIDACIÓN DE DEADLINE
+    let deadlineValid = false;
+    if (createdAt && deadline && projectType) {
+      const createdDate = parseDateLocal(createdAt.split('T')[0]);
+      const deadlineDate = parseDateLocal(deadline.split('T')[0]);
+      
+      const monthsDiff = (deadlineDate.getFullYear() - createdDate.getFullYear()) * 12 
+                        + (deadlineDate.getMonth() - createdDate.getMonth());
+      
+      const minMonths = projectType.minEstimatedMonths || 0;
+      const maxMonths = projectType.maxEstimatedMonths || Infinity;
+      
+      deadlineValid = monthsDiff >= minMonths && monthsDiff <= maxMonths;
+      
+      if (!deadlineValid) {
+        errors.push(`La fecha límite debe estar entre ${minMonths} y ${maxMonths} meses desde la creación`);
+      }
+    }
+
+    const canStart = teamValid && deadlineValid;
+
+    return {
+      canStart,
+      teamValid,
+      deadlineValid,
+      errors,
+      missingRoles
+    };
+  }, [project, constraints, teamMembers]);
+
+  return validation;
+}
\ No newline at end of file
diff --git a/apps/web/src/features/projects/pages/ApplicationDetails.jsx b/apps/web/src/features/projects/pages/ApplicationDetails.jsx
index 4b744cd3..5ed05e4a 100644
--- a/apps/web/src/features/projects/pages/ApplicationDetails.jsx
+++ b/apps/web/src/features/projects/pages/ApplicationDetails.jsx
@@ -4,6 +4,7 @@ import ProjectImage from '../components/ProjectImage';
 import ProjectSummary from '../components/ProjectSummary';
 import ProjectInfoCard from '../components/ProjectInfoCard';
 import AttachmentCard from '../components/AttachmentCard';
+import ProjectStatusBadge from '../components/ProjectStatusBadge';
 import EditApplicationModal from '../components/EditApplicationModal';
 import useApplicationDetails from '../hooks/useApplicationDetails';
 import { downloadAllAttachments, approveApplication } from '../projectsService';
@@ -28,10 +29,10 @@ export default function ApplicationDetails() {
     Alerts.success("Cambios guardados exitosamente");
   };
 
-  const handleApproveSuccess = (projectUuid) => {
+  const handleApproveSuccess = () => {
     Alerts.success('¡Proyecto aprobado exitosamente!');
     setTimeout(() => {
-      navigate(`/my-projects/${projectUuid}`);
+      navigate(`/my-projects/`);
     }, 1500);
   };
 
@@ -123,7 +124,7 @@ export default function ApplicationDetails() {
         Alerts.success('¡Proyecto aprobado exitosamente!');
         
         setTimeout(() => {
-          navigate(`/my-projects/${projectUuid}`);
+          navigate(`/my-projects/`);
         }, 1500);
         
       } catch (error) {
@@ -222,6 +223,7 @@ export default function ApplicationDetails() {
     createdAt,
     dueDate,
     attachments = [],
+    projectUuid,
   } = application;
 
   const authorFirstName = author?.firstName || 'No especificado';
@@ -314,16 +316,38 @@ export default function ApplicationDetails() {
   
   return (
     <section className="w-full px-10 py-12">
-      {/* Botón de regreso */}
-      <button
-        onClick={() => navigate(-1)}
-        className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition"
-      >
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-        </svg>
-        Volver
-      </button>
+      {/* Header con estado y redirección */}
+      <div className="flex items-center justify-between mb-6">
+        <button
+          onClick={() => navigate(-1)}
+          className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-lime-600 dark:hover:text-lime-400 transition"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          <span className="font-semibold">Volver</span>
+        </button>
+
+        <div className="flex items-center gap-3">
+          {/* Badge de estado */}
+          {application?.status && (
+            <ProjectStatusBadge status={application.status} size="lg" />
+          )}
+
+          {/* Botón para ver proyecto aprobado */}
+          {application?.projectUuid && (
+            <button
+              onClick={() => navigate(`/my-projects/`)}
+              className="px-4 py-2 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition font-semibold flex items-center gap-2"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+              </svg>
+              Ver Proyecto Aprobado
+            </button>
+          )}
+        </div>
+      </div>
 
       <h1 className="text-4xl font-bold">
         Detalles del <span className="text-lime-700">proyecto</span>
@@ -359,18 +383,74 @@ export default function ApplicationDetails() {
 
         {/* Columna derecha: Información y acciones */}
         <div className="w-7/12">
+          {/* Información de la Solicitud */}
+          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 mb-6">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6">
+              Información de la Solicitud
+            </h2>
+            <div className="space-y-4">
+              {/* Estado actual */}
+              {application?.status && (
+                <div>
+                  <p className="text-gray-600 dark:text-gray-400 font-semibold mb-2">Estado:</p>
+                  <ProjectStatusBadge status={application.status} size="md" />
+                </div>
+              )}
+
+              {/* Resto de campos existentes */}
+              {projectTypes?.length > 0 && (
+                <div>
+                  <p className="text-gray-600 dark:text-gray-400 font-semibold mb-2">Tipo de proyecto:</p>
+                  <p className="text-gray-800 dark:text-gray-200">
+                    {projectTypes.map(pt => pt.name).join(', ')}
+                  </p>
+                </div>
+              )}
+
+              {faculties?.length > 0 && (
+                <div>
+                  <p className="text-gray-600 dark:text-gray-400 font-semibold mb-2">Facultades:</p>
+                  <p className="text-gray-800 dark:text-gray-200">
+                    {faculties.map(f => f.name).join(', ')}
+                  </p>
+                </div>
+              )}
+
+              {problemTypes?.length > 0 && (
+                <div>
+                  <p className="text-gray-600 dark:text-gray-400 font-semibold mb-2">Tipo de problemática:</p>
+                  <p className="text-gray-800 dark:text-gray-200">
+                    {problemTypes.map(pt => pt.name).join(', ')}
+                  </p>
+                </div>
+              )}
+
+              {dueDate && (
+                <div>
+                  <p className="text-gray-600 dark:text-gray-400 font-semibold mb-2">Fecha límite:</p>
+                  <p className="text-gray-800 dark:text-gray-200">
+                    {formatDateStringSpanish(dueDate.split('T')[0])}
+                  </p>
+                </div>
+              )}
+
+              {createdAt && (
+                <div>
+                  <p className="text-gray-600 dark:text-gray-400 font-semibold mb-2">Fecha de creación:</p>
+                  <p className="text-gray-800 dark:text-gray-200">
+                    {formatDateStringSpanish(createdAt.split('T')[0])}
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+
           {/* Información del solicitante */}
           <h2 className="text-3xl font-bold mb-3">
             Información del <span className="text-lime-700">solicitante</span>
           </h2>
           <ProjectInfoCard items={applicantInfo} />
 
-          {/* Información del proyecto */}
-          <h2 className="text-3xl font-bold mb-3 mt-8">
-            Información del <span className="text-lime-700">proyecto</span>
-          </h2>
-          <ProjectInfoCard items={projectInfo} />
-
           {/* Botones de acción */}
           <div className="flex flex-col gap-3 pt-4 w-11/12">
             {/* Primera fila: Editar + Aceptar */}
@@ -392,7 +472,7 @@ export default function ApplicationDetails() {
                 {isAlreadyApproved ? 'Ya aprobado' : 'Editar proyecto'}
               </button>
 
-              {/* Botón Aceptar Proyecto (directo, sin editar) */}
+              {/* Botón Aceptar Proyecto */}
               <button 
                 onClick={handleApprove}
                 disabled={isApproving || isAlreadyApproved}
@@ -463,7 +543,7 @@ export default function ApplicationDetails() {
 
             {/* Mensaje informativo si ya está aprobado */}
             {isAlreadyApproved && (
-              <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-700 flex items-start gap-2">
+              <div className="p-3 bg-lime-50 border border-lime-200 rounded-lg text-sm text-lime-700 flex items-start gap-2">
                 <svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                 </svg>
@@ -491,4 +571,4 @@ export default function ApplicationDetails() {
       />
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/features/projects/pages/MyApplicationDetails.jsx b/apps/web/src/features/projects/pages/MyApplicationDetails.jsx
index f1cd2a5e..89590064 100644
--- a/apps/web/src/features/projects/pages/MyApplicationDetails.jsx
+++ b/apps/web/src/features/projects/pages/MyApplicationDetails.jsx
@@ -126,7 +126,7 @@ export default function MyApplicationDetails() {
   const statusConfig = {
     pending: {
       label: 'Pendiente de revisión',
-      color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+      color: 'bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-300 dark:border-yellow-700',
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
           <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
@@ -135,7 +135,7 @@ export default function MyApplicationDetails() {
     },
     approved: {
       label: 'Aprobada',
-      color: 'bg-green-100 text-green-800 border-green-200',
+      color: 'bg-lime-100 text-lime-800 border-lime-200 dark:bg-lime-900/20 dark:text-lime-300 dark:border-lime-700',
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
           <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
@@ -144,7 +144,7 @@ export default function MyApplicationDetails() {
     },
     rejected: {
       label: 'Rechazada',
-      color: 'bg-red-100 text-red-800 border-red-200',
+      color: 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-700',
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
           <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
@@ -153,7 +153,9 @@ export default function MyApplicationDetails() {
     }
   };
 
-  const currentStatus = statusConfig[status] || statusConfig.pending;
+  // Obtener el slug del estado correctamente
+  const statusSlug = typeof status === 'object' && status !== null ? status.slug : status;
+  const currentStatus = statusConfig[statusSlug] || statusConfig.pending;
 
   // Información del proyecto
   const projectInfo = [
@@ -190,13 +192,13 @@ export default function MyApplicationDetails() {
   ];
 
   // Manejar contacto con soporte
-  const handleContact = () => {
-    if (outsider?.email) {
-      window.location.href = `mailto:${outsider.email}?subject=Consulta sobre solicitud: ${title}`;
-    } else {
-      alert('No hay correo de contacto disponible');
-    }
-  };
+  // const handleContact = () => {
+  //   if (outsider?.email) {
+  //     window.location.href = `mailto:${outsider.email}?subject=Consulta sobre solicitud: ${title}`;
+  //   } else {
+  //     alert('No hay correo de contacto disponible');
+  //   }
+  // };
   
   return (
     <section className="w-full px-10 py-12">
@@ -263,22 +265,22 @@ export default function MyApplicationDetails() {
           <ProjectInfoCard items={projectInfo} />
 
           {/* Si fue aprobada, mostrar info del proyecto creado */}
-          {status === 'approved' && project && (
-            <div className="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
+          {statusSlug === 'approved' && project && (
+            <div className="mt-6 p-4 bg-lime-50 border border-lime-200 rounded-lg dark:bg-lime-900/20 dark:border-lime-700">
               <div className="flex items-start gap-3">
-                <svg className="w-6 h-6 text-green-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                <svg className="w-6 h-6 text-lime-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                 </svg>
                 <div className="flex-1">
-                  <h3 className="font-semibold text-green-800 mb-2">
+                  <h3 className="font-semibold text-lime-800 dark:text-lime-300 mb-2">
                     ¡Tu solicitud fue aprobada!
                   </h3>
-                  <p className="text-sm text-green-700 mb-3">
+                  <p className="text-sm text-lime-700 dark:text-lime-400 mb-3">
                     Esta solicitud se convirtió en un proyecto activo el {formatDateStringSpanish(project.createdAt.split('T')[0])}
                   </p>
                   <button
                     onClick={() => navigate(`/project/${project.uuid_project}`)}
-                    className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition text-sm font-semibold"
+                    className="bg-lime-600 text-white px-4 py-2 rounded-lg hover:bg-lime-700 transition text-sm font-semibold"
                   >
                     Ver proyecto activo
                   </button>
@@ -322,7 +324,7 @@ export default function MyApplicationDetails() {
             )}
             
             {/* Botón Ponerse en Contacto (solo si está pendiente o rechazada) */}
-            {status !== 'approved' && (
+            {/* {statusSlug !== 'approved' && (
               <button 
                 onClick={handleContact}
                 disabled={!outsider?.email}
@@ -330,10 +332,10 @@ export default function MyApplicationDetails() {
               >
                 Contactar soporte
               </button>
-            )}
+            )} */}
 
             {/* Nota informativa según estado */}
-            {status === 'pending' && (
+            {statusSlug === 'pending' && (
               <div className="p-3 bg-yellow-100 border border-yellow-200 rounded-lg text-sm text-yellow-700 flex items-start gap-2">
                 <svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
@@ -347,7 +349,7 @@ export default function MyApplicationDetails() {
               </div>
             )}
 
-            {status === 'rejected' && (
+            {statusSlug === 'rejected' && (
               <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700 flex items-start gap-2">
                 <svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
diff --git a/apps/web/src/features/projects/pages/MyApplications.jsx b/apps/web/src/features/projects/pages/MyApplications.jsx
index f1102fcc..3f0bb937 100644
--- a/apps/web/src/features/projects/pages/MyApplications.jsx
+++ b/apps/web/src/features/projects/pages/MyApplications.jsx
@@ -117,6 +117,7 @@ export default function MyApplications() {
                 image={app.bannerUrl}
                 title={app.title}
                 description={app.shortDescription}
+                status={app.status}
                 onDetailsClick={() => handleApplicationClick(app.uuid_application)}
               />
             ))}
diff --git a/apps/web/src/features/projects/pages/ProjectDetails.jsx b/apps/web/src/features/projects/pages/ProjectDetails.jsx
index f542cdd3..df6b1940 100644
--- a/apps/web/src/features/projects/pages/ProjectDetails.jsx
+++ b/apps/web/src/features/projects/pages/ProjectDetails.jsx
@@ -5,16 +5,44 @@ import ProjectSummary from '../components/ProjectSummary';
 import ProjectInfoCard from '../components/ProjectInfoCard';
 import AttachmentCard from '../components/AttachmentCard';
 import useProjectDetails from '../hooks/useProjectDetails';
+import useProjectActions from '@/features/projects/hooks/useProjectActions';
+import useProjectValidation from '@/features/projects/hooks/useProjectValidation';
+import useTeamMetadata from '@/features/teams/hooks/useTeamMetadata';
+import ProjectStatusBadge from '../components/ProjectStatusBadge';
+import StartProjectModal from '../components/StartProjectModal';
+import RollbackProjectModal from '../components/RollbackProjectModal';
+import UpdateDeadlineModal from '../components/UpdateDeadlineModal';
 import { downloadAllAttachments } from '../projectsService';
 import { formatDateStringSpanish } from '@/utils/dateUtils';
 
 export default function ProjectDetails() {
   const { uuid } = useParams();
   const navigate = useNavigate();
-  const { project, isLoading, error } = useProjectDetails(uuid);
+  const { project, isLoading, error, refetch } = useProjectDetails(uuid);
+  const { constraints } = useTeamMetadata(uuid);
+  const validation = useProjectValidation(project, constraints);
+  const {
+    isStarting,
+    isRollingBack,
+    isUpdatingDeadline,
+    handleStart,
+    handleRollback,
+    handleUpdateDeadline
+  } = useProjectActions(uuid);
+
+  const [showStartModal, setShowStartModal] = useState(false);
+  const [showRollbackModal, setShowRollbackModal] = useState(false);
+  const [showUpdateDeadlineModal, setShowUpdateDeadlineModal] = useState(false);
   const [isDownloadingAll, setIsDownloadingAll] = useState(false);
   const [downloadError, setDownloadError] = useState(null);
 
+  // Permisos
+  const isCreator = true;
+  const canStart = project?.status?.slug === 'project_approved' && isCreator;
+  const isProjectStarted = project?.status?.slug === 'project_in_progress' || project?.status?.slug === 'completed';
+  const canRollback = isCreator && (project?.status?.slug === 'project_in_progress' || project?.status?.slug === 'completed');
+  const canUpdateDeadline = isCreator && !isRollingBack && !isStarting;
+
   // Descargar todos los archivos adjuntos
   const handleDownloadAll = async () => {
     if (!project?.attachments || project.attachments.length === 0) {
@@ -24,10 +52,10 @@ export default function ProjectDetails() {
 
     setIsDownloadingAll(true);
     setDownloadError(null);
-    
+
     try {
       const result = await downloadAllAttachments(project.attachments);
-      
+
       if (result.failed > 0) {
         const errorMessage = `Se descargaron ${result.successful} de ${project.attachments.length} archivos.\n\nErrores:\n${result.errors.join('\n')}`;
         setDownloadError(errorMessage);
@@ -41,12 +69,46 @@ export default function ProjectDetails() {
     }
   };
 
+  // Handler para iniciar proyecto
+  const confirmStart = async () => {
+    const success = await handleStart();
+    if (success) {
+      setShowStartModal(false);
+      // Esperar refetch para asegurar que la UI se actualiza
+      await refetch();
+      // Forzar actualización adicional después de un pequeño delay
+      setTimeout(() => {
+        refetch();
+      }, 500);
+    }
+  };
+
+  // Handler para rollback
+  const confirmRollback = async () => {
+    const success = await handleRollback();
+    if (success) {
+      setShowRollbackModal(false);
+      navigate('/my-applications');
+    }
+  };
+
+  // Handler para actualizar deadline
+  const confirmUpdateDeadline = async (newDeadline) => {
+    const success = await handleUpdateDeadline(newDeadline);
+    if (success) {
+      setShowUpdateDeadlineModal(false);
+      await refetch();
+      setTimeout(() => {
+        refetch();
+      }, 500);
+    }
+  };
+
   // Loading state
   if (isLoading) {
     return (
       <section className="w-full px-10 py-12">
         <div className="h-10 w-64 bg-gray-200 rounded animate-pulse mb-10"></div>
-        
         <div className='flex h-screen mt-10'>
           <div className="w-6/12">
             <div className="w-full h-96 bg-gray-200 rounded-xl animate-pulse mb-6"></div>
@@ -59,7 +121,6 @@ export default function ProjectDetails() {
               </div>
             </div>
           </div>
-
           <div className="w-7/12 ml-6">
             <div className="h-8 w-80 bg-gray-200 rounded animate-pulse mb-3"></div>
             <div className="bg-white rounded-xl shadow-md p-6 mb-6">
@@ -88,7 +149,6 @@ export default function ProjectDetails() {
           </svg>
           Volver a mis proyectos
         </button>
-
         <div className="bg-red-50 border border-red-200 rounded-lg p-8 text-center">
           <svg className="w-16 h-16 text-red-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -117,10 +177,8 @@ export default function ProjectDetails() {
     projectTypes = [],
     problemTypes = [],
     status,
-    statusDescription,
     createdAt,
     estimatedDate,
-    estimatedEffortHours,
     teamMembers = [],
     attachments = [],
   } = project;
@@ -131,98 +189,38 @@ export default function ProjectDetails() {
   const authorFullName = `${authorFirstName} ${authorLastName}`.trim();
   const authorEmail = author?.email || null;
 
-  // Datos específicos de outsider (pueden ser null)
-  const outsiderData = author?.outsider || null;
-  const organizationName = outsiderData?.organizationName || 'N/A';
-  const phoneNumber = outsiderData?.phoneNumber || 'N/A';
-  const location = outsiderData?.location || 'N/A';
-
-  // Determinar si el autor es outsider o profesor
-  const isOutsider = !!outsiderData;
-  const authorRole = isOutsider ? 'Outsider' : 'Profesor';
-
   // Información del autor
   const authorInfo = [
-    { 
-      label: 'Nombre', 
-      value: author?.fullName || 'No especificado' 
-    },
-    { 
-      label: 'Correo', 
-      value: author?.email || 'No especificado' 
-    },
-    { 
-      label: 'Matrícula', 
-      value: author?.universityId || 'No especificada' 
-    },
-    { 
-      label: 'Tipo de usuario', 
-      value: author?.roleName === 'professor' ? 'Profesor' :
-             author?.roleName === 'student' ? 'Estudiante' :
-             author?.roleName === 'outsider' ? 'Externo' :
-             author?.roleName || 'No especificado'
+    { label: 'Nombre', value: author?.fullName || 'No especificado' },
+    { label: 'Correo', value: author?.email || 'No especificado' },
+    { label: 'Matrícula', value: author?.universityId || 'No especificada' },
+    { label: 'Tipo de usuario', value: author?.roleName === 'professor' ? 'Profesor' :
+      author?.roleName === 'student' ? 'Estudiante' :
+      author?.roleName === 'outsider' ? 'Externo' :
+      author?.roleName || 'No especificado'
     },
     ...(author?.outsider ? [
-      { 
-        label: 'Organización', 
-        value: author.outsider.organizationName 
-      },
-      { 
-        label: 'Teléfono', 
-        value: author.outsider.phoneNumber 
-      },
-      { 
-        label: 'Ubicación', 
-        value: author.outsider.location 
-      },
+      { label: 'Organización', value: author.outsider.organizationName },
+      { label: 'Teléfono', value: author.outsider.phoneNumber },
+      { label: 'Ubicación', value: author.outsider.location },
     ] : [
-      { 
-        label: 'Información', 
-        value: author?.roleName === 'professor' 
-          ? 'Proyecto creado por un profesor' 
-          : author?.roleName === 'student'
-          ? 'Proyecto creado por un estudiante'
-          : 'Proyecto creado por un usuario externo'
+      { label: 'Información', value: author?.roleName === 'professor'
+        ? 'Proyecto creado por un profesor'
+        : author?.roleName === 'student'
+        ? 'Proyecto creado por un estudiante'
+        : 'Proyecto creado por un usuario externo'
       }
     ])
   ];
 
   // Información del proyecto
   const projectInfo = [
-    { 
-      label: 'Tipo de proyecto', 
-      value: projectTypes.length > 0 
-        ? projectTypes.map(pt => pt.name).join(', ')
-        : 'No especificado' 
-    },
-    { 
-      label: 'Facultades', 
-      value: faculties.length > 0 
-        ? faculties.map(f => f.name).join(', ')
-        : 'No especificada' 
-    },
-    { 
-      label: 'Tipo de problemática', 
-      value: problemTypes.length > 0 
-        ? problemTypes.map(pt => pt.name).join(', ')
-        : 'No especificado' 
-    },
-    { 
-      label: 'Fecha límite', 
-      value: estimatedDate 
-        ? formatDateStringSpanish(estimatedDate.split('T')[0])
-        : 'No especificada'
-    },
-    { 
-      label: 'Fecha de creación', 
-      value: createdAt 
-        ? formatDateStringSpanish(createdAt.split('T')[0])
-        : 'No especificada'
-    },
-    { 
-      label: 'Estado', 
-      value: status || 'Aprobado'
-    },
+    { label: 'Tipo de proyecto', value: projectTypes.length > 0 ? projectTypes.map(pt => pt.name).join(', ') : 'No especificado' },
+    { label: 'Facultades', value: faculties.length > 0 ? faculties.map(f => f.name).join(', ') : 'No especificada' },
+    { label: 'Tipo de problemática', value: problemTypes.length > 0 ? problemTypes.map(pt => pt.name).join(', ') : 'No especificado' },
+    { label: 'Fecha límite', value: estimatedDate ? formatDateStringSpanish(estimatedDate.split('T')[0]) : 'No especificada' },
+    { label: 'Fecha de creación', value: createdAt ? formatDateStringSpanish(createdAt.split('T')[0]) : 'No especificada' },
+    { label: 'Estado', value: status?.name || 'Aprobado' },
   ];
 
   // Información del equipo
@@ -232,26 +230,33 @@ export default function ProjectDetails() {
   }));
 
   // Manejar contacto con el autor
-  const handleContact = () => {
-    if (authorEmail) {
-      window.location.href = `mailto:${authorEmail}?subject=Consulta sobre proyecto: ${title}`;
-    } else {
-      alert('No hay correo de contacto disponible para este proyecto');
-    }
-  };
+  // const handleContact = () => {
+  //   if (authorEmail) {
+  //     window.location.href = `mailto:${authorEmail}?subject=Consulta sobre proyecto: ${title}`;
+  //   } else {
+  //     alert('No hay correo de contacto disponible para este proyecto');
+  //   }
+  // };
 
   return (
     <section className="w-full px-10 py-12">
-      {/* Botón de regreso */}
-      <button
-        onClick={() => navigate('/my-projects')}
-        className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition"
-      >
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-        </svg>
-        Volver a mis proyectos
-      </button>
+      {/* Header con badge de estado */}
+      <div className="flex items-center justify-between mb-6">
+        <button
+          onClick={() => navigate('/my-projects')}
+          className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          Volver a mis proyectos
+        </button>
+        <div className="flex items-center gap-3 mr-15">
+          {status && (
+            <ProjectStatusBadge status={status} size="lg" />
+          )}
+        </div>
+      </div>
 
       <h1 className="text-4xl font-bold mb-6">
         Detalles del <span className="text-lime-700">proyecto</span>
@@ -260,30 +265,49 @@ export default function ProjectDetails() {
       <div className='flex mt-10 gap-6'>
         {/* Columna izquierda: Imagen, descripción y archivos adjuntos */}
         <div className="w-5/12">
-          {/* Banner */}
-          <ProjectImage 
-            src={bannerUrl} 
-            alt={title} 
-          />
-          
-          {/* Resumen del proyecto */}
-          <ProjectSummary
-            title={title}
-            description={description || shortDescription}
-          />
-
-          {/* Archivos adjuntos */}
+          <ProjectImage src={bannerUrl} alt={title} />
+          <ProjectSummary title={title} description={description || shortDescription} />
           {attachments.length > 0 && (
             <div className="mt-6">
               <h2 className="text-3xl font-bold mb-3">
                 Documentos <span className="text-lime-700">adjuntos</span>
               </h2>
-              
               <div className="space-y-3 mr-10">
                 {attachments.map((file, index) => (
                   <AttachmentCard key={index} file={file} />
                 ))}
               </div>
+              {/* Botón Descargar Todos los Archivos */}
+            <button 
+              onClick={handleDownloadAll}
+              disabled={isDownloadingAll || attachments.length === 0}
+              className="px-4 py-2 bg-lime-700 text-white rounded-lg hover:bg-gray-700 font-semibold transition disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center gap-2 mt-4 w-11/12 mr-10"
+              title={attachments.length === 0 ? 'No hay archivos para descargar' : 'Descargar todos los documentos'}
+            >
+              {isDownloadingAll ? (
+                <>
+                  <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Descargando...
+                </>
+              ) : (
+                <>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                  </svg>
+                  Descargar todos
+                </>
+              )}
+            </button>
+
+            {/* Mensaje de error si ocurrió */}
+            {downloadError && (
+              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
+                {downloadError}
+              </div>
+            )}
             </div>
           )}
         </div>
@@ -303,74 +327,162 @@ export default function ProjectDetails() {
           <ProjectInfoCard items={projectInfo} />
 
           {/* Sección de Equipo (si hay miembros) */}
-          {project.teamMembers && project.teamMembers.length > 0 && (
+          {/* {teamMembers && teamMembers.length > 0 && (
             <>
               <h2 className="text-3xl font-bold mb-3 mt-8">
                 Equipo del <span className="text-lime-700">proyecto</span>
               </h2>
               <ProjectInfoCard items={teamInfo} />
             </>
-          )}
+          )} */}
 
           {/* Botones de acción */}
           <div className="flex flex-col gap-3 pt-6 w-11/12">
-            {/* Botón Descargar Todos los Archivos */}
-            <button 
-              onClick={handleDownloadAll}
-              disabled={isDownloadingAll || attachments.length === 0}
-              className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 font-semibold transition disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-              title={attachments.length === 0 ? 'No hay archivos para descargar' : 'Descargar todos los documentos'}
+
+            {/* Botón Ver Equipo */}
+            <button
+              onClick={() => navigate(`/my-projects/${uuid}/team`)}
+              className="px-6 py-3 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition font-semibold flex items-center justify-center gap-2"
+              title="Ver y gestionar el equipo del proyecto"
             >
-              {isDownloadingAll ? (
-                <>
-                  <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                  </svg>
-                  Descargando...
-                </>
-              ) : (
-                <>
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                  </svg>
-                  Descargar todos ({attachments.length})
-                </>
-              )}
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+              Ver Equipo
             </button>
 
-            {/* Mensaje de error si ocurrió */}
-            {downloadError && (
-              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
-                {downloadError}
-              </div>
+            {/* Botón Iniciar Proyecto */}
+            {project?.status?.slug === 'project_approved' && (
+              <button
+                onClick={() => {
+                  if (isCreator && validation.canStart && !isStarting) {
+                    setShowStartModal(true);
+                  }
+                }}
+                disabled={!isCreator || !validation.canStart || isStarting}
+                className="px-6 py-3 bg-lime-700 text-white rounded-lg hover:bg-lime-800 transition font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 justify-center"
+                title={
+                  !isCreator
+                    ? 'Solo el creador puede iniciar el proyecto'
+                    : !validation.canStart
+                    ? 'El equipo no cumple los requisitos'
+                    : isStarting
+                    ? 'Iniciando...'
+                    : 'Iniciar Proyecto'
+                }
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                {isStarting ? 'Iniciando...' : 'Iniciar Proyecto'}
+              </button>
             )}
-            
+
+            {/* Botón Rollback */}
+            {canRollback && (
+              <button
+                onClick={() => setShowRollbackModal(true)}
+                disabled={isRollingBack}
+                className="px-6 py-3 bg-gray-700 text-white rounded-lg hover:bg-gray-800 transition font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                {isRollingBack ? 'Revirtiendo...' : 'Revertir Proyecto'}
+              </button>
+            )}
+
+            {/* Botón Actualizar Fecha Límite */}
+            {canUpdateDeadline && (
+              <button
+                onClick={() => setShowUpdateDeadlineModal(true)}
+                disabled={isUpdatingDeadline}
+                className="px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              >
+                <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 21q-1.875 0-3.512-.712t-2.85-1.925t-1.925-2.85T3 12t.713-3.512t1.924-2.85t2.85-1.925T12 3q2.05 0 3.888.875T19 6.35V4h2v6h-6V8h2.75q-1.025-1.4-2.525-2.2T12 5Q9.075 5 7.038 7.038T5 12t2.038 4.963T12 19q2.625 0 4.588-1.7T18.9 13h2.05q-.375 3.425-2.937 5.713T12 21m2.8-4.8L11 12.4V7h2v4.6l3.2 3.2z"/></svg>
+                {isUpdatingDeadline ? 'Actualizando...' : 'Actualizar Fecha Límite'}
+              </button>
+            )}
+
             {/* Botón Ponerse en Contacto */}
-            <button 
+            {/* <button 
               onClick={handleContact}
               disabled={!authorEmail}
               className="px-4 py-2 border-2 border-lime-600 text-lime-700 font-semibold rounded-lg hover:bg-lime-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
               title={!authorEmail ? 'No hay correo de contacto disponible' : `Contactar a ${authorFullName}`}
             >
               Ponerse en contacto
-            </button>
+            </button> */}
 
-            {/* Información adicional sobre el proyecto */}
-            <div className="p-3 bg-lime-50 border border-lime-200 rounded-lg text-sm text-lime-700 flex items-start gap-2">
-              <svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
-              </svg>
-              <div>
-                <p className="font-semibold mb-1">Proyecto aprobado</p>
-                <p className="text-xs">
-                  Este proyecto fue aprobado el {formatDateStringSpanish(createdAt.split('T')[0])}. Puedes gestionar su progreso desde esta página.
-                </p>
+            {/* Mensaje informativo si el proyecto está iniciado */}
+            {isProjectStarted && (
+              <div className="bg-lime-50 dark:bg-lime-900/20 border-2 border-lime-300 dark:border-lime-700 rounded-lg p-4 mt-4">
+                <div className="flex items-start gap-3">
+                  <svg className="w-6 h-6 text-lime-600 dark:text-lime-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <div>
+                    <p className="text-sm font-semibold text-lime-800 dark:text-lime-300 mb-1">
+                      Proyecto en progreso
+                    </p>
+                    <p className="text-sm text-lime-700 dark:text-lime-400">
+                      El equipo ya no puede ser modificado porque el proyecto ha sido iniciado.
+                    </p>
+                  </div>
+                </div>
               </div>
-            </div>
+            )}
+
+            {/* Advertencia si el equipo no está completo */}
+            {canStart && !validation.canStart && (
+              <div className="bg-lime-50 dark:bg-lime-900/20 border-2 border-lime-300 dark:border-lime-700 rounded-lg p-4 mt-4">
+                <div className="flex items-start gap-3">
+                  <svg className="w-6 h-6 text-lime-600 dark:text-lime-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                  <div>
+                    <p className="text-sm font-semibold text-lime-800 dark:text-lime-300 mb-1">
+                      Equipo incompleto
+                    </p>
+                    <p className="text-sm text-lime-700 dark:text-lime-400 mb-2">
+                      Complete el equipo según las restricciones para poder iniciar el proyecto:
+                    </p>
+                    <ul className="text-sm text-lime-700 dark:text-lime-400 list-disc list-inside space-y-1">
+                      {validation.errors.map((error, idx) => (
+                        <li key={idx}>{error}</li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>
+
+      {/* Modales */}
+      <StartProjectModal
+        isOpen={showStartModal}
+        onClose={() => setShowStartModal(false)}
+        project={project}
+        onConfirm={confirmStart}
+        isLoading={isStarting}
+      />
+      <RollbackProjectModal
+        isOpen={showRollbackModal}
+        onClose={() => setShowRollbackModal(false)}
+        project={project}
+        onConfirm={confirmRollback}
+        isLoading={isRollingBack}
+      />
+      <UpdateDeadlineModal
+        isOpen={showUpdateDeadlineModal}
+        onClose={() => setShowUpdateDeadlineModal(false)}
+        project={project}
+        onConfirm={confirmUpdateDeadline}
+        isLoading={isUpdatingDeadline}
+      />
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/features/projects/pages/RequestProject.jsx b/apps/web/src/features/projects/pages/RequestProject.jsx
index bd3a369d..0b30ad93 100644
--- a/apps/web/src/features/projects/pages/RequestProject.jsx
+++ b/apps/web/src/features/projects/pages/RequestProject.jsx
@@ -69,7 +69,7 @@ const RequestProject = () => {
 
         {/* Panel de ayuda con recomendaciones */}
         {showHelp && (
-          <div className="max-w-4xl w-full bg-lime-100 border border-lime-300 text-sm text-lime-800 p-4 rounded mb-8">
+          <div className="max-w-4xl w-full bg-lime-50 border border-lime-200 text-sm text-lime-800 p-4 rounded mb-8">
             <p className="mb-2 font-semibold">Recomendaciones para llenar el formulario:</p>
             <ul className="list-disc pl-5 space-y-1">
               <li><strong>Título del proyecto:</strong> Sé claro y conciso. Usa un título que describa en pocas palabras el propósito del proyecto.</li>
diff --git a/apps/web/src/features/projects/projectsService.js b/apps/web/src/features/projects/projectsService.js
index 9b85fe99..0d24bc97 100644
--- a/apps/web/src/features/projects/projectsService.js
+++ b/apps/web/src/features/projects/projectsService.js
@@ -30,15 +30,12 @@ export async function getExploreApplicationsMetadata() {
  * Explora aplicaciones con filtros opcionales
  */
 export async function exploreApplications(facultyName = null, page = 1, limit = 9) {
-  // Construir URL base
   let url = `${API_URL}/application/explore`;
   
-  // Si hay facultad, agregarla al path
   if (facultyName) {
     url += `/${facultyName}`;
   }
   
-  // Agregar query params de paginación
   url += `?page=${page}&perPage=${limit}`;
 
   const response = await fetchWithAuthAndAutoRefresh(url, {
@@ -125,6 +122,7 @@ export async function getProfileStatus() {
 
 /**
  * Obtiene los detalles de una aplicación específica
+ * Incluye status como objeto y project UUID si está aprobada
  */
 export async function getApplicationDetails(uuid) {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -149,7 +147,11 @@ export async function getApplicationDetails(uuid) {
     dueDate: app.details?.deadline,
     createdAt: app.details?.createdAt,
     
-    status: app.status || 'pending',
+    // Status como objeto { name, slug }
+    status: app.details?.status || { name: 'Pendiente', slug: 'in_review' },
+    
+    // UUID del proyecto si está aprobada
+    projectUuid: app.details?.project || null,
     
     // Banner con verificación de URL absoluta
     bannerUrl: app.bannerUrl?.startsWith('http') 
@@ -179,7 +181,7 @@ export async function getApplicationDetails(uuid) {
       } : null,
     },
 
-    // Metadata (arrays de objetos con id y name)
+    // Metadata
     faculties: app.details?.faculties || [],  
     projectTypes: app.details?.projectTypes || [],
     problemTypes: app.details?.problemTypes || [],
@@ -189,7 +191,7 @@ export async function getApplicationDetails(uuid) {
     projectTypeIds: (app.details?.projectTypes || []).map(pt => pt.id),
     problemTypeIds: (app.details?.problemTypes || []).map(pt => pt.id),
     
-    // Outsider (legacy, para compatibilidad)
+    // Outsider ( por si acaso legacy, para compatibilidad)
     outsider: {
       firstName: app.author?.fullName?.split(' ')[0] || 'No especificado',
       lastName: app.author?.fullName?.split(' ').slice(1).join(' ') || '',
@@ -199,9 +201,9 @@ export async function getApplicationDetails(uuid) {
       location: app.author?.outsider?.location || 'No especificado',
     },
     
-    // Facultad (legacy, para compatibilidad)
+    // Facultad (por si acaso legacy, para compatibilidad)
     faculty: app.details?.faculties?.length > 0 
-      ? { 
+      ? {
           name: app.details.faculties[0].name, 
           abbreviation: app.details.faculties[0].name 
         }
@@ -226,7 +228,6 @@ export async function downloadFile(downloadUrl, fileName, mimeType, forceDownloa
 
     const blob = await response.blob();
 
-    // Si es PDF y NO se fuerza la descarga, abrir en nueva pestaña
     if (mimeType === 'application/pdf' && !forceDownload) {
       const objectUrl = URL.createObjectURL(blob);
       const newWindow = window.open(objectUrl, '_blank');
@@ -239,7 +240,6 @@ export async function downloadFile(downloadUrl, fileName, mimeType, forceDownloa
       return;
     }
 
-    // Para otros archivos o descarga forzada, descargar con nombre original
     const link = document.createElement('a');
     const objectUrl = URL.createObjectURL(blob);
     
@@ -272,7 +272,6 @@ export async function downloadAllAttachments(attachments) {
   let failed = 0;
   const errors = [];
 
-  // Descargar archivos secuencialmente con delay
   for (let i = 0; i < attachments.length; i++) {
     const file = attachments[i];
     
@@ -280,7 +279,6 @@ export async function downloadAllAttachments(attachments) {
       await downloadFile(file.downloadUrl, file.name, file.type, true);
       successful++;
       
-      // Delay entre descargas para evitar bloqueo del navegador
       if (i < attachments.length - 1) {
         await new Promise(resolve => setTimeout(resolve, 800));
       }
@@ -334,6 +332,7 @@ export async function approveApplication(uuid_application, projectData = {}) {
 
 /**
  * Obtiene todas las applications del usuario autenticado
+ * Incluye status como objeto
  */
 export async function getMyApplications(page = 1, limit = 9) {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -349,6 +348,8 @@ export async function getMyApplications(page = 1, limit = 9) {
 
   const applications = records.map((app) => ({
     ...app,
+    // Asegura que status sea objeto
+    status: app.status || { name: 'Pendiente', slug: 'in_review' },
     bannerUrl: app.bannerUrl?.startsWith('http') 
       ? app.bannerUrl 
       : app.bannerUrl ? `${API_URL}${app.bannerUrl}` : null,
@@ -361,7 +362,8 @@ export async function getMyApplications(page = 1, limit = 9) {
 }
 
 /**
- * Obtiene todos los proyectos aprobados del usuario autenticado
+ * Obtiene todos los proyectos del usuario autenticado
+ * Incluye status como objeto
  */
 export async function getMyProjects(page = 1, limit = 9) {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -377,6 +379,8 @@ export async function getMyProjects(page = 1, limit = 9) {
 
   const projects = records.map((proj) => ({
     ...proj,
+    // Asegura que status sea objeto
+    status: proj.status || { name: 'Aprobado', slug: 'approved' },
     bannerUrl: proj.bannerUrl?.startsWith('http') 
       ? proj.bannerUrl 
       : proj.bannerUrl ? `${API_URL}${proj.bannerUrl}` : null,
@@ -390,6 +394,7 @@ export async function getMyProjects(page = 1, limit = 9) {
 
 /**
  * Obtiene los detalles completos de un proyecto específico
+ * Incluye uuidCreator, approvedAt, status completo, projectTypes expandidos
  */
 export async function getProjectDetails(uuid) {
   const response = await fetchWithAuthAndAutoRefresh(
@@ -444,8 +449,18 @@ export async function getProjectDetails(uuid) {
       } : null,
     },
     
-    // Metadata del proyecto
-    projectTypes: details.projectTypes || [],
+    // Metadata expandida del proyecto
+    projectTypes: (details.projectTypes || []).map(pt => ({
+      id: pt.id,
+      name: pt.name,
+      minEstimatedMonths: pt.minEstimatedMonths,
+      maxEstimatedMonths: pt.maxEstimatedMonths,
+      requiredHours: pt.requiredHours,
+      minTeamMembersSize: pt.minTeamMembersSize,
+      maxTeamMembersSize: pt.maxTeamMembersSize,
+      minTeamAdvisorsSize: pt.minTeamAdvisorsSize,
+      maxTeamAdvisorsSize: pt.maxTeamAdvisorsSize,
+    })),
     faculties: details.faculties || [],
     problemTypes: details.problemTypes || [],
     
@@ -458,12 +473,16 @@ export async function getProjectDetails(uuid) {
       role: member.role,
     })),
     
-    // Estado
-    status: details.status?.name || 'approved',
+    // Status como objeto completo
+    status: details.status || { name: 'Aprobado', slug: 'approved' },
     statusDescription: details.status?.description,
     
-    // Fechas
+    // UUID del creador (quien aprobó)
+    uuidCreator: details.uuidCreator,
+    
+    // Fechas expandidas
     createdAt: details.createdAt,
+    approvedAt: details.approvedAt,
     estimatedDate: details.deadline,
     estimatedEffortHours: details.estimatedEffortHours || null,
   };
@@ -542,3 +561,69 @@ export async function updateApplication(uuid, editData) {
 
   return response.data;
 }
+
+/**
+ * Inicia un proyecto (transición a In Progress)
+ * POST /project/:uuid/start
+ */
+export async function startProject(uuid_project) {
+  const csrfToken = await getCSRFToken();
+
+  const response = await fetchWithAuthAndAutoRefresh(
+    `${API_URL}/project/${uuid_project}/start`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "csrf-token": csrfToken,
+      },
+    }
+  );
+
+  return response.data;
+}
+
+/**
+ * Hace rollback de un proyecto (destructivo)
+ * POST /project/:uuid/rollback
+ */
+export async function rollbackProject(uuid_project) {
+  const csrfToken = await getCSRFToken();
+
+  const response = await fetchWithAuthAndAutoRefresh(
+    `${API_URL}/project/${uuid_project}/rollback`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "csrf-token": csrfToken,
+      },
+    }
+  );
+
+  return response.data;
+}
+
+/**
+ * Actualiza el deadline de un proyecto
+ * PATCH /project/:uuid/deadline
+ */
+export async function updateProjectDeadline(uuid_project, newDeadline) {
+  const csrfToken = await getCSRFToken();
+
+  const response = await fetchWithAuthAndAutoRefresh(
+    `${API_URL}/project/${uuid_project}/deadline`,
+    {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "csrf-token": csrfToken,
+      },
+      body: JSON.stringify({
+        deadline: newDeadline,
+      }),
+    }
+  );
+
+  return response.data;
+}
\ No newline at end of file
diff --git a/apps/web/src/features/teams/components/TeamMembersList.jsx b/apps/web/src/features/teams/components/TeamMembersList.jsx
index e1298437..259af8e5 100644
--- a/apps/web/src/features/teams/components/TeamMembersList.jsx
+++ b/apps/web/src/features/teams/components/TeamMembersList.jsx
@@ -62,8 +62,8 @@ export default function TeamMembersList({ members, roles, projectUuid, onRefresh
       html: `¿Estás seguro de eliminar a <strong>${memberName}</strong> del equipo?<br><small class="text-gray-500">Esta acción no se puede deshacer.</small>`,
       icon: 'warning',
       showCancelButton: true,
-      confirmButtonColor: '#dc2626', // red-600
-      cancelButtonColor: '#6b7280', // gray-500
+      confirmButtonColor: '#dc2626',
+      cancelButtonColor: '#6b7280',
       confirmButtonText: 'Sí, eliminar',
       cancelButtonText: 'Cancelar',
       reverseButtons: true,
@@ -79,7 +79,7 @@ export default function TeamMembersList({ members, roles, projectUuid, onRefresh
         title: '¡Eliminado!',
         text: `${memberName} fue eliminado del equipo.`,
         icon: 'success',
-        confirmButtonColor: '#84cc16', // lime-500
+        confirmButtonColor: '#84cc16',
         timer: 2000,
         timerProgressBar: true,
       });
@@ -143,96 +143,101 @@ export default function TeamMembersList({ members, roles, projectUuid, onRefresh
           return (
             <div
               key={member.uuidUser}
-              className="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm"
+              className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm"
             >
+              {/* Avatar */}
               <div className="w-12 h-12 bg-gradient-to-br from-lime-400 to-lime-600 rounded-full flex items-center justify-center text-white font-bold text-lg flex-shrink-0">
                 {avatarInitials}
               </div>
 
-              {/* Info */}
-              <div className="flex-1">
-                <p className="font-semibold text-gray-900 dark:text-gray-100">
+              {/* Info - Con truncado de texto */}
+              <div className="flex-1 min-w-0 w-full sm:w-auto">
+                <p className="font-semibold text-gray-900 dark:text-gray-100 truncate">
                   {fullName}
                 </p>
                 <div className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
-                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                   </svg>
-                  <span>{member.email}</span>
+                  <span className="truncate">{member.email}</span>
                 </div>
               </div>
 
               {/* Rol Badge o Selector */}
-              {isEditing && canEdit ? (
-                <div className="flex items-center gap-2">
-                  <select
-                    value={selectedRoleId || ""}
-                    onChange={(e) => setSelectedRoleId(Number(e.target.value))}
-                    className="px-3 py-1 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded text-sm"
-                    disabled={isUpdating}
-                  >
-                    {roles.map((role) => (
-                      <option key={role.id} value={role.id}>
-                        {role.name}
-                      </option>
-                    ))}
-                  </select>
-
-                  <button
-                    onClick={() => handleSaveEdit(member.uuidUser)}
-                    disabled={isUpdating}
-                    className="p-1.5 text-lime-600 hover:bg-lime-50 rounded transition"
-                    title="Guardar"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                    </svg>
-                  </button>
-
-                  <button
-                    onClick={handleCancelEdit}
-                    disabled={isUpdating}
-                    className="p-1.5 text-gray-600 hover:bg-gray-50 rounded transition"
-                    title="Cancelar"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                </div>
-              ) : (
-                <>
-                  <div className="flex items-center gap-1 px-3 py-1 bg-gradient-to-br from-lime-500 to-lime-700 dark:bg-lime-900 text-white dark:text-lime-300 rounded-lg text-sm font-medium shadow-lg ">
-                    {getRoleIcon(member.roleName)}
-                    <span>{member.roleName}</span>
-                  </div>
-
-                  {/* Solo mostrar botones si puede editar */}
-                  {canEdit && (
+              <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+                {isEditing && canEdit ? (
+                  <>
+                    <select
+                      value={selectedRoleId || ""}
+                      onChange={(e) => setSelectedRoleId(Number(e.target.value))}
+                      className="px-3 py-1 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded text-sm flex-1 sm:flex-initial"
+                      disabled={isUpdating}
+                    >
+                      {roles.map((role) => (
+                        <option key={role.id} value={role.id}>
+                          {role.name}
+                        </option>
+                      ))}
+                    </select>
+
                     <div className="flex items-center gap-1">
                       <button
-                        onClick={() => handleEditClick(member)}
-                        className="p-1.5 text-gray-600 hover:bg-gray-50 rounded transition cursor-pointer"
-                        title="Editar rol"
+                        onClick={() => handleSaveEdit(member.uuidUser)}
+                        disabled={isUpdating}
+                        className="p-1.5 text-lime-600 hover:bg-lime-50 rounded transition"
+                        title="Guardar"
                       >
                         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                         </svg>
                       </button>
 
                       <button
-                        onClick={() => handleDelete(member.uuidUser, fullName)}
-                        className="p-1.5 text-red-600 hover:bg-red-50 rounded transition cursor-pointer"
-                        title="Eliminar miembro"
+                        onClick={handleCancelEdit}
+                        disabled={isUpdating}
+                        className="p-1.5 text-gray-600 hover:bg-gray-50 rounded transition"
+                        title="Cancelar"
                       >
                         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                         </svg>
                       </button>
                     </div>
-                  )}
-                </>
-              )}
+                  </>
+                ) : (
+                  <>
+                    <div className="flex items-center gap-1 px-3 py-1 bg-gradient-to-br from-lime-500 to-lime-700 dark:bg-lime-900 text-white dark:text-lime-300 rounded-lg text-sm font-medium shadow-lg">
+                      {getRoleIcon(member.roleName)}
+                      <span className="whitespace-nowrap">{member.roleName}</span>
+                    </div>
+
+                    {/* Solo mostrar botones si puede editar */}
+                    {canEdit && (
+                      <div className="flex items-center gap-1">
+                        <button
+                          onClick={() => handleEditClick(member)}
+                          className="p-1.5 text-gray-600 hover:bg-gray-50 rounded transition cursor-pointer"
+                          title="Editar rol"
+                        >
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                          </svg>
+                        </button>
+
+                        <button
+                          onClick={() => handleDelete(member.uuidUser, fullName)}
+                          className="p-1.5 text-red-600 hover:bg-red-50 rounded transition cursor-pointer"
+                          title="Eliminar miembro"
+                        >
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                        </button>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
             </div>
           );
         })}
diff --git a/apps/web/src/features/teams/hooks/useTeamManagement.js b/apps/web/src/features/teams/hooks/useTeamManagement.js
index 31e45a7a..5a7c0e99 100644
--- a/apps/web/src/features/teams/hooks/useTeamManagement.js
+++ b/apps/web/src/features/teams/hooks/useTeamManagement.js
@@ -8,9 +8,10 @@ import { getDisplayMessage } from "../../../utils/errorHandler.js";
  * @param {string} projectUuid - UUID del proyecto
  * @param {Array} roles - Roles disponibles
  * @param {Object} constraints - Límites por rol
+ * @param {Array} existingMembers - Miembros actuales del equipo
  * @returns {Object} { pendingMembers, addMember, removeMember, updateMemberRole, saveTeam, ... }
  */
-export default function useTeamManagement(projectUuid, roles, constraints) {
+export default function useTeamManagement(projectUuid, roles, constraints, existingMembers = []) {
   const [pendingMembers, setPendingMembers] = useState([]);
   const [isSaving, setIsSaving] = useState(false);
 
@@ -95,23 +96,29 @@ export default function useTeamManagement(projectUuid, roles, constraints) {
       return false;
     }
 
-    // Validar límites mínimos y máximos
+    // Validar límites mínimos y máximos considerando miembros existentes + pendientes
     for (const role of roles) {
       const constraint = constraints[role.name];
       if (!constraint) continue;
 
-      const count = pendingMembers.filter((m) => m.roleId === role.id).length;
+      // Contar miembros existentes con este rol
+      const existingCount = existingMembers.filter(m => m.roleName === role.name).length || 0;
+      // Contar miembros pendientes con este rol
+      const pendingCount = pendingMembers.filter((m) => m.roleId === role.id).length;
+      // Total
+      const totalCount = existingCount + pendingCount;
 
-      if (constraint.min > 0 && count < constraint.min) {
+      if (constraint.min > 0 && totalCount < constraint.min) {
+        const needed = constraint.min - totalCount;
         Alerts.warning(
-          `Debes agregar al menos ${constraint.min} ${role.name}(s)`
+          `Necesitas ${needed} ${role.name}(s) más (tienes ${totalCount}, necesitas ${constraint.min})`
         );
         return false;
       }
 
-      if (constraint.max !== null && constraint.max !== Infinity && count > constraint.max) {
+      if (constraint.max !== null && constraint.max !== Infinity && totalCount > constraint.max) {
         Alerts.warning(
-          `No puedes tener más de ${constraint.max} ${role.name}(s)`
+          `No puedes tener más de ${constraint.max} ${role.name}(s) (tienes${totalCount})`
         );
         return false;
       }
diff --git a/apps/web/src/features/teams/pages/TeamPage.jsx b/apps/web/src/features/teams/pages/TeamPage.jsx
index c6cc9202..8b09ae37 100644
--- a/apps/web/src/features/teams/pages/TeamPage.jsx
+++ b/apps/web/src/features/teams/pages/TeamPage.jsx
@@ -1,18 +1,24 @@
-import React from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import useTeamData from "../hooks/useTeamData.js";
-import useTeamMetadata from "../hooks/useTeamMetadata.js";
-import useTeamManagement from "../hooks/useTeamManagement.js";
-import EmptyTeamState from "../components/EmptyTeamState.jsx";
-import TeamMembersList from "../components/TeamMembersList.jsx";
-import AddMemberForm from "../components/AddMemberForm.jsx";
-import SaveTeamButton from "../components/SaveTeamButton.jsx";
-import useCurrentUser from "../../auth/hooks/useCurrentUser.js";
+import React, { useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import useTeamData from '../hooks/useTeamData.js';
+import useTeamMetadata from '../hooks/useTeamMetadata.js';
+import useTeamManagement from '../hooks/useTeamManagement.js';
+import EmptyTeamState from '../components/EmptyTeamState.jsx';
+import TeamMembersList from '../components/TeamMembersList.jsx';
+import AddMemberForm from '../components/AddMemberForm.jsx';
+import SaveTeamButton from '../components/SaveTeamButton.jsx';
+import useCurrentUser from '../../auth/hooks/useCurrentUser.js';
+import useProjectDetails from '@/features/projects/hooks/useProjectDetails';
+import useProjectActions from '@/features/projects/hooks/useProjectActions';
+import useProjectValidation from '@/features/projects/hooks/useProjectValidation';
+import StartProjectModal from '@/features/projects/components/StartProjectModal';
+import ProjectStatusBadge from '@/features/projects/components/ProjectStatusBadge';
 
 export default function TeamPage() {
   const { uuid } = useParams();
   const navigate = useNavigate();
-  const { role, isLoading: isLoadingUser } = useCurrentUser();
+  
+  const { user, role, isLoading: isLoadingUser } = useCurrentUser();
 
   const { team, hasTeam, isLoading: isLoadingTeam, refreshTeam } = useTeamData(uuid);
   const { roles, constraints, isLoading: isLoadingMetadata, error: metadataError } = useTeamMetadata(uuid);
@@ -23,11 +29,32 @@ export default function TeamPage() {
     removeMember,
     updateMemberRole,
     saveTeam,
-  } = useTeamManagement(uuid, roles, constraints);
+  } = useTeamManagement(uuid, roles, constraints, team?.members || []);
 
-  // Verificar si el usuario es profesor
-  const canEdit = role?.name?.toLowerCase() === "professor";
+  // Hooks adicionales para proyecto
+  const { project, refetch: refetchProject } = useProjectDetails(uuid);
+  const validation = useProjectValidation(project, constraints, team?.members);
+  const { isStarting, handleStart } = useProjectActions(uuid);
+  const [showStartModal, setShowStartModal] = useState(false);
+
+  // Verificar permisos
+  const isCreator = user?.uuid_user === project?.uuidCreator;
+  const canStart = project?.status?.slug === 'project_approved' && isCreator;
+  const isProjectStarted = project?.status?.slug === 'project_in_progress' || project?.status?.slug === 'completed';
+
+  // Handler para iniciar proyecto
+  const confirmStart = async () => {
+    const success = await handleStart();
+    if (success) {
+      setShowStartModal(false);
+      await refetchProject();
+      await refreshTeam();
+    }
+  };
 
+  // Verificar si el usuario es profesor
+  const canEdit = role?.name?.toLowerCase() === 'professor';
+  
   const handleSaveTeam = async () => {
     const success = await saveTeam();
     if (success) {
@@ -95,15 +122,40 @@ export default function TeamPage() {
   return (
     <section className="flex flex-col items-center w-full min-h-screen px-10 pt-10 pb-20">
       <div className="w-full max-w-5xl mb-8">
-        <button
-          onClick={() => navigate(-1)}
-          className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-lime-600 dark:hover:text-lime-500 transition mb-4"
-        >
-          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          <span>Volver</span>
-        </button>
+        {/* Header con estado y botón de iniciar */}
+        <div className="flex items-center justify-between mb-6">
+          <button
+            onClick={() => navigate(-1)}
+            className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-lime-600 dark:hover:text-lime-400 transition"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            <span className="font-semibold">Volver</span>
+          </button>
+
+          <div className="flex items-center gap-3">
+            {/* Badge de estado */}
+            {project?.status && (
+              <ProjectStatusBadge status={project.status} size="md" />
+            )}
+
+            {/* Botón: Iniciar Proyecto */}
+            {canStart && (
+              <button
+                onClick={() => setShowStartModal(true)}
+                disabled={!validation.canStart || isStarting}
+                className="px-6 py-3 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                {isStarting ? 'Iniciando...' : 'Iniciar Proyecto'}
+              </button>
+            )}
+          </div>
+        </div>
 
         <h1 className="text-5xl font-bold">
           Equipo del <span className="text-lime-600">Proyecto</span>
@@ -121,6 +173,92 @@ export default function TeamPage() {
         )}
       </div>
 
+      {/* Mensaje si el proyecto está iniciado */}
+      {isProjectStarted && (
+        <div className="bg-lime-50 dark:bg-lime-900/20 border-2 border-lime-300 dark:border-lime-700 rounded-lg p-4 mb-6 w-full max-w-5xl">
+          <div className="flex items-start gap-3">
+            <svg className="w-6 h-6 text-lime-600 dark:text-lime-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <div>
+              <p className="text-sm font-semibold text-lime-800 dark:text-lime-300 mb-1">
+                Proyecto en progreso
+              </p>
+              <p className="text-sm text-lime-700 dark:text-lime-400">
+                El equipo ya no puede ser modificado porque el proyecto ha sido iniciado.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Advertencia si el equipo no está completo */}
+      {canStart && !validation.canStart && (
+        <div className="bg-lime-50 dark:bg-lime-900/20 border-2 border-lime-300 dark:border-lime-700 rounded-lg p-4 mb-6">
+          <div className="flex items-start gap-3">
+            <svg className="w-6 h-6 text-lime-600 dark:text-lime-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <div>
+              <p className="text-sm font-semibold text-lime-800 dark:text-lime-300 mb-1">
+                Equipo incompleto
+              </p>
+              <p className="text-sm text-lime-700 dark:text-lime-400 mb-2">
+                Complete el equipo según las restricciones para poder iniciar el proyecto:
+              </p>
+              <ul className="text-sm text-lime-700 dark:text-lime-400 list-disc list-inside space-y-1">
+                {validation.errors.map((error, idx) => (
+                  <li key={idx}>{error}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Requisitos del equipo - tooltip informativo */}
+      {Object.keys(constraints).length > 0 && !isProjectStarted && (
+        <div className="w-full max-w-5xl mb-6">
+          <div className="bg-lime-50 dark:bg-lime-900/20 border-2 border-lime-300 dark:border-lime-700 rounded-lg p-4">
+            <div className="flex items-start gap-3">
+              <svg className="w-6 h-6 text-lime-600 dark:text-lime-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <div className="flex-1">
+                <p className="text-sm font-semibold text-lime-800 dark:text-lime-300 mb-2">
+                  Requisitos del equipo para este tipo de proyecto:
+                </p>
+                <ul className="text-sm text-lime-700 dark:text-lime-400 space-y-1">
+                  {Object.entries(constraints).map(([roleName, constraint]) => {
+                    const currentCount = team?.members?.filter(m => m.roleName === roleName).length || 0;
+                    const isMet = currentCount >= constraint.min;
+                    
+                    return (
+                      <li key={roleName} className="flex items-center gap-2">
+                        <svg className={`w-4 h-4 ${isMet ? 'text-lime-600 dark:text-lime-400' : 'text-red-400 dark:text-red-400'}`} fill="currentColor" viewBox="0 0 20 20">
+                          {isMet ? (
+                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                          ) : (
+                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                          )}
+                        </svg>
+                        <span>
+                          <strong>{roleName}</strong>: mínimo {constraint.min}
+                          {constraint.max !== Infinity && `, máximo ${constraint.max}`}
+                          <span className={`ml-2 font-semibold ${isMet ? 'text-lime-600 dark:text-lime-400' : 'text-red-400 dark:text-red-400'}`}>
+                            ({currentCount})
+                          </span>
+                        </span>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className="w-full max-w-5xl">
         {!hasTeam && pendingMembers.length === 0 ? (
           canEdit ? (
@@ -154,20 +292,31 @@ export default function TeamPage() {
 
             {canEdit && (
               <>
-                <AddMemberForm
-                  roles={roles}
-                  constraints={constraints}
-                  pendingMembers={pendingMembers}
-                  onAddMember={addMember}
-                  onRemoveMember={removeMember}
-                  onUpdateMemberRole={updateMemberRole}
-                />
+                {/* En AddMemberForm, deshabilitar todo el formulario */}
+                {!isProjectStarted && (
+                  <AddMemberForm
+                    roles={roles}
+                    constraints={constraints}
+                    pendingMembers={pendingMembers}
+                    onAddMember={addMember}
+                    onRemoveMember={removeMember}
+                    onUpdateMemberRole={updateMemberRole}
+                  />
+                )}
+
+                {/* Mensaje si se intenta editar después de iniciado */}
+                {isProjectStarted && (
+                  <div className="text-center text-gray-600 dark:text-gray-400 py-8">
+                    <p className="font-semibold mb-2">No se puede modificar el equipo</p>
+                    <p className="text-sm">El proyecto ha sido iniciado y el equipo está bloqueado.</p>
+                  </div>
+                )}
 
                 {pendingMembers.length > 0 && (
                   <SaveTeamButton
                     onClick={handleSaveTeam}
+                    disabled={isSaving || isProjectStarted}
                     isLoading={isSaving}
-                    disabled={isSaving}
                   />
                 )}
               </>
@@ -175,6 +324,15 @@ export default function TeamPage() {
           </div>
         )}
       </div>
+
+      {/* Modal de iniciar proyecto */}
+      <StartProjectModal
+        isOpen={showStartModal}
+        onClose={() => setShowStartModal(false)}
+        project={project}
+        onConfirm={confirmStart}
+        isLoading={isStarting}
+      />
     </section>
   );
 }
\ No newline at end of file
diff --git a/apps/web/src/utils/statusUtils.js b/apps/web/src/utils/statusUtils.js
new file mode 100644
index 00000000..0b2d30da
--- /dev/null
+++ b/apps/web/src/utils/statusUtils.js
@@ -0,0 +1,71 @@
+/**
+ * Mapeo de slugs a nombres legibles en español
+ */
+export const STATUS_NAMES = {
+  // Estados de aplicaciones
+  pending: "Pendiente",
+  approved: "Aprobado",
+  rejected: "Rechazado",
+  // Estados de proyectos
+  in_review: "En Revisión",
+  project_approved: "Aprobado",
+  project_in_progress: "En Progreso",
+  completed: "Completado"
+}
+
+/**
+ * Configuración de colores para badges
+ */
+export const STATUS_CONFIG = {
+  // Estados de aplicaciones
+  pending: {
+    bg: "bg-yellow-100 dark:bg-yellow-900/20",
+    text: "text-yellow-800 dark:text-yellow-300",
+    border: "border-yellow-300 dark:border-yellow-700"
+  },
+  approved: {
+    bg: "bg-lime-100 dark:bg-lime-900/20",
+    text: "text-lime-800 dark:text-lime-300",
+    border: "border-lime-300 dark:border-lime-700"
+  },
+  rejected: {
+    bg: "bg-red-100 dark:bg-red-900/20",
+    text: "text-red-800 dark:text-red-300",
+    border: "border-red-300 dark:border-red-700"
+  },
+  // Estados de proyectos
+  in_review: {
+    bg: "bg-yellow-100 dark:bg-yellow-900/20",
+    text: "text-yellow-800 dark:text-yellow-300",
+    border: "border-yellow-300 dark:border-yellow-700"
+  },
+  project_approved: {
+    bg: "bg-lime-100 dark:bg-lime-900/20",
+    text: "text-lime-800 dark:text-lime-300",
+    border: "border-lime-300 dark:border-lime-700"
+  },
+  project_in_progress: {
+    bg: "bg-lime-700 dark:bg-lime-900/20",
+    text: "text-white dark:text-lime-300",
+    border: "border-lime-700 dark:border-lime-700"
+  },
+  completed: {
+    bg: "bg-purple-100 dark:bg-purple-900/20",
+    text: "text-purple-800 dark:text-purple-300",
+    border: "border-purple-300 dark:border-purple-700"
+  }
+}
+
+/**
+ * Obtiene el nombre legible del estado
+ */
+export function getStatusName(slug) {
+  return STATUS_NAMES[slug] || slug
+}
+
+/**
+ * Obtiene la configuración visual del estado
+ */
+export function getStatusConfig(slug) {
+  return STATUS_CONFIG[slug] || STATUS_CONFIG.in_review
+}
\ No newline at end of file
diff --git a/estructura.txt b/estructura.txt
deleted file mode 100644
index a1a0f982..00000000
--- a/estructura.txt
+++ /dev/null
@@ -1,49 +0,0 @@
-.
-├── apps
-│   ├── api
-│   │   ├── node_modules
-│   │   └── src
-│   ├── mobile
-│   └── web
-│       ├── dist
-│       │   └── assets
-│       ├── node_modules
-│       ├── public
-│       └── src
-│           └── assets
-├── config
-├── docs
-├── libs
-│   ├── api
-│   ├── hooks
-│   ├── models
-│   ├── utils
-│   └── validators
-├── node_modules
-└── scripts
-
-Lo que nos falta para la estructure de capas seria separarla en carpetas que representen cada capa:
-
-apps/api/
-├── application/
-│   └── services/        # Business coordination (not logic)
-├── domain/
-│   ├── entities/        # Core logic, entities, value objects
-│   └── repositories/    # Interfaces (abstract)
-├── infrastructure/
-│   ├── persistence/     # DB code, external services
-│   └── repositories/    # Implement domain interfaces
-├── presentation/
-│   └── routes/          # HTTP handlers/controllers
-├── index.js
-
-
-O separarlos por paquetes manejados por PNPM como:
-packages/
-├── domain/
-├── application/
-├── infrastructure/
-├── shared/             # For utils, shared types, etc.
-apps/
-├── api/
-├── web/