From e3eecc69423921571e9fe5d14e85179979c57aee Mon Sep 17 00:00:00 2001
From: Sergio Nicolas Lavaise <snlavaise@gmail.com>
Date: Tue, 14 Apr 2026 21:23:37 -0300
Subject: [PATCH] =?UTF-8?q?Fix:=20Responsive=20en=20Cultivos=20y=20Camas?=
 =?UTF-8?q?=20para=20dispositivos=20m=C3=B3viles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/sections/Cultivos.tsx  | 58 +++++++++++++++++++-------------------
 src/sections/MapaCamas.tsx |  2 +-
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/sections/Cultivos.tsx b/src/sections/Cultivos.tsx
index fba9333..b35cf7c 100644
--- a/src/sections/Cultivos.tsx
+++ b/src/sections/Cultivos.tsx
@@ -180,7 +180,7 @@ export function Cultivos({
         </div>
         <Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}>
           <DialogTrigger asChild>
-            <Button onClick={resetFormularioNuevo}>
+            <Button onClick={resetFormularioNuevo} className="w-full sm:w-auto">
               <Plus className="h-4 w-4 mr-2" />
               Nuevo Cultivo
             </Button>
@@ -229,7 +229,7 @@ export function Cultivos({
                   <Button size="sm" variant="ghost" onClick={() => setPacienteSeleccionado('')}>Cambiar</Button>
                 </div>
               )}
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div>
                   <Label>Fecha de Toma *</Label>
                   <Input type="date" value={fechaToma} onChange={(e) => setFechaToma(e.target.value)} />
@@ -316,7 +316,7 @@ export function Cultivos({
             <DialogTitle>Cargar Resultado Definitivo</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
                 <Label>Fecha de Resultado *</Label>
                 <Input type="date" value={fechaResultado} onChange={(e) => setFechaResultado(e.target.value)} />
@@ -397,12 +397,12 @@ export function Cultivos({
           const paciente = getPacienteById(cultivo.pacienteId);
           
           return (
-            <Card key={cultivo.id} className="hover:shadow-md transition-shadow">
+            <Card key={cultivo.id} className="hover:shadow-md transition-shadow w-full">
               <CardContent className="p-4">
                 <div className="flex flex-col gap-3">
-                  <div className="flex items-start justify-between">
+                  <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2">
                     <div className="flex items-center gap-3">
-                      <div className={`h-10 w-10 rounded-full flex items-center justify-center ${
+                      <div className={`h-10 w-10 rounded-full flex items-center justify-center shrink-0 ${
                         cultivo.estado === 'NAF/Pendiente' ? 'bg-amber-100' :
                         cultivo.estado === 'Parcial' ? 'bg-orange-100' :
                         cultivo.estado === 'Positivo' ? 'bg-red-100' : 'bg-green-100'
@@ -413,8 +413,8 @@ export function Cultivos({
                           cultivo.estado === 'Positivo' ? 'text-red-600' : 'text-green-600'
                         }`} />
                       </div>
-                      <div>
-                        <h3 className="font-bold">
+                      <div className="min-w-0">
+                        <h3 className="font-bold text-sm sm:text-base truncate">
                           {paciente ? (
                             <>
                               {(() => {
@@ -424,50 +424,50 @@ export function Cultivos({
                             </>
                           ) : 'Paciente no encontrado'}
                         </h3>
-                        <div className="flex items-center gap-3 text-sm text-gray-500">
+                        <div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm text-gray-500">
                           <span className="flex items-center gap-1">
                             <Calendar className="h-3 w-3" />
-                            Toma: {cultivo.fechaToma}
+                            {cultivo.fechaToma}
                           </span>
-                          <Badge variant="outline">{cultivo.tipoMuestra}</Badge>
-                          <Badge className={getEstadoColor(cultivo.estado)}>
+                          <Badge variant="outline" className="text-xs">{cultivo.tipoMuestra}</Badge>
+                          <Badge className={`text-xs ${getEstadoColor(cultivo.estado)}`}>
                             {getEstadoLabel(cultivo.estado)}
                           </Badge>
                         </div>
                       </div>
                     </div>
-                    <div className="flex items-center gap-2">
+                    <div className="flex flex-wrap items-center gap-1 sm:gap-2 ml-auto sm:ml-0">
                       {onActualizarCultivo && cultivo.estado === 'NAF/Pendiente' && (
                         <>
-                          <Button size="sm" onClick={() => abrirParcial(cultivo)}>
-                            <AlertCircle className="h-4 w-4 mr-1" />
-                            Parcial
+                          <Button size="sm" className="text-xs px-2 py-1" onClick={() => abrirParcial(cultivo)}>
+                            <AlertCircle className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
+                            <span className="hidden sm:inline">Parcial</span>
                           </Button>
-                          <Button size="sm" variant="default" onClick={() => abrirDefinitivo(cultivo)}>
-                            <CheckCircle2 className="h-4 w-4 mr-1" />
-                            Definitivo
+                          <Button size="sm" variant="default" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
+                            <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
+                            <span className="hidden sm:inline">Definitivo</span>
                           </Button>
                         </>
                       )}
                       {onActualizarCultivo && cultivo.estado === 'Parcial' && (
                         <>
-                          <Button size="sm" variant="outline" onClick={() => abrirParcial(cultivo)}>
-                            <Pencil className="h-4 w-4 mr-1" />
-                            Editar Parcial
+                          <Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirParcial(cultivo)}>
+                            <Pencil className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
+                            <span className="hidden sm:inline">Editar</span>
                           </Button>
-                          <Button size="sm" variant="default" onClick={() => abrirDefinitivo(cultivo)}>
-                            <CheckCircle2 className="h-4 w-4 mr-1" />
-                            Definitivo
+                          <Button size="sm" variant="default" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
+                            <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
+                            <span className="hidden sm:inline">Definitivo</span>
                           </Button>
                         </>
                       )}
                       {onActualizarCultivo && (cultivo.estado === 'Positivo' || cultivo.estado === 'Negativo') && (
-                        <Button size="sm" variant="outline" onClick={() => abrirDefinitivo(cultivo)}>
-                          <Pencil className="h-4 w-4" />
+                        <Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
+                          <Pencil className="h-3 w-3 sm:h-4 sm:w-4" />
                         </Button>
                       )}
-                      <Button size="sm" variant="ghost" className="text-red-600" onClick={() => onEliminarCultivo(cultivo.id)}>
-                        <Trash2 className="h-4 w-4" />
+                      <Button size="sm" variant="ghost" className="text-red-600 text-xs px-2 py-1" onClick={() => onEliminarCultivo(cultivo.id)}>
+                        <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
                       </Button>
                     </div>
                   </div>
diff --git a/src/sections/MapaCamas.tsx b/src/sections/MapaCamas.tsx
index ced31f4..3227998 100644
--- a/src/sections/MapaCamas.tsx
+++ b/src/sections/MapaCamas.tsx
@@ -323,7 +323,7 @@ export function MapaCamas({
 
                   <div className="space-y-2">
                     <p className="font-medium">Acciones:</p>
-                    <div className="grid grid-cols-2 gap-2">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                       {cama.estado === 'Disponible' && (
                         <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
                           <DialogTrigger asChild>