what

src/components/clientes/ClienteForm.tsx

@@ -24,8 +24,8 @@ interface ClienteFormProps {
 
 export function ClienteForm({ formData, setFormData, onSave, onCancel, isEdit = false }: ClienteFormProps) {
   return (
-    <div className="space-y-4">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div className="space-y-2">
           <Label htmlFor="tipoIdentificacion">Tipo Identificación *</Label>
           <Select
@@ -54,7 +54,7 @@ export function ClienteForm({ formData, setFormData, onSave, onCancel, isEdit =
           />
         </div>
 
-        <div className="space-y-2 md:col-span-2">
+        <div className="space-y-2 sm:col-span-2">
           <Label htmlFor="razonSocial">Razón Social / Nombre *</Label>
           <Input
             id="razonSocial"
@@ -64,7 +64,7 @@ export function ClienteForm({ formData, setFormData, onSave, onCancel, isEdit =
           />
         </div>
 
-        <div className="space-y-2 md:col-span-2">
+        <div className="space-y-2 sm:col-span-2">
           <Label htmlFor="direccion">Dirección *</Label>
           <Input
             id="direccion"
@@ -96,7 +96,7 @@ export function ClienteForm({ formData, setFormData, onSave, onCancel, isEdit =
         </div>
 
         {isEdit && (
-          <div className="flex items-center space-x-2 md:col-span-2">
+          <div className="flex items-center space-x-2 sm:col-span-2">
             <Switch
               id="activo"
               checked={formData.activo}

src/components/factura/ClienteSelector.tsx

@@ -101,9 +101,15 @@ export function ClienteSelector({ infoFactura, onChange }: ClienteSelectorProps)
   )
 
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <Label>Seleccionar Cliente</Label>
+    <div className="space-y-4">
+      {/* Header con título y botón */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div className="space-y-1">
+          <Label className="text-base font-medium">Seleccionar Cliente</Label>
+          <p className="text-sm text-muted-foreground">
+            Elige un cliente existente o crea uno nuevo
+          </p>
+        </div>
         <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
           <DialogTrigger asChild>
             <Button
@@ -111,12 +117,13 @@ export function ClienteSelector({ infoFactura, onChange }: ClienteSelectorProps)
               variant="outline"
               size="sm"
               onClick={() => { resetForm(); setIsCreateDialogOpen(true); }}
+              className="w-full sm:w-auto"
             >
               <Plus className="w-4 h-4 mr-2" />
               Nuevo Cliente
             </Button>
           </DialogTrigger>
-          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto sm:max-w-full sm:mx-4">
             <DialogHeader>
               <DialogTitle>Nuevo Cliente</DialogTitle>
               <DialogDescription>

src/components/factura/InfoFacturaForm.tsx

@@ -2,6 +2,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
 import { ClienteSelector } from "@/components/factura/ClienteSelector"
 import type { InfoFactura } from "@/types/factura"
 
@@ -19,19 +20,16 @@ export function InfoFacturaForm({ infoFactura, onChange }: InfoFacturaFormProps)
       </CardHeader>
       <CardContent>
         <div className="space-y-6">
-          {/* Selector de Cliente */}
-          <div className="lg:col-span-3">
+          {/* Sección de Selección de Cliente */}
+          <div className="space-y-4">
             <ClienteSelector infoFactura={infoFactura} onChange={onChange} />
           </div>
 
           {/* Separador visual */}
-          <div className="border-t pt-4">
-            <p className="text-sm text-muted-foreground mb-4">
-              Información de la factura y datos del comprador (puedes editar manualmente si es necesario)
-            </p>
-          </div>
+          <Separator />
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {/* Grid responsivo optimizado */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
             <div className="space-y-2">
               <Label htmlFor="fechaEmision">Fecha Emisión *</Label>
               <Input