fix: keep inventory item type presentation generic

Corrige la UX de planificación para precargar fecha/hora, resolver y autoseleccionar la Operadora vigente del Área, y expone cancelación auditada con motivo obligatorio en DRAFT/PLANNED/IN_PROGRESS, manteniendo el bloqueo por Acta sellada.

api-v3/test/unit/f6-1-operator-cancellation-ux.test.ts

@@ -0,0 +1,44 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import test from 'node:test';
+
+function source(path: string): string {
+  return readFileSync(resolve(process.cwd(), path), 'utf8');
+}
+
+test('F6.1 planning preloads the local start time and resolves the Area operator immediately', () => {
+  const page = source('../web-v2/src/pages/InspectionVisitCreateF61Page.tsx');
+  const hierarchy = source('src/inspection-visits/inspection-planning-hierarchy.service.ts');
+
+  assert.match(page, /function currentLocalDateTime\(\)/);
+  assert.match(page, /useState\(currentLocalDateTime\)/);
+  assert.match(page, /areas\/\$\{areaId\}\/operators\?at=\$\{at\}/);
+  assert.match(page, /response\.data\.length === 1/);
+  assert.match(page, /setOperatorId\(response\.data\[0\]\.id\)/);
+  assert.match(page, /Sin Operadora vigente para esa fecha/);
+  assert.match(hierarchy, /relation\.relation_role='OPERATOR'/);
+  assert.match(hierarchy, /relation\.valid_from <= \$2::timestamptz/);
+  assert.match(hierarchy, /relation\.valid_until IS NULL OR relation\.valid_until > \$2::timestamptz/);
+});
+
+test('F6.1 WEB cancellation requires an explicit audited reason and is available while in progress', () => {
+  const editor = source('../web-v2/src/pages/InspectionVisitEditorF4Page.tsx');
+  const controller = source('src/inspection-visits/inspection-visits.controller.ts');
+  const dto = source('src/inspection-visits/dto/cancel-inspection-visit.dto.ts');
+  const lifecycle = source('src/inspection-visits/inspection-visit-lifecycle.service.ts');
+
+  assert.doesNotMatch(editor, /window\.prompt\('Indicá el motivo de cancelación/);
+  assert.match(editor, /showCancelForm/);
+  assert.match(editor, /cancelReason/);
+  assert.match(editor, /<textarea/);
+  assert.match(editor, /cancelReason\.trim\(\)\.length < 10/);
+  assert.match(editor, /maxLength=\{500\}/);
+  assert.match(editor, /'DRAFT', 'PLANNED', 'IN_PROGRESS'/);
+  assert.match(editor, /Confirmar cancelación/);
+  assert.match(controller, /@Post\(':id\/cancel'\)/);
+  assert.match(dto, /@MinLength\(10\)/);
+  assert.match(dto, /@MaxLength\(4000\)/);
+  assert.match(lifecycle, /\[InspectionVisitStatus\.DRAFT, InspectionVisitStatus\.PLANNED, InspectionVisitStatus\.IN_PROGRESS\]\.includes\(visit\.status\)/);
+  assert.match(lifecycle, /INSPECTION_WITH_SEALED_ACT_CANNOT_CANCEL/);
+});

web-v2/src/features/assets/AssetHierarchyView.tsx

@@ -4,7 +4,7 @@ import { useAuth } from '../../auth/AuthContext';
 import { Alert, EmptyState, LoadingBlock, errorMessage } from '../../components/Feedback';
 import { Icon } from '../../components/Icon';
 import { getAssetLineage } from '../../lib/api';
-import type { AssetLineageItem } from '../../lib/api';
+import type { AssetLineageItem, AssetType } from '../../lib/api';
 import {
   listInventoryCompanies,
   listInventoryDepartments,
@@ -18,16 +18,61 @@ import type {
 } from '../../lib/inventoryBrowserApi';
 import { assetOperationalStatusLabel, assetStatusClass, assetStatusLabel } from './assetPresentation';
 
+const structuredInventorySections = [
+  {
+    code: 'empresa',
+    label: 'Empresas',
+    description: 'Maestro de empresas operadoras. Se vinculan a una o más Áreas sin formar parte del árbol territorial.',
+    icon: 'users' as const,
+  },
+  {
+    code: 'departamento',
+    label: 'Departamentos',
+    description: 'Primer nivel territorial. Desde cada Departamento se accede a sus Áreas.',
+    icon: 'map' as const,
+  },
+  {
+    code: 'area',
+    label: 'Áreas',
+    description: 'Cada Área pertenece a un Departamento y puede tener una o más Empresas operadoras vinculadas.',
+    icon: 'map' as const,
+  },
+  {
+    code: 'yacimiento',
+    label: 'Yacimientos',
+    description: 'Nivel operativo dentro de un Área. Organiza las Instalaciones que pertenecen a ese Yacimiento.',
+    icon: 'map' as const,
+  },
+  {
+    code: 'instalacion',
+    label: 'Instalaciones',
+    description: 'Elementos técnicos ubicados dentro de un Yacimiento y clasificados por su familia de Inventario.',
+    icon: 'layers' as const,
+  },
+  {
+    code: 'subinstalacion',
+    label: 'Subinstalaciones',
+    description: 'Último nivel estructural. Dependen de una Instalación y conservan su clasificación técnica.',
+    icon: 'layers' as const,
+  },
+] as const;
+
 function navigationHref(base: URLSearchParams, parentId?: string) {
   const params = new URLSearchParams(base);
   params.delete('view');
   params.delete('page');
   params.delete('section');
   params.delete('companyId');
+  params.delete('typeId');
   parentId ? params.set('parentId', parentId) : params.delete('parentId');
   return `/inventarios${params.size ? `?${params}` : ''}`;
 }
 
+function inventoryTypeForSection(types: AssetType[], code: string) {
+  if (code === 'empresa') return types.find((type) => type.operationalRole === 'COMPANY') ?? null;
+  return types.find((type) => type.code.toLowerCase() === code) ?? null;
+}
+
 function DepartmentCard({ department, href }: { department: InventoryBrowserDepartment; href: string }) {
   return <Link className="asset-browser-item" to={href}>
     <span className="asset-browser-item-icon"><Icon name="map" size={17} /></span>
@@ -80,7 +125,7 @@ function nextLevelLabel(typeCode: string | undefined) {
   }
 }
 
-export function AssetHierarchyView({ filters }: { filters: InventoryQuery }) {
+export function AssetHierarchyView({ filters, types }: { filters: InventoryQuery; types: AssetType[] }) {
   const { hasPermission } = useAuth();
   const canCreate = hasPermission('assets.create');
   const [searchParams] = useSearchParams();
@@ -123,24 +168,48 @@ export function AssetHierarchyView({ filters }: { filters: InventoryQuery }) {
     return <div className="asset-browser-panel">
       {error && <Alert>{error}</Alert>}
       <div className="asset-browser-section-heading">
-        <div><span className="eyebrow">INVENTARIO COMPLETO</span><h2>Departamentos</h2><p>Entrá por Departamento y navegá Área → Yacimiento → Instalación → Subinstalación hasta llegar a su clasificación y Hallazgos asociados.</p></div>
+        <div>
+          <span className="eyebrow">INVENTARIOS ESTRUCTURADOS</span>
+          <h2>Elegí qué querés administrar</h2>
+          <p>La estructura queda fija y fácil de leer: Empresas como maestro de operadoras y, por separado, Departamento → Área → Yacimiento → Instalación → Subinstalación.</p>
+        </div>
         <div className="asset-browser-current-actions"><span className="count-pill">{departments.length} Departamentos</span><span className="count-pill">{companies.length} Empresas</span></div>
       </div>
-      {departments.length === 0
-        ? <EmptyState title="Todavía no hay Departamentos" text="Creá el primer registro para comenzar a construir el Inventario manualmente." />
-        : <div className="asset-browser-list">{departments.map((department) => <DepartmentCard key={department.id} department={department} href={navigationHref(searchParams, department.id)} />)}</div>}
 
-      <div className="asset-browser-levels" aria-label="Estructura de Inventarios">
+      <div className="asset-browser-list" aria-label="Secciones estructuradas de Inventarios">
+        {structuredInventorySections.map((section, index) => {
+          const assetType = inventoryTypeForSection(types, section.code);
+          const content = <>
+            <span className="asset-browser-item-icon"><Icon name={section.icon} size={17} /></span>
+            <span className="asset-browser-item-main">
+              <strong>{section.label}</strong>
+              <small>{section.description}</small>
+            </span>
+            <span className="asset-browser-item-status"><small>{section.code === 'empresa' ? 'Maestro independiente' : `Nivel ${index}`}</small></span>
+            {assetType && <Icon name="chevron" size={16} />}
+          </>;
+          return assetType
+            ? <Link key={section.code} className="asset-browser-item" to={`/inventarios?view=list&typeId=${assetType.id}`}>{content}</Link>
+            : <div key={section.code} className="asset-browser-item" aria-disabled="true">{content}</div>;
+        })}
+      </div>
+
+      <div className="asset-browser-levels" aria-label="Jerarquía territorial de Inventarios">
         <div><span>1</span><strong>Departamento</strong><small>raíz territorial</small></div><i>›</i>
-        <div><span>2</span><strong>Área</strong><small>dentro del Departamento</small></div><i>›</i>
+        <div><span>2</span><strong>Área</strong><small>operadoras vinculadas</small></div><i>›</i>
         <div><span>3</span><strong>Yacimiento</strong><small>dentro del Área</small></div><i>›</i>
         <div><span>4</span><strong>Instalación</strong><small>clasificación técnica</small></div><i>›</i>
         <div><span>5</span><strong>Subinstalación</strong><small>clasificación técnica</small></div>
       </div>
 
       <section className="asset-browser-group" style={{ marginTop: 20 }}>
-        <div className="asset-browser-group-heading"><div><h3>Empresas</h3><p>Maestro independiente. La Empresa se vincula al Área como operadora sin alterar la estructura física.</p></div><span>{companies.length}</span></div>
-        {companies.length === 0 ? <div className="inline-empty">Todavía no hay Empresas cargadas.</div> : <div className="asset-browser-list">{companies.map((company) => <CompanyCard key={company.id} company={company} />)}</div>}
+        <div className="asset-browser-group-heading">
+          <div><h3>Recorrido por territorio</h3><p>También podés navegar como árbol: entrá por un Departamento y descendé hasta la Instalación o Subinstalación concreta.</p></div>
+          <span>{departments.length}</span>
+        </div>
+        {departments.length === 0
+          ? <EmptyState title="Todavía no hay Departamentos" text="Creá el primer registro para comenzar a construir el Inventario manualmente." />
+          : <div className="asset-browser-list">{departments.map((department) => <DepartmentCard key={department.id} department={department} href={navigationHref(searchParams, department.id)} />)}</div>}
       </section>
     </div>;
   }

web-v2/src/pages/AssetsPage.tsx

@@ -33,6 +33,40 @@ const quickViews = [
   { key: 'out', label: 'Fuera de servicio' },
 ] as const;
 
+const structuredTypeCopy: Record<string, { title: string; description: string }> = {
+  departamento: {
+    title: 'Departamentos',
+    description: 'Raíz territorial del Inventario. Cada Departamento contiene sus Áreas.',
+  },
+  area: {
+    title: 'Áreas',
+    description: 'Áreas dentro de un Departamento, con sus Empresas operadoras vinculadas.',
+  },
+  yacimiento: {
+    title: 'Yacimientos',
+    description: 'Yacimientos pertenecientes a un Área y utilizados para organizar sus Instalaciones.',
+  },
+  instalacion: {
+    title: 'Instalaciones',
+    description: 'Instalaciones dentro de un Yacimiento, con clasificación técnica y contexto operativo.',
+  },
+  subinstalacion: {
+    title: 'Subinstalaciones',
+    description: 'Subinstalaciones dependientes de una Instalación, último nivel de la estructura.',
+  },
+};
+
+function structuredPresentation(type: AssetType | undefined) {
+  if (!type) return null;
+  if (type.operationalRole === 'COMPANY') {
+    return {
+      title: 'Empresas',
+      description: 'Maestro independiente de Empresas operadoras. Se vinculan a una o más Áreas.',
+    };
+  }
+  return structuredTypeCopy[type.code.toLowerCase()] ?? null;
+}
+
 export function AssetsPage() {
   const [urlParams, setUrlParams] = useSearchParams();
   const operationalContext = useOperationalContext();
@@ -58,6 +92,8 @@ export function AssetsPage() {
   const needsValidation = quick === 'validation' ? true : undefined;
   const hasGeometry = quick === 'location' ? false : undefined;
   const effectiveOperationalStatus = quick === 'out' ? 'OUT_OF_SERVICE' as AssetOperationalStatus : operationalStatus;
+  const selectedType = types.find((type) => type.id === typeId);
+  const selectedPresentation = structuredPresentation(selectedType);
 
   useEffect(() => {
     listAssetTypes().then((data) => setTypes(data.filter((type) =>
@@ -102,15 +138,22 @@ export function AssetsPage() {
     value > 1 ? next.set('page', String(value)) : next.delete('page'); setUrlParams(next);
   };
   const advancedActive = Boolean(typeId || status || rawOperationalStatus);
+  const sectionTitle = view === 'list' && selectedPresentation ? selectedPresentation.title : 'Inventarios';
+  const sectionDescription = view === 'list' && selectedPresentation
+    ? selectedPresentation.description
+    : 'Empresas y estructura territorial: Departamento → Área → Yacimiento → Instalación → Subinstalación.';
 
   return <section>
     <div className="page-heading asset-center-heading">
       <div>
-        <span className="eyebrow">INVENTARIOS</span>
-        <h1>Inventarios</h1>
-        <p>Todos los registros: Departamento → Área → Yacimiento → Instalación → Subinstalación, más el maestro independiente de Empresas.</p>
+        <span className="eyebrow">{selectedPresentation && view === 'list' ? 'INVENTARIOS · SECCIÓN' : 'INVENTARIOS'}</span>
+        <h1>{sectionTitle}</h1>
+        <p>{sectionDescription}</p>
+      </div>
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        {selectedPresentation && view === 'list' && <Link className="button secondary" to="/inventarios"><Icon name="layers" />Ver estructura</Link>}
+        <PermissionGate permission="assets.create"><Link className="button primary" to="/inventarios/nuevo"><Icon name="plus" />Nuevo registro</Link></PermissionGate>
       </div>
-      <PermissionGate permission="assets.create"><Link className="button primary" to="/inventarios/nuevo"><Icon name="plus" />Nuevo registro</Link></PermissionGate>
     </div>
 
     <AssetCenterTabs active={view === 'hierarchy' ? 'navigate' : 'list'} />
@@ -126,7 +169,7 @@ export function AssetsPage() {
         {view === 'list' && <button type="button" className={advancedOpen || advancedActive ? 'advanced active' : 'advanced'} onClick={() => setAdvancedOpen((current) => !current)}>Más filtros</button>}
       </div>
       {view === 'list' && (advancedOpen || advancedActive) && <div className="advanced-filter-panel">
-        <label className="field compact-field"><span>Nivel</span><SearchableSelect value={typeId} onChange={(event) => update({ typeId: event.target.value || null })}><option value="">Todos los niveles</option>{types.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)}</SearchableSelect></label>
+        <label className="field compact-field"><span>Sección</span><SearchableSelect value={typeId} onChange={(event) => update({ typeId: event.target.value || null })}><option value="">Todas las secciones</option>{types.map((type) => <option key={type.id} value={type.id}>{type.operationalRole === 'COMPANY' ? 'Empresas' : structuredTypeCopy[type.code.toLowerCase()]?.title ?? type.name}</option>)}</SearchableSelect></label>
         <label className="field compact-field"><span>Estado del dato</span><SearchableSelect value={status} onChange={(event) => update({ status: event.target.value || null })}><option value="">Todos</option>{ASSET_STATUSES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</SearchableSelect></label>
         <label className="field compact-field"><span>Estado operativo</span><SearchableSelect value={rawOperationalStatus} onChange={(event) => update({ operationalStatus: event.target.value || null, quick: quick === 'out' ? null : quick === 'all' ? null : quick })}><option value="">Todos</option>{ASSET_OPERATIONAL_STATUSES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</SearchableSelect></label>
         <button type="button" className="button text filter-clear" onClick={clearFilters}>Limpiar filtros</button>
@@ -135,14 +178,14 @@ export function AssetsPage() {
 
     {error && <Alert>{error}</Alert>}
     {view === 'hierarchy'
-      ? <AssetHierarchyView filters={filters} />
+      ? <AssetHierarchyView filters={filters} types={types} />
       : loading
         ? <LoadingBlock label="Cargando Inventarios…" />
         : assets.length === 0
-          ? <EmptyState title="Todavía no hay registros" text="La base está lista para comenzar la carga manual desde Departamento." />
+          ? <EmptyState title="Todavía no hay registros" text={selectedPresentation ? `No hay registros cargados en ${selectedPresentation.title}.` : 'La base está lista para comenzar la carga manual desde Departamento.'} />
           : <div className="table-panel compact-assets-table">
             <div className="table-summary"><strong>{meta.total} registro{meta.total === 1 ? '' : 's'}</strong><span>Página {meta.page} de {Math.max(meta.totalPages, 1)}</span></div>
-            <div className="table-scroll"><table><thead><tr><th>Registro</th><th>Nivel</th><th>Ubicación / Operadora</th><th>Estado</th><th>Actualizado</th><th aria-label="Acciones" /></tr></thead><tbody>
+            <div className="table-scroll"><table><thead><tr><th>Registro</th><th>Sección</th><th>Ubicación / Operadora</th><th>Estado</th><th>Actualizado</th><th aria-label="Acciones" /></tr></thead><tbody>
               {assets.map((asset) => <tr key={asset.id}>
                 <td><div className="asset-cell"><span className="asset-symbol"><Icon name="layers" size={16} /></span><div><Link to={`/inventarios/${asset.id}`} className="table-primary">{asset.name}</Link><small>{asset.code}{asset.parent ? ` · en ${asset.parent.name}` : ''}</small></div></div></td>
                 <td><span className="tag">{asset.type.name}</span></td>

web-v2/src/pages/InspectionVisitCreateF61Page.tsx

@@ -49,6 +49,12 @@ function inspectorName(person: Inspector): string {
   return `${person.firstName} ${person.lastName}`.trim() || person.username;
 }
 
+function currentLocalDateTime(): string {
+  const now = new Date();
+  const local = new Date(now.getTime() - now.getTimezoneOffset() * 60_000);
+  return local.toISOString().slice(0, 16);
+}
+
 export function InspectionVisitCreateF61Page() {
   const navigate = useNavigate();
   const [departments, setDepartments] = useState<Option[]>([]);
@@ -61,8 +67,9 @@ export function InspectionVisitCreateF61Page() {
   const [yacimientoId, setYacimientoId] = useState('');
   const [operatorId, setOperatorId] = useState('');
   const [inspectorId, setInspectorId] = useState('');
-  const [plannedStartAt, setPlannedStartAt] = useState('');
+  const [plannedStartAt, setPlannedStartAt] = useState(currentLocalDateTime);
   const [loading, setLoading] = useState(true);
+  const [loadingOperators, setLoadingOperators] = useState(false);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState('');
 
@@ -110,12 +117,14 @@ export function InspectionVisitCreateF61Page() {
     const parsedStart = new Date(plannedStartAt);
     if (Number.isNaN(parsedStart.getTime())) return;
     const at = encodeURIComponent(parsedStart.toISOString());
+    setLoadingOperators(true);
     requestJson<{ data: Option[] }>(`/inspection-visits/planning-context/areas/${areaId}/operators?at=${at}`)
       .then((response) => {
         setOperators(response.data);
         if (response.data.length === 1 && response.data[0]) setOperatorId(response.data[0].id);
       })
-      .catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)));
+      .catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)))
+      .finally(() => setLoadingOperators(false));
   }, [areaId, plannedStartAt]);
 
   const submit = async (event: FormEvent) => {
@@ -201,10 +210,11 @@ export function InspectionVisitCreateF61Page() {
 
         <label className="field">
           <span>Operadora del Área</span>
-          <SearchableSelect value={operatorId} onChange={(event) => setOperatorId(event.target.value)} searchPlaceholder="Buscar Operadora…" required disabled={!areaId || !plannedStartAt || operators.length === 0}>
-            <option value="">{operators.length === 0 && areaId && plannedStartAt ? 'Sin Operadora vigente para esa fecha' : 'Seleccionar Operadora…'}</option>
+          <SearchableSelect value={operatorId} onChange={(event) => setOperatorId(event.target.value)} searchPlaceholder="Buscar Operadora…" required disabled={!areaId || !plannedStartAt || loadingOperators || operators.length === 0}>
+            <option value="">{loadingOperators ? 'Cargando Operadora…' : operators.length === 0 && areaId && plannedStartAt ? 'Sin Operadora vigente para esa fecha' : 'Seleccionar Operadora…'}</option>
             {operators.map((operator) => <option key={operator.id} value={operator.id}>{operator.name}</option>)}
           </SearchableSelect>
+          <small className="muted">Se obtiene de la relación vigente del Área para la fecha y hora de inicio.</small>
         </label>
 
         <label className="field">
@@ -222,7 +232,7 @@ export function InspectionVisitCreateF61Page() {
       </div>
 
       {areaId && yacimientos.length === 0 && <Alert>Esta Área no tiene Yacimientos cargados. No se puede planificar una Inspección hasta corregir su jerarquía.</Alert>}
-      {areaId && plannedStartAt && operators.length === 0 && <Alert>Esta Área no tiene una Operadora vigente. Podés consultar el Inventario, pero no planificar una Inspección operativa hasta definir esa relación.</Alert>}
+      {areaId && plannedStartAt && !loadingOperators && operators.length === 0 && <Alert>Esta Área no tiene una Operadora vigente para la fecha seleccionada. Podés consultar el Inventario, pero no planificar una Inspección operativa hasta definir esa relación.</Alert>}
 
       <div className="form-actions">
         <Link className="button secondary" to="/inspecciones">Volver</Link>

web-v2/src/pages/InspectionVisitEditorF4Page.tsx

@@ -109,6 +109,8 @@ export function InspectionVisitEditorF4Page() {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
+  const [showCancelForm, setShowCancelForm] = useState(false);
+  const [cancelReason, setCancelReason] = useState('');
 
   const applyVisit = (value: InspectionVisit, syncForm = true) => {
     setVisit(value);
@@ -287,7 +289,7 @@ export function InspectionVisitEditorF4Page() {
     finally { setBusy(false); }
   };
 
-  const lifecycleAction = async (action: 'PLAN' | 'UNPLAN' | 'CANCEL') => {
+  const lifecycleAction = async (action: 'PLAN' | 'UNPLAN') => {
     if (!id) return;
     setBusy(true); setError(''); setSuccess('');
     try {
@@ -295,23 +297,38 @@ export function InspectionVisitEditorF4Page() {
       if (action === 'PLAN') {
         updated = await planInspectionVisit(id);
         setSuccess('Inspección planificada. Ya puede iniciarse desde la APK.');
-      } else if (action === 'UNPLAN') {
+      } else {
         updated = await unplanInspectionVisit(id);
         setSuccess('La Inspección volvió a borrador para corregir la planificación.');
-      } else {
-        const reason = window.prompt('Indicá el motivo de cancelación (mínimo 10 caracteres):')?.trim() ?? '';
-        if (reason.length < 10) {
-          if (reason) setError('El motivo debe tener al menos 10 caracteres.');
-          return;
-        }
-        updated = await cancelInspectionVisit(id, reason);
-        setSuccess('Inspección cancelada con motivo auditado.');
       }
       applyVisit(updated);
     } catch (requestError) { setError(errorMessage(requestError)); }
     finally { setBusy(false); }
   };
 
+  const cancelCurrentVisit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!id) return;
+    const reason = cancelReason.trim();
+    if (reason.length < 10) {
+      setError('El motivo de cancelación debe tener al menos 10 caracteres.');
+      return;
+    }
+    if (reason.length > 500) {
+      setError('El motivo de cancelación no puede superar los 500 caracteres.');
+      return;
+    }
+    setBusy(true); setError(''); setSuccess('');
+    try {
+      const updated = await cancelInspectionVisit(id, reason);
+      applyVisit(updated);
+      setCancelReason('');
+      setShowCancelForm(false);
+      setSuccess('Inspección cancelada. El motivo quedó registrado y auditado.');
+    } catch (requestError) { setError(errorMessage(requestError)); }
+    finally { setBusy(false); }
+  };
+
   if (loading) return <LoadingBlock label="Cargando inspección…" />;
 
   return <section className="survey-editor inspection-editor">
@@ -353,7 +370,9 @@ export function InspectionVisitEditorF4Page() {
 
     {visit && <InspectionActsPanel visit={visit} />}
 
-    {visit && <article className="panel survey-status-actions"><div><strong>Flujo de la Inspección</strong><p>La oficina planifica. El inicio y cierre operativo se realizan desde la APK. Una Inspección no puede cerrarse hasta que todas sus Actas estén selladas.</p></div><div className="form-actions">{canManage && visit.status === 'DRAFT' && <button type="button" className="button primary" disabled={busy} onClick={() => void lifecycleAction('PLAN')}>Confirmar planificación</button>}{canManage && visit.status === 'PLANNED' && <button type="button" className="button secondary" disabled={busy} onClick={() => void lifecycleAction('UNPLAN')}>Volver a borrador</button>}{canManage && ['DRAFT', 'PLANNED'].includes(visit.status) && <button type="button" className="button danger-outline" disabled={busy} onClick={() => void lifecycleAction('CANCEL')}>Cancelar</button>}</div></article>}
+    {visit && <article className="panel survey-status-actions"><div><strong>Flujo de la Inspección</strong><p>La oficina planifica. El inicio y cierre operativo se realizan desde la APK. Una Inspección no puede cerrarse hasta que todas sus Actas estén selladas.</p></div><div className="form-actions">{canManage && visit.status === 'DRAFT' && <button type="button" className="button primary" disabled={busy} onClick={() => void lifecycleAction('PLAN')}>Confirmar planificación</button>}{canManage && visit.status === 'PLANNED' && <button type="button" className="button secondary" disabled={busy} onClick={() => void lifecycleAction('UNPLAN')}>Volver a borrador</button>}{canManage && ['DRAFT', 'PLANNED', 'IN_PROGRESS'].includes(visit.status) && <button type="button" className="button danger-outline" disabled={busy} onClick={() => { setError(''); setSuccess(''); setShowCancelForm(true); }}>Cancelar inspección</button>}</div></article>}
+
+    {visit && showCancelForm && ['DRAFT', 'PLANNED', 'IN_PROGRESS'].includes(visit.status) && <form className="panel form-panel" onSubmit={cancelCurrentVisit}><div className="panel-heading"><div><span className="eyebrow">CANCELACIÓN</span><h2>Cancelar inspección</h2><p className="section-copy">La cancelación es definitiva y queda auditada. No se permite si la Inspección ya tiene un Acta sellada.</p></div></div><label className="field"><span>Motivo de cancelación</span><textarea value={cancelReason} onChange={(event) => setCancelReason(event.target.value)} minLength={10} maxLength={500} rows={4} placeholder="Explicá el motivo de la cancelación…" required /><small className="muted">{cancelReason.trim().length}/500 · mínimo 10 caracteres</small></label><div className="form-actions"><button type="button" className="button secondary" disabled={busy} onClick={() => { setShowCancelForm(false); setCancelReason(''); }}>Volver</button><button type="submit" className="button danger-outline" disabled={busy || cancelReason.trim().length < 10 || cancelReason.trim().length > 500}>{busy ? 'Cancelando…' : 'Confirmar cancelación'}</button></div></form>}
 
     {visit?.status === 'PLANNED' && <div className="temporal-notice"><Icon name="clipboard" /><p><strong>Planificación lista.</strong> El Inspector asignado debe iniciar la Inspección desde la APK.</p></div>}
     {visit?.status === 'IN_PROGRESS' && <div className="temporal-notice"><Icon name="clipboard" /><p><strong>Inspección en curso.</strong> Actas, Hallazgos, firmas y cierre se registran desde la APK.</p></div>}