.

modules/customers/src/web/list/ui/blocks/customer-summary-panel/customer-address-section.tsx

@@ -11,7 +11,12 @@ export const CustomerAddressSection = ({ customer }: { customer: Customer }) =>
     <div className="p-4">
       <h3 className="mb-3 text-sm font-medium">Dirección</h3>
 
-      <a className="flex gap-3 text-sm" href={url} rel="noopener noreferrer" target="_blank">
+      <a
+        className="flex gap-3 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+        href={url}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
         <MapPinIcon className="size-4 mt-0.5" />
         <div>
           <p>{customer.street}</p>

modules/customers/src/web/list/ui/blocks/customer-summary-panel/customer-contact-section.tsx

@@ -4,24 +4,33 @@ import type { Customer } from "../../../../shared";
 
 export const CustomerContactSection = ({ customer }: { customer: Customer }) => {
   return (
-    <div className="p-4">
+    <div className="p-4 ">
       <h3 className="mb-3 text-sm font-medium">Contacto</h3>
 
       <div className="space-y-2.5">
-        <a className="flex items-center gap-3 text-sm" href={`mailto:${customer.primaryEmail}`}>
+        <a
+          className="flex items-center gap-3 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+          href={`mailto:${customer.primaryEmail}`}
+        >
           <MailIcon className="size-4" />
           <span className="truncate">{customer.primaryEmail}</span>
         </a>
 
         {customer.secondaryEmail && (
-          <a className="flex items-center gap-3 text-sm" href={`mailto:${customer.secondaryEmail}`}>
+          <a
+            className="flex items-center gap-3 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+            href={`mailto:${customer.secondaryEmail}`}
+          >
             <MailIcon className="size-4" />
             <span className="truncate">{customer.secondaryEmail}</span>
           </a>
         )}
 
         {customer.primaryPhone && (
-          <a className="flex items-center gap-3 text-sm" href={`tel:${customer.primaryPhone}`}>
+          <a
+            className="flex items-center gap-3 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+            href={`tel:${customer.primaryPhone}`}
+          >
             <PhoneIcon className="size-4" />
             <span>{customer.primaryPhone}</span>
           </a>

modules/customers/src/web/list/ui/blocks/customer-summary-panel/customer-footer-actions.tsx

@@ -4,7 +4,7 @@ import type { Customer } from "../../../../shared";
 
 export const CustomerFooterActions = ({
   customer,
-  onCreateInvoice,
+  onCreateInvoice: onCreateProforma,
   onEdit,
 }: {
   customer: Customer;
@@ -14,8 +14,8 @@ export const CustomerFooterActions = ({
   return (
     <div className="border-t p-4">
       <div className="flex gap-2">
-        <Button className="flex-1" onClick={() => onCreateInvoice?.(customer)} variant="outline">
+        <Button className="flex-1" onClick={() => onCreateProforma?.(customer)} variant="outline">
-          Nueva factura
+          Nueva proforma
         </Button>
 
         <Button className="flex-1" onClick={() => onEdit?.(customer)}>

modules/customers/src/web/list/ui/pages/list-customers-page.tsx

@@ -89,13 +89,13 @@ export const ListCustomersPage = () => {
             className="h-full"
             orientation="horizontal"
           >
-            <ResizablePanel defaultSize="65%" maxSize="75%" minSize="25%">
+            <ResizablePanel defaultSize="70%" maxSize="75%" minSize="70%">
               {listContent}
             </ResizablePanel>
 
             <ResizableHandle className="mx-4" withHandle />
 
-            <ResizablePanel defaultSize="35%" maxSize="75%" minSize="25%">
+            <ResizablePanel defaultSize="30%" maxSize="30%" minSize="25%">
               <div className="h-full">
                 <CustomerSummaryPanel
                   className="border bg-background"
@@ -118,7 +118,7 @@ export const ListCustomersPage = () => {
             </ResizablePanel>
           </ResizablePanelGroup>
         ) : (
-          <div className="flex min-h-0 flex-1 overflow-hidden border">{listContent}</div>
+          <div className="flex min-h-0 flex-1 overflow-hidden">{listContent}</div>
         )}
       </AppContent>
     </>

packages/rdx-ui/src/components/right-panel/right-panel.tsx

@@ -1,5 +1,11 @@
-import { Button } from "@repo/shadcn-ui/components";
+import {
-import { cn } from "@repo/shadcn-ui/lib/utils";
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@repo/shadcn-ui/components";
 import { XIcon } from "lucide-react";
 
 import type { RightPanelProps } from "./right-panel-types.ts";
@@ -15,18 +21,11 @@ export const RightPanel = ({
   if (!open) return null;
 
   return (
-    <aside
+    <Card className={className}>
-      aria-labelledby="right-panel-title"
+      <CardHeader>
-      className={cn("flex h-full flex-col bg-background", className)}
+        <CardTitle id="right-panel-title">{title}</CardTitle>
-    >
+        <CardAction>
-      <div className="flex items-center justify-between border-b px-4 py-3">
-        <h2 className="truncate text-sm font-semibold" id="right-panel-title">
-          {title}
-        </h2>
-
-        <div className="flex items-center gap-1">
           {headerActions}
-
           {onOpenChange ? (
             <Button
               aria-label="Cerrar panel"
@@ -37,10 +36,9 @@ export const RightPanel = ({
               <XIcon className="size-4" />
             </Button>
           ) : null}
-        </div>
+        </CardAction>
-      </div>
+      </CardHeader>
-
+      <CardContent className="-mx-4">{children}</CardContent>
-      <div className="flex-1 overflow-auto">{children}</div>
+    </Card>
-    </aside>
   );
 };