From d2567d35b610b63e6dabcbfeb0ebeb8538bab98c Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Mon, 14 Oct 2024 13:28:44 -0600
Subject: [PATCH] recuperar reporte por id, o enviando variables individuales +
 Primera parte de tabla de usuarios

---
 cosiap_api/dynamic_tables/views.py            |  48 +-
 cosiap_frontend/src/App.css                   | 809 ++++++++++++++++++
 cosiap_frontend/src/App.jsx                   |   3 +-
 cosiap_frontend/src/api.js                    |   2 +-
 .../src/components/admin/TablaUsuarios.jsx    |  31 +-
 .../common/utility/RenderElementEdit.jsx      |   2 +-
 .../common/utility/RenderElementView.jsx      |   2 +-
 .../common/utility/RenderElemento.jsx         |   2 +-
 .../common/utility/ReusableTable.css          |  32 -
 .../common/utility/ReusableTable.jsx          |   2 +-
 .../components/modalidades/CrearModalidad.css | 266 ------
 .../components/modalidades/CrearModalidad.jsx |   2 +-
 .../modalidades/EditarModalidad.jsx           |   2 +-
 .../modalidades/ListaModalidades.jsx          |   2 +-
 .../src/components/modalidades/Modalidad.css  | 412 ---------
 .../src/components/modalidades/Modalidad.jsx  |   2 +-
 .../solicitudes/EditarSolicitud.jsx           |   2 +-
 .../solicitudes/HistorialSolicitudes.css      |  44 -
 .../solicitudes/HistorialSolicitudes.jsx      |   2 +-
 .../components/solicitudes/VerSolicitud.jsx   |   2 +-
 20 files changed, 897 insertions(+), 772 deletions(-)
 delete mode 100644 cosiap_frontend/src/components/common/utility/ReusableTable.css
 delete mode 100644 cosiap_frontend/src/components/modalidades/CrearModalidad.css
 delete mode 100644 cosiap_frontend/src/components/modalidades/Modalidad.css
 delete mode 100644 cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.css

diff --git a/cosiap_api/dynamic_tables/views.py b/cosiap_api/dynamic_tables/views.py
index 8d5640b..b5d74cd 100644
--- a/cosiap_api/dynamic_tables/views.py
+++ b/cosiap_api/dynamic_tables/views.py
@@ -58,11 +58,41 @@ class DynamicTableAPIView(BasePermissionAPIView):
         return instance
 
     def get_configuracion_reporte(self, request):
+        '''
+        Creamos la configuración enviando los parámetros desde query params
+        '''
+        self.model_name = request.query_params.get('model_name', None)
+        self.columns = request.query_params.get('columns', [])
+        self.filters = self.parse_json_param(request.query_params.get('filters', '{}'))
+        self.exclude_columns = request.query_params.get('exclude_columns', [])
+        self.exclude_filters = self.parse_json_param(request.query_params.get('exclude_filters', '{}'))
+        self.search_query = request.query_params.get('search_query', '')
+
+        reporte = DynamicTableReport.objects.create(
+            model_name=self.model_name,
+            columns=self.columns,
+            filters=self.filters,
+            exclude_columns=self.exclude_columns,
+            exclude_filters=self.exclude_filters,
+            search_query=self.search_query
+        )
+
+        return reporte
+
+    def parse_json_param(self, param):
+        '''Convierte un string JSON a un diccionario, si es posible.'''
+        try:
+            import json
+            return json.loads(param)
+        except (ValueError, TypeError):
+            return {}
+    
+
+    def get_configuracion_reporte_id(self, request, reporte_id=None):
         '''
         Crear una configuración con los datos actuales de la request, sobrescribiendo los predeterminados si se proporcionan.
         '''
         try:
-            reporte_id = request.query_params.get('reporte_id', None)
             if reporte_id:
                 reporte_data = DynamicTableReport.objects.get(id=reporte_id)
                 self.model_name = reporte_data.model_name
@@ -123,7 +153,13 @@ class DynamicTableAPIView(BasePermissionAPIView):
                 return Response(response_data, status = status.HTTP_400_BAD_REQUEST)
         try:
             if user.is_staff:
-                configuracion_reporte = self.get_configuracion_reporte(request)
+                reporte_id = request.query_params.get('reporte_id', None)
+                if reporte_id:
+                    configuracion_reporte = self.get_configuracion_reporte_id(request, reporte_id)
+                elif any(key in request.query_params for key in ['columns', 'filters', 'exclude_columns', 'exclude_filters', 'search_query']):
+                    configuracion_reporte = self.get_configuracion_reporte(request)
+                else:
+                    configuracion_reporte = self.get_configuracion_reporte_id(request)
                 if self.dynamic_form_exist:
                     serializer = DynamicTableDynamicForm(instance=configuracion_reporte, model_class=self.model_class)
                 else:
@@ -165,7 +201,13 @@ class DynamicTableAPIView(BasePermissionAPIView):
         register_updates = request.data.get('register_updates', {})
 
         # Extraer la configuración, o si no fue enviada asignamos la predeterminada
-        configuracion = self.get_configuracion_reporte(request)
+        reporte_id = request.query_params.get('reporte_id', None)
+        if reporte_id:
+            configuracion = self.get_configuracion_reporte_id(request, reporte_id)
+        elif any(key in request.query_params for key in ['columns', 'filters', 'exclude_columns', 'exclude_filters', 'search_query']):
+            configuracion = self.get_configuracion_reporte(request)
+        else:
+            configuracion = self.get_configuracion_reporte_id(request)
         if self.dynamic_form_exist:
             serializer = DynamicTableDynamicForm(instance=configuracion,model_class=self.model_class)
         else:
