diff --git a/frontend/src/lib/components/dashboard/ports/create-edit-dialog.svelte b/frontend/src/lib/components/dashboard/ports/create-edit-dialog.svelte
index f57ae60d..7c0df5e7 100644
--- a/frontend/src/lib/components/dashboard/ports/create-edit-dialog.svelte
+++ b/frontend/src/lib/components/dashboard/ports/create-edit-dialog.svelte
@@ -28,6 +28,11 @@
 	const isEdit = $derived(mode === 'edit' || !!item);
 	const title = $derived(isEdit ? 'Editar Puerto' : 'Nuevo Puerto');
 
+	/** Alineado con `PortCreate` / columnas en backend (ports/dto.py, models.py) */
+	const MAX_PORT_CODE = 6;
+	const MAX_LOCATION_CODE = 4;
+	const MAX_DESCRIPTION = 20;
+
 	// Atajos
 
 	let formData = $state({
@@ -115,6 +120,11 @@
 			loading = false;
 		}
 	}
+
+	function handleCancel() {
+		if (loading) return;
+		open = false;
+	}
 </script>
 
 <Dialog.Root bind:open>
@@ -134,16 +144,24 @@
 					id="port_code"
 					bind:value={formData.port_code}
 					class="col-span-3"
+					maxlength={MAX_PORT_CODE}
+					placeholder={`Máx. ${MAX_PORT_CODE} caracteres`}
+					autocomplete="off"
+					spellcheck={false}
 					disabled={loading}
 				/>
 			</div>
 
 			<div class="grid grid-cols-4 items-center gap-4">
-				<Label for="description" class="text-right">Descripción</Label>
+				<Label for="description" class="text-right">Descripción Puerto</Label>
 				<Input
 					id="description"
 					bind:value={formData.description}
 					class="col-span-3"
+					maxlength={MAX_DESCRIPTION}
+					placeholder={`Máx. ${MAX_DESCRIPTION} caracteres`}
+					autocomplete="off"
+					spellcheck={false}
 					disabled={loading}
 				/>
 			</div>
@@ -154,16 +172,24 @@
 					id="location_code"
 					bind:value={formData.location_code}
 					class="col-span-3"
+					maxlength={MAX_LOCATION_CODE}
+					placeholder={`Máx. ${MAX_LOCATION_CODE} caracteres`}
+					autocomplete="off"
+					spellcheck={false}
 					disabled={loading}
 				/>
 			</div>
 
 			<div class="grid grid-cols-4 items-center gap-4">
-				<Label for="location_description" class="text-right">Ubicación</Label>
+				<Label for="location_description" class="text-right">Descripción Ubicación</Label>
 				<Input
 					id="location_description"
 					bind:value={formData.location_description}
 					class="col-span-3"
+					maxlength={MAX_DESCRIPTION}
+					placeholder={`Máx. ${MAX_DESCRIPTION} caracteres`}
+					autocomplete="off"
+					spellcheck={false}
 					disabled={loading}
 				/>
 			</div>
@@ -192,7 +218,10 @@
 		</div>
 
 		<Dialog.Footer>
-			<Button type="submit" onclick={handleSubmit} disabled={loading}>
+			<Button type="button" variant="outline" onclick={handleCancel} disabled={loading}>
+				Cancelar
+			</Button>
+			<Button type="button" onclick={handleSubmit} disabled={loading}>
 				{loading ? 'Guardando...' : 'Guardar'}
 			</Button>
 		</Dialog.Footer>
diff --git a/frontend/src/routes/dashboard/general_catalogs/ports/+page.svelte b/frontend/src/routes/dashboard/general_catalogs/ports/+page.svelte
index da348f5c..ee13645e 100644
--- a/frontend/src/routes/dashboard/general_catalogs/ports/+page.svelte
+++ b/frontend/src/routes/dashboard/general_catalogs/ports/+page.svelte
@@ -231,8 +231,24 @@
 			<div class="flex flex-wrap items-center justify-between gap-3">
 				<Card.Title>Listado de Puertos</Card.Title>
 				<div class="flex flex-wrap items-center gap-2">
-					<Input placeholder="Código" bind:value={searchCode} oninput={handleSearch} class="h-9 w-36 bg-card lg:w-44" />
-					<Input placeholder="Descripción" bind:value={searchDesc} oninput={handleSearch} class="h-9 w-44 bg-card lg:w-64" />
+					<Input
+						placeholder="Código (máx. 6)"
+						bind:value={searchCode}
+						maxlength={6}
+						autocomplete="off"
+						spellcheck={false}
+						oninput={handleSearch}
+						class="h-9 w-36 bg-card lg:w-44"
+					/>
+					<Input
+						placeholder="Descripción (máx. 20)"
+						bind:value={searchDesc}
+						maxlength={20}
+						autocomplete="off"
+						spellcheck={false}
+						oninput={handleSearch}
+						class="h-9 w-44 bg-card lg:w-64"
+					/>
 				</div>
 			</div>
 		</Card.Header>