diff --git a/frontend/src/routes/dashboard/reports/invoices/+page.svelte b/frontend/src/routes/dashboard/reports/invoices/+page.svelte
index fc989165..5611b798 100644
--- a/frontend/src/routes/dashboard/reports/invoices/+page.svelte
+++ b/frontend/src/routes/dashboard/reports/invoices/+page.svelte
@@ -1510,12 +1510,12 @@
 </script>
 
 <div
-	class="animate-in fade-in slide-in-from-bottom-4 flex h-[calc(100vh-3.5rem)] flex-col gap-1.5 overflow-hidden duration-500"
+	class="animate-in fade-in slide-in-from-bottom-4 flex min-h-full flex-col gap-1.5 pb-4 duration-500"
 >
 	<!-- Encabezado de Página Compacto -->
-	<div class="flex shrink-0 items-center justify-between px-1">
-		<div class="flex items-center gap-3">
-			<h1 class="flex items-center gap-2 text-xl font-bold tracking-tight text-foreground">
+	<div class="flex shrink-0 flex-col gap-1 px-1 sm:flex-row sm:items-center sm:justify-between">
+		<div class="flex min-w-0 items-center gap-2 sm:gap-3">
+			<h1 class="flex items-center gap-2 text-lg font-bold tracking-tight text-foreground sm:text-xl">
 				{#if activeReportType === 'invoices'}
 					<FileSearch class="h-6 w-6 text-primary" />
 					Reporte de Facturas
@@ -1538,7 +1538,7 @@
 				V2.0
 			</span>
 		</div>
-		<div class="text-xs text-muted-foreground">
+		<div class="text-[11px] text-muted-foreground sm:text-xs">
 			{#if activeReportType === 'invoices'}
 				Reportes de Movimientos Impo/Expo
 			{:else}
@@ -1550,7 +1550,7 @@
 	<Separator />
 
 	<!-- Sección de Acceso Rápido (Gestión de Pedimentos) Compacta -->
-	<div class="grid shrink-0 grid-cols-10 gap-2">
+	<div class="grid shrink-0 grid-cols-2 gap-2 sm:grid-cols-4 md:grid-cols-5 xl:grid-cols-10">
 		{#each menuOptions as item}
 			{#if item.items && item.items.length > 0}
 				<DropdownMenu.Root>
@@ -1611,7 +1611,7 @@
 	<Separator />
 
 	<!-- Contenido Principal - Layout Normal -->
-	<div class="grid min-h-0 flex-1 grid-cols-3 content-start items-start gap-2 text-foreground">
+	<div class="grid grid-cols-1 content-start items-start gap-2 text-foreground xl:grid-cols-2 2xl:grid-cols-3">
 		{#if activeReportType === 'invoices'}
 			<!-- Columna 1: Fechas y Clasificación -->
 			<Card.Root class="flex h-full flex-col">
@@ -1621,7 +1621,7 @@
 					</Card.Title>
 				</Card.Header>
 				<Card.Content class="flex-1 space-y-3 p-3">
-					<div class="flex items-center gap-3">
+					<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
 						<div class="flex-1 space-y-1">
 							<Label class="text-xs font-bold text-muted-foreground uppercase">Fecha Inicio</Label>
 							<Input
@@ -1661,7 +1661,7 @@
 								class="mb-2 block border-b pb-1 text-xs font-bold text-muted-foreground uppercase"
 								>Importación</Label
 							>
-							<div class="grid grid-cols-3 gap-2">
+							<div class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3">
 								{#each Object.keys(types.import) as key}
 									<div class="flex items-center space-x-2">
 										<Checkbox
@@ -1686,7 +1686,7 @@
 							>
 							<div class="space-y-3">
 								<!-- Main Types -->
-								<div class="grid grid-cols-3 gap-2">
+								<div class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3">
 									<div class="flex items-center space-x-2">
 										<Checkbox
 											id="exp-m-def"
@@ -1723,7 +1723,7 @@
 								</div>
 
 								<!-- Additional Options (Sin subtítulo) -->
-								<div class="grid grid-cols-3 gap-2">
+								<div class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3">
 									{#each Object.keys(types.export.additional) as key}
 										<div class="flex items-center space-x-2">
 											<Checkbox
@@ -1752,7 +1752,7 @@
 								class="mb-2 block border-b pb-1 text-xs font-bold text-muted-foreground uppercase"
 								>Otras</Label
 							>
-							<div class="grid grid-cols-3 gap-2">
+							<div class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3">
 								{#each Object.keys(types.other) as key}
 									<div class="flex items-center space-x-2">
 										<Checkbox
@@ -1865,7 +1865,7 @@
 					</Card.Title>
 				</Card.Header>
 				<Card.Content class="flex-1 space-y-4 p-3">
-					<div class="grid grid-cols-2 gap-3">
+					<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
 						<div class="space-y-1.5">
 							<Label class="text-xs font-bold text-muted-foreground uppercase">Tipo de Fecha</Label>
 							<RadioGroup.Root bind:value={dates.type} class="flex flex-col gap-1">
@@ -1922,7 +1922,7 @@
 						<Separator />
 					</div>
 
-					<div class="grid grid-cols-2 gap-3">
+					<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
 						<div class="space-y-1.5">
 							<Label class="text-xs font-bold text-muted-foreground uppercase">Reporte</Label>
 							<RadioGroup.Root bind:value={config.reportType} class="flex flex-col gap-1.5">
@@ -2078,7 +2078,7 @@
 					<div class="space-y-3">
 						<!-- Identificadores (Pedimentos, Partes, Clases) -->
 						{#if saldosRangeType === 'pedimento' || saldosRangeType === 'parts' || saldosRangeType === 'classes'}
-							<div class="flex items-center gap-3">
+							<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
 								<div class="flex-1 space-y-1">
 									<Label class="text-xs font-bold text-muted-foreground uppercase">
 										{saldosRangeType === 'pedimento'
@@ -2150,7 +2150,7 @@
 
 						<!-- Fechas (Pago, Facturas, o adicional para Partes/Clases) -->
 						{#if saldosRangeType === 'payment_date' || saldosRangeType === 'invoice_date' || saldosRangeType === 'parts' || saldosRangeType === 'classes'}
-							<div class="flex items-center gap-3">
+							<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
 								<div class="flex-1 space-y-1">
 									<Label class="text-xs font-bold text-muted-foreground uppercase">
 										{saldosRangeType === 'payment_date' || saldosRangeType === 'invoice_date'
@@ -2199,7 +2199,7 @@
 						<Label class="mb-1 flex items-center gap-2 text-xs font-black text-primary uppercase">
 							<Printer class="h-4 w-4" /> Opciones de Impresión:
 						</Label>
-						<div class="flex items-center gap-6">
+						<div class="flex flex-wrap items-center gap-4">
 							<div class="flex items-center space-x-2">
 								<Checkbox
 									id="s-print-part"
@@ -2279,7 +2279,7 @@
 							<Label class="text-[10px] font-bold text-muted-foreground uppercase"
 								>Tipo moneda</Label
 							>
-							<RadioGroup.Root bind:value={config.currency} class="flex gap-4">
+							<RadioGroup.Root bind:value={config.currency} class="flex flex-wrap gap-4">
 								<div class="flex items-center space-x-2">
 									<RadioGroup.Item value="foreign" id="cur-f" class="h-4 w-4" />
 									<Label for="cur-f" class="cursor-pointer text-sm font-medium">Extranjera</Label>
@@ -2345,7 +2345,7 @@
 							<RadioGroup.Root
 								value={filters.omitLowBalance ? 'yes' : 'no'}
 								onValueChange={(v) => (filters.omitLowBalance = v === 'yes')}
-								class="flex gap-6"
+								class="flex flex-wrap gap-6"
 							>
 								<div class="flex items-center space-x-2">
 									<RadioGroup.Item value="yes" id="omit-y" class="h-4 w-4" />