diff --git a/cosiap_frontend/src/App.css b/cosiap_frontend/src/App.css
index 5f67fab..695f37c 100644
--- a/cosiap_frontend/src/App.css
+++ b/cosiap_frontend/src/App.css
@@ -1,3 +1,812 @@
 body {
   background: var(--pagina-fondo);
+}
+
+/* Estilo para los estados */
+.estado-label {
+  padding: 5px 10px;
+  border-radius: 8px;
+  color: white;
+  font-weight: bold;
+  display: inline-block;
+  text-align: center;
+  min-width: 100px;
+}
+
+.estado-aprobado {
+  background-color: rgb(126, 233, 126);
+}
+
+.estado-rechazado {
+  background-color: rgb(223, 91, 91);
+}
+
+.estado-pendiente {
+  background-color: rgb(109, 163, 216);
+  color: black; 
+}
+
+
+.button-ver{
+  background-color: grey;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  margin-right: 10px;
+  border: none;
+  cursor: pointer;
+}
+
+.button-editar{
+  background-color: brown;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  margin-right: 10px;
+  border: none;
+  cursor: pointer;
+}
+
+/* Estilos para el card blanco */
+.white-card {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+/* Estilos para las filas del formulario */
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+
+.form-group {
+  flex: 1;
+  margin-right: 15px;
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.form-group input[type="file"] {
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+/* Estilos para secciones */
+.section {
+  background-color: #f9f9f9;
+  padding: 15px;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+
+/* Estilos para elementos */
+.element {
+  background-color: #f2f2f2;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+
+/* Estilos para opciones */
+.option {
+  background-color: #e9e9e9;
+  padding: 8px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+}
+
+/* Botones */
+.add-button {
+  background-color: #696d69;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  font-size: 14px;
+  border-radius: 16px;
+  cursor: pointer;
+  margin-top: 10px;
+  margin-right: 10px;
+}
+
+.add-button:hover {
+  background-color: #45a049;
+}
+
+.delete-button {
+  background-color: #f44336; 
+  color: white; 
+  border: none; 
+  padding: 8px 12px; 
+  font-size: 14px; 
+  border-radius: 16px; 
+  cursor: pointer; 
+  margin-top: 10px; 
+  margin-right: 10px; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+}
+
+.delete-button i {
+  font-size: 16px; /* Ajusta el tamaño del ícono */
+}
+
+.delete-button:hover {
+  background-color: #e53935;
+}
+
+/* Botón de envío */
+.submit-button {
+  background-color: #4fb659;
+  color: white;
+  padding: 10px 20px;
+  font-size: 14px;
+  border: none;
+  border-radius: 16px;
+  cursor: pointer;
+  font-style: oblique;
+  margin-top: 20px;
+}
+
+.submit-button:hover {
+  background-color: #19d2b0;
+}
+
+/* Checkbox más pequeño */
+input[type="checkbox"] {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+
+.subtitle-text {
+  font-size: 20px;
+  color: #c65f5f;
+}
+
+.subtitle-text-1 {
+  font-size: 18px;
+  color: #752323;
+}
+
+.subtitle-text-2 {
+  font-size: 16px;
+  color: #9e5f5f;
+}
+
+/* Ajustar márgenes y tamaño del texto en etiquetas */
+.form-group label {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.button-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding: 0 20px; 
+}
+
+.preview-image {
+  width: 100px;
+  height: 100px; 
+  object-fit: cover; 
+  border: 1px solid #ccc;
+  margin-top: 10px; 
+}
+
+.card {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin: 15px 0;
+  padding: 10px;
+  background-color: #f5f5f5;
+}
+
+.element-card {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin: 15px 0;
+  padding: 10px;
+  background-color: #adacac;
+}
+
+.element-card-header{
+  font-weight: bold;
+}
+
+.element-card-body{
+  padding: 10px;
+}
+
+.card-header {
+  font-weight: bold;
+}
+
+.card-body {
+  padding: 10px;
+}
+
+.option-card {
+  margin-left: 20px;
+  border: 1px solid #bbb;
+  padding: 5px;
+  border-radius: 5px;
+  background-color: #e9e9e9;
+}
+
+.form-row {
+  display: flex;
+  align-items: center; /* Alinea los elementos al centro verticalmente */
+  gap: 10px; /* Espacio entre los elementos */
+  height: auto; /* Asegúrate de que la altura del contenedor sea flexible */
+}
+
+.form-row label {
+  flex-shrink: 0; /* Evita que el label se encoja */
+}
+
+.form-row input {
+  flex: 1; /* Hace que el input ocupe el espacio disponible */
+}
+
+.element-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* Para que el input esté a la izquierda y los botones a la derecha */
+  gap: 10px; /* Espacio entre el input y los botones */
+  width: 100%; /* Asegura que ocupe todo el ancho disponible */
+}
+
+.element-input {
+width: 100%;
+padding: 8px;
+border: 1px solid #ccc;
+border-radius: 4px;
+font-size: 16px;
+}
+
+.element-buttons {
+  display: flex;
+  gap: 5px; /* Espacio entre los botones */
+}
+
+.form-row input,
+.form-row button,
+.form-row label {
+  line-height: normal; /* Asegura que todos los elementos tengan una línea de texto coherente */
+  padding: 8px; /* Ajusta el padding para que sea igual en todos los elementos */
+  height: auto; /* Permite que los elementos ajusten su altura automáticamente */
+  font-size: 15px; /* Asegura que todos tengan el mismo tamaño de fuente */
+  font-style:normal;
+}
+
+.form-row input {
+  flex: 1; /* Hace que el input crezca según el espacio disponible */
+}
+
+/* Estilos generales para inputs */
+.input-class,
+.textarea-class,
+.select-class,
+.date-input-class,
+.time-input-class,
+.file-input-class {
+  width: 100%;
+  padding: 10px;
+  color: rgb(0, 0, 0);
+  margin: 10px 0;
+  font-size: 16px;
+  border: 2px solid #555; /* Aumentamos el grosor y un color más oscuro */
+  border-radius: 4px;
+  box-sizing: border-box;
+  transition: border-color 0.3s ease;
+}
+
+/* Efecto de enfoque (focus) para resaltarlos cuando el usuario interactúe */
+.input-class:focus,
+.textarea-class:focus,
+.select-class:focus,
+.date-input-class:focus,
+.time-input-class:focus,
+.file-input-class:focus {
+  border-color: #4CAF50; /* Cambia el color del borde al interactuar */
+  outline: none; /* Elimina el borde por defecto del navegador */
+  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Efecto sutil de sombra verde */
+}
+
+/* Estilos para el textarea */
+.textarea-class {
+  height: 150px;
+  resize: vertical;
+}
+
+/* Estilos para los select */
+.select-class {
+  height: 40px;
+  background-color: white;
+}
+
+/* Grupo de casillas: Mantener una distribución compacta */
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px; /* Espacio entre las casillas */
+}
+
+/* Etiquetas de las casillas */
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+  font-size: 16px; /* Tamaño de texto estándar */
+}
+
+/* Estilo personalizado para el checkbox */
+.checkbox-label input[type="checkbox"] {
+  width: 20px; /* Tamaño del checkbox */
+  height: 20px; /* Tamaño del checkbox */
+  margin-right: 5px; /* Espacio entre la casilla y el texto */
+  cursor: pointer;
+  border: 2px solid #333; /* Borde visible */
+  border-radius: 4px; /* Esquinas redondeadas */
+  appearance: none; /* Eliminar el estilo por defecto del navegador */
+  position: relative;
+}
+
+/* Estilo cuando está seleccionado */
+.checkbox-label input[type="checkbox"]:checked {
+  background-color: #333; /* Fondo oscuro cuando está seleccionado */
+}
+
+/* Agregar un pseudo-elemento para el 'checkmark' */
+.checkbox-label input[type="checkbox"]:checked::after {
+  color: white;
+  font-size: 14px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+
+/* Estilos para el input de archivo */
+.file-input-class {
+  cursor: pointer;
+}
+
+/* Estilos para la fecha y hora */
+.date-input-class,
+.time-input-class {
+  max-width: 200px;
+}
+
+/* Estilo para el separador */
+.separator-class {
+  border: 0;
+  height: 1px;
+  background: #e0e0e0;
+  margin: 20px 0;
+}
+
+
+/* Contenedor principal */
+.container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 45px;
+    margin-top: 20px;
+  }
+  
+  /* Sección de la imagen y título */
+  .image-container {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    border-radius: 45px 45px 0 0;
+    overflow: hidden;
+  }
+  
+  .image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .image-overlay {
+    position: absolute;
+    inset: 0;
+    background-color: rgba(128, 128, 128, 0.6);
+    border-radius: 45px 45px 0 0;
+  }
+  
+  .image-text-container {
+    position: absolute;
+    top: 10%;
+    width: 100%;
+    text-align: center;
+    color: var(--blanco);
+  }
+  
+  .image-text-container h3 {
+    font-size: 2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+  
+  .image-text-container h4 {
+    font-size: 2.5rem;
+    margin-top: 20px;
+  }
+  
+  .image-text-container p {
+    font-size: 1.2rem;
+    margin-top: 20px;
+  }
+  
+  /* Estilos de las cards de las secciones */
+  .section-card {
+    background-color: var(--blanco);
+    width: 90%;
+    margin: 20px 0;
+    padding: 20px;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  .section-card h3 {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: brown;
+    text-align: center;
+  }
+  
+  /* Contenedor de los elementos, para agruparlos en filas */
+  .elementos-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: space-between;
+  }
+  
+  /* Cada elemento tiene su propia card */
+  .element-card {
+    background-color: var(--gris-claro);
+    border-radius: 10px;
+    padding: 15px;
+    width: 30%; /* Toma 30% del ancho para 3 elementos por fila */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  
+  /* Estilos para los inputs dentro de las element-cards */
+  .element-card input,
+  .element-card textarea,
+  .element-card select {
+    width: 100%;
+    padding: 10px;
+    font-size: 1rem;
+    margin-top: 5px;
+    border: 1px solid var(--gris);
+    border-radius: 5px;
+  }
+  
+  /* Input específico para archivo */
+  .file-input-class {
+    background-color: var(--blanco);
+    cursor: pointer;
+  }
+  
+  /* Estilo de la card del monto solicitado */
+  .monto-card {
+    background-color: var(--blanco);
+    width: 90%;
+    margin: 30px 0;
+    padding: 30px;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  .monto-card h3 {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: brown;
+    text-align: center;
+  }
+  
+  .monto-card .input-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
+  
+/* Botones de acción */
+.buttons-container {
+  display: flex;
+  justify-content: space-between; /* Un botón a la izquierda, otro a la derecha */
+  width: 100%; /* El contenedor ocupa todo el ancho disponible */
+  margin-top: 20px;
+  padding: 0 40px; /* Espacio a los lados del contenedor, ajusta según lo necesites */
+  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
+}
+
+.button, .submit-button {
+  background-color: var(--secundario);
+  color: var(--blanco);
+  font-weight: bold;
+  font-style: normal;
+  padding: 10px 20px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.submit-button {
+  background-color: #4CAF50;
+}
+
+
+  
+  
+  .button:hover {
+    background-color: var(--secundario-f);
+  }
+  
+  .alert {
+    position: fixed;
+    top: 20px; /* Distancia desde la parte superior */
+    left: 50%;
+    transform: translateX(-50%); /* Centrar horizontalmente */
+    padding: 15px;
+    color: white;
+    width: calc(100% - 40px); /* Ajustar el ancho */
+    max-width: 600px; /* Ancho máximo */
+    text-align: center;
+    z-index: 1000; 
+    border-radius: 5px;
+    transition: opacity 0.5s ease; /* Transición suave */
+}
+
+.success {
+    background-color: #19a81e; /* Verde para éxito */
+}
+
+.error {
+    background-color: #f44336; /* Rojo para error */
+}
+
+
+.download-button {
+  display: inline-block;
+  padding: 10px 20px;
+  margin-top: 10px;
+  background-color: #955e3d; /* Color de fondo */
+  color: white; /* Color del texto */
+  text-align: center;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: bold;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.download-button:hover {
+  background-color: #45a049; /* Color de fondo al pasar el mouse */
+}
+
+.download-button:active {
+  background-color: #3e8e41; /* Color de fondo al hacer clic */
+}
+
+.download-button:focus {
+  outline: none; /* Elimina el borde de enfoque */
+}
+
+.view-document-button {
+  display: inline-block;
+  padding: 10px 20px;
+  margin-top: 10px;
+  background-color: #4f6ebc; /* Color de fondo */
+  color: white; /* Color del texto */
+  text-align: center;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: bold;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.info-container {
+  border: 1px solid #e0e0e0; /* Borde suave */
+  border-radius: 8px; /* Bordes redondeados */
+  padding: 15px; /* Relleno interior */
+  background-color: #f9f9f9; /* Fondo claro */
+  margin-bottom: 20px; /* Separación con otros elementos */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
+  text-align: center;
+}
+
+.info-container p {
+  margin: 8px 0; /* Margen entre los párrafos */
+}
+
+.info-container strong {
+  color: #333; /* Color fuerte para los títulos */
+}
+
+/* Borde dependiendo del estado */
+.border-green {
+  border: 4px solid rgb(19, 183, 19);
+}
+
+.border-yellow {
+  border: 4px solid rgb(221, 221, 111);
+}
+
+.border-red {
+  border: 4px solid rgb(206, 71, 71);
+}
+
+/* Texto de la observación */
+.observacion-text {
+  margin-top: 5px;
+  display: block;
+}
+
+.border-green .observacion-text {
+  color: green;
+}
+
+.border-yellow .observacion-text {
+  color: yellow;
+}
+
+.border-red .observacion-text {
+  color: red;
+}
+
+/* Contenedor de los inputs con borde */
+.element-container {
+  margin-bottom: 15px;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+/* Otros estilos de inputs */
+.input-class,
+.textarea-class,
+.select-class,
+.file-input-class,
+.date-input-class,
+.time-input-class {
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.required-text {
+  color: red;
+  font-size: 0.8em;
+}
+
+.table-container {
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  margin: 20px;
+  background-color: #fff;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th {
+  background-color: brown;
+  color: #fff;
+  padding: 12px;
+  text-align: left;
+  font-size: 16px;
+}
+
+.table td {
+  padding: 12px;
+  text-align: left;
+  font-size: 14px;
+  border-bottom: 1px solid #ddd;
+}
+
+.table tr:nth-child(even) {
+  background-color: #f9f9f9; /* Color para filas pares */
+}
+
+/* Contenedor de la barra de búsqueda */
+.search-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  margin: 50px auto;
+  border: 2px solid #333;
+  border-radius: 25px;
+  background-color: #f0f0f0;
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease;
+}
+
+.search-container:hover {
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+/* Estilo del input */
+.search-input {
+  flex: 1;
+  border:#938c8c;
+  background: none;
+  padding: 15px;
+  font-size: 16px;
+  outline: none;
+  color: #333;
+  border-radius: 25px 0 0 25px;
+}
+
+/* Placeholder personalizado */
+.search-input::placeholder {
+  color: #aaa;
+  font-style: italic;
+}
+
+/* Estilo del botón de búsqueda */
+.search-btn {
+  border: none;
+  background-color: #938c8c;
+  color: white;
+  padding: 9px 20px;
+  cursor: pointer;
+  border-radius: 0 25px 25px 0;
+  font-size: 18px;
+  transition: background-color 0.3s ease;
+}
+
+.search-btn:hover {
+  background-color: #555;
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx
index 7a199b1..a64f228 100644
--- a/cosiap_frontend/src/App.jsx
+++ b/cosiap_frontend/src/App.jsx
@@ -34,6 +34,7 @@ import EditarSolicitud from "./components/solicitudes/EditarSolicitud";
 import VisualizarSolicitud from "./components/solicitudes/VerSolicitud";
 import RecepcionApoyo from "./components/users/RecepcionApoyo/RecepcionApoyo";
 import Solicitudes from "./components/SolicitudesAdmin/Solicitudes";
+import ListaUsuarios from "./components/admin/TablaUsuarios";
 
 function App() {
   const [viewPageLoader, setViewPageLoader] = useState(false);
@@ -118,7 +119,7 @@ function RoutesApp({ setViewPageLoader }) {
               <IsAdminRequiredRoute setViewPageLoader={setViewPageLoader} />
             }
           >
-            <Route path="/usuarios" element={<Inicio />} />
+            <Route path="/usuarios" element={<ListaUsuarios />} />
             <Route path="/solicitudes" element={<Solicitudes setViewPageLoader={setViewPageLoader} />} />
             <Route path="/crear-modalidad" element={<CreateModalidad/>} />
             <Route path="/editar-modalidad/:id" element={<EditModalidad/>} />
diff --git a/cosiap_frontend/src/api.js b/cosiap_frontend/src/api.js
index 02c4b17..0bc346d 100644
--- a/cosiap_frontend/src/api.js
+++ b/cosiap_frontend/src/api.js
@@ -84,7 +84,7 @@ const api = {
     
     //Endpoints del submodulo solicitantes
     solicitantes: {
-      get: () => ax.get('api/usuarios/solicitantes'),
+      get: (params) => ax.get('api/usuarios/solicitantes',params),
       post: (data) => ax.post('api/usuarios/solicitantes/', data),
       getById: (id) => ax.get(`api/usuarios/solicitantes/${id}`),
       update: (id, data) => ax.put(`api/usuarios/solicitantes/${id}`, data),
diff --git a/cosiap_frontend/src/components/admin/TablaUsuarios.jsx b/cosiap_frontend/src/components/admin/TablaUsuarios.jsx
index 4f51002..bd2411f 100644
--- a/cosiap_frontend/src/components/admin/TablaUsuarios.jsx
+++ b/cosiap_frontend/src/components/admin/TablaUsuarios.jsx
@@ -2,13 +2,13 @@ import { useState, useEffect } from "react";
 import api from '../../api';
 import Tabla from "../common/utility/ReusableTable"; // Importa la tabla reutilizable
 import MainContainer from "../common/utility/MainContainer";
-import {useNavigate} from 'react-router-dom';
+import '@/App.css';
 
 
 // Componente para recuperar la lista de usuarios solicitantes del sistema
 const ListaUsuarios = () => {
     const [usuarios, setUsuarios] = useState([]);
-    const navigate = useNavigate();
+    const [searchQuery, setSearchQuery] = useState('');
 
 
     // obtenemos a los usuarios al cargar la página
@@ -61,8 +61,35 @@ const ListaUsuarios = () => {
         }
     ];
 
+    // Actualiza el estado de `searchQuery` con cada cambio en el input
+    const handleInputChange = (e) => setSearchQuery(e.target.value);
+
+    const handleSearch = async () => {
+        try {
+            const response = await api.usuarios.solicitantes.get({
+                params: { search_query: searchQuery , model_name: "Solicitante", columns: "__all__"}
+            });
+            setUsuarios(response.data.data);
+        } catch (error) {
+            console.error('Error al buscar usuarios:', error);
+        }
+    };
+
     return (
         <MainContainer title="Usuarios">
+            <div className="form-input">
+                <input 
+                    type="text" 
+                    className="search-input" 
+                    placeholder="Buscar..."
+                    value={searchQuery}
+                    onChange={handleInputChange}
+                    >
+                </input>
+                <button className="search-btn" onClick={handleSearch}>
+                    🔍
+                </button>
+                </div>
             <div>
                 <Tabla columnas={columnas} datos={usuarios} />
             </div>
diff --git a/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx b/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx
index 25a856f..2482832 100644
--- a/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx
+++ b/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx
@@ -1,4 +1,4 @@
-import '@/components/modalidades/Modalidad.css'
+import '@/App.css';
 
 export const renderElemento = (seccionId, elemento, handleInputChange, handleCheckboxChange, respuestas) => {
   const { tipo, opciones, id, nombre, obligatorio } = elemento;
diff --git a/cosiap_frontend/src/components/common/utility/RenderElementView.jsx b/cosiap_frontend/src/components/common/utility/RenderElementView.jsx
index bd20af7..30d2865 100644
--- a/cosiap_frontend/src/components/common/utility/RenderElementView.jsx
+++ b/cosiap_frontend/src/components/common/utility/RenderElementView.jsx
@@ -1,4 +1,4 @@
-import '@/components/modalidades/Modalidad.css'
+import '@/App.css';
 
 export const renderElemento = (seccionId, elemento, handleInputChange, handleCheckboxChange, respuestas) => {
   const { tipo, opciones, id, nombre, obligatorio } = elemento;
diff --git a/cosiap_frontend/src/components/common/utility/RenderElemento.jsx b/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
index 6e9c491..497fe5f 100644
--- a/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
+++ b/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
@@ -1,4 +1,4 @@
-import '@/components/modalidades/Modalidad.css'
+import '@/App.css';
 import api from "@/api";
 
 export const renderElemento = (seccionId, elemento, handleInputChange, handleCheckboxChange) => {
diff --git a/cosiap_frontend/src/components/common/utility/ReusableTable.css b/cosiap_frontend/src/components/common/utility/ReusableTable.css
deleted file mode 100644
index a7f4515..0000000
--- a/cosiap_frontend/src/components/common/utility/ReusableTable.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.table-container {
-    border-radius: 15px;
-    overflow: hidden;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    margin: 20px;
-    background-color: #fff;
-  }
-  
-  .table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-  
-  .table th {
-    background-color: brown;
-    color: #fff;
-    padding: 12px;
-    text-align: left;
-    font-size: 16px;
-  }
-  
-  .table td {
-    padding: 12px;
-    text-align: left;
-    font-size: 14px;
-    border-bottom: 1px solid #ddd;
-  }
-  
-  .table tr:nth-child(even) {
-    background-color: #f9f9f9; /* Color para filas pares */
-  }
-  
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/common/utility/ReusableTable.jsx b/cosiap_frontend/src/components/common/utility/ReusableTable.jsx
index 7cc44b1..cbc612b 100644
--- a/cosiap_frontend/src/components/common/utility/ReusableTable.jsx
+++ b/cosiap_frontend/src/components/common/utility/ReusableTable.jsx
@@ -1,4 +1,4 @@
-import '@/components/common/utility/ReusableTable.css'; // Asegúrate de que la ruta sea correcta
+import '@/App.css';
 
 const Tabla = ({ columnas, datos }) => {
   return (
diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.css b/cosiap_frontend/src/components/modalidades/CrearModalidad.css
deleted file mode 100644
index f6215d7..0000000
--- a/cosiap_frontend/src/components/modalidades/CrearModalidad.css
+++ /dev/null
@@ -1,266 +0,0 @@
-/* Estilos para el card blanco */
-.white-card {
-    background-color: white;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    margin-bottom: 20px;
-}
-
-/* Estilos para las filas del formulario */
-.form-row {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    margin-bottom: 15px;
-}
-
-.form-group {
-    flex: 1;
-    margin-right: 15px;
-    margin-bottom: 15px;
-}
-
-.form-group label {
-    display: block;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-.form-group input,
-.form-group textarea,
-.form-group select {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 16px;
-}
-
-.form-group input[type="file"] {
-    padding: 0;
-}
-
-textarea {
-    resize: vertical;
-}
-
-/* Estilos para secciones */
-.section {
-    background-color: #f9f9f9;
-    padding: 15px;
-    margin-bottom: 20px;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-}
-
-/* Estilos para elementos */
-.element {
-    background-color: #f2f2f2;
-    padding: 10px;
-    margin-bottom: 10px;
-    border-radius: 6px;
-    border: 1px solid #ccc;
-}
-
-/* Estilos para opciones */
-.option {
-    background-color: #e9e9e9;
-    padding: 8px;
-    margin-bottom: 8px;
-    border-radius: 4px;
-    border: 1px solid #bbb;
-}
-
-/* Botones */
-.add-button {
-    background-color: #696d69;
-    color: white;
-    border: none;
-    padding: 8px 12px;
-    font-size: 14px;
-    border-radius: 16px;
-    cursor: pointer;
-    margin-top: 10px;
-    margin-right: 10px;
-}
-
-.add-button:hover {
-    background-color: #45a049;
-}
-
-.delete-button {
-    background-color: #f44336; 
-    color: white; 
-    border: none; 
-    padding: 8px 12px; 
-    font-size: 14px; 
-    border-radius: 16px; 
-    cursor: pointer; 
-    margin-top: 10px; 
-    margin-right: 10px; 
-    display: flex; 
-    align-items: center; 
-    justify-content: center; 
-}
-
-.delete-button i {
-    font-size: 16px; /* Ajusta el tamaño del ícono */
-}
-
-.delete-button:hover {
-    background-color: #e53935;
-}
-
-/* Botón de envío */
-.submit-button {
-    background-color: #4fb659;
-    color: white;
-    padding: 10px 20px;
-    font-size: 14px;
-    border: none;
-    border-radius: 16px;
-    cursor: pointer;
-    font-style: oblique;
-    margin-top: 20px;
-}
-
-.submit-button:hover {
-    background-color: #19d2b0;
-}
-
-/* Checkbox más pequeño */
-input[type="checkbox"] {
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-    margin-right: 10px;
-}
-
-
-.subtitle-text {
-    font-size: 20px;
-    color: #c65f5f;
-}
-
-.subtitle-text-1 {
-    font-size: 18px;
-    color: #752323;
-}
-
-.subtitle-text-2 {
-    font-size: 16px;
-    color: #9e5f5f;
-}
-
-/* Ajustar márgenes y tamaño del texto en etiquetas */
-.form-group label {
-    font-size: 16px;
-    color: #333;
-    margin-bottom: 8px;
-}
-
-.button-container {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 20px;
-    padding: 0 20px; 
-}
-
-.preview-image {
-    width: 100px;
-    height: 100px; 
-    object-fit: cover; 
-    border: 1px solid #ccc;
-    margin-top: 10px; 
-}
-
-.card {
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    margin: 15px 0;
-    padding: 10px;
-    background-color: #f5f5f5;
-}
-
-.element-card {
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    margin: 15px 0;
-    padding: 10px;
-    background-color: #adacac;
-}
-
-.element-card-header{
-    font-weight: bold;
-}
-
-.element-card-body{
-    padding: 10px;
-}
-
-.card-header {
-    font-weight: bold;
-}
-
-.card-body {
-    padding: 10px;
-}
-
-.option-card {
-    margin-left: 20px;
-    border: 1px solid #bbb;
-    padding: 5px;
-    border-radius: 5px;
-    background-color: #e9e9e9;
-}
-
-.form-row {
-    display: flex;
-    align-items: center; /* Alinea los elementos al centro verticalmente */
-    gap: 10px; /* Espacio entre los elementos */
-    height: auto; /* Asegúrate de que la altura del contenedor sea flexible */
-}
-
-.form-row label {
-    flex-shrink: 0; /* Evita que el label se encoja */
-}
-
-.form-row input {
-    flex: 1; /* Hace que el input ocupe el espacio disponible */
-}
-
-.element-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between; /* Para que el input esté a la izquierda y los botones a la derecha */
-    gap: 10px; /* Espacio entre el input y los botones */
-    width: 100%; /* Asegura que ocupe todo el ancho disponible */
-}
-
-.element-input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 16px;
-}
-
-.element-buttons {
-    display: flex;
-    gap: 5px; /* Espacio entre los botones */
-}
-
-.form-row input,
-.form-row button,
-.form-row label {
-    line-height: normal; /* Asegura que todos los elementos tengan una línea de texto coherente */
-    padding: 8px; /* Ajusta el padding para que sea igual en todos los elementos */
-    height: auto; /* Permite que los elementos ajusten su altura automáticamente */
-    font-size: 15px; /* Asegura que todos tengan el mismo tamaño de fuente */
-    font-style:normal;
-}
-
-.form-row input {
-    flex: 1; /* Hace que el input crezca según el espacio disponible */
-}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
index 3bcf905..b2b18e1 100644
--- a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import api from '../../api';
-import './CrearModalidad.css'
+import '@/App.css';
 import MainContainer from "../common/utility/MainContainer";
 import { useNavigate } from 'react-router-dom';
 
diff --git a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
index f01eaa5..f63a223 100644
--- a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import api from '../../api';
-import './CrearModalidad.css';
+import '@/App.css';
 import MainContainer from "../common/utility/MainContainer";
 import { useNavigate, useParams } from 'react-router-dom';
 
diff --git a/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx b/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx
index 8f63855..059fcc7 100644
--- a/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx
+++ b/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx
@@ -4,7 +4,7 @@ import { ModalidadCard } from "@/components/modalidades/ModalidadCard";
 import api from "@/api";
 import { useState, useEffect } from "react";
 import MainContainer from "@/components/common/utility/MainContainer";
-import './CrearModalidad.css'
+import '@/App.css';
 import { useNavigate } from "react-router-dom";
 
 export default function ListaModalidades({
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.css b/cosiap_frontend/src/components/modalidades/Modalidad.css
deleted file mode 100644
index fa88749..0000000
--- a/cosiap_frontend/src/components/modalidades/Modalidad.css
+++ /dev/null
@@ -1,412 +0,0 @@
-/* Estilos generales para inputs */
-.input-class,
-.textarea-class,
-.select-class,
-.date-input-class,
-.time-input-class,
-.file-input-class {
-  width: 100%;
-  padding: 10px;
-  color: rgb(0, 0, 0);
-  margin: 10px 0;
-  font-size: 16px;
-  border: 2px solid #555; /* Aumentamos el grosor y un color más oscuro */
-  border-radius: 4px;
-  box-sizing: border-box;
-  transition: border-color 0.3s ease;
-}
-
-/* Efecto de enfoque (focus) para resaltarlos cuando el usuario interactúe */
-.input-class:focus,
-.textarea-class:focus,
-.select-class:focus,
-.date-input-class:focus,
-.time-input-class:focus,
-.file-input-class:focus {
-  border-color: #4CAF50; /* Cambia el color del borde al interactuar */
-  outline: none; /* Elimina el borde por defecto del navegador */
-  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Efecto sutil de sombra verde */
-}
-
-/* Estilos para el textarea */
-.textarea-class {
-  height: 150px;
-  resize: vertical;
-}
-
-/* Estilos para los select */
-.select-class {
-  height: 40px;
-  background-color: white;
-}
-
-/* Grupo de casillas: Mantener una distribución compacta */
-.checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px; /* Espacio entre las casillas */
-}
-
-/* Etiquetas de las casillas */
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  margin-right: 15px;
-  font-size: 16px; /* Tamaño de texto estándar */
-}
-
-/* Estilo personalizado para el checkbox */
-.checkbox-label input[type="checkbox"] {
-  width: 20px; /* Tamaño del checkbox */
-  height: 20px; /* Tamaño del checkbox */
-  margin-right: 5px; /* Espacio entre la casilla y el texto */
-  cursor: pointer;
-  border: 2px solid #333; /* Borde visible */
-  border-radius: 4px; /* Esquinas redondeadas */
-  appearance: none; /* Eliminar el estilo por defecto del navegador */
-  position: relative;
-}
-
-/* Estilo cuando está seleccionado */
-.checkbox-label input[type="checkbox"]:checked {
-  background-color: #333; /* Fondo oscuro cuando está seleccionado */
-}
-
-/* Agregar un pseudo-elemento para el 'checkmark' */
-.checkbox-label input[type="checkbox"]:checked::after {
-  color: white;
-  font-size: 14px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-
-/* Estilos para el input de archivo */
-.file-input-class {
-  cursor: pointer;
-}
-
-/* Estilos para la fecha y hora */
-.date-input-class,
-.time-input-class {
-  max-width: 200px;
-}
-
-/* Estilo para el separador */
-.separator-class {
-  border: 0;
-  height: 1px;
-  background: #e0e0e0;
-  margin: 20px 0;
-}
-
-
-/* Contenedor principal */
-.container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
-    background-color: #f9f9f9;
-    border-radius: 45px;
-    margin-top: 20px;
-  }
-  
-  /* Sección de la imagen y título */
-  .image-container {
-    position: relative;
-    width: 100%;
-    height: 400px;
-    border-radius: 45px 45px 0 0;
-    overflow: hidden;
-  }
-  
-  .image-container img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  
-  .image-overlay {
-    position: absolute;
-    inset: 0;
-    background-color: rgba(128, 128, 128, 0.6);
-    border-radius: 45px 45px 0 0;
-  }
-  
-  .image-text-container {
-    position: absolute;
-    top: 10%;
-    width: 100%;
-    text-align: center;
-    color: var(--blanco);
-  }
-  
-  .image-text-container h3 {
-    font-size: 2rem;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-  
-  .image-text-container h4 {
-    font-size: 2.5rem;
-    margin-top: 20px;
-  }
-  
-  .image-text-container p {
-    font-size: 1.2rem;
-    margin-top: 20px;
-  }
-  
-  /* Estilos de las cards de las secciones */
-  .section-card {
-    background-color: var(--blanco);
-    width: 90%;
-    margin: 20px 0;
-    padding: 20px;
-    border-radius: 20px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-  
-  .section-card h3 {
-    font-size: 1.8rem;
-    font-weight: bold;
-    margin-bottom: 10px;
-    color: brown;
-    text-align: center;
-  }
-  
-  /* Contenedor de los elementos, para agruparlos en filas */
-  .elementos-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    justify-content: space-between;
-  }
-  
-  /* Cada elemento tiene su propia card */
-  .element-card {
-    background-color: var(--gris-claro);
-    border-radius: 10px;
-    padding: 15px;
-    width: 30%; /* Toma 30% del ancho para 3 elementos por fila */
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-  
-  /* Estilos para los inputs dentro de las element-cards */
-  .element-card input,
-  .element-card textarea,
-  .element-card select {
-    width: 100%;
-    padding: 10px;
-    font-size: 1rem;
-    margin-top: 5px;
-    border: 1px solid var(--gris);
-    border-radius: 5px;
-  }
-  
-  /* Input específico para archivo */
-  .file-input-class {
-    background-color: var(--blanco);
-    cursor: pointer;
-  }
-  
-  /* Estilo de la card del monto solicitado */
-  .monto-card {
-    background-color: var(--blanco);
-    width: 90%;
-    margin: 30px 0;
-    padding: 30px;
-    border-radius: 20px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-  
-  .monto-card h3 {
-    font-size: 1.8rem;
-    font-weight: bold;
-    margin-bottom: 10px;
-    color: brown;
-    text-align: center;
-  }
-  
-  .monto-card .input-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-  }
-  
-/* Botones de acción */
-.buttons-container {
-  display: flex;
-  justify-content: space-between; /* Un botón a la izquierda, otro a la derecha */
-  width: 100%; /* El contenedor ocupa todo el ancho disponible */
-  margin-top: 20px;
-  padding: 0 40px; /* Espacio a los lados del contenedor, ajusta según lo necesites */
-  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
-}
-
-.button, .submit-button {
-  background-color: var(--secundario);
-  color: var(--blanco);
-  font-weight: bold;
-  font-style: normal;
-  padding: 10px 20px;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-.submit-button {
-  background-color: #4CAF50;
-}
-
-
-  
-  
-  .button:hover {
-    background-color: var(--secundario-f);
-  }
-  
-  .alert {
-    position: fixed;
-    top: 20px; /* Distancia desde la parte superior */
-    left: 50%;
-    transform: translateX(-50%); /* Centrar horizontalmente */
-    padding: 15px;
-    color: white;
-    width: calc(100% - 40px); /* Ajustar el ancho */
-    max-width: 600px; /* Ancho máximo */
-    text-align: center;
-    z-index: 1000; 
-    border-radius: 5px;
-    transition: opacity 0.5s ease; /* Transición suave */
-}
-
-.success {
-    background-color: #19a81e; /* Verde para éxito */
-}
-
-.error {
-    background-color: #f44336; /* Rojo para error */
-}
-
-
-.download-button {
-  display: inline-block;
-  padding: 10px 20px;
-  margin-top: 10px;
-  background-color: #955e3d; /* Color de fondo */
-  color: white; /* Color del texto */
-  text-align: center;
-  text-decoration: none;
-  font-size: 12px;
-  font-weight: bold;
-  border-radius: 5px;
-  transition: background-color 0.3s ease;
-}
-
-.download-button:hover {
-  background-color: #45a049; /* Color de fondo al pasar el mouse */
-}
-
-.download-button:active {
-  background-color: #3e8e41; /* Color de fondo al hacer clic */
-}
-
-.download-button:focus {
-  outline: none; /* Elimina el borde de enfoque */
-}
-
-.view-document-button {
-  display: inline-block;
-  padding: 10px 20px;
-  margin-top: 10px;
-  background-color: #4f6ebc; /* Color de fondo */
-  color: white; /* Color del texto */
-  text-align: center;
-  text-decoration: none;
-  font-size: 12px;
-  font-weight: bold;
-  border-radius: 5px;
-  transition: background-color 0.3s ease;
-}
-
-.info-container {
-  border: 1px solid #e0e0e0; /* Borde suave */
-  border-radius: 8px; /* Bordes redondeados */
-  padding: 15px; /* Relleno interior */
-  background-color: #f9f9f9; /* Fondo claro */
-  margin-bottom: 20px; /* Separación con otros elementos */
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
-  text-align: center;
-}
-
-.info-container p {
-  margin: 8px 0; /* Margen entre los párrafos */
-}
-
-.info-container strong {
-  color: #333; /* Color fuerte para los títulos */
-}
-
-/* Borde dependiendo del estado */
-.border-green {
-  border: 4px solid rgb(19, 183, 19);
-}
-
-.border-yellow {
-  border: 4px solid rgb(221, 221, 111);
-}
-
-.border-red {
-  border: 4px solid rgb(206, 71, 71);
-}
-
-/* Texto de la observación */
-.observacion-text {
-  margin-top: 5px;
-  display: block;
-}
-
-.border-green .observacion-text {
-  color: green;
-}
-
-.border-yellow .observacion-text {
-  color: yellow;
-}
-
-.border-red .observacion-text {
-  color: red;
-}
-
-/* Contenedor de los inputs con borde */
-.element-container {
-  margin-bottom: 15px;
-  padding: 10px;
-  border-radius: 5px;
-}
-
-/* Otros estilos de inputs */
-.input-class,
-.textarea-class,
-.select-class,
-.file-input-class,
-.date-input-class,
-.time-input-class {
-  width: 100%;
-  padding: 10px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-}
-
-.required-text {
-  color: red;
-  font-size: 0.8em;
-}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.jsx b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
index ec6b551..3424c42 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
@@ -1,6 +1,6 @@
 import InputMonto from "@/components/common/utility/InputMonto";
 import { renderElemento } from "@/components/common/utility/RenderElemento";
-import '@/components/modalidades/Modalidad.css'
+import '@/App.css';
 
 /* Validaciones para formularios */
 import {
diff --git a/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx b/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
index 8c5f9e9..cc874bf 100644
--- a/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
+++ b/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
@@ -3,7 +3,7 @@ import api from '../../api';
 import MainContainer from "../common/utility/MainContainer";
 import { useNavigate, useParams } from 'react-router-dom';
 import { renderElemento } from "@/components/common/utility/RenderElementEdit"; 
-import '@/components/modalidades/Modalidad.css'
+import '@/App.css';
 /* Validaciones para formularios */
 import {
     MontoValidation,
diff --git a/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.css b/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.css
deleted file mode 100644
index 208f84b..0000000
--- a/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.css
+++ /dev/null
@@ -1,44 +0,0 @@
-/* Estilo para los estados */
-.estado-label {
-    padding: 5px 10px;
-    border-radius: 8px;
-    color: white;
-    font-weight: bold;
-    display: inline-block;
-    text-align: center;
-    min-width: 100px;
-}
-
-.estado-aprobado {
-    background-color: rgb(126, 233, 126);
-}
-
-.estado-rechazado {
-    background-color: rgb(223, 91, 91);
-}
-
-.estado-pendiente {
-    background-color: rgb(109, 163, 216);
-    color: black; 
-}
-
-
-.button-ver{
-    background-color: grey;
-    color: white;
-    padding: 5px 10px;
-    border-radius: 5px;
-    margin-right: 10px;
-    border: none;
-    cursor: pointer;
-}
-
-.button-editar{
-    background-color: brown;
-    color: white;
-    padding: 5px 10px;
-    border-radius: 5px;
-    margin-right: 10px;
-    border: none;
-    cursor: pointer;
-}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx b/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
index ed9afbf..c44f2af 100644
--- a/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
+++ b/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import api from '../../api';
 import Tabla from "../common/utility/ReusableTable"; // Importa la tabla reutilizable
 import MainContainer from "../common/utility/MainContainer";
-import '@/components/solicitudes/HistorialSolicitudes.css'; // Importa los estilos
+import '@/App.css';
 import { useNavigate} from 'react-router-dom';
 
 
diff --git a/cosiap_frontend/src/components/solicitudes/VerSolicitud.jsx b/cosiap_frontend/src/components/solicitudes/VerSolicitud.jsx
index de1d259..f699c88 100644
--- a/cosiap_frontend/src/components/solicitudes/VerSolicitud.jsx
+++ b/cosiap_frontend/src/components/solicitudes/VerSolicitud.jsx
@@ -3,7 +3,7 @@ import api from '../../api';
 import MainContainer from "../common/utility/MainContainer";
 import { useParams, useNavigate } from 'react-router-dom';
 import { renderElemento } from "@/components/common/utility/RenderElementView"; 
-import '@/components/modalidades/Modalidad.css';
+import '@/App.css';
 
 const VisualizarSolicitud = () => {
   const { id } = useParams();
-- 
GitLab