diff --git a/.env.example b/.env.example
index 8e04d045..87dcbf5f 100644
--- a/.env.example
+++ b/.env.example
@@ -27,15 +27,44 @@ CORE_DB_NAME=anexo76_core
 CORE_DB_USER=postgres
 CORE_DB_PASSWORD=postgres
 
+# Lista de orígenes permitidos (CORS)
+# Ejemplo para Hub: http://localhost:5173,http://100.78.6.108:5174,http://100.78.6.108:8001
+CORS_ORIGINS=http://localhost:5173,http://localhost:3000
+
+# ---- API Tipo cambio (External) ---
+EXTERNAL_API_URL=http://74.208.80.245:3000
+EXTERNAL_API_USER=devAS
+EXTERNAL_API_PASSWORD=T6Y4mqP09Y[-2-3H 
+
+# ----- API SITAR (Warnings) ---
+SITAR_API_URL=""
+SITAR_API_USER=""
+SITAR_API_PASSWORD=""
+
 # ----- Frontend -----
 NODE_ENV=development
 VITE_API_URL=http://localhost:8000/api
 INTERNAL_API_URL=http://backend:8000/api
 VITE_KEYCLOAK_REALM=master
-VITE_KEYCLOAK_URL=http://localhost:8080
+VITE_KEYCLOAK_URL=http://localhost:8080/kcauth
 VITE_KEYCLOAK_CLIENT_ID=anexo76-frontend
 
-# ----- Sitar API -----
-SITAR_API_URL=http://api.sitar.aduanasoft.com
-SITAR_API_USER=your_sitar_user
-SITAR_API_PASSWORD=your_sitar_password
+#------ Celery / Valkey ----------
+VALKEY_URL=redis://valkey:6379/0
+
+# ==================================
+# CONFIGURACIÓN DE SINCRONIZACIÓN
+# ==================================
+# Hub IP: 100.78.6.108
+
+# URL del Hub para sincronización (Solo si es CLIENTE)
+# Ejemplo: http://100.78.6.108:8001/api/v1/core/help-center/sync/
+CENTRAL_SERVER_URL=
+
+# UUID único de este cliente (Opcional, se genera uno si está vacío)
+
+# Token de seguridad compartido (Debe ser IDÉNTICO en Hub y Clientes)
+SYNC_SECRET_TOKEN=change-this-sync-token-in-production
+
+# Lista de spokes (Solo si es HUB y desea retransmitir a otros - Opcional)
+SPOKE_URLS=""
diff --git a/.gitignore b/.gitignore
index 48bbc048..2db7f63a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # Python
 __pycache__/
+.mypy_cache/
 *.py[cod]
 *$py.class
 *.so
@@ -48,13 +49,15 @@ logs/
 *.sqlite3
 
 # Testing
+backend/app_data/
+.mypy_cache/
 .pytest_cache/
 .coverage
 htmlcov/
-backend/app_data/
 
 # Node (para frontend)
-node_modules/
+**/node_modules/
+**/.svelte-kit/
 .npm
 .yarn
 
@@ -63,3 +66,4 @@ node_modules/
 postgres-data/
 backend/uploads/
 docker-compose.yml
+.mypy_cache/
diff --git a/backend/.env.example b/backend/.env.example
index 23cd9f7b..77ae339c 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -27,3 +27,8 @@ CORS_ORIGINS=http://localhost:5173,http://localhost:3000
 
 # License Service
 LICENSE_CHECK_ENABLED=True
+
+# Synchronization (Hub & Spoke)
+SYNC_SECRET_TOKEN=change-this-sync-token-in-production
+# Only for spokes/clients. Leave empty if this is the Hub.
+CENTRAL_SERVER_URL=http://localhost:8000/api/v1/core/help-center/sync/
diff --git a/backend/api/v1/common/tenant_crud_routes.py b/backend/api/v1/common/tenant_crud_routes.py
index 91b23321..98f4b184 100644
--- a/backend/api/v1/common/tenant_crud_routes.py
+++ b/backend/api/v1/common/tenant_crud_routes.py
@@ -3,7 +3,7 @@ import logging
 
 from core.database import get_core_db
 from core.security import get_current_user, validate_access_to_resource
-from fastapi import APIRouter, Body, Depends, HTTPException, Path, Query
+from fastapi import APIRouter, Body, Depends, HTTPException, Path, Query, Request
 from pydantic import BaseModel
 from sqlalchemy.orm import Session
 
@@ -137,6 +137,7 @@ class TenantCRUDRoutes(
                     description=f"Get paginated list of {self.resource_name}s with optional filters",
                 )
                 async def list_resources(
+                    request: Request,
                     company_id: int = Query(..., description="Company ID"),
                     page: int = Query(1, ge=1, description="Page number"),
                     page_size: int = Query(
@@ -145,13 +146,6 @@ class TenantCRUDRoutes(
                         le=self.max_page_size,
                         description="Page size",
                     ),
-                    status: Optional[str] = Query(None, description="Filter by status"),
-                    operation_type: Optional[str] = Query(
-                        None, description="Filter by operation type"
-                    ),
-                    invoice_type: Optional[str] = Query(
-                        None, description="Filter by invoice type"
-                    ),
                     db: Session = Depends(self.db_dependency),
                     current_user: Dict[str, Any] = Depends(self.auth_dependency),
                 ):
@@ -164,13 +158,15 @@ class TenantCRUDRoutes(
                     )
 
                     skip = (page - 1) * page_size
-                    filters = {}
-                    if status:
-                        filters["status"] = status
-                    if operation_type:
-                        filters["operation_type"] = operation_type
-                    if invoice_type:
-                        filters["invoice_type"] = invoice_type
+                    
+                    # Extraer todos los parámetros de búsqueda dinámicamente
+                    # Excluimos los parámetros estándar de paginación y control
+                    standard_params = {"company_id", "page", "page_size"}
+                    filters = {
+                        k: v 
+                        for k, v in request.query_params.items() 
+                        if k not in standard_params and v is not None and v != ""
+                    }
 
                     items, total = self.service.get_all(
                         db, tenant_id, company_id, skip, page_size, filters
diff --git a/backend/api/v1/modules/a76/clients_and_providers/dto.py b/backend/api/v1/modules/a76/clients_and_providers/dto.py
index 624c99f1..292d9e41 100644
--- a/backend/api/v1/modules/a76/clients_and_providers/dto.py
+++ b/backend/api/v1/modules/a76/clients_and_providers/dto.py
@@ -46,7 +46,7 @@ class ClientProviderProgramsDTO(BaseModel):
     program_number: Optional[str] = Field(
         None, max_length=40, description="Program number"
     )
-    prosec: Optional[int] = Field(None, description="PROSEC")
+    prosec: Optional[str] = Field(None, max_length=8, description="PROSEC")
     prosec_authorization: Optional[str] = Field(
         None, max_length=20, description="PROSEC authorization"
     )
diff --git a/backend/api/v1/modules/a76/clients_and_providers/models.py b/backend/api/v1/modules/a76/clients_and_providers/models.py
index 4cf08fe0..db5544ca 100644
--- a/backend/api/v1/modules/a76/clients_and_providers/models.py
+++ b/backend/api/v1/modules/a76/clients_and_providers/models.py
@@ -136,7 +136,7 @@ class ClientProviderPrograms(Base, TenantScopedMixin, TimestampMixin):
     # Program information
     program: Mapped[Optional[str]] = mapped_column(String(7))
     program_number: Mapped[Optional[str]] = mapped_column(String(40))
-    prosec: Mapped[Optional[int]] = mapped_column(SmallInteger)
+    prosec: Mapped[Optional[str]] = mapped_column(String(8))
     prosec_authorization: Mapped[Optional[str]] = mapped_column(String(20))
     secon_auth_date: Mapped[Optional[int]] = mapped_column(Integer)
     manufacturer_id: Mapped[Optional[str]] = mapped_column(String(25))
diff --git a/backend/api/v1/modules/a76/customs_brokers/dto.py b/backend/api/v1/modules/a76/customs_brokers/dto.py
index e7f38cba..9f1309c7 100644
--- a/backend/api/v1/modules/a76/customs_brokers/dto.py
+++ b/backend/api/v1/modules/a76/customs_brokers/dto.py
@@ -43,7 +43,7 @@ class CustomsBrokerResponseDTO(CustomsBrokerBaseDTO):
     broker_key: str
     tenant_id: int
     company_id: int
-    vu: Optional["CustomsBrokerVUCreateDTO"] = None
+    vu: Optional["CustomsBrokerVUResponseDTO"] = None
 
     class Config:
         from_attributes = True
@@ -95,6 +95,11 @@ class CustomsBrokerVUCreateDTO(BaseModel):
     doda_web_service_access_key: Optional[str] = None
     doda_fiel_access_key: Optional[str] = None
     doda_xml_files_path: Optional[str] = None
+    tenant_id: Optional[int] = None
+    company_id: Optional[int] = None
+
+class CustomsBrokerVUResponseDTO(CustomsBrokerVUCreateDTO):
+    customs_broker_id: int
 
     class Config:
         from_attributes = True
@@ -112,6 +117,8 @@ class CustomsBrokerPersonnelDTO(BaseModel):
     last_name: Optional[str] = None
     middle_name: Optional[str] = None
     email: Optional[str] = None
+    tenant_id: Optional[int] = None
+    company_id: Optional[int] = None
 
     class Config:
         from_attributes = True
diff --git a/backend/api/v1/modules/a76/customs_brokers/routes.py b/backend/api/v1/modules/a76/customs_brokers/routes.py
index e968ac78..541f41d9 100644
--- a/backend/api/v1/modules/a76/customs_brokers/routes.py
+++ b/backend/api/v1/modules/a76/customs_brokers/routes.py
@@ -62,7 +62,7 @@ def update_customs_broker(
 
 @router.put(
     "/customs-broker-vu/{broker_key}", 
-    response_model=dto.CustomsBrokerVUCreateDTO,
+    response_model=dto.CustomsBrokerVUResponseDTO,
 )
 def update_customs_broker_vu(
     broker_key: str,
@@ -77,7 +77,7 @@ def update_customs_broker_vu(
     if not broker:
         raise HTTPException(status_code=404, detail="Customs Broker not found")
     
-    updated_vu = services.CustomsBrokerVUService.update_vu(db, broker_key, vu_data)
+    updated_vu = services.CustomsBrokerVUService.update_vu(db, broker_key, vu_data, tenant_id, company_id)
     if not updated_vu:
         raise HTTPException(status_code=404, detail="Customs Broker VU not found")
     return updated_vu
@@ -102,7 +102,7 @@ def update_customs_broker_personnel(
         raise HTTPException(status_code=404, detail="Customs Broker not found")
     
     updated_personnel = services.CustomsBrokerPersonnelService.update_personnel(
-        db, broker_key, line, personnel_data
+        db, broker_key, line, personnel_data, tenant_id, company_id
     )
     if not updated_personnel:
         raise HTTPException(
diff --git a/backend/api/v1/modules/a76/customs_brokers/services.py b/backend/api/v1/modules/a76/customs_brokers/services.py
index c1c10d68..dc00f352 100644
--- a/backend/api/v1/modules/a76/customs_brokers/services.py
+++ b/backend/api/v1/modules/a76/customs_brokers/services.py
@@ -90,9 +90,17 @@ class CustomsBrokerVUService:
         return new_vu
 
     @staticmethod
-    def update_vu(db: Session, broker_key: str, vu_data: dto.CustomsBrokerVUCreateDTO):
+    def update_vu(db: Session, broker_key: str, vu_data: dto.CustomsBrokerVUCreateDTO, tenant_id: int, company_id: int):
         # We need the custom broker ID to insert a new VU
-        broker = db.query(models.CustomsBroker).filter(models.CustomsBroker.broker_key == broker_key).first()
+        broker = (
+            db.query(models.CustomsBroker)
+            .filter(
+                models.CustomsBroker.broker_key == broker_key,
+                models.CustomsBroker.tenant_id == tenant_id,
+                models.CustomsBroker.company_id == company_id,
+            )
+            .first()
+        )
         if not broker:
             return None 
 
@@ -108,6 +116,8 @@ class CustomsBrokerVUService:
         else:
             # Create new
             new_vu_data = vu_data.model_dump()
+            new_vu_data["tenant_id"] = tenant_id
+            new_vu_data["company_id"] = company_id
             new_vu = models.CustomsBrokerVU(customs_broker_id=broker.id, **new_vu_data)
             db.add(new_vu)
             db.commit()
@@ -125,24 +135,36 @@ class CustomsBrokerVUService:
 
 class CustomsBrokerPersonnelService:
     @staticmethod
-    def get_by_broker_key_and_line(db: Session, broker_key: str, line: int):
+    def get_by_broker_key_and_line(db: Session, broker_key: str, line: int, tenant_id: int, company_id: int):
         return (
             db.query(models.CustomsBrokerPersonnel)
             .join(models.CustomsBroker)
             .filter(
                 models.CustomsBroker.broker_key == broker_key,
                 models.CustomsBrokerPersonnel.line == line,
+                models.CustomsBroker.tenant_id == tenant_id,
+                models.CustomsBroker.company_id == company_id,
             )
             .first()
         )
 
     @staticmethod
-    def create_personnel(db: Session, broker_key: str, personnel_data: dto.CustomsBrokerPersonnelDTO):
-        broker = db.query(models.CustomsBroker).filter(models.CustomsBroker.broker_key == broker_key).first()
+    def create_personnel(db: Session, broker_key: str, personnel_data: dto.CustomsBrokerPersonnelDTO, tenant_id: int, company_id: int):
+        broker = (
+            db.query(models.CustomsBroker)
+            .filter(
+                models.CustomsBroker.broker_key == broker_key,
+                models.CustomsBroker.tenant_id == tenant_id,
+                models.CustomsBroker.company_id == company_id,
+            )
+            .first()
+        )
         if not broker:
             return None
             
         new_personnel_data = personnel_data.model_dump()
+        new_personnel_data["tenant_id"] = tenant_id
+        new_personnel_data["company_id"] = company_id
         new_personnel = models.CustomsBrokerPersonnel(customs_broker_id=broker.id, **new_personnel_data)
         db.add(new_personnel)
         db.commit()
@@ -155,16 +177,22 @@ class CustomsBrokerPersonnelService:
         broker_key: str,
         line: int,
         personnel_data: dto.CustomsBrokerPersonnelDTO,
+        tenant_id: int,
+        company_id: int,
     ):
         personnel = CustomsBrokerPersonnelService.get_by_broker_key_and_line(
-            db, broker_key, line
+            db, broker_key, line, tenant_id, company_id
         )
         if personnel:
             for key, value in personnel_data.model_dump(exclude_unset=True).items():
                 setattr(personnel, key, value)
             db.commit()
             db.refresh(personnel)
-        return personnel
+            return personnel
+        else:
+            return CustomsBrokerPersonnelService.create_personnel(
+                db, broker_key, personnel_data, tenant_id, company_id
+            )
 
     @staticmethod
     def delete_personnel(db: Session, broker_key: str, line: int):
diff --git a/backend/api/v1/modules/a76/pedmientos/catalog_service.py b/backend/api/v1/modules/a76/pedmientos/catalog_service.py
index 13b4a01e..cc0dd1ab 100644
--- a/backend/api/v1/modules/a76/pedmientos/catalog_service.py
+++ b/backend/api/v1/modules/a76/pedmientos/catalog_service.py
@@ -6,6 +6,8 @@ from sqlalchemy.orm import Session
 from api.v1.modules.public.reference_data.pedimento_codes.models import PedimentoCode
 from api.v1.modules.public.reference_data.customs_sections.models import CustomsSection
 from api.v1.modules.public.reference_data.code_pedimento_regimens.models import CodePedimentoRegimen
+from api.v1.modules.public.reference_data.transport_types.models import TransportType
+from api.v1.modules.public.reference_data.transport_modes.models import TransportMode
 
 # Import A76 Services
 from api.v1.modules.a76.customs_brokers.services import CustomsBrokerService
@@ -15,6 +17,8 @@ from api.v1.modules.a76.clients_and_providers.service import ClientProviderServi
 from api.v1.modules.public.reference_data.pedimento_codes.dto import PedimentoCodeDTO
 from api.v1.modules.public.reference_data.customs_sections.dto import CustomsSectionDTO
 from api.v1.modules.public.reference_data.code_pedimento_regimens.dto import CodePedimentoRegimenDTO
+from api.v1.modules.public.reference_data.transport_types.dto import TransportTypeDTO
+from api.v1.modules.public.reference_data.transport_modes.dto import TransportModeDTO
 from api.v1.modules.a76.customs_brokers.dto import CustomsBrokerResponseDTO
 from api.v1.modules.a76.clients_and_providers.dto import ClientProviderResponseDTO
 from .dtos.pedimentos import PedimentosResponse
@@ -53,6 +57,20 @@ class PedimentoCatalogService:
             except Exception as e:
                 print(f"Error fetching code_pedimento_regimens: {e}")
 
+            try:
+                response.transport_types = [
+                    TransportTypeDTO.model_validate(obj) for obj in db.query(TransportType).limit(200).all()
+                ]
+            except Exception as e:
+                print(f"Error fetching transport_types: {e}")
+
+            try:
+                response.transport_modes = [
+                    TransportModeDTO.model_validate(obj) for obj in db.query(TransportMode).limit(100).all()
+                ]
+            except Exception as e:
+                print(f"Error fetching transport_modes: {e}")
+
         # Helper to fetch tenant/company specific data
         def fetch_tenant_data():
             # Customs Brokers
diff --git a/backend/api/v1/modules/a76/pedmientos/schemas.py b/backend/api/v1/modules/a76/pedmientos/schemas.py
index aeec5ee3..8eec714e 100644
--- a/backend/api/v1/modules/a76/pedmientos/schemas.py
+++ b/backend/api/v1/modules/a76/pedmientos/schemas.py
@@ -11,6 +11,8 @@ from api.v1.modules.public.reference_data.customs_sections.dto import CustomsSec
 from api.v1.modules.public.reference_data.code_pedimento_regimens.dto import CodePedimentoRegimenDTO
 from api.v1.modules.a76.customs_brokers.dto import CustomsBrokerResponseDTO
 from api.v1.modules.a76.clients_and_providers.dto import ClientProviderResponseDTO
+from api.v1.modules.public.reference_data.transport_types.dto import TransportTypeDTO
+from api.v1.modules.public.reference_data.transport_modes.dto import TransportModeDTO
 from .dtos.pedimentos import PedimentosResponse
 
 
@@ -22,6 +24,8 @@ class PedimentoCatalogsResponse(BaseModel):
     code_pedimento_regimens: List[CodePedimentoRegimenDTO] = []
     customs_brokers: List[CustomsBrokerResponseDTO] = []
     clients: List[ClientProviderResponseDTO] = []
+    transport_types: List[TransportTypeDTO] = []
+    transport_modes: List[TransportModeDTO] = []
 
 
 class PedimentoCreationResponse(PedimentoCatalogsResponse):
diff --git a/backend/api/v1/modules/a76/transportation/trailers/services.py b/backend/api/v1/modules/a76/transportation/trailers/services.py
index 43332b64..4ffb7c30 100644
--- a/backend/api/v1/modules/a76/transportation/trailers/services.py
+++ b/backend/api/v1/modules/a76/transportation/trailers/services.py
@@ -25,6 +25,10 @@ class TrailerService:
 
         # Apply filters if provided
         if filters:
+            if filters.get("trailer_number"):
+                query = query.filter(
+                    models.Trailer.trailer_number.ilike(f"%{filters['trailer_number']}%")
+                )
             if filters.get("plate_number"):
                 query = query.filter(
                     models.Trailer.plate_number.ilike(f"%{filters['plate_number']}%")
@@ -75,8 +79,8 @@ class TrailerService:
         db: Session,
         trailer_number: str,
         tenant_id: int,
-        company_id: int,
         trailer_data: dto.TrailerUpdateDTO,
+        company_id: int,
     ) -> Optional[models.Trailer]:
         """Update a trailer"""
         trailer = TrailerService.get_by_id(db, trailer_number, tenant_id, company_id)
diff --git a/backend/api/v1/modules/a76/transportation/transporters/models.py b/backend/api/v1/modules/a76/transportation/transporters/models.py
index cc355dbf..9f555c79 100644
--- a/backend/api/v1/modules/a76/transportation/transporters/models.py
+++ b/backend/api/v1/modules/a76/transportation/transporters/models.py
@@ -9,7 +9,7 @@ class Transporter(Base, TenantScopedMixin, TimestampMixin):
         {"schema": "a76"},
     )
 
-    transporter_key = Column(String(5), primary_key=True, nullable=False)
+    transporter_key = Column(String(23), primary_key=True, nullable=False)
     name = Column(String(256), nullable=True)
     short_name = Column(String(10), nullable=True)
     responsible = Column(String(100), nullable=True)
@@ -27,4 +27,4 @@ class Transporter(Base, TenantScopedMixin, TimestampMixin):
     ftp_user = Column(String(200), nullable=True)
     ftp_password = Column(String(100), nullable=True)
     ftp_directory = Column(String(1000), nullable=True)
-    filler_code = Column(String(4), nullable=True)
+    filler_code = Column(String(20), nullable=True)
diff --git a/backend/api/v1/modules/a76/transportation/transporters/services.py b/backend/api/v1/modules/a76/transportation/transporters/services.py
index 1af393e5..bbf76e69 100644
--- a/backend/api/v1/modules/a76/transportation/transporters/services.py
+++ b/backend/api/v1/modules/a76/transportation/transporters/services.py
@@ -25,6 +25,10 @@ class TransporterService:
 
         # Apply filters if provided
         if filters:
+            if filters.get("transporter_key"):
+                query = query.filter(
+                    models.Transporter.transporter_key.ilike(f"%{filters['transporter_key']}%")
+                )
             if filters.get("name"):
                 query = query.filter(
                     models.Transporter.name.ilike(f"%{filters['name']}%")
@@ -75,8 +79,8 @@ class TransporterService:
         db: Session,
         transporter_key: str,
         tenant_id: int,
-        company_id: int,
         transporter_data: dto.TransporterUpdateDTO,
+        company_id: int,
     ) -> Optional[models.Transporter]:
         """Update a transporter"""
         transporter = TransporterService.get_by_id(
diff --git a/backend/api/v1/modules/a76/transportation/vehicles/services.py b/backend/api/v1/modules/a76/transportation/vehicles/services.py
index d21bd36f..2b9801ac 100644
--- a/backend/api/v1/modules/a76/transportation/vehicles/services.py
+++ b/backend/api/v1/modules/a76/transportation/vehicles/services.py
@@ -25,6 +25,10 @@ class VehicleService:
 
         # Apply filters if provided
         if filters:
+            if filters.get("vehicle_key"):
+                query = query.filter(
+                    models.Vehicle.vehicle_key.ilike(f"%{filters['vehicle_key']}%")
+                )
             if filters.get("plate_number"):
                 query = query.filter(
                     models.Vehicle.plate_number.ilike(f"%{filters['plate_number']}%")
@@ -75,8 +79,8 @@ class VehicleService:
         db: Session,
         vehicle_key: str,
         tenant_id: int,
-        company_id: int,
         vehicle_data: dto.VehicleUpdateDTO,
+        company_id: int,
     ) -> Optional[models.Vehicle]:
         """Update a vehicle"""
         vehicle = VehicleService.get_by_id(db, vehicle_key, tenant_id, company_id)
diff --git a/backend/api/v1/modules/core/help_center/models.py b/backend/api/v1/modules/core/help_center/models.py
new file mode 100644
index 00000000..e7df432c
--- /dev/null
+++ b/backend/api/v1/modules/core/help_center/models.py
@@ -0,0 +1,32 @@
+import uuid
+from datetime import datetime, timezone
+from sqlalchemy import Column, String, Text, DateTime, Integer
+from sqlalchemy.dialects.postgresql import UUID
+from core.database import Base
+
+class HelpArticle(Base):
+    """
+    Modelo para los artículos de ayuda (Base de Conocimientos).
+    Sincronizado entre Servidor Central y Clientes.
+    """
+    __tablename__ = "help_articles"
+
+    uuid = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4, index=True)
+    slug = Column(String(255), unique=True, index=True, nullable=False)
+    title = Column(String(255), nullable=False)
+    content = Column(Text, nullable=False)
+    updated_at = Column(DateTime(timezone=True), default=lambda: datetime.now(timezone.utc), onupdate=lambda: datetime.now(timezone.utc), nullable=False)
+    last_editor = Column(String(255), nullable=False)
+    
+    # Library Mode Fields
+    category = Column(String(255), nullable=True, default="General")
+    order = Column(Integer, nullable=True, default=0)
+    
+    # Removed missing fields to avoid 500 errors (No migration approach)
+    # content_type = Column(String(50), nullable=False, default="article")
+    # file_url = Column(String(512), nullable=True)
+    # file_size = Column(Integer, nullable=True)
+    # mime_type = Column(String(100), nullable=True)
+
+    def __repr__(self):
+        return f"<HelpArticle(title='{self.title}', slug='{self.slug}')>"
diff --git a/backend/api/v1/modules/core/help_center/routes.py b/backend/api/v1/modules/core/help_center/routes.py
new file mode 100644
index 00000000..29f576b5
--- /dev/null
+++ b/backend/api/v1/modules/core/help_center/routes.py
@@ -0,0 +1,227 @@
+import shutil
+import os
+import uuid
+from datetime import datetime
+from typing import List, Optional, Dict, Any
+from uuid import UUID
+from fastapi import APIRouter, Depends, HTTPException, Header, status, UploadFile, File
+from sqlalchemy.orm import Session
+from core.database import get_core_db
+from core.config import settings
+from core.security import get_current_user, has_role
+from .schemas import HelpArticleInDB, HelpArticleCreate, HelpArticleUpdate, HelpSyncRequest, HelpSyncResponse
+from .services import HelpCenterService
+from .tasks import sync_single_article_task
+
+router = APIRouter(prefix="/help-center", tags=["Help Center"])
+
+def verify_sync_token(x_sync_token: str = Header(...)):
+    if x_sync_token != settings.SYNC_SECRET_TOKEN:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Invalid Sync Token"
+        )
+
+def trigger_sync_or_broadcast(article_uuid: UUID):
+    """
+    Helper function to handle synchronization logic.
+    - If we are a Client (CENTRAL_SERVER_URL is set): Trigger upstream sync.
+    - If we are the Hub (No CENTRAL_SERVER, but SPOKE_URLS set): Trigger broadcast.
+    """
+    import logging
+    logger = logging.getLogger(__name__)
+    
+    try:
+        logger.info(f"DEBUG: Triggering sync/broadcast for article {article_uuid}")
+        logger.debug(f"DEBUG: CENTRAL_SERVER_URL='{settings.CENTRAL_SERVER_URL}' SPOKE_URLS='{settings.SPOKE_URLS}'")
+        
+        # 1. Upstream Sync (Client -> Hub)
+        if settings.CENTRAL_SERVER_URL and settings.CENTRAL_SERVER_URL != '""':
+            logger.info(f"DEBUG: Queueing sync_single_article_task for {article_uuid}")
+            sync_single_article_task.delay(str(article_uuid))
+        
+        # 2. Downstream Broadcast (Hub -> Spokes)
+        # Only if we are the Hub (no upstream) and have spokes configured.
+        elif (not settings.CENTRAL_SERVER_URL or settings.CENTRAL_SERVER_URL == '""') and settings.SPOKE_URLS:
+            from .tasks import broadcast_help_update
+            logger.info(f"DEBUG: Queueing broadcast_help_update for {article_uuid}")
+            # origin_client_uuid is None because this change originated on the Hub itself
+            broadcast_help_update.delay(str(article_uuid), None)
+        else:
+            logger.info(f"DEBUG: No sync/broadcast needed for {article_uuid} (Config empty or Hub mode without spokes)")
+            
+    except Exception as e:
+        logger.error(f"ERROR in trigger_sync_or_broadcast for article {article_uuid}: {str(e)}", exc_info=True)
+        # We don't re-raise here to avoid returning 500 to the user if the save was successful
+
+@router.post("/sync/", response_model=HelpSyncResponse, dependencies=[Depends(verify_sync_token)])
+def sync_help_article(sync_data: HelpSyncRequest, db: Session = Depends(get_core_db)):
+    """
+    Endpoint de sincronización inteligente para artículos de ayuda.
+    Requiere X-Sync-Token en los headers.
+    """
+    result = HelpCenterService.sync_article(db, sync_data)
+    
+    # Broadcast to other spokes (Hub logic)
+    import logging
+    logger = logging.getLogger(__name__)
+    logger.info(f"DEBUG: Hub Sync Check. CENTRAL_SERVER_URL='{settings.CENTRAL_SERVER_URL}' SPOKE_URLS='{settings.SPOKE_URLS}'")
+    
+    if not settings.CENTRAL_SERVER_URL and settings.SPOKE_URLS:
+        # We are the Hub (no central server to push to) and have Spokes configured
+        from .tasks import broadcast_help_update
+        logger.info(f"DEBUG: Triggering broadcast for article {sync_data.article_uuid}")
+        broadcast_help_update.delay(
+            str(sync_data.article_uuid), 
+            str(sync_data.origin_client_uuid) if sync_data.origin_client_uuid else None
+        )
+    else:
+        logger.info("DEBUG: Broadcast skipped (Condition failed)")
+        
+    return result
+
+@router.post("/upload-image/")
+def upload_help_image(
+    file: UploadFile = File(...),
+    current_user: Dict[str, Any] = Depends(has_role("admin"))
+):
+    """Sube una imagen para usar en los artículos."""
+    try:
+        file_ext = os.path.splitext(file.filename)[1]
+        new_filename = f"{uuid.uuid4()}{file_ext}"
+        file_location = f"uploads/help/{new_filename}"
+        
+        # Ensure directory exists
+        os.makedirs("uploads/help", exist_ok=True)
+        
+        with open(file_location, "wb+") as buffer:
+            shutil.copyfileobj(file.file, buffer)
+            
+        return {"url": f"/api/uploads/help/{new_filename}"}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.post("/upload-asset/")
+def upload_help_asset(
+    file: UploadFile = File(...),
+    current_user: Dict[str, Any] = Depends(has_role("admin"))
+):
+    """Sube cualquier tipo de archivo (PDF, Video, etc.) para la biblioteca."""
+    try:
+        file_ext = os.path.splitext(file.filename)[1].lower()
+        new_filename = f"{uuid.uuid4()}{file_ext}"
+        
+        # Guardar en una carpeta segun el tipo o general
+        folder = "uploads/help/assets"
+        if file_ext in ['.pdf']:
+            folder = "uploads/help/pdfs"
+        elif file_ext in ['.mp4', '.mov', '.avi']:
+            folder = "uploads/help/videos"
+            
+        file_location = f"{folder}/{new_filename}"
+        
+        # Ensure directory exists
+        os.makedirs(folder, exist_ok=True)
+        
+        with open(file_location, "wb+") as buffer:
+            shutil.copyfileobj(file.file, buffer)
+            
+        # Get file size
+        file_size = os.path.getsize(file_location)
+        
+        return {
+            "url": f"/api/{file_location}",
+            "filename": file.filename,
+            "size": file_size,
+            "mime_type": file.content_type
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.get("/articles/", response_model=List[HelpArticleInDB])
+def list_articles(
+    db: Session = Depends(get_core_db),
+    current_user: Dict[str, Any] = Depends(get_current_user)
+):
+    """Lista todos los artículos de ayuda."""
+    return HelpCenterService.get_all(db)
+
+@router.get("/modifications/", response_model=List[HelpArticleInDB], dependencies=[Depends(verify_sync_token)])
+def get_modifications(since: datetime, db: Session = Depends(get_core_db)):
+    """Obtiene artículos modificados desde la fecha indicada (Polling). Requiere X-Sync-Token."""
+    return HelpCenterService.get_modifications(db, since)
+
+@router.get("/articles/{article_uuid}/", response_model=HelpArticleInDB)
+def get_article(
+    article_uuid: UUID,
+    db: Session = Depends(get_core_db),
+    current_user: Dict[str, Any] = Depends(get_current_user)
+):
+    """Obtiene un artículo por UUID."""
+    article = HelpCenterService.get_by_uuid(db, article_uuid)
+    if not article:
+        raise HTTPException(status_code=404, detail="Article not found")
+    return article
+
+@router.post("/articles/", response_model=HelpArticleInDB, status_code=status.HTTP_201_CREATED)
+def create_article(
+    article: HelpArticleCreate,
+    db: Session = Depends(get_core_db),
+    current_user: Dict[str, Any] = Depends(has_role("admin"))
+):
+    """Crea un nuevo artículo."""
+    import logging
+    logger = logging.getLogger(__name__)
+    logger.info(f"DEBUG: Creating new article: {article.title} by {current_user.get('preferred_username')}")
+    
+    # Fill last_editor with admin username
+    if current_user.get('preferred_username'):
+        article.last_editor = current_user.get('preferred_username')
+        
+    new_article = HelpCenterService.create(db, article)
+    logger.info(f"DEBUG: Article created successfully in DB. UUID: {new_article.uuid}")
+    
+    trigger_sync_or_broadcast(new_article.uuid)
+    
+    return new_article
+
+@router.patch("/articles/{article_uuid}/", response_model=HelpArticleInDB)
+def update_article(
+    article_uuid: UUID,
+    article_data: HelpArticleUpdate,
+    db: Session = Depends(get_core_db),
+    current_user: Dict[str, Any] = Depends(has_role("admin"))
+):
+    """Actualiza un artículo."""
+    if current_user.get('preferred_username'):
+        article_data.last_editor = current_user.get('preferred_username')
+        
+    article = HelpCenterService.update(db, article_uuid, article_data)
+    if not article:
+        raise HTTPException(status_code=404, detail="Article not found")
+    
+    trigger_sync_or_broadcast(article.uuid)
+    
+    return article
+
+@router.delete("/articles/{article_uuid}/", status_code=status.HTTP_204_NO_CONTENT)
+def delete_article(
+    article_uuid: UUID,
+    db: Session = Depends(get_core_db),
+    current_user: Dict[str, Any] = Depends(has_role("admin"))
+):
+    """Elimina un artículo."""
+    if not HelpCenterService.delete(db, article_uuid):
+        raise HTTPException(status_code=404, detail="Article not found")
+    
+    # Broadcast or Sync the deletion? 
+    # Current sync logic relies on sending the *content*. Deletion sync is harder because the article is gone.
+    # For now, let's at least trigger the logic.
+    # WARNING: sync_single_article_task expects the article to exist to send it.
+    # If we deleted it locally, sync_single_article_task will fail or send nothing.
+    # We need a dedicated 'sync_deletion' task or similar. 
+    # Since the user didn't explicitly ask for deletion sync, I will SKIP adding complex deletion sync 
+    # logic right now to avoid breaking things, but I'll add the hook for completeness.
+    # Actually, better to NOT trigger sync on delete if we don't handle it, to avoid errors in logs.
+    
+    return None
diff --git a/backend/api/v1/modules/core/help_center/schemas.py b/backend/api/v1/modules/core/help_center/schemas.py
new file mode 100644
index 00000000..5fc67a37
--- /dev/null
+++ b/backend/api/v1/modules/core/help_center/schemas.py
@@ -0,0 +1,66 @@
+from datetime import datetime
+from typing import Optional
+from uuid import UUID
+from pydantic import BaseModel, Field
+
+class HelpArticleBase(BaseModel):
+    slug: str
+    title: str
+    content: str
+    last_editor: str
+    category: Optional[str] = "General"
+    order: Optional[int] = 0
+    content_type: str = "article"
+    file_url: Optional[str] = None
+    file_size: Optional[int] = None
+    mime_type: Optional[str] = None
+
+class HelpArticleCreate(HelpArticleBase):
+    pass
+
+class HelpArticleUpdate(BaseModel):
+    slug: Optional[str] = None
+    title: Optional[str] = None
+    content: Optional[str] = None
+    last_editor: Optional[str] = None
+    category: Optional[str] = None
+    order: Optional[int] = None
+    content_type: Optional[str] = None
+    file_url: Optional[str] = None
+    file_size: Optional[int] = None
+    mime_type: Optional[str] = None
+
+class HelpArticleInDB(HelpArticleBase):
+    uuid: UUID
+    updated_at: datetime
+
+    class Config:
+        from_attributes = True
+
+class HelpSyncRequest(BaseModel):
+    article_uuid: UUID
+    client_updated_at: datetime
+    client_content: str
+    client_title: str
+    client_slug: str
+    last_editor: str
+    client_category: Optional[str] = "General"
+    client_order: Optional[int] = 0
+    client_content_type: str = "article"
+    client_file_url: Optional[str] = None
+    client_file_size: Optional[int] = None
+    client_mime_type: Optional[str] = None
+
+class HelpSyncResponse(BaseModel):
+    status: str
+    server_updated_at: Optional[datetime] = None
+    server_content: Optional[str] = None
+    server_title: Optional[str] = None
+    server_slug: Optional[str] = None
+    server_category: Optional[str] = None
+    server_order: Optional[int] = None
+    server_content_type: Optional[str] = None
+    server_file_url: Optional[str] = None
+    server_file_size: Optional[int] = None
+    server_mime_type: Optional[str] = None
+    message: str
diff --git a/backend/api/v1/modules/core/help_center/services.py b/backend/api/v1/modules/core/help_center/services.py
new file mode 100644
index 00000000..8f6f36cb
--- /dev/null
+++ b/backend/api/v1/modules/core/help_center/services.py
@@ -0,0 +1,240 @@
+import json
+import re
+from datetime import datetime, timezone
+from typing import List, Optional
+from uuid import UUID
+from sqlalchemy.orm import Session
+from .models import HelpArticle
+from .schemas import HelpArticleCreate, HelpArticleUpdate, HelpSyncRequest, HelpSyncResponse
+
+class HelpCenterService:
+    @staticmethod
+    def _inject_metadata(article: HelpArticle) -> HelpArticle:
+        if not article or not article.content:
+            return article
+            
+        # Look for <!-- a76_metadata: { ... } -->
+        match = re.search(r'<!-- a76_metadata: (.*?) -->', article.content, re.DOTALL)
+        if match:
+            try:
+                metadata = json.loads(match.group(1))
+                article.content_type = metadata.get("content_type", "article")
+                article.file_url = metadata.get("file_url")
+                article.file_size = metadata.get("file_size")
+                article.mime_type = metadata.get("mime_type")
+                # Remove metadata from content for clean display if needed, 
+                # but usually better to leave it and let parser handle it or hide it here.
+                # For now, we just set the attributes.
+            except Exception:
+                pass
+        else:
+            article.content_type = "article"
+            article.file_url = None
+            article.file_size = None
+            article.mime_type = None
+            
+        return article
+
+    @staticmethod
+    def _extract_metadata(content: str, data: dict) -> str:
+        # Remove existing metadata block if any
+        content = re.sub(r'\n\n<!-- a76_metadata: .*? -->', '', content, flags=re.DOTALL)
+        
+        metadata = {
+            "content_type": data.get("content_type", "article"),
+            "file_url": data.get("file_url"),
+            "file_size": data.get("file_size"),
+            "mime_type": data.get("mime_type")
+        }
+        
+        # Only append if there's something meaningful beyond "article"
+        if metadata["content_type"] != "article" or metadata["file_url"]:
+            content += f"\n\n<!-- a76_metadata: {json.dumps(metadata)} -->"
+            
+        return content
+
+    @staticmethod
+    def get_all(db: Session) -> List[HelpArticle]:
+        articles = db.query(HelpArticle).all()
+        return [HelpCenterService._inject_metadata(a) for a in articles]
+
+    @staticmethod
+    def get_by_uuid(db: Session, article_uuid: UUID) -> Optional[HelpArticle]:
+        article = db.query(HelpArticle).filter(HelpArticle.uuid == article_uuid).first()
+        return HelpCenterService._inject_metadata(article)
+
+    @staticmethod
+    def get_by_slug(db: Session, slug: str) -> Optional[HelpArticle]:
+        article = db.query(HelpArticle).filter(HelpArticle.slug == slug).first()
+        return HelpCenterService._inject_metadata(article)
+
+    @staticmethod
+    def get_modifications(db: Session, since: datetime) -> List[HelpArticle]:
+        # Ensure timezone awareness
+        if since.tzinfo is None:
+            since = since.replace(tzinfo=timezone.utc)
+        articles = db.query(HelpArticle).filter(HelpArticle.updated_at > since).all()
+        return [HelpCenterService._inject_metadata(a) for a in articles]
+
+    @staticmethod
+    def create(db: Session, article: HelpArticleCreate) -> HelpArticle:
+        data = article.model_dump()
+        # Move metadata into content
+        data["content"] = HelpCenterService._extract_metadata(data["content"], data)
+        # Remove virtual fields from data to avoid SQLAlchemy errors
+        virtual_fields = ["content_type", "file_url", "file_size", "mime_type"]
+        for f in virtual_fields:
+            if f in data:
+                del data[f]
+                
+        db_article = HelpArticle(**data)
+        db.add(db_article)
+        db.commit()
+        db.refresh(db_article)
+        return HelpCenterService._inject_metadata(db_article)
+
+    @staticmethod
+    def update(db: Session, article_uuid: UUID, article_data: HelpArticleUpdate) -> Optional[HelpArticle]:
+        db_article = db.query(HelpArticle).filter(HelpArticle.uuid == article_uuid).first()
+        if not db_article:
+            return None
+        
+        # Inject metadata to existing article to get current virtual fields
+        db_article = HelpCenterService._inject_metadata(db_article)
+        
+        update_data = article_data.model_dump(exclude_unset=True)
+        
+        # Handle metadata update
+        if "content" in update_data or any(f in update_data for f in ["content_type", "file_url", "file_size", "mime_type"]):
+            # Merge existing metadata with new updates
+            current_meta = {
+                "content_type": getattr(db_article, "content_type", "article"),
+                "file_url": getattr(db_article, "file_url", None),
+                "file_size": getattr(db_article, "file_size", None),
+                "mime_type": getattr(db_article, "mime_type", None)
+            }
+            # Update with new data if present
+            for f in ["content_type", "file_url", "file_size", "mime_type"]:
+                if f in update_data:
+                    current_meta[f] = update_data[f]
+            
+            # Use current content or new content
+            content = update_data.get("content", db_article.content)
+            update_data["content"] = HelpCenterService._extract_metadata(content, current_meta)
+            
+        # Remove virtual fields from data
+        virtual_fields = ["content_type", "file_url", "file_size", "mime_type"]
+        for f in virtual_fields:
+            if f in update_data:
+                del update_data[f]
+                
+        for key, value in update_data.items():
+            setattr(db_article, key, value)
+        
+        db.commit()
+        db.refresh(db_article)
+        return HelpCenterService._inject_metadata(db_article)
+
+    @staticmethod
+    def delete(db: Session, article_uuid: UUID) -> bool:
+        db_article = db.query(HelpArticle).filter(HelpArticle.uuid == article_uuid).first()
+        if not db_article:
+            return False
+        db.delete(db_article)
+        db.commit()
+        return True
+
+    @staticmethod
+    def sync_article(db: Session, sync_data: HelpSyncRequest) -> HelpSyncResponse:
+        """
+        Lógica de sincronización "Smart Sync" (Last Write Wins).
+        """
+        db_article = db.query(HelpArticle).filter(HelpArticle.uuid == sync_data.article_uuid).first()
+        
+        client_updated_at = sync_data.client_updated_at
+        if client_updated_at.tzinfo is None:
+            client_updated_at = client_updated_at.replace(tzinfo=timezone.utc)
+
+        if not db_article:
+            # Caso A: Artículo nuevo desde el cliente
+            # Store metadata in content
+            client_meta = {
+                "content_type": sync_data.client_content_type,
+                "file_url": sync_data.client_file_url,
+                "file_size": sync_data.client_file_size,
+                "mime_type": sync_data.client_mime_type
+            }
+            content_with_meta = HelpCenterService._extract_metadata(sync_data.client_content, client_meta)
+            
+            new_article = HelpArticle(
+                uuid=sync_data.article_uuid,
+                slug=sync_data.client_slug,
+                title=sync_data.client_title,
+                content=content_with_meta,
+                updated_at=client_updated_at,
+                last_editor=sync_data.last_editor,
+                category=sync_data.client_category,
+                order=sync_data.client_order
+            )
+            db.add(new_article)
+            db.commit()
+            
+            # Download assets if needed (Images in content and main file)
+            from .utils import download_file_from_hub, sync_assets_from_content
+            if sync_data.client_file_url:
+                download_file_from_hub(sync_data.client_file_url)
+            sync_assets_from_content(sync_data.client_content)
+            
+            return HelpSyncResponse(status="OK", message="Article created on server.")
+
+        server_updated_at = db_article.updated_at
+        if server_updated_at.tzinfo is None:
+            server_updated_at = server_updated_at.replace(tzinfo=timezone.utc)
+
+        # Caso A: Cliente es más nuevo
+        if client_updated_at > server_updated_at:
+            client_meta = {
+                "content_type": sync_data.client_content_type,
+                "file_url": sync_data.client_file_url,
+                "file_size": sync_data.client_file_size,
+                "mime_type": sync_data.client_mime_type
+            }
+            db_article.content = HelpCenterService._extract_metadata(sync_data.client_content, client_meta)
+            db_article.title = sync_data.client_title
+            db_article.slug = sync_data.client_slug
+            db_article.updated_at = client_updated_at
+            db_article.last_editor = sync_data.last_editor
+            db_article.category = sync_data.client_category
+            db_article.order = sync_data.client_order
+            db.commit()
+
+            # Download assets if needed (Images in content)
+            from .utils import download_file_from_hub, sync_assets_from_content
+            if sync_data.client_file_url:
+                download_file_from_hub(sync_data.client_file_url)
+            sync_assets_from_content(sync_data.client_content)
+
+            return HelpSyncResponse(status="OK", message="Server updated with client data.")
+
+        # Caso B: Servidor es más nuevo
+        elif server_updated_at > client_updated_at:
+            # Inject metadata for response
+            db_article = HelpCenterService._inject_metadata(db_article)
+            return HelpSyncResponse(
+                status="UPDATE_REQUIRED",
+                server_updated_at=server_updated_at,
+                server_content=db_article.content,
+                server_title=db_article.title,
+                server_slug=db_article.slug,
+                server_category=db_article.category,
+                server_order=db_article.order,
+                server_content_type=getattr(db_article, "content_type", "article"),
+                server_file_url=getattr(db_article, "file_url", None),
+                server_file_size=getattr(db_article, "file_size", None),
+                server_mime_type=getattr(db_article, "mime_type", None),
+                message="Client is outdated. Update required."
+            )
+
+        # Caso C: Iguales
+        else:
+            return HelpSyncResponse(status="OK", message="Already in sync.")
diff --git a/backend/api/v1/modules/core/help_center/tasks.py b/backend/api/v1/modules/core/help_center/tasks.py
new file mode 100644
index 00000000..e9c2c6ab
--- /dev/null
+++ b/backend/api/v1/modules/core/help_center/tasks.py
@@ -0,0 +1,269 @@
+import logging
+import httpx
+from uuid import UUID
+from celery import shared_task
+from datetime import datetime, timezone
+from core.database import CoreSessionLocal
+from core.config import settings
+from .models import HelpArticle
+from .schemas import HelpSyncRequest, HelpSyncResponse
+
+logger = logging.getLogger(__name__)
+
+@shared_task(name="sync_all_articles_task")
+def sync_all_articles_task():
+    """
+    Tarea periódica que recorre todos los artículos locales y los sincroniza con el Central.
+    Solo se ejecuta si hay un CENTRAL_SERVER_URL configurado (Rol: Cliente/Spoke).
+    """
+    if not settings.CENTRAL_SERVER_URL:
+        logger.info("Skipping sync: No CENTRAL_SERVER_URL configured (Hub mode).")
+        return
+    db = CoreSessionLocal()
+    try:
+        articles = db.query(HelpArticle).all()
+        for article in articles:
+            sync_single_article(article.uuid)
+    except Exception as e:
+        logger.error(f"Error in sync_all_articles_task: {e}")
+    finally:
+        db.close()
+
+@shared_task(name="sync_single_article_task")
+def sync_single_article_task(article_uuid_str: str):
+    """
+    Sincroniza un único artículo inmediatamente después de una edición local.
+    """
+    sync_single_article(article_uuid_str)
+
+
+@shared_task(name="broadcast_help_update")
+def broadcast_help_update(article_uuid_str: str):
+    """
+    Difunde una actualización de artículo a todos los spokes configurados.
+    """
+    if not settings.SPOKE_URLS:
+        logger.info("No SPOKE_URLS configured. Skipping broadcast.")
+        return
+
+    spokes = [s.strip() for s in settings.SPOKE_URLS.split(",") if s.strip()]
+    headers = {"X-Sync-Token": settings.SYNC_SECRET_TOKEN}
+    
+    db = CoreSessionLocal()
+    try:
+        article = db.query(HelpArticle).filter(HelpArticle.uuid == article_uuid_str).first()
+        if not article:
+            logger.error(f"Article {article_uuid_str} not found for broadcast.")
+            return
+
+        sync_payload = HelpSyncRequest(
+            article_uuid=article.uuid,
+            client_updated_at=article.updated_at,
+            client_content=article.content,
+            client_title=article.title,
+            client_slug=article.slug,
+            last_editor=article.last_editor,
+            client_category=article.category,
+            client_order=article.order
+        ).model_dump(mode='json')
+
+        with httpx.Client() as client:
+            for spoke_url in spokes:
+                # Loop Prevention: Skip if the spoke is the origin
+                try:
+                    logger.info(f"Broadcasting update to {spoke_url}")
+                    response = client.post(
+                        spoke_url,
+                        json=sync_payload,
+                        headers=headers,
+                        timeout=5.0
+                    )
+                    if response.status_code != 200:
+                        logger.warning(f"Broadcast to {spoke_url} failed: {response.status_code}")
+                except Exception as e:
+                    logger.error(f"Error broadcasting to {spoke_url}: {e}")
+
+    except Exception as e:
+        logger.error(f"Broadcast error: {e}")
+    finally:
+        db.close()
+
+
+def sync_single_article(article_uuid):
+    """
+    Lógica compartida para sincronizar un artículo con el servidor central.
+    """
+    logger.info(f"DEBUG: Syncing article {article_uuid}. CENTRAL_SERVER_URL='{settings.CENTRAL_SERVER_URL}' (Type: {type(settings.CENTRAL_SERVER_URL)})")
+    
+    if not settings.CENTRAL_SERVER_URL or settings.CENTRAL_SERVER_URL == '""':
+        # Enhanced check to catch literal empty quotes if they slip through
+        return
+
+    db = CoreSessionLocal()
+    try:
+        article = db.query(HelpArticle).filter(HelpArticle.uuid == article_uuid).first()
+        if not article:
+            return
+
+        sync_data = HelpSyncRequest(
+            article_uuid=article.uuid,
+            client_updated_at=article.updated_at,
+            client_content=article.content,
+            client_title=article.title,
+            client_slug=article.slug,
+            last_editor=article.last_editor,
+            client_category=article.category,
+            client_order=article.order
+        )
+
+        headers = {"X-Sync-Token": settings.SYNC_SECRET_TOKEN}
+        
+        with httpx.Client() as client:
+            response = client.post(
+                settings.CENTRAL_SERVER_URL,
+                json=sync_data.model_dump(mode='json'),
+                headers=headers,
+                timeout=10.0
+            )
+
+            if response.status_code == 200:
+                result = HelpSyncResponse(**response.json())
+                if result.status == "UPDATE_REQUIRED":
+                    # El servidor tiene una versión más nueva, actualizamos localmente
+                    article.content = result.server_content
+                    article.title = result.server_title
+                    article.slug = result.server_slug
+                    article.updated_at = result.server_updated_at
+                    db.commit()
+                    logger.info(f"Article {article.uuid} updated from server.")
+                    
+                    # Download assets if needed
+                    from .utils import download_file_from_hub, sync_assets_from_content
+                    if result.server_file_url:
+                        download_file_from_hub(result.server_file_url)
+                    sync_assets_from_content(result.server_content)
+                else:
+                    logger.info(f"Article {article.uuid} sync OK: {result.message}")
+            else:
+                logger.error(f"Sync failed for article {article.uuid}: {response.status_code} - {response.text}")
+
+    except Exception as e:
+        logger.error(f"Error syncing article {article.uuid}: {e}")
+    finally:
+        db.close()
+
+from sqlalchemy import func
+
+@shared_task(name="sync_from_hub_task")
+def sync_from_hub_task():
+    """
+    Tarea de POLLING que el Cliente ejecuta periódicamente.
+    Consulta al Hub (CENTRAL_SERVER_URL) por artículos modificados desde
+    la última actualización local.
+    """
+    if not settings.CENTRAL_SERVER_URL:
+        return
+
+    db = CoreSessionLocal()
+    try:
+        # 1. Obtener la fecha de la última actualización local
+        last_local_update = db.query(func.max(HelpArticle.updated_at)).scalar()
+        if not last_local_update:
+             # Si no hay datos, traer todo desde el principio de los tiempos
+            last_local_update = datetime(2000, 1, 1, tzinfo=timezone.utc)
+        
+        # Asegurar timezone awareness
+        if last_local_update.tzinfo is None:
+            last_local_update = last_local_update.replace(tzinfo=timezone.utc)
+            
+        logger.info(f"Polling Hub for updates since {last_local_update}")
+
+        # 2. Consultar al Hub
+        headers = {"X-Sync-Token": settings.SYNC_SECRET_TOKEN}
+        # CENTRAL_SERVER_URL es ".../help-center/sync/"
+        # Queremos ".../help-center/modifications/"
+        hub_url = settings.CENTRAL_SERVER_URL.replace("/sync/", "/modifications/")
+        
+        with httpx.Client() as client:
+            response = client.get(
+                hub_url,
+                params={"since": last_local_update.isoformat()},
+                headers=headers,
+                timeout=10.0
+            )
+
+            if response.status_code == 200:
+                articles_data = response.json()
+                if not articles_data:
+                    logger.info("No updates found.")
+                    return
+
+                logger.info(f"Found {len(articles_data)} updates from Hub. Applying...")
+                
+                # 3. Aplicar actualizaciones
+                for art_data in articles_data:
+                    try:
+                        # Logic similar to sync_article but simpler (Force Update from Hub)
+                        # We assume Hub is Truth in this Polling flow
+                        
+                        # Try to find by UUID
+                        local_article = db.query(HelpArticle).filter(HelpArticle.uuid == art_data['uuid']).first()
+                        
+                        # Fallback: find by Slug if UUID doesn't match
+                        if not local_article:
+                            local_article = db.query(HelpArticle).filter(HelpArticle.slug == art_data['slug']).first()
+                        
+                        server_updated_at = datetime.fromisoformat(art_data['updated_at'])
+                        if server_updated_at.tzinfo is None:
+                            server_updated_at = server_updated_at.replace(tzinfo=timezone.utc)
+
+                        if not local_article:
+                            new_article = HelpArticle(
+                                uuid=art_data['uuid'],
+                                slug=art_data['slug'],
+                                title=art_data['title'],
+                                content=art_data['content'],
+                                updated_at=server_updated_at,
+                                last_editor=art_data['last_editor'],
+                                category=art_data.get('category', "General"),
+                                order=art_data.get('order', 0)
+                            )
+                            db.add(new_article)
+                            logger.info(f"Created new article: {art_data['slug']}")
+                        else:
+                            # Update existing article
+                            # If UUID changed in Hub but slug is the same, we update UUID too
+                            local_article.uuid = art_data['uuid']
+                            local_article.slug = art_data['slug']
+                            local_article.title = art_data['title']
+                            local_article.content = art_data['content']
+                            local_article.updated_at = server_updated_at
+                            local_article.last_editor = art_data['last_editor']
+                            local_article.category = art_data.get('category', "General")
+                            local_article.order = art_data.get('order', 0)
+                            logger.info(f"Updated article: {art_data['slug']}")
+                    
+                        db.commit() # Commit each article to avoid bulk failure
+                    except Exception as e:
+                        db.rollback()
+                        logger.error(f"Error syncing article {art_data.get('slug', 'unknown')}: {e}")
+
+
+                # Download assets after bulk update (Polling)
+                from .utils import download_file_from_hub, sync_assets_from_content
+                for art_data in articles_data:
+                    # art_data contains the virtual fields because it was dumped via HelpArticleInDB
+                    if "file_url" in art_data and art_data['file_url']:
+                        download_file_from_hub(art_data['file_url'])
+                    
+                    sync_assets_from_content(art_data.get('content', ''))
+
+                logger.info("Polling sync completed successfully.")
+
+            else:
+                logger.error(f"Polling failed: {response.status_code} - {response.text}")
+
+    except Exception as e:
+        logger.error(f"Error in sync_from_hub_task: {e}")
+    finally:
+        db.close()
diff --git a/backend/api/v1/modules/core/help_center/utils.py b/backend/api/v1/modules/core/help_center/utils.py
new file mode 100644
index 00000000..b5fe4c58
--- /dev/null
+++ b/backend/api/v1/modules/core/help_center/utils.py
@@ -0,0 +1,76 @@
+import os
+import re
+import httpx
+import logging
+import uuid
+from pathlib import Path
+from core.config import settings
+
+logger = logging.getLogger(__name__)
+
+def download_file_from_hub(relative_path: str) -> bool:
+    """
+    Downloads a file from the Hub to the local storage.
+    relative_path: e.g., 'uploads/help/pdfs/myfile.pdf' or '/api/uploads/help/image.png'
+    """
+    if not settings.CENTRAL_SERVER_URL or settings.CENTRAL_SERVER_URL == '""':
+        return False
+
+    # Clean the path
+    clean_path = relative_path.replace("/api/uploads/", "uploads/")
+    if clean_path.startswith("/"):
+        clean_path = clean_path[1:]
+    
+    # Check if it starts with uploads
+    if not clean_path.startswith("uploads/"):
+        # If it doesn't start with uploads, it might just be the filename or a subpath
+        # We assume it's relative to /app/
+        pass
+
+    local_path = Path(clean_path)
+    if local_path.exists():
+        logger.info(f"File {clean_path} already exists, skipping download.")
+        return True
+
+    # Ensure directories exist
+    local_path.parent.mkdir(parents=True, exist_ok=True)
+
+    # Resolve Hub Base URL
+    # CENTRAL_SERVER_URL is usually http://hub:8000/api/v1/core/help-center/sync/
+    # We want http://hub:8000/api/
+    base_url = settings.CENTRAL_SERVER_URL.split("/v1/")[0]
+    # The file in backend is served usually under /api/uploads/...
+    # But clean_path is just "uploads/...". So the Hub route is base_url + "/" + clean_path 
+    hub_file_url = f"{base_url}/{clean_path}"
+
+    logger.info(f"Downloading asset from Hub: {hub_file_url} -> {local_path}")
+    
+    try:
+        with httpx.Client() as client:
+            response = client.get(hub_file_url, timeout=30.0)
+            if response.status_code == 200:
+                with open(local_path, "wb") as f:
+                    f.write(response.content)
+                logger.info(f"Successfully downloaded {clean_path}")
+                return True
+            else:
+                logger.warning(f"Failed to download {clean_path}: Status {response.status_code} URL: {hub_file_url}")
+                return False
+    except Exception as e:
+        logger.error(f"Error downloading {clean_path}: {str(e)}")
+        return False
+
+def sync_assets_from_content(content: str):
+    """
+    Parses markdown content for image URLs and downloads them if they are local references.
+    Example: ![alt text](/api/uploads/help/uuid.png)
+    """
+    if not content:
+        return
+
+    # Regex for markdown images: ![...](/api/uploads/...)
+    image_pattern = r'!\[.*?\]\((/api/uploads/.*?)\)'
+    matches = re.findall(image_pattern, content)
+    
+    for asset_url in matches:
+        download_file_from_hub(asset_url)
diff --git a/backend/api/v1/modules/core/router.py b/backend/api/v1/modules/core/router.py
index 861eecaa..be36fde0 100644
--- a/backend/api/v1/modules/core/router.py
+++ b/backend/api/v1/modules/core/router.py
@@ -5,6 +5,7 @@ from .tenants.routes import router as tenants_router
 from .user_tenant.routes import router as user_tenant_router
 from .users.routes import router as users_router
 from .dashboard.routes import router as dashboard_router
+from .help_center.routes import router as help_center_router
 from fastapi import APIRouter
 
 router = APIRouter()
@@ -16,3 +17,4 @@ router.include_router(users_router, prefix="/core", tags=["core / users"])
 router.include_router(licenses_router, prefix="/core", tags=["core / licenses"])
 router.include_router(permissions_router, prefix="/core", tags=["core / permissions"])
 router.include_router(dashboard_router, prefix="/core", tags=["core / dashboard"])
+router.include_router(help_center_router, prefix="/core", tags=["core / help-center"])
diff --git a/backend/core/celery_app.py b/backend/core/celery_app.py
index de7d211c..35694fea 100644
--- a/backend/core/celery_app.py
+++ b/backend/core/celery_app.py
@@ -7,11 +7,17 @@ from api.v1.modules.a24.fa.fa_item_lines.models import FaLineItem  # noqa: F401
 from api.v1.modules.a76.items.models import LineItem  # noqa: F401
 
 valkey_url = os.getenv("VALKEY_URL", "redis://valkey:6379/0")
+print(f"DEBUG: Celery Broker URL: {valkey_url}")
 
+# Configurar broker y backend explícitamente en el constructor
 celery_app = Celery(
     "anexo76_tasks",
     broker=valkey_url,
     backend=valkey_url,
+)
+celery_app.set_default()
+
+celery_app.conf.update(
     include=[
         "api.v1.modules.a76.reports.importacion.facturas.task",
         "api.v1.modules.a76.reports.importacion.consolidados.task",
@@ -23,6 +29,7 @@ celery_app = Celery(
         "api.v1.modules.a76.reports.exportacion.transmission.MAINX30.task",
         "api.v1.modules.a76.reports.importacion.transmission.temporal.MAINX30.task",
         "api.v1.modules.a76.reports.importacion.transmission.definitive.MAINX30.task"
+        "api.v1.modules.core.help_center.tasks"
     ]  # Ruta al módulo donde están las tareas
 )
 
@@ -36,5 +43,12 @@ celery_app.conf.update(
     enable_utc=True,
 )
 
+celery_app.conf.beat_schedule = {
+    "sync-from-hub-every-minute": {
+        "task": "sync_from_hub_task",
+        "schedule": 60.0,  # Run every 60 seconds
+    },
+}
+
 if __name__ == "__main__":
     celery_app.start()
diff --git a/backend/core/config.py b/backend/core/config.py
index 13459073..495600f8 100644
--- a/backend/core/config.py
+++ b/backend/core/config.py
@@ -5,6 +5,7 @@ Configuración centralizada de la aplicación usando Pydantic Settings
 import os
 from typing import List
 
+from pydantic import field_validator
 from pydantic_settings import BaseSettings, SettingsConfigDict
 
 
@@ -39,6 +40,11 @@ class Settings(BaseSettings):
     ALGORITHM: str = "HS256"
     ACCESS_TOKEN_EXPIRE_MINUTES: int = 30
 
+    # Synchronization
+    SYNC_SECRET_TOKEN: str = "change-this-sync-token-in-production"
+    CENTRAL_SERVER_URL: str = "http://localhost:8000/api/v1/core/help-center/sync/"
+    SPOKE_URLS: str = "" # Comma separated list of Spoke URLs for Broadcast (Hub only)
+
     # CORS
     CORS_ORIGINS: str = "http://localhost:5173,http://localhost:3000"
 
@@ -65,6 +71,13 @@ class Settings(BaseSettings):
         env_file_encoding="utf-8",
     )
 
+    @field_validator("CENTRAL_SERVER_URL", "SPOKE_URLS", mode="before")
+    @classmethod
+    def strip_quotes(cls, v: str) -> str:
+        if v:
+            return v.strip().strip('"').strip("'")
+        return v
+
     @property
     def core_database_url(self) -> str:
         """URL de conexión a la base de datos core"""
diff --git a/backend/core/middleware.py b/backend/core/middleware.py
index d4c9c594..edd39f75 100644
--- a/backend/core/middleware.py
+++ b/backend/core/middleware.py
@@ -21,6 +21,7 @@ class TenantMiddleware(BaseHTTPMiddleware):
             "/api/health",
             "/api/",
             "/uploads",
+            "/api/v1/core/help-center",
         ]
 
         path = request.url.path
@@ -86,6 +87,7 @@ class LicenseValidationMiddleware(BaseHTTPMiddleware):
             "/api/v1/status",
             "/api/health",
             "/api/",
+            "/api/v1/core/help-center",
         ]
 
         # Verificar si la ruta está exenta (comparación exacta o prefijo)
diff --git a/backend/core/security.py b/backend/core/security.py
index 0bcde710..7fb90728 100644
--- a/backend/core/security.py
+++ b/backend/core/security.py
@@ -106,6 +106,10 @@ def has_role(required_role: str):
         user_roles = current_user.get("realm_access", {}).get("roles", [])
 
         if required_role not in user_roles:
+            logger.warning(f"Role denied. Required: {required_role}. User actually has: {user_roles}")
+            # Also check client roles as a debug fallback
+            client_roles = current_user.get("resource_access", {})
+            logger.warning(f"User client roles: {client_roles}")
             raise HTTPException(
                 status_code=403,
                 detail=f"User does not have required role: {required_role}",
diff --git a/backend/main.py b/backend/main.py
index b1740f07..8b468c74 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -1,7 +1,7 @@
 """
 Anexo76 - Aplicación SaaS para gestión de comercio exterior
 Backend API con FastAPI + Keycloak + SQLAlchemy
-"""
+ """
 
 import logging
 import subprocess
@@ -58,6 +58,11 @@ from api.v1.modules.a76.clients_and_providers.models import ClientProvider
 from api.v1.modules.a76.customs_brokers.models import CustomsBroker
 from api.v1.modules.a76.general_catalogs.company.models import Company
 
+# Transportation Modules
+from api.v1.modules.a76.transportation.trailers.models import Trailer
+from api.v1.modules.a76.transportation.transporters.models import Transporter
+from api.v1.modules.a76.transportation.vehicles.models import Vehicle
+
 # Core Modules & Transactional Models
 from api.v1.modules.a76.items.models import LineItem
 from api.v1.modules.a76.items.series.models import Serie
@@ -75,6 +80,7 @@ from api.v1.modules.a76.audit_log.events import register_audit_listeners
 
 # Core Modules (Secondary)
 
+import core.celery_app # Initialize Celery App
 from api.v1.router import router as api_v1_router
 from core.config import settings
 from core.database import init_db
@@ -145,6 +151,137 @@ def run_migrations():
     subprocess.run(["alembic", "upgrade", "head"], check=True)
 
 
+def create_transportation_tables():
+    """Crea las tablas de transporte directamente si no existen.
+    Se usa en lugar de una migración Alembic para evitar gestionar versiones.
+    """
+    from sqlalchemy import text
+    from core.database import core_engine
+
+    ddl_statements = [
+        """
+        CREATE TABLE IF NOT EXISTS a76.transporter (
+            transporter_key VARCHAR(23) PRIMARY KEY,
+            name VARCHAR(256),
+            short_name VARCHAR(10),
+            responsible VARCHAR(100),
+            rfc VARCHAR(30),
+            streets VARCHAR(100),
+            postal_code VARCHAR(15),
+            city VARCHAR(30),
+            state VARCHAR(30),
+            country VARCHAR(3),
+            loader_code VARCHAR(9),
+            caat_code VARCHAR(49),
+            transport_code VARCHAR(8),
+            transport_interface_type VARCHAR(20),
+            ftp_server VARCHAR(200),
+            ftp_user VARCHAR(200),
+            ftp_password VARCHAR(100),
+            ftp_directory VARCHAR(1000),
+            filler_code VARCHAR(20),
+            tenant_id INTEGER NOT NULL REFERENCES core.tenants(id),
+            company_id INTEGER NOT NULL REFERENCES a76.company(id),
+            created_at TIMESTAMP NOT NULL DEFAULT now(),
+            updated_at TIMESTAMP NOT NULL DEFAULT now(),
+            deleted_at TIMESTAMP
+        );
+        """,
+        """
+        CREATE TABLE IF NOT EXISTS a76.trailer (
+            trailer_number VARCHAR(20) PRIMARY KEY,
+            ace_trailer_number VARCHAR(10),
+            trailer_type_key VARCHAR(2),
+            seal VARCHAR(15),
+            entity_code VARCHAR(1),
+            plate_number VARCHAR(17),
+            state VARCHAR(30),
+            country VARCHAR(3),
+            container_key VARCHAR(3),
+            tenant_id INTEGER NOT NULL REFERENCES core.tenants(id),
+            company_id INTEGER NOT NULL REFERENCES a76.company(id),
+            created_at TIMESTAMP NOT NULL DEFAULT now(),
+            updated_at TIMESTAMP NOT NULL DEFAULT now(),
+            deleted_at TIMESTAMP
+        );
+        """,
+        """
+        CREATE TABLE IF NOT EXISTS a76.vehicle (
+            vehicle_key VARCHAR(14) PRIMARY KEY,
+            ace_vehicle_key VARCHAR(10),
+            transporter_key VARCHAR(23),
+            transport_identifier VARCHAR(30),
+            transport_type VARCHAR(2),
+            entity_code VARCHAR(1),
+            transponder_number VARCHAR(16),
+            dot_number VARCHAR(8),
+            plate_number VARCHAR(17),
+            city VARCHAR(30),
+            state VARCHAR(30),
+            country VARCHAR(3),
+            seal VARCHAR(49),
+            insurance_company_name VARCHAR(30),
+            insurance_number VARCHAR(20),
+            insurance_amount NUMERIC(13, 2),
+            insurance_date INTEGER,
+            box_number VARCHAR(300),
+            brand VARCHAR(20),
+            year VARCHAR(4),
+            series VARCHAR(30),
+            description VARCHAR(100),
+            engine_number VARCHAR(50),
+            sct_permission VARCHAR(40),
+            color VARCHAR(20),
+            container_key VARCHAR(3),
+            tenant_id INTEGER NOT NULL REFERENCES core.tenants(id),
+            company_id INTEGER NOT NULL REFERENCES a76.company(id),
+            created_at TIMESTAMP NOT NULL DEFAULT now(),
+            updated_at TIMESTAMP NOT NULL DEFAULT now(),
+            deleted_at TIMESTAMP
+        );
+        """,
+    ]
+
+    with core_engine.connect() as conn:
+        for stmt in ddl_statements:
+            conn.execute(text(stmt))
+        # Ampliar columnas que pudieron haberse creado con tamaño incorrecto
+        conn.execute(text("""
+            DO $$
+            BEGIN
+                -- Fix transporter_key si fue creada como VARCHAR(5)
+                IF EXISTS (
+                    SELECT 1 FROM information_schema.columns
+                    WHERE table_schema='a76' AND table_name='transporter'
+                    AND column_name='transporter_key'
+                    AND character_maximum_length < 23
+                ) THEN
+                    ALTER TABLE a76.transporter ALTER COLUMN transporter_key TYPE VARCHAR(23);
+                END IF;
+                -- Fix filler_code si fue creada como VARCHAR(4)
+                IF EXISTS (
+                    SELECT 1 FROM information_schema.columns
+                    WHERE table_schema='a76' AND table_name='transporter'
+                    AND column_name='filler_code'
+                    AND character_maximum_length < 20
+                ) THEN
+                    ALTER TABLE a76.transporter ALTER COLUMN filler_code TYPE VARCHAR(20);
+                END IF;
+
+                -- Eliminar constraint de trailer_type_key en trailer si existe
+                IF EXISTS (
+                    SELECT 1 FROM information_schema.table_constraints 
+                    WHERE constraint_name='trailer_trailer_type_key_fkey' 
+                    AND table_schema='a76' AND table_name='trailer'
+                ) THEN
+                    ALTER TABLE a76.trailer DROP CONSTRAINT trailer_trailer_type_key_fkey;
+                END IF;
+            END$$;
+        """))
+        conn.commit()
+    logger.info("Tablas de transporte verificadas/creadas correctamente.")
+
+
 # Inicializar la base de datos
 @app.on_event("startup")
 async def on_startup():
@@ -152,6 +289,7 @@ async def on_startup():
     logger.info("Iniciando la aplicación Anexo76...")
     init_db()
     run_migrations()
+    create_transportation_tables()
     logger.info("Base de datos inicializada correctamente.")
 
 
@@ -265,6 +403,10 @@ def register_audit():
             CustomsBroker,
             Part,
             Company,
+            # Transportation Modules
+            Trailer,
+            Transporter,
+            Vehicle,
             # Reference Data
             Country,
             CurrencyType,
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index 4eabf108..9b422bfa 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -17,7 +17,7 @@ services:
       - backend-net
     restart: unless-stopped
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U postgres -d anexo76_core || exit 1"]
+      test: [ "CMD-SHELL", "pg_isready -U postgres -d anexo76_core || exit 1" ]
       interval: 5s
       timeout: 3s
       retries: 10
@@ -37,7 +37,7 @@ services:
 
   # PostgreSQL - Base de datos Keycloak
   postgres-keycloak:
-    image: postgres:18-alpine
+    image: postgres:16-alpine
     container_name: anexo76-postgres-keycloak
     environment:
       POSTGRES_DB: keycloak
@@ -54,7 +54,7 @@ services:
       - backend-net
     restart: unless-stopped
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U postgres -d keycloak || exit 1"]
+      test: [ "CMD-SHELL", "pg_isready -U postgres -d keycloak || exit 1" ]
       interval: 5s
       timeout: 3s
       retries: 10
@@ -80,10 +80,10 @@ services:
       KEYCLOAK_ADMIN: ${KEYCLOAK_ADMIN:-admin}
       KEYCLOAK_ADMIN_PASSWORD: ${KEYCLOAK_ADMIN_PASSWORD:-admin}
       KC_DB: postgres
-      KC_DB_URL_HOST: postgres-keycloak
+      KC_DB_URL_HOST: anexo76-postgres-keycloak
       KC_DB_URL_PORT: "5432"
       KC_DB_URL_DATABASE: keycloak
-      KC_DB_URL: jdbc:postgresql://postgres-keycloak:5432/keycloak
+      KC_DB_URL: jdbc:postgresql://anexo76-postgres-keycloak:5432/keycloak
       KC_DB_USERNAME: postgres
       KC_DB_PASSWORD: ${POSTGRES_KEYCLOAK_PASSWORD:-postgres}
       KC_DB_SCHEMA: public
@@ -96,12 +96,12 @@ services:
       KC_HEALTH_ENABLED: "true"
       KC_METRICS_ENABLED: "true"
       KC_HOSTNAME_PATH: /kcauth
-      KC_LOG_LEVEL: INFO      
+      KC_LOG_LEVEL: INFO
       JAVA_OPTS_APPEND: "-Xms256m -Xmx512m -XX:MetaspaceSize=96M -XX:MaxMetaspaceSize=256m -Djava.net.preferIPv4Stack=true"
-    command: 
+    command:
       - start
       - --db=postgres
-      - --db-url-host=postgres-keycloak
+      - --db-url-host=anexo76-postgres-keycloak
       - --http-relative-path=/kcauth
       - --db-url-port=5432
       - --db-url-database=keycloak
@@ -123,7 +123,19 @@ services:
       - backend-net
     restart: unless-stopped
     healthcheck:
-      test: ["CMD-SHELL", "exec 3<>/dev/tcp/127.0.0.1/9000; echo -e 'GET /kcauth/health/ready HTTP/1.1\r\nhost: 127.0.0.1\r\nConnection: close\r\n\r\n' >&3; grep -q 'HTTP/1.1 200' <&3 || exit 1"]
+      test:
+        [
+          "CMD-SHELL",
+          "exec 3<>/dev/tcp/127.0.0.1/9000; echo -e 'GET /kcauth/health/ready HTTP/1.1\r
+
+            host: 127.0.0.1\r
+
+            Connection: close\r
+
+            \r
+
+            ' >&3; grep -q 'HTTP/1.1 200' <&3 || exit 1"
+        ]
       interval: 10s
       timeout: 5s
       retries: 30
@@ -162,6 +174,13 @@ services:
       - SITAR_API_URL=${SITAR_API_URL}
       - SITAR_API_USER=${SITAR_API_USER}
       - SITAR_API_PASSWORD=${SITAR_API_PASSWORD}
+      - EXTERNAL_API_URL=${EXTERNAL_API_URL}
+      - EXTERNAL_API_USER=${EXTERNAL_API_USER}
+      - EXTERNAL_API_PASSWORD=${EXTERNAL_API_PASSWORD}
+      - VALKEY_URL=${VALKEY_URL:-redis://valkey:6379/0}
+      - CENTRAL_SERVER_URL=${CENTRAL_SERVER_URL:-""}
+      - SYNC_SECRET_TOKEN=${SYNC_SECRET_TOKEN:-change-this-sync-token-in-production}
+      - SPOKE_URLS=${SPOKE_URLS:-""}
     ports:
       - "3467:8000"
     depends_on:
@@ -176,24 +195,10 @@ services:
       - backend-net
       - frontend-net
     restart: unless-stopped
-    entrypoint: ["/entrypoint.sh"]
-    command:
-      [
-        "gunicorn",
-        "main:app",
-        "-k",
-        "uvicorn.workers.UvicornWorker",
-        "-w",
-        "${WEB_CONCURRENCY:-1}",
-        "-b",
-        "0.0.0.0:8000",
-        "--log-level",
-        "info",
-        "--forwarded-allow-ips",
-        "*"
-      ]
+    entrypoint: [ "/entrypoint.sh" ]
+    command: [ "gunicorn", "main:app", "-k", "uvicorn.workers.UvicornWorker", "-w", "${WEB_CONCURRENCY:-1}", "-b", "0.0.0.0:8000", "--log-level", "info", "--forwarded-allow-ips", "*" ]
     healthcheck:
-      test: ["CMD-SHELL", "curl -f http://localhost:8000/api/health || exit 1"]
+      test: [ "CMD-SHELL", "curl -f http://localhost:8000/api/health || exit 1" ]
       interval: 15s
       timeout: 5s
       retries: 5
@@ -216,7 +221,15 @@ services:
     container_name: worker
     command: celery -A core.celery_app worker --loglevel=info
     environment:
-      - VALKEY_URL=redis://valkey:6379/0
+      - VALKEY_URL=${VALKEY_URL:-redis://valkey:6379/0}
+      - CENTRAL_SERVER_URL=${CENTRAL_SERVER_URL:-""}
+      - SYNC_SECRET_TOKEN=${SYNC_SECRET_TOKEN:-change-this-sync-token-in-production}
+      - SPOKE_URLS=${SPOKE_URLS:-""}
+      - CORE_DB_HOST=${CORE_DB_HOST:-postgres-a76}
+      - CORE_DB_PORT=${CORE_DB_PORT:-5432}
+      - CORE_DB_NAME=${CORE_DB_NAME:-anexo76_core}
+      - CORE_DB_USER=${CORE_DB_USER:-postgres}
+      - CORE_DB_PASSWORD=${POSTGRES_APP_PASSWORD:-postgres}
     depends_on:
       - backend
       - valkey
@@ -252,7 +265,7 @@ services:
     depends_on:
       backend:
         condition: service_healthy
-    entrypoint: ["/frontend-entrypoint.sh"]
+    entrypoint: [ "/frontend-entrypoint.sh" ]
     volumes:
       - ./scripts/frontend-entrypoint.sh:/frontend-entrypoint.sh:ro
     networks:
@@ -260,9 +273,9 @@ services:
       - backend-net
       - auth-net
     restart: unless-stopped
-    command: ["pnpm", "start"]
+    command: [ "pnpm", "start" ]
     healthcheck:
-      test: ["CMD-SHELL", "wget --no-verbose --tries=1 --spider http://localhost:5173/ || exit 1"]
+      test: [ "CMD-SHELL", "wget --no-verbose --tries=1 --spider http://localhost:5173/ || exit 1" ]
       interval: 15s
       timeout: 5s
       retries: 5
diff --git a/docker-compose.yml b/docker-compose.yml
index a6dc68de..aeb6990b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -127,7 +127,7 @@ services:
           "CMD-SHELL",
           "exec 3<>/dev/tcp/127.0.0.1/9000; echo -e 'GET /kcauth/health/ready HTTP/1.1\r
 
-            host: 127.0.0.1\r
+            Host: localhost\r
 
             Connection: close\r
 
@@ -178,6 +178,13 @@ services:
       - SITAR_API_URL=${SITAR_API_URL}
       - SITAR_API_USER=${SITAR_API_USER}
       - SITAR_API_PASSWORD=${SITAR_API_PASSWORD}
+      - EXTERNAL_API_URL=${EXTERNAL_API_URL}
+      - EXTERNAL_API_USER=${EXTERNAL_API_USER}
+      - EXTERNAL_API_PASSWORD=${EXTERNAL_API_PASSWORD}
+      - VALKEY_URL=${VALKEY_URL:-redis://valkey:6379/0}
+      - CENTRAL_SERVER_URL=${CENTRAL_SERVER_URL:-""}
+      - SYNC_SECRET_TOKEN=${SYNC_SECRET_TOKEN:-change-this-sync-token-in-production}
+      - SPOKE_URLS=${SPOKE_URLS:-""}
     ports:
       - "8000:8000"
     depends_on:
@@ -234,6 +241,7 @@ services:
       - KEYCLOAK_REALM=${KEYCLOAK_REALM:-master}
       - KEYCLOAK_CLIENT_ID=${KEYCLOAK_CLIENT_ID:-anexo76-backend}
       - KEYCLOAK_CLIENT_SECRET=${KEYCLOAK_CLIENT_SECRET:-zRU5NuvUFtBSOuh7Kdc372AItoWGLgz9}
+      - VITE_HUB_MODE=${VITE_HUB_MODE:-true}
     ports:
       - "5173:5173"
     depends_on:
@@ -266,6 +274,7 @@ services:
           memory: 1G
         reservations:
           memory: 512M
+
   # celery
   celery_worker:
     build: ./backend
@@ -276,6 +285,10 @@ services:
       - ENVIRONMENT=${ENVIRONMENT:-development}
       - PYTHONUNBUFFERED=1
       - PYTHONDONTWRITEBYTECODE=1
+      - VALKEY_URL=${VALKEY_URL:-redis://valkey:6379/0}
+      - CENTRAL_SERVER_URL=${CENTRAL_SERVER_URL:-""}
+      - SYNC_SECRET_TOKEN=${SYNC_SECRET_TOKEN:-change-this-sync-token-in-production}
+      - SPOKE_URLS=${SPOKE_URLS:-""}
       - CORE_DB_HOST=${CORE_DB_HOST:-postgres-a76}
       - CORE_DB_PORT=${CORE_DB_PORT:-5432}
       - CORE_DB_NAME=${CORE_DB_NAME:-anexo76_core}
@@ -289,6 +302,34 @@ services:
     depends_on:
       - backend
       - valkey
+    volumes:
+      - ./backend:/app
+      - backend_cache:/app/__pycache__
+      - backend_uploads:/app/uploads
+    networks:
+      - backend-net
+
+  celery_beat:
+    build: ./backend
+    container_name: celery_beat
+    command: celery -A core.celery_app beat --loglevel=info
+    environment:
+      - VALKEY_URL=${VALKEY_URL:-redis://valkey:6379/0}
+      - CENTRAL_SERVER_URL=${CENTRAL_SERVER_URL:-""}
+      - SYNC_SECRET_TOKEN=${SYNC_SECRET_TOKEN:-change-this-sync-token-in-production}
+      - SPOKE_URLS=${SPOKE_URLS:-""}
+      - CORE_DB_HOST=${CORE_DB_HOST:-postgres-a76}
+      - CORE_DB_PORT=${CORE_DB_PORT:-5432}
+      - CORE_DB_NAME=${CORE_DB_NAME:-anexo76_core}
+      - CORE_DB_USER=${CORE_DB_USER:-postgres}
+      - CORE_DB_PASSWORD=${POSTGRES_APP_PASSWORD:-postgres}
+    depends_on:
+      - backend
+      - valkey
+    volumes:
+      - ./backend:/app
+      - backend_cache:/app/__pycache__
+      - backend_uploads:/app/uploads
     networks:
       - backend-net
     volumes:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index bd5ede6d..8ccfa4e2 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -15,7 +15,7 @@ RUN npm config set strict-ssl false
 RUN npm install -g pnpm
 
 # Instalar dependencias
-RUN pnpm install --frozen-lockfile
+RUN pnpm install
 
 # Copiar código
 COPY . .
diff --git a/frontend/package.json b/frontend/package.json
index ca906270..b21c873b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -57,8 +57,12 @@
 		"vitest-browser-svelte": "^1.1.0"
 	},
 	"dependencies": {
+		"@types/dompurify": "^3.2.0",
+		"@types/marked": "^6.0.0",
+		"dompurify": "^3.0.9",
 		"keycloak-js": "^26.2.1",
 		"lucide-svelte": "^0.553.0",
+		"marked": "^12.0.0",
 		"svelte-sonner": "^1.0.7"
 	}
-}
+}
\ No newline at end of file
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index bfafc5e5..4933f90b 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,12 +8,24 @@ importers:
 
   .:
     dependencies:
+      '@types/dompurify':
+        specifier: ^3.2.0
+        version: 3.2.0
+      '@types/marked':
+        specifier: ^6.0.0
+        version: 6.0.0
+      dompurify:
+        specifier: ^3.0.9
+        version: 3.3.1
       keycloak-js:
         specifier: ^26.2.1
         version: 26.2.1
       lucide-svelte:
         specifier: ^0.553.0
         version: 0.553.0(svelte@5.40.2)
+      marked:
+        specifier: ^12.0.0
+        version: 12.0.2
       svelte-sonner:
         specifier: ^1.0.7
         version: 1.0.7(svelte@5.40.2)
@@ -505,56 +517,67 @@ packages:
     resolution: {integrity: sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.52.4':
     resolution: {integrity: sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.52.4':
     resolution: {integrity: sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.52.4':
     resolution: {integrity: sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.52.4':
     resolution: {integrity: sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.52.4':
     resolution: {integrity: sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.52.4':
     resolution: {integrity: sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.52.4':
     resolution: {integrity: sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.52.4':
     resolution: {integrity: sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.52.4':
     resolution: {integrity: sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.52.4':
     resolution: {integrity: sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.52.4':
     resolution: {integrity: sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==}
@@ -675,24 +698,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
     resolution: {integrity: sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
     resolution: {integrity: sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.14':
     resolution: {integrity: sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.14':
     resolution: {integrity: sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==}
@@ -758,18 +785,29 @@ packages:
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
+  '@types/dompurify@3.2.0':
+    resolution: {integrity: sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==}
+    deprecated: This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/marked@6.0.0':
+    resolution: {integrity: sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA==}
+    deprecated: This is a stub types definition. marked provides its own type definitions, so you do not need this installed.
+
   '@types/node@20.19.22':
     resolution: {integrity: sha512-hRnu+5qggKDSyWHlnmThnUqg62l29Aj/6vcYgUaSFL9oc7DVjeWEQN3PRgdSc6F8d9QRMWkf36CLMch1Do/+RQ==}
 
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@typescript-eslint/eslint-plugin@8.46.1':
     resolution: {integrity: sha512-rUsLh8PXmBjdiPY+Emjz9NX2yHvhS11v0SR6xNJkm5GM1MO9ea/1GoDKlHHZGrOJclL/cZ2i/vRUYVtjRhrHVQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1054,6 +1092,9 @@ packages:
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
+  dompurify@3.3.1:
+    resolution: {integrity: sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==}
+
   enhanced-resolve@5.18.3:
     resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
@@ -1368,24 +1409,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.1:
     resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.1:
     resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.1:
     resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.1:
     resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
@@ -1432,6 +1477,11 @@ packages:
   magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
 
+  marked@12.0.2:
+    resolution: {integrity: sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -2547,16 +2597,27 @@ snapshots:
 
   '@types/deep-eql@4.0.2': {}
 
+  '@types/dompurify@3.2.0':
+    dependencies:
+      dompurify: 3.3.1
+
   '@types/estree@1.0.8': {}
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/marked@6.0.0':
+    dependencies:
+      marked: 12.0.2
+
   '@types/node@20.19.22':
     dependencies:
       undici-types: 6.21.0
 
   '@types/resolve@1.20.2': {}
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -2853,6 +2914,10 @@ snapshots:
 
   dom-accessibility-api@0.5.16: {}
 
+  dompurify@3.3.1:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   enhanced-resolve@5.18.3:
     dependencies:
       graceful-fs: 4.2.11
@@ -3212,6 +3277,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  marked@12.0.2: {}
+
   merge2@1.4.1: {}
 
   micromatch@4.0.8:
diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index 7e328ea8..9cffaf74 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -13,4 +13,4 @@ declare global {
 	}
 }
 
-export {};
+export { };
diff --git a/frontend/src/lib/api/dashboard/a76/customs-brokers.ts b/frontend/src/lib/api/dashboard/a76/customs-brokers.ts
index f08c1726..1362a11a 100644
--- a/frontend/src/lib/api/dashboard/a76/customs-brokers.ts
+++ b/frontend/src/lib/api/dashboard/a76/customs-brokers.ts
@@ -1,4 +1,5 @@
 import { api } from '$lib/api';
+import { companyStore } from '$lib/stores/company.svelte'; // <--- NUEVO: Importamos el store para el fallback
 import type { ApiResponse } from '$lib/api';
 
 export interface CustomsBroker {
@@ -26,6 +27,8 @@ export interface CustomsBroker {
 }
 
 export interface CustomsBrokerVU {
+    tenant_id?: string | null;
+    company_id?: string | null;
     certificate_path?: string | null;
     key_path?: string | null;
     access_key?: string | null;
@@ -95,7 +98,9 @@ export interface CustomsBrokerListResponse {
  */
 export const customsBrokersApi = {
     list: (companyId: string, page = 1, pageSize = 50) => {
-        return api.get<CustomsBrokerListResponse>(`/v1/a76/customs-brokers?company_id=${companyId}&page=${page}&page_size=${pageSize}`);
+        return api.get<CustomsBrokerListResponse>(
+            `/v1/a76/customs-brokers?company_id=${companyId}&page=${page}&page_size=${pageSize}`
+        );
     },
 
     get: (brokerKey: string, companyId: string) => {
@@ -111,20 +116,47 @@ export const customsBrokersApi = {
      */
     update: (brokerKey: string, data: CreateCustomsBrokerData) => {
         const companyId = data.company_id;
-        return api.put<CustomsBroker>(`/v1/a76/customs-brokers/${brokerKey}/?company_id=${companyId}`, data);
+        return api.put<CustomsBroker>(
+            `/v1/a76/customs-brokers/${brokerKey}/?company_id=${companyId}`,
+            data
+        );
     },
 
     /**
      * Elimina un agente aduanal
      */
     delete: (brokerKey: string, companyId: string) => {
-        return api.delete<CustomsBroker>(`/v1/a76/customs-brokers/${brokerKey}?company_id=${companyId}`);
+        return api.delete<CustomsBroker>(
+            `/v1/a76/customs-brokers/${brokerKey}?company_id=${companyId}`
+        );
     },
 
-
-
+    /**
+     * Actualiza la información de Ventanilla Única (VU)
+     */
     updateVU: (brokerKey: string, data: CustomsBrokerVU, companyId: string) => {
-        return api.put<CustomsBrokerVU>(`/v1/a76/customs-broker-vu/${brokerKey}?company_id=${companyId}`, data);
+        // LOGICA DE RESCATE:
+        // Si companyId llega nulo/undefined, intentamos obtenerlo del store global
+        let finalCompanyId = companyId;
+
+        if (!finalCompanyId && companyStore.activeCompany?.id) {
+            finalCompanyId = companyStore.activeCompany.id.toString();
+            console.warn("WARN: companyId no fue provisto a updateVU, usando companyStore:", finalCompanyId);
+        }
+
+        // Aseguramos que el payload tenga los IDs
+        const payload = {
+            ...data,
+            company_id: finalCompanyId,
+            tenant_id: finalCompanyId
+        };
+
+        console.log('[DEBUG] Enviando payload VU:', payload);
+
+        return api.put<CustomsBrokerVU>(
+            `/v1/a76/customs-broker-vu/${brokerKey}?company_id=${finalCompanyId}`,
+            payload
+        );
     },
 
     updatePersonnel: (brokerKey: string, line: number, data: CustomsBrokerPersonnel, companyId: string) => {
diff --git a/frontend/src/lib/api/dashboard/a76/items.ts b/frontend/src/lib/api/dashboard/a76/items.ts
index 2b10b734..28e77fcd 100644
--- a/frontend/src/lib/api/dashboard/a76/items.ts
+++ b/frontend/src/lib/api/dashboard/a76/items.ts
@@ -18,7 +18,7 @@ export interface LineCustoms {
     destination_country?: string;
     advalorem?: string;
     advalorem_numeric?: number;
-    advalorem_american?: number; 
+    advalorem_american?: number;
     advalorem_tlcan?: number;
     rate?: string;
     depreciation_rate?: number;
@@ -33,7 +33,7 @@ export interface LineFinancials {
     unit_cost_mxn?: number;
     unit_cost_capture?: number;
     unit_cost_commercial_usd?: number;
-    
+
     // Values
     value_mc?: number;
     value_usd?: number;
@@ -49,7 +49,7 @@ export interface LineQuantities {
     line_item_id?: number;
     quantity?: number;
     unit_of_measure?: string;
-    
+
     // Special quantities
     quantity_temp_export?: number;
     quantity_returned?: number;
@@ -92,7 +92,7 @@ export interface FaLineItem {
     id?: number;
     tenant_id?: number;
     company_id?: number;
-    
+
     // Asset information (SCAF specific)
     asset_number?: string;
     asset_photo?: string;
@@ -101,44 +101,46 @@ export interface FaLineItem {
     return_import_invoice?: string;
     return_import_date?: number;
     movement_type_import?: string;
-    
+
     // Cross-references for import repair
     search_invoice?: string;
     search_line?: number;
-    
+
     // Search type
     search_type?: string;
-    
-	// Subitems
-	is_subitem?: boolean;
-	contains_subitems?: boolean;	
-	subitem_number?: number;
+
+    // Subitems
+    is_subitem?: boolean;
+    contains_subitems?: boolean;
+    subitem_number?: number;
 
     // Special flags
     download?: boolean;
     own_equipment?: boolean;
-    omit_annex31?: boolean;    
-    
+    omit_annex31?: boolean;
+
     // Timestamps
     created_at?: string;
     updated_at?: string;
 }
 
 export interface Item {
-	id?: number;
-    invoice_id: number;        
+    id?: number;
+    invoice_id: number;
     line_number: number;
-    
+
     // Identification
     part_number?: string;
+    part_number_id?: number;
     component_part_number?: string;
+    component_part_number_id?: number;
     class_id?: number;
     identifier?: string;
 
     // Unit of Measure
     unit_of_measure?: number;
     alternate_unit?: number;
-    
+
     // Permits
     permit_number?: string;
     page_line?: string;
@@ -151,29 +153,29 @@ export interface Item {
     includes_subitems?: boolean;
     tax_payment?: boolean;
     is_military_mcia?: boolean;
-    
+
     // Payment
     payment_method?: string;
     igi_amount?: number;
-    
+
     // Additional notes
     wildcard_field?: string;
 
     // Computed fields from class_info relation
     class_code?: string;
     class_description?: string;
-    
+
     // Computed field from unit_of_measure_info relation
-    unit_of_measure_code?: string;        
-	reference_number?: string;
-	order?: string;
-	guide_number?: string;	
-	depreciation_date?: number;
-	rectification?: number;
-	warehouse?: string;
-	location?: string;
-	created_at?: string;
-	updated_at?: string;
+    unit_of_measure_code?: string;
+    reference_number?: string;
+    order?: string;
+    guide_number?: string;
+    depreciation_date?: number;
+    rectification?: number;
+    warehouse?: string;
+    location?: string;
+    created_at?: string;
+    updated_at?: string;
 
     // Nested relations (Singular names to match backend Pydantic models)
     customs?: LineCustoms;
@@ -185,86 +187,86 @@ export interface Item {
 }
 
 export interface ItemListResponse {
-	items: Item[];
-	total: number;
-	skip: number;
-	limit: number;
+    items: Item[];
+    total: number;
+    skip: number;
+    limit: number;
 }
 
 export interface CreateItemData extends Omit<Item, 'id' | 'created_at' | 'updated_at'> {
-	invoice_id: number;
+    invoice_id: number;
 }
 
-export interface UpdateItemData extends Partial<Omit<Item, 'id' | 'invoice_id' | 'created_at' | 'updated_at'>> {}
+export interface UpdateItemData extends Partial<Omit<Item, 'id' | 'invoice_id' | 'created_at' | 'updated_at'>> { }
 
 /**
  * API para Items
  */
 export const itemsApi = {
-	/**
-	 * Lista todos los items con paginación
-	 */
-	list: (companyId: number, skip = 0, limit = 100, invoiceId?: number) => {
-		const params = new URLSearchParams({
-			company_id: companyId.toString(),
-			skip: skip.toString(),
-			limit: limit.toString()
-		});
+    /**
+     * Lista todos los items con paginación
+     */
+    list: (companyId: number, skip = 0, limit = 100, invoiceId?: number) => {
+        const params = new URLSearchParams({
+            company_id: companyId.toString(),
+            skip: skip.toString(),
+            limit: limit.toString()
+        });
 
-		if (invoiceId) {
-			params.append('invoice_id', invoiceId.toString());
-		}
+        if (invoiceId) {
+            params.append('invoice_id', invoiceId.toString());
+        }
 
-		return api.get<ItemListResponse>(`/v1/a76/items/?${params.toString()}`);
-	},
+        return api.get<ItemListResponse>(`/v1/a76/items/?${params.toString()}`);
+    },
 
-	/**
-	 * Lista items por invoice ID
-	 */
-	listByInvoice: (invoiceId: number, companyId: number) => {
-		const params = new URLSearchParams({
-			company_id: companyId.toString()
-		});
-		return api.get<ItemListResponse>(`/v1/a76/items/invoice/${invoiceId}/items/?${params.toString()}`);
-	},
+    /**
+     * Lista items por invoice ID
+     */
+    listByInvoice: (invoiceId: number, companyId: number) => {
+        const params = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.get<ItemListResponse>(`/v1/a76/items/invoice/${invoiceId}/items/?${params.toString()}`);
+    },
 
-	/**
-	 * Obtiene un item por ID
-	 */
-	get: (itemId: number, companyId: number) => {
-		const params = new URLSearchParams({
-			company_id: companyId.toString()
-		});
-		return api.get<Item>(`/v1/a76/items/${itemId}/?${params.toString()}`);
-	},
+    /**
+     * Obtiene un item por ID
+     */
+    get: (itemId: number, companyId: number) => {
+        const params = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.get<Item>(`/v1/a76/items/${itemId}/?${params.toString()}`);
+    },
 
-	/**
-	 * Crea un nuevo item
-	 */
-	create: (companyId: number, data: CreateItemData) => {
-		const params = new URLSearchParams({
-			company_id: companyId.toString()
-		});
-		return api.post<Item>(`/v1/a76/items/?${params.toString()}`, data);
-	},
+    /**
+     * Crea un nuevo item
+     */
+    create: (companyId: number, data: CreateItemData) => {
+        const params = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.post<Item>(`/v1/a76/items/?${params.toString()}`, data);
+    },
 
-	/**
-	 * Actualiza un item existente
-	 */
-	update: (itemId: number, companyId: number, data: UpdateItemData) => {
-		const params = new URLSearchParams({
-			company_id: companyId.toString()
-		});
-		return api.put<Item>(`/v1/a76/items/${itemId}/?${params.toString()}`, data);
-	},
+    /**
+     * Actualiza un item existente
+     */
+    update: (itemId: number, companyId: number, data: UpdateItemData) => {
+        const params = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.put<Item>(`/v1/a76/items/${itemId}/?${params.toString()}`, data);
+    },
 
-	/**
-	 * Elimina un item
-	 */
-	delete: (itemId: number, companyId: number) => {
-		const params = new URLSearchParams({
-			company_id: companyId.toString()
-		});
-		return api.delete(`/v1/a76/items/${itemId}/?${params.toString()}`);
-	}
+    /**
+     * Elimina un item
+     */
+    delete: (itemId: number, companyId: number) => {
+        const params = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.delete(`/v1/a76/items/${itemId}/?${params.toString()}`);
+    }
 };
diff --git a/frontend/src/lib/api/dashboard/a76/pedimentos.ts b/frontend/src/lib/api/dashboard/a76/pedimentos.ts
index 582e913d..8b9d46f6 100644
--- a/frontend/src/lib/api/dashboard/a76/pedimentos.ts
+++ b/frontend/src/lib/api/dashboard/a76/pedimentos.ts
@@ -33,12 +33,19 @@ export interface PedimentoPayments {
 }
 
 export interface PedimentoTransportMeans {
+	id?: number;
 	destination?: number | null;
 	entry_exit?: string | null;
 	arrival?: string | null;
 	departure?: string | null;
 }
 
+export interface PedimentoCustomsOffices {
+	id?: number;
+	dispatch_customs?: string | null;
+	entry_exit_customs?: string | null;
+}
+
 export interface PedimentoValidation {
 	validator?: string | null;
 	validation_ack?: string | null;
@@ -180,6 +187,7 @@ export interface Pedimento {
 	pedimento_incrementables?: PedimentoIncrementables | null;
 	pedimento_decrementables?: PedimentoDecrementables | null;
 	pedimento_indexes?: PedimentoIndexes | null;
+	pedimento_customs_offices?: PedimentoCustomsOffices | null;
 	pedimento_config_additional?: PedimentoConfigAdditional | null;
 	pedimento_config_calculations?: PedimentoConfigCalculations | null;
 	pedimento_config_surcharges?: PedimentoConfigSurcharges | null;
diff --git a/frontend/src/lib/api/dashboard/a76/trailers.ts b/frontend/src/lib/api/dashboard/a76/trailers.ts
index df739414..5d74aa2d 100644
--- a/frontend/src/lib/api/dashboard/a76/trailers.ts
+++ b/frontend/src/lib/api/dashboard/a76/trailers.ts
@@ -2,10 +2,17 @@ import { api, type ApiResponse } from '$lib/api';
 
 export interface Trailer {
     trailer_number: string;
-    plate_number?: string;
+    ace_trailer_number?: string;
     trailer_type_key?: string;
-    is_active: boolean;
-    tenant_id?: string;
+    seal?: string;
+    entity_code?: string;
+    plate_number?: string;
+    state?: string;
+    country?: string;
+    container_key?: string;
+    is_active?: boolean;
+    company_id?: number | string;
+    tenant_id?: number | string;
 }
 
 export interface TrailerResponse {
@@ -16,7 +23,7 @@ export interface TrailerResponse {
 }
 
 class TrailersApi {
-    private baseUrl = '/v1/a76/trailers';
+    private baseUrl = '/v1/a76/transportation/trailers';
 
     async list(
         companyId: string | number,
@@ -35,6 +42,27 @@ class TrailersApi {
         });
         return api.get<Trailer>(`${this.baseUrl}/${id}?${queryParams.toString()}`);
     }
+
+    async create(data: Trailer, companyId: string | number): Promise<ApiResponse<Trailer>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.post<Trailer>(`${this.baseUrl}?${queryParams.toString()}`, data);
+    }
+
+    async update(id: string, data: Trailer, companyId: string | number): Promise<ApiResponse<Trailer>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.put<Trailer>(`${this.baseUrl}/${id}/?${queryParams.toString()}`, data);
+    }
+
+    async delete(id: string, companyId: string | number): Promise<ApiResponse<void>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.delete<void>(`${this.baseUrl}/${id}?${queryParams.toString()}`);
+    }
 }
 
 export const trailersApi = new TrailersApi();
diff --git a/frontend/src/lib/api/dashboard/a76/transporters.ts b/frontend/src/lib/api/dashboard/a76/transporters.ts
index 6383828b..70ecbcdd 100644
--- a/frontend/src/lib/api/dashboard/a76/transporters.ts
+++ b/frontend/src/lib/api/dashboard/a76/transporters.ts
@@ -2,10 +2,26 @@ import { api, type ApiResponse } from '$lib/api';
 
 export interface Transporter {
     transporter_key: string;
-    name: string;
+    name?: string;
+    short_name?: string;
+    responsible?: string;
     rfc?: string;
-    is_active: boolean;
-    tenant_id?: string;
+    streets?: string;
+    postal_code?: string;
+    city?: string;
+    state?: string;
+    country?: string;
+    loader_code?: string;
+    caat_code?: string;
+    transport_code?: string;
+    transport_interface_type?: string;
+    ftp_server?: string;
+    ftp_user?: string;
+    ftp_password?: string;
+    ftp_directory?: string;
+    filler_code?: string;
+    company_id?: number | string;
+    tenant_id?: number | string;
 }
 
 export interface TransporterResponse {
@@ -35,6 +51,27 @@ class TransportersApi {
         });
         return api.get<Transporter>(`${this.baseUrl}/${id}?${queryParams.toString()}`);
     }
+
+    async create(data: Transporter, companyId: string | number): Promise<ApiResponse<Transporter>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.post<Transporter>(`${this.baseUrl}?${queryParams.toString()}`, data);
+    }
+
+    async update(id: string, data: Transporter, companyId: string | number): Promise<ApiResponse<Transporter>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.put<Transporter>(`${this.baseUrl}/${id}/?${queryParams.toString()}`, data);
+    }
+
+    async delete(id: string, companyId: string | number): Promise<ApiResponse<void>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.delete<void>(`${this.baseUrl}/${id}?${queryParams.toString()}`);
+    }
 }
 
 export const transportersApi = new TransportersApi();
diff --git a/frontend/src/lib/api/dashboard/a76/vehicles.ts b/frontend/src/lib/api/dashboard/a76/vehicles.ts
index a0c864e4..3fd7d67a 100644
--- a/frontend/src/lib/api/dashboard/a76/vehicles.ts
+++ b/frontend/src/lib/api/dashboard/a76/vehicles.ts
@@ -1,32 +1,84 @@
-import { api } from '$lib/api';
+import { api, type ApiResponse } from '$lib/api';
 
 export interface Vehicle {
     vehicle_key: string;
-    brand?: string;
-    plate_number?: string;
-    description?: string;
+    ace_vehicle_key?: string;
+    transporter_key?: string;
+    transport_identifier?: string;
     transport_type?: string;
+    entity_code?: string;
+    transponder_number?: string;
+    dot_number?: string;
+    plate_number?: string;
+    city?: string;
+    state?: string;
+    country?: string;
+    seal?: string;
+    insurance_company_name?: string;
+    insurance_number?: string;
+    insurance_amount?: number;
+    insurance_date?: number;
+    box_number?: string;
+    brand?: string;
     year?: string;
+    series?: string;
+    description?: string;
+    engine_number?: string;
+    sct_permission?: string;
+    color?: string;
+    container_key?: string;
+    company_id?: number | string;
+    tenant_id?: number | string;
 }
 
-export interface VehicleListResponse {
+export interface VehicleResponse {
     items: Vehicle[];
     total: number;
+    page: number;
+    page_size: number;
 }
 
-/**
- * API para Vehículos
- */
-export const vehiclesApi = {
-    list: (companyId: string, page = 1, pageSize = 50) => {
-        return api.get<VehicleListResponse>(
-            `/v1/a76/transportation/vehicles?company_id=${companyId}&page=${page}&page_size=${pageSize}`
-        );
-    },
+class VehiclesApi {
+    private baseUrl = '/v1/a76/transportation/vehicles';
 
-    get: (vehicleKey: string, companyId: string) => {
-        return api.get<Vehicle>(
-            `/v1/a76/transportation/vehicles/${vehicleKey}?company_id=${companyId}`
-        );
+    async list(
+        companyId: string | number,
+        params?: Record<string, any>
+    ): Promise<ApiResponse<VehicleResponse>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString(),
+            ...params
+        });
+        return api.get<VehicleResponse>(`${this.baseUrl}?${queryParams.toString()}`);
     }
-};
+
+    async get(id: string, companyId: string | number): Promise<ApiResponse<Vehicle>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.get<Vehicle>(`${this.baseUrl}/${id}?${queryParams.toString()}`);
+    }
+
+    async create(data: Vehicle, companyId: string | number): Promise<ApiResponse<Vehicle>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.post<Vehicle>(`${this.baseUrl}?${queryParams.toString()}`, data);
+    }
+
+    async update(id: string, data: Vehicle, companyId: string | number): Promise<ApiResponse<Vehicle>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.put<Vehicle>(`${this.baseUrl}/${id}/?${queryParams.toString()}`, data);
+    }
+
+    async delete(id: string, companyId: string | number): Promise<ApiResponse<void>> {
+        const queryParams = new URLSearchParams({
+            company_id: companyId.toString()
+        });
+        return api.delete<void>(`${this.baseUrl}/${id}?${queryParams.toString()}`);
+    }
+}
+
+export const vehiclesApi = new VehiclesApi();
diff --git a/frontend/src/lib/api/help.ts b/frontend/src/lib/api/help.ts
new file mode 100644
index 00000000..70693704
--- /dev/null
+++ b/frontend/src/lib/api/help.ts
@@ -0,0 +1,125 @@
+import { getToken, authStore } from '$lib/auth';
+import { get } from 'svelte/store';
+
+const api_url = import.meta.env.VITE_API_URL;
+const BASE_URL = `${api_url.endsWith('/') ? api_url : api_url + '/'}v1/core/help-center`;
+
+function getAuthToken(): string | null {
+    // 1. First try getToken() which checks Keycloak and localStorage
+    let token = getToken();
+
+    // 2. If somehow empty, explicitly check authStore value
+    if (!token) {
+        const auth = get(authStore);
+        token = auth.token;
+    }
+
+    return token;
+}
+
+function getHeaders() {
+    const token = getAuthToken();
+    return {
+        'Content-Type': 'application/json',
+        ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+    };
+}
+
+export interface HelpArticle {
+    uuid: string;
+    slug: string;
+    title: string;
+    content: string;
+    updated_at: string;
+    last_editor: string;
+    category?: string;
+    order?: number;
+    content_type: string;
+    file_url?: string;
+    file_size?: number;
+    mime_type?: string;
+}
+
+export const helpApi = {
+    async listArticles(): Promise<HelpArticle[]> {
+        const response = await fetch(`${BASE_URL}/articles/`, { headers: getHeaders() });
+        if (!response.ok) throw new Error('Failed to fetch articles');
+        return response.json();
+    },
+
+    async getArticle(uuid: string): Promise<HelpArticle> {
+        const response = await fetch(`${BASE_URL}/articles/${uuid}/`, { headers: getHeaders() });
+        if (!response.ok) throw new Error('Failed to fetch article');
+        return response.json();
+    },
+
+    async updateArticle(uuid: string, data: Partial<HelpArticle>): Promise<HelpArticle> {
+        const response = await fetch(`${BASE_URL}/articles/${uuid}/`, {
+            method: 'PATCH',
+            headers: getHeaders(),
+            body: JSON.stringify(data)
+        });
+        if (response.status === 403) throw new Error('No tienes permisos para editar artículos (Requiere rol Admin)');
+        if (!response.ok) throw new Error('Error al guardar cambios');
+        return response.json();
+    },
+
+    async createArticle(data: Partial<HelpArticle>): Promise<HelpArticle> {
+        const response = await fetch(`${BASE_URL}/articles/`, {
+            method: 'POST',
+            headers: getHeaders(),
+            body: JSON.stringify(data)
+        });
+        if (response.status === 403) throw new Error('No tienes permisos para crear artículos (Requiere rol Admin)');
+        if (!response.ok) throw new Error('Error al crear el artículo');
+        return response.json();
+    },
+
+    async deleteArticle(uuid: string): Promise<void> {
+        const response = await fetch(`${BASE_URL}/articles/${uuid}/`, {
+            method: 'DELETE',
+            headers: getHeaders()
+        });
+        if (response.status === 403) throw new Error('No tienes permisos para eliminar (Requiere rol Admin)');
+        if (!response.ok) throw new Error('Error al eliminar');
+    },
+
+    async triggerSync(): Promise<void> {
+        // Opcional: endpoint para forzar sync desde UI si es necesario
+    },
+
+    async uploadImage(file: File): Promise<{ url: string }> {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const token = getAuthToken();
+        const response = await fetch(`${BASE_URL}/upload-image/`, {
+            method: 'POST',
+            // No Content-Type header for FormData, browser sets it with boundary
+            headers: {
+                ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+            },
+            body: formData
+        });
+        if (response.status === 403) throw new Error('No tienes permisos para subir imágenes (Requiere rol Admin)');
+        if (!response.ok) throw new Error('Error al subir imagen');
+        return response.json();
+    },
+
+    async uploadAsset(file: File): Promise<{ url: string, filename: string, size: number, mime_type: string }> {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const token = getAuthToken();
+        const response = await fetch(`${BASE_URL}/upload-asset/`, {
+            method: 'POST',
+            headers: {
+                ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+            },
+            body: formData
+        });
+        if (response.status === 403) throw new Error('No tienes permisos para subir archivos (Requiere rol Admin)');
+        if (!response.ok) throw new Error('Error al subir archivo');
+        return response.json();
+    }
+};
diff --git a/frontend/src/lib/components/dashboard/exchange_rate/create-edit-dialog.svelte b/frontend/src/lib/components/dashboard/exchange_rate/create-edit-dialog.svelte
index ded462ce..f19312c0 100644
--- a/frontend/src/lib/components/dashboard/exchange_rate/create-edit-dialog.svelte
+++ b/frontend/src/lib/components/dashboard/exchange_rate/create-edit-dialog.svelte
@@ -166,7 +166,7 @@
 		<Dialog.Overlay class="fixed inset-0 z-[9999] {overlayClass}" />
 
 		<Dialog.Content
-			class="fixed left-[50%] top-[50%] z-[10000] w-full max-w-[480px] translate-x-[-50%] translate-y-[-50%] overflow-hidden border-0 bg-transparent p-0 shadow-2xl sm:rounded-xl"
+			class="fixed top-[50%] left-[50%] z-[10000] w-full max-w-[480px] translate-x-[-50%] translate-y-[-50%] overflow-hidden border-0 bg-transparent p-0 shadow-2xl sm:rounded-xl"
 		>
 			<div
 				class="flex h-full flex-col overflow-hidden rounded-xl border border-border bg-background"
@@ -181,7 +181,7 @@
 							<AlertCircle class="text-amber-600 dark:text-amber-400" size={24} />
 						</div>
 						<div class="space-y-1">
-							<h3 class="text-lg font-semibold leading-tight text-amber-900 dark:text-amber-100">
+							<h3 class="text-lg leading-tight font-semibold text-amber-900 dark:text-amber-100">
 								{title}
 							</h3>
 							<p class="text-sm leading-relaxed text-amber-800/80 dark:text-amber-200/80">
@@ -232,7 +232,7 @@
 								/>
 								{#if isMissingRateContext}
 									<div
-										class="absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-600"
+										class="absolute top-1/2 right-3 -translate-y-1/2 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-600"
 									>
 										Requerida
 									</div>
@@ -241,28 +241,12 @@
 						</div>
 
 						<div class="grid gap-2">
-							<div class="flex items-center justify-between">
-								<Label for="value" class="ml-1 text-sm font-medium text-muted-foreground"
-									>Tipo de Cambio (MXN/USD)</Label
-								>
-								<Button
-									type="button"
-									variant="ghost"
-									size="sm"
-									class="-mr-2 h-6 px-2 text-xs text-primary hover:text-primary/80"
-									disabled={scraping || loading || !formData.date}
-									onclick={() => fetchFromDof(formData.date)}
-								>
-									{#if scraping}
-										<span class="mr-1.5 animate-spin">⟳</span> Consultando...
-									{:else}
-										<CloudDownload size={14} class="mr-1.5" /> Consultar DOF
-									{/if}
-								</Button>
-							</div>
+							<Label for="value" class="ml-1 text-sm font-medium text-muted-foreground"
+								>Tipo de Cambio (MXN/USD)</Label
+							>
 							<div class="group relative">
 								<div
-									class="absolute left-3 top-1/2 -translate-y-1/2 font-semibold text-muted-foreground"
+									class="absolute top-1/2 left-3 -translate-y-1/2 font-semibold text-muted-foreground"
 								>
 									$
 								</div>
@@ -270,6 +254,7 @@
 									id="value"
 									type="number"
 									step="0.0001"
+									lang="en"
 									bind:value={formData.value}
 									disabled={loading}
 									required
@@ -278,18 +263,30 @@
 									autofocus
 								/>
 							</div>
-							<p class="px-1 text-right text-[11px] text-muted-foreground">Ej. 24.1234</p>
+							<div class="mt-1 flex items-start justify-between">
+								<Button
+									type="button"
+									variant="secondary"
+									size="sm"
+									class="h-8 font-medium shadow-sm transition-all"
+									disabled={scraping || loading || !formData.date}
+									onclick={() => fetchFromDof(formData.date)}
+								>
+									{#if scraping}
+										<span class="mr-2 animate-spin">⟳</span> Consultando...
+									{:else}
+										<CloudDownload size={15} class="mr-2" /> Consultar DOF
+									{/if}
+								</Button>
+								<p class="mt-2 px-1 text-right text-[11px] text-muted-foreground">Ej. 24.1234</p>
+							</div>
 						</div>
 					</div>
 
-					<Dialog.Footer class="grid grid-cols-4 gap-2 pt-2">
-						<Button type="button" variant="outline" class="w-full text-xs" disabled>
-							Cargar TC
-						</Button>
-						<Button type="button" variant="outline" class="w-full text-xs" disabled>Ayuda</Button>
+					<Dialog.Footer class="mt-4 grid grid-cols-2 gap-3 pt-2">
 						<Button
 							type="button"
-							variant="ghost"
+							variant="outline"
 							onclick={() => (open = false)}
 							disabled={loading}
 							class="w-full hover:bg-muted/50"
diff --git a/frontend/src/lib/components/dashboard/invoices/create-edit-dialog.svelte b/frontend/src/lib/components/dashboard/invoices/create-edit-dialog.svelte
index 546ccfa4..c6a4e708 100644
--- a/frontend/src/lib/components/dashboard/invoices/create-edit-dialog.svelte
+++ b/frontend/src/lib/components/dashboard/invoices/create-edit-dialog.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
-	import { Button } from "$lib/components/ui/button";
-	import * as Dialog from "$lib/components/ui/dialog";
-	import { Input } from "$lib/components/ui/input";
-	import { Label } from "$lib/components/ui/label";
-	import * as Select from "$lib/components/ui/select";
-	import { invoicesApi, type Invoice, type CreateInvoiceData, type UpdateInvoiceData } from "$lib/api/dashboard/a76/invoices";
-	import { getExchangeRates } from "$lib/api/dashboard/a76/general_catalogs/exchange-rate";
-	import { companyStore } from "$lib/stores/company.svelte";
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import * as Select from '$lib/components/ui/select';
+	import {
+		invoicesApi,
+		type Invoice,
+		type CreateInvoiceData,
+		type UpdateInvoiceData
+	} from '$lib/api/dashboard/a76/invoices';
+	import { getExchangeRates } from '$lib/api/dashboard/a76/general_catalogs/exchange-rate';
+	import { companyStore } from '$lib/stores/company.svelte';
 	import { LoaderCircle } from 'lucide-svelte';
-	import * as Tabs from "$lib/components/ui/tabs";
-	import ExchangeRateDialog from "$lib/components/dashboard/exchange_rate/create-edit-dialog.svelte";
+	import * as Tabs from '$lib/components/ui/tabs';
+	import ExchangeRateDialog from '$lib/components/dashboard/exchange_rate/create-edit-dialog.svelte';
 
 	let {
 		open = $bindable(false),
@@ -27,34 +32,34 @@
 
 	let formData = $state({
 		// Header fields
-		operation_type: "imp" as "imp" | "exp",
-		invoice_type: "",
-		invoice_number: "",
-		project_number: "",
-		purchase_order: "",
+		operation_type: 'imp' as 'imp' | 'exp',
+		invoice_type: '',
+		invoice_number: '',
+		project_number: '',
+		purchase_order: '',
 		related_doc_id: null as number | null,
-		invoice_date: "",
-		traffic_light_status: "",
-		observation_es: "",
-		observation_en: "",
-		comments_status: "",
-		cfdi_uuid: "",
-		path_pdf: "",
-		path_xml: "",
+		invoice_date: '',
+		traffic_light_status: '',
+		observation_es: '',
+		observation_en: '',
+		comments_status: '',
+		cfdi_uuid: '',
+		path_pdf: '',
+		path_xml: '',
 		// Compliance MX fields
 		remesa: null as number | null,
-		aduana: "",
-		customs_broker_id: "",
-		provider_id: "",
-		sold_to_id: "",
-		shipped_to_id: "",
-		shipped_by_id: "",
+		aduana: '',
+		customs_broker_id: '',
+		provider_id: '',
+		sold_to_id: '',
+		shipped_to_id: '',
+		shipped_by_id: '',
 		is_mixed: false,
-		waste_type: "",
+		waste_type: '',
 		appendix_17: null as number | null,
-		edocument: "",
+		edocument: '',
 		// Financials fields
-		currency: "MXN",
+		currency: 'MXN',
 		exchange_rate: null as number | null,
 		value_mn: null as number | null,
 		value_me: null as number | null,
@@ -73,38 +78,38 @@
 	let error = $state<string | null>(null);
 
 	let showExchangeRateDialog = $state(false);
-	let missingExchangeRateDate = $state("");
+	let missingExchangeRateDate = $state('');
 
 	// Actualizar formData cuando item cambia
 	$effect(() => {
 		if (item) {
 			formData = {
-				operation_type: item.operation_type || "imp",
-				invoice_type: item.invoice_type || "",
-				invoice_number: item.invoice_number || "",
-				project_number: item.project_number || "",
-				purchase_order: item.purchase_order || "",
+				operation_type: item.operation_type || 'imp',
+				invoice_type: item.invoice_type || '',
+				invoice_number: item.invoice_number || '',
+				project_number: item.project_number || '',
+				purchase_order: item.purchase_order || '',
 				related_doc_id: item.related_doc_id || null,
-				invoice_date: item.invoice_date || "",
-				traffic_light_status: item.traffic_light_status || "",
-				observation_es: item.observation_es || "",
-				observation_en: item.observation_en || "",
-				comments_status: item.comments_status || "",
-				cfdi_uuid: item.cfdi_uuid || "",
-				path_pdf: item.path_pdf || "",
-				path_xml: item.path_xml || "",
+				invoice_date: item.invoice_date || '',
+				traffic_light_status: item.traffic_light_status || '',
+				observation_es: item.observation_es || '',
+				observation_en: item.observation_en || '',
+				comments_status: item.comments_status || '',
+				cfdi_uuid: item.cfdi_uuid || '',
+				path_pdf: item.path_pdf || '',
+				path_xml: item.path_xml || '',
 				remesa: item.compliance_mx?.remesa || null,
-				aduana: item.compliance_mx?.aduana || "",
-				customs_broker_id: item.compliance_mx?.customs_broker_id?.toString() || "",
-				provider_id: item.compliance_mx?.provider_id?.toString() || "",
-				sold_to_id: item.compliance_mx?.sold_to_id?.toString() || "",
-				shipped_to_id: item.compliance_mx?.shipped_to_id?.toString() || "",
-				shipped_by_id: item.compliance_mx?.shipped_by_id?.toString() || "",
+				aduana: item.compliance_mx?.aduana || '',
+				customs_broker_id: item.compliance_mx?.customs_broker_id?.toString() || '',
+				provider_id: item.compliance_mx?.provider_id?.toString() || '',
+				sold_to_id: item.compliance_mx?.sold_to_id?.toString() || '',
+				shipped_to_id: item.compliance_mx?.shipped_to_id?.toString() || '',
+				shipped_by_id: item.compliance_mx?.shipped_by_id?.toString() || '',
 				is_mixed: item.compliance_mx?.is_mixed || false,
-				waste_type: item.compliance_mx?.waste_type || "",
+				waste_type: item.compliance_mx?.waste_type || '',
 				appendix_17: item.compliance_mx?.appendix_17 || null,
-				edocument: item.compliance_mx?.edocument || "",
-				currency: item.financials?.currency || "MXN",
+				edocument: item.compliance_mx?.edocument || '',
+				currency: item.financials?.currency || 'MXN',
 				exchange_rate: item.financials?.exchange_rate || null,
 				value_mn: item.financials?.value_mn || null,
 				value_me: item.financials?.value_me || null,
@@ -127,32 +132,32 @@
 
 	function resetForm() {
 		formData = {
-			operation_type: defaultOperationType || "imp",
-			invoice_type: defaultInvoiceType || "",
-			invoice_number: "",
-			project_number: "",
-			purchase_order: "",
+			operation_type: defaultOperationType || 'imp',
+			invoice_type: defaultInvoiceType || '',
+			invoice_number: '',
+			project_number: '',
+			purchase_order: '',
 			related_doc_id: null,
-			invoice_date: "",
-			traffic_light_status: "",
-			observation_es: "",
-			observation_en: "",
-			comments_status: "",
-			cfdi_uuid: "",
-			path_pdf: "",
-			path_xml: "",
+			invoice_date: '',
+			traffic_light_status: '',
+			observation_es: '',
+			observation_en: '',
+			comments_status: '',
+			cfdi_uuid: '',
+			path_pdf: '',
+			path_xml: '',
 			remesa: null,
-			aduana: "",
-			customs_broker_id: "",
-			provider_id: "",
-			sold_to_id: "",
-			shipped_to_id: "",
-			shipped_by_id: "",
+			aduana: '',
+			customs_broker_id: '',
+			provider_id: '',
+			sold_to_id: '',
+			shipped_to_id: '',
+			shipped_by_id: '',
 			is_mixed: false,
-			waste_type: "",
+			waste_type: '',
 			appendix_17: null,
-			edocument: "",
-			currency: "MXN",
+			edocument: '',
+			currency: 'MXN',
 			exchange_rate: null,
 			value_mn: null,
 			value_me: null,
@@ -170,9 +175,9 @@
 
 	async function handleSubmit(e: Event) {
 		e.preventDefault();
-		
+
 		if (!companyStore.activeCompany) {
-			error = "No hay compañía seleccionada";
+			error = 'No hay compañía seleccionada';
 			return;
 		}
 
@@ -180,14 +185,14 @@
 		error = null;
 
 		try {
-            // Verificar tipo de cambio antes de guardar
-            if (formData.invoice_date) {
-                const rateExists = await checkExchangeRate(formData.invoice_date);
-                if (!rateExists) {
-                    loading = false;
-                    return;
-                }
-            }
+			// Verificar tipo de cambio antes de guardar
+			if (formData.invoice_date) {
+				const rateExists = await checkExchangeRate(formData.invoice_date);
+				if (!rateExists) {
+					loading = false;
+					return;
+				}
+			}
 
 			let response;
 			if (isEditing && item) {
@@ -210,7 +215,9 @@
 					compliance_mx: {
 						remesa: formData.remesa,
 						aduana: formData.aduana || null,
-						customs_broker_id: formData.customs_broker_id ? parseInt(formData.customs_broker_id) : null,
+						customs_broker_id: formData.customs_broker_id
+							? parseInt(formData.customs_broker_id)
+							: null,
 						provider_id: formData.provider_id ? parseInt(formData.provider_id) : null,
 						sold_to_id: formData.sold_to_id ? parseInt(formData.sold_to_id) : null,
 						shipped_to_id: formData.shipped_to_id ? parseInt(formData.shipped_to_id) : null,
@@ -238,9 +245,9 @@
 				};
 				response = await invoicesApi.update(item.id, companyStore.activeCompany.id, payload);
 			} else {
-				const payload: CreateInvoiceData = {					
-					system: "a76",
-					document_type: "invoice",					
+				const payload: CreateInvoiceData = {
+					system: 'a76',
+					document_type: 'invoice',
 					operation_type: formData.operation_type,
 					invoice_type: formData.invoice_type,
 					invoice_number: formData.invoice_number,
@@ -258,7 +265,9 @@
 					compliance_mx: {
 						remesa: formData.remesa,
 						aduana: formData.aduana || null,
-						customs_broker_id: formData.customs_broker_id ? parseInt(formData.customs_broker_id) : null,
+						customs_broker_id: formData.customs_broker_id
+							? parseInt(formData.customs_broker_id)
+							: null,
 						provider_id: formData.provider_id ? parseInt(formData.provider_id) : null,
 						sold_to_id: formData.sold_to_id ? parseInt(formData.sold_to_id) : null,
 						shipped_to_id: formData.shipped_to_id ? parseInt(formData.shipped_to_id) : null,
@@ -294,21 +303,23 @@
 						window.location.reload();
 					}, 1500);
 				} else {
-                    // Convertir el error a string para buscar mensajes específicos (maneja objetos/arrays de DRF)
-                    const errorStr = typeof response.error === 'string' 
-                        ? response.error 
-                        : JSON.stringify(response.error);
-                        
-                    if (errorStr.includes('No existe un Tipo de Cambio registrado') || errorStr.includes('financials.exchange_rate')) {
-                        // Interceptar error de tipo de cambio                        
-                        error = null;
-                        
-                        const dateMatch = errorStr.match(/(\d{4}-\d{2}-\d{2})/);
-                        missingExchangeRateDate = dateMatch ? dateMatch[0] : (formData.invoice_date || "");
-                        
-                        showExchangeRateDialog = true;
-                        return;
-                    }
+					// Convertir el error a string para buscar mensajes específicos (maneja objetos/arrays de DRF)
+					const errorStr =
+						typeof response.error === 'string' ? response.error : JSON.stringify(response.error);
+
+					if (
+						errorStr.includes('No existe un Tipo de Cambio registrado') ||
+						errorStr.includes('financials.exchange_rate')
+					) {
+						// Interceptar error de tipo de cambio
+						error = null;
+
+						const dateMatch = errorStr.match(/(\d{4}-\d{2}-\d{2})/);
+						missingExchangeRateDate = dateMatch ? dateMatch[0] : formData.invoice_date || '';
+
+						showExchangeRateDialog = true;
+						return;
+					}
 
 					error = response.error;
 				}
@@ -316,13 +327,13 @@
 			}
 
 			// Check exchange rate BEFORE calling API to avoid 400 error
-            if (formData.invoice_date) {
-                const rateExists = await checkExchangeRate(formData.invoice_date);
-                if (!rateExists) {
-                    loading = false;
-                    return;
-                }
-            }
+			if (formData.invoice_date) {
+				const rateExists = await checkExchangeRate(formData.invoice_date);
+				if (!rateExists) {
+					loading = false;
+					return;
+				}
+			}
 
 			// Éxito
 			open = false;
@@ -330,8 +341,8 @@
 				onSuccess();
 			}
 		} catch (e) {
-			error = e instanceof Error ? e.message : "Error al guardar";
-			console.error("Error saving:", e);
+			error = e instanceof Error ? e.message : 'Error al guardar';
+			console.error('Error saving:', e);
 		} finally {
 			loading = false;
 		}
@@ -345,11 +356,11 @@
 				date: date,
 				page_size: 1
 			});
-            
+
 			// api.get returns { data: ..., status: ... } and types now reflect that
 			const items = response.data?.items || [];
-			
-            // Verificar estrictamente que haya items
+
+			// Verificar estrictamente que haya items
 			if (items.length === 0) {
 				missingExchangeRateDate = date;
 				showExchangeRateDialog = true;
@@ -360,7 +371,7 @@
 			console.error('Error checking exchange rate:', error);
 			missingExchangeRateDate = date;
 			showExchangeRateDialog = true;
-			return false; 
+			return false;
 		}
 	}
 
@@ -374,15 +385,13 @@
 </script>
 
 <Dialog.Root {open} onOpenChange={handleOpenChange}>
-    <Dialog.Content class="sm:max-w-full max-h-[90vh] overflow-y-auto">
+	<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-full">
 		<Dialog.Header>
 			<Dialog.Title>
-				{isEditing ? "Editar Factura" : "Nueva Factura"}
+				{isEditing ? 'Editar Factura' : 'Nueva Factura'}
 			</Dialog.Title>
 			<Dialog.Description>
-				{isEditing 
-					? "Modifica los datos de la factura"
-					: "Ingresa los datos de la nueva factura"}
+				{isEditing ? 'Modifica los datos de la factura' : 'Ingresa los datos de la nueva factura'}
 			</Dialog.Description>
 		</Dialog.Header>
 
@@ -397,24 +406,29 @@
 				<!-- General Tab -->
 				<Tabs.Content value="general" class="space-y-4">
 					<div class="grid grid-cols-2 gap-4">
-					<div class="space-y-2">
-						<Label for="operation_type">Tipo de Operación *</Label>
-						<Select.Root
-							type="single"
-							value={formData.operation_type}
-							onValueChange={(v: string) => {
-								if (v) formData.operation_type = v as "imp" | "exp";
-							}}
-						>
-							<Select.Trigger>
-								{formData.operation_type === 'imp' ? 'Importación' : formData.operation_type === 'exp' ? 'Exportación' : 'Seleccionar tipo'}
-							</Select.Trigger>
-							<Select.Content>
-								<Select.Item value="imp">Importación</Select.Item>
-								<Select.Item value="exp">Exportación</Select.Item>
-							</Select.Content>
-						</Select.Root>
-					</div>						<div class="space-y-2">
+						<div class="space-y-2">
+							<Label for="operation_type">Tipo de Operación *</Label>
+							<Select.Root
+								type="single"
+								value={formData.operation_type}
+								onValueChange={(v: string) => {
+									if (v) formData.operation_type = v as 'imp' | 'exp';
+								}}
+							>
+								<Select.Trigger>
+									{formData.operation_type === 'imp'
+										? 'Importación'
+										: formData.operation_type === 'exp'
+											? 'Exportación'
+											: 'Seleccionar tipo'}
+								</Select.Trigger>
+								<Select.Content>
+									<Select.Item value="imp">Importación</Select.Item>
+									<Select.Item value="exp">Exportación</Select.Item>
+								</Select.Content>
+							</Select.Root>
+						</div>
+						<div class="space-y-2">
 							<Label for="invoice_number">Número de Factura</Label>
 							<Input
 								id="invoice_number"
@@ -452,11 +466,7 @@
 
 						<div class="space-y-2">
 							<Label for="invoice_date">Fecha de Factura</Label>
-							<Input
-								id="invoice_date"
-								type="date"
-								bind:value={formData.invoice_date}
-							/>
+							<Input id="invoice_date" type="date" bind:value={formData.invoice_date} />
 						</div>
 
 						<div class="space-y-2">
@@ -470,11 +480,7 @@
 
 						<div class="space-y-2">
 							<Label for="cfdi_uuid">CFDI UUID</Label>
-							<Input
-								id="cfdi_uuid"
-								bind:value={formData.cfdi_uuid}
-								placeholder="UUID del CFDI"
-							/>
+							<Input id="cfdi_uuid" bind:value={formData.cfdi_uuid} placeholder="UUID del CFDI" />
 						</div>
 					</div>
 
@@ -514,11 +520,7 @@
 
 						<div class="space-y-2">
 							<Label for="aduana">Aduana</Label>
-							<Input
-								id="aduana"
-								bind:value={formData.aduana}
-								placeholder="Código de aduana"
-							/>
+							<Input id="aduana" bind:value={formData.aduana} placeholder="Código de aduana" />
 						</div>
 
 						<div class="space-y-2">
@@ -548,7 +550,7 @@
 							/>
 						</div>
 
-						<div class="space-y-2 flex items-center gap-2 pt-8">
+						<div class="flex items-center gap-2 space-y-2 pt-8">
 							<input
 								id="is_mixed"
 								type="checkbox"
@@ -565,11 +567,7 @@
 					<div class="grid grid-cols-2 gap-4">
 						<div class="space-y-2">
 							<Label for="currency">Moneda</Label>
-							<Input
-								id="currency"
-								bind:value={formData.currency}
-								placeholder="MXN, USD, etc."
-							/>
+							<Input id="currency" bind:value={formData.currency} placeholder="MXN, USD, etc." />
 						</div>
 
 						<div class="space-y-2">
@@ -696,34 +694,31 @@
 			</Tabs.Root>
 
 			{#if error}
-				<div class="p-3 text-sm text-destructive bg-destructive/10 rounded-md">
+				<div class="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
 					{error}
 				</div>
 			{/if}
 
 			<Dialog.Footer>
-				<Button
-					type="button"
-					variant="outline"
-					onclick={() => (open = false)}
-					disabled={loading}
-				>
+				<Button type="button" variant="outline" onclick={() => (open = false)} disabled={loading}>
 					Cancelar
 				</Button>
 				<Button type="submit" disabled={loading}>
 					{#if loading}
 						<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
 					{/if}
-					{isEditing ? "Actualizar" : "Crear"}
+					{isEditing ? 'Actualizar' : 'Crear'}
 				</Button>
 			</Dialog.Footer>
 		</form>
 	</Dialog.Content>
 </Dialog.Root>
 
-<ExchangeRateDialog 
-	bind:open={showExchangeRateDialog} 
+<ExchangeRateDialog
+	bind:open={showExchangeRateDialog}
 	initialDate={missingExchangeRateDate}
 	overlayClass="bg-black/20"
-	onSuccess={() => {/* Optional: maybe refresh something or just let user continue */}} 
+	onSuccess={() => {
+		/* Optional: maybe refresh something or just let user continue */
+	}}
 />
diff --git a/frontend/src/lib/components/dashboard/invoices/edit/items/items-tab-form.svelte b/frontend/src/lib/components/dashboard/invoices/edit/items/items-tab-form.svelte
index 372198ff..8bc9b75a 100644
--- a/frontend/src/lib/components/dashboard/invoices/edit/items/items-tab-form.svelte
+++ b/frontend/src/lib/components/dashboard/invoices/edit/items/items-tab-form.svelte
@@ -20,7 +20,7 @@
 	} from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import type { Invoice } from '$lib/api/dashboard/a76/invoices';
-	import { itemsApi, type Item } from '$lib/api/dashboard/a76/items';
+	import { itemsApi, type Item as InvoiceItem } from '$lib/api/dashboard/a76/items';
 	import { companyStore } from '$lib/stores/company.svelte';
 	import ItemSheetFa from './fa/item-sheet-fa.svelte';
 	import ItemSheetInv from './inv/item-sheet-inv.svelte';
@@ -43,7 +43,7 @@
 	} = $props();
 
 	// 1. Core State
-	let items = $state<Item[]>([]);
+	let items = $state<InvoiceItem[]>([]);
 	let displayedItems = $state<any[]>([]);
 	let imported = $state(0);
 	let net_weight = $state(0);
@@ -129,9 +129,9 @@
 	let showItemSheet = $state(false);
 	let isEditMode = $state(false);
 	let showDeleteDialog = $state(false);
-	let selectedItem = $state<Item | null>(null);
-	let originalItemData = $state<Partial<Item> | null>(null);
-	let editingItem = $state<Partial<Item>>({
+	let selectedItem = $state<InvoiceItem | null>(null);
+	let originalItemData = $state<Partial<InvoiceItem> | null>(null);
+	let editingItem = $state<Partial<InvoiceItem>>({
 		invoice_id: undefined,
 		reference_number: '',
 		order: '',
@@ -400,7 +400,7 @@
 		return cleanLineData({ ...rest });
 	}
 
-	function cloneItemForPreset(item: Item) {
+	function cloneItemForPreset(item: InvoiceItem) {
 		const { id, tenant_id, company_id, created_at, updated_at, temp_id, ...rest } = item as any;
 		return {
 			...sanitizeLineForPreset(rest),
@@ -502,7 +502,7 @@
 		isSavingPreset = true;
 		try {
 			// We group everything as items for the template
-			const lines = builderItems.map((item: Item, idx: number) => {
+			const lines = builderItems.map((item: InvoiceItem, idx: number) => {
 				return {
 					...cleanLineData(item),
 					line_number: item.line_number || idx + 1, // Ensure line_number is present
@@ -552,7 +552,7 @@
 	}
 
 	// Enrich item with descriptive data for display
-	async function enrichItemData(item: Partial<Item>) {
+	async function enrichItemData(item: Partial<InvoiceItem>) {
 		if (!item || !activeCompanyId) return;
 
 		// Load class data
@@ -697,7 +697,7 @@
 	}
 
 	// Normalize numeric values from strings to numbers
-	function normalizeItemData(item: Partial<Item>): Partial<Item> {
+	function normalizeItemData(item: Partial<InvoiceItem>): Partial<InvoiceItem> {
 		if (item) {
 			const normalizedItem = { ...item };
 
diff --git a/frontend/src/lib/components/dashboard/pedimentos/edit/contributions-tab-form.svelte b/frontend/src/lib/components/dashboard/pedimentos/edit/contributions-tab-form.svelte
index d14f69f6..61c3c86b 100644
--- a/frontend/src/lib/components/dashboard/pedimentos/edit/contributions-tab-form.svelte
+++ b/frontend/src/lib/components/dashboard/pedimentos/edit/contributions-tab-form.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { Card, CardContent } from '$lib/components/ui/card';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
@@ -20,11 +21,7 @@
 		DialogFooter
 	} from '$lib/components/ui/dialog';
 	import { Checkbox } from '$lib/components/ui/checkbox';
-	import {
-		Plus,
-		Pencil,
-		Trash2
-	} from 'lucide-svelte';
+	import { Plus, Pencil, Trash2 } from 'lucide-svelte';
 	import { shortcutStore } from '$lib/stores/shortcut-store';
 	import { focusStore, interactionMode } from '$lib/stores/focus-store';
 	import { obtenerAtajosPestanaContribuciones } from '$lib/config/shortcuts/dashboard/pedimentos/tabs/contributions';
@@ -35,8 +32,19 @@
 	// Focus first input when switching sub-tabs via mouse
 
 	$effect(() => {
-		if (activeTab && $interactionMode === 'keyboard') {
-			focusStore.request('first-input');
+		// Accedemos a activeTab para que el efecto dependa de él
+		if (activeTab) {
+			// Usamos untrack para que no dependa de interactionMode
+			// Esto evita que se dispare el foco al empezar a escribir (cambio de mouse a keyboard)
+			const mode = untrack(() => {
+				let currentMode;
+				interactionMode.subscribe((v) => (currentMode = v))();
+				return currentMode;
+			});
+
+			if (mode === 'keyboard') {
+				focusStore.request('first-input');
+			}
 		}
 	});
 
@@ -146,12 +154,7 @@
 		};
 	} = $props();
 
-	// Focus first input when switching sub-tabs via mouse
-	$effect(() => {
-		if (activeTab) {
-			focusStore.request('first-input');
-		}
-	});
+	// Focus first input when switching sub-tabs via mouse (eliminado por redundancia y bugs de foco)
 
 	$effect(() => {
 		if (isActive) {
@@ -174,7 +177,7 @@
 	// General contributions states (inside dialog)
 	let isContribGenDialogOpen = $state(false);
 	let editingContribGenIndex = $state<number | null>(null);
-	
+
 	// Estado temporal para contribución general dentro del diálogo de contribución
 	let tempContribGen = $state({
 		pedimento_sys_id: '',
@@ -302,7 +305,10 @@
 		if (editingContribGenIndex !== null) {
 			formData.contribuciones_generales[editingContribGenIndex] = { ...currentContribGen };
 		} else {
-			formData.contribuciones_generales = [...formData.contribuciones_generales, { ...currentContribGen }];
+			formData.contribuciones_generales = [
+				...formData.contribuciones_generales,
+				{ ...currentContribGen }
+			];
 		}
 		isContribGenDialogOpen = false;
 	}
@@ -310,17 +316,19 @@
 	function deleteContribGen(index: number) {
 		if (!formData?.contribuciones_generales) return;
 		if (confirm('¿Está seguro de eliminar esta contribución general?')) {
-			formData.contribuciones_generales = formData.contribuciones_generales.filter((_, i) => i !== index);
+			formData.contribuciones_generales = formData.contribuciones_generales.filter(
+				(_, i) => i !== index
+			);
 		}
 	}
 </script>
 
 <Card>
-	<CardContent class="p-6 space-y-4">
+	<CardContent class="space-y-4 p-6">
 		<!-- Pestañas de navegación -->
 		<div class="flex gap-1 border-b">
 			<button
-				class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab === 'DTA'
+				class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab === 'DTA'
 					? 'border-primary text-primary'
 					: 'border-transparent text-muted-foreground hover:text-foreground'}"
 				onclick={() => (activeTab = 'DTA')}
@@ -328,7 +336,7 @@
 				DTA
 			</button>
 			<button
-				class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab === 'PREV'
+				class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab === 'PREV'
 					? 'border-primary text-primary'
 					: 'border-transparent text-muted-foreground hover:text-foreground'}"
 				onclick={() => (activeTab = 'PREV')}
@@ -336,7 +344,7 @@
 				PREV
 			</button>
 			<button
-				class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab === 'ECI'
+				class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab === 'ECI'
 					? 'border-primary text-primary'
 					: 'border-transparent text-muted-foreground hover:text-foreground'}"
 				onclick={() => (activeTab = 'ECI')}
@@ -344,7 +352,7 @@
 				ECI
 			</button>
 			<button
-				class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab === 'MULT'
+				class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab === 'MULT'
 					? 'border-primary text-primary'
 					: 'border-transparent text-muted-foreground hover:text-foreground'}"
 				onclick={() => (activeTab = 'MULT')}
@@ -352,7 +360,7 @@
 				MULT
 			</button>
 			<button
-				class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab === 'REC'
+				class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab === 'REC'
 					? 'border-primary text-primary'
 					: 'border-transparent text-muted-foreground hover:text-foreground'}"
 				onclick={() => (activeTab = 'REC')}
@@ -362,7 +370,7 @@
 		</div>
 
 		<!-- Contenido dinámico según pestaña -->
-		<div class="border rounded-lg p-4 bg-muted/30">
+		<div class="rounded-lg border bg-muted/30 p-4">
 			{#if activeTab === 'DTA'}
 				<div class="grid grid-cols-3 gap-4">
 					<div class="space-y-2">
@@ -397,7 +405,7 @@
 					</div>
 				</div>
 			{:else if activeTab === 'PREV'}
-				<div class="grid grid-cols-1 gap-4 max-w-md">
+				<div class="grid max-w-md grid-cols-1 gap-4">
 					<div class="space-y-2">
 						<Label for="forma_pago_prevalidacion">Forma de pago Prevalidación:</Label>
 						<Input
@@ -478,7 +486,7 @@
 		</div>
 
 		<!-- Tabla de contribuciones -->
-		<div class="border rounded-lg overflow-hidden">
+		<div class="overflow-hidden rounded-lg border">
 			<Table>
 				<TableHeader>
 					<TableRow>
@@ -497,7 +505,7 @@
 				<TableBody>
 					{#if !formData?.contribuciones || formData.contribuciones.length === 0}
 						<TableRow>
-							<TableCell colspan={10} class="text-center text-muted-foreground py-8">
+							<TableCell colspan={10} class="py-8 text-center text-muted-foreground">
 								No hay contribuciones registradas
 							</TableCell>
 						</TableRow>
@@ -555,7 +563,7 @@
 						onCheckedChange={(checked: boolean | 'indeterminate') =>
 							formData && (formData.calculo_manual = checked === true)}
 					/>
-					<Label for="calculo_manual" class="font-normal cursor-pointer text-sm"
+					<Label for="calculo_manual" class="cursor-pointer text-sm font-normal"
 						>Cálculo Manual</Label
 					>
 				</div>
@@ -567,7 +575,7 @@
 						onCheckedChange={(checked: boolean | 'indeterminate') =>
 							formData && (formData.operaciones_regla_31_40 = checked === true)}
 					/>
-					<Label for="operaciones_regla" class="font-normal cursor-pointer text-sm"
+					<Label for="operaciones_regla" class="cursor-pointer text-sm font-normal"
 						>Operaciones al amparo de la regla 31.40</Label
 					>
 				</div>
@@ -609,7 +617,7 @@
 
 <!-- Dialog para Contribuciones -->
 <Dialog bind:open={isDialogOpen}>
-	<DialogContent class="max-w-2xl max-h-[90vh] overflow-y-auto">
+	<DialogContent class="max-h-[90vh] max-w-2xl overflow-y-auto">
 		<DialogHeader>
 			<DialogTitle>
 				{editingIndex !== null ? 'Editar Contribución' : 'Insertando'}
@@ -619,8 +627,8 @@
 		<div class="space-y-6 py-4">
 			<!-- Tasas Pedimento - Registro 509 -->
 			<div class="space-y-4">
-				<h3 class="font-semibold text-sm">Tasas Pedimento - Registro 509</h3>
-				
+				<h3 class="text-sm font-semibold">Tasas Pedimento - Registro 509</h3>
+
 				<div class="space-y-2">
 					<Label for="contribucion">Contribución:</Label>
 					<Select.Root
@@ -651,40 +659,50 @@
 								<span class="truncate">{currentContribucion.tipo_tasa || 'Seleccionar'}</span>
 							</Select.Trigger>
 							<Select.Content>
-							<Select.Item value="Porcentual">Porcentual</Select.Item>
-							<Select.Item value="Especifico">Específico</Select.Item>
-							<Select.Item value="CuotaMinimaDTA">Cuota minima (DTA)</Select.Item>
-							<Select.Item value="CuotaFijaDTA">Cuota fija (DTA)</Select.Item>
-							<Select.Item value="TasaDescuentoAdValorem">Tasa de descuento sobre ad valorem</Select.Item>
-							<Select.Item value="FactorAplicacionTIGIE">Factor de aplicación sobre tigie.</Select.Item>
-							<Select.Item value="AlMillarDTA">Al millar (DTA)</Select.Item>
-							<Select.Item value="TasaDescuentoArancelEspecifico">Tasa de descuento sobre el arancel específico</Select.Item>
-							<Select.Item value="TasaEspecificaPreciosReferencia">Tasa especifica sobre precios de referencia</Select.Item>
-							<Select.Item value="TasaEspecificaPreciosReferenciaUM">Tasa especifica sobre precios de referencia con UM</Select.Item>
-						</Select.Content>
-					</Select.Root>
-					<Button size="icon" variant="outline" onclick={openNewContribGenInDialog}>
-						<Plus class="h-4 w-4" />
-					</Button>
+								<Select.Item value="Porcentual">Porcentual</Select.Item>
+								<Select.Item value="Especifico">Específico</Select.Item>
+								<Select.Item value="CuotaMinimaDTA">Cuota minima (DTA)</Select.Item>
+								<Select.Item value="CuotaFijaDTA">Cuota fija (DTA)</Select.Item>
+								<Select.Item value="TasaDescuentoAdValorem"
+									>Tasa de descuento sobre ad valorem</Select.Item
+								>
+								<Select.Item value="FactorAplicacionTIGIE"
+									>Factor de aplicación sobre tigie.</Select.Item
+								>
+								<Select.Item value="AlMillarDTA">Al millar (DTA)</Select.Item>
+								<Select.Item value="TasaDescuentoArancelEspecifico"
+									>Tasa de descuento sobre el arancel específico</Select.Item
+								>
+								<Select.Item value="TasaEspecificaPreciosReferencia"
+									>Tasa especifica sobre precios de referencia</Select.Item
+								>
+								<Select.Item value="TasaEspecificaPreciosReferenciaUM"
+									>Tasa especifica sobre precios de referencia con UM</Select.Item
+								>
+							</Select.Content>
+						</Select.Root>
+						<Button size="icon" variant="outline" onclick={openNewContribGenInDialog}>
+							<Plus class="h-4 w-4" />
+						</Button>
+					</div>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="tasa">Tasa:</Label>
+					<Input
+						id="tasa"
+						step="0.00001"
+						bind:value={currentContribucion.tasa}
+						placeholder="0.00000"
+					/>
 				</div>
 			</div>
 
-			<div class="space-y-2">
-				<Label for="tasa">Tasa:</Label>
-				<Input
-					id="tasa"
-step="0.00001"
-bind:value={currentContribucion.tasa}
-placeholder="0.00000"
-/>
-</div>
-</div>
+			<!-- Contribuciones Generales - Registro 510 -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-semibold">Contribuciones Generales - Registro 510</h3>
 
-<!-- Contribuciones Generales - Registro 510 -->
-<div class="space-y-4">
-<h3 class="font-semibold text-sm">Contribuciones Generales - Registro 510</h3>
-
-				<div class="border rounded-md">
+				<div class="rounded-md border">
 					<Table>
 						<TableHeader>
 							<TableRow>
@@ -696,7 +714,7 @@ placeholder="0.00000"
 						<TableBody>
 							{#if !currentContribucion.contribuciones_generales || currentContribucion.contribuciones_generales.length === 0}
 								<TableRow>
-									<TableCell colspan={3} class="text-center text-muted-foreground py-4">
+									<TableCell colspan={3} class="py-4 text-center text-muted-foreground">
 										Sin registros
 									</TableCell>
 								</TableRow>
@@ -704,9 +722,9 @@ placeholder="0.00000"
 								{#each currentContribucion.contribuciones_generales as contribGen, index}
 									<TableRow>
 										<TableCell>{contribGen.clave_contribucion}</TableCell>
-									<TableCell>{contribGen.clave_forma_pago}</TableCell>
-									<TableCell class="text-right">
-										{contribGen.importe_contribucion.toLocaleString('es-MX', {
+										<TableCell>{contribGen.clave_forma_pago}</TableCell>
+										<TableCell class="text-right">
+											{contribGen.importe_contribucion.toLocaleString('es-MX', {
 												minimumFractionDigits: 2,
 												maximumFractionDigits: 2
 											})}
@@ -720,13 +738,13 @@ placeholder="0.00000"
 
 				<div class="flex gap-2">
 					<Button size="sm" variant="outline" onclick={openNewContribGenInDialog}>
-						<Plus class="h-4 w-4 mr-1" /> Nuevo
+						<Plus class="mr-1 h-4 w-4" /> Nuevo
 					</Button>
 					<Button size="sm" variant="outline" disabled>
-						<Pencil class="h-4 w-4 mr-1" /> Editar
+						<Pencil class="mr-1 h-4 w-4" /> Editar
 					</Button>
 					<Button size="sm" variant="outline" disabled>
-						<Trash2 class="h-4 w-4 mr-1" /> Borrar
+						<Trash2 class="mr-1 h-4 w-4" /> Borrar
 					</Button>
 				</div>
 			</div>
@@ -767,11 +785,7 @@ placeholder="0.00000"
 
 			<div class="space-y-2">
 				<Label for="clave_tasa_temp">Clave de Tasa:</Label>
-				<Input
-					id="clave_tasa_temp"
-					bind:value={tempContribGen.clave_tasa}
-					placeholder=""
-				/>
+				<Input id="clave_tasa_temp" bind:value={tempContribGen.clave_tasa} placeholder="" />
 			</div>
 
 			<div class="space-y-2">
diff --git a/frontend/src/lib/components/dashboard/pedimentos/edit/general-tab-form.svelte b/frontend/src/lib/components/dashboard/pedimentos/edit/general-tab-form.svelte
index adf9f65b..aa8d3f8e 100644
--- a/frontend/src/lib/components/dashboard/pedimentos/edit/general-tab-form.svelte
+++ b/frontend/src/lib/components/dashboard/pedimentos/edit/general-tab-form.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import * as Card from '$lib/components/ui/card';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
@@ -12,11 +12,13 @@
 	import type { CustomsBroker } from '$lib/api/dashboard/a76/customs-brokers';
 	import type { ClientProvider } from '$lib/api/dashboard/a76/clients-providers';
 	import type { CodePedimentoRegimen } from '$lib/api/dashboard/reference_data/code_pedimento_regimens';
+	import type { TransportType } from '$lib/api/dashboard/reference_data/transport_types';
+	import type { TransportMode } from '$lib/api/dashboard/reference_data/transport_modes';
 	import IdentificadoresTabForm from './identifiers-tab-form.svelte';
 	import ExchangeRateDialog from '$lib/components/dashboard/exchange_rate/create-edit-dialog.svelte';
 	import { Calendar, Clock } from 'lucide-svelte';
-	import { 		
-		loadServerDate, 
+	import {
+		loadServerDate,
 		addDaysLocal,
 		getCurrentLocalYear,
 		getCurrentLocalDate,
@@ -27,7 +29,7 @@
 	import { shortcutStore } from '$lib/stores/shortcut-store';
 	import { focusStore, interactionMode } from '$lib/stores/focus-store';
 
-	let { 
+	let {
 		pedimento,
 		formData = $bindable(),
 		identificadoresFormData = $bindable(),
@@ -36,8 +38,10 @@
 		customsBrokers = [],
 		clients = [],
 		codePedimentoRegimens = [],
+		transportTypes = [],
+		transportModes = [],
 		isActive = false
-	}: { 
+	}: {
 		pedimento: Pedimento | null;
 		formData?: any;
 		identificadoresFormData?: any;
@@ -46,6 +50,8 @@
 		customsBrokers?: CustomsBroker[];
 		clients?: ClientProvider[];
 		codePedimentoRegimens?: CodePedimentoRegimen[];
+		transportTypes?: TransportType[];
+		transportModes?: TransportMode[];
 		isActive?: boolean;
 	} = $props();
 
@@ -56,8 +62,19 @@
 	// Shortcuts will override this by focusing the trigger themselves
 
 	$effect(() => {
-		if (activeSection && $interactionMode === 'keyboard') {
-			focusStore.request('first-input');
+		// Accedemos a activeSection para que el efecto dependa de él
+		if (activeSection) {
+			// Usamos untrack para que no dependa de interactionMode
+			// Esto evita que se dispare el foco al empezar a escribir (cambio de mouse a keyboard)
+			const mode = untrack(() => {
+				let currentMode;
+				interactionMode.subscribe((v) => (currentMode = v))();
+				return currentMode;
+			});
+
+			if (mode === 'keyboard') {
+				focusStore.request('first-input');
+			}
 		}
 	});
 
@@ -77,13 +94,19 @@
 
 	// Exchange Rate Check State
 	let showExchangeRateDialog = $state(false);
-	let missingExchangeRateDate = $state("");
+	let missingExchangeRateDate = $state('');
 
 	// Extraer regímenes únicos de codePedimentoRegimens
 	const uniqueRegimens = $derived(
-		Array.from(new Set(codePedimentoRegimens.map(r => r.regimen_code).filter((code): code is string => code !== null)))
+		Array.from(
+			new Set(
+				codePedimentoRegimens
+					.map((r) => r.regimen_code)
+					.filter((code): code is string => code !== null)
+			)
+		)
 			.sort()
-			.map(code => ({ code, label: code }))
+			.map((code) => ({ code, label: code }))
 	);
 
 	// Funciones de mapeo entre type_code (E/I) y operation_type (exp/imp)
@@ -106,7 +129,7 @@
 	// Opciones constantes
 	const operationOptions = [
 		{ value: 'exp', label: 'Exportación' },
-		{ value: 'imp', label: 'Importación' },
+		{ value: 'imp', label: 'Importación' }
 	];
 
 	// Track previous values to detect changes
@@ -115,22 +138,30 @@
 
 	// Opciones filtradas para Régimen y Tipo de Operación basadas en las selecciones actuales
 	// NOTA: La Clave NO se filtra, siempre muestra todas las opciones
-	
+
 	const filteredRegimens = $derived.by(() => {
 		if (!formData) return uniqueRegimens;
-		
+
 		// Si hay clave o tipo de operación seleccionado, filtrar
-		if (formData.pedimento_code || formData.operation_type !== null && formData.operation_type !== undefined) {
+		if (
+			formData.pedimento_code ||
+			(formData.operation_type !== null && formData.operation_type !== undefined)
+		) {
 			const expectedTypeCode = operationTypeToTypeCode(formData.operation_type);
-			
-			const matches = codePedimentoRegimens.filter(r => {
-				const matchesCode = !formData.pedimento_code || r.pedimento_code === formData.pedimento_code;
+
+			const matches = codePedimentoRegimens.filter((r) => {
+				const matchesCode =
+					!formData.pedimento_code || r.pedimento_code === formData.pedimento_code;
 				const matchesType = !expectedTypeCode || r.type_code === expectedTypeCode;
 				return matchesCode && matchesType;
 			});
-			
-			const validRegimens = new Set(matches.map(m => m.regimen_code).filter((code): code is string => code !== null));
-			return Array.from(validRegimens).sort().map(code => ({ code, label: code }));
+
+			const validRegimens = new Set(
+				matches.map((m) => m.regimen_code).filter((code): code is string => code !== null)
+			);
+			return Array.from(validRegimens)
+				.sort()
+				.map((code) => ({ code, label: code }));
 		}
 		return uniqueRegimens;
 	});
@@ -146,9 +177,13 @@
 		// Solo filtrar por la clave del pedimento (no por régimen)
 		// Esto permite cambiar entre Exportación e Importación libremente
 		if (formData.pedimento_code) {
-			const matches = codePedimentoRegimens.filter(r => r.pedimento_code === formData.pedimento_code);
-			const validTypes = new Set(matches.map(m => typeCodeToOperationType(m.type_code)).filter(t => t !== null));
-			return operationOptions.filter(opt => validTypes.has(opt.value));
+			const matches = codePedimentoRegimens.filter(
+				(r) => r.pedimento_code === formData.pedimento_code
+			);
+			const validTypes = new Set(
+				matches.map((m) => typeCodeToOperationType(m.type_code)).filter((t) => t !== null)
+			);
+			return operationOptions.filter((opt) => validTypes.has(opt.value));
 		}
 		return operationOptions;
 	});
@@ -156,30 +191,30 @@
 	// Reactive synchronization between Clave, Régimen, and Tipo de Operación
 	// REGLA: La Clave es el campo principal y NUNCA se modifica automáticamente
 	// Solo se auto-llenan Régimen y Tipo de Operación basándose en la Clave
-	
+
 	// Cuando cambia la Clave del Pedimento
 	$effect(() => {
 		if (!formData) return;
-		
+
 		const currentCode = formData.pedimento_code;
-		
+
 		// Detectar si la clave cambió
 		const codeChanged = currentCode !== previousPedimentoCode;
-		
+
 		// Solo procesar si la clave cambió
 		if (!codeChanged) return;
-		
+
 		// Actualizar el tracking
 		previousPedimentoCode = currentCode;
-		
-		if (!currentCode) return;				
-		
-		const matches = codePedimentoRegimens.filter(r => r.pedimento_code === currentCode);		
-		
+
+		if (!currentCode) return;
+
+		const matches = codePedimentoRegimens.filter((r) => r.pedimento_code === currentCode);
+
 		if (matches.length === 0) return;
-		
+
 		// Auto-llenar con el primer match
-		const firstMatch = matches[0];			
+		const firstMatch = matches[0];
 		if (firstMatch.regimen_code) {
 			formData.regime = firstMatch.regimen_code;
 		}
@@ -192,17 +227,17 @@
 	// Cuando cambia el Régimen
 	$effect(() => {
 		if (!formData) return;
-		
+
 		const currentRegime = formData.regime;
-		if (!currentRegime) return;				
-		
-		const matches = codePedimentoRegimens.filter(r => r.regimen_code === currentRegime);		
-		
+		if (!currentRegime) return;
+
+		const matches = codePedimentoRegimens.filter((r) => r.regimen_code === currentRegime);
+
 		if (matches.length === 0) return;
-		
+
 		// Si hay clave seleccionada, solo validar (NO auto-llenar tipo de operación)
 		if (formData.pedimento_code) {
-			const exactMatch = matches.find(m => m.pedimento_code === formData.pedimento_code);			
+			const exactMatch = matches.find((m) => m.pedimento_code === formData.pedimento_code);
 		}
 		// Si hay tipo de operación pero no clave, no hacer nada
 		// (el usuario debe seleccionar la clave primero)
@@ -212,32 +247,33 @@
 	// Optimizado: solo ejecutar cuando cambien los campos específicos relevantes
 	$effect(() => {
 		if (!formData) return;
-		
+
 		// Solo rastrear los campos que realmente importan
 		const currentType = formData.operation_type;
 		const currentCode = formData.pedimento_code;
 		const currentRegime = formData.regime;
-		
+
 		// Detectar si el tipo de operación cambió
 		const typeChanged = currentType !== previousOperationType;
 		previousOperationType = currentType;
-		
+
 		// Si no hay clave seleccionada o tipo no definido, salir temprano
 		if (!currentCode || currentType === null || currentType === undefined) return;
-		
+
 		const expectedTypeCode = operationTypeToTypeCode(currentType);
-		
+
 		// Buscar matches para esta combinación de clave + tipo de operación
-		const matches = codePedimentoRegimens.filter(r => 
-			r.pedimento_code === currentCode && 
-			r.type_code === expectedTypeCode
+		const matches = codePedimentoRegimens.filter(
+			(r) => r.pedimento_code === currentCode && r.type_code === expectedTypeCode
 		);
-		
+
 		if (matches.length === 0) return;
-		
+
 		// Obtener regímenes válidos para esta combinación
-		const validRegimens = new Set(matches.map(m => m.regimen_code).filter((code): code is string => code !== null));
-		
+		const validRegimens = new Set(
+			matches.map((m) => m.regimen_code).filter((code): code is string => code !== null)
+		);
+
 		// Si el tipo de operación cambió O el régimen actual no es válido, actualizar el régimen
 		if (typeChanged || !currentRegime || !validRegimens.has(currentRegime)) {
 			const firstMatch = matches[0];
@@ -255,7 +291,6 @@
 	const end_date = addDaysLocal(currentDate, 4);
 	const payment_date = addDaysLocal(end_date, 2);
 
-
 	// Inicializar formData con los valores del pedimento (o vacío si es null)
 	if (!formData) {
 		const datesData = pedimento?.pedimento_dates;
@@ -263,7 +298,7 @@
 		const decrementablesData = pedimento?.pedimento_decrementables;
 		const indexesData = pedimento?.pedimento_indexes;
 		const configAdditionalData = pedimento?.pedimento_config_additional;
-		
+
 		formData = {
 			year: pedimento?.year || currentYear,
 			customs_office: pedimento?.customs_office || '',
@@ -282,11 +317,20 @@
 			// Date fields - Cargamos convirtiendo a local para el usuario
 			entry_date: loadServerDate(datesData?.entry_date) || currentDate,
 			end_date: loadServerDate(datesData?.end_date) || end_date,
-			payment_date: loadServerDate(datesData?.payment_date) || payment_date,			
-			pedimento_date: loadServerDate(datesData?.pedimento_date),
-			extraction_date: loadServerDate(datesData?.extraction_date),
-			rectification_payment_date: loadServerDate(datesData?.rectification_payment_date),
-			original_date: loadServerDate(datesData?.original_date),			
+			payment_date: loadServerDate(datesData?.payment_date) || payment_date,
+			extraction_date: loadServerDate(datesData?.entry_date) || null,
+			original_date: loadServerDate(datesData?.original_date) || null,
+			// Mapeos de sub-recursos
+			pedimento_customs_offices: {
+				dispatch_customs: pedimento?.pedimento_customs_offices?.dispatch_customs || '',
+				entry_exit_customs: pedimento?.pedimento_customs_offices?.entry_exit_customs || ''
+			},
+			pedimento_transport_means: {
+				destination: pedimento?.pedimento_transport_means?.destination || null,
+				entry_exit: pedimento?.pedimento_transport_means?.entry_exit || '',
+				arrival: pedimento?.pedimento_transport_means?.arrival || '',
+				departure: pedimento?.pedimento_transport_means?.departure || ''
+			},
 			// Campos de captura automática (Local)
 			fecha_captura: currentDate,
 			hora_captura: currentTime
@@ -312,33 +356,36 @@
 	$effect(() => {
 		const entryDate = formData?.entry_date;
 		const companyId = companyStore.activeCompany?.id;
-		
+
 		// Solo ejecutar si los valores clave cambiaron
-		if (formData && entryDate && companyId && 
-		    (entryDate !== lastFetchedDate || companyId !== lastCompanyId)) {
-			
+		if (
+			formData &&
+			entryDate &&
+			companyId &&
+			(entryDate !== lastFetchedDate || companyId !== lastCompanyId)
+		) {
 			lastFetchedDate = entryDate;
-			lastCompanyId = companyId;						
-			
+			lastCompanyId = companyId;
+
 			getExchangeRateByDate(entryDate, companyId)
-				.then(usdRate => {					
+				.then((usdRate) => {
 					if (usdRate && formData) {
-						formData.exchange_rate = usdRate.value;						
+						formData.exchange_rate = usdRate.value;
 					} else {
 						console.warn('⚠️ [TIPO CAMBIO] No encontrado para fecha:', entryDate);
 					}
 				})
-				.catch(err => {
+				.catch((err) => {
 					console.error('❌ [TIPO CAMBIO] Error:', err);
 				});
-		} 
+		}
 	});
 
 	const pedimentoTypeOptions = [
 		{ value: 'automobile', label: 'Automóvil' },
 		{ value: 'complementary', label: 'Complementario' },
 		{ value: 'consolidated', label: 'Consolidado' },
-		{ value: 'normal', label: 'Normal' }
+		{ value: 'normal', label: 'Normal (Individual)' }
 	];
 
 	const tipoOperacionOptions = [
@@ -351,11 +398,11 @@
 
 	export async function checkPaymentDateRate(date: string): Promise<boolean> {
 		if (!date || !companyStore.activeCompany?.id) return true;
-		
+
 		try {
 			const rate = await getExchangeRateByDate(date, companyStore.activeCompany.id);
 			if (!rate) {
-                // Abrir modal preventivamente
+				// Abrir modal preventivamente
 				missingExchangeRateDate = date;
 				showExchangeRateDialog = true;
 				return false;
@@ -363,17 +410,17 @@
 			return true;
 		} catch (error) {
 			console.error('Error checking payment date rate:', error);
-            // Si hay error de red, asumimos que falta para forzar reintento/captura segura
-            missingExchangeRateDate = date;
-            showExchangeRateDialog = true;
+			// Si hay error de red, asumimos que falta para forzar reintento/captura segura
+			missingExchangeRateDate = date;
+			showExchangeRateDialog = true;
 			return false;
 		}
 	}
 
-    export function openExchangeRateDialog(date: string) {
-        missingExchangeRateDate = date;
-        showExchangeRateDialog = true;
-    }
+	export function openExchangeRateDialog(date: string) {
+		missingExchangeRateDate = date;
+		showExchangeRateDialog = true;
+	}
 </script>
 
 <Card.Root>
@@ -381,18 +428,18 @@
 		<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
 			<div class="space-y-1">
 				<Card.Title>Información General</Card.Title>
-				<Card.Description>
-					Edita los datos principales del pedimento
-				</Card.Description>
+				<Card.Description>Edita los datos principales del pedimento</Card.Description>
 			</div>
-			
+
 			<!-- Captura Info Badge -->
-			<div class="flex flex-row items-center gap-4 text-sm text-muted-foreground bg-secondary/50 px-3 py-2 rounded-md border border-border/40">
+			<div
+				class="flex flex-row items-center gap-4 rounded-md border border-border/40 bg-secondary/50 px-3 py-2 text-sm text-muted-foreground"
+			>
 				<div class="flex items-center gap-2" title="Fecha de Captura">
 					<Calendar class="h-4 w-4 text-primary/70" />
 					<span class="font-medium tabular-nums">{formData.fecha_captura}</span>
 				</div>
-				<div class="w-px h-4 bg-border"></div>
+				<div class="h-4 w-px bg-border"></div>
 				<div class="flex items-center gap-2" title="Hora de Captura">
 					<Clock class="h-4 w-4 text-primary/70" />
 					<span class="font-medium tabular-nums">{formData.hora_captura}</span>
@@ -401,39 +448,39 @@
 		</div>
 	</Card.Header>
 	<Card.Content>
-		<div class="space-y-6">			
-			<div class="grid grid-cols-1 md:grid-cols-[auto_auto_auto_auto_auto_auto_auto_auto_auto_1fr_auto] md:items-end gap-4 md:gap-2">
+		<div class="space-y-6">
+			<div
+				class="grid grid-cols-1 gap-4 md:grid-cols-[auto_auto_auto_auto_auto_auto_auto_auto_auto_1fr_auto] md:items-end md:gap-2"
+			>
 				<!-- Año -->
 				<div class="space-y-2">
 					<Label for="year">Año <span class="text-red-500">*</span></Label>
 					<Input
 						id="year"
 						bind:value={formData.year}
-						placeholder="23"
-						maxlength={2}
-						class="text-center md:w-16"
-						disabled
-						readonly
+						placeholder="25"
+						maxlength={4}
+						class="text-center md:w-20"
 					/>
 				</div>
 
 				<!-- Separador -->
-				<div class="hidden md:block pb-2 text-2xl font-semibold text-muted-foreground">-</div>
+				<div class="hidden pb-2 text-2xl font-semibold text-muted-foreground md:block">-</div>
 
 				<!-- Aduana -->
 				<div class="space-y-2">
 					<Label for="customs_office">Aduana <span class="text-red-500">*</span></Label>
-					<Select.Root 
-						type="single" 
+					<Select.Root
+						type="single"
 						value={formData.customs_office || ''}
-						onValueChange={(v: string) => formData.customs_office = v ?? ''}
+						onValueChange={(v: string) => (formData.customs_office = v ?? '')}
 					>
 						<Select.Trigger class="w-full md:w-20">
 							<span class="truncate">
 								{formData.customs_office ? formData.customs_office.substring(0, 2) : 'Sel...'}
 							</span>
 						</Select.Trigger>
-						<Select.Content class="max-w-[300px] max-h-[300px]">
+						<Select.Content class="max-h-[300px] max-w-[300px]">
 							{#if customsSections.length === 0}
 								<div class="px-2 py-1.5 text-sm text-muted-foreground">
 									No hay aduanas disponibles
@@ -441,7 +488,10 @@
 							{:else}
 								{#each customsSections as section}
 									<Select.Item value={section.customs_code}>
-										<span class="truncate overflow-hidden text-ellipsis whitespace-nowrap" title={`${section.customs_code} - ${section.section_name}`}>
+										<span
+											class="truncate overflow-hidden text-ellipsis whitespace-nowrap"
+											title={`${section.customs_code} - ${section.section_name}`}
+										>
 											{section.customs_code} - {section.section_name}
 										</span>
 									</Select.Item>
@@ -452,23 +502,23 @@
 				</div>
 
 				<!-- Separador -->
-				<div class="hidden md:block pb-2 text-2xl font-semibold text-muted-foreground">-</div>
+				<div class="hidden pb-2 text-2xl font-semibold text-muted-foreground md:block">-</div>
 
 				<!-- Patente -->
 				<div class="space-y-2">
 					<Label for="license">Patente <span class="text-red-500">*</span></Label>
-					<Select.Root 
-						type="single" 
+					<Select.Root
+						type="single"
 						value={formData.license || ''}
-						onValueChange={(v: string | undefined) => formData.license = v || null}
+						onValueChange={(v: string | undefined) => (formData.license = v || null)}
 					>
 						<Select.Trigger class="w-full md:w-24">
 							<span class="truncate">
 								{formData.license || 'Sel...'}
 							</span>
 						</Select.Trigger>
-						<Select.Content class="max-w-[300px] max-h-[300px]">
-							{@const validBrokers = customsBrokers.filter(b => b.license)}
+						<Select.Content class="max-h-[300px] max-w-[300px]">
+							{@const validBrokers = customsBrokers.filter((b) => b.license)}
 							{#if customsBrokers.length === 0}
 								<div class="px-2 py-1.5 text-sm text-muted-foreground">
 									No hay agentes aduanales registrados
@@ -481,7 +531,10 @@
 								{#each validBrokers as broker}
 									{@const displayName = broker.name || broker.broker_key || ''}
 									<Select.Item value={broker.license}>
-										<span class="truncate overflow-hidden text-ellipsis whitespace-nowrap" title={displayName ? `${displayName} - ${broker.license}` : broker.license}>
+										<span
+											class="truncate overflow-hidden text-ellipsis whitespace-nowrap"
+											title={displayName ? `${displayName} - ${broker.license}` : broker.license}
+										>
 											{displayName ? `${displayName} - ${broker.license}` : broker.license}
 										</span>
 									</Select.Item>
@@ -492,11 +545,13 @@
 				</div>
 
 				<!-- Separador -->
-				<div class="hidden md:block pb-2 text-2xl font-semibold text-muted-foreground">-</div>
+				<div class="hidden pb-2 text-2xl font-semibold text-muted-foreground md:block">-</div>
 
 				<!-- Número de Pedimento -->
 				<div class="space-y-2">
-					<Label for="pedimento_number">Número de Pedimento <span class="text-red-500">*</span></Label>
+					<Label for="pedimento_number"
+						>Número de Pedimento <span class="text-red-500">*</span></Label
+					>
 					<Input
 						id="pedimento_number"
 						bind:value={formData.pedimento_number}
@@ -516,26 +571,26 @@
 						placeholder="Se obtiene automáticamente de la fecha de entrada"
 						readonly
 						disabled
-						class="bg-muted cursor-not-allowed"
+						class="cursor-not-allowed bg-muted"
 					/>
 				</div>
 			</div>
 
-			<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-2">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-2">
 				<!-- Clave del Pedimento -->
 				<div class="space-y-2">
 					<Label for="pedimento_code">Clave <span class="text-red-500">*</span></Label>
-					<Select.Root 
-						type="single" 
+					<Select.Root
+						type="single"
 						value={formData.pedimento_code || ''}
-						onValueChange={(v: string) => formData.pedimento_code = v ?? ''}
+						onValueChange={(v: string) => (formData.pedimento_code = v ?? '')}
 					>
 						<Select.Trigger class="w-full">
 							<span class="truncate">
-								{pedimentoCodes.find(o => o.code === formData.pedimento_code)?.code || 'Sel...'}
+								{pedimentoCodes.find((o) => o.code === formData.pedimento_code)?.code || 'Sel...'}
 							</span>
 						</Select.Trigger>
-						<Select.Content class="max-w-[400px] max-h-[300px]">
+						<Select.Content class="max-h-[300px] max-w-[400px]">
 							{#each pedimentoCodes as code}
 								<Select.Item value={code.code}>
 									<div class="flex items-center gap-2">
@@ -552,13 +607,14 @@
 				<!-- Tipo de Operación -->
 				<div class="space-y-2">
 					<Label for="operation_type">Tipo de Operación <span class="text-red-500">*</span></Label>
-					<Select.Root 
-						type="single" 
+					<Select.Root
+						type="single"
 						value={formData.operation_type || ''}
-						onValueChange={(v: string) => formData.operation_type = v || null}
+						onValueChange={(v: string) => (formData.operation_type = v || null)}
 					>
 						<Select.Trigger class="w-full">
-							{operationOptions.find(o => o.value === formData.operation_type)?.label || 'Seleccionar...'}
+							{operationOptions.find((o) => o.value === formData.operation_type)?.label ||
+								'Seleccionar...'}
 						</Select.Trigger>
 						<Select.Content>
 							{#each filteredOperationTypes as option}
@@ -571,11 +627,11 @@
 				<!-- Régimen -->
 				<div class="space-y-2">
 					<Label for="regime">Régimen <span class="text-red-500">*</span></Label>
-				{#if hasMultipleRegimens}
-						<Select.Root 
-							type="single" 
+					{#if hasMultipleRegimens}
+						<Select.Root
+							type="single"
 							value={formData.regime || ''}
-							onValueChange={(v: string) => formData.regime = v ?? ''}
+							onValueChange={(v: string) => (formData.regime = v ?? '')}
 						>
 							<Select.Trigger class="w-full">
 								<span class="truncate">
@@ -583,9 +639,12 @@
 								</span>
 							</Select.Trigger>
 							<Select.Content class="max-w-[200px]">
-							{#each filteredRegimens as regimen}
+								{#each filteredRegimens as regimen}
 									<Select.Item value={regimen.code}>
-										<span class="truncate overflow-hidden text-ellipsis whitespace-nowrap" title={regimen.code}>
+										<span
+											class="truncate overflow-hidden text-ellipsis whitespace-nowrap"
+											title={regimen.code}
+										>
 											{regimen.code}
 										</span>
 									</Select.Item>
@@ -605,18 +664,18 @@
 				</div>
 			</div>
 
-			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 				<!-- ID del Cliente -->
 				<div class="space-y-2">
 					<Label for="client_id">Cliente <span class="text-red-500">*</span></Label>
-					<Select.Root 
-						type="single" 
+					<Select.Root
+						type="single"
 						value={String(formData.client_id ?? '')}
-						onValueChange={(v: string) => formData.client_id = v ? Number(v) : null}
+						onValueChange={(v: string) => (formData.client_id = v ? Number(v) : null)}
 					>
 						<Select.Trigger class="w-full">
 							<span class="truncate">
-								{clients.find(c => c.id === formData.client_id)?.name || 'Seleccionar cliente...'}
+								{clients.find((c) => c.id === formData.client_id)?.name || 'Seleccionar cliente...'}
 							</span>
 						</Select.Trigger>
 						<Select.Content class="max-h-[300px]">
@@ -627,7 +686,10 @@
 							{:else}
 								{#each clients as client}
 									<Select.Item value={String(client.id)} label={client.name}>
-										<span class="truncate overflow-hidden text-ellipsis whitespace-nowrap" title={client.name}>
+										<span
+											class="truncate overflow-hidden text-ellipsis whitespace-nowrap"
+											title={client.name}
+										>
 											{client.name}
 										</span>
 									</Select.Item>
@@ -640,13 +702,14 @@
 				<!-- Tipo de Pedimento -->
 				<div class="space-y-2">
 					<Label for="pedimento_type">Tipo de Pedimento <span class="text-red-500">*</span></Label>
-					<Select.Root 
-						type="single" 
+					<Select.Root
+						type="single"
 						value={formData.pedimento_type || ''}
-						onValueChange={(v: string) => formData.pedimento_type = v ?? ''}
+						onValueChange={(v: string) => (formData.pedimento_type = v ?? '')}
 					>
 						<Select.Trigger class="w-full">
-							{pedimentoTypeOptions.find(o => o.value === formData.pedimento_type)?.label || 'Seleccionar...'}
+							{pedimentoTypeOptions.find((o) => o.value === formData.pedimento_type)?.label ||
+								'Seleccionar...'}
 						</Select.Trigger>
 						<Select.Content>
 							{#each pedimentoTypeOptions as option}
@@ -655,12 +718,9 @@
 						</Select.Content>
 					</Select.Root>
 				</div>
-
 			</div>
-		
 
-		
-			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 				<!-- Valor USD -->
 				<div class="space-y-2">
 					<Label for="usd_value">Valor USD</Label>
@@ -700,145 +760,237 @@
 				<!-- Despacho -->
 				<div class="space-y-2">
 					<Label for="despacho">Despacho</Label>
-					<Input
-						id="despacho"
-						type="number"
-						bind:value={formData.despacho}
-						placeholder="0"
-					/>
+					<Select.Root
+						type="single"
+						value={formData.pedimento_customs_offices.dispatch_customs || ''}
+						onValueChange={(v: string) =>
+							(formData.pedimento_customs_offices.dispatch_customs = v || '')}
+					>
+						<Select.Trigger id="despacho" class="w-full">
+							{formData.pedimento_customs_offices.dispatch_customs || 'Sel...'}
+						</Select.Trigger>
+						<Select.Content>
+							{#each customsSections.filter((s) => !formData.customs_office || s.customs_code.startsWith(formData.customs_office.substring(0, 2))) as section}
+								<Select.Item value={section.customs_code}>
+									{section.customs_code} - {section.section_name}
+								</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
+
+				<!-- Destino -->
+				<div class="space-y-2">
+					<Label for="destino">Destino <span class="text-red-500">*</span></Label>
+					<Select.Root
+						type="single"
+						value={formData.pedimento_transport_means.destination
+							? String(formData.pedimento_transport_means.destination)
+							: ''}
+						onValueChange={(v: string) =>
+							(formData.pedimento_transport_means.destination = v ? Number(v) : null)}
+					>
+						<Select.Trigger id="destino" class="w-full">
+							{formData.pedimento_transport_means.destination === 1
+								? '1 - REGION FRONTERIZA'
+								: formData.pedimento_transport_means.destination === 8
+									? '8 - RECTIFICACION REGION FRONTERIZA'
+									: formData.pedimento_transport_means.destination === 9
+										? '9 - INTERIOR DEL PAIS'
+										: 'Seleccionar...'}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="1">1 - REGION FRONTERIZA</Select.Item>
+							<Select.Item value="8">8 - RECTIFICACION REGION FRONTERIZA</Select.Item>
+							<Select.Item value="9">9 - INTERIOR DEL PAIS</Select.Item>
+						</Select.Content>
+					</Select.Root>
 				</div>
 
 				<!-- Aduana E/S -->
 				<div class="space-y-2">
-					<Label for="aduana_es">Aduana E/S</Label>
+					<Label for="entry_exit_customs">Aduana E/S</Label>
 					<Input
-						id="aduana_es"
-						type="number"
-						bind:value={formData.aduana_es}
-						placeholder="0"
+						id="entry_exit_customs"
+						type="text"
+						maxlength={3}
+						bind:value={formData.pedimento_customs_offices.entry_exit_customs}
+						placeholder="000"
 					/>
 				</div>
 
-				<!-- E/S -->
+				<!-- Método de Entrada/Salida -->
 				<div class="space-y-2">
-					<Label for="es">E/S</Label>
-					<Input
-						id="es"
-						type="number"
-						bind:value={formData.es}
-						placeholder="0"
-					/>
-				</div>				
+					<Label for="entry_exit">Método de Entrada</Label>
+					<Select.Root
+						type="single"
+						value={formData.pedimento_transport_means.entry_exit || ''}
+						onValueChange={(v: string) => (formData.pedimento_transport_means.entry_exit = v || '')}
+					>
+						<Select.Trigger id="entry_exit" class="w-full">
+							<span class="truncate">
+								{transportModes.find((m) => m.key === formData.pedimento_transport_means.entry_exit)
+									?.name ||
+									transportTypes.find(
+										(t) => t.transport_code === formData.pedimento_transport_means.entry_exit
+									)?.description ||
+									formData.pedimento_transport_means.entry_exit ||
+									'Seleccionar...'}
+							</span>
+						</Select.Trigger>
+						<Select.Content class="max-h-[300px]">
+							{#each transportModes as mode}
+								<Select.Item value={mode.key}>{mode.key} - {mode.name}</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
+
+				<!-- Arribo -->
+				<div class="space-y-2">
+					<Label for="arrival">Arribo</Label>
+					<Select.Root
+						type="single"
+						value={formData.pedimento_transport_means.arrival || ''}
+						onValueChange={(v: string) => (formData.pedimento_transport_means.arrival = v || '')}
+					>
+						<Select.Trigger id="arrival" class="w-full">
+							<span class="truncate">
+								{transportModes.find((m) => m.key === formData.pedimento_transport_means.arrival)
+									?.name ||
+									transportTypes.find(
+										(t) => t.transport_code === formData.pedimento_transport_means.arrival
+									)?.description ||
+									formData.pedimento_transport_means.arrival ||
+									'Seleccionar...'}
+							</span>
+						</Select.Trigger>
+						<Select.Content class="max-h-[300px]">
+							{#each transportModes as mode}
+								<Select.Item value={mode.key}>{mode.key} - {mode.name}</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
+
+				<!-- Salida -->
+				<div class="space-y-2">
+					<Label for="departure">Salida</Label>
+					<Select.Root
+						type="single"
+						value={formData.pedimento_transport_means.departure || ''}
+						onValueChange={(v: string) => (formData.pedimento_transport_means.departure = v || '')}
+					>
+						<Select.Trigger id="departure" class="w-full">
+							<span class="truncate">
+								{transportModes.find((m) => m.key === formData.pedimento_transport_means.departure)
+									?.name ||
+									transportTypes.find(
+										(t) => t.transport_code === formData.pedimento_transport_means.departure
+									)?.description ||
+									formData.pedimento_transport_means.departure ||
+									'Seleccionar...'}
+							</span>
+						</Select.Trigger>
+						<Select.Content class="max-h-[300px]">
+							{#each transportModes as mode}
+								<Select.Item value={mode.key}>{mode.key} - {mode.name}</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
 			</div>
 
 			<!-- Lista de navegación rápida -->
-		<div class="w-full overflow-x-auto pb-2">
-			<div class="inline-flex md:grid md:w-full md:grid-cols-6 bg-muted p-1 text-muted-foreground rounded-md">
-				<button 
-					type="button"
-					onclick={() => activeSection = 'fechas'}
-					data-state={activeSection === 'fechas' ? 'active' : ''}
-					class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer hover:bg-background/50 data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
+			<div class="w-full overflow-x-auto pb-2">
+				<div
+					class="inline-flex rounded-md bg-muted p-1 text-muted-foreground md:grid md:w-full md:grid-cols-6"
 				>
-					Fechas
-				</button>
-				<button 
-					type="button"
-					onclick={() => activeSection = 'incrementables'}
-					data-state={activeSection === 'incrementables' ? 'active' : ''}
-					class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer hover:bg-background/50 data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
-				>
-					Incrementables
-				</button>
-				<button 
-					type="button"
-					onclick={() => activeSection = 'identificadores'}
-					data-state={activeSection === 'identificadores' ? 'active' : ''}
-					class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer hover:bg-background/50 data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
-				>
-					Identificadores
-				</button>
-				<button 
-					type="button"
-					onclick={() => activeSection = 'indices'}
-					data-state={activeSection === 'indices' ? 'active' : ''}
-					class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer hover:bg-background/50 data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
-				>
-					Indices
-				</button>
-				<button 
-					type="button"
-					onclick={() => activeSection = 'adicional'}
-					data-state={activeSection === 'adicional' ? 'active' : ''}
-					class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer hover:bg-background/50 data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
-				>
-					Adicional
-				</button>
-				<button 
-					type="button"
-					onclick={() => activeSection = 'decrementable'}
-					data-state={activeSection === 'decrementable' ? 'active' : ''}
-					class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer hover:bg-background/50 data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
-				>
-					Decrementable
-				</button>
+					<button
+						type="button"
+						onclick={() => (activeSection = 'fechas')}
+						data-state={activeSection === 'fechas' ? 'active' : ''}
+						class="inline-flex cursor-pointer items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap ring-offset-background transition-all hover:bg-background/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
+					>
+						Fechas
+					</button>
+					<button
+						type="button"
+						onclick={() => (activeSection = 'incrementables')}
+						data-state={activeSection === 'incrementables' ? 'active' : ''}
+						class="inline-flex cursor-pointer items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap ring-offset-background transition-all hover:bg-background/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
+					>
+						Incrementables
+					</button>
+					<button
+						type="button"
+						onclick={() => (activeSection = 'identificadores')}
+						data-state={activeSection === 'identificadores' ? 'active' : ''}
+						class="inline-flex cursor-pointer items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap ring-offset-background transition-all hover:bg-background/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
+					>
+						Identificadores
+					</button>
+					<button
+						type="button"
+						onclick={() => (activeSection = 'indices')}
+						data-state={activeSection === 'indices' ? 'active' : ''}
+						class="inline-flex cursor-pointer items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap ring-offset-background transition-all hover:bg-background/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
+					>
+						Indices
+					</button>
+					<button
+						type="button"
+						onclick={() => (activeSection = 'adicional')}
+						data-state={activeSection === 'adicional' ? 'active' : ''}
+						class="inline-flex cursor-pointer items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap ring-offset-background transition-all hover:bg-background/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
+					>
+						Adicional
+					</button>
+					<button
+						type="button"
+						onclick={() => (activeSection = 'decrementable')}
+						data-state={activeSection === 'decrementable' ? 'active' : ''}
+						class="inline-flex cursor-pointer items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap ring-offset-background transition-all hover:bg-background/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none data-[state=active]:border data-[state=active]:border-white/60 data-[state=active]:text-foreground"
+					>
+						Decrementable
+					</button>
+				</div>
 			</div>
-		</div>
 
 			<!-- Contenido dinámico según la sección activa -->
 			{#if activeSection === 'fechas'}
 				<!-- Fechas -->
-				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 					<!-- Fecha de Entrada -->
 					<div class="space-y-2">
 						<Label for="entry_date">Fecha de Entrada <span class="text-red-500">*</span></Label>
-						<Input
-							id="entry_date"
-							type="date"
-							bind:value={formData.entry_date}
-						/>
+						<Input id="entry_date" type="date" bind:value={formData.entry_date} />
 					</div>
 
 					<!-- Fecha Fin (Solo Consolidado) -->
 					{#if formData.pedimento_type === 'consolidated'}
 						<div class="space-y-2">
 							<Label for="end_date">Fecha Fin <span class="text-red-500">*</span></Label>
-							<Input
-								id="end_date"
-								type="date"
-								bind:value={formData.end_date}
-							/>
+							<Input id="end_date" type="date" bind:value={formData.end_date} />
 						</div>
 					{/if}
 
 					<!-- Fecha de Pago -->
 					<div class="space-y-2">
 						<Label for="payment_date">Fecha de Pago <span class="text-red-500">*</span></Label>
-						<Input
-							id="payment_date"
-							type="date"
-							bind:value={formData.payment_date}
-						/>
+						<Input id="payment_date" type="date" bind:value={formData.payment_date} />
 					</div>
 
 					<!-- Fecha de Presentación -->
 					<div class="space-y-2">
 						<Label for="pedimento_date">Fecha de Presentación</Label>
-						<Input
-							id="pedimento_date"
-							type="date"
-							bind:value={formData.pedimento_date}
-						/>
+						<Input id="pedimento_date" type="date" bind:value={formData.pedimento_date} />
 					</div>
 
 					<!-- Fecha de Extracción -->
 					<div class="space-y-2">
 						<Label for="extraction_date">Fecha de Extracción</Label>
-						<Input
-							id="extraction_date"
-							type="date"
-							bind:value={formData.extraction_date}
-						/>
+						<Input id="extraction_date" type="date" bind:value={formData.extraction_date} />
 					</div>
 
 					{#if formData.pedimento_code === 'R1'}
@@ -856,125 +1008,118 @@
 					<!-- Fecha Original -->
 					<div class="space-y-2">
 						<Label for="original_date">Fecha de Pago Original</Label>
-						<Input
-							id="original_date"
-							type="date"
-							bind:value={formData.original_date}
-						/>
-					</div>														
+						<Input id="original_date" type="date" bind:value={formData.original_date} />
+					</div>
 				</div>
 			{:else if activeSection === 'incrementables'}
 				<!-- Incrementables -->
 				<div class="space-y-4">
 					<!-- Factor informativo -->
-					<div class="text-sm font-medium">
-						Factor: 1.00000
-					</div>
+					<div class="text-sm font-medium">Factor: 1.00000</div>
 
-					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-					<!-- Valor Seguro -->
-					<div class="space-y-2">
-						<Label for="valor_seguro">Valor Seguro</Label>
-						<Input
-							id="valor_seguro"
-							type="number"
-							bind:value={formData.valor_seguro}
-							placeholder="0.00"
-						/>
-					</div>
-
-					<!-- Embalajes -->
-					<div class="space-y-2">
-						<Label for="embalajes">Embalajes</Label>
-						<Input
-							id="embalajes"
-							type="number"
-							bind:value={formData.embalajes}
-							placeholder="0.00"
-						/>
-					</div>
-
-					<!-- Fletes -->
-					<div class="space-y-2">
-						<Label for="fletes">Fletes</Label>
-						<Input
-							id="fletes"
-							type="number"
-							bind:value={formData.fletes}
-							placeholder="0.00"
-						/>
-					</div>
-
-					<!-- Deducibles -->
-					<div class="space-y-2">
-						<Label for="deducibles">Deducibles</Label>
-						<Input
-							id="deducibles"
-							type="number"
-							bind:value={formData.deducibles}
-							placeholder="0.00"
-						/>
-					</div>
-
-					<!-- Moneda -->
-					<div class="space-y-2">
-						<Label for="moneda_incrementables">Moneda</Label>
-						<Input
-							id="moneda_incrementables"
-							type="text"
-							maxlength={3}
-							bind:value={formData.moneda_incrementables}
-							placeholder="USD"
-						/>
-					</div>
-
-					<!-- Checkboxes agrupados -->
-					<div class="space-y-2">
-						<Label class="invisible">Opciones</Label>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<!-- Valor Seguro -->
 						<div class="space-y-2">
-							<div class="flex items-center space-x-2">
-								<input
-									id="no_afectar_valor_dolares_inc"
-									type="checkbox"
-									bind:checked={formData.no_afectar_valor_dolares_inc}
-									class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-0"
-								/>
-								<Label for="no_afectar_valor_dolares_inc" class="!m-0 cursor-pointer">
-									No Afectar Valor en Dólares del Pedimento
-								</Label>
-							</div>
-							<div class="flex items-center space-x-2">
-								<input
-									id="no_afectar_valor_aduana"
-									type="checkbox"
-									bind:checked={formData.no_afectar_valor_aduana}
-									class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-0"
-								/>
-								<Label for="no_afectar_valor_aduana" class="!m-0 cursor-pointer">
-									No Afectar Valor Aduana del Pedimento
-								</Label>
+							<Label for="valor_seguro">Valor Seguro</Label>
+							<Input
+								id="valor_seguro"
+								type="number"
+								bind:value={formData.valor_seguro}
+								placeholder="0.00"
+							/>
+						</div>
+
+						<!-- Embalajes -->
+						<div class="space-y-2">
+							<Label for="embalajes">Embalajes</Label>
+							<Input
+								id="embalajes"
+								type="number"
+								bind:value={formData.embalajes}
+								placeholder="0.00"
+							/>
+						</div>
+
+						<!-- Fletes -->
+						<div class="space-y-2">
+							<Label for="fletes">Fletes</Label>
+							<Input id="fletes" type="number" bind:value={formData.fletes} placeholder="0.00" />
+						</div>
+
+						<!-- Deducibles -->
+						<div class="space-y-2">
+							<Label for="deducibles">Deducibles</Label>
+							<Input
+								id="deducibles"
+								type="number"
+								bind:value={formData.deducibles}
+								placeholder="0.00"
+							/>
+						</div>
+
+						<!-- Moneda -->
+						<div class="space-y-2">
+							<Label for="moneda_incrementables">Moneda</Label>
+							<Input
+								id="moneda_incrementables"
+								type="text"
+								maxlength={3}
+								bind:value={formData.moneda_incrementables}
+								placeholder="USD"
+							/>
+						</div>
+
+						<!-- Checkboxes agrupados -->
+						<div class="space-y-2">
+							<Label class="invisible">Opciones</Label>
+							<div class="space-y-2">
+								<div class="flex items-center space-x-2">
+									<input
+										id="no_afectar_valor_dolares_inc"
+										type="checkbox"
+										bind:checked={formData.no_afectar_valor_dolares_inc}
+										class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-0"
+									/>
+									<Label for="no_afectar_valor_dolares_inc" class="!m-0 cursor-pointer">
+										No Afectar Valor en Dólares del Pedimento
+									</Label>
+								</div>
+								<div class="flex items-center space-x-2">
+									<input
+										id="no_afectar_valor_aduana"
+										type="checkbox"
+										bind:checked={formData.no_afectar_valor_aduana}
+										class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-0"
+									/>
+									<Label for="no_afectar_valor_aduana" class="!m-0 cursor-pointer">
+										No Afectar Valor Aduana del Pedimento
+									</Label>
+								</div>
 							</div>
 						</div>
 					</div>
-					</div>
 				</div>
 			{:else if activeSection === 'identificadores'}
 				<!-- Identificadores -->
 				<IdentificadoresTabForm bind:formData={identificadoresFormData} />
 			{:else if activeSection === 'indices'}
 				<!-- Indices -->
-				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 					<!-- Tipo de Factor a Actualizar -->
 					<div class="space-y-2">
 						<Label for="tipo_factor">Tipo de Factor a Actualizar</Label>
-						<Select.Root 
+						<Select.Root
 							type="single"
 							value={formData.tipo_factor || ''}
-							onValueChange={(v: string) => formData.tipo_factor = v ?? ''}
+							onValueChange={(v: string) => (formData.tipo_factor = v ?? '')}
 						>
 							<Select.Trigger id="tipo_factor" class="w-full">
 								<span class="truncate">
-									{formData.tipo_factor === 'INPC' ? 'I.N.P.C' : formData.tipo_factor === 'variacion_cambiaria' ? 'Variación Cambiaria' : 'Seleccionar'}
+									{formData.tipo_factor === 'INPC'
+										? 'I.N.P.C'
+										: formData.tipo_factor === 'variacion_cambiaria'
+											? 'Variación Cambiaria'
+											: 'Seleccionar'}
 								</span>
 							</Select.Trigger>
 							<Select.Content>
@@ -998,7 +1143,7 @@
 					<!-- Factor Actualización Manual -->
 					<div class="space-y-2">
 						<Label for="factor_actualizacion_manual" class="invisible">Checkbox</Label>
-						<div class="flex items-center space-x-2 h-10">
+						<div class="flex h-10 items-center space-x-2">
 							<input
 								id="factor_actualizacion_manual"
 								type="checkbox"
@@ -1013,7 +1158,7 @@
 				</div>
 			{:else if activeSection === 'adicional'}
 				<!-- Adicional -->
-				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 					<!-- Año para la impresión del pedimento -->
 					<div class="space-y-2">
 						<Label for="anio_impresion">Año para la Impresión del Pedimento</Label>
@@ -1023,14 +1168,14 @@
 							bind:value={formData.anio_impresion}
 							placeholder="25"
 							maxlength={2}
-							class="text-center w-40 focus-visible:ring-0 focus-visible:ring-offset-0"
+							class="w-40 text-center focus-visible:ring-0 focus-visible:ring-offset-0"
 						/>
 					</div>
 
 					<!-- Agregar Identificador PO Automáticamente -->
 					<div class="space-y-2">
 						<Label for="agregar_po_auto" class="invisible">Checkbox</Label>
-						<div class="flex items-center space-x-2 h-10">
+						<div class="flex h-10 items-center space-x-2">
 							<input
 								id="agregar_po_auto"
 								type="checkbox"
@@ -1046,7 +1191,7 @@
 					<!-- No Eximir Normas ComplementoX -->
 					<div class="space-y-2">
 						<Label for="no_eximir_normas" class="invisible">Checkbox</Label>
-						<div class="flex items-center space-x-2 h-10">
+						<div class="flex h-10 items-center space-x-2">
 							<input
 								id="no_eximir_normas"
 								type="checkbox"
@@ -1062,7 +1207,7 @@
 					<!-- Activar Destinatario en Facturas -->
 					<div class="space-y-2">
 						<Label for="activar_destinatario" class="invisible">Checkbox</Label>
-						<div class="flex items-center space-x-2 h-10">
+						<div class="flex h-10 items-center space-x-2">
 							<input
 								id="activar_destinatario"
 								type="checkbox"
@@ -1078,7 +1223,7 @@
 					<!-- Agregar Registro 502 en Archivo de Validación (Consolidados) -->
 					<div class="space-y-2">
 						<Label for="agregar_registro_502" class="invisible">Checkbox</Label>
-						<div class="flex items-center space-x-2 h-10">
+						<div class="flex h-10 items-center space-x-2">
 							<input
 								id="agregar_registro_502"
 								type="checkbox"
@@ -1094,7 +1239,7 @@
 					<!-- Agregar y Quitar Normas -->
 					<div class="space-y-2">
 						<Label for="agregar_quitar_normas" class="invisible">Checkbox</Label>
-						<div class="flex items-center space-x-2 h-10">
+						<div class="flex h-10 items-center space-x-2">
 							<input
 								id="agregar_quitar_normas"
 								type="checkbox"
@@ -1110,7 +1255,7 @@
 					<!-- Elegir Facturar con COVE en Partidas -->
 					<div class="space-y-2">
 						<Label for="facturar_cove" class="invisible">Checkbox</Label>
-						<div class="flex items-center space-x-2 h-10">
+						<div class="flex h-10 items-center space-x-2">
 							<input
 								id="facturar_cove"
 								type="checkbox"
@@ -1127,91 +1272,74 @@
 				<!-- Decrementable -->
 				<div class="space-y-4">
 					<!-- Factor informativo -->
-					<div class="text-sm font-medium">
-						Factor: 0.05000
-					</div>
+					<div class="text-sm font-medium">Factor: 0.05000</div>
 
-					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-					<!-- Fletes -->
-					<div class="space-y-2">
-						<Label for="fletes_decrementable">Fletes</Label>
-						<Input
-							id="fletes_decrementable"
-							type="number"
-							bind:value={formData.fletes_decrementable}
-							placeholder="0.00"
-						/>
-					</div>
-
-					<!-- Seguros -->
-					<div class="space-y-2">
-						<Label for="seguros">Seguros</Label>
-						<Input
-							id="seguros"
-							type="number"
-							bind:value={formData.seguros}
-							placeholder="0.00"
-						/>
-					</div>
-
-					<!-- Carga -->
-					<div class="space-y-2">
-						<Label for="carga">Carga</Label>
-						<Input
-							id="carga"
-							type="number"
-							bind:value={formData.carga}
-							placeholder="0.00"
-						/>
-					</div>
-
-					<!-- Descarga -->
-					<div class="space-y-2">
-						<Label for="descarga">Descarga</Label>
-						<Input
-							id="descarga"
-							type="number"
-							bind:value={formData.descarga}
-							placeholder="0.00"
-						/>
-					</div>
-
-					<!-- Otros -->
-					<div class="space-y-2">
-						<Label for="otros">Otros</Label>
-						<Input
-							id="otros"
-							type="number"
-							bind:value={formData.otros}
-							placeholder="0.00"
-						/>
-					</div>
-
-					<!-- Moneda -->
-					<div class="space-y-2">
-						<Label for="moneda_decrementable">Moneda</Label>
-						<Input
-							id="moneda_decrementable"
-							type="text"
-							bind:value={formData.moneda_decrementable}
-							placeholder="USD"
-						/>
-					</div>
-
-					<!-- Afectar Valor en Dólares del Pedimento -->
-					<div class="space-y-2">
-						<Label for="afectar_valor_dolares" class="invisible">Checkbox</Label>
-						<div class="flex items-center space-x-2 h-10">
-							<input
-								id="afectar_valor_dolares"
-								type="checkbox"
-								bind:checked={formData.afectar_valor_dolares}
-								class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-0"
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<!-- Fletes -->
+						<div class="space-y-2">
+							<Label for="fletes_decrementable">Fletes</Label>
+							<Input
+								id="fletes_decrementable"
+								type="number"
+								bind:value={formData.fletes_decrementable}
+								placeholder="0.00"
 							/>
-							<Label for="afectar_valor_dolares" class="!m-0 cursor-pointer">
-								Afectar Valor en Dólares del Pedimento
-							</Label>
 						</div>
+
+						<!-- Seguros -->
+						<div class="space-y-2">
+							<Label for="seguros">Seguros</Label>
+							<Input id="seguros" type="number" bind:value={formData.seguros} placeholder="0.00" />
+						</div>
+
+						<!-- Carga -->
+						<div class="space-y-2">
+							<Label for="carga">Carga</Label>
+							<Input id="carga" type="number" bind:value={formData.carga} placeholder="0.00" />
+						</div>
+
+						<!-- Descarga -->
+						<div class="space-y-2">
+							<Label for="descarga">Descarga</Label>
+							<Input
+								id="descarga"
+								type="number"
+								bind:value={formData.descarga}
+								placeholder="0.00"
+							/>
+						</div>
+
+						<!-- Otros -->
+						<div class="space-y-2">
+							<Label for="otros">Otros</Label>
+							<Input id="otros" type="number" bind:value={formData.otros} placeholder="0.00" />
+						</div>
+
+						<!-- Moneda -->
+						<div class="space-y-2">
+							<Label for="moneda_decrementable">Moneda</Label>
+							<Input
+								id="moneda_decrementable"
+								type="text"
+								bind:value={formData.moneda_decrementable}
+								placeholder="USD"
+							/>
+						</div>
+
+						<!-- Afectar Valor en Dólares del Pedimento -->
+						<div class="space-y-2">
+							<Label for="afectar_valor_dolares" class="invisible">Checkbox</Label>
+							<div class="flex h-10 items-center space-x-2">
+								<input
+									id="afectar_valor_dolares"
+									type="checkbox"
+									bind:checked={formData.afectar_valor_dolares}
+									class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-0"
+								/>
+								<Label for="afectar_valor_dolares" class="!m-0 cursor-pointer">
+									Afectar Valor en Dólares del Pedimento
+								</Label>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -1220,9 +1348,11 @@
 	</Card.Content>
 </Card.Root>
 
-<ExchangeRateDialog 
-	bind:open={showExchangeRateDialog} 
+<ExchangeRateDialog
+	bind:open={showExchangeRateDialog}
 	initialDate={missingExchangeRateDate}
 	overlayClass="bg-black/20"
-	onSuccess={() => {/* Optional: maybe refresh something or just let user continue */}} 
+	onSuccess={() => {
+		/* Optional: maybe refresh something or just let user continue */
+	}}
 />
diff --git a/frontend/src/lib/components/dashboard/pedimentos/edit/other-data-tab-form.svelte b/frontend/src/lib/components/dashboard/pedimentos/edit/other-data-tab-form.svelte
index 1682fadb..340f0d4b 100644
--- a/frontend/src/lib/components/dashboard/pedimentos/edit/other-data-tab-form.svelte
+++ b/frontend/src/lib/components/dashboard/pedimentos/edit/other-data-tab-form.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
@@ -195,8 +196,19 @@
 	// Focus first input when switching sub-views via mouse
 
 	$effect(() => {
-		if (activeView && $interactionMode === 'keyboard') {
-			focusStore.request('first-input');
+		// Accedemos a activeView para que el efecto dependa de él
+		if (activeView) {
+			// Usamos untrack para que no dependa de interactionMode
+			// Esto evita que se dispare el foco al empezar a escribir (cambio de mouse a keyboard)
+			const mode = untrack(() => {
+				let currentMode;
+				interactionMode.subscribe((v) => (currentMode = v))();
+				return currentMode;
+			});
+
+			if (mode === 'keyboard') {
+				focusStore.request('first-input');
+			}
 		}
 	});
 	$effect(() => {
diff --git a/frontend/src/lib/components/dashboard/shared/modals/sector-selector-dialog.svelte b/frontend/src/lib/components/dashboard/shared/modals/sector-selector-dialog.svelte
new file mode 100644
index 00000000..dffe17af
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/shared/modals/sector-selector-dialog.svelte
@@ -0,0 +1,226 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import * as Table from '$lib/components/ui/table';
+	import { Search, Loader2, Factory } from 'lucide-svelte';
+	import { sectorsApi, type Sector } from '$lib/api/dashboard/reference_data/sectors';
+	import { toast } from 'svelte-sonner';
+
+	// --- PROPS ---
+	let {
+		open = $bindable(false),
+		onSelect
+	}: {
+		open: boolean;
+		onSelect: (item: Sector) => void;
+	} = $props();
+
+	// --- ESTADO ---
+	let items = $state<Sector[]>([]);
+	let loading = $state(false);
+	let loadingMore = $state(false);
+	let searchTerm = $state('');
+	let previousSearchTerm = '';
+	let page = $state(1);
+	let pageSize = 50;
+	let hasMore = $state(true);
+	let totalItems = $state(0);
+	let observer: IntersectionObserver | null = null;
+	let bottomSentinel: HTMLElement | null = $state(null);
+	let searchTimeout: any;
+	let isInitialized = false;
+
+	// Cargar datos iniciales al abrir
+	$effect(() => {
+		if (open && !isInitialized) {
+			isInitialized = true;
+			previousSearchTerm = searchTerm;
+			resetAndLoad();
+		} else if (!open) {
+			isInitialized = false;
+		}
+	});
+
+	// Manejar búsqueda con debouncing
+	$effect(() => {
+		const term = searchTerm;
+		if (isInitialized && term !== previousSearchTerm) {
+			if (searchTimeout) clearTimeout(searchTimeout);
+			searchTimeout = setTimeout(() => {
+				previousSearchTerm = term;
+				resetAndLoad();
+			}, 500);
+		}
+	});
+
+	// Configurar IntersectionObserver para infinite scroll
+	$effect(() => {
+		if (bottomSentinel && hasMore && !loading && !loadingMore && open) {
+			if (observer) observer.disconnect();
+
+			observer = new IntersectionObserver(
+				(entries) => {
+					if (entries[0].isIntersecting && hasMore && !loading && !loadingMore) {
+						loadMore();
+					}
+				},
+				{ threshold: 0.1 }
+			);
+
+			observer.observe(bottomSentinel);
+		}
+
+		return () => {
+			if (observer) observer.disconnect();
+		};
+	});
+
+	async function resetAndLoad() {
+		page = 1;
+		items = [];
+		hasMore = true;
+		await loadSectors(true);
+	}
+
+	async function loadMore() {
+		if (!hasMore || loading || loadingMore) return;
+		page += 1;
+		await loadSectors(false);
+	}
+
+	async function loadSectors(isInitial: boolean) {
+		if (isInitial) {
+			loading = true;
+		} else {
+			loadingMore = true;
+		}
+
+		try {
+			const response = await sectorsApi.list(page, pageSize);
+
+			if (response.error) {
+				toast.error(`Error: ${response.error}`);
+				hasMore = false;
+				return;
+			}
+
+			let newItems = response.data?.items || [];
+			totalItems = response.data?.total || 0;
+
+			if (searchTerm) {
+				newItems = newItems.filter(
+					(item) =>
+						item.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+						item.key.toLowerCase().includes(searchTerm.toLowerCase())
+				);
+			}
+
+			if (isInitial) {
+				items = newItems;
+			} else {
+				items = [...items, ...newItems];
+			}
+
+			hasMore = items.length < totalItems && newItems.length > 0;
+		} catch (e: any) {
+			console.error('Error loading sectors:', e);
+			toast.error('Error al conectar con el servidor');
+			hasMore = false;
+		} finally {
+			loading = false;
+			loadingMore = false;
+		}
+	}
+
+	function handleSelect(item: Sector) {
+		if (onSelect) onSelect(item);
+		open = false;
+	}
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="flex max-h-[90vh] flex-col sm:max-w-[800px]">
+		<Dialog.Header>
+			<Dialog.Title>Seleccionar Sector PROSEC</Dialog.Title>
+			<Dialog.Description>
+				Seleccione el sector del catálogo. Escrolea para ver más.
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="relative my-2 w-full">
+			<Search class="absolute top-2.5 left-2.5 h-4 w-4 text-muted-foreground" />
+			<Input
+				type="search"
+				placeholder="Filtrar por clave o descripción..."
+				class="pl-9"
+				bind:value={searchTerm}
+			/>
+		</div>
+
+		<div class="min-h-[300px] flex-1 overflow-y-auto rounded-md border">
+			{#if loading && items.length === 0}
+				<div class="flex h-48 flex-col items-center justify-center gap-2 text-muted-foreground">
+					<Loader2 class="h-8 w-8 animate-spin text-primary" />
+					<p>Cargando catálogo...</p>
+				</div>
+			{:else if items.length === 0}
+				<div class="flex h-48 flex-col items-center justify-center text-muted-foreground">
+					<p>No se encontraron sectores.</p>
+				</div>
+			{:else}
+				<Table.Root>
+					<Table.Header>
+						<Table.Row>
+							<Table.Head class="w-[100px]">Clave</Table.Head>
+							<Table.Head>Descripción</Table.Head>
+							<Table.Head class="w-[100px]">Autorizado</Table.Head>
+						</Table.Row>
+					</Table.Header>
+					<Table.Body>
+						{#each items as item}
+							<Table.Row
+								class="cursor-pointer transition-colors hover:bg-accent/50"
+								onclick={() => handleSelect(item)}
+							>
+								<Table.Cell>
+									<div class="flex items-center gap-1">
+										<Factory class="h-3 w-3 text-orange-500" />
+										<span class="font-mono text-xs font-bold">
+											{item.key}
+										</span>
+									</div>
+								</Table.Cell>
+								<Table.Cell class="text-sm font-medium">
+									{item.description}
+								</Table.Cell>
+								<Table.Cell>
+									<span
+										class="rounded-full px-2 py-0.5 text-xs {item.authorized
+											? 'bg-green-100 text-green-700'
+											: 'bg-red-100 text-red-700'}"
+									>
+										{item.authorized ? 'Sí' : 'No'}
+									</span>
+								</Table.Cell>
+							</Table.Row>
+						{/each}
+					</Table.Body>
+				</Table.Root>
+
+				<div bind:this={bottomSentinel} class="flex h-10 items-center justify-center">
+					{#if loadingMore}
+						<Loader2 class="h-5 w-5 animate-spin text-muted-foreground" />
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		<Dialog.Footer>
+			<div class="mr-auto self-center text-xs text-muted-foreground">
+				{items.length} de {totalItems} registros
+			</div>
+			<Button variant="outline" onclick={() => (open = false)}>Cancelar</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/components/dashboard/shared/modals/state-selector-dialog.svelte b/frontend/src/lib/components/dashboard/shared/modals/state-selector-dialog.svelte
new file mode 100644
index 00000000..eb6f9c4c
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/shared/modals/state-selector-dialog.svelte
@@ -0,0 +1,224 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import * as Table from '$lib/components/ui/table';
+	import { Search, Loader2, MapPin } from 'lucide-svelte';
+	import { statesApi, type State } from '$lib/api/dashboard/reference_data/states';
+	import { toast } from 'svelte-sonner';
+
+	// --- PROPS ---
+	let {
+		open = $bindable(false),
+		onSelect
+	}: {
+		open: boolean;
+		onSelect: (item: State) => void;
+	} = $props();
+
+	// --- ESTADO ---
+	let items = $state<State[]>([]);
+	let loading = $state(false);
+	let loadingMore = $state(false);
+	let searchTerm = $state('');
+	let previousSearchTerm = '';
+	let page = $state(1);
+	let pageSize = 50;
+	let hasMore = $state(true);
+	let totalItems = $state(0);
+	let observer: IntersectionObserver | null = null;
+	let bottomSentinel: HTMLElement | null = $state(null);
+	let searchTimeout: any;
+	let isInitialized = false;
+
+	// Cargar datos iniciales al abrir
+	$effect(() => {
+		if (open && !isInitialized) {
+			isInitialized = true;
+			previousSearchTerm = searchTerm;
+			resetAndLoad();
+		} else if (!open) {
+			isInitialized = false;
+		}
+	});
+
+	// Manejar búsqueda con debouncing
+	$effect(() => {
+		const term = searchTerm;
+		if (isInitialized && term !== previousSearchTerm) {
+			if (searchTimeout) clearTimeout(searchTimeout);
+			searchTimeout = setTimeout(() => {
+				previousSearchTerm = term;
+				resetAndLoad();
+			}, 500);
+		}
+	});
+
+	// Configurar IntersectionObserver para infinite scroll
+	$effect(() => {
+		if (bottomSentinel && hasMore && !loading && !loadingMore && open) {
+			if (observer) observer.disconnect();
+
+			observer = new IntersectionObserver(
+				(entries) => {
+					if (entries[0].isIntersecting && hasMore && !loading && !loadingMore) {
+						loadMore();
+					}
+				},
+				{ threshold: 0.1 }
+			);
+
+			observer.observe(bottomSentinel);
+		}
+
+		return () => {
+			if (observer) observer.disconnect();
+		};
+	});
+
+	async function resetAndLoad() {
+		page = 1;
+		items = [];
+		hasMore = true;
+		await loadStates(true);
+	}
+
+	async function loadMore() {
+		if (!hasMore || loading || loadingMore) return;
+		page += 1;
+		await loadStates(false);
+	}
+
+	async function loadStates(isInitial: boolean) {
+		if (isInitial) {
+			loading = true;
+		} else {
+			loadingMore = true;
+		}
+
+		try {
+			// Note: statesApi.list takes page, pageSize, and searchTerm?
+			// Wait, let me check statesApi.list signature again.
+			// It only takes page and pageSize! I need to check if it supports search.
+			const response = await statesApi.list(page, pageSize);
+
+			if (response.error) {
+				toast.error(`Error: ${response.error}`);
+				hasMore = false;
+				return;
+			}
+
+			// Local filtering if search term exists (temporary workaround if API doesn't support it)
+			let newItems = response.data?.items || [];
+			totalItems = response.data?.total || 0;
+
+			if (searchTerm) {
+				newItems = newItems.filter(
+					(item) =>
+						item.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+						item.m3_key.toLowerCase().includes(searchTerm.toLowerCase())
+				);
+			}
+
+			if (isInitial) {
+				items = newItems;
+			} else {
+				items = [...items, ...newItems];
+			}
+
+			hasMore = items.length < totalItems && newItems.length > 0;
+		} catch (e: any) {
+			console.error('Error loading states:', e);
+			toast.error('Error al conectar con el servidor');
+			hasMore = false;
+		} finally {
+			loading = false;
+			loadingMore = false;
+		}
+	}
+
+	function handleSelect(item: State) {
+		if (onSelect) onSelect(item);
+		open = false;
+	}
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="flex max-h-[90vh] flex-col sm:max-w-[800px]">
+		<Dialog.Header>
+			<Dialog.Title>Seleccionar Estado</Dialog.Title>
+			<Dialog.Description>
+				Seleccione el estado del catálogo. Escrolea para ver más.
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="relative my-2 w-full">
+			<Search class="absolute top-2.5 left-2.5 h-4 w-4 text-muted-foreground" />
+			<Input
+				type="search"
+				placeholder="Filtrar por clave o descripción..."
+				class="pl-9"
+				bind:value={searchTerm}
+			/>
+		</div>
+
+		<div class="min-h-[300px] flex-1 overflow-y-auto rounded-md border">
+			{#if loading && items.length === 0}
+				<div class="flex h-48 flex-col items-center justify-center gap-2 text-muted-foreground">
+					<Loader2 class="h-8 w-8 animate-spin text-primary" />
+					<p>Cargando catálogo...</p>
+				</div>
+			{:else if items.length === 0}
+				<div class="flex h-48 flex-col items-center justify-center text-muted-foreground">
+					<p>No se encontraron estados.</p>
+				</div>
+			{:else}
+				<Table.Root>
+					<Table.Header>
+						<Table.Row>
+							<Table.Head class="w-[100px]">Clave M3</Table.Head>
+							<Table.Head>Descripción</Table.Head>
+							<Table.Head class="w-[80px]">MEX</Table.Head>
+						</Table.Row>
+					</Table.Header>
+					<Table.Body>
+						{#each items as item}
+							<Table.Row
+								class="cursor-pointer transition-colors hover:bg-accent/50"
+								onclick={() => handleSelect(item)}
+							>
+								<Table.Cell>
+									<div class="flex items-center gap-1">
+										<MapPin class="h-3 w-3 text-red-500" />
+										<span class="font-mono text-xs font-bold">
+											{item.m3_key}
+										</span>
+									</div>
+								</Table.Cell>
+								<Table.Cell class="text-sm font-medium">
+									{item.description}
+								</Table.Cell>
+								<Table.Cell class="font-mono text-xs">
+									{item.mex_key || '-'}
+								</Table.Cell>
+							</Table.Row>
+						{/each}
+					</Table.Body>
+				</Table.Root>
+
+				<div bind:this={bottomSentinel} class="flex h-10 items-center justify-center">
+					{#if loadingMore}
+						<Loader2 class="h-5 w-5 animate-spin text-muted-foreground" />
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		<Dialog.Footer>
+			<div class="mr-auto self-center text-xs text-muted-foreground">
+				{items.length} de {totalItems} registros
+			</div>
+			<Button variant="outline" onclick={() => (open = false)}>Cancelar</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/components/dashboard/transportation/trailers/columns.ts b/frontend/src/lib/components/dashboard/transportation/trailers/columns.ts
new file mode 100644
index 00000000..e00011c6
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/trailers/columns.ts
@@ -0,0 +1,64 @@
+/**
+ * Definición de columnas para la tabla de Trailers
+ */
+import type { Trailer } from '$lib/api/dashboard/a76/trailers';
+import type { ColumnDef } from '@tanstack/table-core';
+import { renderComponent } from '$lib/components/ui/data-table';
+import DataTableActions from './data-table-actions.svelte';
+
+export function createColumns(onSuccess?: () => void): ColumnDef<Trailer>[] {
+    return [
+        {
+            accessorKey: 'trailer_number',
+            header: 'Número de Trailer',
+            cell: ({ row }) => {
+                return row.original.trailer_number;
+            }
+        },
+        {
+            accessorKey: 'plate_number',
+            header: 'Placas',
+            cell: ({ row }) => {
+                return row.original.plate_number || '-';
+            }
+        },
+        {
+            accessorKey: 'trailer_type_key',
+            header: 'Tipo de Trailer',
+            cell: ({ row }) => {
+                return row.original.trailer_type_key || '-';
+            }
+        },
+        {
+            accessorKey: 'container_key',
+            header: 'Contenedor',
+            cell: ({ row }) => {
+                return row.original.container_key || '-';
+            }
+        },
+        {
+            accessorKey: 'state',
+            header: 'Estado',
+            cell: ({ row }) => {
+                return row.original.state || '-';
+            }
+        },
+        {
+            accessorKey: 'country',
+            header: 'País',
+            cell: ({ row }) => {
+                return row.original.country || '-';
+            }
+        },
+        {
+            id: 'actions',
+            header: 'Acciones',
+            cell: ({ row }) => {
+                return renderComponent(DataTableActions, {
+                    item: row.original,
+                    onSuccess
+                });
+            }
+        }
+    ];
+}
diff --git a/frontend/src/lib/components/dashboard/transportation/trailers/create-edit-dialog.svelte b/frontend/src/lib/components/dashboard/transportation/trailers/create-edit-dialog.svelte
new file mode 100644
index 00000000..6959aed2
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/trailers/create-edit-dialog.svelte
@@ -0,0 +1,207 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { trailersApi, type Trailer } from '$lib/api/dashboard/a76/trailers';
+	import { companyStore } from '$lib/stores/company.svelte';
+
+	let {
+		open = $bindable(false),
+		item = null,
+		onSuccess
+	}: {
+		open: boolean;
+		item?: Trailer | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	const isEdit = $derived(!!item);
+	const title = $derived(isEdit ? 'Editar Trailer' : 'Nuevo Trailer');
+
+	let formData = $state<Trailer>({
+		trailer_number: '',
+		ace_trailer_number: '',
+		trailer_type_key: '',
+		seal: '',
+		entity_code: '',
+		plate_number: '',
+		state: '',
+		country: '',
+		container_key: ''
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	$effect(() => {
+		if (item) {
+			formData = { ...item };
+		} else {
+			formData = {
+				trailer_number: '',
+				ace_trailer_number: '',
+				trailer_type_key: '',
+				seal: '',
+				entity_code: '',
+				plate_number: '',
+				state: '',
+				country: '',
+				container_key: ''
+			};
+		}
+	});
+
+	async function handleSubmit() {
+		error = null;
+		loading = true;
+
+		try {
+			const companyId = companyStore.activeCompany?.id;
+			if (!companyId) {
+				throw new Error('No hay una compañía seleccionada');
+			}
+
+			if (!formData.trailer_number.trim()) {
+				throw new Error('El número de trailer es requerido');
+			}
+
+			let response;
+			if (isEdit && item) {
+				response = await trailersApi.update(item.trailer_number, formData, companyId);
+			} else {
+				response = await trailersApi.create(formData, companyId);
+			}
+
+			if (response.error) {
+				throw new Error(response.error);
+			}
+
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error al guardar el trailer';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleCancel() {
+		open = false;
+		error = null;
+	}
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-5xl">
+		<Dialog.Header>
+			<Dialog.Title>{title}</Dialog.Title>
+			<Dialog.Description>
+				{isEdit
+					? 'Modifica los datos del trailer'
+					: 'Completa los datos para crear un nuevo trailer'}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form
+			onsubmit={(e) => {
+				e.preventDefault();
+				handleSubmit();
+			}}
+			class="space-y-6"
+		>
+			{#if error}
+				<div class="rounded-md bg-destructive/15 p-3 text-sm text-destructive">
+					{error}
+				</div>
+			{/if}
+
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+				<div class="grid gap-2">
+					<Label for="trailer_number"
+						>Número de Trailer <span class="text-destructive">*</span></Label
+					>
+					<Input
+						id="trailer_number"
+						bind:value={formData.trailer_number}
+						disabled={isEdit}
+						required
+						maxlength={20}
+					/>
+				</div>
+
+				<div class="grid gap-2">
+					<Label for="plate_number">Placas</Label>
+					<Input id="plate_number" bind:value={formData.plate_number} maxlength={17} />
+				</div>
+
+				<div class="grid gap-2">
+					<Label for="ace_trailer_number">Número Trailer ACE</Label>
+					<Input id="ace_trailer_number" bind:value={formData.ace_trailer_number} maxlength={10} />
+				</div>
+
+				<div class="grid gap-2">
+					<Label for="trailer_type_key">Tipo de Trailer (Clave)</Label>
+					<Input
+						id="trailer_type_key"
+						bind:value={formData.trailer_type_key}
+						maxlength={2}
+						placeholder="2 car."
+					/>
+				</div>
+
+				<div class="grid gap-2">
+					<Label for="container_key">Contenedor (Clave)</Label>
+					<Input
+						id="container_key"
+						bind:value={formData.container_key}
+						maxlength={3}
+						placeholder="3 car."
+					/>
+				</div>
+
+				<div class="grid gap-2">
+					<Label for="seal">Sello</Label>
+					<Input id="seal" bind:value={formData.seal} maxlength={15} />
+				</div>
+
+				<div class="grid gap-2">
+					<Label for="entity_code">Código Entidad</Label>
+					<Input
+						id="entity_code"
+						bind:value={formData.entity_code}
+						maxlength={1}
+						placeholder="1 car."
+					/>
+				</div>
+
+				<div class="grid grid-cols-2 gap-4">
+					<div class="grid gap-2">
+						<Label for="state">Estado</Label>
+						<Input id="state" bind:value={formData.state} maxlength={30} placeholder="Ej: TX" />
+					</div>
+					<div class="grid gap-2">
+						<Label for="country">País</Label>
+						<Input
+							id="country"
+							bind:value={formData.country}
+							maxlength={3}
+							placeholder="MEX / USA"
+						/>
+					</div>
+				</div>
+			</div>
+
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={handleCancel} disabled={loading}>
+					Cancelar
+				</Button>
+				<Button type="submit" disabled={loading}>
+					{loading ? 'Guardando...' : isEdit ? 'Actualizar' : 'Crear'}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/components/dashboard/transportation/trailers/data-table-actions.svelte b/frontend/src/lib/components/dashboard/transportation/trailers/data-table-actions.svelte
new file mode 100644
index 00000000..6dce1ab9
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/trailers/data-table-actions.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { trailersApi, type Trailer } from '$lib/api/dashboard/a76/trailers';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import { EllipsisVertical, Pencil, LoaderCircle, Trash2 } from 'lucide-svelte';
+	import CreateEditDialog from './create-edit-dialog.svelte';
+
+	let {
+		item,
+		onSuccess
+	}: {
+		item: Trailer;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let dialogOpen = $state(false);
+	let selectedItem = $state<Trailer | null>(null);
+
+	async function handleDelete() {
+		if (
+			!confirm(
+				`¿Estás seguro de eliminar el trailer "${item.trailer_number}"?\n\nNota: No se puede eliminar si tiene registros relacionados.`
+			)
+		) {
+			return;
+		}
+
+		if (!companyStore.activeCompany) {
+			alert('❌ Error: No hay una compañía seleccionada');
+			return;
+		}
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await trailersApi.delete(item.trailer_number, companyStore.activeCompany.id);
+
+			if (response.error) {
+				if (response.status === 401) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 1500);
+				} else {
+					error = response.error;
+					alert(`❌ Error al eliminar:\n\n${response.error}`);
+				}
+				return;
+			}
+
+			// Éxito
+			alert(`✅ Trailer "${item.trailer_number}" eliminado correctamente`);
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error al eliminar';
+			alert(`❌ Error: ${error}`);
+			console.error('Error deleting:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleEdit() {
+		selectedItem = item;
+		dialogOpen = true;
+	}
+
+	function handleDialogSuccess() {
+		dialogOpen = false;
+		selectedItem = null;
+		if (onSuccess) {
+			onSuccess();
+		}
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="ghost" size="icon" class="relative size-8 p-0">
+				<span class="sr-only">Abrir menú</span>
+				<EllipsisVertical size={16} />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end" class="w-[160px]">
+		<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleEdit}>
+			<Pencil size={16} class="mr-2" />
+			Editar
+		</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleDelete} class="text-destructive" disabled={loading}>
+			{#if loading}
+				<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+			{:else}
+				<Trash2 size={16} class="mr-2" />
+			{/if}
+			Eliminar
+		</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<CreateEditDialog bind:open={dialogOpen} item={selectedItem} onSuccess={handleDialogSuccess} />
diff --git a/frontend/src/lib/components/dashboard/transportation/trailers/data-table.svelte b/frontend/src/lib/components/dashboard/transportation/trailers/data-table.svelte
new file mode 100644
index 00000000..e0cdf7c1
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/trailers/data-table.svelte
@@ -0,0 +1,99 @@
+<script lang="ts" generics="TData, TValue">
+	import { type ColumnDef, getCoreRowModel } from '@tanstack/table-core';
+	import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	type DataTableProps<TData, TValue> = {
+		columns: ColumnDef<TData, TValue>[];
+		data: TData[];
+		pageCount: number;
+		totalItems: number;
+	};
+
+	let { data, columns, pageCount, totalItems }: DataTableProps<TData, TValue> = $props();
+
+	const table = createSvelteTable({
+		get data() {
+			return data;
+		},
+		get columns() {
+			return columns;
+		},
+		getCoreRowModel: getCoreRowModel(),
+		manualPagination: true,
+		get pageCount() {
+			return pageCount;
+		}
+	});
+
+	function handlePageChange(newPage: number) {
+		const url = new URL($page.url);
+		url.searchParams.set('page', newPage.toString());
+		goto(url);
+	}
+</script>
+
+<div class="rounded-md border bg-card">
+	<Table.Root>
+		<Table.Header>
+			{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+				<Table.Row>
+					{#each headerGroup.headers as header (header.id)}
+						<Table.Head>
+							{#if !header.isPlaceholder}
+								<FlexRender
+									content={header.column.columnDef.header}
+									context={header.getContext()}
+								/>
+							{/if}
+						</Table.Head>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Header>
+		<Table.Body>
+			{#each table.getRowModel().rows as row (row.id)}
+				<Table.Row data-state={row.getIsSelected() && 'selected'}>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell>
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
+					{/each}
+				</Table.Row>
+			{:else}
+				<Table.Row>
+					<Table.Cell colspan={columns.length} class="h-24 text-center">
+						No hay resultados.
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<div class="flex items-center justify-end space-x-2 py-4">
+	<div class="flex-1 text-sm text-muted-foreground">
+		Total: {totalItems}
+	</div>
+	<div class="space-x-2">
+		<Button
+			variant="outline"
+			size="sm"
+			onclick={() => handlePageChange(Number($page.url.searchParams.get('page') || 1) - 1)}
+			disabled={Number($page.url.searchParams.get('page') || 1) <= 1}
+		>
+			Anterior
+		</Button>
+		<Button
+			variant="outline"
+			size="sm"
+			onclick={() => handlePageChange(Number($page.url.searchParams.get('page') || 1) + 1)}
+			disabled={Number($page.url.searchParams.get('page') || 1) >= pageCount}
+		>
+			Siguiente
+		</Button>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/dashboard/transportation/transporters/create-edit-dialog.svelte b/frontend/src/lib/components/dashboard/transportation/transporters/create-edit-dialog.svelte
new file mode 100644
index 00000000..0cc296fd
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/transporters/create-edit-dialog.svelte
@@ -0,0 +1,306 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { transportersApi, type Transporter } from '$lib/api/dashboard/a76/transporters';
+	import { companyStore } from '$lib/stores/company.svelte';
+
+	let {
+		open = $bindable(false),
+		item = null,
+		onSuccess
+	}: {
+		open: boolean;
+		item?: Transporter | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	// Determinar si es modo edición o creación
+	const isEdit = $derived(!!item);
+	const title = $derived(isEdit ? 'Editar Transportista' : 'Nuevo Transportista');
+
+	// Estado del formulario
+	let formData = $state<Transporter>({
+		transporter_key: '',
+		name: '',
+		short_name: '',
+		responsible: '',
+		rfc: '',
+		streets: '',
+		postal_code: '',
+		city: '',
+		state: '',
+		country: '',
+		loader_code: '',
+		caat_code: '',
+		transport_code: '',
+		transport_interface_type: '',
+		ftp_server: '',
+		ftp_user: '',
+		ftp_password: '',
+		ftp_directory: '',
+		filler_code: ''
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Resetear formulario cuando cambia el item
+	$effect(() => {
+		if (item) {
+			formData = { ...item };
+		} else {
+			formData = {
+				transporter_key: '',
+				name: '',
+				short_name: '',
+				responsible: '',
+				rfc: '',
+				streets: '',
+				postal_code: '',
+				city: '',
+				state: '',
+				country: '',
+				loader_code: '',
+				caat_code: '',
+				transport_code: '',
+				transport_interface_type: '',
+				ftp_server: '',
+				ftp_user: '',
+				ftp_password: '',
+				ftp_directory: '',
+				filler_code: ''
+			};
+		}
+	});
+
+	async function handleSubmit() {
+		error = null;
+		loading = true;
+
+		try {
+			const companyId = companyStore.activeCompany?.id;
+			if (!companyId) {
+				throw new Error('No hay una compañía seleccionada');
+			}
+
+			// Validación básica
+			if (!formData.transporter_key.trim()) {
+				throw new Error('La clave es requerida');
+			}
+
+			let response;
+			if (isEdit && item) {
+				response = await transportersApi.update(item.transporter_key, formData, companyId);
+			} else {
+				response = await transportersApi.create(formData, companyId);
+			}
+
+			if (response.error) {
+				throw new Error(response.error);
+			}
+
+			// Cerrar diálogo y notificar éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error al guardar el transportista';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleCancel() {
+		open = false;
+		error = null;
+	}
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-5xl">
+		<Dialog.Header>
+			<Dialog.Title>{title}</Dialog.Title>
+			<Dialog.Description>
+				{isEdit
+					? 'Modifica los datos del transportista'
+					: 'Completa los datos para crear un nuevo transportista'}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form
+			onsubmit={(e) => {
+				e.preventDefault();
+				handleSubmit();
+			}}
+			class="space-y-6"
+		>
+			{#if error}
+				<div class="rounded-md bg-destructive/15 p-3 text-sm text-destructive">
+					{error}
+				</div>
+			{/if}
+
+			<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+				<!-- Información General -->
+				<section class="space-y-4">
+					<h3 class="border-b pb-2 text-sm font-semibold">Información General</h3>
+
+					<div class="grid gap-2">
+						<Label for="transporter_key">Clave <span class="text-destructive">*</span></Label>
+						<Input
+							id="transporter_key"
+							bind:value={formData.transporter_key}
+							disabled={isEdit}
+							required
+							maxlength={23}
+						/>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="name">Nombre / Razón Social</Label>
+						<Input id="name" bind:value={formData.name} maxlength={256} />
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="short_name">Nombre Corto</Label>
+						<Input
+							id="short_name"
+							bind:value={formData.short_name}
+							maxlength={10}
+							placeholder="Máx. 10 car."
+						/>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="rfc">RFC</Label>
+						<Input id="rfc" bind:value={formData.rfc} />
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="responsible">Responsable</Label>
+						<Input id="responsible" bind:value={formData.responsible} />
+					</div>
+				</section>
+
+				<!-- Códigos y Transporte -->
+				<section class="space-y-4">
+					<h3 class="border-b pb-2 text-sm font-semibold">Códigos de Transporte</h3>
+
+					<div class="grid gap-2">
+						<Label for="caat_code">Código CAAT</Label>
+						<Input id="caat_code" bind:value={formData.caat_code} />
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="transport_code">Código de Transporte</Label>
+						<Input
+							id="transport_code"
+							bind:value={formData.transport_code}
+							maxlength={8}
+							placeholder="Máx. 8 car."
+						/>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="loader_code">Código Cargador</Label>
+						<Input
+							id="loader_code"
+							bind:value={formData.loader_code}
+							maxlength={9}
+							placeholder="Máx. 9 car."
+						/>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="transport_interface_type">Tipo Interfaz</Label>
+						<Input
+							id="transport_interface_type"
+							bind:value={formData.transport_interface_type}
+							maxlength={20}
+						/>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="filler_code">Código Relleno</Label>
+						<Input id="filler_code" bind:value={formData.filler_code} maxlength={20} />
+					</div>
+				</section>
+
+				<!-- Dirección -->
+				<section class="space-y-4">
+					<h3 class="border-b pb-2 text-sm font-semibold">Dirección</h3>
+
+					<div class="grid gap-2">
+						<Label for="streets">Calle y Número</Label>
+						<Input id="streets" bind:value={formData.streets} />
+					</div>
+
+					<div class="grid grid-cols-2 gap-4">
+						<div class="grid gap-2">
+							<Label for="city">Ciudad</Label>
+							<Input id="city" bind:value={formData.city} maxlength={30} />
+						</div>
+						<div class="grid gap-2">
+							<Label for="state">Estado</Label>
+							<Input id="state" bind:value={formData.state} maxlength={30} />
+						</div>
+					</div>
+
+					<div class="grid grid-cols-2 gap-4">
+						<div class="grid gap-2">
+							<Label for="country">País</Label>
+							<Input
+								id="country"
+								bind:value={formData.country}
+								maxlength={3}
+								placeholder="MEX / USA"
+							/>
+						</div>
+						<div class="grid gap-2">
+							<Label for="postal_code">C.P.</Label>
+							<Input id="postal_code" bind:value={formData.postal_code} />
+						</div>
+					</div>
+				</section>
+
+				<!-- Configuración FTP -->
+				<section class="space-y-4">
+					<h3 class="border-b pb-2 text-sm font-semibold">Configuración FTP</h3>
+
+					<div class="grid gap-2">
+						<Label for="ftp_server">Servidor FTP</Label>
+						<Input id="ftp_server" bind:value={formData.ftp_server} />
+					</div>
+
+					<div class="grid grid-cols-2 gap-4">
+						<div class="grid gap-2">
+							<Label for="ftp_user">Usuario</Label>
+							<Input id="ftp_user" bind:value={formData.ftp_user} />
+						</div>
+						<div class="grid gap-2">
+							<Label for="ftp_password">Contraseña</Label>
+							<Input id="ftp_password" type="password" bind:value={formData.ftp_password} />
+						</div>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="ftp_directory">Directorio</Label>
+						<Input id="ftp_directory" bind:value={formData.ftp_directory} />
+					</div>
+				</section>
+			</div>
+
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={handleCancel} disabled={loading}>
+					Cancelar
+				</Button>
+				<Button type="submit" disabled={loading}>
+					{loading ? 'Guardando...' : isEdit ? 'Actualizar' : 'Crear'}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/components/dashboard/transportation/transporters/data-table-actions.svelte b/frontend/src/lib/components/dashboard/transportation/transporters/data-table-actions.svelte
new file mode 100644
index 00000000..8715b474
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/transporters/data-table-actions.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { transportersApi, type Transporter } from '$lib/api/dashboard/a76/transporters';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import { EllipsisVertical, Pencil, LoaderCircle, Trash2 } from 'lucide-svelte';
+	import CreateEditDialog from './create-edit-dialog.svelte';
+
+	let {
+		item,
+		onSuccess
+	}: {
+		item: Transporter;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let dialogOpen = $state(false);
+	let selectedItem = $state<Transporter | null>(null);
+
+	async function handleDelete() {
+		if (
+			!confirm(
+				`¿Estás seguro de eliminar el transportista "${item.transporter_key}"?\n\nNota: No se puede eliminar si tiene registros relacionados.`
+			)
+		) {
+			return;
+		}
+
+		if (!companyStore.activeCompany) {
+			alert('❌ Error: No hay una compañía seleccionada');
+			return;
+		}
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await transportersApi.delete(
+				item.transporter_key,
+				companyStore.activeCompany.id
+			);
+
+			if (response.error) {
+				if (response.status === 401) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 1500);
+				} else {
+					error = response.error;
+					alert(`❌ Error al eliminar:\n\n${response.error}`);
+				}
+				return;
+			}
+
+			// Éxito
+			alert(`✅ Transportista "${item.transporter_key}" eliminado correctamente`);
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error al eliminar';
+			alert(`❌ Error: ${error}`);
+			console.error('Error deleting:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleEdit() {
+		selectedItem = item;
+		dialogOpen = true;
+	}
+
+	function handleDialogSuccess() {
+		dialogOpen = false;
+		selectedItem = null;
+		if (onSuccess) {
+			onSuccess();
+		}
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="ghost" size="icon" class="relative size-8 p-0">
+				<span class="sr-only">Abrir menú</span>
+				<EllipsisVertical size={16} />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end" class="w-[160px]">
+		<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleEdit}>
+			<Pencil size={16} class="mr-2" />
+			Editar
+		</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleDelete} class="text-destructive" disabled={loading}>
+			{#if loading}
+				<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+			{:else}
+				<Trash2 size={16} class="mr-2" />
+			{/if}
+			Eliminar
+		</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<CreateEditDialog bind:open={dialogOpen} item={selectedItem} onSuccess={handleDialogSuccess} />
diff --git a/frontend/src/lib/components/dashboard/transportation/transporters/data-table.svelte b/frontend/src/lib/components/dashboard/transportation/transporters/data-table.svelte
new file mode 100644
index 00000000..e0cdf7c1
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/transporters/data-table.svelte
@@ -0,0 +1,99 @@
+<script lang="ts" generics="TData, TValue">
+	import { type ColumnDef, getCoreRowModel } from '@tanstack/table-core';
+	import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	type DataTableProps<TData, TValue> = {
+		columns: ColumnDef<TData, TValue>[];
+		data: TData[];
+		pageCount: number;
+		totalItems: number;
+	};
+
+	let { data, columns, pageCount, totalItems }: DataTableProps<TData, TValue> = $props();
+
+	const table = createSvelteTable({
+		get data() {
+			return data;
+		},
+		get columns() {
+			return columns;
+		},
+		getCoreRowModel: getCoreRowModel(),
+		manualPagination: true,
+		get pageCount() {
+			return pageCount;
+		}
+	});
+
+	function handlePageChange(newPage: number) {
+		const url = new URL($page.url);
+		url.searchParams.set('page', newPage.toString());
+		goto(url);
+	}
+</script>
+
+<div class="rounded-md border bg-card">
+	<Table.Root>
+		<Table.Header>
+			{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+				<Table.Row>
+					{#each headerGroup.headers as header (header.id)}
+						<Table.Head>
+							{#if !header.isPlaceholder}
+								<FlexRender
+									content={header.column.columnDef.header}
+									context={header.getContext()}
+								/>
+							{/if}
+						</Table.Head>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Header>
+		<Table.Body>
+			{#each table.getRowModel().rows as row (row.id)}
+				<Table.Row data-state={row.getIsSelected() && 'selected'}>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell>
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
+					{/each}
+				</Table.Row>
+			{:else}
+				<Table.Row>
+					<Table.Cell colspan={columns.length} class="h-24 text-center">
+						No hay resultados.
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<div class="flex items-center justify-end space-x-2 py-4">
+	<div class="flex-1 text-sm text-muted-foreground">
+		Total: {totalItems}
+	</div>
+	<div class="space-x-2">
+		<Button
+			variant="outline"
+			size="sm"
+			onclick={() => handlePageChange(Number($page.url.searchParams.get('page') || 1) - 1)}
+			disabled={Number($page.url.searchParams.get('page') || 1) <= 1}
+		>
+			Anterior
+		</Button>
+		<Button
+			variant="outline"
+			size="sm"
+			onclick={() => handlePageChange(Number($page.url.searchParams.get('page') || 1) + 1)}
+			disabled={Number($page.url.searchParams.get('page') || 1) >= pageCount}
+		>
+			Siguiente
+		</Button>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/dashboard/transportation/transporters/transporter-columns.ts b/frontend/src/lib/components/dashboard/transportation/transporters/transporter-columns.ts
new file mode 100644
index 00000000..32e69333
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/transporters/transporter-columns.ts
@@ -0,0 +1,64 @@
+/**
+ * Definición de columnas para la tabla de Transportistas
+ */
+import type { Transporter } from '$lib/api/dashboard/a76/transporters';
+import type { ColumnDef } from '@tanstack/table-core';
+import { renderComponent } from '$lib/components/ui/data-table';
+import DataTableActions from './data-table-actions.svelte';
+
+export function createColumns(onSuccess?: () => void): ColumnDef<Transporter>[] {
+    return [
+        {
+            accessorKey: 'transporter_key',
+            header: 'Clave',
+            cell: ({ row }) => {
+                return row.original.transporter_key;
+            }
+        },
+        {
+            accessorKey: 'name',
+            header: 'Nombre',
+            cell: ({ row }) => {
+                return row.original.name || '-';
+            }
+        },
+        {
+            accessorKey: 'short_name',
+            header: 'Nombre Corto',
+            cell: ({ row }) => {
+                return row.original.short_name || '-';
+            }
+        },
+        {
+            accessorKey: 'rfc',
+            header: 'RFC',
+            cell: ({ row }) => {
+                return row.original.rfc || '-';
+            }
+        },
+        {
+            accessorKey: 'caat_code',
+            header: 'CAAT',
+            cell: ({ row }) => {
+                return row.original.caat_code || '-';
+            }
+        },
+        {
+            accessorKey: 'transport_code',
+            header: 'Código Transporte',
+            cell: ({ row }) => {
+                return row.original.transport_code || '-';
+            }
+        },
+        {
+            id: 'actions',
+            header: 'Acciones',
+            cell: ({ row }) => {
+                return renderComponent(DataTableActions, {
+                    item: row.original,
+                    onSuccess
+                });
+            }
+        }
+    ];
+}
diff --git a/frontend/src/lib/components/dashboard/transportation/vehicles/columns.ts b/frontend/src/lib/components/dashboard/transportation/vehicles/columns.ts
new file mode 100644
index 00000000..2bacea83
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/vehicles/columns.ts
@@ -0,0 +1,64 @@
+/**
+ * Definición de columnas para la tabla de Vehículos
+ */
+import type { Vehicle } from '$lib/api/dashboard/a76/vehicles';
+import type { ColumnDef } from '@tanstack/table-core';
+import { renderComponent } from '$lib/components/ui/data-table';
+import DataTableActions from './data-table-actions.svelte';
+
+export function createColumns(onSuccess?: () => void): ColumnDef<Vehicle>[] {
+    return [
+        {
+            accessorKey: 'vehicle_key',
+            header: 'Clave',
+            cell: ({ row }) => {
+                return row.original.vehicle_key;
+            }
+        },
+        {
+            accessorKey: 'brand',
+            header: 'Marca',
+            cell: ({ row }) => {
+                return row.original.brand || '-';
+            }
+        },
+        {
+            accessorKey: 'year',
+            header: 'Año',
+            cell: ({ row }) => {
+                return row.original.year || '-';
+            }
+        },
+        {
+            accessorKey: 'plate_number',
+            header: 'Placas',
+            cell: ({ row }) => {
+                return row.original.plate_number || '-';
+            }
+        },
+        {
+            accessorKey: 'transporter_key',
+            header: 'Transportista',
+            cell: ({ row }) => {
+                return row.original.transporter_key || '-';
+            }
+        },
+        {
+            accessorKey: 'transport_type',
+            header: 'Tipo Transporte',
+            cell: ({ row }) => {
+                return row.original.transport_type || '-';
+            }
+        },
+        {
+            id: 'actions',
+            header: 'Acciones',
+            cell: ({ row }) => {
+                return renderComponent(DataTableActions, {
+                    item: row.original,
+                    onSuccess
+                });
+            }
+        }
+    ];
+}
diff --git a/frontend/src/lib/components/dashboard/transportation/vehicles/create-edit-dialog.svelte b/frontend/src/lib/components/dashboard/transportation/vehicles/create-edit-dialog.svelte
new file mode 100644
index 00000000..313dd45b
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/vehicles/create-edit-dialog.svelte
@@ -0,0 +1,317 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { vehiclesApi, type Vehicle } from '$lib/api/dashboard/a76/vehicles';
+	import { companyStore } from '$lib/stores/company.svelte';
+
+	let {
+		open = $bindable(false),
+		item = null,
+		onSuccess
+	}: {
+		open: boolean;
+		item?: Vehicle | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	// Determinar si es modo edición o creación
+	const isEdit = $derived(!!item);
+	const title = $derived(isEdit ? 'Editar Vehículo' : 'Nuevo Vehículo');
+
+	// Estado del formulario
+	let formData = $state<Vehicle>({
+		vehicle_key: '',
+		ace_vehicle_key: '',
+		transporter_key: '',
+		transport_identifier: '',
+		transport_type: '',
+		entity_code: '',
+		transponder_number: '',
+		dot_number: '',
+		plate_number: '',
+		city: '',
+		state: '',
+		country: '',
+		seal: '',
+		insurance_company_name: '',
+		insurance_number: '',
+		insurance_amount: undefined,
+		insurance_date: undefined,
+		box_number: '',
+		brand: '',
+		year: '',
+		series: '',
+		description: '',
+		engine_number: '',
+		sct_permission: '',
+		color: '',
+		container_key: ''
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Resetear formulario cuando cambia el item
+	$effect(() => {
+		if (item) {
+			formData = { ...item };
+		} else {
+			formData = {
+				vehicle_key: '',
+				ace_vehicle_key: '',
+				transporter_key: '',
+				transport_identifier: '',
+				transport_type: '',
+				entity_code: '',
+				transponder_number: '',
+				dot_number: '',
+				plate_number: '',
+				city: '',
+				state: '',
+				country: '',
+				seal: '',
+				insurance_company_name: '',
+				insurance_number: '',
+				insurance_amount: undefined,
+				insurance_date: undefined,
+				box_number: '',
+				brand: '',
+				year: '',
+				series: '',
+				description: '',
+				engine_number: '',
+				sct_permission: '',
+				color: '',
+				container_key: ''
+			};
+		}
+	});
+
+	async function handleSubmit() {
+		error = null;
+		loading = true;
+
+		try {
+			const companyId = companyStore.activeCompany?.id;
+			if (!companyId) {
+				throw new Error('No hay una compañía seleccionada');
+			}
+
+			// Validación básica
+			if (!formData.vehicle_key.trim()) {
+				throw new Error('La clave del vehículo es requerida');
+			}
+
+			let response;
+			if (isEdit && item) {
+				response = await vehiclesApi.update(item.vehicle_key, formData, companyId);
+			} else {
+				response = await vehiclesApi.create(formData, companyId);
+			}
+
+			if (response.error) {
+				throw new Error(response.error);
+			}
+
+			// Cerrar diálogo y notificar éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error al guardar el vehículo';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleCancel() {
+		open = false;
+		error = null;
+	}
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="max-h-[90vh] max-w-4xl overflow-y-auto">
+		<Dialog.Header>
+			<Dialog.Title>{title}</Dialog.Title>
+			<Dialog.Description>
+				{isEdit
+					? 'Modifica los datos del vehículo'
+					: 'Completa los datos para crear un nuevo vehículo de transporte'}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form
+			onsubmit={(e) => {
+				e.preventDefault();
+				handleSubmit();
+			}}
+			class="space-y-6"
+		>
+			{#if error}
+				<div class="rounded-md bg-destructive/15 p-3 text-sm text-destructive">
+					{error}
+				</div>
+			{/if}
+
+			<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+				<!-- Información del Vehículo -->
+				<section class="space-y-4">
+					<h3 class="border-b pb-2 text-sm font-semibold">Identificación del Vehículo</h3>
+
+					<div class="grid gap-2">
+						<Label for="vehicle_key"
+							>Clave del Vehículo <span class="text-destructive">*</span></Label
+						>
+						<Input
+							id="vehicle_key"
+							bind:value={formData.vehicle_key}
+							disabled={isEdit}
+							required
+							maxlength={14}
+						/>
+					</div>
+
+					<div class="grid grid-cols-2 gap-4">
+						<div class="grid gap-2">
+							<Label for="brand">Marca</Label>
+							<Input id="brand" bind:value={formData.brand} maxlength={20} />
+						</div>
+						<div class="grid gap-2">
+							<Label for="year">Año</Label>
+							<Input id="year" bind:value={formData.year} maxlength={4} placeholder="YYYY" />
+						</div>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="plate_number">Placas</Label>
+						<Input id="plate_number" bind:value={formData.plate_number} maxlength={17} />
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="series">Serie / VIN</Label>
+						<Input id="series" bind:value={formData.series} maxlength={30} />
+					</div>
+				</section>
+
+				<!-- Datos de Transporte -->
+				<section class="space-y-4">
+					<h3 class="border-b pb-2 text-sm font-semibold">Datos de Transporte</h3>
+
+					<div class="grid gap-2">
+						<Label for="transporter_key">Clave Transportista</Label>
+						<Input id="transporter_key" bind:value={formData.transporter_key} maxlength={23} />
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="transport_identifier">Identificador Transporte</Label>
+						<Input
+							id="transport_identifier"
+							bind:value={formData.transport_identifier}
+							maxlength={30}
+						/>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="transport_type">Tipo de Transporte</Label>
+						<Input
+							id="transport_type"
+							bind:value={formData.transport_type}
+							maxlength={2}
+							placeholder="2 car."
+						/>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="sct_permission">Permiso SCT</Label>
+						<Input id="sct_permission" bind:value={formData.sct_permission} maxlength={40} />
+					</div>
+				</section>
+
+				<!-- Seguro y Otros -->
+				<section class="space-y-4">
+					<h3 class="border-b pb-2 text-sm font-semibold">Seguro y Otros</h3>
+
+					<div class="grid gap-2">
+						<Label for="insurance_company_name">Aseguradora</Label>
+						<Input
+							id="insurance_company_name"
+							bind:value={formData.insurance_company_name}
+							maxlength={30}
+						/>
+					</div>
+
+					<div class="grid grid-cols-2 gap-4">
+						<div class="grid gap-2">
+							<Label for="insurance_number">Póliza</Label>
+							<Input id="insurance_number" bind:value={formData.insurance_number} maxlength={20} />
+						</div>
+						<div class="grid gap-2">
+							<Label for="insurance_amount">Monto Seguro</Label>
+							<Input id="insurance_amount" type="number" bind:value={formData.insurance_amount} />
+						</div>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="dot_number">Número DOT</Label>
+						<Input id="dot_number" bind:value={formData.dot_number} maxlength={8} />
+					</div>
+				</section>
+
+				<!-- Ubicación y Detalles -->
+				<section class="space-y-4">
+					<h3 class="border-b pb-2 text-sm font-semibold">Ubicación y Detalles</h3>
+
+					<div class="grid grid-cols-2 gap-4">
+						<div class="grid gap-2">
+							<Label for="state">Estado</Label>
+							<Input id="state" bind:value={formData.state} maxlength={30} />
+						</div>
+						<div class="grid gap-2">
+							<Label for="country">País</Label>
+							<Input
+								id="country"
+								bind:value={formData.country}
+								maxlength={3}
+								placeholder="MEX / USA"
+							/>
+						</div>
+					</div>
+
+					<div class="grid gap-2">
+						<Label for="description">Descripción</Label>
+						<Input id="description" bind:value={formData.description} maxlength={100} />
+					</div>
+
+					<div class="grid grid-cols-2 gap-4">
+						<div class="grid gap-2">
+							<Label for="color">Color</Label>
+							<Input id="color" bind:value={formData.color} maxlength={20} />
+						</div>
+						<div class="grid gap-2">
+							<Label for="container_key">Contenedor</Label>
+							<Input
+								id="container_key"
+								bind:value={formData.container_key}
+								maxlength={3}
+								placeholder="3 car."
+							/>
+						</div>
+					</div>
+				</section>
+			</div>
+
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={handleCancel} disabled={loading}>
+					Cancelar
+				</Button>
+				<Button type="submit" disabled={loading}>
+					{loading ? 'Guardando...' : isEdit ? 'Actualizar' : 'Crear'}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/components/dashboard/transportation/vehicles/data-table-actions.svelte b/frontend/src/lib/components/dashboard/transportation/vehicles/data-table-actions.svelte
new file mode 100644
index 00000000..9ec4eb00
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/vehicles/data-table-actions.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { vehiclesApi, type Vehicle } from '$lib/api/dashboard/a76/vehicles';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import { EllipsisVertical, Pencil, LoaderCircle, Trash2 } from 'lucide-svelte';
+	import CreateEditDialog from './create-edit-dialog.svelte';
+
+	let {
+		item,
+		onSuccess
+	}: {
+		item: Vehicle;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let dialogOpen = $state(false);
+	let selectedItem = $state<Vehicle | null>(null);
+
+	async function handleDelete() {
+		if (
+			!confirm(
+				`¿Estás seguro de eliminar el vehículo "${item.vehicle_key}"?\n\nNota: No se puede eliminar si tiene registros relacionados.`
+			)
+		) {
+			return;
+		}
+
+		if (!companyStore.activeCompany) {
+			alert('❌ Error: No hay una compañía seleccionada');
+			return;
+		}
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await vehiclesApi.delete(item.vehicle_key, companyStore.activeCompany.id);
+
+			if (response.error) {
+				if (response.status === 401) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 1500);
+				} else {
+					error = response.error;
+					alert(`❌ Error al eliminar:\n\n${response.error}`);
+				}
+				return;
+			}
+
+			// Éxito
+			alert(`✅ Vehículo "${item.vehicle_key}" eliminado correctamente`);
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error al eliminar';
+			alert(`❌ Error: ${error}`);
+			console.error('Error deleting:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleEdit() {
+		selectedItem = item;
+		dialogOpen = true;
+	}
+
+	function handleDialogSuccess() {
+		dialogOpen = false;
+		selectedItem = null;
+		if (onSuccess) {
+			onSuccess();
+		}
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="ghost" size="icon" class="relative size-8 p-0">
+				<span class="sr-only">Abrir menú</span>
+				<EllipsisVertical size={16} />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end" class="w-[160px]">
+		<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleEdit}>
+			<Pencil size={16} class="mr-2" />
+			Editar
+		</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleDelete} class="text-destructive" disabled={loading}>
+			{#if loading}
+				<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+			{:else}
+				<Trash2 size={16} class="mr-2" />
+			{/if}
+			Eliminar
+		</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<CreateEditDialog bind:open={dialogOpen} item={selectedItem} onSuccess={handleDialogSuccess} />
diff --git a/frontend/src/lib/components/dashboard/transportation/vehicles/data-table.svelte b/frontend/src/lib/components/dashboard/transportation/vehicles/data-table.svelte
new file mode 100644
index 00000000..e0cdf7c1
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/transportation/vehicles/data-table.svelte
@@ -0,0 +1,99 @@
+<script lang="ts" generics="TData, TValue">
+	import { type ColumnDef, getCoreRowModel } from '@tanstack/table-core';
+	import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	type DataTableProps<TData, TValue> = {
+		columns: ColumnDef<TData, TValue>[];
+		data: TData[];
+		pageCount: number;
+		totalItems: number;
+	};
+
+	let { data, columns, pageCount, totalItems }: DataTableProps<TData, TValue> = $props();
+
+	const table = createSvelteTable({
+		get data() {
+			return data;
+		},
+		get columns() {
+			return columns;
+		},
+		getCoreRowModel: getCoreRowModel(),
+		manualPagination: true,
+		get pageCount() {
+			return pageCount;
+		}
+	});
+
+	function handlePageChange(newPage: number) {
+		const url = new URL($page.url);
+		url.searchParams.set('page', newPage.toString());
+		goto(url);
+	}
+</script>
+
+<div class="rounded-md border bg-card">
+	<Table.Root>
+		<Table.Header>
+			{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+				<Table.Row>
+					{#each headerGroup.headers as header (header.id)}
+						<Table.Head>
+							{#if !header.isPlaceholder}
+								<FlexRender
+									content={header.column.columnDef.header}
+									context={header.getContext()}
+								/>
+							{/if}
+						</Table.Head>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Header>
+		<Table.Body>
+			{#each table.getRowModel().rows as row (row.id)}
+				<Table.Row data-state={row.getIsSelected() && 'selected'}>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell>
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
+					{/each}
+				</Table.Row>
+			{:else}
+				<Table.Row>
+					<Table.Cell colspan={columns.length} class="h-24 text-center">
+						No hay resultados.
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<div class="flex items-center justify-end space-x-2 py-4">
+	<div class="flex-1 text-sm text-muted-foreground">
+		Total: {totalItems}
+	</div>
+	<div class="space-x-2">
+		<Button
+			variant="outline"
+			size="sm"
+			onclick={() => handlePageChange(Number($page.url.searchParams.get('page') || 1) - 1)}
+			disabled={Number($page.url.searchParams.get('page') || 1) <= 1}
+		>
+			Anterior
+		</Button>
+		<Button
+			variant="outline"
+			size="sm"
+			onclick={() => handlePageChange(Number($page.url.searchParams.get('page') || 1) + 1)}
+			disabled={Number($page.url.searchParams.get('page') || 1) >= pageCount}
+		>
+			Siguiente
+		</Button>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/help/HelpDrawer.svelte b/frontend/src/lib/components/help/HelpDrawer.svelte
new file mode 100644
index 00000000..6a557aed
--- /dev/null
+++ b/frontend/src/lib/components/help/HelpDrawer.svelte
@@ -0,0 +1,229 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { authStore, currentUser } from '$lib/auth';
+	import * as Sheet from '$lib/components/ui/sheet';
+	import { Button } from '$lib/components/ui/button';
+	import { HelpCircle, Edit2, Save, X, ChevronLeft, Plus } from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
+	import { helpApi, type HelpArticle } from '$lib/api/help';
+	import { helpStore } from '$lib/stores/help.svelte';
+
+	// Nota: Estas librerías deben ser instaladas: npm install marked dompurify @types/dompurify
+	// Si no están, fallará el import. El usuario debe instalarlas.
+	// import { marked } from 'marked';
+	// import DOMPurify from 'dompurify';
+
+	let articles = $state<HelpArticle[]>([]);
+	let selectedArticle = $state<HelpArticle | null>(null);
+	let isEditing = $state(false);
+	let editContent = $state('');
+	let editTitle = $state('');
+	let isLoading = $state(false);
+	let isCreating = $state(false);
+
+	// Temporalmente habilitado para todos los usuarios por petición
+	const isAdmin = $derived(true);
+
+	async function loadArticles() {
+		isLoading = true;
+		try {
+			articles = await helpApi.listArticles();
+		} catch (e) {
+			toast.error('Error al cargar artículos de ayuda');
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function selectArticle(article: HelpArticle) {
+		selectedArticle = article;
+		isEditing = false;
+		isCreating = false;
+	}
+
+	function startEdit() {
+		if (!selectedArticle) return;
+		editContent = selectedArticle.content;
+		editTitle = selectedArticle.title;
+		isEditing = true;
+		isCreating = false;
+	}
+
+	function startCreate() {
+		editContent = '# Nuevo Artículo\nEscribe el contenido aquí...';
+		editTitle = '';
+		isEditing = true;
+		isCreating = true;
+		selectedArticle = {
+			uuid: '',
+			slug: '',
+			title: '',
+			content: '',
+			updated_at: '',
+			last_editor: ''
+		}; // Mock for UI
+	}
+
+	function generateSlug(text: string): string {
+		return text
+			.toLowerCase()
+			.replace(/[^\w ]+/g, '')
+			.replace(/ +/g, '-');
+	}
+
+	async function saveChanges() {
+		try {
+			if (isCreating) {
+				const slug = generateSlug(editTitle);
+				const newArticle = await helpApi.createArticle({
+					title: editTitle,
+					content: editContent,
+					slug: slug,
+					last_editor: $currentUser?.username || 'unknown'
+				});
+				selectedArticle = newArticle;
+				toast.success('Capítulo creado con éxito');
+			} else if (selectedArticle) {
+				const updated = await helpApi.updateArticle(selectedArticle.uuid, {
+					content: editContent,
+					title: editTitle,
+					last_editor: $currentUser?.username || 'unknown'
+				});
+				selectedArticle = updated;
+				toast.success('Cambios guardados y sincronizados');
+			}
+			isEditing = false;
+			isCreating = false;
+			loadArticles();
+		} catch (e) {
+			toast.error(isCreating ? 'Error al crear artículo' : 'Error al guardar cambios');
+		}
+	}
+
+	onMount(() => {
+		loadArticles();
+	});
+
+	// Simple markdown renderer fallback if marked is not available
+	function renderMarkdown(content: string) {
+		// En una implementación real, usar marked + DOMPurify
+		// return DOMPurify.sanitize(marked.parse(content));
+
+		// Fallback ultra-básico para demostración
+		return content
+			.replace(/^# (.*$)/gim, '<h1>$1</h1>')
+			.replace(/^## (.*$)/gim, '<h2>$1</h2>')
+			.replace(/^### (.*$)/gim, '<h3>$1</h3>')
+			.replace(/\*\*(.*)\*\*/gim, '<b>$1</b>')
+			.replace(/\*(.*)\*/gim, '<i>$1</i>')
+			.replace(/\n/gim, '<br />');
+	}
+</script>
+
+<Sheet.Root bind:open={helpStore.isOpen}>
+	<Sheet.Trigger>
+		<button
+			class="fixed right-6 bottom-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-110 active:scale-95"
+			aria-label="Ayuda"
+		>
+			<HelpCircle size={28} />
+		</button>
+	</Sheet.Trigger>
+	<Sheet.Content side="right" class="w-[400px] sm:w-[540px]">
+		<Sheet.Header>
+			<Sheet.Title class="flex items-center gap-2">
+				{#if selectedArticle}
+					<Button variant="ghost" size="icon" onclick={() => (selectedArticle = null)}>
+						<ChevronLeft size={20} />
+					</Button>
+				{/if}
+				Base de Conocimientos
+			</Sheet.Title>
+		</Sheet.Header>
+
+		<div class="mt-6 flex h-[calc(100vh-120px)] flex-col">
+			{#if !selectedArticle}
+				<div class="space-y-4">
+					<div class="flex items-center justify-between">
+						<h3 class="text-lg font-medium">Artículos Disponibles</h3>
+						{#if isAdmin}
+							<Button variant="outline" size="sm" onclick={startCreate}>
+								<Plus size={16} class="mr-2" /> Agregar Nuevo
+							</Button>
+						{/if}
+					</div>
+					{#if isLoading}
+						<p class="py-10 text-center text-sm text-muted-foreground">Cargando...</p>
+					{:else if articles.length === 0}
+						<p class="py-10 text-center text-sm text-muted-foreground">
+							No hay artículos de ayuda disponibles.
+						</p>
+					{/if}
+					<div class="grid gap-2">
+						{#each articles as article}
+							<button
+								onclick={() => selectArticle(article)}
+								class="flex flex-col items-start rounded-lg border p-4 text-left transition-colors hover:bg-accent"
+							>
+								<span class="font-semibold">{article.title}</span>
+								<span class="text-xs text-muted-foreground"
+									>Última edición: {new Date(article.updated_at).toLocaleDateString()}</span
+								>
+							</button>
+						{/each}
+					</div>
+				</div>
+			{:else}
+				<div class="flex flex-1 flex-col gap-4">
+					{#if isEditing}
+						<div class="space-y-4">
+							<input
+								bind:value={editTitle}
+								class="w-full rounded-md border bg-transparent p-2 text-xl font-bold"
+								placeholder="Título del artículo"
+							/>
+							<textarea
+								bind:value={editContent}
+								class="min-h-[400px] w-full flex-1 rounded-md border bg-transparent p-4 font-mono text-sm focus:ring-1 focus:ring-primary focus:outline-none"
+								placeholder="Escribe en Markdown..."
+							></textarea>
+							<div class="flex justify-end gap-2">
+								<Button
+									variant="outline"
+									onclick={() => {
+										isEditing = false;
+										if (isCreating) selectedArticle = null;
+										isCreating = false;
+									}}
+								>
+									<X size={16} class="mr-2" /> Cancelar
+								</Button>
+								<Button onclick={saveChanges}>
+									<Save size={16} class="mr-2" /> Guardar Cambios
+								</Button>
+							</div>
+						</div>
+					{:else}
+						<div class="flex flex-col gap-4">
+							<div class="flex items-center justify-between">
+								<h2 class="text-2xl font-bold">{selectedArticle.title}</h2>
+								{#if isAdmin}
+									<Button variant="outline" size="sm" onclick={startEdit}>
+										<Edit2 size={16} class="mr-2" /> Editar
+									</Button>
+								{/if}
+							</div>
+							<div class="prose prose-sm max-w-none border-t pt-4 dark:prose-invert">
+								{@html renderMarkdown(selectedArticle.content)}
+							</div>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</Sheet.Content>
+</Sheet.Root>
+
+<style>
+	/* Estilos adicionales si son necesarios */
+</style>
diff --git a/frontend/src/lib/components/sidebar/modules.ts b/frontend/src/lib/components/sidebar/modules.ts
index 5e7fe6ae..5a00a88d 100644
--- a/frontend/src/lib/components/sidebar/modules.ts
+++ b/frontend/src/lib/components/sidebar/modules.ts
@@ -15,6 +15,7 @@ import {
 	Settings2,
 	Shield,
 	Ship,
+	Truck,
 	Users,
 } from 'lucide-svelte';
 import * as m from "$lib/paraglide/messages.js";
@@ -192,6 +193,7 @@ export function getSidebarData(): SidebarData {
 						title: m["sidebar.general_catalogs.identifiers"](),
 						url: "/dashboard/general_catalogs/identifiers",
 					},
+					// -------------------------------------
 					{
 						title: m["sidebar.general_catalogs.incoterms"](),
 						url: "/dashboard/reference_data/incoterms",
@@ -333,6 +335,25 @@ export function getSidebarData(): SidebarData {
 					},
 				],
 			},
+			{
+				title: "Transportes",
+				url: "#",
+				icon: Truck,
+				items: [
+					{
+						title: "Transportistas",
+						url: "/dashboard/general_catalogs/transporters",
+					},
+					{
+						title: "Trailers",
+						url: "/dashboard/general_catalogs/trailers",
+					},
+					{
+						title: "Vehículos",
+						url: "/dashboard/general_catalogs/vehicles",
+					},
+				],
+			},
 			{
 				title: m["sidebar.goods.title"](),
 				url: "#",
@@ -514,7 +535,7 @@ export function getSidebarData(): SidebarData {
 			},
 			{
 				name: m["sidebar.reference_data.ayuda"](),
-				url: "#",
+				url: "/dashboard/help-center",
 				icon: Frame,
 			},
 		],
@@ -522,4 +543,4 @@ export function getSidebarData(): SidebarData {
 }
 
 // Exportar también como constante para compatibilidad (deprecado)
-export const sidebarData: SidebarData = getSidebarData();
+export const sidebarData: SidebarData = getSidebarData();
\ No newline at end of file
diff --git a/frontend/src/lib/components/sidebar/nav-projects.svelte b/frontend/src/lib/components/sidebar/nav-projects.svelte
index f67a27e2..15f67eb9 100644
--- a/frontend/src/lib/components/sidebar/nav-projects.svelte
+++ b/frontend/src/lib/components/sidebar/nav-projects.svelte
@@ -1,15 +1,16 @@
-	<script lang="ts">
-	import { tick } from "svelte";
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-	import { useSidebar } from "$lib/components/ui/sidebar/context.svelte.js";
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
-	import FolderIcon from "@lucide/svelte/icons/folder";
-	import ForwardIcon from "@lucide/svelte/icons/forward";
-	import Trash2Icon from "@lucide/svelte/icons/trash-2";
+<script lang="ts">
+	import { tick } from 'svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import { useSidebar } from '$lib/components/ui/sidebar/context.svelte.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import FolderIcon from '@lucide/svelte/icons/folder';
+	import ForwardIcon from '@lucide/svelte/icons/forward';
+	import Trash2Icon from '@lucide/svelte/icons/trash-2';
+	import { helpStore } from '$lib/stores/help.svelte';
 
 	let {
-		projects,
+		projects
 	}: {
 		projects: {
 			name: string;
@@ -58,8 +59,8 @@
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content
 						class="w-48 rounded-lg"
-						side={sidebar.isMobile ? "bottom" : "right"}
-						align={sidebar.isMobile ? "end" : "start"}
+						side={sidebar.isMobile ? 'bottom' : 'right'}
+						align={sidebar.isMobile ? 'end' : 'start'}
 					>
 						<DropdownMenu.Item>
 							<FolderIcon class="text-muted-foreground" />
@@ -78,22 +79,21 @@
 				</DropdownMenu.Root>
 			</Sidebar.MenuItem>
 		{/each}
-		
+
 		<Sidebar.MenuItem>
 			<Sidebar.MenuButton class="text-sidebar-foreground/70" onclick={handleMoreClick}>
 				<EllipsisIcon class="text-sidebar-foreground/70" />
 				<span>More</span>
 			</Sidebar.MenuButton>
-			
+
 			<DropdownMenu.Root bind:open>
-				<DropdownMenu.Trigger class="fixed z-50 size-0" style="top: {position.y}px; left: {position.x}px" />
-				<DropdownMenu.Content
-					class="w-48 rounded-lg"
-					side="right"
-					align="start"
-				>
+				<DropdownMenu.Trigger
+					class="fixed z-50 size-0"
+					style="top: {position.y}px; left: {position.x}px"
+				/>
+				<DropdownMenu.Content class="w-48 rounded-lg" side="right" align="start">
 					<DropdownMenu.Item>
-						<a href="/dashboard/csv-upload" class="flex items-center gap-2 w-full">
+						<a href="/dashboard/csv-upload" class="flex w-full items-center gap-2">
 							<FolderIcon class="size-4 text-muted-foreground" />
 							<span>Carga CSV</span>
 						</a>
diff --git a/frontend/src/lib/components/ui/alert-dialog/index.ts b/frontend/src/lib/components/ui/alert-dialog/index.ts
index cc281c58..98ad2f2c 100644
--- a/frontend/src/lib/components/ui/alert-dialog/index.ts
+++ b/frontend/src/lib/components/ui/alert-dialog/index.ts
@@ -1,4 +1,5 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { AlertDialog } from "bits-ui";
+const AlertDialogPrimitive = AlertDialog;
 import Trigger from "./alert-dialog-trigger.svelte";
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
diff --git a/frontend/src/lib/components/ui/dialog/index.ts b/frontend/src/lib/components/ui/dialog/index.ts
index dce1d9dc..1d37c04e 100644
--- a/frontend/src/lib/components/ui/dialog/index.ts
+++ b/frontend/src/lib/components/ui/dialog/index.ts
@@ -1,4 +1,4 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
+import { Dialog } from "bits-ui";
 
 import Title from "./dialog-title.svelte";
 import Footer from "./dialog-footer.svelte";
@@ -9,8 +9,8 @@ import Description from "./dialog-description.svelte";
 import Trigger from "./dialog-trigger.svelte";
 import Close from "./dialog-close.svelte";
 
-const Root = DialogPrimitive.Root;
-const Portal = DialogPrimitive.Portal;
+const Root = Dialog.Root;
+const Portal = Dialog.Portal;
 
 export {
 	Root,
diff --git a/frontend/src/lib/components/ui/sheet/index.ts b/frontend/src/lib/components/ui/sheet/index.ts
index 01d40c80..94a584fb 100644
--- a/frontend/src/lib/components/ui/sheet/index.ts
+++ b/frontend/src/lib/components/ui/sheet/index.ts
@@ -1,4 +1,5 @@
-import { Dialog as SheetPrimitive } from "bits-ui";
+import { Dialog } from "bits-ui";
+const SheetPrimitive = Dialog;
 import Trigger from "./sheet-trigger.svelte";
 import Close from "./sheet-close.svelte";
 import Overlay from "./sheet-overlay.svelte";
diff --git a/frontend/src/lib/stores/help.svelte.ts b/frontend/src/lib/stores/help.svelte.ts
new file mode 100644
index 00000000..19fe53e0
--- /dev/null
+++ b/frontend/src/lib/stores/help.svelte.ts
@@ -0,0 +1,9 @@
+// Store to control the Help Drawer state globally
+// Using Svelte 5 runes
+
+export const helpStore = $state({
+    isOpen: false,
+    open() { this.isOpen = true; },
+    close() { this.isOpen = false; },
+    toggle() { this.isOpen = !this.isOpen; }
+});
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 69b575c0..50904564 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -4,15 +4,15 @@
 	import { Toaster } from 'svelte-sonner';
 	import { page } from '$app/stores';
 	import { handleApiError } from '$lib/utils/error-handler';
-    import KeyboardManager from '$lib/components/keyboard/KeyboardManager.svelte';
-
+	import KeyboardManager from '$lib/components/keyboard/KeyboardManager.svelte';
+	import HelpDrawer from '$lib/components/help/HelpDrawer.svelte';
 
 	let { children } = $props();
 
 	// Detectar errores de CUALQUIER página (layout o page)
 	$effect(() => {
-		const pageData = $page.data as any;		
-		if (pageData?.error) {			
+		const pageData = $page.data as any;
+		if (pageData?.error) {
 			handleApiError(pageData.error);
 		}
 	});
@@ -24,7 +24,14 @@
 
 <Toaster richColors position="top-right" />
 <KeyboardManager />
+<HelpDrawer />
 <!-- Hidden Global Search Input for Shortcuts -->
-<input id="global-search-input" type="text" class="sr-only" placeholder="Global Search..." onfocus={() => console.log('Global Search Focused')} />
+<input
+	id="global-search-input"
+	type="text"
+	class="sr-only"
+	placeholder="Global Search..."
+	onfocus={() => console.log('Global Search Focused')}
+/>
 
 {@render children?.()}
diff --git a/frontend/src/routes/dashboard/+layout.svelte b/frontend/src/routes/dashboard/+layout.svelte
index 44acac62..adc8e934 100644
--- a/frontend/src/routes/dashboard/+layout.svelte
+++ b/frontend/src/routes/dashboard/+layout.svelte
@@ -8,6 +8,7 @@
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import { companyStore } from '$lib/stores/company.svelte';
 	import ExchangeRateGuard from '$lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte';
+	import { page } from '$app/state';
 
 	let { data, children }: { data: LayoutData; children: any } = $props();
 
@@ -63,4 +64,6 @@
 	</Sidebar.Inset>
 </Sidebar.Provider>
 
-<ExchangeRateGuard overlayClass="bg-black/5" />
+{#if !page.url.pathname.includes('/dashboard/invoices') && !page.url.pathname.includes('/dashboard/pedimentos')}
+	<ExchangeRateGuard overlayClass="bg-black/5" />
+{/if}
diff --git a/frontend/src/routes/dashboard/clients_and_providers/edit/[[id]]/+page.svelte b/frontend/src/routes/dashboard/clients_and_providers/edit/[[id]]/+page.svelte
index 8f5bbad8..991a2507 100644
--- a/frontend/src/routes/dashboard/clients_and_providers/edit/[[id]]/+page.svelte
+++ b/frontend/src/routes/dashboard/clients_and_providers/edit/[[id]]/+page.svelte
@@ -22,10 +22,29 @@
 		FileText,
 		Settings,
 		User,
-		Trash2
+		Trash2,
+		Search,
+		Globe,
+		MapPin as MapPinIcon,
+		Factory,
+		Calendar,
+		Hash,
+		ShieldCheck,
+		Award,
+		Fingerprint,
+		Briefcase
 	} from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 
+	// Componentes Compartidos (Modales)
+	import CountrySelectorDialog from '$lib/components/dashboard/goods/modales/country-selector-dialog.svelte';
+	import StateSelectorDialog from '$lib/components/dashboard/shared/modals/state-selector-dialog.svelte';
+	import SectorSelectorDialog from '$lib/components/dashboard/shared/modals/sector-selector-dialog.svelte';
+
+	import { type Country } from '$lib/api/dashboard/reference_data/countries';
+	import { type State } from '$lib/api/dashboard/reference_data/states';
+	import { type Sector } from '$lib/api/dashboard/reference_data/sectors';
+
 	// API & Stores
 	import { clientsProvidersApi } from '$lib/api/dashboard/a76/clients-providers';
 	import { companyStore } from '$lib/stores/company.svelte';
@@ -73,17 +92,30 @@
 		program: '',
 		program_number: '',
 		authorization_date_str: '', // String para input date
-		prosec: 0,
+		prosec: '',
 		manufacturer_id: '',
 		tax_id: '',
 		ctpat_svi: '',
-		is_certified_company: '0'
+		is_certified_company: false
 	});
 
 	let formData = $state(getEmptyForm());
 	let loading = $state(false);
 	let error = $state<string | null>(null);
 
+	// --- ESTADO PARA MODALES ---
+	let countryModalOpen = $state(false);
+	let stateModalOpen = $state(false);
+	let sectorModalOpen = $state(false);
+
+	const scaiiPrograms = [
+		{ value: 'IMMEX', label: 'IMMEX' },
+		{ value: 'PROSEC', label: 'PROSEC' },
+		{ value: 'ALTEX', label: 'ALTEX' },
+		{ value: 'ECEX', label: 'ECEX' },
+		{ value: 'DRAWBACK', label: 'DRAWBACK' }
+	];
+
 	// --- UTILIDADES ---
 	const intDateToString = (d?: number | null) =>
 		d
@@ -138,11 +170,11 @@
 					program: prog.program || '',
 					program_number: prog.program_number || '',
 					authorization_date_str: intDateToString(prog.secon_auth_date),
-					prosec: prog.prosec || 0,
+					prosec: prog.prosec ? String(prog.prosec) : '',
 					manufacturer_id: prog.manufacturer_id || '',
 					tax_id: prog.tax_id || '',
 					ctpat_svi: prog.ctpat_svi || '',
-					is_certified_company: prog.is_certified_company || '0'
+					is_certified_company: prog.is_certified_company === '1'
 				};
 			}
 		} catch (e: any) {
@@ -202,11 +234,11 @@
 					program: clean(formData.program),
 					program_number: clean(formData.program_number),
 					secon_auth_date: stringDateToInt(formData.authorization_date_str),
-					prosec: Number(formData.prosec) || null,
+					prosec: clean(formData.prosec),
 					manufacturer_id: clean(formData.manufacturer_id),
 					tax_id: clean(formData.tax_id),
 					ctpat_svi: clean(formData.ctpat_svi),
-					is_certified_company: clean(formData.is_certified_company)
+					is_certified_company: formData.is_certified_company ? '1' : '0'
 				}
 			};
 
@@ -470,17 +502,44 @@
 								</div>
 								<div class="grid gap-2">
 									<Label for="state">Estado</Label>
-									<Input id="state" bind:value={formData.state} maxlength={30} disabled={loading} />
+									<div class="flex gap-2">
+										<Input
+											id="state"
+											bind:value={formData.state}
+											maxlength={30}
+											disabled={loading}
+										/>
+										<Button
+											variant="outline"
+											size="icon"
+											onclick={() => (stateModalOpen = true)}
+											disabled={loading}
+											title="Buscar Estado"
+										>
+											<Search size={16} />
+										</Button>
+									</div>
 								</div>
 								<div class="grid gap-2">
 									<Label for="country">País (ISO)</Label>
-									<Input
-										id="country"
-										bind:value={formData.country}
-										placeholder="MEX"
-										maxlength={3}
-										disabled={loading}
-									/>
+									<div class="flex gap-2">
+										<Input
+											id="country"
+											bind:value={formData.country}
+											placeholder="MEX"
+											maxlength={3}
+											disabled={loading}
+										/>
+										<Button
+											variant="outline"
+											size="icon"
+											onclick={() => (countryModalOpen = true)}
+											disabled={loading}
+											title="Buscar País"
+										>
+											<Globe size={16} />
+										</Button>
+									</div>
 								</div>
 							</div>
 
@@ -509,77 +568,160 @@
 								>Información sobre IMMEX, PROSEC y otras certificaciones.</Card.Description
 							>
 						</Card.Header>
-						<Card.Content class="space-y-4">
-							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-								<div class="grid gap-2">
-									<Label for="program">Programa</Label>
-									<Input
-										id="program"
-										bind:value={formData.program}
-										placeholder="IMMEX"
-										maxlength={7}
-										disabled={loading}
-									/>
+						<Card.Content class="space-y-8">
+							<!-- Section: Promotion Programs -->
+							<div class="space-y-4">
+								<div class="flex items-center gap-2 text-sm font-semibold text-white">
+									<Briefcase size={18} />
+									<span>Programas de Fomento</span>
 								</div>
-								<div class="grid gap-2">
-									<Label for="program_num">Número de Programa</Label>
-									<Input
-										id="program_num"
-										bind:value={formData.program_number}
-										maxlength={40}
-										disabled={loading}
-									/>
+								<Separator />
+								<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+									<div class="grid gap-2 lg:col-span-1">
+										<Label for="program" class="flex items-center gap-2">
+											<Building2 size={14} class="text-muted-foreground" />
+											Programa
+										</Label>
+										<Select.Root
+											type="single"
+											value={formData.program}
+											onValueChange={(v) => (formData.program = v)}
+											disabled={loading}
+										>
+											<Select.Trigger id="program" class="w-full">
+												{formData.program || 'Selecciona un programa'}
+											</Select.Trigger>
+											<Select.Content>
+												{#each scaiiPrograms as prog}
+													<Select.Item value={prog.value} label={prog.label}>
+														{prog.label}
+													</Select.Item>
+												{/each}
+											</Select.Content>
+										</Select.Root>
+									</div>
+									<div class="grid gap-2">
+										<Label for="program_num" class="flex items-center gap-2">
+											<Hash size={14} class="text-muted-foreground" />
+											Número de Programa
+										</Label>
+										<Input
+											id="program_num"
+											bind:value={formData.program_number}
+											maxlength={40}
+											disabled={loading}
+											placeholder="P. ej. 1234-2024"
+										/>
+									</div>
+									<div class="grid gap-2">
+										<Label for="auth_date" class="flex items-center gap-2">
+											<Calendar size={14} class="text-muted-foreground" />
+											Fecha Autorización
+										</Label>
+										<Input
+											id="auth_date"
+											type="date"
+											bind:value={formData.authorization_date_str}
+											disabled={loading}
+										/>
+									</div>
+									<div class="grid gap-2">
+										<Label for="prosec" class="flex items-center gap-2">
+											<Factory size={14} class="text-muted-foreground" />
+											PROSEC (Sector)
+										</Label>
+										<div class="flex gap-2">
+											<Input
+												id="prosec"
+												bind:value={formData.prosec}
+												disabled={loading}
+												placeholder="Ej: XII, IV"
+											/>
+											<Button
+												variant="outline"
+												size="icon"
+												onclick={() => (sectorModalOpen = true)}
+												disabled={loading}
+												title="Buscar Sector"
+											>
+												<Search size={16} />
+											</Button>
+										</div>
+									</div>
 								</div>
 							</div>
 
-							<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-								<div class="grid gap-2">
-									<Label for="auth_date">Fecha Autorización</Label>
-									<Input
-										id="auth_date"
-										type="date"
-										bind:value={formData.authorization_date_str}
-										disabled={loading}
-									/>
+							<!-- Section: Industrial Identification -->
+							<div class="space-y-4 pt-4">
+								<div class="flex items-center gap-2 text-sm font-semibold text-white">
+									<Fingerprint size={18} />
+									<span>Identificación Industrial</span>
 								</div>
-								<div class="grid gap-2">
-									<Label for="tax_id">Tax ID (Extranjero)</Label>
-									<Input
-										id="tax_id"
-										bind:value={formData.tax_id}
-										maxlength={30}
-										disabled={loading}
-									/>
-								</div>
-								<div class="grid gap-2">
-									<Label for="man_id">Manufacturer ID</Label>
-									<Input
-										id="man_id"
-										bind:value={formData.manufacturer_id}
-										maxlength={25}
-										disabled={loading}
-									/>
+								<Separator />
+								<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+									<div class="grid gap-2">
+										<Label for="tax_id" class="flex items-center gap-2">
+											<Globe size={14} class="text-muted-foreground" />
+											Tax ID (Extranjero)
+										</Label>
+										<Input
+											id="tax_id"
+											bind:value={formData.tax_id}
+											maxlength={30}
+											disabled={loading}
+											placeholder="Identificador fiscal extranjero"
+										/>
+									</div>
+									<div class="grid gap-2">
+										<Label for="man_id" class="flex items-center gap-2">
+											<FileText size={14} class="text-muted-foreground" />
+											Manufacturer ID (MID)
+										</Label>
+										<Input
+											id="man_id"
+											bind:value={formData.manufacturer_id}
+											maxlength={25}
+											disabled={loading}
+											placeholder="P. ej. MXABCD12345"
+										/>
+									</div>
 								</div>
 							</div>
 
-							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-								<div class="grid gap-2">
-									<Label for="ctpat">C-TPAT / SVI</Label>
-									<Input
-										id="ctpat"
-										bind:value={formData.ctpat_svi}
-										maxlength={100}
-										disabled={loading}
-									/>
+							<!-- Section: Certifications & Security -->
+							<div class="space-y-4 pt-4">
+								<div class="flex items-center gap-2 text-sm font-semibold text-white">
+									<ShieldCheck size={18} />
+									<span>Certificaciones y Seguridad</span>
 								</div>
-								<div class="grid gap-2">
-									<Label for="prosec">PROSEC (Sector)</Label>
-									<Input
-										id="prosec"
-										type="number"
-										bind:value={formData.prosec}
-										disabled={loading}
-									/>
+								<Separator />
+								<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+									<div class="grid gap-2">
+										<Label for="ctpat" class="flex items-center gap-2">
+											<Award size={14} class="text-muted-foreground" />
+											C-TPAT / SVI
+										</Label>
+										<Input
+											id="ctpat"
+											bind:value={formData.ctpat_svi}
+											maxlength={100}
+											disabled={loading}
+											placeholder="P. ej. SVI-12345"
+										/>
+									</div>
+									<div class="flex items-center gap-3 rounded-lg border bg-card/50 p-4">
+										<Switch
+											id="is_certified"
+											bind:checked={formData.is_certified_company}
+											disabled={loading}
+										/>
+										<div class="grid gap-0.5">
+											<Label for="is_certified">Empresa Certificada</Label>
+											<p class="text-xs text-muted-foreground">
+												Indica si cuenta con certificación de empresa
+											</p>
+										</div>
+									</div>
 								</div>
 							</div>
 						</Card.Content>
@@ -670,3 +812,24 @@
 		</div>
 	</div>
 </div>
+
+<!-- MODALES DE SELECCIÓN -->
+<CountrySelectorDialog
+	bind:open={countryModalOpen}
+	onSelect={(country) => (formData.country = country.m3_key)}
+/>
+
+<StateSelectorDialog
+	bind:open={stateModalOpen}
+	onSelect={(state) => {
+		formData.state = state.description;
+		if (state.m3_key && !formData.country) {
+			formData.country = state.m3_key;
+		}
+	}}
+/>
+
+<SectorSelectorDialog
+	bind:open={sectorModalOpen}
+	onSelect={(sector) => (formData.prosec = sector.key)}
+/>
diff --git a/frontend/src/routes/dashboard/customs_brokers/+page.svelte b/frontend/src/routes/dashboard/customs_brokers/+page.svelte
index 5a92b518..611ce839 100644
--- a/frontend/src/routes/dashboard/customs_brokers/+page.svelte
+++ b/frontend/src/routes/dashboard/customs_brokers/+page.svelte
@@ -187,8 +187,7 @@
 	const brokerColumns = createBrokerColumns(handleActionSuccess);
 </script>
 
-<div class="flex flex-col h-[calc(100vh-4rem)] p-4 gap-4 pb-15">
-	<!-- Title -->
+<div class="flex h-[calc(100vh-4rem)] flex-col gap-4 p-4 pb-15">
 	<div class="flex items-center justify-between">
 		<div class="flex flex-col gap-1">
 			<h1 class="text-2xl font-bold">GESTIÓN ADUANAL</h1>
@@ -196,17 +195,17 @@
 		</div>
 	</div>
 
-	<Tabs.Root bind:value={activeTab} class="flex-1 flex flex-col overflow-hidden">
-		<Tabs.List class="w-full justify-start border-b rounded-none bg-transparent p-0 mb-4">
+	<Tabs.Root bind:value={activeTab} class="flex flex-1 flex-col overflow-hidden">
+		<Tabs.List class="mb-4 w-full justify-start rounded-none border-b bg-transparent p-0">
 			<Tabs.Trigger
 				value="brokers"
-				class="data-[state=active]:border-primary border-b-2 border-transparent rounded-none"
+				class="rounded-none border-b-2 border-transparent data-[state=active]:border-primary"
 			>
 				Agentes Aduanales
 			</Tabs.Trigger>
 			<Tabs.Trigger
 				value="customs"
-				class="data-[state=active]:border-primary border-b-2 border-transparent rounded-none"
+				class="rounded-none border-b-2 border-transparent data-[state=active]:border-primary"
 			>
 				Secciones Aduanales
 			</Tabs.Trigger>
@@ -214,13 +213,11 @@
 
 		<Tabs.Content
 			value="brokers"
-			class="flex-1 flex gap-4 overflow-hidden mt-0 data-[state=inactive]:hidden"
+			class="mt-0 flex flex-1 gap-4 overflow-hidden data-[state=inactive]:hidden"
 		>
-			<!-- Left Panel: Table -->
-			<div class="flex-1 flex flex-col gap-4 overflow-hidden">
-				<!-- Filters -->
-				<div class="border rounded-lg bg-card">
-					<div class="p-4 space-y-4">
+			<div class="flex flex-1 flex-col gap-4 overflow-hidden">
+				<div class="rounded-lg border bg-card">
+					<div class="space-y-4 p-4">
 						<div class="flex items-center justify-between">
 							<h2 class="text-sm font-semibold">Filtros</h2>
 							<span class="text-xs text-muted-foreground">Busque por nombre o patente</span>
@@ -244,23 +241,20 @@
 									oninput={handleSearch}
 								/>
 							</div>
-							<div class="flex items-end">
-								<!-- Placeholder for layout balance -->
-							</div>
+							<div class="flex items-end"></div>
 						</div>
 					</div>
 				</div>
 
-				<!-- Table -->
-				<div class="flex-1 flex flex-col border rounded-lg overflow-hidden">
-					<div class="flex items-center justify-between p-3 border-b bg-muted/30">
+				<div class="flex flex-1 flex-col overflow-hidden rounded-lg border">
+					<div class="flex items-center justify-between border-b bg-muted/30 p-3">
 						<h2 class="text-sm font-semibold">Listado</h2>
 						<div class="flex items-center gap-2">
 							<span class="text-xs text-muted-foreground">
 								{filteredItems.length} registros
 							</span>
 							<Button variant="outline" size="sm" onclick={loadItems}>
-								<RefreshCw class="h-4 w-4 mr-2" />
+								<RefreshCw class="mr-2 h-4 w-4" />
 								Actualizar
 							</Button>
 						</div>
@@ -275,9 +269,8 @@
 							idField="broker_key"
 						/>
 					</div>
-					<!-- Simple Pagination Controls -->
 					{#if totalItems > pageSize}
-						<div class="p-2 border-t flex justify-end gap-2">
+						<div class="flex justify-end gap-2 border-t p-2">
 							<Button
 								variant="outline"
 								size="sm"
@@ -286,7 +279,7 @@
 							>
 								Anterior
 							</Button>
-							<span class="flex items-center text-xs text-muted-foreground px-2">
+							<span class="flex items-center px-2 text-xs text-muted-foreground">
 								Página {currentPage} de {Math.ceil(totalItems / pageSize)}
 							</span>
 							<Button
@@ -302,33 +295,32 @@
 				</div>
 			</div>
 
-			<!-- Right Panel: Details -->
 			<div
-				class="w-96 flex-none flex flex-col border rounded-xl bg-muted/30 shadow-sm overflow-hidden"
+				class="flex w-96 flex-none flex-col overflow-hidden rounded-xl border bg-muted/30 shadow-sm"
 			>
-				<div class="p-4 border-b bg-card">
-					<p class="text-[10px] uppercase tracking-widest opacity-80 text-muted-foreground">
+				<div class="border-b bg-card p-4">
+					<p class="text-[10px] tracking-widest text-muted-foreground uppercase opacity-80">
 						Detalles del Agente
 					</p>
 					<h2
-						class="text-xl font-black font-mono tracking-tighter truncate"
+						class="truncate font-mono text-xl font-black tracking-tighter"
 						title={selectedItem?.name || ''}
 					>
 						{selectedItem?.name || '---'}
 					</h2>
-					<div class="flex items-center gap-2 mt-1">
-						<span class="text-xs font-mono text-muted-foreground"
+					<div class="mt-1 flex items-center gap-2">
+						<span class="font-mono text-xs text-muted-foreground"
 							>Patente: {selectedItem?.broker_key || ''}</span
 						>
 					</div>
 				</div>
 
-				<div class="flex-1 overflow-auto p-5 space-y-6 bg-card">
+				<div class="flex-1 space-y-6 overflow-auto bg-card p-5">
 					{#if selectedItem}
 						<div class="grid grid-cols-1 gap-4">
 							<div class="space-y-1">
 								<Label
-									class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1"
+									class="flex items-center gap-1 text-[10px] font-bold text-muted-foreground uppercase"
 								>
 									<FileText size={10} /> Licencia / Autorización
 								</Label>
@@ -338,21 +330,21 @@
 							{#if selectedItem.tax_id}
 								<div class="space-y-1">
 									<Label
-										class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1"
+										class="flex items-center gap-1 text-[10px] font-bold text-muted-foreground uppercase"
 									>
 										<Hash size={10} /> RFC / Tax ID
 									</Label>
-									<p class="text-sm font-mono">{selectedItem.tax_id}</p>
+									<p class="font-mono text-sm">{selectedItem.tax_id}</p>
 								</div>
 							{/if}
 
-							<div class="pt-4 border-t space-y-3">
+							<div class="space-y-3 border-t pt-4">
 								<Label
-									class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1"
+									class="flex items-center gap-1 text-[10px] font-bold text-muted-foreground uppercase"
 								>
 									<MapPin size={10} /> Dirección
 								</Label>
-								<div class="text-sm space-y-1">
+								<div class="space-y-1 text-sm">
 									<p>{selectedItem.address || ''}</p>
 									<p>
 										{[selectedItem.city, selectedItem.state].filter(Boolean).join(', ')}
@@ -363,9 +355,9 @@
 								</div>
 							</div>
 
-							<div class="pt-4 border-t space-y-3">
+							<div class="space-y-3 border-t pt-4">
 								<Label
-									class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1"
+									class="flex items-center gap-1 text-[10px] font-bold text-muted-foreground uppercase"
 								>
 									<Phone size={10} /> Contacto
 								</Label>
@@ -391,9 +383,9 @@
 						</div>
 					{:else}
 						<div
-							class="flex flex-col items-center justify-center h-full text-center text-muted-foreground opacity-50"
+							class="flex h-full flex-col items-center justify-center text-center text-muted-foreground opacity-50"
 						>
-							<Building2 class="h-12 w-12 mb-3" />
+							<Building2 class="mb-3 h-12 w-12" />
 							<p class="text-sm">Selecciona un agente</p>
 						</div>
 					{/if}
@@ -401,9 +393,8 @@
 			</div>
 		</Tabs.Content>
 
-		<Tabs.Content value="customs" class="flex-1 overflow-auto mt-0 data-[state=inactive]:hidden">
-			<!-- Reusing DataTable from Customs Sections -->
-			<Card.Root class="h-full flex flex-col border-none shadow-none">
+		<Tabs.Content value="customs" class="mt-0 flex-1 overflow-auto data-[state=inactive]:hidden">
+			<Card.Root class="flex h-full flex-col border-none shadow-none">
 				<Card.Content class="flex-1 p-0">
 					<SectionsDataTable
 						data={sections}
@@ -418,13 +409,13 @@
 	</Tabs.Root>
 </div>
 <div
-	class="fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-t shadow-lg z-[5] group-has-data-[state=collapsed]/sidebar-wrapper:ml-[calc(var(--sidebar-width-icon))] ml-[calc(var(--sidebar-width))]"
+	class="fixed right-0 bottom-0 left-0 z-[5] ml-[calc(var(--sidebar-width))] border-t bg-background/95 shadow-lg backdrop-blur group-has-data-[state=collapsed]/sidebar-wrapper:ml-[calc(var(--sidebar-width-icon))] supports-[backdrop-filter]:bg-background/80"
 >
-	<div class="px-4 py-4 max-w-[1400px] mx-auto">
+	<div class="mx-auto max-w-[1400px] px-4 py-4">
 		<div class="flex justify-end gap-2">
 			{#if activeTab === 'brokers'}
-				<Button size="sm" href="/dashboard/customs_brokers/edit">
-					<Plus class="h-4 w-4 mr-1" />
+				<Button size="sm" href="/dashboard/customs_brokers/edit/new">
+					<Plus class="mr-1 h-4 w-4" />
 					Nuevo
 				</Button>
 				<Button variant="outline" size="sm" onclick={handleEdit} disabled={!selectedItem}>
@@ -441,7 +432,7 @@
 				</Button>
 			{:else}
 				<Button size="sm" onclick={() => toast.info('Pendiente')}>
-					<Plus class="h-4 w-4 mr-1" />
+					<Plus class="mr-1 h-4 w-4" />
 					Nueva Sección
 				</Button>
 			{/if}
diff --git a/frontend/src/routes/dashboard/general_catalogs/trailers/+page.svelte b/frontend/src/routes/dashboard/general_catalogs/trailers/+page.svelte
new file mode 100644
index 00000000..596c3d13
--- /dev/null
+++ b/frontend/src/routes/dashboard/general_catalogs/trailers/+page.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Plus } from 'lucide-svelte';
+
+	// Importar componentes de la librería
+	import DataTable from '$lib/components/dashboard/transportation/trailers/data-table.svelte';
+	import CreateEditDialog from '$lib/components/dashboard/transportation/trailers/create-edit-dialog.svelte';
+	import { createColumns } from '$lib/components/dashboard/transportation/trailers/columns';
+
+	import { trailersApi, type Trailer } from '$lib/api/dashboard/a76/trailers';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import { browser } from '$app/environment';
+
+	// --- ESTADO ---
+	let data = $state<Trailer[]>([]);
+	let totalItems = $state(0);
+	let pageCount = $state(0);
+	let loading = $state(false);
+	let createDialogOpen = $state(false);
+
+	let currentPage = $derived(Number($page.url.searchParams.get('page')) || 1);
+	let pageSize = 10;
+
+	// Filtros
+	let searchNumber = $state($page.url.searchParams.get('trailer_number') || '');
+	let searchPlate = $state($page.url.searchParams.get('plate_number') || '');
+	let searchTimeout: NodeJS.Timeout;
+
+	// --- LOGICA ---
+	async function loadData() {
+		if (!companyStore.activeCompany) return;
+		loading = true;
+		try {
+			const response = await trailersApi.list(companyStore.activeCompany.id, {
+				page: currentPage,
+				page_size: pageSize,
+				trailer_number: searchNumber,
+				plate_number: searchPlate
+			});
+
+			if (response.data) {
+				data = response.data.items;
+				totalItems = response.data.total;
+				pageCount = Math.ceil(response.data.total / response.data.page_size);
+			}
+		} catch (error) {
+			console.error('Error loading trailers:', error);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleSearch() {
+		if (!browser) return;
+		clearTimeout(searchTimeout);
+		searchTimeout = setTimeout(() => {
+			const url = new URL($page.url);
+			url.searchParams.set('page', '1');
+
+			if (searchNumber) url.searchParams.set('trailer_number', searchNumber);
+			else url.searchParams.delete('trailer_number');
+
+			if (searchPlate) url.searchParams.set('plate_number', searchPlate);
+			else url.searchParams.delete('plate_number');
+
+			goto(url, { keepFocus: true, noScroll: true });
+		}, 500);
+	}
+
+	// Recargar datos cuando cambia el contexto de compañía o la página/filtros
+	$effect(() => {
+		const _ = { p: $page.url.href, c: companyStore.activeCompany?.id };
+		loadData();
+	});
+
+	const columns = createColumns(loadData);
+</script>
+
+<div class="flex h-full flex-col space-y-6 p-8">
+	<div class="flex items-center justify-between">
+		<div>
+			<h2 class="text-2xl font-bold tracking-tight">Trailers</h2>
+			<p class="text-muted-foreground">Gestión del catálogo de trailers de la compañía</p>
+		</div>
+		<Button onclick={() => (createDialogOpen = true)}>
+			<Plus class="mr-2 h-4 w-4" /> Nuevo Trailer
+		</Button>
+	</div>
+
+	<div class="flex items-center space-x-2">
+		<Input
+			placeholder="Buscar por número..."
+			class="h-8 w-[250px] bg-card"
+			bind:value={searchNumber}
+			oninput={handleSearch}
+		/>
+		<Input
+			placeholder="Buscar por placas..."
+			class="h-8 w-[250px] bg-card"
+			bind:value={searchPlate}
+			oninput={handleSearch}
+		/>
+	</div>
+
+	{#if loading && data.length === 0}
+		<div class="flex h-64 items-center justify-center text-muted-foreground">
+			Cargando trailers...
+		</div>
+	{:else}
+		<DataTable {data} {columns} {pageCount} {totalItems} />
+	{/if}
+
+	<CreateEditDialog bind:open={createDialogOpen} onSuccess={loadData} />
+</div>
diff --git a/frontend/src/routes/dashboard/general_catalogs/transporters/+page.svelte b/frontend/src/routes/dashboard/general_catalogs/transporters/+page.svelte
new file mode 100644
index 00000000..150e006b
--- /dev/null
+++ b/frontend/src/routes/dashboard/general_catalogs/transporters/+page.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Plus } from 'lucide-svelte';
+
+	// Importar componentes de la librería
+	import DataTable from '$lib/components/dashboard/transportation/transporters/data-table.svelte';
+	import CreateEditDialog from '$lib/components/dashboard/transportation/transporters/create-edit-dialog.svelte';
+	import { createColumns } from '$lib/components/dashboard/transportation/transporters/transporter-columns';
+
+	import { transportersApi, type Transporter } from '$lib/api/dashboard/a76/transporters';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import { browser } from '$app/environment';
+
+	// --- ESTADO ---
+	let data = $state<Transporter[]>([]);
+	let totalItems = $state(0);
+	let pageCount = $state(0);
+	let loading = $state(false);
+	let createDialogOpen = $state(false);
+
+	let currentPage = $derived(Number($page.url.searchParams.get('page')) || 1);
+	let pageSize = 10;
+
+	// Filtros
+	let searchKey = $state($page.url.searchParams.get('transporter_key') || '');
+	let searchName = $state($page.url.searchParams.get('name') || '');
+	let searchTimeout: NodeJS.Timeout;
+
+	// --- LOGICA ---
+	async function loadData() {
+		if (!companyStore.activeCompany) return;
+		loading = true;
+		try {
+			const response = await transportersApi.list(companyStore.activeCompany.id, {
+				page: currentPage,
+				page_size: pageSize,
+				transporter_key: searchKey,
+				name: searchName
+			});
+
+			if (response.data) {
+				data = response.data.items;
+				totalItems = response.data.total;
+				pageCount = Math.ceil(response.data.total / response.data.page_size);
+			}
+		} catch (error) {
+			console.error('Error loading transporters:', error);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleSearch() {
+		if (!browser) return;
+		clearTimeout(searchTimeout);
+		searchTimeout = setTimeout(() => {
+			const url = new URL($page.url);
+			url.searchParams.set('page', '1');
+
+			if (searchKey) url.searchParams.set('transporter_key', searchKey);
+			else url.searchParams.delete('transporter_key');
+
+			if (searchName) url.searchParams.set('name', searchName);
+			else url.searchParams.delete('name');
+
+			goto(url, { keepFocus: true, noScroll: true });
+		}, 500);
+	}
+
+	// Recargar datos cuando cambia el contexto de compañía o la página/filtros
+	$effect(() => {
+		const _ = { p: $page.url.href, c: companyStore.activeCompany?.id };
+		loadData();
+	});
+
+	const columns = createColumns(loadData);
+</script>
+
+<div class="flex h-full flex-col space-y-6 p-8">
+	<div class="flex items-center justify-between">
+		<div>
+			<h2 class="text-2xl font-bold tracking-tight">Transportistas</h2>
+			<p class="text-muted-foreground">Gestión del catálogo de líneas transportistas</p>
+		</div>
+		<Button onclick={() => (createDialogOpen = true)}>
+			<Plus class="mr-2 h-4 w-4" /> Nuevo Transportista
+		</Button>
+	</div>
+
+	<div class="flex items-center space-x-2">
+		<Input
+			placeholder="Buscar por clave..."
+			class="h-8 w-[250px] bg-card"
+			bind:value={searchKey}
+			oninput={handleSearch}
+		/>
+		<Input
+			placeholder="Buscar por nombre..."
+			class="h-8 w-[250px] bg-card"
+			bind:value={searchName}
+			oninput={handleSearch}
+		/>
+	</div>
+
+	{#if loading && data.length === 0}
+		<div class="flex h-64 items-center justify-center text-muted-foreground">
+			Cargando transportistas...
+		</div>
+	{:else}
+		<DataTable {data} {columns} {pageCount} {totalItems} />
+	{/if}
+
+	<CreateEditDialog bind:open={createDialogOpen} onSuccess={loadData} />
+</div>
diff --git a/frontend/src/routes/dashboard/general_catalogs/vehicles/+page.svelte b/frontend/src/routes/dashboard/general_catalogs/vehicles/+page.svelte
new file mode 100644
index 00000000..1bcc8916
--- /dev/null
+++ b/frontend/src/routes/dashboard/general_catalogs/vehicles/+page.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Plus } from 'lucide-svelte';
+
+	// Importar componentes de la librería
+	import DataTable from '$lib/components/dashboard/transportation/vehicles/data-table.svelte';
+	import CreateEditDialog from '$lib/components/dashboard/transportation/vehicles/create-edit-dialog.svelte';
+	import { createColumns } from '$lib/components/dashboard/transportation/vehicles/columns';
+
+	import { vehiclesApi, type Vehicle } from '$lib/api/dashboard/a76/vehicles';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import { browser } from '$app/environment';
+
+	// --- ESTADO ---
+	let data = $state<Vehicle[]>([]);
+	let totalItems = $state(0);
+	let pageCount = $state(0);
+	let loading = $state(false);
+	let createDialogOpen = $state(false);
+
+	let currentPage = $derived(Number($page.url.searchParams.get('page')) || 1);
+	let pageSize = 10;
+
+	// Filtros
+	let searchKey = $state($page.url.searchParams.get('vehicle_key') || '');
+	let searchPlate = $state($page.url.searchParams.get('plate_number') || '');
+	let searchTimeout: NodeJS.Timeout;
+
+	// --- LOGICA ---
+	async function loadData() {
+		if (!companyStore.activeCompany) return;
+		loading = true;
+		try {
+			const response = await vehiclesApi.list(companyStore.activeCompany.id, {
+				page: currentPage,
+				page_size: pageSize,
+				vehicle_key: searchKey,
+				plate_number: searchPlate
+			});
+
+			if (response.data) {
+				data = response.data.items;
+				totalItems = response.data.total;
+				pageCount = Math.ceil(response.data.total / response.data.page_size);
+			}
+		} catch (error) {
+			console.error('Error loading vehicles:', error);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleSearch() {
+		if (!browser) return;
+		clearTimeout(searchTimeout);
+		searchTimeout = setTimeout(() => {
+			const url = new URL($page.url);
+			url.searchParams.set('page', '1');
+
+			if (searchKey) url.searchParams.set('vehicle_key', searchKey);
+			else url.searchParams.delete('vehicle_key');
+
+			if (searchPlate) url.searchParams.set('plate_number', searchPlate);
+			else url.searchParams.delete('plate_number');
+
+			goto(url, { keepFocus: true, noScroll: true });
+		}, 500);
+	}
+
+	// Recargar datos cuando cambia el contexto de compañía o la página/filtros
+	$effect(() => {
+		const _ = { p: $page.url.href, c: companyStore.activeCompany?.id };
+		loadData();
+	});
+
+	const columns = createColumns(loadData);
+</script>
+
+<div class="flex h-full flex-col space-y-6 p-8">
+	<div class="flex items-center justify-between">
+		<div>
+			<h2 class="text-2xl font-bold tracking-tight">Vehículos (Transporte)</h2>
+			<p class="text-muted-foreground">
+				Gestión del catálogo de camiones y vehículos de transporte
+			</p>
+		</div>
+		<Button onclick={() => (createDialogOpen = true)}>
+			<Plus class="mr-2 h-4 w-4" /> Nuevo Vehículo
+		</Button>
+	</div>
+
+	<div class="flex items-center space-x-2">
+		<Input
+			placeholder="Buscar por clave..."
+			class="h-8 w-[250px] bg-card"
+			bind:value={searchKey}
+			oninput={handleSearch}
+		/>
+		<Input
+			placeholder="Buscar por placas..."
+			class="h-8 w-[250px] bg-card"
+			bind:value={searchPlate}
+			oninput={handleSearch}
+		/>
+	</div>
+
+	{#if loading && data.length === 0}
+		<div class="flex h-64 items-center justify-center text-muted-foreground">
+			Cargando vehículos...
+		</div>
+	{:else}
+		<DataTable {data} {columns} {pageCount} {totalItems} />
+	{/if}
+
+	<CreateEditDialog bind:open={createDialogOpen} onSuccess={loadData} />
+</div>
diff --git a/frontend/src/routes/dashboard/help-center/+page.svelte b/frontend/src/routes/dashboard/help-center/+page.svelte
new file mode 100644
index 00000000..38828eeb
--- /dev/null
+++ b/frontend/src/routes/dashboard/help-center/+page.svelte
@@ -0,0 +1,266 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { helpApi, type HelpArticle } from '$lib/api/help';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import {
+		Plus,
+		Trash2,
+		Edit,
+		Loader2,
+		Search,
+		Book,
+		Image as ImageIcon,
+		FileText,
+		Video,
+		FileCode
+	} from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
+
+	let articles: HelpArticle[] = $state([]);
+	let loading = $state(true);
+	let searchTerm = $state('');
+	const HUB_MODE = import.meta.env.VITE_HUB_MODE === 'true';
+
+	// Modals state
+	let showCreateModal = $state(false);
+	let showEditModal = $state(false);
+	let showDeleteDialog = $state(false);
+	let processing = $state(false);
+
+	let selectedArticle: HelpArticle | null = $state(null);
+
+	// Form state
+	let formValues = $state({
+		title: '',
+		slug: '',
+		content: '',
+		last_editor: 'Admin',
+		category: 'General',
+		order: 0
+	});
+
+	// Derived state: Grouped by Category
+	const groupedArticles = $derived.by(() => {
+		const filtered = articles
+			.filter(
+				(a) =>
+					a.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+					a.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
+					(a.category || 'General').toLowerCase().includes(searchTerm.toLowerCase())
+			)
+			.sort((a, b) => (a.order || 0) - (b.order || 0)); // Sort by order first
+
+		const groups: Record<string, HelpArticle[]> = {};
+		filtered.forEach((article) => {
+			const cat = article.category || 'General';
+			if (!groups[cat]) groups[cat] = [];
+			groups[cat].push(article);
+		});
+		return groups;
+	});
+
+	onMount(async () => {
+		await loadArticles();
+	});
+
+	async function loadArticles() {
+		loading = true;
+		try {
+			articles = await helpApi.listArticles();
+		} catch (e: any) {
+			toast.error('Error al cargar artículos: ' + e.message);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleCreate() {
+		window.location.href = '/dashboard/help-center/editor/new';
+	}
+
+	function openEdit(article: HelpArticle) {
+		window.location.href = `/dashboard/help-center/editor/${article.uuid}`;
+	}
+
+	async function handleDelete() {
+		if (!selectedArticle) return;
+		processing = true;
+		try {
+			await helpApi.deleteArticle(selectedArticle.uuid);
+			toast.success('Capítulo eliminado');
+			showDeleteDialog = false;
+			await loadArticles();
+		} catch (e: any) {
+			toast.error('Error: ' + e.message);
+		} finally {
+			processing = false;
+		}
+	}
+
+	function openDelete(article: HelpArticle) {
+		selectedArticle = article;
+		showDeleteDialog = true;
+	}
+</script>
+
+<div class="flex h-full flex-col space-y-6 rounded-xl bg-muted/10 p-4">
+	<!-- Page Header -->
+	<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+		<div>
+			<h1 class="flex items-center gap-2 text-3xl font-bold tracking-tight text-primary">
+				<Book class="h-8 w-8" />
+				Biblioteca de Conocimiento
+			</h1>
+			<p class="text-muted-foreground">Manuales, Guías y Documentación del Sistema.</p>
+		</div>
+		<div class="flex items-center gap-2">
+			{#if HUB_MODE}
+				<Button href="/dashboard/help-center/editor/new" class="shadow-lg">
+					<Plus class="mr-2 h-4 w-4" />
+					Nuevo Capítulo
+				</Button>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Search -->
+	<div class="relative max-w-lg">
+		<Search class="absolute top-3 left-3 h-4 w-4 text-muted-foreground" />
+		<Input
+			type="search"
+			placeholder="Buscar en la biblioteca..."
+			class="h-10 border-muted-foreground/20 bg-background pl-10"
+			bind:value={searchTerm}
+		/>
+	</div>
+
+	<!-- Content: Shelves -->
+	<div class="flex-1 space-y-8 overflow-auto pr-2">
+		{#if loading}
+			<div class="flex h-40 items-center justify-center">
+				<Loader2 class="h-10 w-10 animate-spin text-primary" />
+			</div>
+		{:else if Object.keys(groupedArticles).length === 0}
+			<div class="flex flex-col items-center justify-center py-20 text-muted-foreground">
+				<Book class="mb-4 h-16 w-16 opacity-20" />
+				<p>La biblioteca está vacía.</p>
+			</div>
+		{:else}
+			{#each Object.entries(groupedArticles) as [category, groupArticles]}
+				<div class="space-y-4">
+					<h2
+						class="flex items-center gap-2 border-b pb-2 text-xl font-semibold text-foreground/80"
+					>
+						<span
+							class="rounded bg-primary/10 px-2 py-1 text-sm tracking-wide text-primary uppercase"
+							>{category}</span
+						>
+					</h2>
+					<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+						{#each groupArticles as article}
+							<Card.Root
+								class="group relative flex h-full flex-col overflow-hidden border-muted-foreground/10 bg-background transition-all duration-300 hover:border-primary/50 hover:shadow-xl"
+							>
+								<div
+									class="absolute top-0 left-0 h-full w-1 bg-primary/0 transition-all group-hover:bg-primary"
+								></div>
+								<Card.Header class="pb-2">
+									<Card.Title
+										class="line-clamp-2 flex items-center gap-2 text-lg transition-colors group-hover:text-primary"
+									>
+										{#if article.content_type === 'pdf'}
+											<FileText class="h-5 w-5 text-red-500" />
+										{:else if article.content_type === 'video'}
+											<Video class="h-5 w-5 text-blue-500" />
+										{:else if article.content_type === 'article'}
+											<Book class="h-5 w-5 text-primary" />
+										{:else}
+											<FileCode class="h-5 w-5 text-muted-foreground" />
+										{/if}
+										{article.title}
+									</Card.Title>
+									<Card.Description class="text-xs">
+										{new Date(article.updated_at).toLocaleDateString()}
+									</Card.Description>
+								</Card.Header>
+								<Card.Content class="flex-grow pt-2">
+									{#if article.content_type === 'article'}
+										<div class="prose prose-sm line-clamp-3 text-sm text-muted-foreground">
+											{@html (article.content || '').replace(/<[^>]*>?/gm, '').substring(0, 150)}...
+										</div>
+									{:else}
+										<div class="flex flex-col gap-1 text-xs text-muted-foreground">
+											<p>Formato: {article.mime_type || 'Desconocido'}</p>
+											{#if article.file_size}
+												<p>Tamaño: {(article.file_size / 1024 / 1024).toFixed(2)} MB</p>
+											{/if}
+										</div>
+									{/if}
+								</Card.Content>
+								<Card.Footer class="flex items-center justify-between border-t bg-muted/5 pt-4">
+									<Button variant="ghost" size="sm" href={`/dashboard/help-center/${article.uuid}`}>
+										{#if article.content_type === 'video'}
+											Ver
+										{:else if article.content_type === 'article'}
+											Leer
+										{:else}
+											Abrir
+										{/if}
+									</Button>
+									<div class="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+										{#if HUB_MODE}
+											<Button
+												variant="ghost"
+												size="icon"
+												class="h-7 w-7"
+												href={`/dashboard/help-center/editor/${article.uuid}`}
+											>
+												<Edit class="h-3 w-3" />
+											</Button>
+											<Button
+												variant="ghost"
+												size="icon"
+												class="h-7 w-7 text-destructive"
+												onclick={() => openDelete(article)}
+											>
+												<Trash2 class="h-3 w-3" />
+											</Button>
+										{/if}
+									</div>
+								</Card.Footer>
+							</Card.Root>
+						{/each}
+					</div>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<!-- Delete Confirmation -->
+<AlertDialog.Root bind:open={showDeleteDialog}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Eliminar capítulo?</AlertDialog.Title>
+			<AlertDialog.Description>
+				Se eliminará permanentemente "{selectedArticle?.title}".
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel onclick={() => (showDeleteDialog = false)}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				class="text-destructive-foreground bg-destructive hover:bg-destructive/90"
+				onclick={handleDelete}
+			>
+				{#if processing}<Loader2 class="mr-2 h-4 w-4 animate-spin" />{/if}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/frontend/src/routes/dashboard/help-center/[uuid]/+page.svelte b/frontend/src/routes/dashboard/help-center/[uuid]/+page.svelte
new file mode 100644
index 00000000..0cee42c6
--- /dev/null
+++ b/frontend/src/routes/dashboard/help-center/[uuid]/+page.svelte
@@ -0,0 +1,276 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import { helpApi, type HelpArticle } from '$lib/api/help';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import {
+		Loader2,
+		ArrowLeft,
+		Calendar,
+		User,
+		BookOpen,
+		Download,
+		FileText,
+		ExternalLink
+	} from 'lucide-svelte';
+	import { marked } from 'marked';
+	import DOMPurify from 'dompurify';
+
+	// Helper to resolve an API path from the DB (e.g., /api/uploads/...) to a full URL pointing to the local backend.
+	function resolveAssetUrl(url: string | undefined): string {
+		try {
+			if (!url) return '';
+			if (url.startsWith('http://') || url.startsWith('https://')) return url;
+
+			// Fallback to empty string if VITE_API_URL is missing
+			// @ts-ignore
+			const apiUrl = import.meta.env.VITE_API_URL || '';
+			const base = apiUrl.replace(/\/$/, '');
+			const cleanUrl = url.replace(/^\/api\//, '/');
+			const finalUrl = `${base}${cleanUrl}`;
+			return finalUrl;
+		} catch (e) {
+			console.error('[SSR DEBUG] Error in resolveAssetUrl:', e);
+			return '';
+		}
+	}
+
+	let article: HelpArticle | null = null; // Removed $state() as it's not reactive by itself in Svelte 5 standard store usage unless wrapped
+	let loading = true; // Use standard value, reactive via variable assignment in Svelte 5 runes if enabled
+	let error: string | null = null;
+	let toc: { id: string; text: string; level: number }[] = [];
+
+	onMount(async () => {
+		const uuid = $page.params.uuid;
+		try {
+			article = await helpApi.getArticle(uuid);
+			if (article) {
+				parseTOC(article.content);
+			}
+		} catch (e: any) {
+			error = e.message;
+		} finally {
+			loading = false;
+		}
+	});
+
+	function parseTOC(content: string) {
+		const lines = content.split('\n');
+		toc = [];
+		let inCodeBlock = false; // Simple check to avoid parsing headers inside code blocks
+
+		lines.forEach((line) => {
+			if (line.trim().startsWith('```')) {
+				inCodeBlock = !inCodeBlock;
+				return;
+			}
+			if (inCodeBlock) return;
+
+			const match = line.match(/^(#{1,3})\s+(.*)$/);
+			if (match) {
+				const level = match[1].length;
+				const text = match[2];
+				const id = text.toLowerCase().replace(/[^\w]+/g, '-');
+				toc = [...toc, { id, text, level }];
+			}
+		});
+	}
+
+	import { browser } from '$app/environment';
+
+	function renderMarkdown(content: string) {
+		if (!content) return '';
+		try {
+			const rawHtml = marked.parse(content) as string;
+			// Add IDs to headers for TOC navigation
+			let htmlWithIds = rawHtml.replace(/<h([1-3])>(.*?)<\/h\1>/g, (match, level, text) => {
+				const id = text.toLowerCase().replace(/[^\w]+/g, '-');
+				return `<h${level} id="${id}">${text}</h${level}>`;
+			});
+
+			// Rewrite image src and link hrefs to point to the local backend
+			htmlWithIds = htmlWithIds.replace(/src="([^"]+)"/g, (match, src) => {
+				return `src="${resolveAssetUrl(src)}"`;
+			});
+			htmlWithIds = htmlWithIds.replace(/href="(\/api\/uploads\/[^"]+)"/g, (match, href) => {
+				return `href="${resolveAssetUrl(href)}"`;
+			});
+
+			if (browser && typeof window !== 'undefined') {
+				// DOMPurify only works in the browser
+				return DOMPurify.sanitize(htmlWithIds);
+			}
+			return htmlWithIds; // SSR returns raw HTML (or could use isomorphic-dompurify)
+		} catch (e) {
+			console.error('Markdown parsing error:', e);
+			return '';
+		}
+	}
+
+	function scrollToHeader(id: string) {
+		const element = document.getElementById(id);
+		if (element) {
+			element.scrollIntoView({ behavior: 'smooth' });
+		}
+	}
+</script>
+
+<div class="flex h-full flex-col bg-background">
+	<!-- Toolbar -->
+	<div
+		class="sticky top-0 z-10 flex items-center gap-4 border-b bg-card/50 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+	>
+		<Button variant="ghost" size="sm" href="/dashboard/help-center" class="gap-2">
+			<ArrowLeft class="h-4 w-4" />
+			Volver a la Biblioteca
+		</Button>
+		<div class="mx-2 h-4 w-px bg-border"></div>
+		{#if article}
+			<span class="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+				<BookOpen class="h-4 w-4" />
+				{article.category || 'General'}
+			</span>
+		{/if}
+	</div>
+
+	<div class="relative flex-1 overflow-hidden">
+		{#if loading}
+			<div class="flex h-full items-center justify-center">
+				<Loader2 class="h-8 w-8 animate-spin text-primary" />
+			</div>
+		{:else if error}
+			<div class="flex h-full flex-col items-center justify-center gap-2 text-destructive">
+				<p class="text-lg font-medium">Error al cargar el capítulo</p>
+				<p class="text-sm text-muted-foreground">{error}</p>
+			</div>
+		{:else if article}
+			<div class="flex h-full">
+				<!-- Article Content -->
+				<div class="flex-1 overflow-y-auto scroll-smooth px-8 py-10 md:px-12 lg:px-16">
+					<div class="mx-auto max-w-4xl pb-20">
+						<!-- Header -->
+						<div class="mb-8 border-b pb-6">
+							<h1 class="mb-4 text-4xl font-bold tracking-tight text-foreground">
+								{article.title}
+							</h1>
+							<div class="flex items-center gap-6 text-sm text-muted-foreground">
+								<span class="flex items-center gap-1.5">
+									<User class="h-4 w-4" />
+									{article.last_editor}
+								</span>
+								<span class="flex items-center gap-1.5">
+									<Calendar class="h-4 w-4" />
+									{new Date(article.updated_at).toLocaleDateString(undefined, {
+										dateStyle: 'long'
+									})}
+								</span>
+							</div>
+						</div>
+
+						<!-- Content -->
+						{#if article.content_type === 'article'}
+							<article
+								class="prose max-w-none prose-slate dark:prose-invert prose-headings:scroll-mt-20 prose-img:rounded-lg prose-img:shadow-md"
+							>
+								{@html renderMarkdown(article.content)}
+							</article>
+						{:else if article.content_type === 'pdf'}
+							<div class="flex flex-col gap-4">
+								<div class="flex items-center justify-between rounded-lg border bg-muted/30 p-4">
+									<div class="flex items-center gap-3">
+										<FileText class="h-8 w-8 text-red-500" />
+										<div>
+											<p class="font-medium">Documento PDF</p>
+											<p class="text-xs text-muted-foreground">
+												{article.file_size ? (article.file_size / 1024 / 1024).toFixed(2) : '??'} MB
+											</p>
+										</div>
+									</div>
+									<div class="flex gap-2">
+										<Button
+											variant="outline"
+											size="sm"
+											href={resolveAssetUrl(article.file_url)}
+											target="_blank"
+										>
+											<ExternalLink class="mr-2 h-4 w-4" />
+											Abrir en pestaña
+										</Button>
+										<Button
+											size="sm"
+											href={resolveAssetUrl(article.file_url)}
+											download={article.title}
+										>
+											<Download class="mr-2 h-4 w-4" />
+											Descargar
+										</Button>
+									</div>
+								</div>
+								<!-- PDF Embed -->
+								<iframe
+									src={resolveAssetUrl(article.file_url)}
+									title={article.title}
+									class="h-[800px] w-full rounded-xl border shadow-inner"
+								></iframe>
+							</div>
+						{:else if article.content_type === 'video'}
+							<div class="flex flex-col gap-4">
+								<video controls class="w-full rounded-xl border shadow-lg">
+									<source src={resolveAssetUrl(article.file_url)} type={article.mime_type} />
+									Tu navegador no soporta videos.
+								</video>
+								<div class="rounded-lg border bg-muted/30 p-4">
+									<p class="text-sm font-medium">Información del archivo</p>
+									<p class="text-xs text-muted-foreground">{article.mime_type}</p>
+								</div>
+							</div>
+						{:else}
+							<div
+								class="flex flex-col items-center justify-center gap-6 rounded-2xl border border-dashed py-20"
+							>
+								<div class="rounded-full bg-primary/10 p-6">
+									<Download class="h-12 w-12 text-primary" />
+								</div>
+								<div class="text-center">
+									<h3 class="text-xl font-semibold">Archivo para descargar</h3>
+									<p class="text-muted-foreground truncate max-w-md">
+										Este archivo no tiene vista previa directa.
+									</p>
+								</div>
+								<Button
+									href={resolveAssetUrl(article.file_url)}
+									download={article.title}
+									class="px-8 shadow-lg"
+								>
+									<Download class="mr-2 h-4 w-4" />
+									Descargar ahora
+								</Button>
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<!-- TOC Sidebar (Desktop) -->
+				{#if toc.length > 0}
+					<div class="hidden w-72 overflow-y-auto border-l bg-muted/5 p-6 xl:block">
+						<h4 class="mb-4 text-sm font-semibold tracking-wider text-muted-foreground uppercase">
+							En este capitulo
+						</h4>
+						<nav class="space-y-1">
+							{#each toc as item}
+								<button
+									class="block w-full py-1 text-left text-sm text-muted-foreground transition-colors hover:text-foreground
+                                    {item.level === 1 ? 'font-medium' : 'pl-' + item.level * 2}
+                                    "
+									onclick={() => scrollToHeader(item.id)}
+								>
+									{item.text}
+								</button>
+							{/each}
+						</nav>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/frontend/src/routes/dashboard/help-center/editor/[uuid]/+page.svelte b/frontend/src/routes/dashboard/help-center/editor/[uuid]/+page.svelte
new file mode 100644
index 00000000..2455fea8
--- /dev/null
+++ b/frontend/src/routes/dashboard/help-center/editor/[uuid]/+page.svelte
@@ -0,0 +1,493 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { browser } from '$app/environment';
+	import { onMount, tick } from 'svelte';
+	import { helpApi, type HelpArticle } from '$lib/api/help';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import {
+		Loader2,
+		Save,
+		ArrowLeft,
+		Image as ImageIcon,
+		Bold,
+		Italic,
+		Link as LinkIcon,
+		List,
+		Heading1,
+		Heading2,
+		FileText,
+		Video as VideoIcon,
+		FileCode,
+		Upload
+	} from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
+	import { marked } from 'marked';
+	import DOMPurify from 'dompurify';
+
+	// Helper to resolve an API path from the DB (e.g., /api/uploads/...) to a full URL pointing to the local backend.
+	function resolveAssetUrl(url: string | undefined): string {
+		if (!url) return '';
+		if (url.startsWith('http://') || url.startsWith('https://')) return url;
+		
+		// Fallback to empty string if VITE_API_URL is missing
+		// @ts-ignore
+		const apiUrl = import.meta.env.VITE_API_URL || '';
+		const base = apiUrl.replace(/\/$/, '');
+		const cleanUrl = url.replace(/^\/api\//, '/'); 
+		return `${base}${cleanUrl}`;
+	}
+
+	let article = $state<HelpArticle | null>(null);
+	let loading = $state(true);
+	let processing = $state(false);
+
+	// Editor State
+	let title = $state('');
+	let slug = $state('');
+	let content = $state('');
+	let category = $state('General');
+	let order = $state(0);
+	let last_editor = $state('Admin');
+	let content_type = $state('article');
+	let file_url = $state('');
+	let file_size = $state<number | undefined>(undefined);
+	let mime_type = $state('');
+
+	// Preview State
+	let showPreview = $state(true);
+	const HUB_MODE = import.meta.env.VITE_HUB_MODE === 'true';
+
+	onMount(async () => {
+		// Proteccion: Solo el Hub puede editar/crear
+		if (!HUB_MODE) {
+			window.location.href = '/dashboard/help-center';
+			return;
+		}
+
+		const uuid = $page.params.uuid as string;
+		if (uuid === 'new') {
+			loading = false;
+			// Defaults for new article
+			return;
+		}
+
+		try {
+			article = await helpApi.getArticle(uuid);
+			if (article) {
+				title = article.title;
+				slug = article.slug;
+				content = article.content || '';
+				category = article.category || 'General';
+				order = article.order || 0;
+				last_editor = article.last_editor || 'Admin';
+				content_type = article.content_type || 'article';
+				file_url = article.file_url || '';
+				file_size = article.file_size ?? undefined;
+				mime_type = article.mime_type || '';
+			}
+		} catch (e: any) {
+			toast.error('Error al cargar artículo: ' + e.message);
+		} finally {
+			loading = false;
+		}
+	});
+
+	async function handleSave() {
+		processing = true;
+		try {
+			const data = {
+				title,
+				slug,
+				content,
+				last_editor,
+				category,
+				order,
+				content_type,
+				file_url,
+				file_size,
+				mime_type
+			};
+
+			// Auto-generate slug if missing
+			if (!data.slug) {
+				data.slug = data.title
+					.toLowerCase()
+					.replace(/ /g, '-')
+					.replace(/[^\w-]+/g, '');
+				slug = data.slug;
+			}
+
+			const uuid = $page.params.uuid as string;
+			if (uuid === 'new') {
+				const newArticle = await helpApi.createArticle(data);
+				toast.success('Capítulo creado');
+				// Redirect to edit mode or list? For now, stay here but update URL would be ideal.
+				// simpler to just go back to list or reload.
+				// Let's redirect to edit mode of this new UUID to avoid duplicates on re-save
+				window.location.href = `/dashboard/help-center/editor/${newArticle.uuid}`;
+			} else {
+				await helpApi.updateArticle(uuid, data);
+				toast.success('Cambios guardados');
+			}
+		} catch (e: any) {
+			toast.error('Error al guardar: ' + e.message);
+		} finally {
+			processing = false;
+		}
+	}
+
+	function insertText(prefix: string, suffix: string = '') {
+		const textarea = document.getElementById('markdown-editor') as HTMLTextAreaElement;
+		if (!textarea) return;
+
+		const start = textarea.selectionStart;
+		const end = textarea.selectionEnd;
+		const text = textarea.value;
+		const selection = text.substring(start, end);
+
+		const before = text.substring(0, start);
+		const after = text.substring(end);
+
+		content = `${before}${prefix}${selection}${suffix}${after}`;
+
+		// Restore focus and selection
+		tick().then(() => {
+			textarea.focus();
+			textarea.setSelectionRange(start + prefix.length, end + prefix.length);
+		});
+	}
+
+	async function handleImageUpload(file: File) {
+		const tid = toast.loading('Subiendo imagen...');
+		processing = true;
+		try {
+			const result = await helpApi.uploadImage(file);
+			const imageMarkdown = `\n![${file.name}](${result.url})\n`;
+			insertText(imageMarkdown);
+			toast.success('Imagen insertada', { id: tid });
+		} catch (e: any) {
+			toast.error('Error al subir: ' + e.message, { id: tid });
+		} finally {
+			processing = false;
+		}
+	}
+
+	async function handleAssetUpload(file: File) {
+		const tid = toast.loading(`Subiendo ${file.name}...`);
+		processing = true;
+		try {
+			const result = await helpApi.uploadAsset(file);
+			file_url = result.url;
+			file_size = result.size;
+			mime_type = result.mime_type;
+
+			// Auto-set title if empty
+			if (!title) {
+				title = file.name.split('.').shift() || 'Sin Título';
+			}
+			if (!slug) {
+				slug = title.toLowerCase().replace(/[^\w]+/g, '-');
+			}
+
+			// Auto-infer content type if not set or article
+			if (content_type === 'article') {
+				if (mime_type === 'application/pdf') content_type = 'pdf';
+				else if (mime_type.startsWith('video/')) content_type = 'video';
+				else content_type = 'document';
+			}
+
+			toast.success('Archivo subido correctamente', { id: tid });
+		} catch (e: any) {
+			toast.error('Error al subir archivo: ' + e.message, { id: tid });
+		} finally {
+			processing = false;
+		}
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		const files = e.dataTransfer?.files;
+		if (files && files.length > 0) {
+			const file = files[0];
+			if (file.type.startsWith('image/')) {
+				handleImageUpload(file);
+			}
+		}
+	}
+
+	function renderMarkdown(text: string) {
+		if (!text) return '';
+		try {
+			const html = marked.parse(text) as string;
+			
+			// Rewrite image src and link hrefs to point to the local backend
+			let resolvedHtml = html.replace(/src="([^"]+)"/g, (match, src) => {
+				return `src="${resolveAssetUrl(src)}"`;
+			});
+			resolvedHtml = resolvedHtml.replace(/href="(\/api\/uploads\/[^"]+)"/g, (match, href) => {
+				return `href="${resolveAssetUrl(href)}"`;
+			});
+
+			if (browser && typeof window !== 'undefined') {
+				return DOMPurify.sanitize(resolvedHtml);
+			}
+			return resolvedHtml;
+		} catch (e) {
+			console.error("Markdown parsing error in editor:", e);
+			return '';
+		}
+	}
+</script>
+
+<div class="flex h-screen flex-col overflow-hidden bg-background">
+	<!-- Top Bar -->
+	<header class="z-10 flex items-center justify-between border-b bg-card px-6 py-3">
+		<div class="flex items-center gap-4">
+			<Button variant="ghost" size="sm" href="/dashboard/help-center">
+				<ArrowLeft class="mr-2 h-4 w-4" />
+				Volver
+			</Button>
+			<h1 class="max-w-md truncate text-lg font-semibold">
+				{title || 'Sin Título'}
+			</h1>
+		</div>
+		<div class="flex items-center gap-2">
+			<Button variant="outline" size="sm" onclick={() => (showPreview = !showPreview)}>
+				{showPreview ? 'Ocultar Vista Previa' : 'Ver Vista Previa'}
+			</Button>
+			<Button onclick={handleSave} disabled={processing || !title}>
+				{#if processing}<Loader2 class="mr-2 h-4 w-4 animate-spin" />{/if}
+				<Save class="mr-2 h-4 w-4" />
+				Guardar
+			</Button>
+		</div>
+	</header>
+
+	<!-- Main Editor Area -->
+	<div class="flex flex-1 overflow-hidden">
+		<!-- Metadata Sidebar (Left) - Collapsible or Fixed width -->
+		<aside class="hidden w-64 overflow-y-auto border-r bg-muted/10 p-4 lg:block">
+			<h3 class="mb-4 text-sm font-semibold tracking-wider text-muted-foreground uppercase">
+				Configuración
+			</h3>
+			<div class="space-y-4">
+				<div class="grid gap-2">
+					<Label for="title">Título</Label>
+					<Input id="title" bind:value={title} placeholder="Ej: Introducción" />
+				</div>
+				<div class="grid gap-2 border-t pt-4">
+					<Label for="type">Tipo de Contenido</Label>
+					<select
+						id="type"
+						bind:value={content_type}
+						class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						<option value="article">Artículo (Markdown)</option>
+						<option value="pdf">PDF</option>
+						<option value="video">Video</option>
+						<option value="document">Otro Documento</option>
+					</select>
+				</div>
+				<div class="grid gap-2 border-t pt-4">
+					<Label for="category">Categoría</Label>
+					<Input id="category" bind:value={category} placeholder="Ej: General" />
+				</div>
+				<div class="grid gap-2 border-t pt-4">
+					<Label for="order">Orden</Label>
+					<Input id="order" type="number" bind:value={order} />
+				</div>
+			</div>
+		</aside>
+
+		<!-- Split View -->
+		<main class="flex flex-1 overflow-hidden">
+			{#if content_type === 'article'}
+				<!-- Editor -->
+				<div class="group relative flex flex-1 flex-col border-r">
+					<!-- Toolbar -->
+					<div class="flex items-center gap-1 border-b bg-background p-2">
+						<Button
+							variant="ghost"
+							size="icon"
+							class="h-8 w-8"
+							onclick={() => insertText('**', '**')}
+							title="Negrita"
+						>
+							<Bold class="h-4 w-4" />
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon"
+							class="h-8 w-8"
+							onclick={() => insertText('*', '*')}
+							title="Cursiva"
+						>
+							<Italic class="h-4 w-4" />
+						</Button>
+						<div class="mx-1 h-4 w-px bg-border"></div>
+						<Button
+							variant="ghost"
+							size="icon"
+							class="h-8 w-8"
+							onclick={() => insertText('# ')}
+							title="Título 1"
+						>
+							<Heading1 class="h-4 w-4" />
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon"
+							class="h-8 w-8"
+							onclick={() => insertText('## ')}
+							title="Título 2"
+						>
+							<Heading2 class="h-4 w-4" />
+						</Button>
+						<div class="mx-1 h-4 w-px bg-border"></div>
+						<Button
+							variant="ghost"
+							size="icon"
+							class="h-8 w-8"
+							onclick={() => insertText('- ')}
+							title="Lista"
+						>
+							<List class="h-4 w-4" />
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon"
+							class="h-8 w-8"
+							onclick={() => insertText('[texto](url)')}
+							title="Enlace"
+						>
+							<LinkIcon class="h-4 w-4" />
+						</Button>
+						<label
+							class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+							title="Subir Imagen"
+						>
+							<ImageIcon class="h-4 w-4" />
+							<input
+								type="file"
+								accept="image/*"
+								class="hidden"
+								onchange={(e) => {
+									const target = e.target as HTMLInputElement;
+									if (target.files?.length) handleImageUpload(target.files[0]);
+								}}
+							/>
+						</label>
+					</div>
+
+					<textarea
+						id="markdown-editor"
+						bind:value={content}
+						class="w-full flex-1 resize-none bg-background p-8 font-mono text-sm leading-relaxed outline-none"
+						placeholder="# Empieza a escribir aquí..."
+						ondrop={(e: DragEvent) => handleDrop(e)}
+						ondragover={(e: DragEvent) => e.preventDefault()}
+					></textarea>
+
+					<!-- Dropping Hint -->
+					<div
+						class="pointer-events-none absolute inset-0 m-4 hidden items-center justify-center rounded-lg border-2 border-dashed border-primary bg-primary/10 opacity-0 transition-opacity group-hover:flex"
+					>
+						<p class="font-medium text-primary">Arrastra imágenes aquí</p>
+					</div>
+				</div>
+
+				<!-- Preview -->
+				{#if showPreview}
+					<div class="w-1/2 flex-1 overflow-y-auto border-l bg-muted/5 p-8">
+						<div class="prose max-w-none prose-slate dark:prose-invert">
+							{@html renderMarkdown(content)}
+						</div>
+					</div>
+				{/if}
+			{:else}
+				<!-- Asset Upload View -->
+				<div class="flex flex-1 flex-col items-center justify-center bg-muted/5 p-12">
+					<div class="w-full max-w-2xl space-y-8 text-center">
+						<div class="flex flex-col items-center gap-4">
+							{#if content_type === 'pdf'}
+								<div class="rounded-full bg-red-100 p-6 dark:bg-red-900/20">
+									<FileText class="h-16 w-16 text-red-500" />
+								</div>
+								<h2 class="text-2xl font-bold">Configuración de PDF</h2>
+							{:else if content_type === 'video'}
+								<div class="rounded-full bg-blue-100 p-6 dark:bg-blue-900/20">
+									<VideoIcon class="h-16 w-16 text-blue-500" />
+								</div>
+								<h2 class="text-2xl font-bold">Configuración de Video</h2>
+							{:else}
+								<div class="rounded-full bg-primary/10 p-6">
+									<FileCode class="h-16 w-16 text-primary" />
+								</div>
+								<h2 class="text-2xl font-bold">Configuración de Documento</h2>
+							{/if}
+							<p class="text-muted-foreground">Sube el archivo que deseas asociar a este título.</p>
+						</div>
+
+						{#if file_url}
+							<div class="relative flex flex-col gap-4 rounded-xl border bg-card p-6 shadow-sm">
+								<div class="flex items-center gap-4">
+									<div class="rounded bg-muted p-2">
+										<FileCode class="h-6 w-6" />
+									</div>
+									<div class="flex-1 text-left">
+										<p class="font-medium">Archivo Cargado</p>
+										<p class="truncate text-xs text-muted-foreground">{file_url}</p>
+										<p class="font-mono text-xs">
+											{mime_type} • {file_size ? (file_size / 1024 / 1024).toFixed(2) : '??'} MB
+										</p>
+									</div>
+								</div>
+								<div class="flex gap-2">
+									<Button variant="outline" class="flex-1" href={resolveAssetUrl(file_url)} target="_blank">
+										Ver Archivo
+									</Button>
+									<label
+										class="flex flex-1 cursor-pointer items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+									>
+										Cambiar Archivo
+										<input
+											type="file"
+											class="hidden"
+											onchange={(e) => {
+												const target = e.target as HTMLInputElement;
+												if (target.files?.length) handleAssetUpload(target.files[0]);
+											}}
+										/>
+									</label>
+								</div>
+							</div>
+						{:else}
+							<label
+								class="flex h-64 w-full cursor-pointer flex-col items-center justify-center gap-4 rounded-2xl border-2 border-dashed border-muted-foreground/20 bg-muted/20 transition-colors hover:border-primary/50 hover:bg-primary/5"
+							>
+								<div class="flex flex-col items-center gap-2">
+									<div class="rounded-full bg-background p-4 shadow-sm">
+										<Upload class="h-8 w-8 text-primary" />
+									</div>
+									<span class="font-medium">Selecciona un archivo</span>
+									<span class="text-xs text-muted-foreground">O arrastra y suelta aquí</span>
+								</div>
+								<input
+									type="file"
+									class="hidden"
+									onchange={(e) => {
+										const target = e.target as HTMLInputElement;
+										if (target.files?.length) handleAssetUpload(target.files[0]);
+									}}
+								/>
+							</label>
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</main>
+	</div>
+</div>
diff --git a/frontend/src/routes/dashboard/pedimentos/edit/[id]/+page.server.ts b/frontend/src/routes/dashboard/pedimentos/edit/[id]/+page.server.ts
index 2a67bd94..2e923b7d 100644
--- a/frontend/src/routes/dashboard/pedimentos/edit/[id]/+page.server.ts
+++ b/frontend/src/routes/dashboard/pedimentos/edit/[id]/+page.server.ts
@@ -39,6 +39,8 @@ export const load: PageServerLoad = async ({ params, cookies, fetch }) => {
 					customsBrokers: [],
 					clients: [],
 					codePedimentoRegimens: [],
+					transportTypes: [],
+					transportModes: [],
 					error: 'Error al cargar catálogos. Verifique la conexión con el backend.'
 				};
 			}
@@ -53,7 +55,9 @@ export const load: PageServerLoad = async ({ params, cookies, fetch }) => {
 				customsSections: data.customs_sections || [],
 				customsBrokers: data.customs_brokers || [],
 				clients: data.clients || [],
-				codePedimentoRegimens: data.code_pedimento_regimens || []
+				codePedimentoRegimens: data.code_pedimento_regimens || [],
+				transportTypes: data.transport_types || [],
+				transportModes: data.transport_modes || []
 			};
 		} catch (e) {
 			console.error('❌ Error loading new pedimento data:', e);
@@ -67,6 +71,8 @@ export const load: PageServerLoad = async ({ params, cookies, fetch }) => {
 				customsBrokers: [],
 				clients: [],
 				codePedimentoRegimens: [],
+				transportTypes: [],
+				transportModes: [],
 				error: 'Error al cargar catálogos. Verifique la conexión con el backend.'
 			};
 		}
@@ -106,7 +112,9 @@ export const load: PageServerLoad = async ({ params, cookies, fetch }) => {
 			customsSections: data.customs_sections || [],
 			customsBrokers: data.customs_brokers || [],
 			clients: data.clients || [],
-			codePedimentoRegimens: data.code_pedimento_regimens || []
+			codePedimentoRegimens: data.code_pedimento_regimens || [],
+			transportTypes: data.transport_types || [],
+			transportModes: data.transport_modes || []
 		};
 	} catch (e) {
 		console.error('Error loading pedimento:', e);
diff --git a/frontend/src/routes/dashboard/pedimentos/edit/[id]/+page.svelte b/frontend/src/routes/dashboard/pedimentos/edit/[id]/+page.svelte
index 7151a7e0..8f306d7a 100644
--- a/frontend/src/routes/dashboard/pedimentos/edit/[id]/+page.svelte
+++ b/frontend/src/routes/dashboard/pedimentos/edit/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { goto, invalidateAll } from '$app/navigation';
 	import * as Tabs from '$lib/components/ui/tabs';
 	import { Button } from '$lib/components/ui/button';
@@ -53,6 +54,8 @@
 	import type { CustomsBroker } from '$lib/api/dashboard/a76/customs-brokers';
 	import type { ClientProvider } from '$lib/api/dashboard/a76/clients-providers';
 	import type { CodePedimentoRegimen } from '$lib/api/dashboard/reference_data/code_pedimento_regimens';
+	import type { TransportType } from '$lib/api/dashboard/reference_data/transport_types';
+	import type { TransportMode } from '$lib/api/dashboard/reference_data/transport_modes';
 
 	// Get sidebar context
 	const sidebar = useSidebar();
@@ -66,6 +69,8 @@
 		customsBrokers?: CustomsBroker[];
 		clients?: ClientProvider[];
 		codePedimentoRegimens?: CodePedimentoRegimen[];
+		transportTypes?: TransportType[];
+		transportModes?: TransportMode[];
 		user?: any;
 		companies?: any[];
 		authenticated?: boolean;
@@ -82,8 +87,19 @@
 	// Focus first input when switching main tabs (mouse or shortcut)
 
 	$effect(() => {
-		if (activeTab && $interactionMode === 'keyboard') {
-			focusStore.request('first-input');
+		// Accedemos a activeTab para que el efecto dependa de él
+		if (activeTab) {
+			// Usamos untrack para que no dependa de interactionMode
+			// Esto evita que se dispare el foco al empezar a escribir (cambio de mouse a keyboard)
+			const mode = untrack(() => {
+				let currentMode;
+				interactionMode.subscribe((v) => (currentMode = v))();
+				return currentMode;
+			});
+
+			if (mode === 'keyboard') {
+				focusStore.request('first-input');
+			}
 		}
 	});
 	let generalTabInstance = $state<any>(null); // Todavía útil para otras cosas
@@ -451,6 +467,32 @@
 						end_date: generalFormData.end_date || null
 					};
 				}
+
+				// Aduanas (Despacho y Entrada/Salida)
+				const hasCustomsValue =
+					generalFormData.pedimento_customs_offices?.dispatch_customs ||
+					generalFormData.pedimento_customs_offices?.entry_exit_customs;
+				if (hasCustomsValue) {
+					payload.pedimento_customs_offices = {
+						dispatch_customs: generalFormData.pedimento_customs_offices.dispatch_customs || null,
+						entry_exit_customs: generalFormData.pedimento_customs_offices.entry_exit_customs || null
+					};
+				}
+
+				// Transportes y Destino
+				const hasTransportValue =
+					generalFormData.pedimento_transport_means?.destination ||
+					generalFormData.pedimento_transport_means?.entry_exit ||
+					generalFormData.pedimento_transport_means?.arrival ||
+					generalFormData.pedimento_transport_means?.departure;
+				if (hasTransportValue) {
+					payload.pedimento_transport_means = {
+						destination: generalFormData.pedimento_transport_means.destination || null,
+						entry_exit: generalFormData.pedimento_transport_means.entry_exit || null,
+						arrival: generalFormData.pedimento_transport_means.arrival || null,
+						departure: generalFormData.pedimento_transport_means.departure || null
+					};
+				}
 			}
 
 			// Solo agregar sub-recursos en modo UPDATE (no en CREATE)
@@ -1048,11 +1090,13 @@
 					pedimento={data.pedimento}
 					bind:formData={generalFormData}
 					bind:identificadoresFormData
-					pedimentoCodes={data.pedimentoCodes || []}
-					customsSections={data.customsSections || []}
-					customsBrokers={data.customsBrokers || []}
-					clients={data.clients || []}
-					codePedimentoRegimens={data.codePedimentoRegimens || []}
+					pedimentoCodes={data.pedimentoCodes}
+					customsSections={data.customsSections}
+					customsBrokers={data.customsBrokers}
+					clients={data.clients}
+					codePedimentoRegimens={data.codePedimentoRegimens}
+					transportTypes={data.transportTypes}
+					transportModes={data.transportModes}
 					isActive={activeTab === 'general'}
 				/>
 			</Tabs.Content>
diff --git a/frontend/src/svelte-shims.d.ts b/frontend/src/svelte-shims.d.ts
new file mode 100644
index 00000000..185afbcb
--- /dev/null
+++ b/frontend/src/svelte-shims.d.ts
@@ -0,0 +1,7 @@
+// Ambient type declarations for .svelte files
+// This must be a script (no top-level import/export) to be globally ambient
+declare module "*.svelte" {
+    import type { Component } from "svelte";
+    const component: Component<any>;
+    export default component;
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index a39edb9d..e741ea69 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -10,7 +10,13 @@ export default defineConfig({
 		allowedHosts: [
 			'anexo76-dev.aduanasoft.com',
 			// 'otro-host.com' si necesitas más
-		],		
+		],
+		proxy: {
+			'/api/uploads': {
+				target: 'http://backend:8000',
+				changeOrigin: true
+			}
+		}
 	},
 	plugins: [
 		tailwindcss(),
diff --git a/reinicio.sh b/reinicio.sh
old mode 100755
new mode 100644
diff --git a/scripts/backend-entrypoint.sh b/scripts/backend-entrypoint.sh
old mode 100755
new mode 100644
diff --git a/scripts/frontend-entrypoint.sh b/scripts/frontend-entrypoint.sh
old mode 100755
new mode 100644
index bb2f0a33..9a431440
--- a/scripts/frontend-entrypoint.sh
+++ b/scripts/frontend-entrypoint.sh
@@ -40,5 +40,12 @@ echo "=========================================="
 echo "Iniciando aplicación SvelteKit..."
 echo "=========================================="
 
+# Instalar dependencias nuevas si package.json ha cambiado
+if [ "$NODE_ENV" = "development" ]; then
+    echo "Instalando dependencias (development mode)..."
+    # CI=true evita el error ERR_PNPM_ABORTED_REMOVE_MODULES_DIR_NO_TTY
+    CI=true pnpm install
+fi
+
 # Ejecutar el comando que se pasó al contenedor
 exec "$@"
diff --git a/scripts/health-check.sh b/scripts/health-check.sh
old mode 100755
new mode 100644
diff --git a/scripts/init_first_time.sh b/scripts/init_first_time.sh
old mode 100755
new mode 100644
index 1137af42..601d72d4
--- a/scripts/init_first_time.sh
+++ b/scripts/init_first_time.sh
@@ -20,7 +20,7 @@
 #
 # Requisitos:
 # - Keycloak corriendo en http://localhost:8080
-# - PostgreSQL corriendo en localhost:5432
+# - PostgreSQL corriendo en localhost:5432 o 5939
 # - Base de datos anexo76_core creada
 # - jq instalado (para procesamiento JSON)
 #
@@ -86,6 +86,17 @@ exec_pg_sql() {
         -t -c "${sql}" 2>&1
 }
 
+# Ejecutar SQL en el PostgreSQL del Cliente (Simulación)
+exec_pg_sql_client() {
+    local sql="$1"
+    # Solo ejecutar si el contenedor existe y está corriendo
+    if docker ps --format '{{.Names}}' | grep -q "^anexo76-postgres-client$"; then
+        docker exec -e PGPASSWORD="${POSTGRES_PASSWORD}" anexo76-postgres-client \
+            psql -h localhost -p 5432 -U "${POSTGRES_USER}" -d "anexo76_client" \
+            -t -c "${sql}" 2>/dev/null || true
+    fi
+}
+
 # Crear mapper de tenant_id para un cliente
 create_tenant_mapper() {
     local client_id="$1"
@@ -303,7 +314,7 @@ KEYCLOAK_URL="${KEYCLOAK_URL:-http://localhost:8080/kcauth}"
 KEYCLOAK_ADMIN="${KEYCLOAK_ADMIN:-admin}"
 KEYCLOAK_ADMIN_PASSWORD="${KEYCLOAK_ADMIN_PASSWORD:-admin}"
 KEYCLOAK_REALM="${KEYCLOAK_REALM:-master}"
-KEYCLOACK_ADMIN_URL="${KEYCLOACK_ADMIN_URL:-http://localhost:9000/kcauth}"
+KEYCLOAK_ADMIN_URL="${KEYCLOAK_ADMIN_URL:-http://localhost:9000/kcauth}"
 
 POSTGRES_HOST="${POSTGRES_HOST:-localhost}"
 POSTGRES_PORT="${POSTGRES_PORT:-5432}"
@@ -334,7 +345,7 @@ MAX_RETRIES=30
 RETRY_COUNT=0
 
 while [ $RETRY_COUNT -lt $MAX_RETRIES ]; do
-    if curl -s -f "${KEYCLOACK_ADMIN_URL}/health/ready" > /dev/null 2>&1; then
+    if curl -s -f "${KEYCLOAK_ADMIN_URL}/health/ready" > /dev/null 2>&1; then
         echo -e "${GREEN}✓ Keycloak está listo${NC}"
         break
     fi
@@ -523,8 +534,47 @@ FRONTEND_CLIENT_EXISTS=$(curl -s -X GET "${KEYCLOAK_URL}/admin/realms/${KEYCLOAK
   -H "Content-Type: application/json")
 
 if echo "$FRONTEND_CLIENT_EXISTS" | jq -e '.[] | select(.clientId == "anexo76-frontend")' >/dev/null 2>&1; then
-    echo -e "${YELLOW}⚠ Cliente Frontend ya existe${NC}"
+    echo -e "${YELLOW}⚠ Cliente Frontend ya existe, actualizando configuración...${NC}"
     FRONTEND_CLIENT_ID=$(echo "$FRONTEND_CLIENT_EXISTS" | jq -r '.[0].id')
+    
+    # Actualizar configuración del cliente existente para incluir puertos nuevos
+    UPDATE_FRONTEND=$(curl -s -w "\n%{http_code}" -X PUT "${KEYCLOAK_URL}/admin/realms/${KEYCLOAK_REALM}/clients/${FRONTEND_CLIENT_ID}" \
+      -H "Authorization: Bearer ${ACCESS_TOKEN}" \
+      -H "Content-Type: application/json" \
+      -d '{
+        "clientId": "anexo76-frontend",
+        "name": "Anexo76 Frontend",
+        "description": "Aplicación web frontend para el sistema Anexo76",
+        "enabled": true,
+        "protocol": "openid-connect",
+        "publicClient": true,
+        "directAccessGrantsEnabled": false,
+        "standardFlowEnabled": true,
+        "implicitFlowEnabled": false,
+        "rootUrl": "http://localhost:5173",
+        "baseUrl": "http://localhost:5173",
+        "redirectUris": [
+          "http://localhost:5173/*",
+          "http://localhost:5174/*",
+          "http://localhost:3000/*"
+        ],
+        "webOrigins": [
+          "http://localhost:5173",
+          "http://localhost:5174",
+          "http://localhost:3000"
+        ],
+        "attributes": {
+          "pkce.code.challenge.method": "S256"
+        }
+      }')
+      
+    HTTP_CODE=$(echo "$UPDATE_FRONTEND" | tail -n1)
+    if [ "$HTTP_CODE" = "204" ] || [ "$HTTP_CODE" = "200" ]; then
+        echo -e "${GREEN}✓ Cliente Frontend actualizado (Puertos actualizados)${NC}"
+    else
+        echo -e "${RED}✗ Error al actualizar cliente Frontend (HTTP ${HTTP_CODE})${NC}"
+    fi
+
 else
     CREATE_FRONTEND=$(curl -s -w "\n%{http_code}" -X POST "${KEYCLOAK_URL}/admin/realms/${KEYCLOAK_REALM}/clients" \
       -H "Authorization: Bearer ${ACCESS_TOKEN}" \
@@ -543,10 +593,12 @@ else
         "baseUrl": "http://localhost:5173",
         "redirectUris": [
           "http://localhost:5173/*",
+          "http://localhost:5174/*",
           "http://localhost:3000/*"
         ],
         "webOrigins": [
           "http://localhost:5173",
+          "http://localhost:5174",
           "http://localhost:3000"
         ],
         "attributes": {
@@ -702,8 +754,9 @@ if [ $PG_RETRY_COUNT -eq $MAX_PG_RETRIES ]; then
 fi
 
 # Insertar o actualizar tenant
-echo "Insertando tenant en PostgreSQL..."
+echo "Insertando tenant en PostgreSQL (Hub y Cliente)..."
 exec_pg_sql "INSERT INTO core.tenants (name, slug, type, keycloak_realm, contact_email, is_active, created_at, updated_at) VALUES ('${TENANT_NAME}', '${TENANT_SLUG}', 'SHARED'::tenanttype, '${KEYCLOAK_REALM}', '${DEMO_EMAIL}', true, now(), now()) ON CONFLICT (slug) DO UPDATE SET name = EXCLUDED.name, contact_email = EXCLUDED.contact_email, updated_at = CURRENT_TIMESTAMP;" >/dev/null
+exec_pg_sql_client "INSERT INTO core.tenants (name, slug, type, keycloak_realm, contact_email, is_active, created_at, updated_at) VALUES ('${TENANT_NAME}', '${TENANT_SLUG}', 'SHARED'::tenanttype, '${KEYCLOAK_REALM}', '${DEMO_EMAIL}', true, now(), now()) ON CONFLICT (slug) DO UPDATE SET name = EXCLUDED.name, contact_email = EXCLUDED.contact_email, updated_at = CURRENT_TIMESTAMP;" >/dev/null
 
 # Obtener el ID del tenant con mejor manejo de errores
 echo "Obteniendo ID del tenant..."
@@ -738,7 +791,8 @@ COMPANY_EXISTS=$(echo "$COMPANY_EXISTS" | xargs)
 
 if [ "$COMPANY_EXISTS" = "0" ]; then
     exec_pg_sql "INSERT INTO a76.company (tenant_id, name, rfc, is_service_company, created_at, updated_at) VALUES (${TENANT_ID}, '${COMPANY_NAME}', '${COMPANY_RFC}', false, now(), now());" >/dev/null
-    echo -e "${GREEN}✓ Company creada${NC}"
+    exec_pg_sql_client "INSERT INTO a76.company (tenant_id, name, rfc, is_service_company, created_at, updated_at) VALUES (${TENANT_ID}, '${COMPANY_NAME}', '${COMPANY_RFC}', false, now(), now());" >/dev/null
+    echo -e "${GREEN}✓ Company creada (Hub y Cliente)${NC}"
 else
     echo -e "${YELLOW}⚠ Company ya existe para este tenant${NC}"
 fi
@@ -768,8 +822,9 @@ echo -e "${GREEN}✓ Atributo tenant_id asignado al usuario${NC}"
 echo -e "\n${YELLOW}Creando relación usuario-tenant en la base de datos...${NC}"
 
 exec_pg_sql "INSERT INTO core.user_tenants (keycloak_user_id, tenant_id, company_id, role, is_active, created_at, updated_at) VALUES ('${USER_ID}', ${TENANT_ID}, 1, 'admin', true, now(), now()) ON CONFLICT (keycloak_user_id, tenant_id, company_id) DO UPDATE SET is_active = true, updated_at = CURRENT_TIMESTAMP;" >/dev/null
+exec_pg_sql_client "INSERT INTO core.user_tenants (keycloak_user_id, tenant_id, company_id, role, is_active, created_at, updated_at) VALUES ('${USER_ID}', ${TENANT_ID}, 1, 'admin', true, now(), now()) ON CONFLICT (keycloak_user_id, tenant_id, company_id) DO UPDATE SET is_active = true, updated_at = CURRENT_TIMESTAMP;" >/dev/null
 
-echo -e "${GREEN}✓ Relación usuario-tenant creada en la base de datos${NC}"
+echo -e "${GREEN}✓ Relación usuario-tenant creada en la base de datos (Hub y Cliente)${NC}"
 
 ###############################################################################
 # 9. Crear licencia Enterprise para el tenant
@@ -792,7 +847,8 @@ if [ "$LICENSE_EXISTS" = "0" ]; then
     set -e  # Reactivar exit on error
     
     if [ $LICENSE_CREATE_STATUS -eq 0 ]; then
-        echo -e "${GREEN}✓ Licencia Enterprise creada exitosamente${NC}"
+        exec_pg_sql_client "INSERT INTO core.licenses (tenant_id, plan, status, max_users, max_storage_gb, max_monthly_operations, feature_api_access, feature_advanced_reports, feature_integrations, feature_dedicated_support, starts_at, expires_at, created_at, updated_at) VALUES (${TENANT_ID}, 'ENTERPRISE', 'ACTIVE', 999999, 999999, 999999, true, true, true, true, '${LICENSE_START_DATE}'::timestamp, '${LICENSE_EXPIRE_DATE}'::timestamp, now(), now());" >/dev/null 2>&1 || true
+        echo -e "${GREEN}✓ Licencia Enterprise creada exitosamente (Hub y Cliente)${NC}"
         echo -e "${GREEN}  Plan: Enterprise${NC}"
         echo -e "${GREEN}  Usuarios: Ilimitados${NC}"
         echo -e "${GREEN}  Almacenamiento: Ilimitado${NC}"
@@ -812,11 +868,12 @@ else
     # Actualizar licencia existente a Enterprise
     set +e  # Desactivar exit on error temporalmente
     exec_pg_sql "UPDATE core.licenses SET plan = 'ENTERPRISE', status = 'ACTIVE', max_users = 999999, max_storage_gb = 999999, max_monthly_operations = 999999, feature_api_access = true, feature_advanced_reports = true, feature_integrations = true, feature_dedicated_support = true, starts_at = '${LICENSE_START_DATE}'::timestamp, expires_at = '${LICENSE_EXPIRE_DATE}'::timestamp, updated_at = now() WHERE tenant_id = ${TENANT_ID};" >/dev/null 2>&1
+    exec_pg_sql_client "UPDATE core.licenses SET plan = 'ENTERPRISE', status = 'ACTIVE', max_users = 999999, max_storage_gb = 999999, max_monthly_operations = 999999, feature_api_access = true, feature_advanced_reports = true, feature_integrations = true, feature_dedicated_support = true, starts_at = '${LICENSE_START_DATE}'::timestamp, expires_at = '${LICENSE_EXPIRE_DATE}'::timestamp, updated_at = now() WHERE tenant_id = ${TENANT_ID};" >/dev/null 2>&1 || true
     LICENSE_UPDATE_STATUS=$?
     set -e  # Reactivar exit on error
     
     if [ $LICENSE_UPDATE_STATUS -eq 0 ]; then
-        echo -e "${GREEN}✓ Licencia actualizada a Enterprise${NC}"
+        echo -e "${GREEN}✓ Licencia actualizada a Enterprise (Hub y Cliente)${NC}"
     else
         echo -e "${RED}✗ Error al actualizar la licencia${NC}"
         exit 1
diff --git a/scripts/keycloak-entrypoint.sh b/scripts/keycloak-entrypoint.sh
old mode 100755
new mode 100644
diff --git a/scripts/postgres-app-entrypoint.sh b/scripts/postgres-app-entrypoint.sh
old mode 100755
new mode 100644
diff --git a/scripts/postgres-keycloak-entrypoint.sh b/scripts/postgres-keycloak-entrypoint.sh
old mode 100755
new mode 100644
diff --git a/start.sh b/start.sh
old mode 100755
new mode 100644
index f3e1a213..5f13c9b2
--- a/start.sh
+++ b/start.sh
@@ -60,14 +60,15 @@ fi
 echo -e "${GREEN}✓ Docker está instalado y corriendo${NC}"
 echo ""
 
-# 2. Crear archivo .env si no existe
+# 2. Configurar variables de entorno
 echo -e "${BLUE}[2/7] Configurando variables de entorno...${NC}"
+
 if [ ! -f .env ]; then
     if [ -f .env.example ]; then
         cp .env.example .env
-        echo -e "${GREEN}✓ Archivo .env creado${NC}"
+        echo -e "${GREEN}✓ Archivo .env creado desde .env.example${NC}"
     else
-        echo -e "${YELLOW}⚠ .env.example no existe, creando .env con valores por defecto${NC}"
+        echo -e "${YELLOW}⚠ .env.example no existe, creando .env básico${NC}"
         cat > .env <<EOF
 POSTGRES_APP_PASSWORD=postgres
 POSTGRES_KEYCLOAK_PASSWORD=postgres
@@ -83,11 +84,52 @@ NODE_ENV=development
 VITE_API_URL=http://localhost:8000/api
 VITE_KEYCLOAK_URL=http://localhost:8080/kcauth
 EOF
-        echo -e "${GREEN}✓ Archivo .env creado con valores por defecto${NC}"
+    fi
+fi
+
+# Preguntar por el rol si no está definido o si el usuario quiere reconfigurar
+if ! grep -q "VITE_HUB_MODE=" .env || [ "${RECONFIGURE:-false}" == "true" ]; then
+    echo -e "${YELLOW}Configuración de Rol (Hub vs Cliente)${NC}"
+    echo "1) Hub (Servidor Central)"
+    echo "2) Cliente (Sucursal/Spoke)"
+    read -p "Seleccione una opción [1-2, Enter para omitir]: " SERVER_ROLE
+
+    if [ "$SERVER_ROLE" == "1" ] || [ "$SERVER_ROLE" == "2" ]; then
+        GENERATED_TOKEN=$(openssl rand -hex 16 2>/dev/null || echo "dev-sync-token-$(date +%s)")
+        read -p "Ingrese el Token de Sincronización Secreto [Presione Enter para generar uno aleatorio: $GENERATED_TOKEN]: " SYNC_TOKEN
+        SYNC_TOKEN=${SYNC_TOKEN:-$GENERATED_TOKEN}
+        
+        if [ "$SERVER_ROLE" == "1" ]; then
+            echo -e "${GREEN}Configurando como HUB...${NC}"
+            CENTRAL_URL=""
+            SPOKE_URLS=""
+            HUB_MODE="true"
+        else
+            echo -e "${GREEN}Configurando como CLIENTE...${NC}"
+            HUB_MODE="false"
+            read -p "Ingrese la URL del Hub [http://100.78.6.108:8000/api/v1/core/help-center/sync/]: " CENTRAL_URL
+            CENTRAL_URL=${CENTRAL_URL:-http://100.78.6.108:8001/api/v1/core/help-center/sync/}
+            SPOKE_URLS=""
+        fi
+
+        # Aplicar configuraciones
+        sed -i "s|^CENTRAL_SERVER_URL=.*|CENTRAL_SERVER_URL=$CENTRAL_URL|" .env 2>/dev/null || echo "CENTRAL_SERVER_URL=$CENTRAL_URL" >> .env
+        sed -i "s|^SPOKE_URLS=.*|SPOKE_URLS=$SPOKE_URLS|" .env 2>/dev/null || echo "SPOKE_URLS=$SPOKE_URLS" >> .env
+        if ! grep -q "SYNC_SECRET_TOKEN=" .env; then
+            echo "SYNC_SECRET_TOKEN=$SYNC_TOKEN" >> .env
+        fi
+        
+        if grep -q "VITE_HUB_MODE=" .env; then
+            sed -i "s|^VITE_HUB_MODE=.*|VITE_HUB_MODE=$HUB_MODE|" .env
+        else
+            echo "VITE_HUB_MODE=$HUB_MODE" >> .env
+        fi
+        echo -e "${GREEN}✓ Configuración de rol aplicada al .env${NC}"
     fi
 else
-    echo -e "${YELLOW}⚠ .env ya existe, no se sobrescribirá${NC}"
+    echo -e "${YELLOW}⚠ .env ya contiene configuración de rol. Para cambiarlo, ejecuta con RECONFIGURE=true${NC}"
 fi
+
 echo ""
 
 # 3. Limpiar contenedores previos si existen