diff --git a/.github/workflows/azure-static-web-apps-blue-river-03def860f.yml b/.github/workflows/azure-static-web-apps-blue-river-03def860f.yml
index ecba24d..7477702 100644
--- a/.github/workflows/azure-static-web-apps-blue-river-03def860f.yml
+++ b/.github/workflows/azure-static-web-apps-blue-river-03def860f.yml
@@ -1,5 +1,5 @@
 name: Azure Static Web Apps CI/CD
- 
+
 on:
   push:
     branches:
@@ -15,8 +15,8 @@ jobs:
     runs-on: ubuntu-latest
     name: Build and Deploy Job
     permissions:
-       id-token: write
-       contents: read
+      id-token: write
+      contents: read
     steps:
       - uses: actions/checkout@v3
         with:
@@ -28,10 +28,10 @@ jobs:
         uses: actions/github-script@v6
         id: idtoken
         with:
-           script: |
-               const coredemo = require('@actions/core')
-               return await coredemo.getIDToken()
-           result-encoding: string
+          script: |
+            const coredemo = require('@actions/core')
+            return await coredemo.getIDToken()
+          result-encoding: string
       - name: Build And Deploy
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v1
diff --git a/docs/README.md b/docs/README.md
index 739a144..df38f54 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -18,6 +18,7 @@ Este índice organiza la documentación técnica del proyecto por capa arquitect
 - [forms.md](forms.md) — Formatos/formularios de TI.
 - [dashboard-funcionalidades.md](dashboard-funcionalidades.md) — Lógica de indicadores y disponibilidad de agentes (incl. integración con Teams).
 - [loans-funcionalidades.md](loans-funcionalidades.md) — Lógica de préstamos de equipos.
+- [activos.md](activos.md) — Activos TI: catálogo, bitácora de movimientos,asignacion de usuarios, préstamo/devolución de activos y vínculo con tickets.
 - [operations.md](operations.md) — Cajeros POS, información de tienda, inventario y proveedores de internet.
 - [shared-funcionalidades.md](shared-funcionalidades.md) — Cliente de Power Automate (Flow) y subida de archivos a Supabase.
 - [tasks-funcionalidades.md](tasks-funcionalidades.md) — Tareas y ausencias del equipo.
@@ -39,6 +40,7 @@ Este índice organiza la documentación técnica del proyecto por capa arquitect
 - [components-documentar.md](components-documentar.md) — Documentación de casos, actas de entrega y escalamiento a proveedor.
 - [components-formatos.md](components-formatos.md) — Formularios de seguridad de red, ERP, permisos de navegación y servicios de TI.
 - [components-loans.md](components-loans.md) — Préstamo de equipos, pruebas de dispositivo, historial y devoluciones.
+- [components-activos.md](components-activos.md) — Catálogo, detalle, ficha de seguimiento, alta y asignación de activos.
 - [components-tareas.md](components-tareas.md) — Tareas, ausencias, seguimiento y contador de tiempo.
 - [components-usuarios-acceso.md](components-usuarios-acceso.md) — Gestión de usuarios, acceso/franquicias y login.
 - [components-operativos.md](components-operativos.md) — Cajeros POS, información de tienda/proveedores, inventario y tips.
diff --git a/docs/activos.md b/docs/activos.md
new file mode 100644
index 0000000..5a38ee7
--- /dev/null
+++ b/docs/activos.md
@@ -0,0 +1,108 @@
+# Módulo Activos
+
+## Descripción general
+
+El módulo Activos cubre todo el ciclo de vida de un equipo de TI: su creación, la asignación a un usuario, el préstamo y la devolución. Cada activo tiene una ficha de seguimiento con una bitácora completa donde quedan reflejados todos sus movimientos (cambios de usuario, estado y ubicación, la fecha en que se realizaron, y los tickets por incidencias y por préstamos). Arquitectónicamente vive en `src/Funcionalidades/inventario` como una capa de hooks de React que llaman a tres repositorios propios del módulo: `ActivosTIRepository`, `MovimientoTIRepository` y `ActivoTicketRepository` (en `src/repositories/`), los tres implementados solo sobre Supabase. Para préstamos y devoluciones también usa los repositorios generales `tickets` y `logs` (Supabase) y la lista `prestamos` de SharePoint (vía `useGraphServices`), por lo que un préstamo o una devolución escribe en los dos sistemas. Los consumidores de UI son los componentes de `src/components/Inventario` (incluida la subcarpeta `Catalogo`), además de `DetallesTickets/DetallesTickets.tsx` (y `Loans/PretamosPage.tsx`, hoy comentada en el menú y en desuso); se apoyan en estos hooks para no tener lógica de negocio propia, aunque `ModalAsignarActivo.tsx` todavía conserva parte de ella (ver [components-activos.md](components-activos.md)).
+
+## Archivos
+
+| Archivo                   | Qué hace                                                                                                                                                                                                                                                                                               |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `useActivosTI.ts`         | Hook `useActivosTI`: lista paginada de activos con filtros por estado y ubicación, y búsqueda con espera de 300 ms (debounce); también maneja el formulario de alta/edición, con validación de campos y de serial duplicado antes de guardar.                                                          |
+| `useActivoMovimientos.ts` | Hook `useActivoMovimientos`: bitácora de movimientos de un activo (búsqueda, filtro por estado nuevo, paginación y ordenamiento por fecha, estado o responsable) y registro de un movimiento nuevo con su validación.                                                                                  |
+| `useActivoPrestamo.ts`    | Hook `useActivoPrestamo`: ciclo de préstamo de un activo. Al iniciar lo marca `en_prestamo` y lo vincula al ticket; al devolver cierra el préstamo (SharePoint) y su ticket, devuelve el activo a su estado y usuario anteriores, deja el registro en la bitácora y avisa por correo (Power Automate). |
+| `useActivoTickets.ts`     | Hook `useActivoTicket`: carga los tickets vinculados a un activo (incidencias y préstamos) desde la tabla de vínculos activo ↔ ticket.                                                                                                                                                                 |
+| `utils/ActivosColors.ts`  | Función `colorEstadoActivo`: devuelve el color de cada estado del activo (Disponible, Asignado, En préstamo) para los badges de la UI; gris si el estado no se reconoce.                                                                                                                               |
+
+## Funciones y constantes clave
+
+### Catálogo y alta de activos (`useActivosTI.ts`)
+
+- **`useActivosTI({ ActivosSvc })`**: hook que junta en un solo lugar la lista de activos y el formulario de alta/edición. Lo usan `CatalogosActivos.tsx` (solo la lista) y `ModalAltaActivo.tsx` (solo el formulario).
+- **`loadActivos(filter)` / `loadAll()`**: `loadActivos` consulta `ActivosSvc.loadActivos` y guarda `activos`, `total` y `hasNext`; si falla, deja la lista vacía y el mensaje en `error`. `loadAll()` es un atajo que llama `loadActivos` con los filtros actuales armados por `buildFilter()` (`estado`, `ubicacion_tipo`, `search`, `pageIndex`, `pageSize`, `paginated: true`).
+- **Recarga automática**: un `useEffect` vigila `criteriaKey`, que es el conjunto de filtros convertido a texto (`JSON.stringify`). Si cambia algún filtro y no se está en la página 1, primero regresa a la página 1; en cualquier otro caso llama `loadAll()`. Por eso la lista se carga sola apenas se monta el hook.
+- **Búsqueda con espera (`useDebouncedValue`)**: el texto de `search` solo se aplica 300 ms después de que el usuario deja de escribir, para no hacer una consulta por cada tecla.
+- **Paginación**: `nextPage()` solo avanza si `hasNext` es verdadero; `prevPage()` nunca baja de la página 1.
+- **`setField(key, value)` / `resetForm()` / `validateForm()`**: manejo del formulario. `validateForm` usa `validarActivoTI` (`Models/ActivoTI`) y guarda los errores por campo en `formErrors`; `resetForm` limpia el formulario, los errores y el activo seleccionado.
+- **`selectActivo(activo)`**: carga en el formulario los datos de un activo existente para editarlo.
+- **`saveActivo()`**: valida el formulario; consulta `getActivoBySerial` y, si ya existe otro activo con el mismo serial, muestra _"Ya existe un activo con este serial (código …)"_ en el campo; si no, crea el activo con estado `"Disponible"` (o lo actualiza si hay `selectedActivo`), recarga la lista y limpia el formulario.
+
+### Bitácora de movimientos (`useActivoMovimientos.ts`)
+
+- **`useActivoMovimientos({ MovimientosSvc, activoId })`**: hook de la bitácora de un activo. Lo usan `FichaActivo.tsx` (para mostrar el historial) y `ModalAsignarActivo.tsx` (para registrar un movimiento).
+- **Lista**: misma estructura que `useActivosTI` (`loadMovimientos`, `loadAll`, `buildFilter`, `criteriaKey`, recarga automática, búsqueda con espera de 300 ms y paginación). El filtro `tipoEventoFiltro` filtra por `estado_nuevo` del movimiento.
+- **`toggleSort(field, additive)`**: cambia el orden de la tabla. Los campos ordenables son `fecha_evento`, `estado_nuevo` y `responsable_nombre`; un click alterna entre ascendente y descendente, y con `additive` agrega un segundo campo de orden. Al servidor solo se envía el primero (`primarySort`).
+- **`setField` / `resetForm` / `validateForm`**: formulario del movimiento. `validateForm` usa `ValidarMovimiento` (`Models/ActivosTIMovimientos`); `resetForm` limpia todo menos `activo_id`, que se conserva para no perder el activo.
+- **`saveMovimiento()`**: valida, crea el movimiento con `createMovimientos`, recarga la bitácora y limpia el formulario. Solo registra el movimiento: actualizar el activo (estado, ubicación, usuario) lo hace el componente que lo llama.
+
+### Préstamos (`useActivoPrestamo.ts`)
+
+- **`useActivoPrestamo()`**: hook sin parámetros; toma sus dependencias de `useRepositories` (`activosTI`, `movimientosTI`, `activotickets`, `tickets`, `logs`), `useGraphServices` (`prestamos`) y `useAuth` (cuenta logueada, que queda como responsable).
+- **`iniciarPrestamoActivo(prestamo, comentario)`**: se llama después de crear el préstamo. Pasos: 1) busca el activo por `prestamo.Id_dispositivo`; 2) registra en la bitácora el cambio a `en_prestamo`, guardando el estado y usuario anteriores; 3) actualiza el activo con `estado: "en_prestamo"`, el usuario que lo recibe y `prestamo_activo_id`; 4) vincula el ticket del préstamo al activo (`createActivoTicket`). Devuelve `true` si los pasos 1 a 3 salen bien. Lo usa `ModalAsignarActivo.tsx` (también `PretamosPage.tsx`, en desuso).
+- **`finalizarPrestamoActivo(prestamo, comentario)`**: devuelve el activo a como estaba antes del préstamo. Busca el último movimiento con `estado_nuevo: "en_prestamo"` para saber a qué estado y usuario volver (si no lo encuentra, usa `"Disponible"` y sin usuario); registra el movimiento de regreso en la bitácora y actualiza el activo dejando `prestamo_activo_id: null`. Si el activo ya no está `en_prestamo`, no hace nada. Hoy se usa por dentro de `devolverPrestamoActivo`; la única llamada directa está en `PretamosPage.tsx`, en desuso.
+- **`devolverPrestamoActivo(prestamo, buenEstado, comentario)`**: devolución completa desde `FichaActivo.tsx`. Pasos: 1) cierra el préstamo en SharePoint (`Estado: "Cerrado"`, fecha de devolución y quién recibe); 2) cierra el ticket del préstamo y crea un log de tipo "Cierre" con el estado de devolución (_Buen estado_ / _Mal estado_) y el comentario; 3) llama `finalizarPrestamoActivo`; 4) envía un correo al usuario por Power Automate. El correo se envía sin esperar respuesta: si falla, la devolución igual se da por buena.
+
+### Activos vinculados a tickets (`useActivoTickets.ts`)
+
+- **`useActivoTicket({ ActivosTicketSvc })`**: hook de la tabla de vínculos activo ↔ ticket.
+- **`loadActivoTicket(filter)`**: carga los vínculos y los guarda en `activoticket`. Se usa con dos filtros distintos: `{ activo_id }` en `FichaActivo.tsx` (tickets de un activo) y `{ ticket_id }` en `DetallesTickets.tsx` (activos de un ticket).
+- **`setField` / `resetForm` / `validateForm`**: formulario para crear un vínculo (exige `activo_id` y `ticket_id`). Ningún componente lo usa: los vínculos se crean directamente con `createActivoTicket` en `Funcionalidades/Tickets/NuevoTicket.ts` (al crear un ticket con activos) y en `iniciarPrestamoActivo`.
+
+### Colores de estado (`utils/ActivosColors.ts`)
+
+- **`colorEstadoActivo(estado)`**: devuelve el color del estado a partir de `COLORES_ESTADO`; si el estado viene vacío o no existe, devuelve gris. Lo usan `CatalogosActivos`, `ModalDetalleActivo` y `FichaActivo`.
+
+### Constantes clave (resumen)
+
+| Constante                               | Archivo                                      | Valor / propósito                                                                                                                                                                                                                                                                                                               |
+| --------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `DEFAULT_PAGE_SIZE`                     | `useActivosTI.ts`, `useActivoMovimientos.ts` | `10`, tamaño de página inicial; **definida dos veces**, una en cada hook.                                                                                                                                                                                                                                                       |
+| `delay = 300` (de `useDebouncedValue`)  | `useActivosTI.ts`, `useActivoMovimientos.ts` | Milisegundos que espera la búsqueda antes de consultar.                                                                                                                                                                                                                                                                         |
+| `DEFAULT_SORTS`                         | `useActivoMovimientos.ts`                    | Orden inicial de la bitácora: `fecha_evento` descendente (lo más reciente primero).                                                                                                                                                                                                                                             |
+| `COLORES_ESTADO`                        | `utils/ActivosColors.ts`                     | Disponible = verde, Asignado = azul, `en_prestamo` = ámbar.                                                                                                                                                                                                                                                                     |
+| `ESTADOS_ACTIVO` / `EstadoActivo`       | `Models/ActivosTIMovimientos.ts`             | Los tres estados posibles de un activo y su etiqueta (`en_prestamo` → "En Prestamo").                                                                                                                                                                                                                                           |
+| `UBICACIONES_ACTIVO` / `Ubicacion_Tipo` | `Models/ActivoTI.ts`                         | Las tres ubicaciones posibles y su etiqueta: `bodega_central` → "Bodega", `usuario` → "Usuario", `sala_reuniones` → "Sala de reuniones". Los hooks usan el tipo `Ubicacion_Tipo` (filtro `ubicacionFiltro` y campos `ubicacion_origen`/`ubicacion_destino`); la constante la usan los componentes para los selects y etiquetas. |
+| `PRESTAMOS_FLOW_URL`                    | `Funcionalidades/loans/prestamos`            | URL del flujo de Power Automate que envía el correo de devolución; se importa desde el módulo de préstamos.                                                                                                                                                                                                                     |
+
+## Flujo del módulo
+
+1. **Alta**: desde "Nuevo Activo", `saveActivo` valida el formulario, revisa que el serial no exista (`getActivoBySerial`) y crea el activo con estado `"Disponible"` en Supabase.
+2. **Listado**: `useActivosTI` alimenta el catálogo; cada cambio de filtro, búsqueda (con espera de 300 ms) o página vuelve a consultar `loadActivos` en el servidor. `colorEstadoActivo` pinta el estado de cada fila.
+3. **Asignación / reasignación**: el formulario usa `useActivoMovimientos.saveMovimiento` para dejar el movimiento en la bitácora (estado, ubicación y usuario de origen y destino, responsable y comentario). Después, el propio componente (`ModalAsignarActivo.tsx`) actualiza el activo con `updateActivo`; esta segunda parte no está en el hook.
+4. **Préstamo**: se crea primero el préstamo y su ticket con `usePrestamos` (módulo de préstamos) y luego `iniciarPrestamoActivo` marca el activo `en_prestamo`, guarda en la bitácora su estado y usuario anteriores y vincula el ticket al activo. Hoy esto se hace desde `ModalAsignarActivo.tsx` (opción "Préstamo").
+5. **Devolución**: se hace desde la ficha del activo con `devolverPrestamoActivo`, que hace todo: cierra el préstamo en SharePoint, cierra su ticket con un log de "Cierre", llama `finalizarPrestamoActivo` (el activo vuelve al estado y usuario que tenía antes del préstamo, leídos del último movimiento `en_prestamo` de la bitácora) y envía el correo.
+
+La antigua página de Préstamos (`Loans/PretamosPage.tsx`) también prestaba y devolvía activos con `iniciarPrestamoActivo` y `finalizarPrestamoActivo`, pero está comentada en el menú de `App.tsx` y su uso se irá reduciendo poco a poco; el flujo vigente es el de Inventario descrito arriba. 6. **Vínculo con tickets**: al crear un ticket con activos seleccionados, `Funcionalidades/Tickets/NuevoTicket.ts` crea los vínculos con `createActivoTicket`; los préstamos también crean el suyo en `iniciarPrestamoActivo`. `useActivoTicket.loadActivoTicket` los lee en los dos sentidos: los tickets de un activo (ficha) y los activos de un ticket (detalle del ticket). 7. **Seguimiento**: la ficha combina tres fuentes: la bitácora (`useActivoMovimientos`), las incidencias (`useActivoTicket`) y el historial de préstamos (lista `prestamos` de SharePoint).
+
+En conjunto, el **estado del activo** (`Disponible`, `Asignado`, `en_prestamo`) es lo que conecta todo el módulo: decide el color en el catálogo, si el activo se puede asignar o mover, y si se puede devolver. Y la **bitácora** es la memoria del módulo: además del historial que ve el usuario, `finalizarPrestamoActivo` la consulta para saber a qué estado regresar el activo después de un préstamo.
+
+## Dependencias
+
+**Internas:**
+
+- `src/repositories/ActivosTIRepository` (`ActivosTIRepository.ts` interfaz, `ActivosTIFromSupabase.ts`) — CRUD, listado paginado y búsqueda por serial de activos.
+- `src/repositories/MovimientoTIRepository` (`MovimientosTIRepository.ts` interfaz, `MovimientoTIFromSupabase.ts`) — bitácora de movimientos.
+- `src/repositories/ActivoTicketRepository` — vínculos activo ↔ ticket.
+- `src/repositories/TicketsRepository` y `LogRepository` — cierre del ticket del préstamo y su log, vía `useRepositories()`.
+- `src/graph/GrapServicesContext` — servicio `prestamos` (lista de SharePoint), vía `useGraphServices()`.
+- `src/auth/authContext` — cuenta logueada, que queda como responsable de cada movimiento.
+- `src/Funcionalidades/shared/FlowClient.ts` y `PRESTAMOS_FLOW_URL` (`Funcionalidades/loans/prestamos`) — envío del correo de devolución por Power Automate.
+- `src/Models/*` — `ActivoTI` (incluye `validarActivoTI` y `UBICACIONES_ACTIVO`), `ActivosTIMovimientos` (incluye `ValidarMovimiento` y `ESTADOS_ACTIVO`), `ActivoTicket`, `prestamos`, `FlujosPA`.
+- `src/utils/Date.ts` (`toISODateTimeFlex`) y `src/utils/Text.ts` (`escapeHTML`, para no inyectar HTML en el log y el correo).
+
+**Externas:**
+
+- `react` (hooks). No usa otras librerías.
+
+**Consumidores de UI** (confirmado por import en `src/components`):
+`Inventario/Catalogo/CatalogosActivos.tsx` y `Inventario/ModalAltaActivo.tsx` (`useActivosTI`), `Inventario/FichaActivo.tsx` (`useActivoMovimientos`, `useActivoTicket`, `useActivoPrestamo`), `Inventario/ModalAsignarActivo.tsx` (`useActivoMovimientos`, `useActivoPrestamo`), `DetallesTickets/DetallesTickets.tsx` (`useActivoTicket`) y `Loans/PretamosPage.tsx` (`useActivoPrestamo`; página comentada en `App.tsx`, en desuso). `colorEstadoActivo` lo usan además `CatalogosActivos`, `ModalDetalleActivo` y `FichaActivo`.
+
+## Oportunidades de mejora
+
+- **Préstamo y devolución sin "todo o nada"**: `iniciarPrestamoActivo`, `finalizarPrestamoActivo` y `devolverPrestamoActivo` hacen varios guardados seguidos (bitácora, activo, vínculo, préstamo en SharePoint, ticket, log) y si uno falla a mitad de camino los anteriores ya quedaron hechos. Ejemplos: en `devolverPrestamoActivo`, si el préstamo y el ticket ya se cerraron pero falla `finalizarPrestamoActivo`, el activo sigue `en_prestamo`; al reintentar, el ticket se vuelve a cerrar y queda un segundo log de "Cierre". En `iniciarPrestamoActivo`, si se registra el movimiento pero falla `updateActivo`, la bitácora dice "en préstamo" y el activo no. Como préstamos vive en SharePoint y el resto en Supabase, no se puede usar una sola transacción; lo más seguro es mover la parte de Supabase a una función del servidor (función SQL o Edge Function) y reintentar o marcar como pendiente lo de SharePoint.
+- **Limpieza pendiente por la página de Préstamos en desuso**: `PretamosPage.tsx` está comentada en `App.tsx`, pero el archivo sigue existiendo y sigue importando `useActivoPrestamo`. Es el único consumidor directo de `finalizarPrestamoActivo` (la ficha lo usa solo a través de `devolverPrestamoActivo`). Cuando se retire del todo, se puede borrar el archivo y dejar `finalizarPrestamoActivo` como función interna del hook. Si en algún momento se vuelve a activar, antes hay que corregirla: muestra el mensaje de éxito _"El activo vuelve a su estado anterior"_ antes de llamar `finalizarPrestamoActivo` y no revisa si funcionó, y devuelve el préstamo con la lógica de `loans` (`Terminar`, `notifyEstado`) en lugar de `devolverPrestamoActivo`.
+- **Hooks que mezclan lista y formulario**: `useActivosTI` y `useActivoMovimientos` traen la lista con su recarga automática **y** el formulario. Por eso `ModalAltaActivo.tsx` descarga el catálogo completo solo para usar el formulario, y `ModalAsignarActivo.tsx` descarga la bitácora del activo sin mostrarla. Separar cada uno en dos hooks (`useActivosList` / `useActivoForm`, por ejemplo) evita esas consultas.
+- **Código duplicado entre hooks**: `useDebouncedValue`, `DEFAULT_PAGE_SIZE` y todo el patrón de `criteriaKey` + `useEffect` de recarga + `nextPage`/`prevPage` están copiados casi igual en `useActivosTI` y `useActivoMovimientos`. Un hook genérico de lista paginada (o al menos `useDebouncedValue` en `utils`) evitaría que un arreglo en uno se olvide en el otro.
+- **Errores que solo quedan en consola**: en `useActivoPrestamo`, si falla vincular el ticket al activo o el correo de devolución, solo se escribe un `console.error` y la función devuelve `true`. El usuario no se entera de que el ticket no quedó ligado o de que la persona no recibió el correo. Además, los errores de `iniciarPrestamoActivo`/`finalizarPrestamoActivo` se reducen a `false`, sin decir qué paso falló.
+- **Código sin usar o a medias**: el formulario de `useActivoTicket` (`form`, `setField`, `validateForm`) no lo usa ningún componente, porque los vínculos se crean directo con `createActivoTicket`. En `useActivosTI` hay restos comentados de un filtro por categoría (`categoriaFiltro`) y un filtro por ubicación (`ubicacionFiltro`) que funciona pero ninguna pantalla muestra. `toggleSort` permite ordenar por varios campos, pero al servidor solo se envía el primero (`primarySort`), así que el orden múltiple no tiene efecto.
+- **Validación de serial sin protección en la base de datos**: `saveActivo` revisa el serial con `getActivoBySerial` antes de guardar y encuentra el duplicado sin importar mayúsculas o espacios al inicio y al final. El único hueco es el de dos registros al mismo tiempo: primero se consulta y después se crea, así que si dos personas registran el mismo serial a la vez, ambas pasan la revisión. La garantía real debe estar en la base de datos (índice único sobre `numero_serie` en Supabase); la consulta previa sirve para mostrar un mensaje amable. La tabla de activos no está en `supabase/migrations`, así que desde el repositorio no se puede confirmar si ese índice ya existe: conviene revisarlo en Supabase.
diff --git a/docs/components-activos.md b/docs/components-activos.md
new file mode 100644
index 0000000..1ee2678
--- /dev/null
+++ b/docs/components-activos.md
@@ -0,0 +1,102 @@
+# Componentes de Activos
+
+## Descripción general
+
+Este grupo cubre la lista principal de activos (`Catalogo/CatalogosActivos.tsx`), el detalle completo de un activo (`Catalogo/ModalDetalleActivo.tsx`), el formulario de registro individual de activos y el de asignar/reasignar usuarios, creando así un historial de movimientos en la ficha del activo (`FichaActivo.tsx`). En conjunto forman el flujo completo: crear activo → listar/buscar → ver detalle → asignar/prestar/devolver → abrir ficha del activo.
+
+## Archivos
+
+| Archivo                           | Qué renderiza/hace                                                                                                                                                                                                                                                                                                                        |
+| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Catalogo/CatalogosActivos.tsx`   | Tabla paginada y ordenable con filtros de texto libre (código, serial, tipo, marca o modelo) y de estado (disponible, asignado, préstamo); muestra la información más relevante de cada activo (estado, código, tipo, marca, modelo).                                                                                                     |
+| `Catalogo/ModalDetalleActivo.tsx` | Detalle completo del activo: ubicación, usuario asignado, fecha de creación, tipo y número de serie; incluye dos botones, "Asignar usuario" y "Ver seguimiento" (`FichaActivo`), que redirigen directamente a sus páginas.                                                                                                                |
+| `FichaActivo.tsx`                 | Bitácora de todos los movimientos de un activo: buscador de activos individuales, historial completo del equipo (fecha, usuarios, tickets, tickets asociados, estados, responsables, comentarios), filtros por estado y de texto libre, y botón para devolver un equipo que se encuentre en préstamo.                                     |
+| `BuscadorActivo.tsx`              | Buscador de activos compartido, listo para reutilizar; se usa en `NuevoTicketForm`, `FichaActivo` y `ModalAsignarActivo`. Limita los resultados a 10 activos (`PAGE_SIZE`) para no saturar y, en tickets, admite `isMulti` para seleccionar varios activos.                                                                               |
+| `ModalAltaActivo.tsx`             | Formulario completo de registro de un nuevo activo: ubicación, fecha de ingreso, código, número de serie, tipo, marca y modelo.                                                                                                                                                                                                           |
+| `ModalAsignarActivo.tsx`          | Formulario simplificado para asignar un activo (seleccionar usuario y ubicación), cambiar su estado o generar un préstamo (solo seleccionar usuario). Usa `BuscadorActivo` para elegir el activo o se abre desde `ModalDetalleActivo`; genera automáticamente el movimiento en `FichaActivo` y el cambio de estado en `CatalogosActivos`. |
+
+## Funciones y constantes clave
+
+### Catalogo/CatalogosActivos.tsx
+
+- Hook de Funcionalidades: `useActivosTI` (`Funcionalidades/inventario/useActivosTI`), que trae la lista de activos ya filtrada y paginada desde el servidor (`activos`, `loading`, `error`, `search`, `estadoFiltro`, `pageIndex`, `pageSize`, `total`, `hasNext`, `nextPage`, `prevPage`, `loadAll`); el repositorio `activosTI` se obtiene con `useRepositories`.
+- Estado local: `activoAsignar` (activo que se va a asignar), `activoFicha` (activo cuya bitácora se abre) y `activoDetalle` (activo que se ve en el modal de detalle); según cuál tenga valor, se renderiza `ModalAsignarActivo`, `FichaActivo` o `ModalDetalleActivo` en lugar de la tabla.
+- Handlers: `handleCerrarAsignar` (cierra el formulario de asignación sin guardar) y `handleAsignado` (cierra el formulario y llama `loadAll()` para refrescar la tabla con el nuevo estado del activo).
+- Valores calculados: `totalPages`, `rangeStart` y `rangeEnd` para mostrar "x–y de z" en el pie de la tabla.
+- Constantes UI: tamaños de página `PAGE_SIZE = [10, 20, 50, 100]`, opciones de estado `ESTADOS_ACTIVO` (`Models/ActivosTIMovimientos`) y `colorEstadoActivo` (`Funcionalidades/inventario/utils/ActivosColors`) para pintar el badge de estado.
+
+### Catalogo/ModalDetalleActivo.tsx
+
+- Es un "dumb component": recibe el activo y los callbacks por props y no consume hooks de Funcionalidades.
+- Usa `UBICACIONES_ACTIVO` y `ESTADOS_ACTIVO` para traducir los valores guardados a etiquetas legibles, `colorEstadoActivo` para el color del estado y `toISODateFlex` (`utils/Date`) para formatear la fecha de creación.
+
+### FichaActivo.tsx
+
+- Hooks de Funcionalidades: `useActivoMovimientos` (`Funcionalidades/inventario/useActivoMovimientos`) carga el historial de movimientos del activo con búsqueda, filtro por tipo de evento (`tipoEventoFiltro`), paginación y ordenamiento (`sorts`/`toggleSort`); su `loadAll` se renombra como `recargarMovimientos`. `useActivoTicket` (`Funcionalidades/inventario/useActivoTickets`) trae las incidencias (tickets asociados al activo). `useActivoPrestamo` (`Funcionalidades/inventario/useActivoPrestamo`) expone `devolverPrestamoActivo` para registrar la devolución.
+- Servicios: `useRepositories` (`movimientosTI`, `activotickets`, `activosTI`) y `useGraphServices` (servicio `prestamos` de SharePoint).
+- Estado local: `elegido` (activo escogido en el buscador cuando la ficha se abre sin activo), `activo` (activo mostrado, se actualiza tras una devolución), `prestamosActivo` (historial de préstamos del equipo) y los estados de la devolución: `devolviendo` (muestra el formulario), `buenEstado`, `comentarioDevolucion`, `guardandoDevolucion` y `errorDevolucion`.
+- Efectos: al cambiar `activoId` carga las incidencias con `loadActivoTicket`; también carga los préstamos desde Graph filtrando por `Id_dispositivo`.
+- Valores derivados: `prestamoActual` (el préstamo que coincide con `activo.prestamo_activo_id`) y `puedeDevolver` (solo si el activo está `en_prestamo` y tiene un préstamo vigente).
+- Handlers: `cancelarDevolucion` (cierra y limpia el formulario de devolución) y `confirmarDevolucion` (llama `devolverPrestamoActivo` y vuelve a consultar el activo con `getActivoById` para mostrar su nuevo estado).
+
+### BuscadorActivo.tsx
+
+- Servicios: `useRepositories` (`activosTI`); el select es `AsyncSelect` de `react-select/async`, que busca mientras el usuario escribe.
+- Función clave: `buscarActivos` (memoizada con `useCallback`) consulta `activosTI.loadActivos` con el texto escrito y devuelve las opciones; si falla, guarda el mensaje en `error` y lo muestra como "sin opciones".
+- Estado local: `error` (mensaje de error de la última búsqueda).
+- Constantes: `PAGE_SIZE = 10` para limitar los resultados y no saturar la lista.
+- Props: `SimpleProps` para seleccionar un solo activo (usado en `ModalAsignarActivo` y `FichaActivo`) y `MultiProps` (`isMulti`) para seleccionar varios (usado en `NuevoTicketForm`).
+
+### ModalAltaActivo.tsx
+
+- Hook de Funcionalidades: `useActivosTI`, del que solo usa la parte de formulario (`form`, `formErrors`, `error`, `loading`, `setField`, `saveActivo`, `resetForm`).
+- Handler: `handleSubmit` evita el envío por defecto y llama `saveActivo()`; si guarda bien, el hook deja el formulario vacío para registrar otro activo.
+- Constantes UI: `UBICACIONES_ACTIVO` para el select de ubicación.
+- El componente exportado se llama `ModalAltaActivos` (en plural), aunque el archivo está en singular.
+
+### ModalAsignarActivo.tsx
+
+- Exporta `ModalAsignarActivo`, que internamente renderiza `AsignarActivoForm` (el formulario real).
+- Hooks de Funcionalidades: `useActivoMovimientos` (`form`, `setField`, `saveMovimiento`) para registrar el movimiento en la bitácora; `useWorkers({ onlyEnabled: true })` y `useFranquicias` para las listas de usuarios destino; `usePrestamos` (`Funcionalidades/loans/prestamos`) para crear el préstamo (ticket + registro en la lista de préstamos + correo), el mismo hook que usaba la antigua página de Préstamos, hoy comentada en el menú y en desuso; y `useActivoPrestamo` (`iniciarPrestamoActivo`) para marcar el activo como prestado.
+- Servicios: `useAuth` (cuenta logueada, que queda como responsable) y `useGraphServices` (servicio de franquicias).
+- Estado local: `elegido` (activo escogido en el buscador), `errorActivo` (mensaje de error del formulario), `responsable`, `usuarioDestino`, `tipoMovimiento` (`"asignacion"` por defecto o `"prestamo"`) y `guardando`.
+- Valores derivados: `esPrestamo` (el usuario eligió préstamo), `esReasignacion` (el activo ya estaba asignado, cambia el título a "Reasignar activo") y `enPrestamo` (el activo está prestado y no se puede mover).
+- `useMemo`: `listaUsuariosDestino` une empleados y franquicias, quita duplicados por correo y los ordena alfabéticamente.
+- Efectos: al cambiar el activo precarga en el formulario la ubicación, el estado anterior, el usuario de origen e `Id_dispositivo`; al tener la cuenta logueada llena los datos del responsable.
+- Handlers: `handleSubmit` bloquea el envío si el activo está en préstamo, deriva a `registrarPrestamo` si es un préstamo y, si no, guarda el movimiento (`saveMovimiento`) y actualiza el activo (`updateActivo`) solo con lo que cambió (estado, ubicación o usuario). `registrarPrestamo` crea el préstamo, actualiza el activo y envía la notificación por correo.
+
+## Flujo del módulo
+
+1. El usuario entra desde el menú "Activos" (`App.tsx`), que tiene cuatro opciones: "Catálogo de activos" (`CatalogosActivos`), "Nuevo Activo" (`ModalAltaActivos`), "Asignación" (`ModalAsignarActivo`) y "Ficha de seguimiento" (`FichaActivo`).
+2. El registro de un nuevo activo se hace en `ModalAltaActivos`: se llena la información del equipo y `saveActivo()` lo guarda; el formulario queda limpio para otro registro y el activo aparece en el catálogo.
+3. En `CatalogosActivos` el usuario filtra por texto libre o por estado y pagina la tabla (server-side vía `useActivosTI`).
+4. Al hacer click en "Ver detalle" de un activo se llena `activoDetalle` y se abre `ModalDetalleActivo` como overlay sobre la tabla (se cierra con el botón o haciendo click afuera).
+5. Desde el detalle hay dos botones: "Asignar usuario" (`onAsignar`) llena `activoAsignar` y el catálogo renderiza `ModalAsignarActivo` en lugar de la tabla; "Ver seguimiento" (`onVerSeguimiento`) llena `activoFicha` y el catálogo renderiza `FichaActivo`.
+6. En `ModalAsignarActivo` el usuario elige el usuario destino, la ubicación o el nuevo estado, o marca el movimiento como préstamo. Al enviar, `handleSubmit`: bloquea el envío si el activo ya está en préstamo; si es préstamo, usa `registrarPrestamo` (crea el ticket y el préstamo, marca el activo como prestado y envía el correo); si no, guarda el movimiento en la bitácora (`saveMovimiento`) y actualiza el activo (`updateActivo`) con lo que cambió.
+7. Al guardar, `onSaved` llama a `handleAsignado` en `CatalogosActivos`, que cierra el formulario y ejecuta `loadAll()` para refrescar la tabla con el nuevo estado del activo.
+8. En `FichaActivo` el usuario ve el historial de movimientos, las incidencias (tickets asociados) y los préstamos del equipo. Si el activo está `en_prestamo`, puede devolverlo: `confirmarDevolucion` llama a `devolverPrestamoActivo` y vuelve a consultar el activo (`getActivoById`) para mostrar su nuevo estado.
+9. Cuando "Asignación" o "Ficha de seguimiento" se abren desde el menú (sin activo), primero muestran `BuscadorActivo` para escoger el equipo; al elegirlo se muestra el formulario o la ficha de ese activo.
+10. Desde Tickets, `NuevoTicketForm` usa `BuscadorActivo` con `isMulti` para asociar uno o varios activos al ticket; esos tickets aparecen después como incidencias en `FichaActivo`.
+
+Navegación entre componentes: props y estado local, sin rutas ni Context de UI. `CatalogosActivos` decide qué pantalla mostrar según cuál de `activoAsignar`, `activoFicha` o `activoDetalle` tenga valor, y los hijos avisan con callbacks (`onClose`, `onSaved`, `onAsignar`, `onVerSeguimiento`). `ModalAsignarActivo` usa `key={actual?.id}` para reiniciar el formulario cada vez que cambia el activo elegido. Los únicos contextos usados son de infraestructura (`RepositoriesContext`, `GraphServicesContext`, `AuthContext`).
+
+## Dependencias
+
+| Componente             | Funcionalidades / Models                                                                                                                                                                                                                                                                                                                                              | Librerías externas   |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| CatalogosActivos.tsx   | `Funcionalidades/inventario/useActivosTI`, `Funcionalidades/inventario/utils/ActivosColors`, `Models/ActivoTI`, `Models/ActivosTIMovimientos`, `repositories/repositoriesContext`                                                                                                                                                                                     | React                |
+| ModalDetalleActivo.tsx | `Funcionalidades/inventario/utils/ActivosColors`, `Models/ActivoTI`, `Models/ActivosTIMovimientos`, `utils/Date`                                                                                                                                                                                                                                                      | —                    |
+| FichaActivo.tsx        | `Funcionalidades/inventario/useActivoMovimientos`, `Funcionalidades/inventario/useActivoTickets`, `Funcionalidades/inventario/useActivoPrestamo`, `Funcionalidades/inventario/utils/ActivosColors`, `Models/ActivoTI`, `Models/ActivosTIMovimientos`, `Models/prestamos`, `repositories/repositoriesContext`, `graph/GrapServicesContext`, `utils/Date`               | `lucide-react`       |
+| BuscadorActivo.tsx     | `Models/ActivoTI`, `repositories/repositoriesContext`                                                                                                                                                                                                                                                                                                                 | `react-select/async` |
+| ModalAltaActivo.tsx    | `Funcionalidades/inventario/useActivosTI`, `Models/ActivoTI`, `repositories/repositoriesContext`                                                                                                                                                                                                                                                                      | —                    |
+| ModalAsignarActivo.tsx | `Funcionalidades/inventario/useActivoMovimientos`, `Funcionalidades/inventario/useActivoPrestamo`, `Funcionalidades/access/Workers`, `Funcionalidades/access/Franquicias`, `Funcionalidades/loans/prestamos`, `Models/ActivosTIMovimientos`, `Models/Commons`, `Models/Usuarios`, `repositories/repositoriesContext`, `graph/GrapServicesContext`, `auth/authContext` | `react-select`       |
+| Común                  | `BuscadorActivo` (reutilizado en `FichaActivo`, `ModalAsignarActivo` y `NuevoTicketForm`), `colorEstadoActivo`, `ESTADOS_ACTIVO`, `UBICACIONES_ACTIVO`                                                                                                                                                                                                                | —                    |
+
+## Oportunidades de mejora
+
+- **Decisiones tomadas con datos viejos**: `ModalAsignarActivo` decide si el activo está en préstamo (`enPrestamo`) o ya asignado (`esReasignacion`) con el objeto `activo` que se cargó al abrir la tabla, no con su estado real al momento de guardar. Si dos técnicos abren el mismo equipo al tiempo, ambos pueden asignarlo o prestarlo, y el último que guarda "gana" sin aviso. Antes de guardar se debería volver a consultar el activo (`getActivoById`) o validar el estado en la base de datos.
+- **La ficha no se refresca completa después de devolver**: `confirmarDevolucion` (`FichaActivo.tsx`) recarga el activo y los movimientos, pero no la lista de préstamos (`prestamosActivo`), que solo se carga al abrir la ficha. Después de devolver un equipo, el historial de préstamos sigue mostrando el préstamo como abierto hasta que el usuario sale y vuelve a entrar.
+- **Lógica de negocio dentro del componente**: `handleSubmit` de `ModalAsignarActivo.tsx` decide qué campos del activo cambiar (estado, ubicación, usuario, limpiarlo si queda disponible) y llama directo a `activosTI.updateActivo`. Esa regla no se puede reutilizar ni probar sin montar el formulario. Además, el objeto que se envía repite la condición `tieneDestino` dos veces, señal de que la lógica creció a base de parches. Debería vivir en `useActivoMovimientos` o en un hook nuevo de `Funcionalidades/inventario`, como ya pasa con `saveActivo` en el alta.
+- **Errores que el usuario no ve**: en `FichaActivo.tsx`, si falla la carga del historial de préstamos, y en `ModalAsignarActivo.tsx`, si falla el correo de aviso del préstamo, solo se escribe un `console.error`. El usuario ve la pantalla como si todo estuviera bien (por ejemplo, un historial de préstamos vacío) sin saber que hubo un error. Sería mejor mostrar un aviso (`react-hot-toast`, que ya se usa en tickets).
+- **Componentes grandes con muchas responsabilidades**: `FichaActivo.tsx` (≈525 líneas) mezcla buscador, historial de movimientos, incidencias, préstamos y el formulario de devolución; `ModalAsignarActivo.tsx` (≈500 líneas) mezcla asignación, reasignación, cambio de estado y préstamo. Separar la devolución en un `<DevolucionActivo/>` y el préstamo en su propio hook haría cada archivo más fácil de leer y probar.
+- **Detalles menores de orden**: `ModalAltaActivo.tsx` y `ModalAsignarActivo.tsx` se llaman "Modal" pero son páginas completas; el archivo `ModalAltaActivo.tsx` exporta `ModalAltaActivos` (en plural); el label `" Nuevo Activo"` tiene un espacio al inicio; hay colores fijos (`#dc2626`, varios en `FichaActivo.css`) en lugar de las variables de `index.css`; y el `useEffect` que precarga el formulario de asignación no declara `setField`/`setPrestamoField` en sus dependencias.
diff --git a/docs/components-tickets.md b/docs/components-tickets.md
index d7b9c26..f282757 100644
--- a/docs/components-tickets.md
+++ b/docs/components-tickets.md
@@ -1,36 +1,39 @@
 # Componentes de Tickets
 
 ## Descripción general
+
 Este grupo cubre la lista principal de tickets (`Tickets.tsx`), el detalle completo de un ticket (`DetallesTickets/*`) con sus modales de acción (reasignar, recategorizar, asignar observador, cambiar fuente), el panel de mensajes/comentarios con menciones (`Modals/Messages/*`), la gestión de tickets relacionados (padre/hijo/masiva), y los formularios de creación de tickets (individual, de usuario final y masiva por Excel). En conjunto forman el flujo completo: crear ticket → listar/buscar → abrir detalle → actuar sobre el ticket → conversar con los involucrados.
 
 ## Archivos
-| Archivo | Qué renderiza/hace |
-|---|---|
-| `Tickets.tsx` | Tabla paginada y ordenable de tickets con filtros (búsqueda, estado, fuente, rango de fechas); al seleccionar una fila muestra `CaseDetail` en lugar de la tabla. |
-| `CaseAttachments.tsx` | Lista de adjuntos del ticket y visor inline (imagen, PDF/texto en iframe, video, audio) o enlace de descarga si no hay preview soportado. |
-| `CaseHeader.tsx` | Encabezado del detalle: título "Caso – ID", badge de estado y botón "Volver". |
-| `CaseInfoGrid.tsx` | Grid de datos del ticket (fechas, fuente, categoría, ANS, solicitante/observador/resolutor, título, descripción HTML); expone botones clicables para abrir modales cuando el rol lo permite. |
-| `DetallesTickets.helpers.ts` | Funciones puras: `hasRecatRole`, `getPreviewKind` (detección de tipo de archivo por extensión), `openAttachmentDownload`. |
-| `DetallesTickets.tsx` (`CaseDetail`) | Orquestador del detalle de ticket: compone header, info grid, adjuntos, tickets relacionados, seguimiento/historial, botones de acción y todos los modales. |
-| `ModalShell.tsx` | Contenedor genérico de modal (overlay + card + botón cerrar) reutilizado por los modales de acción. |
-| `Modals/ChangeFuente.tsx` (`CambiarFuente`) | Formulario para cambiar la "Fuente solicitante" del ticket (select de 4 opciones) y registrar un log de seguimiento. |
-| `Modals/Messages/CommentComposer.tsx` | Editor de comentarios basado en Tiptap con soporte de menciones `@usuario` y envío con Ctrl+Enter. |
-| `Modals/Messages/CommentText.tsx` | Renderiza el texto de un comentario resolviendo los tokens `@[id]` a "chips" con el nombre corto del usuario mencionado. |
-| `Modals/Messages/Mensajes.tsx` (`MensajesModal`) | Modal completo de comentarios del ticket: header, panel de participantes, lista de comentarios (con borrado) y composer; controla quién puede comentar. |
-| `Modals/Messages/MentionList.tsx` | Lista flotante de sugerencias de menciones agrupadas por departamento, navegable con teclado (usada por Tiptap `Suggestion`). |
-| `Modals/Messages/ParticipantPanel.tsx` (`ParticipantsPanel`) | Fila de avatares de "quienes participan en la conversación" (solicitante, resolutor, mencionados) con tooltip al pasar el mouse. |
-| `Modals/Observador.tsx` (`AsignarObservador`) | Formulario para asignar un observador al ticket, combinando opciones de empleados y franquicias en un `react-select`. |
-| `Modals/Reasignar.tsx` | Formulario para reasignar el ticket a otro resolutor, con nota obligatoria (contador de caracteres). |
-| `Modals/Recategorizar.tsx` | Formulario para cambiar Categoría/Subcategoría/Artículo del ticket vía un único `Select` de árbol combinado, y registrar el log correspondiente. |
-| `TicketsRelacionados/Relacionados.tsx` (`TicketsAsociados`) | Panel de "Tickets Asociados": muestra ticket padre y tickets hijos (con expandir/colapsar) y permite abrir el relacionador inline. |
-| `TicketsRelacionados/RelacionarTickets/Relacionador.tsx` (`RelacionadorInline`) | Formulario inline para relacionar el ticket actual como padre/hijo de otro, o cargar una relación masiva vía Excel. |
-| `NuevoTicket/NuevoTicketForm.tsx` | Formulario completo de creación de ticket (para agentes/técnicos): fuente, asunto, solicitante, resolutor (con balanceo de carga), descripción rich-text, categoría, adjuntos; incluye alternancia a modo "Masivo". |
-| `NuevoTicketUsuario/NuevoTicketFormUsuario.tsx` | Formulario simplificado de creación de ticket para usuario final (solo asunto, descripción y adjuntos). |
-| `MasiveNonFather/masiva.tsx` (`RelacionadorMasiva`) | Carga masiva de tickets desde una plantilla Excel, con descarga de plantilla y validación de tamaño de archivo. |
+
+| Archivo                                                                         | Qué renderiza/hace                                                                                                                                                                                                  |
+| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tickets.tsx`                                                                   | Tabla paginada y ordenable de tickets con filtros (búsqueda, estado, fuente, rango de fechas); al seleccionar una fila muestra `CaseDetail` en lugar de la tabla.                                                   |
+| `CaseAttachments.tsx`                                                           | Lista de adjuntos del ticket y visor inline (imagen, PDF/texto en iframe, video, audio) o enlace de descarga si no hay preview soportado.                                                                           |
+| `CaseHeader.tsx`                                                                | Encabezado del detalle: título "Caso – ID", badge de estado y botón "Volver".                                                                                                                                       |
+| `CaseInfoGrid.tsx`                                                              | Grid de datos del ticket (fechas, fuente, categoría, ANS, solicitante/observador/resolutor, título, descripción HTML); expone botones clicables para abrir modales cuando el rol lo permite.                        |
+| `DetallesTickets.helpers.ts`                                                    | Funciones puras: `hasRecatRole`, `getPreviewKind` (detección de tipo de archivo por extensión), `openAttachmentDownload`.                                                                                           |
+| `DetallesTickets.tsx` (`CaseDetail`)                                            | Orquestador del detalle de ticket: compone header, info grid, adjuntos, tickets relacionados, seguimiento/historial, botones de acción y todos los modales.                                                         |
+| `ModalShell.tsx`                                                                | Contenedor genérico de modal (overlay + card + botón cerrar) reutilizado por los modales de acción.                                                                                                                 |
+| `Modals/ChangeFuente.tsx` (`CambiarFuente`)                                     | Formulario para cambiar la "Fuente solicitante" del ticket (select de 4 opciones) y registrar un log de seguimiento.                                                                                                |
+| `Modals/Messages/CommentComposer.tsx`                                           | Editor de comentarios basado en Tiptap con soporte de menciones `@usuario` y envío con Ctrl+Enter.                                                                                                                  |
+| `Modals/Messages/CommentText.tsx`                                               | Renderiza el texto de un comentario resolviendo los tokens `@[id]` a "chips" con el nombre corto del usuario mencionado.                                                                                            |
+| `Modals/Messages/Mensajes.tsx` (`MensajesModal`)                                | Modal completo de comentarios del ticket: header, panel de participantes, lista de comentarios (con borrado) y composer; controla quién puede comentar.                                                             |
+| `Modals/Messages/MentionList.tsx`                                               | Lista flotante de sugerencias de menciones agrupadas por departamento, navegable con teclado (usada por Tiptap `Suggestion`).                                                                                       |
+| `Modals/Messages/ParticipantPanel.tsx` (`ParticipantsPanel`)                    | Fila de avatares de "quienes participan en la conversación" (solicitante, resolutor, mencionados) con tooltip al pasar el mouse.                                                                                    |
+| `Modals/Observador.tsx` (`AsignarObservador`)                                   | Formulario para asignar un observador al ticket, combinando opciones de empleados y franquicias en un `react-select`.                                                                                               |
+| `Modals/Reasignar.tsx`                                                          | Formulario para reasignar el ticket a otro resolutor, con nota obligatoria (contador de caracteres).                                                                                                                |
+| `Modals/Recategorizar.tsx`                                                      | Formulario para cambiar Categoría/Subcategoría/Artículo del ticket vía un único `Select` de árbol combinado, y registrar el log correspondiente.                                                                    |
+| `TicketsRelacionados/Relacionados.tsx` (`TicketsAsociados`)                     | Panel de "Tickets Asociados": muestra ticket padre y tickets hijos (con expandir/colapsar) y permite abrir el relacionador inline.                                                                                  |
+| `TicketsRelacionados/RelacionarTickets/Relacionador.tsx` (`RelacionadorInline`) | Formulario inline para relacionar el ticket actual como padre/hijo de otro, o cargar una relación masiva vía Excel.                                                                                                 |
+| `NuevoTicket/NuevoTicketForm.tsx`                                               | Formulario completo de creación de ticket (para agentes/técnicos): fuente, asunto, solicitante, resolutor (con balanceo de carga), descripción rich-text, categoría, adjuntos; incluye alternancia a modo "Masivo". |
+| `NuevoTicketUsuario/NuevoTicketFormUsuario.tsx`                                 | Formulario simplificado de creación de ticket para usuario final (solo asunto, descripción y adjuntos).                                                                                                             |
+| `MasiveNonFather/masiva.tsx` (`RelacionadorMasiva`)                             | Carga masiva de tickets desde una plantilla Excel, con descarga de plantilla y validación de tamaño de archivo.                                                                                                     |
 
 ## Funciones y constantes clave
 
 ### Tickets.tsx
+
 - Hooks de Funcionalidades: `useUserRole` (`Funcionalidades/auth/Usuarios`), `useTickets` (`Funcionalidades/Tickets/hooks/useTickets`, que compone `useTicketsLists` + `useTicketForm` + `useTicketActions`), `calcularColorEstado` (`Funcionalidades/Tickets/utils/ticketsColors`).
 - Estado local: `ticketSeleccionado` (ticket abierto en detalle).
 - Efecto: al cambiar `rows` (refetch de la página), si hay un ticket seleccionado se refresca su versión remota vía `updateSelectedTicket`.
@@ -39,10 +42,12 @@ Este grupo cubre la lista principal de tickets (`Tickets.tsx`), el detalle compl
 - Ordenamiento por columnas (`toggleSort`) con indicador visual y soporte de multi-orden con Shift+click.
 
 ### CaseAttachments.tsx / CaseHeader.tsx / CaseInfoGrid.tsx
+
 - Son "dumb components": reciben todo por props (`rows`, `selected`, `onSelect`, `ticket`, `onVolver`, `canRecategorizar`, `onOpenCategoria/Observador/Resolutor/Fuente`) y no consumen hooks de Funcionalidades directamente.
 - `CaseInfoGrid` usa el subcomponente interno `Row` y determina condicionalmente si un campo es "clicable" (botón) según `canRecategorizar`.
 
 ### DetallesTickets.tsx (`CaseDetail`)
+
 - Hook de Funcionalidades: `useTicketsAttachments` (`Funcionalidades/Tickets/AttachmentsTickets`).
 - Estado local: `selected` (ticket activo, puede diferir del prop tras navegar a un relacionado), `selectedAttachment`, `showSeg`, `showBotton`, `showMessages`, `activeModal` (`"recategorizar" | "reasignar" | "observador" | "fuente" | null`).
 - Efectos: reset de paneles al cambiar `ticket.ID`; sincronización de `selected` con el prop `ticket`; carga de adjuntos (`attachment_type: "Creacion"`) al cambiar de ticket; selección automática del primer adjunto previsualizable cuando cambian `rows`.
@@ -50,12 +55,14 @@ Este grupo cubre la lista principal de tickets (`Tickets.tsx`), el detalle compl
 - Es el punto central que decide qué modal mostrar (`activeModal`) y pasa `ticket`/`onDone` a cada uno.
 
 ### Modals/ChangeFuente.tsx, Reasignar.tsx, Recategorizar.tsx, Observador.tsx
+
 - Cada uno sigue el mismo patrón: hook de `Funcionalidades/Tickets/*` (`useCambiarFuenteSolicitante`, `useReasignarTicket`, `useRecategorizarTicket`, `useAsignarObservador`) que expone `{state, errors, submitting, setField, handle...}`.
 - Todos usan `react-select` con filtro insensible a acentos (`norm` de `utils/Commons`) y componente `Option` personalizado casi idéntico (duplicado) para mostrar email/jobTitle/fuente en Reasignar y Observador.
 - `ChangeFuente` y `Recategorizar` registran manualmente un log de seguimiento (`logs.createLog(...)`) después de una recategorización exitosa — lógica de negocio (armar el mensaje del log) ubicada en el componente, no en el hook.
 - Constantes UI: opciones fijas de "fuente" (`Aplicativo`, `Correo`, `Disponibilidad`, `Teams` en `ChangeFuente`; agrega `Presencial`, `WhatsApp` en `NuevoTicketForm`), `maxLen = 500` para la nota de reasignación.
 
 ### Modals/Messages (Mensajes, CommentComposer, CommentText, MentionList, ParticipantPanel)
+
 - `MensajesModal` combina hooks de `Funcionalidades/comments/hooks/useSolviComments` (`useSolviComments`, `useCreateSolviComment`, `useDeleteSolviComment`) y de `Models/Supabase` (`useUsers`, `useCurrentUser`, `useSolviParticipants`).
 - Estado derivado (no hooks): `isClosed`, `isRequester`, `isResolver`, `isParticipant`, `canComment` — reglas de permisos de comentario calculadas inline en el componente.
 - `extraPeople` (useMemo): intenta emparejar solicitante/resolutor de SOLVI con usuarios de PRISMA por correo.
@@ -66,12 +73,14 @@ Este grupo cubre la lista principal de tickets (`Tickets.tsx`), el detalle compl
 - `CommentText` parsea el texto con regex `/@\[(\d+)\]/g` para reemplazar ids de mención por chips con nombre.
 
 ### TicketsRelacionados/Relacionados.tsx y Relacionador.tsx
+
 - `TicketsAsociados` usa `useUserRole` y `useTicketsRelacionados` (`Funcionalidades/Tickets/TicketsRelaciones`).
 - Estado local: `showRel`, `loadingOpts`, `shoAll` (mostrar todos los hijos vs. los primeros 2).
 - `RelacionadorInline` reutiliza el hook completo `useTickets` solo para acceder a `toTicketOptions`, `state`, `setField`, `handleCreateRelation`, `uploadMasiva` — trae mucho más de lo que necesita.
 - Estado local: `mode` (`"padre" | "hijo" | "masiva"`), `tickets` (opciones cargadas de forma asíncrona en un efecto con guarda `alive`).
 
 ### NuevoTicketForm.tsx / NuevoTicketFormUsuario.tsx / masiva.tsx
+
 - `NuevoTicketForm` combina `useNuevoTicketForm`, `useFranquicias`, `useWorkers`, `useUsuarios`, `useUserRole` y arma tres listas combinadas: `combinedOptions` (empleados+franquicias), `treeOptions` (categoría>subcategoría>artículo) y `opcionesFuentes` (constante embebida con 5 fuentes).
 - Estado local: `masiva` (alterna a `RelacionadorMasiva`), `categoriasProps` (ids numéricos de categoría/sub/artículo, paralelos a los títulos guardados en `state`).
 - Handler de resolutor con lógica de negocio embebida: si `opt.jobTitle === "Tecnico"`, llama `balanceCharge` y bloquea la selección con un `toast.error` si el resolutor tiene demasiados casos — excepto un correo hardcodeado (`mamartinez@estudiodemoda.com.co`) que se salta la validación. Contiene además un `console.table(opt)` de depuración.
@@ -79,6 +88,7 @@ Este grupo cubre la lista principal de tickets (`Tickets.tsx`), el detalle compl
 - `RelacionadorMasiva` reutiliza `useTickets` completo solo por `state`, `setField`, `uploadMasiva`; genera la descarga de la plantilla creando un `<a>` temporal.
 
 ## Flujo del módulo
+
 1. El usuario entra a `Tickets.tsx`, filtra/busca/pagina la tabla de tickets (server-side vía `useTicketsLists`).
 2. Al hacer click (o Enter/Espacio) en una fila, `ticketSeleccionado` se setea y se renderiza `CaseDetail` (`DetallesTickets.tsx`) en lugar de la tabla.
 3. `CaseDetail` muestra `CaseHeader` + `CaseInfoGrid` (con datos y botones condicionados por rol) + `CaseAttachments` + `TicketsAsociados`.
@@ -93,23 +103,24 @@ Navegación entre componentes: mayormente props drilling explícito (`ticket`, `
 
 ## Dependencias
 
-| Componente | Funcionalidades / Models | Librerías externas |
-|---|---|---|
-| Tickets.tsx | `Funcionalidades/auth/Usuarios` (useUserRole), `Funcionalidades/Tickets/hooks/useTickets`, `Funcionalidades/Tickets/utils/ticketsColors`, `Models/Tickets`, `auth/authContext`, `graph/GrapServicesContext`, `repositories/repositoriesContext` | React |
-| CaseAttachments/Header/InfoGrid | `Models/Tickets`, `Funcionalidades/Tickets/AttachmentsTickets` (tipo) | — |
-| DetallesTickets.tsx | `Funcionalidades/Tickets/AttachmentsTickets` (useTicketsAttachments) | — |
-| ChangeFuente | `Funcionalidades/Tickets/CambiarFuente`, `repositories/repositoriesContext`, `auth/authContext` | `react-select` |
-| Reasignar | `Funcionalidades/Tickets/Reasignar`, `Funcionalidades/auth/Usuarios` (useUsuarios), `graph/GrapServicesContext` | `react-select` |
-| Recategorizar | `Funcionalidades/Tickets/Recategorizar`, `auth/authContext` | `react-select` |
-| Observador | `Funcionalidades/Tickets/Observador`, `Funcionalidades/access/Workers`, `Funcionalidades/access/Franquicias` | `react-select` |
-| Mensajes.tsx / CommentComposer / MentionList / ParticipantPanel | `Funcionalidades/comments/hooks/useSolviComments`, `Models/Supabase/useUsers`, `Models/Supabase/useCurrentUser`, `Models/Supabase/useSolviParticipants`, `repositories/ParticipantsRepository/MessagesRepository`, `utils/mentions` | `@tiptap/react`, `@tiptap/extension-mention`, `@tiptap/suggestion`, `@tiptap/starter-kit`, `@tiptap/extensions`, `lucide-react` |
-| Relacionados.tsx / Relacionador.tsx | `Funcionalidades/Tickets/TicketsRelaciones`, `Funcionalidades/Tickets/hooks/useTickets`, `Funcionalidades/auth/Usuarios` | `react-select` |
-| NuevoTicketForm.tsx | `Funcionalidades/Tickets/NuevoTicket`, `Funcionalidades/access/Franquicias`, `Funcionalidades/access/Workers`, `Funcionalidades/auth/Usuarios` | `react-select`, `react-hot-toast` |
-| NuevoTicketFormUsuario.tsx | `Funcionalidades/Tickets/NuevoTicket` (useNuevoUsuarioTicketForm) | — |
-| MasiveNonFather/masiva.tsx | `Funcionalidades/Tickets/hooks/useTickets` | — |
-| Común a formularios | `RichTextBase64` (componente propio, editor rich text con imágenes base64), `Trunc` (`components/Trunc/trunc`), `HtmlContent` (`components/Renderizador/Renderizador`) | — |
+| Componente                                                      | Funcionalidades / Models                                                                                                                                                                                                                        | Librerías externas                                                                                                              |
+| --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| Tickets.tsx                                                     | `Funcionalidades/auth/Usuarios` (useUserRole), `Funcionalidades/Tickets/hooks/useTickets`, `Funcionalidades/Tickets/utils/ticketsColors`, `Models/Tickets`, `auth/authContext`, `graph/GrapServicesContext`, `repositories/repositoriesContext` | React                                                                                                                           |
+| CaseAttachments/Header/InfoGrid                                 | `Models/Tickets`, `Funcionalidades/Tickets/AttachmentsTickets` (tipo)                                                                                                                                                                           | —                                                                                                                               |
+| DetallesTickets.tsx                                             | `Funcionalidades/Tickets/AttachmentsTickets` (useTicketsAttachments)                                                                                                                                                                            | —                                                                                                                               |
+| ChangeFuente                                                    | `Funcionalidades/Tickets/CambiarFuente`, `repositories/repositoriesContext`, `auth/authContext`                                                                                                                                                 | `react-select`                                                                                                                  |
+| Reasignar                                                       | `Funcionalidades/Tickets/Reasignar`, `Funcionalidades/auth/Usuarios` (useUsuarios), `graph/GrapServicesContext`                                                                                                                                 | `react-select`                                                                                                                  |
+| Recategorizar                                                   | `Funcionalidades/Tickets/Recategorizar`, `auth/authContext`                                                                                                                                                                                     | `react-select`                                                                                                                  |
+| Observador                                                      | `Funcionalidades/Tickets/Observador`, `Funcionalidades/access/Workers`, `Funcionalidades/access/Franquicias`                                                                                                                                    | `react-select`                                                                                                                  |
+| Mensajes.tsx / CommentComposer / MentionList / ParticipantPanel | `Funcionalidades/comments/hooks/useSolviComments`, `Models/Supabase/useUsers`, `Models/Supabase/useCurrentUser`, `Models/Supabase/useSolviParticipants`, `repositories/ParticipantsRepository/MessagesRepository`, `utils/mentions`             | `@tiptap/react`, `@tiptap/extension-mention`, `@tiptap/suggestion`, `@tiptap/starter-kit`, `@tiptap/extensions`, `lucide-react` |
+| Relacionados.tsx / Relacionador.tsx                             | `Funcionalidades/Tickets/TicketsRelaciones`, `Funcionalidades/Tickets/hooks/useTickets`, `Funcionalidades/auth/Usuarios`                                                                                                                        | `react-select`                                                                                                                  |
+| NuevoTicketForm.tsx                                             | `Funcionalidades/Tickets/NuevoTicket`, `Funcionalidades/access/Franquicias`, `Funcionalidades/access/Workers`, `Funcionalidades/auth/Usuarios`                                                                                                  | `react-select`, `react-hot-toast`                                                                                               |
+| NuevoTicketFormUsuario.tsx                                      | `Funcionalidades/Tickets/NuevoTicket` (useNuevoUsuarioTicketForm)                                                                                                                                                                               | —                                                                                                                               |
+| MasiveNonFather/masiva.tsx                                      | `Funcionalidades/Tickets/hooks/useTickets`                                                                                                                                                                                                      | —                                                                                                                               |
+| Común a formularios                                             | `RichTextBase64` (componente propio, editor rich text con imágenes base64), `Trunc` (`components/Trunc/trunc`), `HtmlContent` (`components/Renderizador/Renderizador`)                                                                          | —                                                                                                                               |
 
 ## Oportunidades de mejora
+
 - **Residuo de refactor/copy-paste en rutas y comentarios**: `CommentComposer.tsx`, `CommentText.tsx`, `MentionList.tsx` y `ParticipantPanel.tsx` (en `src/components/DetallesTickets/Modals/Messages/`) empiezan con comentarios de cabecera `// src/features/requests/components/mentions/...`, indicando que fueron copiados de otra estructura de proyecto sin actualizar. Puede confundir a quien navegue el código.
 - **Debug leftovers en producción**: `Mensajes.tsx` línea ~157 tiene `useEffect(() => console.log(comments), [comments])`; `NuevoTicketForm.tsx` línea ~216 tiene `console.table(opt)` dentro del `onChange` del resolutor. Ambos deberían eliminarse.
 - **Lógica de negocio filtrada en componentes**: `ChangeFuente.tsx` y `Recategorizar.tsx` arman manualmente el texto del log de seguimiento (`"El resolutor cambió la fuente solicitante a: " + fuente`) y llaman `logs.createLog(...)` directamente desde el componente en vez de que esto viva dentro de `useCambiarFuenteSolicitante`/`useRecategorizarTicket`. La regla de "correo exento de balanceo de carga" (`mamartinez@estudiodemoda.com.co`) en `NuevoTicketForm.tsx` está hardcodeada en JSX, no en configuración ni en el hook `balanceCharge`.
diff --git a/package-lock.json b/package-lock.json
index d00f898..c7b3840 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,9 +18,11 @@
         "@tiptap/react": "^3.29.2",
         "@tiptap/starter-kit": "^3.29.2",
         "@tiptap/suggestion": "^3.29.2",
+        "change-case": "^5.4.4",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
         "dompurify": "^3.2.7",
+        "lodash-es": "^4.18.1",
         "lucide-react": "^1.28.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
@@ -3065,6 +3067,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/change-case": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz",
+      "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==",
+      "license": "MIT"
+    },
     "node_modules/codepage": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
@@ -4008,6 +4016,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index 68a091d..1dac967 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,11 @@
     "@tiptap/react": "^3.29.2",
     "@tiptap/starter-kit": "^3.29.2",
     "@tiptap/suggestion": "^3.29.2",
+    "change-case": "^5.4.4",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "dompurify": "^3.2.7",
+    "lodash-es": "^4.18.1",
     "lucide-react": "^1.28.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
diff --git a/public/Plantilla Masiva.xlsx b/public/Plantilla Masiva.xlsx
index 73fd1a9..2810bb0 100644
Binary files a/public/Plantilla Masiva.xlsx and b/public/Plantilla Masiva.xlsx differ
diff --git a/src/App.css b/src/App.css
index b0a0134..39fbe79 100644
--- a/src/App.css
+++ b/src/App.css
@@ -147,7 +147,9 @@ html, body{
 .sideItem:hover{ background:var(--sb-hover); }
 .sideItem:active{ transform:translateY(1px); }
 .sideItem--active{ background:var(--sb-pill); outline:2px solid rgba(255,255,255,.08); }
-.sideItem__icon{ width:22px; display:inline-flex; justify-content:center; opacity:.94; }
+.sideItem__icon,
+.sb-icon-wrap{ width:22px; flex-shrink:0; display:inline-flex; justify-content:center; opacity:.94; }
+.sb-icon{ width:22px; height:22px; object-fit:contain; }
 .sideItem__label{ font-size:15px; }
 .caret{ margin-right:6px; opacity:.85; transition:transform .2s ease; }
 .caret.rot{ transform:rotate(90deg); }
diff --git a/src/App.tsx b/src/App.tsx
index b1a3ce0..8f684f0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,10 +10,16 @@ import CrearPlantilla from "./components/NuevaPlantilla/NuevaPlantilla";
 import UsuariosPanel from "./components/Usuarios/Usuarios";
 import AnsAdmin from "./components/Admin/AnsAdmin/AnsAdmin";
 import CajerosPOSForm from "./components/CajerosPOS/CajerosPOS";
+
+import CatalogosActivos from "./components/Inventario/Catalogo/CatalogosActivos";
+
 import type { User } from "./Models/User";
 import { useAuth } from "./auth/authContext";
 import { useUserRole } from "./Funcionalidades/auth/Usuarios";
-import { GraphServicesProvider, useGraphServices } from "./graph/GrapServicesContext";
+import {
+  GraphServicesProvider,
+  useGraphServices,
+} from "./graph/GrapServicesContext";
 import type { UsuariosSPService } from "./Services/Usuarios.Service";
 import HomeIcon from "./assets/home.svg";
 import addIcon from "./assets/add.svg";
@@ -25,30 +31,45 @@ import settingsIcon from "./assets/settings.svg";
 import templateIcon from "./assets/template.svg";
 import WelcomeSolvi from "./components/Welcome/Welcome";
 import DashBoardPage from "./components/Dashboard/DashboardPage";
-import usersIcon from "./assets/users.svg"
-import ActionsIcon from "./assets/actions.svg"
-import siesaIcon from "./assets/siesa.png"
-import storageIcon from "./assets/storage.svg"
-import cajerosIcon from "./assets/cajeros.svg"
+import usersIcon from "./assets/users.svg";
+import ActionsIcon from "./assets/actions.svg";
+import siesaIcon from "./assets/siesa.png";
+import storageIcon from "./assets/storage.svg";
+import cajerosIcon from "./assets/cajeros.svg";
 import { logout } from "./auth/msal";
 import AnnouncementsTable from "./components/TipsTable/TipsTable";
 import { useTheme } from "./Funcionalidades/auth/Theme";
 import TeamsEventForm from "./components/Ausencia/Ausencia";
 import { StoragePage } from "./components/Storage/StoragePage";
-import { PrestamosPage } from "./components/Loans/PretamosPage";
-import loanImage from "./assets/device.svg"
+// import { PrestamosPage } from "./components/Loans/PretamosPage";
+
+import loanImage from "./assets/device.svg";
 import ReportsPage from "./components/Reports/ReportsPage";
 import { useRepositories } from "./repositories/repositoriesContext";
 import type { TicketsRepository } from "./repositories/TicketsRepository/TicketRepository";
 import type { LogRepository } from "./repositories/LogRepository/LogRespository";
 import { useContador } from "./Funcionalidades/timeCounter/hooks/useCounter";
-/* ============================================================
-   Tipos de navegación y contexto de visibilidad
-   ============================================================ */
+import FichaActivo from "./components/Inventario/FichaActivo";
+import { ModalAltaActivos } from "./components/Inventario/ModalAltaActivo";
+import { ModalAsignarActivo } from "./components/Inventario/ModalAsignarActivo";
 
-type RenderCtx = { services?: { Tickets: TicketsRepository; Usuarios: UsuariosSPService; Logs: LogRepository } };
+/* ============================================================
+  Tipos de navegación y contexto de visibilidad
+  ============================================================ */
+
+type RenderCtx = {
+  services?: {
+    Tickets: TicketsRepository;
+    Usuarios: UsuariosSPService;
+    Logs: LogRepository;
+  };
+};
 
-type Services = { Tickets: TicketsRepository; Usuarios: UsuariosSPService; Logs: LogRepository };
+type Services = {
+  Tickets: TicketsRepository;
+  Usuarios: UsuariosSPService;
+  Logs: LogRepository;
+};
 
 export type MenuItem = {
   id: string;
@@ -68,32 +89,186 @@ export type NavContext = {
   flags?: Set<string>;
   hasService?: (k: keyof Services) => boolean;
 };
-  
+
 /* ============================================================
-   Árbol único de navegación con reglas de visibilidad
-   ============================================================ */
+  Árbol único de navegación con reglas de visibilidad
+  ============================================================ */
 
 const NAV: MenuItem[] = [
-  { id: "home", label: "Home", icon: <img src={HomeIcon} alt="" className="sb-icon" />, to: <DashBoardPage />, roles: ["Administrador", "Tecnico", "Listo"], autocollapse: true },
-  { id: "ticketform", label: "Nuevo Ticket", icon: <img src={addIcon} alt="" className="sb-icon" />, to: () => <NuevoTicketForm />, roles: ["Administrador", "Tecnico", "Listo"] },
-  { id: "ticketform_user", label: "Nuevo Ticket", icon: <img src={addIcon} alt="" className="sb-icon" />, to: <NuevoTicketUsuarioForm />, roles: ["Usuario", "Jefe de zona", "Listo"] },
-  { id: "ticketTable", label: "Ver Tickets", icon: <img src={seeTickets} alt="" className="sb-icon" />, to: <TablaTickets />, autocollapse: true },
-  { id: "task", label: "Tareas", icon: <img src={tareasIcon} alt="" className="sb-icon" />, to: <TareasPage />, roles: ["Administrador", "Tecnico", "Listo"], autocollapse: true },
-  { id: "formatos", label: "Formatos", icon: <img src={filesIcon} alt="" className="sb-icon" />, to: <Formatos />, roles: ["Administrador", "Listo"] },
-  { id: "info", label: "Información", icon: <img src={infoIcon} alt="" className="sb-icon" />, to: <InfoPage />, roles: ["Administrador", "Tecnico", "Listo"] },
-  { id: "storage", label: "Almacenamiento", icon: <img src={storageIcon} alt="" className="sb-icon" />, to: <StoragePage />, roles: ["Administrador", "Listo"] },
-  { id: "loan", label: "Prestamos", icon: <img src={loanImage} alt="" className="sb-icon" />, to: <PrestamosPage />, roles: ["Administrador", "Listo", "Tecnico"] },
-  { id: "admin", label: "Administración", icon: <img src={settingsIcon} className="sb-icon" />, roles: ["Administrador", "Tecnico", "Listo"], children: [
-      { id: "plantillas", label: "Plantillas", icon: <img src={templateIcon} className="sb-icon" />, to: <CrearPlantilla />, roles: ["Administrador", "Tecnico", "Listo"] },
-      { id: "usuarios", label: "Usuarios", icon: <img src={usersIcon} className="sb-icon" />, to: <UsuariosPanel />, roles: ["Administrador"] },
-      { id: "ans", label: "ANS", icon: <img src={settingsIcon} className="sb-icon" />, to: <AnsAdmin />, roles: ["Administrador"] },
-      { id: "tips", label: "Tips", icon: <img src={infoIcon} className="sb-icon" />, to: <AnnouncementsTable />, roles: ["Administrador", "Tecnico", "Listo"] },
-      { id: "reports", label: "Reportes", icon: <img src={filesIcon} className="sb-icon" />, to: <ReportsPage />, roles: ["Administrador", "Tecnico", "Listo"] },
+  {
+    id: "home",
+    label: "Home",
+    icon: <img src={HomeIcon} alt="" className="sb-icon" />,
+    to: <DashBoardPage />,
+    roles: ["Administrador", "Tecnico", "Listo"],
+    autocollapse: true,
+  },
+  {
+    id: "ticketform",
+    label: "Nuevo Ticket",
+    icon: <img src={addIcon} alt="" className="sb-icon" />,
+    to: () => <NuevoTicketForm />,
+    roles: ["Administrador", "Tecnico", "Listo"],
+  },
+  {
+    id: "ticketform_user",
+    label: "Nuevo Ticket",
+    icon: <img src={addIcon} alt="" className="sb-icon" />,
+    to: <NuevoTicketUsuarioForm />,
+    roles: ["Usuario", "Jefe de zona", "Listo"],
+  },
+  {
+    id: "ticketTable",
+    label: "Ver Tickets",
+    icon: <img src={seeTickets} alt="" className="sb-icon" />,
+    to: <TablaTickets />,
+    autocollapse: true,
+  },
+  {
+    id: "task",
+    label: "Tareas",
+    icon: <img src={tareasIcon} alt="" className="sb-icon" />,
+    to: <TareasPage />,
+    roles: ["Administrador", "Tecnico", "Listo"],
+    autocollapse: true,
+  },
+  {
+    id: "act",
+    label: "Activos",
+    icon: <img src={loanImage} className="sb-icon" />,
+    roles: ["Administrador", "Tecnico", "Listo"],
+    children: [
+      {
+        id: "catalogoA",
+        label: "Catalogo de activos",
+        icon: <img src={templateIcon} className="sb-icon" />,
+        to: () => <CatalogosActivos />,
+        roles: ["Administrador", "Tecnico", "Listo"],
+      },
+      {
+        id: "Activos",
+        label: " Nuevo Activo",
+        icon: <img src={addIcon} alt="" className="sb-icon" />,
+        to: () => <ModalAltaActivos />,
+        roles: ["Administrador", "Técnico", "Listo"],
+      },
+      {
+        id: "Asignacion",
+        label: "Asignación",
+        icon: <img src={usersIcon} className="sb-icon" />,
+        to: () => <ModalAsignarActivo />,
+        roles: ["Administrador", "Técnico", "Listo"],
+      },
+      {
+        id: "FichaA",
+        label: "Ficha de seguimiento",
+        icon: <img src={filesIcon} className="sb-icon" />,
+        to: () => <FichaActivo />,
+        roles: ["Administrador", "Técnico", "Listo"],
+      },
+    ],
+  },
+  {
+    id: "formatos",
+    label: "Formatos",
+    icon: <img src={filesIcon} alt="" className="sb-icon" />,
+    to: <Formatos />,
+    roles: ["Administrador", "Listo"],
+  },
+  {
+    id: "info",
+    label: "Información",
+    icon: <img src={infoIcon} alt="" className="sb-icon" />,
+    to: <InfoPage />,
+    roles: ["Administrador", "Tecnico", "Listo"],
+  },
+  {
+    id: "storage",
+    label: "Almacenamiento",
+    icon: <img src={storageIcon} alt="" className="sb-icon" />,
+    to: <StoragePage />,
+    roles: ["Administrador", "Listo"],
+  },
+
+  // {
+  //   id: "loan",
+  //   label: "Prestamos",
+  //   icon: <img src={loanImage} alt="" className="sb-icon" />,
+  //   to: <PrestamosPage />,
+  //   roles: ["Administrador", "Listo", "Tecnico"],
+  // },
+  {
+    id: "admin",
+    label: "Administración",
+    icon: <img src={settingsIcon} className="sb-icon" />,
+    roles: ["Administrador", "Tecnico", "Listo"],
+    children: [
+      {
+        id: "plantillas",
+        label: "Plantillas",
+        icon: <img src={templateIcon} className="sb-icon" />,
+        to: <CrearPlantilla />,
+        roles: ["Administrador", "Tecnico", "Listo"],
+      },
+      {
+        id: "usuarios",
+        label: "Usuarios",
+        icon: <img src={usersIcon} className="sb-icon" />,
+        to: <UsuariosPanel />,
+        roles: ["Administrador"],
+      },
+      {
+        id: "ans",
+        label: "ANS",
+        icon: <img src={settingsIcon} className="sb-icon" />,
+        to: <AnsAdmin />,
+        roles: ["Administrador"],
+      },
+      {
+        id: "tips",
+        label: "Tips",
+        icon: <img src={infoIcon} className="sb-icon" />,
+        to: <AnnouncementsTable />,
+        roles: ["Administrador", "Tecnico", "Listo"],
+      },
+      {
+        id: "reports",
+        label: "Reportes",
+        icon: <img src={filesIcon} className="sb-icon" />,
+        to: <ReportsPage />,
+        roles: ["Administrador", "Tecnico", "Listo"],
+      },
     ],
   },
-  {id: "acciones", label: "Acciones", icon: <img src={ActionsIcon} className="sb-icon" />, roles: ["Administrador", "Tecnico", "Jefe de zona", "Listo"], children: [
-      {id: "siesa", label: "Siesa", roles: ["Administrador", "Tecnico", "Jefe de zona", "Listo"], icon: <img src={siesaIcon} className="sb-icon" />, children: [
-          {id: "cajpos", label: "Cajeros POS", icon: <img src={cajerosIcon} className="sb-icon" />, to: (rctx: RenderCtx) => rctx.services ? <CajerosPOSForm services={{ Tickets: rctx.services.Tickets, Logs: rctx.services.Logs }} /> : <div>Cargando servicios…</div>, roles: ["Administrador", "Tecnico", "Jefe de zona", "Listo"],},
+  {
+    id: "acciones",
+    label: "Acciones",
+    icon: <img src={ActionsIcon} className="sb-icon" />,
+    roles: ["Administrador", "Tecnico", "Jefe de zona", "Listo"],
+    children: [
+      {
+        id: "siesa",
+        label: "Siesa",
+        roles: ["Administrador", "Tecnico", "Jefe de zona", "Listo"],
+        icon: <img src={siesaIcon} className="sb-icon" />,
+        children: [
+          {
+            id: "cajpos",
+            label: "Cajeros POS",
+            icon: <img src={cajerosIcon} className="sb-icon" />,
+            to: (rctx: RenderCtx) =>
+              rctx.services ? (
+                <CajerosPOSForm
+                  services={{
+                    Tickets: rctx.services.Tickets,
+                    Logs: rctx.services.Logs,
+                  }}
+                />
+              ) : (
+                <div>Cargando servicios…</div>
+              ),
+            roles: ["Administrador", "Tecnico", "Jefe de zona", "Listo"],
+          },
         ],
       },
     ],
@@ -101,8 +276,8 @@ const NAV: MenuItem[] = [
 ];
 
 /* ============================================================
-   Utilidades de árbol: filtrado, búsqueda y primera hoja
-   ============================================================ */
+  Utilidades de árbol: filtrado, búsqueda y primera hoja
+  ============================================================ */
 
 // Aplica reglas de visibilidad a un nodo
 function isVisible(node: MenuItem, ctx: NavContext): boolean {
@@ -113,7 +288,10 @@ function isVisible(node: MenuItem, ctx: NavContext): boolean {
 }
 
 // Devuelve el árbol filtrado (oculta carpetas sin hijos visibles)
-function filterNavTree(nodes: readonly MenuItem[], ctx: NavContext): MenuItem[] {
+function filterNavTree(
+  nodes: readonly MenuItem[],
+  ctx: NavContext,
+): MenuItem[] {
   return nodes
     .map((n) => {
       const children = n.children ? filterNavTree(n.children, ctx) : undefined;
@@ -127,12 +305,16 @@ function filterNavTree(nodes: readonly MenuItem[], ctx: NavContext): MenuItem[]
 
 // Primer leaf para selección inicial
 function firstLeafId(nodes: readonly MenuItem[]): string {
-  const pick = (n: MenuItem): string => (n.children?.length ? pick(n.children[0]) : n.id);
+  const pick = (n: MenuItem): string =>
+    n.children?.length ? pick(n.children[0]) : n.id;
   return nodes.length ? pick(nodes[0]) : "";
 }
 
 // Busca un ítem por id
-function findById(nodes: readonly MenuItem[], id: string): MenuItem | undefined {
+function findById(
+  nodes: readonly MenuItem[],
+  id: string,
+): MenuItem | undefined {
   for (const n of nodes) {
     if (n.id === id) return n;
     if (n.children) {
@@ -144,11 +326,27 @@ function findById(nodes: readonly MenuItem[], id: string): MenuItem | undefined
 }
 
 /* ============================================================
-   Sidebar con árbol recursivo y apertura de carpetas
-   ============================================================ */
-
-function Sidebar(props: {navs: readonly MenuItem[]; selected: string; onSelect: (k: string) => void; user: User; role: string; collapsed?: boolean; onToggle?: () => void;}) {
-  const { navs, selected, onSelect, user, role, collapsed = false, onToggle } = props;
+  Sidebar con árbol recursivo y apertura de carpetas
+  ============================================================ */
+
+function Sidebar(props: {
+  navs: readonly MenuItem[];
+  selected: string;
+  onSelect: (k: string) => void;
+  user: User;
+  role: string;
+  collapsed?: boolean;
+  onToggle?: () => void;
+}) {
+  const {
+    navs,
+    selected,
+    onSelect,
+    user,
+    role,
+    collapsed = false,
+    onToggle,
+  } = props;
   const [open, setOpen] = React.useState<Record<string, boolean>>({});
 
   React.useEffect(() => {
@@ -156,7 +354,8 @@ function Sidebar(props: {navs: readonly MenuItem[]; selected: string; onSelect:
     const walk = (nodes: readonly MenuItem[], path: string[] = []) => {
       nodes.forEach((n) => {
         const p = [...path, n.id];
-        if (n.id === selected) p.slice(0, -1).forEach((id) => (next[id] = true));
+        if (n.id === selected)
+          p.slice(0, -1).forEach((id) => (next[id] = true));
         if (n.children?.length) walk(n.children, p);
       });
     };
@@ -183,11 +382,15 @@ function Sidebar(props: {navs: readonly MenuItem[]; selected: string; onSelect:
                 aria-expanded={!collapsed && expanded}
                 title={n.label}
               >
-                {!collapsed && <span className={`caret ${expanded ? "rot" : ""}`}>▸</span>}
+                {!collapsed && (
+                  <span className={`caret ${expanded ? "rot" : ""}`}>▸</span>
+                )}
                 <span className="sb-icon-wrap" aria-hidden>
                   {n.icon ?? null}
                 </span>
-                {!collapsed && <span className="sideItem__label">{n.label}</span>}
+                {!collapsed && (
+                  <span className="sideItem__label">{n.label}</span>
+                )}
               </button>
               {!collapsed && expanded && renderTree(n.children!, depth + 1)}
             </li>
@@ -216,7 +419,10 @@ function Sidebar(props: {navs: readonly MenuItem[]; selected: string; onSelect:
   );
 
   return (
-    <aside className={`sidebar ${collapsed ? "sidebar--collapsed" : ""}`} aria-label="Navegación principal">
+    <aside
+      className={`sidebar ${collapsed ? "sidebar--collapsed" : ""}`}
+      aria-label="Navegación principal"
+    >
       <div className="sidebar__header">
         <div className="sb-brand">
           {!collapsed && (
@@ -228,7 +434,11 @@ function Sidebar(props: {navs: readonly MenuItem[]; selected: string; onSelect:
             </>
           )}
         </div>
-        <button className="sb-toggle" onClick={onToggle} aria-label={collapsed ? "Expandir menú" : "Colapsar menú"}>
+        <button
+          className="sb-toggle"
+          onClick={onToggle}
+          aria-label={collapsed ? "Expandir menú" : "Colapsar menú"}
+        >
           {collapsed ? "»" : "«"}
         </button>
       </div>
@@ -243,7 +453,9 @@ function Sidebar(props: {navs: readonly MenuItem[]; selected: string; onSelect:
         </div>
         {!collapsed && (
           <div className="sb-prof__info">
-            <div className="sb-prof__mail">{user?.mail || "usuario@empresa.com"}</div>
+            <div className="sb-prof__mail">
+              {user?.mail || "usuario@empresa.com"}
+            </div>
             <div className="sb-prof__mail" aria-hidden="true">
               {role}
             </div>
@@ -255,15 +467,21 @@ function Sidebar(props: {navs: readonly MenuItem[]; selected: string; onSelect:
 }
 
 /* ============================================================
-   Shell: controla autenticación básica y muestra LoggedApp
-   ============================================================ */
+  Shell: controla autenticación básica y muestra LoggedApp
+  ============================================================ */
 
 function Shell() {
   const { ready, account, signIn, signOut } = useAuth();
   const [loadingAuth, setLoadingAuth] = React.useState(false);
 
   // mapea la cuenta MSAL a tipo User para el header
-  const user: User = account ? { displayName: account.name ?? account.username ?? "Usuario", mail: account.username ?? "", jobTitle: "" } : null;
+  const user: User = account
+    ? {
+        displayName: account.name ?? account.username ?? "Usuario",
+        mail: account.username ?? "",
+        jobTitle: "",
+      }
+    : null;
 
   const isLogged = Boolean(account);
 
@@ -283,7 +501,7 @@ function Shell() {
     return (
       <div className="page layout">
         <section className="page-view">
-          <WelcomeSolvi onLogin={handleAuthClick}/>
+          <WelcomeSolvi onLogin={handleAuthClick} />
         </section>
       </div>
     );
@@ -293,18 +511,24 @@ function Shell() {
 }
 
 /* ============================================================
-   LoggedApp: calcula árbol visible y renderiza el contenido
-   ============================================================ */
+  LoggedApp: calcula árbol visible y renderiza el contenido
+  ============================================================ */
 
 function LoggedApp({ user }: { user: User }) {
   const { role, changeUser } = useUserRole(user!.mail);
-  const services = useGraphServices()
-  const repositories = useRepositories()
+  const services = useGraphServices();
+  const repositories = useRepositories();
   const { theme, toggle } = useTheme();
-  const {heartBeatControl} = useContador()
+  const { heartBeatControl } = useContador();
 
   const navCtx = React.useMemo<NavContext>(() => {
-    const safeRole: string = role === "Administrador" || role === "Tecnico" || role === "Jefe de zona" || role === "Usuario" ? (role as string) : "Usuario";
+    const safeRole: string =
+      role === "Administrador" ||
+      role === "Tecnico" ||
+      role === "Jefe de zona" ||
+      role === "Usuario"
+        ? (role as string)
+        : "Usuario";
     return {
       role: safeRole,
       flags: new Set<string>([]),
@@ -319,7 +543,9 @@ function LoggedApp({ user }: { user: User }) {
 
   const navs = React.useMemo(() => filterNavTree(NAV, navCtx), [navCtx]);
 
-  const [selected, setSelected] = React.useState<string>(() => firstLeafId(navs));
+  const [selected, setSelected] = React.useState<string>(() =>
+    firstLeafId(navs),
+  );
   const [ausencia, setAusencia] = React.useState<boolean>(false);
 
   React.useEffect(() => {
@@ -342,7 +568,13 @@ function LoggedApp({ user }: { user: User }) {
   const element = React.useMemo(() => {
     if (!item) return null;
     if (typeof item.to === "function") {
-      return (item.to as (ctx: RenderCtx) => React.ReactNode)({ services: {Logs: repositories.logs!, Tickets: repositories.tickets!, Usuarios: services.Usuarios} });
+      return (item.to as (ctx: RenderCtx) => React.ReactNode)({
+        services: {
+          Logs: repositories.logs!,
+          Tickets: repositories.tickets!,
+          Usuarios: services.Usuarios,
+        },
+      });
     }
     return item.to ?? null;
   }, [item, services]);
@@ -374,62 +606,118 @@ function LoggedApp({ user }: { user: User }) {
 
       // regla: si el ítem tiene autocollapse, colapsa.
       // (Opcional) Solo en pantallas pequeñas:
-      const isNarrow = typeof window !== "undefined" && window.innerWidth < 1100;
+      const isNarrow =
+        typeof window !== "undefined" && window.innerWidth < 1100;
 
-      if (it.autocollapse && (isNarrow || true /* quita esto si quieres sólo en móvil */)) {
+      if (
+        it.autocollapse &&
+        (isNarrow || true) /* quita esto si quieres sólo en móvil */
+      ) {
         setCollapsed(true);
         try {
           localStorage.setItem("sb-collapsed", "1");
         } catch {}
       }
     },
-    [navs]
+    [navs],
   );
 
   return (
-    <div className={`page layout layout--withSidebar ${collapsed ? "is-collapsed" : ""}`}>
-      <Sidebar navs={navs} selected={selected} onSelect={handleSelect} user={user} role={role} collapsed={collapsed} onToggle={toggleCollapsed} />
+    <div
+      className={`page layout layout--withSidebar ${collapsed ? "is-collapsed" : ""}`}
+    >
+      <Sidebar
+        navs={navs}
+        selected={selected}
+        onSelect={handleSelect}
+        user={user}
+        role={role}
+        collapsed={collapsed}
+        onToggle={toggleCollapsed}
+      />
       <main className="content content--withSidebar">
         <div className="page-viewport">
-            <div className="content-toolbar" role="toolbar" aria-label="Acciones de vista">
-              <button className="btn btn-transparent-final btn-s" onClick={toggle} aria-label={`Cambiar a modo ${theme === "dark" ? "claro" : "oscuro"}`} aria-pressed={theme === "dark"} title={theme === "dark" ? "Modo oscuro activado" : "Modo claro activado"}>
-                <span className="" aria-hidden="true">
-                  {theme === "dark" ? "🌙" : "☀️"}
-                </span>
-              </button>
-              {(role === "Tecnico" || role === "Administrador") && 
-                <button className="btn btn-transparent-final btn-m" onClick={() => setAusencia(!ausencia)} aria-label="Cambiar de rol">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 1025">
-                    <path fill="#000000" d="M512 1025q-104 0-199-40.5t-163.5-109T40.5 712T0 513t40.5-199t109-163.5T313 41T512 0t199 41t163.5 109.5t109 163.5t40.5 199t-40.5 199t-109 163.5t-163.5 109t-199 40.5zm0-896q-104 0-192.5 51t-140 139.5t-51.5 193t51.5 193t140 140T512 897t192.5-51.5t140-140t51.5-193t-51.5-193t-140-139.5T512 129zm192 224L573 530q-5 20-22 33.5T512 577q-21 0-38-13t-23-32L256 289v-32h32l225 181l159-117h32v32z"/>
-                  </svg>
-                </button>
-              }
-              {(user?.mail === "cesanchez@estudiodemoda.com.co" || user?.mail === "dpalacios@estudiodemoda.com.co") &&
-                <button className="btn btn-transparent-final btn-m" onClick={() => changeUser()} aria-label="Cambiar de rol">
-                  <span>Cambiar de rol</span>
-                </button>
+          <div
+            className="content-toolbar"
+            role="toolbar"
+            aria-label="Acciones de vista"
+          >
+            <button
+              className="btn btn-transparent-final btn-s"
+              onClick={toggle}
+              aria-label={`Cambiar a modo ${theme === "dark" ? "claro" : "oscuro"}`}
+              aria-pressed={theme === "dark"}
+              title={
+                theme === "dark"
+                  ? "Modo oscuro activado"
+                  : "Modo claro activado"
               }
-              <button className="btn btn-transparent-final btn-s" onClick={() => logout()} aria-label="Cerrar sesión">
-                <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-                  <path d="M10 17l-1.4-1.4 3.6-3.6-3.6-3.6L10 7l5 5-5 5zM4 19h8v2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8v2H4v14z" fill="currentColor"/>
+            >
+              <span className="" aria-hidden="true">
+                {theme === "dark" ? "🌙" : "☀️"}
+              </span>
+            </button>
+            {(role === "Tecnico" || role === "Administrador") && (
+              <button
+                className="btn btn-transparent-final btn-m"
+                onClick={() => setAusencia(!ausencia)}
+                aria-label="Cambiar de rol"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 1024 1025"
+                >
+                  <path
+                    fill="#000000"
+                    d="M512 1025q-104 0-199-40.5t-163.5-109T40.5 712T0 513t40.5-199t109-163.5T313 41T512 0t199 41t163.5 109.5t109 163.5t40.5 199t-40.5 199t-109 163.5t-163.5 109t-199 40.5zm0-896q-104 0-192.5 51t-140 139.5t-51.5 193t51.5 193t140 140T512 897t192.5-51.5t140-140t51.5-193t-51.5-193t-140-139.5T512 129zm192 224L573 530q-5 20-22 33.5T512 577q-21 0-38-13t-23-32L256 289v-32h32l225 181l159-117h32v32z"
+                  />
                 </svg>
-                <span>Salir</span>
               </button>
-            </div>
-            <div className="page page--fluid">{element}</div>
+            )}
+            {(user?.mail === "cesanchez@estudiodemoda.com.co" ||
+              user?.mail === "dpalacios@estudiodemoda.com.co") && (
+              <button
+                className="btn btn-transparent-final btn-m"
+                onClick={() => changeUser()}
+                aria-label="Cambiar de rol"
+              >
+                <span>Cambiar de rol</span>
+              </button>
+            )}
+            <button
+              className="btn btn-transparent-final btn-s"
+              onClick={() => logout()}
+              aria-label="Cerrar sesión"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                width="16"
+                height="16"
+                aria-hidden="true"
+              >
+                <path
+                  d="M10 17l-1.4-1.4 3.6-3.6-3.6-3.6L10 7l5 5-5 5zM4 19h8v2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8v2H4v14z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span>Salir</span>
+            </button>
+          </div>
+          <div className="page page--fluid">{element}</div>
         </div>
 
         {ausencia && (
           <TeamsEventForm onDiscard={() => setAusencia(false)}></TeamsEventForm>
         )}
       </main>
-
     </div>
   );
 }
 /* ============================================================
-   App root y gate de servicios
-   ============================================================ */
+  App root y gate de servicios
+  ============================================================ */
 
 export default function App() {
   return (
diff --git a/src/Funcionalidades/Tickets/NuevoTicket.ts b/src/Funcionalidades/Tickets/NuevoTicket.ts
index c513027..4ffc633 100644
--- a/src/Funcionalidades/Tickets/NuevoTicket.ts
+++ b/src/Funcionalidades/Tickets/NuevoTicket.ts
@@ -1,9 +1,14 @@
 import * as React from "react";
 import { useState, useEffect } from "react";
 import { calcularFechaSolucion, calculoANS } from "../../utils/ans";
-import { fetchHolidays} from "../../Services/Festivos";
-import type { FormState, FormErrors, UserFormState, FormUserErrors } from "../../Models/nuevoTicket";
-import type {  GetAllOpts, } from "../../Models/Commons";
+import { fetchHolidays } from "../../Services/Festivos";
+import type {
+  FormState,
+  FormErrors,
+  UserFormState,
+  FormUserErrors,
+} from "../../Models/nuevoTicket";
+import type { GetAllOpts } from "../../Models/Commons";
 import { useCatalogoServicio } from "./hooks/useCatalogoServicio";
 import type { TZDate } from "@date-fns/tz";
 import { toGraphDateTime } from "../../utils/Date";
@@ -13,7 +18,10 @@ import { pickTecnicoConMenosCasos } from "../../utils/Commons";
 import type { UsuariosSP } from "../../Models/Usuarios";
 import type { Ticket } from "../../Models/Tickets";
 import type { TicketsRepository } from "../../repositories/TicketsRepository/TicketRepository";
-import { notifyTicketCreatedResolutor, notifyTicketCreatedSolicitante } from "./utils/notifications";
+import {
+  notifyTicketCreatedResolutor,
+  notifyTicketCreatedSolicitante,
+} from "./utils/notifications";
 import toast from "react-hot-toast";
 import { uploadImageToSupabase } from "../shared/UploadFileToSupabase";
 import { useRepositories } from "../../repositories/repositoriesContext";
@@ -21,21 +29,22 @@ import type { LogRepository } from "../../repositories/LogRepository/LogResposit
 import type { Holiday } from "../../Models/Holiday";
 import { horasPorANS } from "./utils/ticketConstants";
 
-
 type Svc = {
   Categorias: { getAll: (opts?: any) => Promise<any[]> };
   SubCategorias: { getAll: (opts?: any) => Promise<any[]> };
   Articulos: { getAll: (opts?: any) => Promise<any[]> };
   Tickets?: TicketsRepository;
-  Usuarios: UsuariosSPService
-  Logs: LogRepository
-}; 
+  Usuarios: UsuariosSPService;
+  Logs: LogRepository;
+};
 
-const TICKETS_ATTACHMENTS_BUCKET = "ticket-attachments"
+const TICKETS_ATTACHMENTS_BUCKET = "ticket-attachments";
 
 export function useNuevoTicketForm(services: Svc) {
-  const { Categorias, SubCategorias, Articulos, Tickets, Usuarios, Logs} = services;
-  const {attachments, ans} = useRepositories()
+  const { Categorias, SubCategorias, Articulos, Tickets, Usuarios, Logs } =
+    services;
+  const { attachments, ans, activotickets } = useRepositories();
+  const { account } = useAuth();
   const [state, setState] = useState<FormState>({
     solicitante: null,
     resolutor: null,
@@ -44,9 +53,9 @@ export function useNuevoTicketForm(services: Svc) {
     fuente: "",
     motivo: "",
     descripcion: "",
-    categoria: "",    // Título
+    categoria: "", // Título
     subcategoria: "", // Título
-    articulo: "",     // Título
+    articulo: "", // Título
     articuloId: "",
     ANS: "",
     archivo: [],
@@ -55,8 +64,13 @@ export function useNuevoTicketForm(services: Svc) {
   const [submitting, setSubmitting] = useState(false);
   const [holidays, setHolidays] = useState<Holiday[]>([]);
   const [fechaSolucion, setFechaSolucion] = useState<Date | null>(null);
-  const { categorias, subcategoriasAll, articulosAll, loadingCatalogos, errorCatalogos } =
-    useCatalogoServicio({ Categorias, SubCategorias, Articulos });
+  const {
+    categorias,
+    subcategoriasAll,
+    articulosAll,
+    loadingCatalogos,
+    errorCatalogos,
+  } = useCatalogoServicio({ Categorias, SubCategorias, Articulos });
 
   // Carga de festivos inicial
   useEffect(() => {
@@ -84,7 +98,8 @@ export function useNuevoTicketForm(services: Svc) {
     const e: FormErrors = {};
     if (!state.solicitante) e.solicitante = "Requerido";
     if (!state.resolutor) e.resolutor = "Requerido";
-    if (state.usarFechaApertura && !state.fechaApertura) e.fechaApertura = "Seleccione la fecha";
+    if (state.usarFechaApertura && !state.fechaApertura)
+      e.fechaApertura = "Seleccione la fecha";
     if (!state.fuente) e.fuente = "Seleccione una fuente";
     if (!state.motivo.trim()) e.motivo = "Ingrese el motivo";
     if (!state.descripcion.trim()) e.descripcion = "Describa el problema";
@@ -97,10 +112,12 @@ export function useNuevoTicketForm(services: Svc) {
     try {
       const email = correoResolutor.trim();
       if (!email) {
-        toast.error("No hay Correoresolutor en el payload; no se puede incrementar conteo.");
-        return
-      } 
-        
+        toast.error(
+          "No hay Correoresolutor en el payload; no se puede incrementar conteo.",
+        );
+        return;
+      }
+
       // 1) Buscar resolutor por correo (top 1)
       const opts: GetAllOpts = {
         filter: `fields/Correo eq '${email}'`,
@@ -109,178 +126,247 @@ export function useNuevoTicketForm(services: Svc) {
 
       const rows = await Usuarios.getAll(opts);
       const resolutorRow = rows?.[0];
-      console.table(resolutorRow)
+      console.table(resolutorRow);
 
       if (!resolutorRow) {
         toast.error("No se encontró resolutor con ese correo: " + email);
-        return
-      } 
-        
+        return;
+      }
+
       // 2) Calcular nuevo conteo de casos (normaliza null/undefined)
       const prev = Number(resolutorRow.Numerodecasos ?? 0);
       const next = prev + 1;
 
       // 3) Hacer update (espera Promise)
       await Usuarios.update(String(resolutorRow.Id), {
-          Numerodecasos: next,
-        });
-
+        Numerodecasos: next,
+      });
     } catch (err) {
       toast.error("Error actualizando contador del resolutor:" + err);
-      throw new Error("Error actualizando contador del resolutor" + err)
+      throw new Error("Error actualizando contador del resolutor" + err);
     }
   };
 
-  const handleSubmit = async (e: React.FormEvent, ansProps: {catId: number | null, subId: number | null, art: number | null}) => {
+  const handleSubmit = async (
+    e: React.FormEvent,
+    ansProps: {
+      catId: number | null;
+      subId: number | null;
+      art: number | null;
+    },
+    activosIds: string[] = [],
+  ): Promise<boolean> => {
     e.preventDefault();
-    if (!validate()) return;
+    if (!validate()) return false;
 
     setSubmitting(true);
-      const apertura = state.usarFechaApertura && state.fechaApertura ? new Date(state.fechaApertura) : new Date();
+    const apertura =
+      state.usarFechaApertura && state.fechaApertura
+        ? new Date(state.fechaApertura)
+        : new Date();
 
-      let solucion: TZDate | null = null;
+    let solucion: TZDate | null = null;
 
-      const ANS = await calculoANS(ansProps, ans);
-      const horasAns = horasPorANS[ANS] ?? 0;
+    const ANS = await calculoANS(ansProps, ans);
+    const horasAns = horasPorANS[ANS] ?? 0;
 
-      if (horasAns > 0) {
-        solucion = calcularFechaSolucion(apertura, horasAns, holidays);
-        setFechaSolucion(solucion);
-      } 
-      
-      const aperturaISO  = toGraphDateTime(apertura);           
-      const tiempoSolISO = toGraphDateTime(solucion as any);  
+    if (horasAns > 0) {
+      solucion = calcularFechaSolucion(apertura, horasAns, holidays);
+      setFechaSolucion(solucion);
+    }
 
-      const payload: Ticket =  { 
-        AsuntoTicket: state.motivo,
-        Descripcion: state.descripcion,
-        FechaApertura: aperturaISO,
-        FechaMaxima: tiempoSolISO,
-        Fuente: state.fuente,
-        Categoria: state.categoria,       
-        SubCategoria: state.subcategoria, 
-        Articulo: state.articulo,  
-        Nombreresolutor: state.resolutor?.label,
-        Correoresolutor: state.resolutor?.email,
-        Solicitante: state.solicitante?.label,
-        CorreoSolicitante: state.solicitante?.value,
-        Estadodesolicitud: state.cerrar ? "Cerrado" : "En Atención",
-        ANS: ANS
-      }
+    const aperturaISO = toGraphDateTime(apertura);
+    const tiempoSolISO = toGraphDateTime(solucion as any);
+
+    const payload: Ticket = {
+      AsuntoTicket: state.motivo,
+      Descripcion: state.descripcion,
+      FechaApertura: aperturaISO,
+      FechaMaxima: tiempoSolISO,
+      Fuente: state.fuente,
+      Categoria: state.categoria,
+      SubCategoria: state.subcategoria,
+      Articulo: state.articulo,
+      Nombreresolutor: state.resolutor?.label,
+      Correoresolutor: state.resolutor?.email,
+      Solicitante: state.solicitante?.label,
+      CorreoSolicitante: state.solicitante?.value,
+      Estadodesolicitud: state.cerrar ? "Cerrado" : "En Atención",
+      ANS: ANS,
+    };
+
+    // === Crear ticket (usa el servicio inyectado)
+    let createdId: string | number = "";
+    if (!Tickets) {
+      toast.error(
+        "Tickets service no disponible. Verifica el GraphServicesProvider.",
+      );
+      throw new Error(
+        "Tickets service no disponible. Verifica el GraphServicesProvider.",
+      );
+    }
+
+    try {
+      const created = await Tickets.createTicket(payload);
+      createdId = created.data?.ID ?? "";
+      await updateTicketsNumber(state.resolutor?.email ?? "");
 
-      // === Crear ticket (usa el servicio inyectado)
-      let createdId: string | number = "";
-      if (!Tickets) {
-        toast.error("Tickets service no disponible. Verifica el GraphServicesProvider.")
-        throw new Error("Tickets service no disponible. Verifica el GraphServicesProvider.");
+      if (state.archivo.length > 0) {
+        await Promise.all(
+          state.archivo.map(async (file) => {
+            const result = await uploadImageToSupabase(
+              file,
+              TICKETS_ATTACHMENTS_BUCKET,
+              `/${createdId}/Creacion/${file.name}`,
+            );
+            await attachments?.createAttachment({
+              attachment_path: result.url,
+              attachment_type: "Creacion",
+              created_at: new Date().toISOString(),
+              file_name: file.name,
+              id_ticket: Number(created.data?.ID),
+              storage_bucket: TICKETS_ATTACHMENTS_BUCKET,
+            });
+          }),
+        );
       }
 
-      try{
-        const created = await Tickets.createTicket(payload);
-        createdId = created.data?.ID ?? ""
-        await updateTicketsNumber(state.resolutor?.email ?? "")
-
-        if(state.archivo.length > 0){
-          await Promise.all(
-            state.archivo.map(async (file) => {
-                const result = await uploadImageToSupabase(file, TICKETS_ATTACHMENTS_BUCKET, `/${createdId}/Creacion/${file.name}`)
-                await attachments?.createAttachment({
-                  attachment_path: result.url,
-                  attachment_type: "Creacion",
-                  created_at: new Date().toISOString(),
-                  file_name: file.name,
-                  id_ticket: Number(created.data?.ID),
-                  storage_bucket: TICKETS_ATTACHMENTS_BUCKET
-                })
-              }
-            )
-          )
+      if (activosIds.length > 0 && activotickets) {
+        const resultados = await Promise.all(
+          activosIds.map((activoId) =>
+            activotickets.createActivoTicket({
+              activo_id: activoId,
+              ticket_id: Number(createdId),
+              vinculado_por_nombre: account?.name ?? account?.username ?? "",
+            }),
+          ),
+        );
+        const fallidos = resultados.filter((r) => !r.status).length;
+        if (fallidos > 0) {
+          toast.error(
+            `El ticket se creó, pero ${fallidos} activo(s) no se pudieron vincular`,
+          );
         }
+      }
 
-        toast.success("Se ha creado el ticket con éxito")
-
-        const idTexto = Number(createdId);
-        const solicitanteEmail = state.solicitante?.email || state.solicitante?.value || "";
-        const resolutorEmail = state.resolutor?.email || state.resolutor?.value || "";
-
-        //Crear Log
-        Logs.createLog({
-          seguimientos_solvi_actor: "Sitema", 
-          seguimientos_solvi_descripcion: `Se ha creado un nuevo ticket para el requerimiento con ID: ${idTexto}`,
-          seguimientos_solvi_correo_actor: "", 
-          seguimientos_solvi_tipo_de_accion:"Creacion", 
-          seguimientos_solvi_id_ticket: idTexto,
-          seguimientos_solvi_action_date: new Date()
-        })
-
-        setSubmitting(false);
-        
-          // Notificar solicitante
-        if (solicitanteEmail) {
-          await notifyTicketCreatedSolicitante(created.data!)
-        }
+      toast.success("Se ha creado el ticket con éxito");
 
-          // Notificar resolutor    
-        if (resolutorEmail) {
-          await notifyTicketCreatedResolutor(created.data!)
-        }
-      } catch(e: any){
-        toast.error("Algo ha salido mal creando el ticket " + e)
-        setSubmitting(false)
-        throw new Error("Algo ha salido mal creando el ticket " + e)
+      const idTexto = Number(createdId);
+      const solicitanteEmail =
+        state.solicitante?.email || state.solicitante?.value || "";
+      const resolutorEmail =
+        state.resolutor?.email || state.resolutor?.value || "";
+
+      //Crear Log
+      Logs.createLog({
+        seguimientos_solvi_actor: "Sitema",
+        seguimientos_solvi_descripcion: `Se ha creado un nuevo ticket para el requerimiento con ID: ${idTexto}`,
+        seguimientos_solvi_correo_actor: "",
+        seguimientos_solvi_tipo_de_accion: "Creacion",
+        seguimientos_solvi_id_ticket: idTexto,
+        seguimientos_solvi_action_date: new Date(),
+      });
+
+      setSubmitting(false);
+
+      // Notificar solicitante
+      if (solicitanteEmail) {
+        await notifyTicketCreatedSolicitante(created.data!);
       }
 
-     
-      //Limpiar formularior
-      setState({solicitante: null, resolutor: null, usarFechaApertura: false, fechaApertura: null, fuente: "", motivo: "", descripcion: "", categoria: "", subcategoria: "", articulo: "", articuloId: "",  ANS: "", archivo: [],})
-      setErrors({})
+      // Notificar resolutor
+      if (resolutorEmail) {
+        await notifyTicketCreatedResolutor(created.data!);
+      }
+    } catch (e: any) {
+      toast.error("Algo ha salido mal creando el ticket " + e);
+      setSubmitting(false);
+      throw new Error("Algo ha salido mal creando el ticket " + e);
     }
-    
+
+    //Limpiar formularior
+    setState({
+      solicitante: null,
+      resolutor: null,
+      usarFechaApertura: false,
+      fechaApertura: null,
+      fuente: "",
+      motivo: "",
+      descripcion: "",
+      categoria: "",
+      subcategoria: "",
+      articulo: "",
+      articuloId: "",
+      ANS: "",
+      archivo: [],
+    });
+    setErrors({});
+    return true;
+  };
 
   const balanceCharge = async ({
     targetId,
     maxDiff = 3,
-    fuente
+    fuente,
   }: {
     targetId: string;
     maxDiff?: number;
     fuente: string;
-  }) =>{
-    if(fuente === "Disponibilidad") return {ok: true}
-    const resolutores: UsuariosSP[] = await Usuarios.getAll({filter: "fields/Rol eq 'Tecnico' and fields/Disponible eq 'Disponible'"})
-    
-    if(resolutores.length  > 0){
-        const countsDespues = resolutores.map(r => {
-          const base = r.Numerodecasos ?? 0;
-          return base;
-        });
-
-        const resolutor = await Usuarios.get(targetId)
-
-        const min = Math.min(...countsDespues);
-        const respuesta = ((Number(resolutor.Numerodecasos ?? 0)+1) - min) < maxDiff; 
-
-        return {
-          ok: respuesta
-        }
+  }) => {
+    if (fuente === "Disponibilidad") return { ok: true };
+    const resolutores: UsuariosSP[] = await Usuarios.getAll({
+      filter: "fields/Rol eq 'Tecnico' and fields/Disponible eq 'Disponible'",
+    });
+
+    if (resolutores.length > 0) {
+      const countsDespues = resolutores.map((r) => {
+        const base = r.Numerodecasos ?? 0;
+        return base;
+      });
+
+      const resolutor = await Usuarios.get(targetId);
+
+      const min = Math.min(...countsDespues);
+      const respuesta =
+        Number(resolutor.Numerodecasos ?? 0) + 1 - min < maxDiff;
+
+      return {
+        ok: respuesta,
+      };
     }
-  } 
+  };
 
   return {
-    state, errors, submitting, fechaSolucion, categorias, subcategoriasAll, articulosAll, loadingCatalogos, errorCatalogos,
-    handleSubmit, setField, balanceCharge
+    state,
+    errors,
+    submitting,
+    fechaSolucion,
+    categorias,
+    subcategoriasAll,
+    articulosAll,
+    loadingCatalogos,
+    errorCatalogos,
+    handleSubmit,
+    setField,
+    balanceCharge,
   };
 }
 
 export function useNuevoUsuarioTicketForm(services: Svc) {
-  const { Usuarios, Tickets, Logs} = services;
-  const { account, } = useAuth();
-  const [state, setState] = useState<UserFormState>({archivo: [], Correosolicitante: account?.username ?? "", descripcion: "", motivo: "", solicitante: ""});
+  const { Usuarios, Tickets, Logs } = services;
+  const { account } = useAuth();
+  const [state, setState] = useState<UserFormState>({
+    archivo: [],
+    Correosolicitante: account?.username ?? "",
+    descripcion: "",
+    motivo: "",
+    solicitante: "",
+  });
   const [errors, setErrors] = useState<FormUserErrors>({});
   const [submitting, setSubmitting] = useState(false);
   const [holidays, setHolidays] = useState<Holiday[]>([]);
   const [fechaSolucion, setFechaSolucion] = useState<Date | null>(null);
-  const {attachments} = useRepositories()
+  const { attachments } = useRepositories();
 
   useEffect(() => {
     let cancel = false;
@@ -297,19 +383,21 @@ export function useNuevoUsuarioTicketForm(services: Svc) {
     };
   }, []);
 
-  const setField = <K extends keyof UserFormState>(k: K, v: UserFormState[K]) => setState((s) => ({ ...s, [k]: v }));
+  const setField = <K extends keyof UserFormState>(k: K, v: UserFormState[K]) =>
+    setState((s) => ({ ...s, [k]: v }));
 
   const validate = () => {
     const e: FormUserErrors = {};
     if (!state.descripcion) e.descripcion = "Requerida";
-    if (state.descripcion.length < 60) e.descripcion = "La descripción debe tener minimo 60 caracteres";
+    if (state.descripcion.length < 60)
+      e.descripcion = "La descripción debe tener minimo 60 caracteres";
     if (!state.motivo.trim()) e.motivo = "Ingrese el motivo";
     setErrors(e);
     return Object.keys(e).length === 0;
   };
 
   const handleSubmit = async () => {
-    if (!validate()) return;
+    if (!validate()) return false;
 
     setSubmitting(true);
     try {
@@ -317,7 +405,7 @@ export function useNuevoUsuarioTicketForm(services: Svc) {
       const solucion = calcularFechaSolucion(apertura, 2.5, holidays);
       setFechaSolucion(solucion);
 
-      const aperturaISO  = toGraphDateTime(apertura);
+      const aperturaISO = toGraphDateTime(apertura);
       const tiempoSolISO = toGraphDateTime(solucion as any);
 
       const resolutor = await pickTecnicoConMenosCasos(Usuarios);
@@ -332,79 +420,87 @@ export function useNuevoUsuarioTicketForm(services: Svc) {
         Solicitante: account?.name,
         CorreoSolicitante: account?.username,
         Estadodesolicitud: "En Atención",
-        Fuente: "Aplicación"
+        Fuente: "Aplicación",
       };
 
       const ticketCreated = await Tickets?.createTicket(payload);
 
-      if(state.archivo.length > 0){
+      if (state.archivo.length > 0) {
         await Promise.all(
           state.archivo.map(async (file) => {
-              const result = await uploadImageToSupabase(file, TICKETS_ATTACHMENTS_BUCKET, `/${ticketCreated?.data?.ID}/Creacion/${file.name}`)
-              await attachments?.createAttachment({
-                attachment_path: result.url,
-                attachment_type: "Creacion",
-                created_at: new Date().toISOString(),
-                file_name: file.name,
-                id_ticket: Number(ticketCreated?.data?.ID),
-                storage_bucket: TICKETS_ATTACHMENTS_BUCKET
-              })
-            }
-          )
-        )
+            const result = await uploadImageToSupabase(
+              file,
+              TICKETS_ATTACHMENTS_BUCKET,
+              `/${ticketCreated?.data?.ID}/Creacion/${file.name}`,
+            );
+            await attachments?.createAttachment({
+              attachment_path: result.url,
+              attachment_type: "Creacion",
+              created_at: new Date().toISOString(),
+              file_name: file.name,
+              id_ticket: Number(ticketCreated?.data?.ID),
+              storage_bucket: TICKETS_ATTACHMENTS_BUCKET,
+            });
+          }),
+        );
       }
 
       if (resolutor) {
         const casosActuales = Number(resolutor.Numerodecasos ?? 0); // ← default 0 ANTES de Number()
         const nuevoTotal = casosActuales + 1;
-        await Usuarios.update(String(resolutor.Id), {Numerodecasos: nuevoTotal,});
+        await Usuarios.update(String(resolutor.Id), {
+          Numerodecasos: nuevoTotal,
+        });
       }
 
-      alert("caso creado con ID " + ticketCreated?.data?.ID)
+      alert("caso creado con ID " + ticketCreated?.data?.ID);
       Logs.createLog({
-        seguimientos_solvi_actor: "Sitema", 
-        seguimientos_solvi_descripcion:  `Se ha creado un nuevo ticket para el siguiente requerimiento: ${ticketCreated!.data?.ID ?? ""}`, 
-        seguimientos_solvi_correo_actor: "", 
-        seguimientos_solvi_tipo_de_accion: "Creacion", 
+        seguimientos_solvi_actor: "Sitema",
+        seguimientos_solvi_descripcion: `Se ha creado un nuevo ticket para el siguiente requerimiento: ${ticketCreated!.data?.ID ?? ""}`,
+        seguimientos_solvi_correo_actor: "",
+        seguimientos_solvi_tipo_de_accion: "Creacion",
         seguimientos_solvi_id_ticket: Number(ticketCreated?.data?.ID),
-        seguimientos_solvi_action_date: new Date()
-      })
+        seguimientos_solvi_action_date: new Date(),
+      });
 
-      setState({archivo: [], Correosolicitante: account?.username ?? "", descripcion: "", motivo: "", solicitante: account?.name ?? ""})
+      setState({
+        archivo: [],
+        Correosolicitante: account?.username ?? "",
+        descripcion: "",
+        motivo: "",
+        solicitante: account?.name ?? "",
+      });
 
-      setSubmitting(false); 
+      setSubmitting(false);
 
       if (ticketCreated?.data?.CorreoSolicitante) {
-
-          try {
-            await notifyTicketCreatedSolicitante(payload)
-          } catch (err) {
-            console.error("[Flow] Error enviando a solicitante:", err);
-          }
+        try {
+          await notifyTicketCreatedSolicitante(payload);
+        } catch (err) {
+          console.error("[Flow] Error enviando a solicitante:", err);
         }
+      }
 
-      // Notificar resolutor    
+      // Notificar resolutor
       if (ticketCreated?.data?.Correoresolutor) {
-
         try {
-          await notifyTicketCreatedResolutor(ticketCreated.data)
+          await notifyTicketCreatedResolutor(ticketCreated.data);
         } catch (err) {
           console.error("[Flow] Error enviando a resolutor:", err);
         }
       }
- 
     } catch (err) {
       console.error("Error en handleSubmit:", err);
     } finally {
-      
     }
   };
 
-
   return {
-    state, errors, submitting, fechaSolucion,
-    handleSubmit, setField, 
+    state,
+    errors,
+    submitting,
+    fechaSolucion,
+    handleSubmit,
+    setField,
   };
 }
-
-
diff --git a/src/Funcionalidades/Tickets/hooks/useTicketsLists.ts b/src/Funcionalidades/Tickets/hooks/useTicketsLists.ts
index f541ccc..94557be 100644
--- a/src/Funcionalidades/Tickets/hooks/useTicketsLists.ts
+++ b/src/Funcionalidades/Tickets/hooks/useTicketsLists.ts
@@ -2,7 +2,11 @@ import * as React from "react";
 import type { Ticket } from "../../../Models/Tickets";
 import { GraphRest } from "../../../graph/GraphRest";
 import { getXMonthsBackRange } from "../../../utils/Date";
-import type { TicketFilterMode, TicketSort, UseTicketsParams } from "./ticketHooks.types";
+import type {
+  TicketFilterMode,
+  TicketSort,
+  UseTicketsParams,
+} from "./ticketHooks.types";
 import type { filterTickets } from "../../../repositories/TicketsRepository/TicketRepository";
 import type { DateRange } from "../../../Models/Filtros";
 
@@ -25,14 +29,20 @@ async function collectZoneEmails(graph: GraphRest): Promise<string[]> {
 
   const collect = (members: any[]) => {
     for (const member of members ?? []) {
-      const mail = String(member?.mail ?? "").trim().toLowerCase();
-      const upn = String(member?.userPrincipalName ?? "").trim().toLowerCase();
+      const mail = String(member?.mail ?? "")
+        .trim()
+        .toLowerCase();
+      const upn = String(member?.userPrincipalName ?? "")
+        .trim()
+        .toLowerCase();
       const email = mail || upn;
       if (email) collected.add(email);
     }
   };
 
-  let page = await graph.get<any>(`/groups/${TIENDAS_GROUP}/members?$select=mail,userPrincipalName&$top=999`);
+  let page = await graph.get<any>(
+    `/groups/${TIENDAS_GROUP}/members?$select=mail,userPrincipalName&$top=999`,
+  );
   collect(page?.value);
 
   while (page?.["@odata.nextLink"]) {
@@ -49,7 +59,7 @@ function buildTicketsFilter(params: {
   me: boolean;
   userMail: string;
   role: string;
-  fuente: string
+  fuente: string;
 }): filterTickets | undefined {
   let filter: filterTickets = {};
 
@@ -60,28 +70,36 @@ function buildTicketsFilter(params: {
   }
 
   if (params.range.from || params.range.to) {
-    filter = {...filter, range: params.range}
+    filter = { ...filter, range: params.range };
   }
 
   if (params.me || params.role !== "Administrador") {
     filter.currentUser = params.userMail;
   }
 
-  if(params.fuente){
-    filter.fuente = params.fuente
+  if (params.fuente) {
+    filter.fuente = params.fuente;
   }
 
   return filter;
 }
 
-export function useTicketsLists({ graph, TicketsSvc, userMail, role }: UseTicketsParams) {
+export function useTicketsLists({
+  graph,
+  TicketsSvc,
+  userMail,
+  role,
+}: UseTicketsParams) {
   const [rows, setRows] = React.useState<Ticket[]>([]);
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
   const [me, setMe] = React.useState(false);
-  const [filterMode, setFilterMode] = React.useState<TicketFilterMode>("En curso");
+  const [filterMode, setFilterMode] =
+    React.useState<TicketFilterMode>("En curso");
   const [fuenteFilter, setFuenteFilter] = React.useState<string>("");
-  const [range, setRange] = React.useState(getXMonthsBackRange({MonthQuantity:2}));
+  const [range, setRange] = React.useState(
+    getXMonthsBackRange({ MonthQuantity: 2 }),
+  );
   const [pageSize, setPageSize] = React.useState(10);
   const [pageIndex, setPageIndex] = React.useState(1);
   const [sorts, setSorts] = React.useState<TicketSort[]>(DEFAULT_SORTS);
@@ -108,7 +126,18 @@ export function useTicketsLists({ graph, TicketsSvc, userMail, role }: UseTicket
         sortField: primarySort.field,
         userMail,
       }),
-    [debouncedSearch, filterMode, me, pageSize, primarySort.dir, primarySort.field, range.from, range.to, role, userMail]
+    [
+      debouncedSearch,
+      filterMode,
+      me,
+      pageSize,
+      primarySort.dir,
+      primarySort.field,
+      range.from,
+      range.to,
+      role,
+      userMail,
+    ],
   );
   const previousCriteriaRef = React.useRef(criteriaKey);
 
@@ -123,7 +152,10 @@ export function useTicketsLists({ graph, TicketsSvc, userMail, role }: UseTicket
       setZoneEmails(emails);
     } catch (loadError: any) {
       setZoneEmails([]);
-      console.warn("[Tickets] No se pudo cargar miembros del grupo:", loadError?.message ?? loadError);
+      console.warn(
+        "[Tickets] No se pudo cargar miembros del grupo:",
+        loadError?.message ?? loadError,
+      );
     }
   }, [graph, role]);
 
@@ -151,7 +183,7 @@ export function useTicketsLists({ graph, TicketsSvc, userMail, role }: UseTicket
         me,
         userMail,
         role,
-        fuente: fuenteFilter
+        fuente: fuenteFilter,
       });
 
       const result = await TicketsSvc.loadTickets({
@@ -164,13 +196,13 @@ export function useTicketsLists({ graph, TicketsSvc, userMail, role }: UseTicket
         sortField: primarySort.field,
       });
 
-    const [inProgressCount, outOfTimeCount] = await Promise.all([
-      TicketsSvc.countTickets(userMail, "En Atención"),
-      TicketsSvc.countTickets(userMail, "Fuera de tiempo"),
-    ]);
+      const [inProgressCount, outOfTimeCount] = await Promise.all([
+        TicketsSvc.countTickets(userMail, "En Atención"),
+        TicketsSvc.countTickets(userMail, "Fuera de tiempo"),
+      ]);
 
-    setInProgressTickets(inProgressCount);
-    setOutOfTimeTickets(outOfTimeCount);
+      setInProgressTickets(inProgressCount);
+      setOutOfTimeTickets(outOfTimeCount);
 
       if (!result.status) {
         throw new Error(result.message ?? "Error cargando tickets");
@@ -187,7 +219,20 @@ export function useTicketsLists({ graph, TicketsSvc, userMail, role }: UseTicket
     } finally {
       setLoading(false);
     }
-  }, [TicketsSvc, debouncedSearch, filterMode, me, pageIndex, pageSize, primarySort.dir, primarySort.field, range, role, userMail, fuenteFilter]);
+  }, [
+    TicketsSvc,
+    debouncedSearch,
+    filterMode,
+    me,
+    pageIndex,
+    pageSize,
+    primarySort.dir,
+    primarySort.field,
+    range,
+    role,
+    userMail,
+    fuenteFilter,
+  ]);
 
   React.useEffect(() => {
     const criteriaChanged = previousCriteriaRef.current !== criteriaKey;
@@ -214,31 +259,34 @@ export function useTicketsLists({ graph, TicketsSvc, userMail, role }: UseTicket
     loadAll();
   }, [loadAll]);
 
-  const toggleSort = React.useCallback((field: TicketSort["field"], additive = false) => {
-    setSorts((previousSorts) => {
-      const index = previousSorts.findIndex((sort) => sort.field === field);
+  const toggleSort = React.useCallback(
+    (field: TicketSort["field"], additive = false) => {
+      setSorts((previousSorts) => {
+        const index = previousSorts.findIndex((sort) => sort.field === field);
 
-      if (!additive) {
-        if (index >= 0) {
-          const dir = previousSorts[index].dir === "desc" ? "asc" : "desc";
-          return [{ field, dir }];
-        }
+        if (!additive) {
+          if (index >= 0) {
+            const dir = previousSorts[index].dir === "desc" ? "asc" : "desc";
+            return [{ field, dir }];
+          }
 
-        return [{ field, dir: "asc" }];
-      }
+          return [{ field, dir: "asc" }];
+        }
 
-      if (index >= 0) {
-        const nextSorts = [...previousSorts];
-        nextSorts[index] = {
-          field,
-          dir: nextSorts[index].dir === "desc" ? "asc" : "desc",
-        };
-        return nextSorts;
-      }
+        if (index >= 0) {
+          const nextSorts = [...previousSorts];
+          nextSorts[index] = {
+            field,
+            dir: nextSorts[index].dir === "desc" ? "asc" : "desc",
+          };
+          return nextSorts;
+        }
 
-      return [...previousSorts, { field, dir: "asc" }];
-    });
-  }, []);
+        return [...previousSorts, { field, dir: "asc" }];
+      });
+    },
+    [],
+  );
 
   return {
     rows,
@@ -268,6 +316,6 @@ export function useTicketsLists({ graph, TicketsSvc, userMail, role }: UseTicket
     inProgressTickets,
     outOfTimeTickets,
     fuenteFilter,
-    setFuenteFilter
+    setFuenteFilter,
   };
 }
diff --git a/src/Funcionalidades/inventario/useActivoMovimientos.ts b/src/Funcionalidades/inventario/useActivoMovimientos.ts
new file mode 100644
index 0000000..662e78d
--- /dev/null
+++ b/src/Funcionalidades/inventario/useActivoMovimientos.ts
@@ -0,0 +1,297 @@
+import * as React from "react";
+import type {
+  ActivoMovimiento,
+  CrearActivoMovimientoDTO,
+  EstadoActivo,
+  MovimientoErrors,
+} from "../../Models/ActivosTIMovimientos";
+import { ValidarMovimiento } from "../../Models/ActivosTIMovimientos";
+import type {
+  FilterActivosMovimiento,
+  MovimientosTIRepository,
+} from "../../repositories/MovimientoTIRepository/MovimientosTIRepository";
+import toast from "react-hot-toast";
+
+const DEFAULT_PAGE_SIZE = 10;
+
+export type MovimientoSortField =
+  | "fecha_evento"
+  | "estado_nuevo"
+  | "responsable_nombre";
+export type MovimientoSortDir = "asc" | "desc";
+export type MovimientoSort = {
+  field: MovimientoSortField;
+  dir: MovimientoSortDir;
+};
+
+const DEFAULT_SORTS: MovimientoSort[] = [
+  { field: "fecha_evento", dir: "desc" },
+];
+
+function useDebouncedValue<T>(value: T, delay = 300) {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timeout);
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+type UseActivoMovimientosParams = {
+  MovimientosSvc: MovimientosTIRepository;
+  activoId?: string;
+};
+
+export function useActivoMovimientos({
+  MovimientosSvc,
+  activoId,
+}: UseActivoMovimientosParams) {
+  const [movimientos, setMovimientos] = React.useState<ActivoMovimiento[]>([]);
+
+  const [form, setForm] = React.useState<Partial<CrearActivoMovimientoDTO>>({
+    activo_id: activoId,
+  });
+  const [formErrors, setFormErrors] = React.useState<MovimientoErrors>({});
+
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const [search, setSearch] = React.useState("");
+  const [tipoEventoFiltro, setTipoEventoFiltro] = React.useState<
+    EstadoActivo | ""
+  >("");
+
+  const [pageIndex, setPageIndex] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(DEFAULT_PAGE_SIZE);
+  const [total, setTotal] = React.useState(0);
+  const [hasNext, setHasNext] = React.useState(false);
+  const [sorts, setSorts] = React.useState<MovimientoSort[]>(DEFAULT_SORTS);
+
+  const debouncedSearch = useDebouncedValue(search);
+  const primarySort = sorts[0] ?? DEFAULT_SORTS[0];
+
+  const setField = React.useCallback(
+    <K extends keyof CrearActivoMovimientoDTO>(
+      key: K,
+      value: CrearActivoMovimientoDTO[K],
+    ) => {
+      setForm((currentForm) => ({
+        ...currentForm,
+        [key]: value,
+      }));
+    },
+    [],
+  );
+
+  const resetForm = React.useCallback(() => {
+    setForm({ activo_id: activoId }); // Mantenemos siempre el activoId pre-cargado
+    setFormErrors({});
+  }, [activoId]);
+
+  const validateForm = React.useCallback(() => {
+    const errors = ValidarMovimiento(form);
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  }, [form]);
+
+  const loadMovimientos = React.useCallback(
+    async (filter?: FilterActivosMovimiento) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await MovimientosSvc.loadMovimientos(filter);
+        if (!result.status) {
+          setError(
+            result.message ?? "Error cargando la bitácora de movimientos",
+          );
+          return false;
+        }
+        setMovimientos(result.data ?? []);
+        setTotal(result.total ?? result.data?.length ?? 0);
+        setHasNext(result.hasNext ?? false);
+        return true;
+      } catch (loadError) {
+        setError(
+          loadError instanceof Error
+            ? loadError.message
+            : "Error cargando la bitácora",
+        );
+        setMovimientos([]);
+        setTotal(0);
+        setHasNext(false);
+        return false;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [MovimientosSvc],
+  );
+
+  const buildFilter = React.useCallback(
+    (): FilterActivosMovimiento => ({
+      activo_id: activoId,
+      estado_nuevo: tipoEventoFiltro || undefined,
+      search: debouncedSearch.trim() || undefined,
+      pageIndex,
+      pageSize,
+      paginated: true,
+      sortField: primarySort.field,
+      sortDir: primarySort.dir,
+    }),
+    [
+      activoId,
+      tipoEventoFiltro,
+      debouncedSearch,
+      pageIndex,
+      pageSize,
+      primarySort.field,
+      primarySort.dir,
+    ],
+  );
+
+  const toggleSort = React.useCallback(
+    (field: MovimientoSortField, additive = false) => {
+      setSorts((previousSorts) => {
+        const index = previousSorts.findIndex((sort) => sort.field === field);
+
+        if (!additive) {
+          if (index >= 0) {
+            const dir = previousSorts[index].dir === "desc" ? "asc" : "desc";
+            return [{ field, dir }];
+          }
+          return [{ field, dir: "asc" }];
+        }
+
+        if (index >= 0) {
+          const nextSorts = [...previousSorts];
+          nextSorts[index] = {
+            field,
+            dir: nextSorts[index].dir === "desc" ? "asc" : "desc",
+          };
+          return nextSorts;
+        }
+
+        return [...previousSorts, { field, dir: "asc" }];
+      });
+    },
+    [],
+  );
+
+  const loadAll = React.useCallback(
+    () => loadMovimientos(buildFilter()),
+    [loadMovimientos, buildFilter],
+  );
+
+  const saveMovimiento = React.useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const isValid = validateForm();
+      if (!isValid) {
+        return false;
+      }
+
+      const result = await MovimientosSvc.createMovimientos(
+        form as CrearActivoMovimientoDTO,
+      );
+
+      if (!result.status) {
+        const message =
+          result.message ?? "Error registrando el movimiento en la bitácora";
+        setError(message);
+        toast.error(message);
+        return false;
+      }
+
+      toast.success("Movimiento registrado correctamente");
+      await loadAll();
+      resetForm();
+      return true;
+    } catch (saveError) {
+      const message =
+        saveError instanceof Error
+          ? saveError.message
+          : "Error registrando el movimiento";
+      setError(message);
+      toast.error(message);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }, [MovimientosSvc, form, validateForm, loadAll, resetForm]);
+
+  const criteriaKey = React.useMemo(
+    () =>
+      JSON.stringify({
+        activoId,
+        tipoEventoFiltro,
+        pageSize,
+        search: debouncedSearch.trim(),
+        sortField: primarySort.field,
+        sortDir: primarySort.dir,
+      }),
+    [
+      activoId,
+      tipoEventoFiltro,
+      pageSize,
+      debouncedSearch,
+      primarySort.field,
+      primarySort.dir,
+    ],
+  );
+
+  const previousCriteriaRef = React.useRef(criteriaKey);
+
+  React.useEffect(() => {
+    const criteriaChanged = previousCriteriaRef.current !== criteriaKey;
+    previousCriteriaRef.current = criteriaKey;
+
+    if (criteriaChanged && pageIndex !== 1) {
+      setPageIndex(1);
+      return;
+    }
+
+    loadAll();
+  }, [criteriaKey, pageIndex, loadAll]);
+
+  const nextPage = React.useCallback(() => {
+    if (!hasNext) return;
+    setPageIndex((currentPage) => currentPage + 1);
+  }, [hasNext]);
+
+  const prevPage = React.useCallback(() => {
+    setPageIndex((currentPage) => Math.max(1, currentPage - 1));
+  }, []);
+
+  return {
+    movimientos,
+    form,
+    formErrors,
+    loading,
+    error,
+
+    setField,
+    resetForm,
+    validateForm,
+    loadMovimientos,
+    saveMovimiento,
+
+    search,
+    setSearch,
+    tipoEventoFiltro,
+    setTipoEventoFiltro,
+    pageIndex,
+    pageSize,
+    setPageSize,
+    total,
+    hasNext,
+    nextPage,
+    prevPage,
+    loadAll,
+    sorts,
+    toggleSort,
+  };
+}
diff --git a/src/Funcionalidades/inventario/useActivoPrestamo.ts b/src/Funcionalidades/inventario/useActivoPrestamo.ts
new file mode 100644
index 0000000..de3311f
--- /dev/null
+++ b/src/Funcionalidades/inventario/useActivoPrestamo.ts
@@ -0,0 +1,264 @@
+import * as React from "react";
+import { useRepositories } from "../../repositories/repositoriesContext";
+import { useAuth } from "../../auth/authContext";
+import type { prestamos } from "../../Models/prestamos";
+import type { EstadoActivo } from "../../Models/ActivosTIMovimientos";
+import type { FlowToUser } from "../../Models/FlujosPA";
+import { useGraphServices } from "../../graph/GrapServicesContext";
+import { FlowClient } from "../shared/FlowClient";
+import { PRESTAMOS_FLOW_URL } from "../loans/prestamos";
+import { toISODateTimeFlex } from "../../utils/Date";
+import { escapeHTML } from "../../utils/Text";
+import toast from "react-hot-toast";
+
+export function useActivoPrestamo() {
+  const { activosTI, movimientosTI, activotickets, tickets, logs } =
+    useRepositories();
+  const { prestamos: prestamosSvc } = useGraphServices();
+  const { account } = useAuth();
+
+  // Al iniciar un préstamo: el activo prestado pasa a "en_prestamo" y queda en la bitacora.
+
+  const iniciarPrestamoActivo = React.useCallback(
+    async (prestamo: prestamos, comentario?: string): Promise<boolean> => {
+      if (
+        !prestamo.Id ||
+        !prestamo.Id_dispositivo ||
+        !activosTI ||
+        !movimientosTI
+      )
+        return false;
+
+      // Id_dispositivo ahora guarda el id del activo.
+      const {
+        data: activo,
+        status,
+        message,
+      } = await activosTI.getActivoById(prestamo.Id_dispositivo);
+      if (!status || !activo) {
+        console.error("No se encontró el activo del préstamo:", message);
+        toast.error("No se encontró el activo del préstamo");
+        return false;
+      }
+
+      // 1. Bitácora (guarda el estado anterior para devolverlo al cerrar)
+      const mov = await movimientosTI.createMovimientos({
+        activo_id: activo.id,
+        estado_anterior: activo.estado,
+        estado_nuevo: "en_prestamo",
+        ubicacion_origen: activo.ubicacion_tipo,
+        ubicacion_destino: activo.ubicacion_tipo,
+        usuario_origen_nombre: activo.nombre_usuario || "",
+        usuario_origen_correo: activo.correo_usuario || "",
+        usuario_destino_nombre: prestamo.nombreSolicitante,
+        usuario_destino_correo: prestamo.Title,
+        responsable_nombre: account?.name ?? account?.username ?? "",
+        responsable_correo: account?.username ?? "",
+        ticket_id: prestamo.IdTicket ? String(prestamo.IdTicket) : undefined,
+        comentario: comentario?.trim() || undefined,
+      });
+      if (!mov.status) {
+        console.error(
+          "No se pudo registrar el préstamo en la bitácora:",
+          mov.message,
+        );
+        toast.error("No se pudo registrar el préstamo en la bitácora");
+        return false;
+      }
+
+      // 2. Activo: estado "en préstamo" + referencia al préstamo activo
+      const upd = await activosTI.updateActivo(activo.id, {
+        estado: "en_prestamo",
+        prestamo_activo_id: String(prestamo.Id),
+        nombre_usuario: prestamo.nombreSolicitante,
+        correo_usuario: prestamo.Title,
+      });
+      if (!upd.status) {
+        console.error("No se pudo marcar el activo en préstamo:", upd.message);
+        toast.error("No se pudo marcar el activo en préstamo");
+        return false;
+      }
+      if (prestamo.IdTicket && activotickets) {
+        const link = await activotickets.createActivoTicket({
+          activo_id: activo.id,
+          ticket_id: Number(prestamo.IdTicket),
+          vinculado_por_nombre: account?.name ?? account?.username ?? "",
+        });
+        if (!link.status) {
+          console.error(
+            "No se pudo vincular el ticket al activo:",
+            link.message,
+          );
+          toast.error("No se pudo vincular el ticket al activo");
+        }
+      }
+
+      toast.success("Activo marcado en préstamo");
+      return true;
+    },
+    [activosTI, movimientosTI, activotickets, account?.name, account?.username],
+  );
+
+  // Al devolver: el activo vuelve a su estado anterior y queda en la bitácora.
+  // Devuelve true si el activo quedó actualizado.
+  const finalizarPrestamoActivo = React.useCallback(
+    async (prestamo: prestamos, comentario?: string): Promise<boolean> => {
+      if (!prestamo.Id_dispositivo || !activosTI || !movimientosTI)
+        return false;
+      const {
+        data: activo,
+        status,
+        message,
+      } = await activosTI.getActivoById(prestamo.Id_dispositivo);
+      if (!status || !activo) {
+        console.error("No se encontró el activo del préstamo:", message);
+        toast.error("No se encontró el activo del préstamo");
+        return false;
+      }
+      if (activo.estado !== "en_prestamo") return false;
+      const ultimo = await movimientosTI.loadMovimientos({
+        activo_id: activo.id,
+        estado_nuevo: "en_prestamo",
+        paginated: true,
+        pageSize: 1,
+        sortField: "fecha_evento",
+        sortDir: "desc",
+      });
+      const estadoAnterior =
+        (ultimo.data[0]?.estado_anterior as EstadoActivo | undefined) ??
+        "Disponible";
+      const usuarioAnteriorNombre = ultimo.data[0]?.usuario_origen_nombre ?? "";
+      const usuarioAnteriorCorreo = ultimo.data[0]?.usuario_origen_correo ?? "";
+
+      // 1. Bitácora
+      const mov = await movimientosTI.createMovimientos({
+        activo_id: activo.id,
+        estado_anterior: "en_prestamo",
+        estado_nuevo: estadoAnterior,
+        ubicacion_origen: activo.ubicacion_tipo,
+        ubicacion_destino: activo.ubicacion_tipo,
+        usuario_origen_nombre: prestamo.nombreSolicitante,
+        usuario_origen_correo: prestamo.Title,
+        usuario_destino_nombre: usuarioAnteriorNombre,
+        usuario_destino_correo: usuarioAnteriorCorreo,
+        responsable_nombre: account?.name ?? account?.username ?? "",
+        responsable_correo: account?.username ?? "",
+        ticket_id: prestamo.IdTicket ? String(prestamo.IdTicket) : undefined,
+        comentario: comentario?.trim() || undefined,
+      });
+      if (!mov.status) {
+        console.error(
+          "No se pudo registrar la devolución en la bitácora:",
+          mov.message,
+        );
+        toast.error("No se pudo registrar la devolución en la bitácora");
+        return false;
+      }
+
+      // 2. Activo: vuelve a su estado y deja de apuntar al préstamo
+      const upd = await activosTI.updateActivo(activo.id, {
+        estado: estadoAnterior,
+        prestamo_activo_id: null,
+        nombre_usuario: usuarioAnteriorNombre,
+        correo_usuario: usuarioAnteriorCorreo,
+      });
+      if (!upd.status) {
+        console.error(
+          "No se pudo actualizar el activo al devolverlo:",
+          upd.message,
+        );
+        toast.error("No se pudo actualizar el activo al devolverlo");
+        return false;
+      }
+      toast.success("Activo devuelto a su estado anterior");
+      return true;
+    },
+    [activosTI, movimientosTI, account?.name, account?.username],
+  );
+
+  // Devolución completa desde la ficha (sin pruebas):
+  // cierra el préstamo y su ticket, deja el seguimiento, devuelve el activo
+  // a su estado anterior y avisa al usuario por correo.
+  const devolverPrestamoActivo = React.useCallback(
+    async (
+      prestamo: prestamos,
+      buenEstado: boolean,
+      comentario?: string,
+    ): Promise<boolean> => {
+      if (!prestamo.Id || !prestamosSvc) return false;
+      const estadoDevolucion = buenEstado ? "Buen estado" : "Mal estado";
+      const ahora = toISODateTimeFlex(new Date());
+
+      try {
+        // 1. Préstamo cerrado (lista de SharePoint)
+        await prestamosSvc.update(prestamo.Id, {
+          Estado: "Cerrado",
+          FechaDevolucion: ahora,
+          UsuarioRecibe: account?.name ?? "",
+        });
+
+        // 2. Ticket del préstamo cerrado + seguimiento
+        if (prestamo.IdTicket) {
+          await tickets?.updateTicket(prestamo.IdTicket, {
+            Estadodesolicitud: "Cerrado",
+            FechaMaxima: ahora,
+          });
+          await logs?.createLog({
+            seguimientos_solvi_actor: "Sistema",
+            seguimientos_solvi_descripcion: `
+              Se ha cerrado el ticket ${escapeHTML(prestamo.IdTicket)} asociado al préstamo de equipo.<br><br>
+              <strong>El equipo fue recibido por:</strong> ${escapeHTML(account?.name ?? "")}<br>
+              <strong>Estado de devolución:</strong> ${estadoDevolucion}
+              ${comentario?.trim() ? `<br><strong>Comentario:</strong> ${escapeHTML(comentario.trim())}` : ""}
+            `.trim(),
+            seguimientos_solvi_tipo_de_accion: "Cierre",
+            seguimientos_solvi_id_ticket: Number(prestamo.IdTicket),
+            seguimientos_solvi_correo_actor: "",
+            seguimientos_solvi_action_date: new Date(),
+          });
+        }
+      } catch (err) {
+        console.error("Error cerrando el préstamo:", err);
+        toast.error("No se pudo cerrar el préstamo");
+        return false;
+      }
+
+      // 3. Activo: vuelve a su estado anterior + bitácora
+      const ok = await finalizarPrestamoActivo(prestamo, comentario);
+      if (!ok) return false;
+
+      // 4. Correo al usuario (si falla no bloquea la devolución)
+      new FlowClient(PRESTAMOS_FLOW_URL)
+        .invoke<FlowToUser, unknown>({
+          recipient: prestamo.Title,
+          title: "Notificación de prestamo",
+          message: `
+            <p>
+              ¡Hola ${escapeHTML(prestamo.nombreSolicitante ?? "")}!<br><br>
+              Hemos registrado la devolución del equipo que tenías en préstamo.<br><br>
+              <strong>Estado de devolución:</strong> ${estadoDevolucion}<br><br>
+              ${
+                buenEstado
+                  ? "Gracias por devolver el dispositivo en buen estado."
+                  : "El dispositivo no fue devuelto en buen estado. Nos pondremos en contacto contigo para informarte los próximos pasos."
+              }<br><br>
+              Este es un mensaje automático, por favor no respondas.
+            </p>`.trim(),
+          mail: true,
+        })
+        .catch((err) => {
+          console.error("Error notificando la devolución:", err);
+          toast.error("No se pudo enviar el correo de devolución al usuario");
+        });
+
+      return true;
+    },
+    [prestamosSvc, tickets, logs, account?.name, finalizarPrestamoActivo],
+  );
+
+  return {
+    iniciarPrestamoActivo,
+    finalizarPrestamoActivo,
+    devolverPrestamoActivo,
+  };
+}
diff --git a/src/Funcionalidades/inventario/useActivoTickets.ts b/src/Funcionalidades/inventario/useActivoTickets.ts
new file mode 100644
index 0000000..86344eb
--- /dev/null
+++ b/src/Funcionalidades/inventario/useActivoTickets.ts
@@ -0,0 +1,93 @@
+import * as React from "react";
+import type {
+  ActivoTicket,
+  CrearActivoTicketDTO,
+} from "../../Models/ActivoTicket";
+import type { ActivoTicketRepository } from "../../repositories/ActivoTicketRepository/ActivoTicketRepository";
+import type { FilterActivoTicket } from "../../repositories/ActivoTicketRepository/ActivoTicketRepository";
+
+type UseActivoTicketParams = {
+  ActivosTicketSvc: ActivoTicketRepository;
+};
+export function useActivoTicket({ ActivosTicketSvc }: UseActivoTicketParams) {
+  const [loading, setLoading] = React.useState(false);
+
+  const [form, setForm] = React.useState<Partial<CrearActivoTicketDTO>>({});
+  const [formErrors, setFormErrors] = React.useState<Record<string, string>>(
+    {},
+  );
+  const [error, setError] = React.useState<string | null>(null);
+  const [activoticket, setActivoTicket] = React.useState<ActivoTicket[]>([]);
+
+  const setField = React.useCallback(
+    <K extends keyof CrearActivoTicketDTO>(
+      key: K,
+      value: CrearActivoTicketDTO[K],
+    ) => {
+      setForm((currentForm) => ({
+        ...currentForm,
+        [key]: value,
+      }));
+    },
+    [],
+  );
+
+  const resetForm = React.useCallback(() => {
+    setForm({});
+    setFormErrors({});
+  }, []);
+
+  const validateForm = React.useCallback(() => {
+    const errors: Record<string, string> = {};
+
+    if (!form.activo_id) errors.activo_id = "El activo es requerido";
+    if (!form.ticket_id) errors.ticket_id = "El ticket es requerido";
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  }, [form]);
+
+  const loadActivoTicket = React.useCallback(
+    async (filter?: FilterActivoTicket) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await ActivosTicketSvc.loadActivoTicket(filter);
+        if (!result.status) {
+          setError(result.message ?? "Error cargando los vinculos");
+          setActivoTicket([]);
+          return false;
+        }
+        setActivoTicket(result.data ?? []);
+
+        return true;
+      } catch (loadError) {
+        setError(
+          loadError instanceof Error
+            ? loadError.message
+            : "Error cargando los activos",
+        );
+        setActivoTicket([]);
+
+        return false;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [ActivosTicketSvc],
+  );
+
+  return {
+    activoticket,
+    error,
+    loading,
+
+    form,
+    formErrors,
+    setField,
+    resetForm,
+    validateForm,
+
+    loadActivoTicket,
+  };
+}
diff --git a/src/Funcionalidades/inventario/useActivosTI.ts b/src/Funcionalidades/inventario/useActivosTI.ts
new file mode 100644
index 0000000..c81f649
--- /dev/null
+++ b/src/Funcionalidades/inventario/useActivosTI.ts
@@ -0,0 +1,290 @@
+import type { EstadoActivo } from "../../Models/ActivosTIMovimientos";
+import * as React from "react";
+import type {
+  ActivoTI,
+  ActualizarActivoDTO,
+  // CategoriaActivo,
+  CrearActivoDTO,
+  Ubicacion_Tipo,
+  ActivoTIErrors,
+} from "../../Models/ActivoTI";
+import { validarActivoTI } from "../../Models/ActivoTI";
+import type { ActivosTIRepository } from "../../repositories/ActivosTIRepository/ActivosTIRepository";
+import type { FilterActivosTI } from "../../repositories/ActivosTIRepository/ActivosTIRepository";
+import { capitalCase } from 'change-case';
+import toast from "react-hot-toast";
+
+const DEFAULT_PAGE_SIZE = 10;
+
+function useDebouncedValue<T>(value: T, delay = 300) {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timeout);
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+type UseActivosTIParams = {
+  ActivosSvc: ActivosTIRepository;
+};
+export function useActivosTI({ ActivosSvc }: UseActivosTIParams) {
+  const [activos, setActivos] = React.useState<ActivoTI[]>([]);
+  const [form, setForm] = React.useState<Partial<CrearActivoDTO>>({});
+  const [formErrors, setFormErrors] = React.useState<ActivoTIErrors>({});
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [selectedActivo, setSelectedActivo] = React.useState<ActivoTI | null>(
+    null,
+  );
+
+  const [search, setSearch] = React.useState("");
+  // const [categoriaFiltro, setCategoriaFiltro] = React.useState<
+  //   CategoriaActivo | ""
+  // >("");
+  const [estadoFiltro, setEstadoFiltro] = React.useState<EstadoActivo | "">("");
+  const [ubicacionFiltro, setUbicacionFiltro] = React.useState<
+    Ubicacion_Tipo | ""
+  >("");
+  const [pageIndex, setPageIndex] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(DEFAULT_PAGE_SIZE);
+  const [total, setTotal] = React.useState(0);
+  const [hasNext, setHasNext] = React.useState(false);
+
+  const debouncedSearch = useDebouncedValue(search);
+
+  const setField = React.useCallback(
+    <K extends keyof CrearActivoDTO>(key: K, value: CrearActivoDTO[K]) => {
+      setForm((currentForm) => ({
+        ...currentForm,
+        [key]: value,
+      }));
+    },
+    [],
+  );
+
+  const resetForm = React.useCallback(() => {
+    setForm({});
+    setFormErrors({});
+    setSelectedActivo(null);
+  }, []);
+
+  const validateForm = React.useCallback(() => {
+    const errors = validarActivoTI(form);
+
+    setFormErrors(errors);
+
+    return Object.keys(errors).length === 0;
+  }, [form]);
+
+  const loadActivos = React.useCallback(
+    async (filter?: FilterActivosTI) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await ActivosSvc.loadActivos(filter);
+        if (!result.status) {
+          setError(result.message ?? "Error cargando los activos");
+          return false;
+        }
+        setActivos(result.data ?? []);
+        setTotal(result.total ?? result.data?.length ?? 0);
+        setHasNext(result.hasNext ?? false);
+        return true;
+      } catch (loadError) {
+        setError(
+          loadError instanceof Error
+            ? loadError.message
+            : "Error cargando los activos",
+        );
+        setActivos([]);
+        setTotal(0);
+        setHasNext(false);
+        return false;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [ActivosSvc],
+  );
+
+  const buildFilter = React.useCallback(
+    (): FilterActivosTI => ({
+      // categoria: categoriaFiltro || undefined,
+      estado: estadoFiltro || undefined,
+      ubicacion_tipo: ubicacionFiltro || undefined,
+      search: debouncedSearch.trim() || undefined,
+      pageIndex,
+      pageSize,
+      paginated: true,
+    }),
+    [
+      // categoriaFiltro,
+      estadoFiltro,
+      ubicacionFiltro,
+      debouncedSearch,
+      pageIndex,
+      pageSize,
+    ],
+  );
+
+  const saveActivo = React.useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const isValid = validateForm();
+      if (!isValid) {
+        return false;
+      }
+      // No se permiten dos activos con el mismo serial
+      const serial = form.numero_serie?.trim() ?? "";
+      const existente = await ActivosSvc.getActivoBySerial(serial);
+      if (!existente.status) {
+        const message = existente.message ?? "No se pudo validar el serial";
+        setError(message);
+        toast.error(message);
+        return false;
+      }
+      if (existente.data && existente.data.id !== selectedActivo?.id) {
+        setFormErrors((prev) => ({
+          ...prev,
+          numero_serie: `Ya existe un activo con este serial (código ${existente.data!.codigo_inventario})`,
+        }));
+        toast.error("Ya existe un activo con este serial");
+        return false;
+      }
+      const result = selectedActivo
+        ? await ActivosSvc.updateActivo(
+            selectedActivo.id,
+            {...form, tipo: capitalCase(form.tipo ?? ""), marca: capitalCase(form.marca ?? "")} as ActualizarActivoDTO,
+          )
+        : await ActivosSvc.createActivo({
+            ...form,
+            tipo: capitalCase(form.tipo ?? ""),
+            marca: capitalCase(form.marca ?? ""),
+            estado: "Disponible",
+          } as CrearActivoDTO);
+      if (!result.status) {
+        const message = result.message ?? "Error guardando el activo";
+        setError(message);
+        toast.error(message);
+        return false;
+      }
+      await loadActivos(buildFilter());
+      toast.success(`Activo ${selectedActivo ? "actualizado" : "creado"} correctamente`);
+      resetForm();
+      return true;
+    } catch (saveError) {
+      const message =
+        saveError instanceof Error
+          ? saveError.message
+          : "Error guardando el activo";
+      setError(message);
+      toast.error(message);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    ActivosSvc,
+    form,
+    selectedActivo,
+    validateForm,
+    loadActivos,
+    buildFilter,
+    resetForm,
+  ]);
+
+  const loadAll = React.useCallback(
+    () => loadActivos(buildFilter()),
+    [loadActivos, buildFilter],
+  );
+
+  const criteriaKey = React.useMemo(
+    () =>
+      JSON.stringify({
+        // categoriaFiltro,
+        estadoFiltro,
+        ubicacionFiltro,
+        pageSize,
+        search: debouncedSearch.trim(),
+      }),
+    [estadoFiltro, ubicacionFiltro, pageSize, debouncedSearch],
+  );
+  const previousCriteriaRef = React.useRef(criteriaKey);
+
+  React.useEffect(() => {
+    const criteriaChanged = previousCriteriaRef.current !== criteriaKey;
+    previousCriteriaRef.current = criteriaKey;
+
+    if (criteriaChanged && pageIndex !== 1) {
+      setPageIndex(1);
+      return;
+    }
+
+    loadAll();
+  }, [criteriaKey, pageIndex, loadAll]);
+
+  const nextPage = React.useCallback(() => {
+    if (!hasNext) return;
+    setPageIndex((currentPage) => currentPage + 1);
+  }, [hasNext]);
+
+  const prevPage = React.useCallback(() => {
+    setPageIndex((currentPage) => Math.max(1, currentPage - 1));
+  }, []);
+  const selectActivo = React.useCallback((activo: ActivoTI) => {
+    setSelectedActivo(activo);
+    setForm({
+      codigo_inventario: activo.codigo_inventario,
+      // categoria: activo.categoria,
+      tipo: activo.tipo,
+      marca: activo.marca,
+      modelo: activo.modelo,
+      numero_serie: activo.numero_serie,
+      fecha_ingreso: activo.fecha_ingreso,
+      estado: activo.estado,
+      ubicacion_tipo: activo.ubicacion_tipo,
+      nombre_usuario: activo.nombre_usuario,
+      correo_usuario: activo.correo_usuario,
+    });
+    setFormErrors({});
+    setError(null);
+  }, []);
+
+  return {
+    activos,
+    form,
+    formErrors,
+    loading,
+    error,
+    selectedActivo,
+
+    setField,
+    resetForm,
+    validateForm,
+    loadActivos,
+    saveActivo,
+    selectActivo,
+
+    search,
+    setSearch,
+    // categoriaFiltro,
+    // setCategoriaFiltro,
+    estadoFiltro,
+    setEstadoFiltro,
+    ubicacionFiltro,
+    setUbicacionFiltro,
+    pageIndex,
+    pageSize,
+    setPageSize,
+    total,
+    hasNext,
+    nextPage,
+    prevPage,
+    loadAll,
+  };
+}
diff --git a/src/Funcionalidades/inventario/utils/ActivosColors.ts b/src/Funcionalidades/inventario/utils/ActivosColors.ts
new file mode 100644
index 0000000..e9ad203
--- /dev/null
+++ b/src/Funcionalidades/inventario/utils/ActivosColors.ts
@@ -0,0 +1,11 @@
+import type { EstadoActivo } from "../../../Models/ActivosTIMovimientos";
+
+const COLORES_ESTADO: Record<EstadoActivo, string> = {
+  Disponible: "rgb(34, 197, 94)",
+  Asignado: "rgb(59, 130, 246)",
+  en_prestamo: "rgb(245, 158, 11)",
+};
+
+export function colorEstadoActivo(estado?: EstadoActivo | null): string {
+  return (estado && COLORES_ESTADO[estado]) || "rgb(150, 150, 150)";
+}
diff --git a/src/Funcionalidades/loans/prestamos.ts b/src/Funcionalidades/loans/prestamos.ts
index 3b60b82..b3fd044 100644
--- a/src/Funcionalidades/loans/prestamos.ts
+++ b/src/Funcionalidades/loans/prestamos.ts
@@ -1,7 +1,15 @@
 import * as React from "react";
 import type { GetAllOpts, PageResult } from "../../Models/Commons";
 import { useGraphServices } from "../../graph/GrapServicesContext";
-import type { dispositivos, dispositivosErrors, prestamos, prestamosErrors, pruebasDefinidas, pruebasDispositos, pruebasPrestamo } from "../../Models/prestamos";
+import type {
+  dispositivos,
+  dispositivosErrors,
+  prestamos,
+  prestamosErrors,
+  pruebasDefinidas,
+  pruebasDispositos,
+  pruebasPrestamo,
+} from "../../Models/prestamos";
 import { toISODateTimeFlex } from "../../utils/Date";
 import { useAuth } from "../../auth/authContext";
 import { FlowClient } from "../shared/FlowClient";
@@ -9,12 +17,15 @@ import type { FlowToUser } from "../../Models/FlujosPA";
 import { escapeHTML } from "../../utils/Text";
 import { useRepositories } from "../../repositories/repositoriesContext";
 
+// Flujo de Power Automate que envía los correos de préstamo/devolución
+export const PRESTAMOS_FLOW_URL =
+  "https://defaultcd48ecd97e154f4b97d9ec813ee42b.2c.environment.api.powerplatform.com:443/powerautomate/automations/direct/workflows/a21d66d127ff43d7a940369623f0b27d/triggers/manual/paths/invoke?api-version=1&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=0ptZLGTXbYtVNKdmIvLdYPhw1Wcqb869N3AOZUf2OH4";
+
 export function usePrestamos() {
-  const {prestamos,} = useGraphServices()
-  const {logs} = useRepositories()
-  const {tickets} = useRepositories()
-  const {dispositivosById} = useDispositivos()
-  const {loadPruebasPrestamo} = usePruebas()
+  const { prestamos } = useGraphServices();
+  const { logs } = useRepositories();
+  const { tickets } = useRepositories();
+  const { loadPruebasPrestamo } = usePruebas();
 
   const [rows, setRows] = React.useState<prestamos[]>([]);
   const [loading, setLoading] = React.useState(false);
@@ -22,44 +33,59 @@ export function usePrestamos() {
   const [error, setError] = React.useState<string | null>(null);
   const [estado, setEstado] = React.useState<string>("Activo");
   const [search, setSearch] = React.useState<string>("");
-  const [state, setState] = React.useState<prestamos>({Estado: "Activo", FechaDevolucion: null, FechaPrestamo: toISODateTimeFlex(new Date()), Id_dispositivo: "", UsuarioRecibe: "", Title: "", IdTicket: "", nombreSolicitante: ""});
-  const setField = <K extends keyof prestamos>(k: K, v: prestamos[K]) => setState((s) => ({ ...s, [k]: v })); 
+  const [state, setState] = React.useState<prestamos>({
+    Estado: "Activo",
+    FechaDevolucion: null,
+    FechaPrestamo: toISODateTimeFlex(new Date()),
+    Id_dispositivo: "",
+    UsuarioRecibe: "",
+    Title: "",
+    IdTicket: "",
+    nombreSolicitante: "",
+  });
+  const setField = <K extends keyof prestamos>(k: K, v: prestamos[K]) =>
+    setState((s) => ({ ...s, [k]: v }));
   const [errors, setErrors] = React.useState<prestamosErrors>({});
-  const {account} = useAuth()
-  const notifyFlow = new FlowClient("https://defaultcd48ecd97e154f4b97d9ec813ee42b.2c.environment.api.powerplatform.com:443/powerautomate/automations/direct/workflows/a21d66d127ff43d7a940369623f0b27d/triggers/manual/paths/invoke?api-version=1&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=0ptZLGTXbYtVNKdmIvLdYPhw1Wcqb869N3AOZUf2OH4")
-  
+  const { account } = useAuth();
+  const notifyFlow = new FlowClient(PRESTAMOS_FLOW_URL);
+
   const buildFilter = React.useCallback((): GetAllOpts => {
     const filters: string[] = [];
 
-    if(estado && estado !== "all") filters.push(`fields/Estado eq '${estado}'`);
+    if (estado && estado !== "all")
+      filters.push(`fields/Estado eq '${estado}'`);
 
     return {
       filter: filters.join(" and "),
-      orderby: "fields/Created asc", 
+      orderby: "fields/Created asc",
     };
-  }, [estado,]);
+  }, [estado]);
 
   const validate = () => {
     const e: prestamosErrors = {};
-    if (!state.Id_dispositivo) e.Id_dispositivo = "Ingrese la referencia del dispositivo";
+    if (!state.Id_dispositivo)
+      e.Id_dispositivo = "Ingrese la referencia del dispositivo";
     if (!state.Title) e.Title = "Seleccione el solicitante del préstamo";
     setErrors(e);
     return Object.keys(e).length === 0;
   };
 
-  const handleSubmit = async (): Promise<{continue: boolean, created: prestamos | null}> => {
+  const handleSubmit = async (): Promise<{
+    continue: boolean;
+    created: prestamos | null;
+  }> => {
     if (!validate()) {
-      alert("Por favor rellene todos los campos")
-      return {continue: false, created: null};
-    };
+      alert("Por favor rellene todos los campos");
+      return { continue: false, created: null };
+    }
 
     setSubmitting(true);
     try {
-      const ticket =await tickets?.createTicket({
-        AsuntoTicket: "Prestamo de equipo a " + state.nombreSolicitante, 
-        ANS: "N/A", 
-        Categoria: "Otros", 
-        Descripcion: `Préstamo del dispositivo con ID ${state.Id_dispositivo} a ${state.Title} el día ${state.FechaPrestamo}.`, 
+      const ticket = await tickets?.createTicket({
+        AsuntoTicket: "Prestamo de equipo a " + state.nombreSolicitante,
+        ANS: "N/A",
+        Categoria: "Otros",
+        Descripcion: `Préstamo del dispositivo con ID ${state.Id_dispositivo} a ${state.Title} el día ${state.FechaPrestamo}.`,
         CorreoSolicitante: state.Title,
         Correoresolutor: account?.username ?? "",
         Estadodesolicitud: "En Atención",
@@ -75,38 +101,51 @@ export function usePrestamos() {
         Observador: "",
       });
       await logs?.createLog({
-        seguimientos_solvi_actor: "Sistema", 
-        seguimientos_solvi_descripcion: `Se ha creado el ticket ${ticket?.data?.ID} para el préstamo de equipo.`, 
-        seguimientos_solvi_tipo_de_accion: "Creacion",  
-        seguimientos_solvi_id_ticket: Number(ticket?.data?.ID), 
+        seguimientos_solvi_actor: "Sistema",
+        seguimientos_solvi_descripcion: `Se ha creado el ticket ${ticket?.data?.ID} para el préstamo de equipo.`,
+        seguimientos_solvi_tipo_de_accion: "Creacion",
+        seguimientos_solvi_id_ticket: Number(ticket?.data?.ID),
         seguimientos_solvi_correo_actor: "",
-        seguimientos_solvi_action_date: new Date()
-      })
+        seguimientos_solvi_action_date: new Date(),
+      });
       const payload: prestamos = {
         Title: state.Title!,
         Id_dispositivo: state.Id_dispositivo!,
         Estado: "Activo",
-        FechaPrestamo: state.FechaPrestamo!,
-        IdTicket: ticket?.data?.ID ?? "",
+        FechaPrestamo: new Date().toISOString(),
+        IdTicket: ticket?.data?.ID?.toString() ?? "",
         FechaDevolucion: null,
         UsuarioRecibe: "",
         nombreSolicitante: state.nombreSolicitante!,
-
-      }
+      };
       const prestamo = await prestamos.create(payload);
 
       alert("Prestamo creado exitosamente");
-      setState({Estado: "Activo", FechaDevolucion: null, FechaPrestamo: toISODateTimeFlex(new Date()), Id_dispositivo: "", IdTicket: "", UsuarioRecibe: "", Title: "", nombreSolicitante: ""});
+      setState({
+        Estado: "Activo",
+        FechaDevolucion: null,
+        FechaPrestamo: toISODateTimeFlex(new Date()),
+        Id_dispositivo: "",
+        IdTicket: "",
+        UsuarioRecibe: "",
+        Title: "",
+        nombreSolicitante: "",
+      });
       load();
-      return {continue: true, created: prestamo};
+      return { continue: true, created: prestamo };
     } catch (err) {
       console.error("Error en handleSubmit:", err);
-      return {continue: false, created: null}
-    }  
+      return { continue: false, created: null };
+    }
   };
 
-  const notify = async (prestamo: prestamos, dispositivos: dispositivos[]): Promise<void> => {
-    const dispositivo = dispositivos.find(d => d.Id === prestamo.Id_dispositivo);
+  const notify = async (
+    prestamo: prestamos,
+    dispositivos: dispositivos[],
+  ): Promise<void> => {
+    const dispositivo = dispositivos.find(
+      (d) => d.Id === prestamo.Id_dispositivo,
+    );
     const message = `
       <p>
         ¡Hola ${prestamo.nombreSolicitante ?? ""}!<br><br>
@@ -119,11 +158,22 @@ export function usePrestamos() {
 
         Este es un mensaje automático, por favor no respondas.
       </p>`.trim();
-    await notifyFlow.invoke<FlowToUser, any>({recipient: prestamo.Title, title: "Notificación de prestamo", message, mail: true})
-  }
+    await notifyFlow.invoke<FlowToUser, any>({
+      recipient: prestamo.Title,
+      title: "Notificación de prestamo",
+      message,
+      mail: true,
+    });
+  };
 
-  const notifyEstado = async (prestamo: prestamos, dispositivos: dispositivos[], estado: string): Promise<void> => {
-    const dispositivo = dispositivos.find(d => d.Id === prestamo.Id_dispositivo);
+  const notifyEstado = async (
+    prestamo: prestamos,
+    dispositivos: dispositivos[],
+    estado: string,
+  ): Promise<void> => {
+    const dispositivo = dispositivos.find(
+      (d) => d.Id === prestamo.Id_dispositivo,
+    );
     const message = `
       <p>
         ¡Hola ${prestamo.nombreSolicitante ?? ""}!<br><br>
@@ -133,14 +183,21 @@ export function usePrestamos() {
         <strong>Dispositivo prestado:</strong>  ${dispositivo?.Referencia ?? ""}<br><br>
         <strong>Estado de devolucion:</strong> ${estado}<br><br>
 
-        ${estado.toLocaleLowerCase() === "mal estado" ? 
-          "Lamentablemente el dispositivo no fue devuelto en buen estado. Nos pondremos en contacto contigo para informarte sobre los próximos pasos a seguir." : 
-          "Gracias por devolver el dispositivo en buen estado. Si necesitas realizar otro préstamo, no dudes en contactarnos."}<br><br>
+        ${
+          estado.toLocaleLowerCase() === "mal estado"
+            ? "Lamentablemente el dispositivo no fue devuelto en buen estado. Nos pondremos en contacto contigo para informarte sobre los próximos pasos a seguir."
+            : "Gracias por devolver el dispositivo en buen estado. Si necesitas realizar otro préstamo, no dudes en contactarnos."
+        }<br><br>
 
         Este es un mensaje automático, por favor no respondas.
       </p>`.trim();
-    await notifyFlow.invoke<FlowToUser, any>({recipient: prestamo.Title, title: "Notificación de prestamo", message, mail: true})
-  }
+    await notifyFlow.invoke<FlowToUser, any>({
+      recipient: prestamo.Title,
+      title: "Notificación de prestamo",
+      message,
+      mail: true,
+    });
+  };
 
   const load = React.useCallback(async () => {
     setLoading(true);
@@ -151,7 +208,9 @@ export function usePrestamos() {
       let nextLink: string | undefined = undefined;
 
       do {
-        const res: PageResult<prestamos> = nextLink ? await prestamos.getByNextLink(nextLink)         : await prestamos.getAll(buildFilter());     
+        const res: PageResult<prestamos> = nextLink
+          ? await prestamos.getByNextLink(nextLink)
+          : await prestamos.getAll(buildFilter());
 
         all.push(...(res.items ?? []));
         nextLink = res.nextLink ? res.nextLink : "";
@@ -166,29 +225,36 @@ export function usePrestamos() {
     }
   }, [buildFilter, prestamos]);
 
-  const loadDeviceLoans = React.useCallback(async (idDevice: string): Promise<prestamos[]> => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      const all: prestamos[] = [];
-      let nextLink: string | undefined = undefined;
-
-      do {
-        const res: PageResult<prestamos> = nextLink ? await prestamos.getByNextLink(nextLink) : await prestamos.getAll({filter: `fields/Id_dispositivo eq '${idDevice}'`});     
-
-        all.push(...(res.items ?? []));
-        nextLink = res.nextLink ? res.nextLink : "";
-      } while (nextLink);
-
-      return all
-    } catch (e: any) {
-      setError(e?.message ?? "Error cargando logs");
-      return []
-    } finally {
-      setLoading(false);
-    }
-  }, [buildFilter, prestamos]);
+  const loadDeviceLoans = React.useCallback(
+    async (idDevice: string): Promise<prestamos[]> => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const all: prestamos[] = [];
+        let nextLink: string | undefined = undefined;
+
+        do {
+          const res: PageResult<prestamos> = nextLink
+            ? await prestamos.getByNextLink(nextLink)
+            : await prestamos.getAll({
+                filter: `fields/Id_dispositivo eq '${idDevice}'`,
+              });
+
+          all.push(...(res.items ?? []));
+          nextLink = res.nextLink ? res.nextLink : "";
+        } while (nextLink);
+
+        return all;
+      } catch (e: any) {
+        setError(e?.message ?? "Error cargando logs");
+        return [];
+      } finally {
+        setLoading(false);
+      }
+    },
+    [buildFilter, prestamos],
+  );
 
   const reload = React.useCallback(() => {
     load();
@@ -196,19 +262,30 @@ export function usePrestamos() {
 
   const finalizeLoan = async (loan: prestamos, continuar: boolean) => {
     try {
-      await prestamos.update(loan.Id!, {Estado: "Cerrado", FechaDevolucion: toISODateTimeFlex(new Date()), UsuarioRecibe: account?.name ?? "",});
+      await prestamos.update(loan.Id!, {
+        Estado: "Cerrado",
+        FechaDevolucion: toISODateTimeFlex(new Date()),
+        UsuarioRecibe: account?.name ?? "",
+      });
 
-      await tickets?.updateTicket(loan.IdTicket, {Estadodesolicitud: "Cerrado", FechaMaxima: toISODateTimeFlex(new Date()),});
+      await tickets?.updateTicket(loan.IdTicket, {
+        Estadodesolicitud: "Cerrado",
+        FechaMaxima: toISODateTimeFlex(new Date()),
+      });
 
-      const entregaPrestamo = (await loadPruebasPrestamo(loan.Id!, "Entrega")) ?? [];
-      const devolucionPrestamo = (await loadPruebasPrestamo(loan.Id!, "Devolucion")) ?? [];
+      const entregaPrestamo =
+        (await loadPruebasPrestamo(loan.Id!, "Entrega")) ?? [];
+      const devolucionPrestamo =
+        (await loadPruebasPrestamo(loan.Id!, "Devolucion")) ?? [];
 
       const buildTable = (rows: any[]) => {
-        const filas = rows.map((e) => {
+        const filas = rows
+          .map((e) => {
             const nombre = escapeHTML(e.Title ?? "");
             const resultado = escapeHTML(e.Aprobado);
             return `<tr><td>${nombre}</td><td>${resultado}</td></tr>`;
-          }).join("");
+          })
+          .join("");
 
         return `
           <table class="tbl-entrega" cellpadding="0" cellspacing="0">
@@ -222,7 +299,7 @@ export function usePrestamos() {
               ${filas || `<tr><td colspan="2">Sin pruebas registradas</td></tr>`}
             </tbody>
           </table>`.trim();
-        };
+      };
 
       const tablaEntregaHtml = buildTable(entregaPrestamo);
       const tablaDevolucionHtml = buildTable(devolucionPrestamo);
@@ -246,7 +323,7 @@ export function usePrestamos() {
         seguimientos_solvi_tipo_de_accion: "Cierre",
         seguimientos_solvi_id_ticket: Number(loan.IdTicket),
         seguimientos_solvi_correo_actor: "",
-        seguimientos_solvi_action_date: new Date()
+        seguimientos_solvi_action_date: new Date(),
       });
     } catch (err) {
       console.error("Error finalizando préstamo:", err);
@@ -257,30 +334,42 @@ export function usePrestamos() {
     const q = search.trim().toLowerCase();
     if (!q || q.length < 3) return rows;
 
-    return rows.filter(p => {
-      const d = dispositivosById.get(p.Id_dispositivo);
-
-      return (
+    return rows.filter(
+      (p) =>
         p.Title?.toLowerCase().includes(q) ||
-        p.nombreSolicitante?.toLowerCase().includes(q) ||
-        (d?.Referencia ?? "").toLowerCase().includes(q) ||
-        (d?.Serial ?? "").toLowerCase().includes(q) ||
-        (d?.Title)?.toLowerCase().includes(q)
-      );
-    });
-  }, [rows, search, dispositivosById]);
-  
-
-  React.useEffect(() => { load(); }, [load]);
+        p.nombreSolicitante?.toLowerCase().includes(q),
+    );
+  }, [rows, search]);
 
+  React.useEffect(() => {
+    load();
+  }, [load]);
 
   return {
-    loadDeviceLoans, visibleRows, rows, loading, error, load, reload, estado, setEstado, search, setSearch, handleSubmit, errors, submitting, setField, state, notify, finalizeLoan, notifyEstado
+    loadDeviceLoans,
+    visibleRows,
+    rows,
+    loading,
+    error,
+    load,
+    reload,
+    estado,
+    setEstado,
+    search,
+    setSearch,
+    handleSubmit,
+    errors,
+    submitting,
+    setField,
+    state,
+    notify,
+    finalizeLoan,
+    notifyEstado,
   };
 }
 
 export function useDispositivos() {
-  const {dispositivos} = useGraphServices()
+  const { dispositivos } = useGraphServices();
   const [rows, setRows] = React.useState<dispositivos[]>([]);
   const [loading, setLoading] = React.useState(false);
   const [submitting, setSubmitting] = React.useState(false);
@@ -288,19 +377,27 @@ export function useDispositivos() {
   const [estado, setEstado] = React.useState<string>("all");
   const [search, setSearch] = React.useState<string>("");
   const [errors, setErrors] = React.useState<dispositivosErrors>({});
-  const [state, setState] = React.useState<dispositivos>({Title: "", Referencia: "", Serial: "", Estado: "Disponible"});
-  const setField = <K extends keyof dispositivos>(k: K, v: dispositivos[K]) => setState((s) => ({ ...s, [k]: v }));
+  const [state, setState] = React.useState<dispositivos>({
+    Title: "",
+    Referencia: "",
+    Serial: "",
+    Estado: "Disponible",
+  });
+  const setField = <K extends keyof dispositivos>(k: K, v: dispositivos[K]) =>
+    setState((s) => ({ ...s, [k]: v }));
 
   const buildFilter = React.useCallback((): GetAllOpts => {
     const filters: string[] = [];
 
     //if(estado && estado !== "all") filters.push(`fields/Estado eq '${estado}'`);
-    if(search) filters.push(`startswith(fields/Title, '${search}') or startswith(fields/Referencia, '${search}') or startswith(fields/Serial, '${search}')`);
-
+    if (search)
+      filters.push(
+        `startswith(fields/Title, '${search}') or startswith(fields/Referencia, '${search}') or startswith(fields/Serial, '${search}')`,
+      );
 
     return {
       filter: filters.join(" and "),
-      orderby: "fields/Created asc", 
+      orderby: "fields/Created asc",
     };
   }, [estado, search]);
 
@@ -313,7 +410,9 @@ export function useDispositivos() {
       let nextLink: string | undefined = undefined;
 
       do {
-        const res: PageResult<dispositivos> = nextLink ? await dispositivos.getByNextLink(nextLink) : await dispositivos.getAll(buildFilter());     
+        const res: PageResult<dispositivos> = nextLink
+          ? await dispositivos.getByNextLink(nextLink)
+          : await dispositivos.getAll(buildFilter());
 
         all.push(...(res.items ?? []));
         nextLink = res.nextLink ? res.nextLink : "";
@@ -330,7 +429,8 @@ export function useDispositivos() {
 
   const validate = () => {
     const e: dispositivosErrors = {};
-    if (!state.Referencia) e.Referencia = "Ingrese la referencia del dispositivo";
+    if (!state.Referencia)
+      e.Referencia = "Ingrese la referencia del dispositivo";
     if (!state.Serial) e.Serial = "Ingrese el número de serie del dispositivo";
     if (!state.Title) e.Title = "Ingrese la marca del dispositivo";
     setErrors(e);
@@ -339,9 +439,9 @@ export function useDispositivos() {
 
   const handleSubmit = async () => {
     if (!validate()) {
-      alert("Por favor rellene todos los campos")
+      alert("Por favor rellene todos los campos");
       return;
-    };
+    }
 
     setSubmitting(true);
     try {
@@ -351,50 +451,58 @@ export function useDispositivos() {
         Serial: state.Serial!,
         Estado: state.Estado || "Disponible",
       };
-
+      console.log(payload);
       await dispositivos.create(payload);
 
       alert("Dispositivo agregado exitosamente");
-      setState({Title: "", Referencia: "", Serial: "", Estado: "Disponible"});
+      setState({ Title: "", Referencia: "", Serial: "", Estado: "Disponible" });
       load();
     } catch (err) {
       console.error("Error en handleSubmit:", err);
-    } 
-  };
-
-  const borrowDevice = React.useCallback(async (deviceId: string) => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      await dispositivos.update(deviceId, {Estado: "Prestado"});
-    } catch (e: any) {
-      setError(e?.message ?? "Error cargando logs");
-      setRows([]);
-    } finally {
-      setLoading(false);
     }
-  }, [buildFilter]);
-
-  const deviceReturn = React.useCallback(async (deviceId: string, estado: boolean) => {
-    setLoading(true);
-    setError(null);
+  };
 
-    try {
-      await dispositivos.update(deviceId, {Estado: estado ? "Disponible" : "Malo"});
-    } catch (e: any) {
-      setError(e?.message ?? "Error cambiando el estado del dispositivo");
-      setRows([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [buildFilter]);
+  const borrowDevice = React.useCallback(
+    async (deviceId: string) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        await dispositivos.update(deviceId, { Estado: "Prestado" });
+      } catch (e: any) {
+        setError(e?.message ?? "Error cargando logs");
+        setRows([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [buildFilter],
+  );
+
+  const deviceReturn = React.useCallback(
+    async (deviceId: string, estado: boolean) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        await dispositivos.update(deviceId, {
+          Estado: estado ? "Disponible" : "Malo",
+        });
+      } catch (e: any) {
+        setError(e?.message ?? "Error cambiando el estado del dispositivo");
+        setRows([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [buildFilter],
+  );
 
   const editDevice = async () => {
     if (!validate()) {
-      alert("Por favor rellene todos los campos")
+      alert("Por favor rellene todos los campos");
       return;
-    };
+    }
 
     setSubmitting(true);
     try {
@@ -408,19 +516,20 @@ export function useDispositivos() {
       await dispositivos.update(state.Id!, payload);
 
       alert("Dispositivo editado exitosamente");
-      setState({Title: "", Referencia: "", Serial: "", Estado: "Disponible"});
+      setState({ Title: "", Referencia: "", Serial: "", Estado: "Disponible" });
       load();
     } catch (err) {
       console.error("Error en handleSubmit:", err);
-    } 
+    }
   };
 
   const reload = React.useCallback(() => {
     load();
   }, [load]);
 
-  React.useEffect(() => { load(); }, [load]);
-
+  React.useEffect(() => {
+    load();
+  }, [load]);
 
   const dispositivosById = React.useMemo(() => {
     const m = new Map<string, dispositivos>();
@@ -429,24 +538,48 @@ export function useDispositivos() {
   }, [rows]);
 
   return {
-    dispositivosById, rows, loading, error, load, reload, estado, setEstado, search, setSearch, handleSubmit, errors, state, setState, submitting, setField, borrowDevice, deviceReturn, editDevice
+    dispositivosById,
+    rows,
+    loading,
+    error,
+    load,
+    reload,
+    estado,
+    setEstado,
+    search,
+    setSearch,
+    handleSubmit,
+    errors,
+    state,
+    setState,
+    submitting,
+    setField,
+    borrowDevice,
+    deviceReturn,
+    editDevice,
   };
 }
 
 export function usePruebas() {
-  const {pruebas, pruebasPrestamo} = useGraphServices()
-  const {loadDeviceTests} = usePruebasDispositivos()
-  const [pruebasPrestamoRows, setPruebasPrestamoRows] = React.useState<pruebasPrestamo[]>([]);
+  const { pruebas, pruebasPrestamo } = useGraphServices();
+  const { loadDeviceTests } = usePruebasDispositivos();
+  const [pruebasPrestamoRows, setPruebasPrestamoRows] = React.useState<
+    pruebasPrestamo[]
+  >([]);
   const [pruebasRows, setPruebasRows] = React.useState<pruebasDefinidas[]>([]);
   const [loading, setLoading] = React.useState(false);
   const [submitting, setSubmitting] = React.useState(false);
   const [draft, setDraft] = React.useState<Record<string, string>>({});
-  const [state, setState] = React.useState<pruebasDefinidas>({Title: "", Estado: "Activo"});
-  const setField = <K extends keyof dispositivos>(k: K, v: dispositivos[K]) => setState((s) => ({ ...s, [k]: v }));
+  const [state, setState] = React.useState<pruebasDefinidas>({
+    Title: "",
+    Estado: "Activo",
+  });
+  const setField = <K extends keyof dispositivos>(k: K, v: dispositivos[K]) =>
+    setState((s) => ({ ...s, [k]: v }));
 
   const onDraftChange = React.useCallback((testId: string, next: string) => {
     if (!testId) return;
-    setDraft(prev => ({ ...prev, [testId]: next }));
+    setDraft((prev) => ({ ...prev, [testId]: next }));
   }, []);
 
   const createAllPruebas = async (prestamoId: string, deviceid: string) => {
@@ -456,7 +589,7 @@ export function usePruebas() {
       if (!pruebasLoaded?.length) return;
 
       for (const p of pruebasLoaded) {
-        console.table(p)
+        console.table(p);
         const title = (await pruebas.get(p.IdPrueba!)).Title;
 
         const payload = {
@@ -484,7 +617,9 @@ export function usePruebas() {
       let nextLink: string | undefined = undefined;
 
       do {
-        const res: PageResult<pruebasDefinidas> = nextLink ? await pruebas.getByNextLink(nextLink) : await pruebas.getAll();     
+        const res: PageResult<pruebasDefinidas> = nextLink
+          ? await pruebas.getByNextLink(nextLink)
+          : await pruebas.getAll();
 
         all.push(...(res.items ?? []));
         nextLink = res.nextLink ? res.nextLink : "";
@@ -500,57 +635,71 @@ export function usePruebas() {
     }
   }, [pruebas]);
 
-  const loadPruebasPrestamo = React.useCallback(async (Id: string, fase: "Entrega" | "Devolucion" | "Ambas"): Promise<pruebasPrestamo[]> => {
-    setLoading(true);
-
-    const fetchByFase = async (faseSingle: "Entrega" | "Devolucion") => {
-      const all: pruebasPrestamo[] = [];
-      let nextLink: string | undefined = undefined;
-
-      do {
-        const res: PageResult<pruebasPrestamo> = nextLink ? await pruebasPrestamo.getByNextLink(nextLink) : await pruebasPrestamo.getAll({filter: `fields/IdPrestamo eq '${Id}' and fields/Fase eq '${faseSingle}'`, });
-
-        all.push(...(res.items ?? []));
-        nextLink = res.nextLink ? res.nextLink : "";
-      } while (nextLink);
-
-      return all;
-    };
-
-    try {
-      let rows: pruebasPrestamo[] = [];
-
-      if (fase === "Ambas") {
-        const [entrega, devolucion] = await Promise.all([
-          fetchByFase("Entrega"),
-          fetchByFase("Devolucion"),
-        ]);
-
-        // ✅ merge sin duplicados por Id
-        const map = new Map<string, pruebasPrestamo>();
-        [...entrega, ...devolucion].forEach((t) => {
-          const key = String(t.Id ?? "");
-          if (key) map.set(key, t);
-        });
+  const loadPruebasPrestamo = React.useCallback(
+    async (
+      Id: string,
+      fase: "Entrega" | "Devolucion" | "Ambas",
+    ): Promise<pruebasPrestamo[]> => {
+      setLoading(true);
+
+      const fetchByFase = async (faseSingle: "Entrega" | "Devolucion") => {
+        const all: pruebasPrestamo[] = [];
+        let nextLink: string | undefined = undefined;
+
+        do {
+          const res: PageResult<pruebasPrestamo> = nextLink
+            ? await pruebasPrestamo.getByNextLink(nextLink)
+            : await pruebasPrestamo.getAll({
+                filter: `fields/IdPrestamo eq '${Id}' and fields/Fase eq '${faseSingle}'`,
+              });
+
+          all.push(...(res.items ?? []));
+          nextLink = res.nextLink ? res.nextLink : "";
+        } while (nextLink);
+
+        return all;
+      };
 
-        rows = Array.from(map.values());
-      } else {
-        rows = await fetchByFase(fase);
+      try {
+        let rows: pruebasPrestamo[] = [];
+
+        if (fase === "Ambas") {
+          const [entrega, devolucion] = await Promise.all([
+            fetchByFase("Entrega"),
+            fetchByFase("Devolucion"),
+          ]);
+
+          // ✅ merge sin duplicados por Id
+          const map = new Map<string, pruebasPrestamo>();
+          [...entrega, ...devolucion].forEach((t) => {
+            const key = String(t.Id ?? "");
+            if (key) map.set(key, t);
+          });
+
+          rows = Array.from(map.values());
+        } else {
+          rows = await fetchByFase(fase);
+        }
+
+        setPruebasPrestamoRows(rows);
+        return rows;
+      } catch (e: any) {
+        setPruebasPrestamoRows([]);
+        return [];
+      } finally {
+        setLoading(false);
       }
-
-      setPruebasPrestamoRows(rows);
-      return rows;
-    } catch (e: any) {
-      setPruebasPrestamoRows([]);
-      return [];
-    } finally {
-      setLoading(false);
-    }
-  },[pruebasPrestamo]);
+    },
+    [pruebasPrestamo],
+  );
 
   const pendingChanges = React.useMemo(() => {
-    const currentById = new Map(pruebasPrestamoRows.map(t => [t.Id ?? "", t.Aprobado]));
-    return Object.entries(draft).filter(([id, next]) => currentById.get(id) !== next);
+    const currentById = new Map(
+      pruebasPrestamoRows.map((t) => [t.Id ?? "", t.Aprobado]),
+    );
+    return Object.entries(draft).filter(
+      ([id, next]) => currentById.get(id) !== next,
+    );
   }, [draft, pruebasPrestamoRows]);
 
   const handleFinalize = async (loan: prestamos): Promise<boolean> => {
@@ -558,26 +707,25 @@ export function usePruebas() {
 
     await Promise.all(
       pendingChanges.map(([id, next]) =>
-        pruebasPrestamo.update(id, { Aprobado: next })
-      )
+        pruebasPrestamo.update(id, { Aprobado: next }),
+      ),
     );
 
     await loadPruebasPrestamo(String(loan.Id), "Devolucion");
     setDraft({});
 
-    const hasNoExitosa = pendingChanges.some(([, next]) =>
-      next.trim().toLowerCase() === "rechazado"
+    const hasNoExitosa = pendingChanges.some(
+      ([, next]) => next.trim().toLowerCase() === "rechazado",
     );
 
-    return !hasNoExitosa; 
+    return !hasNoExitosa;
   };
 
-
   const handleSubmit = async () => {
     if (!state.Title) {
-      alert("Por favor rellene todos los campos")
+      alert("Por favor rellene todos los campos");
       return;
-    };
+    }
 
     setSubmitting(true);
     try {
@@ -589,18 +737,18 @@ export function usePruebas() {
       await pruebas.create(payload);
 
       alert("Prueba agregada exitosamente");
-      setState({Title: "",  Estado: "Activo"});
-      loadAllPruebas()
+      setState({ Title: "", Estado: "Activo" });
+      loadAllPruebas();
     } catch (err) {
       console.error("Error en handleSubmit:", err);
-    } 
+    }
   };
 
   const editTest = async () => {
     if (!state.Title) {
-      alert("Por favor rellene todos los campos")
+      alert("Por favor rellene todos los campos");
       return;
-    };
+    }
 
     setSubmitting(true);
     try {
@@ -612,38 +760,57 @@ export function usePruebas() {
       await pruebas.update(state.Id!, payload);
 
       alert("Prueba editada exitosamente");
-      setState({Title: "",  Estado: "Activo"});
+      setState({ Title: "", Estado: "Activo" });
       loadAllPruebas();
     } catch (err) {
       console.error("Error en handleSubmit:", err);
-    } 
+    }
   };
 
-
   return {
-    handleSubmit, editTest, state, setState, setField, loading, submitting, createAllPruebas, pruebasRows, pruebasPrestamoRows, loadPruebasPrestamo, draft, onDraftChange, handleFinalize, pendingChanges, setDraft, loadAllPruebas
+    handleSubmit,
+    editTest,
+    state,
+    setState,
+    setField,
+    loading,
+    submitting,
+    createAllPruebas,
+    pruebasRows,
+    pruebasPrestamoRows,
+    loadPruebasPrestamo,
+    draft,
+    onDraftChange,
+    handleFinalize,
+    pendingChanges,
+    setDraft,
+    loadAllPruebas,
   };
 }
 
 export function usePruebasDispositivos() {
-  const {pruebasDispositivo,} = useGraphServices()
+  const { pruebasDispositivo } = useGraphServices();
   const [testsOpen, setTestsOpen] = React.useState(false);
-  const [testsAssigned, setTestsAssigned] = React.useState<pruebasDispositos[]>([]);
+  const [testsAssigned, setTestsAssigned] = React.useState<pruebasDispositos[]>(
+    [],
+  );
   const [testsLoading, setTestsLoading] = React.useState(false);
 
-
   const listByDevice = async (deviceId: string) => {
-    const catalog = await pruebasDispositivo.getAll({filter: `fields/Title eq '${deviceId}'`}); // tabla Pruebas
-    return catalog
+    const catalog = await pruebasDispositivo.getAll({
+      filter: `fields/Title eq '${deviceId}'`,
+    }); // tabla Pruebas
+    return catalog;
   };
 
-  const loadDeviceTests = async (deviceId: string): Promise<pruebasDispositos[]> => {
+  const loadDeviceTests = async (
+    deviceId: string,
+  ): Promise<pruebasDispositos[]> => {
     setTestsLoading(true);
     try {
       const assigned = await listByDevice(deviceId); // tabla puente
       setTestsAssigned(assigned.items);
-      return assigned.items
-    
+      return assigned.items;
     } finally {
       setTestsLoading(false);
     }
@@ -654,15 +821,22 @@ export function usePruebasDispositivos() {
     await loadDeviceTests(deviceId);
   };
 
-  const unassignTest = async (bridgeId: string, selectedDevice: dispositivos) => {
+  const unassignTest = async (
+    bridgeId: string,
+    selectedDevice: dispositivos,
+  ) => {
     await pruebasDispositivo.delete(bridgeId);
     if (selectedDevice?.Id) await loadDeviceTests(selectedDevice.Id);
   };
 
-
   return {
-    loadDeviceTests, unassignTest, assignTest, testsOpen, testsAssigned, setTestsAssigned, setTestsOpen, testsLoading
+    loadDeviceTests,
+    unassignTest,
+    assignTest,
+    testsOpen,
+    testsAssigned,
+    setTestsAssigned,
+    setTestsOpen,
+    testsLoading,
   };
 }
-
-
diff --git a/src/Models/ActivoTI.ts b/src/Models/ActivoTI.ts
new file mode 100644
index 0000000..03e9cca
--- /dev/null
+++ b/src/Models/ActivoTI.ts
@@ -0,0 +1,133 @@
+import type { EstadoActivo } from "./ActivosTIMovimientos";
+
+// export const CATEGORIAS_ACTIVO = {
+//   equipo_computo: "Equipo de cómputo",
+//   periferico: "Periférico",
+//   red_infraestructura: "Red / Infraestructura",
+// } as const;
+
+export const UBICACIONES_ACTIVO = {
+  bodega_central: "Bodega",
+  usuario: "Usuario",
+  sala_reuniones: "Sala de reuniones",
+} as const;
+
+export const TIPOS_ACTIVO = {
+  "Cloud core router": "Cloud core router",
+  "Tripode": "Tripode",
+  "Todo en uno": "Todo en uno",
+  "Teclado": "Teclado",
+  "Micro server": "Micro server",
+  "Impresora POS": "Impresora POS",
+  "PDA": "PDA",
+  "Tablet": "Tablet",
+  "Lector de Codigos": "Lector de Codigos",
+  "RouterBoard": "RouterBoard",
+  "Wifi AP": "Wifi AP",
+  "Contador de Billletes": "Contador de Billletes",
+  "Monedero": "Monedero",
+  "FootfallCam": "FootfallCam",
+  "Impresora Pos": "Impresora Pos",
+  "Amplificador": "Amplificador",
+  "Camara": "Camara",
+  "Monitor": "Monitor",
+  "Mouse": "Mouse",
+  "Impresora": "Impresora",
+  "DVD": "DVD",
+  "Cloud Key Rack": "Cloud Key Rack",
+  "UPS": "UPS",
+  "Mini CPU": "Mini CPU",
+  "Portatil": "Portatil",
+  "AP": "AP",
+  "Panel-Monitor": "Panel-Monitor",
+  "Modem": "Modem",
+  "Montor": "Montor",
+  "Speaker": "Speaker",
+  "ThinkSmarthub": "ThinkSmarthub",
+  "Telefono": "Telefono",
+  "Internet Movil": "Internet Movil",
+  "Parlante de Sonido": "Parlante de Sonido",
+  "Microfono": "Microfono",
+  "Tablet de dibujo": "Tablet de dibujo",
+  "Servidor": "Servidor",
+  "Switche": "Switche",
+  "Proyector": "Proyector",
+  "Tablet de Dibujo": "Tablet de Dibujo",
+  "Telefono de IP": "Telefono de IP",
+  "Disco Duro": "Disco Duro",
+}
+
+// export type CategoriaActivo = keyof typeof CATEGORIAS_ACTIVO;
+
+export type Ubicacion_Tipo = keyof typeof UBICACIONES_ACTIVO;
+
+export interface ActivoTI {
+  estado: EstadoActivo;
+  id: string;
+  codigo_inventario: string;
+  // categoria: CategoriaActivo;
+  tipo: string;
+  marca?: string | null;
+  modelo?: string | null;
+  numero_serie: string;
+  fecha_ingreso: string;
+  ubicacion_tipo: Ubicacion_Tipo;
+  nombre_usuario: string;
+  correo_usuario: string;
+  prestamo_activo_id?: string | null;
+  created_at: string;
+  updated_at: string;
+  created_by: string;
+  updated_by?: string;
+}
+
+export type CrearActivoDTO = Omit<
+  ActivoTI,
+  | "id"
+  | "created_at"
+  | "updated_at"
+  | "created_by"
+  | "updated_by"
+  | "prestamo_activo_id"
+>;
+
+export type ActualizarActivoDTO = Partial<CrearActivoDTO> & {
+  prestamo_activo_id?: string | null;
+};
+
+export interface ActivoTIErrors {
+  codigo_inventario?: string;
+  categoria?: string;
+  tipo?: string;
+  numero_serie?: string;
+  estado?: string;
+  fecha_ingreso?: string;
+  ubicacion_tipo?: string;
+  nombre_usuario?: string;
+  correo_usuario?: string;
+  general?: string;
+}
+
+export const validarActivoTI = (
+  data: Partial<CrearActivoDTO>,
+): ActivoTIErrors => {
+  const errors: ActivoTIErrors = {};
+
+  if (!data.codigo_inventario?.trim()) {
+    errors.codigo_inventario = "El código de inventario es obligatorio";
+  }
+  if (!data.numero_serie?.trim()) {
+    errors.numero_serie = "El número de serie es obligatorio";
+  }
+  if (!data.ubicacion_tipo?.trim()) {
+    errors.ubicacion_tipo = "Debe seleccionar una ubicación";
+  }
+  // if (!data.categoria?.trim()) {
+  //   errors.categoria = "Debe seleccionar una categoria valida";
+  // }
+  if (!data.tipo?.trim()) {
+    errors.tipo = "El tipo de activo es obligatorio";
+  }
+
+  return errors;
+};
diff --git a/src/Models/ActivoTicket.ts b/src/Models/ActivoTicket.ts
new file mode 100644
index 0000000..e0c5f56
--- /dev/null
+++ b/src/Models/ActivoTicket.ts
@@ -0,0 +1,16 @@
+// Va a reutilizar el modelo de activosTI
+
+import type { ActivoTI } from "./ActivoTI";
+
+export interface ActivoTicket {
+  id: string;
+  activo_id: string;
+  ticket_id: number;
+  fecha_vinculacion: string;
+  vinculado_por_nombre: string;
+  activo?: ActivoTI | null;
+}
+export type CrearActivoTicketDTO = Omit<
+  ActivoTicket,
+  "id" | "fecha_vinculacion" | "activo"
+>;
diff --git a/src/Models/ActivosTIMovimientos.ts b/src/Models/ActivosTIMovimientos.ts
new file mode 100644
index 0000000..ca222c8
--- /dev/null
+++ b/src/Models/ActivosTIMovimientos.ts
@@ -0,0 +1,64 @@
+export const ESTADOS_ACTIVO = {
+  Disponible: "Disponible",
+  Asignado: "Asignado",
+  en_prestamo: "En Prestamo",
+} as const;
+
+export type EstadoActivo = keyof typeof ESTADOS_ACTIVO;
+
+export interface ActivoMovimientoResumenActivo {
+  codigo_inventario: string;
+  tipo: string;
+  marca?: string | null;
+  modelo?: string | null;
+  numero_serie: string;
+}
+
+export interface ActivoMovimiento {
+  id: string;
+  activo_id: string;
+  activo?: ActivoMovimientoResumenActivo | null;
+  ubicacion_origen?: string;
+  ubicacion_destino: string;
+  usuario_origen_nombre?: string;
+  usuario_origen_correo?: string;
+  usuario_destino_correo?: string;
+  usuario_destino_nombre?: string;
+  estado_anterior?: string;
+  estado_nuevo?: EstadoActivo;
+  responsable_correo: string;
+  responsable_nombre: string;
+  ticket_id?: string;
+  fecha_evento: string;
+  comentario?: string;
+}
+export type CrearActivoMovimientoDTO = Omit<
+  ActivoMovimiento,
+  "id" | "fecha_evento" | "activo"
+>;
+
+export interface MovimientoErrors {
+  estado_nuevo?: string;
+  responsable_correo?: string;
+  responsable_nombre?: string;
+  usuario_destino_nombre?: string;
+  usuario_destino_correo?: string;
+}
+
+export const ValidarMovimiento = (
+  data: Partial<CrearActivoMovimientoDTO>,
+): MovimientoErrors => {
+  const errors: MovimientoErrors = {};
+
+  if (!data.estado_nuevo?.trim()) {
+    errors.estado_nuevo = "Debe seleccionar un estado";
+  }
+  if (!data.responsable_correo?.trim()) {
+    errors.responsable_correo = "Debe seleccionar un correo del responsable";
+  }
+  if (!data.responsable_nombre?.trim()) {
+    errors.responsable_nombre = "Debe seleccionar el nombre del responsable";
+  }
+
+  return errors;
+};
diff --git a/src/Models/DTO/Tickets.ts b/src/Models/DTO/Tickets.ts
index 1503104..b7ac960 100644
--- a/src/Models/DTO/Tickets.ts
+++ b/src/Models/DTO/Tickets.ts
@@ -1,29 +1,29 @@
 export type SupabaseTickets = {
-    ticket_solvi_id?: string,
-    ticket_solvi_titulo: string,
-    ticket_solvi_fuente: string,
-    ticket_solvi_estado: string,
-    ticket_solvi_resolutor: string,
-    ticket_solvi_correo_resolutor: string,
-    ticket_solvi_fechaapertura: string,
-    ticket_solvi_fechamaxima: string,
-    ticket_solvi_descripcion: string,
-    ticket_solvi_categoria: string,
-    ticket_solvi_subcategoria: string,
-    ticket_solvi_articulo: string,
-    ticket_solvi_solicitante: string,
-    ticket_solvi_correo_solicitante: string,
-    ticket_solvi_id_casopadre: number | null,
-    ticket_solvi_ans: string,
-    ticket_solvi_mail_conversation_id?: string,
-    ticket_solvi_attachment_name?: string,
-    ticket_solvi_attachemnt_path?: string,
-    ticket_solvi_observador: string,
-    ticket_solvi_correo_observador: string,
-    ticket_solvi_fechacierreal?: string | null,
-    ticket_solvi_minutosnocturnos?: number | null,
-    ticket_solvi_minutosdominicales?: number | null,
-    ticket_solvi_minutosfestivos?: number | null,
-    ticket_solvi_minutostotales?: number | null,
-    ticket_solvi_fecha_pausa?: string | null,
-}
+  ticket_solvi_id?: string;
+  ticket_solvi_titulo: string;
+  ticket_solvi_fuente: string;
+  ticket_solvi_estado: string;
+  ticket_solvi_resolutor: string;
+  ticket_solvi_correo_resolutor: string;
+  ticket_solvi_fechaapertura: string;
+  ticket_solvi_fechamaxima: string | null;
+  ticket_solvi_descripcion: string;
+  ticket_solvi_categoria: string;
+  ticket_solvi_subcategoria: string;
+  ticket_solvi_articulo: string;
+  ticket_solvi_solicitante: string;
+  ticket_solvi_correo_solicitante: string;
+  ticket_solvi_id_casopadre: number | null;
+  ticket_solvi_ans: string;
+  ticket_solvi_mail_conversation_id?: string;
+  ticket_solvi_attachment_name?: string;
+  ticket_solvi_attachemnt_path?: string;
+  ticket_solvi_observador: string;
+  ticket_solvi_correo_observador: string;
+  ticket_solvi_fechacierreal?: string | null;
+  ticket_solvi_minutosnocturnos?: number | null;
+  ticket_solvi_minutosdominicales?: number | null;
+  ticket_solvi_minutosfestivos?: number | null;
+  ticket_solvi_minutostotales?: number | null;
+  ticket_solvi_fecha_pausa?: string | null;
+};
diff --git a/src/Services/SubCategorias.Service.ts b/src/Services/SubCategorias.Service.ts
index 3949a10..6cbe708 100644
--- a/src/Services/SubCategorias.Service.ts
+++ b/src/Services/SubCategorias.Service.ts
@@ -1,6 +1,6 @@
-import { GraphRest } from '../graph/GraphRest';
-import type { Subcategoria } from '../Models/Categorias';
-import type { GetAllOpts } from '../Models/Commons';
+import { GraphRest } from "../graph/GraphRest";
+import type { Subcategoria } from "../Models/Categorias";
+import type { GetAllOpts } from "../Models/Commons";
 
 export class SubCategoriasService {
   private graph!: GraphRest;
@@ -13,113 +13,122 @@ export class SubCategoriasService {
 
   constructor(
     graph: GraphRest,
-    hostname = 'estudiodemoda.sharepoint.com',
-    sitePath = '/sites/TransformacionDigital/IN/HD',
-    listName = 'SubCategorias'     
+    hostname = "estudiodemoda.sharepoint.com",
+    sitePath = "/sites/TransformacionDigital/IN/HD",
+    listName = "SubCategorias",
   ) {
     this.graph = graph;
     this.hostname = hostname;
-    this.sitePath = sitePath.startsWith('/') ? sitePath : `/${sitePath}`;
+    this.sitePath = sitePath.startsWith("/") ? sitePath : `/${sitePath}`;
     this.listName = listName;
   }
 
   // ---------- helpers ----------
-     private esc(s: string) { return String(s).replace(/'/g, "''"); }
+  private esc(s: string) {
+    return String(s).replace(/'/g, "''");
+  }
 
   // cache (mem + localStorage opcional)
-    private loadCache() {
-        try {
-        const k = `sp:${this.hostname}${this.sitePath}:${this.listName}`;
-        const raw = localStorage.getItem(k);
-        if (raw) {
-            const { siteId, listId } = JSON.parse(raw);
-            this.siteId = siteId || this.siteId;
-            this.listId = listId || this.listId;
-        }
-        } catch {}
-    }
+  private loadCache() {
+    try {
+      const k = `sp:${this.hostname}${this.sitePath}:${this.listName}`;
+      const raw = localStorage.getItem(k);
+      if (raw) {
+        const { siteId, listId } = JSON.parse(raw);
+        this.siteId = siteId || this.siteId;
+        this.listId = listId || this.listId;
+      }
+    } catch {}
+  }
 
-    private saveCache() {
-        try {
-        const k = `sp:${this.hostname}${this.sitePath}:${this.listName}`;
-        localStorage.setItem(k, JSON.stringify({ siteId: this.siteId, listId: this.listId }));
-        } catch {}
+  private saveCache() {
+    try {
+      const k = `sp:${this.hostname}${this.sitePath}:${this.listName}`;
+      localStorage.setItem(
+        k,
+        JSON.stringify({ siteId: this.siteId, listId: this.listId }),
+      );
+    } catch {}
+  }
+
+  private async ensureIds() {
+    if (!this.siteId || !this.listId) this.loadCache();
+
+    if (!this.siteId) {
+      const site = await this.graph.get<any>(
+        `/sites/${this.hostname}:${this.sitePath}`,
+      );
+      this.siteId = site?.id;
+      if (!this.siteId) throw new Error("No se pudo resolver siteId");
+      this.saveCache();
     }
 
-    private async ensureIds() {
-        if (!this.siteId || !this.listId) this.loadCache();
-
-        if (!this.siteId) {
-        const site = await this.graph.get<any>(`/sites/${this.hostname}:${this.sitePath}`);
-        this.siteId = site?.id;
-        if (!this.siteId) throw new Error('No se pudo resolver siteId');
-        this.saveCache();
-        }
-
-        if (!this.listId) {
-        const lists = await this.graph.get<any>(
-            `/sites/${this.siteId}/lists?$filter=displayName eq '${this.esc(this.listName)}'`
-        );
-        const list = lists?.value?.[0];
-        if (!list?.id) throw new Error(`Lista no encontrada: ${this.listName}`);
-        this.listId = list.id;
-        this.saveCache();
-        }
+    if (!this.listId) {
+      const lists = await this.graph.get<any>(
+        `/sites/${this.siteId}/lists?$filter=displayName eq '${this.esc(this.listName)}'`,
+      );
+      const list = lists?.value?.[0];
+      if (!list?.id) throw new Error(`Lista no encontrada: ${this.listName}`);
+      this.listId = list.id;
+      this.saveCache();
     }
+  }
 
   // ---------- mapping ----------
   private toModel(item: any): Subcategoria {
     const f = item?.fields ?? {};
     return {
-        ID: String(item?.id ?? ''),
-        Title: f.Title,
-        Id_categoria: f.Id_Categoria,
+      ID: String(item?.id ?? ""),
+      Title: f.Title,
+      Id_categoria: f.Id_Categoria,
     };
   }
 
   // ---------- CRUD ----------
-  async create(record: Omit<Subcategoria, 'ID'>) {
-    await this.ensureIds()
+  async create(record: Omit<Subcategoria, "ID">) {
+    await this.ensureIds();
     const res = await this.graph.post<any>(
       `/sites/${this.siteId}/lists/${this.listId}/items`,
-      { fields: record }
+      { fields: record },
     );
     return this.toModel(res);
   }
 
-  async update(id: string, changed: Partial<Omit<Subcategoria, 'ID'>>) {
-    await this.ensureIds()
+  async update(id: string, changed: Partial<Omit<Subcategoria, "ID">>) {
+    await this.ensureIds();
     await this.graph.patch<any>(
       `/sites/${this.siteId}/lists/${this.listId}/items/${id}/fields`,
-      changed
+      changed,
     );
     const res = await this.graph.get<any>(
-      `/sites/${this.siteId}/lists/${this.listId}/items/${id}?$expand=fields`
+      `/sites/${this.siteId}/lists/${this.listId}/items/${id}?$expand=fields`,
     );
     return this.toModel(res);
   }
 
   async delete(id: string) {
-    await this.ensureIds()
-    await this.graph.delete(`/sites/${this.siteId}/lists/${this.listId}/items/${id}`);
+    await this.ensureIds();
+    await this.graph.delete(
+      `/sites/${this.siteId}/lists/${this.listId}/items/${id}`,
+    );
   }
 
   async get(id: string) {
-    await this.ensureIds()
+    await this.ensureIds();
     const res = await this.graph.get<any>(
-      `/sites/${this.siteId}/lists/${this.listId}/items/${id}?$expand=fields`
+      `/sites/${this.siteId}/lists/${this.listId}/items/${id}?$expand=fields`,
     );
     return this.toModel(res);
   }
 
   async getAll(opts?: GetAllOpts) {
-    await this.ensureIds()
+    await this.ensureIds();
 
     // ID -> id, Title -> fields/Title (cuando NO está prefijado con '/')
     const normalizeFieldTokens = (s: string) =>
       s
-        .replace(/\bID\b/g, 'id')
-        .replace(/(^|[^/])\bTitle\b/g, '$1fields/Title');
+        .replace(/\bID\b/g, "id")
+        .replace(/(^|[^/])\bTitle\b/g, "$1fields/Title");
 
     const escapeODataLiteral = (v: string) => v.replace(/'/g, "''");
 
@@ -134,14 +143,14 @@ export class SubCategoriasService {
     const normalizeOrderby = (raw: string) => normalizeFieldTokens(raw.trim());
 
     const qs = new URLSearchParams();
-    qs.set('$expand', 'fields');        // necesario si filtras por fields/*
-    qs.set('$select', 'id,webUrl');     // opcional; añade fields(...) si quieres
-    if (opts?.orderby) qs.set('$orderby', normalizeOrderby(opts.orderby));
-    if (opts?.top != null) qs.set('$top', String(opts.top));
-    if (opts?.filter) qs.set('$filter', normalizeFilter(String(opts.filter)));
+    qs.set("$expand", "fields"); // necesario si filtras por fields/*
+    qs.set("$select", "id,webUrl"); // opcional; añade fields(...) si quieres
+    if (opts?.orderby) qs.set("$orderby", normalizeOrderby(opts.orderby));
+    if (opts?.top != null) qs.set("$top", String(opts.top));
+    if (opts?.filter) qs.set("$filter", normalizeFilter(String(opts.filter)));
 
     // Evita '+' por espacios (algunos proxies se quejan)
-    const query = qs.toString().replace(/\+/g, '%20');
+    const query = qs.toString().replace(/\+/g, "%20");
 
     const url = `/sites/${encodeURIComponent(this.siteId!)}/lists/${encodeURIComponent(this.listId!)}/items?${query}`;
 
@@ -151,9 +160,9 @@ export class SubCategoriasService {
     } catch (e: any) {
       // Si la ruta es válida pero el $filter rompe, reintenta sin $filter para diagnóstico
       const code = e?.error?.code ?? e?.code;
-      if (code === 'itemNotFound' && opts?.filter) {
+      if (code === "itemNotFound" && opts?.filter) {
         const qs2 = new URLSearchParams(qs);
-        qs2.delete('$filter');
+        qs2.delete("$filter");
         const url2 = `/sites/${encodeURIComponent(this.siteId!)}/lists/${encodeURIComponent(this.listId!)}/items?${qs2.toString()}`;
         const res2 = await this.graph.get<any>(url2);
         return (res2.value ?? []).map((x: any) => this.toModel(x));
@@ -161,6 +170,4 @@ export class SubCategoriasService {
       throw e;
     }
   }
-
 }
-
diff --git a/src/Services/Supabase.service.ts b/src/Services/Supabase.service.ts
index 6672fd0..a65a35c 100644
--- a/src/Services/Supabase.service.ts
+++ b/src/Services/Supabase.service.ts
@@ -1,6 +1,5 @@
-import { createClient } from '@supabase/supabase-js';
+import { createClient } from "@supabase/supabase-js";
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY;
-
-export const supabase = createClient(supabaseUrl, supabaseKey);
\ No newline at end of file
+export const supabase = createClient(supabaseUrl, supabaseKey);
diff --git a/src/components/DetallesTickets/DetallesTickets.tsx b/src/components/DetallesTickets/DetallesTickets.tsx
index 0606db2..51d4341 100644
--- a/src/components/DetallesTickets/DetallesTickets.tsx
+++ b/src/components/DetallesTickets/DetallesTickets.tsx
@@ -16,6 +16,8 @@ import CaseAttachments from "./CaseAttachments";
 import ModalShell from "./ModalShell";
 import CambiarFuente from "./Modals/ChangeFuente";
 import PausarTicket from "./Modals/PausarTicket";
+import { useRepositories } from "../../repositories/repositoriesContext";
+import { useActivoTicket } from "../../Funcionalidades/inventario/useActivoTickets";
 
 type Props = {
   ticket: Ticket;
@@ -28,6 +30,13 @@ type ActiveModal = "recategorizar" | "reasignar" | "observador" | "fuente" | "pa
 
 export function CaseDetail({ ticket, onVolver, role, onDocumentar }: Props) {
   const { loadAttachments, rows } = useTicketsAttachments();
+  const { activotickets } = useRepositories();
+  const {
+    activoticket: activosRelacionados,
+    loading: loadingActivos,
+    error: errorActivos,
+    loadActivoTicket,
+  } = useActivoTicket({ ActivosTicketSvc: activotickets! });
 
   const [selected, setSelected] = React.useState<Ticket>(ticket);
   const [selectedAttachment, setSelectedAttachment] = React.useState<TicketAttachment | null>(null);
@@ -59,6 +68,12 @@ export function CaseDetail({ ticket, onVolver, role, onDocumentar }: Props) {
     });
   }, [ticket?.ID, loadAttachments]);
 
+  // Usa selected (no ticket) para recargar también al saltar a un ticket relacionado.
+  React.useEffect(() => {
+    if (!selected?.ID) return;
+    loadActivoTicket({ ticket_id: Number(selected.ID) });
+  }, [selected?.ID, loadActivoTicket]);
+
   // Mantiene la selección de adjunto vigente, o elige el primero previsualizable.
   React.useEffect(() => {
     if (rows.length === 0) {
@@ -145,6 +160,26 @@ export function CaseDetail({ ticket, onVolver, role, onDocumentar }: Props) {
         <TicketsAsociados key={String(selected.ID)} ticket={selected} onSelect={handleSelectRelacionado} />
       </div>
 
+      {/* ===== Activos relacionados ===== */}
+      <div className="seccion">
+        <h3 className="cd-subtitle">Activos relacionados ({activosRelacionados.length})</h3>
+        {loadingActivos && <p>Cargando activos…</p>}
+        {errorActivos && <p style={{ color: "#b91c1c" }}>{errorActivos}</p>}
+        {!loadingActivos && !errorActivos && activosRelacionados.length === 0 && (
+          <p>Este ticket no tiene activos vinculados.</p>
+        )}
+        {activosRelacionados.length > 0 && (
+          <ul className="cd-files">
+            {activosRelacionados.map((v) => (
+              <li key={v.id}>
+                <strong>{v.activo?.codigo_inventario ?? v.activo_id}</strong>
+                {v.activo?.tipo && ` — ${v.activo.tipo}`}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
       {/* ===== Botón de Seguimiento ===== */}
       {showBotton && (
         <div>
diff --git a/src/components/Inventario/BuscadorActivo.tsx b/src/components/Inventario/BuscadorActivo.tsx
new file mode 100644
index 0000000..d128cec
--- /dev/null
+++ b/src/components/Inventario/BuscadorActivo.tsx
@@ -0,0 +1,100 @@
+// src/components/Inventario/BuscadorActivo.tsx
+import React from "react";
+import AsyncSelect from "react-select/async";
+import { useRepositories } from "../../repositories/repositoriesContext";
+import type { ActivoTI } from "../../Models/ActivoTI";
+
+// Opción de react-select: guarda el activo completo
+type ActivoOption = { value: string; label: string; activo: ActivoTI };
+
+const PAGE_SIZE = 10; // Limita el resultado para no saturar
+
+const toActivoOption = (a: ActivoTI): ActivoOption => ({
+  value: a.id,
+  label: [a.codigo_inventario, a.tipo, a.marca, a.modelo, a.numero_serie]
+    .filter(Boolean)
+    .join(" · "),
+  activo: a,
+});
+
+type BaseProps = {
+  inputId?: string;
+  placeholder?: string;
+  isDisabled?: boolean;
+};
+
+// Un solo activo (Asignar, Ficha)
+type SimpleProps = BaseProps & {
+  isMulti?: false;
+  value?: ActivoTI | null;
+  onChange: (activo: ActivoTI | null) => void;
+};
+
+// Varios activos (Nuevo ticket)
+type MultiProps = BaseProps & {
+  isMulti: true;
+  value: ActivoTI[];
+  onChange: (activos: ActivoTI[]) => void;
+};
+
+export type BuscadorActivoProps = SimpleProps | MultiProps;
+
+// Buscador de activos compartido: solo hay que llamarlo.
+export const BuscadorActivo: React.FC<BuscadorActivoProps> = (props) => {
+  const { activosTI } = useRepositories();
+  const [error, setError] = React.useState<string | null>(null);
+
+  const buscarActivos = React.useCallback(
+    async (texto: string): Promise<ActivoOption[]> => {
+      const res = await activosTI!.loadActivos({
+        search: texto,
+        paginated: true,
+        pageSize: PAGE_SIZE,
+      });
+      if (!res.status) {
+        setError(res.message ?? "Error cargando los activos");
+        return [];
+      }
+      setError(null);
+      return res.data.map(toActivoOption);
+    },
+    [activosTI],
+  );
+
+  const comunes = {
+    inputId: props.inputId ?? "buscador_activo_id",
+    cacheOptions: true,
+    defaultOptions: true,
+    loadOptions: buscarActivos,
+    isDisabled: props.isDisabled,
+    placeholder:
+      props.placeholder ?? "Buscar por código, serial, tipo, marca o modelo…",
+    noOptionsMessage: ({ inputValue }: { inputValue: string }) =>
+      error ??
+      (inputValue ? "No se encontraron activos" : "Escribe para buscar"),
+    loadingMessage: () => "Buscando...",
+    classNamePrefix: "rs",
+  };
+
+  if (props.isMulti) {
+    const { value, onChange } = props;
+    return (
+      <AsyncSelect<ActivoOption, true>
+        {...comunes}
+        isMulti
+        value={value.map(toActivoOption)}
+        onChange={(opts) => onChange(opts.map((o) => o.activo))}
+      />
+    );
+  }
+
+  const { value, onChange } = props;
+  return (
+    <AsyncSelect<ActivoOption, false>
+      {...comunes}
+      isClearable
+      value={value ? toActivoOption(value) : null}
+      onChange={(opt) => onChange(opt?.activo ?? null)}
+    />
+  );
+};
diff --git a/src/components/Inventario/Catalogo/CatalogosActivos.css b/src/components/Inventario/Catalogo/CatalogosActivos.css
new file mode 100644
index 0000000..981daca
--- /dev/null
+++ b/src/components/Inventario/Catalogo/CatalogosActivos.css
@@ -0,0 +1,249 @@
+.activos-page {
+  padding: 16px;
+  max-width: 1100px;
+  margin: 0 auto;
+  --card: var(--surface, #f4f0f0);
+
+  --bd: var(--border, #e5e7eb);
+
+  --radius: 15px;
+
+  --pad: clamp(10px, 2vw, 16px);
+  --gap: clamp(10px, 1.8vw, 14px);
+  color: var(--ink);
+}
+
+.activos-header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.activos-header h2 {
+  margin: 0;
+  font-size: 1.6rem;
+}
+
+/* --------- Filtros --------- */
+.activos-filtros {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 240px;
+  align-items: stretch;
+  gap: var(--gap);
+
+  margin-bottom: var(--gap);
+}
+.activos-filtros input[type="text"],
+.activos-filtros select {
+  appearance: none;
+  background: color-mix(in oklab, var(--card) 98%, transparent);
+  color: var(--ink);
+  border: 1px solid var(--bd);
+  border-radius: calc(var(--radius) - 6px);
+  box-sizing: border-box;
+  padding: 0 12px;
+  min-width: 0;
+  height: 44px;
+  margin: 0;
+}
+.activos-filtros input::placeholder {
+  color: color-mix(in oklab, var(--muted) 85%, transparent);
+}
+.activos-filtros input:focus,
+.activos-filtros select:focus {
+  outline: none;
+  border-color: var(--bd-strong);
+  box-shadow: 0 0 0 4px var(--ring);
+}
+
+/* --------- Tabla --------- */
+.table-wrap {
+  background: var(--card);
+  border: 1px solid var(--bd);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: var(--pad);
+  overflow-x: auto;
+  scrollbar-gutter: stable both-edges;
+}
+
+.activos-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  min-width: 640px;
+}
+
+/* Anchos por columna (Modelo se queda con el espacio sobrante) */
+.activos-table .col-codigo {
+  width: 18%;
+}
+.activos-table .col-tipo {
+  width: 15%;
+}
+.activos-table .col-marca {
+  width: 15%;
+}
+.activos-table .col-estado {
+  width: 15%;
+}
+
+.activos-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: color-mix(in oklab, var(--card) 98%, transparent);
+  color: var(--muted);
+  text-align: left;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid var(--bd);
+  text-transform: uppercase;
+  font-size: 0.78rem;
+
+  padding: 16px 14px;
+  white-space: nowrap;
+}
+.activos-table tbody td {
+  border-bottom: 1px solid var(--bd);
+  padding: 16px 14px;
+  color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.activos-table tbody tr:hover {
+  background: color-mix(in oklab, rgb(34, 197, 94) 10%, transparent);
+}
+.activos-table th:last-child,
+.activos-table td:last-child {
+  width: 120px; /* enlace "Ver detalle" */
+  text-align: center;
+}
+/* La paginación ya trae su línea superior: evita la doble línea */
+.activos-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.activos-table td.col-acciones .icon-btn + .icon-btn {
+  margin-left: 6px;
+}
+
+.icon-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 1px solid var(--bd);
+  background: #e2d2d2;
+  color: var(--ink);
+  display: inline-grid;
+  place-items: center;
+  cursor: pointer;
+  transition:
+    transform 0.06s ease,
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+.icon-btn:hover {
+  background: #f1f5f9;
+  border-color: var(--bd-strong);
+}
+.icon-btn:active {
+  transform: translateY(1px);
+}
+
+.paginacion {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: var(--gap);
+  padding-top: var(--gap);
+  border-top: 1px solid var(--bd);
+  color: var(--muted);
+}
+.paginacion > span {
+  font-weight: 700;
+  color: var(--ink);
+}
+.paginacion button {
+  background: color-mix(in oklab, var(--card) 94%, transparent);
+  color: var(--ink);
+  border: 1px solid var(--bd);
+  border-radius: calc(var(--radius) - 8px);
+  padding: 8px 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.paginacion button:hover:enabled {
+  background: color-mix(in oklab, var(--ink) 5%, transparent);
+}
+.paginacion button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.paginacion select {
+  background: color-mix(in oklab, var(--card) 96%, transparent);
+  color: var(--ink);
+  border: 1px solid var(--bd);
+  border-radius: calc(var(--radius) - 8px);
+  padding: 6px 10px;
+}
+.paginacion-total {
+  margin-left: auto;
+  font-weight: 400;
+  color: var(--muted);
+}
+
+.activos-page p {
+  margin: 8px 0;
+  color: var(--muted);
+}
+
+@media (max-width: 640px) {
+  .activos-header {
+    grid-template-columns: 1fr;
+    row-gap: 8px;
+  }
+  .activos-filtros {
+    grid-template-columns: 1fr;
+  }
+  .paginacion-total {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+.link-detalle {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--ink);
+  font-weight: 600;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* --------- Celdas --------- */
+.celda-codigo {
+  font-family: ui-monospace, monospace;
+  font-weight: 700;
+  color: var(--ink);
+}
+.celda-muted {
+  color: var(--muted);
+}
+
+/* El color llega por style={{ colorEstadoActivo(...) }} */
+.estado-badge {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-family: ui-monospace, monospace;
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: var(--c);
+  background: color-mix(in oklab, var(--c) 15%, transparent);
+  border: 1px solid color-mix(in oklab, var(--c) 40%, transparent);
+}
diff --git a/src/components/Inventario/Catalogo/CatalogosActivos.tsx b/src/components/Inventario/Catalogo/CatalogosActivos.tsx
new file mode 100644
index 0000000..d579d66
--- /dev/null
+++ b/src/components/Inventario/Catalogo/CatalogosActivos.tsx
@@ -0,0 +1,222 @@
+import * as React from "react";
+import "./CatalogosActivos.css";
+import type { ActivoTI } from "../../../Models/ActivoTI";
+import { useRepositories } from "../../../repositories/repositoriesContext";
+import { ESTADOS_ACTIVO } from "../../../Models/ActivosTIMovimientos";
+import { useActivosTI } from "../../../Funcionalidades/inventario/useActivosTI";
+import { ModalAsignarActivo } from "../ModalAsignarActivo";
+import FichaActivo from "../FichaActivo";
+import { ModalDetalleActivo } from "./ModalDetalleActivo";
+import type { EstadoActivo } from "../../../Models/ActivosTIMovimientos";
+import { colorEstadoActivo } from "../../../Funcionalidades/inventario/utils/ActivosColors";
+
+const PAGE_SIZE = [10, 20, 50, 100];
+
+interface CatalogoActivosProps {}
+
+export default function CatalogosActivos({}: CatalogoActivosProps) {
+  const { activosTI } = useRepositories();
+  const {
+    activos,
+    loading,
+    error,
+    search,
+    setSearch,
+    estadoFiltro,
+    setEstadoFiltro,
+
+    pageIndex,
+    pageSize,
+    setPageSize,
+    total,
+    hasNext,
+    nextPage,
+    prevPage,
+    loadAll,
+  } = useActivosTI({ ActivosSvc: activosTI! });
+
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const rangeStart = total === 0 ? 0 : (pageIndex - 1) * pageSize + 1;
+  const rangeEnd = Math.min(pageIndex * pageSize, total);
+  const [activoAsignar, setActivoAsignar] = React.useState<ActivoTI | null>(
+    null,
+  );
+  const [activoFicha, setActivoFicha] = React.useState<ActivoTI | null>(null);
+  const [activoDetalle, setActivoDetalle] = React.useState<ActivoTI | null>(
+    null,
+  );
+
+  const handleCerrarAsignar = () => setActivoAsignar(null);
+  const handleAsignado = () => {
+    setActivoAsignar(null);
+    loadAll();
+  };
+
+  if (activoAsignar) {
+    return (
+      <ModalAsignarActivo
+        activo={activoAsignar}
+        onSaved={handleAsignado}
+        onClose={handleCerrarAsignar}
+      />
+    );
+  }
+  if (activoFicha) {
+    return (
+      <FichaActivo
+        activo={activoFicha}
+        onClose={() => {
+          setActivoFicha(null);
+          loadAll();
+        }}
+      />
+    );
+  }
+
+  return (
+    <section className="activos-page" aria-label="Catálogo de activos TI">
+      <header className="activos-header">
+        <h2>Catálogo de Activos TI</h2>
+      </header>
+
+      <div className="activos-filtros">
+        <input
+          type="text"
+          placeholder="Buscar por código, serie, tipo, marca o modelo..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+
+        <select
+          value={estadoFiltro}
+          onChange={(e) => setEstadoFiltro(e.target.value as EstadoActivo | "")}
+        >
+          <option value="">todos los estados</option>
+          {Object.entries(ESTADOS_ACTIVO).map(([value, label]) => (
+            <option key={value} value={value}>
+              {label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Estados de carga / error / vacíos */}
+      {loading && <p>Cargando activos…</p>}
+      {error && <p style={{ color: "#b91c1c" }}>{error}</p>}
+      {!loading && !error && activos.length === 0 && (
+        <p>No hay activos para los filtros seleccionados.</p>
+      )}
+
+      {/* Tabla y Paginación */}
+      {!loading && !error && activos.length > 0 && (
+        <div className="table-wrap">
+          <table className="activos-table">
+            <thead>
+              <tr>
+                <th className="col-codigo">Código</th>
+                <th className="col-tipo">Tipo</th>
+                <th className="col-marca">Marca</th>
+                <th className="col-modelo">Modelo</th>
+                <th className="col-estado">Estado</th>
+                <th className="col-acciones"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {activos.map((activo) => (
+                <tr key={activo.id}>
+                  <td title={activo.codigo_inventario}>
+                    <span className="celda-codigo">
+                      {activo.codigo_inventario}
+                    </span>
+                  </td>
+
+                  <td title={activo.tipo}>{activo.tipo}</td>
+
+                  <td title={activo.marca ?? ""}>{activo.marca || "—"}</td>
+
+                  <td className="celda-muted" title={activo.modelo ?? ""}>
+                    {activo.modelo || "—"}
+                  </td>
+
+                  <td>
+                    <span
+                      className="estado-badge"
+                      style={
+                        {
+                          "--c": colorEstadoActivo(activo.estado),
+                        } as React.CSSProperties
+                      }
+                    >
+                      {ESTADOS_ACTIVO[activo.estado] ?? activo.estado}
+                    </span>
+                  </td>
+
+                  <td>
+                    <button
+                      type="button"
+                      className="link-detalle"
+                      onClick={() => setActivoDetalle(activo)}
+                    >
+                      Ver detalle
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          <div className="paginacion">
+            <button onClick={prevPage} disabled={loading || pageIndex <= 1}>
+              Anterior
+            </button>
+            <span>
+              Página {pageIndex} de {totalPages}
+            </span>
+            <button onClick={nextPage} disabled={loading || !hasNext}>
+              Siguiente
+            </button>
+
+            <label
+              htmlFor="page-size"
+              style={{ marginLeft: 12, marginRight: 8 }}
+            >
+              Activos por página:
+            </label>
+            <select
+              id="page-size"
+              value={pageSize}
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                setPageSize(parseInt(e.target.value, 10))
+              }
+              disabled={loading}
+            >
+              {PAGE_SIZE.map((n) => (
+                <option key={n} value={n}>
+                  {n}
+                </option>
+              ))}
+            </select>
+
+            <span className="paginacion-total">
+              Mostrando {rangeStart}-{rangeEnd} de {total} activos
+            </span>
+          </div>
+        </div>
+      )}
+      {activoDetalle && (
+        <ModalDetalleActivo
+          activo={activoDetalle}
+          onClose={() => setActivoDetalle(null)}
+          onAsignar={() => {
+            setActivoAsignar(activoDetalle);
+            setActivoDetalle(null);
+          }}
+          onVerSeguimiento={() => {
+            setActivoFicha(activoDetalle);
+            setActivoDetalle(null);
+          }}
+        />
+      )}
+    </section>
+  );
+}
diff --git a/src/components/Inventario/Catalogo/ModalDetalleActivo.css b/src/components/Inventario/Catalogo/ModalDetalleActivo.css
new file mode 100644
index 0000000..791281d
--- /dev/null
+++ b/src/components/Inventario/Catalogo/ModalDetalleActivo.css
@@ -0,0 +1,152 @@
+.detalle-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: grid;
+  place-items: center;
+  padding: 16px;
+  z-index: 1000;
+}
+
+.detalle-card {
+  width: 100%;
+  max-width: 620px;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: var(--surface);
+  color: var(--ink);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+/* ---------- Header ---------- */
+.detalle-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.detalle-codigo {
+  display: block;
+  font-family: ui-monospace, monospace;
+  font-size: 1rem;
+  color: var(--muted);
+}
+.detalle-header h2 {
+  margin: 4px 0 10px;
+  font-size: 1.35rem;
+}
+.detalle-badge {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  font-weight: 700;
+  /* El color llega por style={{ "--c": colorEstadoActivo(...) }} */
+  color: var(--c);
+  background: color-mix(in oklab, var(--c) 15%, transparent);
+  border: 1px solid color-mix(in oklab, var(--c) 40%, transparent);
+}
+.detalle-cerrar {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 8px;
+}
+.detalle-cerrar:hover {
+  color: var(--ink);
+  background: color-mix(in oklab, var(--ink) 8%, transparent);
+}
+
+/* ---------- Campos ---------- */
+.detalle-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px 24px;
+  padding: 20px 20px 0;
+}
+.detalle-campo {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+/* Usuario y descripción van fuera del grid: mismo padding lateral */
+.detalle-card > .detalle-campo {
+  padding: 16px 20px 0;
+}
+.detalle-label {
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+.detalle-valor {
+  font-family: ui-monospace, monospace;
+  font-weight: 600;
+}
+
+/* ---------- Usuario ---------- */
+.detalle-usuario {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.detalle-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  color: var(--primary);
+  background: color-mix(in oklab, var(--primary) 18%, transparent);
+  border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
+}
+
+/* ---------- Botones ---------- */
+.detalle-acciones {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 20px;
+}
+.detalle-acciones button {
+  padding: 11px 16px;
+  border-radius: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    filter 0.15s ease,
+    background 0.15s ease;
+}
+.btn-primario {
+  background: var(--c);
+  color: #fff;
+  border: 1px solid var(--c);
+}
+.btn-primario:hover {
+  filter: brightness(1.08);
+}
+.btn-secundario {
+  background: var(--field-bg);
+  color: var(--ink);
+  border: 1px solid var(--border);
+}
+.btn-secundario:hover {
+  background: color-mix(in oklab, var(--ink) 8%, var(--field-bg));
+}
+.detalle-acciones button:focus-visible,
+.detalle-cerrar:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px var(--ring);
+}
+
+@media (max-width: 520px) {
+  .detalle-grid,
+  .detalle-acciones {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/components/Inventario/Catalogo/ModalDetalleActivo.tsx b/src/components/Inventario/Catalogo/ModalDetalleActivo.tsx
new file mode 100644
index 0000000..ecb6a83
--- /dev/null
+++ b/src/components/Inventario/Catalogo/ModalDetalleActivo.tsx
@@ -0,0 +1,115 @@
+import type { ActivoTI } from "../../../Models/ActivoTI";
+import "./ModalDetalleActivo.css";
+import { UBICACIONES_ACTIVO } from "../../../Models/ActivoTI";
+import { ESTADOS_ACTIVO } from "../../../Models/ActivosTIMovimientos";
+import { colorEstadoActivo } from "../../../Funcionalidades/inventario/utils/ActivosColors";
+import { toISODateFlex } from "../../../utils/Date";
+
+import React from "react";
+
+interface ModalDetalleActivoProps {
+  activo: ActivoTI;
+  onClose: () => void;
+  onAsignar: () => void;
+  onVerSeguimiento: () => void;
+}
+
+export function ModalDetalleActivo({
+  activo,
+  onClose,
+  onAsignar,
+  onVerSeguimiento,
+}: ModalDetalleActivoProps) {
+  const titulo =
+    [activo.marca, activo.modelo].filter(Boolean).join(" ") || activo.tipo;
+
+  return (
+    <div className="detalle-overlay" onClick={onClose}>
+      <div className="detalle-card" onClick={(e) => e.stopPropagation()}>
+        <header className="detalle-header">
+          <div>
+            <span className="detalle-codigo">{activo.codigo_inventario} </span>
+            <h2>{titulo}</h2>
+            <span
+              className="detalle-badge"
+              style={
+                {
+                  "--c": colorEstadoActivo(activo.estado),
+                } as React.CSSProperties
+              }
+            >
+              {ESTADOS_ACTIVO[activo.estado] ?? activo.estado}
+            </span>
+          </div>
+          <button
+            type="button"
+            className="detalle-cerrar"
+            aria-label="Cerrar"
+            onClick={onClose}
+          >
+            X
+          </button>
+        </header>
+
+        <div className="detalle-grid">
+          <div className="detalle-campo">
+            <span className="detalle-label">Número de serie</span>
+            <span className="detalle-valor">{activo.numero_serie}</span>
+          </div>
+          <div className="detalle-campo">
+            <span className="detalle-label">Tipo</span>
+            <span className="detalle-valor">{activo.tipo}</span>
+          </div>
+          <div className="detalle-campo">
+            <span className="detalle-label">Fecha de Ingreso</span>
+            <span className="detalle-valor">
+              {toISODateFlex(activo.fecha_ingreso) || "—"}
+            </span>
+          </div>
+
+          <div className="detalle-campo">
+            <span className="detalle-label">Ubicacion</span>
+            <span className="detalle-valor">
+              {UBICACIONES_ACTIVO[activo.ubicacion_tipo] ??
+                activo.ubicacion_tipo}
+            </span>
+          </div>
+        </div>
+
+        <div className="detalle-campo">
+          <span className="detalle-label">Usuario asignado</span>
+          {activo.nombre_usuario ? (
+            <div className="detalle-usuario">
+              <span className="detalle-avatar">
+                {activo.nombre_usuario.charAt(0).toUpperCase()}
+              </span>
+              <span>{activo.nombre_usuario}</span>
+            </div>
+          ) : (
+            <span className="detalle-valor">—</span>
+          )}
+        </div>
+        <footer className="detalle-acciones">
+          <button
+            type="button"
+            className="btn-primario"
+            style={
+              { "--c": colorEstadoActivo("Asignado") } as React.CSSProperties
+            }
+            onClick={onAsignar}
+          >
+            Asignar activo
+          </button>
+          <button
+            type="button"
+            className="btn-secundario"
+            onClick={onVerSeguimiento}
+          >
+            {" "}
+            Ver Ficha
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Inventario/FichaActivo.css b/src/components/Inventario/FichaActivo.css
new file mode 100644
index 0000000..e068e9a
--- /dev/null
+++ b/src/components/Inventario/FichaActivo.css
@@ -0,0 +1,511 @@
+.ficha-activo {
+  --card: var(--surface, #fff);
+  --ink: var(--ink, #0f172a);
+  --muted: var(--muted, #64748b);
+  --bd: var(--border, #e5e7eb);
+  --bd-strong: var(--bd-strong, color-mix(in oklab, var(--bd) 75%, black));
+  --shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, 0.08));
+  --radius: var(--radius, 14px);
+  --pad: clamp(10px, 2vw, 16px);
+  --gap: clamp(10px, 1.8vw, 14px);
+  --ring: var(
+    --ring,
+    color-mix(in oklab, var(--primary, #3b82f6) 25%, transparent) padding: 8px
+      24px 24px;
+  );
+  --radius: 15px;
+
+  color: var(--ink);
+}
+
+.ficha-activo[data-force-light] {
+  --card: var(--surface, #fff);
+  --ink: var(--ink, #0f172a);
+  --muted: var(--muted, #64748b);
+  --bd: var(--border, #e5e7eb);
+}
+
+/* --------- Wrapper tabla (scroll horizontal cómodo) --------- */
+.ficha-activo .table-wrap {
+  background: var(--card);
+  border: 1px solid var(--bd);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: var(--pad);
+  overflow-x: auto; /* 🔑 no se “rompe” en pantallas estrechas */
+  scrollbar-gutter: stable both-edges;
+}
+
+/* --------- Filtros superiores --------- */
+.ficha-activo-filtros {
+  display: grid;
+  grid-template-columns: 1.2fr max-content repeat(3, max-content) 1fr;
+  align-items: center;
+  gap: var(--gap);
+  padding-bottom: var(--pad);
+  margin-bottom: var(--pad);
+  border-bottom: 1px solid var(--bd);
+}
+
+.ficha-activo-filtros input[type="text"],
+.ficha-activo-filtros input[type="date"],
+.ficha-activo-filtros select {
+  appearance: none;
+  background: color-mix(in oklab, var(--card) 98%, transparent);
+  color: var(--ink);
+  border: 1px solid var(--bd);
+  border-radius: calc(var(--radius) - 6px);
+  padding: 10px 12px;
+  min-width: 0;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) inset;
+}
+.ficha-activo-filtros input::placeholder {
+  color: color-mix(in oklab, var(--muted) 85%, transparent);
+}
+.ficha-activo-filtros span {
+  color: var(--muted);
+  user-select: none;
+}
+
+/* enfoque accesible */
+.ficha-activo-filtros input:focus,
+.ficha-activo-filtros select:focus {
+  outline: none;
+  border-color: var(--bd-strong);
+  box-shadow: 0 0 0 4px var(--ring);
+}
+
+/* --------- Tabla --------- */
+.ficha-activo table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed; /* celdas estables */
+  min-width: 1900px; /* 10 columnas; el wrap hace scroll horizontal */
+}
+
+/* Cabezera sticky para tablas largas */
+.ficha-activo thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: color-mix(in oklab, var(--card) 98%, transparent);
+  color: var(--ink);
+  text-align: left;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  border-bottom: 1px solid var(--bd);
+  padding: 12px;
+  white-space: nowrap;
+}
+
+/* Indicador de “clickable” para columnas ordenables (role="button") */
+.ficha-activo thead th[role="button"] {
+  cursor: pointer;
+}
+.ficha-activo thead th[role="button"]:hover {
+  background: color-mix(in oklab, var(--card) 92%, transparent);
+}
+
+/* Filas */
+.ficha-activo tbody td {
+  border-bottom: 1px solid var(--bd);
+  padding: 12px;
+  color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Zebra + hover */
+.ficha-activo tbody tr:nth-child(odd) {
+  background: color-mix(in oklab, var(--card) 98%, transparent);
+}
+.ficha-activo tbody tr:hover {
+  background: color-mix(in oklab, gray 15%, transparent);
+}
+
+.ficha-activo th:nth-child(1) {
+  width: 150px; /* Fecha */
+}
+.ficha-activo th:nth-child(2) {
+  width: 130px; /* Estado Anterior*/
+}
+.ficha-activo th:nth-child(3) {
+  width: 130px; /* Estado nuevo*/
+}
+.ficha-activo th:nth-child(4) {
+  width: 130px; /* Ubicación origen */
+}
+.ficha-activo th:nth-child(5) {
+  width: 130px; /* Ubicacion destino*/
+}
+.ficha-activo th:nth-child(6) {
+  width: 250x; /* Usuario origen */
+}
+.ficha-activo th:nth-child(7) {
+  width: 250px; /* Usuario destino */
+}
+.ficha-activo th:nth-child(8) {
+  width: 110px; /* Ticket */
+}
+.ficha-activo th:nth-child(9) {
+  width: 150px; /* Responsable */
+}
+.ficha-activo th:last-child {
+  width: 280px; /* Comentario, necesita más espacio */
+}
+
+.ficha-activo tbody td:last-child {
+  white-space: normal; /* el comentario puede envolver en vez de cortarse */
+}
+
+/* Clickable rows (accesible) */
+.ficha-activo tbody tr {
+  transition: background 0.15s ease;
+}
+.ficha-activo tbody tr:focus-within {
+  outline: none;
+  background: color-mix(in oklab, var(--card) 88%, transparent);
+  box-shadow: 0 0 0 4px var(--ring) inset;
+}
+
+/* --------- Paginación --------- */
+.paginacion {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  align-items: center;
+  gap: 10px;
+  margin-top: var(--gap);
+  padding-top: var(--gap);
+  border-top: 1px solid var(--bd);
+  color: var(--muted);
+}
+.paginacion > span {
+  font-weight: 700;
+  color: var(--ink);
+}
+.paginacion button {
+  background: color-mix(in oklab, var(--card) 94%, transparent);
+  color: var(--ink);
+  border: 1px solid var(--bd);
+  border-radius: calc(var(--radius) - 8px);
+  padding: 8px 12px;
+  font-weight: 600;
+}
+.paginacion button:hover:enabled {
+  background: color-mix(in oklab, var(--card) 88%, transparent);
+}
+.paginacion button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.paginacion select {
+  background: color-mix(in oklab, var(--card) 96%, transparent);
+  color: var(--ink);
+  border: 1px solid var(--bd);
+  border-radius: calc(var(--radius) - 8px);
+  padding: 6px 10px;
+}
+
+/* --------- Estados de la vista (loading / error / vacío) --------- */
+.ficha-activo p {
+  margin: 8px 0;
+  color: var(--muted);
+}
+.ficha-activo p strong {
+  color: var(--ink);
+}
+
+/* =========================================================
+   RESPONSIVE / ADAPTATIVO
+   ========================================================= */
+
+/* 1) Filtros se reacomodan en pantallas medianas */
+@container (max-width: 1100px) {
+  .ficha-activo-filtros {
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: minmax(40px, auto);
+  }
+  .ficha-activo-filtros span {
+    display: none;
+  } /* ocultamos el “→” si no hay espacio */
+}
+
+/* 2) Filtros en una sola columna en pantallas estrechas */
+@container (max-width: 640px) {
+  .ficha-activo-filtros {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+}
+
+/* 3) Tabla: reduce padding en celdas cuando el viewport es angosto
+   (el overflow-x del .table-wrap asegura el scroll horizontal) */
+@media (max-width: 720px) {
+  .ficha-activo thead th,
+  .ficha-activo td {
+    padding: 10px 8px;
+  }
+}
+
+/* 4) Mejoras de accesibilidad / motion */
+@media (prefers-reduced-motion: reduce) {
+  .ficha-activo tbody tr {
+    transition: none;
+  }
+}
+
+/* --------- Cuadro con la información del activo --------- */
+.ficha-activo-header {
+  background: var(--card);
+  border: 1px solid var(--bd);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: var(--pad);
+  margin-bottom: var(--gap);
+  max-width: 1500px;
+}
+
+/* --------- Selector (entrar a la ficha desde el menú) --------- */
+.ficha-activo-selector {
+  width: 100%;
+  max-width: 1000px;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+.ficha-activo-selector__header {
+  margin-bottom: 24px;
+}
+.ficha-activo-selector__header h2 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ink);
+}
+.ficha-activo-selector__header p {
+  margin: 6px 0 0;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.ficha-activo-selector__tarjeta {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  padding: 22px;
+  border: 1px solid var(--bd);
+  border-radius: var(--radius);
+  background: var(--card);
+}
+
+.ficha-activo-selector__label {
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* --------- Título con estado + botón Devolver --------- */
+
+.ficha-activo-titulo__acciones {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* Badge de estado: el color llega por --c (colorEstadoActivo) */
+.ficha-activo-estado {
+  display: inline-block;
+  padding: 3px 10px;
+  border: 1px solid color-mix(in oklab, var(--c) 40%, transparent);
+  border-radius: 6px;
+  background: color-mix(in oklab, var(--c) 15%, transparent);
+  color: var(--c);
+  font-family: ui-monospace, monospace;
+  font-size: 0.82rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.ficha-activo-btn-devolver,
+.ficha-activo-btn-secundario {
+  height: 34px;
+  padding: 0 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+}
+.ficha-activo-btn-devolver {
+  border: 1px solid var(--primary);
+  background: var(--primary);
+  color: var(--primary-ink);
+}
+.ficha-activo-btn-devolver:hover {
+  filter: brightness(1.08);
+}
+.ficha-activo-btn-secundario {
+  border: 1px solid var(--bd);
+  background: transparent;
+  color: var(--ink);
+}
+.ficha-activo-btn-devolver:disabled,
+.ficha-activo-btn-secundario:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  filter: none;
+}
+
+/* --------- Panel de devolución --------- */
+.ficha-activo-devolucion {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 14px;
+  padding: 14px;
+  border: 1px solid var(--bd);
+  border-radius: 10px;
+  background: color-mix(in oklab, var(--ink) 3%, var(--card));
+}
+.ficha-activo-devolucion__label {
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.ficha-activo-devolucion__opciones {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+.ficha-activo-devolucion__opcion {
+  height: 40px;
+  border: 1px solid var(--bd);
+  border-radius: 8px;
+  background: var(--field-bg);
+  color: var(--muted);
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+}
+.ficha-activo-devolucion__opcion.is-activo {
+  border-color: var(--primary);
+  background: color-mix(in oklab, var(--primary) 16%, var(--field-bg));
+  color: var(--ink);
+}
+.ficha-activo-devolucion textarea {
+  padding: 10px 12px;
+  border: 1px solid var(--bd);
+  border-radius: 8px;
+  background: var(--field-bg);
+  color: var(--ink);
+  font-family: inherit;
+  font-size: 14px;
+  resize: vertical;
+}
+.ficha-activo-devolucion textarea:focus,
+.ficha-activo-devolucion__opcion:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ring);
+}
+.ficha-activo-devolucion__error {
+  color: var(--danger, #dc2626);
+}
+.ficha-activo-devolucion__acciones {
+  display: flex;
+  gap: 10px;
+}
+/* --------- Título de la página --------- */
+.ficha-activo-pagina {
+  margin-bottom: 18px;
+}
+.ficha-activo-pagina h2 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ink);
+}
+.ficha-activo-pagina p {
+  margin: 6px 0 0;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+/* --------- Tarjeta del activo --------- */
+.ficha-activo-tarjeta__top {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--bd);
+}
+
+.ficha-activo-tarjeta__icono {
+  align-self: center;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 64px;
+  height: 64px;
+  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
+  border-radius: 10px;
+  background: color-mix(in oklab, var(--primary) 12%, transparent);
+  color: var(--primary);
+}
+
+.ficha-activo-tarjeta__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ficha-activo-tarjeta__codigo {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 20px;
+  color: var(--primary);
+  font-weight: 700;
+}
+.ficha-activo-tarjeta__nombre {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--ink);
+}
+.ficha-activo-tarjeta__sub {
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.ficha-activo-tarjeta__datos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 48px;
+  margin: 0;
+}
+.ficha-activo-tarjeta__datos dt {
+  font-size: 14px;
+  color: var(--muted);
+}
+.ficha-activo-tarjeta__datos dd {
+  margin: 4px 0 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 18px;
+  color: var(--ink);
+}
+
+@media (max-width: 640px) {
+  .ficha-activo-tarjeta__top {
+    flex-wrap: wrap;
+  }
+  .ficha-activo-titulo__acciones {
+    width: 100%;
+  }
+}
diff --git a/src/components/Inventario/FichaActivo.tsx b/src/components/Inventario/FichaActivo.tsx
new file mode 100644
index 0000000..e98b4f4
--- /dev/null
+++ b/src/components/Inventario/FichaActivo.tsx
@@ -0,0 +1,525 @@
+// src/components/Inventario/FichaActivo.tsx
+import * as React from "react";
+import type { ActivoTI, Ubicacion_Tipo } from "../../Models/ActivoTI";
+import { Monitor } from "lucide-react";
+
+import "./FichaActivo.css";
+import { ESTADOS_ACTIVO } from "../../Models/ActivosTIMovimientos";
+import { UBICACIONES_ACTIVO } from "../../Models/ActivoTI";
+import type { EstadoActivo } from "../../Models/ActivosTIMovimientos";
+import { toISODateTimeFlex } from "../../utils/Date";
+import { useRepositories } from "../../repositories/repositoriesContext";
+import { useActivoMovimientos } from "../../Funcionalidades/inventario/useActivoMovimientos";
+import { useActivoTicket } from "../../Funcionalidades/inventario/useActivoTickets";
+import type {
+  MovimientoSort,
+  MovimientoSortField,
+} from "../../Funcionalidades/inventario/useActivoMovimientos";
+import { colorEstadoActivo } from "../../Funcionalidades/inventario/utils/ActivosColors";
+
+import { useGraphServices } from "../../graph/GrapServicesContext";
+import type { prestamos } from "../../Models/prestamos";
+import { BuscadorActivo } from "./BuscadorActivo";
+import { useActivoPrestamo } from "../../Funcionalidades/inventario/useActivoPrestamo";
+
+function nombreUbicacion(ubicacion?: string | null) {
+  if (!ubicacion) return "–";
+  return UBICACIONES_ACTIVO[ubicacion as Ubicacion_Tipo] ?? ubicacion;
+}
+function renderSortIndicator(
+  field: MovimientoSortField,
+  sorts: MovimientoSort[],
+) {
+  const idx = sorts.findIndex((s) => s.field === field);
+  if (idx < 0) return null;
+  const dir = sorts[idx].dir === "asc" ? "▲" : "▼";
+  return (
+    <span style={{ marginLeft: 6, opacity: 0.85 }}>
+      {dir}
+      {sorts.length > 1 ? ` ${idx + 1}` : ""}
+    </span>
+  );
+}
+
+type FichaActivoProps = {
+  activo?: ActivoTI;
+  onClose?: () => void;
+};
+
+// Sin `activo` (p. ej. desde el menú) se pide elegirlo primero.
+export default function FichaActivo({ activo, onClose }: FichaActivoProps) {
+  const [elegido, setElegido] = React.useState<ActivoTI | null>(null);
+  const actual = activo ?? elegido;
+
+  if (!actual) {
+    return <FichaActivoSelector onSelect={setElegido} />;
+  }
+
+  return (
+    <FichaActivoDetalle
+      key={actual.id}
+      activo={actual}
+      onClose={activo ? onClose : () => setElegido(null)}
+    />
+  );
+}
+
+// Pantalla para elegir el activo cuando se entra a la ficha desde el menú
+function FichaActivoSelector({
+  onSelect,
+}: {
+  onSelect: (activo: ActivoTI) => void;
+}) {
+  return (
+    <div className="ficha-activo ficha-activo-selector">
+      <div className="ficha-activo-selector__header">
+        <h2>Ficha de seguimiento</h2>
+        <p>
+          Historial completo de movimientos y tickets asociados a un activo.
+        </p>
+      </div>
+
+      <div className="ficha-activo-selector__tarjeta">
+        <label
+          htmlFor="ficha_buscar_activo"
+          className="ficha-activo-selector__label"
+        >
+          Activo
+        </label>
+        <BuscadorActivo
+          inputId="ficha_buscar_activo"
+          onChange={(activo) => activo && onSelect(activo)}
+        />
+      </div>
+    </div>
+  );
+}
+
+function FichaActivoDetalle({
+  activo: activoInicial,
+  onClose,
+}: FichaActivoProps & { activo: ActivoTI }) {
+  // Copia local: se refresca después de una devolución
+  const [activo, setActivo] = React.useState<ActivoTI>(activoInicial);
+  const activoId = activo?.id;
+
+  const { movimientosTI, activotickets, activosTI } = useRepositories();
+  const {
+    movimientos,
+    loading,
+    error,
+    search,
+    setSearch,
+    tipoEventoFiltro,
+    setTipoEventoFiltro,
+    pageIndex,
+    pageSize,
+    setPageSize,
+    hasNext,
+    nextPage,
+    prevPage,
+    sorts,
+    toggleSort,
+    loadAll: recargarMovimientos,
+  } = useActivoMovimientos({ MovimientosSvc: movimientosTI!, activoId });
+  const {
+    activoticket: incidencias,
+    loading: loadingIncidencias,
+    loadActivoTicket,
+  } = useActivoTicket({ ActivosTicketSvc: activotickets! });
+
+  React.useEffect(() => {
+    if (activoId) loadActivoTicket({ activo_id: activoId });
+  }, [activoId, loadActivoTicket]);
+
+  const { prestamos: prestamosSvc } = useGraphServices();
+  const [prestamosActivo, setPrestamosActivo] = React.useState<prestamos[]>([]);
+
+  React.useEffect(() => {
+    if (!activoId || !prestamosSvc) return;
+    prestamosSvc
+      .getAll({ filter: `fields/Id_dispositivo eq '${activoId}'` })
+      .then((res) => setPrestamosActivo(res.items ?? []))
+      .catch((e) =>
+        console.error("No se pudo cargar el historial de préstamos:", e),
+      );
+  }, [activoId, prestamosSvc]);
+
+  const prestamoActual = prestamosActivo.find(
+    (p) => String(p.Id) === String(activo.prestamo_activo_id),
+  );
+
+  // Devolución: solo aplica si el activo está en préstamo
+  const { devolverPrestamoActivo } = useActivoPrestamo();
+  const [devolviendo, setDevolviendo] = React.useState(false);
+  const [buenEstado, setBuenEstado] = React.useState<boolean | null>(null);
+  const [comentarioDevolucion, setComentarioDevolucion] = React.useState("");
+  const [guardandoDevolucion, setGuardandoDevolucion] = React.useState(false);
+  const [errorDevolucion, setErrorDevolucion] = React.useState<string | null>(
+    null,
+  );
+  const puedeDevolver = activo.estado === "en_prestamo" && !!prestamoActual;
+
+  const cancelarDevolucion = () => {
+    setDevolviendo(false);
+    setBuenEstado(null);
+    setComentarioDevolucion("");
+    setErrorDevolucion(null);
+  };
+
+  const confirmarDevolucion = async () => {
+    if (!prestamoActual || buenEstado === null) return;
+    setGuardandoDevolucion(true);
+    setErrorDevolucion(null);
+    try {
+      const ok = await devolverPrestamoActivo(
+        prestamoActual,
+        buenEstado,
+        comentarioDevolucion,
+      );
+      if (!ok) {
+        setErrorDevolucion("No se pudo registrar la devolución");
+        return;
+      }
+      // Refresca la ficha: estado del activo y bitácora
+      const res = await activosTI?.getActivoById(activo.id);
+      if (res?.status && res.data) setActivo(res.data);
+      recargarMovimientos();
+      cancelarDevolucion();
+    } finally {
+      setGuardandoDevolucion(false);
+    }
+  };
+
+  return (
+    <div className="ficha-activo">
+      <div className="ficha-activo-pagina">
+        <h2>Ficha de seguimiento</h2>
+        <p>
+          Historial completo de movimientos y tickets asociados a un activo.
+        </p>
+      </div>
+
+      <div className="ficha-activo-header">
+        <div className="ficha-activo-tarjeta__top">
+          <div className="ficha-activo-tarjeta__icono">
+            <Monitor size={30} />
+          </div>
+
+          <div className="ficha-activo-tarjeta__info">
+            <span className="ficha-activo-tarjeta__codigo">
+              {activo.codigo_inventario}
+            </span>
+            <h3 className="ficha-activo-tarjeta__nombre">
+              {[activo.marca, activo.modelo].filter(Boolean).join(" ") ||
+                activo.tipo}
+            </h3>
+            <span className="ficha-activo-tarjeta__sub">
+              S/N: {activo.numero_serie} · {activo.tipo}
+            </span>
+          </div>
+
+          <div className="ficha-activo-titulo__acciones">
+            <span
+              className="ficha-activo-estado"
+              style={
+                {
+                  "--c": colorEstadoActivo(activo.estado),
+                } as React.CSSProperties
+              }
+            >
+              {ESTADOS_ACTIVO[activo.estado] ?? activo.estado}
+            </span>
+            {puedeDevolver && !devolviendo && (
+              <button
+                type="button"
+                className="ficha-activo-btn-devolver"
+                onClick={() => setDevolviendo(true)}
+              >
+                Devolver
+              </button>
+            )}
+            <button
+              type="button"
+              className="ficha-activo-btn-secundario"
+              onClick={onClose}
+            >
+              Volver
+            </button>
+          </div>
+        </div>
+
+        {devolviendo && (
+          <div className="ficha-activo-devolucion">
+            <span className="ficha-activo-devolucion__label">
+              ¿En qué estado llega el equipo?
+            </span>
+            <div
+              className="ficha-activo-devolucion__opciones"
+              role="radiogroup"
+            >
+              {[true, false].map((bueno) => (
+                <button
+                  key={String(bueno)}
+                  type="button"
+                  role="radio"
+                  aria-checked={buenEstado === bueno}
+                  className={
+                    "ficha-activo-devolucion__opcion" +
+                    (buenEstado === bueno ? " is-activo" : "")
+                  }
+                  onClick={() => setBuenEstado(bueno)}
+                >
+                  {bueno ? "Buen estado" : "Mal estado"}
+                </button>
+              ))}
+            </div>
+            <textarea
+              rows={2}
+              placeholder="Comentario (opcional)"
+              value={comentarioDevolucion}
+              onChange={(e) => setComentarioDevolucion(e.target.value)}
+            />
+            {errorDevolucion && (
+              <small className="ficha-activo-devolucion__error">
+                {errorDevolucion}
+              </small>
+            )}
+            <div className="ficha-activo-devolucion__acciones">
+              <button
+                type="button"
+                className="ficha-activo-btn-devolver"
+                disabled={buenEstado === null || guardandoDevolucion}
+                onClick={confirmarDevolucion}
+              >
+                {guardandoDevolucion ? "Guardando..." : "Confirmar devolución"}
+              </button>
+              <button
+                type="button"
+                className="ficha-activo-btn-secundario"
+                disabled={guardandoDevolucion}
+                onClick={cancelarDevolucion}
+              >
+                Cancelar
+              </button>
+            </div>
+          </div>
+        )}
+        <dl className="ficha-activo-tarjeta__datos">
+          <div>
+            <dt>Ubicación actual</dt>
+            <dd>
+              {UBICACIONES_ACTIVO[activo.ubicacion_tipo] ??
+                activo.ubicacion_tipo}
+            </dd>
+          </div>
+          <div>
+            <dt>Usuario actual</dt>
+            <dd>{activo.nombre_usuario || "Sin asignar"}</dd>
+          </div>
+          <div>
+            <dt>Ingresó el</dt>
+            <dd>{activo.fecha_ingreso?.slice(0, 10) || "–"}</dd>
+          </div>
+          {prestamoActual && (
+            <div>
+              <dt>En préstamo a</dt>
+              <dd>
+                {prestamoActual.nombreSolicitante} · desde{" "}
+                {toISODateTimeFlex(prestamoActual.FechaPrestamo)}
+              </dd>
+            </div>
+          )}
+        </dl>
+      </div>
+      <div className="table-wrap">
+        <div className="ficha-activo-filtros">
+          <input
+            type="text"
+            placeholder="Buscar (comentario, usuario destino, responsable)..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+
+          <select
+            value={tipoEventoFiltro}
+            onChange={(e) =>
+              setTipoEventoFiltro(e.target.value as EstadoActivo | "")
+            }
+            title="Estado Nuevo"
+          >
+            <option value="">Todos</option>
+            {Object.entries(ESTADOS_ACTIVO).map(([key, label]) => (
+              <option key={key} value={key}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {loading && <p>Cargando movimientos…</p>}
+        {error && <p style={{ color: "#b91c1c" }}>{error}</p>}
+        {!loading && !error && movimientos.length === 0 && (
+          <p>No hay movimientos para los filtros seleccionados.</p>
+        )}
+
+        <table>
+          <thead>
+            <tr>
+              <th
+                role="button"
+                tabIndex={0}
+                onClick={(e) => toggleSort("fecha_evento", e.shiftKey)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ")
+                    toggleSort("fecha_evento", e.shiftKey);
+                }}
+                aria-label="Ordenar por fecha"
+                style={{ cursor: "pointer", whiteSpace: "nowrap" }}
+              >
+                Fecha {renderSortIndicator("fecha_evento", sorts)}
+              </th>
+
+              <th>Estado anterior</th>
+
+              <th
+                role="button"
+                tabIndex={0}
+                onClick={(e) => toggleSort("estado_nuevo", e.shiftKey)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ")
+                    toggleSort("estado_nuevo", e.shiftKey);
+                }}
+                aria-label="Ordenar por estado"
+                style={{ cursor: "pointer", whiteSpace: "nowrap" }}
+              >
+                Estado Nuevo {renderSortIndicator("estado_nuevo", sorts)}
+              </th>
+
+              <th>Ubicación origen</th>
+              <th>Ubicación destino</th>
+              <th>Usuario origen</th>
+              <th>Usuario destino</th>
+              <th>Ticket</th>
+
+              <th
+                role="button"
+                tabIndex={0}
+                onClick={(e) => toggleSort("responsable_nombre", e.shiftKey)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ")
+                    toggleSort("responsable_nombre", e.shiftKey);
+                }}
+                aria-label="Ordenar por responsable"
+                style={{ cursor: "pointer", whiteSpace: "nowrap" }}
+              >
+                Responsable {renderSortIndicator("responsable_nombre", sorts)}
+              </th>
+
+              <th>Comentario</th>
+            </tr>
+          </thead>
+          <tbody>
+            {movimientos.map((movimiento) => (
+              <tr key={movimiento.id}>
+                <td>{toISODateTimeFlex(movimiento.fecha_evento) || "–"}</td>
+                <td>
+                  {movimiento.estado_anterior
+                    ? (ESTADOS_ACTIVO[
+                        movimiento.estado_anterior as EstadoActivo
+                      ] ?? movimiento.estado_anterior)
+                    : "–"}
+                </td>
+                <td>
+                  {movimiento.estado_nuevo ? (
+                    <span
+                      className="ficha-activo-estado"
+                      style={
+                        {
+                          "--c": colorEstadoActivo(movimiento.estado_nuevo),
+                        } as React.CSSProperties
+                      }
+                    >
+                      {ESTADOS_ACTIVO[movimiento.estado_nuevo] ??
+                        movimiento.estado_nuevo}
+                    </span>
+                  ) : (
+                    "–"
+                  )}
+                </td>
+                <td>{nombreUbicacion(movimiento.ubicacion_origen || "–")}</td>
+                <td>{nombreUbicacion(movimiento.ubicacion_destino || "–")}</td>
+                <td title={movimiento.usuario_origen_correo || ""}>
+                  {movimiento.usuario_origen_nombre ||
+                    movimiento.usuario_origen_correo ||
+                    "–"}
+                </td>
+                <td title={movimiento.usuario_destino_correo || ""}>
+                  {movimiento.usuario_destino_nombre ||
+                    movimiento.usuario_destino_correo ||
+                    "–"}
+                </td>
+                <td>{movimiento.ticket_id || "–"}</td>
+                <td>{movimiento.responsable_nombre}</td>
+                <td>
+                  <span title={movimiento.comentario}>
+                    {movimiento.comentario || "–"}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        {movimientos.length > 0 && (
+          <div className="paginacion">
+            <button onClick={prevPage} disabled={loading || pageIndex <= 1}>
+              Anterior
+            </button>
+            <span>Página {pageIndex}</span>
+            <button onClick={nextPage} disabled={loading || !hasNext}>
+              Siguiente
+            </button>
+
+            <label
+              htmlFor="page-size"
+              style={{ marginLeft: 12, marginRight: 8 }}
+            >
+              Movimientos por página:
+            </label>
+            <select
+              id="page-size"
+              value={pageSize}
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                setPageSize(parseInt(e.target.value, 10))
+              }
+              disabled={loading}
+            >
+              {[10, 15, 20, 50].map((n) => (
+                <option key={n} value={n}>
+                  {n}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+
+      <div className="ficha-activo-incidencias">
+        <h3>Tickets asociados ({incidencias.length})</h3>
+        {loadingIncidencias && <p>Cargando tickets asociados..</p>}
+        {!loadingIncidencias && incidencias.length === 0 && (
+          <p>Este activo no tiene tickets asociados.</p>
+        )}
+        <ul>
+          {incidencias.map((i) => (
+            <li key={i.id}>
+              Ticket #{i.ticket_id} · {toISODateTimeFlex(i.fecha_vinculacion)} ·{" "}
+              {i.vinculado_por_nombre}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Inventario/ModalAltaActivo.tsx b/src/components/Inventario/ModalAltaActivo.tsx
new file mode 100644
index 0000000..733ecea
--- /dev/null
+++ b/src/components/Inventario/ModalAltaActivo.tsx
@@ -0,0 +1,184 @@
+import React from "react";
+import "./ModalAltaActivos.css";
+import type {
+  // CategoriaActivo,
+  Ubicacion_Tipo,
+} from "../../Models/ActivoTI";
+import { TIPOS_ACTIVO, UBICACIONES_ACTIVO } from "../../Models/ActivoTI";
+import { useRepositories } from "../../repositories/repositoriesContext";
+import { useActivosTI } from "../../Funcionalidades/inventario/useActivosTI";
+
+export const ModalAltaActivos: React.FC = () => {
+  const { activosTI } = useRepositories();
+  const { form, formErrors, error, loading, setField, saveActivo, resetForm } =
+    useActivosTI({ ActivosSvc: activosTI! });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    // Si guarda bien, el hook ya deja el formulario vacío para el siguiente
+    await saveActivo();
+  };
+
+  return (
+    <div className="activo-form-page alta-activo">
+      <div className="activo-form-header">
+        <h2>Registrar nuevo activo TI</h2>
+        <p>Complete los datos del activo para incorporarlo al inventario</p>
+        {error && <p style={{ color: "#dc2626" }}>{error}</p>}
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <div className="activo-form-container">
+          <div className="form-section">
+            <h3 className="section-title">IDENTIFICACIÓN</h3>
+
+            <div className="form-grid">
+              <div className="form-group">
+                <label htmlFor="codigo_inventario">
+                  CÓDIGO DEL ACTIVO <span>*</span>
+                </label>
+                <input
+                  id="codigo_inventario"
+                  type="text"
+                  required
+                  placeholder="Ingrese código del activo"
+                  value={form.codigo_inventario ?? ""}
+                  onChange={(e) =>
+                    setField("codigo_inventario", e.target.value.toUpperCase())
+                  }
+                />
+                {formErrors.codigo_inventario && (
+                  <small style={{ color: "#dc2626" }}>
+                    {formErrors.codigo_inventario}
+                  </small>
+                )}
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="numero_serie">
+                  NÚMERO DE SERIE<span>*</span>
+                </label>
+                <input
+                  id="numero_serie"
+                  type="text"
+                  required
+                  placeholder="Ingrese número de serie"
+                  value={form.numero_serie ?? ""}
+                  onChange={(e) => setField("numero_serie", e.target.value.toUpperCase())}
+                />
+                {formErrors.numero_serie && (
+                  <small style={{ color: "#dc2626" }}>
+                    {formErrors.numero_serie}
+                  </small>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="form-section">
+            <h3 className="section-title">ESPECIFICACIONES</h3>
+
+            <div className="form-grid">
+              <div className="form-group">
+                <label htmlFor="tipo">
+                  TIPO <span>*</span>
+                </label>
+                <select
+                  id="tipo"
+                  value={form.tipo ?? ""}
+                  onChange={(e) =>
+                    setField("tipo", e.target.value)
+                  }
+                >
+                  <option value="">Selecciona...</option>
+                  {Object.entries(TIPOS_ACTIVO)
+                  .sort(([, labelA], [, labelB]) => labelA.localeCompare(labelB, "es"))
+                  .map(([value, label]) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))}
+                </select>
+                {formErrors.tipo && (
+                  <small style={{ color: "#dc2626" }}>{formErrors.tipo}</small>
+                )}
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="marca">MARCA</label>
+                <input
+                  id="marca"
+                  type="text"
+                  placeholder="Ingrese Marca"
+                  value={form.marca ?? ""}
+                  onChange={(e) => setField("marca", (e.target.value))}
+                />
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="ubicacion_tipo">
+                  UBICACIÓN <span>*</span>
+                </label>
+                <select
+                  id="ubicacion_tipo"
+                  value={form.ubicacion_tipo ?? ""}
+                  onChange={(e) =>
+                    setField("ubicacion_tipo", e.target.value as Ubicacion_Tipo)
+                  }
+                >
+                  <option value="">Selecciona...</option>
+                  {Object.entries(UBICACIONES_ACTIVO).map(([value, label]) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))}
+                </select>
+                {formErrors.ubicacion_tipo && (
+                  <small style={{ color: "#dc2626" }}>
+                    {formErrors.ubicacion_tipo}
+                  </small>
+                )}
+              </div>
+              <div className="form-group">
+                <label htmlFor="fecha_ingreso">
+                  FECHA DE INGRESO <span>*</span>
+                </label>
+                <input
+                  id="fecha_ingreso"
+                  type="date"
+                  value={form.fecha_ingreso?.slice(0, 10) ?? ""}
+                  onChange={(e) => setField("fecha_ingreso", e.target.value)}
+                />
+                {formErrors.fecha_ingreso && (
+                  <small style={{ color: "#dc2626" }}>
+                    {formErrors.fecha_ingreso}
+                  </small>
+                )}
+              </div>
+
+              <div className="form-group form-group--completo">
+                <label htmlFor="modelo">MODELO</label>
+                <input
+                  id="modelo"
+                  type="text"
+                  placeholder="Ingrese modelo"
+                  value={form.modelo ?? ""}
+                  onChange={(e) => setField("modelo", (e.target.value))}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="activo-form-footer">
+            <button type="submit" className="btn-guardar" disabled={loading}>
+              {loading ? "Guardando..." : "Registrar Activo"}
+            </button>
+            <button type="button" onClick={resetForm} className="btn-cancelar">
+              Limpiar Formulario
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/src/components/Inventario/ModalAltaActivos.css b/src/components/Inventario/ModalAltaActivos.css
new file mode 100644
index 0000000..81db6e2
--- /dev/null
+++ b/src/components/Inventario/ModalAltaActivos.css
@@ -0,0 +1,162 @@
+/* Todo va bajo .alta-activo: ModalAsignarActivo.css usa los mismos nombres de clase */
+.activo-form-page.alta-activo {
+  width: 100%;
+  max-width: 1000px;
+  margin: 0;
+  padding: 0px 24px 24px;
+  box-sizing: border-box;
+}
+
+.alta-activo .activo-form-header {
+  margin-bottom: 24px;
+}
+.alta-activo .activo-form-header h2 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.alta-activo .activo-form-header p {
+  margin: 6px 0 0;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.alta-activo .activo-form-container {
+  /* Cuadro exterior: agrupa las secciones (tarjetas) y los botones */
+  padding: 24px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: color-mix(in oklab, var(--ink) 4%, var(--surface));
+  box-shadow: var(--shadow);
+  display: grid;
+  gap: 18px;
+}
+
+.alta-activo .form-section,
+.alta-activo .form-section:first-child,
+.alta-activo .form-section:last-child {
+  padding: 22px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface);
+}
+
+.alta-activo .section-title {
+  margin: 0 0 18px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.alta-activo .form-group label {
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* GRID */
+
+.alta-activo .form-grid {
+  display: grid;
+  /* Siempre 2 columnas; en pantallas angostas pasa a 1 (ver @media al final) */
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+  /* Anula overflow/padding del .form-grid global de ModalInventario.css */
+  overflow: visible;
+  padding-block: 0;
+}
+
+.alta-activo .form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+/* Ocupa toda la fila del grid (p. ej. Modelo al final de Especificaciones) */
+.alta-activo .form-group--completo {
+  grid-column: 1 / -1;
+}
+
+.alta-activo .form-group label span {
+  color: #dc2626;
+}
+
+/* INPUTS */
+
+.alta-activo .form-group input,
+.alta-activo .form-group select {
+  width: 100%;
+  height: 42px;
+  padding: 0 12px;
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  background: var(--field-bg);
+  color: var(--ink);
+  font-size: 14px;
+  outline: none;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.alta-activo .form-group input:focus,
+.alta-activo .form-group select:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--ring);
+}
+
+/* FOOTER */
+
+.alta-activo .activo-form-footer {
+  display: flex;
+  justify-content: flex-start;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.alta-activo .btn-cancelar,
+.alta-activo .btn-guardar {
+  height: 42px;
+  padding: 0 24px;
+  border-radius: 9px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    filter 0.2s,
+    background 0.2s;
+}
+
+.alta-activo .btn-cancelar {
+  border: 1px solid var(--border);
+  background: var(--field-bg);
+  color: var(--ink);
+}
+.alta-activo .btn-cancelar:hover {
+  background: color-mix(in oklab, var(--ink) 8%, var(--field-bg));
+}
+
+.alta-activo .btn-guardar {
+  border: 1px solid var(--primary);
+  background: var(--primary);
+  color: var(--primary-ink);
+}
+.alta-activo .btn-guardar:hover {
+  filter: brightness(1.08);
+}
+.alta-activo .btn-guardar:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+@media (max-width: 640px) {
+  .alta-activo .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/components/Inventario/ModalAsignarActivo.css b/src/components/Inventario/ModalAsignarActivo.css
new file mode 100644
index 0000000..fdf392b
--- /dev/null
+++ b/src/components/Inventario/ModalAsignarActivo.css
@@ -0,0 +1,226 @@
+.activo-form-page.asignar-activo {
+  width: 100%;
+  max-width: 1000px;
+  margin: 0;
+  padding: 0px 24px s24px;
+  box-sizing: border-box;
+}
+
+.asignar-activo .activo-form-header {
+  margin-bottom: 24px;
+}
+.asignar-activo .activo-form-header h2 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ink);
+}
+.asignar-activo .activo-form-header p {
+  margin: 6px 0 0;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+/* Cuadro exterior: agrupa las secciones (tarjetas) y los botones */
+.asignar-activo .activo-form-container {
+  padding: 24px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: color-mix(in oklab, var(--ink) 4%, var(--surface));
+  box-shadow: var(--shadow);
+  display: grid;
+  gap: 18px;
+}
+
+.asignar-activo .form-section {
+  padding: 22px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface);
+}
+
+/* SECCIONES */
+
+.asignar-activo .section-title {
+  margin-bottom: 18px;
+}
+.asignar-activo .section-title h3 {
+  margin: 0;
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.asignar-activo .section-title span {
+  display: block;
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* GRID */
+
+.asignar-activo .form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+  /* Anula overflow/padding del .form-grid global de ModalInventario.css */
+  overflow: visible;
+  padding-block: 0;
+}
+
+.asignar-activo .form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.asignar-activo .form-group label {
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.asignar-activo .form-group label span {
+  color: #dc2626;
+}
+
+/* INPUTS */
+
+.asignar-activo .form-group input:not(.rs_input),
+.asignar-activo .form-group select,
+.asignar-activo .form-group textarea {
+  width: 100%;
+  padding: 0 12px;
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  background: var(--field-bg);
+  color: var(--ink);
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.asignar-activo .form-group input:not(.rs__input),
+.asignar-activo .form-group select {
+  height: 42px;
+}
+
+.asignar-activo .form-group textarea {
+  padding: 10px 12px;
+  resize: vertical;
+}
+
+.asignar-activo .form-group input:not(.rs_input):focus,
+.asignar-activo .form-group select:focus,
+.asignar-activo .form-group textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--ring);
+}
+
+/* Campos de solo lectura (datos actuales del activo) */
+.asignar-activo .form-group input:not(.rs_input):disabled {
+  background: color-mix(in oklab, var(--ink) 5%, var(--field-bg));
+  color: var(--muted);
+  cursor: not-allowed;
+}
+
+/* TIPO DE MOVIMIENTO (Asignación / Préstamo) */
+
+.asignar-activo .tipo-movimiento {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.asignar-activo .tipo-movimiento__opcion {
+  height: 46px;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  background: var(--field-bg);
+  color: var(--muted);
+  font-size: 15px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    background 0.2s,
+    color 0.2s;
+}
+.asignar-activo .tipo-movimiento__opcion:hover {
+  color: var(--ink);
+}
+.asignar-activo .tipo-movimiento__opcion.is-activo {
+  border-color: var(--primary);
+  background: color-mix(in oklab, var(--primary) 16%, var(--field-bg));
+  color: var(--ink);
+}
+.asignar-activo .tipo-movimiento__opcion:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ring);
+}
+
+.asignar-activo .tipo-movimiento__ayuda {
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* FOOTER */
+
+.asignar-activo .activo-form-footer {
+  display: flex;
+  justify-content: flex-start;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.asignar-activo .btn-cancelar,
+.asignar-activo .btn-guardar {
+  height: 42px;
+  padding: 0 24px;
+  border-radius: 9px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    filter 0.2s,
+    background 0.2s;
+}
+
+.asignar-activo .btn-cancelar {
+  border: 1px solid var(--border);
+  background: var(--field-bg);
+  color: var(--ink);
+}
+.asignar-activo .btn-cancelar:hover {
+  background: color-mix(in oklab, var(--ink) 8%, var(--field-bg));
+}
+
+.asignar-activo .btn-guardar {
+  border: 1px solid var(--primary);
+  background: var(--primary);
+  color: var(--primary-ink);
+}
+.asignar-activo .btn-guardar:hover {
+  filter: brightness(1.08);
+}
+/* Deshabilitado mientras no se haya elegido un activo */
+.asignar-activo .btn-guardar:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  filter: none;
+}
+
+@media (max-width: 640px) {
+  .asignar-activo .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/components/Inventario/ModalAsignarActivo.tsx b/src/components/Inventario/ModalAsignarActivo.tsx
new file mode 100644
index 0000000..1df512d
--- /dev/null
+++ b/src/components/Inventario/ModalAsignarActivo.tsx
@@ -0,0 +1,501 @@
+import React from "react";
+import Select from "react-select";
+import "./ModalAsignarActivo.css";
+import { useRepositories } from "../../repositories/repositoriesContext";
+import { useAuth } from "../../auth/authContext";
+import { useActivoMovimientos } from "../../Funcionalidades/inventario/useActivoMovimientos";
+import { useWorkers } from "../../Funcionalidades/access/Workers";
+import { useFranquicias } from "../../Funcionalidades/access/Franquicias";
+import { useGraphServices } from "../../graph/GrapServicesContext";
+import { ESTADOS_ACTIVO } from "../../Models/ActivosTIMovimientos";
+import {
+  UBICACIONES_ACTIVO,
+  type ActivoTI,
+  type Ubicacion_Tipo,
+} from "../../Models/ActivoTI";
+import type { UserOption } from "../../Models/Commons";
+import type { UsuariosSP } from "../../Models/Usuarios";
+
+import type { EstadoActivo } from "../../Models/ActivosTIMovimientos";
+import { BuscadorActivo } from "./BuscadorActivo";
+import { usePrestamos } from "../../Funcionalidades/loans/prestamos";
+import { useActivoPrestamo } from "../../Funcionalidades/inventario/useActivoPrestamo";
+
+type TipoMovimiento = "asignacion" | "prestamo";
+
+interface ModalAsignarActivoProps {
+  activo?: ActivoTI;
+  onSaved?: () => void;
+  onClose?: () => void;
+}
+
+interface AsignarActivoFormProps extends Omit<
+  ModalAsignarActivoProps,
+  "activo"
+> {
+  activo: ActivoTI | null;
+  // Solo cuando se entra sin activo (desde el menú): permite buscarlo aquí mismo
+  onCambiarActivo?: (activo: ActivoTI | null) => void;
+}
+
+export const ModalAsignarActivo: React.FC<ModalAsignarActivoProps> = ({
+  activo,
+  onSaved,
+  onClose,
+}) => {
+  const [elegido, setElegido] = React.useState<ActivoTI | null>(null);
+  const actual = activo ?? elegido;
+
+  // El key reinicia el formulario cada vez que cambia el activo elegido
+  return (
+    <AsignarActivoForm
+      key={actual?.id ?? "sin-activo"}
+      activo={actual}
+      onCambiarActivo={activo ? undefined : setElegido}
+      onSaved={onSaved}
+      onClose={activo ? onClose : () => setElegido(null)}
+    />
+  );
+};
+
+const AsignarActivoForm: React.FC<AsignarActivoFormProps> = ({
+  activo,
+  onCambiarActivo,
+  onSaved,
+  onClose,
+}) => {
+  const { movimientosTI, activosTI, usuarios } = useRepositories();
+  const [errorActivo, setErrorActivo] = React.useState<string | null>(null);
+  const { account } = useAuth();
+  const { Franquicias: FranquiciasSvc } = useGraphServices();
+
+  const { form, formErrors, error, setField, saveMovimiento } =
+    useActivoMovimientos({
+      MovimientosSvc: movimientosTI!,
+      activoId: activo?.id,
+    });
+
+  const {
+    workersOptions,
+    loadingWorkers,
+    error: usersError,
+  } = useWorkers({ onlyEnabled: true });
+  const {
+    franqOptions,
+    loading: loadingFranq,
+    error: franqError,
+  } = useFranquicias(FranquiciasSvc!);
+  const [responsable, setResponsable] = React.useState<UsuariosSP | null>(null);
+  const [usuarioDestino, setUsuarioDestino] = React.useState<UserOption | null>(
+    null,
+  );
+
+  const listaUsuariosDestino: UserOption[] = React.useMemo(() => {
+    const map = new Map<string, UserOption>();
+    for (const o of [...workersOptions, ...franqOptions]) {
+      const key = (o.value || "").toLowerCase();
+      if (!map.has(key)) map.set(key, o);
+    }
+    return Array.from(map.values()).sort((a, b) =>
+      a.label.localeCompare(b.label),
+    );
+  }, [workersOptions, franqOptions]);
+
+  // Préstamo: reutiliza el mismo flujo de la página de Préstamos
+  // (ticket + registro en la lista de préstamos + correo)
+  const {
+    handleSubmit: crearPrestamo,
+    setField: setPrestamoField,
+    notify: notificarPrestamo,
+  } = usePrestamos();
+  const { iniciarPrestamoActivo } = useActivoPrestamo();
+  const [tipoMovimiento, setTipoMovimiento] =
+    React.useState<TipoMovimiento>("asignacion");
+  const [guardando, setGuardando] = React.useState(false);
+
+  const esPrestamo = tipoMovimiento === "prestamo";
+  const esReasignacion = activo?.estado === "Asignado";
+  const enPrestamo = activo?.estado === "en_prestamo";
+
+  React.useEffect(() => {
+    if (!activo) return;
+    setField("ubicacion_origen", activo.ubicacion_tipo);
+    setField("ubicacion_destino", activo.ubicacion_tipo);
+    setField("estado_anterior", activo.estado);
+    setField("usuario_origen_nombre", activo.nombre_usuario || "");
+    setField("usuario_origen_correo", activo.correo_usuario || "");
+    setPrestamoField("Id_dispositivo", activo.id);
+  }, [activo]);
+
+  React.useEffect(() => {
+    if (!account?.username) return;
+    setField("responsable_correo", account.username);
+    setField("responsable_nombre", account.name ?? account.username);
+    if (!usuarios) return;
+    usuarios.getByEmail(account.username).then((result) => {
+      if (result.status && result.data) {
+        setResponsable(result.data);
+        if (result.data.Title)
+          setField("responsable_nombre", result.data.Title);
+      }
+    });
+  }, [account?.username, account?.name, usuarios]);
+
+  const registrarPrestamo = async (activo: ActivoTI) => {
+    if (!usuarioDestino) {
+      setErrorActivo("Selecciona el usuario que recibe el préstamo");
+      return;
+    }
+    setGuardando(true);
+    try {
+      const res = await crearPrestamo();
+      if (!res.continue || !res.created) {
+        setErrorActivo("No se pudo crear el préstamo");
+        return;
+      }
+
+      const ok = await iniciarPrestamoActivo(res.created, form.comentario);
+      if (!ok) {
+        setErrorActivo(
+          `Se creó el ticket #${res.created.IdTicket}, pero no se pudo actualizar el activo`,
+        );
+        return;
+      }
+
+      notificarPrestamo(res.created, [
+        {
+          Id: activo.id,
+          Title: [activo.tipo, activo.marca, activo.modelo]
+            .filter(Boolean)
+            .join(" "),
+          Referencia: activo.codigo_inventario,
+          Serial: activo.numero_serie,
+          Estado: "en_prestamo",
+        },
+      ]).catch((err) => console.error("Error notificando el préstamo:", err));
+
+      onSaved?.();
+      onClose?.();
+    } finally {
+      setGuardando(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!activo) return;
+    setErrorActivo(null);
+
+    if (enPrestamo) {
+      setErrorActivo(
+        "El activo está en préstamo. Finaliza el préstamo desde Préstamos antes de moverlo.",
+      );
+      return;
+    }
+    if (esPrestamo) {
+      await registrarPrestamo(activo);
+      return;
+    }
+
+    const estadoNuevo = form.estado_nuevo as EstadoActivo | undefined;
+    const destinoNombre = form.usuario_destino_nombre?.trim() ?? "";
+    const destinoCorreo = form.usuario_destino_correo?.trim() ?? "";
+
+    const tieneDestino = Boolean(destinoNombre && destinoCorreo);
+    const cambiaEstado = Boolean(estadoNuevo && estadoNuevo !== activo.estado);
+    const quedaDisponible = estadoNuevo === "Disponible";
+    const ubicacionNueva = form.ubicacion_destino as Ubicacion_Tipo | undefined;
+    const cambiaUbicacion = Boolean(
+      ubicacionNueva && ubicacionNueva !== activo.ubicacion_tipo,
+    );
+
+    const ok = await saveMovimiento();
+    if (!ok) return;
+
+    if (tieneDestino || cambiaEstado || cambiaUbicacion) {
+      const result = await activosTI!.updateActivo(activo.id, {
+        ...(cambiaEstado ? { estado: estadoNuevo } : {}),
+        ...(cambiaUbicacion ? { ubicacion_tipo: ubicacionNueva } : {}),
+        ...(tieneDestino
+          ? { nombre_usuario: destinoNombre, correo_usuario: destinoCorreo }
+          : {}),
+        ...(quedaDisponible
+          ? { nombre_usuario: "", correo_usuario: "" }
+          : tieneDestino
+            ? { nombre_usuario: destinoNombre, correo_usuario: destinoCorreo }
+            : {}),
+      });
+      if (!result.status) {
+        setErrorActivo(result.message ?? "Error actualizando el activo");
+        return;
+      }
+    }
+
+    onSaved?.();
+    onClose?.();
+  };
+
+  return (
+    <div className="activo-form-page asignar-activo">
+      <div className="activo-form-header">
+        <h2>{esReasignacion ? "Reasignar activo" : "Asignar activo"}</h2>
+        <p>Registra el nuevo responsable del activo en la bitácora</p>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <div className="activo-form-container">
+          <div className="form-section">
+            <div className="section-title">
+              <h3>Activo</h3>
+              <span>
+                {onCambiarActivo
+                  ? "Busca el activo que vas a asignar o reasignar"
+                  : "Información actual del equipo"}
+              </span>
+            </div>
+
+            {onCambiarActivo && (
+              <div
+                className="form-group"
+                style={{ marginBottom: activo ? 18 : 0 }}
+              >
+                <label htmlFor="buscar_activo_id">Buscar activo</label>
+                <BuscadorActivo
+                  inputId="buscar_activo_id"
+                  value={activo}
+                  onChange={onCambiarActivo}
+                />
+              </div>
+            )}
+
+            {activo && (
+              <div className="form-grid">
+                <div className="form-group">
+                  <label>Código de inventario</label>
+                  <input
+                    type="text"
+                    value={activo.codigo_inventario}
+                    disabled
+                  />
+                </div>
+                <div className="form-group">
+                  <label>Tipo</label>
+                  <input type="text" value={activo.tipo} disabled />
+                </div>
+                <div className="form-group">
+                  <label>Usuario actual</label>
+                  <input
+                    type="text"
+                    value={activo.nombre_usuario || "Sin asignar"}
+                    disabled
+                  />
+                </div>
+                <div className="form-group">
+                  <label>Responsable del movimiento</label>
+                  <input
+                    type="text"
+                    value={responsable?.Title ?? account?.name ?? ""}
+                    disabled
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {!activo ? (
+            <div className="form-section">
+              <div className="section-title">
+                <h3>Nuevo responsable</h3>
+                <span>Primero busca y selecciona un activo</span>
+              </div>
+            </div>
+          ) : (
+            <div className="form-section">
+              <div className="section-title">
+                <h3>Nuevo responsable</h3>
+                <span>Selecciona el usuario que recibirá el activo</span>
+              </div>
+
+              <div className="form-grid">
+                <div className="form-group">
+                  <label htmlFor="usuario_destino_id">Usuario destino</label>
+                  <Select<UserOption, false>
+                    inputId="usuario_destino_id"
+                    options={listaUsuariosDestino}
+                    value={usuarioDestino}
+                    onChange={(opt) => {
+                      setUsuarioDestino(opt ?? null);
+                      setPrestamoField("Title", opt?.email || opt?.value || "");
+                      setPrestamoField("nombreSolicitante", opt?.label ?? "");
+                      setField("usuario_destino_nombre", opt?.label ?? "");
+                      setField(
+                        "usuario_destino_correo",
+                        opt?.email || opt?.value || "",
+                      );
+
+                      if (opt && !form.estado_nuevo) {
+                        setField("estado_nuevo", "Asignado");
+                        setField(
+                          "ubicacion_destino",
+                          opt ? "usuario" : "bodega_central",
+                        );
+                      } else if (!opt && form.estado_nuevo === "Asignado") {
+                        setField("estado_nuevo", undefined);
+                      }
+                    }}
+                    placeholder={
+                      loadingWorkers || loadingFranq
+                        ? "Cargando opciones…"
+                        : "Buscar usuario destino…"
+                    }
+                    isLoading={loadingWorkers || loadingFranq}
+                    isDisabled={loadingWorkers || loadingFranq}
+                    isClearable
+                    classNamePrefix="rs"
+                    formatOptionLabel={(opt) => {
+                      const correo = opt.email || opt.value;
+                      return correo ? `${opt.label} (${correo})` : opt.label;
+                    }}
+                    noOptionsMessage={() =>
+                      usersError || franqError
+                        ? "Error cargando opciones"
+                        : "Sin coincidencias"
+                    }
+                  />
+                </div>
+              </div>
+
+              <div className="form-group" style={{ marginTop: 18 }}>
+                <label>Tipo de movimiento</label>
+                <div className="tipo-movimiento" role="radiogroup">
+                  {(["asignacion", "prestamo"] as const).map((tipo) => (
+                    <button
+                      key={tipo}
+                      type="button"
+                      role="radio"
+                      aria-checked={tipoMovimiento === tipo}
+                      className={
+                        "tipo-movimiento__opcion" +
+                        (tipoMovimiento === tipo ? " is-activo" : "")
+                      }
+                      onClick={() => setTipoMovimiento(tipo)}
+                    >
+                      {tipo === "asignacion" ? "Asignación" : "Préstamo"}
+                    </button>
+                  ))}
+                </div>
+                <small className="tipo-movimiento__ayuda">
+                  {esPrestamo
+                    ? "Préstamo temporal: se crea un ticket, el activo pasa a «En préstamo» y debe devolverse según lo acordado."
+                    : "El usuario destino queda como responsable del activo."}
+                </small>
+              </div>
+
+              {!esPrestamo && (
+                <div className="form-grid" style={{ marginTop: 18 }}>
+                  <div className="form-group">
+                    <label htmlFor="ubicacion_destino">Ubicación destino</label>
+                    <select
+                      id="ubicacion_destino"
+                      value={form.ubicacion_destino ?? ""}
+                      onChange={(e) =>
+                        setField(
+                          "ubicacion_destino",
+                          e.target.value as Ubicacion_Tipo,
+                        )
+                      }
+                    >
+                      <option value="">Selecciona...</option>
+                      {Object.entries(UBICACIONES_ACTIVO).map(
+                        ([value, label]) => (
+                          <option key={value} value={value}>
+                            {label}
+                          </option>
+                        ),
+                      )}
+                    </select>
+                  </div>
+
+                  <div className="form-group">
+                    <label htmlFor="nuevo_estado">Nuevo Estado </label>
+                    <select
+                      id="estado_nuevo"
+                      value={form.estado_nuevo ?? ""}
+                      onChange={(e) => {
+                        const estado = e.target.value as EstadoActivo;
+                        setField("estado_nuevo", estado);
+                        if (estado === "Disponible")
+                          setField("ubicacion_destino", "bodega_central");
+                      }}
+                    >
+                      <option value="">Selecciona...</option>
+                      {/* "En préstamo" solo se pone con el tipo Préstamo */}
+                      {Object.entries(ESTADOS_ACTIVO)
+                        .filter(([value]) => value !== "en_prestamo")
+                        .map(([value, label]) => (
+                          <option key={value} value={value}>
+                            {label}
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+                </div>
+              )}
+
+              <div className="form-group" style={{ marginTop: 18 }}>
+                <label htmlFor="comentario">Comentario (opcional)</label>
+                <textarea
+                  id="comentario"
+                  rows={3}
+                  placeholder={
+                    esPrestamo
+                      ? "Motivo, condiciones del préstamo, fecha de devolución estimada…"
+                      : ""
+                  }
+                  value={form.comentario ?? ""}
+                  onChange={(e) => setField("comentario", e.target.value)}
+                />
+              </div>
+
+              {!esPrestamo &&
+                Object.values(formErrors)
+                  .filter(Boolean)
+                  .map((msg, i) => (
+                    <small
+                      key={i}
+                      style={{ display: "block", color: "#dc2626" }}
+                    >
+                      {msg}
+                    </small>
+                  ))}
+              {(error || errorActivo) && (
+                <small style={{ display: "block", color: "#dc2626" }}>
+                  {error || errorActivo}
+                </small>
+              )}
+            </div>
+          )}
+
+          <div className="activo-form-footer">
+            <button
+              type="submit"
+              className="btn-guardar"
+              disabled={!activo || guardando}
+            >
+              {guardando
+                ? "Guardando..."
+                : esPrestamo
+                  ? "Confirmar préstamo"
+                  : esReasignacion
+                    ? "Reasignar"
+                    : "Asignar"}
+            </button>
+            <button type="button" onClick={onClose} className="btn-cancelar">
+              Cancelar
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/src/components/Loans/DeviceHistory.tsx b/src/components/Loans/DeviceHistory.tsx
index 70fa5b5..6051ebb 100644
--- a/src/components/Loans/DeviceHistory.tsx
+++ b/src/components/Loans/DeviceHistory.tsx
@@ -6,31 +6,62 @@ import { ReturnModal } from "./ReturnSection";
 
 export type DeviceHistoryProps = {
   open: boolean;
-  onClose: () => void
-  selectedDispositivo: dispositivos
+  onClose: () => void;
+  selectedDispositivo: dispositivos;
   rows: prestamos[];
-  devices: dispositivos[]
+  devices: dispositivos[];
 };
 
-
-export function DeviceHistoryModal({open, selectedDispositivo, onClose, rows, devices}: DeviceHistoryProps) {
-  const [selectedLoan, setSelectedLoan] = React.useState<prestamos | null>(null)
-  const [openPruebas, setOpenPruebas] = React.useState<boolean>(false)
+export function DeviceHistoryModal({
+  open,
+  selectedDispositivo,
+  onClose,
+  rows,
+  devices,
+}: DeviceHistoryProps) {
+  const [selectedLoan, setSelectedLoan] = React.useState<prestamos | null>(
+    null,
+  );
+  const [openPruebas, setOpenPruebas] = React.useState<boolean>(false);
   const overlayRef = React.useRef<HTMLDivElement | null>(null);
 
   if (!open) return null;
 
-  if (openPruebas) return (
-    <ReturnModal open={openPruebas} onClose={() => setOpenPruebas(false)} loan={selectedLoan!} dispositivos={devices} onFinalize={() => { return; } } mode={"view"} fase={"Ambas"} />
-  )
+  if (openPruebas)
+    return (
+      <ReturnModal
+        open={openPruebas}
+        onClose={() => setOpenPruebas(false)}
+        loan={selectedLoan!}
+        dispositivos={devices}
+        onFinalize={() => {
+          return;
+        }}
+        mode={"view"}
+        fase={"Ambas"}
+      />
+    );
 
   return (
-    <div ref={overlayRef} className="pl-modalOverlay" role="dialog" aria-modal="true" tabIndex={-1} onMouseDown={(e) => {
-      if (e.target === e.currentTarget) onClose();
-    }}>
+    <div
+      ref={overlayRef}
+      className="pl-modalOverlay"
+      role="dialog"
+      aria-modal="true"
+      tabIndex={-1}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
       <div className="pl-modal pl-modalWide">
         <div className="pl-modalHead">
-          <button className="pl-btn ghost" onClick={() => {onClose();}} aria-label="Cerrar">
+          <button
+            className="pl-btn ghost"
+            onClick={() => {
+              onClose();
+            }}
+            aria-label="Cerrar"
+          >
             ✕
           </button>
         </div>
@@ -39,13 +70,15 @@ export function DeviceHistoryModal({open, selectedDispositivo, onClose, rows, de
           <div className="pl-returnTop">
             <div className="pl-returnInfo">
               <div className="pl-returnLine">
-                <span className="pl-muted">Marca</span>
+                <span className="pl-muted">Equipo:</span>
                 <span className="pl-strong">{selectedDispositivo.Title}</span>
               </div>
 
               <div className="pl-returnLine">
-                <span className="pl-muted">Referencia:</span>
-                <span className="pl-strong">{selectedDispositivo.Referencia}</span>
+                <span className="pl-muted">Código:</span>
+                <span className="pl-strong">
+                  {selectedDispositivo.Referencia}
+                </span>
               </div>
 
               <div className="pl-returnLine">
@@ -57,39 +90,64 @@ export function DeviceHistoryModal({open, selectedDispositivo, onClose, rows, de
 
           <div className="pl-returnBottom">
             <div className="pl-returnTests">
-              <div className="pl-returnSectionTitle">Historial de prestamos</div>
-                <DataTable
-                  columns={["ID", "Solicitante", "Fecha de prestamo", "FechaDevolucion", "Estado"]}
-                  rows={
-                    <>
-                      {rows.map((l) => {
-                        const isClosed = l.Estado === "Cerrado" || !!l.FechaDevolucion;
+              <div className="pl-returnSectionTitle">
+                Historial de prestamos
+              </div>
+              <DataTable
+                columns={[
+                  "ID",
+                  "Solicitante",
+                  "Fecha de prestamo",
+                  "FechaDevolucion",
+                  "Estado",
+                ]}
+                rows={
+                  <>
+                    {rows.map((l) => {
+                      const isClosed =
+                        l.Estado === "Cerrado" || !!l.FechaDevolucion;
 
-                        return (
-                          <tr key={l.Id} className={isClosed ? "pl-rowDisabled" : "pl-rowClickable"} 
-                            onClick={() => {
-                              setSelectedLoan(l);
-                              setOpenPruebas(true);
-                            }}
-                            title={isClosed ? "Este préstamo ya está cerrado" : "Este préstamo sigue activo"}
-                          >
-                            <td className="pl-mono">{l.Id}</td>
+                      return (
+                        <tr
+                          key={l.Id}
+                          className={
+                            isClosed ? "pl-rowDisabled" : "pl-rowClickable"
+                          }
+                          onClick={() => {
+                            setSelectedLoan(l);
+                            setOpenPruebas(true);
+                          }}
+                          title={
+                            isClosed
+                              ? "Este préstamo ya está cerrado"
+                              : "Este préstamo sigue activo"
+                          }
+                        >
+                          <td className="pl-mono">{l.Id}</td>
 
-                            <td>
-                              <div className="pl-cellMain">{l.nombreSolicitante}</div>
-                            </td>
+                          <td>
+                            <div className="pl-cellMain">
+                              {l.nombreSolicitante}
+                            </div>
+                          </td>
 
-                            <td className="pl-mono">{toISODateTimeFlex(l.FechaPrestamo)}</td>
+                          <td className="pl-mono">
+                            {toISODateTimeFlex(l.FechaPrestamo)}
+                          </td>
 
-                            <td className="pl-mono">{l.FechaDevolucion ? toISODateTimeFlex(l.FechaDevolucion) ?? "—" : "Pendiente"}</td>
+                          <td className="pl-mono">
+                            {l.FechaDevolucion
+                              ? (toISODateTimeFlex(l.FechaDevolucion) ?? "—")
+                              : "Pendiente"}
+                          </td>
 
-                            <td>{l.Estado}</td>
-                          </tr>
-                        );
-                      })}
-                    </>
-                  }
-                />
+                          <td>{l.Estado}</td>
+                        </tr>
+                      );
+                    })}
+                  </>
+                }
+              />
             </div>
           </div>
         </div>
diff --git a/src/components/Loans/InventorySection.tsx b/src/components/Loans/InventorySection.tsx
index 58b64c9..46d427d 100644
--- a/src/components/Loans/InventorySection.tsx
+++ b/src/components/Loans/InventorySection.tsx
@@ -1,5 +1,10 @@
 import React from "react";
-import type { dispositivos, prestamos, pruebasDefinidas, pruebasDispositos } from "../../Models/prestamos";
+import type {
+  dispositivos,
+  prestamos,
+  pruebasDefinidas,
+  pruebasDispositos,
+} from "../../Models/prestamos";
 import { Badge } from "./Badge";
 import { DataTable } from "./DateTable";
 import { deviceStatusTone } from "./PretamosPage";
@@ -18,56 +23,101 @@ export type InventorySectionProps = {
   load: () => void;
 
   //Historial de prestamos
-  selectedDevice: dispositivos | null
-  setSelectedDevice: (e: dispositivos) => void
-  rows: prestamos[]
+  selectedDevice: dispositivos | null;
+  setSelectedDevice: (e: dispositivos) => void;
+  rows: prestamos[];
 
   //Pruebas vinculadas al dispositivo
-  testCatalogo: pruebasDefinidas[]
-  loadAssignedByDevice: (deviceId: string) => void; 
-  assigned: pruebasDispositos[]
-  loading: boolean; 
-  onAssign: (deviceId: string, testId: string) => Promise<void>; 
+  testCatalogo: pruebasDefinidas[];
+  loadAssignedByDevice: (deviceId: string) => void;
+  assigned: pruebasDispositos[];
+  loading: boolean;
+  onAssign: (deviceId: string, testId: string) => Promise<void>;
   onUnassign: (bridgeId: string, selectedDevice: dispositivos) => Promise<void>;
 };
 
-export function InventorySection({onAssign, onUnassign, loading, assigned, loadAssignedByDevice, testCatalogo, rows, inventory, inventoryQuery, onInventoryQueryChange, state, setFieldState, onAddSubmit, setState, setSelectedDevice, selectedDevice}: InventorySectionProps) {
+export function InventorySection({
+  onAssign,
+  onUnassign,
+  loading,
+  assigned,
+  loadAssignedByDevice,
+  testCatalogo,
+  rows,
+  inventory,
+  inventoryQuery,
+  onInventoryQueryChange,
+  state,
+  setFieldState,
+  onAddSubmit,
+  setState,
+  setSelectedDevice,
+  selectedDevice,
+}: InventorySectionProps) {
   const [mode, setMode] = React.useState<"new" | "edit">("new");
-  const [history, setHistory] = React.useState<boolean>(false)
-  const [testOpen, setTestOpen] = React.useState<boolean>(false)
+  const [history, setHistory] = React.useState<boolean>(false);
+  const [testOpen, setTestOpen] = React.useState<boolean>(false);
 
   React.useEffect(() => {
-    if(selectedDevice) loadAssignedByDevice(selectedDevice.Id ?? "")
+    if (selectedDevice) loadAssignedByDevice(selectedDevice.Id ?? "");
   }, [selectedDevice]);
 
   return (
     <div className="pl-invLayout">
       {/* LEFT: Form pequeño */}
       <section className="pl-invLeft">
-        <div className="pl-invTitle">{mode === "new" ? "Nuevo Dispositivo" : "Editar Dispositivo"}</div>
+        <div className="pl-invTitle">
+          {mode === "new" ? "Nuevo Dispositivo" : "Editar Dispositivo"}
+        </div>
 
         <div className="pl-invForm">
           <label className="pl-label">Marca</label>
-          <input className="pl-input" type="text" value={state.Title ?? ""} placeholder="Marca (Ej: Lenovo)" onChange={(e) => setFieldState("Title", e.target.value)}/>
+          <input
+            className="pl-input"
+            type="text"
+            value={state.Title ?? ""}
+            placeholder="Marca (Ej: Lenovo)"
+            onChange={(e) => setFieldState("Title", e.target.value)}
+          />
 
           <label className="pl-label">Referencia</label>
-          <input className="pl-input" type="text" value={state.Referencia ?? ""} placeholder="Referencia (Ej: T14 Gen 2)" onChange={(e) => setFieldState("Referencia", e.target.value)}/>
-          
+          <input
+            className="pl-input"
+            type="text"
+            value={state.Referencia ?? ""}
+            placeholder="Referencia (Ej: T14 Gen 2)"
+            onChange={(e) => setFieldState("Referencia", e.target.value)}
+          />
+
           <label className="pl-label">Serial</label>
-          <input className="pl-input" type="text" value={state.Serial ?? ""} placeholder="Serial (Ej: LNV-T14-XYZ)" onChange={(e) => setFieldState("Serial", e.target.value)}/>
-          
-          { mode === "edit" ? (
-          <>
-            <label className="pl-label">Estado</label>
-            <select className="pl-input" value={state.Estado ?? ""} onChange={(e) => setFieldState("Estado", e.target.value)}>
-              <option value="">Seleccionar estado</option>
-              <option value="Disponible">Disponible</option>
-              <option value="Prestado">Prestado</option>
-              <option value="Malo">Malo</option>
-            </select>
-          </>) : null }
+          <input
+            className="pl-input"
+            type="text"
+            value={state.Serial ?? ""}
+            placeholder="Serial (Ej: LNV-T14-XYZ)"
+            onChange={(e) => setFieldState("Serial", e.target.value)}
+          />
 
-          <button className="pl-btn primary pl-invAddBtn" onClick={() => onAddSubmit(mode)}>
+          {mode === "edit" ? (
+            <>
+              <label className="pl-label">Estado</label>
+              <select
+                className="pl-input"
+                value={state.Estado ?? ""}
+                onChange={(e) => setFieldState("Estado", e.target.value)}
+              >
+                <option value="">Seleccionar estado</option>
+                <option value="Disponible">Disponible</option>
+                <option value="Prestado">Prestado</option>
+                <option value="Malo">Malo</option>
+              </select>
+            </>
+          ) : null}
+
+          <button
+            className="pl-btn primary pl-invAddBtn"
+            onClick={() => onAddSubmit(mode)}
+          >
             {mode === "new" ? "Añadir" : "Guardar cambios"}
           </button>
         </div>
@@ -76,7 +126,13 @@ export function InventorySection({onAssign, onUnassign, loading, assigned, loadA
       {/* RIGHT: Tabla + buscador */}
       <section className="pl-invRight">
         <div className="pl-invTopbar">
-          <input className="pl-input pl-invSearch" type="text" value={inventoryQuery ?? ""} placeholder="Buscar…" onChange={(e) => onInventoryQueryChange(e.target.value)}/>
+          <input
+            className="pl-input pl-invSearch"
+            type="text"
+            value={inventoryQuery ?? ""}
+            placeholder="Buscar…"
+            onChange={(e) => onInventoryQueryChange(e.target.value)}
+          />
         </div>
 
         <div className="pl-invTable">
@@ -85,18 +141,41 @@ export function InventorySection({onAssign, onUnassign, loading, assigned, loadA
             rows={
               <>
                 {inventory.map((d) => (
-                  <tr key={d.Id} onClick={() => {setState(d); setMode("edit")}} className="pl-rowClickable">
+                  <tr
+                    key={d.Id}
+                    onClick={() => {
+                      setState(d);
+                      setMode("edit");
+                    }}
+                    className="pl-rowClickable"
+                  >
                     <td className="pl-cellMain">{d.Referencia}</td>
                     <td>{d.Title}</td>
                     <td className="pl-mono">{d.Serial}</td>
                     <td>
-                      <Badge tone={deviceStatusTone(d.Estado)}>{d.Estado}</Badge>
+                      <Badge tone={deviceStatusTone(d.Estado)}>
+                        {d.Estado}
+                      </Badge>
                     </td>
                     <td className="pl-actionsCell">
-                      <button type="button" className="pl-btn" onClick={() => {setSelectedDevice(d); setHistory(true)}}>
+                      <button
+                        type="button"
+                        className="pl-btn"
+                        onClick={() => {
+                          setSelectedDevice(d);
+                          setHistory(true);
+                        }}
+                      >
                         Ver Historial
                       </button>
-                      <button type="button" className="pl-btn" onClick={() => {setSelectedDevice(d); setTestOpen(true);}}>
+                      <button
+                        type="button"
+                        className="pl-btn"
+                        onClick={() => {
+                          setSelectedDevice(d);
+                          setTestOpen(true);
+                        }}
+                      >
                         Pruebas
                       </button>
                     </td>
@@ -107,8 +186,14 @@ export function InventorySection({onAssign, onUnassign, loading, assigned, loadA
           />
         </div>
       </section>
-      
-      <DeviceHistoryModal open={history} onClose={() => setHistory(false)} selectedDispositivo={selectedDevice!} rows={rows} devices={inventory}></DeviceHistoryModal>
+
+      <DeviceHistoryModal
+        open={history}
+        onClose={() => setHistory(false)}
+        selectedDispositivo={selectedDevice!}
+        rows={rows}
+        devices={inventory}
+      ></DeviceHistoryModal>
       <DeviceTestsModal
         open={testOpen}
         onClose={() => setTestOpen(false)}
@@ -119,7 +204,6 @@ export function InventorySection({onAssign, onUnassign, loading, assigned, loadA
         onAssign={onAssign}
         onUnassign={onUnassign}
       />
-
     </div>
   );
 }
diff --git a/src/components/Loans/PretamosPage.tsx b/src/components/Loans/PretamosPage.tsx
index debdb89..5623015 100644
--- a/src/components/Loans/PretamosPage.tsx
+++ b/src/components/Loans/PretamosPage.tsx
@@ -1,13 +1,21 @@
 import React from "react";
 import "./prestamos.css";
-import { useDispositivos, usePrestamos, usePruebas, usePruebasDispositivos } from "../../Funcionalidades/loans/prestamos";
+import {
+  usePrestamos,
+  usePruebas,
+  usePruebasDispositivos,
+} from "../../Funcionalidades/loans/prestamos";
 import { Tabs } from "./Tabs";
 import { LoanHistorySection } from "./Secciones";
-import { InventorySection } from "./InventorySection";
+
 import type { dispositivos, prestamos } from "../../Models/prestamos";
 import { PruebasSection } from "./Pruebas";
+import { useActivoPrestamo } from "../../Funcionalidades/inventario/useActivoPrestamo";
+import { useRepositories } from "../../repositories/repositoriesContext";
+import type { ActivoTI } from "../../Models/ActivoTI";
+
 export type Tone = "ok" | "warn" | "bad" | "neutral";
-export type PrestamosTabKey = "historial" | "inventario" | "pruebas";
+export type PrestamosTabKey = "historial" | "pruebas";
 
 export function loanStatusTone(s: string): Tone {
   if (s === "Cerrado") return "ok";
@@ -22,132 +30,146 @@ export function deviceStatusTone(s: string): Tone {
 }
 
 export function PrestamosPage() {
-  const [activeTab, setActiveTab] = React.useState<PrestamosTabKey>("historial");
-  const [selected, setSelected] = React.useState<dispositivos | null>(null)
-  const [deviceLoans, setDeviceLoans] = React.useState<prestamos[]>([])
-  const {loadDeviceLoans, notify, visibleRows, estado, setEstado, search, setSearch, handleSubmit, state, setField, load: loadPrestamos, finalizeLoan: Terminar, notifyEstado } = usePrestamos()
-  const {setState, deviceReturn, borrowDevice, load, setField: setFieldDispositivos, handleSubmit: crearDispositivo, rows: dispositivosRows, search: dispositivosSearch, setSearch: setDispositivosSearch, state: dispositivosState, editDevice } = useDispositivos()
-  const {handleSubmit: createTest, editTest, createAllPruebas, loadAllPruebas, pruebasRows, state: pruebasState, setField: setFieldPruebas, setState: setPruebasState,} = usePruebas()
-  const {assignTest, unassignTest, loadDeviceTests, testsAssigned, testsLoading} = usePruebasDispositivos()
+  const [activeTab, setActiveTab] =
+    React.useState<PrestamosTabKey>("historial");
+  const {
+    notify,
+    visibleRows,
+    estado,
+    setEstado,
+    search,
+    setSearch,
+    handleSubmit,
+    state,
+    setField,
+    load: loadPrestamos,
+    finalizeLoan: Terminar,
+    notifyEstado,
+  } = usePrestamos();
+
+  const {
+    handleSubmit: createTest,
+    editTest,
+    createAllPruebas,
+    loadAllPruebas,
+    pruebasRows,
+    state: pruebasState,
+    setField: setFieldPruebas,
+    setState: setPruebasState,
+  } = usePruebas();
+  const {
+    assignTest,
+    unassignTest,
+    loadDeviceTests,
+    testsAssigned,
+    testsLoading,
+  } = usePruebasDispositivos();
+  const { iniciarPrestamoActivo, finalizarPrestamoActivo } =
+    useActivoPrestamo();
+  const { activosTI } = useRepositories();
+  const [activos, setActivos] = React.useState<ActivoTI[]>([]);
+
+  const cargarActivos = React.useCallback(async () => {
+    const res = await activosTI?.loadActivos(); // sin paginar: trae todos
+    if (res?.status) setActivos(res.data);
+  }, [activosTI]);
 
   React.useEffect(() => {
-    load();
-    loadPrestamos()
-    loadAllPruebas()
-  }, [dispositivosSearch, estado, search,]);
-
+    cargarActivos();
+  }, [cargarActivos]);
+
+  const equipos: dispositivos[] = React.useMemo(
+    () =>
+      activos.map((a) => ({
+        Id: a.id,
+        Title: [a.tipo, a.marca, a.modelo].filter(Boolean).join(" "),
+        Referencia: a.codigo_inventario,
+        Serial: a.numero_serie,
+        Estado: a.estado,
+      })),
+    [activos],
+  );
   React.useEffect(() => {
-    if (!selected?.Id) return;
-
-    let cancelled = false;
-
-    (async () => {
-      try {
-        const deviceLoans = await loadDeviceLoans(selected.Id ?? "");
-        if (!cancelled) setDeviceLoans(deviceLoans);
-      } catch (err) {
-        if (!cancelled) {
-          // opcional: setError(err)
-          console.error(err);
-        }
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [selected?.Id]);
+    loadPrestamos();
+    loadAllPruebas();
+  }, [estado, search]);
 
   const createLoan = async (deviceId: string): Promise<prestamos | null> => {
     const result = await handleSubmit();
+
     if (result && result.continue) {
-      await createAllPruebas(result.created?.Id!, deviceId)
-      await borrowDevice(deviceId);
-      notify(result.created!, dispositivosRows)
-      load()
-      return result.created
+      await createAllPruebas(result.created?.Id!, deviceId);
+      await iniciarPrestamoActivo(result.created!);
+
+      notify(result.created!, equipos);
+      cargarActivos();
+      return result.created;
     }
-    return null
+    return null;
   };
 
   const finalizeLoan = async (loan: prestamos, continuar: boolean) => {
     await Terminar(loan, continuar); //Marcar prestamo cerrado
-    await notifyEstado(loan, dispositivosRows, continuar ? "Buen estado" : "Mal estado"); //Enviar notificacion de alerta
-    alert("Se ha finalizado el prestamo. Se actualizará el estado del dispositivo.");
-    await deviceReturn(loan.Id_dispositivo, continuar); //Organizar devolución del dispositivo
-    load()
-    loadPrestamos()
+    await notifyEstado(loan, equipos, continuar ? "Buen estado" : "Mal estado"); //Enviar notificacion de alerta
+    alert(
+      "Se ha finalizado el préstamo. El activo vuelve a su estado anterior.",
+    );
+    await finalizarPrestamoActivo(loan);
+    cargarActivos();
+    loadPrestamos();
   };
 
-  const onCreateDevice = async (mode: string) => {
-    if(mode === "new"){
-      await crearDispositivo();
-    } else {
-      await editDevice();
-    }
-  }
-
   const onCreateTest = async (mode: string) => {
-    if(mode === "new"){
+    if (mode === "new") {
       await createTest();
     } else {
       await editTest();
     }
-  }
-  
+  };
+
   return (
     <div className="pl-page">
-      <Tabs 
-        value={activeTab} 
-        onChange={setActiveTab} 
-        items={[{ key: "historial", label: "Historial" }, { key: "inventario", label: "Inventario" }, { key: "pruebas", label: "Pruebas" }]}
+      <Tabs
+        value={activeTab}
+        onChange={setActiveTab}
+        items={[
+          { key: "historial", label: "Historial" },
+
+          { key: "pruebas", label: "Pruebas" },
+        ]}
       />
 
       {activeTab === "historial" && (
-        <LoanHistorySection 
-          rows={visibleRows} 
-          query={search} 
-          statusFilter={estado} 
-          onQueryChange={setSearch} 
-          onStatusFilterChange={setEstado} 
-          dispositivos={dispositivosRows} 
-          onCreateLoan={createLoan} 
-          state={state} 
-          setField={setField} 
-          onFinalizeLoan={finalizeLoan}/>
-      )}
-
-      {activeTab === "inventario" && (
-        <InventorySection 
-          inventory={dispositivosRows}
-          inventoryQuery={dispositivosSearch}
-          onInventoryQueryChange={setDispositivosSearch}
-          state={dispositivosState} setFieldState={setFieldDispositivos}
-          onAddSubmit={onCreateDevice}
-          load={load}
-          setState={setState}
-          selectedDevice={selected}
-          setSelectedDevice={setSelected}
-          rows={deviceLoans}
-          testCatalogo={pruebasRows} 
-          assigned={testsAssigned} 
-          loading={testsLoading} 
-          loadAssignedByDevice={loadDeviceTests}        
-          onAssign={assignTest}
-          onUnassign={unassignTest} />
+        <LoanHistorySection
+          rows={visibleRows}
+          query={search}
+          statusFilter={estado}
+          onQueryChange={setSearch}
+          onStatusFilterChange={setEstado}
+          dispositivos={equipos}
+          onCreateLoan={createLoan}
+          state={state}
+          setField={setField}
+          onFinalizeLoan={finalizeLoan}
+        />
       )}
 
       {activeTab === "pruebas" && (
-        <PruebasSection 
-          test={pruebasRows} 
-          state={pruebasState} 
-          setFieldState={setFieldPruebas} 
-          onAddSubmit={onCreateTest} 
-          load={loadAllPruebas} 
+        <PruebasSection
+          test={pruebasRows}
+          state={pruebasState}
+          setFieldState={setFieldPruebas}
+          onAddSubmit={onCreateTest}
+          load={loadAllPruebas}
           setState={setPruebasState}
+          equipos={equipos}
+          assigned={testsAssigned}
+          loadingAssigned={testsLoading}
+          loadAssignedByDevice={loadDeviceTests}
+          onAssign={assignTest}
+          onUnassign={unassignTest}
         />
       )}
     </div>
   );
 }
-
diff --git a/src/components/Loans/Pruebas.tsx b/src/components/Loans/Pruebas.tsx
index b348017..41ae1fd 100644
--- a/src/components/Loans/Pruebas.tsx
+++ b/src/components/Loans/Pruebas.tsx
@@ -1,6 +1,12 @@
 import React from "react";
-import type { pruebasDefinidas } from "../../Models/prestamos";
+import Select from "react-select";
+import type {
+  dispositivos,
+  pruebasDefinidas,
+  pruebasDispositos,
+} from "../../Models/prestamos";
 import { DataTable } from "./DateTable";
+import { DeviceTestsModal } from "./DeviceTestModal";
 
 export type PruebasSectionProps = {
   test: pruebasDefinidas[];
@@ -9,47 +15,131 @@ export type PruebasSectionProps = {
   setFieldState: (field: keyof pruebasDefinidas, value: string) => void;
   onAddSubmit: (mode: string) => void;
   setState: (state: pruebasDefinidas) => void;
+
   load: () => void;
+  equipos: dispositivos[];
+  assigned: pruebasDispositos[];
+  loadingAssigned: boolean;
+  loadAssignedByDevice: (deviceId: string) => void;
+  onAssign: (deviceId: string, testId: string) => Promise<void>;
+  onUnassign: (bridgeId: string, selectedDevice: dispositivos) => Promise<void>;
 };
-
-export function PruebasSection({test, state, setFieldState, onAddSubmit, setState}: PruebasSectionProps) {
+export function PruebasSection({
+  test,
+  state,
+  setFieldState,
+  onAddSubmit,
+  setState,
+  equipos,
+  assigned,
+  loadingAssigned,
+  loadAssignedByDevice,
+  onAssign,
+  onUnassign,
+}: PruebasSectionProps) {
   const [mode, setMode] = React.useState<"new" | "edit">("new");
+  const [equipo, setEquipo] = React.useState<dispositivos | null>(null);
+  const [openTests, setOpenTests] = React.useState(false);
+
+  const equipoOptions = React.useMemo(
+    () =>
+      equipos.map((e) => ({
+        value: String(e.Id),
+        label: `${e.Referencia} - ${e.Title}`,
+      })),
+    [equipos],
+  );
+
+  const abrirPruebas = () => {
+    if (!equipo?.Id) return;
+    loadAssignedByDevice(equipo.Id);
+    setOpenTests(true);
+  };
   return (
     <div className="pl-invLayout">
       {/* LEFT: Form pequeño */}
       <section className="pl-invLeft">
-        <div className="pl-invTitle">{mode === "new" ? "Nueva prueba" : "Editar prueba"}</div>
+        <div className="pl-invTitle">
+          {mode === "new" ? "Nueva prueba" : "Editar prueba"}
+        </div>
 
         <div className="pl-invForm">
           <label className="pl-label">Prueba</label>
-          <input className="pl-input" type="text" value={state.Title ?? ""} placeholder="Prueba (Ej: el dispositivo...)" onChange={(e) => setFieldState("Title", e.target.value)}/>
-          
-          { mode === "edit" ? (
-          <>
-            <label className="pl-label">Estado</label>
-            <select className="pl-input" value={state.Estado ?? ""} onChange={(e) => setFieldState("Estado", e.target.value)}>
-              <option value="">Seleccionar estado</option>
-              <option value="Activo">Activa</option>
-              <option value="Inactiva">Inactiva</option>
-            </select>
-          </>) : null }
+          <input
+            className="pl-input"
+            type="text"
+            value={state.Title ?? ""}
+            placeholder="Prueba (Ej: el dispositivo...)"
+            onChange={(e) => setFieldState("Title", e.target.value)}
+          />
 
-          <button className="pl-btn primary pl-invAddBtn" onClick={() => onAddSubmit(mode)}>
+          {mode === "edit" ? (
+            <>
+              <label className="pl-label">Estado</label>
+              <select
+                className="pl-input"
+                value={state.Estado ?? ""}
+                onChange={(e) => setFieldState("Estado", e.target.value)}
+              >
+                <option value="">Seleccionar estado</option>
+                <option value="Activo">Activa</option>
+                <option value="Inactiva">Inactiva</option>
+              </select>
+            </>
+          ) : null}
+
+          <button
+            className="pl-btn primary pl-invAddBtn"
+            onClick={() => onAddSubmit(mode)}
+          >
             {mode === "new" ? "Añadir" : "Guardar cambios"}
           </button>
         </div>
+
+        <div className="pl-invTitle" style={{ marginTop: 24 }}>
+          Pruebas por activo
+        </div>
+        <div className="pl-invForm">
+          <label className="pl-label">Activo</label>
+          <Select
+            options={equipoOptions}
+            value={equipoOptions.find((o) => o.value === equipo?.Id) ?? null}
+            onChange={(opt) =>
+              setEquipo(
+                equipos.find((e) => String(e.Id) === opt?.value) ?? null,
+              )
+            }
+            placeholder="Buscar por código o tipo..."
+            classNamePrefix="rs"
+            isClearable
+            noOptionsMessage={() => "Sin coincidencias"}
+          />
+          <button
+            className="pl-btn primary pl-invAddBtn"
+            disabled={!equipo}
+            onClick={abrirPruebas}
+          >
+            Configurar pruebas
+          </button>
+        </div>
       </section>
 
       {/* RIGHT: Tabla + buscador */}
       <section className="pl-invRight">
-
         <div className="pl-invTable">
           <DataTable
             columns={["Prueba", "Estado"]}
             rows={
               <>
                 {test.map((d) => (
-                  <tr key={d.Id} onClick={() => {setState(d); setMode("edit")}} className="pl-rowClickable">
+                  <tr
+                    key={d.Id}
+                    onClick={() => {
+                      setState(d);
+                      setMode("edit");
+                    }}
+                    className="pl-rowClickable"
+                  >
                     <td className="pl-cellMain">{d.Title}</td>
                     <td>{d.Estado}</td>
                   </tr>
@@ -57,6 +147,19 @@ export function PruebasSection({test, state, setFieldState, onAddSubmit, setStat
               </>
             }
           />
+
+          {equipo && (
+            <DeviceTestsModal
+              open={openTests}
+              onClose={() => setOpenTests(false)}
+              device={equipo}
+              catalog={test}
+              assigned={assigned}
+              loading={loadingAssigned}
+              onAssign={onAssign}
+              onUnassign={onUnassign}
+            />
+          )}
         </div>
       </section>
     </div>
diff --git a/src/components/Loans/ReturnSection.tsx b/src/components/Loans/ReturnSection.tsx
index 6c06254..1d00a3d 100644
--- a/src/components/Loans/ReturnSection.tsx
+++ b/src/components/Loans/ReturnSection.tsx
@@ -7,32 +7,51 @@ import { usePruebas } from "../../Funcionalidades/loans/prestamos";
 export type ReturnModalProps = {
   open: boolean;
   onClose: () => void;
-  loan: prestamos | null; 
+  loan: prestamos | null;
   dispositivos: dispositivos[];
   onFinalize: (continuar: boolean) => Promise<void> | void; // mejor tipado
   onChange?: (testId: string, next: string) => void;
-  mode: "edit" | "view"
-  fase: "Devolucion" | "Entrega" | "Ambas"
+  mode: "edit" | "view";
+  fase: "Devolucion" | "Entrega" | "Ambas";
 };
 
-export function ReturnModal({open, onClose, loan, dispositivos, onFinalize, mode, fase}: ReturnModalProps) {
+export function ReturnModal({
+  open,
+  onClose,
+  loan,
+  dispositivos,
+  onFinalize,
+  mode,
+  fase,
+}: ReturnModalProps) {
   const overlayRef = React.useRef<HTMLDivElement | null>(null);
-  const { loadPruebasPrestamo, pruebasPrestamoRows, draft, onDraftChange, handleFinalize, setDraft} = usePruebas();
+  const {
+    loadPruebasPrestamo,
+    pruebasPrestamoRows,
+    draft,
+    onDraftChange,
+    handleFinalize,
+    setDraft,
+  } = usePruebas();
 
   const mergedTestsDevolucion = React.useMemo(() => {
-    return pruebasPrestamoRows.filter(t => t.Fase === "Devolucion").map(t => {
-      const id = t.Id ?? "";
-      const next = id && draft[id] ? draft[id] : undefined;
-      return next ? { ...t, Aprobado: next } : t;
-    });
+    return pruebasPrestamoRows
+      .filter((t) => t.Fase === "Devolucion")
+      .map((t) => {
+        const id = t.Id ?? "";
+        const next = id && draft[id] ? draft[id] : undefined;
+        return next ? { ...t, Aprobado: next } : t;
+      });
   }, [pruebasPrestamoRows, draft]);
 
   const mergedTestEntrega = React.useMemo(() => {
-    return pruebasPrestamoRows.filter(t => t.Fase === "Entrega").map(t => {
-      const id = t.Id ?? "";
-      const next = id && draft[id] ? draft[id] : undefined;
-      return next ? { ...t, Aprobado: next } : t;
-    });
+    return pruebasPrestamoRows
+      .filter((t) => t.Fase === "Entrega")
+      .map((t) => {
+        const id = t.Id ?? "";
+        const next = id && draft[id] ? draft[id] : undefined;
+        return next ? { ...t, Aprobado: next } : t;
+      });
   }, [pruebasPrestamoRows, draft]);
 
   const VALID = new Set(["Aprobado", "N/A", "Rechazado"]);
@@ -44,10 +63,10 @@ export function ReturnModal({open, onClose, loan, dispositivos, onFinalize, mode
     if (loan.Estado === "Cerrado") return false;
 
     // deben existir pruebas
-    if (pruebasPrestamoRows.length === 0) return false;
+    if (pruebasPrestamoRows.length === 0) return true;
 
     // TODAS deben tener cambio nuevo (draft)
-    return pruebasPrestamoRows.every(t => {
+    return pruebasPrestamoRows.every((t) => {
       const id = (t.Id ?? "").trim();
       if (!id) return false;
 
@@ -56,7 +75,6 @@ export function ReturnModal({open, onClose, loan, dispositivos, onFinalize, mode
     });
   }, [loan, pruebasPrestamoRows, draft]);
 
-
   React.useEffect(() => {
     if (!open) return;
 
@@ -96,16 +114,30 @@ export function ReturnModal({open, onClose, loan, dispositivos, onFinalize, mode
   const device = dispositivos.find((d) => d.Id === loan.Id_dispositivo);
 
   const modal = (
-    <div ref={overlayRef} className="pl-modalOverlay" role="dialog" aria-modal="true" tabIndex={-1} onMouseDown={(e) => {
+    <div
+      ref={overlayRef}
+      className="pl-modalOverlay"
+      role="dialog"
+      aria-modal="true"
+      tabIndex={-1}
+      onMouseDown={(e) => {
         if (e.target === e.currentTarget) onClose();
-      }}>
+      }}
+    >
       <div className="pl-modal pl-modalWide">
         <div className="pl-modalHead">
           <div>
             <div className="pl-cardTitle">Inventariar devolución</div>
           </div>
 
-          <button className="pl-btn ghost" onClick={() => {onClose(); setDraft({})}} aria-label="Cerrar">
+          <button
+            className="pl-btn ghost"
+            onClick={() => {
+              onClose();
+              setDraft({});
+            }}
+            aria-label="Cerrar"
+          >
             ✕
           </button>
         </div>
@@ -121,43 +153,62 @@ export function ReturnModal({open, onClose, loan, dispositivos, onFinalize, mode
               <div className="pl-returnLine">
                 <span className="pl-muted">Equipo</span>
                 <span className="pl-strong">
-                  {device?.Title ?? "Equipo no encontrado"} {device?.Referencia ?? ""}{" "}
+                  {device?.Title ?? "Equipo no encontrado"}{" "}
+                  {device?.Referencia ?? ""}{" "}
                   {device?.Serial ? `- ${device.Serial}` : ""}
                 </span>
               </div>
             </div>
           </div>
 
-          <div className={`pl-returnBottom ${fase === "Ambas" ? "is-dual" : ""}`}>
-            
-            { (fase === "Entrega" || fase=== "Ambas") ?
+          <div
+            className={`pl-returnBottom ${fase === "Ambas" ? "is-dual" : ""}`}
+          >
+            {fase === "Entrega" || fase === "Ambas" ? (
               <div className="pl-returnTests">
                 <div className="pl-returnSectionTitle">Pruebas de entrega</div>
-                <ReturnTestsList tests={mergedTestEntrega} onChange={onDraftChange} mode={mode} />
-              </div> : null
-            }
+                <ReturnTestsList
+                  tests={mergedTestEntrega}
+                  onChange={onDraftChange}
+                  mode={mode}
+                />
+              </div>
+            ) : null}
 
-            { (fase === "Devolucion" || fase=== "Ambas") ?
+            {fase === "Devolucion" || fase === "Ambas" ? (
               <div className="pl-returnTests">
-                <div className="pl-returnSectionTitle">Pruebas de devolucion</div>
-                <ReturnTestsList tests={mergedTestsDevolucion} onChange={onDraftChange} mode={mode} />
-              </div> : null
-            }
+                <div className="pl-returnSectionTitle">
+                  Pruebas de devolucion
+                </div>
+                <ReturnTestsList
+                  tests={mergedTestsDevolucion}
+                  onChange={onDraftChange}
+                  mode={mode}
+                />
+              </div>
+            ) : null}
 
             <div className="pl-returnSide">
-              <button className="pl-btn primary pl-returnBtn" disabled={!canFinalize} onClick={() => {submitFinalize(); onClose()}}>
+              <button
+                className="pl-btn primary pl-returnBtn"
+                disabled={!canFinalize}
+                onClick={() => {
+                  submitFinalize();
+                  onClose();
+                }}
+              >
                 Devolver
               </button>
-              {!canFinalize && mode==="edit" && (
+              {!canFinalize && mode === "edit" && (
                 <div className="pl-note" style={{ marginTop: 10 }}>
                   Marca las pruebas antes de finalizar.
-                </div>)
-              }
-              {!canFinalize && mode==="view" && (
+                </div>
+              )}
+              {!canFinalize && mode === "view" && (
                 <div className="pl-note" style={{ marginTop: 10 }}>
                   Solo disponible para vista.
-                </div>)
-              }
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/src/components/Loans/Secciones.tsx b/src/components/Loans/Secciones.tsx
index a972204..5e6d0bf 100644
--- a/src/components/Loans/Secciones.tsx
+++ b/src/components/Loans/Secciones.tsx
@@ -4,12 +4,13 @@ import { Card } from "./Card";
 import { DataTable } from "./DateTable";
 import { Kpi } from "./Kpi";
 import { toISODateTimeFlex } from "../../utils/Date";
-import Select, { components, type OptionProps, } from "react-select";
+import Select, { components, type OptionProps } from "react-select";
 import type { UserOptionEx } from "../NuevoTicket/NuevoTicketForm";
 import { useWorkers } from "../../Funcionalidades/access/Workers";
 import type { desplegablesOptions } from "../../Models/Commons";
 import { ReturnModal } from "./ReturnSection";
-
+import AsyncSelect from "react-select/async";
+import { useRepositories } from "../../repositories/repositoriesContext";
 export type LoanHistorySectionProps = {
   rows: prestamos[];
   query: string;
@@ -18,9 +19,9 @@ export type LoanHistorySectionProps = {
   onStatusFilterChange: (value: string) => void;
   dispositivos: dispositivos[];
 
-  onCreateLoan: (dispositivoId: string) => Promise<prestamos | null>; 
+  onCreateLoan: (dispositivoId: string) => Promise<prestamos | null>;
   onFinalizeLoan: (loan: prestamos, continuar: boolean) => void;
-  state: prestamos
+  state: prestamos;
   creating?: boolean;
   createError?: string | null;
   setField: <K extends keyof prestamos>(k: K, v: prestamos[K]) => void;
@@ -42,21 +43,44 @@ const Option = (props: OptionProps<UserOptionEx, false>) => {
 
 export function countLoansByStatus(loans: prestamos[], status: string): number {
   return loans.reduce(
-    (count, loan) => (loan.Estado.toLocaleLowerCase() === status.toLocaleLowerCase() ? count + 1 : count),
-    0
+    (count, loan) =>
+      loan.Estado.toLocaleLowerCase() === status.toLocaleLowerCase()
+        ? count + 1
+        : count,
+    0,
   );
 }
 
-export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query, statusFilter = "Todos", onQueryChange, onStatusFilterChange, dispositivos, onCreateLoan, creating = false, createError = null,}: LoanHistorySectionProps) {
+export function LoanHistorySection({
+  onFinalizeLoan,
+  setField,
+  state,
+  rows,
+  query,
+  statusFilter = "Todos",
+  onQueryChange,
+  onStatusFilterChange,
+  dispositivos,
+  onCreateLoan,
+  creating = false,
+  createError = null,
+}: LoanHistorySectionProps) {
   const [openCreate, setOpenCreate] = React.useState(false);
   const [openDevolver, setOpenDevolver] = React.useState(false);
-  const [selectedLoan, setSelectedLoan] = React.useState<prestamos | null>(null);
+  const [selectedLoan, setSelectedLoan] = React.useState<prestamos | null>(
+    null,
+  );
   const [created, setCreated] = React.useState<prestamos | null>(null);
-  const [step, setStep] = React.useState<1 | 2>(1)
-  const { workersOptions, loadingWorkers, error: usersError } = useWorkers({onlyEnabled: true, });
+  const [step, setStep] = React.useState<1 | 2>(1);
+  const {
+    workersOptions,
+    loadingWorkers,
+    error: usersError,
+  } = useWorkers({ onlyEnabled: true });
 
   const closeCreate = () => {
     setOpenCreate(false);
+    setActivoSeleccionado(null);
   };
 
   const canSubmit = state.nombreSolicitante.trim().length > 0 && !creating;
@@ -64,8 +88,8 @@ export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query
   const submit = async () => {
     if (!canSubmit) return;
     const created = await onCreateLoan(state.Id_dispositivo);
-    setCreated(created)
-    setStep(2)
+    setCreated(created);
+    setStep(2);
   };
 
   const submitFinalize = (continuar: boolean) => {
@@ -81,18 +105,33 @@ export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query
     return () => window.removeEventListener("keydown", onKey);
   }, [openCreate]);
 
-  const availableDevices: dispositivos[] = React.useMemo(() => dispositivos.filter((d) => d.Estado === "Disponible"), [dispositivos]);
-
-  const deviceOptions: desplegablesOptions[] = React.useMemo(() =>
-    availableDevices.map((d) => ({
-      value: String(d.Id),
-      label: `${d.Referencia} ${d.Title} · ${d.Serial}`,
-    })),
-  [availableDevices]);
-
-  const selectedSolicitante = workersOptions.find((o) => o.label.toLocaleLowerCase() === state.nombreSolicitante.toLocaleLowerCase()) ?? null;
-  const selectedDevice = deviceOptions.find((o) => o.value === state.Id_dispositivo) ?? null;
-
+  const { activosTI } = useRepositories();
+  const [activoSeleccionado, setActivoSeleccionado] =
+    React.useState<desplegablesOptions | null>(null);
+
+  // Solo se prestan activos disponibles
+  const buscarActivos = React.useCallback(
+    async (texto: string): Promise<desplegablesOptions[]> => {
+      const res = await activosTI!.loadActivos({
+        search: texto,
+        estado: "Disponible",
+        paginated: true,
+        pageSize: 10,
+      });
+      if (!res.status) return [];
+      return res.data.map((a) => ({
+        value: a.id,
+        label: `${a.codigo_inventario} - ${a.tipo}${a.numero_serie ? `. ${a.numero_serie}` : ""}`,
+      }));
+    },
+    [activosTI],
+  );
+  const selectedSolicitante =
+    workersOptions.find(
+      (o) =>
+        o.label.toLocaleLowerCase() ===
+        state.nombreSolicitante.toLocaleLowerCase(),
+    ) ?? null;
   return (
     <>
       <div>
@@ -101,42 +140,76 @@ export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query
           <div className="pl-headTop">
             <div className="pl-kpisRow">
               <Kpi label="Activos" value={countLoansByStatus(rows, "Activo")} />
-              <Kpi label="Cerrados" value={countLoansByStatus(rows, "Cerrado")} />
+              <Kpi
+                label="Cerrados"
+                value={countLoansByStatus(rows, "Cerrado")}
+              />
             </div>
           </div>
 
           {/* 2) Filtros abajo (una sola fila y full width) */}
           <div className="pl-filtersBar">
-            <input className="pl-input pl-grow" type="text" value={query ?? ""} placeholder="Buscar persona" onChange={(e) => onQueryChange(e.target.value)}/>
-
-            <select className="pl-input pl-select" value={statusFilter} onChange={(e) => onStatusFilterChange(e.target.value)}>
+            <input
+              className="pl-input pl-grow"
+              type="text"
+              value={query ?? ""}
+              placeholder="Buscar persona"
+              onChange={(e) => onQueryChange(e.target.value)}
+            />
+
+            <select
+              className="pl-input pl-select"
+              value={statusFilter}
+              onChange={(e) => onStatusFilterChange(e.target.value)}
+            >
               <option value="all">Todos</option>
               <option value="Activo">Activo</option>
               <option value="Cerrado">Cerrado</option>
             </select>
 
-            <button className="pl-btn primary" onClick={() => setOpenCreate(true)}>
+            <button
+              className="pl-btn primary"
+              onClick={() => setOpenCreate(true)}
+            >
               Nuevo préstamo
             </button>
           </div>
 
           {/* 3) Tabla */}
           <DataTable
-            columns={["ID", "Solicitante", "Equipo", "Fecha de prestamo", "Estado", "Devuelto"]}
+            columns={[
+              "ID",
+              "Solicitante",
+              "Equipo",
+              "Fecha de prestamo",
+              "Estado",
+              "Devuelto",
+            ]}
             rows={
               <>
                 {rows.map((l) => {
-                  const device = dispositivos.find((d) => d.Id === l.Id_dispositivo);
-                  const isClosed = l.Estado === "Cerrado" || !!l.FechaDevolucion;
+                  const device = dispositivos.find(
+                    (d) => d.Id === l.Id_dispositivo,
+                  );
+                  const isClosed =
+                    l.Estado === "Cerrado" || !!l.FechaDevolucion;
 
                   return (
-                    <tr key={l.Id} className={isClosed ? "pl-rowDisabled" : "pl-rowClickable"} 
+                    <tr
+                      key={l.Id}
+                      className={
+                        isClosed ? "pl-rowDisabled" : "pl-rowClickable"
+                      }
                       onClick={() => {
                         if (isClosed) return;
                         setSelectedLoan(l);
                         setOpenDevolver(true);
                       }}
-                      title={isClosed ? "Este préstamo ya está cerrado" : "Click para inventariar devolución"}
+                      title={
+                        isClosed
+                          ? "Este préstamo ya está cerrado"
+                          : "Click para inventariar devolución"
+                      }
                     >
                       <td className="pl-mono">{l.Id}</td>
 
@@ -145,22 +218,29 @@ export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query
                       </td>
 
                       <td>
-                        <div className="pl-cellMain">{device?.Title} {device?.Referencia}</div>
-                        <div className="pl-cellSub pl-mono">{device?.Serial ?? "—"}</div>
+                        <div className="pl-cellMain">
+                          {device?.Title} {device?.Referencia}
+                        </div>
+                        <div className="pl-cellSub pl-mono">
+                          {device?.Serial ?? "—"}
+                        </div>
                       </td>
 
-                      <td className="pl-mono">{toISODateTimeFlex(l.FechaPrestamo)}</td>
+                      <td className="pl-mono">
+                        {toISODateTimeFlex(l.FechaPrestamo)}
+                      </td>
 
                       <td>{l.Estado}</td>
 
                       <td className="pl-mono">
-                        {l.FechaDevolucion ? toISODateTimeFlex(l.FechaDevolucion) ?? "—" : "Pendiente"}
+                        {l.FechaDevolucion
+                          ? (toISODateTimeFlex(l.FechaDevolucion) ?? "—")
+                          : "Pendiente"}
                       </td>
                     </tr>
                   );
                 })}
               </>
-
             }
           />
         </Card>
@@ -169,10 +249,15 @@ export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query
       {/* MODAL */}
       {openCreate && (
         <div className="pl-modalOverlay" onMouseDown={closeCreate}>
-          <div className="pl-modal pl-modalWide" onMouseDown={(e) => e.stopPropagation()}>
+          <div
+            className="pl-modal pl-modalWide"
+            onMouseDown={(e) => e.stopPropagation()}
+          >
             <div className="pl-modalHead">
               <div>
-                <div className="pl-cardTitle">{step === 1 ? "Crear préstamo" : "Estado de entrega"}</div>
+                <div className="pl-cardTitle">
+                  {step === 1 ? "Crear préstamo" : "Estado de entrega"}
+                </div>
                 <div className="pl-cardSub">
                   {step === 1
                     ? "Selecciona un dispositivo disponible y un solicitante solicitante"
@@ -180,7 +265,11 @@ export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query
                 </div>
               </div>
 
-              <button className="pl-btn ghost" onClick={closeCreate} aria-label="Cerrar">
+              <button
+                className="pl-btn ghost"
+                onClick={closeCreate}
+                aria-label="Cerrar"
+              >
                 ✕
               </button>
             </div>
@@ -192,7 +281,11 @@ export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query
                     <span className="pl-label">Solicitante</span>
                     <Select<UserOptionEx, false>
                       options={workersOptions}
-                      placeholder={loadingWorkers ? "Cargando opciones…" : "Buscar solicitante…"}
+                      placeholder={
+                        loadingWorkers
+                          ? "Cargando opciones…"
+                          : "Buscar solicitante…"
+                      }
                       value={selectedSolicitante}
                       onChange={(opt) => {
                         setField("nombreSolicitante", opt?.label ?? "");
@@ -202,45 +295,63 @@ export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query
                       isDisabled={loadingWorkers}
                       isLoading={loadingWorkers}
                       components={{ Option }}
-                      noOptionsMessage={() => (usersError ? "Error cargando opciones" : "Sin coincidencias")}
+                      noOptionsMessage={() =>
+                        usersError
+                          ? "Error cargando opciones"
+                          : "Sin coincidencias"
+                      }
                       isClearable
                       menuPortalTarget={document.body}
                       menuPosition="fixed"
-                      styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
+                      styles={{
+                        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                      }}
                     />
 
-                    <span className="pl-label">Dispositivo</span>
-                    <Select<desplegablesOptions, false>
-                      options={deviceOptions}
-                      placeholder={"Buscar dispositivo"}
-                      value={selectedDevice}
+                    <span className="pl-label">Activo</span>
+                    <AsyncSelect<desplegablesOptions, false>
+                      cacheOptions
+                      defaultOptions
+                      loadOptions={buscarActivos}
+                      value={activoSeleccionado}
                       onChange={(opt) => {
+                        setActivoSeleccionado(opt ?? null);
                         setField("Id_dispositivo", opt?.value ?? "");
                       }}
+                      placeholder="Buscar por código, serial o tipo..."
                       classNamePrefix="rs"
-                      isDisabled={loadingWorkers}
-                      isLoading={loadingWorkers}
-                      components={{ Option }}
-                      noOptionsMessage={() => (usersError ? "Error cargando opciones" : "Sin coincidencias")}
                       isClearable
+                      noOptionsMessage={({ inputValue }) =>
+                        inputValue
+                          ? "No hay activos disponibles con ese dato"
+                          : "No hay activos disponibles"
+                      }
+                      loadingMessage={() => "Buscando..."}
                       menuPortalTarget={document.body}
                       menuPosition="fixed"
-                      styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
+                      styles={{
+                        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                      }}
                     />
                   </div>
 
-                  {createError ? <div className="pl-note">{createError}</div> : null}
+                  {createError ? (
+                    <div className="pl-note">{createError}</div>
+                  ) : null}
                 </>
               ) : (
                 <>
-                  <ReturnModal 
-                    open={step === 2} 
-                    onClose={() => setOpenCreate(false)} 
-                    loan={created} 
-                    dispositivos={dispositivos} 
-                    onFinalize={() => {return}} 
-                    mode={"edit"} 
-                    fase={"Entrega"} />
+                  <ReturnModal
+                    open={step === 2}
+                    onClose={() => setOpenCreate(false)}
+                    loan={created}
+                    dispositivos={dispositivos}
+                    onFinalize={() => {
+                      return;
+                    }}
+                    mode={"edit"}
+                    fase={"Entrega"}
+                  />
                 </>
               )}
             </div>
@@ -248,7 +359,11 @@ export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query
             <div className="pl-modalActions">
               {step === 1 ? (
                 <>
-                  <button className="pl-btn" onClick={closeCreate} disabled={creating || step !== 1}>
+                  <button
+                    className="pl-btn"
+                    onClick={closeCreate}
+                    disabled={creating || step !== 1}
+                  >
                     Cancelar
                   </button>
 
@@ -263,15 +378,21 @@ export function LoanHistorySection({onFinalizeLoan, setField, state, rows, query
                     {creating ? "Cargando..." : "Siguiente"}
                   </button>
                 </>
-              ) : (
-                null
-              )}
+              ) : null}
             </div>
           </div>
         </div>
       )}
 
-      <ReturnModal open={openDevolver} onClose={() => setOpenDevolver(false)} loan={selectedLoan!} dispositivos={dispositivos} onFinalize={submitFinalize} mode={"edit"} fase={"Devolucion"} />
+      <ReturnModal
+        open={openDevolver}
+        onClose={() => setOpenDevolver(false)}
+        loan={selectedLoan!}
+        dispositivos={dispositivos}
+        onFinalize={submitFinalize}
+        mode={"edit"}
+        fase={"Devolucion"}
+      />
     </>
   );
 }
diff --git a/src/components/NuevoTicket/NuevoTicketForm.tsx b/src/components/NuevoTicket/NuevoTicketForm.tsx
index f58d9a3..d6fd0c1 100644
--- a/src/components/NuevoTicket/NuevoTicketForm.tsx
+++ b/src/components/NuevoTicket/NuevoTicketForm.tsx
@@ -1,7 +1,12 @@
 import * as React from "react";
-import Select, { components, type OptionProps, type SingleValue } from "react-select";
+import { BuscadorActivo } from "../Inventario/BuscadorActivo";
+import Select, {
+  components,
+  type OptionProps,
+  type SingleValue,
+} from "react-select";
 import "./NuevoTicketForm.css";
-import "../../App.css"
+import "../../App.css";
 import { useFranquicias } from "../../Funcionalidades/access/Franquicias";
 import type { UserOption } from "../../Models/Commons";
 import { useGraphServices } from "../../graph/GrapServicesContext";
@@ -12,12 +17,14 @@ import RichTextBase64 from "../RichTextBase64/RichTextBase64";
 import { norm } from "../../utils/Commons";
 import RelacionadorMasiva from "../MasiveNonFather/masiva";
 import { useAuth } from "../../auth/authContext";
+
 import { useRepositories } from "../../repositories/repositoriesContext";
+import type { ActivoTI } from "../../Models/ActivoTI";
 
 export type UserOptionEx = UserOption & { source?: "Empleado" | "Franquicia" };
 export type TreeOption = {
-  value: string;              
-  label: string;              
+  value: string;
+  label: string;
   meta: {
     catId: string | number;
     subId: string | number;
@@ -29,26 +36,68 @@ export type TreeOption = {
 };
 
 export default function NuevoTicketForm() {
-  const {Categorias, SubCategorias, Articulos, Franquicias: FranquiciasSvc, Usuarios: UsuariosSPServiceSvc,} = useGraphServices()
-  const {tickets, logs,} = useRepositories()
-
-  const {account} = useAuth()
-  const userRole = useUserRole(account?.username)
-  const {state, errors, submitting, categorias, subcategoriasAll, articulosAll, loadingCatalogos, setField, handleSubmit,} = useNuevoTicketForm({ Categorias, SubCategorias, Articulos, Tickets: tickets!, Usuarios: UsuariosSPServiceSvc, Logs: logs!});
-  const { franqOptions, loading: loadingFranq, error: franqError } = useFranquicias(FranquiciasSvc!);
-  const { workersOptions, loadingWorkers, error: usersError } = useWorkers({
+  const {
+    Categorias,
+    SubCategorias,
+    Articulos,
+    Franquicias: FranquiciasSvc,
+    Usuarios: UsuariosSPServiceSvc,
+  } = useGraphServices();
+  const { tickets, logs } = useRepositories();
+
+  const [activosSeleccionados, setActivosSeleccionados] = React.useState<
+    ActivoTI[]
+  >([]);
+
+  const { account } = useAuth();
+
+  const userRole = useUserRole(account?.username);
+  const {
+    state,
+    errors,
+    submitting,
+    categorias,
+    subcategoriasAll,
+    articulosAll,
+    loadingCatalogos,
+    setField,
+    handleSubmit,
+  } = useNuevoTicketForm({
+    Categorias,
+    SubCategorias,
+    Articulos,
+    Tickets: tickets!,
+    Usuarios: UsuariosSPServiceSvc,
+    Logs: logs!,
+  });
+  const {
+    franqOptions,
+    loading: loadingFranq,
+    error: franqError,
+  } = useFranquicias(FranquiciasSvc!);
+  const {
+    workersOptions,
+    loadingWorkers,
+    error: usersError,
+  } = useWorkers({
     onlyEnabled: true,
   });
-  const { UseruserOptions, loading, error } = useUsuarios(UsuariosSPServiceSvc!);
+  const { UseruserOptions, loading, error } = useUsuarios(
+    UsuariosSPServiceSvc!,
+  );
   const opcionesFuentes = [
-    { value: "Correo", label: "Correo" }, 
+    { value: "Correo", label: "Correo" },
     { value: "Disponibilidad", label: "Disponibilidad" },
     { value: "Teams", label: "Teams" },
     { value: "Presencial", label: "Presencial" },
     { value: "WhatsApp", label: "WhatsApp" },
   ];
-  const [masiva, setMasiva] = React.useState<boolean>(false)
-  const [categoriasProps, setCategoriasProps] = React.useState<{catId: number | null, subId: number | null, artId: number | null}>({artId: null, catId: null, subId: null})
+  const [masiva, setMasiva] = React.useState<boolean>(false);
+  const [categoriasProps, setCategoriasProps] = React.useState<{
+    catId: number | null;
+    subId: number | null;
+    artId: number | null;
+  }>({ artId: null, catId: null, subId: null });
 
   // ====== Combinar usuarios con franquicias
   const combinedOptions: UserOptionEx[] = React.useMemo(() => {
@@ -57,15 +106,17 @@ export default function NuevoTicketForm() {
       const key = (o.value || "").toLowerCase();
       if (!map.has(key)) map.set(key, o);
     }
-    return Array.from(map.values()).sort((a, b) => a.label.localeCompare(b.label));
+    return Array.from(map.values()).sort((a, b) =>
+      a.label.localeCompare(b.label),
+    );
   }, [workersOptions, franqOptions]);
 
   const treeOptions: TreeOption[] = React.useMemo(() => {
     if (!categorias.length || !subcategoriasAll.length) return [];
-    const subById = new Map(subcategoriasAll.map(s => [String(s.ID), s]));
-    const catById = new Map(categorias.map(c => [String(c.ID), c]));
+    const subById = new Map(subcategoriasAll.map((s) => [String(s.ID), s]));
+    const catById = new Map(categorias.map((c) => [String(c.ID), c]));
 
-    const desdeArticulos = articulosAll.map(a => {
+    const desdeArticulos = articulosAll.map((a) => {
       const sub = subById.get(String(a.Id_subCategoria));
       const cat = sub ? catById.get(String(sub.Id_categoria)) : undefined;
 
@@ -90,10 +141,12 @@ export default function NuevoTicketForm() {
     // No todo el catálogo tiene artículo: las subcategorías sin ninguno se
     // ofrecen igual como hoja seleccionable, para poder calcular el ANS con
     // categoría + subcategoría solamente.
-    const subIdsConArticulo = new Set(articulosAll.map(a => String(a.Id_subCategoria)));
+    const subIdsConArticulo = new Set(
+      articulosAll.map((a) => String(a.Id_subCategoria)),
+    );
     const desdeSubcategoriasSinArticulo = subcategoriasAll
-      .filter(s => !subIdsConArticulo.has(String(s.ID)))
-      .map(s => {
+      .filter((s) => !subIdsConArticulo.has(String(s.ID)))
+      .map((s) => {
         const cat = catById.get(String(s.Id_categoria));
         const catTitle = cat?.Title ?? "(Sin categoría)";
         const subTitle = s.Title ?? "(Sin subcategoría)";
@@ -112,7 +165,9 @@ export default function NuevoTicketForm() {
         } as TreeOption;
       });
 
-    return [...desdeArticulos, ...desdeSubcategoriasSinArticulo].sort((x, y) => x.label.localeCompare(y.label));
+    return [...desdeArticulos, ...desdeSubcategoriasSinArticulo].sort((x, y) =>
+      x.label.localeCompare(y.label),
+    );
   }, [categorias, subcategoriasAll, articulosAll]);
 
   const treeValue: TreeOption | null = React.useMemo(() => {
@@ -125,16 +180,21 @@ export default function NuevoTicketForm() {
     const artId = String(state.articuloId ?? "");
 
     return (
-      treeOptions.find(o =>
-        (artId && String(o.meta.artId) === artId) ||
-        (
-          norm(o.meta.artTitle) === normArt &&
-          norm(o.meta.catTitle) === normCat &&
-          norm(o.meta.subTitle) === normSub
-        )
+      treeOptions.find(
+        (o) =>
+          (artId && String(o.meta.artId) === artId) ||
+          (norm(o.meta.artTitle) === normArt &&
+            norm(o.meta.catTitle) === normCat &&
+            norm(o.meta.subTitle) === normSub),
       ) ?? null
     );
-  }, [state.articulo, state.articuloId, state.categoria, state.subcategoria, treeOptions]);
+  }, [
+    state.articulo,
+    state.articuloId,
+    state.categoria,
+    state.subcategoria,
+    treeOptions,
+  ]);
 
   const userFilter = (option: any, raw: string) => {
     const q = norm(raw);
@@ -168,11 +228,11 @@ export default function NuevoTicketForm() {
       setField("subcategoria", "");
       setField("articulo", "");
       setField("articuloId", "");
-      setCategoriasProps({artId: null, catId: null, subId: null})
+      setCategoriasProps({ artId: null, catId: null, subId: null });
       return;
     }
 
-    const { catTitle, subTitle, artTitle, } = opt.meta;
+    const { catTitle, subTitle, artTitle } = opt.meta;
 
     // Títulos en tu estado global
     setField("categoria", catTitle);
@@ -182,57 +242,118 @@ export default function NuevoTicketForm() {
       artId: opt.meta.artId ? Number(opt.meta.artId) : null,
       catId: Number(opt.meta.catId),
       subId: Number(opt.meta.subId),
-    })
+    });
   };
 
   const disabledCats = submitting || loadingCatalogos;
 
   return (
-  <div className="ticket-form">
-
-    {masiva ? <RelacionadorMasiva onCancel={() => setMasiva(false)} userMail={account?.username ?? ""} role={userRole.role} currentId={""}/> : (
-      <>
-        <div className="form-header">
-          <h2 className="tf-title">Nuevo Ticket</h2>
-          <button className="btn btn-primary-final btn-xs" onClick={() => setMasiva(true)}>Masivo</button>
-        </div> 
+    <div className="ticket-form">
+      {masiva ? (
+        <RelacionadorMasiva
+          onCancel={() => setMasiva(false)}
+          userMail={account?.username ?? ""}
+          role={userRole.role}
+          currentId={""}
+        />
+      ) : (
+        <>
+          <div className="form-header">
+            <h2 className="tf-title">Nuevo Ticket</h2>
+            <button
+              className="btn btn-primary-final btn-xs"
+              onClick={() => setMasiva(true)}
+            >
+              Masivo
+            </button>
+          </div>
 
-        <form onSubmit={(e) => {e.preventDefault(); handleSubmit(e, {art: categoriasProps.artId, catId: categoriasProps.catId, subId: categoriasProps.subId})}} noValidate className="tf-grid">
+          <form
+            onSubmit={async (e) => {
+              e.preventDefault();
+              const ok = await handleSubmit(
+                e,
+                {
+                  art: categoriasProps.artId,
+                  catId: categoriasProps.catId,
+                  subId: categoriasProps.subId,
+                },
+                activosSeleccionados.map((a) => a.id),
+              );
+              if (ok) setActivosSeleccionados([]);
+            }}
+            noValidate
+            className="tf-grid"
+          >
             {/* Fuente */}
             <div className="tf-field">
-              <label className="tf-label" htmlFor="fuente">Fuente Solicitante</label>
-              
-              <Select inputId="fuente" options={opcionesFuentes} classNamePrefix="rs" placeholder="Selecciona fuente de solicitud..."
-                value={opcionesFuentes.find(o => o.value === state.fuente) ?? null}
-                onChange={(opt) => {setField("fuente", opt?.label ?? ""); }}
+              <label className="tf-label" htmlFor="fuente">
+                Fuente Solicitante
+              </label>
+
+              <Select
+                inputId="fuente"
+                options={opcionesFuentes}
+                classNamePrefix="rs"
+                placeholder="Selecciona fuente de solicitud..."
+                value={
+                  opcionesFuentes.find((o) => o.value === state.fuente) ?? null
+                }
+                onChange={(opt) => {
+                  setField("fuente", opt?.label ?? "");
+                }}
                 isClearable
               />
-              {errors.fuente && <small className="error">{errors.fuente}</small>}
+              {errors.fuente && (
+                <small className="error">{errors.fuente}</small>
+              )}
             </div>
 
             {/* Motivo */}
             <div className="tf-field">
-              <label className="tf-label" htmlFor="motivo">Asunto</label>
-              <input id="motivo" type="text" placeholder="Ingrese el motivo" value={state.motivo} onChange={(e) => setField("motivo", e.target.value)} disabled={submitting} className="tf-input" maxLength={300}/>
-              {errors.motivo && <small className="error">{errors.motivo}</small>}
+              <label className="tf-label" htmlFor="motivo">
+                Asunto
+              </label>
+              <input
+                id="motivo"
+                type="text"
+                placeholder="Ingrese el motivo"
+                value={state.motivo}
+                onChange={(e) => setField("motivo", e.target.value)}
+                disabled={submitting}
+                className="tf-input"
+                maxLength={300}
+              />
+              {errors.motivo && (
+                <small className="error">{errors.motivo}</small>
+              )}
             </div>
 
-
             <div className="tf-field">
               <label className="tf-label">Solicitante</label>
               <Select<UserOptionEx, false>
                 options={combinedOptions}
-                placeholder={loadingWorkers || loadingFranq ? "Cargando opciones…" : "Buscar solicitante…"}
+                placeholder={
+                  loadingWorkers || loadingFranq
+                    ? "Cargando opciones…"
+                    : "Buscar solicitante…"
+                }
                 value={state.solicitante as UserOptionEx | null}
                 onChange={(opt) => setField("solicitante", opt ?? null)}
                 classNamePrefix="rs"
                 isDisabled={submitting || loadingWorkers || loadingFranq}
                 isLoading={loadingWorkers || loadingFranq}
                 components={{ Option }}
-                noOptionsMessage={() => (usersError || franqError ? "Error cargando opciones" : "Sin coincidencias")}
+                noOptionsMessage={() =>
+                  usersError || franqError
+                    ? "Error cargando opciones"
+                    : "Sin coincidencias"
+                }
                 isClearable
               />
-              {errors.solicitante && <small className="error">{errors.solicitante}</small>}
+              {errors.solicitante && (
+                <small className="error">{errors.solicitante}</small>
+              )}
             </div>
 
             {/* Resolutor */}
@@ -240,62 +361,100 @@ export default function NuevoTicketForm() {
               <label className="tf-label">Resolutor</label>
               <Select<UserOption, false>
                 options={UseruserOptions}
-                placeholder={loading ? "Cargando usuarios…" : "Buscar resolutor…"}
+                placeholder={
+                  loading ? "Cargando usuarios…" : "Buscar resolutor…"
+                }
                 value={state.resolutor}
                 onChange={async (opt) => {
-                    setField("resolutor", opt ?? null)
-                  }
-                }
+                  setField("resolutor", opt ?? null);
+                }}
                 classNamePrefix="rs"
                 isDisabled={submitting || loading}
                 isLoading={loading}
                 filterOption={userFilter as any}
                 components={{ Option: Option as any }}
-                noOptionsMessage={() => (error ? "Error cargando usuarios" : "Sin coincidencias")}
+                noOptionsMessage={() =>
+                  error ? "Error cargando usuarios" : "Sin coincidencias"
+                }
                 isClearable
               />
-              {errors.resolutor && <small className="error">{errors.resolutor}</small>}
+              {errors.resolutor && (
+                <small className="error">{errors.resolutor}</small>
+              )}
+            </div>
+
+            <div className="tf-field">
+              <label className="tf-label">Activos</label>
+              <BuscadorActivo
+                isMulti
+                inputId="nuevo_ticket_activos"
+                value={activosSeleccionados}
+                onChange={setActivosSeleccionados}
+                isDisabled={submitting}
+              />
             </div>
 
             {/* Fecha de apertura (opcional) */}
             <div className="tf-field tf-col-2 tf-inline">
               <label className="tf-checkbox">
-                <input type="checkbox" checked={state.cerrar} onChange={(ev) => setField("cerrar", ev.target.checked)} disabled={submitting} className="tf-checkbox"/>
-                <span>Ticket cerrado</span>           
+                <input
+                  type="checkbox"
+                  checked={state.cerrar}
+                  onChange={(ev) => setField("cerrar", ev.target.checked)}
+                  disabled={submitting}
+                  className="tf-checkbox"
+                />
+                <span>Ticket cerrado</span>
               </label>
             </div>
 
             {/* Descripción */}
-            <div className={`tf-field tf-col-2 ${errors.descripcion ? "has-error" : ""}`}>
+            <div
+              className={`tf-field tf-col-2 ${errors.descripcion ? "has-error" : ""}`}
+            >
               <label className="tf-label">Descripción</label>
 
               <div className="rtb-box">
-                <RichTextBase64 value={state.descripcion} onChange={(html) => setField("descripcion", html)} placeholder="Describe el problema y pega capturas (Ctrl+V)..."/>
+                <RichTextBase64
+                  value={state.descripcion}
+                  onChange={(html) => setField("descripcion", html)}
+                  placeholder="Describe el problema y pega capturas (Ctrl+V)..."
+                />
               </div>
 
-              {errors.descripcion && <small className="error">{errors.descripcion}</small>}
+              {errors.descripcion && (
+                <small className="error">{errors.descripcion}</small>
+              )}
             </div>
 
             {/* Categoría / Subcategoría / Artículo */}
-            <div className="tf-row tf-row--cats tf-col-2"> 
+            <div className="tf-row tf-row--cats tf-col-2">
               <div className="tf-field">
                 <label className="tf-label">Categoría</label>
                 <Select<TreeOption, false>
                   classNamePrefix="rs"
-                  placeholder={loadingCatalogos ? "Cargando catálogo..." : "Buscar categoría/sub/artículo…"}
+                  placeholder={
+                    loadingCatalogos
+                      ? "Cargando catálogo..."
+                      : "Buscar categoría/sub/artículo…"
+                  }
                   options={treeOptions}
                   value={treeValue}
                   onChange={onTreeChange}
                   isDisabled={disabledCats}
                   isClearable
                 />
-                {errors.categoria && <small className="error">{errors.categoria}</small>}
+                {errors.categoria && (
+                  <small className="error">{errors.categoria}</small>
+                )}
               </div>
             </div>
 
             {/* Archivo */}
             <div className="tf-field tf-col-2">
-              <label className="tf-label" htmlFor="archivo">Adjuntar archivo</label>
+              <label className="tf-label" htmlFor="archivo">
+                Adjuntar archivo
+              </label>
               <input
                 id="archivo"
                 type="file"
@@ -310,16 +469,17 @@ export default function NuevoTicketForm() {
 
             {/* Submit */}
             <div className="tf-actions tf-col-2">
-              <button type="submit" disabled={submitting || loadingCatalogos} className="btn btn-primary-final">
+              <button
+                type="submit"
+                disabled={submitting || loadingCatalogos}
+                className="btn btn-primary-final"
+              >
                 {submitting ? "Enviando..." : "Enviar Ticket"}
               </button>
             </div>
-        </form>
-      </>
-    )}
-      
+          </form>
+        </>
+      )}
     </div>
   );
 }
-
-
diff --git a/src/repositories/ActivoTicketRepository/ActivoTicketFromSupabase.ts b/src/repositories/ActivoTicketRepository/ActivoTicketFromSupabase.ts
new file mode 100644
index 0000000..6486739
--- /dev/null
+++ b/src/repositories/ActivoTicketRepository/ActivoTicketFromSupabase.ts
@@ -0,0 +1,190 @@
+import type {
+  ActivoTicket,
+  CrearActivoTicketDTO,
+} from "../../Models/ActivoTicket";
+import { supabase } from "../../Services/Supabase.service";
+import { SupabaseActivosTIRepository } from "../ActivosTIRepository/ActivosTIFromSupabase";
+import type {
+  FilterActivoTicket,
+  ActivoTicketLoadResult,
+  ActivoTicketRepository,
+} from "./ActivoTicketRepository";
+
+export class SupabaseActivoTicketRepository implements ActivoTicketRepository {
+  private readonly tableName = "TBL_Solvi_Activos_TI_Tickets";
+  private readonly batchSize = 100;
+  // Reutiliza el mapeo del activo (columnas *_asignado, etc.)
+  private readonly activosRepo = new SupabaseActivosTIRepository();
+
+  private sanitizeSearchValue(value: string): string {
+    return value.replace(/[,%()]/g, " ").trim();
+  }
+  private buildActivoTicketQuery(
+    filter?: FilterActivoTicket,
+    includeCount = false,
+  ) {
+    let query = supabase
+      .from(this.tableName)
+      .select(
+        "*, activo:TBL_Solvi_activos_ti(*)",
+        includeCount ? { count: "exact" } : undefined,
+      );
+
+    if (filter?.activo_id) {
+      query = query.eq("activo_id", filter.activo_id);
+    }
+    if (filter?.ticket_id) {
+      query = query.eq("ticket_id", filter.ticket_id);
+    }
+    const trimmedSearch = String(filter?.search ?? "").trim();
+    let searchFilters = "";
+    if (trimmedSearch) {
+      const searchValue = this.sanitizeSearchValue(trimmedSearch);
+      if (searchValue) {
+        const searchPattern = `%${searchValue}%`;
+        searchFilters = [`vinculado_por_nombre.ilike.${searchPattern}`].join(
+          ",",
+        );
+      }
+    }
+    if (searchFilters) {
+      query = query.or(searchFilters);
+    }
+    query = query.order("fecha_vinculacion", { ascending: false });
+
+    return query;
+  }
+  async loadActivoTicket(
+    filter?: FilterActivoTicket,
+  ): Promise<ActivoTicketLoadResult> {
+    try {
+      const pageSize = Math.max(1, Number(filter?.pageSize ?? 10));
+      const pageIndex = Math.max(1, Number(filter?.pageIndex ?? 1));
+
+      if (filter?.paginated) {
+        const from = (pageIndex - 1) * pageSize;
+        const to = from + pageSize - 1;
+        const { data, error, count } = await this.buildActivoTicketQuery(
+          filter,
+          true,
+        ).range(from, to);
+
+        if (error) {
+          return {
+            data: [],
+            message: error.message,
+            status: false,
+          };
+        }
+        return {
+          data: data.map((d) => this.toModel(d)) ?? [],
+          hasNext: from + (data?.length ?? 0) < (count ?? 0),
+          message: null,
+          pageIndex,
+          pageSize,
+          status: true,
+          total: count ?? data?.length ?? 0,
+        };
+      }
+      const allRows: any[] = [];
+      let from = 0;
+      let total = 0;
+
+      while (true) {
+        const to = from + this.batchSize - 1;
+        const { data, error, count } = await this.buildActivoTicketQuery(
+          filter,
+          from === 0,
+        ).range(from, to);
+
+        if (error) {
+          return {
+            data: [],
+            message: error.message,
+            status: false,
+          };
+        }
+        const rows = data ?? [];
+        if (from === 0) {
+          total = count ?? rows.length;
+        }
+
+        allRows.push(...rows);
+
+        if (!rows.length || rows.length < this.batchSize) {
+          break;
+        }
+
+        if (total > 0 && allRows.length >= total) {
+          break;
+        }
+
+        from += this.batchSize;
+      }
+      return {
+        data: allRows.map((d) => this.toModel(d)),
+        hasNext: false,
+        message: null,
+        pageIndex,
+        pageSize,
+        status: true,
+        total: total || allRows.length,
+      };
+    } catch (error: any) {
+      return {
+        data: [],
+        status: false,
+        message: error?.message ?? "Error cargando...",
+      };
+    }
+  }
+  async createActivoTicket(payload: CrearActivoTicketDTO): Promise<{
+    data: ActivoTicket | null;
+    status: boolean;
+    message: string | null;
+  }> {
+    try {
+      const supabaseActivoTicket = {
+        vinculado_por_nombre: payload.vinculado_por_nombre,
+        activo_id: payload.activo_id,
+        ticket_id: payload.ticket_id,
+      };
+
+      const { data, error } = await supabase
+        .from(this.tableName)
+        .insert(supabaseActivoTicket)
+        .select()
+        .single();
+
+      if (error) {
+        return {
+          data: null,
+          message: error.message,
+          status: false,
+        };
+      }
+
+      return {
+        data: this.toModel(data),
+        message: null,
+        status: true,
+      };
+    } catch (e: any) {
+      return {
+        data: null,
+        message: e?.message ?? "Error creando el activo",
+        status: false,
+      };
+    }
+  }
+  toModel(bdModel: any): ActivoTicket {
+    return {
+      id: bdModel.id,
+      fecha_vinculacion: bdModel.fecha_vinculacion,
+      activo_id: bdModel.activo_id,
+      ticket_id: bdModel.ticket_id,
+      vinculado_por_nombre: bdModel.vinculado_por_nombre,
+      activo: bdModel.activo ? this.activosRepo.toModel(bdModel.activo) : null,
+    };
+  }
+}
diff --git a/src/repositories/ActivoTicketRepository/ActivoTicketRepository.ts b/src/repositories/ActivoTicketRepository/ActivoTicketRepository.ts
new file mode 100644
index 0000000..62acf37
--- /dev/null
+++ b/src/repositories/ActivoTicketRepository/ActivoTicketRepository.ts
@@ -0,0 +1,35 @@
+import type {
+  ActivoTicket,
+  CrearActivoTicketDTO,
+} from "../../Models/ActivoTicket";
+
+export type FilterActivoTicket = {
+  ticket_id?: number;
+  activo_id?: string;
+  search?: string;
+  pageSize?: number;
+  pageIndex?: number;
+  sortField?: string;
+  sortDir?: "asc" | "desc";
+  paginated?: number;
+};
+export type ActivoTicketLoadResult = {
+  data: ActivoTicket[];
+  status: boolean;
+  message: string | null;
+  total?: number;
+  pageSize?: number;
+  pageIndex?: number;
+  hasNext?: boolean;
+};
+
+export interface ActivoTicketRepository {
+  loadActivoTicket(
+    filter?: FilterActivoTicket,
+  ): Promise<ActivoTicketLoadResult>;
+  createActivoTicket(payload: CrearActivoTicketDTO): Promise<{
+    data: ActivoTicket | null;
+    status: boolean;
+    message: string | null;
+  }>;
+}
diff --git a/src/repositories/ActivosTIRepository/ActivosTIFromSupabase.ts b/src/repositories/ActivosTIRepository/ActivosTIFromSupabase.ts
new file mode 100644
index 0000000..fb7bdb5
--- /dev/null
+++ b/src/repositories/ActivosTIRepository/ActivosTIFromSupabase.ts
@@ -0,0 +1,323 @@
+import type {
+  ActivoTI,
+  ActualizarActivoDTO,
+  CrearActivoDTO,
+} from "../../Models/ActivoTI";
+import { supabase } from "../../Services/Supabase.service";
+import type {
+  FilterActivosTI,
+  ActivosTILoadResult,
+  ActivosTIRepository,
+} from "./ActivosTIRepository";
+
+export class SupabaseActivosTIRepository implements ActivosTIRepository {
+  private readonly tableName = "TBL_Solvi_activos_ti";
+  private readonly batchSize = 100;
+
+  private sanitizeSearchValue(value: string): string {
+    return value.replace(/[,%()]/g, " ").trim();
+  }
+  private buildActivoQuery(filter?: FilterActivosTI, includeCount = false) {
+    let query = supabase
+      .from(this.tableName)
+      .select("*", includeCount ? { count: "exact" } : undefined);
+
+    // if (filter?.categoria) {
+    //   query = query.eq("categoria", filter.categoria);
+    // }
+    if (filter?.estado) {
+      query = query.eq("estado", filter.estado);
+    }
+    if (filter?.ubicacion_tipo) {
+      query = query.eq("ubicacion_tipo", filter.ubicacion_tipo);
+    }
+    const trimmedSearch = String(filter?.search ?? "").trim();
+    let searchFilters = "";
+    if (trimmedSearch) {
+      const searchValue = this.sanitizeSearchValue(trimmedSearch);
+      if (searchValue) {
+        const searchPattern = `%${searchValue}%`;
+        searchFilters = [
+          `numero_serie.ilike.${searchPattern}`,
+          `codigo_inventario.ilike.${searchPattern}`,
+          `tipo.ilike.${searchPattern}`,
+          `marca.ilike.${searchPattern}`,
+          `modelo.ilike.${searchPattern}`,
+        ].join(",");
+      }
+    }
+
+    if (searchFilters) {
+      query = query.or(searchFilters);
+    }
+    query = query.order("created_at", { ascending: false });
+
+    return query;
+  }
+  async loadActivos(filter?: FilterActivosTI): Promise<ActivosTILoadResult> {
+    try {
+      const pageSize = Math.max(1, Number(filter?.pageSize ?? 10));
+      const pageIndex = Math.max(1, Number(filter?.pageIndex ?? 1));
+
+      if (filter?.paginated) {
+        const from = (pageIndex - 1) * pageSize;
+        const to = from + pageSize - 1;
+        const { data, error, count } = await this.buildActivoQuery(
+          filter,
+          true,
+        ).range(from, to);
+
+        if (error) {
+          return {
+            data: [],
+            message: error.message,
+            status: false,
+          };
+        }
+        return {
+          data: data.map((d) => this.toModel(d)) ?? [],
+          hasNext: from + (data?.length ?? 0) < (count ?? 0),
+          message: null,
+          pageIndex,
+          pageSize,
+          status: true,
+          total: count ?? data?.length ?? 0,
+        };
+      }
+      const allRows: any[] = [];
+      let from = 0;
+      let total = 0;
+
+      while (true) {
+        const to = from + this.batchSize - 1;
+        const { data, error, count } = await this.buildActivoQuery(
+          filter,
+          from === 0,
+        ).range(from, to);
+
+        if (error) {
+          return {
+            data: [],
+            message: error.message,
+            status: false,
+          };
+        }
+        const rows = data ?? [];
+        if (from === 0) {
+          total = count ?? rows.length;
+        }
+
+        allRows.push(...rows);
+
+        if (!rows.length || rows.length < this.batchSize) {
+          break;
+        }
+
+        if (total > 0 && allRows.length >= total) {
+          break;
+        }
+
+        from += this.batchSize;
+      }
+      return {
+        data: allRows.map((d) => this.toModel(d)),
+        hasNext: false,
+        message: null,
+        pageIndex,
+        pageSize,
+        status: true,
+        total: total || allRows.length,
+      };
+    } catch (error: any) {
+      return {
+        data: [],
+        status: false,
+        message: error?.message ?? "Error cargando los activos registrados",
+      };
+    }
+  }
+  async createActivo(payload: CrearActivoDTO): Promise<{
+    data: ActivoTI | null;
+    status: boolean;
+    message: string | null;
+  }> {
+    try {
+      const supabaseActivo = {
+        codigo_inventario: payload.codigo_inventario ?? "",
+        // categoria: payload.categoria,
+        tipo: payload.tipo ?? "",
+        marca: payload.marca ?? null,
+        modelo: payload.modelo ?? null,
+        numero_serie: payload.numero_serie ?? "",
+        fecha_ingreso: payload.fecha_ingreso ?? new Date().toISOString(),
+        estado: payload.estado ?? "Disponible",
+        ubicacion_tipo: payload.ubicacion_tipo ?? "bodega_central",
+        nombre_usuario_asignado: payload.nombre_usuario || null,
+        correo_usuario_asignado: payload.correo_usuario || null,
+      };
+
+      const { data, error } = await supabase
+        .from(this.tableName)
+        .insert(supabaseActivo)
+        .select()
+        .single();
+
+      if (error) {
+        return {
+          data: null,
+          message: error.message,
+          status: false,
+        };
+      }
+
+      return {
+        data: this.toModel(data),
+        message: null,
+        status: true,
+      };
+    } catch (e: any) {
+      return {
+        data: null,
+        message: e?.message ?? "Error creando el activo",
+        status: false,
+      };
+    }
+  }
+  async updateActivo(
+    id: string,
+    payload: ActualizarActivoDTO,
+  ): Promise<{
+    data: ActivoTI | null;
+    status: boolean;
+    message: string | null;
+  }> {
+    try {
+      // En BD el usuario actual se guarda en columnas *_asignado
+      const { nombre_usuario, correo_usuario, ...rest } = payload;
+      const supabasePayload: Record<string, unknown> = { ...rest };
+      if (nombre_usuario !== undefined)
+        supabasePayload.nombre_usuario_asignado = nombre_usuario;
+      if (correo_usuario !== undefined)
+        supabasePayload.correo_usuario_asignado = correo_usuario;
+
+      const { data, error } = await supabase
+        .from(this.tableName)
+        .update(supabasePayload)
+        .eq("id", id)
+        .select()
+        .single();
+
+      if (error) {
+        return {
+          data: null,
+          message: error.message,
+          status: false,
+        };
+      }
+
+      return {
+        data: this.toModel(data),
+        message: null,
+        status: true,
+      };
+    } catch (e: any) {
+      return {
+        data: null,
+        message: e?.message ?? "Error actualizando el activo",
+        status: false,
+      };
+    }
+  }
+  async getActivoById(id: string): Promise<{
+    data: ActivoTI | null;
+    status: boolean;
+    message: string | null;
+  }> {
+    try {
+      const query = supabase
+        .from(this.tableName)
+        .select("*")
+        .eq("id", id)
+        .single();
+
+      const { data, error } = await query;
+
+      if (error) {
+        return {
+          data: null,
+          message: error.message,
+          status: false,
+        };
+      }
+
+      return {
+        data: this.toModel(data),
+        message: null,
+        status: true,
+      };
+    } catch (error: any) {
+      return {
+        data: null,
+        status: false,
+        message: error?.message ?? "Error cargando el activo solicitado",
+      };
+    }
+  }
+  async getActivoBySerial(serial: string): Promise<{
+    data: ActivoTI | null;
+    status: boolean;
+    message: string | null;
+  }> {
+    try {
+      const limpio = serial.trim().replace(/[\\%_]/g, "\\$&");
+      if (!limpio) {
+        return { data: null, status: true, message: null };
+      }
+
+      const { data, error } = await supabase
+        .from(this.tableName)
+        .select("*")
+        .ilike("numero_serie", limpio)
+        .limit(1)
+        .maybeSingle();
+
+      if (error) {
+        return { data: null, status: false, message: error.message };
+      }
+
+      return {
+        data: data ? this.toModel(data) : null,
+        status: true,
+        message: null,
+      };
+    } catch (e: any) {
+      return {
+        data: null,
+        status: false,
+        message: e?.message ?? "Error buscando el activo por serial",
+      };
+    }
+  }
+
+  toModel(bdModel: any): ActivoTI {
+    return {
+      id: bdModel.id,
+      codigo_inventario: bdModel.codigo_inventario,
+      // categoria: bdModel.categoria,
+      tipo: bdModel.tipo,
+      marca: bdModel.marca,
+      modelo: bdModel.modelo,
+      numero_serie: bdModel.numero_serie,
+      fecha_ingreso: bdModel.fecha_ingreso,
+      estado: bdModel.estado,
+      ubicacion_tipo: bdModel.ubicacion_tipo,
+      nombre_usuario: bdModel.nombre_usuario_asignado,
+      correo_usuario: bdModel.correo_usuario_asignado,
+      prestamo_activo_id: bdModel.prestamo_activo_id,
+      created_at: bdModel.created_at,
+      updated_at: bdModel.updated_at,
+      created_by: bdModel.created_by,
+      updated_by: bdModel.updated_by,
+    };
+  }
+}
diff --git a/src/repositories/ActivosTIRepository/ActivosTIRepository.ts b/src/repositories/ActivosTIRepository/ActivosTIRepository.ts
new file mode 100644
index 0000000..5490e4b
--- /dev/null
+++ b/src/repositories/ActivosTIRepository/ActivosTIRepository.ts
@@ -0,0 +1,53 @@
+import type { EstadoActivo } from "../../Models/ActivosTIMovimientos";
+import type {
+  ActivoTI,
+  // CategoriaActivo,
+  Ubicacion_Tipo,
+  CrearActivoDTO,
+  ActualizarActivoDTO,
+} from "../../Models/ActivoTI";
+
+export type FilterActivosTI = {
+  // categoria?: CategoriaActivo;
+  estado?: EstadoActivo;
+  ubicacion_tipo?: Ubicacion_Tipo;
+  search?: string;
+  pageSize?: number;
+  pageIndex?: number;
+  paginated?: boolean;
+};
+export type ActivosTILoadResult = {
+  data: ActivoTI[];
+  status: boolean;
+  message: string | null;
+  total?: number;
+  pageSize?: number;
+  pageIndex?: number;
+  hasNext?: boolean;
+};
+export interface ActivosTIRepository {
+  loadActivos(filter?: FilterActivosTI): Promise<ActivosTILoadResult>;
+  createActivo(payload: CrearActivoDTO): Promise<{
+    data: ActivoTI | null;
+    status: boolean;
+    message: string | null;
+  }>;
+  updateActivo(
+    id: string,
+    payload: ActualizarActivoDTO,
+  ): Promise<{
+    data: ActivoTI | null;
+    status: boolean;
+    message: string | null;
+  }>;
+  getActivoById(id: string): Promise<{
+    data: ActivoTI | null;
+    status: boolean;
+    message: string | null;
+  }>;
+  getActivoBySerial(serial: string): Promise<{
+    data: ActivoTI | null;
+    status: boolean;
+    message: string | null;
+  }>;
+}
diff --git a/src/repositories/MovimientoTIRepository/MovimientoTIFromSupabase.ts b/src/repositories/MovimientoTIRepository/MovimientoTIFromSupabase.ts
new file mode 100644
index 0000000..7ba982b
--- /dev/null
+++ b/src/repositories/MovimientoTIRepository/MovimientoTIFromSupabase.ts
@@ -0,0 +1,271 @@
+import type {
+  ActivoMovimiento,
+  CrearActivoMovimientoDTO,
+} from "../../Models/ActivosTIMovimientos";
+import type {
+  FilterActivosMovimiento,
+  MovimientosLoadResult,
+  MovimientosTIRepository,
+} from "./MovimientosTIRepository";
+import { supabase } from "../../Services/Supabase.service";
+
+export class SupabaseMovimientosTIRepository implements MovimientosTIRepository {
+  private readonly tableName = "TBL_Solvi_Activos_TI_Movimientos";
+  private readonly activosTableName = "TBL_Solvi_activos_ti";
+  private readonly batchSize = 100;
+
+  // Trae los datos básicos de los activos referenciados para poder identificarlos en la UI
+  private async attachActivos(
+    movimientos: ActivoMovimiento[],
+  ): Promise<ActivoMovimiento[]> {
+    const ids = [
+      ...new Set(movimientos.map((m) => m.activo_id).filter(Boolean)),
+    ];
+    if (!ids.length) return movimientos;
+
+    const { data, error } = await supabase
+      .from(this.activosTableName)
+      .select("id, codigo_inventario, tipo, marca, modelo, numero_serie")
+      .in("id", ids);
+
+    if (error || !data) return movimientos;
+
+    const byId = new Map(data.map((a: any) => [String(a.id), a]));
+    return movimientos.map((m) => {
+      const a = byId.get(String(m.activo_id));
+      return {
+        ...m,
+        activo: a
+          ? {
+              codigo_inventario: a.codigo_inventario,
+              tipo: a.tipo,
+              marca: a.marca,
+              modelo: a.modelo,
+              numero_serie: a.numero_serie,
+            }
+          : null,
+      };
+    });
+  }
+
+  private buildActivoQuery(
+    filter?: FilterActivosMovimiento,
+    includeCount = false,
+  ) {
+    let query = supabase
+      .from(this.tableName)
+      .select("*", includeCount ? { count: "exact" } : undefined);
+
+    if (filter?.activo_id) {
+      query = query.eq("activo_id", filter.activo_id);
+    }
+    if (filter?.estado_nuevo) {
+      query = query.eq("estado_nuevo", filter.estado_nuevo);
+    }
+    if (filter?.responsable_nombre) {
+      query = query.eq("responsable_nombre", filter.responsable_nombre);
+    }
+    if (filter?.range) {
+      const nextDay = new Date(filter.range.to);
+      nextDay.setDate(nextDay.getDate() + 1);
+      ((query = query.gte("fecha_evento", filter.range.from)),
+        (query = query.lte("fecha_evento", nextDay.toISOString())));
+    }
+    // Quita caracteres reservados de la sintaxis or() de PostgREST
+    const trimmedSearch = String(filter?.search ?? "")
+      .replace(/[,()"\\]/g, " ")
+      .trim();
+    if (trimmedSearch) {
+      const searchPattern = `%${trimmedSearch}%`;
+      query = query.or(
+        [
+          "comentario",
+          "usuario_destino_nombre",
+          "usuario_destino_correo",
+          "responsable_nombre",
+          "responsable_correo",
+        ]
+          .map((field) => `${field}.ilike.${searchPattern}`)
+          .join(","),
+      );
+    }
+    //Por orden, mas recientes primeros
+    const sortField = filter?.sortField ?? "id";
+    const ascending = filter?.sortDir === "asc";
+    query = query.order(sortField, { ascending });
+
+    if (sortField != "id") {
+      query = query.order("id", { ascending: false });
+    }
+
+    return query;
+  }
+  async loadMovimientos(
+    filter?: FilterActivosMovimiento,
+  ): Promise<MovimientosLoadResult> {
+    try {
+      const pageSize = Math.max(1, Number(filter?.pageSize ?? 10));
+      const pageIndex = Math.max(1, Number(filter?.pageIndex ?? 1));
+
+      if (filter?.paginated) {
+        const from = (pageIndex - 1) * pageSize;
+        const to = from + pageSize - 1;
+        const { data, error, count } = await this.buildActivoQuery(
+          filter,
+          true,
+        ).range(from, to);
+
+        if (error) {
+          return {
+            data: [],
+            message: error.message,
+            status: false,
+          };
+        }
+
+        return {
+          data: await this.attachActivos(
+            (data ?? []).map((d) => this.toModel(d)),
+          ),
+          hasNext: from + (data?.length ?? 0) < (count ?? 0),
+          message: null,
+          pageIndex,
+          pageSize,
+          status: true,
+          total: count ?? data?.length ?? 0,
+        };
+      }
+
+      const allRows: any[] = [];
+      let from = 0;
+      let total = 0;
+      while (true) {
+        const to = from + this.batchSize - 1;
+        const { data, error, count } = await this.buildActivoQuery(
+          filter,
+          from === 0,
+        ).range(from, to);
+        if (error) {
+          return {
+            data: [],
+            message: error.message,
+            status: false,
+          };
+        }
+        const rows = data ?? [];
+        if (from === 0) {
+          total = count ?? rows.length;
+        }
+        allRows.push(...rows);
+
+        if (!rows.length || rows.length < this.batchSize) {
+          break;
+        }
+
+        if (total > 0 && allRows.length >= total) {
+          break;
+        }
+
+        from += this.batchSize;
+      }
+      return {
+        data: await this.attachActivos(allRows.map((d) => this.toModel(d))),
+        hasNext: false,
+        message: null,
+        pageIndex,
+        pageSize,
+        status: true,
+        total: total || allRows.length,
+      };
+    } catch (error: any) {
+      return {
+        data: [],
+        status: false,
+        message: error?.message ?? "Error cargando el historial de movimientos",
+      };
+    }
+  }
+  async createMovimientos(payload: CrearActivoMovimientoDTO): Promise<{
+    data: ActivoMovimiento | null;
+    status: boolean;
+    message: string | null;
+  }> {
+    try {
+      const { data, error } = await supabase
+        .from(this.tableName)
+        .insert(payload)
+        .select()
+        .single();
+      if (error) {
+        return {
+          data: null,
+          message: error.message,
+          status: false,
+        };
+      }
+      return {
+        data: this.toModel(data),
+        message: null,
+        status: true,
+      };
+    } catch (e: any) {
+      return {
+        data: null,
+        status: false,
+        message:
+          e?.message ?? "Error al registrar el movimiento en la bitácora",
+      };
+    }
+  }
+  async getMovimientosById(id: string): Promise<{
+    data: ActivoMovimiento | null;
+    status: boolean;
+    message: string | null;
+  }> {
+    try {
+      const { data, error } = await supabase
+        .from(this.tableName)
+        .select("*")
+        .eq("id", id)
+        .single();
+      if (error) {
+        return {
+          data: null,
+          message: error.message,
+          status: false,
+        };
+      }
+
+      return {
+        data: this.toModel(data),
+        message: null,
+        status: true,
+      };
+    } catch (error: any) {
+      return {
+        data: null,
+        status: false,
+        message: error?.message ?? "Error buscando el movmiento solicitado",
+      };
+    }
+  }
+  private toModel(bdModel: any): ActivoMovimiento {
+    return {
+      id: bdModel.id,
+      activo_id: bdModel.activo_id,
+      ubicacion_origen: bdModel.ubicacion_origen,
+      ubicacion_destino: bdModel.ubicacion_destino,
+      usuario_origen_nombre: bdModel.usuario_origen_nombre,
+      usuario_origen_correo: bdModel.usuario_origen_correo,
+      usuario_destino_nombre: bdModel.usuario_destino_nombre,
+      usuario_destino_correo: bdModel.usuario_destino_correo,
+      estado_anterior: bdModel.estado_anterior,
+      estado_nuevo: bdModel.estado_nuevo,
+      responsable_nombre: bdModel.responsable_nombre,
+      responsable_correo: bdModel.responsable_correo,
+      ticket_id: bdModel.ticket_id,
+      fecha_evento: bdModel.fecha_evento,
+      comentario: bdModel.comentario,
+    };
+  }
+}
diff --git a/src/repositories/MovimientoTIRepository/MovimientosTIRepository.ts b/src/repositories/MovimientoTIRepository/MovimientosTIRepository.ts
new file mode 100644
index 0000000..b52c307
--- /dev/null
+++ b/src/repositories/MovimientoTIRepository/MovimientosTIRepository.ts
@@ -0,0 +1,43 @@
+import type {
+  ActivoMovimiento,
+  EstadoActivo,
+  CrearActivoMovimientoDTO,
+} from "../../Models/ActivosTIMovimientos";
+import type { DateRange } from "../../Models/Filtros";
+
+export type FilterActivosMovimiento = {
+  activo_id?: string;
+  estado_nuevo?: EstadoActivo;
+  responsable_nombre?: string;
+  range?: DateRange;
+  search?: string;
+  pageSize?: number;
+  pageIndex?: number;
+  paginated?: boolean;
+  sortField?: string;
+  sortDir?: "asc" | "desc";
+};
+export type MovimientosLoadResult = {
+  data: ActivoMovimiento[];
+  status: boolean;
+  message: string | null;
+  total?: number;
+  pageSize?: number;
+  pageIndex?: number;
+  hasNext?: boolean;
+};
+export interface MovimientosTIRepository {
+  loadMovimientos(
+    filter?: FilterActivosMovimiento,
+  ): Promise<MovimientosLoadResult>;
+  createMovimientos(payload: CrearActivoMovimientoDTO): Promise<{
+    data: ActivoMovimiento | null;
+    status: boolean;
+    message: string | null;
+  }>;
+  getMovimientosById(id: string): Promise<{
+    data: ActivoMovimiento | null;
+    status: boolean;
+    message: string | null;
+  }>;
+}
diff --git a/src/repositories/TicketsRepository/TicketsFromSupabase.ts b/src/repositories/TicketsRepository/TicketsFromSupabase.ts
index 5b6cf01..b85cf4f 100644
--- a/src/repositories/TicketsRepository/TicketsFromSupabase.ts
+++ b/src/repositories/TicketsRepository/TicketsFromSupabase.ts
@@ -1,8 +1,11 @@
 import type { SupabaseTickets } from "../../Models/DTO/Tickets";
 import type { Ticket } from "../../Models/Tickets";
 import { supabase } from "../../Services/Supabase.service";
-import type { filterTickets, TicketsLoadResult, TicketsRepository } from "./TicketRepository";
-
+import type {
+  filterTickets,
+  TicketsLoadResult,
+  TicketsRepository,
+} from "./TicketRepository";
 
 export class SupabaseTicketRepository implements TicketsRepository {
   private readonly tableName = "TBL_Ticket_Solvi";
@@ -111,7 +114,10 @@ export class SupabaseTicketRepository implements TicketsRepository {
       if (filter?.paginated) {
         const from = (pageIndex - 1) * pageSize;
         const to = from + pageSize - 1;
-        const { data, error, count } = await this.buildTicketsQuery(filter, true).range(from, to);
+        const { data, error, count } = await this.buildTicketsQuery(
+          filter,
+          true,
+        ).range(from, to);
 
         if (error) {
           return {
@@ -138,7 +144,10 @@ export class SupabaseTicketRepository implements TicketsRepository {
 
       while (true) {
         const to = from + this.batchSize - 1;
-        const { data, error, count } = await this.buildTicketsQuery(filter, from === 0).range(from, to);
+        const { data, error, count } = await this.buildTicketsQuery(
+          filter,
+          from === 0,
+        ).range(from, to);
 
         if (error) {
           return {
@@ -184,10 +193,11 @@ export class SupabaseTicketRepository implements TicketsRepository {
     }
   }
 
-  async createTicket(payload: Partial<Ticket>): Promise<{data: Ticket | null, status: boolean, message: string | null}> {
+  async createTicket(
+    payload: Partial<Ticket>,
+  ): Promise<{ data: Ticket | null; status: boolean; message: string | null }> {
     try {
-
-      const supabaseTicket: SupabaseTickets ={
+      const supabaseTicket: SupabaseTickets = {
         ticket_solvi_ans: payload.ANS ?? "",
         ticket_solvi_articulo: payload.Articulo ?? "",
         ticket_solvi_categoria: payload.Categoria ?? "",
@@ -196,10 +206,14 @@ export class SupabaseTicketRepository implements TicketsRepository {
         ticket_solvi_correo_solicitante: payload.CorreoSolicitante ?? "",
         ticket_solvi_descripcion: payload.Descripcion ?? "",
         ticket_solvi_estado: payload.Estadodesolicitud ?? "",
-        ticket_solvi_fechaapertura: payload.FechaApertura ?? "",
-        ticket_solvi_fechamaxima: payload.FechaMaxima ?? "",
+        ticket_solvi_fechaapertura:
+          payload.FechaApertura || new Date().toISOString(),
+        ticket_solvi_fechamaxima: payload.FechaMaxima || null,
+
         ticket_solvi_fuente: payload.Fuente ?? "",
-        ticket_solvi_id_casopadre: payload.IdCasoPadre ? Number(payload.IdCasoPadre) : null,
+        ticket_solvi_id_casopadre: payload.IdCasoPadre
+          ? Number(payload.IdCasoPadre)
+          : null,
         ticket_solvi_observador: payload.Observador ?? "",
         ticket_solvi_resolutor: payload.Nombreresolutor ?? "",
         ticket_solvi_solicitante: payload.Solicitante ?? "",
@@ -207,7 +221,7 @@ export class SupabaseTicketRepository implements TicketsRepository {
         ticket_solvi_titulo: payload.AsuntoTicket ?? "",
         ticket_solvi_attachemnt_path: "",
         ticket_solvi_attachment_name: "",
-      }
+      };
 
       const { data, error } = await supabase
         .from(this.tableName)
@@ -237,7 +251,10 @@ export class SupabaseTicketRepository implements TicketsRepository {
     }
   }
 
-  async updateTicket(id: string, payload: any): Promise<{data: Ticket | null, status: boolean, message: string | null}> {
+  async updateTicket(
+    id: string,
+    payload: any,
+  ): Promise<{ data: Ticket | null; status: boolean; message: string | null }> {
     try {
       const { data, error } = await supabase
         .from(this.tableName)
@@ -268,10 +285,15 @@ export class SupabaseTicketRepository implements TicketsRepository {
     }
   }
 
-  async getTicketById(id: string): Promise<{data: Ticket | null, status: boolean, message: string | null}> {
+  async getTicketById(
+    id: string,
+  ): Promise<{ data: Ticket | null; status: boolean; message: string | null }> {
     try {
-      const query = supabase.from(this.tableName).select("*").eq("ticket_solvi_id", id).single()
-
+      const query = supabase
+        .from(this.tableName)
+        .select("*")
+        .eq("ticket_solvi_id", id)
+        .single();
 
       const { data, error } = await query;
 
@@ -297,21 +319,23 @@ export class SupabaseTicketRepository implements TicketsRepository {
     }
   }
 
-  async countTickets(resolutorMail: string, status: "En Atención" | "Fuera de tiempo"): Promise<number> {
+  async countTickets(
+    resolutorMail: string,
+    status: "En Atención" | "Fuera de tiempo",
+  ): Promise<number> {
     let query = supabase
       .from(this.tableName)
       .select("*", { count: "exact", head: true })
       .eq("ticket_solvi_correo_resolutor", resolutorMail)
       .eq("ticket_solvi_estado", status);
 
-
     const { count, error } = await query;
     if (error) throw error;
     return count ?? 0;
   }
 
-  toModel(bdModel: any): Ticket{
-      const toRetun = {
+  toModel(bdModel: any): Ticket {
+    const toRetun = {
       ANS: bdModel.ticket_solvi_ans,
       Articulo: bdModel.ticket_solvi_articulo,
       Categoria: bdModel.ticket_solvi_categoria,
@@ -337,10 +361,8 @@ export class SupabaseTicketRepository implements TicketsRepository {
       MinutosTotales: bdModel.MinutosTotales,
       AsuntoTicket: bdModel.ticket_solvi_titulo,
       Title: bdModel.ticket_solvi_titulo,
+    };
 
-    }
-
-    return toRetun
-
+    return toRetun;
   }
 }
diff --git a/src/repositories/repositoriesContext.tsx b/src/repositories/repositoriesContext.tsx
index aaabc3c..1d0e4ae 100644
--- a/src/repositories/repositoriesContext.tsx
+++ b/src/repositories/repositoriesContext.tsx
@@ -13,16 +13,24 @@ import type { ANSRepository } from "./AnsRepository/AnsRepository";
 import { SharepointANS } from "./AnsRepository/SharepointANS";
 import type { MessagesRepository } from "./ParticipantsRepository/MessagesRepository";
 import { SupabaseMessageRepository } from "./ParticipantsRepository/SupabaseMessageRepository";
-
+import type { ActivosTIRepository } from "./ActivosTIRepository/ActivosTIRepository";
+import { SupabaseActivosTIRepository } from "./ActivosTIRepository/ActivosTIFromSupabase";
+import type { MovimientosTIRepository } from "./MovimientoTIRepository/MovimientosTIRepository";
+import type { ActivoTicketRepository } from "./ActivoTicketRepository/ActivoTicketRepository";
+import { SupabaseActivoTicketRepository } from "./ActivoTicketRepository/ActivoTicketFromSupabase";
+import { SupabaseMovimientosTIRepository } from "./MovimientoTIRepository/MovimientoTIFromSupabase";
 type RepositorySource = "supabase" | "sharepoint";
 
 export type AppRepositories = {
   tickets: TicketsRepository | null;
   usuarios: UsuariosSPRepository | null;
-  attachments: AttachmentRepository | null
-  logs: LogRepository | null
-  ans: ANSRepository
-  messages: MessagesRepository
+  attachments: AttachmentRepository | null;
+  logs: LogRepository | null;
+  ans: ANSRepository;
+  messages: MessagesRepository;
+  activosTI: ActivosTIRepository | null;
+  movimientosTI: MovimientosTIRepository | null;
+  activotickets: ActivoTicketRepository | null;
 };
 
 type RepositoriesProviderProps = {
@@ -30,8 +38,8 @@ type RepositoriesProviderProps = {
   sources?: Partial<{
     tickets: RepositorySource;
     usuarios: RepositorySource;
-    attachments: RepositorySource
-    logs: RepositorySource
+    attachments: RepositorySource;
+    logs: RepositorySource;
   }>;
 };
 
@@ -46,18 +54,26 @@ export const RepositoriesProvider: React.FC<RepositoriesProviderProps> = ({
   const graph = React.useMemo(() => new GraphRest(getToken), [getToken]);
 
   const repositories = React.useMemo<AppRepositories>(() => {
-    const attachmentsSource = sources?.attachments ?? "supabase"
+    const attachmentsSource = sources?.attachments ?? "supabase";
     const ticketsSource = sources?.tickets ?? "supabase";
     const usuariosSource = sources?.usuarios ?? "sharepoint";
-    const logsSource = sources?.logs ?? "supabase"
+    const logsSource = sources?.logs ?? "supabase";
 
     return {
-      tickets: ticketsSource === "supabase" ? new SupabaseTicketRepository() : null,
-      usuarios: usuariosSource === "sharepoint" ? new UsuariosSPFromSharepoint(graph) : null,
-      attachments: attachmentsSource === "supabase" ? new AttachmentFromSupabase() : null,
+      tickets:
+        ticketsSource === "supabase" ? new SupabaseTicketRepository() : null,
+      usuarios:
+        usuariosSource === "sharepoint"
+          ? new UsuariosSPFromSharepoint(graph)
+          : null,
+      attachments:
+        attachmentsSource === "supabase" ? new AttachmentFromSupabase() : null,
       logs: logsSource === "supabase" ? new LogFromSupabase() : null,
       ans: new SharepointANS(graph),
-      messages: new SupabaseMessageRepository()
+      messages: new SupabaseMessageRepository(),
+      activosTI: new SupabaseActivosTIRepository(),
+      movimientosTI: new SupabaseMovimientosTIRepository(),
+      activotickets: new SupabaseActivoTicketRepository(),
     };
   }, [graph, sources?.tickets, sources?.usuarios]);
 
@@ -72,8 +88,10 @@ export function useRepositories(): AppRepositories {
   const ctx = React.useContext(RepositoriesContext);
 
   if (!ctx) {
-    throw new Error("useRepositories must be used within <RepositoriesProvider>");
+    throw new Error(
+      "useRepositories must be used within <RepositoriesProvider>",
+    );
   }
 
   return ctx;
-}
\ No newline at end of file
+}
diff --git a/src/utils/ans.ts b/src/utils/ans.ts
index 60973d5..648e2b7 100644
--- a/src/utils/ans.ts
+++ b/src/utils/ans.ts
@@ -5,9 +5,8 @@ import type { Holiday } from "../Models/Holiday";
 import type { ANSRepository } from "../repositories/AnsRepository/AnsRepository";
 
 const TIMEZONE = "America/Bogota";
-const WORK_START = 7;  // 7:00 am
-const WORK_END = 17;   // 5:00 pm
-
+const WORK_START = 7; // 7:00 am
+const WORK_END = 17; // 5:00 pm
 
 const toYMD = (d: Date) => {
   const dd = new Date(d);
@@ -24,12 +23,9 @@ const sliceYMD = (s?: string) => (s ? s.slice(0, 10) : "");
 // ¿La fecha es feriado?
 export const isHoliday = (date: Date, holidays: Holiday[]) => {
   const ymd = toYMD(date);
-  return holidays.some(h =>
-    sliceYMD(h.date) === ymd
-  );
+  return holidays.some((h) => sliceYMD(h.date) === ymd);
 };
 
-
 /**
  * Calcula fecha de solución respetando días hábiles 7am–5pm y festivos.
  * Devuelve una TZDate (hora local de Bogotá).
@@ -37,9 +33,9 @@ export const isHoliday = (date: Date, holidays: Holiday[]) => {
 export function calcularFechaSolucion(
   apertura: Date,
   horasAns: number,
-  holidays: Holiday[]
+  holidays: Holiday[],
 ): TZDate {
-  let restante = horasAns * 60; 
+  let restante = horasAns * 60;
   let actual = new TZDate(apertura, TIMEZONE); // trabajar siempre en Bogotá
 
   while (restante > 0) {
@@ -55,9 +51,9 @@ export function calcularFechaSolucion(
           WORK_START,
           0,
           0,
-          TIMEZONE
+          TIMEZONE,
         ),
-        TIMEZONE
+        TIMEZONE,
       );
       continue;
     }
@@ -71,7 +67,7 @@ export function calcularFechaSolucion(
         WORK_START,
         0,
         0,
-        TIMEZONE
+        TIMEZONE,
       );
       continue;
     }
@@ -85,14 +81,13 @@ export function calcularFechaSolucion(
         WORK_START,
         0,
         0,
-        TIMEZONE
+        TIMEZONE,
       );
       continue;
     }
 
     // Minutos disponibles hasta fin de jornada
-    const minutosHastaFin =
-      (WORK_END - hora) * 60 - actual.getMinutes();
+    const minutosHastaFin = (WORK_END - hora) * 60 - actual.getMinutes();
     const aConsumir = Math.min(restante, minutosHastaFin);
 
     actual = new TZDate(addMinutes(actual, aConsumir), TIMEZONE);
@@ -107,38 +102,45 @@ export function calcularFechaSolucion(
         WORK_START,
         0,
         0,
-        TIMEZONE
+        TIMEZONE,
       );
     }
   }
-  
+
   return actual;
 }
 
 /** Normaliza: quita tildes/diacríticos, lowercase y trim. */
 export const norm = (s: string) =>
-  s.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim();
+  s
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+    .toLowerCase()
+    .trim();
 
 /** Determina el ANS por palabras clave/exclusiones. */
 
-export async function calculoANS(ansProps: {catId: number | null, subId: number | null, art: number | null}, ansService: ANSRepository): Promise<string> {
-  const {catId, subId, art} = ansProps
+export async function calculoANS(
+  ansProps: { catId: number | null; subId: number | null; art: number | null },
+  ansService: ANSRepository,
+): Promise<string> {
+  const { catId, subId, art } = ansProps;
 
   // No todo el catálogo tiene artículo: con categoría + subcategoría ya se
   // puede intentar el cálculo, el artículo solo afina la búsqueda si existe.
-  if(!catId || !subId){
-    return "ANS 3"
+  if (!catId || !subId) {
+    return "ANS 3";
   }
 
   const response = await ansService.loadANS({
     id_categoria: catId,
     id_sub_categoria: subId,
     ...(art ? { id_articulo: art } : {}),
-  })
+  });
 
-  if(!response.status){
-    return "ANS 3"
+  if (!response.status) {
+    return "ANS 3";
   }
 
-  return response.data.Title
-}
\ No newline at end of file
+  return response.data?.Title ?? "ANS 3";
+}
diff --git a/supabase/.gitignore b/supabase/.gitignore
index ad9264f..b87bb2f 100644
--- a/supabase/.gitignore
+++ b/supabase/.gitignore
@@ -6,3 +6,5 @@
 .env.keys
 .env.local
 .env.*.local
+.claude/
+