Mejorar diseño responsive de Pendientes de Sala adaptando vista en tarjetas para dispositivos móviles

src/sections/PendientesSala.tsx

@@ -177,7 +177,7 @@ export function PendientesSala({
           </div>
         </div>
         <div className="flex items-center gap-2 w-full sm:w-auto justify-end">
-          <Button variant="outline" onClick={handleCopiarPendientes} className="gap-2">
+          <Button variant="outline" onClick={handleCopiarPendientes} className="gap-2 w-full sm:w-auto">
             <Copy className="h-4 w-4" />
             Copiar Pendientes Activos
           </Button>
@@ -250,7 +250,7 @@ export function PendientesSala({
         </CardContent>
       </Card>
 
-      {/* Lista de Pendientes en Tabla / Tarjetas */}
+      {/* Lista de Pendientes en Tarjetas (móvil) y Tabla (escritorio) */}
       {pendientesFiltrados.length === 0 ? (
         <div className="text-center py-12 text-gray-400 bg-card rounded-lg border p-8">
           <ListTodo className="h-16 w-16 mx-auto mb-4 opacity-40 text-blue-500" />
@@ -258,7 +258,122 @@ export function PendientesSala({
           <p className="text-sm text-gray-500 mt-1">Pruebe cambiando los filtros de búsqueda o fecha programada.</p>
         </div>
       ) : (
-        <div className="border rounded-lg bg-card overflow-hidden shadow-sm">
+        <>
+          {/* Vista móvil en Tarjetas (block sm:hidden) */}
+          <div className="space-y-3 sm:hidden">
+            {pendientesFiltrados.map((p) => {
+              const internacion = (p.internacionId ? activeInternacionMap.get(p.internacionId) : undefined) || 
+                                    (p.pacienteId ? activeInternacionMap.get(p.pacienteId) : undefined);
+              const paciente = p.pacienteId ? getPacienteById(p.pacienteId) : undefined;
+              const cama = internacion ? getCamaById(internacion.camaId) : undefined;
+              const esRealizado = p.estado === 'realizado';
+
+              return (
+                <div 
+                  key={p.id} 
+                  className={`p-4 rounded-lg border bg-card shadow-sm space-y-3 transition-colors ${
+                    esRealizado ? 'opacity-60 bg-muted/20 border-muted' : 'border-border'
+                  }`}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <div className="flex items-center gap-1 font-semibold text-xs bg-blue-50 dark:bg-blue-950/40 text-blue-700 dark:text-blue-300 px-2 py-1 rounded">
+                        <Bed className="h-3.5 w-3.5" />
+                        <span>{cama ? `Cama ${cama.numero}` : 'Sin cama'}</span>
+                      </div>
+                      <Badge variant="outline" className="text-xs font-medium">
+                        {p.categoria || 'General'}
+                      </Badge>
+                      {p.prioridad === 'alta' ? (
+                        <Badge className="bg-red-100 text-red-800 dark:bg-red-950/80 dark:text-red-300 border-red-200 text-[11px]">
+                          Alta
+                        </Badge>
+                      ) : p.prioridad === 'media' ? (
+                        <Badge className="bg-amber-100 text-amber-800 dark:bg-amber-950/80 dark:text-amber-300 border-amber-200 text-[11px]">
+                          Media
+                        </Badge>
+                      ) : (
+                        <Badge variant="outline" className="text-[11px]">
+                          Baja
+                        </Badge>
+                      )}
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 shrink-0"
+                      onClick={() => handleToggleEstado(p)}
+                      title={esRealizado ? "Marcar como pendiente" : "Marcar como realizado"}
+                    >
+                      {esRealizado ? (
+                        <CheckSquare className="h-5 w-5 text-emerald-600" />
+                      ) : (
+                        <Square className="h-5 w-5 text-gray-400 hover:text-blue-600" />
+                      )}
+                    </Button>
+                  </div>
+
+                  <div>
+                    <div className="font-semibold text-sm text-gray-900 dark:text-white">
+                      {paciente ? `${paciente.apellido}, ${paciente.nombre}` : 'Paciente desconocido'}
+                    </div>
+                    <div className="text-xs text-muted-foreground font-mono">
+                      DNI: {paciente?.dni || 'N/A'}
+                    </div>
+                  </div>
+
+                  <div className="bg-muted/30 p-2.5 rounded text-xs space-y-1">
+                    <div className={`font-medium ${esRealizado ? 'line-through text-muted-foreground' : 'text-gray-800 dark:text-gray-200'}`}>
+                      {p.descripcion}
+                    </div>
+                    {p.observaciones && (
+                      <div className="text-[11px] text-muted-foreground">
+                        <span className="font-semibold">Obs:</span> {p.observaciones}
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="flex items-center justify-between pt-1 border-t border-border/50 text-xs">
+                    <div>
+                      {p.fechaProgramada ? (
+                        <div className="flex items-center gap-1 text-blue-700 dark:text-blue-300 font-medium">
+                          <Clock className="h-3 w-3 shrink-0" />
+                          <span>{formatDateDDMMYYYY(p.fechaProgramada)} {p.horaProgramada ? `a las ${p.horaProgramada}` : ''}</span>
+                        </div>
+                      ) : (
+                        <span className="text-muted-foreground italic text-[11px]">Sin programar</span>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-1">
+                      {internacion && (
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="h-7 px-2 text-xs text-blue-600 hover:text-blue-700 hover:bg-blue-50 gap-1"
+                          onClick={() => onVerHC(internacion.id)}
+                        >
+                          <FileText className="h-3.5 w-3.5" />
+                          <span>HC</span>
+                        </Button>
+                      )}
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="h-7 px-2 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 gap-1"
+                        onClick={() => handleEliminar(p.id)}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                        <span>Eliminar</span>
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Vista de Tabla para Escritorio (hidden sm:block) */}
+          <div className="hidden sm:block border rounded-lg bg-card overflow-hidden shadow-sm">
             <div className="overflow-x-auto">
               <Table className="w-full text-sm">
                 <TableHeader>
@@ -383,6 +498,7 @@ export function PendientesSala({
               </Table>
             </div>
           </div>
+        </>
       )}
     </div>
   );